@koobiq/components 19.8.3 → 20.1.0

package/fesm2022/koobiq-components-split-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koobiq-components-split-button.mjs","sources":["../../../packages/components/split-button/split-button.ts","../../../packages/components/split-button/split-button.module.ts","../../../packages/components/split-button/koobiq-components-split-button.ts"],"sourcesContent":["import {\n    AfterContentInit,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    ContentChild,\n    ContentChildren,\n    Input,\n    QueryList,\n    ViewEncapsulation\n} from '@angular/core';\nimport { KbqButton, KbqButtonStyles } from '@koobiq/components/button';\nimport { KbqColorDirective, KbqComponentColors, kbqInjectNativeElement, ThemePalette } from '@koobiq/components/core';\nimport { KbqDropdownTrigger } from '@koobiq/components/dropdown';\nimport { delay } from 'rxjs/operators';\n\n@Component({\n    selector: 'kbq-split-button, [kbq-split-button]',\n    template: `\n        <ng-content select=\"[kbq-button]\" />\n\n        <ng-content select=\"[kbq-button]\" />\n    `,\n    styleUrls: ['./split-button.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    host: {\n        class: 'kbq-split-button',\n        '[class]': 'kbqStyle',\n        '[class.kbq-split-button_styles-for-nested]': 'buttons.length > 1',\n        '[class.kbq-split-button_first-disabled]': 'firstDisabled',\n        '[class.kbq-split-button_second-disabled]': 'secondDisabled'\n    }\n})\nexport class KbqSplitButton extends KbqColorDirective implements AfterContentInit {\n    private nativeElement = kbqInjectNativeElement();\n\n    /** @docs-private */\n    @ContentChildren(KbqButton) protected buttons: QueryList<KbqButton>;\n    /** @docs-private */\n    @ContentChild(KbqDropdownTrigger) protected dropdownTrigger: KbqDropdownTrigger;\n\n    /** Sets the width of the dropdown to the width of the trigger. Default is false */\n    @Input() panelAutoWidth: boolean = false;\n\n    /** component style, will be set for nested buttons */\n    @Input()\n    get kbqStyle(): string {\n        return `kbq-button_${this._kbqStyle}`;\n    }\n\n    set kbqStyle(value: KbqButtonStyles | string) {\n        this._kbqStyle = value || KbqButtonStyles.Filled;\n\n        this.updateStyle(this._kbqStyle);\n    }\n\n    private _kbqStyle: string | KbqButtonStyles = KbqButtonStyles.Filled;\n\n    /** component color, will be set for nested buttons */\n    @Input()\n    get color(): KbqComponentColors | ThemePalette | string {\n        return this._color;\n    }\n\n    set color(value: KbqComponentColors | ThemePalette | string) {\n        if (!value) return;\n\n        super.color = value;\n\n        this.updateColor(this.color);\n    }\n\n    /** Whether the checkbox is disabled. */\n    @Input({ transform: booleanAttribute })\n    get disabled(): boolean {\n        return this._disabled;\n    }\n\n    set disabled(value: boolean) {\n        this._disabled = value;\n\n        this.updateDisabledState(this._disabled);\n    }\n\n    protected _disabled: boolean;\n\n    get firstDisabled(): boolean {\n        return this.buttons.first?.disabled;\n    }\n\n    get secondDisabled(): boolean {\n        return this.buttons.length > 1 && this.buttons.last?.disabled;\n    }\n\n    constructor() {\n        super();\n\n        this.color = KbqComponentColors.ContrastFade;\n    }\n\n    ngAfterContentInit(): void {\n        this.updateClasses();\n        this.updateStyle(this._kbqStyle);\n        this.updateColor(this.color);\n        this.updateDisabledState(this.disabled);\n        this.updateDropdownParams();\n\n        if (!this.buttons.length) {\n            throw new Error(`kbq-split-button must contain at least one button`);\n        }\n\n        this.buttons.changes.pipe(delay(0)).subscribe(() => {\n            this.updateClasses();\n            this.updateStyle(this._kbqStyle);\n            this.updateColor(this.color);\n            this.updateDropdownParams();\n        });\n    }\n\n    private updateClasses() {\n        this.buttons.forEach((button: KbqButton) => {\n            button.getHostElement().classList.remove(`kbq-split-button_first`, `kbq-split-button_second`);\n        });\n\n        this.buttons.first?.getHostElement().classList.add(`kbq-split-button_first`);\n        this.buttons.last?.getHostElement().classList.add(`kbq-split-button_second`);\n        this.buttons.forEach((button: KbqButton) => {\n            button.getHostElement().classList.add(`kbq-split-button_item`);\n        });\n    }\n\n    private updateColor(color: KbqComponentColors | ThemePalette | string) {\n        this.buttons?.forEach((button: KbqButton) => (button.color = color));\n    }\n\n    private updateStyle(style: KbqButtonStyles | string) {\n        this.buttons?.forEach((button: KbqButton) => (button.kbqStyle = style));\n    }\n\n    private updateDisabledState(state: boolean) {\n        if (state === undefined) return;\n\n        this.buttons?.forEach((button: KbqButton) => (button.disabled = state));\n    }\n\n    private updateDropdownParams = () => {\n        if (!this.dropdownTrigger) return;\n\n        this.dropdownTrigger.dropdown.xPosition = 'before';\n\n        if (this.panelAutoWidth) {\n            // we need to use a timeout of about 50ms to wait for the styles to apply\n            setTimeout(() => {\n                const { width } = this.nativeElement.getClientRects()[0];\n\n                this.dropdownTrigger.dropdown.triggerWidth = `${Math.round(width)}px`;\n            }, 50);\n        }\n    };\n}\n","import { NgModule } from '@angular/core';\nimport { KbqSplitButton } from './split-button';\n\n@NgModule({\n    imports: [\n        KbqSplitButton\n    ],\n    exports: [KbqSplitButton]\n})\nexport class KbqSplitButtonModule {}\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-split-button.mjs","sources":["../../../packages/components/split-button/split-button.ts","../../../packages/components/split-button/split-button.module.ts","../../../packages/components/split-button/koobiq-components-split-button.ts"],"sourcesContent":["import {\n    AfterContentInit,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    contentChild,\n    ContentChildren,\n    Input,\n    input,\n    QueryList,\n    ViewEncapsulation\n} from '@angular/core';\nimport { KbqButton, KbqButtonStyles } from '@koobiq/components/button';\nimport { KbqColorDirective, KbqComponentColors, kbqInjectNativeElement, ThemePalette } from '@koobiq/components/core';\nimport { KbqDropdownTrigger } from '@koobiq/components/dropdown';\nimport { delay } from 'rxjs/operators';\n\n@Component({\n    selector: 'kbq-split-button, [kbq-split-button]',\n    template: `\n        <ng-content select=\"[kbq-button]\" />\n\n        <ng-content select=\"[kbq-button]\" />\n    `,\n    styleUrls: ['./split-button.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'kbq-split-button',\n        '[class]': 'kbqStyle',\n        '[class.kbq-split-button_styles-for-nested]': 'buttons.length > 1',\n        '[class.kbq-split-button_first-disabled]': 'firstDisabled',\n        '[class.kbq-split-button_second-disabled]': 'secondDisabled'\n    }\n})\nexport class KbqSplitButton extends KbqColorDirective implements AfterContentInit {\n    private nativeElement = kbqInjectNativeElement();\n\n    /** @docs-private */\n    @ContentChildren(KbqButton) protected buttons: QueryList<KbqButton>;\n    /** @docs-private */\n    protected readonly dropdownTrigger = contentChild(KbqDropdownTrigger);\n\n    /** Sets the width of the dropdown to the width of the trigger. Default is false */\n    readonly panelAutoWidth = input<boolean>(false);\n\n    /** component style, will be set for nested buttons */\n    // TODO: Skipped for migration because:\n    //  Accessor inputs cannot be migrated as they are too complex.\n    @Input()\n    get kbqStyle(): string {\n        return `kbq-button_${this._kbqStyle}`;\n    }\n\n    set kbqStyle(value: KbqButtonStyles | string) {\n        this._kbqStyle = value || KbqButtonStyles.Filled;\n\n        this.updateStyle(this._kbqStyle);\n    }\n\n    private _kbqStyle: string | KbqButtonStyles = KbqButtonStyles.Filled;\n\n    /** component color, will be set for nested buttons */\n    // TODO: Skipped for migration because:\n    //  Accessor inputs cannot be migrated as they are too complex.\n    @Input()\n    get color(): KbqComponentColors | ThemePalette | string {\n        return this._color;\n    }\n\n    set color(value: KbqComponentColors | ThemePalette | string) {\n        if (!value) return;\n\n        super.color = value;\n\n        this.updateColor(this.color);\n    }\n\n    /** Whether the checkbox is disabled. */\n    // TODO: Skipped for migration because:\n    //  Accessor inputs cannot be migrated as they are too complex.\n    @Input({ transform: booleanAttribute })\n    get disabled(): boolean {\n        return this._disabled;\n    }\n\n    set disabled(value: boolean) {\n        this._disabled = value;\n\n        this.updateDisabledState(this._disabled);\n    }\n\n    protected _disabled: boolean;\n\n    get firstDisabled(): boolean {\n        return this.buttons.first?.disabled;\n    }\n\n    get secondDisabled(): boolean {\n        return this.buttons.length > 1 && this.buttons.last?.disabled;\n    }\n\n    constructor() {\n        super();\n\n        this.color = KbqComponentColors.ContrastFade;\n    }\n\n    ngAfterContentInit(): void {\n        this.updateClasses();\n        this.updateStyle(this._kbqStyle);\n        this.updateColor(this.color);\n        this.updateDisabledState(this.disabled);\n        this.updateDropdownParams();\n\n        if (!this.buttons.length) {\n            throw new Error(`kbq-split-button must contain at least one button`);\n        }\n\n        this.buttons.changes.pipe(delay(0)).subscribe(() => {\n            this.updateClasses();\n            this.updateStyle(this._kbqStyle);\n            this.updateColor(this.color);\n            this.updateDropdownParams();\n        });\n    }\n\n    private updateClasses() {\n        this.buttons.forEach((button: KbqButton) => {\n            button.getHostElement().classList.remove(`kbq-split-button_first`, `kbq-split-button_second`);\n        });\n\n        this.buttons.first?.getHostElement().classList.add(`kbq-split-button_first`);\n        this.buttons.last?.getHostElement().classList.add(`kbq-split-button_second`);\n        this.buttons.forEach((button: KbqButton) => {\n            button.getHostElement().classList.add(`kbq-split-button_item`);\n        });\n    }\n\n    private updateColor(color: KbqComponentColors | ThemePalette | string) {\n        this.buttons?.forEach((button: KbqButton) => (button.color = color));\n    }\n\n    private updateStyle(style: KbqButtonStyles | string) {\n        this.buttons?.forEach((button: KbqButton) => (button.kbqStyle = style));\n    }\n\n    private updateDisabledState(state: boolean) {\n        if (state === undefined) return;\n\n        this.buttons?.forEach((button: KbqButton) => (button.disabled = state));\n    }\n\n    private updateDropdownParams = () => {\n        const dropdownTrigger = this.dropdownTrigger();\n\n        if (!dropdownTrigger) return;\n\n        dropdownTrigger.dropdown.xPosition = 'before';\n\n        if (this.panelAutoWidth()) {\n            // we need to use a timeout of about 50ms to wait for the styles to apply\n            setTimeout(() => {\n                const { width } = this.nativeElement.getClientRects()[0];\n\n                const dropdownTrigger = this.dropdownTrigger();\n\n                if (dropdownTrigger) {\n                    dropdownTrigger.dropdown.triggerWidth = `${Math.round(width)}px`;\n                }\n            }, 50);\n        }\n    };\n}\n","import { NgModule } from '@angular/core';\nimport { KbqSplitButton } from './split-button';\n\n@NgModule({\n    imports: [\n        KbqSplitButton\n    ],\n    exports: [KbqSplitButton]\n})\nexport class KbqSplitButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAmCM,MAAO,cAAe,SAAQ,iBAAiB,CAAA;;;;AAcjD,IAAA,IACI,QAAQ,GAAA;AACR,QAAA,OAAO,CAAA,WAAA,EAAc,IAAI,CAAC,SAAS,EAAE;IACzC;IAEA,IAAI,QAAQ,CAAC,KAA+B,EAAA;QACxC,IAAI,CAAC,SAAS,GAAG,KAAK,IAAI,eAAe,CAAC,MAAM;AAEhD,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;IACpC;;;;AAOA,IAAA,IACI,KAAK,GAAA;QACL,OAAO,IAAI,CAAC,MAAM;IACtB;IAEA,IAAI,KAAK,CAAC,KAAiD,EAAA;AACvD,QAAA,IAAI,CAAC,KAAK;YAAE;AAEZ,QAAA,KAAK,CAAC,KAAK,GAAG,KAAK;AAEnB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;IAChC;;;;AAKA,IAAA,IACI,QAAQ,GAAA;QACR,OAAO,IAAI,CAAC,SAAS;IACzB;IAEA,IAAI,QAAQ,CAAC,KAAc,EAAA;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;AAEtB,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,SAAS,CAAC;IAC5C;AAIA,IAAA,IAAI,aAAa,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ;IACvC;AAEA,IAAA,IAAI,cAAc,GAAA;AACd,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,QAAQ;IACjE;AAEA,IAAA,WAAA,GAAA;AACI,QAAA,KAAK,EAAE;QAnEH,IAAA,CAAA,aAAa,GAAG,sBAAsB,EAAE;;AAK7B,QAAA,IAAA,CAAA,eAAe,GAAG,YAAY,CAAC,kBAAkB,2DAAC;;AAG5D,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAAU,KAAK,0DAAC;AAgBvC,QAAA,IAAA,CAAA,SAAS,GAA6B,eAAe,CAAC,MAAM;QA6F5D,IAAA,CAAA,oBAAoB,GAAG,MAAK;AAChC,YAAA,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE;AAE9C,YAAA,IAAI,CAAC,eAAe;gBAAE;AAEtB,YAAA,eAAe,CAAC,QAAQ,CAAC,SAAS,GAAG,QAAQ;AAE7C,YAAA,IAAI,IAAI,CAAC,cAAc,EAAE,EAAE;;gBAEvB,UAAU,CAAC,MAAK;AACZ,oBAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;AAExD,oBAAA,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE;oBAE9C,IAAI,eAAe,EAAE;AACjB,wBAAA,eAAe,CAAC,QAAQ,CAAC,YAAY,GAAG,CAAA,EAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI;oBACpE;gBACJ,CAAC,EAAE,EAAE,CAAC;YACV;AACJ,QAAA,CAAC;AAnEG,QAAA,IAAI,CAAC,KAAK,GAAG,kBAAkB,CAAC,YAAY;IAChD;IAEA,kBAAkB,GAAA;QACd,IAAI,CAAC,aAAa,EAAE;AACpB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;AAChC,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;AAC5B,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC;QACvC,IAAI,CAAC,oBAAoB,EAAE;AAE3B,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;AACtB,YAAA,MAAM,IAAI,KAAK,CAAC,CAAA,iDAAA,CAAmD,CAAC;QACxE;AAEA,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAK;YAC/C,IAAI,CAAC,aAAa,EAAE;AACpB,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC;AAChC,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;YAC5B,IAAI,CAAC,oBAAoB,EAAE;AAC/B,QAAA,CAAC,CAAC;IACN;IAEQ,aAAa,GAAA;QACjB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAiB,KAAI;AACvC,YAAA,MAAM,CAAC,cAAc,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA,sBAAA,CAAwB,EAAE,CAAA,uBAAA,CAAyB,CAAC;AACjG,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,cAAc,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA,sBAAA,CAAwB,CAAC;AAC5E,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA,uBAAA,CAAyB,CAAC;QAC5E,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAiB,KAAI;YACvC,MAAM,CAAC,cAAc,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,CAAA,qBAAA,CAAuB,CAAC;AAClE,QAAA,CAAC,CAAC;IACN;AAEQ,IAAA,WAAW,CAAC,KAAiD,EAAA;AACjE,QAAA,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,MAAiB,MAAM,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC;IACxE;AAEQ,IAAA,WAAW,CAAC,KAA+B,EAAA;AAC/C,QAAA,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,MAAiB,MAAM,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC;IAC3E;AAEQ,IAAA,mBAAmB,CAAC,KAAc,EAAA;QACtC,IAAI,KAAK,KAAK,SAAS;YAAE;AAEzB,QAAA,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,MAAiB,MAAM,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC;IAC3E;kIApHS,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,cAAc,0lBA8CH,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,UAAA,EAAA,0CAAA,EAAA,oBAAA,EAAA,uCAAA,EAAA,eAAA,EAAA,wCAAA,EAAA,gBAAA,EAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAxCc,kBAAkB,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,SAAA,EAAA,SAAA,EAFnD,SAAS,EAAA,CAAA,EAAA,eAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EApBhB;;;;AAIT,IAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,+oLAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;4FAYQ,cAAc,EAAA,UAAA,EAAA,CAAA;kBAlB1B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sCAAsC,EAAA,QAAA,EACtC;;;;AAIT,IAAA,CAAA,EAAA,eAAA,EAEgB,uBAAuB,CAAC,MAAM,iBAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACF,wBAAA,KAAK,EAAE,kBAAkB;AACzB,wBAAA,SAAS,EAAE,UAAU;AACrB,wBAAA,4CAA4C,EAAE,oBAAoB;AAClE,wBAAA,yCAAyC,EAAE,eAAe;AAC1D,wBAAA,0CAA0C,EAAE;AAC/C,qBAAA,EAAA,MAAA,EAAA,CAAA,+oLAAA,CAAA,EAAA;;sBAMA,eAAe;uBAAC,SAAS;sFAEwB,kBAAkB,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA;sBAQnE;;sBAgBA;;sBAgBA,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;;;MCxE7B,oBAAoB,CAAA;kIAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;mIAApB,oBAAoB,EAAA,OAAA,EAAA,CAJzB,cAAc,CAAA,EAAA,OAAA,EAAA,CAER,cAAc,CAAA,EAAA,CAAA,CAAA;mIAEf,oBAAoB,EAAA,CAAA,CAAA;;4FAApB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBANhC,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE;wBACL;AACH,qBAAA;oBACD,OAAO,EAAE,CAAC,cAAc;AAC3B,iBAAA;;;ACRD;;AAEG;;;;"}

package/fesm2022/koobiq-components-splitter.mjs

@@ -1,6 +1,7 @@
 import { coerceNumberProperty, coerceCssPixelValue, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Platform } from '@angular/cdk/platform';
 import * as i0 from '@angular/core';
-import { Input, Directive, EventEmitter, forwardRef, ContentChildren, ViewChild, ViewChildren, Output, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, Inject, NgModule } from '@angular/core';
+import { inject, ElementRef, Renderer2, Input, Directive, ChangeDetectorRef, NgZone, output, viewChildren, viewChild, forwardRef, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { KBQ_WINDOW } from '@koobiq/components/core';
 import { Subscription } from 'rxjs';
 import { KbqIconModule } from '@koobiq/components/icon';
@@ -11,18 +12,32 @@ var Direction;
     Direction["Vertical"] = "vertical";
 })(Direction || (Direction = {}));
 class KbqGutterDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this._direction = Direction.Vertical;
