@taiga-ui/kit/fesm2022/taiga-ui-kit-components-radio-list.mjs

Taiga UI Angular main components kit

import * as i0 from '@angular/core';
import { viewChildren, inject, computed, input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
import * as i2 from '@angular/forms';
import { NgControl, Validators, FormsModule } from '@angular/forms';
import { TuiControl, tuiAsControl } from '@taiga-ui/cdk/classes';
import { TUI_STRINGIFY, TUI_VERSION } from '@taiga-ui/cdk/constants';
import { TuiValidator } from '@taiga-ui/cdk/directives/validator';
import { tuiGenerateId } from '@taiga-ui/cdk/utils/miscellaneous';
import * as i3 from '@taiga-ui/core/components/radio';
import { TuiRadio } from '@taiga-ui/core/components/radio';
import * as i1 from '@taiga-ui/core/directives/items-handlers';
import { TUI_ITEMS_HANDLERS, TuiWithItemsHandlers } from '@taiga-ui/core/directives/items-handlers';
import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';

const ERROR = () => ({ error: 'Invalid' });
class TuiRadioList extends TuiControl {
    constructor() {
        super(...arguments);
        this.controls = viewChildren(NgControl);
        this.id = tuiGenerateId();
        this.handlers = inject(TUI_ITEMS_HANDLERS);
        this.validator = computed(() => this.invalid() ? ERROR : Validators.nullValidator);
        this.items = input();
        this.size = input('m');
        this.itemContent = input(TUI_STRINGIFY);
    }
    get name() {
        return `${this.control.name}-${this.id}`;
    }
    onFocusOut() {
        this.controls().forEach((control) => control.control?.markAsTouched());
        if (!this.touched()) {
            this.onTouched();
        }
    }
    itemIsActive(item) {
        return this.value() === null
            ? item === null
            : this.handlers.identityMatcher()(this.value(), item);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiRadioList, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiRadioList, isStandalone: true, selector: "tui-radio-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, itemContent: { classPropertyName: "itemContent", publicName: "itemContent", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-tui-version": "5.8.0", "role": "radiogroup" }, listeners: { "focusout": "onFocusOut()" }, properties: { "attr.data-size": "size()" } }, providers: [tuiAsControl(TuiRadioList)], viewQueries: [{ propertyName: "controls", predicate: NgControl, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithItemsHandlers }], ngImport: i0, template: "@for (item of items(); track item) {\n    <label\n        class=\"t-item\"\n        [class.t-item_disabled]=\"disabled() || handlers.disabledItemHandler()(item)\"\n    >\n        <input\n            tuiRadio\n            type=\"radio\"\n            [disabled]=\"disabled() || handlers.disabledItemHandler()(item)\"\n            [identityMatcher]=\"handlers.identityMatcher()\"\n            [name]=\"name\"\n            [ngModel]=\"value()\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [size]=\"size()\"\n            [tuiValidator]=\"validator()\"\n            [value]=\"item\"\n            (ngModelChange)=\"onChange($event)\"\n        />\n        <ng-container\n            *polymorpheusOutlet=\"itemContent() as text; context: {$implicit: item, active: itemIsActive(item)}\"\n        >\n            {{ text }}\n        </ng-container>\n    </label>\n}\n", styles: ["tui-radio-list:where(*[data-tui-version=\"5.8.0\"]){display:flex;flex-direction:column;align-items:flex-start;gap:.75rem 1.5rem;font:var(--tui-typography-body-m)}tui-radio-list:where(*[data-tui-version=\"5.8.0\"])[data-size=s],tui-radio-list:where(*[data-tui-version=\"5.8.0\"])[data-size=s] [tuiTitle]{font:var(--tui-typography-ui-s)}tui-radio-list:where(*[data-tui-version=\"5.8.0\"])[data-size=s] [tuiSubtitle],tui-radio-list:where(*[data-tui-version=\"5.8.0\"])[data-size=s] [tuiTitle] [tuiSubtitle]{font:var(--tui-typography-body-xs)}tui-radio-list:where(*[data-tui-version=\"5.8.0\"])[data-size=s]>.t-item,tui-radio-list:where(*[data-tui-version=\"5.8.0\"])[data-size=s] [tuiTitle]>.t-item{gap:.5rem}tui-radio-list:where(*[data-tui-version=\"5.8.0\"]) [tuiTitle]{font:var(--tui-typography-body-m)}tui-radio-list:where(*[data-tui-version=\"5.8.0\"]) [tuiSubtitle]{color:var(--tui-text-secondary)}tui-radio-list:where(*[data-tui-version=\"5.8.0\"])>.t-item{display:flex;gap:.75rem}tui-radio-list:where(*[data-tui-version=\"5.8.0\"])>.t-item_disabled{opacity:var(--tui-disabled-opacity)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: i3.TuiRadioComponent, selector: "input[type=\"radio\"][tuiRadio]", inputs: ["size"] }, { kind: "directive", type: i3.TuiRadioDirective, selector: "input[type=\"radio\"][tuiRadio][identityMatcher]", inputs: ["identityMatcher"] }, { kind: "directive", type: TuiValidator, selector: "[tuiValidator]", inputs: ["tuiValidator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiRadioList, decorators: [{
            type: Component,
            args: [{ selector: 'tui-radio-list', imports: [FormsModule, PolymorpheusOutlet, TuiRadio, TuiValidator], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAsControl(TuiRadioList)], hostDirectives: [TuiWithItemsHandlers], host: {
                        'data-tui-version': TUI_VERSION,
                        role: 'radiogroup',
                        '[attr.data-size]': 'size()',
                        '(focusout)': 'onFocusOut()',
                    }, template: "@for (item of items(); track item) {\n    <label\n        class=\"t-item\"\n        [class.t-item_disabled]=\"disabled() || handlers.disabledItemHandler()(item)\"\n    >\n        <input\n            tuiRadio\n            type=\"radio\"\n            [disabled]=\"disabled() || handlers.disabledItemHandler()(item)\"\n            [identityMatcher]=\"handlers.identityMatcher()\"\n            [name]=\"name\"\n            [ngModel]=\"value()\"\n            [ngModelOptions]=\"{standalone: true}\"\n            [size]=\"size()\"\n            [tuiValidator]=\"validator()\"\n            [value]=\"item\"\n            (ngModelChange)=\"onChange($event)\"\n        />\n        <ng-container\n            *polymorpheusOutlet=\"itemContent() as text; context: {$implicit: item, active: itemIsActive(item)}\"\n        >\n            {{ text }}\n        </ng-container>\n    </label>\n}\n", styles: ["tui-radio-list:where(*[data-tui-version=\"5.8.0\"]){display:flex;flex-direction:column;align-items:flex-start;gap:.75rem 1.5rem;font:var(--tui-typography-body-m)}tui-radio-list:where(*[data-tui-version=\"5.8.0\"])[data-size=s],tui-radio-list:where(*[data-tui-version=\"5.8.0\"])[data-size=s] [tuiTitle]{font:var(--tui-typography-ui-s)}tui-radio-list:where(*[data-tui-version=\"5.8.0\"])[data-size=s] [tuiSubtitle],tui-radio-list:where(*[data-tui-version=\"5.8.0\"])[data-size=s] [tuiTitle] [tuiSubtitle]{font:var(--tui-typography-body-xs)}tui-radio-list:where(*[data-tui-version=\"5.8.0\"])[data-size=s]>.t-item,tui-radio-list:where(*[data-tui-version=\"5.8.0\"])[data-size=s] [tuiTitle]>.t-item{gap:.5rem}tui-radio-list:where(*[data-tui-version=\"5.8.0\"]) [tuiTitle]{font:var(--tui-typography-body-m)}tui-radio-list:where(*[data-tui-version=\"5.8.0\"]) [tuiSubtitle]{color:var(--tui-text-secondary)}tui-radio-list:where(*[data-tui-version=\"5.8.0\"])>.t-item{display:flex;gap:.75rem}tui-radio-list:where(*[data-tui-version=\"5.8.0\"])>.t-item_disabled{opacity:var(--tui-disabled-opacity)}\n"] }]
        }] });

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

export { TuiRadioList };
//# sourceMappingURL=taiga-ui-kit-components-radio-list.mjs.map