@koobiq/components 19.8.3 → 20.1.0

package/fesm2022/koobiq-components-dynamic-translation.mjs

@@ -10,35 +10,35 @@ class KbqDynamicTranslationSlot {
         /**
          * The name of the dynamic translation slot.
          */
-        this.name = input.required({ alias: 'kbqDynamicTranslationSlot' });
+        this.name = input.required(...(ngDevMode ? [{ debugName: "name", alias: 'kbqDynamicTranslationSlot' }] : [{ alias: 'kbqDynamicTranslationSlot' }]));
         /**
          * @docs-private
          */
         this.templateRef = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDynamicTranslationSlot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: KbqDynamicTranslationSlot, isStandalone: true, selector: "[kbqDynamicTranslationSlot]", inputs: { name: { classPropertyName: "name", publicName: "kbqDynamicTranslationSlot", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDynamicTranslationSlot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqDynamicTranslationSlot, isStandalone: true, selector: "[kbqDynamicTranslationSlot]", inputs: { name: { classPropertyName: "name", publicName: "kbqDynamicTranslationSlot", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDynamicTranslationSlot, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDynamicTranslationSlot, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqDynamicTranslationSlot]'
                 }]
-        }] });
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqDynamicTranslationSlot", required: true }] }] } });
 /**
  * Component for dynamic translation.
  */
 class KbqDynamicTranslation {
     constructor() {
-        this.slots = contentChildren(KbqDynamicTranslationSlot);
+        this.slots = contentChildren(KbqDynamicTranslationSlot, ...(ngDevMode ? [{ debugName: "slots" }] : []));
         /**
          * The text which will be translated.
          */
-        this.text = input.required();
+        this.text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
         /**
          * @docs-private
          */
-        this.parsedSlots = computed(() => this.parseSlots(this.text(), this.slots()));
+        this.parsedSlots = computed(() => this.parseSlots(this.text(), this.slots()), ...(ngDevMode ? [{ debugName: "parsedSlots" }] : []));
     }
     parseSlots(text, slots) {
         const slotTemplatesByName = slots.reduce((map, { name, templateRef }) => {
@@ -71,8 +71,8 @@ class KbqDynamicTranslation {
         }
         return parsedSlots;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDynamicTranslation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqDynamicTranslation, isStandalone: true, selector: "kbq-dynamic-translation", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, queries: [{ propertyName: "slots", predicate: KbqDynamicTranslationSlot, isSignal: true }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDynamicTranslation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqDynamicTranslation, isStandalone: true, selector: "kbq-dynamic-translation", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, queries: [{ propertyName: "slots", predicate: KbqDynamicTranslationSlot, isSignal: true }], ngImport: i0, template: `
         @for (slot of parsedSlots(); track $index) {
             @switch (slot.type) {
                 @case ('slot') {
@@ -85,7 +85,7 @@ class KbqDynamicTranslation {
         }
     `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDynamicTranslation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDynamicTranslation, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-dynamic-translation',
@@ -104,17 +104,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { slots: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqDynamicTranslationSlot), { isSignal: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }] } });
 /**
  * @docs-private
  */
 class KbqDynamicTranslationHelper {
     constructor() {
         this.renderer = inject(Renderer2);
-        this.replaceableSlotContainers = viewChildren('replaceableSlotContainer');
+        this.replaceableSlotContainers = viewChildren('replaceableSlotContainer', ...(ngDevMode ? [{ debugName: "replaceableSlotContainers" }] : []));
         this.slotsByName = new Map();
-        this.text = input.required();
-        this.slots = input.required();
+        this.text = input.required(...(ngDevMode ? [{ debugName: "text" }] : []));
+        this.slots = input.required(...(ngDevMode ? [{ debugName: "slots" }] : []));
         effect(() => {
             this.slotsByName.clear();
             this.slots().forEach((slot) => this.slotsByName.set(slot.name, slot));
@@ -134,8 +134,8 @@ class KbqDynamicTranslationHelper {
             nativeElement.replaceWith(elementToRender);
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDynamicTranslationHelper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqDynamicTranslationHelper, isStandalone: true, selector: "kbq-dynamic-translation-with-dynamic-component-creation", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, slots: { classPropertyName: "slots", publicName: "slots", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "replaceableSlotContainers", predicate: ["replaceableSlotContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDynamicTranslationHelper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqDynamicTranslationHelper, isStandalone: true, selector: "kbq-dynamic-translation-with-dynamic-component-creation", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, slots: { classPropertyName: "slots", publicName: "slots", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "replaceableSlotContainers", predicate: ["replaceableSlotContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
         <kbq-dynamic-translation [text]="text()">
             @for (slot of slots(); track $index) {
                 <ng-container *kbqDynamicTranslationSlot="slot.name; let content">
@@ -149,7 +149,7 @@ class KbqDynamicTranslationHelper {
         </kbq-dynamic-translation>
     `, isInline: true, dependencies: [{ kind: "component", type: KbqDynamicTranslation, selector: "kbq-dynamic-translation", inputs: ["text"] }, { kind: "directive", type: KbqDynamicTranslationSlot, selector: "[kbqDynamicTranslationSlot]", inputs: ["kbqDynamicTranslationSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDynamicTranslationHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDynamicTranslationHelper, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-dynamic-translation-with-dynamic-component-creation',
@@ -169,7 +169,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { replaceableSlotContainers: [{ type: i0.ViewChildren, args: ['replaceableSlotContainer', { isSignal: true }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], slots: [{ type: i0.Input, args: [{ isSignal: true, alias: "slots", required: true }] }] } });
 
 const COMPONENTS = [
     KbqDynamicTranslationSlot,
@@ -177,15 +177,15 @@ const COMPONENTS = [
     KbqDynamicTranslation
 ];
 class KbqDynamicTranslationModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDynamicTranslationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqDynamicTranslationModule, imports: [KbqDynamicTranslationSlot,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDynamicTranslationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqDynamicTranslationModule, imports: [KbqDynamicTranslationSlot,
             KbqDynamicTranslationHelper,
             KbqDynamicTranslation], exports: [KbqDynamicTranslationSlot,
             KbqDynamicTranslationHelper,
             KbqDynamicTranslation] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDynamicTranslationModule }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDynamicTranslationModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqDynamicTranslationModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqDynamicTranslationModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,

package/fesm2022/koobiq-components-dynamic-translation.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koobiq-components-dynamic-translation.mjs","sources":["../../../packages/components/dynamic-translation/dynamic-translation.ts","../../../packages/components/dynamic-translation/module.ts","../../../packages/components/dynamic-translation/koobiq-components-dynamic-translation.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n    afterNextRender,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    contentChildren,\n    Directive,\n    effect,\n    ElementRef,\n    inject,\n    input,\n    Renderer2,\n    Signal,\n    TemplateRef,\n    viewChildren\n} from '@angular/core';\n\n/**\n * @docs-private\n */\ntype KbqDynamicTranslationParsedSlot = {\n    type: 'text' | 'slot';\n    template: TemplateRef<unknown> | null;\n    context?: { $implicit: unknown };\n    text?: string;\n};\n\n/**\n * @docs-private\n */\nexport interface KbqDynamicTranslationHelperSlot {\n    name: string;\n    tag: string;\n    attributes?: { key: string; value: string }[];\n    content?: string;\n}\n\n/**\n * Directive for defining a dynamic translation slot.\n */\n@Directive({\n    selector: '[kbqDynamicTranslationSlot]'\n})\nexport class KbqDynamicTranslationSlot {\n    /**\n     * The name of the dynamic translation slot.\n     */\n    readonly name = input.required<string>({ alias: 'kbqDynamicTranslationSlot' });\n\n    /**\n     * @docs-private\n     */\n    readonly templateRef = inject(TemplateRef);\n}\n\n/**\n * Component for dynamic translation.\n */\n@Component({\n    selector: 'kbq-dynamic-translation',\n    imports: [NgTemplateOutlet],\n    template: `\n        @for (slot of parsedSlots(); track $index) {\n            @switch (slot.type) {\n                @case ('slot') {\n                    <ng-container *ngTemplateOutlet=\"slot.template; context: slot.context\" />\n                }\n                @default {\n                    <ng-container>{{ slot.text }}</ng-container>\n                }\n            }\n        }\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class KbqDynamicTranslation {\n    private readonly slots = contentChildren(KbqDynamicTranslationSlot);\n\n    /**\n     * The text which will be translated.\n     */\n    readonly text = input.required<string>();\n\n    /**\n     * @docs-private\n     */\n    protected readonly parsedSlots: Signal<KbqDynamicTranslationParsedSlot[]> = computed(() =>\n        this.parseSlots(this.text(), this.slots())\n    );\n\n    private parseSlots(\n        text: string,\n        slots: ReadonlyArray<KbqDynamicTranslationSlot>\n    ): KbqDynamicTranslationParsedSlot[] {\n        const slotTemplatesByName = slots.reduce<Record<string, TemplateRef<unknown>>>((map, { name, templateRef }) => {\n            const slotName = name();\n\n            if (slotName) map[slotName] = templateRef;\n\n            return map;\n        }, {});\n        const parsedSlots: KbqDynamicTranslationParsedSlot[] = [];\n        const slotSelector = new RegExp(`\\\\[\\\\[(${Object.keys(slotTemplatesByName).join('|')})(?::(.+?))?\\\\]\\\\]`, 'g');\n        let match: RegExpExecArray | null;\n        let lastIndex = 0;\n\n        while ((match = slotSelector.exec(text)) !== null) {\n            const [slotMatch, slotName, slotText] = match;\n            const [listMatch, listString] = new RegExp('^\\\\((.*?)\\\\)$', 'g').exec(slotText) ?? [];\n            const textBeforeSlot = text.substring(lastIndex, +match.index);\n\n            if (textBeforeSlot) {\n                parsedSlots.push({ type: 'text', text: textBeforeSlot, template: null });\n            }\n\n            parsedSlots.push({\n                type: 'slot',\n                template: slotTemplatesByName[slotName] || null,\n                context: { $implicit: listMatch && listString ? listString.split(',') : slotText }\n            });\n\n            lastIndex = match.index + slotMatch.length;\n        }\n\n        const textAfterLastSlot = text.substring(lastIndex);\n\n        if (textAfterLastSlot) {\n            parsedSlots.push({ type: 'text', text: textAfterLastSlot, template: null });\n        }\n\n        return parsedSlots;\n    }\n}\n\n/**\n * @docs-private\n */\n@Component({\n    selector: 'kbq-dynamic-translation-with-dynamic-component-creation',\n    imports: [KbqDynamicTranslation, KbqDynamicTranslationSlot],\n    template: `\n        <kbq-dynamic-translation [text]=\"text()\">\n            @for (slot of slots(); track $index) {\n                <ng-container *kbqDynamicTranslationSlot=\"slot.name; let content\">\n                    <span\n                        #replaceableSlotContainer\n                        [attr.data-slot-name]=\"slot.name\"\n                        [attr.data-slot-content]=\"slot.content || content\"\n                    ></span>\n                </ng-container>\n            }\n        </kbq-dynamic-translation>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class KbqDynamicTranslationHelper {\n    private readonly renderer = inject(Renderer2);\n    private readonly replaceableSlotContainers = viewChildren<ElementRef<HTMLElement>>('replaceableSlotContainer');\n    private readonly slotsByName = new Map<string, KbqDynamicTranslationHelperSlot>();\n\n    readonly text = input.required<string>();\n\n    readonly slots = input.required<KbqDynamicTranslationHelperSlot[]>();\n\n    constructor() {\n        effect(() => {\n            this.slotsByName.clear();\n            this.slots().forEach((slot) => this.slotsByName.set(slot.name, slot));\n        });\n\n        afterNextRender(() => {\n            this.replaceSlots();\n        });\n    }\n\n    private replaceSlots(): void {\n        this.replaceableSlotContainers().forEach(({ nativeElement }: ElementRef<HTMLElement>) => {\n            const slotName = nativeElement.getAttribute('data-slot-name')!;\n            const slotContent = nativeElement.getAttribute('data-slot-content')!;\n            const { tag, attributes } = this.slotsByName.get(slotName)!;\n            const elementToRender = this.renderer.createElement(tag);\n\n            this.renderer.appendChild(elementToRender, this.renderer.createText(slotContent));\n\n            attributes?.forEach(({ key, value }) => this.renderer.setAttribute(elementToRender, key, value));\n\n            nativeElement.replaceWith(elementToRender);\n        });\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { KbqDynamicTranslation, KbqDynamicTranslationHelper, KbqDynamicTranslationSlot } from './dynamic-translation';\n\nconst COMPONENTS = [\n    KbqDynamicTranslationSlot,\n    KbqDynamicTranslationHelper,\n    KbqDynamicTranslation\n];\n\n@NgModule({\n    imports: COMPONENTS,\n    exports: COMPONENTS\n})\nexport class KbqDynamicTranslationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"koobiq-components-dynamic-translation.mjs","sources":["../../../packages/components/dynamic-translation/dynamic-translation.ts","../../../packages/components/dynamic-translation/module.ts","../../../packages/components/dynamic-translation/koobiq-components-dynamic-translation.ts"],"sourcesContent":["import { NgTemplateOutlet } from '@angular/common';\nimport {\n    afterNextRender,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    contentChildren,\n    Directive,\n    effect,\n    ElementRef,\n    inject,\n    input,\n    Renderer2,\n    Signal,\n    TemplateRef,\n    viewChildren\n} from '@angular/core';\n\n/**\n * @docs-private\n */\ntype KbqDynamicTranslationParsedSlot = {\n    type: 'text' | 'slot';\n    template: TemplateRef<unknown> | null;\n    context?: { $implicit: unknown };\n    text?: string;\n};\n\n/**\n * @docs-private\n */\nexport interface KbqDynamicTranslationHelperSlot {\n    name: string;\n    tag: string;\n    attributes?: { key: string; value: string }[];\n    content?: string;\n}\n\n/**\n * Directive for defining a dynamic translation slot.\n */\n@Directive({\n    selector: '[kbqDynamicTranslationSlot]'\n})\nexport class KbqDynamicTranslationSlot {\n    /**\n     * The name of the dynamic translation slot.\n     */\n    readonly name = input.required<string>({ alias: 'kbqDynamicTranslationSlot' });\n\n    /**\n     * @docs-private\n     */\n    readonly templateRef = inject(TemplateRef);\n}\n\n/**\n * Component for dynamic translation.\n */\n@Component({\n    selector: 'kbq-dynamic-translation',\n    imports: [NgTemplateOutlet],\n    template: `\n        @for (slot of parsedSlots(); track $index) {\n            @switch (slot.type) {\n                @case ('slot') {\n                    <ng-container *ngTemplateOutlet=\"slot.template; context: slot.context\" />\n                }\n                @default {\n                    <ng-container>{{ slot.text }}</ng-container>\n                }\n            }\n        }\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class KbqDynamicTranslation {\n    private readonly slots = contentChildren(KbqDynamicTranslationSlot);\n\n    /**\n     * The text which will be translated.\n     */\n    readonly text = input.required<string>();\n\n    /**\n     * @docs-private\n     */\n    protected readonly parsedSlots: Signal<KbqDynamicTranslationParsedSlot[]> = computed(() =>\n        this.parseSlots(this.text(), this.slots())\n    );\n\n    private parseSlots(\n        text: string,\n        slots: ReadonlyArray<KbqDynamicTranslationSlot>\n    ): KbqDynamicTranslationParsedSlot[] {\n        const slotTemplatesByName = slots.reduce<Record<string, TemplateRef<unknown>>>((map, { name, templateRef }) => {\n            const slotName = name();\n\n            if (slotName) map[slotName] = templateRef;\n\n            return map;\n        }, {});\n        const parsedSlots: KbqDynamicTranslationParsedSlot[] = [];\n        const slotSelector = new RegExp(`\\\\[\\\\[(${Object.keys(slotTemplatesByName).join('|')})(?::(.+?))?\\\\]\\\\]`, 'g');\n        let match: RegExpExecArray | null;\n        let lastIndex = 0;\n\n        while ((match = slotSelector.exec(text)) !== null) {\n            const [slotMatch, slotName, slotText] = match;\n            const [listMatch, listString] = new RegExp('^\\\\((.*?)\\\\)$', 'g').exec(slotText) ?? [];\n            const textBeforeSlot = text.substring(lastIndex, +match.index);\n\n            if (textBeforeSlot) {\n                parsedSlots.push({ type: 'text', text: textBeforeSlot, template: null });\n            }\n\n            parsedSlots.push({\n                type: 'slot',\n                template: slotTemplatesByName[slotName] || null,\n                context: { $implicit: listMatch && listString ? listString.split(',') : slotText }\n            });\n\n            lastIndex = match.index + slotMatch.length;\n        }\n\n        const textAfterLastSlot = text.substring(lastIndex);\n\n        if (textAfterLastSlot) {\n            parsedSlots.push({ type: 'text', text: textAfterLastSlot, template: null });\n        }\n\n        return parsedSlots;\n    }\n}\n\n/**\n * @docs-private\n */\n@Component({\n    selector: 'kbq-dynamic-translation-with-dynamic-component-creation',\n    imports: [KbqDynamicTranslation, KbqDynamicTranslationSlot],\n    template: `\n        <kbq-dynamic-translation [text]=\"text()\">\n            @for (slot of slots(); track $index) {\n                <ng-container *kbqDynamicTranslationSlot=\"slot.name; let content\">\n                    <span\n                        #replaceableSlotContainer\n                        [attr.data-slot-name]=\"slot.name\"\n                        [attr.data-slot-content]=\"slot.content || content\"\n                    ></span>\n                </ng-container>\n            }\n        </kbq-dynamic-translation>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class KbqDynamicTranslationHelper {\n    private readonly renderer = inject(Renderer2);\n    private readonly replaceableSlotContainers = viewChildren<ElementRef<HTMLElement>>('replaceableSlotContainer');\n    private readonly slotsByName = new Map<string, KbqDynamicTranslationHelperSlot>();\n\n    readonly text = input.required<string>();\n\n    readonly slots = input.required<KbqDynamicTranslationHelperSlot[]>();\n\n    constructor() {\n        effect(() => {\n            this.slotsByName.clear();\n            this.slots().forEach((slot) => this.slotsByName.set(slot.name, slot));\n        });\n\n        afterNextRender(() => {\n            this.replaceSlots();\n        });\n    }\n\n    private replaceSlots(): void {\n        this.replaceableSlotContainers().forEach(({ nativeElement }: ElementRef<HTMLElement>) => {\n            const slotName = nativeElement.getAttribute('data-slot-name')!;\n            const slotContent = nativeElement.getAttribute('data-slot-content')!;\n            const { tag, attributes } = this.slotsByName.get(slotName)!;\n            const elementToRender = this.renderer.createElement(tag);\n\n            this.renderer.appendChild(elementToRender, this.renderer.createText(slotContent));\n\n            attributes?.forEach(({ key, value }) => this.renderer.setAttribute(elementToRender, key, value));\n\n            nativeElement.replaceWith(elementToRender);\n        });\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { KbqDynamicTranslation, KbqDynamicTranslationHelper, KbqDynamicTranslationSlot } from './dynamic-translation';\n\nconst COMPONENTS = [\n    KbqDynamicTranslationSlot,\n    KbqDynamicTranslationHelper,\n    KbqDynamicTranslation\n];\n\n@NgModule({\n    imports: COMPONENTS,\n    exports: COMPONENTS\n})\nexport class KbqDynamicTranslationModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/koobiq-components-ellipsis-center.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, numberAttribute, Input, Directive, NgModule } from '@angular/core';
+import { inject, ChangeDetectorRef, input, numberAttribute, Input, Directive, NgModule } from '@angular/core';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { Subject, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
@@ -9,17 +9,19 @@ class KbqEllipsisCenterDirective extends KbqTooltipTrigger {
     constructor() {
         super(...arguments);
         this.cdr = inject(ChangeDetectorRef);
-        this.minVisibleLength = MIN_VISIBLE_LENGTH;
-        this.charWidth = 7;
+        this.minVisibleLength = input(MIN_VISIBLE_LENGTH, ...(ngDevMode ? [{ debugName: "minVisibleLength" }] : []));
+        this.charWidth = input(7, ...(ngDevMode ? [{ debugName: "charWidth" }] : []));
         /**
          * Debounce time (ms) for resize events before recalculating ellipsis position.
          * @default 50
          */
-        this.debounceInterval = 50;
+        this.debounceInterval = input(50, ...(ngDevMode ? [{ debugName: "debounceInterval", transform: numberAttribute }] : [{ transform: numberAttribute }]));
         /** @docs-private */
         this.resizeStream = new Subject();
         this.resizeSubscription = Subscription.EMPTY;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     set kbqEllipsisCenter(value) {
         this._kbqEllipsisCenter = value;
         this.refresh();
@@ -33,7 +35,7 @@ class KbqEllipsisCenterDirective extends KbqTooltipTrigger {
     }
     ngAfterViewInit() {
         this.resizeSubscription = this.resizeStream
-            .pipe(debounceTime(this.debounceInterval))
+            .pipe(debounceTime(this.debounceInterval()))
             .subscribe(() => this.refresh());
     }
     ngOnDestroy() {
@@ -70,7 +72,7 @@ class KbqEllipsisCenterDirective extends KbqTooltipTrigger {
                 end = this._kbqEllipsisCenter;
             }
             else {
-                const averageCharWidth = this.charWidth;
+                const averageCharWidth = this.charWidth();
                 const lastCharsLength = Math.round(this.elementRef.nativeElement.clientWidth / 2 / averageCharWidth);
                 const sliceIndex = Math.round(this._kbqEllipsisCenter.length - lastCharsLength);
                 start = this._kbqEllipsisCenter.slice(0, sliceIndex);
@@ -83,10 +85,10 @@ class KbqEllipsisCenterDirective extends KbqTooltipTrigger {
         this.renderer.appendChild(this.elementRef.nativeElement, dataTextStart);
         this.renderer.appendChild(this.elementRef.nativeElement, dataTextEnd);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqEllipsisCenterDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: KbqEllipsisCenterDirective, isStandalone: true, selector: "[kbqEllipsisCenter]", inputs: { kbqEllipsisCenter: "kbqEllipsisCenter", minVisibleLength: "minVisibleLength", charWidth: "charWidth", debounceInterval: ["debounceInterval", "debounceInterval", numberAttribute] }, host: { listeners: { "window:resize": "resizeStream.next($event)" }, classAttribute: "kbq-ellipsis-center" }, usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqEllipsisCenterDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqEllipsisCenterDirective, isStandalone: true, selector: "[kbqEllipsisCenter]", inputs: { kbqEllipsisCenter: { classPropertyName: "kbqEllipsisCenter", publicName: "kbqEllipsisCenter", isSignal: false, isRequired: false, transformFunction: null }, minVisibleLength: { classPropertyName: "minVisibleLength", publicName: "minVisibleLength", isSignal: true, isRequired: false, transformFunction: null }, charWidth: { classPropertyName: "charWidth", publicName: "charWidth", isSignal: true, isRequired: false, transformFunction: null }, debounceInterval: { classPropertyName: "debounceInterval", publicName: "debounceInterval", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "resizeStream.next($event)" }, classAttribute: "kbq-ellipsis-center" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqEllipsisCenterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqEllipsisCenterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqEllipsisCenter]',
@@ -97,20 +99,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }], propDecorators: { kbqEllipsisCenter: [{
                 type: Input
-            }], minVisibleLength: [{
-                type: Input
-            }], charWidth: [{
-                type: Input
-            }], debounceInterval: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }] } });
+            }], minVisibleLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minVisibleLength", required: false }] }], charWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "charWidth", required: false }] }], debounceInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceInterval", required: false }] }] } });
 class KbqEllipsisCenterModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqEllipsisCenterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqEllipsisCenterModule, imports: [KbqEllipsisCenterDirective], exports: [KbqEllipsisCenterDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqEllipsisCenterModule }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqEllipsisCenterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqEllipsisCenterModule, imports: [KbqEllipsisCenterDirective], exports: [KbqEllipsisCenterDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqEllipsisCenterModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqEllipsisCenterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqEllipsisCenterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [KbqEllipsisCenterDirective],

package/fesm2022/koobiq-components-ellipsis-center.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koobiq-components-ellipsis-center.mjs","sources":["../../../packages/components/ellipsis-center/ellipsis-center.directive.ts","../../../packages/components/ellipsis-center/koobiq-components-ellipsis-center.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    ChangeDetectorRef,\n    Directive,\n    inject,\n    Input,\n    NgModule,\n    numberAttribute,\n    OnDestroy,\n    OnInit\n} from '@angular/core';\nimport { KbqTooltipTrigger } from '@koobiq/components/tooltip';\nimport { Subject, Subscription } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\n\nconst MIN_VISIBLE_LENGTH = 50;\n\n@Directive({\n    selector: '[kbqEllipsisCenter]',\n    host: {\n        class: 'kbq-ellipsis-center',\n        '(window:resize)': 'resizeStream.next($event)'\n    }\n})\nexport class KbqEllipsisCenterDirective extends KbqTooltipTrigger implements OnInit, AfterViewInit, OnDestroy {\n    private cdr: ChangeDetectorRef = inject(ChangeDetectorRef);\n\n    @Input() set kbqEllipsisCenter(value: string) {\n        this._kbqEllipsisCenter = value;\n        this.refresh();\n        // check the view to properly calculate text-start and text-end on text initialized\n        this.cdr.detectChanges();\n    }\n\n    @Input() minVisibleLength: number = MIN_VISIBLE_LENGTH;\n\n    @Input() charWidth = 7;\n\n    /**\n     * Debounce time (ms) for resize events before recalculating ellipsis position.\n     * @default 50\n     */\n    @Input({ transform: numberAttribute }) debounceInterval: number = 50;\n\n    /** @docs-private */\n    readonly resizeStream = new Subject<Event>();\n\n    private _kbqEllipsisCenter: string;\n\n    private resizeSubscription = Subscription.EMPTY;\n\n    override ngOnInit(): void {\n        super.ngOnInit();\n        this.content = this._kbqEllipsisCenter;\n        this.refresh();\n    }\n\n    ngAfterViewInit(): void {\n        this.resizeSubscription = this.resizeStream\n            .pipe(debounceTime(this.debounceInterval))\n            .subscribe(() => this.refresh());\n    }\n\n    ngOnDestroy() {\n        super.ngOnDestroy();\n        this.resizeSubscription.unsubscribe();\n    }\n\n    /**\n     * Updates the displayed text with center ellipsis truncation based on container width.\n     * Recreates start/end span elements, measures available space, and adjusts text accordingly.\n     * @docs-private\n     */\n    refresh(): void {\n        let start = '';\n        let end = '';\n\n        this.content = this._kbqEllipsisCenter;\n\n        const [dataTextStart, dataTextEnd] = [\n            'kbq-ellipsis-center_data-text-start',\n            'kbq-ellipsis-center_data-text-end'\n        ].map((querySelector) => {\n            const element = this.elementRef.nativeElement.querySelector(`.${querySelector}`);\n\n            if (element) {\n                this.renderer.removeChild(this.elementRef.nativeElement, element);\n            }\n\n            const newElement = this.renderer.createElement('span');\n\n            this.renderer.addClass(newElement, querySelector);\n\n            return newElement;\n        });\n\n        this.renderer.appendChild(dataTextStart, this.renderer.createText(this._kbqEllipsisCenter));\n        this.renderer.appendChild(dataTextEnd, this.renderer.createText(end));\n        setTimeout(() => {\n            this.disabled = this.elementRef.nativeElement.clientWidth > dataTextStart.scrollWidth;\n\n            if (this.disabled) {\n                start = '';\n                end = this._kbqEllipsisCenter;\n            } else {\n                const averageCharWidth = this.charWidth;\n                const lastCharsLength = Math.round(this.elementRef.nativeElement.clientWidth / 2 / averageCharWidth);\n                const sliceIndex: number = Math.round(this._kbqEllipsisCenter.length - lastCharsLength);\n\n                start = this._kbqEllipsisCenter.slice(0, sliceIndex);\n                end = this._kbqEllipsisCenter.slice(sliceIndex);\n            }\n\n            dataTextStart.innerText = start;\n            dataTextEnd.innerText = end;\n\n            this.cdr.markForCheck();\n        });\n\n        this.renderer.appendChild(this.elementRef.nativeElement, dataTextStart);\n        this.renderer.appendChild(this.elementRef.nativeElement, dataTextEnd);\n    }\n}\n\n@NgModule({\n    imports: [KbqEllipsisCenterDirective],\n    exports: [KbqEllipsisCenterDirective]\n})\nexport class KbqEllipsisCenterModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"koobiq-components-ellipsis-center.mjs","sources":["../../../packages/components/ellipsis-center/ellipsis-center.directive.ts","../../../packages/components/ellipsis-center/koobiq-components-ellipsis-center.ts"],"sourcesContent":["import {\n    AfterViewInit,\n    ChangeDetectorRef,\n    Directive,\n    inject,\n    Input,\n    input,\n    NgModule,\n    numberAttribute,\n    OnDestroy,\n    OnInit\n} from '@angular/core';\nimport { KbqTooltipTrigger } from '@koobiq/components/tooltip';\nimport { Subject, Subscription } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\n\nconst MIN_VISIBLE_LENGTH = 50;\n\n@Directive({\n    selector: '[kbqEllipsisCenter]',\n    host: {\n        class: 'kbq-ellipsis-center',\n        '(window:resize)': 'resizeStream.next($event)'\n    }\n})\nexport class KbqEllipsisCenterDirective extends KbqTooltipTrigger implements OnInit, AfterViewInit, OnDestroy {\n    private cdr: ChangeDetectorRef = inject(ChangeDetectorRef);\n\n    // TODO: Skipped for migration because:\n    //  Accessor inputs cannot be migrated as they are too complex.\n    @Input() set kbqEllipsisCenter(value: string) {\n        this._kbqEllipsisCenter = value;\n        this.refresh();\n        // check the view to properly calculate text-start and text-end on text initialized\n        this.cdr.detectChanges();\n    }\n\n    readonly minVisibleLength = input<number>(MIN_VISIBLE_LENGTH);\n\n    readonly charWidth = input(7);\n\n    /**\n     * Debounce time (ms) for resize events before recalculating ellipsis position.\n     * @default 50\n     */\n    readonly debounceInterval = input<number, unknown>(50, { transform: numberAttribute });\n\n    /** @docs-private */\n    readonly resizeStream = new Subject<Event>();\n\n    private _kbqEllipsisCenter: string;\n\n    private resizeSubscription = Subscription.EMPTY;\n\n    override ngOnInit(): void {\n        super.ngOnInit();\n        this.content = this._kbqEllipsisCenter;\n        this.refresh();\n    }\n\n    ngAfterViewInit(): void {\n        this.resizeSubscription = this.resizeStream\n            .pipe(debounceTime(this.debounceInterval()))\n            .subscribe(() => this.refresh());\n    }\n\n    ngOnDestroy() {\n        super.ngOnDestroy();\n        this.resizeSubscription.unsubscribe();\n    }\n\n    /**\n     * Updates the displayed text with center ellipsis truncation based on container width.\n     * Recreates start/end span elements, measures available space, and adjusts text accordingly.\n     * @docs-private\n     */\n    refresh(): void {\n        let start = '';\n        let end = '';\n\n        this.content = this._kbqEllipsisCenter;\n\n        const [dataTextStart, dataTextEnd] = [\n            'kbq-ellipsis-center_data-text-start',\n            'kbq-ellipsis-center_data-text-end'\n        ].map((querySelector) => {\n            const element = this.elementRef.nativeElement.querySelector(`.${querySelector}`);\n\n            if (element) {\n                this.renderer.removeChild(this.elementRef.nativeElement, element);\n            }\n\n            const newElement = this.renderer.createElement('span');\n\n            this.renderer.addClass(newElement, querySelector);\n\n            return newElement;\n        });\n\n        this.renderer.appendChild(dataTextStart, this.renderer.createText(this._kbqEllipsisCenter));\n        this.renderer.appendChild(dataTextEnd, this.renderer.createText(end));\n        setTimeout(() => {\n            this.disabled = this.elementRef.nativeElement.clientWidth > dataTextStart.scrollWidth;\n\n            if (this.disabled) {\n                start = '';\n                end = this._kbqEllipsisCenter;\n            } else {\n                const averageCharWidth = this.charWidth();\n                const lastCharsLength = Math.round(this.elementRef.nativeElement.clientWidth / 2 / averageCharWidth);\n                const sliceIndex: number = Math.round(this._kbqEllipsisCenter.length - lastCharsLength);\n\n                start = this._kbqEllipsisCenter.slice(0, sliceIndex);\n                end = this._kbqEllipsisCenter.slice(sliceIndex);\n            }\n\n            dataTextStart.innerText = start;\n            dataTextEnd.innerText = end;\n\n            this.cdr.markForCheck();\n        });\n\n        this.renderer.appendChild(this.elementRef.nativeElement, dataTextStart);\n        this.renderer.appendChild(this.elementRef.nativeElement, dataTextEnd);\n    }\n}\n\n@NgModule({\n    imports: [KbqEllipsisCenterDirective],\n    exports: [KbqEllipsisCenterDirective]\n})\nexport class KbqEllipsisCenterModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/koobiq-components-empty-state.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { Optional, Directive, ContentChild, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
-import * as i1 from '@koobiq/components/icon';
+import { inject, Directive, input, ContentChild, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { KbqIconItem } from '@koobiq/components/icon';
 import { A11yModule } from '@angular/cdk/a11y';
 import { PlatformModule } from '@angular/cdk/platform';
 
 class KbqEmptyStateIcon {
-    constructor(icon) {
-        this.icon = icon;
+    constructor() {
+        this.icon = inject(KbqIconItem, { optional: true });
     }
     setErrorColor() {
         if (!this.icon) {
@@ -14,10 +14,10 @@ class KbqEmptyStateIcon {
         }
         this.icon.color = 'error';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqEmptyStateIcon, deps: [{ token: i1.KbqIconItem, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqEmptyStateIcon, isStandalone: true, selector: "[kbq-empty-state-icon]", host: { classAttribute: "kbq-empty-state-icon" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqEmptyStateIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqEmptyStateIcon, isStandalone: true, selector: "[kbq-empty-state-icon]", host: { classAttribute: "kbq-empty-state-icon" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqEmptyStateIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqEmptyStateIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-empty-state-icon]',
@@ -25,14 +25,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         class: 'kbq-empty-state-icon'
                     }
                 }]
-        }], ctorParameters: () => [{ type: i1.KbqIconItem, decorators: [{
-                    type: Optional
-                }] }] });
+        }] });
 class KbqEmptyStateText {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqEmptyStateText, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqEmptyStateText, isStandalone: true, selector: "[kbq-empty-state-text]", host: { classAttribute: "kbq-empty-state-text" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqEmptyStateText, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqEmptyStateText, isStandalone: true, selector: "[kbq-empty-state-text]", host: { classAttribute: "kbq-empty-state-text" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqEmptyStateText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqEmptyStateText, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-empty-state-text]',
@@ -42,10 +40,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 class KbqEmptyStateTitle {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqEmptyStateTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqEmptyStateTitle, isStandalone: true, selector: "[kbq-empty-state-title]", host: { classAttribute: "kbq-empty-state-title" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqEmptyStateTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqEmptyStateTitle, isStandalone: true, selector: "[kbq-empty-state-title]", host: { classAttribute: "kbq-empty-state-title" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqEmptyStateTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqEmptyStateTitle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-empty-state-title]',
@@ -55,10 +53,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }] });
 class KbqEmptyStateActions {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqEmptyStateActions, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqEmptyStateActions, isStandalone: true, selector: "[kbq-empty-state-actions]", host: { classAttribute: "kbq-empty-state-actions" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqEmptyStateActions, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqEmptyStateActions, isStandalone: true, selector: "[kbq-empty-state-actions]", host: { classAttribute: "kbq-empty-state-actions" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqEmptyStateActions, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqEmptyStateActions, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-empty-state-actions]',
@@ -69,8 +67,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
         }] });
 class KbqEmptyState {
     constructor() {
-        this.errorColor = false;
-        this.alignTop = false;
+        this.errorColor = input(false, ...(ngDevMode ? [{ debugName: "errorColor" }] : []));
+        this.alignTop = input(false, ...(ngDevMode ? [{ debugName: "alignTop" }] : []));
+        // TODO: Skipped for migration because:
+        //  Your application code writes to the input. This prevents migration.
         this.size = 'normal';
     }
     /**
@@ -80,29 +80,25 @@ class KbqEmptyState {
         return `kbq-empty-state_${this.size}`;
     }
     ngAfterContentInit() {
-        if (this.errorColor && this.icon) {
+        if (this.errorColor() && this.icon) {
             this.icon.setErrorColor();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqEmptyState, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: KbqEmptyState, isStandalone: true, selector: "kbq-empty-state", inputs: { errorColor: "errorColor", alignTop: "alignTop", size: "size" }, host: { properties: { "class": "emptyStateSizeClass", "class.kbq-empty-state_align-center": "!alignTop", "class.kbq-empty-state_align-top": "alignTop", "class.kbq-empty-state_normal-color": "!errorColor", "class.kbq-empty-state_error-color": "errorColor", "class.kbq-empty-state_has-icon": "!!icon" }, classAttribute: "kbq-empty-state" }, queries: [{ propertyName: "icon", first: true, predicate: KbqEmptyStateIcon, descendants: true }], ngImport: i0, template: "<ng-content select=\"[kbq-empty-state-icon]\" />\n\n<ng-content select=\"[kbq-empty-state-title]\" />\n\n<ng-content select=\"[kbq-empty-state-text]\" />\n\n<ng-content select=\"[kbq-empty-state-actions]\" />\n", styles: [".kbq-empty-state{display:flex;flex-direction:column;align-items:center;flex:1}.kbq-empty-state.kbq-empty-state_compact{padding:var(--kbq-empty-state-size-compact-padding-top) var(--kbq-empty-state-size-compact-padding-horizontal) var(--kbq-empty-state-size-compact-padding-bottom)}.kbq-empty-state.kbq-empty-state_compact .kbq-empty-state-icon{margin-bottom:var(--kbq-empty-state-size-compact-image-margin-bottom)}.kbq-empty-state.kbq-empty-state_compact .kbq-empty-state-text{max-width:var(--kbq-empty-state-size-compact-max-width)}.kbq-empty-state.kbq-empty-state_compact .kbq-empty-state-title{max-width:var(--kbq-empty-state-size-compact-max-width);margin-bottom:var(--kbq-empty-state-size-compact-title-margin-bottom)}.kbq-empty-state.kbq-empty-state_compact .kbq-empty-state-actions{max-width:var(--kbq-empty-state-size-compact-max-width);margin-top:var(--kbq-empty-state-size-compact-actions-margin-top)}.kbq-empty-state.kbq-empty-state_compact.kbq-empty-state_align-center.kbq-empty-state_has-icon{margin-bottom:var(--kbq-empty-state-size-compact-image-addon-height)}.kbq-empty-state.kbq-empty-state_normal{padding:var(--kbq-empty-state-size-normal-padding-top) var(--kbq-empty-state-size-normal-padding-horizontal) var(--kbq-empty-state-size-normal-padding-bottom)}.kbq-empty-state.kbq-empty-state_normal .kbq-empty-state-icon{margin-bottom:var(--kbq-empty-state-size-normal-image-margin-bottom)}.kbq-empty-state.kbq-empty-state_normal .kbq-empty-state-text{max-width:var(--kbq-empty-state-size-normal-max-width)}.kbq-empty-state.kbq-empty-state_normal .kbq-empty-state-title{max-width:var(--kbq-empty-state-size-normal-max-width);margin-bottom:var(--kbq-empty-state-size-normal-title-margin-bottom)}.kbq-empty-state.kbq-empty-state_normal .kbq-empty-state-actions{max-width:var(--kbq-empty-state-size-normal-max-width);margin-top:var(--kbq-empty-state-size-normal-actions-margin-top)}.kbq-empty-state.kbq-empty-state_normal.kbq-empty-state_align-center.kbq-empty-state_has-icon{margin-bottom:var(--kbq-empty-state-size-normal-image-addon-height)}.kbq-empty-state.kbq-empty-state_big{padding:var(--kbq-empty-state-size-big-padding-top) var(--kbq-empty-state-size-big-padding-horizontal) var(--kbq-empty-state-size-big-padding-bottom)}.kbq-empty-state.kbq-empty-state_big .kbq-empty-state-icon{margin-bottom:var(--kbq-empty-state-size-big-image-margin-bottom)}.kbq-empty-state.kbq-empty-state_big .kbq-empty-state-text{max-width:var(--kbq-empty-state-size-big-max-width)}.kbq-empty-state.kbq-empty-state_big .kbq-empty-state-title{max-width:var(--kbq-empty-state-size-big-max-width);margin-bottom:var(--kbq-empty-state-size-big-title-margin-bottom)}.kbq-empty-state.kbq-empty-state_big .kbq-empty-state-actions{max-width:var(--kbq-empty-state-size-big-max-width);margin-top:var(--kbq-empty-state-size-big-actions-margin-top)}.kbq-empty-state.kbq-empty-state_big.kbq-empty-state_align-center.kbq-empty-state_has-icon{margin-bottom:var(--kbq-empty-state-size-big-image-addon-height)}.kbq-empty-state.kbq-empty-state_align-center{justify-content:center}.kbq-empty-state.kbq-empty-state_align-top{justify-content:flex-start}.kbq-empty-state_normal-color .kbq-empty-state-title{color:var(--kbq-empty-state-title)}.kbq-empty-state_normal-color .kbq-empty-state-text{color:var(--kbq-empty-state-color)}.kbq-empty-state_error-color .kbq-empty-state-title{color:var(--kbq-empty-state-error-title)}.kbq-empty-state_error-color .kbq-empty-state-text{color:var(--kbq-empty-state-error-color)}.kbq-empty-state-title,.kbq-empty-state-text{text-align:center}.kbq-empty-state_compact .kbq-empty-state-title{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-empty-state_compact .kbq-empty-state-text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-empty-state_normal .kbq-empty-state-title{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-empty-state_normal .kbq-empty-state-text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-empty-state_big .kbq-empty-state-title{font-size:var(--kbq-typography-headline-font-size);font-style:var(--kbq-typography-headline-font-style);font-weight:var(--kbq-typography-headline-font-weight);line-height:var(--kbq-typography-headline-line-height);font-family:var(--kbq-typography-headline-font-family);text-transform:var(--kbq-typography-headline-text-transform);font-feature-settings:var(--kbq-typography-headline-font-feature-settings);letter-spacing:var(--kbq-typography-headline-letter-spacing)}.kbq-empty-state_big .kbq-empty-state-text{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}\n", ":where(.kbq-empty-state){--kbq-empty-state-size-big-max-width: 480px;--kbq-empty-state-size-big-padding-horizontal: var(--kbq-size-6xl);--kbq-empty-state-size-big-padding-top: var(--kbq-size-5xl);--kbq-empty-state-size-big-padding-bottom: var(--kbq-size-5xl);--kbq-empty-state-size-big-actions-margin-top: var(--kbq-size-xl);--kbq-empty-state-size-big-image-margin-bottom: var(--kbq-size-3xl);--kbq-empty-state-size-big-image-addon-height: var(--kbq-size-6xl);--kbq-empty-state-size-big-title-margin-bottom: var(--kbq-size-l);--kbq-empty-state-size-normal-max-width: 320px;--kbq-empty-state-size-normal-padding-horizontal: var(--kbq-size-3xl);--kbq-empty-state-size-normal-padding-top: var(--kbq-size-3xl);--kbq-empty-state-size-normal-padding-bottom: var(--kbq-size-3xl);--kbq-empty-state-size-normal-actions-margin-top: var(--kbq-size-s);--kbq-empty-state-size-normal-image-margin-bottom: var(--kbq-size-xl);--kbq-empty-state-size-normal-image-addon-height: var(--kbq-size-xxl);--kbq-empty-state-size-normal-title-margin-bottom: var(--kbq-size-xxs);--kbq-empty-state-size-compact-max-width: 320px;--kbq-empty-state-size-compact-padding-horizontal: var(--kbq-size-3xl);--kbq-empty-state-size-compact-padding-top: var(--kbq-size-3xl);--kbq-empty-state-size-compact-padding-bottom: var(--kbq-size-3xl);--kbq-empty-state-size-compact-actions-margin-top: var(--kbq-size-s);--kbq-empty-state-size-compact-image-margin-bottom: var(--kbq-size-m);--kbq-empty-state-size-compact-image-addon-height: 0;--kbq-empty-state-size-compact-title-margin-bottom: var(--kbq-size-xxs);--kbq-empty-state-title: var(--kbq-foreground-contrast);--kbq-empty-state-color: var(--kbq-foreground-contrast-secondary);--kbq-empty-state-error-title: var(--kbq-foreground-error);--kbq-empty-state-error-color: var(--kbq-foreground-error)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqEmptyState, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.25", type: KbqEmptyState, isStandalone: true, selector: "kbq-empty-state", inputs: { errorColor: { classPropertyName: "errorColor", publicName: "errorColor", isSignal: true, isRequired: false, transformFunction: null }, alignTop: { classPropertyName: "alignTop", publicName: "alignTop", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class": "emptyStateSizeClass", "class.kbq-empty-state_align-center": "!alignTop()", "class.kbq-empty-state_align-top": "alignTop()", "class.kbq-empty-state_normal-color": "!errorColor()", "class.kbq-empty-state_error-color": "errorColor()", "class.kbq-empty-state_has-icon": "!!icon" }, classAttribute: "kbq-empty-state" }, queries: [{ propertyName: "icon", first: true, predicate: KbqEmptyStateIcon, descendants: true }], ngImport: i0, template: "<ng-content select=\"[kbq-empty-state-icon]\" />\n\n<ng-content select=\"[kbq-empty-state-title]\" />\n\n<ng-content select=\"[kbq-empty-state-text]\" />\n\n<ng-content select=\"[kbq-empty-state-actions]\" />\n", styles: [".kbq-empty-state{display:flex;flex-direction:column;align-items:center;flex:1}.kbq-empty-state.kbq-empty-state_compact{padding:var(--kbq-empty-state-size-compact-padding-top) var(--kbq-empty-state-size-compact-padding-horizontal) var(--kbq-empty-state-size-compact-padding-bottom)}.kbq-empty-state.kbq-empty-state_compact .kbq-empty-state-icon{margin-bottom:var(--kbq-empty-state-size-compact-image-margin-bottom)}.kbq-empty-state.kbq-empty-state_compact .kbq-empty-state-text{max-width:var(--kbq-empty-state-size-compact-max-width)}.kbq-empty-state.kbq-empty-state_compact .kbq-empty-state-title{max-width:var(--kbq-empty-state-size-compact-max-width);margin-bottom:var(--kbq-empty-state-size-compact-title-margin-bottom)}.kbq-empty-state.kbq-empty-state_compact .kbq-empty-state-actions{max-width:var(--kbq-empty-state-size-compact-max-width);margin-top:var(--kbq-empty-state-size-compact-actions-margin-top)}.kbq-empty-state.kbq-empty-state_compact.kbq-empty-state_align-center.kbq-empty-state_has-icon{margin-bottom:var(--kbq-empty-state-size-compact-image-addon-height)}.kbq-empty-state.kbq-empty-state_normal{padding:var(--kbq-empty-state-size-normal-padding-top) var(--kbq-empty-state-size-normal-padding-horizontal) var(--kbq-empty-state-size-normal-padding-bottom)}.kbq-empty-state.kbq-empty-state_normal .kbq-empty-state-icon{margin-bottom:var(--kbq-empty-state-size-normal-image-margin-bottom)}.kbq-empty-state.kbq-empty-state_normal .kbq-empty-state-text{max-width:var(--kbq-empty-state-size-normal-max-width)}.kbq-empty-state.kbq-empty-state_normal .kbq-empty-state-title{max-width:var(--kbq-empty-state-size-normal-max-width);margin-bottom:var(--kbq-empty-state-size-normal-title-margin-bottom)}.kbq-empty-state.kbq-empty-state_normal .kbq-empty-state-actions{max-width:var(--kbq-empty-state-size-normal-max-width);margin-top:var(--kbq-empty-state-size-normal-actions-margin-top)}.kbq-empty-state.kbq-empty-state_normal.kbq-empty-state_align-center.kbq-empty-state_has-icon{margin-bottom:var(--kbq-empty-state-size-normal-image-addon-height)}.kbq-empty-state.kbq-empty-state_big{padding:var(--kbq-empty-state-size-big-padding-top) var(--kbq-empty-state-size-big-padding-horizontal) var(--kbq-empty-state-size-big-padding-bottom)}.kbq-empty-state.kbq-empty-state_big .kbq-empty-state-icon{margin-bottom:var(--kbq-empty-state-size-big-image-margin-bottom)}.kbq-empty-state.kbq-empty-state_big .kbq-empty-state-text{max-width:var(--kbq-empty-state-size-big-max-width)}.kbq-empty-state.kbq-empty-state_big .kbq-empty-state-title{max-width:var(--kbq-empty-state-size-big-max-width);margin-bottom:var(--kbq-empty-state-size-big-title-margin-bottom)}.kbq-empty-state.kbq-empty-state_big .kbq-empty-state-actions{max-width:var(--kbq-empty-state-size-big-max-width);margin-top:var(--kbq-empty-state-size-big-actions-margin-top)}.kbq-empty-state.kbq-empty-state_big.kbq-empty-state_align-center.kbq-empty-state_has-icon{margin-bottom:var(--kbq-empty-state-size-big-image-addon-height)}.kbq-empty-state.kbq-empty-state_align-center{justify-content:center}.kbq-empty-state.kbq-empty-state_align-top{justify-content:flex-start}.kbq-empty-state_normal-color .kbq-empty-state-title{color:var(--kbq-empty-state-title)}.kbq-empty-state_normal-color .kbq-empty-state-text{color:var(--kbq-empty-state-color)}.kbq-empty-state_error-color .kbq-empty-state-title{color:var(--kbq-empty-state-error-title)}.kbq-empty-state_error-color .kbq-empty-state-text{color:var(--kbq-empty-state-error-color)}.kbq-empty-state-title,.kbq-empty-state-text{text-align:center}.kbq-empty-state_compact .kbq-empty-state-title{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-empty-state_compact .kbq-empty-state-text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-empty-state_normal .kbq-empty-state-title{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-empty-state_normal .kbq-empty-state-text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-empty-state_big .kbq-empty-state-title{font-size:var(--kbq-typography-headline-font-size);font-style:var(--kbq-typography-headline-font-style);font-weight:var(--kbq-typography-headline-font-weight);line-height:var(--kbq-typography-headline-line-height);font-family:var(--kbq-typography-headline-font-family);text-transform:var(--kbq-typography-headline-text-transform);font-feature-settings:var(--kbq-typography-headline-font-feature-settings);letter-spacing:var(--kbq-typography-headline-letter-spacing)}.kbq-empty-state_big .kbq-empty-state-text{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}\n", ":where(.kbq-empty-state){--kbq-empty-state-size-big-max-width: 480px;--kbq-empty-state-size-big-padding-horizontal: var(--kbq-size-6xl);--kbq-empty-state-size-big-padding-top: var(--kbq-size-5xl);--kbq-empty-state-size-big-padding-bottom: var(--kbq-size-5xl);--kbq-empty-state-size-big-actions-margin-top: var(--kbq-size-xl);--kbq-empty-state-size-big-image-margin-bottom: var(--kbq-size-3xl);--kbq-empty-state-size-big-image-addon-height: var(--kbq-size-6xl);--kbq-empty-state-size-big-title-margin-bottom: var(--kbq-size-l);--kbq-empty-state-size-normal-max-width: 320px;--kbq-empty-state-size-normal-padding-horizontal: var(--kbq-size-3xl);--kbq-empty-state-size-normal-padding-top: var(--kbq-size-3xl);--kbq-empty-state-size-normal-padding-bottom: var(--kbq-size-3xl);--kbq-empty-state-size-normal-actions-margin-top: var(--kbq-size-s);--kbq-empty-state-size-normal-image-margin-bottom: var(--kbq-size-xl);--kbq-empty-state-size-normal-image-addon-height: var(--kbq-size-xxl);--kbq-empty-state-size-normal-title-margin-bottom: var(--kbq-size-xxs);--kbq-empty-state-size-compact-max-width: 320px;--kbq-empty-state-size-compact-padding-horizontal: var(--kbq-size-3xl);--kbq-empty-state-size-compact-padding-top: var(--kbq-size-3xl);--kbq-empty-state-size-compact-padding-bottom: var(--kbq-size-3xl);--kbq-empty-state-size-compact-actions-margin-top: var(--kbq-size-s);--kbq-empty-state-size-compact-image-margin-bottom: var(--kbq-size-m);--kbq-empty-state-size-compact-image-addon-height: 0;--kbq-empty-state-size-compact-title-margin-bottom: var(--kbq-size-xxs);--kbq-empty-state-title: var(--kbq-foreground-contrast);--kbq-empty-state-color: var(--kbq-foreground-contrast-secondary);--kbq-empty-state-error-title: var(--kbq-foreground-error);--kbq-empty-state-error-color: var(--kbq-foreground-error)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqEmptyState, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqEmptyState, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-empty-state', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+            args: [{ selector: 'kbq-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-empty-state',
                         '[class]': 'emptyStateSizeClass',
-                        '[class.kbq-empty-state_align-center]': '!alignTop',
-                        '[class.kbq-empty-state_align-top]': 'alignTop',
-                        '[class.kbq-empty-state_normal-color]': '!errorColor',
-                        '[class.kbq-empty-state_error-color]': 'errorColor',
+                        '[class.kbq-empty-state_align-center]': '!alignTop()',
+                        '[class.kbq-empty-state_align-top]': 'alignTop()',
+                        '[class.kbq-empty-state_normal-color]': '!errorColor()',
+                        '[class.kbq-empty-state_error-color]': 'errorColor()',
                         '[class.kbq-empty-state_has-icon]': '!!icon'
                     }, template: "<ng-content select=\"[kbq-empty-state-icon]\" />\n\n<ng-content select=\"[kbq-empty-state-title]\" />\n\n<ng-content select=\"[kbq-empty-state-text]\" />\n\n<ng-content select=\"[kbq-empty-state-actions]\" />\n", styles: [".kbq-empty-state{display:flex;flex-direction:column;align-items:center;flex:1}.kbq-empty-state.kbq-empty-state_compact{padding:var(--kbq-empty-state-size-compact-padding-top) var(--kbq-empty-state-size-compact-padding-horizontal) var(--kbq-empty-state-size-compact-padding-bottom)}.kbq-empty-state.kbq-empty-state_compact .kbq-empty-state-icon{margin-bottom:var(--kbq-empty-state-size-compact-image-margin-bottom)}.kbq-empty-state.kbq-empty-state_compact .kbq-empty-state-text{max-width:var(--kbq-empty-state-size-compact-max-width)}.kbq-empty-state.kbq-empty-state_compact .kbq-empty-state-title{max-width:var(--kbq-empty-state-size-compact-max-width);margin-bottom:var(--kbq-empty-state-size-compact-title-margin-bottom)}.kbq-empty-state.kbq-empty-state_compact .kbq-empty-state-actions{max-width:var(--kbq-empty-state-size-compact-max-width);margin-top:var(--kbq-empty-state-size-compact-actions-margin-top)}.kbq-empty-state.kbq-empty-state_compact.kbq-empty-state_align-center.kbq-empty-state_has-icon{margin-bottom:var(--kbq-empty-state-size-compact-image-addon-height)}.kbq-empty-state.kbq-empty-state_normal{padding:var(--kbq-empty-state-size-normal-padding-top) var(--kbq-empty-state-size-normal-padding-horizontal) var(--kbq-empty-state-size-normal-padding-bottom)}.kbq-empty-state.kbq-empty-state_normal .kbq-empty-state-icon{margin-bottom:var(--kbq-empty-state-size-normal-image-margin-bottom)}.kbq-empty-state.kbq-empty-state_normal .kbq-empty-state-text{max-width:var(--kbq-empty-state-size-normal-max-width)}.kbq-empty-state.kbq-empty-state_normal .kbq-empty-state-title{max-width:var(--kbq-empty-state-size-normal-max-width);margin-bottom:var(--kbq-empty-state-size-normal-title-margin-bottom)}.kbq-empty-state.kbq-empty-state_normal .kbq-empty-state-actions{max-width:var(--kbq-empty-state-size-normal-max-width);margin-top:var(--kbq-empty-state-size-normal-actions-margin-top)}.kbq-empty-state.kbq-empty-state_normal.kbq-empty-state_align-center.kbq-empty-state_has-icon{margin-bottom:var(--kbq-empty-state-size-normal-image-addon-height)}.kbq-empty-state.kbq-empty-state_big{padding:var(--kbq-empty-state-size-big-padding-top) var(--kbq-empty-state-size-big-padding-horizontal) var(--kbq-empty-state-size-big-padding-bottom)}.kbq-empty-state.kbq-empty-state_big .kbq-empty-state-icon{margin-bottom:var(--kbq-empty-state-size-big-image-margin-bottom)}.kbq-empty-state.kbq-empty-state_big .kbq-empty-state-text{max-width:var(--kbq-empty-state-size-big-max-width)}.kbq-empty-state.kbq-empty-state_big .kbq-empty-state-title{max-width:var(--kbq-empty-state-size-big-max-width);margin-bottom:var(--kbq-empty-state-size-big-title-margin-bottom)}.kbq-empty-state.kbq-empty-state_big .kbq-empty-state-actions{max-width:var(--kbq-empty-state-size-big-max-width);margin-top:var(--kbq-empty-state-size-big-actions-margin-top)}.kbq-empty-state.kbq-empty-state_big.kbq-empty-state_align-center.kbq-empty-state_has-icon{margin-bottom:var(--kbq-empty-state-size-big-image-addon-height)}.kbq-empty-state.kbq-empty-state_align-center{justify-content:center}.kbq-empty-state.kbq-empty-state_align-top{justify-content:flex-start}.kbq-empty-state_normal-color .kbq-empty-state-title{color:var(--kbq-empty-state-title)}.kbq-empty-state_normal-color .kbq-empty-state-text{color:var(--kbq-empty-state-color)}.kbq-empty-state_error-color .kbq-empty-state-title{color:var(--kbq-empty-state-error-title)}.kbq-empty-state_error-color .kbq-empty-state-text{color:var(--kbq-empty-state-error-color)}.kbq-empty-state-title,.kbq-empty-state-text{text-align:center}.kbq-empty-state_compact .kbq-empty-state-title{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-empty-state_compact .kbq-empty-state-text{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-empty-state_normal .kbq-empty-state-title{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-empty-state_normal .kbq-empty-state-text{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-empty-state_big .kbq-empty-state-title{font-size:var(--kbq-typography-headline-font-size);font-style:var(--kbq-typography-headline-font-style);font-weight:var(--kbq-typography-headline-font-weight);line-height:var(--kbq-typography-headline-line-height);font-family:var(--kbq-typography-headline-font-family);text-transform:var(--kbq-typography-headline-text-transform);font-feature-settings:var(--kbq-typography-headline-font-feature-settings);letter-spacing:var(--kbq-typography-headline-letter-spacing)}.kbq-empty-state_big .kbq-empty-state-text{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}\n", ":where(.kbq-empty-state){--kbq-empty-state-size-big-max-width: 480px;--kbq-empty-state-size-big-padding-horizontal: var(--kbq-size-6xl);--kbq-empty-state-size-big-padding-top: var(--kbq-size-5xl);--kbq-empty-state-size-big-padding-bottom: var(--kbq-size-5xl);--kbq-empty-state-size-big-actions-margin-top: var(--kbq-size-xl);--kbq-empty-state-size-big-image-margin-bottom: var(--kbq-size-3xl);--kbq-empty-state-size-big-image-addon-height: var(--kbq-size-6xl);--kbq-empty-state-size-big-title-margin-bottom: var(--kbq-size-l);--kbq-empty-state-size-normal-max-width: 320px;--kbq-empty-state-size-normal-padding-horizontal: var(--kbq-size-3xl);--kbq-empty-state-size-normal-padding-top: var(--kbq-size-3xl);--kbq-empty-state-size-normal-padding-bottom: var(--kbq-size-3xl);--kbq-empty-state-size-normal-actions-margin-top: var(--kbq-size-s);--kbq-empty-state-size-normal-image-margin-bottom: var(--kbq-size-xl);--kbq-empty-state-size-normal-image-addon-height: var(--kbq-size-xxl);--kbq-empty-state-size-normal-title-margin-bottom: var(--kbq-size-xxs);--kbq-empty-state-size-compact-max-width: 320px;--kbq-empty-state-size-compact-padding-horizontal: var(--kbq-size-3xl);--kbq-empty-state-size-compact-padding-top: var(--kbq-size-3xl);--kbq-empty-state-size-compact-padding-bottom: var(--kbq-size-3xl);--kbq-empty-state-size-compact-actions-margin-top: var(--kbq-size-s);--kbq-empty-state-size-compact-image-margin-bottom: var(--kbq-size-m);--kbq-empty-state-size-compact-image-addon-height: 0;--kbq-empty-state-size-compact-title-margin-bottom: var(--kbq-size-xxs);--kbq-empty-state-title: var(--kbq-foreground-contrast);--kbq-empty-state-color: var(--kbq-foreground-contrast-secondary);--kbq-empty-state-error-title: var(--kbq-foreground-error);--kbq-empty-state-error-color: var(--kbq-foreground-error)}\n"] }]
-        }], propDecorators: { errorColor: [{
-                type: Input
-            }], alignTop: [{
-                type: Input
-            }], size: [{
+        }], propDecorators: { errorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorColor", required: false }] }], alignTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignTop", required: false }] }], size: [{
                 type: Input
             }], icon: [{
                 type: ContentChild,
@@ -110,8 +106,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             }] } });
 
 class KbqEmptyStateModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqEmptyStateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqEmptyStateModule, imports: [A11yModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqEmptyStateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqEmptyStateModule, imports: [A11yModule,
             PlatformModule,
             KbqEmptyState,
             KbqEmptyStateIcon,
@@ -122,10 +118,10 @@ class KbqEmptyStateModule {
             KbqEmptyStateText,
             KbqEmptyStateTitle,
             KbqEmptyStateActions] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqEmptyStateModule, imports: [A11yModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqEmptyStateModule, imports: [A11yModule,
             PlatformModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqEmptyStateModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqEmptyStateModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [