@c8y/ngx-components 1024.10.8 → 1024.14.0

package/fesm2022/c8y-ngx-components-icon-selector.mjs

@@ -39,10 +39,10 @@ class IconNamePipe {
         }
         return icon;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: IconNamePipe, isStandalone: true, name: "iconName" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: IconNamePipe, isStandalone: true, name: "iconName" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconNamePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconNamePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'iconName' }]
         }] });
@@ -234,10 +234,10 @@ class CustomIconStorageService {
             throw e;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CustomIconStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CustomIconStorageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CustomIconStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CustomIconStorageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CustomIconStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CustomIconStorageService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -364,10 +364,10 @@ class SvgSanitizerService {
             this.normalizeColorsOnNode(child);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SvgSanitizerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SvgSanitizerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SvgSanitizerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SvgSanitizerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SvgSanitizerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SvgSanitizerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -582,10 +582,10 @@ class CustomIconRegistryService {
         this.icons.set(set.icons);
         this.loaded.set(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CustomIconRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CustomIconRegistryService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CustomIconRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CustomIconRegistryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CustomIconRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CustomIconRegistryService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -929,10 +929,10 @@ class AddCustomIconModalComponent {
             return null;
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AddCustomIconModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AddCustomIconModalComponent, isStandalone: true, selector: "c8y-add-custom-icon-modal", viewQueries: [{ propertyName: "categoryTypeahead", first: true, predicate: ["categoryTypeahead"], descendants: true, isSignal: true }, { propertyName: "modalBody", first: true, predicate: ["modalBody"], descendants: true, isSignal: true }], ngImport: i0, template: "<c8y-modal\n  [title]=\"modalTitle() | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [close]=\"keepOpenOnOk\"\n  [labels]=\"{ cancel: 'Cancel', ok: okLabel() | translate }\"\n>\n  <ng-container c8y-modal-title>\n    <span\n      [c8yIcon]=\"isOverrideMode() ? 'replace' : isEditMode() ? 'pencil' : 'plus-circle-o'\"\n      aria-hidden=\"true\"\n    ></span>\n  </ng-container>\n\n  @if (!isReady()) {\n    <!-- min-height matches the approximate form height so Bootstrap animates\n         the modal at its full size before the form is rendered. -->\n    <div\n      class=\"p-32 d-flex a-i-center j-c-center\"\n      style=\"min-height: 380px\"\n      [attr.aria-label]=\"'Loading\u2026' | translate\"\n      role=\"status\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n  }\n\n  @if (isReady()) {\n    <div\n      class=\"p-t-16 p-b-24 p-l-32 p-r-32\"\n      #modalBody\n    >\n      @if (isOverrideMode()) {\n        <p class=\"text-center text-16 text-bold text-balance m-b-16\">\n          {{ 'Upload a replacement SVG for {{iconName}}' | translate: { iconName:\n          editingIcon?.overriddenIconName } }}\n        </p>\n      }\n\n      <!-- Name, collection and icon type (hidden in override mode) -->\n      @if (!isOverrideMode()) {\n        @if (!isEditMode()) {\n          <p\n            class=\"text-muted m-b-16\"\n            translate\n          >\n            Upload a custom SVG icon and assign it to a collection to keep your icons organized.\n          </p>\n        }\n        <div\n          class=\"m-b-16\"\n          [formGroup]=\"form\"\n        >\n          <c8y-form-group class=\"p-b-16\">\n            <label\n              for=\"iconName\"\n              translate\n              >Icon name</label\n            >\n            <input\n              class=\"form-control\"\n              id=\"iconName\"\n              aria-required=\"true\"\n              aria-describedby=\"iconName-messages\"\n              type=\"text\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'acme-logo' }\"\n              formControlName=\"name\"\n            />\n            <c8y-messages\n              id=\"iconName-messages\"\n              role=\"status\"\n              [helpMessage]=\"'Lowercase letters, numbers and hyphens only' | translate\"\n            >\n              @for (message of nameMessages; track message.name) {\n                <c8y-message\n                  [name]=\"message.name\"\n                  [text]=\"message.text | translate\"\n                ></c8y-message>\n              }\n            </c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group [hasError]=\"hasCategoryError()\">\n            <label\n              for=\"iconCategory\"\n              translate\n              >Collection</label\n            >\n            <div class=\"p-relative\">\n              <c8y-typeahead\n                [attr.aria-label]=\"'Icon collection' | translate\"\n                id=\"iconCategory\"\n                #categoryTypeahead\n                [allowFreeEntries]=\"true\"\n                [hideNew]=\"true\"\n                [placeholder]=\"'Select or enter a collection name' | translate\"\n                (onSearch)=\"onCategorySearch($event)\"\n              >\n                @for (cat of filteredCategories(); track cat) {\n                  <c8y-li\n                    class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                    (click)=\"selectCategory(cat)\"\n                    [active]=\"form.value.category === cat\"\n                    >{{ cat | translate }}</c8y-li\n                  >\n                }\n                @if (showAddNew()) {\n                  <c8y-li class=\"bg-level-2 p-8\">\n                    @if (hasNoMatch()) {\n                      <span\n                        class=\"m-r-8\"\n                        translate\n                        >No existing collection found.</span\n                      >\n                    }\n                    <button\n                      class=\"btn btn-default btn-xs\"\n                      type=\"button\"\n                      (click)=\"selectCategory(categorySearch())\"\n                    >\n                      {{ 'Add new collection`collection`' | translate }}\n                    </button>\n                  </c8y-li>\n                }\n              </c8y-typeahead>\n              @if (categorySearch()) {\n                <button\n                  class=\"btn btn-dot p-absolute\"\n                  style=\"right: 36px; z-index: 10\"\n                  [attr.aria-label]=\"'Clear collection' | translate\"\n                  type=\"button\"\n                  (click)=\"clearCategory()\"\n                >\n                  <i\n                    [c8yIcon]=\"'times'\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </button>\n              }\n            </div>\n            <c8y-messages\n              role=\"alert\"\n              [show]=\"categoryErrors()\"\n            >\n              <c8y-message\n                [name]=\"'required'\"\n                [text]=\"'Collection is required.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          @if (!isEditMode()) {\n            <fieldset class=\"c8y-fieldset m-b-24\">\n              <legend translate>Icon type</legend>\n              <div class=\"d-flex gap-16 p-b-16\">\n                <label class=\"c8y-radio a-i-start\">\n                  <input\n                    name=\"iconFamily\"\n                    type=\"radio\"\n                    [checked]=\"selectedFamily() === 'dlt'\"\n                    (change)=\"onFamilyChange('dlt')\"\n                  />\n                  <span></span>\n                  <span\n                    >{{ 'Single color' | translate }}<br />\n                    <small\n                      class=\"text-muted d-block\"\n                      translate\n                    >\n                      Single SVG, inherits text color via currentColor.\n                    </small>\n                  </span>\n                </label>\n\n                <label class=\"c8y-radio a-i-start\">\n                  <input\n                    name=\"iconFamily\"\n                    type=\"radio\"\n                    [checked]=\"selectedFamily() === 'c8y'\"\n                    (change)=\"onFamilyChange('c8y')\"\n                  />\n                  <span></span>\n                  <span>\n                    {{ 'Duocolor' | translate }}<br />\n                    <small\n                      class=\"text-muted d-block\"\n                      translate\n                    >\n                      Two SVGs required: a dark layer and a light accent layer.\n                    </small>\n                  </span>\n                </label>\n              </div>\n            </fieldset>\n          }\n        </div>\n      }\n\n      <!-- SVG uploads -->\n      <div\n        class=\"m-b-16\"\n        [class.row]=\"selectedFamily() === 'c8y'\"\n      >\n        @if (selectedFamily() === 'dlt') {\n          <c8y-form-group [hasError]=\"hasPrimarySvgError()\">\n            <label translate>Icon SVG</label>\n            @if (!primarySvg()) {\n              <c8y-drop-area\n                class=\"drop-area-sm\"\n                [icon]=\"'upload'\"\n                [title]=\"'Upload SVG icon' | translate\"\n                [attr.aria-label]=\"'Upload SVG icon' | translate\"\n                [accept]=\"'.svg'\"\n                [maxAllowedFiles]=\"1\"\n                [maxFileSizeInMegaBytes]=\"5\"\n                [message]=\"'Drop SVG file here or click to browse' | translate\"\n                (dropped)=\"onPrimaryDropped($event)\"\n              ></c8y-drop-area>\n              <c8y-messages\n                class=\"m-t-8\"\n                role=\"status\"\n                [show]=\"primarySvgErrors()\"\n                [helpMessage]=\"\n                  hasPrimarySvgError()\n                    ? ''\n                    : ('Square viewBox (e.g. 24\u00D724) \u00B7 currentColor fills \u00B7 no external refs or scripts'\n                      | translate)\n                \"\n              >\n                <c8y-message\n                  [name]=\"'required'\"\n                  [text]=\"'Upload an SVG file.' | translate\"\n                ></c8y-message>\n                @if (primaryValidation(); as pv) {\n                  @for (error of pv.errors; track error) {\n                    <div class=\"d-block text-danger\">{{ error }}</div>\n                  }\n                  @for (warning of pv.warnings; track warning) {\n                    <div class=\"d-block text-warning\">{{ warning }}</div>\n                  }\n                }\n              </c8y-messages>\n            } @else {\n              <fieldset class=\"c8y-fieldset m-b-8\">\n                <legend class=\"d-flex a-i-center\">\n                  <span translate>Preview</span>\n                  <button\n                    class=\"btn btn-dot btn-dot--danger m-l-8\"\n                    [attr.aria-label]=\"'Remove SVG preview' | translate\"\n                    [tooltip]=\"'Remove SVG preview' | translate\"\n                    placement=\"top\"\n                    container=\"body\"\n                    [delay]=\"500\"\n                    (click)=\"clearPrimary()\"\n                  >\n                    <i\n                      [c8yIcon]=\"'minus-circle'\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </button>\n                </legend>\n                <div class=\"row d-flex a-i-center gap-16 p-b-16\">\n                  <div\n                    class=\"col-sm-6 d-flex a-i-end gap-8 j-c-around p-16 c8y-light-theme\"\n                    style=\"\n                      background: var(--c8y-root-component-background-default);\n                      border: 1px solid var(--c8y-root-component-border-color);\n                      border-radius: var(--c8y-component-border-radius-base, 4px);\n                    \"\n                  >\n                    @for (size of previewSizes; track size) {\n                      <div class=\"d-flex d-col a-i-center\">\n                        <div\n                          class=\"d-flex a-i-center j-c-center text-default\"\n                          [style.width.px]=\"size\"\n                          [style.height.px]=\"size\"\n                          aria-hidden=\"true\"\n                          [innerHTML]=\"primaryPreviewHtml()\"\n                        ></div>\n                        <small class=\"text-muted\">{{ size }}</small>\n                      </div>\n                    }\n                  </div>\n                  <div\n                    class=\"col-sm-6 d-flex a-i-end gap-16 j-c-around p-16 c8y-dark-theme\"\n                    style=\"\n                      background: var(--c8y-root-component-background-default);\n                      border: 1px solid var(--c8y-root-component-border-color);\n                      border-radius: var(--c8y-component-border-radius-base, 4px);\n                    \"\n                  >\n                    @for (size of previewSizes; track size) {\n                      <div class=\"d-flex d-col a-i-center\">\n                        <div\n                          class=\"d-flex a-i-center j-c-center text-default\"\n                          [style.width.px]=\"size\"\n                          [style.height.px]=\"size\"\n                          aria-hidden=\"true\"\n                          [innerHTML]=\"primaryPreviewHtml()\"\n                        ></div>\n                        <small class=\"text-muted\">{{ size }}</small>\n                      </div>\n                    }\n                  </div>\n                </div>\n                @if (primaryValidation(); as pv) {\n                  @if (pv.errors.length || pv.warnings.length) {\n                    <small\n                      class=\"form-control-feedback-message\"\n                      role=\"status\"\n                    >\n                      @for (error of pv.errors; track error) {\n                        <div class=\"d-block text-danger\">{{ error }}</div>\n                      }\n                      @for (warning of pv.warnings; track warning) {\n                        <div class=\"d-block text-warning\">{{ warning }}</div>\n                      }\n                    </small>\n                  }\n                }\n              </fieldset>\n            }\n          </c8y-form-group>\n        } @else {\n          <!-- C8Y duocolor: dark + light uploads side by side -->\n          <div class=\"row d-flex-md gap-16\">\n            <div class=\"col-sm-6\">\n              <c8y-form-group [hasError]=\"hasPrimarySvgError()\">\n                <label translate>Dark layer SVG</label>\n                @if (!primarySvg()) {\n                  <c8y-drop-area\n                    class=\"drop-area-sm\"\n                    [icon]=\"'upload'\"\n                    [attr.aria-label]=\"'Upload dark layer SVG' | translate\"\n                    [accept]=\"'.svg'\"\n                    [maxAllowedFiles]=\"1\"\n                    [maxFileSizeInMegaBytes]=\"5\"\n                    [message]=\"'Drop dark layer SVG' | translate\"\n                    (dropped)=\"onPrimaryDropped($event)\"\n                  ></c8y-drop-area>\n                  <c8y-messages\n                    class=\"m-t-8\"\n                    role=\"status\"\n                    [show]=\"primarySvgErrors()\"\n                    [helpMessage]=\"\n                      hasPrimarySvgError()\n                        ? ''\n                        : ('Square viewBox \u00B7 currentColor fills \u00B7 main icon shape' | translate)\n                    \"\n                  >\n                    <c8y-message\n                      [name]=\"'required'\"\n                      [text]=\"'Upload an SVG file.' | translate\"\n                    ></c8y-message>\n                    @if (primaryValidation(); as pv) {\n                      @for (error of pv.errors; track error) {\n                        <div class=\"d-block text-danger\">{{ error }}</div>\n                      }\n                      @for (warning of pv.warnings; track warning) {\n                        <div class=\"d-block text-warning\">{{ warning }}</div>\n                      }\n                    }\n                  </c8y-messages>\n                } @else {\n                  <div class=\"d-flex a-i-center gap-8 p-8 separator m-b-4\">\n                    <div\n                      class=\"d-flex a-i-center j-c-center\"\n                      [style.width.px]=\"32\"\n                      [style.height.px]=\"32\"\n                      aria-hidden=\"true\"\n                      [innerHTML]=\"primaryPreviewHtml()\"\n                    ></div>\n                    <span\n                      class=\"text-muted text-12 flex-grow\"\n                      translate\n                      >Dark layer</span\n                    >\n                    <button\n                      class=\"btn btn-dot btn-dot--danger\"\n                      [attr.aria-label]=\"'Remove dark layer SVG' | translate\"\n                      [tooltip]=\"'Remove dark layer SVG' | translate\"\n                      placement=\"top\"\n                      container=\"body\"\n                      [delay]=\"500\"\n                      (click)=\"clearPrimary()\"\n                    >\n                      <i\n                        [c8yIcon]=\"'minus-circle'\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </button>\n                  </div>\n                  @if (primaryValidation(); as pv) {\n                    @if (pv.errors.length || pv.warnings.length) {\n                      <small\n                        class=\"form-control-feedback-message\"\n                        role=\"status\"\n                      >\n                        @for (error of pv.errors; track error) {\n                          <div class=\"d-block text-danger\">{{ error }}</div>\n                        }\n                        @for (warning of pv.warnings; track warning) {\n                          <div class=\"d-block text-warning\">{{ warning }}</div>\n                        }\n                      </small>\n                    }\n                  }\n                }\n              </c8y-form-group>\n            </div>\n            <div class=\"col-sm-6\">\n              <c8y-form-group [hasError]=\"hasLightSvgError()\">\n                <label translate>Light layer SVG</label>\n                @if (!lightSvg()) {\n                  <c8y-drop-area\n                    class=\"drop-area-sm\"\n                    [icon]=\"'upload'\"\n                    [attr.aria-label]=\"'Upload light layer SVG' | translate\"\n                    [accept]=\"'.svg'\"\n                    [maxAllowedFiles]=\"1\"\n                    [maxFileSizeInMegaBytes]=\"5\"\n                    [message]=\"'Drop light layer SVG' | translate\"\n                    (dropped)=\"onLightDropped($event)\"\n                  ></c8y-drop-area>\n                  <c8y-messages\n                    class=\"m-t-8\"\n                    role=\"status\"\n                    [show]=\"lightSvgErrors()\"\n                    [helpMessage]=\"\n                      hasLightSvgError()\n                        ? ''\n                        : ('Same viewBox as dark layer \u00B7 accent shape for the light tint'\n                          | translate)\n                    \"\n                  >\n                    <c8y-message\n                      [name]=\"'required'\"\n                      [text]=\"'Upload an SVG file.' | translate\"\n                    ></c8y-message>\n                    @if (lightValidation(); as lv) {\n                      @for (error of lv.errors; track error) {\n                        <div class=\"d-block text-danger\">{{ error }}</div>\n                      }\n                      @for (warning of lv.warnings; track warning) {\n                        <div class=\"d-block text-warning\">{{ warning }}</div>\n                      }\n                    }\n                  </c8y-messages>\n                } @else {\n                  <div class=\"d-flex a-i-center gap-8 p-8 separator m-b-4\">\n                    <div\n                      class=\"d-flex a-i-center j-c-center\"\n                      [style.width.px]=\"32\"\n                      [style.height.px]=\"32\"\n                      aria-hidden=\"true\"\n                      [innerHTML]=\"lightPreviewHtml()\"\n                    ></div>\n                    <span\n                      class=\"text-muted text-12 flex-grow\"\n                      translate\n                      >Light layer</span\n                    >\n                    <button\n                      class=\"btn btn-dot btn-dot--danger\"\n                      [attr.aria-label]=\"'Remove light layer SVG' | translate\"\n                      [tooltip]=\"'Remove light layer SVG' | translate\"\n                      placement=\"top\"\n                      container=\"body\"\n                      [delay]=\"500\"\n                      (click)=\"clearLight()\"\n                    >\n                      <i\n                        [c8yIcon]=\"'minus-circle'\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </button>\n                  </div>\n                  @if (lightValidation(); as lv) {\n                    @if (lv.errors.length || lv.warnings.length) {\n                      <small\n                        class=\"form-control-feedback-message\"\n                        role=\"status\"\n                      >\n                        @for (error of lv.errors; track error) {\n                          <div class=\"d-block text-danger\">{{ error }}</div>\n                        }\n                        @for (warning of lv.warnings; track warning) {\n                          <div class=\"d-block text-warning\">{{ warning }}</div>\n                        }\n                      </small>\n                    }\n                  }\n                }\n              </c8y-form-group>\n            </div>\n          </div>\n\n          @if (showCompositePreview()) {\n            <fieldset\n              class=\"c8y-fieldset m-t-16\"\n              aria-hidden=\"true\"\n            >\n              <legend translate>Composited preview</legend>\n              <div class=\"row d-flex-md gap-16 p-b-16\">\n                <!-- Light background -->\n                <div\n                  class=\"col-sm-6 d-flex a-i-end gap-8 j-c-around p-16 c8y-light-theme\"\n                  style=\"\n                    background: var(--c8y-root-component-background-default);\n                    border: 1px solid var(--c8y-root-component-border-color);\n                    border-radius: var(--c8y-component-border-radius-base, 4px);\n                  \"\n                >\n                  @for (size of previewSizes; track size) {\n                    <div class=\"d-flex d-col a-i-center\">\n                      <div\n                        class=\"p-relative\"\n                        [style.width.px]=\"size\"\n                        [style.height.px]=\"size\"\n                      >\n                        <div\n                          class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                          style=\"color: var(--c8y-root-component-icon-dark-color-dark)\"\n                          [innerHTML]=\"primaryPreviewHtml()\"\n                        ></div>\n                        <div\n                          class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                          style=\"\n                            top: 0;\n                            left: 0;\n                            color: var(--c8y-root-component-icon-dark-color-light);\n                          \"\n                          [innerHTML]=\"lightPreviewHtml()\"\n                        ></div>\n                      </div>\n                      <small class=\"text-muted\">{{ size }}</small>\n                    </div>\n                  }\n                </div>\n                <!-- Dark background -->\n                <div\n                  class=\"col-sm-6 d-flex a-i-end gap-8 j-c-around p-16 c8y-dark-theme\"\n                  style=\"\n                    background: var(--c8y-root-component-background-default);\n                    border-radius: var(--c8y-component-border-radius-base, 4px);\n                  \"\n                >\n                  @for (size of previewSizes; track size) {\n                    <div class=\"d-flex d-col a-i-center\">\n                      <div\n                        class=\"p-relative\"\n                        [style.width.px]=\"size\"\n                        [style.height.px]=\"size\"\n                      >\n                        <div\n                          class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                          style=\"color: var(--c8y-root-component-icon-dark-color-dark)\"\n                          [innerHTML]=\"primaryPreviewHtml()\"\n                        ></div>\n                        <div\n                          class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                          style=\"\n                            top: 0;\n                            left: 0;\n                            color: var(\n                              --c8y-component-icon-dark-color-light,\n                              var(--c8y-root-component-icon-dark-color-light)\n                            );\n                          \"\n                          [innerHTML]=\"lightPreviewHtml()\"\n                        ></div>\n                      </div>\n                      <small class=\"text-muted\">{{ size }}</small>\n                    </div>\n                  }\n                </div>\n              </div>\n            </fieldset>\n          }\n        }\n      </div>\n    </div>\n  }\n</c8y-modal>\n", dependencies: [{ kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.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" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AddCustomIconModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AddCustomIconModalComponent, isStandalone: true, selector: "c8y-add-custom-icon-modal", viewQueries: [{ propertyName: "categoryTypeahead", first: true, predicate: ["categoryTypeahead"], descendants: true, isSignal: true }, { propertyName: "modalBody", first: true, predicate: ["modalBody"], descendants: true, isSignal: true }], ngImport: i0, template: "<c8y-modal\n  [title]=\"modalTitle() | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [close]=\"keepOpenOnOk\"\n  [labels]=\"{ cancel: 'Cancel', ok: okLabel() | translate }\"\n>\n  <ng-container c8y-modal-title>\n    <span\n      [c8yIcon]=\"isOverrideMode() ? 'replace' : isEditMode() ? 'pencil' : 'plus-circle-o'\"\n      aria-hidden=\"true\"\n    ></span>\n  </ng-container>\n\n  @if (!isReady()) {\n    <!-- min-height matches the approximate form height so Bootstrap animates\n         the modal at its full size before the form is rendered. -->\n    <div\n      class=\"p-32 d-flex a-i-center j-c-center\"\n      style=\"min-height: 380px\"\n      [attr.aria-label]=\"'Loading\u2026' | translate\"\n      role=\"status\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n  }\n\n  @if (isReady()) {\n    <div\n      class=\"p-t-16 p-b-24 p-l-32 p-r-32\"\n      #modalBody\n    >\n      @if (isOverrideMode()) {\n        <p class=\"text-center text-16 text-bold text-balance m-b-16\">\n          {{ 'Upload a replacement SVG for {{iconName}}' | translate: { iconName:\n          editingIcon?.overriddenIconName } }}\n        </p>\n      }\n\n      <!-- Name, collection and icon type (hidden in override mode) -->\n      @if (!isOverrideMode()) {\n        @if (!isEditMode()) {\n          <p\n            class=\"text-muted m-b-16\"\n            translate\n          >\n            Upload a custom SVG icon and assign it to a collection to keep your icons organized.\n          </p>\n        }\n        <div\n          class=\"m-b-16\"\n          [formGroup]=\"form\"\n        >\n          <c8y-form-group class=\"p-b-16\">\n            <label\n              for=\"iconName\"\n              translate\n              >Icon name</label\n            >\n            <input\n              class=\"form-control\"\n              id=\"iconName\"\n              aria-required=\"true\"\n              aria-describedby=\"iconName-messages\"\n              type=\"text\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'acme-logo' }\"\n              formControlName=\"name\"\n            />\n            <c8y-messages\n              id=\"iconName-messages\"\n              role=\"status\"\n              [helpMessage]=\"'Lowercase letters, numbers and hyphens only' | translate\"\n            >\n              @for (message of nameMessages; track message.name) {\n                <c8y-message\n                  [name]=\"message.name\"\n                  [text]=\"message.text | translate\"\n                ></c8y-message>\n              }\n            </c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group [hasError]=\"hasCategoryError()\">\n            <label\n              for=\"iconCategory\"\n              translate\n              >Collection</label\n            >\n            <div class=\"p-relative\">\n              <c8y-typeahead\n                [attr.aria-label]=\"'Icon collection' | translate\"\n                id=\"iconCategory\"\n                #categoryTypeahead\n                [allowFreeEntries]=\"true\"\n                [hideNew]=\"true\"\n                [placeholder]=\"'Select or enter a collection name' | translate\"\n                (onSearch)=\"onCategorySearch($event)\"\n              >\n                @for (cat of filteredCategories(); track cat) {\n                  <c8y-li\n                    class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                    (click)=\"selectCategory(cat)\"\n                    [active]=\"form.value.category === cat\"\n                    >{{ cat | translate }}</c8y-li\n                  >\n                }\n                @if (showAddNew()) {\n                  <c8y-li class=\"bg-level-2 p-8\">\n                    @if (hasNoMatch()) {\n                      <span\n                        class=\"m-r-8\"\n                        translate\n                        >No existing collection found.</span\n                      >\n                    }\n                    <button\n                      class=\"btn btn-default btn-xs\"\n                      type=\"button\"\n                      (click)=\"selectCategory(categorySearch())\"\n                    >\n                      {{ 'Add new collection`collection`' | translate }}\n                    </button>\n                  </c8y-li>\n                }\n              </c8y-typeahead>\n              @if (categorySearch()) {\n                <button\n                  class=\"btn btn-dot p-absolute\"\n                  style=\"right: 36px; z-index: 10\"\n                  [attr.aria-label]=\"'Clear collection' | translate\"\n                  type=\"button\"\n                  (click)=\"clearCategory()\"\n                >\n                  <i\n                    [c8yIcon]=\"'times'\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </button>\n              }\n            </div>\n            <c8y-messages\n              role=\"alert\"\n              [show]=\"categoryErrors()\"\n            >\n              <c8y-message\n                [name]=\"'required'\"\n                [text]=\"'Collection is required.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          @if (!isEditMode()) {\n            <fieldset class=\"c8y-fieldset m-b-24\">\n              <legend translate>Icon type</legend>\n              <div class=\"d-flex gap-16 p-b-16\">\n                <label class=\"c8y-radio a-i-start\">\n                  <input\n                    name=\"iconFamily\"\n                    type=\"radio\"\n                    [checked]=\"selectedFamily() === 'dlt'\"\n                    (change)=\"onFamilyChange('dlt')\"\n                  />\n                  <span></span>\n                  <span\n                    >{{ 'Single color' | translate }}<br />\n                    <small\n                      class=\"text-muted d-block\"\n                      translate\n                    >\n                      Single SVG, inherits text color via currentColor.\n                    </small>\n                  </span>\n                </label>\n\n                <label class=\"c8y-radio a-i-start\">\n                  <input\n                    name=\"iconFamily\"\n                    type=\"radio\"\n                    [checked]=\"selectedFamily() === 'c8y'\"\n                    (change)=\"onFamilyChange('c8y')\"\n                  />\n                  <span></span>\n                  <span>\n                    {{ 'Duocolor' | translate }}<br />\n                    <small\n                      class=\"text-muted d-block\"\n                      translate\n                    >\n                      Two SVGs required: a dark layer and a light accent layer.\n                    </small>\n                  </span>\n                </label>\n              </div>\n            </fieldset>\n          }\n        </div>\n      }\n\n      <!-- SVG uploads -->\n      <div\n        class=\"m-b-16\"\n        [class.row]=\"selectedFamily() === 'c8y'\"\n      >\n        @if (selectedFamily() === 'dlt') {\n          <c8y-form-group [hasError]=\"hasPrimarySvgError()\">\n            <label translate>Icon SVG</label>\n            @if (!primarySvg()) {\n              <c8y-drop-area\n                class=\"drop-area-sm\"\n                [icon]=\"'upload'\"\n                [title]=\"'Upload SVG icon' | translate\"\n                [attr.aria-label]=\"'Upload SVG icon' | translate\"\n                [accept]=\"'.svg'\"\n                [maxAllowedFiles]=\"1\"\n                [maxFileSizeInMegaBytes]=\"5\"\n                [message]=\"'Drop SVG file here or click to browse' | translate\"\n                (dropped)=\"onPrimaryDropped($event)\"\n              ></c8y-drop-area>\n              <c8y-messages\n                class=\"m-t-8\"\n                role=\"status\"\n                [show]=\"primarySvgErrors()\"\n                [helpMessage]=\"\n                  hasPrimarySvgError()\n                    ? ''\n                    : ('Square viewBox (e.g. 24\u00D724) \u00B7 currentColor fills \u00B7 no external refs or scripts'\n                      | translate)\n                \"\n              >\n                <c8y-message\n                  [name]=\"'required'\"\n                  [text]=\"'Upload an SVG file.' | translate\"\n                ></c8y-message>\n                @if (primaryValidation(); as pv) {\n                  @for (error of pv.errors; track error) {\n                    <div class=\"d-block text-danger\">{{ error }}</div>\n                  }\n                  @for (warning of pv.warnings; track warning) {\n                    <div class=\"d-block text-warning\">{{ warning }}</div>\n                  }\n                }\n              </c8y-messages>\n            } @else {\n              <fieldset class=\"c8y-fieldset m-b-8\">\n                <legend class=\"d-flex a-i-center\">\n                  <span translate>Preview</span>\n                  <button\n                    class=\"btn btn-dot btn-dot--danger m-l-8\"\n                    [attr.aria-label]=\"'Remove SVG preview' | translate\"\n                    [tooltip]=\"'Remove SVG preview' | translate\"\n                    placement=\"top\"\n                    container=\"body\"\n                    [delay]=\"500\"\n                    (click)=\"clearPrimary()\"\n                  >\n                    <i\n                      [c8yIcon]=\"'minus-circle'\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </button>\n                </legend>\n                <div class=\"row d-flex a-i-center gap-16 p-b-16\">\n                  <div\n                    class=\"col-sm-6 d-flex a-i-end gap-8 j-c-around p-16 c8y-light-theme\"\n                    style=\"\n                      background: var(--c8y-root-component-background-default);\n                      border: 1px solid var(--c8y-root-component-border-color);\n                      border-radius: var(--c8y-component-border-radius-base, 4px);\n                    \"\n                  >\n                    @for (size of previewSizes; track size) {\n                      <div class=\"d-flex d-col a-i-center\">\n                        <div\n                          class=\"d-flex a-i-center j-c-center text-default\"\n                          [style.width.px]=\"size\"\n                          [style.height.px]=\"size\"\n                          aria-hidden=\"true\"\n                          [innerHTML]=\"primaryPreviewHtml()\"\n                        ></div>\n                        <small class=\"text-muted\">{{ size }}</small>\n                      </div>\n                    }\n                  </div>\n                  <div\n                    class=\"col-sm-6 d-flex a-i-end gap-16 j-c-around p-16 c8y-dark-theme\"\n                    style=\"\n                      background: var(--c8y-root-component-background-default);\n                      border: 1px solid var(--c8y-root-component-border-color);\n                      border-radius: var(--c8y-component-border-radius-base, 4px);\n                    \"\n                  >\n                    @for (size of previewSizes; track size) {\n                      <div class=\"d-flex d-col a-i-center\">\n                        <div\n                          class=\"d-flex a-i-center j-c-center text-default\"\n                          [style.width.px]=\"size\"\n                          [style.height.px]=\"size\"\n                          aria-hidden=\"true\"\n                          [innerHTML]=\"primaryPreviewHtml()\"\n                        ></div>\n                        <small class=\"text-muted\">{{ size }}</small>\n                      </div>\n                    }\n                  </div>\n                </div>\n                @if (primaryValidation(); as pv) {\n                  @if (pv.errors.length || pv.warnings.length) {\n                    <small\n                      class=\"form-control-feedback-message\"\n                      role=\"status\"\n                    >\n                      @for (error of pv.errors; track error) {\n                        <div class=\"d-block text-danger\">{{ error }}</div>\n                      }\n                      @for (warning of pv.warnings; track warning) {\n                        <div class=\"d-block text-warning\">{{ warning }}</div>\n                      }\n                    </small>\n                  }\n                }\n              </fieldset>\n            }\n          </c8y-form-group>\n        } @else {\n          <!-- C8Y duocolor: dark + light uploads side by side -->\n          <div class=\"row d-flex-md gap-16\">\n            <div class=\"col-sm-6\">\n              <c8y-form-group [hasError]=\"hasPrimarySvgError()\">\n                <label translate>Dark layer SVG</label>\n                @if (!primarySvg()) {\n                  <c8y-drop-area\n                    class=\"drop-area-sm\"\n                    [icon]=\"'upload'\"\n                    [attr.aria-label]=\"'Upload dark layer SVG' | translate\"\n                    [accept]=\"'.svg'\"\n                    [maxAllowedFiles]=\"1\"\n                    [maxFileSizeInMegaBytes]=\"5\"\n                    [message]=\"'Drop dark layer SVG' | translate\"\n                    (dropped)=\"onPrimaryDropped($event)\"\n                  ></c8y-drop-area>\n                  <c8y-messages\n                    class=\"m-t-8\"\n                    role=\"status\"\n                    [show]=\"primarySvgErrors()\"\n                    [helpMessage]=\"\n                      hasPrimarySvgError()\n                        ? ''\n                        : ('Square viewBox \u00B7 currentColor fills \u00B7 main icon shape' | translate)\n                    \"\n                  >\n                    <c8y-message\n                      [name]=\"'required'\"\n                      [text]=\"'Upload an SVG file.' | translate\"\n                    ></c8y-message>\n                    @if (primaryValidation(); as pv) {\n                      @for (error of pv.errors; track error) {\n                        <div class=\"d-block text-danger\">{{ error }}</div>\n                      }\n                      @for (warning of pv.warnings; track warning) {\n                        <div class=\"d-block text-warning\">{{ warning }}</div>\n                      }\n                    }\n                  </c8y-messages>\n                } @else {\n                  <div class=\"d-flex a-i-center gap-8 p-8 separator m-b-4\">\n                    <div\n                      class=\"d-flex a-i-center j-c-center\"\n                      [style.width.px]=\"32\"\n                      [style.height.px]=\"32\"\n                      aria-hidden=\"true\"\n                      [innerHTML]=\"primaryPreviewHtml()\"\n                    ></div>\n                    <span\n                      class=\"text-muted text-12 flex-grow\"\n                      translate\n                      >Dark layer</span\n                    >\n                    <button\n                      class=\"btn btn-dot btn-dot--danger\"\n                      [attr.aria-label]=\"'Remove dark layer SVG' | translate\"\n                      [tooltip]=\"'Remove dark layer SVG' | translate\"\n                      placement=\"top\"\n                      container=\"body\"\n                      [delay]=\"500\"\n                      (click)=\"clearPrimary()\"\n                    >\n                      <i\n                        [c8yIcon]=\"'minus-circle'\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </button>\n                  </div>\n                  @if (primaryValidation(); as pv) {\n                    @if (pv.errors.length || pv.warnings.length) {\n                      <small\n                        class=\"form-control-feedback-message\"\n                        role=\"status\"\n                      >\n                        @for (error of pv.errors; track error) {\n                          <div class=\"d-block text-danger\">{{ error }}</div>\n                        }\n                        @for (warning of pv.warnings; track warning) {\n                          <div class=\"d-block text-warning\">{{ warning }}</div>\n                        }\n                      </small>\n                    }\n                  }\n                }\n              </c8y-form-group>\n            </div>\n            <div class=\"col-sm-6\">\n              <c8y-form-group [hasError]=\"hasLightSvgError()\">\n                <label translate>Light layer SVG</label>\n                @if (!lightSvg()) {\n                  <c8y-drop-area\n                    class=\"drop-area-sm\"\n                    [icon]=\"'upload'\"\n                    [attr.aria-label]=\"'Upload light layer SVG' | translate\"\n                    [accept]=\"'.svg'\"\n                    [maxAllowedFiles]=\"1\"\n                    [maxFileSizeInMegaBytes]=\"5\"\n                    [message]=\"'Drop light layer SVG' | translate\"\n                    (dropped)=\"onLightDropped($event)\"\n                  ></c8y-drop-area>\n                  <c8y-messages\n                    class=\"m-t-8\"\n                    role=\"status\"\n                    [show]=\"lightSvgErrors()\"\n                    [helpMessage]=\"\n                      hasLightSvgError()\n                        ? ''\n                        : ('Same viewBox as dark layer \u00B7 accent shape for the light tint'\n                          | translate)\n                    \"\n                  >\n                    <c8y-message\n                      [name]=\"'required'\"\n                      [text]=\"'Upload an SVG file.' | translate\"\n                    ></c8y-message>\n                    @if (lightValidation(); as lv) {\n                      @for (error of lv.errors; track error) {\n                        <div class=\"d-block text-danger\">{{ error }}</div>\n                      }\n                      @for (warning of lv.warnings; track warning) {\n                        <div class=\"d-block text-warning\">{{ warning }}</div>\n                      }\n                    }\n                  </c8y-messages>\n                } @else {\n                  <div class=\"d-flex a-i-center gap-8 p-8 separator m-b-4\">\n                    <div\n                      class=\"d-flex a-i-center j-c-center\"\n                      [style.width.px]=\"32\"\n                      [style.height.px]=\"32\"\n                      aria-hidden=\"true\"\n                      [innerHTML]=\"lightPreviewHtml()\"\n                    ></div>\n                    <span\n                      class=\"text-muted text-12 flex-grow\"\n                      translate\n                      >Light layer</span\n                    >\n                    <button\n                      class=\"btn btn-dot btn-dot--danger\"\n                      [attr.aria-label]=\"'Remove light layer SVG' | translate\"\n                      [tooltip]=\"'Remove light layer SVG' | translate\"\n                      placement=\"top\"\n                      container=\"body\"\n                      [delay]=\"500\"\n                      (click)=\"clearLight()\"\n                    >\n                      <i\n                        [c8yIcon]=\"'minus-circle'\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </button>\n                  </div>\n                  @if (lightValidation(); as lv) {\n                    @if (lv.errors.length || lv.warnings.length) {\n                      <small\n                        class=\"form-control-feedback-message\"\n                        role=\"status\"\n                      >\n                        @for (error of lv.errors; track error) {\n                          <div class=\"d-block text-danger\">{{ error }}</div>\n                        }\n                        @for (warning of lv.warnings; track warning) {\n                          <div class=\"d-block text-warning\">{{ warning }}</div>\n                        }\n                      </small>\n                    }\n                  }\n                }\n              </c8y-form-group>\n            </div>\n          </div>\n\n          @if (showCompositePreview()) {\n            <fieldset\n              class=\"c8y-fieldset m-t-16\"\n              aria-hidden=\"true\"\n            >\n              <legend translate>Composited preview</legend>\n              <div class=\"row d-flex-md gap-16 p-b-16\">\n                <!-- Light background -->\n                <div\n                  class=\"col-sm-6 d-flex a-i-end gap-8 j-c-around p-16 c8y-light-theme\"\n                  style=\"\n                    background: var(--c8y-root-component-background-default);\n                    border: 1px solid var(--c8y-root-component-border-color);\n                    border-radius: var(--c8y-component-border-radius-base, 4px);\n                  \"\n                >\n                  @for (size of previewSizes; track size) {\n                    <div class=\"d-flex d-col a-i-center\">\n                      <div\n                        class=\"p-relative\"\n                        [style.width.px]=\"size\"\n                        [style.height.px]=\"size\"\n                      >\n                        <div\n                          class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                          style=\"color: var(--c8y-root-component-icon-dark-color-dark)\"\n                          [innerHTML]=\"primaryPreviewHtml()\"\n                        ></div>\n                        <div\n                          class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                          style=\"\n                            top: 0;\n                            left: 0;\n                            color: var(--c8y-root-component-icon-dark-color-light);\n                          \"\n                          [innerHTML]=\"lightPreviewHtml()\"\n                        ></div>\n                      </div>\n                      <small class=\"text-muted\">{{ size }}</small>\n                    </div>\n                  }\n                </div>\n                <!-- Dark background -->\n                <div\n                  class=\"col-sm-6 d-flex a-i-end gap-8 j-c-around p-16 c8y-dark-theme\"\n                  style=\"\n                    background: var(--c8y-root-component-background-default);\n                    border-radius: var(--c8y-component-border-radius-base, 4px);\n                  \"\n                >\n                  @for (size of previewSizes; track size) {\n                    <div class=\"d-flex d-col a-i-center\">\n                      <div\n                        class=\"p-relative\"\n                        [style.width.px]=\"size\"\n                        [style.height.px]=\"size\"\n                      >\n                        <div\n                          class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                          style=\"color: var(--c8y-root-component-icon-dark-color-dark)\"\n                          [innerHTML]=\"primaryPreviewHtml()\"\n                        ></div>\n                        <div\n                          class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                          style=\"\n                            top: 0;\n                            left: 0;\n                            color: var(\n                              --c8y-component-icon-dark-color-light,\n                              var(--c8y-root-component-icon-dark-color-light)\n                            );\n                          \"\n                          [innerHTML]=\"lightPreviewHtml()\"\n                        ></div>\n                      </div>\n                      <small class=\"text-muted\">{{ size }}</small>\n                    </div>\n                  }\n                </div>\n              </div>\n            </fieldset>\n          }\n        }\n      </div>\n    </div>\n  }\n</c8y-modal>\n", dependencies: [{ kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.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" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AddCustomIconModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AddCustomIconModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-add-custom-icon-modal', imports: [
                         ModalComponent,
@@ -976,10 +976,10 @@ class AddCustomIconModalService {
         });
         return ref.content.result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AddCustomIconModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AddCustomIconModalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AddCustomIconModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AddCustomIconModalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AddCustomIconModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AddCustomIconModalService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1063,7 +1063,7 @@ class ImportCustomIconsModalComponent {
         const entries = await firstValueFrom(this.zip.getEntries(file));
         const manifestEntry = entries.find(e => e.filename === 'icons.json');
         if (!manifestEntry) {
-            throw new Error(this.translate.instant(gettext('Invalid ZIP: missing icons.json')));
+            throw new Error(this.translate.instant(gettext('Invalid ZIP file: missing icons.json')));
         }
         const blob = await firstValueFrom(this.zip.getData(manifestEntry));
         const manifest = JSON.parse(await blob.text());
@@ -1113,10 +1113,10 @@ class ImportCustomIconsModalComponent {
         }
         return this.domSanitizer.bypassSecurityTrustHtml(sanitized.replace(/<svg/i, '<svg width="100%" height="100%" style="display:block"'));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ImportCustomIconsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ImportCustomIconsModalComponent, isStandalone: true, selector: "c8y-import-custom-icons-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"'Import custom icons' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"close()\"\n  (onClose)=\"confirmImport()\"\n  [close]=\"keepOpen\"\n  [dismiss]=\"keepOpen\"\n  [disabled]=\"state() !== 'previewing' || toImportIcons().length === 0\"\n  [labels]=\"{\n    cancel: 'Cancel',\n    ok: 'Import' | translate\n  }\"\n>\n  <ng-container c8y-modal-title>\n    <span\n      [c8yIcon]=\"'data-import'\"\n      aria-hidden=\"true\"\n    ></span>\n  </ng-container>\n\n  <div class=\"p-24\">\n    @if (state() === 'idle') {\n      <p\n        class=\"text-16 text-center text-balance m-b-16\"\n        translate\n      >\n        Upload a ZIP file previously exported from the icon selector to import custom icons into\n        this tenant.\n      </p>\n      <div class=\"d-flex j-c-center\">\n        <c8y-drop-area\n          [icon]=\"'upload'\"\n          style=\"width: 390px\"\n          [title]=\"'Upload icon ZIP' | translate\"\n          accept=\".zip\"\n          [maxAllowedFiles]=\"1\"\n          [message]=\"'Drop your .zip export file here or click to browse' | translate\"\n          (dropped)=\"onZipDropped($event)\"\n        ></c8y-drop-area>\n        @if (dropError()) {\n          <div\n            class=\"alert alert-danger m-t-8\"\n            role=\"alert\"\n          >\n            {{ dropError() }}\n          </div>\n        }\n      </div>\n    }\n\n    @if (state() === 'previewing') {\n      @if (toImportIcons().length) {\n        <p\n          class=\"m-b-8 text-bold\"\n          translate\n        >\n          The following icons will be imported:\n        </p>\n        <ul class=\"list-unstyled m-b-16 separator-top\">\n          @for (icon of toImportIcons(); track icon.name) {\n            <li class=\"d-flex a-i-center gap-8 p-t-8 p-b-8 separator-bottom\">\n              <span\n                class=\"p-relative flex-no-shrink\"\n                [style.width.px]=\"24\"\n                [style.height.px]=\"24\"\n                aria-hidden=\"true\"\n              >\n                <span\n                  class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                  [class.text-default]=\"!icon.previewHtmlSecondary\"\n                  [style.color]=\"\n                    icon.previewHtmlSecondary\n                      ? 'var(--c8y-root-component-icon-dark-color-dark)'\n                      : null\n                  \"\n                  [innerHTML]=\"icon.previewHtml\"\n                ></span>\n                @if (icon.previewHtmlSecondary) {\n                  <span\n                    class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                    style=\"top: 0; left: 0; color: var(--c8y-root-component-icon-dark-color-light)\"\n                    [innerHTML]=\"icon.previewHtmlSecondary\"\n                  ></span>\n                }\n              </span>\n              <span class=\"flex-grow min-width-0 text-truncate\">\n                {{ icon.name }}\n                @if (icon.category && !icon.isOverride) {\n                  <small class=\"text-muted m-l-4\">{{ icon.category | translate }}</small>\n                }\n              </span>\n              <span class=\"tag tag--info flex-no-shrink\">\n                {{ familyLabels[icon.family] | translate }}\n              </span>\n              @if (icon.isOverride) {\n                <span\n                  class=\"tag tag--warning flex-no-shrink\"\n                  translate\n                  >Override</span\n                >\n              }\n            </li>\n          }\n        </ul>\n      } @else if (allSkippedExist()) {\n        <div\n          class=\"alert alert-warning\"\n          role=\"status\"\n          translate\n        >\n          All icons in this file already exist in this tenant.\n        </div>\n      } @else {\n        <div\n          class=\"alert alert-warning\"\n          role=\"status\"\n          translate\n        >\n          No icons to import.\n        </div>\n      }\n      @if (skippedIcons().length && !(allSkippedExist() && toImportIcons().length === 0)) {\n        <p\n          class=\"m-b-8 text-bold\"\n          translate\n        >\n          The following icons will be skipped:\n        </p>\n        <ul class=\"list-unstyled m-b-16 separator-top\">\n          @for (icon of skippedIcons(); track icon.name) {\n            <li class=\"d-flex a-i-center gap-8 p-t-8 p-b-8 separator-bottom\">\n              <span\n                class=\"p-relative flex-no-shrink\"\n                [style.width.px]=\"24\"\n                [style.height.px]=\"24\"\n                aria-hidden=\"true\"\n              >\n                <span\n                  class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                  [class.text-default]=\"!icon.previewHtmlSecondary\"\n                  [style.color]=\"\n                    icon.previewHtmlSecondary\n                      ? 'var(--c8y-root-component-icon-dark-color-dark)'\n                      : null\n                  \"\n                  [innerHTML]=\"icon.previewHtml\"\n                ></span>\n                @if (icon.previewHtmlSecondary) {\n                  <span\n                    class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                    style=\"top: 0; left: 0; color: var(--c8y-root-component-icon-dark-color-light)\"\n                    [innerHTML]=\"icon.previewHtmlSecondary\"\n                  ></span>\n                }\n              </span>\n              <span class=\"flex-grow min-width-0 text-truncate\">\n                {{ icon.name }}\n                @if (icon.category && !icon.isOverride) {\n                  <small class=\"text-muted m-l-4\">{{ icon.category | translate }}</small>\n                }\n              </span>\n              <span class=\"tag tag--warning flex-no-shrink\">\n                {{ skipReasonLabels[icon.reason] | translate }}\n              </span>\n            </li>\n          }\n        </ul>\n      }\n    }\n\n    @if (state() === 'importing') {\n      <c8y-loading\n        role=\"status\"\n        [message]=\"'Importing icons\u2026' | translate\"\n      ></c8y-loading>\n    }\n  </div>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ImportCustomIconsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: ImportCustomIconsModalComponent, isStandalone: true, selector: "c8y-import-custom-icons-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"'Import custom icons' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"close()\"\n  (onClose)=\"confirmImport()\"\n  [close]=\"keepOpen\"\n  [dismiss]=\"keepOpen\"\n  [disabled]=\"state() !== 'previewing' || toImportIcons().length === 0\"\n  [labels]=\"{\n    cancel: 'Cancel',\n    ok: 'Import' | translate\n  }\"\n>\n  <ng-container c8y-modal-title>\n    <span\n      [c8yIcon]=\"'data-import'\"\n      aria-hidden=\"true\"\n    ></span>\n  </ng-container>\n\n  <div class=\"p-24\">\n    @if (state() === 'idle') {\n      <p\n        class=\"text-16 text-center text-balance m-b-16\"\n        translate\n      >\n        Upload a ZIP file previously exported from the icon selector to import custom icons into\n        this tenant.\n      </p>\n      <div class=\"d-flex j-c-center\">\n        <c8y-drop-area\n          [icon]=\"'upload'\"\n          style=\"width: 390px\"\n          [title]=\"'Upload ZIP file' | translate\"\n          accept=\".zip\"\n          [maxAllowedFiles]=\"1\"\n          [message]=\"'Drop ZIP file here or click to browse' | translate\"\n          (dropped)=\"onZipDropped($event)\"\n        ></c8y-drop-area>\n        @if (dropError()) {\n          <div\n            class=\"alert alert-danger m-t-8\"\n            role=\"alert\"\n          >\n            {{ dropError() }}\n          </div>\n        }\n      </div>\n    }\n\n    @if (state() === 'previewing') {\n      @if (toImportIcons().length) {\n        <p\n          class=\"m-b-8 text-bold\"\n          translate\n        >\n          The following icons will be imported:\n        </p>\n        <ul class=\"list-unstyled m-b-16 separator-top\">\n          @for (icon of toImportIcons(); track icon.name) {\n            <li class=\"d-flex a-i-center gap-8 p-t-8 p-b-8 separator-bottom\">\n              <span\n                class=\"p-relative flex-no-shrink\"\n                [style.width.px]=\"24\"\n                [style.height.px]=\"24\"\n                aria-hidden=\"true\"\n              >\n                <span\n                  class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                  [class.text-default]=\"!icon.previewHtmlSecondary\"\n                  [style.color]=\"\n                    icon.previewHtmlSecondary\n                      ? 'var(--c8y-root-component-icon-dark-color-dark)'\n                      : null\n                  \"\n                  [innerHTML]=\"icon.previewHtml\"\n                ></span>\n                @if (icon.previewHtmlSecondary) {\n                  <span\n                    class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                    style=\"top: 0; left: 0; color: var(--c8y-root-component-icon-dark-color-light)\"\n                    [innerHTML]=\"icon.previewHtmlSecondary\"\n                  ></span>\n                }\n              </span>\n              <span class=\"flex-grow min-width-0 text-truncate\">\n                {{ icon.name }}\n                @if (icon.category && !icon.isOverride) {\n                  <small class=\"text-muted m-l-4\">{{ icon.category | translate }}</small>\n                }\n              </span>\n              <span class=\"tag tag--info flex-no-shrink\">\n                {{ familyLabels[icon.family] | translate }}\n              </span>\n              @if (icon.isOverride) {\n                <span\n                  class=\"tag tag--warning flex-no-shrink\"\n                  translate\n                  >Override</span\n                >\n              }\n            </li>\n          }\n        </ul>\n      } @else if (allSkippedExist()) {\n        <div\n          class=\"alert alert-warning\"\n          role=\"status\"\n          translate\n        >\n          All icons in this file already exist in this tenant.\n        </div>\n      } @else {\n        <div\n          class=\"alert alert-warning\"\n          role=\"status\"\n          translate\n        >\n          No icons to import.\n        </div>\n      }\n      @if (skippedIcons().length && !(allSkippedExist() && toImportIcons().length === 0)) {\n        <p\n          class=\"m-b-8 text-bold\"\n          translate\n        >\n          The following icons will be skipped:\n        </p>\n        <ul class=\"list-unstyled m-b-16 separator-top\">\n          @for (icon of skippedIcons(); track icon.name) {\n            <li class=\"d-flex a-i-center gap-8 p-t-8 p-b-8 separator-bottom\">\n              <span\n                class=\"p-relative flex-no-shrink\"\n                [style.width.px]=\"24\"\n                [style.height.px]=\"24\"\n                aria-hidden=\"true\"\n              >\n                <span\n                  class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                  [class.text-default]=\"!icon.previewHtmlSecondary\"\n                  [style.color]=\"\n                    icon.previewHtmlSecondary\n                      ? 'var(--c8y-root-component-icon-dark-color-dark)'\n                      : null\n                  \"\n                  [innerHTML]=\"icon.previewHtml\"\n                ></span>\n                @if (icon.previewHtmlSecondary) {\n                  <span\n                    class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                    style=\"top: 0; left: 0; color: var(--c8y-root-component-icon-dark-color-light)\"\n                    [innerHTML]=\"icon.previewHtmlSecondary\"\n                  ></span>\n                }\n              </span>\n              <span class=\"flex-grow min-width-0 text-truncate\">\n                {{ icon.name }}\n                @if (icon.category && !icon.isOverride) {\n                  <small class=\"text-muted m-l-4\">{{ icon.category | translate }}</small>\n                }\n              </span>\n              <span class=\"tag tag--warning flex-no-shrink\">\n                {{ skipReasonLabels[icon.reason] | translate }}\n              </span>\n            </li>\n          }\n        </ul>\n      }\n    }\n\n    @if (state() === 'importing') {\n      <c8y-loading\n        role=\"status\"\n        [message]=\"'Importing icons\u2026' | translate\"\n      ></c8y-loading>\n    }\n  </div>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ImportCustomIconsModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ImportCustomIconsModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-import-custom-icons-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         C8yTranslatePipe,
@@ -1125,7 +1125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         LoadingComponent,
                         ModalComponent,
                         IconDirective
-                    ], template: "<c8y-modal\n  [title]=\"'Import custom icons' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"close()\"\n  (onClose)=\"confirmImport()\"\n  [close]=\"keepOpen\"\n  [dismiss]=\"keepOpen\"\n  [disabled]=\"state() !== 'previewing' || toImportIcons().length === 0\"\n  [labels]=\"{\n    cancel: 'Cancel',\n    ok: 'Import' | translate\n  }\"\n>\n  <ng-container c8y-modal-title>\n    <span\n      [c8yIcon]=\"'data-import'\"\n      aria-hidden=\"true\"\n    ></span>\n  </ng-container>\n\n  <div class=\"p-24\">\n    @if (state() === 'idle') {\n      <p\n        class=\"text-16 text-center text-balance m-b-16\"\n        translate\n      >\n        Upload a ZIP file previously exported from the icon selector to import custom icons into\n        this tenant.\n      </p>\n      <div class=\"d-flex j-c-center\">\n        <c8y-drop-area\n          [icon]=\"'upload'\"\n          style=\"width: 390px\"\n          [title]=\"'Upload icon ZIP' | translate\"\n          accept=\".zip\"\n          [maxAllowedFiles]=\"1\"\n          [message]=\"'Drop your .zip export file here or click to browse' | translate\"\n          (dropped)=\"onZipDropped($event)\"\n        ></c8y-drop-area>\n        @if (dropError()) {\n          <div\n            class=\"alert alert-danger m-t-8\"\n            role=\"alert\"\n          >\n            {{ dropError() }}\n          </div>\n        }\n      </div>\n    }\n\n    @if (state() === 'previewing') {\n      @if (toImportIcons().length) {\n        <p\n          class=\"m-b-8 text-bold\"\n          translate\n        >\n          The following icons will be imported:\n        </p>\n        <ul class=\"list-unstyled m-b-16 separator-top\">\n          @for (icon of toImportIcons(); track icon.name) {\n            <li class=\"d-flex a-i-center gap-8 p-t-8 p-b-8 separator-bottom\">\n              <span\n                class=\"p-relative flex-no-shrink\"\n                [style.width.px]=\"24\"\n                [style.height.px]=\"24\"\n                aria-hidden=\"true\"\n              >\n                <span\n                  class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                  [class.text-default]=\"!icon.previewHtmlSecondary\"\n                  [style.color]=\"\n                    icon.previewHtmlSecondary\n                      ? 'var(--c8y-root-component-icon-dark-color-dark)'\n                      : null\n                  \"\n                  [innerHTML]=\"icon.previewHtml\"\n                ></span>\n                @if (icon.previewHtmlSecondary) {\n                  <span\n                    class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                    style=\"top: 0; left: 0; color: var(--c8y-root-component-icon-dark-color-light)\"\n                    [innerHTML]=\"icon.previewHtmlSecondary\"\n                  ></span>\n                }\n              </span>\n              <span class=\"flex-grow min-width-0 text-truncate\">\n                {{ icon.name }}\n                @if (icon.category && !icon.isOverride) {\n                  <small class=\"text-muted m-l-4\">{{ icon.category | translate }}</small>\n                }\n              </span>\n              <span class=\"tag tag--info flex-no-shrink\">\n                {{ familyLabels[icon.family] | translate }}\n              </span>\n              @if (icon.isOverride) {\n                <span\n                  class=\"tag tag--warning flex-no-shrink\"\n                  translate\n                  >Override</span\n                >\n              }\n            </li>\n          }\n        </ul>\n      } @else if (allSkippedExist()) {\n        <div\n          class=\"alert alert-warning\"\n          role=\"status\"\n          translate\n        >\n          All icons in this file already exist in this tenant.\n        </div>\n      } @else {\n        <div\n          class=\"alert alert-warning\"\n          role=\"status\"\n          translate\n        >\n          No icons to import.\n        </div>\n      }\n      @if (skippedIcons().length && !(allSkippedExist() && toImportIcons().length === 0)) {\n        <p\n          class=\"m-b-8 text-bold\"\n          translate\n        >\n          The following icons will be skipped:\n        </p>\n        <ul class=\"list-unstyled m-b-16 separator-top\">\n          @for (icon of skippedIcons(); track icon.name) {\n            <li class=\"d-flex a-i-center gap-8 p-t-8 p-b-8 separator-bottom\">\n              <span\n                class=\"p-relative flex-no-shrink\"\n                [style.width.px]=\"24\"\n                [style.height.px]=\"24\"\n                aria-hidden=\"true\"\n              >\n                <span\n                  class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                  [class.text-default]=\"!icon.previewHtmlSecondary\"\n                  [style.color]=\"\n                    icon.previewHtmlSecondary\n                      ? 'var(--c8y-root-component-icon-dark-color-dark)'\n                      : null\n                  \"\n                  [innerHTML]=\"icon.previewHtml\"\n                ></span>\n                @if (icon.previewHtmlSecondary) {\n                  <span\n                    class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                    style=\"top: 0; left: 0; color: var(--c8y-root-component-icon-dark-color-light)\"\n                    [innerHTML]=\"icon.previewHtmlSecondary\"\n                  ></span>\n                }\n              </span>\n              <span class=\"flex-grow min-width-0 text-truncate\">\n                {{ icon.name }}\n                @if (icon.category && !icon.isOverride) {\n                  <small class=\"text-muted m-l-4\">{{ icon.category | translate }}</small>\n                }\n              </span>\n              <span class=\"tag tag--warning flex-no-shrink\">\n                {{ skipReasonLabels[icon.reason] | translate }}\n              </span>\n            </li>\n          }\n        </ul>\n      }\n    }\n\n    @if (state() === 'importing') {\n      <c8y-loading\n        role=\"status\"\n        [message]=\"'Importing icons\u2026' | translate\"\n      ></c8y-loading>\n    }\n  </div>\n</c8y-modal>\n" }]
+                    ], template: "<c8y-modal\n  [title]=\"'Import custom icons' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"close()\"\n  (onClose)=\"confirmImport()\"\n  [close]=\"keepOpen\"\n  [dismiss]=\"keepOpen\"\n  [disabled]=\"state() !== 'previewing' || toImportIcons().length === 0\"\n  [labels]=\"{\n    cancel: 'Cancel',\n    ok: 'Import' | translate\n  }\"\n>\n  <ng-container c8y-modal-title>\n    <span\n      [c8yIcon]=\"'data-import'\"\n      aria-hidden=\"true\"\n    ></span>\n  </ng-container>\n\n  <div class=\"p-24\">\n    @if (state() === 'idle') {\n      <p\n        class=\"text-16 text-center text-balance m-b-16\"\n        translate\n      >\n        Upload a ZIP file previously exported from the icon selector to import custom icons into\n        this tenant.\n      </p>\n      <div class=\"d-flex j-c-center\">\n        <c8y-drop-area\n          [icon]=\"'upload'\"\n          style=\"width: 390px\"\n          [title]=\"'Upload ZIP file' | translate\"\n          accept=\".zip\"\n          [maxAllowedFiles]=\"1\"\n          [message]=\"'Drop ZIP file here or click to browse' | translate\"\n          (dropped)=\"onZipDropped($event)\"\n        ></c8y-drop-area>\n        @if (dropError()) {\n          <div\n            class=\"alert alert-danger m-t-8\"\n            role=\"alert\"\n          >\n            {{ dropError() }}\n          </div>\n        }\n      </div>\n    }\n\n    @if (state() === 'previewing') {\n      @if (toImportIcons().length) {\n        <p\n          class=\"m-b-8 text-bold\"\n          translate\n        >\n          The following icons will be imported:\n        </p>\n        <ul class=\"list-unstyled m-b-16 separator-top\">\n          @for (icon of toImportIcons(); track icon.name) {\n            <li class=\"d-flex a-i-center gap-8 p-t-8 p-b-8 separator-bottom\">\n              <span\n                class=\"p-relative flex-no-shrink\"\n                [style.width.px]=\"24\"\n                [style.height.px]=\"24\"\n                aria-hidden=\"true\"\n              >\n                <span\n                  class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                  [class.text-default]=\"!icon.previewHtmlSecondary\"\n                  [style.color]=\"\n                    icon.previewHtmlSecondary\n                      ? 'var(--c8y-root-component-icon-dark-color-dark)'\n                      : null\n                  \"\n                  [innerHTML]=\"icon.previewHtml\"\n                ></span>\n                @if (icon.previewHtmlSecondary) {\n                  <span\n                    class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                    style=\"top: 0; left: 0; color: var(--c8y-root-component-icon-dark-color-light)\"\n                    [innerHTML]=\"icon.previewHtmlSecondary\"\n                  ></span>\n                }\n              </span>\n              <span class=\"flex-grow min-width-0 text-truncate\">\n                {{ icon.name }}\n                @if (icon.category && !icon.isOverride) {\n                  <small class=\"text-muted m-l-4\">{{ icon.category | translate }}</small>\n                }\n              </span>\n              <span class=\"tag tag--info flex-no-shrink\">\n                {{ familyLabels[icon.family] | translate }}\n              </span>\n              @if (icon.isOverride) {\n                <span\n                  class=\"tag tag--warning flex-no-shrink\"\n                  translate\n                  >Override</span\n                >\n              }\n            </li>\n          }\n        </ul>\n      } @else if (allSkippedExist()) {\n        <div\n          class=\"alert alert-warning\"\n          role=\"status\"\n          translate\n        >\n          All icons in this file already exist in this tenant.\n        </div>\n      } @else {\n        <div\n          class=\"alert alert-warning\"\n          role=\"status\"\n          translate\n        >\n          No icons to import.\n        </div>\n      }\n      @if (skippedIcons().length && !(allSkippedExist() && toImportIcons().length === 0)) {\n        <p\n          class=\"m-b-8 text-bold\"\n          translate\n        >\n          The following icons will be skipped:\n        </p>\n        <ul class=\"list-unstyled m-b-16 separator-top\">\n          @for (icon of skippedIcons(); track icon.name) {\n            <li class=\"d-flex a-i-center gap-8 p-t-8 p-b-8 separator-bottom\">\n              <span\n                class=\"p-relative flex-no-shrink\"\n                [style.width.px]=\"24\"\n                [style.height.px]=\"24\"\n                aria-hidden=\"true\"\n              >\n                <span\n                  class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                  [class.text-default]=\"!icon.previewHtmlSecondary\"\n                  [style.color]=\"\n                    icon.previewHtmlSecondary\n                      ? 'var(--c8y-root-component-icon-dark-color-dark)'\n                      : null\n                  \"\n                  [innerHTML]=\"icon.previewHtml\"\n                ></span>\n                @if (icon.previewHtmlSecondary) {\n                  <span\n                    class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                    style=\"top: 0; left: 0; color: var(--c8y-root-component-icon-dark-color-light)\"\n                    [innerHTML]=\"icon.previewHtmlSecondary\"\n                  ></span>\n                }\n              </span>\n              <span class=\"flex-grow min-width-0 text-truncate\">\n                {{ icon.name }}\n                @if (icon.category && !icon.isOverride) {\n                  <small class=\"text-muted m-l-4\">{{ icon.category | translate }}</small>\n                }\n              </span>\n              <span class=\"tag tag--warning flex-no-shrink\">\n                {{ skipReasonLabels[icon.reason] | translate }}\n              </span>\n            </li>\n          }\n        </ul>\n      }\n    }\n\n    @if (state() === 'importing') {\n      <c8y-loading\n        role=\"status\"\n        [message]=\"'Importing icons\u2026' | translate\"\n      ></c8y-loading>\n    }\n  </div>\n</c8y-modal>\n" }]
         }] });
 
 class ImportCustomIconsModalService {
@@ -1145,10 +1145,10 @@ class ImportCustomIconsModalService {
         });
         return ref.content.result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ImportCustomIconsModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ImportCustomIconsModalService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ImportCustomIconsModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ImportCustomIconsModalService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ImportCustomIconsModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ImportCustomIconsModalService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1159,13 +1159,19 @@ function errorMessage(e, fallback) {
 }
 class IconSelectorComponent {
     constructor() {
-        // Exposed so templates can use gettext() for i18n string extraction inside @let expressions
-        this.gettext = gettext;
         /** Category labels to hide from the grid. Values are translated category strings (e.g. `gettext('Custom\`icons-category\`')`). */
         this.iconCategoriesToExclude = [];
         /** When true, displays the icon's CSS class name as a label beneath each tile. */
         this.showIconClass = true;
         this.onSelect = new EventEmitter();
+        /** Per-icon labels for tooltips and accessible names. Each takes an `iconName` parameter. */
+        this.overriddenIconLabel = gettext('"{{ iconName }}" (overridden)');
+        this.iconActionsLabel = gettext('Actions for "{{ iconName }}"');
+        this.editIconLabel = gettext('Edit "{{ iconName }}"');
+        this.deleteIconLabel = gettext('Delete "{{ iconName }}"');
+        this.overrideIconLabel = gettext('Override "{{ iconName }}"');
+        this.replaceOverrideLabel = gettext('Replace override for "{{ iconName }}"');
+        this.resetOverrideLabel = gettext('Reset override for "{{ iconName }}"');
         this.allIconCategory = allIconCategory;
         this.searchTerm$ = new BehaviorSubject('');
         this.selectedIconCategory$ = new BehaviorSubject(allIconCategory);
@@ -1540,10 +1546,10 @@ class IconSelectorComponent {
         a.click();
         URL.revokeObjectURL(url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: IconSelectorComponent, isStandalone: true, selector: "c8y-icon-selector", inputs: { iconCategoriesToExclude: "iconCategoriesToExclude", showIconClass: "showIconClass", selectedIcon: "selectedIcon" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<div\n  class=\"p-l-24 p-r-24 p-t-8 p-b-8 separator-bottom sticky-top\"\n  style=\"background: var(--c8y-root-component-background-default); z-index: 2\"\n>\n  <div class=\"row d-flex-sm\">\n    <div class=\"col-sm-5 m-b-8\">\n      <div\n        class=\"input-group-search input-group\"\n        style=\"width: auto\"\n      >\n        <label\n          class=\"sr-only\"\n          for=\"filter-icons\"\n          translate\n          >Filter icons</label\n        >\n        <input\n          class=\"form-control\"\n          id=\"filter-icons\"\n          placeholder=\"{{ 'Type to filter icons\u2026' | translate }}\"\n          type=\"search\"\n          [ngModel]=\"searchTerm$ | async\"\n          (ngModelChange)=\"onSearchChange($event)\"\n        />\n        @if (searchTerm$ | async) {\n          <button\n            class=\"input-group-addon\"\n            [attr.aria-label]=\"'Clear search' | translate\"\n            type=\"button\"\n            (click)=\"onSearchChange('')\"\n          >\n            <i\n              c8yIcon=\"times\"\n              aria-hidden=\"true\"\n            ></i>\n          </button>\n        } @else {\n          <span\n            class=\"input-group-addon\"\n            aria-hidden=\"true\"\n          >\n            <i\n              c8yIcon=\"search\"\n              aria-hidden=\"true\"\n            ></i>\n          </span>\n        }\n      </div>\n    </div>\n    <div class=\"col-sm-7 m-b-8\">\n      <div class=\"d-flex a-i-center j-c-end gap-16 text-left\">\n        <div class=\"d-flex a-i-center flex-grow\">\n          <label\n            class=\"m-b-0 m-r-8 flex-no-shrink\"\n            id=\"icon-category-filter-label\"\n            translate\n            >Collection</label\n          >\n          <c8y-select\n            class=\"flex-grow\"\n            [attr.aria-labelledby]=\"'icon-category-filter-label'\"\n            [items]=\"availableIconCategoryItems$ | async\"\n            [selected]=\"selectedIconCategory$ | async\"\n            [canDeselect]=\"true\"\n            (onSelect)=\"onCategoryFilterChanged($any($event).value)\"\n            (onDeselect)=\"onCategoryFilterChanged(allIconCategory)\"\n          ></c8y-select>\n        </div>\n\n        @if (isAdmin()) {\n          <button\n            class=\"btn btn-clean p-l-8 p-r-8 flex-no-shrink\"\n            [title]=\"'Add custom icon' | translate\"\n            [attr.aria-label]=\"'Add custom icon' | translate\"\n            type=\"button\"\n            (click)=\"onAddIconClicked()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"plus-circle\"\n              aria-hidden=\"true\"\n            ></i>\n            <span translate>Add icon</span>\n          </button>\n          <button\n            class=\"btn btn-clean flex-no-shrink\"\n            [attr.aria-label]=\"'Import icons from ZIP' | translate\"\n            [tooltip]=\"'Import icons from ZIP' | translate\"\n            placement=\"top\"\n            container=\"body\"\n            type=\"button\"\n            [delay]=\"500\"\n            [adaptivePosition]=\"false\"\n            (click)=\"onImportClicked()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"data-import\"\n              aria-hidden=\"true\"\n            ></i>\n            <span>{{ 'Import`verb, imports icons from a ZIP file`' | translate }}</span>\n          </button>\n          @if (hasCustomIcons()) {\n            <button\n              class=\"btn btn-clean flex-no-shrink\"\n              [attr.aria-label]=\"'Export custom icons as ZIP' | translate\"\n              [tooltip]=\"'Export custom icons as ZIP' | translate\"\n              placement=\"top\"\n              container=\"body\"\n              type=\"button\"\n              [delay]=\"500\"\n              [adaptivePosition]=\"false\"\n              (click)=\"onExportClicked()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"data-export\"\n                aria-hidden=\"true\"\n              ></i>\n              <span>{{ 'Export`verb, exports custom icons as a ZIP file`' | translate }}</span>\n            </button>\n          }\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (isSaving()) {\n    <div\n      class=\"p-absolute m-t-4 p-b-4 overflow-hidden\"\n      style=\"left: 0; right: 0\"\n      [attr.aria-label]=\"'Saving\u2026' | translate\"\n      role=\"status\"\n    >\n      <c8y-loading layout=\"page\"></c8y-loading>\n    </div>\n  }\n</div>\n\n<div class=\"p-16\">\n  @if (iconsLoading()) {\n    <div\n      class=\"d-flex a-i-center j-c-center p-32\"\n      [attr.aria-label]=\"'Loading icons\u2026' | translate\"\n      role=\"status\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n  } @else {\n    <p\n      class=\"sr-only\"\n      role=\"status\"\n    >\n      @if (filteredIconCount() === 0) {\n        {{ 'No icons found' | translate }}\n      } @else {\n        {{ '{{count}} icon(s) found' | translate: { count: filteredIconCount() } }}\n      }\n    </p>\n    <section\n      class=\"dtm-icon-grid\"\n      [attr.aria-label]=\"'Icon grid' | translate\"\n      [attr.aria-busy]=\"visibleDefinitions().length === 0 ? 'true' : null\"\n      role=\"region\"\n    >\n      @for (iconDefinition of visibleDefinitions(); track iconDefinition.label) {\n        <div\n          class=\"d-contents\"\n          [attr.aria-label]=\"iconDefinition.label | translate\"\n          role=\"group\"\n        >\n          <div class=\"legend form-block center grid__col--fullspan d-flex a-i-center gap-8\">\n            {{ iconDefinition.label | translate }}\n            @if (customCategoryLabels().has(iconDefinition.label)) {\n              <span class=\"tag tag--info m-l-4 m-t-0 m-b-0\">{{\n                'Custom`badge indicating a user-added icon category`' | translate\n              }}</span>\n            }\n          </div>\n\n          @for (icon of iconDefinition.icons; track icon[0]) {\n            @let isCustom = isCustomIcon(icon[0]);\n            @let isOverridden = isIconOverridden(icon[0]);\n            @let overriddenLabel = gettext('{{name}} (overridden)');\n            @let deleteHint = 'Select a different icon before deleting this one.' | translate;\n            <div class=\"d-contents\">\n              <div\n                class=\"dtm-icon-grid__item\"\n                [class.dtm-icon-grid__item--selected]=\"selectedIcon && icon[0] === selectedIcon\"\n                [class.dtm-icon-grid__item--overridden]=\"isOverridden\"\n              >\n                <button\n                  class=\"dtm-icon-grid__btn\"\n                  [title]=\"icon[0] | iconName\"\n                  [attr.aria-label]=\"\n                    isOverridden\n                      ? (overriddenLabel | translate: { name: icon[0] | iconName })\n                      : (icon[0] | iconName)\n                  \"\n                  [attr.aria-current]=\"selectedIcon && icon[0] === selectedIcon ? 'true' : null\"\n                  (click)=\"onIconClicked(icon)\"\n                >\n                  <i\n                    class=\"icon-40 c8y-icon-duocolor\"\n                    [c8yIcon]=\"icon[0]\"\n                    aria-hidden=\"true\"\n                  ></i>\n                  @if (showIconClass) {\n                    <small\n                      class=\"d-block text-center text-break-word\"\n                      aria-hidden=\"true\"\n                    >\n                      {{ icon[0] | iconName }}\n                    </small>\n                  }\n                </button>\n\n                @if (isOverridden) {\n                  <span\n                    class=\"dtm-icon-grid__override-marker\"\n                    [tooltip]=\"'Overridden icon' | translate\"\n                    placement=\"top\"\n                    container=\"body\"\n                    aria-hidden=\"true\"\n                    [delay]=\"500\"\n                  >\n                    <i c8yIcon=\"replace\"></i>\n                  </span>\n                }\n\n                @if (isAdmin()) {\n                  <div\n                    class=\"dtm-icon-grid__actions\"\n                    [attr.aria-label]=\"'{{name}} actions' | translate: { name: icon[0] | iconName }\"\n                    role=\"group\"\n                  >\n                    @if (isCustom) {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"\n                          'Edit {{name}}' | translate: { name: icon[0] | iconName }\n                        \"\n                        [tooltip]=\"'Edit {{name}}' | translate: { name: icon[0] | iconName }\"\n                        placement=\"top\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"$event.stopPropagation(); onEditIconClicked(icon[0])\"\n                      >\n                        <i\n                          c8yIcon=\"pencil\"\n                          aria-hidden=\"true\"\n                        ></i>\n                      </button>\n                      <span\n                        [tooltip]=\"icon[0] === selectedIcon ? deleteHint : null\"\n                        placement=\"top\"\n                        container=\"body\"\n                        [delay]=\"500\"\n                      >\n                        <button\n                          class=\"btn btn-dot btn-dot--danger m-0\"\n                          [class.disabled]=\"icon[0] === selectedIcon\"\n                          [attr.aria-label]=\"\n                            'Delete {{name}}' | translate: { name: icon[0] | iconName }\n                          \"\n                          [tooltip]=\"'Delete {{name}}' | translate: { name: icon[0] | iconName }\"\n                          placement=\"top\"\n                          container=\"body\"\n                          [attr.aria-disabled]=\"icon[0] === selectedIcon ? 'true' : null\"\n                          [attr.aria-describedby]=\"\n                            icon[0] === selectedIcon ? 'delete-hint-' + icon[0] : null\n                          \"\n                          type=\"button\"\n                          [delay]=\"500\"\n                          (click)=\"\n                            $event.stopPropagation();\n                            icon[0] === selectedIcon || onDeleteIconClicked(icon[0])\n                          \"\n                        >\n                          <i\n                            c8yIcon=\"minus-circle\"\n                            aria-hidden=\"true\"\n                          ></i>\n                        </button>\n                        @if (icon[0] === selectedIcon) {\n                          <span\n                            class=\"sr-only\"\n                            [id]=\"'delete-hint-' + icon[0]\"\n                            >{{ deleteHint }}</span\n                          >\n                        }\n                      </span>\n                    } @else {\n                      @let overrideKey =\n                        isOverridden\n                          ? gettext('Replace override for {{name}}')\n                          : gettext('Override {{name}}');\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"overrideKey | translate: { name: icon[0] | iconName }\"\n                        [tooltip]=\"overrideKey | translate: { name: icon[0] | iconName }\"\n                        placement=\"top\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"$event.stopPropagation(); onOverrideIconClicked(icon)\"\n                      >\n                        <i\n                          c8yIcon=\"replace\"\n                          aria-hidden=\"true\"\n                        ></i>\n                      </button>\n                      @if (isOverridden) {\n                        <button\n                          class=\"btn btn-dot btn-dot--danger\"\n                          [attr.aria-label]=\"\n                            'Reset override for {{name}}' | translate: { name: icon[0] | iconName }\n                          \"\n                          [tooltip]=\"\n                            'Reset override for {{name}}' | translate: { name: icon[0] | iconName }\n                          \"\n                          placement=\"top\"\n                          container=\"body\"\n                          type=\"button\"\n                          [delay]=\"500\"\n                          (click)=\"$event.stopPropagation(); onResetOverrideClicked(icon[0])\"\n                        >\n                          <i\n                            c8yIcon=\"undo\"\n                            aria-hidden=\"true\"\n                          ></i>\n                        </button>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      } @empty {\n        <c8y-ui-empty-state\n          class=\"grid__col--fullspan\"\n          icon=\"search\"\n          [title]=\"'No icons found' | translate\"\n          [subtitle]=\"\n            'Try adjusting your search or filter to find what you\\'re looking for.' | translate\n          \"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      }\n    </section>\n  }\n  <!-- end @else iconsLoading -->\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "component", type: SelectComponent, selector: "c8y-select", inputs: ["placeholder", "items", "selected", "container", "multi", "canSelectWithSpace", "disabled", "autoClose", "insideClick", "required", "canDeselect", "name", "icon", "filterItems"], outputs: ["onSelect", "onDeselect", "onIconClick"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.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" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: IconNamePipe, name: "iconName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: IconSelectorComponent, isStandalone: true, selector: "c8y-icon-selector", inputs: { iconCategoriesToExclude: "iconCategoriesToExclude", showIconClass: "showIconClass", selectedIcon: "selectedIcon" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<div\n  class=\"p-l-24 p-r-24 p-t-8 p-b-8 separator-bottom sticky-top\"\n  style=\"background: var(--c8y-root-component-background-default); z-index: 2\"\n>\n  <div class=\"row d-flex-sm\">\n    <div class=\"col-sm-5 m-b-8\">\n      <div\n        class=\"input-group-search input-group\"\n        style=\"width: auto\"\n      >\n        <label\n          class=\"sr-only\"\n          for=\"filter-icons\"\n          translate\n          >Filter icons</label\n        >\n        <input\n          class=\"form-control\"\n          id=\"filter-icons\"\n          placeholder=\"{{ 'Type to filter icons\u2026' | translate }}\"\n          type=\"search\"\n          [ngModel]=\"searchTerm$ | async\"\n          (ngModelChange)=\"onSearchChange($event)\"\n        />\n        @if (searchTerm$ | async) {\n          <button\n            class=\"input-group-addon\"\n            [attr.aria-label]=\"'Clear search' | translate\"\n            type=\"button\"\n            (click)=\"onSearchChange('')\"\n          >\n            <i\n              c8yIcon=\"times\"\n              aria-hidden=\"true\"\n            ></i>\n          </button>\n        } @else {\n          <span\n            class=\"input-group-addon\"\n            aria-hidden=\"true\"\n          >\n            <i\n              c8yIcon=\"search\"\n              aria-hidden=\"true\"\n            ></i>\n          </span>\n        }\n      </div>\n    </div>\n    <div class=\"col-sm-7 m-b-8\">\n      <div class=\"d-flex a-i-center j-c-end gap-16 text-left\">\n        <div class=\"d-flex a-i-center flex-grow\">\n          <label\n            class=\"m-b-0 m-r-8 flex-no-shrink\"\n            id=\"icon-category-filter-label\"\n            translate\n            >Collection</label\n          >\n          <c8y-select\n            class=\"flex-grow\"\n            [attr.aria-labelledby]=\"'icon-category-filter-label'\"\n            [items]=\"availableIconCategoryItems$ | async\"\n            [selected]=\"selectedIconCategory$ | async\"\n            [canDeselect]=\"true\"\n            (onSelect)=\"onCategoryFilterChanged($any($event).value)\"\n            (onDeselect)=\"onCategoryFilterChanged(allIconCategory)\"\n          ></c8y-select>\n        </div>\n\n        @if (isAdmin()) {\n          <button\n            class=\"btn btn-clean p-l-8 p-r-8 flex-no-shrink\"\n            [title]=\"'Add custom icon' | translate\"\n            [attr.aria-label]=\"'Add custom icon' | translate\"\n            type=\"button\"\n            (click)=\"onAddIconClicked()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"plus-circle\"\n              aria-hidden=\"true\"\n            ></i>\n            <span translate>Add icon</span>\n          </button>\n          <button\n            class=\"btn btn-clean flex-no-shrink\"\n            [attr.aria-label]=\"'Import icons from ZIP file' | translate\"\n            [tooltip]=\"'Import icons from ZIP file' | translate\"\n            placement=\"top\"\n            container=\"body\"\n            type=\"button\"\n            [delay]=\"500\"\n            [adaptivePosition]=\"false\"\n            (click)=\"onImportClicked()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"data-import\"\n              aria-hidden=\"true\"\n            ></i>\n            <span>{{ 'Import`verb, imports icons from a ZIP file`' | translate }}</span>\n          </button>\n          @if (hasCustomIcons()) {\n            <button\n              class=\"btn btn-clean flex-no-shrink\"\n              [attr.aria-label]=\"'Export custom icons as ZIP file' | translate\"\n              [tooltip]=\"'Export custom icons as ZIP file' | translate\"\n              placement=\"top\"\n              container=\"body\"\n              type=\"button\"\n              [delay]=\"500\"\n              [adaptivePosition]=\"false\"\n              (click)=\"onExportClicked()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"data-export\"\n                aria-hidden=\"true\"\n              ></i>\n              <span>{{ 'Export`verb, exports custom icons as a ZIP file`' | translate }}</span>\n            </button>\n          }\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (isSaving()) {\n    <div\n      class=\"p-absolute m-t-4 p-b-4 overflow-hidden\"\n      style=\"left: 0; right: 0\"\n      [attr.aria-label]=\"'Saving\u2026' | translate\"\n      role=\"status\"\n    >\n      <c8y-loading layout=\"page\"></c8y-loading>\n    </div>\n  }\n</div>\n\n<div class=\"p-16\">\n  @if (iconsLoading()) {\n    <div\n      class=\"d-flex a-i-center j-c-center p-32\"\n      [attr.aria-label]=\"'Loading icons\u2026' | translate\"\n      role=\"status\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n  } @else {\n    <p\n      class=\"sr-only\"\n      role=\"status\"\n    >\n      @if (filteredIconCount() === 0) {\n        {{ 'No icons found' | translate }}\n      } @else {\n        {{ '{{count}} icon(s) found' | translate: { count: filteredIconCount() } }}\n      }\n    </p>\n    <section\n      class=\"dtm-icon-grid\"\n      [attr.aria-label]=\"'Icon grid' | translate\"\n      [attr.aria-busy]=\"visibleDefinitions().length === 0 ? 'true' : null\"\n      role=\"region\"\n    >\n      @for (iconDefinition of visibleDefinitions(); track iconDefinition.label) {\n        <div\n          class=\"d-contents\"\n          [attr.aria-label]=\"iconDefinition.label | translate\"\n          role=\"group\"\n        >\n          <div class=\"legend form-block center grid__col--fullspan d-flex a-i-center gap-8\">\n            {{ iconDefinition.label | translate }}\n            @if (customCategoryLabels().has(iconDefinition.label)) {\n              <span class=\"tag tag--info m-l-4 m-t-0 m-b-0\">{{\n                'Custom`badge indicating a user-added icon category`' | translate\n              }}</span>\n            }\n          </div>\n\n          @for (icon of iconDefinition.icons; track icon[0]) {\n            @let isCustom = isCustomIcon(icon[0]);\n            @let isOverridden = isIconOverridden(icon[0]);\n            @let deleteHint = 'Select a different icon before deleting this one.' | translate;\n            <div class=\"d-contents\">\n              <div\n                class=\"dtm-icon-grid__item\"\n                [class.dtm-icon-grid__item--selected]=\"selectedIcon && icon[0] === selectedIcon\"\n                [class.dtm-icon-grid__item--overridden]=\"isOverridden\"\n              >\n                <button\n                  class=\"dtm-icon-grid__btn\"\n                  [title]=\"icon[0] | iconName\"\n                  [attr.aria-label]=\"\n                    isOverridden\n                      ? (overriddenIconLabel | translate: { iconName: icon[0] | iconName })\n                      : (icon[0] | iconName)\n                  \"\n                  [attr.aria-current]=\"selectedIcon && icon[0] === selectedIcon ? 'true' : null\"\n                  (click)=\"onIconClicked(icon)\"\n                >\n                  <i\n                    class=\"icon-40 c8y-icon-duocolor\"\n                    [c8yIcon]=\"icon[0]\"\n                    aria-hidden=\"true\"\n                  ></i>\n                  @if (showIconClass) {\n                    <small\n                      class=\"d-block text-center text-break-word\"\n                      aria-hidden=\"true\"\n                    >\n                      {{ icon[0] | iconName }}\n                    </small>\n                  }\n                </button>\n\n                @if (isOverridden) {\n                  <span\n                    class=\"dtm-icon-grid__override-marker\"\n                    [tooltip]=\"'Overridden icon' | translate\"\n                    placement=\"top\"\n                    container=\"body\"\n                    aria-hidden=\"true\"\n                    [delay]=\"500\"\n                  >\n                    <i c8yIcon=\"replace\"></i>\n                  </span>\n                }\n\n                @if (isAdmin()) {\n                  <div\n                    class=\"dtm-icon-grid__actions\"\n                    [attr.aria-label]=\"\n                      iconActionsLabel | translate: { iconName: icon[0] | iconName }\n                    \"\n                    role=\"group\"\n                  >\n                    @if (isCustom) {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"\n                          editIconLabel | translate: { iconName: icon[0] | iconName }\n                        \"\n                        [tooltip]=\"editIconLabel | translate: { iconName: icon[0] | iconName }\"\n                        placement=\"top\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"$event.stopPropagation(); onEditIconClicked(icon[0])\"\n                      >\n                        <i\n                          c8yIcon=\"pencil\"\n                          aria-hidden=\"true\"\n                        ></i>\n                      </button>\n                      <span\n                        [tooltip]=\"icon[0] === selectedIcon ? deleteHint : null\"\n                        placement=\"top\"\n                        container=\"body\"\n                        [delay]=\"500\"\n                      >\n                        <button\n                          class=\"btn btn-dot btn-dot--danger m-0\"\n                          [class.disabled]=\"icon[0] === selectedIcon\"\n                          [attr.aria-label]=\"\n                            deleteIconLabel | translate: { iconName: icon[0] | iconName }\n                          \"\n                          [tooltip]=\"deleteIconLabel | translate: { iconName: icon[0] | iconName }\"\n                          placement=\"top\"\n                          container=\"body\"\n                          [attr.aria-disabled]=\"icon[0] === selectedIcon ? 'true' : null\"\n                          [attr.aria-describedby]=\"\n                            icon[0] === selectedIcon ? 'delete-hint-' + icon[0] : null\n                          \"\n                          type=\"button\"\n                          [delay]=\"500\"\n                          (click)=\"\n                            $event.stopPropagation();\n                            icon[0] === selectedIcon || onDeleteIconClicked(icon[0])\n                          \"\n                        >\n                          <i\n                            c8yIcon=\"minus-circle\"\n                            aria-hidden=\"true\"\n                          ></i>\n                        </button>\n                        @if (icon[0] === selectedIcon) {\n                          <span\n                            class=\"sr-only\"\n                            [id]=\"'delete-hint-' + icon[0]\"\n                            >{{ deleteHint }}</span\n                          >\n                        }\n                      </span>\n                    } @else {\n                      @let overrideKey = isOverridden ? replaceOverrideLabel : overrideIconLabel;\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"\n                          overrideKey | translate: { iconName: icon[0] | iconName }\n                        \"\n                        [tooltip]=\"overrideKey | translate: { iconName: icon[0] | iconName }\"\n                        placement=\"top\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"$event.stopPropagation(); onOverrideIconClicked(icon)\"\n                      >\n                        <i\n                          c8yIcon=\"replace\"\n                          aria-hidden=\"true\"\n                        ></i>\n                      </button>\n                      @if (isOverridden) {\n                        <button\n                          class=\"btn btn-dot btn-dot--danger\"\n                          [attr.aria-label]=\"\n                            resetOverrideLabel | translate: { iconName: icon[0] | iconName }\n                          \"\n                          [tooltip]=\"\n                            resetOverrideLabel | translate: { iconName: icon[0] | iconName }\n                          \"\n                          placement=\"top\"\n                          container=\"body\"\n                          type=\"button\"\n                          [delay]=\"500\"\n                          (click)=\"$event.stopPropagation(); onResetOverrideClicked(icon[0])\"\n                        >\n                          <i\n                            c8yIcon=\"undo\"\n                            aria-hidden=\"true\"\n                          ></i>\n                        </button>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      } @empty {\n        <c8y-ui-empty-state\n          class=\"grid__col--fullspan\"\n          icon=\"search\"\n          [title]=\"'No icons found' | translate\"\n          [subtitle]=\"\n            'Try adjusting your search or filter to find what you\\'re looking for.' | translate\n          \"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      }\n    </section>\n  }\n  <!-- end @else iconsLoading -->\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "component", type: SelectComponent, selector: "c8y-select", inputs: ["placeholder", "items", "selected", "container", "multi", "canSelectWithSpace", "disabled", "autoClose", "insideClick", "required", "canDeselect", "name", "icon", "filterItems"], outputs: ["onSelect", "onDeselect", "onIconClick"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.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" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: IconNamePipe, name: "iconName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-icon-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FormsModule,
@@ -1556,7 +1562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         LoadingComponent,
                         SelectComponent,
                         TooltipModule
-                    ], template: "<div\n  class=\"p-l-24 p-r-24 p-t-8 p-b-8 separator-bottom sticky-top\"\n  style=\"background: var(--c8y-root-component-background-default); z-index: 2\"\n>\n  <div class=\"row d-flex-sm\">\n    <div class=\"col-sm-5 m-b-8\">\n      <div\n        class=\"input-group-search input-group\"\n        style=\"width: auto\"\n      >\n        <label\n          class=\"sr-only\"\n          for=\"filter-icons\"\n          translate\n          >Filter icons</label\n        >\n        <input\n          class=\"form-control\"\n          id=\"filter-icons\"\n          placeholder=\"{{ 'Type to filter icons\u2026' | translate }}\"\n          type=\"search\"\n          [ngModel]=\"searchTerm$ | async\"\n          (ngModelChange)=\"onSearchChange($event)\"\n        />\n        @if (searchTerm$ | async) {\n          <button\n            class=\"input-group-addon\"\n            [attr.aria-label]=\"'Clear search' | translate\"\n            type=\"button\"\n            (click)=\"onSearchChange('')\"\n          >\n            <i\n              c8yIcon=\"times\"\n              aria-hidden=\"true\"\n            ></i>\n          </button>\n        } @else {\n          <span\n            class=\"input-group-addon\"\n            aria-hidden=\"true\"\n          >\n            <i\n              c8yIcon=\"search\"\n              aria-hidden=\"true\"\n            ></i>\n          </span>\n        }\n      </div>\n    </div>\n    <div class=\"col-sm-7 m-b-8\">\n      <div class=\"d-flex a-i-center j-c-end gap-16 text-left\">\n        <div class=\"d-flex a-i-center flex-grow\">\n          <label\n            class=\"m-b-0 m-r-8 flex-no-shrink\"\n            id=\"icon-category-filter-label\"\n            translate\n            >Collection</label\n          >\n          <c8y-select\n            class=\"flex-grow\"\n            [attr.aria-labelledby]=\"'icon-category-filter-label'\"\n            [items]=\"availableIconCategoryItems$ | async\"\n            [selected]=\"selectedIconCategory$ | async\"\n            [canDeselect]=\"true\"\n            (onSelect)=\"onCategoryFilterChanged($any($event).value)\"\n            (onDeselect)=\"onCategoryFilterChanged(allIconCategory)\"\n          ></c8y-select>\n        </div>\n\n        @if (isAdmin()) {\n          <button\n            class=\"btn btn-clean p-l-8 p-r-8 flex-no-shrink\"\n            [title]=\"'Add custom icon' | translate\"\n            [attr.aria-label]=\"'Add custom icon' | translate\"\n            type=\"button\"\n            (click)=\"onAddIconClicked()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"plus-circle\"\n              aria-hidden=\"true\"\n            ></i>\n            <span translate>Add icon</span>\n          </button>\n          <button\n            class=\"btn btn-clean flex-no-shrink\"\n            [attr.aria-label]=\"'Import icons from ZIP' | translate\"\n            [tooltip]=\"'Import icons from ZIP' | translate\"\n            placement=\"top\"\n            container=\"body\"\n            type=\"button\"\n            [delay]=\"500\"\n            [adaptivePosition]=\"false\"\n            (click)=\"onImportClicked()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"data-import\"\n              aria-hidden=\"true\"\n            ></i>\n            <span>{{ 'Import`verb, imports icons from a ZIP file`' | translate }}</span>\n          </button>\n          @if (hasCustomIcons()) {\n            <button\n              class=\"btn btn-clean flex-no-shrink\"\n              [attr.aria-label]=\"'Export custom icons as ZIP' | translate\"\n              [tooltip]=\"'Export custom icons as ZIP' | translate\"\n              placement=\"top\"\n              container=\"body\"\n              type=\"button\"\n              [delay]=\"500\"\n              [adaptivePosition]=\"false\"\n              (click)=\"onExportClicked()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"data-export\"\n                aria-hidden=\"true\"\n              ></i>\n              <span>{{ 'Export`verb, exports custom icons as a ZIP file`' | translate }}</span>\n            </button>\n          }\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (isSaving()) {\n    <div\n      class=\"p-absolute m-t-4 p-b-4 overflow-hidden\"\n      style=\"left: 0; right: 0\"\n      [attr.aria-label]=\"'Saving\u2026' | translate\"\n      role=\"status\"\n    >\n      <c8y-loading layout=\"page\"></c8y-loading>\n    </div>\n  }\n</div>\n\n<div class=\"p-16\">\n  @if (iconsLoading()) {\n    <div\n      class=\"d-flex a-i-center j-c-center p-32\"\n      [attr.aria-label]=\"'Loading icons\u2026' | translate\"\n      role=\"status\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n  } @else {\n    <p\n      class=\"sr-only\"\n      role=\"status\"\n    >\n      @if (filteredIconCount() === 0) {\n        {{ 'No icons found' | translate }}\n      } @else {\n        {{ '{{count}} icon(s) found' | translate: { count: filteredIconCount() } }}\n      }\n    </p>\n    <section\n      class=\"dtm-icon-grid\"\n      [attr.aria-label]=\"'Icon grid' | translate\"\n      [attr.aria-busy]=\"visibleDefinitions().length === 0 ? 'true' : null\"\n      role=\"region\"\n    >\n      @for (iconDefinition of visibleDefinitions(); track iconDefinition.label) {\n        <div\n          class=\"d-contents\"\n          [attr.aria-label]=\"iconDefinition.label | translate\"\n          role=\"group\"\n        >\n          <div class=\"legend form-block center grid__col--fullspan d-flex a-i-center gap-8\">\n            {{ iconDefinition.label | translate }}\n            @if (customCategoryLabels().has(iconDefinition.label)) {\n              <span class=\"tag tag--info m-l-4 m-t-0 m-b-0\">{{\n                'Custom`badge indicating a user-added icon category`' | translate\n              }}</span>\n            }\n          </div>\n\n          @for (icon of iconDefinition.icons; track icon[0]) {\n            @let isCustom = isCustomIcon(icon[0]);\n            @let isOverridden = isIconOverridden(icon[0]);\n            @let overriddenLabel = gettext('{{name}} (overridden)');\n            @let deleteHint = 'Select a different icon before deleting this one.' | translate;\n            <div class=\"d-contents\">\n              <div\n                class=\"dtm-icon-grid__item\"\n                [class.dtm-icon-grid__item--selected]=\"selectedIcon && icon[0] === selectedIcon\"\n                [class.dtm-icon-grid__item--overridden]=\"isOverridden\"\n              >\n                <button\n                  class=\"dtm-icon-grid__btn\"\n                  [title]=\"icon[0] | iconName\"\n                  [attr.aria-label]=\"\n                    isOverridden\n                      ? (overriddenLabel | translate: { name: icon[0] | iconName })\n                      : (icon[0] | iconName)\n                  \"\n                  [attr.aria-current]=\"selectedIcon && icon[0] === selectedIcon ? 'true' : null\"\n                  (click)=\"onIconClicked(icon)\"\n                >\n                  <i\n                    class=\"icon-40 c8y-icon-duocolor\"\n                    [c8yIcon]=\"icon[0]\"\n                    aria-hidden=\"true\"\n                  ></i>\n                  @if (showIconClass) {\n                    <small\n                      class=\"d-block text-center text-break-word\"\n                      aria-hidden=\"true\"\n                    >\n                      {{ icon[0] | iconName }}\n                    </small>\n                  }\n                </button>\n\n                @if (isOverridden) {\n                  <span\n                    class=\"dtm-icon-grid__override-marker\"\n                    [tooltip]=\"'Overridden icon' | translate\"\n                    placement=\"top\"\n                    container=\"body\"\n                    aria-hidden=\"true\"\n                    [delay]=\"500\"\n                  >\n                    <i c8yIcon=\"replace\"></i>\n                  </span>\n                }\n\n                @if (isAdmin()) {\n                  <div\n                    class=\"dtm-icon-grid__actions\"\n                    [attr.aria-label]=\"'{{name}} actions' | translate: { name: icon[0] | iconName }\"\n                    role=\"group\"\n                  >\n                    @if (isCustom) {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"\n                          'Edit {{name}}' | translate: { name: icon[0] | iconName }\n                        \"\n                        [tooltip]=\"'Edit {{name}}' | translate: { name: icon[0] | iconName }\"\n                        placement=\"top\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"$event.stopPropagation(); onEditIconClicked(icon[0])\"\n                      >\n                        <i\n                          c8yIcon=\"pencil\"\n                          aria-hidden=\"true\"\n                        ></i>\n                      </button>\n                      <span\n                        [tooltip]=\"icon[0] === selectedIcon ? deleteHint : null\"\n                        placement=\"top\"\n                        container=\"body\"\n                        [delay]=\"500\"\n                      >\n                        <button\n                          class=\"btn btn-dot btn-dot--danger m-0\"\n                          [class.disabled]=\"icon[0] === selectedIcon\"\n                          [attr.aria-label]=\"\n                            'Delete {{name}}' | translate: { name: icon[0] | iconName }\n                          \"\n                          [tooltip]=\"'Delete {{name}}' | translate: { name: icon[0] | iconName }\"\n                          placement=\"top\"\n                          container=\"body\"\n                          [attr.aria-disabled]=\"icon[0] === selectedIcon ? 'true' : null\"\n                          [attr.aria-describedby]=\"\n                            icon[0] === selectedIcon ? 'delete-hint-' + icon[0] : null\n                          \"\n                          type=\"button\"\n                          [delay]=\"500\"\n                          (click)=\"\n                            $event.stopPropagation();\n                            icon[0] === selectedIcon || onDeleteIconClicked(icon[0])\n                          \"\n                        >\n                          <i\n                            c8yIcon=\"minus-circle\"\n                            aria-hidden=\"true\"\n                          ></i>\n                        </button>\n                        @if (icon[0] === selectedIcon) {\n                          <span\n                            class=\"sr-only\"\n                            [id]=\"'delete-hint-' + icon[0]\"\n                            >{{ deleteHint }}</span\n                          >\n                        }\n                      </span>\n                    } @else {\n                      @let overrideKey =\n                        isOverridden\n                          ? gettext('Replace override for {{name}}')\n                          : gettext('Override {{name}}');\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"overrideKey | translate: { name: icon[0] | iconName }\"\n                        [tooltip]=\"overrideKey | translate: { name: icon[0] | iconName }\"\n                        placement=\"top\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"$event.stopPropagation(); onOverrideIconClicked(icon)\"\n                      >\n                        <i\n                          c8yIcon=\"replace\"\n                          aria-hidden=\"true\"\n                        ></i>\n                      </button>\n                      @if (isOverridden) {\n                        <button\n                          class=\"btn btn-dot btn-dot--danger\"\n                          [attr.aria-label]=\"\n                            'Reset override for {{name}}' | translate: { name: icon[0] | iconName }\n                          \"\n                          [tooltip]=\"\n                            'Reset override for {{name}}' | translate: { name: icon[0] | iconName }\n                          \"\n                          placement=\"top\"\n                          container=\"body\"\n                          type=\"button\"\n                          [delay]=\"500\"\n                          (click)=\"$event.stopPropagation(); onResetOverrideClicked(icon[0])\"\n                        >\n                          <i\n                            c8yIcon=\"undo\"\n                            aria-hidden=\"true\"\n                          ></i>\n                        </button>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      } @empty {\n        <c8y-ui-empty-state\n          class=\"grid__col--fullspan\"\n          icon=\"search\"\n          [title]=\"'No icons found' | translate\"\n          [subtitle]=\"\n            'Try adjusting your search or filter to find what you\\'re looking for.' | translate\n          \"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      }\n    </section>\n  }\n  <!-- end @else iconsLoading -->\n</div>\n" }]
+                    ], template: "<div\n  class=\"p-l-24 p-r-24 p-t-8 p-b-8 separator-bottom sticky-top\"\n  style=\"background: var(--c8y-root-component-background-default); z-index: 2\"\n>\n  <div class=\"row d-flex-sm\">\n    <div class=\"col-sm-5 m-b-8\">\n      <div\n        class=\"input-group-search input-group\"\n        style=\"width: auto\"\n      >\n        <label\n          class=\"sr-only\"\n          for=\"filter-icons\"\n          translate\n          >Filter icons</label\n        >\n        <input\n          class=\"form-control\"\n          id=\"filter-icons\"\n          placeholder=\"{{ 'Type to filter icons\u2026' | translate }}\"\n          type=\"search\"\n          [ngModel]=\"searchTerm$ | async\"\n          (ngModelChange)=\"onSearchChange($event)\"\n        />\n        @if (searchTerm$ | async) {\n          <button\n            class=\"input-group-addon\"\n            [attr.aria-label]=\"'Clear search' | translate\"\n            type=\"button\"\n            (click)=\"onSearchChange('')\"\n          >\n            <i\n              c8yIcon=\"times\"\n              aria-hidden=\"true\"\n            ></i>\n          </button>\n        } @else {\n          <span\n            class=\"input-group-addon\"\n            aria-hidden=\"true\"\n          >\n            <i\n              c8yIcon=\"search\"\n              aria-hidden=\"true\"\n            ></i>\n          </span>\n        }\n      </div>\n    </div>\n    <div class=\"col-sm-7 m-b-8\">\n      <div class=\"d-flex a-i-center j-c-end gap-16 text-left\">\n        <div class=\"d-flex a-i-center flex-grow\">\n          <label\n            class=\"m-b-0 m-r-8 flex-no-shrink\"\n            id=\"icon-category-filter-label\"\n            translate\n            >Collection</label\n          >\n          <c8y-select\n            class=\"flex-grow\"\n            [attr.aria-labelledby]=\"'icon-category-filter-label'\"\n            [items]=\"availableIconCategoryItems$ | async\"\n            [selected]=\"selectedIconCategory$ | async\"\n            [canDeselect]=\"true\"\n            (onSelect)=\"onCategoryFilterChanged($any($event).value)\"\n            (onDeselect)=\"onCategoryFilterChanged(allIconCategory)\"\n          ></c8y-select>\n        </div>\n\n        @if (isAdmin()) {\n          <button\n            class=\"btn btn-clean p-l-8 p-r-8 flex-no-shrink\"\n            [title]=\"'Add custom icon' | translate\"\n            [attr.aria-label]=\"'Add custom icon' | translate\"\n            type=\"button\"\n            (click)=\"onAddIconClicked()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"plus-circle\"\n              aria-hidden=\"true\"\n            ></i>\n            <span translate>Add icon</span>\n          </button>\n          <button\n            class=\"btn btn-clean flex-no-shrink\"\n            [attr.aria-label]=\"'Import icons from ZIP file' | translate\"\n            [tooltip]=\"'Import icons from ZIP file' | translate\"\n            placement=\"top\"\n            container=\"body\"\n            type=\"button\"\n            [delay]=\"500\"\n            [adaptivePosition]=\"false\"\n            (click)=\"onImportClicked()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"data-import\"\n              aria-hidden=\"true\"\n            ></i>\n            <span>{{ 'Import`verb, imports icons from a ZIP file`' | translate }}</span>\n          </button>\n          @if (hasCustomIcons()) {\n            <button\n              class=\"btn btn-clean flex-no-shrink\"\n              [attr.aria-label]=\"'Export custom icons as ZIP file' | translate\"\n              [tooltip]=\"'Export custom icons as ZIP file' | translate\"\n              placement=\"top\"\n              container=\"body\"\n              type=\"button\"\n              [delay]=\"500\"\n              [adaptivePosition]=\"false\"\n              (click)=\"onExportClicked()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"data-export\"\n                aria-hidden=\"true\"\n              ></i>\n              <span>{{ 'Export`verb, exports custom icons as a ZIP file`' | translate }}</span>\n            </button>\n          }\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (isSaving()) {\n    <div\n      class=\"p-absolute m-t-4 p-b-4 overflow-hidden\"\n      style=\"left: 0; right: 0\"\n      [attr.aria-label]=\"'Saving\u2026' | translate\"\n      role=\"status\"\n    >\n      <c8y-loading layout=\"page\"></c8y-loading>\n    </div>\n  }\n</div>\n\n<div class=\"p-16\">\n  @if (iconsLoading()) {\n    <div\n      class=\"d-flex a-i-center j-c-center p-32\"\n      [attr.aria-label]=\"'Loading icons\u2026' | translate\"\n      role=\"status\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n  } @else {\n    <p\n      class=\"sr-only\"\n      role=\"status\"\n    >\n      @if (filteredIconCount() === 0) {\n        {{ 'No icons found' | translate }}\n      } @else {\n        {{ '{{count}} icon(s) found' | translate: { count: filteredIconCount() } }}\n      }\n    </p>\n    <section\n      class=\"dtm-icon-grid\"\n      [attr.aria-label]=\"'Icon grid' | translate\"\n      [attr.aria-busy]=\"visibleDefinitions().length === 0 ? 'true' : null\"\n      role=\"region\"\n    >\n      @for (iconDefinition of visibleDefinitions(); track iconDefinition.label) {\n        <div\n          class=\"d-contents\"\n          [attr.aria-label]=\"iconDefinition.label | translate\"\n          role=\"group\"\n        >\n          <div class=\"legend form-block center grid__col--fullspan d-flex a-i-center gap-8\">\n            {{ iconDefinition.label | translate }}\n            @if (customCategoryLabels().has(iconDefinition.label)) {\n              <span class=\"tag tag--info m-l-4 m-t-0 m-b-0\">{{\n                'Custom`badge indicating a user-added icon category`' | translate\n              }}</span>\n            }\n          </div>\n\n          @for (icon of iconDefinition.icons; track icon[0]) {\n            @let isCustom = isCustomIcon(icon[0]);\n            @let isOverridden = isIconOverridden(icon[0]);\n            @let deleteHint = 'Select a different icon before deleting this one.' | translate;\n            <div class=\"d-contents\">\n              <div\n                class=\"dtm-icon-grid__item\"\n                [class.dtm-icon-grid__item--selected]=\"selectedIcon && icon[0] === selectedIcon\"\n                [class.dtm-icon-grid__item--overridden]=\"isOverridden\"\n              >\n                <button\n                  class=\"dtm-icon-grid__btn\"\n                  [title]=\"icon[0] | iconName\"\n                  [attr.aria-label]=\"\n                    isOverridden\n                      ? (overriddenIconLabel | translate: { iconName: icon[0] | iconName })\n                      : (icon[0] | iconName)\n                  \"\n                  [attr.aria-current]=\"selectedIcon && icon[0] === selectedIcon ? 'true' : null\"\n                  (click)=\"onIconClicked(icon)\"\n                >\n                  <i\n                    class=\"icon-40 c8y-icon-duocolor\"\n                    [c8yIcon]=\"icon[0]\"\n                    aria-hidden=\"true\"\n                  ></i>\n                  @if (showIconClass) {\n                    <small\n                      class=\"d-block text-center text-break-word\"\n                      aria-hidden=\"true\"\n                    >\n                      {{ icon[0] | iconName }}\n                    </small>\n                  }\n                </button>\n\n                @if (isOverridden) {\n                  <span\n                    class=\"dtm-icon-grid__override-marker\"\n                    [tooltip]=\"'Overridden icon' | translate\"\n                    placement=\"top\"\n                    container=\"body\"\n                    aria-hidden=\"true\"\n                    [delay]=\"500\"\n                  >\n                    <i c8yIcon=\"replace\"></i>\n                  </span>\n                }\n\n                @if (isAdmin()) {\n                  <div\n                    class=\"dtm-icon-grid__actions\"\n                    [attr.aria-label]=\"\n                      iconActionsLabel | translate: { iconName: icon[0] | iconName }\n                    \"\n                    role=\"group\"\n                  >\n                    @if (isCustom) {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"\n                          editIconLabel | translate: { iconName: icon[0] | iconName }\n                        \"\n                        [tooltip]=\"editIconLabel | translate: { iconName: icon[0] | iconName }\"\n                        placement=\"top\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"$event.stopPropagation(); onEditIconClicked(icon[0])\"\n                      >\n                        <i\n                          c8yIcon=\"pencil\"\n                          aria-hidden=\"true\"\n                        ></i>\n                      </button>\n                      <span\n                        [tooltip]=\"icon[0] === selectedIcon ? deleteHint : null\"\n                        placement=\"top\"\n                        container=\"body\"\n                        [delay]=\"500\"\n                      >\n                        <button\n                          class=\"btn btn-dot btn-dot--danger m-0\"\n                          [class.disabled]=\"icon[0] === selectedIcon\"\n                          [attr.aria-label]=\"\n                            deleteIconLabel | translate: { iconName: icon[0] | iconName }\n                          \"\n                          [tooltip]=\"deleteIconLabel | translate: { iconName: icon[0] | iconName }\"\n                          placement=\"top\"\n                          container=\"body\"\n                          [attr.aria-disabled]=\"icon[0] === selectedIcon ? 'true' : null\"\n                          [attr.aria-describedby]=\"\n                            icon[0] === selectedIcon ? 'delete-hint-' + icon[0] : null\n                          \"\n                          type=\"button\"\n                          [delay]=\"500\"\n                          (click)=\"\n                            $event.stopPropagation();\n                            icon[0] === selectedIcon || onDeleteIconClicked(icon[0])\n                          \"\n                        >\n                          <i\n                            c8yIcon=\"minus-circle\"\n                            aria-hidden=\"true\"\n                          ></i>\n                        </button>\n                        @if (icon[0] === selectedIcon) {\n                          <span\n                            class=\"sr-only\"\n                            [id]=\"'delete-hint-' + icon[0]\"\n                            >{{ deleteHint }}</span\n                          >\n                        }\n                      </span>\n                    } @else {\n                      @let overrideKey = isOverridden ? replaceOverrideLabel : overrideIconLabel;\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"\n                          overrideKey | translate: { iconName: icon[0] | iconName }\n                        \"\n                        [tooltip]=\"overrideKey | translate: { iconName: icon[0] | iconName }\"\n                        placement=\"top\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"$event.stopPropagation(); onOverrideIconClicked(icon)\"\n                      >\n                        <i\n                          c8yIcon=\"replace\"\n                          aria-hidden=\"true\"\n                        ></i>\n                      </button>\n                      @if (isOverridden) {\n                        <button\n                          class=\"btn btn-dot btn-dot--danger\"\n                          [attr.aria-label]=\"\n                            resetOverrideLabel | translate: { iconName: icon[0] | iconName }\n                          \"\n                          [tooltip]=\"\n                            resetOverrideLabel | translate: { iconName: icon[0] | iconName }\n                          \"\n                          placement=\"top\"\n                          container=\"body\"\n                          type=\"button\"\n                          [delay]=\"500\"\n                          (click)=\"$event.stopPropagation(); onResetOverrideClicked(icon[0])\"\n                        >\n                          <i\n                            c8yIcon=\"undo\"\n                            aria-hidden=\"true\"\n                          ></i>\n                        </button>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      } @empty {\n        <c8y-ui-empty-state\n          class=\"grid__col--fullspan\"\n          icon=\"search\"\n          [title]=\"'No icons found' | translate\"\n          [subtitle]=\"\n            'Try adjusting your search or filter to find what you\\'re looking for.' | translate\n          \"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      }\n    </section>\n  }\n  <!-- end @else iconsLoading -->\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { iconCategoriesToExclude: [{
                 type: Input
             }], showIconClass: [{
@@ -1596,10 +1602,10 @@ class IconSelectorModalComponent {
         this.selectionExplicitlySet = true;
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: IconSelectorModalComponent, isStandalone: true, selector: "c8y-icon-selector-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"title | translate\"\n  (onDismiss)=\"close()\"\n  (onClose)=\"saveChanges()\"\n  headerClasses=\"text-center\"\n  [disabled]=\"!selectionExplicitlySet\"\n  [labels]=\"{ cancel: 'Cancel', ok: saveButtonLabel | translate }\"\n>\n  <c8y-icon-selector\n    [selectedIcon]=\"currentSelection\"\n    [iconCategoriesToExclude]=\"iconCategoriesToExclude\"\n    [showIconClass]=\"showIconClass\"\n    (onSelect)=\"selectionChange($event)\"\n  ></c8y-icon-selector>\n</c8y-modal>\n", dependencies: [{ kind: "component", type: IconSelectorComponent, selector: "c8y-icon-selector", inputs: ["iconCategoriesToExclude", "showIconClass", "selectedIcon"], outputs: ["onSelect"] }, { kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconSelectorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: IconSelectorModalComponent, isStandalone: true, selector: "c8y-icon-selector-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"title | translate\"\n  (onDismiss)=\"close()\"\n  (onClose)=\"saveChanges()\"\n  headerClasses=\"text-center\"\n  [disabled]=\"!selectionExplicitlySet\"\n  [labels]=\"{ cancel: 'Cancel', ok: saveButtonLabel | translate }\"\n>\n  <c8y-icon-selector\n    [selectedIcon]=\"currentSelection\"\n    [iconCategoriesToExclude]=\"iconCategoriesToExclude\"\n    [showIconClass]=\"showIconClass\"\n    (onSelect)=\"selectionChange($event)\"\n  ></c8y-icon-selector>\n</c8y-modal>\n", dependencies: [{ kind: "component", type: IconSelectorComponent, selector: "c8y-icon-selector", inputs: ["iconCategoriesToExclude", "showIconClass", "selectedIcon"], outputs: ["onSelect"] }, { kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconSelectorModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-icon-selector-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconSelectorComponent, C8yTranslatePipe, ModalComponent], template: "<c8y-modal\n  [title]=\"title | translate\"\n  (onDismiss)=\"close()\"\n  (onClose)=\"saveChanges()\"\n  headerClasses=\"text-center\"\n  [disabled]=\"!selectionExplicitlySet\"\n  [labels]=\"{ cancel: 'Cancel', ok: saveButtonLabel | translate }\"\n>\n  <c8y-icon-selector\n    [selectedIcon]=\"currentSelection\"\n    [iconCategoriesToExclude]=\"iconCategoriesToExclude\"\n    [showIconClass]=\"showIconClass\"\n    (onSelect)=\"selectionChange($event)\"\n  ></c8y-icon-selector>\n</c8y-modal>\n" }]
         }] });
