@c8y/ngx-components 1017.0.510 → 1017.0.511

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/core/header/right-drawer/right-drawer.component.d.ts +22 -0
  2. package/core/shared/core.model.d.ts +22 -0
  3. package/device-grid/device-grid.service.d.ts +3 -4
  4. package/esm2020/core/action-bar/action-bar.component.mjs +10 -7
  5. package/esm2020/core/header/right-drawer/right-drawer.component.mjs +5 -3
  6. package/esm2020/core/shared/core.model.mjs +15 -0
  7. package/esm2020/device-grid/device-grid.service.mjs +6 -15
  8. package/esm2020/sensor-phone/sensor-phone-modal.component.mjs +26 -15
  9. package/esm2020/sensor-phone/sensor-phone.model.mjs +13 -0
  10. package/esm2020/sensor-phone/sensor-phone.service.mjs +5 -7
  11. package/esm2020/sub-assets/delete-assets-modal/delete-assets-modal.component.mjs +13 -3
  12. package/esm2020/sub-assets/shared/sub-assets.model.mjs +11 -0
  13. package/fesm2015/c8y-ngx-components-device-grid.mjs +4 -15
  14. package/fesm2015/c8y-ngx-components-device-grid.mjs.map +1 -1
  15. package/fesm2015/c8y-ngx-components-sensor-phone.mjs +40 -19
  16. package/fesm2015/c8y-ngx-components-sensor-phone.mjs.map +1 -1
  17. package/fesm2015/c8y-ngx-components-sub-assets.mjs +22 -2
  18. package/fesm2015/c8y-ngx-components-sub-assets.mjs.map +1 -1
  19. package/fesm2015/c8y-ngx-components.mjs +25 -7
  20. package/fesm2015/c8y-ngx-components.mjs.map +1 -1
  21. package/fesm2020/c8y-ngx-components-device-grid.mjs +4 -13
  22. package/fesm2020/c8y-ngx-components-device-grid.mjs.map +1 -1
  23. package/fesm2020/c8y-ngx-components-sensor-phone.mjs +40 -19
  24. package/fesm2020/c8y-ngx-components-sensor-phone.mjs.map +1 -1
  25. package/fesm2020/c8y-ngx-components-sub-assets.mjs +22 -2
  26. package/fesm2020/c8y-ngx-components-sub-assets.mjs.map +1 -1
  27. package/fesm2020/c8y-ngx-components.mjs +25 -7
  28. package/fesm2020/c8y-ngx-components.mjs.map +1 -1
  29. package/package.json +2 -2
  30. package/sensor-phone/sensor-phone.model.d.ts +18 -0
  31. package/sensor-phone/sensor-phone.service.d.ts +2 -3
  32. package/sub-assets/delete-assets-modal/delete-assets-modal.component.d.ts +1 -0
  33. package/sub-assets/shared/sub-assets.model.d.ts +15 -0
@@ -6910,6 +6910,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
6910
6910
  }]
6911
6911
  }], ctorParameters: function () { return []; } });
6912
6912
 
6913
+ const PRODUCT_EXPERIENCE = {
6914
+ ACTION_BAR: {
6915
+ EVENTS: { ACTION_BAR_ITEM: 'actionBarItem' },
6916
+ COMPONENTS: { ACTION_BAR_COMPONENT: 'action-bar' },
6917
+ ACTIONS: {},
6918
+ RESULTS: {}
6919
+ },
6920
+ QUICK_LINKS: {
6921
+ EVENTS: { QUICK_LINK_RIGHT_DRAWER: 'quickLinkRightDrawer' },
6922
+ COMPONENTS: { RIGHT_DRAWER_COMPONENT: 'right-drawer' },
6923
+ ACTIONS: {},
6924
+ RESULTS: {}
6925
+ }
6926
+ };
6927
+
6913
6928
  /**
6914
6929
  * This service is handling the cookie banner and cookie preferences related logic.
6915
6930
  */
@@ -7384,15 +7399,17 @@ class ActionBarComponent {
7384
7399
  return;
7385
7400
  }
7386
7401
  const element = event.closest('[px-event]') || event.closest('[title]') || event.closest('[uib-tooltip]');
