@designsystem-se/af 31.3.0

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

@@ -0,0 +1,81 @@
+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';
+
+var ProgressCircleRole;
+(function (ProgressCircleRole) {
+    ProgressCircleRole["NONE"] = "none";
+    ProgressCircleRole["STATUS"] = "status";
+})(ProgressCircleRole || (ProgressCircleRole = {}));
+
+const progressCircleCss = ".digi--util--fs--xs.sc-digi-progress-circle{font-size:var(--digi--global--typography--font-size--small) !important}.digi--util--fs--s.sc-digi-progress-circle{font-size:calc(var(--digi--global--typography--font-size--small) + 1px) !important}.digi--util--fs--m.sc-digi-progress-circle{font-size:var(--digi--global--typography--font-size--base) !important}.digi--util--fs--l.sc-digi-progress-circle{font-size:var(--digi--global--typography--font-size--large) !important}.digi--util--fw--sb.sc-digi-progress-circle{font-weight:var(--digi--global--typography--font-weight--semibold) !important}.digi--util--pt--1.sc-digi-progress-circle{padding-top:var(--digi--global--spacing--smallest-2) !important}.digi--util--pt--10.sc-digi-progress-circle{padding-top:var(--digi--global--spacing--smallest) !important}.digi--util--pt--20.sc-digi-progress-circle{padding-top:var(--digi--global--spacing--base) !important}.digi--util--pt--30.sc-digi-progress-circle{padding-top:var(--digi--global--spacing--largest-2) !important}.digi--util--pt--40.sc-digi-progress-circle{padding-top:var(--digi--global--spacing--largest-4) !important}.digi--util--pt--50.sc-digi-progress-circle{padding-top:2.5rem !important}.digi--util--pt--60.sc-digi-progress-circle{padding-top:var(--digi--global--spacing--largest-5) !important}.digi--util--pt--70.sc-digi-progress-circle{padding-top:var(--digi--global--spacing--largest-6) !important}.digi--util--pt--80.sc-digi-progress-circle{padding-top:4.5rem !important}.digi--util--pt--90.sc-digi-progress-circle{padding-top:5rem !important}.digi--util--pb--1.sc-digi-progress-circle{padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--pb--10.sc-digi-progress-circle{padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--pb--20.sc-digi-progress-circle{padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--pb--30.sc-digi-progress-circle{padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--pb--40.sc-digi-progress-circle{padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--pb--50.sc-digi-progress-circle{padding-bottom:2.5rem !important}.digi--util--pb--60.sc-digi-progress-circle{padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--pb--70.sc-digi-progress-circle{padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--pb--80.sc-digi-progress-circle{padding-bottom:4.5rem !important}.digi--util--pb--90.sc-digi-progress-circle{padding-bottom:5rem !important}.digi--util--p--1.sc-digi-progress-circle{padding:var(--digi--global--spacing--smallest-2) !important}.digi--util--p--10.sc-digi-progress-circle{padding:var(--digi--global--spacing--smallest) !important}.digi--util--p--20.sc-digi-progress-circle{padding:var(--digi--global--spacing--base) !important}.digi--util--p--30.sc-digi-progress-circle{padding:var(--digi--global--spacing--largest-2) !important}.digi--util--p--40.sc-digi-progress-circle{padding:var(--digi--global--spacing--largest-4) !important}.digi--util--p--50.sc-digi-progress-circle{padding:2.5rem !important}.digi--util--p--60.sc-digi-progress-circle{padding:var(--digi--global--spacing--largest-5) !important}.digi--util--p--70.sc-digi-progress-circle{padding:var(--digi--global--spacing--largest-6) !important}.digi--util--p--80.sc-digi-progress-circle{padding:4.5rem !important}.digi--util--p--90.sc-digi-progress-circle{padding:5rem !important}.digi--util--ptb--1.sc-digi-progress-circle{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-circle{padding-top:var(--digi--global--spacing--smallest) !important;padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--ptb--20.sc-digi-progress-circle{padding-top:var(--digi--global--spacing--base) !important;padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--ptb--30.sc-digi-progress-circle{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-circle{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-circle{padding-top:2.5rem !important;padding-bottom:2.5rem !important}.digi--util--ptb--60.sc-digi-progress-circle{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-circle{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-circle{padding-top:4.5rem !important;padding-bottom:4.5rem !important}.digi--util--ptb--90.sc-digi-progress-circle{padding-top:5rem !important;padding-bottom:5rem !important}.digi--util--plr--1.sc-digi-progress-circle{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-circle{padding-left:var(--digi--global--spacing--smallest) !important;padding-right:var(--digi--global--spacing--smallest) !important}.digi--util--plr--20.sc-digi-progress-circle{padding-left:var(--digi--global--spacing--base) !important;padding-right:var(--digi--global--spacing--base) !important}.digi--util--plr--30.sc-digi-progress-circle{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-circle{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-circle{padding-left:2.5rem !important;padding-right:2.5rem !important}.digi--util--plr--60.sc-digi-progress-circle{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-circle{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-circle{padding-left:4.5rem !important;padding-right:4.5rem !important}.digi--util--plr--90.sc-digi-progress-circle{padding-left:5rem !important;padding-right:5rem !important}.digi--util--sr-only.sc-digi-progress-circle{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-circle{display:none}.sc-digi-progress-circle-h{--digi--progress-circle--border-color:var(--digi--color--border--neutral-5);--digi--progress-circle--border-color--active:var(--digi--global--color--function--success--base);--digi--progress-circle--border-color--secondary--active:var(--digi--color--border--secondary);--digi--progress-circle--border-width:var(--digi--border-width--primary);--digi--progress-circle--step--background:var(--digi--color--background--primary);--digi--progress-circle--step--background--active:var(--digi--global--color--function--success--base);--digi--progress-circle--step--background--secondary--active:var(--digi--color--background--inverted-1);--digi--progress-circle--step--size:var(--digi--global--spacing--base);--digi--progress-circle--step--size--large:1.625rem;--digi--progress-circle--step--size--active:1.625rem;--digi--progress-circle--step--size--active--large:1.625rem}.sc-digi-progress-circle-h .digi-progress-circle.sc-digi-progress-circle{font-size:var(--digi--progress-indicator--label--font-size);margin:var(--digi--progress-indicator--margin);box-sizing:border-box}.sc-digi-progress-circle-h .digi-progress-circle.sc-digi-progress-circle:not(.digi-progress-circle--linear){--digi--progress-indicator--step--line--color--active:var(\n    --digi--progress-indicator--step--line--color\n  )}.sc-digi-progress-circle-h .digi-progress-circle__content.sc-digi-progress-circle{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-progress-circle-h .digi-progress-circle__heading.sc-digi-progress-circle{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}.sc-digi-progress-circle-h .digi-progress-circle__heading--circle.sc-digi-progress-circle{font-size:var(--digi--progress-indicator--heading--circle--font-size);margin-bottom:0.35rem}.sc-digi-progress-circle-h .digi-progress-circle__next.sc-digi-progress-circle{font-size:var(--digi--typography--body--font-size--desktop);font-style:italic;color:var(--digi--color--text--neutral);margin:0}.sc-digi-progress-circle-h .digi-progress-circle__next--circle.sc-digi-progress-circle{font-size:var(--digi--typography--tag--font-size--desktop)}.sc-digi-progress-circle-h .digi-progress-circle__icon.sc-digi-progress-circle{--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-circle-h .digi-progress-circle__icon--warning.sc-digi-progress-circle{--digi--icon--height:var(\n    --digi--progress-indicator--icon-status--height\n  );--digi--icon--width:var(\n    --digi--progress-indicator--icon-status--width\n  )}.sc-digi-progress-circle-h .digi-progress-circle__icon--error.sc-digi-progress-circle{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-circle-h .digi-progress-circle__label.sc-digi-progress-circle{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-circle-h .digi-progress-circle__label--steps.sc-digi-progress-circle{font-weight:600}.sc-digi-progress-circle-h .digi-progress-circle__validation-label.sc-digi-progress-circle{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-circle-h .digi-progress-circle__validation-label.sc-digi-progress-circle span.sc-digi-progress-circle{display:inline-block;margin-left:8px}.sc-digi-progress-circle-h .digi-progress-circle__validation-label--warning.sc-digi-progress-circle{background-color:var(--digi--color--background--warning-2)}.sc-digi-progress-circle-h .digi-progress-circle__validation-label--error.sc-digi-progress-circle{background-color:var(--digi--color--background--danger-2)}.sc-digi-progress-circle-h .digi-progress-circle__step.sc-digi-progress-circle{position:relative;height:var(--digi--progress-circle--step--size--active);z-index:2}.sc-digi-progress-circle-h .digi-progress-circle__step.sc-digi-progress-circle:last-child{width:var(--digi--progress-circle--step--size--active)}.sc-digi-progress-circle-h .digi-progress-circle__step.sc-digi-progress-circle:last-child::before{display:none}.sc-digi-progress-circle-h .digi-progress-circle__step.sc-digi-progress-circle::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)}.sc-digi-progress-circle-h .digi-progress-circle__step--active.sc-digi-progress-circle{--digi--progress-circle--border-color:var(\n    --digi--progress-circle--border-color--active\n  );--digi--progress-circle--step--background:var(\n    --digi--progress-circle--step--background--active\n  );--digi--progress-circle--step--size:var(\n    --digi--progress-circle--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-circle-h .digi-progress-circle__step--active.sc-digi-progress-circle .digi-progress-circle__step-indicator.sc-digi-progress-circle{margin-left:calc((var(--digi--progress-circle--step--size--large) - var(--digi--progress-circle--step--size--active--large)) / 2)}.sc-digi-progress-circle-h .digi-progress-circle__step--current.sc-digi-progress-circle{--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-circle-h .digi-progress-circle__step--current.sc-digi-progress-circle span.sc-digi-progress-circle{box-shadow:inset 0px 0px 0px 2px var(--digi--color--background--primary)}.sc-digi-progress-circle-h .digi-progress-circle__step--warning.sc-digi-progress-circle,.sc-digi-progress-circle-h .digi-progress-circle__step--error.sc-digi-progress-circle{--digi--progress-circle--step--background:transparent}.sc-digi-progress-circle-h .digi-progress-circle__step--warning.sc-digi-progress-circle .digi-progress-circle__step-indicator.sc-digi-progress-circle,.sc-digi-progress-circle-h .digi-progress-circle__step--error.sc-digi-progress-circle .digi-progress-circle__step-indicator.sc-digi-progress-circle{border:0;box-shadow:inset 0px 0px 0px 2px transparent}.sc-digi-progress-circle-h .digi-progress-circle__step-indicator.sc-digi-progress-circle{width:var(--digi--progress-circle--step--size);height:var(--digi--progress-circle--step--size);border:var(--digi--progress-indicator--step--line--style) var(--digi--progress-indicator--step--line--width) var(--digi--progress-circle--border-color);background:var(--digi--progress-circle--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%}.sc-digi-progress-circle-h .digi-progress-circle__step-number.sc-digi-progress-circle{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-circle-h .digi-progress-circle__circle-wrapper.sc-digi-progress-circle{display:flex;align-items:center}.sc-digi-progress-circle-h .digi-progress-circle__circle.sc-digi-progress-circle{position:relative;display:inline-block}.sc-digi-progress-circle-h .digi-progress-circle__circle.sc-digi-progress-circle svg.sc-digi-progress-circle{transform:rotate(-90deg)}.sc-digi-progress-circle-h .digi-progress-circle__circle-label.sc-digi-progress-circle{position:absolute;top:47%;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-circle-h .digi-progress-circle__circle-step-unfinished.sc-digi-progress-circle{stroke:var(--digi--progress-circle--border-color)}.sc-digi-progress-circle-h .digi-progress-circle__circle-step-completed.sc-digi-progress-circle{stroke:var(--digi--progress-circle--step--background--active)}.sc-digi-progress-circle-h .digi-progress-circle__circle-step-warning.sc-digi-progress-circle{stroke:var(--digi--progress-indicator--icon--warning--color)}.sc-digi-progress-circle-h .digi-progress-circle__circle-step-error.sc-digi-progress-circle{stroke:var(--digi--progress-indicator--icon--error--color)}";
+const DigiProgressCircleStyle0 = progressCircleCss;
+
+const ProgressCircle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.completedSteps = undefined;
+        this.totalSteps = [];
+        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 = ProgressCircleRole.STATUS;
+        this.afId = randomIdGenerator('digi-progress-circle');
+    }
+    componentWillLoad() {
+        this.changeTotalStepsHandler(this.afTotalSteps);
+    }
+    changeTotalStepsHandler(value) {
+        this.totalSteps = new Array(value);
+    }
+    changeCompletedStepsHandler(value) {
+        this.completedSteps = value;
+    }
+    focusOnHeading() {
+        this.headingElement.focus();
+    }
+    renderHeading() {
+        return (h("h2", { class: "digi-progress-circle__heading digi-progress-circle__heading--circle", tabIndex: -1, ref: (el) => (this.headingElement = el) }, this.afStepHeading));
+    }
+    get cssModifiers() {
+        return {
+            'digi-progress-circle': true,
+            'digi-progress-circle--primary': true
+        };
+    }
+    get slottedContent() {
+        return;
+    }
+    render() {
+        return (h("div", { key: '168d6ac008323ab55fb98b8e04d2af4ad2026cca', class: this.cssModifiers, role: this.afRole === ProgressCircleRole.STATUS
+                ? ProgressCircleRole.STATUS
+                : null }, h("div", { key: '39ea149b92d942500e6a47593b02f5c9c101a5e7', class: "digi-progress-circle__circle-wrapper" }, h("div", { key: 'daec847fe13819755c3a039597ffcddb7fb39f2c', class: "digi-progress-circle__circle" }, h("p", { key: '21bf61d6d6b9367284b18580d0e65208e775dcbd', class: "digi-progress-circle__circle-label", "aria-label": `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}` }, this.afCompletedSteps, " ", this.afStepsSeparator, ' ', this.afTotalSteps, ' '), h("svg", { key: '44dad316ee6a745f9846b5a663970bbbb2a8d801', width: this.radius * 2, height: this.radius * 2 }, h("defs", { key: '8deb4a1c85a901c1be70ad1e6e8a59f2a5df6fbb' }, h("mask", { key: 'c85fbf52c2ee11633373d00a063fb14ef4bade24', id: this.afId }, h("circle", { key: '11a23e3ff7c6178022d95faaf1587dcd173faea0', cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", stroke: "white", "stroke-width": this.stroke, "stroke-dasharray": (1000 - this.afTotalSteps * 15) / this.afTotalSteps +
+                ' 15', pathLength: "1000" }))), h("g", { key: '4fb6894d3473752fb593278fc659e26998ca7084' }, h("circle", { key: '058d00be90822a1926e804e2872ec468f23b5a96', class: "digi-progress-circle__circle-step-unfinished", mask: `url(#${this.afId})`, cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", "stroke-width": this.stroke }), h("circle", { key: 'cfffc83fc6cd2fa2ee95e29150c7188ac5e573e8', class: "digi-progress-circle__circle-step-completed", mask: `url(#${this.afId})`, cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", "stroke-width": this.stroke, "stroke-dasharray": (1000 / this.totalSteps.length) * this.afCompletedSteps +
+                ' 1000', pathLength: "1000" }), this.afWarningStep && (h("circle", { key: '1b7e693d338bbe25879bcf053e5abd111c7dd6b9', class: "digi-progress-circle__circle-step-warning", mask: `url(#${this.afId})`, cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", "stroke-width": this.stroke, "stroke-dasharray": (1000 / this.totalSteps.length) * 1 + ' 1000', "stroke-dashoffset": -(1000 / this.totalSteps.length) *
+                (this.afCompletedSteps - 1), pathLength: "1000" })), this.afErrorStep && (h("circle", { key: 'd3092eeb504c605adb7f188b146569ef56dc3ad3', class: "digi-progress-circle__circle-step-error", mask: `url(#${this.afId})`, cx: this.radius, cy: this.radius, r: this.radius - this.stroke * 2, fill: "none", "stroke-width": this.stroke, "stroke-dasharray": (1000 / this.totalSteps.length) * 1 + ' 1000', "stroke-dashoffset": -(1000 / this.totalSteps.length) *
+                (this.afCompletedSteps - 1), pathLength: "1000" }))))), h("div", { key: '1a6660016cafb9787b2a57dc054c49aa40ffea08', class: "digi-progress-circle__content" }, this.renderHeading(), this.afCompletedSteps === this.afTotalSteps && (h("p", { key: '9125cef1811e996179a196e04aedf1c97afe88de', class: "digi-progress-circle__next digi-progress-circle__next--circle", style: {
+                visibility: 'hidden'
+            } }, `${this.afStepNextText} ${this.afStepNextLabel}`)), this.afCompletedSteps != this.afTotalSteps && (h("p", { key: 'a6257669e33140d2a592cc90e7a57f56f18b499f', class: "digi-progress-circle__next digi-progress-circle__next--circle", style: {
+                visibility: this.afStepNextLabel !== null &&
+                    this.afStepNextLabel !== undefined
+                    ? 'visible'
+                    : 'hidden'
+            } }, `${this.afStepNextText} ${this.afStepNextLabel}`)))), this.afValidationLabel && this.afWarningStep > 0 && (h("p", { key: 'f1bcde2774c52424e067f3a1ac2729f24017dd64', class: "digi-progress-circle__validation-label digi-progress-circle__validation-label--warning" }, h("digi-icon-validation-warning", { key: '5c6ed9b3df5a0c61aa3108831d74f40e3ce50c3a', class: "digi-progress-circle__icon--warning" }), h("span", { key: 'b70d527e0630fcc857f1b33e6acfefa71b6dede1' }, this.afValidationLabel))), this.afValidationLabel && this.afErrorStep > 0 && (h("p", { key: '71796ce5a13147a61b0167be3d2843a017e2d9bb', class: "digi-progress-circle__validation-label digi-progress-circle__validation-label--error" }, h("digi-icon-validation-error", { key: 'dd544b5dcdef92bf6aaa454048b3a1e73aeef379', class: "digi-progress-circle__icon--error" }), h("span", { key: '907cec6d368ba97bc1f2dc672252b80711f992fd' }, this.afValidationLabel)))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "afCompletedSteps": ["changeCompletedStepsHandler"]
+    }; }
+};
+ProgressCircle.style = DigiProgressCircleStyle0;
+
+export { ProgressCircle as digi_progress_circle };

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

