@koobiq/components 18.17.0 → 18.19.0

package/filter-bar/pipes/base-pipe.scss

@@ -0,0 +1,117 @@
+@use '../../core/styles/common';
+@use '../filter-bar-theme' as *;
+
+.kbq-pipe {
+    display: flex;
+    flex-direction: row;
+
+    max-height: 32px;
+
+    & .kbq-select .kbq-select__trigger {
+        height: unset;
+    }
+
+    .kbq-button-wrapper {
+        max-width: 320px;
+    }
+
+    .kbq-pipe__name {
+        @include common.kbq-truncate-line();
+
+        flex: 1 1 auto;
+
+        color: var(--kbq-foreground-contrast-secondary);
+    }
+
+    .kbq-pipe__value {
+        @include common.kbq-truncate-line();
+
+        flex: 1 1 auto;
+
+        &:not(.kbq-pipe__value_empty) {
+            margin-left: 4px;
+        }
+    }
+
+    .kbq-pipe__separator {
+        z-index: 1;
+
+        margin-left: -1px;
+        margin-right: 0;
+
+        height: 12px;
+
+        align-self: center;
+
+        color: var(--kbq-line-contrast-less);
+    }
+
+    .kbq-select:not(:hover, .kbq-active),
+    .kbq-button:not(:hover, .kbq-active) {
+        & + .kbq-pipe-button:not(:hover, .kbq-active)::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 10px;
+
+            width: 1px;
+            height: 12px;
+
+            background: var(--kbq-line-contrast-less);
+        }
+    }
+
+    .kbq-button.cdk-keyboard-focused {
+        z-index: 1;
+    }
+
+    &.kbq-pipe_disabled {
+        .kbq-pipe__name,
+        .kbq-pipe__value {
+            color: var(--kbq-states-foreground-disabled);
+        }
+    }
+}
+
+.kbq-pipe.kbq-pipe_removable,
+.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) {
+    .kbq-button {
+        border-bottom-right-radius: unset;
+        border-top-right-radius: unset;
+        border-right: none;
+
+        &.cdk-keyboard-focused::after {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            width: 1px;
+            background: var(--kbq-states-line-focus-theme);
+        }
+    }
+
+    .kbq-button-icon {
+        border-bottom-left-radius: unset;
+        border-top-left-radius: unset;
+        border-left: none;
+
+        &.cdk-keyboard-focused::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 1px;
+            background: var(--kbq-states-line-focus-theme);
+        }
+    }
+}
+
+.kbq-pipe-tooltip__name {
+    color: var(--kbq-foreground-white-secondary);
+}
+
+.kbq-pipe-tooltip__value {
+    color: var(--kbq-foreground-white);
+}

package/filter-bar/pipes/pipe-button.d.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectorRef } from '@angular/core';
+import { KbqFilterBar } from '../filter-bar';
+import { KbqBasePipe } from './base-pipe';
+import * as i0 from "@angular/core";
+export declare class KbqPipeButton {
+    protected readonly pipe: KbqBasePipe<any>;
+    protected readonly filterBar: KbqFilterBar | null;
+    protected readonly changeDetectorRef: ChangeDetectorRef;
+    get localeData(): any;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeButton, "kbq-pipe-button", never, {}, {}, never, never, true, never>;
+}

package/filter-bar/pipes/pipe-button.scss

@@ -0,0 +1,5 @@
+.kbq-pipe-button {
+    display: flex;
+
+    position: relative;
+}

package/filter-bar/pipes/pipe-date.d.ts

