@infineon/infineon-design-system-stencil 39.5.6 → 39.5.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/ifx-step.cjs.entry.js +3 -3
- package/dist/cjs/ifx-step.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-step.entry.cjs.js.map +1 -1
- package/dist/collection/components/stepper/step/step.css +9 -0
- package/dist/collection/components/stepper/step/step.js +2 -2
- package/dist/collection/components/stepper/step/step.js.map +1 -1
- package/dist/components/ifx-step.js +3 -3
- package/dist/components/ifx-step.js.map +1 -1
- package/dist/esm/ifx-step.entry.js +3 -3
- package/dist/esm/ifx-step.entry.js.map +1 -1
- package/dist/infineon-design-system-stencil/ifx-step.entry.esm.js.map +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/p-880ff9af.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-880ff9af.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/infineon-design-system-stencil/p-453bd9bd.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-453bd9bd.entry.js.map +0 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-n_pDKBY2.js');
|
|
4
4
|
|
|
5
|
-
const stepCss = ":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem \"Source Sans 3\"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start;color:#575352}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#BFBBBB;word-wrap:break-word}.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\"}.step-wrapper .step-label :hover{color:#BFBBBB}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#BFBBBB}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#BFBBBB}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#BFBBBB}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#BFBBBB}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#BFBBBB}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#BFBBBB;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#BFBBBB}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}";
|
|
5
|
+
const stepCss = ":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem \"Source Sans 3\"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start;color:#575352}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#BFBBBB;word-wrap:break-word}.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\"}.step-wrapper .step-label :hover{color:#BFBBBB}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#BFBBBB}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#BFBBBB}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#BFBBBB}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#BFBBBB}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){margin:auto;color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#BFBBBB}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#BFBBBB;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.error-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#BFBBBB}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}";
|
|
6
6
|
|
|
7
7
|
const Step = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -57,10 +57,10 @@ const Step = class {
|
|
|
57
57
|
${this.active ? 'active' : ''}
|
|
58
58
|
${this.clickable ? 'clickable' : ''}
|
|
59
59
|
${this.disabled ? 'disabled' : ''}` }, index.h("div", { key: 'ec1bdd77edfd87f066df44db5f3f0e115b3f7a67', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && index.h("span", { key: '46ae721e9ba89b6f561540d6228b4928d74522a0', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
|
|
60
|
-
index.h("div", { key: 'e168325daeff9ca6b2ff4e045bce5ec974e9c5d5', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && index.h("ifx-icon", { key: '4eb3de9575a8704f0ed7e1ade9ccae31ea59c572', icon: 'check16' }), this.active && index.h("span", { key: 'c0c554eaae6a28783a4597633e4c60dbe14c0fda', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && index.h("ifx-icon", { key: '
|
|
60
|
+
index.h("div", { key: 'e168325daeff9ca6b2ff4e045bce5ec974e9c5d5', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && index.h("ifx-icon", { key: '4eb3de9575a8704f0ed7e1ade9ccae31ea59c572', icon: 'check16' }), this.active && index.h("span", { key: 'c0c554eaae6a28783a4597633e4c60dbe14c0fda', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && index.h("ifx-icon", { key: 'bfd1043f5e6ca1ceafab56bff6ea13c3a9c05538', class: 'error-icon', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && index.h("span", { key: '56b62a62a03b8fe6271a9f3f4eec2bfe24638299', class: `step-connector-r ${this.active ? 'active' : ''}` })),
|
|
61
61
|
/* Step labels */
|
|
62
62
|
(this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep + 1))) &&
|
|
63
|
-
index.h("div", { key: '
|
|
63
|
+
index.h("div", { key: '0c128ec43bdb7539bdaf3229bddead2c515c8dfd', 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') && index.h("slot", { key: '5b00152f0e2a83bac730628b95d675b2d5fb9708' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && index.h("slot", { key: 'd212e5073db536450a610257a353aef702dd887e' }))));
|
|
64
64
|
}
|
|
65
65
|
;
|
|
66
66
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-step.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n gap: tokens.$ifxSize100;\n font: tokens.$ifxBodyBody03;\n\n\n &.vertical {\n flex-direction: row;\n gap: tokens.$ifxSize150;\n width: unset;\n height: 100%;\n \n .step-icon-wrapper {\n flex-direction: column;\n width: unset;\n height: 100%;\n }\n }\n \n &.compact {\n gap: 0;\n max-width: 100%;\n .step-label{\n max-width: 100%;\n cursor: auto;\n align-self: flex-start;\n color: tokens.$ifxColorEngineering500;\n }\n \n &.indicator-left {\n align-items: flex-end;\n text-align: right;\n }\n \n &.indicator-right {\n align-items: flex-start;\n }\n }\n\n .step-label {\n max-width: 90%;\n color: tokens.$ifxColorEngineering300; \n word-wrap: break-word;\n &.curr-label{\n font: tokens.$ifxHeadingHeadingCompact04; \n }\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500; \n outline-offset: 2px;\n }\n &.next-label{\n font: tokens.$ifxBodyBody05;\n }\n :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n \n &.first-step {\n .step-connector-l{\n height: 0px;\n }\n }\n \n &.last-step{\n .step-connector-r{\n height: 0px;\n }\n }\n\n &.vertical {\n &.first-step .step-connector-l,\n &.last-step .step-connector-r {\n width: 0px;\n }\n }\n\n &.complete{\n .step-connector-l, .step-connector-r, .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n &:not(.disabled) {\n .step-label{\n cursor: pointer;\n color: tokens.$ifxColorBaseBlack;\n :hover {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n } \n \n &.disabled{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background-color: tokens.$ifxColorEngineering300;\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n \n &.active{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorBaseBlack;\n }\n &.complete .step-label { \n cursor: auto;\n }\n \n } \n\n &.clickable:not(.active) .step-label{\n cursor: pointer;\n }\n\n &.error:not(.active){\n color: tokens.$ifxColorRed500;\n .step-label{\n color: tokens.$ifxColorRed500;\n :hover{\n color: tokens.$ifxColorOcean500;\n }\n }\n }\n\n &.disabled{\n .step-label{\n cursor: auto;\n }\n }\n\n &:hover{\n &.complete:not(.disabled):not(.active){\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean600;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n } \n .step-label {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n \n}\n\n.active-indic {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n border-radius: tokens.$ifxBorderRadiusRound;\n background: white;\n}\n\n.step-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n\n.step-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n background-color: tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadiusRound;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.step-connector-r, \n.step-connector-l {\n height: 2px;\n min-width: tokens.$ifxSize500;\n flex-grow: 1;\n background-color: tokens.$ifxColorEngineering300;\n}\n\n.vertical {\n .step-connector-r, \n .step-connector-l {\n height: unset;\n min-width: unset;\n width: 2px;\n min-height: tokens.$ifxSize500;\n }\n}","import { h, \n Component, \n Listen, \n Prop, \n State, \n Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n tag: 'ifx-step',\n styleUrl: 'step.scss',\n shadow: true\n})\n\nexport class Step {\n @Prop() complete?: boolean = false;\n @Prop() disabled?: boolean = false;\n @Prop({ mutable: true }) error?: boolean = false;\n @Prop({ reflect: false }) lastStep: boolean = false;\n @Prop() stepId: number = 1;\n @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n showStepNumber: false, \n variant: 'default', \n indicatorPosition: 'left' };\n\n @State() active: boolean;\n @State() clickable: boolean = false;\n\n @Listen('ifxChange', { target: 'document' })\n onStepChange(event: CustomEvent) {\n const previousActiveStep = event.detail.previousActiveStep;\n if (previousActiveStep === this.stepId && this.error) {\n this.clickable = true;\n }\n } \n\n @Watch('stepperState')\n updateCurrentStep(newStepperState) {\n this.active = (newStepperState.activeStep === this.stepId)\n }\n\n @Watch('active')\n updateErrorState(){\n if (this.active) {\n this.error = false;\n }\n }\n\n\n handleStepClick() {\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete)) {\n this.stepperState.setActiveStep(this.stepId, true)\n } \n }\n \n handleStepKeyDown(event: KeyboardEvent) {\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete) && event.key === 'Enter') {\n this.stepperState.setActiveStep(this.stepId, true)\n } \n }\n \n stopOnClickPropogation(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n }\n }\n\n render() {\n return (\n <div aria-current = {this.active ? 'step': false}\n aria-disabled = {this.active || this.complete ? false : true}\n onClick={ (e) => this.stopOnClickPropogation(e) }\n class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n ${this.error ? 'error': ''}\n ${this.stepperState.variant}\n ${this.complete ? 'complete': ''}\n ${this.lastStep ? 'last-step': ''}\n indicator-${this.stepperState.indicatorPosition}\n ${this.active ? 'active' : ''}\n ${this.clickable ? 'clickable' : ''}\n ${this.disabled ? 'disabled': ''}`}>\n\n <div class = 'step-icon-wrapper'>\n {/* Left connector */}\n {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n {\n (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) && \n <div class = 'step-icon'>\n {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n {this.active && <span class = 'active-indic'></span>}\n </div>\n }\n\n {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningF16'></ifx-icon>}\n \n {/* Right connector */}\n {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n </div>\n\n {\n /* Step labels */\n (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n onClick={() => { this.handleStepClick() }} \n onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n {(this.stepperState.variant !== 'compact') && <slot/>}\n\n {this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : ''}\n {this.stepperState.variant === 'compact' && <slot/>}\n </div>\n }\n\n </div>\n );\n };\n}\n"],"version":3}
|
|
1
|
+
{"file":"ifx-step.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n gap: tokens.$ifxSize100;\n font: tokens.$ifxBodyBody03;\n\n\n &.vertical {\n flex-direction: row;\n gap: tokens.$ifxSize150;\n width: unset;\n height: 100%;\n \n .step-icon-wrapper {\n flex-direction: column;\n width: unset;\n height: 100%;\n }\n }\n \n &.compact {\n gap: 0;\n max-width: 100%;\n .step-label{\n max-width: 100%;\n cursor: auto;\n align-self: flex-start;\n color: tokens.$ifxColorEngineering500;\n }\n \n &.indicator-left {\n align-items: flex-end;\n text-align: right;\n }\n \n &.indicator-right {\n align-items: flex-start;\n }\n }\n\n .step-label {\n max-width: 90%;\n color: tokens.$ifxColorEngineering300; \n word-wrap: break-word;\n &.curr-label{\n font: tokens.$ifxHeadingHeadingCompact04; \n }\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500; \n outline-offset: 2px;\n }\n &.next-label{\n font: tokens.$ifxBodyBody05;\n }\n :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n \n &.first-step {\n .step-connector-l{\n height: 0px;\n }\n }\n \n &.last-step{\n .step-connector-r{\n height: 0px;\n }\n }\n\n &.vertical {\n &.first-step .step-connector-l,\n &.last-step .step-connector-r {\n width: 0px;\n }\n }\n\n &.complete{\n .step-connector-l, .step-connector-r, .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n &:not(.disabled) {\n .step-label{\n cursor: pointer;\n color: tokens.$ifxColorBaseBlack;\n :hover {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n } \n \n &.disabled{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background-color: tokens.$ifxColorEngineering300;\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n \n &.active{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorBaseBlack;\n }\n &.complete .step-label { \n cursor: auto;\n }\n \n } \n\n &.clickable:not(.active) .step-label{\n cursor: pointer;\n }\n\n &.error:not(.active){\n margin: auto;\n color: tokens.$ifxColorRed500;\n .step-label{\n color: tokens.$ifxColorRed500;\n :hover{\n color: tokens.$ifxColorOcean500;\n }\n }\n }\n\n &.disabled{\n .step-label{\n cursor: auto;\n }\n }\n\n &:hover{\n &.complete:not(.disabled):not(.active){\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean600;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n } \n .step-label {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n \n}\n\n.active-indic {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n border-radius: tokens.$ifxBorderRadiusRound;\n background: white;\n}\n\n.step-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n\n.step-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n background-color: tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadiusRound;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.error-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.step-connector-r, \n.step-connector-l {\n height: 2px;\n min-width: tokens.$ifxSize500;\n flex-grow: 1;\n background-color: tokens.$ifxColorEngineering300;\n}\n\n.vertical {\n .step-connector-r, \n .step-connector-l {\n height: unset;\n min-width: unset;\n width: 2px;\n min-height: tokens.$ifxSize500;\n }\n}","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 class= 'error-icon' icon='warningF16'></ifx-icon> }\n \n {/* Right connector */}\n {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n </div>\n\n {\n /* Step labels */\n (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n onClick={() => { this.handleStepClick() }} \n onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n {(this.stepperState.variant !== 'compact') && <slot/>}\n\n {this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : ''}\n {this.stepperState.variant === 'compact' && <slot/>}\n </div>\n }\n\n </div>\n );\n };\n}\n"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ifx-step.entry.cjs.js","sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n gap: tokens.$ifxSize100;\n font: tokens.$ifxBodyBody03;\n\n\n &.vertical {\n flex-direction: row;\n gap: tokens.$ifxSize150;\n width: unset;\n height: 100%;\n \n .step-icon-wrapper {\n flex-direction: column;\n width: unset;\n height: 100%;\n }\n }\n \n &.compact {\n gap: 0;\n max-width: 100%;\n .step-label{\n max-width: 100%;\n cursor: auto;\n align-self: flex-start;\n color: tokens.$ifxColorEngineering500;\n }\n \n &.indicator-left {\n align-items: flex-end;\n text-align: right;\n }\n \n &.indicator-right {\n align-items: flex-start;\n }\n }\n\n .step-label {\n max-width: 90%;\n color: tokens.$ifxColorEngineering300; \n word-wrap: break-word;\n &.curr-label{\n font: tokens.$ifxHeadingHeadingCompact04; \n }\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500; \n outline-offset: 2px;\n }\n &.next-label{\n font: tokens.$ifxBodyBody05;\n }\n :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n \n &.first-step {\n .step-connector-l{\n height: 0px;\n }\n }\n \n &.last-step{\n .step-connector-r{\n height: 0px;\n }\n }\n\n &.vertical {\n &.first-step .step-connector-l,\n &.last-step .step-connector-r {\n width: 0px;\n }\n }\n\n &.complete{\n .step-connector-l, .step-connector-r, .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n &:not(.disabled) {\n .step-label{\n cursor: pointer;\n color: tokens.$ifxColorBaseBlack;\n :hover {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n } \n \n &.disabled{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background-color: tokens.$ifxColorEngineering300;\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n \n &.active{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorBaseBlack;\n }\n &.complete .step-label { \n cursor: auto;\n }\n \n } \n\n &.clickable:not(.active) .step-label{\n cursor: pointer;\n }\n\n &.error:not(.active){\n color: tokens.$ifxColorRed500;\n .step-label{\n color: tokens.$ifxColorRed500;\n :hover{\n color: tokens.$ifxColorOcean500;\n }\n }\n }\n\n &.disabled{\n .step-label{\n cursor: auto;\n }\n }\n\n &:hover{\n &.complete:not(.disabled):not(.active){\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean600;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n } \n .step-label {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n \n}\n\n.active-indic {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n border-radius: tokens.$ifxBorderRadiusRound;\n background: white;\n}\n\n.step-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n\n.step-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n background-color: tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadiusRound;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.step-connector-r, \n.step-connector-l {\n height: 2px;\n min-width: tokens.$ifxSize500;\n flex-grow: 1;\n background-color: tokens.$ifxColorEngineering300;\n}\n\n.vertical {\n .step-connector-r, \n .step-connector-l {\n height: unset;\n min-width: unset;\n width: 2px;\n min-height: tokens.$ifxSize500;\n }\n}","import { h, \n Component, \n Listen, \n Prop, \n State, \n Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n tag: 'ifx-step',\n styleUrl: 'step.scss',\n shadow: true\n})\n\nexport class Step {\n @Prop() complete?: boolean = false;\n @Prop() disabled?: boolean = false;\n @Prop({ mutable: true }) error?: boolean = false;\n @Prop({ reflect: false }) lastStep: boolean = false;\n @Prop() stepId: number = 1;\n @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n showStepNumber: false, \n variant: 'default', \n indicatorPosition: 'left' };\n\n @State() active: boolean;\n @State() clickable: boolean = false;\n\n @Listen('ifxChange', { target: 'document' })\n onStepChange(event: CustomEvent) {\n const previousActiveStep = event.detail.previousActiveStep;\n if (previousActiveStep === this.stepId && this.error) {\n this.clickable = true;\n }\n } \n\n @Watch('stepperState')\n updateCurrentStep(newStepperState) {\n this.active = (newStepperState.activeStep === this.stepId)\n }\n\n @Watch('active')\n updateErrorState(){\n if (this.active) {\n this.error = false;\n }\n }\n\n\n handleStepClick() {\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete)) {\n this.stepperState.setActiveStep(this.stepId, true)\n } \n }\n \n handleStepKeyDown(event: KeyboardEvent) {\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete) && event.key === 'Enter') {\n this.stepperState.setActiveStep(this.stepId, true)\n } \n }\n \n stopOnClickPropogation(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n }\n }\n\n render() {\n return (\n <div aria-current = {this.active ? 'step': false}\n aria-disabled = {this.active || this.complete ? false : true}\n onClick={ (e) => this.stopOnClickPropogation(e) }\n class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n ${this.error ? 'error': ''}\n ${this.stepperState.variant}\n ${this.complete ? 'complete': ''}\n ${this.lastStep ? 'last-step': ''}\n indicator-${this.stepperState.indicatorPosition}\n ${this.active ? 'active' : ''}\n ${this.clickable ? 'clickable' : ''}\n ${this.disabled ? 'disabled': ''}`}>\n\n <div class = 'step-icon-wrapper'>\n {/* Left connector */}\n {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n {\n (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) && \n <div class = 'step-icon'>\n {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n {this.active && <span class = 'active-indic'></span>}\n </div>\n }\n\n {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningF16'></ifx-icon>}\n \n {/* Right connector */}\n {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n </div>\n\n {\n /* Step labels */\n (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n onClick={() => { this.handleStepClick() }} \n onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n {(this.stepperState.variant !== 'compact') && <slot/>}\n\n {this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : ''}\n {this.stepperState.variant === 'compact' && <slot/>}\n </div>\n }\n\n </div>\n );\n };\n}\n"],"names":["h"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ifx-step.entry.cjs.js","sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n gap: tokens.$ifxSize100;\n font: tokens.$ifxBodyBody03;\n\n\n &.vertical {\n flex-direction: row;\n gap: tokens.$ifxSize150;\n width: unset;\n height: 100%;\n \n .step-icon-wrapper {\n flex-direction: column;\n width: unset;\n height: 100%;\n }\n }\n \n &.compact {\n gap: 0;\n max-width: 100%;\n .step-label{\n max-width: 100%;\n cursor: auto;\n align-self: flex-start;\n color: tokens.$ifxColorEngineering500;\n }\n \n &.indicator-left {\n align-items: flex-end;\n text-align: right;\n }\n \n &.indicator-right {\n align-items: flex-start;\n }\n }\n\n .step-label {\n max-width: 90%;\n color: tokens.$ifxColorEngineering300; \n word-wrap: break-word;\n &.curr-label{\n font: tokens.$ifxHeadingHeadingCompact04; \n }\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500; \n outline-offset: 2px;\n }\n &.next-label{\n font: tokens.$ifxBodyBody05;\n }\n :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n \n &.first-step {\n .step-connector-l{\n height: 0px;\n }\n }\n \n &.last-step{\n .step-connector-r{\n height: 0px;\n }\n }\n\n &.vertical {\n &.first-step .step-connector-l,\n &.last-step .step-connector-r {\n width: 0px;\n }\n }\n\n &.complete{\n .step-connector-l, .step-connector-r, .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n &:not(.disabled) {\n .step-label{\n cursor: pointer;\n color: tokens.$ifxColorBaseBlack;\n :hover {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n } \n \n &.disabled{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background-color: tokens.$ifxColorEngineering300;\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n \n &.active{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorBaseBlack;\n }\n &.complete .step-label { \n cursor: auto;\n }\n \n } \n\n &.clickable:not(.active) .step-label{\n cursor: pointer;\n }\n\n &.error:not(.active){\n margin: auto;\n color: tokens.$ifxColorRed500;\n .step-label{\n color: tokens.$ifxColorRed500;\n :hover{\n color: tokens.$ifxColorOcean500;\n }\n }\n }\n\n &.disabled{\n .step-label{\n cursor: auto;\n }\n }\n\n &:hover{\n &.complete:not(.disabled):not(.active){\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean600;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n } \n .step-label {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n \n}\n\n.active-indic {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n border-radius: tokens.$ifxBorderRadiusRound;\n background: white;\n}\n\n.step-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n\n.step-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n background-color: tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadiusRound;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.error-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.step-connector-r, \n.step-connector-l {\n height: 2px;\n min-width: tokens.$ifxSize500;\n flex-grow: 1;\n background-color: tokens.$ifxColorEngineering300;\n}\n\n.vertical {\n .step-connector-r, \n .step-connector-l {\n height: unset;\n min-width: unset;\n width: 2px;\n min-height: tokens.$ifxSize500;\n }\n}","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 class= 'error-icon' icon='warningF16'></ifx-icon> }\n \n {/* Right connector */}\n {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n </div>\n\n {\n /* Step labels */\n (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n onClick={() => { this.handleStepClick() }} \n onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n {(this.stepperState.variant !== 'compact') && <slot/>}\n\n {this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : ''}\n {this.stepperState.variant === 'compact' && <slot/>}\n </div>\n }\n\n </div>\n );\n };\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,OAAO,GAAG,muIAAmuI;;MCctuI,IAAI,GAAA,MAAA;AANjB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOY,QAAA,IAAQ,CAAA,QAAA,GAAa,KAAK;AAC1B,QAAA,IAAQ,CAAA,QAAA,GAAa,KAAK;AACT,QAAA,IAAK,CAAA,KAAA,GAAa,KAAK;AACtB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAC3C,QAAA,IAAM,CAAA,MAAA,GAAW,CAAC;AACA,QAAA,IAAA,CAAA,YAAY,GAAiB,EAAE,UAAU,EAAE,CAAC;AACb,YAAA,cAAc,EAAE,KAAK;AACrB,YAAA,OAAO,EAAE,SAAS;YAClB,iBAAiB,EAAE,MAAM,EAAE;AAG3E,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AA6FtC;AA1FG,IAAA,YAAY,CAAC,KAAkB,EAAA;AAC3B,QAAA,MAAM,kBAAkB,GAAG,KAAK,CAAC,MAAM,CAAC,kBAAkB;QAC1D,IAAI,kBAAkB,KAAK,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE;AAClD,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;;;AAK7B,IAAA,iBAAiB,CAAC,eAAe,EAAA;AAC7B,QAAA,IAAI,CAAC,MAAM,IAAI,eAAe,CAAC,UAAU,KAAK,IAAI,CAAC,MAAM,CAAC;;IAI9D,gBAAgB,GAAA;AACZ,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACb,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;;;IAK1B,eAAe,GAAA;QACX,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC,EAAE;YAChG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;;;AAI1D,IAAA,iBAAiB,CAAC,KAAoB,EAAA;AAClC,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzH,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;;;AAI1D,IAAA,sBAAsB,CAAC,KAAY,EAAA;AAC/B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,KAAK,CAAC,eAAe,EAAE;;;IAI/B,MAAM,GAAA;AACF,QAAA,QACIA,OAAqB,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,cAAA,EAAA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAE,KAAK,EAC3B,eAAA,EAAA,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,EAC5D,OAAO,EAAG,CAAC,CAAC,KAAK,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAC/C,KAAK,EAAI,CAAgB,aAAA,EAAA,IAAI,CAAC,MAAM,KAAK,CAAC,GAAG,YAAY,GAAE,EAAE,CAAA;0BACnD,IAAI,CAAC,KAAK,GAAG,OAAO,GAAE,EAAE;0BACxB,IAAI,CAAC,YAAY,CAAC,OAAO;0BACzB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAE,EAAE;0BAC9B,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAE,EAAE;oCACrB,IAAI,CAAC,YAAY,CAAC,iBAAiB;0BAC7C,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE;0BAC3B,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,EAAE;AACjC,wBAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAE,EAAE,CAAE,CAAA,EAAA,EAE1CA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAG,mBAAmB,EAAA,EAE3B,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,SAAS,IAAIA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAG,kBAAkB,EAAE,CAAA,EAG1E,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,SAAS,KAAK,CAAC,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;AACxF,YAAAA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAG,WAAW,EAAA,EACnB,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,GAAG,EAAE,EACvF,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,KAAKA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,SAAS,EAAY,CAAA,EACvE,IAAI,CAAC,MAAM,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAG,cAAc,GAAQ,CAClD,EAGR,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,KAAI,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,MAAM,KAAKA,OAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAC,IAAI,EAAC,YAAY,EAAY,CAAA,EAGtI,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,SAAS,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAI,CAAA,iBAAA,EAAoB,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,EAAE,CAAE,CAAA,EAAA,CAAG,CAC7G;;AAIF,QAAA,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,YAAY,CAAC,UAAU,GAAC,CAAC,CAAC,CAAC;AACxJ,YAAAA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,EAAE,EACnE,KAAK,EAAI,cAAc,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,GAAG,YAAY,GAAG,YAAY,IAAI,EAAE,CAAE,CAAA,EACnH,OAAO,EAAE,MAAK,EAAG,IAAI,CAAC,eAAe,EAAE,CAAA,EAAE,EACzC,SAAS,EAAE,CAAC,CAAC,KAAO,EAAA,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAA,EAAE,EAAA,EAE9C,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,SAAS,KAAKA,OAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEpD,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,SAAS,IAAK,CAAC,IAAI,CAAC,MAAM,GAAI,QAAQ,GAAG,EAAE,EACzE,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,SAAS,IAAIA,OAAO,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACjD,CAGR;;;;;;;;;;;;"}
|
|
@@ -111,6 +111,7 @@
|
|
|
111
111
|
cursor: pointer;
|
|
112
112
|
}
|
|
113
113
|
.step-wrapper.error:not(.active) {
|
|
114
|
+
margin: auto;
|
|
114
115
|
color: #CD002F;
|
|
115
116
|
}
|
|
116
117
|
.step-wrapper.error:not(.active) .step-label {
|
|
@@ -164,6 +165,14 @@
|
|
|
164
165
|
color: white;
|
|
165
166
|
}
|
|
166
167
|
|
|
168
|
+
.error-icon {
|
|
169
|
+
width: 24px;
|
|
170
|
+
height: 24px;
|
|
171
|
+
display: flex;
|
|
172
|
+
align-items: center;
|
|
173
|
+
justify-content: center;
|
|
174
|
+
}
|
|
175
|
+
|
|
167
176
|
.step-connector-r,
|
|
168
177
|
.step-connector-l {
|
|
169
178
|
height: 2px;
|
|
@@ -51,10 +51,10 @@ export class Step {
|
|
|
51
51
|
${this.active ? 'active' : ''}
|
|
52
52
|
${this.clickable ? 'clickable' : ''}
|
|
53
53
|
${this.disabled ? 'disabled' : ''}` }, h("div", { key: 'ec1bdd77edfd87f066df44db5f3f0e115b3f7a67', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '46ae721e9ba89b6f561540d6228b4928d74522a0', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
|
|
54
|
-
h("div", { key: 'e168325daeff9ca6b2ff4e045bce5ec974e9c5d5', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '4eb3de9575a8704f0ed7e1ade9ccae31ea59c572', icon: 'check16' }), this.active && h("span", { key: 'c0c554eaae6a28783a4597633e4c60dbe14c0fda', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '
|
|
54
|
+
h("div", { key: 'e168325daeff9ca6b2ff4e045bce5ec974e9c5d5', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '4eb3de9575a8704f0ed7e1ade9ccae31ea59c572', icon: 'check16' }), this.active && h("span", { key: 'c0c554eaae6a28783a4597633e4c60dbe14c0fda', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: 'bfd1043f5e6ca1ceafab56bff6ea13c3a9c05538', class: 'error-icon', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && h("span", { key: '56b62a62a03b8fe6271a9f3f4eec2bfe24638299', class: `step-connector-r ${this.active ? 'active' : ''}` })),
|
|
55
55
|
/* Step labels */
|
|
56
56
|
(this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep + 1))) &&
|
|
57
|
-
h("div", { key: '
|
|
57
|
+
h("div", { key: '0c128ec43bdb7539bdaf3229bddead2c515c8dfd', 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: '5b00152f0e2a83bac730628b95d675b2d5fb9708' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: 'd212e5073db536450a610257a353aef702dd887e' }))));
|
|
58
58
|
}
|
|
59
59
|
;
|
|
60
60
|
static get is() { return "ifx-step"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"step.js","sourceRoot":"","sources":["../../../../src/components/stepper/step/step.tsx"],"names":[],"mappings":"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
|
|
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 class= 'error-icon' icon='warningF16'></ifx-icon> }\n \n {/* Right connector */}\n {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n </div>\n\n {\n /* Step labels */\n (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n onClick={() => { this.handleStepClick() }} \n onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n {(this.stepperState.variant !== 'compact') && <slot/>}\n\n {this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : ''}\n {this.stepperState.variant === 'compact' && <slot/>}\n </div>\n }\n\n </div>\n );\n };\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { p as proxyCustomElement, H, h } from './index.js';
|
|
2
2
|
import { d as defineCustomElement$2 } from './p-Bm-eGlq5.js';
|
|
3
3
|
|
|
4
|
-
const stepCss = ":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem \"Source Sans 3\"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start;color:#575352}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#BFBBBB;word-wrap:break-word}.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\"}.step-wrapper .step-label :hover{color:#BFBBBB}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#BFBBBB}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#BFBBBB}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#BFBBBB}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#BFBBBB}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#BFBBBB}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#BFBBBB;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#BFBBBB}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}";
|
|
4
|
+
const stepCss = ":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem \"Source Sans 3\"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start;color:#575352}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#BFBBBB;word-wrap:break-word}.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\"}.step-wrapper .step-label :hover{color:#BFBBBB}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#BFBBBB}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#BFBBBB}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#BFBBBB}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#BFBBBB}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){margin:auto;color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#BFBBBB}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#BFBBBB;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.error-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#BFBBBB}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}";
|
|
5
5
|
|
|
6
6
|
const Step = /*@__PURE__*/ proxyCustomElement(class Step extends H {
|
|
7
7
|
constructor() {
|
|
@@ -58,10 +58,10 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends H {
|
|
|
58
58
|
${this.active ? 'active' : ''}
|
|
59
59
|
${this.clickable ? 'clickable' : ''}
|
|
60
60
|
${this.disabled ? 'disabled' : ''}` }, h("div", { key: 'ec1bdd77edfd87f066df44db5f3f0e115b3f7a67', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '46ae721e9ba89b6f561540d6228b4928d74522a0', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
|
|
61
|
-
h("div", { key: 'e168325daeff9ca6b2ff4e045bce5ec974e9c5d5', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '4eb3de9575a8704f0ed7e1ade9ccae31ea59c572', icon: 'check16' }), this.active && h("span", { key: 'c0c554eaae6a28783a4597633e4c60dbe14c0fda', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '
|
|
61
|
+
h("div", { key: 'e168325daeff9ca6b2ff4e045bce5ec974e9c5d5', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '4eb3de9575a8704f0ed7e1ade9ccae31ea59c572', icon: 'check16' }), this.active && h("span", { key: 'c0c554eaae6a28783a4597633e4c60dbe14c0fda', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: 'bfd1043f5e6ca1ceafab56bff6ea13c3a9c05538', class: 'error-icon', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && h("span", { key: '56b62a62a03b8fe6271a9f3f4eec2bfe24638299', class: `step-connector-r ${this.active ? 'active' : ''}` })),
|
|
62
62
|
/* Step labels */
|
|
63
63
|
(this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep + 1))) &&
|
|
64
|
-
h("div", { key: '
|
|
64
|
+
h("div", { key: '0c128ec43bdb7539bdaf3229bddead2c515c8dfd', 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: '5b00152f0e2a83bac730628b95d675b2d5fb9708' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: 'd212e5073db536450a610257a353aef702dd887e' }))));
|
|
65
65
|
}
|
|
66
66
|
;
|
|
67
67
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-step.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n gap: tokens.$ifxSize100;\n font: tokens.$ifxBodyBody03;\n\n\n &.vertical {\n flex-direction: row;\n gap: tokens.$ifxSize150;\n width: unset;\n height: 100%;\n \n .step-icon-wrapper {\n flex-direction: column;\n width: unset;\n height: 100%;\n }\n }\n \n &.compact {\n gap: 0;\n max-width: 100%;\n .step-label{\n max-width: 100%;\n cursor: auto;\n align-self: flex-start;\n color: tokens.$ifxColorEngineering500;\n }\n \n &.indicator-left {\n align-items: flex-end;\n text-align: right;\n }\n \n &.indicator-right {\n align-items: flex-start;\n }\n }\n\n .step-label {\n max-width: 90%;\n color: tokens.$ifxColorEngineering300; \n word-wrap: break-word;\n &.curr-label{\n font: tokens.$ifxHeadingHeadingCompact04; \n }\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500; \n outline-offset: 2px;\n }\n &.next-label{\n font: tokens.$ifxBodyBody05;\n }\n :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n \n &.first-step {\n .step-connector-l{\n height: 0px;\n }\n }\n \n &.last-step{\n .step-connector-r{\n height: 0px;\n }\n }\n\n &.vertical {\n &.first-step .step-connector-l,\n &.last-step .step-connector-r {\n width: 0px;\n }\n }\n\n &.complete{\n .step-connector-l, .step-connector-r, .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n &:not(.disabled) {\n .step-label{\n cursor: pointer;\n color: tokens.$ifxColorBaseBlack;\n :hover {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n } \n \n &.disabled{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background-color: tokens.$ifxColorEngineering300;\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n \n &.active{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorBaseBlack;\n }\n &.complete .step-label { \n cursor: auto;\n }\n \n } \n\n &.clickable:not(.active) .step-label{\n cursor: pointer;\n }\n\n &.error:not(.active){\n color: tokens.$ifxColorRed500;\n .step-label{\n color: tokens.$ifxColorRed500;\n :hover{\n color: tokens.$ifxColorOcean500;\n }\n }\n }\n\n &.disabled{\n .step-label{\n cursor: auto;\n }\n }\n\n &:hover{\n &.complete:not(.disabled):not(.active){\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean600;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n } \n .step-label {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n \n}\n\n.active-indic {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n border-radius: tokens.$ifxBorderRadiusRound;\n background: white;\n}\n\n.step-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n\n.step-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n background-color: tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadiusRound;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.step-connector-r, \n.step-connector-l {\n height: 2px;\n min-width: tokens.$ifxSize500;\n flex-grow: 1;\n background-color: tokens.$ifxColorEngineering300;\n}\n\n.vertical {\n .step-connector-r, \n .step-connector-l {\n height: unset;\n min-width: unset;\n width: 2px;\n min-height: tokens.$ifxSize500;\n }\n}","import { h, \n Component, \n Listen, \n Prop, \n State, \n Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n tag: 'ifx-step',\n styleUrl: 'step.scss',\n shadow: true\n})\n\nexport class Step {\n @Prop() complete?: boolean = false;\n @Prop() disabled?: boolean = false;\n @Prop({ mutable: true }) error?: boolean = false;\n @Prop({ reflect: false }) lastStep: boolean = false;\n @Prop() stepId: number = 1;\n @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n showStepNumber: false, \n variant: 'default', \n indicatorPosition: 'left' };\n\n @State() active: boolean;\n @State() clickable: boolean = false;\n\n @Listen('ifxChange', { target: 'document' })\n onStepChange(event: CustomEvent) {\n const previousActiveStep = event.detail.previousActiveStep;\n if (previousActiveStep === this.stepId && this.error) {\n this.clickable = true;\n }\n } \n\n @Watch('stepperState')\n updateCurrentStep(newStepperState) {\n this.active = (newStepperState.activeStep === this.stepId)\n }\n\n @Watch('active')\n updateErrorState(){\n if (this.active) {\n this.error = false;\n }\n }\n\n\n handleStepClick() {\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete)) {\n this.stepperState.setActiveStep(this.stepId, true)\n } \n }\n \n handleStepKeyDown(event: KeyboardEvent) {\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete) && event.key === 'Enter') {\n this.stepperState.setActiveStep(this.stepId, true)\n } \n }\n \n stopOnClickPropogation(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n }\n }\n\n render() {\n return (\n <div aria-current = {this.active ? 'step': false}\n aria-disabled = {this.active || this.complete ? false : true}\n onClick={ (e) => this.stopOnClickPropogation(e) }\n class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n ${this.error ? 'error': ''}\n ${this.stepperState.variant}\n ${this.complete ? 'complete': ''}\n ${this.lastStep ? 'last-step': ''}\n indicator-${this.stepperState.indicatorPosition}\n ${this.active ? 'active' : ''}\n ${this.clickable ? 'clickable' : ''}\n ${this.disabled ? 'disabled': ''}`}>\n\n <div class = 'step-icon-wrapper'>\n {/* Left connector */}\n {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n {\n (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) && \n <div class = 'step-icon'>\n {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n {this.active && <span class = 'active-indic'></span>}\n </div>\n }\n\n {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningF16'></ifx-icon>}\n \n {/* Right connector */}\n {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n </div>\n\n {\n /* Step labels */\n (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n onClick={() => { this.handleStepClick() }} \n onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n {(this.stepperState.variant !== 'compact') && <slot/>}\n\n {this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : ''}\n {this.stepperState.variant === 'compact' && <slot/>}\n </div>\n }\n\n </div>\n );\n };\n}\n"],"version":3}
|
|
1
|
+
{"file":"ifx-step.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n gap: tokens.$ifxSize100;\n font: tokens.$ifxBodyBody03;\n\n\n &.vertical {\n flex-direction: row;\n gap: tokens.$ifxSize150;\n width: unset;\n height: 100%;\n \n .step-icon-wrapper {\n flex-direction: column;\n width: unset;\n height: 100%;\n }\n }\n \n &.compact {\n gap: 0;\n max-width: 100%;\n .step-label{\n max-width: 100%;\n cursor: auto;\n align-self: flex-start;\n color: tokens.$ifxColorEngineering500;\n }\n \n &.indicator-left {\n align-items: flex-end;\n text-align: right;\n }\n \n &.indicator-right {\n align-items: flex-start;\n }\n }\n\n .step-label {\n max-width: 90%;\n color: tokens.$ifxColorEngineering300; \n word-wrap: break-word;\n &.curr-label{\n font: tokens.$ifxHeadingHeadingCompact04; \n }\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500; \n outline-offset: 2px;\n }\n &.next-label{\n font: tokens.$ifxBodyBody05;\n }\n :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n \n &.first-step {\n .step-connector-l{\n height: 0px;\n }\n }\n \n &.last-step{\n .step-connector-r{\n height: 0px;\n }\n }\n\n &.vertical {\n &.first-step .step-connector-l,\n &.last-step .step-connector-r {\n width: 0px;\n }\n }\n\n &.complete{\n .step-connector-l, .step-connector-r, .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n &:not(.disabled) {\n .step-label{\n cursor: pointer;\n color: tokens.$ifxColorBaseBlack;\n :hover {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n } \n \n &.disabled{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background-color: tokens.$ifxColorEngineering300;\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n \n &.active{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorBaseBlack;\n }\n &.complete .step-label { \n cursor: auto;\n }\n \n } \n\n &.clickable:not(.active) .step-label{\n cursor: pointer;\n }\n\n &.error:not(.active){\n margin: auto;\n color: tokens.$ifxColorRed500;\n .step-label{\n color: tokens.$ifxColorRed500;\n :hover{\n color: tokens.$ifxColorOcean500;\n }\n }\n }\n\n &.disabled{\n .step-label{\n cursor: auto;\n }\n }\n\n &:hover{\n &.complete:not(.disabled):not(.active){\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean600;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n } \n .step-label {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n \n}\n\n.active-indic {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n border-radius: tokens.$ifxBorderRadiusRound;\n background: white;\n}\n\n.step-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n\n.step-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n background-color: tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadiusRound;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.error-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.step-connector-r, \n.step-connector-l {\n height: 2px;\n min-width: tokens.$ifxSize500;\n flex-grow: 1;\n background-color: tokens.$ifxColorEngineering300;\n}\n\n.vertical {\n .step-connector-r, \n .step-connector-l {\n height: unset;\n min-width: unset;\n width: 2px;\n min-height: tokens.$ifxSize500;\n }\n}","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 class= 'error-icon' icon='warningF16'></ifx-icon> }\n \n {/* Right connector */}\n {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n </div>\n\n {\n /* Step labels */\n (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n onClick={() => { this.handleStepClick() }} \n onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n {(this.stepperState.variant !== 'compact') && <slot/>}\n\n {this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : ''}\n {this.stepperState.variant === 'compact' && <slot/>}\n </div>\n }\n\n </div>\n );\n };\n}\n"],"version":3}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h } from './index-DtIEDtZ8.js';
|
|
2
2
|
|
|
3
|
-
const stepCss = ":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem \"Source Sans 3\"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start;color:#575352}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#BFBBBB;word-wrap:break-word}.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\"}.step-wrapper .step-label :hover{color:#BFBBBB}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#BFBBBB}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#BFBBBB}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#BFBBBB}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#BFBBBB}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#BFBBBB}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#BFBBBB;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#BFBBBB}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}";
|
|
3
|
+
const stepCss = ":root{--ifx-font-family:\"Source Sans 3\", 'Arial, sans-serif'}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem \"Source Sans 3\"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start;color:#575352}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#BFBBBB;word-wrap:break-word}.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\"}.step-wrapper .step-label :hover{color:#BFBBBB}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#BFBBBB}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#BFBBBB}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#BFBBBB}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#BFBBBB}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){margin:auto;color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#BFBBBB}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#BFBBBB;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.error-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#BFBBBB}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}";
|
|
4
4
|
|
|
5
5
|
const Step = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -55,10 +55,10 @@ const Step = class {
|
|
|
55
55
|
${this.active ? 'active' : ''}
|
|
56
56
|
${this.clickable ? 'clickable' : ''}
|
|
57
57
|
${this.disabled ? 'disabled' : ''}` }, h("div", { key: 'ec1bdd77edfd87f066df44db5f3f0e115b3f7a67', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '46ae721e9ba89b6f561540d6228b4928d74522a0', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
|
|
58
|
-
h("div", { key: 'e168325daeff9ca6b2ff4e045bce5ec974e9c5d5', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '4eb3de9575a8704f0ed7e1ade9ccae31ea59c572', icon: 'check16' }), this.active && h("span", { key: 'c0c554eaae6a28783a4597633e4c60dbe14c0fda', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: '
|
|
58
|
+
h("div", { key: 'e168325daeff9ca6b2ff4e045bce5ec974e9c5d5', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '4eb3de9575a8704f0ed7e1ade9ccae31ea59c572', icon: 'check16' }), this.active && h("span", { key: 'c0c554eaae6a28783a4597633e4c60dbe14c0fda', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: 'bfd1043f5e6ca1ceafab56bff6ea13c3a9c05538', class: 'error-icon', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && h("span", { key: '56b62a62a03b8fe6271a9f3f4eec2bfe24638299', class: `step-connector-r ${this.active ? 'active' : ''}` })),
|
|
59
59
|
/* Step labels */
|
|
60
60
|
(this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep + 1))) &&
|
|
61
|
-
h("div", { key: '
|
|
61
|
+
h("div", { key: '0c128ec43bdb7539bdaf3229bddead2c515c8dfd', 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: '5b00152f0e2a83bac730628b95d675b2d5fb9708' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: 'd212e5073db536450a610257a353aef702dd887e' }))));
|
|
62
62
|
}
|
|
63
63
|
;
|
|
64
64
|
static get watchers() { return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ifx-step.entry.js","sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n gap: tokens.$ifxSize100;\n font: tokens.$ifxBodyBody03;\n\n\n &.vertical {\n flex-direction: row;\n gap: tokens.$ifxSize150;\n width: unset;\n height: 100%;\n \n .step-icon-wrapper {\n flex-direction: column;\n width: unset;\n height: 100%;\n }\n }\n \n &.compact {\n gap: 0;\n max-width: 100%;\n .step-label{\n max-width: 100%;\n cursor: auto;\n align-self: flex-start;\n color: tokens.$ifxColorEngineering500;\n }\n \n &.indicator-left {\n align-items: flex-end;\n text-align: right;\n }\n \n &.indicator-right {\n align-items: flex-start;\n }\n }\n\n .step-label {\n max-width: 90%;\n color: tokens.$ifxColorEngineering300; \n word-wrap: break-word;\n &.curr-label{\n font: tokens.$ifxHeadingHeadingCompact04; \n }\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500; \n outline-offset: 2px;\n }\n &.next-label{\n font: tokens.$ifxBodyBody05;\n }\n :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n \n &.first-step {\n .step-connector-l{\n height: 0px;\n }\n }\n \n &.last-step{\n .step-connector-r{\n height: 0px;\n }\n }\n\n &.vertical {\n &.first-step .step-connector-l,\n &.last-step .step-connector-r {\n width: 0px;\n }\n }\n\n &.complete{\n .step-connector-l, .step-connector-r, .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n &:not(.disabled) {\n .step-label{\n cursor: pointer;\n color: tokens.$ifxColorBaseBlack;\n :hover {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n } \n \n &.disabled{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background-color: tokens.$ifxColorEngineering300;\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n \n &.active{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorBaseBlack;\n }\n &.complete .step-label { \n cursor: auto;\n }\n \n } \n\n &.clickable:not(.active) .step-label{\n cursor: pointer;\n }\n\n &.error:not(.active){\n color: tokens.$ifxColorRed500;\n .step-label{\n color: tokens.$ifxColorRed500;\n :hover{\n color: tokens.$ifxColorOcean500;\n }\n }\n }\n\n &.disabled{\n .step-label{\n cursor: auto;\n }\n }\n\n &:hover{\n &.complete:not(.disabled):not(.active){\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean600;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n } \n .step-label {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n \n}\n\n.active-indic {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n border-radius: tokens.$ifxBorderRadiusRound;\n background: white;\n}\n\n.step-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n\n.step-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n background-color: tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadiusRound;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.step-connector-r, \n.step-connector-l {\n height: 2px;\n min-width: tokens.$ifxSize500;\n flex-grow: 1;\n background-color: tokens.$ifxColorEngineering300;\n}\n\n.vertical {\n .step-connector-r, \n .step-connector-l {\n height: unset;\n min-width: unset;\n width: 2px;\n min-height: tokens.$ifxSize500;\n }\n}","import { h, \n Component, \n Listen, \n Prop, \n State, \n Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n tag: 'ifx-step',\n styleUrl: 'step.scss',\n shadow: true\n})\n\nexport class Step {\n @Prop() complete?: boolean = false;\n @Prop() disabled?: boolean = false;\n @Prop({ mutable: true }) error?: boolean = false;\n @Prop({ reflect: false }) lastStep: boolean = false;\n @Prop() stepId: number = 1;\n @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n showStepNumber: false, \n variant: 'default', \n indicatorPosition: 'left' };\n\n @State() active: boolean;\n @State() clickable: boolean = false;\n\n @Listen('ifxChange', { target: 'document' })\n onStepChange(event: CustomEvent) {\n const previousActiveStep = event.detail.previousActiveStep;\n if (previousActiveStep === this.stepId && this.error) {\n this.clickable = true;\n }\n } \n\n @Watch('stepperState')\n updateCurrentStep(newStepperState) {\n this.active = (newStepperState.activeStep === this.stepId)\n }\n\n @Watch('active')\n updateErrorState(){\n if (this.active) {\n this.error = false;\n }\n }\n\n\n handleStepClick() {\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete)) {\n this.stepperState.setActiveStep(this.stepId, true)\n } \n }\n \n handleStepKeyDown(event: KeyboardEvent) {\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete) && event.key === 'Enter') {\n this.stepperState.setActiveStep(this.stepId, true)\n } \n }\n \n stopOnClickPropogation(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n }\n }\n\n render() {\n return (\n <div aria-current = {this.active ? 'step': false}\n aria-disabled = {this.active || this.complete ? false : true}\n onClick={ (e) => this.stopOnClickPropogation(e) }\n class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n ${this.error ? 'error': ''}\n ${this.stepperState.variant}\n ${this.complete ? 'complete': ''}\n ${this.lastStep ? 'last-step': ''}\n indicator-${this.stepperState.indicatorPosition}\n ${this.active ? 'active' : ''}\n ${this.clickable ? 'clickable' : ''}\n ${this.disabled ? 'disabled': ''}`}>\n\n <div class = 'step-icon-wrapper'>\n {/* Left connector */}\n {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n {\n (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) && \n <div class = 'step-icon'>\n {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n {this.active && <span class = 'active-indic'></span>}\n </div>\n }\n\n {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningF16'></ifx-icon>}\n \n {/* Right connector */}\n {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n </div>\n\n {\n /* Step labels */\n (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n onClick={() => { this.handleStepClick() }} \n onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n {(this.stepperState.variant !== 'compact') && <slot/>}\n\n {this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : ''}\n {this.stepperState.variant === 'compact' && <slot/>}\n </div>\n }\n\n </div>\n );\n };\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ifx-step.entry.js","sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n gap: tokens.$ifxSize100;\n font: tokens.$ifxBodyBody03;\n\n\n &.vertical {\n flex-direction: row;\n gap: tokens.$ifxSize150;\n width: unset;\n height: 100%;\n \n .step-icon-wrapper {\n flex-direction: column;\n width: unset;\n height: 100%;\n }\n }\n \n &.compact {\n gap: 0;\n max-width: 100%;\n .step-label{\n max-width: 100%;\n cursor: auto;\n align-self: flex-start;\n color: tokens.$ifxColorEngineering500;\n }\n \n &.indicator-left {\n align-items: flex-end;\n text-align: right;\n }\n \n &.indicator-right {\n align-items: flex-start;\n }\n }\n\n .step-label {\n max-width: 90%;\n color: tokens.$ifxColorEngineering300; \n word-wrap: break-word;\n &.curr-label{\n font: tokens.$ifxHeadingHeadingCompact04; \n }\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500; \n outline-offset: 2px;\n }\n &.next-label{\n font: tokens.$ifxBodyBody05;\n }\n :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n \n &.first-step {\n .step-connector-l{\n height: 0px;\n }\n }\n \n &.last-step{\n .step-connector-r{\n height: 0px;\n }\n }\n\n &.vertical {\n &.first-step .step-connector-l,\n &.last-step .step-connector-r {\n width: 0px;\n }\n }\n\n &.complete{\n .step-connector-l, .step-connector-r, .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n &:not(.disabled) {\n .step-label{\n cursor: pointer;\n color: tokens.$ifxColorBaseBlack;\n :hover {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n } \n \n &.disabled{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background-color: tokens.$ifxColorEngineering300;\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n \n &.active{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorBaseBlack;\n }\n &.complete .step-label { \n cursor: auto;\n }\n \n } \n\n &.clickable:not(.active) .step-label{\n cursor: pointer;\n }\n\n &.error:not(.active){\n margin: auto;\n color: tokens.$ifxColorRed500;\n .step-label{\n color: tokens.$ifxColorRed500;\n :hover{\n color: tokens.$ifxColorOcean500;\n }\n }\n }\n\n &.disabled{\n .step-label{\n cursor: auto;\n }\n }\n\n &:hover{\n &.complete:not(.disabled):not(.active){\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean600;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n } \n .step-label {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n \n}\n\n.active-indic {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n border-radius: tokens.$ifxBorderRadiusRound;\n background: white;\n}\n\n.step-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n\n.step-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n background-color: tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadiusRound;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.error-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.step-connector-r, \n.step-connector-l {\n height: 2px;\n min-width: tokens.$ifxSize500;\n flex-grow: 1;\n background-color: tokens.$ifxColorEngineering300;\n}\n\n.vertical {\n .step-connector-r, \n .step-connector-l {\n height: unset;\n min-width: unset;\n width: 2px;\n min-height: tokens.$ifxSize500;\n }\n}","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 class= 'error-icon' icon='warningF16'></ifx-icon> }\n \n {/* Right connector */}\n {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n </div>\n\n {\n /* Step labels */\n (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n onClick={() => { this.handleStepClick() }} \n onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n {(this.stepperState.variant !== 'compact') && <slot/>}\n\n {this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : ''}\n {this.stepperState.variant === 'compact' && <slot/>}\n </div>\n }\n\n </div>\n );\n };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ifx-step.entry.esm.js","sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n gap: tokens.$ifxSize100;\n font: tokens.$ifxBodyBody03;\n\n\n &.vertical {\n flex-direction: row;\n gap: tokens.$ifxSize150;\n width: unset;\n height: 100%;\n \n .step-icon-wrapper {\n flex-direction: column;\n width: unset;\n height: 100%;\n }\n }\n \n &.compact {\n gap: 0;\n max-width: 100%;\n .step-label{\n max-width: 100%;\n cursor: auto;\n align-self: flex-start;\n color: tokens.$ifxColorEngineering500;\n }\n \n &.indicator-left {\n align-items: flex-end;\n text-align: right;\n }\n \n &.indicator-right {\n align-items: flex-start;\n }\n }\n\n .step-label {\n max-width: 90%;\n color: tokens.$ifxColorEngineering300; \n word-wrap: break-word;\n &.curr-label{\n font: tokens.$ifxHeadingHeadingCompact04; \n }\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500; \n outline-offset: 2px;\n }\n &.next-label{\n font: tokens.$ifxBodyBody05;\n }\n :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n \n &.first-step {\n .step-connector-l{\n height: 0px;\n }\n }\n \n &.last-step{\n .step-connector-r{\n height: 0px;\n }\n }\n\n &.vertical {\n &.first-step .step-connector-l,\n &.last-step .step-connector-r {\n width: 0px;\n }\n }\n\n &.complete{\n .step-connector-l, .step-connector-r, .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n &:not(.disabled) {\n .step-label{\n cursor: pointer;\n color: tokens.$ifxColorBaseBlack;\n :hover {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n } \n \n &.disabled{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background-color: tokens.$ifxColorEngineering300;\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n \n &.active{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorBaseBlack;\n }\n &.complete .step-label { \n cursor: auto;\n }\n \n } \n\n &.clickable:not(.active) .step-label{\n cursor: pointer;\n }\n\n &.error:not(.active){\n color: tokens.$ifxColorRed500;\n .step-label{\n color: tokens.$ifxColorRed500;\n :hover{\n color: tokens.$ifxColorOcean500;\n }\n }\n }\n\n &.disabled{\n .step-label{\n cursor: auto;\n }\n }\n\n &:hover{\n &.complete:not(.disabled):not(.active){\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean600;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n } \n .step-label {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n \n}\n\n.active-indic {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n border-radius: tokens.$ifxBorderRadiusRound;\n background: white;\n}\n\n.step-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n\n.step-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n background-color: tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadiusRound;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.step-connector-r, \n.step-connector-l {\n height: 2px;\n min-width: tokens.$ifxSize500;\n flex-grow: 1;\n background-color: tokens.$ifxColorEngineering300;\n}\n\n.vertical {\n .step-connector-r, \n .step-connector-l {\n height: unset;\n min-width: unset;\n width: 2px;\n min-height: tokens.$ifxSize500;\n }\n}","import { h, \n Component, \n Listen, \n Prop, \n State, \n Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n tag: 'ifx-step',\n styleUrl: 'step.scss',\n shadow: true\n})\n\nexport class Step {\n @Prop() complete?: boolean = false;\n @Prop() disabled?: boolean = false;\n @Prop({ mutable: true }) error?: boolean = false;\n @Prop({ reflect: false }) lastStep: boolean = false;\n @Prop() stepId: number = 1;\n @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n showStepNumber: false, \n variant: 'default', \n indicatorPosition: 'left' };\n\n @State() active: boolean;\n @State() clickable: boolean = false;\n\n @Listen('ifxChange', { target: 'document' })\n onStepChange(event: CustomEvent) {\n const previousActiveStep = event.detail.previousActiveStep;\n if (previousActiveStep === this.stepId && this.error) {\n this.clickable = true;\n }\n } \n\n @Watch('stepperState')\n updateCurrentStep(newStepperState) {\n this.active = (newStepperState.activeStep === this.stepId)\n }\n\n @Watch('active')\n updateErrorState(){\n if (this.active) {\n this.error = false;\n }\n }\n\n\n handleStepClick() {\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete)) {\n this.stepperState.setActiveStep(this.stepId, true)\n } \n }\n \n handleStepKeyDown(event: KeyboardEvent) {\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete) && event.key === 'Enter') {\n this.stepperState.setActiveStep(this.stepId, true)\n } \n }\n \n stopOnClickPropogation(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n }\n }\n\n render() {\n return (\n <div aria-current = {this.active ? 'step': false}\n aria-disabled = {this.active || this.complete ? false : true}\n onClick={ (e) => this.stopOnClickPropogation(e) }\n class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n ${this.error ? 'error': ''}\n ${this.stepperState.variant}\n ${this.complete ? 'complete': ''}\n ${this.lastStep ? 'last-step': ''}\n indicator-${this.stepperState.indicatorPosition}\n ${this.active ? 'active' : ''}\n ${this.clickable ? 'clickable' : ''}\n ${this.disabled ? 'disabled': ''}`}>\n\n <div class = 'step-icon-wrapper'>\n {/* Left connector */}\n {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n {\n (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) && \n <div class = 'step-icon'>\n {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n {this.active && <span class = 'active-indic'></span>}\n </div>\n }\n\n {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningF16'></ifx-icon>}\n \n {/* Right connector */}\n {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n </div>\n\n {\n /* Step labels */\n (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n onClick={() => { this.handleStepClick() }} \n onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n {(this.stepperState.variant !== 'compact') && <slot/>}\n\n {this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : ''}\n {this.stepperState.variant === 'compact' && <slot/>}\n </div>\n }\n\n </div>\n );\n };\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ifx-step.entry.esm.js","sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n gap: tokens.$ifxSize100;\n font: tokens.$ifxBodyBody03;\n\n\n &.vertical {\n flex-direction: row;\n gap: tokens.$ifxSize150;\n width: unset;\n height: 100%;\n \n .step-icon-wrapper {\n flex-direction: column;\n width: unset;\n height: 100%;\n }\n }\n \n &.compact {\n gap: 0;\n max-width: 100%;\n .step-label{\n max-width: 100%;\n cursor: auto;\n align-self: flex-start;\n color: tokens.$ifxColorEngineering500;\n }\n \n &.indicator-left {\n align-items: flex-end;\n text-align: right;\n }\n \n &.indicator-right {\n align-items: flex-start;\n }\n }\n\n .step-label {\n max-width: 90%;\n color: tokens.$ifxColorEngineering300; \n word-wrap: break-word;\n &.curr-label{\n font: tokens.$ifxHeadingHeadingCompact04; \n }\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500; \n outline-offset: 2px;\n }\n &.next-label{\n font: tokens.$ifxBodyBody05;\n }\n :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n \n &.first-step {\n .step-connector-l{\n height: 0px;\n }\n }\n \n &.last-step{\n .step-connector-r{\n height: 0px;\n }\n }\n\n &.vertical {\n &.first-step .step-connector-l,\n &.last-step .step-connector-r {\n width: 0px;\n }\n }\n\n &.complete{\n .step-connector-l, .step-connector-r, .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n &:not(.disabled) {\n .step-label{\n cursor: pointer;\n color: tokens.$ifxColorBaseBlack;\n :hover {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n } \n \n &.disabled{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background-color: tokens.$ifxColorEngineering300;\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n \n &.active{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorBaseBlack;\n }\n &.complete .step-label { \n cursor: auto;\n }\n \n } \n\n &.clickable:not(.active) .step-label{\n cursor: pointer;\n }\n\n &.error:not(.active){\n margin: auto;\n color: tokens.$ifxColorRed500;\n .step-label{\n color: tokens.$ifxColorRed500;\n :hover{\n color: tokens.$ifxColorOcean500;\n }\n }\n }\n\n &.disabled{\n .step-label{\n cursor: auto;\n }\n }\n\n &:hover{\n &.complete:not(.disabled):not(.active){\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean600;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n } \n .step-label {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n \n}\n\n.active-indic {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n border-radius: tokens.$ifxBorderRadiusRound;\n background: white;\n}\n\n.step-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n\n.step-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n background-color: tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadiusRound;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.error-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.step-connector-r, \n.step-connector-l {\n height: 2px;\n min-width: tokens.$ifxSize500;\n flex-grow: 1;\n background-color: tokens.$ifxColorEngineering300;\n}\n\n.vertical {\n .step-connector-r, \n .step-connector-l {\n height: unset;\n min-width: unset;\n width: 2px;\n min-height: tokens.$ifxSize500;\n }\n}","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 class= 'error-icon' icon='warningF16'></ifx-icon> }\n \n {/* Right connector */}\n {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n </div>\n\n {\n /* Step labels */\n (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n onClick={() => { this.handleStepClick() }} \n onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n {(this.stepperState.variant !== 'compact') && <slot/>}\n\n {this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : ''}\n {this.stepperState.variant === 'compact' && <slot/>}\n </div>\n }\n\n </div>\n );\n };\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as a,g as l,b as i}from"./p-DtIEDtZ8.js";export{s as setNonce}from"./p-DtIEDtZ8.js";var t=()=>{{n(a.prototype)}const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};var n=e=>{const a=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return a.call(this,e)}const l=a.call(this,false);const i=this.childNodes;if(e){for(let e=0;e<i.length;e++){if(i[e].nodeType!==2){l.appendChild(i[e].cloneNode(true))}}}return l}};t().then((async e=>{await l();return i(JSON.parse('[["p-0d9da371",[[257,"ifx-table",{"cols":[8],"rows":[8],"buttonRendererOptions":[16,"button-renderer-options"],"iconButtonRendererOptions":[16,"icon-button-renderer-options"],"checkboxRendererOptions":[16,"checkbox-renderer-options"],"rowHeight":[1,"row-height"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationItemsPerPage":[1,"pagination-items-per-page"],"filterOrientation":[1,"filter-orientation"],"headline":[1],"variant":[1],"serverSidePagination":[4,"server-side-pagination"],"serverPageChangeHandler":[16,"server-page-change-handler"],"enableSelection":[4,"enable-selection"],"showLoading":[4,"show-loading"],"currentPage":[32],"rowData":[32],"colData":[32],"filterOptions":[32],"currentFilters":[32],"uniqueKey":[32],"paginationPageSize":[32],"showSidebarFilters":[32],"matchingResultsCount":[32],"selectedRows":[32],"selectAll":[32],"selectedRowsData":[32],"onBtShowLoading":[64]},[[0,"ifxItemsPerPageChange","handleResultsPerPageChange"],[0,"ifxChange","handleChipChange"]],{"rows":["rowsChanged"],"cols":["colsChanged"],"buttonRendererOptions":["onButtonRendererOptionsChanged"],"iconButtonRendererOptions":["onIconButtonRendererOptionsChanged"],"checkboxRendererOptions":["onCheckboxRendererOptionsChanged"]}]]],["p-372fa9eb",[[257,"ifx-templates-ui",null,[[0,"fieldError","handleError"],[0,"toggleTemplates","filterTemplates"]]]]],["p-d4fea918",[[257,"ifx-set-filter",{"filterName":[1,"filter-name"],"filterLabel":[1,"filter-label"],"placeholder":[1],"type":[1],"options":[1],"filterValues":[32]}]]],["p-29d78bf2",[[257,"ifx-file-upload",{"dragAndDrop":[4,"drag-and-drop"],"required":[4],"disabled":[4],"maxFileSizeMB":[2,"max-file-size-m-b"],"allowedFileTypes":[1,"allowed-file-types"],"additionalAllowedFileTypes":[1,"additional-allowed-file-types"],"allowAnyFileType":[4,"allow-any-file-type"],"allowedFileExtensions":[1,"allowed-file-extensions"],"uploadHandler":[16,"upload-handler"],"maxFiles":[6146,"max-files"],"label":[1],"labelRequiredError":[1,"label-required-error"],"labelBrowseFiles":[1,"label-browse-files"],"labelDragAndDrop":[1,"label-drag-and-drop"],"labelUploadedFilesHeading":[1,"label-uploaded-files-heading"],"labelFileTooLarge":[1,"label-file-too-large"],"labelUnsupportedFileType":[1,"label-unsupported-file-type"],"labelUploaded":[1,"label-uploaded"],"labelUploadFailed":[1,"label-upload-failed"],"labelSupportedFormatsTemplate":[1,"label-supported-formats-template"],"labelFileSingular":[1,"label-file-singular"],"labelFilePlural":[1,"label-file-plural"],"labelMaxFilesInfo":[1,"label-max-files-info"],"labelMaxFilesExceeded":[1,"label-max-files-exceeded"],"ariaLabelBrowseFiles":[1,"aria-label-browse-files"],"ariaLabelDropzone":[1,"aria-label-dropzone"],"ariaLabelFileInput":[1,"aria-label-file-input"],"ariaLabelRemoveFile":[1,"aria-label-remove-file"],"ariaLabelCancelUpload":[1,"aria-label-cancel-upload"],"ariaLabelRetryUpload":[1,"aria-label-retry-upload"],"ariaLabelUploadingStatus":[1,"aria-label-uploading-status"],"ariaLabelUploadedStatus":[1,"aria-label-uploaded-status"],"ariaLabelUploadFailedStatus":[1,"aria-label-upload-failed-status"],"isDragOver":[32],"files":[32],"uploadTasks":[32],"rejectedSizeFiles":[32],"rejectedTypeFiles":[32],"requiredError":[32],"statusMessage":[32],"injectDemoState":[64],"triggerDemoValidation":[64]}]]],["p-76e88a63",[[257,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"copiedIcon":[32],"htmlTag":[32],"iconName":[32],"searchTerm":[32]}]]],["p-e7b72d33",[[257,"ifx-faq"]]],["p-ba4ee343",[[257,"ifx-list-entry",{"value":[1028],"label":[1],"type":[1]},[[0,"ifxChange","handleFilterEntryChange"]],{"value":["valueChanged"]}]]],["p-fd206fce",[[257,"ifx-overview-table"]]],["p-55227732",[[257,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-83816596",[[257,"ifx-filter-accordion",{"maxVisibleItems":[2,"max-visible-items"],"filterGroupName":[1,"filter-group-name"],"expanded":[32],"count":[32],"totalItems":[32]}]]],["p-d3a6bbf7",[[257,"ifx-filter-bar",{"maxShownFilters":[2,"max-shown-filters"],"showMoreFiltersButton":[4,"show-more-filters-button"],"selectedOptions":[32],"showAllFilters":[32],"visibleSlots":[32]}]]],["p-b5efb1d6",[[257,"ifx-filter-search",{"filterName":[1,"filter-name"],"disabled":[4],"filterValue":[1025,"filter-value"],"filterKey":[1,"filter-key"],"filterOrientation":[1,"filter-orientation"],"placeholder":[1],"showDeleteIcon":[32]},[[0,"ifxInput","handleFilterSearchChange"]],{"value":["valueChanged"]}]]],["p-7468590a",[[257,"ifx-list",{"name":[1],"maxVisibleItems":[2,"max-visible-items"],"type":[1],"resetTrigger":[1028,"reset-trigger"],"expanded":[32],"showMore":[32],"selectedCount":[32],"totalItems":[32],"internalResetTrigger":[32]},null,{"type":["handleTypeChange"],"resetTrigger":["resetTriggerChanged"]}]]],["p-550283fa",[[257,"ifx-modal",{"opened":[1540],"caption":[1],"captionAriaLabel":[1,"caption-aria-label"],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"size":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"closeButtonAriaLabel":[1,"close-button-aria-label"],"showCloseButton":[4,"show-close-button"],"showModal":[32],"slotButtonsPresent":[32]},null,{"opened":["openedChanged"]}]]],["p-8c44be53",[[257,"ifx-navbar-item",{"showLabel":[4,"show-label"],"icon":[1],"href":[1],"target":[1],"hideOnMobile":[4,"hide-on-mobile"],"numberIndicator":[2,"number-indicator"],"dotIndicator":[4,"dot-indicator"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"isSidebarMenuItem":[32],"itemPosition":[32],"hideComponent":[64],"showComponent":[64],"toggleChildren":[64],"moveChildComponentsIntoSubLayerMenu":[64],"toggleFirstLayerItem":[64],"addMenuItemClass":[64],"moveChildComponentsBackIntoNavbar":[64],"returnToFirstLayer":[64],"setMenuItemPosition":[64],"setItemSideSpecifications":[64]},[[0,"focusout","handleFocusOut"],[5,"mousedown","handleOutsideClick"]]]]],["p-249372a1",[[257,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"maxlength":[2],"autocomplete":[1],"internalState":[32],"onNavbarMobile":[64]},null,{"isOpen":["handlePropChange"]}]]],["p-58552d96",[[257,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"numberIndicator":[2,"number-indicator"],"active":[4],"isActionItem":[4,"is-action-item"],"handleItemClick":[16,"handle-item-click"],"showIcon":[32],"showIconWrapper":[32],"internalHref":[32],"isExpandable":[32],"isNested":[32],"isSubMenuItem":[32],"indicatorVariant":[32],"internalActiveState":[32],"setActiveClasses":[64],"expandMenu":[64],"isItemExpandable":[64]},[[0,"consoleError","handleConsoleError"]],{"active":["handleActiveChange"],"numberIndicator":["handleNumberIndicatorChange"]}]]],["p-98c2e3a9",[[257,"ifx-tabs",{"orientation":[1],"activeTabIndex":[1026,"active-tab-index"],"fullWidth":[4,"full-width"],"internalOrientation":[32],"internalActiveTabIndex":[32],"tabObjects":[32],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","updateBorderOnWindowResize"],[0,"tabHeaderChange","handleTabHeaderChange"],[0,"slotchange","onSlotChange"],[0,"keydown","handleKeyDown"]],{"activeTabIndex":["activeTabIndexChanged"]}]]],["p-22a45c93",[[257,"ifx-tree-view-item",{"expanded":[1540],"initiallyExpanded":[4,"initially-expanded"],"disableItem":[4,"disable-item"],"ariaLabel":[1,"aria-label"],"initiallySelected":[4,"initially-selected"],"value":[1],"hasChildren":[32],"isChecked":[32],"partialChecked":[32],"level":[32],"disableAllItems":[32],"expandAllItems":[32],"suppressExpandEvents":[32]},null,{"expanded":["handleExpandedChange"],"disableItem":["handleDisableItemChange"]}]]],["p-6af7d062",[[257,"ifx-breadcrumb-item-label",{"icon":[1],"href":[1],"target":[1]}]]],["p-4850e2df",[[257,"ifx-checkbox-group",{"alignment":[1],"size":[1],"showGroupLabel":[4,"show-group-label"],"groupLabelText":[1,"group-label-text"],"showCaption":[4,"show-caption"],"captionText":[1,"caption-text"],"showCaptionIcon":[4,"show-caption-icon"],"required":[4],"hasErrors":[32],"setGroupError":[64]},[[0,"ifxError","handleCheckboxError"]]]]],["p-213a4829",[[257,"ifx-date-picker",{"size":[1],"error":[4],"success":[4],"disabled":[4],"ariaLabel":[1,"aria-label"],"value":[1],"type":[1],"max":[1],"min":[1],"required":[4],"label":[1],"caption":[1],"autocomplete":[1]}]]],["p-f68887c5",[[257,"ifx-download",{"tokens":[1]}]]],["p-240a4cb3",[[257,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-6ceae9a3",[[257,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogoAndAppname":[4,"show-logo-and-appname"],"logoHref":[1,"logo-href"],"logoHrefTarget":[1,"logo-href-target"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32],"internalLogoHref":[32],"internalLogoHrefTarget":[32]},[[0,"ifxNavItem","clearFirstLayerMenu"],[0,"ifxOpen","handleSearchBarToggle"]]]]],["p-1c2d0b17",[[257,"ifx-radio-button-group",{"alignment":[1],"size":[1],"showGroupLabel":[4,"show-group-label"],"groupLabelText":[1,"group-label-text"],"showCaption":[4,"show-caption"],"captionText":[1,"caption-text"],"showCaptionIcon":[4,"show-caption-icon"],"required":[4],"hasErrors":[32],"setGroupError":[64]},[[0,"ifxError","handleRadioButtonError"]]]]],["p-9ea43bb7",[[257,"ifx-segment",{"icon":[1],"segmentIndex":[2,"segment-index"],"selected":[1028],"value":[1]}]]],["p-f5811026",[[257,"ifx-segmented-control",{"caption":[1],"label":[1],"size":[1],"required":[4],"error":[4]},[[0,"segmentSelect","onSegmentSelect"]]]]],["p-4c846056",[[257,"ifx-sidebar",{"applicationName":[1,"application-name"],"initialCollapse":[4,"initial-collapse"],"showFooter":[4,"show-footer"],"showHeader":[4,"show-header"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"copyrightText":[1,"copyright-text"],"collapsible":[4],"collapsed":[4],"hideMenuLabel":[1,"hide-menu-label"],"currentYear":[32],"internalTermsofUse":[32],"internalImprint":[32],"internalPrivacyPolicy":[32],"internalShowFooter":[32],"activeItem":[32],"isCollapsed":[32],"toggleCollapse":[64],"collapse":[64],"expand":[64]},[[0,"ifxSidebarMenu","handleSidebarItemInteraction"],[0,"ifxSidebarNavigationItem","handleSidebarItemActivated"]],{"collapsible":["handleCollapsibleChange"],"collapsed":["handleCollapsedPropChange"]}]]],["p-3f3a5140",[[257,"ifx-slider",{"min":[2],"max":[2],"step":[2],"value":[2],"minValueHandle":[2,"min-value-handle"],"maxValueHandle":[2,"max-value-handle"],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"type":[1],"ariaLabel":[1,"aria-label"],"internalValue":[32],"percentage":[32],"internalMinValue":[32],"internalMaxValue":[32]},null,{"value":["valueChanged"],"minValueHandle":["minValueChanged"],"maxValueHandle":["maxValueChanged"]}]]],["p-453bd9bd",[[257,"ifx-step",{"complete":[4],"disabled":[4],"error":[1028],"lastStep":[4,"last-step"],"stepId":[2,"step-id"],"stepperState":[16,"stepper-state"],"active":[32],"clickable":[32]},[[4,"ifxChange","onStepChange"]],{"stepperState":["updateCurrentStep"],"active":["updateErrorState"]}]]],["p-913a8693",[[257,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"ariaLabel":[1,"aria-label"],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-765dd1b4",[[257,"ifx-action-list",{"listAriaLabel":[1,"list-aria-label"]}]]],["p-1df9b181",[[257,"ifx-action-list-item",{"itemTitle":[1,"item-title"],"description":[1],"value":[1],"href":[1],"target":[1],"disabled":[4],"itemAriaLabel":[1,"item-aria-label"]},null,{"disabled":["onDisabledChange"]}]]],["p-54785004",[[256,"ifx-basic-table",{"cols":[1],"rows":[1],"rowHeight":[1,"row-height"],"tableHeight":[1,"table-height"],"variant":[1],"gridOptions":[32],"columnDefs":[32],"rowData":[32],"uniqueKey":[32]}]]],["p-43943864",[[257,"ifx-breadcrumb"]]],["p-3f29b8fd",[[257,"ifx-breadcrumb-item",{"isLastItem":[32],"uniqueId":[32],"hasDropdownMenu":[32]},[[5,"mousedown","handleOutsideClick"],[0,"keydown","handleKeyDown"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-84735ae2",[[257,"ifx-card",{"direction":[1],"href":[1],"target":[1],"ariaLabel":[1,"aria-label"],"noBtns":[32],"alignment":[32],"noImg":[32],"internalHref":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-d56ee584",[[257,"ifx-card-headline",{"direction":[32],"hasDesc":[32]}]]],["p-27808b00",[[257,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-7910df8a",[[257,"ifx-card-links"]]],["p-cae1ea22",[[257,"ifx-card-overline"]]],["p-ee2ca575",[[257,"ifx-card-text",{"hasBtn":[32]}]]],["p-0dbe2818",[[257,"ifx-content-switcher",{"items":[32],"activeIndex":[32],"hoverIndex":[32],"focusIndex":[32],"dividers":[32]}]]],["p-dfd77261",[[257,"ifx-content-switcher-item",{"selected":[4],"value":[1]}]]],["p-2151de2a",[[257,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[5,"mousedown","handleOutsideClick"],[4,"focusin","handleFocusOutside"],[0,"slotchange","watchHandlerSlot"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-c6fa6fd3",[[257,"ifx-dropdown-header"]]],["p-b969b2c0",[[257,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-8a9d3e04",[[257,"ifx-dropdown-separator"]]],["p-4afddabf",[[257,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-eed36710",[[257,"ifx-filter-type-group",{"selectedOptions":[32]}]]],["p-b5db443a",[[257,"ifx-footer",{"copyrightText":[1,"copyright-text"],"currentYear":[32]}]]],["p-3cdd03ed",[[257,"ifx-footer-column"]]],["p-5c673497",[[257,"ifx-navbar-profile",{"showLabel":[4,"show-label"],"href":[1],"imageUrl":[1,"image-url"],"target":[1],"alt":[1],"userName":[1,"user-name"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"internalImageUrl":[32],"hideComponent":[64],"showComponent":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-412f510b",[[257,"ifx-sidebar-title",{"showInCollapsed":[4,"show-in-collapsed"]}]]],["p-5f285e9d",[[257,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-6504f8d0",[[257,"ifx-stepper",{"activeStep":[1026,"active-step"],"indicatorPosition":[1,"indicator-position"],"showStepNumber":[4,"show-step-number"],"variant":[1],"ariaLabel":[1,"aria-label"],"ariaCurrent":[1,"aria-current"],"stepsCount":[32],"shouldEmitEvent":[32],"emittedByClick":[32]},[[0,"ifxChange","onStepChange"]],{"activeStep":["handleActiveStep"]}]]],["p-fe373208",[[257,"ifx-switch",{"checked":[4],"name":[1],"disabled":[4],"value":[1],"internalChecked":[32],"isChecked":[64]},null,{"checked":["valueChanged"]}]]],["p-c9d594e1",[[260,"ifx-tab",{"header":[1],"disabled":[4],"icon":[1],"iconPosition":[1,"icon-position"]}]]],["p-dcc7240e",[[257,"ifx-textarea",{"caption":[1],"cols":[2],"disabled":[4],"error":[4],"label":[1],"maxlength":[2],"name":[1],"placeholder":[1],"required":[4],"readOnly":[4,"read-only"],"resize":[1],"rows":[2],"value":[1025],"wrap":[1],"fullWidth":[513,"full-width"],"reset":[64]}]]],["p-0d4211db",[[257,"ifx-tree-view",{"label":[1],"disableAllItems":[4,"disable-all-items"],"expandAllItems":[4,"expand-all-items"],"ariaLabel":[1,"aria-label"]},null,{"expandAllItems":["handleExpandAllItemsChange"],"disableAllItems":["handleDisableAllItemsChange"]}]]],["p-a1c63832",[[257,"ifx-notification",{"icon":[1],"variant":[1],"linkText":[1,"link-text"],"linkHref":[1,"link-href"],"linkTarget":[1,"link-target"]}]]],["p-4016e7cf",[[257,"ifx-progress-bar",{"value":[2],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-dd1b2b14",[[257,"ifx-radio-button",{"disabled":[4],"value":[1],"error":[4],"size":[513],"name":[513],"checked":[1028],"internalChecked":[32],"hasSlot":[32],"isChecked":[64]},[[0,"keydown","handleKeyDown"],[4,"change","handleExternalChange"]],{"checked":["handleCheckedChange"],"internalChecked":["updateFormValue"],"error":["errorChanged"]}]]],["p-13fed6df",[[257,"ifx-template",{"name":[1],"thumbnail":[1],"repoDetails":[32],"repoUrl":[32],"showDetails":[32],"isTemplatePage":[32],"isLoading":[32],"repoError":[32],"toggleTemplate":[64]}],[257,"ifx-alert",{"variant":[1],"icon":[1],"closable":[4],"AriaLive":[1,"aria-live"],"uniqueId":[32]}]]],["p-6407c496",[[257,"ifx-multiselect",{"name":[1],"disabled":[4],"required":[4],"error":[4],"caption":[1],"label":[1],"placeholder":[1],"showSearch":[4,"show-search"],"showSelectAll":[4,"show-select-all"],"showClearButton":[4,"show-clear-button"],"showExpandCollapse":[4,"show-expand-collapse"],"noResultsMessage":[1,"no-results-message"],"showNoResultsMessage":[4,"show-no-results-message"],"searchPlaceholder":[1,"search-placeholder"],"selectAllLabel":[1,"select-all-label"],"expandLabel":[1,"expand-label"],"collapseLabel":[1,"collapse-label"],"ariaMultiSelectLabel":[1,"aria-multi-select-label"],"ariaMultiSelectLabelledBy":[1,"aria-multi-select-labelled-by"],"ariaMultiSelectDescribedBy":[1,"aria-multi-select-described-by"],"ariaSearchLabel":[1,"aria-search-label"],"ariaClearLabel":[1,"aria-clear-label"],"ariaToggleLabel":[1,"aria-toggle-label"],"ariaSelectAllLabel":[1,"aria-select-all-label"],"ariaExpandAllLabel":[1,"aria-expand-all-label"],"ariaCollapseAllLabel":[1,"aria-collapse-all-label"],"internalError":[32],"persistentSelectedOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"searchTerm":[32],"clearSelection":[64]},null,{"error":["updateInternalError"],"persistentSelectedOptions":["onSelectionChange"]}],[257,"ifx-multiselect-option",{"value":[1],"selected":[1540],"disabled":[1540],"indeterminate":[1540],"isExpanded":[32],"hasChildren":[32],"depth":[32],"searchTerm":[32],"isSearchActive":[32],"isSearchDisabled":[32]},[[0,"click","handleClick"],[0,"keydown","handleKeyDown"]]]]],["p-933da006",[[257,"ifx-accordion-item",{"caption":[1],"open":[1028],"AriaLevel":[2,"aria-level"],"internalOpen":[32]},[[0,"keydown","handleKeydown"]],{"open":["openChanged"]}],[273,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxOpen","onItemOpen"]]]]],["p-242fc6b0",[[256,"ifx-select",{"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"showSearch":[4,"show-search"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16,"class-names"],"fuseOptions":[16,"fuse-options"],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16,"callback-on-init"],"callbackOnCreateTemplates":[16,"callback-on-create-templates"],"valueComparer":[16,"value-comparer"],"error":[4],"label":[1],"caption":[1],"disabled":[4],"required":[4],"placeholderValue":[1,"placeholder-value"],"options":[1025],"size":[1],"showClearButton":[4,"show-clear-button"],"selectedOption":[32],"optionIsSelected":[32],"clearSelection":[64],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"ajax":[64],"handleDeleteIcon":[64]},[[5,"mousedown","handleOutsideClick"]],{"disabled":["watchDisabled"]}]]],["p-8ab64504",[[257,"ifx-spinner",{"size":[1],"variant":[1],"inverted":[4],"ariaLabel":[1,"aria-label"]}],[257,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"success":[4],"disabled":[4],"readOnly":[4,"read-only"],"maxlength":[2],"showDeleteIcon":[4,"show-delete-icon"],"autocomplete":[1],"type":[1],"internalId":[1,"internal-id"],"internalType":[32],"reset":[64]},null,{"value":["valueWatcher"]}]]],["p-b23596f4",[[257,"ifx-search-field",{"value":[1025],"suggestions":[16],"showSuggestions":[4,"show-suggestions"],"maxSuggestions":[2,"max-suggestions"],"maxHistoryItems":[2,"max-history-items"],"enableHistory":[4,"enable-history"],"historyKey":[1,"history-key"],"historyHeaderText":[1,"history-header-text"],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelled-by"],"ariaDescribedBy":[1,"aria-described-by"],"deleteIconAriaLabel":[1,"delete-icon-aria-label"],"historyDeleteAriaLabel":[1,"history-delete-aria-label"],"dropdownAriaLabel":[1,"dropdown-aria-label"],"suggestionAriaLabel":[1,"suggestion-aria-label"],"historyItemAriaLabel":[1,"history-item-aria-label"],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"placeholder":[1],"autocomplete":[1],"maxlength":[2],"showDropdown":[32],"filteredSuggestions":[32],"selectedSuggestionIndex":[32],"searchHistory":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"],[0,"keydown","handleKeyDown"]],{"value":["valueWatcher"],"suggestions":["suggestionsWatcher"]}]]],["p-91ce7e7b",[[257,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"ariaLabel":[1,"aria-label"],"internalIcon":[32],"setFocus":[64]},[[2,"click","handleClick"]],{"icon":["updateIcon"]}]]],["p-ad702dcc",[[257,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"fullWidth":[4,"full-width"],"ariaLabel":[1,"aria-label"],"internalHref":[32],"setFocus":[64]},[[0,"keydown","handleKeyDown"],[2,"click","handleHostClick"]],{"href":["setInternalHref"]}]]],["p-0100cbfb",[[257,"ifx-indicator",{"inverted":[4],"ariaLabel":[1,"aria-label"],"variant":[1],"number":[2],"filteredNumber":[32]}]]],["p-f63ba4a3",[[257,"ifx-checkbox",{"disabled":[4],"checked":[4],"error":[4],"size":[1],"indeterminate":[4],"value":[1],"internalChecked":[32],"internalIndeterminate":[32],"isChecked":[64],"toggleCheckedState":[64]},null,{"checked":["valueChanged"],"error":["errorChanged"],"indeterminate":["indeterminateChanged"]}]]],["p-ae513612",[[257,"ifx-pagination",{"currentPage":[2,"current-page"],"showItemsPerPage":[4,"show-items-per-page"],"total":[2],"itemsPerPage":[1,"items-per-page"],"internalPage":[32],"internalItemsPerPage":[32],"numberOfPages":[32],"filteredItemsPerPage":[32],"visiblePages":[32]},[[0,"ifxSelect","setItemsPerPage"]],{"total":["watchTotalHandler"],"currentPage":["currentPageWatcher"]}],[257,"ifx-chip",{"placeholder":[1],"size":[1],"value":[1025],"variant":[1],"theme":[1],"readOnly":[4,"read-only"],"ariaLabel":[1,"aria-label"],"disabled":[4],"icon":[1],"opened":[32],"selectedOptions":[32]},[[5,"mousedown","closeDropdownOnOutsideClick"],[0,"keydown","handleKeyDown"],[0,"ifxChipItemSelect","updateSelectedOptions"]],{"value":["handleValueChange"],"readOnly":["handleReadOnlyChange"]}],[257,"ifx-chip-item",{"value":[1],"chipState":[16,"chip-state"],"selected":[1540]},[[16,"ifxChipItemSelect","updateItemSelection"]],{"selected":["validateSelected"]}]]],["p-d3236a63",[[257,"ifx-link",{"href":[1],"target":[1],"variant":[1],"size":[1],"disabled":[4],"download":[1],"ariaLabel":[1,"aria-label"],"internalHref":[32],"internalTarget":[32],"internalVariant":[32]}]]],["p-bbd819a8",[[256,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"],"internalIcon":[32]},null,{"icon":["updateIcon"]}]]]]'),e)}));
|
|
1
|
+
import{p as e,H as a,g as l,b as i}from"./p-DtIEDtZ8.js";export{s as setNonce}from"./p-DtIEDtZ8.js";var t=()=>{{n(a.prototype)}const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};var n=e=>{const a=e.cloneNode;e.cloneNode=function(e){if(this.nodeName==="TEMPLATE"){return a.call(this,e)}const l=a.call(this,false);const i=this.childNodes;if(e){for(let e=0;e<i.length;e++){if(i[e].nodeType!==2){l.appendChild(i[e].cloneNode(true))}}}return l}};t().then((async e=>{await l();return i(JSON.parse('[["p-0d9da371",[[257,"ifx-table",{"cols":[8],"rows":[8],"buttonRendererOptions":[16,"button-renderer-options"],"iconButtonRendererOptions":[16,"icon-button-renderer-options"],"checkboxRendererOptions":[16,"checkbox-renderer-options"],"rowHeight":[1,"row-height"],"tableHeight":[1,"table-height"],"pagination":[4],"paginationItemsPerPage":[1,"pagination-items-per-page"],"filterOrientation":[1,"filter-orientation"],"headline":[1],"variant":[1],"serverSidePagination":[4,"server-side-pagination"],"serverPageChangeHandler":[16,"server-page-change-handler"],"enableSelection":[4,"enable-selection"],"showLoading":[4,"show-loading"],"currentPage":[32],"rowData":[32],"colData":[32],"filterOptions":[32],"currentFilters":[32],"uniqueKey":[32],"paginationPageSize":[32],"showSidebarFilters":[32],"matchingResultsCount":[32],"selectedRows":[32],"selectAll":[32],"selectedRowsData":[32],"onBtShowLoading":[64]},[[0,"ifxItemsPerPageChange","handleResultsPerPageChange"],[0,"ifxChange","handleChipChange"]],{"rows":["rowsChanged"],"cols":["colsChanged"],"buttonRendererOptions":["onButtonRendererOptionsChanged"],"iconButtonRendererOptions":["onIconButtonRendererOptionsChanged"],"checkboxRendererOptions":["onCheckboxRendererOptionsChanged"]}]]],["p-372fa9eb",[[257,"ifx-templates-ui",null,[[0,"fieldError","handleError"],[0,"toggleTemplates","filterTemplates"]]]]],["p-d4fea918",[[257,"ifx-set-filter",{"filterName":[1,"filter-name"],"filterLabel":[1,"filter-label"],"placeholder":[1],"type":[1],"options":[1],"filterValues":[32]}]]],["p-29d78bf2",[[257,"ifx-file-upload",{"dragAndDrop":[4,"drag-and-drop"],"required":[4],"disabled":[4],"maxFileSizeMB":[2,"max-file-size-m-b"],"allowedFileTypes":[1,"allowed-file-types"],"additionalAllowedFileTypes":[1,"additional-allowed-file-types"],"allowAnyFileType":[4,"allow-any-file-type"],"allowedFileExtensions":[1,"allowed-file-extensions"],"uploadHandler":[16,"upload-handler"],"maxFiles":[6146,"max-files"],"label":[1],"labelRequiredError":[1,"label-required-error"],"labelBrowseFiles":[1,"label-browse-files"],"labelDragAndDrop":[1,"label-drag-and-drop"],"labelUploadedFilesHeading":[1,"label-uploaded-files-heading"],"labelFileTooLarge":[1,"label-file-too-large"],"labelUnsupportedFileType":[1,"label-unsupported-file-type"],"labelUploaded":[1,"label-uploaded"],"labelUploadFailed":[1,"label-upload-failed"],"labelSupportedFormatsTemplate":[1,"label-supported-formats-template"],"labelFileSingular":[1,"label-file-singular"],"labelFilePlural":[1,"label-file-plural"],"labelMaxFilesInfo":[1,"label-max-files-info"],"labelMaxFilesExceeded":[1,"label-max-files-exceeded"],"ariaLabelBrowseFiles":[1,"aria-label-browse-files"],"ariaLabelDropzone":[1,"aria-label-dropzone"],"ariaLabelFileInput":[1,"aria-label-file-input"],"ariaLabelRemoveFile":[1,"aria-label-remove-file"],"ariaLabelCancelUpload":[1,"aria-label-cancel-upload"],"ariaLabelRetryUpload":[1,"aria-label-retry-upload"],"ariaLabelUploadingStatus":[1,"aria-label-uploading-status"],"ariaLabelUploadedStatus":[1,"aria-label-uploaded-status"],"ariaLabelUploadFailedStatus":[1,"aria-label-upload-failed-status"],"isDragOver":[32],"files":[32],"uploadTasks":[32],"rejectedSizeFiles":[32],"rejectedTypeFiles":[32],"requiredError":[32],"statusMessage":[32],"injectDemoState":[64],"triggerDemoValidation":[64]}]]],["p-76e88a63",[[257,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"copiedIcon":[32],"htmlTag":[32],"iconName":[32],"searchTerm":[32]}]]],["p-e7b72d33",[[257,"ifx-faq"]]],["p-ba4ee343",[[257,"ifx-list-entry",{"value":[1028],"label":[1],"type":[1]},[[0,"ifxChange","handleFilterEntryChange"]],{"value":["valueChanged"]}]]],["p-fd206fce",[[257,"ifx-overview-table"]]],["p-55227732",[[257,"ifx-dropdown-trigger-button",{"isOpen":[4,"is-open"],"theme":[1],"variant":[1],"size":[1],"disabled":[4],"hideArrow":[4,"hide-arrow"]}]]],["p-83816596",[[257,"ifx-filter-accordion",{"maxVisibleItems":[2,"max-visible-items"],"filterGroupName":[1,"filter-group-name"],"expanded":[32],"count":[32],"totalItems":[32]}]]],["p-d3a6bbf7",[[257,"ifx-filter-bar",{"maxShownFilters":[2,"max-shown-filters"],"showMoreFiltersButton":[4,"show-more-filters-button"],"selectedOptions":[32],"showAllFilters":[32],"visibleSlots":[32]}]]],["p-b5efb1d6",[[257,"ifx-filter-search",{"filterName":[1,"filter-name"],"disabled":[4],"filterValue":[1025,"filter-value"],"filterKey":[1,"filter-key"],"filterOrientation":[1,"filter-orientation"],"placeholder":[1],"showDeleteIcon":[32]},[[0,"ifxInput","handleFilterSearchChange"]],{"value":["valueChanged"]}]]],["p-7468590a",[[257,"ifx-list",{"name":[1],"maxVisibleItems":[2,"max-visible-items"],"type":[1],"resetTrigger":[1028,"reset-trigger"],"expanded":[32],"showMore":[32],"selectedCount":[32],"totalItems":[32],"internalResetTrigger":[32]},null,{"type":["handleTypeChange"],"resetTrigger":["resetTriggerChanged"]}]]],["p-550283fa",[[257,"ifx-modal",{"opened":[1540],"caption":[1],"captionAriaLabel":[1,"caption-aria-label"],"closeOnOverlayClick":[4,"close-on-overlay-click"],"variant":[1],"size":[1],"alertIcon":[1,"alert-icon"],"okButtonLabel":[1,"ok-button-label"],"cancelButtonLabel":[1,"cancel-button-label"],"closeButtonAriaLabel":[1,"close-button-aria-label"],"showCloseButton":[4,"show-close-button"],"showModal":[32],"slotButtonsPresent":[32]},null,{"opened":["openedChanged"]}]]],["p-8c44be53",[[257,"ifx-navbar-item",{"showLabel":[4,"show-label"],"icon":[1],"href":[1],"target":[1],"hideOnMobile":[4,"hide-on-mobile"],"numberIndicator":[2,"number-indicator"],"dotIndicator":[4,"dot-indicator"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"isSidebarMenuItem":[32],"itemPosition":[32],"hideComponent":[64],"showComponent":[64],"toggleChildren":[64],"moveChildComponentsIntoSubLayerMenu":[64],"toggleFirstLayerItem":[64],"addMenuItemClass":[64],"moveChildComponentsBackIntoNavbar":[64],"returnToFirstLayer":[64],"setMenuItemPosition":[64],"setItemSideSpecifications":[64]},[[0,"focusout","handleFocusOut"],[5,"mousedown","handleOutsideClick"]]]]],["p-249372a1",[[257,"ifx-search-bar",{"isOpen":[4,"is-open"],"disabled":[4],"value":[1025],"maxlength":[2],"autocomplete":[1],"internalState":[32],"onNavbarMobile":[64]},null,{"isOpen":["handlePropChange"]}]]],["p-58552d96",[[257,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"numberIndicator":[2,"number-indicator"],"active":[4],"isActionItem":[4,"is-action-item"],"handleItemClick":[16,"handle-item-click"],"showIcon":[32],"showIconWrapper":[32],"internalHref":[32],"isExpandable":[32],"isNested":[32],"isSubMenuItem":[32],"indicatorVariant":[32],"internalActiveState":[32],"setActiveClasses":[64],"expandMenu":[64],"isItemExpandable":[64]},[[0,"consoleError","handleConsoleError"]],{"active":["handleActiveChange"],"numberIndicator":["handleNumberIndicatorChange"]}]]],["p-98c2e3a9",[[257,"ifx-tabs",{"orientation":[1],"activeTabIndex":[1026,"active-tab-index"],"fullWidth":[4,"full-width"],"internalOrientation":[32],"internalActiveTabIndex":[32],"tabObjects":[32],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","updateBorderOnWindowResize"],[0,"tabHeaderChange","handleTabHeaderChange"],[0,"slotchange","onSlotChange"],[0,"keydown","handleKeyDown"]],{"activeTabIndex":["activeTabIndexChanged"]}]]],["p-22a45c93",[[257,"ifx-tree-view-item",{"expanded":[1540],"initiallyExpanded":[4,"initially-expanded"],"disableItem":[4,"disable-item"],"ariaLabel":[1,"aria-label"],"initiallySelected":[4,"initially-selected"],"value":[1],"hasChildren":[32],"isChecked":[32],"partialChecked":[32],"level":[32],"disableAllItems":[32],"expandAllItems":[32],"suppressExpandEvents":[32]},null,{"expanded":["handleExpandedChange"],"disableItem":["handleDisableItemChange"]}]]],["p-6af7d062",[[257,"ifx-breadcrumb-item-label",{"icon":[1],"href":[1],"target":[1]}]]],["p-4850e2df",[[257,"ifx-checkbox-group",{"alignment":[1],"size":[1],"showGroupLabel":[4,"show-group-label"],"groupLabelText":[1,"group-label-text"],"showCaption":[4,"show-caption"],"captionText":[1,"caption-text"],"showCaptionIcon":[4,"show-caption-icon"],"required":[4],"hasErrors":[32],"setGroupError":[64]},[[0,"ifxError","handleCheckboxError"]]]]],["p-213a4829",[[257,"ifx-date-picker",{"size":[1],"error":[4],"success":[4],"disabled":[4],"ariaLabel":[1,"aria-label"],"value":[1],"type":[1],"max":[1],"min":[1],"required":[4],"label":[1],"caption":[1],"autocomplete":[1]}]]],["p-f68887c5",[[257,"ifx-download",{"tokens":[1]}]]],["p-240a4cb3",[[257,"ifx-dropdown-item",{"icon":[1],"href":[1],"target":[1],"hide":[4],"size":[32]},[[16,"menuSize","handleMenuSize"]]]]],["p-6ceae9a3",[[257,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"showLogoAndAppname":[4,"show-logo-and-appname"],"logoHref":[1,"logo-href"],"logoHrefTarget":[1,"logo-href-target"],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32],"searchBarIsOpen":[32],"internalLogoHref":[32],"internalLogoHrefTarget":[32]},[[0,"ifxNavItem","clearFirstLayerMenu"],[0,"ifxOpen","handleSearchBarToggle"]]]]],["p-1c2d0b17",[[257,"ifx-radio-button-group",{"alignment":[1],"size":[1],"showGroupLabel":[4,"show-group-label"],"groupLabelText":[1,"group-label-text"],"showCaption":[4,"show-caption"],"captionText":[1,"caption-text"],"showCaptionIcon":[4,"show-caption-icon"],"required":[4],"hasErrors":[32],"setGroupError":[64]},[[0,"ifxError","handleRadioButtonError"]]]]],["p-9ea43bb7",[[257,"ifx-segment",{"icon":[1],"segmentIndex":[2,"segment-index"],"selected":[1028],"value":[1]}]]],["p-f5811026",[[257,"ifx-segmented-control",{"caption":[1],"label":[1],"size":[1],"required":[4],"error":[4]},[[0,"segmentSelect","onSegmentSelect"]]]]],["p-4c846056",[[257,"ifx-sidebar",{"applicationName":[1,"application-name"],"initialCollapse":[4,"initial-collapse"],"showFooter":[4,"show-footer"],"showHeader":[4,"show-header"],"termsOfUse":[1,"terms-of-use"],"imprint":[1],"privacyPolicy":[1,"privacy-policy"],"target":[1],"copyrightText":[1,"copyright-text"],"collapsible":[4],"collapsed":[4],"hideMenuLabel":[1,"hide-menu-label"],"currentYear":[32],"internalTermsofUse":[32],"internalImprint":[32],"internalPrivacyPolicy":[32],"internalShowFooter":[32],"activeItem":[32],"isCollapsed":[32],"toggleCollapse":[64],"collapse":[64],"expand":[64]},[[0,"ifxSidebarMenu","handleSidebarItemInteraction"],[0,"ifxSidebarNavigationItem","handleSidebarItemActivated"]],{"collapsible":["handleCollapsibleChange"],"collapsed":["handleCollapsedPropChange"]}]]],["p-3f3a5140",[[257,"ifx-slider",{"min":[2],"max":[2],"step":[2],"value":[2],"minValueHandle":[2,"min-value-handle"],"maxValueHandle":[2,"max-value-handle"],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"type":[1],"ariaLabel":[1,"aria-label"],"internalValue":[32],"percentage":[32],"internalMinValue":[32],"internalMaxValue":[32]},null,{"value":["valueChanged"],"minValueHandle":["minValueChanged"],"maxValueHandle":["maxValueChanged"]}]]],["p-880ff9af",[[257,"ifx-step",{"complete":[4],"disabled":[4],"error":[1028],"lastStep":[4,"last-step"],"stepId":[2,"step-id"],"stepperState":[16,"stepper-state"],"active":[32],"clickable":[32]},[[4,"ifxChange","onStepChange"]],{"stepperState":["updateCurrentStep"],"active":["updateErrorState"]}]]],["p-913a8693",[[257,"ifx-tooltip",{"header":[1],"text":[1],"position":[1],"ariaLabel":[1,"aria-label"],"variant":[1],"icon":[1],"tooltipVisible":[32],"internalPosition":[32]},null,{"position":["positionChanged"]}]]],["p-765dd1b4",[[257,"ifx-action-list",{"listAriaLabel":[1,"list-aria-label"]}]]],["p-1df9b181",[[257,"ifx-action-list-item",{"itemTitle":[1,"item-title"],"description":[1],"value":[1],"href":[1],"target":[1],"disabled":[4],"itemAriaLabel":[1,"item-aria-label"]},null,{"disabled":["onDisabledChange"]}]]],["p-54785004",[[256,"ifx-basic-table",{"cols":[1],"rows":[1],"rowHeight":[1,"row-height"],"tableHeight":[1,"table-height"],"variant":[1],"gridOptions":[32],"columnDefs":[32],"rowData":[32],"uniqueKey":[32]}]]],["p-43943864",[[257,"ifx-breadcrumb"]]],["p-3f29b8fd",[[257,"ifx-breadcrumb-item",{"isLastItem":[32],"uniqueId":[32],"hasDropdownMenu":[32]},[[5,"mousedown","handleOutsideClick"],[0,"keydown","handleKeyDown"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["p-84735ae2",[[257,"ifx-card",{"direction":[1],"href":[1],"target":[1],"ariaLabel":[1,"aria-label"],"noBtns":[32],"alignment":[32],"noImg":[32],"internalHref":[32]},[[0,"imgPosition","setImgPosition"]]]]],["p-d56ee584",[[257,"ifx-card-headline",{"direction":[32],"hasDesc":[32]}]]],["p-27808b00",[[257,"ifx-card-image",{"src":[1],"alt":[1],"position":[1]}]]],["p-7910df8a",[[257,"ifx-card-links"]]],["p-cae1ea22",[[257,"ifx-card-overline"]]],["p-ee2ca575",[[257,"ifx-card-text",{"hasBtn":[32]}]]],["p-0dbe2818",[[257,"ifx-content-switcher",{"items":[32],"activeIndex":[32],"hoverIndex":[32],"focusIndex":[32],"dividers":[32]}]]],["p-dfd77261",[[257,"ifx-content-switcher-item",{"selected":[4],"value":[1]}]]],["p-2151de2a",[[257,"ifx-dropdown",{"placement":[1],"defaultOpen":[4,"default-open"],"noAppendToBody":[4,"no-append-to-body"],"disabled":[4],"noCloseOnOutsideClick":[4,"no-close-on-outside-click"],"noCloseOnMenuClick":[4,"no-close-on-menu-click"],"internalIsOpen":[32],"trigger":[32],"menu":[32],"isOpen":[64],"closeDropdown":[64],"openDropdown":[64]},[[5,"mousedown","handleOutsideClick"],[4,"focusin","handleFocusOutside"],[0,"slotchange","watchHandlerSlot"]],{"defaultOpen":["watchHandlerIsOpen"],"disabled":["watchHandlerDisabled"]}]]],["p-c6fa6fd3",[[257,"ifx-dropdown-header"]]],["p-b969b2c0",[[257,"ifx-dropdown-menu",{"isOpen":[4,"is-open"],"size":[1],"hideTopPadding":[32],"filteredItems":[32]},[[0,"ifxInput","handleMenuFilter"],[0,"ifxDropdownItem","handleDropdownItemValueEmission"]]]]],["p-8a9d3e04",[[257,"ifx-dropdown-separator"]]],["p-4afddabf",[[257,"ifx-dropdown-trigger",{"isOpen":[4,"is-open"]}]]],["p-eed36710",[[257,"ifx-filter-type-group",{"selectedOptions":[32]}]]],["p-b5db443a",[[257,"ifx-footer",{"copyrightText":[1,"copyright-text"],"currentYear":[32]}]]],["p-3cdd03ed",[[257,"ifx-footer-column"]]],["p-5c673497",[[257,"ifx-navbar-profile",{"showLabel":[4,"show-label"],"href":[1],"imageUrl":[1,"image-url"],"target":[1],"alt":[1],"userName":[1,"user-name"],"internalHref":[32],"isMenuItem":[32],"hasChildNavItems":[32],"internalImageUrl":[32],"hideComponent":[64],"showComponent":[64]},[[5,"mousedown","handleOutsideClick"]]]]],["p-412f510b",[[257,"ifx-sidebar-title",{"showInCollapsed":[4,"show-in-collapsed"]}]]],["p-5f285e9d",[[257,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["p-6504f8d0",[[257,"ifx-stepper",{"activeStep":[1026,"active-step"],"indicatorPosition":[1,"indicator-position"],"showStepNumber":[4,"show-step-number"],"variant":[1],"ariaLabel":[1,"aria-label"],"ariaCurrent":[1,"aria-current"],"stepsCount":[32],"shouldEmitEvent":[32],"emittedByClick":[32]},[[0,"ifxChange","onStepChange"]],{"activeStep":["handleActiveStep"]}]]],["p-fe373208",[[257,"ifx-switch",{"checked":[4],"name":[1],"disabled":[4],"value":[1],"internalChecked":[32],"isChecked":[64]},null,{"checked":["valueChanged"]}]]],["p-c9d594e1",[[260,"ifx-tab",{"header":[1],"disabled":[4],"icon":[1],"iconPosition":[1,"icon-position"]}]]],["p-dcc7240e",[[257,"ifx-textarea",{"caption":[1],"cols":[2],"disabled":[4],"error":[4],"label":[1],"maxlength":[2],"name":[1],"placeholder":[1],"required":[4],"readOnly":[4,"read-only"],"resize":[1],"rows":[2],"value":[1025],"wrap":[1],"fullWidth":[513,"full-width"],"reset":[64]}]]],["p-0d4211db",[[257,"ifx-tree-view",{"label":[1],"disableAllItems":[4,"disable-all-items"],"expandAllItems":[4,"expand-all-items"],"ariaLabel":[1,"aria-label"]},null,{"expandAllItems":["handleExpandAllItemsChange"],"disableAllItems":["handleDisableAllItemsChange"]}]]],["p-a1c63832",[[257,"ifx-notification",{"icon":[1],"variant":[1],"linkText":[1,"link-text"],"linkHref":[1,"link-href"],"linkTarget":[1,"link-target"]}]]],["p-4016e7cf",[[257,"ifx-progress-bar",{"value":[2],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]},null,{"value":["valueChanged"]}]]],["p-dd1b2b14",[[257,"ifx-radio-button",{"disabled":[4],"value":[1],"error":[4],"size":[513],"name":[513],"checked":[1028],"internalChecked":[32],"hasSlot":[32],"isChecked":[64]},[[0,"keydown","handleKeyDown"],[4,"change","handleExternalChange"]],{"checked":["handleCheckedChange"],"internalChecked":["updateFormValue"],"error":["errorChanged"]}]]],["p-13fed6df",[[257,"ifx-template",{"name":[1],"thumbnail":[1],"repoDetails":[32],"repoUrl":[32],"showDetails":[32],"isTemplatePage":[32],"isLoading":[32],"repoError":[32],"toggleTemplate":[64]}],[257,"ifx-alert",{"variant":[1],"icon":[1],"closable":[4],"AriaLive":[1,"aria-live"],"uniqueId":[32]}]]],["p-6407c496",[[257,"ifx-multiselect",{"name":[1],"disabled":[4],"required":[4],"error":[4],"caption":[1],"label":[1],"placeholder":[1],"showSearch":[4,"show-search"],"showSelectAll":[4,"show-select-all"],"showClearButton":[4,"show-clear-button"],"showExpandCollapse":[4,"show-expand-collapse"],"noResultsMessage":[1,"no-results-message"],"showNoResultsMessage":[4,"show-no-results-message"],"searchPlaceholder":[1,"search-placeholder"],"selectAllLabel":[1,"select-all-label"],"expandLabel":[1,"expand-label"],"collapseLabel":[1,"collapse-label"],"ariaMultiSelectLabel":[1,"aria-multi-select-label"],"ariaMultiSelectLabelledBy":[1,"aria-multi-select-labelled-by"],"ariaMultiSelectDescribedBy":[1,"aria-multi-select-described-by"],"ariaSearchLabel":[1,"aria-search-label"],"ariaClearLabel":[1,"aria-clear-label"],"ariaToggleLabel":[1,"aria-toggle-label"],"ariaSelectAllLabel":[1,"aria-select-all-label"],"ariaExpandAllLabel":[1,"aria-expand-all-label"],"ariaCollapseAllLabel":[1,"aria-collapse-all-label"],"internalError":[32],"persistentSelectedOptions":[32],"dropdownOpen":[32],"dropdownFlipped":[32],"searchTerm":[32],"clearSelection":[64]},null,{"error":["updateInternalError"],"persistentSelectedOptions":["onSelectionChange"]}],[257,"ifx-multiselect-option",{"value":[1],"selected":[1540],"disabled":[1540],"indeterminate":[1540],"isExpanded":[32],"hasChildren":[32],"depth":[32],"searchTerm":[32],"isSearchActive":[32],"isSearchDisabled":[32]},[[0,"click","handleClick"],[0,"keydown","handleKeyDown"]]]]],["p-933da006",[[257,"ifx-accordion-item",{"caption":[1],"open":[1028],"AriaLevel":[2,"aria-level"],"internalOpen":[32]},[[0,"keydown","handleKeydown"]],{"open":["openChanged"]}],[273,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxOpen","onItemOpen"]]]]],["p-242fc6b0",[[256,"ifx-select",{"value":[1],"name":[1],"items":[16],"choices":[1],"renderChoiceLimit":[2,"render-choice-limit"],"maxItemCount":[2,"max-item-count"],"addItems":[4,"add-items"],"removeItems":[4,"remove-items"],"removeItemButton":[4,"remove-item-button"],"editItems":[4,"edit-items"],"duplicateItemsAllowed":[4,"duplicate-items-allowed"],"delimiter":[1],"paste":[4],"showSearch":[4,"show-search"],"searchChoices":[4,"search-choices"],"searchFields":[1,"search-fields"],"searchFloor":[2,"search-floor"],"searchResultLimit":[2,"search-result-limit"],"position":[1],"resetScrollPosition":[4,"reset-scroll-position"],"shouldSort":[4,"should-sort"],"shouldSortItems":[4,"should-sort-items"],"sorter":[16],"placeholder":[8],"searchPlaceholderValue":[1,"search-placeholder-value"],"prependValue":[1,"prepend-value"],"appendValue":[1,"append-value"],"renderSelectedChoices":[1,"render-selected-choices"],"loadingText":[1,"loading-text"],"noResultsText":[1,"no-results-text"],"noChoicesText":[1,"no-choices-text"],"itemSelectText":[1,"item-select-text"],"addItemText":[1,"add-item-text"],"maxItemText":[1,"max-item-text"],"uniqueItemText":[1,"unique-item-text"],"classNames":[16,"class-names"],"fuseOptions":[16,"fuse-options"],"addItemFilter":[1,"add-item-filter"],"customAddItemText":[1,"custom-add-item-text"],"callbackOnInit":[16,"callback-on-init"],"callbackOnCreateTemplates":[16,"callback-on-create-templates"],"valueComparer":[16,"value-comparer"],"error":[4],"label":[1],"caption":[1],"disabled":[4],"required":[4],"placeholderValue":[1,"placeholder-value"],"options":[1025],"size":[1],"showClearButton":[4,"show-clear-button"],"selectedOption":[32],"optionIsSelected":[32],"clearSelection":[64],"handleChange":[64],"highlightItem":[64],"unhighlightItem":[64],"highlightAll":[64],"unhighlightAll":[64],"removeActiveItemsByValue":[64],"removeActiveItems":[64],"removeHighlightedItems":[64],"showDropdown":[64],"hideDropdown":[64],"getValue":[64],"setValue":[64],"setChoiceByValue":[64],"setChoices":[64],"clearChoices":[64],"clearStore":[64],"clearInput":[64],"ajax":[64],"handleDeleteIcon":[64]},[[5,"mousedown","handleOutsideClick"]],{"disabled":["watchDisabled"]}]]],["p-8ab64504",[[257,"ifx-spinner",{"size":[1],"variant":[1],"inverted":[4],"ariaLabel":[1,"aria-label"]}],[257,"ifx-text-field",{"placeholder":[1],"value":[1025],"error":[4],"label":[1],"icon":[1],"caption":[1],"size":[1],"required":[4],"success":[4],"disabled":[4],"readOnly":[4,"read-only"],"maxlength":[2],"showDeleteIcon":[4,"show-delete-icon"],"autocomplete":[1],"type":[1],"internalId":[1,"internal-id"],"internalType":[32],"reset":[64]},null,{"value":["valueWatcher"]}]]],["p-b23596f4",[[257,"ifx-search-field",{"value":[1025],"suggestions":[16],"showSuggestions":[4,"show-suggestions"],"maxSuggestions":[2,"max-suggestions"],"maxHistoryItems":[2,"max-history-items"],"enableHistory":[4,"enable-history"],"historyKey":[1,"history-key"],"historyHeaderText":[1,"history-header-text"],"ariaLabel":[1,"aria-label"],"ariaLabelledBy":[1,"aria-labelled-by"],"ariaDescribedBy":[1,"aria-described-by"],"deleteIconAriaLabel":[1,"delete-icon-aria-label"],"historyDeleteAriaLabel":[1,"history-delete-aria-label"],"dropdownAriaLabel":[1,"dropdown-aria-label"],"suggestionAriaLabel":[1,"suggestion-aria-label"],"historyItemAriaLabel":[1,"history-item-aria-label"],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"size":[1],"placeholder":[1],"autocomplete":[1],"maxlength":[2],"showDropdown":[32],"filteredSuggestions":[32],"selectedSuggestionIndex":[32],"searchHistory":[32],"showDeleteIconInternalState":[32],"isFocused":[32]},[[5,"mousedown","handleOutsideClick"],[0,"keydown","handleKeyDown"]],{"value":["valueWatcher"],"suggestions":["suggestionsWatcher"]}]]],["p-91ce7e7b",[[257,"ifx-icon-button",{"variant":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"ariaLabel":[1,"aria-label"],"internalIcon":[32],"setFocus":[64]},[[2,"click","handleClick"]],{"icon":["updateIcon"]}]]],["p-ad702dcc",[[257,"ifx-button",{"variant":[1],"theme":[1],"size":[1],"disabled":[4],"href":[1],"target":[1],"type":[1],"fullWidth":[4,"full-width"],"ariaLabel":[1,"aria-label"],"internalHref":[32],"setFocus":[64]},[[0,"keydown","handleKeyDown"],[2,"click","handleHostClick"]],{"href":["setInternalHref"]}]]],["p-0100cbfb",[[257,"ifx-indicator",{"inverted":[4],"ariaLabel":[1,"aria-label"],"variant":[1],"number":[2],"filteredNumber":[32]}]]],["p-f63ba4a3",[[257,"ifx-checkbox",{"disabled":[4],"checked":[4],"error":[4],"size":[1],"indeterminate":[4],"value":[1],"internalChecked":[32],"internalIndeterminate":[32],"isChecked":[64],"toggleCheckedState":[64]},null,{"checked":["valueChanged"],"error":["errorChanged"],"indeterminate":["indeterminateChanged"]}]]],["p-ae513612",[[257,"ifx-pagination",{"currentPage":[2,"current-page"],"showItemsPerPage":[4,"show-items-per-page"],"total":[2],"itemsPerPage":[1,"items-per-page"],"internalPage":[32],"internalItemsPerPage":[32],"numberOfPages":[32],"filteredItemsPerPage":[32],"visiblePages":[32]},[[0,"ifxSelect","setItemsPerPage"]],{"total":["watchTotalHandler"],"currentPage":["currentPageWatcher"]}],[257,"ifx-chip",{"placeholder":[1],"size":[1],"value":[1025],"variant":[1],"theme":[1],"readOnly":[4,"read-only"],"ariaLabel":[1,"aria-label"],"disabled":[4],"icon":[1],"opened":[32],"selectedOptions":[32]},[[5,"mousedown","closeDropdownOnOutsideClick"],[0,"keydown","handleKeyDown"],[0,"ifxChipItemSelect","updateSelectedOptions"]],{"value":["handleValueChange"],"readOnly":["handleReadOnlyChange"]}],[257,"ifx-chip-item",{"value":[1],"chipState":[16,"chip-state"],"selected":[1540]},[[16,"ifxChipItemSelect","updateItemSelection"]],{"selected":["validateSelected"]}]]],["p-d3236a63",[[257,"ifx-link",{"href":[1],"target":[1],"variant":[1],"size":[1],"disabled":[4],"download":[1],"ariaLabel":[1,"aria-label"],"internalHref":[32],"internalTarget":[32],"internalVariant":[32]}]]],["p-bbd819a8",[[256,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"],"internalIcon":[32]},null,{"icon":["updateIcon"]}]]]]'),e)}));
|
|
2
2
|
//# sourceMappingURL=infineon-design-system-stencil.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as e,h as t}from"./p-DtIEDtZ8.js";const r=':root{--ifx-font-family:"Source Sans 3", \'Arial, sans-serif\'}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem "Source Sans 3"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start;color:#575352}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#BFBBBB;word-wrap:break-word}.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"}.step-wrapper .step-label :hover{color:#BFBBBB}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#BFBBBB}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#BFBBBB}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#BFBBBB}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#BFBBBB}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){margin:auto;color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#BFBBBB}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#BFBBBB;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.error-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#BFBBBB}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}';const p=class{constructor(t){e(this,t);this.complete=false;this.disabled=false;this.error=false;this.lastStep=false;this.stepId=1;this.stepperState={activeStep:1,showStepNumber:false,variant:"default",indicatorPosition:"left"};this.clickable=false}onStepChange(e){const t=e.detail.previousActiveStep;if(t===this.stepId&&this.error){this.clickable=true}}updateCurrentStep(e){this.active=e.activeStep===this.stepId}updateErrorState(){if(this.active){this.error=false}}handleStepClick(){if(!this.disabled&&this.stepperState.variant!=="compact"&&(this.clickable||this.complete)){this.stepperState.setActiveStep(this.stepId,true)}}handleStepKeyDown(e){if(!this.disabled&&this.stepperState.variant!=="compact"&&(this.clickable||this.complete)&&e.key==="Enter"){this.stepperState.setActiveStep(this.stepId,true)}}stopOnClickPropogation(e){if(this.disabled){e.stopPropagation()}}render(){return t("div",{key:"9a603ade945d1020bcba53fa85777a27f08f7df1","aria-current":this.active?"step":false,"aria-disabled":this.active||this.complete?false:true,onClick:e=>this.stopOnClickPropogation(e),class:`step-wrapper ${this.stepId===1?"first-step":""} \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":""}`},t("div",{key:"ec1bdd77edfd87f066df44db5f3f0e115b3f7a67",class:"step-icon-wrapper"},this.stepperState.variant!=="compact"&&t("span",{key:"46ae721e9ba89b6f561540d6228b4928d74522a0",class:"step-connector-l"}),this.stepperState.variant!=="compact"&&(!this.error||this.error&&this.active)&&t("div",{key:"e168325daeff9ca6b2ff4e045bce5ec974e9c5d5",class:"step-icon"},this.stepperState.showStepNumber&&!this.complete&&!this.active?this.stepId:"",this.complete&&!this.active&&t("ifx-icon",{key:"4eb3de9575a8704f0ed7e1ade9ccae31ea59c572",icon:"check16"}),this.active&&t("span",{key:"c0c554eaae6a28783a4597633e4c60dbe14c0fda",class:"active-indic"})),this.stepperState.variant!=="compact"&&this.error&&!this.active&&t("ifx-icon",{key:"bfd1043f5e6ca1ceafab56bff6ea13c3a9c05538",class:"error-icon",icon:"warningF16"}),this.stepperState.variant!=="compact"&&t("span",{key:"56b62a62a03b8fe6271a9f3f4eec2bfe24638299",class:`step-connector-r ${this.active?"active":""}`})),(this.stepperState.variant!=="compact"||this.stepperState.variant==="compact"&&(this.active||this.stepId===this.stepperState.activeStep+1))&&t("div",{key:"0c128ec43bdb7539bdaf3229bddead2c515c8dfd",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"&&t("slot",{key:"5b00152f0e2a83bac730628b95d675b2d5fb9708"}),this.stepperState.variant==="compact"&&!this.active?"Next: ":"",this.stepperState.variant==="compact"&&t("slot",{key:"d212e5073db536450a610257a353aef702dd887e"})))}static get watchers(){return{stepperState:["updateCurrentStep"],active:["updateErrorState"]}}};p.style=r;export{p as ifx_step};
|
|
2
|
+
//# sourceMappingURL=p-880ff9af.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["stepCss","Step","constructor","hostRef","this","complete","disabled","error","lastStep","stepId","stepperState","activeStep","showStepNumber","variant","indicatorPosition","clickable","onStepChange","event","previousActiveStep","detail","updateCurrentStep","newStepperState","active","updateErrorState","handleStepClick","setActiveStep","handleStepKeyDown","key","stopOnClickPropogation","stopPropagation","render","h","onClick","e","class","icon","tabIndex","onKeyDown"],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n gap: tokens.$ifxSize100;\n font: tokens.$ifxBodyBody03;\n\n\n &.vertical {\n flex-direction: row;\n gap: tokens.$ifxSize150;\n width: unset;\n height: 100%;\n \n .step-icon-wrapper {\n flex-direction: column;\n width: unset;\n height: 100%;\n }\n }\n \n &.compact {\n gap: 0;\n max-width: 100%;\n .step-label{\n max-width: 100%;\n cursor: auto;\n align-self: flex-start;\n color: tokens.$ifxColorEngineering500;\n }\n \n &.indicator-left {\n align-items: flex-end;\n text-align: right;\n }\n \n &.indicator-right {\n align-items: flex-start;\n }\n }\n\n .step-label {\n max-width: 90%;\n color: tokens.$ifxColorEngineering300; \n word-wrap: break-word;\n &.curr-label{\n font: tokens.$ifxHeadingHeadingCompact04; \n }\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500; \n outline-offset: 2px;\n }\n &.next-label{\n font: tokens.$ifxBodyBody05;\n }\n :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n \n &.first-step {\n .step-connector-l{\n height: 0px;\n }\n }\n \n &.last-step{\n .step-connector-r{\n height: 0px;\n }\n }\n\n &.vertical {\n &.first-step .step-connector-l,\n &.last-step .step-connector-r {\n width: 0px;\n }\n }\n\n &.complete{\n .step-connector-l, .step-connector-r, .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n &:not(.disabled) {\n .step-label{\n cursor: pointer;\n color: tokens.$ifxColorBaseBlack;\n :hover {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n } \n \n &.disabled{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background-color: tokens.$ifxColorEngineering300;\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n \n &.active{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorBaseBlack;\n }\n &.complete .step-label { \n cursor: auto;\n }\n \n } \n\n &.clickable:not(.active) .step-label{\n cursor: pointer;\n }\n\n &.error:not(.active){\n margin: auto;\n color: tokens.$ifxColorRed500;\n .step-label{\n color: tokens.$ifxColorRed500;\n :hover{\n color: tokens.$ifxColorOcean500;\n }\n }\n }\n\n &.disabled{\n .step-label{\n cursor: auto;\n }\n }\n\n &:hover{\n &.complete:not(.disabled):not(.active){\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean600;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n } \n .step-label {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n \n}\n\n.active-indic {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n border-radius: tokens.$ifxBorderRadiusRound;\n background: white;\n}\n\n.step-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n\n.step-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n background-color: tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadiusRound;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.error-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.step-connector-r, \n.step-connector-l {\n height: 2px;\n min-width: tokens.$ifxSize500;\n flex-grow: 1;\n background-color: tokens.$ifxColorEngineering300;\n}\n\n.vertical {\n .step-connector-r, \n .step-connector-l {\n height: unset;\n min-width: unset;\n width: 2px;\n min-height: tokens.$ifxSize500;\n }\n}","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 class= 'error-icon' icon='warningF16'></ifx-icon> }\n \n {/* Right connector */}\n {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n </div>\n\n {\n /* Step labels */\n (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n onClick={() => { this.handleStepClick() }} \n onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n {(this.stepperState.variant !== 'compact') && <slot/>}\n\n {this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : ''}\n {this.stepperState.variant === 'compact' && <slot/>}\n </div>\n }\n\n </div>\n );\n };\n}\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,h as t}from"./p-DtIEDtZ8.js";const r=':root{--ifx-font-family:"Source Sans 3", \'Arial, sans-serif\'}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem "Source Sans 3"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start;color:#575352}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#BFBBBB;word-wrap:break-word}.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"}.step-wrapper .step-label :hover{color:#BFBBBB}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#BFBBBB}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#BFBBBB}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#BFBBBB}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#BFBBBB}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#BFBBBB}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#BFBBBB;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#BFBBBB}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}';const p=class{constructor(t){e(this,t);this.complete=false;this.disabled=false;this.error=false;this.lastStep=false;this.stepId=1;this.stepperState={activeStep:1,showStepNumber:false,variant:"default",indicatorPosition:"left"};this.clickable=false}onStepChange(e){const t=e.detail.previousActiveStep;if(t===this.stepId&&this.error){this.clickable=true}}updateCurrentStep(e){this.active=e.activeStep===this.stepId}updateErrorState(){if(this.active){this.error=false}}handleStepClick(){if(!this.disabled&&this.stepperState.variant!=="compact"&&(this.clickable||this.complete)){this.stepperState.setActiveStep(this.stepId,true)}}handleStepKeyDown(e){if(!this.disabled&&this.stepperState.variant!=="compact"&&(this.clickable||this.complete)&&e.key==="Enter"){this.stepperState.setActiveStep(this.stepId,true)}}stopOnClickPropogation(e){if(this.disabled){e.stopPropagation()}}render(){return t("div",{key:"9a603ade945d1020bcba53fa85777a27f08f7df1","aria-current":this.active?"step":false,"aria-disabled":this.active||this.complete?false:true,onClick:e=>this.stopOnClickPropogation(e),class:`step-wrapper ${this.stepId===1?"first-step":""} \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":""}`},t("div",{key:"ec1bdd77edfd87f066df44db5f3f0e115b3f7a67",class:"step-icon-wrapper"},this.stepperState.variant!=="compact"&&t("span",{key:"46ae721e9ba89b6f561540d6228b4928d74522a0",class:"step-connector-l"}),this.stepperState.variant!=="compact"&&(!this.error||this.error&&this.active)&&t("div",{key:"e168325daeff9ca6b2ff4e045bce5ec974e9c5d5",class:"step-icon"},this.stepperState.showStepNumber&&!this.complete&&!this.active?this.stepId:"",this.complete&&!this.active&&t("ifx-icon",{key:"4eb3de9575a8704f0ed7e1ade9ccae31ea59c572",icon:"check16"}),this.active&&t("span",{key:"c0c554eaae6a28783a4597633e4c60dbe14c0fda",class:"active-indic"})),this.stepperState.variant!=="compact"&&this.error&&!this.active&&t("ifx-icon",{key:"1b27252ddf3369c3732e7b40786645ec2720d8bb",icon:"warningF16"}),this.stepperState.variant!=="compact"&&t("span",{key:"38bf07c39837ed4f77de59c44a2a32fbdb069439",class:`step-connector-r ${this.active?"active":""}`})),(this.stepperState.variant!=="compact"||this.stepperState.variant==="compact"&&(this.active||this.stepId===this.stepperState.activeStep+1))&&t("div",{key:"f13581114efa81deaeecd38ffe27b14d1d3dcc87",tabIndex:!this.disabled&&this.complete&&!this.active?0:-1,class:`step-label ${this.stepperState.variant==="compact"?this.active?"curr-label":"next-label":""}`,onClick:()=>{this.handleStepClick()},onKeyDown:e=>{this.handleStepKeyDown(e)}},this.stepperState.variant!=="compact"&&t("slot",{key:"6accb517e6d561549759a3a723c4c24b1729e80a"}),this.stepperState.variant==="compact"&&!this.active?"Next: ":"",this.stepperState.variant==="compact"&&t("slot",{key:"c6960ab0dd25316c6407433ecad376b66b47d28c"})))}static get watchers(){return{stepperState:["updateCurrentStep"],active:["updateErrorState"]}}};p.style=r;export{p as ifx_step};
|
|
2
|
-
//# sourceMappingURL=p-453bd9bd.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["stepCss","Step","constructor","hostRef","this","complete","disabled","error","lastStep","stepId","stepperState","activeStep","showStepNumber","variant","indicatorPosition","clickable","onStepChange","event","previousActiveStep","detail","updateCurrentStep","newStepperState","active","updateErrorState","handleStepClick","setActiveStep","handleStepKeyDown","key","stopOnClickPropogation","stopPropagation","render","h","onClick","e","class","icon","tabIndex","onKeyDown"],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n gap: tokens.$ifxSize100;\n font: tokens.$ifxBodyBody03;\n\n\n &.vertical {\n flex-direction: row;\n gap: tokens.$ifxSize150;\n width: unset;\n height: 100%;\n \n .step-icon-wrapper {\n flex-direction: column;\n width: unset;\n height: 100%;\n }\n }\n \n &.compact {\n gap: 0;\n max-width: 100%;\n .step-label{\n max-width: 100%;\n cursor: auto;\n align-self: flex-start;\n color: tokens.$ifxColorEngineering500;\n }\n \n &.indicator-left {\n align-items: flex-end;\n text-align: right;\n }\n \n &.indicator-right {\n align-items: flex-start;\n }\n }\n\n .step-label {\n max-width: 90%;\n color: tokens.$ifxColorEngineering300; \n word-wrap: break-word;\n &.curr-label{\n font: tokens.$ifxHeadingHeadingCompact04; \n }\n &:focus {\n outline: 2px solid tokens.$ifxColorOcean500; \n outline-offset: 2px;\n }\n &.next-label{\n font: tokens.$ifxBodyBody05;\n }\n :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n\n \n &.first-step {\n .step-connector-l{\n height: 0px;\n }\n }\n \n &.last-step{\n .step-connector-r{\n height: 0px;\n }\n }\n\n &.vertical {\n &.first-step .step-connector-l,\n &.last-step .step-connector-r {\n width: 0px;\n }\n }\n\n &.complete{\n .step-connector-l, .step-connector-r, .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n &:not(.disabled) {\n .step-label{\n cursor: pointer;\n color: tokens.$ifxColorBaseBlack;\n :hover {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n } \n \n &.disabled{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background-color: tokens.$ifxColorEngineering300;\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorEngineering300;\n }\n }\n \n &.active{\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean500;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n }\n .step-label, \n .step-label :hover{\n color: tokens.$ifxColorBaseBlack;\n }\n &.complete .step-label { \n cursor: auto;\n }\n \n } \n\n &.clickable:not(.active) .step-label{\n cursor: pointer;\n }\n\n &.error:not(.active){\n color: tokens.$ifxColorRed500;\n .step-label{\n color: tokens.$ifxColorRed500;\n :hover{\n color: tokens.$ifxColorOcean500;\n }\n }\n }\n\n &.disabled{\n .step-label{\n cursor: auto;\n }\n }\n\n &:hover{\n &.complete:not(.disabled):not(.active){\n .step-connector-l, \n .step-connector-r, \n .step-icon {\n background: tokens.$ifxColorOcean600;\n &.active, \n &.error {\n background: tokens.$ifxColorEngineering300;\n }\n } \n .step-label {\n color: tokens.$ifxColorOcean600;\n }\n }\n }\n \n}\n\n.active-indic {\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n border-radius: tokens.$ifxBorderRadiusRound;\n background: white;\n}\n\n.step-icon-wrapper {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 100%;\n}\n\n.step-icon {\n width: tokens.$ifxSize300;\n height: tokens.$ifxSize300;\n background-color: tokens.$ifxColorEngineering300;\n border-radius: tokens.$ifxBorderRadiusRound;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n}\n\n.step-connector-r, \n.step-connector-l {\n height: 2px;\n min-width: tokens.$ifxSize500;\n flex-grow: 1;\n background-color: tokens.$ifxColorEngineering300;\n}\n\n.vertical {\n .step-connector-r, \n .step-connector-l {\n height: unset;\n min-width: unset;\n width: 2px;\n min-height: tokens.$ifxSize500;\n }\n}","import { h, \n Component, \n Listen, \n Prop, \n State, \n Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n tag: 'ifx-step',\n styleUrl: 'step.scss',\n shadow: true\n})\n\nexport class Step {\n @Prop() complete?: boolean = false;\n @Prop() disabled?: boolean = false;\n @Prop({ mutable: true }) error?: boolean = false;\n @Prop({ reflect: false }) lastStep: boolean = false;\n @Prop() stepId: number = 1;\n @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n showStepNumber: false, \n variant: 'default', \n indicatorPosition: 'left' };\n\n @State() active: boolean;\n @State() clickable: boolean = false;\n\n @Listen('ifxChange', { target: 'document' })\n onStepChange(event: CustomEvent) {\n const previousActiveStep = event.detail.previousActiveStep;\n if (previousActiveStep === this.stepId && this.error) {\n this.clickable = true;\n }\n } \n\n @Watch('stepperState')\n updateCurrentStep(newStepperState) {\n this.active = (newStepperState.activeStep === this.stepId)\n }\n\n @Watch('active')\n updateErrorState(){\n if (this.active) {\n this.error = false;\n }\n }\n\n\n handleStepClick() {\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete)) {\n this.stepperState.setActiveStep(this.stepId, true)\n } \n }\n \n handleStepKeyDown(event: KeyboardEvent) {\n if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete) && event.key === 'Enter') {\n this.stepperState.setActiveStep(this.stepId, true)\n } \n }\n \n stopOnClickPropogation(event: Event) {\n if (this.disabled) {\n event.stopPropagation();\n }\n }\n\n render() {\n return (\n <div aria-current = {this.active ? 'step': false}\n aria-disabled = {this.active || this.complete ? false : true}\n onClick={ (e) => this.stopOnClickPropogation(e) }\n class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n ${this.error ? 'error': ''}\n ${this.stepperState.variant}\n ${this.complete ? 'complete': ''}\n ${this.lastStep ? 'last-step': ''}\n indicator-${this.stepperState.indicatorPosition}\n ${this.active ? 'active' : ''}\n ${this.clickable ? 'clickable' : ''}\n ${this.disabled ? 'disabled': ''}`}>\n\n <div class = 'step-icon-wrapper'>\n {/* Left connector */}\n {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n {\n (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) && \n <div class = 'step-icon'>\n {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n {this.active && <span class = 'active-indic'></span>}\n </div>\n }\n\n {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningF16'></ifx-icon>}\n \n {/* Right connector */}\n {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n </div>\n\n {\n /* Step labels */\n (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n onClick={() => { this.handleStepClick() }} \n onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n {(this.stepperState.variant !== 'compact') && <slot/>}\n\n {this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : ''}\n {this.stepperState.variant === 'compact' && <slot/>}\n </div>\n }\n\n </div>\n );\n };\n}\n"],"mappings":"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","ignoreList":[]}
|