@angular/material
Version:
Angular Material
412 lines • 55.2 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, inject, ElementRef, ChangeDetectorRef, EventEmitter, HostAttributeToken, booleanAttribute, forwardRef, numberAttribute, Output, Input, ViewChild, ViewEncapsulation, Component, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
import { FocusMonitor, _IdGenerator } from '@angular/cdk/a11y';
import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
import { _MatInternalFormField } from './_internal-form-field-chunk.mjs';
import { _animationsDisabled } from './_animation-chunk.mjs';
import { _StructuralStylesLoader } from './_structural-styles-chunk.mjs';
import { MatRipple } from './_ripple-chunk.mjs';
import { BidiModule } from '@angular/cdk/bidi';
import '@angular/cdk/layout';
import '@angular/cdk/platform';
import '@angular/cdk/coercion';
const MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS = new InjectionToken('mat-slide-toggle-default-options', {
providedIn: 'root',
factory: () => ({
disableToggleValue: false,
hideIcon: false,
disabledInteractive: false
})
});
class MatSlideToggleChange {
source;
checked;
constructor(source, checked) {
this.source = source;
this.checked = checked;
}
}
class MatSlideToggle {
_elementRef = inject(ElementRef);
_focusMonitor = inject(FocusMonitor);
_changeDetectorRef = inject(ChangeDetectorRef);
defaults = inject(MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS);
_onChange = _ => {};
_onTouched = () => {};
_validatorOnChange = () => {};
_uniqueId;
_checked = false;
_createChangeEvent(isChecked) {
return new MatSlideToggleChange(this, isChecked);
}
_labelId;
get buttonId() {
return `${this.id || this._uniqueId}-button`;
}
_switchElement;
focus() {
this._switchElement.nativeElement.focus();
}
_noopAnimations = _animationsDisabled();
_focused = false;
name = null;
id;
labelPosition = 'after';
ariaLabel = null;
ariaLabelledby = null;
ariaDescribedby;
required = false;
color;
disabled = false;
fullWidth = false;
disableRipple = false;
tabIndex = 0;
get checked() {
return this._checked;
}
set checked(value) {
this._checked = value;
this._changeDetectorRef.markForCheck();
}
hideIcon;
disabledInteractive;
change = new EventEmitter();
toggleChange = new EventEmitter();
get inputId() {
return `${this.id || this._uniqueId}-input`;
}
constructor() {
inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
const tabIndex = inject(new HostAttributeToken('tabindex'), {
optional: true
});
const defaults = this.defaults;
this.tabIndex = tabIndex == null ? 0 : parseInt(tabIndex) || 0;
this.color = defaults.color || 'accent';
this.id = this._uniqueId = inject(_IdGenerator).getId('mat-mdc-slide-toggle-');
this.hideIcon = defaults.hideIcon ?? false;
this.disabledInteractive = defaults.disabledInteractive ?? false;
this._labelId = this._uniqueId + '-label';
}
ngAfterContentInit() {
this._focusMonitor.monitor(this._elementRef, true).subscribe(focusOrigin => {
if (focusOrigin === 'keyboard' || focusOrigin === 'program') {
this._focused = true;
this._changeDetectorRef.markForCheck();
} else if (!focusOrigin) {
Promise.resolve().then(() => {
this._focused = false;
this._onTouched();
this._changeDetectorRef.markForCheck();
});
}
});
}
ngOnChanges(changes) {
if (changes['required']) {
this._validatorOnChange();
}
}
ngOnDestroy() {
this._focusMonitor.stopMonitoring(this._elementRef);
}
writeValue(value) {
this.checked = !!value;
}
registerOnChange(fn) {
this._onChange = fn;
}
registerOnTouched(fn) {
this._onTouched = fn;
}
validate(control) {
return this.required && control.value !== true ? {
'required': true
} : null;
}
registerOnValidatorChange(fn) {
this._validatorOnChange = fn;
}
setDisabledState(isDisabled) {
this.disabled = isDisabled;
this._changeDetectorRef.markForCheck();
}
toggle() {
this.checked = !this.checked;
this._onChange(this.checked);
}
_emitChangeEvent() {
this._onChange(this.checked);
this.change.emit(this._createChangeEvent(this.checked));
}
_handleClick() {
if (!this.disabled) {
this.toggleChange.emit();
if (!this.defaults.disableToggleValue) {
this.checked = !this.checked;
this._onChange(this.checked);
this.change.emit(new MatSlideToggleChange(this, this.checked));
}
}
}
_getAriaLabelledBy() {
if (this.ariaLabelledby) {
return this.ariaLabelledby;
}
return this.ariaLabel ? null : this._labelId;
}
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.1.5",
ngImport: i0,
type: MatSlideToggle,
deps: [],
target: i0.ɵɵFactoryTarget.Component
});
static ɵcmp = i0.ɵɵngDeclareComponent({
minVersion: "17.0.0",
version: "22.1.5",
type: MatSlideToggle,
isStandalone: true,
selector: "mat-slide-toggle",
inputs: {
name: "name",
id: "id",
labelPosition: "labelPosition",
ariaLabel: ["aria-label", "ariaLabel"],
ariaLabelledby: ["aria-labelledby", "ariaLabelledby"],
ariaDescribedby: ["aria-describedby", "ariaDescribedby"],
required: ["required", "required", booleanAttribute],
color: "color",
disabled: ["disabled", "disabled", booleanAttribute],
fullWidth: ["fullWidth", "fullWidth", booleanAttribute],
disableRipple: ["disableRipple", "disableRipple", booleanAttribute],
tabIndex: ["tabIndex", "tabIndex", value => value == null ? 0 : numberAttribute(value)],
checked: ["checked", "checked", booleanAttribute],
hideIcon: ["hideIcon", "hideIcon", booleanAttribute],
disabledInteractive: ["disabledInteractive", "disabledInteractive", booleanAttribute]
},
outputs: {
change: "change",
toggleChange: "toggleChange"
},
host: {
properties: {
"id": "id",
"attr.tabindex": "null",
"attr.aria-label": "null",
"attr.name": "null",
"attr.aria-labelledby": "null",
"class.mat-mdc-slide-toggle-focused": "_focused",
"class.mat-mdc-slide-toggle-checked": "checked",
"class.mat-slide-toggle-full-width": "fullWidth",
"class._mat-animation-noopable": "_noopAnimations",
"class": "color ? \"mat-\" + color : \"\""
},
classAttribute: "mat-mdc-slide-toggle"
},
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MatSlideToggle),
multi: true
}, {
provide: NG_VALIDATORS,
useExisting: MatSlideToggle,
multi: true
}],
viewQueries: [{
propertyName: "_switchElement",
first: true,
predicate: ["switch"],
descendants: true
}],
exportAs: ["matSlideToggle"],
usesOnChanges: true,
ngImport: i0,
template: "<div mat-internal-form-field [labelPosition]=\"labelPosition\">\n <button\n class=\"mdc-switch\"\n role=\"switch\"\n type=\"button\"\n [class.mdc-switch--selected]=\"checked\"\n [class.mdc-switch--unselected]=\"!checked\"\n [class.mdc-switch--checked]=\"checked\"\n [class.mdc-switch--disabled]=\"disabled\"\n [class.mat-mdc-slide-toggle-disabled-interactive]=\"disabledInteractive\"\n [tabIndex]=\"disabled && !disabledInteractive ? -1 : tabIndex\"\n [disabled]=\"disabled && !disabledInteractive\"\n [attr.id]=\"buttonId\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-required]=\"required || null\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled && disabledInteractive ? 'true' : null\"\n (click)=\"_handleClick()\"\n #switch>\n <div class=\"mat-mdc-slide-toggle-touch-target\"></div>\n <span class=\"mdc-switch__track\"></span>\n <span class=\"mdc-switch__handle-track\">\n <span class=\"mdc-switch__handle\">\n <span class=\"mdc-switch__shadow\">\n <span class=\"mdc-elevation-overlay\"></span>\n </span>\n <span class=\"mdc-switch__ripple\">\n <span class=\"mat-mdc-slide-toggle-ripple mat-focus-indicator\" mat-ripple\n [matRippleTrigger]=\"switch\"\n [matRippleDisabled]=\"disableRipple || disabled\"\n [matRippleCentered]=\"true\"></span>\n </span>\n @if (!hideIcon) {\n <span class=\"mdc-switch__icons\">\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--on\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\">\n <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n </svg>\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--off\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\">\n <path d=\"M20 13H4v-2h16v2z\" />\n </svg>\n </span>\n }\n </span>\n </span>\n </button>\n\n <!--\n Clicking on the label will trigger another click event from the button.\n Stop propagation here so other listeners further up in the DOM don't execute twice.\n -->\n <label class=\"mdc-label\" [for]=\"buttonId\" [attr.id]=\"_labelId\" (click)=\"$event.stopPropagation()\">\n <ng-content></ng-content>\n </label>\n</div>\n",
styles: [".mdc-switch {\n align-items: center;\n background: none;\n border: none;\n cursor: pointer;\n display: inline-flex;\n flex-shrink: 0;\n margin: 0;\n outline: none;\n overflow: visible;\n padding: 0;\n position: relative;\n width: var(--mat-slide-toggle-track-width, 52px);\n}\n.mdc-switch.mdc-switch--disabled {\n cursor: default;\n pointer-events: none;\n}\n.mdc-switch.mat-mdc-slide-toggle-disabled-interactive {\n pointer-events: auto;\n}\n\n.mdc-switch__track {\n overflow: hidden;\n position: relative;\n width: 100%;\n height: var(--mat-slide-toggle-track-height, 32px);\n border-radius: var(--mat-slide-toggle-track-shape, var(--mat-sys-corner-full));\n}\n.mdc-switch--disabled.mdc-switch .mdc-switch__track {\n opacity: var(--mat-slide-toggle-disabled-track-opacity, 0.12);\n}\n.mdc-switch__track::before, .mdc-switch__track::after {\n border: 1px solid transparent;\n border-radius: inherit;\n box-sizing: border-box;\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n width: 100%;\n border-width: var(--mat-slide-toggle-track-outline-width, 2px);\n border-color: var(--mat-slide-toggle-track-outline-color, var(--mat-sys-outline));\n}\n.mdc-switch--selected .mdc-switch__track::before, .mdc-switch--selected .mdc-switch__track::after {\n border-width: var(--mat-slide-toggle-selected-track-outline-width, 2px);\n border-color: var(--mat-slide-toggle-selected-track-outline-color, transparent);\n}\n.mdc-switch--disabled .mdc-switch__track::before, .mdc-switch--disabled .mdc-switch__track::after {\n border-width: var(--mat-slide-toggle-disabled-unselected-track-outline-width, 2px);\n border-color: var(--mat-slide-toggle-disabled-unselected-track-outline-color, var(--mat-sys-on-surface));\n}\n@media (forced-colors: active) {\n .mdc-switch__track {\n border-color: currentColor;\n }\n}\n.mdc-switch__track::before {\n transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);\n transform: translateX(0);\n background: var(--mat-slide-toggle-unselected-track-color, var(--mat-sys-surface-variant));\n}\n.mdc-switch--selected .mdc-switch__track::before {\n transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);\n transform: translateX(100%);\n}\n[dir=rtl] .mdc-switch--selected .mdc-switch--selected .mdc-switch__track::before {\n transform: translateX(-100%);\n}\n.mdc-switch--selected .mdc-switch__track::before {\n opacity: var(--mat-slide-toggle-hidden-track-opacity, 0);\n transition: var(--mat-slide-toggle-hidden-track-transition, opacity 75ms);\n}\n.mdc-switch--unselected .mdc-switch__track::before {\n opacity: var(--mat-slide-toggle-visible-track-opacity, 1);\n transition: var(--mat-slide-toggle-visible-track-transition, opacity 75ms);\n}\n.mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::before {\n background: var(--mat-slide-toggle-unselected-hover-track-color, var(--mat-sys-surface-variant));\n}\n.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::before {\n background: var(--mat-slide-toggle-unselected-focus-track-color, var(--mat-sys-surface-variant));\n}\n.mdc-switch:enabled:active .mdc-switch__track::before {\n background: var(--mat-slide-toggle-unselected-pressed-track-color, var(--mat-sys-surface-variant));\n}\n.mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:hover:not(:focus):not(:active) .mdc-switch__track::before, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:focus:not(:active) .mdc-switch__track::before, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:active .mdc-switch__track::before, .mdc-switch.mdc-switch--disabled .mdc-switch__track::before {\n background: var(--mat-slide-toggle-disabled-unselected-track-color, var(--mat-sys-surface-variant));\n}\n.mdc-switch__track::after {\n transform: translateX(-100%);\n background: var(--mat-slide-toggle-selected-track-color, var(--mat-sys-primary));\n}\n[dir=rtl] .mdc-switch__track::after {\n transform: translateX(100%);\n}\n.mdc-switch--selected .mdc-switch__track::after {\n transform: translateX(0);\n}\n.mdc-switch--selected .mdc-switch__track::after {\n opacity: var(--mat-slide-toggle-visible-track-opacity, 1);\n transition: var(--mat-slide-toggle-visible-track-transition, opacity 75ms);\n}\n.mdc-switch--unselected .mdc-switch__track::after {\n opacity: var(--mat-slide-toggle-hidden-track-opacity, 0);\n transition: var(--mat-slide-toggle-hidden-track-transition, opacity 75ms);\n}\n.mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::after {\n background: var(--mat-slide-toggle-selected-hover-track-color, var(--mat-sys-primary));\n}\n.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::after {\n background: var(--mat-slide-toggle-selected-focus-track-color, var(--mat-sys-primary));\n}\n.mdc-switch:enabled:active .mdc-switch__track::after {\n background: var(--mat-slide-toggle-selected-pressed-track-color, var(--mat-sys-primary));\n}\n.mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:hover:not(:focus):not(:active) .mdc-switch__track::after, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:focus:not(:active) .mdc-switch__track::after, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:active .mdc-switch__track::after, .mdc-switch.mdc-switch--disabled .mdc-switch__track::after {\n background: var(--mat-slide-toggle-disabled-selected-track-color, var(--mat-sys-on-surface));\n}\n\n.mdc-switch__handle-track {\n height: 100%;\n pointer-events: none;\n position: absolute;\n top: 0;\n transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);\n left: 0;\n right: auto;\n transform: translateX(0);\n width: calc(100% - var(--mat-slide-toggle-handle-width));\n}\n[dir=rtl] .mdc-switch__handle-track {\n left: auto;\n right: 0;\n}\n.mdc-switch--selected .mdc-switch__handle-track {\n transform: translateX(100%);\n}\n[dir=rtl] .mdc-switch--selected .mdc-switch__handle-track {\n transform: translateX(-100%);\n}\n\n.mdc-switch__handle {\n display: flex;\n pointer-events: auto;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0;\n right: auto;\n transition: width 75ms cubic-bezier(0.4, 0, 0.2, 1), height 75ms cubic-bezier(0.4, 0, 0.2, 1), margin 75ms cubic-bezier(0.4, 0, 0.2, 1);\n width: var(--mat-slide-toggle-handle-width);\n height: var(--mat-slide-toggle-handle-height);\n border-radius: var(--mat-slide-toggle-handle-shape, var(--mat-sys-corner-full));\n}\n[dir=rtl] .mdc-switch__handle {\n left: auto;\n right: 0;\n}\n.mat-mdc-slide-toggle .mdc-switch--unselected .mdc-switch__handle {\n width: var(--mat-slide-toggle-unselected-handle-size, 16px);\n height: var(--mat-slide-toggle-unselected-handle-size, 16px);\n margin: var(--mat-slide-toggle-unselected-handle-horizontal-margin, 0 8px);\n}\n.mat-mdc-slide-toggle .mdc-switch--unselected .mdc-switch__handle:has(.mdc-switch__icons) {\n margin: var(--mat-slide-toggle-unselected-with-icon-handle-horizontal-margin, 0 4px);\n}\n.mat-mdc-slide-toggle .mdc-switch--selected .mdc-switch__handle {\n width: var(--mat-slide-toggle-selected-handle-size, 24px);\n height: var(--mat-slide-toggle-selected-handle-size, 24px);\n margin: var(--mat-slide-toggle-selected-handle-horizontal-margin, 0 24px);\n}\n.mat-mdc-slide-toggle .mdc-switch--selected .mdc-switch__handle:has(.mdc-switch__icons) {\n margin: var(--mat-slide-toggle-selected-with-icon-handle-horizontal-margin, 0 24px);\n}\n.mat-mdc-slide-toggle .mdc-switch__handle:has(.mdc-switch__icons) {\n width: var(--mat-slide-toggle-with-icon-handle-size, 24px);\n height: var(--mat-slide-toggle-with-icon-handle-size, 24px);\n}\n.mat-mdc-slide-toggle .mdc-switch:active:not(.mdc-switch--disabled) .mdc-switch__handle {\n width: var(--mat-slide-toggle-pressed-handle-size, 28px);\n height: var(--mat-slide-toggle-pressed-handle-size, 28px);\n}\n.mat-mdc-slide-toggle .mdc-switch--selected:active:not(.mdc-switch--disabled) .mdc-switch__handle {\n margin: var(--mat-slide-toggle-selected-pressed-handle-horizontal-margin, 0 22px);\n}\n.mat-mdc-slide-toggle .mdc-switch--unselected:active:not(.mdc-switch--disabled) .mdc-switch__handle {\n margin: var(--mat-slide-toggle-unselected-pressed-handle-horizontal-margin, 0 2px);\n}\n.mdc-switch--disabled.mdc-switch--selected .mdc-switch__handle::after {\n opacity: var(--mat-slide-toggle-disabled-selected-handle-opacity, 1);\n}\n.mdc-switch--disabled.mdc-switch--unselected .mdc-switch__handle::after {\n opacity: var(--mat-slide-toggle-disabled-unselected-handle-opacity, 0.38);\n}\n.mdc-switch__handle::before, .mdc-switch__handle::after {\n border: 1px solid transparent;\n border-radius: inherit;\n box-sizing: border-box;\n content: \"\";\n width: 100%;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n transition: background-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1), border-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);\n z-index: -1;\n}\n@media (forced-colors: active) {\n .mdc-switch__handle::before, .mdc-switch__handle::after {\n border-color: currentColor;\n }\n}\n.mdc-switch--selected:enabled .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-selected-handle-color, var(--mat-sys-on-primary));\n}\n.mdc-switch--selected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-selected-hover-handle-color, var(--mat-sys-primary-container));\n}\n.mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-selected-focus-handle-color, var(--mat-sys-primary-container));\n}\n.mdc-switch--selected:enabled:active .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-selected-pressed-handle-color, var(--mat-sys-primary-container));\n}\n.mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled.mdc-switch--selected:hover:not(:focus):not(:active) .mdc-switch__handle::after, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled.mdc-switch--selected:focus:not(:active) .mdc-switch__handle::after, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled.mdc-switch--selected:active .mdc-switch__handle::after, .mdc-switch--selected.mdc-switch--disabled .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-disabled-selected-handle-color, var(--mat-sys-surface));\n}\n.mdc-switch--unselected:enabled .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-unselected-handle-color, var(--mat-sys-outline));\n}\n.mdc-switch--unselected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-unselected-hover-handle-color, var(--mat-sys-on-surface-variant));\n}\n.mdc-switch--unselected:enabled:focus:not(:active) .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-unselected-focus-handle-color, var(--mat-sys-on-surface-variant));\n}\n.mdc-switch--unselected:enabled:active .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-unselected-pressed-handle-color, var(--mat-sys-on-surface-variant));\n}\n.mdc-switch--unselected.mdc-switch--disabled .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-disabled-unselected-handle-color, var(--mat-sys-on-surface));\n}\n.mdc-switch__handle::before {\n background: var(--mat-slide-toggle-handle-surface-color);\n}\n\n.mdc-switch__shadow {\n border-radius: inherit;\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n}\n.mdc-switch:enabled .mdc-switch__shadow {\n box-shadow: var(--mat-slide-toggle-handle-elevation-shadow);\n}\n.mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:hover:not(:focus):not(:active) .mdc-switch__shadow, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:focus:not(:active) .mdc-switch__shadow, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:active .mdc-switch__shadow, .mdc-switch.mdc-switch--disabled .mdc-switch__shadow {\n box-shadow: var(--mat-slide-toggle-disabled-handle-elevation-shadow);\n}\n\n.mdc-switch__ripple {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n z-index: -1;\n width: var(--mat-slide-toggle-state-layer-size, 40px);\n height: var(--mat-slide-toggle-state-layer-size, 40px);\n}\n.mdc-switch__ripple::after {\n content: \"\";\n opacity: 0;\n}\n.mdc-switch--disabled .mdc-switch__ripple::after {\n display: none;\n}\n.mat-mdc-slide-toggle-disabled-interactive .mdc-switch__ripple::after {\n display: block;\n}\n.mdc-switch:hover .mdc-switch__ripple::after {\n transition: 75ms opacity cubic-bezier(0, 0, 0.2, 1);\n}\n.mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:enabled:focus .mdc-switch__ripple::after, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:enabled:active .mdc-switch__ripple::after, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:enabled:hover:not(:focus) .mdc-switch__ripple::after, .mdc-switch--unselected:enabled:hover:not(:focus) .mdc-switch__ripple::after {\n background: var(--mat-slide-toggle-unselected-hover-state-layer-color, var(--mat-sys-on-surface));\n opacity: var(--mat-slide-toggle-unselected-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity));\n}\n.mdc-switch--unselected:enabled:focus .mdc-switch__ripple::after {\n background: var(--mat-slide-toggle-unselected-focus-state-layer-color, var(--mat-sys-on-surface));\n opacity: var(--mat-slide-toggle-unselected-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity));\n}\n.mdc-switch--unselected:enabled:active .mdc-switch__ripple::after {\n background: var(--mat-slide-toggle-unselected-pressed-state-layer-color, var(--mat-sys-on-surface));\n opacity: var(--mat-slide-toggle-unselected-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity));\n transition: opacity 75ms linear;\n}\n.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::after {\n background: var(--mat-slide-toggle-selected-hover-state-layer-color, var(--mat-sys-primary));\n opacity: var(--mat-slide-toggle-selected-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity));\n}\n.mdc-switch--selected:enabled:focus .mdc-switch__ripple::after {\n background: var(--mat-slide-toggle-selected-focus-state-layer-color, var(--mat-sys-primary));\n opacity: var(--mat-slide-toggle-selected-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity));\n}\n.mdc-switch--selected:enabled:active .mdc-switch__ripple::after {\n background: var(--mat-slide-toggle-selected-pressed-state-layer-color, var(--mat-sys-primary));\n opacity: var(--mat-slide-toggle-selected-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity));\n transition: opacity 75ms linear;\n}\n\n.mdc-switch__icons {\n position: relative;\n height: 100%;\n width: 100%;\n z-index: 1;\n transform: translateZ(0);\n}\n.mdc-switch--disabled.mdc-switch--unselected .mdc-switch__icons {\n opacity: var(--mat-slide-toggle-disabled-unselected-icon-opacity, 0.38);\n}\n.mdc-switch--disabled.mdc-switch--selected .mdc-switch__icons {\n opacity: var(--mat-slide-toggle-disabled-selected-icon-opacity, 0.38);\n}\n\n.mdc-switch__icon {\n bottom: 0;\n left: 0;\n margin: auto;\n position: absolute;\n right: 0;\n top: 0;\n opacity: 0;\n transition: opacity 30ms 0ms cubic-bezier(0.4, 0, 1, 1);\n}\n.mdc-switch--unselected .mdc-switch__icon {\n width: var(--mat-slide-toggle-unselected-icon-size, 16px);\n height: var(--mat-slide-toggle-unselected-icon-size, 16px);\n fill: var(--mat-slide-toggle-unselected-icon-color, var(--mat-sys-surface-variant));\n}\n.mdc-switch--unselected.mdc-switch--disabled .mdc-switch__icon {\n fill: var(--mat-slide-toggle-disabled-unselected-icon-color, var(--mat-sys-surface-variant));\n}\n.mdc-switch--selected .mdc-switch__icon {\n width: var(--mat-slide-toggle-selected-icon-size, 16px);\n height: var(--mat-slide-toggle-selected-icon-size, 16px);\n fill: var(--mat-slide-toggle-selected-icon-color, var(--mat-sys-on-primary-container));\n}\n.mdc-switch--selected.mdc-switch--disabled .mdc-switch__icon {\n fill: var(--mat-slide-toggle-disabled-selected-icon-color, var(--mat-sys-on-surface));\n}\n\n.mdc-switch--selected .mdc-switch__icon--on,\n.mdc-switch--unselected .mdc-switch__icon--off {\n opacity: 1;\n transition: opacity 45ms 30ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.mat-mdc-slide-toggle {\n -webkit-user-select: none;\n user-select: none;\n display: inline-block;\n -webkit-tap-highlight-color: transparent;\n outline: 0;\n}\n.mat-mdc-slide-toggle .mat-icon {\n min-height: fit-content;\n flex-shrink: 0;\n}\n.mat-mdc-slide-toggle .mat-mdc-slide-toggle-ripple,\n.mat-mdc-slide-toggle .mdc-switch__ripple::after {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n border-radius: 50%;\n pointer-events: none;\n}\n.mat-mdc-slide-toggle .mat-mdc-slide-toggle-ripple:not(:empty),\n.mat-mdc-slide-toggle .mdc-switch__ripple::after:not(:empty) {\n transform: translateZ(0);\n}\n.mat-mdc-slide-toggle.mat-mdc-slide-toggle-focused .mat-focus-indicator::before {\n content: \"\";\n}\n.mat-mdc-slide-toggle .mat-internal-form-field {\n color: var(--mat-slide-toggle-label-text-color, var(--mat-sys-on-surface));\n font-family: var(--mat-slide-toggle-label-text-font, var(--mat-sys-body-medium-font));\n line-height: var(--mat-slide-toggle-label-text-line-height, var(--mat-sys-body-medium-line-height));\n font-size: var(--mat-slide-toggle-label-text-size, var(--mat-sys-body-medium-size));\n letter-spacing: var(--mat-slide-toggle-label-text-tracking, var(--mat-sys-body-medium-tracking));\n font-weight: var(--mat-slide-toggle-label-text-weight, var(--mat-sys-body-medium-weight));\n}\n.mat-mdc-slide-toggle .mat-ripple-element {\n opacity: 0.12;\n}\n.mat-mdc-slide-toggle .mat-focus-indicator::before {\n border-radius: 50%;\n}\n.mat-mdc-slide-toggle._mat-animation-noopable .mdc-switch__handle-track,\n.mat-mdc-slide-toggle._mat-animation-noopable .mdc-switch__icon,\n.mat-mdc-slide-toggle._mat-animation-noopable .mdc-switch__handle::before,\n.mat-mdc-slide-toggle._mat-animation-noopable .mdc-switch__handle::after,\n.mat-mdc-slide-toggle._mat-animation-noopable .mdc-switch__track::before,\n.mat-mdc-slide-toggle._mat-animation-noopable .mdc-switch__track::after {\n transition: none;\n}\n.mat-mdc-slide-toggle .mdc-switch:enabled + .mdc-label {\n cursor: pointer;\n}\n.mat-mdc-slide-toggle .mdc-switch--disabled + label {\n color: var(--mat-slide-toggle-disabled-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-slide-toggle label:empty {\n display: none;\n}\n\n.mat-slide-toggle-full-width {\n width: 100%;\n}\n.mat-slide-toggle-full-width .mat-internal-form-field {\n width: 100%;\n justify-content: space-between;\n}\n.mat-slide-toggle-full-width .mat-internal-form-field label {\n margin: 0;\n flex-grow: 1;\n text-align: end;\n}\n.mat-slide-toggle-full-width .mdc-form-field--align-end label {\n text-align: start;\n}\n\n.mat-mdc-slide-toggle-touch-target {\n position: absolute;\n top: 50%;\n left: 50%;\n height: var(--mat-slide-toggle-touch-target-size, 48px);\n width: 100%;\n transform: translate(-50%, -50%);\n display: var(--mat-slide-toggle-touch-target-display, block);\n}\n[dir=rtl] .mat-mdc-slide-toggle-touch-target {\n left: auto;\n right: 50%;\n transform: translate(50%, -50%);\n}\n"],
dependencies: [{
kind: "directive",
type: MatRipple,
selector: "[mat-ripple], [matRipple]",
inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"],
exportAs: ["matRipple"]
}, {
kind: "component",
type: _MatInternalFormField,
selector: "[mat-internal-form-field]",
inputs: ["labelPosition"]
}],
encapsulation: i0.ViewEncapsulation.None
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.1.5",
ngImport: i0,
type: MatSlideToggle,
decorators: [{
type: Component,
args: [{
selector: 'mat-slide-toggle',
host: {
'class': 'mat-mdc-slide-toggle',
'[id]': 'id',
'[attr.tabindex]': 'null',
'[attr.aria-label]': 'null',
'[attr.name]': 'null',
'[attr.aria-labelledby]': 'null',
'[class.mat-mdc-slide-toggle-focused]': '_focused',
'[class.mat-mdc-slide-toggle-checked]': 'checked',
'[class.mat-slide-toggle-full-width]': 'fullWidth',
'[class._mat-animation-noopable]': '_noopAnimations',
'[class]': 'color ? "mat-" + color : ""'
},
exportAs: 'matSlideToggle',
encapsulation: ViewEncapsulation.None,
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MatSlideToggle),
multi: true
}, {
provide: NG_VALIDATORS,
useExisting: MatSlideToggle,
multi: true
}],
imports: [MatRipple, _MatInternalFormField],
template: "<div mat-internal-form-field [labelPosition]=\"labelPosition\">\n <button\n class=\"mdc-switch\"\n role=\"switch\"\n type=\"button\"\n [class.mdc-switch--selected]=\"checked\"\n [class.mdc-switch--unselected]=\"!checked\"\n [class.mdc-switch--checked]=\"checked\"\n [class.mdc-switch--disabled]=\"disabled\"\n [class.mat-mdc-slide-toggle-disabled-interactive]=\"disabledInteractive\"\n [tabIndex]=\"disabled && !disabledInteractive ? -1 : tabIndex\"\n [disabled]=\"disabled && !disabledInteractive\"\n [attr.id]=\"buttonId\"\n [attr.name]=\"name\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-labelledby]=\"_getAriaLabelledBy()\"\n [attr.aria-describedby]=\"ariaDescribedby\"\n [attr.aria-required]=\"required || null\"\n [attr.aria-checked]=\"checked\"\n [attr.aria-disabled]=\"disabled && disabledInteractive ? 'true' : null\"\n (click)=\"_handleClick()\"\n #switch>\n <div class=\"mat-mdc-slide-toggle-touch-target\"></div>\n <span class=\"mdc-switch__track\"></span>\n <span class=\"mdc-switch__handle-track\">\n <span class=\"mdc-switch__handle\">\n <span class=\"mdc-switch__shadow\">\n <span class=\"mdc-elevation-overlay\"></span>\n </span>\n <span class=\"mdc-switch__ripple\">\n <span class=\"mat-mdc-slide-toggle-ripple mat-focus-indicator\" mat-ripple\n [matRippleTrigger]=\"switch\"\n [matRippleDisabled]=\"disableRipple || disabled\"\n [matRippleCentered]=\"true\"></span>\n </span>\n @if (!hideIcon) {\n <span class=\"mdc-switch__icons\">\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--on\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\">\n <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n </svg>\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--off\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\">\n <path d=\"M20 13H4v-2h16v2z\" />\n </svg>\n </span>\n }\n </span>\n </span>\n </button>\n\n <!--\n Clicking on the label will trigger another click event from the button.\n Stop propagation here so other listeners further up in the DOM don't execute twice.\n -->\n <label class=\"mdc-label\" [for]=\"buttonId\" [attr.id]=\"_labelId\" (click)=\"$event.stopPropagation()\">\n <ng-content></ng-content>\n </label>\n</div>\n",
styles: [".mdc-switch {\n align-items: center;\n background: none;\n border: none;\n cursor: pointer;\n display: inline-flex;\n flex-shrink: 0;\n margin: 0;\n outline: none;\n overflow: visible;\n padding: 0;\n position: relative;\n width: var(--mat-slide-toggle-track-width, 52px);\n}\n.mdc-switch.mdc-switch--disabled {\n cursor: default;\n pointer-events: none;\n}\n.mdc-switch.mat-mdc-slide-toggle-disabled-interactive {\n pointer-events: auto;\n}\n\n.mdc-switch__track {\n overflow: hidden;\n position: relative;\n width: 100%;\n height: var(--mat-slide-toggle-track-height, 32px);\n border-radius: var(--mat-slide-toggle-track-shape, var(--mat-sys-corner-full));\n}\n.mdc-switch--disabled.mdc-switch .mdc-switch__track {\n opacity: var(--mat-slide-toggle-disabled-track-opacity, 0.12);\n}\n.mdc-switch__track::before, .mdc-switch__track::after {\n border: 1px solid transparent;\n border-radius: inherit;\n box-sizing: border-box;\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n width: 100%;\n border-width: var(--mat-slide-toggle-track-outline-width, 2px);\n border-color: var(--mat-slide-toggle-track-outline-color, var(--mat-sys-outline));\n}\n.mdc-switch--selected .mdc-switch__track::before, .mdc-switch--selected .mdc-switch__track::after {\n border-width: var(--mat-slide-toggle-selected-track-outline-width, 2px);\n border-color: var(--mat-slide-toggle-selected-track-outline-color, transparent);\n}\n.mdc-switch--disabled .mdc-switch__track::before, .mdc-switch--disabled .mdc-switch__track::after {\n border-width: var(--mat-slide-toggle-disabled-unselected-track-outline-width, 2px);\n border-color: var(--mat-slide-toggle-disabled-unselected-track-outline-color, var(--mat-sys-on-surface));\n}\n@media (forced-colors: active) {\n .mdc-switch__track {\n border-color: currentColor;\n }\n}\n.mdc-switch__track::before {\n transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);\n transform: translateX(0);\n background: var(--mat-slide-toggle-unselected-track-color, var(--mat-sys-surface-variant));\n}\n.mdc-switch--selected .mdc-switch__track::before {\n transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);\n transform: translateX(100%);\n}\n[dir=rtl] .mdc-switch--selected .mdc-switch--selected .mdc-switch__track::before {\n transform: translateX(-100%);\n}\n.mdc-switch--selected .mdc-switch__track::before {\n opacity: var(--mat-slide-toggle-hidden-track-opacity, 0);\n transition: var(--mat-slide-toggle-hidden-track-transition, opacity 75ms);\n}\n.mdc-switch--unselected .mdc-switch__track::before {\n opacity: var(--mat-slide-toggle-visible-track-opacity, 1);\n transition: var(--mat-slide-toggle-visible-track-transition, opacity 75ms);\n}\n.mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::before {\n background: var(--mat-slide-toggle-unselected-hover-track-color, var(--mat-sys-surface-variant));\n}\n.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::before {\n background: var(--mat-slide-toggle-unselected-focus-track-color, var(--mat-sys-surface-variant));\n}\n.mdc-switch:enabled:active .mdc-switch__track::before {\n background: var(--mat-slide-toggle-unselected-pressed-track-color, var(--mat-sys-surface-variant));\n}\n.mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:hover:not(:focus):not(:active) .mdc-switch__track::before, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:focus:not(:active) .mdc-switch__track::before, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:active .mdc-switch__track::before, .mdc-switch.mdc-switch--disabled .mdc-switch__track::before {\n background: var(--mat-slide-toggle-disabled-unselected-track-color, var(--mat-sys-surface-variant));\n}\n.mdc-switch__track::after {\n transform: translateX(-100%);\n background: var(--mat-slide-toggle-selected-track-color, var(--mat-sys-primary));\n}\n[dir=rtl] .mdc-switch__track::after {\n transform: translateX(100%);\n}\n.mdc-switch--selected .mdc-switch__track::after {\n transform: translateX(0);\n}\n.mdc-switch--selected .mdc-switch__track::after {\n opacity: var(--mat-slide-toggle-visible-track-opacity, 1);\n transition: var(--mat-slide-toggle-visible-track-transition, opacity 75ms);\n}\n.mdc-switch--unselected .mdc-switch__track::after {\n opacity: var(--mat-slide-toggle-hidden-track-opacity, 0);\n transition: var(--mat-slide-toggle-hidden-track-transition, opacity 75ms);\n}\n.mdc-switch:enabled:hover:not(:focus):not(:active) .mdc-switch__track::after {\n background: var(--mat-slide-toggle-selected-hover-track-color, var(--mat-sys-primary));\n}\n.mdc-switch:enabled:focus:not(:active) .mdc-switch__track::after {\n background: var(--mat-slide-toggle-selected-focus-track-color, var(--mat-sys-primary));\n}\n.mdc-switch:enabled:active .mdc-switch__track::after {\n background: var(--mat-slide-toggle-selected-pressed-track-color, var(--mat-sys-primary));\n}\n.mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:hover:not(:focus):not(:active) .mdc-switch__track::after, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:focus:not(:active) .mdc-switch__track::after, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:active .mdc-switch__track::after, .mdc-switch.mdc-switch--disabled .mdc-switch__track::after {\n background: var(--mat-slide-toggle-disabled-selected-track-color, var(--mat-sys-on-surface));\n}\n\n.mdc-switch__handle-track {\n height: 100%;\n pointer-events: none;\n position: absolute;\n top: 0;\n transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);\n left: 0;\n right: auto;\n transform: translateX(0);\n width: calc(100% - var(--mat-slide-toggle-handle-width));\n}\n[dir=rtl] .mdc-switch__handle-track {\n left: auto;\n right: 0;\n}\n.mdc-switch--selected .mdc-switch__handle-track {\n transform: translateX(100%);\n}\n[dir=rtl] .mdc-switch--selected .mdc-switch__handle-track {\n transform: translateX(-100%);\n}\n\n.mdc-switch__handle {\n display: flex;\n pointer-events: auto;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0;\n right: auto;\n transition: width 75ms cubic-bezier(0.4, 0, 0.2, 1), height 75ms cubic-bezier(0.4, 0, 0.2, 1), margin 75ms cubic-bezier(0.4, 0, 0.2, 1);\n width: var(--mat-slide-toggle-handle-width);\n height: var(--mat-slide-toggle-handle-height);\n border-radius: var(--mat-slide-toggle-handle-shape, var(--mat-sys-corner-full));\n}\n[dir=rtl] .mdc-switch__handle {\n left: auto;\n right: 0;\n}\n.mat-mdc-slide-toggle .mdc-switch--unselected .mdc-switch__handle {\n width: var(--mat-slide-toggle-unselected-handle-size, 16px);\n height: var(--mat-slide-toggle-unselected-handle-size, 16px);\n margin: var(--mat-slide-toggle-unselected-handle-horizontal-margin, 0 8px);\n}\n.mat-mdc-slide-toggle .mdc-switch--unselected .mdc-switch__handle:has(.mdc-switch__icons) {\n margin: var(--mat-slide-toggle-unselected-with-icon-handle-horizontal-margin, 0 4px);\n}\n.mat-mdc-slide-toggle .mdc-switch--selected .mdc-switch__handle {\n width: var(--mat-slide-toggle-selected-handle-size, 24px);\n height: var(--mat-slide-toggle-selected-handle-size, 24px);\n margin: var(--mat-slide-toggle-selected-handle-horizontal-margin, 0 24px);\n}\n.mat-mdc-slide-toggle .mdc-switch--selected .mdc-switch__handle:has(.mdc-switch__icons) {\n margin: var(--mat-slide-toggle-selected-with-icon-handle-horizontal-margin, 0 24px);\n}\n.mat-mdc-slide-toggle .mdc-switch__handle:has(.mdc-switch__icons) {\n width: var(--mat-slide-toggle-with-icon-handle-size, 24px);\n height: var(--mat-slide-toggle-with-icon-handle-size, 24px);\n}\n.mat-mdc-slide-toggle .mdc-switch:active:not(.mdc-switch--disabled) .mdc-switch__handle {\n width: var(--mat-slide-toggle-pressed-handle-size, 28px);\n height: var(--mat-slide-toggle-pressed-handle-size, 28px);\n}\n.mat-mdc-slide-toggle .mdc-switch--selected:active:not(.mdc-switch--disabled) .mdc-switch__handle {\n margin: var(--mat-slide-toggle-selected-pressed-handle-horizontal-margin, 0 22px);\n}\n.mat-mdc-slide-toggle .mdc-switch--unselected:active:not(.mdc-switch--disabled) .mdc-switch__handle {\n margin: var(--mat-slide-toggle-unselected-pressed-handle-horizontal-margin, 0 2px);\n}\n.mdc-switch--disabled.mdc-switch--selected .mdc-switch__handle::after {\n opacity: var(--mat-slide-toggle-disabled-selected-handle-opacity, 1);\n}\n.mdc-switch--disabled.mdc-switch--unselected .mdc-switch__handle::after {\n opacity: var(--mat-slide-toggle-disabled-unselected-handle-opacity, 0.38);\n}\n.mdc-switch__handle::before, .mdc-switch__handle::after {\n border: 1px solid transparent;\n border-radius: inherit;\n box-sizing: border-box;\n content: \"\";\n width: 100%;\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n transition: background-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1), border-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);\n z-index: -1;\n}\n@media (forced-colors: active) {\n .mdc-switch__handle::before, .mdc-switch__handle::after {\n border-color: currentColor;\n }\n}\n.mdc-switch--selected:enabled .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-selected-handle-color, var(--mat-sys-on-primary));\n}\n.mdc-switch--selected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-selected-hover-handle-color, var(--mat-sys-primary-container));\n}\n.mdc-switch--selected:enabled:focus:not(:active) .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-selected-focus-handle-color, var(--mat-sys-primary-container));\n}\n.mdc-switch--selected:enabled:active .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-selected-pressed-handle-color, var(--mat-sys-primary-container));\n}\n.mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled.mdc-switch--selected:hover:not(:focus):not(:active) .mdc-switch__handle::after, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled.mdc-switch--selected:focus:not(:active) .mdc-switch__handle::after, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled.mdc-switch--selected:active .mdc-switch__handle::after, .mdc-switch--selected.mdc-switch--disabled .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-disabled-selected-handle-color, var(--mat-sys-surface));\n}\n.mdc-switch--unselected:enabled .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-unselected-handle-color, var(--mat-sys-outline));\n}\n.mdc-switch--unselected:enabled:hover:not(:focus):not(:active) .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-unselected-hover-handle-color, var(--mat-sys-on-surface-variant));\n}\n.mdc-switch--unselected:enabled:focus:not(:active) .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-unselected-focus-handle-color, var(--mat-sys-on-surface-variant));\n}\n.mdc-switch--unselected:enabled:active .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-unselected-pressed-handle-color, var(--mat-sys-on-surface-variant));\n}\n.mdc-switch--unselected.mdc-switch--disabled .mdc-switch__handle::after {\n background: var(--mat-slide-toggle-disabled-unselected-handle-color, var(--mat-sys-on-surface));\n}\n.mdc-switch__handle::before {\n background: var(--mat-slide-toggle-handle-surface-color);\n}\n\n.mdc-switch__shadow {\n border-radius: inherit;\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n}\n.mdc-switch:enabled .mdc-switch__shadow {\n box-shadow: var(--mat-slide-toggle-handle-elevation-shadow);\n}\n.mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:hover:not(:focus):not(:active) .mdc-switch__shadow, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:focus:not(:active) .mdc-switch__shadow, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:active .mdc-switch__shadow, .mdc-switch.mdc-switch--disabled .mdc-switch__shadow {\n box-shadow: var(--mat-slide-toggle-disabled-handle-elevation-shadow);\n}\n\n.mdc-switch__ripple {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n z-index: -1;\n width: var(--mat-slide-toggle-state-layer-size, 40px);\n height: var(--mat-slide-toggle-state-layer-size, 40px);\n}\n.mdc-switch__ripple::after {\n content: \"\";\n opacity: 0;\n}\n.mdc-switch--disabled .mdc-switch__ripple::after {\n display: none;\n}\n.mat-mdc-slide-toggle-disabled-interactive .mdc-switch__ripple::after {\n display: block;\n}\n.mdc-switch:hover .mdc-switch__ripple::after {\n transition: 75ms opacity cubic-bezier(0, 0, 0.2, 1);\n}\n.mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:enabled:focus .mdc-switch__ripple::after, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:enabled:active .mdc-switch__ripple::after, .mat-mdc-slide-toggle-disabled-interactive.mdc-switch--disabled:enabled:hover:not(:focus) .mdc-switch__ripple::after, .mdc-switch--unselected:enabled:hover:not(:focus) .mdc-switch__ripple::after {\n background: var(--mat-slide-toggle-unselected-hover-state-layer-color, var(--mat-sys-on-surface));\n opacity: var(--mat-slide-toggle-unselected-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity));\n}\n.mdc-switch--unselected:enabled:focus .mdc-switch__ripple::after {\n background: var(--mat-slide-toggle-unselected-focus-state-layer-color, var(--mat-sys-on-surface));\n opacity: var(--mat-slide-toggle-unselected-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity));\n}\n.mdc-switch--unselected:enabled:active .mdc-switch__ripple::after {\n background: var(--mat-slide-toggle-unselected-pressed-state-layer-color, var(--mat-sys-on-surface));\n opacity: var(--mat-slide-toggle-unselected-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity));\n transition: opacity 75ms linear;\n}\n.mdc-switch--selected:enabled:hover:not(:focus) .mdc-switch__ripple::after {\n background: var(--mat-slide-toggle-selected-hover-state-layer-color, var(--mat-sys-primary));\n opacity: var(--mat-slide-toggle-selected-hover-state-layer-opacity, var(--mat-sys-hover-state-layer-opacity));\n}\n.mdc-switch--selected:enabled:focus .mdc-switch__ripple::after {\n background: var(--mat-slide-toggle-selected-focus-state-layer-color, var(--mat-sys-primary));\n opacity: var(--mat-slide-toggle-selected-focus-state-layer-opacity, var(--mat-sys-focus-state-layer-opacity));\n}\n.mdc-switch--selected:enabled:active .mdc-switch__ripple::after {\n background: var(--mat-slide-toggle-selected-pressed-state-layer-color, var(--mat-sys-primary));\n opacity: var(--mat-slide-toggle-selected-pressed-state-layer-opacity, var(--mat-sys-pressed-state-layer-opacity));\n transition: opacity 75ms linear;\n}\n\n.mdc-switch__icons {\n position: relative;\n height: 100%;\n width: 100%;\n z-index: 1;\n transform: translateZ(0);\n}\n.mdc-switch--disabled.mdc-switch--unselected .mdc-switch__icons {\n opacity: var(--mat-slide-toggle-disabled-unselected-icon-opacity, 0.38);\n}\n.mdc-switch--disabled.mdc-switch--selected .mdc-switch__icons {\n opacity: var(--mat-slide-toggle-disabled-selected-icon-opacity, 0.38);\n}\n\n.mdc-switch__icon {\n bottom: 0;\n left: 0;\n margin: auto;\n position: absolute;\n right: 0;\n top: 0;\n opacity: 0;\n transition: opacity 30ms 0ms cubic-bezier(0.4, 0, 1, 1);\n}\n.mdc-switch--unselected .mdc-switch__icon {\n width: var(--mat-slide-toggle-unselected-icon-size, 16px);\n height: var(--mat-slide-toggle-unselected-icon-size, 16px);\n fill: var(--mat-slide-toggle-unselected-icon-color, var(--mat-sys-surface-variant));\n}\n.mdc-switch--unselected.mdc-switch--disabled .mdc-switch__icon {\n fill: var(--mat-slide-toggle-disabled-unselected-icon-color, var(--mat-sys-surface-variant));\n}\n.mdc-switch--selected .mdc-switch__icon {\n width: var(--mat-slide-toggle-selected-icon-size, 16px);\n height: var(--mat-slide-toggle-selected-icon-size, 16px);\n fill: var(--mat-slide-toggle-selected-icon-color, var(--mat-sys-on-primary-container));\n}\n.mdc-switch--selected.mdc-switch--disabled .mdc-switch__icon {\n fill: var(--mat-slide-toggle-disabled-selected-icon-color, var(--mat-sys-on-surface));\n}\n\n.mdc-switch--selected .mdc-switch__icon--on,\n.mdc-switch--unselected .mdc-switch__icon--off {\n opacity: 1;\n transition: opacity 45ms 30ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.mat-mdc-slide-toggle {\n -webkit-user-select: none;\n user-select: none;\n display: inline-block;\n -webkit-tap-highlight-color: transparent;\n outline: 0;\n}\n.mat-mdc-slide-toggle .mat-icon {\n min-height: fit-content;\n flex-shrink: 0;\n}\n.mat-mdc-slide-toggle .mat-mdc-slide-toggle-ripple,\n.mat-mdc-slide-toggle .mdc-switch__ripple::after {\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: absolute;\n border-radius: 50%;\n pointer-events: none;\n}\n.mat-mdc-slide-toggle .mat-mdc-slide-toggle-ripple:not(:empty),\n.mat-mdc-slide-toggle .mdc-switch__ripple::after:not(:empty) {\n transform: translateZ(0);\n}\n.mat-mdc-slide-toggle.mat-mdc-slide-toggle-focused .mat-focus-indicator::before {\n content: \"\";\n}\n.mat-mdc-slide-toggle .mat-internal-form-field {\n color: var(--mat-slide-toggle-label-text-color, var(--mat-sys-on-surface));\n font-family: var(--mat-slide-toggle-label-text-font, var(--mat-sys-body-medium-font));\n line-height: var(--mat-slide-toggle-label-text-line-height, var(--mat-sys-body-medium-line-height));\n font-size: var(--mat-slide-toggle-label-text-size, var(--mat-sys-body-medium-size));\n letter-spacing: var(--mat-slide-toggle-label-text-tracking, var(--mat-sys-body-medium-tracking));\n font-weight: var(--mat-slide-toggle-label-text-weight, var(--mat-sys-body-medium-weight));\n}\n.mat-mdc-slide-toggle .mat-ripple-element {\n opacity: 0.12;\n}\n.mat-mdc-slide-toggle .mat-focus-indicator::before {\n border-radius: 50%;\n}\n.mat-mdc-slide-toggle._mat-animation-noopable .mdc-switch__handle-track,\n.mat-mdc-slide-toggle._mat-animation-noopable .mdc-switch__icon,\n.mat-mdc-slide-toggle._mat-animation-noopable .mdc-switch__handle::before,\n.mat-mdc-slide-toggle._mat-animation-noopable .mdc-switch__handle::after,\n.mat-mdc-slide-toggle._mat-animation-noopable .mdc-switch__track::before,\n.mat-mdc-slide-toggle._mat-animation-noopable .mdc-switch__track::after {\n transition: none;\n}\n.mat-mdc-slide-toggle .mdc-switch:enabled + .mdc-label {\n cursor: pointer;\n}\n.mat-mdc-slide-toggle .mdc-switch--disabled + label {\n color: var(--mat-slide-toggle-disabled-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-slide-toggle label:empty {\n display: none;\n}\n\n.mat-slide-toggle-full-width {\n width: 100%;\n}\n.mat-slide-toggle-full-width .mat-internal-form-field {\n width: 100%;\n justify-content: space-between;\n}\n.mat-slide-toggle-full-width .mat-internal-form-field label {\n margin: 0;\n flex-grow: 1;\n text-align: end;\n}\n.mat-slide-toggle-full-width .mdc-form-field--align-end label {\n text-align: start;\n}\n\n.mat-mdc-slide-toggle-touch-target {\n position: absolute;\n top: 50%;\n left: 50%;\n height: var(--mat-slide-toggle-touch-target-size, 48px);\n width: 100%;\n transform: translate(-50%, -50%);\n display: var(--mat-slide-toggle-touch-target-display, block);\n}\n[dir=rtl] .mat-mdc-slide-toggle-touch-target {\n left: auto;\n right: 50%;\n transform: translate(50%, -50%);\n}\n"]
}]
}],
ctorParameters: () => [],
propDecorators: {
_switchElement: [{
type: ViewChild,
args: ['switch']
}],
name: [{
type: Input
}],
id: [{
type: Input
}],
labelPosition: [{
type: Input
}],
ariaLabel: [{
type: Input,
args: ['aria-label']
}],
ariaLabelledby: [{
type: Input,
args: ['aria-labelledby']
}],
ariaDescribedby: [{
type: Input,
args: ['aria-describedby']
}],
required: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
color: [{
type: Input
}],
disabled: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
fullWidth: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
disableRipple: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
tabIndex: [{
type: Input,
args: [{
transform: value => value == null ? 0 : numberAttribute(value)
}]
}],
checked: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
hideIcon: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
disabledInteractive: [{
type: Input,
args: [{
transform: booleanAttribute
}]
}],
change: [{
type: Output
}],
toggleChange: [{
type: Output
}]
}
});
class MatSlideToggleModule {
static ɵfac = i0.ɵɵngDeclareFactory({
minVersion: "12.0.0",
version: "22.1.5",
ngImport: i0,
type: MatSlideToggleModule,
deps: [],
target: i0.ɵɵFactoryTarget.NgModule
});
static ɵmod = i0.ɵɵngDeclareNgModule({
minVersion: "14.0.0",
version: "22.1.5",
ngImport: i0,
type: MatSlideToggleModule,
imports: [MatSlideToggle],
exports: [MatSlideToggle, BidiModule]
});
static ɵinj = i0.ɵɵngDeclareInjector({
minVersion: "12.0.0",
version: "22.1.5",
ngImport: i0,
type: MatSlideToggleModule,
imports: [MatSlideToggle, BidiModule]
});
}
i0.ɵɵngDeclareClassMetadata({
minVersion: "12.0.0",
version: "22.1.5",
ngImport: i0,
type: MatSlideToggleModule,
decorators: [{
type: NgModule,
args: [{
imports: [MatSlideToggle],
exports: [MatSlideToggle, BidiModule]
}]
}]
});
export { MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS, MatSlideToggle, MatSlideToggleChange, MatSlideToggleModule };
//# sourceMappingURL=slide-toggle.mjs.map