@designsystem-se/af 34.0.3-beta.0 → 34.0.3

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:not(:has(>digi-icon-validation-error)).sc-digi-progress-indicator:not(:has(>digi-icon-validation-warning)).sc-digi-progress-indicator{box-shadow:inset 0px 0px 0px 3px var(--digi--color--background--primary), 0 0 0 3px var(--digi--progress-indicator--step--background);width:1.75rem;height:1.75rem}@media (max-width: 36rem){.sc-digi-progress-indicator-h .digi-progress-indicator__step--current.sc-digi-progress-indicator span.sc-digi-progress-indicator:not(:has(>digi-icon-validation-error)).sc-digi-progress-indicator:not(:has(>digi-icon-validation-warning)).sc-digi-progress-indicator{width:1.375rem;height:1.375rem;box-shadow:inset 0px 0px 0px 3px var(--digi--color--background--primary), 0 0 0 2px var(--digi--progress-indicator--step--background)}}.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;--digi--progress-indicator--icon-status--width:1.3rem;--digi--progress-indicator--icon-status--width:1.3rem;--digi--progress-indicator--icon--width:0.6rem;--digi--progress-indicator--icon--height:0.6rem}}.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.entry.js

@@ -1,28 +1,23 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-8e318bb2.js';
 import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
-import { v as FeedbackVariation, u as ToolsFeedbackType, T as ToolsFeedbackHeadingLevel } from './tools-feedback-variation.enum-4bfb560b.js';
+import { y as FeedbackVariation, x as ToolsFeedbackType, T as ToolsFeedbackHeadingLevel } from './typography-variation.enum-253cc59f.js';
 import { L as LayoutBlockVariation } from './layout-block-variation.enum-b7a20db4.js';
 import './badge-notification-shape.enum-e15a6245.js';
 import './badge-status-variation.enum-8d6370ff.js';
-import { B as ButtonSize } from './button-size.enum-2dcd673f.js';
-import './button-type.enum-5250ae0b.js';
+import { B as ButtonSize } from './code-example-variation.enum-222e18d3.js';
+import './form-input-type.enum-a6bba983.js';
 import { B as ButtonVariation } from './button-variation.enum-94fffdd6.js';
 import './calendar-week-view-heading-level.enum-6774297c.js';
 import './card-footer-border.enum-eed26243.js';
 import './bar-chart-variation.enum-97c0b47f.js';
-import './code-example-variation.enum-e9f9fced.js';
 import './code-variation.enum-1eee7c7a.js';
 import './expandable-faq-item-variation.enum-a8cb225b.js';
 import './expandable-faq-variation.enum-6934c367.js';
 import './footer-card-variation.enum-cc732148.js';
 import './form-checkbox-variation.enum-83e906fc.js';
-import './form-file-upload-variation.enum-9c49ec5e.js';
-import './form-input-search-variation.enum-f9d669f2.js';
-import './form-input-type.enum-3da3db27.js';
-import './form-input-variation.enum-64d9450f.js';
+import './form-validation-message-variation.enum-f7835fc5.js';
 import './form-select-variation.enum-f2f6098d.js';
 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-container-max-width.enum-c40018ac.js';
@@ -38,7 +33,7 @@ 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 './typography-variation.enum-d5ac8594.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';

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/{form-input-type.enum-3da3db27.js → form-input-type.enum-a6bba983.js}

@@ -1,3 +1,17 @@
+var ButtonType;
+(function (ButtonType) {
+    ButtonType["BUTTON"] = "button";
+    ButtonType["SUBMIT"] = "submit";
+    ButtonType["RESET"] = "reset";
+})(ButtonType || (ButtonType = {}));
+
+var FormInputSearchVariation;
+(function (FormInputSearchVariation) {
+    FormInputSearchVariation["SMALL"] = "small";
+    FormInputSearchVariation["MEDIUM"] = "medium";
+    FormInputSearchVariation["LARGE"] = "large";
+})(FormInputSearchVariation || (FormInputSearchVariation = {}));
+
 var FormInputButtonVariation;
 (function (FormInputButtonVariation) {
     FormInputButtonVariation["PRIMARY"] = "primary";
@@ -22,4 +36,4 @@ var FormInputType;
     FormInputType["WEEK"] = "week";
 })(FormInputType || (FormInputType = {}));
 
