@rocketshow/designer 1.32.0 → 1.35.0

package/rocketshow-designer.metadata.json

@@ -1 +0,0 @@
-{"__symbolic":"module","version":4,"metadata":{"DesignerService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"DesignerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":26,"character":1},"arguments":[{"selector":"lib-designer","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":30,"character":17},"member":"None"},"template":"<!-- Wrap the whole component inside a div to encapsulate the CSS -->\n\n<!-- 100 % height minus the menu bar above and the gutter size of 13 px -->\n<!-- <div style=\"height: calc(100% - 33px)\"> -->\n<div id=\"designer\" [ngStyle]=\"{ height: 'calc(100% - ' + totalMenuHeightPx + 'px)' }\">\n  <!-- Navigation -->\n  <nav\n    class=\"navbar navbar-expand-lg navbar-light bg-light border-secondary\"\n    style=\"border-bottom: 1px solid #444; height: 20px; z-index: 9999\"\n  >\n    <!-- Menu buttons -->\n    <ul class=\"navbar-nav mr-auto\">\n      <li class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"fileDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n          {{ 'designer.navigation.project' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"fileDropdown\">\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectNew(); (false)\"\n            ><i class=\"fa fa-fw fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-new' | translate }}</a\n          >\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"projectOpen(); (false)\"\n            ><i class=\"fa fa-fw fa-folder-open-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-open' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSave(); (false)\"\n            ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSaveAs(); (false)\"\n            ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save-as' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectImport(); (false)\"\n            ><i class=\"fa fa-fw fa-download\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-import' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectExport(); (false)\"\n            ><i class=\"fa fa-fw fa-external-link\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-export' | translate }}</a\n          >\n        </div>\n      </li>\n      <li class=\"nav-item dropdown d-none d-md-block\">\n        <a\n          class=\"nav-link dropdown-toggle\"\n          href=\"#\"\n          id=\"settingsDropdown\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          {{ 'designer.navigation.settings' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"openFixturePool(); (false)\">{{ 'designer.navigation.fixture-pool' | translate }}</a>\n          <!-- <a class=\"dropdown-item\" href=\"#\">{{ 'designer.navigation.stage' | translate }}</a> -->\n        </div>\n      </li>\n      <li class=\"nav-item dropdown d-none d-md-block\">\n        <a\n          class=\"nav-link dropdown-toggle\"\n          href=\"#\"\n          id=\"settingsDropdown\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          {{ 'designer.navigation.help' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"introService.reset(); (false)\">{{ 'designer.navigation.reset-intro' | translate }}</a>\n          <a class=\"dropdown-item\" href=\"https://rocketshow.net/support/\" target=\"_blank\">{{\n            'designer.navigation.support' | translate\n          }}</a>\n        </div>\n      </li>\n    </ul>\n\n    <ul class=\"navbar-nav\">\n      <li *ngIf=\"configService.shareAvailable\" class=\"nav-item d-none d-md-flex\" data-toggle=\"collapse\">\n        <a class=\"nav-link text-primary\" (click)=\"projectShare(); (false)\" routerLinkActive=\"active\"\n          ><i class=\"fa fa-share-alt\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-share' | translate }}</a\n        >\n      </li>\n\n      <li *ngIf=\"configService.languageSwitch\" class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n          ><i class=\"fa fa-globe\" aria-hidden=\"true\"></i>\n          {{ 'designer.misc.language' | translate }}\n        </a>\n        <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('en'); (false)\" target=\"_blank\">English</a>\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('de'); (false)\" target=\"_blank\">Deutsch</a>\n        </div>\n      </li>\n\n      <li *ngIf=\"configService.loginAvailable && !userService.isLoggedIn()\" class=\"nav-item\" data-toggle=\"collapse\">\n        <a class=\"nav-link\" (click)=\"userRegister(); (false)\" routerLinkActive=\"active\"\n          ><i class=\"fa fa-user\" aria-hidden=\"true\"></i> {{ 'designer.navigation.login' | translate }}</a\n        >\n      </li>\n\n      <li *ngIf=\"configService.loginAvailable && userService.isLoggedIn()\" class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n          ><i class=\"fa fa-user\" aria-hidden=\"true\"></i>\n          {{ userService.username }}\n        </a>\n        <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"userService.logout(); (false)\" target=\"_blank\"\n            ><i class=\"fa fa-sign-out\" aria-hidden=\"true\"></i> {{ 'designer.navigation.logout' | translate }}</a\n          >\n        </div>\n      </li>\n    </ul>\n  </nav>\n\n  <!-- The main content for larger screens -->\n  <div class=\"h-100 d-none d-md-block\">\n    <div id=\"row1\" class=\"split split-vertical clearfix pt-3 pl-3\">\n      <!-- Scenes -->\n      <div id=\"scenes\" class=\"split split-horizontal h-100\">\n        <lib-app-scene></lib-app-scene>\n      </div>\n\n      <!-- Presets -->\n      <div id=\"presets\" class=\"split split-horizontal h-100\">\n        <lib-app-preset></lib-app-preset>\n      </div>\n\n      <!-- 3D preview -->\n      <div id=\"preview\" class=\"split split-horizontal h-100 pr-3\">\n        <div class=\"card border-secondary h-100\" [class.card-intro-active]=\"introService.showStep('preview')\">\n          <div class=\"card-body p-0 h-100\">\n            <lib-app-preview class=\"h-100\"></lib-app-preview>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div id=\"row2\" class=\"split split-vertical clearfix px-3 d-flex\" style=\"flex-direction: row\">\n      <!-- Menu for the capabilities, channels, effects and settings -->\n      <div class=\"col col-auto p-0\" style=\"margin-right: -1px\">\n        <div class=\"nav flex-column nav-pills\" id=\"v-pills-tab\" role=\"tablist\" aria-orientation=\"vertical\">\n          <a\n            class=\"nav-link px-3 active\"\n            (click)=\"openTab('capabilities')\"\n            id=\"v-pills-capabilities-tab\"\n            popover=\"{{ 'designer.misc.capabilities' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-capabilities\"\n            role=\"tab\"\n            aria-controls=\"v-pills-capabilities\"\n            aria-selected=\"true\"\n          >\n            <i class=\"fa fa-bolt fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('channels')\"\n            id=\"v-pills-channels-tab\"\n            popover=\"{{ 'designer.misc.channels' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-channels\"\n            role=\"tab\"\n            aria-controls=\"v-pills-channels\"\n            aria-selected=\"false\"\n          >\n            <i class=\"fa fa-sliders fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('effects')\"\n            id=\"v-pills-effects-tab\"\n            popover=\"{{ 'designer.misc.effects' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-effects\"\n            role=\"tab\"\n            aria-controls=\"v-pills-effects\"\n            aria-selected=\"false\"\n          >\n            <i class=\"fa fa-magic fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('settings')\"\n            id=\"v-pills-settings-tab\"\n            popover=\"{{ 'designer.misc.settings' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-settings\"\n            role=\"tab\"\n            aria-controls=\"v-pills-settings\"\n            aria-selected=\"false\"\n            style=\"border-top: 1px solid #444\"\n          >\n            <i class=\"fa fa-cog fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n        </div>\n      </div>\n\n      <div id=\"capabilities\" class=\"split split-horizontal h-100\" style=\"padding-left: 1rem\">\n        <div class=\"row h-100\">\n          <!-- Content for the capabilities, channels, effects and settings -->\n          <div class=\"col pl-0 h-100\">\n            <div class=\"tab-content h-100\" id=\"v-pills-tabContent\">\n              <div class=\"tab-pane h-100 show active\" id=\"v-pills-capabilities\" role=\"tabpanel\">\n                <lib-app-fixture-capability></lib-app-fixture-capability>\n              </div>\n              <div class=\"tab-pane h-100 show\" id=\"v-pills-channels\" role=\"tabpanel\">\n                <lib-app-fixture-channel></lib-app-fixture-channel>\n              </div>\n              <div class=\"tab-pane h-100\" id=\"v-pills-effects\" role=\"tabpanel\" aria-labelledby=\"v-pills-profile-tab\">\n                <lib-app-effect></lib-app-effect>\n              </div>\n              <div class=\"tab-pane h-100\" id=\"v-pills-settings\" role=\"tabpanel\" aria-labelledby=\"v-pills-home-tab\">\n                <lib-app-fixture-settings></lib-app-fixture-settings>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fixtures -->\n      <div id=\"fixtures\" class=\"split split-horizontal h-100\">\n        <lib-app-fixture></lib-app-fixture>\n      </div>\n\n      <!-- Master dimmer -->\n      <div id=\"masterDimmer\" class=\"split split-horizontal h-100\">\n        <lib-app-master-dimmer></lib-app-master-dimmer>\n      </div>\n    </div>\n\n    <!-- Timeline -->\n    <div id=\"row3\" class=\"split split-vertical clearfix px-3 pb-3\" style=\"padding-bottom: 20px\">\n      <lib-app-timeline></lib-app-timeline>\n    </div>\n  </div>\n\n  <!-- The components for small screens -->\n  <div class=\"d-md-none p-3\">\n    <div>\n      <lib-app-master-dimmer></lib-app-master-dimmer>\n    </div>\n\n    <div class=\"mt-3\">\n      <lib-app-scene></lib-app-scene>\n    </div>\n  </div>\n</div>\n\n<lib-app-intro class=\"d-none d-md-flex\"></lib-app-intro>\n","styles":["@charset \"UTF-8\";.modal-full{max-width:unset!important;margin:1.75rem!important}.modal{z-index:10001}#designer .nav-link{cursor:pointer}#designer .dropdown-menu{z-index:100000}#designer .row{flex-wrap:unset}#designer .navbar-nav{flex-direction:row!important}#designer .navbar-expand-lg{flex-flow:row nowrap!important;justify-content:flex-start!important}#designer .navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem!important;padding-left:.5rem!important}#designer .list-group-item.active{color:#fff!important;background-color:#fd7e14!important;border-color:#fd7e14!important}#designer :focus{outline:0}#designer select{font-size:.8rem;cursor:pointer}#designer input{font-size:.7rem;background-color:transparent;color:#fff;border:1px solid}#designer input,#designer select{border-color:#dee2e6}#designer .list-group-item{padding:.3rem 1.25rem;border-left:none;border-right:none}#designer .nav-pills .nav-link.active,#designer .nav-pills .show>.nav-link{background-color:#444}#designer .nav a,#designer .panel-title .btn-link{color:#fff!important}#designer .accordion-toggle .btn,#designer .accordion-toggle button{padding:0}#designer .card-body{overflow:auto;padding:.8rem}#designer .card-header{margin-bottom:0;padding:.4rem}#designer .panel-body{background-color:#303030}#designer .list-group-item.active-light{background-color:#906542;border-color:#906542}#designer .inactive-list-item{opacity:.3}#designer span.bigcheck-target{font-family:FontAwesome}#designer input[type=checkbox].bigcheck{position:relative;left:-999em}#designer input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\"}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\"}#designer .gutter.gutter-horizontal{cursor:ew-resize}#designer .gutter.gutter-vertical{cursor:ns-resize}#designer .gutter.gutter-horizontal,#designer .split-horizontal{float:left}#designer .gutter.gutter-horizontal,#designer .split-vertical{height:100%}#designer .split{overflow-y:hidden;overflow-x:hidden}#designer .panel{background-color:transparent}#designer .slider{cursor:pointer}#designer .slider-horizontal .slider-track{height:2px!important;margin-top:-2px!important}#designer .slider-vertical .slider-track{width:2px!important;margin-left:4px!important}#designer .slider-selection,#designer .slider-track,#designer .slider-track-high,#designer .slider-track-low{background-color:#fff!important;border-radius:0!important;background-image:none!important;box-shadow:none!important}#designer .slider-handle{width:13px!important;height:13px!important;background-color:#fff!important;background-image:none!important;border:1px solid #303030}#designer .slider-vertical .slider-handle{margin-left:4px!important}#designer .slider-horizontal .slider-handle{margin-top:2px!important}#designer .slider-input{width:35px;margin-left:8px;text-align:center}#designer .slider-input-readonly{width:35px;margin-left:8px;text-align:center;color:#a9a9a9;border-color:gray}#designer .capability-container{padding:0;height:0}#designer accordion-group>div{border:none!important}#designer .popover{background-color:#fff}#designer .popover-body{color:#000}#designer .bs-popover-auto[x-placement^=right] .arrow::after,#designer .bs-popover-right .arrow::after{border-right-color:#fff}#designer .bs-popover-auto[x-placement^=left] .arrow::after,#designer .bs-popover-left .arrow::after{border-left-color:#fff}#designer .bs-popover-auto[x-placement^=bottom] .arrow::after,#designer .bs-popover-bottom .arrow::after{border-bottom-color:#fff}#designer .bs-popover-auto[x-placement^=top] .arrow::after,#designer .bs-popover-top .arrow::after{border-top-color:#fff}#designer .iro__slider,#designer .iro__wheel{cursor:pointer}#designer .pan-tilt-grid path{fill:none;stroke:#fff;stroke-width:10px}#designer .pan-tilt-grid circle{fill:#4682b4;stroke:#fff;stroke-width:3px}#designer .capability{overflow:visible}#designer .capability-deactivated{opacity:.4}#designer .wavesurfer-region{z-index:5!important}#designer .wavesurfer-region[data-region-selected=true]{z-index:6!important}#designer .wavesurfer-region[data-region-preset=true]{height:50%!important;top:50%!important}#designer .wavesurfer-region[data-region-name]:after{content:attr(data-region-name);margin-left:20px}#designer .wavesurfer-handle{width:10px!important;max-width:10px!important;border:1px solid #ddd;background:rgba(0,0,0,.1);box-sizing:border-box;opacity:0;cursor:unset!important}#designer .wavesurfer-handle-end{margin-left:-10px}#designer .wavesurfer-region[data-region-selectable=true] .wavesurfer-handle{opacity:1;cursor:col-resize!important}#designer .wavesurfer-handle:after,#designer .wavesurfer-handle:before{content:\"\";display:block;position:absolute;z-index:1;border-top:1px solid #fff;border-bottom:1px solid #fff;height:4px;left:5%;right:5%;top:50%;transform:translateY(-50%)}#designer .wavesurfer-handle:before{margin-top:-3px}#designer timeline{overflow:scroll!important;overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;cursor:s-resize}#designer timeline::-webkit-scrollbar{height:0!important}#designer cursor{top:-20px!important}#designer wave{border-right-color:#fd7e14!important;cursor:col-resize}"]}]}],"members":{"menuHeightPx":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}}]}],"externalCompositionsAvailable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"restUrl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"enableMediaLibrary":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"loginAvailable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3}}]}],"shareAvailable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"languageSwitch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":3}}]}],"newProjectTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":3}}]}],"livePreview":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3}}]}],"localProfiles":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":79,"character":3}}]}],"intro":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":3}}]}],"uniqueProjectNames":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":3}}]}],"previewComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":104,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵa"}]}]}],"timelineComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":107,"character":3},"arguments":[{"__symbolic":"reference","name":"ɵo"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":111,"character":30},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":116,"character":26},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵt"},{"__symbolic":"reference","module":"ngx-toastr","name":"ToastrService","line":119,"character":27},{"__symbolic":"reference","name":"ɵu"},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵv"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵr"}]}],"ngOnInit":[{"__symbolic":"method"}],"calcTotalMenuHeight":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"openTab":[{"__symbolic":"method"}],"openFixturePool":[{"__symbolic":"method"}],"projectNew":[{"__symbolic":"method"}],"projectOpen":[{"__symbolic":"method"}],"projectSave":[{"__symbolic":"method"}],"projectSaveAs":[{"__symbolic":"method"}],"userRegister":[{"__symbolic":"method"}],"projectImport":[{"__symbolic":"method"}],"projectExport":[{"__symbolic":"method"}],"projectShare":[{"__symbolic":"method"}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":340,"character":3},"arguments":["document:keydown",["$event"]]}]}],"switchLanguage":[{"__symbolic":"method"}]}},"DesignerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":52,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"DesignerComponent"},{"__symbolic":"reference","name":"ɵw"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵx"},{"__symbolic":"reference","name":"ɵy"},{"__symbolic":"reference","name":"ɵz"},{"__symbolic":"reference","name":"ɵo"},{"__symbolic":"reference","name":"ɵba"},{"__symbolic":"reference","name":"ɵbb"},{"__symbolic":"reference","name":"ɵbc"},{"__symbolic":"reference","name":"ɵbd"},{"__symbolic":"reference","name":"ɵbe"},{"__symbolic":"reference","name":"ɵbf"},{"__symbolic":"reference","name":"ɵbg"},{"__symbolic":"reference","name":"ɵbh"},{"__symbolic":"reference","name":"ɵbi"},{"__symbolic":"reference","name":"ɵbj"},{"__symbolic":"reference","name":"ɵbk"},{"__symbolic":"reference","name":"ɵbl"},{"__symbolic":"reference","name":"ɵbm"},{"__symbolic":"reference","name":"ɵbn"},{"__symbolic":"reference","name":"ɵbo"},{"__symbolic":"reference","name":"ɵbp"},{"__symbolic":"reference","name":"ɵbq"},{"__symbolic":"reference","name":"ɵbr"},{"__symbolic":"reference","name":"ɵbs"},{"__symbolic":"reference","name":"ɵbt"},{"__symbolic":"reference","name":"ɵbu"},{"__symbolic":"reference","name":"ɵbv"},{"__symbolic":"reference","name":"ɵbw"},{"__symbolic":"reference","name":"ɵbx"},{"__symbolic":"reference","name":"ɵby"},{"__symbolic":"reference","name":"ɵbz"},{"__symbolic":"reference","name":"ɵca"},{"__symbolic":"reference","name":"ɵcb"},{"__symbolic":"reference","name":"ɵcc"},{"__symbolic":"reference","name":"ɵcd"}],"imports":[{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":93,"character":4},"member":"forRoot"},"arguments":[[]]},{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":94,"character":4},{"__symbolic":"reference","module":"@angular/platform-browser/animations","name":"BrowserAnimationsModule","line":95,"character":4},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":96,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":97,"character":4},{"__symbolic":"reference","module":"ngx-bootstrap-slider","name":"NgxBootstrapSliderModule","line":98,"character":4},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateModule","line":99,"character":4},{"__symbolic":"reference","module":"ngx-bootstrap/accordion","name":"AccordionModule","line":100,"character":4},{"__symbolic":"reference","module":"ngx-bootstrap/popover","name":"PopoverModule","line":101,"character":4},{"__symbolic":"reference","module":"ngx-bootstrap/typeahead","name":"TypeaheadModule","line":102,"character":4},{"__symbolic":"reference","module":"ngx-sortablejs","name":"SortablejsModule","line":103,"character":4},{"__symbolic":"reference","module":"ngx-dropzone-wrapper","name":"DropzoneModule","line":104,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"ngx-toastr","name":"ToastrModule","line":105,"character":4},"member":"forRoot"},"arguments":[{"newestOnTop":true}]}],"exports":[{"__symbolic":"reference","name":"DesignerComponent"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"lib-app-preview","template":"<div class=\"h-100\" #canvas style=\"overflow: hidden\"></div>\n","styles":[""]}]}],"members":{"canvasRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":32,"character":3},"arguments":["canvas"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵc"}]}],"syncFixtures":[{"__symbolic":"method"}],"render":[{"__symbolic":"method"}],"updateStagePosition":[{"__symbolic":"method"}],"animate":[{"__symbolic":"method"}],"getAspectRatio":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":204,"character":3},"arguments":["window:resize"]}]}],"setupRenderer":[{"__symbolic":"method"}],"setupCamera":[{"__symbolic":"method"}],"setupControls":[{"__symbolic":"method"}],"setupFloor":[{"__symbolic":"method"}],"setupStats":[{"__symbolic":"method"}],"setupScene":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":20,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":32,"character":18},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":34,"character":30},{"__symbolic":"reference","module":"ngx-toastr","name":"ToastrService","line":35,"character":27},{"__symbolic":"reference","name":"ɵd"}]}],"getFixtureByUuid":[{"__symbolic":"method"}],"getCachedFixtureByUuid":[{"__symbolic":"method"}],"getSearchProfiles":[{"__symbolic":"method"}],"getProfileByUuid":[{"__symbolic":"method"}],"loadProfileByUuid":[{"__symbolic":"method"}],"getRotationAngleDeg":[{"__symbolic":"method"}],"getWheelSlotColors":[{"__symbolic":"method"}],"getMixedWheelSlotColor":[{"__symbolic":"method"}],"componentToHex":[{"__symbolic":"method"}],"rgbToHex":[{"__symbolic":"method"}],"hexToRgb":[{"__symbolic":"method"}],"mixColors":[{"__symbolic":"method"}],"wheelHasSlotType":[{"__symbolic":"method"}],"getWheelByName":[{"__symbolic":"method"}],"getWheelSlots":[{"__symbolic":"method"}],"getModeByFixture":[{"__symbolic":"method"}],"getFixtureCapability":[{"__symbolic":"method"}],"getCapabilitiesByChannel":[{"__symbolic":"method"}],"getMaxValueByChannel":[{"__symbolic":"method"}],"getDefaultValueByChannel":[{"__symbolic":"method"}],"getColorWheelByChannel":[{"__symbolic":"method"}],"getChannelByName":[{"__symbolic":"method"}],"getCachedChannels":[{"__symbolic":"method"}],"updateCachedFixtures":[{"__symbolic":"method"}],"capabilitiesMatch":[{"__symbolic":"method"}],"settingsFixtureIsSelected":[{"__symbolic":"method"}],"switchSettingsFixtureSelection":[{"__symbolic":"method"}],"getFixtureIconClass":[{"__symbolic":"method"}],"updateProfiles":[{"__symbolic":"method"}],"getNextFreeDmxChannel":[{"__symbolic":"method"}],"addFixture":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":11,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":20,"character":18},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":22,"character":20},{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":23,"character":28},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":24,"character":30},{"__symbolic":"reference","module":"ngx-toastr","name":"ToastrService","line":25,"character":27}]}],"saveApi":[{"__symbolic":"method"}],"save":[{"__symbolic":"method"}],"getAllProjects":[{"__symbolic":"method"}],"deleteProject":[{"__symbolic":"method"}],"getProject":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"getUuid":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":6,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":15,"character":28}]}],"loadFromLocalStorage":[{"__symbolic":"method"}],"register":[{"__symbolic":"method"}],"login":[{"__symbolic":"method"}],"logout":[{"__symbolic":"method"}],"isLoggedIn":[{"__symbolic":"method"}],"getHeaders":[{"__symbolic":"method"}],"setAutoLoadProject":[{"__symbolic":"method"}],"getAutoLoadProjectId":[{"__symbolic":"method"}],"getAutoLoadProjectName":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":6,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"loadScene":[{"__symbolic":"method"}],"loadMesh":[{"__symbolic":"method"}],"getMesh":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":17,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵn"},{"__symbolic":"reference","name":"ɵc"}]}],"getAlreadyCalculatedFixture":[{"__symbolic":"method"}],"getPresets":[{"__symbolic":"method"}],"mixChannelValue":[{"__symbolic":"method"}],"getFixtureIndex":[{"__symbolic":"method"}],"getPresetIntensity":[{"__symbolic":"method"}],"mixCapabilityValues":[{"__symbolic":"method"}],"mixChannelValues":[{"__symbolic":"method"}],"mixEffects":[{"__symbolic":"method"}],"getChannelValues":[{"__symbolic":"method"}],"setUniverseValues":[{"__symbolic":"method"}],"fixtureIsSelected":[{"__symbolic":"method"}],"updateFixtureSetup":[{"__symbolic":"method"}],"updateStage":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":19,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":47,"character":18},{"__symbolic":"reference","name":"ɵg"}]}],"getPresetByUuid":[{"__symbolic":"method"}],"fixtureIsSelected":[{"__symbolic":"method"}],"switchFixtureSelection":[{"__symbolic":"method"}],"selectAllFixtures":[{"__symbolic":"method"}],"selectNoFixtures":[{"__symbolic":"method"}],"removeDeletedFixtures":[{"__symbolic":"method"}],"updateFixtureSelection":[{"__symbolic":"method"}],"deleteCapabilityValue":[{"__symbolic":"method"}],"setCapabilityValue":[{"__symbolic":"method"}],"getCapabilityValue":[{"__symbolic":"method"}],"deleteChannelValue":[{"__symbolic":"method"}],"setChannelValue":[{"__symbolic":"method"}],"getChannelValue":[{"__symbolic":"method"}],"getApproximatedColorWheelCapability":[{"__symbolic":"method"}],"hasCapabilityType":[{"__symbolic":"method"}],"hasCapabilityDimmer":[{"__symbolic":"method"}],"hasCapabilityColor":[{"__symbolic":"method"}],"hasCapabilityColorOrColorWheel":[{"__symbolic":"method"}],"hasCapabilityPanTilt":[{"__symbolic":"method"}],"selectPreset":[{"__symbolic":"method"}],"autoOpenFirstEffect":[{"__symbolic":"method"}],"addPreset":[{"__symbolic":"method"}],"getSelectedProfiles":[{"__symbolic":"method"}],"getSelectedProfileChannels":[{"__symbolic":"method"}],"previewLive":[{"__symbolic":"method"}],"stopPreviewPlay":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"ɵk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"ɵl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":9,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵc"}]}],"sceneIsSelected":[{"__symbolic":"method"}],"presetIsSelected":[{"__symbolic":"method"}],"switchSceneSelection":[{"__symbolic":"method"}],"selectPresetFromSelectedScene":[{"__symbolic":"method"}],"selectScene":[{"__symbolic":"method"}],"addScene":[{"__symbolic":"method"}],"removeScene":[{"__symbolic":"method"}],"getSceneByUuid":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":19,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":52,"character":18},{"__symbolic":"reference","name":"ɵk"}]}],"redrawAllRegions":[{"__symbolic":"method"}],"pad":[{"__symbolic":"method"}],"msToTime":[{"__symbolic":"method"}],"updateCurrentTime":[{"__symbolic":"method"}],"startTimeUpdater":[{"__symbolic":"method"}],"stopTimeUpdater":[{"__symbolic":"method"}],"formatTimeCallback":[{"__symbolic":"method"}],"timeInterval":[{"__symbolic":"method"}],"primaryLabelInterval":[{"__symbolic":"method"}],"secondaryLabelInterval":[{"__symbolic":"method"}],"seeekWithTimeline":[{"__symbolic":"method"}],"applyZoom":[{"__symbolic":"method"}],"isWaveSurferReady":[{"__symbolic":"method"}],"addRegion":[{"__symbolic":"method"}],"getSnapToGridInterval":[{"__symbolic":"method"}],"getSnapToGridOffset":[{"__symbolic":"method"}],"deleteSelectedComposition":[{"__symbolic":"method"}],"destroyWaveSurfer":[{"__symbolic":"method"}],"createWaveSurfer":[{"__symbolic":"method"}],"hexToRgb":[{"__symbolic":"method"}],"updateRegionSelection":[{"__symbolic":"method"}],"updateSelectedRegion":[{"__symbolic":"method"}],"setSelectedRegion":[{"__symbolic":"method"}],"getRegionSnapToGridValue":[{"__symbolic":"method"}],"connectRegion":[{"__symbolic":"method"}],"drawRegion":[{"__symbolic":"method"}],"removeRegion":[{"__symbolic":"method"}],"getPresetsInTime":[{"__symbolic":"method"}],"drawAllRegions":[{"__symbolic":"method"}],"updateGrid":[{"__symbolic":"method"}],"getExternalCompositionNames":[{"__symbolic":"method"}],"selectCompositionIndex":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"getUniverseByUuid":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"lib-app-timeline","template":"<div class=\"card border-secondary h-100\" [class.card-intro-active]=\"introService.showStep('timeline')\">\n  <div class=\"card-body h-100 d-flex\" style=\"flex-flow: column; overflow: unset\">\n    <div class=\"d-flex pb-3\">\n      <div class=\"btn-group mr-3 my-auto\" role=\"group\" style=\"float: left\">\n        <a href=\"#\" class=\"btn btn-primary m-0 p-1 mr-3\" (click)=\"addComposition(); (false)\"\n          ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i\n        ></a>\n\n        <select\n          *ngIf=\"projectService.project.compositions.length > 0\"\n          class=\"mr-3\"\n          [ngModel]=\"timelineService.selectedCompositionIndex\"\n          (ngModelChange)=\"selectComposition($event)\"\n          style=\"width: 150px; height: 30px\"\n        >\n          <option *ngFor=\"let composition of projectService.project.compositions; let i = index\" [value]=\"i\">\n            {{ composition.name }}\n          </option>\n        </select>\n\n        <div *ngIf=\"timelineService.selectedComposition\" class=\"d-flex\">\n          <a href=\"#\" class=\"btn btn-primary m-0 p-1\" (click)=\"rewind(); (false)\"\n            ><i class=\"fa fa-step-backward fa-fw\" aria-hidden=\"true\"></i\n          ></a>\n          <a *ngIf=\"timelineService.playState == 'paused'\" href=\"#\" class=\"btn btn-primary m-0 p-1\" (click)=\"play(); (false)\"\n            ><i class=\"fa fa-play fa-fw\" aria-hidden=\"true\"></i\n          ></a>\n          <a *ngIf=\"timelineService.playState == 'playing'\" href=\"#\" class=\"btn btn-primary m-0 p-1\" (click)=\"pause(); (false)\"\n            ><i class=\"fa fa-pause fa-fw\" aria-hidden=\"true\"></i\n          ></a>\n        </div>\n      </div>\n\n      <div *ngIf=\"timelineService.selectedComposition\" class=\"d-flex w-100\">\n        <div *ngIf=\"timelineService.duration\" class=\"my-auto mr-3\">\n          <span style=\"width: 78px; text-align: left; display: inline-block; margin-left: 5px\">{{ timelineService.currentTime }}</span>\n          <span style=\"display: inline-block\"></span>- {{ timelineService.duration }}\n        </div>\n\n        <div class=\"my-auto mr-3 ml-auto\" style=\"float: left\">\n          <i (click)=\"timelineService.applyZoom(timelineService.zoom - 20)\" class=\"fa fa-search-minus mr-3\" aria-hidden=\"true\"></i>\n          <mv-slider\n            style=\"width: 80px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"timelineService.zoom\"\n            [min]=\"0\"\n            [max]=\"200\"\n            [step]=\"20\"\n            (change)=\"timelineService.applyZoom($event.newValue)\"\n          ></mv-slider>\n          <i (click)=\"timelineService.applyZoom(timelineService.zoom + 20)\" class=\"fa fa-search-plus ml-3\" aria-hidden=\"true\"></i>\n        </div>\n\n        <div class=\"my-auto mr-3\">\n          <input\n            type=\"text\"\n            [ngModel]=\"timelineService.selectedPlaybackRegion?.startMillis\"\n            (ngModelChange)=\"setRegionStartMillis($event)\"\n          />\n          - <input type=\"text\" [ngModel]=\"timelineService.selectedPlaybackRegion?.endMillis\" (ngModelChange)=\"setRegionEndMillis($event)\" />\n        </div>\n\n        <a\n          href=\"#\"\n          class=\"btn btn-secondary m-0 py-1 mr-3\"\n          (click)=\"openGridSettings(); (false)\"\n          popover=\"{{ 'designer.timeline.grid' | translate }}\"\n          container=\"body\"\n          placement=\"top\"\n          triggers=\"mouseenter:mouseleave\"\n          ><i class=\"fa fa-th\" aria-hidden=\"true\"></i\n        ></a>\n\n        <a\n          href=\"#\"\n          class=\"btn btn-secondary m-0 py-1 mr-3\"\n          (click)=\"removeRegion(); (false)\"\n          popover=\"{{ 'designer.timeline.remove-region' | translate }}\"\n          container=\"body\"\n          placement=\"top\"\n          triggers=\"mouseenter:mouseleave\"\n          ><i class=\"fa fa-minus-circle\" aria-hidden=\"true\"></i\n        ></a>\n\n        <a\n          href=\"#\"\n          class=\"btn btn-secondary m-0 py-1 mr-3\"\n          (click)=\"addRegion(); (false)\"\n          popover=\"{{ 'designer.timeline.add-region' | translate }}\"\n          container=\"body\"\n          placement=\"top\"\n          triggers=\"mouseenter:mouseleave\"\n          ><i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i\n        ></a>\n\n        <a\n          href=\"#\"\n          class=\"btn btn-secondary m-0 py-1 mr-3\"\n          (click)=\"removeComposition(); (false)\"\n          popover=\"{{ 'designer.timeline.remove-composition' | translate }}\"\n          container=\"body\"\n          placement=\"top\"\n          triggers=\"mouseenter:mouseleave\"\n          ><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i\n        ></a>\n\n        <a\n          href=\"#\"\n          class=\"btn btn-secondary m-0 py-1\"\n          (click)=\"compositionSettings(); (false)\"\n          popover=\"{{ 'designer.timeline.composition-settings' | translate }}\"\n          container=\"body\"\n          placement=\"left\"\n          triggers=\"mouseenter:mouseleave\"\n          ><i class=\"fa fa-cog\" aria-hidden=\"true\"></i\n        ></a>\n      </div>\n    </div>\n\n    <div *ngIf=\"timelineService.loadingAudioFile\" class=\"w-100 d-flex\">\n      <i class=\"fa fa-circle-o-notch fa-spin m-auto\" style=\"margin-top: -30px\"></i>\n    </div>\n\n    <div *ngIf=\"timelineService.selectedComposition\">\n      <div id=\"waveform-timeline\"></div>\n    </div>\n    <div *ngIf=\"timelineService.selectedComposition\" #waveWrapper class=\"h-100\" style=\"flex: 2; position: relative\">\n      <div #waveElement id=\"waveform\"></div>\n    </div>\n\n    <div *ngIf=\"projectService.project.compositions.length == 0\" class=\"w-100 d-flex\">\n      <a href=\"#\" class=\"m-auto\" (click)=\"addComposition(); (false)\"\n        ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i> {{ 'designer.timeline.no-compositions' | translate }}</a\n      >\n    </div>\n  </div>\n</div>\n","styles":[""]}]}],"members":{"waveWrapper":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":22,"character":3},"arguments":["waveWrapper"]}]}],"waveElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":25,"character":3},"arguments":["waveElement"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":33,"character":31},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":34,"character":26},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵp"},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":39,"character":18},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵr"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onResize":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":56,"character":3},"arguments":["window:resize"]}]}],"play":[{"__symbolic":"method"}],"pause":[{"__symbolic":"method"}],"rewind":[{"__symbolic":"method"}],"addRegion":[{"__symbolic":"method"}],"removeRegion":[{"__symbolic":"method"}],"openGridSettings":[{"__symbolic":"method"}],"afterDeleteFile":[{"__symbolic":"method"}],"removeComposition":[{"__symbolic":"method"}],"openCompositionSettings":[{"__symbolic":"method"}],"compositionSettings":[{"__symbolic":"method"}],"addComposition":[{"__symbolic":"method"}],"selectComposition":[{"__symbolic":"method"}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":193,"character":3},"arguments":["document:keydown",["$event"]]}]}],"setRegionStartMillis":[{"__symbolic":"method"}],"setRegionEndMillis":[{"__symbolic":"method"}]}},"ɵp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"exclude":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":7,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":11,"character":36},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":11,"character":78}]}],"show":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵk"}]}],"refresh":[{"__symbolic":"method"}],"setShowIntro":[{"__symbolic":"method"}],"reset":[{"__symbolic":"method"}],"showStep":[{"__symbolic":"method"}],"next":[{"__symbolic":"method"}],"back":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":10,"character":36}]}],"open":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":7,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":11,"character":70},{"__symbolic":"reference","name":"ɵk"}]}],"login":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":16,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":26,"character":26},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":29,"character":20},{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":30,"character":28}]}],"afterLoad":[{"__symbolic":"method"}],"selectScenesPresetComposition":[{"__symbolic":"method"}],"load":[{"__symbolic":"method"}],"new":[{"__symbolic":"method"}],"template":[{"__symbolic":"method"}],"import":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":7,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":11,"character":36},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":11,"character":78}]}],"show":[{"__symbolic":"method"}]},"statics":{"ɵprov":{}}},"ɵw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"lib-app-warning-dialog","template":"<div class=\"card-modal\">\n  <div class=\"card\">\n    <div class=\"card-header\">\n      {{ 'designer.misc.warning' | translate }}\n    </div>\n\n    <div class=\"card-body\">\n      <div class=\"row\">\n        <div class=\"col-auto\">\n          <h2 class=\"mb-0\">\n            <i class=\"fa fa-exclamation-triangle text-primary\" aria-hidden=\"true\"></i>\n          </h2>\n        </div>\n        <div class=\"col pl-0\">\n          <p class=\"mb-0\">{{ message }}</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"card-footer\">\n      <div class=\"d-flex float-right\">\n        <a class=\"mr-3 my-auto\" href=\"#\" role=\"button\" (click)=\"cancel(); (false)\">\n          {{ 'designer.misc.cancel' | translate }}\n        </a>\n        <button type=\"button\" class=\"btn btn-primary\" (click)=\"ok(); (false)\">\n          {{ 'designer.misc.ok' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalRef","line":14,"character":34}]}],"ngOnInit":[{"__symbolic":"method"}],"ok":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":30,"character":3},"arguments":["document:keydown.enter",["$event"]]}]}]}},"ɵx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":13,"character":1},"arguments":[{"selector":"lib-app-effect-curve","template":"<div class=\"mr-3\" style=\"float: left\">\n  <div class=\"mb-2\">\n    <select\n      [ngModel]=\"curve.curveType\"\n      (ngModelChange)=\"curve.curveType = $event; presetService.previewLive()\"\n      style=\"width: 200px; height: 20px\"\n    >\n      <option [value]=\"'sine'\">\n        {{ 'designer.effect.curve-sine' | translate }}\n      </option>\n      <option [value]=\"'square'\">\n        {{ 'designer.effect.curve-square' | translate }}\n      </option>\n      <!-- <option [value]=\"'triangle'\">\n        {{ 'designer.effect.curve-triangle' | translate }}</option>\n      <option [value]=\"'sawtooth'\">\n        {{ 'designer.effect.curve-sawtooth' | translate }}</option>\n      <option [value]=\"'reverse-sawtooth'\">\n        {{ 'designer.effect.curve-reverse-sawtooth' | translate }}</option> -->\n    </select>\n  </div>\n  <div>\n    <canvas #curveGrid class=\"curve-grid\" width=\"200\" height=\"100\" viewBox=\"150 -75 4850 5150\" preserveAspectRatio=\"none\"></canvas>\n  </div>\n</div>\n\n<div class=\"mr-4\" style=\"float: left\">\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-length' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.lengthMillis\"\n        style=\"width: 80px\"\n        [tooltip]=\"'hide'\"\n        [value]=\"0\"\n        [min]=\"lengthMillisMin\"\n        [max]=\"lengthMillisMax\"\n        [step]=\"1\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.lengthMillis\" (ngModelChange)=\"setLengthMillis($event); redraw()\" />\n    </div>\n    <div class=\"my-auto ml-1\">\n      {{ 'designer.misc.ms' | translate }}\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-amplitude' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.amplitude\"\n        style=\"width: 80px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"amplitudeMin\"\n        [max]=\"amplitudeMax\"\n        [step]=\"0.01\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.amplitude\" (ngModelChange)=\"setAmplitude($event); redraw()\" />\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-position' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.position\"\n        style=\"width: 80px; height: 18px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"percentageMin\"\n        [max]=\"percentageMax\"\n        [step]=\"0.01\"\n      >\n      </mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.position\" (ngModelChange)=\"setPosition($event); redraw()\" />\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-phase' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.phaseMillis\"\n        style=\"width: 80px; height: 18px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"phaseMillisMin\"\n        [max]=\"phaseMillisMax\"\n        [step]=\"1\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.phaseMillis\" (ngModelChange)=\"setPhaseMillis($event); redraw()\" />\n    </div>\n    <div class=\"my-auto ml-1\">\n      {{ 'designer.misc.ms' | translate }}\n    </div>\n  </div>\n\n  <div class=\"d-flex\">\n    <div class=\"my-auto\" style=\"width: 100px; float: left\">\n      {{ 'designer.effect.curve-chase' | translate }}\n    </div>\n    <div class=\"my-auto\" style=\"float: left\">\n      <mv-slider\n        (change)=\"redraw(); presetService.previewLive()\"\n        [(value)]=\"curve.phasingMillis\"\n        style=\"width: 80px; height: 18px\"\n        [tooltip]=\"'hide'\"\n        [min]=\"phasingMillisMin\"\n        [max]=\"phasingMillisMax\"\n        [step]=\"1\"\n      ></mv-slider>\n    </div>\n    <div class=\"my-auto\">\n      <input type=\"text\" class=\"slider-input\" [ngModel]=\"curve.phasingMillis\" (ngModelChange)=\"setPhasingMillis($event); redraw()\" />\n    </div>\n    <div class=\"my-auto ml-1\">\n      {{ 'designer.misc.ms' | translate }}\n    </div>\n  </div>\n</div>\n\n<!-- Menu for the capabilities and channels-->\n<div class=\"col col-auto p-0\" style=\"margin-right: 1px; width: 50px; float: left\">\n  <div class=\"nav flex-column nav-pills\" id=\"v-pills-tab\" role=\"tablist\" aria-orientation=\"vertical\">\n    <a\n      class=\"nav-link px-3 active\"\n      id=\"v-pills-effect-capabilities-tab\"\n      popover=\"{{ 'designer.misc.capabilities' | translate }}\"\n      container=\"body\"\n      placement=\"right\"\n      triggers=\"mouseenter:mouseleave\"\n      data-toggle=\"pill\"\n      href=\"#v-pills-effect-capabilities-{{ curve?.uuid }}\"\n      role=\"tab\"\n      aria-controls=\"v-pills-capabilities\"\n      aria-selected=\"true\"\n    >\n      <i class=\"fa fa-bolt fa-fw\" aria-hidden=\"true\"></i>\n    </a>\n    <a\n      class=\"nav-link px-3\"\n      id=\"v-pills-effect-channels-tab\"\n      popover=\"{{ 'designer.misc.channels' | translate }}\"\n      container=\"body\"\n      placement=\"right\"\n      triggers=\"mouseenter:mouseleave\"\n      data-toggle=\"pill\"\n      href=\"#v-pills-effect-channels-{{ curve?.uuid }}\"\n      role=\"tab\"\n      aria-controls=\"v-pills-channels\"\n      aria-selected=\"false\"\n    >\n      <i class=\"fa fa-sliders fa-fw\" aria-hidden=\"true\"></i>\n    </a>\n  </div>\n</div>\n\n<div class=\"h-100\" class=\"applying-to\">\n  <div class=\"tab-content h-100\" id=\"v-pills-tabContent\">\n    <div class=\"tab-pane h-100 show active\" id=\"v-pills-effect-capabilities-{{ curve?.uuid }}\" role=\"tabpanel\">\n      <!-- Capabilities-->\n      <div *ngFor=\"let capability of availableCapabilities; let i = index\" class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"capability_{{ curve?.uuid + '_' + i }}\"\n          [ngModel]=\"capabilityChecked(capability)\"\n          (change)=\"toggleCapability($event, capability)\"\n        />\n        <label class=\"form-check-label\" for=\"capability_{{ curve?.uuid + '_' + i }}\">{{ getCapabilityName(capability) | async }}</label>\n      </div>\n    </div>\n    <div class=\"tab-pane h-100 show\" id=\"v-pills-effect-channels-{{ curve?.uuid }}\" role=\"tabpanel\">\n      <!-- channels -->\n\n      <!-- profile selection -->\n      <div *ngIf=\"availableProfiles.length > 1\">\n        <div *ngFor=\"let profile of availableProfiles; let i = index\" class=\"form-check\">\n          <input\n            type=\"checkbox\"\n            class=\"form-check-input\"\n            id=\"channel_profile_{{ curve?.uuid }}_{{ profile.uuid }}\"\n            [ngModel]=\"selectedProfiles.indexOf(profile) >= 0\"\n            (change)=\"changeProfileSelection($event, profile)\"\n          />\n          <label class=\"form-check-label\" for=\"channel_profile_{{ curve?.uuid }}_{{ profile.uuid }}\">{{ profile.name }}</label>\n        </div>\n\n        <hr class=\"my-1\" style=\"border-color: white\" />\n      </div>\n\n      <!-- channels -->\n      <ng-container *ngFor=\"let entry of availableChannels | keyvalue; let i = index\">\n        <div *ngFor=\"let channel of entry.value; let j = index\" class=\"form-check\">\n          <input\n            type=\"checkbox\"\n            class=\"form-check-input\"\n            id=\"channel_{{ curve?.uuid }}_{{ i }}_{{ j }}\"\n            [ngModel]=\"channelChecked(entry.key, channel)\"\n            (change)=\"toggleChannel($event, entry.key, channel)\"\n          />\n          <label class=\"form-check-label\" for=\"channel_{{ curve?.uuid }}_{{ i }}_{{ j }}\">{{\n            getChannelName(entry.key.name, channel.name)\n          }}</label>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n","styles":[".curve-grid{background-color:#000;border:1px solid #fff}.applying-to{overflow-y:scroll;height:130px!important;background-color:#222;border:1px solid #fff;padding:.5rem}.applying-to .form-check:last-child{margin-bottom:.5rem}"]}]}],"members":{"curve":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"isSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"curveGrid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":64,"character":3},"arguments":["curveGrid",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":70,"character":23}]}],"ngOnInit":[{"__symbolic":"method"}],"drawCurrentValue":[{"__symbolic":"method"}],"getPhasingCount":[{"__symbolic":"method"}],"redraw":[{"__symbolic":"method"}],"calculateChannelCapabilities":[{"__symbolic":"method"}],"changeProfileSelection":[{"__symbolic":"method"}],"updateCapabilitiesAndChannels":[{"__symbolic":"method"}],"getCapabilityName":[{"__symbolic":"method"}],"capabilityChecked":[{"__symbolic":"method"}],"toggleCapability":[{"__symbolic":"method"}],"getChannelName":[{"__symbolic":"method"}],"channelChecked":[{"__symbolic":"method"}],"toggleChannel":[{"__symbolic":"method"}],"setLengthMillis":[{"__symbolic":"method"}],"setAmplitude":[{"__symbolic":"method"}],"setPosition":[{"__symbolic":"method"}],"setPhaseMillis":[{"__symbolic":"method"}],"setPhasingMillis":[{"__symbolic":"method"}]}},"ɵy":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"lib-app-effect-pan-tilt","template":"<svg #panTiltGrid class=\"pan-tilt-grid\" width=\"150\" height=\"150\" viewBox=\"-100 -100 1200 1200\" style=\"border: 1px solid white\"></svg>\n","styles":[""]}]}],"members":{"panTiltGrid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":8,"character":3},"arguments":["panTiltGrid"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"redraw":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵz":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"lib-app-scene","template":"<div class=\"card border-secondary panel h-100\" [class.card-intro-active]=\"introService.showStep('scenes')\">\n  <div class=\"card-header d-flex\">\n    <div>\n      {{ 'designer.scene.title' | translate }}\n    </div>\n    <div class=\"ml-auto\">\n      <a\n        href=\"#\"\n        class=\"d-none d-md-inline-block btn btn-secondary m-0 p-0\"\n        [class.text-primary]=\"sceneService.multipleSelection == true\"\n        (click)=\"sceneService.multipleSelection = !sceneService.multipleSelection; (false)\"\n        ><i class=\"fa fa-object-group fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n      <a href=\"#\" class=\"d-none d-md-inline-block btn btn-secondary m-0 p-0\" (click)=\"removeScene(); (false)\"\n        ><i class=\"fa fa-minus-circle fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n      <a href=\"#\" class=\"d-none d-md-inline-block btn btn-secondary m-0 p-0\" (click)=\"sceneService.addScene(); (false)\"\n        ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n    </div>\n  </div>\n  <div class=\"card-body border-secondary p-0\">\n    <!-- List of scenes -->\n    <div class=\"list-group\" [sortablejs]=\"projectService.project.scenes\">\n      <div\n        *ngFor=\"let scene of projectService.project.scenes; let i = index\"\n        class=\"list-group-item\"\n        [class.active-light]=\"projectService.project.previewPreset && sceneService.sceneIsSelected(scene)\"\n        [class.active]=\"!projectService.project.previewPreset && sceneService.sceneIsSelected(scene)\"\n      >\n        <div class=\"row d-flex\" (click)=\"selectScene($event, i)\" style=\"cursor: pointer\">\n          <div class=\"d-none d-md-block col-auto list-sort-handle my-auto\" style=\"cursor: move; cursor: -webkit-grabbing\">\n            <i class=\"fa fa-bars\" aria-hidden=\"true\"></i>\n          </div>\n          <div class=\"my-auto\">\n            {{ scene.name }}\n          </div>\n          <div class=\"my-auto ml-auto mr-2 d-flex\">\n            <svg class=\"my-auto\" height=\"20\" width=\"20\">\n              <circle cx=\"10\" cy=\"10\" r=\"9\" stroke=\"white\" stroke-width=\"1\" [attr.fill]=\"scene.color\" />\n            </svg>\n          </div>\n          <div class=\"d-none d-md-flex my-auto mr-2\">\n            <button type=\"button\" class=\"btn btn-secondary btn-sm py-0 px-1\" (click)=\"openSettings(scene); (false)\">...</button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":19,"character":26},{"__symbolic":"reference","name":"ɵr"}]}],"ngOnInit":[{"__symbolic":"method"}],"selectScene":[{"__symbolic":"method"}],"removeScene":[{"__symbolic":"method"}],"openSettings":[{"__symbolic":"method"}]}},"ɵba":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"lib-app-fixture-capability-color","template":"<div class=\"card border-secondary h-100\" [class.capability-deactivated]=\"!active\">\n  <div class=\"card-header\">\n    <div class=\"my-auto\" style=\"float: left\">\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"capabilityColorActive\"\n          [ngModel]=\"active\"\n          (ngModelChange)=\"changeActive($event)\"\n        />\n        <label class=\"form-check-label\" for=\"capabilityColorActive\">{{ 'designer.fixture.capability-color' | translate }}</label>\n      </div>\n    </div>\n    <div class=\"pull-right\">\n      <input type=\"text\" [(ngModel)]=\"color\" style=\"width: 58px; text-align: center; font-size: 12px; font-family: monospace\" />\n    </div>\n  </div>\n\n  <div class=\"card-body h-100\">\n    <div id=\"color-picker-container\"></div>\n  </div>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":25,"character":119}]}],"update":[{"__symbolic":"method"}],"setPickerColor":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"mount":[{"__symbolic":"method"}],"updateFixtureColor":[{"__symbolic":"method"}],"changeActive":[{"__symbolic":"method"}],"changeColor":[{"__symbolic":"method"}]}},"ɵbb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"lib-app-fixture","template":"<div class=\"card border-secondary h-100 panel\" [class.card-intro-active]=\"introService.showStep('fixtures')\">\n  <div class=\"card-header d-flex\">\n    <div>Fixtures</div>\n    <div class=\"ml-auto\">\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"selectNone(); (false)\"\n        ><i class=\"fa fa-square-o fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"selectAll(); (false)\"\n        ><i class=\"fa fa-check-square-o fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"openFixturePool(); (false)\"\n        ><i class=\"fa fa-cog fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100 p-0\">\n    <!-- List of fixtures -->\n    <div *ngIf=\"presetService.selectedPreset\" class=\"list-group\" [sortablejs]=\"projectService.project.fixtures\">\n      <div\n        class=\"list-group-item\"\n        *ngFor=\"let item of projectService.project.fixtures\"\n        [class.inactive-list-item]=\"!fixtureIsSelected(item)\"\n      >\n        <div class=\"row d-flex\" (click)=\"selectFixture($event, item)\" style=\"cursor: pointer\">\n          <div class=\"col-auto list-sort-handle my-auto\" style=\"cursor: move; cursor: -webkit-grabbing\">\n            <i class=\"fa fa-bars\" aria-hidden=\"true\"></i>\n          </div>\n          <div class=\"form-check\">\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"active\" [ngModel]=\"fixtureIsSelected(item)\" />\n          </div>\n          <div>\n            <span class=\"icon-{{ fixtureService.getFixtureIconClass(fixtureService.getProfileByUuid(item.profileUuid)) }} mr-1\"></span>\n            {{ item.name }}\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"projectService.project.fixtures.length == 0\" class=\"w-100 h-100 d-flex p-3 text-center\">\n      <a href=\"#\" class=\"m-auto\" (click)=\"openFixturePool(); (false)\"\n        ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i> {{ 'designer.fixture.no-fixtures' | translate }}</a\n      >\n    </div>\n  </div>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵs"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵr"}]}],"ngOnInit":[{"__symbolic":"method"}],"fixtureIsSelected":[{"__symbolic":"method"}],"selectFixture":[{"__symbolic":"method"}],"selectAll":[{"__symbolic":"method"}],"selectNone":[{"__symbolic":"method"}],"openFixturePool":[{"__symbolic":"method"}]}},"ɵbc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"lib-app-fixture-settings-position","template":"<div class=\"card border-secondary h-100\">\n  <div class=\"card-header\">\n    {{ 'designer.fixture.setting-position-title' | translate }}\n  </div>\n\n  <div *ngIf=\"fixtureService.selectedSettingsFixtures.length > 0\" class=\"card-body h-100\">\n    <div>\n      <select class=\"mb-2\" style=\"width: 140px\" [(ngModel)]=\"selectedPositioning\" (change)=\"changePosition($event.target.value)\">\n        <option [ngValue]=\"selectUndefinedOptionValue\"></option>\n        <option value=\"topFront\">{{ 'designer.fixture.setting-position-front-top' | translate }}</option>\n        <option value=\"bottomFront\">{{ 'designer.fixture.setting-position-front-bottom' | translate }}</option>\n        <option value=\"topBack\">{{ 'designer.fixture.setting-position-back-top' | translate }}</option>\n        <option value=\"bottomBack\">{{ 'designer.fixture.setting-position-back-bottom' | translate }}</option>\n        <option value=\"manual\">{{ 'designer.fixture.setting-position-manual' | translate }}</option>\n      </select>\n    </div>\n\n    <div *ngIf=\"selectedPositioning == 'manual'\">\n      <div>{{ 'designer.fixture.setting-position' | translate }}</div>\n      <div class=\"d-flex\">\n        <div class=\"my-auto\" style=\"width: 20px; float: left\">X</div>\n        <div class=\"my-auto\" style=\"float: left\">\n          <mv-slider\n            style=\"width: 80px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"positionX ? positionX : (positionXMax + positionXMin) / 2\"\n            [min]=\"positionXMin\"\n            [max]=\"positionXMax\"\n            [step]=\"1\"\n            (change)=\"changePositionManual('x', $event.newValue)\"\n          ></mv-slider>\n        </div>\n        <div class=\"my-auto\">\n          <input [ngModel]=\"positionX\" (ngModelChange)=\"changePositionManual('x', $event)\" type=\"text\" class=\"slider-input\" />\n        </div>\n      </div>\n      <div class=\"d-flex\">\n        <div class=\"my-auto\" style=\"width: 20px; float: left\">Y</div>\n        <div class=\"my-auto\" style=\"float: left\">\n          <mv-slider\n            style=\"width: 80px; height: 18px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"positionZ ? positionZ : (positionZMax + positionZMin) / 2\"\n            [min]=\"positionZMin\"\n            [max]=\"positionZMax\"\n            [step]=\"1\"\n            (change)=\"changePositionManual('z', $event.newValue)\"\n          ></mv-slider>\n        </div>\n        <div class=\"my-auto\">\n          <input [ngModel]=\"positionZ\" (ngModelChange)=\"changePositionManual('z', $event)\" type=\"text\" class=\"slider-input\" />\n        </div>\n      </div>\n      <div class=\"d-flex\">\n        <div class=\"my-auto\" style=\"width: 20px; float: left\">Z</div>\n        <div class=\"my-auto\" style=\"float: left\">\n          <mv-slider\n            style=\"width: 80px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"positionY ? positionY : (positionYMax + positionYMin) / 2\"\n            [min]=\"positionYMin\"\n            [max]=\"positionYMax\"\n            [step]=\"1\"\n            (change)=\"changePositionManual('y', $event.newValue)\"\n          ></mv-slider>\n        </div>\n        <div class=\"my-auto\">\n          <input [ngModel]=\"positionY\" (ngModelChange)=\"changePositionManual('y', $event)\" type=\"text\" class=\"slider-input\" />\n        </div>\n      </div>\n\n      <div class=\"mt-2\">{{ 'designer.fixture.setting-rotation' | translate }}</div>\n      <div class=\"d-flex\">\n        <div class=\"my-auto\" style=\"width: 20px; float: left\">X</div>\n        <div class=\"my-auto\" style=\"float: left\">\n          <mv-slider\n            style=\"width: 80px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"rotationX ? rotationX : (rotationMin + rotationMax) / 2\"\n            [min]=\"rotationMin\"\n            [max]=\"rotationMax\"\n            [step]=\"1\"\n            (change)=\"changeRotationManual('x', $event.newValue)\"\n          ></mv-slider>\n        </div>\n        <div class=\"my-auto\">\n          <input [ngModel]=\"rotationX\" (ngModelChange)=\"changeRotationManual('x', $event)\" type=\"text\" class=\"slider-input\" />\n        </div>\n      </div>\n      <div class=\"d-flex\">\n        <div class=\"my-auto\" style=\"width: 20px; float: left\">Y</div>\n        <div class=\"my-auto\" style=\"float: left\">\n          <mv-slider\n            style=\"width: 80px; height: 18px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"rotationZ ? rotationZ : (rotationMin + rotationMax) / 2\"\n            [min]=\"rotationMin\"\n            [max]=\"rotationMax\"\n            [step]=\"1\"\n            (change)=\"changeRotationManual('z', $event.newValue)\"\n          ></mv-slider>\n        </div>\n        <div class=\"my-auto\">\n          <input [ngModel]=\"rotationZ\" (ngModelChange)=\"changeRotationManual('z', $event)\" type=\"text\" class=\"slider-input\" />\n        </div>\n      </div>\n      <div class=\"d-flex\">\n        <div class=\"my-auto\" style=\"width: 20px; float: left\">Z</div>\n        <div class=\"my-auto\" style=\"float: left\">\n          <mv-slider\n            style=\"width: 80px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"rotationY ? rotationY : (rotationMin + rotationMax) / 2\"\n            [min]=\"rotationMin\"\n            [max]=\"rotationMax\"\n            [step]=\"1\"\n            (change)=\"changeRotationManual('y', $event.newValue)\"\n          ></mv-slider>\n        </div>\n        <div class=\"my-auto\">\n          <input [ngModel]=\"rotationY\" (ngModelChange)=\"changeRotationManual('y', $event)\" type=\"text\" class=\"slider-input\" />\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div *ngIf=\"fixtureService.selectedSettingsFixtures.length == 0\" class=\"card-body h-100 d-flex\">\n    <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures-settings-selected' | translate }}</p>\n  </div>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵi"}]}],"ngOnInit":[{"__symbolic":"method"}],"updateSelection":[{"__symbolic":"method"}],"changePosition":[{"__symbolic":"method"}],"changePositionManual":[{"__symbolic":"method"}],"changeRotationManual":[{"__symbolic":"method"}]}},"ɵbd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"lib-app-fixture-capability","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":14,"character":19},"member":"OnPush"},"template":"<div class=\"card border-secondary panel h-100\" [class.card-intro-active]=\"introService.showStep('capabilities')\">\n  <div class=\"card-body capability-container d-flex h-100\" style=\"overflow-y: hidden\">\n    <!-- h-100 needs to be applied in chrome to avoid performance issues with many layouts (reflows)\n    during sliding. But the class must not be applied e.g. in Safari, because the bottom margin is not correct\n    anymore afterwards. -->\n    <div *ngIf=\"presetService.selectedPreset\" class=\"row m-0 pl-3\" [class.h-100]=\"isChrome()\">\n      <!-- Dimmer -->\n      <!-- the height attribute is required to avoid performance issues with many layouts (reflows)\n      in Chrome during sliding -->\n      <div *ngIf=\"presetService.hasCapabilityDimmer()\" class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-dimmer></lib-app-fixture-capability-dimmer>\n      </div>\n\n      <!-- Color -->\n      <!-- Also show for color wheel fixtures to approx. the color -->\n      <div *ngIf=\"presetService.hasCapabilityColorOrColorWheel()\" class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-color></lib-app-fixture-capability-color>\n      </div>\n\n      <!-- Color wheels -->\n      <div\n        *ngFor=\"let entry of colorWheelChannels | keyvalue; let i = index\"\n        class=\"col col-auto p-0 my-3 mr-3\"\n        style=\"height: calc(100% - 2rem)\"\n      >\n        <lib-app-fixture-capability-color-wheel\n          [profile]=\"entry.key\"\n          [channel]=\"entry.value\"\n          [wheelIndex]=\"i\"\n          [showContainer]=\"colorWheelChannels.size > 1\"\n        ></lib-app-fixture-capability-color-wheel>\n      </div>\n\n      <!-- Pan/Tilt -->\n      <div *ngIf=\"presetService.hasCapabilityPanTilt()\" class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-pan-tilt></lib-app-fixture-capability-pan-tilt>\n      </div>\n\n      <!-- Fix spacing at the end -->\n      <div class=\"col col-auto p-0 my-3 mr-3\">&nbsp;</div>\n    </div>\n\n    <div *ngIf=\"projectService.project.fixtures.length == 0\" class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures' | translate }}</p>\n    </div>\n\n    <div\n      *ngIf=\"\n        projectService.project.fixtures.length > 0 && presetService.selectedPreset && presetService.selectedPreset.fixtureUuids.length == 0\n      \"\n      class=\"m-auto\"\n    >\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures-selected' | translate }}</p>\n    </div>\n  </div>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":26,"character":31},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵr"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"wheelInList":[{"__symbolic":"method"}],"updateColorWheels":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}],"isChrome":[{"__symbolic":"method"}]}},"ɵbe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"lib-app-fixture-settings","template":"<div class=\"card border-secondary panel h-100\">\n  <div class=\"card-body capability-container d-flex h-100\" style=\"overflow-y: hidden\">\n    <!-- h-100 needs to be applied in chrome to avoid performance issues with many layouts (reflows)\n      during sliding. But the class must not be applied e.g. in Safari, because the bottom margin is not correct\n      anymore afterwards. -->\n    <div class=\"row m-0 pl-3\" [class.h-100]=\"isChrome()\">\n      <!-- Position -->\n      <div class=\"col col-auto p-0 my-3 mr-3\">\n        <lib-app-fixture-settings-position></lib-app-fixture-settings-position>\n      </div>\n\n      <!-- Stage -->\n      <div class=\"col col-auto p-0 my-3 mr-3\">\n        <lib-app-fixture-settings-stage></lib-app-fixture-settings-stage>\n      </div>\n\n      <!-- Fix spacing at the end -->\n      <div class=\"col col-auto p-0 my-3 mr-3\">&nbsp;</div>\n    </div>\n  </div>\n</div>\n","styles":[".dmx-channel{display:flex;float:left;width:28px;border:1px solid #fff;margin-left:-1px;margin-bottom:-1px}.dmx-channel-occupied{background-color:#fd7e14;border-left:none;border-right:none;cursor:move}.dmx-channel-occupied-start{border-left:1px solid #fff}.dmx-channel-occupied-end{border-right:1px solid #fff}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵi"}]}],"ngOnInit":[{"__symbolic":"method"}],"isChrome":[{"__symbolic":"method"}]}},"ɵbf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"lib-app-effect","template":"<div class=\"card border-secondary panel h-100\">\n  <div class=\"card-body capability-container\" *ngIf=\"presetService.selectedPreset\">\n    <div class=\"m-3\">\n      <accordion [closeOthers]=\"true\">\n        <accordion-group\n          *ngFor=\"let item of presetService.selectedPreset.effects; let i = index\"\n          [isOpen]=\"effectService.selectedEffect == item\"\n          (isOpenChange)=\"openEffect(item, $event)\"\n          style=\"margin-top: 1px\"\n        >\n          <button class=\"btn btn-link btn-block clearfix\" accordion-heading>\n            <div class=\"pull-left float-left d-flex w-100\">\n              <i *ngIf=\"item.type == 'curve'\" class=\"fa fa-area-chart fa-fw my-auto\" aria-hidden=\"true\"></i>\n              <i *ngIf=\"item.type == 'pan-tilt'\" class=\"fa fa-arrows-alt fa-fw my-auto\" aria-hidden=\"true\"></i>\n              <span class=\"ml-2\">{{ 'designer.effect.type-' + item.type | translate }}</span>\n              <div class=\"ml-auto mr-2\">\n                <i\n                  (click)=\"item.visible = !item.visible; presetService.previewLive(); $event.stopPropagation()\"\n                  class=\"fa fa-eye fa-fw\"\n                  [class.text-primary]=\"item.visible\"\n                  aria-hidden=\"true\"\n                ></i>\n              </div>\n              <div class=\"mr-2\">\n                <i (click)=\"this.deleteEffect(item); $event.stopPropagation()\" class=\"fa fa-trash fa-fw\" aria-hidden=\"true\"></i>\n              </div>\n              <div class=\"mr-2\">\n                <i *ngIf=\"item == effectService.selectedEffect\" class=\"fa fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n                <i *ngIf=\"item != effectService.selectedEffect\" class=\"fa fa-caret-right fa-fw\" aria-hidden=\"true\"></i>\n              </div>\n            </div>\n          </button>\n\n          <div *ngIf=\"item.type == 'curve'\" style=\"min-width: 670px\">\n            <lib-app-effect-curve [curve]=\"item\" [isSelected]=\"item == effectService.selectedEffect\"></lib-app-effect-curve>\n          </div>\n\n          <div *ngIf=\"item.type == 'pan-tilt'\" style=\"min-width: 500px\">\n            <lib-app-effect-pan-tilt></lib-app-effect-pan-tilt>\n          </div>\n        </accordion-group>\n      </accordion>\n\n      <div class=\"d-flex mx-auto mt-3\">\n        <div class=\"dropdown d-flex\">\n          <a\n            class=\"btn btn-secondary dropdown-toggle\"\n            href=\"#\"\n            role=\"button\"\n            id=\"dropdownMenuLink\"\n            data-toggle=\"dropdown\"\n            aria-haspopup=\"true\"\n            aria-expanded=\"false\"\n          >\n            <i class=\"fa fa-plus\" aria-hidden=\"true\"></i> {{ 'designer.effect.add-new' | translate }}\n          </a>\n\n          <div class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuLink\">\n            <a class=\"dropdown-item\" href=\"#\" (click)=\"addCurveEffect(); (false)\">\n              <i class=\"fa fa-area-chart fa-fw\" aria-hidden=\"true\"></i> {{ 'designer.effect.curve' | translate }}</a\n            >\n            <!-- <a class=\"dropdown-item\" href=\"#\" (click)=\"addPanTiltEffect()\">\n              <i class=\"fa fa-arrows-alt fa-fw\" aria-hidden=\"true\"></i> Pan/Tilt</a> -->\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵj"},{"__symbolic":"reference","name":"ɵq"}]}],"ngOnInit":[{"__symbolic":"method"}],"addEffect":[{"__symbolic":"method"}],"addCurveEffect":[{"__symbolic":"method"}],"addPanTiltEffect":[{"__symbolic":"method"}],"openEffect":[{"__symbolic":"method"}],"deleteEffect":[{"__symbolic":"method"}]}},"ɵbg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"lib-app-fixture-pool","template":"<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ 'designer.fixture-pool.title' | translate }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"cancel(); (false)\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <div class=\"row\">\n    <div class=\"col-6\">\n      <!-- Search for profiles -->\n      <input\n        type=\"text\"\n        class=\"form-control input-block mb-3\"\n        id=\"searchSet\"\n        placeholder=\"{{ 'designer.fixture-pool.search-profiles' | translate }}\"\n        (input)=\"searchExpression = $event.target.value; filterProfiles()\"\n      />\n\n      <!-- Profiles -->\n      <div class=\"card border-secondary w-100\" style=\"height: 200px\">\n        <div class=\"card-body p-0 w-100\">\n          <div class=\"list-group list-group-flush w-100\">\n            <a *ngIf=\"loadingProfiles\" class=\"list-group-item flex-column align-items-start d-flex\">\n              <p class=\"mb-0 mx-auto\">\n                <i class=\"fa fa-spinner fa-pulse fa-fw\"></i>\n              </p>\n            </a>\n\n            <div class=\"list-group-item\" *ngFor=\"let profile of filteredProfiles | sort: 'uuid'\">\n              <div class=\"row\">\n                <div class=\"col-10 col-auto my-auto pl-2\">\n                  <p class=\"mb-0\">\n                    <span class=\"icon-{{ fixtureService.getFixtureIconClass(profile) }} mr-1\"></span> {{ profile.manufacturerName }} -\n                    {{ profile.name }}\n                  </p>\n                </div>\n                <div class=\"col-2 my-auto\">\n                  <a class=\"btn btn-primary btn-sm float-right\" href=\"#\" role=\"button\" (click)=\"addFixture(profile); (false)\">\n                    <i class=\"fa fa-plus\" aria-hidden=\"true\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div>\n        <p class=\"d-inline-block mb-0 mt-2\">\n          Powered by the <a href=\"https://open-fixture-library.org/\" target=\"_blank\">Open Fixture Library</a>\n        </p>\n        <a\n          class=\"mt-2 btn btn-secondary btn-sm float-right\"\n          href=\"https://open-fixture-library.org/fixture-editor\"\n          target=\"_blank\"\n          role=\"button\"\n        >\n          <i class=\"fa fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.add-profile' | translate }}\n        </a>\n        <button\n          *ngIf=\"configService.localProfiles\"\n          type=\"button\"\n          class=\"mr-2 mt-2 btn btn-secondary btn-sm float-right\"\n          (click)=\"updateProfiles(); (false)\"\n          [disabled]=\"updatingProfiles\"\n          role=\"button\"\n        >\n          <i *ngIf=\"updatingProfiles\" class=\"fa fa-spinner fa-pulse fa-fw\" aria-hidden=\"true\"></i>\n          <i *ngIf=\"!updatingProfiles\" class=\"fa fa-download fa-fw\" aria-hidden=\"true\"></i>\n          {{ 'designer.fixture-pool.update-profiles' | translate }}\n        </button>\n      </div>\n    </div>\n    <div class=\"col-6\">\n      <div class=\"row\">\n        <!-- Add fixture from local profile -->\n        <div class=\"col-6\">\n          <button type=\"button\" class=\"btn btn-secondary\" (click)=\"createFixtureFromProfileFile()\" role=\"button\">\n            <i class=\"fa fa-plus\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.create-fixture-from-profile-file' | translate }}\n          </button>\n        </div>\n\n        <!-- Universe -->\n        <div class=\"col-6\">\n          <div class=\"form-group row\">\n            <label class=\"col-lg-4 col-form-label\">{{ 'designer.fixture-pool.universe' | translate }}</label>\n            <div class=\"col-lg-8\">\n              <select class=\"custom-select\">\n                <option>Universe 1</option>\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fixtures -->\n      <div class=\"card border-secondary\" style=\"height: 235px\">\n        <div class=\"card-body p-0\">\n          <div class=\"list-group list-group-flush\" [sortablejs]=\"fixturePool\">\n            <div\n              class=\"list-group-item\"\n              *ngFor=\"let fixture of fixturePool\"\n              [class.active]=\"fixture == selectedFixture\"\n              (click)=\"selectFixture(fixture)\"\n              style=\"cursor: pointer\"\n            >\n              <div class=\"row\">\n                <div class=\"col-auto list-sort-handle my-auto\" style=\"cursor: move; cursor: -webkit-grabbing\">\n                  <i class=\"fa fa-bars\" aria-hidden=\"true\"></i>\n                </div>\n                <div class=\"col-auto flex-grow pl-0 my-auto\">\n                  <p class=\"mb-0\">\n                    <span class=\"icon-{{ fixtureService.getFixtureIconClass(fixtureService.getProfileByUuid(fixture.profileUuid)) }} mr-1\">\n                    </span\n                    >{{ fixture.name }}\n                  </p>\n                </div>\n                <div class=\"col-auto my-auto\">\n                  <a class=\"btn btn-primary btn-sm float-right\" href=\"#\" role=\"button\" (click)=\"removeFixture(fixture); (false)\">\n                    <i class=\"fa fa-minus\" aria-hidden=\"true\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"row mt-3\">\n    <div class=\"col\">\n      <!-- Tab navigation -->\n      <ul class=\"nav nav-tabs mb-4\" id=\"myTab\" role=\"tablist\">\n        <li class=\"nav-item\">\n          <a class=\"nav-link active\" id=\"sets-tab\" data-toggle=\"tab\" href=\"#dmx\" role=\"tab\">\n            <i class=\"icon-ola\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.dmx' | translate }}\n          </a>\n        </li>\n        <li class=\"nav-item\">\n          <a class=\"nav-link\" id=\"compositions-tab\" data-toggle=\"tab\" href=\"#settings\" role=\"tab\">\n            <i class=\"fa fa-cog\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.settings' | translate }}\n          </a>\n        </li>\n      </ul>\n\n      <!-- Tab content -->\n      <div class=\"tab-content\" id=\"myTabContent\">\n        <!-- DMX universe overview-->\n        <div class=\"tab-pane show active\" id=\"dmx\" role=\"tabpanel\">\n          <!-- Show all channel numbers -->\n          <!-- <div class=\"form-group row\">\n            <div class=\"col-auto flex-grow\"></div>\n            <div class=\"col-lg-3 d-flex\">\n              <div class=\"form-check my-auto ml-auto\">\n                <input type=\"checkbox\" class=\"form-check-input\" id=\"showChannelNumbers\" [ngModel]=\"showChannelNumbers\"\n                  (ngModelChange)=\"showChannelNumbers = $event\">\n                <label class=\"form-check-label\" for=\"showChannelNumbers\">Show channels</label>\n              </div>\n            </div>\n          </div> -->\n\n          <!-- List of DMX channels -->\n          <div>\n            <div\n              *ngFor=\"let channel of dmxChannels; let i = index\"\n              class=\"dmx-channel\"\n              [class.dmx-channel-occupied]=\"channelOccupied(i)\"\n              [class.dmx-channel-occupied-start]=\"channelOccupiedStart(i)\"\n              [class.dmx-channel-occupied-end]=\"channelOccupiedEnd(i)\"\n              [class.dmx-channel-selected]=\"channelSelected(i)\"\n              [class.dmx-channel-overlapped]=\"channelOverlapped(i)\"\n              (mousedown)=\"channelMouseDown($event)\"\n              (mouseover)=\"channelMouseOver($event)\"\n              [attr.data-index]=\"i\"\n              popover=\"{{ i + 1 }}\"\n              placement=\"top\"\n              triggers=\"mouseenter:mouseleave\"\n            >\n              <div class=\"d-flex w-100 dmx-channel-text\" [attr.data-index]=\"i\" [class.dmx-channel-text-visible]=\"showChannelNumbers\">\n                <div class=\"m-auto\" style=\"font-size: 11px\" [attr.data-index]=\"i\"><small [attr.data-index]=\"i\">&nbsp;</small></div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Fixture settings -->\n        <div class=\"tab-pane\" id=\"settings\" role=\"tabpanel\">\n          <div *ngIf=\"selectedFixture && selectedFixtureProfile\">\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\" for=\"fixtureName\">{{ 'designer.fixture-pool.fixture-name' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <input type=\"text\" class=\"form-control\" [(ngModel)]=\"selectedFixture.name\" maxlength=\"200\" id=\"fixtureName\" />\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\">{{ 'designer.fixture-pool.mode' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <select\n                  class=\"custom-select\"\n                  [ngModel]=\"selectedFixture.modeShortName\"\n                  (ngModelChange)=\"selectedFixture.modeShortName = $event\"\n                >\n                  <option *ngFor=\"let mode of selectedFixtureProfile.modes\" [ngValue]=\"mode.shortName || mode.name\">\n                    {{ mode.name }}\n                    - {{ mode.channels.length }}\n                    {{ 'designer.fixture-pool.channels' | translate }}\n                  </option>\n                </select>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\">{{ 'designer.fixture-pool.first-channel' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <select\n                  class=\"custom-select\"\n                  [ngModel]=\"selectedFixture.dmxFirstChannel\"\n                  (ngModelChange)=\"selectedFixture.dmxFirstChannel = $event\"\n                >\n                  <option *ngFor=\"let channel of dmxChannels; let i = index\" [ngValue]=\"i\">\n                    {{ i + 1 }}\n                  </option>\n                </select>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\"></label>\n              <div class=\"col-lg-9\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addCopy(selectedFixture)\">\n                  {{ 'designer.fixture.add-copy' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <a class=\"mr-3 my-auto\" href=\"#\" role=\"button\" (click)=\"cancel(); (false)\">\n    {{ 'designer.misc.cancel' | translate }}\n  </a>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n","styles":[".list-group-item{padding:.3rem 1.25rem}.dmx-channel{display:flex;float:left;width:28px;border:1px solid #fff;margin-left:-1px;margin-bottom:-1px;padding-bottom:2px}.dmx-channel-occupied{background-color:#63462e;border-left:none;border-right:none;cursor:move}.dmx-channel-occupied-start{border-left:1px solid #fff;border-top-left-radius:8px;border-bottom-left-radius:8px}.dmx-channel-occupied-end{border-right:1px solid #fff;border-top-right-radius:8px;border-bottom-right-radius:8px}.dmx-channel-selected{background-color:#fd7e14}.dmx-channel-overlapped{background-color:red;border:1px solid red;cursor:move}.card{overflow:auto}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalRef","line":42,"character":23},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":47,"character":30},{"__symbolic":"reference","module":"ngx-toastr","name":"ToastrService","line":48,"character":27},{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":51,"character":26}]}],"ngOnInit":[{"__symbolic":"method"}],"loadProfiles":[{"__symbolic":"method"}],"selectFixture":[{"__symbolic":"method"}],"filterProfiles":[{"__symbolic":"method"}],"addFixture":[{"__symbolic":"method"}],"addCopy":[{"__symbolic":"method"}],"removeFixture":[{"__symbolic":"method"}],"channelOccupied":[{"__symbolic":"method"}],"channelOccupiedStart":[{"__symbolic":"method"}],"channelOccupiedEnd":[{"__symbolic":"method"}],"channelOverlapped":[{"__symbolic":"method"}],"channelMouseDown":[{"__symbolic":"method"}],"channelSelected":[{"__symbolic":"method"}],"mouseUp":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":278,"character":3},"arguments":["window:mouseup",["$event"]]}]}],"channelMouseOver":[{"__symbolic":"method"}],"ok":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"updateProfiles":[{"__symbolic":"method"}],"createFixtureFromProfileFile":[{"__symbolic":"method"}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":379,"character":3},"arguments":["document:keydown.enter",["$event"]]}]}]}},"ɵbh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"selector":"lib-app-preset","template":"<div\n  class=\"card border-secondary h-100 panel card-intro-preset card-intro-active\"\n  [class.card-intro-active]=\"introService.showStep('presets')\"\n>\n  <div class=\"card-header d-flex\">\n    <div>\n      {{ 'designer.preset.title' | translate }}\n    </div>\n    <div class=\"ml-auto\">\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"removePreset(); (false)\"\n        ><i class=\"fa fa-minus-circle fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"addPreset(); (false)\"\n        ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100 p-0\">\n    <!-- List of presets -->\n    <div class=\"list-group\" [sortablejs]=\"projectService.project.presets\">\n      <div\n        class=\"list-group-item\"\n        *ngFor=\"let item of projectService.project.presets; let i = index\"\n        (click)=\"selectPreset(i)\"\n        [class.active-light]=\"!projectService.project.previewPreset && item == presetService.selectedPreset\"\n        [class.active]=\"projectService.project.previewPreset && item == presetService.selectedPreset\"\n        [class.inactive-list-item]=\"!sceneService.presetIsSelected(item)\"\n      >\n        <div class=\"row d-flex\" style=\"cursor: pointer\">\n          <div class=\"col-auto list-sort-handle my-auto\" style=\"cursor: move; cursor: -webkit-grabbing\">\n            <i class=\"fa fa-bars\" aria-hidden=\"true\"></i>\n          </div>\n          <div class=\"form-check\">\n            <input\n              type=\"checkbox\"\n              [disabled]=\"!enableCheckbox()\"\n              class=\"form-check-input\"\n              id=\"active\"\n              [ngModel]=\"sceneService.presetIsSelected(item)\"\n              (ngModelChange)=\"activatePreset($event, i)\"\n              (click)=\"$event.stopPropagation()\"\n            />\n          </div>\n          <div>\n            {{ item.name }}\n          </div>\n          <div class=\"my-auto ml-auto mr-2 d-flex\">\n            <button type=\"button\" class=\"btn btn-secondary btn-sm py-0 px-1\" (click)=\"openSettings(item); (false)\">...</button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","name":"ɵl"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵr"},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":20,"character":26}]}],"ngOnInit":[{"__symbolic":"method"}],"selectPreset":[{"__symbolic":"method"}],"enableCheckbox":[{"__symbolic":"method"}],"activatePreset":[{"__symbolic":"method"}],"addPreset":[{"__symbolic":"method"}],"removePreset":[{"__symbolic":"method"}],"openSettings":[{"__symbolic":"method"}]}},"ɵbi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"lib-app-master-dimmer","template":"<div class=\"card border-secondary h-100\">\n  <!-- For larger screens vertically -->\n  <div class=\"d-none d-md-flex card-body h-100\" style=\"flex-direction: column\">\n    <div class=\"mb-3 w-100 d-flex\">\n      <i class=\"icon-dimmer m-auto\" style=\"font-size: 2em\"></i>\n    </div>\n\n    <div class=\"mb-4 w-100 d-flex\">\n      <input\n        class=\"mx-auto\"\n        type=\"text\"\n        [ngModel]=\"getValue()\"\n        (ngModelChange)=\"setValue($event / 100)\"\n        style=\"width: 42px; height: 23px; text-align: center; font-size: 12px; font-family: monospace\"\n      />\n    </div>\n\n    <div class=\"h-100 w-100 d-flex\">\n      <mv-slider\n        class=\"mx-auto\"\n        [value]=\"projectService?.project?.masterDimmerValue\"\n        (change)=\"setValue($event.newValue)\"\n        [orientation]=\"'vertical'\"\n        [reversed]=\"true\"\n        style=\"height: 100%\"\n        [tooltip]=\"'hide'\"\n        [min]=\"0\"\n        [max]=\"1\"\n        [step]=\"0.001\"\n      ></mv-slider>\n    </div>\n  </div>\n\n  <!-- For smaller screens horizontally -->\n  <div class=\"d-flex d-md-none card-body h-100\">\n    <div class=\"mb-3 d-flex my-auto\">\n      <i class=\"icon-dimmer m-auto\" style=\"font-size: 2em\"></i>\n    </div>\n\n    <div class=\"h-100 w-100 d-flex my-auto mx-3\">\n      <mv-slider\n        class=\"mx-auto\"\n        [value]=\"projectService?.project?.masterDimmerValue\"\n        (change)=\"setValue($event.newValue)\"\n        [orientation]=\"'horizontal'\"\n        style=\"width: 100%\"\n        [tooltip]=\"'hide'\"\n        [min]=\"0\"\n        [max]=\"1\"\n        [step]=\"0.001\"\n      ></mv-slider>\n    </div>\n\n    <div class=\"mb-4 d-flex my-auto\">\n      <input\n        class=\"mx-auto\"\n        type=\"text\"\n        [ngModel]=\"getValue()\"\n        (ngModelChange)=\"setValue($event / 100)\"\n        style=\"width: 42px; height: 23px; text-align: center; font-size: 12px; font-family: monospace\"\n      />\n    </div>\n  </div>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":10,"character":80},{"__symbolic":"reference","name":"ɵi"}]}],"ngOnInit":[{"__symbolic":"method"}],"setValue":[{"__symbolic":"method"}],"getValue":[{"__symbolic":"method"}]}},"ɵbj":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"lib-app-fixture-capability-dimmer","template":"<div class=\"card border-secondary h-100\" [class.capability-deactivated]=\"getValue() == undefined\" style=\"min-height: 200px\">\n  <div class=\"card-header\">\n    <div class=\"my-auto\">\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"capabilityDimmerActive\"\n          [ngModel]=\"getValue() != undefined\"\n          (ngModelChange)=\"changeActive($event)\"\n        />\n        <label class=\"form-check-label\" for=\"capabilityDimmerActive\">\n          <i class=\"icon-dimmer\"></i>\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100 d-flex\" style=\"flex-direction: column\">\n    <div class=\"mb-4 w-100 d-flex\">\n      <input\n        class=\"mx-auto\"\n        type=\"text\"\n        [ngModel]=\"getValueText() >= 0 ? getValueText() : 0\"\n        (ngModelChange)=\"setValue($event / 100)\"\n        style=\"width: 42px; height: 20px; text-align: center; font-size: 12px; font-family: monospace\"\n      />\n    </div>\n\n    <div class=\"h-100 w-100 d-flex\">\n      <mv-slider\n        class=\"mx-auto\"\n        [value]=\"getValue() >= 0 ? getValue() : 0\"\n        (change)=\"setValue($event.newValue)\"\n        [orientation]=\"'vertical'\"\n        [reversed]=\"true\"\n        style=\"height: 100%\"\n        [tooltip]=\"'hide'\"\n        [min]=\"0\"\n        [max]=\"1\"\n        [step]=\"0.001\"\n      ></mv-slider>\n    </div>\n  </div>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":10,"character":79}]}],"ngOnInit":[{"__symbolic":"method"}],"getValue":[{"__symbolic":"method"}],"getValueText":[{"__symbolic":"method"}],"setValue":[{"__symbolic":"method"}],"changeActive":[{"__symbolic":"method"}]}},"ɵbk":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"lib-app-timeline-grid","template":"<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ 'designer.timeline.grid' | translate }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.timeline.grid-type' | translate }}</label>\n    <div class=\"col-lg-8\">\n      <select class=\"custom-select\" [ngModel]=\"gridType\" (ngModelChange)=\"gridType = $event\">\n        <option value=\"time\">{{ 'designer.timeline.grid-type-time-based' | translate }}</option>\n        <option value=\"musical\">{{ 'designer.timeline.grid-type-musical' | translate }}</option>\n      </select>\n    </div>\n  </div>\n\n  <div *ngIf=\"gridType == 'musical'\" class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.timeline.beats-per-minute' | translate }}</label>\n    <div class=\"col-lg-8\">\n      <input type=\"text\" class=\"form-control\" [ngModel]=\"beatsPerMinute\" (ngModelChange)=\"beatsPerMinute = $event\" />\n    </div>\n  </div>\n\n  <div *ngIf=\"gridType == 'musical'\" class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.timeline.time-signature' | translate }}</label>\n    <div class=\"col-lg-8\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        [ngModel]=\"timeSignatureUpper\"\n        (ngModelChange)=\"timeSignatureUpper = $event\"\n        style=\"float: left; width: 40px\"\n      />\n      <div class=\"d-flex px-2 h-100\" style=\"float: left\">\n        <div class=\"m-auto\">/</div>\n      </div>\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        [ngModel]=\"timeSignatureLower\"\n        (ngModelChange)=\"timeSignatureLower = $event\"\n        style=\"width: 40px\"\n      />\n    </div>\n  </div>\n\n  <div *ngIf=\"gridType == 'musical'\" class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.timeline.grid-resolution' | translate }}</label>\n    <div class=\"col-lg-8\">\n      <select class=\"custom-select\" [ngModel]=\"gridResolution\" (ngModelChange)=\"gridResolution = $event\">\n        <option value=\"1\">1/1</option>\n        <option value=\"2\">1/2</option>\n        <option value=\"4\">1/4</option>\n        <option value=\"8\">1/8</option>\n        <option value=\"16\">1/16</option>\n        <option value=\"32\">1/32</option>\n        <option value=\"64\">1/64</option>\n      </select>\n    </div>\n  </div>\n\n  <div *ngIf=\"gridType == 'musical'\" class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.timeline.grid-offset' | translate }}</label>\n    <div class=\"col-lg-8\">\n      <input type=\"text\" class=\"form-control\" [ngModel]=\"gridOffsetMillis\" (ngModelChange)=\"gridOffsetMillis = $event\" />\n    </div>\n  </div>\n\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\"></label>\n    <div class=\"col-lg-8\">\n      <div class=\"form-check\">\n        <input type=\"checkbox\" [ngModel]=\"snapToGrid\" (ngModelChange)=\"snapToGrid = $event\" class=\"form-check-input\" id=\"snapToGrid\" />\n\n        <label class=\"form-check-label\" for=\"snapToGrid\">\n          {{ 'designer.timeline.snap-to-grid' | translate }}\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <a class=\"mr-3 my-auto\" href=\"#\" role=\"button\" (click)=\"cancel(); (false)\">\n    {{ 'designer.misc.cancel' | translate }}\n  </a>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalRef","line":18,"character":33},{"__symbolic":"reference","name":"ɵm"}]}],"ngOnInit":[{"__symbolic":"method"}],"ok":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":47,"character":3},"arguments":["document:keydown.enter",["$event"]]}]}]}},"ɵbl":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"lib-app-composition-settings","template":"<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ composition.name }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.timeline.composition-name' | translate }}</label>\n    <div class=\"col-lg-8 d-flex\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        [ngModel]=\"composition.name\"\n        (ngModelChange)=\"composition.name = $event\"\n        [typeahead]=\"existingCompositionNames\"\n      />\n    </div>\n  </div>\n\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.timeline.composition-sync-type' | translate }}</label>\n    <div class=\"col-lg-8 d-flex\">\n      <select class=\"custom-select\" [ngModel]=\"composition.syncType\" (ngModelChange)=\"composition.syncType = $event\">\n        <!-- TODO -->\n        <!-- <option value=\"none\">{{ 'designer.timeline.composition-sync-type-none' | translate }}</option> -->\n        <option value=\"audio\">{{ 'designer.timeline.composition-sync-type-audio' | translate }}</option>\n      </select>\n    </div>\n  </div>\n\n  <div *ngIf=\"composition.syncType == 'audio'\" class=\"row\">\n    <div class=\"px-3 w-100\">\n      <!-- Selected file -->\n      <div class=\"card border-secondary mb-3\">\n        <div class=\"card-body\">\n          <!-- No file selected -->\n          <div *ngIf=\"!composition.audioFileName\">\n            {{ 'designer.timeline.composition-no-file-selected' | translate }}\n          </div>\n\n          <!-- A file is selected -->\n          <div *ngIf=\"composition.audioFileName\">\n            {{ composition.audioFileName }}\n          </div>\n        </div>\n      </div>\n\n      <!-- Choose file -->\n      <ul *ngIf=\"configService.enableMediaLibrary\" class=\"nav nav-tabs mb-3\" id=\"myTab\" role=\"tablist\">\n        <li class=\"nav-item\">\n          <a class=\"nav-link active\" id=\"upload-tab\" data-toggle=\"tab\" href=\"#upload\" role=\"tab\">\n            <i class=\"fa fa-upload\" aria-hidden=\"true\"></i>\n            {{ 'designer.timeline.composition-file-upload' | translate }}\n          </a>\n        </li>\n        <li class=\"nav-item\">\n          <a class=\"nav-link\" id=\"media-library-tab\" data-toggle=\"tab\" href=\"#media-library\" role=\"tab\">\n            <i class=\"fa fa-folder-o\" aria-hidden=\"true\"></i>\n            {{ 'designer.timeline.composition-file-library' | translate }}\n          </a>\n        </li>\n      </ul>\n\n      <div class=\"tab-content\" id=\"myTabContent\">\n        <!-- Upload -->\n        <div class=\"tab-pane fade show active\" id=\"upload\" role=\"tabpanel\">\n          <!-- Dropzone -->\n          <dropzone\n            [config]=\"dropzoneConfig\"\n            [useDropzoneClass]=\"'false'\"\n            [message]=\"uploadMessage\"\n            (error)=\"onUploadError($event)\"\n            (success)=\"onUploadSuccess($event)\"\n            (queuecomplete)=\"onQueueComplete($event)\"\n            (addedfile)=\"onAddedFile($event)\"\n          ></dropzone>\n        </div>\n\n        <!-- Media library -->\n        <div class=\"tab-pane fade\" id=\"media-library\" role=\"tabpanel\">\n          <input\n            type=\"text\"\n            class=\"form-control input-block mb-3\"\n            id=\"searchFileList\"\n            placeholder=\"{{ 'designer.misc.search' | translate }}\"\n            (input)=\"filterExistingFiles($event.target.value)\"\n          />\n\n          <div class=\"card border-secondary\" style=\"height: 200px; overflow-y: scroll\">\n            <div class=\"card-body p-0\">\n              <div class=\"list-group list-group-flush\">\n                <a\n                  *ngFor=\"let existingFile of filteredExistingFiles | sort: 'name'\"\n                  class=\"list-group-item\"\n                  [class.active]=\"composition.audioFileName == existingFile\"\n                  href=\"#\"\n                  (click)=\"selectExistingFile(existingFile); (false)\"\n                >\n                  <div class=\"row\">\n                    <div class=\"col-auto my-auto flex-grow text-break-word\">\n                      {{ existingFile }}\n                    </div>\n\n                    <div class=\"col-auto my-auto pl-0 text-danger float-right\" (click)=\"deleteFile(existingFile); (false)\">\n                      <i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                    </div>\n                  </div>\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <a class=\"mr-3 my-auto\" href=\"#\" role=\"button\" (click)=\"cancel(); (false)\">\n    {{ 'designer.misc.cancel' | translate }}\n  </a>\n  <button [disabled]=\"uploading\" type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalRef","line":34,"character":23},{"__symbolic":"reference","name":"ɵm"},{"__symbolic":"reference","name":"ɵk"},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":37,"character":30},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":38,"character":18},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","module":"ngx-toastr","name":"ToastrService","line":40,"character":27},{"__symbolic":"reference","name":"ɵc"}]}],"ngOnInit":[{"__symbolic":"method"}],"ok":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":102,"character":3},"arguments":["document:keydown.enter",["$event"]]}]}],"getNameFromFile":[{"__symbolic":"method"}],"loadFiles":[{"__symbolic":"method"}],"onUploadError":[{"__symbolic":"method"}],"onUploadSuccess":[{"__symbolic":"method"}],"onQueueComplete":[{"__symbolic":"method"}],"onAddedFile":[{"__symbolic":"method"}],"filterExistingFiles":[{"__symbolic":"method"}],"selectExistingFile":[{"__symbolic":"method"}],"deleteFile":[{"__symbolic":"method"}]}},"ɵbm":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"sort"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵbn":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"lib-app-fixture-capability-pan-tilt","template":"<div class=\"card border-secondary h-100\" [class.capability-deactivated]=\"getValuePan() == undefined && getValueTilt() == undefined\">\n  <div class=\"card-header\">\n    <div class=\"my-auto\">\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"capabilityColorWheelActive\"\n          [ngModel]=\"getValuePan() != undefined || getValueTilt() != undefined\"\n          (ngModelChange)=\"changeActive($event)\"\n        />\n        <label class=\"form-check-label\" for=\"capabilityColorWheelActive\">{{ 'designer.fixture.capability-pan-tilt' | translate }}</label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100 d-flex\" style=\"flex-direction: row\">\n    <div class=\"d-flex h-100 mr-3\" style=\"flex-direction: column\">\n      <div class=\"mb-4 w-100 d-flex\">\n        <input\n          class=\"mx-auto\"\n          type=\"text\"\n          [ngModel]=\"getValueTextPan() >= 0 ? getValueTextPan() : 0\"\n          (ngModelChange)=\"setValuePan($event / 100)\"\n          style=\"width: 42px; height: 20px; text-align: center; font-size: 12px; font-family: monospace\"\n        />\n      </div>\n\n      <div class=\"h-100 w-100 d-flex\">\n        <mv-slider\n          class=\"mx-auto\"\n          [value]=\"getValuePan() >= 0 ? getValuePan() : 0\"\n          (change)=\"setValuePan($event.newValue)\"\n          [orientation]=\"'vertical'\"\n          [reversed]=\"true\"\n          style=\"height: 100%\"\n          [tooltip]=\"'hide'\"\n          [min]=\"0\"\n          [max]=\"1\"\n          [step]=\"0.001\"\n        ></mv-slider>\n      </div>\n    </div>\n\n    <div class=\"d-flex h-100\" style=\"flex-direction: column\">\n      <div class=\"mb-4 w-100 d-flex\">\n        <input\n          class=\"mx-auto\"\n          type=\"text\"\n          [ngModel]=\"getValueTextTilt() >= 0 ? getValueTextTilt() : 0\"\n          (ngModelChange)=\"setValueTilt($event / 100)\"\n          style=\"width: 42px; height: 20px; text-align: center; font-size: 12px; font-family: monospace\"\n        />\n      </div>\n\n      <div class=\"h-100 w-100 d-flex\">\n        <mv-slider\n          class=\"mx-auto\"\n          [value]=\"getValueTilt() >= 0 ? getValueTilt() : 0\"\n          (change)=\"setValueTilt($event.newValue)\"\n          [orientation]=\"'vertical'\"\n          [reversed]=\"true\"\n          style=\"height: 100%\"\n          [tooltip]=\"'hide'\"\n          [min]=\"0\"\n          [max]=\"1\"\n          [step]=\"0.001\"\n        ></mv-slider>\n      </div>\n    </div>\n  </div>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":10,"character":79}]}],"ngOnInit":[{"__symbolic":"method"}],"getValuePan":[{"__symbolic":"method"}],"getValueTextPan":[{"__symbolic":"method"}],"setValuePan":[{"__symbolic":"method"}],"getValueTilt":[{"__symbolic":"method"}],"getValueTextTilt":[{"__symbolic":"method"}],"setValueTilt":[{"__symbolic":"method"}],"changeActive":[{"__symbolic":"method"}]}},"ɵbo":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"lib-app-fixture-capability-channel","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":10,"character":19},"member":"OnPush"},"template":"<div class=\"card border-secondary h-100\" [class.capability-deactivated]=\"value == undefined\" style=\"min-height: 200px\">\n  <div class=\"card-header\">\n    <div class=\"my-auto\">\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"capabilityGeneric{{ capabilityIndex }}Active\"\n          [ngModel]=\"value != undefined\"\n          (ngModelChange)=\"changeActive($event)\"\n        />\n        <label class=\"form-check-label\" for=\"capabilityGeneric{{ capabilityIndex }}Active\">\n          {{ _channel?.name }}\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100 d-flex\" style=\"flex-direction: column; overflow: hidden\">\n    <div class=\"row h-100\">\n      <!-- display all options, if there is more than one -->\n      <div *ngIf=\"_channel.capabilities?.length > 1\" class=\"col mr-3\" style=\"overflow-y: auto\">\n        <div *ngFor=\"let capability of _channel.capabilities; let i = index\" class=\"form-check\">\n          <input\n            [(ngModel)]=\"selectedCapability\"\n            (change)=\"capabilitySelected()\"\n            class=\"form-check-input\"\n            type=\"radio\"\n            name=\"capabilityGeneric{{ capabilityIndex }}Option\"\n            id=\"capabilityGeneric{{ capabilityIndex }}Option{{ i }}\"\n            [value]=\"capability\"\n          />\n          <label style=\"max-width: 200px\" class=\"form-check-label\" for=\"capabilityGeneric{{ capabilityIndex }}Option{{ i }}\">\n            {{ 'designer.fixtureCapabilityType.' + capability.capability.type | translate\n            }}<small><span *ngIf=\"capability.capability.comment\"> - </span> {{ capability.capability.comment }}</small>\n          </label>\n        </div>\n      </div>\n\n      <!-- display a slider to select the value for the currently selected capability, if it has a range -->\n      <div\n        *ngIf=\"capabilityHasRange()\"\n        class=\"col col-auto d-flex mx-auto\"\n        [class.pl-0]=\"_channel.capabilities?.length > 1\"\n        style=\"flex-direction: column\"\n      >\n        <div class=\"mb-4 w-100 d-flex\">\n          <input\n            #sliderValue\n            class=\"mx-auto\"\n            type=\"text\"\n            [ngModel]=\"templateValue\"\n            (ngModelChange)=\"setValue($event)\"\n            style=\"width: 45px; height: 20px; text-align: center; font-size: 12px; font-family: monospace\"\n          />\n        </div>\n\n        <div class=\"h-100 w-100 d-flex\">\n          <mv-slider\n            #slider\n            class=\"mx-auto\"\n            [value]=\"templateValue\"\n            (change)=\"setValue($event.newValue)\"\n            [orientation]=\"'vertical'\"\n            [reversed]=\"true\"\n            style=\"height: 100%\"\n            [tooltip]=\"'hide'\"\n            [min]=\"rangeMin\"\n            [max]=\"rangeMax\"\n            [step]=\"1\"\n          ></mv-slider>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n","styles":[""]}]}],"members":{"sliderValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":13,"character":3},"arguments":["sliderValue",{"static":false}]}]}],"profile":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"channel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"capabilityIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵi"}]}],"updateChannel":[{"__symbolic":"method"}],"capabilityHasRange":[{"__symbolic":"method"}],"getRangeMin":[{"__symbolic":"method"}],"getRangeMax":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"setValue":[{"__symbolic":"method"}],"calculateTemplateValue":[{"__symbolic":"method"}],"getDefaultValue":[{"__symbolic":"method"}],"changeActive":[{"__symbolic":"method"}],"capabilitySelected":[{"__symbolic":"method"}]}},"ɵbp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"lib-app-fixture-channel","template":"<div class=\"card border-secondary panel h-100\">\n  <div class=\"card-body capability-container d-flex h-100\" style=\"overflow-y: hidden\">\n    <!-- h-100 needs to be applied in chrome to avoid performance issues with many layouts (reflows)\n      during sliding. But the class must not be applied e.g. in Safari, because the bottom margin is not correct\n      anymore afterwards. -->\n    <div *ngIf=\"presetService.selectedPreset\" class=\"row m-0 pl-3\" [class.h-100]=\"isChrome()\">\n      <!-- profile selection -->\n      <div\n        *ngIf=\"profiles.length > 1\"\n        class=\"col col-auto p-3 my-3 mr-3\"\n        style=\"height: calc(100% - 2rem); border: solid 1px #444; border-right: none\"\n      >\n        <div *ngFor=\"let profile of profiles; let i = index\" class=\"form-check\">\n          <input\n            type=\"checkbox\"\n            class=\"form-check-input\"\n            id=\"capabilityFilter{{ i }}\"\n            [ngModel]=\"selectedProfiles.indexOf(profile) >= 0\"\n            (ngModelChange)=\"changeProfileSelection($event, profile)\"\n          />\n          <label class=\"form-check-label\" for=\"capabilityFilter{{ i }}\">\n            {{ profile.name }}\n          </label>\n        </div>\n      </div>\n\n      <!-- all channel capabilities -->\n      <ng-container *ngFor=\"let entry of channelCapabilities | keyvalue; let i = index\">\n        <div *ngFor=\"let capability of entry.value; let j = index\" class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n          <lib-app-fixture-capability-channel [profile]=\"entry.key\" [channel]=\"capability\" [capabilityIndex]=\"i * 10000 + j\">\n          </lib-app-fixture-capability-channel>\n        </div>\n      </ng-container>\n\n      <!-- fix spacing at the end -->\n      <div class=\"col col-auto p-0 my-3 mr-3\">&nbsp;</div>\n    </div>\n\n    <div *ngIf=\"projectService.project.fixtures.length == 0\" class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures' | translate }}</p>\n    </div>\n\n    <div\n      *ngIf=\"\n        projectService.project.fixtures.length > 0 && presetService.selectedPreset && presetService.selectedPreset.fixtureUuids.length == 0\n      \"\n      class=\"m-auto\"\n    >\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures-selected' | translate }}</p>\n    </div>\n  </div>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":20,"character":78},{"__symbolic":"reference","name":"ɵc"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"calculateChannelCapabilities":[{"__symbolic":"method"}],"calculateProfiles":[{"__symbolic":"method"}],"changeProfileSelection":[{"__symbolic":"method"}],"isChrome":[{"__symbolic":"method"}]}},"ɵbq":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"lib-app-fixture-capability-color-wheel","template":"<div class=\"card border-secondary h-100\" [class.capability-deactivated]=\"getCurrentSlotNumber() == undefined\" style=\"min-height: 200px\">\n  <div class=\"card-header\">\n    <div class=\"my-auto\">\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          id=\"capabilityColorWheel{{ wheelIndex }}Active\"\n          [ngModel]=\"getCurrentSlotNumber() != undefined\"\n          (ngModelChange)=\"changeActive($event)\"\n        />\n        <label class=\"form-check-label\" for=\"capabilityColorWheel{{ wheelIndex }}Active\">\n          {{ 'designer.fixture.capability-color' | translate }}\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100\">\n    <div *ngIf=\"showContainer\">{{ _fixtureProfile.name }} - {{ _channel.name }}</div>\n\n    <div *ngIf=\"wheel\" class=\"d-flex\" style=\"max-width: 240px; flex-wrap: wrap\">\n      <div\n        *ngFor=\"let slot of slotCapabilities; let i = index\"\n        (click)=\"selectSlotNumber(slot.capability.slotNumber)\"\n        class=\"m-1 color\"\n        [class.color-selected]=\"slotCapabilityIsSelected(slot.capability.slotNumber)\"\n        [ngStyle]=\"getCapabilityColorStyle(slot)\"\n      >\n        <div\n          *ngIf=\"slotCapabilityIsSelected(slot.capability.slotNumber)\"\n          (click)=\"selectSlotNumber(slot.capability.slotNumber)\"\n          class=\"color-selected-inner\"\n        ></div>\n      </div>\n    </div>\n  </div>\n</div>\n","styles":[".color{box-sizing:border-box;width:50px;height:50px;border:1px solid #ced4da;cursor:pointer}.color-selected{border-width:3px;border-color:#fff}.color-selected-inner{border:1px solid #000;height:100%;width:100%}"]}]}],"members":{"profile":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"channel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"wheelIndex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":36,"character":3}}]}],"showContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵi"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":42,"character":78},{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}],"getCapabilityColorStyle":[{"__symbolic":"method"}],"getCurrentSlotNumber":[{"__symbolic":"method"}],"slotCapabilityIsSelected":[{"__symbolic":"method"}],"changeActive":[{"__symbolic":"method"}],"selectSlotNumber":[{"__symbolic":"method"}]}},"ɵbr":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"lib-user-login","template":"<form (ngSubmit)=\"login()\">\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title pull-left\">{{ 'designer.user.login-title' | translate }}</h4>\n    <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"cancel(); (false)\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <div class=\"form-group row\">\n      <label for=\"email\" class=\"col-sm-4 col-form-label\">{{ 'designer.user.email' | translate }}</label>\n      <div class=\"col-sm-8\">\n        <div class=\"input-group\">\n          <div class=\"input-group-prepend\">\n            <div class=\"input-group-text\"><i class=\"fa fa-fw fa-envelope-o\" aria-hidden=\"true\"></i></div>\n          </div>\n          <input\n            required\n            [disabled]=\"loggingIn\"\n            name=\"email\"\n            [(ngModel)]=\"email\"\n            type=\"email\"\n            class=\"form-control\"\n            id=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group row\">\n      <label for=\"password\" class=\"col-sm-4 col-form-label\">{{ 'designer.user.password' | translate }}</label>\n      <div class=\"col-sm-8\">\n        <div class=\"input-group\">\n          <div class=\"input-group-prepend\">\n            <div class=\"input-group-text\"><i class=\"fa fa-fw fa-lock\" aria-hidden=\"true\"></i></div>\n          </div>\n          <input\n            required\n            [disabled]=\"loggingIn\"\n            name=\"password\"\n            [(ngModel)]=\"password\"\n            type=\"password\"\n            class=\"form-control\"\n            id=\"password\"\n            placeholder=\"{{ 'designer.user.password' | translate }}\"\n          />\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"error\" class=\"alert alert-primary\" role=\"alert\">\n      {{ 'designer.user.error.' + error | translate }}\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <a class=\"mr-3 my-auto\" href=\"#\" role=\"button\" (click)=\"cancel(); (false)\">\n      {{ 'designer.misc.cancel' | translate }}\n    </a>\n    <button [disabled]=\"loggingIn\" type=\"submit\" class=\"btn btn-primary\">\n      <i *ngIf=\"loggingIn\" class=\"fa fa-spinner fa-pulse fa-fw\"></i> {{ 'designer.user.login' | translate }}\n    </button>\n  </div>\n</form>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalRef","line":20,"character":34},{"__symbolic":"reference","name":"ɵe"}]}],"ngOnInit":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"login":[{"__symbolic":"method"}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":56,"character":3},"arguments":["document:keydown.enter",["$event"]]}]}]}},"ɵbs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"lib-user-register","template":"<form (ngSubmit)=\"register()\">\n  <div class=\"modal-header\">\n    <h4 class=\"modal-title pull-left\">{{ 'designer.user.register-title' | translate }}</h4>\n    <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"cancel(); (false)\">\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <div *ngIf=\"subject\" class=\"alert alert-success\" role=\"alert\">\n      {{ 'designer.user.login-required' | translate }}\n    </div>\n    <div class=\"form-group row\">\n      <label for=\"username\" class=\"col-sm-4 col-form-label\">{{ 'designer.user.username' | translate }}</label>\n      <div class=\"col-sm-8\">\n        <div class=\"input-group\">\n          <div class=\"input-group-prepend\">\n            <div class=\"input-group-text\"><i class=\"fa fa-fw fa-user\" aria-hidden=\"true\"></i></div>\n          </div>\n          <input\n            required\n            [disabled]=\"registering\"\n            name=\"username\"\n            [(ngModel)]=\"username\"\n            type=\"text\"\n            class=\"form-control\"\n            id=\"username\"\n            placeholder=\"The Cool Guy\"\n          />\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group row\">\n      <label for=\"email\" class=\"col-sm-4 col-form-label\">{{ 'designer.user.email' | translate }}</label>\n      <div class=\"col-sm-8\">\n        <div class=\"input-group\">\n          <div class=\"input-group-prepend\">\n            <div class=\"input-group-text\"><i class=\"fa fa-fw fa-envelope-o\" aria-hidden=\"true\"></i></div>\n          </div>\n          <input\n            required\n            [disabled]=\"registering\"\n            name=\"email\"\n            [(ngModel)]=\"email\"\n            type=\"email\"\n            class=\"form-control\"\n            id=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group row\">\n      <label for=\"password\" class=\"col-sm-4 col-form-label\">{{ 'designer.user.password' | translate }}</label>\n      <div class=\"col-sm-8\">\n        <div class=\"input-group\">\n          <div class=\"input-group-prepend\">\n            <div class=\"input-group-text\"><i class=\"fa fa-fw fa-lock\" aria-hidden=\"true\"></i></div>\n          </div>\n          <input\n            required\n            [disabled]=\"registering\"\n            name=\"password\"\n            [(ngModel)]=\"password\"\n            type=\"password\"\n            class=\"form-control\"\n            id=\"password\"\n            placeholder=\"{{ 'designer.user.password' | translate }}\"\n          />\n        </div>\n      </div>\n    </div>\n    <div class=\"form-group row\">\n      <label for=\"passwordRepeat\" class=\"col-sm-4 col-form-label\">{{ 'designer.user.password-repeat' | translate }}</label>\n      <div class=\"col-sm-8\">\n        <div class=\"input-group\">\n          <div class=\"input-group-prepend\">\n            <div class=\"input-group-text\"><i class=\"fa fa-fw fa-lock\" aria-hidden=\"true\"></i></div>\n          </div>\n          <input\n            required\n            [disabled]=\"registering\"\n            name=\"passwordRepeat\"\n            [(ngModel)]=\"passwordRepeat\"\n            type=\"password\"\n            class=\"form-control\"\n            id=\"passwordRepeat\"\n            placeholder=\"{{ 'designer.user.password' | translate }}\"\n          />\n        </div>\n      </div>\n    </div>\n    <div *ngIf=\"error\" class=\"alert alert-primary\" role=\"alert\">\n      {{ 'designer.user.error.' + error | translate }}\n    </div>\n    <a href=\"#\" (click)=\"login(); (false)\">\n      <p class=\"mt-3 mb-0\" style=\"text-align: center\">{{ 'designer.user.already-have-account' | translate }}</p>\n    </a>\n  </div>\n  <div class=\"modal-footer\">\n    <a class=\"mr-3 my-auto\" href=\"#\" role=\"button\" (click)=\"cancel(); (false)\">\n      {{ 'designer.misc.cancel' | translate }}\n    </a>\n    <button [disabled]=\"registering\" type=\"submit\" class=\"btn btn-primary\">\n      <i *ngIf=\"registering\" class=\"fa fa-spinner fa-pulse fa-fw\"> </i>{{ 'designer.user.register' | translate }}\n    </button>\n  </div>\n</form>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalRef","line":23,"character":34},{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalService","line":23,"character":68},{"__symbolic":"reference","name":"ɵe"}]}],"ngOnInit":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"login":[{"__symbolic":"method"}],"emailIsValid":[{"__symbolic":"method"}],"register":[{"__symbolic":"method"}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":83,"character":3},"arguments":["document:keydown.enter",["$event"]]}]}]}},"ɵbt":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"lib-project-browser","template":"<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ 'designer.project.browser-title' | translate }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"cancel(); (false)\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body p-0\">\n  <div *ngIf=\"loading\" class=\"m-2 d-flex w-100\">\n    <p class=\"w-100\" style=\"text-align: center\"><i class=\"fa fa-spinner fa-pulse fa-fw\"></i></p>\n  </div>\n  <div *ngIf=\"projects.length == 0 && !loading\" class=\"m-2 d-flex w-100\">\n    <p class=\"w-100\" style=\"text-align: center\">\n      {{ 'designer.project.browser-empty' | translate }}\n    </p>\n  </div>\n  <div *ngIf=\"!loading\" class=\"list-group list-group-flush\" style=\"max-height: 500px; overflow-y: scroll\">\n    <div class=\"list-group-item\" *ngFor=\"let project of projects | sort: 'name'\">\n      <div class=\"row\">\n        <div class=\"col-auto my-auto flex-grow\">\n          <a href=\"#\" (click)=\"openProject(project); (false)\">\n            <p class=\"mb-0 w-100\">{{ project.name }}</p>\n          </a>\n        </div>\n        <div class=\"my-auto\">\n          <div class=\"col-auto my-auto pl-0 text-danger float-right\" style=\"cursor: pointer\" (click)=\"deleteProject(project); (false)\">\n            <i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <a class=\"mr-3 my-auto\" href=\"#\" role=\"button\" (click)=\"cancel(); (false)\">\n    {{ 'designer.misc.cancel' | translate }}\n  </a>\n  <button (click)=\"cancel(); (false)\" type=\"button\" class=\"btn btn-primary\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalRef","line":20,"character":24},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵu"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵk"}]}],"loadProjects":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"openProject":[{"__symbolic":"method"}],"deleteProject":[{"__symbolic":"method"}]}},"ɵbu":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"selector":"lib-wait-dialog","template":"<div class=\"card-modal\">\n  <div class=\"card\">\n    <div class=\"card-body\">\n      <p class=\"card-text\">{{ 'designer.misc.please-wait' | translate }}</p>\n      <div class=\"progress\">\n        <div\n          class=\"progress-bar progress-bar-striped progress-bar-animated\"\n          role=\"progressbar\"\n          style=\"width: 100%\"\n          aria-valuenow=\"10\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n        ></div>\n      </div>\n    </div>\n  </div>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}},"ɵbv":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"lib-project-import","template":"<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ 'designer.project.import-title' | translate }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <!-- Dropzone -->\n  <dropzone [config]=\"dropzoneConfig\" [useDropzoneClass]=\"'false'\" [message]=\"uploadMessage\" (error)=\"onUploadError($event)\"></dropzone>\n</div>\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalRef","line":18,"character":23},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":19,"character":30},{"__symbolic":"reference","module":"ngx-toastr","name":"ToastrService","line":20,"character":27},{"__symbolic":"reference","name":"ɵu"}]}],"ngOnInit":[{"__symbolic":"method"}],"onUploadError":[{"__symbolic":"method"}],"ok":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":78,"character":3},"arguments":["document:keydown.enter",["$event"]]}]}]}},"ɵbw":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"lib-project-share","template":"<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ 'designer.project.share-title' | translate }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.project.share-link' | translate }}</label>\n    <div class=\"col-lg-8 d-flex\">\n      <input type=\"text\" class=\"form-control\" [ngModel]=\"shareLink\" readonly />\n    </div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalRef","line":12,"character":33},{"__symbolic":"reference","name":"ɵc"}]}],"ngOnInit":[{"__symbolic":"method"}],"ok":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":27,"character":3},"arguments":["document:keydown.enter",["$event"]]}]}]}},"ɵbx":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"lib-error-dialog","template":"<div class=\"card-modal\">\n  <div class=\"card\">\n    <div class=\"card-header\">\n      {{ 'designer.misc.error' | translate }}\n    </div>\n\n    <div class=\"card-body\">\n      <div class=\"row\">\n        <div class=\"col-auto\">\n          <h2 class=\"mb-0\">\n            <i class=\"fa fa-exclamation-circle text-danger\" aria-hidden=\"true\"></i>\n          </h2>\n        </div>\n        <div class=\"col pl-0\">\n          <p class=\"mb-0\">{{ message }}</p>\n          <p *ngIf=\"details\" class=\"mt-1 mb-0\">({{ details }})</p>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"card-footer\">\n      <div class=\"d-flex float-right\">\n        <button type=\"button\" class=\"btn btn-primary\" (click)=\"ok(); (false)\">\n          {{ 'designer.misc.ok' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalRef","line":15,"character":34}]}],"ngOnInit":[{"__symbolic":"method"}],"ok":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":31,"character":3},"arguments":["document:keydown.enter",["$event"]]}]}]}},"ɵby":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"lib-app-fixture-settings-stage","template":"<div class=\"card border-secondary h-100\">\n  <div class=\"card-header\">\n    {{ 'designer.fixture.setting-stage' | translate }}\n  </div>\n\n  <div class=\"card-body h-100\">\n    <div class=\"d-flex\">\n      <div class=\"my-auto\" style=\"width: 120px; float: left\">\n        {{ 'designer.fixture.setting-stage-width' | translate }}\n      </div>\n      <div class=\"my-auto\" style=\"float: left\">\n        <mv-slider\n          style=\"width: 140px\"\n          [tooltip]=\"'hide'\"\n          [value]=\"projectService.project.stageWidthCm\"\n          [min]=\"100\"\n          [max]=\"2000\"\n          [step]=\"5\"\n          (change)=\"projectService.project.stageWidthCm = $event.newValue; update()\"\n        >\n        </mv-slider>\n      </div>\n      <div class=\"my-auto\">\n        <input\n          type=\"text\"\n          [ngModel]=\"projectService.project.stageWidthCm\"\n          (ngModelChange)=\"projectService.project.stageWidthCm = $event; update()\"\n          class=\"slider-input-readonly\"\n          readonly\n        />\n      </div>\n      <div class=\"my-auto ml-1\" style=\"color: darkgray\">cm</div>\n    </div>\n\n    <div class=\"d-flex\">\n      <div class=\"my-auto\" style=\"width: 120px; float: left\">\n        {{ 'designer.fixture.setting-stage-height' | translate }}\n      </div>\n      <div class=\"my-auto\" style=\"float: left\">\n        <mv-slider\n          style=\"width: 140px\"\n          [tooltip]=\"'hide'\"\n          [value]=\"projectService.project.stageHeightCm\"\n          [min]=\"100\"\n          [max]=\"2000\"\n          [step]=\"5\"\n          (change)=\"projectService.project.stageHeightCm = $event.newValue; update()\"\n        >\n        </mv-slider>\n      </div>\n      <div class=\"my-auto\">\n        <input\n          type=\"text\"\n          [ngModel]=\"projectService.project.stageHeightCm\"\n          (ngModelChange)=\"projectService.project.stageHeightCm = $event; update()\"\n          class=\"slider-input-readonly\"\n          readonly\n        />\n      </div>\n      <div class=\"my-auto ml-1\" style=\"color: darkgray\">cm</div>\n    </div>\n\n    <div class=\"d-flex\">\n      <div class=\"my-auto\" style=\"width: 120px; float: left\">\n        {{ 'designer.fixture.setting-stage-depth' | translate }}\n      </div>\n      <div class=\"my-auto\" style=\"float: left\">\n        <mv-slider\n          style=\"width: 140px\"\n          [tooltip]=\"'hide'\"\n          [value]=\"projectService.project.stageDepthCm\"\n          [min]=\"100\"\n          [max]=\"2000\"\n          [step]=\"5\"\n          (change)=\"projectService.project.stageDepthCm = $event.newValue; update()\"\n        >\n        </mv-slider>\n      </div>\n      <div class=\"my-auto\">\n        <input\n          type=\"text\"\n          [ngModel]=\"projectService.project.stageDepthCm\"\n          (ngModelChange)=\"projectService.project.stageDepthCm = $event; update()\"\n          class=\"slider-input-readonly\"\n          readonly\n        />\n      </div>\n      <div class=\"my-auto ml-1\" style=\"color: darkgray\">cm</div>\n    </div>\n\n    <div class=\"d-flex\">\n      <div class=\"my-auto\" style=\"width: 120px; float: left\">\n        {{ 'designer.fixture.setting-stage-floor-height' | translate }}\n      </div>\n      <div class=\"my-auto\" style=\"float: left\">\n        <mv-slider\n          style=\"width: 140px\"\n          [tooltip]=\"'hide'\"\n          [value]=\"projectService.project.stageFloorHeightCm\"\n          [min]=\"1\"\n          [max]=\"1000\"\n          [step]=\"5\"\n          (change)=\"projectService.project.stageFloorHeightCm = $event.newValue; update()\"\n        >\n        </mv-slider>\n      </div>\n      <div class=\"my-auto\">\n        <input\n          type=\"text\"\n          [ngModel]=\"projectService.project.stageFloorHeightCm\"\n          (ngModelChange)=\"projectService.project.stageFloorHeightCm = $event; update()\"\n          class=\"slider-input-readonly\"\n          readonly\n        />\n      </div>\n      <div class=\"my-auto ml-1\" style=\"color: darkgray\">cm</div>\n    </div>\n\n    <div class=\"d-flex\">\n      <div class=\"my-auto\" style=\"width: 120px; float: left\">\n        {{ 'designer.fixture.setting-stage-ceiling-height' | translate }}\n      </div>\n      <div class=\"my-auto\" style=\"float: left\">\n        <mv-slider\n          style=\"width: 140px\"\n          [tooltip]=\"'hide'\"\n          [value]=\"projectService.project.stageCeilingHeightCm\"\n          [min]=\"1\"\n          [max]=\"1000\"\n          [step]=\"5\"\n          (change)=\"projectService.project.stageCeilingHeightCm = $event.newValue; update()\"\n        >\n        </mv-slider>\n      </div>\n      <div class=\"my-auto\">\n        <input\n          type=\"text\"\n          [ngModel]=\"projectService.project.stageCeilingHeightCm\"\n          (ngModelChange)=\"projectService.project.stageCeilingHeightCm = $event; update()\"\n          class=\"slider-input-readonly\"\n          readonly\n        />\n      </div>\n      <div class=\"my-auto ml-1\" style=\"color: darkgray\">cm</div>\n    </div>\n\n    <div class=\"d-flex\">\n      <div class=\"my-auto\" style=\"width: 120px; float: left\">\n        {{ 'designer.fixture.setting-stage-pillar-width' | translate }}\n      </div>\n      <div class=\"my-auto\" style=\"float: left\">\n        <mv-slider\n          style=\"width: 140px\"\n          [tooltip]=\"'hide'\"\n          [value]=\"projectService.project.stagePillarWidthCm\"\n          [min]=\"1\"\n          [max]=\"200\"\n          [step]=\"5\"\n          (change)=\"projectService.project.stagePillarWidthCm = $event.newValue; update()\"\n        >\n        </mv-slider>\n      </div>\n      <div class=\"my-auto\">\n        <input\n          type=\"text\"\n          [ngModel]=\"projectService.project.stagePillarWidthCm\"\n          (ngModelChange)=\"projectService.project.stagePillarWidthCm = $event; update()\"\n          class=\"slider-input-readonly\"\n          readonly\n        />\n      </div>\n      <div class=\"my-auto ml-1\" style=\"color: darkgray\">cm</div>\n    </div>\n  </div>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":10,"character":119}]}],"ngOnInit":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}]}},"ɵbz":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"lib-app-intro","template":"<div\n  *ngIf=\"introService.showIntro\"\n  class=\"card border-secondary h-100 panel card-intro-active\"\n  [ngStyle]=\"{\n    top: 'calc(' + introService.positionTopPercentage + '% - 150px)',\n    left: 'calc(' + introService.positionLeftPercentage + '% - 200px)'\n  }\"\n>\n  <div class=\"card-header d-flex\">\n    <div>\n      <i class=\"fa fa-info-circle mr-1\" aria-hidden=\"true\"></i>\n      {{ 'designer.intro.title-' + introService.activeStep | translate }}\n    </div>\n    <div class=\"ml-auto\">\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"close(); (false)\"><i class=\"fa fa-times\" aria-hidden=\"true\"></i></a>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100\">\n    <p>{{ 'designer.intro.step-' + introService.activeStep | translate }}</p>\n  </div>\n\n  <div class=\"card-footer\">\n    <button *ngIf=\"introService.activeStep != 'start'\" type=\"button\" class=\"btn btn-secondary\" (click)=\"introService.back()\">\n      <i class=\"fa fa-chevron-left\" aria-hidden=\"true\"></i> {{ 'designer.intro.back' | translate }}\n    </button>\n    <button *ngIf=\"introService.activeStep != 'finish'\" type=\"button\" class=\"btn btn-secondary pull-right\" (click)=\"introService.next()\">\n      {{ 'designer.intro.next' | translate }} <i class=\"fa fa-chevron-right\" aria-hidden=\"true\"></i>\n    </button>\n    <button *ngIf=\"introService.activeStep == 'finish'\" type=\"button\" class=\"btn btn-secondary pull-right\" (click)=\"close()\">\n      {{ 'designer.intro.close' | translate }}\n    </button>\n  </div>\n</div>\n","styles":[".card{position:absolute;width:400px;height:350px!important;z-index:999999}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵr"}]}],"ngOnInit":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}},"ɵca":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"lib-preset-settings","template":"<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ name }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.preset.settings-name' | translate }}</label>\n    <div class=\"col-lg-7\">\n      <input type=\"text\" class=\"form-control\" [ngModel]=\"name\" (ngModelChange)=\"name = $event\" />\n    </div>\n  </div>\n\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.preset.settings-start' | translate }}</label>\n    <div class=\"col-lg-7\">\n      <input type=\"text\" class=\"form-control\" [ngModel]=\"startMillis\" (ngModelChange)=\"startMillis = $event\" />\n    </div>\n    <div class=\"col-lg-1 d-flex p-0\">\n      <div class=\"my-auto\">\n        {{ 'designer.misc.ms' | translate }}\n      </div>\n    </div>\n  </div>\n\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.preset.settings-end' | translate }}</label>\n    <div class=\"col-lg-7\">\n      <input type=\"text\" class=\"form-control\" [ngModel]=\"endMillis\" (ngModelChange)=\"endMillis = $event\" />\n    </div>\n    <div class=\"col-lg-1 d-flex p-0\">\n      <div class=\"my-auto\">\n        {{ 'designer.misc.ms' | translate }}\n      </div>\n    </div>\n  </div>\n\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.preset.settings-fade-in' | translate }}</label>\n    <div class=\"col-lg-7\">\n      <input type=\"text\" class=\"form-control\" [ngModel]=\"fadeInMillis\" (ngModelChange)=\"fadeInMillis = $event\" />\n    </div>\n    <div class=\"col-lg-1 d-flex p-0\">\n      <div class=\"my-auto\">\n        {{ 'designer.misc.ms' | translate }}\n      </div>\n    </div>\n  </div>\n\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\"></label>\n    <div class=\"col-lg-8 d-flex\">\n      <div class=\"form-check my-auto\">\n        <input type=\"checkbox\" [ngModel]=\"fadeInPre\" (ngModelChange)=\"fadeInPre = $event\" class=\"form-check-input\" id=\"fadeInPre\" />\n\n        <label class=\"form-check-label\" for=\"fadeInPre\">\n          {{ 'designer.preset.settings-fade-in-pre' | translate }}\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.preset.settings-fade-out' | translate }}</label>\n    <div class=\"col-lg-7\">\n      <input type=\"text\" class=\"form-control\" [ngModel]=\"fadeOutMillis\" (ngModelChange)=\"fadeOutMillis = $event\" />\n    </div>\n    <div class=\"col-lg-1 d-flex p-0\">\n      <div class=\"my-auto\">\n        {{ 'designer.misc.ms' | translate }}\n      </div>\n    </div>\n  </div>\n\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\"></label>\n    <div class=\"col-lg-8 d-flex\">\n      <div class=\"form-check my-auto\">\n        <input type=\"checkbox\" [ngModel]=\"fadeOutPost\" (ngModelChange)=\"fadeOutPost = $event\" class=\"form-check-input\" id=\"fadeOutPost\" />\n\n        <label class=\"form-check-label\" for=\"fadeOutPost\">\n          {{ 'designer.preset.settings-fade-out-post' | translate }}\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <a class=\"mr-3 my-auto\" href=\"#\" role=\"button\" (click)=\"cancel(); (false)\">\n    {{ 'designer.misc.cancel' | translate }}\n  </a>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalRef","line":20,"character":33}]}],"ngOnInit":[{"__symbolic":"method"}],"ok":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":62,"character":3},"arguments":["document:keydown.enter",["$event"]]}]}]}},"ɵcb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"lib-scene-settings","template":"<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ name }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.preset.settings-name' | translate }}</label>\n    <div class=\"col-lg-7\">\n      <input type=\"text\" class=\"form-control\" [ngModel]=\"name\" (ngModelChange)=\"name = $event\" />\n    </div>\n  </div>\n\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.scene.settings-fade-in' | translate }}</label>\n    <div class=\"col-lg-7\">\n      <input type=\"text\" class=\"form-control\" [ngModel]=\"fadeInMillis\" (ngModelChange)=\"fadeInMillis = $event\" />\n    </div>\n    <div class=\"col-lg-1 d-flex p-0\">\n      <div class=\"my-auto\">\n        {{ 'designer.misc.ms' | translate }}\n      </div>\n    </div>\n  </div>\n\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\"></label>\n    <div class=\"col-lg-8 d-flex\">\n      <div class=\"form-check my-auto\">\n        <input type=\"checkbox\" [ngModel]=\"fadeInPre\" (ngModelChange)=\"fadeInPre = $event\" class=\"form-check-input\" id=\"fadeInPre\" />\n\n        <label class=\"form-check-label\" for=\"fadeInPre\">\n          {{ 'designer.scene.settings-fade-in-pre' | translate }}\n        </label>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.scene.settings-fade-out' | translate }}</label>\n    <div class=\"col-lg-7\">\n      <input type=\"text\" class=\"form-control\" [ngModel]=\"fadeOutMillis\" (ngModelChange)=\"fadeOutMillis = $event\" />\n    </div>\n    <div class=\"col-lg-1 d-flex p-0\">\n      <div class=\"my-auto\">\n        {{ 'designer.misc.ms' | translate }}\n      </div>\n    </div>\n  </div>\n\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\"></label>\n    <div class=\"col-lg-8 d-flex\">\n      <div class=\"form-check my-auto\">\n        <input type=\"checkbox\" [ngModel]=\"fadeOutPost\" (ngModelChange)=\"fadeOutPost = $event\" class=\"form-check-input\" id=\"fadeOutPost\" />\n\n        <label class=\"form-check-label\" for=\"fadeOutPost\">\n          {{ 'designer.scene.settings-fade-out-post' | translate }}\n        </label>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <a class=\"mr-3 my-auto\" href=\"#\" role=\"button\" (click)=\"cancel(); (false)\">\n    {{ 'designer.misc.cancel' | translate }}\n  </a>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalRef","line":18,"character":33}]}],"ngOnInit":[{"__symbolic":"method"}],"ok":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":48,"character":3},"arguments":["document:keydown.enter",["$event"]]}]}]}},"ɵcc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"selector":"lib-project-save","template":"<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ 'designer.project.save-title' | translate }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"cancel(); (false)\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body p-0\">\n  <!-- The name of the current project -->\n  <div class=\"form-group row p-3 mb-0\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.project.name' | translate }}</label>\n    <div class=\"col-lg-8\">\n      <input type=\"text\" class=\"form-control\" [ngModel]=\"projectName\" (ngModelChange)=\"projectName = $event\" />\n    </div>\n  </div>\n\n  <!-- List existing projects -->\n  <div *ngIf=\"loading\" class=\"m-2 d-flex w-100\">\n    <p class=\"w-100\" style=\"text-align: center\"><i class=\"fa fa-spinner fa-pulse fa-fw\"></i></p>\n  </div>\n  <div *ngIf=\"!loading\" class=\"list-group list-group-flush\" style=\"max-height: 500px; overflow-y: scroll\">\n    <div class=\"list-group-item\" *ngFor=\"let project of projects | sort: 'name'\">\n      <div class=\"row\">\n        <div class=\"col-auto my-auto flex-grow\">\n          <a href=\"#\" (click)=\"selectProject(project); (false)\">\n            <p class=\"mb-0 w-100\">{{ project.name }}</p>\n          </a>\n        </div>\n        <div class=\"my-auto\">\n          <div class=\"col-auto my-auto pl-0 text-danger float-right\" style=\"cursor: pointer\" (click)=\"deleteProject(project); (false)\">\n            <i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <a class=\"mr-3 my-auto\" href=\"#\" role=\"button\" (click)=\"cancel(); (false)\">\n    {{ 'designer.misc.cancel' | translate }}\n  </a>\n  <button [disabled]=\"loading || !projectName\" (click)=\"saveProject(); (false)\" type=\"button\" class=\"btn btn-primary\">\n    {{ 'designer.misc.ok' | translate }}\n  </button>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalRef","line":19,"character":24},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵq"},{"__symbolic":"reference","name":"ɵk"}]}],"ngOnInit":[{"__symbolic":"method"}],"loadProjects":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"selectProject":[{"__symbolic":"method"}],"existingProject":[{"__symbolic":"method"}],"doSave":[{"__symbolic":"method"}],"saveProject":[{"__symbolic":"method"}],"deleteProject":[{"__symbolic":"method"}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":96,"character":3},"arguments":["document:keydown.enter",["$event"]]}]}]}},"ɵcd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"lib-fixture-pool-create-from-file","template":"<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ 'designer.fixture-pool.create-fixture-from-profile-file-dialog-title' | translate }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <!-- Dropzone -->\n  <dropzone [config]=\"dropzoneConfig\" [useDropzoneClass]=\"'false'\" [message]=\"uploadMessage\" (error)=\"onUploadError($event)\"></dropzone>\n</div>\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n","styles":[""]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ngx-bootstrap/modal","name":"BsModalRef","line":22,"character":23},{"__symbolic":"reference","module":"@ngx-translate/core","name":"TranslateService","line":23,"character":30},{"__symbolic":"reference","module":"ngx-toastr","name":"ToastrService","line":24,"character":27},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}]}],"ngOnInit":[{"__symbolic":"method"}],"onUploadError":[{"__symbolic":"method"}],"ok":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"handleKeyboardEvent":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":122,"character":3},"arguments":["document:keydown.enter",["$event"]]}]}]}}},"origins":{"DesignerService":"./lib/designer.service","DesignerComponent":"./lib/designer.component","DesignerModule":"./lib/designer.module","ɵa":"./lib/preview/preview.component","ɵb":"./lib/services/fixture.service","ɵc":"./lib/services/project.service","ɵd":"./lib/services/uuid.service","ɵe":"./lib/services/user.service","ɵf":"./lib/services/preview-mesh.service","ɵg":"./lib/services/animation.service","ɵh":"./lib/services/preview.service","ɵi":"./lib/services/preset.service","ɵj":"./lib/services/effect.service","ɵk":"./lib/services/config.service","ɵl":"./lib/services/scene.service","ɵm":"./lib/services/timeline.service","ɵn":"./lib/services/universe.service","ɵo":"./lib/timeline/timeline.component","ɵp":"./lib/services/hotkey-target-exclude.service","ɵq":"./lib/services/warning-dialog.service","ɵr":"./lib/services/intro.service","ɵs":"./lib/services/fixture-pool.service","ɵt":"./lib/services/user-ensure-login.service","ɵu":"./lib/services/project-load.service","ɵv":"./lib/services/error-dialog.service","ɵw":"./lib/warning-dialog/warning-dialog.component","ɵx":"./lib/effect/effect-curve/effect-curve.component","ɵy":"./lib/effect/effect-pan-tilt/effect-pan-tilt.component","ɵz":"./lib/scene/scene.component","ɵba":"./lib/fixture/fixture-capability/fixture-capability-color/fixture-capability-color.component","ɵbb":"./lib/fixture/fixture.component","ɵbc":"./lib/fixture/fixture-settings/fixture-settings-position/fixture-settings-position.component","ɵbd":"./lib/fixture/fixture-capability/fixture-capability.component","ɵbe":"./lib/fixture/fixture-settings/fixture-settings.component","ɵbf":"./lib/effect/effect.component","ɵbg":"./lib/fixture-pool/fixture-pool.component","ɵbh":"./lib/preset/preset.component","ɵbi":"./lib/master-dimmer/master-dimmer.component","ɵbj":"./lib/fixture/fixture-capability/fixture-capability-dimmer/fixture-capability-dimmer.component","ɵbk":"./lib/timeline/timeline-grid/timeline-grid.component","ɵbl":"./lib/timeline/composition-settings/composition-settings.component","ɵbm":"./lib/array-sort-pipe","ɵbn":"./lib/fixture/fixture-capability/fixture-capability-pan-tilt/fixture-capability-pan-tilt.component","ɵbo":"./lib/fixture/fixture-capability/fixture-capability-channel/fixture-capability-channel.component","ɵbp":"./lib/fixture/fixture-channel/fixture-channel.component","ɵbq":"./lib/fixture/fixture-capability/fixture-capability-color-wheel/fixture-capability-color-wheel.component","ɵbr":"./lib/user/user-login/user-login.component","ɵbs":"./lib/user/user-register/user-register.component","ɵbt":"./lib/project/project-browser/project-browser.component","ɵbu":"./lib/wait-dialog/wait-dialog.component","ɵbv":"./lib/project/project-import/project-import.component","ɵbw":"./lib/project/project-share/project-share.component","ɵbx":"./lib/error-dialog/error-dialog.component","ɵby":"./lib/fixture/fixture-settings/fixture-settings-stage/fixture-settings-stage.component","ɵbz":"./lib/intro/intro.component","ɵca":"./lib/preset/preset-settings/preset-settings.component","ɵcb":"./lib/scene/scene-settings/scene-settings.component","ɵcc":"./lib/project/project-save/project-save.component","ɵcd":"./lib/fixture-pool/fixture-pool-create-from-file/fixture-pool-create-from-file.component"},"importAs":"@rocketshow/designer"}