npm - @siemens/ix - Versions diffs - 1.6.2 → 2.0.0-beta.0 - Mend

@siemens/ix 1.6.2 → 2.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1110) hide show

package/dist/components/spinner.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const spinnerCss = ":host{display:flex;position:relative;height:2rem;width:2rem;justify-content:center;align-items:center}:host *,:host *::after,:host *::before{box-sizing:border-box}:host svg{height:2rem;width:2rem}:host #fill{fill:var(--theme-color-weak-text)}:host #stroke{stroke:var(--theme-color-weak-text)}:host(.primary) #fill{fill:var(--theme-color-primary)}:host(.primary) #stroke{stroke:var(--theme-color-primary)}:host(.large){height:6rem;width:6rem}:host(.large) svg{height:5.75rem;width:6rem}";
+const spinnerCss = ":host(.xx-small){display:block;position:relative;width:0.75rem;height:0.75rem;min-width:0.75rem;min-height:0.75rem;max-width:0.75rem;max-height:0.75rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.xx-small) *,:host(.xx-small) *::after,:host(.xx-small) *::before{box-sizing:border-box}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.xx-small)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:1px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.xx-small)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:1px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.x-small){display:block;position:relative;width:1.25rem;height:1.25rem;min-width:1.25rem;min-height:1.25rem;max-width:1.25rem;max-height:1.25rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.x-small) *,:host(.x-small) *::after,:host(.x-small) *::before{box-sizing:border-box}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.x-small)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.x-small)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.small){display:block;position:relative;width:1.5rem;height:1.5rem;min-width:1.5rem;min-height:1.5rem;max-width:1.5rem;max-height:1.5rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.small) *,:host(.small) *::after,:host(.small) *::before{box-sizing:border-box}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.small)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.small)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.medium){display:block;position:relative;width:2rem;height:2rem;min-width:2rem;min-height:2rem;max-width:2rem;max-height:2rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.medium) *,:host(.medium) *::after,:host(.medium) *::before{box-sizing:border-box}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.medium)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.medium)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.large){display:block;position:relative;width:6rem;height:6rem;min-width:6rem;min-height:6rem;max-width:6rem;max-height:6rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.large) *,:host(.large) *::after,:host(.large) *::before{box-sizing:border-box}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.large)::after{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:4px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.large)::before{content:\"\";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:4px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}";
 const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends HTMLElement {
   constructor() {
@@ -9,17 +9,25 @@ const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends HTMLEleme
     this.__attachShadow();
     this.variant = 'secondary';
     this.size = 'medium';
+    this.hideTrack = false;
   }
   render() {
     return (h(Host, { class: {
         primary: this.variant === 'primary',
+        'xx-small': this.size === 'xx-small',
+        'x-small': this.size === 'x-small',
+        small: this.size === 'small',
+        medium: this.size === 'medium',
         large: this.size === 'large',
-      } }, h("svg", { viewBox: "0 0 32 32", version: "1.1", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "waiting-anim", stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, h("g", { id: "stroke", transform: "translate(4.5, 3)", "fill-rule": "nonzero", stroke: "#0F8287", "stroke-linejoin": "round" }, h("polygon", { id: "w1", points: "11.2583302 0 11.2583302 6.5 11.2583302 13", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "0s;w6ul.end", to: "visible" }), h("animate", { id: "w1l", attributeName: "points", calcMode: "spline", begin: "0s;w6ul.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 0 11.2583302 6.5 11.2583302 13", to: "11.2583302 0 22.5166605 6.5 11.2583302 13", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "w1ul", attributeName: "points", calcMode: "spline", begin: "f6uf.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 0 22.5166605 6.5 11.2583302 13", to: "16.88749535 9.25 22.5166605 6.5 11.2583302 13", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "w1ul.end", to: "hidden" })), h("polygon", { id: "w2", points: "22.5166605 6.5 16.88749535 10 11.2583302 13", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "w1l.end", to: "visible" }), h("animate", { id: "w2l", attributeName: "points", calcMode: "spline", begin: "w1l.end", dur: "0.4s", keyTimes: "0;1", from: "22.5166605 6.5 16.88749535 10 11.2583302 13", to: "22.5166605 6.5 22.5166605 19.5 11.2583302 13", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "w2ul", attributeName: "points", calcMode: "spline", begin: "w1ul.end", dur: "0.4s", keyTimes: "0;1", from: "22.5166605 6.5 22.5166605 19.5 11.2583302 13", to: "16.88749535 16.25 22.5166605 19.5 11.2583302 13", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "w2ul.end", to: "hidden" })), h("polygon", { id: "w3", points: "11.2583302 13 22.5166605 19.5 16.88749535 16.75", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "w2l.end", to: "visible" }), h("animate", { id: "w3l", attributeName: "points", calcMode: "spline", begin: "w2l.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 22.5166605 19.5 16.88749535 16.75", to: "11.2583302 13 22.5166605 19.5 11.2583302 26", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "w3ul", attributeName: "points", calcMode: "spline", begin: "w2ul.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 22.5166605 19.5 11.2583302 26", to: "11.2583302 13 11.2583302 19.5 11.2583302 26", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "w3ul.end", to: "hidden" })), h("polygon", { id: "w4", points: "11.2583302 26 11.2583302 19.5 11.2583302 13", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "w3l.end", to: "visible" }), h("animate", { id: "w4l", attributeName: "points", calcMode: "spline", begin: "w3l.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 26 11.2583302 19.5 11.2583302 13", to: "11.2583302 26 4.4408921e-15 19.5 11.2583302 13", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "w4ul", attributeName: "points", calcMode: "spline", begin: "w3ul.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 26 4.4408921e-15 19.5 11.2583302 13", to: "5.62651 16.25 4.4408921e-15 19.5 11.2583302 13", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "w4ul.end", to: "hidden" })), h("polygon", { id: "w5", points: "11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "w4l.end", to: "visible" }), h("animate", { id: "w5l", attributeName: "points", calcMode: "spline", begin: "w4l.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25", to: "11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "w5ul", attributeName: "points", calcMode: "spline", begin: "w4ul.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5", to: "11.2583302 13 5.6291651 9.75 1.687539e-14 6.5", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "w5ul.end", to: "hidden" })), h("polygon", { id: "w6", points: "5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "w5l.end", to: "visible" }), h("animate", { id: "w6l", attributeName: "points", calcMode: "spline", begin: "w5l.end", dur: "0.4s", keyTimes: "0;1", from: "5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5", to: "11.2583302 0 11.2583302 13 2.66453526e-15 6.5", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "w6ul", attributeName: "points", calcMode: "spline", begin: "w5ul.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 0 11.2583302 13 2.66453526e-15 6.5", to: "11.2583302 0 11.2583302 13 11.2583302 6.5", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "w6ul.end", to: "hidden" }))), h("g", { id: "fill", transform: "translate(4.5, 3)", fill: "#0F8287", "fill-rule": "nonzero" }, h("polygon", { id: "f1", points: "11.2583302 0 11.2583302 6.5 11.2583302 13", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "w6l.end", to: "visible" }), h("animate", { id: "f1f", attributeName: "points", calcMode: "spline", begin: "w6l.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 0 11.2583302 6.5 11.2583302 13", to: "11.2583302 0 22.5166605 6.5 11.2583302 13", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "f1uf", attributeName: "points", calcMode: "spline", begin: "f6f.end + 0.2s", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 0 22.5166605 6.5 11.2583302 13", to: "16.88749535 9.25 22.5166605 6.5 11.2583302 13", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "f1uf.end", to: "hidden" })), h("polygon", { id: "f2", points: "22.5166605 6.5 16.88749535 10 11.2583302 13", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "f1f.end", to: "visible" }), h("animate", { id: "f2f", attributeName: "points", calcMode: "spline", begin: "f1f.end", dur: "0.4s", keyTimes: "0;1", from: "22.5166605 6.5 16.88749535 10 11.2583302 13", to: "22.5166605 6.5 22.5166605 19.5 11.2583302 13", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "f2uf", attributeName: "points", calcMode: "spline", begin: "f1uf.end", dur: "0.4s", keyTimes: "0;1", from: "22.5166605 6.5 22.5166605 19.5 11.2583302 13", to: "16.88749535 16.25 22.5166605 19.5 11.2583302 13", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "f2uf.end", to: "hidden" })), h("polygon", { id: "f3", points: "11.2583302 13 22.5166605 19.5 16.88749535 16.75", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "f2f.end", to: "visible" }), h("animate", { id: "f3f", attributeName: "points", calcMode: "spline", begin: "f2f.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 22.5166605 19.5 16.88749535 16.75", to: "11.2583302 13 22.5166605 19.5 11.2583302 26", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "f3uf", attributeName: "points", calcMode: "spline", begin: "f2uf.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 22.5166605 19.5 11.2583302 26", to: "11.2583302 13 11.2583302 19.5 11.2583302 26", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "f3uf.end", to: "hidden" })), h("polygon", { id: "f4", points: "11.2583302 26 11.2583302 19.5 11.2583302 13", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "f3f.end", to: "visible" }), h("animate", { id: "f4f", attributeName: "points", calcMode: "spline", begin: "f3f.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 26 11.2583302 19.5 11.2583302 13", to: "11.2583302 26 4.4408921e-15 19.5 11.2583302 13", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "f4uf", attributeName: "points", calcMode: "spline", begin: "f3uf.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 26 4.4408921e-15 19.5 11.2583302 13", to: "5.62651 16.25 4.4408921e-15 19.5 11.2583302 13", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "f4uf.end", to: "hidden" })), h("polygon", { id: "f5", points: "11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "f4f.end", to: "visible" }), h("animate", { id: "f5f", attributeName: "points", calcMode: "spline", begin: "f4f.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25", to: "11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "f5uf", attributeName: "points", calcMode: "spline", begin: "f4uf.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5", to: "11.2583302 13 5.6291651 9.75 1.687539e-14 6.5", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "f5uf.end", to: "hidden" })), h("polygon", { id: "f6", points: "5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5", visibility: "hidden" }, h("set", { attributeName: "visibility", begin: "f5f.end", to: "visible" }), h("animate", { id: "f6f", attributeName: "points", calcMode: "spline", begin: "f5f.end", dur: "0.4s", keyTimes: "0;1", from: "5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5", to: "11.2583302 0 11.2583302 13 2.66453526e-15 6.5", keySplines: "1 0 0.8 1", fill: "freeze" }), h("animate", { id: "f6uf", attributeName: "points", calcMode: "spline", begin: "f5uf.end", dur: "0.4s", keyTimes: "0;1", from: "11.2583302 0 11.2583302 13 2.66453526e-15 6.5", to: "11.2583302 0 11.2583302 13 11.2583302 6.5", keySplines: "0.2 0 0 1", fill: "freeze" }), h("set", { attributeName: "visibility", begin: "f6uf.end", to: "hidden" })))))));
+        'hide-track': this.hideTrack,
+      } }));
   }
