npm - @siemens/ix - Versions diffs - 0.0.0-20240419081748 - Mend

@siemens/ix 0.0.0-20240419081748

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.

Files changed (2134) hide show

package/dist/cjs/ix-toggle-button.cjs.entry.js ADDED Viewed

@@ -0,0 +1,78 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-c6f0ac73.js');
+const baseButton = require('./base-button-2f74b19d.js');
+const a11y = require('./a11y-d3ce56d1.js');
+const toggleButtonCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:var(--theme-default-time);padding:0 0.5rem;min-width:5rem;gap:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .glyph{margin-right:0.25rem;font-weight:400}.btn:focus-visible,.btn.focus{box-shadow:none}.btn-primary{border-radius:var(--theme-btn--border-radius)}.btn-primary,.btn-primary.focus,.btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}.btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-primary.hover,.btn-primary:hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}.btn-primary.selected.hover,.btn-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}.btn-primary.selected:not(:disabled):not(.disabled):active,.btn-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-primary.disabled,.btn-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}.btn-outline-primary{border-radius:var(--theme-btn--border-radius)}.btn-outline-primary,.btn-outline-primary.focus,.btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}.btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-primary.hover,.btn-outline-primary:hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}.btn-outline-primary.selected.hover,.btn-outline-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}.btn-outline-primary.selected:not(:disabled):not(.disabled):active,.btn-outline-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}.btn-invisible-primary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-primary,.btn-invisible-primary.focus,.btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-primary.hover,.btn-invisible-primary:hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}.btn-invisible-primary.selected.hover,.btn-invisible-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-primary:not(:disabled):not(.disabled):active,.btn-invisible-primary:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}.btn-invisible-primary.selected:not(:disabled):not(.disabled):active,.btn-invisible-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-primary.disabled,.btn-invisible-primary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}.btn-secondary{border-radius:var(--theme-btn--border-radius)}.btn-secondary,.btn-secondary.focus,.btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}.btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-secondary.hover,.btn-secondary:hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}.btn-secondary.selected.hover,.btn-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}.btn-secondary.selected:not(:disabled):not(.disabled):active,.btn-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-secondary.disabled,.btn-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}.btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}.btn-outline-secondary,.btn-outline-secondary.focus,.btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-secondary.hover,.btn-outline-secondary:hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}.btn-outline-secondary.selected.hover,.btn-outline-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}.btn-outline-secondary.selected:not(:disabled):not(.disabled):active,.btn-outline-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}.btn-invisible-secondary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-secondary,.btn-invisible-secondary.focus,.btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-secondary.hover,.btn-invisible-secondary:hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}.btn-invisible-secondary.selected.hover,.btn-invisible-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-secondary:not(:disabled):not(.disabled):active,.btn-invisible-secondary:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active,.btn-invisible-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-secondary.disabled,.btn-invisible-secondary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}.btn-oval,.btn-icon{min-width:2rem;width:2rem}.btn-oval .glyph,.btn-icon .glyph{margin-right:0}.btn-oval{border-radius:6.25rem;width:2rem}.btn-icon-xs,.btn-icon-12{height:1rem;width:1rem;min-width:1rem;min-height:1rem}.btn-icon-s,.btn-icon-16{height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}.btn-icon-32{height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host{display:inline-block;width:auto;height:2rem;vertical-align:middle}: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 .btn{width:100%;height:100%}:host button:not(:disabled){cursor:pointer}:host(.disabled){pointer-events:none}";
+const IxToggleButtonStyle0 = toggleButtonCss;
+const ToggleButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pressedChange = index.createEvent(this, "pressedChange", 7);
+        this.variant = 'secondary';
+        this.outline = false;
+        this.ghost = false;
+        this.disabled = false;
+        this.loading = false;
+        this.icon = undefined;
+        this.pressed = false;
+    }
+    isIllegalToggleButtonConfig() {
+        return this.variant === 'primary' && (this.outline || this.ghost);
+    }
+    logIllegalConfig() {
+        console.warn('iX toggle button with illegal configuration detected. Variant "primary" can only be combined with "outline" or "ghost".');
+    }
+    onVariantChange() {
+        if (this.isIllegalToggleButtonConfig()) {
+            this.logIllegalConfig();
+        }
+    }
+    onGhostChange() {
+        this.onVariantChange();
+    }
+    onOutlineChange() {
+        this.onVariantChange();
+    }
+    componentDidLoad() {
+        this.onVariantChange();
+    }
+    dispatchPressedChange() {
+        this.pressedChange.emit(!this.pressed);
+    }
+    render() {
+        const baseButtonProps = {
+            variant: this.variant,
+            outline: this.outline,
+            ghost: this.ghost,
+            iconOnly: false,
+            iconOval: false,
+            selected: this.pressed,
+            disabled: this.disabled || this.loading,
+            icon: this.icon,
+            loading: this.loading,
+            onClick: () => this.dispatchPressedChange(),
+            type: 'button',
+            ariaAttributes: {
+                'aria-pressed': a11y.a11yBoolean(this.pressed),
+            },
+        };
+        return (index.h(index.Host, { key: 'dfcef75c0ea69b53af7afc1df02915a869b6ef3b', class: {
+                disabled: this.disabled || this.loading,
+            } }, index.h(baseButton.BaseButton, Object.assign({ key: 'ea0fbe743f0c3371fb71925be47fc566e5dee37d' }, baseButtonProps), index.h("slot", { key: '2e6d2c6169978fc567974220437f2a7aa05c62ac' }))));
+    }
+    static get watchers() { return {
+        "variant": ["onVariantChange"],
+        "ghost": ["onGhostChange"],
+        "outline": ["onOutlineChange"]
+    }; }
+};
+ToggleButton.style = IxToggleButtonStyle0;
+exports.ix_toggle_button = ToggleButton;
+//# sourceMappingURL=ix-toggle-button.cjs.entry.js.map

package/dist/cjs/ix-toggle-button.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-toggle-button.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,oxaAAoxa,CAAC;AAC7ya,6BAAe,eAAe;;MC6BjB,YAAY;;;;uBAKU,WAAW;uBAK1B,KAAK;qBAKP,KAAK;wBAKe,KAAK;uBAKd,KAAK;;uBAUd,KAAK;;IAOf,2BAA2B;QACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;KACnE;IAEO,gBAAgB;QACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;KACH;IAGD,eAAe;QACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE;YACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;KACF;IAGD,aAAa;QACX,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAGD,eAAe;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAEO,qBAAqB;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACxC;IAED,MAAM;QACJ,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;YAC3C,IAAI,EAAE,QAAQ;YACd,cAAc,EAAE;gBACd,cAAc,EAAEA,gBAAW,CAAC,IAAI,CAAC,OAAO,CAAC;aAC1C;SACF,CAAC;QAEF,QACEC,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;aACxC,IAEDD,QAACE,qBAAU,qEAAK,eAAe,GAC7BF,oEAAa,CACF,CACR,EACP;KACH;;;;;;;;;;;","names":["a11yBoolean","h","Host","BaseButton"],"sources":["src/components/toggle-button/toggle-button.scss?tag=ix-toggle-button&encapsulation=shadow","src/components/toggle-button/toggle-button.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\n@import 'common-variables';\n@import 'legacy/components/buttons';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: inline-block;\n width: auto;\n height: $x-large-space;\n vertical-align: middle;\n\n .btn {\n width: 100%;\n height: 100%;\n }\n\n button:not(:disabled) {\n cursor: pointer;\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\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 Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n tag: 'ix-toggle-button',\n shadow: true,\n styleUrl: './toggle-button.scss',\n})\nexport class ToggleButton {\n /**\n * Button variant.\n * Important: Variant 'primary' can only be combined with either outline or ghost.\n */\n @Prop() variant: ButtonVariant = 'secondary';\n\n /**\n * Outline button\n */\n @Prop() outline = false;\n\n /**\n * Button with no background or outline\n */\n @Prop() ghost = false;\n\n /**\n * Disable the button\n */\n @Prop({ reflect: true }) disabled = false;\n\n /**\n * Loading button\n */\n @Prop() loading: boolean = false;\n\n /**\n * Icon name\n */\n @Prop() icon: string;\n\n /**\n * Show button as pressed\n */\n @Prop() pressed = false;\n\n /**\n * Pressed change event\n */\n @Event() pressedChange: EventEmitter<boolean>;\n\n private isIllegalToggleButtonConfig() {\n return this.variant === 'primary' && (this.outline || this.ghost);\n }\n\n private logIllegalConfig() {\n console.warn(\n 'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n );\n }\n\n @Watch('variant')\n onVariantChange() {\n if (this.isIllegalToggleButtonConfig()) {\n this.logIllegalConfig();\n }\n }\n\n @Watch('ghost')\n onGhostChange() {\n this.onVariantChange();\n }\n\n @Watch('outline')\n onOutlineChange() {\n this.onVariantChange();\n }\n\n componentDidLoad() {\n this.onVariantChange();\n }\n\n private dispatchPressedChange() {\n this.pressedChange.emit(!this.pressed);\n }\n\n render() {\n const baseButtonProps: BaseButtonProps = {\n variant: this.variant,\n outline: this.outline,\n ghost: this.ghost,\n iconOnly: false,\n iconOval: false,\n selected: this.pressed,\n disabled: this.disabled || this.loading,\n icon: this.icon,\n loading: this.loading,\n onClick: () => this.dispatchPressedChange(),\n type: 'button',\n ariaAttributes: {\n 'aria-pressed': a11yBoolean(this.pressed),\n },\n };\n\n return (\n <Host\n class={{\n disabled: this.disabled || this.loading,\n }}\n >\n <BaseButton {...baseButtonProps}>\n <slot></slot>\n </BaseButton>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ix-toggle.cjs.entry.js ADDED Viewed

@@ -0,0 +1,41 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-c6f0ac73.js');
+const a11y = require('./a11y-d3ce56d1.js');
+const toggleCss = ":host{display:inline-flex;position:relative;height:2rem;justify-content:flex-start;align-items:center;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-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem;margin-right:0.25rem}:host .switch input{opacity:0;width:0;height:0}:host .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:var(--theme-default-time);border-radius:1.5rem}:host .slider:before{position:absolute;content:\"\";height:1.125rem;width:1.125rem;left:4px;bottom:3px;background-color:var(--theme-switch-thumb-off--background);transition:var(--theme-default-time);border-radius:50%}:host input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host input:focus-visible+.switch>.slider{outline:1px solid var(--theme-color-focus-bdr);outline-offset:1px}:host input:checked+.switch>.slider{background-color:var(--theme-switch-on--background)}:host input:checked+.switch>.slider::before{background-color:var(--theme-switch-thumb-on--background);transform:translateX(1.35rem)}:host input+.switch:hover>.slider{background-color:var(--theme-switch-off--background--hover)}:host input+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-off--background--hover)}:host input+.switch:active>.slider{background-color:var(--theme-switch-off--background--active)}:host input+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-off--background--active)}:host input:checked+.switch:hover>.slider{background-color:var(--theme-switch-on--background--hover)}:host input:checked+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-on--background--hover)}:host input:checked+.switch:active>.slider{background-color:var(--theme-switch-on--background--active)}:host input:checked+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-on--background--active)}:host input:indeterminate+.switch>.slider::before{transform:translateX(0.7rem)}:host .toggle-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.disabled){pointer-events:none}:host(.disabled) input+.switch{opacity:0.5}: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)}: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) .toggle-text{color:var(--theme-color-weak-text)}";
+const IxToggleStyle0 = toggleCss;
+const Toggle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkedChange = index.createEvent(this, "checkedChange", 7);
+        this.checked = false;
+        this.disabled = false;
+        this.indeterminate = false;
+        this.textOn = 'On';
+        this.textOff = 'Off';
+        this.textIndeterminate = 'Mixed';
+        this.hideText = false;
+    }
+    onCheckedChange(newChecked) {
+        if (this.indeterminate) {
+            this.indeterminate = false;
+        }
+        this.checked = newChecked;
+        this.checkedChange.emit(this.checked);
+    }
+    render() {
+        return (index.h(index.Host, { key: '4ba9c673e94ffceedf28fbf04a7d136720db55f4', class: {
+                disabled: this.disabled,
+            }, onClick: () => this.onCheckedChange(!this.checked) }, index.h("input", { key: '38b9f9e4577c54c1f930e93db5958f828e5fe789', disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, role: "switch", tabindex: 0, type: "checkbox", "aria-checked": a11y.a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), index.h("label", { key: '0ec0fa498dde12fc557ab02fc785ef291a803dcd', class: "switch", tabIndex: -1 }, index.h("span", { key: '8101166f958219372a1ea6e509233b63c0d05ede', class: "slider" })), !this.hideText ? (index.h(index.Fragment, null, !this.indeterminate ? (index.h("span", { class: 'toggle-text', "aria-hidden": a11y.a11yBoolean(true) }, this.checked ? this.textOn : this.textOff)) : (index.h("span", { class: 'toggle-text', "aria-hidden": a11y.a11yBoolean(true) }, this.textIndeterminate)))) : null));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+Toggle.style = IxToggleStyle0;
+exports.ix_toggle = Toggle;
+//# sourceMappingURL=ix-toggle.cjs.entry.js.map

package/dist/cjs/ix-toggle.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-toggle.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,+xGAA+xG,CAAC;AAClzG,uBAAe,SAAS;;MCyBX,MAAM;;;;uBAMiC,KAAK;wBAKpC,KAAK;6BAKgC,KAAK;sBAK5C,IAAI;uBAKH,KAAK;iCAKK,OAAO;wBAKhB,KAAK;;IAOxB,eAAe,CAAC,UAAmB;QACjC,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;QACD,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;QAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACvC;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAElDD,oEACE,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,kBACDE,gBAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EACvC,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,eAAe,CAAE,KAAK,CAAC,MAAc,CAAC,OAAO,CAAC,GAE9C,EACTF,oEAAO,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,CAAC,CAAC,IAChCA,mEAAM,KAAK,EAAC,QAAQ,GAAQ,CACtB,EACP,CAAC,IAAI,CAAC,QAAQ,IACbA,QAACG,cAAQ,QACN,CAAC,IAAI,CAAC,aAAa,IAClBH,kBAAM,KAAK,EAAE,aAAa,iBAAeE,gBAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CACrC,KAEPF,kBAAM,KAAK,EAAE,aAAa,iBAAeE,gBAAW,CAAC,IAAI,CAAC,IACvD,IAAI,CAAC,iBAAiB,CAClB,CACR,CACQ,IACT,IAAI,CACH,EACP;KACH;;;;;;;","names":["h","Host","a11yBoolean","Fragment"],"sources":["src/components/toggle/toggle.scss?tag=ix-toggle&encapsulation=shadow","src/components/toggle/toggle.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\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n display: inline-flex;\n position: relative;\n height: 2rem;\n justify-content: flex-start;\n align-items: center;\n margin-right: 0.25rem;\n\n cursor: pointer;\n\n .switch {\n position: relative;\n display: inline-block;\n width: 3rem;\n min-width: 3rem;\n max-width: 3rem;\n height: 1.5rem;\n margin-right: 0.25rem;\n }\n\n .switch input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: var(--theme-switch-off--background);\n transition: var(--theme-default-time);\n border-radius: 1.5rem;\n }\n\n .slider:before {\n position: absolute;\n content: '';\n height: 1.125rem;\n width: 1.125rem;\n left: 4px;\n bottom: 3px;\n background-color: var(--theme-switch-thumb-off--background);\n transition: var(--theme-default-time);\n border-radius: 50%;\n }\n\n input {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n }\n\n input:focus-visible + .switch > .slider {\n outline: 1px solid var(--theme-color-focus-bdr);\n outline-offset: 1px;\n }\n\n input:checked + .switch > .slider {\n background-color: var(--theme-switch-on--background);\n }\n\n input:checked + .switch > .slider::before {\n background-color: var(--theme-switch-thumb-on--background);\n transform: translateX(1.35rem);\n }\n\n // Toggle NOT checked\n input + .switch:hover > .slider {\n background-color: var(--theme-switch-off--background--hover);\n }\n\n input + .switch:hover > .slider:before {\n background-color: var(--theme-switch-thumb-off--background--hover);\n }\n\n input + .switch:active > .slider {\n background-color: var(--theme-switch-off--background--active);\n }\n\n input + .switch:active > .slider:before {\n background-color: var(--theme-switch-thumb-off--background--active);\n }\n\n // Toggle checked\n input:checked + .switch:hover > .slider {\n background-color: var(--theme-switch-on--background--hover);\n }\n\n input:checked + .switch:hover > .slider:before {\n background-color: var(--theme-switch-thumb-on--background--hover);\n }\n\n input:checked + .switch:active > .slider {\n background-color: var(--theme-switch-on--background--active);\n }\n\n input:checked + .switch:active > .slider:before {\n background-color: var(--theme-switch-thumb-on--background--active);\n }\n\n input:indeterminate + .switch > .slider::before {\n transform: translateX(0.7rem);\n }\n\n .toggle-text {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n\n input + .switch {\n opacity: 0.5;\n }\n\n input + .switch > .slider {\n background-color: var(--theme-switch-off--background--disabled);\n }\n\n input + .switch > .slider:before {\n background-color: var(--theme-switch-thumb-off--background--disabled);\n }\n\n input:checked + .switch > .slider {\n background-color: var(--theme-switch-on--background--disabled);\n }\n\n input:checked + .switch > .slider:before {\n background-color: var(--theme-switch-thumb-on--background--disabled);\n }\n\n .toggle-text {\n color: var(--theme-color-weak-text);\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 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"],"version":3}

package/dist/cjs/ix-tooltip.cjs.entry.js ADDED Viewed

@@ -0,0 +1,294 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-c6f0ac73.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-94b4d17c.js');
+const listener = require('./listener-d27acb41.js');
+class OverlayController {
+    constructor() {
+        this.overlays = new Set();
+    }
+    connected(instance) {
+        this.overlays.add(instance);
+    }
+    disconnected(instance) {
+        this.overlays.delete(instance);
+    }
+    present(instance) {
+        if (instance.willPresent && !instance.willPresent()) {
+            return;
+        }
+        this.dismissOthers(instance);
+        instance.present();
+    }
+    dismiss(instance) {
+        if (instance.willDismiss && !instance.willDismiss()) {
+            return;
+        }
+        instance.dismiss();
+    }
+    dismissOthers(instance) {
+        this.overlays.forEach((overlay) => {
+            if (overlay !== instance) {
+                this.dismiss(overlay);
+            }
+        });
+    }
+}
+/*
+ * SPDX-FileCopyrightText: 2024 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.
+ */
+class TooltipController extends OverlayController {
+}
+const tooltipController = new TooltipController();
+const tooltipCss = ":host{display:inline-block;position:fixed;left:0px;top:0px;z-index:var(--theme-z-index-tooltip);max-width:18.25rem;opacity:0;visibility:collapse !important;overflow-wrap:break-word;border-radius:0.25rem;background-color:var(--theme-tootlip--background);padding:0.375rem 0.75rem 0.375rem 0.875rem;box-shadow:var(--theme-shadow-4)}:host .tooltip-title{display:flex;align-items:center}:host .tooltip-title ::slotted(ix-icon){margin-right:0.35rem}:host(.visible){opacity:1;visibility:visible !important}:host(.visible) .arrow,:host(.visible) .arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host(.visible) .arrow{visibility:hidden}:host(.visible) .arrow::before{visibility:visible;content:\"\";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}";
+const IxTooltipStyle0 = tooltipCss;
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const numberToPixel = (value) => (value != null ? `${value}px` : '');
+const Tooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.for = undefined;
+        this.titleContent = undefined;
+        this.interactive = false;
+        this.placement = 'top';
+        this.showDelay = 0;
+        this.hideDelay = 50;
+        this.animationFrame = false;
+        this.visible = false;
+    }
+    get arrowElement() {
+        return this.hostElement.shadowRoot.querySelector('.arrow');
+    }
+    destroyAutoUpdate() {
+        if (this.disposeAutoUpdate !== undefined) {
+            this.disposeAutoUpdate();
+        }
+    }
+    /** @internal */
+    async showTooltip(anchorElement) {
+        clearTimeout(this.hideTooltipTimeout);
+        await this.applyTooltipPosition(anchorElement);
+        this.showTooltipTimeout = setTimeout(() => {
+            tooltipController.present(this);
+            // Need to compute and apply tooltip position after initial render,
+            // because arrow has no valid bounding rect before that
+            this.applyTooltipPosition(anchorElement);
+        }, this.showDelay);
+    }
+    /** @internal */
+    async hideTooltip() {
+        clearTimeout(this.showTooltipTimeout);
+        let hideDelay = 50;
+        if (this.interactive && this.hideDelay === hideDelay) {
+            hideDelay = 150;
+        }
+        this.hideTooltipTimeout = setTimeout(() => {
+            tooltipController.dismiss(this);
+        }, hideDelay);
+        this.destroyAutoUpdate();
+    }
+    computeArrowPosition({ placement, middlewareData, }) {
+        let { x, y } = middlewareData.arrow;
+        if (placement.startsWith('top')) {
+            return {
+                left: numberToPixel(x),
+                top: numberToPixel(y),
+            };
+        }
+        if (placement.startsWith('right')) {
+            return {
+                left: numberToPixel(-4),
+                top: numberToPixel(y),
+            };
+        }
+        if (placement.startsWith('bottom')) {
+            return {
+                left: numberToPixel(x),
+                top: numberToPixel(-4),
+            };
+        }
+        if (placement.startsWith('left')) {
+            return {
+                right: numberToPixel(-4),
+                top: numberToPixel(y),
+            };
+        }
+    }
+    async computeTooltipPosition(target) {
+        const computeResponse = await floatingUi_dom_esm.computePosition(target, this.hostElement, {
+            strategy: 'fixed',
+            placement: this.placement,
+            middleware: [
+                floatingUi_dom_esm.shift(),
+                floatingUi_dom_esm.offset(8),
+                floatingUi_dom_esm.arrow({
+                    element: this.arrowElement,
+                }),
+                floatingUi_dom_esm.flip({
+                    fallbackStrategy: 'initialPlacement',
+                    padding: 10,
+                }),
+            ],
+        });
+        return computeResponse;
+    }
+    applyTooltipArrowPosition(computeResponse) {
+        const arrowPosition = this.computeArrowPosition(computeResponse);
+        Object.assign(this.arrowElement.style, arrowPosition);
+    }
+    async applyTooltipPosition(target) {
+        if (!target) {
+            return;
+        }
+        return new Promise((resolve) => {
+            this.disposeAutoUpdate = floatingUi_dom_esm.autoUpdate(target, this.hostElement, async () => {
+                setTimeout(async () => {
+                    const computeResponse = await this.computeTooltipPosition(target);
+                    if (computeResponse.middlewareData.arrow) {
+                        this.applyTooltipArrowPosition(computeResponse);
+                    }
+                    const { x, y } = computeResponse;
+                    Object.assign(this.hostElement.style, {
+                        left: x !== null ? `${x}px` : '',
+                        top: y !== null ? `${y}px` : '',
+                    });
+                    resolve(computeResponse);
+                });
+            }, {
+                ancestorResize: true,
+                ancestorScroll: true,
+                elementResize: true,
+                animationFrame: this.animationFrame,
+            });
+        });
+    }
+    clearHideTimeout() {
+        if (this.interactive) {
+            clearTimeout(this.hideTooltipTimeout);
+        }
+    }
+    async queryAnchorElements() {
+        if (typeof this.for === 'string') {
+            return Promise.resolve(Array.from(document.querySelectorAll(this.for)));
+        }
+        if (this.for instanceof HTMLElement) {
+            return Promise.resolve([this.for]);
+        }
+        if (this.for instanceof Promise) {
+            const element = await this.for;
+            return [element];
+        }
+    }
+    async registerTriggerListener() {
+        const triggerElementList = await this.queryAnchorElements();
+        if (this.disposeListener) {
+            this.disposeListener();
+        }
+        triggerElementList.forEach((element) => {
+            const onMouseEnter = () => {
+                this.showTooltip(element);
+            };
+            const onMouseLeave = () => {
+                this.hideTooltip();
+            };
+            const onFocusIn = () => {
+                if (this.showTooltipTimeout !== undefined) {
+                    clearTimeout(this.showTooltipTimeout);
+                }
+                onMouseEnter();
+            };
+            const onFocusOut = () => {
+                this.hideTooltip();
+            };
+            element.addEventListener('mouseenter', onMouseEnter);
+            element.addEventListener('mouseleave', onMouseLeave);
+            element.addEventListener('focusin', onFocusIn);
+            element.addEventListener('focusout', onFocusOut);
+            this.disposeListener = () => {
+                element.removeEventListener('mouseenter', onMouseEnter);
+                element.removeEventListener('mouseleave', onMouseLeave);
+                element.removeEventListener('focusin', onFocusIn);
+                element.removeEventListener('focusout', onFocusOut);
+            };
+        });
+    }
+    registerTooltipListener() {
+        const { hostElement } = this;
+        hostElement.addEventListener('mouseenter', () => this.clearHideTimeout());
+        hostElement.addEventListener('focusin', () => this.clearHideTimeout());
+        hostElement.addEventListener('mouseleave', () => this.hideTooltip());
+        hostElement.addEventListener('focusout', () => this.hideTooltip());
+    }
+    async onKeydown(event) {
+        if (event.code === 'Escape') {
+            this.hideTooltip();
+        }
+    }
+    componentWillLoad() {
+        this.registerTriggerListener();
+    }
+    componentDidLoad() {
+        this.observer = new MutationObserver(() => {
+            this.registerTriggerListener();
+        });
+        this.observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ['data-ix-tooltip'],
+            childList: true,
+            subtree: true,
+        });
+        this.registerTooltipListener();
+    }
+    connectedCallback() {
+        tooltipController.connected(this);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.destroyAutoUpdate();
+        tooltipController.disconnected(this);
+    }
+    isPresent() {
+        return this.visible;
+    }
+    present() {
+        this.visible = true;
+    }
+    dismiss() {
+        this.visible = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: '5b5aa5093f3c14651905a799f9e81f2f331a1baf', class: {
+                visible: this.visible,
+            }, role: "tooltip" }, index.h("div", { key: 'cacf0b886f54dc3c6acacd6da53bde71339cfc22', class: 'tooltip-title' }, index.h("slot", { key: '67bdcbe0af5ba15cfbb759a0880fbcec72f49e12', name: "title-icon" }), index.h("ix-typography", { key: '1f4ae24e31a305bc64d5dd5e4a3777c0784bb07b', variant: "default-title" }, this.titleContent, index.h("slot", { key: '393d395dc48d285b8376db4d315d897951ff6767', name: "title-content" }))), index.h("div", { key: 'd0c78f7201ef524eedd4776b3226b6571d0a6e3f', class: 'tooltip-content' }, index.h("slot", { key: '14b151f19115fb6d301bb6228a681cd3f0f3146e' })), index.h("div", { key: '927874a1be9fac8e0043fc98faf29af1a08eb374', class: "arrow" })));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+__decorate([
+    listener.OnListener('keydown', (self) => self.visible)
+], Tooltip.prototype, "onKeydown", null);
+Tooltip.style = IxTooltipStyle0;
+exports.ix_tooltip = Tooltip;
+//# sourceMappingURL=ix-tooltip.cjs.entry.js.map

