@designsystem-se/af 33.1.0 → 34.0.0

package/dist/esm/digi-progress-indicator.entry.js

@@ -0,0 +1,133 @@
+import { r as registerInstance, h, g as getElement } from './index-8e318bb2.js';
+import { _ as _t } from './text-ee5498fa.js';
+import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
+import { P as ProgressIndicatorRole, a as ProgressIndicatorVariation } from './progress-indicator-variation.enum-b12ba50a.js';
+
+const progressIndicatorCss = ".digi--util--fs--xs.sc-digi-progress-indicator{font-size:var(--digi--global--typography--font-size--small) !important}.digi--util--fs--s.sc-digi-progress-indicator{font-size:calc(var(--digi--global--typography--font-size--small) + 1px) !important}.digi--util--fs--m.sc-digi-progress-indicator{font-size:var(--digi--global--typography--font-size--base) !important}.digi--util--fs--l.sc-digi-progress-indicator{font-size:var(--digi--global--typography--font-size--large) !important}.digi--util--fw--sb.sc-digi-progress-indicator{font-weight:var(--digi--global--typography--font-weight--semibold) !important}.digi--util--pt--1.sc-digi-progress-indicator{padding-top:var(--digi--global--spacing--smallest-2) !important}.digi--util--pt--10.sc-digi-progress-indicator{padding-top:var(--digi--global--spacing--smallest) !important}.digi--util--pt--20.sc-digi-progress-indicator{padding-top:var(--digi--global--spacing--base) !important}.digi--util--pt--30.sc-digi-progress-indicator{padding-top:var(--digi--global--spacing--largest-2) !important}.digi--util--pt--40.sc-digi-progress-indicator{padding-top:var(--digi--global--spacing--largest-4) !important}.digi--util--pt--50.sc-digi-progress-indicator{padding-top:2.5rem !important}.digi--util--pt--60.sc-digi-progress-indicator{padding-top:var(--digi--global--spacing--largest-5) !important}.digi--util--pt--70.sc-digi-progress-indicator{padding-top:var(--digi--global--spacing--largest-6) !important}.digi--util--pt--80.sc-digi-progress-indicator{padding-top:4.5rem !important}.digi--util--pt--90.sc-digi-progress-indicator{padding-top:5rem !important}.digi--util--pb--1.sc-digi-progress-indicator{padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--pb--10.sc-digi-progress-indicator{padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--pb--20.sc-digi-progress-indicator{padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--pb--30.sc-digi-progress-indicator{padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--pb--40.sc-digi-progress-indicator{padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--pb--50.sc-digi-progress-indicator{padding-bottom:2.5rem !important}.digi--util--pb--60.sc-digi-progress-indicator{padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--pb--70.sc-digi-progress-indicator{padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--pb--80.sc-digi-progress-indicator{padding-bottom:4.5rem !important}.digi--util--pb--90.sc-digi-progress-indicator{padding-bottom:5rem !important}.digi--util--p--1.sc-digi-progress-indicator{padding:var(--digi--global--spacing--smallest-2) !important}.digi--util--p--10.sc-digi-progress-indicator{padding:var(--digi--global--spacing--smallest) !important}.digi--util--p--20.sc-digi-progress-indicator{padding:var(--digi--global--spacing--base) !important}.digi--util--p--30.sc-digi-progress-indicator{padding:var(--digi--global--spacing--largest-2) !important}.digi--util--p--40.sc-digi-progress-indicator{padding:var(--digi--global--spacing--largest-4) !important}.digi--util--p--50.sc-digi-progress-indicator{padding:2.5rem !important}.digi--util--p--60.sc-digi-progress-indicator{padding:var(--digi--global--spacing--largest-5) !important}.digi--util--p--70.sc-digi-progress-indicator{padding:var(--digi--global--spacing--largest-6) !important}.digi--util--p--80.sc-digi-progress-indicator{padding:4.5rem !important}.digi--util--p--90.sc-digi-progress-indicator{padding:5rem !important}.digi--util--ptb--1.sc-digi-progress-indicator{padding-top:var(--digi--global--spacing--smallest-2) !important;padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--ptb--10.sc-digi-progress-indicator{padding-top:var(--digi--global--spacing--smallest) !important;padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--ptb--20.sc-digi-progress-indicator{padding-top:var(--digi--global--spacing--base) !important;padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--ptb--30.sc-digi-progress-indicator{padding-top:var(--digi--global--spacing--largest-2) !important;padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--ptb--40.sc-digi-progress-indicator{padding-top:var(--digi--global--spacing--largest-4) !important;padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--ptb--50.sc-digi-progress-indicator{padding-top:2.5rem !important;padding-bottom:2.5rem !important}.digi--util--ptb--60.sc-digi-progress-indicator{padding-top:var(--digi--global--spacing--largest-5) !important;padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--ptb--70.sc-digi-progress-indicator{padding-top:var(--digi--global--spacing--largest-6) !important;padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--ptb--80.sc-digi-progress-indicator{padding-top:4.5rem !important;padding-bottom:4.5rem !important}.digi--util--ptb--90.sc-digi-progress-indicator{padding-top:5rem !important;padding-bottom:5rem !important}.digi--util--plr--1.sc-digi-progress-indicator{padding-left:var(--digi--global--spacing--smallest-2) !important;padding-right:var(--digi--global--spacing--smallest-2) !important}.digi--util--plr--10.sc-digi-progress-indicator{padding-left:var(--digi--global--spacing--smallest) !important;padding-right:var(--digi--global--spacing--smallest) !important}.digi--util--plr--20.sc-digi-progress-indicator{padding-left:var(--digi--global--spacing--base) !important;padding-right:var(--digi--global--spacing--base) !important}.digi--util--plr--30.sc-digi-progress-indicator{padding-left:var(--digi--global--spacing--largest-2) !important;padding-right:var(--digi--global--spacing--largest-2) !important}.digi--util--plr--40.sc-digi-progress-indicator{padding-left:var(--digi--global--spacing--largest-4) !important;padding-right:var(--digi--global--spacing--largest-4) !important}.digi--util--plr--50.sc-digi-progress-indicator{padding-left:2.5rem !important;padding-right:2.5rem !important}.digi--util--plr--60.sc-digi-progress-indicator{padding-left:var(--digi--global--spacing--largest-5) !important;padding-right:var(--digi--global--spacing--largest-5) !important}.digi--util--plr--70.sc-digi-progress-indicator{padding-left:var(--digi--global--spacing--largest-6) !important;padding-right:var(--digi--global--spacing--largest-6) !important}.digi--util--plr--80.sc-digi-progress-indicator{padding-left:4.5rem !important;padding-right:4.5rem !important}.digi--util--plr--90.sc-digi-progress-indicator{padding-left:5rem !important;padding-right:5rem !important}.digi--util--sr-only.sc-digi-progress-indicator{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.digi--util--hidden.sc-digi-progress-indicator{display:none}.sc-digi-progress-indicator-h{--digi--progress-indicator--margin:0 0 var(--digi--margin--medium);--digi--progress-indicator--label--font-size:var(--digi--typography--label--font-size--desktop);--digi--progress-indicator--label--margin:var(--digi--gutter--medium) 0;--digi--progress-indicator--border-color:var(--digi--color--border--neutral-5);--digi--progress-indicator--border-color--active:var(--digi--global--color--function--success--base);--digi--progress-indicator--border-color--secondary--active:var(--digi--color--border--secondary);--digi--progress-indicator--border-width:var(--digi--border-width--primary);--digi--progress-indicator--gap:var(--digi--padding--largest);--digi--progress-indicator--gap--medium:var(--digi--padding--largest);--digi--progress-indicator--gap--large:var(--digi--padding--largest-3);--digi--progress-indicator--gap--x-large:var(--digi--padding--largest-3);--digi--progress-indicator--heading--font-size:var(--digi--typography--heading-2--font-size--desktop);--digi--progress-indicator--heading--mobile--font-size:var(--digi--typography--heading-2--font-size--mobile);--digi--progress-indicator--heading--font-weight:var(--digi--typography--heading-2--font-weight--desktop);--digi--progress-indicator--step--background:transparent;--digi--progress-indicator--step--background--active:var(--digi--global--color--function--success--base);--digi--progress-indicator--step--background--secondary--active:var(--digi--color--background--inverted-1);--digi--progress-indicator--step--size:var(--digi--global--spacing--base);--digi--progress-indicator--step--size--large:1.625rem;--digi--progress-indicator--step--size--active:1.625rem;--digi--progress-indicator--step--size--active--large:1.625rem;--digi--progress-indicator--step--line--width:var(--digi--border-width--secondary);--digi--progress-indicator--step--line--color:var(--digi--color--border--neutral-5);--digi--progress-indicator--step--line--color--current:var(--digi--color--border--neutral-5);--digi--progress-indicator--step--line--color--active:var(--digi--global--color--function--success--base);--digi--progress-indicator--step--line--color--secondary--active:var(--digi--color--border--secondary);--digi--progress-indicator--step--line--style:dashed;--digi--progress-indicator--icon--width:1rem;--digi--progress-indicator--icon--height:1rem;--digi--progress-indicator--icon--color:var(--digi--color--text--inverted);--digi--progress-indicator--icon-status--width:1.75rem;--digi--progress-indicator--icon-status--height:1.75rem;--digi--progress-indicator--icon--warning--color:var(--digi--color--background--warning-1);--digi--progress-indicator--icon--error--color:var(--digi--color--background--danger-1);--digi--progress-indicator--icon--error--background-color:var(--digi--color--background--danger-2)}.sc-digi-progress-indicator-h .digi-progress-indicator.sc-digi-progress-indicator{font-size:var(--digi--progress-indicator--label--font-size);margin:var(--digi--progress-indicator--margin);box-sizing:border-box}.sc-digi-progress-indicator-h .digi-progress-indicator.sc-digi-progress-indicator:not(.digi-progress-indicator--linear){--digi--progress-indicator--step--line--color--active:var(\n    --digi--progress-indicator--step--line--color\n  )}.sc-digi-progress-indicator-h .digi-progress-indicator__content.sc-digi-progress-indicator{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-progress-indicator-h .digi-progress-indicator__heading.sc-digi-progress-indicator{font-size:var(--digi--typography--heading-2--font-size--desktop);font-weight:var(--digi--progress-indicator--heading--font-weight);margin:0;margin-bottom:0.5rem}@media (max-width: 36rem){.sc-digi-progress-indicator-h .digi-progress-indicator__heading.sc-digi-progress-indicator{font-size:var(--digi--typography--heading-2--font-size--mobile);font-weight:var(--digi--typography--heading-2--font-weight--mobile)}}.sc-digi-progress-indicator-h .digi-progress-indicator__next.sc-digi-progress-indicator{font-size:var(--digi--typography--body--font-size--desktop);font-style:italic;color:var(--digi--color--text--neutral);margin:0}.sc-digi-progress-indicator-h .digi-progress-indicator__icon.sc-digi-progress-indicator{--digi--icon--height:var(--digi--progress-indicator--icon--width);--digi--icon--width:var(--digi--progress-indicator--icon--height);--digi--icon--color:var(--digi--progress-indicator--icon--color)}.sc-digi-progress-indicator-h .digi-progress-indicator__icon--warning.sc-digi-progress-indicator{--digi--icon--height:var(\n    --digi--progress-indicator--icon-status--height\n  );--digi--icon--width:var(\n    --digi--progress-indicator--icon-status--width\n  );margin-top:4px}.sc-digi-progress-indicator-h .digi-progress-indicator__icon--error.sc-digi-progress-indicator{margin-top:4px;--digi--icon--height:var(\n    --digi--progress-indicator--icon-status--height\n  );--digi--icon--width:var(\n    --digi--progress-indicator--icon-status--width\n  );--digi--icon--color:var(\n    --digi--progress-indicator--icon--error--color\n  )}.sc-digi-progress-indicator-h .digi-progress-indicator__label.sc-digi-progress-indicator{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--progress-indicator--label--font-size);line-height:var(--digi--typography--body--line-height--desktop);color:var(--digi--color--text--primary);margin:var(--digi--progress-indicator--label--margin)}.sc-digi-progress-indicator-h .digi-progress-indicator__label--steps.sc-digi-progress-indicator{font-weight:600}.sc-digi-progress-indicator-h .digi-progress-indicator__validation-label.sc-digi-progress-indicator{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--progress-indicator--label--font-size);line-height:var(--digi--typography--body--line-height--desktop);color:var(--digi--color--text--primary);padding:var(--digi--gutter--medium) var(--digi--gutter--medium);display:flex;align-items:center}.sc-digi-progress-indicator-h .digi-progress-indicator__validation-label.sc-digi-progress-indicator span.sc-digi-progress-indicator{display:inline-block;margin-left:8px}.sc-digi-progress-indicator-h .digi-progress-indicator__validation-label--warning.sc-digi-progress-indicator{background-color:var(--digi--color--background--warning-2)}.sc-digi-progress-indicator-h .digi-progress-indicator__validation-label--error.sc-digi-progress-indicator{background-color:var(--digi--color--background--danger-2)}.sc-digi-progress-indicator-h .digi-progress-indicator__list.sc-digi-progress-indicator{position:relative;list-style:none;padding:0;margin:0;margin-top:24px;margin-bottom:16px;display:grid;grid-template-columns:repeat(auto-fit, minmax(calc(var(--digi--progress-indicator--step--size) + var(--digi--progress-indicator--gap)), 1fr));--digi--progress-indicator--step--size:var(\n    --digi--progress-indicator--step--size--large\n  );--digi--progress-indicator--step--size--active:var(\n    --digi--progress-indicator--step--size--active--large\n  );--digi--progress-indicator--gap:var(\n    --digi--progress-indicator--gap--x-large\n  )}@media (max-width: 36rem){.sc-digi-progress-indicator-h .digi-progress-indicator__list.sc-digi-progress-indicator{grid-template-columns:repeat(auto-fit, minmax(0.45rem, 1fr))}}.sc-digi-progress-indicator-h .digi-progress-indicator__step.sc-digi-progress-indicator{position:relative;height:var(--digi--progress-indicator--step--size--active);z-index:2}.sc-digi-progress-indicator-h .digi-progress-indicator__step.sc-digi-progress-indicator:last-child{width:var(--digi--progress-indicator--step--size--active)}.sc-digi-progress-indicator-h .digi-progress-indicator__step.sc-digi-progress-indicator:last-child::before{display:none}.sc-digi-progress-indicator-h .digi-progress-indicator__step.sc-digi-progress-indicator::before{content:\"\";position:absolute;top:50%;transform:translateY(-50%);display:inline-block;width:calc(100% - 34px);left:30px;border-top:var(--digi--progress-indicator--step--line--style) var(--digi--progress-indicator--step--line--width) var(--digi--progress-indicator--step--line--color)}@media (max-width: 36rem){.sc-digi-progress-indicator-h .digi-progress-indicator__step.sc-digi-progress-indicator::before{width:calc(100% - 1.1rem);left:1.1rem}}.sc-digi-progress-indicator-h .digi-progress-indicator__step--active.sc-digi-progress-indicator{--digi--progress-indicator--border-color:var(\n    --digi--progress-indicator--border-color--active\n  );--digi--progress-indicator--step--background:var(\n    --digi--progress-indicator--step--background--active\n  );--digi--progress-indicator--step--size:var(\n    --digi--progress-indicator--step--size--active\n  );--digi--progress-indicator--step--line--color:var(\n    --digi--progress-indicator--step--line--color--active\n  );--digi--progress-indicator--step--line--style:solid}.sc-digi-progress-indicator-h .digi-progress-indicator__step--active.sc-digi-progress-indicator .digi-progress-indicator__step-indicator.sc-digi-progress-indicator{margin-left:calc((var(--digi--progress-indicator--step--size--large) - var(--digi--progress-indicator--step--size--active--large)) / 2)}.sc-digi-progress-indicator-h .digi-progress-indicator__step--current.sc-digi-progress-indicator{--digi--progress-indicator--step--line--color:var(\n    --digi--progress-indicator--step--line--color--current\n  );--digi--progress-indicator--step--line--style:dashed}.sc-digi-progress-indicator-h .digi-progress-indicator__step--current.sc-digi-progress-indicator span.sc-digi-progress-indicator{box-shadow:inset 0px 0px 0px 2px var(--digi--color--background--primary)}.sc-digi-progress-indicator-h .digi-progress-indicator__step--warning.sc-digi-progress-indicator,.sc-digi-progress-indicator-h .digi-progress-indicator__step--error.sc-digi-progress-indicator{--digi--progress-indicator--step--background:transparent}.sc-digi-progress-indicator-h .digi-progress-indicator__step--warning.sc-digi-progress-indicator .digi-progress-indicator__step-indicator.sc-digi-progress-indicator,.sc-digi-progress-indicator-h .digi-progress-indicator__step--error.sc-digi-progress-indicator .digi-progress-indicator__step-indicator.sc-digi-progress-indicator{border:0;box-shadow:inset 0px 0px 0px 2px transparent}.sc-digi-progress-indicator-h .digi-progress-indicator__step-indicator.sc-digi-progress-indicator{width:var(--digi--progress-indicator--step--size);height:var(--digi--progress-indicator--step--size);border:var(--digi--progress-indicator--step--line--style) var(--digi--progress-indicator--step--line--width) var(--digi--progress-indicator--border-color);background:var(--digi--progress-indicator--step--background);box-sizing:border-box;position:absolute;display:inline-flex;align-items:center;justify-content:center;top:50%;transform:translateY(-50%);border-radius:50%}@media (max-width: 36rem){.sc-digi-progress-indicator-h .digi-progress-indicator__step-indicator.sc-digi-progress-indicator{width:1.1rem;height:1.1rem}}.sc-digi-progress-indicator-h .digi-progress-indicator__step-number.sc-digi-progress-indicator{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-progress-indicator-h .digi-progress-indicator__circle-wrapper.sc-digi-progress-indicator{display:flex;align-items:center}.sc-digi-progress-indicator-h .digi-progress-indicator__circle.sc-digi-progress-indicator{position:relative;display:inline-block}.sc-digi-progress-indicator-h .digi-progress-indicator__circle.sc-digi-progress-indicator svg.sc-digi-progress-indicator{transform:rotate(-90deg)}.sc-digi-progress-indicator-h .digi-progress-indicator__circle-label.sc-digi-progress-indicator{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--tag--font-size--desktop);line-height:var(--digi--typography--body--line-height--desktop);color:var(--digi--color--text--primary);font-weight:600;margin:0}.sc-digi-progress-indicator-h .digi-progress-indicator__circle-step-unfinished.sc-digi-progress-indicator{stroke:var(--digi--progress-indicator--border-color)}.sc-digi-progress-indicator-h .digi-progress-indicator__circle-step-completed.sc-digi-progress-indicator{stroke:var(--digi--progress-indicator--step--background--active)}.sc-digi-progress-indicator-h .digi-progress-indicator__circle-step-warning.sc-digi-progress-indicator{stroke:var(--digi--progress-indicator--icon--warning--color)}.sc-digi-progress-indicator-h .digi-progress-indicator__circle-step-error.sc-digi-progress-indicator{stroke:var(--digi--progress-indicator--icon--error--color)}";
+const DigiProgressIndicatorStyle0 = progressIndicatorCss;
+
+const ProgressIndicator = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.completedSteps = undefined;
+        this.totalSteps = [];
+        this.listItems = undefined;
+        this.hasSlottedItems = undefined;
+        this.radius = 42;
+        this.stroke = 6;
+        this.afCompletedSteps = undefined;
+        this.afWarningStep = undefined;
+        this.afErrorStep = undefined;
+        this.afTotalSteps = undefined;
+        this.afStepsSeparator = _t.of;
+        this.afStepText = _t.step;
+        this.afStepNextText = _t.progress.questions_next;
+        this.afStepHeading = undefined;
+        this.afStepNextLabel = undefined;
+        this.afValidationLabel = undefined;
+        this.afRole = ProgressIndicatorRole.STATUS;
+        this.afVariation = ProgressIndicatorVariation.PRIMARY;
+        this.afId = randomIdGenerator('digi-progress-indicator');
+    }
+    componentWillLoad() {
+        this.changeTotalStepsHandler(this.afTotalSteps);
+        this.getItems();
+    }
+    componentDidLoad() {
+        this.getItems();
+    }
+    changeTotalStepsHandler(value) {
+        const arr = [];
+        let n = 0;
+        while (n < value) {
+            n++;
+            arr.push(n);
+        }
+        this.totalSteps = arr;
+    }
+    changeCompletedStepsHandler(value) {
+        this.completedSteps = value;
+    }
+    getItems(update) {
+        let items;
+        if (update) {
+            items = this._observer.children;
+        }
+        else {
+            items = this.hostElement.querySelectorAll('.digi-progress-indicator__slot li');
+        }
+        if (items.length > 0) {
+            this.hasSlottedItems = true;
+            this.listItems = [...items]
+                .filter((element) => element.tagName.toLowerCase() === 'li')
+                .map((element) => {
+                const el = element;
+                const checked = el.matches('.completed');
+                return {
+                    text: element.textContent,
+                    checked: checked
+                };
+            });
+        }
+    }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva rubrik-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual heading element.
+     */
+    focusOnHeading() {
+        this.headingElement.focus();
+    }
+    renderHeading() {
+        return (h("h2", { class: "digi-progress-indicator__heading", tabIndex: -1, ref: (el) => (this.headingElement = el) }, this.afStepHeading));
+    }
+    get cssModifiers() {
+        return {
+            'digi-progress-indicator': true,
+            'digi-progress-indicator--primary': this.afVariation === ProgressIndicatorVariation.PRIMARY,
+            'digi-progress-indicator--secondary': this.afVariation === ProgressIndicatorVariation.SECONDARY,
+            'digi-progress-indicator--linear': !this.hasSlottedItems
+        };
+    }
+    get slottedContent() {
+        return;
+    }
+    render() {
+        return (h("div", { key: '129050ed3f0aecee43976870d8c3fe834ab498fa', class: this.cssModifiers, role: this.afRole === ProgressIndicatorRole.STATUS
+                ? ProgressIndicatorRole.STATUS
+                : null }, h("div", { key: 'ec760ad17be307e7078188b5f355f14008bd939d' }, this.afStepNextLabel !== undefined ? (h("div", { class: "digi-progress-indicator__content" }, this.renderHeading(), this.afCompletedSteps != this.afTotalSteps && (h("p", { class: "digi-progress-indicator__next", style: {
+                visibility: this.afStepNextLabel !== null &&
+                    this.afStepNextLabel !== undefined
+                    ? 'visible'
+                    : 'hidden'
+            } }, `${this.afStepNextText} ${this.afStepNextLabel}`)), this.afCompletedSteps === this.afTotalSteps && (h("p", { class: "digi-progress-indicator__next", style: {
+                visibility: 'hidden'
+            } }, `${this.afStepNextText} ${this.afStepNextLabel}`)))) : (h("div", { class: "digi-progress-indicator__content" }, this.renderHeading(), h("p", { class: "digi-progress-indicator__label" }, h("span", null, `${this.afStepText}`, " "), h("span", { class: "digi-progress-indicator__label--steps" }, `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}`)))), !this.hasSlottedItems ? (h("ol", { class: "digi-progress-indicator__list", "aria-hidden": "true" }, this.totalSteps.map((item, i) => {
+            return (h("li", { class: {
+                    'digi-progress-indicator__step': true,
+                    'digi-progress-indicator__step--active': this.afCompletedSteps > i,
+                    'digi-progress-indicator__step--current': this.afCompletedSteps === i + 1,
+                    'digi-progress-indicator__step--warning': this.afWarningStep === i + 1,
+                    'digi-progress-indicator__step--error': this.afErrorStep === i + 1
+                } }, h("span", { class: "digi-progress-indicator__step-indicator" }, this.afVariation ===
+                ProgressIndicatorVariation.SECONDARY &&
+                this.afCompletedSteps > i + 1 && (h("digi-icon-check", { class: "digi-progress-indicator__icon" })), this.afWarningStep === i + 1 && (h("digi-icon-validation-warning", { class: "digi-progress-indicator__icon--warning" })), this.afErrorStep === i + 1 && (h("digi-icon-validation-error", { class: "digi-progress-indicator__icon--error" })), h("span", { class: "digi-progress-indicator__step-number" }, item))));
+        }))) : (h("ol", { class: "digi-progress-indicator__list", "aria-hidden": "true" }, this.listItems.map((item, index) => {
+            return (h("li", { class: {
+                    'digi-progress-indicator__step': true,
+                    'digi-progress-indicator__step--active': item.checked || this.afCompletedSteps === index + 1,
+                    'digi-progress-indicator__step--current': this.afCompletedSteps === index + 1
+                } }, h("span", { class: "digi-progress-indicator__step-indicator" }, this.afVariation ===
+                ProgressIndicatorVariation.SECONDARY &&
+                item.checked &&
+                this.afCompletedSteps !== index + 1 && (h("digi-icon-check", { class: "digi-progress-indicator__icon" })), h("span", { class: "digi-progress-indicator__step-number" }, index + 1))));
+        }))), this.afStepNextLabel !== undefined && (h("p", { key: 'd22d8344fdec62143e0147e701c011ce7e189eac', class: "digi-progress-indicator__label" }, h("span", { key: '9a66cc1d054ce853a014acf2a5cbad43a1ac3e19' }, `${this.afStepText}`, " "), h("span", { key: '68bfada37c4de1fee2ec4e53ceb467831832f947', class: "digi-progress-indicator__label--steps" }, `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}`)))), this.afValidationLabel && this.afWarningStep > 0 && (h("p", { key: 'd0b2f915f238245bd993401c9e16f17190258508', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--warning" }, h("digi-icon-validation-warning", { key: '29ce0863e62eae150df7d327d79eb516bb2d6d20', class: "digi-progress-indicator__icon--warning" }), h("span", { key: 'c360860b68c279fdb61441cb2d2d21e9b0b18101' }, this.afValidationLabel))), this.afValidationLabel && this.afErrorStep > 0 && (h("p", { key: '40839ee9f09d34803a7cf4e3800be15bfb5d8532', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--error" }, h("digi-icon-validation-error", { key: '81cde2de59b5d0b8965a96e2c23fdb1a586be862', class: "digi-progress-indicator__icon--error" }), h("span", { key: 'b9a33dcce30760da08233f6333acd425392d11e3' }, this.afValidationLabel))), h("div", { key: '1dcd28b87affe8aea016a0a47bacee08b2eac637', hidden: true, class: "digi-progress-indicator__slot" }, h("digi-util-mutation-observer", { key: '1d2f85e12f722cf8e322f89efcb109a377d2c09a', ref: (el) => (this._observer = el), onAfOnChange: () => this.getItems() }, h("slot", { key: 'f12c39b8602f924929873b075acb04a57bac3f12' })))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "afTotalSteps": ["changeTotalStepsHandler"],
+        "afCompletedSteps": ["changeCompletedStepsHandler"]
+    }; }
+};
+ProgressIndicator.style = DigiProgressIndicatorStyle0;
+
+export { ProgressIndicator as digi_progress_indicator };

