@infineon/infineon-design-system-stencil 20.17.3 → 20.17.4
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.
- package/dist/cjs/ifx-spinner.cjs.entry.js +1 -1
- package/dist/cjs/ifx-spinner.cjs.entry.js.map +1 -1
- package/dist/collection/components/radio-button/radio-button.stories.js +1 -0
- package/dist/collection/components/radio-button/radio-button.stories.js.map +1 -1
- package/dist/collection/components/spinner/spinner.js +1 -1
- package/dist/collection/components/spinner/spinner.js.map +1 -1
- package/dist/collection/components/spinner/spinner.stories.js +3 -2
- package/dist/collection/components/spinner/spinner.stories.js.map +1 -1
- package/dist/components/ifx-spinner.js +1 -1
- package/dist/components/ifx-spinner.js.map +1 -1
- package/dist/esm/ifx-spinner.entry.js +1 -1
- package/dist/esm/ifx-spinner.entry.js.map +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/p-51898d6e.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-51898d6e.entry.js.map +1 -0
- package/dist/types/components/radio-button/radio-button.stories.d.ts +1 -0
- package/dist/types/components/spinner/spinner.stories.d.ts +1 -0
- package/package.json +1 -1
- package/dist/infineon-design-system-stencil/p-3eb1e629.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-3eb1e629.entry.js.map +0 -1
|
@@ -15,7 +15,7 @@ const Spinner = class {
|
|
|
15
15
|
this.variant = undefined;
|
|
16
16
|
}
|
|
17
17
|
render() {
|
|
18
|
-
return (index.h("div", { class: this.getClassNames() }, index.h("div", { class: `${this.variant !== '
|
|
18
|
+
return (index.h("div", { class: this.getClassNames() }, index.h("div", { class: `${this.variant !== 'brand' ? 'border' : ""}` }), this.variant === 'brand'
|
|
19
19
|
&& index.h("div", { class: `semiconductor ${this.getSizeClass()}` }, index.h("svg", { width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("g", { id: "spinner/conductor" }, index.h("path", { id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z", fill: "#0A8276" }))))));
|
|
20
20
|
}
|
|
21
21
|
getSizeClass() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-spinner.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,UAAU,GAAG,2kBAA2kB;;MCQjlB,OAAO;;;;;;EAIlB,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IAC9BA,iBAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,
|
|
1
|
+
{"file":"ifx-spinner.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,UAAU,GAAG,2kBAA2kB;;MCQjlB,OAAO;;;;;;EAIlB,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IAC9BA,iBAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,QAAQ,GAAG,EAAE,EAAE,GAAQ,EAChE,IAAI,CAAC,OAAO,KAAK,OAAO;SACpBA,iBAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,YAAY,EAAE,EAAE,IACnDA,iBAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5FA,eAAG,EAAE,EAAC,mBAAmB,IACvBA,kBAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAC,svCAAsvC,EAAC,IAAI,EAAC,SAAS,GAAG,CAC1xC,CACA,CACF,CACJ,EACN;GACH;EAED,YAAY;IACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;QACzB,GAAG;QACH,EAAE,CAAC;GACR;EAED,aAAa;IACX,OAAOC,kBAAU,CACf,SAAS,EACT,IAAI,CAAC,IAAI,IAAI,WAAW,IAAI,CAAC,YAAY,EAAE,EAAE,CAC9C,CAAC;GACH;;;;;;","names":["h","classNames"],"sources":["./src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n\n}\n\n.spinner {\n position: relative;\n width: tokens.$ifxSize500;\n height: tokens.$ifxSize500;\n}\n\n.spinner.s {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n}\n\n.border {\n box-sizing: border-box;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 4px solid transparent;\n border-top-color: #0A8276;\n border-left-color: #0A8276;\n border-right-color: #0A8276;\n border-top-left-radius: 1px;\n border-top-right-radius: 1px;\n border-radius: 50%;\n animation: spin 2s linear infinite;\n}\n\n.semiconductor {\n width: 100%;\n height: 100%;\n animation: spin 2s linear infinite;\n\n &.s {\n & svg {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n }\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}","import { Component, h, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Prop() size: string;\n @Prop() variant: string;\n\n render() {\n return (\n <div class={this.getClassNames()}>\n <div class={`${this.variant !== 'brand' ? 'border' : \"\"}`}></div>\n {this.variant === 'brand'\n && <div class={`semiconductor ${this.getSizeClass()}`}>\n <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"spinner/conductor\">\n <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" fill=\"#0A8276\" />\n </g>\n </svg>\n </div>}\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"s\"\n : \"\";\n }\n\n getClassNames() {\n return classNames(\n 'spinner',\n this.size && `spinner ${this.getSizeClass()}`,\n );\n }\n}\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,sBAAsB;EAEtB,IAAI,EAAE;IACJ,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,KAAK;IACZ,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,MAAM;GACd;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,WAAW,EAAE,cAAc;MAC3B,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,OAAO,EAAE,uBAAuB;UAChC,MAAM,EAAE,iLAAiL;SAC1L;OACF;MAED,MAAM,EAAE,WAAW;KACpB;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;MACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;GACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE;EAC/B,kCAAkC;EAClC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;EAE3D,qBAAqB;EACrB,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;EAC1C,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;EAChD,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;EAC1C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;EAExC,+BAA+B;EAC/B,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;EAEzD,yBAAyB;EACzB,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;EAE3D,qBAAqB;EACrB,OAAO,OAAO,CAAC;AACjB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: \"Components/Radio Button\",\n // tags: ['autodocs'],\n\n args: {\n error: false,\n disabled: false,\n value: false,\n size: 's',\n label: 'Text'\n },\n argTypes: {\n onIfxChange: {\n description: 'Custom event',\n table: {\n type: {\n summary: 'Framework integration',\n detail: 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n },\n },\n\n action: 'ifxChange'\n },\n size: {\n options: ['s', 'm'],\n control: { type: 'radio' },\n },\n },\n};\n\nconst DefaultTemplate = (args) => {\n // Create the radio button element\n const element = document.createElement('ifx-radio-button');\n\n // Set the attributes\n element.setAttribute('error', args.error);\n element.setAttribute('disabled', args.disabled);\n element.setAttribute('value', args.value);\n element.setAttribute('size', args.size);\n\n // Add the label as a text node\n element.appendChild(document.createTextNode(args.label));\n\n // Add the event listener\n element.addEventListener('ifxChange', action('ifxChange'));\n\n // Return the element\n return element;\n}\n\nexport const Default = DefaultTemplate.bind({});\n"]}
|
|
1
|
+
{"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,sBAAsB;EAEtB,IAAI,EAAE;IACJ,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,KAAK;IACZ,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,MAAM;GACd;EACD,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,WAAW,EAAE,cAAc;MAC3B,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,OAAO,EAAE,uBAAuB;UAChC,MAAM,EAAE,iLAAiL;SAC1L;OACF;MAED,MAAM,EAAE,WAAW;KACpB;IACD,IAAI,EAAE;MACJ,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;MACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;GACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE;EAC/B,kCAAkC;EAClC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;EAE3D,qBAAqB;EACrB,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;EAC1C,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;EAChD,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;EAC1C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;EAExC,+BAA+B;EAC/B,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;EAEzD,yBAAyB;EACzB,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;EAE3D,qBAAqB;EACrB,OAAO,OAAO,CAAC;AACjB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: \"Components/Radio Button\",\n // tags: ['autodocs'],\n\n args: {\n error: false,\n disabled: false,\n value: false,\n size: 's',\n label: 'Text'\n },\n argTypes: {\n onIfxChange: {\n description: 'Custom event',\n table: {\n type: {\n summary: 'Framework integration',\n detail: 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n },\n },\n\n action: 'ifxChange'\n },\n size: {\n description: \"Size options: s (20px) and m (24px) - default: s\",\n options: ['s', 'm'],\n control: { type: 'radio' },\n },\n },\n};\n\nconst DefaultTemplate = (args) => {\n // Create the radio button element\n const element = document.createElement('ifx-radio-button');\n\n // Set the attributes\n element.setAttribute('error', args.error);\n element.setAttribute('disabled', args.disabled);\n element.setAttribute('value', args.value);\n element.setAttribute('size', args.size);\n\n // Add the label as a text node\n element.appendChild(document.createTextNode(args.label));\n\n // Add the event listener\n element.addEventListener('ifxChange', action('ifxChange'));\n\n // Return the element\n return element;\n}\n\nexport const Default = DefaultTemplate.bind({});\n"]}
|
|
@@ -6,7 +6,7 @@ export class Spinner {
|
|
|
6
6
|
this.variant = undefined;
|
|
7
7
|
}
|
|
8
8
|
render() {
|
|
9
|
-
return (h("div", { class: this.getClassNames() }, h("div", { class: `${this.variant !== '
|
|
9
|
+
return (h("div", { class: this.getClassNames() }, h("div", { class: `${this.variant !== 'brand' ? 'border' : ""}` }), this.variant === 'brand'
|
|
10
10
|
&& h("div", { class: `semiconductor ${this.getSizeClass()}` }, h("svg", { width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "spinner/conductor" }, h("path", { id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z", fill: "#0A8276" }))))));
|
|
11
11
|
}
|
|
12
12
|
getSizeClass() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,OAAO;;;;;EAIlB,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;MAC9B,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,OAAO;;;;;EAIlB,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;MAC9B,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,GAAQ;MAChE,IAAI,CAAC,OAAO,KAAK,OAAO;WACpB,WAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,YAAY,EAAE,EAAE;UACnD,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;YAC5F,SAAG,EAAE,EAAC,mBAAmB;cACvB,YAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAC,svCAAsvC,EAAC,IAAI,EAAC,SAAS,GAAG,CAC1xC,CACA,CACF,CACJ,CACP,CAAC;EACJ,CAAC;EAED,YAAY;IACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;MAC3B,CAAC,CAAC,GAAG;MACL,CAAC,CAAC,EAAE,CAAC;EACT,CAAC;EAED,aAAa;IACX,OAAO,UAAU,CACf,SAAS,EACT,IAAI,CAAC,IAAI,IAAI,WAAW,IAAI,CAAC,YAAY,EAAE,EAAE,CAC9C,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Prop() size: string;\n @Prop() variant: string;\n\n render() {\n return (\n <div class={this.getClassNames()}>\n <div class={`${this.variant !== 'brand' ? 'border' : \"\"}`}></div>\n {this.variant === 'brand'\n && <div class={`semiconductor ${this.getSizeClass()}`}>\n <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"spinner/conductor\">\n <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" fill=\"#0A8276\" />\n </g>\n </svg>\n </div>}\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"s\"\n : \"\";\n }\n\n getClassNames() {\n return classNames(\n 'spinner',\n this.size && `spinner ${this.getSizeClass()}`,\n );\n }\n}\n"]}
|
|
@@ -3,15 +3,16 @@ export default {
|
|
|
3
3
|
tags: ['autodocs'],
|
|
4
4
|
args: {
|
|
5
5
|
size: "m",
|
|
6
|
-
variant: '
|
|
6
|
+
variant: 'default'
|
|
7
7
|
},
|
|
8
8
|
argTypes: {
|
|
9
9
|
size: {
|
|
10
|
+
description: "Size options: s (24px) and m (40px) - default: m",
|
|
10
11
|
options: ['s', 'm'],
|
|
11
12
|
control: { type: 'radio' },
|
|
12
13
|
},
|
|
13
14
|
variant: {
|
|
14
|
-
options: ['
|
|
15
|
+
options: ['default', 'brand'],
|
|
15
16
|
control: { type: 'radio' }
|
|
16
17
|
}
|
|
17
18
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,oBAAoB;EAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,IAAI,EAAE;IACJ,IAAI,EAAE,GAAG;IACT,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,oBAAoB;EAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,IAAI,EAAE;IACJ,IAAI,EAAE,GAAG;IACT,OAAO,EAAE,SAAS;GACnB;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;MACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,OAAO,EAAE;MACP,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;MAC7B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;GACF;CACF,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE,CAC/B,yBAAyB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,kBAAkB,CAAC;AAE9E,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,SAAS,GAAG,EAEnB,CAAA","sourcesContent":["export default {\n title: 'Components/Spinner',\n tags: ['autodocs'],\n\n args: {\n size: \"m\",\n variant: 'default'\n },\n argTypes: {\n size: {\n description: \"Size options: s (24px) and m (40px) - default: m\",\n options: ['s', 'm'],\n control: { type: 'radio' },\n },\n variant: {\n options: ['default', 'brand'],\n control: { type: 'radio' }\n }\n },\n}\n\nconst DefaultTemplate = (args) =>\n `<ifx-spinner variant=\"${args.variant}\" size=\"${args.size}\"></ifx-spinner>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argsTypes = {\n\n}\n"]}
|
|
@@ -12,7 +12,7 @@ const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends HTMLEleme
|
|
|
12
12
|
this.variant = undefined;
|
|
13
13
|
}
|
|
14
14
|
render() {
|
|
15
|
-
return (h("div", { class: this.getClassNames() }, h("div", { class: `${this.variant !== '
|
|
15
|
+
return (h("div", { class: this.getClassNames() }, h("div", { class: `${this.variant !== 'brand' ? 'border' : ""}` }), this.variant === 'brand'
|
|
16
16
|
&& h("div", { class: `semiconductor ${this.getSizeClass()}` }, h("svg", { width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "spinner/conductor" }, h("path", { id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z", fill: "#0A8276" }))))));
|
|
17
17
|
}
|
|
18
18
|
getSizeClass() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-spinner.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,2kBAA2kB;;MCQjlB,OAAO;;;;;;;;EAIlB,MAAM;IACJ,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IAC9B,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,
|
|
1
|
+
{"file":"ifx-spinner.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,2kBAA2kB;;MCQjlB,OAAO;;;;;;;;EAIlB,MAAM;IACJ,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IAC9B,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,QAAQ,GAAG,EAAE,EAAE,GAAQ,EAChE,IAAI,CAAC,OAAO,KAAK,OAAO;SACpB,WAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,YAAY,EAAE,EAAE,IACnD,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,SAAG,EAAE,EAAC,mBAAmB,IACvB,YAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAC,svCAAsvC,EAAC,IAAI,EAAC,SAAS,GAAG,CAC1xC,CACA,CACF,CACJ,EACN;GACH;EAED,YAAY;IACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;QACzB,GAAG;QACH,EAAE,CAAC;GACR;EAED,aAAa;IACX,OAAOA,UAAU,CACf,SAAS,EACT,IAAI,CAAC,IAAI,IAAI,WAAW,IAAI,CAAC,YAAY,EAAE,EAAE,CAC9C,CAAC;GACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["classNames"],"sources":["./src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n\n}\n\n.spinner {\n position: relative;\n width: tokens.$ifxSize500;\n height: tokens.$ifxSize500;\n}\n\n.spinner.s {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n}\n\n.border {\n box-sizing: border-box;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 4px solid transparent;\n border-top-color: #0A8276;\n border-left-color: #0A8276;\n border-right-color: #0A8276;\n border-top-left-radius: 1px;\n border-top-right-radius: 1px;\n border-radius: 50%;\n animation: spin 2s linear infinite;\n}\n\n.semiconductor {\n width: 100%;\n height: 100%;\n animation: spin 2s linear infinite;\n\n &.s {\n & svg {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n }\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}","import { Component, h, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Prop() size: string;\n @Prop() variant: string;\n\n render() {\n return (\n <div class={this.getClassNames()}>\n <div class={`${this.variant !== 'brand' ? 'border' : \"\"}`}></div>\n {this.variant === 'brand'\n && <div class={`semiconductor ${this.getSizeClass()}`}>\n <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"spinner/conductor\">\n <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" fill=\"#0A8276\" />\n </g>\n </svg>\n </div>}\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"s\"\n : \"\";\n }\n\n getClassNames() {\n return classNames(\n 'spinner',\n this.size && `spinner ${this.getSizeClass()}`,\n );\n }\n}\n"],"version":3}
|
|
@@ -11,7 +11,7 @@ const Spinner = class {
|
|
|
11
11
|
this.variant = undefined;
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
|
-
return (h("div", { class: this.getClassNames() }, h("div", { class: `${this.variant !== '
|
|
14
|
+
return (h("div", { class: this.getClassNames() }, h("div", { class: `${this.variant !== 'brand' ? 'border' : ""}` }), this.variant === 'brand'
|
|
15
15
|
&& h("div", { class: `semiconductor ${this.getSizeClass()}` }, h("svg", { width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { id: "spinner/conductor" }, h("path", { id: "Vector", d: "M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z", fill: "#0A8276" }))))));
|
|
16
16
|
}
|
|
17
17
|
getSizeClass() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-spinner.entry.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,2kBAA2kB;;MCQjlB,OAAO;;;;;;EAIlB,MAAM;IACJ,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IAC9B,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,
|
|
1
|
+
{"file":"ifx-spinner.entry.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,2kBAA2kB;;MCQjlB,OAAO;;;;;;EAIlB,MAAM;IACJ,QACE,WAAK,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IAC9B,WAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,QAAQ,GAAG,EAAE,EAAE,GAAQ,EAChE,IAAI,CAAC,OAAO,KAAK,OAAO;SACpB,WAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,YAAY,EAAE,EAAE,IACnD,WAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,IAC5F,SAAG,EAAE,EAAC,mBAAmB,IACvB,YAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAC,svCAAsvC,EAAC,IAAI,EAAC,SAAS,GAAG,CAC1xC,CACA,CACF,CACJ,EACN;GACH;EAED,YAAY;IACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;QACzB,GAAG;QACH,EAAE,CAAC;GACR;EAED,aAAa;IACX,OAAOA,UAAU,CACf,SAAS,EACT,IAAI,CAAC,IAAI,IAAI,WAAW,IAAI,CAAC,YAAY,EAAE,EAAE,CAC9C,CAAC;GACH;;;;;;","names":["classNames"],"sources":["./src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n\n}\n\n.spinner {\n position: relative;\n width: tokens.$ifxSize500;\n height: tokens.$ifxSize500;\n}\n\n.spinner.s {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n}\n\n.border {\n box-sizing: border-box;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 4px solid transparent;\n border-top-color: #0A8276;\n border-left-color: #0A8276;\n border-right-color: #0A8276;\n border-top-left-radius: 1px;\n border-top-right-radius: 1px;\n border-radius: 50%;\n animation: spin 2s linear infinite;\n}\n\n.semiconductor {\n width: 100%;\n height: 100%;\n animation: spin 2s linear infinite;\n\n &.s {\n & svg {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n }\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}","import { Component, h, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Prop() size: string;\n @Prop() variant: string;\n\n render() {\n return (\n <div class={this.getClassNames()}>\n <div class={`${this.variant !== 'brand' ? 'border' : \"\"}`}></div>\n {this.variant === 'brand'\n && <div class={`semiconductor ${this.getSizeClass()}`}>\n <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"spinner/conductor\">\n <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" fill=\"#0A8276\" />\n </g>\n </svg>\n </div>}\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"s\"\n : \"\";\n }\n\n getClassNames() {\n return classNames(\n 'spinner',\n this.size && `spinner ${this.getSizeClass()}`,\n );\n }\n}\n"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as i,b as t}from"./p-acd1bd1f.js";export{s as setNonce}from"./p-acd1bd1f.js";const o=()=>{{a(i.prototype)}const t=import.meta.url;const o={};if(t!==""){o.resourcesUrl=new URL(".",t).href}return e(o)};const a=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const t=i.call(this,false);const o=this.childNodes;if(e){for(let e=0;e<o.length;e++){if(o[e].nodeType!==2){t.appendChild(o[e].cloneNode(true))}}}return t}};o().then((e=>t([["p-aa77bd38",[[1,"ifx-faq"]]],["p-aa383c3a",[[1,"ifx-dropdown-trigger-button",{isOpen:[4,"is-open"],variant:[1],color:[1],size:[1],disabled:[4],hideArrow:[4,"hide-arrow"]}]]],["p-5afeb88b",[[1,"ifx-modal",{caption:[1],closeOnOverlayClick:[4,"close-on-overlay-click"],alertColor:[1,"alert-color"],alertIcon:[1,"alert-icon"],showModal:[32],open:[64],close:[64]}]]],["p-50f4cec6",[[1,"ifx-multiselect",{options:[1],size:[1],disabled:[4],error:[4],errorMessage:[1,"error-message"],label:[1],maxItemCount:[2,"max-item-count"],persistentSelectedOptions:[32],listOfOptions:[32],dropdownOpen:[32],dropdownFlipped:[32],zIndex:[32]}]]],["p-e1bb2777",[[1,"ifx-search-bar",{showCloseButton:[4,"show-close-button"],isOpen:[4,"is-open"],disabled:[4],value:[1025],internalState:[32]}]]],["p-5dce7228",[[1,"ifx-alert",{color:[1],icon:[1]}]]],["p-e33ff153",[[1,"ifx-breadcrumb-item-label",{icon:[1],url:[1],target:[1]}]]],["p-07a2f2ed",[[1,"ifx-chip",{placeholder:[1],isEmpty:[32]},[[5,"mousedown","handleOutsideClick"]]]]],["p-420f4319",[[1,"ifx-dropdown-item",{icon:[1],href:[1],target:[1],hide:[4],size:[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-c65fa225",[[1,"ifx-example",{variant:[1],color:[1],size:[1],disabled:[4],icon:[1],position:[1],href:[1],target:[1],type:[1],internalPosition:[32],setFocus:[64]}]]],["p-758bd4e9",[[1,"ifx-icon-button",{variant:[1],size:[1],disabled:[4],icon:[1],href:[1],target:[1],shape:[1],setFocus:[64]}]]],["p-43963509",[[1,"ifx-icons-preview",{iconsArray:[32],isCopied:[32],copiedIndex:[32],htmlTag:[32],iconName:[32]}]]],["p-939327e2",[[1,"ifx-list-item",{isFlush:[1028,"is-flush"],badge:[4],badgeValue:[2,"badge-value"],hasBulletpoint:[32]}]]],["p-38f32fc0",[[1,"ifx-navbar",{applicationName:[1,"application-name"],fixed:[4],showLogo:[4,"show-logo"],main:[32],products:[32],applications:[32],design:[32],support:[32],about:[32],hasLeftMenuItems:[32]},[[5,"mousedown","handleOutsideClick"]]]]],["p-80b1506f",[[1,"ifx-navbar-item",{isProfile:[1028,"is-profile"],hideLabel:[4,"hide-label"],icon:[1],href:[1],target:[1]}]]],["p-51f25847",[[0,"ifx-select",{type:[1],value:[1],name:[1],items:[16],choices:[1],renderChoiceLimit:[2,"render-choice-limit"],maxItemCount:[2,"max-item-count"],addItems:[4,"add-items"],removeItems:[4,"remove-items"],removeItemButton:[4,"remove-item-button"],editItems:[4,"edit-items"],duplicateItemsAllowed:[4,"duplicate-items-allowed"],delimiter:[1],paste:[4],searchEnabled:[4,"search-enabled"],searchChoices:[4,"search-choices"],searchFields:[1,"search-fields"],searchFloor:[2,"search-floor"],searchResultLimit:[2,"search-result-limit"],position:[1],resetScrollPosition:[4,"reset-scroll-position"],shouldSort:[4,"should-sort"],shouldSortItems:[4,"should-sort-items"],sorter:[16],placeholder:[8],placeholderValue:[1,"placeholder-value"],searchPlaceholderValue:[1,"search-placeholder-value"],prependValue:[1,"prepend-value"],appendValue:[1,"append-value"],renderSelectedChoices:[1,"render-selected-choices"],loadingText:[1,"loading-text"],noResultsText:[1,"no-results-text"],noChoicesText:[1,"no-choices-text"],itemSelectText:[1,"item-select-text"],addItemText:[1,"add-item-text"],maxItemText:[1,"max-item-text"],uniqueItemText:[1,"unique-item-text"],classNames:[16],fuseOptions:[16],addItemFilter:[1,"add-item-filter"],customAddItemText:[1,"custom-add-item-text"],callbackOnInit:[16],callbackOnCreateTemplates:[16],valueComparer:[16],ifxError:[4,"ifx-error"],ifxErrorMessage:[1,"ifx-error-message"],ifxLabel:[1,"ifx-label"],ifxDisabled:[4,"ifx-disabled"],ifxPlaceholderValue:[1,"ifx-placeholder-value"],ifxOptions:[1,"ifx-options"],ifxSize:[1,"ifx-size"],ifxSelectedOption:[32],handleChange:[64],highlightItem:[64],unhighlightItem:[64],highlightAll:[64],unhighlightAll:[64],removeActiveItemsByValue:[64],removeActiveItems:[64],removeHighlightedItems:[64],showDropdown:[64],hideDropdown:[64],getValue:[64],setValue:[64],setChoiceByValue:[64],setChoices:[64],clearChoices:[64],clearStore:[64],clearInput:[64],enable:[64],disable:[64],ajax:[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-391beed0",[[1,"ifx-sidebar-item",{icon:[1],href:[1],target:[1],hasIcon:[32],hasIconWrapper:[32]},[[0,"consoleError","handleConsoleError"]]]]],["p-7907e3bb",[[1,"ifx-slider",{min:[2],max:[2],value:[2],disabled:[4],showPercentage:[4,"show-percentage"],leftIcon:[1,"left-icon"],rightIcon:[1,"right-icon"],leftText:[1,"left-text"],rightText:[1,"right-text"],internalValue:[32]}]]],["p-84745b56",[[1,"ifx-text-field",{placeholder:[1],value:[1025],error:[4],errorMessage:[1,"error-message"],success:[4],disabled:[4],readonly:[4],icon:[4]}]]],["p-042ecebc",[[1,"ifx-tooltip",{header:[1],text:[1],position:[1],variant:[1],icon:[1],tooltipVisible:[32],internalPosition:[32]}]]],["p-b109703a",[[1,"ifx-badge"]]],["p-99593c55",[[0,"ifx-basic-table",{cols:[1],rows:[1],columnDefs:[16],rowData:[16],rowHeight:[1,"row-height"],uniqueKey:[1,"unique-key"],tableHeight:[1,"table-height"],gridOptions:[32]}]]],["p-f86a64e3",[[1,"ifx-breadcrumb"]]],["p-aa474b7f",[[1,"ifx-breadcrumb-item",{isLastItem:[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-6ccb878f",[[1,"ifx-card",{direction:[1],href:[1],target:[1],noBtns:[32],alignment:[32],noImg:[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-fce37e59",[[1,"ifx-card-headline",{isHovered:[4,"is-hovered"],direction:[32],hasDesc:[32]}]]],["p-9f7b7de1",[[1,"ifx-card-image",{src:[1],alt:[1],position:[1]}]]],["p-c706365e",[[1,"ifx-card-links"]]],["p-3ae02e9a",[[1,"ifx-card-overline"]]],["p-41c935d6",[[1,"ifx-card-text",{hasBtn:[32]}]]],["p-f6041d8a",[[1,"ifx-dropdown",{placement:[1],defaultOpen:[4,"default-open"],noAppendToBody:[4,"no-append-to-body"],disabled:[4],noCloseOnOutsideClick:[4,"no-close-on-outside-click"],noCloseOnMenuClick:[4,"no-close-on-menu-click"],internalIsOpen:[32],trigger:[32],menu:[32],isOpen:[64],closeDropdown:[64],openDropdown:[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]]]]],["p-e4ca2035",[[1,"ifx-dropdown-header"]]],["p-2d7286b3",[[1,"ifx-dropdown-menu",{isOpen:[4,"is-open"],size:[1],hideTopPadding:[32],filteredItems:[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-f7d0f880",[[1,"ifx-dropdown-separator"]]],["p-3b6a6777",[[1,"ifx-dropdown-trigger",{isOpen:[4,"is-open"]}]]],["p-2901f8d0",[[1,"ifx-filter-input",{label:[1],size:[1],disabled:[4],icon:[4],search:[4],filter:[4],options:[32]}]]],["p-87f2c40e",[[1,"ifx-footer",{variant:[1],large:[32],default:[32],showFacebook:[32]}]]],["p-b304e24a",[[1,"ifx-footer-column"]]],["p-d618fd1c",[[1,"ifx-link",{href:[1],target:[1],color:[1],bold:[4],underline:[4]}]]],["p-3b29e194",[[1,"ifx-list-group",{flush:[4],bulletpoint:[4],notification:[4]}]]],["p-79a6f218",[[1,"ifx-list-notification",{titleText:[1,"title-text"],isFlush:[4,"is-flush"],creationTime:[8,"creation-time"],postTime:[32],shownTime:[32]}]]],["p-98aa70c1",[[1,"ifx-navbar-menu",{menu:[32]}]]],["p-c4218d32",[[1,"ifx-navbar-menu-item",{href:[1],target:[1],hide:[4]}]]],["p-abfb7592",[[1,"ifx-progress-bar",{value:[2],label:[1],size:[1],showLabel:[4,"show-label"],internalValue:[32]}]]],["p-45fcee45",[[1,"ifx-radio-button",{disabled:[4],value:[4],error:[4],size:[1],internalValue:[32],hasSlot:[32]}]]],["p-3c71c930",[[1,"ifx-sidebar",{applicationName:[1,"application-name"]}]]],["p-
|
|
1
|
+
import{p as e,H as i,b as t}from"./p-acd1bd1f.js";export{s as setNonce}from"./p-acd1bd1f.js";const o=()=>{{a(i.prototype)}const t=import.meta.url;const o={};if(t!==""){o.resourcesUrl=new URL(".",t).href}return e(o)};const a=e=>{const i=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return i.call(this,e)}const t=i.call(this,false);const o=this.childNodes;if(e){for(let e=0;e<o.length;e++){if(o[e].nodeType!==2){t.appendChild(o[e].cloneNode(true))}}}return t}};o().then((e=>t([["p-aa77bd38",[[1,"ifx-faq"]]],["p-aa383c3a",[[1,"ifx-dropdown-trigger-button",{isOpen:[4,"is-open"],variant:[1],color:[1],size:[1],disabled:[4],hideArrow:[4,"hide-arrow"]}]]],["p-5afeb88b",[[1,"ifx-modal",{caption:[1],closeOnOverlayClick:[4,"close-on-overlay-click"],alertColor:[1,"alert-color"],alertIcon:[1,"alert-icon"],showModal:[32],open:[64],close:[64]}]]],["p-50f4cec6",[[1,"ifx-multiselect",{options:[1],size:[1],disabled:[4],error:[4],errorMessage:[1,"error-message"],label:[1],maxItemCount:[2,"max-item-count"],persistentSelectedOptions:[32],listOfOptions:[32],dropdownOpen:[32],dropdownFlipped:[32],zIndex:[32]}]]],["p-e1bb2777",[[1,"ifx-search-bar",{showCloseButton:[4,"show-close-button"],isOpen:[4,"is-open"],disabled:[4],value:[1025],internalState:[32]}]]],["p-5dce7228",[[1,"ifx-alert",{color:[1],icon:[1]}]]],["p-e33ff153",[[1,"ifx-breadcrumb-item-label",{icon:[1],url:[1],target:[1]}]]],["p-07a2f2ed",[[1,"ifx-chip",{placeholder:[1],isEmpty:[32]},[[5,"mousedown","handleOutsideClick"]]]]],["p-420f4319",[[1,"ifx-dropdown-item",{icon:[1],href:[1],target:[1],hide:[4],size:[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-c65fa225",[[1,"ifx-example",{variant:[1],color:[1],size:[1],disabled:[4],icon:[1],position:[1],href:[1],target:[1],type:[1],internalPosition:[32],setFocus:[64]}]]],["p-758bd4e9",[[1,"ifx-icon-button",{variant:[1],size:[1],disabled:[4],icon:[1],href:[1],target:[1],shape:[1],setFocus:[64]}]]],["p-43963509",[[1,"ifx-icons-preview",{iconsArray:[32],isCopied:[32],copiedIndex:[32],htmlTag:[32],iconName:[32]}]]],["p-939327e2",[[1,"ifx-list-item",{isFlush:[1028,"is-flush"],badge:[4],badgeValue:[2,"badge-value"],hasBulletpoint:[32]}]]],["p-38f32fc0",[[1,"ifx-navbar",{applicationName:[1,"application-name"],fixed:[4],showLogo:[4,"show-logo"],main:[32],products:[32],applications:[32],design:[32],support:[32],about:[32],hasLeftMenuItems:[32]},[[5,"mousedown","handleOutsideClick"]]]]],["p-80b1506f",[[1,"ifx-navbar-item",{isProfile:[1028,"is-profile"],hideLabel:[4,"hide-label"],icon:[1],href:[1],target:[1]}]]],["p-51f25847",[[0,"ifx-select",{type:[1],value:[1],name:[1],items:[16],choices:[1],renderChoiceLimit:[2,"render-choice-limit"],maxItemCount:[2,"max-item-count"],addItems:[4,"add-items"],removeItems:[4,"remove-items"],removeItemButton:[4,"remove-item-button"],editItems:[4,"edit-items"],duplicateItemsAllowed:[4,"duplicate-items-allowed"],delimiter:[1],paste:[4],searchEnabled:[4,"search-enabled"],searchChoices:[4,"search-choices"],searchFields:[1,"search-fields"],searchFloor:[2,"search-floor"],searchResultLimit:[2,"search-result-limit"],position:[1],resetScrollPosition:[4,"reset-scroll-position"],shouldSort:[4,"should-sort"],shouldSortItems:[4,"should-sort-items"],sorter:[16],placeholder:[8],placeholderValue:[1,"placeholder-value"],searchPlaceholderValue:[1,"search-placeholder-value"],prependValue:[1,"prepend-value"],appendValue:[1,"append-value"],renderSelectedChoices:[1,"render-selected-choices"],loadingText:[1,"loading-text"],noResultsText:[1,"no-results-text"],noChoicesText:[1,"no-choices-text"],itemSelectText:[1,"item-select-text"],addItemText:[1,"add-item-text"],maxItemText:[1,"max-item-text"],uniqueItemText:[1,"unique-item-text"],classNames:[16],fuseOptions:[16],addItemFilter:[1,"add-item-filter"],customAddItemText:[1,"custom-add-item-text"],callbackOnInit:[16],callbackOnCreateTemplates:[16],valueComparer:[16],ifxError:[4,"ifx-error"],ifxErrorMessage:[1,"ifx-error-message"],ifxLabel:[1,"ifx-label"],ifxDisabled:[4,"ifx-disabled"],ifxPlaceholderValue:[1,"ifx-placeholder-value"],ifxOptions:[1,"ifx-options"],ifxSize:[1,"ifx-size"],ifxSelectedOption:[32],handleChange:[64],highlightItem:[64],unhighlightItem:[64],highlightAll:[64],unhighlightAll:[64],removeActiveItemsByValue:[64],removeActiveItems:[64],removeHighlightedItems:[64],showDropdown:[64],hideDropdown:[64],getValue:[64],setValue:[64],setChoiceByValue:[64],setChoices:[64],clearChoices:[64],clearStore:[64],clearInput:[64],enable:[64],disable:[64],ajax:[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-391beed0",[[1,"ifx-sidebar-item",{icon:[1],href:[1],target:[1],hasIcon:[32],hasIconWrapper:[32]},[[0,"consoleError","handleConsoleError"]]]]],["p-7907e3bb",[[1,"ifx-slider",{min:[2],max:[2],value:[2],disabled:[4],showPercentage:[4,"show-percentage"],leftIcon:[1,"left-icon"],rightIcon:[1,"right-icon"],leftText:[1,"left-text"],rightText:[1,"right-text"],internalValue:[32]}]]],["p-84745b56",[[1,"ifx-text-field",{placeholder:[1],value:[1025],error:[4],errorMessage:[1,"error-message"],success:[4],disabled:[4],readonly:[4],icon:[4]}]]],["p-042ecebc",[[1,"ifx-tooltip",{header:[1],text:[1],position:[1],variant:[1],icon:[1],tooltipVisible:[32],internalPosition:[32]}]]],["p-b109703a",[[1,"ifx-badge"]]],["p-99593c55",[[0,"ifx-basic-table",{cols:[1],rows:[1],columnDefs:[16],rowData:[16],rowHeight:[1,"row-height"],uniqueKey:[1,"unique-key"],tableHeight:[1,"table-height"],gridOptions:[32]}]]],["p-f86a64e3",[[1,"ifx-breadcrumb"]]],["p-aa474b7f",[[1,"ifx-breadcrumb-item",{isLastItem:[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-6ccb878f",[[1,"ifx-card",{direction:[1],href:[1],target:[1],noBtns:[32],alignment:[32],noImg:[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-fce37e59",[[1,"ifx-card-headline",{isHovered:[4,"is-hovered"],direction:[32],hasDesc:[32]}]]],["p-9f7b7de1",[[1,"ifx-card-image",{src:[1],alt:[1],position:[1]}]]],["p-c706365e",[[1,"ifx-card-links"]]],["p-3ae02e9a",[[1,"ifx-card-overline"]]],["p-41c935d6",[[1,"ifx-card-text",{hasBtn:[32]}]]],["p-f6041d8a",[[1,"ifx-dropdown",{placement:[1],defaultOpen:[4,"default-open"],noAppendToBody:[4,"no-append-to-body"],disabled:[4],noCloseOnOutsideClick:[4,"no-close-on-outside-click"],noCloseOnMenuClick:[4,"no-close-on-menu-click"],internalIsOpen:[32],trigger:[32],menu:[32],isOpen:[64],closeDropdown:[64],openDropdown:[64]},[[0,"slotchange","watchHandlerSlot"],[5,"mousedown","handleOutsideClick"]]]]],["p-e4ca2035",[[1,"ifx-dropdown-header"]]],["p-2d7286b3",[[1,"ifx-dropdown-menu",{isOpen:[4,"is-open"],size:[1],hideTopPadding:[32],filteredItems:[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-f7d0f880",[[1,"ifx-dropdown-separator"]]],["p-3b6a6777",[[1,"ifx-dropdown-trigger",{isOpen:[4,"is-open"]}]]],["p-2901f8d0",[[1,"ifx-filter-input",{label:[1],size:[1],disabled:[4],icon:[4],search:[4],filter:[4],options:[32]}]]],["p-87f2c40e",[[1,"ifx-footer",{variant:[1],large:[32],default:[32],showFacebook:[32]}]]],["p-b304e24a",[[1,"ifx-footer-column"]]],["p-d618fd1c",[[1,"ifx-link",{href:[1],target:[1],color:[1],bold:[4],underline:[4]}]]],["p-3b29e194",[[1,"ifx-list-group",{flush:[4],bulletpoint:[4],notification:[4]}]]],["p-79a6f218",[[1,"ifx-list-notification",{titleText:[1,"title-text"],isFlush:[4,"is-flush"],creationTime:[8,"creation-time"],postTime:[32],shownTime:[32]}]]],["p-98aa70c1",[[1,"ifx-navbar-menu",{menu:[32]}]]],["p-c4218d32",[[1,"ifx-navbar-menu-item",{href:[1],target:[1],hide:[4]}]]],["p-abfb7592",[[1,"ifx-progress-bar",{value:[2],label:[1],size:[1],showLabel:[4,"show-label"],internalValue:[32]}]]],["p-45fcee45",[[1,"ifx-radio-button",{disabled:[4],value:[4],error:[4],size:[1],internalValue:[32],hasSlot:[32]}]]],["p-3c71c930",[[1,"ifx-sidebar",{applicationName:[1,"application-name"]}]]],["p-51898d6e",[[1,"ifx-spinner",{size:[1],variant:[1]}]]],["p-1f80154a",[[1,"ifx-status",{label:[1],border:[4],color:[1]}]]],["p-d1286a72",[[1,"ifx-switch",{value:[4],name:[1],disabled:[4],internalValue:[32]}]]],["p-e5d0e265",[[4,"ifx-tab",{header:[1]}]]],["p-5199a518",[[0,"ifx-table",{cols:[1],rows:[1],columnDefs:[16],rowData:[16],rowHeight:[1,"row-height"],uniqueKey:[1,"unique-key"],tableHeight:[1,"table-height"],pagination:[4],paginationPageSize:[2,"pagination-page-size"],gridOptions:[32]}]]],["p-3a876836",[[1,"ifx-tabs",{tabs:[16],orientation:[1],small:[4],internalOrientation:[32],activeTabIndex:[32],tabRefs:[32],tabHeaderRefs:[32],tabTitles:[32]},[[0,"slotchange","onSlotChange"]]]]],["p-a9433958",[[1,"ifx-tag"]]],["p-a3afa5f0",[[1,"ifx-checkbox",{disabled:[4],value:[4],error:[4],name:[1],size:[1],indeterminate:[4],internalValue:[32]}]]],["p-369b4552",[[1,"ifx-search-field",{value:[1025],showDeleteIcon:[4,"show-delete-icon"],disabled:[4],size:[1],insideDropdown:[32],isFocused:[32]},[[5,"mousedown","handleOutsideClick"]]]]],["p-15b817fc",[[1,"ifx-number-indicator",{inverted:[4]}]]],["p-1348f335",[[1,"ifx-accordion-item",{caption:[1],open:[32],close:[64],isOpen:[64]}],[1,"ifx-accordion",{autoCollapse:[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]],["p-1d2ab4ad",[[1,"ifx-button",{variant:[1],theme:[1],size:[1],disabled:[4],href:[1],target:[1],internalHref:[32],setFocus:[64]}]]],["p-a54bbb10",[[0,"ifx-icon",{icon:[1025],ifxIcon:[1032,"ifx-icon"]}]]]],e)));
|
|
2
2
|
//# sourceMappingURL=infineon-design-system-stencil.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,h as r}from"./p-acd1bd1f.js";import{c as s}from"./p-1c9336d4.js";import"./p-64765a81.js";const t=":host{display:inline-block}.spinner{position:relative;width:40px;height:40px}.spinner.s{width:24px;height:24px}.border{box-sizing:border-box;position:absolute;width:100%;height:100%;border:4px solid transparent;border-top-color:#0A8276;border-left-color:#0A8276;border-right-color:#0A8276;border-top-left-radius:1px;border-top-right-radius:1px;border-radius:50%;animation:spin 2s linear infinite}.semiconductor{width:100%;height:100%;animation:spin 2s linear infinite}.semiconductor.s svg{width:24px;height:24px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";const e=class{constructor(r){i(this,r);this.size=undefined;this.variant=undefined}render(){return r("div",{class:this.getClassNames()},r("div",{class:`${this.variant!=="brand"?"border":""}`}),this.variant==="brand"&&r("div",{class:`semiconductor ${this.getSizeClass()}`},r("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r("g",{id:"spinner/conductor"},r("path",{id:"Vector",d:"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z",fill:"#0A8276"})))))}getSizeClass(){return`${this.size}`==="s"?"s":""}getClassNames(){return s("spinner",this.size&&`spinner ${this.getSizeClass()}`)}};e.style=t;export{e as ifx_spinner};
|
|
2
|
+
//# sourceMappingURL=p-51898d6e.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["spinnerCss","Spinner","render","h","class","this","getClassNames","variant","getSizeClass","width","height","viewBox","fill","xmlns","id","d","size","classNames"],"sources":["./src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n\n}\n\n.spinner {\n position: relative;\n width: tokens.$ifxSize500;\n height: tokens.$ifxSize500;\n}\n\n.spinner.s {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n}\n\n.border {\n box-sizing: border-box;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 4px solid transparent;\n border-top-color: #0A8276;\n border-left-color: #0A8276;\n border-right-color: #0A8276;\n border-top-left-radius: 1px;\n border-top-right-radius: 1px;\n border-radius: 50%;\n animation: spin 2s linear infinite;\n}\n\n.semiconductor {\n width: 100%;\n height: 100%;\n animation: spin 2s linear infinite;\n\n &.s {\n & svg {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n }\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}","import { Component, h, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Prop() size: string;\n @Prop() variant: string;\n\n render() {\n return (\n <div class={this.getClassNames()}>\n <div class={`${this.variant !== 'brand' ? 'border' : \"\"}`}></div>\n {this.variant === 'brand'\n && <div class={`semiconductor ${this.getSizeClass()}`}>\n <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"spinner/conductor\">\n <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" fill=\"#0A8276\" />\n </g>\n </svg>\n </div>}\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"s\"\n : \"\";\n }\n\n getClassNames() {\n return classNames(\n 'spinner',\n this.size && `spinner ${this.getSizeClass()}`,\n );\n }\n}\n"],"mappings":"uGAAA,MAAMA,EAAa,4kB,MCQNC,EAAO,M,oEAIlBC,SACE,OACEC,EAAA,OAAKC,MAAOC,KAAKC,iBACfH,EAAA,OAAKC,MAAO,GAAGC,KAAKE,UAAY,QAAU,SAAW,OACpDF,KAAKE,UAAY,SACbJ,EAAA,OAAKC,MAAO,iBAAiBC,KAAKG,kBACnCL,EAAA,OAAKM,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,OAAOC,MAAM,8BAChEV,EAAA,KAAGW,GAAG,qBACJX,EAAA,QAAMW,GAAG,SAASC,EAAE,uvCAAuvCH,KAAK,e,CAQ9xCJ,eACE,MAAO,GAAGH,KAAKW,SAAW,IACtB,IACA,E,CAGNV,gBACE,OAAOW,EACL,UACAZ,KAAKW,MAAQ,WAAWX,KAAKG,iB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@infineon/infineon-design-system-stencil",
|
|
3
|
-
"version": "20.17.
|
|
3
|
+
"version": "20.17.4",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Infineon design system Stencil web components",
|
|
6
6
|
"homepage": "https://github.com/Infineon/infineon-design-system-stencil#readme",
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as i,h as r}from"./p-acd1bd1f.js";import{c as s}from"./p-1c9336d4.js";import"./p-64765a81.js";const t=":host{display:inline-block}.spinner{position:relative;width:40px;height:40px}.spinner.s{width:24px;height:24px}.border{box-sizing:border-box;position:absolute;width:100%;height:100%;border:4px solid transparent;border-top-color:#0A8276;border-left-color:#0A8276;border-right-color:#0A8276;border-top-left-radius:1px;border-top-right-radius:1px;border-radius:50%;animation:spin 2s linear infinite}.semiconductor{width:100%;height:100%;animation:spin 2s linear infinite}.semiconductor.s svg{width:24px;height:24px}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}";const e=class{constructor(r){i(this,r);this.size=undefined;this.variant=undefined}render(){return r("div",{class:this.getClassNames()},r("div",{class:`${this.variant!=="semiconductor"?"border":""}`}),this.variant==="semiconductor"&&r("div",{class:`semiconductor ${this.getSizeClass()}`},r("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},r("g",{id:"spinner/conductor"},r("path",{id:"Vector",d:"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z",fill:"#0A8276"})))))}getSizeClass(){return`${this.size}`==="s"?"s":""}getClassNames(){return s("spinner",this.size&&`spinner ${this.getSizeClass()}`)}};e.style=t;export{e as ifx_spinner};
|
|
2
|
-
//# sourceMappingURL=p-3eb1e629.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["spinnerCss","Spinner","render","h","class","this","getClassNames","variant","getSizeClass","width","height","viewBox","fill","xmlns","id","d","size","classNames"],"sources":["./src/components/spinner/spinner.scss?tag=ifx-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: inline-block;\n\n}\n\n.spinner {\n position: relative;\n width: tokens.$ifxSize500;\n height: tokens.$ifxSize500;\n}\n\n.spinner.s {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n}\n\n.border {\n box-sizing: border-box;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 4px solid transparent;\n border-top-color: #0A8276;\n border-left-color: #0A8276;\n border-right-color: #0A8276;\n border-top-left-radius: 1px;\n border-top-right-radius: 1px;\n border-radius: 50%;\n animation: spin 2s linear infinite;\n}\n\n.semiconductor {\n width: 100%;\n height: 100%;\n animation: spin 2s linear infinite;\n\n &.s {\n & svg {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n }\n }\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}","import { Component, h, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Prop() size: string;\n @Prop() variant: string;\n\n render() {\n return (\n <div class={this.getClassNames()}>\n <div class={`${this.variant !== 'semiconductor' ? 'border' : \"\"}`}></div>\n {this.variant === 'semiconductor' \n && <div class={`semiconductor ${this.getSizeClass()}`}>\n <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <g id=\"spinner/conductor\">\n <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" fill=\"#0A8276\"/>\n </g>\n </svg>\n </div>}\n </div>\n );\n }\n\n getSizeClass() {\n return `${this.size}` === \"s\"\n ? \"s\"\n : \"\";\n }\n\n getClassNames() {\n return classNames(\n 'spinner',\n this.size && `spinner ${this.getSizeClass()}`,\n );\n }\n}\n"],"mappings":"uGAAA,MAAMA,EAAa,4kB,MCQNC,EAAO,M,oEAIlBC,SACE,OACEC,EAAA,OAAKC,MAAOC,KAAKC,iBACfH,EAAA,OAAKC,MAAO,GAAGC,KAAKE,UAAY,gBAAkB,SAAW,OAC5DF,KAAKE,UAAY,iBACfJ,EAAA,OAAKC,MAAO,iBAAiBC,KAAKG,kBACjCL,EAAA,OAAKM,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,OAAOC,MAAM,8BAClEV,EAAA,KAAGW,GAAG,qBACNX,EAAA,QAAMW,GAAG,SAASC,EAAE,uvCAAuvCH,KAAK,e,CAQ1xCJ,eACE,MAAO,GAAGH,KAAKW,SAAW,IACtB,IACA,E,CAGNV,gBACE,OAAOW,EACL,UACAZ,KAAKW,MAAQ,WAAWX,KAAKG,iB"}
|