@@ -1622,10 +1628,10 @@ class IconSelectorService {
         const content = modal.content;
         return content.result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorService, deps: [{ token: i1$1.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconSelectorService, deps: [{ token: i1$1.BsModalService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconSelectorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconSelectorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$1.BsModalService }] });
@@ -1713,8 +1719,8 @@ class IconSelectorWrapperComponent {
             // nothing to do
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: IconSelectorWrapperComponent, isStandalone: true, selector: "c8y-icon-selector-wrapper", inputs: { canRemoveIcon: "canRemoveIcon", selectedIcon: "selectedIcon", iconSize: "iconSize" }, outputs: { onSelect: "onSelect" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconSelectorWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: IconSelectorWrapperComponent, isStandalone: true, selector: "c8y-icon-selector-wrapper", inputs: { canRemoveIcon: "canRemoveIcon", selectedIcon: "selectedIcon", iconSize: "iconSize" }, outputs: { onSelect: "onSelect" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => IconSelectorWrapperComponent),
@@ -1722,7 +1728,7 @@ class IconSelectorWrapperComponent {
             }
         ], ngImport: i0, template: "<div class=\"d-flex a-i-center j-c-center p-relative\">\n  @if (selectedIcon) {\n    <div class=\"icon-{{ iconSize }} text-center fit-w fit-h\">\n      <i\n        class=\"c8y-icon-duocolor\"\n        [c8yIcon]=\"selectedIcon\"\n        aria-hidden=\"true\"\n      ></i>\n    </div>\n  }\n\n  @if (!selectedIcon) {\n    <div\n      class=\"icon-{{ iconSize }} text-muted text-center a-s-stretch fit-w\"\n      style=\"border: 2px dashed var(--c8y-root-component-border-color)\"\n    >\n      <span class=\"d-flex a-i-center j-c-center text-12 fit-h\">\n        <em>{{ 'Auto`icon-selector: automatic / default icon`' | translate }}</em>\n      </span>\n    </div>\n  }\n  <div class=\"showOnHover d-flex j-c-center a-i-center p-absolute fit-h fit-w\">\n    @if (!selectedIcon) {\n      <button\n        class=\"btn btn-clean btn-icon btn-sm m-0\"\n        title=\"{{ 'Select icon' | translate }}\"\n        [attr.aria-label]=\"'Select icon' | translate\"\n        type=\"button\"\n        (click)=\"openIconSelector()\"\n      >\n        {{ 'Select' | translate }}\n      </button>\n    }\n    @if (selectedIcon) {\n      <button\n        class=\"btn-dot btn-icon m-0 fit-h\"\n        [attr.aria-label]=\"'Change icon' | translate\"\n        tooltip=\"{{ 'Change icon' | translate }}\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"openIconSelector()\"\n      >\n        <i\n          [c8yIcon]=\"'replace'\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n    @if (selectedIcon && canRemoveIcon) {\n      <button\n        class=\"btn-dot btn-dot--danger btn-icon fit-h m-0\"\n        [attr.aria-label]=\"'Remove icon and use default icon' | translate\"\n        tooltip=\"{{ 'Remove icon and use default icon' | translate }}\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"removeIcon()\"\n      >\n        <i\n          [c8yIcon]=\"'trash'\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconSelectorWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'c8y-icon-selector-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
@@ -1742,8 +1748,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             }] } });
 
 class IconSelectorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorModule, imports: [FormsModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.19", ngImport: i0, type: IconSelectorModule, imports: [FormsModule,
             DropAreaModule,
             TooltipModule,
             IconSelectorComponent,
@@ -1753,13 +1759,13 @@ class IconSelectorModule {
             IconSelectorModalComponent,
             IconNamePipe,
             IconSelectorWrapperComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorModule, imports: [FormsModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconSelectorModule, imports: [FormsModule,
             DropAreaModule,
             TooltipModule,
             IconSelectorComponent,
             IconSelectorModalComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: IconSelectorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [