@siemens/ix 1.0.0-beta.2

package/dist/esm/ix-tab-item.entry.js

@@ -0,0 +1,63 @@
+import { r as registerInstance, h, H as Host } from './index-55cfd20d.js';
+
+const tabItemCss = "@charset \"UTF-8\";ix-tab-item{position:relative;display:flex;align-items:center;justify-content:center;height:40px;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}ix-tab-item.circle{height:72px}ix-tab-item.top::after{top:0}ix-tab-item.bottom::after{bottom:0}ix-tab-item::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}ix-tab-item.stretched{flex-basis:100%;max-width:-moz-max-content;max-width:max-content;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ix-tab-item .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;vertical-align:middle}ix-tab-item .text span,ix-tab-item .text span::before{pointer-events:none}ix-tab-item:hover:not(.circle){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}ix-tab-item:hover:not(.circle)::after{background-color:var(--theme-tab-indicator--background--hover)}ix-tab-item:active:not(.circle){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}ix-tab-item:active:not(.circle)::after{background-color:var(--theme-tab-indicator--background--active)}ix-tab-item:focus-visible{outline:0px solid var(--focus--border-color)}ix-tab-item:focus-visible .circle{outline:1px solid var(--focus--border-color)}ix-tab-item:focus-visible:not(.circle){outline:1px solid var(--focus--border-color)}ix-tab-item.disabled{color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}ix-tab-item.disabled::after{background-color:var(--theme-tab-indicator--background--disabled)}ix-tab-item.selected:not(.disabled){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}ix-tab-item.selected:not(.disabled)::after{background-color:var(--theme-tab-indicator--background--selected)}ix-tab-item.icon{padding:1.5rem 0.5rem}ix-tab-item.small-tab{height:32px;padding:1rem}ix-tab-item.small-tab.icon{padding:1rem 0.25rem}ix-tab-item .circle{display:flex;justify-content:center;align-items:center;height:48px;width:48px;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}ix-tab-item .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}ix-tab-item .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}ix-tab-item .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}ix-tab-item .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}ix-tab-item .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}ix-tab-item .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}ix-tab-item .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:16px;color:var(--theme-pill-outline--color);cursor:pointer}ix-tab-item .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}ix-tab-item .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}ix-tab-item .hidden{display:none}";
+
+const TabItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Set selected tab
+     */
+    this.selected = false;
+    /**
+     * Set disabled tab
+     */
+    this.disabled = false;
+    /**
+     * Set small size tab
+     */
+    this.small = false;
+    /**
+     * Set icon only tab
+     */
+    this.icon = false;
+    /**
+     * Set rounded tab
+     */
+    this.rounded = false;
+    /**
+     * Set layout width style
+     */
+    this.layout = 'auto';
+    /**
+     * Set selected placement
+     */
+    this.placement = 'bottom';
+  }
+  tabItemClasses(props) {
+    return {
+      selected: props.selected,
+      disabled: props.disabled,
+      'small-tab': props.small,
+      icon: props.small,
+      stretched: props.layout === 'stretched',
+      bottom: props.placement === 'bottom',
+      top: props.placement === 'top',
+      circle: props.circle
+    };
+  }
+  render() {
+    return (h(Host, { class: this.tabItemClasses({
+        selected: this.selected,
+        disabled: this.disabled,
+        small: this.small,
+        icon: this.icon,
+        layout: this.layout,
+        placement: this.placement,
+        circle: this.rounded,
+      }), tabIndex: 0 }, h("div", { class: { circle: this.rounded, text: !this.rounded, selected: this.selected, disabled: this.disabled } }, h("slot", null)), h("div", { class: { counter: true, selected: this.selected, hidden: !(this.rounded && this.counter !== undefined), disabled: this.disabled } }, this.counter)));
+  }
+};
+TabItem.style = tabItemCss;
+
+export { TabItem as ix_tab_item };

