@taiga-ui/kit
Version:
Taiga UI Angular main components kit
37 lines (32 loc) • 6.84 kB
JavaScript
import * as i0 from '@angular/core';
import { computed, input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
import '@taiga-ui/cdk/constants';
import { tuiCreateOptions, tuiProvide } from '@taiga-ui/cdk/utils/di';
import { TuiRadioComponent, TUI_RADIO_OPTIONS } from '@taiga-ui/core/components/radio';
import * as i1 from '@taiga-ui/core/directives/icons';
import { tuiIconStart, TuiIcons } from '@taiga-ui/core/directives/icons';
const [TUI_SWITCH_OPTIONS, tuiSwitchOptionsProvider] = tuiCreateOptions({
showIcons: true,
size: 'm',
icon: () => '@tui.check',
appearance: ({ checked }) => (checked ? 'primary' : 'secondary'),
});
class TuiSwitch extends TuiRadioComponent {
constructor() {
super(...arguments);
this.native = 'switch' in this.el;
this.icon = tuiIconStart(computed(() => (this.showIcons() ? this.options.icon(this.size()) : '')));
this.showIcons = input(this.options.showIcons);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiSwitch, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: TuiSwitch, isStandalone: true, selector: "input[type=\"checkbox\"][tuiSwitch]", inputs: { showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "switch", "switch": "" }, properties: { "class._native": "native" } }, providers: [tuiProvide(TUI_RADIO_OPTIONS, TUI_SWITCH_OPTIONS)], usesInheritance: true, hostDirectives: [{ directive: i1.TuiIcons }], ngImport: i0, template: '', isInline: true, styles: ["[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]){transition-property:background,box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:inline-block;inline-size:3rem;block-size:1.5rem;border-radius:2rem;overflow:hidden;cursor:pointer;margin:0;flex-shrink:0;color:#fff!important}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]{block-size:1rem;inline-size:2rem}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]:before{inline-size:1rem;transform:translate(calc(var(--tui-inline) * -1rem));font-size:.75rem}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]:after{inline-size:1rem;box-shadow:calc(var(--tui-inline) * -2.625rem) 0 0 .5rem var(--tui-background-base);outline-width:.167rem;transform:scale(.375)}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]:checked:after{transform:scale(.375) translate(calc(var(--tui-inline) * 2.625rem))}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]):checked:before{transform:none}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]):checked:after{transform:scale(.33333) translate(calc(var(--tui-inline) * 4.5rem))}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]):disabled._readonly._readonly{opacity:1}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]):before,[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]):after{position:absolute;block-size:100%;inline-size:1.5rem;transition-property:transform;zoom:1}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]):before{inset-inline-start:.125rem;font-size:1rem;transform:translate(calc(var(--tui-inline) * -1.5rem))}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]):after{display:block;inset-inline-end:0;border-radius:100%;background:none;transform:scale(.33333);box-shadow:calc(var(--tui-inline) * -4.5rem) 0 0 .75rem var(--tui-background-base);outline:.375rem solid var(--tui-background-neutral-2-pressed)}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]):not([data-icon-start]):after{outline-offset:20rem}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]):invalid:not([data-mode]),[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"])[data-mode~=invalid]{color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiSwitch, decorators: [{
type: Component,
args: [{ selector: 'input[type="checkbox"][tuiSwitch]', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [tuiProvide(TUI_RADIO_OPTIONS, TUI_SWITCH_OPTIONS)], hostDirectives: [TuiIcons], host: { role: 'switch', switch: '', '[class._native]': 'native' }, styles: ["[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]){transition-property:background,box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;display:inline-block;inline-size:3rem;block-size:1.5rem;border-radius:2rem;overflow:hidden;cursor:pointer;margin:0;flex-shrink:0;color:#fff!important}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]{block-size:1rem;inline-size:2rem}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]:before{inline-size:1rem;transform:translate(calc(var(--tui-inline) * -1rem));font-size:.75rem}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]:after{inline-size:1rem;box-shadow:calc(var(--tui-inline) * -2.625rem) 0 0 .5rem var(--tui-background-base);outline-width:.167rem;transform:scale(.375)}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"])[data-size=s]:checked:after{transform:scale(.375) translate(calc(var(--tui-inline) * 2.625rem))}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]):checked:before{transform:none}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]):checked:after{transform:scale(.33333) translate(calc(var(--tui-inline) * 4.5rem))}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]):disabled._readonly._readonly{opacity:1}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]):before,[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]):after{position:absolute;block-size:100%;inline-size:1.5rem;transition-property:transform;zoom:1}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]):before{inset-inline-start:.125rem;font-size:1rem;transform:translate(calc(var(--tui-inline) * -1.5rem))}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]):after{display:block;inset-inline-end:0;border-radius:100%;background:none;transform:scale(.33333);box-shadow:calc(var(--tui-inline) * -4.5rem) 0 0 .75rem var(--tui-background-base);outline:.375rem solid var(--tui-background-neutral-2-pressed)}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]):not([data-icon-start]):after{outline-offset:20rem}[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"]):invalid:not([data-mode]),[tuiSwitch]:where(*[data-tui-version=\"5.7.0\"])[data-mode~=invalid]{color:#fff}\n"] }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TUI_SWITCH_OPTIONS, TuiSwitch, tuiSwitchOptionsProvider };
//# sourceMappingURL=taiga-ui-kit-components-switch.mjs.map