File

projects/app-base-library/src/lib/assets/sketch/index/dev-stack/dev-stack.component.ts

Metadata

selector sk-dev-stack
template
<style amp-custom>
/* Sketch Template boiler plate CSS */
.sk-template {
	max-width: 100%;
	overflow: hidden;
}
.sk-ab {
	background-color: none;
	margin: 0 auto;
	transform: scale(1);
	transform-origin: 0 0;
	position: relative;
	overflow: hidden;
}
.sk-asset {
	position: absolute;
	background-repeat: no-repeat;
}
.sk-router-menu, .sk-template header  {
	text-align: center;
}
.sk-router-menu, ul {
	padding-left: 0;
	list-style: none;
}
/* Sketch Template css specific to dev-stack */
/* dev-stack-start */
.sk-ab.sk-ab-dev-stack {
	width: 768px;
	height: 862px;
}

.sk-ab-dev-stack .sk-asset.sk-Info {
	width: 738px;
	height: 399px;
	left: 15px;
	top: 435px;
}

.sk-ab-dev-stack .sk-asset.sk-Development {
	width: 738px;
	height: 189px;
	left: 15px;
	top: 225px;
}

.sk-ab-dev-stack .sk-asset.sk-Frontend {
	width: 738px;
	height: 189px;
	left: 15px;
	top: 15px;
}

.sk-ab-dev-stack .sk-asset.sk-Diagram {
	width: 516px;
	height: 577px;
	left: 127px;
	top: 189px;
}

/* dev-stack-end */
</style>

<div data-sk-paths='{"splash":{},"about":{},"dev-stack":{}}' class='sk-template sk-template-svg zoomed'>
	<div class='sk-ab sk-ab-dev-stack'>
			<div class='sk-asset sk-Info'>
