import * as i0 from '@angular/core';
import { signal, forwardRef, Component, input, inject, computed } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { RadioButton } from '@ngstarter-ui/components/radio';

class RadioCardGroup {
    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
    onChange = () => { };
    onTouched = () => { };
    writeValue(value) {
        this.value.set(value);
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled.set(isDisabled);
    }
    selectValue(value) {
        if (this.disabled()) {
            return;
        }
        this.value.set(value);
        this.onChange(value);
        this.onTouched();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RadioCardGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: RadioCardGroup, isStandalone: true, selector: "ngs-radio-card-group", host: { properties: { "class.is-disabled": "disabled()" }, classAttribute: "ngs-radio-card-group" }, providers: [
            {
                provide: NG_VALUE_ACCESSOR,
                useExisting: forwardRef(() => RadioCardGroup),
                multi: true,
            },
        ], exportAs: ["ngsRadioCardGroup"], ngImport: i0, template: "<ng-content/>\n", styles: [":host{--ngs-radio-card-group-gap: calc(var(--spacing, .25rem) * 5);--ngs-radio-card-border-radius: var(--ngs-radius-xl);--ngs-radio-card-padding: calc(var(--spacing, .25rem) * 5);--ngs-radio-card-transition: all .2s ease-in-out;--ngs-radio-card-color-border-hover: var(--ngs-color-primary);--ngs-radio-card-color-selected-border: var(--ngs-color-primary);--ngs-radio-card-color-selected-bg: var(--ngs-color-primary-100);--ngs-radio-card-content-font-size: var(--ngs-font-size-sm);--ngs-radio-card-content-color: var(--ngs-color-neutral-600);--ngs-radio-card-title-font-size: var(--ngs-font-size-sm);--ngs-radio-card-title-gap: calc(var(--spacing, .25rem) * 1.5);display:flex;flex-wrap:wrap;gap:var(--ngs-radio-card-group-gap)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RadioCardGroup, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-radio-card-group', exportAs: 'ngsRadioCardGroup', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => RadioCardGroup),
                            multi: true,
                        },
                    ], host: {
                        'class': 'ngs-radio-card-group',
                        '[class.is-disabled]': 'disabled()'
                    }, template: "<ng-content/>\n", styles: [":host{--ngs-radio-card-group-gap: calc(var(--spacing, .25rem) * 5);--ngs-radio-card-border-radius: var(--ngs-radius-xl);--ngs-radio-card-padding: calc(var(--spacing, .25rem) * 5);--ngs-radio-card-transition: all .2s ease-in-out;--ngs-radio-card-color-border-hover: var(--ngs-color-primary);--ngs-radio-card-color-selected-border: var(--ngs-color-primary);--ngs-radio-card-color-selected-bg: var(--ngs-color-primary-100);--ngs-radio-card-content-font-size: var(--ngs-font-size-sm);--ngs-radio-card-content-color: var(--ngs-color-neutral-600);--ngs-radio-card-title-font-size: var(--ngs-font-size-sm);--ngs-radio-card-title-gap: calc(var(--spacing, .25rem) * 1.5);display:flex;flex-wrap:wrap;gap:var(--ngs-radio-card-group-gap)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class RadioCard {
    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
    parentGroup = inject(RadioCardGroup);
    isSelected = computed(() => this.parentGroup.value() === this.value(), ...(ngDevMode ? [{ debugName: "isSelected" }] : /* istanbul ignore next */ []));
    selectCard() {
        this.parentGroup.selectValue(this.value());
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RadioCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: RadioCard, isStandalone: true, selector: "ngs-radio-card", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "radio" }, listeners: { "click": "selectCard()" }, properties: { "class.is-selected": "isSelected()", "class.is-disabled": "parentGroup.disabled()", "attr.aria-checked": "isSelected()", "attr.tabindex": "parentGroup.disabled() ? -1 : 0" }, classAttribute: "ngs-radio-card" }, exportAs: ["ngsRadioCard"], ngImport: i0, template: "<div class=\"header\">\n  <ngs-radio-button [value]=\"value()\" [checked]=\"isSelected()\"/>\n  <ng-content select=\"ngs-radio-card-title\"/>\n</div>\n<ng-content/>\n", styles: [":host{border:1px solid var(--ngs-color-border);border-radius:var(--ngs-radio-card-border-radius);padding:var(--ngs-radio-card-padding);cursor:pointer;transition:var(--ngs-radio-card-transition);outline:none;width:100%;flex:1 1 200px;display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}:host .header{display:flex;align-items:center}:host:not(.disabled):hover{border-color:var(--ngs-radio-card-color-border-hover)}:host.is-selected{border-color:var(--ngs-radio-card-color-selected-border);background:var(--ngs-radio-card-color-selected-bg)}:host.is-disabled{cursor:not-allowed;opacity:.65;pointer-events:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: RadioButton, selector: "ngs-radio-button", inputs: ["id", "value", "name", "checked", "disabled"], outputs: ["checkedChange", "change"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RadioCard, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-radio-card', exportAs: 'ngsRadioCard', imports: [
                        RadioButton
                    ], host: {
                        'class': 'ngs-radio-card',
                        '[class.is-selected]': 'isSelected()',
                        '[class.is-disabled]': 'parentGroup.disabled()',
                        '(click)': 'selectCard()',
                        'role': 'radio',
                        '[attr.aria-checked]': 'isSelected()',
                        '[attr.tabindex]': 'parentGroup.disabled() ? -1 : 0',
                    }, template: "<div class=\"header\">\n  <ngs-radio-button [value]=\"value()\" [checked]=\"isSelected()\"/>\n  <ng-content select=\"ngs-radio-card-title\"/>\n</div>\n<ng-content/>\n", styles: [":host{border:1px solid var(--ngs-color-border);border-radius:var(--ngs-radio-card-border-radius);padding:var(--ngs-radio-card-padding);cursor:pointer;transition:var(--ngs-radio-card-transition);outline:none;width:100%;flex:1 1 200px;display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 1)}:host .header{display:flex;align-items:center}:host:not(.disabled):hover{border-color:var(--ngs-radio-card-color-border-hover)}:host.is-selected{border-color:var(--ngs-radio-card-color-selected-border);background:var(--ngs-radio-card-color-selected-bg)}:host.is-disabled{cursor:not-allowed;opacity:.65;pointer-events:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });

class RadioCardTitle {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RadioCardTitle, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: RadioCardTitle, isStandalone: true, selector: "ngs-radio-card-title", ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:flex;align-items:center;gap:var(--ngs-radio-card-title-gap);font-size:var(--ngs-radio-card-title-font-size);font-weight:600}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RadioCardTitle, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-radio-card-title', imports: [], template: "<ng-content/>\n", styles: [":host{display:flex;align-items:center;gap:var(--ngs-radio-card-title-gap);font-size:var(--ngs-radio-card-title-font-size);font-weight:600}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class RadioCardContent {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RadioCardContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: RadioCardContent, isStandalone: true, selector: "ngs-radio-card-content", ngImport: i0, template: "<ng-content/>\n", styles: [":host{display:block;font-size:var(--ngs-radio-card-content-font-size);color:var(--ngs-radio-card-content-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: RadioCardContent, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-radio-card-content', imports: [], template: "<ng-content/>\n", styles: [":host{display:block;font-size:var(--ngs-radio-card-content-font-size);color:var(--ngs-radio-card-content-color)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

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

export { RadioCard, RadioCardContent, RadioCardGroup, RadioCardTitle };
//# sourceMappingURL=ngstarter-ui-components-radio-card.mjs.map
