@c8y/ngx-components 1006.6.36 → 1006.6.40

package/bundles/c8y-ngx-components-context-dashboard.umd.min.js

@@ -12,5 +12,5 @@
 
     See the Apache Version 2.0 License for specific language governing permissions
     and limitations under the License.
-    ***************************************************************************** */var g=function(){return(g=Object.assign||function(t){for(var e,n=1,s=arguments.length;n<s;n++)for(var a in e=arguments[n])Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t}).apply(this,arguments)};function b(t,e,n,s){var a,i=arguments.length,o=i<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,n):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,n,s);else for(var r=t.length-1;r>=0;r--)(a=t[r])&&(o=(i<3?a(o):i>3?a(e,n,o):a(e,n))||o);return i>3&&o&&Object.defineProperty(e,n,o),o}function y(t,e){return function(n,s){e(n,s,t)}}function v(t,e,n,s){return new(n||(n=Promise))((function(a,i){function o(t){try{c(s.next(t))}catch(t){i(t)}}function r(t){try{c(s.throw(t))}catch(t){i(t)}}function c(t){t.done?a(t.value):new n((function(e){e(t.value)})).then(o,r)}c((s=s.apply(t,e||[])).next())}))}function m(t,e){var n,s,a,i,o={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]};return i={next:r(0),throw:r(1),return:r(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function r(i){return function(r){return function(i){if(n)throw new TypeError("Generator is already executing.");for(;o;)try{if(n=1,s&&(a=2&i[0]?s.return:i[0]?s.throw||((a=s.return)&&a.call(s),0):s.next)&&!(a=a.call(s,i[1])).done)return a;switch(s=0,a&&(i=[2&i[0],a.value]),i[0]){case 0:case 1:a=i;break;case 4:return o.label++,{value:i[1],done:!1};case 5:o.label++,s=i[1],i=[0];continue;case 7:i=o.ops.pop(),o.trys.pop();continue;default:if(!(a=(a=o.trys).length>0&&a[a.length-1])&&(6===i[0]||2===i[0])){o=0;continue}if(3===i[0]&&(!a||i[1]>a[0]&&i[1]<a[3])){o.label=i[1];break}if(6===i[0]&&o.label<a[1]){o.label=a[1],a=i;break}if(a&&o.label<a[2]){o.label=a[2],o.ops.push(i);break}a[2]&&o.ops.pop(),o.trys.pop();continue}i=e.call(t,o)}catch(t){i=[6,t],s=0}finally{n=a=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,r])}}}var f,D=new e.InjectionToken("ContextDashboardConfig");(f=t.ContextDashboardType||(t.ContextDashboardType={})).Device="device",f.DeviceType="type",f.Group="group",f.Named="name";var x=[{label:n.gettext("Regular`style`"),class:"panel-title-regular",description:n.gettext("The widget has no border between header and content.")},{label:n.gettext("Border`style`"),class:"panel-title-border",description:n.gettext("The widget has a small separation border between header and content.")},{label:n.gettext("Overlay`style`"),class:"panel-title-overlay",description:n.gettext("The widget content overlays the header.")},{label:n.gettext("Hidden`style`"),class:"panel-title-hidden",description:n.gettext("The widget header is not shown.")}],C=[{label:n.gettext("Light`style`"),class:"panel-content-light",description:n.gettext("The widget is styled with a light background and has low contrast.")},{label:n.gettext("Dark`style`"),class:"panel-content-dark",description:n.gettext("The widget is styled with a dark background and has high contrast.")},{label:n.gettext("Transparent`style`"),class:"panel-content-transparent",description:n.gettext("The widget is styled with a transparent background and therefore is border-less.")},{label:n.gettext("Branded`style`"),class:"panel-content-branded",description:n.gettext("The widget is styled with the main brand color.")}],w=[{label:n.gettext("Light`theme`"),class:"dashboard-theme-light",description:n.gettext("The dashboard is styled with a light background and has low contrast.")},{label:n.gettext("Dark`theme`"),class:"dashboard-theme-dark",description:n.gettext("The dashboard is styled with a dark background and has high contrast.")},{label:n.gettext("Transparent`theme`"),class:"dashboard-theme-transparent",description:n.gettext("The dashboard is styled with a transparent background and therefore is border-less.")},{label:n.gettext("Branded`theme`"),class:"dashboard-theme-branded",description:n.gettext("The dashboard is styled with the main brand color.")}],T=function(){function l(t,e,n,s,a,i,o,r){this.inventory=t,this.tabs=e,this.modal=n,this.translateService=s,this.router=a,this.user=i,this.appState=o,this.permissions=r,this.cache=new Map,this.DEFAULT_PAGESIZE=1e3,this.FRAGMENT_NAME="c8y_Dashboard",this.DASHBOARD_ROUTE_PATH="dashboard",this.INDEX_SPLIT="!",this._formDisabled=!0}return Object.defineProperty(l.prototype,"formDisabled",{get:function(){return this._formDisabled},set:function(t){this._formDisabled=t},enumerable:!0,configurable:!0}),l.prototype.create=function(e,n){return v(this,void 0,void 0,(function(){var s,a,i,r,c,l;return m(this,(function(d){switch(d.label){case 0:return"string"==typeof n?(s=n,a=t.ContextDashboardType.Named):(s=n.contextData.id,a=this.getDashboardTypeFromViewContext(e,n)),i={},o.assign(i,{c8y_Dashboard:e}),r=a===t.ContextDashboardType.DeviceType?e.deviceTypeValue:s,c=this.createFragmentKey(a,r),i[c]={},this.shouldSetGlobal(i)&&o.assign(i,{c8y_Global:{}}),a!==t.ContextDashboardType.Group&&a!==t.ContextDashboardType.Device?[3,2]:[4,this.inventory.childAdditionsCreate(i,s)];case 1:return l=d.sent(),[3,4];case 2:return[4,this.inventory.create(i)];case 3:l=d.sent(),d.label=4;case 4:return[2,l.data]}}))}))},l.prototype.detail=function(t){return v(this,void 0,void 0,(function(){var e;return m(this,(function(n){switch(n.label){case 0:return[4,this.inventory.detail(t)];case 1:return e=n.sent().data,this.cache.set(t.id,e),[2,e]}}))}))},l.prototype.update=function(t){return v(this,void 0,void 0,(function(){var e,n;return m(this,(function(s){switch(s.label){case 0:return(e=this.clean(o.pick(t,[this.FRAGMENT_NAME,"id"]))).c8y_Global=this.shouldSetGlobal(t),[4,this.inventory.update(e)];case 1:return n=s.sent().data,this.cache.set(t.id,n),[2,n]}}))}))},l.prototype.delete=function(t){return v(this,void 0,void 0,(function(){var e,s,a=this;return m(this,(function(i){switch(i.label){case 0:return i.trys.push([0,3,,4]),e=n.gettext('You are about to delete the dashboard "{{ dashboardName }}". Do you want to proceed?'),this.isDeviceType(t)&&(e=n.gettext('You are about to delete the dashboard "{{ dashboardName }}" from all devices of the type "{{ deviceType }}".\n           Do you want to proceed?')),[4,this.modal.confirm(n.gettext("Delete dashboard"),this.translateService.instant(e,{dashboardName:t.c8y_Dashboard.name,deviceType:t.c8y_Dashboard.deviceTypeValue}),n.Status.DANGER,{ok:n.gettext("Delete"),cancel:n.gettext("Cancel")})];case 1:return i.sent(),[4,this.inventory.delete(t)];case 2:return i.sent(),s=Array.from(this.tabs.state).find((function(e){return e.path.endsWith(a.DASHBOARD_ROUTE_PATH+"/"+t.id)})),this.tabs.remove(s),this.tabs.refresh(),[3,4];case 3:return i.sent(),[3,4];case 4:return[2]}}))}))},l.prototype.activateDashboards=function(t,e){var n=t.params.dashboardId;return n?this.getDashboard$(n,e,t.parent.data.contextData).pipe(c.tap((function(e){t.data={dashboard:e}})),c.map((function(){return!0})),c.catchError((function(){return r.of(!1)}))):this.getTabs$(t.data.contextData,e)},l.prototype.getNamedDashboardOrCreate=function(e,n){var s=this,a=this.mapWidgets(n);return this.getDashboard$(e,[t.ContextDashboardType.Named]).pipe(c.throwIfEmpty(),c.catchError((function(){return r.from(s.create({children:a},e))})))},l.prototype.refreshTabs=function(t){return v(this,void 0,void 0,(function(){var e,n,s,a,i,o,r=this;return m(this,(function(c){switch(c.label){case 0:return this.isNamed(t)?[3,2]:(e=Array.from(this.tabs.state).find((function(e){return e.path.endsWith(r.DASHBOARD_ROUTE_PATH+"/"+t.id)})),[4,this.detail(t)]);case 1:n=c.sent(),e&&(s=n.c8y_Dashboard,a=s.icon,i=s.priority,o=s.name,e.icon=a,e.priority=i,e.label=o),this.tabs.refresh(),c.label=2;case 2:return[2]}}))}))},l.prototype.navigateToDashboard=function(t){return v(this,void 0,void 0,(function(){return m(this,(function(e){return/dashboard/.test(this.router.url)?this.router.navigate(["..",t.id],{relativeTo:n.getActivatedRoute(this.router)}):this.router.navigate(["..","dashboard",t.id],{relativeTo:n.getActivatedRoute(this.router)}),[2]}))}))},l.prototype.canEditDashboard=function(t){return this.permissions.canEdit(["ROLE_INVENTORY_ADMIN","ROLE_INVENTORY_CREATE"],t)},l.prototype.isNamed=function(e){var n=this;return o.some(o.keys(e),(function(e){return new RegExp("^"+n.FRAGMENT_NAME+n.INDEX_SPLIT+t.ContextDashboardType.Named+n.INDEX_SPLIT).test(e)}))},l.prototype.isDeviceType=function(e){var n=this;return o.some(o.keys(e),(function(e){return new RegExp("^"+n.FRAGMENT_NAME+n.INDEX_SPLIT+t.ContextDashboardType.DeviceType+n.INDEX_SPLIT).test(e)}))},l.prototype.getStyling=function(t,e,n){var s=t.find((function(t){return t&&new RegExp(e,"i").test(t.class)}));return s?s.class:n},l.prototype.mapWidgets=function(t){return o.keyBy(t.map((function(t){return t.id=String(Math.random()).substr(2),t})),"id")},l.prototype.getDashboard$=function(e,n,s){var a=this,i=this.cache.get(e),l=s?this.getContextDashboards(s,n):[this.getNamedDashboard(e)],d=this.getContextDashboards$(l).pipe(c.tap((function(t){return a.cacheDashboard(t)})),c.filter((function(n){return n.id===e||o.has(n,""+a.FRAGMENT_NAME+a.INDEX_SPLIT+t.ContextDashboardType.Named+a.INDEX_SPLIT+e)})));return i?r.of(i):d},l.prototype.getTabs$=function(t,e){var n=this,s=this.getContextDashboards(t,e);return this.setBaseContextRoute(t,e),this.getContextDashboards$(s).pipe(c.map((function(t){return n.removeDashboardMoProperty(t)})),c.tap((function(t){return n.cacheDashboard(t)})),c.map((function(t){return n.createDashboardTab(t)})),c.toArray())},l.prototype.getContextDashboards$=function(t){return r.from(t).pipe(c.mergeAll(),c.mergeMap((function(t){return t.data})))},l.prototype.setBaseContextRoute=function(e,n){var s=n.includes(t.ContextDashboardType.Device)?t.ContextDashboardType.Device:t.ContextDashboardType.Group;this.currentContextRoute=s+"/"+e.id},l.prototype.removeDashboardMoProperty=function(t){var e=o.cloneDeep(t),n=o.get(e,"c8y_Dashboard.children"),s=!1;return o.forEach(n,(function(t){o.get(t,"componentTransformConfigWithContext")&&(delete t.componentTransformConfigWithContext,s=!0),o.get(t,"config.dashboardMo")&&(delete t.config.dashboardMo,s=!0)})),s&&this.update(e),e},l.prototype.cacheDashboard=function(t){this.cache.set(t.id,t)},l.prototype.createDashboardTab=function(t){var e=t.c8y_Dashboard,n=t.id;return{icon:e.icon,path:this.DASHBOARD_ROUTE_PATH+"/"+n,label:e.name,priority:e.priority}},l.prototype.clean=function(t){var e=JSON.stringify(t,(function(t,e){if("$$hashKey"!==t&&"klasses"!==t)return e}));return JSON.parse(e)},l.prototype.getNamedDashboard=function(e){return this.inventory.list({fragmentType:""+this.FRAGMENT_NAME+this.INDEX_SPLIT+t.ContextDashboardType.Named+this.INDEX_SPLIT+e,pageSize:1})},l.prototype.getContextDashboards=function(e,n){var s=this;return n.map((function(n){return s.inventory.list({fragmentType:""+s.FRAGMENT_NAME+s.INDEX_SPLIT+n+s.INDEX_SPLIT+(n===t.ContextDashboardType.DeviceType?e.type:e.id),pageSize:s.DEFAULT_PAGESIZE})}))},l.prototype.getDashboardTypeFromViewContext=function(e,s){var a;return s.context===n.ViewContext.Device&&(a=e.deviceType?t.ContextDashboardType.DeviceType:t.ContextDashboardType.Device),s.context===n.ViewContext.Group&&(a=t.ContextDashboardType.Group),a},l.prototype.createFragmentKey=function(t,e){return[this.FRAGMENT_NAME,t,e].join(this.INDEX_SPLIT)},l.prototype.shouldSetGlobal=function(t){return this.isNamed(t)||this.isDeviceType(t)?{}:null},l.ctorParameters=function(){return[{type:a.InventoryService},{type:n.TabsService},{type:n.ModalService},{type:i.TranslateService},{type:s.Router},{type:a.UserService},{type:n.AppStateService},{type:n.Permissions}]},l=b([e.Injectable()],l)}(),S=function(){function n(t){this.contextDashboardService=t}return n.prototype.canActivate=function(e){return this.contextDashboardService.activateDashboards(e,[t.ContextDashboardType.Device,t.ContextDashboardType.DeviceType])},n.ctorParameters=function(){return[{type:T}]},n=b([e.Injectable()],n)}(),I=function(){function t(t,e,n){var s=this;this.modal=t,this.contextDashboardService=n,this.styling={themeClass:"dashboard-theme-light",headerClass:"panel-title-regular"},this.possibleStyling={DASHBOARD_THEME_CLASSES:w,WIDGET_HEADER_CLASSES:x},this.result=new Promise((function(t,e){s._save=t,s._cancel=e})),this.DEFAULT_DASHBOARD_MARGIN=12,this.DEFAULT_DASHBOARD_ICON="th",this.DEFAULT_DASHBOARD_PRIORITY=1e4,this.DEFAULT_DASHBOARD_NAME="Dashboard",this.icons=e,this.filteredIcons=e}return t.prototype.ngAfterContentInit=function(){var t={name:this.DEFAULT_DASHBOARD_NAME,priority:this.DEFAULT_DASHBOARD_PRIORITY,icon:this.DEFAULT_DASHBOARD_ICON,deviceTypeValue:this.deviceType};this.dashboard?(this.current=o.clone(this.dashboard),this.setDashboardStyle()):(this.dashboard=t,this.dashboardDetailForm.form.markAsDirty())},t.prototype.save=function(){var t,e;this.dashboard.classes=((t={})[this.styling.themeClass]=!0,t),this.dashboard.widgetClasses=((e={})[this.styling.headerClass]=!0,e),this._save(this.dashboard)},t.prototype.close=function(){this._cancel(),this.modal.hide()},t.prototype.getDashboardPreviewStyle=function(){var t={};return t[this.styling.headerClass]=!0,t[this.styling.themeClass]=!0,t},t.prototype.selectIcon=function(t){this.dashboard.icon=t,this.dashboardDetailForm.form.markAsDirty()},t.prototype.updateFiltered=function(t){if(t){var e=new RegExp(t,"i");this.filteredIcons=this.icons.filter((function(t){return e.test(t)}))}else this.filteredIcons=this.icons},t.prototype.setDashboardStyle=function(){var t=this,e=g({},this.dashboard.classes,this.dashboard.widgetClasses);Object.keys(e).map((function(t){return t.split("-").pop()})).forEach((function(e){t.styling.themeClass=t.contextDashboardService.getStyling(w,e,t.styling.themeClass),t.styling.headerClass=t.contextDashboardService.getStyling(x,e,t.styling.headerClass)}))},t.ctorParameters=function(){return[{type:l.BsModalRef},{type:Array,decorators:[{type:e.Inject,args:[n.ICON_LIST]}]},{type:T}]},b([e.ViewChild("dashboardDetailForm",{static:!0})],t.prototype,"dashboardDetailForm",void 0),t=b([e.Component({selector:"c8y-dashboard-detail",template:'<div class="modal-header">\n  <h3 *ngIf="!current" translate>\n    Add dashboard\n  </h3>\n  <h3 *ngIf="current" translate>Edit dashboard</h3>\n</div>\n\n<div class="modal-body">\n  <form #dashboardDetailForm="ngForm">\n    <div class="row">\n      <div class="col-sm-6">\n        <div *ngIf="!isNamedDashboard">\n          <h6 class="legend form-block"><span translate>Tab</span></h6>\n          <div class="input-group">\n            <c8y-form-group>\n              <label class="m-r-8" translate>Icon</label>\n              <div dropdown class="dropdown">\n                <button\n                  title="{{ \'Icon\' | translate }}"\n                  class="btn-default btn btn-gray"\n                  dropdownToggle\n                >\n                  <i c8yIcon="{{dashboard.icon}}"></i>\n                  <span class="caret"></span> \n                </button>                  \n                <ul\n                  *dropdownMenu\n                  class="dropdown-menu modal-inner-scroll dropdown-menu-grid-4"\n                  style="max-height: 250px;margin-left: 0;"\n                >\n                  <ng-container *ngFor="let icon of filteredIcons">\n                    <li (click)="selectIcon(icon)">\n                      <a style="cursor: pointer" title="{{icon}}" [ngClass]="{\'active\': dashboard.icon === icon}">\n                        <i class="icon" [c8yIcon]="icon" ></i>\n                      </a>\n                    </li>\n                  </ng-container>\n                </ul>\n              </div>\n            </c8y-form-group>\n            <c8y-form-group class="flex-grow">\n              <label>\n                <span class="m-r-4" translate>Menu label</span>\n                <button class="btn btn-clean"\n                  popover="{{\n                    \'Menu label to display in submenu when dashboard is attached\' | translate\n                  }}"\n                  triggers="focus"\n                  placement="right"\n                  container="body"\n                >\n                  <i\n                    [c8yIcon]="\'question-circle-o\'"\n                    class="text-primary"\n                  ></i>\n                </button>\n              </label>\n              <input\n                title="{{ \'Menu label\' | translate }}"\n                class="form-control"\n                name="name"\n                [(ngModel)]="dashboard.name"\n                placeholder="{{ \'e.g. My dashboard\' | translate }}"\n                required\n              />\n            </c8y-form-group>\n          </div>\n          <div class="row">\n            <div class="col-sm-6">\n              <c8y-form-group>\n                <label>\n                  <span translate class="m-r-4">Position in navigation</span>\n                  <button class="btn btn-clean"\n                    popover="{{\n                      \'Position in navigation menu (10000 first, -10000 last)\' | translate\n                    }}"\n                    triggers="focus"\n                    placement="right"\n                    container="body"\n                  >\n                    <i \n                      [c8yIcon]="\'question-circle-o\'"\n                      class="text-primary"\n                    ></i>\n                  </button>\n                  \n                </label>\n                <input\n                  title="{{ \'Position in navigation\' | translate }}"\n                  type="number"\n                  class="form-control"\n                  name="priority"\n                  [(ngModel)]="dashboard.priority"\n                  min="-10000"\n                  max="10000"\n                  placeholder="{{ \'e.g.\' | translate }} 500"\n                  required\n                />\n              </c8y-form-group>\n            </div>\n            <div class="col-sm-6">\n             \n            </div>\n\n            <div style="position: relative;">\n              <div class="col-sm-12">\n                <div class="form-group m-b-24" *ngIf="!current && deviceType">\n                  <label class="c8y-checkbox">\n                    <input type="checkbox" name="deviceType" [(ngModel)]="dashboard.deviceType" />\n                    <span></span>\n                    {{ \'Apply dashboard to all devices of type \' | translate\n                    }}<i>{{ dashboard.deviceTypeValue }}</i>\n                  </label>\n                </div>\n\n                <div\n                  class="alert alert-info  m-b-24"\n                  *ngIf="dashboard.deviceType && dashboard.deviceTypeValue"\n                >\n                  <i c8y-icon="info"></i>\n                  {{ \'This dashboard is shared between all devices of the type \' | translate }}\n                  <i>{{ dashboard.deviceTypeValue }}</i>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div>\n          <c8y-appearance-settings\n            [(themeClass)]="styling.themeClass"\n            [(headerClass)]="styling.headerClass"\n          >\n          </c8y-appearance-settings>\n          <div class="row">\n            <div class="col-sm-6">\n              <c8y-form-group>\n                <label>{{ \'Widget margin\' | translate }}</label>\n                <div class="input-group">\n                  <input\n                    title="{{ \'Widget margin\' | translate }}"\n                    id="margin"\n                    name="margin"\n                    type="number"\n                    class="form-control"\n                    [(ngModel)]="dashboard.widgetMargin"\n                    min="0"\n                    max="50"\n                    placeholder="{{ DEFAULT_DASHBOARD_MARGIN }}"\n                  />\n                  <span class="input-group-addon">px</span>\n                </div>\n              </c8y-form-group>\n            </div>\n            <div class="col-sm-6">\n              <label translate>Widget titles</label>\n              <c8y-form-group>\n                <label\n                  title="{{ \'Translate widget titles if possible\' | translate }}"\n                  class="c8y-checkbox"\n                >\n                  <input\n                    type="checkbox"\n                    name="translateWidgetTitle"\n                    [(ngModel)]="dashboard.translateWidgetTitle"\n                  /><span></span>\n                  <span>{{ \'Translate if possible\' | translate }}</span>\n                </label>\n              </c8y-form-group>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class="col-sm-6">\n        <c8y-widget-preview\n          [tab]="!isNamedDashboard ? dashboard : undefined"\n          [previewClasses]="getDashboardPreviewStyle()"\n        ></c8y-widget-preview>\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class="modal-footer">\n  <button title="{{ \'Cancel\' | translate }}" class="btn btn-default" (click)="close()" translate>\n    Cancel\n  </button>\n  <button\n    title="{{ \'Save\' | translate }}"\n    class="btn btn-primary"\n    (click)="save()"\n    [disabled]="dashboardDetailForm.form.invalid || dashboardDetailForm.form.pristine"\n    translate\n  >\n    Save\n  </button>\n</div>\n'}),y(1,e.Inject(n.ICON_LIST))],t)}(),_=function(){function t(t,e,n){this.dynamicComponentService=t,this.translateService=e,this.moduleConfig=n}return t.prototype.getWidgetDefinition=function(t){return v(this,void 0,void 0,(function(){return m(this,(function(e){return[2,this.dynamicComponentService.getById$(t).toPromise()]}))}))},t.prototype.getWidgetDefinitions=function(){var t=this,e=Array.from(this.dynamicComponentService.state).map((function(e){return g({},e,{label:t.translateService.instant(e.label)})}));return o.cloneDeep(o.sortBy(e,"label").filter(this.moduleConfig.widgetFilter))},t.ctorParameters=function(){return[{type:n.DynamicComponentService},{type:i.TranslateService},{type:void 0,decorators:[{type:e.Inject,args:[D]}]}]},t.ngInjectableDef=e.ɵɵdefineInjectable({factory:function(){return new t(e.ɵɵinject(n.DynamicComponentService),e.ɵɵinject(i.TranslateService),e.ɵɵinject(D))},token:t,providedIn:"root"}),t=b([e.Injectable({providedIn:"root"}),y(2,e.Inject(D))],t)}(),k=function(){function t(t,e,n){var s=this;this.widgetService=t,this.modal=e,this.contextDashboardService=n,this.mode="select",this.searchChange$=new r.Subject,this.searchTerm="",this.styling={headerClass:"panel-title-regular",contentClass:"panel-content-light"},this.defaultStyling={headerClass:"panel-title-regular",contentClass:"panel-content-light"},this.possibleStyling={WIDGET_HEADER_CLASSES:x,WIDGET_CONTENT_CLASSES:C},this.isUpgrade=!1,this.result=new Promise((function(t,e){s._save=t,s._cancel=e}))}return Object.defineProperty(t.prototype,"isEdit",{get:function(){return!!this.current},enumerable:!0,configurable:!0}),t.prototype.ngAfterContentInit=function(){var t=this;this.components=this.widgetService.getWidgetDefinitions(),this.selected&&(this.current=o.clone(this.selected),this.select(this.selected,this.isEdit?"config":"select")),this.searchSub=this.searchChange$.pipe(c.switchMap((function(t){return r.iif((function(){return 13!==t.which}),r.timer(200),r.timer(10))}))).subscribe((function(){t.search()})),this.mo.c8y_Dashboard.classes&&(this.styling=this.setDefaultStyle(g({},this.mo.c8y_Dashboard.classes,this.mo.c8y_Dashboard.widgetClasses,this.isEdit?this.current.data.classes:{})),this.defaultStyling=this.setDefaultStyle(g({},this.mo.c8y_Dashboard.classes,this.mo.c8y_Dashboard.widgetClasses)))},t.prototype.save=function(){var t=this.selected.data,e=t._x,n=t._y,s=t._width,a=t._height;if(this.widgetConfig&&this.widgetConfig.device){var i=this.widgetConfig.device,r=i.id,c=i.name;this.widgetConfig.device={id:r,name:c}}var l=g({_x:e,_y:n,_width:s,_height:a,config:o.omit(this.widgetConfig,"settings"),title:this.selected.data.title,componentId:this.selected.id,id:this.isEdit?this.current.data.id:String(Math.random()).substr(2),classes:this.getStyle()},this.isEdit?{}:this.widgetConfig.settings.widgetDefaults);this._save(l)},t.prototype.select=function(t,e){if(void 0===e&&(e="config"),t.data=t.data||{},this.selected=t,this.isUpgrade=!!o.get(t,"data.settings.upgrade"),this.contextDashboardService.formDisabled=this.isUpgrade,this.isEdit){var n=this.current.data,s=n._x,a=n._y,i=n._width,r=n._height,c=n.classes,l=n.title;this.selected.data=g({},this.selected.data,{_x:s,_y:a,_width:i,_height:r,classes:c,title:l})}this.widgetConfig=o.cloneDeep(this.composeWidgetConfig(this.selected,this.context)),this.selected.data.title=this.selected.data.title||t.label,this.componentLabel=t.label,this.mode=e},t.prototype.search=function(){var t=this;this.searchTerm.length>0?this.searchResult=this.components.filter((function(e){return new RegExp(o.escapeRegExp(t.searchTerm.trim()),"i").test(e.label)})):this.resetSearch()},t.prototype.resetSearch=function(){this.searchTerm="",this.searchResult=void 0},t.prototype.changeMode=function(t){this.mode=t},t.prototype.close=function(){this._cancel(),this.modal.hide()},t.prototype.getStyle=function(t){void 0===t&&(t=!1);var e={};return!t&&this.isDashboardDefaultStyle(this.styling.headerClass)||(e[this.styling.headerClass]=!0),!t&&this.isDashboardDefaultStyle(this.styling.contentClass)||(e[this.styling.contentClass]=!0),t&&(e["dashboard-theme-"+this.defaultStyling.contentClass.split("-").pop()]=!0),e},t.prototype.ngOnDestroy=function(){this.contextDashboardService.formDisabled=!0,this.searchSub&&this.searchSub.unsubscribe()},t.prototype.isDashboardDefaultStyle=function(t){var e=g({},this.mo.c8y_Dashboard.classes,this.mo.c8y_Dashboard.widgetClasses),n=Object.keys(e).map((function(t){return{class:t}}));return!!this.contextDashboardService.getStyling(n,t.split("-").pop(),void 0)},t.prototype.setDefaultStyle=function(t){var e=this,n=this.styling.contentClass,s=this.styling.headerClass;return Object.keys(t).map((function(t){return t.split("-").pop()})).forEach((function(t){n=e.contextDashboardService.getStyling(C,t,n),s=e.contextDashboardService.getStyling(x,t,s)})),{headerClass:s,contentClass:n}},t.prototype.composeWidgetConfig=function(t,e){void 0===e&&(e={});var n=g({settings:g({},t.data.settings,o.get(t.data.settings,"ng1.options"),o.get(t.data,"ng1.options"),{context:e,dashboardMo:this.mo.c8y_Dashboard})},t.data.config);return this.applyTargetIfDeviceDashboard(n)},t.prototype.applyTargetIfDeviceDashboard=function(t){var e=this.contextDashboardService.isDeviceType(this.mo);e&&(t.settings.hideTarget=e,(t.settings.ng1?t.settings.ng1.options.noDeviceTarget:t.settings.noDeviceTarget)||(t.device={id:this.context.id,name:this.context.name}));return t},t.ctorParameters=function(){return[{type:_},{type:l.BsModalRef},{type:T}]},t=b([e.Component({selector:"c8y-widget-config",template:'<div class="modal-header separator">\n  <h3 *ngIf="!current" translate>Add widget</h3>\n  <h3 *ngIf="current" translate>Edit widget</h3>\n</div>\n<form #configForm="ngForm" name="form">\n  <div class="c8y-modal-tabs">\n    <div class="tabContainer">\n      <ul class="nav nav-tabs nav-tabsc8y p-l-24">\n        <li [class.active]="mode === \'select\'">\n          <button type="button" class="btn" (click)="changeMode(\'select\'); (false)">\n            <i c8yIcon="th-large"></i> <span class="txt" translate>Select widget</span>\n          </button>\n        </li>\n        <li [class.active]="mode === \'config\'">\n          <button\n            type="button"\n            class="btn"\n            [disabled]="!selected"\n            (click)="changeMode(\'config\'); (false)"\n          >\n            <i c8yIcon="cog"></i> <span class="txt" translate>Configuration</span>\n          </button>\n        </li>\n        <li [class.active]="mode === \'style\'">\n          <button\n            type="button"\n            class="btn"\n            [disabled]="!selected"\n            (click)="changeMode(\'style\'); (false)"\n          >\n            <i c8yIcon="paint-brush"></i> <span class="txt" translate>Appearance</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class="modal-inner-scroll">\n    <div\n      *ngIf="mode === \'select\'"\n      class="bg-white p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0"\n      style="z-index: 2;"\n    >\n      <div class="row">\n        <div class="col-sm-6">\n          <div class="input-group input-group-search">\n            <input\n              class="form-control"\n              placeholder="{{ \'Search…\' | translate }}"\n              type="text"\n              [(ngModel)]="searchTerm"\n              [ngModelOptions]="{ standalone: true }"\n              (keydown)="searchChange$.next($event)"\n            />\n            <span class="input-group-btn">\n              <button class="btn btn-clean" (click)="resetSearch()">\n                <i [c8yIcon]="searchTerm.length === 0 ? \'search\' : \'close\'"></i>\n              </button>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class="modal-body bg-gray-lighter" *ngIf="mode === \'select\'">\n      <div class="card-group card-select" style="margin-bottom:-24px;">\n        <div\n          class="col-md-3 col-sm-4 col-xs-6"\n          *ngFor="let cmp of searchResult || components"\n          title="{{ cmp.description | translate }}"\n        >\n          <div class="card p-8" [class.active]="selected === cmp" (click)="select(cmp)">\n            <div\n              class="text-center p-8 m-b-8 flex-col flex-center"\n              style="min-height: 170px; background-color: var(--body-background-color, #f2f3f4);"\n            >\n              <ng-container *ngIf="!cmp.previewImage; else previewImage">\n                <h1><i c8yIcon="file-image-o"></i></h1>\n                <small translate>Preview not available</small>\n              </ng-container>\n              <ng-template #previewImage>\n                <img class="img-responsive" [src]="cmp.previewImage" />\n              </ng-template>\n            </div>\n            <p class="card-title text-truncate">\n              <c8y-highlight\n                text="{{ cmp.label | translate }}"\n                [pattern]="searchTerm"\n              ></c8y-highlight>\n            </p>\n          </div>\n        </div>\n\n        <div class="c8y-empty-state text-center" *ngIf="searchResult && searchResult.length === 0">\n          <h1 class="c8y-icon c8y-icon-device c8y-icon-duocolor"></h1>\n          <h3 translate>No widgets found.</h3>\n          <div>\n            <p translate>Rephrase your search term.</p>\n            <div>\n              <button class="btn btn-primary" (click)="resetSearch()" translate>\n                Reset search\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class="modal-body" *ngIf="mode === \'config\'" style="min-height: calc(100vh - 290px);">\n      <h4 style="text-align: left;">\n        <strong>\n          {{ selected.label | translate }}\n        </strong>\n      </h4>\n      <p class="m-b-24">\n        {{ selected.description | translate }}\n      </p>\n      <div class="row">\n        \x3c!-- change to col-sm-6 when preview is available --\x3e\n        <div class="col-sm-12">\n          <div class="legend form-block" translate>Configuration</div>\n          <c8y-form-group>\n            <label for="widgetTitle" translate>Title</label>\n            <input\n              id="widgetTitle"\n              [(ngModel)]="selected.data.title"\n              type="text"\n              name="title"\n              class="form-control"\n              placeholder="{{ \'e.g.\' | translate }} {{ componentLabel | translate }}"\n              required\n            />\n          </c8y-form-group>\n\n          \x3c!-- This is an upgraded component for the device selector and still needs to be migrated --\x3e\n          <c8y-dynamic-component\n            componentId="device.selector.legacy"\n            [config]="widgetConfig"\n            [notFoundError]="false"\n            *ngIf="!isUpgrade"\n          ></c8y-dynamic-component>\n\n          <c8y-dynamic-component\n            [componentId]="selected.id"\n            mode="config"\n            [config]="widgetConfig"\n            [notFoundError]="false"\n          ></c8y-dynamic-component>\n        </div>\n        \x3c!-- markup for the preview \n        \n        <div class="col-sm-6 sticky-header-top-0" >\n          <div class="legend form-block">\n            Preview\n          </div>\n          <div class="bg-gray-lighter p-16">\n            <div class="card card-dashboard" style="margin-bottom:0;">\n              <div class="card-header-actions">\n                <div class="card-title text-uppercase">{{ selected.data.title }}</div>\n                <div class="header-actions">\n                  <div class="optionsBtn dropdow" class="btnIcon dropdown-toggle c8y-dropdown">\n                    <i c8yIcon="cog"></i>\n                  </div>\n                </div>\n              </div>\n              <div class="card-inner-scroll">\n                <div class="card-block" style="min-height: 240px;">\n                  include here the widget\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      --\x3e</div>\n    </div>\n\n    <div *ngIf="mode === \'style\'" class="modal-body p-t-0" style="min-height: calc(100vh - 290px);">\n      <div class="row">\n        <div class="col-xs-6">\n          <c8y-appearance-settings\n            [(themeClass)]="styling.contentClass"\n            [(headerClass)]="styling.headerClass"\n            [possibleStylingTheme]="possibleStyling.WIDGET_CONTENT_CLASSES"\n            [possibleStylingHeader]="possibleStyling.WIDGET_HEADER_CLASSES"\n            [defaultThemeClass]="defaultStyling.contentClass"\n            [defaultHeaderClass]="defaultStyling.headerClass"\n          >\n          </c8y-appearance-settings>\n        </div>\n        <div class="col-xs-6 sticky-header-top-0">\n          <c8y-widget-preview [previewClasses]="getStyle(true)"></c8y-widget-preview>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class="modal-footer">\n    <button title="{{ \'Cancel\' | translate }}" class="btn btn-default" (click)="close()" translate>\n      Cancel\n    </button>\n    <button\n      title="{{ \'Save\' | translate }}"\n      class="btn btn-primary"\n      (click)="save()"\n      translate\n      [disabled]="contextDashboardService.formDisabled || configForm.invalid"\n    >\n      Save\n    </button>\n  </div>\n</form>\n'})],t)}(),E=function(){function t(t,e,n,s,a,i,o,r){this.route=t,this.router=e,this.contextDashboardService=n,this.alert=s,this.renderer=a,this.moduleConfig=i,this.widgetService=o,this.bsModal=r,this.childrenClasses="",this.setTitle=!1,this.disabled=!1,this.defaultWidgets=[],this.canDelete=!0,this.isLoading=!0,this.class="",this.widgets=[]}return t.prototype.ngOnInit=function(){this.name?this.loadNamedDashboard():this.loadContextDashboard()},t.prototype.applyDeviceTarget=function(t){t.config.device&&(t.config.device={id:this.context.id,name:this.context.name})},t.prototype.ngOnDestroy=function(){this.dataSub&&this.dataSub.unsubscribe()},t.prototype.restore=function(){return v(this,void 0,void 0,(function(){return m(this,(function(t){switch(t.label){case 0:return this.isLoading=!0,this.mo.c8y_Dashboard.children=this.contextDashboardService.mapWidgets(this.defaultWidgets),[4,this.contextDashboardService.update(this.mo)];case 1:return t.sent(),this.onLoad(),[2]}}))}))},t.prototype.updateDashboardChildren=function(t){return v(this,void 0,void 0,(function(){var e,n,s,a=this;return m(this,(function(i){return e=t.children,n=this.mo,s=o.keyBy(e.map((function(t){return a.componentToWidget(t)})),"id"),n.c8y_Dashboard.children=s,[2,this.contextDashboardService.update(n)]}))}))},t.prototype.deleteDashboard=function(){return v(this,void 0,void 0,(function(){var t;return m(this,(function(e){switch(e.label){case 0:return[4,this.contextDashboardService.delete(this.mo)];case 1:return e.sent(),this.route.parent&&(t=this.route.parent.snapshot.url.map((function(t){return t.path})).join("/"),this.router.navigateByUrl(t)),[2]}}))}))},t.prototype.editDashboard=function(){return v(this,void 0,void 0,(function(){var t,e,n,s;return m(this,(function(a){switch(a.label){case 0:t={dashboard:this.dashboard,deviceType:this.context.type,isNamedDashboard:this.contextDashboardService.isNamed(this.mo)},e=this.bsModal.show(I,{class:"modal-lg",initialState:t,ignoreBackdropClick:!0}).content,a.label=1;case 1:return a.trys.push([1,5,,6]),n=o.cloneDeep(this.mo),s=n,[4,e.result];case 2:return s.c8y_Dashboard=a.sent(),[4,this.contextDashboardService.update(n)];case 3:return a.sent(),[4,this.contextDashboardService.refreshTabs(n)];case 4:return a.sent(),this.onLoad(),e.close(),[3,6];case 5:return a.sent(),[3,6];case 6:return[2]}}))}))},t.prototype.editWidget=function(t){return v(this,void 0,void 0,(function(){var e,n,s,a,i,o;return m(this,(function(r){switch(r.label){case 0:return e=t.source,n=e.x,s=e.y,a=e.width,i=e.height,[4,this.widgetService.getWidgetDefinition(t.widget.name||t.widget.componentId)];case 1:return(o=r.sent())?[4,this.addWidget(g({},o,{data:g({},o.data,t.widget,{_x:n,_y:s,_width:a,_height:i})}))]:(this.addWidget(),[2]);case 2:return r.sent(),[2]}}))}))},t.prototype.addWidget=function(t){return v(this,void 0,void 0,(function(){var e,n,s;return m(this,(function(a){switch(a.label){case 0:e={mo:this.mo,context:this.context,selected:o.cloneDeep(t)},n=this.bsModal.show(k,{class:"modal-lg",initialState:e,ignoreBackdropClick:!0}).content,a.label=1;case 1:return a.trys.push([1,4,,5]),[4,n.result];case 2:return s=a.sent(),this.mo.c8y_Dashboard.children||(this.mo.c8y_Dashboard.children={}),this.mo.c8y_Dashboard.children[s.id]=s,this.contextDashboardService.update(this.mo),s.classes=this.mergeWidgetClasses(s),[4,this.updateWidget(s)];case 3:return a.sent(),n.close(),[3,5];case 4:return a.sent(),[3,5];case 5:return[2]}}))}))},t.prototype.updateWidget=function(t){return v(this,void 0,void 0,(function(){var e,n,s;return m(this,(function(a){switch(a.label){case 0:return e=o.findIndex(this.widgets,{id:t.id}),n=-1===e,[4,this.mapLegacy(t)];case 1:return s=a.sent(),n?this.widgets.push(s):this.widgets.splice(e,1,s),[2]}}))}))},t.prototype.deleteWidget=function(t){var e=this,s=t.widget,a=t.source;delete this.mo.c8y_Dashboard.children[s.id];var i=this.widgets.find((function(t){return t.id===s.id}));this.widgets.splice(this.widgets.indexOf(i),1),setTimeout((function(){var t=new n.DashboardChildChange(a);t.collapseUpAll(),e.updateDashboardChildren(t)}))},t.prototype.addDashboardClassToBody=function(){var t=this;this.class.split(" ").forEach((function(e){t.renderer.addClass(document.body,e)}))},t.prototype.removeDashboardClassFromBody=function(){var t=this;this.class.split(" ").forEach((function(e){t.renderer.removeClass(document.body,e)}))},t.prototype.toggleFreeze=function(t){return v(this,void 0,void 0,(function(){var e;return m(this,(function(s){switch(s.label){case 0:this.toggleIsFrozenFlag(t),s.label=1;case 1:return s.trys.push([1,3,,4]),[4,this.contextDashboardService.update(this.mo)];case 2:return s.sent(),this.dashboard.isFrozen?this.alert.success(n.gettext("Your dashboard is locked now.")):this.alert.success(n.gettext("Your dashboard is unlocked now.")),[3,4];case 3:return e=s.sent(),this.alert.addServerFailure(e),this.toggleIsFrozenFlag(t),[3,4];case 4:return[2]}}))}))},t.prototype.toggleIsFrozenFlag=function(t){t.isFrozen=!t.isFrozen,this.dashboard.isFrozen=t.isFrozen},t.prototype.loadContextDashboard=function(){var t=this;this.dataSub=this.route.data.subscribe((function(e){var n=e.dashboard;t.context=t.route.parent.snapshot.data.contextData,t.mo=n,t.dashboard=t.mo.c8y_Dashboard,t.onLoad()}))},t.prototype.loadNamedDashboard=function(){var t=this;this.dataSub=this.contextDashboardService.getNamedDashboardOrCreate(this.name,this.defaultWidgets).subscribe((function(e){t.context=t.context||{},t.mo=e,t.dashboard=t.mo.c8y_Dashboard,t.onLoad()}))},t.prototype.onLoad=function(){return v(this,void 0,void 0,(function(){var t,e,n,s,a,i=this;return m(this,(function(r){switch(r.label){case 0:return[4,this.contextDashboardService.canEditDashboard(this.mo)];case 1:return t=r.sent(),this.disabled=!t,e=o.cloneDeep(this.mo.c8y_Dashboard.children),n=this.contextDashboardService.isDeviceType(this.mo),s=g({"c8y-grid-dashboard":!0,dashboard:!0},this.dashboard.classes),a=this,[4,Promise.all(o.values(e).map((function(t){return t.classes=i.mergeWidgetClasses(t),n&&i.applyDeviceTarget(t),i.mapLegacy(t)})))];case 2:return a.widgets=r.sent(),this.class=Object.keys(s).join(" "),this.isLoading=!1,[2]}}))}))},t.prototype.mergeWidgetClasses=function(t){var e=x.find((function(e){return t.classes&&t.classes[e.class]}))?g({},t.classes):g({},this.dashboard.widgetClasses,t.classes);return g({card:!0,"card-dashboard":!0},e)},t.prototype.componentToWidget=function(t){return g({},o.omit(t.data,["componentTransformConfigWithContext","transformConfigWithContext"]),{_x:t.x,_y:t.y,_width:t.width,_height:t.height})},t.prototype.mapLegacy=function(t){return v(this,void 0,void 0,(function(){var e;return m(this,(function(n){switch(n.label){case 0:return[4,this.widgetService.getWidgetDefinition(t.componentId||t.name)];case 1:return e=n.sent(),o.get(e,"data.settings.upgrade")?(t.widgetComponent=e.data.settings.widgetComponent,t.configComponent=e.data.settings.configComponent,t.templateUrl=e.data.settings.templateUrl,t.configTemplateUrl=e.data.settings.configTemplateUrl,t.transformConfigWithContext=e.data.settings.componentTransformConfigWithContext||e.data.settings.transformConfigWithContext):(delete t.templateUrl,delete t.configTemplateUrl),[2,t]}}))}))},t.ctorParameters=function(){return[{type:s.ActivatedRoute},{type:s.Router},{type:T},{type:n.AlertService},{type:e.Renderer2},{type:void 0,decorators:[{type:e.Inject,args:[D]}]},{type:_},{type:l.BsModalService}]},b([e.Input()],t.prototype,"name",void 0),b([e.Input()],t.prototype,"childrenClasses",void 0),b([e.Input()],t.prototype,"context",void 0),b([e.Input()],t.prototype,"setTitle",void 0),b([e.Input()],t.prototype,"disabled",void 0),b([e.Input()],t.prototype,"defaultWidgets",void 0),b([e.Input()],t.prototype,"canDelete",void 0),b([e.Input()],t.prototype,"isLoading",void 0),b([e.HostBinding("class")],t.prototype,"class",void 0),t=b([e.Component({selector:"c8y-context-dashboard",template:'<c8y-action-bar-item [placement]="\'more\'" *ngIf="defaultWidgets.length > 0">\n  <button (click)="restore()" [disabled]="dashboard?.isFrozen || disabled">\n    <i c8yIcon="undo"></i>&nbsp;<span translate>Restore dashboard</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-widgets-dashboard\n  [context]="context"\n  [contextDashboard]="dashboard"\n  [widgets]="widgets"\n  [settings]="{\n    isLoading: isLoading,\n    isFrozen: dashboard?.isFrozen,\n    isDisabled: disabled,\n    canDelete: canDelete,\n    translateWidgetTitle: dashboard?.translateWidgetTitle,\n    allowFullscreen: moduleConfig.allowFullscreen,\n    title: setTitle ? dashboard.name : undefined,\n    widgetMargin: dashboard?.widgetMargin\n  }"\n  (onFreeze)="toggleFreeze($event)"\n  (onChangeDashboard)="updateDashboardChildren($event)"\n  (onAddWidget)="addWidget()"\n  (onEditWidget)="editWidget($event)"\n  (onDeleteWidget)="deleteWidget($event)"\n  (onChangeStart)="addDashboardClassToBody()"\n  (onChangeEnd)="removeDashboardClassFromBody()"\n  (onEditDashboard)="editDashboard()"\n  (onDeleteDashboard)="deleteDashboard()"\n>\n</c8y-widgets-dashboard>\n',host:{style:"\n      display: block;\n    ",class:"dashboard c8y-grid-dashboard"}}),y(5,e.Inject(D))],t)}(),A=function(){function n(t){this.contextDashboardService=t}return n.prototype.canActivate=function(e){return this.contextDashboardService.activateDashboards(e,[t.ContextDashboardType.Group])},n.ctorParameters=function(){return[{type:T}]},n=b([e.Injectable()],n)}(),N=function(){function t(t,e,n,s){this.router=t,this.contextDashboardService=e,this.bsModal=n,this.permissions=s}return t.prototype.get=function(t){return v(this,void 0,void 0,(function(){var e,s,a=this;return m(this,(function(i){switch(i.label){case 0:return e=!t.parent||t.snapshot.data.context?t.snapshot.data:t.parent.snapshot.data,[4,this.isEnabled(e)];case 1:return s=i.sent(),[2,[{label:n.gettext("Add dashboard"),priority:2500,action:function(){return a.addDashboard(e)},disabled:!s}]]}}))}))},t.prototype.addDashboard=function(t){return v(this,void 0,void 0,(function(){var e,s,a,i;return m(this,(function(o){switch(o.label){case 0:t.context===n.ViewContext.Device&&(e={deviceType:t.contextData.type}),s=this.bsModal.show(I,{class:"modal-lg",initialState:e,ignoreBackdropClick:!0}).content,o.label=1;case 1:return o.trys.push([1,5,,6]),[4,s.result];case 2:return a=o.sent(),[4,this.contextDashboardService.create(a,t)];case 3:return i=o.sent(),[4,this.contextDashboardService.navigateToDashboard(i)];case 4:return o.sent(),s.close(),[3,6];case 5:return o.sent(),[3,6];case 6:return[2]}}))}))},t.prototype.isEnabled=function(t){return v(this,void 0,void 0,(function(){return m(this,(function(e){switch(e.label){case 0:return t.contextData&&t.contextData.id?[4,this.permissions.canEdit(["ROLE_INVENTORY_ADMIN","ROLE_INVENTORY_CREATE"],t.contextData)]:[3,2];case 1:return[2,e.sent()&&[n.ViewContext.Device,n.ViewContext.Group].includes(t.context)];case 2:return[2,this.permissions.hasAnyRole(["ROLE_INVENTORY_ADMIN","ROLE_INVENTORY_CREATE"])&&[n.ViewContext.Device,n.ViewContext.Group].includes(t.context)]}}))}))},t.ctorParameters=function(){return[{type:s.Router},{type:T},{type:l.BsModalService},{type:n.Permissions}]},t=b([e.Injectable()],t)}(),R=function(){function t(){this.themeClass="dashboard-theme-light",this.headerClass="panel-title-regular",this.themeClassChange=new e.EventEmitter,this.headerClassChange=new e.EventEmitter,this.possibleStylingTheme=w,this.possibleStylingHeader=x}return t.prototype.themeClassClick=function(t){t=this.resetToDefault(t,this.themeClass,this.defaultThemeClass),this.themeClass=t,this.themeClassChange.emit(t)},t.prototype.headerClassClick=function(t){t=this.resetToDefault(t,this.headerClass,this.defaultHeaderClass),this.headerClass=t,this.headerClassChange.emit(t)},t.prototype.resetToDefault=function(t,e,n){return n&&t===e&&(t=n),t},b([e.Input()],t.prototype,"themeClass",void 0),b([e.Input()],t.prototype,"headerClass",void 0),b([e.Input()],t.prototype,"defaultThemeClass",void 0),b([e.Input()],t.prototype,"defaultHeaderClass",void 0),b([e.Output()],t.prototype,"themeClassChange",void 0),b([e.Output()],t.prototype,"headerClassChange",void 0),b([e.Input()],t.prototype,"possibleStylingTheme",void 0),b([e.Input()],t.prototype,"possibleStylingHeader",void 0),t=b([e.Component({selector:"c8y-appearance-settings",template:'<h6 class="legend form-block"><span translate>Layout</span></h6>\n<div class="row ">\n  <div class="col-sm-6 m-b-32">\n    <label translate>Theme</label>\n    <ul class="list-group" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);">\n      <li\n        class="list-group-item flex-row"\n        style="align-items: center; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05);"\n        *ngFor="let themeClassItem of possibleStylingTheme; let i = index"\n      >\n        <div class="list-item-checkbox">\n          <label class="c8y-radio">\n            <input\n              type="radio"\n              [id]="\'groupradiocontentclass\' + i"\n              name="content"\n              [value]="themeClassItem.class"\n              [ngModel]="themeClass"\n              (click)="themeClassClick(themeClassItem.class)"\n            />\n            <span></span>\n          </label>\n        </div>\n        <label [for]="\'groupradiocontentclass\' + i">\n          <span>{{ themeClassItem.label | translate }}</span>\n          <br />\n          <small *ngIf="themeClassItem.class === defaultThemeClass" class="text-muted" translate\n            >Dashboard default</small\n          >\n        </label>\n        <button class="btn btn-clean flex-item-top"\n          popover="{{ themeClassItem.description | translate }}"\n          container="body"\n          placement="top"\n          triggers="focus">\n          <i \n            [c8yIcon]="\'question-circle-o\'"\n            class="text-primary"\n          ></i>\n        </button>\n      </li>\n    </ul>\n  </div>\n  <div class="col-sm-6">\n    <label translate>Widget header style</label>\n    <ul class="list-group" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);">\n      <li\n        class="list-group-item flex-row"\n        style="align-items: center; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05);"\n        *ngFor="let headerClassItem of possibleStylingHeader; let i = index"\n      >\n        <div class="list-item-checkbox">\n          <label class="c8y-radio">\n            <input\n              type="radio"\n              [id]="\'groupradioheaderclass\' + i"\n              name="header"\n              [value]="headerClassItem.class"\n              [ngModel]="headerClass"\n              (click)="headerClassClick(headerClassItem.class)"\n            />\n            <span></span>\n          </label>\n        </div>\n        <label [for]="\'groupradioheaderclass\' + i">\n          <span>{{ headerClassItem.label | translate }}</span>\n          <br />\n          <small *ngIf="headerClassItem.class === defaultHeaderClass" class="text-muted" translate\n            >Dashboard default</small\n          >\n        </label>\n        <button class="btn btn-clean flex-item-top"\n          popover="{{ headerClassItem.description | translate }}"\n          container="body"\n          placement="top"\n          triggers="focus">\n          <i \n            [c8yIcon]="\'question-circle-o\'"\n            class="text-primary"\n          ></i>\n        </button>\n      </li>\n    </ul>\n  </div>\n</div>\n',viewProviders:[{provide:u.ControlContainer,useExisting:u.NgForm}]})],t)}(),O=function(){function t(){this.previewClasses={"dashboard-theme-light":!0,"panel-title-regular":!0}}return b([e.Input()],t.prototype,"previewClasses",void 0),b([e.Input()],t.prototype,"tab",void 0),t=b([e.Component({selector:"c8y-widget-preview",template:'<div class="legend form-block" translate>Preview</div>\n<label *ngIf="tab" translate>Tab and layout</label>\n<label *ngIf="!tab" translate>Layout</label>\n<div class="dashboard-preview-slot" [ngClass]="previewClasses">\n  <div\n    class="page-tabs page-tabs-horizontal navigator-open"\n    style=" position: absolute; left: 0; margin: 0 15px; overflow: hidden;"\n    *ngIf="tab"\n  >\n    <div class="tabContainer hidden-xs">\n      <ul class="nav nav-tabs nav-tabsc8y">\n        <li class="active" style="left: 16px;">\n          <a routerlinkactive="" title="{{ tab.name }}">\n            <i class="text-primary" [c8yIcon]="tab.icon"></i>\n            <span class="txt">{{ tab.name }}</span></a\n          >\n        </li>\n      </ul>\n    </div>\n    <div class="visible-xs mobile-tabs"></div>\n  </div>\n  <div [ngClass]="{ \'m-t-64\': !!tab }">\n    <div class="card card-dashboard" style="height: 360px;">\n      <div class="card-header-actions" style="z-index: 8;">\n        <div class="card-title">\n          <span translate>Widget title</span>\n        </div>\n        <div class="header-actions">\n          <div class="optionsBtn dropdown">\n            <a href="" (click)="(false)" class="dropdown-toggle c8y-dropdown">\n              <i c8yIcon="cog"></i>\n            </a>\n          </div>\n        </div>\n      </div>\n      <div class="card-inner-scroll p-t-16">\n        <p translate>Widget example content.</p>\n      </div>\n    </div>\n  </div>\n</div>\n'})],t)}(),M={allowFullscreen:!0,widgetFilter:function(t){var e=t.data;return!(e&&e.settings&&e.settings.noNewWidgets)},routes:[{path:"dashboard/:dashboardId",component:E,canActivate:[S],context:n.ViewContext.Device},{path:"dashboard/:dashboardId",component:E,canActivate:[A],context:n.ViewContext.Group}]},L=function(){function t(){}var s;return s=t,t.config=function(t){return void 0===t&&(t={}),{ngModule:s,providers:[{provide:D,useValue:g({},M,t)},T,S,A,{provide:n.HOOK_ONCE_ROUTE,useValue:g({},M,t).routes,multi:!0},{provide:n.HOOK_ACTION,useClass:N,multi:!0}]}},t=s=b([e.NgModule({declarations:[R,E,k,O,I],imports:[n.CoreModule,h.TooltipModule,p.PopoverModule,d.BsDropdownModule.forRoot()],exports:[E,k],entryComponents:[E,k,I]})],t)}(),F=function(){function t(){this.DEFAULT_HOME_WIDGETS=[{name:"cockpit.welcome.widget",title:n.gettext(""),_x:0,_y:0,_height:5,_width:12,classes:{"panel-title-hidden":!0}},{name:"Asset Alarms",title:n.gettext("Active, critical alarms"),_x:0,_y:5,_height:4,_width:6},{name:"Recent Alarms",title:n.gettext("Recent alarms"),_x:0,_y:9,_height:4,_width:6},{name:"Map",title:n.gettext("Map"),_x:6,_y:5,_height:8,_width:6}]}return t=b([e.Component({selector:"c8y-cockpit-dashboard",template:'<c8y-title>\n  {{\'Home\'|translate}}\n</c8y-title>\n\n<c8y-context-dashboard name="home-cockpit1" [defaultWidgets]="DEFAULT_HOME_WIDGETS" [canDelete]="false"></c8y-context-dashboard>\n'})],t)}(),W=function(){function t(t,e,n,s,a){this.tenantService=t,this.docs=e,this.router=n,this.navigator=s,this.applicationService=a,this.quickLinks=[],this.REPORT_NODE="Reports",this.CONFIGURATION_NODE="Configuration",this.TRIAL="TRIAL"}return t.prototype.ngOnInit=function(){return v(this,void 0,void 0,(function(){var t,e=this;return m(this,(function(n){switch(n.label){case 0:return t=this,[4,this.tenantService.currentTenantType()];case 1:return t.tenantType=n.sent(),this.setMessage(),this.navSubscription=this.navigator.items$.subscribe((function(t){e.navNodes=t})),this.docsSubscription=this.docs.items$.subscribe((function(t){e.links=t})),this.createConnectSmartphoneQuickLink(),[4,this.createQuicklinkRegisterDevice()];case 2:return n.sent(),this.tenantType===this.TRIAL?(this.createQuicklinkUserGuide(),[2]):(this.createQuicklinkAddGroup(),this.createQuickLinkReports(),this.createQuicklinkDataPointLibrary(),this.createQuicklinkSmartRules(),[2])}}))}))},t.prototype.ngOnDestroy=function(){this.docsSubscription&&!this.docsSubscription.closed&&this.docsSubscription.unsubscribe(),this.navSubscription&&!this.navSubscription.closed&&this.navSubscription.unsubscribe()},t.prototype.setMessage=function(){this.tenantType===this.TRIAL?this.welcomeMessage=n.gettext("\n        The Cockpit application allows you to build IoT applications in minutes.\n        To get started, connect any device to the platform.\n        If you do not have an IoT device to hand, you can start by connecting your smartphone.\n        Click below to be guided through the process.\n      "):this.welcomeMessage=n.gettext("\n        The Cockpit application provides you with options to manage\n        and monitor Internet of Things assets and data from business perspective.\n      ")},t.prototype.createQuicklinkAddGroup=function(){var t=this.links.find((function(t){return"Add group"===t.label}));t&&this.quickLinks.push(t)},t.prototype.createConnectSmartphoneQuickLink=function(){var t=this.links.find((function(t){return"Connect smartphone"===t.label}));t&&this.quickLinks.push(t)},t.prototype.createQuickLinkReports=function(){var t=this,e={icon:"c8y-reports",label:n.gettext("Reports"),url:"/export"},s=this.findNavigatorNode(this.REPORT_NODE);s&&s.show&&(e.click=function(){s.open=!0,t.router.navigateByUrl(e.url)},this.quickLinks.push(e))},t.prototype.createQuicklinkDataPointLibrary=function(){var t=this,e={icon:"c8y-data-points",label:n.gettext("Data point library"),url:"/datapointlibrary"},s=this.findNavigatorNode(this.CONFIGURATION_NODE);s&&s.show&&(e.click=function(){s.open=!0,t.router.navigateByUrl(e.url)},this.quickLinks.push(e))},t.prototype.createQuicklinkSmartRules=function(){var t=this,e={icon:"c8y-smart-rules",label:n.gettext("Smart rules"),url:"/rules"},s=this.findNavigatorNode(this.CONFIGURATION_NODE);s&&s.show&&(e.click=function(){s.open=!0,t.router.navigateByUrl(e.url)},this.quickLinks.push(e))},t.prototype.createQuicklinkRegisterDevice=function(){return v(this,void 0,void 0,(function(){var t,e,s,a;return m(this,(function(i){switch(i.label){case 0:return[4,this.applicationService.listByUser()];case 1:return(t=i.sent().data)&&(e=t.find((function(t){return"devicemanagement"===t.contextPath})))&&(s=this.applicationService.getHref(e),a={icon:"c8y-device-connect",label:n.gettext("Register device"),click:function(){return window.open(s+"/#/deviceregistration","_self")}},this.quickLinks.push(a)),[2]}}))}))},t.prototype.createQuicklinkUserGuide=function(){var t=this,e={icon:"c8y-user",label:n.gettext("User guide"),url:"/users-guide/getting-started",click:function(){var n=t.docs.getUserGuideLink(e.url);window.open(n)}};this.quickLinks.push(e)},t.prototype.findNavigatorNode=function(t){if(this.navNodes&&this.navNodes.length>0)return this.navNodes.find((function(e){return e.realName===t}))},t.ctorParameters=function(){return[{type:a.TenantService},{type:n.DocsService},{type:s.Router},{type:n.NavigatorService},{type:a.ApplicationService}]},b([e.Input()],t.prototype,"config",void 0),t=b([e.Component({selector:"c8y-welcome-to-cockpit",template:'<div class="welcome-widget welcome-cockpit">\r\n  <div class="flex-row">\r\n    <div class="col-xs-12 col-md-5 flex-item-v-stretch p-24">\r\n      <h2 class="text-light">{{ \'Welcome to Cockpit\' | translate }}</h2>\r\n      <p class="text-16 text-light p-t-16 p-b-24">{{ welcomeMessage | translate }}</p>\r\n      <div class="card-group interact-grid tight-grid">\r\n        <div *ngFor="let link of quickLinks" class="col-sm-4 col-xs-6">\r\n          <c8y-quick-link\r\n            (click)="link.click ? link.click() : false"\r\n            [icon]="link.icon"\r\n            [label]="link.label"\r\n            class="card"\r\n          >\r\n          </c8y-quick-link>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    \x3c!-- <div class="col-sm-6 welcome-illustration flex-item-v-stretch"></div> --\x3e\r\n  </div>\r\n</div>\r\n'})],t)}(),P=function(){function t(t){this.dashboard=t}return t.prototype.restore=function(){this.dashboard.restore()},t.ctorParameters=function(){return[{type:E,decorators:[{type:e.Host}]}]},t=b([e.Component({selector:"c8y-legacy-welcome-widget",template:'<div class="card-block">\r\n  <p class="lead" c8y-guide-docs>\r\n    <span>{{ \'Welcome to Cockpit\' | translate }}.</span>\r\n    <span title="{{ \'Browse the manual\' | translate }}" class="cockpit-welcome-manual" translate\r\n      >Browse the manual <a c8y-guide-href="users-guide/cockpit/">here</a>.</span\r\n    >\r\n  </p>\r\n  <p class="m-t-16">\r\n    <em>{{ \'New default dashboard available.\' | translate }} </em>\r\n  </p>\r\n  <button class="btn btn-primary btn-sm m-t-16" (click)="restore(); (false)" translate>\r\n    Get new dashboard\r\n  </button>\r\n</div>\r\n'}),y(0,e.Host())],t)}(),G="";try{G=require("./welcome/img/welcome-widget-pr.png")}catch(t){}var H=[{label:n.gettext("Home"),icon:"home",priority:1e4,path:"/"}],B=[{id:"cockpit.welcome.widget",label:n.gettext("Welcome to Cockpit"),description:n.gettext("Displays a welcome message for Cockpit"),component:W,previewImage:G,data:{settings:{noNewWidgets:!1,widgetDefaults:{_width:12,_height:6},ng1:{options:{noDeviceTarget:!0,groupsSelectable:!1}}}}}],j=[{id:"Cockpit Welcome",label:n.gettext("Welcome to Cockpit"),description:n.gettext("Displays a welcome message for Cockpit"),component:P,data:{settings:{noNewWidgets:!0,ng1:{options:{noDeviceTarget:!0,groupsSelectable:!1}}}}}],U=function(){function t(){}return t=b([e.NgModule({entryComponents:[F,W,P],imports:[n.DocsModule,n.CoreModule,L.config({routes:[{path:"dashboard/:dashboardId",component:E,canActivate:[S],context:n.ViewContext.Device},{path:"dashboard/:dashboardId",component:E,canActivate:[A],context:n.ViewContext.Group},{path:"",component:F}]}),n.QuickLinkModule,i.TranslateModule],declarations:[F,W,P],providers:[{provide:n.HOOK_NAVIGATOR_NODES,useValue:H,multi:!0},{provide:n.HOOK_COMPONENTS,multi:!0,useValue:B},{provide:n.HOOK_COMPONENTS,multi:!0,useValue:j}]})],t)}();t.CONTEXT_DASHBOARD_CONFIG=D,t.CockpitDashboardModule=U,t.ContextDashboardModule=L,t.ContextDashboardService=T,t.DASHBOARD_THEME_CLASSES=w,t.DeviceDashboardGuard=S,t.GroupDashboardGuard=A,t.WIDGET_CONTENT_CLASSES=C,t.WIDGET_HEADER_CLASSES=x,t.ɵ0=H,t.ɵ1=B,t.ɵ2=j,t.ɵa=R,t.ɵb=E,t.ɵc=_,t.ɵd=k,t.ɵe=O,t.ɵf=I,t.ɵg=N,t.ɵh=F,t.ɵi=W,t.ɵj=P,Object.defineProperty(t,"__esModule",{value:!0})}));
+    ***************************************************************************** */var g=function(){return(g=Object.assign||function(t){for(var e,n=1,s=arguments.length;n<s;n++)for(var a in e=arguments[n])Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t}).apply(this,arguments)};function b(t,e,n,s){var a,i=arguments.length,o=i<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,n):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,n,s);else for(var r=t.length-1;r>=0;r--)(a=t[r])&&(o=(i<3?a(o):i>3?a(e,n,o):a(e,n))||o);return i>3&&o&&Object.defineProperty(e,n,o),o}function y(t,e){return function(n,s){e(n,s,t)}}function v(t,e,n,s){return new(n||(n=Promise))((function(a,i){function o(t){try{c(s.next(t))}catch(t){i(t)}}function r(t){try{c(s.throw(t))}catch(t){i(t)}}function c(t){t.done?a(t.value):new n((function(e){e(t.value)})).then(o,r)}c((s=s.apply(t,e||[])).next())}))}function m(t,e){var n,s,a,i,o={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]};return i={next:r(0),throw:r(1),return:r(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function r(i){return function(r){return function(i){if(n)throw new TypeError("Generator is already executing.");for(;o;)try{if(n=1,s&&(a=2&i[0]?s.return:i[0]?s.throw||((a=s.return)&&a.call(s),0):s.next)&&!(a=a.call(s,i[1])).done)return a;switch(s=0,a&&(i=[2&i[0],a.value]),i[0]){case 0:case 1:a=i;break;case 4:return o.label++,{value:i[1],done:!1};case 5:o.label++,s=i[1],i=[0];continue;case 7:i=o.ops.pop(),o.trys.pop();continue;default:if(!(a=(a=o.trys).length>0&&a[a.length-1])&&(6===i[0]||2===i[0])){o=0;continue}if(3===i[0]&&(!a||i[1]>a[0]&&i[1]<a[3])){o.label=i[1];break}if(6===i[0]&&o.label<a[1]){o.label=a[1],a=i;break}if(a&&o.label<a[2]){o.label=a[2],o.ops.push(i);break}a[2]&&o.ops.pop(),o.trys.pop();continue}i=e.call(t,o)}catch(t){i=[6,t],s=0}finally{n=a=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,r])}}}var f,D=new e.InjectionToken("ContextDashboardConfig");(f=t.ContextDashboardType||(t.ContextDashboardType={})).Device="device",f.DeviceType="type",f.Group="group",f.Named="name";var x=[{label:n.gettext("Regular`style`"),class:"panel-title-regular",description:n.gettext("The widget has no border between header and content.")},{label:n.gettext("Border`style`"),class:"panel-title-border",description:n.gettext("The widget has a small separation border between header and content.")},{label:n.gettext("Overlay`style`"),class:"panel-title-overlay",description:n.gettext("The widget content overlays the header.")},{label:n.gettext("Hidden`style`"),class:"panel-title-hidden",description:n.gettext("The widget header is not shown.")}],C=[{label:n.gettext("Light`style`"),class:"panel-content-light",description:n.gettext("The widget is styled with a light background and has low contrast.")},{label:n.gettext("Dark`style`"),class:"panel-content-dark",description:n.gettext("The widget is styled with a dark background and has high contrast.")},{label:n.gettext("Transparent`style`"),class:"panel-content-transparent",description:n.gettext("The widget is styled with a transparent background and therefore is border-less.")},{label:n.gettext("Branded`style`"),class:"panel-content-branded",description:n.gettext("The widget is styled with the main brand color.")}],w=[{label:n.gettext("Light`theme`"),class:"dashboard-theme-light",description:n.gettext("The dashboard is styled with a light background and has low contrast.")},{label:n.gettext("Dark`theme`"),class:"dashboard-theme-dark",description:n.gettext("The dashboard is styled with a dark background and has high contrast.")},{label:n.gettext("Transparent`theme`"),class:"dashboard-theme-transparent",description:n.gettext("The dashboard is styled with a transparent background and therefore is border-less.")},{label:n.gettext("Branded`theme`"),class:"dashboard-theme-branded",description:n.gettext("The dashboard is styled with the main brand color.")}],T=function(){function l(t,e,n,s,a,i,o,r){this.inventory=t,this.tabs=e,this.modal=n,this.translateService=s,this.router=a,this.user=i,this.appState=o,this.permissions=r,this.cache=new Map,this.DEFAULT_PAGESIZE=1e3,this.FRAGMENT_NAME="c8y_Dashboard",this.DASHBOARD_ROUTE_PATH="dashboard",this.INDEX_SPLIT="!",this._formDisabled=!0}return Object.defineProperty(l.prototype,"formDisabled",{get:function(){return this._formDisabled},set:function(t){this._formDisabled=t},enumerable:!0,configurable:!0}),l.prototype.create=function(e,n){return v(this,void 0,void 0,(function(){var s,a,i,r,c,l;return m(this,(function(d){switch(d.label){case 0:return"string"==typeof n?(s=n,a=t.ContextDashboardType.Named):(s=n.contextData.id,a=this.getDashboardTypeFromViewContext(e,n)),i={},o.assign(i,{c8y_Dashboard:e}),r=a===t.ContextDashboardType.DeviceType?e.deviceTypeValue:s,c=this.createFragmentKey(a,r),i[c]={},this.shouldSetGlobal(i)&&o.assign(i,{c8y_Global:{}}),a!==t.ContextDashboardType.Group&&a!==t.ContextDashboardType.Device?[3,2]:[4,this.inventory.childAdditionsCreate(i,s)];case 1:return l=d.sent(),[3,4];case 2:return[4,this.inventory.create(i)];case 3:l=d.sent(),d.label=4;case 4:return[2,l.data]}}))}))},l.prototype.detail=function(t){return v(this,void 0,void 0,(function(){var e;return m(this,(function(n){switch(n.label){case 0:return[4,this.inventory.detail(t)];case 1:return e=n.sent().data,this.cache.set(t.id,e),[2,e]}}))}))},l.prototype.update=function(t){return v(this,void 0,void 0,(function(){var e,n;return m(this,(function(s){switch(s.label){case 0:return(e=this.clean(o.pick(t,[this.FRAGMENT_NAME,"id"]))).c8y_Global=this.shouldSetGlobal(t),[4,this.inventory.update(e)];case 1:return n=s.sent().data,this.cache.set(t.id,n),[2,n]}}))}))},l.prototype.delete=function(t){return v(this,void 0,void 0,(function(){var e,s,a=this;return m(this,(function(i){switch(i.label){case 0:return i.trys.push([0,3,,4]),e=n.gettext('You are about to delete the dashboard "{{ dashboardName }}". Do you want to proceed?'),this.isDeviceType(t)&&(e=n.gettext('You are about to delete the dashboard "{{ dashboardName }}" from all devices of the type "{{ deviceType }}".\n           Do you want to proceed?')),[4,this.modal.confirm(n.gettext("Delete dashboard"),this.translateService.instant(e,{dashboardName:t.c8y_Dashboard.name,deviceType:t.c8y_Dashboard.deviceTypeValue}),n.Status.DANGER,{ok:n.gettext("Delete"),cancel:n.gettext("Cancel")})];case 1:return i.sent(),[4,this.inventory.delete(t)];case 2:return i.sent(),s=Array.from(this.tabs.state).find((function(e){return e.path.endsWith(a.DASHBOARD_ROUTE_PATH+"/"+t.id)})),this.tabs.remove(s),this.tabs.refresh(),[3,4];case 3:return i.sent(),[3,4];case 4:return[2]}}))}))},l.prototype.activateDashboards=function(t,e){var n=t.params.dashboardId;return n?this.getDashboard$(n,e,t.parent.data.contextData).pipe(c.tap((function(e){t.data={dashboard:e}})),c.map((function(){return!0})),c.catchError((function(){return r.of(!1)}))):this.getTabs$(t.data.contextData,e)},l.prototype.getNamedDashboardOrCreate=function(e,n){var s=this,a=this.mapWidgets(n);return this.getDashboard$(e,[t.ContextDashboardType.Named]).pipe(c.throwIfEmpty(),c.catchError((function(){return r.from(s.create({children:a},e))})))},l.prototype.refreshTabs=function(t){return v(this,void 0,void 0,(function(){var e,n,s,a,i,o,r=this;return m(this,(function(c){switch(c.label){case 0:return this.isNamed(t)?[3,2]:(e=Array.from(this.tabs.state).find((function(e){return e.path.endsWith(r.DASHBOARD_ROUTE_PATH+"/"+t.id)})),[4,this.detail(t)]);case 1:n=c.sent(),e&&(s=n.c8y_Dashboard,a=s.icon,i=s.priority,o=s.name,e.icon=a,e.priority=i,e.label=o),this.tabs.refresh(),c.label=2;case 2:return[2]}}))}))},l.prototype.navigateToDashboard=function(t){return v(this,void 0,void 0,(function(){return m(this,(function(e){return/dashboard/.test(this.router.url)?this.router.navigate(["..",t.id],{relativeTo:n.getActivatedRoute(this.router)}):this.router.navigate(["..","dashboard",t.id],{relativeTo:n.getActivatedRoute(this.router)}),[2]}))}))},l.prototype.canEditDashboard=function(t){return this.permissions.canEdit(["ROLE_INVENTORY_ADMIN","ROLE_INVENTORY_CREATE"],t)},l.prototype.isNamed=function(e){var n=this;return o.some(o.keys(e),(function(e){return new RegExp("^"+n.FRAGMENT_NAME+n.INDEX_SPLIT+t.ContextDashboardType.Named+n.INDEX_SPLIT).test(e)}))},l.prototype.isDeviceType=function(e){var n=this;return o.some(o.keys(e),(function(e){return new RegExp("^"+n.FRAGMENT_NAME+n.INDEX_SPLIT+t.ContextDashboardType.DeviceType+n.INDEX_SPLIT).test(e)}))},l.prototype.getStyling=function(t,e,n){var s=t.find((function(t){return t&&new RegExp(e,"i").test(t.class)}));return s?s.class:n},l.prototype.mapWidgets=function(t){return o.keyBy(t.map((function(t){return t.id=String(Math.random()).substr(2),t})),"id")},l.prototype.getDashboard$=function(e,n,s){var a=this,i=this.cache.get(e),l=s?this.getContextDashboards(s,n):[this.getNamedDashboard(e)],d=this.getContextDashboards$(l).pipe(c.tap((function(t){return a.cacheDashboard(t)})),c.filter((function(n){return n.id===e||o.has(n,""+a.FRAGMENT_NAME+a.INDEX_SPLIT+t.ContextDashboardType.Named+a.INDEX_SPLIT+e)})));return i?r.of(i):d},l.prototype.getTabs$=function(t,e){var n=this,s=this.getContextDashboards(t,e);return this.setBaseContextRoute(t,e),this.getContextDashboards$(s).pipe(c.map((function(t){return n.removeDashboardMoProperty(t)})),c.tap((function(t){return n.cacheDashboard(t)})),c.map((function(t){return n.createDashboardTab(t)})),c.toArray())},l.prototype.getContextDashboards$=function(t){return r.from(t).pipe(c.mergeAll(),c.mergeMap((function(t){return t.data})))},l.prototype.setBaseContextRoute=function(e,n){var s=n.includes(t.ContextDashboardType.Device)?t.ContextDashboardType.Device:t.ContextDashboardType.Group;this.currentContextRoute=s+"/"+e.id},l.prototype.removeDashboardMoProperty=function(t){var e=o.cloneDeep(t),n=o.get(e,"c8y_Dashboard.children"),s=!1;return o.forEach(n,(function(t){o.get(t,"componentTransformConfigWithContext")&&(delete t.componentTransformConfigWithContext,s=!0),o.get(t,"config.dashboardMo")&&(delete t.config.dashboardMo,s=!0)})),s&&this.update(e),e},l.prototype.cacheDashboard=function(t){this.cache.set(t.id,t)},l.prototype.createDashboardTab=function(t){var e=t.c8y_Dashboard,n=t.id;return{icon:e.icon,path:this.DASHBOARD_ROUTE_PATH+"/"+n,label:e.name,priority:e.priority}},l.prototype.clean=function(t){var e=JSON.stringify(t,(function(t,e){if("$$hashKey"!==t&&"klasses"!==t)return e}));return JSON.parse(e)},l.prototype.getNamedDashboard=function(e){return this.inventory.list({fragmentType:""+this.FRAGMENT_NAME+this.INDEX_SPLIT+t.ContextDashboardType.Named+this.INDEX_SPLIT+e,pageSize:1})},l.prototype.getContextDashboards=function(e,n){var s=this;return n.map((function(n){return s.inventory.list({fragmentType:""+s.FRAGMENT_NAME+s.INDEX_SPLIT+n+s.INDEX_SPLIT+(n===t.ContextDashboardType.DeviceType?e.type:e.id),pageSize:s.DEFAULT_PAGESIZE})}))},l.prototype.getDashboardTypeFromViewContext=function(e,s){var a;return s.context===n.ViewContext.Device&&(a=e.deviceType?t.ContextDashboardType.DeviceType:t.ContextDashboardType.Device),s.context===n.ViewContext.Group&&(a=t.ContextDashboardType.Group),a},l.prototype.createFragmentKey=function(t,e){return[this.FRAGMENT_NAME,t,e].join(this.INDEX_SPLIT)},l.prototype.shouldSetGlobal=function(t){return this.isNamed(t)||this.isDeviceType(t)?{}:null},l.ctorParameters=function(){return[{type:a.InventoryService},{type:n.TabsService},{type:n.ModalService},{type:i.TranslateService},{type:s.Router},{type:a.UserService},{type:n.AppStateService},{type:n.Permissions}]},l=b([e.Injectable()],l)}(),S=function(){function n(t){this.contextDashboardService=t}return n.prototype.canActivate=function(e){return this.contextDashboardService.activateDashboards(e,[t.ContextDashboardType.Device,t.ContextDashboardType.DeviceType])},n.ctorParameters=function(){return[{type:T}]},n=b([e.Injectable()],n)}(),I=function(){function t(t,e,n){var s=this;this.modal=t,this.contextDashboardService=n,this.styling={themeClass:"dashboard-theme-light",headerClass:"panel-title-regular"},this.possibleStyling={DASHBOARD_THEME_CLASSES:w,WIDGET_HEADER_CLASSES:x},this.result=new Promise((function(t,e){s._save=t,s._cancel=e})),this.DEFAULT_DASHBOARD_MARGIN=12,this.DEFAULT_DASHBOARD_ICON="th",this.DEFAULT_DASHBOARD_PRIORITY=1e4,this.DEFAULT_DASHBOARD_NAME="Dashboard",this.icons=e,this.filteredIcons=e}return t.prototype.ngAfterContentInit=function(){var t={name:this.DEFAULT_DASHBOARD_NAME,priority:this.DEFAULT_DASHBOARD_PRIORITY,icon:this.DEFAULT_DASHBOARD_ICON,deviceTypeValue:this.deviceType};this.dashboard?(this.current=o.clone(this.dashboard),this.setDashboardStyle()):(this.dashboard=t,this.dashboardDetailForm.form.markAsDirty())},t.prototype.save=function(){var t,e;this.dashboard.classes=((t={})[this.styling.themeClass]=!0,t),this.dashboard.widgetClasses=((e={})[this.styling.headerClass]=!0,e),this._save(this.dashboard)},t.prototype.close=function(){this._cancel(),this.modal.hide()},t.prototype.getDashboardPreviewStyle=function(){var t={};return t[this.styling.headerClass]=!0,t[this.styling.themeClass]=!0,t},t.prototype.selectIcon=function(t){this.dashboard.icon=t,this.dashboardDetailForm.form.markAsDirty()},t.prototype.updateFiltered=function(t){if(t){var e=new RegExp(t,"i");this.filteredIcons=this.icons.filter((function(t){return e.test(t)}))}else this.filteredIcons=this.icons},t.prototype.setDashboardStyle=function(){var t=this,e=g({},this.dashboard.classes,this.dashboard.widgetClasses);Object.keys(e).map((function(t){return t.split("-").pop()})).forEach((function(e){t.styling.themeClass=t.contextDashboardService.getStyling(w,e,t.styling.themeClass),t.styling.headerClass=t.contextDashboardService.getStyling(x,e,t.styling.headerClass)}))},t.ctorParameters=function(){return[{type:l.BsModalRef},{type:Array,decorators:[{type:e.Inject,args:[n.ICON_LIST]}]},{type:T}]},b([e.ViewChild("dashboardDetailForm",{static:!0})],t.prototype,"dashboardDetailForm",void 0),t=b([e.Component({selector:"c8y-dashboard-detail",template:'<div class="modal-header">\n  <h3 *ngIf="!current" translate>\n    Add dashboard\n  </h3>\n  <h3 *ngIf="current" translate>Edit dashboard</h3>\n</div>\n\n<div class="modal-body">\n  <form #dashboardDetailForm="ngForm">\n    <div class="row">\n      <div class="col-sm-6">\n        <div *ngIf="!isNamedDashboard">\n          <h6 class="legend form-block"><span translate>Tab</span></h6>\n          <div class="input-group">\n            <c8y-form-group>\n              <label class="m-r-8" translate>Icon</label>\n              <div dropdown class="dropdown">\n                <button\n                  title="{{ \'Icon\' | translate }}"\n                  class="btn-default btn btn-gray"\n                  dropdownToggle\n                >\n                  <i c8yIcon="{{dashboard.icon}}"></i>\n                  <span class="caret"></span> \n                </button>                  \n                <ul\n                  *dropdownMenu\n                  class="dropdown-menu modal-inner-scroll dropdown-menu-grid-4"\n                  style="max-height: 250px;margin-left: 0;"\n                >\n                  <ng-container *ngFor="let icon of filteredIcons">\n                    <li (click)="selectIcon(icon)">\n                      <a style="cursor: pointer" title="{{icon}}" [ngClass]="{\'active\': dashboard.icon === icon}">\n                        <i class="icon" [c8yIcon]="icon" ></i>\n                      </a>\n                    </li>\n                  </ng-container>\n                </ul>\n              </div>\n            </c8y-form-group>\n            <c8y-form-group class="flex-grow">\n              <label>\n                <span class="m-r-4" translate>Menu label</span>\n                <button class="btn btn-clean"\n                  popover="{{\n                    \'Menu label to display in submenu when dashboard is attached\' | translate\n                  }}"\n                  triggers="focus"\n                  placement="right"\n                  container="body"\n                >\n                  <i\n                    [c8yIcon]="\'question-circle-o\'"\n                    class="text-primary"\n                  ></i>\n                </button>\n              </label>\n              <input\n                title="{{ \'Menu label\' | translate }}"\n                class="form-control"\n                name="name"\n                [(ngModel)]="dashboard.name"\n                placeholder="{{ \'e.g. My dashboard\' | translate }}"\n                required\n              />\n            </c8y-form-group>\n          </div>\n          <div class="row">\n            <div class="col-sm-6">\n              <c8y-form-group>\n                <label>\n                  <span translate class="m-r-4">Position in navigation</span>\n                  <button class="btn btn-clean"\n                    popover="{{\n                      \'Position in navigation menu (10000 first, -10000 last)\' | translate\n                    }}"\n                    triggers="focus"\n                    placement="right"\n                    container="body"\n                  >\n                    <i \n                      [c8yIcon]="\'question-circle-o\'"\n                      class="text-primary"\n                    ></i>\n                  </button>\n                  \n                </label>\n                <input\n                  title="{{ \'Position in navigation\' | translate }}"\n                  type="number"\n                  class="form-control"\n                  name="priority"\n                  [(ngModel)]="dashboard.priority"\n                  min="-10000"\n                  max="10000"\n                  placeholder="{{ \'e.g.\' | translate }} 500"\n                  required\n                />\n              </c8y-form-group>\n            </div>\n            <div class="col-sm-6">\n             \n            </div>\n\n            <div style="position: relative;">\n              <div class="col-sm-12">\n                <div class="form-group m-b-24" *ngIf="!current && deviceType">\n                  <label class="c8y-checkbox">\n                    <input type="checkbox" name="deviceType" [(ngModel)]="dashboard.deviceType" />\n                    <span></span>\n                    {{ \'Apply dashboard to all devices of type \' | translate\n                    }}<i>{{ dashboard.deviceTypeValue }}</i>\n                  </label>\n                </div>\n\n                <div\n                  class="alert alert-info  m-b-24"\n                  *ngIf="dashboard.deviceType && dashboard.deviceTypeValue"\n                >\n                  <i c8y-icon="info"></i>\n                  {{ \'This dashboard is shared between all devices of the type \' | translate }}\n                  <i>{{ dashboard.deviceTypeValue }}</i>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div>\n          <c8y-appearance-settings\n            [(themeClass)]="styling.themeClass"\n            [(headerClass)]="styling.headerClass"\n          >\n          </c8y-appearance-settings>\n          <div class="row">\n            <div class="col-sm-6">\n              <c8y-form-group>\n                <label>{{ \'Widget margin\' | translate }}</label>\n                <div class="input-group">\n                  <input\n                    title="{{ \'Widget margin\' | translate }}"\n                    id="margin"\n                    name="margin"\n                    type="number"\n                    class="form-control"\n                    [(ngModel)]="dashboard.widgetMargin"\n                    min="0"\n                    max="50"\n                    placeholder="{{ DEFAULT_DASHBOARD_MARGIN }}"\n                  />\n                  <span class="input-group-addon">px</span>\n                </div>\n              </c8y-form-group>\n            </div>\n            <div class="col-sm-6">\n              <label translate>Widget titles</label>\n              <c8y-form-group>\n                <label\n                  title="{{ \'Translate widget titles if possible\' | translate }}"\n                  class="c8y-checkbox"\n                >\n                  <input\n                    type="checkbox"\n                    name="translateWidgetTitle"\n                    [(ngModel)]="dashboard.translateWidgetTitle"\n                  /><span></span>\n                  <span>{{ \'Translate if possible\' | translate }}</span>\n                </label>\n              </c8y-form-group>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div class="col-sm-6">\n        <c8y-widget-preview\n          [tab]="!isNamedDashboard ? dashboard : undefined"\n          [previewClasses]="getDashboardPreviewStyle()"\n        ></c8y-widget-preview>\n      </div>\n    </div>\n  </form>\n</div>\n\n<div class="modal-footer">\n  <button title="{{ \'Cancel\' | translate }}" class="btn btn-default" (click)="close()" translate>\n    Cancel\n  </button>\n  <button\n    title="{{ \'Save\' | translate }}"\n    class="btn btn-primary"\n    (click)="save()"\n    [disabled]="dashboardDetailForm.form.invalid || dashboardDetailForm.form.pristine"\n    translate\n  >\n    Save\n  </button>\n</div>\n'}),y(1,e.Inject(n.ICON_LIST))],t)}(),_=function(){function t(t,e,n){this.dynamicComponentService=t,this.translateService=e,this.moduleConfig=n}return t.prototype.getWidgetDefinition=function(t){return v(this,void 0,void 0,(function(){return m(this,(function(e){return[2,this.dynamicComponentService.getById$(t).toPromise()]}))}))},t.prototype.getWidgetDefinitions=function(){var t=this,e=Array.from(this.dynamicComponentService.state).map((function(e){return g({},e,{label:t.translateService.instant(e.label)})}));return o.cloneDeep(o.sortBy(e,"label").filter(this.moduleConfig.widgetFilter))},t.ctorParameters=function(){return[{type:n.DynamicComponentService},{type:i.TranslateService},{type:void 0,decorators:[{type:e.Inject,args:[D]}]}]},t.ngInjectableDef=e.ɵɵdefineInjectable({factory:function(){return new t(e.ɵɵinject(n.DynamicComponentService),e.ɵɵinject(i.TranslateService),e.ɵɵinject(D))},token:t,providedIn:"root"}),t=b([e.Injectable({providedIn:"root"}),y(2,e.Inject(D))],t)}(),k=function(){function t(t,e,n){var s=this;this.widgetService=t,this.modal=e,this.contextDashboardService=n,this.mode="select",this.searchChange$=new r.Subject,this.searchTerm="",this.styling={headerClass:"panel-title-regular",contentClass:"panel-content-light"},this.defaultStyling={headerClass:"panel-title-regular",contentClass:"panel-content-light"},this.possibleStyling={WIDGET_HEADER_CLASSES:x,WIDGET_CONTENT_CLASSES:C},this.isUpgrade=!1,this.result=new Promise((function(t,e){s._save=t,s._cancel=e}))}return Object.defineProperty(t.prototype,"isEdit",{get:function(){return!!this.current},enumerable:!0,configurable:!0}),t.prototype.ngAfterContentInit=function(){var t=this;this.components=this.widgetService.getWidgetDefinitions(),this.selected&&(this.current=o.clone(this.selected),this.select(this.selected,this.isEdit?"config":"select")),this.searchSub=this.searchChange$.pipe(c.switchMap((function(t){return r.iif((function(){return 13!==t.which}),r.timer(200),r.timer(10))}))).subscribe((function(){t.search()})),this.mo.c8y_Dashboard.classes&&(this.styling=this.setDefaultStyle(g({},this.mo.c8y_Dashboard.classes,this.mo.c8y_Dashboard.widgetClasses,this.isEdit?this.current.data.classes:{})),this.defaultStyling=this.setDefaultStyle(g({},this.mo.c8y_Dashboard.classes,this.mo.c8y_Dashboard.widgetClasses)))},t.prototype.save=function(){var t=this.selected.data,e=t._x,n=t._y,s=t._width,a=t._height;if(this.widgetConfig&&this.widgetConfig.device){var i=this.widgetConfig.device,r=i.id,c=i.name;this.widgetConfig.device={id:r,name:c}}var l=g({_x:e,_y:n,_width:s,_height:a,config:o.omit(this.widgetConfig,"settings"),title:this.selected.data.title,componentId:this.selected.id,id:this.isEdit?this.current.data.id:String(Math.random()).substr(2),classes:this.getStyle()},this.isEdit?{}:this.widgetConfig.settings.widgetDefaults);this._save(l)},t.prototype.select=function(t,e){if(void 0===e&&(e="config"),t.data=t.data||{},this.selected=t,this.isUpgrade=!!o.get(t,"data.settings.upgrade"),this.contextDashboardService.formDisabled=this.isUpgrade,this.isEdit){var n=this.current.data,s=n._x,a=n._y,i=n._width,r=n._height,c=n.classes,l=n.title;this.selected.data=g({},this.selected.data,{_x:s,_y:a,_width:i,_height:r,classes:c,title:l})}this.widgetConfig=o.cloneDeep(this.composeWidgetConfig(this.selected,this.context)),this.selected.data.title=this.selected.data.title||t.label,this.componentLabel=t.label,this.mode=e},t.prototype.search=function(){var t=this;this.searchTerm.length>0?this.searchResult=this.components.filter((function(e){return new RegExp(o.escapeRegExp(t.searchTerm.trim()),"i").test(e.label)})):this.resetSearch()},t.prototype.resetSearch=function(){this.searchTerm="",this.searchResult=void 0},t.prototype.changeMode=function(t){this.mode=t},t.prototype.close=function(){this._cancel(),this.modal.hide()},t.prototype.getStyle=function(t){void 0===t&&(t=!1);var e={};return!t&&this.isDashboardDefaultStyle(this.styling.headerClass)||(e[this.styling.headerClass]=!0),!t&&this.isDashboardDefaultStyle(this.styling.contentClass)||(e[this.styling.contentClass]=!0),t&&(e["dashboard-theme-"+this.defaultStyling.contentClass.split("-").pop()]=!0),e},t.prototype.ngOnDestroy=function(){this.contextDashboardService.formDisabled=!0,this.searchSub&&this.searchSub.unsubscribe()},t.prototype.isDashboardDefaultStyle=function(t){var e=g({},this.mo.c8y_Dashboard.classes,this.mo.c8y_Dashboard.widgetClasses),n=Object.keys(e).map((function(t){return{class:t}}));return!!this.contextDashboardService.getStyling(n,t.split("-").pop(),void 0)},t.prototype.setDefaultStyle=function(t){var e=this,n=this.styling.contentClass,s=this.styling.headerClass;return Object.keys(t).map((function(t){return t.split("-").pop()})).forEach((function(t){n=e.contextDashboardService.getStyling(C,t,n),s=e.contextDashboardService.getStyling(x,t,s)})),{headerClass:s,contentClass:n}},t.prototype.composeWidgetConfig=function(t,e){void 0===e&&(e={});var n=g({settings:g({},t.data.settings,o.get(t.data.settings,"ng1.options"),o.get(t.data,"ng1.options"),{context:e,dashboardMo:this.mo.c8y_Dashboard})},t.data.config);return this.applyTargetIfDeviceDashboard(n)},t.prototype.applyTargetIfDeviceDashboard=function(t){var e=this.contextDashboardService.isDeviceType(this.mo);e&&(t.settings.hideTarget=e,(t.settings.ng1?t.settings.ng1.options.noDeviceTarget:t.settings.noDeviceTarget)||(t.device={id:this.context.id,name:this.context.name}));return t},t.ctorParameters=function(){return[{type:_},{type:l.BsModalRef},{type:T}]},t=b([e.Component({selector:"c8y-widget-config",template:'<div class="modal-header separator">\n  <h3 *ngIf="!current" translate>Add widget</h3>\n  <h3 *ngIf="current" translate>Edit widget</h3>\n</div>\n<form #configForm="ngForm" name="form">\n  <div class="c8y-modal-tabs">\n    <div class="tabContainer">\n      <ul class="nav nav-tabs nav-tabsc8y p-l-24">\n        <li [class.active]="mode === \'select\'">\n          <button type="button" class="btn" (click)="changeMode(\'select\'); (false)">\n            <i c8yIcon="th-large"></i> <span class="txt" translate>Select widget</span>\n          </button>\n        </li>\n        <li [class.active]="mode === \'config\'">\n          <button\n            type="button"\n            class="btn"\n            [disabled]="!selected"\n            (click)="changeMode(\'config\'); (false)"\n          >\n            <i c8yIcon="cog"></i> <span class="txt" translate>Configuration</span>\n          </button>\n        </li>\n        <li [class.active]="mode === \'style\'">\n          <button\n            type="button"\n            class="btn"\n            [disabled]="!selected"\n            (click)="changeMode(\'style\'); (false)"\n          >\n            <i c8yIcon="paint-brush"></i> <span class="txt" translate>Appearance</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class="modal-inner-scroll">\n    <div\n      *ngIf="mode === \'select\'"\n      class="bg-white p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0"\n      style="z-index: 2;"\n    >\n      <div class="row">\n        <div class="col-sm-6">\n          <div class="input-group input-group-search">\n            <input\n              class="form-control"\n              placeholder="{{ \'Search…\' | translate }}"\n              type="text"\n              [(ngModel)]="searchTerm"\n              [ngModelOptions]="{ standalone: true }"\n              (keydown)="searchChange$.next($event)"\n            />\n            <span class="input-group-btn">\n              <button class="btn btn-clean" (click)="resetSearch()">\n                <i [c8yIcon]="searchTerm.length === 0 ? \'search\' : \'close\'"></i>\n              </button>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class="modal-body bg-gray-lighter" *ngIf="mode === \'select\'">\n      <div class="card-group card-select" style="margin-bottom:-24px;">\n        <div\n          class="col-md-3 col-sm-4 col-xs-6"\n          *ngFor="let cmp of searchResult || components"\n          title="{{ cmp.description | translate }}"\n        >\n          <div class="card p-8" [class.active]="selected === cmp" (click)="select(cmp)">\n            <div\n              class="text-center p-8 m-b-8 flex-col flex-center"\n              style="min-height: 170px; background-color: var(--body-background-color, #f2f3f4);"\n            >\n              <ng-container *ngIf="!cmp.previewImage; else previewImage">\n                <h1><i c8yIcon="file-image-o"></i></h1>\n                <small translate>Preview not available</small>\n              </ng-container>\n              <ng-template #previewImage>\n                <img class="img-responsive" [src]="cmp.previewImage" />\n              </ng-template>\n            </div>\n            <p class="card-title text-truncate">\n              <c8y-highlight\n                text="{{ cmp.label | translate }}"\n                [pattern]="searchTerm"\n              ></c8y-highlight>\n            </p>\n          </div>\n        </div>\n\n        <div class="c8y-empty-state text-center" *ngIf="searchResult && searchResult.length === 0">\n          <h1 class="c8y-icon c8y-icon-device c8y-icon-duocolor"></h1>\n          <h3 translate>No widgets found.</h3>\n          <div>\n            <p translate>Rephrase your search term.</p>\n            <div>\n              <button class="btn btn-primary" (click)="resetSearch()" translate>\n                Reset search\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class="modal-body" *ngIf="mode === \'config\'" style="min-height: calc(100vh - 290px);">\n      <h4 style="text-align: left;">\n        <strong>\n          {{ selected.label | translate }}\n        </strong>\n      </h4>\n      <p class="m-b-24">\n        {{ selected.description | translate }}\n      </p>\n      <div class="row">\n        \x3c!-- change to col-sm-6 when preview is available --\x3e\n        <div class="col-sm-12">\n          <div class="legend form-block" translate>Configuration</div>\n          <c8y-form-group>\n            <label for="widgetTitle" translate>Title</label>\n            <input\n              id="widgetTitle"\n              [(ngModel)]="selected.data.title"\n              type="text"\n              name="title"\n              class="form-control"\n              placeholder="{{ \'e.g.\' | translate }} {{ componentLabel | translate }}"\n              required\n            />\n          </c8y-form-group>\n\n          \x3c!-- This is an upgraded component for the device selector and still needs to be migrated --\x3e\n          <c8y-dynamic-component\n            componentId="device.selector.legacy"\n            [config]="widgetConfig"\n            [notFoundError]="false"\n            *ngIf="!isUpgrade"\n          ></c8y-dynamic-component>\n\n          <c8y-dynamic-component\n            [componentId]="selected.id"\n            mode="config"\n            [config]="widgetConfig"\n            [notFoundError]="false"\n          ></c8y-dynamic-component>\n        </div>\n        \x3c!-- markup for the preview \n        \n        <div class="col-sm-6 sticky-header-top-0" >\n          <div class="legend form-block">\n            Preview\n          </div>\n          <div class="bg-gray-lighter p-16">\n            <div class="card card-dashboard" style="margin-bottom:0;">\n              <div class="card-header-actions">\n                <div class="card-title text-uppercase">{{ selected.data.title }}</div>\n                <div class="header-actions">\n                  <div class="optionsBtn dropdow" class="btnIcon dropdown-toggle c8y-dropdown">\n                    <i c8yIcon="cog"></i>\n                  </div>\n                </div>\n              </div>\n              <div class="card-inner-scroll">\n                <div class="card-block" style="min-height: 240px;">\n                  include here the widget\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      --\x3e</div>\n    </div>\n\n    <div *ngIf="mode === \'style\'" class="modal-body p-t-0" style="min-height: calc(100vh - 290px);">\n      <div class="row">\n        <div class="col-xs-6">\n          <c8y-appearance-settings\n            [(themeClass)]="styling.contentClass"\n            [(headerClass)]="styling.headerClass"\n            [possibleStylingTheme]="possibleStyling.WIDGET_CONTENT_CLASSES"\n            [possibleStylingHeader]="possibleStyling.WIDGET_HEADER_CLASSES"\n            [defaultThemeClass]="defaultStyling.contentClass"\n            [defaultHeaderClass]="defaultStyling.headerClass"\n          >\n          </c8y-appearance-settings>\n        </div>\n        <div class="col-xs-6 sticky-header-top-0">\n          <c8y-widget-preview [previewClasses]="getStyle(true)"></c8y-widget-preview>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class="modal-footer">\n    <button title="{{ \'Cancel\' | translate }}" class="btn btn-default" (click)="close()" translate>\n      Cancel\n    </button>\n    <button\n      title="{{ \'Save\' | translate }}"\n      class="btn btn-primary"\n      (click)="save()"\n      translate\n      [disabled]="contextDashboardService.formDisabled || configForm.invalid"\n    >\n      Save\n    </button>\n  </div>\n</form>\n'})],t)}(),E=function(){function t(t,e,n,s,a,i,o,r){this.route=t,this.router=e,this.contextDashboardService=n,this.alert=s,this.renderer=a,this.moduleConfig=i,this.widgetService=o,this.bsModal=r,this.childrenClasses="",this.setTitle=!1,this.disabled=!1,this.defaultWidgets=[],this.canDelete=!0,this.isLoading=!0,this.class="",this.widgets=[]}return t.prototype.ngOnInit=function(){this.name?this.loadNamedDashboard():this.loadContextDashboard()},t.prototype.applyDeviceTarget=function(t){t.config.device&&(t.config.device={id:this.context.id,name:this.context.name})},t.prototype.ngOnDestroy=function(){this.dataSub&&this.dataSub.unsubscribe()},t.prototype.restore=function(){return v(this,void 0,void 0,(function(){return m(this,(function(t){switch(t.label){case 0:return this.isLoading=!0,this.mo.c8y_Dashboard.children=this.contextDashboardService.mapWidgets(this.defaultWidgets),[4,this.contextDashboardService.update(this.mo)];case 1:return t.sent(),this.onLoad(),[2]}}))}))},t.prototype.updateDashboardChildren=function(t){return v(this,void 0,void 0,(function(){var e,n,s,a=this;return m(this,(function(i){return e=t.children,n=this.mo,s=o.keyBy(e.map((function(t){return a.componentToWidget(t)})),"id"),n.c8y_Dashboard.children=s,[2,this.contextDashboardService.update(n)]}))}))},t.prototype.deleteDashboard=function(){return v(this,void 0,void 0,(function(){var t;return m(this,(function(e){switch(e.label){case 0:return[4,this.contextDashboardService.delete(this.mo)];case 1:return e.sent(),this.route.parent&&(t=this.route.parent.snapshot.url.map((function(t){return t.path})).join("/"),this.router.navigateByUrl(t)),[2]}}))}))},t.prototype.editDashboard=function(){return v(this,void 0,void 0,(function(){var t,e,n,s;return m(this,(function(a){switch(a.label){case 0:t={dashboard:this.dashboard,deviceType:this.context.type,isNamedDashboard:this.contextDashboardService.isNamed(this.mo)},e=this.bsModal.show(I,{class:"modal-lg",initialState:t,ignoreBackdropClick:!0}).content,a.label=1;case 1:return a.trys.push([1,5,,6]),n=o.cloneDeep(this.mo),s=n,[4,e.result];case 2:return s.c8y_Dashboard=a.sent(),[4,this.contextDashboardService.update(n)];case 3:return a.sent(),[4,this.contextDashboardService.refreshTabs(n)];case 4:return a.sent(),this.onLoad(),e.close(),[3,6];case 5:return a.sent(),[3,6];case 6:return[2]}}))}))},t.prototype.editWidget=function(t){return v(this,void 0,void 0,(function(){var e,n,s,a,i,o;return m(this,(function(r){switch(r.label){case 0:return e=t.source,n=e.x,s=e.y,a=e.width,i=e.height,[4,this.widgetService.getWidgetDefinition(t.widget.name||t.widget.componentId)];case 1:return(o=r.sent())?[4,this.addWidget(g({},o,{data:g({},o.data,t.widget,{_x:n,_y:s,_width:a,_height:i})}))]:(this.addWidget(),[2]);case 2:return r.sent(),[2]}}))}))},t.prototype.addWidget=function(t){return v(this,void 0,void 0,(function(){var e,n,s;return m(this,(function(a){switch(a.label){case 0:e={mo:this.mo,context:this.context,selected:o.cloneDeep(t)},n=this.bsModal.show(k,{class:"modal-lg",initialState:e,ignoreBackdropClick:!0}).content,a.label=1;case 1:return a.trys.push([1,4,,5]),[4,n.result];case 2:return s=a.sent(),this.mo.c8y_Dashboard.children||(this.mo.c8y_Dashboard.children={}),this.mo.c8y_Dashboard.children[s.id]=s,this.contextDashboardService.update(this.mo),s.classes=this.mergeWidgetClasses(s),[4,this.updateWidget(s)];case 3:return a.sent(),n.close(),[3,5];case 4:return a.sent(),[3,5];case 5:return[2]}}))}))},t.prototype.updateWidget=function(t){return v(this,void 0,void 0,(function(){var e,n,s;return m(this,(function(a){switch(a.label){case 0:return e=o.findIndex(this.widgets,{id:t.id}),n=-1===e,[4,this.mapLegacy(t)];case 1:return s=a.sent(),n?this.widgets.push(s):this.widgets.splice(e,1,s),[2]}}))}))},t.prototype.deleteWidget=function(t){var e=this,s=t.widget,a=t.source;delete this.mo.c8y_Dashboard.children[s.id];var i=this.widgets.find((function(t){return t.id===s.id}));this.widgets.splice(this.widgets.indexOf(i),1),setTimeout((function(){var t=new n.DashboardChildChange(a);t.collapseUpAll(),e.updateDashboardChildren(t)}))},t.prototype.addDashboardClassToBody=function(){var t=this;this.class.split(" ").forEach((function(e){t.renderer.addClass(document.body,e)}))},t.prototype.removeDashboardClassFromBody=function(){var t=this;this.class.split(" ").forEach((function(e){t.renderer.removeClass(document.body,e)}))},t.prototype.toggleFreeze=function(t){return v(this,void 0,void 0,(function(){var e;return m(this,(function(s){switch(s.label){case 0:this.toggleIsFrozenFlag(t),s.label=1;case 1:return s.trys.push([1,3,,4]),[4,this.contextDashboardService.update(this.mo)];case 2:return s.sent(),this.dashboard.isFrozen?this.alert.success(n.gettext("Your dashboard is locked now.")):this.alert.success(n.gettext("Your dashboard is unlocked now.")),[3,4];case 3:return e=s.sent(),this.alert.addServerFailure(e),this.toggleIsFrozenFlag(t),[3,4];case 4:return[2]}}))}))},t.prototype.toggleIsFrozenFlag=function(t){t.isFrozen=!t.isFrozen,this.dashboard.isFrozen=t.isFrozen},t.prototype.loadContextDashboard=function(){var t=this;this.dataSub=this.route.data.subscribe((function(e){var n=e.dashboard;t.context=t.route.parent.snapshot.data.contextData,t.mo=n,t.dashboard=t.mo.c8y_Dashboard,t.onLoad()}))},t.prototype.loadNamedDashboard=function(){var t=this;this.dataSub=this.contextDashboardService.getNamedDashboardOrCreate(this.name,this.defaultWidgets).subscribe((function(e){t.context=t.context||{},t.mo=e,t.dashboard=t.mo.c8y_Dashboard,t.onLoad()}))},t.prototype.onLoad=function(){return v(this,void 0,void 0,(function(){var t,e,n,s,a,i=this;return m(this,(function(r){switch(r.label){case 0:return[4,this.contextDashboardService.canEditDashboard(this.mo)];case 1:return t=r.sent(),this.disabled=!t,e=o.cloneDeep(this.mo.c8y_Dashboard.children),n=this.contextDashboardService.isDeviceType(this.mo),s=g({"c8y-grid-dashboard":!0,dashboard:!0},this.dashboard.classes),a=this,[4,Promise.all(o.values(e).map((function(t){return t.classes=i.mergeWidgetClasses(t),n&&i.applyDeviceTarget(t),i.mapLegacy(t)})))];case 2:return a.widgets=r.sent(),this.class=Object.keys(s).join(" "),this.isLoading=!1,[2]}}))}))},t.prototype.mergeWidgetClasses=function(t){var e=x.find((function(e){return t.classes&&t.classes[e.class]}))?g({},t.classes):g({},this.dashboard.widgetClasses,t.classes);return g({card:!0,"card-dashboard":!0},e)},t.prototype.componentToWidget=function(t){return g({},o.omit(t.data,["componentTransformConfigWithContext","transformConfigWithContext"]),{_x:t.x,_y:t.y,_width:t.width,_height:t.height})},t.prototype.mapLegacy=function(t){return v(this,void 0,void 0,(function(){var e;return m(this,(function(n){switch(n.label){case 0:return[4,this.widgetService.getWidgetDefinition(t.componentId||t.name)];case 1:return e=n.sent(),o.get(e,"data.settings.upgrade")?(t.widgetComponent=e.data.settings.widgetComponent,t.configComponent=e.data.settings.configComponent,t.templateUrl=e.data.settings.templateUrl,t.configTemplateUrl=e.data.settings.configTemplateUrl,t.transformConfigWithContext=e.data.settings.componentTransformConfigWithContext||e.data.settings.transformConfigWithContext):(delete t.templateUrl,delete t.configTemplateUrl),[2,t]}}))}))},t.ctorParameters=function(){return[{type:s.ActivatedRoute},{type:s.Router},{type:T},{type:n.AlertService},{type:e.Renderer2},{type:void 0,decorators:[{type:e.Inject,args:[D]}]},{type:_},{type:l.BsModalService}]},b([e.Input()],t.prototype,"name",void 0),b([e.Input()],t.prototype,"childrenClasses",void 0),b([e.Input()],t.prototype,"context",void 0),b([e.Input()],t.prototype,"setTitle",void 0),b([e.Input()],t.prototype,"disabled",void 0),b([e.Input()],t.prototype,"defaultWidgets",void 0),b([e.Input()],t.prototype,"canDelete",void 0),b([e.Input()],t.prototype,"isLoading",void 0),b([e.HostBinding("class")],t.prototype,"class",void 0),t=b([e.Component({selector:"c8y-context-dashboard",template:'<c8y-action-bar-item [placement]="\'more\'" *ngIf="defaultWidgets.length > 0">\n  <button (click)="restore()" [disabled]="dashboard?.isFrozen || disabled">\n    <i c8yIcon="undo"></i>&nbsp;<span translate>Restore dashboard</span>\n  </button>\n</c8y-action-bar-item>\n\n<c8y-widgets-dashboard\n  [context]="context"\n  [contextDashboard]="dashboard"\n  [widgets]="widgets"\n  [settings]="{\n    isLoading: isLoading,\n    isFrozen: dashboard?.isFrozen,\n    isDisabled: disabled,\n    canDelete: canDelete,\n    translateWidgetTitle: dashboard?.translateWidgetTitle,\n    allowFullscreen: moduleConfig.allowFullscreen,\n    title: setTitle ? dashboard.name : undefined,\n    widgetMargin: dashboard?.widgetMargin\n  }"\n  (onFreeze)="toggleFreeze($event)"\n  (onChangeDashboard)="updateDashboardChildren($event)"\n  (onAddWidget)="addWidget()"\n  (onEditWidget)="editWidget($event)"\n  (onDeleteWidget)="deleteWidget($event)"\n  (onChangeStart)="addDashboardClassToBody()"\n  (onChangeEnd)="removeDashboardClassFromBody()"\n  (onEditDashboard)="editDashboard()"\n  (onDeleteDashboard)="deleteDashboard()"\n>\n</c8y-widgets-dashboard>\n',host:{style:"\n      display: block;\n    ",class:"dashboard c8y-grid-dashboard"}}),y(5,e.Inject(D))],t)}(),A=function(){function n(t){this.contextDashboardService=t}return n.prototype.canActivate=function(e){return this.contextDashboardService.activateDashboards(e,[t.ContextDashboardType.Group])},n.ctorParameters=function(){return[{type:T}]},n=b([e.Injectable()],n)}(),N=function(){function t(t,e,n,s){this.router=t,this.contextDashboardService=e,this.bsModal=n,this.permissions=s}return t.prototype.get=function(t){return v(this,void 0,void 0,(function(){var e,s,a=this;return m(this,(function(i){switch(i.label){case 0:return e=!t.parent||t.snapshot.data.context?t.snapshot.data:t.parent.snapshot.data,[4,this.isEnabled(e)];case 1:return s=i.sent(),[2,[{label:n.gettext("Add dashboard"),priority:2500,action:function(){return a.addDashboard(e)},disabled:!s}]]}}))}))},t.prototype.addDashboard=function(t){return v(this,void 0,void 0,(function(){var e,s,a,i;return m(this,(function(o){switch(o.label){case 0:t.context===n.ViewContext.Device&&(e={deviceType:t.contextData.type}),s=this.bsModal.show(I,{class:"modal-lg",initialState:e,ignoreBackdropClick:!0}).content,o.label=1;case 1:return o.trys.push([1,5,,6]),[4,s.result];case 2:return a=o.sent(),[4,this.contextDashboardService.create(a,t)];case 3:return i=o.sent(),[4,this.contextDashboardService.navigateToDashboard(i)];case 4:return o.sent(),s.close(),[3,6];case 5:return o.sent(),[3,6];case 6:return[2]}}))}))},t.prototype.isEnabled=function(t){return v(this,void 0,void 0,(function(){return m(this,(function(e){switch(e.label){case 0:return t.contextData&&t.contextData.id?[4,this.permissions.canEdit(["ROLE_INVENTORY_ADMIN","ROLE_INVENTORY_CREATE"],t.contextData)]:[3,2];case 1:return[2,e.sent()&&[n.ViewContext.Device,n.ViewContext.Group].includes(t.context)];case 2:return[2,this.permissions.hasAnyRole(["ROLE_INVENTORY_ADMIN","ROLE_INVENTORY_CREATE"])&&[n.ViewContext.Device,n.ViewContext.Group].includes(t.context)]}}))}))},t.ctorParameters=function(){return[{type:s.Router},{type:T},{type:l.BsModalService},{type:n.Permissions}]},t=b([e.Injectable()],t)}(),R=function(){function t(){this.themeClass="dashboard-theme-light",this.headerClass="panel-title-regular",this.themeClassChange=new e.EventEmitter,this.headerClassChange=new e.EventEmitter,this.possibleStylingTheme=w,this.possibleStylingHeader=x}return t.prototype.themeClassClick=function(t){t=this.resetToDefault(t,this.themeClass,this.defaultThemeClass),this.themeClass=t,this.themeClassChange.emit(t)},t.prototype.headerClassClick=function(t){t=this.resetToDefault(t,this.headerClass,this.defaultHeaderClass),this.headerClass=t,this.headerClassChange.emit(t)},t.prototype.resetToDefault=function(t,e,n){return n&&t===e&&(t=n),t},b([e.Input()],t.prototype,"themeClass",void 0),b([e.Input()],t.prototype,"headerClass",void 0),b([e.Input()],t.prototype,"defaultThemeClass",void 0),b([e.Input()],t.prototype,"defaultHeaderClass",void 0),b([e.Output()],t.prototype,"themeClassChange",void 0),b([e.Output()],t.prototype,"headerClassChange",void 0),b([e.Input()],t.prototype,"possibleStylingTheme",void 0),b([e.Input()],t.prototype,"possibleStylingHeader",void 0),t=b([e.Component({selector:"c8y-appearance-settings",template:'<h6 class="legend form-block"><span translate>Layout</span></h6>\n<div class="row ">\n  <div class="col-sm-6 m-b-32">\n    <label translate>Theme</label>\n    <ul class="list-group" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);">\n      <li\n        class="list-group-item flex-row"\n        style="align-items: center; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05);"\n        *ngFor="let themeClassItem of possibleStylingTheme; let i = index"\n      >\n        <div class="list-item-checkbox">\n          <label class="c8y-radio">\n            <input\n              type="radio"\n              [id]="\'groupradiocontentclass\' + i"\n              name="content"\n              [value]="themeClassItem.class"\n              [ngModel]="themeClass"\n              (click)="themeClassClick(themeClassItem.class)"\n            />\n            <span></span>\n          </label>\n        </div>\n        <label [for]="\'groupradiocontentclass\' + i">\n          <span>{{ themeClassItem.label | translate }}</span>\n          <br />\n          <small *ngIf="themeClassItem.class === defaultThemeClass" class="text-muted" translate\n            >Dashboard default</small\n          >\n        </label>\n        <button class="btn btn-clean flex-item-top"\n          popover="{{ themeClassItem.description | translate }}"\n          container="body"\n          placement="top"\n          triggers="focus">\n          <i \n            [c8yIcon]="\'question-circle-o\'"\n            class="text-primary"\n          ></i>\n        </button>\n      </li>\n    </ul>\n  </div>\n  <div class="col-sm-6">\n    <label translate>Widget header style</label>\n    <ul class="list-group" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);">\n      <li\n        class="list-group-item flex-row"\n        style="align-items: center; box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.05);"\n        *ngFor="let headerClassItem of possibleStylingHeader; let i = index"\n      >\n        <div class="list-item-checkbox">\n          <label class="c8y-radio">\n            <input\n              type="radio"\n              [id]="\'groupradioheaderclass\' + i"\n              name="header"\n              [value]="headerClassItem.class"\n              [ngModel]="headerClass"\n              (click)="headerClassClick(headerClassItem.class)"\n            />\n            <span></span>\n          </label>\n        </div>\n        <label [for]="\'groupradioheaderclass\' + i">\n          <span>{{ headerClassItem.label | translate }}</span>\n          <br />\n          <small *ngIf="headerClassItem.class === defaultHeaderClass" class="text-muted" translate\n            >Dashboard default</small\n          >\n        </label>\n        <button class="btn btn-clean flex-item-top"\n          popover="{{ headerClassItem.description | translate }}"\n          container="body"\n          placement="top"\n          triggers="focus">\n          <i \n            [c8yIcon]="\'question-circle-o\'"\n            class="text-primary"\n          ></i>\n        </button>\n      </li>\n    </ul>\n  </div>\n</div>\n',viewProviders:[{provide:u.ControlContainer,useExisting:u.NgForm}]})],t)}(),O=function(){function t(){this.previewClasses={"dashboard-theme-light":!0,"panel-title-regular":!0}}return b([e.Input()],t.prototype,"previewClasses",void 0),b([e.Input()],t.prototype,"tab",void 0),t=b([e.Component({selector:"c8y-widget-preview",template:'<div class="legend form-block" translate>Preview</div>\n<label *ngIf="tab" translate>Tab and layout</label>\n<label *ngIf="!tab" translate>Layout</label>\n<div class="dashboard-preview-slot" [ngClass]="previewClasses">\n  <div\n    class="page-tabs page-tabs-horizontal navigator-open"\n    style=" position: absolute; left: 0; margin: 0 15px; overflow: hidden;"\n    *ngIf="tab"\n  >\n    <div class="tabContainer hidden-xs">\n      <ul class="nav nav-tabs nav-tabsc8y">\n        <li class="active" style="left: 16px;">\n          <a routerlinkactive="" title="{{ tab.name }}">\n            <i class="text-primary" [c8yIcon]="tab.icon"></i>\n            <span class="txt">{{ tab.name }}</span></a\n          >\n        </li>\n      </ul>\n    </div>\n    <div class="visible-xs mobile-tabs"></div>\n  </div>\n  <div [ngClass]="{ \'m-t-64\': !!tab }">\n    <div class="card card-dashboard" style="height: 360px;">\n      <div class="card-header-actions" style="z-index: 8;">\n        <div class="card-title">\n          <span translate>Widget title</span>\n        </div>\n        <div class="header-actions">\n          <div class="optionsBtn dropdown">\n            <a href="" (click)="(false)" class="dropdown-toggle c8y-dropdown">\n              <i c8yIcon="cog"></i>\n            </a>\n          </div>\n        </div>\n      </div>\n      <div class="card-inner-scroll p-t-16">\n        <p translate>Widget example content.</p>\n      </div>\n    </div>\n  </div>\n</div>\n'})],t)}(),M={allowFullscreen:!0,widgetFilter:function(t){var e=t.data;return!(e&&e.settings&&e.settings.noNewWidgets)},routes:[{path:"dashboard/:dashboardId",component:E,canActivate:[S],context:n.ViewContext.Device},{path:"dashboard/:dashboardId",component:E,canActivate:[A],context:n.ViewContext.Group}]},L=function(){function t(){}var s;return s=t,t.config=function(t){return void 0===t&&(t={}),{ngModule:s,providers:[{provide:D,useValue:g({},M,t)},T,S,A,{provide:n.HOOK_ONCE_ROUTE,useValue:g({},M,t).routes,multi:!0},{provide:n.HOOK_ACTION,useClass:N,multi:!0}]}},t=s=b([e.NgModule({declarations:[R,E,k,O,I],imports:[n.CoreModule,h.TooltipModule,p.PopoverModule,d.BsDropdownModule.forRoot()],exports:[E,k],entryComponents:[E,k,I]})],t)}(),F=function(){function t(){this.DEFAULT_HOME_WIDGETS=[{name:"cockpit.welcome.widget",title:n.gettext(""),_x:0,_y:0,_height:5,_width:12,classes:{"panel-title-hidden":!0}},{name:"Asset Alarms",title:n.gettext("Active, critical alarms"),_x:0,_y:5,_height:4,_width:6},{name:"Recent Alarms",title:n.gettext("Recent alarms"),_x:0,_y:9,_height:4,_width:6},{name:"Map",title:n.gettext("Map"),_x:6,_y:5,_height:8,_width:6}]}return t=b([e.Component({selector:"c8y-cockpit-dashboard",template:'<c8y-title>\n  {{\'Home\'|translate}}\n</c8y-title>\n\n<c8y-context-dashboard name="home-cockpit1" [defaultWidgets]="DEFAULT_HOME_WIDGETS" [canDelete]="false"></c8y-context-dashboard>\n'})],t)}(),W=function(){function t(t,e,n,s,a){this.tenantService=t,this.docs=e,this.router=n,this.navigator=s,this.applicationService=a,this.quickLinks=[],this.REPORT_NODE="Reports",this.CONFIGURATION_NODE="Configuration",this.TRIAL="TRIAL"}return t.prototype.ngOnInit=function(){return v(this,void 0,void 0,(function(){var t,e=this;return m(this,(function(n){switch(n.label){case 0:return t=this,[4,this.tenantService.currentTenantType()];case 1:return t.tenantType=n.sent(),this.setMessage(),this.navSubscription=this.navigator.items$.subscribe((function(t){e.navNodes=t})),this.docsSubscription=this.docs.items$.subscribe((function(t){e.links=t})),this.createConnectSmartphoneQuickLink(),[4,this.createQuicklinkRegisterDevice()];case 2:return n.sent(),this.tenantType===this.TRIAL?(this.createQuicklinkUserGuide(),[2]):(this.createQuicklinkAddGroup(),this.createQuickLinkReports(),this.createQuicklinkDataPointLibrary(),this.createQuicklinkSmartRules(),[2])}}))}))},t.prototype.ngOnDestroy=function(){this.docsSubscription&&!this.docsSubscription.closed&&this.docsSubscription.unsubscribe(),this.navSubscription&&!this.navSubscription.closed&&this.navSubscription.unsubscribe()},t.prototype.setMessage=function(){this.tenantType===this.TRIAL?this.welcomeMessage=n.gettext("\n        The Cockpit application allows you to build IoT applications in minutes.\n        To get started, connect any device to the platform.\n        If you do not have an IoT device to hand, you can start by connecting your smartphone.\n        Click below to be guided through the process.\n      "):this.welcomeMessage=n.gettext("\n        The Cockpit application provides you with options to manage\n        and monitor Internet of Things assets and data from business perspective.\n      ")},t.prototype.createQuicklinkAddGroup=function(){var t=this.links.find((function(t){return"Add group"===t.label}));t&&this.quickLinks.push(t)},t.prototype.createConnectSmartphoneQuickLink=function(){var t=this.links.find((function(t){return"Connect smartphone"===t.label}));t&&this.quickLinks.push(t)},t.prototype.createQuickLinkReports=function(){var t=this,e={icon:"c8y-reports",label:n.gettext("Reports"),url:"/export"},s=this.findNavigatorNode(this.REPORT_NODE);s&&s.show&&(e.click=function(){s.open=!0,t.router.navigateByUrl(e.url)},this.quickLinks.push(e))},t.prototype.createQuicklinkDataPointLibrary=function(){var t=this,e={icon:"c8y-data-points",label:n.gettext("Data point library"),url:"/datapointlibrary"},s=this.findNavigatorNode(this.CONFIGURATION_NODE);s&&s.show&&(e.click=function(){s.open=!0,t.router.navigateByUrl(e.url)},this.quickLinks.push(e))},t.prototype.createQuicklinkSmartRules=function(){var t=this,e={icon:"c8y-smart-rules",label:n.gettext("Smart rules"),url:"/rules"},s=this.findNavigatorNode(this.CONFIGURATION_NODE);s&&s.show&&(e.click=function(){s.open=!0,t.router.navigateByUrl(e.url)},this.quickLinks.push(e))},t.prototype.createQuicklinkRegisterDevice=function(){return v(this,void 0,void 0,(function(){var t,e,s,a;return m(this,(function(i){switch(i.label){case 0:return[4,this.applicationService.listByUser()];case 1:return(t=i.sent().data)&&(e=t.find((function(t){return"devicemanagement"===t.contextPath})))&&(s=this.applicationService.getHref(e),a={icon:"c8y-device-connect",label:n.gettext("Register device"),click:function(){return window.open(s+"/#/deviceregistration","_self")}},this.quickLinks.push(a)),[2]}}))}))},t.prototype.createQuicklinkUserGuide=function(){var t=this,e={icon:"c8y-user",label:n.gettext("User guide"),url:"/users-guide/getting-started",click:function(){var n=t.docs.getUserGuideLink(e.url);window.open(n)}};this.quickLinks.push(e)},t.prototype.findNavigatorNode=function(t){if(this.navNodes&&this.navNodes.length>0)return this.navNodes.find((function(e){return e.realName===t}))},t.ctorParameters=function(){return[{type:a.TenantService},{type:n.DocsService},{type:s.Router},{type:n.NavigatorService},{type:a.ApplicationService}]},b([e.Input()],t.prototype,"config",void 0),t=b([e.Component({selector:"c8y-welcome-to-cockpit",template:'<div class="welcome-widget welcome-cockpit">\r\n  <div class="flex-row">\r\n    <div class="col-xs-12 col-md-5 flex-item-v-stretch p-24">\r\n      <h2 class="text-light">{{ \'Welcome to Cockpit\' | translate }}</h2>\r\n      <p class="text-16 text-light p-t-16 p-b-24">{{ welcomeMessage | translate }}</p>\r\n      <div class="card-group interact-grid tight-grid">\r\n        <div *ngFor="let link of quickLinks" class="col-sm-4 col-xs-6">\r\n          <c8y-quick-link\r\n            (click)="link.click ? link.click() : false"\r\n            [icon]="link.icon"\r\n            [label]="link.label"\r\n            class="card"\r\n          >\r\n          </c8y-quick-link>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    \x3c!-- <div class="col-sm-6 welcome-illustration flex-item-v-stretch"></div> --\x3e\r\n  </div>\r\n</div>\r\n'})],t)}(),P=function(){function t(t){this.dashboard=t}return t.prototype.restore=function(){this.dashboard.restore()},t.ctorParameters=function(){return[{type:E,decorators:[{type:e.Host}]}]},t=b([e.Component({selector:"c8y-legacy-welcome-widget",template:'<div class="card-block">\n  <p class="lead" c8y-guide-docs>\n    <span>{{ \'Welcome to Cockpit\' | translate }}.</span>\n    <span title="{{ \'Browse the manual\' | translate }}" class="cockpit-welcome-manual" forceHtmlTranslate ngNonBindable\n      >Browse the manual <a c8y-guide-href="users-guide/cockpit/">here</a>.</span\n    >\n  </p>\n  <p class="m-t-16">\n    <em>{{ \'New default dashboard available.\' | translate }} </em>\n  </p>\n  <button class="btn btn-primary btn-sm m-t-16" (click)="restore(); (false)" translate>\n    Get new dashboard\n  </button>\n</div>\n'}),y(0,e.Host())],t)}(),G="";try{G=require("./welcome/img/welcome-widget-pr.png")}catch(t){}var H=[{label:n.gettext("Home"),icon:"home",priority:1e4,path:"/"}],B=[{id:"cockpit.welcome.widget",label:n.gettext("Welcome to Cockpit"),description:n.gettext("Displays a welcome message for Cockpit"),component:W,previewImage:G,data:{settings:{noNewWidgets:!1,widgetDefaults:{_width:12,_height:6},ng1:{options:{noDeviceTarget:!0,groupsSelectable:!1}}}}}],j=[{id:"Cockpit Welcome",label:n.gettext("Welcome to Cockpit"),description:n.gettext("Displays a welcome message for Cockpit"),component:P,data:{settings:{noNewWidgets:!0,ng1:{options:{noDeviceTarget:!0,groupsSelectable:!1}}}}}],U=function(){function t(){}return t=b([e.NgModule({entryComponents:[F,W,P],imports:[n.DocsModule,n.CoreModule,L.config({routes:[{path:"dashboard/:dashboardId",component:E,canActivate:[S],context:n.ViewContext.Device},{path:"dashboard/:dashboardId",component:E,canActivate:[A],context:n.ViewContext.Group},{path:"",component:F}]}),n.QuickLinkModule,i.TranslateModule],declarations:[F,W,P],providers:[{provide:n.HOOK_NAVIGATOR_NODES,useValue:H,multi:!0},{provide:n.HOOK_COMPONENTS,multi:!0,useValue:B},{provide:n.HOOK_COMPONENTS,multi:!0,useValue:j}]})],t)}();t.CONTEXT_DASHBOARD_CONFIG=D,t.CockpitDashboardModule=U,t.ContextDashboardModule=L,t.ContextDashboardService=T,t.DASHBOARD_THEME_CLASSES=w,t.DeviceDashboardGuard=S,t.GroupDashboardGuard=A,t.WIDGET_CONTENT_CLASSES=C,t.WIDGET_HEADER_CLASSES=x,t.ɵ0=H,t.ɵ1=B,t.ɵ2=j,t.ɵa=R,t.ɵb=E,t.ɵc=_,t.ɵd=k,t.ɵe=O,t.ɵf=I,t.ɵg=N,t.ɵh=F,t.ɵi=W,t.ɵj=P,Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=c8y-ngx-components-context-dashboard.umd.min.js.map