package/dist/cjs/ix-tooltip.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-tooltip.entry.cjs.js","mappings":"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","names":["computePosition","shift","offset","arrow","flip","autoUpdate","h","Host","OnListener"],"sources":["src/components/utils/overlay.ts","src/components/tooltip/tooltip-controller.ts","src/components/tooltip/tooltip.scss?tag=ix-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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 */\nimport { IxComponent } from '../utils/internal';\n\nexport interface IxOverlayComponent extends IxComponent {\n isPresent(): boolean;\n\n willPresent?(): boolean;\n willDismiss?(): boolean;\n\n present(): void;\n dismiss(): void;\n}\n\nexport class OverlayController {\n overlays: Set<IxOverlayComponent> = new Set();\n\n connected(instance: IxOverlayComponent): void {\n this.overlays.add(instance);\n }\n\n disconnected(instance: IxOverlayComponent): void {\n this.overlays.delete(instance);\n }\n\n present(instance: IxOverlayComponent): void {\n if (instance.willPresent && !instance.willPresent()) {\n return;\n }\n this.dismissOthers(instance);\n instance.present();\n }\n\n dismiss(instance: IxOverlayComponent): void {\n if (instance.willDismiss && !instance.willDismiss()) {\n return;\n }\n instance.dismiss();\n }\n\n private dismissOthers(instance: IxOverlayComponent): void {\n this.overlays.forEach((overlay) => {\n if (overlay !== instance) {\n this.dismiss(overlay);\n }\n });\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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 { OverlayController } from '../utils/overlay';\n\nclass TooltipController extends OverlayController {}\n\nexport const tooltipController = new TooltipController();\n",":host {\n display: inline-block;\n position: fixed;\n left: 0px;\n top: 0px;\n z-index: var(--theme-z-index-tooltip);\n\n max-width: 18.25rem;\n\n opacity: 0;\n visibility: collapse !important;\n overflow-wrap: break-word;\n\n border-radius: 0.25rem;\n background-color: var(--theme-tootlip--background);\n padding: 0.375rem 0.75rem 0.375rem 0.875rem;\n\n box-shadow: var(--theme-shadow-4);\n\n .tooltip-title {\n display: flex;\n align-items: center;\n\n ::slotted(ix-icon) {\n margin-right: 0.35rem;\n }\n }\n}\n\n:host(.visible) {\n opacity: 1;\n visibility: visible !important;\n}\n\n:host(.visible) {\n .arrow,\n .arrow::before {\n position: absolute;\n width: 8px;\n height: 8px;\n background: inherit;\n }\n\n .arrow {\n visibility: hidden;\n }\n\n .arrow::before {\n visibility: visible;\n content: '';\n transform: rotate(45deg);\n background-color: var(--theme-tootlip--background);\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 */\nimport {\n arrow,\n autoUpdate,\n computePosition,\n ComputePositionReturn,\n flip,\n offset,\n shift,\n} from '@floating-ui/dom';\nimport {\n Component,\n Element,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport { OnListener } from '../utils/listener';\nimport { tooltipController } from './tooltip-controller';\nimport { IxOverlayComponent } from '../utils/overlay';\n\ntype ArrowPosition = {\n top?: string;\n left?: string;\n right?: string;\n};\n\nconst numberToPixel = (value: number) => (value != null ? `${value}px` : '');\n\n/**\n * @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n *\n * @since 1.4.0\n */\n@Component({\n tag: 'ix-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip implements IxOverlayComponent {\n /**\n * CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n */\n @Prop() for: string | HTMLElement | Promise<HTMLElement>;\n\n /**\n * Title of the tooltip\n */\n @Prop() titleContent: string;\n\n /**\n * Define if the user can access the tooltip via mouse.\n */\n @Prop() interactive = false;\n\n /**\n * Initial placement of the tooltip. If the placement don\"t have enough space,\n * the tooltip will placed on another location.\n *\n * @since 1.5.0\n */\n @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n\n /** @internal */\n @Prop() showDelay = 0;\n\n /** @internal */\n @Prop() hideDelay = 50;\n\n /** @internal */\n @Prop() animationFrame = false;\n\n @State() visible = false;\n\n @Element() hostElement: HTMLIxTooltipElement;\n\n private observer: MutationObserver;\n private hideTooltipTimeout: NodeJS.Timeout;\n private showTooltipTimeout: NodeJS.Timeout;\n private disposeAutoUpdate?: () => void;\n private disposeListener: () => void;\n\n private get arrowElement(): HTMLElement {\n return this.hostElement.shadowRoot.querySelector('.arrow');\n }\n\n private destroyAutoUpdate() {\n if (this.disposeAutoUpdate !== undefined) {\n this.disposeAutoUpdate();\n }\n }\n\n /** @internal */\n @Method()\n async showTooltip(anchorElement: any) {\n clearTimeout(this.hideTooltipTimeout);\n await this.applyTooltipPosition(anchorElement);\n\n this.showTooltipTimeout = setTimeout(() => {\n tooltipController.present(this);\n // Need to compute and apply tooltip position after initial render,\n // because arrow has no valid bounding rect before that\n this.applyTooltipPosition(anchorElement);\n }, this.showDelay);\n }\n\n /** @internal */\n @Method()\n async hideTooltip() {\n clearTimeout(this.showTooltipTimeout);\n let hideDelay = 50;\n\n if (this.interactive && this.hideDelay === hideDelay) {\n hideDelay = 150;\n }\n\n this.hideTooltipTimeout = setTimeout(() => {\n tooltipController.dismiss(this);\n }, hideDelay);\n this.destroyAutoUpdate();\n }\n\n private computeArrowPosition({\n placement,\n middlewareData,\n }: ComputePositionReturn): ArrowPosition {\n let { x, y } = middlewareData.arrow;\n\n if (placement.startsWith('top')) {\n return {\n left: numberToPixel(x),\n top: numberToPixel(y),\n };\n }\n\n if (placement.startsWith('right')) {\n return {\n left: numberToPixel(-4),\n top: numberToPixel(y),\n };\n }\n\n if (placement.startsWith('bottom')) {\n return {\n left: numberToPixel(x),\n top: numberToPixel(-4),\n };\n }\n\n if (placement.startsWith('left')) {\n return {\n right: numberToPixel(-4),\n top: numberToPixel(y),\n };\n }\n }\n\n private async computeTooltipPosition(target: Element) {\n const computeResponse = await computePosition(target, this.hostElement, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [\n shift(),\n offset(8),\n arrow({\n element: this.arrowElement,\n }),\n flip({\n fallbackStrategy: 'initialPlacement',\n padding: 10,\n }),\n ],\n });\n return computeResponse;\n }\n\n private applyTooltipArrowPosition(computeResponse: ComputePositionReturn) {\n const arrowPosition = this.computeArrowPosition(computeResponse);\n Object.assign(this.arrowElement.style, arrowPosition);\n }\n\n private async applyTooltipPosition(target: Element) {\n if (!target) {\n return;\n }\n\n return new Promise<ComputePositionReturn>((resolve) => {\n this.disposeAutoUpdate = autoUpdate(\n target,\n this.hostElement,\n async () => {\n setTimeout(async () => {\n const computeResponse = await this.computeTooltipPosition(target);\n\n if (computeResponse.middlewareData.arrow) {\n this.applyTooltipArrowPosition(computeResponse);\n }\n\n const { x, y } = computeResponse;\n Object.assign(this.hostElement.style, {\n left: x !== null ? `${x}px` : '',\n top: y !== null ? `${y}px` : '',\n });\n\n resolve(computeResponse);\n });\n },\n {\n ancestorResize: true,\n ancestorScroll: true,\n elementResize: true,\n animationFrame: this.animationFrame,\n }\n );\n });\n }\n\n private clearHideTimeout() {\n if (this.interactive) {\n clearTimeout(this.hideTooltipTimeout);\n }\n }\n\n private async queryAnchorElements(): Promise<Array<HTMLElement>> {\n if (typeof this.for === 'string') {\n return Promise.resolve(Array.from(document.querySelectorAll(this.for)));\n }\n\n if (this.for instanceof HTMLElement) {\n return Promise.resolve([this.for]);\n }\n\n if (this.for instanceof Promise) {\n const element = await this.for;\n return [element];\n }\n }\n\n private async registerTriggerListener() {\n const triggerElementList = await this.queryAnchorElements();\n\n if (this.disposeListener) {\n this.disposeListener();\n }\n\n triggerElementList.forEach((element) => {\n const onMouseEnter = () => {\n this.showTooltip(element);\n };\n\n const onMouseLeave = () => {\n this.hideTooltip();\n };\n\n const onFocusIn = () => {\n if (this.showTooltipTimeout !== undefined) {\n clearTimeout(this.showTooltipTimeout);\n }\n\n onMouseEnter();\n };\n\n const onFocusOut = () => {\n this.hideTooltip();\n };\n\n element.addEventListener('mouseenter', onMouseEnter);\n element.addEventListener('mouseleave', onMouseLeave);\n element.addEventListener('focusin', onFocusIn);\n element.addEventListener('focusout', onFocusOut);\n\n this.disposeListener = () => {\n element.removeEventListener('mouseenter', onMouseEnter);\n element.removeEventListener('mouseleave', onMouseLeave);\n element.removeEventListener('focusin', onFocusIn);\n element.removeEventListener('focusout', onFocusOut);\n };\n });\n }\n\n private registerTooltipListener() {\n const { hostElement } = this;\n hostElement.addEventListener('mouseenter', () => this.clearHideTimeout());\n hostElement.addEventListener('focusin', () => this.clearHideTimeout());\n\n hostElement.addEventListener('mouseleave', () => this.hideTooltip());\n hostElement.addEventListener('focusout', () => this.hideTooltip());\n }\n\n @OnListener<Tooltip>('keydown', (self) => self.visible)\n async onKeydown(event: KeyboardEvent) {\n if (event.code === 'Escape') {\n this.hideTooltip();\n }\n }\n\n componentWillLoad() {\n this.registerTriggerListener();\n }\n\n componentDidLoad() {\n this.observer = new MutationObserver(() => {\n this.registerTriggerListener();\n });\n\n this.observer.observe(document.body, {\n attributes: true,\n attributeFilter: ['data-ix-tooltip'],\n childList: true,\n subtree: true,\n });\n\n this.registerTooltipListener();\n }\n\n connectedCallback() {\n tooltipController.connected(this);\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.destroyAutoUpdate();\n tooltipController.disconnected(this);\n }\n\n isPresent(): boolean {\n return this.visible;\n }\n\n present(): void {\n this.visible = true;\n }\n\n dismiss(): void {\n this.visible = false;\n }\n\n render() {\n return (\n <Host\n class={{\n visible: this.visible,\n }}\n role=\"tooltip\"\n >\n <div class={'tooltip-title'}>\n <slot name=\"title-icon\"></slot>\n <ix-typography variant=\"default-title\">\n {this.titleContent}\n <slot name=\"title-content\"></slot>\n </ix-typography>\n </div>\n <div class={'tooltip-content'}>\n <slot></slot>\n </div>\n <div class=\"arrow\"></div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ix-tree-item.cjs.entry.js ADDED Viewed

@@ -0,0 +1,37 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-c6f0ac73.js');
+const treeItemCss = ":host{display:flex;align-items:center;height:32px;width:100%;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 .tree-node-container{display:flex;align-items:center;height:2rem;flex-grow:1;align-items:center}:host .icon-toggle-container{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem}:host .icon-toggle-container ix-icon{transition:transform var(--theme-default-time) ease-in-out}:host .icon-toggle-container ix-icon.icon-toggle-down{transform:rotate(90deg)}:host(:not(.disabled):not(:disabled):not(.selected).hover),:host(:not(.disabled):not(:disabled):not(.selected):hover){background-color:var(--theme-tree-item--background--hover)}:host(:not(.disabled):not(:disabled):not(.selected).active),:host(:not(.disabled):not(:disabled):not(.selected):active){background-color:var(--theme-tree-item--background--active)}:host(.selected){background-color:var(--theme-tree-item--background--selected)}:host(.selected.hover),:host(.selected:hover){background-color:var(--theme-tree-item--background--selected-hover)}:host(.selected.active),:host(.selected:active){background-color:var(--theme-tree-item--background--selected-active)}";
+const IxTreeItemStyle0 = treeItemCss;
+const TreeItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toggle = index.createEvent(this, "toggle", 7);
+        this.itemClick = index.createEvent(this, "itemClick", 7);
+        this.text = undefined;
+        this.hasChildren = undefined;
+        this.context = undefined;
+    }
+    render() {
+        var _a, _b, _c;
+        return (index.h(index.Host, { key: 'c40a13c3395d6f3a785e7f17ed8887d0f54642c6', class: {
+                selected: (_a = this.context) === null || _a === void 0 ? void 0 : _a.isSelected,
+            } }, index.h("div", { key: '47264231c4f5b919b4f4480a409b4b2047c46fc0', class: "icon-toggle-container", onClick: (e) => {
+                e.preventDefault();
+                this.toggle.emit();
+            } }, this.hasChildren ? (index.h("ix-icon", { name: 'chevron-right', size: "16", class: {
+                ['icon-toggle-down']: (_b = this.context) === null || _b === void 0 ? void 0 : _b.isExpanded,
+            }, color: `color-${((_c = this.context) === null || _c === void 0 ? void 0 : _c.isExpanded) ? 'primary' : 'std-text'}` })) : null), index.h("div", { key: '5ab2e0dc8ac4b4aa5a6b6851b70980d7e04d02ea', class: "tree-node-container", onClick: () => {
+                this.itemClick.emit();
+            } }, this.text, index.h("slot", { key: '93f195d06fb13641e330028d460e2a077736c5be' }))));
+    }
+};
+TreeItem.style = IxTreeItemStyle0;
+exports.ix_tree_item = TreeItem;
+//# sourceMappingURL=ix-tree-item.cjs.entry.js.map

package/dist/cjs/ix-tree-item.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ix-tree-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,osDAAosD,CAAC;AACztD,yBAAe,WAAW;;MCgBb,QAAQ;;;;;;;;;IA0BnB,MAAM;;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU;aACnC,IAEDD,kEACE,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,CAAC,CAAC;gBACT,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;aACpB,IAEA,IAAI,CAAC,WAAW,IACfA,qBACE,IAAI,EAAE,eAAe,EACrB,IAAI,EAAC,IAAI,EACT,KAAK,EAAE;gBACL,CAAC,kBAAkB,GAAG,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU;aAC/C,EACD,KAAK,EAAE,SACL,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,UAAU,IAAG,SAAS,GAAG,UACzC,EAAE,GACF,IACA,IAAI,CACJ,EACNA,kEACE,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE;gBACP,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;aACvB,IAEA,IAAI,CAAC,IAAI,EACVA,oEAAa,CACT,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/tree-item/tree-item.scss?tag=ix-tree-item&encapsulation=shadow","src/components/tree-item/tree-item.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\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n align-items: center;\n\n height: 32px;\n width: 100%;\n\n cursor: pointer;\n\n .tree-node-container {\n display: flex;\n align-items: center;\n height: $x-large-space;\n flex-grow: 1;\n align-items: center;\n }\n\n .icon-toggle-container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2rem;\n height: 2rem;\n\n ix-icon {\n transition: transform var(--theme-default-time) ease-in-out;\n\n &.icon-toggle-down {\n transform: rotate(90deg);\n }\n }\n }\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).hover),\n:host(:not(.disabled):not(:disabled):not(.selected):hover) {\n background-color: var(--theme-tree-item--background--hover);\n}\n\n:host(:not(.disabled):not(:disabled):not(.selected).active),\n:host(:not(.disabled):not(:disabled):not(.selected):active) {\n background-color: var(--theme-tree-item--background--active);\n}\n\n:host(.selected) {\n background-color: var(--theme-tree-item--background--selected);\n}\n\n:host(.selected.hover),\n:host(.selected:hover) {\n background-color: var(--theme-tree-item--background--selected-hover);\n}\n\n:host(.selected.active),\n:host(.selected:active) {\n background-color: var(--theme-tree-item--background--selected-active);\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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { TreeItemContext } from '../tree/tree-model';\n\n@Component({\n tag: 'ix-tree-item',\n styleUrl: 'tree-item.scss',\n shadow: true,\n})\nexport class TreeItem {\n /**\n * Text\n */\n @Prop() text: string;\n\n /**\n * Has tree item children\n */\n @Prop() hasChildren: boolean;\n\n /**\n * Context\n */\n @Prop() context: TreeItemContext;\n\n /**\n * Expand/Collapsed toggled\n */\n @Event() toggle: EventEmitter<void>;\n\n /**\n * Clicked\n */\n @Event() itemClick: EventEmitter<void>;\n\n render() {\n return (\n <Host\n class={{\n selected: this.context?.isSelected,\n }}\n >\n <div\n class=\"icon-toggle-container\"\n onClick={(e) => {\n e.preventDefault();\n this.toggle.emit();\n }}\n >\n {this.hasChildren ? (\n <ix-icon\n name={'chevron-right'}\n size=\"16\"\n class={{\n ['icon-toggle-down']: this.context?.isExpanded,\n }}\n color={`color-${\n this.context?.isExpanded ? 'primary' : 'std-text'\n }`}\n />\n ) : null}\n </div>\n <div\n class=\"tree-node-container\"\n onClick={() => {\n this.itemClick.emit();\n }}\n >\n {this.text}\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}