+  get hostElement() { return this; }
   static get style() { return spinnerCss; }
 }, [1, "ix-spinner", {
     "variant": [1],
-    "size": [1]
+    "size": [1],
+    "hideTrack": [4, "hide-track"]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/spinner.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"spinner.js","mappings":"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","names":[],"sources":["./src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","./src/components/spinner/spinner.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/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: flex;\n position: relative;\n height: 2rem;\n width: 2rem;\n justify-content: center;\n align-items: center;\n\n svg {\n height: 2rem;\n width: 2rem;\n }\n\n #fill {\n fill: var(--theme-color-weak-text);\n }\n\n #stroke {\n stroke: var(--theme-color-weak-text);\n }\n}\n\n:host(.primary) {\n #fill {\n fill: var(--theme-color-primary);\n }\n\n #stroke {\n stroke: var(--theme-color-primary);\n }\n}\n\n:host(.large) {\n height: 6rem;\n width: 6rem;\n\n svg {\n height: 5.75rem;\n width: 6rem;\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 { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n /\n Variant of spinner\n /\n @Prop() variant: 'primary' \| 'sencodary' \| 'secondary' = 'secondary';\n\n /\n Size of spinner\n */\n @Prop() size: 'medium' \| 'large' = 'medium';\n\n render() {\n return (\n <Host\n class={{\n primary: this.variant === 'primary',\n large: this.size === 'large',\n }}\n >\n <svg\n viewBox=\"0 0 32 32\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <g\n id=\"waiting-anim\"\n stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <g\n id=\"stroke\"\n transform=\"translate(4.5, 3)\"\n fill-rule=\"nonzero\"\n stroke=\"#0F8287\"\n stroke-linejoin=\"round\"\n >\n <polygon\n id=\"w1\"\n points=\"11.2583302 0 11.2583302 6.5 11.2583302 13\"\n visibility=\"hidden\"\n >\n <set\n attributeName=\"visibility\"\n begin=\"0s;w6ul.end\"\n to=\"visible\"\n />\n <animate\n id=\"w1l\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"0s;w6ul.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 0 11.2583302 6.5 11.2583302 13\"\n to=\"11.2583302 0 22.5166605 6.5 11.2583302 13\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"w1ul\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f6uf.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 0 22.5166605 6.5 11.2583302 13\"\n to=\"16.88749535 9.25 22.5166605 6.5 11.2583302 13\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"w1ul.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"w2\"\n points=\"22.5166605 6.5 16.88749535 10 11.2583302 13\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"w1l.end\" to=\"visible\" />\n <animate\n id=\"w2l\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w1l.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"22.5166605 6.5 16.88749535 10 11.2583302 13\"\n to=\"22.5166605 6.5 22.5166605 19.5 11.2583302 13\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"w2ul\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w1ul.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"22.5166605 6.5 22.5166605 19.5 11.2583302 13\"\n to=\"16.88749535 16.25 22.5166605 19.5 11.2583302 13\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"w2ul.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"w3\"\n points=\"11.2583302 13 22.5166605 19.5 16.88749535 16.75\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"w2l.end\" to=\"visible\" />\n <animate\n id=\"w3l\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w2l.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 13 22.5166605 19.5 16.88749535 16.75\"\n to=\"11.2583302 13 22.5166605 19.5 11.2583302 26\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"w3ul\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w2ul.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 13 22.5166605 19.5 11.2583302 26\"\n to=\"11.2583302 13 11.2583302 19.5 11.2583302 26\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"w3ul.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"w4\"\n points=\"11.2583302 26 11.2583302 19.5 11.2583302 13\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"w3l.end\" to=\"visible\" />\n <animate\n id=\"w4l\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w3l.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 26 11.2583302 19.5 11.2583302 13\"\n to=\"11.2583302 26 4.4408921e-15 19.5 11.2583302 13\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"w4ul\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w3ul.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 26 4.4408921e-15 19.5 11.2583302 13\"\n to=\"5.62651 16.25 4.4408921e-15 19.5 11.2583302 13\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"w4ul.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"w5\"\n points=\"11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"w4l.end\" to=\"visible\" />\n <animate\n id=\"w5l\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w4l.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25\"\n to=\"11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"w5ul\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w4ul.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5\"\n to=\"11.2583302 13 5.6291651 9.75 1.687539e-14 6.5\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"w5ul.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"w6\"\n points=\"5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"w5l.end\" to=\"visible\" />\n <animate\n id=\"w6l\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w5l.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5\"\n to=\"11.2583302 0 11.2583302 13 2.66453526e-15 6.5\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"w6ul\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w5ul.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 0 11.2583302 13 2.66453526e-15 6.5\"\n to=\"11.2583302 0 11.2583302 13 11.2583302 6.5\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"w6ul.end\" to=\"hidden\" />\n </polygon>\n </g>\n <g\n id=\"fill\"\n transform=\"translate(4.5, 3)\"\n fill=\"#0F8287\"\n fill-rule=\"nonzero\"\n >\n <polygon\n id=\"f1\"\n points=\"11.2583302 0 11.2583302 6.5 11.2583302 13\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"w6l.end\" to=\"visible\" />\n <animate\n id=\"f1f\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"w6l.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 0 11.2583302 6.5 11.2583302 13\"\n to=\"11.2583302 0 22.5166605 6.5 11.2583302 13\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"f1uf\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f6f.end + 0.2s\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 0 22.5166605 6.5 11.2583302 13\"\n to=\"16.88749535 9.25 22.5166605 6.5 11.2583302 13\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"f1uf.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"f2\"\n points=\"22.5166605 6.5 16.88749535 10 11.2583302 13\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"f1f.end\" to=\"visible\" />\n <animate\n id=\"f2f\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f1f.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"22.5166605 6.5 16.88749535 10 11.2583302 13\"\n to=\"22.5166605 6.5 22.5166605 19.5 11.2583302 13\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"f2uf\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f1uf.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"22.5166605 6.5 22.5166605 19.5 11.2583302 13\"\n to=\"16.88749535 16.25 22.5166605 19.5 11.2583302 13\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"f2uf.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"f3\"\n points=\"11.2583302 13 22.5166605 19.5 16.88749535 16.75\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"f2f.end\" to=\"visible\" />\n <animate\n id=\"f3f\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f2f.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 13 22.5166605 19.5 16.88749535 16.75\"\n to=\"11.2583302 13 22.5166605 19.5 11.2583302 26\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"f3uf\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f2uf.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 13 22.5166605 19.5 11.2583302 26\"\n to=\"11.2583302 13 11.2583302 19.5 11.2583302 26\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"f3uf.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"f4\"\n points=\"11.2583302 26 11.2583302 19.5 11.2583302 13\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"f3f.end\" to=\"visible\" />\n <animate\n id=\"f4f\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f3f.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 26 11.2583302 19.5 11.2583302 13\"\n to=\"11.2583302 26 4.4408921e-15 19.5 11.2583302 13\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"f4uf\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f3uf.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 26 4.4408921e-15 19.5 11.2583302 13\"\n to=\"5.62651 16.25 4.4408921e-15 19.5 11.2583302 13\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"f4uf.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"f5\"\n points=\"11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"f4f.end\" to=\"visible\" />\n <animate\n id=\"f5f\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f4f.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25\"\n to=\"11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"f5uf\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f4uf.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 13 2.4062463e-14 19.5 1.687539e-14 6.5\"\n to=\"11.2583302 13 5.6291651 9.75 1.687539e-14 6.5\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"f5uf.end\" to=\"hidden\" />\n </polygon>\n\n <polygon\n id=\"f6\"\n points=\"5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5\"\n visibility=\"hidden\"\n >\n <set attributeName=\"visibility\" begin=\"f5f.end\" to=\"visible\" />\n <animate\n id=\"f6f\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f5f.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5\"\n to=\"11.2583302 0 11.2583302 13 2.66453526e-15 6.5\"\n keySplines=\"1 0 0.8 1\"\n fill=\"freeze\"\n />\n <animate\n id=\"f6uf\"\n attributeName=\"points\"\n calcMode=\"spline\"\n begin=\"f5uf.end\"\n dur=\"0.4s\"\n keyTimes=\"0;1\"\n from=\"11.2583302 0 11.2583302 13 2.66453526e-15 6.5\"\n to=\"11.2583302 0 11.2583302 13 11.2583302 6.5\"\n keySplines=\"0.2 0 0 1\"\n fill=\"freeze\"\n />\n <set attributeName=\"visibility\" begin=\"f6uf.end\" to=\"hidden\" />\n </polygon>\n </g>\n </g>\n </svg>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"spinner.js","mappings":";;AAAA,MAAM,UAAU,GAAG,ylVAAylV;;MCgB/lV,OAAO;;;;;mBAMyB,WAAW;gBAMpD,QAAQ;qBAKU,KAAK;;EAEzB,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;QACnC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,UAAU;QACpC,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;QAClC,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QAC5B,MAAM,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QAC9B,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QAC5B,YAAY,EAAE,IAAI,CAAC,SAAS;OAC7B,GACK,EACR;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","./src/components/spinner/spinner.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/shadow-dom/component';\n\n@mixin ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 4px) {\n :host(.#{$host-class}) {\n @include ix-component;\n display: block;\n position: relative;\n\n width: $size;\n height: $size;\n min-width: $size;\n min-height: $size;\n max-width: $size;\n max-height: $size;\n border-radius: 100%;\n position: relative;\n animation: rotate 2s linear infinite;\n\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n @keyframes clipMask {\n 0% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 12.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 25% {\n clip-path: polygon(\n 50% 50%,\n 0 0,\n 100% 0,\n 100% 100%,\n 100% 100%,\n 100% 100%\n );\n }\n 37.5% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 50% {\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 62.5% {\n clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n 75% {\n clip-path: polygon(\n 50% 50%,\n 100% 100%,\n 100% 100%,\n 100% 100%,\n 0 100%,\n 0 0\n );\n }\n 87.5% {\n clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n }\n 100% {\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n }\n }\n\n :host(.#{$host-class})::after {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid\n var(--ix-button-color, var(--theme-color-soft-text));\n animation: clipMask 3s linear infinite;\n }\n\n :host(:not(.hide-track)):host(.#{$host-class})::before {\n content: '';\n box-sizing: border-box;\n position: absolute;\n inset: 8.33%;\n border-radius: 100%;\n border: $track-size solid var(--theme-color-ghost--hover);\n }\n\n :host(.primary)::after {\n border-color: var(--theme-color-dynamic);\n }\n\n :host(.primary)::before {\n border-color: var(--theme-color-ghost--hover);\n }\n}\n\n@include ix-spinner($host-class: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($host-class: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($host-class: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($host-class: 'large', $size: 6rem, $track-size: 4px);\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, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Element() hostElement!: HTMLIxSpinnerElement;\n\n /\n Variant of spinner\n /\n @Prop() variant: 'primary' \| 'secondary' = 'secondary';\n\n /\n Size of spinner\n /\n @Prop() size: 'xx-small' \| 'x-small' \| 'small' \| 'medium' \| 'large' =\n 'medium';\n\n /\n @internal\n */\n @Prop() hideTrack = false;\n\n render() {\n return (\n <Host\n class={{\n primary: this.variant === 'primary',\n 'xx-small': this.size === 'xx-small',\n 'x-small': this.size === 'x-small',\n small: this.size === 'small',\n medium: this.size === 'medium',\n large: this.size === 'large',\n 'hide-track': this.hideTrack,\n }}\n ></Host>\n );\n }\n}\n"],"version":3}

package/dist/components/tab-item.js CHANGED Viewed

@@ -1,11 +1,12 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const tabItemCss = "@charset \"UTF-8\";ix-tab-item{position:relative;display:flex;align-items:center;justify-content:center;height:40px;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}ix-tab-item.circle{height:72px}ix-tab-item.top::after{top:0}ix-tab-item.bottom::after{bottom:0}ix-tab-item::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}ix-tab-item.stretched{flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ix-tab-item .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}ix-tab-item .text span,ix-tab-item .text span::before{pointer-events:none}ix-tab-item:hover:not(.circle){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}ix-tab-item:hover:not(.circle)::after{background-color:var(--theme-tab-indicator--background--hover)}ix-tab-item:active:not(.circle){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}ix-tab-item:active:not(.circle)::after{background-color:var(--theme-tab-indicator--background--active)}ix-tab-item:focus-visible{outline:0px solid var(--focus--border-color)}ix-tab-item:focus-visible .circle{outline:1px solid var(--focus--border-color)}ix-tab-item:focus-visible:not(.circle){outline:1px solid var(--focus--border-color)}ix-tab-item.disabled{color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}ix-tab-item.disabled::after{background-color:var(--theme-tab-indicator--background--disabled)}ix-tab-item.selected:not(.disabled){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}ix-tab-item.selected:not(.disabled)::after{background-color:var(--theme-tab-indicator--background--selected)}ix-tab-item.icon{padding:1.5rem 0.5rem}ix-tab-item.small-tab{height:32px;padding:1rem}ix-tab-item.small-tab.icon{padding:1rem 0.25rem}ix-tab-item .circle{display:flex;justify-content:center;align-items:center;height:48px;width:48px;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}ix-tab-item .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}ix-tab-item .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}ix-tab-item .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}ix-tab-item .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}ix-tab-item .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}ix-tab-item .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}ix-tab-item .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:16px;color:var(--theme-pill-outline--color);cursor:pointer}ix-tab-item .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}ix-tab-item .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}ix-tab-item .hidden{display:none}";
+const tabItemCss = "@charset \"UTF-8\";:host{position:relative;display:flex;align-items:center;justify-content:center;height:40px;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}:host .text span,:host .text span::before{pointer-events:none}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.selected::after{display:none}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .counter::after{display:none}:host .hidden{display:none}:host(.circle){height:72px}:host(.top) ::after{top:0}:host(.bottom) ::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle)) ::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle)) ::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled) ::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled)) ::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}";
 const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.selected = false;
     this.disabled = false;
     this.small = false;
@@ -49,7 +50,7 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
       } }, this.counter)));
   }
   static get style() { return tabItemCss; }
