@c8y/ngx-components 1024.5.1 → 1024.9.0

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

@@ -1,17 +1,36 @@
 import * as i0 from '@angular/core';
-import { Pipe, EventEmitter, Input, Output, Component, Injectable, forwardRef, NgModule } from '@angular/core';
+import { Pipe, inject, Injectable, signal, computed, viewChild, effect, Component, ChangeDetectionStrategy, EventEmitter, ElementRef, Input, Output, ChangeDetectorRef, forwardRef, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i2 from '@c8y/ngx-components';
-import { IconDirective, C8yTranslateDirective, EmptyStateComponent, C8yTranslatePipe, CommonModule, DropAreaModule } from '@c8y/ngx-components';
-import { TooltipDirective, TooltipModule } from 'ngx-bootstrap/tooltip';
+import { FormBuilder, Validators, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { AppStateService, ZipService, ModalComponent, DropAreaComponent, IconDirective, FormGroupComponent, MessagesComponent, MessageDirective, C8yTranslateDirective, TypeaheadComponent, ListItemComponent, LoadingComponent, C8yTranslatePipe, AlertService, Permissions, ModalService, EmptyStateComponent, SelectComponent, GainsightService, DropAreaModule } from '@c8y/ngx-components';
+import * as i2 from 'ngx-bootstrap/tooltip';
+import { TooltipModule, TooltipDirective } from 'ngx-bootstrap/tooltip';
 import { gettext } from '@c8y/ngx-components/gettext';
 import * as i1$1 from 'ngx-bootstrap/modal';
-import { BehaviorSubject, defer, from, combineLatest } from 'rxjs';
-import { map, shareReplay, debounceTime, startWith } from 'rxjs/operators';
-import { clone } from 'lodash-es';
-import { NgClass, AsyncPipe, NgIf } from '@angular/common';
-import { PRODUCT_EXPERIENCE_ICON_SELECTOR } from '@c8y/ngx-components/icon-selector/model';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { defer, share, ReplaySubject, firstValueFrom, BehaviorSubject, from, combineLatest, merge, of } from 'rxjs';
+import { shareReplay, map, startWith, tap, debounceTime, switchMap } from 'rxjs/operators';
+import { TranslateService } from '@ngx-translate/core';
+import { AsyncPipe } from '@angular/common';
+import { ApplicationAvailability, ApplicationType, ApplicationService, FetchClient } from '@c8y/client';
+import { ICON_OPTIONS_CONTEXT_PATH, getIconSet, getIconFileName, ICON_OPTIONS_FILE, getIconManifestPath, convertRelativePathToAbsolutePath, applyCustomIconStyles } from '@c8y/bootstrap';
+import * as DOMPurifyNS from 'dompurify';
+import { DomSanitizer } from '@angular/platform-browser';
+import { PRODUCT_EXPERIENCE_ICON_SELECTOR as PRODUCT_EXPERIENCE_ICON_SELECTOR$1 } from '@c8y/ngx-components/icon-selector/model';
+
+const PRODUCT_EXPERIENCE_ICON_SELECTOR = {
+    EVENTS: {
+        ICON_SELECTOR: 'iconSelector'
+    },
+    COMPONENTS: {
+        ICON_SELECTOR_WRAPPER_COMPONENT: 'icon-selector-wrapper-component'
+    },
+    ACTIONS: {
+        OPEN_ICON_SELECTOR: 'openIconSelector',
+        ICON_SELECTED: 'iconSelected'
+    }
+};
 
 class IconNamePipe {
     transform(icon) {
@@ -28,42 +47,1378 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ name: 'iconName' }]
         }] });
 
