npm - @infineon/infineon-design-system-stencil - Versions diffs - 39.4.4--canary.1723.b2cb04cb46890b174f47cfd446a0e20dc3cee6fc.0 → 39.4.4-canary.0 - Mend

@infineon/infineon-design-system-stencil 39.4.4--canary.1723.b2cb04cb46890b174f47cfd446a0e20dc3cee6fc.0 → 39.4.4-canary.0

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

Files changed (1205) hide show

package/dist/collection/components/slider/slider.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"slider.stories.js","sourceRoot":"","sources":["../../../src/components/slider/slider.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Slider',\n component: 'ifx-slider',\n tags: ['autodocs'],\n\n argTypes: {\n min: { control: 'number',\n description: 'The minimum value of the slider.',\n table:{\n category: 'ifx-slider props',\n defaultValue: { summary: '0' },\n type: { summary: 'number' }\n }\n },\n max: { control: 'number',\n description: 'The maximum value of the slider.',\n table:{\n category: 'ifx-slider props',\n defaultValue: { summary: '100' },\n type: { summary: 'number' }\n } \n },\n step: { control: 'number',\n description: 'The step value of the slider.',\n table:{\n category: 'ifx-slider props',\n defaultValue: { summary: '1' },\n type: { summary: 'number' }\n }\n },\n type: { control: 'radio', options: ['single', 'double'],\n description: 'The type of the slider.',\n table: {\n category: 'ifx-slider props',\n defaultValue: { summary: 'single' },\n type: { summary: 'single \| double' }\n }\n },\n value: { control: 'number', if: { arg: 'type', eq: 'single'},\n description: 'The current value of the slider.',\n table: { \n category: 'ifx-slider props',\n type: { summary: 'number ' }\n }\n }, \n minValueHandle : {control :'number', if: { arg: 'type', eq: 'double'},\n description: 'The minimum value of the handle in double slider.',\n table: {\n category: 'ifx-slider props',\n type: { summary: 'number' }\n }\n },\n maxValueHandle : {control :'number', if: { arg: 'type', eq: 'double'},\n description: 'The maximum value of the handle in double slider.',\n table: {\n category: 'ifx-slider props',\n type: { summary: 'number' }\n },\n }, \n showPercentage: { \n control: 'boolean', if: { arg: 'type', eq: 'single'},\n description: 'Show the percentage of the slider value.',\n table: {\n category: 'ifx-slider props',\n defaultValue: { summary: 'false' },\n type: { summary: 'boolean' }\n }\n },\n disabled: { control: 'boolean',\n description: 'Disable the slider.',\n table: {\n category: 'ifx-slider props',\n defaultValue: { summary: 'false' },\n type: { summary: 'boolean' }\n }\n },\n leftIcon: {\n options: Object.keys(icons),\n control: { type: 'select'},\n description: 'The icon on the left of the slider.',\n table: {\n category: 'ifx-slider props',\n type: { summary: 'string' }\n }\n },\n rightIcon: {\n options: Object.keys(icons),\n control: { type: 'select' },\n description: 'The icon on the right of the slider.',\n table: {\n category: 'ifx-slider props',\n type: { summary: 'string' }\n }\n },\n leftText: { control: 'text',\n description: 'The text on the left side.',\n table: {\n category: 'ifx-slider props',\n type: { summary: 'string' }\n }\n },\n rightText: { control: 'text',\n description: 'The text on the right side.',\n table: {\n category: 'ifx-slider props',\n type: { summary: 'string' }\n }\n },\n ariaLabel: {\n description: 'Aria label of the Slider.',\n control: 'text',\n table: {\n category: 'ARIA Labels',\n defaultValue: {\n summary: \"\",\n },\n type: {\n summary: 'string',\n },\n },\n },\n ifxChange: {\n action: 'ifxChange',\n description: 'Custom event emitted on input change.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n },\n },\n },\n }\n}\n\nconst Template = args => {\n const sliderElement = document.createElement('ifx-slider');\n sliderElement.setAttribute('value', args.value);\n sliderElement.setAttribute('min', args.min);\n sliderElement.setAttribute('max', args.max);\n sliderElement.setAttribute('step', args.step)\n sliderElement.setAttribute('min-value-handle', args.minValueHandle);\n sliderElement.setAttribute('max-value-handle', args.maxValueHandle);\n sliderElement.setAttribute('type', args.type);\n sliderElement.setAttribute('aria-label', args.ariaLabel);\n if (args.showPercentage) {\n sliderElement.setAttribute('show-percentage', 'true');\n }\n if (args.disabled) {\n sliderElement.setAttribute('disabled', 'true'); // Set disabled attribute\n }\n\n if (args.leftIcon) {\n sliderElement.setAttribute('left-icon', args.leftIcon);\n }\n if (args.rightIcon) {\n sliderElement.setAttribute('right-icon', args.rightIcon);\n }\n if (args.leftText) {\n sliderElement.setAttribute('left-text', args.leftText);\n }\n if (args.rightText) {\n sliderElement.setAttribute('right-text', args.rightText);\n }\n sliderElement.addEventListener('ifxChange', action('ifxChange'));\n\n return sliderElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n min: 0,\n max: 100,\n step: 1,\n value: 50,\n minValueHandle: 20,\n maxValueHandle: 80,\n showPercentage: false,\n disabled: false,\n type: 'single'\n};\n\nexport const WithPercentageDisplay = Template.bind({});\nWithPercentageDisplay.args = {\n ...Default.args,\n showPercentage: true,\n disabled: false,\n};\n\nexport const WithIcons = Template.bind({});\nWithIcons.args = {\n ...Default.args,\n leftIcon: 'cogwheel-16',\n rightIcon: 'cogwheel-16',\n};\n\nexport const WithTexts = Template.bind({});\nWithTexts.args = {\n ...Default.args,\n leftText: 'LeftText',\n rightText: 'RightText',\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n ...Default.args,\n disabled: true,\n};\n"]}
1	+ {"version":3,"file":"slider.stories.js","sourceRoot":"","sources":["../../../src/components/slider/slider.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\r\nimport { icons } from '@infineon/infineon-icons';\r\n\r\nexport default {\r\n title: 'Components/Slider',\r\n component: 'ifx-slider',\r\n tags: ['autodocs'],\r\n\r\n argTypes: {\r\n min: { control: 'number',\r\n description: 'The minimum value of the slider.',\r\n table:{\r\n category: 'ifx-slider props',\r\n defaultValue: { summary: '0' },\r\n type: { summary: 'number' }\r\n }\r\n },\r\n max: { control: 'number',\r\n description: 'The maximum value of the slider.',\r\n table:{\r\n category: 'ifx-slider props',\r\n defaultValue: { summary: '100' },\r\n type: { summary: 'number' }\r\n } \r\n },\r\n step: { control: 'number',\r\n description: 'The step value of the slider.',\r\n table:{\r\n category: 'ifx-slider props',\r\n defaultValue: { summary: '1' },\r\n type: { summary: 'number' }\r\n }\r\n },\r\n type: { control: 'radio', options: ['single', 'double'],\r\n description: 'The type of the slider.',\r\n table: {\r\n category: 'ifx-slider props',\r\n defaultValue: { summary: 'single' },\r\n type: { summary: 'single \| double' }\r\n }\r\n },\r\n value: { control: 'number', if: { arg: 'type', eq: 'single'},\r\n description: 'The current value of the slider.',\r\n table: { \r\n category: 'ifx-slider props',\r\n type: { summary: 'number ' }\r\n }\r\n }, \r\n minValueHandle : {control :'number', if: { arg: 'type', eq: 'double'},\r\n description: 'The minimum value of the handle in double slider.',\r\n table: {\r\n category: 'ifx-slider props',\r\n type: { summary: 'number' }\r\n }\r\n },\r\n maxValueHandle : {control :'number', if: { arg: 'type', eq: 'double'},\r\n description: 'The maximum value of the handle in double slider.',\r\n table: {\r\n category: 'ifx-slider props',\r\n type: { summary: 'number' }\r\n },\r\n }, \r\n showPercentage: { \r\n control: 'boolean', if: { arg: 'type', eq: 'single'},\r\n description: 'Show the percentage of the slider value.',\r\n table: {\r\n category: 'ifx-slider props',\r\n defaultValue: { summary: 'false' },\r\n type: { summary: 'boolean' }\r\n }\r\n },\r\n disabled: { control: 'boolean',\r\n description: 'Disable the slider.',\r\n table: {\r\n category: 'ifx-slider props',\r\n defaultValue: { summary: 'false' },\r\n type: { summary: 'boolean' }\r\n }\r\n },\r\n leftIcon: {\r\n options: Object.keys(icons),\r\n control: { type: 'select'},\r\n description: 'The icon on the left of the slider.',\r\n table: {\r\n category: 'ifx-slider props',\r\n type: { summary: 'string' }\r\n }\r\n },\r\n rightIcon: {\r\n options: Object.keys(icons),\r\n control: { type: 'select' },\r\n description: 'The icon on the right of the slider.',\r\n table: {\r\n category: 'ifx-slider props',\r\n type: { summary: 'string' }\r\n }\r\n },\r\n leftText: { control: 'text',\r\n description: 'The text on the left side.',\r\n table: {\r\n category: 'ifx-slider props',\r\n type: { summary: 'string' }\r\n }\r\n },\r\n rightText: { control: 'text',\r\n description: 'The text on the right side.',\r\n table: {\r\n category: 'ifx-slider props',\r\n type: { summary: 'string' }\r\n }\r\n },\r\n ariaLabel: {\r\n description: 'Aria label of the Slider.',\r\n control: 'text',\r\n table: {\r\n category: 'ARIA Labels',\r\n defaultValue: {\r\n summary: \"\",\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n ifxChange: {\r\n action: 'ifxChange',\r\n description: 'Custom event emitted on input change.',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail:\r\n 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\r\n },\r\n },\r\n },\r\n }\r\n}\r\n\r\nconst Template = args => {\r\n const sliderElement = document.createElement('ifx-slider');\r\n sliderElement.setAttribute('value', args.value);\r\n sliderElement.setAttribute('min', args.min);\r\n sliderElement.setAttribute('max', args.max);\r\n sliderElement.setAttribute('step', args.step)\r\n sliderElement.setAttribute('min-value-handle', args.minValueHandle);\r\n sliderElement.setAttribute('max-value-handle', args.maxValueHandle);\r\n sliderElement.setAttribute('type', args.type);\r\n sliderElement.setAttribute('aria-label', args.ariaLabel);\r\n if (args.showPercentage) {\r\n sliderElement.setAttribute('show-percentage', 'true');\r\n }\r\n if (args.disabled) {\r\n sliderElement.setAttribute('disabled', 'true'); // Set disabled attribute\r\n }\r\n\r\n if (args.leftIcon) {\r\n sliderElement.setAttribute('left-icon', args.leftIcon);\r\n }\r\n if (args.rightIcon) {\r\n sliderElement.setAttribute('right-icon', args.rightIcon);\r\n }\r\n if (args.leftText) {\r\n sliderElement.setAttribute('left-text', args.leftText);\r\n }\r\n if (args.rightText) {\r\n sliderElement.setAttribute('right-text', args.rightText);\r\n }\r\n sliderElement.addEventListener('ifxChange', action('ifxChange'));\r\n\r\n return sliderElement;\r\n};\r\n\r\nexport const Default = Template.bind({});\r\nDefault.args = {\r\n min: 0,\r\n max: 100,\r\n step: 1,\r\n value: 50,\r\n minValueHandle: 20,\r\n maxValueHandle: 80,\r\n showPercentage: false,\r\n disabled: false,\r\n type: 'single'\r\n};\r\n\r\nexport const WithPercentageDisplay = Template.bind({});\r\nWithPercentageDisplay.args = {\r\n ...Default.args,\r\n showPercentage: true,\r\n disabled: false,\r\n};\r\n\r\nexport const WithIcons = Template.bind({});\r\nWithIcons.args = {\r\n ...Default.args,\r\n leftIcon: 'cogwheel-16',\r\n rightIcon: 'cogwheel-16',\r\n};\r\n\r\nexport const WithTexts = Template.bind({});\r\nWithTexts.args = {\r\n ...Default.args,\r\n leftText: 'LeftText',\r\n rightText: 'RightText',\r\n};\r\n\r\nexport const Disabled = Template.bind({});\r\nDisabled.args = {\r\n ...Default.args,\r\n disabled: true,\r\n};\r\n"]}

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

