import { MXSelectionValueComponent, AXComponent, AXFocusableComponent, AXValuableComponent, MXSelectionBridgeService, AX_SELECTION_DATA_TOKEN } from '@acorex/cdk/common';
import * as i1 from '@acorex/core/translation';
import { AXTranslationModule } from '@acorex/core/translation';
import { NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { input, forwardRef, HostBinding, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { AXCheckBoxModule } from '@acorex/components/check-box';
import { AXFormModule } from '@acorex/components/form';
import { AXLabelModule } from '@acorex/components/label';
import { AXRadioModule } from '@acorex/components/radio';

/**
 * The Button is a component which detects user interaction and triggers a corresponding event
 *
 * @category Components
 */
//TODO: on parent click (card style) -> checkbox or radio change value
class AXSelectionListComponent extends MXSelectionValueComponent {
    constructor() {
        super(...arguments);
        /**
         * sets the direction of the component.
         * @param {AXDirection} value
         */
        this.direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : []));
        /**
         * The custom template used for rendering content.
         *
         * @param {TemplateRef<unknown>} customTemplate
         */
        this.customTemplate = input(...(ngDevMode ? [undefined, { debugName: "customTemplate" }] : []));
        /** @ignore */
        this._showControl = true;
        /** @ignore */
        this._items = [];
        /** @ignore */
        this._hintField = 'hint';
        /**
         * Defines the visual appearance of the selection list.
         *
         * @defaultValue 'solid'
         */
        this.look = 'solid';
    }
    /**
     * @param {void}
     * Gets the current state of the control visibility.
     */
    get showControl() {
        return this._showControl;
    }
    /**
     * @param {boolean} v
     * Sets the visibility state of the control.
     */
    set showControl(v) {
        this.setOption({
            name: 'showControl',
            value: v,
        });
    }
    /**
     * Gets the list of items.
     * @param {void}
     */
    get items() {
        return this._items;
    }
    /**
     * Sets the list of items.
     *
     * @param {any[]} v
     */
    set items(v) {
        this.softClearSelectionCache();
        this.setOption({
            name: 'items',
            value: v,
        });
    }
    /**
     * Gets the field used for displaying hints.
     */
    get hintField() {
        return this._hintField;
    }
    /**
     * Sets the field used for displaying hints.
     *
     * @param {string} v
     */
    set hintField(v) {
        this.setOption({
            name: 'hintField',
            value: v,
        });
    }
    /**
     * Retrieves an item from the list by its key.
     *
     * @param {unknown} key - The key to search for.
     */
    getItemByKey(key) {
        return this.items.find((c) => c == this.value || c[this.valueField] == key);
    }
    /** @ignore */
    _handleOnItemValueChange(item, e) {
        if (this.readonly || this.disabled) {
            e.preventDefault();
            e.stopPropagation();
        }
        else {
            e.target.checked ? this.selectItems(item) : this.unselectItems(item);
        }
    }
    /** @ignore */
    get __hostClass() {
        return [
            `ax-look-${this.look}`,
            `${this.disabled ? 'ax-state-disabled' : ''}`,
            `${this.readonly ? 'ax-state-readonly' : ''}`,
        ];
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXSelectionListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXSelectionListComponent, isStandalone: true, selector: "ax-selection-list", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: false, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: false, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: false, isRequired: false, transformFunction: null }, readonlyField: { classPropertyName: "readonlyField", publicName: "readonlyField", isSignal: false, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null }, showControl: { classPropertyName: "showControl", publicName: "showControl", isSignal: false, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
            { provide: AXComponent, useExisting: AXSelectionListComponent },
            { provide: AXFocusableComponent, useExisting: AXSelectionListComponent },
            { provide: AXValuableComponent, useExisting: AXSelectionListComponent },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => AXSelectionListComponent),
                multi: true,
            },
            {
                provide: AX_SELECTION_DATA_TOKEN,
                useClass: MXSelectionBridgeService,
            },
        ], usesInheritance: true, ngImport: i0, template: "<ul class=\"ax-{{ direction() }}\">\n  @for (item of items; let i = $index; track i) {\n    <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"item.disabled\">\n      <label [class.ax-hide-control]=\"!showControl\">\n        @if (multiple) {\n          <input\n            [id]=\"id + '-' + i\"\n            class=\"ax-checkbox\"\n            type=\"checkbox\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item[disabledField] || readonly\"\n          />\n        } @else {\n          <input\n            [id]=\"id + '-' + i\"\n            class=\"ax-radio\"\n            type=\"radio\"\n            [attr.name]=\"id\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item[disabledField] || readonly\"\n          />\n        }\n\n        @if (customTemplate()) {\n          <div>\n            <ng-container\n              [ngTemplateOutlet]=\"customTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n            >\n            </ng-container>\n          </div>\n        } @else {\n          <div>\n            {{ getDisplayText(item) | translate | async }}\n            @if (item[hintField]) {\n              <p class=\"ax-hint-text\">\n                {{ item[hintField] | translate | async }}\n              </p>\n            }\n          </div>\n        }\n      </label>\n    </li>\n  }\n</ul>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: [".ax-dark ax-selection-list.ax-look-card ul.ax-vertical>li.ax-state-selected label,.ax-dark ax-selection-list.ax-look-card ul.ax-horizontal>li.ax-state-selected label{background-color:rgba(var(--ax-sys-color-primary-darkest-surface),.25)}ax-selection-list.ax-look-divided ul.ax-vertical li:last-child label,ax-selection-list.ax-look-divided ul.ax-horizontal li:last-child label{border-style:none}ax-selection-list.ax-look-divided ul.ax-vertical>li label{border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-bottom:.875rem}ax-selection-list.ax-look-divided ul.ax-horizontal>li label{border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-selection-list.ax-look-card ul{gap:.75rem}ax-selection-list.ax-look-card ul.ax-vertical>li label,ax-selection-list.ax-look-card ul.ax-horizontal>li label{border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-selection-list.ax-look-card ul.ax-vertical>li.ax-state-selected label,ax-selection-list.ax-look-card ul.ax-horizontal>li.ax-state-selected label{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}ax-selection-list.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-selection-list ul{display:flex;flex-wrap:wrap}ax-selection-list ul.ax-vertical{flex-direction:column}ax-selection-list ul.ax-horizontal{flex-direction:row}ax-selection-list ul li{cursor:pointer;-webkit-user-select:none;user-select:none}ax-selection-list ul li label{display:flex;cursor:pointer;align-items:flex-start;padding:.5rem .75rem}ax-selection-list ul li label.ax-hide-control .ax-checkbox,ax-selection-list ul li label.ax-hide-control .ax-radio{display:none}ax-selection-list ul li label.ax-hide-control>div{margin-inline-start:0px}ax-selection-list ul li label .ax-checkbox,ax-selection-list ul li label .ax-radio{margin-top:.25rem}ax-selection-list ul li label>div{margin-inline-start:.75rem;font-size:.875rem;line-height:1.25rem;font-weight:500;color:rgba(var(--ax-sys-color-on-lightest-surface))}ax-selection-list ul li label>div .ax-hint-text{margin-top:.25rem;font-weight:400;color:rgb(var(--ax-sys-color-on-lightest-surface),.75)}ax-selection-list ul li.ax-state-disabled{opacity:.5}ax-selection-list ul li.ax-state-disabled *{cursor:not-allowed}ax-selection-list.ax-state-error{color:rgba(var(--ax-sys-color-danger-surface))}ax-selection-list.ax-state-error .ax-checkbox-checkmark,ax-selection-list.ax-state-error .ax-radio-checkmark{border-color:rgba(var(--ax-sys-color-danger-surface))}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXSelectionListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-selection-list', inputs: [
                        'id',
                        'name',
                        'disabled',
                        'readonly',
                        'tabIndex',
                        'size',
                        'value',
                        'valueField',
                        'textField',
                        'disabledField',
                        'readonlyField',
                        'multiple',
                    ], outputs: ['onValueChanged', 'onBlur', 'onFocus'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                        { provide: AXComponent, useExisting: AXSelectionListComponent },
                        { provide: AXFocusableComponent, useExisting: AXSelectionListComponent },
                        { provide: AXValuableComponent, useExisting: AXSelectionListComponent },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => AXSelectionListComponent),
                            multi: true,
                        },
                        {
                            provide: AX_SELECTION_DATA_TOKEN,
                            useClass: MXSelectionBridgeService,
                        },
                    ], imports: [NgTemplateOutlet, AsyncPipe, AXTranslationModule], template: "<ul class=\"ax-{{ direction() }}\">\n  @for (item of items; let i = $index; track i) {\n    <li [class.ax-state-selected]=\"isItemSelected(item)\" [class.ax-state-disabled]=\"item.disabled\">\n      <label [class.ax-hide-control]=\"!showControl\">\n        @if (multiple) {\n          <input\n            [id]=\"id + '-' + i\"\n            class=\"ax-checkbox\"\n            type=\"checkbox\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item[disabledField] || readonly\"\n          />\n        } @else {\n          <input\n            [id]=\"id + '-' + i\"\n            class=\"ax-radio\"\n            type=\"radio\"\n            [attr.name]=\"id\"\n            (change)=\"_handleOnItemValueChange(item, $event)\"\n            [checked]=\"isItemSelected(item)\"\n            [disabled]=\"disabled || item[disabledField] || readonly\"\n          />\n        }\n\n        @if (customTemplate()) {\n          <div>\n            <ng-container\n              [ngTemplateOutlet]=\"customTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: { data: item } }\"\n            >\n            </ng-container>\n          </div>\n        } @else {\n          <div>\n            {{ getDisplayText(item) | translate | async }}\n            @if (item[hintField]) {\n              <p class=\"ax-hint-text\">\n                {{ item[hintField] | translate | async }}\n              </p>\n            }\n          </div>\n        }\n      </label>\n    </li>\n  }\n</ul>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n", styles: [".ax-dark ax-selection-list.ax-look-card ul.ax-vertical>li.ax-state-selected label,.ax-dark ax-selection-list.ax-look-card ul.ax-horizontal>li.ax-state-selected label{background-color:rgba(var(--ax-sys-color-primary-darkest-surface),.25)}ax-selection-list.ax-look-divided ul.ax-vertical li:last-child label,ax-selection-list.ax-look-divided ul.ax-horizontal li:last-child label{border-style:none}ax-selection-list.ax-look-divided ul.ax-vertical>li label{border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-bottom:.875rem}ax-selection-list.ax-look-divided ul.ax-horizontal>li label{border-inline-end-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-selection-list.ax-look-card ul{gap:.75rem}ax-selection-list.ax-look-card ul.ax-vertical>li label,ax-selection-list.ax-look-card ul.ax-horizontal>li label{border-radius:var(--ax-sys-border-radius);border-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}ax-selection-list.ax-look-card ul.ax-vertical>li.ax-state-selected label,ax-selection-list.ax-look-card ul.ax-horizontal>li.ax-state-selected label{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}ax-selection-list.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-selection-list ul{display:flex;flex-wrap:wrap}ax-selection-list ul.ax-vertical{flex-direction:column}ax-selection-list ul.ax-horizontal{flex-direction:row}ax-selection-list ul li{cursor:pointer;-webkit-user-select:none;user-select:none}ax-selection-list ul li label{display:flex;cursor:pointer;align-items:flex-start;padding:.5rem .75rem}ax-selection-list ul li label.ax-hide-control .ax-checkbox,ax-selection-list ul li label.ax-hide-control .ax-radio{display:none}ax-selection-list ul li label.ax-hide-control>div{margin-inline-start:0px}ax-selection-list ul li label .ax-checkbox,ax-selection-list ul li label .ax-radio{margin-top:.25rem}ax-selection-list ul li label>div{margin-inline-start:.75rem;font-size:.875rem;line-height:1.25rem;font-weight:500;color:rgba(var(--ax-sys-color-on-lightest-surface))}ax-selection-list ul li label>div .ax-hint-text{margin-top:.25rem;font-weight:400;color:rgb(var(--ax-sys-color-on-lightest-surface),.75)}ax-selection-list ul li.ax-state-disabled{opacity:.5}ax-selection-list ul li.ax-state-disabled *{cursor:not-allowed}ax-selection-list.ax-state-error{color:rgba(var(--ax-sys-color-danger-surface))}ax-selection-list.ax-state-error .ax-checkbox-checkmark,ax-selection-list.ax-state-error .ax-radio-checkmark{border-color:rgba(var(--ax-sys-color-danger-surface))}\n"] }]
        }], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], customTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "customTemplate", required: false }] }], showControl: [{
                type: Input
            }], items: [{
                type: Input
            }], look: [{
                type: Input
            }], __hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

class AXSelectionListModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXSelectionListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: AXSelectionListModule, imports: [CommonModule,
            FormsModule,
            AXCheckBoxModule,
            AXRadioModule,
            AXLabelModule,
            AXFormModule,
            AXSelectionListComponent], exports: [AXSelectionListComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXSelectionListModule, imports: [CommonModule,
            FormsModule,
            AXCheckBoxModule,
            AXRadioModule,
            AXLabelModule,
            AXFormModule,
            AXSelectionListComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXSelectionListModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule,
                        FormsModule,
                        AXCheckBoxModule,
                        AXRadioModule,
                        AXLabelModule,
                        AXFormModule,
                        AXSelectionListComponent,
                    ],
                    exports: [AXSelectionListComponent],
                    providers: [],
                }]
        }] });

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

export { AXSelectionListComponent, AXSelectionListModule };
//# sourceMappingURL=acorex-components-selection-list.mjs.map