<svg width="738px" height="399px" viewBox="0 0 738 399" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="sk-tspan-0">
    <!-- Generator: Sketch 44 (41411) - http://www.bohemiancoding.com/sketch -->
    <title>Info</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="index" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="dev-stack" transform="translate(-15.000000, -435.000000)">
            <g id="Info" transform="translate(15.000000, 435.000000)">
                <g id="panel" transform="translate(0.000000, 210.000000)" fill="#000000" opacity="0.498188406">
                    <rect id="Rectangle" x="0" y="0" width="738" height="189" rx="15"></rect>
                </g>
                <g id="panel" fill="#000000" opacity="0.498188406">
                    <rect id="Rectangle" x="0" y="0" width="738" height="189" rx="15"></rect>
                </g>
                <g id="server" transform="translate(84.000000, 305.000000)" fill="#FFFFFF">
                    <path d="M6,60 L54,60 L54,54 L6,54 L6,60 Z M6,36 L54,36 L54,30 L6,30 L6,36 Z M79.5,57 C79.5,54.515625 77.484375,52.5 75,52.5 C72.515625,52.5 70.5,54.515625 70.5,57 C70.5,59.484375 72.515625,61.5 75,61.5 C77.484375,61.5 79.5,59.484375 79.5,57 Z M6,12 L54,12 L54,6 L6,6 L6,12 Z M79.5,33 C79.5,30.515625 77.484375,28.5 75,28.5 C72.515625,28.5 70.5,30.515625 70.5,33 C70.5,35.484375 72.515625,37.5 75,37.5 C77.484375,37.5 79.5,35.484375 79.5,33 Z M79.5,9 C79.5,6.515625 77.484375,4.5 75,4.5 C72.515625,4.5 70.5,6.515625 70.5,9 C70.5,11.484375 72.515625,13.5 75,13.5 C77.484375,13.5 79.5,11.484375 79.5,9 Z M84,48 L84,66 L0,66 L0,48 L84,48 Z M84,24 L84,42 L0,42 L0,24 L84,24 Z M84,0 L84,18 L0,18 L0,0 L84,0 Z" id="server---FontAwesome"></path>
                </g>
                <g id="server" transform="translate(568.000000, 305.000000)" fill="#FFFFFF">
                    <path d="M6,60 L54,60 L54,54 L6,54 L6,60 Z M6,36 L54,36 L54,30 L6,30 L6,36 Z M79.5,57 C79.5,54.515625 77.484375,52.5 75,52.5 C72.515625,52.5 70.5,54.515625 70.5,57 C70.5,59.484375 72.515625,61.5 75,61.5 C77.484375,61.5 79.5,59.484375 79.5,57 Z M6,12 L54,12 L54,6 L6,6 L6,12 Z M79.5,33 C79.5,30.515625 77.484375,28.5 75,28.5 C72.515625,28.5 70.5,30.515625 70.5,33 C70.5,35.484375 72.515625,37.5 75,37.5 C77.484375,37.5 79.5,35.484375 79.5,33 Z M79.5,9 C79.5,6.515625 77.484375,4.5 75,4.5 C72.515625,4.5 70.5,6.515625 70.5,9 C70.5,11.484375 72.515625,13.5 75,13.5 C77.484375,13.5 79.5,11.484375 79.5,9 Z M84,48 L84,66 L0,66 L0,48 L84,48 Z M84,24 L84,42 L0,42 L0,24 L84,24 Z M84,0 L84,18 L0,18 L0,0 L84,0 Z" id="server---FontAwesome"></path>
                </g>
                <text id="Wordpress" font-family="OpenSans-Bold, Open Sans" font-size="19" font-weight="bold" fill="#FFFFFF">
                    <tspan x="78.2956543" y="286" class="sk-tspan-9">Wordpress</tspan>
                </text>
                <g id="server" transform="translate(328.000000, 305.000000)" fill="#FFFFFF">
                    <path d="M6,60 L54,60 L54,54 L6,54 L6,60 Z M6,36 L54,36 L54,30 L6,30 L6,36 Z M79.5,57 C79.5,54.515625 77.484375,52.5 75,52.5 C72.515625,52.5 70.5,54.515625 70.5,57 C70.5,59.484375 72.515625,61.5 75,61.5 C77.484375,61.5 79.5,59.484375 79.5,57 Z M6,12 L54,12 L54,6 L6,6 L6,12 Z M79.5,33 C79.5,30.515625 77.484375,28.5 75,28.5 C72.515625,28.5 70.5,30.515625 70.5,33 C70.5,35.484375 72.515625,37.5 75,37.5 C77.484375,37.5 79.5,35.484375 79.5,33 Z M79.5,9 C79.5,6.515625 77.484375,4.5 75,4.5 C72.515625,4.5 70.5,6.515625 70.5,9 C70.5,11.484375 72.515625,13.5 75,13.5 C77.484375,13.5 79.5,11.484375 79.5,9 Z M84,48 L84,66 L0,66 L0,48 L84,48 Z M84,24 L84,42 L0,42 L0,24 L84,24 Z M84,0 L84,18 L0,18 L0,0 L84,0 Z" id="server---FontAwesome"></path>
                </g>
                <text id="Wordpress" font-family="OpenSans-Bold, Open Sans" font-size="19" font-weight="bold" fill="#FFFFFF">
                    <tspan x="332.565674" y="286" class="sk-tspan-8">Firebase</tspan>
                </text>
                <text id="Drupal" font-family="OpenSans-Bold, Open Sans" font-size="19" font-weight="bold" fill="#FFFFFF">
                    <tspan x="578.26123" y="286" class="sk-tspan-6">Drupal</tspan>
                </text>
                <text id="Drupal" font-family="OpenSans-Bold, Open Sans" font-size="19" font-weight="bold" fill="#FFFFFF">
                    <tspan x="349.756836" y="133" class="sk-tspan-3">CMS</tspan>
                </text>
                <g id="ion-document-text" opacity="0.8" transform="translate(353.000000, 61.000000)" fill="#FFFFFF">
                    <path d="M32.7708333,11.9018817 C32.9236119,12.355289 33,12.7331227 33,13.0353943 L33,40.8064516 C33,41.5621304 32.7517386,42.2044478 32.2552083,42.7334229 C31.7586781,43.2623981 31.1666701,43.5268817 30.4791667,43.5268817 L2.63541667,43.5268817 C1.94791323,43.5268817 1.33680823,43.2623981 0.802083333,42.7334229 C0.267358438,42.2044478 0,41.5621304 0,40.8064516 L0,2.72043011 C0,1.9647513 0.267358438,1.32243395 0.802083333,0.793458781 C1.33680823,0.264483616 1.94791323,0 2.63541667,0 L20.96875,0 C21.4270856,0 21.7708322,0.0755667473 22,0.226702509 C22.3055571,0.377838271 22.5729155,0.566755139 22.8020833,0.793458781 L32.4270833,11.2217742 L32.7708333,11.9018817 Z M5.5,13.0353943 L5.5,14.1689068 C5.5,14.3956105 5.61458219,14.5089606 5.84375,14.5089606 L13.9791667,14.5089606 C14.2083345,14.5089606 14.3229167,14.3956105 14.3229167,14.1689068 L14.3229167,13.0353943 C14.3229167,12.8086906 14.2083345,12.6953405 13.9791667,12.6953405 L5.84375,12.6953405 C5.61458219,12.6953405 5.5,12.8086906 5.5,13.0353943 Z M5.5,27.5443548 L5.5,28.6778674 C5.5,28.904571 5.61458219,29.0179211 5.84375,29.0179211 L19.9375,29.0179211 C20.0902785,29.0179211 20.1666667,28.904571 20.1666667,28.6778674 L20.1666667,27.5443548 C20.1666667,27.3176512 20.0902785,27.2043011 19.9375,27.2043011 L5.84375,27.2043011 C5.61458219,27.2043011 5.5,27.3176512 5.5,27.5443548 Z M23.8333333,35.9323477 L23.8333333,34.7988351 C23.8333333,34.5721315 23.7569452,34.4587814 23.6041667,34.4587814 L5.84375,34.4587814 C5.61458219,34.4587814 5.5,34.5721315 5.5,34.7988351 L5.5,35.9323477 C5.5,36.1590513 5.61458219,36.2724014 5.84375,36.2724014 L23.6041667,36.2724014 C23.7569452,36.2724014 23.8333333,36.1590513 23.8333333,35.9323477 Z M27.5,21.4233871 L27.5,20.2898746 C27.5,20.0631709 27.4236119,19.9498208 27.2708333,19.9498208 L5.84375,19.9498208 C5.61458219,19.9498208 5.5,20.0631709 5.5,20.2898746 L5.5,21.4233871 C5.5,21.6500907 5.61458219,21.7634409 5.84375,21.7634409 L27.2708333,21.7634409 C27.4236119,21.7634409 27.5,21.6500907 27.5,21.4233871 Z M22.1145833,12.922043 L28.9895833,12.922043 L20.8541667,4.08064516 L20.8541667,11.561828 C20.8541667,12.4686425 21.2743014,12.922043 22.1145833,12.922043 Z" id="ion-document-text---Ionicons"></path>
                </g>
            </g>
        </g>
    </g>
</svg></div>
			<div class='sk-asset sk-Development'>
