import { CommonModule } from '@angular/common';
import { booleanAttribute, ChangeDetectionStrategy, Component, computed, effect, inject, input, model } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgmDensityDirective, NgmI18nPipe } from '@metad/ocap-angular/core';
import { NgxControlValueAccessor } from 'ngxtension/control-value-accessor';
import { CdkListboxModule } from '@angular/cdk/listbox';
import * as i0 from "@angular/core";
import * as i1 from "@metad/ocap-angular/core";
import * as i2 from "ngxtension/control-value-accessor";
import * as i3 from "@angular/forms";
import * as i4 from "@angular/cdk/listbox";
export class NgmRadioSelectComponent {
    constructor() {
        this.cva = inject(NgxControlValueAccessor);
        this.selectOptions = input();
        this.simple = input(false, {
            transform: booleanAttribute
        });
        this.options = computed(() => this.selectOptions()?.map((option) => ({ ...option, key: option.key ?? option.value })));
        this.value = model(null);
        effect(() => {
            if (this.cva.value$() && this.cva.value$() !== this.value()?.[0]) {
                this.value.set([this.cva.value$()]);
            }
        }, { allowSignalWrites: true });
        effect(() => {
            if (this.value()) {
                this.cva.value$.set(this.value()[0]);
            }
        }, { allowSignalWrites: true });
        // effect(() => {
        //   console.log(this.value())
        // })
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmRadioSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: NgmRadioSelectComponent, isStandalone: true, selector: "ngm-radio-select", inputs: { selectOptions: { classPropertyName: "selectOptions", publicName: "selectOptions", isSignal: true, isRequired: false, transformFunction: null }, simple: { classPropertyName: "simple", publicName: "simple", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "attr.disabled": "isDisabled || null", "class.simple": "simple()" }, classAttribute: "ngm-radio-select" }, hostDirectives: [{ directive: i1.NgmDensityDirective, inputs: ["small", "small", "large", "large"] }, { directive: i2.NgxControlValueAccessor }], ngImport: i0, template: "<ul class=\"ngm-radio-select flex flex-wrap space-x-3\" cdkListbox [(ngModel)]=\"value\">\n  @for (option of options(); track option.key) {\n    <li [cdkOption]=\"option.value\" class=\"\">\n      <div class=\"radio-indicator\"></div>\n      <div class=\"text-sm font-normal\">{{option.label | i18n}}</div>\n    </li>\n  }\n</ul>\n", styles: [":host.simple .ngm-radio-select .cdk-option{border-width:0px;background-color:transparent;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i4.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i4.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "pipe", type: NgmI18nPipe, name: "i18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgmRadioSelectComponent, decorators: [{
            type: Component,
            args: [{ standalone: true, selector: 'ngm-radio-select', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        class: 'ngm-radio-select',
                        '[attr.disabled]': 'isDisabled || null',
                        '[class.simple]': 'simple()',
                    }, hostDirectives: [
                        {
                            directive: NgmDensityDirective,
                            inputs: ['small', 'large']
                        },
                        NgxControlValueAccessor
                    ], imports: [CommonModule, FormsModule, ReactiveFormsModule, CdkListboxModule, NgmI18nPipe], template: "<ul class=\"ngm-radio-select flex flex-wrap space-x-3\" cdkListbox [(ngModel)]=\"value\">\n  @for (option of options(); track option.key) {\n    <li [cdkOption]=\"option.value\" class=\"\">\n      <div class=\"radio-indicator\"></div>\n      <div class=\"text-sm font-normal\">{{option.label | i18n}}</div>\n    </li>\n  }\n</ul>\n", styles: [":host.simple .ngm-radio-select .cdk-option{border-width:0px;background-color:transparent;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}\n"] }]
        }], ctorParameters: () => [] });
//# sourceMappingURL=data:application/json;base64, 