package/dist/esm/ix-tabs.entry.js

@@ -0,0 +1,183 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-55cfd20d.js';
+
+const tabsCss = "ix-tabs{width:auto;display:flex;align-items:center;position:relative}ix-tabs .tab-items{overflow:hidden;scroll-behavior:smooth}ix-tabs .tab-items .items-content{display:flex;align-items:center}ix-tabs .arrow{position:absolute;display:flex;align-items:center;justify-content:center;width:32px;height:32px;top:0;bottom:0;left:0;margin:auto 0;border-radius:4px;color:var(--theme-btn-invisible-primary--color);background-color:var(--theme-btn-invisible-primary--background);z-index:2}ix-tabs .arrow:hover{color:var(--theme-btn-invisible-primary--color--hover);background-color:var(--theme-btn-invisible-primary--background--hover)}ix-tabs .arrow:active{color:var(--theme-btn-invisible-primary--color--active);background-color:var(--theme-btn-invisible-primary--background--active)}ix-tabs .arrow.right{left:auto;right:0}ix-tabs .overflow-shadow{width:50px;height:40px;position:absolute;left:0;top:0;background:linear-gradient(90deg, var(--theme-color-1) 50%, transparent);z-index:1}ix-tabs .overflow-shadow.right{left:auto;right:0;background:linear-gradient(90deg, transparent, var(--theme-color-1) 50%)}";
+
+let windowStartSize = window.innerWidth;
+const Tabs = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Set tab items to small size
+     */
+    this.small = false;
+    /**
+     * Set rounded tabs
+     */
+    this.rounded = false;
+    /**
+     * Set default selected tab by index
+     */
+    this.selected = 0;
+    /**
+     * Set layout width style
+     */
+    this.layout = 'auto';
+    /**
+     * Set placement style
+     */
+    this.placement = 'bottom';
+    this.totalItems = 0;
+    this.currentScrollAmount = 0;
+    this.scrollAmount = 100;
+    this.scrollActionAmount = 0;
+    this.clickAction = {
+      timeout: null,
+      isClick: true,
+    };
+  }
+  onWindowResize() {
+    this.totalItems = 0;
+    this.totalItems = this.getTabs().length;
+    if (windowStartSize === 0)
+      return (windowStartSize = window.innerWidth);
+    this.move(windowStartSize - window.innerWidth);
+    windowStartSize = window.innerWidth;
+  }
+  getTabs() {
+    return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));
+  }
+  getTab(tabIndex) {
+    return this.getTabs()[tabIndex];
+  }
+  getTabsWrapper() {
+    return this.hostElement.getElementsByClassName('items-content')[0];
+  }
+  showArrows() {
+    try {
+      const tabWrapper = this.getTabsWrapper();
+      return (tabWrapper.scrollWidth >
+        Math.ceil(tabWrapper.getBoundingClientRect().width) &&
+        this.layout === 'auto');
+    }
+    catch (error) {
+      return false;
+    }
+  }
+  showPreviousArrow() {
+    try {
+      return this.showArrows() && this.scrollActionAmount < 0;
+    }
+    catch (error) {
+      return false;
+    }
+  }
+  showNextArrow() {
+    try {
+      const tabWrapper = this.getTabsWrapper();
+      const tabWrapperRect = tabWrapper.getBoundingClientRect();
+      return (this.showArrows() &&
+        this.scrollActionAmount >
+          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1 &&
+        window.innerWidth <= tabWrapper.scrollWidth);
+    }
+    catch (error) {
+      return false;
+    }
+  }
+  getArrowStyle(condition) {
+    return {
+      opacity: condition ? '1' : '0',
+      zIndex: condition ? '1' : '-1',
+    };
+  }
+  move(amount, click = false) {
+    const tabWrapper = this.getTabsWrapper();
+    const maxScrollWidth = (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;
+    amount = this.currentScrollAmount + amount;
+    amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;
+    const styles = [
+      `transform: translateX(${amount}px);`,
+      click ? `transition: all ease-in-out 400ms;` : '',
+    ].join('');
+    tabWrapper.setAttribute('style', styles);
+    if (click)
+      this.currentScrollAmount = this.scrollActionAmount = amount;
+    else
+      this.scrollActionAmount = amount;
+  }
+  moveTabToView(tabIndex) {
+    if (!this.showArrows())
+      return;
+    const tab = this.getTab(tabIndex).getBoundingClientRect();
+    const amount = tab.x * -1;
+    this.move(amount, true);
+  }
+  setSelected(index) {
+    this.selected = index;
+  }
+  clickTab(index) {
+    if (this.dragStop())
+      return;
+    this.setSelected(index);
+    this.moveTabToView(index);
+  }
+  dragStart(element, event) {
+    if (!this.showArrows())
+      return;
+    if (event.button > 0)
+      return; // ignore right click
+    this.clickAction.timeout =
+      this.clickAction.timeout === null
+        ? setTimeout(() => (this.clickAction.isClick = false), 300)
+        : null;
+    const tabPositionX = parseFloat(window.getComputedStyle(element).left);
+    const mousedownPositionX = event.clientX;
+    const move = (event) => this.dragMove(event, tabPositionX, mousedownPositionX);
+    window.addEventListener('mouseup', () => {
+      window.removeEventListener('mousemove', move, false);
+      this.dragStop();
+    });
+    window.addEventListener('mousemove', move, false);
+  }
+  dragMove(event, tabX, mousedownX) {
+    this.move(event.clientX + tabX - mousedownX);
+  }
+  dragStop() {
+    clearTimeout(this.clickAction.timeout);
+    this.clickAction.timeout = null;
+    if (this.clickAction.isClick)
+      return false;
+    this.currentScrollAmount = this.scrollActionAmount;
+    this.clickAction.isClick = true;
+    return true;
+  }
+  componentDidRender() {
+    const tabs = this.getTabs();
+    this.totalItems = tabs.length;
+    tabs.forEach((element, index) => {
+      if (this.small)
+        element.setAttribute('small', 'true');
+      if (this.rounded)
+        element.setAttribute('rounded', 'true');
+      element.setAttribute('layout', this.layout);
+      element.setAttribute('selected', index === this.selected ? 'true' : 'false');
+      element.setAttribute('placement', this.placement);
+    });
+  }
+  componentDidLoad() {
+    const tabs = this.getTabs();
+    tabs.forEach((element, index) => {
+      const isDisabled = element.getAttribute('disabled') !== null;
+      if (!isDisabled)
+        element.addEventListener('click', () => this.clickTab(index));
+      element.addEventListener('mousedown', (event) => this.dragStart(element, event));
+    });
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "overflow-shadow", style: this.getArrowStyle(this.showPreviousArrow()) }), h("div", { class: "arrow", style: this.getArrowStyle(this.showPreviousArrow()), onClick: () => this.move(this.scrollAmount, true) }, h("span", { class: "glyph glyph-chevron-left-small" })), h("div", { class: "tab-items" }, h("div", { class: "items-content" }, h("slot", null))), h("div", { class: "overflow-shadow right", style: this.getArrowStyle(this.showNextArrow()) }), h("div", { class: "arrow right", style: this.getArrowStyle(this.showNextArrow()), onClick: () => this.move(-this.scrollAmount, true) }, h("span", { class: "glyph glyph-chevron-right-small" }))));
+  }
+  get hostElement() { return getElement(this); }
+};
+Tabs.style = tabsCss;
+
+export { Tabs as ix_tabs };