<svg width="738px" height="189px" viewBox="0 0 738 189" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="sk-tspan-0">
    <!-- Generator: Sketch 44 (41411) - http://www.bohemiancoding.com/sketch -->
    <title>Development</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="index" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="dev-stack" transform="translate(-15.000000, -225.000000)">
            <g id="Development" transform="translate(15.000000, 225.000000)">
                <g id="panel" opacity="0.887567935" fill="#000000">
                    <rect id="Rectangle" opacity="0.498188406" x="0" y="0" width="738" height="189" rx="15"></rect>
                </g>
                <g id="icon-screen" transform="translate(307.000000, 30.000000)" stroke="#FFFFFF" stroke-width="3">
                    <rect id="Rectangle-2" x="1.5" y="1.5" width="125" height="93" rx="15"></rect>
                </g>
                <g id="Group-2" transform="translate(351.000000, 80.000000)" fill="#FFFFFF">
                    <path d="M11.8155632,23.802005 C12.0614789,23.5413534 12.0614789,23.1403509 11.8155632,22.8796992 L4.38134136,15 L11.8155632,7.12030075 C12.0614789,6.85964912 12.0614789,6.45864662 11.8155632,6.19799499 L10.8697334,5.19548872 C10.6238177,4.93483709 10.2454858,4.93483709 9.99957008,5.19548872 L1.1844368,14.5388471 C0.938521066,14.7994987 0.938521066,15.2005013 1.1844368,15.4611529 L9.99957008,24.8045113 C10.2454858,25.0651629 10.6238177,25.0651629 10.8697334,24.8045113 L11.8155632,23.802005 Z M23.9741315,2.18908452 C24.0744164,1.84229222 23.8738466,1.47510038 23.5328779,1.37310264 L22.289345,1.02631034 C21.9684333,0.924312609 21.6074076,1.12830808 21.5071227,1.47510038 L14.0258685,27.8109155 C13.9255836,28.1577078 14.1261534,28.5248996 14.4671221,28.6268974 L15.710655,28.9736897 C16.0315667,29.0756874 16.3925924,28.8716919 16.4928773,28.5248996 L23.9741315,2.18908452 Z M36.8155632,15.4611529 C37.0614789,15.2005013 37.0614789,14.7994987 36.8155632,14.5388471 L28.0004299,5.19548872 C27.7545142,4.93483709 27.3761823,4.93483709 27.1302666,5.19548872 L26.1844368,6.19799499 C25.9385211,6.45864662 25.9385211,6.85964912 26.1844368,7.12030075 L33.6186586,15 L26.1844368,22.8796992 C25.9385211,23.1403509 25.9385211,23.5413534 26.1844368,23.802005 L27.1302666,24.8045113 C27.3761823,25.0651629 27.7545142,25.0651629 28.0004299,24.8045113 L36.8155632,15.4611529 Z" id=""></path>
                </g>
                <text id="angular" font-family="OpenSans-Bold, Open Sans" font-size="19" font-weight="bold" fill="#FFFFFF">
                    <tspan x="332.140137" y="66" class="sk-tspan-7">Angular</tspan>
                </text>
            </g>
        </g>
    </g>
</svg></div>
			<div class='sk-asset sk-Frontend'>
<svg width="738px" height="189px" viewBox="0 0 738 189" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="sk-tspan-0">
    <!-- Generator: Sketch 44 (41411) - http://www.bohemiancoding.com/sketch -->
    <title>Frontend</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="index" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="dev-stack" transform="translate(-15.000000, -15.000000)">
            <g id="Frontend" transform="translate(15.000000, 15.000000)">
                <g id="panel" fill="#000000" opacity="0.498188406">
                    <rect id="Rectangle" x="0" y="0" width="738" height="189" rx="15"></rect>
                </g>
                <g id="icon-screens" opacity="0.64" transform="translate(305.000000, 30.000000)" fill="#FFFFFF">
                    <path d="M115.092,0.696 C118.220016,0.696 120.887989,1.82398872 123.096,4.08 C125.304011,6.33601128 126.408,9.1439832 126.408,12.504 L126.408,42.6 L115.092,42.6 L115.092,12.504 L11.592,12.504 L11.592,84.504 L86.25,84.504 L86.25,96.6 L74.658,96.6 L74.658,108.696 L86.25,108.696 L86.25,120.504 L40.158,120.504 L40.158,108.696 L51.75,108.696 L51.75,96.6 L11.592,96.6 C8.3719839,96.6 5.63501127,95.400012 3.381,93 C1.12698873,90.599988 0,87.7680163 0,84.504 L0,12.504 C0,9.1439832 1.12698873,6.33601128 3.381,4.08 C5.63501127,1.82398872 8.3719839,0.696 11.592,0.696 L115.092,0.696 Z M132.342,108.696 L132.342,66.504 L103.5,66.504 L103.5,108.696 L132.342,108.696 Z M132.342,54.696 C133.906008,54.696 135.239994,55.2719942 136.344,56.424 C137.448006,57.5760058 138,58.9679918 138,60.6 L138,114.6 C138,116.232008 137.448006,117.623994 136.344,118.776 C135.239994,119.928006 133.906008,120.504 132.342,120.504 L103.5,120.504 C101.935992,120.504 100.602006,119.928006 99.498,118.776 C98.3939945,117.623994 97.842,116.232008 97.842,114.6 L97.842,60.6 C97.842,58.9679918 98.3939945,57.5760058 99.498,56.424 C100.602006,55.2719942 101.935992,54.696 103.5,54.696 L132.342,54.696 Z" id="important_devices---material"></path>
                </g>
                <text id="data.title" font-family="OpenSans-Bold, Open Sans" font-size="19" font-weight="bold" fill="#FFFFFF">
                    <tspan x="325.803223" y="82" class="sk-tspan-6">WebApp</tspan>
                </text>
            </g>
        </g>
    </g>
</svg></div>
			<div class='sk-asset sk-Diagram'>
<svg width="516px" height="511px" viewBox="0 0 516 511" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="sk-tspan-0">
    <!-- Generator: Sketch 44 (41411) - http://www.bohemiancoding.com/sketch -->
    <title>Diagram</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="index" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.644984149">
        <g id="dev-stack" transform="translate(-127.000000, -189.000000)">
            <g id="Diagram" transform="translate(127.000000, 189.000000)">
                <g id="connection" transform="translate(0.000000, 98.000000)">
                    <path d="M16.233629,16.5 L92.5,16.5" id="Line" stroke="#FFFFFF" stroke-width="1" stroke-linecap="square"></path>
                    <path id="Line-decoration-1" d="M92.5,16.5 L81.7,13.5 L81.7,19.5 L92.5,16.5 Z" stroke="#FFFFFF" stroke-width="1" stroke-linecap="square"></path>
                    <g id="icon-chevron" transform="translate(81.000000, 0.000000)" fill-rule="evenodd" fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                    <g id="icon-chevron" transform="translate(136.500000, 241.000000) rotate(180.000000) translate(-136.500000, -241.000000) translate(121.000000, 225.000000)" fill-rule="evenodd" fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                    <g id="icon-chevron" transform="translate(16.000000, 397.000000) rotate(90.000000) translate(-16.000000, -397.000000) translate(0.500000, 381.000000)" fill-rule="evenodd" fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                    <path d="M16.5,241.5 L124.063934,241.5" id="Line" stroke="#FFFFFF" stroke-width="1" stroke-linecap="square"></path>
                    <path d="M15.5,16.5 L15.5,382.505464" id="Line" stroke="#FFFFFF" stroke-width="1" stroke-linecap="square"></path>
                </g>
                <g id="Group" transform="translate(258.000000, 234.000000) rotate(-90.000000) translate(-258.000000, -234.000000) translate(208.000000, 218.000000)">
                    <path d="M81.73,16 L17.8005431,16" id="Line" stroke="#FFFFFF" stroke-linecap="square"></path>
                    <path id="Line-decoration-1" d="M17.8005431,16 L28.6005431,19 L28.6005431,13 L17.8005431,16 Z" stroke="#FFFFFF" stroke-linecap="square"></path>
                    <g id="icon-chevron" transform="translate(69.000000, 0.000000)" fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                    <g id="icon-chevron" transform="translate(15.500000, 16.000000) rotate(180.000000) translate(-15.500000, -16.000000) " fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                </g>
                <g id="Group" transform="translate(258.000000, 445.000000) rotate(-90.000000) translate(-258.000000, -445.000000) translate(208.000000, 429.000000)">
                    <path d="M81.73,16 L17.8005431,16" id="Line" stroke="#FFFFFF" stroke-linecap="square"></path>
                    <path id="Line-decoration-1" d="M17.8005431,16 L28.6005431,19 L28.6005431,13 L17.8005431,16 Z" stroke="#FFFFFF" stroke-linecap="square"></path>
                    <g id="icon-chevron" transform="translate(69.000000, 0.000000)" fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                    <g id="icon-chevron" transform="translate(15.500000, 16.000000) rotate(180.000000) translate(-15.500000, -16.000000) " fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                </g>
                <g id="Group" transform="translate(258.500000, 16.000000) rotate(-90.000000) translate(-258.500000, -16.000000) translate(243.000000, 0.000000)" fill="#FFFFFF">
                    <g id="icon-chevron">
                        <path d="M14.316752,26.6197489 L23.6159473,17.4126026 C24.1280176,16.9056012 24.1280176,16.0943988 23.6159473,15.5873974 L14.316752,6.38025109 C13.8046818,5.87324964 12.9853694,5.87324964 12.4732992,6.38025109 L10.3840527,8.448817 C9.87198244,8.95581845 9.87198244,9.76702076 10.3840527,10.2740222 L16.6722751,16.5 L10.3840527,22.7259778 C9.87198244,23.2329792 9.87198244,24.0441816 10.3840527,24.551183 L12.4732992,26.6197489 C12.9853694,27.1267504 13.8046818,27.1267504 14.316752,26.6197489 Z M31,16.5 C31,25.0572917 24.0572917,32 15.5,32 C6.94270833,32 0,25.0572917 0,16.5 C0,7.94270833 6.94270833,1 15.5,1 C24.0572917,1 31,7.94270833 31,16.5 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                </g>
                <g id="connection" transform="translate(440.000000, 337.500000) scale(-1, 1) translate(-440.000000, -337.500000) translate(364.000000, 98.000000)">
                    <path d="M16.233629,16.5 L92.5,16.5" id="Line" stroke="#FFFFFF" stroke-width="1" stroke-linecap="square"></path>
                    <path id="Line-decoration-1" d="M92.5,16.5 L81.7,13.5 L81.7,19.5 L92.5,16.5 Z" stroke="#FFFFFF" stroke-width="1" stroke-linecap="square"></path>
                    <g id="icon-chevron" transform="translate(81.000000, 0.000000)" fill-rule="evenodd" fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                    <g id="icon-chevron" transform="translate(136.500000, 241.000000) rotate(180.000000) translate(-136.500000, -241.000000) translate(121.000000, 225.000000)" fill-rule="evenodd" fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                    <g id="icon-chevron" transform="translate(16.000000, 397.000000) rotate(90.000000) translate(-16.000000, -397.000000) translate(0.500000, 381.000000)" fill-rule="evenodd" fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                    <path d="M16.5,241.5 L124.063934,241.5" id="Line" stroke="#FFFFFF" stroke-width="1" stroke-linecap="square"></path>
                    <path d="M15.5,16.5 L15.5,382.505464" id="Line" stroke="#FFFFFF" stroke-width="1" stroke-linecap="square"></path>
                </g>
                <path d="M258.5,29.4868463 L258.5,67.5054943" id="Line" stroke="#FFFFFF" stroke-linecap="square"></path>
            </g>
        </g>
    </g>
</svg></div>
</div>

Index

Properties
Methods

Constructor

constructor()

Methods

ngOnInit
ngOnInit()
Returns : void

Properties

Public artboard
artboard: any
Type : any
Public data
data: any
Type : any
import { Component, ElementRef } from '@angular/core';
	@Component({
		selector: 'sk-dev-stack',
		template: `<style amp-custom>

/* Sketch Template boiler plate CSS */
.sk-template {
	max-width: 100%;
	overflow: hidden;
}
.sk-ab {
	background-color: none;
	margin: 0 auto;
	transform: scale(1);
	transform-origin: 0 0;
	position: relative;
	overflow: hidden;
}
.sk-asset {
	position: absolute;
	background-repeat: no-repeat;
}
.sk-router-menu, .sk-template header  {
	text-align: center;
}
.sk-router-menu, ul {
	padding-left: 0;
	list-style: none;
}
/* Sketch Template css specific to dev-stack */
/* dev-stack-start */
.sk-ab.sk-ab-dev-stack {
	width: 768px;
	height: 862px;
}

.sk-ab-dev-stack .sk-asset.sk-Info {
	width: 738px;
	height: 399px;
	left: 15px;
	top: 435px;
}

.sk-ab-dev-stack .sk-asset.sk-Development {
	width: 738px;
	height: 189px;
	left: 15px;
	top: 225px;
}

.sk-ab-dev-stack .sk-asset.sk-Frontend {
	width: 738px;
	height: 189px;
	left: 15px;
	top: 15px;
}

.sk-ab-dev-stack .sk-asset.sk-Diagram {
	width: 516px;
	height: 577px;
	left: 127px;
	top: 189px;
}

/* dev-stack-end */
</style>

<div data-sk-paths='{"splash":{},"about":{},"dev-stack":{}}' class='sk-template sk-template-svg zoomed'>
	<div class='sk-ab sk-ab-dev-stack'>
			<div class='sk-asset sk-Info'>
<svg width="738px" height="399px" viewBox="0 0 738 399" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="sk-tspan-0">
    <!-- Generator: Sketch 44 (41411) - http://www.bohemiancoding.com/sketch -->
    <title>Info</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="index" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="dev-stack" transform="translate(-15.000000, -435.000000)">
            <g id="Info" transform="translate(15.000000, 435.000000)">
                <g id="panel" transform="translate(0.000000, 210.000000)" fill="#000000" opacity="0.498188406">
                    <rect id="Rectangle" x="0" y="0" width="738" height="189" rx="15"></rect>
                </g>
                <g id="panel" fill="#000000" opacity="0.498188406">
                    <rect id="Rectangle" x="0" y="0" width="738" height="189" rx="15"></rect>
                </g>
                <g id="server" transform="translate(84.000000, 305.000000)" fill="#FFFFFF">
                    <path d="M6,60 L54,60 L54,54 L6,54 L6,60 Z M6,36 L54,36 L54,30 L6,30 L6,36 Z M79.5,57 C79.5,54.515625 77.484375,52.5 75,52.5 C72.515625,52.5 70.5,54.515625 70.5,57 C70.5,59.484375 72.515625,61.5 75,61.5 C77.484375,61.5 79.5,59.484375 79.5,57 Z M6,12 L54,12 L54,6 L6,6 L6,12 Z M79.5,33 C79.5,30.515625 77.484375,28.5 75,28.5 C72.515625,28.5 70.5,30.515625 70.5,33 C70.5,35.484375 72.515625,37.5 75,37.5 C77.484375,37.5 79.5,35.484375 79.5,33 Z M79.5,9 C79.5,6.515625 77.484375,4.5 75,4.5 C72.515625,4.5 70.5,6.515625 70.5,9 C70.5,11.484375 72.515625,13.5 75,13.5 C77.484375,13.5 79.5,11.484375 79.5,9 Z M84,48 L84,66 L0,66 L0,48 L84,48 Z M84,24 L84,42 L0,42 L0,24 L84,24 Z M84,0 L84,18 L0,18 L0,0 L84,0 Z" id="server---FontAwesome"></path>
                </g>
                <g id="server" transform="translate(568.000000, 305.000000)" fill="#FFFFFF">
                    <path d="M6,60 L54,60 L54,54 L6,54 L6,60 Z M6,36 L54,36 L54,30 L6,30 L6,36 Z M79.5,57 C79.5,54.515625 77.484375,52.5 75,52.5 C72.515625,52.5 70.5,54.515625 70.5,57 C70.5,59.484375 72.515625,61.5 75,61.5 C77.484375,61.5 79.5,59.484375 79.5,57 Z M6,12 L54,12 L54,6 L6,6 L6,12 Z M79.5,33 C79.5,30.515625 77.484375,28.5 75,28.5 C72.515625,28.5 70.5,30.515625 70.5,33 C70.5,35.484375 72.515625,37.5 75,37.5 C77.484375,37.5 79.5,35.484375 79.5,33 Z M79.5,9 C79.5,6.515625 77.484375,4.5 75,4.5 C72.515625,4.5 70.5,6.515625 70.5,9 C70.5,11.484375 72.515625,13.5 75,13.5 C77.484375,13.5 79.5,11.484375 79.5,9 Z M84,48 L84,66 L0,66 L0,48 L84,48 Z M84,24 L84,42 L0,42 L0,24 L84,24 Z M84,0 L84,18 L0,18 L0,0 L84,0 Z" id="server---FontAwesome"></path>
                </g>
                <text id="Wordpress" font-family="OpenSans-Bold, Open Sans" font-size="19" font-weight="bold" fill="#FFFFFF">
                    <tspan x="78.2956543" y="286" class="sk-tspan-9">Wordpress</tspan>
                </text>
                <g id="server" transform="translate(328.000000, 305.000000)" fill="#FFFFFF">
                    <path d="M6,60 L54,60 L54,54 L6,54 L6,60 Z M6,36 L54,36 L54,30 L6,30 L6,36 Z M79.5,57 C79.5,54.515625 77.484375,52.5 75,52.5 C72.515625,52.5 70.5,54.515625 70.5,57 C70.5,59.484375 72.515625,61.5 75,61.5 C77.484375,61.5 79.5,59.484375 79.5,57 Z M6,12 L54,12 L54,6 L6,6 L6,12 Z M79.5,33 C79.5,30.515625 77.484375,28.5 75,28.5 C72.515625,28.5 70.5,30.515625 70.5,33 C70.5,35.484375 72.515625,37.5 75,37.5 C77.484375,37.5 79.5,35.484375 79.5,33 Z M79.5,9 C79.5,6.515625 77.484375,4.5 75,4.5 C72.515625,4.5 70.5,6.515625 70.5,9 C70.5,11.484375 72.515625,13.5 75,13.5 C77.484375,13.5 79.5,11.484375 79.5,9 Z M84,48 L84,66 L0,66 L0,48 L84,48 Z M84,24 L84,42 L0,42 L0,24 L84,24 Z M84,0 L84,18 L0,18 L0,0 L84,0 Z" id="server---FontAwesome"></path>
                </g>
                <text id="Wordpress" font-family="OpenSans-Bold, Open Sans" font-size="19" font-weight="bold" fill="#FFFFFF">
                    <tspan x="332.565674" y="286" class="sk-tspan-8">Firebase</tspan>
                </text>
                <text id="Drupal" font-family="OpenSans-Bold, Open Sans" font-size="19" font-weight="bold" fill="#FFFFFF">
                    <tspan x="578.26123" y="286" class="sk-tspan-6">Drupal</tspan>
                </text>
                <text id="Drupal" font-family="OpenSans-Bold, Open Sans" font-size="19" font-weight="bold" fill="#FFFFFF">
                    <tspan x="349.756836" y="133" class="sk-tspan-3">CMS</tspan>
                </text>
                <g id="ion-document-text" opacity="0.8" transform="translate(353.000000, 61.000000)" fill="#FFFFFF">
                    <path d="M32.7708333,11.9018817 C32.9236119,12.355289 33,12.7331227 33,13.0353943 L33,40.8064516 C33,41.5621304 32.7517386,42.2044478 32.2552083,42.7334229 C31.7586781,43.2623981 31.1666701,43.5268817 30.4791667,43.5268817 L2.63541667,43.5268817 C1.94791323,43.5268817 1.33680823,43.2623981 0.802083333,42.7334229 C0.267358438,42.2044478 0,41.5621304 0,40.8064516 L0,2.72043011 C0,1.9647513 0.267358438,1.32243395 0.802083333,0.793458781 C1.33680823,0.264483616 1.94791323,0 2.63541667,0 L20.96875,0 C21.4270856,0 21.7708322,0.0755667473 22,0.226702509 C22.3055571,0.377838271 22.5729155,0.566755139 22.8020833,0.793458781 L32.4270833,11.2217742 L32.7708333,11.9018817 Z M5.5,13.0353943 L5.5,14.1689068 C5.5,14.3956105 5.61458219,14.5089606 5.84375,14.5089606 L13.9791667,14.5089606 C14.2083345,14.5089606 14.3229167,14.3956105 14.3229167,14.1689068 L14.3229167,13.0353943 C14.3229167,12.8086906 14.2083345,12.6953405 13.9791667,12.6953405 L5.84375,12.6953405 C5.61458219,12.6953405 5.5,12.8086906 5.5,13.0353943 Z M5.5,27.5443548 L5.5,28.6778674 C5.5,28.904571 5.61458219,29.0179211 5.84375,29.0179211 L19.9375,29.0179211 C20.0902785,29.0179211 20.1666667,28.904571 20.1666667,28.6778674 L20.1666667,27.5443548 C20.1666667,27.3176512 20.0902785,27.2043011 19.9375,27.2043011 L5.84375,27.2043011 C5.61458219,27.2043011 5.5,27.3176512 5.5,27.5443548 Z M23.8333333,35.9323477 L23.8333333,34.7988351 C23.8333333,34.5721315 23.7569452,34.4587814 23.6041667,34.4587814 L5.84375,34.4587814 C5.61458219,34.4587814 5.5,34.5721315 5.5,34.7988351 L5.5,35.9323477 C5.5,36.1590513 5.61458219,36.2724014 5.84375,36.2724014 L23.6041667,36.2724014 C23.7569452,36.2724014 23.8333333,36.1590513 23.8333333,35.9323477 Z M27.5,21.4233871 L27.5,20.2898746 C27.5,20.0631709 27.4236119,19.9498208 27.2708333,19.9498208 L5.84375,19.9498208 C5.61458219,19.9498208 5.5,20.0631709 5.5,20.2898746 L5.5,21.4233871 C5.5,21.6500907 5.61458219,21.7634409 5.84375,21.7634409 L27.2708333,21.7634409 C27.4236119,21.7634409 27.5,21.6500907 27.5,21.4233871 Z M22.1145833,12.922043 L28.9895833,12.922043 L20.8541667,4.08064516 L20.8541667,11.561828 C20.8541667,12.4686425 21.2743014,12.922043 22.1145833,12.922043 Z" id="ion-document-text---Ionicons"></path>
                </g>
            </g>
        </g>
    </g>
</svg></div>
			<div class='sk-asset sk-Development'>
<svg width="738px" height="189px" viewBox="0 0 738 189" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="sk-tspan-0">
    <!-- Generator: Sketch 44 (41411) - http://www.bohemiancoding.com/sketch -->
    <title>Development</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="index" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="dev-stack" transform="translate(-15.000000, -225.000000)">
            <g id="Development" transform="translate(15.000000, 225.000000)">
                <g id="panel" opacity="0.887567935" fill="#000000">
                    <rect id="Rectangle" opacity="0.498188406" x="0" y="0" width="738" height="189" rx="15"></rect>
                </g>
                <g id="icon-screen" transform="translate(307.000000, 30.000000)" stroke="#FFFFFF" stroke-width="3">
                    <rect id="Rectangle-2" x="1.5" y="1.5" width="125" height="93" rx="15"></rect>
                </g>
                <g id="Group-2" transform="translate(351.000000, 80.000000)" fill="#FFFFFF">
                    <path d="M11.8155632,23.802005 C12.0614789,23.5413534 12.0614789,23.1403509 11.8155632,22.8796992 L4.38134136,15 L11.8155632,7.12030075 C12.0614789,6.85964912 12.0614789,6.45864662 11.8155632,6.19799499 L10.8697334,5.19548872 C10.6238177,4.93483709 10.2454858,4.93483709 9.99957008,5.19548872 L1.1844368,14.5388471 C0.938521066,14.7994987 0.938521066,15.2005013 1.1844368,15.4611529 L9.99957008,24.8045113 C10.2454858,25.0651629 10.6238177,25.0651629 10.8697334,24.8045113 L11.8155632,23.802005 Z M23.9741315,2.18908452 C24.0744164,1.84229222 23.8738466,1.47510038 23.5328779,1.37310264 L22.289345,1.02631034 C21.9684333,0.924312609 21.6074076,1.12830808 21.5071227,1.47510038 L14.0258685,27.8109155 C13.9255836,28.1577078 14.1261534,28.5248996 14.4671221,28.6268974 L15.710655,28.9736897 C16.0315667,29.0756874 16.3925924,28.8716919 16.4928773,28.5248996 L23.9741315,2.18908452 Z M36.8155632,15.4611529 C37.0614789,15.2005013 37.0614789,14.7994987 36.8155632,14.5388471 L28.0004299,5.19548872 C27.7545142,4.93483709 27.3761823,4.93483709 27.1302666,5.19548872 L26.1844368,6.19799499 C25.9385211,6.45864662 25.9385211,6.85964912 26.1844368,7.12030075 L33.6186586,15 L26.1844368,22.8796992 C25.9385211,23.1403509 25.9385211,23.5413534 26.1844368,23.802005 L27.1302666,24.8045113 C27.3761823,25.0651629 27.7545142,25.0651629 28.0004299,24.8045113 L36.8155632,15.4611529 Z" id=""></path>
                </g>
                <text id="angular" font-family="OpenSans-Bold, Open Sans" font-size="19" font-weight="bold" fill="#FFFFFF">
                    <tspan x="332.140137" y="66" class="sk-tspan-7">Angular</tspan>
                </text>
            </g>
        </g>
    </g>
</svg></div>
			<div class='sk-asset sk-Frontend'>
<svg width="738px" height="189px" viewBox="0 0 738 189" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="sk-tspan-0">
    <!-- Generator: Sketch 44 (41411) - http://www.bohemiancoding.com/sketch -->
    <title>Frontend</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="index" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="dev-stack" transform="translate(-15.000000, -15.000000)">
            <g id="Frontend" transform="translate(15.000000, 15.000000)">
                <g id="panel" fill="#000000" opacity="0.498188406">
                    <rect id="Rectangle" x="0" y="0" width="738" height="189" rx="15"></rect>
                </g>
                <g id="icon-screens" opacity="0.64" transform="translate(305.000000, 30.000000)" fill="#FFFFFF">
                    <path d="M115.092,0.696 C118.220016,0.696 120.887989,1.82398872 123.096,4.08 C125.304011,6.33601128 126.408,9.1439832 126.408,12.504 L126.408,42.6 L115.092,42.6 L115.092,12.504 L11.592,12.504 L11.592,84.504 L86.25,84.504 L86.25,96.6 L74.658,96.6 L74.658,108.696 L86.25,108.696 L86.25,120.504 L40.158,120.504 L40.158,108.696 L51.75,108.696 L51.75,96.6 L11.592,96.6 C8.3719839,96.6 5.63501127,95.400012 3.381,93 C1.12698873,90.599988 0,87.7680163 0,84.504 L0,12.504 C0,9.1439832 1.12698873,6.33601128 3.381,4.08 C5.63501127,1.82398872 8.3719839,0.696 11.592,0.696 L115.092,0.696 Z M132.342,108.696 L132.342,66.504 L103.5,66.504 L103.5,108.696 L132.342,108.696 Z M132.342,54.696 C133.906008,54.696 135.239994,55.2719942 136.344,56.424 C137.448006,57.5760058 138,58.9679918 138,60.6 L138,114.6 C138,116.232008 137.448006,117.623994 136.344,118.776 C135.239994,119.928006 133.906008,120.504 132.342,120.504 L103.5,120.504 C101.935992,120.504 100.602006,119.928006 99.498,118.776 C98.3939945,117.623994 97.842,116.232008 97.842,114.6 L97.842,60.6 C97.842,58.9679918 98.3939945,57.5760058 99.498,56.424 C100.602006,55.2719942 101.935992,54.696 103.5,54.696 L132.342,54.696 Z" id="important_devices---material"></path>
                </g>
                <text id="data.title" font-family="OpenSans-Bold, Open Sans" font-size="19" font-weight="bold" fill="#FFFFFF">
                    <tspan x="325.803223" y="82" class="sk-tspan-6">WebApp</tspan>
                </text>
            </g>
        </g>
    </g>
</svg></div>
			<div class='sk-asset sk-Diagram'>
<svg width="516px" height="511px" viewBox="0 0 516 511" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="sk-tspan-0">
    <!-- Generator: Sketch 44 (41411) - http://www.bohemiancoding.com/sketch -->
    <title>Diagram</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="index" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.644984149">
        <g id="dev-stack" transform="translate(-127.000000, -189.000000)">
            <g id="Diagram" transform="translate(127.000000, 189.000000)">
                <g id="connection" transform="translate(0.000000, 98.000000)">
                    <path d="M16.233629,16.5 L92.5,16.5" id="Line" stroke="#FFFFFF" stroke-width="1" stroke-linecap="square"></path>
                    <path id="Line-decoration-1" d="M92.5,16.5 L81.7,13.5 L81.7,19.5 L92.5,16.5 Z" stroke="#FFFFFF" stroke-width="1" stroke-linecap="square"></path>
                    <g id="icon-chevron" transform="translate(81.000000, 0.000000)" fill-rule="evenodd" fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                    <g id="icon-chevron" transform="translate(136.500000, 241.000000) rotate(180.000000) translate(-136.500000, -241.000000) translate(121.000000, 225.000000)" fill-rule="evenodd" fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                    <g id="icon-chevron" transform="translate(16.000000, 397.000000) rotate(90.000000) translate(-16.000000, -397.000000) translate(0.500000, 381.000000)" fill-rule="evenodd" fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                    <path d="M16.5,241.5 L124.063934,241.5" id="Line" stroke="#FFFFFF" stroke-width="1" stroke-linecap="square"></path>
                    <path d="M15.5,16.5 L15.5,382.505464" id="Line" stroke="#FFFFFF" stroke-width="1" stroke-linecap="square"></path>
                </g>
                <g id="Group" transform="translate(258.000000, 234.000000) rotate(-90.000000) translate(-258.000000, -234.000000) translate(208.000000, 218.000000)">
                    <path d="M81.73,16 L17.8005431,16" id="Line" stroke="#FFFFFF" stroke-linecap="square"></path>
                    <path id="Line-decoration-1" d="M17.8005431,16 L28.6005431,19 L28.6005431,13 L17.8005431,16 Z" stroke="#FFFFFF" stroke-linecap="square"></path>
                    <g id="icon-chevron" transform="translate(69.000000, 0.000000)" fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                    <g id="icon-chevron" transform="translate(15.500000, 16.000000) rotate(180.000000) translate(-15.500000, -16.000000) " fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                </g>
                <g id="Group" transform="translate(258.000000, 445.000000) rotate(-90.000000) translate(-258.000000, -445.000000) translate(208.000000, 429.000000)">
                    <path d="M81.73,16 L17.8005431,16" id="Line" stroke="#FFFFFF" stroke-linecap="square"></path>
                    <path id="Line-decoration-1" d="M17.8005431,16 L28.6005431,19 L28.6005431,13 L17.8005431,16 Z" stroke="#FFFFFF" stroke-linecap="square"></path>
                    <g id="icon-chevron" transform="translate(69.000000, 0.000000)" fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                    <g id="icon-chevron" transform="translate(15.500000, 16.000000) rotate(180.000000) translate(-15.500000, -16.000000) " fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                </g>
                <g id="Group" transform="translate(258.500000, 16.000000) rotate(-90.000000) translate(-258.500000, -16.000000) translate(243.000000, 0.000000)" fill="#FFFFFF">
                    <g id="icon-chevron">
                        <path d="M14.316752,26.6197489 L23.6159473,17.4126026 C24.1280176,16.9056012 24.1280176,16.0943988 23.6159473,15.5873974 L14.316752,6.38025109 C13.8046818,5.87324964 12.9853694,5.87324964 12.4732992,6.38025109 L10.3840527,8.448817 C9.87198244,8.95581845 9.87198244,9.76702076 10.3840527,10.2740222 L16.6722751,16.5 L10.3840527,22.7259778 C9.87198244,23.2329792 9.87198244,24.0441816 10.3840527,24.551183 L12.4732992,26.6197489 C12.9853694,27.1267504 13.8046818,27.1267504 14.316752,26.6197489 Z M31,16.5 C31,25.0572917 24.0572917,32 15.5,32 C6.94270833,32 0,25.0572917 0,16.5 C0,7.94270833 6.94270833,1 15.5,1 C24.0572917,1 31,7.94270833 31,16.5 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                </g>
                <g id="connection" transform="translate(440.000000, 337.500000) scale(-1, 1) translate(-440.000000, -337.500000) translate(364.000000, 98.000000)">
                    <path d="M16.233629,16.5 L92.5,16.5" id="Line" stroke="#FFFFFF" stroke-width="1" stroke-linecap="square"></path>
                    <path id="Line-decoration-1" d="M92.5,16.5 L81.7,13.5 L81.7,19.5 L92.5,16.5 Z" stroke="#FFFFFF" stroke-width="1" stroke-linecap="square"></path>
                    <g id="icon-chevron" transform="translate(81.000000, 0.000000)" fill-rule="evenodd" fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                    <g id="icon-chevron" transform="translate(136.500000, 241.000000) rotate(180.000000) translate(-136.500000, -241.000000) translate(121.000000, 225.000000)" fill-rule="evenodd" fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                    <g id="icon-chevron" transform="translate(16.000000, 397.000000) rotate(90.000000) translate(-16.000000, -397.000000) translate(0.500000, 381.000000)" fill-rule="evenodd" fill="#FFFFFF">
                        <path d="M14.404035,26.1674073 L23.5245816,17.0468608 C24.0268144,16.544628 24.0268144,15.7410556 23.5245816,15.2388229 L14.404035,6.11827629 C13.9018023,5.61604355 13.0982299,5.61604355 12.5959972,6.11827629 L10.5468876,8.16738588 C10.0446548,8.66961862 10.0446548,9.47319101 10.5468876,9.97542375 L16.7143056,16.1428418 L10.5468876,22.3102599 C10.0446548,22.8124926 10.0446548,23.616065 10.5468876,24.1182978 L12.5959972,26.1674073 C13.0982299,26.6696401 13.9018023,26.6696401 14.404035,26.1674073 Z M30.8571796,16.1428418 C30.8571796,24.6607091 23.9464571,31.5714316 15.4285898,31.5714316 C6.91072252,31.5714316 0,24.6607091 0,16.1428418 C0,7.62497452 6.91072252,0.714251995 15.4285898,0.714251995 C23.9464571,0.714251995 30.8571796,7.62497452 30.8571796,16.1428418 Z" id="Chevron-Circle-Right---FontAwesome"></path>
                    </g>
                    <path d="M16.5,241.5 L124.063934,241.5" id="Line" stroke="#FFFFFF" stroke-width="1" stroke-linecap="square"></path>
                    <path d="M15.5,16.5 L15.5,382.505464" id="Line" stroke="#FFFFFF" stroke-width="1" stroke-linecap="square"></path>
                </g>
                <path d="M258.5,29.4868463 L258.5,67.5054943" id="Line" stroke="#FFFFFF" stroke-linecap="square"></path>
            </g>
        </g>
    </g>
</svg></div>
</div>
`
	})
	export class DevStackComponent {
	     public artboard: any;
	     public data: any;
	     constructor() { }
	     ngOnInit() {
	        document.dispatchEvent(new CustomEvent( "sketch-artboard-init",{detail:{"name":"{}","selector":"sk-dev-stack","className":"DevStack","pageName":"{}","options":{"imageFormat":{},"embedSvg":true,"imageScales":[1]},"paths":{"splash":{},"about":{},"dev-stack":{}},"classes":{"Splash":"Splash","About":"About","DevStack":"DevStack"}}}));
	     }
	}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""