@ukic/web-components 3.11.0 → 3.13.0

package/dist/collection/components/ic-select/ic-select_(single).stories.js

@@ -13,6 +13,7 @@ const defaultArgs = {
   readonly: false,
   required: false,
   size: "medium",
+  validationAriaLive: "polite",
   validationStatus: "no status",
   ["validation-text"]: "",
   ["show-clear-button"]: false,
@@ -228,8 +229,8 @@ export const CustomComponents = {
             value: "Lat",
             description: "A milkier coffee than a cappuccino",
             element: {
-              component: \`<ic-status-tag label="Neutral status"></ic-status-tag>\`,
-              ariaLabel: "Neutral status tag",
+              component: \`<ic-status-tag label="Success status" status="success"></ic-status-tag>\`,
+              ariaLabel: "Success status tag",
             },
             icon: \`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><g><path d="M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z" /></g></svg>\`,
           },
@@ -514,6 +515,52 @@ export const Recommended = {
   name: "Recommended",
 };
 
+export const HiddenMenuOptionLabels = {
+  render: () =>
+    html`<ic-select
+        id="hidden-menu-opts-select"
+        label="What is your favourite coffee size?"
+      ></ic-select>
+      <script>
+        var select = document.querySelector("#hidden-menu-opts-select");
+        select.options = [
+          {
+            label: "Small",
+            value: "s",
+            element: {
+              component: \`<ic-chip label="Small" size="small"></ic-chip>\`,
+              ariaLabel: "small chip",
+            },
+            hideLabel: true,
+          },
+          {
+            label: "Medium size",
+            value: "m",
+            element: {
+              component: \`<ic-chip label="Medium"></ic-chip>\`,
+              ariaLabel: "medium chip",
+            },
+            hideLabel: true,
+          },
+          {
+            label: "Large",
+            value: "l",
+            element: {
+              component: \`<ic-chip label="Large" size="large"></ic-chip>\`,
+              ariaLabel: "large chip",
+            },
+            hideLabel: true,
+          },
+          {
+            label: "Extra Large",
+            value: "xl",
+          },
+        ];
+      </script>`,
+
+  name: "Hidden menu option labels",
+};
+
 export const Validation = {
   render: () =>
     html`<ic-select
@@ -574,6 +621,101 @@ export const Validation = {
   name: "Validation",
 };
 
+export const AriaLiveBehaviour = {
+  render: () =>
+    html`<ic-select
+        id="field-1"
+        label="What is your favourite coffee?"
+        helper-text="Error already set on page load and aria-live overridden as 'assertive'"
+        validation-status="error"
+        validation-text="First error message"
+        validation-aria-live="assertive"
+      ></ic-select>
+      <br />
+      <ic-select
+        id="field-2"
+        label="What is your favourite coffee?"
+        helper-text="Error set after page load and aria-live overridden as 'assertive'"
+        validation-aria-live="assertive"
+      ></ic-select>
+      <br />
+      <ic-button id="toggle-btn-1">Toggle errors</ic-button>
+      <script>
+        let showErrors1 = false;
+        const btn1 = document.getElementById("toggle-btn-1");
+        const field1 = document.getElementById("field-1");
+        const field2 = document.getElementById("field-2");
+
+        btn1.addEventListener("click", () => {
+          showErrors1 = !showErrors1;
+
+          field1.setAttribute("validation-status", showErrors1 ? "" : "error");
+          field1.setAttribute(
+            "validation-text",
+            showErrors1 ? "" : "First error message"
+          );
+
+          field2.setAttribute("validation-status", showErrors1 ? "error" : "");
+          field2.setAttribute(
+            "validation-text",
+            showErrors1 ? "Second error message" : ""
+          );
+        });
+      </script>
+      <br />
+      <br />
+      <br />
+      <br />
+      <ic-select
+        id="field-3"
+        label="What is your favourite coffee?"
+        helper-text="Default aria-live behaviour (i.e. 'polite')"
+      ></ic-select>
+      <br />
+      <ic-select
+        id="field-4"
+        label="What is your favourite coffee?"
+        helper-text="Default aria-live behaviour (i.e. 'polite')"
+      ></ic-select>
+      <br />
+      <ic-button id="toggle-btn-2">Toggle errors</ic-button>
+      <script>
+        let showErrors2 = false;
+        const btn2 = document.getElementById("toggle-btn-2");
+        const field3 = document.getElementById("field-3");
+        const field4 = document.getElementById("field-4");
+
+        btn2.addEventListener("click", () => {
+          showErrors2 = !showErrors2;
+
+          field3.setAttribute("validation-status", showErrors2 ? "error" : "");
+          field3.setAttribute(
+            "validation-text",
+            showErrors2 ? "Third error message" : ""
+          );
+
+          field4.setAttribute("validation-status", showErrors2 ? "error" : "");
+          field4.setAttribute(
+            "validation-text",
+            showErrors2 ? "Fourth error message" : ""
+          );
+        });
+
+        document.querySelectorAll("ic-select").forEach((el) => {
+          el.options = [
+            { label: "Cappuccino", value: "Cap" },
+            { label: "Latte", value: "Lat" },
+            { label: "Americano", value: "Ame" },
+          ];
+          el.addEventListener("icChange", function (event) {
+            console.log("icChange: " + event.detail.value);
+          });
+        });
+      </script>`,
+
+  name: "Aria-live behaviour",
+};
+
 export const ScrollBehaviour = {
   render: () =>
     html`<ic-select
@@ -679,6 +821,35 @@ export const EmittingIcOptionSelectOnEnter = {
   name: "Emitting icOptionSelect on enter",
 };
 
+export const CustomPropsOnLiElements = {
+  render: () =>
+    html`<ic-select
+        id="select-custom-li-props"
+        label="What is your favourite coffee?"
+      ></ic-select>
+      <br />
+      <p>
+        <code>lang="it"</code> has been set on each
+        <code>&lt;li&gt;</code> element. This can be tested using a screen
+        reader.
+      </p>
+      <script>
+        var select = document.querySelector("#select-custom-li-props");
+        select.options = [
+          { label: "Cappuccino", value: "Cap", htmlProps: { lang: "it" } },
+          { label: "Latte", value: "Lat", htmlProps: { lang: "it" } },
+          { label: "Americano", value: "Ame", htmlProps: { lang: "it" } },
+        ];
+        select.addEventListener("icChange", function (event) {
+          console.log("icChange: " + event.detail.value);
+        });
+      </script>`,
+
+  name: "Custom props on <li>s",
+};
+
+const inlineRadioSelector = "inline-radio";
+
 export const Playground = {
   render: (args) =>
     html` <ic-select
@@ -695,6 +866,7 @@ export const Playground = {
         required=${args.required}
         show-clear-button=${args["show-clear-button"]}
         size=${args.size}
+        validation-aria-live=${args.validationAriaLive}
         validation-status=${args.validationStatus === "no status"
           ? ""
           : args.validationStatus}
@@ -777,6 +949,14 @@ export const Playground = {
   args: defaultArgs,
 
   argTypes: {
+    validationAriaLive: {
+      options: ["polite", "assertive", "off"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
     validationStatus: {
       defaultValue: "no status",
       options: ["no status", "error", "success", "warning"],
@@ -790,7 +970,7 @@ export const Playground = {
       options: ["small", "medium", "large"],
 
       control: {
-        type: "inline-radio",
+        type: inlineRadioSelector,
       },
     },
 
@@ -804,7 +984,7 @@ export const Playground = {
       options: ["inherit", "light", "dark"],
 
       control: {
-        type: "inline-radio",
+        type: inlineRadioSelector,
       },
     },
   },

package/dist/collection/components/ic-status-tag/ic-status-tag.css

@@ -523,11 +523,8 @@ video {
 }
 
 @media (forced-colors: active) {
-  .tag {
-    border: var(--ic-border-hc);
+  :host {
     -ms-high-contrast-adjust: none;
     forced-color-adjust: none;
-
-    --ic-typography-color: var(--ic-status-tag-text);
   }
 }

package/dist/collection/components/ic-step/ic-step.js

@@ -8,6 +8,20 @@ export class Step {
          * @internal If `true`, and a compact stepper  is being used, the current step will be the only step in view.
          */
         this.current = false;
+        /**
+         * Words within the component that can be replaced to translate the component into a different language
+         */
+        this.icI18n = {
+            next: "Next",
+            step: "Step",
+            steps: "Steps",
+            of: "of",
+            lastStep: "Last step",
+            completed: "Completed",
+            notRequired: "Not required",
+            required: "Required",
+            optional: "Optional",
+        };
         /**
          * @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.
          */
@@ -27,96 +41,95 @@ export class Step {
     }
     render() {
         var _a, _b;
+        const { compactStepStyling, current, heading, icI18n, lastStep, lastStepNum, nextStepHeading, progress, status, stepNum, subheading, theme, type, variant, } = this;
         // ARIA LABEL
         let ariaLabel = "";
-        if (this.type === "completed") {
-            ariaLabel = ". Completed step";
+        if (type === "completed") {
+            ariaLabel = `. ${icI18n.completed}`;
         }
-        else if (this.type === "disabled") {
-            ariaLabel = ". Non-required step";
+        else if (type === "disabled") {
+            ariaLabel = `. ${icI18n.notRequired}`;
         }
-        else if (this.status === "required") {
-            ariaLabel = ". Required step";
+        else if (status === "required") {
+            ariaLabel = `. ${icI18n.required}`;
         }
-        else if (this.status === "optional") {
-            ariaLabel = ". Optional step";
+        else if (status === "optional") {
+            ariaLabel = `. ${icI18n.optional}`;
         }
         // STEP STATUS
         let stepStatus;
-        if (this.status && isPropDefined(this.status)) {
-            stepStatus = this.status[0].toUpperCase() + this.status.slice(1);
+        if (status && isPropDefined(status)) {
+            stepStatus = status[0].toUpperCase() + status.slice(1);
         }
         // STEP TYPE
         let stepType;
-        if (this.type === "disabled" || this.compactStepStyling === "disabled") {
-            stepType = "Not required";
+        if (type === "disabled" || compactStepStyling === "disabled") {
+            stepType = icI18n.notRequired;
         }
-        else if (this.compactStepStyling === "completed") {
-            stepType = "Completed";
+        else if (compactStepStyling === "completed") {
+            stepType = icI18n.completed;
         }
         // STATUS ICON FOR COMPACT STEP
         let statusIcon;
-        if (this.type === "completed" || this.compactStepStyling === "completed") {
-            statusIcon = (h("span", { key: '31e62d15ef4e1b19777678e5d0c8d3c3e1576b9b', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
+        if (type === "completed" || compactStepStyling === "completed") {
+            statusIcon = (h("span", { key: 'c1e124ab66fda2ad2fe60769de15e35e34519951', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
         }
-        else if (this.type === "disabled" ||
-            this.compactStepStyling === "disabled") {
-            statusIcon = (h("span", { key: '6f4911859d103732d5f2133a26dc4e05cd6a3d22', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
+        else if (type === "disabled" || compactStepStyling === "disabled") {
+            statusIcon = (h("span", { key: 'e4a11bda9361099c4a082a17ea365c5f87c72ee9', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
         }
         // COMPACT STEP COMPONENT
-        const compactStep = (h("div", { key: '3abb768b9f5072d26314ea3af8d8a1d15950aef2', class: {
+        const compactStep = (h("div", { key: 'f4ce620bf342de1d168cd8988e110b399d16e8a5', class: {
                 ["step"]: true,
-                ["current"]: !!this.current,
-                [`compact-step-${this.compactStepStyling}`]: !!this.compactStepStyling,
-                ["disabled"]: this.type === "disabled" || this.compactStepStyling === "disabled",
-            } }, h("ic-loading-indicator", { key: '01610eac2cb0eee7b3ee0f22de7d9cd8cf34f140', class: {
+                ["current"]: !!current,
+                [`compact-step-${compactStepStyling}`]: !!compactStepStyling,
+                ["disabled"]: type === "disabled" || compactStepStyling === "disabled",
+            } }, h("ic-loading-indicator", { key: '69fe4783331f0d2c8537e46bb4065ee946e15922', class: {
                 "compact-step-progress-indicator": true,
-                "not-required": this.type === "disabled" ||
-                    this.compactStepStyling === "disabled",
-            }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), h("div", { key: '62012e70159993ed1706bd81d44f349390393c84', class: "heading-area" }, h("ic-typography", { key: 'd7a88dc3a430c3278427c7ca05dfd4bad39e1142', variant: "h4", class: "heading" }, this.heading), h("div", { key: 'd05bb42194a52eb5bc348a254e925b3b6471c1a9', class: "info-line" }, h("ic-typography", { key: '0eb058bb2dd87513830a34885623cfe67c28013b', variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, h("span", { key: '9ce66855d6b9776dbd1fcd8c0d55b3361cd97fa3', class: "visually-hidden" }, " steps")), (this.subheading ||
-            this.type === "completed" ||
-            this.type === "disabled" ||
+                "not-required": type === "disabled" || compactStepStyling === "disabled",
+            }, "aria-hidden": "true", size: "small", "inner-label": stepNum, progress: progress }), h("div", { key: '5e44dab23d530705ce04d6f5e898224031be9eae', class: "heading-area" }, h("ic-typography", { key: '09feb668ddc70f11313c4639b1b2dd3efa86903e', variant: "h4", class: "heading" }, heading), h("div", { key: '5d2e680eec783d9da46298084f379b780a2dfbb5', class: "info-line" }, h("ic-typography", { key: '8578d9363f9b29301cdfe46a360bdbf525ec16e8', variant: "caption", class: "step-num" }, `${stepNum} ${icI18n.of} ${lastStepNum}`, h("span", { key: 'f9bcfd8e7ff1179ed7c48714741fddc401b9de00', class: "visually-hidden" }, ` ${icI18n.steps}`)), (this.subheading ||
+            type === "completed" ||
+            type === "disabled" ||
             (this.variant === "compact" &&
-                !!this.compactStepStyling &&
-                this.compactStepStyling !== "active") ||
-            !!this.status) && (h("div", { key: 'a9fad93fb213aea850b57a508b2cfd18e66a4601', class: "step-status" }, statusIcon !== undefined && statusIcon, (this.subheading || stepType) && (h("ic-typography", { key: 'c7efc458915ba355ab46bb7764685cb72a725742', variant: "caption" }, this.subheading !== null && isPropDefined(this.subheading)
-            ? this.subheading
-            : this.type === "disabled" ||
-                (this.variant === "compact" &&
-                    this.compactStepStyling === "disabled") ||
-                this.type === "completed" ||
-                (this.variant === "compact" &&
-                    this.compactStepStyling === "completed")
+                !!compactStepStyling &&
+                compactStepStyling !== "active") ||
+            !!status) && (h("div", { key: 'ee4276dfd163853a6b82563e89e123b75c224613', class: "step-status" }, statusIcon !== undefined && statusIcon, (subheading || stepType) && (h("ic-typography", { key: '3a165f76bb8cf653705a0e86e931616fc75030b1', variant: "caption" }, subheading !== null && isPropDefined(subheading)
+            ? subheading
+            : type === "disabled" ||
+                (variant === "compact" &&
+                    compactStepStyling === "disabled") ||
+                type === "completed" ||
+                (variant === "compact" &&
+                    compactStepStyling === "completed")
                 ? stepType
-                : this.status && stepStatus))))), this.lastStep ? (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Last step")) : (isPropDefined(this.nextStepHeading) && (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, "Next", h("span", { class: "visually-hidden" }, " step is"), ":", " ", this.nextStepHeading))))));
+                : status && stepStatus))))), lastStep ? (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, icI18n.lastStep)) : (isPropDefined(nextStepHeading) && (h("ic-typography", { variant: "subtitle-small", class: "next-step" }, icI18n.next, h("span", { class: "visually-hidden" }, " ", icI18n.step), ":", " ", this.nextStepHeading))))));
         // ICON FOR DEFAULT STEP
         let icon;
-        if (this.type !== "completed") {
-            icon = (h("ic-typography", { key: 'f2730d318e4fd63b63fdacafcb71a58cebbe2f59', variant: "subtitle-small" }, h("span", { key: '03a7ddac3f3ded528cf1a46097a81a0e2568e3c6', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+        if (type !== "completed") {
+            icon = (h("ic-typography", { key: '4ada11af3f862b66af7ca387ca5e2ed0c7bd1456', variant: "subtitle-small" }, h("span", { key: 'f7acc54618d69f93bdfc8d9c9322e23d58749a51', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
         }
         else {
-            icon = (h("div", { key: '58fb2c4ee87edb92d49134763cbadd79f0c9a54e', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: '71753c297cf27e8bcdbcc33e1677d8e890ebc14b', class: "check-icon", innerHTML: checkIcon })));
+            icon = (h("div", { key: '5efba193e768116f7bf92a0369d61fdd7e8b04ff', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: '390a1f3f6daffa5e2e82293b81680a3eb9f1bb35', class: "check-icon", innerHTML: checkIcon })));
         }
         // STEP CONNECT FOR DEFAULT STEP
-        const partialBar = this.type === "current" && (h("div", { key: 'a6bd5f3e2a433845a1e55fbd5b714ea8c87f44d5', class: "step-connect-inner" }));
-        const finalStep = !this.lastStep && (h("div", { key: '28a9ba2a0fc5d7219e5bb5fa70696a62aa511b6d', class: {
+        const partialBar = type === "current" && (h("div", { key: 'd4255228e9626afbce26b5b65bb3b1329795cc84', class: "step-connect-inner" }));
+        const finalStep = !lastStep && (h("div", { key: '72093cf835767969a9f56a45e7952e42d2b21d46', class: {
                 ["step-connect"]: true,
                 ["aligned-full-width"]: !!(((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains("ic-stepper-default")) &&
                     !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
             } }, partialBar));
         // DEFAULT STEP COMPONENT
-        const defaultStep = (h("div", { key: 'fdef2ca76d51403edda89814d7c3bd359fa371ab', class: {
+        const defaultStep = (h("div", { key: '7ee74bb84e4678e20ee4eb5daa26f9252d795f83', class: {
                 ["step"]: true,
-                [`${this.type}`]: true,
-            } }, h("div", { key: '10a8908e0b3022b68255d0062d49cf9db75d3277', class: "step-top" }, h("div", { key: '70d65414701e912b38d6b28bc49527f83c389849', class: "step-icon" }, icon), finalStep), (this.heading || this.subheading || this.status) && (h("div", { key: 'b0f5ba114b2076b647b48e886620b72b60c68e07', class: "heading-area" }, this.heading && (h("ic-typography", { key: '7be124b0b48932cd6f66264376a49b6387c5f6cc', variant: "subtitle-large", class: "heading" }, this.heading)), this.heading && (this.subheading || this.status) && (h("ic-typography", { key: 'cc27e08a365f008d259cc67862fb7c92728dd3bc', variant: "caption", class: "subheading" }, this.subheading !== null && isPropDefined(this.subheading)
-            ? this.subheading
+                [`${type}`]: true,
+            } }, h("div", { key: 'c3e678c9eab7688174b87c55bad404407ffedd72', class: "step-top" }, h("div", { key: 'bad28cb205e9450b226073b8803e779d62616207', class: "step-icon" }, icon), finalStep), (heading || subheading || status) && (h("div", { key: '946ab99559fdaa3106244e6758b7573ea454d5b8', class: "heading-area" }, heading && (h("ic-typography", { key: 'c2a9e10b0e30b0de194b321f1683c6d36783020d', variant: "subtitle-large", class: "heading" }, heading)), heading && (subheading || status) && (h("ic-typography", { key: 'bfa452d159a531bb0706540af3c91407f0c9f03f', variant: "caption", class: "subheading" }, subheading !== null && isPropDefined(subheading)
+            ? subheading
             : stepStatus))))));
-        return (h(Host, { key: '0fa86f597f22a806165b7583eb39d4bbdccc4d40', role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.type === "current") && "step", class: {
+        return (h(Host, { key: 'e1d36358b31ec0f91ca0c9874a661ce10bd38d2c', role: "listitem", "aria-label": `${icI18n.step} ${stepNum}${ariaLabel}`, "aria-current": (current || type === "current") && "step", class: {
                 ["aligned-full-width"]: !!(((_b = this.el.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains("ic-stepper-default")) &&
                     !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
-                [`ic-step-${this.variant}`]: true,
-                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, this.variant === "compact" ? compactStep : defaultStep));
+                [`ic-step-${variant}`]: true,
+                [`ic-theme-${theme}`]: this.theme !== "inherit",
+            } }, variant === "compact" ? compactStep : defaultStep));
     }
     static get is() { return "ic-step"; }
     static get encapsulation() { return "shadow"; }
@@ -183,6 +196,30 @@ export class Step {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "icI18n": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcStepI18n",
+                    "resolved": "{ next: string; step: string; steps: string; of: string; lastStep: string; completed: string; notRequired: string; required: string; optional: string; }",
+                    "references": {
+                        "IcStepI18n": {
+                            "location": "import",
+                            "path": "./ic-step.types",
+                            "id": "src/components/ic-step/ic-step.types.ts::IcStepI18n"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Words within the component that can be replaced to translate the component into a different language"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{\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  }"
+            },
             "lastStep": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/ic-step/ic-step.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-step.js","sourceRoot":"","sources":["../../../src/components/ic-step/ic-step.tsx"],"names":[],"mappings":"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","sourcesContent":["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 { IcStepVariants, IcStepStatuses, IcStepTypes } 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   * @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    // ARIA LABEL\n    let ariaLabel = \"\";\n\n    if (this.type === \"completed\") {\n      ariaLabel = \". Completed step\";\n    } else if (this.type === \"disabled\") {\n      ariaLabel = \". Non-required step\";\n    } else if (this.status === \"required\") {\n      ariaLabel = \". Required step\";\n    } else if (this.status === \"optional\") {\n      ariaLabel = \". Optional step\";\n    }\n\n    // STEP STATUS\n    let stepStatus;\n    if (this.status && isPropDefined(this.status)) {\n      stepStatus = this.status[0].toUpperCase() + this.status.slice(1);\n    }\n\n    // STEP TYPE\n    let stepType;\n    if (this.type === \"disabled\" || this.compactStepStyling === \"disabled\") {\n      stepType = \"Not required\";\n    } else if (this.compactStepStyling === \"completed\") {\n      stepType = \"Completed\";\n    }\n\n    // STATUS ICON FOR COMPACT STEP\n    let statusIcon;\n    if (this.type === \"completed\" || this.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 (\n      this.type === \"disabled\" ||\n      this.compactStepStyling === \"disabled\"\n    ) {\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\"]: !!this.current,\n          [`compact-step-${this.compactStepStyling}`]:\n            !!this.compactStepStyling,\n          [\"disabled\"]:\n            this.type === \"disabled\" || this.compactStepStyling === \"disabled\",\n        }}\n      >\n        <ic-loading-indicator\n          class={{\n            \"compact-step-progress-indicator\": true,\n            \"not-required\":\n              this.type === \"disabled\" ||\n              this.compactStepStyling === \"disabled\",\n          }}\n          aria-hidden=\"true\"\n          size=\"small\"\n          inner-label={this.stepNum}\n          progress={this.progress}\n        ></ic-loading-indicator>\n        <div class=\"heading-area\">\n          <ic-typography variant=\"h4\" class=\"heading\">\n            {this.heading}\n          </ic-typography>\n          <div class=\"info-line\">\n            <ic-typography variant=\"caption\" class=\"step-num\">\n              {`${this.stepNum} of ${this.lastStepNum}`}\n              <span class=\"visually-hidden\"> steps</span>\n            </ic-typography>\n            {(this.subheading ||\n              this.type === \"completed\" ||\n              this.type === \"disabled\" ||\n              (this.variant === \"compact\" &&\n                !!this.compactStepStyling &&\n                this.compactStepStyling !== \"active\") ||\n              !!this.status) && (\n              <div class=\"step-status\">\n                {statusIcon !== undefined && statusIcon}\n                {(this.subheading || stepType) && (\n                  <ic-typography variant=\"caption\">\n                    {this.subheading !== null && isPropDefined(this.subheading)\n                      ? this.subheading\n                      : this.type === \"disabled\" ||\n                        (this.variant === \"compact\" &&\n                          this.compactStepStyling === \"disabled\") ||\n                        this.type === \"completed\" ||\n                        (this.variant === \"compact\" &&\n                          this.compactStepStyling === \"completed\")\n                      ? stepType\n                      : this.status && stepStatus}\n                  </ic-typography>\n                )}\n              </div>\n            )}\n          </div>\n          {this.lastStep ? (\n            <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n              Last step\n            </ic-typography>\n          ) : (\n            isPropDefined(this.nextStepHeading) && (\n              <ic-typography variant=\"subtitle-small\" class=\"next-step\">\n                Next<span class=\"visually-hidden\"> step is</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 (this.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 = this.type === \"current\" && (\n      <div class=\"step-connect-inner\"></div>\n    );\n\n    const finalStep = !this.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          [`${this.type}`]: true,\n        }}\n      >\n        <div class=\"step-top\">\n          <div class=\"step-icon\">{icon}</div>\n          {finalStep}\n        </div>\n        {(this.heading || this.subheading || this.status) && (\n          <div class=\"heading-area\">\n            {this.heading && (\n              <ic-typography variant=\"subtitle-large\" class=\"heading\">\n                {this.heading}\n              </ic-typography>\n            )}\n            {this.heading && (this.subheading || this.status) && (\n              <ic-typography variant=\"caption\" class=\"subheading\">\n                {this.subheading !== null && isPropDefined(this.subheading)\n                  ? this.subheading\n                  : stepStatus}\n              </ic-typography>\n            )}\n          </div>\n        )}\n      </div>\n    );\n\n    return (\n      <Host\n        role=\"listitem\"\n        aria-label={`Step ${this.stepNum}${ariaLabel}`}\n        aria-current={(this.current || this.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-${this.variant}`]: true,\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n        }}\n      >\n        {this.variant === \"compact\" ? compactStep : defaultStep}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-step.js","sourceRoot":"","sources":["../../../src/components/ic-step/ic-step.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/ic-step/ic-step.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-step.types.js","sourceRoot":"","sources":["../../../src/components/ic-step/ic-step.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcStepVariants = \"default\" | \"compact\";\n\nexport type IcStepStatuses = \"optional\" | \"required\";\n\nexport type IcStepTypes = \"active\" | \"current\" | \"completed\" | \"disabled\";\n"]}
+{"version":3,"file":"ic-step.types.js","sourceRoot":"","sources":["../../../src/components/ic-step/ic-step.types.ts"],"names":[],"mappings":"","sourcesContent":["export type IcStepVariants = \"default\" | \"compact\";\n\nexport type IcStepStatuses = \"optional\" | \"required\";\n\nexport type IcStepTypes = \"active\" | \"current\" | \"completed\" | \"disabled\";\n\nexport type IcStepI18n = {\n  next: string;\n  step: string;\n  steps: string;\n  of: string;\n  lastStep: string;\n  completed: string;\n  notRequired: string;\n  required: string;\n  optional: string;\n};\n"]}

package/dist/collection/components/ic-stepper/ic-stepper.js

@@ -25,6 +25,20 @@ export class Stepper {
          * 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.
          */
         this.hideStepInfo = false;
+        /**
+         * Provide alternative values for text in all child steps. For the purpose of translating the application into other languages.
+         */
+        this.icI18n = {
+            next: "Next",
+            step: "Step",
+            steps: "Steps",
+            of: "of",
+            lastStep: "Last step",
+            completed: "Completed",
+            notRequired: "Not required",
+            required: "Required",
+            optional: "Optional",
+        };
         /**
          * 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.
          */
@@ -70,6 +84,10 @@ export class Stepper {
         this.initialiseStepStates = () => {
             this.steps.forEach((step, index) => {
                 var _a, _b, _c;
+                // Set language
+                if (this.icI18n !== undefined) {
+                    step.icI18n = this.icI18n;
+                }
                 // Set variant
                 step.variant = this.variant;
                 // Assign stepNum to each step
@@ -241,11 +259,11 @@ export class Stepper {
         checkResizeObserver(this.runResizeObserver);
     }
     render() {
-        return (h(Host, { key: 'b7a0dfaa4d7842f9df2f85e1dbc2e693d9c68679', class: {
+        return (h(Host, { key: '9d9ca9d145f10826c095669a86a99b532bee274d', 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: '051a97451fc7e8074978f332aa4aa1a6bcfcd17f', class: "step-item-list" }, h("slot", { key: 'bbecef8f861b321f530606b70229a15a9d20549b' }))));
+            } }, h("ul", { key: '7cc19512929ba09b0e13b50f400c5b84967678d3', class: "step-item-list" }, h("slot", { key: '35312de95aa58d5555e19911db1d030d31b74cb4' }))));
     }
     static get is() { return "ic-stepper"; }
     static get encapsulation() { return "shadow"; }
@@ -327,6 +345,30 @@ export class Stepper {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "icI18n": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcStepI18n",
+                    "resolved": "undefined | { next: string; step: string; steps: string; of: string; lastStep: string; completed: string; notRequired: string; required: string; optional: string; }",
+                    "references": {
+                        "IcStepI18n": {
+                            "location": "import",
+                            "path": "../ic-step/ic-step.types",
+                            "id": "src/components/ic-step/ic-step.types.ts::IcStepI18n"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Provide alternative values for text in all child steps. For the purpose of translating the application into other languages."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{\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  }"
+            },
             "theme": {
                 "type": "string",
                 "mutable": false,