@@ -0,0 +1,41 @@
+import { FormGroup } from '@angular/forms';
+import { KbqButton, KbqButtonStyles } from '@koobiq/components/button';
+import { DateAdapter, DateFormatter, KbqComponentColors, PopUpPlacements } from '@koobiq/components/core';
+import { KbqListSelection } from '@koobiq/components/list';
+import { KbqPopoverTrigger } from '@koobiq/components/popover';
+import { KbqDateTimeValue } from '../filter-bar.types';
+import { KbqBasePipe } from './base-pipe';
+import * as i0 from "@angular/core";
+export declare class KbqPipeDateComponent<D> extends KbqBasePipe<KbqDateTimeValue> {
+    protected readonly adapter: DateAdapter<any>;
+    protected readonly formatter: DateFormatter<any>;
+    protected readonly placements: typeof PopUpPlacements;
+    protected readonly styles: typeof KbqButtonStyles;
+    protected readonly colors: typeof KbqComponentColors;
+    protected list: boolean;
+    protected formGroup: FormGroup;
+    protected showStartCalendar: boolean;
+    protected showEndCalendar: boolean;
+    get formattedValue(): string;
+    get disabled(): boolean;
+    get start(): any;
+    get end(): any;
+    get isEmpty(): boolean;
+    popover: KbqPopoverTrigger;
+    listSelection: import("@angular/core").Signal<KbqListSelection>;
+    returnButton: import("@angular/core").Signal<KbqButton>;
+    constructor();
+    onKeydown($event: KeyboardEvent): void;
+    onApplyPeriod(): void;
+    onSelect(item: KbqDateTimeValue): void;
+    openPeriod(): void;
+    openList(): void;
+    open(): void;
+    onSelectStartDate(value: D): void;
+    onSelectEndDate(value: D): void;
+    onFocusStartInput(): void;
+    onFocusEndInput(): void;
+    hideCalendars(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeDateComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeDateComponent<any>, "kbq-pipe-date", never, {}, {}, never, never, true, never>;
+}

package/filter-bar/pipes/pipe-date.scss

@@ -0,0 +1,132 @@
+@use '../../datepicker/datepicker-theme' as *;
+@use '../filter-bar-theme' as *;
+
+@use '../../datepicker/datepicker-tokens' as *;
+
+.kbq-pipe-date__popover {
+    & .kbq-popover__container {
+        max-height: unset;
+    }
+
+    & .kbq-popover__content {
+        padding: 0;
+    }
+
+    & .kbq-date-list {
+        margin: var(--kbq-size-xxs) 0;
+
+        & .kbq-list-option {
+            & .kbq-list-text {
+                display: flex;
+                flex-direction: row;
+            }
+
+            & .kbq-icon {
+                margin-left: var(--kbq-size-s);
+                align-self: center;
+
+                color: var(--kbq-icon-fade-contrast-color);
+            }
+        }
+    }
+
+    & .kbq-date-period {
+        width: 320px;
+
+        & .kbq-date-period__header {
+            padding-top: var(--kbq-size-xs);
+            padding-left: var(--kbq-size-xxs);
+            padding-right: var(--kbq-size-xxs);
+
+            & .kbq-button {
+                width: 100%;
+                justify-content: flex-start;
+            }
+        }
+
+        & .kbq-divider {
+            margin: var(--kbq-size-xxs) var(--kbq-size-l);
+        }
+
+        & .kbq-date-period__content {
+            display: flex;
+            flex-direction: column;
+
+            padding: 0;
+
+            gap: var(--kbq-size-s);
+
+            & .kbq-date-period__content-header {
+                padding-top: var(--kbq-size-s);
+                padding-left: var(--kbq-size-l);
+                padding-right: var(--kbq-size-l);
+
+                color: var(--kbq-foreground-contrast-secondary);
+            }
+
+            & .kbq-form__row {
+                padding-left: var(--kbq-size-l);
+                padding-right: var(--kbq-size-l);
+
+                & .kbq-date-period__date,
+                & .kbq-date-period__time {
+                    flex: 1;
+                }
+
+                &.kbq-form__row_with-time {
+                    & .kbq-date-period__date {
+                        max-width: 45%;
+
+                        & .kbq-form-field__container {
+                            border-top-right-radius: unset;
+                            border-bottom-right-radius: unset;
+                        }
+                    }
+
+                    & .kbq-date-period__time {
+                        margin-left: -1px;
+                        max-width: 45%;
+
+                        & .kbq-form-field__container {
+                            border-top-left-radius: unset;
+                            border-bottom-left-radius: unset;
+                        }
+                    }
+                }
+            }
+
+            & .kbq-calendar {
+                position: relative;
+
+                padding: var(--kbq-size-s) var(--kbq-size-s) var(--kbq-size-m);
+
+                background-color: var(--kbq-background-bg-tertiary);
+
+                &.kbq-calendar_hidden {
+                    display: none;
+                }
+            }
+
+            & .kbq-hint {
+                padding-left: var(--kbq-size-m);
+                padding-right: var(--kbq-size-m);
+            }
+        }
+
+        & .kbq-date-period__footer {
+            padding: var(--kbq-size-xxs);
+
+            & .kbq-button {
+                width: 100%;
+                justify-content: flex-start;
+
+                &:not(.kbq-disabled) .kbq-button_hot-key {
+                    color: var(--kbq-foreground-contrast-secondary);
+                }
+            }
+        }
+    }
+}
+
+@include kbq-datepicker-theme();
+@include kbq-datepicker-typography();

package/filter-bar/pipes/pipe-datetime.d.ts

@@ -0,0 +1,41 @@
+import { FormGroup } from '@angular/forms';
+import { KbqButton, KbqButtonStyles } from '@koobiq/components/button';
+import { DateAdapter, DateFormatter, KbqComponentColors, PopUpPlacements } from '@koobiq/components/core';
+import { KbqListSelection } from '@koobiq/components/list';
+import { KbqPopoverTrigger } from '@koobiq/components/popover';
+import { KbqDateTimeValue } from '../filter-bar.types';
+import { KbqBasePipe } from './base-pipe';
+import * as i0 from "@angular/core";
+export declare class KbqPipeDatetimeComponent<D> extends KbqBasePipe<KbqDateTimeValue> {
+    protected readonly adapter: DateAdapter<any>;
+    protected readonly formatter: DateFormatter<any>;
+    protected readonly placements: typeof PopUpPlacements;
+    protected readonly styles: typeof KbqButtonStyles;
+    protected readonly colors: typeof KbqComponentColors;
+    protected list: boolean;
+    protected formGroup: FormGroup;
+    protected showStartCalendar: boolean;
+    protected showEndCalendar: boolean;
+    get formattedValue(): string;
+    get disabled(): boolean;
+    get start(): any;
+    get end(): any;
+    get isEmpty(): boolean;
+    popover: KbqPopoverTrigger;
+    listSelection: import("@angular/core").Signal<KbqListSelection>;
+    returnButton: import("@angular/core").Signal<KbqButton>;
+    constructor();
+    onKeydown($event: KeyboardEvent): void;
+    onApplyPeriod(): void;
+    onSelect(item: KbqDateTimeValue): void;
+    openPeriod(): void;
+    openList(): void;
+    open(): void;
+    onSelectStartDate(value: D): void;
+    onSelectEndDate(value: D): void;
+    onFocusStartInput(): void;
+    onFocusEndInput(): void;
+    hideCalendars(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeDatetimeComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeDatetimeComponent<any>, "kbq-pipe-datetime", never, {}, {}, never, never, true, never>;
+}

package/filter-bar/pipes/pipe-multi-select.d.ts

@@ -0,0 +1,22 @@
+import { OnInit } from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
+import { KbqSelect } from '@koobiq/components/select';
+import { Observable } from 'rxjs';
+import { KbqSelectValue } from '../filter-bar.types';
+import { KbqBasePipe } from './base-pipe';
+import * as i0 from "@angular/core";
+export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> implements OnInit {
+    searchControl: UntypedFormControl;
+    filteredOptions: Observable<any[]>;
+    select: KbqSelect;
+    get selected(): KbqSelectValue[] | null;
+    get isEmpty(): boolean;
+    ngOnInit(): void;
+    onSelect(item: KbqSelectValue[]): void;
+    onClear(): void;
+    compareByValue: (o1: any, o2: any) => boolean;
+    open(): void;
+    private getFilteredOptions;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeMultiSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeMultiSelectComponent, "kbq-pipe-multi-select", never, {}, {}, never, never, true, never>;
+}

package/filter-bar/pipes/pipe-multiselect.scss

@@ -0,0 +1,15 @@
+.kbq-pipe__multiselect {
+    .kbq-pipe__value {
+        margin-left: var(--kbq-size-xxs);
+    }
+
+    .kbq-badge {
+        align-self: center;
+
+        margin-left: var(--kbq-size-xs);
+    }
+}
+
+.kbq-pipe-multiselect__panel .kbq-select__content {
+    max-height: 404px;
+}

package/filter-bar/pipes/pipe-select.d.ts

@@ -0,0 +1,21 @@
+import { OnInit } from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
+import { KbqSelect } from '@koobiq/components/select';
+import { Observable } from 'rxjs';
+import { KbqSelectValue } from '../filter-bar.types';
+import { KbqBasePipe } from './base-pipe';
+import * as i0 from "@angular/core";
+export declare class KbqPipeSelectComponent extends KbqBasePipe<KbqSelectValue> implements OnInit {
+    searchControl: UntypedFormControl;
+    filteredOptions: Observable<any[]>;
+    select: KbqSelect;
+    get selected(): KbqSelectValue | null;
+    get isEmpty(): boolean;
+    ngOnInit(): void;
+    onSelect(item: KbqSelectValue): void;
+    compareByValue: (o1: any, o2: any) => boolean;
+    open(): void;
+    private getFilteredOptions;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeSelectComponent, "kbq-pipe-select", never, {}, {}, never, never, true, never>;
+}

package/filter-bar/pipes/pipe-select.scss

@@ -0,0 +1,3 @@
+.kbq-pipe-select__panel .kbq-select__content {
+    max-height: 404px;
+}

package/filter-bar/pipes/pipe-state.d.ts

@@ -0,0 +1,14 @@
+import { OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class KbqPipeState<T> implements OnInit {
+    private readonly destroyRef;
+    private readonly button;
+    private readonly pipe;
+    set state(pipe: T | null);
+    get state(): T | null;
+    private _state;
+    ngOnInit(): void;
+    private updateState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeState<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPipeState<any>, "[kbqPipeState]", never, { "state": { "alias": "kbqPipeState"; "required": false; }; }, {}, never, never, true, never>;
+}

package/filter-bar/pipes/pipe-text.d.ts

@@ -0,0 +1,19 @@
+import { AfterViewInit, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { PopUpPlacements } from '@koobiq/components/core';
+import { KbqPopoverTrigger } from '@koobiq/components/popover';
+import { KbqBasePipe } from './base-pipe';
+import * as i0 from "@angular/core";
+export declare class KbqPipeTextComponent extends KbqBasePipe<string | null> implements AfterViewInit, OnInit {
+    readonly placements: typeof PopUpPlacements;
+    popover: KbqPopoverTrigger;
+    get disabled(): boolean;
+    control: FormControl<string | null>;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    onApply(): void;
+    onKeydown($event: KeyboardEvent): void;
+    open(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeTextComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeTextComponent, "kbq-pipe-text", never, {}, {}, never, never, true, never>;
+}

package/filter-bar/pipes/pipe-title.d.ts

@@ -0,0 +1,25 @@
+import { AfterViewInit, OnDestroy, TemplateRef } from '@angular/core';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class KbqPipeTitleDirective extends KbqTooltipTrigger implements AfterViewInit, OnDestroy {
+    private componentInstance;
+    get isOverflown(): boolean;
+    viewValue: TemplateRef<any>;
+    get parent(): HTMLElement;
+    get child(): HTMLElement;
+    readonly resizeStream: Subject<Event>;
+    private readonly debounceInterval;
+    private resizeSubscription;
+    private mutationSubscription;
+    private focusMonitorSubscription;
+    private childContainer;
+    private parentContainer;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    handleElementEnter(): void;
+    hideTooltip(): void;
+    private createMutationObserver;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeTitleDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPipeTitleDirective, "[kbqPipeTitle]", ["kbqPipeTitle"], { "viewValue": { "alias": "kbqPipeTitle"; "required": false; }; }, {}, ["parentContainer", "childContainer"], never, true, never>;
+}

package/filter-bar/public-api.d.ts

@@ -0,0 +1,19 @@
+export * from './filter-bar';
+export * from './filter-bar-button';
+export * from './filter-bar.module';
+export * from './filter-bar.types';
+export * from './filter-refresher';
+export * from './filter-reset';
+export * from './filter-search';
+export * from './filters';
+export * from './pipe-add';
+export * from './pipe.directive';
+export * from './pipes/base-pipe';
+export * from './pipes/pipe-button';
+export * from './pipes/pipe-date';
+export * from './pipes/pipe-datetime';
+export * from './pipes/pipe-multi-select';
+export * from './pipes/pipe-select';
+export * from './pipes/pipe-state';
+export * from './pipes/pipe-text';
+export * from './pipes/pipe-title';

package/form-field/form-field.d.ts

@@ -51,7 +51,12 @@ export declare class KbqFormField extends KbqFormFieldMixinBase implements After
     ngAfterContentInit(): void;
     ngAfterContentChecked(): void;
     ngAfterViewInit(): void;
-    focusViaKeyboard(): void;
+    /** Focuses the control. */
+    focus(options?: FocusOptions): void;
+    /**
+     * @deprecated Use `focus` instead.
+     */
+    focusViaKeyboard(options?: FocusOptions): void;
     clearValue($event: any): void;
     onContainerClick($event: any): void;
     onKeyDown(event: KeyboardEvent): void;

package/form-field/form-field.scss

@@ -29,6 +29,7 @@
         z-index: 1;
     }
 
+    &.cdk-focused,
     &.kbq-focused {
         z-index: 2;
     }

package/icon/icon-button.component.d.ts

@@ -7,6 +7,8 @@ export declare class KbqIconButton extends KbqIcon implements AfterViewInit, OnD
     protected changeDetectorRef: ChangeDetectorRef;
     private focusMonitor;
     small: boolean;
+    /** Name of an icon within a @koobiq/icons. */
+    iconName: string;
     get tabindex(): any;
     set tabindex(value: any);
     private _tabindex;
@@ -15,12 +17,12 @@ export declare class KbqIconButton extends KbqIcon implements AfterViewInit, OnD
     set disabled(value: boolean);
     private _disabled;
     name: string;
-    constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
+    constructor(elementRef: ElementRef, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private runFocusMonitor;
     private stopFocusMonitor;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconButton, [null, { attribute: "kbq-icon-button"; }, { optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconButton, "[kbq-icon-button]", never, { "color": { "alias": "color"; "required": false; }; "small": { "alias": "small"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconButton, [null, { optional: true; }, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconButton, "[kbq-icon-button]", never, { "color": { "alias": "color"; "required": false; }; "small": { "alias": "small"; "required": false; }; "iconName": { "alias": "kbq-icon-button"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
     static ngAcceptInputType_disabled: unknown;
 }

package/icon/icon-item.component.d.ts

@@ -5,9 +5,11 @@ import * as i0 from "@angular/core";
 export declare class KbqIconItem extends KbqIcon implements CanColor {
     protected changeDetectorRef: ChangeDetectorRef;
     name: string;
+    /** Name of an icon within a @koobiq/icons. */
+    iconName: string;
     fade: boolean;
     big: boolean;
-    constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef);
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconItem, [null, { attribute: "kbq-icon-item"; }, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconItem, "[kbq-icon-item]", never, { "color": { "alias": "color"; "required": false; }; "fade": { "alias": "fade"; "required": false; }; "big": { "alias": "big"; "required": false; }; }, {}, never, ["*"], true, never>;
+    constructor(elementRef: ElementRef, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef);
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconItem, [null, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconItem, "[kbq-icon-item]", never, { "color": { "alias": "color"; "required": false; }; "iconName": { "alias": "kbq-icon-item"; "required": false; }; "fade": { "alias": "fade"; "required": false; }; "big": { "alias": "big"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

package/icon/icon.component.d.ts

@@ -9,18 +9,19 @@ export declare class KbqIconBase {
 /** @docs-private */
 export declare const KbqIconMixinBase: CanColorCtor & typeof KbqIconBase;
 export declare class KbqIcon extends KbqIconMixinBase implements CanColor, AfterContentInit {
-    protected iconName: string;
     protected formField: KbqFormFieldRef;
     protected changeDetectorRef: ChangeDetectorRef;
     small: boolean;
     autoColor: boolean;
     hasError: boolean;
+    /** Name of an icon within a @koobiq/icons. */
+    iconName: string;
     protected name: string;
-    constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef);
+    constructor(elementRef: ElementRef, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef);
     getHostElement(): any;
     updateMaxHeight(): void;
     ngAfterContentInit(): void;
     private updateState;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqIcon, [null, { attribute: "kbq-icon"; }, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIcon, "[kbq-icon]", never, { "color": { "alias": "color"; "required": false; }; "small": { "alias": "small"; "required": false; }; "autoColor": { "alias": "autoColor"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqIcon, [null, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIcon, "[kbq-icon]", never, { "color": { "alias": "color"; "required": false; }; "small": { "alias": "small"; "required": false; }; "autoColor": { "alias": "autoColor"; "required": false; }; "iconName": { "alias": "kbq-icon"; "required": false; }; }, {}, never, ["*"], true, never>;
 }