import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
import { SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';
import { CdkListbox, CdkOption } from '@angular/cdk/listbox';
import * as i0 from '@angular/core';
import { input, booleanAttribute, ChangeDetectionStrategy, Component, forwardRef, inject, Injector, output, computed, runInInjectionContext } from '@angular/core';
import { NG_VALIDATORS, Validators } from '@angular/forms';
import { get } from 'es-toolkit/compat';
import * as i1 from 'ngxtension/control-value-accessor';
import { NgxControlValueAccessor } from 'ngxtension/control-value-accessor';
import { explicitEffect } from 'ngxtension/explicit-effect';
import { AvatarComponent } from '@agorapulse/ui-components/avatar';

class FilterChipComponent {
    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    disabledTooltip = input(...(ngDevMode ? [undefined, { debugName: "disabledTooltip" }] : /* istanbul ignore next */ []));
    symbolId = input(...(ngDevMode ? [undefined, { debugName: "symbolId" }] : /* istanbul ignore next */ []));
    avatar = input(...(ngDevMode ? [undefined, { debugName: "avatar" }] : /* istanbul ignore next */ []));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FilterChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FilterChipComponent, isStandalone: true, selector: "button[ap-filter-chip]", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: true, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: true, isRequired: false, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "type": "button" }, properties: { "disabled": "disabled() || null" }, classAttribute: "filter-chip" }, ngImport: i0, template: "@if (symbolId()) {\n    <span class=\"filter-chip-icon\">\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId()\" />\n    </span>\n}\n@if (avatar(); as avatar) {\n    <ap-avatar\n        class=\"filter-chip-avatar\"\n        [username]=\"avatar.username ?? ''\"\n        [profilePicture]=\"avatar.profilePicture\"\n        [network]=\"avatar.network\"\n        [showInitials]=\"true\"\n        [size]=\"16\" />\n}\n<span\n    class=\"filter-chip-label\"\n    [apTooltip]=\"label()\"\n    [apTooltipTruncatedTextOnly]=\"true\"\n    [apTooltipDisabled]=\"!!disabledTooltip()\">\n    {{ label() }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxxs);height:24px;max-width:200px;padding:0 var(--ref-spacing-xxs);border-radius:24px;border:1px solid var(--ref-color-grey-20);background-color:var(--ref-color-white);cursor:pointer;overflow:hidden;font-family:var(--ref-font-family);font-size:var(--ref-font-size-sm);font-weight:var(--ref-font-weight-regular);color:var(--ref-color-grey-100);line-height:var(--ref-font-line-height-sm);transition:border-color .15s ease}:host:hover:not([disabled]){border-color:var(--ref-color-grey-40)}:host:active:not([disabled]){border-color:var(--ref-color-grey-80)}:host:focus-visible{outline:none;border-color:var(--ref-color-grey-40);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host[disabled]{cursor:default;background-color:var(--ref-color-grey-05);border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}:host[aria-selected=true]{background-color:var(--ref-color-electric-blue-10);border-color:var(--ref-color-electric-blue-100);color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold)}:host[aria-selected=true]:hover:not([disabled]){border-color:var(--ref-color-electric-blue-60)}:host[aria-selected=true]:active:not([disabled]){border-color:var(--ref-color-electric-blue-100)}:host[aria-selected=true]:focus-visible{border-color:var(--ref-color-electric-blue-60);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host[aria-selected=true][disabled]{background-color:var(--ref-color-electric-blue-10);border-color:var(--ref-color-electric-blue-40);color:var(--ref-color-electric-blue-40);font-weight:var(--ref-font-weight-regular)}.filter-chip-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px}.filter-chip-avatar{flex-shrink:0}.filter-chip-label{flex:1 0 0;min-width:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FilterChipComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'button[ap-filter-chip]', imports: [SymbolComponent, AvatarComponent, TooltipDirective], host: {
                        type: 'button',
                        class: 'filter-chip',
                        '[disabled]': 'disabled() || null',
                    }, template: "@if (symbolId()) {\n    <span class=\"filter-chip-icon\">\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId()\" />\n    </span>\n}\n@if (avatar(); as avatar) {\n    <ap-avatar\n        class=\"filter-chip-avatar\"\n        [username]=\"avatar.username ?? ''\"\n        [profilePicture]=\"avatar.profilePicture\"\n        [network]=\"avatar.network\"\n        [showInitials]=\"true\"\n        [size]=\"16\" />\n}\n<span\n    class=\"filter-chip-label\"\n    [apTooltip]=\"label()\"\n    [apTooltipTruncatedTextOnly]=\"true\"\n    [apTooltipDisabled]=\"!!disabledTooltip()\">\n    {{ label() }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxxs);height:24px;max-width:200px;padding:0 var(--ref-spacing-xxs);border-radius:24px;border:1px solid var(--ref-color-grey-20);background-color:var(--ref-color-white);cursor:pointer;overflow:hidden;font-family:var(--ref-font-family);font-size:var(--ref-font-size-sm);font-weight:var(--ref-font-weight-regular);color:var(--ref-color-grey-100);line-height:var(--ref-font-line-height-sm);transition:border-color .15s ease}:host:hover:not([disabled]){border-color:var(--ref-color-grey-40)}:host:active:not([disabled]){border-color:var(--ref-color-grey-80)}:host:focus-visible{outline:none;border-color:var(--ref-color-grey-40);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host[disabled]{cursor:default;background-color:var(--ref-color-grey-05);border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-40)}:host[aria-selected=true]{background-color:var(--ref-color-electric-blue-10);border-color:var(--ref-color-electric-blue-100);color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold)}:host[aria-selected=true]:hover:not([disabled]){border-color:var(--ref-color-electric-blue-60)}:host[aria-selected=true]:active:not([disabled]){border-color:var(--ref-color-electric-blue-100)}:host[aria-selected=true]:focus-visible{border-color:var(--ref-color-electric-blue-60);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}:host[aria-selected=true][disabled]{background-color:var(--ref-color-electric-blue-10);border-color:var(--ref-color-electric-blue-40);color:var(--ref-color-electric-blue-40);font-weight:var(--ref-font-weight-regular)}.filter-chip-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px}.filter-chip-avatar{flex-shrink:0}.filter-chip-label{flex:1 0 0;min-width:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}\n"] }]
        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledTooltip", required: false }] }], symbolId: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolId", required: false }] }], avatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatar", required: false }] }] } });

const AP_FILTER_CHIPS_LIST_VALIDATOR = {
    provide: NG_VALIDATORS,
    useExisting: forwardRef(() => FilterChipsListComponent),
    multi: true,
};
const requiredArrayValidator = control => {
    const value = control.value;
    if (Array.isArray(value))
        return value.length > 0 ? null : { required: true };
    return Validators.required(control);
};
class FilterChipsListComponent {
    symbolRegistry = inject(SymbolRegistry);
    injector = inject(Injector);
    /**
     * Resolved in `ngOnInit` (not as a field initializer) to avoid a circular dependency:
     * `NgModel` injects `NG_VALIDATORS` (multi) → `FilterChipsListComponent` (validator) →
     * `NgxControlValueAccessor` → `NgControl` (= the same `NgModel` being constructed).
     */
    cva;
    /** Chips to render. Each item exposes a `value` (extracted via `bindValue`) and a label (via `bindLabel`). */
    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
    /** When true, multiple chips can be selected at once. When false, only one. */
    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /** Disable every chip in the list. Combined with the FormControl disabled state. */
    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /** Mark the control as required. Surfaces `{ required: true }` on empty selection and `aria-required="true"`. */
    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    /** Key on `item.value` to project as the form-model value. When null (default), the whole `item.value` is used. */
    bindValue = input(null, ...(ngDevMode ? [{ debugName: "bindValue" }] : /* istanbul ignore next */ []));
    /** Key on `item.value` to display as the chip label. When null (default), the value itself is used when primitive. */
    bindLabel = input(null, ...(ngDevMode ? [{ debugName: "bindLabel" }] : /* istanbul ignore next */ []));
    /** Equality used to match selected values against items. Defaults to `Object.is` — pass a custom fn for object values. */
    compareWith = input(Object.is, ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
    /** Accessible label for the listbox — relayed to the inner `[role="listbox"]` element via `aria-label`. */
    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
    /** User-initiated selection change — payload `{ value, item }`. Not emitted on programmatic `writeValue`. */
    valueChange = output();
    /** Effective disabled state — `[disabled]` input OR `FormControl.disable()` (mirrored by `cva.disabled$`). */
    isDisabled = computed(() => this.disabled() || (this.cva?.disabled$() ?? false), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
    viewItems = computed(() => {
        const listDisabled = this.isDisabled();
        return this.items().map(item => ({
            source: item,
            modelValue: this.modelOf(item),
            label: this.labelOf(item),
            symbolId: item.symbolId,
            avatar: item.avatar,
            disabledTooltip: item.disabledTooltip,
            disabled: listDisabled || (item.disabled ?? false),
        }));
    }, ...(ngDevMode ? [{ debugName: "viewItems" }] : /* istanbul ignore next */ []));
    _validator = computed(() => (this.required() ? requiredArrayValidator : null), ...(ngDevMode ? [{ debugName: "_validator" }] : /* istanbul ignore next */ []));
    _onValidatorChange;
    constructor() {
        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));
        explicitEffect([this._validator], () => this._onValidatorChange());
    }
    ngOnInit() {
        this.cva = runInInjectionContext(this.injector, () => inject(NgxControlValueAccessor));
    }
    onListboxChange(event) {
        // Setter on `cva.value` updates the signal AND notifies the parent ngControl via the registered `onChange`.
        this.cva.value = event.value;
        const cmp = this.compareWith();
        const item = this.items().find(i => cmp(this.modelOf(i), event.option?.value)) ?? this.items()[0];
        this.valueChange.emit({ value: event.value, item });
    }
    validate(control) {
        return this._validator()?.(control) ?? null;
    }
    registerOnValidatorChange(fn) {
        this._onValidatorChange = fn;
    }
    modelOf(item) {
        const path = this.bindValue();
        return path ? get(item.value, path) : item.value;
    }
    labelOf(item) {
        const path = this.bindLabel();
        if (path)
            return String(get(item.value, path) ?? '');
        return typeof item.value === 'object' ? '' : String(item.value);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FilterChipsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: FilterChipsListComponent, isStandalone: true, selector: "ap-filter-chips-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [AP_FILTER_CHIPS_LIST_VALIDATOR], hostDirectives: [{ directive: i1.NgxControlValueAccessor }], ngImport: i0, template: "<div class=\"filter-chips-list\"\n     cdkListbox\n     cdkListboxOrientation=\"horizontal\"\n     [cdkListboxValue]=\"cva.value$()\"\n     [cdkListboxMultiple]=\"multiple()\"\n     [cdkListboxDisabled]=\"isDisabled()\"\n     [cdkListboxCompareWith]=\"compareWith()\"\n     [attr.aria-required]=\"required() || null\"\n     [attr.aria-label]=\"ariaLabel()\"\n     (cdkListboxValueChange)=\"onListboxChange($event)\">\n    @for (item of viewItems(); track item.source) {\n        <button\n            ap-filter-chip\n            type=\"button\"\n            [cdkOption]=\"item.modelValue\"\n            [cdkOptionDisabled]=\"item.disabled\"\n            [disabled]=\"item.disabled\"\n            [apTooltip]=\"item.disabledTooltip ?? null\"\n            [apTooltipDisabled]=\"!item.disabled || !item.disabledTooltip\"\n            [label]=\"item.label\"\n            [symbolId]=\"item.symbolId\"\n            [avatar]=\"item.avatar\"\n            [disabledTooltip]=\"item.disabledTooltip\"></button>\n    }\n</div>\n", styles: [":host{display:block}.filter-chips-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ref-spacing-xxs)}\n"], dependencies: [{ kind: "component", type: FilterChipComponent, selector: "button[ap-filter-chip]", inputs: ["label", "disabled", "disabledTooltip", "symbolId", "avatar"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: FilterChipsListComponent, decorators: [{
            type: Component,
            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-filter-chips-list', imports: [FilterChipComponent, TooltipDirective, CdkListbox, CdkOption], hostDirectives: [NgxControlValueAccessor], providers: [AP_FILTER_CHIPS_LIST_VALIDATOR], template: "<div class=\"filter-chips-list\"\n     cdkListbox\n     cdkListboxOrientation=\"horizontal\"\n     [cdkListboxValue]=\"cva.value$()\"\n     [cdkListboxMultiple]=\"multiple()\"\n     [cdkListboxDisabled]=\"isDisabled()\"\n     [cdkListboxCompareWith]=\"compareWith()\"\n     [attr.aria-required]=\"required() || null\"\n     [attr.aria-label]=\"ariaLabel()\"\n     (cdkListboxValueChange)=\"onListboxChange($event)\">\n    @for (item of viewItems(); track item.source) {\n        <button\n            ap-filter-chip\n            type=\"button\"\n            [cdkOption]=\"item.modelValue\"\n            [cdkOptionDisabled]=\"item.disabled\"\n            [disabled]=\"item.disabled\"\n            [apTooltip]=\"item.disabledTooltip ?? null\"\n            [apTooltipDisabled]=\"!item.disabled || !item.disabledTooltip\"\n            [label]=\"item.label\"\n            [symbolId]=\"item.symbolId\"\n            [avatar]=\"item.avatar\"\n            [disabledTooltip]=\"item.disabledTooltip\"></button>\n    }\n</div>\n", styles: [":host{display:block}.filter-chips-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ref-spacing-xxs)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], bindValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindValue", required: false }] }], bindLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "bindLabel", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });

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

export { AP_FILTER_CHIPS_LIST_VALIDATOR, FilterChipsListComponent };
//# sourceMappingURL=agorapulse-ui-components-filter-chips-list.mjs.map