@@ -14,8 +14,8 @@ export class Spinner {
         }
     }
     render() {
-        return (h("div", { key: 'dcb5fa927ad5ad53c34eb4c47a115cf3ae9958cd', role: "status", "aria-label": this.ariaLabel || "Loading", class: this.getClassNames() }, h("div", { key: '490dd918800c9ae2dad8289cc5b7adaefeff8ab7', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
-            && h("div", { key: '4da8f91e1154a482b8f196e7a8c972db546ca16a', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: 'd1e37b9d383892fc9528588184fb3af7c76934de', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'f750eebbab8e00e9f1b6913d8f229ad13f1b94a2', id: "spinner/conductor" }, h("path", { key: 'c96fa1feb182affde75eabf4a4cc834f2f3d3dcc', 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" }))))));
+        return (h("div", { key: '3494b108576459cad2c7d1c9796c32486df2049f', role: "status", "aria-label": this.ariaLabel || "Loading", class: this.getClassNames() }, h("div", { key: '4c38429b38606bbfa4886e1c5a356b567961726d', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
+            && h("div", { key: '9c76d02a9a93eb20882b89875fc18b15ff7219d3', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: '7b09ca8942f361fed1e5c4af040e2facc7ae9044', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '28fff6e48621daf10ba79f86975b6c11860a9d6f', id: "spinner/conductor" }, h("path", { key: '31a4c0c243b82b3c3f0c870f6990b5d41e7c5ef2', 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" }))))));
     }
     getSizeClass() {
         return `${this.size}` === "s"

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

	@@ -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,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,OAAO;IALpB;QASU,aAAQ,GAAY,KAAK,CAAC;KAwCnC;IArCC,KAAK,CAAC,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACpC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,aAAa,EAAE,MAAM,SAAS,CAAC,CAAA;QAChD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,IAAI,EAAC,QAAQ,gBACN,IAAI,CAAC,SAAS,IAAI,SAAS,EACrC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;YAC3B,4DAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,GAAQ;YACnG,IAAI,CAAC,OAAO,KAAK,OAAO;mBACpB,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;oBACtF,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;wBAC5F,0DAAG,EAAE,EAAC,mBAAmB;4BACvB,6DAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAC,svCAAsvC,GAAG,CAC3wC,CACA,CACF,CACJ,CACP,CAAC;IACJ,CAAC;IAED,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;YAC3B,CAAC,CAAC,GAAG;YACL,CAAC,CAAC,EAAE,CAAC;IACT,CAAC;IAED,aAAa;QACX,OAAO,UAAU,CACf,SAAS,EACT,IAAI,CAAC,IAAI,IAAI,WAAW,IAAI,CAAC,YAAY,EAAE,EAAE,CAC9C,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n tag: 'ifx-spinner',\n styleUrl: 'spinner.scss',\n shadow: true,\n})\nexport class Spinner {\n @Element() el;\n @Prop() size: string;\n @Prop() variant: string;\n @Prop() inverted: boolean = false;\n @Prop() ariaLabel: string \| null;\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-spinner', await framework)\n }\n }\n\n render() {\n return (\n <div role=\"status\" \n aria-label={this.ariaLabel \|\| \"Loading\"}\n class={this.getClassNames()}>\n <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n {this.variant === 'brand'\n && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${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\" />\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"]}
1	+ {"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,OAAO;IALpB;QASU,aAAQ,GAAY,KAAK,CAAC;KAwCnC;IArCC,KAAK,CAAC,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACpC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,aAAa,EAAE,MAAM,SAAS,CAAC,CAAA;QAChD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,IAAI,EAAC,QAAQ,gBACN,IAAI,CAAC,SAAS,IAAI,SAAS,EACrC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;YAC3B,4DAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,GAAQ;YACnG,IAAI,CAAC,OAAO,KAAK,OAAO;mBACpB,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;oBACtF,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;wBAC5F,0DAAG,EAAE,EAAC,mBAAmB;4BACvB,6DAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAC,svCAAsvC,GAAG,CAC3wC,CACA,CACF,CACJ,CACP,CAAC;IACJ,CAAC;IAED,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;YAC3B,CAAC,CAAC,GAAG;YACL,CAAC,CAAC,EAAE,CAAC;IACT,CAAC;IAED,aAAa;QACX,OAAO,UAAU,CACf,SAAS,EACT,IAAI,CAAC,IAAI,IAAI,WAAW,IAAI,CAAC,YAAY,EAAE,EAAE,CAC9C,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n \r\n@Component({\r\n tag: 'ifx-spinner',\r\n styleUrl: 'spinner.scss',\r\n shadow: true,\r\n})\r\nexport class Spinner {\r\n @Element() el;\r\n @Prop() size: string;\r\n @Prop() variant: string;\r\n @Prop() inverted: boolean = false;\r\n @Prop() ariaLabel: string \| null;\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-spinner', await framework)\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div role=\"status\" \r\n aria-label={this.ariaLabel \|\| \"Loading\"}\r\n class={this.getClassNames()}>\r\n <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\r\n {this.variant === 'brand'\r\n && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\r\n <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g id=\"spinner/conductor\">\r\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\" />\r\n </g>\r\n </svg>\r\n </div>}\r\n </div>\r\n );\r\n }\r\n\r\n getSizeClass() {\r\n return `${this.size}` === \"s\"\r\n ? \"s\"\r\n : \"\";\r\n }\r\n\r\n getClassNames() {\r\n return classNames(\r\n 'spinner',\r\n this.size && `spinner ${this.getSizeClass()}`\r\n );\r\n }\r\n}\r\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.stories.ts"],"names":[],"mappings":"AACA,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,KAAK;QACf,SAAS,EAAE,EAAE;KACd;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,sCAAsC;YACnD,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,mBAAmB;gBAC7B,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,yBAAyB;YACtC,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;YAC7B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,mBAAmB;gBAC7B,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,wCAAwC;YACrD,KAAK,EAAE;gBACL,QAAQ,EAAE,mBAAmB;gBAC7B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QACC,SAAS,EAAE;YACX,WAAW,EAAE,4BAA4B;YACzC,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,aAAa;gBACvB,YAAY,EAAE;oBACZ,OAAO,EAAE,EAAE;iBACZ;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,4BAA4B,IAAI,CAAC,SAAS,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ,kBAAkB,CAAC;AAEvK,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC","sourcesContent":["\nexport default {\n title: 'Components/Spinner',\n tags: ['autodocs'],\n\n args: {\n size: 'm',\n variant: 'default',\n inverted: false,\n ariaLabel: \"\"\n },\n argTypes: {\n size: {\n description: 'Size options: s (24px) and m (40px).',\n options: ['s', 'm'],\n control: { type: 'radio' },\n table: {\n category: 'ifx-spinner props',\n defaultValue: {\n summary: 'm'\n },\n type: {\n summary: 's \| m'\n }\n }\n },\n variant: {\n description: 'Variant of the spinner.',\n options: ['default', 'brand'],\n control: { type: 'radio' },\n table: {\n category: 'ifx-spinner props',\n defaultValue: {\n summary: 'default'\n },\n type: {\n summary: 'string'\n }\n },\n },\n inverted: {\n description: 'Changes the color of spinner to white.',\n table: {\n category: 'ifx-spinner props',\n defaultValue: {\n summary: 'false'\n },\n type: {\n summary: 'boolean'\n }\n }\n },\n ariaLabel: {\n description: 'Aria label of the Spinner.',\n control: 'text',\n table: {\n category: 'ARIA Labels',\n defaultValue: {\n summary: '',\n },\n type: {\n summary: 'string',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = args => `<ifx-spinner aria-label=\"${args.ariaLabel}\" variant=\"${args.variant}\" size=\"${args.size}\" inverted=\"${args.inverted}\"></ifx-spinner>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argsTypes = {};\n"]}
1	+ {"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.stories.ts"],"names":[],"mappings":"AACA,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,KAAK;QACf,SAAS,EAAE,EAAE;KACd;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,sCAAsC;YACnD,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,mBAAmB;gBAC7B,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,yBAAyB;YACtC,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;YAC7B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,mBAAmB;gBAC7B,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,wCAAwC;YACrD,KAAK,EAAE;gBACL,QAAQ,EAAE,mBAAmB;gBAC7B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QACC,SAAS,EAAE;YACX,WAAW,EAAE,4BAA4B;YACzC,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,aAAa;gBACvB,YAAY,EAAE;oBACZ,OAAO,EAAE,EAAE;iBACZ;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,4BAA4B,IAAI,CAAC,SAAS,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ,kBAAkB,CAAC;AAEvK,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC","sourcesContent":["\r\nexport default {\r\n title: 'Components/Spinner',\r\n tags: ['autodocs'],\r\n\r\n args: {\r\n size: 'm',\r\n variant: 'default',\r\n inverted: false,\r\n ariaLabel: \"\"\r\n },\r\n argTypes: {\r\n size: {\r\n description: 'Size options: s (24px) and m (40px).',\r\n options: ['s', 'm'],\r\n control: { type: 'radio' },\r\n table: {\r\n category: 'ifx-spinner props',\r\n defaultValue: {\r\n summary: 'm'\r\n },\r\n type: {\r\n summary: 's \| m'\r\n }\r\n }\r\n },\r\n variant: {\r\n description: 'Variant of the spinner.',\r\n options: ['default', 'brand'],\r\n control: { type: 'radio' },\r\n table: {\r\n category: 'ifx-spinner props',\r\n defaultValue: {\r\n summary: 'default'\r\n },\r\n type: {\r\n summary: 'string'\r\n }\r\n },\r\n },\r\n inverted: {\r\n description: 'Changes the color of spinner to white.',\r\n table: {\r\n category: 'ifx-spinner props',\r\n defaultValue: {\r\n summary: 'false'\r\n },\r\n type: {\r\n summary: 'boolean'\r\n }\r\n }\r\n },\r\n ariaLabel: {\r\n description: 'Aria label of the Spinner.',\r\n control: 'text',\r\n table: {\r\n category: 'ARIA Labels',\r\n defaultValue: {\r\n summary: '',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n },\r\n};\r\n\r\nconst DefaultTemplate = args => `<ifx-spinner aria-label=\"${args.ariaLabel}\" variant=\"${args.variant}\" size=\"${args.size}\" inverted=\"${args.inverted}\"></ifx-spinner>`;\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\nDefault.argsTypes = {};\r\n"]}

package/dist/collection/components/status/status.js CHANGED Viewed

@@ -17,7 +17,7 @@ export class Status {
         var _a;
         const effectiveColor = ((_a = this.color) === null || _a === void 0 ? void 0 : _a.trim()) ? this.color : 'orange-500';
         const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';
-        return (h("div", { key: 'df3241b7191cf739ee30f03c16d86572c6383e47', role: "status", class: containerClass }, h("span", { key: '24cef43702366494d9fbaaa11f8f1b5d84d007d3', class: `dot ${effectiveColor}` }), h("p", { key: 'a2e8854926c0b976f5fbda21d0299fa74d90122e', class: "text" }, this.label)));
+        return (h("div", { key: '91324962c9fe55931ec6b01b6eb9605865bfa202', role: "status", class: containerClass }, h("span", { key: '1b207b051a6de02f8f193a7c3e4e7f101d78b2f9', class: `dot ${effectiveColor}` }), h("p", { key: 'bd518bf45e24efa53c904096b144fda3f9b04ae5', class: "text" }, this.label)));
     }
     static get is() { return "ifx-status"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/status/status.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"status.js","sourceRoot":"","sources":["../../../src/components/status/status.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAQzE,MAAM,OAAO,MAAM;IANnB;QASU,WAAM,GAAY,KAAK,CAAC;QACxB,UAAK,GAAW,YAAY,CAAC;KAoBtC;IAlBC,KAAK,CAAC,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACpC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,YAAY,EAAE,MAAM,SAAS,CAAC,CAAA;QAC/C,CAAC;IACH,CAAC;IAED,MAAM;;QACJ,MAAM,cAAc,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,EAAE,EAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC;QACtE,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,oBAAoB,cAAc,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC;QAElG,OAAO,CACL,4DAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,cAAc;YACtC,6DAAM,KAAK,EAAE,OAAO,cAAc,EAAE,GAAS;YAC7C,0DAAG,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,KAAK,CAAK,CAC5B,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-status',\n styleUrl: 'status.scss',\n shadow: true\n})\n\nexport class Status {\n @Element() el;\n @Prop() label: string;\n @Prop() border: boolean = false;\n @Prop() color: string = 'orange-500';\n \n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-status', await framework)\n }\n }\n\n render() {\n const effectiveColor = this.color?.trim() ? this.color : 'orange-500';\n const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';\n\n return (\n <div role=\"status\" class={containerClass}>\n <span class={`dot ${effectiveColor}`}></span>\n <p class=\"text\">{this.label}</p>\n </div>\n );\n }\n}"]}
1	+ {"version":3,"file":"status.js","sourceRoot":"","sources":["../../../src/components/status/status.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAQzE,MAAM,OAAO,MAAM;IANnB;QASU,WAAM,GAAY,KAAK,CAAC;QACxB,UAAK,GAAW,YAAY,CAAC;KAoBtC;IAlBC,KAAK,CAAC,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACpC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,YAAY,EAAE,MAAM,SAAS,CAAC,CAAA;QAC/C,CAAC;IACH,CAAC;IAED,MAAM;;QACJ,MAAM,cAAc,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,EAAE,EAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC;QACtE,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,oBAAoB,cAAc,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC;QAElG,OAAO,CACL,4DAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,cAAc;YACtC,6DAAM,KAAK,EAAE,OAAO,cAAc,EAAE,GAAS;YAC7C,0DAAG,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,KAAK,CAAK,CAC5B,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-status',\r\n styleUrl: 'status.scss',\r\n shadow: true\r\n})\r\n\r\nexport class Status {\r\n @Element() el;\r\n @Prop() label: string;\r\n @Prop() border: boolean = false;\r\n @Prop() color: string = 'orange-500';\r\n \r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-status', await framework)\r\n }\r\n }\r\n\r\n render() {\r\n const effectiveColor = this.color?.trim() ? this.color : 'orange-500';\r\n const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';\r\n\r\n return (\r\n <div role=\"status\" class={containerClass}>\r\n <span class={`dot ${effectiveColor}`}></span>\r\n <p class=\"text\">{this.label}</p>\r\n </div>\r\n );\r\n }\r\n}"]}

package/dist/collection/components/status/status.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"status.stories.js","sourceRoot":"","sources":["../../../src/components/status/status.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,IAAI;KACb;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,+CAA+C;YAC5D,OAAO,EAAE,SAAS;YAClB,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,IAAI;iBACd;aACF;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,CAAC;YAC9X,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,sBAAsB,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC,MAAM,KAAK,CAAC;AAEpH,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["export default {\n title: 'Components/Status',\n tags: ['autodocs'],\n\n args: {\n label: 'text',\n color: 'orange-500',\n border: true,\n },\n argTypes: {\n label: {\n name: 'Label of Status',\n description: 'Set the label of <ifx-status>.',\n table: {\n category: 'ifx-status props',\n type: {\n summary: 'string'\n }\n }\n },\n border: {\n description: 'When set to true the status has a border.',\n control: 'boolean',\n attr: 'border',\n table: {\n category: 'ifx-status props',\n defaultValue: {\n summary: true\n }\n }\n },\n color: {\n options: ['engineering-100', 'engineering-200', 'engineering-300', 'engineering-400', 'engineering-500', 'engineering-600', 'ocean-100', 'ocean-200', 'ocean-300', 'ocean-400', 'ocean-500', 'ocean-600', 'ocean-700', 'red-500', 'red-600', 'red-700', 'orange-500', 'green-500', 'lawn-400', 'lawn-500', 'lawn-700', 'berry-400', 'berry-500', 'sun-400', 'sun-500', 'sand-400', 'sand-500'],\n control: { type: 'select' },\n },\n },\n};\n\nconst DefaultTemplate = args => `<ifx-status label=\"${args.label}\" color=\"${args.color}\" border=\"${args.border}\"/>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}
1	+ {"version":3,"file":"status.stories.js","sourceRoot":"","sources":["../../../src/components/status/status.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,YAAY;QACnB,MAAM,EAAE,IAAI;KACb;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,+CAA+C;YAC5D,OAAO,EAAE,SAAS;YAClB,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,IAAI;iBACd;aACF;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,CAAC;YAC9X,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,sBAAsB,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC,MAAM,KAAK,CAAC;AAEpH,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["export default {\r\n title: 'Components/Status',\r\n tags: ['autodocs'],\r\n\r\n args: {\r\n label: 'text',\r\n color: 'orange-500',\r\n border: true,\r\n },\r\n argTypes: {\r\n label: {\r\n name: 'Label of Status',\r\n description: 'Set the label of <ifx-status>.',\r\n table: {\r\n category: 'ifx-status props',\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n border: {\r\n description: 'When set to true the status has a border.',\r\n control: 'boolean',\r\n attr: 'border',\r\n table: {\r\n category: 'ifx-status props',\r\n defaultValue: {\r\n summary: true\r\n }\r\n }\r\n },\r\n color: {\r\n options: ['engineering-100', 'engineering-200', 'engineering-300', 'engineering-400', 'engineering-500', 'engineering-600', 'ocean-100', 'ocean-200', 'ocean-300', 'ocean-400', 'ocean-500', 'ocean-600', 'ocean-700', 'red-500', 'red-600', 'red-700', 'orange-500', 'green-500', 'lawn-400', 'lawn-500', 'lawn-700', 'berry-400', 'berry-500', 'sun-400', 'sun-500', 'sand-400', 'sand-500'],\r\n control: { type: 'select' },\r\n },\r\n },\r\n};\r\n\r\nconst DefaultTemplate = args => `<ifx-status label=\"${args.label}\" color=\"${args.color}\" border=\"${args.border}\"/>`;\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\nDefault.argTypes = {};\r\n"]}

package/dist/collection/components/stepper/interfaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/components/stepper/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["export interface StepperState {\n activeStep: number;\n indicatorPosition: 'left' \| 'right';\n showStepNumber: boolean;\n variant: 'default' \| 'compact' \| 'vertical';\n\n setActiveStep?(stepId: number, setByClick: boolean): null;\n}\n "]}
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/components/stepper/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["export interface StepperState {\r\n activeStep: number;\r\n indicatorPosition: 'left' \| 'right';\r\n showStepNumber: boolean;\r\n variant: 'default' \| 'compact' \| 'vertical';\r\n\r\n setActiveStep?(stepId: number, setByClick: boolean): null;\r\n}\r\n "]}

package/dist/collection/components/stepper/step/step.js CHANGED Viewed

@@ -42,19 +42,19 @@ export class Step {
         }
     }
     render() {
-        return (h("div", { key: '9a603ade945d1020bcba53fa85777a27f08f7df1', "aria-current": this.active ? 'step' : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? 'first-step' : ''}
-                        ${this.error ? 'error' : ''}
-                        ${this.stepperState.variant}
-                        ${this.complete ? 'complete' : ''}
-                        ${this.lastStep ? 'last-step' : ''}
-                        indicator-${this.stepperState.indicatorPosition}
-                        ${this.active ? 'active' : ''}
-                        ${this.clickable ? 'clickable' : ''}
-                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: 'ec1bdd77edfd87f066df44db5f3f0e115b3f7a67', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '46ae721e9ba89b6f561540d6228b4928d74522a0', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
-            h("div", { key: 'e168325daeff9ca6b2ff4e045bce5ec974e9c5d5', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '4eb3de9575a8704f0ed7e1ade9ccae31ea59c572', icon: 'check16' }), this.active && h("span", { key: 'c0c554eaae6a28783a4597633e4c60dbe14c0fda', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '1b27252ddf3369c3732e7b40786645ec2720d8bb', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && h("span", { key: '38bf07c39837ed4f77de59c44a2a32fbdb069439', class: `step-connector-r ${this.active ? 'active' : ''}` })),
+        return (h("div", { key: '1f778ed752335fa923c0a67eab7f7809a8386109', "aria-current": this.active ? 'step' : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? 'first-step' : ''}
+                        ${this.error ? 'error' : ''}
+                        ${this.stepperState.variant}
+                        ${this.complete ? 'complete' : ''}
+                        ${this.lastStep ? 'last-step' : ''}
+                        indicator-${this.stepperState.indicatorPosition}
+                        ${this.active ? 'active' : ''}
+                        ${this.clickable ? 'clickable' : ''}
+                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: 'aa426822898b5151f6d5647befea92729117ef8d', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '07937dc730e69e916b45bdf1caa328901b0dc1ff', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
+            h("div", { key: '13de06c3623199feeea739654ded0cd16fca3531', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: 'e42c6f5cc67f840addf4b66f829cd1c1cebf19ee', icon: 'check16' }), this.active && h("span", { key: '198a9faaed9ed2c04622d39e1fd07753cc781d90', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '4580d809db3368e8bb76c07e3e32b77c77dd98d2', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && h("span", { key: '9766552769baedf48b506cc790cef3ffcfef85cd', class: `step-connector-r ${this.active ? 'active' : ''}` })),
         /* Step labels */
         (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep + 1))) &&
-            h("div", { key: 'f13581114efa81deaeecd38ffe27b14d1d3dcc87', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`, onClick: () => { this.handleStepClick(); }, onKeyDown: (e) => { this.handleStepKeyDown(e); } }, (this.stepperState.variant !== 'compact') && h("slot", { key: '6accb517e6d561549759a3a723c4c24b1729e80a' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: 'c6960ab0dd25316c6407433ecad376b66b47d28c' }))));
+            h("div", { key: '875dec70a774a03043aa35e0a2448ed8ea1d5402', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`, onClick: () => { this.handleStepClick(); }, onKeyDown: (e) => { this.handleStepKeyDown(e); } }, (this.stepperState.variant !== 'compact') && h("slot", { key: 'df35686cab150ffceb42278824a74e2f754a5164' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: '25dd5987f5fa7e0c61a5e0c07d3874bb3718d39d' }))));
     }
     ;
     static get is() { return "ifx-step"; }
@@ -194,7 +194,7 @@ export class Step {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "{ activeStep: 1, \n                                                             showStepNumber: false, \n                                                             variant: 'default', \n                                                             indicatorPosition: 'left' }"
+                "defaultValue": "{ activeStep: 1, \r\n                                                             showStepNumber: false, \r\n                                                             variant: 'default', \r\n                                                             indicatorPosition: 'left' }"
             }
         };
     }

package/dist/collection/components/stepper/step/step.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"step.js","sourceRoot":"","sources":["../../../../src/components/stepper/step/step.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, \n Component, \n Listen, \n Prop, \n State, \n Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n tag: 'ifx-step',\n styleUrl: 'step.scss',\n shadow: true\n})\n\nexport class Step {\n @Prop() complete?: boolean = false;\n @Prop() disabled?: boolean = false;\n @Prop({ mutable: true }) error?: boolean = false;\n @Prop({ reflect: false }) lastStep: boolean = false;\n @Prop() stepId: number = 1;\n @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n showStepNumber: false, \n variant: 'default', \n indicatorPosition: 'left' };\n\n @State() active: boolean;\n @State() clickable: boolean = false;\n\n @Listen('ifxChange', { target: 'document' })\n onStepChange(event: CustomEvent) {\n const previousActiveStep = event.detail.previousActiveStep;\n if (previousActiveStep === this.stepId && this.error) {\n this.clickable = true;\n }\n } \n\n @Watch('stepperState')\n updateCurrentStep(newStepperState) {\n this.active = (newStepperState.activeStep === this.stepId)\n }\n\n @Watch('active')\n updateErrorState(){\n if (this.active) {\n this.error = false;\n }\n }\n\n\n handleStepClick() {\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable \|\| this.complete)) {\n this.stepperState.setActiveStep(this.stepId, true)\n } \n }\n \n handleStepKeyDown(event: KeyboardEvent) {\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable \|\| this.complete) && event.key === 'Enter') {\n this.stepperState.setActiveStep(this.stepId, true)\n } \n }\n \n stopOnClickPropogation(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n }\n }\n\n render() {\n return (\n <div aria-current = {this.active ? 'step': false}\n aria-disabled = {this.active \|\| this.complete ? false : true}\n onClick={ (e) => this.stopOnClickPropogation(e) }\n class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n ${this.error ? 'error': ''}\n ${this.stepperState.variant}\n ${this.complete ? 'complete': ''}\n ${this.lastStep ? 'last-step': ''}\n indicator-${this.stepperState.indicatorPosition}\n ${this.active ? 'active' : ''}\n ${this.clickable ? 'clickable' : ''}\n ${this.disabled ? 'disabled': ''}`}>\n\n <div class = 'step-icon-wrapper'>\n {/* Left connector /}\n {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n {\n (this.stepperState.variant !== 'compact' && (!this.error \|\| (this.error && this.active))) && \n <div class = 'step-icon'>\n {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n {this.active && <span class = 'active-indic'></span>}\n </div>\n }\n\n {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningF16'></ifx-icon>}\n \n {/ Right connector /}\n {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n </div>\n\n {\n / Step labels */\n (this.stepperState.variant !== 'compact' \|\| (this.stepperState.variant === 'compact' && (this.active \|\| this.stepId === this.stepperState.activeStep+1))) && \n <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n onClick={() => { this.handleStepClick() }} \n onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n {(this.stepperState.variant !== 'compact') && <slot/>}\n\n {this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : ''}\n {this.stepperState.variant === 'compact' && <slot/>}\n </div>\n }\n\n </div>\n );\n };\n}\n"]}
1	+ {"version":3,"file":"step.js","sourceRoot":"","sources":["../../../../src/components/stepper/step/step.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, \r\n Component, \r\n Listen, \r\n Prop, \r\n State, \r\n Watch } from \"@stencil/core\";\r\nimport { StepperState } from \"../interfaces\";\r\n\r\n@Component({\r\n tag: 'ifx-step',\r\n styleUrl: 'step.scss',\r\n shadow: true\r\n})\r\n\r\nexport class Step {\r\n @Prop() complete?: boolean = false;\r\n @Prop() disabled?: boolean = false;\r\n @Prop({ mutable: true }) error?: boolean = false;\r\n @Prop({ reflect: false }) lastStep: boolean = false;\r\n @Prop() stepId: number = 1;\r\n @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \r\n showStepNumber: false, \r\n variant: 'default', \r\n indicatorPosition: 'left' };\r\n\r\n @State() active: boolean;\r\n @State() clickable: boolean = false;\r\n\r\n @Listen('ifxChange', { target: 'document' })\r\n onStepChange(event: CustomEvent) {\r\n const previousActiveStep = event.detail.previousActiveStep;\r\n if (previousActiveStep === this.stepId && this.error) {\r\n this.clickable = true;\r\n }\r\n } \r\n\r\n @Watch('stepperState')\r\n updateCurrentStep(newStepperState) {\r\n this.active = (newStepperState.activeStep === this.stepId)\r\n }\r\n\r\n @Watch('active')\r\n updateErrorState(){\r\n if (this.active) {\r\n this.error = false;\r\n }\r\n }\r\n\r\n\r\n handleStepClick() {\r\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable \|\| this.complete)) {\r\n this.stepperState.setActiveStep(this.stepId, true)\r\n } \r\n }\r\n \r\n handleStepKeyDown(event: KeyboardEvent) {\r\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable \|\| this.complete) && event.key === 'Enter') {\r\n this.stepperState.setActiveStep(this.stepId, true)\r\n } \r\n }\r\n \r\n stopOnClickPropogation(event: Event) {\r\n if (this.disabled) {\r\n event.stopPropagation();\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div aria-current = {this.active ? 'step': false}\r\n aria-disabled = {this.active \|\| this.complete ? false : true}\r\n onClick={ (e) => this.stopOnClickPropogation(e) }\r\n class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \r\n ${this.error ? 'error': ''}\r\n ${this.stepperState.variant}\r\n ${this.complete ? 'complete': ''}\r\n ${this.lastStep ? 'last-step': ''}\r\n indicator-${this.stepperState.indicatorPosition}\r\n ${this.active ? 'active' : ''}\r\n ${this.clickable ? 'clickable' : ''}\r\n ${this.disabled ? 'disabled': ''}`}>\r\n\r\n <div class = 'step-icon-wrapper'>\r\n {/* Left connector /}\r\n {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\r\n\r\n {\r\n (this.stepperState.variant !== 'compact' && (!this.error \|\| (this.error && this.active))) && \r\n <div class = 'step-icon'>\r\n {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\r\n {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\r\n {this.active && <span class = 'active-indic'></span>}\r\n </div>\r\n }\r\n\r\n {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningF16'></ifx-icon>}\r\n \r\n {/ Right connector /}\r\n {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\r\n </div>\r\n\r\n {\r\n / Step labels */\r\n (this.stepperState.variant !== 'compact' \|\| (this.stepperState.variant === 'compact' && (this.active \|\| this.stepId === this.stepperState.activeStep+1))) && \r\n <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \r\n class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \r\n onClick={() => { this.handleStepClick() }} \r\n onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\r\n\r\n {(this.stepperState.variant !== 'compact') && <slot/>}\r\n\r\n {this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : ''}\r\n {this.stepperState.variant === 'compact' && <slot/>}\r\n </div>\r\n }\r\n\r\n </div>\r\n );\r\n };\r\n}\r\n"]}

package/dist/collection/components/stepper/stepper.js CHANGED Viewed

@@ -125,10 +125,10 @@ export class Stepper {
         this.syncIfxSteps();
     }
     render() {
-        return (h("div", { key: 'b6ddc5830bc2c1a371411fa1ddeef157b940acd5', "aria-label": this.ariaLabel, "aria-current": this.ariaCurrent, role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` },
+        return (h("div", { key: '7a529875a281c722a74d58f109a31e6743a331df', "aria-label": this.ariaLabel, "aria-current": this.ariaCurrent, role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` },
         /* Progress bar for compact variant. */
         (this.variant === 'compact') &&
-            h("div", { key: '043992aa871a912d5f3326e2c8c263865d07c5b3', class: 'stepper-progress' }, h("div", { key: '901254c7f8f706e9541d79ecbbbfb0a37925dd73', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '7b2757662fb0acd26f47338fdbfce65a977f37ab', class: `stepper-wrapper` }, h("slot", { key: 'b4fd58e8b562c58c4837e5418e24739dc666f35a' }))));
+            h("div", { key: '62184eccbf9a14c2a2f1a1c8654336ef1d16981a', class: 'stepper-progress' }, h("div", { key: '002baf0e8c26d13b7b1a3cfc970cb35f874fad0a', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: 'b9d78e30894a1db1b05f3c4555e64be6cd4070b3', class: `stepper-wrapper` }, h("slot", { key: '69161109bcba147be42a8293b3e864fb2a2357f4' }))));
     }
     ;
     componentDidRender() {

package/dist/collection/components/stepper/stepper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EACD,SAAS,EACT,OAAO,EACP,KAAK,EAEL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAQzE,MAAM,OAAO,OAAO;IANpB;QAW6B,eAAU,GAAW,CAAC,CAAC;QACxC,sBAAiB,GAAsB,MAAM,CAAC;QAC9C,mBAAc,GAAa,KAAK,CAAC;QACjC,YAAO,GAAwC,SAAS,CAAC;QAOxD,oBAAe,GAAY,IAAI,CAAC;QAChC,mBAAc,GAAY,KAAK,CAAC;KA6J5C;IA1JG,YAAY,CAAC,KAAkB;QAC3B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,MAAM,kBAAkB,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,kBAAkB,GAAC,CAAC,CAAC,CAAC;QACpE,IAAI,kBAAkB,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,CAAC;YACrD,kBAAkB,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QACrD,CAAC;IACL,CAAC;IAGD,gBAAgB,CAAC,OAAe,EAAE,OAAe;QAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC5B,OAAO;QACX,CAAC;QACD,4CAA4C;QAC5C,IAAG,KAAK,CAAC,OAAO,GAAC,CAAC,CAAC,EAAE,CAAC;YAClB,IAAI,CAAC,KAAK,CAAC,OAAO,GAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;gBAC7B,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YACzC,CAAC;iBAAM,CAAC;gBACJ,6DAA6D;gBAC7D,IAAI,OAAO,GAAG,OAAO,EAAE,CAAC;oBACpB,IAAI,CAAC,GAAG,OAAO,CAAC;oBAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;oBAC7B,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,GAAC,CAAC,CAAC,CAAC,QAAQ;wBAAE,CAAC,EAAE,CAAC;oBAC1C,2CAA2C;oBAC3C,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;wBACR,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;oBAC9B,CAAC;yBAAM,CAAC;wBACJ,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;wBAC/B,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;oBACxB,CAAC;gBACL,CAAC;gBACD,6DAA6D;qBACxD,CAAC;oBACF,IAAI,CAAC,GAAG,OAAO,CAAC;oBAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;oBAC7B,OAAO,CAAC,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,CAAC,GAAC,CAAC,CAAC,CAAC,QAAQ;wBAAE,CAAC,EAAE,CAAC;oBACxD,IAAI,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;wBACtB,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;oBAC9B,CAAC;yBAAM,CAAC;wBACJ,IAAI,CAAC,aAAa,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;wBAC/B,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;oBACxB,CAAC;gBACL,CAAC;YACL,CAAC;QACL,CAAC;IACL,CAAC;IAED,aAAa,CAAC,UAAkB,EAAE,kBAA0B;QACxD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAC,UAAU,EAAE,UAAU;YACvC,kBAAkB,EAAE,kBAAkB;YACtC,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,cAAc,EAAE,IAAI,CAAC,cAAc;SACtC,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;IAChC,CAAC;IAED,QAAQ;QACJ,MAAM,KAAK,GAAmC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;QACnF,OAAO,KAAK,CAAC;IACjB,CAAC;IAGD,8BAA8B;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAA;QAC7B,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;QACxC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACpC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;QAC5B,CAAC;QACD,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC;IACnC,CAAC;IAGD,aAAa,CAAC,MAAc,EAAE,aAAsB,KAAK;QACrD,IAAI,CAAC,cAAc,GAAG,UAAU,CAAC;QACjC,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC;IAC7B,CAAC;IAED,8BAA8B;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,KAAK,CAAC,OAAO,CAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE;YAC5B,IAAI,MAAM,GAAC,CAAC,GAAG,IAAI,CAAC,UAAU;gBAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACzD,CAAC,CAAC,CAAC;IACP,CAAC;IAED,YAAY;QACR,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAA;QAC7B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACpC,MAAM,YAAY,GAAiB;gBAC/B,UAAU,EAAE,IAAI,CAAC,UAAU;gBAC3B,iBAAiB,EAAE,CAAC,IAAI,CAAC,iBAAiB,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;gBAC1E,cAAc,EAAE,IAAI,CAAC,cAAc;gBACnC,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;gBACjG,aAAa,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;aAC/C,CAAC;YACF,KAAK,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,YAAY,CAAC;QACzC,CAAC;IACL,CAAC;IAED,oBAAoB;QAChB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;IACrH,CAAC;IAGD,iBAAiB;QACb,IAAI,CAAC,8BAA8B,EAAE,CAAC;QACtC,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,8BAA8B,EAAE,CAAC;IAC1C,CAAC;IAED,KAAK,CAAC,gBAAgB;QAClB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YAClC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,aAAa,EAAE,MAAM,SAAS,CAAC,CAAA;QAClD,CAAC;QACD,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,mBAAmB;QACf,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,MAAM;QACF,OAAO,CACH,0EAAmB,IAAI,CAAC,SAAS,kBACf,IAAI,CAAC,WAAW,EAC9B,IAAI,EAAG,YAAY,EACnB,KAAK,EAAI,WAAW,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,GAAC,IAAI,CAAC,iBAAiB,CAAA,CAAC,CAAC,EAAE,EAAE;YAE9K,uCAAuC;YACvC,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC;gBAC5B,4DAAK,KAAK,EAAG,kBAAkB;oBAC3B,4DAAK,KAAK,EAAG,iBAAiB,IACzB,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,UAAU,EAAE,CACpE,CACJ;YAIV,4DAAK,KAAK,EAAI,iBAAiB;gBAC3B,8DAAQ,CACN,CACJ,CACT,CAAC;IACN,CAAC;IAAA,CAAC;IAEF,kBAAkB;QACd,+CAA+C;QAC/C,IAAI,IAAI,CAAC,OAAO,IAAI,SAAS,EAAE,CAAC;YAC5B,MAAM,WAAW,GAAgB,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;YACvF,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC;QAC7F,CAAC;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { h, \n Component, \n Element, \n Event, \n EventEmitter, \n Listen, \n Prop, \n State, \n Watch } from \"@stencil/core\";\nimport { StepperState } from \"./interfaces\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-stepper',\n styleUrl: 'stepper.scss',\n shadow: true\n})\n\nexport class Stepper {\n @Element() el: HTMLElement;\n\n @Event() ifxChange: EventEmitter;\n\n @Prop({ mutable: true }) activeStep: number = 1;\n @Prop() indicatorPosition?: 'left' \| 'right' = 'left';\n @Prop() showStepNumber?: boolean = false;\n @Prop() variant?: 'default' \| 'compact' \| 'vertical' = 'default';\n @Prop() ariaLabel: string \| null;\n @Prop() ariaCurrent: string \| null;\n\n\n\n @State() stepsCount: number;\n @State() shouldEmitEvent: boolean = true;\n @State() emittedByClick: boolean = false;\n\n @Listen('ifxChange') \n onStepChange(event: CustomEvent) {\n const steps = this.getSteps();\n const previousActiveStep = steps[event.detail.previousActiveStep-1];\n if (previousActiveStep && !previousActiveStep.complete) {\n previousActiveStep.setAttribute('error', 'true');\n }\n } \n\n @Watch('activeStep')\n handleActiveStep(newStep: number, oldStep: number) {\n const steps = this.getSteps();\n if (!this.shouldEmitEvent) {\n this.shouldEmitEvent = true;\n return;\n }\n // Skipping until the enabled step is found \n if(steps[newStep-1]) { \n if (!steps[newStep-1].disabled) {\n this.emitIfxChange(newStep, oldStep);\n } else {\n // If coming from higher step number to the lower step number\n if (newStep < oldStep) {\n let i = newStep;\n this.shouldEmitEvent = false;\n while (i >= 1 && steps[i-1].disabled) i--;\n // if all the steps are disabled no change.\n if (i < 1) {\n this.activeStep = oldStep;\n } else {\n this.emitIfxChange(i, oldStep);\n this.activeStep = i;\n }\n } \n // If coming from lower step number to the higher step number\n else {\n let i = newStep;\n this.shouldEmitEvent = false;\n while (i <= this.stepsCount && steps[i-1].disabled) i++;\n if (i > this.stepsCount) {\n this.activeStep = oldStep;\n } else {\n this.emitIfxChange(i, oldStep);\n this.activeStep = i;\n }\n }\n }\n }\n }\n \n emitIfxChange(activeStep: number, previousActiveStep: number) {\n this.ifxChange.emit({activeStep: activeStep, \n previousActiveStep: previousActiveStep, \n totalSteps: this.stepsCount,\n emittedByClick: this.emittedByClick\n });\n this.emittedByClick = false;\n }\n\n getSteps() {\n const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\n return steps;\n }\n\n\n addStepIdsToStepsAndCountSteps() {\n const steps = this.getSteps()\n steps[steps.length - 1].lastStep = true;\n for (let i = 0; i < steps.length; i++) {\n steps[i].stepId = i + 1;\n }\n this.stepsCount = steps.length;\n }\n\n\n setActiveStep(stepId: number, setByClick: boolean = false) {\n this.emittedByClick = setByClick;\n this.activeStep = stepId;\n }\n\n setStepsBeforeActiveToComplete() {\n const steps = this.getSteps();\n steps.forEach( (step, stepId) => {\n if (stepId+1 < this.activeStep) step.complete = true;\n });\n }\n\n syncIfxSteps() {\n const steps = this.getSteps()\n for (let i = 0; i < steps.length; i++) {\n const stepperState: StepperState = { \n activeStep: this.activeStep,\n indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \n showStepNumber: this.showStepNumber, \n variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \n setActiveStep: this.setActiveStep.bind(this)\n };\n steps[i].stepperState = stepperState;\n }\n }\n\n setInitialActiveStep() {\n this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\n }\n\n\n componentWillLoad() {\n this.addStepIdsToStepsAndCountSteps();\n this.setInitialActiveStep();\n this.setStepsBeforeActiveToComplete();\n }\n \n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-stepper', await framework)\n }\n this.syncIfxSteps();\n }\n\n componentWillUpdate() {\n this.syncIfxSteps();\n }\n\n render() {\n return (\n <div aria-label = {this.ariaLabel}\n aria-current={this.ariaCurrent}\n role = 'navigation' \n class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\n {\n /* Progress bar for compact variant. /\n (this.variant === 'compact') && \n <div class = 'stepper-progress'>\n <div class = 'progress-detail'>\n {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\n </div>\n </div>\n }\n \n {/ Slot for ifx-steps. /}\n <div class = {`stepper-wrapper`}>\n <slot />\n </div>\n </div>\n );\n };\n\n componentDidRender() {\n / Updating progress bar in compact version. /\n if (this.variant == 'compact') {\n const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\n progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) 100}%`);\n }\n }\n}\n"]}
1	+ {"version":3,"file":"stepper.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, \r\n Component, \r\n Element, \r\n Event, \r\n EventEmitter, \r\n Listen, \r\n Prop, \r\n State, \r\n Watch } from \"@stencil/core\";\r\nimport { StepperState } from \"./interfaces\";\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-stepper',\r\n styleUrl: 'stepper.scss',\r\n shadow: true\r\n})\r\n\r\nexport class Stepper {\r\n @Element() el: HTMLElement;\r\n\r\n @Event() ifxChange: EventEmitter;\r\n\r\n @Prop({ mutable: true }) activeStep: number = 1;\r\n @Prop() indicatorPosition?: 'left' \| 'right' = 'left';\r\n @Prop() showStepNumber?: boolean = false;\r\n @Prop() variant?: 'default' \| 'compact' \| 'vertical' = 'default';\r\n @Prop() ariaLabel: string \| null;\r\n @Prop() ariaCurrent: string \| null;\r\n\r\n\r\n\r\n @State() stepsCount: number;\r\n @State() shouldEmitEvent: boolean = true;\r\n @State() emittedByClick: boolean = false;\r\n\r\n @Listen('ifxChange') \r\n onStepChange(event: CustomEvent) {\r\n const steps = this.getSteps();\r\n const previousActiveStep = steps[event.detail.previousActiveStep-1];\r\n if (previousActiveStep && !previousActiveStep.complete) {\r\n previousActiveStep.setAttribute('error', 'true');\r\n }\r\n } \r\n\r\n @Watch('activeStep')\r\n handleActiveStep(newStep: number, oldStep: number) {\r\n const steps = this.getSteps();\r\n if (!this.shouldEmitEvent) {\r\n this.shouldEmitEvent = true;\r\n return;\r\n }\r\n // Skipping until the enabled step is found \r\n if(steps[newStep-1]) { \r\n if (!steps[newStep-1].disabled) {\r\n this.emitIfxChange(newStep, oldStep);\r\n } else {\r\n // If coming from higher step number to the lower step number\r\n if (newStep < oldStep) {\r\n let i = newStep;\r\n this.shouldEmitEvent = false;\r\n while (i >= 1 && steps[i-1].disabled) i--;\r\n // if all the steps are disabled no change.\r\n if (i < 1) {\r\n this.activeStep = oldStep;\r\n } else {\r\n this.emitIfxChange(i, oldStep);\r\n this.activeStep = i;\r\n }\r\n } \r\n // If coming from lower step number to the higher step number\r\n else {\r\n let i = newStep;\r\n this.shouldEmitEvent = false;\r\n while (i <= this.stepsCount && steps[i-1].disabled) i++;\r\n if (i > this.stepsCount) {\r\n this.activeStep = oldStep;\r\n } else {\r\n this.emitIfxChange(i, oldStep);\r\n this.activeStep = i;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n \r\n emitIfxChange(activeStep: number, previousActiveStep: number) {\r\n this.ifxChange.emit({activeStep: activeStep, \r\n previousActiveStep: previousActiveStep, \r\n totalSteps: this.stepsCount,\r\n emittedByClick: this.emittedByClick\r\n });\r\n this.emittedByClick = false;\r\n }\r\n\r\n getSteps() {\r\n const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\r\n return steps;\r\n }\r\n\r\n\r\n addStepIdsToStepsAndCountSteps() {\r\n const steps = this.getSteps()\r\n steps[steps.length - 1].lastStep = true;\r\n for (let i = 0; i < steps.length; i++) {\r\n steps[i].stepId = i + 1;\r\n }\r\n this.stepsCount = steps.length;\r\n }\r\n\r\n\r\n setActiveStep(stepId: number, setByClick: boolean = false) {\r\n this.emittedByClick = setByClick;\r\n this.activeStep = stepId;\r\n }\r\n\r\n setStepsBeforeActiveToComplete() {\r\n const steps = this.getSteps();\r\n steps.forEach( (step, stepId) => {\r\n if (stepId+1 < this.activeStep) step.complete = true;\r\n });\r\n }\r\n\r\n syncIfxSteps() {\r\n const steps = this.getSteps()\r\n for (let i = 0; i < steps.length; i++) {\r\n const stepperState: StepperState = { \r\n activeStep: this.activeStep,\r\n indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \r\n showStepNumber: this.showStepNumber, \r\n variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \r\n setActiveStep: this.setActiveStep.bind(this)\r\n };\r\n steps[i].stepperState = stepperState;\r\n }\r\n }\r\n\r\n setInitialActiveStep() {\r\n this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\r\n }\r\n\r\n\r\n componentWillLoad() {\r\n this.addStepIdsToStepsAndCountSteps();\r\n this.setInitialActiveStep();\r\n this.setStepsBeforeActiveToComplete();\r\n }\r\n \r\n async componentDidLoad() {\r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-stepper', await framework)\r\n }\r\n this.syncIfxSteps();\r\n }\r\n\r\n componentWillUpdate() {\r\n this.syncIfxSteps();\r\n }\r\n\r\n render() {\r\n return (\r\n <div aria-label = {this.ariaLabel}\r\n aria-current={this.ariaCurrent}\r\n role = 'navigation' \r\n class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\r\n {\r\n /* Progress bar for compact variant. /\r\n (this.variant === 'compact') && \r\n <div class = 'stepper-progress'>\r\n <div class = 'progress-detail'>\r\n {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\r\n </div>\r\n </div>\r\n }\r\n \r\n {/ Slot for ifx-steps. /}\r\n <div class = {`stepper-wrapper`}>\r\n <slot />\r\n </div>\r\n </div>\r\n );\r\n };\r\n\r\n componentDidRender() {\r\n / Updating progress bar in compact version. /\r\n if (this.variant == 'compact') {\r\n const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\r\n progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) 100}%`);\r\n }\r\n }\r\n}\r\n"]}

package/dist/collection/components/stepper/stepper.stories.js CHANGED Viewed

@@ -133,10 +133,10 @@ export default {
                 category: 'custom events',
                 type: {
                     summary: 'Framework integration',
-                    detail: `
-React: onIfxChange={handleChange}
-Vue:@ifxChange="handleChange"
-Angular:(ifxChange)="handleChange()"
+                    detail: `
+React: onIfxChange={handleChange}
+Vue:@ifxChange="handleChange"
+Angular:(ifxChange)="handleChange()"
 VanillaJs:.addEventListener("ifxChange", (event) => {//handle change});`,
                 }
             }
@@ -145,14 +145,14 @@ VanillaJs:.addEventListener("ifxChange", (event) => {//handle change});`,
 };
 const Template = (args) => {
     const wrapper = document.createElement('div');
-    wrapper.innerHTML = `
-<ifx-stepper
-active-step=${args.activeStep}
-aria-label="${args.ariaLabel}"
-aria-current="${args.ariaCurrent}"
-${args.variant === 'compact' ? `indicator-position=${args.indicatorPosition}` : ''}
-${args.variant === 'default' ? `show-step-number=${args.showStepNumber}` : ''}
-variant=${args.variant}>
+    wrapper.innerHTML = `
+<ifx-stepper
+active-step=${args.activeStep}
+aria-label="${args.ariaLabel}"
+aria-current="${args.ariaCurrent}"
+${args.variant === 'compact' ? `indicator-position=${args.indicatorPosition}` : ''}
+${args.variant === 'default' ? `show-step-number=${args.showStepNumber}` : ''}
+variant=${args.variant}>
     ${(() => {
         return Array.from({ length: args.amountOfSteps }, (_, stepId) => {
             const step = document.createElement('ifx-step');
@@ -168,7 +168,7 @@ variant=${args.variant}>
             }
             return step.outerHTML;
         }).join(`\n    `);
-    })()}
+    })()}
 </ifx-stepper>`;
     const stepper = wrapper.querySelector('ifx-stepper');
     stepper.addEventListener('ifxChange', action('ifxChange'));

package/dist/collection/components/stepper/stepper.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"stepper.stories.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Stepper',\n args: {\n amountOfSteps: 5,\n activeStep: 2,\n disabled: false,\n indicatorPosition: 'left',\n showStepNumber: false,\n variant: 'default',\n error: false,\n completeStep: false,\n ariaLabel: \"\",\n ariaCurrent: \"\"\n },\n argTypes: {\n activeStep: {\n control: {\n type: 'number',\n min: 1\n },\n description: 'Indicates the current active step.',\n table: {\n category: 'ifx-stepper props',\n defaultValue: { summary: 2 }\n }\n },\n amountOfSteps: {\n name: 'Amount of Steps',\n control: 'number',\n description: 'Indicates the number of steps in stepper in a story.',\n table: {\n category: 'story controls',\n defaultValue: { summary: 5 }\n }\n },\n completeStep: {\n name: 'complete',\n description: 'A boolean prop to mark one or more steps as complete.<br>Usage:',\n control: 'boolean',\n table: {\n category: 'ifx-step props',\n defaultValue: { summary: false },\n type: {\n summary: 'boolean'\n }\n }\n },\n disabled: {\n name: 'disabled',\n control: 'boolean',\n description: 'A boolean prop to make one or more steps unclickable.',\n table: {\n category: 'ifx-step props',\n defaultValue: { summary: false },\n type: {\n summary: `<ifx-step disabled=true> </ifx-step>`\n }\n },\n if: { arg: 'variant', eq: 'default' }\n },\n error: {\n control: 'boolean',\n description: 'Sets the error state for a step.',\n table: {\n category: 'ifx-step props',\n type: {\n summary: 'boolean'\n }\n },\n },\n indicatorPosition: {\n control: 'radio',\n defaultValue: { summary: 'left' },\n description: 'Allows to swap the progress bar and steps\\' label.',\n options: ['left', 'right'],\n if: { arg: 'variant', eq: 'compact' },\n table: {\n category: 'ifx-stepper props'\n }\n },\n showStepNumber: {\n control: 'boolean',\n defaultValue: { summary: 'false' },\n description: 'Shows the step number when set true.',\n if: { arg: 'variant', eq: 'default' },\n table: {\n category: 'ifx-stepper props'\n }\n },\n variant: {\n options: ['default', 'compact', 'vertical'],\n defaultValue: { summary: 'default' },\n description: 'Allows to switch between default and compact variant.',\n control: 'radio',\n table: {\n category: 'ifx-stepper props',\n type: {\n summary: 'default \| compact \| vertical'\n },\n }\n },\n ariaLabel: {\n description: 'Aria label of the Stepper.',\n control: 'text',\n table: {\n category: 'ARIA Labels',\n defaultValue: {\n summary: '',\n },\n type: {\n summary: 'string',\n },\n },\n },\n ariaCurrent: {\n description: 'Aria current of the Stepper.',\n control: 'text',\n table: {\n category: 'ARIA Labels',\n defaultValue: {\n summary: '',\n },\n type: {\n summary: 'string',\n },\n },\n },\n ifxChange: {\n action: 'ifxChange',\n description: 'A custom event emitted when active step changes.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail: `\nReact: onIfxChange={handleChange}\nVue:@ifxChange=\"handleChange\"\nAngular:(ifxChange)=\"handleChange()\"\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});`,\n }\n }\n }\n }\n}\n\nconst Template = (args) => {\n const wrapper = document.createElement('div');\n wrapper.innerHTML = `\n<ifx-stepper \nactive-step=${args.activeStep} \naria-label=\"${args.ariaLabel}\"\naria-current=\"${args.ariaCurrent}\"\n${args.variant === 'compact' ? `indicator-position=${args.indicatorPosition}` : ''} \n${args.variant === 'default' ? `show-step-number=${args.showStepNumber}` : ''} \nvariant=${args.variant}>\n ${(() => {\n return Array.from({ length: args.amountOfSteps }, (_, stepId) => {\n const step = document.createElement('ifx-step');\n step.innerHTML = `Step Label ${stepId + 1}`;\n if (args.disabled && stepId === 0) {\n step.setAttribute('disabled', 'true');\n }\n if (args.error && stepId === 0) {\n step.setAttribute('error', 'true');\n }\n if (args.completeStep && stepId === 2) {\n step.setAttribute('complete', args.completeStep);\n }\n return step.outerHTML;\n }).join(`\\n `)\n })()\n }\n</ifx-stepper>`;\n\n const stepper = wrapper.querySelector('ifx-stepper');\n stepper.addEventListener('ifxChange', action('ifxChange'));\n\n return stepper;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n variant: 'default'\n};\n\nexport const Compact = Template.bind({});\nCompact.args = {\n variant: 'compact'\n};\n\nexport const Vertical = Template.bind({});\nVertical.args = {\n variant: 'vertical'\n}\n"]}
1	+ {"version":3,"file":"stepper.stories.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\r\n\r\nexport default {\r\n title: 'Components/Stepper',\r\n args: {\r\n amountOfSteps: 5,\r\n activeStep: 2,\r\n disabled: false,\r\n indicatorPosition: 'left',\r\n showStepNumber: false,\r\n variant: 'default',\r\n error: false,\r\n completeStep: false,\r\n ariaLabel: \"\",\r\n ariaCurrent: \"\"\r\n },\r\n argTypes: {\r\n activeStep: {\r\n control: {\r\n type: 'number',\r\n min: 1\r\n },\r\n description: 'Indicates the current active step.',\r\n table: {\r\n category: 'ifx-stepper props',\r\n defaultValue: { summary: 2 }\r\n }\r\n },\r\n amountOfSteps: {\r\n name: 'Amount of Steps',\r\n control: 'number',\r\n description: 'Indicates the number of steps in stepper in a story.',\r\n table: {\r\n category: 'story controls',\r\n defaultValue: { summary: 5 }\r\n }\r\n },\r\n completeStep: {\r\n name: 'complete',\r\n description: 'A boolean prop to mark one or more steps as complete.<br>Usage:',\r\n control: 'boolean',\r\n table: {\r\n category: 'ifx-step props',\r\n defaultValue: { summary: false },\r\n type: {\r\n summary: 'boolean'\r\n }\r\n }\r\n },\r\n disabled: {\r\n name: 'disabled',\r\n control: 'boolean',\r\n description: 'A boolean prop to make one or more steps unclickable.',\r\n table: {\r\n category: 'ifx-step props',\r\n defaultValue: { summary: false },\r\n type: {\r\n summary: `<ifx-step disabled=true> </ifx-step>`\r\n }\r\n },\r\n if: { arg: 'variant', eq: 'default' }\r\n },\r\n error: {\r\n control: 'boolean',\r\n description: 'Sets the error state for a step.',\r\n table: {\r\n category: 'ifx-step props',\r\n type: {\r\n summary: 'boolean'\r\n }\r\n },\r\n },\r\n indicatorPosition: {\r\n control: 'radio',\r\n defaultValue: { summary: 'left' },\r\n description: 'Allows to swap the progress bar and steps\\' label.',\r\n options: ['left', 'right'],\r\n if: { arg: 'variant', eq: 'compact' },\r\n table: {\r\n category: 'ifx-stepper props'\r\n }\r\n },\r\n showStepNumber: {\r\n control: 'boolean',\r\n defaultValue: { summary: 'false' },\r\n description: 'Shows the step number when set true.',\r\n if: { arg: 'variant', eq: 'default' },\r\n table: {\r\n category: 'ifx-stepper props'\r\n }\r\n },\r\n variant: {\r\n options: ['default', 'compact', 'vertical'],\r\n defaultValue: { summary: 'default' },\r\n description: 'Allows to switch between default and compact variant.',\r\n control: 'radio',\r\n table: {\r\n category: 'ifx-stepper props',\r\n type: {\r\n summary: 'default \| compact \| vertical'\r\n },\r\n }\r\n },\r\n ariaLabel: {\r\n description: 'Aria label of the Stepper.',\r\n control: 'text',\r\n table: {\r\n category: 'ARIA Labels',\r\n defaultValue: {\r\n summary: '',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n ariaCurrent: {\r\n description: 'Aria current of the Stepper.',\r\n control: 'text',\r\n table: {\r\n category: 'ARIA Labels',\r\n defaultValue: {\r\n summary: '',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n ifxChange: {\r\n action: 'ifxChange',\r\n description: 'A custom event emitted when active step changes.',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail: `\r\nReact: onIfxChange={handleChange}\r\nVue:@ifxChange=\"handleChange\"\r\nAngular:(ifxChange)=\"handleChange()\"\r\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});`,\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\nconst Template = (args) => {\r\n const wrapper = document.createElement('div');\r\n wrapper.innerHTML = `\r\n<ifx-stepper \r\nactive-step=${args.activeStep} \r\naria-label=\"${args.ariaLabel}\"\r\naria-current=\"${args.ariaCurrent}\"\r\n${args.variant === 'compact' ? `indicator-position=${args.indicatorPosition}` : ''} \r\n${args.variant === 'default' ? `show-step-number=${args.showStepNumber}` : ''} \r\nvariant=${args.variant}>\r\n ${(() => {\r\n return Array.from({ length: args.amountOfSteps }, (_, stepId) => {\r\n const step = document.createElement('ifx-step');\r\n step.innerHTML = `Step Label ${stepId + 1}`;\r\n if (args.disabled && stepId === 0) {\r\n step.setAttribute('disabled', 'true');\r\n }\r\n if (args.error && stepId === 0) {\r\n step.setAttribute('error', 'true');\r\n }\r\n if (args.completeStep && stepId === 2) {\r\n step.setAttribute('complete', args.completeStep);\r\n }\r\n return step.outerHTML;\r\n }).join(`\\n `)\r\n })()\r\n }\r\n</ifx-stepper>`;\r\n\r\n const stepper = wrapper.querySelector('ifx-stepper');\r\n stepper.addEventListener('ifxChange', action('ifxChange'));\r\n\r\n return stepper;\r\n};\r\n\r\nexport const Default = Template.bind({});\r\nDefault.args = {\r\n variant: 'default'\r\n};\r\n\r\nexport const Compact = Template.bind({});\r\nCompact.args = {\r\n variant: 'compact'\r\n};\r\n\r\nexport const Vertical = Template.bind({});\r\nVertical.args = {\r\n variant: 'vertical'\r\n}\r\n"]}

package/dist/collection/components/switch/switch.js CHANGED Viewed

@@ -70,7 +70,7 @@ export class Switch {
     //   this.internals.setFormValue(null);
     // }
     render() {
-        return (h("div", { key: 'dac7ec48eba63ea4fea619b38bc2d42050335fb3', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": "switch-label", onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: '4e331d64ea1bd5c2a76b730523c250add430e620', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: '7f9d1690039ed6a4a99e4204c0358088aa1f459a', class: "switch__checkbox-wrapper" }, h("input", { key: '9b1b492b35cd3bf74143370bbdf79dc97d456893', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '27559d56f6fb75e90ac15590245668af0b1ab447', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '783db5d3a6d1619b96ac97501bb889bb1f6a75bc', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'ee10d23ac2b7d8d693a3ff8a85fb7af9b09c3445', htmlFor: "switch" }, h("slot", { key: '3b7b243ac57f43997f0111500e59667c2b8c75be', onSlotchange: () => this.toggleLabelGap() })))));
+        return (h("div", { key: 'd34cf1b1bad0bb7356b6b76ecff9b5d60110ee21', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": "switch-label", onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: 'd8b3d3252180cb7f10905220dcd599308193e154', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: 'f8aa01d8c06448133f34251f20602ec5a04044d1', class: "switch__checkbox-wrapper" }, h("input", { key: '6a207dcaf0a2b3ce55c1abc753ea73bd62d3df62', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '5872b3540d8c3e04552855ebfbf3a9e86129dec5', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '0f8606cfa3c1925b30f5a38e7b7a22687704d876', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '9f11274ce2123997f6990cec8f93fd9e2f0b6d31', htmlFor: "switch" }, h("slot", { key: '0266c7c9232ca8adcae27ea6e65471d3e76e8c83', onSlotchange: () => this.toggleLabelGap() })))));
     }
     static get is() { return "ifx-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/switch/switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-switch',\n styleUrl: 'switch.scss',\n shadow: true,\n // formAssociated: true\n})\nexport class Switch {\n @Prop() checked: boolean = false;\n @Prop() name: string = '';\n @Prop() disabled: boolean = false;\n @Prop() value: string;\n @State() internalChecked: boolean = false;\n\n @AttachInternals() internals: ElementInternals;\n\n @Element() el: HTMLIfxSwitchElement;\n\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n @Method()\n async isChecked(): Promise<boolean> {\n return this.internalChecked;\n }\n\n componentWillLoad() {\n this.internalChecked = this.checked;\n }\n \n\n toggleLabelGap() {\n const slot = this.el.shadowRoot.querySelector('slot');\n const container = this.el.shadowRoot.querySelector('.container');\n if (slot.assignedNodes().length) {\n container.classList.add('gap')\n } else { \n container.classList.remove('gap')\n }\n }\n \n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-switch', await framework)\n }\n this.toggleLabelGap();\n }\n \n @Watch('checked')\n valueChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n this.internalChecked = newValue;\n }\n }\n\n toggleSwitch() {\n if (this.disabled) return;\n this.internalChecked = !this.internalChecked;\n\n if (this.internalChecked) {\n if (this.value !== undefined) {\n //this.internals.setFormValue(this.value);\n } else {\n //this.internals.setFormValue(\"on\")\n }\n } else {\n //this.internals.setFormValue(null)\n }\n\n this.ifxChange.emit(this.internalChecked);\n }\n\n handleKeyDown(event: KeyboardEvent) {\n if (this.disabled) return;\n // If the pressed key is either 'Enter' or 'Space' \n if (event.key === 'Enter' \|\| event.key === ' ') {\n this.toggleSwitch();\n }\n }\n\n /*\n Callback for form association.\n * Called whenever the form is reset.\n /\n // formResetCallback() {\n // this.internals.setFormValue(null);\n // }\n\n render() {\n return (\n <div\n class=\"container\"\n role=\"switch\"\n aria-checked={this.internalChecked ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-labelledby=\"switch-label\"\n onClick={() => this.toggleSwitch()}\n onKeyDown={(event) => this.handleKeyDown(event)}\n >\n {/ Checkbox /}\n <div \n class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n tabindex=\"0\"\n >\n <div class=\"switch__checkbox-wrapper\">\n <input type=\"checkbox\" hidden\n name={this.name}\n disabled={this.disabled}\n checked={this.internalChecked}\n value={`${this.value}`} />\n <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n </div>\n </div >\n\n {/ Label */}\n <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n <label htmlFor=\"switch\">\n <slot onSlotchange={() => this.toggleLabelGap()} />\n </label>\n </div>\n </div>\n )\n\n }\n}\n"]}
1	+ {"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AttachInternals, Method } from '@stencil/core';\r\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-switch',\r\n styleUrl: 'switch.scss',\r\n shadow: true,\r\n // formAssociated: true\r\n})\r\nexport class Switch {\r\n @Prop() checked: boolean = false;\r\n @Prop() name: string = '';\r\n @Prop() disabled: boolean = false;\r\n @Prop() value: string;\r\n @State() internalChecked: boolean = false;\r\n\r\n @AttachInternals() internals: ElementInternals;\r\n\r\n @Element() el: HTMLIfxSwitchElement;\r\n\r\n @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\r\n\r\n @Method()\r\n async isChecked(): Promise<boolean> {\r\n return this.internalChecked;\r\n }\r\n\r\n componentWillLoad() {\r\n this.internalChecked = this.checked;\r\n }\r\n \r\n\r\n toggleLabelGap() {\r\n const slot = this.el.shadowRoot.querySelector('slot');\r\n const container = this.el.shadowRoot.querySelector('.container');\r\n if (slot.assignedNodes().length) {\r\n container.classList.add('gap')\r\n } else { \r\n container.classList.remove('gap')\r\n }\r\n }\r\n \r\n async componentDidLoad() {\r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-switch', await framework)\r\n }\r\n this.toggleLabelGap();\r\n }\r\n \r\n @Watch('checked')\r\n valueChanged(newValue: boolean, oldValue: boolean) {\r\n if (newValue !== oldValue) {\r\n this.internalChecked = newValue;\r\n }\r\n }\r\n\r\n toggleSwitch() {\r\n if (this.disabled) return;\r\n this.internalChecked = !this.internalChecked;\r\n\r\n if (this.internalChecked) {\r\n if (this.value !== undefined) {\r\n //this.internals.setFormValue(this.value);\r\n } else {\r\n //this.internals.setFormValue(\"on\")\r\n }\r\n } else {\r\n //this.internals.setFormValue(null)\r\n }\r\n\r\n this.ifxChange.emit(this.internalChecked);\r\n }\r\n\r\n handleKeyDown(event: KeyboardEvent) {\r\n if (this.disabled) return;\r\n // If the pressed key is either 'Enter' or 'Space' \r\n if (event.key === 'Enter' \|\| event.key === ' ') {\r\n this.toggleSwitch();\r\n }\r\n }\r\n\r\n /*\r\n Callback for form association.\r\n * Called whenever the form is reset.\r\n /\r\n // formResetCallback() {\r\n // this.internals.setFormValue(null);\r\n // }\r\n\r\n render() {\r\n return (\r\n <div\r\n class=\"container\"\r\n role=\"switch\"\r\n aria-checked={this.internalChecked ? 'true' : 'false'}\r\n aria-disabled={this.disabled ? 'true' : 'false'}\r\n aria-labelledby=\"switch-label\"\r\n onClick={() => this.toggleSwitch()}\r\n onKeyDown={(event) => this.handleKeyDown(event)}\r\n >\r\n {/ Checkbox /}\r\n <div \r\n class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\r\n tabindex=\"0\"\r\n >\r\n <div class=\"switch__checkbox-wrapper\">\r\n <input type=\"checkbox\" hidden\r\n name={this.name}\r\n disabled={this.disabled}\r\n checked={this.internalChecked}\r\n value={`${this.value}`} />\r\n <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\r\n </div>\r\n </div >\r\n\r\n {/ Label */}\r\n <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\r\n <label htmlFor=\"switch\">\r\n <slot onSlotchange={() => this.toggleLabelGap()} />\r\n </label>\r\n </div>\r\n </div>\r\n )\r\n\r\n }\r\n}\r\n"]}

package/dist/collection/components/switch/switch.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"switch.stories.js","sourceRoot":"","sources":["../../../src/components/switch/switch.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Switch',\n tags: ['autodocs'],\n\n args: {\n label: 'Switch',\n checked: false,\n name: 'switch',\n value: 'switch',\n disabled: false,\n },\n argTypes: {\n label: {\n name: 'Label of Switch',\n description: 'Set the label of <ifx-switch>.',\n table: {\n category: 'story controls',\n }\n },\n name: {\n description: 'Name of the element, that is used as reference when a form is submitted.',\n table: {\n category: 'ifx-switch props',\n type: {\n summary: 'string'\n }\n }\n },\n checked: {\n name: 'checked',\n description: 'Set the checked state of the switch.',\n table: {\n category: 'ifx-switch props',\n defaultValue: {\n summary: 'false'\n },\n type: {\n summary: 'boolean'\n }\n }\n },\n value: {\n description: 'The value that gets submitted, when the radio button is checked.',\n table: {\n category: 'ifx-switch props',\n type: {\n summary: 'string'\n }\n }\n },\n disabled: {\n description: 'The value that gets submitted, when the radio button is checked.',\n table: {\n category: 'ifx-switch props',\n defaultValue: {\n summary: 'false'\n },\n type: {\n summary: 'boolean'\n }\n }\n },\n ifxChange: {\n description: 'Custom event emitted on change.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n },\n },\n action: 'ifxChange',\n },\n },\n\n\n\n}\n\nconst DefaultTemplate = args => {\n const element = document.createElement('ifx-switch') as HTMLIfxSwitchElement;\n\n // Set the attributes\n element.setAttribute('checked', args.checked);\n element.setAttribute('name', args.name);\n element.setAttribute('value', args.value);\n element.setAttribute('disabled', args.disabled);\n\n // Add the event listener\n // element.addEventListener('ifxChange', action('ifxChange'));\n // Inside your story, add an event listener for the custom event\n element.addEventListener('ifxChange', (event: Event) => {\n const customEvent = event as CustomEvent;\n const newValue = customEvent.detail;\n\n action('ifxChange')(customEvent);\n\n args.value = newValue;\n });\n\n const slotContent = document.createTextNode(args.label);\n element.appendChild(slotContent);\n\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
1	+ {"version":3,"file":"switch.stories.js","sourceRoot":"","sources":["../../../src/components/switch/switch.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,OAAO,EAAE,KAAK;QACd,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;aAC3B;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,0EAA0E;YACvF,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,sCAAsC;YACnD,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,kEAAkE;YAC/E,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,kEAAkE;YAC/E,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,iCAAiC;YAC9C,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,iLAAiL;iBACpL;aACF;YACD,MAAM,EAAE,WAAW;SACpB;KACF;CAIF,CAAA;AAED,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAyB,CAAC;IAE7E,qBAAqB;IACrB,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACxC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAEhD,yBAAyB;IACzB,8DAA8D;IAC9D,gEAAgE;IAChE,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAY,EAAE,EAAE;QACrD,MAAM,WAAW,GAAG,KAAoB,CAAC;QACzC,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC;QAEpC,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CAAC;QAEjC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACxD,OAAO,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAEjC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\r\n\r\nexport default {\r\n title: 'Components/Switch',\r\n tags: ['autodocs'],\r\n\r\n args: {\r\n label: 'Switch',\r\n checked: false,\r\n name: 'switch',\r\n value: 'switch',\r\n disabled: false,\r\n },\r\n argTypes: {\r\n label: {\r\n name: 'Label of Switch',\r\n description: 'Set the label of <ifx-switch>.',\r\n table: {\r\n category: 'story controls',\r\n }\r\n },\r\n name: {\r\n description: 'Name of the element, that is used as reference when a form is submitted.',\r\n table: {\r\n category: 'ifx-switch props',\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n checked: {\r\n name: 'checked',\r\n description: 'Set the checked state of the switch.',\r\n table: {\r\n category: 'ifx-switch props',\r\n defaultValue: {\r\n summary: 'false'\r\n },\r\n type: {\r\n summary: 'boolean'\r\n }\r\n }\r\n },\r\n value: {\r\n description: 'The value that gets submitted, when the radio button is checked.',\r\n table: {\r\n category: 'ifx-switch props',\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n disabled: {\r\n description: 'The value that gets submitted, when the radio button is checked.',\r\n table: {\r\n category: 'ifx-switch props',\r\n defaultValue: {\r\n summary: 'false'\r\n },\r\n type: {\r\n summary: 'boolean'\r\n }\r\n }\r\n },\r\n ifxChange: {\r\n description: 'Custom event emitted on change.',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail:\r\n 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\r\n },\r\n },\r\n action: 'ifxChange',\r\n },\r\n },\r\n\r\n\r\n\r\n}\r\n\r\nconst DefaultTemplate = args => {\r\n const element = document.createElement('ifx-switch') as HTMLIfxSwitchElement;\r\n\r\n // Set the attributes\r\n element.setAttribute('checked', args.checked);\r\n element.setAttribute('name', args.name);\r\n element.setAttribute('value', args.value);\r\n element.setAttribute('disabled', args.disabled);\r\n\r\n // Add the event listener\r\n // element.addEventListener('ifxChange', action('ifxChange'));\r\n // Inside your story, add an event listener for the custom event\r\n element.addEventListener('ifxChange', (event: Event) => {\r\n const customEvent = event as CustomEvent;\r\n const newValue = customEvent.detail;\r\n\r\n action('ifxChange')(customEvent);\r\n\r\n args.value = newValue;\r\n });\r\n\r\n const slotContent = document.createTextNode(args.label);\r\n element.appendChild(slotContent);\r\n\r\n return element;\r\n};\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\n"]}