package/dist/esm/ix-tile.entry.js

@@ -0,0 +1,23 @@
+import { r as registerInstance, h, H as Host } from './index-55cfd20d.js';
+
+const tileCss = ".sc-ix-tile-h{min-width:11.937rem;max-width:11.937rem;width:11.937rem;display:flex;flex-direction:column;border:1px solid var(--theme-tile--border);border-radius:var(--theme-tile--border-radius);background-color:var(--theme-color-2);color:var(--theme-color-std-text);box-shadow:var(--theme-tile--box-shadow)}.tile-small.sc-ix-tile-h{height:2.5rem;min-height:2.5rem;max-height:2.5rem}.tile-medium.sc-ix-tile-h{height:5rem;min-height:5rem;max-height:5rem}.tile-big.sc-ix-tile-h{height:10rem;min-height:10rem;max-height:10rem}.sc-ix-tile-h:active,.sc-ix-tile-h:focus,.sc-ix-tile-h:visited{outline:none}.sc-ix-tile-h .tile-header.sc-ix-tile{display:flex;align-items:center}.sc-ix-tile-h .tile-header.sc-ix-tile:not(:empty),.sc-ix-tile-h .tile-subheader.sc-ix-tile:not(:empty),.sc-ix-tile-h .tile-content.sc-ix-tile:not(:empty),.sc-ix-tile-h .tile-footer.sc-ix-tile:not(:empty){padding:0 1rem}.sc-ix-tile-h .tile-header.sc-ix-tile,.sc-ix-tile-h .tile-subheader.sc-ix-tile,.sc-ix-tile-h .tile-content.sc-ix-tile{flex-grow:1}.sc-ix-tile-h .tile-header.sc-ix-tile:not(:empty){display:flex;height:2.5rem;max-height:2.5rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem}.sc-ix-tile-h .tile-subheader.sc-ix-tile{color:var(--theme-btn-invisible-secondary--color);flex-grow:0}.sc-ix-tile-h .tile-content.sc-ix-tile{flex-grow:1}.sc-ix-tile-h .tile-footer.sc-ix-tile:not(:empty){-webkit-border-before:1px solid var(--theme-color-1);border-block-start:1px solid var(--theme-color-1);height:2.5rem}";
+
+const Tile = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Size of the tile - one of 'small', 'medium' or 'large'
+     */
+    this.size = 'medium';
+  }
+  render() {
+    return (h(Host, { class: {
+        'tile-small': this.size === 'small',
+        'tile-medium': this.size === 'medium',
+        'tile-big': this.size === 'big',
+      } }, h("div", { class: "tile-header text-l-title" }, h("slot", { name: "header" })), h("div", { class: "tile-subheader" }, h("slot", { name: "subheader" })), h("div", { class: "tile-content" }, h("slot", null)), h("div", { class: "tile-footer" }, h("slot", { name: "footer" }))));
+  }
+};
+Tile.style = tileCss;
+
+export { Tile as ix_tile };

