@siemens/ix 0.0.0-20240419081748

package/components/tabs.js

@@ -0,0 +1,260 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Prevents angular from change detection when requesting an animation frame
+ *
+ * Credits goes to:
+ * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts
+ */
+const requestAnimationFrameNoNgZone = (callback) => {
+    if (typeof __zone_symbol__requestAnimationFrame === 'function') {
+        return __zone_symbol__requestAnimationFrame(callback);
+    }
+    if (typeof requestAnimationFrame === 'function') {
+        return requestAnimationFrame(callback);
+    }
+    return setTimeout(callback);
+};
+
+const tabsCss = ":host{width:auto;display:flex;align-items:center;position:relative}: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 .tab-items{overflow:hidden;scroll-behavior:smooth;width:100%}:host .tab-items .items-content{display:flex;align-items:center}:host .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}:host .arrow:hover{color:var(--theme-btn-invisible-primary--color--hover);background-color:var(--theme-btn-invisible-primary--background--hover)}:host .arrow:active{color:var(--theme-btn-invisible-primary--color--active);background-color:var(--theme-btn-invisible-primary--background--active)}:host .arrow.right{left:auto;right:0}:host .overflow-shadow{display:block;position:relative;height:100%;width:100%;pointer-events:all}:host .overflow-shadow.shadow-left{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px);mask-image:linear-gradient(90deg, transparent 0px, black 45px)}:host .overflow-shadow.shadow-right{-webkit-mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%)}:host .overflow-shadow.shadow-both{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%)}";
+const IxTabsStyle0 = tabsCss;
+
+const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.selectedChange = createEvent(this, "selectedChange", 7);
+        this.windowStartSize = window.innerWidth;
+        this.clickAction = {
+            timeout: null,
+            isClick: true,
+        };
+        this.small = false;
+        this.rounded = false;
+        this.selected = 0;
+        this.layout = 'auto';
+        this.placement = 'bottom';
+        this.totalItems = 0;
+        this.currentScrollAmount = 0;
+        this.scrollAmount = 100;
+        this.scrollActionAmount = 0;
+    }
+    get arrowLeftElement() {
+        return this.hostElement.shadowRoot.querySelector('[data-arrow-left]');
+    }
+    get arrowRightElement() {
+        return this.hostElement.shadowRoot.querySelector('[data-arrow-right]');
+    }
+    onWindowResize() {
+        this.totalItems = 0;
+        this.totalItems = this.getTabs().length;
+        if (this.windowStartSize === 0)
+            return (this.windowStartSize = window.innerWidth);
+        this.move(this.windowStartSize - window.innerWidth);
+        this.windowStartSize = window.innerWidth;
+    }
+    getTabs() {
+        return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));
+    }
+    getTab(tabIndex) {
+        return this.getTabs()[tabIndex];
+    }
+    getTabsWrapper() {
+        return this.hostElement.shadowRoot.querySelector('.items-content');
+    }
+    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);
+        }
+        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;
+        }
+        const { defaultPrevented } = this.selectedChange.emit(index);
+        if (defaultPrevented) {
+            return;
+        }
+        this.setSelected(index);
+        this.moveTabToView(index);
+    }
+    dragStart(element, event) {
+        if (!this.showArrows())
+            return;
+        if (event.button > 0)
+            return;
+        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;
+    }
+    componentWillLoad() {
+        const tabs = this.getTabs();
+        tabs.map((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);
+        });
+    }
+    componentDidRender() {
+        const tabs = this.getTabs();
+        this.totalItems = tabs.length;
+        tabs.map((element, index) => {
+            element.setAttribute('selected', index === this.selected ? 'true' : 'false');
+        });
+    }
+    componentWillRender() {
+        requestAnimationFrameNoNgZone(() => {
+            const showNextArrow = this.showNextArrow();
+            const previousArrow = this.showPreviousArrow();
+            Object.assign(this.arrowLeftElement.style, this.getArrowStyle(previousArrow));
+            Object.assign(this.arrowRightElement.style, this.getArrowStyle(showNextArrow));
+        });
+    }
+    componentDidLoad() {
+        const tabs = this.getTabs();
+        tabs.forEach((element) => {
+            element.addEventListener('mousedown', (event) => this.dragStart(element, event));
+        });
+    }
+    onTabClick(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
+        const target = event.target;
+        const tabs = this.getTabs();
+        tabs.forEach((tab, index) => {
+            if (!tab.disabled && tab === target) {
+                this.clickTab(index);
+            }
+        });
+    }
+    render() {
+        return (h(Host, { key: '134654adbcf4c3492c3a20162ad48c21f3ffa3dc' }, h("div", { key: 'eecd05941c8a8decc31f6647deb48ab2e279966b', class: "arrow", "data-arrow-left": true, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { key: '45448aa96b97f0bce6d37fec9700a2ac2fd591ad', name: 'chevron-left-small' })), h("div", { key: '705552c2894e0a655c27d855cb55a46e75a1fcf7', class: {
+                'tab-items': true,
+                'overflow-shadow': true,
+                'shadow-left': this.showPreviousArrow(),
+                'shadow-right': this.showNextArrow(),
+                'shadow-both': this.showNextArrow() && this.showPreviousArrow(),
+            } }, h("div", { key: '7f23535c4a4926e2162067024b0e37c13a8149f2', class: "items-content" }, h("slot", { key: 'e1e727370413ea4338f4eda6999eb6803228311c' }))), h("div", { key: '0cd120d1127015dcd779be2cee9292eef6ace6a6', class: "arrow right", "data-arrow-right": true, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { key: '5f9c9a088f2929b64f3eca33bb5800b7a32b7397', name: 'chevron-right-small' }))));
+    }
+    get hostElement() { return this; }
+    static get style() { return IxTabsStyle0; }
+}, [1, "ix-tabs", {
+        "small": [4],
+        "rounded": [4],
+        "selected": [1026],
+        "layout": [1],
+        "placement": [1],
+        "totalItems": [32],
+        "currentScrollAmount": [32],
+        "scrollAmount": [32],
+        "scrollActionAmount": [32]
+    }, [[9, "resize", "onWindowResize"], [0, "tabClick", "onTabClick"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-tabs"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-tabs":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Tabs);
+            }
+            break;
+    } });
+}
+
+export { Tabs as T, defineCustomElement as d };
+
+//# sourceMappingURL=tabs.js.map

