@taiga-ui/kit/fesm2015/taiga-ui-kit-components-radio.js

Taiga UI Angular main components kit

import { __decorate, __param } from 'tslib';
import { InjectionToken, Optional, Self, Inject, ChangeDetectorRef, Input, HostBinding, ViewChild, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { NgControl } from '@angular/forms';
import { AbstractTuiNullableControl, TUI_DEFAULT_IDENTITY_MATCHER, isNativeFocused, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiCheckedModule, TuiFocusableModule, TuiFocusedModule, TuiHoveredModule, TuiPressedModule, TuiFocusVisibleModule } from '@taiga-ui/cdk';
import { tuiScaleIn, TuiWrapperModule } from '@taiga-ui/core';
import { TuiRadioGroupComponent } from '@taiga-ui/kit/components/radio-group';
import { CommonModule } from '@angular/common';

/** Default values for the checkbox options. */
const TUI_RADIO_DEFAULT_OPTIONS = {
    size: 'm',
    appearances: {
        unchecked: "outline" /* Outline */,
        checked: "primary" /* Primary */,
    },
};
const TUI_RADIO_OPTIONS = new InjectionToken('Default parameters for radio component', {
    factory: () => TUI_RADIO_DEFAULT_OPTIONS,
});

var TuiRadioComponent_1;
// @dynamic
let TuiRadioComponent = TuiRadioComponent_1 = class TuiRadioComponent extends AbstractTuiNullableControl {
    constructor(control, changeDetectorRef, options, radioGroup) {
        super(control, changeDetectorRef);
        this.options = options;
        this.radioGroup = radioGroup;
        this.identityMatcher = TUI_DEFAULT_IDENTITY_MATCHER;
        this.name = null;
        this.size = this.options.size;
        this.pseudoDisabled = false;
    }
    get appearance() {
        return this.checked
            ? this.options.appearances.checked
            : this.options.appearances.unchecked;
    }
    get computedDisabled() {
        return this.disabled || this.pseudoDisabled;
    }
    get nativeFocusableElement() {
        return !this.focusableElement || this.computedDisabled
            ? null
            : this.focusableElement.nativeElement;
    }
    get focused() {
        return isNativeFocused(this.nativeFocusableElement);
    }
    get checked() {
        return this.value === null
            ? this.item === null
            : this.item !== undefined && this.identityMatcher(this.value, this.item);
    }
    get computedName() {
        return this.name || this.radioGroupName || this.controlName || null;
    }
    get isFocusable() {
        return !this.readOnly && this.computedFocusable;
    }
    onChecked(checked) {
        if (checked) {
            this.updateValue(this.item !== undefined ? this.item : this.fallbackValue);
        }
    }
    onFocused(focused) {
        this.updateFocused(focused);
    }
    onHovered(hovered) {
        this.updateHovered(hovered);
    }
    onPressed(pressed) {
        this.updatePressed(pressed);
    }
    onFocusVisible(focusVisible) {
        this.updateFocusVisible(focusVisible);
    }
    get radioGroupName() {
        return this.radioGroup === null ? null : this.radioGroup.name;
    }
};
TuiRadioComponent.ctorParameters = () => [
    { type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
    { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
    { type: undefined, decorators: [{ type: Inject, args: [TUI_RADIO_OPTIONS,] }] },
    { type: TuiRadioGroupComponent, decorators: [{ type: Optional }, { type: Inject, args: [TuiRadioGroupComponent,] }] }
];
__decorate([
    Input()
], TuiRadioComponent.prototype, "item", void 0);
__decorate([
    Input(),
    tuiDefaultProp()
], TuiRadioComponent.prototype, "identityMatcher", void 0);
__decorate([
    Input(),
    tuiDefaultProp()
], TuiRadioComponent.prototype, "name", void 0);
__decorate([
    Input(),
    HostBinding('attr.data-tui-host-size'),
    tuiDefaultProp()
], TuiRadioComponent.prototype, "size", void 0);
__decorate([
    Input(),
    tuiDefaultProp()
], TuiRadioComponent.prototype, "pseudoDisabled", void 0);
__decorate([
    ViewChild('focusableElement')
], TuiRadioComponent.prototype, "focusableElement", void 0);
__decorate([
    HostBinding('class._disabled')
], TuiRadioComponent.prototype, "computedDisabled", null);
TuiRadioComponent = TuiRadioComponent_1 = __decorate([
    Component({
        selector: 'tui-radio',
        template: "<tui-wrapper\n    [appearance]=\"appearance\"\n    [disabled]=\"computedDisabled\"\n    [focused]=\"computedFocusVisible\"\n    [hovered]=\"computedHovered\"\n    [pressed]=\"computedPressed\"\n    [invalid]=\"computedInvalid\"\n>\n    <div *ngIf=\"checked\" class=\"mark\" [@tuiScaleIn]></div>\n</tui-wrapper>\n<input\n    #focusableElement\n    type=\"radio\"\n    class=\"native\"\n    [id]=\"id\"\n    [attr.name]=\"computedName\"\n    [disabled]=\"computedDisabled\"\n    [tuiChecked]=\"checked\"\n    [tuiFocusable]=\"isFocusable\"\n    (tuiFocusedChange)=\"onFocused($event)\"\n    (tuiHoveredChange)=\"onHovered($event)\"\n    (tuiPressedChange)=\"onPressed($event)\"\n    (tuiCheckedChange)=\"onChecked($event)\"\n    (tuiFocusVisibleChange)=\"onFocusVisible($event)\"\n/>\n",
        changeDetection: ChangeDetectionStrategy.OnPush,
        providers: [
            {
                provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
                useExisting: forwardRef(() => TuiRadioComponent_1),
            },
        ],
        animations: [tuiScaleIn],
        styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);position:relative;display:block;flex-shrink:0;border-radius:100%}:host[data-tui-host-size='m']{width:16px;height:16px}:host[data-tui-host-size='l']{width:24px;height:24px}:host._readonly{pointer-events:none}.mark{position:absolute;background-color:currentColor;border-radius:100%}:host[data-tui-host-size='m'] .mark{margin:4px;width:8px;height:8px}:host[data-tui-host-size='l'] .mark{margin:7px;width:10px;height:10px}.native{padding:0;border:0;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.native:-webkit-autofill,.native:-webkit-autofill:focus,.native:-webkit-autofill:hover{border-radius:inherit;-webkit-text-fill-color:inherit!important;color:inherit!important;background-color:transparent!important;-webkit-box-shadow:0 0 0 1000px var(--tui-autofill) inset!important}:host._disabled .native{cursor:default}"]
    }),
    __param(0, Optional()),
    __param(0, Self()),
    __param(0, Inject(NgControl)),
    __param(1, Inject(ChangeDetectorRef)),
    __param(2, Inject(TUI_RADIO_OPTIONS)),
    __param(3, Optional()),
    __param(3, Inject(TuiRadioGroupComponent))
], TuiRadioComponent);

let TuiRadioModule = class TuiRadioModule {
};
TuiRadioModule = __decorate([
    NgModule({
        imports: [
            CommonModule,
            TuiCheckedModule,
            TuiFocusableModule,
            TuiFocusedModule,
            TuiHoveredModule,
            TuiPressedModule,
            TuiFocusVisibleModule,
            TuiWrapperModule,
        ],
        declarations: [TuiRadioComponent],
        exports: [TuiRadioComponent],
    })
], TuiRadioModule);

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

export { TUI_RADIO_DEFAULT_OPTIONS, TUI_RADIO_OPTIONS, TuiRadioComponent, TuiRadioModule };
//# sourceMappingURL=taiga-ui-kit-components-radio.js.map