@@ -0,0 +1,129 @@
+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:var(--digi--color--background--primary);--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  )}.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:100%;left:0}}.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
+                };
+            });
+        }
+    }
+    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: '44e985f27fb32392b9f48b59cf453d0e2bf4f5c8', class: this.cssModifiers, role: this.afRole === ProgressIndicatorRole.STATUS
+                ? ProgressIndicatorRole.STATUS
+                : null }, h("div", { key: '80a7d3adab225f369b6a062feb9768b4bf034dcc' }, 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-exclamation-triangle-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: '2f3a4bc72595730fa0399b977cd121263c12e487', class: "digi-progress-indicator__label" }, h("span", { key: '0776c714fac523598644ec692a8966bd5a32d15d' }, `${this.afStepText}`, " "), h("span", { key: 'af5d9781358435ca6a51f189ca1c13ac62bba800', class: "digi-progress-indicator__label--steps" }, `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}`)))), this.afValidationLabel && this.afWarningStep > 0 && (h("p", { key: '6f42f60d6223393521273f180ab1c4d368a245f5', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--warning" }, h("digi-icon-validation-warning", { key: 'ccc832ac20642022a9280994a2e7fb6c29fec6b1', class: "digi-progress-indicator__icon--warning" }), h("span", { key: 'd06a25a2f4561a0f96e2bde64e9c16756e1f63b9' }, this.afValidationLabel))), this.afValidationLabel && this.afErrorStep > 0 && (h("p", { key: '6ce2aafdd0d1aeac4593c518a5abecec6d1967de', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--error" }, h("digi-icon-validation-error", { key: '431298e4578a64d3db67e83c1717febfb1c705b4', class: "digi-progress-indicator__icon--error" }), h("span", { key: 'a245bf2ef11b2769f8fccc405ee1c7680fc48a38' }, this.afValidationLabel))), h("div", { key: '5b814c056bc6af220bac060f4497c7a8b6895104', hidden: true, class: "digi-progress-indicator__slot" }, h("digi-util-mutation-observer", { key: 'a457c3c1e32118b8ec375420f6b92ed11c393efc', ref: (el) => (this._observer = el), onAfOnChange: () => this.getItems() }, h("slot", { key: 'a168fd9eb028cf8099478168cd072d5003699f58' })))));
+    }
+    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-progress-list-item.entry.js

