@c8y/ngx-components 1017.0.507 → 1017.0.511

package/fesm2015/c8y-ngx-components.mjs

@@ -6878,6 +6878,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
+const PRODUCT_EXPERIENCE = {
+    ACTION_BAR: {
+        EVENTS: { ACTION_BAR_ITEM: 'actionBarItem' },
+        COMPONENTS: { ACTION_BAR_COMPONENT: 'action-bar' },
+        ACTIONS: {},
+        RESULTS: {}
+    },
+    QUICK_LINKS: {
+        EVENTS: { QUICK_LINK_RIGHT_DRAWER: 'quickLinkRightDrawer' },
+        COMPONENTS: { RIGHT_DRAWER_COMPONENT: 'right-drawer' },
+        ACTIONS: {},
+        RESULTS: {}
+    }
+};
+
 /**
  * This service is handling the cookie banner and cookie preferences related logic.
  */
@@ -7364,15 +7379,17 @@ class ActionBarComponent {
             return;
         }
         const element = event.closest('[px-event]') || event.closest('[title]') || event.closest('[uib-tooltip]');
-        if (!element) {
+        if (!element || element.getAttribute('disabled')) {
             return;
         }
-        const eventName = element.getAttribute('px-event') ||
+        const itemName = element.getAttribute('px-event') ||
             element.getAttribute('title') ||
             element.getAttribute('uib-tooltip');
-        const translatedEventName = this.gainsightService.translateToEnglish(eventName);
-        this.gainsightService.triggerEvent(`actionBarItem:${translatedEventName}`, {
-            url: element.baseURI
+        const translatedItemName = this.gainsightService.translateToEnglish(itemName);
+        this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE.ACTION_BAR.EVENTS.ACTION_BAR_ITEM, {
+            component: PRODUCT_EXPERIENCE.ACTION_BAR.COMPONENTS.ACTION_BAR_COMPONENT,
+            action: `${translatedItemName}`,
+            url: location.href
         });
     }
     ngOnInit() {
@@ -13549,6 +13566,7 @@ class RightDrawerComponent {
         this.appState = appState;
         this.userMenuService = userMenuService;
         this.options = options;
+        this.PRODUCT_EXPERIENCE = PRODUCT_EXPERIENCE;
         this.closeDrawer = new EventEmitter();
         this.quickLinks = [];
         this.helpAndSupport = [];
@@ -13578,10 +13596,10 @@ class RightDrawerComponent {
     }
 }
 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 });
-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" }] });
+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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: RightDrawerComponent, decorators: [{
             type: Component,
-            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" }]
+            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" }]
         }], ctorParameters: function () { return [{ type: AppStateService }, { type: UserMenuService }, { type: OptionsService }]; }, propDecorators: { _quickLinks: [{
                 type: Input,
                 args: ['quickLinks']