@designsystem-se/af 39.0.1-beta.dark-mode → 39.1.0-beta.2

package/dist/collection/components/_progress/progress-indicator/progress-indicator.js

@@ -12,24 +12,46 @@ import { ProgressIndicatorVariation } from "./progress-indicator-variation.enum"
  */
 export class ProgressIndicator {
     constructor() {
-        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;
+        /**
+         * Text emellan antal färdiga och totala antalet steg.
+         * Som standard används "av", men kan ändras för exempelvis annat språk.
+         * @en Separator text between current steps and total steps.
+         * Default is "av", but can be changed e.g. for different language.
+         */
         this.afStepsSeparator = _t.of;
+        /**
+         * Text som visar "Steg" innan det antalet steg visas
+         * Som standard används "Steg", men kan ändras för exempelvis annat språk.
+         * @en Text that shows "Steg" before the current step
+         * Default is "Steg", but can be changed e.g. for different language.
+         */
         this.afStepText = _t.step;
+        /**
+         * Beskrivande text om vad som kommer härnäst
+         * @en Descriptive text of what comes in the next step.
+         */
         this.afStepNextText = _t.progress.questions_next;
-        this.afStepHeading = undefined;
-        this.afStepNextLabel = undefined;
-        this.afValidationLabel = undefined;
+        /**
+         * Sätter attributet 'role'. Förvalt är 'status'.
+         * Använder du komponenten både före och efter ett formulär så
+         * ange bara den ena som 'status' för att undvika att skärmläsare läser upp texten två gånger
+         * @en Set role attribute. Defaults to 'status'.
+         * If you apply the progress-indicator both before and after a form,
+         * set only role 'status' on one of them to avoid screen readers to read the text twice
+         */
         this.afRole = ProgressIndicatorRole.STATUS;
+        /**
+         * Sätter variant. Kan vara 'primary' och 'secondary'.
+         * @en Set variation of progress-indicator. Can be 'primary' and 'secondary'.
+         */
         this.afVariation = ProgressIndicatorVariation.PRIMARY;
+        /**
+         * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
+         * @en Input id attribute. Defaults to random string.
+         */
         this.afId = randomIdGenerator('digi-progress-indicator');
     }
     componentWillLoad() {
@@ -51,26 +73,14 @@ export class ProgressIndicator {
     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');
-        }
+    getItems() {
+        const items = Array.from(this.hostElement.children).filter((el) => el.tagName.toLowerCase() === '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
-                };
-            });
+            this.listItems = items.map((element) => ({
+                text: element.textContent,
+                checked: element.matches('.completed')
+            }));
         }
     }
     /**
@@ -95,9 +105,9 @@ export class ProgressIndicator {
         return;
     }
     render() {
-        return (h("div", { key: 'fdad0002fd35380021d269316ee56870b952ae3c', class: this.cssModifiers, role: this.afRole === ProgressIndicatorRole.STATUS
+        return (h("div", { key: '89c3335f49172aad9a2956f0fb6100d72b586003', class: this.cssModifiers, role: this.afRole === ProgressIndicatorRole.STATUS
                 ? ProgressIndicatorRole.STATUS
-                : null }, h("div", { key: '82e57ba4d93bcdf18f15b136f3dcf8248264fc66' }, this.afStepNextLabel !== undefined ? (h("div", { class: "digi-progress-indicator__content" }, this.renderHeading(), this.afCompletedSteps != this.afTotalSteps && (h("p", { class: "digi-progress-indicator__next", style: {
+                : null }, h("div", { key: 'dae75a8ca4a194dc80e48084ac16e14059f38399' }, 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'
@@ -123,7 +133,7 @@ export class ProgressIndicator {
                 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: 'c4e951347ed2edcf3440e390295a1967e2d53a16', class: "digi-progress-indicator__label" }, h("span", { key: '325da063eeda88971ed43cbdcf04d62559fe587d' }, `${this.afStepText}`, " "), h("span", { key: '9535eed956ed1a21d005e10c6b850692e32682e3', class: "digi-progress-indicator__label--steps" }, `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}`)))), this.afValidationLabel && this.afWarningStep > 0 && (h("p", { key: 'b9be1eb5c5715ef22f1ba77de9dad30289441095', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--warning" }, h("digi-icon-validation-warning", { key: 'ab22017d7be88e193d012f3c3f28426eb04a9404', class: "digi-progress-indicator__icon--warning" }), h("span", { key: '4d43a998a0f65cbf61d60073f8ad77eb6a57cd6f' }, this.afValidationLabel))), this.afValidationLabel && this.afErrorStep > 0 && (h("p", { key: '0203ec04e6cf851dfbf04e660e0fe960905eef76', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--error" }, h("digi-icon-validation-error", { key: '70f2bd5c873f7b16067ce16dd61f6e10bee389b2', class: "digi-progress-indicator__icon--error" }), h("span", { key: 'b57326edd0159d1e98152028cb467e27e87336ba' }, this.afValidationLabel))), h("div", { key: '7596bea1a02384b0fb93f9e17f739c550b1405b3', hidden: true, class: "digi-progress-indicator__slot" }, h("digi-util-mutation-observer", { key: 'e2c31d5ff52182885984049bf9fae41605f6b30f', ref: (el) => (this._observer = el), onAfOnChange: () => this.getItems() }, h("slot", { key: '8c0b79d330dffb1f8f1e1f56ecf1ae73b6c82777' })))));
+        }))), this.afStepNextLabel !== undefined && (h("p", { key: 'dc7fced6e51f6b040a7d6a9fdca31c0b2187d96c', class: "digi-progress-indicator__label" }, h("span", { key: '6ac7ecd3d3df7433e543a1cf0c660d62d073bf9e' }, `${this.afStepText}`, " "), h("span", { key: 'e3abea99af8854628398c910462804bb602b85f0', class: "digi-progress-indicator__label--steps" }, `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}`)))), this.afValidationLabel && this.afWarningStep > 0 && (h("p", { key: '9308a5eee6e2434eb8dfd542adb92d643dd470f8', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--warning" }, h("digi-icon-validation-warning", { key: 'fdaecc2e7db757d3a2fa270a1a78e5d28ea6c286', class: "digi-progress-indicator__icon--warning" }), h("span", { key: 'acb27f33072c8179b43bf8c7c5f84b30536d41f6' }, this.afValidationLabel))), this.afValidationLabel && this.afErrorStep > 0 && (h("p", { key: '1fa66d6d3663a492567721976c1d24c22995978d', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--error" }, h("digi-icon-validation-error", { key: '7b1072f4c4a2b3502bd2d8221776f1198292bf39', class: "digi-progress-indicator__icon--error" }), h("span", { key: '5c0ab23a2d67e462610f6fcfaab3531ad640ac72' }, this.afValidationLabel))), h("div", { key: '58c15ac9e8cc694da99b047abac2454e5f33b7b4', hidden: true, class: "digi-progress-indicator__slot" }, h("slot", { key: 'd85455a3535ea5bfb4e6b65e06b0dc040b38eecc', onSlotchange: () => this.getItems() }))));
     }
     static get is() { return "digi-progress-indicator"; }
     static get encapsulation() { return "scoped"; }
@@ -155,8 +165,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "radius",
                 "reflect": false,
+                "attribute": "radius",
                 "defaultValue": "42"
             },
             "stroke": {
@@ -175,8 +185,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "stroke",
                 "reflect": false,
+                "attribute": "stroke",
                 "defaultValue": "6"
             },
             "afCompletedSteps": {
@@ -198,8 +208,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-completed-steps",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-completed-steps"
             },
             "afWarningStep": {
                 "type": "number",
@@ -220,8 +230,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-warning-step",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-warning-step"
             },
             "afErrorStep": {
                 "type": "number",
@@ -242,8 +252,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-error-step",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-error-step"
             },
             "afTotalSteps": {
                 "type": "number",
@@ -264,8 +274,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-total-steps",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-total-steps"
             },
             "afStepsSeparator": {
                 "type": "string",
@@ -286,8 +296,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-steps-separator",
                 "reflect": false,
+                "attribute": "af-steps-separator",
                 "defaultValue": "_t.of"
             },
             "afStepText": {
@@ -309,8 +319,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-step-text",
                 "reflect": false,
+                "attribute": "af-step-text",
                 "defaultValue": "_t.step"
             },
             "afStepNextText": {
@@ -332,8 +342,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-step-next-text",
                 "reflect": false,
+                "attribute": "af-step-next-text",
                 "defaultValue": "_t.progress.questions_next"
             },
             "afStepHeading": {
@@ -355,8 +365,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-step-heading",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-step-heading"
             },
             "afStepNextLabel": {
                 "type": "string",
@@ -377,8 +387,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-step-next-label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-step-next-label"
             },
             "afValidationLabel": {
                 "type": "string",
@@ -399,8 +409,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-validation-label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-validation-label"
             },
             "afRole": {
                 "type": "string",
@@ -412,7 +422,8 @@ export class ProgressIndicator {
                         "ProgressIndicatorRole": {
                             "location": "import",
                             "path": "./progress-indicator-role.enum",
-                            "id": "src/components/_progress/progress-indicator/progress-indicator-role.enum.ts::ProgressIndicatorRole"
+                            "id": "src/components/_progress/progress-indicator/progress-indicator-role.enum.ts::ProgressIndicatorRole",
+                            "referenceLocation": "ProgressIndicatorRole"
                         }
                     }
                 },
@@ -427,8 +438,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-role",
                 "reflect": false,
+                "attribute": "af-role",
                 "defaultValue": "ProgressIndicatorRole.STATUS"
             },
             "afVariation": {
@@ -441,7 +452,8 @@ export class ProgressIndicator {
                         "ProgressIndicatorVariation": {
                             "location": "import",
                             "path": "./progress-indicator-variation.enum",
-                            "id": "src/components/_progress/progress-indicator/progress-indicator-variation.enum.ts::ProgressIndicatorVariation"
+                            "id": "src/components/_progress/progress-indicator/progress-indicator-variation.enum.ts::ProgressIndicatorVariation",
+                            "referenceLocation": "ProgressIndicatorVariation"
                         }
                     }
                 },
@@ -456,8 +468,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-variation",
                 "reflect": false,
+                "attribute": "af-variation",
                 "defaultValue": "ProgressIndicatorVariation.PRIMARY"
             },
             "afId": {
@@ -479,8 +491,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-id",
                 "reflect": false,
+                "attribute": "af-id",
                 "defaultValue": "randomIdGenerator('digi-progress-indicator')"
             }
         };

package/dist/collection/components/_progress/progress-list/progress-list.js

@@ -13,14 +13,44 @@ import { logger } from "../../../global/utils/logger";
  */
 export class ProgressList {
     constructor() {
-        this.afHeading = undefined;
-        this.afAriaLabel = undefined;
+        /**
+         * Sätter rubriknivå på varje förloppsteg. 'h2' är förvalt.
+         * @en Set heading level. Default is 'h2'
+         */
         this.afHeadingLevel = ProgressListHeadingLevel.H2;
+        /**
+         * Sätter variant. Kan vara 'Primary', 'Secondary' eller 'Tertiary'
+         * @en Set variation. Can be 'Primary', 'Secondary' or 'Tertiary'
+         */
         this.afVariation = ProgressListVariation.PRIMARY;
+        /**
+         * Sätter typ. Kan vara 'Circle' eller 'Icon'
+         * @en Set type. Can be 'Circle' or 'Icon'
+         */
         this.afType = ProgressListType.CIRCLE;
+        /**
+         * Sätter läge på Rubriken om den ska vara expanderad eller ej. Förvalt är false.
+         * @en Sets the state of the Header item to expanded or not. Default is false.
+         */
         this.afExpandable = false;
+        /**
+         * Sätter texten som visas på knappen som expanderar komponenten, t.ex: 'Visa mer'.
+         * Förvalt är endast ikon och detta fält är tomt.
+         * @en Sets the text displayed on the button that expands the component, eg. 'Show more'.
+         * Default is icon only and this field is empty.
+         */
         this.afExpandText = '';
+        /**
+         * Sätter texten som visas på knappen som minimerar komponenten, t.ex: 'Visa mindre'.
+         * Förvalt är endast ikon och detta fält är tomt.
+         * @en Sets the text displayed on the button that expands the component, eg: 'Show less'.
+         * Default is icon only and this field is empty.
+         */
         this.afCollapseText = '';
+        /**
+         * Sätter nuvarande steg
+         * @en Set current steps
+         */
         this.afCurrentStep = 1;
         this.steps = [];
     }
@@ -106,7 +136,7 @@ export class ProgressList {
         return null;
     }
     render() {
-        return (h("div", { key: '0db50446c5044f0cd9cb2dec3d5d0ba38ed084c9', class: "digi-progress-list" }, h("digi-typography", { key: '62ed9eb55a6d07c176fc563b3446ca9451a6e40d' }, this.renderHeading(), h("ol", { key: '641f26a87b06196d6f08769be3a6e6bd6a530fa1', class: "digi-progress-list__content" }, h("slot", { key: 'f41cb5b7a6172ea48641c2c176b1b487e5ccc57b' })))));
+        return (h("div", { key: '406686fee46095e3dfded5708663645520cbe6b6', class: "digi-progress-list" }, h("digi-typography", { key: 'c7bccebe73101cebb67e63bc3a395956826e1121' }, this.renderHeading(), h("ol", { key: 'e220571ae4caa2a88915f97fcf85316eed0f428c', class: "digi-progress-list__content" }, h("slot", { key: 'a0332f44b8f5cf00f5ac74d321e3bb18902f70fd' })))));
     }
     static get is() { return "digi-progress-list"; }
     static get encapsulation() { return "scoped"; }
@@ -141,8 +171,8 @@ export class ProgressList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-heading",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-heading"
             },
             "afAriaLabel": {
                 "type": "string",
@@ -163,8 +193,8 @@ export class ProgressList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-aria-label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-aria-label"
             },
             "afHeadingLevel": {
                 "type": "string",
@@ -176,7 +206,8 @@ export class ProgressList {
                         "ProgressListHeadingLevel": {
                             "location": "import",
                             "path": "./progress-list-heading-level.enum",
-                            "id": "src/components/_progress/progress-list/progress-list-heading-level.enum.ts::ProgressListHeadingLevel"
+                            "id": "src/components/_progress/progress-list/progress-list-heading-level.enum.ts::ProgressListHeadingLevel",
+                            "referenceLocation": "ProgressListHeadingLevel"
                         }
                     }
                 },