@@ -0,0 +1,103 @@
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, 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 ProgressListItemHeadingLevel, a as ProgressListItemStatus, c as ProgressListItemVariation, b as ProgressListItemType } from './progress-list-item-variation.enum-384b9a3a.js';
+
+const progressListItemCss = ".digi--util--fs--xs.sc-digi-progress-list-item{font-size:var(--digi--global--typography--font-size--small) !important}.digi--util--fs--s.sc-digi-progress-list-item{font-size:calc(var(--digi--global--typography--font-size--small) + 1px) !important}.digi--util--fs--m.sc-digi-progress-list-item{font-size:var(--digi--global--typography--font-size--base) !important}.digi--util--fs--l.sc-digi-progress-list-item{font-size:var(--digi--global--typography--font-size--large) !important}.digi--util--fw--sb.sc-digi-progress-list-item{font-weight:var(--digi--global--typography--font-weight--semibold) !important}.digi--util--pt--1.sc-digi-progress-list-item{padding-top:var(--digi--global--spacing--smallest-2) !important}.digi--util--pt--10.sc-digi-progress-list-item{padding-top:var(--digi--global--spacing--smallest) !important}.digi--util--pt--20.sc-digi-progress-list-item{padding-top:var(--digi--global--spacing--base) !important}.digi--util--pt--30.sc-digi-progress-list-item{padding-top:var(--digi--global--spacing--largest-2) !important}.digi--util--pt--40.sc-digi-progress-list-item{padding-top:var(--digi--global--spacing--largest-4) !important}.digi--util--pt--50.sc-digi-progress-list-item{padding-top:2.5rem !important}.digi--util--pt--60.sc-digi-progress-list-item{padding-top:var(--digi--global--spacing--largest-5) !important}.digi--util--pt--70.sc-digi-progress-list-item{padding-top:var(--digi--global--spacing--largest-6) !important}.digi--util--pt--80.sc-digi-progress-list-item{padding-top:4.5rem !important}.digi--util--pt--90.sc-digi-progress-list-item{padding-top:5rem !important}.digi--util--pb--1.sc-digi-progress-list-item{padding-bottom:var(--digi--global--spacing--smallest-2) !important}.digi--util--pb--10.sc-digi-progress-list-item{padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--pb--20.sc-digi-progress-list-item{padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--pb--30.sc-digi-progress-list-item{padding-bottom:var(--digi--global--spacing--largest-2) !important}.digi--util--pb--40.sc-digi-progress-list-item{padding-bottom:var(--digi--global--spacing--largest-4) !important}.digi--util--pb--50.sc-digi-progress-list-item{padding-bottom:2.5rem !important}.digi--util--pb--60.sc-digi-progress-list-item{padding-bottom:var(--digi--global--spacing--largest-5) !important}.digi--util--pb--70.sc-digi-progress-list-item{padding-bottom:var(--digi--global--spacing--largest-6) !important}.digi--util--pb--80.sc-digi-progress-list-item{padding-bottom:4.5rem !important}.digi--util--pb--90.sc-digi-progress-list-item{padding-bottom:5rem !important}.digi--util--p--1.sc-digi-progress-list-item{padding:var(--digi--global--spacing--smallest-2) !important}.digi--util--p--10.sc-digi-progress-list-item{padding:var(--digi--global--spacing--smallest) !important}.digi--util--p--20.sc-digi-progress-list-item{padding:var(--digi--global--spacing--base) !important}.digi--util--p--30.sc-digi-progress-list-item{padding:var(--digi--global--spacing--largest-2) !important}.digi--util--p--40.sc-digi-progress-list-item{padding:var(--digi--global--spacing--largest-4) !important}.digi--util--p--50.sc-digi-progress-list-item{padding:2.5rem !important}.digi--util--p--60.sc-digi-progress-list-item{padding:var(--digi--global--spacing--largest-5) !important}.digi--util--p--70.sc-digi-progress-list-item{padding:var(--digi--global--spacing--largest-6) !important}.digi--util--p--80.sc-digi-progress-list-item{padding:4.5rem !important}.digi--util--p--90.sc-digi-progress-list-item{padding:5rem !important}.digi--util--ptb--1.sc-digi-progress-list-item{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-list-item{padding-top:var(--digi--global--spacing--smallest) !important;padding-bottom:var(--digi--global--spacing--smallest) !important}.digi--util--ptb--20.sc-digi-progress-list-item{padding-top:var(--digi--global--spacing--base) !important;padding-bottom:var(--digi--global--spacing--base) !important}.digi--util--ptb--30.sc-digi-progress-list-item{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-list-item{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-list-item{padding-top:2.5rem !important;padding-bottom:2.5rem !important}.digi--util--ptb--60.sc-digi-progress-list-item{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-list-item{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-list-item{padding-top:4.5rem !important;padding-bottom:4.5rem !important}.digi--util--ptb--90.sc-digi-progress-list-item{padding-top:5rem !important;padding-bottom:5rem !important}.digi--util--plr--1.sc-digi-progress-list-item{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-list-item{padding-left:var(--digi--global--spacing--smallest) !important;padding-right:var(--digi--global--spacing--smallest) !important}.digi--util--plr--20.sc-digi-progress-list-item{padding-left:var(--digi--global--spacing--base) !important;padding-right:var(--digi--global--spacing--base) !important}.digi--util--plr--30.sc-digi-progress-list-item{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-list-item{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-list-item{padding-left:2.5rem !important;padding-right:2.5rem !important}.digi--util--plr--60.sc-digi-progress-list-item{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-list-item{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-list-item{padding-left:4.5rem !important;padding-right:4.5rem !important}.digi--util--plr--90.sc-digi-progress-list-item{padding-left:5rem !important;padding-right:5rem !important}.digi--util--sr-only.sc-digi-progress-list-item{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-list-item{display:none}.sc-digi-progress-list-item-h{--digi--progress-list-item--indicator--color--primary:var(--digi--color--background--success-1);--digi--progress-list-item--indicator--color--secondary:var(--digi--color--icons--secondary);--digi--progress-list-item--indicator--color--tertiary:var(--digi--color--border--neutral-5);--digi--progress-list-item--heading--font-size:var(--digi--typography--heading-2--font-size--desktop);--digi--progress-list-item--heading--font-weight:var(--digi--typography--heading-3--font-weight--desktop);--digi--process-list-item--indicator--border--width:var(--digi--border-width--secondary);--digi-process-list-item--toggle--padding:0 var(--digi--padding--medium);--digi--progress-list-item---icon--size:0.875rem;--digi--progress-list-item--header--toggle-icon--transition:ease-in-out var(--digi--animation--duration--base) all}.sc-digi-progress-list-item-h .digi-progress-list-item.sc-digi-progress-list-item{--INDICATOR--LINE--COLOR:var(\n    --digi--progress-list-item--indicator--color--tertiary\n  );display:flex;flex-direction:row;font-family:var(--digi--global--typography--font-family--default);gap:var(--digi--padding--largest)}@media screen and (max-width: 36rem){.sc-digi-progress-list-item-h .digi-progress-list-item.sc-digi-progress-list-item{gap:1rem}}.sc-digi-progress-list-item-h .digi-progress-list-item--primary.sc-digi-progress-list-item{--INDICATOR--CIRCLE--COLOR:var(\n    --digi--progress-list-item--indicator--color--primary\n  )}.sc-digi-progress-list-item-h .digi-progress-list-item--secondary.sc-digi-progress-list-item{--INDICATOR--CIRCLE--COLOR:var(\n    --digi--progress-list-item--indicator--color--secondary\n  )}.sc-digi-progress-list-item-h .digi-progress-list-item--tertiary.sc-digi-progress-list-item{--INDICATOR--CIRCLE--COLOR:var(\n    --digi--progress-list-item--indicator--color--tertiary\n  )}.sc-digi-progress-list-item-h .digi-progress-list-item--done.sc-digi-progress-list-item{--INDICATOR--LINE--COLOR:var(--INDICATOR--CIRCLE--COLOR)}.sc-digi-progress-list-item-h .digi-progress-list-item--done.sc-digi-progress-list-item .digi-progress-list-item__indicator--icon.sc-digi-progress-list-item{background:var(--INDICATOR--CIRCLE--COLOR)}.sc-digi-progress-list-item-h .digi-progress-list-item--done.sc-digi-progress-list-item .digi-progress-list-item__indicator--icon--digi.sc-digi-progress-list-item{max-height:15px;max-width:15px;min-height:1.6em}.sc-digi-progress-list-item-h .digi-progress-list-item--done.sc-digi-progress-list-item .digi-progress-list-item__indicator--circle.sc-digi-progress-list-item{background-color:var(--INDICATOR--CIRCLE--COLOR)}.sc-digi-progress-list-item-h .digi-progress-list-item--done.sc-digi-progress-list-item .digi-progress-list-item__indicator--line.sc-digi-progress-list-item{border-left:var(--digi--process-list-item--indicator--border--width) solid var(--INDICATOR--LINE--COLOR)}.sc-digi-progress-list-item-h .digi-progress-list-item--current.sc-digi-progress-list-item .digi-progress-list-item__indicator--icon.sc-digi-progress-list-item{background:var(--INDICATOR--CIRCLE--COLOR);height:32px;width:32px}.sc-digi-progress-list-item-h .digi-progress-list-item--current.sc-digi-progress-list-item .digi-progress-list-item__indicator--icon--digi.sc-digi-progress-list-item{min-height:2em}.sc-digi-progress-list-item-h .digi-progress-list-item--current.sc-digi-progress-list-item .digi-progress-list-item__indicator--circle.sc-digi-progress-list-item{background-color:var(--INDICATOR--CIRCLE--COLOR);box-shadow:inset 0 0 0 4px var(--INDICATOR--CIRCLE--COLOR), inset 0 0 0 7px #fff;height:32px;width:100%}.sc-digi-progress-list-item-h .digi-progress-list-item--current.sc-digi-progress-list-item .digi-progress-list-item__indicator--line.sc-digi-progress-list-item{border-left:var(--digi--process-list-item--indicator--border--width) dashed var(--INDICATOR--LINE--COLOR)}.sc-digi-progress-list-item-h .digi-progress-list-item--upcoming.sc-digi-progress-list-item{--INDICATOR--CIRCLE--COLOR:var(--INDICATOR--LINE--COLOR)}.sc-digi-progress-list-item-h .digi-progress-list-item--upcoming.sc-digi-progress-list-item .digi-progress-list-item__indicator--circle.sc-digi-progress-list-item,.sc-digi-progress-list-item-h .digi-progress-list-item--upcoming.sc-digi-progress-list-item .digi-progress-list-item__indicator--icon.sc-digi-progress-list-item{border:var(--digi--process-list-item--indicator--border--width) dashed var(--INDICATOR--LINE--COLOR);box-shadow:none;width:24px;height:24px}.sc-digi-progress-list-item-h .digi-progress-list-item--upcoming.sc-digi-progress-list-item .digi-progress-list-item__indicator--line.sc-digi-progress-list-item{border-left:var(--digi--process-list-item--indicator--border--width) dashed var(--INDICATOR--LINE--COLOR)}.sc-digi-progress-list-item-h .digi-progress-list-item__indicator.sc-digi-progress-list-item{align-items:center;display:flex;flex-basis:32px;flex-direction:column;flex-shrink:0;margin-left:2px;margin-top:3px;transform:translateY(2px)}.sc-digi-progress-list-item-h .digi-progress-list-item__indicator--icon.sc-digi-progress-list-item{height:26px;width:26px;border-radius:16px}.sc-digi-progress-list-item-h .digi-progress-list-item__indicator--icon--digi.sc-digi-progress-list-item{color:var(--digi--color--icons--inverted);--digi--icon--color:var(--digi--color--icons--inverted);margin:auto;max-height:18px;max-width:18px}.sc-digi-progress-list-item-h .digi-progress-list-item__indicator--circle.sc-digi-progress-list-item{border-radius:16px;box-shadow:inset 0 0 0 6px var(--INDICATOR--CIRCLE--COLOR);display:block;flex-shrink:0;height:26px;width:26px}.sc-digi-progress-list-item-h .digi-progress-list-item__indicator--line.sc-digi-progress-list-item{display:block;flex-grow:1;margin-bottom:4px;margin-top:6px;width:1px}.sc-digi-progress-list-item-h .digi-progress-list-item__wrapper.sc-digi-progress-list-item{border-bottom:var(--digi--border-width--primary) solid var(--digi--color--border--neutral-2);margin-bottom:var(--digi--padding--medium);max-width:var(--digi--paragraph-width--medium);padding-bottom:var(--digi--padding--medium);width:100%}.sc-digi-progress-list-item-h .digi-progress-list-item__wrapper--last.sc-digi-progress-list-item{border-bottom:none}.sc-digi-progress-list-item-h .digi-progress-list-item__header--heading.sc-digi-progress-list-item{display:flex;margin:0}.sc-digi-progress-list-item-h .digi-progress-list-item__header--heading--title.sc-digi-progress-list-item{color:var(--digi--color--text--primary);width:100%;font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--progress-list-item--heading--font-size);font-weight:var(--digi--progress-list-item--heading--font-weight)}.sc-digi-progress-list-item-h .digi-progress-list-item__header--heading--title--expandable.sc-digi-progress-list-item{cursor:pointer}.sc-digi-progress-list-item-h .digi-progress-list-item__header--heading--title--expandable.sc-digi-progress-list-item:hover,.sc-digi-progress-list-item-h .digi-progress-list-item__header--heading--title--expandable.sc-digi-progress-list-item:active{color:var(--digi--color--text--link);text-decoration:underline}.sc-digi-progress-list-item-h .digi-progress-list-item__header--button.sc-digi-progress-list-item{align-items:center;background-color:transparent;border-radius:0;border:none;color:var(--digi--color--text--link);cursor:pointer;display:flex;font-size:var(--digi--typography--body--font-size--desktop);justify-content:center;text-align:left;padding:0;width:100%}.sc-digi-progress-list-item-h .digi-progress-list-item__header--button.sc-digi-progress-list-item:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.sc-digi-progress-list-item-h .digi-progress-list-item__header--toggle.sc-digi-progress-list-item{align-items:center;display:flex;padding:var(--digi-process-list-item--toggle--padding)}.sc-digi-progress-list-item-h .digi-progress-list-item__header--toggle--expanded.sc-digi-progress-list-item .icon-slot.sc-digi-progress-list-item{transform:rotate(180deg)}.sc-digi-progress-list-item-h .digi-progress-list-item__header--toggle.sc-digi-progress-list-item .icon-slot.sc-digi-progress-list-item{transition:transform 0.25s;--digi--icon--color:var(--digi--color--text--link);--digi--icon--width:var(--digi--progress-list-item---icon--size);--digi--icon--height:var(--digi--progress-list-item---icon--size)}.sc-digi-progress-list-item-h .digi-progress-list-item__header--toggle--text.sc-digi-progress-list-item{padding-left:var(--digi--padding--smaller);text-wrap:none}@media screen and (max-width: 47.9375rem){.sc-digi-progress-list-item-h .digi-progress-list-item__header--toggle--text.sc-digi-progress-list-item{display:none}}.sc-digi-progress-list-item-h .digi-progress-list-item__content.sc-digi-progress-list-item{box-sizing:border-box;display:block}.sc-digi-progress-list-item-h .digi-progress-list-item__content.sc-digi-progress-list-item>div.sc-digi-progress-list-item{padding:var(--digi--gutter--largest-2);box-sizing:border-box;max-width:var(--digi--paragraph-width--medium)}@media screen and (max-width: 36rem){.sc-digi-progress-list-item-h .digi-progress-list-item__content.sc-digi-progress-list-item>div.sc-digi-progress-list-item{padding-left:0}}.sc-digi-progress-list-item-h .digi-progress-list-item__content--expandable.sc-digi-progress-list-item{margin-right:44px}.sc-digi-progress-list-item-h .digi-progress-list-item__content--hidden.sc-digi-progress-list-item{display:none}.sc-digi-progress-list-item-h .digi-progress-list-item--last.sc-digi-progress-list-item .digi-progress-list-item__indicator--line.sc-digi-progress-list-item{display:none}.visually-hidden.sc-digi-progress-list-item{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}";
+const DigiProgressListItemStyle0 = progressListItemCss;
+
+const ProgressListItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afOnClick = createEvent(this, "afOnClick", 7);
+        this.afHeading = undefined;
+        this.afHeadingLevel = ProgressListItemHeadingLevel.H2;
+        this.afStepStatus = ProgressListItemStatus.DONE;
+        this.afStepStatusAriaLabel = undefined;
+        this.afVariation = ProgressListItemVariation.PRIMARY;
+        this.afAriaLabel = undefined;
+        this.afType = ProgressListItemType.CIRCLE;
+        this.afExpandable = false;
+        this.afExpanded = false;
+        this.afExpandText = '';
+        this.afCollapseText = '';
+        this.afId = randomIdGenerator('digi-progress-list-item');
+        this.afIsLast = false;
+    }
+    renderExpandAndCollapseText() {
+        if (this.afExpandText.trim().length > 0) {
+            return (h("span", { class: "digi-progress-list-item__header--toggle--text" }, this.afExpanded ? this.afCollapseText : this.afExpandText));
+        }
+        return null;
+    }
+    renderHeading() {
+        if (this.afExpandable) {
+            return (h("button", { id: `${this.afId}-btn`, type: "button", class: "digi-progress-list-item__header--button", onClick: (e) => {
+                    e.preventDefault();
+                    this.afExpanded = !this.afExpanded;
+                    this.afOnClick.emit(e);
+                }, "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content` }, h("span", { class: "visually-hidden" }, this.afAriaLabel ? this.afAriaLabel : this.afHeading, this.getAriaLabelForStep()), h("span", { "aria-hidden": "true", class: {
+                    'digi-progress-list-item__header--heading--title': true,
+                    'digi-progress-list-item__header--heading--title--expandable': true
+                } }, this.afHeading), h("div", { class: {
+                    'digi-progress-list-item__header--toggle': true,
+                    'digi-progress-list-item__header--toggle--expanded': this.afExpanded
+                } }, h("span", { class: "icon-slot" }, h("slot", { name: "icon" }, h("digi-icon-chevron-down", null))), this.renderExpandAndCollapseText())));
+        }
+        return (h(Fragment, null, h("span", { class: "visually-hidden" }, this.afAriaLabel ? this.afAriaLabel : this.afHeading, this.getAriaLabelForStep()), h("span", { class: "digi-progress-list-item__header--heading--title", "aria-hidden": "true" }, this.afHeading)));
+    }
+    renderStatusIcon() {
+        if (this.afType === ProgressListItemType.ICON) {
+            if (this.afStepStatus === ProgressListItemStatus.CURRENT) {
+                return (h("digi-icon-arrow-right", { class: "digi-progress-list-item__indicator--icon--digi" }));
+            }
+            else if (this.afStepStatus == ProgressListItemStatus.DONE) {
+                return (h("digi-icon-check", { class: "digi-progress-list-item__indicator--icon--digi" }));
+            }
+        }
+        return null;
+    }
+    getAriaLabelForStep() {
+        const preText = ', ';
+        if (this.afStepStatusAriaLabel && this.afStepStatusAriaLabel.length > 0) {
+            return preText + this.afStepStatusAriaLabel;
+        }
+        switch (this.afStepStatus) {
+            case ProgressListItemStatus.DONE:
+                return preText + _t.progressList.progressListItemDone;
+            case ProgressListItemStatus.CURRENT:
+                return preText + _t.progressList.progressListItemCurrent;
+            case ProgressListItemStatus.UPCOMING:
+                return preText + _t.progressList.progressListItemUpcoming;
+            default:
+                return '';
+        }
+    }
+    render() {
+        const ariaCurrent = this.afStepStatus == ProgressListItemStatus.CURRENT ? 'step' : 'false';
+        return (h(Host, { key: 'b9595ee9489d2e147dd8847d2157f987f95ed97d', role: "listitem", "aria-current": ariaCurrent }, h("div", { key: '78773561ff6d151d37368b206a640faf0bf7e920', class: {
+                'digi-progress-list-item': true,
+                'digi-progress-list-item--expanded': this.afExpandable && this.afExpanded,
+                [`digi-progress-list-item--${this.afStepStatus}`]: true,
+                'digi-progress-list-item--last': this.afIsLast,
+                'digi-progress-list-item--primary': this.afVariation == ProgressListItemVariation.PRIMARY,
+                'digi-progress-list-item--secondary': this.afVariation == ProgressListItemVariation.SECONDARY,
+                'digi-progress-list-item--tertiary': this.afVariation == ProgressListItemVariation.TERTIARY
+            } }, h("span", { key: '61eb2a32133d400998710467f62d1a4a1de05cf2', class: "digi-progress-list-item__indicator" }, h("span", { key: '924bca43fb52c2cc70ae8ff575dd394a69dafd70', class: {
+                'digi-progress-list-item__indicator--circle': this.afType == ProgressListItemType.CIRCLE,
+                'digi-progress-list-item__indicator--icon': this.afType == ProgressListItemType.ICON
+            } }, this.renderStatusIcon()), h("span", { key: 'ba74ccd58e089fbfa77bf267d8285ee38026aa9c', class: "digi-progress-list-item__indicator--line" })), h("div", { key: 'e7304603146cb55a0a4e07a5509c628311ae5de8', class: {
+                'digi-progress-list-item__wrapper': true,
+                'digi-progress-list-item__wrapper--last': this.afIsLast
+            } }, h("div", { key: 'f1cda598dc3a224db406d464dca884d1ca776d21', class: "digi-progress-list-item__header" }, h(this.afHeadingLevel, { key: '51fd617dcdb847687889a82e2c412dc99a4b5450', class: "digi-progress-list-item__header--heading", id: `${this.afId}--heading` }, this.renderHeading())), h("div", { key: '2f5dc932fc732874c1ea9f248dac43439115f80c', class: {
+                'digi-progress-list-item__content': true,
+                'digi-progress-list-item__content--expandable': this.afExpandable,
+                'digi-progress-list-item__content--hidden': this.afExpandable && !this.afExpanded,
+                'digi-progress-list-item__content--visible': !this.afExpandable || (this.afExpandable && this.afExpanded)
+            }, id: `${this.afId}-content` }, h("div", { key: '296d60cd6c48ab6006eb413ad1e7835f85aa9cf6' }, h("slot", { key: '1a3e1af2a6f49148f92d71ecb8b103dc3e0407a9' })))))));
+    }
+    get hostElement() { return getElement(this); }
+};
+ProgressListItem.style = DigiProgressListItemStyle0;
+
+export { ProgressListItem as digi_progress_list_item };

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

