import { MXSelectionValueComponent, AXComponent, AXFocusableComponent, AXValuableComponent, MXSelectionBridgeService, AX_SELECTION_DATA_TOKEN } from '@acorex/cdk/common';
import * as i1 from '@acorex/cdk/selection';
import { AXSelectionCdkModule } from '@acorex/cdk/selection';
import * as i2 from '@angular/common';
import { NgTemplateOutlet, 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 * as i3 from '@acorex/core/translation';
import { AXTranslationModule } from '@acorex/core/translation';
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
 */
class AXSelectionList2Component extends MXSelectionValueComponent {
    constructor() {
        super(...arguments);
        this.direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : []));
        this.customTemplate = input(...(ngDevMode ? [undefined, { debugName: "customTemplate" }] : []));
        this.look = input('solid', ...(ngDevMode ? [{ debugName: "look" }] : []));
        this._showControl = true;
        this._items = [];
        this._hintField = 'hint';
    }
    changeState(e) {
        this.commitValue(e, true);
    }
    get showControl() {
        return this._showControl;
    }
    set showControl(v) {
        this.setOption({
            name: 'showControl',
            value: v,
        });
    }
    get items() {
        return this._items;
    }
    set items(v) {
        this.softClearSelectionCache();
        this.setOption({
            name: 'items',
            value: v,
        });
    }
    get hintField() {
        return this._hintField;
    }
    set hintField(v) {
        this.setOption({
            name: 'hintField',
            value: v,
        });
    }
    getItemByKey(key) {
        return this.items.find((c) => c == this.value || c[this.valueField] == key);
    }
    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: AXSelectionList2Component, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: AXSelectionList2Component, isStandalone: true, selector: "ax-selection-list2", 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 }, look: { classPropertyName: "look", publicName: "look", 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 } }, outputs: { onValueChanged: "onValueChanged", onBlur: "onBlur", onFocus: "onFocus" }, host: { properties: { "class": "this.__hostClass" } }, providers: [
            { provide: AXComponent, useExisting: AXSelectionList2Component },
            { provide: AXFocusableComponent, useExisting: AXSelectionList2Component },
            { provide: AXValuableComponent, useExisting: AXSelectionList2Component },
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => AXSelectionList2Component),
                multi: true,
            },
            {
                provide: AX_SELECTION_DATA_TOKEN,
                useClass: MXSelectionBridgeService,
            },
        ], usesInheritance: true, ngImport: i0, template: "<ul\n  [selectedKeys]=\"value\"\n  (selectedKeysChange)=\"changeState($event)\"\n  class=\"ax-{{ direction() }}\"\n  axSelectionGroup\n  [multiple]=\"multiple\"\n  [disable]=\"disabled || readonly\"\n>\n  @for (item of items; let i = $index; track item.id) {\n    <li\n      axSelectionItem\n      #a=\"axSelectionItem\"\n      [key]=\"item.id\"\n      [class.ax-state-selected]=\"a.isActive()\"\n      [class.ax-state-disabled]=\"item.disabled\"\n      [disable]=\"item.disabled\"\n    >\n      <label [class.ax-hide-control]=\"!showControl\">\n        @if (multiple) {\n          <input\n            [id]=\"id + '-' + i\"\n            class=\"ax-checkbox\"\n            type=\"checkbox\"\n            [checked]=\"a.isActive()\"\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            [checked]=\"a.isActive()\"\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            <p class=\"ax-title-text\">{{ getDisplayText(item) | translate | async }}</p>\n\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-list2.ax-look-card ul.ax-vertical>li.ax-state-selected label,.ax-dark ax-selection-list2.ax-look-card ul.ax-horizontal>li.ax-state-selected label{background-color:rgba(var(--ax-sys-color-primary-darkest-surface),.25)}ax-selection-list2 ul.ax-horizontal .ax-title-text,ax-selection-list2 ul.ax-horizontal .ax-hint-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:5rem}ax-selection-list2.ax-look-divided ul.ax-vertical li:last-child label,ax-selection-list2.ax-look-divided ul.ax-horizontal li:last-child label{border-style:none}ax-selection-list2.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-list2.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-list2.ax-look-card ul{gap:.75rem}ax-selection-list2.ax-look-card ul.ax-vertical>li label,ax-selection-list2.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-list2.ax-look-card ul.ax-vertical>li.ax-state-selected label,ax-selection-list2.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-list2.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-selection-list2 ul{display:flex;flex-wrap:wrap}ax-selection-list2 ul.ax-vertical{flex-direction:column}ax-selection-list2 ul.ax-horizontal{flex-direction:row}ax-selection-list2 ul li{cursor:pointer;-webkit-user-select:none;user-select:none}ax-selection-list2 ul li label{display:flex;cursor:pointer;align-items:flex-start;padding:.5rem .75rem}ax-selection-list2 ul li label.ax-hide-control .ax-checkbox,ax-selection-list2 ul li label.ax-hide-control .ax-radio{display:none}ax-selection-list2 ul li label.ax-hide-control>div{margin-inline-start:0px}ax-selection-list2 ul li label .ax-checkbox,ax-selection-list2 ul li label .ax-radio{margin-top:.25rem}ax-selection-list2 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-list2 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-list2 ul li.ax-state-disabled{opacity:.5}ax-selection-list2 ul li.ax-state-disabled *{cursor:not-allowed}ax-selection-list2.ax-state-error{color:rgba(var(--ax-sys-color-danger-surface))}ax-selection-list2.ax-state-error .ax-checkbox-checkmark,ax-selection-list2.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: AXSelectionCdkModule }, { kind: "directive", type: i1.AXSelectionGroupDirective, selector: "[axSelectionGroup]", inputs: ["multiple", "disable", "selectedKeys"], outputs: ["selectedKeysChange"], exportAs: ["axSelectionGroup"] }, { kind: "directive", type: i1.AXSelectionItemDirective, selector: "[axSelectionItem]", inputs: ["key", "disable"], outputs: ["onClick", "disableChange"], exportAs: ["axSelectionItem"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXSelectionList2Component, decorators: [{
            type: Component,
            args: [{ selector: 'ax-selection-list2', 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: AXSelectionList2Component },
                        { provide: AXFocusableComponent, useExisting: AXSelectionList2Component },
                        { provide: AXValuableComponent, useExisting: AXSelectionList2Component },
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => AXSelectionList2Component),
                            multi: true,
                        },
                        {
                            provide: AX_SELECTION_DATA_TOKEN,
                            useClass: MXSelectionBridgeService,
                        },
                    ], imports: [NgTemplateOutlet, AXSelectionCdkModule, CommonModule, AXTranslationModule], template: "<ul\n  [selectedKeys]=\"value\"\n  (selectedKeysChange)=\"changeState($event)\"\n  class=\"ax-{{ direction() }}\"\n  axSelectionGroup\n  [multiple]=\"multiple\"\n  [disable]=\"disabled || readonly\"\n>\n  @for (item of items; let i = $index; track item.id) {\n    <li\n      axSelectionItem\n      #a=\"axSelectionItem\"\n      [key]=\"item.id\"\n      [class.ax-state-selected]=\"a.isActive()\"\n      [class.ax-state-disabled]=\"item.disabled\"\n      [disable]=\"item.disabled\"\n    >\n      <label [class.ax-hide-control]=\"!showControl\">\n        @if (multiple) {\n          <input\n            [id]=\"id + '-' + i\"\n            class=\"ax-checkbox\"\n            type=\"checkbox\"\n            [checked]=\"a.isActive()\"\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            [checked]=\"a.isActive()\"\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            <p class=\"ax-title-text\">{{ getDisplayText(item) | translate | async }}</p>\n\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-list2.ax-look-card ul.ax-vertical>li.ax-state-selected label,.ax-dark ax-selection-list2.ax-look-card ul.ax-horizontal>li.ax-state-selected label{background-color:rgba(var(--ax-sys-color-primary-darkest-surface),.25)}ax-selection-list2 ul.ax-horizontal .ax-title-text,ax-selection-list2 ul.ax-horizontal .ax-hint-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:5rem}ax-selection-list2.ax-look-divided ul.ax-vertical li:last-child label,ax-selection-list2.ax-look-divided ul.ax-horizontal li:last-child label{border-style:none}ax-selection-list2.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-list2.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-list2.ax-look-card ul{gap:.75rem}ax-selection-list2.ax-look-card ul.ax-vertical>li label,ax-selection-list2.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-list2.ax-look-card ul.ax-vertical>li.ax-state-selected label,ax-selection-list2.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-list2.ax-state-disabled{cursor:not-allowed;opacity:.5}ax-selection-list2 ul{display:flex;flex-wrap:wrap}ax-selection-list2 ul.ax-vertical{flex-direction:column}ax-selection-list2 ul.ax-horizontal{flex-direction:row}ax-selection-list2 ul li{cursor:pointer;-webkit-user-select:none;user-select:none}ax-selection-list2 ul li label{display:flex;cursor:pointer;align-items:flex-start;padding:.5rem .75rem}ax-selection-list2 ul li label.ax-hide-control .ax-checkbox,ax-selection-list2 ul li label.ax-hide-control .ax-radio{display:none}ax-selection-list2 ul li label.ax-hide-control>div{margin-inline-start:0px}ax-selection-list2 ul li label .ax-checkbox,ax-selection-list2 ul li label .ax-radio{margin-top:.25rem}ax-selection-list2 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-list2 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-list2 ul li.ax-state-disabled{opacity:.5}ax-selection-list2 ul li.ax-state-disabled *{cursor:not-allowed}ax-selection-list2.ax-state-error{color:rgba(var(--ax-sys-color-danger-surface))}ax-selection-list2.ax-state-error .ax-checkbox-checkmark,ax-selection-list2.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 }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], showControl: [{
                type: Input
            }], items: [{
                type: Input
            }], __hostClass: [{
                type: HostBinding,
                args: ['class']
            }] } });

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

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

export { AXSelectionList2Component, AXSelectionList2Module };
//# sourceMappingURL=acorex-components-selection-list-2.mjs.map
