npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.9.3--canary.1677.79bde5cb960ca0ee87364cb0899d078b69a61f7b.0 → 30.9.3--canary.1640.c246fbcdce3247ffada7a2fffa49d05593d4088f.0 - Mend

@infineon/infineon-design-system-stencil 30.9.3--canary.1677.79bde5cb960ca0ee87364cb0899d078b69a61f7b.0 → 30.9.3--canary.1640.c246fbcdce3247ffada7a2fffa49d05593d4088f.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 (952) hide show

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

@@ -7,13 +7,37 @@ export default {
         border: true,
     },
     argTypes: {
+        label: {
+            name: 'Label of Status',
+            description: 'Set the label of *<ifx-status>*.',
+            table: {
+                category: 'ifx-status props',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
         border: {
+            description: 'When set to **true** the status has a border.',
             control: 'boolean',
             attr: 'border',
+            table: {
+                category: 'ifx-status props',
+                defaultValue: {
+                    summary: true
+                }
+            }
         },
         color: {
+            description: 'Sets the color of the status.',
+            control: 'radio',
             options: ['orange', 'ocean', 'grey', 'light-grey', 'red', 'green', 'berry'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-status props',
+                defaultValue: {
+                    summary: 'orange'
+                }
+            }
         },
     },
 };

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

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

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

@@ -10,7 +10,6 @@ export class Step {
             showStepNumber: false,
             variant: 'default',
             indicatorPosition: 'left' };
-        this.active = undefined;
         this.clickable = false;
     }
     onStepChange(event) {

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

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

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

@@ -5,7 +5,6 @@ export class Stepper {
         this.indicatorPosition = 'left';
         this.showStepNumber = false;
         this.variant = 'default';
-        this.stepsCount = undefined;
         this.shouldEmitEvent = true;
         this.emittedByClick = 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\";\n \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].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 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 componentDidLoad() {\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\";\n \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].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 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 componentDidLoad() {\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

@@ -2,13 +2,14 @@ import { action } from "@storybook/addon-actions";
 export default {
     title: 'Components/Stepper',
     args: {
-        activeStep: 2,
         amountOfSteps: 5,
-        errorStep: 0,
+        activeStep: 2,
         disabled: false,
         indicatorPosition: 'left',
         showStepNumber: false,
-        variant: 'default'
+        variant: 'default',
+        error: false,
+        completeStep: false,
     },
     argTypes: {
         activeStep: {
@@ -16,31 +17,39 @@ export default {
                 type: 'number',
                 min: 1
             },
-            description: 'Indicates the current active step',
+            description: 'Indicates the current active step.',
             table: {
-                defaultValue: { summary: 1 }
+                category: 'ifx-stepper props',
+                defaultValue: { summary: 2 }
             }
         },
         amountOfSteps: {
-            name: 'Amount of steps',
+            name: 'Amount of Steps',
             control: 'number',
-            description: 'Indicates the number of steps in stepper in a story'
+            description: 'Indicates the number of steps in stepper in a story.',
+            table: {
+                category: 'story controls',
+                defaultValue: { summary: 5 }
+            }
         },
         completeStep: {
             name: 'complete',
-            description: 'A boolean prop to mark a step complete.<br>Usage:',
+            description: 'A boolean prop to mark one or more steps as complete.<br>Usage:',
+            control: 'boolean',
             table: {
+                category: 'ifx-step props',
                 defaultValue: { summary: false },
                 type: {
-                    summary: `<ifx-step complete=true> </ifx-step>`
+                    summary: 'boolean'
                 }
             }
         },
         disabled: {
             name: 'disabled',
             control: 'boolean',
-            description: 'A boolean prop to make the step unclickable:',
+            description: 'A boolean prop to make one or more steps unclickable.',
             table: {
+                category: 'ifx-step props',
                 defaultValue: { summary: false },
                 type: {
                     summary: `<ifx-step disabled=true> </ifx-step>`
@@ -48,37 +57,52 @@ export default {
             },
             if: { arg: 'variant', eq: 'default' }
         },
-        errorStep: {
-            name: 'error',
-            control: 'number',
-            description: 'Specified step number indicates to have an error',
+        error: {
+            control: 'boolean',
+            description: 'Sets the error state for a step.',
             table: {
-                defaultValue: { summary: false }
+                category: 'ifx-step props',
+                type: {
+                    summary: 'boolean'
+                }
             },
         },
         indicatorPosition: {
             control: 'radio',
             defaultValue: { summary: 'left' },
-            description: 'Allows to swap the progross bar and steps\' label',
+            description: 'Allows to swap the progress bar and steps\' label.',
             options: ['left', 'right'],
-            if: { arg: 'variant', eq: 'compact' }
+            if: { arg: 'variant', eq: 'compact' },
+            table: {
+                category: 'ifx-stepper props'
+            }
         },
         showStepNumber: {
             control: 'boolean',
             defaultValue: { summary: 'false' },
-            description: 'Shows the step number when set true',
-            if: { arg: 'variant', eq: 'default' }
+            description: 'Shows the step number when set true.',
+            if: { arg: 'variant', eq: 'default' },
+            table: {
+                category: 'ifx-stepper props'
+            }
         },
         variant: {
             options: ['default', 'compact', 'vertical'],
             defaultValue: { summary: 'default' },
-            description: 'Allows to switch between default and compact variant',
-            control: 'radio'
+            description: 'Allows to switch between default and compact variant.',
+            control: 'radio',
+            table: {
+                category: 'ifx-stepper props',
+                type: {
+                    summary: 'default | compact | vertical'
+                },
+            }
         },
         ifxChange: {
             action: 'ifxChange',
-            description: 'A custom event emitted when active step changes',
+            description: 'A custom event emitted when active step changes.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: `
@@ -103,10 +127,15 @@ variant=${args.variant}>
         return Array.from({ length: args.amountOfSteps }, (_, stepId) => {
             const step = document.createElement('ifx-step');
             step.innerHTML = `Step Label ${stepId + 1}`;
-            if (args.errorStep === stepId + 1)
-                step.setAttribute('error', 'true');
-            if (args.disabled)
+            if (args.disabled && stepId === 0) {
                 step.setAttribute('disabled', 'true');
+            }
+            if (args.error && stepId === 0) {
+                step.setAttribute('error', 'true');
+            }
+            if (args.completeStep && stepId === 2) {
+                step.setAttribute('complete', args.completeStep);
+            }
             return step.outerHTML;
         }).join(`\n    `);
     })()}

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,~~eAAc~~;~~IACV~~,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE;QACF,~~UAAU,EAAE,CAAC;QACb,~~aAAa,EAAE,CAAC;QAChB,~~SAAS~~,EAAE,CAAC;~~QACZ~~,QAAQ,EAAE,KAAK;QACf,iBAAiB,EAAE,MAAM;QACzB,cAAc,EAAE,KAAK;QACrB,OAAO,EAAE,SAAS;~~KACrB~~;IACD,QAAQ,EAAE;QACN,UAAU,EAAE;YACR,OAAO,EAAE;gBACL,IAAI,EAAE,QAAQ;gBACd,GAAG,EAAE,CAAC;aACT;YACD,WAAW,EAAE,~~mCAAmC~~;~~YAChD~~,KAAK,EAAE;gBACH,YAAY,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;aAC/B;SACJ;QACD,aAAa,EAAE;YACX,IAAI,EAAE,iBAAiB;YACvB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,~~qDAAqD~~;~~SACrE~~;QACD,YAAY,EAAE;YACV,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,~~mDAAmD~~;~~YAChE~~,KAAK,EAAE;gBACH,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;gBAChC,IAAI,EAAE;oBACF,OAAO,EAAE,~~sCAAsC~~;~~iBAClD~~;aACJ;SACJ;QACD,QAAQ,EAAE;YACN,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,~~8CAA8C~~;~~YAC3D~~,KAAK,EAAE;gBACH,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;gBAChC,IAAI,EAAE;oBACF,OAAO,EAAE,sCAAsC;iBAClD;aACJ;YACD,EAAE,EAAE,EAAE,GAAG,~~EAAC~~,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE;~~SACvC~~;QACD,~~SAAS~~,EAAE;~~YACP~~,~~IAAI,EAAE,~~OAAO~~;YACb~~,~~OAAO,~~EAAE,~~QAAQ~~;~~YACjB~~,WAAW,EAAE,~~kDAAkD~~;YAC/D,KAAK,EAAE;gBACH,~~YAAY~~,EAAE,EAAE,OAAO,EAAE,~~KAAK,EAAE~~;~~aACnC~~;SACJ;QACD,iBAAiB,EAAE;YACf,OAAO,EAAE,OAAO;YAChB,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YACjC,WAAW,EAAE,~~mDAAmD~~;~~YAChE~~,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,EAAE,EAAE,EAAE,GAAG,~~EAAC~~,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE;~~SACvC~~;QACD,cAAc,EAAE;YACZ,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;YAClC,WAAW,EAAE,~~qCAAqC~~;~~YAClD~~,EAAE,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE;~~SACxC~~;QACD,OAAO,EAAE;YACL,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC;YAC3C,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;YACpC,WAAW,EAAE,~~sDAAsD~~;~~YACnE~~,OAAO,EAAE,OAAO;~~SACnB~~;QACD,SAAS,EAAE;YACP,MAAM,EAAE,WAAW;YACnB,WAAW,EAAE,~~iDAAiD~~;~~YAC9D~~,KAAK,EAAE;gBACH,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;~~MAEd~~,CAAC,~~GAAE~~,EAAE;~~QACD~~,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,~~CAAA~~;~~YAC/C~~,IAAI,CAAC,SAAS,GAAG,cAAc,MAAM,~~GAAC~~,CAAC,EAAE,~~CAAA~~;~~YACzC~~,IAAI,IAAI,CAAC,~~SAAS~~,KAAK,MAAM,~~GAAC~~,CAAC;~~gBAAE~~,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,~~CAAA~~;~~YACnE~~,IAAI,IAAI,CAAC,~~QAAQ~~;~~gBAAE~~,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,~~MAAM~~,CAAC,~~CAAA~~;~~YACxD~~,OAAO,IAAI,CAAC,SAAS,~~CAAA~~;~~QACzB~~,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IACrB,CAAC,CAAC,~~EACN~~;~~eACW~~,~~CAAA~~;~~IAEX~~,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 ~~activeStep: 2,\n~~ amountOfSteps: 5,\n ~~errorStep~~: 0,\n disabled: false,\n indicatorPosition: 'left',\n showStepNumber: false,\n variant: 'default'\n },\n argTypes: {\n activeStep: { \n control: {\n type: 'number',\n min: 1\n }~~, \~~n description: 'Indicates the current active step'~~, \~~n table: {\n defaultValue: { summary: 1 }\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 },\n completeStep: {\n name: 'complete',\n description: 'A boolean prop to mark a ~~step~~ complete.<br>Usage:',\n table: {\n defaultValue: { summary: false },\n type: {\n summary: ~~`<ifx-step complete=true> </ifx-step>`\~~n }\n }\n },\n disabled: {\n name: 'disabled',\n control: 'boolean',\n description: 'A boolean prop to make ~~the~~ ~~step~~ unclickable:',\n table: {\n defaultValue: { summary: false },\n type: {\n summary: `<ifx-step disabled=true> </ifx-step>`\n }\n },\n if: { arg:'variant', eq: 'default' }\n },\n ~~errorStep~~: {\n ~~name: 'error',\n~~ control: '~~number~~',\n description: '~~Specified~~ ~~step~~ ~~number~~ ~~indicates~~ to ~~have~~ ~~an error~~',\n table: {\n ~~defaultValue~~: { summary: ~~false~~ }\n },\n },\n indicatorPosition: {\n control: 'radio',\n defaultValue: { summary: 'left' },\n description: 'Allows to swap the ~~progross~~ bar and steps\\' label',\n options: ['left', 'right'],\n if: { arg:'variant', eq: 'compact' }\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 },\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 },\n ifxChange: {\n action: 'ifxChange',\n description: 'A custom event emitted when active step changes',\n table: {\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 (()=>{\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.~~errorStep~~ === ~~stepId+1~~) step.setAttribute('~~error~~', 'true')\n if (args.~~disabled~~) step.setAttribute('~~disabled~~', 'true')\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"]}

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

@@ -4,7 +4,6 @@ export class Switch {
         this.checked = false;
         this.name = '';
         this.disabled = false;
-        this.value = undefined;
         this.internalChecked = false;
     }
     async isChecked() {

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;AAS/F,MAAM,OAAO,MAAM~~;;uBACU~~,KAAK;~~oBACT~~,EAAE;~~wBACG~~,KAAK~~;;+BAEG~~,KAAK~~;;IASzC~~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","sourcesContent":["import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\n \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 componentDidLoad() {\n this.toggleLabelGap();\n\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';\n \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 componentDidLoad() {\n this.toggleLabelGap();\n\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"]}

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

@@ -3,21 +3,67 @@ export default {
     title: 'Components/Switch',
     tags: ['autodocs'],
     args: {
-        checked: false,
         label: 'Switch',
+        checked: false,
         name: 'switch',
         value: 'switch',
+        disabled: false,
     },
     argTypes: {
+        label: {
+            name: 'Label of Switch',
+            description: 'Set the label of *<ifx-switch>*.',
+            table: {
+                category: 'story controls',
+            }
+        },
         name: {
-            description: 'Name of the element, that is used as reference when a form is submitted.'
+            description: 'Name of the element, that is used as reference when a form is submitted.',
+            table: {
+                category: 'ifx-switch props',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        checked: {
+            name: 'checked',
+            description: 'Set the checked state of the switch.',
+            table: {
+                category: 'ifx-switch props',
+                defaultValue: {
+                    summary: 'false'
+                },
+                type: {
+                    summary: 'boolean'
+                }
+            }
         },
         value: {
-            description: 'The value that gets submitted, when the radio button is checked'
+            description: 'The value that gets submitted, when the radio button is checked.',
+            table: {
+                category: 'ifx-switch props',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        disabled: {
+            description: 'The value that gets submitted, when the radio button is checked.',
+            table: {
+                category: 'ifx-switch props',
+                defaultValue: {
+                    summary: 'false'
+                },
+                type: {
+                    summary: 'boolean'
+                }
+            }
         },
         ifxChange: {
-            description: 'Custom event emitted on change',
+            description: 'Custom event emitted on change.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
@@ -33,6 +79,7 @@ const DefaultTemplate = args => {
     element.setAttribute('checked', args.checked);
     element.setAttribute('name', args.name);
     element.setAttribute('value', args.value);
+    element.setAttribute('disabled', args.disabled);
     // Add the event listener
     // element.addEventListener('ifxChange', action('ifxChange'));
     // Inside your story, add an event listener for the custom event

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

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

package/dist/collection/components/table-advanced-version/filter-bar/filter-bar.js CHANGED Viewed

@@ -2,6 +2,10 @@
 import { h, Host } from "@stencil/core";
 export class FilterBar {
     constructor() {
+        this.selectedOptions = [];
+        this.showAllFilters = false;
+        this.maxShownFilters = 4; // Default to 4, can be overridden by parent component
+        this.showMoreFiltersButton = true;
         this.handleMoreFiltersClick = () => {
             this.showAllFilters = true;
             this.updateVisibleSlots(); // Recalculate visible slots based on the new state
@@ -58,11 +62,6 @@ export class FilterBar {
             this.selectedOptions = newSelectedOptions;
             this.ifxTopbarFilterChange.emit(this.selectedOptions);
         };
-        this.selectedOptions = [];
-        this.showAllFilters = false;
-        this.maxShownFilters = 4;
-        this.visibleSlots = undefined;
-        this.showMoreFiltersButton = true;
     }
     /* If the component is ever removed and then reattached to the DOM,
   connectedCallback ensures that the event listeners are properly set up again */

package/dist/collection/components/table-advanced-version/filter-bar/filter-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"filter-bar.js","sourceRoot":"","sources":["../../../../src/components/table-advanced-version/filter-bar/filter-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["// FilterBar.tsx\nimport { Component, h, Host, Element, Event, EventEmitter, State, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-filter-bar',\n styleUrl: 'filter-bar.scss',\n shadow: true\n})\nexport class FilterBar {\n @Element() el: HTMLElement;\n @State() selectedOptions: Array<{ filterName: string, filterValues: [string], type: string }> = [];\n @Event() ifxTopbarFilterChange: EventEmitter;\n @State() showAllFilters: boolean = false;\n @Prop() maxShownFilters: number = 4; // Default to 4, can be overridden by parent component\n @State() visibleSlots: number;\n@Prop() showMoreFiltersButton: boolean = true;\n\n /* If the component is ever removed and then reattached to the DOM, \nconnectedCallback ensures that the event listeners are properly set up again /\n connectedCallback() {\n this.el.addEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\n this.el.addEventListener('ifxFilterSearchChange', this.handleSearchChange);\n window.addEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n }\n\n componentWillUnload() {\n this.el.removeEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\n this.el.removeEventListener('ifxFilterSearchChange', this.handleSearchChange);\n window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n }\n\n \n componentDidLoad() {\n this.updateVisibleSlots();\n }\n\n// Modify updateVisibleSlots to use showAllFilters to determine the number of slots\nupdateVisibleSlots() {\n this.visibleSlots = this.showAllFilters ? Number.MAX_SAFE_INTEGER : this.maxShownFilters;\n }\n\n handleMoreFiltersClick = () => {\n this.showAllFilters = true;\n this.updateVisibleSlots(); // Recalculate visible slots based on the new state\n }\n\n handleResetEvent = () => {\n const filterSearchSlot = this.el.shadowRoot?.querySelector('slot[name=\"filter-search\"]');\n if (filterSearchSlot instanceof HTMLSlotElement) { // Ensure it's treated as HTMLSlotElement\n const filterSearchSlottedElements = filterSearchSlot.assignedElements({ flatten: true });\n \n filterSearchSlottedElements.forEach((filterSearchWrapper: HTMLElement) => {\n const filterSearch = filterSearchWrapper.querySelector('ifx-filter-search');\n\n const searchField = filterSearch.shadowRoot.querySelectorAll('ifx-search-field')\n\n if (searchField.length > 0) {\n searchField.forEach((searchFieldElement: any) => {\n searchFieldElement.value = '';\n });\n }\n });\n }\n\n this.selectedOptions = [];\n\n // Emit the change to inform any parent components that the filters have been reset\n this.ifxTopbarFilterChange.emit(this.selectedOptions);\n }\n\n\n handleSearchChange = (event: CustomEvent) => {\n this.handleTopbarFilterChange(event);\n }\n\n handleFilterSelect = (event: CustomEvent) => {\n this.handleTopbarFilterChange(event);\n }\n\n handleTopbarFilterChange = (event: CustomEvent) => {\n const newSelectedOptions = [...this.selectedOptions];\n\n if (event.type === 'ifxFilterSearchChange') {\n const { filterName, filterValue } = event.detail;\n const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\n\n if (existingOptionIndex !== -1) {\n // If an existing filter is found, update its value\n newSelectedOptions[existingOptionIndex].filterValues = [filterValue];\n } else {\n newSelectedOptions.push({ filterName: filterName, filterValues: [filterValue], type: 'text' });\n }\n } else if (event.type === 'ifxFilterSelect') {\n const { filterName, filterValues, type } = event.detail;\n const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\n\n if (existingOptionIndex !== -1) {\n newSelectedOptions[existingOptionIndex].filterValues = filterValues;\n newSelectedOptions[existingOptionIndex].type = type; // Update type based on the number of selected items\n } else {\n newSelectedOptions.push({ filterName: filterName, filterValues: filterValues, type: type });\n }\n }\n\n this.selectedOptions = newSelectedOptions;\n this.ifxTopbarFilterChange.emit(this.selectedOptions);\n }\n\n render() {\n const safeVisibleSlots = Math.max(0, this.visibleSlots);\n\n const actualNumberOfComponents = this.el.querySelectorAll('ifx-set-filter').length; \n // Calculate slotsToShow safely\n const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);\n\n const slots = Array.from({ length: slotsToShow }, (_, i) => (\n <div class=\"filter-slot-wrapper\">\n <slot name={`filter-component-${i + 1}`}></slot>\n </div>\n ));\n\n return (\n <Host>\n <div class=\"search-container\">\n <slot name=\"filter-search\"></slot> {/ Directly place the search slot here */}\n </div>\n <div class=\"components-container\">\n {slots.length > 0 ? slots : <slot name=\"filter-component\"></slot>}\n {this.showMoreFiltersButton && !this.showAllFilters && (\n <div class=\"more-filters-wrapper\" onClick={this.handleMoreFiltersClick}>\n <ifx-button type=\"button\" disabled={false} variant=\"tertiary\" size=\"m\" target=\"_blank\" theme=\"default\" full-width=\"false\">\n <ifx-icon icon=\"filter-16\"></ifx-icon>More filters\n </ifx-button>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}"]}
1	+ {"version":3,"file":"filter-bar.js","sourceRoot":"","sources":["../../../../src/components/table-advanced-version/filter-bar/filter-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["// FilterBar.tsx\nimport { Component, h, Host, Element, Event, EventEmitter, State, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ifx-filter-bar',\n styleUrl: 'filter-bar.scss',\n shadow: true\n})\nexport class FilterBar {\n @Element() el: HTMLElement;\n @State() selectedOptions: Array<{ filterName: string, filterValues: [string], type: string }> = [];\n @Event() ifxTopbarFilterChange: EventEmitter;\n @State() showAllFilters: boolean = false;\n @Prop() maxShownFilters: number = 4; // Default to 4, can be overridden by parent component\n @State() visibleSlots: number;\n@Prop() showMoreFiltersButton: boolean = true;\n\n /* If the component is ever removed and then reattached to the DOM, \nconnectedCallback ensures that the event listeners are properly set up again /\n connectedCallback() {\n this.el.addEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\n this.el.addEventListener('ifxFilterSearchChange', this.handleSearchChange);\n window.addEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n }\n\n componentWillUnload() {\n this.el.removeEventListener('ifxFilterSelect', this.handleTopbarFilterChange);\n this.el.removeEventListener('ifxFilterSearchChange', this.handleSearchChange);\n window.removeEventListener('ifxResetFiltersEvent', this.handleResetEvent);\n }\n\n \n componentDidLoad() {\n this.updateVisibleSlots();\n }\n\n// Modify updateVisibleSlots to use showAllFilters to determine the number of slots\nupdateVisibleSlots() {\n this.visibleSlots = this.showAllFilters ? Number.MAX_SAFE_INTEGER : this.maxShownFilters;\n }\n\n handleMoreFiltersClick = () => {\n this.showAllFilters = true;\n this.updateVisibleSlots(); // Recalculate visible slots based on the new state\n }\n\n handleResetEvent = () => {\n const filterSearchSlot = this.el.shadowRoot?.querySelector('slot[name=\"filter-search\"]');\n if (filterSearchSlot instanceof HTMLSlotElement) { // Ensure it's treated as HTMLSlotElement\n const filterSearchSlottedElements = filterSearchSlot.assignedElements({ flatten: true });\n \n filterSearchSlottedElements.forEach((filterSearchWrapper: HTMLElement) => {\n const filterSearch = filterSearchWrapper.querySelector('ifx-filter-search');\n\n const searchField = filterSearch.shadowRoot.querySelectorAll('ifx-search-field')\n\n if (searchField.length > 0) {\n searchField.forEach((searchFieldElement: any) => {\n searchFieldElement.value = '';\n });\n }\n });\n }\n\n this.selectedOptions = [];\n\n // Emit the change to inform any parent components that the filters have been reset\n this.ifxTopbarFilterChange.emit(this.selectedOptions);\n }\n\n\n handleSearchChange = (event: CustomEvent) => {\n this.handleTopbarFilterChange(event);\n }\n\n handleFilterSelect = (event: CustomEvent) => {\n this.handleTopbarFilterChange(event);\n }\n\n handleTopbarFilterChange = (event: CustomEvent) => {\n const newSelectedOptions = [...this.selectedOptions];\n\n if (event.type === 'ifxFilterSearchChange') {\n const { filterName, filterValue } = event.detail;\n const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\n\n if (existingOptionIndex !== -1) {\n // If an existing filter is found, update its value\n newSelectedOptions[existingOptionIndex].filterValues = [filterValue];\n } else {\n newSelectedOptions.push({ filterName: filterName, filterValues: [filterValue], type: 'text' });\n }\n } else if (event.type === 'ifxFilterSelect') {\n const { filterName, filterValues, type } = event.detail;\n const existingOptionIndex = newSelectedOptions.findIndex(option => option.filterName === filterName);\n\n if (existingOptionIndex !== -1) {\n newSelectedOptions[existingOptionIndex].filterValues = filterValues;\n newSelectedOptions[existingOptionIndex].type = type; // Update type based on the number of selected items\n } else {\n newSelectedOptions.push({ filterName: filterName, filterValues: filterValues, type: type });\n }\n }\n\n this.selectedOptions = newSelectedOptions;\n this.ifxTopbarFilterChange.emit(this.selectedOptions);\n }\n\n render() {\n const safeVisibleSlots = Math.max(0, this.visibleSlots);\n\n const actualNumberOfComponents = this.el.querySelectorAll('ifx-set-filter').length; \n // Calculate slotsToShow safely\n const slotsToShow = Math.min(safeVisibleSlots, actualNumberOfComponents, Number.MAX_SAFE_INTEGER);\n\n const slots = Array.from({ length: slotsToShow }, (_, i) => (\n <div class=\"filter-slot-wrapper\">\n <slot name={`filter-component-${i + 1}`}></slot>\n </div>\n ));\n\n return (\n <Host>\n <div class=\"search-container\">\n <slot name=\"filter-search\"></slot> {/ Directly place the search slot here */}\n </div>\n <div class=\"components-container\">\n {slots.length > 0 ? slots : <slot name=\"filter-component\"></slot>}\n {this.showMoreFiltersButton && !this.showAllFilters && (\n <div class=\"more-filters-wrapper\" onClick={this.handleMoreFiltersClick}>\n <ifx-button type=\"button\" disabled={false} variant=\"tertiary\" size=\"m\" target=\"_blank\" theme=\"default\" full-width=\"false\">\n <ifx-icon icon=\"filter-16\"></ifx-icon>More filters\n </ifx-button>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}"]}