@@ -0,0 +1,111 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-8e318bb2.js';
+import { P as ProgressListHeadingLevel, c as ProgressListVariation, b as ProgressListType, a as ProgressListStatus } from './progress-list-variation.enum-300bd89d.js';
+import { l as logger } from './logger.util-ede3c48a.js';
+
+const progressListCss = ".sc-digi-progress-list-h{--digi--progress-list--block--element--modifier--primary:var(--digi--brand--design-token);--digi--progress-list--block--element--modifier--secondary:var(--digi--brand--design-token);--digi--progress-list--block--element--modifier--tertiary:var(--digi--brand--design-token);--digi--progress-list--content--padding-top:var(--digi--padding--medium);--digi--progress-list--heading--font-size:var(--digi--typography--heading-1--font-size--desktop);--digi--progress-list--heading--font-weight:var(--digi--typography--heading-1--font-weight--desktop);--digi--progress-list--heading--margin-bottom:var(--digi--margin--largest)}.sc-digi-progress-list-h .digi-progress-list--primary.sc-digi-progress-list{--MY-PROP:var(--digi--progress-list--block--element--modifier--primary)}.sc-digi-progress-list-h .digi-progress-list--secondary.sc-digi-progress-list{--MY-PROP:var(--digi--progress-list--block--element--modifier--secondary)}.sc-digi-progress-list-h .digi-progress-list--tertiary.sc-digi-progress-list{--MY-PROP:var(--digi--progress-list--block--element--modifier--tertiary)}.sc-digi-progress-list-h .digi-progress-list__header.sc-digi-progress-list{font-size:var(--digi--progress-list--heading--font-size);font-weight:var(--digi--progress-list--heading--font-weight);margin-bottom:var(--digi--progress-list--heading--margin-bottom)}.sc-digi-progress-list-h .digi-progress-list__content.sc-digi-progress-list{margin-top:0;padding-left:0;padding-bottom:0;padding-top:var(--digi--progress-list--content--padding-top)}";
+const DigiProgressListStyle0 = progressListCss;
+
+const ProgressList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.afOnReady = createEvent(this, "afOnReady", 3);
+        this.afHeading = undefined;
+        this.afAriaLabel = undefined;
+        this.afHeadingLevel = ProgressListHeadingLevel.H2;
+        this.afVariation = ProgressListVariation.PRIMARY;
+        this.afType = ProgressListType.CIRCLE;
+        this.afExpandable = false;
+        this.afExpandText = '';
+        this.afCollapseText = '';
+        this.afCurrentStep = 1;
+        this.steps = [];
+    }
+    async afMNext() {
+        this.afCurrentStep += 1;
+    }
+    async afMPrevious() {
+        this.afCurrentStep -= 1;
+    }
+    componentWillLoad() {
+        this.getSteps();
+        this.setStepAndTypeProps();
+    }
+    componentWillUpdate() {
+        this.getSteps();
+        this.setStepAndTypeProps();
+    }
+    componentDidLoad() {
+        this.afOnReady.emit();
+    }
+    getSteps() {
+        const steps = this.hostElement.querySelectorAll('digi-progress-list-item');
+        if (!steps || steps.length <= 0) {
+            logger.warn(`The slot contains no children elements.`, this.hostElement);
+            return;
+        }
+        this.steps = [...Array.from(steps)].map((step) => {
+            return {
+                outerHTML: step.outerHTML,
+                ref: step
+            };
+        });
+    }
+    setStepAndTypeProps() {
+        if (this.steps && this.afCurrentStep < 1) {
+            logger.warn(`Current step is set to ${this.afCurrentStep} which is not allowed.`, this.hostElement);
+            this.afCurrentStep = 1;
+            return;
+        }
+        if (this.steps && this.afCurrentStep > this.steps.length + 1) {
+            logger.warn(`Current step is set to ${this.afCurrentStep} which is more than the amount of available steps (${this.steps.length}).`, this.hostElement);
+            this.afCurrentStep = this.steps.length + 1;
+            return;
+        }
+        this.steps &&
+            this.steps.forEach((step, index) => {
+                step.ref.afVariation = this.afVariation;
+                try {
+                    const topLevelN = Number.parseInt(this.afHeadingLevel.split('h')[1]) + 1;
+                    const topLevel = Math.max(Math.min(topLevelN, 6), 1);
+                    const afHeadingLevel = 'h' + topLevel;
+                    const isLast = index == this.steps.length - 1;
+                    step.ref.afIsLast = isLast;
+                    let status;
+                    if (index < this.afCurrentStep - 1) {
+                        status = ProgressListStatus.DONE;
+                    }
+                    else if (index == this.afCurrentStep - 1) {
+                        status = ProgressListStatus.CURRENT;
+                    }
+                    else {
+                        status = ProgressListStatus.UPCOMING;
+                    }
+                    step.ref.afStepStatus = status;
+                    step.ref.afType = this.afType;
+                    step.ref.afHeadingLevel = afHeadingLevel;
+                    // If expandable, check if expanded
+                    step.ref.afExpandable = this.afExpandable;
+                    step.ref.afExpanded = status === ProgressListStatus.CURRENT;
+                    step.ref.afExpandText = this.afExpandText;
+                    step.ref.afCollapseText = this.afCollapseText;
+                }
+                catch (e) {
+                    logger.warn(`Error in setStepAndTypeProps, `, e);
+                }
+            });
+    }
+    renderHeading() {
+        var _a;
+        if (((_a = this.afHeading) === null || _a === void 0 ? void 0 : _a.trim().length) > 1) {
+            return (h("div", null, h(this.afHeadingLevel, { class: "digi-progress-list__header", "aria-label": this.afAriaLabel }, this.afHeading)));
+        }
+        return null;
+    }
+    render() {
+        return (h("div", { key: '05fd0823dc3e8b0ea8792a5a2e7c6f1b787e186c', class: "digi-progress-list" }, h("digi-typography", { key: 'd77ec992e0e8a03031ac6994342bb92e6dd42a94' }, this.renderHeading(), h("ol", { key: '306131998162c15f5be9a508e39f239b997bd175', class: "digi-progress-list__content" }, h("slot", { key: '60c59f0f21a7738796efedd9a1d02ad6ddd0f9d2' })))));
+    }
+    get hostElement() { return getElement(this); }
+};
+ProgressList.style = DigiProgressListStyle0;
+
+export { ProgressList as digi_progress_list };