@siemens/ix 1.6.3 → 2.0.0-beta.1

package/dist/collection/components/toggle/toggle.css

@@ -14,10 +14,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/* Dimensions */
-/* Font sizes */
-/* Line heights */
-/* Animation timings */
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *
@@ -35,21 +31,55 @@
  * LICENSE file in the root directory of this source tree.
  */
 :host {
-  display: flex;
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: inline-flex;
+  position: relative;
+  height: 2rem;
+  justify-content: flex-start;
   align-items: center;
-  outline: none;
+  margin-right: 0.25rem;
+  cursor: pointer;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
 }
 :host .switch {
   position: relative;
-  display: inline-flex;
-  align-items: center;
+  display: inline-block;
+  width: 3rem;
   min-width: 3rem;
-  height: 2rem;
-}
-:host .switch:not(.disabled):not(:disabled):focus-visible {
-  outline-color: var(--focus--border-color);
-  outline-style: solid;
-  outline-width: 1px;
+  max-width: 3rem;
+  height: 1.5rem;
+  margin-right: 0.25rem;
 }
 :host .switch input {
   opacity: 0;
@@ -57,174 +87,99 @@
   height: 0;
 }
 :host .slider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-}
-:host .slider .slider-track {
   background-color: var(--theme-switch-off--background);
-  border-radius: 2.125rem;
-  border: 1px solid var(--theme-switch-off--border-color);
-  width: 2.5rem;
-  height: 1rem;
+  transition: 150ms;
+  border-radius: 1.5rem;
 }
 :host .slider:before {
   position: absolute;
   content: "";
-  height: 1.5rem;
-  width: 1.5rem;
-  left: 0.125rem;
+  height: 18px;
+  width: 18px;
+  left: 4px;
+  bottom: 3px;
   background-color: var(--theme-switch-thumb-off--background);
-  transition: transform 150ms;
+  transition: 150ms;
   border-radius: 50%;
-  border: 1px solid var(--theme-switch-thumb-off--border-color);
-  box-shadow: var(--theme-switch-thumb--box-shadow);
-}
-:host input:checked + .slider:before {
-  transform: translateX(1.125rem);
-  left: 0.25rem;
 }
