npm - @infineon/infineon-design-system-stencil - Versions diffs - 37.13.1--canary.1987.3a00aa50ac2f53008f1e351eabf4b0c340894bb9.0 → 37.14.0--canary.1964.3cf2aed10bf7a9753cdb7124879aa7e2c314bcf8.0 - Mend

@infineon/infineon-design-system-stencil 37.13.1--canary.1987.3a00aa50ac2f53008f1e351eabf4b0c340894bb9.0 → 37.14.0--canary.1964.3cf2aed10bf7a9753cdb7124879aa7e2c314bcf8.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 (622) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, 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-slider',\n styleUrl: 'slider.scss',\n shadow: true,\n})\nexport class IfxSlider {\n @Prop() min: number = 0;\n @Prop() max: number = 100;\n @Prop() step: number = 1;\n @Prop() value: number;\n @Prop() minValueHandle: number;\n @Prop() maxValueHandle: number;\n @Prop() disabled: boolean = false;\n @Prop() showPercentage: boolean = false;\n @Prop() leftIcon: string;\n @Prop() rightIcon: string;\n @Prop() leftText: string;\n @Prop() rightText: string;\n @Prop() type: 'single' \| 'double' = 'single';\n @Prop() ariaLabel: string \| null;\n @State() internalValue: number = 0;\n @State() percentage: number = 0;\n @State() internalMinValue: number = 0;\n @State() internalMaxValue: number = 100;\n @Event() ifxChange: EventEmitter;\n\n @Element() el;\n\n private inputRef: HTMLInputElement;\n private minInputRef: HTMLInputElement;\n private maxInputRef: HTMLInputElement;\n \n @Watch('value')\n valueChanged(newValue: number) {\n this.internalValue = newValue;\n this.updateValuePercent();\n }\n\n @Watch('minValueHandle')\n minValueChanged(newValue: number) {\n this.internalMinValue = newValue;\n this.updateValuePercent();\n }\n \n @Watch('maxValueHandle')\n maxValueChanged(newValue: number) {\n this.internalMaxValue = newValue;\n this.updateValuePercent();\n }\n\n getRangeSliderWrapper() {\n const rangeSliderWrapper = this.el.shadowRoot.querySelector('.range-slider__wrapper');\n return rangeSliderWrapper;\n }\n\n handleInputChangeOfRangeSlider(event: Event) {\n const target = event.target as HTMLInputElement;\n if(parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <= 0) {\n if(target.id === 'max-slider') {\n this.maxInputRef.value = this.minInputRef.value;\n }else{\n this.minInputRef.value = this.maxInputRef.value;\n }\n }\n if(target.id === 'max-slider') {\n this.internalMaxValue = parseFloat(this.maxInputRef.value);\n } else {\n this.internalMinValue = parseFloat(this.minInputRef.value);\n }\n this.ifxChange.emit({minVal: this.internalMinValue, maxVal: this.internalMaxValue});\n this.updateValuePercent();\n this.updateZIndexIfRangeSlider(target.id)\n }\n \n handleOnMouseLeaveOfRangeSlider(event: Event) {\n const target = event.target as HTMLInputElement;\n const sliderWrapper = this.getRangeSliderWrapper();\n if(target.id === 'max-slider') {\n sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);\n } else {\n sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);\n }\n }\n\n calculatePercentageValue() {\n const num = (this.internalValue - this.min) * 1.0;\n const den = this.max - this.min;\n this.percentage = +parseFloat(String((num/den)100)).toFixed(2);\n }\n\n handleInputChange(event: Event) {\n const target = event.target as HTMLInputElement;\n this.internalValue = parseFloat(target.value);\n this.ifxChange.emit(this.internalValue);\n this.calculatePercentageValue();\n this.updateValuePercent();\n }\n\n private roundToValidStep(value: number) {\n const relativeValue = value - this.min;\n const remainder = relativeValue % this.step;\n if (remainder >= this.step / 2) {\n return this.min + relativeValue + (this.step - remainder);\n } else {\n return this.min + relativeValue - remainder;\n }\n }\n\n updateValuePercent() {\n const den = this.max - this.min;\n if(this.type === 'double'){\n if (this.minInputRef) {\n const num = (this.roundToValidStep(this.internalMinValue) - this.min) 1.0;\n const minPercent = (num/den) * 100;\n this.minInputRef.parentElement.style.setProperty('--min-value-percent', `${minPercent}%`);\n }\n\n if (this.maxInputRef) {\n const num = (this.roundToValidStep(this.internalMaxValue) - this.min) * 1.0;\n const maxPercent = (num/den) * 100;\n this.maxInputRef.parentElement.style.setProperty('--max-value-percent', `${maxPercent}%`);\n }\n\n } else {\n\n if (this.inputRef) {\n const num = (this.roundToValidStep(this.internalValue) - this.min) * 1.0;\n const den = this.max - this.min;\n const percentage = (num/den) * 100;\n this.inputRef.style.setProperty('--value-percent', `${percentage}%`);\n }\n\n }\n } \n \n // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping \n // if min and max thumbs take the same value.\n updateZIndexIfRangeSlider(targetId: string = '') {\n if (targetId === 'max-slider') {\n this.minInputRef.style.zIndex = '1';\n this.maxInputRef.style.zIndex = '2';\n } else {\n this.minInputRef.style.zIndex = '2';\n this.maxInputRef.style.zIndex = '1';\n }\n }\n\n componentWillLoad() {\n if(this.value === undefined) {\n this.internalValue = (this.max-this.min) / 2;\n } else {\n this.internalValue = Math.max(this.min, Math.min(this.max, this.value));\n }\n\n this.calculatePercentageValue();\n\n if(this.minValueHandle !== undefined) this.internalMinValue = this.minValueHandle;\n else this.internalMinValue = this.min;\n if(this.maxValueHandle !== undefined) this.internalMaxValue = this.maxValueHandle;\n else this.internalMaxValue = this.max;\n }\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-slider', await framework)\n }\n this.updateValuePercent();\n }\n\n\n render() {\n return (\n <div class=\"ifx-slider\">\n {this.leftText && (\n <span class={`left-text`}>\n {this.leftText}\n </span>\n )}\n {this.leftIcon && (\n <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n )}\n {\n (this.type !== 'double') ?\n <input\n type=\"range\"\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.internalValue}\n disabled={this.disabled}\n ref={(el) => (this.inputRef = el as HTMLInputElement)}\n onInput={(event) => this.handleInputChange(event)}\n aria-label=\"Slider\"\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n aria-valuenow={this.internalValue}\n aria-disabled={this.disabled ? \"true\" : \"false\"}\n /> \n :\n <div class = 'range-slider__wrapper' aria-label={this.ariaLabel} role=\"group\">\n <input \n id='min-slider'\n type='range'\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.internalMinValue}\n disabled={this.disabled}\n ref={(el) => (this.minInputRef = el as HTMLInputElement)}\n onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n aria-label=\"Minimum value slider\"\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n aria-valuenow={this.internalMinValue} aria-disabled={this.disabled ? \"true\" : \"false\"}\n />\n <input \n id='max-slider'\n type='range'\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.internalMaxValue}\n disabled={this.disabled}\n ref={(el) => (this.maxInputRef = el as HTMLInputElement)}\n onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n aria-label=\"Maximum value slider\"\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n aria-valuenow={this.internalMaxValue}\n aria-disabled={this.disabled ? \"true\" : \"false\"}\n />\n </div>\n }\n {this.rightIcon && (\n <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n )}\n {this.rightText && (\n <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n {this.rightText}\n </span>\n )}\n\n {this.showPercentage && (this.type !== \"double\") && (\n <span\n class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n >\n {this.percentage}%\n </span>\n )}\n </div>\n );\n }\n}"]}
1	+ {"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, 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-slider',\n styleUrl: 'slider.scss',\n shadow: true,\n})\nexport class IfxSlider {\n @Prop() min: number = 0;\n @Prop() max: number = 100;\n @Prop() step: number = 1;\n @Prop() value: number;\n @Prop() minValueHandle: number;\n @Prop() maxValueHandle: number;\n @Prop() disabled: boolean = false;\n @Prop() showPercentage: boolean = false;\n @Prop() leftIcon: string;\n @Prop() rightIcon: string;\n @Prop() leftText: string;\n @Prop() rightText: string;\n @Prop() type: 'single' \| 'double' = 'single';\n @State() internalValue: number = 0;\n @State() percentage: number = 0;\n @State() internalMinValue: number = 0;\n @State() internalMaxValue: number = 100;\n @Event() ifxChange: EventEmitter;\n\n @Element() el;\n\n private inputRef: HTMLInputElement;\n private minInputRef: HTMLInputElement;\n private maxInputRef: HTMLInputElement;\n \n @Watch('value')\n valueChanged(newValue: number) {\n this.internalValue = newValue;\n this.updateValuePercent();\n }\n\n @Watch('minValueHandle')\n minValueChanged(newValue: number) {\n this.internalMinValue = newValue;\n this.updateValuePercent();\n }\n \n @Watch('maxValueHandle')\n maxValueChanged(newValue: number) {\n this.internalMaxValue = newValue;\n this.updateValuePercent();\n }\n\n getRangeSliderWrapper() {\n const rangeSliderWrapper = this.el.shadowRoot.querySelector('.range-slider__wrapper');\n return rangeSliderWrapper;\n }\n\n handleInputChangeOfRangeSlider(event: Event) {\n const target = event.target as HTMLInputElement;\n if(parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <= 0) {\n if(target.id === 'max-slider') {\n this.maxInputRef.value = this.minInputRef.value;\n }else{\n this.minInputRef.value = this.maxInputRef.value;\n }\n }\n if(target.id === 'max-slider') {\n this.internalMaxValue = parseFloat(this.maxInputRef.value);\n } else {\n this.internalMinValue = parseFloat(this.minInputRef.value);\n }\n this.ifxChange.emit({minVal: this.internalMinValue, maxVal: this.internalMaxValue});\n this.updateValuePercent();\n this.updateZIndexIfRangeSlider(target.id)\n }\n \n handleOnMouseLeaveOfRangeSlider(event: Event) {\n const target = event.target as HTMLInputElement;\n const sliderWrapper = this.getRangeSliderWrapper();\n if(target.id === 'max-slider') {\n sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);\n } else {\n sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);\n }\n }\n\n calculatePercentageValue() {\n const num = (this.internalValue - this.min) * 1.0;\n const den = this.max - this.min;\n this.percentage = +parseFloat(String((num/den)100)).toFixed(2);\n }\n\n handleInputChange(event: Event) {\n const target = event.target as HTMLInputElement;\n this.internalValue = parseFloat(target.value);\n this.ifxChange.emit(this.internalValue);\n this.calculatePercentageValue();\n this.updateValuePercent();\n }\n\n private roundToValidStep(value: number) {\n const relativeValue = value - this.min;\n const remainder = relativeValue % this.step;\n if (remainder >= this.step / 2) {\n return this.min + relativeValue + (this.step - remainder);\n } else {\n return this.min + relativeValue - remainder;\n }\n }\n\n updateValuePercent() {\n const den = this.max - this.min;\n if(this.type === 'double'){\n if (this.minInputRef) {\n const num = (this.roundToValidStep(this.internalMinValue) - this.min) 1.0;\n const minPercent = (num/den) * 100;\n this.minInputRef.parentElement.style.setProperty('--min-value-percent', `${minPercent}%`);\n }\n\n if (this.maxInputRef) {\n const num = (this.roundToValidStep(this.internalMaxValue) - this.min) * 1.0;\n const maxPercent = (num/den) * 100;\n this.maxInputRef.parentElement.style.setProperty('--max-value-percent', `${maxPercent}%`);\n }\n\n } else {\n\n if (this.inputRef) {\n const num = (this.roundToValidStep(this.internalValue) - this.min) * 1.0;\n const den = this.max - this.min;\n const percentage = (num/den) * 100;\n this.inputRef.style.setProperty('--value-percent', `${percentage}%`);\n }\n\n }\n } \n \n // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping \n // if min and max thumbs take the same value.\n updateZIndexIfRangeSlider(targetId: string = '') {\n if (targetId === 'max-slider') {\n this.minInputRef.style.zIndex = '1';\n this.maxInputRef.style.zIndex = '2';\n } else {\n this.minInputRef.style.zIndex = '2';\n this.maxInputRef.style.zIndex = '1';\n }\n }\n\n componentWillLoad() {\n if(this.value === undefined) {\n this.internalValue = (this.max-this.min) / 2;\n } else {\n this.internalValue = Math.max(this.min, Math.min(this.max, this.value));\n }\n\n this.calculatePercentageValue();\n\n if(this.minValueHandle !== undefined) this.internalMinValue = this.minValueHandle;\n else this.internalMinValue = this.min;\n if(this.maxValueHandle !== undefined) this.internalMaxValue = this.maxValueHandle;\n else this.internalMaxValue = this.max;\n }\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-slider', await framework)\n }\n this.updateValuePercent();\n }\n\n\n render() {\n return (\n <div class=\"ifx-slider\">\n {this.leftText && (\n <span class={`left-text`}>\n {this.leftText}\n </span>\n )}\n {this.leftIcon && (\n <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n )}\n {\n (this.type !== 'double') ?\n <input\n type=\"range\"\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.internalValue}\n disabled={this.disabled}\n ref={(el) => (this.inputRef = el as HTMLInputElement)}\n onInput={(event) => this.handleInputChange(event)}\n aria-label='a slider'\n aria-value={this.value}\n aria-disabled={this.disabled}\n /> \n :\n <div class = 'range-slider__wrapper' aria-label='a range slider' aria-value={this.value} aria-disabled={this.disabled} >\n <input \n id='min-slider'\n type='range'\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.internalMinValue}\n disabled={this.disabled}\n ref={(el) => (this.minInputRef = el as HTMLInputElement)}\n onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n />\n <input \n id='max-slider'\n type='range'\n min={this.min}\n max={this.max}\n step={this.step}\n value={this.internalMaxValue}\n disabled={this.disabled}\n ref={(el) => (this.maxInputRef = el as HTMLInputElement)}\n onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n />\n\n </div>\n }\n {this.rightIcon && (\n <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n )}\n {this.rightText && (\n <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n {this.rightText}\n </span>\n )}\n\n {this.showPercentage && (this.type !== \"double\") && (\n <span\n class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n >\n {this.percentage}%\n </span>\n )}\n </div>\n );\n }\n}"]}

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

