@c8y/ngx-components 1024.20.8 → 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                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"], 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,