package/dist/esm/ix-toast_2.entry.js

@@ -0,0 +1,150 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-55cfd20d.js';
+import { T as TypedEvent } from './typed-event-dd6c83dd.js';
+
+const toastCss = ".sc-ix-toast-h{display:flex;flex-direction:column;position:relative;min-width:17.5rem;max-width:17.5rem;min-height:3.5rem;pointer-events:all;background-color:var(--theme-toast--background);border:var(--theme-toast--border-thickness) solid var(--theme-toast--border-color);border-radius:var(--theme-toast--border-radius);box-shadow:var(--theme-toast--box-shadow);--animate-duration:300ms}.sc-ix-toast-h .toast-body.sc-ix-toast{display:flex;position:relative;width:100%;flex-grow:1}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-icon.sc-ix-toast{display:flex;align-items:flex-start;margin:1rem}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-content.sc-ix-toast{overflow:hidden;text-overflow:ellipsis;min-width:0;width:100%;max-width:10.25rem;margin-top:calc(\n        1rem + var(--theme-toast--border-thickness)\n      );margin-bottom:0.75rem}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-content.sc-ix-toast .toast-message.sc-ix-toast{min-width:0}.sc-ix-toast-h .toast-close.sc-ix-toast{display:flex;position:relative;margin:0.75rem;pointer-events:all}.sc-ix-toast-h .toast-progress-bar.sc-ix-toast{position:absolute;bottom:0;height:0.25rem;width:100%;background-color:var(--theme-toast-timer-value--background);transform-origin:left}.sc-ix-toast-h .toast-progress-bar--animated.sc-ix-toast{animation:trackProgress linear 1 forwards}.sc-ix-toast-h .toast-progress-bar--touched.sc-ix-toast{transition:transform 1s}.sc-ix-toast-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-toast-h:not(.disabled):not(:disabled):hover .toast-progress-bar.sc-ix-toast{visibility:hidden;transition:none}@keyframes trackProgress{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}";
+
+const Toast = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.closeToast = createEvent(this, "closeToast", 7);
+    /**
+     * Autoclose title after delay
+     */
+    this.autoCloseDelay = 5000;
+    /**
+     * Autoclose behavior
+     */
+    this.autoClose = true;
+    this.progress = 0;
+    this.isRunning = true;
+    this.touched = false;
+  }
+  getIcon() {
+    if (this.icon) {
+      return h("ix-icon", { name: this.icon, color: this.iconColor, size: "24" });
+    }
+    switch (this.type) {
+      case 'info':
+        return h("ix-icon", { name: 'info', size: "24", color: "color-std-text" });
+      case 'error':
+        return h("ix-icon", { name: 'error', size: "24", color: "color-alarm" });
+      case 'success':
+        return h("ix-icon", { name: 'success', size: "24", color: "color-success" });
+      case 'warning':
+        return h("ix-icon", { name: 'warning', size: "24", color: "color-warning" });
+      default:
+        return '';
+    }
+  }
+  close() {
+    if (this.host) {
+      this.host.classList.add('animate__fadeOut');
+    }
+    setTimeout(() => {
+      this.closeToast.emit();
+    }, 250);
+  }
+  render() {
+    let progressBarElement;
+    let progressBarStyle = {};
+    const progressBarClass = [`toast-progress-bar`];
+    if (!this.touched) {
+      progressBarStyle = {
+        animationDuration: `${this.autoCloseDelay}ms`,
+        animationPlayState: this.isRunning ? 'running' : 'paused',
+      };
+      progressBarClass.push('toast-progress-bar--animated');
+    }
+    else {
+      progressBarClass.push('toast-progress-bar--touched');
+    }
+    const updateProgress = () => {
+      if (progressBarElement) {
+        progressBarElement.style.transform = `scaleX(${this.progress})`;
+      }
+    };
+    return (h(Host, { class: "animate__animated animate__fadeIn" }, h("div", { class: "toast-body", onPointerLeave: () => {
+        this.progress = 0;
+        updateProgress();
+      }, onPointerEnter: () => {
+        this.isRunning = false;
+        this.touched = true;
+        this.progress = 1;
+        updateProgress();
+      } }, this.type || this.icon ? (h("div", { class: "toast-icon" }, this.getIcon())) : null, h("div", { class: "toast-content" }, this.toastTitle ? (h("div", { class: "toast-title text-default-title-single" }, this.toastTitle)) : null, h("div", { class: "toast-message text-default" }, h("slot", null))), h("div", { class: "toast-close" }, h("ix-icon-button", { icon: "close", size: "24", ghost: true, onClick: () => this.closeToast.emit() }))), this.autoClose ? (h("div", { class: progressBarClass.join(' '), style: progressBarStyle, ref: (r) => (progressBarElement = r), onAnimationEnd: () => this.close(), onTransitionEnd: () => {
+        if (this.progress === 0) {
+          this.close();
+        }
+      } })) : null));
+  }
+  get host() { return getElement(this); }
+};
+Toast.style = toastCss;
+
+const ToastContainer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     */
+    this.containerId = 'toast-container';
+    /**
+     */
+    this.containerClass = 'toast-container';
+    /**
+     */
+    this.position = 'bottom-right';
+  }
+  get hostContainer() {
+    return document.getElementById(this.containerId);
+  }
+  componentDidLoad() {
+    if (!document.getElementById(this.containerId)) {
+      const toastContainer = document.createElement('div');
+      toastContainer.id = this.containerId;
+      toastContainer.classList.add(this.containerClass);
+      toastContainer.classList.add(`toast-container--${this.position}`);
+      document.body.appendChild(toastContainer);
+    }
+  }
+  /**
+   * Display a toast message
+   * @param config
+   */
+  async showToast(config) {
+    const toast = document.createElement('ix-toast');
+    const onClose = new TypedEvent();
+    function removeToast(result) {
+      toast.remove();
+      onClose.emit(result);
+    }
+    toast.toastTitle = config.title;
+    toast.type = config.type;
+    toast.autoClose = config.autoClose;
+    toast.autoCloseDelay = config.autoCloseDelay;
+    toast.icon = config.icon;
+    toast.iconColor = config.iconColor;
+    toast.addEventListener('closeToast', (event) => {
+      const { detail } = event;
+      removeToast(detail);
+    });
+    if (typeof config.message === 'string') {
+      toast.innerText = config.message;
+    }
+    else {
+      toast.appendChild(config.message);
+    }
+    this.hostContainer.appendChild(toast);
+    return {
+      onClose,
+      close: (result) => {
+        removeToast(result);
+      },
+    };
+  }
+  render() {
+    return h(Host, null);
+  }
+  get host() { return getElement(this); }
+};
+
+export { Toast as ix_toast, ToastContainer as ix_toast_container };

