@taiga-ui/kit
Version:
Taiga UI Angular main components kit
63 lines • 13.7 kB
JavaScript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, Input, ViewEncapsulation, } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { NgControl } from '@angular/forms';
import { TuiNativeValidator } from '@taiga-ui/cdk/directives/native-validator';
import { tuiWatch } from '@taiga-ui/cdk/observables';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { tuiIsString } from '@taiga-ui/cdk/utils/miscellaneous';
import { TuiAppearance } from '@taiga-ui/core/directives/appearance';
import { tuiInjectIconResolver } from '@taiga-ui/core/tokens';
import { TUI_SWITCH_OPTIONS } from './switch.options';
import * as i0 from "@angular/core";
import * as i1 from "@taiga-ui/core/directives/appearance";
import * as i2 from "@taiga-ui/cdk/directives/native-validator";
class TuiSwitch {
constructor() {
this.appearance = inject(TuiAppearance);
this.resolver = tuiInjectIconResolver();
this.destroyRef = inject(DestroyRef);
this.cdr = inject(ChangeDetectorRef);
this.options = inject(TUI_SWITCH_OPTIONS);
this.el = tuiInjectElement();
this.control = inject(NgControl, { self: true, optional: true });
this.size = this.options.size;
this.showIcons = this.options.showIcons;
}
ngOnInit() {
this.control?.valueChanges
?.pipe(tuiWatch(this.cdr), takeUntilDestroyed(this.destroyRef))
.subscribe();
}
ngDoCheck() {
this.appearance.tuiAppearance = this.options.appearance(this.el);
}
get icon() {
const { options, resolver, size } = this;
const icon = tuiIsString(options.icon) ? options.icon : options.icon(size);
return this.showIcons && icon ? `url(${resolver(icon)})` : null;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiSwitch, isStandalone: true, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: { size: "size", showIcons: "showIcons" }, host: { attributes: { "role": "switch" }, properties: { "disabled": "!control || control.disabled", "attr.data-size": "size", "class._readonly": "!control", "style.--t-checked-icon": "icon" } }, hostDirectives: [{ directive: i1.TuiAppearance, inputs: ["tuiAppearanceState", "tuiAppearanceState", "tuiAppearanceFocus", "tuiAppearanceFocus", "tuiAppearanceMode", "tuiAppearanceMode"] }, { directive: i2.TuiNativeValidator }], ngImport: i0, template: '', isInline: true, styles: ["[tuiSwitch]{transition-property:background,box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;inline-size:3rem;block-size:1.5rem;border-radius:2rem;overflow:hidden;cursor:pointer;margin:0;flex-shrink:0;color:#fff!important}[tuiSwitch][data-size=s]{block-size:1rem;inline-size:2rem}[tuiSwitch][data-size=s]:before{inline-size:1rem;transform:translate(-1rem);-webkit-mask-size:.75rem;mask-size:.75rem}[tuiSwitch][data-size=s]:after{inline-size:1rem;box-shadow:-2.625rem 0 0 .5rem var(--tui-background-base);outline-width:.167rem;transform:scale(.375)}[tuiSwitch][data-size=s]:checked:after{transform:scale(.375) translate(2.625rem)}[tuiSwitch]:checked:before{transform:none}[tuiSwitch]:checked:after{transform:scale(.33333) translate(4.5rem)}[tuiSwitch]:disabled._readonly{opacity:1}[tuiSwitch]:before,[tuiSwitch]:after{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;block-size:100%;inline-size:1.5rem}[tuiSwitch]:before{display:var(--t-checked-icon, none);background:currentColor;-webkit-mask:var(--t-checked-icon) no-repeat center;mask:var(--t-checked-icon) no-repeat center;-webkit-mask-size:1rem;mask-size:1rem;transform:translate(-1.5rem)}[tuiSwitch]:after{right:0;border-radius:100%;transform:scale(.33333);box-shadow:-4.5rem 0 0 .75rem var(--tui-background-base);outline:.375rem solid var(--tui-background-neutral-2-pressed);outline-offset:var(--t-checked-icon, 20rem)}[tuiSwitch]:invalid:not([data-mode]),[tuiSwitch][data-mode~=invalid]{color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
export { TuiSwitch };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSwitch, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'input[type="checkbox"][tuiSwitch]', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
{
directive: TuiAppearance,
inputs: ['tuiAppearanceState', 'tuiAppearanceFocus', 'tuiAppearanceMode'],
},
TuiNativeValidator,
], host: {
role: 'switch',
'[disabled]': '!control || control.disabled',
'[attr.data-size]': 'size',
'[class._readonly]': '!control',
'[style.--t-checked-icon]': 'icon',
}, styles: ["[tuiSwitch]{transition-property:background,box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;inline-size:3rem;block-size:1.5rem;border-radius:2rem;overflow:hidden;cursor:pointer;margin:0;flex-shrink:0;color:#fff!important}[tuiSwitch][data-size=s]{block-size:1rem;inline-size:2rem}[tuiSwitch][data-size=s]:before{inline-size:1rem;transform:translate(-1rem);-webkit-mask-size:.75rem;mask-size:.75rem}[tuiSwitch][data-size=s]:after{inline-size:1rem;box-shadow:-2.625rem 0 0 .5rem var(--tui-background-base);outline-width:.167rem;transform:scale(.375)}[tuiSwitch][data-size=s]:checked:after{transform:scale(.375) translate(2.625rem)}[tuiSwitch]:checked:before{transform:none}[tuiSwitch]:checked:after{transform:scale(.33333) translate(4.5rem)}[tuiSwitch]:disabled._readonly{opacity:1}[tuiSwitch]:before,[tuiSwitch]:after{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;block-size:100%;inline-size:1.5rem}[tuiSwitch]:before{display:var(--t-checked-icon, none);background:currentColor;-webkit-mask:var(--t-checked-icon) no-repeat center;mask:var(--t-checked-icon) no-repeat center;-webkit-mask-size:1rem;mask-size:1rem;transform:translate(-1.5rem)}[tuiSwitch]:after{right:0;border-radius:100%;transform:scale(.33333);box-shadow:-4.5rem 0 0 .75rem var(--tui-background-base);outline:.375rem solid var(--tui-background-neutral-2-pressed);outline-offset:var(--t-checked-icon, 20rem)}[tuiSwitch]:invalid:not([data-mode]),[tuiSwitch][data-mode~=invalid]{color:#fff}\n"] }]
}], propDecorators: { size: [{
type: Input
}], showIcons: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3dpdGNoLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL3N3aXRjaC9zd2l0Y2guY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxVQUFVLEVBQ1YsTUFBTSxFQUNOLEtBQUssRUFDTCxpQkFBaUIsR0FDcEIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLGtCQUFrQixFQUFDLE1BQU0sNEJBQTRCLENBQUM7QUFDOUQsT0FBTyxFQUFDLFNBQVMsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQ3pDLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLDJDQUEyQyxDQUFDO0FBQzdFLE9BQU8sRUFBQyxRQUFRLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQztBQUNuRCxPQUFPLEVBQUMsZ0JBQWdCLEVBQUMsTUFBTSx5QkFBeUIsQ0FBQztBQUN6RCxPQUFPLEVBQUMsV0FBVyxFQUFDLE1BQU0sbUNBQW1DLENBQUM7QUFDOUQsT0FBTyxFQUFDLGFBQWEsRUFBQyxNQUFNLHNDQUFzQyxDQUFDO0FBQ25FLE9BQU8sRUFBQyxxQkFBcUIsRUFBQyxNQUFNLHVCQUF1QixDQUFDO0FBRzVELE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLGtCQUFrQixDQUFDOzs7O0FBRXBELE1Bc0JhLFNBQVM7SUF0QnRCO1FBdUJxQixlQUFVLEdBQUcsTUFBTSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQ25DLGFBQVEsR0FBRyxxQkFBcUIsRUFBRSxDQUFDO1FBQ25DLGVBQVUsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDaEMsUUFBRyxHQUFHLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO1FBQ2hDLFlBQU8sR0FBRyxNQUFNLENBQUMsa0JBQWtCLENBQUMsQ0FBQztRQUNyQyxPQUFFLEdBQUcsZ0JBQWdCLEVBQW9CLENBQUM7UUFFeEMsWUFBTyxHQUFHLE1BQU0sQ0FBQyxTQUFTLEVBQUUsRUFBQyxJQUFJLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUMsQ0FBQyxDQUFDO1FBR3RFLFNBQUksR0FBYSxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQztRQUduQyxjQUFTLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUM7S0FrQjdDO0lBaEJVLFFBQVE7UUFDWCxJQUFJLENBQUMsT0FBTyxFQUFFLFlBQVk7WUFDdEIsRUFBRSxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7YUFDOUQsU0FBUyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVNLFNBQVM7UUFDWixJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDckUsQ0FBQztJQUVELElBQWMsSUFBSTtRQUNkLE1BQU0sRUFBQyxPQUFPLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBQyxHQUFHLElBQUksQ0FBQztRQUN2QyxNQUFNLElBQUksR0FBRyxXQUFXLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBRTNFLE9BQU8sSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsQ0FBQyxDQUFDLE9BQU8sUUFBUSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUNwRSxDQUFDOytHQS9CUSxTQUFTO21HQUFULFNBQVMseWpCQW5CUixFQUFFOztTQW1CSCxTQUFTOzRGQUFULFNBQVM7a0JBdEJyQixTQUFTO2lDQUNNLElBQUksWUFDTixtQ0FBbUMsWUFDbkMsRUFBRSxpQkFFRyxpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNLGtCQUMvQjt3QkFDWjs0QkFDSSxTQUFTLEVBQUUsYUFBYTs0QkFDeEIsTUFBTSxFQUFFLENBQUMsb0JBQW9CLEVBQUUsb0JBQW9CLEVBQUUsbUJBQW1CLENBQUM7eUJBQzVFO3dCQUNELGtCQUFrQjtxQkFDckIsUUFDSzt3QkFDRixJQUFJLEVBQUUsUUFBUTt3QkFDZCxZQUFZLEVBQUUsOEJBQThCO3dCQUM1QyxrQkFBa0IsRUFBRSxNQUFNO3dCQUMxQixtQkFBbUIsRUFBRSxVQUFVO3dCQUMvQiwwQkFBMEIsRUFBRSxNQUFNO3FCQUNyQzs4QkFhTSxJQUFJO3NCQURWLEtBQUs7Z0JBSUMsU0FBUztzQkFEZixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUge0RvQ2hlY2ssIE9uSW5pdH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENoYW5nZURldGVjdG9yUmVmLFxuICAgIENvbXBvbmVudCxcbiAgICBEZXN0cm95UmVmLFxuICAgIGluamVjdCxcbiAgICBJbnB1dCxcbiAgICBWaWV3RW5jYXBzdWxhdGlvbixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge3Rha2VVbnRpbERlc3Ryb3llZH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnO1xuaW1wb3J0IHtOZ0NvbnRyb2x9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcbmltcG9ydCB7VHVpTmF0aXZlVmFsaWRhdG9yfSBmcm9tICdAdGFpZ2EtdWkvY2RrL2RpcmVjdGl2ZXMvbmF0aXZlLXZhbGlkYXRvcic7XG5pbXBvcnQge3R1aVdhdGNofSBmcm9tICdAdGFpZ2EtdWkvY2RrL29ic2VydmFibGVzJztcbmltcG9ydCB7dHVpSW5qZWN0RWxlbWVudH0gZnJvbSAnQHRhaWdhLXVpL2Nkay91dGlscy9kb20nO1xuaW1wb3J0IHt0dWlJc1N0cmluZ30gZnJvbSAnQHRhaWdhLXVpL2Nkay91dGlscy9taXNjZWxsYW5lb3VzJztcbmltcG9ydCB7VHVpQXBwZWFyYW5jZX0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvZGlyZWN0aXZlcy9hcHBlYXJhbmNlJztcbmltcG9ydCB7dHVpSW5qZWN0SWNvblJlc29sdmVyfSBmcm9tICdAdGFpZ2EtdWkvY29yZS90b2tlbnMnO1xuaW1wb3J0IHR5cGUge1R1aVNpemVTfSBmcm9tICdAdGFpZ2EtdWkvY29yZS90eXBlcyc7XG5cbmltcG9ydCB7VFVJX1NXSVRDSF9PUFRJT05TfSBmcm9tICcuL3N3aXRjaC5vcHRpb25zJztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ2lucHV0W3R5cGU9XCJjaGVja2JveFwiXVt0dWlTd2l0Y2hdJyxcbiAgICB0ZW1wbGF0ZTogJycsXG4gICAgc3R5bGVzOiBbJ0BpbXBvcnQgXCJAdGFpZ2EtdWkva2l0L3N0eWxlcy9jb21wb25lbnRzL3N3aXRjaC5sZXNzXCI7J10sXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBob3N0RGlyZWN0aXZlczogW1xuICAgICAgICB7XG4gICAgICAgICAgICBkaXJlY3RpdmU6IFR1aUFwcGVhcmFuY2UsXG4gICAgICAgICAgICBpbnB1dHM6IFsndHVpQXBwZWFyYW5jZVN0YXRlJywgJ3R1aUFwcGVhcmFuY2VGb2N1cycsICd0dWlBcHBlYXJhbmNlTW9kZSddLFxuICAgICAgICB9LFxuICAgICAgICBUdWlOYXRpdmVWYWxpZGF0b3IsXG4gICAgXSxcbiAgICBob3N0OiB7XG4gICAgICAgIHJvbGU6ICdzd2l0Y2gnLFxuICAgICAgICAnW2Rpc2FibGVkXSc6ICchY29udHJvbCB8fCBjb250cm9sLmRpc2FibGVkJyxcbiAgICAgICAgJ1thdHRyLmRhdGEtc2l6ZV0nOiAnc2l6ZScsXG4gICAgICAgICdbY2xhc3MuX3JlYWRvbmx5XSc6ICchY29udHJvbCcsXG4gICAgICAgICdbc3R5bGUuLS10LWNoZWNrZWQtaWNvbl0nOiAnaWNvbicsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpU3dpdGNoIGltcGxlbWVudHMgRG9DaGVjaywgT25Jbml0IHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGFwcGVhcmFuY2UgPSBpbmplY3QoVHVpQXBwZWFyYW5jZSk7XG4gICAgcHJpdmF0ZSByZWFkb25seSByZXNvbHZlciA9IHR1aUluamVjdEljb25SZXNvbHZlcigpO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgZGVzdHJveVJlZiA9IGluamVjdChEZXN0cm95UmVmKTtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGNkciA9IGluamVjdChDaGFuZ2VEZXRlY3RvclJlZik7XG4gICAgcHJpdmF0ZSByZWFkb25seSBvcHRpb25zID0gaW5qZWN0KFRVSV9TV0lUQ0hfT1BUSU9OUyk7XG4gICAgcHJpdmF0ZSByZWFkb25seSBlbCA9IHR1aUluamVjdEVsZW1lbnQ8SFRNTElucHV0RWxlbWVudD4oKTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSBjb250cm9sID0gaW5qZWN0KE5nQ29udHJvbCwge3NlbGY6IHRydWUsIG9wdGlvbmFsOiB0cnVlfSk7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBzaXplOiBUdWlTaXplUyA9IHRoaXMub3B0aW9ucy5zaXplO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgc2hvd0ljb25zID0gdGhpcy5vcHRpb25zLnNob3dJY29ucztcblxuICAgIHB1YmxpYyBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5jb250cm9sPy52YWx1ZUNoYW5nZXNcbiAgICAgICAgICAgID8ucGlwZSh0dWlXYXRjaCh0aGlzLmNkciksIHRha2VVbnRpbERlc3Ryb3llZCh0aGlzLmRlc3Ryb3lSZWYpKVxuICAgICAgICAgICAgLnN1YnNjcmliZSgpO1xuICAgIH1cblxuICAgIHB1YmxpYyBuZ0RvQ2hlY2soKTogdm9pZCB7XG4gICAgICAgIHRoaXMuYXBwZWFyYW5jZS50dWlBcHBlYXJhbmNlID0gdGhpcy5vcHRpb25zLmFwcGVhcmFuY2UodGhpcy5lbCk7XG4gICAgfVxuXG4gICAgcHJvdGVjdGVkIGdldCBpY29uKCk6IHN0cmluZyB8IG51bGwge1xuICAgICAgICBjb25zdCB7b3B0aW9ucywgcmVzb2x2ZXIsIHNpemV9ID0gdGhpcztcbiAgICAgICAgY29uc3QgaWNvbiA9IHR1aUlzU3RyaW5nKG9wdGlvbnMuaWNvbikgPyBvcHRpb25zLmljb24gOiBvcHRpb25zLmljb24oc2l6ZSk7XG5cbiAgICAgICAgcmV0dXJuIHRoaXMuc2hvd0ljb25zICYmIGljb24gPyBgdXJsKCR7cmVzb2x2ZXIoaWNvbil9KWAgOiBudWxsO1xuICAgIH1cbn1cbiJdfQ==