npm - @c8y/ngx-components - Versions diffs - 1018.0.30 → 1018.0.31 - Mend

@c8y/ngx-components 1018.0.30 → 1018.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/fesm2020/c8y-ngx-components-context-dashboard.mjs CHANGED Viewed

@@ -1266,10 +1266,10 @@ class WidgetConfigComponent {
     }
 }
 WidgetConfigComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WidgetConfigComponent, deps: [{ token: WidgetService }, { token: i3$1.BsModalRef }, { token: i1.InventoryService }, { token: ContextDashboardService }], target: i0.ɵɵFactoryTarget.Component });
-WidgetConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WidgetConfigComponent, selector: "c8y-widget-config", viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["config"], descendants: true }], ngImport: i0, template: "<div class=\"modal-header separator\">\n  <div\n    id=\"modal-title\"\n    class=\"h3\"\n    title=\"{{ 'Add widget' | translate }}\"\n    *ngIf=\"!current\"\n    translate\n  >\n    Add widget\n  </div>\n  <div\n    id=\"modal-title\"\n    class=\"h3\"\n    title=\"{{ 'Edit widget' | translate }}\"\n    *ngIf=\"current\"\n    translate\n  >\n    Edit widget\n  </div>\n</div>\n<form #configForm=\"ngForm\" name=\"form\">\n  <div class=\"c8y-modal-tabs\" id=\"modal-body\">\n    <div class=\"tabContainer\">\n      <ul class=\"nav nav-tabs nav-tabsc8y p-l-24\">\n        <li [class.active]=\"mode === 'select'\">\n          <button\n            title=\"{{ 'Select widget' | translate }}\"\n            type=\"button\"\n            class=\"btn\"\n            (click)=\"changeMode('select'); (false)\"\n          >\n            <i c8yIcon=\"th-large\"></i>\n            <span translate>Select widget</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'config'\">\n          <button\n            title=\"{{ 'Configuration' | translate }}\"\n            type=\"button\"\n            class=\"btn\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('config'); (false)\"\n          >\n            <i c8yIcon=\"cog\"></i>\n            <span translate>Configuration</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'style'\">\n          <button\n            title=\"{{ 'Appearance' | translate }}\"\n            type=\"button\"\n            class=\"btn\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('style'); (false)\"\n          >\n            <i c8yIcon=\"paint-brush\"></i>\n            <span translate>Appearance</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"modal-inner-scroll modal-inner-scroll--fixed\">\n    <div\n      *ngIf=\"mode === 'select'\"\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0\"\n      style=\"z-index: 2\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6\">\n          <div class=\"input-group input-group-search\">\n            <input\n              [attr.aria-label]=\"'Search' | translate\"\n              class=\"form-control\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\n              type=\"text\"\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=\"modal-body bg-level-2\" *ngIf=\"mode === 'select'\">\n      <div class=\"card-group card-select m-b-0\">\n        <div\n          class=\"col-md-3 col-sm-4 col-xs-6\"\n          *ngFor=\"let cmp of searchResult || components\"\n          title=\"{{ cmp.description | translate }}\"\n        >\n          <button\n            type=\"button\"\n            class=\"btn-clean card p-8\"\n            [class.active]=\"selected === cmp\"\n            (click)=\"select(cmp)\"\n          >\n            <div class=\"text-center p-8 m-b-8 d-col flex-center bg-level-2\" role=\"presentation\">\n              <ng-container *ngIf=\"!cmp.previewImage; else previewImage\">\n                <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n                <small translate>Preview not available</small>\n              </ng-container>\n              <ng-template #previewImage>\n                <img class=\"img-responsive\" alt=\"\" [src]=\"cmp.previewImage\" />\n              </ng-template>\n            </div>\n            <p class=\"card-title text-truncate\">\n              <c8y-highlight\n                text=\"{{ cmp.label | translate }}\"\n                [pattern]=\"searchTerm\"\n              ></c8y-highlight>\n            </p>\n          </button>\n        </div>\n\n        <div class=\"c8y-empty-state text-center\" *ngIf=\"searchResult && searchResult.length === 0\">\n          <div class=\"h1\" c8yIcon=\"search\"></div>\n          <h3 translate>No widgets found.</h3>\n          <div class=\"d-flex\">\n            <p translate class=\"m-r-8\">Rephrase your search term.</p>\n            <button\n              title=\"{{ 'Reset search' | translate }}\"\n              class=\"btn btn-primary\"\n              type=\"button\"\n              (click)=\"resetSearch()\"\n            >\n              {{ 'Reset search' | translate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- The following is intentional set to hidden to allow the ViewChild ref in the controller -->\n    <div *ngIf=\"selected\" [ngClass]=\"{ hidden: mode !== 'config' }\" class=\"d-flex d-col fit-h\">\n      <div class=\"p-t-16 flex-no-shrink separator-bottom p-b-16\">\n        <div class=\"row\">\n          <div class=\"col-sm-4\">\n            <div class=\"p-l-24\">\n              <div class=\"text-left text-medium h4\">\n                {{ selected.label | translate }}\n              </div>\n              <p>\n                {{ selected.description | translate }}\n              </p>\n            </div>\n          </div>\n          <div class=\"col-sm-8\">\n            <div class=\"p-r-24\">\n              <c8y-form-group>\n                <label for=\"widgetTitle\" translate>Title</label>\n                <input\n                  id=\"widgetTitle\"\n                  [(ngModel)]=\"selected.data.title\"\n                  type=\"text\"\n                  name=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n                  required\n                />\n              </c8y-form-group>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"row flex-grow\" [ngClass]=\"{ 'd-flex': widgetConfig.options || hasConfig() }\">\n        <div\n          *ngIf=\"!widgetConfig.settings?.noDeviceTarget\"\n          class=\"a-s-stretch\"\n          [ngClass]=\"{\n            'bg-level-1 col-sm-4 p-r-0': hasConfig(),\n            'bg-level-0 col-sm-12': !hasConfig()\n          }\"\n        >\n          <div class=\"fit-h bg-inherit p-l-16\" [ngClass]=\"{ 'p-r-24': !hasConfig() }\">\n            <div class=\"p-relative bg-inherit\">\n              <c8y-asset-selector-miller\n                (onSelected)=\"selectionChanged($event)\"\n                (onClearSelected)=\"selectionChanged()\"\n                [config]=\"{\n                  view: 'miller',\n                  groupsSelectable: this.widgetConfig.settings?.groupsSelectable,\n                  showChildDevices: true,\n                  columnHeaders: true,\n                  showUnassignedDevices: true,\n                  search: !this.widgetConfig.settings.context?.additionParents,\n                  showFilter: true,\n                  singleColumn: !!this.hasConfig()\n                }\"\n                [asset]=\"widgetConfig.settings?.context\"\n                [selectedDevice]=\"selectedDevice\"\n                class=\"d-block bg-inherit p-relative\"\n                style=\"height: calc(100vh - 406px)\"\n              ></c8y-asset-selector-miller>\n            </div>\n          </div>\n        </div>\n        <div\n          [ngClass]=\"{\n            'col-sm-8': !widgetConfig.settings?.noDeviceTarget,\n            'col-sm-12': widgetConfig.settings?.noDeviceTarget,\n            'sr-only': !hasConfig()\n          }\"\n        >\n          <c8y-dynamic-component\n            class=\"d-block\"\n            [ngClass]=\"{ 'inner-scroll p-r-24': !widgetConfig.settings?.noDeviceTarget }\"\n            style=\"{{ hasConfig() ? 'height: calc(100vh - 406px);' : 'height: 0;' }}\"\n            [componentId]=\"selected.id\"\n            mode=\"config\"\n            [config]=\"widgetConfig\"\n            [notFoundError]=\"false\"\n            #config\n          ></c8y-dynamic-component>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"mode === 'style'\" class=\"modal-body p-t-0\" style=\"height: calc(100vh - 310px)\">\n      <div class=\"row\">\n        <div class=\"col-xs-6\">\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          ></c8y-appearance-settings>\n        </div>\n        <div class=\"col-xs-6 sticky-header-top-0\">\n          <c8y-widget-preview\n            [previewClasses]=\"getStyle(true)\"\n            style=\"height: calc(100vh - 382px)\"\n          ></c8y-widget-preview>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-default\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      class=\"btn btn-primary\"\n      (click)=\"save()\"\n      [disabled]=\"\n        contextDashboardService.formDisabled || configForm.invalid || checkIfDeviceRequired()\n      \"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i5.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i5.DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "directive", type: i5.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: i8$1.MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "possibleStylingTheme", "possibleStylingHeader"], outputs: ["themeClassChange", "headerClassChange"] }, { kind: "component", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: ["previewClasses", "tab"] }, { kind: "pipe", type: i5.C8yTranslatePipe, name: "translate" }] });
+WidgetConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: WidgetConfigComponent, selector: "c8y-widget-config", viewQueries: [{ propertyName: "dynamicComponent", first: true, predicate: ["config"], descendants: true }], ngImport: i0, template: "<div class=\"modal-header separator\">\n  <div\n    class=\"h3\"\n    title=\"{{ 'Add widget' | translate }}\"\n    id=\"modal-title\"\n    *ngIf=\"!current\"\n    translate\n  >\n    Add widget\n  </div>\n  <div\n    class=\"h3\"\n    title=\"{{ 'Edit widget' | translate }}\"\n    id=\"modal-title\"\n    *ngIf=\"current\"\n    translate\n  >\n    Edit widget\n  </div>\n</div>\n<form name=\"form\" #configForm=\"ngForm\">\n  <div class=\"c8y-modal-tabs\" id=\"modal-body\">\n    <div class=\"tabContainer\">\n      <ul class=\"nav nav-tabs nav-tabsc8y p-l-24\">\n        <li [class.active]=\"mode === 'select'\">\n          <button\n            class=\"btn\"\n            type=\"button\"\n            title=\"{{ 'Select widget' | translate }}\"\n            (click)=\"changeMode('select'); (false)\"\n          >\n            <i c8yIcon=\"th-large\"></i>\n            <span translate>Select widget</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'config'\">\n          <button\n            class=\"btn\"\n            type=\"button\"\n            title=\"{{ 'Configuration' | translate }}\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('config'); (false)\"\n          >\n            <i c8yIcon=\"cog\"></i>\n            <span translate>Configuration</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'style'\">\n          <button\n            class=\"btn\"\n            type=\"button\"\n            title=\"{{ 'Appearance' | translate }}\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('style'); (false)\"\n          >\n            <i c8yIcon=\"paint-brush\"></i>\n            <span translate>Appearance</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"modal-inner-scroll modal-inner-scroll--fixed\">\n    <div\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0\"\n      style=\"z-index: 2\"\n      *ngIf=\"mode === 'select'\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              data-cy=\"widget-config--Search\"\n              type=\"text\"\n              [attr.aria-label]=\"'Search' | translate\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\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                type=\"button\"\n                title=\"{{ 'Search' | translate }}\"\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=\"modal-body bg-level-2\" *ngIf=\"mode === 'select'\">\n      <div class=\"card-group card-select m-b-0\">\n        <div\n          class=\"col-md-3 col-sm-4 col-xs-6\"\n          title=\"{{ cmp.description | translate }}\"\n          *ngFor=\"let cmp of searchResult || components\"\n        >\n          <button\n            class=\"btn-clean card p-8\"\n            type=\"button\"\n            [class.active]=\"selected === cmp\"\n            (click)=\"select(cmp)\"\n          >\n            <div class=\"text-center p-8 m-b-8 d-col flex-center bg-level-2\" role=\"presentation\">\n              <ng-container *ngIf=\"!cmp.previewImage; else previewImage\">\n                <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n                <small translate>Preview not available</small>\n              </ng-container>\n              <ng-template #previewImage>\n                <img class=\"img-responsive\" alt [src]=\"cmp.previewImage\" />\n              </ng-template>\n            </div>\n            <p class=\"card-title text-truncate\">\n              <c8y-highlight\n                text=\"{{ cmp.label | translate }}\"\n                [pattern]=\"searchTerm\"\n              ></c8y-highlight>\n            </p>\n          </button>\n        </div>\n\n        <div class=\"c8y-empty-state text-center\" *ngIf=\"searchResult && searchResult.length === 0\">\n          <div class=\"h1\" c8yIcon=\"search\"></div>\n          <h3 translate>No widgets found.</h3>\n          <div class=\"d-flex\">\n            <p class=\"m-r-8\" translate>Rephrase your search term.</p>\n            <button\n              class=\"btn btn-primary\"\n              type=\"button\"\n              title=\"{{ 'Reset search' | translate }}\"\n              (click)=\"resetSearch()\"\n            >\n              {{ 'Reset search' | translate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- The following is intentional set to hidden to allow the ViewChild ref in the controller -->\n    <div class=\"d-flex d-col fit-h\" *ngIf=\"selected\" [ngClass]=\"{ hidden: mode !== 'config' }\">\n      <div class=\"p-t-16 flex-no-shrink separator-bottom p-b-16\">\n        <div class=\"row\">\n          <div class=\"col-sm-4\">\n            <div class=\"p-l-24\">\n              <div class=\"text-left text-medium h4\">\n                {{ selected.label | translate }}\n              </div>\n              <p>\n                {{ selected.description | translate }}\n              </p>\n            </div>\n          </div>\n          <div class=\"col-sm-8\">\n            <div class=\"p-r-24\">\n              <c8y-form-group>\n                <label for=\"widgetTitle\" translate>Title</label>\n                <input\n                  class=\"form-control\"\n                  type=\"text\"\n                  id=\"widgetTitle\"\n                  name=\"title\"\n                  [(ngModel)]=\"selected.data.title\"\n                  placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n                  required\n                />\n              </c8y-form-group>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"row flex-grow\" [ngClass]=\"{ 'd-flex': widgetConfig.options || hasConfig() }\">\n        <div\n          class=\"a-s-stretch\"\n          *ngIf=\"!widgetConfig.settings?.noDeviceTarget\"\n          [ngClass]=\"{\n            'bg-level-1 col-sm-4 p-r-0': hasConfig(),\n            'bg-level-0 col-sm-12': !hasConfig()\n          }\"\n        >\n          <div class=\"fit-h bg-inherit p-l-16\" [ngClass]=\"{ 'p-r-24': !hasConfig() }\">\n            <div class=\"p-relative bg-inherit\">\n              <c8y-asset-selector-miller\n                class=\"d-block bg-inherit p-relative\"\n                style=\"height: calc(100vh - 422px)\"\n                (onSelected)=\"selectionChanged($event)\"\n                (onClearSelected)=\"selectionChanged()\"\n                [config]=\"{\n                  view: 'miller',\n                  groupsSelectable: this.widgetConfig.settings?.groupsSelectable,\n                  showChildDevices: true,\n                  columnHeaders: true,\n                  showUnassignedDevices: true,\n                  search: !this.widgetConfig.settings.context?.additionParents,\n                  showFilter: true,\n                  singleColumn: !!this.hasConfig()\n                }\"\n                [asset]=\"widgetConfig.settings?.context\"\n                [selectedDevice]=\"selectedDevice\"\n              ></c8y-asset-selector-miller>\n            </div>\n          </div>\n        </div>\n        <div\n          [ngClass]=\"{\n            'col-sm-8': !widgetConfig.settings?.noDeviceTarget,\n            'col-sm-12': widgetConfig.settings?.noDeviceTarget,\n            'sr-only': !hasConfig()\n          }\"\n        >\n          <c8y-dynamic-component\n            class=\"d-block\"\n            style=\"height: {{ hasConfig() ? 'calc(100vh - 422px)' : '0' }}\"\n            [ngClass]=\"{ 'inner-scroll p-r-24': !widgetConfig.settings?.noDeviceTarget }\"\n            [componentId]=\"selected.id\"\n            mode=\"config\"\n            [config]=\"widgetConfig\"\n            [notFoundError]=\"false\"\n            #config\n          ></c8y-dynamic-component>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"modal-body p-t-0\" style=\"height: calc(100vh - 310px)\" *ngIf=\"mode === 'style'\">\n      <div class=\"row\">\n        <div class=\"col-xs-6\">\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          ></c8y-appearance-settings>\n        </div>\n        <div class=\"col-xs-6 sticky-header-top-0\">\n          <c8y-widget-preview\n            style=\"height: calc(100vh - 382px)\"\n            [previewClasses]=\"getStyle(true)\"\n          ></c8y-widget-preview>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"submit\"\n      title=\"{{ 'Save' | translate }}\"\n      (click)=\"save()\"\n      [disabled]=\"\n        contextDashboardService.formDisabled || configForm.invalid || checkIfDeviceRequired()\n      \"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n", dependencies: [{ kind: "directive", type: i5.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i5.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i5$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.HighlightComponent, selector: "c8y-highlight", inputs: ["pattern", "text", "elementClass", "shouldTrimPattern"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i5.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i5.DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "directive", type: i5.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "component", type: i8$1.MillerViewComponent, selector: "c8y-asset-selector-miller", inputs: ["config", "asset", "selectedDevice", "rootNode", "container"], outputs: ["onSelected", "onClearSelected"] }, { kind: "component", type: AppearanceSettingsComponent, selector: "c8y-appearance-settings", inputs: ["themeClass", "headerClass", "defaultThemeClass", "defaultHeaderClass", "possibleStylingTheme", "possibleStylingHeader"], outputs: ["themeClassChange", "headerClassChange"] }, { kind: "component", type: WidgetPreviewComponent, selector: "c8y-widget-preview", inputs: ["previewClasses", "tab"] }, { kind: "pipe", type: i5.C8yTranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: WidgetConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-widget-config', template: "<div class=\"modal-header separator\">\n  <div\n    id=\"modal-title\"\n    class=\"h3\"\n    title=\"{{ 'Add widget' | translate }}\"\n    *ngIf=\"!current\"\n    translate\n  >\n    Add widget\n  </div>\n  <div\n    id=\"modal-title\"\n    class=\"h3\"\n    title=\"{{ 'Edit widget' | translate }}\"\n    *ngIf=\"current\"\n    translate\n  >\n    Edit widget\n  </div>\n</div>\n<form #configForm=\"ngForm\" name=\"form\">\n  <div class=\"c8y-modal-tabs\" id=\"modal-body\">\n    <div class=\"tabContainer\">\n      <ul class=\"nav nav-tabs nav-tabsc8y p-l-24\">\n        <li [class.active]=\"mode === 'select'\">\n          <button\n            title=\"{{ 'Select widget' | translate }}\"\n            type=\"button\"\n            class=\"btn\"\n            (click)=\"changeMode('select'); (false)\"\n          >\n            <i c8yIcon=\"th-large\"></i>\n            <span translate>Select widget</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'config'\">\n          <button\n            title=\"{{ 'Configuration' | translate }}\"\n            type=\"button\"\n            class=\"btn\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('config'); (false)\"\n          >\n            <i c8yIcon=\"cog\"></i>\n            <span translate>Configuration</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'style'\">\n          <button\n            title=\"{{ 'Appearance' | translate }}\"\n            type=\"button\"\n            class=\"btn\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('style'); (false)\"\n          >\n            <i c8yIcon=\"paint-brush\"></i>\n            <span translate>Appearance</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"modal-inner-scroll modal-inner-scroll--fixed\">\n    <div\n      *ngIf=\"mode === 'select'\"\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0\"\n      style=\"z-index: 2\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6\">\n          <div class=\"input-group input-group-search\">\n            <input\n              [attr.aria-label]=\"'Search' | translate\"\n              class=\"form-control\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\n              type=\"text\"\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=\"modal-body bg-level-2\" *ngIf=\"mode === 'select'\">\n      <div class=\"card-group card-select m-b-0\">\n        <div\n          class=\"col-md-3 col-sm-4 col-xs-6\"\n          *ngFor=\"let cmp of searchResult || components\"\n          title=\"{{ cmp.description | translate }}\"\n        >\n          <button\n            type=\"button\"\n            class=\"btn-clean card p-8\"\n            [class.active]=\"selected === cmp\"\n            (click)=\"select(cmp)\"\n          >\n            <div class=\"text-center p-8 m-b-8 d-col flex-center bg-level-2\" role=\"presentation\">\n              <ng-container *ngIf=\"!cmp.previewImage; else previewImage\">\n                <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n                <small translate>Preview not available</small>\n              </ng-container>\n              <ng-template #previewImage>\n                <img class=\"img-responsive\" alt=\"\" [src]=\"cmp.previewImage\" />\n              </ng-template>\n            </div>\n            <p class=\"card-title text-truncate\">\n              <c8y-highlight\n                text=\"{{ cmp.label | translate }}\"\n                [pattern]=\"searchTerm\"\n              ></c8y-highlight>\n            </p>\n          </button>\n        </div>\n\n        <div class=\"c8y-empty-state text-center\" *ngIf=\"searchResult && searchResult.length === 0\">\n          <div class=\"h1\" c8yIcon=\"search\"></div>\n          <h3 translate>No widgets found.</h3>\n          <div class=\"d-flex\">\n            <p translate class=\"m-r-8\">Rephrase your search term.</p>\n            <button\n              title=\"{{ 'Reset search' | translate }}\"\n              class=\"btn btn-primary\"\n              type=\"button\"\n              (click)=\"resetSearch()\"\n            >\n              {{ 'Reset search' | translate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- The following is intentional set to hidden to allow the ViewChild ref in the controller -->\n    <div *ngIf=\"selected\" [ngClass]=\"{ hidden: mode !== 'config' }\" class=\"d-flex d-col fit-h\">\n      <div class=\"p-t-16 flex-no-shrink separator-bottom p-b-16\">\n        <div class=\"row\">\n          <div class=\"col-sm-4\">\n            <div class=\"p-l-24\">\n              <div class=\"text-left text-medium h4\">\n                {{ selected.label | translate }}\n              </div>\n              <p>\n                {{ selected.description | translate }}\n              </p>\n            </div>\n          </div>\n          <div class=\"col-sm-8\">\n            <div class=\"p-r-24\">\n              <c8y-form-group>\n                <label for=\"widgetTitle\" translate>Title</label>\n                <input\n                  id=\"widgetTitle\"\n                  [(ngModel)]=\"selected.data.title\"\n                  type=\"text\"\n                  name=\"title\"\n                  class=\"form-control\"\n                  placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n                  required\n                />\n              </c8y-form-group>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"row flex-grow\" [ngClass]=\"{ 'd-flex': widgetConfig.options || hasConfig() }\">\n        <div\n          *ngIf=\"!widgetConfig.settings?.noDeviceTarget\"\n          class=\"a-s-stretch\"\n          [ngClass]=\"{\n            'bg-level-1 col-sm-4 p-r-0': hasConfig(),\n            'bg-level-0 col-sm-12': !hasConfig()\n          }\"\n        >\n          <div class=\"fit-h bg-inherit p-l-16\" [ngClass]=\"{ 'p-r-24': !hasConfig() }\">\n            <div class=\"p-relative bg-inherit\">\n              <c8y-asset-selector-miller\n                (onSelected)=\"selectionChanged($event)\"\n                (onClearSelected)=\"selectionChanged()\"\n                [config]=\"{\n                  view: 'miller',\n                  groupsSelectable: this.widgetConfig.settings?.groupsSelectable,\n                  showChildDevices: true,\n                  columnHeaders: true,\n                  showUnassignedDevices: true,\n                  search: !this.widgetConfig.settings.context?.additionParents,\n                  showFilter: true,\n                  singleColumn: !!this.hasConfig()\n                }\"\n                [asset]=\"widgetConfig.settings?.context\"\n                [selectedDevice]=\"selectedDevice\"\n                class=\"d-block bg-inherit p-relative\"\n                style=\"height: calc(100vh - 406px)\"\n              ></c8y-asset-selector-miller>\n            </div>\n          </div>\n        </div>\n        <div\n          [ngClass]=\"{\n            'col-sm-8': !widgetConfig.settings?.noDeviceTarget,\n            'col-sm-12': widgetConfig.settings?.noDeviceTarget,\n            'sr-only': !hasConfig()\n          }\"\n        >\n          <c8y-dynamic-component\n            class=\"d-block\"\n            [ngClass]=\"{ 'inner-scroll p-r-24': !widgetConfig.settings?.noDeviceTarget }\"\n            style=\"{{ hasConfig() ? 'height: calc(100vh - 406px);' : 'height: 0;' }}\"\n            [componentId]=\"selected.id\"\n            mode=\"config\"\n            [config]=\"widgetConfig\"\n            [notFoundError]=\"false\"\n            #config\n          ></c8y-dynamic-component>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"mode === 'style'\" class=\"modal-body p-t-0\" style=\"height: calc(100vh - 310px)\">\n      <div class=\"row\">\n        <div class=\"col-xs-6\">\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          ></c8y-appearance-settings>\n        </div>\n        <div class=\"col-xs-6 sticky-header-top-0\">\n          <c8y-widget-preview\n            [previewClasses]=\"getStyle(true)\"\n            style=\"height: calc(100vh - 382px)\"\n          ></c8y-widget-preview>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      title=\"{{ 'Cancel' | translate }}\"\n      type=\"button\"\n      class=\"btn btn-default\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      title=\"{{ 'Save' | translate }}\"\n      type=\"submit\"\n      class=\"btn btn-primary\"\n      (click)=\"save()\"\n      [disabled]=\"\n        contextDashboardService.formDisabled || configForm.invalid || checkIfDeviceRequired()\n      \"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n" }]
+            args: [{ selector: 'c8y-widget-config', template: "<div class=\"modal-header separator\">\n  <div\n    class=\"h3\"\n    title=\"{{ 'Add widget' | translate }}\"\n    id=\"modal-title\"\n    *ngIf=\"!current\"\n    translate\n  >\n    Add widget\n  </div>\n  <div\n    class=\"h3\"\n    title=\"{{ 'Edit widget' | translate }}\"\n    id=\"modal-title\"\n    *ngIf=\"current\"\n    translate\n  >\n    Edit widget\n  </div>\n</div>\n<form name=\"form\" #configForm=\"ngForm\">\n  <div class=\"c8y-modal-tabs\" id=\"modal-body\">\n    <div class=\"tabContainer\">\n      <ul class=\"nav nav-tabs nav-tabsc8y p-l-24\">\n        <li [class.active]=\"mode === 'select'\">\n          <button\n            class=\"btn\"\n            type=\"button\"\n            title=\"{{ 'Select widget' | translate }}\"\n            (click)=\"changeMode('select'); (false)\"\n          >\n            <i c8yIcon=\"th-large\"></i>\n            <span translate>Select widget</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'config'\">\n          <button\n            class=\"btn\"\n            type=\"button\"\n            title=\"{{ 'Configuration' | translate }}\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('config'); (false)\"\n          >\n            <i c8yIcon=\"cog\"></i>\n            <span translate>Configuration</span>\n          </button>\n        </li>\n        <li [class.active]=\"mode === 'style'\">\n          <button\n            class=\"btn\"\n            type=\"button\"\n            title=\"{{ 'Appearance' | translate }}\"\n            [disabled]=\"!selected\"\n            (click)=\"changeMode('style'); (false)\"\n          >\n            <i c8yIcon=\"paint-brush\"></i>\n            <span translate>Appearance</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n\n  <div class=\"modal-inner-scroll modal-inner-scroll--fixed\">\n    <div\n      class=\"bg-level-0 p-l-24 p-r-24 p-t-8 p-b-8 sticky-header-top-0\"\n      style=\"z-index: 2\"\n      *ngIf=\"mode === 'select'\"\n    >\n      <div class=\"row\">\n        <div class=\"col-sm-6\">\n          <div class=\"input-group input-group-search\">\n            <input\n              class=\"form-control\"\n              data-cy=\"widget-config--Search\"\n              type=\"text\"\n              [attr.aria-label]=\"'Search' | translate\"\n              placeholder=\"{{ 'Search\u2026' | translate }}\"\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                type=\"button\"\n                title=\"{{ 'Search' | translate }}\"\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=\"modal-body bg-level-2\" *ngIf=\"mode === 'select'\">\n      <div class=\"card-group card-select m-b-0\">\n        <div\n          class=\"col-md-3 col-sm-4 col-xs-6\"\n          title=\"{{ cmp.description | translate }}\"\n          *ngFor=\"let cmp of searchResult || components\"\n        >\n          <button\n            class=\"btn-clean card p-8\"\n            type=\"button\"\n            [class.active]=\"selected === cmp\"\n            (click)=\"select(cmp)\"\n          >\n            <div class=\"text-center p-8 m-b-8 d-col flex-center bg-level-2\" role=\"presentation\">\n              <ng-container *ngIf=\"!cmp.previewImage; else previewImage\">\n                <div class=\"h1\"><i c8yIcon=\"file-image-o\"></i></div>\n                <small translate>Preview not available</small>\n              </ng-container>\n              <ng-template #previewImage>\n                <img class=\"img-responsive\" alt [src]=\"cmp.previewImage\" />\n              </ng-template>\n            </div>\n            <p class=\"card-title text-truncate\">\n              <c8y-highlight\n                text=\"{{ cmp.label | translate }}\"\n                [pattern]=\"searchTerm\"\n              ></c8y-highlight>\n            </p>\n          </button>\n        </div>\n\n        <div class=\"c8y-empty-state text-center\" *ngIf=\"searchResult && searchResult.length === 0\">\n          <div class=\"h1\" c8yIcon=\"search\"></div>\n          <h3 translate>No widgets found.</h3>\n          <div class=\"d-flex\">\n            <p class=\"m-r-8\" translate>Rephrase your search term.</p>\n            <button\n              class=\"btn btn-primary\"\n              type=\"button\"\n              title=\"{{ 'Reset search' | translate }}\"\n              (click)=\"resetSearch()\"\n            >\n              {{ 'Reset search' | translate }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- The following is intentional set to hidden to allow the ViewChild ref in the controller -->\n    <div class=\"d-flex d-col fit-h\" *ngIf=\"selected\" [ngClass]=\"{ hidden: mode !== 'config' }\">\n      <div class=\"p-t-16 flex-no-shrink separator-bottom p-b-16\">\n        <div class=\"row\">\n          <div class=\"col-sm-4\">\n            <div class=\"p-l-24\">\n              <div class=\"text-left text-medium h4\">\n                {{ selected.label | translate }}\n              </div>\n              <p>\n                {{ selected.description | translate }}\n              </p>\n            </div>\n          </div>\n          <div class=\"col-sm-8\">\n            <div class=\"p-r-24\">\n              <c8y-form-group>\n                <label for=\"widgetTitle\" translate>Title</label>\n                <input\n                  class=\"form-control\"\n                  type=\"text\"\n                  id=\"widgetTitle\"\n                  name=\"title\"\n                  [(ngModel)]=\"selected.data.title\"\n                  placeholder=\"{{ 'e.g.' | translate }} {{ componentLabel | translate }}\"\n                  required\n                />\n              </c8y-form-group>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"row flex-grow\" [ngClass]=\"{ 'd-flex': widgetConfig.options || hasConfig() }\">\n        <div\n          class=\"a-s-stretch\"\n          *ngIf=\"!widgetConfig.settings?.noDeviceTarget\"\n          [ngClass]=\"{\n            'bg-level-1 col-sm-4 p-r-0': hasConfig(),\n            'bg-level-0 col-sm-12': !hasConfig()\n          }\"\n        >\n          <div class=\"fit-h bg-inherit p-l-16\" [ngClass]=\"{ 'p-r-24': !hasConfig() }\">\n            <div class=\"p-relative bg-inherit\">\n              <c8y-asset-selector-miller\n                class=\"d-block bg-inherit p-relative\"\n                style=\"height: calc(100vh - 422px)\"\n                (onSelected)=\"selectionChanged($event)\"\n                (onClearSelected)=\"selectionChanged()\"\n                [config]=\"{\n                  view: 'miller',\n                  groupsSelectable: this.widgetConfig.settings?.groupsSelectable,\n                  showChildDevices: true,\n                  columnHeaders: true,\n                  showUnassignedDevices: true,\n                  search: !this.widgetConfig.settings.context?.additionParents,\n                  showFilter: true,\n                  singleColumn: !!this.hasConfig()\n                }\"\n                [asset]=\"widgetConfig.settings?.context\"\n                [selectedDevice]=\"selectedDevice\"\n              ></c8y-asset-selector-miller>\n            </div>\n          </div>\n        </div>\n        <div\n          [ngClass]=\"{\n            'col-sm-8': !widgetConfig.settings?.noDeviceTarget,\n            'col-sm-12': widgetConfig.settings?.noDeviceTarget,\n            'sr-only': !hasConfig()\n          }\"\n        >\n          <c8y-dynamic-component\n            class=\"d-block\"\n            style=\"height: {{ hasConfig() ? 'calc(100vh - 422px)' : '0' }}\"\n            [ngClass]=\"{ 'inner-scroll p-r-24': !widgetConfig.settings?.noDeviceTarget }\"\n            [componentId]=\"selected.id\"\n            mode=\"config\"\n            [config]=\"widgetConfig\"\n            [notFoundError]=\"false\"\n            #config\n          ></c8y-dynamic-component>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"modal-body p-t-0\" style=\"height: calc(100vh - 310px)\" *ngIf=\"mode === 'style'\">\n      <div class=\"row\">\n        <div class=\"col-xs-6\">\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          ></c8y-appearance-settings>\n        </div>\n        <div class=\"col-xs-6 sticky-header-top-0\">\n          <c8y-widget-preview\n            style=\"height: calc(100vh - 382px)\"\n            [previewClasses]=\"getStyle(true)\"\n          ></c8y-widget-preview>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button\n      class=\"btn btn-default\"\n      type=\"button\"\n      title=\"{{ 'Cancel' | translate }}\"\n      (click)=\"close()\"\n    >\n      {{ 'Cancel' | translate }}\n    </button>\n    <button\n      class=\"btn btn-primary\"\n      type=\"submit\"\n      title=\"{{ 'Save' | translate }}\"\n      (click)=\"save()\"\n      [disabled]=\"\n        contextDashboardService.formDisabled || configForm.invalid || checkIfDeviceRequired()\n      \"\n      c8yProductExperience\n      [actionName]=\"current ? 'editWidget' : 'createWidget'\"\n      [actionData]=\"{ widgetName: selected && selected.id }\"\n    >\n      {{ 'Save' | translate }}\n    </button>\n  </div>\n</form>\n" }]
         }], ctorParameters: function () { return [{ type: WidgetService }, { type: i3$1.BsModalRef }, { type: i1.InventoryService }, { type: ContextDashboardService }]; }, propDecorators: { dynamicComponent: [{
                 type: ViewChild,
                 args: ['config', { static: false }]