@taiga-ui/kit
Version:
Taiga UI Angular main components kit
172 lines (167 loc) • 10.4 kB
JavaScript
import { __extends, __decorate, __param } from 'tslib';
import { Optional, Self, Inject, ChangeDetectorRef, Input, HostBinding, ViewChild, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { NgControl, FormsModule } from '@angular/forms';
import { TUI_DEFAULT_IDENTITY_MATCHER, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, AbstractTuiNullableControl, TuiHoveredModule, TuiPressedModule } from '@taiga-ui/cdk';
import { TuiModeDirective, TuiWrapperModule } from '@taiga-ui/core';
import { TuiRadioComponent, TuiRadioModule } from '@taiga-ui/kit/components/radio';
var TuiRadioBlockComponent = /** @class */ (function (_super) {
__extends(TuiRadioBlockComponent, _super);
function TuiRadioBlockComponent(control, changeDetectorRef, modeDirective) {
var _this = _super.call(this, control, changeDetectorRef) || this;
_this.modeDirective = modeDirective;
_this.identityMatcher = TUI_DEFAULT_IDENTITY_MATCHER;
_this.contentAlign = 'right';
_this.size = 'l';
_this.hideRadio = false;
_this.pseudoDisabled = false;
return _this;
}
TuiRadioBlockComponent_1 = TuiRadioBlockComponent;
Object.defineProperty(TuiRadioBlockComponent.prototype, "nativeFocusableElement", {
get: function () {
return this.radio ? this.radio.nativeFocusableElement : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiRadioBlockComponent.prototype, "focused", {
get: function () {
return !!this.radio && this.radio.focused;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiRadioBlockComponent.prototype, "computedDisabled", {
get: function () {
return this.disabled || this.pseudoDisabled;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiRadioBlockComponent.prototype, "checked", {
get: function () {
return this.value === this.item && this.hideRadio;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiRadioBlockComponent.prototype, "checkboxSize", {
get: function () {
return this.size === 'l' ? 'l' : 'm';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiRadioBlockComponent.prototype, "appearance", {
get: function () {
if (!this.modeDirective || !this.modeDirective.mode) {
return this.checked
? "whiteblock-active" /* WhiteblockActive */
: "whiteblock" /* Whiteblock */;
}
return this.checked ? "primary" /* Primary */ : "secondary" /* Secondary */;
},
enumerable: true,
configurable: true
});
TuiRadioBlockComponent.prototype.onFocused = function (focused) {
this.updateFocused(focused);
};
TuiRadioBlockComponent.prototype.onHovered = function (hovered) {
this.updateHovered(hovered);
};
TuiRadioBlockComponent.prototype.onPressed = function (pressed) {
this.updatePressed(pressed);
};
TuiRadioBlockComponent.prototype.onFocusVisible = function (focusVisible) {
this.updateFocusVisible(focusVisible);
};
TuiRadioBlockComponent.prototype.onModelChange = function (value) {
this.updateValue(value);
};
var TuiRadioBlockComponent_1;
TuiRadioBlockComponent.ctorParameters = function () { return [
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
{ type: TuiModeDirective, decorators: [{ type: Optional }, { type: Inject, args: [TuiModeDirective,] }] }
]; };
__decorate([
Input()
], TuiRadioBlockComponent.prototype, "item", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiRadioBlockComponent.prototype, "identityMatcher", void 0);
__decorate([
Input(),
HostBinding('attr.data-tui-host-align'),
tuiDefaultProp()
], TuiRadioBlockComponent.prototype, "contentAlign", void 0);
__decorate([
Input(),
HostBinding('attr.data-tui-host-size'),
tuiDefaultProp()
], TuiRadioBlockComponent.prototype, "size", void 0);
__decorate([
Input(),
HostBinding('class._hidden_radio'),
tuiDefaultProp()
], TuiRadioBlockComponent.prototype, "hideRadio", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiRadioBlockComponent.prototype, "pseudoDisabled", void 0);
__decorate([
ViewChild(TuiRadioComponent)
], TuiRadioBlockComponent.prototype, "radio", void 0);
__decorate([
HostBinding('class._disabled')
], TuiRadioBlockComponent.prototype, "computedDisabled", null);
__decorate([
HostBinding('class._active')
], TuiRadioBlockComponent.prototype, "checked", null);
TuiRadioBlockComponent = TuiRadioBlockComponent_1 = __decorate([
Component({
selector: 'tui-radio-block',
template: "<label\n class=\"wrapper\"\n (tuiHoveredChange)=\"onHovered($event)\"\n (tuiPressedChange)=\"onPressed($event)\"\n>\n <tui-wrapper\n [appearance]=\"appearance\"\n [disabled]=\"computedDisabled\"\n [focused]=\"computedFocusVisible\"\n [hovered]=\"computedHovered\"\n [pressed]=\"computedPressed\"\n [invalid]=\"computedInvalid\"\n >\n <div class=\"content-wrapper\">\n <div class=\"content\">\n <tui-radio\n class=\"view\"\n [focusable]=\"focusable\"\n [identityMatcher]=\"identityMatcher\"\n [item]=\"item\"\n [name]=\"computedName\"\n [nativeId]=\"nativeId\"\n [readOnly]=\"readOnly\"\n [pseudoDisabled]=\"computedDisabled\"\n [pseudoInvalid]=\"computedInvalid\"\n [pseudoFocused]=\"false\"\n [pseudoHovered]=\"computedHovered\"\n [pseudoPressed]=\"computedPressed\"\n [size]=\"checkboxSize\"\n [ngModel]=\"value\"\n (ngModelChange)=\"onModelChange($event)\"\n (focusedChange)=\"onFocused($event)\"\n (focusVisibleChange)=\"onFocusVisible($event)\"\n ></tui-radio>\n <div class=\"label\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n </tui-wrapper>\n</label>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(function () { return TuiRadioBlockComponent_1; }),
},
],
styles: [":host{font:var(--tui-font-text-s);color:var(--tui-text-01);display:inline-block;vertical-align:top;border-radius:var(--tui-radius-m)}:host[data-tui-host-size='l'],:host[data-tui-host-size='m']{font:var(--tui-font-text-m)}:host._readonly{pointer-events:none}.wrapper{position:relative;border-radius:inherit;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host._disabled .wrapper{cursor:default}.content-wrapper{display:flex;flex-direction:column}:host[data-tui-host-size='s'] .content-wrapper{min-height:var(--tui-height-s)}:host[data-tui-host-size='m'] .content-wrapper{min-height:var(--tui-height-m)}:host[data-tui-host-size='l'] .content-wrapper{min-height:var(--tui-height-l)}.content{display:flex;align-items:center;min-height:inherit}:host[data-tui-host-align=right] .content{flex-direction:row-reverse}:host[data-tui-host-size='s'] .content{padding:0 16px 0 8px}:host[data-tui-host-size='s'][data-tui-host-align=right] .content{padding:0 8px 0 16px}:host[data-tui-host-size='s']._hidden_radio .content{padding:0 16px}:host[data-tui-host-size='m'] .content{padding:0 16px 0 12px}:host[data-tui-host-size='m'][data-tui-host-align=right] .content{padding:0 12px 0 16px}:host[data-tui-host-size='m']._hidden_radio .content{padding:0 24px}:host[data-tui-host-size='l'] .content{padding:0 16px}:host[data-tui-host-size='l']._hidden_radio .content{padding:0 36px}.view{margin-top:12px;margin-right:12px;align-self:flex-start}:host[data-tui-host-align=right] .view{margin-left:12px;margin-right:0}:host[data-tui-host-size='s'] .view{margin-top:8px;margin-right:8px}:host[data-tui-host-size='s'][data-tui-host-align=right] .view{margin-left:8px}:host[data-tui-host-size='m'] .view{margin-top:14px}:host[data-tui-host-size='l'] .view{margin-top:16px}:host[data-tui-host-size='l'][data-tui-host-align=right] .view{margin-left:16px;margin-right:0}:host._hidden_radio .view{position:absolute;height:1px;width:1px;margin:-1px;border:0;padding:0;overflow:hidden;clip:rect(0,0,0,0);-webkit-clip-path:inset(0);clip-path:inset(0)}.label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-grow:1}:host._hidden_radio .label{text-align:center}"]
}),
__param(0, Optional()),
__param(0, Self()),
__param(0, Inject(NgControl)),
__param(1, Inject(ChangeDetectorRef)),
__param(2, Optional()),
__param(2, Inject(TuiModeDirective))
], TuiRadioBlockComponent);
return TuiRadioBlockComponent;
}(AbstractTuiNullableControl));
var TuiRadioBlockModule = /** @class */ (function () {
function TuiRadioBlockModule() {
}
TuiRadioBlockModule = __decorate([
NgModule({
imports: [
FormsModule,
TuiHoveredModule,
TuiPressedModule,
TuiRadioModule,
TuiWrapperModule,
],
declarations: [TuiRadioBlockComponent],
exports: [TuiRadioBlockComponent],
})
], TuiRadioBlockModule);
return TuiRadioBlockModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { TuiRadioBlockComponent, TuiRadioBlockModule };
//# sourceMappingURL=taiga-ui-kit-components-radio-block.js.map