7387
- if (!element) {
7402
+ if (!element || element.getAttribute('disabled')) {
7388
7403
  return;
7389
7404
  }
7390
- const eventName = element.getAttribute('px-event') ||
7405
+ const itemName = element.getAttribute('px-event') ||
7391
7406
  element.getAttribute('title') ||
7392
7407
  element.getAttribute('uib-tooltip');
7393
- const translatedEventName = this.gainsightService.translateToEnglish(eventName);
7394
- this.gainsightService.triggerEvent(`actionBarItem:${translatedEventName}`, {
7395
- url: element.baseURI
7408
+ const translatedItemName = this.gainsightService.translateToEnglish(itemName);
7409
+ this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.ACTION_BAR.EVENTS.ACTION_BAR_ITEM, {
7410
+ component: PRODUCT_EXPERIENCE.ACTION_BAR.COMPONENTS.ACTION_BAR_COMPONENT,
7411
+ action: `${translatedItemName}`,
7412
+ url: location.href
7396
7413
  });
7397
7414
  }
7398
7415
  ngOnInit() {
@@ -13430,6 +13447,7 @@ class RightDrawerComponent {
13430
13447
  this.appState = appState;
13431
13448
  this.userMenuService = userMenuService;
13432
13449
  this.options = options;
13450
+ this.PRODUCT_EXPERIENCE = PRODUCT_EXPERIENCE;
13433
13451
  this.closeDrawer = new EventEmitter();
13434
13452
  this.quickLinks = [];
13435
13453
  this.helpAndSupport = [];
@@ -13459,10 +13477,10 @@ class RightDrawerComponent {
13459
13477
  }
13460
13478
  }
13461
13479
  RightDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RightDrawerComponent, deps: [{ token: AppStateService }, { token: UserMenuService }, { token: OptionsService }], target: i0.ɵɵFactoryTarget.Component });
