@taiga-ui/kit
Version:
Taiga UI Angular main components kit
200 lines (194 loc) • 9.5 kB
JavaScript
import { __extends, __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 { TUI_DEFAULT_IDENTITY_MATCHER, isNativeFocused, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, AbstractTuiNullableControl, 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. */
var TUI_RADIO_DEFAULT_OPTIONS = {
size: 'm',
appearances: {
unchecked: "outline" /* Outline */,
checked: "primary" /* Primary */,
},
};
var TUI_RADIO_OPTIONS = new InjectionToken('Default parameters for radio component', {
factory: function () { return TUI_RADIO_DEFAULT_OPTIONS; },
});
// @dynamic
var TuiRadioComponent = /** @class */ (function (_super) {
__extends(TuiRadioComponent, _super);
function TuiRadioComponent(control, changeDetectorRef, options, radioGroup) {
var _this = _super.call(this, control, changeDetectorRef) || this;
_this.options = options;
_this.radioGroup = radioGroup;
_this.identityMatcher = TUI_DEFAULT_IDENTITY_MATCHER;
_this.name = null;
_this.size = _this.options.size;
_this.pseudoDisabled = false;
return _this;
}
TuiRadioComponent_1 = TuiRadioComponent;
Object.defineProperty(TuiRadioComponent.prototype, "appearance", {
get: function () {
return this.checked
? this.options.appearances.checked
: this.options.appearances.unchecked;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiRadioComponent.prototype, "computedDisabled", {
get: function () {
return this.disabled || this.pseudoDisabled;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiRadioComponent.prototype, "nativeFocusableElement", {
get: function () {
return !this.focusableElement || this.computedDisabled
? null
: this.focusableElement.nativeElement;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiRadioComponent.prototype, "focused", {
get: function () {
return isNativeFocused(this.nativeFocusableElement);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiRadioComponent.prototype, "checked", {
get: function () {
return this.value === null
? this.item === null
: this.item !== undefined && this.identityMatcher(this.value, this.item);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiRadioComponent.prototype, "computedName", {
get: function () {
return this.name || this.radioGroupName || this.controlName || null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiRadioComponent.prototype, "isFocusable", {
get: function () {
return !this.readOnly && this.computedFocusable;
},
enumerable: true,
configurable: true
});
TuiRadioComponent.prototype.onChecked = function (checked) {
if (checked) {
this.updateValue(this.item !== undefined ? this.item : this.fallbackValue);
}
};
TuiRadioComponent.prototype.onFocused = function (focused) {
this.updateFocused(focused);
};
TuiRadioComponent.prototype.onHovered = function (hovered) {
this.updateHovered(hovered);
};
TuiRadioComponent.prototype.onPressed = function (pressed) {
this.updatePressed(pressed);
};
TuiRadioComponent.prototype.onFocusVisible = function (focusVisible) {
this.updateFocusVisible(focusVisible);
};
Object.defineProperty(TuiRadioComponent.prototype, "radioGroupName", {
get: function () {
return this.radioGroup === null ? null : this.radioGroup.name;
},
enumerable: true,
configurable: true
});
var TuiRadioComponent_1;
TuiRadioComponent.ctorParameters = function () { return [
{ 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(function () { return 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);
return TuiRadioComponent;
}(AbstractTuiNullableControl));
var TuiRadioModule = /** @class */ (function () {
function TuiRadioModule() {
}
TuiRadioModule = __decorate([
NgModule({
imports: [
CommonModule,
TuiCheckedModule,
TuiFocusableModule,
TuiFocusedModule,
TuiHoveredModule,
TuiPressedModule,
TuiFocusVisibleModule,
TuiWrapperModule,
],
declarations: [TuiRadioComponent],
exports: [TuiRadioComponent],
})
], TuiRadioModule);
return 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