@c8y/ngx-components 1024.20.1 → 1024.21.3

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

@@ -930,7 +930,7 @@ class AddCustomIconModalComponent {
         };
     }
     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  [flushBody]=\"true\"\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", "flushBody", "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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+    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  [flushBody]=\"true\"\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                id=\"iconCategory\"\n                [ariaLabel]=\"'Icon collection' | translate\"\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", "flushBody", "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", "ariaLabel", "ariaLabelledby", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable", "selectOnClick"], 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" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AddCustomIconModalComponent, decorators: [{
             type: Component,
@@ -949,7 +949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         ListItemComponent,
                         LoadingComponent,
                         TooltipModule
-                    ], changeDetection: ChangeDetectionStrategy.Eager, 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  [flushBody]=\"true\"\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" }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, 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  [flushBody]=\"true\"\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                id=\"iconCategory\"\n                [ariaLabel]=\"'Icon collection' | translate\"\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" }]
         }], ctorParameters: () => [], propDecorators: { categoryTypeahead: [{ type: i0.ViewChild, args: ['categoryTypeahead', { isSignal: true }] }], modalBody: [{ type: i0.ViewChild, args: ['modalBody', { isSignal: true }] }] } });
 
 class AddCustomIconModalService {
@@ -1563,7 +1563,7 @@ class IconSelectorComponent {
         URL.revokeObjectURL(url);
     }
     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", disableCustomIcons: "disableCustomIcons" }, 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 (canManageCustomIcons) {\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    <p\n      class=\"sr-only\"\n      role=\"status\"\n    >\n      @if (pickedIconName()) {\n        {{ 'Selected {{icon}}' | translate: { icon: pickedIconName() } }}\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 (canManageCustomIcons) {\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 }); }
+    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", disableCustomIcons: "disableCustomIcons" }, 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            [ariaLabelledby]=\"'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 (canManageCustomIcons) {\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    <p\n      class=\"sr-only\"\n      role=\"status\"\n    >\n      @if (pickedIconName()) {\n        {{ 'Selected {{icon}}' | translate: { icon: pickedIconName() } }}\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 (canManageCustomIcons) {\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", "ariaLabel", "ariaLabelledby", "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.19", ngImport: i0, type: IconSelectorComponent, decorators: [{
             type: Component,
@@ -1578,7 +1578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", 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 (canManageCustomIcons) {\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    <p\n      class=\"sr-only\"\n      role=\"status\"\n    >\n      @if (pickedIconName()) {\n        {{ 'Selected {{icon}}' | translate: { icon: pickedIconName() } }}\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 (canManageCustomIcons) {\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" }]
+                    ], 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            [ariaLabelledby]=\"'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 (canManageCustomIcons) {\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    <p\n      class=\"sr-only\"\n      role=\"status\"\n    >\n      @if (pickedIconName()) {\n        {{ 'Selected {{icon}}' | translate: { icon: pickedIconName() } }}\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 (canManageCustomIcons) {\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: [{