@taiga-ui/kit
Version:
Taiga UI Angular main components kit
78 lines (74 loc) • 8.28 kB
JavaScript
import { NgForOf } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, computed, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChildren, Input } from '@angular/core';
import * as i1 from '@angular/forms';
import { Validators, NgControl, FormsModule } from '@angular/forms';
import { TuiControl, tuiAsControl } from '@taiga-ui/cdk/classes';
import { EMPTY_QUERY, TUI_DEFAULT_IDENTITY_MATCHER, TUI_FALSE_HANDLER } from '@taiga-ui/cdk/constants';
import { TuiValidator } from '@taiga-ui/cdk/directives/validator';
import { TuiIdService } from '@taiga-ui/cdk/services';
import * as i2 from '@taiga-ui/kit/components/radio';
import { TuiRadio } from '@taiga-ui/kit/components/radio';
import { PolymorpheusOutlet, PolymorpheusTemplate } from '@taiga-ui/polymorpheus';
const ERROR = () => ({ error: 'Invalid' });
class TuiRadioList extends TuiControl {
constructor() {
super(...arguments);
this.controls = EMPTY_QUERY;
this.id = inject(TuiIdService).generate();
this.validator = computed(() => this.invalid() ? ERROR : Validators.nullValidator);
this.items = [];
this.size = 'm';
this.identityMatcher = TUI_DEFAULT_IDENTITY_MATCHER;
this.disabledItemHandler = TUI_FALSE_HANDLER;
this.itemContent = ({ $implicit }) => String($implicit);
}
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.identityMatcher(this.value(), item);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiRadioList, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiRadioList, isStandalone: true, selector: "tui-radio-list", inputs: { items: "items", size: "size", identityMatcher: "identityMatcher", disabledItemHandler: "disabledItemHandler", itemContent: "itemContent" }, host: { listeners: { "focusout": "onFocusOut()" }, properties: { "attr.data-size": "size" } }, providers: [tuiAsControl(TuiRadioList)], viewQueries: [{ propertyName: "controls", predicate: NgControl, descendants: true }], usesInheritance: true, ngImport: i0, template: "<label\n *ngFor=\"let item of items; index as index\"\n class=\"t-item\"\n [class.t-item_disabled]=\"disabled() || disabledItemHandler(item)\"\n>\n <input\n tuiRadio\n type=\"radio\"\n [disabled]=\"disabled() || disabledItemHandler(item)\"\n [identityMatcher]=\"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 *polymorpheusOutlet=\"itemContent as text; context: {$implicit: item, active: itemIsActive(item)}\">\n {{ text }}\n </ng-container>\n</label>\n", styles: ["tui-radio-list{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem 1.5rem;font:var(--tui-font-text-m)}tui-radio-list[data-size=s],tui-radio-list[data-size=s] [tuiTitle]{font:var(--tui-font-text-ui-s)}tui-radio-list[data-size=s] [tuiSubtitle],tui-radio-list[data-size=s] [tuiTitle] [tuiSubtitle]{font:var(--tui-font-text-xs)}tui-radio-list[data-size=s]>.t-item,tui-radio-list[data-size=s] [tuiTitle]>.t-item{gap:.5rem}tui-radio-list [tuiTitle]{font:var(--tui-font-text-m)}tui-radio-list [tuiSubtitle]{color:var(--tui-text-tertiary)}tui-radio-list>.t-item{display:flex;gap:.75rem}tui-radio-list>.t-item_disabled{opacity:var(--tui-disabled-opacity)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: i2.TuiRadioComponent, selector: "input[type=\"radio\"][tuiRadio]", inputs: ["size"] }, { kind: "directive", type: i2.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: "16.2.12", ngImport: i0, type: TuiRadioList, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tui-radio-list', imports: [
FormsModule,
NgForOf,
PolymorpheusOutlet,
PolymorpheusTemplate,
TuiRadio,
TuiValidator,
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiAsControl(TuiRadioList)], host: {
'[attr.data-size]': 'size',
'(focusout)': 'onFocusOut()',
}, template: "<label\n *ngFor=\"let item of items; index as index\"\n class=\"t-item\"\n [class.t-item_disabled]=\"disabled() || disabledItemHandler(item)\"\n>\n <input\n tuiRadio\n type=\"radio\"\n [disabled]=\"disabled() || disabledItemHandler(item)\"\n [identityMatcher]=\"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 *polymorpheusOutlet=\"itemContent as text; context: {$implicit: item, active: itemIsActive(item)}\">\n {{ text }}\n </ng-container>\n</label>\n", styles: ["tui-radio-list{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem 1.5rem;font:var(--tui-font-text-m)}tui-radio-list[data-size=s],tui-radio-list[data-size=s] [tuiTitle]{font:var(--tui-font-text-ui-s)}tui-radio-list[data-size=s] [tuiSubtitle],tui-radio-list[data-size=s] [tuiTitle] [tuiSubtitle]{font:var(--tui-font-text-xs)}tui-radio-list[data-size=s]>.t-item,tui-radio-list[data-size=s] [tuiTitle]>.t-item{gap:.5rem}tui-radio-list [tuiTitle]{font:var(--tui-font-text-m)}tui-radio-list [tuiSubtitle]{color:var(--tui-text-tertiary)}tui-radio-list>.t-item{display:flex;gap:.75rem}tui-radio-list>.t-item_disabled{opacity:var(--tui-disabled-opacity)}\n"] }]
}], propDecorators: { controls: [{
type: ViewChildren,
args: [NgControl]
}], items: [{
type: Input
}], size: [{
type: Input
}], identityMatcher: [{
type: Input
}], disabledItemHandler: [{
type: Input
}], itemContent: [{
type: Input
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { TuiRadioList };
//# sourceMappingURL=taiga-ui-kit-components-radio-list.mjs.map