@@ -191,8 +222,8 @@ export class ProgressList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-heading-level",
                 "reflect": false,
+                "attribute": "af-heading-level",
                 "defaultValue": "ProgressListHeadingLevel.H2"
             },
             "afVariation": {
@@ -205,7 +236,8 @@ export class ProgressList {
                         "ProgressListVariation": {
                             "location": "import",
                             "path": "./progress-list-variation.enum",
-                            "id": "src/components/_progress/progress-list/progress-list-variation.enum.ts::ProgressListVariation"
+                            "id": "src/components/_progress/progress-list/progress-list-variation.enum.ts::ProgressListVariation",
+                            "referenceLocation": "ProgressListVariation"
                         }
                     }
                 },
@@ -220,8 +252,8 @@ export class ProgressList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-variation",
                 "reflect": false,
+                "attribute": "af-variation",
                 "defaultValue": "ProgressListVariation.PRIMARY"
             },
             "afType": {
@@ -234,7 +266,8 @@ export class ProgressList {
                         "ProgressListType": {
                             "location": "import",
                             "path": "./progress-list-type.enum",
-                            "id": "src/components/_progress/progress-list/progress-list-type.enum.ts::ProgressListType"
+                            "id": "src/components/_progress/progress-list/progress-list-type.enum.ts::ProgressListType",
+                            "referenceLocation": "ProgressListType"
                         }
                     }
                 },
