@taiga-ui/kit
Version:
Taiga UI Angular main components kit
188 lines (183 loc) • 11.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 } from '@angular/forms';
import { isNativeFocused, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, AbstractTuiControl, TuiFocusedModule, TuiFocusableModule, TuiHoveredModule, TuiPressedModule, TuiFocusVisibleModule, TuiCheckedModule } from '@taiga-ui/cdk';
import { TuiModeDirective, TuiWrapperModule, TuiSvgModule, TuiLoaderModule } from '@taiga-ui/core';
import { CommonModule } from '@angular/common';
var TuiToggleComponent = /** @class */ (function (_super) {
__extends(TuiToggleComponent, _super);
function TuiToggleComponent(control, changeDetectorRef, modeDirective) {
var _this = _super.call(this, control, changeDetectorRef) || this;
_this.modeDirective = modeDirective;
_this.singleColor = false;
_this.showIcons = false;
_this.showLoader = false;
_this.size = 'm';
return _this;
}
TuiToggleComponent_1 = TuiToggleComponent;
Object.defineProperty(TuiToggleComponent.prototype, "nativeFocusableElement", {
get: function () {
return this.focusableElement ? this.focusableElement.nativeElement : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiToggleComponent.prototype, "focused", {
get: function () {
return isNativeFocused(this.nativeFocusableElement);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiToggleComponent.prototype, "appearance", {
get: function () {
return this.singleColor || this.checked
? "primary" /* Primary */
: "secondary" /* Secondary */;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiToggleComponent.prototype, "sizeM", {
get: function () {
return this.size === 'm';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiToggleComponent.prototype, "checked", {
get: function () {
return this.value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiToggleComponent.prototype, "iconOn", {
get: function () {
return this.sizeM ? 'tuiIconToggleOn' : 'tuiIconToggleOnLarge';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiToggleComponent.prototype, "iconOff", {
get: function () {
return this.sizeM ? 'tuiIconToggleOff' : 'tuiIconToggleOffLarge';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiToggleComponent.prototype, "loaderSize", {
get: function () {
return this.sizeM ? 'xs' : 's';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiToggleComponent.prototype, "hostMode", {
get: function () {
return this.modeDirective ? this.modeDirective.mode : null;
},
enumerable: true,
configurable: true
});
TuiToggleComponent.prototype.onChecked = function (checked) {
this.updateValue(checked);
};
TuiToggleComponent.prototype.onFocused = function (focused) {
this.updateFocused(focused);
};
TuiToggleComponent.prototype.onHovered = function (hovered) {
this.updateHovered(hovered);
};
TuiToggleComponent.prototype.onPressed = function (pressed) {
this.updatePressed(pressed);
};
TuiToggleComponent.prototype.onFocusVisible = function (focusVisible) {
this.updateFocusVisible(focusVisible);
};
TuiToggleComponent.prototype.getFallbackValue = function () {
return false;
};
var TuiToggleComponent_1;
TuiToggleComponent.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(),
tuiDefaultProp()
], TuiToggleComponent.prototype, "singleColor", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiToggleComponent.prototype, "showIcons", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiToggleComponent.prototype, "showLoader", void 0);
__decorate([
Input(),
HostBinding('attr.data-tui-host-size'),
tuiDefaultProp()
], TuiToggleComponent.prototype, "size", void 0);
__decorate([
ViewChild('focusableElement')
], TuiToggleComponent.prototype, "focusableElement", void 0);
__decorate([
HostBinding('class._checked')
], TuiToggleComponent.prototype, "checked", null);
__decorate([
HostBinding('attr.data-mode')
], TuiToggleComponent.prototype, "hostMode", null);
TuiToggleComponent = TuiToggleComponent_1 = __decorate([
Component({
selector: 'tui-toggle',
template: "<tui-wrapper\n [appearance]=\"appearance\"\n [disabled]=\"disabled\"\n [focused]=\"computedFocusVisible\"\n [hovered]=\"computedHovered\"\n [pressed]=\"computedPressed\"\n [invalid]=\"computedInvalid\"\n>\n <div class=\"toggle\">\n <tui-loader\n *ngIf=\"showLoader\"\n class=\"loader\"\n [size]=\"loaderSize\"\n [inheritColor]=\"true\"\n [showLoader]=\"checked\"\n ></tui-loader>\n <tui-svg\n *ngIf=\"showIcons && !showLoader\"\n class=\"icon\"\n automation-id=\"tui-toggle__check-icon\"\n [src]=\"iconOn\"\n ></tui-svg>\n <div class=\"circle\"></div>\n <tui-loader\n *ngIf=\"showLoader\"\n class=\"loader\"\n [size]=\"loaderSize\"\n [inheritColor]=\"true\"\n [showLoader]=\"!checked\"\n ></tui-loader>\n <tui-svg\n *ngIf=\"showIcons && !showLoader\"\n class=\"icon icon_off\"\n automation-id=\"tui-toggle__cancel-icon\"\n [src]=\"iconOff\"\n ></tui-svg>\n </div>\n</tui-wrapper>\n<input\n #focusableElement\n type=\"checkbox\"\n class=\"checkbox\"\n role=\"switch\"\n automation-id=\"tui-toggle__checkbox\"\n [attr.aria-checked]=\"value\"\n [id]=\"id\"\n [disabled]=\"disabled\"\n [tuiChecked]=\"checked\"\n [tuiFocusable]=\"focusable\"\n (tuiCheckedChange)=\"onChecked($event)\"\n (tuiFocusedChange)=\"onFocused($event)\"\n (tuiHoveredChange)=\"onHovered($event)\"\n (tuiPressedChange)=\"onPressed($event)\"\n (tuiFocusVisibleChange)=\"onFocusVisible($event)\"\n/>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(function () { return TuiToggleComponent_1; }),
},
],
styles: [":host{position:relative;display:inline-block;vertical-align:middle;overflow:hidden;border-radius:100px}:host[data-tui-host-size='m']{width:32px;height:16px}:host[data-tui-host-size='l']{width:48px;height:24px}.checkbox{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;height:100%;width:100%;opacity:0;cursor:pointer}.checkbox:-webkit-autofill,.checkbox:-webkit-autofill:focus,.checkbox:-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 .checkbox{pointer-events:none;cursor:default}.toggle{transition-property:transform;transition-duration:.3s;transition-timing-function:ease-in-out;display:flex;align-items:center;justify-content:center}:host[data-tui-host-size='m'] .toggle{width:48px;height:16px;transform:translateX(-16px)}:host[data-tui-host-size='l'] .toggle{width:72px;height:24px;transform:translateX(-24px)}:host._checked .toggle{transform:translateX(0)}.circle{margin:2px 0;flex-shrink:0;border-radius:100%;background-color:var(--tui-base-01)}:host._disabled .circle_light{opacity:.24}:host[data-tui-host-size='m'] .circle{width:12px;height:12px}:host[data-tui-host-size='l'] .circle{width:16px;height:16px}:host._disabled .circle{background-color:var(--tui-base-01)}:host:not(._checked) .loader{color:var(--tui-base-06)}:host:not(._checked)._disabled .loader{color:var(--tui-base-05)}:host:not(._checked)[data-mode=onDark] .loader{color:var(--tui-text-03-night)}:host:not(._checked)[data-mode=onDark]._disabled .loader{color:var(--tui-clear-inverse-active)}:host:not(._checked)[data-mode=onLight] .loader{color:var(--tui-text-03)}:host:not(._checked)[data-mode=onLight]._disabled .loader{color:var(--tui-clear-active)}:host[data-tui-host-size='m'] .loader{width:12px;margin:0 2px;transform:scale(.75)}:host[data-tui-host-size='l'] .loader{width:16px;margin:0 6px}.icon{opacity:.8}.icon_off{color:var(--tui-base-06)}:host._disabled .icon_off{color:var(--tui-base-05)}:host[data-mode=onDark] .icon_off{color:var(--tui-text-03-night)}:host[data-mode=onDark]._disabled .icon_off{color:var(--tui-clear-inverse-active)}:host[data-mode=onLight] .icon_off{color:var(--tui-text-03)}:host[data-mode=onLight]._disabled .icon_off{color:var(--tui-clear-active)}:host[data-tui-host-size='m'] .icon{width:16px;height:16px;transform:scale(.75)}:host[data-tui-host-size='l'] .icon{margin:0 2px;width:24px;height:24px}:host._hovered .icon{opacity:1}"]
}),
__param(0, Optional()),
__param(0, Self()),
__param(0, Inject(NgControl)),
__param(1, Inject(ChangeDetectorRef)),
__param(2, Optional()),
__param(2, Inject(TuiModeDirective))
], TuiToggleComponent);
return TuiToggleComponent;
}(AbstractTuiControl));
var TuiToggleModule = /** @class */ (function () {
function TuiToggleModule() {
}
TuiToggleModule = __decorate([
NgModule({
imports: [
CommonModule,
TuiFocusedModule,
TuiFocusableModule,
TuiHoveredModule,
TuiPressedModule,
TuiFocusVisibleModule,
TuiCheckedModule,
TuiWrapperModule,
TuiSvgModule,
TuiLoaderModule,
],
declarations: [TuiToggleComponent],
exports: [TuiToggleComponent],
})
], TuiToggleModule);
return TuiToggleModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { TuiToggleComponent, TuiToggleModule };
//# sourceMappingURL=taiga-ui-kit-components-toggle.js.map