13462
- RightDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: RightDrawerComponent, selector: "c8y-right-drawer", inputs: { _quickLinks: ["quickLinks", "_quickLinks"], _helpAndSupport: ["helpAndSupport", "_helpAndSupport"], app: "app", drawerOpen: "drawerOpen" }, outputs: { closeDrawer: "closeDrawer" }, ngImport: i0, template: "<aside class=\"c8y-right-drawer\" [cdkTrapFocus]=\"drawerOpen\">\n<!-- drawer header -->\n <div class=\"c8y-right-drawer__header separator-bottom\">\n <button type=\"button\" class=\"close\" title=\"{{'Close' | translate}}\" (click)=\"close()\">&times;</button>\n <div class=\"d-flex a-i-center\">\n <div class=\"user-dot\"> {{appState.currentUser | async | userNameInitials}}</div>\n <div class=\"min-width-0\">\n <p\n *ngIf=\"appState.currentUser | async\"\n class=\"text-truncate text-medium text-16\"\n title=\"{{appState.currentUser | async | shortenUserName}}\"\n >\n {{appState.currentUser | async | shortenUserName}}\n </p>\n <small *ngIf=\"appState.currentUser | async | userRolesList as userRoles\" [title]=\"userRoles\" class=\"text-truncate\">{{ userRoles }}</small>\n </div>\n </div>\n </div>\n\n <!-- user menu -->\n <c8y-user-menu-outlet\n [items]=\"(userMenuService.items$ | async)\"\n class=\"c8y-right-drawer__container\"\n ></c8y-user-menu-outlet>\n\n <!-- Version list -->\n <c8y-version-list *ngIf=\"showPlatformInformation\"></c8y-version-list>\n\n<!-- quicklinks > bookmarks -->\n <div *ngIf=\"(appState$ | async).showRightDrawer && quickLinks.length\"\n class=\"separator-top p-t-8 p-b-8\">\n <div class=\"c8y-right-drawer__item sticky-top\">\n <i c8yIcon=\"bookmark\"></i>\n <span class=\"text-bold\">{{ 'Quick links' | translate }}</span>\n </div>\n\n <ng-container *ngFor=\"let quickLink of quickLinks\">\n <ng-container *ngIf=\"quickLink.component\">\n <ng-container\n *ngComponentOutlet=\"quickLink.component; injector: quickLink.injector\"\n ></ng-container>\n </ng-container>\n <a\n *ngIf=\"!quickLink.component\"\n title=\"{{ quickLink.label | translate }}\"\n type=\"button\"\n class=\"c8y-right-drawer__link\"\n [href]=\"quickLink.url || '#'\"\n (click)=\"quickLink.click && $event.preventDefault(); quickLink.click && quickLink.click()\"\n c8yProductExperience\n [actionName]=\"'quickLinkRightDrawer:' + quickLink.label\"\n [actionData]=\"\"\n tabindex=\"{{ drawerOpen ? '0' : '-1' }}\"\n >\n <i *ngIf=\"quickLink.icon\" class=\"{{ quickLink.icon }} c8y-icon-duocolor\"></i>\n <img\n *ngIf=\"quickLink.iconSrc\"\n [src]=\"quickLink.iconSrc\"\n style=\"max-width: 20px\"\n class=\"img-responsive\"\n onerror=\"this.style.display = 'none'\"\n />\n <span>{{ quickLink.label | translate }}</span>\n </a>\n </ng-container>\n\n </div>\n\n <div *ngIf=\"(appState$ | async).showRightDrawer && helpAndSupport.length\"\n class=\"separator-top p-t-8 p-b-8\">\n <button type=\"button\" class=\"c8y-right-drawer__link sticky-top\" (click)=\"documentationOpen = !documentationOpen\"\n [attr.aria-expanded]=\"!documentationCol.isCollapsed\" [attr.aria-controls]=\"'collapseDocs'\">\n <i c8yIcon=\"book-shelf\"></i>\n <span class=\"text-bold\">{{ 'Documentation' | translate }}</span>\n <i c8yIcon=\"angle-down\" class=\"m-l-auto\" [ngClass]=\"{'icon-rotate-180': documentationOpen }\"></i>\n </button>\n <div class=\"collapse\" id=\"collapseDocs\" [collapse]=\"!documentationOpen\" [isAnimated]=\"true\" #documentationCol=\"bs-collapse\">\n <ng-container *ngFor=\"let link of helpAndSupport\">\n <ng-container *ngIf=\"link.component\">\n <ng-container *ngComponentOutlet=\"link.component; injector: link.injector\"></ng-container>\n </ng-container>\n <a\n *ngIf=\"!link.component\"\n title=\"{{ link.label | translate }}\"\n type=\"button\"\n class=\"c8y-right-drawer__link\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n [href]=\"link.url\"\n c8yProductExperience\n [actionName]=\"'quickLinkRightDrawer:' + link.label\"\n [actionData]=\"\"\n tabindex=\"{{ drawerOpen ? '0' : '-1' }}\"\n >\n <span title=\"{{ link.label | translate }}\" class=\"text-truncate text-12\">\n {{ link.label | translate }}\n </span>\n </a>\n </ng-container>\n </div>\n </div>\n\n <!-- TODO: move legal notices here -->\n <!-- <div class=\"separator-top p-t-8 m-t-auto\">\n <a href=\"#\" class=\"c8y-right-drawer__link\">\n <small>Legal notices</small>\n </a>\n </div> -->\n</aside>\n", dependencies: [{ kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: UserMenuOutletComponent, selector: "c8y-user-menu-outlet", inputs: ["items"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: VersionListComponent, selector: "c8y-version-list" }, { kind: "directive", type: i1$9.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: ShortenUserNamePipe, name: "shortenUserName" }, { kind: "pipe", type: UserNameInitialsPipe, name: "userNameInitials" }, { kind: "pipe", type: UserRolesListPipe, name: "userRolesList" }] });
13480
+ RightDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: RightDrawerComponent, selector: "c8y-right-drawer", inputs: { _quickLinks: ["quickLinks", "_quickLinks"], _helpAndSupport: ["helpAndSupport", "_helpAndSupport"], app: "app", drawerOpen: "drawerOpen" }, outputs: { closeDrawer: "closeDrawer" }, ngImport: i0, template: "<aside class=\"c8y-right-drawer\" [cdkTrapFocus]=\"drawerOpen\">\n<!-- drawer header -->\n <div class=\"c8y-right-drawer__header separator-bottom\">\n <button type=\"button\" class=\"close\" title=\"{{'Close' | translate}}\" (click)=\"close()\">&times;</button>\n <div class=\"d-flex a-i-center\">\n <div class=\"user-dot\"> {{appState.currentUser | async | userNameInitials}}</div>\n <div class=\"min-width-0\">\n <p\n *ngIf=\"appState.currentUser | async\"\n class=\"text-truncate text-medium text-16\"\n title=\"{{appState.currentUser | async | shortenUserName}}\"\n >\n {{appState.currentUser | async | shortenUserName}}\n </p>\n <small *ngIf=\"appState.currentUser | async | userRolesList as userRoles\" [title]=\"userRoles\" class=\"text-truncate\">{{ userRoles }}</small>\n </div>\n </div>\n </div>\n\n <!-- user menu -->\n <c8y-user-menu-outlet\n [items]=\"(userMenuService.items$ | async)\"\n class=\"c8y-right-drawer__container\"\n ></c8y-user-menu-outlet>\n\n <!-- Version list -->\n <c8y-version-list *ngIf=\"showPlatformInformation\"></c8y-version-list>\n\n<!-- quicklinks > bookmarks -->\n <div *ngIf=\"(appState$ | async).showRightDrawer && quickLinks.length\"\n class=\"separator-top p-t-8 p-b-8\">\n <div class=\"c8y-right-drawer__item sticky-top\">\n <i c8yIcon=\"bookmark\"></i>\n <span class=\"text-bold\">{{ 'Quick links' | translate }}</span>\n </div>\n\n <ng-container *ngFor=\"let quickLink of quickLinks\">\n <ng-container *ngIf=\"quickLink.component\">\n <ng-container\n *ngComponentOutlet=\"quickLink.component; injector: quickLink.injector\"\n ></ng-container>\n </ng-container>\n <a\n *ngIf=\"!quickLink.component\"\n title=\"{{ quickLink.label | translate }}\"\n type=\"button\"\n class=\"c8y-right-drawer__link\"\n [href]=\"quickLink.url || '#'\"\n (click)=\"quickLink.click && $event.preventDefault(); quickLink.click && quickLink.click()\"\n c8yProductExperience\n [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n [actionData]=\"{\n component: PRODUCT_EXPERIENCE.QUICK_LINKS.COMPONENTS.RIGHT_DRAWER_COMPONENT,\n action: quickLink.label\n }\"\n tabindex=\"{{ drawerOpen ? '0' : '-1' }}\"\n >\n <i *ngIf=\"quickLink.icon\" class=\"{{ quickLink.icon }} c8y-icon-duocolor\"></i>\n <img\n *ngIf=\"quickLink.iconSrc\"\n [src]=\"quickLink.iconSrc\"\n style=\"max-width: 20px\"\n class=\"img-responsive\"\n onerror=\"this.style.display = 'none'\"\n />\n <span>{{ quickLink.label | translate }}</span>\n </a>\n </ng-container>\n\n </div>\n\n <div *ngIf=\"(appState$ | async).showRightDrawer && helpAndSupport.length\"\n class=\"separator-top p-t-8 p-b-8\">\n <button type=\"button\" class=\"c8y-right-drawer__link sticky-top\" (click)=\"documentationOpen = !documentationOpen\"\n [attr.aria-expanded]=\"!documentationCol.isCollapsed\" [attr.aria-controls]=\"'collapseDocs'\">\n <i c8yIcon=\"book-shelf\"></i>\n <span class=\"text-bold\">{{ 'Documentation' | translate }}</span>\n <i c8yIcon=\"angle-down\" class=\"m-l-auto\" [ngClass]=\"{'icon-rotate-180': documentationOpen }\"></i>\n </button>\n <div class=\"collapse\" id=\"collapseDocs\" [collapse]=\"!documentationOpen\" [isAnimated]=\"true\" #documentationCol=\"bs-collapse\">\n <ng-container *ngFor=\"let link of helpAndSupport\">\n <ng-container *ngIf=\"link.component\">\n <ng-container *ngComponentOutlet=\"link.component; injector: link.injector\"></ng-container>\n </ng-container>\n <a\n *ngIf=\"!link.component\"\n title=\"{{ link.label | translate }}\"\n type=\"button\"\n class=\"c8y-right-drawer__link\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n [href]=\"link.url\"\n c8yProductExperience\n [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n [actionData]=\"{\n component: PRODUCT_EXPERIENCE.QUICK_LINKS.COMPONENTS.RIGHT_DRAWER_COMPONENT,\n action: link.label\n }\"\n tabindex=\"{{ drawerOpen ? '0' : '-1' }}\"\n >\n <span title=\"{{ link.label | translate }}\" class=\"text-truncate text-12\">\n {{ link.label | translate }}\n </span>\n </a>\n </ng-container>\n </div>\n </div>\n\n <!-- TODO: move legal notices here -->\n <!-- <div class=\"separator-top p-t-8 m-t-auto\">\n <a href=\"#\" class=\"c8y-right-drawer__link\">\n <small>Legal notices</small>\n </a>\n </div> -->\n</aside>\n", dependencies: [{ kind: "directive", type: i4.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: UserMenuOutletComponent, selector: "c8y-user-menu-outlet", inputs: ["items"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: VersionListComponent, selector: "c8y-version-list" }, { kind: "directive", type: i1$9.CollapseDirective, selector: "[collapse]", inputs: ["display", "isAnimated", "collapse"], outputs: ["collapsed", "collapses", "expanded", "expands"], exportAs: ["bs-collapse"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: ShortenUserNamePipe, name: "shortenUserName" }, { kind: "pipe", type: UserNameInitialsPipe, name: "userNameInitials" }, { kind: "pipe", type: UserRolesListPipe, name: "userRolesList" }] });
13463
13481
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RightDrawerComponent, decorators: [{
13464
13482
  type: Component,
13465
- args: [{ selector: 'c8y-right-drawer', template: "<aside class=\"c8y-right-drawer\" [cdkTrapFocus]=\"drawerOpen\">\n<!-- drawer header -->\n <div class=\"c8y-right-drawer__header separator-bottom\">\n <button type=\"button\" class=\"close\" title=\"{{'Close' | translate}}\" (click)=\"close()\">&times;</button>\n <div class=\"d-flex a-i-center\">\n <div class=\"user-dot\"> {{appState.currentUser | async | userNameInitials}}</div>\n <div class=\"min-width-0\">\n <p\n *ngIf=\"appState.currentUser | async\"\n class=\"text-truncate text-medium text-16\"\n title=\"{{appState.currentUser | async | shortenUserName}}\"\n >\n {{appState.currentUser | async | shortenUserName}}\n </p>\n <small *ngIf=\"appState.currentUser | async | userRolesList as userRoles\" [title]=\"userRoles\" class=\"text-truncate\">{{ userRoles }}</small>\n </div>\n </div>\n </div>\n\n <!-- user menu -->\n <c8y-user-menu-outlet\n [items]=\"(userMenuService.items$ | async)\"\n class=\"c8y-right-drawer__container\"\n ></c8y-user-menu-outlet>\n\n <!-- Version list -->\n <c8y-version-list *ngIf=\"showPlatformInformation\"></c8y-version-list>\n\n<!-- quicklinks > bookmarks -->\n <div *ngIf=\"(appState$ | async).showRightDrawer && quickLinks.length\"\n class=\"separator-top p-t-8 p-b-8\">\n <div class=\"c8y-right-drawer__item sticky-top\">\n <i c8yIcon=\"bookmark\"></i>\n <span class=\"text-bold\">{{ 'Quick links' | translate }}</span>\n </div>\n\n <ng-container *ngFor=\"let quickLink of quickLinks\">\n <ng-container *ngIf=\"quickLink.component\">\n <ng-container\n *ngComponentOutlet=\"quickLink.component; injector: quickLink.injector\"\n ></ng-container>\n </ng-container>\n <a\n *ngIf=\"!quickLink.component\"\n title=\"{{ quickLink.label | translate }}\"\n type=\"button\"\n class=\"c8y-right-drawer__link\"\n [href]=\"quickLink.url || '#'\"\n (click)=\"quickLink.click && $event.preventDefault(); quickLink.click && quickLink.click()\"\n c8yProductExperience\n [actionName]=\"'quickLinkRightDrawer:' + quickLink.label\"\n [actionData]=\"\"\n tabindex=\"{{ drawerOpen ? '0' : '-1' }}\"\n >\n <i *ngIf=\"quickLink.icon\" class=\"{{ quickLink.icon }} c8y-icon-duocolor\"></i>\n <img\n *ngIf=\"quickLink.iconSrc\"\n [src]=\"quickLink.iconSrc\"\n style=\"max-width: 20px\"\n class=\"img-responsive\"\n onerror=\"this.style.display = 'none'\"\n />\n <span>{{ quickLink.label | translate }}</span>\n </a>\n </ng-container>\n\n </div>\n\n <div *ngIf=\"(appState$ | async).showRightDrawer && helpAndSupport.length\"\n class=\"separator-top p-t-8 p-b-8\">\n <button type=\"button\" class=\"c8y-right-drawer__link sticky-top\" (click)=\"documentationOpen = !documentationOpen\"\n [attr.aria-expanded]=\"!documentationCol.isCollapsed\" [attr.aria-controls]=\"'collapseDocs'\">\n <i c8yIcon=\"book-shelf\"></i>\n <span class=\"text-bold\">{{ 'Documentation' | translate }}</span>\n <i c8yIcon=\"angle-down\" class=\"m-l-auto\" [ngClass]=\"{'icon-rotate-180': documentationOpen }\"></i>\n </button>\n <div class=\"collapse\" id=\"collapseDocs\" [collapse]=\"!documentationOpen\" [isAnimated]=\"true\" #documentationCol=\"bs-collapse\">\n <ng-container *ngFor=\"let link of helpAndSupport\">\n <ng-container *ngIf=\"link.component\">\n <ng-container *ngComponentOutlet=\"link.component; injector: link.injector\"></ng-container>\n </ng-container>\n <a\n *ngIf=\"!link.component\"\n title=\"{{ link.label | translate }}\"\n type=\"button\"\n class=\"c8y-right-drawer__link\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n [href]=\"link.url\"\n c8yProductExperience\n [actionName]=\"'quickLinkRightDrawer:' + link.label\"\n [actionData]=\"\"\n tabindex=\"{{ drawerOpen ? '0' : '-1' }}\"\n >\n <span title=\"{{ link.label | translate }}\" class=\"text-truncate text-12\">\n {{ link.label | translate }}\n </span>\n </a>\n </ng-container>\n </div>\n </div>\n\n <!-- TODO: move legal notices here -->\n <!-- <div class=\"separator-top p-t-8 m-t-auto\">\n <a href=\"#\" class=\"c8y-right-drawer__link\">\n <small>Legal notices</small>\n </a>\n </div> -->\n</aside>\n" }]
13483
+ args: [{ selector: 'c8y-right-drawer', template: "<aside class=\"c8y-right-drawer\" [cdkTrapFocus]=\"drawerOpen\">\n<!-- drawer header -->\n <div class=\"c8y-right-drawer__header separator-bottom\">\n <button type=\"button\" class=\"close\" title=\"{{'Close' | translate}}\" (click)=\"close()\">&times;</button>\n <div class=\"d-flex a-i-center\">\n <div class=\"user-dot\"> {{appState.currentUser | async | userNameInitials}}</div>\n <div class=\"min-width-0\">\n <p\n *ngIf=\"appState.currentUser | async\"\n class=\"text-truncate text-medium text-16\"\n title=\"{{appState.currentUser | async | shortenUserName}}\"\n >\n {{appState.currentUser | async | shortenUserName}}\n </p>\n <small *ngIf=\"appState.currentUser | async | userRolesList as userRoles\" [title]=\"userRoles\" class=\"text-truncate\">{{ userRoles }}</small>\n </div>\n </div>\n </div>\n\n <!-- user menu -->\n <c8y-user-menu-outlet\n [items]=\"(userMenuService.items$ | async)\"\n class=\"c8y-right-drawer__container\"\n ></c8y-user-menu-outlet>\n\n <!-- Version list -->\n <c8y-version-list *ngIf=\"showPlatformInformation\"></c8y-version-list>\n\n<!-- quicklinks > bookmarks -->\n <div *ngIf=\"(appState$ | async).showRightDrawer && quickLinks.length\"\n class=\"separator-top p-t-8 p-b-8\">\n <div class=\"c8y-right-drawer__item sticky-top\">\n <i c8yIcon=\"bookmark\"></i>\n <span class=\"text-bold\">{{ 'Quick links' | translate }}</span>\n </div>\n\n <ng-container *ngFor=\"let quickLink of quickLinks\">\n <ng-container *ngIf=\"quickLink.component\">\n <ng-container\n *ngComponentOutlet=\"quickLink.component; injector: quickLink.injector\"\n ></ng-container>\n </ng-container>\n <a\n *ngIf=\"!quickLink.component\"\n title=\"{{ quickLink.label | translate }}\"\n type=\"button\"\n class=\"c8y-right-drawer__link\"\n [href]=\"quickLink.url || '#'\"\n (click)=\"quickLink.click && $event.preventDefault(); quickLink.click && quickLink.click()\"\n c8yProductExperience\n [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n [actionData]=\"{\n component: PRODUCT_EXPERIENCE.QUICK_LINKS.COMPONENTS.RIGHT_DRAWER_COMPONENT,\n action: quickLink.label\n }\"\n tabindex=\"{{ drawerOpen ? '0' : '-1' }}\"\n >\n <i *ngIf=\"quickLink.icon\" class=\"{{ quickLink.icon }} c8y-icon-duocolor\"></i>\n <img\n *ngIf=\"quickLink.iconSrc\"\n [src]=\"quickLink.iconSrc\"\n style=\"max-width: 20px\"\n class=\"img-responsive\"\n onerror=\"this.style.display = 'none'\"\n />\n <span>{{ quickLink.label | translate }}</span>\n </a>\n </ng-container>\n\n </div>\n\n <div *ngIf=\"(appState$ | async).showRightDrawer && helpAndSupport.length\"\n class=\"separator-top p-t-8 p-b-8\">\n <button type=\"button\" class=\"c8y-right-drawer__link sticky-top\" (click)=\"documentationOpen = !documentationOpen\"\n [attr.aria-expanded]=\"!documentationCol.isCollapsed\" [attr.aria-controls]=\"'collapseDocs'\">\n <i c8yIcon=\"book-shelf\"></i>\n <span class=\"text-bold\">{{ 'Documentation' | translate }}</span>\n <i c8yIcon=\"angle-down\" class=\"m-l-auto\" [ngClass]=\"{'icon-rotate-180': documentationOpen }\"></i>\n </button>\n <div class=\"collapse\" id=\"collapseDocs\" [collapse]=\"!documentationOpen\" [isAnimated]=\"true\" #documentationCol=\"bs-collapse\">\n <ng-container *ngFor=\"let link of helpAndSupport\">\n <ng-container *ngIf=\"link.component\">\n <ng-container *ngComponentOutlet=\"link.component; injector: link.injector\"></ng-container>\n </ng-container>\n <a\n *ngIf=\"!link.component\"\n title=\"{{ link.label | translate }}\"\n type=\"button\"\n class=\"c8y-right-drawer__link\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n [href]=\"link.url\"\n c8yProductExperience\n [actionName]=\"PRODUCT_EXPERIENCE.QUICK_LINKS.EVENTS.QUICK_LINK_RIGHT_DRAWER\"\n [actionData]=\"{\n component: PRODUCT_EXPERIENCE.QUICK_LINKS.COMPONENTS.RIGHT_DRAWER_COMPONENT,\n action: link.label\n }\"\n tabindex=\"{{ drawerOpen ? '0' : '-1' }}\"\n >\n <span title=\"{{ link.label | translate }}\" class=\"text-truncate text-12\">\n {{ link.label | translate }}\n </span>\n </a>\n </ng-container>\n </div>\n </div>\n\n <!-- TODO: move legal notices here -->\n <!-- <div class=\"separator-top p-t-8 m-t-auto\">\n <a href=\"#\" class=\"c8y-right-drawer__link\">\n <small>Legal notices</small>\n </a>\n </div> -->\n</aside>\n" }]
13466
13484
  }], ctorParameters: function () { return [{ type: AppStateService }, { type: UserMenuService }, { type: OptionsService }]; }, propDecorators: { _quickLinks: [{
13467
13485
  type: Input,
13468
13486
  args: ['quickLinks']