!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/router"),require("ng2-dragula"),require("rxjs"),require("@angular/material"),require("@angular/forms")):"function"==typeof define&&define.amd?define("@scopecom/scope-ui",["exports","@angular/core","@angular/common","@angular/router","ng2-dragula","rxjs","@angular/material","@angular/forms"],e):e(((t=t||self).scopecom=t.scopecom||{},t.scopecom["scope-ui"]={}),t.ng.core,t.ng.common,t.ng.router,t.ng2Dragula,t.rxjs,t.ng.material,t.ng.forms)}(this,(function(t,e,n,i,o,s,a,c){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation. All rights reserved.
    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
    this file except in compliance with the License. You may obtain a copy of the
    License at http://www.apache.org/licenses/LICENSE-2.0

    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
    MERCHANTABLITY OR NON-INFRINGEMENT.

    See the Apache Version 2.0 License for specific language governing permissions
    and limitations under the License.
    ***************************************************************************** */var l=function(t,e){return(l=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])})(t,e)};var r=function(){return(r=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};function p(t,e,n,i){var o,s=arguments.length,a=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,n,i);else for(var c=t.length-1;c>=0;c--)(o=t[c])&&(a=(s<3?o(a):s>3?o(e,n,a):o(e,n))||a);return s>3&&a&&Object.defineProperty(e,n,a),a}function u(t,e){return function(n,i){e(n,i,t)}}var d=function(){function t(){this.articleImport=new e.EventEmitter,this.articleEdit=new e.EventEmitter,this.articleRemove=new e.EventEmitter}return t.prototype.importArticle=function(t){this.articleImport.emit(t)},t.prototype.removeArticle=function(t){this.articleRemove.emit(t)},t.prototype.editArticle=function(t){this.articleEdit.emit(t)},p([e.Input()],t.prototype,"article",void 0),p([e.Output()],t.prototype,"articleImport",void 0),p([e.Output()],t.prototype,"articleEdit",void 0),p([e.Output()],t.prototype,"articleRemove",void 0),t=p([e.Component({selector:"scui-article",template:'\n    <article [ngClass]="{noImage: !article.photoUrl}" class="scui-article">\n      <article class="edit" *ngIf="article.mode === \'edit\'">\n        <span class="icon icon-cloud-forecast-2"></span>\n        <scui-article-image [url]="article.url" [photoUrl]="article.photoUrl"></scui-article-image>\n        <aside class="scui-article-content">\n          <scui-article-content [date]="article.date"\n                                [url]="article.url"\n                                [mode]="article.mode"\n                                [headline]="article.title"\n                                [source]="article.publisher"\n                                [comment]="article.comment">\n          </scui-article-content>\n          <footer class="scui-article-footer">\n            <div class="scui-article-footer__details">\n              <time *ngIf="article.date && article.date !== null">{{ article.date | date:\'d.M.yyyy\' }}</time>\n              <span *ngIf="article.date && article.date !== null"> - </span>\n              <span>{{ article.publisher }}</span>\n            </div>\n\x3c!--            <div class="pills-box">--\x3e\n\x3c!--              <span class="pill-info">--\x3e\n\x3c!--                <span class="value">2</span>--\x3e\n\x3c!--              </span>--\x3e\n\x3c!--            </div>--\x3e\n            <span class="article-action" (click)="editArticle(article)">\n              <span class="icon icon-pen-2"></span>\n            </span>\n\x3c!--            <span class="article-action-2" (click)="removeArticle(article)">--\x3e\n\x3c!--              <span class="icon icon-e-remove"></span>--\x3e\n\x3c!--            </span>--\x3e\n          </footer>\n        </aside>\n      </article>\n      <article class="imported" *ngIf="article.mode === \'imported\'">\n        <span class="icon icon-cloud-forecast-2"></span>\n        <scui-article-image [url]="article.url" [state]="article.mode" [photoUrl]="article.photoUrl"></scui-article-image>\n        <aside class="scui-article-content">\n          <scui-article-content [date]="article.date"\n                                [url]="article.url"\n                                [mode]="article.mode"\n                                [headline]="article.title"\n                                [source]="article.publisher"\n                                [comment]="article.comment">\n          </scui-article-content>\n          <footer class="scui-article-footer">\n          <div class="scui-article-footer__details">\n            <time *ngIf="article.date && article.date !== null">{{ article.date | date:\'d.M.yyyy\' }}</time>\n            <span *ngIf="article.date && article.date !== null"> - </span>\n            <span>{{ article.publisher }}</span>\n          </div>\n\x3c!--            <div class="pills-box">--\x3e\n\x3c!--              <span class="pill-info">--\x3e\n\x3c!--                <span class="value">2</span>--\x3e\n\x3c!--              </span>--\x3e\n\x3c!--            </div>--\x3e\n            <span class="article-action" (click)="removeArticle(article)">\n              <span class="icon icon-e-remove"></span>\n            </span>\n          </footer>\n        </aside>\n      </article>\n      <article class="default" *ngIf="article.mode === \'default\'">\n        <scui-article-image [url]="article.url" [state]="article.mode" [photoUrl]="article.photoUrl"></scui-article-image>\n        <aside class="scui-article-content">\n          <scui-article-content [date]="article.date"\n                                [url]="article.url"\n                                [mode]="article.mode"\n                                [headline]="article.title"\n                                [source]="article.publisher"\n                                [comment]="article.comment">\n          </scui-article-content>\n          <footer class="scui-article-footer">\n          <div class="scui-article-footer__details">\n            <time *ngIf="article.date && article.date !== null">{{ article.date | date:\'d.M.yyyy\' }}</time>\n            <span *ngIf="article.date && article.date !== null"> - </span>\n            <span>{{ article.publisher }}</span>\n          </div>\n            <span class="article-action" (click)="importArticle(article)">\n              <span class="icon icon-e-add"></span>\n            </span>\n          </footer>\n        </aside>\n      </article>\n    </article>\n  ',encapsulation:e.ViewEncapsulation.None})],t)}(),v=function(){function t(){this.label1="Sorry.",this.label2="No preview image available."}return t.prototype.ngOnInit=function(){},p([e.Input()],t.prototype,"label1",void 0),p([e.Input()],t.prototype,"label2",void 0),p([e.Input()],t.prototype,"photoUrl",void 0),p([e.Input()],t.prototype,"url",void 0),p([e.Input()],t.prototype,"state",void 0),p([e.Input()],t.prototype,"cssClass",void 0),t=p([e.Component({selector:"scui-article-image",template:'\n    <a class="scui-article-img {{state}}" [href]="url" target="_blank">\n      <div class="image-overlay"></div>\n      <div scuiImageCropper="bgImage" [photoUrl]="photoUrl" class="img">\n        <div class="article-no-image" *ngIf="!photoUrl">\n          <div class="article-no-image-content">\n            <div class="no-image-1">{{ label1 }}</div>\n            <div class="no-image-2">{{ label2 }}</div>\n          </div>\n        </div>\n      </div>\n    </a>\n  '})],t)}(),m=function(){function t(){this.source="Source",this.url="",this.headline="Headline",this.comment="Comment"}return t.prototype.ngOnInit=function(){this.headline.length>=93?(this.headlineOutput=this.headline.substring(0,93),this.headlineOutput=this.headlineOutput.substr(0,Math.min(this.headlineOutput.length,this.headlineOutput.lastIndexOf(" ")))+"..."):this.headlineOutput=this.headline,"string"==typeof this.comment?this.comment.length>=210?(this.commentOutput=this.comment.substring(0,210),this.commentOutput=this.commentOutput.substr(0,Math.min(this.commentOutput.length,this.commentOutput.lastIndexOf(" ")))+"..."):0===this.comment.length?this.commentOutput="(no comment)":this.commentOutput=this.comment:this.commentOutput="(no comment)"},p([e.Input()],t.prototype,"mode",void 0),p([e.Input()],t.prototype,"date",void 0),p([e.Input()],t.prototype,"source",void 0),p([e.Input()],t.prototype,"url",void 0),p([e.Input()],t.prototype,"headline",void 0),p([e.Input()],t.prototype,"comment",void 0),t=p([e.Component({selector:"scui-article-content",template:'\n    <div class="scui-article-content {{ mode }}">\n      <div class="scui-article-desc">\n        <h3><a [href]="url" target="_blank">{{headlineOutput}}</a></h3>\n        <div class="scui-article-desc__commentWrap" *ngIf="mode === \'edit\'">\n          <span class="scui-article-desc__commentLabel">COMMENT:</span>\n          <p class="scui-article-desc__comment">{{ commentOutput }}</p>\n        </div>\n      </div>\n    </div>\n  '})],t)}(),h=function(){function t(t,e){this.renderer=t,this.element=e,this.cloudImageUrl="https://ce850c98c.cloudimg.io",this.crop="392x205",this.overlay=this.renderer.createElement("div")}return Object.defineProperty(t.prototype,"setMode",{set:function(t){this.mode=t||"src"},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"setImageUrl",{set:function(t){this.imageUrl=this.cloudImageUrl+"/crop/"+this.crop+"/tjpg/"+t},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){"src"===this.mode?this.renderer.setAttribute(this.element.nativeElement,"src",this.imageUrl):this.renderer.setStyle(this.element.nativeElement,"backgroundImage","url("+this.imageUrl+")")},t.ctorParameters=function(){return[{type:e.Renderer2},{type:e.ElementRef}]},p([e.Input("scuiImageCropper")],t.prototype,"setMode",null),p([e.Input()],t.prototype,"crop",void 0),p([e.Input("photoUrl")],t.prototype,"setImageUrl",null),t=p([e.Directive({selector:"[scuiImageCropper]"})],t)}(),g=function(){function t(){}return t=p([e.NgModule({declarations:[h],imports:[n.CommonModule],exports:[h]})],t)}(),f=function(){function t(){}return t=p([e.NgModule({declarations:[d,v,m],imports:[n.CommonModule,g],exports:[d,v,m]})],t)}(),b=function(){function t(){this.icon="",this.name="",this.description="",this.url="",this.disabled=!1,this.active=!1}return t.prototype.ngOnInit=function(){},t.prototype.changeStyle=function(t){this.active="mouseover"===t.type},p([e.Input()],t.prototype,"icon",void 0),p([e.Input()],t.prototype,"name",void 0),p([e.Input()],t.prototype,"description",void 0),p([e.Input()],t.prototype,"url",void 0),p([e.Input()],t.prototype,"disabled",void 0),t=p([e.Component({selector:"scui-card",template:'\n    <a [ngClass]="{disabled:disabled}" [routerLink]="url">\n      <div [ngClass]="{active:active}"\n           (mouseover)="changeStyle($event)"\n           (mouseout)="changeStyle($event)"\n           scuiBgHover="#06f"\n           class="scui-card">\n        <div *ngIf="disabled" class="card-disabled">\n          Work in progress\n        </div>\n        <div class="content">\n          <div class="name">{{ name}}</div>\n          <div class="description">{{ description}}</div>\n          <span class="icon" [ngClass]="icon"></span>\n        </div>\n      </div>\n    </a>\n  '})],t)}(),y=function(){function t(t,e){this.renderer=t,this.hostElement=e,this.overlay=this.renderer.createElement("div")}return Object.defineProperty(t.prototype,"setBgColor",{set:function(t){this.bgColor=t||"#3A00F8"},enumerable:!0,configurable:!0}),t.prototype.hoverMe=function(){this.renderer.setStyle(this.overlay,"width","100%")},t.prototype.leaveMe=function(){this.renderer.setStyle(this.overlay,"width","0")},t.prototype.ngOnInit=function(){this.renderer.setStyle(this.hostElement.nativeElement,"position","relative"),this.renderer.setAttribute(this.overlay,"class","scui-overlay"),this.renderer.setStyle(this.overlay,"width","0"),this.renderer.setStyle(this.overlay,"background-color",this.bgColor),this.renderer.appendChild(this.hostElement.nativeElement,this.overlay)},t.ctorParameters=function(){return[{type:e.Renderer2},{type:e.ElementRef}]},p([e.Input("scuiBgHover")],t.prototype,"setBgColor",null),p([e.HostListener("mouseover")],t.prototype,"hoverMe",null),p([e.HostListener("mouseleave")],t.prototype,"leaveMe",null),t=p([e.Directive({selector:"[scuiBgHover]"})],t)}(),I=function(){function t(){}return t=p([e.NgModule({declarations:[y],imports:[n.CommonModule],exports:[y]})],t)}(),C=function(){function t(){}return t=p([e.NgModule({declarations:[b],exports:[b],imports:[n.CommonModule,I,i.RouterModule]})],t)}(),x=function(){function t(t){this.renderer=t,this.collapse=!1,this.drawerPosition="left"}return t.prototype.ngOnChanges=function(t){this.drawerState=t.drawerOpen.currentValue},t.prototype.toggleDrawer=function(){this.drawerState=!this.drawerState,this.drawerState?this.renderer.addClass(document.body,"scui-drower-open"):this.renderer.removeClass(document.body,"scui-drower-open")},t.ctorParameters=function(){return[{type:e.Renderer2}]},p([e.Input()],t.prototype,"collapse",void 0),p([e.Input()],t.prototype,"drawerOpen",void 0),p([e.Input()],t.prototype,"drawerPosition",void 0),p([e.Input()],t.prototype,"cssClass",void 0),t=p([e.Component({selector:"scui-drawer",template:'\n    <aside class="scui-drawer {{cssClass}} drawer-pos-{{drawerPosition}}" [ngClass]="{\'collapsed\': !drawerState}">\n      <div class="drawer-inner" *ngIf="drawerState">\n        <ng-content></ng-content>\n      </div>\n      <div class="drawer-collapse" *ngIf="collapse" (click)="toggleDrawer()"></div>\n    </aside>\n  ',encapsulation:e.ViewEncapsulation.None,styles:["\n      width: 420px;\n      display: block;\n    "]})],t)}(),O=function(){function t(t){this.dndService=t,this.sortable=null,this.onItemSelect=new e.EventEmitter,this.onItemEdit=new e.EventEmitter,this.onItemDelete=new e.EventEmitter,this.onItemReorder=new e.EventEmitter,this.dragInProgress=!1}return t.prototype.ngOnInit=function(){var t=this;this.sortable&&(this.subs=new s.Subscription,this.subs.add(this.dndService.dropModel(this.sortable).subscribe((function(e){var n=e.targetModel;t.onItemReorder.emit(n)}))),this.subs.add(this.dndService.drag(this.sortable).subscribe((function(){t.dragInProgress=!0}))),this.subs.add(this.dndService.drop(this.sortable).subscribe((function(){t.dragInProgress=!1}))),this.dndService.createGroup(this.sortable.toString(),{moves:function(t,e,n){return n.classList.contains("handle")}}))},t.prototype.ngOnDestroy=function(){this.sortable&&(this.dndService.destroy(this.sortable.toString()),this.subs.unsubscribe())},t.prototype.selectItem=function(t){this.onItemSelect.emit(t)},t.prototype.deleteItem=function(t,e){e.stopPropagation(),this.onItemDelete.emit(t)},t.prototype.editItem=function(t,e){e.stopPropagation(),this.onItemEdit.emit(t)},t.ctorParameters=function(){return[{type:o.DragulaService}]},p([e.Input()],t.prototype,"subMenuItems",void 0),p([e.Input()],t.prototype,"title",void 0),p([e.Input()],t.prototype,"link",void 0),p([e.Input()],t.prototype,"sortable",void 0),p([e.Input()],t.prototype,"activeItemId",void 0),p([e.Output()],t.prototype,"onItemSelect",void 0),p([e.Output()],t.prototype,"onItemEdit",void 0),p([e.Output()],t.prototype,"onItemDelete",void 0),p([e.Output()],t.prototype,"onItemReorder",void 0),p([e.Output()],t.prototype,"numberOfProjects",void 0),t=p([e.Component({selector:"scui-drawer-nav",template:'\n    <nav class="submenu-nav">\n      <h2 class="submenu-nav-title">{{ title }}\n        <span *ngIf="title === \'Projects\' else projectCount">{{subMenuItems.length - 1}}</span>\n        <ng-template #projectCount>{{subMenuItems.length}}</ng-template>\n        <a *ngIf="link" routerLink="{{link}}" class="icon icon-e-add"></a>\n      </h2>\n      <ul class="submenu-nav-items">\n        <div *ngIf="sortable; else itemsTpl" [dragula]="sortable" [dragulaModel]="subMenuItems">\n          <ng-container *ngTemplateOutlet="itemsTpl"></ng-container>\n        </div>\n      </ul>\n    </nav>\n    <ng-template #itemsTpl>\n      <li (click)="selectItem(item)"\n          [ngClass]="{\'active\': item.active || (item.id === activeItemId)}"\n          *ngFor="let item of subMenuItems"\n          class="submenu-nav-item handle">\n        <div class="list-item">\n          <span *ngIf="sortable" class="icon icon1 icon-zoom-99"></span>\n          <span class="icon icon1 icon-app-store"></span>\n          <a [routerLink]="item.routerLink" class="submenu-nav-label">{{item.name || item.title}}</a>\n          <span class="submenu-nav-actions">\n            <button *ngIf="sortable === \'saved-searches\'" class="btn-edit" (click)="editItem(item, $event)">Edit</button>\n          </span>\n        </div>\n      </li>\n    </ng-template>\n  ',encapsulation:e.ViewEncapsulation.None})],t)}(),w=function(){function t(){}return t=p([e.NgModule({declarations:[x,O],imports:[n.CommonModule,i.RouterModule,o.DragulaModule],exports:[x,O]})],t)}(),E=function(){function t(){this.onSelectedOption=new e.EventEmitter}return t.prototype.ngOnInit=function(){this.selectedOption=this.selectedOption||this.options[0]},t.prototype.toggle=function(){this.isOpen=!this.isOpen},t.prototype.onBlurMethod=function(){this.isOpen=!1},t.prototype.selectOption=function(t){this.selectedOption=t,this.onSelectedOption.emit(this.selectedOption)},p([e.Input()],t.prototype,"options",void 0),p([e.Input()],t.prototype,"selectedOption",void 0),p([e.Input()],t.prototype,"disclaimerText",void 0),p([e.Output()],t.prototype,"onSelectedOption",void 0),t=p([e.Component({selector:"scui-dropdown",template:'\n    <div [ngClass]="{\'dropdown-expanded\': isOpen}" (blur)="onBlurMethod()" tabindex="0" class="scui-dropdown">\n      <div (click)="toggle()" class="main">{{ selectedOption.label }}\n        <span *ngIf="!isOpen" class="icon icon-small-down"></span>\n        <span *ngIf="isOpen" class="icon icon-small-up"></span>\n      </div>\n      <div *ngIf="isOpen" class="options">\n        <div (click)="toggle(); selectOption(option);"\n             class="option"\n             *ngFor="let option of options">\n          <span>{{ option.label }}</span>\n        </div>\n        <div class="disclaimerText" *ngIf="disclaimerText" innerHtml="{{ disclaimerText }}"></div>\n      </div>\n    </div>'})],t)}(),S=function(){function t(){}return t=p([e.NgModule({declarations:[E],imports:[n.CommonModule],exports:[E]})],t)}(),M=function(){function t(){this.activeClass="active-nav"}return t.prototype.ngOnInit=function(){},p([e.Input()],t.prototype,"menuItems",void 0),p([e.Input()],t.prototype,"logo",void 0),p([e.Input()],t.prototype,"footer",void 0),p([e.Input()],t.prototype,"activeClass",void 0),t=p([e.Component({selector:"scui-nav",template:'\n    <aside class="scui-nav">\n      <header class="nav-header" *ngIf="logo">\n        <a [routerLink]="[logo.route]"\n           scuiBgHover="#004FE5"\n           class="nav-item"\n           [routerLinkActive]="activeClass"\n           [ngClass]="logo.cssClass">\n          <span class="icon" [ngClass]="logo.iconClass"></span>\n        </a>\n      </header>\n      <nav class="nav-items">\n        <a class="nav-item"\n           *ngFor="let menuItem of menuItems"\n           scuiBgHover="#004FE5"\n           [routerLink]="[menuItem.route]"\n           [routerLinkActive]="activeClass">\n          <span class="icon" [ngClass]="menuItem.iconClass"></span>\n        </a>\n      </nav>\n      <footer class="nav-footer" *ngIf="footer">\n        <a class="nav-item"\n           scuiBgHover="#004FE5"\n           href="https://www.thescope.com/support"\n           target="_blank">\n          <span class="icon icon-help-circle"></span>\n        </a>\n        <a class="nav-item"\n           scuiBgHover="#004FE5"\n           *ngFor="let menuItem of footer"\n           [routerLink]="[menuItem.route]"\n           [routerLinkActive]="activeClass">\n          <span class="icon" [ngClass]="menuItem.iconClass"></span>\n        </a>\n      </footer>\n    </aside>\n  ',encapsulation:e.ViewEncapsulation.None})],t)}(),k=function(){function t(){}return t=p([e.NgModule({declarations:[M],imports:[n.CommonModule,i.RouterModule,I],exports:[M]})],t)}(),T=function(){function t(){}return t.prototype.ngOnInit=function(){},p([e.Input()],t.prototype,"label",void 0),p([e.Input()],t.prototype,"cssClass",void 0),t=p([e.Component({selector:"scui-pill",template:'\n    <br>\n    <span class="pill {{cssClass}}">{{ label }}</span>\n  '})],t)}(),P=function(){function t(){}return t=p([e.NgModule({declarations:[T],imports:[n.CommonModule],exports:[T]})],t)}(),L=function(){function t(){this.offsetLeft=0,this.offsetWidth=0,this.activeTabIndex=0,this.tabSelect=new e.EventEmitter}return t.prototype.ngOnChanges=function(t){t&&t.activeTabIndex&&!t.activeTabIndex.firstChange&&this.setActiveTab(t.activeTabIndex.currentValue,this.tabItems.toArray()[t.activeTabIndex.currentValue].nativeElement,this.tabContainer.nativeElement)},t.prototype.ngAfterViewInit=function(){var t=this;setTimeout((function(){t.setActiveTab(t.activeTabIndex,t.tabItems.toArray()[t.activeTabIndex].nativeElement,t.tabContainer.nativeElement)}))},t.prototype.setActiveTab=function(t,e,n){this.activeTabIndex=t,e&&(this.offsetLeft=n?e.offsetLeft-n.offsetLeft:0,this.offsetWidth=e.offsetWidth),this.tabSelect.emit({index:t,tab:this.tabs[t]})},p([e.ViewChildren("tabItem")],t.prototype,"tabItems",void 0),p([e.ViewChild("tabContainer",{static:!0})],t.prototype,"tabContainer",void 0),p([e.Input()],t.prototype,"tabs",void 0),p([e.Input()],t.prototype,"activeTabIndex",void 0),p([e.Input()],t.prototype,"cssClass",void 0),p([e.Output()],t.prototype,"tabSelect",void 0),t=p([e.Component({selector:"scui-tabs",template:'\n    <section class="scui-tabs {{ cssClass }}">\n      <div class="tabs" #tabContainer>\n        <div *ngFor="let tab of tabs, let i = index"\n             [ngClass]="{\'active-tab\': i === activeTabIndex, disabled:tab.disabled}"\n             (click)="setActiveTab(i, tabItem, tabContainer)"\n             #tabItem\n             class="tab">{{tab.title}}\n        </div>\n        <div class="border-wrap">\n          <div [ngStyle]="{left: (offsetLeft || 0) + \'px\', width: (offsetWidth) + \'px\' }"\n               class="border-top">\n          </div>\n        </div>\n      </div>\n    </section>\n  ',encapsulation:e.ViewEncapsulation.None})],t)}(),A=function(){function t(){}return t=p([e.NgModule({declarations:[L],imports:[n.CommonModule],exports:[L]})],t)}(),U=function(){function t(){this.activeClass="active-nav",this.activeStep=0,this.onStepSelect=new e.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.goBack=function(){this.activeStep>0&&this.activeStep--},t.prototype.setStep=function(t){this.activeStep=t,this.onStepSelect.emit(this.activeStep)},p([e.Input()],t.prototype,"navItems",void 0),p([e.Input()],t.prototype,"activeClass",void 0),p([e.Input()],t.prototype,"activeStep",void 0),p([e.Output()],t.prototype,"onStepSelect",void 0),t=p([e.Component({selector:"scui-wizard-nav",template:'\n    <header class="scui-wizard-nav">\n      <nav class="scui-wizard-back">\n        <a (click)="goBack()">\n          <span class="icon icon-arrow-left"></span>\n          <span class="label">Austeller Update</span>\n        </a>\n      </nav>\n      <nav class="scui-wizard">\n        <ng-container *ngFor="let navItem of navItems; let i = index">\n          <a class="scui-wizard-nav-item"\n             (click)="setStep(i)"\n             [ngClass]="{\'active-step\': activeStep >= i,activeClass: i === activeStep}"\n          >\n            <div class="scui-wizard-nav-icon"></div>\n            <div class="scui-wizard-nav-text">{{navItem.name}}</div>\n          </a>\n          <span [ngClass]="{\'active-step\': activeStep > i}" class="scui-wizard-nav-delimiter" *ngIf="i < (navItems.length - 1)"></span>\n        </ng-container>\n      </nav>\n    </header>\n  '})],t)}(),j=function(){function t(){}return t=p([e.NgModule({declarations:[U],imports:[n.CommonModule],exports:[U]})],t)}(),D=function(){function t(){this.cssClass="btn-large-default",this.onBtnClick=new e.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.btnClick=function(){this.onBtnClick.emit()},p([e.Input()],t.prototype,"label",void 0),p([e.Input()],t.prototype,"disabled",void 0),p([e.Input()],t.prototype,"cssClass",void 0),p([e.Output()],t.prototype,"onBtnClick",void 0),t=p([e.Component({selector:"scui-large-button",template:'\n    <button (click)="btnClick()" [ngClass]="{\'btn-large-disabled\': disabled}" class="scui-button {{cssClass}}" [disabled]="disabled">\n      <span class="btn-label">{{label}}</span>\n    </button>\n  '})],t)}(),N=function(){function t(){this.icon="icon-arrow-right",this.cssClass="btn-large-icon-blue",this.onBtnClick=new e.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.btnClick=function(){this.onBtnClick.emit()},p([e.Input()],t.prototype,"label",void 0),p([e.Input()],t.prototype,"disabled",void 0),p([e.Input()],t.prototype,"icon",void 0),p([e.Input()],t.prototype,"cssClass",void 0),p([e.Output()],t.prototype,"onBtnClick",void 0),t=p([e.Component({selector:"scui-large-button-icon",template:'\n    <button (click)="btnClick()" [ngClass]="{\'btn-large-icon-disabled\': disabled}" class="scui-button-icon {{cssClass}}" [disabled]="disabled">\n      <div class="btn-wrap">\n        <div>\n          <span class="icon {{ icon }}"></span>\n        </div>\n        <div class="btn-label">{{label}}</div>\n      </div>\n    </button>\n  '})],t)}(),R=function(){function t(){this.cssClass="btn-large-default",this.onBtnClick=new e.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.btnClick=function(){this.onBtnClick.emit()},p([e.Input()],t.prototype,"label",void 0),p([e.Input()],t.prototype,"disabled",void 0),p([e.Input()],t.prototype,"cssClass",void 0),p([e.Output()],t.prototype,"onBtnClick",void 0),t=p([e.Component({selector:"scui-small-button",template:'\n    <button (click)="btnClick()" [ngClass]="{\'btn-large-disabled\': disabled}" class="scui-button small {{cssClass}}" [disabled]="disabled">\n      <span class="btn-label">{{label}}</span>\n    </button>\n  '})],t)}(),_=function(){function t(){this.icon="icon-arrow-right",this.cssClass="btn-large-icon-blue",this.onBtnClick=new e.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.btnClick=function(){this.onBtnClick.emit()},p([e.Input()],t.prototype,"label",void 0),p([e.Input()],t.prototype,"disabled",void 0),p([e.Input()],t.prototype,"icon",void 0),p([e.Input()],t.prototype,"cssClass",void 0),p([e.Output()],t.prototype,"onBtnClick",void 0),t=p([e.Component({selector:"scui-small-button-icon",template:'\n    <button (click)="btnClick()" [ngClass]="{\'btn-large-icon-disabled\': disabled}" class="scui-button-icon small {{cssClass}}" [disabled]="disabled">\n      <div class="btn-wrap">\n        <div>\n          <span class="icon {{ icon }}"></span>\n        </div>\n        <div class="btn-label">{{label}}</div>\n      </div>\n    </button>\n  '})],t)}(),B=function(){function t(){}return t=p([e.NgModule({declarations:[D,N,R,_],imports:[n.CommonModule],exports:[D,N,R,_]})],t)}(),F=function(){function t(){this.fileSelect=new e.EventEmitter,this.fileUpdate=new e.EventEmitter,this.outputChannelsTotal=0,this.statusPublished="PUBLISHED",this.statusScheduled="SCHEDULED",this.statusUnused="UNUSED",this.channelsConfig={TWITTER:{name:"Twitter",icon:"icon-twitter"},WORDPRESS:{name:"Wordpress",icon:"icon-wordpress"},MAILCHIMP:{name:"Mailchimp",icon:"icon-mc-freddie-dark"},FACEBOOK_PAGE:{name:"Facebook (Page)",icon:"icon-facebook-f"},LINKEDIN_PAGE:{name:"LinkedIn (Page)",icon:"icon-linkedin-in"},LINKEDIN_PROFILE:{name:"LinkedIn (Profile)",icon:"icon-linkedin-in"},GOOGLE_DOC:{name:"Google Docs",icon:"icon-google-drive"},SALES_FORCE:{name:"Salesforce",icon:"icon-salesforce-icon"},PARDOT:{name:"Salesforce Pardot",icon:"icon-salesforce-icon"},SCOPE_TO_EMAIL:{name:"Scope To Email",icon:"icon-mail-block"},HUBSPOT:{name:"Hubspot",icon:"icon-HubSpot"}}}return t.prototype.ngOnInit=function(){var t=this;if(this.outputChannels){var e=this.outputChannels.filter((function(e){return e.status===t.statusPublished||e.status===t.statusScheduled}));e&&e.length&&(this.outputChannelsTotal=e.length)}},t.prototype.toggleOverlay=function(){this.overlayActive=!this.overlayActive},t.prototype.selectFile=function(){this.fileSelect.emit(this.file)},t.prototype.archiveFile=function(){this.fileUpdate.emit(r({},this.file,{status:"ARCHIVED"===this.file.status?"ACTIVE":"ARCHIVED"}))},p([e.Input()],t.prototype,"author",void 0),p([e.Input()],t.prototype,"file",void 0),p([e.Input()],t.prototype,"outputChannels",void 0),p([e.Output()],t.prototype,"fileSelect",void 0),p([e.Output()],t.prototype,"fileUpdate",void 0),t=p([e.Component({selector:"scui-file",template:'\n    <article [ngClass]="{overlayActive: overlayActive}" class="scui-article-status">\n      <div class="icons-wrap">\n        <span class="item" *ngFor="let itm of outputChannels">\n          <span class="icon-wrap {{ itm.type }}"\n                matTooltip="\n                  {{channelsConfig[itm.type].name}}\n                  {{(itm.status === statusPublished && \' has been published\') || (itm.status === statusScheduled && \' is scheduled.\') || (itm.status === statusUnused && \' has not been used yet\')}}"\n                [ngClass]="{scheduled:itm.status === statusScheduled, published:itm.status === statusPublished,\n                defaultState: itm.status !== statusPublished && itm.status !== statusScheduled}">\n            <span class="icon {{ channelsConfig[itm.type].icon }}"></span>\n            <span *ngIf="itm.status === statusPublished || itm.status === statusScheduled" class="dot"></span>\n          </span>\n        </span>\n      </div>\n      <div class="info-wrap">\n        <div class="info-top">\n          <div (click)="selectFile()" class="info-author">{{ author }}</div>\n          <div (click)="selectFile()" class="info-title">{{ file?.title }}</div>\n        </div>\n        <div class="info-bottom">\n          <span (click)="toggleOverlay()" class="counter">\n            <span>{{ outputChannelsTotal }}</span>\n          </span>\n          <span>\n            <span [matMenuTriggerFor]="menu" class="icon icon-menu-ham-horz menu-trigger"></span>\n                  <mat-menu class="output-actions" #menu="matMenu">\n                    <div class="output-action" (click)="selectFile()" mat-menu-item>\n                      <span class="icon {{ file?.status === \'ARCHIVED\' ? \'icon-preview\' : \'icon-pen-2\' }}"></span>\n                      <span class="output-action-label"> {{ file?.status === \'ARCHIVED\' ? \'View\' : \'Edit\' }}</span>\n                    </div>\n                    <div class="output-action" *ngIf="!file?.hasScheduledPublications; else scheduledPublication" (click)="archiveFile()" mat-menu-item>\n                      <span class="icon icon-box"></span>\n                      <span class="output-action-label"> {{ file?.status === \'ARCHIVED\' ? \'Un-Archive\' : \'Archive\' }}</span>\n                    </div>\n                    <ng-template #scheduledPublication>\n                      <div class="output-action disabled">\n                        <span class="icon icon-box"></span>\n                        <span class="output-action-label"> Archive</span>\n                      </div>\n                    </ng-template>\n                    \x3c!--                    <div class="output-action" mat-menu-item>--\x3e\n                    \x3c!--                      <span class="icon icon-preview"></span>--\x3e\n                    \x3c!--                      <span class="output-action-label"> View</span>--\x3e\n                    \x3c!--                    </div>--\x3e\n                    \x3c!--                    <div class="output-action" mat-menu-item>--\x3e\n                    \x3c!--                      <span class="icon icon-send"></span>--\x3e\n                    \x3c!--                      <span class="output-action-label"> Publish</span>--\x3e\n                    \x3c!--                    </div>--\x3e\n                    \x3c!--                    <div class="output-action output-action-last" mat-menu-item>--\x3e\n                    \x3c!--                      <span class="icon icon-bin"></span>--\x3e\n                    \x3c!--                      <span class="output-action-label"> Delete</span>--\x3e\n                    \x3c!--                    </div>--\x3e\n                  </mat-menu>\n          </span>\n        </div>\n      </div>\n      <div class="published-overlay">\n        <div class="published-files-header">\n          <span class="files">Publications</span>\n          <span (click)="toggleOverlay()" class="icon icon-e-remove"></span>\n        </div>\n        <div class="published-files-content">\n          <div *ngIf="outputChannelsTotal > 0; else noResults;">\n            <div *ngFor="let item of outputChannels">\n              <div class="scheduled-item" *ngIf="item.status === statusScheduled">\n                <span class="scheduled-item-wrap">\n                  <span class="icon {{ channelsConfig[item.type].icon }}"></span>\n                </span>\n                <span class="date-published">{{ item.publicationDate | date: \'dd. MM. yyyy. HH:mm\' }}</span>\n                <span class="settings">\n                  <span class="icon icon-settings-gear"></span>\n                  <span class="icon icon-bin"></span>\n                </span>\n              </div>\n              <div class="published-item" *ngIf="item.status === statusPublished">\n                <span class="icon {{ channelsConfig[item.type].icon }}"></span>\n                <span class="date-published">{{ item.publicationDate | date: \'dd. MM. yyyy. HH:mm\' }}</span>\n              </div>\n            </div>\n          </div>\n          <ng-template #noResults>This publication has not been published on any channel.</ng-template>\n        </div>\n      </div>\n    </article>\n  '})],t)}(),V=function(){function t(){}return t=p([e.NgModule({declarations:[F],imports:[n.CommonModule,a.MatMenuModule,a.MatTooltipModule],exports:[F]})],t)}(),H=function(){function t(){}return t.prototype.ngOnInit=function(){},p([e.Input()],t.prototype,"article",void 0),t=p([e.Component({selector:"scui-editor-article",template:'\n    <div class="scui-editor-article" [ngClass]="{\'linked\': article.linked}">\n      <div class="editor-article-image-wrap">\n        <div class="editor-article-move">\n          <span class="hover-icon icon-zoom-99"></span></div>\n        <div class="editor-article-overlay"></div>\n        <div scuiImageCropper="bgImage" [photoUrl]="article.photoUrl" class="editor-article-img">\n        </div>\n        <span class="icon icon-cloud-forecast-2" *ngIf="!article.linked;"></span>\n        <span class="icon icon-scope-square-neg" *ngIf="article.linked;"></span>\n        <div class="editor-article-date">{{ article.date | date:\'dd.LL.yyyy\' }}</div>\n        <div class="editor-article-title">{{ article.publisher }}</div>\n      </div>\n      <div class="editor-article-content-wrap">\n        <div class="editor-article-content">\n          <div class="editor-article-content-title">{{ article.title }}</div>\n          <div class="editor-article-content-comment" *ngIf="article.comment; else noComment">{{ article.comment }}</div>\n          <ng-template #noComment>(no comment)</ng-template>\n        </div>\n      </div>\n    </div>\n  '})],t)}(),$=function(){function t(){this.removeArticle=new e.EventEmitter,this.updateArticle=new e.EventEmitter}return t.prototype.articleUpdate=function(t,e){var n;this.article=r({},this.article,((n={})[e]=t,n)),this.updateArticle.emit(this.article)},t.prototype.setActiveElement=function(t){this.activeContenteditable=t},t.prototype.handleMousedown=function(){try{this.activeContenteditable.blur()}catch(t){}},p([e.Input()],t.prototype,"article",void 0),p([e.Output()],t.prototype,"removeArticle",void 0),p([e.Output()],t.prototype,"updateArticle",void 0),t=p([e.Component({selector:"scui-editor-article-box",template:'\n    <div class="scui-editor-article-box" (mousedown)="handleMousedown()">\n      <div class="remove-article" (click)="removeArticle.emit()">\n        <span class="icon icon-i-remove"></span>\n      </div>\n      <div scuiImageCropper="bgImage" [photoUrl]="article.articleImageUrl" class="editor-article-img">\n        <div class="editor-article-move">\n          <span class="hover-icon icon-zoom-99"></span></div>\n      </div>\n      <div class="scui-editor-article-box-meta">\n      <div class="box-info">\n          <strong class="scui-editor-article-box-title">Title</strong>\n          <span class="scui-editor-article-box-content" #title scuiClipboard (keydown)="setActiveElement(title)" (blur)="articleUpdate($event.target?.innerText, \'articleTitle\')" contenteditable="true">{{article.articleTitle}}</span>\n        </div>\n        <div class="box-info">\n          <strong class="scui-editor-article-box-title">Publisher</strong>\n          <span class="scui-editor-article-box-content" #source scuiClipboard (keydown)="setActiveElement(source)" (blur)="articleUpdate($event.target?.innerText, \'articleSource\')" contenteditable="true">{{article.articleSource}}</span>\n        </div>\n        <div class="box-info">\n          <strong class="scui-editor-article-box-title">Comment</strong>\n          <span class="scui-editor-article-box-content" #comment scuiClipboard (keydown)="setActiveElement(comment)" (blur)="articleUpdate($event.target?.innerText, \'articleComment\')" contenteditable="true" *ngIf="article.articleComment; else noComment">{{article.articleComment}}</span>\n          <ng-template #noComment><span class="scui-editor-article-box-content" #comment2 (keydown)="setActiveElement(comment2)" (blur)="articleUpdate($event.target?.innerText, \'articleComment\')" contenteditable="true">(no comment)</span></ng-template>\n        </div>\n      </div>\n    </div>\n  '})],t)}(),z=function(){function t(){this.insertEvt=new e.EventEmitter}return t.prototype.ngOnInit=function(){},p([e.Input()],t.prototype,"element",void 0),p([e.Input()],t.prototype,"elementMeta",void 0),p([e.Output()],t.prototype,"insertEvt",void 0),t=p([e.Component({selector:"scui-editor-element",template:'\n    <div class="scui-editor-element">\n      <div class="handle"></div>\n      <div class="insert-el i-top" (click)="$event.preventDefault(); insertEvt.emit(\'top\')" role="button">\n        <span class="icon-list-first"></span>\n      </div>\n      <div class="insert-el i-bot" (click)="$event.preventDefault(); insertEvt.emit(\'bottom\')" role="button">\n        <span class="icon-list-last"></span>\n      </div>\n      <div class="scui-editor-element-icon">\n        <span class="icon" [ngClass]="elementMeta?.iconClass"></span>\n      </div>\n      <div class="scui-editor-element-label">\n        {{ elementMeta?.label }}\n      </div>\n    </div>\n  '})],t)}(),W=function(){function t(){}return t.prototype.onPaste=function(t){t.preventDefault();var e=(t.originalEvent||t).clipboardData.getData("text/plain");document.execCommand("insertHTML",!1,e)},p([e.HostListener("paste",["$event"])],t.prototype,"onPaste",null),t=p([e.Directive({selector:"[scuiClipboard]"})],t)}(),q=function(){function t(){}return t=p([e.NgModule({declarations:[W],imports:[n.CommonModule],exports:[W]})],t)}(),G=function(){function t(){}return t=p([e.NgModule({declarations:[H,$,z],imports:[n.CommonModule,g,q],exports:[H,$,z]})],t)}(),K=function(){function t(){}return t.prototype.ngOnInit=function(){},p([e.Input()],t.prototype,"title",void 0),t=p([e.Component({selector:"scui-no-results",template:'\n  <div class="scui-no-results">\n    <div class="projects-content-header">\n      <h2 class="content-header-title">{{title}}</h2>\n    </div>\n    <div class="projects-content-wrap">\n      <ng-content></ng-content>\n    </div>\n  </div>\n  ',encapsulation:e.ViewEncapsulation.None})],t)}(),J=function(){function t(){}return t=p([e.NgModule({declarations:[K],imports:[n.CommonModule,i.RouterModule],exports:[K]})],t)}(),Q=function(){function t(){}return t.prototype.ngOnInit=function(){},p([e.Input()],t.prototype,"title",void 0),t=p([e.Component({selector:"scui-image",template:'\n  <div class="scui-image">\n    <img src="https://ce850c98c.cloudimg.io/crop/392x205/tjpg/https://bargainbriana.com/wp-content/uploads/320x480_1.jpg" />\n  </div>\n  ',encapsulation:e.ViewEncapsulation.None})],t)}(),X=function(){function t(){}return t=p([e.NgModule({declarations:[Q],imports:[n.CommonModule,i.RouterModule],exports:[Q]})],t)}(),Y=function(){function t(){}return t.prototype.ngOnInit=function(){},p([e.Input()],t.prototype,"title",void 0),t=p([e.Component({selector:"scui-image-box",template:'\n  <div class="scui-image-box">\n    <div class="scui-image-box--image">\n      <img src="https://ce850c98c.cloudimg.io/crop/392x205/tjpg/https://bargainbriana.com/wp-content/uploads/320x480_1.jpg" />\n    </div>\n    <div class="scui-image-box--container">\n      <h3 class="scui-image-box--title">article title</h3>\n      <div class="scui-image-box--content">\n        article content\n      </div>\n    </div>\n  </div>\n  ',encapsulation:e.ViewEncapsulation.None})],t)}(),Z=function(){function t(){}return t=p([e.NgModule({declarations:[Y],imports:[n.CommonModule,i.RouterModule],exports:[Y]})],t)}(),tt=function(){function t(t){this.control=t,this.inputType="text",this.placeholder="",this.valueChange=new e.EventEmitter,this.propagateChange=function(t){},this.propagateChangeTouched=function(t){},null!=this.control&&(this.control.valueAccessor=this)}return t.prototype.writeValue=function(t){this.value=t},t.prototype.registerOnChange=function(t){this.propagateChange=t},t.prototype.registerOnTouched=function(t){this.propagateChangeTouched=t},t.prototype.save=function(t){this.value=t.target.value,this.propagateChange(this.value)},t.prototype.onTouched=function(t){this.value=t.target.value,this.propagateChangeTouched(this.value)},t.ctorParameters=function(){return[{type:c.NgControl,decorators:[{type:e.Self},{type:e.Optional}]}]},p([e.Input()],t.prototype,"inputType",void 0),p([e.Input()],t.prototype,"isInvalid",void 0),p([e.Input()],t.prototype,"styleClass",void 0),p([e.Input()],t.prototype,"placeholder",void 0),p([e.Input()],t.prototype,"maxLength",void 0),p([e.Input()],t.prototype,"label",void 0),p([e.Output()],t.prototype,"valueChange",void 0),t=p([e.Component({selector:"scui-input",template:'\n    <div class="scui-input scui-error {{styleClass}} {{inputState}}"\n         [ngClass]="{\'scui-error\': !control?.pristine && (control?.errors != null) || isInvalid}">\n      <div>\n        <div class="scui-input-label" *ngIf="label">\n          {{label}}\n        </div>\n        <input [type]="inputType"\n               [placeholder]="placeholder"\n               (input)="save($event)"\n               (focus)="inputState = \'scui-focus\'"\n               (blur)="inputState = \'\'; onTouched($event)"\n               [value]="value"\n               class="scui-input-field">\n        <div *ngIf="maxLength &&!control?.errors?.maxlength && inputType !== \'password\'" class="scui-input-counter">\n          <div>Max {{maxLength}} chars</div>\n          <div>{{value?.length || 0 }}/{{maxLength}}</div>\n        </div>\n      </div>\n      <div class="scui-input-messages">\n        <div *ngIf="control?.errors?.maxlength || isInvalid">This is the error message</div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  '}),u(0,e.Self()),u(0,e.Optional())],t)}(),et=function(t){function n(e){var n=t.call(this,e)||this;return n.control=e,n}return function(t,e){function n(){this.constructor=t}l(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}(n,t),n.ctorParameters=function(){return[{type:c.NgControl,decorators:[{type:e.Self},{type:e.Optional}]}]},p([e.Input()],n.prototype,"disabled",void 0),p([e.Input()],n.prototype,"styleClass",void 0),n=p([e.Component({selector:"scui-textarea",template:'\n    <div class="scui-textarea {{styleClass}}"\n         [ngClass]="{\'error\': !control.pristine && (control?.errors != null),disabled:disabled}">\n      <div class="scui-input-label">\n        {{label}}\n      </div>\n      <div class="textarea-field-wrap">\n              <textarea\n                [disabled]="disabled"\n                (input)="save($event)"\n                (blur)="onTouched($event)"\n                [value]="value"\n                class="textarea-field"></textarea>\n      </div>\n      <div *ngIf="maxLength &&!control?.errors?.maxlength && !disabled" class="scui-input-counter">\n        <div>Max {{maxLength}} chars</div>\n        <div>{{value?.length || 0 }} / {{maxLength}}</div>\n      </div>\n      <div class="textarea-error" *ngIf="control?.errors?.maxlength && !disabled">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  '}),u(0,e.Self()),u(0,e.Optional())],n)}(tt),nt=function(){function t(){this.cssClass="form-default",this.label="Project Info",this.iconClass="icon-c-info"}return t.prototype.ngOnInit=function(){},p([e.Input()],t.prototype,"cssClass",void 0),p([e.Input()],t.prototype,"label",void 0),p([e.Input()],t.prototype,"iconClass",void 0),t=p([e.Component({selector:"scui-form-container",template:'\n    <div class="form-container {{cssClass}}">\n      <div class="form-container-menu">\n        <div>\n          <span class="icon" [ngClass]="iconClass"></span>\n          <span class="info">{{ label }}</span>\n        </div>\n      </div>\n      <div class="form-container-content">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  '})],t)}(),it=function(){function t(){this.disabled=!0,this.onToggleCheckbox=new e.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.toggleCheckbox=function(){this.checked=!this.checked,this.onToggleCheckbox.emit({checked:this.checked,value:this.value})},p([e.Input()],t.prototype,"label",void 0),p([e.Input()],t.prototype,"groupLabel",void 0),p([e.Input()],t.prototype,"checked",void 0),p([e.Input()],t.prototype,"disabled",void 0),p([e.Input()],t.prototype,"value",void 0),p([e.Output()],t.prototype,"onToggleCheckbox",void 0),t=p([e.Component({selector:"scui-checkbox",template:'\n    <div (click)="toggleCheckbox()" [ngClass]="{checked:checked,disabled:disabled}" class="scui-checkbox">\n      <div class="group-label">{{ groupLabel }}</div>\n      <div class="checkbox-wrap">\n        <span class="checkbox-container">\n          <span *ngIf="checked" class="icon icon-i-remove"></span>\n        </span>\n        <span class="checkbox-label">{{label}}</span>\n      </div>\n    </div>\n  '})],t)}(),ot=function(){function t(t){this.control=t,this.showAutocomplete=!1,this.inputType="text",this.placeholder="",this.valueChange=new e.EventEmitter,this.propagateChange=function(t){},this.propagateChangeTouched=function(t){},null!=this.control&&(this.control.valueAccessor=this)}return t.prototype.ngOnInit=function(){this.autocompletInput=this.autocompleteList},t.prototype.writeValue=function(t){this.value=t},t.prototype.setInputValue=function(t){this.value=t,this.propagateChange(this.value),this.propagateChangeTouched(this.value),this.showAutocomplete=!1},t.prototype.registerOnChange=function(t){this.propagateChange=t},t.prototype.registerOnTouched=function(t){this.propagateChangeTouched=t},t.prototype.save=function(t){var e=this;this.value=t.target.value,this.propagateChange(this.value),this.autocompletInput=this.autocompleteList.filter((function(t){return t.value.toLowerCase().indexOf(e.value.toLowerCase())>-1}))},t.prototype.onTouched=function(t){this.value=t.target.value,this.propagateChangeTouched(this.value)},t.ctorParameters=function(){return[{type:c.NgControl,decorators:[{type:e.Self},{type:e.Optional}]}]},p([e.Input()],t.prototype,"inputType",void 0),p([e.Input()],t.prototype,"isInvalid",void 0),p([e.Input()],t.prototype,"styleClass",void 0),p([e.Input()],t.prototype,"placeholder",void 0),p([e.Input()],t.prototype,"maxLength",void 0),p([e.Input()],t.prototype,"label",void 0),p([e.Input()],t.prototype,"autocompleteList",void 0),p([e.Output()],t.prototype,"valueChange",void 0),t=p([e.Component({selector:"scui-autocomplete",template:'\n    <div class="scui-input scui-error {{styleClass}} {{inputState}}"\n         [ngClass]="{\'scui-error\': !control?.pristine && (control?.errors != null) || isInvalid}">\n      <div>\n        <div class="scui-input-label" *ngIf="label">\n          {{label}}\n        </div>\n        <input [type]="inputType"\n               [placeholder]="placeholder"\n               (input)="save($event)"\n               (focus)="inputState = \'scui-focus\'; showAutocomplete = true;"\n               (blur)="inputState = \'\'; onTouched($event)"\n               [value]="value"\n               class="scui-input-field">\n        <div class="scui-autocomplete-box scui-submenu" *ngIf="showAutocomplete">\n          <ul class="submenu-nav">\n            <li class="submenu-nav-item " *ngFor="let option of autocompletInput" (click)="setInputValue(option.value)">\n              <a class="list-item" (keydown.enter)="setInputValue(option.value)" tabindex="0">{{option.label}}</a>\n            </li>\n          </ul>\n        </div>\n        <div *ngIf="maxLength &&!control?.errors?.maxlength && inputType !== \'password\'" class="scui-input-counter">\n          <div>Max {{maxLength}} chars</div>\n          <div>{{value?.length || 0 }}/{{maxLength}}</div>\n        </div>\n      </div>\n      <div class="scui-input-messages">\n        <div *ngIf="control?.errors?.maxlength || isInvalid">This is the error message</div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  '}),u(0,e.Self()),u(0,e.Optional())],t)}(),st=function(){function t(){}return t=p([e.NgModule({declarations:[tt,et,ot,nt,it],imports:[n.CommonModule,c.FormsModule],exports:[tt,et,ot,nt,it]})],t)}(),at=function(){function t(){this.selectedOptionIds=[],this.placeholder="Select Project",this.onSelectedOption=new e.EventEmitter,this.onRemovedOption=new e.EventEmitter,this.optionList=[],this.assignedProjects=[]}return t.prototype.ngOnChanges=function(t){var e=this;t.options?(this.optionList=t.options.currentValue.filter((function(t){return!e.selectedOptionIds.includes(t.id)})),this.assignedProjects=t.options.currentValue.filter((function(t){return e.selectedOptionIds.includes(t.id)}))):t.selectedOptionIds&&(this.optionList=this.options.filter((function(e){return!t.selectedOptionIds.currentValue.includes(e.id)})),this.assignedProjects=this.options.filter((function(e){return t.selectedOptionIds.currentValue.includes(e.id)})))},t.prototype.toggle=function(){this.isOpen=!this.isOpen},t.prototype.onBlurMethod=function(){this.isOpen=!1},t.prototype.removeProject=function(t){this.assignedProjects=this.assignedProjects.filter((function(e){return t.id!==e.id})),this.optionList.push(t),this.onSelectedOption.emit(this.assignedProjects)},t.prototype.selectOption=function(t){this.assignedProjects.push(t),this.optionList=this.optionList.filter((function(e){return t.id!==e.id})),this.onSelectedOption.emit(this.assignedProjects),this.toggle()},p([e.Input()],t.prototype,"options",void 0),p([e.Input()],t.prototype,"selectedOptionIds",void 0),p([e.Input()],t.prototype,"label",void 0),p([e.Input()],t.prototype,"placeholder",void 0),p([e.Output()],t.prototype,"onSelectedOption",void 0),p([e.Output()],t.prototype,"onRemovedOption",void 0),t=p([e.Component({selector:"scui-project-selector",template:'\n    <div class="scui-project-selector">\n      <div class="scui-project-selector-label" *ngIf="label">\n        {{label}}\n      </div>\n      <div [ngClass]="{\'dropdown-expanded\': isOpen}" class="scui-dropdown" (blur)="onBlurMethod()" tabindex="0">\n        <div (click)="toggle()" class="main">{{ placeholder }}\n          <span *ngIf="!isOpen" class="icon icon-small-down"></span>\n          <span *ngIf="isOpen" class="icon icon-small-up"></span>\n        </div>\n        <div *ngIf="isOpen" [ngClass]="{\'no-items\':optionList.length === 0}" class="options">\n          <div (click)="selectOption(option);"\n               class="option"\n               *ngFor="let option of optionList">\n            <span>{{ option.label }}</span>\n          </div>\n        </div>\n      </div>\n      <div class="selected-projects" *ngFor="let project of assignedProjects; let i = index">\n        <span class="icon icon-app-store"></span>\n        <span class="project-label">{{ project.label }}</span>\n        <span (click)="removeProject(project)" class="icon icon-i-remove"></span>\n      </div>\n    </div>'})],t)}(),ct=function(){function t(){}return t=p([e.NgModule({declarations:[at],imports:[n.CommonModule,S],exports:[at]})],t)}();t.BgHoverDirective=y,t.BgHoverModule=I,t.ClipboardDirective=W,t.ClipboardModule=q,t.ImageCropDirective=h,t.ImageCropModule=g,t.ScUiArticleModule=f,t.ScUiButtonsModule=B,t.ScUiCardModule=C,t.ScUiDrawerModule=w,t.ScUiEditorModule=G,t.ScUiFileComponent=F,t.ScUiFileModule=V,t.ScUiFormControlsModule=st,t.ScUiImageListModule=Z,t.ScUiImageModule=X,t.ScUiNavModule=k,t.ScUiNoResultsModule=J,t.ScUiPillComponent=T,t.ScUiPillsModule=P,t.ScUiProjectSelectorModule=ct,t.ScUiTabsModule=A,t.ScUiWizardNavModule=j,t.ScuiDropdownModule=S,t.ɵa=d,t.ɵb=v,t.ɵc=m,t.ɵd=b,t.ɵe=x,t.ɵf=O,t.ɵg=E,t.ɵh=M,t.ɵi=L,t.ɵj=U,t.ɵk=D,t.ɵl=N,t.ɵm=R,t.ɵn=_,t.ɵo=H,t.ɵp=$,t.ɵq=z,t.ɵr=K,t.ɵs=Q,t.ɵt=Y,t.ɵu=tt,t.ɵv=et,t.ɵw=ot,t.ɵx=nt,t.ɵy=it,t.ɵz=at,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=scopecom-scope-ui.umd.min.js.map