+        this._order = 0;
+        this._size = 6;
+        this.dragged = false;
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get direction() {
         return this._direction;
     }
     set direction(direction) {
         this._direction = direction;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get order() {
         return this._order;
     }
     set order(order) {
         this._order = coerceNumberProperty(order);
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get size() {
         return this._size;
     }
@@ -32,14 +47,6 @@ class KbqGutterDirective {
     get isVertical() {
         return this._direction === Direction.Vertical;
     }
-    constructor(elementRef, renderer) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this._direction = Direction.Vertical;
-        this._order = 0;
-        this._size = 6;
-        this.dragged = false;
-    }
     ngOnInit() {
         this.setStyle("flex-basis" /* StyleProperty.FlexBasis */, coerceCssPixelValue(this.size));
         this.setStyle(this.isVertical ? "height" /* StyleProperty.Height */ : "width" /* StyleProperty.Width */, coerceCssPixelValue(this.size));
@@ -59,10 +66,10 @@ class KbqGutterDirective {
     setStyle(property, value) {
         this.renderer.setStyle(this.elementRef.nativeElement, property, value);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqGutterDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqGutterDirective, isStandalone: true, selector: "kbq-gutter", inputs: { direction: "direction", order: "order", size: "size" }, host: { listeners: { "mousedown": "dragged = true" }, properties: { "class.kbq-gutter_vertical": "isVertical", "class.kbq-gutter_dragged": "dragged" }, classAttribute: "kbq-gutter" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqGutterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqGutterDirective, isStandalone: true, selector: "kbq-gutter", inputs: { direction: "direction", order: "order", size: "size" }, host: { listeners: { "mousedown": "dragged = true" }, properties: { "class.kbq-gutter_vertical": "isVertical", "class.kbq-gutter_dragged": "dragged" }, classAttribute: "kbq-gutter" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqGutterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqGutterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-gutter',
@@ -73,7 +80,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '(mousedown)': 'dragged = true'
                     }
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { direction: [{
+        }], propDecorators: { direction: [{
                 type: Input
             }], order: [{
                 type: Input
@@ -81,6 +88,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Input
             }] } });
 class KbqGutterGhostDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this._x = 0;
+        this._y = 0;
+        this._direction = Direction.Vertical;
+        this._size = 6;
+    }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get x() {
         return this._x;
     }
@@ -88,6 +105,8 @@ class KbqGutterGhostDirective {
         this._x = x;
         this.setStyle("left" /* StyleProperty.Left */, coerceCssPixelValue(x));
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get y() {
         return this._y;
     }
@@ -95,6 +114,8 @@ class KbqGutterGhostDirective {
         this._y = y;
         this.setStyle("top" /* StyleProperty.Top */, coerceCssPixelValue(y));
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get direction() {
         return this._direction;
     }
@@ -102,6 +123,8 @@ class KbqGutterGhostDirective {
         this._direction = direction;
         this.updateDimensions();
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get size() {
         return this._size;
     }
@@ -112,14 +135,6 @@ class KbqGutterGhostDirective {
     get isVertical() {
         return this.direction === Direction.Vertical;
     }
-    constructor(elementRef, renderer) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this._x = 0;
-        this._y = 0;
-        this._direction = Direction.Vertical;
-        this._size = 6;
-    }
     updateDimensions() {
         this.setStyle(this.isVertical ? "width" /* StyleProperty.Width */ : "height" /* StyleProperty.Height */, '100%');
         this.setStyle(this.isVertical ? "height" /* StyleProperty.Height */ : "width" /* StyleProperty.Width */, coerceCssPixelValue(this.size));
@@ -127,10 +142,10 @@ class KbqGutterGhostDirective {
     setStyle(property, value) {
         this.renderer.setStyle(this.elementRef.nativeElement, property, value);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqGutterGhostDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqGutterGhostDirective, isStandalone: true, selector: "kbq-gutter-ghost", inputs: { visible: "visible", x: "x", y: "y", direction: "direction", size: "size" }, host: { properties: { "class.kbq-gutter-ghost_vertical": "isVertical", "class.kbq-gutter-ghost_visible": "visible" }, classAttribute: "kbq-gutter-ghost" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqGutterGhostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqGutterGhostDirective, isStandalone: true, selector: "kbq-gutter-ghost", inputs: { visible: "visible", x: "x", y: "y", direction: "direction", size: "size" }, host: { properties: { "class.kbq-gutter-ghost_vertical": "isVertical", "class.kbq-gutter-ghost_visible": "visible" }, classAttribute: "kbq-gutter-ghost" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqGutterGhostDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqGutterGhostDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-gutter-ghost',
@@ -140,7 +155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '[class.kbq-gutter-ghost_visible]': 'visible'
                     }
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { visible: [{
+        }], propDecorators: { visible: [{
                 type: Input
             }], x: [{
                 type: Input
@@ -152,33 +167,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Input
             }] } });
 class KbqSplitterComponent {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.ngZone = inject(NgZone);
+        this.renderer = inject(Renderer2);
+        this.gutterPositionChange = output();
+        this.areas = [];
+        this.gutters = viewChildren(KbqGutterDirective, ...(ngDevMode ? [{ debugName: "gutters" }] : []));
+        this.ghost = viewChild.required(KbqGutterGhostDirective);
+        this._isDragging = false;
+        this.areaPositionDivider = 2;
+        this.listeners = [];
+        this.areasChangeSubscription = Subscription.EMPTY;
+        this._hideGutters = false;
+        this._disabled = false;
+        this._useGhost = false;
+        this._gutterSize = 6;
+        this._resizing = false;
+        this.mapAndOrderArea = (area, index) => {
+            const order = index * this.areaPositionDivider;
+            area.setOrder(order);
+            return {
+                area,
+                index,
+                order,
+                initialSize: area.getSize()
+            };
+        };
+    }
     get isDragging() {
         return this._isDragging;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get hideGutters() {
         return this._hideGutters;
     }
     set hideGutters(value) {
         this._hideGutters = coerceBooleanProperty(value);
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get direction() {
         return this._direction;
     }
     set direction(direction) {
         this._direction = direction;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
         return this._disabled;
     }
     set disabled(disabled) {
         this._disabled = coerceBooleanProperty(disabled);
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get useGhost() {
         return this._useGhost;
     }
     set useGhost(useGhost) {
         this._useGhost = coerceBooleanProperty(useGhost);
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get gutterSize() {
         return this._gutterSize;
     }
@@ -189,33 +243,6 @@ class KbqSplitterComponent {
     get resizing() {
         return this._resizing;
     }
-    constructor(elementRef, changeDetectorRef, ngZone, renderer) {
-        this.elementRef = elementRef;
-        this.changeDetectorRef = changeDetectorRef;
-        this.ngZone = ngZone;
-        this.renderer = renderer;
-        this.gutterPositionChange = new EventEmitter();
-        this.areas = [];
-        this._isDragging = false;
-        this.areaPositionDivider = 2;
-        this.listeners = [];
-        this.areasChangeSubscription = Subscription.EMPTY;
-        this._hideGutters = false;
-        this._disabled = false;
-        this._useGhost = false;
-        this._gutterSize = 6;
-        this._resizing = false;
-        this.mapAndOrderArea = (area, index) => {
-            const order = index * this.areaPositionDivider;
-            area.setOrder(order);
-            return {
-                area,
-                index,
-                order,
-                initialSize: area.getSize()
-            };
-        };
-    }
     addArea(area) {
         this.areas.push(this.mapAndOrderArea(area, this.areas.length));
         this.changeDetectorRef.detectChanges();
@@ -251,14 +278,15 @@ class KbqSplitterComponent {
         let currentGutter;
         if (this.useGhost) {
             const gutterOrder = leftAreaIndex * 2 + 1;
-            currentGutter = this.gutters.find((gutter) => gutter.order === gutterOrder);
+            currentGutter = this.gutters().find((gutter) => gutter.order === gutterOrder);
             if (currentGutter) {
                 const gutterPosition = currentGutter.getPosition();
-                this.ghost.direction = currentGutter.direction;
-                this.ghost.size = currentGutter.size;
-                this.ghost.x = gutterPosition.x;
-                this.ghost.y = gutterPosition.y;
-                this.ghost.visible = true;
+                const ghost = this.ghost();
+                ghost.direction = currentGutter.direction;
+                ghost.size = currentGutter.size;
+                ghost.x = gutterPosition.x;
+                ghost.y = gutterPosition.y;
+                ghost.visible = true;
                 this.setStyle("cursor" /* StyleProperty.Cursor */, currentGutter.direction === Direction.Vertical ? 'row-resize' : 'col-resize');
             }
         }
@@ -293,7 +321,7 @@ class KbqSplitterComponent {
         return this.direction === Direction.Vertical;
     }
     updateGutter() {
-        this.gutters.forEach((gutter) => {
+        this.gutters().forEach((gutter) => {
             if (gutter.dragged) {
                 gutter.dragged = false;
                 this.changeDetectorRef.detectChanges();
@@ -319,7 +347,7 @@ class KbqSplitterComponent {
             const minPos = leftPos[key] - leftMin;
             const maxPos = rightPos[key] + (rightArea.area.getSize() || 0) - rightMin - currentGutter.size;
             const newPos = gutterPosition[key] - offset;
-            this.ghost[key] = newPos < minPos ? minPos : Math.min(newPos, maxPos);
+            this.ghost()[key] = newPos < minPos ? minPos : Math.min(newPos, maxPos);
         }
         else {
             this.resizeAreas(leftArea, rightArea, offset);
@@ -355,38 +383,30 @@ class KbqSplitterComponent {
         }
         if (this.useGhost && currentGutter) {
             const gutterPosition = currentGutter.getPosition();
-            const offset = this.ghost.direction === Direction.Vertical
-                ? gutterPosition.y - this.ghost.y
-                : gutterPosition.x - this.ghost.x;
+            const ghost = this.ghost();
+            const offset = ghost.direction === Direction.Vertical ? gutterPosition.y - ghost.y : gutterPosition.x - ghost.x;
             this.resizeAreas(leftArea, rightArea, offset);
-            this.ghost.visible = false;
+            this.ghost().visible = false;
             this.setStyle("cursor" /* StyleProperty.Cursor */, 'unset');
         }
         this._isDragging = false;
         this.updateGutter();
+        // TODO: The 'emit' function requires a mandatory void argument
         this.gutterPositionChange.emit();
         this.changeDetectorRef.markForCheck();
     }
     setStyle(property, value) {
         this.renderer.setStyle(this.elementRef.nativeElement, property, value);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSplitterComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqSplitterComponent, isStandalone: true, selector: "kbq-splitter", inputs: { hideGutters: "hideGutters", direction: "direction", disabled: "disabled", useGhost: "useGhost", gutterSize: "gutterSize" }, outputs: { gutterPositionChange: "gutterPositionChange" }, host: { classAttribute: "kbq-splitter" }, queries: [{ propertyName: "areaRefs", predicate: i0.forwardRef(() => KbqSplitterAreaDirective) }], viewQueries: [{ propertyName: "ghost", first: true, predicate: KbqGutterGhostDirective, descendants: true }, { propertyName: "gutters", predicate: KbqGutterDirective, descendants: true }], exportAs: ["kbqSplitter"], ngImport: i0, template: "<ng-content />\n\n@for (area of areas; track area) {\n    @if (!$last) {\n        <kbq-gutter\n            [attr.disabled]=\"disabled || null\"\n            [direction]=\"direction\"\n            [order]=\"$index * 2 + 1\"\n            [size]=\"gutterSize\"\n            [style.display]=\"hideGutters ? 'none' : 'flex'\"\n            (mousedown)=\"onMouseDown($event, $index, $index + 1)\"\n        />\n    }\n}\n\n@if (useGhost) {\n    <kbq-gutter-ghost />\n}\n", styles: [".kbq-splitter{display:flex;position:relative;flex-wrap:nowrap;align-items:stretch;overflow:hidden}.kbq-splitter .kbq-splitter-area{overflow:hidden}.kbq-splitter .kbq-splitter-area_resizing{pointer-events:none}.kbq-gutter{display:flex;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;overflow:hidden}.kbq-gutter.kbq-gutter_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost{position:absolute;z-index:999;display:none;overflow:hidden}.kbq-gutter-ghost.kbq-gutter-ghost_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost.kbq-gutter-ghost_visible{display:block}.kbq-gutter{cursor:col-resize}.kbq-gutter:hover,.kbq-gutter.kbq-gutter_dragged{background-color:#6a739614}.kbq-gutter.kbq-gutter_vertical{cursor:row-resize}.kbq-gutter[disabled]{background-color:var(--kbq-states-background-disabled);cursor:default}.kbq-gutter-ghost{background:#6a739629}\n"], dependencies: [{ kind: "directive", type: KbqGutterDirective, selector: "kbq-gutter", inputs: ["direction", "order", "size"] }, { kind: "directive", type: KbqGutterGhostDirective, selector: "kbq-gutter-ghost", inputs: ["visible", "x", "y", "direction", "size"] }], 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: KbqSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqSplitterComponent, isStandalone: true, selector: "kbq-splitter", inputs: { hideGutters: "hideGutters", direction: "direction", disabled: "disabled", useGhost: "useGhost", gutterSize: "gutterSize" }, outputs: { gutterPositionChange: "gutterPositionChange" }, host: { classAttribute: "kbq-splitter" }, queries: [{ propertyName: "areaRefs", predicate: i0.forwardRef(() => KbqSplitterAreaDirective) }], viewQueries: [{ propertyName: "gutters", predicate: KbqGutterDirective, descendants: true, isSignal: true }, { propertyName: "ghost", first: true, predicate: KbqGutterGhostDirective, descendants: true, isSignal: true }], exportAs: ["kbqSplitter"], ngImport: i0, template: "<ng-content />\n\n@for (area of areas; track area) {\n    @if (!$last) {\n        <kbq-gutter\n            [attr.disabled]=\"disabled || null\"\n            [direction]=\"direction\"\n            [order]=\"$index * 2 + 1\"\n            [size]=\"gutterSize\"\n            [style.display]=\"hideGutters ? 'none' : 'flex'\"\n            (mousedown)=\"onMouseDown($event, $index, $index + 1)\"\n        />\n    }\n}\n\n@if (useGhost) {\n    <kbq-gutter-ghost />\n}\n", styles: [".kbq-splitter{display:flex;position:relative;flex-wrap:nowrap;align-items:stretch;overflow:hidden}.kbq-splitter .kbq-splitter-area{overflow:hidden}.kbq-splitter .kbq-splitter-area_resizing{pointer-events:none}.kbq-gutter{display:flex;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;overflow:hidden}.kbq-gutter.kbq-gutter_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost{position:absolute;z-index:999;display:none;overflow:hidden}.kbq-gutter-ghost.kbq-gutter-ghost_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost.kbq-gutter-ghost_visible{display:block}.kbq-gutter{cursor:col-resize}.kbq-gutter:hover,.kbq-gutter.kbq-gutter_dragged{background-color:var(--kbq-states-background-transparent-hover)}.kbq-gutter.kbq-gutter_vertical{cursor:row-resize}.kbq-gutter[disabled]{background-color:var(--kbq-states-background-disabled);cursor:default}.kbq-gutter-ghost{background:var(--kbq-states-background-transparent-active)}\n"], dependencies: [{ kind: "directive", type: KbqGutterDirective, selector: "kbq-gutter", inputs: ["direction", "order", "size"] }, { kind: "directive", type: KbqGutterGhostDirective, selector: "kbq-gutter-ghost", inputs: ["visible", "x", "y", "direction", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSplitterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-splitter', imports: [KbqGutterDirective, KbqGutterGhostDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqSplitter', host: {
+            args: [{ selector: 'kbq-splitter', imports: [KbqGutterDirective, KbqGutterGhostDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-splitter'
-                    }, preserveWhitespaces: false, template: "<ng-content />\n\n@for (area of areas; track area) {\n    @if (!$last) {\n        <kbq-gutter\n            [attr.disabled]=\"disabled || null\"\n            [direction]=\"direction\"\n            [order]=\"$index * 2 + 1\"\n            [size]=\"gutterSize\"\n            [style.display]=\"hideGutters ? 'none' : 'flex'\"\n            (mousedown)=\"onMouseDown($event, $index, $index + 1)\"\n        />\n    }\n}\n\n@if (useGhost) {\n    <kbq-gutter-ghost />\n}\n", styles: [".kbq-splitter{display:flex;position:relative;flex-wrap:nowrap;align-items:stretch;overflow:hidden}.kbq-splitter .kbq-splitter-area{overflow:hidden}.kbq-splitter .kbq-splitter-area_resizing{pointer-events:none}.kbq-gutter{display:flex;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;overflow:hidden}.kbq-gutter.kbq-gutter_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost{position:absolute;z-index:999;display:none;overflow:hidden}.kbq-gutter-ghost.kbq-gutter-ghost_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost.kbq-gutter-ghost_visible{display:block}.kbq-gutter{cursor:col-resize}.kbq-gutter:hover,.kbq-gutter.kbq-gutter_dragged{background-color:#6a739614}.kbq-gutter.kbq-gutter_vertical{cursor:row-resize}.kbq-gutter[disabled]{background-color:var(--kbq-states-background-disabled);cursor:default}.kbq-gutter-ghost{background:#6a739629}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { gutterPositionChange: [{
-                type: Output
-            }], gutters: [{
-                type: ViewChildren,
-                args: [KbqGutterDirective]
-            }], ghost: [{
-                type: ViewChild,
-                args: [KbqGutterGhostDirective]
-            }], areaRefs: [{
+                    }, exportAs: 'kbqSplitter', preserveWhitespaces: false, template: "<ng-content />\n\n@for (area of areas; track area) {\n    @if (!$last) {\n        <kbq-gutter\n            [attr.disabled]=\"disabled || null\"\n            [direction]=\"direction\"\n            [order]=\"$index * 2 + 1\"\n            [size]=\"gutterSize\"\n            [style.display]=\"hideGutters ? 'none' : 'flex'\"\n            (mousedown)=\"onMouseDown($event, $index, $index + 1)\"\n        />\n    }\n}\n\n@if (useGhost) {\n    <kbq-gutter-ghost />\n}\n", styles: [".kbq-splitter{display:flex;position:relative;flex-wrap:nowrap;align-items:stretch;overflow:hidden}.kbq-splitter .kbq-splitter-area{overflow:hidden}.kbq-splitter .kbq-splitter-area_resizing{pointer-events:none}.kbq-gutter{display:flex;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;overflow:hidden}.kbq-gutter.kbq-gutter_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost{position:absolute;z-index:999;display:none;overflow:hidden}.kbq-gutter-ghost.kbq-gutter-ghost_vertical>.kbq-icon{transform:rotate(90deg)}.kbq-gutter-ghost.kbq-gutter-ghost_visible{display:block}.kbq-gutter{cursor:col-resize}.kbq-gutter:hover,.kbq-gutter.kbq-gutter_dragged{background-color:var(--kbq-states-background-transparent-hover)}.kbq-gutter.kbq-gutter_vertical{cursor:row-resize}.kbq-gutter[disabled]{background-color:var(--kbq-states-background-disabled);cursor:default}.kbq-gutter-ghost{background:var(--kbq-states-background-transparent-active)}\n"] }]
+        }], propDecorators: { gutterPositionChange: [{ type: i0.Output, args: ["gutterPositionChange"] }], gutters: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => KbqGutterDirective), { isSignal: true }] }], ghost: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqGutterGhostDirective), { isSignal: true }] }], areaRefs: [{
                 type: ContentChildren,
                 args: [forwardRef(() => KbqSplitterAreaDirective)]
             }], hideGutters: [{
@@ -401,12 +421,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Input
             }] } });
 class KbqSplitterAreaDirective {
-    constructor(elementRef, renderer, splitter) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.splitter = splitter;
-        this.sizeChange = new EventEmitter();
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.splitter = inject(KbqSplitterComponent);
+        this.sizeChange = output();
         this.window = inject(KBQ_WINDOW);
+        this.platform = inject(Platform);
         this.emitSizeChange = () => {
             this.sizeChange.emit(this.getSize());
         };
@@ -443,6 +464,8 @@ class KbqSplitterAreaDirective {
         this.setStyle(this.getSizeProperty(), coerceCssPixelValue(coerceNumberProperty(size)));
     }
     getSize() {
+        if (!this.platform.isBrowser)
+            return 0;
         return this.elementRef.nativeElement[this.getOffsetSizeProperty()];
     }
     getPosition() {
@@ -473,10 +496,10 @@ class KbqSplitterAreaDirective {
     removeStyle(style) {
         this.renderer.removeStyle(this.elementRef.nativeElement, style);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSplitterAreaDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: forwardRef(() => KbqSplitterComponent) }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqSplitterAreaDirective, isStandalone: true, selector: "[kbq-splitter-area]", outputs: { sizeChange: "sizeChange" }, host: { properties: { "class.kbq-splitter-area_resizing": "isResizing()" }, classAttribute: "kbq-splitter-area" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitterAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqSplitterAreaDirective, isStandalone: true, selector: "[kbq-splitter-area]", outputs: { sizeChange: "sizeChange" }, host: { properties: { "class.kbq-splitter-area_resizing": "isResizing()" }, classAttribute: "kbq-splitter-area" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSplitterAreaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitterAreaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-splitter-area]',
@@ -485,25 +508,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '[class.kbq-splitter-area_resizing]': 'isResizing()'
                     }
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: KbqSplitterComponent, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => KbqSplitterComponent)]
-                }] }], propDecorators: { sizeChange: [{
-                type: Output
-            }] } });
+        }], propDecorators: { sizeChange: [{ type: i0.Output, args: ["sizeChange"] }] } });
 
 class KbqSplitterModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqSplitterModule, imports: [KbqIconModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitterModule, imports: [KbqIconModule,
             KbqGutterDirective,
             KbqGutterGhostDirective,
             KbqSplitterAreaDirective,
             KbqSplitterComponent], exports: [KbqGutterDirective,
             KbqSplitterAreaDirective,
             KbqSplitterComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSplitterModule, imports: [KbqIconModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitterModule, imports: [KbqIconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqSplitterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqSplitterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [