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

Taiga UI Angular main components kit

import { __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 { AbstractTuiControl, isNativeFocused, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, 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_1;
let TuiToggleComponent = TuiToggleComponent_1 = class TuiToggleComponent extends AbstractTuiControl {
    constructor(control, changeDetectorRef, modeDirective) {
        super(control, changeDetectorRef);
        this.modeDirective = modeDirective;
        this.singleColor = false;
        this.showIcons = false;
        this.showLoader = false;
        this.size = 'm';
    }
    get nativeFocusableElement() {
        return this.focusableElement ? this.focusableElement.nativeElement : null;
    }
    get focused() {
        return isNativeFocused(this.nativeFocusableElement);
    }
    get appearance() {
        return this.singleColor || this.checked
            ? "primary" /* Primary */
            : "secondary" /* Secondary */;
    }
    get sizeM() {
        return this.size === 'm';
    }
    get checked() {
        return this.value;
    }
    get iconOn() {
        return this.sizeM ? 'tuiIconToggleOn' : 'tuiIconToggleOnLarge';
    }
    get iconOff() {
        return this.sizeM ? 'tuiIconToggleOff' : 'tuiIconToggleOffLarge';
    }
    get loaderSize() {
        return this.sizeM ? 'xs' : 's';
    }
    get hostMode() {
        return this.modeDirective ? this.modeDirective.mode : null;
    }
    onChecked(checked) {
        this.updateValue(checked);
    }
    onFocused(focused) {
        this.updateFocused(focused);
    }
    onHovered(hovered) {
        this.updateHovered(hovered);
    }
    onPressed(pressed) {
        this.updatePressed(pressed);
    }
    onFocusVisible(focusVisible) {
        this.updateFocusVisible(focusVisible);
    }
    getFallbackValue() {
        return false;
    }
};
TuiToggleComponent.ctorParameters = () => [
    { 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(() => 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);

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

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

export { TuiToggleComponent, TuiToggleModule };
//# sourceMappingURL=taiga-ui-kit-components-toggle.js.map