-export { FormInputButtonVariation as F, FormInputType as a };
+export { ButtonType as B, FormInputSearchVariation as F, FormInputButtonVariation as a, FormInputType as b };

package/dist/esm/{form-file-upload-variation.enum-9c49ec5e.js → form-validation-message-variation.enum-f7835fc5.js}

@@ -21,4 +21,11 @@ var FormFileUploadVariation;
     FormFileUploadVariation["LARGE"] = "large";
 })(FormFileUploadVariation || (FormFileUploadVariation = {}));
 
-export { FormFileUploadHeadingLevel as F, FormFileUploadValidation as a, FormFileUploadVariation as b };
+var FormValidationMessageVariation;
+(function (FormValidationMessageVariation) {
+    FormValidationMessageVariation["SUCCESS"] = "success";
+    FormValidationMessageVariation["ERROR"] = "error";
+    FormValidationMessageVariation["WARNING"] = "warning";
+})(FormValidationMessageVariation || (FormValidationMessageVariation = {}));
+
+export { FormFileUploadHeadingLevel as F, FormFileUploadValidation as a, FormFileUploadVariation as b, FormValidationMessageVariation as c };

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

@@ -52,10 +52,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'digi-icon-check_6':
+                case 'digi-button_12':
                     return import(
                       /* webpackMode: "lazy" */
-                      './digi-icon-check_6.entry.js').then(processMod, consoleError);
+                      './digi-button_12.entry.js').then(processMod, consoleError);
                 case 'digi-badge-status':
                     return import(
                       /* webpackMode: "lazy" */
@@ -144,10 +144,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './digi-form-receipt.entry.js').then(processMod, consoleError);
-                case 'digi-form-select-filter':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './digi-form-select-filter.entry.js').then(processMod, consoleError);
                 case 'digi-form-textarea':
                     return import(
                       /* webpackMode: "lazy" */
@@ -848,6 +844,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" */
@@ -1028,10 +1028,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './digi-media-image_2.entry.js').then(processMod, consoleError);
-                case 'digi-form-input':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './digi-form-input.entry.js').then(processMod, consoleError);
                 case 'digi-icon-chevron-left':
                     return import(
                       /* webpackMode: "lazy" */
@@ -1048,30 +1044,18 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './digi-util-breakpoint-observer.entry.js').then(processMod, consoleError);
-                case 'digi-form-label_3':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './digi-form-label_3.entry.js').then(processMod, consoleError);
                 case 'digi-icon-x':
                     return import(
                       /* webpackMode: "lazy" */
                       './digi-icon-x.entry.js').then(processMod, consoleError);
-                case 'digi-util-keydown-handler':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './digi-util-keydown-handler.entry.js').then(processMod, consoleError);
-                case 'digi-icon-chevron-down':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './digi-icon-chevron-down.entry.js').then(processMod, consoleError);
                 case 'digi-icon-chevron-right':
                     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

@@ -1,25 +1,20 @@
 export { B as BadgeNotificationShape } from './badge-notification-shape.enum-e15a6245.js';
