npm - @ukic/web-components - Versions diffs - 3.12.0 → 3.14.0 - Mend

@ukic/web-components 3.12.0 → 3.14.0

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

Files changed (561) hide show

package/dist/components/ic-step.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-step.js","mappings":"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","names":[],"sources":["src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","src/components/ic-step/ic-step.tsx"],"sourcesContent":["/* SHARED STYLING /\n:host {\n display: flex;\n flex: auto;\n\n --ic-typography-color: currentcolor;\n}\n\n.step {\n display: flex;\n flex: 1 1 0;\n}\n\n.step-icon {\n display: flex;\n justify-content: center;\n}\n\n.heading,\n.subheading,\n.step-status,\n.next-step {\n white-space: pre-line;\n}\n\n.next-step {\n color: var(--ic-stepper-compact-step-next-text);\n}\n\n.visually-hidden {\n position: absolute;\n left: -9999px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n.visually-hidden:dir(rtl) {\n right: -9999px;\n}\n\n/ COMPACT STEP STYLING /\n:host(.ic-step-compact) {\n -moz-column-gap: var(--ic-space-sm);\n column-gap: var(--ic-space-sm);\n\n --compact-step-inner-color: var(--ic-step-indicator-status-current);\n --compact-step-outer-color: var(--ic-step-indicator-status-remaining);\n --compact-step-circular-line-width: var(--ic-space-xxs);\n}\n\n:host(.ic-step-compact) .step {\n -moz-column-gap: var(--ic-space-sm);\n column-gap: var(--ic-space-sm);\n}\n\n:host(.ic-step-compact) .step:not(.current) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n.compact-step-progress-indicator {\n margin: var(--ic-space-xs) 0 0;\n}\n\n:host ic-loading-indicator::part(ic-loading-container) {\n border-radius: 50%;\n}\n\n:host() ic-loading-indicator::part(ic-loading-container) {\n background-color: var(--ic-step-indicator-background);\n}\n\n:host(.ic-step-compact) .heading-area {\n display: flex;\n flex-direction: column;\n width: 14.25rem;\n}\n\n:host(.ic-step-compact) .heading {\n color: var(--ic-stepper-compact-step-title);\n}\n\n:host(.ic-step-compact) .disabled .heading {\n color: var(--ic-stepper-compact-step-title-disabled);\n}\n\n.info-line {\n display: flex;\n -moz-column-gap: var(--ic-space-xs);\n column-gap: var(--ic-space-xs);\n}\n\n.step-status {\n display: flex;\n color: var(--ic-stepper-compact-step-requirement-text);\n -moz-column-gap: var(--ic-space-xxxs);\n column-gap: var(--ic-space-xxxs);\n}\n\n.compact-step-completed .step-status {\n color: var(--ic-stepper-compact-step-completed-text);\n}\n\n.compact-step-disabled :is(.heading, .step-status) {\n color: var(--ic-stepper-compact-step-requirement-text-disabled);\n}\n\n.step-num {\n color: var(--ic-stepper-compact-step-stage-text);\n white-space: nowrap;\n}\n\n:host(.ic-step-compact) .step-icon {\n margin: var(--ic-space-xxxs);\n}\n\n:host(.ic-step-compact) .step-icon svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n/ DEFAULT STEP STYLING /\n:host(.ic-step-default) .step {\n flex-direction: column;\n}\n\n:host(.ic-step-default.last-step) {\n flex-grow: initial;\n}\n\n.step-top {\n display: flex;\n width: 100%;\n align-items: center;\n align-self: flex-start;\n height: 2.5rem;\n}\n\n:host(.ic-step-default) .step-icon {\n border-radius: 50%;\n background-color: var(--ic-step-number-inactive);\n}\n\n.step-icon-inner {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n color: var(--ic-step-number-text-inactive);\n}\n\n:host(.ic-step-default) .current {\n color: var(--ic-status-info-default);\n}\n\n:host(.ic-step-default) .heading-area {\n margin: var(--ic-space-xs) 0;\n padding-right: var(--ic-space-xs);\n width: 100%;\n}\n\n:host(.ic-step-default) .heading,\n.subheading {\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.heading {\n color: var(--ic-step-title);\n}\n\n.current .heading {\n color: var(--ic-step-title-current);\n}\n\n.completed .heading {\n color: var(--ic-step-title-success);\n}\n\n.disabled .heading {\n color: var(--ic-step-title-disabled);\n}\n\n.subheading {\n color: var(--ic-step-title-status-text-inactive);\n}\n\n.current .subheading {\n color: var(--ic-step-title-status-text-current);\n}\n\n.disabled .subheading {\n color: var(--ic-step-title-status-text-disabled);\n}\n\n:host(.ic-step-default) .completed {\n color: var(--ic-status-success-default);\n}\n\n.active .step-icon-inner {\n box-shadow: inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem;\n}\n\n.current .step-icon-inner {\n background-color: var(--ic-step-number-background-active);\n color: var(--ic-step-number-text-current);\n}\n\n.disabled {\n color: var(--ic-color-text-disabled-mid);\n}\n\n.disabled .step-icon-inner {\n border: var(--ic-border-width) dashed var(--ic-step-number-disabled);\n width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n color: var(--ic-step-number-text-disabled);\n}\n\n.disabled .step-icon {\n background-color: transparent !important;\n}\n\n.completed .step-icon-inner {\n background: var(--ic-step-number-background-success);\n box-shadow: inset var(--ic-step-number-background-success) 0 0 0\n var(--ic-space-xxxs);\n border-radius: 100%;\n}\n\n:host(.ic-step-default) .current .step-icon {\n border: var(--ic-space-xxxs) solid var(--ic-step-number-current-outline);\n padding: var(--ic-space-xxxs);\n margin: 0 calc(-1 var(--ic-space-xxxs));\n background-color: var(--ic-step-number-current-outer-fill);\n\n /* compensating for the circle being bigger than other steps /\n}\n\n.step-connect {\n height: var(--ic-space-xxxs);\n background-color: var(--ic-stepper-connector-remaining-status);\n margin: 0 var(--ic-space-xs);\n border-radius: var(--ic-space-xxs);\n width: 100%;\n}\n\n.aligned-full-width.step-connect {\n min-width: 6.25rem;\n width: 100%;\n}\n\n.disabled .step-connect {\n height: 0;\n background-color: rgb(0 0 0 / 0%);\n border-top: 0.125rem dashed var(--ic-stepper-connector-disabled);\n border-radius: 0;\n}\n\n.completed .step-connect {\n background-color: var(--ic-stepper-connector-success);\n}\n\n.step-connect-inner {\n width: 70%;\n display: flex;\n flex: auto;\n height: var(--ic-space-xxxs);\n border-radius: var(--ic-space-xxs);\n background-color: var(--ic-stepper-connector-current-status);\n}\n\n.step-icon-inner .check-icon {\n padding-top: var(--ic-space-xxs);\n}\n\n.step-icon-inner .check-icon svg {\n width: var(--ic-space-md);\n height: auto;\n}\n\n.step-icon-inner .check-icon > svg > path {\n fill: var(--ic-step-number-icon-success);\n}\n\n/* High Contrast */\n@media (forced-colors: active) {\n / COMPACT STEP /\n .compact-step-disabled :is(.heading, .step-status) {\n color: GrayText;\n }\n\n / DEFAULT STEP /\n .step-connect:not(.disabled .step-connect) {\n border: var(--ic-border-hc);\n }\n\n .active .step-icon-inner,\n .completed .step-icon-inner,\n .current .step-icon-inner {\n forced-color-adjust: none;\n box-shadow: inset canvastext 0 0 0 0.125rem;\n background-color: transparent;\n color: canvastext;\n }\n\n :host(.ic-step-default) .current .step-icon {\n padding: 0;\n border: none;\n }\n\n .disabled,\n .disabled .heading-area,\n .disabled .step-icon-inner,\n .disabled .heading {\n color: GrayText;\n }\n\n .step-connect-inner,\n .completed .step-connect {\n background-color: canvastext;\n }\n\n .step-icon-inner .check-icon > svg > path {\n fill: canvastext;\n }\n}\n","import { Component, Host, h, Prop, Element, Watch } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon-outline.svg\";\nimport {\n IcStepVariants,\n IcStepStatuses,\n IcStepTypes,\n IcStepI18n,\n} from \"./ic-step.types\";\nimport { isPropDefined } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-step\",\n styleUrl: \"ic-step.css\",\n shadow: true,\n})\nexport class Step {\n @Element() el: HTMLIcStepElement;\n\n /\n @internal If a compact stepper is being used, this sets the styling of the step.\n /\n @Prop() compactStepStyling?: IcStepTypes;\n\n /\n @internal If `true`, and a compact stepper is being used, the current step will be the only step in view.\n /\n @Prop({ mutable: true }) current?: boolean = false;\n\n /\n Words within the component that can be replaced to translate the component into a different language\n /\n @Prop() icI18n: IcStepI18n = {\n next: \"Next\",\n step: \"Step\",\n of: \"of\",\n lastStep: \"Last step\",\n completed: \"Completed\",\n notRequired: \"Not required\",\n required: \"Required\",\n optional: \"Optional\",\n };\n\n /\n @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n /\n @Prop() lastStep!: boolean;\n\n /\n @internal The step number of the final step. This is managed by ic-stepper.\n /\n @Prop() lastStepNum?: number;\n\n /\n @internal The name of the next step. This is managed by ic-stepper.\n /\n @Prop() nextStepHeading?: string;\n\n /\n @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.\n /\n @Prop() progress?: number;\n\n /\n @internal The step number, managed by ic-stepper.\n /\n @Prop() stepNum?: number;\n\n /\n The status of the step. Use this prop to display a status message on the step if it is required or optional.\n /\n @Prop() status?: IcStepStatuses;\n\n /\n Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.\n /\n @Prop() subheading?: string;\n\n /\n The title of the step within the stepper.\n /\n @Prop() heading?: string;\n\n /\n @internal Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n @internal The variant of the step. This is managed by ic-stepper.\n /\n @Prop() variant!: IcStepVariants;\n\n /\n The state of the step within the stepper.\n */\n @Prop() type?: IcStepTypes = \"active\";\n\n @Watch(\"type\")\n typeChangeHandler(): void {\n if (this.variant === \"compact\" && this.type === \"current\") {\n this.current = true;\n } else {\n this.current = false;\n }\n }\n\n render() {\n const {\n compactStepStyling,\n current,\n heading,\n icI18n,\n lastStep,\n lastStepNum,\n nextStepHeading,\n progress,\n status,\n stepNum,\n subheading,\n theme,\n type,\n variant,\n } = this;\n\n // ARIA LABEL\n let ariaLabel = \"\";\n\n if (type === \"completed\") {\n ariaLabel = `. ${icI18n.completed}`;\n } else if (type === \"disabled\") {\n ariaLabel = `. ${icI18n.notRequired}`;\n } else if (status === \"required\") {\n ariaLabel = `. ${icI18n.required}`;\n } else if (status === \"optional\") {\n ariaLabel = `. ${icI18n.optional}`;\n }\n\n // STEP STATUS\n let stepStatus;\n if (status && isPropDefined(status)) {\n stepStatus = status[0].toUpperCase() + status.slice(1);\n }\n\n // STEP TYPE\n let stepType;\n if (type === \"disabled\" \|\| compactStepStyling === \"disabled\") {\n stepType = icI18n.notRequired;\n } else if (compactStepStyling === \"completed\") {\n stepType = icI18n.completed;\n }\n\n // STATUS ICON FOR COMPACT STEP\n let statusIcon;\n if (type === \"completed\" \|\| compactStepStyling === \"completed\") {\n statusIcon = (\n <span\n class=\"check-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={checkIcon}\n ></span>\n );\n } else if (type === \"disabled\" \|\| compactStepStyling === \"disabled\") {\n statusIcon = (\n <span\n class=\"warning-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={warningIcon}\n ></span>\n );\n }\n\n // COMPACT STEP COMPONENT\n const compactStep = (\n <div\n class={{\n [\"step\"]: true,\n [\"current\"]: !!current,\n [`compact-step-${compactStepStyling}`]: !!compactStepStyling,\n [\"disabled\"]:\n type === \"disabled\" \|\| compactStepStyling === \"disabled\",\n }}\n >\n <ic-loading-indicator\n class={{\n \"compact-step-progress-indicator\": true,\n \"not-required\":\n type === \"disabled\" \|\| compactStepStyling === \"disabled\",\n }}\n aria-hidden=\"true\"\n size=\"small\"\n inner-label={stepNum}\n progress={progress}\n ></ic-loading-indicator>\n <div class=\"heading-area\">\n <ic-typography variant=\"h4\" class=\"heading\">\n {heading}\n </ic-typography>\n <div class=\"info-line\">\n <ic-typography variant=\"caption\" class=\"step-num\">\n {`${stepNum} ${icI18n.of} ${lastStepNum}`}\n <span class=\"visually-hidden\"> steps</span>\n </ic-typography>\n {(this.subheading \|\|\n type === \"completed\" \|\|\n type === \"disabled\" \|\|\n (this.variant === \"compact\" &&\n !!compactStepStyling &&\n compactStepStyling !== \"active\") \|\|\n !!status) && (\n <div class=\"step-status\">\n {statusIcon !== undefined && statusIcon}\n {(subheading \|\| stepType) && (\n <ic-typography variant=\"caption\">\n {subheading !== null && isPropDefined(subheading)\n ? subheading\n : type === \"disabled\" \|\|\n (variant === \"compact\" &&\n compactStepStyling === \"disabled\") \|\|\n type === \"completed\" \|\|\n (variant === \"compact\" &&\n compactStepStyling === \"completed\")\n ? stepType\n : status && stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n {lastStep ? (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n {icI18n.lastStep}\n </ic-typography>\n ) : (\n isPropDefined(nextStepHeading) && (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n {icI18n.next}\n <span class=\"visually-hidden\"> {icI18n.step}</span>:{\" \"}\n {this.nextStepHeading}\n </ic-typography>\n )\n )}\n </div>\n </div>\n );\n\n // ICON FOR DEFAULT STEP\n let icon;\n if (type !== \"completed\") {\n icon = (\n <ic-typography variant=\"subtitle-small\">\n <span class=\"step-icon-inner\" aria-hidden=\"true\">\n {this.stepNum}\n </span>\n </ic-typography>\n );\n } else {\n icon = (\n <div class=\"step-icon-inner\" aria-hidden=\"true\">\n <span class=\"check-icon\" innerHTML={checkIcon}></span>\n </div>\n );\n }\n\n // STEP CONNECT FOR DEFAULT STEP\n const partialBar = type === \"current\" && (\n <div class=\"step-connect-inner\"></div>\n );\n\n const finalStep = !lastStep && (\n <div\n class={{\n [\"step-connect\"]: true,\n [\"aligned-full-width\"]: !!(\n this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n ),\n }}\n >\n {partialBar}\n </div>\n );\n\n // DEFAULT STEP COMPONENT\n const defaultStep = (\n <div\n class={{\n [\"step\"]: true,\n [`${type}`]: true,\n }}\n >\n <div class=\"step-top\">\n <div class=\"step-icon\">{icon}</div>\n {finalStep}\n </div>\n {(heading \|\| subheading \|\| status) && (\n <div class=\"heading-area\">\n {heading && (\n <ic-typography variant=\"subtitle-large\" class=\"heading\">\n {heading}\n </ic-typography>\n )}\n {heading && (subheading \|\| status) && (\n <ic-typography variant=\"caption\" class=\"subheading\">\n {subheading !== null && isPropDefined(subheading)\n ? subheading\n : stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n );\n\n return (\n <Host\n role=\"listitem\"\n aria-label={`${icI18n.step} ${stepNum}${ariaLabel}`}\n aria-current={(current \|\| type === \"current\") && \"step\"}\n class={{\n [\"aligned-full-width\"]: !!(\n this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n ),\n [`ic-step-${variant}`]: true,\n [`ic-theme-${theme}`]: this.theme !== \"inherit\",\n }}\n >\n {variant === \"compact\" ? compactStep : defaultStep}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-step.js","mappings":"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","names":[],"sources":["src/components/ic-step/ic-step.css?tag=ic-step&encapsulation=shadow","src/components/ic-step/ic-step.tsx"],"sourcesContent":["/* SHARED STYLING /\n:host {\n display: flex;\n flex: auto;\n\n --ic-typography-color: currentcolor;\n}\n\n.step {\n display: flex;\n flex: 1 1 0;\n}\n\n.step-icon {\n display: flex;\n justify-content: center;\n}\n\n.heading,\n.subheading,\n.step-status,\n.next-step {\n white-space: pre-line;\n}\n\n.next-step {\n color: var(--ic-stepper-compact-step-next-text);\n}\n\n.visually-hidden {\n position: absolute;\n left: -9999px;\n top: auto;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n.visually-hidden:dir(rtl) {\n right: -9999px;\n}\n\n/ COMPACT STEP STYLING /\n:host(.ic-step-compact) {\n -moz-column-gap: var(--ic-space-sm);\n column-gap: var(--ic-space-sm);\n\n --compact-step-inner-color: var(--ic-step-indicator-status-current);\n --compact-step-outer-color: var(--ic-step-indicator-status-remaining);\n --compact-step-circular-line-width: var(--ic-space-xxs);\n}\n\n:host(.ic-step-compact) .step {\n -moz-column-gap: var(--ic-space-sm);\n column-gap: var(--ic-space-sm);\n}\n\n:host(.ic-step-compact) .step:not(.current) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n.compact-step-progress-indicator {\n margin: var(--ic-space-xs) 0 0;\n}\n\n:host ic-loading-indicator::part(ic-loading-container) {\n border-radius: 50%;\n}\n\n:host() ic-loading-indicator::part(ic-loading-container) {\n background-color: var(--ic-step-indicator-background);\n}\n\n:host(.ic-step-compact) .heading-area {\n display: flex;\n flex-direction: column;\n width: 14.25rem;\n}\n\n:host(.ic-step-compact) .heading {\n color: var(--ic-stepper-compact-step-title);\n}\n\n:host(.ic-step-compact) .disabled .heading {\n color: var(--ic-stepper-compact-step-title-disabled);\n}\n\n.info-line {\n display: flex;\n -moz-column-gap: var(--ic-space-xs);\n column-gap: var(--ic-space-xs);\n}\n\n.step-status {\n display: flex;\n color: var(--ic-stepper-compact-step-requirement-text);\n -moz-column-gap: var(--ic-space-xxxs);\n column-gap: var(--ic-space-xxxs);\n}\n\n.compact-step-completed .step-status {\n color: var(--ic-stepper-compact-step-completed-text);\n}\n\n.compact-step-disabled :is(.heading, .step-status) {\n color: var(--ic-stepper-compact-step-requirement-text-disabled);\n}\n\n.step-num {\n color: var(--ic-stepper-compact-step-stage-text);\n white-space: nowrap;\n}\n\n:host(.ic-step-compact) .step-icon {\n margin: var(--ic-space-xxxs);\n}\n\n:host(.ic-step-compact) .step-icon svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n/ DEFAULT STEP STYLING /\n:host(.ic-step-default) .step {\n flex-direction: column;\n}\n\n:host(.ic-step-default.last-step) {\n flex-grow: initial;\n}\n\n.step-top {\n display: flex;\n width: 100%;\n align-items: center;\n align-self: flex-start;\n height: 2.5rem;\n}\n\n:host(.ic-step-default) .step-icon {\n border-radius: 50%;\n background-color: var(--ic-step-number-inactive);\n}\n\n.step-icon-inner {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n color: var(--ic-step-number-text-inactive);\n}\n\n:host(.ic-step-default) .current {\n color: var(--ic-status-info-default);\n}\n\n:host(.ic-step-default) .heading-area {\n margin: var(--ic-space-xs) 0;\n padding-right: var(--ic-space-xs);\n width: 100%;\n}\n\n:host(.ic-step-default) .heading,\n.subheading {\n width: -moz-fit-content;\n width: fit-content;\n}\n\n.heading {\n color: var(--ic-step-title);\n}\n\n.current .heading {\n color: var(--ic-step-title-current);\n}\n\n.completed .heading {\n color: var(--ic-step-title-success);\n}\n\n.disabled .heading {\n color: var(--ic-step-title-disabled);\n}\n\n.subheading {\n color: var(--ic-step-title-status-text-inactive);\n}\n\n.current .subheading {\n color: var(--ic-step-title-status-text-current);\n}\n\n.disabled .subheading {\n color: var(--ic-step-title-status-text-disabled);\n}\n\n:host(.ic-step-default) .completed {\n color: var(--ic-status-success-default);\n}\n\n.active .step-icon-inner {\n box-shadow: inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem;\n}\n\n.current .step-icon-inner {\n background-color: var(--ic-step-number-background-active);\n color: var(--ic-step-number-text-current);\n}\n\n.disabled {\n color: var(--ic-color-text-disabled-mid);\n}\n\n.disabled .step-icon-inner {\n border: var(--ic-border-width) dashed var(--ic-step-number-disabled);\n width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n color: var(--ic-step-number-text-disabled);\n}\n\n.disabled .step-icon {\n background-color: transparent !important;\n}\n\n.completed .step-icon-inner {\n background: var(--ic-step-number-background-success);\n box-shadow: inset var(--ic-step-number-background-success) 0 0 0\n var(--ic-space-xxxs);\n border-radius: 100%;\n}\n\n:host(.ic-step-default) .current .step-icon {\n border: var(--ic-space-xxxs) solid var(--ic-step-number-current-outline);\n padding: var(--ic-space-xxxs);\n margin: 0 calc(-1 var(--ic-space-xxxs));\n background-color: var(--ic-step-number-current-outer-fill);\n\n /* compensating for the circle being bigger than other steps /\n}\n\n.step-connect {\n height: var(--ic-space-xxxs);\n background-color: var(--ic-stepper-connector-remaining-status);\n margin: 0 var(--ic-space-xs);\n border-radius: var(--ic-space-xxs);\n width: 100%;\n}\n\n.aligned-full-width.step-connect {\n min-width: 6.25rem;\n width: 100%;\n}\n\n.disabled .step-connect {\n height: 0;\n background-color: rgb(0 0 0 / 0%);\n border-top: 0.125rem dashed var(--ic-stepper-connector-disabled);\n border-radius: 0;\n}\n\n.completed .step-connect {\n background-color: var(--ic-stepper-connector-success);\n}\n\n.step-connect-inner {\n width: 70%;\n display: flex;\n flex: auto;\n height: var(--ic-space-xxxs);\n border-radius: var(--ic-space-xxs);\n background-color: var(--ic-stepper-connector-current-status);\n}\n\n.step-icon-inner .check-icon {\n padding-top: var(--ic-space-xxs);\n}\n\n.step-icon-inner .check-icon svg {\n width: var(--ic-space-md);\n height: auto;\n}\n\n.step-icon-inner .check-icon > svg > path {\n fill: var(--ic-step-number-icon-success);\n}\n\n/* High Contrast */\n@media (forced-colors: active) {\n / COMPACT STEP /\n .compact-step-disabled :is(.heading, .step-status) {\n color: GrayText;\n }\n\n / DEFAULT STEP /\n .step-connect:not(.disabled .step-connect) {\n border: var(--ic-border-hc);\n }\n\n .active .step-icon-inner,\n .completed .step-icon-inner,\n .current .step-icon-inner {\n forced-color-adjust: none;\n box-shadow: inset canvastext 0 0 0 0.125rem;\n background-color: transparent;\n color: canvastext;\n }\n\n :host(.ic-step-default) .current .step-icon {\n padding: 0;\n border: none;\n }\n\n .disabled,\n .disabled .heading-area,\n .disabled .step-icon-inner,\n .disabled .heading {\n color: GrayText;\n }\n\n .step-connect-inner,\n .completed .step-connect {\n background-color: canvastext;\n }\n\n .step-icon-inner .check-icon > svg > path {\n fill: canvastext;\n }\n}\n","import { Component, Host, h, Prop, Element, Watch } from \"@stencil/core\";\nimport checkIcon from \"../../assets/check-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon-outline.svg\";\nimport {\n IcStepVariants,\n IcStepStatuses,\n IcStepTypes,\n IcStepI18n,\n} from \"./ic-step.types\";\nimport { isPropDefined } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-step\",\n styleUrl: \"ic-step.css\",\n shadow: true,\n})\nexport class Step {\n @Element() el: HTMLIcStepElement;\n\n /\n @internal If a compact stepper is being used, this sets the styling of the step.\n /\n @Prop() compactStepStyling?: IcStepTypes;\n\n /\n @internal If `true`, and a compact stepper is being used, the current step will be the only step in view.\n /\n @Prop({ mutable: true }) current?: boolean = false;\n\n /\n Words within the component that can be replaced to translate the component into a different language\n /\n @Prop() icI18n: IcStepI18n = {\n next: \"Next\",\n step: \"Step\",\n steps: \"Steps\",\n of: \"of\",\n lastStep: \"Last step\",\n completed: \"Completed\",\n notRequired: \"Not required\",\n required: \"Required\",\n optional: \"Optional\",\n };\n\n /\n @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.\n /\n @Prop() lastStep!: boolean;\n\n /\n @internal The step number of the final step. This is managed by ic-stepper.\n /\n @Prop() lastStepNum?: number;\n\n /\n @internal The name of the next step. This is managed by ic-stepper.\n /\n @Prop() nextStepHeading?: string;\n\n /\n @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.\n /\n @Prop() progress?: number;\n\n /\n @internal The step number, managed by ic-stepper.\n /\n @Prop() stepNum?: number;\n\n /\n The status of the step. Use this prop to display a status message on the step if it is required or optional.\n /\n @Prop() status?: IcStepStatuses;\n\n /\n Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.\n /\n @Prop() subheading?: string;\n\n /\n The title of the step within the stepper.\n /\n @Prop() heading?: string;\n\n /\n @internal Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n @internal The variant of the step. This is managed by ic-stepper.\n /\n @Prop() variant!: IcStepVariants;\n\n /\n The state of the step within the stepper.\n */\n @Prop() type?: IcStepTypes = \"active\";\n\n @Watch(\"type\")\n typeChangeHandler(): void {\n if (this.variant === \"compact\" && this.type === \"current\") {\n this.current = true;\n } else {\n this.current = false;\n }\n }\n\n render() {\n const {\n compactStepStyling,\n current,\n heading,\n icI18n,\n lastStep,\n lastStepNum,\n nextStepHeading,\n progress,\n status,\n stepNum,\n subheading,\n theme,\n type,\n variant,\n } = this;\n\n // ARIA LABEL\n let ariaLabel = \"\";\n\n if (type === \"completed\") {\n ariaLabel = `. ${icI18n.completed}`;\n } else if (type === \"disabled\") {\n ariaLabel = `. ${icI18n.notRequired}`;\n } else if (status === \"required\") {\n ariaLabel = `. ${icI18n.required}`;\n } else if (status === \"optional\") {\n ariaLabel = `. ${icI18n.optional}`;\n }\n\n // STEP STATUS\n let stepStatus;\n if (status && isPropDefined(status)) {\n stepStatus = status[0].toUpperCase() + status.slice(1);\n }\n\n // STEP TYPE\n let stepType;\n if (type === \"disabled\" \|\| compactStepStyling === \"disabled\") {\n stepType = icI18n.notRequired;\n } else if (compactStepStyling === \"completed\") {\n stepType = icI18n.completed;\n }\n\n // STATUS ICON FOR COMPACT STEP\n let statusIcon;\n if (type === \"completed\" \|\| compactStepStyling === \"completed\") {\n statusIcon = (\n <span\n class=\"check-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={checkIcon}\n ></span>\n );\n } else if (type === \"disabled\" \|\| compactStepStyling === \"disabled\") {\n statusIcon = (\n <span\n class=\"warning-icon step-icon\"\n aria-hidden=\"true\"\n innerHTML={warningIcon}\n ></span>\n );\n }\n\n // COMPACT STEP COMPONENT\n const compactStep = (\n <div\n class={{\n [\"step\"]: true,\n [\"current\"]: !!current,\n [`compact-step-${compactStepStyling}`]: !!compactStepStyling,\n [\"disabled\"]:\n type === \"disabled\" \|\| compactStepStyling === \"disabled\",\n }}\n >\n <ic-loading-indicator\n class={{\n \"compact-step-progress-indicator\": true,\n \"not-required\":\n type === \"disabled\" \|\| compactStepStyling === \"disabled\",\n }}\n aria-hidden=\"true\"\n size=\"small\"\n inner-label={stepNum}\n progress={progress}\n ></ic-loading-indicator>\n <div class=\"heading-area\">\n <ic-typography variant=\"h4\" class=\"heading\">\n {heading}\n </ic-typography>\n <div class=\"info-line\">\n <ic-typography variant=\"caption\" class=\"step-num\">\n {`${stepNum} ${icI18n.of} ${lastStepNum}`}\n <span class=\"visually-hidden\">{` ${icI18n.steps}`}</span>\n </ic-typography>\n {(this.subheading \|\|\n type === \"completed\" \|\|\n type === \"disabled\" \|\|\n (this.variant === \"compact\" &&\n !!compactStepStyling &&\n compactStepStyling !== \"active\") \|\|\n !!status) && (\n <div class=\"step-status\">\n {statusIcon !== undefined && statusIcon}\n {(subheading \|\| stepType) && (\n <ic-typography variant=\"caption\">\n {subheading !== null && isPropDefined(subheading)\n ? subheading\n : type === \"disabled\" \|\|\n (variant === \"compact\" &&\n compactStepStyling === \"disabled\") \|\|\n type === \"completed\" \|\|\n (variant === \"compact\" &&\n compactStepStyling === \"completed\")\n ? stepType\n : status && stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n {lastStep ? (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n {icI18n.lastStep}\n </ic-typography>\n ) : (\n isPropDefined(nextStepHeading) && (\n <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n {icI18n.next}\n <span class=\"visually-hidden\"> {icI18n.step}</span>:{\" \"}\n {this.nextStepHeading}\n </ic-typography>\n )\n )}\n </div>\n </div>\n );\n\n // ICON FOR DEFAULT STEP\n let icon;\n if (type !== \"completed\") {\n icon = (\n <ic-typography variant=\"subtitle-small\">\n <span class=\"step-icon-inner\" aria-hidden=\"true\">\n {this.stepNum}\n </span>\n </ic-typography>\n );\n } else {\n icon = (\n <div class=\"step-icon-inner\" aria-hidden=\"true\">\n <span class=\"check-icon\" innerHTML={checkIcon}></span>\n </div>\n );\n }\n\n // STEP CONNECT FOR DEFAULT STEP\n const partialBar = type === \"current\" && (\n <div class=\"step-connect-inner\"></div>\n );\n\n const finalStep = !lastStep && (\n <div\n class={{\n [\"step-connect\"]: true,\n [\"aligned-full-width\"]: !!(\n this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n ),\n }}\n >\n {partialBar}\n </div>\n );\n\n // DEFAULT STEP COMPONENT\n const defaultStep = (\n <div\n class={{\n [\"step\"]: true,\n [`${type}`]: true,\n }}\n >\n <div class=\"step-top\">\n <div class=\"step-icon\">{icon}</div>\n {finalStep}\n </div>\n {(heading \|\| subheading \|\| status) && (\n <div class=\"heading-area\">\n {heading && (\n <ic-typography variant=\"subtitle-large\" class=\"heading\">\n {heading}\n </ic-typography>\n )}\n {heading && (subheading \|\| status) && (\n <ic-typography variant=\"caption\" class=\"subheading\">\n {subheading !== null && isPropDefined(subheading)\n ? subheading\n : stepStatus}\n </ic-typography>\n )}\n </div>\n )}\n </div>\n );\n\n return (\n <Host\n role=\"listitem\"\n aria-label={`${icI18n.step} ${stepNum}${ariaLabel}`}\n aria-current={(current \|\| type === \"current\") && \"step\"}\n class={{\n [\"aligned-full-width\"]: !!(\n this.el.parentElement?.classList.contains(\"ic-stepper-default\") &&\n !this.el.parentElement.classList.contains(\"ic-stepper-aligned-left\")\n ),\n [`ic-step-${variant}`]: true,\n [`ic-theme-${theme}`]: this.theme !== \"inherit\",\n }}\n >\n {variant === \"compact\" ? compactStep : defaultStep}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-stepper.js CHANGED Viewed

@@ -38,6 +38,7 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         this.icI18n = {
             next: "Next",
             step: "Step",
+            steps: "Steps",
             of: "of",
             lastStep: "Last step",
             completed: "Completed",
@@ -265,11 +266,11 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends HTMLEleme
         checkResizeObserver(this.runResizeObserver);
     }
     render() {
-        return (h(Host, { key: 'a5ec9b8d778ba54adf1b3034455e64df0a51fd7c', class: {
+        return (h(Host, { key: '5fe97c7bd124831c6fb863a2122780bb7a0e67f5', class: {
                 [`ic-stepper-${this.variant}`]: true,
                 ["ic-stepper-aligned-left"]: this.variant === "default" && this.aligned === "left",
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("ul", { key: '4140f5cb20325ee4c5c98c855c4b822a448294e8', class: "step-item-list" }, h("slot", { key: 'cda080de502e7760bb3f9a1519f0261b554b0b77' }))));
+            } }, h("ul", { key: 'cb8920a38ceb04f807e71ebf680517764b707be3', class: "step-item-list" }, h("slot", { key: '0d56c6a5b26c0cc30705be1f13187956b7025e26' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-stepper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-stepper.js","mappings":"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","names":[],"sources":["src/components/ic-stepper/ic-stepper.css?tag=ic-stepper&encapsulation=shadow","src/components/ic-stepper/ic-stepper.tsx"],"sourcesContent":[":host {\n display: flex;\n width: 100%;\n}\n\n.step-item-list {\n display: flex;\n margin: 0;\n padding: 0;\n}\n\n:host(.ic-stepper-default:not(.ic-stepper-aligned-left)) .step-item-list {\n flex: auto;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step) {\n display: none;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step.show) {\n display: flex;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step.hide) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n","import { Component, Element, Host, Prop, h, State, Watch } from \"@stencil/core\";\nimport { checkResizeObserver, pxToRem } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\nimport {\n IcStepTypes,\n IcStepVariants,\n IcStepI18n,\n} from \"../ic-step/ic-step.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-stepper\",\n styleUrl: \"ic-stepper.css\",\n shadow: true,\n})\nexport class Stepper {\n private resizeObserver: ResizeObserver \| null = null;\n private steps: HTMLIcStepElement[];\n private stepsWithStepTitles: HTMLIcStepElement[];\n private visuallyHidden: string = \"visually-hidden\";\n\n @Element() el: HTMLIcStepperElement;\n\n @State() alignedFullWidth: boolean = true;\n @State() autoSetStepTitles: boolean = true;\n @State() lastStepWidth: number = 0;\n @State() noOfResizes?: number = 0;\n @State() stepperWidth: number \| undefined = document\n .querySelector(\"ic-stepper\")\n ?.getBoundingClientRect().width;\n @State() stepTypes: IcStepTypes[] = [];\n @State() variantOverride?: boolean = this.variant !== \"compact\";\n\n /*\n The alignment of the default stepper within its container.\n /\n @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n /\n The length of the connector between each step in pixels. Minimum length is 100px.\n /\n @Prop() connectorWidth?: number = 100;\n\n /\n If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.\n /\n @Prop() hideStepInfo?: boolean = false;\n\n /\n Provide alternative values for text in all child steps. For the purpose of translating the application into other languages.\n /\n @Prop() icI18n?: IcStepI18n = {\n next: \"Next\",\n step: \"Step\",\n of: \"of\",\n lastStep: \"Last step\",\n completed: \"Completed\",\n notRequired: \"Not required\",\n required: \"Required\",\n optional: \"Optional\",\n };\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n handleThemeChange(): void {\n this.getChildren();\n this.steps.forEach((step) => {\n step.theme = this.theme;\n });\n }\n\n /\n The variant of the stepper.\n /\n @Prop({ mutable: true }) variant?: IcStepVariants = \"default\";\n\n @Watch(\"hideStepInfo\")\n @Watch(\"variant\")\n handlePropChange(): void {\n this.setHideStepInfo();\n this.getChildren();\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad(): void {\n this.setStepTypes();\n this.handleThemeChange();\n\n if (this.variant === \"compact\") {\n this.variantOverride = false;\n }\n }\n\n componentWillRender(): void {\n this.initialiseStepStates();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n // Get all steps currently within this stepper\n private getChildren = (): void => {\n this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n\n this.stepsWithStepTitles = Array.from(\n this.el.querySelectorAll(\"ic-step[heading]\")\n );\n };\n\n // Inform the user that stepTitles are required on all steps in a compact stepper\n private checkStepTitles = (): void => {\n if (\n this.stepsWithStepTitles.length < this.steps.length &&\n this.variantOverride &&\n this.variant === \"compact\"\n ) {\n this.noOfResizes = this.noOfResizes! + 1;\n if (this.noOfResizes === 1) {\n console.error(\n `The prop 'heading' is required for all steps of the Stepper component (compact variant)`\n );\n }\n }\n };\n\n private setStepTypes = (): void => {\n this.getChildren();\n this.stepTypes = [];\n for (let i = 0; i < this.steps.length; i++) {\n this.stepTypes.push(\"active\");\n }\n };\n\n private setStepperWidth = (): void => {\n this.alignedFullWidth =\n this.variant === \"default\" && this.aligned === \"full-width\";\n\n const lastStep = this.steps[this.steps.length - 1];\n lastStep.style.maxWidth = \"none\";\n\n if (this.alignedFullWidth) {\n this.stepperWidth = this.el.offsetWidth;\n lastStep.style.maxWidth = pxToRem(\n `${this.stepperWidth / this.steps.length}px`\n );\n this.lastStepWidth = lastStep.offsetWidth;\n }\n };\n\n private initialiseStepStates = (): void => {\n this.steps.forEach((step, index) => {\n // Set language\n if (this.icI18n !== undefined) {\n step.icI18n = this.icI18n;\n }\n // Set variant\n step.variant = this.variant!;\n // Assign stepNum to each step\n step.stepNum = index + 1;\n // Assign lastStep to final step\n step.lastStep = index === this.steps.length - 1;\n step.lastStepNum = this.steps.length;\n\n if (step.type !== \"current\") {\n step.current = false;\n this.stepTypes[index] = step.type!;\n } else {\n step.current = true;\n }\n\n const stepTitleArea =\n step.shadowRoot &&\n step.shadowRoot.querySelector(\".step > .heading-area\");\n\n if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {\n if (this.variant === \"compact\") {\n this.autoSetStepTitles = true;\n if (this.autoSetStepTitles) {\n step.heading = \"Step \" + step.stepNum;\n stepTitleArea &&\n stepTitleArea\n ?.querySelector(\".heading\")\n ?.setAttribute(\"aria-hidden\", \"true\");\n }\n }\n if (this.variant === \"default\") {\n this.autoSetStepTitles = false;\n if (!this.autoSetStepTitles) {\n step.heading = undefined;\n stepTitleArea &&\n stepTitleArea\n ?.querySelector(\".heading\")\n ?.removeAttribute(\"aria-hidden\");\n }\n }\n }\n\n if (this.variant === \"compact\") {\n if (step.current === true \|\| step.type === \"current\") {\n step.classList.remove(\"hide\");\n step.classList.add(\"show\");\n } else if (step.classList.contains(\"show\")) {\n step.classList.remove(\"show\");\n step.classList.add(\"hide\");\n }\n\n if (!step.lastStep) {\n step.nextStepHeading = this.steps[index + 1].heading;\n step.progress = (step.stepNum / this.steps.length) 100;\n } else if (step.lastStep && this.stepTypes[index] !== \"completed\") {\n step.progress = 95;\n } else {\n step.progress = 100;\n }\n\n if (this.hideStepInfo && stepTitleArea !== null) {\n stepTitleArea.classList.remove(this.visuallyHidden);\n }\n\n step.compactStepStyling = this.stepTypes[index];\n }\n\n if (this.variant === \"default\") {\n if (!step.lastStep) {\n if (this.alignedFullWidth && this.stepperWidth !== undefined) {\n step.style.width = pxToRem(\n `${\n (this.stepperWidth - this.lastStepWidth) /\n (this.steps.length - 1)\n }px`\n );\n step.style.minWidth = pxToRem(\"148px\");\n }\n } else if (step.lastStep) {\n step.classList.add(\"last-step\");\n if (this.alignedFullWidth) {\n step.style.maxWidth = `${this.lastStepWidth}px`;\n } else if (this.connectorWidth) {\n step.style.maxWidth =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth + 48}px`)\n : pxToRem(\"148px\");\n }\n }\n\n if (this.aligned === \"left\" && this.connectorWidth) {\n step.style.width =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth + 48}px`)\n : pxToRem(\"148px\");\n const stepConnect = step.shadowRoot?.querySelector(\n \".step > .step-top > .step-connect\"\n ) as HTMLElement;\n\n if (stepConnect) {\n stepConnect.style.width =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth}px`)\n : pxToRem(\"100px\");\n }\n }\n\n if (this.hideStepInfo && stepTitleArea !== null) {\n stepTitleArea.classList.add(this.visuallyHidden);\n }\n }\n });\n };\n\n private setHideStepInfo = (): void => {\n this.steps.forEach((step) => {\n const stepTitleArea = step.shadowRoot?.querySelector(\n \".step > .heading-area\"\n );\n\n if (stepTitleArea) {\n if (this.hideStepInfo) {\n stepTitleArea.classList?.add(this.visuallyHidden);\n } else {\n stepTitleArea.classList?.remove(this.visuallyHidden);\n }\n }\n });\n };\n\n private overrideVariant = () => {\n if (this.variantOverride) {\n let minDefaultStepperWidth = 148 * this.steps.length;\n\n if (\n this.aligned === \"left\" &&\n this.connectorWidth &&\n this.connectorWidth > 100\n ) {\n minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;\n }\n if (this.el.clientWidth < minDefaultStepperWidth) {\n this.variant = \"compact\";\n } else {\n this.variant = \"default\";\n }\n }\n };\n\n private resizeObserverCallback = () => {\n this.getChildren();\n this.checkStepTitles();\n this.overrideVariant();\n this.setStepperWidth();\n this.initialiseStepStates();\n this.handleThemeChange();\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n return (\n <Host\n class={{\n [`ic-stepper-${this.variant}`]: true,\n [\"ic-stepper-aligned-left\"]:\n this.variant === \"default\" && this.aligned === \"left\",\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <ul class=\"step-item-list\">\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-stepper.js","mappings":"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","names":[],"sources":["src/components/ic-stepper/ic-stepper.css?tag=ic-stepper&encapsulation=shadow","src/components/ic-stepper/ic-stepper.tsx"],"sourcesContent":[":host {\n display: flex;\n width: 100%;\n}\n\n.step-item-list {\n display: flex;\n margin: 0;\n padding: 0;\n}\n\n:host(.ic-stepper-default:not(.ic-stepper-aligned-left)) .step-item-list {\n flex: auto;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step) {\n display: none;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step.show) {\n display: flex;\n}\n\n:host(.ic-stepper-compact) ul ::slotted(ic-step.hide) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n","import { Component, Element, Host, Prop, h, State, Watch } from \"@stencil/core\";\nimport { checkResizeObserver, pxToRem } from \"../../utils/helpers\";\nimport { IcStepperAlignment } from \"./ic-stepper.types\";\nimport {\n IcStepTypes,\n IcStepVariants,\n IcStepI18n,\n} from \"../ic-step/ic-step.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-stepper\",\n styleUrl: \"ic-stepper.css\",\n shadow: true,\n})\nexport class Stepper {\n private resizeObserver: ResizeObserver \| null = null;\n private steps: HTMLIcStepElement[];\n private stepsWithStepTitles: HTMLIcStepElement[];\n private visuallyHidden: string = \"visually-hidden\";\n\n @Element() el: HTMLIcStepperElement;\n\n @State() alignedFullWidth: boolean = true;\n @State() autoSetStepTitles: boolean = true;\n @State() lastStepWidth: number = 0;\n @State() noOfResizes?: number = 0;\n @State() stepperWidth: number \| undefined = document\n .querySelector(\"ic-stepper\")\n ?.getBoundingClientRect().width;\n @State() stepTypes: IcStepTypes[] = [];\n @State() variantOverride?: boolean = this.variant !== \"compact\";\n\n /*\n The alignment of the default stepper within its container.\n /\n @Prop() aligned?: IcStepperAlignment = \"full-width\";\n\n /\n The length of the connector between each step in pixels. Minimum length is 100px.\n /\n @Prop() connectorWidth?: number = 100;\n\n /\n If `true`, the information about each step, i.e. step title, step subtitle and step status, will be hidden on all default steps. The information about each step will still be visible in the compact variant of the stepper.\n /\n @Prop() hideStepInfo?: boolean = false;\n\n /\n Provide alternative values for text in all child steps. For the purpose of translating the application into other languages.\n /\n @Prop() icI18n?: IcStepI18n = {\n next: \"Next\",\n step: \"Step\",\n steps: \"Steps\",\n of: \"of\",\n lastStep: \"Last step\",\n completed: \"Completed\",\n notRequired: \"Not required\",\n required: \"Required\",\n optional: \"Optional\",\n };\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n handleThemeChange(): void {\n this.getChildren();\n this.steps.forEach((step) => {\n step.theme = this.theme;\n });\n }\n\n /\n The variant of the stepper.\n /\n @Prop({ mutable: true }) variant?: IcStepVariants = \"default\";\n\n @Watch(\"hideStepInfo\")\n @Watch(\"variant\")\n handlePropChange(): void {\n this.setHideStepInfo();\n this.getChildren();\n }\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad(): void {\n this.setStepTypes();\n this.handleThemeChange();\n\n if (this.variant === \"compact\") {\n this.variantOverride = false;\n }\n }\n\n componentWillRender(): void {\n this.initialiseStepStates();\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n // Get all steps currently within this stepper\n private getChildren = (): void => {\n this.steps = Array.from(this.el.querySelectorAll(\"ic-step\"));\n\n this.stepsWithStepTitles = Array.from(\n this.el.querySelectorAll(\"ic-step[heading]\")\n );\n };\n\n // Inform the user that stepTitles are required on all steps in a compact stepper\n private checkStepTitles = (): void => {\n if (\n this.stepsWithStepTitles.length < this.steps.length &&\n this.variantOverride &&\n this.variant === \"compact\"\n ) {\n this.noOfResizes = this.noOfResizes! + 1;\n if (this.noOfResizes === 1) {\n console.error(\n `The prop 'heading' is required for all steps of the Stepper component (compact variant)`\n );\n }\n }\n };\n\n private setStepTypes = (): void => {\n this.getChildren();\n this.stepTypes = [];\n for (let i = 0; i < this.steps.length; i++) {\n this.stepTypes.push(\"active\");\n }\n };\n\n private setStepperWidth = (): void => {\n this.alignedFullWidth =\n this.variant === \"default\" && this.aligned === \"full-width\";\n\n const lastStep = this.steps[this.steps.length - 1];\n lastStep.style.maxWidth = \"none\";\n\n if (this.alignedFullWidth) {\n this.stepperWidth = this.el.offsetWidth;\n lastStep.style.maxWidth = pxToRem(\n `${this.stepperWidth / this.steps.length}px`\n );\n this.lastStepWidth = lastStep.offsetWidth;\n }\n };\n\n private initialiseStepStates = (): void => {\n this.steps.forEach((step, index) => {\n // Set language\n if (this.icI18n !== undefined) {\n step.icI18n = this.icI18n;\n }\n // Set variant\n step.variant = this.variant!;\n // Assign stepNum to each step\n step.stepNum = index + 1;\n // Assign lastStep to final step\n step.lastStep = index === this.steps.length - 1;\n step.lastStepNum = this.steps.length;\n\n if (step.type !== \"current\") {\n step.current = false;\n this.stepTypes[index] = step.type!;\n } else {\n step.current = true;\n }\n\n const stepTitleArea =\n step.shadowRoot &&\n step.shadowRoot.querySelector(\".step > .heading-area\");\n\n if (this.stepsWithStepTitles.length == 0 && this.variantOverride) {\n if (this.variant === \"compact\") {\n this.autoSetStepTitles = true;\n if (this.autoSetStepTitles) {\n step.heading = \"Step \" + step.stepNum;\n stepTitleArea &&\n stepTitleArea\n ?.querySelector(\".heading\")\n ?.setAttribute(\"aria-hidden\", \"true\");\n }\n }\n if (this.variant === \"default\") {\n this.autoSetStepTitles = false;\n if (!this.autoSetStepTitles) {\n step.heading = undefined;\n stepTitleArea &&\n stepTitleArea\n ?.querySelector(\".heading\")\n ?.removeAttribute(\"aria-hidden\");\n }\n }\n }\n\n if (this.variant === \"compact\") {\n if (step.current === true \|\| step.type === \"current\") {\n step.classList.remove(\"hide\");\n step.classList.add(\"show\");\n } else if (step.classList.contains(\"show\")) {\n step.classList.remove(\"show\");\n step.classList.add(\"hide\");\n }\n\n if (!step.lastStep) {\n step.nextStepHeading = this.steps[index + 1].heading;\n step.progress = (step.stepNum / this.steps.length) 100;\n } else if (step.lastStep && this.stepTypes[index] !== \"completed\") {\n step.progress = 95;\n } else {\n step.progress = 100;\n }\n\n if (this.hideStepInfo && stepTitleArea !== null) {\n stepTitleArea.classList.remove(this.visuallyHidden);\n }\n\n step.compactStepStyling = this.stepTypes[index];\n }\n\n if (this.variant === \"default\") {\n if (!step.lastStep) {\n if (this.alignedFullWidth && this.stepperWidth !== undefined) {\n step.style.width = pxToRem(\n `${\n (this.stepperWidth - this.lastStepWidth) /\n (this.steps.length - 1)\n }px`\n );\n step.style.minWidth = pxToRem(\"148px\");\n }\n } else if (step.lastStep) {\n step.classList.add(\"last-step\");\n if (this.alignedFullWidth) {\n step.style.maxWidth = `${this.lastStepWidth}px`;\n } else if (this.connectorWidth) {\n step.style.maxWidth =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth + 48}px`)\n : pxToRem(\"148px\");\n }\n }\n\n if (this.aligned === \"left\" && this.connectorWidth) {\n step.style.width =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth + 48}px`)\n : pxToRem(\"148px\");\n const stepConnect = step.shadowRoot?.querySelector(\n \".step > .step-top > .step-connect\"\n ) as HTMLElement;\n\n if (stepConnect) {\n stepConnect.style.width =\n this.connectorWidth > 100\n ? pxToRem(`${this.connectorWidth}px`)\n : pxToRem(\"100px\");\n }\n }\n\n if (this.hideStepInfo && stepTitleArea !== null) {\n stepTitleArea.classList.add(this.visuallyHidden);\n }\n }\n });\n };\n\n private setHideStepInfo = (): void => {\n this.steps.forEach((step) => {\n const stepTitleArea = step.shadowRoot?.querySelector(\n \".step > .heading-area\"\n );\n\n if (stepTitleArea) {\n if (this.hideStepInfo) {\n stepTitleArea.classList?.add(this.visuallyHidden);\n } else {\n stepTitleArea.classList?.remove(this.visuallyHidden);\n }\n }\n });\n };\n\n private overrideVariant = () => {\n if (this.variantOverride) {\n let minDefaultStepperWidth = 148 * this.steps.length;\n\n if (\n this.aligned === \"left\" &&\n this.connectorWidth &&\n this.connectorWidth > 100\n ) {\n minDefaultStepperWidth = (this.connectorWidth + 48) * this.steps.length;\n }\n if (this.el.clientWidth < minDefaultStepperWidth) {\n this.variant = \"compact\";\n } else {\n this.variant = \"default\";\n }\n }\n };\n\n private resizeObserverCallback = () => {\n this.getChildren();\n this.checkStepTitles();\n this.overrideVariant();\n this.setStepperWidth();\n this.initialiseStepStates();\n this.handleThemeChange();\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n return (\n <Host\n class={{\n [`ic-stepper-${this.variant}`]: true,\n [\"ic-stepper-aligned-left\"]:\n this.variant === \"default\" && this.aligned === \"left\",\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <ul class=\"step-item-list\">\n <slot></slot>\n </ul>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-switch.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { r as removeDisabledFalse, s as removeFormResetListener, q as addFormResetListener, o as onComponentRequiredPropUndefined, t as renderHiddenInput, v as getInputDescribedByText } from './helpers.js';
+import { r as removeDisabledFalse, t as removeFormResetListener, s as addFormResetListener, o as onComponentRequiredPropUndefined, u as renderHiddenInput, w as getInputDescribedByText } from './helpers.js';
 import { d as defineCustomElement$3 } from './ic-input-label2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
@@ -99,16 +99,16 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends HTMLElement
         const { label, checkedState, size, disabled, name, value, hideLabel, helperText, inputId, theme, } = this;
         const isSmall = size === "small";
         renderHiddenInput(this.el, checkedState ? value : "", name, disabled);
-        return (h(Host, { key: '1f3cc9bbab1f273d76380e351f4fc3dfbcb85a55', class: {
+        return (h(Host, { key: '1e956030826e52752e8c7653b8da25af46f52426', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("label", { key: '49569c926514f3832f137bc36638fc8318407abe', class: {
+            } }, h("label", { key: '91501b821fe6124254ee768b372e064cd081fb16', class: {
                 "ic-switch-container": true,
                 "ic-switch-disabled": !!disabled,
                 "ic-switch-small": isSmall,
-            }, htmlFor: inputId }, !hideLabel && (h("ic-input-label", { key: '1e7934fa8eb3514931b16e3723374792da3fc77b', for: inputId, label: label, helperText: helperText, readonly: false, disabled: disabled, class: {
+            }, htmlFor: inputId }, !hideLabel && (h("ic-input-label", { key: 'f9f89f3e0a580fd136efb7b7f896c74020a22b08', for: inputId, label: label, helperText: helperText, readonly: false, disabled: disabled, class: {
                 "ic-switch-label": true,
                 "ic-switch-label-small": isSmall,
-            } }, h("slot", { key: '909af29daf9c94113ee16fbba1eeba563acb6a91', name: "helper-text", slot: "helper-text" }))), !hideLabel && h("span", { key: 'e25526f252995da3cfe450eb806a3eb1ef5a2089', class: "ic-switch-line-break" }), h("input", { key: 'e6e78d8ddb9af85c055adcad3ef21fbac2fd5d01', checked: checkedState, disabled: disabled, "aria-label": label, "aria-checked": checkedState ? "true" : "false", "aria-describedby": getInputDescribedByText(this.el, inputId, helperText !== "", false), role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h("span", { key: 'a0be597711d9b13b2e0224b9518f364a55d7f3bd', class: "ic-switch-toggle" }, h("svg", { key: '2f7dab194ad8a6d0795c9067b1a6f4e162b79aa3', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { key: 'f763ce863fe848d012cacc38886a6c39c6857f06', class: "ic-switch-icon-line", x1: "9", y1: isSmall ? "2" : "1", x2: "9", y2: isSmall ? "8" : "9" })), h("svg", { key: '49fa1c767bad7c491a6c52c4efa9c5fb1d2d9646', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '5165a18b8d1e9d5e9d0067d00559d76f50522753', class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: isSmall ? "3.335" : "4.445" }))), h("slot", { key: 'ddee1e8995f799a83c5e00f44c041130bc7d7978', name: "right-adornment" }))));
+            } }, h("slot", { key: 'ba6d621b604fb414e32b3610730faece841d30e6', name: "helper-text", slot: "helper-text" }))), !hideLabel && h("span", { key: 'd2a675ea63e51c6f3a2c9e22494a4d04ea7d6376', class: "ic-switch-line-break" }), h("input", { key: 'd0ebcc9c3119699b54ed088a511e050229e57b05', checked: checkedState, disabled: disabled, "aria-label": label, "aria-checked": checkedState ? "true" : "false", "aria-describedby": getInputDescribedByText(this.el, inputId, helperText !== "", false), role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h("span", { key: '7f5c08f419bda58267c3664dc6d63ed5218310b6', class: "ic-switch-toggle" }, h("svg", { key: '72c0c627015a5d4928b5b1301498b3b35bc07a9e', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { key: '82aa70d102ff0444cf751b2d180a9407cfa6f3fb', class: "ic-switch-icon-line", x1: "9", y1: isSmall ? "2" : "1", x2: "9", y2: isSmall ? "8" : "9" })), h("svg", { key: '2234f9200dd364dcb995e6f12d380ae141e6320a', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '60c2fbd7fc71a7e310d42b8b20c5c4483aa743a7', class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: isSmall ? "3.335" : "4.445" }))), h("slot", { key: 'eb81e7b8b1c6037e23074d407174060811af077e', name: "right-adornment" }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }

package/dist/components/ic-tab-context.js CHANGED Viewed

@@ -232,7 +232,7 @@ const TabContext = /*@__PURE__*/ proxyCustomElement(class TabContext extends HTM
         }
     }
     render() {
-        return h("slot", { key: 'a5806f753757f1367b776c388a57f5760656906d' });
+        return h("slot", { key: 'ddf3e45c3bd98315d6d49e35e3b309acfefc0782' });
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-tab-group.js CHANGED Viewed

@@ -28,11 +28,11 @@ const TabGroup = /*@__PURE__*/ proxyCustomElement(class TabGroup extends HTMLEle
     }
     render() {
         const { inline, theme, label, monochrome } = this;
-        return (h(Host, { key: '89f78b3bc3025f9bc250fb045612f11230448011', role: "tablist", "aria-label": label, class: {
+        return (h(Host, { key: 'e6eda4f0fddf03fa0e666070e9fe4a01ed6c244c', role: "tablist", "aria-label": label, class: {
                 ["ic-tab-group-inline"]: !!inline,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-tab-group-monochrome"]: !!monochrome,
-            } }, h("ic-horizontal-scroll", { key: '8924e03f1928a7c726576570ca817638169be532', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: 'c9534b3cb05161ee14a494925bd31ce3dc6f98f2', class: "tabs-container" }, h("slot", { key: '63515a30dd40c06faf2a79f5cbb0cdf15fb726f5' })))));
+            } }, h("ic-horizontal-scroll", { key: 'b2387259eee6357ea9d90560aef246a035158e01', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: 'a8351a7ab0e0a9ac824f5a4be46af8a97c6cb8dd', class: "tabs-container" }, h("slot", { key: '5008e5e509035d59bbf397a986af8d390ecacf1e' })))));
     }
     static get delegatesFocus() { return true; }
     static get style() { return IcTabGroupStyle0; }

package/dist/components/ic-tab-panel.js CHANGED Viewed

@@ -26,10 +26,10 @@ const TabPanel = /*@__PURE__*/ proxyCustomElement(class TabPanel extends HTMLEle
     }
     render() {
         const { active, theme } = this;
-        return (h(Host, { key: '96cf1fa97b36ba44f3e17601512962335437029a', class: {
+        return (h(Host, { key: '33c2600681317fb27e801153496452582e5862a8', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-tab-panel-hidden": !active,
-            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: '5fe1129fa2147621848ecb047b50002021a71d6b' }, h("slot", { key: '4d479874c672f99d382b08f5c772cb787a1bdf8a' }))));
+            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: '722ead8cc9ed26d0815781211bb5e657aa65f8ba' }, h("slot", { key: '78dad6e7c3d0ba3c684d586c0a16d2d1e7de32f7' }))));
     }
     get el() { return this; }
     static get style() { return IcTabPanelStyle0; }

package/dist/components/ic-tab.js CHANGED Viewed

@@ -91,13 +91,13 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends HTMLElement {
     }
     render() {
         const { disabled, selected, theme, monochrome, handleClick, handleFocus, handleMouseDown, } = this;
-        return (h(Host, { key: 'fe6e517a696ed23c6fb64028d617997439ebbac6', class: {
+        return (h(Host, { key: '954c5dd86688230d4ebb36c8a98b9c30c1524fc9', class: {
                 ["with-transition"]: !this.isInitialRender,
                 ["ic-tab-selected"]: !!selected,
                 ["ic-tab-disabled"]: !!disabled,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-tab-monochrome"]: !!monochrome,
-            }, role: "tab", "aria-selected": `${selected}`, onClick: handleClick, onFocus: handleFocus, onMouseDown: handleMouseDown, "aria-disabled": `${disabled}`, tabindex: selected ? 0 : -1 }, isSlotUsed(this.el, "icon") && h("slot", { key: '9c2bf173facd6f4b4fa96824bb14db06a2b97c6b', name: "icon" }), h("ic-typography", { key: 'f1d4732d8f5ad9f198f2da6c08c3717731dcd8da', class: "ic-tab-label", variant: "label" }, h("span", { key: '9f993fe757e86acb507a58259e47e507a5feddc3' }, h("slot", { key: '2bfe6c474802a62771ce58947305f0b71db1803d' }))), isSlotUsed(this.el, "badge") && h("slot", { key: '23c6074e338df9e72b77b5449938f61f9ee042a0', name: "badge" })));
+            }, role: "tab", "aria-selected": `${selected}`, onClick: handleClick, onFocus: handleFocus, onMouseDown: handleMouseDown, "aria-disabled": `${disabled}`, tabindex: selected ? 0 : -1 }, isSlotUsed(this.el, "icon") && h("slot", { key: '11506c4354b5dc44310df86479b02ed0638bbe32', name: "icon" }), h("ic-typography", { key: 'd466ad914e607cabb9ff47dc31b6428a081b08a7', class: "ic-tab-label", variant: "label" }, h("span", { key: '8cc33760084b7735ed7db8b222a2b0374c936f3f' }, h("slot", { key: '04bdfe11cd1eef76fad7f6e0afa7e059251ba3cc' }))), isSlotUsed(this.el, "badge") && h("slot", { key: 'a29692b7826b09874aba3ec5579dbca979cd791a', name: "badge" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-text-field.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { S as isEmptyString, Q as checkSlotInChildMutations, r as removeDisabledFalse, P as debounceEvent, s as removeFormResetListener, b as inheritAttributes, q as addFormResetListener, o as onComponentRequiredPropUndefined, z as IcInformationStatus, v as getInputDescribedByText, t as renderHiddenInput, u as removeHiddenInput, i as isSlotUsed } from './helpers.js';
+import { C as isEmptyString, S as checkSlotInChildMutations, r as removeDisabledFalse, R as debounceEvent, t as removeFormResetListener, b as inheritAttributes, s as addFormResetListener, o as onComponentRequiredPropUndefined, A as IcInformationStatus, w as getInputDescribedByText, u as renderHiddenInput, v as removeHiddenInput, i as isSlotUsed } from './helpers.js';
 import { e as IGNORED_KEYBOARD_CHARACTERS, I as IC_INHERITED_ARIA } from './constants.js';
 import { d as defineCustomElement$6 } from './ic-input-component-container2.js';
 import { d as defineCustomElement$5 } from './ic-input-container2.js';
@@ -338,7 +338,12 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends HTMLE
         }
     }
     handleKeyDown(ev) {
-        this.icKeydown.emit({ event: ev });
+        var _a, _b;
+        this.icKeydown.emit({
+            event: ev,
+            cursorPosition: (_a = this.inputEl.selectionStart) !== null && _a !== void 0 ? _a : 0,
+            selectionEnd: (_b = this.inputEl.selectionEnd) !== null && _b !== void 0 ? _b : 0,
+        });
         if (!ev.ctrlKey && !IGNORED_KEYBOARD_CHARACTERS.includes(ev.key)) {
             this.maxCharactersWarning = this.maxCharactersReached;
         }
@@ -395,14 +400,14 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends HTMLE
         hiddenInput
             ? renderHiddenInput(this.el, value, name, disabledMode)
             : removeHiddenInput(this.el);
-        return (h(Host, { key: '985b46adc3cee088de75766a4230042e4af8c9c3', class: {
+        return (h(Host, { key: '1b376250d6e147cac7b9dbb15ae5eb7a2ba6aefe', class: {
                 "ic-text-field-full-width": fullWidth,
                 "ic-text-field-disabled": disabledMode,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("ic-input-container", { key: '4b9794b880ab440c1c2e6cf2072c13d9d88cc1fa', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '6ccf8091d697ddce0dade9a81d38e7bc17315da9', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, h("slot", { key: '0ecf6a100c43efdca46f3b7c03ac6a5a8f7cc972', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: 'a1d649e733cab8590b92db3c0ecda49ea021103f', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: 'd3228d1ab97951891316b60608ce8a9fbe6295bb', class: {
+            } }, h("ic-input-container", { key: 'ef66c6d29dd16f57af7d10d177210c63979ad106', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '2c4e3c9f6580a1d68983758214be4be7d5c9c762', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, h("slot", { key: 'c0a2199348d4157e67deca641480e2c2d3d16550', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '5bcfba3d42c94cf7abc8f7ad2ba29b5b80ffe511', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: 'd98d07fb64f7cdfed8d66860b4df4a1b64174a24', class: {
                 readonly,
                 "has-value": this.getNumberOfCharacters(value) > 0,
-            }, slot: "left-icon" }, h("slot", { key: 'ea62e21d7abc5048da1a8e9a15f5a5a535c963b3', name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: type, min: min, max: max, value: value, class: {
+            }, slot: "left-icon" }, h("slot", { key: '8508568fb8dada7941c0ac9f938f6a71892e06ff', name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: type, min: min, max: max, value: value, class: {
                 "no-left-pad": !showLeftIcon && readonly,
                 readonly,
                 "truncate-value": truncateValue,
@@ -410,12 +415,12 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends HTMLE
                 "no-resize": resize === false || !!readonly,
                 "no-left-pad": !showLeftIcon && !!readonly,
                 readonly: !!readonly,
-            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onScroll: this.onTextAreaScroll, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocomplete: autocomplete, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: 'e02f69a6fd4c654b7f3b5f1593f7a29c7412d10f', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: '2e32b1afd58a382a804a356537489efa523009ce', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: '1cbac8ded359309907e51f16033b03d266eb8828', name: "menu" }), h("ic-input-validation", { key: '55a5e1762111cb2715679f6263719924b098acd4', class: { "show-validation": this.showValidationMargin() }, status: this.hasStatus(currentStatus) === false ||
+            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onScroll: this.onTextAreaScroll, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocomplete: autocomplete, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: '91761fa97b0bb02a095968b7e204ebb93c3cdebf', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: '656d028a1add45972896a170347b0733f1794eec', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: 'f305e73e1035983c26fd6f738a46446c43a81245', name: "menu" }), h("ic-input-validation", { key: '85a6ff5809be1edcc921c46a6a415e5739c14baa', class: { "show-validation": this.showValidationMargin() }, status: this.hasStatus(currentStatus) === false ||
                 (currentStatus === IcInformationStatus.Success &&
                     validationInline) ||
                 validationInlineInternal
                 ? ""
-                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (h("div", { key: 'ce76d39f556c5cf5ab0e97abb93e243cb0153f54', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: '49a4898f4b336ca7e1ced4550a9494c5505a78a6', variant: "caption", class: "char-count-text" }, h("span", { key: '2b714b46208c477500494f1f43d919f972501f9b', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: '3559afb42041b8bb3080ae5bd015bc76a9af3b2d', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: '9f98def180554d1dc13e05d6cefac85fd91638bb', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))));
+                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (h("div", { key: '13e0c01a4525d51b9515cbc04667c21fa918736d', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: '9038017ea03a0c6b8ea32fd102b012a28af8503f', variant: "caption", class: "char-count-text" }, h("span", { key: '5b13ff51491f886e705726616c439ecb8d8d00bc', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: '8c4e2f4f749838d382fc06d5cec08dec0ba88d43', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: 'd66957769eb0962af90f9933339aeecf961fc690', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))));
     }
     get el() { return this; }
     static get watchers() { return {