@c8y/ngx-components 1018.0.31 → 1018.0.33

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.
@@ -24086,6 +24086,9 @@ class DashboardChildComponent {
24086
24086
  */
24087
24087
  this.lastChange = null;
24088
24088
  }
24089
+ set templateActions(actions) {
24090
+ this.addActions(actions, true);
24091
+ }
24089
24092
  /**
24090
24093
  * Updates the pixel width of the child (used for resizing)
24091
24094
  */
@@ -24177,6 +24180,14 @@ class DashboardChildComponent {
24177
24180
  }
24178
24181
  this.removeSelfFromDashboard();
24179
24182
  }
24183
+ addActions(actions, prepend = false) {
24184
+ if (prepend) {
24185
+ this.actions = [...actions, ...this.actions];
24186
+ }
24187
+ else {
24188
+ this.actions = [...this.actions, ...actions];
24189
+ }
24190
+ }
24180
24191
  removeSelfFromDashboard() {
24181
24192
  const i = this.dashboard.children.indexOf(this);
24182
24193
  if (i >= 0) {
@@ -24195,13 +24206,13 @@ class DashboardChildComponent {
24195
24206
  }
24196
24207
  }
24197
24208
  DashboardChildComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DashboardChildComponent, deps: [{ token: DashboardComponent }, { token: i1$4.DomSanitizer }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
24198
- DashboardChildComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DashboardChildComponent, selector: "c8y-dashboard-child", inputs: { x: "x", y: "y", width: "width", height: "height", data: "data", margin: "margin", isFrozen: "isFrozen", useIntersection: "useIntersection", class: "class" }, outputs: { changeStart: "changeStart", changeEnd: "changeEnd" }, host: { properties: { "attr.style": "this.inlineStyle" }, classAttribute: "dashboard-grid-child" }, queries: [{ propertyName: "actions", predicate: DashboardChildActionComponent }], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList>\n <div *ngIf=\"isResize\" class=\"card-placeholder\"></div>\n <div\n [ngClass]=\"klasses\"\n cdkDrag\n [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n (cdkDragStarted)=\"dragStarted($event)\"\n (cdkDragEnded)=\"reset($event)\"\n [cdkDragDisabled]=\"isFrozen\"\n >\n <div\n class=\"card-header-actions card-header-grid\"\n [ngClass]=\"{ 'drag-handle': !isFrozen, draggableCursor: !isFrozen }\"\n cdkDragHandle\n [style.--dashboard-time-context]=\"\n data?.config?.widgetInstanceGlobalTimeContext ? 'block' : 'none'\n \"\n >\n <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n <div class=\"header-actions d-flex a-i-center\" *ngIf=\"!isFrozen && actions.length > 0\">\n <span class=\"m-l-auto\" style=\"display: var(--dashboard-time-context)\">\n <button\n class=\"btn-clean\"\n tooltip=\"{{ 'This widget is in sync with the dashboard time range.' | translate }}\"\n placement=\"top\"\n container=\"body\"\n [attr.aria-label]=\"'This widget is in sync with the dashboard time range.' | translate\"\n >\n <span class=\"c8y-icon-badge d-inline-flex\">\n <i c8yIcon=\"clock\"></i>\n <span class=\"badge badge-success\">\n <i c8yIcon=\"link\" class=\"text-gray-white\"></i>\n </span>\n </span>\n </button>\n </span>\n <div class=\"optionsBtn dropdown\" dropdown placement=\"bottom right\">\n <button\n title=\"{{ 'Settings' | translate }}\"\n class=\"btnIcon c8y-dropdown\"\n (click)=\"(false)\"\n dropdownToggle\n aria-haspopup=\"true\"\n >\n <i [c8yIcon]=\"'cog'\"></i>\n </button>\n <ul class=\"dropdown-menu dropdown-menu-right\" style=\"right: -1px\" *dropdownMenu>\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 *ngIf=\"!isFrozen && !isDragging\"\n class=\"resize-handle hidden-xs\"\n cdkDrag\n [cdkDragDisabled]=\"isFrozen\"\n (cdkDragStarted)=\"resizeStarted($event)\"\n (cdkDragEnded)=\"reset($event)\"\n ></div>\n <div class=\"resize-icon hidden-xs\" *ngIf=\"!isFrozen && !isDragging\"></div>\n\n <div *cdkDragPlaceholder class=\"card-placeholder\"></div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5$3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i1$5.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$5.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$5.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i1$7.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: "pipe", type: C8yTranslatePipe, name: "translate" }] });
24209
+ DashboardChildComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DashboardChildComponent, selector: "c8y-dashboard-child", inputs: { x: "x", y: "y", width: "width", height: "height", data: "data", margin: "margin", isFrozen: "isFrozen", useIntersection: "useIntersection", class: "class" }, outputs: { changeStart: "changeStart", changeEnd: "changeEnd" }, host: { properties: { "attr.style": "this.inlineStyle" }, classAttribute: "dashboard-grid-child" }, queries: [{ propertyName: "templateActions", predicate: DashboardChildActionComponent }], usesOnChanges: true, ngImport: i0, template: "<div cdkDropList>\n <div *ngIf=\"isResize\" class=\"card-placeholder\"></div>\n <div\n [ngClass]=\"klasses\"\n cdkDrag\n [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n (cdkDragStarted)=\"dragStarted($event)\"\n (cdkDragEnded)=\"reset($event)\"\n [cdkDragDisabled]=\"isFrozen\"\n >\n <div\n class=\"card-header-actions card-header-grid\"\n [ngClass]=\"{ 'drag-handle': !isFrozen, draggableCursor: !isFrozen }\"\n cdkDragHandle\n [style.--dashboard-time-context]=\"\n data?.config?.widgetInstanceGlobalTimeContext ? 'block' : 'none'\n \"\n >\n <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n <div class=\"header-actions d-flex a-i-center\" *ngIf=\"!isFrozen && actions.length > 0\">\n <span class=\"m-l-auto\" style=\"display: var(--dashboard-time-context)\">\n <button\n class=\"btn-clean\"\n tooltip=\"{{ 'This widget is in sync with the dashboard time range.' | translate }}\"\n placement=\"top\"\n container=\"body\"\n [attr.aria-label]=\"'This widget is in sync with the dashboard time range.' | translate\"\n >\n <span class=\"c8y-icon-badge d-inline-flex\">\n <i c8yIcon=\"clock\"></i>\n <span class=\"badge badge-success\">\n <i c8yIcon=\"link\" class=\"text-gray-white\"></i>\n </span>\n </span>\n </button>\n </span>\n <div class=\"optionsBtn dropdown\" dropdown placement=\"bottom right\">\n <button\n title=\"{{ 'Settings' | translate }}\"\n class=\"btnIcon c8y-dropdown\"\n (click)=\"(false)\"\n dropdownToggle\n aria-haspopup=\"true\"\n >\n <i [c8yIcon]=\"'cog'\"></i>\n </button>\n <ul class=\"dropdown-menu dropdown-menu-right\" style=\"right: -1px\" *dropdownMenu>\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 *ngIf=\"!isFrozen && !isDragging\"\n class=\"resize-handle hidden-xs\"\n cdkDrag\n [cdkDragDisabled]=\"isFrozen\"\n (cdkDragStarted)=\"resizeStarted($event)\"\n (cdkDragEnded)=\"reset($event)\"\n ></div>\n <div class=\"resize-icon hidden-xs\" *ngIf=\"!isFrozen && !isDragging\"></div>\n\n <div *cdkDragPlaceholder class=\"card-placeholder\"></div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i5$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5$3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i1$5.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$5.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$5.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i1$7.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: "pipe", type: C8yTranslatePipe, name: "translate" }] });
24199
24210
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DashboardChildComponent, decorators: [{
24200
24211
  type: Component,
24201
24212
  args: [{ selector: 'c8y-dashboard-child', host: {
24202
24213
  class: 'dashboard-grid-child'
24203
24214
  }, template: "<div cdkDropList>\n <div *ngIf=\"isResize\" class=\"card-placeholder\"></div>\n <div\n [ngClass]=\"klasses\"\n cdkDrag\n [ngStyle]=\"{ width: _pxWidth, height: _pxHeight }\"\n (cdkDragStarted)=\"dragStarted($event)\"\n (cdkDragEnded)=\"reset($event)\"\n [cdkDragDisabled]=\"isFrozen\"\n >\n <div\n class=\"card-header-actions card-header-grid\"\n [ngClass]=\"{ 'drag-handle': !isFrozen, draggableCursor: !isFrozen }\"\n cdkDragHandle\n [style.--dashboard-time-context]=\"\n data?.config?.widgetInstanceGlobalTimeContext ? 'block' : 'none'\n \"\n >\n <ng-content select=\"c8y-dashboard-child-title\"></ng-content>\n <div class=\"header-actions d-flex a-i-center\" *ngIf=\"!isFrozen && actions.length > 0\">\n <span class=\"m-l-auto\" style=\"display: var(--dashboard-time-context)\">\n <button\n class=\"btn-clean\"\n tooltip=\"{{ 'This widget is in sync with the dashboard time range.' | translate }}\"\n placement=\"top\"\n container=\"body\"\n [attr.aria-label]=\"'This widget is in sync with the dashboard time range.' | translate\"\n >\n <span class=\"c8y-icon-badge d-inline-flex\">\n <i c8yIcon=\"clock\"></i>\n <span class=\"badge badge-success\">\n <i c8yIcon=\"link\" class=\"text-gray-white\"></i>\n </span>\n </span>\n </button>\n </span>\n <div class=\"optionsBtn dropdown\" dropdown placement=\"bottom right\">\n <button\n title=\"{{ 'Settings' | translate }}\"\n class=\"btnIcon c8y-dropdown\"\n (click)=\"(false)\"\n dropdownToggle\n aria-haspopup=\"true\"\n >\n <i [c8yIcon]=\"'cog'\"></i>\n </button>\n <ul class=\"dropdown-menu dropdown-menu-right\" style=\"right: -1px\" *dropdownMenu>\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 *ngIf=\"!isFrozen && !isDragging\"\n class=\"resize-handle hidden-xs\"\n cdkDrag\n [cdkDragDisabled]=\"isFrozen\"\n (cdkDragStarted)=\"resizeStarted($event)\"\n (cdkDragEnded)=\"reset($event)\"\n ></div>\n <div class=\"resize-icon hidden-xs\" *ngIf=\"!isFrozen && !isDragging\"></div>\n\n <div *cdkDragPlaceholder class=\"card-placeholder\"></div>\n </div>\n</div>\n" }]
24204
- }], ctorParameters: function () { return [{ type: DashboardComponent }, { type: i1$4.DomSanitizer }, { type: i0.ElementRef }]; }, propDecorators: { actions: [{
24215
+ }], ctorParameters: function () { return [{ type: DashboardComponent }, { type: i1$4.DomSanitizer }, { type: i0.ElementRef }]; }, propDecorators: { templateActions: [{
24205
24216
  type: ContentChildren,
24206
24217
  args: [DashboardChildActionComponent]
24207
24218
  }], x: [{
@@ -24241,7 +24252,7 @@ var TimeSpanInMs;
24241
24252
  TimeSpanInMs[TimeSpanInMs["MINUTE"] = 60000] = "MINUTE";
24242
24253
  TimeSpanInMs[TimeSpanInMs["HOUR"] = 3600000] = "HOUR";
24243
24254
  TimeSpanInMs[TimeSpanInMs["DAY"] = 86400000] = "DAY";
24244
- TimeSpanInMs[TimeSpanInMs["WEEK"] = 604800000] = "WEEK"; // 1000 * 60 * 60 * 24 * 7
24255
+ TimeSpanInMs[TimeSpanInMs["WEEK"] = 604800000] = "WEEK";
24245
24256
  })(TimeSpanInMs || (TimeSpanInMs = {}));
24246
24257
 
24247
24258
  /**
@@ -24334,9 +24345,9 @@ class WidgetTimeContextComponent {
24334
24345
  /**
24335
24346
  * @ignore Adding custom actions.
24336
24347
  */
24337
- ngAfterContentChecked() {
24338
- if (this.action) {
24339
- this.dashboardChild.actions = [...this.dashboardChild.actions, this.action];
24348
+ ngAfterViewInit() {
24349
+ if (this.canDecouple) {
24350
+ this.dashboardChild.addActions([this.action]);
24340
24351
  }
24341
24352
  }
24342
24353
  /**
@@ -24524,10 +24535,10 @@ class WidgetTimeContextComponent {
24524
24535
  }
24525
24536
  }
24526
24537
  WidgetTimeContextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WidgetTimeContextComponent, deps: [{ token: WidgetsDashboardEventService }, { token: DashboardChildComponent }, { token: i1$6.Router }, { token: i1$6.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
24527
- WidgetTimeContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WidgetTimeContextComponent, selector: "c8y-widget-time-context", inputs: { canDecouple: "canDecouple" }, outputs: { dateContextChange: "dateContextChange" }, host: { classAttribute: "d-flex a-i-center gap-4" }, viewQueries: [{ propertyName: "action", first: true, predicate: DashboardChildActionComponent, descendants: true }], ngImport: i0, template: "<c8y-action-bar-item\n *ngIf=\"isCoupled\"\n [groupId]=\"'timecontext'\"\n [placement]=\"'left'\"\n itemClass=\"navbar-form\"\n>\n <ng-container\n [ngTemplateOutlet]=\"dateTimePicker\"\n [ngTemplateOutletContext]=\"{ date: globalDate }\"\n ></ng-container>\n</c8y-action-bar-item>\n\n<ng-container\n *ngIf=\"!isCoupled\"\n [ngTemplateOutlet]=\"dateTimePicker\"\n [ngTemplateOutletContext]=\"{ date: localDate }\"\n></ng-container>\n\n<ng-template #dateTimePicker let-date=\"date\">\n <label>{{ 'Time range' | translate }}</label>\n <div\n class=\"dropdown m-r-4\"\n dropdown\n #dropdown=\"bs-dropdown\"\n container=\"body\"\n [insideClick]=\"true\"\n >\n <button\n class=\"dropdown-toggle form-control l-h-1 d-flex a-i-center\"\n dropdownToggle\n title=\"{{ date[0] | c8yDate: 'short' }} \u2014 {{ date[1] | c8yDate: 'short' }}\"\n aria-haspopup=\"true\"\n >\n <span>{{ date[0] | c8yDate: 'shortDate' }} \u2014 {{ date[1] | c8yDate: 'shortDate' }}</span>\n <span class=\"caret m-r-8 m-l-4\"></span>\n </button>\n\n <div *dropdownMenu class=\"dropdown-menu dropdown-menu--date-range\">\n <div class=\"p-16\">\n <formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n </div>\n <div class=\"p-16 d-flex gap-8 separator-top\">\n <button\n class=\"btn btn-default btn-sm flex-grow\"\n (click)=\"reset(); dropdown.isOpen = false\"\n title=\"{{ 'Reset' | translate }}\"\n type=\"button\"\n translate\n >\n Reset\n </button>\n\n <button\n class=\"btn btn-primary btn-sm flex-grow\"\n (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n title=\"{{ 'Apply' | translate }}\"\n type=\"button\"\n translate\n >\n Apply\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"c8y-select-wrapper\">\n <select\n class=\"form-control\"\n [attr.aria-label]=\"'Range' | translate\"\n [ngModel]=\"currentPredefinedTimeSpan\"\n (ngModelChange)=\"predefinedDateFromSelected($event)\"\n >\n <option value=\"undefined\" disabled=\"true\">{{ 'Custom range`time`' | translate }}</option>\n <option *ngFor=\"let dateFrom of predefinedTimeSpanList\" [ngValue]=\"dateFrom\">\n {{ dateFrom.title }}\n </option>\n </select>\n <span></span>\n </div>\n</ng-template>\n\n<c8y-dashboard-child-action *ngIf=\"canDecouple\">\n <button (click)=\"toggleDecoupling();\" type=\"button\">\n <i [c8yIcon]=\"isCoupled ? 'schedule1' : 'today'\"></i>\n <span class=\"m-l-4\">\n {{ (isCoupled ? decoupleTimeContextLabel : coupleTimeContextLabel) | translate }}\n </span>\n </button>\n</c8y-dashboard-child-action>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "directive", type: i1$5.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$5.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$5.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] });
24538
+ WidgetTimeContextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WidgetTimeContextComponent, selector: "c8y-widget-time-context", inputs: { canDecouple: "canDecouple" }, outputs: { dateContextChange: "dateContextChange" }, host: { classAttribute: "d-flex a-i-center gap-4" }, viewQueries: [{ propertyName: "action", first: true, predicate: DashboardChildActionComponent, descendants: true }], ngImport: i0, template: "<c8y-action-bar-item\n *ngIf=\"isCoupled\"\n [groupId]=\"'timecontext'\"\n [placement]=\"'left'\"\n itemClass=\"navbar-form\"\n>\n <ng-container\n [ngTemplateOutlet]=\"dateTimePicker\"\n [ngTemplateOutletContext]=\"{ date: globalDate }\"\n ></ng-container>\n</c8y-action-bar-item>\n\n<ng-container\n *ngIf=\"!isCoupled\"\n [ngTemplateOutlet]=\"dateTimePicker\"\n [ngTemplateOutletContext]=\"{ date: localDate }\"\n></ng-container>\n\n<ng-template #dateTimePicker let-date=\"date\">\n <label>{{ 'Time range' | translate }}</label>\n <div\n class=\"dropdown m-r-4\"\n dropdown\n #dropdown=\"bs-dropdown\"\n container=\"body\"\n [insideClick]=\"true\"\n >\n <button\n class=\"dropdown-toggle form-control l-h-1 d-flex a-i-center\"\n dropdownToggle\n title=\"{{ date[0] | c8yDate: 'short' }} \u2014 {{ date[1] | c8yDate: 'short' }}\"\n aria-haspopup=\"true\"\n >\n <span>{{ date[0] | c8yDate: 'shortDate' }} \u2014 {{ date[1] | c8yDate: 'shortDate' }}</span>\n <span class=\"caret m-r-8 m-l-4\"></span>\n </button>\n\n <div *dropdownMenu class=\"dropdown-menu dropdown-menu--date-range\">\n <div class=\"p-16\">\n <formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n </div>\n <div class=\"p-16 d-flex gap-8 separator-top\">\n <button\n class=\"btn btn-default btn-sm flex-grow\"\n (click)=\"reset(); dropdown.isOpen = false\"\n title=\"{{ 'Reset' | translate }}\"\n type=\"button\"\n translate\n >\n Reset\n </button>\n\n <button\n class=\"btn btn-primary btn-sm flex-grow\"\n (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n title=\"{{ 'Apply' | translate }}\"\n type=\"button\"\n translate\n >\n Apply\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"c8y-select-wrapper\">\n <select\n class=\"form-control\"\n [attr.aria-label]=\"'Range' | translate\"\n [ngModel]=\"currentPredefinedTimeSpan\"\n (ngModelChange)=\"predefinedDateFromSelected($event)\"\n >\n <option value=\"undefined\" disabled=\"true\">{{ 'Custom range`time`' | translate }}</option>\n <option *ngFor=\"let dateFrom of predefinedTimeSpanList\" [ngValue]=\"dateFrom\">\n {{ dateFrom.title }}\n </option>\n </select>\n <span></span>\n </div>\n</ng-template>\n\n<c8y-dashboard-child-action>\n <button (click)=\"toggleDecoupling();\" type=\"button\">\n <i [c8yIcon]=\"isCoupled ? 'schedule1' : 'today'\"></i>\n <span class=\"m-l-4\">\n {{ (isCoupled ? decoupleTimeContextLabel : coupleTimeContextLabel) | translate }}\n </span>\n </button>\n</c8y-dashboard-child-action>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "directive", type: i1$5.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i1$5.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i1$5.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: DashboardChildActionComponent, selector: "c8y-dashboard-child-action" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "c8yDate" }] });
24528
24539
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WidgetTimeContextComponent, decorators: [{
24529
24540
  type: Component,
24530
- args: [{ selector: 'c8y-widget-time-context', host: { class: 'd-flex a-i-center gap-4' }, template: "<c8y-action-bar-item\n *ngIf=\"isCoupled\"\n [groupId]=\"'timecontext'\"\n [placement]=\"'left'\"\n itemClass=\"navbar-form\"\n>\n <ng-container\n [ngTemplateOutlet]=\"dateTimePicker\"\n [ngTemplateOutletContext]=\"{ date: globalDate }\"\n ></ng-container>\n</c8y-action-bar-item>\n\n<ng-container\n *ngIf=\"!isCoupled\"\n [ngTemplateOutlet]=\"dateTimePicker\"\n [ngTemplateOutletContext]=\"{ date: localDate }\"\n></ng-container>\n\n<ng-template #dateTimePicker let-date=\"date\">\n <label>{{ 'Time range' | translate }}</label>\n <div\n class=\"dropdown m-r-4\"\n dropdown\n #dropdown=\"bs-dropdown\"\n container=\"body\"\n [insideClick]=\"true\"\n >\n <button\n class=\"dropdown-toggle form-control l-h-1 d-flex a-i-center\"\n dropdownToggle\n title=\"{{ date[0] | c8yDate: 'short' }} \u2014 {{ date[1] | c8yDate: 'short' }}\"\n aria-haspopup=\"true\"\n >\n <span>{{ date[0] | c8yDate: 'shortDate' }} \u2014 {{ date[1] | c8yDate: 'shortDate' }}</span>\n <span class=\"caret m-r-8 m-l-4\"></span>\n </button>\n\n <div *dropdownMenu class=\"dropdown-menu dropdown-menu--date-range\">\n <div class=\"p-16\">\n <formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n </div>\n <div class=\"p-16 d-flex gap-8 separator-top\">\n <button\n class=\"btn btn-default btn-sm flex-grow\"\n (click)=\"reset(); dropdown.isOpen = false\"\n title=\"{{ 'Reset' | translate }}\"\n type=\"button\"\n translate\n >\n Reset\n </button>\n\n <button\n class=\"btn btn-primary btn-sm flex-grow\"\n (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n title=\"{{ 'Apply' | translate }}\"\n type=\"button\"\n translate\n >\n Apply\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"c8y-select-wrapper\">\n <select\n class=\"form-control\"\n [attr.aria-label]=\"'Range' | translate\"\n [ngModel]=\"currentPredefinedTimeSpan\"\n (ngModelChange)=\"predefinedDateFromSelected($event)\"\n >\n <option value=\"undefined\" disabled=\"true\">{{ 'Custom range`time`' | translate }}</option>\n <option *ngFor=\"let dateFrom of predefinedTimeSpanList\" [ngValue]=\"dateFrom\">\n {{ dateFrom.title }}\n </option>\n </select>\n <span></span>\n </div>\n</ng-template>\n\n<c8y-dashboard-child-action *ngIf=\"canDecouple\">\n <button (click)=\"toggleDecoupling();\" type=\"button\">\n <i [c8yIcon]=\"isCoupled ? 'schedule1' : 'today'\"></i>\n <span class=\"m-l-4\">\n {{ (isCoupled ? decoupleTimeContextLabel : coupleTimeContextLabel) | translate }}\n </span>\n </button>\n</c8y-dashboard-child-action>\n" }]
24541
+ args: [{ selector: 'c8y-widget-time-context', host: { class: 'd-flex a-i-center gap-4' }, template: "<c8y-action-bar-item\n *ngIf=\"isCoupled\"\n [groupId]=\"'timecontext'\"\n [placement]=\"'left'\"\n itemClass=\"navbar-form\"\n>\n <ng-container\n [ngTemplateOutlet]=\"dateTimePicker\"\n [ngTemplateOutletContext]=\"{ date: globalDate }\"\n ></ng-container>\n</c8y-action-bar-item>\n\n<ng-container\n *ngIf=\"!isCoupled\"\n [ngTemplateOutlet]=\"dateTimePicker\"\n [ngTemplateOutletContext]=\"{ date: localDate }\"\n></ng-container>\n\n<ng-template #dateTimePicker let-date=\"date\">\n <label>{{ 'Time range' | translate }}</label>\n <div\n class=\"dropdown m-r-4\"\n dropdown\n #dropdown=\"bs-dropdown\"\n container=\"body\"\n [insideClick]=\"true\"\n >\n <button\n class=\"dropdown-toggle form-control l-h-1 d-flex a-i-center\"\n dropdownToggle\n title=\"{{ date[0] | c8yDate: 'short' }} \u2014 {{ date[1] | c8yDate: 'short' }}\"\n aria-haspopup=\"true\"\n >\n <span>{{ date[0] | c8yDate: 'shortDate' }} \u2014 {{ date[1] | c8yDate: 'shortDate' }}</span>\n <span class=\"caret m-r-8 m-l-4\"></span>\n </button>\n\n <div *dropdownMenu class=\"dropdown-menu dropdown-menu--date-range\">\n <div class=\"p-16\">\n <formly-form [form]=\"form\" [fields]=\"fields\" [model]=\"model\"></formly-form>\n </div>\n <div class=\"p-16 d-flex gap-8 separator-top\">\n <button\n class=\"btn btn-default btn-sm flex-grow\"\n (click)=\"reset(); dropdown.isOpen = false\"\n title=\"{{ 'Reset' | translate }}\"\n type=\"button\"\n translate\n >\n Reset\n </button>\n\n <button\n class=\"btn btn-primary btn-sm flex-grow\"\n (click)=\"applyDatetimeContext(); dropdown.isOpen = false\"\n [disabled]=\"(form.pristine && form.untouched) || form.invalid\"\n title=\"{{ 'Apply' | translate }}\"\n type=\"button\"\n translate\n >\n Apply\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"c8y-select-wrapper\">\n <select\n class=\"form-control\"\n [attr.aria-label]=\"'Range' | translate\"\n [ngModel]=\"currentPredefinedTimeSpan\"\n (ngModelChange)=\"predefinedDateFromSelected($event)\"\n >\n <option value=\"undefined\" disabled=\"true\">{{ 'Custom range`time`' | translate }}</option>\n <option *ngFor=\"let dateFrom of predefinedTimeSpanList\" [ngValue]=\"dateFrom\">\n {{ dateFrom.title }}\n </option>\n </select>\n <span></span>\n </div>\n</ng-template>\n\n<c8y-dashboard-child-action>\n <button (click)=\"toggleDecoupling();\" type=\"button\">\n <i [c8yIcon]=\"isCoupled ? 'schedule1' : 'today'\"></i>\n <span class=\"m-l-4\">\n {{ (isCoupled ? decoupleTimeContextLabel : coupleTimeContextLabel) | translate }}\n </span>\n </button>\n</c8y-dashboard-child-action>\n" }]
24531
24542
  }], ctorParameters: function () { return [{ type: WidgetsDashboardEventService }, { type: DashboardChildComponent }, { type: i1$6.Router }, { type: i1$6.ActivatedRoute }]; }, propDecorators: { canDecouple: [{
24532
24543
  type: Input
24533
24544
  }], dateContextChange: [{