-export { B as BadgeNotificationType, C as CalendarDatepickerValidation, a as CardShadow, b as CodeBlockLanguage, D as DialogHeadingLevel, c as DialogSize, d as DialogVariation, t as ErrorPageStatusCodes, E as ExpandableAccordionHeaderLevel, e as ExpandableAccordionToggleType, f as ExpandableAccordionVariation, v as FeedbackVariation, F as FooterVariation, g as FormErrorListHeadingLevel, h as FormRadiobuttonLayout, i as FormRadiobuttonValidation, j as FormRadiobuttonVariation, k as FormReceiptHeadingLevel, l as FormReceiptType, m as FormReceiptVariation, n as FormSelectFilterValidation, H as HeaderCenterContentWidth, q as InfoCardHeadingLevel, I as InfoCardMultiContainerHeadingLevel, o as InfoCardMultiHeadingLevel, p as InfoCardMultiVariation, N as NotificationAlertHeadingLevel, r as NotificationAlertSize, s as NotificationAlertVariation, T as ToolsFeedbackHeadingLevel, u as ToolsFeedbackType } from './tools-feedback-variation.enum-4bfb560b.js';
+export { B as BadgeNotificationType, C as CalendarDatepickerValidation, a as CardShadow, b as CodeBlockLanguage, D as DialogHeadingLevel, c as DialogSize, d as DialogVariation, w as ErrorPageStatusCodes, E as ExpandableAccordionHeaderLevel, e as ExpandableAccordionToggleType, f as ExpandableAccordionVariation, y as FeedbackVariation, F as FooterVariation, g as FormErrorListHeadingLevel, h as FormInputMode, i as FormInputValidation, j as FormInputVariation, k as FormRadiobuttonLayout, l as FormRadiobuttonValidation, m as FormRadiobuttonVariation, n as FormReceiptHeadingLevel, o as FormReceiptType, p as FormReceiptVariation, q as FormSelectFilterValidation, H as HeaderCenterContentWidth, t as InfoCardHeadingLevel, I as InfoCardMultiContainerHeadingLevel, r as InfoCardMultiHeadingLevel, s as InfoCardMultiVariation, N as NotificationAlertHeadingLevel, u as NotificationAlertSize, v as NotificationAlertVariation, T as ToolsFeedbackHeadingLevel, x as ToolsFeedbackType, z as TypographyVariation } from './typography-variation.enum-253cc59f.js';
 export { B as BadgeStatusSize, a as BadgeStatusType, b as BadgeStatusVariation } from './badge-status-variation.enum-8d6370ff.js';
-export { B as ButtonSize } from './button-size.enum-2dcd673f.js';
-export { B as ButtonType } from './button-type.enum-5250ae0b.js';
+export { B as ButtonSize, C as CodeBlockVariation, a as CodeExampleLanguage, b as CodeExampleVariation } from './code-example-variation.enum-222e18d3.js';
+export { B as ButtonType, a as FormInputButtonVariation, F as FormInputSearchVariation, b as FormInputType } from './form-input-type.enum-a6bba983.js';
 export { B as ButtonVariation } from './button-variation.enum-94fffdd6.js';
 export { C as CalendarWeekViewHeadingLevel } from './calendar-week-view-heading-level.enum-6774297c.js';
 export { a as CardBorder, C as CardBorderRadius, b as CardFooterBorder } from './card-footer-border.enum-eed26243.js';
 export { B as BarChartVariation } from './bar-chart-variation.enum-97c0b47f.js';
-export { C as CodeBlockVariation, a as CodeExampleLanguage, b as CodeExampleVariation } from './code-example-variation.enum-e9f9fced.js';
 export { C as CodeLanguage, a as CodeVariation } from './code-variation.enum-1eee7c7a.js';
 export { E as ExpandableFaqItemHeadingLevel, a as ExpandableFaqItemVariation } from './expandable-faq-item-variation.enum-a8cb225b.js';
 export { E as ExpandableFaqHeadingLevel, a as ExpandableFaqVariation } from './expandable-faq-variation.enum-6934c367.js';
 export { F as FooterCardVariation } from './footer-card-variation.enum-cc732148.js';
 export { F as FormCheckboxLayout, a as FormCheckboxValidation, b as FormCheckboxVariation } from './form-checkbox-variation.enum-83e906fc.js';
-export { F as FormFileUploadHeadingLevel, a as FormFileUploadValidation, b as FormFileUploadVariation } from './form-file-upload-variation.enum-9c49ec5e.js';
-export { F as FormInputSearchVariation } from './form-input-search-variation.enum-f9d669f2.js';
-export { F as FormInputButtonVariation, a as FormInputType } from './form-input-type.enum-3da3db27.js';
-export { F as FormInputMode, a as FormInputValidation, b as FormInputVariation } from './form-input-variation.enum-64d9450f.js';
+export { F as FormFileUploadHeadingLevel, a as FormFileUploadValidation, b as FormFileUploadVariation, c as FormValidationMessageVariation } from './form-validation-message-variation.enum-f7835fc5.js';
 export { F as FormSelectValidation, a as FormSelectVariation } from './form-select-variation.enum-f2f6098d.js';
 export { F as FormTextareaValidation, a as FormTextareaVariation } from './form-textarea-variation.enum-05017e8e.js';
-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, b as LayoutContainerMaxWidth, a as LayoutContainerVariation } from './layout-container-max-width.enum-c40018ac.js';
@@ -36,7 +31,7 @@ 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, T as TypographyVariation } from './typography-variation.enum-d5ac8594.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';