+const MANIFEST = {
+    name: ICON_OPTIONS_CONTEXT_PATH,
+    contextPath: ICON_OPTIONS_CONTEXT_PATH,
+    key: `${ICON_OPTIONS_CONTEXT_PATH}-key`,
+    description: 'Hosted app storing custom icon definitions.',
+    icon: {
+        class: 'c8y-icon-circle-star'
+    },
+    noAppSwitcher: true,
+    type: ApplicationType.HOSTED,
+    availability: ApplicationAvailability.SHARED
+};
+class CustomIconStorageService {
+    constructor() {
+        this.applicationService = inject(ApplicationService);
+        this.appState = inject(AppStateService);
+        this.fetch = inject(FetchClient);
+        this.zip = inject(ZipService);
+    }
+    /** Fetches the current icon set from the tenant's hosted app. Returns empty set if none exists.
+     * An optional fetchFn can be supplied to use global fetch (e.g. from bootstrap before Angular starts)
+     * instead of the injected FetchClient. */
+    async getIconSet() {
+        return getIconSet(this.fetch.fetch.bind(this.fetch));
+    }
+    /** Persists the full icon set to the tenant-owned public-icon-options hosted app.
+     * icons.json contains metadata-only icons array + an iconCss map (name → CSS rule).
+     * CSS is built once per icon at save time and stored per-entry, so incremental saves
+     * only update the changed entry without re-encoding every icon's SVG.
+     *
+     * `filesToRemove`: SVG file names of deleted icons. The platform has no delete-file
+     * API (`updateFiles` only adds or replaces), so when files must go the active binary
+     * is rebuilt without them. The manifest is always generated client-side and never
+     * read back from the archive — the file-update endpoint repackages asynchronously,
+     * so an archive read right after a write can return stale content.
+     *
+     * @returns the `lastModified` timestamp written to the manifest. */
+    async saveIconSet(icons, filesToRemove = []) {
+        const app = await this.ensureApp();
+        const metadata = icons.map(({ name, family, category, isOverride, overriddenIconName, hasSecondary }) => ({
+            name,
+            family,
+            category,
+            isOverride,
+            hasSecondary,
+            ...(overriddenIconName ? { overriddenIconName } : {})
+        }));
+        const filesOfIcons = icons
+            .map(icon => {
+            const filesOfIcon = [];
+            if (icon.svgContentPrimary) {
+                const primaryFileName = getIconFileName(icon);
+                const primaryBlob = new File([icon.svgContentPrimary], primaryFileName, {
+                    type: 'image/svg+xml'
+                });
+                filesOfIcon.push({ path: primaryFileName, contents: primaryBlob });
+            }
+            if (icon.hasSecondary && icon.svgContentSecondary) {
+                const secondaryFileName = getIconFileName(icon, true);
+                const secondaryBlob = new File([icon.svgContentSecondary], secondaryFileName, {
+                    type: 'image/svg+xml'
+                });
+                filesOfIcon.push({ path: secondaryFileName, contents: secondaryBlob });
+            }
+            return filesOfIcon;
+        })
+            .flat();
+        const lastModified = new Date().toISOString();
+        const files = [
+            ...filesOfIcons,
+            {
+                path: ICON_OPTIONS_FILE,
+                contents: new File([JSON.stringify({ icons: metadata, lastModified })], ICON_OPTIONS_FILE, {
+                    type: 'application/json'
+                })
+            }
+        ];
+        if (filesToRemove.length && app.activeVersionId) {
+            // No propagation wait here: nothing reads the manifest after a removal —
+            // CSS and grid state come from the in-memory set, and the next rebuild
+            // fetches kept files individually, which is safe on any served version.
+            await this.rebuildBinary(app, icons, files);
+        }
+        else {
+            await this.applicationService.binary(app).updateFiles(files);
+            // Added/changed SVGs must be fetchable once the grid renders them.
+            await this.waitForManifestPropagation(lastModified);
+        }
+        return lastModified;
+    }
+    async waitForManifestPropagation(lastModified) {
+        const pollAttempts = 10;
+        const pollDelayStep = 2_500;
+        const pollDelayMax = 10_000;
+        for (let i = 0; i < pollAttempts; i++) {
+            if (i > 0) {
+                // Incremental backoff before polling to give the server time to process the updated files
+                await new Promise(resolve => setTimeout(resolve, Math.min(i * pollDelayStep, pollDelayMax)));
+            }
+            const manifestPath = getIconManifestPath();
+            const response = await this.fetch.fetch(manifestPath, { cache: 'no-cache' });
+            if (response.status !== 200) {
+                continue;
+            }
+            const json = await response.json();
+            if (json.lastModified === lastModified) {
+                return;
+            }
+        }
+        // Deliberately non-throwing: the save itself succeeded, only the propagation check timed out.
+        console.warn('Custom icons saved, but the updated manifest was not observed within the polling window.');
+    }
+    /** Rebuilds the app binary from scratch: the static cumulocity.json, the given
+     * upserts (fresh manifest + SVGs with in-memory content) and the remaining icons'
+     * SVGs fetched individually from the hosted app. The old archive is deliberately
+     * never downloaded — the file-update endpoint repackages asynchronously, so a
+     * read right after a write can return stale content. Per-file fetches are safe:
+     * kept files are unchanged, so any served version returns identical content. */
+    async rebuildBinary(app, icons, upserts) {
+        const files = [
+            {
+                fileName: 'cumulocity.json',
+                blob: new Blob([JSON.stringify(MANIFEST)], { type: 'application/json' })
+            },
+            ...upserts.map(u => ({ fileName: u.path, blob: u.contents }))
+        ];
+        const included = new Set(files.map(f => f.fileName));
+        const toFetch = icons
+            .flatMap(icon => [
+            getIconFileName(icon),
+            ...(icon.hasSecondary ? [getIconFileName(icon, true)] : [])
+        ])
+            .filter(name => !included.has(name));
+        const fetched = await Promise.all(toFetch.map(async (name) => {
+            const response = await this.fetch.fetch(convertRelativePathToAbsolutePath(name), {
+                cache: 'no-cache'
+            });
+            if (response.status !== 200) {
+                console.warn(`[c8y] Could not preserve ${name} while rebuilding the icon app (HTTP ${response.status}).`);
+                return null;
+            }
+            return { fileName: name, blob: await response.blob() };
+        }));
+        files.push(...fetched.filter(f => f !== null));
+        const zipBlob = await this.zip.createZip(files);
+        const file = new File([zipBlob], `${ICON_OPTIONS_CONTEXT_PATH}.zip`);
+        const binaryService = this.applicationService.binary(app);
+        const { data: binary } = await binaryService.upload(file);
+        await this.applicationService.update({ id: app.id, activeVersionId: `${binary.id}` });
+        await binaryService.delete(app.activeVersionId);
+    }
+    async ensureApp() {
+        const existing = await this.findOwnedApp();
+        if (existing) {
+            return existing;
+        }
+        const { data: created } = await this.applicationService.create(MANIFEST);
+        const zipBlob = await this.zip.createZip([
+            {
+                fileName: 'cumulocity.json',
+                blob: new Blob([JSON.stringify(MANIFEST)], { type: 'application/json' })
+            }
+        ]);
+        const file = new File([zipBlob], `${ICON_OPTIONS_CONTEXT_PATH}.zip`);
+        const { data: binary } = await this.applicationService.binary(created).upload(file);
+        const { data: updated } = await this.applicationService.update({
+            id: created.id,
+            activeVersionId: `${binary.id}`
+        });
+        return updated;
+    }
+    async findOwnedApp() {
+        try {
+            const currentTenantName = this.appState.currentTenant.value?.name;
+            const { data: apps } = await this.applicationService.list({
+                name: ICON_OPTIONS_CONTEXT_PATH,
+                pageSize: 1,
+                owner: currentTenantName,
+                type: ApplicationType.HOSTED
+            });
+            return apps[0];
+        }
+        catch (e) {
+            console.error('[c8y] Failed to list applications when looking for icon options app:', e);
+            throw e;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CustomIconStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CustomIconStorageService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CustomIconStorageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+// ESM build exports `default`; CJS/Jest wraps the instance at module.exports directly.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const DOMPurify = (DOMPurifyNS.default ?? DOMPurifyNS);
+const DANGEROUS_ELEMENTS = ['script', 'iframe', 'object', 'embed', 'foreignObject', 'style'];
+/** Matches any event-handler attribute (on* in any case), covering all SVG event attributes. */
+const DANGEROUS_ATTRIBUTE_PREFIX = /^on/i;
+/** Matches a CSS url() reference that does not point to an internal #id fragment. */
+const EXTERNAL_CSS_URL = /url\s*\(\s*['"]?\s*(?!#)/i;
+/** DOMPurify config for SVG-only sanitization. */
+const SVG_PURIFY_CONFIG = {
+    USE_PROFILES: { svg: true, svgFilters: true },
+    FORBID_TAGS: DANGEROUS_ELEMENTS,
+    RETURN_DOM: false,
+    RETURN_DOM_FRAGMENT: false
+};
+// DOMPurify's SVG profile keeps href/xlink:href (e.g. on <image>) and style attributes.
+// Strip external references it would otherwise let through; #id fragments stay valid.
+DOMPurify.addHook('afterSanitizeAttributes', node => {
+    for (const attrName of ['href', 'xlink:href']) {
+        const value = node.getAttribute(attrName);
+        if (value && !value.startsWith('#')) {
+            node.removeAttribute(attrName);
+        }
+    }
+    const style = node.getAttribute('style');
+    if (style && EXTERNAL_CSS_URL.test(style)) {
+        node.removeAttribute('style');
+    }
+});
+class SvgSanitizerService {
+    /** Validates SVG content without modifying it. Returns errors (blocking) and warnings (advisory). */
+    validate(svgContent) {
+        const errors = [];
+        const warnings = [];
+        if (!svgContent?.trim()) {
+            errors.push('SVG content is empty');
+            return { valid: false, errors, warnings };
+        }
+        let doc;
+        try {
+            doc = new DOMParser().parseFromString(svgContent, 'image/svg+xml');
+        }
+        catch {
+            errors.push('Failed to parse SVG as XML');
+            return { valid: false, errors, warnings };
+        }
+        const parserError = doc.querySelector('parsererror');
+        if (parserError) {
+            errors.push(`Malformed SVG: ${parserError.textContent?.substring(0, 200)}`);
+            return { valid: false, errors, warnings };
+        }
+        const svg = doc.documentElement;
+        if (svg.tagName !== 'svg') {
+            errors.push('Root element must be <svg>');
+            return { valid: false, errors, warnings };
+        }
+        if (!svg.getAttribute('viewBox')) {
+            warnings.push('Missing viewBox attribute — icon may not scale correctly');
+        }
+        for (const tag of DANGEROUS_ELEMENTS) {
+            if (svg.querySelector(tag)) {
+                errors.push(`Forbidden element <${tag}> detected`);
+            }
+        }
+        // Include root <svg> itself — querySelectorAll('*') returns descendants only
+        const allElements = [svg, ...Array.from(svg.querySelectorAll('*'))];
+        for (const el of allElements) {
+            for (const attr of Array.from(el.attributes)) {
+                if (DANGEROUS_ATTRIBUTE_PREFIX.test(attr.name)) {
+                    errors.push(`Forbidden event handler "${attr.name}" on <${el.tagName}>`);
+                }
+            }
+            const href = el.getAttribute('xlink:href') || el.getAttribute('href');
+            if (href && !href.startsWith('#')) {
+                errors.push(`External reference detected: "${href}" — only internal #id references are allowed`);
+            }
+            const style = el.getAttribute('style');
+            if (style && EXTERNAL_CSS_URL.test(style)) {
+                errors.push(`External url() reference in style attribute on <${el.tagName}> — only internal #id references are allowed`);
+            }
+        }
+        const fillAttrs = svg.querySelectorAll('[fill]');
+        const hasHardcodedColor = Array.from(fillAttrs).some(el => {
+            const fill = el.getAttribute('fill');
+            return fill && fill !== 'none' && fill !== 'currentColor' && !fill.startsWith('url(');
+        });
+        if (hasHardcodedColor) {
+            warnings.push('Hardcoded fill colors detected — use "currentColor" for theme-adaptive icons');
+        }
+        return { valid: errors.length === 0, errors, warnings };
+    }
+    /** Removes dangerous elements and attributes from SVG using DOMPurify.
+     * Output is safe for use with DomSanitizer.bypassSecurityTrustHtml(). */
+    sanitize(svgContent) {
+        return DOMPurify.sanitize(svgContent, SVG_PURIFY_CONFIG);
+    }
+    /** Replaces hardcoded fill/stroke colors with `currentColor` so icons adapt to the theme. */
+    normalizeColors(svgContent) {
+        const doc = new DOMParser().parseFromString(svgContent, 'image/svg+xml');
+        if (doc.querySelector('parsererror')) {
+            // Return as-is if malformed — sanitize() already validated structure
+            return svgContent;
+        }
+        const svg = doc.documentElement;
+        this.normalizeColorsOnNode(svg);
+        return new XMLSerializer().serializeToString(svg);
+    }
+    /** Percent-encodes a sanitized SVG string for use in a CSS `url()` data URI. */
+    toDataUri(sanitizedSvg) {
+        return `data:image/svg+xml,${encodeURIComponent(sanitizedSvg.trim().replace(/\s+/g, ' '))}`;
+    }
+    normalizeColorsOnNode(node) {
+        for (const attr of ['fill', 'stroke']) {
+            const value = node.getAttribute(attr);
+            if (value && value !== 'none' && value !== 'currentColor' && !value.startsWith('url(')) {
+                node.setAttribute(attr, 'currentColor');
+            }
+        }
+        for (const child of Array.from(node.children)) {
+            this.normalizeColorsOnNode(child);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SvgSanitizerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SvgSanitizerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SvgSanitizerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const CUSTOM_CATEGORY_LABEL = gettext('Custom`icons-category`');
+class CustomIconRegistryService {
+    constructor() {
+        /** Reactive signal holding the current set of custom icons. Updates on load, save, delete, or import. */
+        this.icons = signal([], ...(ngDevMode ? [{ debugName: "icons" }] : /* istanbul ignore next */ []));
+        /** True after a successful load — distinguishes "empty icons" from "never loaded or failed". */
+        this.loaded = signal(false, ...(ngDevMode ? [{ debugName: "loaded" }] : /* istanbul ignore next */ []));
+        /** Shared load stream: concurrent subscribers join the in-flight request, and the reset
+         * flags start a fresh request once the previous one completed or errored. */
+        this.load$ = defer(() => this._doLoad()).pipe(share({
+            connector: () => new ReplaySubject(1),
+            resetOnComplete: true,
+            resetOnError: true,
+            resetOnRefCountZero: true
+        }));
+        this.storage = inject(CustomIconStorageService);
+        this.zip = inject(ZipService);
+        this.svgSanitizer = inject(SvgSanitizerService);
+        this.fetch = inject(FetchClient);
+    }
+    /** Loads custom icons from storage and injects their CSS into the document.
+     * Concurrent calls share the same in-flight request — no duplicate fetches. */
+    load() {
+        return firstValueFrom(this.load$);
+    }
+    /** Saves or updates a custom icon (upsert by name + family) and refreshes CSS immediately.
+     * Matching on name alone would let e.g. a 'c8y' family entry replace a 'dlt' entry of the
+     * same name, silently dropping the other family's CSS rule. */
+    async saveIcon(def) {
+        const current = this.icons();
+        const existing = current.findIndex(i => i.name === def.name && i.family === def.family);
+        const updated = existing >= 0 ? current.map((i, idx) => (idx === existing ? def : i)) : [...current, def];
+        this.lastModified = await this.storage.saveIconSet(updated);
+        this.applyStyles(updated);
+        this.icons.set(updated);
+    }
+    /** Removes a custom icon by name + family, deletes its SVG files from the
+     * hosted app and refreshes CSS immediately. */
+    async deleteIcon(name, family) {
+        const current = this.icons();
+        const removed = current.find(i => i.name === name && i.family === family);
+        const updated = current.filter(i => !(i.name === name && i.family === family));
+        const filesToRemove = removed
+            ? [
+                getIconFileName(removed),
+                ...(removed.hasSecondary ? [getIconFileName(removed, true)] : [])
+            ]
+            : [];
+        // The stored lastModified is deliberately NOT advanced: kept files are unchanged,
+        // and keeping their cache-busted URLs identical lets the browser cache serve them
+        // instead of refetching while the rebuilt app version is still propagating.
+        await this.storage.saveIconSet(updated, filesToRemove);
+        this.applyStyles(updated);
+        this.icons.set(updated);
+    }
+    /** Convert custom icons into DefaultIconDefinition[] grouped by category for the selector.
+     * Override icons are excluded — they only replace built-in CSS rendering, not add new grid entries. */
+    toIconDefinitions() {
+        const byCategory = new Map();
+        for (const icon of this.icons()) {
+            if (icon.isOverride)
+                continue;
+            const category = icon.category || CUSTOM_CATEGORY_LABEL;
+            if (!byCategory.has(category)) {
+                byCategory.set(category, []);
+            }
+            byCategory.get(category).push([icon.name]);
+        }
+        return Array.from(byCategory.entries()).map(([label, icons]) => ({ label, icons }));
+    }
+    /** Exports all custom icons as a ZIP containing icons.json and individual SVG files.
+     * Note: SVG content is only available in memory immediately after adding/editing icons.
+     * After page reload, icons loaded from storage have no svgContent in memory — those
+     * icons will be omitted from the SVG files in the export. */
+    async exportAsZip() {
+        const icons = this.icons();
+        const manifest = icons.map(({ name, category, family, isOverride, overriddenIconName, hasSecondary }) => ({
+            name,
+            category,
+            family,
+            isOverride,
+            overriddenIconName,
+            hasSecondary
+        }));
+        const iconPromises = new Array();
+        for (const icon of manifest) {
+            const svgsOfIconPromises = new Array();
+            const primary = this.downloadSVG(icon);
+            svgsOfIconPromises.push(primary);
+            if (icon.hasSecondary) {
+                const secondary = this.downloadSVG(icon, true);
+                svgsOfIconPromises.push(secondary);
+            }
+            iconPromises.push(Promise.all(svgsOfIconPromises)
+                .then(filesOfIcon => {
+                return { icon, filesOfIcon };
+            })
+                .catch(() => {
+                return { icon, filesOfIcon: [] }; // Skip icons whose SVGs can't be loaded
+            }));
+        }
+        const iconFiles = await Promise.all(iconPromises);
+        const iconsWithFiles = iconFiles.filter(i => i.filesOfIcon.length > 0);
+        const filteredManifest = iconsWithFiles.map(i => i.icon);
+        const files = [
+            { fileName: 'icons.json', blob: new Blob([JSON.stringify(filteredManifest, null, 2)]) },
+            ...iconsWithFiles.flatMap(i => i.filesOfIcon)
+        ];
+        return this.zip.createZip(files);
+    }
+    /** Returns a copy of the icon with its SVG content loaded from the hosted app when
+     * not in memory — icons loaded from the manifest after a reload are metadata-only.
+     * A missing file is non-fatal: the field stays empty and the edit modal falls back
+     * to requiring a re-upload. */
+    async withSvgContent(icon) {
+        const result = { ...icon };
+        try {
+            if (!result.svgContentPrimary) {
+                const { blob } = await this.downloadSVG(icon);
+                result.svgContentPrimary = await blob.text();
+            }
+            if (icon.hasSecondary && !result.svgContentSecondary) {
+                const { blob } = await this.downloadSVG(icon, true);
+                result.svgContentSecondary = await blob.text();
+            }
+        }
+        catch (e) {
+            console.error('[c8y] Failed to load SVG content of custom icon:', e);
+        }
+        return result;
+    }
+    async downloadSVG(icon, isSecondary = false) {
+        const fileName = getIconFileName(icon, isSecondary);
+        const absolutePath = convertRelativePathToAbsolutePath(fileName);
+        const response = await this.fetch.fetch(absolutePath, { cache: 'no-cache' });
+        if (response.status !== 200) {
+            throw new Error(`Failed to fetch SVG: ${response.status}`);
+        }
+        const blob = await response.blob();
+        return { fileName, blob };
+    }
+    /** Imports icons from a ZIP export. Icons whose names already exist are skipped. */
+    async importFromZip(zipFile) {
+        const entries = await firstValueFrom(this.zip.getEntries(zipFile));
+        const manifestEntry = entries.find(e => e.filename === ICON_OPTIONS_FILE);
+        if (!manifestEntry) {
+            throw new Error(`Invalid export ZIP: missing ${ICON_OPTIONS_FILE}`);
+        }
+        const manifestBlob = await firstValueFrom(this.zip.getData(manifestEntry));
+        const manifest = JSON.parse(await manifestBlob.text());
+        const existing = new Set(this.icons().map(i => i.name));
+        const skipped = [];
+        const toAdd = [];
+        const VALID_NAME = /^[a-z0-9][a-z0-9-]*$/;
+        const VALID_FAMILIES = new Set(['dlt', 'c8y']);
+        for (const meta of manifest) {
+            if (!meta.name || !VALID_NAME.test(meta.name) || !VALID_FAMILIES.has(meta.family)) {
+                skipped.push(meta.name ?? '(invalid)');
+                continue;
+            }
+            if (existing.has(meta.name)) {
+                skipped.push(meta.name);
+                continue;
+            }
+            const primaryFileName = getIconFileName(meta);
+            const svgEntry = entries.find(e => e.filename === primaryFileName);
+            if (!svgEntry) {
+                skipped.push(meta.name);
+                continue;
+            }
+            const svgBlob = await firstValueFrom(this.zip.getData(svgEntry));
+            const svgContent = this.svgSanitizer.sanitize(await svgBlob.text());
+            let svgContentSecondary;
+            if (meta.hasSecondary) {
+                const secondaryFileName = getIconFileName(meta, true);
+                const secondaryEntry = entries.find(e => e.filename === secondaryFileName);
+                if (secondaryEntry) {
+                    const secBlob = await firstValueFrom(this.zip.getData(secondaryEntry));
+                    svgContentSecondary = this.svgSanitizer.sanitize(await secBlob.text());
+                }
+            }
+            toAdd.push({
+                ...meta,
+                svgContentPrimary: svgContent,
+                svgContentSecondary,
+                hasSecondary: !!svgContentSecondary
+            });
+        }
+        if (toAdd.length) {
+            const updated = [...this.icons(), ...toAdd];
+            this.lastModified = await this.storage.saveIconSet(updated);
+            this.applyStyles(updated);
+            this.icons.set(updated);
+        }
+        return { imported: toAdd.length, skipped };
+    }
+    /** Injects CSS built from the in-memory icon set. The manifest is deliberately NOT
+     * re-fetched — right after a save the hosted app can still serve the previous
+     * version, which would re-inject rules for icons that were just removed. The stored
+     * lastModified keeps unchanged icons' cache-busted URLs stable, so the browser cache
+     * serves them instead of refetching while a new app version is still propagating. */
+    applyStyles(icons) {
+        applyCustomIconStyles({ icons, lastModified: this.lastModified });
+    }
+    async _doLoad() {
+        const set = await this.storage.getIconSet();
+        this.lastModified = set.lastModified;
+        this.icons.set(set.icons);
+        this.loaded.set(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CustomIconRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CustomIconRegistryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CustomIconRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+// OnPush is intentionally omitted: c8y-form-group's debounced updateErrors fires via setTimeout,
+// which does not mark an OnPush component dirty. Without Default CD, validation messages appear
+// one cycle late (red border shows but text stays hidden until next interaction).
+class AddCustomIconModalComponent {
+    /** Modal mode: 'add' (new icon), 'edit' (existing icon), 'override' (replace built-in).
+     * Plain property facade over a signal — BsModalService's `initialState` assigns it as a
+     * property, while `isEditMode`/`isOverrideMode` derive from the backing signal. */
+    get mode() {
+        return this._mode();
+    }
+    set mode(value) {
+        this._mode.set(value);
+    }
+    constructor() {
+        this._mode = signal('add', ...(ngDevMode ? [{ debugName: "_mode" }] : /* istanbul ignore next */ []));
+        /** Icon being edited/overridden. Null for 'add' mode. */
+        this.editingIcon = null;
+        /** Available category labels for the dropdown. */
+        this.allCategories = [];
+        /** Built-in + existing custom icon names — used for collision detection. */
+        this.reservedIconNames = new Set();
+        this.previewSizes = [20, 32, 48];
+        this.isReady = signal(false, ...(ngDevMode ? [{ debugName: "isReady" }] : /* istanbul ignore next */ []));
+        this.isEditMode = computed(() => this._mode() === 'edit', ...(ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []));
+        this.isOverrideMode = computed(() => this._mode() === 'override', ...(ngDevMode ? [{ debugName: "isOverrideMode" }] : /* istanbul ignore next */ []));
+        this.selectedFamily = signal('dlt', ...(ngDevMode ? [{ debugName: "selectedFamily" }] : /* istanbul ignore next */ []));
+        this.primarySvg = signal(null, ...(ngDevMode ? [{ debugName: "primarySvg" }] : /* istanbul ignore next */ []));
+        this.primaryValidation = signal(null, ...(ngDevMode ? [{ debugName: "primaryValidation" }] : /* istanbul ignore next */ []));
+        this.lightSvg = signal(null, ...(ngDevMode ? [{ debugName: "lightSvg" }] : /* istanbul ignore next */ []));
+        this.lightValidation = signal(null, ...(ngDevMode ? [{ debugName: "lightValidation" }] : /* istanbul ignore next */ []));
+        this.showCompositePreview = computed(() => this.selectedFamily() === 'c8y' && !!this.primarySvg() && !!this.lightSvg(), ...(ngDevMode ? [{ debugName: "showCompositePreview" }] : /* istanbul ignore next */ []));
+        this.modalTitle = computed(() => this.isOverrideMode()
+            ? gettext('Replace icon')
+            : this.isEditMode()
+                ? gettext('Edit icon')
+                : gettext('Add icon'), ...(ngDevMode ? [{ debugName: "modalTitle" }] : /* istanbul ignore next */ []));
+        this.okLabel = computed(() => this.isOverrideMode()
+            ? gettext('Replace')
+            : this.isEditMode()
+                ? gettext('Save changes')
+                : gettext('Add icon'), ...(ngDevMode ? [{ debugName: "okLabel" }] : /* istanbul ignore next */ []));
+        this.isValid = computed(() => {
+            if (!this.primarySvg())
+                return false;
+            const primary = this.primaryValidation();
+            if (!primary?.valid)
+                return false;
+            if (this.selectedFamily() === 'c8y')
+                return !!this.lightSvg() && !!this.lightValidation()?.valid;
+            return true;
+        }, ...(ngDevMode ? [{ debugName: "isValid" }] : /* istanbul ignore next */ []));
+        /** Set on the first save attempt — validation messages only appear from then on,
+         * so an untouched form doesn't open covered in errors. */
+        this.saveAttempted = signal(false, ...(ngDevMode ? [{ debugName: "saveAttempted" }] : /* istanbul ignore next */ []));
+        this.hasCategoryError = computed(() => this.saveAttempted() && !this.categorySearch(), ...(ngDevMode ? [{ debugName: "hasCategoryError" }] : /* istanbul ignore next */ []));
+        this.categoryErrors = computed(() => this.hasCategoryError() ? { required: true } : {}, ...(ngDevMode ? [{ debugName: "categoryErrors" }] : /* istanbul ignore next */ []));
+        this.primarySvgErrors = computed(() => this.saveAttempted() && !this.primarySvg() ? { required: true } : {}, ...(ngDevMode ? [{ debugName: "primarySvgErrors" }] : /* istanbul ignore next */ []));
+        this.lightSvgErrors = computed(() => this.saveAttempted() && this.selectedFamily() === 'c8y' && !this.lightSvg()
+            ? { required: true }
+            : {}, ...(ngDevMode ? [{ debugName: "lightSvgErrors" }] : /* istanbul ignore next */ []));
+        /** Boolean error state for the SVG upload form groups — drives `c8y-form-group [hasError]`
+         * so the label and messages pick up the validation styling (the drop area is not a form control). */
+        this.hasPrimarySvgError = computed(() => this.saveAttempted() && !this.primarySvg(), ...(ngDevMode ? [{ debugName: "hasPrimarySvgError" }] : /* istanbul ignore next */ []));
+        this.hasLightSvgError = computed(() => this.saveAttempted() && this.selectedFamily() === 'c8y' && !this.lightSvg(), ...(ngDevMode ? [{ debugName: "hasLightSvgError" }] : /* istanbul ignore next */ []));
+        this.categorySearch = signal('', ...(ngDevMode ? [{ debugName: "categorySearch" }] : /* istanbul ignore next */ []));
+        this.baseCategories = computed(() => this.allCategories.length ? this.allCategories : ['Custom'], ...(ngDevMode ? [{ debugName: "baseCategories" }] : /* istanbul ignore next */ []));
+        /** Categories matching the current search text — drives the typeahead dropdown list. */
+        this.filteredCategories = computed(() => this.baseCategories().filter(c => this.isCategoryMatch(c)), ...(ngDevMode ? [{ debugName: "filteredCategories" }] : /* istanbul ignore next */ []));
+        this.hasNoMatch = computed(() => !!this.categorySearch() && this.filteredCategories().length === 0, ...(ngDevMode ? [{ debugName: "hasNoMatch" }] : /* istanbul ignore next */ []));
+        /** True when the typed text is non-empty and doesn't exactly match an existing category. */
+        this.showAddNew = computed(() => {
+            const search = this.categorySearch();
+            if (!search)
+                return false;
+            const searchLower = search.toLowerCase();
+            return !this.baseCategories().some(c => c.replace(/`[^`]*`$/, '').toLowerCase() === searchLower);
+        }, ...(ngDevMode ? [{ debugName: "showAddNew" }] : /* istanbul ignore next */ []));
+        this.categoryTypeahead = viewChild('categoryTypeahead', ...(ngDevMode ? [{ debugName: "categoryTypeahead" }] : /* istanbul ignore next */ []));
+        this.nameMessages = [
+            { name: 'required', text: gettext('Icon name is required.') },
+            { name: 'pattern', text: gettext('Only lowercase letters, numbers and hyphens are allowed.') },
+            {
+                name: 'c8yPrefix',
+                text: gettext('DLT (single color) icons must not start with "c8y-". Use the C8Y (duocolor) type for c8y- prefixed icons.')
+            },
+            {
+                name: 'nameCollision',
+                text: gettext('This name conflicts with a built-in icon. Use the Override option instead, or choose a different name.')
+            }
+        ];
+        this.primaryPreviewHtml = this.buildPreviewComputed(this.primarySvg);
+        this.lightPreviewHtml = this.buildPreviewComputed(this.lightSvg);
+        this.form = inject(FormBuilder).group({
+            name: [
+                '',
+                [
+                    Validators.required,
+                    Validators.pattern(/^[a-z0-9][a-z0-9-]*$/),
+                    this.c8yPrefixValidator(),
+                    this.nameCollisionValidator()
+                ]
+            ],
+            family: ['dlt'],
+            category: ['', Validators.required]
+        });
+        this.bsModal = inject(BsModalRef);
+        this.svgSanitizer = inject(SvgSanitizerService);
+        this.domSanitizer = inject(DomSanitizer);
+        this.translateService = inject(TranslateService);
+        /** Modal body — only rendered once `isReady` is true. */
+        this.modalBody = viewChild('modalBody', ...(ngDevMode ? [{ debugName: "modalBody" }] : /* istanbul ignore next */ []));
+        this.result = new Promise(res => {
+            this.resolve = res;
+        });
+        // Focus the first interactive field as soon as the body renders — keyboard/
+        // screen-reader users don't need to re-navigate from the modal title.
+        effect(() => {
+            const body = this.modalBody();
+            if (!body)
+                return;
+            body.nativeElement
+                .querySelector('input:not([disabled]), button:not([disabled]), select:not([disabled])')
+                ?.focus();
+        });
+    }
+    ngOnInit() {
+        // Deferred so Bootstrap animates the modal at its full (spinner) size first.
+        setTimeout(() => this.isReady.set(true));
+        // Disable via the forms API — an [attr.disabled] binding gets stripped when
+        // reactive forms syncs the enabled control state on init.
+        if (this.isEditMode()) {
+            this.form.get('name')?.disable();
+        }
+        if (this.editingIcon) {
+            this.selectedFamily.set(this.editingIcon.family);
+            const category = this.editingIcon.category || 'Custom';
+            this.categorySearch.set(category.replace(/`[^`]*`$/, ''));
+            this.form.patchValue({
+                name: this.editingIcon.name,
+                family: this.editingIcon.family,
+                category
+            });
+            setTimeout(() => {
+                const th = this.categoryTypeahead();
+                if (th?.searchControl) {
+                    th.searchControl.nativeElement.value = category.replace(/`[^`]*`$/, '');
+                }
+            });
+            if (this.editingIcon.svgContentPrimary) {
+                this.primarySvg.set(this.editingIcon.svgContentPrimary);
+                this.primaryValidation.set(this.svgSanitizer.validate(this.editingIcon.svgContentPrimary));
+            }
+            if (this.editingIcon.svgContentSecondary) {
+                this.lightSvg.set(this.editingIcon.svgContentSecondary);
+                this.lightValidation.set(this.svgSanitizer.validate(this.editingIcon.svgContentSecondary));
+            }
+        }
+    }
+    onFamilyChange(family) {
+        this.selectedFamily.set(family);
+        this.form.patchValue({ family });
+        // Re-run name validators since c8yPrefixValidator depends on selectedFamily
+        this.form.get('name')?.updateValueAndValidity();
+        if (family === 'dlt') {
+            this.lightSvg.set(null);
+            this.lightValidation.set(null);
+        }
+    }
+    async onPrimaryDropped(files) {
+        if (!files.length)
+            return;
+        const raw = await files[0].readAsText();
+        const { content, validation } = this.processUpload(raw);
+        this.primarySvg.set(content);
+        this.primaryValidation.set(validation);
+        if (!this.form.getRawValue().name) {
+            const nameFromFile = files[0].file.name
+                .replace(/\.svg$/i, '')
+                .toLowerCase()
+                .replace(/[^a-z0-9-]/g, '-')
+                .replace(/-+/g, '-')
+                .replace(/^-|-$/g, '');
+            this.form.patchValue({ name: nameFromFile });
+        }
+    }
+    async onLightDropped(files) {
+        if (!files.length)
+            return;
+        const raw = await files[0].readAsText();
+        const { content, validation } = this.processUpload(raw);
+        this.lightSvg.set(content);
+        this.lightValidation.set(validation);
+    }
+    clearPrimary() {
+        this.primarySvg.set(null);
+        this.primaryValidation.set(null);
+    }
+    clearLight() {
+        this.lightSvg.set(null);
+        this.lightValidation.set(null);
+    }
+    /** Called on every keystroke in the typeahead — filters categories and sets the form value. */
+    onCategorySearch(text) {
+        this.categorySearch.set(text);
+        this.form.patchValue({ category: text });
+        this.form.get('category')?.markAsTouched();
+    }
+    clearCategory() {
+        this.categorySearch.set('');
+        this.form.patchValue({ category: '' });
+        this.form.get('category')?.markAsTouched();
+        const th = this.categoryTypeahead();
+        th?.reset();
+    }
+    /** Selects an existing category or confirms a new one from the typeahead dropdown. */
+    selectCategory(name) {
+        const trimmed = name.trim();
+        if (!trimmed)
+            return;
+        const displayName = trimmed.replace(/`[^`]*`$/, '');
+        this.categorySearch.set(displayName); // store display name — filter uses this for comparison
+        this.form.patchValue({ category: trimmed }); // store raw value (preserves gettext key for built-ins)
+        this.form.get('category')?.markAsTouched();
+        const th = this.categoryTypeahead();
+        if (th?.searchControl) {
+            th.searchControl.nativeElement.value = displayName;
+        }
+    }
+    save() {
+        // Save stays enabled while invalid — the first attempt surfaces the validation
+        // messages instead of leaving the user guessing why a disabled button won't work.
+        if (!this.isValid() || (this.form.invalid && !this.isOverrideMode())) {
+            this.saveAttempted.set(true);
+            this.form.markAllAsTouched();
+            return;
+        }
+        // getRawValue(): the name control is disabled in edit mode and would be
+        // missing from form.value
+        let iconName = this.form.getRawValue().name ?? '';
+        // c8y family icons require the 'c8y-' prefix so the IconDirective routes
+        // them to the duocolor CSS pseudo-element rendering path (::before + ::after)
+        if (this.selectedFamily() === 'c8y' && !iconName.startsWith('c8y-')) {
+            iconName = `c8y-${iconName}`;
+        }
+        // Safe: isValid() guard above ensures primarySvg() is non-null. The signals already
+        // hold sanitized + color-normalized content — onPrimaryDropped()/onLightDropped()
+        // process uploads, and editingIcon content was processed when originally saved.
+        const result = {
+            name: iconName,
+            family: this.selectedFamily(),
+            // Overrides replace a built-in icon and belong to no collection
+            category: this.isOverrideMode() ? '' : (this.form.value.category ?? 'Custom'),
+            svgContentPrimary: this.primarySvg(),
+            isOverride: this.isOverrideMode(),
+            overriddenIconName: this.editingIcon?.overriddenIconName
+        };
+        if (this.selectedFamily() === 'c8y' && this.lightSvg()) {
+            result.svgContentSecondary = this.lightSvg();
+            result.hasSecondary = true;
+        }
+        this.resolve(result);
+        this.bsModal.hide();
+    }
+    cancel() {
+        this.resolve(null);
+        this.bsModal.hide();
+    }
+    /** Overrides c8y-modal's default hide-on-OK — save() decides whether the modal
+     * closes (valid) or stays open showing the validation messages. */
+    keepOpenOnOk() { }
+    /** Sanitizes an uploaded SVG and validates the result. Issues found in the raw
+     * upload but gone after sanitizing were removed content — surfaced as warnings
+     * so the user knows the stored SVG differs from the uploaded file. */
+    processUpload(raw) {
+        const rawValidation = this.svgSanitizer.validate(raw);
+        const content = this.svgSanitizer.normalizeColors(this.svgSanitizer.sanitize(raw));
+        const validation = this.svgSanitizer.validate(content);
+        const removed = rawValidation.errors.filter(e => !validation.errors.includes(e));
+        if (removed.length) {
+            validation.warnings = [
+                this.translateService.instant(gettext('Unsafe content was removed from the uploaded SVG:')),
+                ...removed,
+                ...validation.warnings
+            ];
+        }
+        return { content, validation };
+    }
+    /** Returns true when the category label matches the current search text. */
+    isCategoryMatch(cat) {
+        const search = this.categorySearch().toLowerCase();
+        if (!search)
+            return true;
+        return cat
+            .replace(/`[^`]*`$/, '')
+            .toLowerCase()
+            .includes(search);
+    }
+    buildPreviewComputed(svgSignal) {
+        return computed(() => {
+            const svg = svgSignal();
+            if (!svg)
+                return null;
+            let sanitized = this.svgSanitizer.sanitize(svg);
+            sanitized = sanitized.replace(/<svg/i, '<svg width="100%" height="100%" style="display:block"');
+            // Safe: sanitize() already removed all dangerous elements, event handlers, and
+            // external references. The only modification after sanitize() is adding safe sizing attributes.
+            return this.domSanitizer.bypassSecurityTrustHtml(sanitized);
+        });
+    }
+    c8yPrefixValidator() {
+        return (control) => {
+            if (typeof control.value === 'string' &&
+                control.value.startsWith('c8y-') &&
+                this.selectedFamily() === 'dlt') {
+                return { c8yPrefix: {} };
+            }
+            return null;
+        };
+    }
+    nameCollisionValidator() {
+        return (control) => {
+            const name = typeof control.value === 'string' ? control.value : '';
+            if (!name) {
+                return null; // other validators will catch empty name
+            }
+            const nonPrefixedNewName = name.replace(/^c8y-/, '');
+            const hasConflict = Array.from(this.reservedIconNames).some(iconName => {
+                const nonPrefixedIconName = iconName.replace(/^c8y-/, '');
+                return (iconName === name ||
+                    iconName === nonPrefixedNewName ||
+                    nonPrefixedIconName === name ||
+                    nonPrefixedIconName === nonPrefixedNewName);
+            });
+            if (hasConflict) {
+                return { nameCollision: {} };
+            }
+            return null;
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AddCustomIconModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: AddCustomIconModalComponent, isStandalone: true, selector: "c8y-add-custom-icon-modal", viewQueries: [{ propertyName: "categoryTypeahead", first: true, predicate: ["categoryTypeahead"], descendants: true, isSignal: true }, { propertyName: "modalBody", first: true, predicate: ["modalBody"], descendants: true, isSignal: true }], ngImport: i0, template: "<c8y-modal\n  [title]=\"modalTitle() | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [close]=\"keepOpenOnOk\"\n  [labels]=\"{ cancel: 'Cancel', ok: okLabel() | translate }\"\n>\n  <ng-container c8y-modal-title>\n    <span\n      [c8yIcon]=\"isOverrideMode() ? 'replace' : isEditMode() ? 'pencil' : 'plus-circle-o'\"\n      aria-hidden=\"true\"\n    ></span>\n  </ng-container>\n\n  @if (!isReady()) {\n    <!-- min-height matches the approximate form height so Bootstrap animates\n         the modal at its full size before the form is rendered. -->\n    <div\n      class=\"p-32 d-flex a-i-center j-c-center\"\n      style=\"min-height: 380px\"\n      [attr.aria-label]=\"'Loading\u2026' | translate\"\n      role=\"status\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n  }\n\n  @if (isReady()) {\n    <div\n      class=\"p-t-16 p-b-24 p-l-32 p-r-32\"\n      #modalBody\n    >\n      @if (isOverrideMode()) {\n        <p class=\"text-center text-16 text-bold text-balance m-b-16\">\n          {{ 'Upload a replacement SVG for {{iconName}}' | translate: { iconName:\n          editingIcon?.overriddenIconName } }}\n        </p>\n      }\n\n      <!-- Name, collection and icon type (hidden in override mode) -->\n      @if (!isOverrideMode()) {\n        @if (!isEditMode()) {\n          <p\n            class=\"text-muted m-b-16\"\n            translate\n          >\n            Upload a custom SVG icon and assign it to a collection to keep your icons organized.\n          </p>\n        }\n        <div\n          class=\"m-b-16\"\n          [formGroup]=\"form\"\n        >\n          <c8y-form-group class=\"p-b-16\">\n            <label\n              for=\"iconName\"\n              translate\n              >Icon name</label\n            >\n            <input\n              class=\"form-control\"\n              id=\"iconName\"\n              aria-required=\"true\"\n              aria-describedby=\"iconName-messages\"\n              type=\"text\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'acme-logo' }\"\n              formControlName=\"name\"\n            />\n            <c8y-messages\n              id=\"iconName-messages\"\n              role=\"status\"\n              [helpMessage]=\"'Lowercase letters, numbers and hyphens only' | translate\"\n            >\n              @for (message of nameMessages; track message.name) {\n                <c8y-message\n                  [name]=\"message.name\"\n                  [text]=\"message.text | translate\"\n                ></c8y-message>\n              }\n            </c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group [hasError]=\"hasCategoryError()\">\n            <label\n              for=\"iconCategory\"\n              translate\n              >Collection</label\n            >\n            <div class=\"p-relative\">\n              <c8y-typeahead\n                [attr.aria-label]=\"'Icon collection' | translate\"\n                id=\"iconCategory\"\n                #categoryTypeahead\n                [allowFreeEntries]=\"true\"\n                [hideNew]=\"true\"\n                [placeholder]=\"'Select or enter a collection name' | translate\"\n                (onSearch)=\"onCategorySearch($event)\"\n              >\n                @for (cat of filteredCategories(); track cat) {\n                  <c8y-li\n                    class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                    (click)=\"selectCategory(cat)\"\n                    [active]=\"form.value.category === cat\"\n                    >{{ cat | translate }}</c8y-li\n                  >\n                }\n                @if (showAddNew()) {\n                  <c8y-li class=\"bg-level-2 p-8\">\n                    @if (hasNoMatch()) {\n                      <span\n                        class=\"m-r-8\"\n                        translate\n                        >No existing collection found.</span\n                      >\n                    }\n                    <button\n                      class=\"btn btn-default btn-xs\"\n                      type=\"button\"\n                      (click)=\"selectCategory(categorySearch())\"\n                    >\n                      {{ 'Add new collection`collection`' | translate }}\n                    </button>\n                  </c8y-li>\n                }\n              </c8y-typeahead>\n              @if (categorySearch()) {\n                <button\n                  class=\"btn btn-dot p-absolute\"\n                  style=\"right: 36px; z-index: 10\"\n                  [attr.aria-label]=\"'Clear collection' | translate\"\n                  type=\"button\"\n                  (click)=\"clearCategory()\"\n                >\n                  <i\n                    [c8yIcon]=\"'times'\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </button>\n              }\n            </div>\n            <c8y-messages\n              role=\"alert\"\n              [show]=\"categoryErrors()\"\n            >\n              <c8y-message\n                [name]=\"'required'\"\n                [text]=\"'Collection is required.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          @if (!isEditMode()) {\n            <fieldset class=\"c8y-fieldset m-b-24\">\n              <legend translate>Icon type</legend>\n              <div class=\"d-flex gap-16 p-b-16\">\n                <label class=\"c8y-radio a-i-start\">\n                  <input\n                    name=\"iconFamily\"\n                    type=\"radio\"\n                    [checked]=\"selectedFamily() === 'dlt'\"\n                    (change)=\"onFamilyChange('dlt')\"\n                  />\n                  <span></span>\n                  <span\n                    >{{ 'Single color' | translate }}<br />\n                    <small\n                      class=\"text-muted d-block\"\n                      translate\n                    >\n                      Single SVG, inherits text color via currentColor.\n                    </small>\n                  </span>\n                </label>\n\n                <label class=\"c8y-radio a-i-start\">\n                  <input\n                    name=\"iconFamily\"\n                    type=\"radio\"\n                    [checked]=\"selectedFamily() === 'c8y'\"\n                    (change)=\"onFamilyChange('c8y')\"\n                  />\n                  <span></span>\n                  <span>\n                    {{ 'Duocolor' | translate }}<br />\n                    <small\n                      class=\"text-muted d-block\"\n                      translate\n                    >\n                      Two SVGs required: a dark layer and a light accent layer.\n                    </small>\n                  </span>\n                </label>\n              </div>\n            </fieldset>\n          }\n        </div>\n      }\n\n      <!-- SVG uploads -->\n      <div\n        class=\"m-b-16\"\n        [class.row]=\"selectedFamily() === 'c8y'\"\n      >\n        @if (selectedFamily() === 'dlt') {\n          <c8y-form-group [hasError]=\"hasPrimarySvgError()\">\n            <label translate>Icon SVG</label>\n            @if (!primarySvg()) {\n              <c8y-drop-area\n                class=\"drop-area-sm\"\n                [icon]=\"'upload'\"\n                [title]=\"'Upload SVG icon' | translate\"\n                [attr.aria-label]=\"'Upload SVG icon' | translate\"\n                [accept]=\"'.svg'\"\n                [maxAllowedFiles]=\"1\"\n                [maxFileSizeInMegaBytes]=\"5\"\n                [message]=\"'Drop SVG file here or click to browse' | translate\"\n                (dropped)=\"onPrimaryDropped($event)\"\n              ></c8y-drop-area>\n              <c8y-messages\n                class=\"m-t-8\"\n                role=\"status\"\n                [show]=\"primarySvgErrors()\"\n                [helpMessage]=\"\n                  hasPrimarySvgError()\n                    ? ''\n                    : ('Square viewBox (e.g. 24\u00D724) \u00B7 currentColor fills \u00B7 no external refs or scripts'\n                      | translate)\n                \"\n              >\n                <c8y-message\n                  [name]=\"'required'\"\n                  [text]=\"'Upload an SVG file.' | translate\"\n                ></c8y-message>\n                @if (primaryValidation(); as pv) {\n                  @for (error of pv.errors; track error) {\n                    <div class=\"d-block text-danger\">{{ error }}</div>\n                  }\n                  @for (warning of pv.warnings; track warning) {\n                    <div class=\"d-block text-warning\">{{ warning }}</div>\n                  }\n                }\n              </c8y-messages>\n            } @else {\n              <fieldset class=\"c8y-fieldset m-b-8\">\n                <legend class=\"d-flex a-i-center\">\n                  <span translate>Preview</span>\n                  <button\n                    class=\"btn btn-dot btn-dot--danger m-l-8\"\n                    [attr.aria-label]=\"'Remove SVG preview' | translate\"\n                    [tooltip]=\"'Remove SVG preview' | translate\"\n                    placement=\"top\"\n                    container=\"body\"\n                    [delay]=\"500\"\n                    (click)=\"clearPrimary()\"\n                  >\n                    <i\n                      [c8yIcon]=\"'minus-circle'\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </button>\n                </legend>\n                <div class=\"row d-flex a-i-center gap-16 p-b-16\">\n                  <div\n                    class=\"col-sm-6 d-flex a-i-end gap-8 j-c-around p-16 c8y-light-theme\"\n                    style=\"\n                      background: var(--c8y-root-component-background-default);\n                      border: 1px solid var(--c8y-root-component-border-color);\n                      border-radius: var(--c8y-component-border-radius-base, 4px);\n                    \"\n                  >\n                    @for (size of previewSizes; track size) {\n                      <div class=\"d-flex d-col a-i-center\">\n                        <div\n                          class=\"d-flex a-i-center j-c-center text-default\"\n                          [style.width.px]=\"size\"\n                          [style.height.px]=\"size\"\n                          aria-hidden=\"true\"\n                          [innerHTML]=\"primaryPreviewHtml()\"\n                        ></div>\n                        <small class=\"text-muted\">{{ size }}</small>\n                      </div>\n                    }\n                  </div>\n                  <div\n                    class=\"col-sm-6 d-flex a-i-end gap-16 j-c-around p-16 c8y-dark-theme\"\n                    style=\"\n                      background: var(--c8y-root-component-background-default);\n                      border: 1px solid var(--c8y-root-component-border-color);\n                      border-radius: var(--c8y-component-border-radius-base, 4px);\n                    \"\n                  >\n                    @for (size of previewSizes; track size) {\n                      <div class=\"d-flex d-col a-i-center\">\n                        <div\n                          class=\"d-flex a-i-center j-c-center text-default\"\n                          [style.width.px]=\"size\"\n                          [style.height.px]=\"size\"\n                          aria-hidden=\"true\"\n                          [innerHTML]=\"primaryPreviewHtml()\"\n                        ></div>\n                        <small class=\"text-muted\">{{ size }}</small>\n                      </div>\n                    }\n                  </div>\n                </div>\n                @if (primaryValidation(); as pv) {\n                  @if (pv.errors.length || pv.warnings.length) {\n                    <small\n                      class=\"form-control-feedback-message\"\n                      role=\"status\"\n                    >\n                      @for (error of pv.errors; track error) {\n                        <div class=\"d-block text-danger\">{{ error }}</div>\n                      }\n                      @for (warning of pv.warnings; track warning) {\n                        <div class=\"d-block text-warning\">{{ warning }}</div>\n                      }\n                    </small>\n                  }\n                }\n              </fieldset>\n            }\n          </c8y-form-group>\n        } @else {\n          <!-- C8Y duocolor: dark + light uploads side by side -->\n          <div class=\"row d-flex-md gap-16\">\n            <div class=\"col-sm-6\">\n              <c8y-form-group [hasError]=\"hasPrimarySvgError()\">\n                <label translate>Dark layer SVG</label>\n                @if (!primarySvg()) {\n                  <c8y-drop-area\n                    class=\"drop-area-sm\"\n                    [icon]=\"'upload'\"\n                    [attr.aria-label]=\"'Upload dark layer SVG' | translate\"\n                    [accept]=\"'.svg'\"\n                    [maxAllowedFiles]=\"1\"\n                    [maxFileSizeInMegaBytes]=\"5\"\n                    [message]=\"'Drop dark layer SVG' | translate\"\n                    (dropped)=\"onPrimaryDropped($event)\"\n                  ></c8y-drop-area>\n                  <c8y-messages\n                    class=\"m-t-8\"\n                    role=\"status\"\n                    [show]=\"primarySvgErrors()\"\n                    [helpMessage]=\"\n                      hasPrimarySvgError()\n                        ? ''\n                        : ('Square viewBox \u00B7 currentColor fills \u00B7 main icon shape' | translate)\n                    \"\n                  >\n                    <c8y-message\n                      [name]=\"'required'\"\n                      [text]=\"'Upload an SVG file.' | translate\"\n                    ></c8y-message>\n                    @if (primaryValidation(); as pv) {\n                      @for (error of pv.errors; track error) {\n                        <div class=\"d-block text-danger\">{{ error }}</div>\n                      }\n                      @for (warning of pv.warnings; track warning) {\n                        <div class=\"d-block text-warning\">{{ warning }}</div>\n                      }\n                    }\n                  </c8y-messages>\n                } @else {\n                  <div class=\"d-flex a-i-center gap-8 p-8 separator m-b-4\">\n                    <div\n                      class=\"d-flex a-i-center j-c-center\"\n                      [style.width.px]=\"32\"\n                      [style.height.px]=\"32\"\n                      aria-hidden=\"true\"\n                      [innerHTML]=\"primaryPreviewHtml()\"\n                    ></div>\n                    <span\n                      class=\"text-muted text-12 flex-grow\"\n                      translate\n                      >Dark layer</span\n                    >\n                    <button\n                      class=\"btn btn-dot btn-dot--danger\"\n                      [attr.aria-label]=\"'Remove dark layer SVG' | translate\"\n                      [tooltip]=\"'Remove dark layer SVG' | translate\"\n                      placement=\"top\"\n                      container=\"body\"\n                      [delay]=\"500\"\n                      (click)=\"clearPrimary()\"\n                    >\n                      <i\n                        [c8yIcon]=\"'minus-circle'\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </button>\n                  </div>\n                  @if (primaryValidation(); as pv) {\n                    @if (pv.errors.length || pv.warnings.length) {\n                      <small\n                        class=\"form-control-feedback-message\"\n                        role=\"status\"\n                      >\n                        @for (error of pv.errors; track error) {\n                          <div class=\"d-block text-danger\">{{ error }}</div>\n                        }\n                        @for (warning of pv.warnings; track warning) {\n                          <div class=\"d-block text-warning\">{{ warning }}</div>\n                        }\n                      </small>\n                    }\n                  }\n                }\n              </c8y-form-group>\n            </div>\n            <div class=\"col-sm-6\">\n              <c8y-form-group [hasError]=\"hasLightSvgError()\">\n                <label translate>Light layer SVG</label>\n                @if (!lightSvg()) {\n                  <c8y-drop-area\n                    class=\"drop-area-sm\"\n                    [icon]=\"'upload'\"\n                    [attr.aria-label]=\"'Upload light layer SVG' | translate\"\n                    [accept]=\"'.svg'\"\n                    [maxAllowedFiles]=\"1\"\n                    [maxFileSizeInMegaBytes]=\"5\"\n                    [message]=\"'Drop light layer SVG' | translate\"\n                    (dropped)=\"onLightDropped($event)\"\n                  ></c8y-drop-area>\n                  <c8y-messages\n                    class=\"m-t-8\"\n                    role=\"status\"\n                    [show]=\"lightSvgErrors()\"\n                    [helpMessage]=\"\n                      hasLightSvgError()\n                        ? ''\n                        : ('Same viewBox as dark layer \u00B7 accent shape for the light tint'\n                          | translate)\n                    \"\n                  >\n                    <c8y-message\n                      [name]=\"'required'\"\n                      [text]=\"'Upload an SVG file.' | translate\"\n                    ></c8y-message>\n                    @if (lightValidation(); as lv) {\n                      @for (error of lv.errors; track error) {\n                        <div class=\"d-block text-danger\">{{ error }}</div>\n                      }\n                      @for (warning of lv.warnings; track warning) {\n                        <div class=\"d-block text-warning\">{{ warning }}</div>\n                      }\n                    }\n                  </c8y-messages>\n                } @else {\n                  <div class=\"d-flex a-i-center gap-8 p-8 separator m-b-4\">\n                    <div\n                      class=\"d-flex a-i-center j-c-center\"\n                      [style.width.px]=\"32\"\n                      [style.height.px]=\"32\"\n                      aria-hidden=\"true\"\n                      [innerHTML]=\"lightPreviewHtml()\"\n                    ></div>\n                    <span\n                      class=\"text-muted text-12 flex-grow\"\n                      translate\n                      >Light layer</span\n                    >\n                    <button\n                      class=\"btn btn-dot btn-dot--danger\"\n                      [attr.aria-label]=\"'Remove light layer SVG' | translate\"\n                      [tooltip]=\"'Remove light layer SVG' | translate\"\n                      placement=\"top\"\n                      container=\"body\"\n                      [delay]=\"500\"\n                      (click)=\"clearLight()\"\n                    >\n                      <i\n                        [c8yIcon]=\"'minus-circle'\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </button>\n                  </div>\n                  @if (lightValidation(); as lv) {\n                    @if (lv.errors.length || lv.warnings.length) {\n                      <small\n                        class=\"form-control-feedback-message\"\n                        role=\"status\"\n                      >\n                        @for (error of lv.errors; track error) {\n                          <div class=\"d-block text-danger\">{{ error }}</div>\n                        }\n                        @for (warning of lv.warnings; track warning) {\n                          <div class=\"d-block text-warning\">{{ warning }}</div>\n                        }\n                      </small>\n                    }\n                  }\n                }\n              </c8y-form-group>\n            </div>\n          </div>\n\n          @if (showCompositePreview()) {\n            <fieldset\n              class=\"c8y-fieldset m-t-16\"\n              aria-hidden=\"true\"\n            >\n              <legend translate>Composited preview</legend>\n              <div class=\"row d-flex-md gap-16 p-b-16\">\n                <!-- Light background -->\n                <div\n                  class=\"col-sm-6 d-flex a-i-end gap-8 j-c-around p-16 c8y-light-theme\"\n                  style=\"\n                    background: var(--c8y-root-component-background-default);\n                    border: 1px solid var(--c8y-root-component-border-color);\n                    border-radius: var(--c8y-component-border-radius-base, 4px);\n                  \"\n                >\n                  @for (size of previewSizes; track size) {\n                    <div class=\"d-flex d-col a-i-center\">\n                      <div\n                        class=\"p-relative\"\n                        [style.width.px]=\"size\"\n                        [style.height.px]=\"size\"\n                      >\n                        <div\n                          class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                          style=\"color: var(--c8y-root-component-icon-dark-color-dark)\"\n                          [innerHTML]=\"primaryPreviewHtml()\"\n                        ></div>\n                        <div\n                          class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                          style=\"\n                            top: 0;\n                            left: 0;\n                            color: var(--c8y-root-component-icon-dark-color-light);\n                          \"\n                          [innerHTML]=\"lightPreviewHtml()\"\n                        ></div>\n                      </div>\n                      <small class=\"text-muted\">{{ size }}</small>\n                    </div>\n                  }\n                </div>\n                <!-- Dark background -->\n                <div\n                  class=\"col-sm-6 d-flex a-i-end gap-8 j-c-around p-16 c8y-dark-theme\"\n                  style=\"\n                    background: var(--c8y-root-component-background-default);\n                    border-radius: var(--c8y-component-border-radius-base, 4px);\n                  \"\n                >\n                  @for (size of previewSizes; track size) {\n                    <div class=\"d-flex d-col a-i-center\">\n                      <div\n                        class=\"p-relative\"\n                        [style.width.px]=\"size\"\n                        [style.height.px]=\"size\"\n                      >\n                        <div\n                          class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                          style=\"color: var(--c8y-root-component-icon-dark-color-dark)\"\n                          [innerHTML]=\"primaryPreviewHtml()\"\n                        ></div>\n                        <div\n                          class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                          style=\"\n                            top: 0;\n                            left: 0;\n                            color: var(\n                              --c8y-component-icon-dark-color-light,\n                              var(--c8y-root-component-icon-dark-color-light)\n                            );\n                          \"\n                          [innerHTML]=\"lightPreviewHtml()\"\n                        ></div>\n                      </div>\n                      <small class=\"text-muted\">{{ size }}</small>\n                    </div>\n                  }\n                </div>\n              </div>\n            </fieldset>\n          }\n        }\n      </div>\n    </div>\n  }\n</c8y-modal>\n", dependencies: [{ kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "component", type: FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage", "additionalMessages"] }, { kind: "directive", type: MessageDirective, selector: "c8y-message", inputs: ["name", "text"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TypeaheadComponent, selector: "c8y-typeahead", inputs: ["required", "maxlength", "disabled", "allowFreeEntries", "placeholder", "displayProperty", "icon", "name", "autoClose", "hideNew", "container", "selected", "title", "highlightFirstItem"], outputs: ["onSearch", "onIconClick"] }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AddCustomIconModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-add-custom-icon-modal', imports: [
+                        ModalComponent,
+                        DropAreaComponent,
+                        IconDirective,
+                        FormGroupComponent,
+                        MessagesComponent,
+                        MessageDirective,
+                        C8yTranslateDirective,
+                        C8yTranslatePipe,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        TypeaheadComponent,
+                        ListItemComponent,
+                        LoadingComponent,
+                        TooltipModule
+                    ], template: "<c8y-modal\n  [title]=\"modalTitle() | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"cancel()\"\n  (onClose)=\"save()\"\n  [close]=\"keepOpenOnOk\"\n  [labels]=\"{ cancel: 'Cancel', ok: okLabel() | translate }\"\n>\n  <ng-container c8y-modal-title>\n    <span\n      [c8yIcon]=\"isOverrideMode() ? 'replace' : isEditMode() ? 'pencil' : 'plus-circle-o'\"\n      aria-hidden=\"true\"\n    ></span>\n  </ng-container>\n\n  @if (!isReady()) {\n    <!-- min-height matches the approximate form height so Bootstrap animates\n         the modal at its full size before the form is rendered. -->\n    <div\n      class=\"p-32 d-flex a-i-center j-c-center\"\n      style=\"min-height: 380px\"\n      [attr.aria-label]=\"'Loading\u2026' | translate\"\n      role=\"status\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n  }\n\n  @if (isReady()) {\n    <div\n      class=\"p-t-16 p-b-24 p-l-32 p-r-32\"\n      #modalBody\n    >\n      @if (isOverrideMode()) {\n        <p class=\"text-center text-16 text-bold text-balance m-b-16\">\n          {{ 'Upload a replacement SVG for {{iconName}}' | translate: { iconName:\n          editingIcon?.overriddenIconName } }}\n        </p>\n      }\n\n      <!-- Name, collection and icon type (hidden in override mode) -->\n      @if (!isOverrideMode()) {\n        @if (!isEditMode()) {\n          <p\n            class=\"text-muted m-b-16\"\n            translate\n          >\n            Upload a custom SVG icon and assign it to a collection to keep your icons organized.\n          </p>\n        }\n        <div\n          class=\"m-b-16\"\n          [formGroup]=\"form\"\n        >\n          <c8y-form-group class=\"p-b-16\">\n            <label\n              for=\"iconName\"\n              translate\n              >Icon name</label\n            >\n            <input\n              class=\"form-control\"\n              id=\"iconName\"\n              aria-required=\"true\"\n              aria-describedby=\"iconName-messages\"\n              type=\"text\"\n              [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'acme-logo' }\"\n              formControlName=\"name\"\n            />\n            <c8y-messages\n              id=\"iconName-messages\"\n              role=\"status\"\n              [helpMessage]=\"'Lowercase letters, numbers and hyphens only' | translate\"\n            >\n              @for (message of nameMessages; track message.name) {\n                <c8y-message\n                  [name]=\"message.name\"\n                  [text]=\"message.text | translate\"\n                ></c8y-message>\n              }\n            </c8y-messages>\n          </c8y-form-group>\n\n          <c8y-form-group [hasError]=\"hasCategoryError()\">\n            <label\n              for=\"iconCategory\"\n              translate\n              >Collection</label\n            >\n            <div class=\"p-relative\">\n              <c8y-typeahead\n                [attr.aria-label]=\"'Icon collection' | translate\"\n                id=\"iconCategory\"\n                #categoryTypeahead\n                [allowFreeEntries]=\"true\"\n                [hideNew]=\"true\"\n                [placeholder]=\"'Select or enter a collection name' | translate\"\n                (onSearch)=\"onCategorySearch($event)\"\n              >\n                @for (cat of filteredCategories(); track cat) {\n                  <c8y-li\n                    class=\"p-l-8 p-r-8 c8y-list__item--link\"\n                    (click)=\"selectCategory(cat)\"\n                    [active]=\"form.value.category === cat\"\n                    >{{ cat | translate }}</c8y-li\n                  >\n                }\n                @if (showAddNew()) {\n                  <c8y-li class=\"bg-level-2 p-8\">\n                    @if (hasNoMatch()) {\n                      <span\n                        class=\"m-r-8\"\n                        translate\n                        >No existing collection found.</span\n                      >\n                    }\n                    <button\n                      class=\"btn btn-default btn-xs\"\n                      type=\"button\"\n                      (click)=\"selectCategory(categorySearch())\"\n                    >\n                      {{ 'Add new collection`collection`' | translate }}\n                    </button>\n                  </c8y-li>\n                }\n              </c8y-typeahead>\n              @if (categorySearch()) {\n                <button\n                  class=\"btn btn-dot p-absolute\"\n                  style=\"right: 36px; z-index: 10\"\n                  [attr.aria-label]=\"'Clear collection' | translate\"\n                  type=\"button\"\n                  (click)=\"clearCategory()\"\n                >\n                  <i\n                    [c8yIcon]=\"'times'\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </button>\n              }\n            </div>\n            <c8y-messages\n              role=\"alert\"\n              [show]=\"categoryErrors()\"\n            >\n              <c8y-message\n                [name]=\"'required'\"\n                [text]=\"'Collection is required.' | translate\"\n              ></c8y-message>\n            </c8y-messages>\n          </c8y-form-group>\n\n          @if (!isEditMode()) {\n            <fieldset class=\"c8y-fieldset m-b-24\">\n              <legend translate>Icon type</legend>\n              <div class=\"d-flex gap-16 p-b-16\">\n                <label class=\"c8y-radio a-i-start\">\n                  <input\n                    name=\"iconFamily\"\n                    type=\"radio\"\n                    [checked]=\"selectedFamily() === 'dlt'\"\n                    (change)=\"onFamilyChange('dlt')\"\n                  />\n                  <span></span>\n                  <span\n                    >{{ 'Single color' | translate }}<br />\n                    <small\n                      class=\"text-muted d-block\"\n                      translate\n                    >\n                      Single SVG, inherits text color via currentColor.\n                    </small>\n                  </span>\n                </label>\n\n                <label class=\"c8y-radio a-i-start\">\n                  <input\n                    name=\"iconFamily\"\n                    type=\"radio\"\n                    [checked]=\"selectedFamily() === 'c8y'\"\n                    (change)=\"onFamilyChange('c8y')\"\n                  />\n                  <span></span>\n                  <span>\n                    {{ 'Duocolor' | translate }}<br />\n                    <small\n                      class=\"text-muted d-block\"\n                      translate\n                    >\n                      Two SVGs required: a dark layer and a light accent layer.\n                    </small>\n                  </span>\n                </label>\n              </div>\n            </fieldset>\n          }\n        </div>\n      }\n\n      <!-- SVG uploads -->\n      <div\n        class=\"m-b-16\"\n        [class.row]=\"selectedFamily() === 'c8y'\"\n      >\n        @if (selectedFamily() === 'dlt') {\n          <c8y-form-group [hasError]=\"hasPrimarySvgError()\">\n            <label translate>Icon SVG</label>\n            @if (!primarySvg()) {\n              <c8y-drop-area\n                class=\"drop-area-sm\"\n                [icon]=\"'upload'\"\n                [title]=\"'Upload SVG icon' | translate\"\n                [attr.aria-label]=\"'Upload SVG icon' | translate\"\n                [accept]=\"'.svg'\"\n                [maxAllowedFiles]=\"1\"\n                [maxFileSizeInMegaBytes]=\"5\"\n                [message]=\"'Drop SVG file here or click to browse' | translate\"\n                (dropped)=\"onPrimaryDropped($event)\"\n              ></c8y-drop-area>\n              <c8y-messages\n                class=\"m-t-8\"\n                role=\"status\"\n                [show]=\"primarySvgErrors()\"\n                [helpMessage]=\"\n                  hasPrimarySvgError()\n                    ? ''\n                    : ('Square viewBox (e.g. 24\u00D724) \u00B7 currentColor fills \u00B7 no external refs or scripts'\n                      | translate)\n                \"\n              >\n                <c8y-message\n                  [name]=\"'required'\"\n                  [text]=\"'Upload an SVG file.' | translate\"\n                ></c8y-message>\n                @if (primaryValidation(); as pv) {\n                  @for (error of pv.errors; track error) {\n                    <div class=\"d-block text-danger\">{{ error }}</div>\n                  }\n                  @for (warning of pv.warnings; track warning) {\n                    <div class=\"d-block text-warning\">{{ warning }}</div>\n                  }\n                }\n              </c8y-messages>\n            } @else {\n              <fieldset class=\"c8y-fieldset m-b-8\">\n                <legend class=\"d-flex a-i-center\">\n                  <span translate>Preview</span>\n                  <button\n                    class=\"btn btn-dot btn-dot--danger m-l-8\"\n                    [attr.aria-label]=\"'Remove SVG preview' | translate\"\n                    [tooltip]=\"'Remove SVG preview' | translate\"\n                    placement=\"top\"\n                    container=\"body\"\n                    [delay]=\"500\"\n                    (click)=\"clearPrimary()\"\n                  >\n                    <i\n                      [c8yIcon]=\"'minus-circle'\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </button>\n                </legend>\n                <div class=\"row d-flex a-i-center gap-16 p-b-16\">\n                  <div\n                    class=\"col-sm-6 d-flex a-i-end gap-8 j-c-around p-16 c8y-light-theme\"\n                    style=\"\n                      background: var(--c8y-root-component-background-default);\n                      border: 1px solid var(--c8y-root-component-border-color);\n                      border-radius: var(--c8y-component-border-radius-base, 4px);\n                    \"\n                  >\n                    @for (size of previewSizes; track size) {\n                      <div class=\"d-flex d-col a-i-center\">\n                        <div\n                          class=\"d-flex a-i-center j-c-center text-default\"\n                          [style.width.px]=\"size\"\n                          [style.height.px]=\"size\"\n                          aria-hidden=\"true\"\n                          [innerHTML]=\"primaryPreviewHtml()\"\n                        ></div>\n                        <small class=\"text-muted\">{{ size }}</small>\n                      </div>\n                    }\n                  </div>\n                  <div\n                    class=\"col-sm-6 d-flex a-i-end gap-16 j-c-around p-16 c8y-dark-theme\"\n                    style=\"\n                      background: var(--c8y-root-component-background-default);\n                      border: 1px solid var(--c8y-root-component-border-color);\n                      border-radius: var(--c8y-component-border-radius-base, 4px);\n                    \"\n                  >\n                    @for (size of previewSizes; track size) {\n                      <div class=\"d-flex d-col a-i-center\">\n                        <div\n                          class=\"d-flex a-i-center j-c-center text-default\"\n                          [style.width.px]=\"size\"\n                          [style.height.px]=\"size\"\n                          aria-hidden=\"true\"\n                          [innerHTML]=\"primaryPreviewHtml()\"\n                        ></div>\n                        <small class=\"text-muted\">{{ size }}</small>\n                      </div>\n                    }\n                  </div>\n                </div>\n                @if (primaryValidation(); as pv) {\n                  @if (pv.errors.length || pv.warnings.length) {\n                    <small\n                      class=\"form-control-feedback-message\"\n                      role=\"status\"\n                    >\n                      @for (error of pv.errors; track error) {\n                        <div class=\"d-block text-danger\">{{ error }}</div>\n                      }\n                      @for (warning of pv.warnings; track warning) {\n                        <div class=\"d-block text-warning\">{{ warning }}</div>\n                      }\n                    </small>\n                  }\n                }\n              </fieldset>\n            }\n          </c8y-form-group>\n        } @else {\n          <!-- C8Y duocolor: dark + light uploads side by side -->\n          <div class=\"row d-flex-md gap-16\">\n            <div class=\"col-sm-6\">\n              <c8y-form-group [hasError]=\"hasPrimarySvgError()\">\n                <label translate>Dark layer SVG</label>\n                @if (!primarySvg()) {\n                  <c8y-drop-area\n                    class=\"drop-area-sm\"\n                    [icon]=\"'upload'\"\n                    [attr.aria-label]=\"'Upload dark layer SVG' | translate\"\n                    [accept]=\"'.svg'\"\n                    [maxAllowedFiles]=\"1\"\n                    [maxFileSizeInMegaBytes]=\"5\"\n                    [message]=\"'Drop dark layer SVG' | translate\"\n                    (dropped)=\"onPrimaryDropped($event)\"\n                  ></c8y-drop-area>\n                  <c8y-messages\n                    class=\"m-t-8\"\n                    role=\"status\"\n                    [show]=\"primarySvgErrors()\"\n                    [helpMessage]=\"\n                      hasPrimarySvgError()\n                        ? ''\n                        : ('Square viewBox \u00B7 currentColor fills \u00B7 main icon shape' | translate)\n                    \"\n                  >\n                    <c8y-message\n                      [name]=\"'required'\"\n                      [text]=\"'Upload an SVG file.' | translate\"\n                    ></c8y-message>\n                    @if (primaryValidation(); as pv) {\n                      @for (error of pv.errors; track error) {\n                        <div class=\"d-block text-danger\">{{ error }}</div>\n                      }\n                      @for (warning of pv.warnings; track warning) {\n                        <div class=\"d-block text-warning\">{{ warning }}</div>\n                      }\n                    }\n                  </c8y-messages>\n                } @else {\n                  <div class=\"d-flex a-i-center gap-8 p-8 separator m-b-4\">\n                    <div\n                      class=\"d-flex a-i-center j-c-center\"\n                      [style.width.px]=\"32\"\n                      [style.height.px]=\"32\"\n                      aria-hidden=\"true\"\n                      [innerHTML]=\"primaryPreviewHtml()\"\n                    ></div>\n                    <span\n                      class=\"text-muted text-12 flex-grow\"\n                      translate\n                      >Dark layer</span\n                    >\n                    <button\n                      class=\"btn btn-dot btn-dot--danger\"\n                      [attr.aria-label]=\"'Remove dark layer SVG' | translate\"\n                      [tooltip]=\"'Remove dark layer SVG' | translate\"\n                      placement=\"top\"\n                      container=\"body\"\n                      [delay]=\"500\"\n                      (click)=\"clearPrimary()\"\n                    >\n                      <i\n                        [c8yIcon]=\"'minus-circle'\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </button>\n                  </div>\n                  @if (primaryValidation(); as pv) {\n                    @if (pv.errors.length || pv.warnings.length) {\n                      <small\n                        class=\"form-control-feedback-message\"\n                        role=\"status\"\n                      >\n                        @for (error of pv.errors; track error) {\n                          <div class=\"d-block text-danger\">{{ error }}</div>\n                        }\n                        @for (warning of pv.warnings; track warning) {\n                          <div class=\"d-block text-warning\">{{ warning }}</div>\n                        }\n                      </small>\n                    }\n                  }\n                }\n              </c8y-form-group>\n            </div>\n            <div class=\"col-sm-6\">\n              <c8y-form-group [hasError]=\"hasLightSvgError()\">\n                <label translate>Light layer SVG</label>\n                @if (!lightSvg()) {\n                  <c8y-drop-area\n                    class=\"drop-area-sm\"\n                    [icon]=\"'upload'\"\n                    [attr.aria-label]=\"'Upload light layer SVG' | translate\"\n                    [accept]=\"'.svg'\"\n                    [maxAllowedFiles]=\"1\"\n                    [maxFileSizeInMegaBytes]=\"5\"\n                    [message]=\"'Drop light layer SVG' | translate\"\n                    (dropped)=\"onLightDropped($event)\"\n                  ></c8y-drop-area>\n                  <c8y-messages\n                    class=\"m-t-8\"\n                    role=\"status\"\n                    [show]=\"lightSvgErrors()\"\n                    [helpMessage]=\"\n                      hasLightSvgError()\n                        ? ''\n                        : ('Same viewBox as dark layer \u00B7 accent shape for the light tint'\n                          | translate)\n                    \"\n                  >\n                    <c8y-message\n                      [name]=\"'required'\"\n                      [text]=\"'Upload an SVG file.' | translate\"\n                    ></c8y-message>\n                    @if (lightValidation(); as lv) {\n                      @for (error of lv.errors; track error) {\n                        <div class=\"d-block text-danger\">{{ error }}</div>\n                      }\n                      @for (warning of lv.warnings; track warning) {\n                        <div class=\"d-block text-warning\">{{ warning }}</div>\n                      }\n                    }\n                  </c8y-messages>\n                } @else {\n                  <div class=\"d-flex a-i-center gap-8 p-8 separator m-b-4\">\n                    <div\n                      class=\"d-flex a-i-center j-c-center\"\n                      [style.width.px]=\"32\"\n                      [style.height.px]=\"32\"\n                      aria-hidden=\"true\"\n                      [innerHTML]=\"lightPreviewHtml()\"\n                    ></div>\n                    <span\n                      class=\"text-muted text-12 flex-grow\"\n                      translate\n                      >Light layer</span\n                    >\n                    <button\n                      class=\"btn btn-dot btn-dot--danger\"\n                      [attr.aria-label]=\"'Remove light layer SVG' | translate\"\n                      [tooltip]=\"'Remove light layer SVG' | translate\"\n                      placement=\"top\"\n                      container=\"body\"\n                      [delay]=\"500\"\n                      (click)=\"clearLight()\"\n                    >\n                      <i\n                        [c8yIcon]=\"'minus-circle'\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </button>\n                  </div>\n                  @if (lightValidation(); as lv) {\n                    @if (lv.errors.length || lv.warnings.length) {\n                      <small\n                        class=\"form-control-feedback-message\"\n                        role=\"status\"\n                      >\n                        @for (error of lv.errors; track error) {\n                          <div class=\"d-block text-danger\">{{ error }}</div>\n                        }\n                        @for (warning of lv.warnings; track warning) {\n                          <div class=\"d-block text-warning\">{{ warning }}</div>\n                        }\n                      </small>\n                    }\n                  }\n                }\n              </c8y-form-group>\n            </div>\n          </div>\n\n          @if (showCompositePreview()) {\n            <fieldset\n              class=\"c8y-fieldset m-t-16\"\n              aria-hidden=\"true\"\n            >\n              <legend translate>Composited preview</legend>\n              <div class=\"row d-flex-md gap-16 p-b-16\">\n                <!-- Light background -->\n                <div\n                  class=\"col-sm-6 d-flex a-i-end gap-8 j-c-around p-16 c8y-light-theme\"\n                  style=\"\n                    background: var(--c8y-root-component-background-default);\n                    border: 1px solid var(--c8y-root-component-border-color);\n                    border-radius: var(--c8y-component-border-radius-base, 4px);\n                  \"\n                >\n                  @for (size of previewSizes; track size) {\n                    <div class=\"d-flex d-col a-i-center\">\n                      <div\n                        class=\"p-relative\"\n                        [style.width.px]=\"size\"\n                        [style.height.px]=\"size\"\n                      >\n                        <div\n                          class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                          style=\"color: var(--c8y-root-component-icon-dark-color-dark)\"\n                          [innerHTML]=\"primaryPreviewHtml()\"\n                        ></div>\n                        <div\n                          class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                          style=\"\n                            top: 0;\n                            left: 0;\n                            color: var(--c8y-root-component-icon-dark-color-light);\n                          \"\n                          [innerHTML]=\"lightPreviewHtml()\"\n                        ></div>\n                      </div>\n                      <small class=\"text-muted\">{{ size }}</small>\n                    </div>\n                  }\n                </div>\n                <!-- Dark background -->\n                <div\n                  class=\"col-sm-6 d-flex a-i-end gap-8 j-c-around p-16 c8y-dark-theme\"\n                  style=\"\n                    background: var(--c8y-root-component-background-default);\n                    border-radius: var(--c8y-component-border-radius-base, 4px);\n                  \"\n                >\n                  @for (size of previewSizes; track size) {\n                    <div class=\"d-flex d-col a-i-center\">\n                      <div\n                        class=\"p-relative\"\n                        [style.width.px]=\"size\"\n                        [style.height.px]=\"size\"\n                      >\n                        <div\n                          class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                          style=\"color: var(--c8y-root-component-icon-dark-color-dark)\"\n                          [innerHTML]=\"primaryPreviewHtml()\"\n                        ></div>\n                        <div\n                          class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                          style=\"\n                            top: 0;\n                            left: 0;\n                            color: var(\n                              --c8y-component-icon-dark-color-light,\n                              var(--c8y-root-component-icon-dark-color-light)\n                            );\n                          \"\n                          [innerHTML]=\"lightPreviewHtml()\"\n                        ></div>\n                      </div>\n                      <small class=\"text-muted\">{{ size }}</small>\n                    </div>\n                  }\n                </div>\n              </div>\n            </fieldset>\n          }\n        }\n      </div>\n    </div>\n  }\n</c8y-modal>\n" }]
+        }], ctorParameters: () => [], propDecorators: { categoryTypeahead: [{ type: i0.ViewChild, args: ['categoryTypeahead', { isSignal: true }] }], modalBody: [{ type: i0.ViewChild, args: ['modalBody', { isSignal: true }] }] } });
+
+class AddCustomIconModalService {
+    constructor() {
+        this.modal = inject(BsModalService);
+    }
+    /**
+     * Opens the add/edit/override custom icon modal.
+     * @returns Resolves with the saved icon definition, or `null` if the user cancelled.
+     * The `mode` option controls the modal title and which fields are editable.
+     */
+    open(options = {}) {
+        const initialState = {
+            mode: options.mode ?? 'add',
+            editingIcon: options.editingIcon ?? null,
+            allCategories: options.allCategories ?? [],
+            reservedIconNames: options.reservedIconNames ?? new Set()
+        };
+        const ref = this.modal.show(AddCustomIconModalComponent, {
+            initialState,
+            ignoreBackdropClick: true,
+            keyboard: false,
+            class: 'modal-md'
+        });
+        return ref.content.result;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AddCustomIconModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AddCustomIconModalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AddCustomIconModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ImportCustomIconsModalComponent {
+    constructor() {
+        /** Current state of the import workflow: idle → previewing → importing. */
+        this.state = signal('idle', ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        /** Error message if ZIP parsing fails; null when clean. */
+        this.dropError = signal(null, ...(ngDevMode ? [{ debugName: "dropError" }] : /* istanbul ignore next */ []));
+        /** Icons ready to import (not skipped) from the current ZIP, with SVG previews. */
+        this.toImportIcons = signal([], ...(ngDevMode ? [{ debugName: "toImportIcons" }] : /* istanbul ignore next */ []));
+        this.familyLabels = {
+            dlt: gettext('Single color'),
+            c8y: gettext('Duocolor')
+        };
+        this.skipReasonLabels = {
+            exists: gettext('Already exists'),
+            missingSvg: gettext('Missing SVG file')
+        };
+        /** Icons skipped during preview, with the reason. */
+        this.skippedIcons = signal([], ...(ngDevMode ? [{ debugName: "skippedIcons" }] : /* istanbul ignore next */ []));
+        /** True when every skipped icon was skipped because it already exists in the tenant. */
+        this.allSkippedExist = computed(() => this.skippedIcons().length > 0 && this.skippedIcons().every(s => s.reason === 'exists'), ...(ngDevMode ? [{ debugName: "allSkippedExist" }] : /* istanbul ignore next */ []));
+        this.pendingFile = null;
+        this.bsModal = inject(BsModalRef);
+        this.registry = inject(CustomIconRegistryService);
+        this.zip = inject(ZipService);
+        this.alerts = inject(AlertService);
+        this.translate = inject(TranslateService);
+        this.svgSanitizer = inject(SvgSanitizerService);
+        this.domSanitizer = inject(DomSanitizer);
+        this.result = new Promise(res => {
+            this.resolve = res;
+        });
+    }
+    async onZipDropped(files) {
+        if (!files.length)
+            return;
+        this.dropError.set(null);
+        this.pendingFile = files[0].file;
+        try {
+            const preview = await this.previewImport(this.pendingFile);
+            this.toImportIcons.set(preview.toImport);
+            this.skippedIcons.set(preview.skipped);
+            this.state.set('previewing');
+        }
+        catch (e) {
+            this.dropError.set((e instanceof Error ? e.message : null) ??
+                this.translate.instant(gettext('Failed to read ZIP file.')));
+        }
+    }
+    async confirmImport() {
+        if (!this.pendingFile)
+            return;
+        this.state.set('importing');
+        try {
+            const result = await this.registry.importFromZip(this.pendingFile);
+            const msg = this.translate.instant(gettext('{{count}} icon(s) imported.'), {
+                count: result.imported
+            });
+            this.alerts.success(msg);
+            this.resolve(result.imported > 0);
+            this.bsModal.hide();
+        }
+        catch (e) {
+            this.alerts.danger((e instanceof Error ? e.message : null) ?? gettext('Import failed.'));
+            this.state.set('previewing');
+        }
+    }
+    close() {
+        if (this.state() === 'importing')
+            return;
+        this.resolve(false);
+        this.bsModal.hide();
+    }
+    /** Overrides c8y-modal's default hide-on-click — the modal must stay open and show
+     * the importing spinner until confirmImport()/close() hide it themselves. */
+    keepOpen() { }
+    async previewImport(file) {
+        const entries = await firstValueFrom(this.zip.getEntries(file));
+        const manifestEntry = entries.find(e => e.filename === 'icons.json');
+        if (!manifestEntry) {
+            throw new Error(this.translate.instant(gettext('Invalid ZIP: missing icons.json')));
+        }
+        const blob = await firstValueFrom(this.zip.getData(manifestEntry));
+        const manifest = JSON.parse(await blob.text());
+        const existing = new Set(this.registry.icons().map(i => i.name));
+        const entryNames = new Set(entries.map(e => e.filename));
+        const skipped = [];
+        const toImport = [];
+        const readSvg = async (fileName) => {
+            const entry = entries.find(e => e.filename === fileName);
+            if (!entry)
+                return null;
+            const svgBlob = await firstValueFrom(this.zip.getData(entry));
+            return this.buildPreviewHtml(await svgBlob.text());
+        };
+        for (const meta of manifest) {
+            const primaryFileName = getIconFileName(meta);
+            const secondaryFileName = meta.hasSecondary && getIconFileName(meta, true);
+            const preview = {
+                name: meta.name,
+                category: meta.category,
+                family: meta.family,
+                isOverride: meta.isOverride,
+                previewHtml: await readSvg(primaryFileName),
+                previewHtmlSecondary: secondaryFileName ? await readSvg(secondaryFileName) : null
+            };
+            const missingSvg = !entryNames.has(primaryFileName) ||
+                (secondaryFileName && !entryNames.has(secondaryFileName));
+            if (existing.has(meta.name)) {
+                skipped.push({ ...preview, reason: 'exists' });
+            }
+            else if (missingSvg) {
+                skipped.push({ ...preview, reason: 'missingSvg' });
+            }
+            else {
+                toImport.push(preview);
+            }
+        }
+        return { toImport, skipped };
+    }
+    /** Sanitized preview of an SVG from the ZIP.
+     * Safe for [innerHTML]: the string is DOMPurify-sanitized right before the trust call
+     * and only safe sizing attributes are added afterwards. */
+    buildPreviewHtml(rawSvg) {
+        const sanitized = this.svgSanitizer.sanitize(rawSvg);
+        if (!sanitized) {
+            return null;
+        }
+        return this.domSanitizer.bypassSecurityTrustHtml(sanitized.replace(/<svg/i, '<svg width="100%" height="100%" style="display:block"'));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ImportCustomIconsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ImportCustomIconsModalComponent, isStandalone: true, selector: "c8y-import-custom-icons-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"'Import custom icons' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"close()\"\n  (onClose)=\"confirmImport()\"\n  [close]=\"keepOpen\"\n  [dismiss]=\"keepOpen\"\n  [disabled]=\"state() !== 'previewing' || toImportIcons().length === 0\"\n  [labels]=\"{\n    cancel: 'Cancel',\n    ok: 'Import' | translate\n  }\"\n>\n  <ng-container c8y-modal-title>\n    <span\n      [c8yIcon]=\"'data-import'\"\n      aria-hidden=\"true\"\n    ></span>\n  </ng-container>\n\n  <div class=\"p-24\">\n    @if (state() === 'idle') {\n      <p\n        class=\"text-16 text-center text-balance m-b-16\"\n        translate\n      >\n        Upload a ZIP file previously exported from the icon selector to import custom icons into\n        this tenant.\n      </p>\n      <div class=\"d-flex j-c-center\">\n        <c8y-drop-area\n          [icon]=\"'upload'\"\n          style=\"width: 390px\"\n          [title]=\"'Upload icon ZIP' | translate\"\n          accept=\".zip\"\n          [maxAllowedFiles]=\"1\"\n          [message]=\"'Drop your .zip export file here or click to browse' | translate\"\n          (dropped)=\"onZipDropped($event)\"\n        ></c8y-drop-area>\n        @if (dropError()) {\n          <div\n            class=\"alert alert-danger m-t-8\"\n            role=\"alert\"\n          >\n            {{ dropError() }}\n          </div>\n        }\n      </div>\n    }\n\n    @if (state() === 'previewing') {\n      @if (toImportIcons().length) {\n        <p\n          class=\"m-b-8 text-bold\"\n          translate\n        >\n          The following icons will be imported:\n        </p>\n        <ul class=\"list-unstyled m-b-16 separator-top\">\n          @for (icon of toImportIcons(); track icon.name) {\n            <li class=\"d-flex a-i-center gap-8 p-t-8 p-b-8 separator-bottom\">\n              <span\n                class=\"p-relative flex-no-shrink\"\n                [style.width.px]=\"24\"\n                [style.height.px]=\"24\"\n                aria-hidden=\"true\"\n              >\n                <span\n                  class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                  [class.text-default]=\"!icon.previewHtmlSecondary\"\n                  [style.color]=\"\n                    icon.previewHtmlSecondary\n                      ? 'var(--c8y-root-component-icon-dark-color-dark)'\n                      : null\n                  \"\n                  [innerHTML]=\"icon.previewHtml\"\n                ></span>\n                @if (icon.previewHtmlSecondary) {\n                  <span\n                    class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                    style=\"top: 0; left: 0; color: var(--c8y-root-component-icon-dark-color-light)\"\n                    [innerHTML]=\"icon.previewHtmlSecondary\"\n                  ></span>\n                }\n              </span>\n              <span class=\"flex-grow min-width-0 text-truncate\">\n                {{ icon.name }}\n                @if (icon.category && !icon.isOverride) {\n                  <small class=\"text-muted m-l-4\">{{ icon.category | translate }}</small>\n                }\n              </span>\n              <span class=\"tag tag--info flex-no-shrink\">\n                {{ familyLabels[icon.family] | translate }}\n              </span>\n              @if (icon.isOverride) {\n                <span\n                  class=\"tag tag--warning flex-no-shrink\"\n                  translate\n                  >Override</span\n                >\n              }\n            </li>\n          }\n        </ul>\n      } @else if (allSkippedExist()) {\n        <div\n          class=\"alert alert-warning\"\n          role=\"status\"\n          translate\n        >\n          All icons in this file already exist in this tenant.\n        </div>\n      } @else {\n        <div\n          class=\"alert alert-warning\"\n          role=\"status\"\n          translate\n        >\n          No icons to import.\n        </div>\n      }\n      @if (skippedIcons().length && !(allSkippedExist() && toImportIcons().length === 0)) {\n        <p\n          class=\"m-b-8 text-bold\"\n          translate\n        >\n          The following icons will be skipped:\n        </p>\n        <ul class=\"list-unstyled m-b-16 separator-top\">\n          @for (icon of skippedIcons(); track icon.name) {\n            <li class=\"d-flex a-i-center gap-8 p-t-8 p-b-8 separator-bottom\">\n              <span\n                class=\"p-relative flex-no-shrink\"\n                [style.width.px]=\"24\"\n                [style.height.px]=\"24\"\n                aria-hidden=\"true\"\n              >\n                <span\n                  class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                  [class.text-default]=\"!icon.previewHtmlSecondary\"\n                  [style.color]=\"\n                    icon.previewHtmlSecondary\n                      ? 'var(--c8y-root-component-icon-dark-color-dark)'\n                      : null\n                  \"\n                  [innerHTML]=\"icon.previewHtml\"\n                ></span>\n                @if (icon.previewHtmlSecondary) {\n                  <span\n                    class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                    style=\"top: 0; left: 0; color: var(--c8y-root-component-icon-dark-color-light)\"\n                    [innerHTML]=\"icon.previewHtmlSecondary\"\n                  ></span>\n                }\n              </span>\n              <span class=\"flex-grow min-width-0 text-truncate\">\n                {{ icon.name }}\n                @if (icon.category && !icon.isOverride) {\n                  <small class=\"text-muted m-l-4\">{{ icon.category | translate }}</small>\n                }\n              </span>\n              <span class=\"tag tag--warning flex-no-shrink\">\n                {{ skipReasonLabels[icon.reason] | translate }}\n              </span>\n            </li>\n          }\n        </ul>\n      }\n    }\n\n    @if (state() === 'importing') {\n      <c8y-loading\n        role=\"status\"\n        [message]=\"'Importing icons\u2026' | translate\"\n      ></c8y-loading>\n    }\n  </div>\n</c8y-modal>\n", dependencies: [{ kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: DropAreaComponent, selector: "c8y-drop-area", inputs: ["formControl", "title", "message", "icon", "loadingMessage", "forceHideList", "alwaysShow", "clickToOpen", "loading", "progress", "maxAllowedFiles", "files", "maxFileSizeInMegaBytes", "accept"], outputs: ["dropped"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ImportCustomIconsModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c8y-import-custom-icons-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        C8yTranslatePipe,
+                        C8yTranslateDirective,
+                        DropAreaComponent,
+                        LoadingComponent,
+                        ModalComponent,
+                        IconDirective
+                    ], template: "<c8y-modal\n  [title]=\"'Import custom icons' | translate\"\n  [headerClasses]=\"'dialog-header'\"\n  (onDismiss)=\"close()\"\n  (onClose)=\"confirmImport()\"\n  [close]=\"keepOpen\"\n  [dismiss]=\"keepOpen\"\n  [disabled]=\"state() !== 'previewing' || toImportIcons().length === 0\"\n  [labels]=\"{\n    cancel: 'Cancel',\n    ok: 'Import' | translate\n  }\"\n>\n  <ng-container c8y-modal-title>\n    <span\n      [c8yIcon]=\"'data-import'\"\n      aria-hidden=\"true\"\n    ></span>\n  </ng-container>\n\n  <div class=\"p-24\">\n    @if (state() === 'idle') {\n      <p\n        class=\"text-16 text-center text-balance m-b-16\"\n        translate\n      >\n        Upload a ZIP file previously exported from the icon selector to import custom icons into\n        this tenant.\n      </p>\n      <div class=\"d-flex j-c-center\">\n        <c8y-drop-area\n          [icon]=\"'upload'\"\n          style=\"width: 390px\"\n          [title]=\"'Upload icon ZIP' | translate\"\n          accept=\".zip\"\n          [maxAllowedFiles]=\"1\"\n          [message]=\"'Drop your .zip export file here or click to browse' | translate\"\n          (dropped)=\"onZipDropped($event)\"\n        ></c8y-drop-area>\n        @if (dropError()) {\n          <div\n            class=\"alert alert-danger m-t-8\"\n            role=\"alert\"\n          >\n            {{ dropError() }}\n          </div>\n        }\n      </div>\n    }\n\n    @if (state() === 'previewing') {\n      @if (toImportIcons().length) {\n        <p\n          class=\"m-b-8 text-bold\"\n          translate\n        >\n          The following icons will be imported:\n        </p>\n        <ul class=\"list-unstyled m-b-16 separator-top\">\n          @for (icon of toImportIcons(); track icon.name) {\n            <li class=\"d-flex a-i-center gap-8 p-t-8 p-b-8 separator-bottom\">\n              <span\n                class=\"p-relative flex-no-shrink\"\n                [style.width.px]=\"24\"\n                [style.height.px]=\"24\"\n                aria-hidden=\"true\"\n              >\n                <span\n                  class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                  [class.text-default]=\"!icon.previewHtmlSecondary\"\n                  [style.color]=\"\n                    icon.previewHtmlSecondary\n                      ? 'var(--c8y-root-component-icon-dark-color-dark)'\n                      : null\n                  \"\n                  [innerHTML]=\"icon.previewHtml\"\n                ></span>\n                @if (icon.previewHtmlSecondary) {\n                  <span\n                    class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                    style=\"top: 0; left: 0; color: var(--c8y-root-component-icon-dark-color-light)\"\n                    [innerHTML]=\"icon.previewHtmlSecondary\"\n                  ></span>\n                }\n              </span>\n              <span class=\"flex-grow min-width-0 text-truncate\">\n                {{ icon.name }}\n                @if (icon.category && !icon.isOverride) {\n                  <small class=\"text-muted m-l-4\">{{ icon.category | translate }}</small>\n                }\n              </span>\n              <span class=\"tag tag--info flex-no-shrink\">\n                {{ familyLabels[icon.family] | translate }}\n              </span>\n              @if (icon.isOverride) {\n                <span\n                  class=\"tag tag--warning flex-no-shrink\"\n                  translate\n                  >Override</span\n                >\n              }\n            </li>\n          }\n        </ul>\n      } @else if (allSkippedExist()) {\n        <div\n          class=\"alert alert-warning\"\n          role=\"status\"\n          translate\n        >\n          All icons in this file already exist in this tenant.\n        </div>\n      } @else {\n        <div\n          class=\"alert alert-warning\"\n          role=\"status\"\n          translate\n        >\n          No icons to import.\n        </div>\n      }\n      @if (skippedIcons().length && !(allSkippedExist() && toImportIcons().length === 0)) {\n        <p\n          class=\"m-b-8 text-bold\"\n          translate\n        >\n          The following icons will be skipped:\n        </p>\n        <ul class=\"list-unstyled m-b-16 separator-top\">\n          @for (icon of skippedIcons(); track icon.name) {\n            <li class=\"d-flex a-i-center gap-8 p-t-8 p-b-8 separator-bottom\">\n              <span\n                class=\"p-relative flex-no-shrink\"\n                [style.width.px]=\"24\"\n                [style.height.px]=\"24\"\n                aria-hidden=\"true\"\n              >\n                <span\n                  class=\"d-flex a-i-center j-c-center fit-w fit-h\"\n                  [class.text-default]=\"!icon.previewHtmlSecondary\"\n                  [style.color]=\"\n                    icon.previewHtmlSecondary\n                      ? 'var(--c8y-root-component-icon-dark-color-dark)'\n                      : null\n                  \"\n                  [innerHTML]=\"icon.previewHtml\"\n                ></span>\n                @if (icon.previewHtmlSecondary) {\n                  <span\n                    class=\"d-flex a-i-center j-c-center fit-w fit-h p-absolute\"\n                    style=\"top: 0; left: 0; color: var(--c8y-root-component-icon-dark-color-light)\"\n                    [innerHTML]=\"icon.previewHtmlSecondary\"\n                  ></span>\n                }\n              </span>\n              <span class=\"flex-grow min-width-0 text-truncate\">\n                {{ icon.name }}\n                @if (icon.category && !icon.isOverride) {\n                  <small class=\"text-muted m-l-4\">{{ icon.category | translate }}</small>\n                }\n              </span>\n              <span class=\"tag tag--warning flex-no-shrink\">\n                {{ skipReasonLabels[icon.reason] | translate }}\n              </span>\n            </li>\n          }\n        </ul>\n      }\n    }\n\n    @if (state() === 'importing') {\n      <c8y-loading\n        role=\"status\"\n        [message]=\"'Importing icons\u2026' | translate\"\n      ></c8y-loading>\n    }\n  </div>\n</c8y-modal>\n" }]
+        }] });
+
+class ImportCustomIconsModalService {
+    constructor() {
+        this.modal = inject(BsModalService);
+    }
+    /**
+     * Opens the import custom icons modal.
+     * @returns Resolves to `true` when at least one icon was imported, `false` when the user
+     * cancelled or nothing was imported.
+     */
+    open() {
+        const ref = this.modal.show(ImportCustomIconsModalComponent, {
+            ignoreBackdropClick: true,
+            keyboard: false,
+            class: 'modal-md'
+        });
+        return ref.content.result;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ImportCustomIconsModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ImportCustomIconsModalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ImportCustomIconsModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 const allIconCategory = gettext('All`icons-category`');
+function errorMessage(e, fallback) {
+    return (e instanceof Error ? e.message : null) ?? fallback;
+}
 class IconSelectorComponent {
     constructor() {
+        // Exposed so templates can use gettext() for i18n string extraction inside @let expressions
+        this.gettext = gettext;
+        /** Category labels to hide from the grid. Values are translated category strings (e.g. `gettext('Custom\`icons-category\`')`). */
         this.iconCategoriesToExclude = [];
+        /** When true, displays the icon's CSS class name as a label beneath each tile. */
         this.showIconClass = true;
         this.onSelect = new EventEmitter();
+        this.allIconCategory = allIconCategory;
         this.searchTerm$ = new BehaviorSubject('');
         this.selectedIconCategory$ = new BehaviorSubject(allIconCategory);
-        this.icons$ = defer(() => from(this.loadIconDefinitions())).pipe(map(icons => icons.filter(tmp => !this.iconCategoriesToExclude.includes(tmp.label))), shareReplay({ refCount: true, bufferSize: 1 }));
+        this.isAdmin = signal(false, ...(ngDevMode ? [{ debugName: "isAdmin" }] : /* istanbul ignore next */ []));
+        this.customIconNames = signal(new Set(), ...(ngDevMode ? [{ debugName: "customIconNames" }] : /* istanbul ignore next */ []));
+        this.overriddenIconNames = signal(new Set(), ...(ngDevMode ? [{ debugName: "overriddenIconNames" }] : /* istanbul ignore next */ []));
+        this.customCategoryLabels = signal(new Set(), ...(ngDevMode ? [{ debugName: "customCategoryLabels" }] : /* istanbul ignore next */ []));
+        this.iconsLoading = signal(true, ...(ngDevMode ? [{ debugName: "iconsLoading" }] : /* istanbul ignore next */ []));
+        this.isSaving = signal(false, ...(ngDevMode ? [{ debugName: "isSaving" }] : /* istanbul ignore next */ []));
+        /** Categories rendered so far; updated in chunks to keep frames short. */
+        this.visibleDefinitions = signal([], ...(ngDevMode ? [{ debugName: "visibleDefinitions" }] : /* istanbul ignore next */ []));
+        /** Icons matching the current filter — drives the screen-reader result announcement. */
+        this.filteredIconCount = signal(0, ...(ngDevMode ? [{ debugName: "filteredIconCount" }] : /* istanbul ignore next */ []));
+        this.hasCustomIcons = computed(() => this.registry.icons().length > 0, ...(ngDevMode ? [{ debugName: "hasCustomIcons" }] : /* istanbul ignore next */ []));
+        /** Incremented on each new renderProgressively call to cancel in-flight chunks.
+         * Also incremented in ngOnDestroy so any pending setTimeout callbacks self-terminate. */
+        this.progressiveRenderToken = 0;
+        this.scrollToIconTimer = null;
+        // ReplaySubject(1): no initial emission (unlike BehaviorSubject) so combineLatest waits
+        // for ngOnInit's explicit .next() before emitting — prevents two-phase loading.
+        // Replay ensures late subscribers (template may subscribe after ngOnInit fires) still get
+        // the value — fixes blank selector for non-admin users.
+        this.customIconsRefresh$ = new ReplaySubject(1);
+        this.el = inject(ElementRef);
+        this.permissions = inject(Permissions);
+        this.registry = inject(CustomIconRegistryService);
+        this.addModal = inject(AddCustomIconModalService);
+        this.importModal = inject(ImportCustomIconsModalService);
+        this.modalService = inject(ModalService);
+        this.alerts = inject(AlertService);
+        this.translate = inject(TranslateService);
+        try {
+            this.isAdmin.set(this.permissions.hasRole(Permissions.ROLE_APPLICATION_MANAGEMENT_ADMIN));
+        }
+        catch {
+            // not logged in yet
+        }
+        const builtInIcons$ = defer(() => from(this.loadBuiltInDefinitions())).pipe(shareReplay({ refCount: true, bufferSize: 1 }));
+        const customIcons$ = this.customIconsRefresh$.pipe(map(() => this.registry.toIconDefinitions()), 
+        // Emit an empty list immediately so combineLatest doesn't wait for the
+        // registry network fetch before showing built-in icons.
+        startWith([]));
+        this.icons$ = combineLatest([builtInIcons$, customIcons$]).pipe(
+        // Clear the loading spinner on the first emission (built-in icons ready)
+        // rather than waiting until registry.load() also completes.
+        tap(() => this.iconsLoading.set(false)), map(([builtIn, custom]) => {
+            // Merge definitions with the same label (custom icons assigned to an existing category
+            // must appear inside that category, not create a duplicate group)
+            const merged = new Map();
+            for (const def of [...custom, ...builtIn]) {
+                const existing = merged.get(def.label);
+                const mutableIcons = def.icons.map(i => [...i]);
+                if (existing) {
+                    existing.push(...mutableIcons);
+                }
+                else {
+                    merged.set(def.label, mutableIcons);
+                }
+            }
+            return Array.from(merged.entries())
+                .map(([label, icons]) => ({ label, icons }))
+                .filter(c => !this.iconCategoriesToExclude.includes(c.label))
+                .sort((a, b) => a.label.localeCompare(b.label));
+        }), shareReplay({ refCount: true, bufferSize: 1 }));
         this.filteredIcons$ = combineLatest([
             this.icons$,
             this.searchTerm$.pipe(debounceTime(500), startWith(this.searchTerm$.value)),
             this.selectedIconCategory$
         ]).pipe(map(([icons, searchTerm, category]) => this.filterIconsByCategoryAndSearchTerm(icons, category, searchTerm)));
-        this.availableIconCategories$ = this.icons$.pipe(map(icons => [allIconCategory, ...icons.map(tmp => tmp.label)]));
+        this.availableIconCategories$ = this.icons$.pipe(map(icons => [allIconCategory, ...icons.map(c => c.label)]));
+        this.availableIconCategoryItems$ = this.availableIconCategories$.pipe(switchMap(cats => merge(of(null), this.translate.onLangChange).pipe(map(() => cats.map(c => ({ label: this.translate.instant(c), value: c }))))), startWith([{ label: this.translate.instant(allIconCategory), value: allIconCategory }]));
+        this.allCategories = toSignal(this.icons$.pipe(map(icons => icons.map(c => c.label))), {
+            initialValue: []
+        });
+        this.allIconNames = toSignal(this.icons$.pipe(map(defs => new Set(defs.flatMap(cat => cat.icons.map(i => i[0]))))), { initialValue: new Set() });
+        // Drive progressive rendering — each new filteredIcons$ emission (initial load,
+        // search, category filter) triggers chunked DOM creation so the first categories
+        // appear immediately without blocking the main thread for 1400+ nodes.
+        this.filteredIcons$.pipe(takeUntilDestroyed()).subscribe(defs => {
+            this.filteredIconCount.set(defs.reduce((total, def) => total + def.icons.length, 0));
+            this.renderProgressively(defs);
+        });
     }
-    async loadIconDefinitions() {
-        const { allIcons } = await import('@c8y/ngx-components/icon-selector/icons');
-        return allIcons;
+    async ngOnInit() {
+        // Only fetch on first open or after a failed load. Skipping on subsequent opens avoids
+        // racing against the platform propagating a new activeVersionId after a save.
+        // registry.loaded() distinguishes "never loaded / error" from "loaded but empty".
+        try {
+            if (!this.registry.loaded()) {
+                await this.registry.load();
+            }
+            this.syncCustomIconNames();
+        }
+        catch (e) {
+            this.alerts.danger(errorMessage(e, gettext('Failed to load custom icons.')));
+        }
+        this.customIconsRefresh$.next();
+        // iconsLoading is now cleared reactively by tap() in the icons$ pipeline on first emission.
     }
-    filterIconsByCategoryAndSearchTerm(iconCategories, selectedCategory, searchTerm) {
-        if (selectedCategory !== allIconCategory) {
-            iconCategories = iconCategories.filter(category => category.label === selectedCategory);
+    async onResetOverrideClicked(iconName) {
+        try {
+            await this.modalService.confirm(gettext('Reset icon'), gettext('This will remove your custom override and restore the original icon.'), 'warning');
         }
-        if (searchTerm) {
-            const lowerCaseSearchTerm = searchTerm.toLowerCase();
-            const matchingCategories = new Array();
-            for (const category of iconCategories) {
-                const matchingIcons = category.icons.filter(iconClasses => iconClasses.some(iconClass => iconClass.includes(lowerCaseSearchTerm)));
-                if (matchingIcons.length) {
-                    matchingCategories.push({ ...clone(category), icons: matchingIcons });
-                }
+        catch {
+            return;
+        }
+        const override = this.registry
+            .icons()
+            .find(i => i.isOverride && i.overriddenIconName === iconName);
+        if (!override)
+            return;
+        this.isSaving.set(true);
+        try {
+            await this.registry.deleteIcon(override.name, override.family);
+            this.syncCustomIconNames();
+            this.customIconsRefresh$.next();
+        }
+        catch (e) {
+            this.alerts.danger(errorMessage(e, gettext('Failed to reset icon.')));
+        }
+        finally {
+            this.isSaving.set(false);
+        }
+    }
+    async onAddIconClicked() {
+        const result = await this.addModal.open({
+            mode: 'add',
+            allCategories: this.allCategories(),
+            reservedIconNames: new Set([...this.allIconNames(), ...this.customIconNames()])
+        });
+        if (!result)
+            return;
+        this.isSaving.set(true);
+        try {
+            await this.registry.saveIcon(result);
+            this.syncCustomIconNames();
+            this.customIconsRefresh$.next();
+        }
+        catch (e) {
+            this.alerts.danger(errorMessage(e, gettext('Failed to save icon.')));
+            return;
+        }
+        finally {
+            this.isSaving.set(false);
+        }
+        this.scrollToIcon(result.name);
+    }
+    async onEditIconClicked(iconName) {
+        const icon = this.registry.icons().find(i => i.name === iconName);
+        if (!icon)
+            return;
+        // After a reload only manifest metadata is in memory — fetch the SVGs so the
+        // edit modal shows the current content instead of empty upload fields.
+        const editingIcon = await this.registry.withSvgContent(icon);
+        const result = await this.addModal.open({
+            mode: 'edit',
+            editingIcon,
+            allCategories: this.allCategories()
+        });
+        if (!result)
+            return;
+        this.isSaving.set(true);
+        try {
+            await this.registry.saveIcon(result);
+            this.syncCustomIconNames();
+            this.customIconsRefresh$.next();
+        }
+        catch (e) {
+            this.alerts.danger(errorMessage(e, gettext('Failed to save icon.')));
+            return;
+        }
+        finally {
+            this.isSaving.set(false);
+        }
+        this.scrollToIcon(result.name);
+    }
+    async onDeleteIconClicked(iconName) {
+        const icon = this.registry.icons().find(i => i.name === iconName);
+        if (!icon)
+            return;
+        try {
+            await this.modalService.confirm(gettext('Delete icon'), gettext('Are you sure you want to delete this icon? This cannot be undone.'), 'danger', { ok: gettext('Delete') });
+        }
+        catch {
+            return;
+        }
+        this.isSaving.set(true);
+        try {
+            await this.registry.deleteIcon(icon.name, icon.family);
+            this.syncCustomIconNames();
+            this.customIconsRefresh$.next();
+        }
+        catch (e) {
+            this.alerts.danger(errorMessage(e, gettext('Failed to delete icon.')));
+        }
+        finally {
+            this.isSaving.set(false);
+        }
+    }
+    async onOverrideIconClicked(icon) {
+        const iconName = icon[0];
+        const overrideDef = {
+            name: iconName.replace(/^c8y-/, ''),
+            family: iconName.startsWith('c8y-') ? 'c8y' : 'dlt',
+            category: '',
+            svgContentPrimary: '',
+            isOverride: true,
+            overriddenIconName: iconName
+        };
+        const result = await this.addModal.open({
+            mode: 'override',
+            editingIcon: overrideDef,
+            allCategories: this.allCategories()
+        });
+        if (!result)
+            return;
+        this.isSaving.set(true);
+        try {
+            await this.registry.saveIcon(result);
+            this.syncCustomIconNames();
+            this.customIconsRefresh$.next();
+        }
+        catch (e) {
+            this.alerts.danger(errorMessage(e, gettext('Failed to save icon override.')));
+            return;
+        }
+        finally {
+            this.isSaving.set(false);
+        }
+        // Scroll to the original icon position (override keeps it in the built-in grid slot)
+        this.scrollToIcon(result.overriddenIconName ?? result.name);
+    }
+    async onExportClicked() {
+        try {
+            const blob = await this.registry.exportAsZip();
+            this.triggerDownload(blob, 'custom-icons.zip');
+        }
+        catch (e) {
+            this.alerts.danger(errorMessage(e, gettext('Export failed.')));
+        }
+    }
+    async onImportClicked() {
+        const didImport = await this.importModal.open();
+        if (didImport) {
+            this.isSaving.set(true);
+            try {
+                this.syncCustomIconNames();
+                this.customIconsRefresh$.next();
+            }
+            finally {
+                this.isSaving.set(false);
             }
-            return matchingCategories;
         }
-        return iconCategories;
     }
     onSearchChange(searchTerm) {
         this.searchTerm$.next(searchTerm);
@@ -75,21 +1430,133 @@ class IconSelectorComponent {
         this.selectedIcon = icon[0];
         this.onSelect.emit(icon[0]);
     }
+    ngOnDestroy() {
+        this.customIconsRefresh$.complete();
+        ++this.progressiveRenderToken;
+        if (this.scrollToIconTimer !== null)
+            clearTimeout(this.scrollToIconTimer);
+    }
+    /**
+     * Renders `definitions` in chunks of 3 categories per `setTimeout(0)` frame.
+     * This keeps individual frames short so the browser can paint after each chunk
+     * and Angular's change-detection cycles remain cheap (enabling fast modal opens).
+     * A token guards against stale chunks from a superseded render (e.g. rapid search).
+     */
+    renderProgressively(definitions, onComplete) {
+        const token = ++this.progressiveRenderToken;
+        if (!definitions.length) {
+            this.visibleDefinitions.set([]);
+            onComplete?.();
+            return;
+        }
+        const CHUNK = 3;
+        // Show first chunk immediately — no empty-state flash.
+        this.visibleDefinitions.set(definitions.slice(0, CHUNK));
+        let i = CHUNK;
+        const render = () => {
+            if (token !== this.progressiveRenderToken)
+                return; // superseded
+            const chunk = definitions.slice(i, i + CHUNK);
+            if (!chunk.length) {
+                onComplete?.();
+                return;
+            }
+            this.visibleDefinitions.update(prev => [...prev, ...chunk]);
+            i += CHUNK;
+            if (i < definitions.length) {
+                setTimeout(render, 0);
+            }
+            else {
+                onComplete?.();
+            }
+        };
+        if (i < definitions.length)
+            setTimeout(render, 0);
+        else
+            onComplete?.();
+    }
+    filterIconsByCategoryAndSearchTerm(iconCategories, selectedCategory, searchTerm) {
+        if (selectedCategory !== allIconCategory) {
+            iconCategories = iconCategories.filter(category => category.label === selectedCategory);
+        }
+        if (!searchTerm)
+            return iconCategories;
+        const lowerCaseSearchTerm = searchTerm.toLowerCase();
+        const matchingCategories = [];
+        for (const category of iconCategories) {
+            const matchingIcons = category.icons.filter(iconClasses => iconClasses.some(iconClass => iconClass.includes(lowerCaseSearchTerm)));
+            if (matchingIcons.length) {
+                matchingCategories.push({ label: category.label, icons: matchingIcons });
+            }
+        }
+        return matchingCategories;
+    }
+    isCustomIcon(iconName) {
+        return this.customIconNames().has(iconName);
+    }
+    isIconOverridden(iconName) {
+        return this.overriddenIconNames().has(iconName);
+    }
+    async loadBuiltInDefinitions() {
+        const { allIcons } = await import('@c8y/ngx-components/icon-selector/icons');
+        return allIcons;
+    }
+    syncCustomIconNames() {
+        const icons = this.registry.icons();
+        const nonOverrides = icons.filter(i => !i.isOverride);
+        this.customIconNames.set(new Set(nonOverrides.map(i => i.name)));
+        this.customCategoryLabels.set(new Set(nonOverrides.map(i => i.category).filter(Boolean)));
+        this.overriddenIconNames.set(new Set(icons
+            .filter(i => i.isOverride)
+            .map(i => i.overriddenIconName)
+            .filter(Boolean)));
+    }
+    scrollToIcon(iconName) {
+        this.selectedIcon = iconName;
+        this.onSelect.emit(iconName);
+        this.scheduleScrollToSelected();
+    }
+    /** Scrolls the grid to whichever icon currently has [aria-current="true"].
+     * Called after a user selects or saves an icon. */
+    scheduleScrollToSelected(delay = 50) {
+        if (this.scrollToIconTimer !== null)
+            clearTimeout(this.scrollToIconTimer);
+        this.scrollToIconTimer = setTimeout(() => {
+            this.scrollToIconTimer = null;
+            try {
+                const btn = this.el.nativeElement.querySelector('[aria-current="true"]');
+                btn?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+            }
+            catch {
+                // non-critical — scroll is best-effort
+            }
+        }, delay);
+    }
+    triggerDownload(blob, filename) {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        a.click();
+        URL.revokeObjectURL(url);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: IconSelectorComponent, isStandalone: true, selector: "c8y-icon-selector", inputs: { iconCategoriesToExclude: "iconCategoriesToExclude", showIconClass: "showIconClass", selectedIcon: "selectedIcon" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<div class=\"p-l-24 p-r-24 p-t-8 p-b-8 separator-bottom\">\n  <div class=\"row d-flex-sm\">\n    <div class=\"col-sm-6 m-b-8\">\n      <div\n        class=\"input-group-search input-group\"\n        style=\"width: auto\"\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          <span\n            class=\"input-group-addon pointer\"\n            (click)=\"onSearchChange('')\"\n          >\n            <i c8yIcon=\"times\"></i>\n          </span>\n        } @else {\n          <span class=\"input-group-addon\">\n            <i c8yIcon=\"search\"></i>\n          </span>\n        }\n      </div>\n    </div>\n    <div class=\"col-sm-6 m-b-8 text-right\">\n      <div class=\"d-inline-flex a-i-center text-left\">\n        <label\n          class=\"m-b-0 m-r-8 flex-no-shrink\"\n          translate\n        >\n          Filter by type\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"exampleSelect\"\n            [ngModel]=\"selectedIconCategory$ | async\"\n            (ngModelChange)=\"onCategoryFilterChanged($event)\"\n          >\n            @for (category of availableIconCategories$ | async; track category) {\n              <option [ngValue]=\"category\">\n                {{ category | translate }}\n              </option>\n            }\n          </select>\n          <span></span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-inner-scroll\">\n  <div\n    class=\"modal-body\"\n    style=\"height: calc(100vh - 293px)\"\n  >\n    <div class=\"dtm-icon-grid\">\n      @for (iconDefinition of filteredIcons$ | async; track iconDefinition) {\n        <div class=\"d-contents\">\n          <div class=\"legend form-block center grid__col--fullspan\">\n            {{ iconDefinition.label | translate }}\n          </div>\n\n          @for (icon of iconDefinition.icons; track icon) {\n            <div class=\"d-contents\">\n              <div\n                class=\"dtm-icon-grid__item\"\n                [ngClass]=\"{\n                  'dtm-icon-grid__item--selected': selectedIcon && icon[0] === selectedIcon\n                }\"\n              >\n                <button\n                  class=\"dtm-icon-grid__btn\"\n                  [title]=\"icon[0] | iconName\"\n                  (click)=\"onIconClicked(icon)\"\n                >\n                  <i\n                    class=\"icon-40 c8y-icon-duocolor\"\n                    [c8yIcon]=\"icon[0]\"\n                  ></i>\n                  @if (showIconClass) {\n                    <small class=\"d-block text-center text-break-word\">\n                      {{ icon[0] | iconName }}\n                    </small>\n                  }\n                </button>\n              </div>\n            </div>\n          }\n        </div>\n      } @empty {\n        <c8y-ui-empty-state\n          icon=\"search\"\n          style=\"grid-column: 1 / 3\"\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    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: IconNamePipe, name: "iconName" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: IconSelectorComponent, isStandalone: true, selector: "c8y-icon-selector", inputs: { iconCategoriesToExclude: "iconCategoriesToExclude", showIconClass: "showIconClass", selectedIcon: "selectedIcon" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<div\n  class=\"p-l-24 p-r-24 p-t-8 p-b-8 separator-bottom sticky-top\"\n  style=\"background: var(--c8y-root-component-background-default); z-index: 2\"\n>\n  <div class=\"row d-flex-sm\">\n    <div class=\"col-sm-5 m-b-8\">\n      <div\n        class=\"input-group-search input-group\"\n        style=\"width: auto\"\n      >\n        <label\n          class=\"sr-only\"\n          for=\"filter-icons\"\n          translate\n          >Filter icons</label\n        >\n        <input\n          class=\"form-control\"\n          id=\"filter-icons\"\n          placeholder=\"{{ 'Type to filter icons\u2026' | translate }}\"\n          type=\"search\"\n          [ngModel]=\"searchTerm$ | async\"\n          (ngModelChange)=\"onSearchChange($event)\"\n        />\n        @if (searchTerm$ | async) {\n          <button\n            class=\"input-group-addon\"\n            [attr.aria-label]=\"'Clear search' | translate\"\n            type=\"button\"\n            (click)=\"onSearchChange('')\"\n          >\n            <i\n              c8yIcon=\"times\"\n              aria-hidden=\"true\"\n            ></i>\n          </button>\n        } @else {\n          <span\n            class=\"input-group-addon\"\n            aria-hidden=\"true\"\n          >\n            <i\n              c8yIcon=\"search\"\n              aria-hidden=\"true\"\n            ></i>\n          </span>\n        }\n      </div>\n    </div>\n    <div class=\"col-sm-7 m-b-8\">\n      <div class=\"d-flex a-i-center j-c-end gap-16 text-left\">\n        <div class=\"d-flex a-i-center flex-grow\">\n          <label\n            class=\"m-b-0 m-r-8 flex-no-shrink\"\n            id=\"icon-category-filter-label\"\n            translate\n            >Collection</label\n          >\n          <c8y-select\n            class=\"flex-grow\"\n            [attr.aria-labelledby]=\"'icon-category-filter-label'\"\n            [items]=\"availableIconCategoryItems$ | async\"\n            [selected]=\"selectedIconCategory$ | async\"\n            [canDeselect]=\"true\"\n            (onSelect)=\"onCategoryFilterChanged($any($event).value)\"\n            (onDeselect)=\"onCategoryFilterChanged(allIconCategory)\"\n          ></c8y-select>\n        </div>\n\n        @if (isAdmin()) {\n          <button\n            class=\"btn btn-clean p-l-8 p-r-8 flex-no-shrink\"\n            [title]=\"'Add custom icon' | translate\"\n            [attr.aria-label]=\"'Add custom icon' | translate\"\n            type=\"button\"\n            (click)=\"onAddIconClicked()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"plus-circle\"\n              aria-hidden=\"true\"\n            ></i>\n            <span translate>Add icon</span>\n          </button>\n          <button\n            class=\"btn btn-clean flex-no-shrink\"\n            [attr.aria-label]=\"'Import icons from ZIP' | translate\"\n            [tooltip]=\"'Import icons from ZIP' | translate\"\n            placement=\"top\"\n            container=\"body\"\n            type=\"button\"\n            [delay]=\"500\"\n            [adaptivePosition]=\"false\"\n            (click)=\"onImportClicked()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"data-import\"\n              aria-hidden=\"true\"\n            ></i>\n            <span>{{ 'Import`verb, imports icons from a ZIP file`' | translate }}</span>\n          </button>\n          @if (hasCustomIcons()) {\n            <button\n              class=\"btn btn-clean flex-no-shrink\"\n              [attr.aria-label]=\"'Export custom icons as ZIP' | translate\"\n              [tooltip]=\"'Export custom icons as ZIP' | translate\"\n              placement=\"top\"\n              container=\"body\"\n              type=\"button\"\n              [delay]=\"500\"\n              [adaptivePosition]=\"false\"\n              (click)=\"onExportClicked()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"data-export\"\n                aria-hidden=\"true\"\n              ></i>\n              <span>{{ 'Export`verb, exports custom icons as a ZIP file`' | translate }}</span>\n            </button>\n          }\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (isSaving()) {\n    <div\n      class=\"p-absolute m-t-4 p-b-4 overflow-hidden\"\n      style=\"left: 0; right: 0\"\n      [attr.aria-label]=\"'Saving\u2026' | translate\"\n      role=\"status\"\n    >\n      <c8y-loading layout=\"page\"></c8y-loading>\n    </div>\n  }\n</div>\n\n<div class=\"p-16\">\n  @if (iconsLoading()) {\n    <div\n      class=\"d-flex a-i-center j-c-center p-32\"\n      [attr.aria-label]=\"'Loading icons\u2026' | translate\"\n      role=\"status\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n  } @else {\n    <p\n      class=\"sr-only\"\n      role=\"status\"\n    >\n      @if (filteredIconCount() === 0) {\n        {{ 'No icons found' | translate }}\n      } @else {\n        {{ '{{count}} icon(s) found' | translate: { count: filteredIconCount() } }}\n      }\n    </p>\n    <section\n      class=\"dtm-icon-grid\"\n      [attr.aria-label]=\"'Icon grid' | translate\"\n      [attr.aria-busy]=\"visibleDefinitions().length === 0 ? 'true' : null\"\n      role=\"region\"\n    >\n      @for (iconDefinition of visibleDefinitions(); track iconDefinition.label) {\n        <div\n          class=\"d-contents\"\n          [attr.aria-label]=\"iconDefinition.label | translate\"\n          role=\"group\"\n        >\n          <div class=\"legend form-block center grid__col--fullspan d-flex a-i-center gap-8\">\n            {{ iconDefinition.label | translate }}\n            @if (customCategoryLabels().has(iconDefinition.label)) {\n              <span class=\"tag tag--info m-l-4 m-t-0 m-b-0\">{{\n                'Custom`badge indicating a user-added icon category`' | translate\n              }}</span>\n            }\n          </div>\n\n          @for (icon of iconDefinition.icons; track icon[0]) {\n            @let isCustom = isCustomIcon(icon[0]);\n            @let isOverridden = isIconOverridden(icon[0]);\n            @let overriddenLabel = gettext('{{name}} (overridden)');\n            @let deleteHint = 'Select a different icon before deleting this one.' | translate;\n            <div class=\"d-contents\">\n              <div\n                class=\"dtm-icon-grid__item\"\n                [class.dtm-icon-grid__item--selected]=\"selectedIcon && icon[0] === selectedIcon\"\n                [class.dtm-icon-grid__item--overridden]=\"isOverridden\"\n              >\n                <button\n                  class=\"dtm-icon-grid__btn\"\n                  [title]=\"icon[0] | iconName\"\n                  [attr.aria-label]=\"\n                    isOverridden\n                      ? (overriddenLabel | translate: { name: icon[0] | iconName })\n                      : (icon[0] | iconName)\n                  \"\n                  [attr.aria-current]=\"selectedIcon && icon[0] === selectedIcon ? 'true' : null\"\n                  (click)=\"onIconClicked(icon)\"\n                >\n                  <i\n                    class=\"icon-40 c8y-icon-duocolor\"\n                    [c8yIcon]=\"icon[0]\"\n                    aria-hidden=\"true\"\n                  ></i>\n                  @if (showIconClass) {\n                    <small\n                      class=\"d-block text-center text-break-word\"\n                      aria-hidden=\"true\"\n                    >\n                      {{ icon[0] | iconName }}\n                    </small>\n                  }\n                </button>\n\n                @if (isOverridden) {\n                  <span\n                    class=\"dtm-icon-grid__override-marker\"\n                    [tooltip]=\"'Overridden icon' | translate\"\n                    placement=\"top\"\n                    container=\"body\"\n                    aria-hidden=\"true\"\n                    [delay]=\"500\"\n                  >\n                    <i c8yIcon=\"replace\"></i>\n                  </span>\n                }\n\n                @if (isAdmin()) {\n                  <div\n                    class=\"dtm-icon-grid__actions\"\n                    [attr.aria-label]=\"'{{name}} actions' | translate: { name: icon[0] | iconName }\"\n                    role=\"group\"\n                  >\n                    @if (isCustom) {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"\n                          'Edit {{name}}' | translate: { name: icon[0] | iconName }\n                        \"\n                        [tooltip]=\"'Edit {{name}}' | translate: { name: icon[0] | iconName }\"\n                        placement=\"top\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"$event.stopPropagation(); onEditIconClicked(icon[0])\"\n                      >\n                        <i\n                          c8yIcon=\"pencil\"\n                          aria-hidden=\"true\"\n                        ></i>\n                      </button>\n                      <span\n                        [tooltip]=\"icon[0] === selectedIcon ? deleteHint : null\"\n                        placement=\"top\"\n                        container=\"body\"\n                        [delay]=\"500\"\n                      >\n                        <button\n                          class=\"btn btn-dot btn-dot--danger m-0\"\n                          [class.disabled]=\"icon[0] === selectedIcon\"\n                          [attr.aria-label]=\"\n                            'Delete {{name}}' | translate: { name: icon[0] | iconName }\n                          \"\n                          [tooltip]=\"'Delete {{name}}' | translate: { name: icon[0] | iconName }\"\n                          placement=\"top\"\n                          container=\"body\"\n                          [attr.aria-disabled]=\"icon[0] === selectedIcon ? 'true' : null\"\n                          [attr.aria-describedby]=\"\n                            icon[0] === selectedIcon ? 'delete-hint-' + icon[0] : null\n                          \"\n                          type=\"button\"\n                          [delay]=\"500\"\n                          (click)=\"\n                            $event.stopPropagation();\n                            icon[0] === selectedIcon || onDeleteIconClicked(icon[0])\n                          \"\n                        >\n                          <i\n                            c8yIcon=\"minus-circle\"\n                            aria-hidden=\"true\"\n                          ></i>\n                        </button>\n                        @if (icon[0] === selectedIcon) {\n                          <span\n                            class=\"sr-only\"\n                            [id]=\"'delete-hint-' + icon[0]\"\n                            >{{ deleteHint }}</span\n                          >\n                        }\n                      </span>\n                    } @else {\n                      @let overrideKey =\n                        isOverridden\n                          ? gettext('Replace override for {{name}}')\n                          : gettext('Override {{name}}');\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"overrideKey | translate: { name: icon[0] | iconName }\"\n                        [tooltip]=\"overrideKey | translate: { name: icon[0] | iconName }\"\n                        placement=\"top\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"$event.stopPropagation(); onOverrideIconClicked(icon)\"\n                      >\n                        <i\n                          c8yIcon=\"replace\"\n                          aria-hidden=\"true\"\n                        ></i>\n                      </button>\n                      @if (isOverridden) {\n                        <button\n                          class=\"btn btn-dot btn-dot--danger\"\n                          [attr.aria-label]=\"\n                            'Reset override for {{name}}' | translate: { name: icon[0] | iconName }\n                          \"\n                          [tooltip]=\"\n                            'Reset override for {{name}}' | translate: { name: icon[0] | iconName }\n                          \"\n                          placement=\"top\"\n                          container=\"body\"\n                          type=\"button\"\n                          [delay]=\"500\"\n                          (click)=\"$event.stopPropagation(); onResetOverrideClicked(icon[0])\"\n                        >\n                          <i\n                            c8yIcon=\"undo\"\n                            aria-hidden=\"true\"\n                          ></i>\n                        </button>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      } @empty {\n        <c8y-ui-empty-state\n          class=\"grid__col--fullspan\"\n          icon=\"search\"\n          [title]=\"'No icons found' | translate\"\n          [subtitle]=\"\n            'Try adjusting your search or filter to find what you\\'re looking for.' | translate\n          \"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      }\n    </section>\n  }\n  <!-- end @else iconsLoading -->\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "progressLabel", "message"] }, { kind: "component", type: SelectComponent, selector: "c8y-select", inputs: ["placeholder", "items", "selected", "container", "multi", "canSelectWithSpace", "disabled", "autoClose", "insideClick", "required", "canDeselect", "name", "icon", "filterItems"], outputs: ["onSelect", "onDeselect", "onIconClick"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: IconNamePipe, name: "iconName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-icon-selector', imports: [
+            args: [{ selector: 'c8y-icon-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FormsModule,
                         IconDirective,
                         C8yTranslateDirective,
                         C8yTranslatePipe,
                         AsyncPipe,
-                        NgClass,
                         IconNamePipe,
-                        EmptyStateComponent
-                    ], template: "<div class=\"p-l-24 p-r-24 p-t-8 p-b-8 separator-bottom\">\n  <div class=\"row d-flex-sm\">\n    <div class=\"col-sm-6 m-b-8\">\n      <div\n        class=\"input-group-search input-group\"\n        style=\"width: auto\"\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          <span\n            class=\"input-group-addon pointer\"\n            (click)=\"onSearchChange('')\"\n          >\n            <i c8yIcon=\"times\"></i>\n          </span>\n        } @else {\n          <span class=\"input-group-addon\">\n            <i c8yIcon=\"search\"></i>\n          </span>\n        }\n      </div>\n    </div>\n    <div class=\"col-sm-6 m-b-8 text-right\">\n      <div class=\"d-inline-flex a-i-center text-left\">\n        <label\n          class=\"m-b-0 m-r-8 flex-no-shrink\"\n          translate\n        >\n          Filter by type\n        </label>\n        <div class=\"c8y-select-wrapper\">\n          <select\n            class=\"form-control\"\n            id=\"exampleSelect\"\n            [ngModel]=\"selectedIconCategory$ | async\"\n            (ngModelChange)=\"onCategoryFilterChanged($event)\"\n          >\n            @for (category of availableIconCategories$ | async; track category) {\n              <option [ngValue]=\"category\">\n                {{ category | translate }}\n              </option>\n            }\n          </select>\n          <span></span>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-inner-scroll\">\n  <div\n    class=\"modal-body\"\n    style=\"height: calc(100vh - 293px)\"\n  >\n    <div class=\"dtm-icon-grid\">\n      @for (iconDefinition of filteredIcons$ | async; track iconDefinition) {\n        <div class=\"d-contents\">\n          <div class=\"legend form-block center grid__col--fullspan\">\n            {{ iconDefinition.label | translate }}\n          </div>\n\n          @for (icon of iconDefinition.icons; track icon) {\n            <div class=\"d-contents\">\n              <div\n                class=\"dtm-icon-grid__item\"\n                [ngClass]=\"{\n                  'dtm-icon-grid__item--selected': selectedIcon && icon[0] === selectedIcon\n                }\"\n              >\n                <button\n                  class=\"dtm-icon-grid__btn\"\n                  [title]=\"icon[0] | iconName\"\n                  (click)=\"onIconClicked(icon)\"\n                >\n                  <i\n                    class=\"icon-40 c8y-icon-duocolor\"\n                    [c8yIcon]=\"icon[0]\"\n                  ></i>\n                  @if (showIconClass) {\n                    <small class=\"d-block text-center text-break-word\">\n                      {{ icon[0] | iconName }}\n                    </small>\n                  }\n                </button>\n              </div>\n            </div>\n          }\n        </div>\n      } @empty {\n        <c8y-ui-empty-state\n          icon=\"search\"\n          style=\"grid-column: 1 / 3\"\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    </div>\n  </div>\n</div>\n" }]
+                        EmptyStateComponent,
+                        LoadingComponent,
+                        SelectComponent,
+                        TooltipModule
+                    ], template: "<div\n  class=\"p-l-24 p-r-24 p-t-8 p-b-8 separator-bottom sticky-top\"\n  style=\"background: var(--c8y-root-component-background-default); z-index: 2\"\n>\n  <div class=\"row d-flex-sm\">\n    <div class=\"col-sm-5 m-b-8\">\n      <div\n        class=\"input-group-search input-group\"\n        style=\"width: auto\"\n      >\n        <label\n          class=\"sr-only\"\n          for=\"filter-icons\"\n          translate\n          >Filter icons</label\n        >\n        <input\n          class=\"form-control\"\n          id=\"filter-icons\"\n          placeholder=\"{{ 'Type to filter icons\u2026' | translate }}\"\n          type=\"search\"\n          [ngModel]=\"searchTerm$ | async\"\n          (ngModelChange)=\"onSearchChange($event)\"\n        />\n        @if (searchTerm$ | async) {\n          <button\n            class=\"input-group-addon\"\n            [attr.aria-label]=\"'Clear search' | translate\"\n            type=\"button\"\n            (click)=\"onSearchChange('')\"\n          >\n            <i\n              c8yIcon=\"times\"\n              aria-hidden=\"true\"\n            ></i>\n          </button>\n        } @else {\n          <span\n            class=\"input-group-addon\"\n            aria-hidden=\"true\"\n          >\n            <i\n              c8yIcon=\"search\"\n              aria-hidden=\"true\"\n            ></i>\n          </span>\n        }\n      </div>\n    </div>\n    <div class=\"col-sm-7 m-b-8\">\n      <div class=\"d-flex a-i-center j-c-end gap-16 text-left\">\n        <div class=\"d-flex a-i-center flex-grow\">\n          <label\n            class=\"m-b-0 m-r-8 flex-no-shrink\"\n            id=\"icon-category-filter-label\"\n            translate\n            >Collection</label\n          >\n          <c8y-select\n            class=\"flex-grow\"\n            [attr.aria-labelledby]=\"'icon-category-filter-label'\"\n            [items]=\"availableIconCategoryItems$ | async\"\n            [selected]=\"selectedIconCategory$ | async\"\n            [canDeselect]=\"true\"\n            (onSelect)=\"onCategoryFilterChanged($any($event).value)\"\n            (onDeselect)=\"onCategoryFilterChanged(allIconCategory)\"\n          ></c8y-select>\n        </div>\n\n        @if (isAdmin()) {\n          <button\n            class=\"btn btn-clean p-l-8 p-r-8 flex-no-shrink\"\n            [title]=\"'Add custom icon' | translate\"\n            [attr.aria-label]=\"'Add custom icon' | translate\"\n            type=\"button\"\n            (click)=\"onAddIconClicked()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"plus-circle\"\n              aria-hidden=\"true\"\n            ></i>\n            <span translate>Add icon</span>\n          </button>\n          <button\n            class=\"btn btn-clean flex-no-shrink\"\n            [attr.aria-label]=\"'Import icons from ZIP' | translate\"\n            [tooltip]=\"'Import icons from ZIP' | translate\"\n            placement=\"top\"\n            container=\"body\"\n            type=\"button\"\n            [delay]=\"500\"\n            [adaptivePosition]=\"false\"\n            (click)=\"onImportClicked()\"\n          >\n            <i\n              class=\"m-r-4\"\n              c8yIcon=\"data-import\"\n              aria-hidden=\"true\"\n            ></i>\n            <span>{{ 'Import`verb, imports icons from a ZIP file`' | translate }}</span>\n          </button>\n          @if (hasCustomIcons()) {\n            <button\n              class=\"btn btn-clean flex-no-shrink\"\n              [attr.aria-label]=\"'Export custom icons as ZIP' | translate\"\n              [tooltip]=\"'Export custom icons as ZIP' | translate\"\n              placement=\"top\"\n              container=\"body\"\n              type=\"button\"\n              [delay]=\"500\"\n              [adaptivePosition]=\"false\"\n              (click)=\"onExportClicked()\"\n            >\n              <i\n                class=\"m-r-4\"\n                c8yIcon=\"data-export\"\n                aria-hidden=\"true\"\n              ></i>\n              <span>{{ 'Export`verb, exports custom icons as a ZIP file`' | translate }}</span>\n            </button>\n          }\n        }\n      </div>\n    </div>\n  </div>\n\n  @if (isSaving()) {\n    <div\n      class=\"p-absolute m-t-4 p-b-4 overflow-hidden\"\n      style=\"left: 0; right: 0\"\n      [attr.aria-label]=\"'Saving\u2026' | translate\"\n      role=\"status\"\n    >\n      <c8y-loading layout=\"page\"></c8y-loading>\n    </div>\n  }\n</div>\n\n<div class=\"p-16\">\n  @if (iconsLoading()) {\n    <div\n      class=\"d-flex a-i-center j-c-center p-32\"\n      [attr.aria-label]=\"'Loading icons\u2026' | translate\"\n      role=\"status\"\n    >\n      <c8y-loading></c8y-loading>\n    </div>\n  } @else {\n    <p\n      class=\"sr-only\"\n      role=\"status\"\n    >\n      @if (filteredIconCount() === 0) {\n        {{ 'No icons found' | translate }}\n      } @else {\n        {{ '{{count}} icon(s) found' | translate: { count: filteredIconCount() } }}\n      }\n    </p>\n    <section\n      class=\"dtm-icon-grid\"\n      [attr.aria-label]=\"'Icon grid' | translate\"\n      [attr.aria-busy]=\"visibleDefinitions().length === 0 ? 'true' : null\"\n      role=\"region\"\n    >\n      @for (iconDefinition of visibleDefinitions(); track iconDefinition.label) {\n        <div\n          class=\"d-contents\"\n          [attr.aria-label]=\"iconDefinition.label | translate\"\n          role=\"group\"\n        >\n          <div class=\"legend form-block center grid__col--fullspan d-flex a-i-center gap-8\">\n            {{ iconDefinition.label | translate }}\n            @if (customCategoryLabels().has(iconDefinition.label)) {\n              <span class=\"tag tag--info m-l-4 m-t-0 m-b-0\">{{\n                'Custom`badge indicating a user-added icon category`' | translate\n              }}</span>\n            }\n          </div>\n\n          @for (icon of iconDefinition.icons; track icon[0]) {\n            @let isCustom = isCustomIcon(icon[0]);\n            @let isOverridden = isIconOverridden(icon[0]);\n            @let overriddenLabel = gettext('{{name}} (overridden)');\n            @let deleteHint = 'Select a different icon before deleting this one.' | translate;\n            <div class=\"d-contents\">\n              <div\n                class=\"dtm-icon-grid__item\"\n                [class.dtm-icon-grid__item--selected]=\"selectedIcon && icon[0] === selectedIcon\"\n                [class.dtm-icon-grid__item--overridden]=\"isOverridden\"\n              >\n                <button\n                  class=\"dtm-icon-grid__btn\"\n                  [title]=\"icon[0] | iconName\"\n                  [attr.aria-label]=\"\n                    isOverridden\n                      ? (overriddenLabel | translate: { name: icon[0] | iconName })\n                      : (icon[0] | iconName)\n                  \"\n                  [attr.aria-current]=\"selectedIcon && icon[0] === selectedIcon ? 'true' : null\"\n                  (click)=\"onIconClicked(icon)\"\n                >\n                  <i\n                    class=\"icon-40 c8y-icon-duocolor\"\n                    [c8yIcon]=\"icon[0]\"\n                    aria-hidden=\"true\"\n                  ></i>\n                  @if (showIconClass) {\n                    <small\n                      class=\"d-block text-center text-break-word\"\n                      aria-hidden=\"true\"\n                    >\n                      {{ icon[0] | iconName }}\n                    </small>\n                  }\n                </button>\n\n                @if (isOverridden) {\n                  <span\n                    class=\"dtm-icon-grid__override-marker\"\n                    [tooltip]=\"'Overridden icon' | translate\"\n                    placement=\"top\"\n                    container=\"body\"\n                    aria-hidden=\"true\"\n                    [delay]=\"500\"\n                  >\n                    <i c8yIcon=\"replace\"></i>\n                  </span>\n                }\n\n                @if (isAdmin()) {\n                  <div\n                    class=\"dtm-icon-grid__actions\"\n                    [attr.aria-label]=\"'{{name}} actions' | translate: { name: icon[0] | iconName }\"\n                    role=\"group\"\n                  >\n                    @if (isCustom) {\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"\n                          'Edit {{name}}' | translate: { name: icon[0] | iconName }\n                        \"\n                        [tooltip]=\"'Edit {{name}}' | translate: { name: icon[0] | iconName }\"\n                        placement=\"top\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"$event.stopPropagation(); onEditIconClicked(icon[0])\"\n                      >\n                        <i\n                          c8yIcon=\"pencil\"\n                          aria-hidden=\"true\"\n                        ></i>\n                      </button>\n                      <span\n                        [tooltip]=\"icon[0] === selectedIcon ? deleteHint : null\"\n                        placement=\"top\"\n                        container=\"body\"\n                        [delay]=\"500\"\n                      >\n                        <button\n                          class=\"btn btn-dot btn-dot--danger m-0\"\n                          [class.disabled]=\"icon[0] === selectedIcon\"\n                          [attr.aria-label]=\"\n                            'Delete {{name}}' | translate: { name: icon[0] | iconName }\n                          \"\n                          [tooltip]=\"'Delete {{name}}' | translate: { name: icon[0] | iconName }\"\n                          placement=\"top\"\n                          container=\"body\"\n                          [attr.aria-disabled]=\"icon[0] === selectedIcon ? 'true' : null\"\n                          [attr.aria-describedby]=\"\n                            icon[0] === selectedIcon ? 'delete-hint-' + icon[0] : null\n                          \"\n                          type=\"button\"\n                          [delay]=\"500\"\n                          (click)=\"\n                            $event.stopPropagation();\n                            icon[0] === selectedIcon || onDeleteIconClicked(icon[0])\n                          \"\n                        >\n                          <i\n                            c8yIcon=\"minus-circle\"\n                            aria-hidden=\"true\"\n                          ></i>\n                        </button>\n                        @if (icon[0] === selectedIcon) {\n                          <span\n                            class=\"sr-only\"\n                            [id]=\"'delete-hint-' + icon[0]\"\n                            >{{ deleteHint }}</span\n                          >\n                        }\n                      </span>\n                    } @else {\n                      @let overrideKey =\n                        isOverridden\n                          ? gettext('Replace override for {{name}}')\n                          : gettext('Override {{name}}');\n                      <button\n                        class=\"btn btn-dot\"\n                        [attr.aria-label]=\"overrideKey | translate: { name: icon[0] | iconName }\"\n                        [tooltip]=\"overrideKey | translate: { name: icon[0] | iconName }\"\n                        placement=\"top\"\n                        container=\"body\"\n                        type=\"button\"\n                        [delay]=\"500\"\n                        (click)=\"$event.stopPropagation(); onOverrideIconClicked(icon)\"\n                      >\n                        <i\n                          c8yIcon=\"replace\"\n                          aria-hidden=\"true\"\n                        ></i>\n                      </button>\n                      @if (isOverridden) {\n                        <button\n                          class=\"btn btn-dot btn-dot--danger\"\n                          [attr.aria-label]=\"\n                            'Reset override for {{name}}' | translate: { name: icon[0] | iconName }\n                          \"\n                          [tooltip]=\"\n                            'Reset override for {{name}}' | translate: { name: icon[0] | iconName }\n                          \"\n                          placement=\"top\"\n                          container=\"body\"\n                          type=\"button\"\n                          [delay]=\"500\"\n                          (click)=\"$event.stopPropagation(); onResetOverrideClicked(icon[0])\"\n                        >\n                          <i\n                            c8yIcon=\"undo\"\n                            aria-hidden=\"true\"\n                          ></i>\n                        </button>\n                      }\n                    }\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      } @empty {\n        <c8y-ui-empty-state\n          class=\"grid__col--fullspan\"\n          icon=\"search\"\n          [title]=\"'No icons found' | translate\"\n          [subtitle]=\"\n            'Try adjusting your search or filter to find what you\\'re looking for.' | translate\n          \"\n          [horizontal]=\"true\"\n        ></c8y-ui-empty-state>\n      }\n    </section>\n  }\n  <!-- end @else iconsLoading -->\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { iconCategoriesToExclude: [{
                 type: Input
             }], showIconClass: [{
@@ -101,9 +1568,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             }] } });
 
 class IconSelectorModalComponent {
-    constructor(bsModal) {
-        this.bsModal = bsModal;
+    constructor() {
         this.title = gettext('Select icon');
+        this.selectionExplicitlySet = false;
         this.saveButtonLabel = gettext('Select');
         this.iconCategoriesToExclude = [];
         this.showIconClass = true;
@@ -111,30 +1578,40 @@ class IconSelectorModalComponent {
             this.save = resolve;
             this.cancel = reject;
         });
+        this.bsModal = inject(BsModalRef);
+        this.cdr = inject(ChangeDetectorRef);
     }
     close() {
         this.bsModal.hide();
         this.cancel();
     }
     saveChanges() {
+        if (!this.selectionExplicitlySet)
+            return;
         this.bsModal.hide();
         this.save(this.currentSelection);
     }
     selectionChange(newSelection) {
         this.currentSelection = newSelection;
+        this.selectionExplicitlySet = true;
+        this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorModalComponent, deps: [{ token: i1$1.BsModalRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: IconSelectorModalComponent, isStandalone: true, selector: "c8y-icon-selector-modal", ngImport: i0, template: "<div class=\"modal-header\">\n  <div id=\"modal-title\" class=\"modal-title h4\">{{ title | translate }}</div>\n</div>\n<div id=\"modal-body\">\n  <c8y-icon-selector\n    (onSelect)=\"selectionChange($event)\"\n    [selectedIcon]=\"currentSelection\"\n    [iconCategoriesToExclude]=\"iconCategoriesToExclude\"\n    [showIconClass]=\"showIconClass\"\n  ></c8y-icon-selector>\n</div>\n<div class=\"modal-footer separator text-center\">\n  <button class=\"btn btn-default\" (click)=\"close()\">\n    {{ 'Cancel' | translate }}\n  </button>\n  <button class=\"btn btn-primary\" [disabled]=\"!currentSelection\" (click)=\"saveChanges()\">\n    {{ saveButtonLabel | translate }}\n  </button>\n</div>\n", dependencies: [{ kind: "component", type: IconSelectorComponent, selector: "c8y-icon-selector", inputs: ["iconCategoriesToExclude", "showIconClass", "selectedIcon"], outputs: ["onSelect"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: IconSelectorModalComponent, isStandalone: true, selector: "c8y-icon-selector-modal", ngImport: i0, template: "<c8y-modal\n  [title]=\"title | translate\"\n  (onDismiss)=\"close()\"\n  (onClose)=\"saveChanges()\"\n  headerClasses=\"text-center\"\n  [disabled]=\"!selectionExplicitlySet\"\n  [labels]=\"{ cancel: 'Cancel', ok: saveButtonLabel | translate }\"\n>\n  <c8y-icon-selector\n    [selectedIcon]=\"currentSelection\"\n    [iconCategoriesToExclude]=\"iconCategoriesToExclude\"\n    [showIconClass]=\"showIconClass\"\n    (onSelect)=\"selectionChange($event)\"\n  ></c8y-icon-selector>\n</c8y-modal>\n", dependencies: [{ kind: "component", type: IconSelectorComponent, selector: "c8y-icon-selector", inputs: ["iconCategoriesToExclude", "showIconClass", "selectedIcon"], outputs: ["onSelect"] }, { kind: "component", type: ModalComponent, selector: "c8y-modal", inputs: ["disabled", "close", "dismiss", "title", "body", "customFooter", "headerClasses", "labels"], outputs: ["onDismiss", "onClose"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-icon-selector-modal', imports: [IconSelectorComponent, C8yTranslatePipe], template: "<div class=\"modal-header\">\n  <div id=\"modal-title\" class=\"modal-title h4\">{{ title | translate }}</div>\n</div>\n<div id=\"modal-body\">\n  <c8y-icon-selector\n    (onSelect)=\"selectionChange($event)\"\n    [selectedIcon]=\"currentSelection\"\n    [iconCategoriesToExclude]=\"iconCategoriesToExclude\"\n    [showIconClass]=\"showIconClass\"\n  ></c8y-icon-selector>\n</div>\n<div class=\"modal-footer separator text-center\">\n  <button class=\"btn btn-default\" (click)=\"close()\">\n    {{ 'Cancel' | translate }}\n  </button>\n  <button class=\"btn btn-primary\" [disabled]=\"!currentSelection\" (click)=\"saveChanges()\">\n    {{ saveButtonLabel | translate }}\n  </button>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.BsModalRef }] });
+            args: [{ selector: 'c8y-icon-selector-modal', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconSelectorComponent, C8yTranslatePipe, ModalComponent], template: "<c8y-modal\n  [title]=\"title | translate\"\n  (onDismiss)=\"close()\"\n  (onClose)=\"saveChanges()\"\n  headerClasses=\"text-center\"\n  [disabled]=\"!selectionExplicitlySet\"\n  [labels]=\"{ cancel: 'Cancel', ok: saveButtonLabel | translate }\"\n>\n  <c8y-icon-selector\n    [selectedIcon]=\"currentSelection\"\n    [iconCategoriesToExclude]=\"iconCategoriesToExclude\"\n    [showIconClass]=\"showIconClass\"\n    (onSelect)=\"selectionChange($event)\"\n  ></c8y-icon-selector>\n</c8y-modal>\n" }]
+        }] });
 
 class IconSelectorService {
     constructor(modal) {
         this.modal = modal;
     }
+    /**
+     * Opens the icon selector modal. Resolves with the selected icon CSS class string.
+     * Rejects when the user dismisses without selecting.
+     */
     selectIcon(initialState = {}) {
         const modal = this.modal.show(IconSelectorModalComponent, {
             ignoreBackdropClick: true,
@@ -170,16 +1647,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     </c8y-icon-selector-wrapper>
  * ```
  */
+// OnPush is required here: ControlValueAccessor's writeValue() is called by Angular forms outside
+// the component's CD cycle, so markForCheck() must be used to schedule a check when the value changes.
 class IconSelectorWrapperComponent {
-    constructor(iconSelector, gainsightService) {
-        this.iconSelector = iconSelector;
-        this.gainsightService = gainsightService;
+    constructor() {
         this.canRemoveIcon = false;
         /**
          * The displayed icon size, the value has to be multiple of 8.
          */
         this.iconSize = 32;
         this.onSelect = new EventEmitter();
+        this.iconSelector = inject(IconSelectorService);
+        this.gainsightService = inject(GainsightService);
+        this.cdr = inject(ChangeDetectorRef);
         /**
          * @ignore
          */
@@ -192,6 +1672,7 @@ class IconSelectorWrapperComponent {
      */
     writeValue(icon) {
         this.selectedIcon = icon;
+        this.cdr.markForCheck();
     }
     /**
      * @ignore
@@ -212,44 +1693,45 @@ class IconSelectorWrapperComponent {
     }
     async openIconSelector() {
         try {
-            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ICON_SELECTOR.EVENTS.ICON_SELECTOR, {
-                component: PRODUCT_EXPERIENCE_ICON_SELECTOR.COMPONENTS.ICON_SELECTOR_WRAPPER_COMPONENT,
-                action: PRODUCT_EXPERIENCE_ICON_SELECTOR.ACTIONS.OPEN_ICON_SELECTOR
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ICON_SELECTOR$1.EVENTS.ICON_SELECTOR, {
+                component: PRODUCT_EXPERIENCE_ICON_SELECTOR$1.COMPONENTS.ICON_SELECTOR_WRAPPER_COMPONENT,
+                action: PRODUCT_EXPERIENCE_ICON_SELECTOR$1.ACTIONS.OPEN_ICON_SELECTOR
             });
             const icon = await this.iconSelector.selectIcon({
                 currentSelection: this.selectedIcon
             });
             this.onChange(icon);
             this.selectedIcon = icon;
+            this.cdr.markForCheck();
             this.onSelect.emit(icon);
-            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ICON_SELECTOR.EVENTS.ICON_SELECTOR, {
-                component: PRODUCT_EXPERIENCE_ICON_SELECTOR.COMPONENTS.ICON_SELECTOR_WRAPPER_COMPONENT,
-                action: PRODUCT_EXPERIENCE_ICON_SELECTOR.ACTIONS.ICON_SELECTED
+            this.gainsightService.triggerEvent(PRODUCT_EXPERIENCE_ICON_SELECTOR$1.EVENTS.ICON_SELECTOR, {
+                component: PRODUCT_EXPERIENCE_ICON_SELECTOR$1.COMPONENTS.ICON_SELECTOR_WRAPPER_COMPONENT,
+                action: PRODUCT_EXPERIENCE_ICON_SELECTOR$1.ACTIONS.ICON_SELECTED
             });
         }
         catch {
             // nothing to do
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorWrapperComponent, deps: [{ token: IconSelectorService }, { token: i2.GainsightService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: IconSelectorWrapperComponent, isStandalone: true, selector: "c8y-icon-selector-wrapper", inputs: { canRemoveIcon: "canRemoveIcon", selectedIcon: "selectedIcon", iconSize: "iconSize" }, outputs: { onSelect: "onSelect" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => IconSelectorWrapperComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"d-flex a-i-center j-c-center p-relative\">\n  @if (selectedIcon) {\n    <div class=\"icon-{{ iconSize }} text-center fit-w fit-h\">\n      <i\n        class=\"c8y-icon-duocolor\"\n        [c8yIcon]=\"selectedIcon\"\n      ></i>\n    </div>\n  }\n\n  @if (!selectedIcon) {\n    <div\n      class=\"icon-{{ iconSize }} text-muted text-center a-s-stretch fit-w\"\n      style=\"border: 2px dashed var(--c8y-root-component-border-color)\"\n    >\n      <span class=\"d-flex a-i-center j-c-center text-12 fit-h\">\n        <em>{{ 'Auto' | translate }}</em>\n      </span>\n    </div>\n  }\n  <div class=\"showOnHover d-flex j-c-center a-i-center p-absolute fit-h fit-w\">\n    @if (!selectedIcon) {\n      <button\n        class=\"btn btn-clean btn-icon btn-sm m-0\"\n        title=\"{{ 'Select icon' | translate }}\"\n        [attr.aria-label]=\"'Select icon' | translate\"\n        type=\"button\"\n        (click)=\"openIconSelector()\"\n      >\n        {{ 'Select' | translate }}\n      </button>\n    }\n    @if (selectedIcon) {\n      <button\n        class=\"btn-dot btn-icon m-0 fit-h\"\n        [attr.aria-label]=\"'Change icon' | translate\"\n        tooltip=\"{{ 'Change icon' | translate }}\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"openIconSelector()\"\n      >\n        <i [c8yIcon]=\"'replace'\"></i>\n      </button>\n    }\n    @if (selectedIcon && canRemoveIcon) {\n      <button\n        class=\"btn-dot btn-dot--danger btn-icon fit-h m-0\"\n        [attr.aria-label]=\"'Remove icon and use default icon' | translate\"\n        tooltip=\"{{ 'Remove icon and use default icon' | translate }}\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"removeIcon()\"\n      >\n        <i [c8yIcon]=\"'minus-circle'\"></i>\n      </button>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
+        ], ngImport: i0, template: "<div class=\"d-flex a-i-center j-c-center p-relative\">\n  @if (selectedIcon) {\n    <div class=\"icon-{{ iconSize }} text-center fit-w fit-h\">\n      <i\n        class=\"c8y-icon-duocolor\"\n        [c8yIcon]=\"selectedIcon\"\n        aria-hidden=\"true\"\n      ></i>\n    </div>\n  }\n\n  @if (!selectedIcon) {\n    <div\n      class=\"icon-{{ iconSize }} text-muted text-center a-s-stretch fit-w\"\n      style=\"border: 2px dashed var(--c8y-root-component-border-color)\"\n    >\n      <span class=\"d-flex a-i-center j-c-center text-12 fit-h\">\n        <em>{{ 'Auto`icon-selector: automatic / default icon`' | translate }}</em>\n      </span>\n    </div>\n  }\n  <div class=\"showOnHover d-flex j-c-center a-i-center p-absolute fit-h fit-w\">\n    @if (!selectedIcon) {\n      <button\n        class=\"btn btn-clean btn-icon btn-sm m-0\"\n        title=\"{{ 'Select icon' | translate }}\"\n        [attr.aria-label]=\"'Select icon' | translate\"\n        type=\"button\"\n        (click)=\"openIconSelector()\"\n      >\n        {{ 'Select' | translate }}\n      </button>\n    }\n    @if (selectedIcon) {\n      <button\n        class=\"btn-dot btn-icon m-0 fit-h\"\n        [attr.aria-label]=\"'Change icon' | translate\"\n        tooltip=\"{{ 'Change icon' | translate }}\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"openIconSelector()\"\n      >\n        <i\n          [c8yIcon]=\"'replace'\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n    @if (selectedIcon && canRemoveIcon) {\n      <button\n        class=\"btn-dot btn-dot--danger btn-icon fit-h m-0\"\n        [attr.aria-label]=\"'Remove icon and use default icon' | translate\"\n        tooltip=\"{{ 'Remove icon and use default icon' | translate }}\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"removeIcon()\"\n      >\n        <i\n          [c8yIcon]=\"'trash'\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-icon-selector-wrapper', providers: [
+            args: [{ selector: 'c8y-icon-selector-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => IconSelectorWrapperComponent),
                             multi: true
                         }
-                    ], imports: [NgIf, IconDirective, TooltipDirective, C8yTranslatePipe], template: "<div class=\"d-flex a-i-center j-c-center p-relative\">\n  @if (selectedIcon) {\n    <div class=\"icon-{{ iconSize }} text-center fit-w fit-h\">\n      <i\n        class=\"c8y-icon-duocolor\"\n        [c8yIcon]=\"selectedIcon\"\n      ></i>\n    </div>\n  }\n\n  @if (!selectedIcon) {\n    <div\n      class=\"icon-{{ iconSize }} text-muted text-center a-s-stretch fit-w\"\n      style=\"border: 2px dashed var(--c8y-root-component-border-color)\"\n    >\n      <span class=\"d-flex a-i-center j-c-center text-12 fit-h\">\n        <em>{{ 'Auto' | translate }}</em>\n      </span>\n    </div>\n  }\n  <div class=\"showOnHover d-flex j-c-center a-i-center p-absolute fit-h fit-w\">\n    @if (!selectedIcon) {\n      <button\n        class=\"btn btn-clean btn-icon btn-sm m-0\"\n        title=\"{{ 'Select icon' | translate }}\"\n        [attr.aria-label]=\"'Select icon' | translate\"\n        type=\"button\"\n        (click)=\"openIconSelector()\"\n      >\n        {{ 'Select' | translate }}\n      </button>\n    }\n    @if (selectedIcon) {\n      <button\n        class=\"btn-dot btn-icon m-0 fit-h\"\n        [attr.aria-label]=\"'Change icon' | translate\"\n        tooltip=\"{{ 'Change icon' | translate }}\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"openIconSelector()\"\n      >\n        <i [c8yIcon]=\"'replace'\"></i>\n      </button>\n    }\n    @if (selectedIcon && canRemoveIcon) {\n      <button\n        class=\"btn-dot btn-dot--danger btn-icon fit-h m-0\"\n        [attr.aria-label]=\"'Remove icon and use default icon' | translate\"\n        tooltip=\"{{ 'Remove icon and use default icon' | translate }}\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"removeIcon()\"\n      >\n        <i [c8yIcon]=\"'minus-circle'\"></i>\n      </button>\n    }\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: IconSelectorService }, { type: i2.GainsightService }], propDecorators: { canRemoveIcon: [{
+                    ], imports: [IconDirective, TooltipDirective, C8yTranslatePipe], template: "<div class=\"d-flex a-i-center j-c-center p-relative\">\n  @if (selectedIcon) {\n    <div class=\"icon-{{ iconSize }} text-center fit-w fit-h\">\n      <i\n        class=\"c8y-icon-duocolor\"\n        [c8yIcon]=\"selectedIcon\"\n        aria-hidden=\"true\"\n      ></i>\n    </div>\n  }\n\n  @if (!selectedIcon) {\n    <div\n      class=\"icon-{{ iconSize }} text-muted text-center a-s-stretch fit-w\"\n      style=\"border: 2px dashed var(--c8y-root-component-border-color)\"\n    >\n      <span class=\"d-flex a-i-center j-c-center text-12 fit-h\">\n        <em>{{ 'Auto`icon-selector: automatic / default icon`' | translate }}</em>\n      </span>\n    </div>\n  }\n  <div class=\"showOnHover d-flex j-c-center a-i-center p-absolute fit-h fit-w\">\n    @if (!selectedIcon) {\n      <button\n        class=\"btn btn-clean btn-icon btn-sm m-0\"\n        title=\"{{ 'Select icon' | translate }}\"\n        [attr.aria-label]=\"'Select icon' | translate\"\n        type=\"button\"\n        (click)=\"openIconSelector()\"\n      >\n        {{ 'Select' | translate }}\n      </button>\n    }\n    @if (selectedIcon) {\n      <button\n        class=\"btn-dot btn-icon m-0 fit-h\"\n        [attr.aria-label]=\"'Change icon' | translate\"\n        tooltip=\"{{ 'Change icon' | translate }}\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"openIconSelector()\"\n      >\n        <i\n          [c8yIcon]=\"'replace'\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n    @if (selectedIcon && canRemoveIcon) {\n      <button\n        class=\"btn-dot btn-dot--danger btn-icon fit-h m-0\"\n        [attr.aria-label]=\"'Remove icon and use default icon' | translate\"\n        tooltip=\"{{ 'Remove icon and use default icon' | translate }}\"\n        placement=\"top\"\n        container=\"body\"\n        type=\"button\"\n        [delay]=\"500\"\n        (click)=\"removeIcon()\"\n      >\n        <i\n          [c8yIcon]=\"'trash'\"\n          aria-hidden=\"true\"\n        ></i>\n      </button>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { canRemoveIcon: [{
                 type: Input
             }], selectedIcon: [{
                 type: Input
@@ -261,8 +1743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 class IconSelectorModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorModule, imports: [CommonModule,
-            FormsModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorModule, imports: [FormsModule,
             DropAreaModule,
             TooltipModule,
             IconSelectorComponent,
@@ -272,8 +1753,7 @@ class IconSelectorModule {
             IconSelectorModalComponent,
             IconNamePipe,
             IconSelectorWrapperComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorModule, imports: [CommonModule,
-            FormsModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: IconSelectorModule, imports: [FormsModule,
             DropAreaModule,
             TooltipModule,
             IconSelectorComponent,
@@ -283,7 +1763,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             type: NgModule,
             args: [{
                     imports: [
-                        CommonModule,
                         FormsModule,
                         DropAreaModule,
                         TooltipModule,
@@ -305,5 +1784,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { IconNamePipe, IconSelectorComponent, IconSelectorModalComponent, IconSelectorModule, IconSelectorService, IconSelectorWrapperComponent };
+export { AddCustomIconModalService, CustomIconRegistryService, CustomIconStorageService, IconNamePipe, IconSelectorComponent, IconSelectorModalComponent, IconSelectorModule, IconSelectorService, IconSelectorWrapperComponent, ImportCustomIconsModalService, PRODUCT_EXPERIENCE_ICON_SELECTOR, SvgSanitizerService };
 //# sourceMappingURL=c8y-ngx-components-icon-selector.mjs.map