import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
import { SymbolRegistry, SymbolComponent } from '@agorapulse/ui-symbol';
import * as i0 from '@angular/core';
import { inject, input, model, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';

/**
 * A single-select control for switching between a small set (2–4) of mutually
 * exclusive options laid out side by side.
 *
 * @example
 * ```html
 * <ap-segmented-control
 *     [options]="[{ value: 'list', label: 'List' }, { value: 'board', label: 'Board' }]"
 *     [(value)]="view"
 *     ariaLabel="Choose a view" />
 * ```
 */
class SegmentedControlComponent {
    symbolRegistry = inject(SymbolRegistry);
    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
    /** The currently selected value. Supports two-way binding via `[(value)]`. Defaults to the first option's value when unset. */
    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
    /** Disables the whole control. */
    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
    /** When true, the control fills its container width and segments share it equally instead of fitting their text. */
    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
    /** Accessible name for the group of segments. */
    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
    // Keep `value` defined: fall back to the first option whenever it is unset.
    defaultValueEffect = effect(() => {
        const [firstOption] = this.options();
        if (!this.value() && firstOption) {
            untracked(() => this.value.set(firstOption.value));
        }
    }, ...(ngDevMode ? [{ debugName: "defaultValueEffect" }] : []));
    constructor() {
        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
    }
    select(option) {
        if (this.disabled() || option.disabled) {
            return;
        }
        this.value.set(option.value);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SegmentedControlComponent, isStandalone: true, selector: "ap-segmented-control", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.ap-segmented-control--full-width": "fullWidth()" } }, ngImport: i0, template: "<div\n    class=\"ap-segmented-control\"\n    role=\"group\"\n    [attr.aria-label]=\"ariaLabel() || null\">\n    @for (option of options(); track option.value) {\n        <button\n            type=\"button\"\n            class=\"ap-segmented-control__segment\"\n            [class.ap-segmented-control__segment--selected]=\"value() === option.value\"\n            [attr.aria-pressed]=\"value() === option.value\"\n            [disabled]=\"disabled() || (option.disabled ?? false)\"\n            (click)=\"select(option)\">\n            @if (option.symbolId) {\n                <ap-symbol\n                    class=\"ap-segmented-control__icon\"\n                    [symbolId]=\"option.symbolId\"\n                    [size]=\"16\"\n                    [color]=\"value() === option.value ? 'blue' : 'grey-blue'\" />\n            }\n            <span class=\"ap-segmented-control__label\">{{ option.label }}</span>\n        </button>\n    }\n</div>\n", styles: ["ap-segmented-control{display:inline-block}ap-segmented-control.ap-segmented-control--full-width{display:block}ap-segmented-control.ap-segmented-control--full-width .ap-segmented-control{display:flex;width:100%}ap-segmented-control.ap-segmented-control--full-width .ap-segmented-control__segment{flex:1 1 0}.ap-segmented-control{display:inline-flex;align-items:center}.ap-segmented-control .ap-segmented-control__segment{display:inline-flex;align-items:center;justify-content:center;gap:var(--ref-spacing-xxs);box-sizing:border-box;min-height:36px;margin:0;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);border:1px solid var(--ref-color-grey-20);background-color:var(--ref-color-white);color:var(--ref-color-grey-100);font-family:var(--ref-font-family);font-size:var(--ref-font-size-sm);font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md);white-space:nowrap;cursor:pointer;transition:color .15s ease,border-color .15s ease,background-color .15s ease}.ap-segmented-control .ap-segmented-control__segment:not(:first-child){margin-left:-1px}.ap-segmented-control .ap-segmented-control__segment:first-child{border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm)}.ap-segmented-control .ap-segmented-control__segment:last-child{border-top-right-radius:var(--ref-border-radius-sm);border-bottom-right-radius:var(--ref-border-radius-sm)}.ap-segmented-control .ap-segmented-control__segment:hover:not(:disabled){z-index:1;border-color:var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment:focus-visible{z-index:2;outline:none;border-color:var(--ref-color-electric-blue-100);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment.ap-segmented-control__segment--selected{z-index:1;border-color:var(--ref-color-electric-blue-100);color:var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment:disabled{border-color:var(--ref-color-grey-20);background-color:var(--ref-color-grey-05);color:var(--ref-color-grey-40);cursor:not-allowed}.ap-segmented-control .ap-segmented-control__label{font:inherit;min-width:0;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SegmentedControlComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-segmented-control', imports: [SymbolComponent], host: {
                        '[class.ap-segmented-control--full-width]': 'fullWidth()',
                    }, encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"ap-segmented-control\"\n    role=\"group\"\n    [attr.aria-label]=\"ariaLabel() || null\">\n    @for (option of options(); track option.value) {\n        <button\n            type=\"button\"\n            class=\"ap-segmented-control__segment\"\n            [class.ap-segmented-control__segment--selected]=\"value() === option.value\"\n            [attr.aria-pressed]=\"value() === option.value\"\n            [disabled]=\"disabled() || (option.disabled ?? false)\"\n            (click)=\"select(option)\">\n            @if (option.symbolId) {\n                <ap-symbol\n                    class=\"ap-segmented-control__icon\"\n                    [symbolId]=\"option.symbolId\"\n                    [size]=\"16\"\n                    [color]=\"value() === option.value ? 'blue' : 'grey-blue'\" />\n            }\n            <span class=\"ap-segmented-control__label\">{{ option.label }}</span>\n        </button>\n    }\n</div>\n", styles: ["ap-segmented-control{display:inline-block}ap-segmented-control.ap-segmented-control--full-width{display:block}ap-segmented-control.ap-segmented-control--full-width .ap-segmented-control{display:flex;width:100%}ap-segmented-control.ap-segmented-control--full-width .ap-segmented-control__segment{flex:1 1 0}.ap-segmented-control{display:inline-flex;align-items:center}.ap-segmented-control .ap-segmented-control__segment{display:inline-flex;align-items:center;justify-content:center;gap:var(--ref-spacing-xxs);box-sizing:border-box;min-height:36px;margin:0;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);border:1px solid var(--ref-color-grey-20);background-color:var(--ref-color-white);color:var(--ref-color-grey-100);font-family:var(--ref-font-family);font-size:var(--ref-font-size-sm);font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-md);white-space:nowrap;cursor:pointer;transition:color .15s ease,border-color .15s ease,background-color .15s ease}.ap-segmented-control .ap-segmented-control__segment:not(:first-child){margin-left:-1px}.ap-segmented-control .ap-segmented-control__segment:first-child{border-top-left-radius:var(--ref-border-radius-sm);border-bottom-left-radius:var(--ref-border-radius-sm)}.ap-segmented-control .ap-segmented-control__segment:last-child{border-top-right-radius:var(--ref-border-radius-sm);border-bottom-right-radius:var(--ref-border-radius-sm)}.ap-segmented-control .ap-segmented-control__segment:hover:not(:disabled){z-index:1;border-color:var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment:focus-visible{z-index:2;outline:none;border-color:var(--ref-color-electric-blue-100);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment.ap-segmented-control__segment--selected{z-index:1;border-color:var(--ref-color-electric-blue-100);color:var(--ref-color-electric-blue-100)}.ap-segmented-control .ap-segmented-control__segment:disabled{border-color:var(--ref-color-grey-20);background-color:var(--ref-color-grey-05);color:var(--ref-color-grey-40);cursor:not-allowed}.ap-segmented-control .ap-segmented-control__label{font:inherit;min-width:0;overflow:hidden;text-overflow:ellipsis}\n"] }]
        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { SegmentedControlComponent };
//# sourceMappingURL=agorapulse-ui-components-segmented-control.mjs.map
