@c8y/ngx-components 1023.14.175 → 1023.14.177

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.
@@ -9811,7 +9811,11 @@ class GainsightService {
9811
9811
  this.identify(sendPiiData, extendedIdentifyData);
9812
9812
  }
9813
9813
  else {
9814
- const requiredIdentifyData = { user, currentTenant, instanceId };
9814
+ const requiredIdentifyData = {
9815
+ user,
9816
+ currentTenant,
9817
+ instanceId
9818
+ };
9815
9819
  this.identify(sendPiiData, requiredIdentifyData);
9816
9820
  }
9817
9821
  this.isScriptLoaded = true;
@@ -9830,6 +9834,10 @@ class GainsightService {
9830
9834
  const { id: userId, email, userName, firstName, lastName, roles } = identifyData.user;
9831
9835
  const { name: tenantID, customProperties, domainName } = identifyData.currentTenant;
9832
9836
  const { instanceId, versionUI, versionBE } = identifyData;
9837
+ const expiryDateStr = this.getCustomProperty(customProperties, 'expiryDate');
9838
+ const tenantExpiryDate = expiryDateStr ? new Date(expiryDateStr).getTime() : undefined;
9839
+ const trialStartDateStr = this.getCustomProperty(customProperties, 'trialStartDate');
9840
+ const trialStartDate = trialStartDateStr ? new Date(trialStartDateStr).getTime() : undefined;
9833
9841
  /**
9834
9842
  * Passing ID is a minimum required data to make an identify call to Gainsight.
9835
9843
  * isUserCreatedAfterAnonymizationWasActivated parameter is passed to later distinguish between users created before and after data anonymization done by Gainsight.
@@ -9854,7 +9862,9 @@ class GainsightService {
9854
9862
  externalReference: customProperties?.externalReference,
9855
9863
  userRoles: this.transformUserRolesToStr(roles?.references),
9856
9864
  customBranding: this.isCustomBranding(),
9857
- fullTracking: sendPiiData
9865
+ fullTracking: sendPiiData,
9866
+ tenantExpiryDate,
9867
+ trialStartDate
9858
9868
  };
9859
9869
  const identifyPayload = sendPiiData
9860
9870
  ? { ...baseIdentify, email, userName, firstName, lastName }
@@ -10022,6 +10032,9 @@ class GainsightService {
10022
10032
  const hostName = location.hostname;
10023
10033
  return hostName.substring(hostName.indexOf('.') + 1);
10024
10034
  }
10035
+ getCustomProperty(customProperties, key) {
10036
+ return Object.entries(customProperties ?? {}).find(([k]) => k.toLowerCase() === key.toLowerCase())?.[1];
10037
+ }
10025
10038
  /**
10026
10039
  * Reverses the translation object.
10027
10040
  *
@@ -29182,6 +29195,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
29182
29195
  * ```
29183
29196
  */
29184
29197
  class DashboardChildComponent {
29198
+ static { this.WIDGET_THEME_FOUNDATION_MAP = {
29199
+ 'panel-content-dark': 'c8y-dark-theme',
29200
+ 'panel-content-white': 'c8y-light-theme'
29201
+ }; }
29185
29202
  set templateActions(actions) {
29186
29203
  this.addActions(actions, true);
29187
29204
  }
@@ -29287,11 +29304,21 @@ class DashboardChildComponent {
29287
29304
  this.lastChange = null;
29288
29305
  }
29289
29306
  ngOnChanges() {
29307
+ const classObj = Array.isArray(this.class)
29308
+ ? this.class.reduce((acc, cls) => ({ ...acc, [cls]: true }), {})
29309
+ : (this.class ?? {});
29310
+ const foundationClasses = {};
29311
+ for (const [contentClass, foundationClass] of Object.entries(DashboardChildComponent.WIDGET_THEME_FOUNDATION_MAP)) {
29312
+ if (classObj[contentClass]) {
29313
+ foundationClasses[foundationClass] = true;
29314
+ }
29315
+ }
29290
29316
  this.klasses = {
29291
29317
  card: true,
29292
29318
  'card-dashboard': true,
29293
29319
  'on-resize': this.isResize,
29294
- ...this.class
29320
+ ...foundationClasses,
29321
+ ...classObj
29295
29322
  };
29296
29323
  }
29297
29324
  ngOnInit() {
@@ -29381,7 +29408,7 @@ class DashboardChildComponent {
29381
29408
  return false;
29382
29409
  }
29383
29410
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DashboardChildComponent, deps: [{ token: DashboardComponent }, { token: i1$2.DomSanitizer }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
29384
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: DashboardChildComponent, isStandalone: true, selector: "c8y-dashboard-child", inputs: { x: "x", y: "y", width: "width", height: "height", data: "data", margin: "margin", useIntersection: "useIntersection", isFrozen: "isFrozen", canToggleFullscreen: "canToggleFullscreen", editMode: "editMode", class: "class" }, outputs: { changeStart: "changeStart", changeEnd: "changeEnd", toggleFullscreen: "toggleFullscreen" }, host: { properties: { "class.fullscreen": "this.fullscreen", "attr.style": "this.inlineStyle" }, classAttribute: "dashboard-grid-child" }, queries: [{ propertyName: "templateActions", predicate: DashboardChildActionComponent }], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList>\n <div\n class=\"card-placeholder\"\n *ngIf=\"isResize\"\n ></div>\n <div\n [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n [ngClass]=\"klasses\"\n cdkDrag\n (cdkDragStarted)=\"dragStarted($event)\"\n (cdkDragEnded)=\"reset($event)\"\n [cdkDragDisabled]=\"(isOneColumnView$ | async) || !editMode || fullscreen\"\n >\n <div\n class=\"card-header-actions card-header-grid\"\n [ngClass]=\"{\n 'drag-handle': editMode && !fullscreen,\n draggableCursor: editMode && !fullscreen\n }\"\n cdkDragHandle\n >\n <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n <div\n class=\"header-actions d-flex a-i-center\"\n *ngIf=\"actions.length > 0\"\n >\n <ng-container *ngFor=\"let headerTemplate of additionalHeaderTemplates\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ng-container>\n\n <button\n class=\"btn btn-icon\"\n [attr.aria-label]=\"'Full screen' | translate\"\n [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n container=\"body\"\n [delay]=\"500\"\n [disabled]=\"editMode || !canToggleFullscreen\"\n (click)=\"toggleFullscreen.next()\"\n data-cy=\"c8y-dashboard-child--settings-fullscreen\"\n >\n <i [c8yIcon]=\"fullscreen ? 'compress' : 'expand'\"></i>\n </button>\n <div\n class=\"optionsBtn dropdown\"\n placement=\"bottom right\"\n dropdown\n [container]=\"'body'\"\n >\n <button\n class=\"btn btn-icon c8y-dropdown\"\n title=\"{{ 'Settings' | translate }}\"\n aria-haspopup=\"true\"\n *ngIf=\"editMode\"\n data-cy=\"c8y-dashboard-child--settings\"\n (click)=\"(false)\"\n dropdownToggle\n >\n <i [c8yIcon]=\"'cog'\"></i>\n </button>\n <button\n class=\"btn btn-icon\"\n [attr.aria-label]=\"'Click &quot;Edit widgets&quot; to unlock' | translate\"\n tooltip=\"{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}\"\n container=\"body\"\n *ngIf=\"!editMode\"\n (click)=\"(false)\"\n data-cy=\"c8y-dashboard-child--settings-locked\"\n >\n <i [c8yIcon]=\"'lock'\"></i>\n </button>\n <ul\n class=\"dropdown-menu dropdown-menu-right\"\n style=\"right: -1px\"\n data-cy=\"c8y-dashboard-child--actions-dropdown\"\n *dropdownMenu\n >\n <ng-container *ngFor=\"let action of actions\">\n <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n </ng-container>\n </ul>\n </div>\n </div>\n </div>\n <div class=\"card-inner-scroll\">\n <ng-content></ng-content>\n </div>\n <div\n class=\"resize-handle hidden-xs\"\n *ngIf=\"editMode && !isDragging && !fullscreen\"\n cdkDrag\n [cdkDragDisabled]=\"!editMode || fullscreen\"\n (cdkDragStarted)=\"resizeStarted($event)\"\n (cdkDragEnded)=\"reset($event)\"\n ></div>\n <div\n class=\"resize-icon hidden-xs\"\n *ngIf=\"editMode && !isDragging && !fullscreen\"\n ></div>\n\n <div\n class=\"card-placeholder\"\n *cdkDragPlaceholder\n ></div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
29411
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DashboardChildComponent, isStandalone: true, selector: "c8y-dashboard-child", inputs: { x: "x", y: "y", width: "width", height: "height", data: "data", margin: "margin", useIntersection: "useIntersection", isFrozen: "isFrozen", canToggleFullscreen: "canToggleFullscreen", editMode: "editMode", class: "class" }, outputs: { changeStart: "changeStart", changeEnd: "changeEnd", toggleFullscreen: "toggleFullscreen" }, host: { properties: { "class.fullscreen": "this.fullscreen", "attr.style": "this.inlineStyle" }, classAttribute: "dashboard-grid-child" }, queries: [{ propertyName: "templateActions", predicate: DashboardChildActionComponent }], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList>\n @if (isResize) {\n <div class=\"card-placeholder\"></div>\n }\n <div\n [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n [ngClass]=\"klasses\"\n cdkDrag\n (cdkDragStarted)=\"dragStarted($event)\"\n (cdkDragEnded)=\"reset($event)\"\n [cdkDragDisabled]=\"(isOneColumnView$ | async) || !editMode || fullscreen\"\n >\n <div\n class=\"card-header-actions card-header-grid\"\n [ngClass]=\"{\n 'drag-handle': editMode && !fullscreen,\n draggableCursor: editMode && !fullscreen\n }\"\n cdkDragHandle\n >\n <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n @if (actions.length > 0) {\n <div class=\"header-actions d-flex a-i-center\">\n @for (headerTemplate of additionalHeaderTemplates; track headerTemplate) {\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n }\n <button\n class=\"btn btn-icon\"\n [attr.aria-label]=\"'Full screen' | translate\"\n [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n container=\"body\"\n [delay]=\"500\"\n [disabled]=\"editMode || !canToggleFullscreen\"\n (click)=\"toggleFullscreen.next()\"\n data-cy=\"c8y-dashboard-child--settings-fullscreen\"\n >\n <i [c8yIcon]=\"fullscreen ? 'compress' : 'expand'\"></i>\n </button>\n <div\n class=\"optionsBtn dropdown\"\n placement=\"bottom right\"\n dropdown\n [container]=\"'body'\"\n >\n @if (editMode) {\n <button\n class=\"btn btn-icon c8y-dropdown\"\n title=\"{{ 'Settings' | translate }}\"\n aria-haspopup=\"true\"\n data-cy=\"c8y-dashboard-child--settings\"\n (click)=\"(false)\"\n dropdownToggle\n >\n <i [c8yIcon]=\"'cog'\"></i>\n </button>\n }\n @if (!editMode) {\n <button\n class=\"btn btn-icon\"\n [attr.aria-label]=\"'Click &quot;Edit widgets&quot; to unlock' | translate\"\n tooltip=\"{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}\"\n container=\"body\"\n (click)=\"(false)\"\n data-cy=\"c8y-dashboard-child--settings-locked\"\n >\n <i [c8yIcon]=\"'lock'\"></i>\n </button>\n }\n <ul\n class=\"dropdown-menu dropdown-menu-right\"\n style=\"right: -1px\"\n data-cy=\"c8y-dashboard-child--actions-dropdown\"\n *dropdownMenu\n >\n @for (action of actions; track action) {\n <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n }\n </ul>\n </div>\n </div>\n }\n </div>\n <div class=\"card-inner-scroll\">\n <ng-content></ng-content>\n </div>\n @if (editMode && !isDragging && !fullscreen) {\n <div\n class=\"resize-handle hidden-xs\"\n cdkDrag\n [cdkDragDisabled]=\"!editMode || fullscreen\"\n (cdkDragStarted)=\"resizeStarted($event)\"\n (cdkDragEnded)=\"reset($event)\"\n ></div>\n }\n @if (editMode && !isDragging && !fullscreen) {\n <div class=\"resize-icon hidden-xs\"></div>\n }\n\n <div\n class=\"card-placeholder\"\n *cdkDragPlaceholder\n ></div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$5.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "ngmodule", type: BsDropdownModule }, { kind: "directive", type: i1$3.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$3.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$3.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
29385
29412
  }
29386
29413
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DashboardChildComponent, decorators: [{
29387
29414
  type: Component,
@@ -29389,7 +29416,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
29389
29416
  class: 'dashboard-grid-child'
29390
29417
  }, standalone: true, imports: [
29391
29418
  CdkDropList,
29392
- NgIf,
29393
29419
  CdkDrag,
29394
29420
  NgStyle,
29395
29421
  NgClass,
@@ -29399,12 +29425,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
29399
29425
  TooltipModule,
29400
29426
  IconDirective,
29401
29427
  BsDropdownModule,
29402
- NgFor,
29403
29428
  NgTemplateOutlet,
29404
29429
  CdkDragPlaceholder,
29405
29430
  C8yTranslatePipe,
29406
29431
  AsyncPipe
29407
- ], template: "<div cdkDropList>\n <div\n class=\"card-placeholder\"\n *ngIf=\"isResize\"\n ></div>\n <div\n [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n [ngClass]=\"klasses\"\n cdkDrag\n (cdkDragStarted)=\"dragStarted($event)\"\n (cdkDragEnded)=\"reset($event)\"\n [cdkDragDisabled]=\"(isOneColumnView$ | async) || !editMode || fullscreen\"\n >\n <div\n class=\"card-header-actions card-header-grid\"\n [ngClass]=\"{\n 'drag-handle': editMode && !fullscreen,\n draggableCursor: editMode && !fullscreen\n }\"\n cdkDragHandle\n >\n <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n <div\n class=\"header-actions d-flex a-i-center\"\n *ngIf=\"actions.length > 0\"\n >\n <ng-container *ngFor=\"let headerTemplate of additionalHeaderTemplates\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ng-container>\n\n <button\n class=\"btn btn-icon\"\n [attr.aria-label]=\"'Full screen' | translate\"\n [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n container=\"body\"\n [delay]=\"500\"\n [disabled]=\"editMode || !canToggleFullscreen\"\n (click)=\"toggleFullscreen.next()\"\n data-cy=\"c8y-dashboard-child--settings-fullscreen\"\n >\n <i [c8yIcon]=\"fullscreen ? 'compress' : 'expand'\"></i>\n </button>\n <div\n class=\"optionsBtn dropdown\"\n placement=\"bottom right\"\n dropdown\n [container]=\"'body'\"\n >\n <button\n class=\"btn btn-icon c8y-dropdown\"\n title=\"{{ 'Settings' | translate }}\"\n aria-haspopup=\"true\"\n *ngIf=\"editMode\"\n data-cy=\"c8y-dashboard-child--settings\"\n (click)=\"(false)\"\n dropdownToggle\n >\n <i [c8yIcon]=\"'cog'\"></i>\n </button>\n <button\n class=\"btn btn-icon\"\n [attr.aria-label]=\"'Click &quot;Edit widgets&quot; to unlock' | translate\"\n tooltip=\"{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}\"\n container=\"body\"\n *ngIf=\"!editMode\"\n (click)=\"(false)\"\n data-cy=\"c8y-dashboard-child--settings-locked\"\n >\n <i [c8yIcon]=\"'lock'\"></i>\n </button>\n <ul\n class=\"dropdown-menu dropdown-menu-right\"\n style=\"right: -1px\"\n data-cy=\"c8y-dashboard-child--actions-dropdown\"\n *dropdownMenu\n >\n <ng-container *ngFor=\"let action of actions\">\n <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n </ng-container>\n </ul>\n </div>\n </div>\n </div>\n <div class=\"card-inner-scroll\">\n <ng-content></ng-content>\n </div>\n <div\n class=\"resize-handle hidden-xs\"\n *ngIf=\"editMode && !isDragging && !fullscreen\"\n cdkDrag\n [cdkDragDisabled]=\"!editMode || fullscreen\"\n (cdkDragStarted)=\"resizeStarted($event)\"\n (cdkDragEnded)=\"reset($event)\"\n ></div>\n <div\n class=\"resize-icon hidden-xs\"\n *ngIf=\"editMode && !isDragging && !fullscreen\"\n ></div>\n\n <div\n class=\"card-placeholder\"\n *cdkDragPlaceholder\n ></div>\n </div>\n</div>\n" }]
29432
+ ], template: "<div cdkDropList>\n @if (isResize) {\n <div class=\"card-placeholder\"></div>\n }\n <div\n [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n [ngClass]=\"klasses\"\n cdkDrag\n (cdkDragStarted)=\"dragStarted($event)\"\n (cdkDragEnded)=\"reset($event)\"\n [cdkDragDisabled]=\"(isOneColumnView$ | async) || !editMode || fullscreen\"\n >\n <div\n class=\"card-header-actions card-header-grid\"\n [ngClass]=\"{\n 'drag-handle': editMode && !fullscreen,\n draggableCursor: editMode && !fullscreen\n }\"\n cdkDragHandle\n >\n <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n @if (actions.length > 0) {\n <div class=\"header-actions d-flex a-i-center\">\n @for (headerTemplate of additionalHeaderTemplates; track headerTemplate) {\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n }\n <button\n class=\"btn btn-icon\"\n [attr.aria-label]=\"'Full screen' | translate\"\n [tooltip]=\"fullscreen ? ('Exit full screen' | translate) : ('Full screen' | translate)\"\n container=\"body\"\n [delay]=\"500\"\n [disabled]=\"editMode || !canToggleFullscreen\"\n (click)=\"toggleFullscreen.next()\"\n data-cy=\"c8y-dashboard-child--settings-fullscreen\"\n >\n <i [c8yIcon]=\"fullscreen ? 'compress' : 'expand'\"></i>\n </button>\n <div\n class=\"optionsBtn dropdown\"\n placement=\"bottom right\"\n dropdown\n [container]=\"'body'\"\n >\n @if (editMode) {\n <button\n class=\"btn btn-icon c8y-dropdown\"\n title=\"{{ 'Settings' | translate }}\"\n aria-haspopup=\"true\"\n data-cy=\"c8y-dashboard-child--settings\"\n (click)=\"(false)\"\n dropdownToggle\n >\n <i [c8yIcon]=\"'cog'\"></i>\n </button>\n }\n @if (!editMode) {\n <button\n class=\"btn btn-icon\"\n [attr.aria-label]=\"'Click &quot;Edit widgets&quot; to unlock' | translate\"\n tooltip=\"{{ 'Click &quot;Edit widgets&quot; to unlock' | translate }}\"\n container=\"body\"\n (click)=\"(false)\"\n data-cy=\"c8y-dashboard-child--settings-locked\"\n >\n <i [c8yIcon]=\"'lock'\"></i>\n </button>\n }\n <ul\n class=\"dropdown-menu dropdown-menu-right\"\n style=\"right: -1px\"\n data-cy=\"c8y-dashboard-child--actions-dropdown\"\n *dropdownMenu\n >\n @for (action of actions; track action) {\n <ng-container *ngTemplateOutlet=\"action.template\"></ng-container>\n }\n </ul>\n </div>\n </div>\n }\n </div>\n <div class=\"card-inner-scroll\">\n <ng-content></ng-content>\n </div>\n @if (editMode && !isDragging && !fullscreen) {\n <div\n class=\"resize-handle hidden-xs\"\n cdkDrag\n [cdkDragDisabled]=\"!editMode || fullscreen\"\n (cdkDragStarted)=\"resizeStarted($event)\"\n (cdkDragEnded)=\"reset($event)\"\n ></div>\n }\n @if (editMode && !isDragging && !fullscreen) {\n <div class=\"resize-icon hidden-xs\"></div>\n }\n\n <div\n class=\"card-placeholder\"\n *cdkDragPlaceholder\n ></div>\n </div>\n</div>\n" }]
29408
29433
  }], ctorParameters: () => [{ type: DashboardComponent }, { type: i1$2.DomSanitizer }, { type: i0.ElementRef }], propDecorators: { templateActions: [{
29409
29434
  type: ContentChildren,
29410
29435
  args: [DashboardChildActionComponent]
@@ -31131,6 +31156,7 @@ class WidgetsDashboardComponent {
31131
31156
  this.onCancelDashboard = new EventEmitter();
31132
31157
  this.revertChange = new EventEmitter();
31133
31158
  this.widgetInFullscreenMode = false;
31159
+ this.widgetFullscreenChangeListener = null;
31134
31160
  this.inFullScreen$ = fromEvent(document, 'fullscreenchange').pipe(map(() => this.fullScreen()), startWith(this.fullScreen()));
31135
31161
  this.editMode$ = new BehaviorSubject(false);
31136
31162
  this.copyDashboardLabel = gettext$1('Copy dashboard');
@@ -31167,7 +31193,6 @@ class WidgetsDashboardComponent {
31167
31193
  }
31168
31194
  toggleFullscreen(hasWidget = false) {
31169
31195
  const elem = document.body;
31170
- const doc = document;
31171
31196
  if (hasWidget) {
31172
31197
  elem.classList.add('singleWidget');
31173
31198
  this.widgetInFullscreenMode = true;
@@ -31190,17 +31215,8 @@ class WidgetsDashboardComponent {
31190
31215
  elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
31191
31216
  }
31192
31217
  }
31193
- else if (doc.exitFullscreen) {
31194
- doc.exitFullscreen();
31195
- }
31196
- else if (doc.msExitFullscreen) {
31197
- doc.msExitFullscreen();
31198
- }
31199
- else if (doc.mozCancelFullScreen) {
31200
- doc.mozCancelFullScreen();
31201
- }
31202
- else if (doc.webkitExitFullscreen) {
31203
- doc.webkitExitFullscreen();
31218
+ else {
31219
+ this.exitFullScreen();
31204
31220
  }
31205
31221
  }
31206
31222
  fullScreen() {
@@ -31217,16 +31233,30 @@ class WidgetsDashboardComponent {
31217
31233
  child.fullscreen = !!document.fullscreenElement;
31218
31234
  if (!child.fullscreen) {
31219
31235
  document.removeEventListener('fullscreenchange', onFullScreen);
31236
+ this.widgetFullscreenChangeListener = null;
31220
31237
  document.body.classList.remove('singleWidget');
31221
31238
  // required in case fullscreen is exited by e.g. pressing ESC
31222
31239
  this.onResize.next();
31223
31240
  }
31224
31241
  };
31242
+ this.widgetFullscreenChangeListener = onFullScreen;
31225
31243
  document.addEventListener('fullscreenchange', onFullScreen);
31226
31244
  }
31227
31245
  this.toggleFullscreen(child.fullscreen);
31228
31246
  this.onResize.next();
31229
31247
  }
31248
+ ngOnDestroy() {
31249
+ if (this.widgetInFullscreenMode) {
31250
+ document.body.classList.remove('singleWidget');
31251
+ if (this.widgetFullscreenChangeListener) {
31252
+ document.removeEventListener('fullscreenchange', this.widgetFullscreenChangeListener);
31253
+ this.widgetFullscreenChangeListener = null;
31254
+ }
31255
+ }
31256
+ if (this.fullScreen()) {
31257
+ this.exitFullScreen();
31258
+ }
31259
+ }
31230
31260
  updateWidgetClasses(widget, classes) {
31231
31261
  widget.classes = { ...widget.classes, ...classes };
31232
31262
  }
@@ -31251,6 +31281,21 @@ class WidgetsDashboardComponent {
31251
31281
  this.editMode$.next(true);
31252
31282
  this.contextDashboard.historyDescription = {};
31253
31283
  }
31284
+ exitFullScreen() {
31285
+ const doc = document;
31286
+ if (doc.exitFullscreen) {
31287
+ doc.exitFullscreen();
31288
+ }
31289
+ else if (doc.msExitFullscreen) {
31290
+ doc.msExitFullscreen();
31291
+ }
31292
+ else if (doc.mozCancelFullScreen) {
31293
+ doc.mozCancelFullScreen();
31294
+ }
31295
+ else if (doc.webkitExitFullscreen) {
31296
+ doc.webkitExitFullscreen();
31297
+ }
31298
+ }
31254
31299
  setCopyDisabledPopoverMsg() {
31255
31300
  if (typeof this.isCopyDisabled === 'boolean' || this.isCopyDisabled?.state) {
31256
31301
  return;