package/components/tabs.js.map

@@ -0,0 +1 @@
+{"file":"tabs.js","mappings":"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","names":[],"sources":["src/components/utils/requestAnimationFrame.ts","src/components/tabs/tabs.scss?tag=ix-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"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\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/**\n * Prevents angular from change detection when requesting an animation frame\n *\n * Credits goes to:\n * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts\n */\nexport const requestAnimationFrameNoNgZone = (\n  callback: (...args: any[]) => void\n) => {\n  if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n    return __zone_symbol__requestAnimationFrame(callback);\n  }\n  if (typeof requestAnimationFrame === 'function') {\n    return requestAnimationFrame(callback);\n  }\n  return setTimeout(callback);\n};\n","/*\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\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  width: auto;\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  .tab-items {\n    overflow: hidden;\n    scroll-behavior: smooth;\n    width: 100%;\n\n    .items-content {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  .arrow {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto 0;\n    border-radius: 4px;\n    color: var(--theme-btn-invisible-primary--color);\n    background-color: var(--theme-btn-invisible-primary--background);\n    z-index: 2;\n\n    &:hover {\n      color: var(--theme-btn-invisible-primary--color--hover);\n      background-color: var(--theme-btn-invisible-primary--background--hover);\n    }\n\n    &:active {\n      color: var(--theme-btn-invisible-primary--color--active);\n      background-color: var(--theme-btn-invisible-primary--background--active);\n    }\n\n    &.right {\n      left: auto;\n      right: 0;\n    }\n  }\n\n  .overflow-shadow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n\n    &.shadow-left {\n      mask-image: linear-gradient(90deg, transparent 0px, black 45px);\n    }\n\n    &.shadow-right {\n      mask-image: linear-gradient(\n        90deg,\n        black calc(100% - 45px),\n        transparent 100%\n      );\n    }\n\n    &.shadow-both {\n      mask-image: linear-gradient(\n        90deg,\n        transparent 0px,\n        black 45px,\n        black calc(100% - 45px),\n        transparent 100%\n      );\n    }\n  }\n}\n","/*\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  State,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\n\n@Component({\n  tag: 'ix-tabs',\n  styleUrl: 'tabs.scss',\n  shadow: true,\n})\nexport class Tabs {\n  @Element() hostElement!: HTMLIxTabsElement;\n\n  /**\n   * Set tab items to small size\n   */\n  @Prop() small = false;\n\n  /**\n   * Set rounded tabs\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set default selected tab by index\n   */\n  @Prop({ mutable: true }) selected = 0;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set placement style\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * `selected` property changed\n   *\n   * @since 2.0.0\n   */\n  @Event() selectedChange: EventEmitter<number>;\n\n  @State() totalItems = 0;\n  @State() currentScrollAmount = 0;\n  @State() scrollAmount = 100;\n\n  @State() scrollActionAmount = 0;\n\n  private windowStartSize = window.innerWidth;\n\n  private get arrowLeftElement() {\n    return this.hostElement.shadowRoot.querySelector(\n      '[data-arrow-left]'\n    ) as HTMLElement;\n  }\n\n  private get arrowRightElement() {\n    return this.hostElement.shadowRoot.querySelector(\n      '[data-arrow-right]'\n    ) as HTMLElement;\n  }\n\n  private clickAction: {\n    timeout: NodeJS.Timeout;\n    isClick: boolean;\n  } = {\n    timeout: null,\n    isClick: true,\n  };\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.totalItems = 0;\n    this.totalItems = this.getTabs().length;\n\n    if (this.windowStartSize === 0)\n      return (this.windowStartSize = window.innerWidth);\n    this.move(this.windowStartSize - window.innerWidth);\n    this.windowStartSize = window.innerWidth;\n  }\n\n  private getTabs() {\n    return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n  }\n\n  private getTab(tabIndex: number) {\n    return this.getTabs()[tabIndex];\n  }\n\n  private getTabsWrapper() {\n    return this.hostElement.shadowRoot.querySelector('.items-content');\n  }\n\n  private showArrows() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      return (\n        tabWrapper.scrollWidth >\n          Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n        this.layout === 'auto'\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showPreviousArrow() {\n    try {\n      return this.showArrows() && this.scrollActionAmount < 0;\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showNextArrow() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n      return (\n        this.showArrows() &&\n        this.scrollActionAmount >\n          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private getArrowStyle(condition: boolean) {\n    return {\n      opacity: condition ? '1' : '0',\n      zIndex: condition ? '1' : '-1',\n    };\n  }\n\n  private move(amount: number, click = false) {\n    const tabWrapper = this.getTabsWrapper();\n    const maxScrollWidth =\n      (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;\n\n    amount = this.currentScrollAmount + amount;\n    amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;\n\n    const styles = [\n      `transform: translateX(${amount}px);`,\n      click ? 'transition: all ease-in-out 400ms;' : '',\n    ].join('');\n\n    tabWrapper.setAttribute('style', styles);\n\n    if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n    else this.scrollActionAmount = amount;\n  }\n\n  private moveTabToView(tabIndex: number) {\n    if (!this.showArrows()) return;\n\n    const tab = this.getTab(tabIndex).getBoundingClientRect();\n    const amount = tab.x * -1;\n    this.move(amount, true);\n  }\n\n  private setSelected(index: number) {\n    this.selected = index;\n  }\n\n  private clickTab(index: number) {\n    if (this.dragStop()) {\n      return;\n    }\n\n    const { defaultPrevented } = this.selectedChange.emit(index);\n    if (defaultPrevented) {\n      return;\n    }\n\n    this.setSelected(index);\n    this.moveTabToView(index);\n  }\n\n  private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n    if (!this.showArrows()) return;\n    if (event.button > 0) return;\n\n    this.clickAction.timeout =\n      this.clickAction.timeout === null\n        ? setTimeout(() => (this.clickAction.isClick = false), 300)\n        : null;\n\n    const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n    const mousedownPositionX = event.clientX;\n    const move = (event: MouseEvent) =>\n      this.dragMove(event, tabPositionX, mousedownPositionX);\n\n    window.addEventListener('mouseup', () => {\n      window.removeEventListener('mousemove', move, false);\n      this.dragStop();\n    });\n    window.addEventListener('mousemove', move, false);\n  }\n\n  private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n    this.move(event.clientX + tabX - mousedownX);\n  }\n\n  private dragStop() {\n    clearTimeout(this.clickAction.timeout);\n    this.clickAction.timeout = null;\n\n    if (this.clickAction.isClick) return false;\n\n    this.currentScrollAmount = this.scrollActionAmount;\n    this.clickAction.isClick = true;\n\n    return true;\n  }\n\n  componentWillLoad() {\n    const tabs = this.getTabs();\n\n    tabs.map((element, index) => {\n      if (this.small) element.setAttribute('small', 'true');\n\n      if (this.rounded) element.setAttribute('rounded', 'true');\n\n      element.setAttribute('layout', this.layout);\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n\n      element.setAttribute('placement', this.placement);\n    });\n  }\n\n  componentDidRender() {\n    const tabs = this.getTabs();\n    this.totalItems = tabs.length;\n\n    tabs.map((element, index) => {\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n    });\n  }\n\n  componentWillRender() {\n    requestAnimationFrameNoNgZone(() => {\n      const showNextArrow = this.showNextArrow();\n      const previousArrow = this.showPreviousArrow();\n\n      Object.assign(\n        this.arrowLeftElement.style,\n        this.getArrowStyle(previousArrow)\n      );\n      Object.assign(\n        this.arrowRightElement.style,\n        this.getArrowStyle(showNextArrow)\n      );\n    });\n  }\n\n  componentDidLoad() {\n    const tabs = this.getTabs();\n    tabs.forEach((element) => {\n      element.addEventListener('mousedown', (event) =>\n        this.dragStart(element, event)\n      );\n    });\n  }\n\n  @Listen('tabClick')\n  onTabClick(event: CustomEvent) {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const target = event.target;\n    const tabs = this.getTabs();\n\n    tabs.forEach((tab, index) => {\n      if (!tab.disabled && tab === target) {\n        this.clickTab(index);\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"arrow\"\n          data-arrow-left\n          onClick={() => this.move(this.scrollAmount, true)}\n        >\n          <ix-icon name={'chevron-left-small'}></ix-icon>\n        </div>\n        <div\n          class={{\n            'tab-items': true,\n            'overflow-shadow': true,\n            'shadow-left': this.showPreviousArrow(),\n            'shadow-right': this.showNextArrow(),\n            'shadow-both': this.showNextArrow() && this.showPreviousArrow(),\n          }}\n        >\n          <div class=\"items-content\">\n            <slot></slot>\n          </div>\n        </div>\n        <div\n          class=\"arrow right\"\n          data-arrow-right\n          onClick={() => this.move(-this.scrollAmount, true)}\n        >\n          <ix-icon name={'chevron-right-small'}></ix-icon>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/theme-switcher.js

@@ -0,0 +1,123 @@
+import { T as TypedEvent } from './typed-event.js';
+
+class ThemeSwitcher {
+    get themeChanged() {
+        return this._themeChanged;
+    }
+    hasVariantSuffix(className) {
+        return (className.endsWith(this.suffixDark) ||
+            className.endsWith(this.suffixLight));
+    }
+    isThemeClass(className) {
+        return (className.startsWith(this.prefixTheme) && this.hasVariantSuffix(className));
+    }
+    setTheme(themeName, systemAppearance = false) {
+        if (!this.isThemeClass(themeName) && systemAppearance === false) {
+            throw Error(`Provided theme name ${themeName} does not match our naming conventions. (theme-<name>-(dark,light))`);
+        }
+        if (systemAppearance) {
+            const currentSystemAppearance = getCurrentSystemAppearance();
+            this.replaceBodyThemeClass(themeName);
+            this.setVariant(currentSystemAppearance);
+            return;
+        }
+        this.replaceBodyThemeClass(themeName);
+    }
+    replaceBodyThemeClass(themeName) {
+        const oldThemes = [];
+        document.body.classList.forEach((className) => {
+            if (this.isThemeClass(className)) {
+                oldThemes.push(className);
+            }
+        });
+        document.body.classList.remove(...oldThemes);
+        document.body.classList.add(themeName);
+    }
+    toggleMode() {
+        const oldThemes = [];
+        document.body.classList.forEach((className) => {
+            if (this.isThemeClass(className)) {
+                oldThemes.push(className);
+            }
+        });
+        if (oldThemes.length === 0) {
+            document.body.classList.add(this.getOppositeMode(this.defaultTheme));
+            return;
+        }
+        oldThemes.forEach((themeName) => {
+            document.body.classList.replace(themeName, this.getOppositeMode(themeName));
+        });
+    }
+    getCurrentTheme() {
+        var _a;
+        return ((_a = Array.from(document.body.classList).find((className) => this.isThemeClass(className))) !== null && _a !== void 0 ? _a : `theme-${window
+            .getComputedStyle(document.body)
+            .getPropertyValue('--ix-theme-name')}`);
+    }
+    setVariant(variant = getCurrentSystemAppearance()) {
+        const currentTheme = this.getCurrentTheme();
+        document.body.classList.remove(currentTheme);
+        if (currentTheme.endsWith(this.suffixDark)) {
+            document.body.classList.add(currentTheme.replace(/-dark$/g, `-${variant}`));
+        }
+        if (currentTheme.endsWith(this.suffixLight)) {
+            document.body.classList.add(currentTheme.replace(/-light$/g, `-${variant}`));
+        }
+    }
+    getOppositeMode(themeName) {
+        if (themeName.endsWith(this.suffixDark)) {
+            return themeName.replace(/-dark$/g, this.suffixLight);
+        }
+        if (themeName.endsWith(this.suffixLight)) {
+            return themeName.replace(/-light$/g, this.suffixDark);
+        }
+    }
+    handleMutations(mutations) {
+        return mutations.forEach((mutation) => {
+            const { target } = mutation;
+            target.classList.forEach((className) => {
+                var _a;
+                if (this.isThemeClass(className) &&
+                    !((_a = mutation.oldValue) === null || _a === void 0 ? void 0 : _a.includes(className))) {
+                    this._themeChanged.emit(className);
+                }
+            });
+        });
+    }
+    registerMutationObserver() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        if (!('MutationObserver' in window)) {
+            console.warn('ThemeSwitcher not supported by your browser. Missing MutationObserver API');
+            return;
+        }
+        this.mutationObserver = new MutationObserver((mutations) => {
+            this.handleMutations(mutations);
+        });
+        this.mutationObserver.observe(document.body, {
+            attributeFilter: ['class'],
+            attributeOldValue: true,
+        });
+    }
+    constructor() {
+        this.prefixTheme = 'theme-';
+        this.suffixLight = '-light';
+        this.suffixDark = '-dark';
+        this.defaultTheme = 'theme-classic-dark';
+        this._themeChanged = new TypedEvent();
+        this.registerMutationObserver();
+    }
+}
+const getCurrentSystemAppearance = () => {
+    const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');
+    if (matchMedia.matches) {
+        return 'dark';
+    }
+    return 'light';
+};
+const themeSwitcher = new ThemeSwitcher();
+
+export { getCurrentSystemAppearance as g, themeSwitcher as t };
+
+//# sourceMappingURL=theme-switcher.js.map

package/components/theme-switcher.js.map

@@ -0,0 +1 @@
+{"file":"theme-switcher.js","mappings":"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","names":[],"sources":["src/components/utils/theme-switcher.ts"],"sourcesContent":["import { TypedEvent } from './typed-event';\n\nexport type ThemeVariant = 'light' | 'dark';\n\nclass ThemeSwitcher {\n  readonly prefixTheme = 'theme-';\n  readonly suffixLight = '-light';\n  readonly suffixDark = '-dark';\n  readonly defaultTheme = 'theme-classic-dark';\n\n  mutationObserver: MutationObserver;\n  _themeChanged = new TypedEvent<string>();\n\n  public get themeChanged() {\n    return this._themeChanged;\n  }\n\n  public hasVariantSuffix(className: string) {\n    return (\n      className.endsWith(this.suffixDark) ||\n      className.endsWith(this.suffixLight)\n    );\n  }\n\n  private isThemeClass(className: string) {\n    return (\n      className.startsWith(this.prefixTheme) && this.hasVariantSuffix(className)\n    );\n  }\n\n  public setTheme(themeName: string, systemAppearance = false) {\n    if (!this.isThemeClass(themeName) && systemAppearance === false) {\n      throw Error(\n        `Provided theme name ${themeName} does not match our naming conventions. (theme-<name>-(dark,light))`\n      );\n    }\n\n    if (systemAppearance) {\n      const currentSystemAppearance = getCurrentSystemAppearance();\n      this.replaceBodyThemeClass(themeName);\n      this.setVariant(currentSystemAppearance);\n      return;\n    }\n\n    this.replaceBodyThemeClass(themeName);\n  }\n\n  private replaceBodyThemeClass(themeName: string) {\n    const oldThemes: string[] = [];\n    document.body.classList.forEach((className) => {\n      if (this.isThemeClass(className)) {\n        oldThemes.push(className);\n      }\n    });\n\n    document.body.classList.remove(...oldThemes);\n    document.body.classList.add(themeName);\n  }\n\n  public toggleMode() {\n    const oldThemes: string[] = [];\n\n    document.body.classList.forEach((className) => {\n      if (this.isThemeClass(className)) {\n        oldThemes.push(className);\n      }\n    });\n\n    if (oldThemes.length === 0) {\n      document.body.classList.add(this.getOppositeMode(this.defaultTheme));\n      return;\n    }\n\n    oldThemes.forEach((themeName) => {\n      document.body.classList.replace(\n        themeName,\n        this.getOppositeMode(themeName)\n      );\n    });\n  }\n\n  public getCurrentTheme() {\n    return (\n      Array.from(document.body.classList).find((className) =>\n        this.isThemeClass(className)\n      ) ??\n      `theme-${window\n        .getComputedStyle(document.body)\n        .getPropertyValue('--ix-theme-name')}`\n    );\n  }\n\n  public setVariant(variant: ThemeVariant = getCurrentSystemAppearance()) {\n    const currentTheme = this.getCurrentTheme();\n    document.body.classList.remove(currentTheme);\n\n    if (currentTheme.endsWith(this.suffixDark)) {\n      document.body.classList.add(\n        currentTheme.replace(/-dark$/g, `-${variant}`)\n      );\n    }\n\n    if (currentTheme.endsWith(this.suffixLight)) {\n      document.body.classList.add(\n        currentTheme.replace(/-light$/g, `-${variant}`)\n      );\n    }\n  }\n\n  private getOppositeMode(themeName: string) {\n    if (themeName.endsWith(this.suffixDark)) {\n      return themeName.replace(/-dark$/g, this.suffixLight);\n    }\n\n    if (themeName.endsWith(this.suffixLight)) {\n      return themeName.replace(/-light$/g, this.suffixDark);\n    }\n  }\n\n  private handleMutations(mutations: MutationRecord[]) {\n    return mutations.forEach((mutation) => {\n      const { target } = mutation;\n      (target as HTMLElement).classList.forEach((className) => {\n        if (\n          this.isThemeClass(className) &&\n          !mutation.oldValue?.includes(className)\n        ) {\n          this._themeChanged.emit(className);\n        }\n      });\n    });\n  }\n\n  private registerMutationObserver() {\n    if (typeof (window as any) === 'undefined') {\n      return;\n    }\n\n    if (!('MutationObserver' in window)) {\n      console.warn(\n        'ThemeSwitcher not supported by your browser. Missing MutationObserver API'\n      );\n      return;\n    }\n\n    this.mutationObserver = new MutationObserver((mutations) => {\n      this.handleMutations(mutations);\n    });\n\n    this.mutationObserver.observe(document.body, {\n      attributeFilter: ['class'],\n      attributeOldValue: true,\n    });\n  }\n\n  public constructor() {\n    this.registerMutationObserver();\n  }\n}\n\nexport type IxTheme =\n  | 'classic'\n  | 'classic-dark'\n  | 'classic-light'\n  | (string & {});\n\nexport const getCurrentSystemAppearance = (): ThemeVariant => {\n  const matchMedia = window.matchMedia('(prefers-color-scheme: dark)');\n\n  if (matchMedia.matches) {\n    return 'dark';\n  }\n\n  return 'light';\n};\n\nexport const themeSwitcher = new ThemeSwitcher();\n"],"version":3}