npm - @infineon/infineon-design-system-stencil - Versions diffs - 37.12.1--canary.1723.be44e857f2b42e0327aa3d19580a6f098c7b4b26.0 → 37.12.1--canary.1987.bda20a6ce4d26b913f488aa997aee9596c4d12fd.0 - Mend

@infineon/infineon-design-system-stencil 37.12.1--canary.1723.be44e857f2b42e0327aa3d19580a6f098c7b4b26.0 → 37.12.1--canary.1987.bda20a6ce4d26b913f488aa997aee9596c4d12fd.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 (268) hide show

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

@@ -107,6 +107,19 @@ export default {
                 type: { summary: 'string' }
             }
         },
+        ariaLabel: {
+            description: 'Aria label of the Slider.',
+            control: 'text',
+            table: {
+                category: 'ARIA Labels',
+                defaultValue: {
+                    summary: "",
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
         ifxChange: {
             action: 'ifxChange',
             description: 'Custom event emitted on input change.',
@@ -129,6 +142,7 @@ const Template = args => {
     sliderElement.setAttribute('min-value-handle', args.minValueHandle);
     sliderElement.setAttribute('max-value-handle', args.maxValueHandle);
     sliderElement.setAttribute('type', args.type);
+    sliderElement.setAttribute('aria-label', args.ariaLabel);
     if (args.showPercentage) {
         sliderElement.setAttribute('show-percentage', 'true');
     }

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 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 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';\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"]}

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

@@ -14,8 +14,8 @@ export class Spinner {
         }
     }
     render() {
-        return (h("div", { key: '7cec3ef86795185d14979ea67bb02b94ca428b07', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: 'd8dea5acb66bde0f42beb7fe9ee69d887d5ca178', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
-            && h("div", { key: '51decc3e682ab5a2bee56c06d86663865acbf42b', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: 'dd0f03cea52f1297d5f46939d2f7d205d846fe80', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'ceed7284918f1a9efc1e29f84b986088729cd89e', id: "spinner/conductor" }, h("path", { key: 'a0982b7a458375bcab0d8d6ebb635f6901bca7b1', 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: '739612b53cb4d928a3cadc7220f2cd1b146409f2', role: "status", "aria-label": this.ariaLabel || "Loading", class: this.getClassNames() }, h("div", { key: '0bffb5f6bf4cf87d65c2e93682282727ed96713a', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
+            && h("div", { key: '098a9dcdfdaa30c803c20985dbeb7e6bbf0fdf95', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: 'c0db672797c60cc95cc9b2acdabc094708656d0a', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '0e6d804208413e76014174e19ff1b91af6eefd78', id: "spinner/conductor" }, h("path", { key: '0d78b554678bcc544ecb7f8ae77071c403f254e3', 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"
@@ -96,6 +96,25 @@ export class Spinner {
                 "attribute": "inverted",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-label",
+                "reflect": false
             }
         };
     }

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;~~KAqCnC~~;~~IAnCC~~,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,~~0EAAgB~~,~~sCAAsC~~,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;~~YAChF~~,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\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 aria-label~~=\"spinner~~ ~~indicating~~ ~~a loading process~~\" 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';\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"]}

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

@@ -5,6 +5,7 @@ export default {
         size: 'm',
         variant: 'default',
         inverted: false,
+        ariaLabel: ""
     },
     argTypes: {
         size: {
@@ -46,10 +47,23 @@ export default {
                     summary: 'boolean'
                 }
             }
-        }
+        },
+        ariaLabel: {
+            description: 'Aria label of the Spinner.',
+            control: 'text',
+            table: {
+                category: 'ARIA Labels',
+                defaultValue: {
+                    summary: '',
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
     },
 };
-const DefaultTemplate = args => `<ifx-spinner variant="${args.variant}" size="${args.size}" inverted="${args.inverted}"></ifx-spinner>`;
+const DefaultTemplate = args => `<ifx-spinner aria-label="${args.ariaLabel}" variant="${args.variant}" size="${args.size}" inverted="${args.inverted}"></ifx-spinner>`;
 export const Default = DefaultTemplate.bind({});
 Default.argsTypes = {};
 //# sourceMappingURL=spinner.stories.js.map

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;~~KAChB~~;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;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,~~yBAAyB~~,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ,kBAAkB,CAAC;~~AAExI~~,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 },\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 },\n};\n\nconst DefaultTemplate = args => `<ifx-spinner 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":["\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"]}

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: 'e6a8cc7c3cbaf31a53b35af85e1f3bd2930cf01a', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: '2c3a3ff9072807640150f9ae56687aa7faba85db', class: `dot ${effectiveColor}` }), h("p", { key: '3e197c73fd1834fd4dd4e17d886d90094acea1f5', class: "text" }, this.label)));
+        return (h("div", { key: '6202ae7e1bd70813dbffc680fbdfe1a5bdf7366b', role: "status", class: containerClass }, h("span", { key: '5572c99750fef5f4e50592ee154a3c84f5d21fe4', class: `dot ${effectiveColor}` }), h("p", { key: '96d7d6e7a9d301f3115e90f3ee442fe4a54ddc32', 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,~~0EAAgB~~,~~oBAAoB,gBAAa,~~IAAI,~~CAAC~~,~~KAAK~~,~~EAAE~~,KAAK,EAAE,cAAc;~~YAChF~~,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 ~~aria-label~~=\"a status ~~indicator~~\" ~~aria-value={this.label}~~ 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';\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}"]}

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

@@ -46,6 +46,10 @@
 .step-wrapper .step-label.curr-label {
   font: 600 1.25rem/1.75rem "Source Sans 3";
 }
+.step-wrapper .step-label:focus {
+  outline: 2px solid #0A8276;
+  outline-offset: 2px;
+}
 .step-wrapper .step-label.next-label {
   font: 400 0.75rem/1rem "Source Sans 3";
 }

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

@@ -125,10 +125,10 @@ export class Stepper {
         this.syncIfxSteps();
     }
     render() {
-        return (h("div", { key: 'b9409efa6bcc40d8d71c555251de93090cf26832', "aria-label": 'a stepper', role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` },
+        return (h("div", { key: 'b6f600a4ac775e75049390caab2ced566970ee36', "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: 'f5b60e07ea7ac6069e27811077692d6de26427a1', class: 'stepper-progress' }, h("div", { key: 'ee8197961a261d53fc76a5f3ee6fdd8a3968bca9', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '5a7a371e9a65f38a203f871a917703caa2ba2a99', class: `stepper-wrapper` }, h("slot", { key: '0c572f5be961109cb14d33e0e62cfd8892ca3492' }))));
+            h("div", { key: 'bda903cf14dadc424da369c9c1f087541da6fbc1', class: 'stepper-progress' }, h("div", { key: 'da29036b9cadf2ff4455f08d94c546307a8905ff', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '0d76b7db3e6e947496a611549f67b434a5c407ec', class: `stepper-wrapper` }, h("slot", { key: '29b4ebf6d13045c5f00760adb9a2342ef7338103' }))));
     }
     ;
     componentDidRender() {
@@ -231,6 +231,44 @@ export class Stepper {
                 "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'default'"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-label",
+                "reflect": false
+            },
+            "ariaCurrent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-current",
+                "reflect": false
             }
         };
     }

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":"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","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\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 = 'a stepper' \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, \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"]}

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

@@ -10,6 +10,8 @@ export default {
         variant: 'default',
         error: false,
         completeStep: false,
+        ariaLabel: "",
+        ariaCurrent: ""
     },
     argTypes: {
         activeStep: {
@@ -98,6 +100,32 @@ export default {
                 },
             }
         },
+        ariaLabel: {
+            description: 'Aria label of the Stepper.',
+            control: 'text',
+            table: {
+                category: 'ARIA Labels',
+                defaultValue: {
+                    summary: '',
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
+        ariaCurrent: {
+            description: 'Aria current of the Stepper.',
+            control: 'text',
+            table: {
+                category: 'ARIA Labels',
+                defaultValue: {
+                    summary: '',
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
+        },
         ifxChange: {
             action: 'ifxChange',
             description: 'A custom event emitted when active step changes.',
@@ -120,6 +148,8 @@ const Template = (args) => {
     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}>

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":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACX,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE;QACF,aAAa,EAAE,CAAC;QAChB,UAAU,EAAE,CAAC;QACb,QAAQ,EAAE,KAAK;QACf,iBAAiB,EAAE,MAAM;QACzB,cAAc,EAAE,KAAK;QACrB,OAAO,EAAE,SAAS;QAClB,KAAK,EAAE,KAAK;QACZ,YAAY,EAAE,KAAK;KACtB;IACD,QAAQ,EAAE;QACN,UAAU,EAAE;YACR,OAAO,EAAE;gBACL,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;aACT;YACD,WAAW,EAAE,oCAAoC;YACjD,KAAK,EAAE;gBACH,QAAQ,EAAE,mBAAmB;gBAC7B,YAAY,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;aAC/B;SACJ;QACD,aAAa,EAAE;YACX,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,sDAAsD;YACnE,KAAK,EAAE;gBACH,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;aAC/B;SACJ;QACD,YAAY,EAAE;YACV,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,iEAAiE;YAC9E,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACH,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;gBAChC,IAAI,EAAE;oBACF,OAAO,EAAE,SAAS;iBACrB;aACJ;SACJ;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,uDAAuD;YACpE,KAAK,EAAE;gBACH,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;gBAChC,IAAI,EAAE;oBACF,OAAO,EAAE,sCAAsC;iBAClD;aACJ;YACD,EAAE,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE;SACxC;QACD,KAAK,EAAE;YACH,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACH,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACF,OAAO,EAAE,SAAS;iBACrB;aACJ;SACJ;QACD,iBAAiB,EAAE;YACf,OAAO,EAAE,OAAO;YAChB,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YACjC,WAAW,EAAE,oDAAoD;YACjE,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,EAAE,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE;YACrC,KAAK,EAAE;gBACH,QAAQ,EAAE,mBAAmB;aAChC;SACJ;QACD,cAAc,EAAE;YACZ,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;YAClC,WAAW,EAAE,sCAAsC;YACnD,EAAE,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE;YACrC,KAAK,EAAE;gBACH,QAAQ,EAAE,mBAAmB;aAChC;SACJ;QACD,OAAO,EAAE;YACL,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC;YAC3C,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;YACpC,WAAW,EAAE,uDAAuD;YACpE,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE;gBACH,QAAQ,EAAE,mBAAmB;gBAC7B,IAAI,EAAE;oBACF,OAAO,EAAE,8BAA8B;iBAC1C;aACJ;SACJ;QACD,SAAS,EAAE;YACP,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,kDAAkD;YAC/D,KAAK,EAAE;gBACH,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACF,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EAAE;;;;wEAI4C;iBACvD;aACJ;SACJ;KACJ;CACJ,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG;;cAEV,IAAI,CAAC,UAAU;EAC3B,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,sBAAsB,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE;EAChF,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE;UACnE,IAAI,CAAC,OAAO;MAChB,CAAC,GAAG,EAAE;QACA,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE;YAC5D,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAChD,IAAI,CAAC,SAAS,GAAG,cAAc,MAAM,GAAG,CAAC,EAAE,CAAC;YAC5C,IAAI,IAAI,CAAC,QAAQ,IAAI,MAAM,KAAK,CAAC,EAAE,CAAC;gBAChC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;YAC1C,CAAC;YACD,IAAI,IAAI,CAAC,KAAK,IAAI,MAAM,KAAK,CAAC,EAAE,CAAC;gBAC7B,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;YACvC,CAAC;YACD,IAAI,IAAI,CAAC,YAAY,IAAI,MAAM,KAAK,CAAC,EAAE,CAAC;gBACpC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YACrD,CAAC;YACD,OAAO,IAAI,CAAC,SAAS,CAAC;QAC1B,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACrB,CAAC,CAAC,EACF;eACO,CAAC;IAEZ,MAAM,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACrD,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3D,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACX,OAAO,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACX,OAAO,EAAE,SAAS;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,GAAG;IACZ,OAAO,EAAE,UAAU;CACtB,CAAA","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 },\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 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} \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';\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"]}

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: 'd7008a80a5db348fab17bc8b243b16194f5036a8', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-label": this.name, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: '98f670d3afe549013029f29ebd4be2ce52e77db6', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: '4035aa3544c1d8476042c80efa768a3f0ac1b6db', class: "switch__checkbox-wrapper" }, h("input", { key: '1b7b59421ae73d644d5e69712bfb63cd6cad516c', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '41f3aaa210b8837e35f0c1f72521a19ca8478c03', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: 'd416602adcf5c320f0739f9e44215c0ed13b5c14', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '34561dc006b32b017728b62f3a1e7824fe1a1521', htmlFor: "switch" }, h("slot", { key: '48f5ec2052b839db77f575be26882a1d728cf5ff', onSlotchange: () => this.toggleLabelGap() })))));
+        return (h("div", { key: '4837a5d43fb1799d7916801242e2a5e28bcc251f', 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: 'baa5c139194e8ba9271fa11cb70f635ef73626e5', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: 'a2beb8fb4aee44e7b721229305bd5a3f5424823f', class: "switch__checkbox-wrapper" }, h("input", { key: '6c1cce06c728adc929bf88388da2cd333642091a', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: 'cafab714e896abe449dc39006f4bf825ec4bbe6a', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '039d846ec29d75875db39a0a0cdd7536f69ef6ea', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'd4122d321825660f4b8c694410866bfa9d59699a', htmlFor: "switch" }, h("slot", { key: 'bd497c1177c6a416a10e21732477523817dc2b42', 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":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AAC/F,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;QAOU,YAAO,GAAY,KAAK,CAAC;QACzB,SAAI,GAAW,EAAE,CAAC;QAClB,aAAQ,GAAY,KAAK,CAAC;QAEzB,oBAAe,GAAY,KAAK,CAAC;~~KA+G3C~~;~~IAtGC~~,KAAK,CAAC,SAAS;QACb,OAAO,IAAI,CAAC,eAAe,CAAC;IAC9B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC;IACtC,CAAC;IAGD,cAAc;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACtD,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;QACjE,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,EAAE,CAAC;YAChC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QAChC,CAAC;aAAM,CAAC;YACN,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QACnC,CAAC;IACH,CAAC;IAED,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;QACD,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAGD,YAAY,CAAC,QAAiB,EAAE,QAAiB;QAC/C,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC;YAC1B,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC;QAClC,CAAC;IACH,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC;QAE7C,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;gBAC7B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC1C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;YACnC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;QACnC,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAC5C,CAAC;IAED,aAAa,CAAC,KAAoB;QAChC,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,mDAAmD;QACnD,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,iBAAiB;QACf,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,QAAQ,kBACC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,~~gBACzC~~,IAAI,CAAC,~~IAAI~~,~~EACrB~~,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,EAClC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;YAG/C,4DACE,KAAK,EAAE,8BAA8B,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,EAC/G,QAAQ,EAAC,GAAG;gBAEZ,4DAAK,KAAK,EAAC,0BAA0B;oBACnC,8DAAO,IAAI,EAAC,UAAU,EAAC,MAAM,QAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,GAAI;oBAC5B,4DAAK,KAAK,EAAE,UAAU,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,GAAI,CAChG,CACD;YAGP,4DAAK,KAAK,EAAE,yBAAyB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;gBACpE,8DAAO,OAAO,EAAC,QAAQ;oBACrB,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,GAAI,CAC7C,CACJ,CACF,CACP,CAAA;IAEH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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-~~label~~={this.~~name~~}\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';\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"]}

package/dist/collection/components/tag/tag.css CHANGED Viewed

@@ -25,12 +25,9 @@
 }
 .container:focus:not(:active, .active) {
   outline: none;
-  border-color: #1D1D1D;
-}
-.container .label-wrapper {
-  text-decoration: none;
+  border-color: #0A8276;
 }
-.container .label-wrapper .label {
+.container .label {
   margin: 0;
   font-weight: 400;
   font-size: 1rem;

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

@@ -10,7 +10,7 @@ export class Tag {
         }
     }
     render() {
-        return (h("div", { key: 'a7cfd57c1e6f6f73d3caa1daba46d18e44cd9fbe', "aria-label": "a tag", class: "container" }, this.icon && (h("ifx-icon", { key: 'e74bd36b9663cdd3a2399a7d717e219dafc1b548', icon: this.icon })), h("a", { key: '7c4d5b73b7dcf6d60a744ee8f21ec9594ca82ddc', href: "javascript:void(null);", class: "label-wrapper" }, h("p", { key: '7f72062a2ed212ff5c8653cfb928334cb874ae25', class: "label" }, h("slot", { key: '1e880f088a852f4a566e4adbdf5d5457d75bfa62' })))));
+        return (h("div", { key: '966e46068c7752908bc22dfaf78b6f4e6f21d6ef', role: this.role, "aria-label": this.ariaLabel, tabindex: "0", class: "container" }, this.icon && h("ifx-icon", { key: 'fb8f07d770cdb09894bd968c959087ecb1de1576', icon: this.icon }), h("p", { key: '1ea5d69b3f3183599c7e3402cf5289a5c0c36523', class: "label" }, h("slot", { key: '03f8572976b5bcca3dba3734ccef52001a0466bf' }))));
     }
     static get is() { return "ifx-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -44,6 +44,44 @@ export class Tag {
                 "setter": false,
                 "attribute": "icon",
                 "reflect": false
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-label",
+                "reflect": false
+            },
+            "role": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "role",
+                "reflect": false
             }
         };
     }