@@ -107,19 +107,6 @@ 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.',
@@ -142,7 +129,6 @@ 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 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';\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"]}

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

@@ -14,8 +14,8 @@ export class Spinner {
         }
     }
     render() {
-        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" }))))));
+        return (h("div", { key: '9a7e261848cb2ab5d281ed0a5dd3ca09fc201c9f', "aria-label": "spinner indicating a loading process", class: this.getClassNames() }, h("div", { key: 'ae308cd0ef91308abe568147004773f6f3deb373', class: `${this.variant !== 'brand' ? 'border' : ""} ${this.inverted ? 'inverted' : ""}` }), this.variant === 'brand'
+            && h("div", { key: 'd0f09cd6fa589a472218a5923a0ddc3e0bf7db89', class: `semiconductor ${this.inverted ? 'inverted' : ""} ${this.getSizeClass()}` }, h("svg", { key: 'fba863429a88d6acd2bc0175b55ea2a3f1cbb9fd', width: '40', height: '40', viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: 'cab2e25423d28fb0a0fcf3f8151754ac05104399', id: "spinner/conductor" }, h("path", { key: '9b299e9ad04bb013cd4f6950a3a1c136cdbb8246', 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,25 +96,6 @@ export class Spinner {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
-            },
-            "ariaLabel": {
-                "type": "string",
-                "attribute": "aria-label",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | null",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "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;~~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;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"]}

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

@@ -5,7 +5,6 @@ export default {
         size: 'm',
         variant: 'default',
         inverted: false,
-        ariaLabel: ""
     },
     argTypes: {
         size: {
@@ -47,23 +46,10 @@ 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 aria-label="${args.ariaLabel}" variant="${args.variant}" size="${args.size}" inverted="${args.inverted}"></ifx-spinner>`;
+const DefaultTemplate = args => `<ifx-spinner 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;~~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;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"]}

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: '6202ae7e1bd70813dbffc680fbdfe1a5bdf7366b', role: "status", class: containerClass }, h("span", { key: '5572c99750fef5f4e50592ee154a3c84f5d21fe4', class: `dot ${effectiveColor}` }), h("p", { key: '96d7d6e7a9d301f3115e90f3ee442fe4a54ddc32', class: "text" }, this.label)));
+        return (h("div", { key: 'df0bd64479b85637198e0dc8715afc705d52a756', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: 'a1ca252388cb2f707b40b7b4e792c5004b9ab5e9', class: `dot ${effectiveColor}` }), h("p", { key: '6b91b2724502837bffff721ec51e98e6a9ee3bc6', 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,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}"]}

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

@@ -46,10 +46,6 @@
 .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/step/step.js CHANGED Viewed

@@ -42,7 +42,7 @@ export class Step {
         }
     }
     render() {
-        return (h("div", { key: 'dd6c17bea0cd62475732ea2c577cd102f77df8ba', "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' : ''}
+        return (h("div", { key: '16eb71f0ad6bd16c0a9ca629b426803d55b7eedd', "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' : ''}
@@ -50,11 +50,11 @@ export class Step {
                         indicator-${this.stepperState.indicatorPosition}
                         ${this.active ? 'active' : ''}
                         ${this.clickable ? 'clickable' : ''}
-                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: 'd923bfda8089c8b2199d45acaaf6ac8c9fdeec5d', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '13aac7c30b1dcd6ff7df11a4c58f4f9f156c01fc', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
-            h("div", { key: '35da868f3749271c369959b782e980dc95c3c92f', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '4813fe9d028d7e1a25e7058cce5a79a76cba76f1', icon: 'check16' }), this.active && h("span", { key: 'd0c1dbfed346671ca777606ffe5f3efe2016a170', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: 'd5e56742186a732d1cf95069b8a61d59b8a68073', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && h("span", { key: '188cb1e005c83ad4abc3b05a0c8833968588628e', class: `step-connector-r ${this.active ? 'active' : ''}` })),
+                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: '4ffd3c627c44a652814fb2b28b8a57ede5572d2a', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: 'f198e558160f837f3553804ec8b6447fe5ca19bc', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
+            h("div", { key: 'b9729e46a5bba23cd0de106af3d1f3d50280d41c', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: 'b86eea4d66ee542d41c49ce6c1669f1d55b285a6', icon: 'check16' }), this.active && h("span", { key: '491566173caea0ef800c9540c287645dadac823f', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: 'afa67edf1c8b61ec276b73238ac2264d48d6350a', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && h("span", { key: 'f0cd06d1fc4f50bc38b9a64a2c283cf429e6d099', 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: '4a60050301d4666815c6eb64d85d6a85459fb272', 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: 'cbd47999729966cc8858b41bb54608eab8aa30c7' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: 'acb8a199531960f67d7c9c78238c9510118d79ab' }))));
+            h("div", { key: 'ea152255764c891ce43c89c4f55b28057809ed7e', 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: '7405313a5c724511ab13f4618bcbc0fe4bb09ad8' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: '491baf5f8c458e8ca028343e7008f10fd5659adf' }))));
     }
     ;
     static get is() { return "ifx-step"; }

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

@@ -125,10 +125,10 @@ export class Stepper {
         this.syncIfxSteps();
     }
     render() {
-        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 : ''}` },
+        return (h("div", { key: '072b8e14d99551292137f832f0c1b10086ae709c', "aria-label": 'a stepper', 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: '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' }))));
+            h("div", { key: 'f91c8ecdd38d2f4e4f1d8a9e93af9894a45668d7', class: 'stepper-progress' }, h("div", { key: '4541cad0c38c02c2586e1557fe2aff571d4f09d4', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '9b7a8a0f1a3b0bfb8b2a399f2365289af5ea5628', class: `stepper-wrapper` }, h("slot", { key: 'ac33e01c765ef7307e74cad6bbdbec94141864b4' }))));
     }
     ;
     componentDidRender() {
@@ -231,44 +231,6 @@ export class Stepper {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "'default'"
-            },
-            "ariaLabel": {
-                "type": "string",
-                "attribute": "aria-label",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | null",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "ariaCurrent": {
-                "type": "string",
-                "attribute": "aria-current",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | null",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "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 @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, \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"]}

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

@@ -10,8 +10,6 @@ export default {
         variant: 'default',
         error: false,
         completeStep: false,
-        ariaLabel: "",
-        ariaCurrent: ""
     },
     argTypes: {
         activeStep: {
@@ -100,32 +98,6 @@ 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.',
@@ -148,8 +120,6 @@ 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":"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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';\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"]}