@koobiq/components 19.6.0 → 19.8.0

package/fesm2022/koobiq-components-icon.mjs

@@ -1,8 +1,280 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, ChangeDetectorRef, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, effect, booleanAttribute, NgModule } from '@angular/core';
-import { toObservable } from '@angular/core/rxjs-interop';
+import { InjectionToken, inject, SecurityContext, Injectable, ElementRef, ChangeDetectorRef, DestroyRef, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, effect, booleanAttribute, NgModule } from '@angular/core';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 import { KbqColorDirective, KBQ_FORM_FIELD_REF } from '@koobiq/components/core';
+import { of, throwError, ReplaySubject, EMPTY } from 'rxjs';
+import { map, catchError, share, finalize, switchMap } from 'rxjs/operators';
+import { DOCUMENT } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { DomSanitizer } from '@angular/platform-browser';
+
+const KBQ_ICONS_CONFIG = new InjectionToken('KBQ_ICONS_CONFIG');
+/**
+ * Multi-valued injection token for icon resolver functions.
+ * Resolvers are tried in registration order; the first non-null result wins.
+ */
+const KBQ_ICON_RESOLVER = new InjectionToken('KBQ_ICON_RESOLVER');
+/** Configures the icon registry to load icons from one or more SVG sprite assets. */
+function kbqIconsProvider(...sprites) {
+    return { provide: KBQ_ICONS_CONFIG, useValue: sprites };
+}
+/**
+ * Registers a resolver function that maps icon names to SVG strings or URLs.
+ * Multiple resolvers can be registered; they are tried in registration order.
+ */
+function kbqIconsResolverProvider(resolver) {
+    return { provide: KBQ_ICON_RESOLVER, useValue: resolver, multi: true };
+}
+/**
+ * Registers a name→SVG/URL dictionary as an icon resolver.
+ * Values starting with `<` are treated as inline SVG (no HTTP request).
+ * All other values are treated as URLs and fetched at runtime.
+ *
+ * @example
+ * kbqIconsDictProvider({ 'chevron-down-s_16': '<svg>...</svg>' })
+ */
+function kbqIconsDictProvider(dict) {
+    return kbqIconsResolverProvider((name) => dict[name] ?? null);
+}
+
+function iconKey(namespace, name) {
+    return namespace ? `${namespace}:${name}` : name;
+}
+function cloneSvg(svg) {
+    return svg.cloneNode(true);
+}
+class KbqIconRegistry {
+    constructor() {
+        this.sanitizer = inject(DomSanitizer);
+        this.document = inject(DOCUMENT);
+        this.httpClient = inject(HttpClient, { optional: true });
+        this.iconsConfig = inject(KBQ_ICONS_CONFIG, { optional: true });
+        this.resolvers = inject(KBQ_ICON_RESOLVER, { optional: true }) ?? [];
+        /** Individual icon configs, keyed by "namespace:name". */
+        this.iconConfigs = new Map();
+        /** Icon-set configs per namespace. */
+        this.iconSetConfigs = new Map();
+        /** In-progress URL fetches to dedupe concurrent requests. */
+        this.inProgressUrlFetches = new Map();
+        /** Cached parsed SVG sets, keyed by URL string. */
+        this.cachedIconSets = new Map();
+        this.registerIconSet();
+    }
+    /** Registers an SVG icon by URL in the default namespace. */
+    addSvgIcon(name, url, options) {
+        this.addSvgIconInNamespace('', name, url, options);
+    }
+    /** Registers an SVG icon from an inline HTML string in the default namespace. */
+    addSvgIconLiteral(name, literal, options) {
+        this.addSvgIconLiteralInNamespace('', name, literal, options);
+    }
+    /** Registers an SVG icon by URL under the given namespace. */
+    addSvgIconInNamespace(namespace, name, url, options) {
+        this.cacheIcon(namespace, name, { url, svgText: null, options, svgElement: null });
+    }
+    /** Registers an SVG icon from an inline HTML string under the given namespace. */
+    addSvgIconLiteralInNamespace(namespace, name, literal, options) {
+        const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, literal);
+        if (!sanitized) {
+            throw Error(`KbqIconRegistry: literal for icon "${iconKey(namespace, name)}" sanitized to empty string.`);
+        }
+        this.cacheIcon(namespace, name, {
+            url: null,
+            svgText: this.sanitizer.bypassSecurityTrustHtml(sanitized),
+            options,
+            svgElement: null
+        });
+    }
+    /** Registers an SVG sprite file in the default namespace. Icons are looked up by their `symbol id`. */
+    addSvgIconSet(url, options) {
+        this.addSvgIconSetInNamespace('', url, options);
+    }
+    /** Registers an SVG sprite file under the given namespace. Duplicate URLs are silently ignored. */
+    addSvgIconSetInNamespace(namespace, url, options) {
+        const urlStr = this.sanitizer.sanitize(SecurityContext.RESOURCE_URL, url) ?? '';
+        const sets = this.iconSetConfigs.get(namespace) ?? [];
+        const alreadyRegistered = sets.some((set) => this.sanitizer.sanitize(SecurityContext.RESOURCE_URL, set.url) === urlStr);
+        if (alreadyRegistered)
+            return;
+        const config = { url, svgText: null, options, svgElement: null };
+        sets.push(config);
+        this.iconSetConfigs.set(namespace, sets);
+    }
+    /**
+     * Emits a cloned SVGElement for the given name.
+     * Accepts "namespace:name" syntax.
+     */
+    getNamedSvgIcon(name, namespace = '') {
+        let resolvedNs = namespace;
+        let resolvedName = name;
+        if (resolvedName.trimStart().startsWith('<')) {
+            const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, resolvedName) ?? '';
+            return of(this.svgElementFromText(sanitized));
+        }
+        const colonIndex = name.indexOf(':');
+        if (colonIndex !== -1) {
+            resolvedNs = name.slice(0, colonIndex);
+            resolvedName = name.slice(colonIndex + 1);
+        }
+        const key = iconKey(resolvedNs, resolvedName);
+        const iconConfig = this.iconConfigs.get(key);
+        if (iconConfig) {
+            return this.loadIcon(iconConfig, resolvedName);
+        }
+        for (const resolver of this.resolvers) {
+            const result = resolver(resolvedName);
+            if (result == null)
+                continue;
+            const config = {
+                url: null,
+                svgText: null,
+                svgElement: null,
+                options: undefined
+            };
+            if (result.trimStart().startsWith('<')) {
+                const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, result) ?? '';
+                config.svgText = this.sanitizer.bypassSecurityTrustHtml(sanitized);
+            }
+            else {
+                config.url = this.sanitizer.bypassSecurityTrustResourceUrl(result);
+            }
+            this.iconConfigs.set(key, config);
+            return this.loadIcon(config, resolvedName);
+        }
+        const sets = this.iconSetConfigs.get(resolvedNs);
+        if (sets?.length) {
+            return this.loadIconFromSets(resolvedName, sets);
+        }
+        return throwError(() => Error(`KbqIconRegistry: no icon registered for "${key}".`));
+    }
+    cacheIcon(namespace, name, config) {
+        this.iconConfigs.set(iconKey(namespace, name), config);
+        return this;
+    }
+    loadIcon(config, name) {
+        if (config.svgElement) {
+            return of(cloneSvg(config.svgElement));
+        }
+        if (config.svgText) {
+            const svg = this.svgElementFromText(config.svgText, config.options);
+            config.svgElement = svg;
+            return of(cloneSvg(svg));
+        }
+        if (config.url) {
+            return this.fetchUrl(config.url, config.options?.withCredentials).pipe(map((text) => {
+                const svg = this.svgElementFromText(text, config.options);
+                config.svgElement = svg;
+                return cloneSvg(svg);
+            }));
+        }
+        return throwError(() => Error(`KbqIconRegistry: icon "${name}" has neither URL nor literal.`));
+    }
+    registerIconSet() {
+        if (!this.iconsConfig)
+            return;
+        for (const config of this.iconsConfig) {
+            const url = this.sanitizer.bypassSecurityTrustResourceUrl(config.spriteUrl);
+            if (config.namespace) {
+                this.addSvgIconSetInNamespace(config.namespace, url);
+            }
+            else {
+                this.addSvgIconSet(url);
+            }
+        }
+    }
+    loadIconFromSets(name, sets) {
+        const sources = sets
+            .slice()
+            .reverse()
+            .map((set) => this.loadIconSet(set));
+        const tryNext = (index) => {
+            if (index >= sources.length) {
+                return throwError(() => Error(`KbqIconRegistry: icon "${name}" not found in any registered icon set.`));
+            }
+            return sources[index].pipe(map((setElement) => {
+                const icon = this.extractIconFromSet(name, setElement);
+                if (!icon) {
+                    throw Error(`KbqIconRegistry: icon "${name}" not found in set.`);
+                }
+                return icon;
+            }), catchError(() => tryNext(index + 1)));
+        };
+        return tryNext(0);
+    }
+    loadIconSet(config) {
+        if (config.svgElement) {
+            return of(config.svgElement);
+        }
+        if (!config.url) {
+            return throwError(() => Error('KbqIconRegistry: icon set has no URL.'));
+        }
+        const urlStr = this.sanitizer.sanitize(SecurityContext.RESOURCE_URL, config.url);
+        if (!urlStr) {
+            return throwError(() => Error('KbqIconRegistry: icon set URL failed sanitization.'));
+        }
+        if (this.cachedIconSets.has(urlStr)) {
+            config.svgElement = this.cachedIconSets.get(urlStr);
+            return of(config.svgElement);
+        }
+        return this.fetchUrl(config.url, config.options?.withCredentials).pipe(map((text) => {
+            const svg = this.svgElementFromText(text, config.options);
+            config.svgElement = svg;
+            this.cachedIconSets.set(urlStr, svg);
+            return svg;
+        }));
+    }
+    extractIconFromSet(name, setElement) {
+        const symbol = setElement.querySelector(`#${name}`);
+        if (!symbol)
+            return null;
+        const svg = this.document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        const viewBox = symbol.getAttribute('viewBox') || setElement.getAttribute('viewBox') || '0 0 24 24';
+        svg.setAttribute('viewBox', viewBox);
+        svg.setAttribute('aria-hidden', 'true');
+        svg.setAttribute('focusable', 'false');
+        for (const child of Array.from(symbol.childNodes)) {
+            svg.appendChild(child.cloneNode(true));
+        }
+        return svg;
+    }
+    svgElementFromText(text, options) {
+        const div = this.document.createElement('div');
+        div.innerHTML = text;
+        const svg = div.querySelector('svg');
+        if (!svg) {
+            throw Error('KbqIconRegistry: could not find <svg> element in icon markup.');
+        }
+        if (options?.viewBox) {
+            svg.setAttribute('viewBox', options.viewBox);
+        }
+        svg.setAttribute('aria-hidden', 'true');
+        svg.setAttribute('focusable', 'false');
+        return svg;
+    }
+    fetchUrl(url, withCredentials = false) {
+        if (!this.httpClient) {
+            throw Error('KbqIconRegistry: HttpClient is required for loading icons from URLs. ' +
+                'Provide it via provideHttpClient() or HttpClientModule.');
+        }
+        const urlStr = this.sanitizer.sanitize(SecurityContext.RESOURCE_URL, url);
+        if (!urlStr) {
+            return throwError(() => Error('KbqIconRegistry: URL failed security sanitization.'));
+        }
+        const inProgress = this.inProgressUrlFetches.get(urlStr);
+        if (inProgress)
+            return inProgress;
+        const fetch = this.httpClient.get(urlStr, { responseType: 'text', withCredentials }).pipe(share(), finalize(() => this.inProgressUrlFetches.delete(urlStr)));
+        this.inProgressUrlFetches.set(urlStr, fetch);
+        return fetch;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqIconRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqIconRegistry, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqIconRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
 
 class KbqIcon extends KbqColorDirective {
     constructor() {
@@ -10,10 +282,19 @@ class KbqIcon extends KbqColorDirective {
         this.elementRef = inject(ElementRef);
         this.formField = inject(KBQ_FORM_FIELD_REF, { optional: true });
         this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.registry = inject(KbqIconRegistry, { optional: true });
+        this.destroyRef = inject(DestroyRef);
         this.small = false;
         this.autoColor = false;
         this.hasError = false;
         this.name = 'KbqIcon';
+        /**
+         * True when icon is being rendered as inline SVG.
+         * @docs-private
+         */
+        this.svgIcon = false;
+        /** @docs-private */
+        this.svgIconName = new ReplaySubject(1);
         this.updateState = () => {
             this.hasError = this.formField?.control?.errorState;
             this.changeDetectorRef.markForCheck();
@@ -26,28 +307,69 @@ class KbqIcon extends KbqColorDirective {
         if (this.name !== 'KbqIcon') {
             return;
         }
-        const size = parseInt(this.iconName?.split('_')[1]);
+        const size = this.parseIconSize();
         if (size) {
             this.getHostElement().style.maxHeight = `${size}px`;
         }
     }
+    ngOnChanges(changes) {
+        if (changes.iconName) {
+            this.svgIconName.next(changes['iconName'].currentValue);
+        }
+    }
     ngAfterContentInit() {
         if (this.autoColor) {
             this.formField?.control?.stateChanges.subscribe(this.updateState);
             this.updateState();
         }
         this.updateMaxHeight();
+        this.svgIconName
+            .pipe(switchMap((name) => {
+            if (!this.registry || !name) {
+                this.svgIcon = false;
+                return EMPTY;
+            }
+            return this.registry.getNamedSvgIcon(name);
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (svg) => {
+                this.svgIcon = true;
+                const host = this.getHostElement();
+                // Remove any previously injected SVG.
+                const existing = host.querySelector('svg');
+                if (existing) {
+                    host.removeChild(existing);
+                }
+                const size = this.parseIconSize();
+                if (size) {
+                    svg.setAttribute('width', `${size}`);
+                    svg.setAttribute('height', `${size}`);
+                }
+                host.insertBefore(svg, host.firstChild);
+                this.changeDetectorRef.markForCheck();
+            },
+            error: () => {
+                // Icon not registered — fall through to font-class path.
+                this.svgIcon = false;
+                this.updateMaxHeight();
+                this.changeDetectorRef.markForCheck();
+            }
+        });
+    }
+    parseIconSize() {
+        const baseName = this.iconName?.includes(':') ? this.iconName.split(':')[1] : this.iconName;
+        return parseInt(baseName?.split('_').pop() ?? '');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqIcon, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: KbqIcon, isStandalone: true, selector: "[kbq-icon]", inputs: { small: "small", autoColor: "autoColor", iconName: ["kbq-icon", "iconName"] }, host: { properties: { "class": "iconName", "class.kbq-error": "color === \"error\" || hasError" }, classAttribute: "kbq kbq-icon" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-icon-rotate_90{transform:rotate(90deg)}.kbq-icon-rotate_180{transform:rotate(180deg)}.kbq-icon-rotate_270{transform:rotate(270deg)}.kbq-icon-flip-h{transform:scaleY(-1)}.kbq-icon-flip-v{transform:scaleX(-1)}.kbq-icon-flip-vh{transform:scale(-1)}.kbq-icon{color:var(--kbq-icon-contrast-color)}.kbq-icon.kbq-theme{color:var(--kbq-icon-theme-color)}.kbq-icon.kbq-contrast{color:var(--kbq-icon-contrast-color)}.kbq-icon.kbq-contrast-fade{color:var(--kbq-icon-fade-contrast-color)}.kbq-icon.kbq-error{color:var(--kbq-icon-error-color)}.kbq-icon.kbq-warning{color:var(--kbq-icon-warning-color)}.kbq-icon.kbq-success{color:var(--kbq-icon-success-color)}\n", ".kbq-icon{--kbq-icon-theme-color: var(--kbq-icon-theme);--kbq-icon-contrast-color: var(--kbq-icon-contrast);--kbq-icon-fade-contrast-color: var(--kbq-icon-contrast-fade);--kbq-icon-error-color: var(--kbq-icon-error);--kbq-icon-success-color: var(--kbq-icon-success);--kbq-icon-warning-color: var(--kbq-icon-warning)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqIcon, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqIcon, isStandalone: true, selector: "[kbq-icon]", inputs: { small: "small", autoColor: "autoColor", iconName: ["kbq-icon", "iconName"] }, host: { properties: { "class": "svgIcon ? null : iconName", "class.kbq-error": "color === \"error\" || hasError" }, classAttribute: "kbq kbq-icon" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-icon>svg{fill:currentColor;vertical-align:middle}.kbq-icon-rotate_90{transform:rotate(90deg)}.kbq-icon-rotate_180{transform:rotate(180deg)}.kbq-icon-rotate_270{transform:rotate(270deg)}.kbq-icon-flip-h{transform:scaleY(-1)}.kbq-icon-flip-v{transform:scaleX(-1)}.kbq-icon-flip-vh{transform:scale(-1)}.kbq-icon{color:var(--kbq-icon-contrast-color)}.kbq-icon.kbq-theme{color:var(--kbq-icon-theme-color)}.kbq-icon.kbq-contrast{color:var(--kbq-icon-contrast-color)}.kbq-icon.kbq-contrast-fade{color:var(--kbq-icon-fade-contrast-color)}.kbq-icon.kbq-error{color:var(--kbq-icon-error-color)}.kbq-icon.kbq-warning{color:var(--kbq-icon-warning-color)}.kbq-icon.kbq-success{color:var(--kbq-icon-success-color)}\n", ".kbq-icon{--kbq-icon-theme-color: var(--kbq-icon-theme);--kbq-icon-contrast-color: var(--kbq-icon-contrast);--kbq-icon-fade-contrast-color: var(--kbq-icon-contrast-fade);--kbq-icon-error-color: var(--kbq-icon-error);--kbq-icon-success-color: var(--kbq-icon-success);--kbq-icon-warning-color: var(--kbq-icon-warning)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqIcon, decorators: [{
             type: Component,
             args: [{ selector: '[kbq-icon]', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'kbq kbq-icon',
-                        '[class]': 'iconName',
+                        '[class]': 'svgIcon ? null : iconName',
                         '[class.kbq-error]': 'color === "error" || hasError'
-                    }, styles: [".kbq-icon-rotate_90{transform:rotate(90deg)}.kbq-icon-rotate_180{transform:rotate(180deg)}.kbq-icon-rotate_270{transform:rotate(270deg)}.kbq-icon-flip-h{transform:scaleY(-1)}.kbq-icon-flip-v{transform:scaleX(-1)}.kbq-icon-flip-vh{transform:scale(-1)}.kbq-icon{color:var(--kbq-icon-contrast-color)}.kbq-icon.kbq-theme{color:var(--kbq-icon-theme-color)}.kbq-icon.kbq-contrast{color:var(--kbq-icon-contrast-color)}.kbq-icon.kbq-contrast-fade{color:var(--kbq-icon-fade-contrast-color)}.kbq-icon.kbq-error{color:var(--kbq-icon-error-color)}.kbq-icon.kbq-warning{color:var(--kbq-icon-warning-color)}.kbq-icon.kbq-success{color:var(--kbq-icon-success-color)}\n", ".kbq-icon{--kbq-icon-theme-color: var(--kbq-icon-theme);--kbq-icon-contrast-color: var(--kbq-icon-contrast);--kbq-icon-fade-contrast-color: var(--kbq-icon-contrast-fade);--kbq-icon-error-color: var(--kbq-icon-error);--kbq-icon-success-color: var(--kbq-icon-success);--kbq-icon-warning-color: var(--kbq-icon-warning)}\n"] }]
+                    }, styles: [".kbq-icon>svg{fill:currentColor;vertical-align:middle}.kbq-icon-rotate_90{transform:rotate(90deg)}.kbq-icon-rotate_180{transform:rotate(180deg)}.kbq-icon-rotate_270{transform:rotate(270deg)}.kbq-icon-flip-h{transform:scaleY(-1)}.kbq-icon-flip-v{transform:scaleX(-1)}.kbq-icon-flip-vh{transform:scale(-1)}.kbq-icon{color:var(--kbq-icon-contrast-color)}.kbq-icon.kbq-theme{color:var(--kbq-icon-theme-color)}.kbq-icon.kbq-contrast{color:var(--kbq-icon-contrast-color)}.kbq-icon.kbq-contrast-fade{color:var(--kbq-icon-fade-contrast-color)}.kbq-icon.kbq-error{color:var(--kbq-icon-error-color)}.kbq-icon.kbq-warning{color:var(--kbq-icon-warning-color)}.kbq-icon.kbq-success{color:var(--kbq-icon-success-color)}\n", ".kbq-icon{--kbq-icon-theme-color: var(--kbq-icon-theme);--kbq-icon-contrast-color: var(--kbq-icon-contrast);--kbq-icon-fade-contrast-color: var(--kbq-icon-contrast-fade);--kbq-icon-error-color: var(--kbq-icon-error);--kbq-icon-success-color: var(--kbq-icon-success);--kbq-icon-warning-color: var(--kbq-icon-warning)}\n"] }]
         }], propDecorators: { small: [{
                 type: Input
             }], autoColor: [{
@@ -96,10 +418,10 @@ class KbqIconButton extends KbqIcon {
     stopFocusMonitor() {
         this.focusMonitor.stopMonitoring(this.getHostElement());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.20", type: KbqIconButton, isStandalone: true, selector: "[kbq-icon-button]", inputs: { small: "small", iconName: ["kbq-icon-button", "iconName"], tabindex: "tabindex", disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled || null", "class.kbq-disabled": "disabled", "class.kbq-icon-button_small": "small" }, classAttribute: "kbq kbq-icon-button" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-icon-button:not(.kbq-disabled){cursor:pointer}.kbq-icon-button{padding:var(--kbq-icon-button-size-normal-vertical-padding) var(--kbq-icon-button-size-normal-horizontal-padding)}.kbq-icon-button.kbq-icon-button_small{padding:var(--kbq-icon-button-size-small-vertical-padding) var(--kbq-icon-button-size-small-horizontal-padding)}.kbq-icon-button.kbq-disabled{pointer-events:none}button.kbq-icon-button{border:none;background-color:unset}.kbq-icon-button:focus{outline:none}.kbq-icon-button.kbq-theme{color:var(--kbq-icon-button-theme-default)}.kbq-icon-button.kbq-theme:hover,.kbq-icon-button.kbq-theme.kbq-hovered{color:var(--kbq-icon-button-theme-states-hover)}.kbq-icon-button.kbq-theme:active,.kbq-icon-button.kbq-theme.kbq-active{color:var(--kbq-icon-button-theme-states-active)}.kbq-icon-button.kbq-theme.kbq-disabled{color:var(--kbq-icon-button-theme-states-disabled)}.kbq-icon-button.kbq-contrast{color:var(--kbq-icon-button-contrast-default)}.kbq-icon-button.kbq-contrast:hover,.kbq-icon-button.kbq-contrast.kbq-hovered{color:var(--kbq-icon-button-contrast-states-hover)}.kbq-icon-button.kbq-contrast:active,.kbq-icon-button.kbq-contrast.kbq-active{color:var(--kbq-icon-button-contrast-states-active)}.kbq-icon-button.kbq-contrast.kbq-disabled{color:var(--kbq-icon-button-contrast-states-disabled)}.kbq-icon-button.kbq-contrast-fade{color:var(--kbq-icon-button-fade-contrast-default)}.kbq-icon-button.kbq-contrast-fade:hover,.kbq-icon-button.kbq-contrast-fade.kbq-hovered{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-icon-button.kbq-contrast-fade:active,.kbq-icon-button.kbq-contrast-fade.kbq-active{color:var(--kbq-icon-button-fade-contrast-states-active)}.kbq-icon-button.kbq-contrast-fade.kbq-disabled{color:var(--kbq-icon-button-fade-contrast-states-disabled)}.kbq-icon-button.kbq-error{color:var(--kbq-icon-button-error-default)}.kbq-icon-button.kbq-error:hover,.kbq-icon-button.kbq-error.kbq-hovered{color:var(--kbq-icon-button-error-states-hover)}.kbq-icon-button.kbq-error:active,.kbq-icon-button.kbq-error.kbq-active{color:var(--kbq-icon-button-error-states-active)}.kbq-icon-button.kbq-error.kbq-disabled{color:var(--kbq-icon-button-error-states-disabled)}.kbq-icon-button.kbq-success{color:var(--kbq-icon-button-success-default)}.kbq-icon-button.kbq-success:hover,.kbq-icon-button.kbq-success.kbq-hovered{color:var(--kbq-icon-button-success-states-hover)}.kbq-icon-button.kbq-success:active,.kbq-icon-button.kbq-success.kbq-active{color:var(--kbq-icon-button-success-states-active)}.kbq-icon-button.kbq-success.kbq-disabled{color:var(--kbq-icon-button-success-states-disabled)}.kbq-icon-button.kbq-warning{color:var(--kbq-icon-button-warning-default)}.kbq-icon-button.kbq-warning:hover,.kbq-icon-button.kbq-warning.kbq-hovered{color:var(--kbq-icon-button-warning-states-hover)}.kbq-icon-button.kbq-warning:active,.kbq-icon-button.kbq-warning.kbq-active{color:var(--kbq-icon-button-warning-states-active)}.kbq-icon-button.kbq-warning.kbq-disabled{color:var(--kbq-icon-button-warning-states-disabled)}.kbq-icon-button.cdk-keyboard-focused{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-theme),0 0 0 1px var(--kbq-states-line-focus-theme)}.kbq-icon-button.cdk-keyboard-focused.kbq-error{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-error),0 0 0 1px var(--kbq-states-line-focus-error)}\n", ".kbq-icon-button{--kbq-icon-button-size-horizontal-padding: var(--kbq-size-s);--kbq-icon-button-size-left-icon-padding: var(--kbq-size-xs);--kbq-icon-button-size-normal-horizontal-padding: 0;--kbq-icon-button-size-normal-vertical-padding: 0;--kbq-icon-button-size-small-horizontal-padding: var(--kbq-size-xxs);--kbq-icon-button-size-small-vertical-padding: var(--kbq-size-xxs);--kbq-icon-button-theme-default: var(--kbq-icon-theme);--kbq-icon-button-theme-states-hover: var(--kbq-states-icon-theme-hover);--kbq-icon-button-theme-states-active: var(--kbq-states-icon-theme-active);--kbq-icon-button-theme-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-contrast-default: var(--kbq-icon-contrast);--kbq-icon-button-contrast-states-hover: var(--kbq-states-icon-contrast-hover);--kbq-icon-button-contrast-states-active: var(--kbq-states-icon-contrast-active);--kbq-icon-button-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-fade-contrast-default: var(--kbq-icon-contrast-fade);--kbq-icon-button-fade-contrast-states-hover: var(--kbq-states-icon-contrast-fade-hover);--kbq-icon-button-fade-contrast-states-active: var(--kbq-states-icon-contrast-fade-active);--kbq-icon-button-fade-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-error-default: var(--kbq-icon-error);--kbq-icon-button-error-states-hover: var(--kbq-states-icon-error-hover);--kbq-icon-button-error-states-active: var(--kbq-states-icon-error-active);--kbq-icon-button-error-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-success-default: var(--kbq-icon-success);--kbq-icon-button-success-states-hover: var(--kbq-states-icon-success-hover);--kbq-icon-button-success-states-active: var(--kbq-states-icon-success-active);--kbq-icon-button-success-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-warning-default: var(--kbq-icon-warning);--kbq-icon-button-warning-states-hover: var(--kbq-states-icon-warning-hover);--kbq-icon-button-warning-states-active: var(--kbq-states-icon-warning-active);--kbq-icon-button-warning-states-disabled: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqIconButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: KbqIconButton, isStandalone: true, selector: "[kbq-icon-button]", inputs: { small: "small", iconName: ["kbq-icon-button", "iconName"], tabindex: "tabindex", disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled || null", "class.kbq-disabled": "disabled", "class.kbq-icon-button_small": "small" }, classAttribute: "kbq kbq-icon-button" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-icon-button:not(.kbq-disabled){cursor:pointer}.kbq-icon-button{padding:var(--kbq-icon-button-size-normal-vertical-padding) var(--kbq-icon-button-size-normal-horizontal-padding)}.kbq-icon-button.kbq-icon-button_small{padding:var(--kbq-icon-button-size-small-vertical-padding) var(--kbq-icon-button-size-small-horizontal-padding)}.kbq-icon-button.kbq-disabled{pointer-events:none}.kbq-icon-button>svg{fill:currentColor;vertical-align:middle}button.kbq-icon-button{border:none;background-color:unset}.kbq-icon-button:focus{outline:none}.kbq-icon-button.kbq-theme{color:var(--kbq-icon-button-theme-default)}.kbq-icon-button.kbq-theme:hover,.kbq-icon-button.kbq-theme.kbq-hovered{color:var(--kbq-icon-button-theme-states-hover)}.kbq-icon-button.kbq-theme:active,.kbq-icon-button.kbq-theme.kbq-active{color:var(--kbq-icon-button-theme-states-active)}.kbq-icon-button.kbq-theme.kbq-disabled{color:var(--kbq-icon-button-theme-states-disabled)}.kbq-icon-button.kbq-contrast{color:var(--kbq-icon-button-contrast-default)}.kbq-icon-button.kbq-contrast:hover,.kbq-icon-button.kbq-contrast.kbq-hovered{color:var(--kbq-icon-button-contrast-states-hover)}.kbq-icon-button.kbq-contrast:active,.kbq-icon-button.kbq-contrast.kbq-active{color:var(--kbq-icon-button-contrast-states-active)}.kbq-icon-button.kbq-contrast.kbq-disabled{color:var(--kbq-icon-button-contrast-states-disabled)}.kbq-icon-button.kbq-contrast-fade{color:var(--kbq-icon-button-fade-contrast-default)}.kbq-icon-button.kbq-contrast-fade:hover,.kbq-icon-button.kbq-contrast-fade.kbq-hovered{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-icon-button.kbq-contrast-fade:active,.kbq-icon-button.kbq-contrast-fade.kbq-active{color:var(--kbq-icon-button-fade-contrast-states-active)}.kbq-icon-button.kbq-contrast-fade.kbq-disabled{color:var(--kbq-icon-button-fade-contrast-states-disabled)}.kbq-icon-button.kbq-error{color:var(--kbq-icon-button-error-default)}.kbq-icon-button.kbq-error:hover,.kbq-icon-button.kbq-error.kbq-hovered{color:var(--kbq-icon-button-error-states-hover)}.kbq-icon-button.kbq-error:active,.kbq-icon-button.kbq-error.kbq-active{color:var(--kbq-icon-button-error-states-active)}.kbq-icon-button.kbq-error.kbq-disabled{color:var(--kbq-icon-button-error-states-disabled)}.kbq-icon-button.kbq-success{color:var(--kbq-icon-button-success-default)}.kbq-icon-button.kbq-success:hover,.kbq-icon-button.kbq-success.kbq-hovered{color:var(--kbq-icon-button-success-states-hover)}.kbq-icon-button.kbq-success:active,.kbq-icon-button.kbq-success.kbq-active{color:var(--kbq-icon-button-success-states-active)}.kbq-icon-button.kbq-success.kbq-disabled{color:var(--kbq-icon-button-success-states-disabled)}.kbq-icon-button.kbq-warning{color:var(--kbq-icon-button-warning-default)}.kbq-icon-button.kbq-warning:hover,.kbq-icon-button.kbq-warning.kbq-hovered{color:var(--kbq-icon-button-warning-states-hover)}.kbq-icon-button.kbq-warning:active,.kbq-icon-button.kbq-warning.kbq-active{color:var(--kbq-icon-button-warning-states-active)}.kbq-icon-button.kbq-warning.kbq-disabled{color:var(--kbq-icon-button-warning-states-disabled)}.kbq-icon-button.cdk-keyboard-focused{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-theme),0 0 0 1px var(--kbq-states-line-focus-theme)}.kbq-icon-button.cdk-keyboard-focused.kbq-error{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-error),0 0 0 1px var(--kbq-states-line-focus-error)}\n", ".kbq-icon-button{--kbq-icon-button-size-horizontal-padding: var(--kbq-size-s);--kbq-icon-button-size-left-icon-padding: var(--kbq-size-xs);--kbq-icon-button-size-normal-horizontal-padding: 0;--kbq-icon-button-size-normal-vertical-padding: 0;--kbq-icon-button-size-small-horizontal-padding: var(--kbq-size-xxs);--kbq-icon-button-size-small-vertical-padding: var(--kbq-size-xxs);--kbq-icon-button-theme-default: var(--kbq-icon-theme);--kbq-icon-button-theme-states-hover: var(--kbq-states-icon-theme-hover);--kbq-icon-button-theme-states-active: var(--kbq-states-icon-theme-active);--kbq-icon-button-theme-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-contrast-default: var(--kbq-icon-contrast);--kbq-icon-button-contrast-states-hover: var(--kbq-states-icon-contrast-hover);--kbq-icon-button-contrast-states-active: var(--kbq-states-icon-contrast-active);--kbq-icon-button-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-fade-contrast-default: var(--kbq-icon-contrast-fade);--kbq-icon-button-fade-contrast-states-hover: var(--kbq-states-icon-contrast-fade-hover);--kbq-icon-button-fade-contrast-states-active: var(--kbq-states-icon-contrast-fade-active);--kbq-icon-button-fade-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-error-default: var(--kbq-icon-error);--kbq-icon-button-error-states-hover: var(--kbq-states-icon-error-hover);--kbq-icon-button-error-states-active: var(--kbq-states-icon-error-active);--kbq-icon-button-error-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-success-default: var(--kbq-icon-success);--kbq-icon-button-success-states-hover: var(--kbq-states-icon-success-hover);--kbq-icon-button-success-states-active: var(--kbq-states-icon-success-active);--kbq-icon-button-success-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-warning-default: var(--kbq-icon-warning);--kbq-icon-button-warning-states-hover: var(--kbq-states-icon-warning-hover);--kbq-icon-button-warning-states-active: var(--kbq-states-icon-warning-active);--kbq-icon-button-warning-states-disabled: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqIconButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqIconButton, decorators: [{
             type: Component,
             args: [{ selector: `[kbq-icon-button]`, template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'kbq kbq-icon-button',
@@ -107,7 +429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         '[attr.disabled]': 'disabled || null',
                         '[class.kbq-disabled]': 'disabled',
                         '[class.kbq-icon-button_small]': 'small'
-                    }, styles: [".kbq-icon-button:not(.kbq-disabled){cursor:pointer}.kbq-icon-button{padding:var(--kbq-icon-button-size-normal-vertical-padding) var(--kbq-icon-button-size-normal-horizontal-padding)}.kbq-icon-button.kbq-icon-button_small{padding:var(--kbq-icon-button-size-small-vertical-padding) var(--kbq-icon-button-size-small-horizontal-padding)}.kbq-icon-button.kbq-disabled{pointer-events:none}button.kbq-icon-button{border:none;background-color:unset}.kbq-icon-button:focus{outline:none}.kbq-icon-button.kbq-theme{color:var(--kbq-icon-button-theme-default)}.kbq-icon-button.kbq-theme:hover,.kbq-icon-button.kbq-theme.kbq-hovered{color:var(--kbq-icon-button-theme-states-hover)}.kbq-icon-button.kbq-theme:active,.kbq-icon-button.kbq-theme.kbq-active{color:var(--kbq-icon-button-theme-states-active)}.kbq-icon-button.kbq-theme.kbq-disabled{color:var(--kbq-icon-button-theme-states-disabled)}.kbq-icon-button.kbq-contrast{color:var(--kbq-icon-button-contrast-default)}.kbq-icon-button.kbq-contrast:hover,.kbq-icon-button.kbq-contrast.kbq-hovered{color:var(--kbq-icon-button-contrast-states-hover)}.kbq-icon-button.kbq-contrast:active,.kbq-icon-button.kbq-contrast.kbq-active{color:var(--kbq-icon-button-contrast-states-active)}.kbq-icon-button.kbq-contrast.kbq-disabled{color:var(--kbq-icon-button-contrast-states-disabled)}.kbq-icon-button.kbq-contrast-fade{color:var(--kbq-icon-button-fade-contrast-default)}.kbq-icon-button.kbq-contrast-fade:hover,.kbq-icon-button.kbq-contrast-fade.kbq-hovered{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-icon-button.kbq-contrast-fade:active,.kbq-icon-button.kbq-contrast-fade.kbq-active{color:var(--kbq-icon-button-fade-contrast-states-active)}.kbq-icon-button.kbq-contrast-fade.kbq-disabled{color:var(--kbq-icon-button-fade-contrast-states-disabled)}.kbq-icon-button.kbq-error{color:var(--kbq-icon-button-error-default)}.kbq-icon-button.kbq-error:hover,.kbq-icon-button.kbq-error.kbq-hovered{color:var(--kbq-icon-button-error-states-hover)}.kbq-icon-button.kbq-error:active,.kbq-icon-button.kbq-error.kbq-active{color:var(--kbq-icon-button-error-states-active)}.kbq-icon-button.kbq-error.kbq-disabled{color:var(--kbq-icon-button-error-states-disabled)}.kbq-icon-button.kbq-success{color:var(--kbq-icon-button-success-default)}.kbq-icon-button.kbq-success:hover,.kbq-icon-button.kbq-success.kbq-hovered{color:var(--kbq-icon-button-success-states-hover)}.kbq-icon-button.kbq-success:active,.kbq-icon-button.kbq-success.kbq-active{color:var(--kbq-icon-button-success-states-active)}.kbq-icon-button.kbq-success.kbq-disabled{color:var(--kbq-icon-button-success-states-disabled)}.kbq-icon-button.kbq-warning{color:var(--kbq-icon-button-warning-default)}.kbq-icon-button.kbq-warning:hover,.kbq-icon-button.kbq-warning.kbq-hovered{color:var(--kbq-icon-button-warning-states-hover)}.kbq-icon-button.kbq-warning:active,.kbq-icon-button.kbq-warning.kbq-active{color:var(--kbq-icon-button-warning-states-active)}.kbq-icon-button.kbq-warning.kbq-disabled{color:var(--kbq-icon-button-warning-states-disabled)}.kbq-icon-button.cdk-keyboard-focused{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-theme),0 0 0 1px var(--kbq-states-line-focus-theme)}.kbq-icon-button.cdk-keyboard-focused.kbq-error{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-error),0 0 0 1px var(--kbq-states-line-focus-error)}\n", ".kbq-icon-button{--kbq-icon-button-size-horizontal-padding: var(--kbq-size-s);--kbq-icon-button-size-left-icon-padding: var(--kbq-size-xs);--kbq-icon-button-size-normal-horizontal-padding: 0;--kbq-icon-button-size-normal-vertical-padding: 0;--kbq-icon-button-size-small-horizontal-padding: var(--kbq-size-xxs);--kbq-icon-button-size-small-vertical-padding: var(--kbq-size-xxs);--kbq-icon-button-theme-default: var(--kbq-icon-theme);--kbq-icon-button-theme-states-hover: var(--kbq-states-icon-theme-hover);--kbq-icon-button-theme-states-active: var(--kbq-states-icon-theme-active);--kbq-icon-button-theme-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-contrast-default: var(--kbq-icon-contrast);--kbq-icon-button-contrast-states-hover: var(--kbq-states-icon-contrast-hover);--kbq-icon-button-contrast-states-active: var(--kbq-states-icon-contrast-active);--kbq-icon-button-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-fade-contrast-default: var(--kbq-icon-contrast-fade);--kbq-icon-button-fade-contrast-states-hover: var(--kbq-states-icon-contrast-fade-hover);--kbq-icon-button-fade-contrast-states-active: var(--kbq-states-icon-contrast-fade-active);--kbq-icon-button-fade-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-error-default: var(--kbq-icon-error);--kbq-icon-button-error-states-hover: var(--kbq-states-icon-error-hover);--kbq-icon-button-error-states-active: var(--kbq-states-icon-error-active);--kbq-icon-button-error-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-success-default: var(--kbq-icon-success);--kbq-icon-button-success-states-hover: var(--kbq-states-icon-success-hover);--kbq-icon-button-success-states-active: var(--kbq-states-icon-success-active);--kbq-icon-button-success-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-warning-default: var(--kbq-icon-warning);--kbq-icon-button-warning-states-hover: var(--kbq-states-icon-warning-hover);--kbq-icon-button-warning-states-active: var(--kbq-states-icon-warning-active);--kbq-icon-button-warning-states-disabled: var(--kbq-states-icon-disabled)}\n"] }]
+                    }, styles: [".kbq-icon-button:not(.kbq-disabled){cursor:pointer}.kbq-icon-button{padding:var(--kbq-icon-button-size-normal-vertical-padding) var(--kbq-icon-button-size-normal-horizontal-padding)}.kbq-icon-button.kbq-icon-button_small{padding:var(--kbq-icon-button-size-small-vertical-padding) var(--kbq-icon-button-size-small-horizontal-padding)}.kbq-icon-button.kbq-disabled{pointer-events:none}.kbq-icon-button>svg{fill:currentColor;vertical-align:middle}button.kbq-icon-button{border:none;background-color:unset}.kbq-icon-button:focus{outline:none}.kbq-icon-button.kbq-theme{color:var(--kbq-icon-button-theme-default)}.kbq-icon-button.kbq-theme:hover,.kbq-icon-button.kbq-theme.kbq-hovered{color:var(--kbq-icon-button-theme-states-hover)}.kbq-icon-button.kbq-theme:active,.kbq-icon-button.kbq-theme.kbq-active{color:var(--kbq-icon-button-theme-states-active)}.kbq-icon-button.kbq-theme.kbq-disabled{color:var(--kbq-icon-button-theme-states-disabled)}.kbq-icon-button.kbq-contrast{color:var(--kbq-icon-button-contrast-default)}.kbq-icon-button.kbq-contrast:hover,.kbq-icon-button.kbq-contrast.kbq-hovered{color:var(--kbq-icon-button-contrast-states-hover)}.kbq-icon-button.kbq-contrast:active,.kbq-icon-button.kbq-contrast.kbq-active{color:var(--kbq-icon-button-contrast-states-active)}.kbq-icon-button.kbq-contrast.kbq-disabled{color:var(--kbq-icon-button-contrast-states-disabled)}.kbq-icon-button.kbq-contrast-fade{color:var(--kbq-icon-button-fade-contrast-default)}.kbq-icon-button.kbq-contrast-fade:hover,.kbq-icon-button.kbq-contrast-fade.kbq-hovered{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-icon-button.kbq-contrast-fade:active,.kbq-icon-button.kbq-contrast-fade.kbq-active{color:var(--kbq-icon-button-fade-contrast-states-active)}.kbq-icon-button.kbq-contrast-fade.kbq-disabled{color:var(--kbq-icon-button-fade-contrast-states-disabled)}.kbq-icon-button.kbq-error{color:var(--kbq-icon-button-error-default)}.kbq-icon-button.kbq-error:hover,.kbq-icon-button.kbq-error.kbq-hovered{color:var(--kbq-icon-button-error-states-hover)}.kbq-icon-button.kbq-error:active,.kbq-icon-button.kbq-error.kbq-active{color:var(--kbq-icon-button-error-states-active)}.kbq-icon-button.kbq-error.kbq-disabled{color:var(--kbq-icon-button-error-states-disabled)}.kbq-icon-button.kbq-success{color:var(--kbq-icon-button-success-default)}.kbq-icon-button.kbq-success:hover,.kbq-icon-button.kbq-success.kbq-hovered{color:var(--kbq-icon-button-success-states-hover)}.kbq-icon-button.kbq-success:active,.kbq-icon-button.kbq-success.kbq-active{color:var(--kbq-icon-button-success-states-active)}.kbq-icon-button.kbq-success.kbq-disabled{color:var(--kbq-icon-button-success-states-disabled)}.kbq-icon-button.kbq-warning{color:var(--kbq-icon-button-warning-default)}.kbq-icon-button.kbq-warning:hover,.kbq-icon-button.kbq-warning.kbq-hovered{color:var(--kbq-icon-button-warning-states-hover)}.kbq-icon-button.kbq-warning:active,.kbq-icon-button.kbq-warning.kbq-active{color:var(--kbq-icon-button-warning-states-active)}.kbq-icon-button.kbq-warning.kbq-disabled{color:var(--kbq-icon-button-warning-states-disabled)}.kbq-icon-button.cdk-keyboard-focused{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-theme),0 0 0 1px var(--kbq-states-line-focus-theme)}.kbq-icon-button.cdk-keyboard-focused.kbq-error{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-error),0 0 0 1px var(--kbq-states-line-focus-error)}\n", ".kbq-icon-button{--kbq-icon-button-size-horizontal-padding: var(--kbq-size-s);--kbq-icon-button-size-left-icon-padding: var(--kbq-size-xs);--kbq-icon-button-size-normal-horizontal-padding: 0;--kbq-icon-button-size-normal-vertical-padding: 0;--kbq-icon-button-size-small-horizontal-padding: var(--kbq-size-xxs);--kbq-icon-button-size-small-vertical-padding: var(--kbq-size-xxs);--kbq-icon-button-theme-default: var(--kbq-icon-theme);--kbq-icon-button-theme-states-hover: var(--kbq-states-icon-theme-hover);--kbq-icon-button-theme-states-active: var(--kbq-states-icon-theme-active);--kbq-icon-button-theme-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-contrast-default: var(--kbq-icon-contrast);--kbq-icon-button-contrast-states-hover: var(--kbq-states-icon-contrast-hover);--kbq-icon-button-contrast-states-active: var(--kbq-states-icon-contrast-active);--kbq-icon-button-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-fade-contrast-default: var(--kbq-icon-contrast-fade);--kbq-icon-button-fade-contrast-states-hover: var(--kbq-states-icon-contrast-fade-hover);--kbq-icon-button-fade-contrast-states-active: var(--kbq-states-icon-contrast-fade-active);--kbq-icon-button-fade-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-error-default: var(--kbq-icon-error);--kbq-icon-button-error-states-hover: var(--kbq-states-icon-error-hover);--kbq-icon-button-error-states-active: var(--kbq-states-icon-error-active);--kbq-icon-button-error-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-success-default: var(--kbq-icon-success);--kbq-icon-button-success-states-hover: var(--kbq-states-icon-success-hover);--kbq-icon-button-success-states-active: var(--kbq-states-icon-success-active);--kbq-icon-button-success-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-warning-default: var(--kbq-icon-warning);--kbq-icon-button-warning-states-hover: var(--kbq-states-icon-warning-hover);--kbq-icon-button-warning-states-active: var(--kbq-states-icon-warning-active);--kbq-icon-button-warning-states-disabled: var(--kbq-states-icon-disabled)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { small: [{
                 type: Input
             }], iconName: [{
@@ -127,10 +449,10 @@ class KbqIconItem extends KbqIcon {
         this.fade = false;
         this.big = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqIconItem, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: KbqIconItem, isStandalone: true, selector: "[kbq-icon-item]", inputs: { iconName: ["kbq-icon-item", "iconName"], fade: "fade", big: "big" }, host: { properties: { "class.kbq-icon-item_normal": "!big", "class.kbq-icon-item_big": "big", "class.kbq-icon-item_fade-off": "!fade", "class.kbq-icon-item_fade-on": "fade" }, classAttribute: "kbq kbq-icon-item kbq-icon-item_filled" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-icon-item{box-sizing:border-box;border-radius:50%}.kbq-icon-item.kbq-icon-item_normal{padding:var(--kbq-icon-item-size-normal-vertical-padding) var(--kbq-icon-item-size-normal-horizontal-padding)}.kbq-icon-item.kbq-icon-item_big{padding:var(--kbq-icon-item-size-big-vertical-padding) var(--kbq-icon-item-size-big-horizontal-padding)}.kbq-icon-item.kbq-icon-item_filled{color:var(--kbq-icon-item-filled-fade-on-contrast-color);background:var(--kbq-icon-item-filled-fade-on-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-theme{color:var(--kbq-icon-item-filled-fade-off-theme-color);background:var(--kbq-icon-item-filled-fade-off-theme-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-contrast{color:var(--kbq-icon-item-filled-fade-off-contrast-color);background:var(--kbq-icon-item-filled-fade-off-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-error{color:var(--kbq-icon-item-filled-fade-off-error-color);background:var(--kbq-icon-item-filled-fade-off-error-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-warning{color:var(--kbq-icon-item-filled-fade-off-warning-color);background:var(--kbq-icon-item-filled-fade-off-warning-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-success{color:var(--kbq-icon-item-filled-fade-off-success-color);background:var(--kbq-icon-item-filled-fade-off-success-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-theme{color:var(--kbq-icon-item-filled-fade-on-theme-color);background:var(--kbq-icon-item-filled-fade-on-theme-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-contrast{color:var(--kbq-icon-item-filled-fade-on-contrast-color);background:var(--kbq-icon-item-filled-fade-on-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-error{color:var(--kbq-icon-item-filled-fade-on-error-color);background:var(--kbq-icon-item-filled-fade-on-error-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-warning{color:var(--kbq-icon-item-filled-fade-on-warning-color);background:var(--kbq-icon-item-filled-fade-on-warning-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-success{color:var(--kbq-icon-item-filled-fade-on-success-color);background:var(--kbq-icon-item-filled-fade-on-success-background)}\n", ".kbq-icon-item{--kbq-icon-item-size-normal-horizontal-padding: var(--kbq-size-s);--kbq-icon-item-size-normal-vertical-padding: var(--kbq-size-s);--kbq-icon-item-size-big-horizontal-padding: var(--kbq-size-l);--kbq-icon-item-size-big-vertical-padding: var(--kbq-size-l);--kbq-icon-item-filled-fade-off-theme-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-theme-background: var(--kbq-background-theme);--kbq-icon-item-filled-fade-off-contrast-color: var(--kbq-icon-on-contrast);--kbq-icon-item-filled-fade-off-contrast-background: var(--kbq-background-contrast);--kbq-icon-item-filled-fade-off-error-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-error-background: var(--kbq-background-error);--kbq-icon-item-filled-fade-off-warning-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-warning-background: var(--kbq-background-warning);--kbq-icon-item-filled-fade-off-success-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-success-background: var(--kbq-background-success);--kbq-icon-item-filled-fade-on-theme-color: var(--kbq-icon-theme);--kbq-icon-item-filled-fade-on-theme-background: var(--kbq-background-theme-fade);--kbq-icon-item-filled-fade-on-contrast-color: var(--kbq-icon-contrast);--kbq-icon-item-filled-fade-on-contrast-background: var(--kbq-background-contrast-fade);--kbq-icon-item-filled-fade-on-error-color: var(--kbq-icon-error);--kbq-icon-item-filled-fade-on-error-background: var(--kbq-background-error-fade);--kbq-icon-item-filled-fade-on-warning-color: var(--kbq-icon-warning);--kbq-icon-item-filled-fade-on-warning-background: var(--kbq-background-warning-fade);--kbq-icon-item-filled-fade-on-success-color: var(--kbq-icon-success);--kbq-icon-item-filled-fade-on-success-background: var(--kbq-background-success-fade)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqIconItem, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqIconItem, isStandalone: true, selector: "[kbq-icon-item]", inputs: { iconName: ["kbq-icon-item", "iconName"], fade: "fade", big: "big" }, host: { properties: { "class.kbq-icon-item_normal": "!big", "class.kbq-icon-item_big": "big", "class.kbq-icon-item_fade-off": "!fade", "class.kbq-icon-item_fade-on": "fade" }, classAttribute: "kbq kbq-icon-item kbq-icon-item_filled" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-icon-item{box-sizing:border-box;border-radius:50%}.kbq-icon-item.kbq-icon-item_normal{padding:var(--kbq-icon-item-size-normal-vertical-padding) var(--kbq-icon-item-size-normal-horizontal-padding)}.kbq-icon-item.kbq-icon-item_big{padding:var(--kbq-icon-item-size-big-vertical-padding) var(--kbq-icon-item-size-big-horizontal-padding)}.kbq-icon-item>svg{fill:currentColor;vertical-align:middle}.kbq-icon-item.kbq-icon-item_filled{color:var(--kbq-icon-item-filled-fade-on-contrast-color);background:var(--kbq-icon-item-filled-fade-on-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-theme{color:var(--kbq-icon-item-filled-fade-off-theme-color);background:var(--kbq-icon-item-filled-fade-off-theme-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-contrast{color:var(--kbq-icon-item-filled-fade-off-contrast-color);background:var(--kbq-icon-item-filled-fade-off-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-error{color:var(--kbq-icon-item-filled-fade-off-error-color);background:var(--kbq-icon-item-filled-fade-off-error-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-warning{color:var(--kbq-icon-item-filled-fade-off-warning-color);background:var(--kbq-icon-item-filled-fade-off-warning-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-success{color:var(--kbq-icon-item-filled-fade-off-success-color);background:var(--kbq-icon-item-filled-fade-off-success-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-theme{color:var(--kbq-icon-item-filled-fade-on-theme-color);background:var(--kbq-icon-item-filled-fade-on-theme-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-contrast{color:var(--kbq-icon-item-filled-fade-on-contrast-color);background:var(--kbq-icon-item-filled-fade-on-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-error{color:var(--kbq-icon-item-filled-fade-on-error-color);background:var(--kbq-icon-item-filled-fade-on-error-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-warning{color:var(--kbq-icon-item-filled-fade-on-warning-color);background:var(--kbq-icon-item-filled-fade-on-warning-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-success{color:var(--kbq-icon-item-filled-fade-on-success-color);background:var(--kbq-icon-item-filled-fade-on-success-background)}\n", ".kbq-icon-item{--kbq-icon-item-size-normal-horizontal-padding: var(--kbq-size-s);--kbq-icon-item-size-normal-vertical-padding: var(--kbq-size-s);--kbq-icon-item-size-big-horizontal-padding: var(--kbq-size-l);--kbq-icon-item-size-big-vertical-padding: var(--kbq-size-l);--kbq-icon-item-filled-fade-off-theme-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-theme-background: var(--kbq-background-theme);--kbq-icon-item-filled-fade-off-contrast-color: var(--kbq-icon-on-contrast);--kbq-icon-item-filled-fade-off-contrast-background: var(--kbq-background-contrast);--kbq-icon-item-filled-fade-off-error-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-error-background: var(--kbq-background-error);--kbq-icon-item-filled-fade-off-warning-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-warning-background: var(--kbq-background-warning);--kbq-icon-item-filled-fade-off-success-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-success-background: var(--kbq-background-success);--kbq-icon-item-filled-fade-on-theme-color: var(--kbq-icon-theme);--kbq-icon-item-filled-fade-on-theme-background: var(--kbq-background-theme-fade);--kbq-icon-item-filled-fade-on-contrast-color: var(--kbq-icon-contrast);--kbq-icon-item-filled-fade-on-contrast-background: var(--kbq-background-contrast-fade);--kbq-icon-item-filled-fade-on-error-color: var(--kbq-icon-error);--kbq-icon-item-filled-fade-on-error-background: var(--kbq-background-error-fade);--kbq-icon-item-filled-fade-on-warning-color: var(--kbq-icon-warning);--kbq-icon-item-filled-fade-on-warning-background: var(--kbq-background-warning-fade);--kbq-icon-item-filled-fade-on-success-color: var(--kbq-icon-success);--kbq-icon-item-filled-fade-on-success-background: var(--kbq-background-success-fade)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqIconItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqIconItem, decorators: [{
             type: Component,
             args: [{ selector: `[kbq-icon-item]`, template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'kbq kbq-icon-item kbq-icon-item_filled',
@@ -138,7 +460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
                         '[class.kbq-icon-item_big]': 'big',
                         '[class.kbq-icon-item_fade-off]': '!fade',
                         '[class.kbq-icon-item_fade-on]': 'fade'
-                    }, styles: [".kbq-icon-item{box-sizing:border-box;border-radius:50%}.kbq-icon-item.kbq-icon-item_normal{padding:var(--kbq-icon-item-size-normal-vertical-padding) var(--kbq-icon-item-size-normal-horizontal-padding)}.kbq-icon-item.kbq-icon-item_big{padding:var(--kbq-icon-item-size-big-vertical-padding) var(--kbq-icon-item-size-big-horizontal-padding)}.kbq-icon-item.kbq-icon-item_filled{color:var(--kbq-icon-item-filled-fade-on-contrast-color);background:var(--kbq-icon-item-filled-fade-on-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-theme{color:var(--kbq-icon-item-filled-fade-off-theme-color);background:var(--kbq-icon-item-filled-fade-off-theme-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-contrast{color:var(--kbq-icon-item-filled-fade-off-contrast-color);background:var(--kbq-icon-item-filled-fade-off-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-error{color:var(--kbq-icon-item-filled-fade-off-error-color);background:var(--kbq-icon-item-filled-fade-off-error-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-warning{color:var(--kbq-icon-item-filled-fade-off-warning-color);background:var(--kbq-icon-item-filled-fade-off-warning-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-success{color:var(--kbq-icon-item-filled-fade-off-success-color);background:var(--kbq-icon-item-filled-fade-off-success-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-theme{color:var(--kbq-icon-item-filled-fade-on-theme-color);background:var(--kbq-icon-item-filled-fade-on-theme-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-contrast{color:var(--kbq-icon-item-filled-fade-on-contrast-color);background:var(--kbq-icon-item-filled-fade-on-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-error{color:var(--kbq-icon-item-filled-fade-on-error-color);background:var(--kbq-icon-item-filled-fade-on-error-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-warning{color:var(--kbq-icon-item-filled-fade-on-warning-color);background:var(--kbq-icon-item-filled-fade-on-warning-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-success{color:var(--kbq-icon-item-filled-fade-on-success-color);background:var(--kbq-icon-item-filled-fade-on-success-background)}\n", ".kbq-icon-item{--kbq-icon-item-size-normal-horizontal-padding: var(--kbq-size-s);--kbq-icon-item-size-normal-vertical-padding: var(--kbq-size-s);--kbq-icon-item-size-big-horizontal-padding: var(--kbq-size-l);--kbq-icon-item-size-big-vertical-padding: var(--kbq-size-l);--kbq-icon-item-filled-fade-off-theme-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-theme-background: var(--kbq-background-theme);--kbq-icon-item-filled-fade-off-contrast-color: var(--kbq-icon-on-contrast);--kbq-icon-item-filled-fade-off-contrast-background: var(--kbq-background-contrast);--kbq-icon-item-filled-fade-off-error-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-error-background: var(--kbq-background-error);--kbq-icon-item-filled-fade-off-warning-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-warning-background: var(--kbq-background-warning);--kbq-icon-item-filled-fade-off-success-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-success-background: var(--kbq-background-success);--kbq-icon-item-filled-fade-on-theme-color: var(--kbq-icon-theme);--kbq-icon-item-filled-fade-on-theme-background: var(--kbq-background-theme-fade);--kbq-icon-item-filled-fade-on-contrast-color: var(--kbq-icon-contrast);--kbq-icon-item-filled-fade-on-contrast-background: var(--kbq-background-contrast-fade);--kbq-icon-item-filled-fade-on-error-color: var(--kbq-icon-error);--kbq-icon-item-filled-fade-on-error-background: var(--kbq-background-error-fade);--kbq-icon-item-filled-fade-on-warning-color: var(--kbq-icon-warning);--kbq-icon-item-filled-fade-on-warning-background: var(--kbq-background-warning-fade);--kbq-icon-item-filled-fade-on-success-color: var(--kbq-icon-success);--kbq-icon-item-filled-fade-on-success-background: var(--kbq-background-success-fade)}\n"] }]
+                    }, styles: [".kbq-icon-item{box-sizing:border-box;border-radius:50%}.kbq-icon-item.kbq-icon-item_normal{padding:var(--kbq-icon-item-size-normal-vertical-padding) var(--kbq-icon-item-size-normal-horizontal-padding)}.kbq-icon-item.kbq-icon-item_big{padding:var(--kbq-icon-item-size-big-vertical-padding) var(--kbq-icon-item-size-big-horizontal-padding)}.kbq-icon-item>svg{fill:currentColor;vertical-align:middle}.kbq-icon-item.kbq-icon-item_filled{color:var(--kbq-icon-item-filled-fade-on-contrast-color);background:var(--kbq-icon-item-filled-fade-on-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-theme{color:var(--kbq-icon-item-filled-fade-off-theme-color);background:var(--kbq-icon-item-filled-fade-off-theme-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-contrast{color:var(--kbq-icon-item-filled-fade-off-contrast-color);background:var(--kbq-icon-item-filled-fade-off-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-error{color:var(--kbq-icon-item-filled-fade-off-error-color);background:var(--kbq-icon-item-filled-fade-off-error-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-warning{color:var(--kbq-icon-item-filled-fade-off-warning-color);background:var(--kbq-icon-item-filled-fade-off-warning-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-success{color:var(--kbq-icon-item-filled-fade-off-success-color);background:var(--kbq-icon-item-filled-fade-off-success-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-theme{color:var(--kbq-icon-item-filled-fade-on-theme-color);background:var(--kbq-icon-item-filled-fade-on-theme-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-contrast{color:var(--kbq-icon-item-filled-fade-on-contrast-color);background:var(--kbq-icon-item-filled-fade-on-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-error{color:var(--kbq-icon-item-filled-fade-on-error-color);background:var(--kbq-icon-item-filled-fade-on-error-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-warning{color:var(--kbq-icon-item-filled-fade-on-warning-color);background:var(--kbq-icon-item-filled-fade-on-warning-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-success{color:var(--kbq-icon-item-filled-fade-on-success-color);background:var(--kbq-icon-item-filled-fade-on-success-background)}\n", ".kbq-icon-item{--kbq-icon-item-size-normal-horizontal-padding: var(--kbq-size-s);--kbq-icon-item-size-normal-vertical-padding: var(--kbq-size-s);--kbq-icon-item-size-big-horizontal-padding: var(--kbq-size-l);--kbq-icon-item-size-big-vertical-padding: var(--kbq-size-l);--kbq-icon-item-filled-fade-off-theme-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-theme-background: var(--kbq-background-theme);--kbq-icon-item-filled-fade-off-contrast-color: var(--kbq-icon-on-contrast);--kbq-icon-item-filled-fade-off-contrast-background: var(--kbq-background-contrast);--kbq-icon-item-filled-fade-off-error-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-error-background: var(--kbq-background-error);--kbq-icon-item-filled-fade-off-warning-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-warning-background: var(--kbq-background-warning);--kbq-icon-item-filled-fade-off-success-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-success-background: var(--kbq-background-success);--kbq-icon-item-filled-fade-on-theme-color: var(--kbq-icon-theme);--kbq-icon-item-filled-fade-on-theme-background: var(--kbq-background-theme-fade);--kbq-icon-item-filled-fade-on-contrast-color: var(--kbq-icon-contrast);--kbq-icon-item-filled-fade-on-contrast-background: var(--kbq-background-contrast-fade);--kbq-icon-item-filled-fade-on-error-color: var(--kbq-icon-error);--kbq-icon-item-filled-fade-on-error-background: var(--kbq-background-error-fade);--kbq-icon-item-filled-fade-on-warning-color: var(--kbq-icon-warning);--kbq-icon-item-filled-fade-on-warning-background: var(--kbq-background-warning-fade);--kbq-icon-item-filled-fade-on-success-color: var(--kbq-icon-success);--kbq-icon-item-filled-fade-on-success-background: var(--kbq-background-success-fade)}\n"] }]
         }], propDecorators: { iconName: [{
                 type: Input,
                 args: [{ alias: 'kbq-icon-item' }]
@@ -154,15 +476,15 @@ const COMPONENTS = [
     KbqIconItem
 ];
 class KbqIconModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: KbqIconModule, imports: [KbqIcon,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqIconModule, imports: [KbqIcon,
             KbqIconButton,
             KbqIconItem], exports: [KbqIcon,
             KbqIconButton,
             KbqIconItem] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqIconModule }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqIconModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqIconModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,
@@ -174,5 +496,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KbqIcon, KbqIconButton, KbqIconItem, KbqIconModule };
+export { KBQ_ICONS_CONFIG, KBQ_ICON_RESOLVER, KbqIcon, KbqIconButton, KbqIconItem, KbqIconModule, KbqIconRegistry, kbqIconsDictProvider, kbqIconsProvider, kbqIconsResolverProvider };
 //# sourceMappingURL=koobiq-components-icon.mjs.map