@@ -249,8 +282,8 @@ export class ProgressList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-type",
                 "reflect": false,
+                "attribute": "af-type",
                 "defaultValue": "ProgressListType.CIRCLE"
             },
             "afExpandable": {
@@ -272,8 +305,8 @@ export class ProgressList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-expandable",
                 "reflect": false,
+                "attribute": "af-expandable",
                 "defaultValue": "false"
             },
             "afExpandText": {
@@ -295,8 +328,8 @@ export class ProgressList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-expand-text",
                 "reflect": false,
+                "attribute": "af-expand-text",
                 "defaultValue": "''"
             },
             "afCollapseText": {
@@ -318,8 +351,8 @@ export class ProgressList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-collapse-text",
                 "reflect": false,
+                "attribute": "af-collapse-text",
                 "defaultValue": "''"
             },
             "afCurrentStep": {
@@ -341,8 +374,8 @@ export class ProgressList {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-current-step",
                 "reflect": false,
+                "attribute": "af-current-step",
                 "defaultValue": "1"
             }
         };

package/dist/collection/components/_progress/progress-list-item/progress-list-item.css

@@ -61,7 +61,7 @@ License: none (public domain)
 }
 :host .digi-progress-list-item--current:host .digi-progress-list-item__indicator--circle {
   background-color: var(--INDICATOR--CIRCLE--COLOR);
-  box-shadow: inset 0 0 0 4px var(--INDICATOR--CIRCLE--COLOR), inset 0 0 0 7px var(--digi--color--marking--indication--marker);
+  box-shadow: inset 0 0 0 4px var(--INDICATOR--CIRCLE--COLOR), inset 0 0 0 7px #fff;
   height: 32px;
   width: 100%;
 }
@@ -97,7 +97,7 @@ License: none (public domain)
 }
 :host .digi-progress-list-item__indicator--icon--digi {
   color: var(--digi--color--text--secondary);
-  --digi--icon--color: var(--digi--color--marking--indication--marker);
+  --digi--icon--color: var(--digi--color--icon--secondary);
   margin: auto;
   max-height: 18px;
   max-width: 18px;