@c8y/ngx-components 1023.48.0 → 1023.48.3

package/fesm2022/c8y-ngx-components-context-dashboard.mjs

@@ -2457,11 +2457,12 @@ class WidgetConfigComponent {
     get isDeviceTypeDashboard() {
         return !!this.mo.c8y_Dashboard?.deviceType && !!this.mo.c8y_Dashboard?.deviceTypeValue;
     }
-    constructor(widgetService, bottomDrawerRef, contextDashboardService, widgetConfigService) {
+    constructor(widgetService, bottomDrawerRef, contextDashboardService, widgetConfigService, drawerService) {
         this.widgetService = widgetService;
         this.bottomDrawerRef = bottomDrawerRef;
         this.contextDashboardService = contextDashboardService;
         this.widgetConfigService = widgetConfigService;
+        this.drawerService = drawerService;
         this.searchChange$ = new Subject();
         this.searchTerm = '';
         this.identifier = crypto.randomUUID();
@@ -2486,8 +2487,10 @@ class WidgetConfigComponent {
         });
     }
     async onEscapePress(event) {
-        event.preventDefault();
-        await this.close();
+        if (this.drawerService.isTop(this.bottomDrawerRef)) {
+            event.preventDefault();
+            await this.close();
+        }
     }
     async ngAfterContentInit() {
         this.components = this.widgetService.getWidgetDefinitions();
@@ -2678,7 +2681,7 @@ class WidgetConfigComponent {
         }
         return widgetConfig;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigComponent, deps: [{ token: WidgetService }, { token: i2.BottomDrawerRef }, { token: ContextDashboardService }, { token: WidgetConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigComponent, deps: [{ token: WidgetService }, { token: i2.BottomDrawerRef }, { token: ContextDashboardService }, { token: WidgetConfigService }, { token: i2.BottomDrawerService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: WidgetConfigComponent, isStandalone: true, selector: "c8y-widget-config", host: { listeners: { "document:keydown.escape": "onEscapePress($event)" }, classAttribute: "d-contents" }, viewQueries: [{ propertyName: "configForm", first: true, predicate: ["configForm"], descendants: true }], ngImport: i0, template: "<!-- select widget -->\n@if (!(widgetConfigService.selected$ | async)) {\n  <div class=\"card-header j-c-center separator\">\n    <div\n      class=\"h4 text-center\"\n      id=\"drawerTitle\"\n    >\n      {{ 'Select widget' | translate }}\n    </div>\n  </div>\n  <div class=\"card-inner-scroll fit-h bg-level-2\">\n    <div\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0 elevation-md\"\n      style=\"z-index: 2\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6 col-sm-offset-3\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Search' | translate\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\n              type=\"text\"\n              data-cy=\"widget-config--Search\"\n              [(ngModel)]=\"searchTerm\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (keydown)=\"searchChange$.next($event)\"\n            />\n            <span class=\"input-group-btn\">\n              <button\n                class=\"btn btn-dot\"\n                title=\"{{ 'Search' | translate }}\"\n                type=\"button\"\n                (click)=\"resetSearch()\"\n              >\n                <i [c8yIcon]=\"searchTerm.length === 0 ? 'search' : 'close'\"></i>\n              </button>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-block\">\n      <div class=\"card-group p-l-24 p-r-24 d-grid grid__col--auto-300 gap-24 card-select m-b-0\">\n        @for (cmp of searchResult || components; track cmp) {\n          <button\n            class=\"btn-clean d-col card m-b-0\"\n            [title]=\"cmp.description || cmp.label | translate\"\n            type=\"button\"\n            data-cy=\"widget-config--widget-list\"\n            (click)=\"select(cmp)\"\n          >\n            <div\n              class=\"border-bottom\"\n              role=\"presentation\"\n            >\n              @if (!cmp.previewImage) {\n                <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n                <small translate>Preview not available</small>\n              } @else {\n                <img\n                  class=\"widget-thumbnail\"\n                  alt=\"{{ cmp.label | translate }}\"\n                  [src]=\"cmp.previewImage\"\n                />\n              }\n            </div>\n            <div class=\"card-block\">\n              <p class=\"card-title text-truncate text-medium\">\n                <c8y-highlight\n                  text=\"{{ cmp.label | translate }}\"\n                  [pattern]=\"searchTerm\"\n                ></c8y-highlight>\n              </p>\n              <p\n                class=\"small text-default\"\n                style=\"white-space: wrap\"\n              >\n                {{ cmp.description | translate }}\n              </p>\n            </div>\n          </button>\n        }\n        @if (searchResult && searchResult.length === 0) {\n          <c8y-ui-empty-state\n            class=\"p-24 grid__col--fullspan\"\n            [icon]=\"'search'\"\n            [title]=\"'No widgets found.' | translate\"\n            [subtitle]=\"'Rephrase your search term.' | translate\"\n          >\n            <button\n              class=\"btn btn-primary\"\n              title=\"{{ 'Reset search' | translate }}\"\n              type=\"button\"\n              (click)=\"resetSearch()\"\n            >\n              {{ 'Reset search' | translate }}\n            </button>\n          </c8y-ui-empty-state>\n        }\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer text-center separator flex-no-shrink\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n  </div>\n}\n\n<!-- widget configuration -->\n@if (!!(widgetConfigService.selected$ | async)) {\n  <div class=\"card-header d-block separator-bottom flex-no-shrink\">\n    <div\n      class=\"h3 p-t-16\"\n      title=\"{{ selected?.label | translate }}\"\n    >\n      <span>{{ selected?.label | translate }}</span>\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        [title]=\"'Change widget' | translate\"\n        (click)=\"backToWidgetSelection(); (false)\"\n      >\n        <i c8yIcon=\"replace\"></i>\n        {{ 'Change widget' | translate }}\n      </button>\n    </div>\n    @if (selected) {\n      <div class=\"p-t-8\">\n        <p>\n          {{ selected.description | translate }}\n        </p>\n      </div>\n    }\n  </div>\n\n  <c8y-resizable-grid\n    class=\"min-height-0 flex-grow\"\n    [collapsible]=\"false\"\n    [trackId]=\"'c8y-widget-resizable-grid-size-' + (widgetConfigService.instanceId$ | async)\"\n    [leftColumnWidth]=\"\n      (widgetConfigService.currentConfig$ | async)?.settings?.configurationViewGridSize ||\n      WIDGET_CONFIGURATION_GRID_SIZE.HALF\n    \"\n  >\n    <div\n      class=\"bg-level-1 inner-scroll\"\n      left-pane\n    >\n      <div class=\"p-16 flex-no-shrink separator-bottom bg-level-1\">\n        <c8y-form-group>\n          <label\n            for=\"widgetTitle\"\n            translate\n          >\n            Widget title\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"widgetTitle\"\n            placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n            name=\"widgetTitle\"\n            type=\"text\"\n            required\n            [(ngModel)]=\"widgetTitle\"\n            (ngModelChange)=\"onWidgetTitleChange($event)\"\n          />\n        </c8y-form-group>\n      </div>\n\n      @if (!(widgetConfigService.hasConfig$ | async)) {\n        <c8y-ui-empty-state\n          class=\"p-24\"\n          [icon]=\"'settings'\"\n          [title]=\"'No configuration needed.' | translate\"\n          [subtitle]=\"'This widget does not need any specific configuration.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      }\n      <div>\n        <form\n          name=\"form\"\n          #configForm=\"ngForm\"\n        >\n          @if (widgetConfigService.hasConfig$ | async) {\n            @if (widgetConfigService.providers$ | async; as providers) {\n              <ng-container\n                *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n              ></ng-container>\n            }\n          }\n        </form>\n      </div>\n    </div>\n\n    <div\n      class=\"inner-scroll p-32 p-t-0\"\n      right-pane\n    >\n      <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n\n      <c8y-appearance-settings\n        [(themeClass)]=\"styling.contentClass\"\n        [(headerClass)]=\"styling.headerClass\"\n        [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n        [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n        [defaultThemeClass]=\"defaultStyling.contentClass\"\n        [defaultHeaderClass]=\"defaultStyling.headerClass\"\n        [columns]=\"2\"\n      ></c8y-appearance-settings>\n    </div>\n  </c8y-resizable-grid>\n\n  <div class=\"card-footer separator text-center\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      data-cy=\"widget-config--save-widget\"\n      (click)=\"save()\"\n      [disabled]=\"(contextDashboardService.formDisabled$ | async) || isSaveDisabled()\"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "directive", type: C8yComponentOutlet, selector: "[c8yComponentOutlet]", inputs: ["c8yComponentOutlet", "c8yComponentOutletInjector", "c8yComponentOutletEnvironmentInjector", "c8yComponentOutletProviders", "c8yComponentOutletInitialState"] }, { kind: "component", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: ["previewClasses"] }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "dashboardSettings", "possibleStylingTheme", "possibleStylingHeader", "columns"], outputs: ["themeClassChange", "headerClassChange", "onChange"] }, { kind: "directive", type: ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: ResizableGridComponent, selector: "c8y-resizable-grid", inputs: ["leftColumnWidth", "trackId", "collapseThreshold", "collapsible"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WidgetConfigComponent, decorators: [{
@@ -2699,7 +2702,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         AsyncPipe,
                         ResizableGridComponent
                     ], standalone: true, template: "<!-- select widget -->\n@if (!(widgetConfigService.selected$ | async)) {\n  <div class=\"card-header j-c-center separator\">\n    <div\n      class=\"h4 text-center\"\n      id=\"drawerTitle\"\n    >\n      {{ 'Select widget' | translate }}\n    </div>\n  </div>\n  <div class=\"card-inner-scroll fit-h bg-level-2\">\n    <div\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0 elevation-md\"\n      style=\"z-index: 2\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6 col-sm-offset-3\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              [attr.aria-label]=\"'Search' | translate\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\n              type=\"text\"\n              data-cy=\"widget-config--Search\"\n              [(ngModel)]=\"searchTerm\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              (keydown)=\"searchChange$.next($event)\"\n            />\n            <span class=\"input-group-btn\">\n              <button\n                class=\"btn btn-dot\"\n                title=\"{{ 'Search' | translate }}\"\n                type=\"button\"\n                (click)=\"resetSearch()\"\n              >\n                <i [c8yIcon]=\"searchTerm.length === 0 ? 'search' : 'close'\"></i>\n              </button>\n            </span>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"card-block\">\n      <div class=\"card-group p-l-24 p-r-24 d-grid grid__col--auto-300 gap-24 card-select m-b-0\">\n        @for (cmp of searchResult || components; track cmp) {\n          <button\n            class=\"btn-clean d-col card m-b-0\"\n            [title]=\"cmp.description || cmp.label | translate\"\n            type=\"button\"\n            data-cy=\"widget-config--widget-list\"\n            (click)=\"select(cmp)\"\n          >\n            <div\n              class=\"border-bottom\"\n              role=\"presentation\"\n            >\n              @if (!cmp.previewImage) {\n                <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n                <small translate>Preview not available</small>\n              } @else {\n                <img\n                  class=\"widget-thumbnail\"\n                  alt=\"{{ cmp.label | translate }}\"\n                  [src]=\"cmp.previewImage\"\n                />\n              }\n            </div>\n            <div class=\"card-block\">\n              <p class=\"card-title text-truncate text-medium\">\n                <c8y-highlight\n                  text=\"{{ cmp.label | translate }}\"\n                  [pattern]=\"searchTerm\"\n                ></c8y-highlight>\n              </p>\n              <p\n                class=\"small text-default\"\n                style=\"white-space: wrap\"\n              >\n                {{ cmp.description | translate }}\n              </p>\n            </div>\n          </button>\n        }\n        @if (searchResult && searchResult.length === 0) {\n          <c8y-ui-empty-state\n            class=\"p-24 grid__col--fullspan\"\n            [icon]=\"'search'\"\n            [title]=\"'No widgets found.' | translate\"\n            [subtitle]=\"'Rephrase your search term.' | translate\"\n          >\n            <button\n              class=\"btn btn-primary\"\n              title=\"{{ 'Reset search' | translate }}\"\n              type=\"button\"\n              (click)=\"resetSearch()\"\n            >\n              {{ 'Reset search' | translate }}\n            </button>\n          </c8y-ui-empty-state>\n        }\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer text-center separator flex-no-shrink\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n  </div>\n}\n\n<!-- widget configuration -->\n@if (!!(widgetConfigService.selected$ | async)) {\n  <div class=\"card-header d-block separator-bottom flex-no-shrink\">\n    <div\n      class=\"h3 p-t-16\"\n      title=\"{{ selected?.label | translate }}\"\n    >\n      <span>{{ selected?.label | translate }}</span>\n      <button\n        class=\"btn btn-default btn-sm m-l-8\"\n        [title]=\"'Change widget' | translate\"\n        (click)=\"backToWidgetSelection(); (false)\"\n      >\n        <i c8yIcon=\"replace\"></i>\n        {{ 'Change widget' | translate }}\n      </button>\n    </div>\n    @if (selected) {\n      <div class=\"p-t-8\">\n        <p>\n          {{ selected.description | translate }}\n        </p>\n      </div>\n    }\n  </div>\n\n  <c8y-resizable-grid\n    class=\"min-height-0 flex-grow\"\n    [collapsible]=\"false\"\n    [trackId]=\"'c8y-widget-resizable-grid-size-' + (widgetConfigService.instanceId$ | async)\"\n    [leftColumnWidth]=\"\n      (widgetConfigService.currentConfig$ | async)?.settings?.configurationViewGridSize ||\n      WIDGET_CONFIGURATION_GRID_SIZE.HALF\n    \"\n  >\n    <div\n      class=\"bg-level-1 inner-scroll\"\n      left-pane\n    >\n      <div class=\"p-16 flex-no-shrink separator-bottom bg-level-1\">\n        <c8y-form-group>\n          <label\n            for=\"widgetTitle\"\n            translate\n          >\n            Widget title\n          </label>\n          <input\n            class=\"form-control\"\n            id=\"widgetTitle\"\n            placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n            name=\"widgetTitle\"\n            type=\"text\"\n            required\n            [(ngModel)]=\"widgetTitle\"\n            (ngModelChange)=\"onWidgetTitleChange($event)\"\n          />\n        </c8y-form-group>\n      </div>\n\n      @if (!(widgetConfigService.hasConfig$ | async)) {\n        <c8y-ui-empty-state\n          class=\"p-24\"\n          [icon]=\"'settings'\"\n          [title]=\"'No configuration needed.' | translate\"\n          [subtitle]=\"'This widget does not need any specific configuration.' | translate\"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      }\n      <div>\n        <form\n          name=\"form\"\n          #configForm=\"ngForm\"\n        >\n          @if (widgetConfigService.hasConfig$ | async) {\n            @if (widgetConfigService.providers$ | async; as providers) {\n              <ng-container\n                *c8yComponentOutlet=\"widgetConfigRoot; providers: providers\"\n              ></ng-container>\n            }\n          }\n        </form>\n      </div>\n    </div>\n\n    <div\n      class=\"inner-scroll p-32 p-t-0\"\n      right-pane\n    >\n      <c8y-widget-preview [previewClasses]=\"getStyle(true)\"></c8y-widget-preview>\n\n      <c8y-appearance-settings\n        [(themeClass)]=\"styling.contentClass\"\n        [(headerClass)]=\"styling.headerClass\"\n        [possibleStylingTheme]=\"possibleStyling.WIDGET_CONTENT_CLASSES\"\n        [possibleStylingHeader]=\"possibleStyling.WIDGET_HEADER_CLASSES\"\n        [defaultThemeClass]=\"defaultStyling.contentClass\"\n        [defaultHeaderClass]=\"defaultStyling.headerClass\"\n        [columns]=\"2\"\n      ></c8y-appearance-settings>\n    </div>\n  </c8y-resizable-grid>\n\n  <div class=\"card-footer separator text-center\">\n    <button\n      class=\"btn btn-default\"\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      data-cy=\"widget-config--cancel-widget\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      data-cy=\"widget-config--save-widget\"\n      (click)=\"save()\"\n      [disabled]=\"(contextDashboardService.formDisabled$ | async) || isSaveDisabled()\"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n}\n" }]
-        }], ctorParameters: () => [{ type: WidgetService }, { type: i2.BottomDrawerRef }, { type: ContextDashboardService }, { type: WidgetConfigService }], propDecorators: { configForm: [{
+        }], ctorParameters: () => [{ type: WidgetService }, { type: i2.BottomDrawerRef }, { type: ContextDashboardService }, { type: WidgetConfigService }, { type: i2.BottomDrawerService }], propDecorators: { configForm: [{
                 type: ViewChild,
                 args: ['configForm', { static: false }]
             }], onEscapePress: [{
@@ -2959,7 +2962,8 @@ class ContextDashboardComponent {
         const bottomDrawer = this.bottomDrawerService.openDrawer(WidgetConfigComponent, {
             initialState,
             closeOnNavigation: false,
-            disableClickOutside: true
+            disableClickOutside: true,
+            closeOnEscape: false
         });
         try {
             const newWidget = await bottomDrawer.instance.result;