npm - @siemens/ix - Versions diffs - 1.4.2 → 1.5.0-beta.1 - Mend

@siemens/ix 1.4.2 → 1.5.0-beta.1

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 (982) hide show

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

@@ -0,0 +1 @@

+ {"file":"ix-spinner.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=scoped","./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:host {\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 scoped: 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}

package/dist/cjs/ix-split-button_2.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f4b8e6ee.js');
+const index = require('./index-478a4b66.js');
 const baseButton = require('./base-button-497db257.js');
 const splitButtonCss = ".sc-ix-split-button-h{display:inline-block}.sc-ix-split-button-h .btn-group.sc-ix-split-button{width:100%}.sc-ix-split-button-h .btn-group.sc-ix-split-button>button.sc-ix-split-button:nth-child(1){width:calc(100% - 2rem)}.sc-ix-split-button-h .btn-group.sc-ix-split-button>button.sc-ix-split-button:nth-child(2){width:2rem}.sc-ix-split-button-h .middle-gap.sc-ix-split-button{gap:0.125rem}.sc-ix-split-button-h .left-button-border.sc-ix-split-button{border-top-width:0.125rem;border-right-width:0;border-left-width:0.125rem;border-bottom-width:0.125rem}";
@@ -62,3 +62,5 @@ SplitButtonItem.style = splitButtonItemCss;
 exports.ix_split_button = SplitButton;
 exports.ix_split_button_item = SplitButtonItem;
+//# sourceMappingURL=ix-split-button_2.cjs.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"ix-split-button.ix-split-button-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,2iBAA2iB;;MC8BrjB,WAAW;;;;mBAMgB,SAAS;mBAK7B,KAAK;qBAOH,KAAK;iBAKT,KAAK;;gBAUN,EAAE;qBAKG,cAAc;oBAKf,KAAK;qBAKO,cAAc;kBAE3B,KAAK;;EAUvB,IAAI,UAAU;IACZ,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAC1D,CAAC;GACH;EAEO,cAAc;IACpB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,EAAE;MAC/C,IAAI,CAAC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;KACpD;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,EAAE,CAAC;GACvB;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,IAC5DA,oBACE,KAAK,kCACAE,2BAAgB,CACjB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,EAC5B,CAAC,IAAI,CAAC,KAAK,EACX,KAAK,EACL,KAAK,EACL,IAAI,CAAC,QAAQ,CACd,GACE;QACD,oBAAoB,EAAE,CAAC,IAAI,CAAC,OAAO;OACpC,GAEH,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,IAEvC,IAAI,CAAC,IAAI,GAAGF,qBAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,GAAG,IAAI,OAAG,IAAI,CAAC,KAAK,CACtD,EACTA,oBACE,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,EACrC,KAAK,kCACAE,2BAAgB,CACjB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,EAC5B,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAI,CAAC,QAAQ,CACd,GACE;QACD,MAAM,EAAE,IAAI;OACb,KAGHF,qBAAS,IAAI,EAAE,IAAI,CAAC,SAAS,GAAI,CAC1B,CACL,EAENA,yBAAa,GAAG,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IACjDA,qBAAa,CACD,CACT,EACP;GACH;;;;;AC3JH,MAAM,kBAAkB,GAAG,2CAA2C;;MCuBzD,eAAe;;;;;;;EAkB1B,MAAM;IACJ,QACEA,8BACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GACpB,EACpB;GACH;;;;;;;;","names":["h","Host","getButtonClasses"],"sources":["./src/components/split-button/split-button.scss?tag=ix-split-button&encapsulation=scoped","./src/components/split-button/split-button.tsx","./src/components/split-button-item/split-button-item.css?tag=ix-split-button-item&encapsulation=scoped","./src/components/split-button-item/split-button-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:host {\n display: inline-block;\n\n .btn-group {\n // Overwrite styling from bootstrap button group\n width: 100%;\n\n > button:nth-child(1) {\n width: calc(100% - 2rem);\n }\n\n > button:nth-child(2) {\n width: 2rem;\n }\n }\n\n .middle-gap {\n gap: 0.125rem;\n }\n\n .left-button-border {\n border-top-width: 0.125rem;\n border-right-width: 0;\n border-left-width: 0.125rem;\n border-bottom-width: 0.125rem;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { getButtonClasses } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { Placement } from '../dropdown/placement';\n\nexport type SplitButtonVariant = ButtonVariant;\n\n@Component({\n tag: 'ix-split-button',\n styleUrl: 'split-button.scss',\n scoped: true,\n})\nexport class SplitButton {\n @Element() hostElement!: HTMLIxSplitButtonElement;\n\n /**\n * Color variant of button\n */\n @Prop() variant: SplitButtonVariant = 'Primary';\n\n /**\n * Button outline variant\n */\n @Prop() outline = false;\n\n /**\n * Button invisible\n *\n * @deprecated Will be removed in 2.0.0. Use ghost property\n */\n @Prop() invisible = false;\n\n /**\n * Button invisible\n */\n @Prop() ghost = false;\n\n /**\n * Button label\n */\n @Prop() label: string;\n\n /**\n * Button icon\n */\n @Prop() icon = '';\n\n /**\n * Splitbutton icon\n */\n @Prop() splitIcon = 'context-menu';\n\n /**\n * Disabled\n */\n @Prop() disabled = false;\n\n /**\n * Placement of the dropdown\n */\n @Prop() placement: Placement = 'bottom-start';\n\n @State() toggle = false;\n\n /**\n * Button clicked\n */\n @Event() buttonClick: EventEmitter<MouseEvent>;\n\n private triggerElement: HTMLElement;\n private dropdownElement: HTMLIxDropdownElement;\n\n get splitItems() {\n return Array.from(\n this.hostElement.querySelectorAll('ix-split-button-item')\n );\n }\n\n private linkTriggerRef() {\n if (this.triggerElement && this.dropdownElement) {\n this.dropdownElement.trigger = this.triggerElement;\n }\n }\n\n componentDidLoad() {\n this.linkTriggerRef();\n }\n\n render() {\n return (\n <Host>\n <div class={{ 'btn-group': true, 'middle-gap': !this.outline }}>\n <button\n class={{\n ...getButtonClasses(\n this.variant,\n this.outline,\n this.ghost || this.invisible,\n !this.label,\n false,\n false,\n this.disabled\n ),\n ...{\n 'left-button-border': !this.outline,\n },\n }}\n onClick={(e) => this.buttonClick.emit(e)}\n >\n {this.icon ? <ix-icon name={this.icon} /> : null} {this.label}\n </button>\n <button\n ref={(r) => (this.triggerElement = r)}\n class={{\n ...getButtonClasses(\n this.variant,\n this.outline,\n this.ghost || this.invisible,\n true,\n false,\n false,\n this.disabled\n ),\n ...{\n anchor: true,\n },\n }}\n >\n <ix-icon name={this.splitIcon} />\n </button>\n </div>\n\n <ix-dropdown ref={(r) => (this.dropdownElement = r)}>\n <slot></slot>\n </ix-dropdown>\n </Host>\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\n:host {\n display: block;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-split-button-item',\n styleUrl: 'split-button-item.css',\n scoped: true,\n})\nexport class SplitButtonItem {\n /**\n * Dropdown icon\n */\n @Prop() icon: string;\n\n /**\n * Dropdown label\n */\n @Prop() label: string;\n\n /**\n * Dropdown item clicked\n */\n @Event() itemClick: EventEmitter<MouseEvent>;\n\n @Element() hostElement: HTMLIxSplitButtonItemElement;\n\n render() {\n return (\n <ix-dropdown-item\n icon={this.icon}\n label={this.label}\n onClick={(e) => this.itemClick.emit(e)}\n ></ix-dropdown-item>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ix-tab-item.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f4b8e6ee.js');
+const index = require('./index-478a4b66.js');
 const tabItemCss = "@charset \"UTF-8\";ix-tab-item{position:relative;display:flex;align-items:center;justify-content:center;height:40px;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}ix-tab-item.circle{height:72px}ix-tab-item.top::after{top:0}ix-tab-item.bottom::after{bottom:0}ix-tab-item::after{content:\"\";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}ix-tab-item.stretched{flex-basis:100%;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}";
@@ -55,3 +55,5 @@ const TabItem = class {
 TabItem.style = tabItemCss;
 exports.ix_tab_item = TabItem;
+//# sourceMappingURL=ix-tab-item.cjs.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"ix-tab-item.entry.cjs.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,QACEA,QAACC,UAAI,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,IAEXD,iBACE,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,IAEDA,qBAAa,CACT,EACNA,iBACE,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":["h","Host"],"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}

package/dist/cjs/ix-tabs.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f4b8e6ee.js');
+const index = require('./index-478a4b66.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%)}";
@@ -177,3 +177,5 @@ const Tabs = class {
 Tabs.style = tabsCss;
 exports.ix_tabs = Tabs;
+//# sourceMappingURL=ix-tabs.cjs.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"ix-tabs.entry.cjs.js","mappings":"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","names":["h","Host"],"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}

package/dist/cjs/ix-tile.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f4b8e6ee.js');
+const index = require('./index-478a4b66.js');
 const tileCss = ".sc-ix-tile-h{min-width:11.937rem;max-width:11.937rem;width:11.937rem;display:flex;flex-direction:column;border:1px solid var(--theme-tile--border);border-radius:var(--theme-tile--border-radius);background-color:var(--theme-color-2);color:var(--theme-color-std-text);box-shadow:var(--theme-tile--box-shadow)}.tile-small.sc-ix-tile-h{height:2.5rem;min-height:2.5rem;max-height:2.5rem}.tile-medium.sc-ix-tile-h{height:5rem;min-height:5rem;max-height:5rem}.tile-big.sc-ix-tile-h{height:10rem;min-height:10rem;max-height:10rem}.sc-ix-tile-h:active,.sc-ix-tile-h:focus-visible,.sc-ix-tile-h:visited{outline:none}.sc-ix-tile-h .tile-header.sc-ix-tile{display:flex;align-items:center}.sc-ix-tile-h .tile-header.sc-ix-tile:not(:empty),.sc-ix-tile-h .tile-subheader.sc-ix-tile:not(:empty),.sc-ix-tile-h .tile-content.sc-ix-tile:not(:empty),.sc-ix-tile-h .tile-footer.sc-ix-tile:not(:empty){padding:0 1rem}.sc-ix-tile-h .tile-header.sc-ix-tile,.sc-ix-tile-h .tile-subheader.sc-ix-tile,.sc-ix-tile-h .tile-content.sc-ix-tile{flex-grow:1}.sc-ix-tile-h .tile-header.sc-ix-tile:not(:empty){display:flex;height:2.5rem;max-height:2.5rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem}.sc-ix-tile-h .tile-subheader.sc-ix-tile{color:var(--theme-btn-invisible-secondary--color);flex-grow:0}.sc-ix-tile-h .tile-content.sc-ix-tile{flex-grow:1}.sc-ix-tile-h .tile-footer.sc-ix-tile:not(:empty){-webkit-border-before:1px solid var(--theme-color-1);border-block-start:1px solid var(--theme-color-1);height:2.5rem}";
@@ -22,3 +22,5 @@ const Tile = class {
 Tile.style = tileCss;
 exports.ix_tile = Tile;
+//# sourceMappingURL=ix-tile.cjs.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"ix-tile.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,OAAO,GAAG,y9CAAy9C;;MCgB59C,IAAI;;;gBAI4B,QAAQ;;EAEnD,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,KAAK,EAAE;QACL,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACnC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACrC,UAAU,EAAE,IAAI,CAAC,IAAI,KAAK,KAAK;OAChC,IAEDD,iBAAK,KAAK,EAAC,0BAA0B,IACnCA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,EACNA,iBAAK,KAAK,EAAC,gBAAgB,IACzBA,kBAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACNA,iBAAK,KAAK,EAAC,cAAc,IACvBA,qBAAa,CACT,EACNA,iBAAK,KAAK,EAAC,aAAa,IACtBA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB,CACD,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/tile/tile.scss?tag=ix-tile&encapsulation=scoped","./src/components/tile/tile.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\n:host {\n @mixin set-height($height) {\n height: $height;\n min-height: $height;\n max-height: $height;\n }\n\n $heightSmall: 2.5rem;\n $heightMedium: 5rem;\n $heightBig: 10rem;\n $width: 11.937rem;\n\n min-width: $width;\n max-width: $width;\n width: $width;\n\n display: flex;\n flex-direction: column;\n border: 1px solid var(--theme-tile--border);\n border-radius: var(--theme-tile--border-radius);\n\n background-color: var(--theme-color-2);\n color: var(--theme-color-std-text);\n box-shadow: var(--theme-tile--box-shadow);\n\n &.tile-small {\n @include set-height($heightSmall);\n }\n\n &.tile-medium {\n @include set-height($heightMedium);\n }\n\n &.tile-big {\n @include set-height($heightBig);\n }\n\n // @each $key, $value in $color-map-status {\n // &.tile-#{$key} {\n // background-color: #{$value};\n // color: automatic-text-color($value, 65);\n // }\n // }\n\n &:active,\n &:focus-visible,\n &:visited {\n outline: none;\n }\n\n .tile-header {\n display: flex;\n align-items: center;\n }\n\n .tile-header,\n .tile-subheader,\n .tile-content,\n .tile-footer {\n &:not(:empty) {\n padding: 0 $default-space;\n }\n }\n\n .tile-header,\n .tile-subheader,\n .tile-content {\n flex-grow: 1;\n }\n\n .tile-header:not(:empty) {\n display: flex;\n height: $large-control-height;\n max-height: $large-control-height;\n padding-inline-end: $small-space;\n }\n\n .tile-subheader {\n color: var(--theme-btn-invisible-secondary--color);\n flex-grow: 0;\n }\n\n .tile-content {\n flex-grow: 1;\n }\n\n .tile-footer:not(:empty) {\n border-block-start: 1px solid var(--theme-color-1);\n height: $large-control-height;\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-tile',\n styleUrl: 'tile.scss',\n scoped: true,\n})\nexport class Tile {\n /**\n * Size of the tile - one of 'small', 'medium' or 'large'\n */\n @Prop() size: 'small' | 'medium' | 'big' = 'medium';\n\n render() {\n return (\n <Host\n class={{\n 'tile-small': this.size === 'small',\n 'tile-medium': this.size === 'medium',\n 'tile-big': this.size === 'big',\n }}\n >\n <div class=\"tile-header text-l-title\">\n <slot name=\"header\"></slot>\n </div>\n <div class=\"tile-subheader\">\n <slot name=\"subheader\"></slot>\n </div>\n <div class=\"tile-content\">\n <slot></slot>\n </div>\n <div class=\"tile-footer\">\n <slot name=\"footer\"></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ix-toast_2.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f4b8e6ee.js');
+const index = require('./index-478a4b66.js');
 const typedEvent = require('./typed-event-f0f051da.js');
 const toastCss = ".sc-ix-toast-h{display:flex;flex-direction:column;position:relative;min-width:17.5rem;max-width:17.5rem;min-height:3.5rem;pointer-events:all;background-color:var(--theme-toast--background);border:var(--theme-toast--border-thickness) solid var(--theme-toast--border-color);border-radius:var(--theme-toast--border-radius);box-shadow:var(--theme-toast--box-shadow);--animate-duration:300ms}.sc-ix-toast-h .toast-body.sc-ix-toast{display:flex;position:relative;width:100%;flex-grow:1}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-icon.sc-ix-toast{display:flex;align-items:flex-start;margin:1rem}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-content.sc-ix-toast{overflow:hidden;text-overflow:ellipsis;min-width:0;width:100%;max-width:10.25rem;margin-top:calc(\n        1rem + var(--theme-toast--border-thickness)\n      );margin-bottom:0.75rem}.sc-ix-toast-h .toast-body.sc-ix-toast .toast-content.sc-ix-toast .toast-message.sc-ix-toast{min-width:0}.sc-ix-toast-h .toast-close.sc-ix-toast{display:flex;position:relative;margin:0.75rem;pointer-events:all}.sc-ix-toast-h .toast-progress-bar.sc-ix-toast{position:absolute;bottom:0;height:0.25rem;width:100%;background-color:var(--theme-toast-timer-value--background);transform-origin:left}.sc-ix-toast-h .toast-progress-bar--animated.sc-ix-toast{animation:trackProgress linear 1 forwards}.sc-ix-toast-h .toast-progress-bar--touched.sc-ix-toast{transition:transform 1s}.sc-ix-toast-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-toast-h:not(.disabled):not(:disabled):hover .toast-progress-bar.sc-ix-toast{visibility:hidden;transition:none}@keyframes trackProgress{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}";
@@ -90,6 +90,7 @@ Toast.style = toastCss;
 const ToastContainer = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.PREFIX_POSITION_CLASS = 'toast-container--';
     this.containerId = 'toast-container';
     this.containerClass = 'toast-container';
     this.position = 'bottom-right';
@@ -102,10 +103,15 @@ const ToastContainer = class {
       const toastContainer = document.createElement('div');
       toastContainer.id = this.containerId;
       toastContainer.classList.add(this.containerClass);
-      toastContainer.classList.add(`toast-container--${this.position}`);
+      toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${this.position}`);
       document.body.appendChild(toastContainer);
     }
   }
+  onPositionChange(newPosition, oldPosition) {
+    const toastContainer = document.getElementById(this.containerId);
+    toastContainer.classList.remove(`${this.PREFIX_POSITION_CLASS}${oldPosition}`);
+    toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);
+  }
   /**
    * Display a toast message
    * @param config
@@ -145,7 +151,12 @@ const ToastContainer = class {
     return index.h(index.Host, null);
   }
   get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "position": ["onPositionChange"]
+  }; }
 };
 exports.ix_toast = Toast;
 exports.ix_toast_container = ToastContainer;
+//# sourceMappingURL=ix-toast_2.cjs.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"ix-toast.ix-toast-container.entry.cjs.js","mappings":"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","names":["h","Host","TypedEvent"],"sources":["./src/components/toast/toast.scss?tag=ix-toast&encapsulation=scoped","./src/components/toast/toast.tsx","./src/components/toast/toast-container.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/hover';\n@import 'mixins/text-truncation';\n\n:host {\n display: flex;\n flex-direction: column;\n position: relative;\n min-width: 17.5rem;\n max-width: 17.5rem;\n min-height: 3.5rem;\n\n pointer-events: all;\n\n background-color: var(--theme-toast--background);\n border: var(--theme-toast--border-thickness) solid\n var(--theme-toast--border-color);\n border-radius: var(--theme-toast--border-radius);\n box-shadow: var(--theme-toast--box-shadow);\n\n --animate-duration: #{$medium-time};\n\n .toast-body {\n display: flex;\n position: relative;\n width: 100%;\n flex-grow: 1;\n\n .toast-icon {\n display: flex;\n align-items: flex-start;\n margin: $default-space;\n }\n\n .toast-content {\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n width: 100%;\n max-width: 10.25rem;\n margin-top: calc(\n #{$default-space} + var(--theme-toast--border-thickness)\n );\n margin-bottom: $medium-space;\n\n .toast-message {\n min-width: 0;\n }\n }\n }\n\n .toast-close {\n display: flex;\n position: relative;\n margin: $medium-space;\n pointer-events: all;\n }\n\n .toast-progress-bar {\n position: absolute;\n bottom: 0;\n height: $tiny-space;\n width: 100%;\n background-color: var(--theme-toast-timer-value--background);\n transform-origin: left;\n\n &--animated {\n animation: trackProgress linear 1 forwards;\n }\n\n &--touched {\n transition: transform 1s;\n }\n }\n\n @include hover {\n .toast-progress-bar {\n visibility: hidden;\n transition: none;\n }\n }\n\n @keyframes trackProgress {\n 0% {\n transform: scaleX(1);\n }\n 100% {\n transform: scaleX(0);\n }\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { ToastType } from './toast-utils';\n\n@Component({\n tag: 'ix-toast',\n styleUrl: 'toast.scss',\n scoped: true,\n})\nexport class Toast {\n /**\n * Toast type\n */\n @Prop() type: ToastType = 'info';\n\n /**\n * Toast title\n */\n @Prop() toastTitle: string;\n\n /**\n * Autoclose title after delay\n */\n @Prop() autoCloseDelay = 5000;\n\n /**\n * Autoclose behavior\n */\n @Prop() autoClose = true;\n\n /**\n * Icon of toast\n */\n @Prop() icon: string;\n\n /**\n * Icon color of toast\n */\n @Prop() iconColor: string;\n\n /**\n * Toast closed\n */\n @Event() closeToast: EventEmitter;\n\n @State() progress = 0;\n @State() isRunning = true;\n @State() touched = false;\n\n @Element() host!: HTMLIxToastElement;\n\n private getIcon() {\n if (this.icon) {\n return <ix-icon name={this.icon} color={this.iconColor} size=\"24\" />;\n }\n\n switch (this.type) {\n case 'info':\n return <ix-icon name={'info'} size=\"24\" color=\"color-std-text\" />;\n\n case 'error':\n return <ix-icon name={'error'} size=\"24\" color=\"color-alarm\" />;\n\n case 'success':\n return <ix-icon name={'success'} size=\"24\" color=\"color-success\" />;\n\n case 'warning':\n return <ix-icon name={'warning'} size=\"24\" color=\"color-warning\" />;\n\n default:\n return '';\n }\n }\n\n private close() {\n if (this.host) {\n this.host.classList.add('animate__fadeOut');\n }\n setTimeout(() => {\n this.closeToast.emit();\n }, 250);\n }\n\n render() {\n let progressBarElement: HTMLElement;\n let progressBarStyle: Record<string, string> = {};\n\n const progressBarClass = ['toast-progress-bar'];\n\n if (!this.touched) {\n progressBarStyle = {\n animationDuration: `${this.autoCloseDelay}ms`,\n animationPlayState: this.isRunning ? 'running' : 'paused',\n };\n\n progressBarClass.push('toast-progress-bar--animated');\n } else {\n progressBarClass.push('toast-progress-bar--touched');\n }\n\n const updateProgress = () => {\n requestAnimationFrame(() => {\n if (progressBarElement) {\n progressBarElement.style.transform = `scaleX(${this.progress})`;\n }\n });\n };\n\n return (\n <Host class=\"animate__animated animate__fadeIn\">\n <div\n class=\"toast-body\"\n onPointerLeave={() => {\n this.progress = 0;\n updateProgress();\n }}\n onPointerEnter={() => {\n this.isRunning = false;\n this.touched = true;\n this.progress = 1;\n updateProgress();\n }}\n >\n {this.type || this.icon ? (\n <div class=\"toast-icon\">{this.getIcon()}</div>\n ) : null}\n <div class=\"toast-content\">\n {this.toastTitle ? (\n <div class=\"toast-title text-default-title-single\">\n {this.toastTitle}\n </div>\n ) : null}\n <div class=\"toast-message text-default\">\n <slot></slot>\n </div>\n </div>\n <div class=\"toast-close\">\n <ix-icon-button\n icon=\"close\"\n size=\"24\"\n ghost\n onClick={() => this.closeToast.emit()}\n />\n </div>\n </div>\n {this.autoClose ? (\n <div\n class={progressBarClass.join(' ')}\n style={progressBarStyle}\n ref={(r) => (progressBarElement = r)}\n onAnimationEnd={() => {\n this.close();\n }}\n onTransitionEnd={() => {\n if (this.progress === 0) {\n this.close();\n }\n }}\n ></div>\n ) : null}\n </Host>\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 Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport { TypedEvent } from '../utils/typed-event';\nimport { ToastConfig } from './toast-utils';\n\n@Component({\n tag: 'ix-toast-container',\n scoped: true,\n})\nexport class ToastContainer {\n @Element() host!: HTMLIxToastContainerElement;\n\n /**\n */\n @Prop() containerId = 'toast-container';\n\n /**\n */\n @Prop() containerClass = 'toast-container';\n\n /**\n */\n @Prop() position: 'bottom-right' | 'top-right' = 'bottom-right';\n\n private readonly PREFIX_POSITION_CLASS = 'toast-container--';\n\n get hostContainer() {\n return document.getElementById(this.containerId);\n }\n\n componentDidLoad() {\n if (!document.getElementById(this.containerId)) {\n const toastContainer = document.createElement('div');\n toastContainer.id = this.containerId;\n toastContainer.classList.add(this.containerClass);\n toastContainer.classList.add(\n `${this.PREFIX_POSITION_CLASS}${this.position}`\n );\n document.body.appendChild(toastContainer);\n }\n }\n\n @Watch('position')\n onPositionChange(newPosition: string, oldPosition: string) {\n const toastContainer = document.getElementById(this.containerId);\n toastContainer.classList.remove(\n `${this.PREFIX_POSITION_CLASS}${oldPosition}`\n );\n toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);\n }\n\n /**\n * Display a toast message\n * @param config\n */\n @Method()\n async showToast(config: ToastConfig) {\n const toast = document.createElement('ix-toast');\n\n const onClose = new TypedEvent<any | undefined>();\n\n function removeToast(result?: any) {\n toast.remove();\n onClose.emit(result);\n }\n\n toast.toastTitle = config.title;\n toast.type = config.type;\n toast.autoClose = config.autoClose;\n toast.autoCloseDelay = config.autoCloseDelay;\n toast.icon = config.icon;\n toast.iconColor = config.iconColor;\n toast.addEventListener(\n 'closeToast',\n (event: CustomEvent<any | undefined>) => {\n const { detail } = event;\n removeToast(detail);\n }\n );\n\n if (typeof config.message === 'string') {\n toast.innerText = config.message;\n } else {\n toast.appendChild(config.message);\n }\n\n this.hostContainer.appendChild(toast);\n\n return {\n onClose,\n close: (result?: any) => {\n removeToast(result);\n },\n };\n }\n\n render() {\n return <Host></Host>;\n }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f4b8e6ee.js');
+const index = require('./index-478a4b66.js');
 const toggleCss = ".sc-ix-toggle-h{display:flex;align-items:center;outline:none}.sc-ix-toggle-h .switch.sc-ix-toggle{position:relative;display:inline-flex;align-items:center;min-width:3rem;height:2rem}.sc-ix-toggle-h .switch.sc-ix-toggle:not(.disabled):not(:disabled):focus-visible{outline-color:var(--focus--border-color);outline-style:solid;outline-width:1px}.sc-ix-toggle-h .switch.sc-ix-toggle input.sc-ix-toggle{opacity:0;width:0;height:0}.sc-ix-toggle-h .slider.sc-ix-toggle{display:flex;align-items:center;justify-content:center;position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0}.sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-off--background);border-radius:2.125rem;border:1px solid var(--theme-switch-off--border-color);width:2.5rem;height:1rem}.sc-ix-toggle-h .slider.sc-ix-toggle:before{position:absolute;content:\"\";height:1.5rem;width:1.5rem;left:0.125rem;background-color:var(--theme-switch-thumb-off--background);transition:transform 150ms;border-radius:50%;border:1px solid var(--theme-switch-thumb-off--border-color);box-shadow:var(--theme-switch-thumb--box-shadow)}.sc-ix-toggle-h input.sc-ix-toggle:checked+.slider.sc-ix-toggle:before{transform:translateX(1.125rem);left:0.25rem}.sc-ix-toggle-h .text.sc-ix-toggle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-switch--color);padding:0 0.5rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-off--background--hover);border-color:var(--theme-switch-thumb-off--border-color--hover)}.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider-track.sc-ix-toggle{background-color:var(--theme-switch-off--background--hover);border-color:var(--theme-switch-off--border-color--hover)}.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .text.sc-ix-toggle{color:var(--theme-switch--color--hover)}.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-off--background--active);border-color:var(--theme-switch-thumb-off--border-color--active)}.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider-track.sc-ix-toggle{background-color:var(--theme-switch-off--background--active);border-color:var(--theme-switch-off--border-color--active)}.sc-ix-toggle-h:not(.disabled):not(:disabled):active .text.sc-ix-toggle{color:var(--theme-switch--color--active)}.checked.sc-ix-toggle-h .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-on--background);border-color:var(--theme-switch-thumb-on--border-color)}.checked.sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-on--background);border-color:var(--theme-switch-on--border-color)}.checked.sc-ix-toggle-h .text.sc-ix-toggle{color:var(--theme-switch--color)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-on--background--hover);border-color:var(--theme-switch-thumb-on--border-color--hover)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-on--background--hover);border-color:var(--theme-switch-on--border-color--hover)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .text.sc-ix-toggle{color:var(--theme-switch--color--hover)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-on--background--active);border-color:var(--theme-switch-thumb-on--border-color--active)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider-track.sc-ix-toggle{background-color:var(--theme-switch-on--background--active);border-color:var(--theme-switch-on--border-color--active)}.checked.sc-ix-toggle-h:not(.disabled):not(:disabled):active .text.sc-ix-toggle{color:var(--theme-switch--color--active)}.indeterminate.sc-ix-toggle-h .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-mixed--background);border-color:var(--theme-switch-thumb-mixed--border-color)}.indeterminate.sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-mixed--background);border-color:var(--theme-switch-mixed--border-color)}.indeterminate.sc-ix-toggle-h .text.sc-ix-toggle{color:var(--theme-switch--color)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-mixed--background--hover);border-color:var(--theme-switch-thumb-mixed--border-color--hover)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-mixed--background--hover);border-color:var(--theme-switch-mixed--border-color--hover)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):hover .text.sc-ix-toggle{color:var(--theme-switch--color--hover)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled){cursor:pointer}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-mixed--background--active);border-color:var(--theme-switch-thumb-mixed--border-color--active)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):active .slider-track.sc-ix-toggle{background-color:var(--theme-switch-mixed--background--active);border-color:var(--theme-switch-mixed--border-color--active)}.indeterminate.sc-ix-toggle-h:not(.disabled):not(:disabled):active .text.sc-ix-toggle{color:var(--theme-switch--color--active)}.indeterminate.sc-ix-toggle-h .slider.sc-ix-toggle:before{transform:translateX(0.625rem)}[disabled].sc-ix-toggle-h .slider.sc-ix-toggle,.disabled.sc-ix-toggle-h .slider.sc-ix-toggle{cursor:initial;opacity:0.5}[disabled].sc-ix-toggle-h .slider.sc-ix-toggle:before,.disabled.sc-ix-toggle-h .slider.sc-ix-toggle:before{background-color:var(--theme-switch-thumb-off--background--disabled);border-color:var(--theme-switch-thumb-off--border-color--disabled)}[disabled].sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle,.disabled.sc-ix-toggle-h .slider.sc-ix-toggle .slider-track.sc-ix-toggle{background-color:var(--theme-switch-off--background--disabled);border-color:var(--theme-switch-off--border-color--disabled)}[disabled].sc-ix-toggle-h .text.sc-ix-toggle,.disabled.sc-ix-toggle-h .text.sc-ix-toggle{color:var(--theme-switch--color--disabled)}";
@@ -55,3 +55,5 @@ const CuiToggle = class {
 CuiToggle.style = toggleCss;
 exports.ix_toggle = CuiToggle;
+//# sourceMappingURL=ix-toggle.cjs.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"ix-toggle.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,iwNAAiwN;;MCyBtwN,SAAS;;;;mBAI8B,KAAK;oBAKpC,KAAK;yBAKA,KAAK;iBAMb,QAAQ;kBAKP,IAAI;mBAKH,KAAK;6BAKK,OAAO;oBAKhB,KAAK;;EAUxB,MAAM,SAAS,CAAC,KAAoB;IAClC,MAAM,aAAa,GAAG,KAAK,CAAC,MAAqB,CAAC;IAElD,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE;MAC7C,OAAO;KACR;IAED,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa,EAAE;MAC1D,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KACxB;GACF;EAEO,UAAU,CAAC,KAAY;IAC7B,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa,EAAE;MACvC,OAAO;KACR;IAED,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,KAAK,CAAC,cAAc,EAAE,CAAC;IAEvB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;IAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GACvC;EAEO,OAAO;IACb,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE;MACpD,OAAO,IAAI,CAAC,iBAAiB,CAAC;KAC/B;IAED,OAAO,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;GAClD;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,aAAa,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;OAChE,IAEDD,mBAAO,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,IACpDA,mBACE,QAAQ,EAAC,IAAI,EACb,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAC/D,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,EAAE,EACvB,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,GACnC,EACFA,kBAAM,KAAK,EAAC,QAAQ,IAClBA,kBAAM,KAAK,EAAC,cAAc,GAAQ,CAC7B,CACD,EACP,CAAC,IAAI,CAAC,QAAQ,IACbA,kBACE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,EACrB,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAEjC,IAAI,CAAC,OAAO,EAAE,CACV,IACL,IAAI,CACH,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/toggle/toggle.scss?tag=ix-toggle&encapsulation=scoped","./src/components/toggle/toggle.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n@mixin toggle($state, $suffix: '') {\n .slider {\n &:before {\n background-color: var(\n --theme-switch-thumb-#{$state}--background#{$suffix}\n );\n border-color: var(--theme-switch-thumb-#{$state}--border-color#{$suffix});\n }\n\n .slider-track {\n background-color: var(--theme-switch-#{$state}--background#{$suffix});\n border-color: var(--theme-switch-#{$state}--border-color#{$suffix});\n }\n }\n\n .text {\n color: var(--theme-switch--color);\n }\n\n @include hover {\n .slider {\n &:before {\n background-color: var(\n --theme-switch-thumb-#{$state}--background--hover#{$suffix}\n );\n border-color: var(\n --theme-switch-thumb-#{$state}--border-color--hover#{$suffix}\n );\n }\n\n .slider-track {\n background-color: var(\n --theme-switch-#{$state}--background--hover#{$suffix}\n );\n border-color: var(\n --theme-switch-#{$state}--border-color--hover#{$suffix}\n );\n }\n }\n\n .text {\n color: var(--theme-switch--color--hover);\n }\n }\n\n @include active {\n .slider:before {\n background-color: var(\n --theme-switch-thumb-#{$state}--background--active#{$suffix}\n );\n border-color: var(\n --theme-switch-thumb-#{$state}--border-color--active#{$suffix}\n );\n }\n\n .slider-track {\n background-color: var(\n --theme-switch-#{$state}--background--active#{$suffix}\n );\n border-color: var(\n --theme-switch-#{$state}--border-color--active#{$suffix}\n );\n }\n\n .text {\n color: var(--theme-switch--color--active);\n }\n }\n}\n\n:host {\n $slide-toggle-width: 3rem;\n display: flex;\n align-items: center;\n outline: none;\n\n .switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n min-width: $slide-toggle-width;\n height: $default-control-height;\n\n @include focus-visible {\n outline-color: var(--focus--border-color);\n outline-style: solid;\n outline-width: 1px;\n }\n }\n\n .switch input {\n opacity: 0;\n width: 0;\n height: 0;\n }\n\n .slider {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n\n .slider-track {\n background-color: var(--theme-switch-off--background);\n border-radius: 2.125rem;\n border: 1px solid var(--theme-switch-off--border-color);\n width: 2.5rem;\n height: $default-space;\n }\n }\n\n .slider:before {\n position: absolute;\n content: '';\n height: 1.5rem;\n width: 1.5rem;\n left: 0.125rem;\n background-color: var(--theme-switch-thumb-off--background);\n -webkit-transition: transform $default-time;\n transition: transform $default-time;\n border-radius: 50%;\n border: 1px solid var(--theme-switch-thumb-off--border-color);\n box-shadow: var(--theme-switch-thumb--box-shadow);\n }\n\n input:checked + .slider:before {\n -webkit-transform: translateX(1.125rem);\n -ms-transform: translateX(1.125rem);\n transform: translateX(1.125rem);\n left: $tiny-space;\n }\n\n .text {\n @include ellipsis;\n\n color: var(--theme-switch--color);\n padding: 0 $small-space;\n position: relative;\n user-select: none;\n }\n\n @include hover {\n .slider:before {\n background-color: var(--theme-switch-thumb-off--background--hover);\n border-color: var(--theme-switch-thumb-off--border-color--hover);\n }\n\n .slider-track {\n background-color: var(--theme-switch-off--background--hover);\n border-color: var(--theme-switch-off--border-color--hover);\n }\n\n .text {\n color: var(--theme-switch--color--hover);\n }\n }\n\n @include active {\n .slider:before {\n background-color: var(--theme-switch-thumb-off--background--active);\n border-color: var(--theme-switch-thumb-off--border-color--active);\n }\n\n .slider-track {\n background-color: var(--theme-switch-off--background--active);\n border-color: var(--theme-switch-off--border-color--active);\n }\n\n .text {\n color: var(--theme-switch--color--active);\n }\n }\n\n &.checked {\n @include toggle('on');\n }\n\n &.indeterminate {\n @include toggle('mixed');\n\n .slider:before {\n transform: translateX(0.625rem);\n }\n }\n\n &[disabled],\n &.disabled {\n .slider {\n cursor: initial;\n opacity: 0.5;\n\n &:before {\n background-color: var(--theme-switch-thumb-off--background--disabled);\n border-color: var(--theme-switch-thumb-off--border-color--disabled);\n }\n\n .slider-track {\n background-color: var(--theme-switch-off--background--disabled);\n border-color: var(--theme-switch-off--border-color--disabled);\n }\n }\n\n .text {\n color: var(--theme-switch--color--disabled);\n }\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n} from '@stencil/core';\n\n@Component({\n tag: 'ix-toggle',\n styleUrl: 'toggle.scss',\n scoped: true,\n})\nexport class CuiToggle {\n /**\n * Whether the slide-toggle element is checked or not.\n */\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /**\n * Whether the slide-toggle element is disabled or not.\n */\n @Prop() disabled = false;\n\n /**\n * If true the control is in indeterminate state\n */\n @Prop() indeterminate = false;\n\n /**\n * Basic and status colors from color palette\n * @deprecated Will be removed in 2.0.0\n */\n @Prop() color = 'accent';\n\n /**\n * Text for on state\n */\n @Prop() textOn = 'On';\n\n /**\n * Text for off state\n */\n @Prop() textOff = 'Off';\n\n /**\n * Text for indeterminate state\n */\n @Prop() textIndeterminate = 'Mixed';\n\n /**\n * Hide `on` and `off` text\n */\n @Prop() hideText = false;\n\n /**\n * An event will be dispatched each time the slide-toggle changes its value.\n */\n @Event() checkedChange: EventEmitter<boolean>;\n\n @Element() hostElement!: HTMLIxToggleElement;\n\n @Listen('keydown', { target: 'window' })\n async onKeyDown(event: KeyboardEvent) {\n const targetElement = event.target as HTMLElement;\n\n if (!this.hostElement.contains(targetElement)) {\n return;\n }\n\n if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n this.emitChange(event);\n }\n }\n\n private emitChange(event: Event) {\n if (this.disabled || this.indeterminate) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n\n this.checked = !this.checked;\n this.checkedChange.emit(this.checked);\n }\n\n private getText() {\n if (this.indeterminate || this.checked === undefined) {\n return this.textIndeterminate;\n }\n\n return this.checked ? this.textOn : this.textOff;\n }\n\n render() {\n return (\n <Host\n class={{\n disabled: this.disabled,\n checked: this.checked,\n indeterminate: this.indeterminate || this.checked === undefined,\n }}\n >\n <label class=\"switch\" tabindex={this.disabled ? -1 : 0}>\n <input\n tabindex=\"-1\"\n type=\"checkbox\"\n checked={this.checked}\n disabled={this.disabled}\n indeterminate={this.indeterminate || this.checked === undefined}\n id={this.hostElement.id}\n onChange={(e) => this.emitChange(e)}\n />\n <span class=\"slider\">\n <span class=\"slider-track\"></span>\n </span>\n </label>\n {!this.hideText ? (\n <span\n title={this.getText()}\n class=\"text\"\n onClick={(e) => this.emitChange(e)}\n >\n {this.getText()}\n </span>\n ) : null}\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f4b8e6ee.js');
+const index = require('./index-478a4b66.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-01fe5abe.js');
 const tooltipCss = ":host{display:inline-block;position:fixed;left:0px;top:0px;z-index:var(--theme-z-index-tooltip);max-width:18.25rem;opacity:0;visibility:collapse !important;overflow-wrap:break-word;border-radius:0.25rem;background-color:var(--theme-tootlip--background);padding:0.375rem 0.75rem 0.375rem 0.875rem;box-shadow:var(--theme-shadow-4)}:host .tooltip-title{display:flex;align-items:center}:host .tooltip-title ::slotted(ix-icon){margin-right:0.35rem}:host(.visible){opacity:1;visibility:visible !important}:host(.visible) .arrow,:host(.visible) .arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host(.visible) .arrow{visibility:hidden}:host(.visible) .arrow::before{visibility:visible;content:\"\";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}";
@@ -129,3 +129,5 @@ const Tooltip = class {
 Tooltip.style = tooltipCss;
 exports.ix_tooltip = Tooltip;
+//# sourceMappingURL=ix-tooltip.cjs.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"ix-tooltip.entry.cjs.js","mappings":"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","names":["autoUpdate","computePosition","shift","offset","arrow","flip","h","Host"],"sources":["./src/components/tooltip/tooltip.scss?tag=ix-tooltip&encapsulation=shadow","./src/components/tooltip/tooltip.tsx"],"sourcesContent":[":host {\n display: inline-block;\n position: fixed;\n left: 0px;\n top: 0px;\n z-index: var(--theme-z-index-tooltip);\n\n max-width: 18.25rem;\n\n opacity: 0;\n visibility: collapse !important;\n overflow-wrap: break-word;\n\n border-radius: 0.25rem;\n background-color: var(--theme-tootlip--background);\n padding: 0.375rem 0.75rem 0.375rem 0.875rem;\n\n box-shadow: var(--theme-shadow-4);\n\n .tooltip-title {\n display: flex;\n align-items: center;\n\n ::slotted(ix-icon) {\n margin-right: 0.35rem;\n }\n }\n}\n\n:host(.visible) {\n opacity: 1;\n visibility: visible !important;\n}\n\n:host(.visible) {\n .arrow,\n .arrow::before {\n position: absolute;\n width: 8px;\n height: 8px;\n background: inherit;\n }\n\n .arrow {\n visibility: hidden;\n }\n\n .arrow::before {\n visibility: visible;\n content: '';\n transform: rotate(45deg);\n background-color: var(--theme-tootlip--background);\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n arrow,\n autoUpdate,\n computePosition,\n flip,\n offset,\n shift,\n} from '@floating-ui/dom';\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n/**\n * @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n *\n * @since 1.4.0\n */\n@Component({\n tag: 'ix-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip {\n /**\n * CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n */\n @Prop() for: string;\n\n /**\n * Title of the tooltip\n */\n @Prop() titleContent: string;\n\n /**\n * Define if the user can access the tooltip via mouse.\n */\n @Prop() interactive = false;\n\n @State() visible = false;\n\n @Element() hostElement: HTMLIxTooltipElement;\n\n private observer: MutationObserver;\n private hideTooltipTimeout: NodeJS.Timeout;\n private onMouseEnterBind = this.showTooltip.bind(this);\n private onMouseLeaveBind = this.hideTooltip.bind(this);\n private disposeAutoUpdate?: () => void;\n private tooltipCloseTimeInMS = 50;\n\n private get arrowElement() {\n return this.hostElement.shadowRoot.querySelector('.arrow') as HTMLElement;\n }\n\n private destroyAutoUpdate() {\n if (this.disposeAutoUpdate !== undefined) {\n this.disposeAutoUpdate();\n }\n }\n\n private showTooltip(e: any) {\n clearTimeout(this.hideTooltipTimeout);\n this.visible = true;\n this.computeTooltipPosition(e.target);\n }\n\n private hideTooltip() {\n this.hideTooltipTimeout = setTimeout(() => {\n this.visible = false;\n }, this.tooltipCloseTimeInMS);\n this.destroyAutoUpdate();\n }\n\n private async computeTooltipPosition(target: HTMLElement) {\n this.disposeAutoUpdate = autoUpdate(\n target,\n this.hostElement,\n async () => {\n requestAnimationFrame(async () => {\n const computeResponse = await computePosition(\n target,\n this.hostElement,\n {\n strategy: 'fixed',\n placement: 'top',\n middleware: [\n shift(),\n offset(8),\n arrow({\n element: this.arrowElement,\n }),\n flip({\n fallbackStrategy: 'initialPlacement',\n }),\n ],\n }\n );\n\n if (computeResponse.middlewareData.arrow) {\n let { x, y } = computeResponse.middlewareData.arrow;\n\n if (computeResponse.placement === 'bottom') {\n y = -4;\n }\n\n Object.assign(this.arrowElement.style, {\n left: x != null ? `${x}px` : '',\n top: y != null ? `${y}px` : '',\n });\n }\n\n const { x, y } = computeResponse;\n Object.assign(this.hostElement.style, {\n left: x !== null ? `${x}px` : '',\n top: y !== null ? `${y}px` : '',\n });\n });\n },\n {\n ancestorResize: true,\n ancestorScroll: true,\n elementResize: true,\n }\n );\n }\n\n private queryAnchorElements() {\n return Array.from(document.querySelectorAll(this.for));\n }\n\n private registerTriggerListener() {\n const elements = this.queryAnchorElements();\n elements.forEach((e) => {\n e.addEventListener('mouseenter', this.onMouseEnterBind);\n e.addEventListener('mouseleave', this.onMouseLeaveBind);\n });\n }\n\n private registerTooltipListener() {\n this.hostElement.addEventListener('mouseenter', () => {\n if (this.interactive) {\n clearTimeout(this.hideTooltipTimeout);\n }\n });\n this.hostElement.addEventListener('mouseleave', () => {\n this.hideTooltip();\n });\n }\n\n componentDidLoad() {\n if (this.interactive) {\n this.tooltipCloseTimeInMS = 150;\n }\n\n this.observer = new MutationObserver(() => {\n this.registerTriggerListener();\n });\n\n this.observer.observe(document.body, {\n attributes: true,\n attributeFilter: ['data-ix-tooltip'],\n childList: true,\n subtree: true,\n });\n\n this.registerTriggerListener();\n this.registerTooltipListener();\n }\n\n disconnectedCallback() {\n this.observer.disconnect();\n this.destroyAutoUpdate();\n }\n\n render() {\n const tooltipContentClass = {\n 'tooltip-content': true,\n };\n\n return (\n <Host\n class={{\n visible: this.visible,\n }}\n >\n <div class={'tooltip-title'}>\n <slot name=\"title-icon\"></slot>\n <ix-typography variant=\"default-title\">\n {this.titleContent}\n <slot name=\"title-content\"></slot>\n </ix-typography>\n </div>\n <div class={tooltipContentClass}>\n <slot></slot>\n </div>\n <div class=\"arrow\"></div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ix-tree_2.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f4b8e6ee.js');
+const index = require('./index-478a4b66.js');
 const _commonjsHelpers = require('./_commonjsHelpers-1a0c346f.js');
 const defaultTreeItem = require('./default-tree-item-89cd1f3f.js');
@@ -514,6 +514,8 @@ const Tree = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.contextChange = index.createEvent(this, "contextChange", 7);
+    this.nodeToggled = index.createEvent(this, "nodeToggled", 7);
+    this.nodeClicked = index.createEvent(this, "nodeClicked", 7);
     this.nodeRemoved = index.createEvent(this, "nodeRemoved", 7);
     this.toggleListener = new Map();
     this.itemClickListener = new Map();
@@ -533,6 +535,7 @@ const Tree = class {
           e.stopPropagation();
           const context = this.getContext(list[index].id);
           context.isExpanded = !context.isExpanded;
+          this.nodeToggled.emit({ id: item.id, isExpaned: context.isExpanded });
           this.setContext(item.id, context);
         };
         el.addEventListener('toggle', toggleCallback);
@@ -578,6 +581,7 @@ const Tree = class {
             const context = this.getContext(item.id);
             context.isSelected = true;
             this.setContext(item.id, context);
+            this.nodeClicked.emit(item.id);
           };
           el.addEventListener('itemClick', itemClickCallback);
           this.itemClickListener.set(el, itemClickCallback);
@@ -715,3 +719,5 @@ TreeItem.style = treeItemCss;
 exports.ix_tree = Tree;
 exports.ix_tree_item = TreeItem;
+//# sourceMappingURL=ix-tree_2.cjs.entry.js.map