@ngfx/ui
Version:
Angular UI library for gaming and creative applications
1 lines • 22.4 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"NgFxController":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":5,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"createSurface":[{"__symbolic":"method"}],"getSurface":[{"__symbolic":"method"}],"destroySurface":[{"__symbolic":"method"}]}},"NgFxButtonModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":12}],"declarations":[{"__symbolic":"reference","name":"NgFxButtonComponent"}],"exports":[{"__symbolic":"reference","name":"NgFxButtonComponent"}]}]}],"members":{}},"NgFxButtonComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"ngfx-button, [ngfx-button]","template":"<div class=\"ngfx__title\" [hidden]=\"!hasName()\"><span class=\"control__name\">{{control.name.charAt(0).toUpperCase()}}</span> <span class=\"slave__indicator\" [ngClass]=\"{'is--visible': control.hasRemoteInput === true }\"></span></div><div class=\"ngfx__button\" [ngClass]=\"{'is--active' : control.currentValue === true }\"></div>","styles":[":host {\n display: flex;\n flex-direction: column;\n justify-content: left;\n}\n\n:host .ngfx__title {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n -webkit-transform: translateY(-4px);\n transform: translateY(-4px);\n}\n\n:host .ngfx__title .control__name {\n color: rgba(255, 255, 255, 0.3);\n font-size: 12px;\n font-weight: 700;\n}\n\n:host .ngfx__title .slave__indicator {\n width: 8px;\n height: 8px;\n border-radius: 50% 50%;\n background: rgba(255, 255, 255, 0.5);\n -webkit-transform: translateX(4px) translateY(3px);\n transform: translateX(4px) translateY(3px);\n display: none;\n}\n\n:host .ngfx__title .slave__indicator.is--visible {\n display: block;\n}\n\n:host .ngfx__button {\n width: 100%;\n min-height: 32px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-radius: 14px;\n cursor: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAACEUlEQVRYhe2Z646CMBBGTwusl/d/VnUV6P6Yjq0V5KJISfZLSCMBPYxfp2XGOOd4QwYo/GH9YZJrHND6o/HH7B8t37iv8qNCKkQKY6JR4Wvg5sdJMhMjXAI7Pxr/41OjZQgPUQO/TAAfC2yAAxJVENBPyPrxBlzGfO8Y4AqBtYj/llCBwJ4R+F4NAf8gsPC5qPZJo31BbPLyoi7tgCNhoiwtnQ8HYN93UR+wRnbOpHpHDrHdHgnYk7qASySy34aN1SIBe0q7KbAh2GAtWAg2PJIsRCnw3p/7hmeH5BCWQ3wyBi4R7y6VuuaoIayowCNwp8kz0Z1NgQvkKXKwQqoWYSshAP+shjNeFQTgknWzwpAcfsNlCVvE3IEtUFjEv1tRoW8JW9HmgE36epOzHB54U/oHXlqaf9NaQo4ygMtlKzlWmwNulnx1X0KNRaouLXn7WKtMjWaJmvyBa7yHAa4rwozVDUIebpAnyDEvq21r/aDqLQ+tLEPEFgPXiDVy2h8XCNO9HJtaQEueOUxA3UVe4pMpsANOdJf+vynjGU4kC1vXJKuROu2aE9DSUyvu63GoydeoYBa8qBG/asroDXvCSrOk1AZnXmSsXFoGus29MLCIjW3KWCTSm2jKxKqQspZaaU4dOW17XRloxDzcPLMTmjYWY3V9YZwitbGozcVJmgscgyh0wWP0VPovNIT27WxL/QG7cp5Q+WnBUwAAAABJRU5ErkJggg==\") 0 0, pointer;\n}\n\n:host .ngfx__button.is--active {\n background: rgba(255, 255, 255, 0.1);\n border: 2px solid rgba(255, 255, 255, 0.5);\n}\n"]}]}],"members":{"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3},"arguments":["control"]}]}],"transform":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":17,"character":3},"arguments":["style.transform"]}]}],"gridArea":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":22,"character":3},"arguments":["style.grid-area"]}]}],"placeSelf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":27,"character":3},"arguments":["style.place-self"]}]}],"onMouseup":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":32,"character":3},"arguments":["mouseup",["$event"]]}]}],"onMousedown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":44,"character":3},"arguments":["mousedown",["$event"]]}]}],"onTouchStart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":53,"character":3},"arguments":["touchstart",["$event"]]}]}],"onTouchEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":58,"character":3},"arguments":["touchend",["$event"]]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"NgFxController"},{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":63,"character":71}]}],"setActive":[{"__symbolic":"method"}],"hasName":[{"__symbolic":"method"}],"sanitize":[{"__symbolic":"method"}]}},"NgFxSliderModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":12}],"declarations":[{"__symbolic":"reference","name":"NgFxDraggableDirective"},{"__symbolic":"reference","name":"NgFxSliderComponent"}],"exports":[{"__symbolic":"reference","name":"NgFxDraggableDirective"},{"__symbolic":"reference","name":"NgFxSliderComponent"}]}]}],"members":{}},"NgFxDraggableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":5,"character":1},"arguments":[{"selector":"[ngfxDraggable]"}]}],"members":{"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3},"arguments":["control"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":21,"character":27},{"__symbolic":"reference","name":"NgFxController"}]}],"ngOnInit":[{"__symbolic":"method"}],"onMouseLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":48,"character":3},"arguments":["mouseleave",["$event"]]}]}],"onMouseEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":52,"character":3},"arguments":["mouseenter",["$event"]]}]}],"onTouchStart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":59,"character":3},"arguments":["touchstart",["$event"]]}]}],"onTouchDown":[{"__symbolic":"method"}],"onMouseDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":88,"character":3},"arguments":["mousedown",["$event"]]}]}],"onTouchMove":[{"__symbolic":"method"}],"onMouseMove":[{"__symbolic":"method"}],"onMouseUp":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":198,"character":3},"arguments":["mouseup",["$event"]]}]}],"onTouchEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":222,"character":3},"arguments":["touchend",["$event"]]}]}],"onEvent":[{"__symbolic":"method"}],"getCenter":[{"__symbolic":"method"}],"distance":[{"__symbolic":"method"}],"scale":[{"__symbolic":"method"}],"circularBounds":[{"__symbolic":"method"}],"clamp":[{"__symbolic":"method"}],"setActualPosition":[{"__symbolic":"method"}],"setPosition":[{"__symbolic":"method"}]}},"NgFxSliderComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"ngfx-slider, [ngfx-slider]","template":"<div class=\"ngfx__slider\" [ngClass]=\"{'is--hor' : control.orient === 'is--hor',\n 'is--vert' : control.orient === 'is--vert',\n 'is--joystick' : control.orient === 'is--joystick'}\"><div class=\"ngfx__title\" [hidden]=\"!hasName()\"><span class=\"control__name\">{{control.name.charAt(0).toUpperCase()}}</span> <span class=\"slave__indicator\" [ngClass]=\"{'is--visible': control.hasRemoteInput === true }\"></span></div><div class=\"ngfx__draggable\" ngfxDraggable [control]=\"control\" [ngClass]=\"{'is--active': control.hasUserInput === true }\"><div class=\"ngfx__range\"><div class=\"ngfx__handle\"></div></div></div></div>","styles":["/**\n * Convert font-size from px to rem with px fallback\n *\n * @param $size - the value in pixel you want to convert\n *\n * e.g. p {@include fontSize(12px);}\n *\n */\n:host {\n display: block;\n}\n\n:host:after {\n content: '';\n display: table;\n clear: both;\n}\n\n:host .ngfx__slider .ngfx__title {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n -webkit-transform: translateY(0px);\n transform: translateY(0px);\n}\n\n:host .ngfx__slider .ngfx__title .control__name {\n color: rgba(255, 255, 255, 0.3);\n font-size: 12px;\n font-weight: 700;\n}\n\n:host .ngfx__slider .ngfx__title .slave__indicator {\n width: 8px;\n height: 8px;\n border-radius: 50% 50%;\n background: rgba(255, 255, 255, 0.5);\n -webkit-transform: translateX(4px) translateY(3px);\n transform: translateX(4px) translateY(3px);\n display: none;\n}\n\n:host .ngfx__slider .ngfx__title .slave__indicator.is--visible {\n display: block;\n}\n\n:host .ngfx__slider .ngfx__draggable {\n display: block;\n z-index: 1000;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-radius: 12px;\n -webkit-transform: translateY(8px);\n transform: translateY(8px);\n}\n\n:host .ngfx__slider .ngfx__draggable.is--active {\n background: rgba(255, 255, 255, 0.1);\n border: 2px solid rgba(255, 255, 255, 0.5);\n}\n\n:host .ngfx__slider .ngfx__draggable .ngfx__range {\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n:host .ngfx__slider .ngfx__draggable .ngfx__handle {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: url(\"data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3c!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:none;stroke:%23FFFFFF;stroke-width:8;stroke-miterlimit:10;%7d .st1%7bdisplay:none;%7d .st2%7bdisplay:inline;fill:none;stroke:%23FFFFFF;stroke-width:8;stroke-miterlimit:10;%7d %3c/style%3e%3cg id='Layer_1'%3e%3ccircle class='st0' cx='256' cy='256' r='245.2'/%3e%3c/g%3e%3cg id='Layer_2' class='st1'%3e%3cline class='st2' x1='256' y1='3.7' x2='256' y2='508.3'/%3e%3c/g%3e%3cg id='Layer_3' class='st1'%3e%3cline class='st2' x1='508.3' y1='256' x2='3.7' y2='256'/%3e%3c/g%3e%3c/svg%3e\");\n background-repeat: no-repeat;\n transition: -webkit-transform 0.175;\n transition: transform 0.175;\n transition: transform 0.175, -webkit-transform 0.175;\n pointer-events: none;\n opacity: 0.3;\n}\n\n:host .ngfx__slider.is--hor {\n width: 200px;\n height: 32px;\n}\n\n:host .ngfx__slider.is--hor .ngfx__draggable {\n width: 200px;\n height: 32px;\n border-radius: 14px;\n cursor: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAACEUlEQVRYhe2Z646CMBBGTwusl/d/VnUV6P6Yjq0V5KJISfZLSCMBPYxfp2XGOOd4QwYo/GH9YZJrHND6o/HH7B8t37iv8qNCKkQKY6JR4Wvg5sdJMhMjXAI7Pxr/41OjZQgPUQO/TAAfC2yAAxJVENBPyPrxBlzGfO8Y4AqBtYj/llCBwJ4R+F4NAf8gsPC5qPZJo31BbPLyoi7tgCNhoiwtnQ8HYN93UR+wRnbOpHpHDrHdHgnYk7qASySy34aN1SIBe0q7KbAh2GAtWAg2PJIsRCnw3p/7hmeH5BCWQ3wyBi4R7y6VuuaoIayowCNwp8kz0Z1NgQvkKXKwQqoWYSshAP+shjNeFQTgknWzwpAcfsNlCVvE3IEtUFjEv1tRoW8JW9HmgE36epOzHB54U/oHXlqaf9NaQo4ygMtlKzlWmwNulnx1X0KNRaouLXn7WKtMjWaJmvyBa7yHAa4rwozVDUIebpAnyDEvq21r/aDqLQ+tLEPEFgPXiDVy2h8XCNO9HJtaQEueOUxA3UVe4pMpsANOdJf+vynjGU4kC1vXJKuROu2aE9DSUyvu63GoydeoYBa8qBG/asroDXvCSrOk1AZnXmSsXFoGus29MLCIjW3KWCTSm2jKxKqQspZaaU4dOW17XRloxDzcPLMTmjYWY3V9YZwitbGozcVJmgscgyh0wWP0VPovNIT27WxL/QG7cp5Q+WnBUwAAAABJRU5ErkJggg==\") 22 22, pointer;\n}\n\n:host .ngfx__slider.is--hor .ngfx__draggable .ngfx__handle {\n background: url(\"data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3c!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bdisplay:none;%7d .st1%7bdisplay:inline;fill:none;stroke:%23FFFFFF;stroke-width:8;stroke-miterlimit:10;%7d .st2%7bfill:none;stroke:%23FFFFFF;stroke-width:8;stroke-miterlimit:10;%7d %3c/style%3e%3cg id='Layer_1' class='st0'%3e%3ccircle class='st1' cx='256' cy='256' r='245.2'/%3e%3c/g%3e%3cg id='Layer_2'%3e%3cline class='st2' x1='256' y1='3.7' x2='256' y2='508.3'/%3e%3c/g%3e%3cg id='Layer_3' class='st0'%3e%3cline class='st1' x1='508.3' y1='256' x2='3.7' y2='256'/%3e%3c/g%3e%3c/svg%3e\");\n background-size: 44px 32px;\n background-position: 50% 0px;\n}\n\n:host .ngfx__slider.is--vert {\n width: 32px;\n height: 200px;\n}\n\n:host .ngfx__slider.is--vert .ngfx__draggable {\n width: 32px;\n height: 200px;\n border-radius: 14px;\n cursor: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAACEUlEQVRYhe2Z646CMBBGTwusl/d/VnUV6P6Yjq0V5KJISfZLSCMBPYxfp2XGOOd4QwYo/GH9YZJrHND6o/HH7B8t37iv8qNCKkQKY6JR4Wvg5sdJMhMjXAI7Pxr/41OjZQgPUQO/TAAfC2yAAxJVENBPyPrxBlzGfO8Y4AqBtYj/llCBwJ4R+F4NAf8gsPC5qPZJo31BbPLyoi7tgCNhoiwtnQ8HYN93UR+wRnbOpHpHDrHdHgnYk7qASySy34aN1SIBe0q7KbAh2GAtWAg2PJIsRCnw3p/7hmeH5BCWQ3wyBi4R7y6VuuaoIayowCNwp8kz0Z1NgQvkKXKwQqoWYSshAP+shjNeFQTgknWzwpAcfsNlCVvE3IEtUFjEv1tRoW8JW9HmgE36epOzHB54U/oHXlqaf9NaQo4ygMtlKzlWmwNulnx1X0KNRaouLXn7WKtMjWaJmvyBa7yHAa4rwozVDUIebpAnyDEvq21r/aDqLQ+tLEPEFgPXiDVy2h8XCNO9HJtaQEueOUxA3UVe4pMpsANOdJf+vynjGU4kC1vXJKuROu2aE9DSUyvu63GoydeoYBa8qBG/asroDXvCSrOk1AZnXmSsXFoGus29MLCIjW3KWCTSm2jKxKqQspZaaU4dOW17XRloxDzcPLMTmjYWY3V9YZwitbGozcVJmgscgyh0wWP0VPovNIT27WxL/QG7cp5Q+WnBUwAAAABJRU5ErkJggg==\") 22 0, pointer;\n}\n\n:host .ngfx__slider.is--vert .ngfx__draggable .ngfx__handle {\n background: url(\"data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3c!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bdisplay:none;%7d .st1%7bdisplay:inline;fill:none;stroke:%23FFFFFF;stroke-width:8;stroke-miterlimit:10;%7d .st2%7bfill:none;stroke:%23FFFFFF;stroke-width:8;stroke-miterlimit:10;%7d %3c/style%3e%3cg id='Layer_1' class='st0'%3e%3ccircle class='st1' cx='256' cy='256' r='245.2'/%3e%3c/g%3e%3cg id='Layer_2' class='st0'%3e%3cline class='st1' x1='256' y1='3.7' x2='256' y2='508.3'/%3e%3c/g%3e%3cg id='Layer_3'%3e%3cline class='st2' x1='508.3' y1='256' x2='3.7' y2='256'/%3e%3c/g%3e%3c/svg%3e\");\n background-size: 32px 44px;\n background-position: 0px 50%;\n}\n\n:host .ngfx__slider.is--joystick {\n width: 200px;\n height: auto;\n}\n\n:host .ngfx__slider.is--joystick .ngfx__draggable {\n width: 200px;\n height: 200px;\n border-radius: 50%;\n cursor: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAACEUlEQVRYhe2Z646CMBBGTwusl/d/VnUV6P6Yjq0V5KJISfZLSCMBPYxfp2XGOOd4QwYo/GH9YZJrHND6o/HH7B8t37iv8qNCKkQKY6JR4Wvg5sdJMhMjXAI7Pxr/41OjZQgPUQO/TAAfC2yAAxJVENBPyPrxBlzGfO8Y4AqBtYj/llCBwJ4R+F4NAf8gsPC5qPZJo31BbPLyoi7tgCNhoiwtnQ8HYN93UR+wRnbOpHpHDrHdHgnYk7qASySy34aN1SIBe0q7KbAh2GAtWAg2PJIsRCnw3p/7hmeH5BCWQ3wyBi4R7y6VuuaoIayowCNwp8kz0Z1NgQvkKXKwQqoWYSshAP+shjNeFQTgknWzwpAcfsNlCVvE3IEtUFjEv1tRoW8JW9HmgE36epOzHB54U/oHXlqaf9NaQo4ygMtlKzlWmwNulnx1X0KNRaouLXn7WKtMjWaJmvyBa7yHAa4rwozVDUIebpAnyDEvq21r/aDqLQ+tLEPEFgPXiDVy2h8XCNO9HJtaQEueOUxA3UVe4pMpsANOdJf+vynjGU4kC1vXJKuROu2aE9DSUyvu63GoydeoYBa8qBG/asroDXvCSrOk1AZnXmSsXFoGus29MLCIjW3KWCTSm2jKxKqQspZaaU4dOW17XRloxDzcPLMTmjYWY3V9YZwitbGozcVJmgscgyh0wWP0VPovNIT27WxL/QG7cp5Q+WnBUwAAAABJRU5ErkJggg==\") 0 0, pointer;\n}\n\n:host .ngfx__slider.is--joystick .ngfx__draggable .ngfx__handle {\n position: absolute;\n background-size: 44px 44px;\n width: 44px;\n height: 44px;\n}\n"]}]}],"members":{"control":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3},"arguments":["control"]}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":13,"character":3},"arguments":[{"__symbolic":"reference","name":"NgFxDraggableDirective"}]}]}],"transform":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":16,"character":3},"arguments":["style.transform"]}]}],"gridArea":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":21,"character":3},"arguments":["style.grid-area"]}]}],"placeSelf":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":26,"character":3},"arguments":["style.place-self"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":30,"character":34}]}],"hasName":[{"__symbolic":"method"}],"sanitize":[{"__symbolic":"method"}]}},"NgFxSurfaceModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":12},{"__symbolic":"reference","name":"NgFxSliderModule"},{"__symbolic":"reference","name":"NgFxButtonModule"}],"declarations":[{"__symbolic":"reference","name":"NgFxSurfaceComponent"}],"exports":[{"__symbolic":"reference","name":"NgFxSurfaceComponent"}]}]}],"members":{}},"NgFxSurfaceComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"ngfx-surface, [ngfx-surface]","template":"<div class=\"control__group\" [style.display]=\"sanitize(display)\" [style.grid]=\"sanitize(grid)\" [style.grid-gap]=\"sanitize(gridGap)\"><ng-container *ngFor=\"let control of controlMap\"><ngfx-slider *ngIf=\"control.type === 'slider'\" [control]=\"control\" class=\"control__pane\"></ngfx-slider><ngfx-button *ngIf=\"control.type === 'button'\" [control]=\"control\" class=\"control__pane\"></ngfx-button></ng-container></div>","styles":["/**\n * Convert font-size from px to rem with px fallback\n *\n * @param $size - the value in pixel you want to convert\n *\n * e.g. p {@include fontSize(12px);}\n *\n */\n:host {\n display: block;\n overflow: hidden;\n}\n\n:host:after {\n content: '';\n display: table;\n clear: both;\n}\n\n.control__group {\n width: 100%;\n height: 100vh;\n overflow: hidden;\n display: grid;\n}\n\n.control__group:after {\n content: '';\n display: table;\n clear: both;\n}\n"]}]}],"members":{"controller":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3},"arguments":["controller"]}]}],"grid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3},"arguments":["grid"]}]}],"gridGap":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3},"arguments":["gridGap"]}]}],"display":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3},"arguments":["display"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"NgFxController"},{"__symbolic":"reference","module":"@angular/platform-browser","name":"DomSanitizer","line":25,"character":71}]}],"ngOnChanges":[{"__symbolic":"method"}],"mapToControls":[{"__symbolic":"method"}],"sanitize":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}]}}},"origins":{"NgFxController":"./src/services/controller/controller.service","NgFxButtonModule":"./src/components/button/button.module","NgFxButtonComponent":"./src/components/button/button.component","NgFxSliderModule":"./src/components/slider/slider.module","NgFxDraggableDirective":"./src/components/slider/draggable.directive","NgFxSliderComponent":"./src/components/slider/slider.component","NgFxSurfaceModule":"./src/components/surface/surface.module","NgFxSurfaceComponent":"./src/components/surface/surface.component"},"importAs":"ui"}