package/dist/esm/ix-toggle.entry.js

@@ -0,0 +1,78 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-55cfd20d.js';
+
+const toggleCss = ".sc-ix-toggle-h{display:flex;align-items:center;outline:none}.sc-ix-toggle-h .switch.sc-ix-toggle{position:relative;display:inline-flex;align-items:center;min-width:3rem;height:2rem}.sc-ix-toggle-h .switch.sc-ix-toggle:not(.disabled):not(:disabled):focus-visible{outline-color:var(--focus--border-color);outline-style:solid;outline-width:1px}.sc-ix-toggle-h .switch.sc-ix-toggle input.sc-ix-toggle{opacity:0;width:0;height:0}.sc-ix-toggle-h .slider.sc-ix-toggle{display:flex;align-items:center;justify-content:center;position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0}.sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle{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}.sc-ix-toggle-h .slider.sc-ix-toggle:before{position:absolute;content:\"\";height:1.5rem;width:1.5rem;left:0.125rem;background-color:var(--theme-switch-thumb-off--background);transition:transform 150ms;border-radius:50%;border:1px solid var(--theme-switch-thumb-off--border-color);box-shadow:var(--theme-switch-thumb--box-shadow)}.sc-ix-toggle-h input.sc-ix-toggle:checked+.slider.sc-ix-toggle:before{transform:translateX(1.125rem);left:0.25rem}.sc-ix-toggle-h .text.sc-ix-toggle{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}.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-off--background--hover);border-color:var(--theme-switch-thumb-off--border-color--hover)}.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider-track.sc-ix-toggle{background-color:var(--theme-switch-off--background--hover);border-color:var(--theme-switch-off--border-color--hover)}.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .text.sc-ix-toggle{color:var(--theme-switch--color--hover)}.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-off--background--active);border-color:var(--theme-switch-thumb-off--border-color--active)}.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider-track.sc-ix-toggle{background-color:var(--theme-switch-off--background--active);border-color:var(--theme-switch-off--border-color--active)}.sc-ix-toggle-h:not(.disabled):not(:disabled):active .text.sc-ix-toggle{color:var(--theme-switch--color--active)}.checked.sc-ix-toggle-h .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-on--background);border-color:var(--theme-switch-thumb-on--border-color)}.checked.sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-on--background);border-color:var(--theme-switch-on--border-color)}.checked.sc-ix-toggle-h .text.sc-ix-toggle{color:var(--theme-switch--color)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-on--background--hover);border-color:var(--theme-switch-thumb-on--border-color--hover)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-on--background--hover);border-color:var(--theme-switch-on--border-color--hover)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .text.sc-ix-toggle{color:var(--theme-switch--color--hover)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-on--background--active);border-color:var(--theme-switch-thumb-on--border-color--active)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider-track.sc-ix-toggle{background-color:var(--theme-switch-on--background--active);border-color:var(--theme-switch-on--border-color--active)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):active .text.sc-ix-toggle{color:var(--theme-switch--color--active)}.indeterminate.sc-ix-toggle-h .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-mixed--background);border-color:var(--theme-switch-thumb-mixed--border-color)}.indeterminate.sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-mixed--background);border-color:var(--theme-switch-mixed--border-color)}.indeterminate.sc-ix-toggle-h .text.sc-ix-toggle{color:var(--theme-switch--color)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-mixed--background--hover);border-color:var(--theme-switch-thumb-mixed--border-color--hover)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-mixed--background--hover);border-color:var(--theme-switch-mixed--border-color--hover)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .text.sc-ix-toggle{color:var(--theme-switch--color--hover)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-mixed--background--active);border-color:var(--theme-switch-thumb-mixed--border-color--active)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider-track.sc-ix-toggle{background-color:var(--theme-switch-mixed--background--active);border-color:var(--theme-switch-mixed--border-color--active)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):active .text.sc-ix-toggle{color:var(--theme-switch--color--active)}.indeterminate.sc-ix-toggle-h .slider.sc-ix-toggle:before{transform:translateX(0.625rem)}[disabled].sc-ix-toggle-h .slider.sc-ix-toggle,.disabled.sc-ix-toggle-h .slider.sc-ix-toggle{cursor:initial}[disabled].sc-ix-toggle-h .slider.sc-ix-toggle:before,.disabled.sc-ix-toggle-h .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-off--background--disabled);border-color:var(--theme-switch-thumb-off--border-color--disabled)}[disabled].sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle,.disabled.sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-off--background--disabled);border-color:var(--theme-switch-off--border-color--disabled)}[disabled].sc-ix-toggle-h .text.sc-ix-toggle,.disabled.sc-ix-toggle-h .text.sc-ix-toggle{color:var(--theme-switch--color--disabled)}";
+
+const CuiToggle = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.checkedChange = createEvent(this, "checkedChange", 7);
+    /**
+     * Whether the slide-toggle element is checked or not.
+     */
+    this.checked = false;
+    /**
+     * Whether the slide-toggle element is disabled or not.
+     */
+    this.disabled = false;
+    /**
+     * If true the control is in indeterminate state
+     */
+    this.indeterminate = false;
+    /**
+     * Basic and status colors from color palette
+     * @deprecated - Has no effect on the rendered control
+     */
+    this.color = 'accent';
+    /**
+     * Text for on state
+     */
+    this.textOn = 'On';
+    /**
+     * Text for off state
+     */
+    this.textOff = 'Off';
+    /**
+     * Text for indeterminate state
+     */
+    this.textIndeterminate = 'Mixed';
+    /**
+     * Hide `on` and `off` text
+     */
+    this.hideText = false;
+  }
+  async onKeyDown(event) {
+    const targetElement = event.target;
+    if (!this.hostElement.contains(targetElement)) {
+      return;
+    }
+    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.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));
+  }
+  get hostElement() { return getElement(this); }
+};
+CuiToggle.style = toggleCss;
+
+export { CuiToggle as ix_toggle };