-}, [4, "ix-tab-item", {
+}, [1, "ix-tab-item", {
     "selected": [4],
     "disabled": [4],
     "small": [4],

package/dist/components/tab-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"tab-item.js","mappings":";;AAAA,MAAM,UAAU,GAAG,~~8tHAA8tH~~;;~~MCgBpuH~~,OAAO~~;;;;~~oBAIC,KAAK;oBAKL,KAAK;iBAKR,KAAK;gBAKN,KAAK;mBAKF,KAAK;;kBAUgB,MAAM;qBAKP,QAAQ;;EAEtC,cAAc,CAAC,KAQtB;IACC,OAAO;MACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;MACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;MACxB,WAAW,EAAE,KAAK,CAAC,KAAK;MACxB,IAAI,EAAE,KAAK,CAAC,KAAK;MACjB,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;MACvC,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;MACpC,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;MAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;KACrB,CAAC;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC;QACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,MAAM,EAAE,IAAI,CAAC,OAAO;OACrB,CAAC,EACF,QAAQ,EAAE,CAAC,IAEX,WACE,KAAK,EAAE;QACL,MAAM,EAAE,IAAI,CAAC,OAAO;QACpB,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,eAAa,CACT,EACN,WACE,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;QACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAEA,IAAI,CAAC,OAAO,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tab-item/tab-item.scss?tag=ix-tab-item","./src/components/tab-item/tab-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/hover';\n\~~nix-tab-item~~ {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 40px;\n padding: 10px $large-space;\n line-height: 20px;\n font-size: 14px;\n font-weight: bold;\n background-color: var(--theme-tab--background);\n color: var(--theme-tab--color);\n\n ~~&.circle {\n height: 72px;\n }\n\n &.top {\n &::~~after {\n ~~top: 0;\n~~ ~~}\n }\n\n &.bottom {\n &::after {\n bottom: 0;\n }\n }\n\n &::after {\n~~ content: '';\n position: absolute;\n background-color: var(--theme-tab-indicator--background);\n width: 100%;\n height: var(--theme-tab-indicator--height);\n left: 0;\n }\n\n ~~&.stretched {\n flex-basis: 100%;\n width: 100%;\n @include ellipsis;\n }\n\n~~ .text {\n @include ellipsis;\n\n span,\n span::before {\n pointer-events: none;\n }\n\n vertical-align: middle;\n }\n\n ~~&:hover:not(~~.circle) {\n background-color: var(--theme-tab--background--hover);\n color: var(--theme-tab-color-hover);\n cursor: pointer;\n\n &::after {\n background-color: var(--theme-tab-indicator--background--hover);\n }\n }\n\n &:active:not(.circle) {\n background-color: var(--theme-tab--background--active);\n color: var(--theme-tab-color--active);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--active);\n }\n }\n\n &:focus-visible {\n outline: 0px solid var(--focus--border-color);\n\n .circle {\n outline: 1px solid var(--focus--border-color);\n }\n }\n\n &:focus-visible:not(.circle) {\n outline: 1px solid var(--focus--border-color);\n }\n\n &.disabled {\n color: var(--theme-tab--color--disabled);\n background-color: var(--theme-tab--background--disabled);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--disabled);\n }\n }\n\n &.selected:not(.disabled) {\n background-color: var(--theme-tab--background--selected);\n color: var(--theme-tab--color--selected);\n\n &::after {\n background-color: var(--theme-tab-indicator--background--selected);\n }\n }\n\n &.icon {\n padding: $large-space $small-space;\n }\n\n &.small-tab {\n height: 32px;\n padding: $default-space;\n\n &.icon {\n padding: $default-space $tiny-space;\n }\n }\n\n .circle {\n display: flex;\n justify-content: center;\n align-items: center;\n height: ~~48px~~;\n width: ~~48px~~;\n background-color: var(--theme-animated-tab-indicator--background);\n border-radius: 50%;\n border: 2px solid var(--theme-animated-tab-circle--border-color);\n color: var(--theme-an…icon--color);\n cursor: pointer;\n\n &.selected:not(.disabled) {\n background-color: var(--theme-animated-tab-circle--background--selected);\n color: var(--theme-animated-tab-icon--color--selected);\n border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n &:hover {\n background-color: var(\n --theme-animated-tab-circle--background--selected\n );\n }\n }\n\n &:hover {\n background-color: var(--theme-animated-tab-circle--background--hover);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &.disabled {\n background-color: var(--theme-animated-tab-circle--background--disabled);\n border-color: var(--theme-animated-tab-circle--border-color--disabled);\n }\n }\n\n .counter {\n position: absolute;\n z-index: 1;\n height: 16px;\n width: auto;\n background-color: var(--theme-pill-outline--background);\n border: 1px solid var(--theme-tab-pill--border-color);\n border-radius: 100px;\n bottom: 6px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-left: $tiny-space;\n padding-right: $tiny-space;\n font-size: 12px;\n line-height: ~~16px~~;\n color: var(--theme-pill-outline--color);\n cursor: pointer;\n\n &.selected {\n border-color: var(--theme-tab-pill--border-color--selected);\n }\n\n &.disabled {\n border-color: var(--theme-tab-pill--border-color--disabled);\n }\n }\n\n .hidden {\n display: none;\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 { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-tab-item',\n styleUrl: 'tab-item.scss',\n ~~scoped~~: ~~false~~,\n})\nexport class TabItem {\n /\n Set selected tab\n /\n @Prop() selected = false;\n\n /\n Set disabled tab\n /\n @Prop() disabled = false;\n\n /\n Set small size tab\n /\n @Prop() small = false;\n\n /\n Set icon only tab\n /\n @Prop() icon = false;\n\n /\n Set rounded tab\n /\n @Prop() rounded = false;\n\n /\n Set counter value\n /\n @Prop() counter: number;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set selected placement\n */\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n private tabItemClasses(props: {\n selected: boolean;\n disabled: boolean;\n small: boolean;\n icon: boolean;\n circle: boolean;\n layout: 'auto' \| 'stretched';\n placement: 'bottom' \| 'top';\n }) {\n return {\n selected: props.selected,\n disabled: props.disabled,\n 'small-tab': props.small,\n icon: props.small,\n stretched: props.layout === 'stretched',\n bottom: props.placement === 'bottom',\n top: props.placement === 'top',\n circle: props.circle,\n };\n }\n\n render() {\n return (\n <Host\n class={this.tabItemClasses({\n selected: this.selected,\n disabled: this.disabled,\n small: this.small,\n icon: this.icon,\n layout: this.layout,\n placement: this.placement,\n circle: this.rounded,\n })}\n tabIndex={0}\n >\n <div\n class={{\n circle: this.rounded,\n text: !this.rounded,\n selected: this.selected,\n disabled: this.disabled,\n }}\n >\n <slot></slot>\n </div>\n <div\n class={{\n counter: true,\n selected: this.selected,\n hidden: !(this.rounded && this.counter !== undefined),\n disabled: this.disabled,\n }}\n >\n {this.counter}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"tab-item.js","mappings":";;AAAA,MAAM,UAAU,GAAG,6tHAA6tH;;MCgBnuH,OAAO;;;;;oBAIC,KAAK;oBAKL,KAAK;iBAKR,KAAK;gBAKN,KAAK;mBAKF,KAAK;;kBAUgB,MAAM;qBAKP,QAAQ;;EAEtC,cAAc,CAAC,KAQtB;IACC,OAAO;MACL,QAAQ,EAAE,KAAK,CAAC,QAAQ;MACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;MACxB,WAAW,EAAE,KAAK,CAAC,KAAK;MACxB,IAAI,EAAE,KAAK,CAAC,KAAK;MACjB,SAAS,EAAE,KAAK,CAAC,MAAM,KAAK,WAAW;MACvC,MAAM,EAAE,KAAK,CAAC,SAAS,KAAK,QAAQ;MACpC,GAAG,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK;MAC9B,MAAM,EAAE,KAAK,CAAC,MAAM;KACrB,CAAC;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC;QACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,MAAM,EAAE,IAAI,CAAC,MAAM;QACnB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,MAAM,EAAE,IAAI,CAAC,OAAO;OACrB,CAAC,EACF,QAAQ,EAAE,CAAC,IAEX,WACE,KAAK,EAAE;QACL,MAAM,EAAE,IAAI,CAAC,OAAO;QACpB,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,eAAa,CACT,EACN,WACE,KAAK,EAAE;QACL,OAAO,EAAE,IAAI;QACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,MAAM,EAAE,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;QACrD,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAEA,IAAI,CAAC,OAAO,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","./src/components/tab-item/tab-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/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 40px;\n padding: 10px $large-space;\n line-height: 20px;\n font-size: 14px;\n font-weight: bold;\n background-color: var(--theme-tab--background);\n color: var(--theme-tab--color);\n\n ::after {\n content: '';\n position: absolute;\n background-color: var(--theme-tab-indicator--background);\n width: 100%;\n height: var(--theme-tab-indicator--height);\n left: 0;\n }\n\n .text {\n @include ellipsis;\n\n span,\n span::before {\n pointer-events: none;\n }\n\n vertical-align: middle;\n }\n\n .circle {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 3rem;\n width: 3rem;\n background-color: var(--theme-animated-tab-indicator--background);\n border-radius: 50%;\n border: 2px solid var(--theme-animated-tab-circle--border-color);\n color: var(--theme-an…icon--color);\n cursor: pointer;\n\n &.selected:not(.disabled) {\n background-color: var(--theme-animated-tab-circle--background--selected);\n color: var(--theme-animated-tab-icon--color--selected);\n border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n &:hover {\n background-color: var(\n --theme-animated-tab-circle--background--selected\n );\n }\n }\n\n &:hover {\n background-color: var(--theme-animated-tab-circle--background--hover);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &:active {\n background-color: var(--theme-animated-tab-circle--background--active);\n }\n\n &.disabled {\n background-color: var(--theme-animated-tab-circle--background--disabled);\n border-color: var(--theme-animated-tab-circle--border-color--disabled);\n }\n }\n\n .counter {\n position: absolute;\n z-index: 1;\n height: 16px;\n width: auto;\n background-color: var(--theme-pill-outline--background);\n border: 1px solid var(--theme-tab-pill--border-color);\n border-radius: 100px;\n bottom: 6px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-left: $tiny-space;\n padding-right: $tiny-space;\n font-size: 12px;\n line-height: 14px;\n color: var(--theme-pill-outline--color);\n cursor: pointer;\n\n &.selected {\n border-color: var(--theme-tab-pill--border-color--selected);\n\n &::after {\n display: none;\n }\n }\n\n &.disabled {\n border-color: var(--theme-tab-pill--border-color--disabled);\n }\n\n &::after {\n display: none;\n }\n }\n\n .hidden {\n display: none;\n }\n}\n\n:host(.circle) {\n height: 72px;\n}\n\n:host(.top) {\n ::after {\n top: 0;\n }\n}\n\n:host(.bottom) {\n ::after {\n bottom: 0;\n }\n}\n\n:host(.stretched) {\n flex-basis: 100%;\n width: 100%;\n @include ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n background-color: var(--theme-tab--background--hover);\n color: var(--theme-tab-color-hover);\n cursor: pointer;\n\n ::after {\n background-color: var(--theme-tab-indicator--background--hover);\n }\n}\n\n:host(:active:not(.circle)) {\n background-color: var(--theme-tab--background--active);\n color: var(--theme-tab-color--active);\n\n ::after {\n background-color: var(--theme-tab-indicator--background--active);\n }\n}\n\n:host(:focus-visible) {\n outline: 0px solid var(--focus--border-color);\n\n .circle {\n outline: 1px solid var(--focus--border-color);\n }\n}\n\n:host(:focus-visible:not(.circle)) {\n outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n pointer-events: none;\n color: var(--theme-tab--color--disabled);\n background-color: var(--theme-tab--background--disabled);\n\n ::after {\n background-color: var(--theme-tab-indicator--background--disabled);\n }\n}\n\n:host(.selected:not(.disabled)) {\n background-color: var(--theme-tab--background--selected);\n color: var(--theme-tab--color--selected);\n\n ::after {\n background-color: var(--theme-tab-indicator--background--selected);\n }\n}\n\n:host(.icon) {\n padding: $large-space $small-space;\n}\n\n:host(.small-tab) {\n height: 32px;\n padding: $default-space;\n}\n\n:host(.small-tab.icon) {\n padding: $default-space $tiny-space;\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, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-tab-item',\n styleUrl: 'tab-item.scss',\n shadow: true,\n})\nexport class TabItem {\n /\n Set selected tab\n /\n @Prop() selected = false;\n\n /\n Set disabled tab\n /\n @Prop() disabled = false;\n\n /\n Set small size tab\n /\n @Prop() small = false;\n\n /\n Set icon only tab\n /\n @Prop() icon = false;\n\n /\n Set rounded tab\n /\n @Prop() rounded = false;\n\n /\n Set counter value\n /\n @Prop() counter: number;\n\n /\n Set layout width style\n /\n @Prop() layout: 'auto' \| 'stretched' = 'auto';\n\n /\n Set selected placement\n */\n @Prop() placement: 'bottom' \| 'top' = 'bottom';\n\n private tabItemClasses(props: {\n selected: boolean;\n disabled: boolean;\n small: boolean;\n icon: boolean;\n circle: boolean;\n layout: 'auto' \| 'stretched';\n placement: 'bottom' \| 'top';\n }) {\n return {\n selected: props.selected,\n disabled: props.disabled,\n 'small-tab': props.small,\n icon: props.small,\n stretched: props.layout === 'stretched',\n bottom: props.placement === 'bottom',\n top: props.placement === 'top',\n circle: props.circle,\n };\n }\n\n render() {\n return (\n <Host\n class={this.tabItemClasses({\n selected: this.selected,\n disabled: this.disabled,\n small: this.small,\n icon: this.icon,\n layout: this.layout,\n placement: this.placement,\n circle: this.rounded,\n })}\n tabIndex={0}\n >\n <div\n class={{\n circle: this.rounded,\n text: !this.rounded,\n selected: this.selected,\n disabled: this.disabled,\n }}\n >\n <slot></slot>\n </div>\n <div\n class={{\n counter: true,\n selected: this.selected,\n hidden: !(this.rounded && this.counter !== undefined),\n disabled: this.disabled,\n }}\n >\n {this.counter}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/tabs.js CHANGED Viewed

@@ -1,12 +1,14 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './icon.js';
-const tabsCss = "ix-tabs{width:auto;display:flex;align-items:center;position:relative}ix-tabs .tab-items{overflow:hidden;scroll-behavior:smooth;width:100%}ix-tabs .tab-items .items-content{display:flex;align-items:center}ix-tabs .arrow{position:absolute;display:flex;align-items:center;justify-content:center;width:32px;height:32px;top:0;bottom:0;left:0;margin:auto 0;border-radius:4px;color:var(--theme-btn-invisible-primary--color);background-color:var(--theme-btn-invisible-primary--background);z-index:2}ix-tabs .arrow:hover{color:var(--theme-btn-invisible-primary--color--hover);background-color:var(--theme-btn-invisible-primary--background--hover)}ix-tabs .arrow:active{color:var(--theme-btn-invisible-primary--color--active);background-color:var(--theme-btn-invisible-primary--background--active)}ix-tabs .arrow.right{left:auto;right:0}ix-tabs .overflow-shadow{width:50px;height:40px;position:absolute;left:0;top:0;background:linear-gradient(90deg, var(--theme-color-1) 50%, transparent);z-index:1}ix-tabs .overflow-shadow.right{left:auto;right:0;background:linear-gradient(90deg, transparent, var(--theme-color-1) 50%)}";
+const tabsCss = ":host{width:auto;display:flex;align-items:center;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}: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%)}";
 let windowStartSize = window.innerWidth;
 const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.clickAction = {
       timeout: null,
       isClick: true,
@@ -38,7 +40,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
     return this.getTabs()[tabIndex];
   }
   getTabsWrapper() {
-    return this.hostElement.getElementsByClassName('items-content')[0];
+    return this.hostElement.shadowRoot.querySelector('.items-content');
   }
   showArrows() {
     try {
@@ -153,8 +155,10 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
   }
   componentWillRender() {
     requestAnimationFrame(() => {
-      this.styleNextArrow = this.getArrowStyle(this.showNextArrow());
-      this.stylePreviousArrow = this.getArrowStyle(this.showPreviousArrow());
+      const showNextArrow = this.showNextArrow();
+      const previousArrow = this.showPreviousArrow();
+      this.styleNextArrow = this.getArrowStyle(showNextArrow);
+      this.stylePreviousArrow = this.getArrowStyle(previousArrow);
     });
   }
   componentDidLoad() {
@@ -167,11 +171,17 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
     });
   }
   render() {
-    return (h(Host, null, h("div", { class: "overflow-shadow", style: this.stylePreviousArrow }), h("div", { class: "arrow", style: this.stylePreviousArrow, onClick: () => this.move(this.scrollAmount, true) }, h("span", { class: "glyph glyph-chevron-left-small" })), h("div", { class: "tab-items" }, h("div", { class: "items-content" }, h("slot", null))), h("div", { class: "overflow-shadow right", style: this.styleNextArrow }), h("div", { class: "arrow right", style: this.styleNextArrow, onClick: () => this.move(-this.scrollAmount, true) }, h("span", { class: "glyph glyph-chevron-right-small" }))));
+    return (h(Host, null, h("div", { class: "arrow", style: this.stylePreviousArrow, onClick: () => this.move(this.scrollAmount, true) }, h("ix-icon", { name: "chevron-left-small" })), h("div", { class: {
+        'tab-items': true,
+        'overflow-shadow': true,
+        'shadow-left': this.showPreviousArrow(),
+        'shadow-right': this.showNextArrow(),
+        'shadow-both': this.showNextArrow() && this.showPreviousArrow(),
+      } }, h("div", { class: "items-content" }, h("slot", null))), h("div", { class: "arrow right", style: this.styleNextArrow, onClick: () => this.move(-this.scrollAmount, true) }, h("ix-icon", { name: "chevron-right-small" }))));
   }
   get hostElement() { return this; }
   static get style() { return tabsCss; }
-}, [4, "ix-tabs", {
+}, [1, "ix-tabs", {
     "small": [4],
     "rounded": [4],
     "selected": [1026],
@@ -188,13 +198,18 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-tabs"];
+  const components = ["ix-tabs", "ix-icon"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-tabs":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, Tabs);
       }
       break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
   } });
 }

package/dist/components/tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"tabs.js","mappings":"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","names":[],"sources":["./src/components/tabs/tabs.scss?tag=ix-tabs","./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\n@import 'common-variables';\n@import 'mixins/text-truncation';\n\nix-tabs {\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 width: 50px;\n height: 40px;\n position: absolute;\n left: 0;\n top: 0;\n background: linear-gradient(90deg, var(--theme-color-1) 50%, transparent);\n z-index: 1;\n\n &.right {\n left: auto;\n right: 0;\n background: linear-gradient(90deg, transparent, var(--theme-color-1) 50%);\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 h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\n\nlet windowStartSize = window.innerWidth;\n\n@Component({\n tag: 'ix-tabs',\n styleUrl: 'tabs.scss',\n scoped: false,\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 @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n @State() styleNextArrow = {};\n @State() stylePreviousArrow = {};\n\n @State() scrollActionAmount = 0;\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 (windowStartSize === 0) return (windowStartSize = window.innerWidth);\n this.move(windowStartSize - window.innerWidth);\n 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.getElementsByClassName('items-content')[0];\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()) return;\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 componentDidRender() {\n const tabs = this.getTabs();\n this.totalItems = tabs.length;\n\n tabs.forEach((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 element.setAttribute('placement', this.placement);\n });\n }\n\n componentWillRender() {\n requestAnimationFrame(() => {\n this.styleNextArrow = this.getArrowStyle(this.showNextArrow());\n this.stylePreviousArrow = this.getArrowStyle(this.showPreviousArrow());\n });\n }\n\n componentDidLoad() {\n const tabs = this.getTabs();\n tabs.forEach((element, index) => {\n const isDisabled = element.getAttribute('disabled') !== null;\n if (!isDisabled)\n element.addEventListener('click', () => this.clickTab(index));\n\n element.addEventListener('mousedown', (event) =>\n this.dragStart(element, event)\n );\n });\n }\n\n render() {\n return (\n <Host>\n <div class=\"overflow-shadow\" style={this.stylePreviousArrow}></div>\n <div\n class=\"arrow\"\n style={this.stylePreviousArrow}\n onClick={() => this.move(this.scrollAmount, true)}\n >\n <span class=\"glyph glyph-chevron-left-small\"></span>\n </div>\n <div class=\"tab-items\">\n <div class=\"items-content\">\n <slot></slot>\n </div>\n </div>\n <div class=\"overflow-shadow right\" style={this.styleNextArrow}></div>\n <div\n class=\"arrow right\"\n style={this.styleNextArrow}\n onClick={() => this.move(-this.scrollAmount, true)}\n >\n <span class=\"glyph glyph-chevron-right-small\"></span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"tabs.js","mappings":"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","names":[],"sources":["./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\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 h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\n\nlet windowStartSize = window.innerWidth;\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 @State() totalItems = 0;\n @State() currentScrollAmount = 0;\n @State() scrollAmount = 100;\n @State() styleNextArrow = {};\n @State() stylePreviousArrow = {};\n\n @State() scrollActionAmount = 0;\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 (windowStartSize === 0) return (windowStartSize = window.innerWidth);\n this.move(windowStartSize - window.innerWidth);\n 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()) return;\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 componentDidRender() {\n const tabs = this.getTabs();\n this.totalItems = tabs.length;\n\n tabs.forEach((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 element.setAttribute('placement', this.placement);\n });\n }\n\n componentWillRender() {\n requestAnimationFrame(() => {\n const showNextArrow = this.showNextArrow();\n const previousArrow = this.showPreviousArrow();\n this.styleNextArrow = this.getArrowStyle(showNextArrow);\n this.stylePreviousArrow = this.getArrowStyle(previousArrow);\n });\n }\n\n componentDidLoad() {\n const tabs = this.getTabs();\n tabs.forEach((element, index) => {\n const isDisabled = element.getAttribute('disabled') !== null;\n if (!isDisabled)\n element.addEventListener('click', () => this.clickTab(index));\n\n element.addEventListener('mousedown', (event) =>\n this.dragStart(element, event)\n );\n });\n }\n\n render() {\n return (\n <Host>\n <div\n class=\"arrow\"\n style={this.stylePreviousArrow}\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 style={this.styleNextArrow}\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/dist/components/time-picker.js CHANGED Viewed

@@ -1,16 +1,18 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as luxon } from './luxon.js';
-import { d as defineCustomElement$4 } from './button.js';
-import { d as defineCustomElement$3 } from './date-time-card.js';
-import { d as defineCustomElement$2 } from './icon.js';
-import { d as defineCustomElement$1 } from './icon-button.js';
+import { d as defineCustomElement$5 } from './button.js';
+import { d as defineCustomElement$4 } from './date-time-card.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './icon-button.js';
+import { d as defineCustomElement$1 } from './spinner.js';
-const timePickerCss = ".header.sc-ix-time-picker{display:flex;align-items:center;justify-content:center}.title.sc-ix-time-picker{display:flex;align-items:center;font:var(--theme-text-default-title);min-height:2.5rem;color:var(--theme-datepicker-time-header--color)}.clock.sc-ix-time-picker{height:100%;display:flex;justify-content:center;align-items:center;padding:5rem 0}input.sc-ix-time-picker,.time-reference.sc-ix-time-picker{width:2.625rem;height:1.5rem;text-align:center;margin-top:0.5rem;margin-bottom:0.5rem}input.sc-ix-time-picker::-webkit-outer-spin-button,input.sc-ix-time-picker::-webkit-inner-spin-button,.time-reference.sc-ix-time-picker::-webkit-outer-spin-button,.time-reference.sc-ix-time-picker::-webkit-inner-spin-button{-webkit-appearance:none;margin:0 0.3125rem}input[type=number].sc-ix-time-picker,.time-reference[type=number].sc-ix-time-picker{-moz-appearance:textfield}.form-control[type=number].sc-ix-time-picker{text-align:center}.columns.sc-ix-time-picker{display:flex;flex-direction:column;align-items:center;justify-content:space-around}.column-seperator.sc-ix-time-picker{display:flex;align-items:center;margin:0 0.25rem}.button.sc-ix-time-picker{display:flex;justify-content:flex-end}.default-space.sc-ix-time-picker{margin-left:1rem}.text-align.sc-ix-time-picker{text-align:center}.hidden.sc-ix-time-picker{display:none}.time-reference.sc-ix-time-picker{margin:0.75rem 0}";
+const timePickerCss = ":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host .form-control,:host .form-control-plaintext{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);color:var(--theme-input--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);-webkit-padding-start:0.5rem;padding-inline-start:0.5rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem}:host .form-control::-moz-placeholder,:host .form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}:host .form-control::placeholder,:host .form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}:host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),:host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}:host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),:host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}:host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,:host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}:host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,:host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}:host .form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,:host .form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}:host .form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,:host .form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}:host .form-control:focus-visible{color:var(--theme-input--color)}:host .form-control[type=number]{text-align:right}:host .form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}:host .form-control.readonly,:host .form-control[readonly]{background:transparent !important;-webkit-border-before:none !important;border-block-start:none !important;-webkit-border-start:none !important;border-inline-start:none !important;-webkit-border-end:none !important;border-inline-end:none !important;border-radius:0rem}:host .form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}:host .form-control:read-only,:host .form-control[readonly],:host .form-control[readOnly],:host .form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}:host .form-control:read-only::-moz-placeholder,:host .form-control[readonly]::-moz-placeholder,:host .form-control[readOnly]::-moz-placeholder,:host .form-control.readonly::-moz-placeholder{color:transparent}:host .form-control:-moz-read-only::placeholder{color:transparent}:host .form-control:read-only::placeholder,:host .form-control[readonly]::placeholder,:host .form-control[readOnly]::placeholder,:host .form-control.readonly::placeholder{color:transparent}:host .form-control:disabled,:host .form-control.disabled{background:transparent !important;-webkit-border-before:none !important;border-block-start:none !important;-webkit-border-start:none !important;border-inline-start:none !important;-webkit-border-end:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}:host .form-control:disabled::-moz-placeholder,:host .form-control.disabled::-moz-placeholder{color:transparent}:host .form-control:disabled::placeholder,:host .form-control.disabled::placeholder{color:transparent}:host .form-control-plaintext{outline:0}:host .form-group{position:relative}:host .input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}:host .input-wrapper>.glyph{display:block;position:absolute;-webkit-margin-start:0.312rem;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}:host .input-wrapper>input{-webkit-padding-start:2.2rem;padding-inline-start:2.2rem}:host select.form-control{padding:0 0.312rem}:host textarea.form-control{padding:0.375rem 0.5rem}:host .was-validated .form-control:invalid,:host .was-validated .is-invalid{background-color:var(--theme-input-error--background);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center !important;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}:host input.disabled,:host input:disabled{color:var(--theme-input--color--disabled)}:host .header{display:flex;align-items:center;justify-content:center}:host .title{display:flex;align-items:center;font:var(--theme-text-default-title);min-height:2.5rem;color:var(--theme-datepicker-time-header--color)}:host .clock{display:flex;justify-content:center;align-items:center;padding:5rem 0}:host input,:host .time-reference{width:2.625rem;height:1.5rem;text-align:center;margin-top:0.5rem;margin-bottom:0.5rem;}:host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button,:host .time-reference::-webkit-outer-spin-button,:host .time-reference::-webkit-inner-spin-button{-webkit-appearance:none;margin:0 0.3125rem}:host input[type=number],:host .time-reference[type=number]{-moz-appearance:textfield}:host .form-control[type=number]{text-align:center}:host .columns{display:flex;flex-direction:column;align-items:center;justify-content:space-around}:host .column-seperator{display:flex;align-items:center;margin:0 0.25rem}:host .button{display:flex;justify-content:flex-end}:host .default-space{margin-left:1rem}:host .text-align{text-align:center}:host .hidden{display:none}:host .time-reference{margin:0.75rem 0}";
 const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.done = createEvent(this, "done", 7);
     this.timeChange = createEvent(this, "timeChange", 7);
     this._time = luxon.DateTime.now();
@@ -182,15 +184,14 @@ const TimePicker = /*@__PURE__*/ proxyCustomElement(class TimePicker extends HTM
     }
     const hideHourSeperator = hideMinutes || hideHour;
     const hideMinutesSeperator = hideSeconds || hideMinutes;
-    return (h(Host, null, h("ix-date-time-card", { individual: this.individual, corners: this.corners }, h("div", { class: "header", slot: "header" }, h("div", { class: "title" }, "Time")), h("div", { class: "clock" }, h("div", { class: { columns: true, hidden: hideHour } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { hours: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("input", { class: "form-control", name: "hours", type: "number", placeholder: "HH", min: "0", max: this.getMaxDisplayedHour(), value: this.getDisplayedHour(), ref: (ref) => (this.hourInputRef = ref), onChange: () => this.setInputValue(this.hourInputRef, Number(this.hourInputRef.value), this.getMaxDisplayedHour()) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { hours: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideHourSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideMinutes } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { minutes: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("input", { class: "form-control", name: "minutes", type: "number", placeholder: "MM", min: "0", max: "59", value: this.minutes, ref: (ref) => (this.minuteInputRef = ref), onChange: () => this.setInputValue(this.minuteInputRef, Number(this.minuteInputRef.value), 59) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { minutes: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideMinutesSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideSeconds } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { seconds: true }), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("input", { class: "form-control", name: "seconds", type: "number", placeholder: "SS", min: "0", max: "59", value: this.seconds, ref: (ref) => (this.secondInputRef = ref), onChange: () => this.setInputValue(this.secondInputRef, Number(this.secondInputRef.value), 59) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { seconds: true }), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" })), h("div", { class: {
+    return (h(Host, null, h("ix-date-time-card", { individual: this.individual, corners: this.corners }, h("div", { class: "header", slot: "header" }, h("div", { class: "title" }, "Time")), h("div", { class: "clock" }, h("div", { class: { columns: true, hidden: hideHour } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { hours: true }), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: "hours", type: "number", placeholder: "HH", min: "0", max: this.getMaxDisplayedHour(), value: this.getDisplayedHour(), ref: (ref) => (this.hourInputRef = ref), onChange: () => this.setInputValue(this.hourInputRef, Number(this.hourInputRef.value), this.getMaxDisplayedHour()) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { hours: true }), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideHourSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideMinutes } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { minutes: true }), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: "minutes", type: "number", placeholder: "MM", min: "0", max: "59", value: this.minutes, ref: (ref) => (this.minuteInputRef = ref), onChange: () => this.setInputValue(this.minuteInputRef, Number(this.minuteInputRef.value), 59) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { minutes: true }), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" })), h("div", { class: { 'column-seperator': true, hidden: hideMinutesSeperator } }, ":"), h("div", { class: { columns: true, hidden: hideSeconds } }, h("ix-icon-button", { size: "16", onClick: () => this.updateInput('up', { seconds: true }), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("input", { class: "form-control", name: "seconds", type: "number", placeholder: "SS", min: "0", max: "59", value: this.seconds, ref: (ref) => (this.secondInputRef = ref), onChange: () => this.setInputValue(this.secondInputRef, Number(this.secondInputRef.value), 59) }), h("ix-icon-button", { size: "16", onClick: () => this.updateInput('down', { seconds: true }), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" })), h("div", { class: {
         columns: true,
         'default-space': true,
         hidden: hideTimeReference,
-      } }, h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-up", variant: "Primary", class: "arrows" }), h("div", { class: "time-reference" }, this.timeReference), h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-down", variant: "Primary", class: "arrows" }))), h("div", { class: { button: true, hidden: hideIndividual } }, h("ix-button", { onClick: () => this.done.emit(this._time.toFormat(this.format)) }, this.textSelectTime)))));
+      } }, h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-up", variant: "primary", class: "arrows" }), h("div", { class: "time-reference" }, this.timeReference), h("ix-icon-button", { size: "16", onClick: () => this.changeReference(), ghost: true, icon: "chevron-down", variant: "primary", class: "arrows" }))), h("div", { class: { button: true, hidden: hideIndividual } }, h("ix-button", { onClick: () => this.done.emit(this._time.toFormat(this.format)) }, this.textSelectTime)))));
   }
-  get hostElement() { return this; }
   static get style() { return timePickerCss; }
-}, [2, "ix-time-picker", {
+}, [1, "ix-time-picker", {
     "format": [1],
     "corners": [1],
     "individual": [4],
@@ -211,7 +212,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-time-picker", "ix-button", "ix-date-time-card", "ix-icon", "ix-icon-button"];
+  const components = ["ix-time-picker", "ix-button", "ix-date-time-card", "ix-icon", "ix-icon-button", "ix-spinner"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-time-picker":
       if (!customElements.get(tagName)) {
@@ -220,20 +221,25 @@ function defineCustomElement() {
       break;
     case "ix-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "ix-date-time-card":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "ix-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$2();
+        defineCustomElement$3();
       }
       break;
     case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ix-spinner":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }