import { booleanAttribute, ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Input, QueryList, ViewEncapsulation } from '@angular/core';
import { KbqButton, KbqButtonStyles } from '@koobiq/components/button';
import { KbqColorDirective, KbqComponentColors, kbqInjectNativeElement } from '@koobiq/components/core';
import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
import { delay } from 'rxjs/operators';
import * as i0 from "@angular/core";
export class KbqSplitButton extends KbqColorDirective {
    /** component style, will be set for nested buttons */
    get kbqStyle() {
        return `kbq-button_${this._kbqStyle}`;
    }
    set kbqStyle(value) {
        this._kbqStyle = value || KbqButtonStyles.Filled;
        this.updateStyle(this._kbqStyle);
    }
    /** component color, will be set for nested buttons */
    get color() {
        return this._color;
    }
    set color(value) {
        if (!value)
            return;
        super.color = value;
        this.updateColor(this.color);
    }
    /** Whether the checkbox is disabled. */
    get disabled() {
        return this._disabled;
    }
    set disabled(value) {
        this._disabled = value;
        this.updateDisabledState(this._disabled);
    }
    get firstDisabled() {
        return this.buttons.first?.disabled;
    }
    get secondDisabled() {
        return this.buttons.length > 1 && this.buttons.last?.disabled;
    }
    constructor() {
        super();
        this.nativeElement = kbqInjectNativeElement();
        /** Sets the width of the dropdown to the width of the trigger. Default is false */
        this.panelAutoWidth = false;
        this._kbqStyle = KbqButtonStyles.Filled;
        this.updateDropdownParams = () => {
            if (!this.dropdownTrigger)
                return;
            this.dropdownTrigger.dropdown.xPosition = 'before';
            if (this.panelAutoWidth) {
                // we need to use a timeout of about 50ms to wait for the styles to apply
                setTimeout(() => {
                    const { width } = this.nativeElement.getClientRects()[0];
                    this.dropdownTrigger.dropdown.triggerWidth = `${Math.round(width)}px`;
                }, 50);
            }
        };
        this.color = KbqComponentColors.ContrastFade;
    }
    ngAfterContentInit() {
        this.updateClasses();
        this.updateStyle(this._kbqStyle);
        this.updateColor(this.color);
        this.updateDisabledState(this.disabled);
        this.updateDropdownParams();
        if (!this.buttons.length) {
            throw new Error(`kbq-split-button must contain at least one button`);
        }
        this.buttons.changes.pipe(delay(0)).subscribe(() => {
            this.updateClasses();
            this.updateStyle(this._kbqStyle);
            this.updateColor(this.color);
            this.updateDropdownParams();
        });
    }
    updateClasses() {
        this.buttons.forEach((button) => {
            button.getHostElement().classList.remove(`kbq-split-button_first`, `kbq-split-button_second`);
        });
        this.buttons.first?.getHostElement().classList.add(`kbq-split-button_first`);
        this.buttons.last?.getHostElement().classList.add(`kbq-split-button_second`);
        this.buttons.forEach((button) => {
            button.getHostElement().classList.add(`kbq-split-button_item`);
        });
    }
    updateColor(color) {
        this.buttons?.forEach((button) => (button.color = color));
    }
    updateStyle(style) {
        this.buttons?.forEach((button) => (button.kbqStyle = style));
    }
    updateDisabledState(state) {
        if (state === undefined)
            return;
        this.buttons?.forEach((button) => (button.disabled = state));
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqSplitButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: KbqSplitButton, isStandalone: true, selector: "kbq-split-button, [kbq-split-button]", inputs: { panelAutoWidth: "panelAutoWidth", kbqStyle: "kbqStyle", color: "color", disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "class": "kbqStyle", "class.kbq-split-button_styles-for-nested": "buttons.length > 1", "class.kbq-split-button_first-disabled": "firstDisabled", "class.kbq-split-button_second-disabled": "secondDisabled" }, classAttribute: "kbq-split-button" }, queries: [{ propertyName: "dropdownTrigger", first: true, predicate: KbqDropdownTrigger, descendants: true }, { propertyName: "buttons", predicate: KbqButton }], usesInheritance: true, ngImport: i0, template: `
        <ng-content select="[kbq-button]" />

        <ng-content select="[kbq-button]" />
    `, isInline: true, styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-split-button{display:flex;flex-direction:row;min-width:0;border-radius:var(--kbq-size-border-radius)}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_first{min-width:0;border-right:none;border-top-right-radius:unset;border-bottom-right-radius:unset}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_first.kbq-button{padding-right:10px}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_first .kbq-button-wrapper{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_second{border-left:none;border-top-left-radius:unset;border-bottom-left-radius:unset}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_second:before{display:block;content:\"\";position:absolute;left:0;top:calc(var(--kbq-size-s) - var(--kbq-button-size-border-width));width:1px;height:var(--kbq-size-l)}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_first:not(.kbq-disabled):is(:hover,.kbq-hover,.cdk-keyboard-focused,.kbq-active)+.kbq-split-button_second:before{display:none}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_second:not(.kbq-disabled):is(:hover,.kbq-hover,.cdk-keyboard-focused,.kbq-active):before{display:none}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-button-icon+.kbq-button-icon{padding-left:var(--kbq-size-xxs);padding-right:var(--kbq-size-xxs)}.kbq-split-button:hover:has(.kbq-button_transparent){background:var(--kbq-states-background-transparent-hover, rgba(108, 115, 147, .08))}.kbq-split-button .kbq-split-button_item.kbq-contrast.kbq-button_filled:before{background:var(--kbq-foreground-on-contrast)}.kbq-split-button .kbq-split-button_item.kbq-contrast.kbq-button_transparent:before,.kbq-split-button .kbq-split-button_item.kbq-contrast-fade.kbq-button_outline:before,.kbq-split-button .kbq-split-button_item.kbq-contrast-fade.kbq-button_filled:before{background:var(--kbq-line-contrast-fade)}.kbq-split-button .kbq-split-button_item.kbq-theme-fade.kbq-button_outline:before,.kbq-split-button .kbq-split-button_item.kbq-theme.kbq-button_transparent:before{background:var(--kbq-line-theme-fade)}.kbq-split-button .kbq-split-button_item.kbq-split-button_first.cdk-keyboard-focused{z-index:1;box-shadow:inset -1px 0 0 0 var(--kbq-states-line-focus-theme)}.kbq-split-button .kbq-split-button_item.kbq-split-button_second.cdk-keyboard-focused{box-shadow:inset 1px 0 0 0 var(--kbq-states-line-focus-theme)}.kbq-split-button .kbq-button_outline:has(+.kbq-button_outline){border-right:none}.kbq-split-button .kbq-button_outline:has(+.kbq-button_outline)+.kbq-button_outline{border-left:none}.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast-fade.kbq-button_filled .kbq-split-button_item,.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast.kbq-button_filled .kbq-split-button_item{background:var(--kbq-states-background-disabled)}.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast-fade.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled):hover,.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled):hover{background:var(--kbq-states-background-contrast-fade-hover)}.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast-fade.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled):active,.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled):active{background:var(--kbq-states-background-contrast-fade-active)}.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast-fade.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-icon-contrast)}.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast-fade.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled):before,.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled):before{background:var(--kbq-line-contrast-fade)}.kbq-split-button.kbq-split-button_first-disabled.kbq-theme-fade.kbq-button_outline .kbq-split-button_item{border-color:var(--kbq-button-outline-theme-fade-on-states-disabled-border)}.kbq-split-button.kbq-split-button_second-disabled:not(.kbq-split-button_first-disabled).kbq-contrast.kbq-button_filled .kbq-split-button_second{background:var(--kbq-button-filled-contrast-fade-off-background)}.kbq-split-button.kbq-split-button_second-disabled:not(.kbq-split-button_first-disabled).kbq-contrast-fade.kbq-button_filled .kbq-split-button_first{background:var(--kbq-states-background-disabled)}.kbq-split-button.kbq-split-button_second-disabled:not(.kbq-split-button_first-disabled).kbq-theme-fade.kbq-button_outline .kbq-split-button_item{border-color:var(--kbq-button-outline-theme-fade-on-states-disabled-border)}.kbq-split-button.kbq-split-button_second-disabled:not(.kbq-split-button_first-disabled).kbq-theme.kbq-button_transparent .kbq-split-button_second:before{background:var(--kbq-states-line-disabled)}.kbq-split-button.kbq-split-button_second-disabled:not(.kbq-split-button_first-disabled) .kbq-split-button_second:before{background:#8a8fa899}.kbq-split-button.kbq-split-button_first-disabled.kbq-split-button_second-disabled .kbq-split-button_second:before{background:var(--kbq-line-contrast-fade)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqSplitButton, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'kbq-split-button, [kbq-split-button]', template: `
        <ng-content select="[kbq-button]" />

        <ng-content select="[kbq-button]" />
    `, host: {
                        class: 'kbq-split-button',
                        '[class]': 'kbqStyle',
                        '[class.kbq-split-button_styles-for-nested]': 'buttons.length > 1',
                        '[class.kbq-split-button_first-disabled]': 'firstDisabled',
                        '[class.kbq-split-button_second-disabled]': 'secondDisabled'
                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-truncate-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-split-button{display:flex;flex-direction:row;min-width:0;border-radius:var(--kbq-size-border-radius)}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_first{min-width:0;border-right:none;border-top-right-radius:unset;border-bottom-right-radius:unset}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_first.kbq-button{padding-right:10px}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_first .kbq-button-wrapper{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_second{border-left:none;border-top-left-radius:unset;border-bottom-left-radius:unset}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_second:before{display:block;content:\"\";position:absolute;left:0;top:calc(var(--kbq-size-s) - var(--kbq-button-size-border-width));width:1px;height:var(--kbq-size-l)}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_first:not(.kbq-disabled):is(:hover,.kbq-hover,.cdk-keyboard-focused,.kbq-active)+.kbq-split-button_second:before{display:none}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-split-button_second:not(.kbq-disabled):is(:hover,.kbq-hover,.cdk-keyboard-focused,.kbq-active):before{display:none}.kbq-split-button.kbq-split-button_styles-for-nested .kbq-button-icon+.kbq-button-icon{padding-left:var(--kbq-size-xxs);padding-right:var(--kbq-size-xxs)}.kbq-split-button:hover:has(.kbq-button_transparent){background:var(--kbq-states-background-transparent-hover, rgba(108, 115, 147, .08))}.kbq-split-button .kbq-split-button_item.kbq-contrast.kbq-button_filled:before{background:var(--kbq-foreground-on-contrast)}.kbq-split-button .kbq-split-button_item.kbq-contrast.kbq-button_transparent:before,.kbq-split-button .kbq-split-button_item.kbq-contrast-fade.kbq-button_outline:before,.kbq-split-button .kbq-split-button_item.kbq-contrast-fade.kbq-button_filled:before{background:var(--kbq-line-contrast-fade)}.kbq-split-button .kbq-split-button_item.kbq-theme-fade.kbq-button_outline:before,.kbq-split-button .kbq-split-button_item.kbq-theme.kbq-button_transparent:before{background:var(--kbq-line-theme-fade)}.kbq-split-button .kbq-split-button_item.kbq-split-button_first.cdk-keyboard-focused{z-index:1;box-shadow:inset -1px 0 0 0 var(--kbq-states-line-focus-theme)}.kbq-split-button .kbq-split-button_item.kbq-split-button_second.cdk-keyboard-focused{box-shadow:inset 1px 0 0 0 var(--kbq-states-line-focus-theme)}.kbq-split-button .kbq-button_outline:has(+.kbq-button_outline){border-right:none}.kbq-split-button .kbq-button_outline:has(+.kbq-button_outline)+.kbq-button_outline{border-left:none}.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast-fade.kbq-button_filled .kbq-split-button_item,.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast.kbq-button_filled .kbq-split-button_item{background:var(--kbq-states-background-disabled)}.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast-fade.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled):hover,.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled):hover{background:var(--kbq-states-background-contrast-fade-hover)}.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast-fade.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled):active,.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled):active{background:var(--kbq-states-background-contrast-fade-active)}.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast-fade.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled) .kbq-icon.kbq-empty,.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled) .kbq-icon.kbq-empty{color:var(--kbq-icon-contrast)}.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast-fade.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled):before,.kbq-split-button.kbq-split-button_first-disabled.kbq-contrast.kbq-button_filled .kbq-split-button_second:not(.kbq-disabled):before{background:var(--kbq-line-contrast-fade)}.kbq-split-button.kbq-split-button_first-disabled.kbq-theme-fade.kbq-button_outline .kbq-split-button_item{border-color:var(--kbq-button-outline-theme-fade-on-states-disabled-border)}.kbq-split-button.kbq-split-button_second-disabled:not(.kbq-split-button_first-disabled).kbq-contrast.kbq-button_filled .kbq-split-button_second{background:var(--kbq-button-filled-contrast-fade-off-background)}.kbq-split-button.kbq-split-button_second-disabled:not(.kbq-split-button_first-disabled).kbq-contrast-fade.kbq-button_filled .kbq-split-button_first{background:var(--kbq-states-background-disabled)}.kbq-split-button.kbq-split-button_second-disabled:not(.kbq-split-button_first-disabled).kbq-theme-fade.kbq-button_outline .kbq-split-button_item{border-color:var(--kbq-button-outline-theme-fade-on-states-disabled-border)}.kbq-split-button.kbq-split-button_second-disabled:not(.kbq-split-button_first-disabled).kbq-theme.kbq-button_transparent .kbq-split-button_second:before{background:var(--kbq-states-line-disabled)}.kbq-split-button.kbq-split-button_second-disabled:not(.kbq-split-button_first-disabled) .kbq-split-button_second:before{background:#8a8fa899}.kbq-split-button.kbq-split-button_first-disabled.kbq-split-button_second-disabled .kbq-split-button_second:before{background:var(--kbq-line-contrast-fade)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { buttons: [{
                type: ContentChildren,
                args: [KbqButton]
            }], dropdownTrigger: [{
                type: ContentChild,
                args: [KbqDropdownTrigger]
            }], panelAutoWidth: [{
                type: Input
            }], kbqStyle: [{
                type: Input
            }], color: [{
                type: Input
            }], disabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 