package/dist/esm/digi-tools-feedback-banner.entry.js

@@ -82,11 +82,11 @@ const FeedbackBanner = class {
     get content() {
         return (h("section", { class: "digi-tools-feedback-banner__container" }, this.validContent && (h("div", { class: "digi-tools-feedback-banner__main-content" }, h("div", { class: "digi-tools-feedback-banner__text-content" }, h(this.afHeadingLevel, { class: "digi-tools-feedback-banner__heading", id: this.afId + '-heading' }, this.afHeading), h("p", null, this.afText)), h("span", { class: "digi-tools-feedback-banner__illustration" }, this.icon))), h("div", { class: "digi-tools-feedback-banner__links" }, this.validLinks &&
             this.linkItems.map((item) => {
-                return (h("digi-link-external", { afHref: item.href, afTarget: "_blank", afVariation: "small", afDescribedby: this.afId + '-heading' }, item.text));
+                return (h("digi-link-external", { afHref: item.href, afTarget: "_blank", afDescribedby: this.afId + '-heading' }, item.text));
             }), h("div", { hidden: true, class: "digi-tools-feedback-banner__slot" }, h("digi-util-mutation-observer", { ref: (el) => (this._observer = el), onAfOnChange: () => this.validateLinks() }, h("slot", null))))));
     }
     render() {
-        return (h("div", { key: 'c7b4c2ba4fc1d8a012fb6660c57f9aaf16719695', class: Object.assign({ 'digi-tools-feedback-banner': true }, this.cssModifiers) }, this.afType === ToolsFeedbackBannerType.FULLWIDTH && (h("digi-layout-block", { key: '6730815e4d57ef48bc1b23da9bda93c427e42325', afVariation: LayoutBlockVariation.TRANSPARENT }, this.content)), this.afType !== ToolsFeedbackBannerType.FULLWIDTH && this.content));
+        return (h("div", { key: '87775cffbcefea39b8d104fbdeff0b0ba6e6fd54', class: Object.assign({ 'digi-tools-feedback-banner': true }, this.cssModifiers) }, this.afType === ToolsFeedbackBannerType.FULLWIDTH && (h("digi-layout-block", { key: '0d14fe46212ee49874b3a6ebad08e91f6d24be4e', afVariation: LayoutBlockVariation.TRANSPARENT }, this.content)), this.afType !== ToolsFeedbackBannerType.FULLWIDTH && this.content));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/digi-tools-feedback.entry.js

@@ -25,14 +25,10 @@ import './form-textarea-variation.enum-05017e8e.js';
 import './form-validation-message-variation.enum-bcef8a9d.js';
 import './info-card-multi-type.enum-07ee124f.js';
 import './info-card-variation.enum-2ccc52c1.js';
-import './layout-block-container.enum-29d52ee9.js';
+import './layout-container-max-width.enum-c40018ac.js';
 import './layout-columns-variation.enum-34f7754e.js';
-import './typography-variation.enum-cb4ef38c.js';
 import './layout-media-object-alignment.enum-305b86b6.js';
 import './link-button-variation.enum-b7f1d571.js';
-import './link-external-variation.enum-d1f7f1cf.js';
-import './link-internal-variation.enum-feaa9ebd.js';
-import './link-variation.enum-3e259c8a.js';
 import './list-type.enum-fbb331ad.js';
 import './loader-skeleton-variation.enum-f9f867b4.js';
 import './loader-spinner-size.enum-0b246fa0.js';
@@ -42,13 +38,14 @@ import './navigation-context-menu-item-type.enum-d5434f5a.js';
 import './navigation-context-menu-horizontal-position.enum-e5ed22c2.js';
 import './navigation-sidebar-variation.enum-8fead764.js';
 import './navigation-vertical-menu-variation.enum-c30b0ea9.js';
+import './progress-indicator-variation.enum-b12ba50a.js';
 import './progress-list-item-variation.enum-384b9a3a.js';
 import './progress-list-variation.enum-300bd89d.js';
 import './progressbar-variation.enum-40adaab4.js';
 import './quote-image-inner-position.enum-8e9b1e65.js';
 import './table-variation.enum-dd9366b6.js';
 import './tag-media-icon.enum-fefa191c.js';
-import './tag-size.enum-1e1bcf94.js';
+import './typography-variation.enum-850aad78.js';
 import './tools-feedback-banner-type.enum-74b4e580.js';
 import './tools-feedback-rating-variation.enum-29058ff2.js';
 import './typography-heading-jumbo-variation.enum-eb737f1b.js';

package/dist/esm/digi-util-mutation-observer.entry.js

@@ -0,0 +1,60 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-8e318bb2.js';
+import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
+
+const UtilMutationObserver = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afOnChange = createEvent(this, "afOnChange", 7);
+        this._observer = null;
+        this._isObserving = false;
+        this.afId = randomIdGenerator('digi-util-mutation-observer');
+        this.afOptions = {
+            attributes: false,
+            childList: true,
+            subtree: false,
+            characterData: false
+        };
+    }
+    afOptionsWatcher(newValue) {
+        this._afOptions =
+            typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+    }
+    componentWillLoad() {
+        this.afOptionsWatcher(this.afOptions);
+        this.initObserver();
+    }
+    disconnectedCallback() {
+        if (this._isObserving) {
+            this.removeObserver();
+        }
+    }
+    initObserver() {
+        this._observer = new MutationObserver((mutationsList) => {
+            for (const mutation of mutationsList) {
+                if (mutation.type === 'childList' ||
+                    mutation.type === 'attributes' ||
+                    mutation.type === 'characterData') {
+                    this.changeHandler(mutation);
+                }
+            }
+        });
+        this._observer.observe(this.$el, this._afOptions);
+        this._isObserving = true;
+    }
+    removeObserver() {
+        this._observer.disconnect();
+        this._isObserving = false;
+    }
+    changeHandler(e) {
+        this.afOnChange.emit(e);
+    }
+    render() {
+        h("div", { id: this.afId, ref: (el) => (this.$el = el) }, h("slot", null));
+    }
+    get $el() { return getElement(this); }
+    static get watchers() { return {
+        "afOptions": ["afOptionsWatcher"]
+    }; }
+};
+
+export { UtilMutationObserver as digi_util_mutation_observer };

package/dist/esm/index-8e318bb2.js

@@ -52,10 +52,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'digi-icon-check_7':
+                case 'digi-button_4':
                     return import(
                       /* webpackMode: "lazy" */
-                      './digi-icon-check_7.entry.js').then(processMod, consoleError);
+                      './digi-button_4.entry.js').then(processMod, consoleError);
                 case 'digi-badge-status':
                     return import(
                       /* webpackMode: "lazy" */
@@ -848,6 +848,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './digi-progress-circle.entry.js').then(processMod, consoleError);
+                case 'digi-progress-indicator':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './digi-progress-indicator.entry.js').then(processMod, consoleError);
                 case 'digi-progress-list':
                     return import(
                       /* webpackMode: "lazy" */
@@ -876,10 +880,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './digi-tablist-panel.entry.js').then(processMod, consoleError);
-                case 'digi-tag':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './digi-tag.entry.js').then(processMod, consoleError);
                 case 'digi-tools-feedback':
                     return import(
                       /* webpackMode: "lazy" */
@@ -1036,10 +1036,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './digi-icon-chevron-left.entry.js').then(processMod, consoleError);
-                case 'digi-layout-block':
+                case 'digi-layout-block_2':
                     return import(
                       /* webpackMode: "lazy" */
-                      './digi-layout-block.entry.js').then(processMod, consoleError);
+                      './digi-layout-block_2.entry.js').then(processMod, consoleError);
                 case 'digi-link':
                     return import(
                       /* webpackMode: "lazy" */
@@ -1048,14 +1048,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './digi-util-breakpoint-observer.entry.js').then(processMod, consoleError);
-                case 'digi-form-label_3':
+                case 'digi-icon-check':
                     return import(
                       /* webpackMode: "lazy" */
-                      './digi-form-label_3.entry.js').then(processMod, consoleError);
-                case 'digi-icon-x':
+                      './digi-icon-check.entry.js').then(processMod, consoleError);
+                case 'digi-form-label_5':
                     return import(
                       /* webpackMode: "lazy" */
-                      './digi-icon-x.entry.js').then(processMod, consoleError);
+                      './digi-form-label_5.entry.js').then(processMod, consoleError);
                 case 'digi-util-keydown-handler':
                     return import(
                       /* webpackMode: "lazy" */
@@ -1068,10 +1068,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './digi-icon-chevron-right.entry.js').then(processMod, consoleError);
-                case 'digi-button':
+                case 'digi-util-mutation-observer':
                     return import(
                       /* webpackMode: "lazy" */
-                      './digi-button.entry.js').then(processMod, consoleError);
+                      './digi-util-mutation-observer.entry.js').then(processMod, consoleError);
           }
       }
   return import(

package/dist/esm/index.js

@@ -22,15 +22,11 @@ export { F as FormTextareaValidation, a as FormTextareaVariation } from './form-
 export { F as FormValidationMessageVariation } from './form-validation-message-variation.enum-bcef8a9d.js';
 export { I as InfoCardMultiType } from './info-card-multi-type.enum-07ee124f.js';
 export { I as InfoCardBorderPosition, a as InfoCardSize, b as InfoCardType, c as InfoCardVariation } from './info-card-variation.enum-2ccc52c1.js';
-export { L as LayoutBlockContainer } from './layout-block-container.enum-29d52ee9.js';
+export { L as LayoutBlockContainer, b as LayoutContainerMaxWidth, a as LayoutContainerVariation } from './layout-container-max-width.enum-c40018ac.js';
 export { L as LayoutBlockVariation } from './layout-block-variation.enum-b7a20db4.js';
 export { a as LayoutColumnsElement, L as LayoutColumnsGap, b as LayoutColumnsVariation } from './layout-columns-variation.enum-34f7754e.js';
-export { a as LayoutContainerMaxWidth, L as LayoutContainerVariation, P as ProgressIndicatorRole, b as ProgressIndicatorVariation, T as TypographyVariation } from './typography-variation.enum-cb4ef38c.js';
 export { L as LayoutMediaObjectAlignment } from './layout-media-object-alignment.enum-305b86b6.js';
 export { L as LinkButtonSize, a as LinkButtonVariation } from './link-button-variation.enum-b7f1d571.js';
-export { L as LinkExternalVariation } from './link-external-variation.enum-d1f7f1cf.js';
-export { L as LinkInternalVariation } from './link-internal-variation.enum-feaa9ebd.js';
-export { L as LinkVariation } from './link-variation.enum-3e259c8a.js';
 export { L as ListType } from './list-type.enum-fbb331ad.js';
 export { L as LoaderSkeletonVariation } from './loader-skeleton-variation.enum-f9f867b4.js';
 export { L as LoaderSpinnerSize } from './loader-spinner-size.enum-0b246fa0.js';
@@ -40,13 +36,14 @@ export { N as NavigationContextMenuItemType } from './navigation-context-menu-it
 export { N as NavigationContextMenuHorizontalPosition } from './navigation-context-menu-horizontal-position.enum-e5ed22c2.js';
 export { N as NavigationSidebarCloseButtonPosition, a as NavigationSidebarHeadingLevel, b as NavigationSidebarMobilePosition, c as NavigationSidebarMobileVariation, d as NavigationSidebarPosition, e as NavigationSidebarVariation } from './navigation-sidebar-variation.enum-8fead764.js';
 export { N as NavigationVerticalMenuActiveIndicatorSize, a as NavigationVerticalMenuVariation } from './navigation-vertical-menu-variation.enum-c30b0ea9.js';
+export { P as ProgressIndicatorRole, a as ProgressIndicatorVariation } from './progress-indicator-variation.enum-b12ba50a.js';
 export { P as ProgressListItemHeadingLevel, a as ProgressListItemStatus, b as ProgressListItemType, c as ProgressListItemVariation } from './progress-list-item-variation.enum-384b9a3a.js';
 export { P as ProgressListHeadingLevel, a as ProgressListStatus, b as ProgressListType, c as ProgressListVariation } from './progress-list-variation.enum-300bd89d.js';
 export { P as ProgressbarRole, a as ProgressbarVariation } from './progressbar-variation.enum-40adaab4.js';
 export { c as QuoteImageInnerPosition, b as QuoteImagePosition, Q as QuoteType, a as QuoteVariation } from './quote-image-inner-position.enum-8e9b1e65.js';
 export { T as TableSize, a as TableVariation } from './table-variation.enum-dd9366b6.js';
 export { T as TagMediaIcon } from './tag-media-icon.enum-fefa191c.js';
-export { T as TagSize } from './tag-size.enum-1e1bcf94.js';
+export { T as TagSize, a as TypographyVariation } from './typography-variation.enum-850aad78.js';
 export { T as ToolsFeedbackBannerHeadingLevel, a as ToolsFeedbackBannerType } from './tools-feedback-banner-type.enum-74b4e580.js';
 export { F as FeedbackRatingHeadingLevel, a as FeedbackRatingType, b as FeedbackRatingVariation } from './tools-feedback-rating-variation.enum-29058ff2.js';
 export { T as TypographyHeadingJumboLevel, a as TypographyHeadingJumboVariation } from './typography-heading-jumbo-variation.enum-eb737f1b.js';

package/dist/esm/layout-container-max-width.enum-c40018ac.js

@@ -0,0 +1,21 @@
+var LayoutBlockContainer;
+(function (LayoutBlockContainer) {
+    LayoutBlockContainer["STATIC"] = "static";
+    LayoutBlockContainer["FLUID"] = "fluid";
+    LayoutBlockContainer["NONE"] = "none";
+})(LayoutBlockContainer || (LayoutBlockContainer = {}));
+
+var LayoutContainerVariation;
+(function (LayoutContainerVariation) {
+    LayoutContainerVariation["STATIC"] = "static";
+    LayoutContainerVariation["FLUID"] = "fluid";
+    LayoutContainerVariation["NONE"] = "none";
+})(LayoutContainerVariation || (LayoutContainerVariation = {}));
+
+var LayoutContainerMaxWidth;
+(function (LayoutContainerMaxWidth) {
+    LayoutContainerMaxWidth["WIDTH_1200"] = "1200";
+    LayoutContainerMaxWidth["WIDTH_1400"] = "1400";
+})(LayoutContainerMaxWidth || (LayoutContainerMaxWidth = {}));
+
+export { LayoutBlockContainer as L, LayoutContainerVariation as a, LayoutContainerMaxWidth as b };