@skyux/forms 12.28.0 → 12.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4696,14 +4696,14 @@ class SkyToggleSwitchComponent {
4696
4696
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SkyToggleSwitchComponent, isStandalone: false, selector: "sky-toggle-switch", inputs: { ariaLabel: "ariaLabel", checked: "checked", disabled: "disabled", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", tabIndex: "tabIndex", labelText: "labelText", labelHidden: ["labelHidden", "labelHidden", booleanAttribute], helpKey: "helpKey" }, outputs: { toggleChange: "toggleChange" }, providers: [
4697
4697
  SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
4698
4698
  SKY_TOGGLE_SWITCH_VALIDATOR,
4699
- ], queries: [{ propertyName: "labelComponents", predicate: SkyToggleSwitchLabelComponent }], ngImport: i0, template: "<span\n class=\"sky-toggle-switch\"\n [ngClass]=\"{\n 'sky-toggle-switch-with-label': hasLabelComponent || labelText\n }\"\n>\n <button\n #toggle=\"skyId\"\n class=\"sky-toggle-switch-button\"\n role=\"switch\"\n type=\"button\"\n skyId\n [attr.aria-checked]=\"checked\"\n [attr.aria-label]=\"labelText || ariaLabel || null\"\n [attr.aria-labelledby]=\"\n !ariaLabel && (hasLabelComponent || labelText) ? labelId : null\n \"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-toggle-switch-checked': checked,\n 'sky-toggle-switch-disabled': disabled\n }\"\n [tabIndex]=\"tabIndex\"\n (blur)=\"onButtonBlur()\"\n (click)=\"onButtonClick($event)\"\n >\n <div aria-hidden=\"true\" class=\"sky-toggle-switch-switch\">\n <i\n class=\"sky-toggle-switch-indicator\"\n [ngClass]=\"{\n 'sky-toggle-switch-transition': enableIndicatorAnimation\n }\"\n >&nbsp;</i\n >\n </div>\n </button>\n <span>\n @if (hasLabelComponent || labelText) {\n <label\n class=\"sky-toggle-switch-label\"\n [for]=\"toggle.id\"\n [attr.id]=\"labelId\"\n >\n @if (labelText) {\n @if (!labelHidden) {\n <span class=\"sky-toggle-switch-label-text\">{{ labelText }}</span>\n }\n } @else {\n <ng-content select=\"sky-toggle-switch-label\" />\n }\n </label>\n }\n <span class=\"sky-control-help-container\">\n @if (labelText && (helpPopoverContent || helpKey)) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n }\n <ng-content select=\".sky-control-help\" />\n </span>\n </span>\n</span>\n", styles: [".sky-toggle-switch:not(.sky-theme-modern *){--sky-override-toggle-switch-background-color: #eeeeef;--sky-override-toggle-switch-background-color-disabled: #cdcfd2;--sky-override-toggle-switch-background-color-selected: #c1e8fb;--sky-override-toggle-switch-border: 1px solid #cdcfd2;--sky-override-toggle-switch-border-color-active: #cdcfd2;--sky-override-toggle-switch-border-color-disabled: transparent;--sky-override-toggle-switch-border-color-focus: #1870B8;--sky-override-toggle-switch-border-color-hover: #00b4f1;--sky-override-toggle-switch-border-color-selected: #00b4f1;--sky-override-toggle-switch-border-radius: 24px;--sky-override-toggle-switch-border-width: 1px;--sky-override-toggle-switch-border-width-active: 1px;--sky-override-toggle-switch-border-width-disabled: 2px;--sky-override-toggle-switch-border-width-focus: 2px;--sky-override-toggle-switch-border-width-hover: 2px;--sky-override-toggle-switch-border-width-selected: 2px;--sky-override-toggle-switch-indicator-background-color: #ffffff;--sky-override-toggle-switch-indicator-background-color-disabled: #eeeeef;--sky-override-toggle-switch-indicator-border-radius: 100%;--sky-override-toggle-switch-indicator-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .75);--sky-override-toggle-switch-indicator-height: 22px;--sky-override-toggle-switch-indicator-left: 22px;--sky-override-toggle-switch-indicator-margin-left: -22px;--sky-override-toggle-switch-indicator-width: 22px;--sky-override-toggle-switch-label-color-disabled: var( --sky-text-color-default );--sky-override-toggle-switch-label-gap: 10px;--sky-override-toggle-switch-line-height: calc(20 / 14);--sky-override-toggle-switch-padding: 1px;--sky-override-toggle-switch-padding-active: 1px;--sky-override-toggle-switch-padding-disabled: 0;--sky-override-toggle-switch-padding-focus: 0;--sky-override-toggle-switch-padding-hover: 0;--sky-override-toggle-switch-padding-selected: 0;--sky-override-toggle-switch-pointer-disabled: default;--sky-override-toggle-switch-transition: none;--sky-override-toggle-switch-width: 46px}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-toggle-switch{--sky-override-toggle-switch-background-color: var(--modern-color-white);--sky-override-toggle-switch-border-color-selected: var( --sky-color-border-selected );--sky-override-toggle-switch-box-shadow-focus: var(--sky-elevation-focus);--sky-override-toggle-switch-indicator-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .5);--sky-override-toggle-switch-label-color-disabled: var( --sky-color-text-default );--sky-override-toggle-switch-line-height: calc(20 / 14);--sky-override-toggle-switch-width: var(--modern-size-48)}.sky-toggle-switch{display:inline-flex;align-items:baseline}.sky-toggle-switch.sky-toggle-switch-with-label{gap:var(--sky-override-toggle-switch-label-gap, var(--sky-space-gap-label-m))}.sky-toggle-switch .sky-toggle-switch-button{border:none;background:none;margin:0;padding:0;outline:none}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-switch{border:var(--sky-override-toggle-switch-border, var(--sky-border-width-input-base) solid var(--sky-color-border-switch-base));background-color:var(--sky-override-toggle-switch-background-color, var(--sky-background-input-base));padding:var(--sky-override-toggle-switch-padding, var(--sky-border-width-input-base));border-radius:var(--sky-override-toggle-switch-border-radius, calc(var(--sky-border-radius-thumb) + var(--sky-space-inset-thumb) * 2)/100%);flex:none;line-height:var(--sky-override-toggle-switch-line-height, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));width:var(--sky-override-toggle-switch-width, calc(var(--sky-size-switch) * 2 - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));display:inline-block;transition:var(--sky-override-toggle-switch-transition, border-color .15s, box-shadow .15s)}.sky-toggle-switch .sky-toggle-switch-button:focus-visible .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-focus, var(--sky-border-width-input-focus));border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-focus));padding:var(--sky-override-toggle-switch-padding-focus, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-focus)))}.sky-toggle-switch .sky-toggle-switch-button:focus-visible:not(:active,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{box-shadow:var(--sky-override-toggle-switch-box-shadow-focus, none)}.sky-toggle-switch .sky-toggle-switch-button:active .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-active, var(--sky-border-width-input-active));border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-active));padding:var(--sky-override-toggle-switch-padding-active, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-active)))}.sky-toggle-switch .sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled){cursor:pointer}.sky-toggle-switch .sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled):not(:focus-visible) .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-hover, var(--sky-border-width-input-hover));border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-hover));padding:var(--sky-override-toggle-switch-padding-hover, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-base)))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-override-toggle-switch-background-color-selected, var(--sky-color-background-selected-heavy))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:not(:focus-visible,:active,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-selected, var(--sky-border-width-selected-s));border-color:var(--sky-override-toggle-switch-border-color-selected, var(--sky-color-border-switch-selected-base));padding:var(--sky-override-toggle-switch-padding-selected, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-base)))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:focus-visible:not(:active) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-selected-focus))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:active .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-selected-active))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:hover:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-selected-hover))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked.sky-toggle-switch-disabled .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-selected-disabled))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-indicator{left:100%}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled{color:var(--sky-color-text-default)}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{background-color:var(--sky-override-toggle-switch-background-color-disabled, var(--sky-color-background-input-disabled));border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-disabled));border-width:var(--sky-override-toggle-switch-border-width-disabled, var(--sky-border-width-input-disabled));padding:var(--sky-override-toggle-switch-padding-disabled, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-disabled)));cursor:var(--sky-override-toggle-switch-pointer-disabled, not-allowed)}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled+span .sky-toggle-switch-label{color:var(--sky-override-toggle-switch-label-color-disabled, var(--sky-color-text-deemphasized))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:var(--sky-override-toggle-switch-indicator-background-color-disabled, var(--sky-color-background-thumb-disabled))}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-indicator{height:var(--sky-override-toggle-switch-indicator-height, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));width:var(--sky-override-toggle-switch-indicator-width, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));display:block;position:relative;top:0;left:var(--sky-override-toggle-switch-indicator-left, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));margin-left:var(--sky-override-toggle-switch-indicator-margin-left, calc((var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)) * -1));border-radius:var(--sky-override-toggle-switch-indicator-border-radius, var(--sky-border-radius-thumb));box-shadow:var(--sky-override-toggle-switch-indicator-box-shadow, var(--sky-elevation-raised-100));background-color:var(--sky-override-toggle-switch-indicator-background-color, var(--sky-color-background-thumb-base))}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-indicator.sky-toggle-switch-transition{transition:left .15s}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4699
+ ], queries: [{ propertyName: "labelComponents", predicate: SkyToggleSwitchLabelComponent }], ngImport: i0, template: "<span\n class=\"sky-toggle-switch\"\n [ngClass]=\"{\n 'sky-toggle-switch-with-label': hasLabelComponent || labelText\n }\"\n>\n <button\n #toggle=\"skyId\"\n class=\"sky-toggle-switch-button\"\n role=\"switch\"\n type=\"button\"\n skyId\n [attr.aria-checked]=\"checked\"\n [attr.aria-label]=\"labelText || ariaLabel || null\"\n [attr.aria-labelledby]=\"\n !ariaLabel && (hasLabelComponent || labelText) ? labelId : null\n \"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-toggle-switch-checked': checked,\n 'sky-toggle-switch-disabled': disabled\n }\"\n [tabIndex]=\"tabIndex\"\n (blur)=\"onButtonBlur()\"\n (click)=\"onButtonClick($event)\"\n >\n <div aria-hidden=\"true\" class=\"sky-toggle-switch-switch\">\n <i\n class=\"sky-toggle-switch-indicator\"\n [ngClass]=\"{\n 'sky-toggle-switch-transition': enableIndicatorAnimation\n }\"\n >&nbsp;</i\n >\n </div>\n </button>\n <span>\n @if (hasLabelComponent || labelText) {\n <label\n class=\"sky-toggle-switch-label\"\n [for]=\"toggle.id\"\n [attr.id]=\"labelId\"\n >\n @if (labelText) {\n @if (!labelHidden) {\n <span class=\"sky-toggle-switch-label-text\">{{ labelText }}</span>\n }\n } @else {\n <ng-content select=\"sky-toggle-switch-label\" />\n }\n </label>\n }\n <span class=\"sky-control-help-container\">\n @if (labelText && (helpPopoverContent || helpKey)) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n }\n <ng-content select=\".sky-control-help\" />\n </span>\n </span>\n</span>\n", styles: [".sky-toggle-switch:not(.sky-theme-modern *){--sky-override-toggle-switch-background-color: #eeeeef;--sky-override-toggle-switch-background-color-disabled: #cdcfd2;--sky-override-toggle-switch-background-color-selected: #c1e8fb;--sky-override-toggle-switch-border: 1px solid #cdcfd2;--sky-override-toggle-switch-border-color-active: #cdcfd2;--sky-override-toggle-switch-border-color-disabled: transparent;--sky-override-toggle-switch-border-color-focus: #1870B8;--sky-override-toggle-switch-border-color-hover: #00b4f1;--sky-override-toggle-switch-border-color-selected: #00b4f1;--sky-override-toggle-switch-border-radius: 24px;--sky-override-toggle-switch-border-width: 1px;--sky-override-toggle-switch-border-width-active: 1px;--sky-override-toggle-switch-border-width-disabled: 2px;--sky-override-toggle-switch-border-width-focus: 2px;--sky-override-toggle-switch-border-width-hover: 2px;--sky-override-toggle-switch-border-width-selected: 2px;--sky-override-toggle-switch-indicator-background-color: #ffffff;--sky-override-toggle-switch-indicator-background-color-disabled: #eeeeef;--sky-override-toggle-switch-indicator-border-radius: 100%;--sky-override-toggle-switch-indicator-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .75);--sky-override-toggle-switch-indicator-height: 22px;--sky-override-toggle-switch-indicator-left: 22px;--sky-override-toggle-switch-indicator-margin-left: -22px;--sky-override-toggle-switch-indicator-width: 22px;--sky-override-toggle-switch-label-color-disabled: var( --sky-text-color-default );--sky-override-toggle-switch-label-gap: 10px;--sky-override-toggle-switch-line-height: calc(20 / 14);--sky-override-toggle-switch-padding: 1px;--sky-override-toggle-switch-padding-active: 1px;--sky-override-toggle-switch-padding-disabled: 0;--sky-override-toggle-switch-padding-focus: 0;--sky-override-toggle-switch-padding-hover: 0;--sky-override-toggle-switch-padding-selected: 0;--sky-override-toggle-switch-pointer-disabled: default;--sky-override-toggle-switch-transition: none;--sky-override-toggle-switch-width: 46px}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-toggle-switch{--sky-override-toggle-switch-background-color: var(--modern-color-white);--sky-override-toggle-switch-border-color-selected: var( --sky-color-border-selected );--sky-override-toggle-switch-box-shadow-focus: var(--sky-elevation-focus);--sky-override-toggle-switch-indicator-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .5);--sky-override-toggle-switch-label-color-disabled: var( --sky-color-text-default );--sky-override-toggle-switch-line-height: calc(20 / 14);--sky-override-toggle-switch-width: var(--modern-size-48)}.sky-toggle-switch{display:inline-flex;align-items:baseline}.sky-toggle-switch.sky-toggle-switch-with-label{gap:var(--sky-override-toggle-switch-label-gap, var(--sky-space-gap-label-m))}.sky-toggle-switch .sky-toggle-switch-button{border:none;background:none;margin:0;padding:0;outline:none}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-switch{border:var(--sky-override-toggle-switch-border, var(--sky-border-width-input-base) solid var(--sky-color-border-switch-base));background-color:var(--sky-override-toggle-switch-background-color, var(--sky-color-background-input-base));padding:var(--sky-override-toggle-switch-padding, var(--sky-border-width-input-base));border-radius:var(--sky-override-toggle-switch-border-radius, calc(var(--sky-border-radius-thumb) + var(--sky-space-inset-thumb) * 2)/100%);flex:none;line-height:var(--sky-override-toggle-switch-line-height, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));width:var(--sky-override-toggle-switch-width, calc(var(--sky-size-switch) * 2 - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));display:inline-block;transition:var(--sky-override-toggle-switch-transition, border-color .15s, box-shadow .15s)}.sky-toggle-switch .sky-toggle-switch-button:focus-visible .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-focus, var(--sky-border-width-input-focus));border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-focus));padding:var(--sky-override-toggle-switch-padding-focus, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-focus)))}.sky-toggle-switch .sky-toggle-switch-button:focus-visible:not(:active,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{box-shadow:var(--sky-override-toggle-switch-box-shadow-focus, none)}.sky-toggle-switch .sky-toggle-switch-button:active .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-active, var(--sky-border-width-input-active));border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-active));padding:var(--sky-override-toggle-switch-padding-active, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-active)))}.sky-toggle-switch .sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled){cursor:pointer}.sky-toggle-switch .sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled):not(:focus-visible) .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-hover, var(--sky-border-width-input-hover));border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-hover));padding:var(--sky-override-toggle-switch-padding-hover, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-base)))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-override-toggle-switch-background-color-selected, var(--sky-color-background-selected-heavy))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:not(:focus-visible,:active,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-selected, var(--sky-border-width-selected-s));border-color:var(--sky-override-toggle-switch-border-color-selected, var(--sky-color-border-switch-selected-base));padding:var(--sky-override-toggle-switch-padding-selected, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-base)))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:focus-visible:not(:active) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-selected-focus))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:active .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-selected-active))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:hover:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-selected-hover))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked.sky-toggle-switch-disabled .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-selected-disabled))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-indicator{left:100%}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled{color:var(--sky-color-text-default)}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{background-color:var(--sky-override-toggle-switch-background-color-disabled, var(--sky-color-background-input-disabled));border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-disabled));border-width:var(--sky-override-toggle-switch-border-width-disabled, var(--sky-border-width-input-disabled));padding:var(--sky-override-toggle-switch-padding-disabled, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-disabled)));cursor:var(--sky-override-toggle-switch-pointer-disabled, not-allowed)}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled+span .sky-toggle-switch-label{color:var(--sky-override-toggle-switch-label-color-disabled, var(--sky-color-text-deemphasized))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:var(--sky-override-toggle-switch-indicator-background-color-disabled, var(--sky-color-background-thumb-disabled))}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-indicator{height:var(--sky-override-toggle-switch-indicator-height, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));width:var(--sky-override-toggle-switch-indicator-width, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));display:block;position:relative;top:0;left:var(--sky-override-toggle-switch-indicator-left, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));margin-left:var(--sky-override-toggle-switch-indicator-margin-left, calc((var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)) * -1));border-radius:var(--sky-override-toggle-switch-indicator-border-radius, var(--sky-border-radius-thumb));box-shadow:var(--sky-override-toggle-switch-indicator-box-shadow, var(--sky-elevation-raised-100));background-color:var(--sky-override-toggle-switch-indicator-background-color, var(--sky-color-background-thumb-base))}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-indicator.sky-toggle-switch-transition{transition:left .15s}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i4.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$3.λ2, selector: "[skyId]", exportAs: ["skyId"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
4700
4700
  }
4701
4701
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SkyToggleSwitchComponent, decorators: [{
4702
4702
  type: Component,
4703
4703
  args: [{ selector: 'sky-toggle-switch', providers: [
4704
4704
  SKY_TOGGLE_SWITCH_CONTROL_VALUE_ACCESSOR,
4705
4705
  SKY_TOGGLE_SWITCH_VALIDATOR,
4706
- ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<span\n class=\"sky-toggle-switch\"\n [ngClass]=\"{\n 'sky-toggle-switch-with-label': hasLabelComponent || labelText\n }\"\n>\n <button\n #toggle=\"skyId\"\n class=\"sky-toggle-switch-button\"\n role=\"switch\"\n type=\"button\"\n skyId\n [attr.aria-checked]=\"checked\"\n [attr.aria-label]=\"labelText || ariaLabel || null\"\n [attr.aria-labelledby]=\"\n !ariaLabel && (hasLabelComponent || labelText) ? labelId : null\n \"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-toggle-switch-checked': checked,\n 'sky-toggle-switch-disabled': disabled\n }\"\n [tabIndex]=\"tabIndex\"\n (blur)=\"onButtonBlur()\"\n (click)=\"onButtonClick($event)\"\n >\n <div aria-hidden=\"true\" class=\"sky-toggle-switch-switch\">\n <i\n class=\"sky-toggle-switch-indicator\"\n [ngClass]=\"{\n 'sky-toggle-switch-transition': enableIndicatorAnimation\n }\"\n >&nbsp;</i\n >\n </div>\n </button>\n <span>\n @if (hasLabelComponent || labelText) {\n <label\n class=\"sky-toggle-switch-label\"\n [for]=\"toggle.id\"\n [attr.id]=\"labelId\"\n >\n @if (labelText) {\n @if (!labelHidden) {\n <span class=\"sky-toggle-switch-label-text\">{{ labelText }}</span>\n }\n } @else {\n <ng-content select=\"sky-toggle-switch-label\" />\n }\n </label>\n }\n <span class=\"sky-control-help-container\">\n @if (labelText && (helpPopoverContent || helpKey)) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n }\n <ng-content select=\".sky-control-help\" />\n </span>\n </span>\n</span>\n", styles: [".sky-toggle-switch:not(.sky-theme-modern *){--sky-override-toggle-switch-background-color: #eeeeef;--sky-override-toggle-switch-background-color-disabled: #cdcfd2;--sky-override-toggle-switch-background-color-selected: #c1e8fb;--sky-override-toggle-switch-border: 1px solid #cdcfd2;--sky-override-toggle-switch-border-color-active: #cdcfd2;--sky-override-toggle-switch-border-color-disabled: transparent;--sky-override-toggle-switch-border-color-focus: #1870B8;--sky-override-toggle-switch-border-color-hover: #00b4f1;--sky-override-toggle-switch-border-color-selected: #00b4f1;--sky-override-toggle-switch-border-radius: 24px;--sky-override-toggle-switch-border-width: 1px;--sky-override-toggle-switch-border-width-active: 1px;--sky-override-toggle-switch-border-width-disabled: 2px;--sky-override-toggle-switch-border-width-focus: 2px;--sky-override-toggle-switch-border-width-hover: 2px;--sky-override-toggle-switch-border-width-selected: 2px;--sky-override-toggle-switch-indicator-background-color: #ffffff;--sky-override-toggle-switch-indicator-background-color-disabled: #eeeeef;--sky-override-toggle-switch-indicator-border-radius: 100%;--sky-override-toggle-switch-indicator-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .75);--sky-override-toggle-switch-indicator-height: 22px;--sky-override-toggle-switch-indicator-left: 22px;--sky-override-toggle-switch-indicator-margin-left: -22px;--sky-override-toggle-switch-indicator-width: 22px;--sky-override-toggle-switch-label-color-disabled: var( --sky-text-color-default );--sky-override-toggle-switch-label-gap: 10px;--sky-override-toggle-switch-line-height: calc(20 / 14);--sky-override-toggle-switch-padding: 1px;--sky-override-toggle-switch-padding-active: 1px;--sky-override-toggle-switch-padding-disabled: 0;--sky-override-toggle-switch-padding-focus: 0;--sky-override-toggle-switch-padding-hover: 0;--sky-override-toggle-switch-padding-selected: 0;--sky-override-toggle-switch-pointer-disabled: default;--sky-override-toggle-switch-transition: none;--sky-override-toggle-switch-width: 46px}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-toggle-switch{--sky-override-toggle-switch-background-color: var(--modern-color-white);--sky-override-toggle-switch-border-color-selected: var( --sky-color-border-selected );--sky-override-toggle-switch-box-shadow-focus: var(--sky-elevation-focus);--sky-override-toggle-switch-indicator-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .5);--sky-override-toggle-switch-label-color-disabled: var( --sky-color-text-default );--sky-override-toggle-switch-line-height: calc(20 / 14);--sky-override-toggle-switch-width: var(--modern-size-48)}.sky-toggle-switch{display:inline-flex;align-items:baseline}.sky-toggle-switch.sky-toggle-switch-with-label{gap:var(--sky-override-toggle-switch-label-gap, var(--sky-space-gap-label-m))}.sky-toggle-switch .sky-toggle-switch-button{border:none;background:none;margin:0;padding:0;outline:none}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-switch{border:var(--sky-override-toggle-switch-border, var(--sky-border-width-input-base) solid var(--sky-color-border-switch-base));background-color:var(--sky-override-toggle-switch-background-color, var(--sky-background-input-base));padding:var(--sky-override-toggle-switch-padding, var(--sky-border-width-input-base));border-radius:var(--sky-override-toggle-switch-border-radius, calc(var(--sky-border-radius-thumb) + var(--sky-space-inset-thumb) * 2)/100%);flex:none;line-height:var(--sky-override-toggle-switch-line-height, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));width:var(--sky-override-toggle-switch-width, calc(var(--sky-size-switch) * 2 - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));display:inline-block;transition:var(--sky-override-toggle-switch-transition, border-color .15s, box-shadow .15s)}.sky-toggle-switch .sky-toggle-switch-button:focus-visible .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-focus, var(--sky-border-width-input-focus));border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-focus));padding:var(--sky-override-toggle-switch-padding-focus, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-focus)))}.sky-toggle-switch .sky-toggle-switch-button:focus-visible:not(:active,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{box-shadow:var(--sky-override-toggle-switch-box-shadow-focus, none)}.sky-toggle-switch .sky-toggle-switch-button:active .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-active, var(--sky-border-width-input-active));border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-active));padding:var(--sky-override-toggle-switch-padding-active, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-active)))}.sky-toggle-switch .sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled){cursor:pointer}.sky-toggle-switch .sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled):not(:focus-visible) .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-hover, var(--sky-border-width-input-hover));border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-hover));padding:var(--sky-override-toggle-switch-padding-hover, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-base)))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-override-toggle-switch-background-color-selected, var(--sky-color-background-selected-heavy))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:not(:focus-visible,:active,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-selected, var(--sky-border-width-selected-s));border-color:var(--sky-override-toggle-switch-border-color-selected, var(--sky-color-border-switch-selected-base));padding:var(--sky-override-toggle-switch-padding-selected, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-base)))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:focus-visible:not(:active) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-selected-focus))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:active .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-selected-active))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:hover:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-selected-hover))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked.sky-toggle-switch-disabled .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-selected-disabled))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-indicator{left:100%}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled{color:var(--sky-color-text-default)}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{background-color:var(--sky-override-toggle-switch-background-color-disabled, var(--sky-color-background-input-disabled));border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-disabled));border-width:var(--sky-override-toggle-switch-border-width-disabled, var(--sky-border-width-input-disabled));padding:var(--sky-override-toggle-switch-padding-disabled, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-disabled)));cursor:var(--sky-override-toggle-switch-pointer-disabled, not-allowed)}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled+span .sky-toggle-switch-label{color:var(--sky-override-toggle-switch-label-color-disabled, var(--sky-color-text-deemphasized))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:var(--sky-override-toggle-switch-indicator-background-color-disabled, var(--sky-color-background-thumb-disabled))}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-indicator{height:var(--sky-override-toggle-switch-indicator-height, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));width:var(--sky-override-toggle-switch-indicator-width, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));display:block;position:relative;top:0;left:var(--sky-override-toggle-switch-indicator-left, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));margin-left:var(--sky-override-toggle-switch-indicator-margin-left, calc((var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)) * -1));border-radius:var(--sky-override-toggle-switch-indicator-border-radius, var(--sky-border-radius-thumb));box-shadow:var(--sky-override-toggle-switch-indicator-box-shadow, var(--sky-elevation-raised-100));background-color:var(--sky-override-toggle-switch-indicator-background-color, var(--sky-color-background-thumb-base))}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-indicator.sky-toggle-switch-transition{transition:left .15s}\n"] }]
4706
+ ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<span\n class=\"sky-toggle-switch\"\n [ngClass]=\"{\n 'sky-toggle-switch-with-label': hasLabelComponent || labelText\n }\"\n>\n <button\n #toggle=\"skyId\"\n class=\"sky-toggle-switch-button\"\n role=\"switch\"\n type=\"button\"\n skyId\n [attr.aria-checked]=\"checked\"\n [attr.aria-label]=\"labelText || ariaLabel || null\"\n [attr.aria-labelledby]=\"\n !ariaLabel && (hasLabelComponent || labelText) ? labelId : null\n \"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-toggle-switch-checked': checked,\n 'sky-toggle-switch-disabled': disabled\n }\"\n [tabIndex]=\"tabIndex\"\n (blur)=\"onButtonBlur()\"\n (click)=\"onButtonClick($event)\"\n >\n <div aria-hidden=\"true\" class=\"sky-toggle-switch-switch\">\n <i\n class=\"sky-toggle-switch-indicator\"\n [ngClass]=\"{\n 'sky-toggle-switch-transition': enableIndicatorAnimation\n }\"\n >&nbsp;</i\n >\n </div>\n </button>\n <span>\n @if (hasLabelComponent || labelText) {\n <label\n class=\"sky-toggle-switch-label\"\n [for]=\"toggle.id\"\n [attr.id]=\"labelId\"\n >\n @if (labelText) {\n @if (!labelHidden) {\n <span class=\"sky-toggle-switch-label-text\">{{ labelText }}</span>\n }\n } @else {\n <ng-content select=\"sky-toggle-switch-label\" />\n }\n </label>\n }\n <span class=\"sky-control-help-container\">\n @if (labelText && (helpPopoverContent || helpKey)) {\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"labelText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n }\n <ng-content select=\".sky-control-help\" />\n </span>\n </span>\n</span>\n", styles: [".sky-toggle-switch:not(.sky-theme-modern *){--sky-override-toggle-switch-background-color: #eeeeef;--sky-override-toggle-switch-background-color-disabled: #cdcfd2;--sky-override-toggle-switch-background-color-selected: #c1e8fb;--sky-override-toggle-switch-border: 1px solid #cdcfd2;--sky-override-toggle-switch-border-color-active: #cdcfd2;--sky-override-toggle-switch-border-color-disabled: transparent;--sky-override-toggle-switch-border-color-focus: #1870B8;--sky-override-toggle-switch-border-color-hover: #00b4f1;--sky-override-toggle-switch-border-color-selected: #00b4f1;--sky-override-toggle-switch-border-radius: 24px;--sky-override-toggle-switch-border-width: 1px;--sky-override-toggle-switch-border-width-active: 1px;--sky-override-toggle-switch-border-width-disabled: 2px;--sky-override-toggle-switch-border-width-focus: 2px;--sky-override-toggle-switch-border-width-hover: 2px;--sky-override-toggle-switch-border-width-selected: 2px;--sky-override-toggle-switch-indicator-background-color: #ffffff;--sky-override-toggle-switch-indicator-background-color-disabled: #eeeeef;--sky-override-toggle-switch-indicator-border-radius: 100%;--sky-override-toggle-switch-indicator-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .75);--sky-override-toggle-switch-indicator-height: 22px;--sky-override-toggle-switch-indicator-left: 22px;--sky-override-toggle-switch-indicator-margin-left: -22px;--sky-override-toggle-switch-indicator-width: 22px;--sky-override-toggle-switch-label-color-disabled: var( --sky-text-color-default );--sky-override-toggle-switch-label-gap: 10px;--sky-override-toggle-switch-line-height: calc(20 / 14);--sky-override-toggle-switch-padding: 1px;--sky-override-toggle-switch-padding-active: 1px;--sky-override-toggle-switch-padding-disabled: 0;--sky-override-toggle-switch-padding-focus: 0;--sky-override-toggle-switch-padding-hover: 0;--sky-override-toggle-switch-padding-selected: 0;--sky-override-toggle-switch-pointer-disabled: default;--sky-override-toggle-switch-transition: none;--sky-override-toggle-switch-width: 46px}:host-context(.sky-theme-modern:not(.sky-theme-brand-base)) .sky-toggle-switch{--sky-override-toggle-switch-background-color: var(--modern-color-white);--sky-override-toggle-switch-border-color-selected: var( --sky-color-border-selected );--sky-override-toggle-switch-box-shadow-focus: var(--sky-elevation-focus);--sky-override-toggle-switch-indicator-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .5);--sky-override-toggle-switch-label-color-disabled: var( --sky-color-text-default );--sky-override-toggle-switch-line-height: calc(20 / 14);--sky-override-toggle-switch-width: var(--modern-size-48)}.sky-toggle-switch{display:inline-flex;align-items:baseline}.sky-toggle-switch.sky-toggle-switch-with-label{gap:var(--sky-override-toggle-switch-label-gap, var(--sky-space-gap-label-m))}.sky-toggle-switch .sky-toggle-switch-button{border:none;background:none;margin:0;padding:0;outline:none}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-switch{border:var(--sky-override-toggle-switch-border, var(--sky-border-width-input-base) solid var(--sky-color-border-switch-base));background-color:var(--sky-override-toggle-switch-background-color, var(--sky-color-background-input-base));padding:var(--sky-override-toggle-switch-padding, var(--sky-border-width-input-base));border-radius:var(--sky-override-toggle-switch-border-radius, calc(var(--sky-border-radius-thumb) + var(--sky-space-inset-thumb) * 2)/100%);flex:none;line-height:var(--sky-override-toggle-switch-line-height, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));width:var(--sky-override-toggle-switch-width, calc(var(--sky-size-switch) * 2 - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));display:inline-block;transition:var(--sky-override-toggle-switch-transition, border-color .15s, box-shadow .15s)}.sky-toggle-switch .sky-toggle-switch-button:focus-visible .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-focus, var(--sky-border-width-input-focus));border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-focus));padding:var(--sky-override-toggle-switch-padding-focus, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-focus)))}.sky-toggle-switch .sky-toggle-switch-button:focus-visible:not(:active,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{box-shadow:var(--sky-override-toggle-switch-box-shadow-focus, none)}.sky-toggle-switch .sky-toggle-switch-button:active .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-active, var(--sky-border-width-input-active));border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-active));padding:var(--sky-override-toggle-switch-padding-active, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-active)))}.sky-toggle-switch .sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled){cursor:pointer}.sky-toggle-switch .sky-toggle-switch-button:hover:not(.sky-toggle-switch-disabled):not(:focus-visible) .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-hover, var(--sky-border-width-input-hover));border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-hover));padding:var(--sky-override-toggle-switch-padding-hover, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-base)))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-switch{background-color:var(--sky-override-toggle-switch-background-color-selected, var(--sky-color-background-selected-heavy))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:not(:focus-visible,:active,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-width:var(--sky-override-toggle-switch-border-width-selected, var(--sky-border-width-selected-s));border-color:var(--sky-override-toggle-switch-border-color-selected, var(--sky-color-border-switch-selected-base));padding:var(--sky-override-toggle-switch-padding-selected, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-base)))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:focus-visible:not(:active) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-focus, var(--sky-color-border-switch-selected-focus))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:active .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-active, var(--sky-color-border-switch-selected-active))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked:hover:not(:focus-visible,.sky-toggle-switch-disabled) .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-hover, var(--sky-color-border-switch-selected-hover))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked.sky-toggle-switch-disabled .sky-toggle-switch-switch{border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-selected-disabled))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-checked .sky-toggle-switch-indicator{left:100%}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled{color:var(--sky-color-text-default)}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-switch{background-color:var(--sky-override-toggle-switch-background-color-disabled, var(--sky-color-background-input-disabled));border-color:var(--sky-override-toggle-switch-border-color-disabled, var(--sky-color-border-switch-disabled));border-width:var(--sky-override-toggle-switch-border-width-disabled, var(--sky-border-width-input-disabled));padding:var(--sky-override-toggle-switch-padding-disabled, calc(var(--sky-space-inset-thumb) * 2 - var(--sky-border-width-input-disabled)));cursor:var(--sky-override-toggle-switch-pointer-disabled, not-allowed)}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled+span .sky-toggle-switch-label{color:var(--sky-override-toggle-switch-label-color-disabled, var(--sky-color-text-deemphasized))}.sky-toggle-switch .sky-toggle-switch-button.sky-toggle-switch-disabled .sky-toggle-switch-indicator{background-color:var(--sky-override-toggle-switch-indicator-background-color-disabled, var(--sky-color-background-thumb-disabled))}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-indicator{height:var(--sky-override-toggle-switch-indicator-height, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));width:var(--sky-override-toggle-switch-indicator-width, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));display:block;position:relative;top:0;left:var(--sky-override-toggle-switch-indicator-left, calc(var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)));margin-left:var(--sky-override-toggle-switch-indicator-margin-left, calc((var(--sky-size-switch) - (var(--sky-border-width-input-base) * 2 + var(--sky-space-inset-thumb) * 2)) * -1));border-radius:var(--sky-override-toggle-switch-indicator-border-radius, var(--sky-border-radius-thumb));box-shadow:var(--sky-override-toggle-switch-indicator-box-shadow, var(--sky-elevation-raised-100));background-color:var(--sky-override-toggle-switch-indicator-background-color, var(--sky-color-background-thumb-base))}.sky-toggle-switch .sky-toggle-switch-button .sky-toggle-switch-indicator.sky-toggle-switch-transition{transition:left .15s}\n"] }]
4707
4707
  }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$3.SkyIdService }], propDecorators: { ariaLabel: [{
4708
4708
  type: Input
4709
4709
  }], checked: [{