-:host .text {
+:host input {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--theme-switch--color);
-  padding: 0 0.5rem;
-  position: relative;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-:host:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host:not(.disabled):not(:disabled):hover .slider:before {
-  background-color: var(--theme-switch-thumb-off--background--hover);
-  border-color: var(--theme-switch-thumb-off--border-color--hover);
-}
-:host:not(.disabled):not(:disabled):hover .slider-track {
-  background-color: var(--theme-switch-off--background--hover);
-  border-color: var(--theme-switch-off--border-color--hover);
-}
-:host:not(.disabled):not(:disabled):hover .text {
-  color: var(--theme-switch--color--hover);
-}
-:host:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host:not(.disabled):not(:disabled):active .slider:before {
-  background-color: var(--theme-switch-thumb-off--background--active);
-  border-color: var(--theme-switch-thumb-off--border-color--active);
+  padding: 0;
+  position: absolute;
+  width: 1px;
 }
-:host:not(.disabled):not(:disabled):active .slider-track {
-  background-color: var(--theme-switch-off--background--active);
-  border-color: var(--theme-switch-off--border-color--active);
+:host input:focus-visible + .switch > .slider {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: 1px;
 }
-:host:not(.disabled):not(:disabled):active .text {
-  color: var(--theme-switch--color--active);
+:host input:checked + .switch > .slider {
+  background-color: var(--theme-switch-on--background);
 }
-:host.checked .slider:before {
+:host input:checked + .switch > .slider::before {
   background-color: var(--theme-switch-thumb-on--background);
-  border-color: var(--theme-switch-thumb-on--border-color);
+  transform: translateX(1.35rem);
 }
-:host.checked .slider .slider-track {
-  background-color: var(--theme-switch-on--background);
-  border-color: var(--theme-switch-on--border-color);
+:host input + .switch:hover > .slider {
+  background-color: var(--theme-switch-off--background--hover);
 }
-:host.checked .text {
-  color: var(--theme-switch--color);
+:host input + .switch:hover > .slider:before {
+  background-color: var(--theme-switch-thumb-off--background--hover);
 }
-:host.checked:not(.disabled):not(:disabled) {
-  cursor: pointer;
+:host input + .switch:active > .slider {
+  background-color: var(--theme-switch-off--background--active);
 }
-:host.checked:not(.disabled):not(:disabled):hover .slider:before {
-  background-color: var(--theme-switch-thumb-on--background--hover);
-  border-color: var(--theme-switch-thumb-on--border-color--hover);
+:host input + .switch:active > .slider:before {
+  background-color: var(--theme-switch-thumb-off--background--active);
 }
-:host.checked:not(.disabled):not(:disabled):hover .slider .slider-track {
+:host input:checked + .switch:hover > .slider {
   background-color: var(--theme-switch-on--background--hover);
-  border-color: var(--theme-switch-on--border-color--hover);
-}
-:host.checked:not(.disabled):not(:disabled):hover .text {
-  color: var(--theme-switch--color--hover);
 }
-:host.checked:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host.checked:not(.disabled):not(:disabled):active .slider:before {
-  background-color: var(--theme-switch-thumb-on--background--active);
-  border-color: var(--theme-switch-thumb-on--border-color--active);
+:host input:checked + .switch:hover > .slider:before {
+  background-color: var(--theme-switch-thumb-on--background--hover);
 }
-:host.checked:not(.disabled):not(:disabled):active .slider-track {
+:host input:checked + .switch:active > .slider {
   background-color: var(--theme-switch-on--background--active);
-  border-color: var(--theme-switch-on--border-color--active);
-}
-:host.checked:not(.disabled):not(:disabled):active .text {
-  color: var(--theme-switch--color--active);
-}
-:host.indeterminate .slider:before {
-  background-color: var(--theme-switch-thumb-mixed--background);
-  border-color: var(--theme-switch-thumb-mixed--border-color);
-}
-:host.indeterminate .slider .slider-track {
-  background-color: var(--theme-switch-mixed--background);
-  border-color: var(--theme-switch-mixed--border-color);
 }
-:host.indeterminate .text {
-  color: var(--theme-switch--color);
-}
-:host.indeterminate:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host.indeterminate:not(.disabled):not(:disabled):hover .slider:before {
-  background-color: var(--theme-switch-thumb-mixed--background--hover);
-  border-color: var(--theme-switch-thumb-mixed--border-color--hover);
-}
-:host.indeterminate:not(.disabled):not(:disabled):hover .slider .slider-track {
-  background-color: var(--theme-switch-mixed--background--hover);
-  border-color: var(--theme-switch-mixed--border-color--hover);
-}
-:host.indeterminate:not(.disabled):not(:disabled):hover .text {
-  color: var(--theme-switch--color--hover);
-}
-:host.indeterminate:not(.disabled):not(:disabled) {
-  cursor: pointer;
-}
-:host.indeterminate:not(.disabled):not(:disabled):active .slider:before {
-  background-color: var(--theme-switch-thumb-mixed--background--active);
-  border-color: var(--theme-switch-thumb-mixed--border-color--active);
-}
-:host.indeterminate:not(.disabled):not(:disabled):active .slider-track {
-  background-color: var(--theme-switch-mixed--background--active);
-  border-color: var(--theme-switch-mixed--border-color--active);
+:host input:checked + .switch:active > .slider:before {
+  background-color: var(--theme-switch-thumb-on--background--active);
 }
-:host.indeterminate:not(.disabled):not(:disabled):active .text {
-  color: var(--theme-switch--color--active);
+:host input:indeterminate + .switch > .slider::before {
+  transform: translateX(0.7rem);
 }
-:host.indeterminate .slider:before {
-  transform: translateX(0.625rem);
+:host .toggle-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
-:host.disabled {
+
+:host(.disabled) {
   pointer-events: none;
 }
-:host.disabled .slider {
-  cursor: initial;
+:host(.disabled) input + .switch {
   opacity: 0.5;
 }
-:host.disabled .slider:before {
+:host(.disabled) input + .switch > .slider {
+  background-color: var(--theme-switch-off--background--disabled);
+}
+:host(.disabled) input + .switch > .slider:before {
   background-color: var(--theme-switch-thumb-off--background--disabled);
-  border-color: var(--theme-switch-thumb-off--border-color--disabled);
 }
-:host.disabled .slider .slider-track {
-  background-color: var(--theme-switch-off--background--disabled);
-  border-color: var(--theme-switch-off--border-color--disabled);
+:host(.disabled) input:checked + .switch > .slider {
+  background-color: var(--theme-switch-on--background--disabled);
+}
+:host(.disabled) input:checked + .switch > .slider:before {
+  background-color: var(--theme-switch-thumb-on--background--disabled);
 }
-:host.disabled .text {
-  color: var(--theme-switch--color--disabled);
+:host(.disabled) .toggle-text {
+  color: var(--theme-color-weak-text);
 }

package/dist/collection/components/toggle/toggle.js

@@ -6,51 +6,32 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h, Host, } from '@stencil/core';
-export class CuiToggle {
+import { Fragment, h, Host, } from '@stencil/core';
+import { a11yBoolean } from '../utils/a11y';
+export class Toggle {
   constructor() {
     this.checked = false;
     this.disabled = false;
     this.indeterminate = false;
-    this.color = 'accent';
     this.textOn = 'On';
     this.textOff = 'Off';
     this.textIndeterminate = 'Mixed';
     this.hideText = false;
   }
-  async onKeyDown(event) {
-    const targetElement = event.target;
-    if (!this.hostElement.contains(targetElement)) {
-      return;
+  onCheckedChange(newChecked) {
+    if (this.indeterminate) {
+      this.indeterminate = false;
     }
-    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-      this.emitChange(event);
-    }
-  }
-  emitChange(event) {
-    if (this.disabled || this.indeterminate) {
-      return;
-    }
-    event.stopPropagation();
-    event.preventDefault();
-    this.checked = !this.checked;
+    this.checked = newChecked;
     this.checkedChange.emit(this.checked);
   }
-  getText() {
-    if (this.indeterminate || this.checked === undefined) {
-      return this.textIndeterminate;
-    }
-    return this.checked ? this.textOn : this.textOff;
-  }
   render() {
     return (h(Host, { class: {
         disabled: this.disabled,
-        checked: this.checked,
-        indeterminate: this.indeterminate || this.checked === undefined,
-      } }, h("label", { class: "switch", tabindex: this.disabled ? -1 : 0 }, h("input", { tabindex: "-1", type: "checkbox", checked: this.checked, disabled: this.disabled, indeterminate: this.indeterminate || this.checked === undefined, id: this.hostElement.id, onChange: (e) => this.emitChange(e) }), h("span", { class: "slider" }, h("span", { class: "slider-track" }))), !this.hideText ? (h("span", { title: this.getText(), class: "text", onClick: (e) => this.emitChange(e) }, this.getText())) : null));
+      }, onClick: () => this.onCheckedChange(!this.checked) }, h("input", { disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, role: "switch", tabindex: 0, type: "checkbox", "aria-checked": a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), h("label", { class: "switch", tabIndex: -1 }, h("span", { class: "slider" })), !this.hideText ? (h(Fragment, null, !this.indeterminate ? (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.checked ? this.textOn : this.textOff)) : (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.textIndeterminate)))) : null));
   }
   static get is() { return "ix-toggle"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["toggle.scss"]
@@ -101,7 +82,7 @@ export class CuiToggle {
       },
       "indeterminate": {
         "type": "boolean",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -114,30 +95,9 @@ export class CuiToggle {
           "text": "If true the control is in indeterminate state"
         },
         "attribute": "indeterminate",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Will be removed in 2.0.0"
-            }],
-          "text": "Basic and status colors from color palette"
-        },
-        "attribute": "color",
-        "reflect": false,
-        "defaultValue": "'accent'"
-      },
       "textOn": {
         "type": "string",
         "mutable": false,
@@ -231,14 +191,5 @@ export class CuiToggle {
       }];
   }
   static get elementRef() { return "hostElement"; }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "onKeyDown",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
 }
 //# sourceMappingURL=toggle.js.map

package/dist/collection/components/toggle/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-toggle',\n  styleUrl: 'toggle.scss',\n  scoped: true,\n})\nexport class CuiToggle {\n  /**\n   * Whether the slide-toggle element is checked or not.\n   */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * Whether the slide-toggle element is disabled or not.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the control is in indeterminate state\n   */\n  @Prop() indeterminate = false;\n\n  /**\n   * Basic and status colors from color palette\n   * @deprecated Will be removed in 2.0.0\n   */\n  @Prop() color = 'accent';\n\n  /**\n   * Text for on state\n   */\n  @Prop() textOn = 'On';\n\n  /**\n   * Text for off state\n   */\n  @Prop() textOff = 'Off';\n\n  /**\n   * Text for indeterminate state\n   */\n  @Prop() textIndeterminate = 'Mixed';\n\n  /**\n   * Hide `on` and `off` text\n   */\n  @Prop() hideText = false;\n\n  /**\n   * An event will be dispatched each time the slide-toggle changes its value.\n   */\n  @Event() checkedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxToggleElement;\n\n  @Listen('keydown', { target: 'window' })\n  async onKeyDown(event: KeyboardEvent) {\n    const targetElement = event.target as HTMLElement;\n\n    if (!this.hostElement.contains(targetElement)) {\n      return;\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      this.emitChange(event);\n    }\n  }\n\n  private emitChange(event: Event) {\n    if (this.disabled || this.indeterminate) {\n      return;\n    }\n\n    event.stopPropagation();\n    event.preventDefault();\n\n    this.checked = !this.checked;\n    this.checkedChange.emit(this.checked);\n  }\n\n  private getText() {\n    if (this.indeterminate || this.checked === undefined) {\n      return this.textIndeterminate;\n    }\n\n    return this.checked ? this.textOn : this.textOff;\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          checked: this.checked,\n          indeterminate: this.indeterminate || this.checked === undefined,\n        }}\n      >\n        <label class=\"switch\" tabindex={this.disabled ? -1 : 0}>\n          <input\n            tabindex=\"-1\"\n            type=\"checkbox\"\n            checked={this.checked}\n            disabled={this.disabled}\n            indeterminate={this.indeterminate || this.checked === undefined}\n            id={this.hostElement.id}\n            onChange={(e) => this.emitChange(e)}\n          />\n          <span class=\"slider\">\n            <span class=\"slider-track\"></span>\n          </span>\n        </label>\n        {!this.hideText ? (\n          <span\n            title={this.getText()}\n            class=\"text\"\n            onClick={(e) => this.emitChange(e)}\n          >\n            {this.getText()}\n          </span>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"toggle.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,QAAQ,EACR,CAAC,EACD,IAAI,EACJ,IAAI,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAO5C,MAAM,OAAO,MAAM;;mBAMiC,KAAK;oBAKpC,KAAK;yBAKgC,KAAK;kBAK5C,IAAI;mBAKH,KAAK;6BAKK,OAAO;oBAKhB,KAAK;;EAOxB,eAAe,CAAC,UAAmB;IACjC,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;KAC5B;IACD,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;IAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;EACxC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;MAElD,aACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAC,UAAU,kBACD,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,IAAI,CAAC,eAAe,CAAE,KAAK,CAAC,MAAc,CAAC,OAAO,CAAC,GAE9C;MACT,aAAO,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC;QAChC,YAAM,KAAK,EAAC,QAAQ,GAAQ,CACtB;MACP,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,EAAC,QAAQ,QACN,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACrB,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CACrC,CACR,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAE,aAAa,iBAAe,WAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,iBAAiB,CAClB,CACR,CACQ,CACZ,CAAC,CAAC,CAAC,IAAI,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-toggle',\n  styleUrl: 'toggle.scss',\n  shadow: true,\n})\nexport class Toggle {\n  @Element() hostElement!: HTMLIxToggleElement;\n\n  /**\n   * Whether the slide-toggle element is checked or not.\n   */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * Whether the slide-toggle element is disabled or not.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the control is in indeterminate state\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /**\n   * Text for on state\n   */\n  @Prop() textOn = 'On';\n\n  /**\n   * Text for off state\n   */\n  @Prop() textOff = 'Off';\n\n  /**\n   * Text for indeterminate state\n   */\n  @Prop() textIndeterminate = 'Mixed';\n\n  /**\n   * Hide `on` and `off` text\n   */\n  @Prop() hideText = false;\n\n  /**\n   * An event will be dispatched each time the slide-toggle changes its value.\n   */\n  @Event() checkedChange: EventEmitter<boolean>;\n\n  onCheckedChange(newChecked: boolean) {\n    if (this.indeterminate) {\n      this.indeterminate = false;\n    }\n    this.checked = newChecked;\n    this.checkedChange.emit(this.checked);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n        onClick={() => this.onCheckedChange(!this.checked)}\n      >\n        <input\n          disabled={this.disabled}\n          indeterminate={this.indeterminate}\n          checked={this.checked}\n          role=\"switch\"\n          tabindex={0}\n          type=\"checkbox\"\n          aria-checked={a11yBoolean(this.checked)}\n          onChange={(event) =>\n            this.onCheckedChange((event.target as any).checked)\n          }\n        ></input>\n        <label class=\"switch\" tabIndex={-1}>\n          <span class=\"slider\"></span>\n        </label>\n        {!this.hideText ? (\n          <Fragment>\n            {!this.indeterminate ? (\n              <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n                {this.checked ? this.textOn : this.textOff}\n              </span>\n            ) : (\n              <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n                {this.textIndeterminate}\n              </span>\n            )}\n          </Fragment>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"]}