@designsystem-se/af 39.2.1-beta.0 → 39.2.1-beta.2

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

@@ -14,25 +14,51 @@ import { ProgressIndicatorHeadingLevel } from "./progress-indicator-heading-leve
  */
 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;
+        /**
+           * Sätter rubriknivå. 'h2' är förvalt.
+           * @en Set heading level. Default is 'h2'
+           */
         this.afHeadingLevel = ProgressIndicatorHeadingLevel.H2;
-        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() {
@@ -54,26 +80,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')
+            }));
         }
     }
     /**
@@ -98,9 +112,9 @@ export class ProgressIndicator {
         return;
     }
     render() {
-        return (h("div", { key: '8385a3ed1df5a8400cfc02838b5a965ca059ffbe', class: this.cssModifiers, role: this.afRole === ProgressIndicatorRole.STATUS
+        return (h("div", { key: 'd032309f57998652caeffbc5ef1d0c38cf3ce0de', class: this.cssModifiers, role: this.afRole === ProgressIndicatorRole.STATUS
                 ? ProgressIndicatorRole.STATUS
-                : null }, h("div", { key: '29948dc0fa9a11a4a2003b7d3ba0a98fa13016b1' }, 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: '2c0e1cf296778b38d428f2a1aea5285d4b9044ec' }, 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'
@@ -126,7 +140,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: '9b0455af95c8ce148ce31b4dfcbe3a097e73b129', class: "digi-progress-indicator__label" }, h("span", { key: 'ffc294d61bf8484631b362ec0d70b581acceefbf' }, `${this.afStepText}`, " "), h("span", { key: '28fc53ae38358cd87ca47c70c2dc8e819f9614e2', class: "digi-progress-indicator__label--steps" }, `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}`)))), this.afValidationLabel && this.afWarningStep > 0 && (h("p", { key: '907ffeb86230e735a72b61bd2b426e93093e5edd', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--warning" }, h("digi-icon-validation-warning", { key: '36c9dad23a82b00023a25e52b6a93289d5e351b5', class: "digi-progress-indicator__icon--warning" }), h("span", { key: 'c6a092eddbe03304062de96eb14cc8e9ee8f35f1' }, this.afValidationLabel))), this.afValidationLabel && this.afErrorStep > 0 && (h("p", { key: 'ce0195f2383b9d79699e35dc4d1e09aa34ac4fc2', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--error" }, h("digi-icon-validation-error", { key: '6d35214f667d68e281495ac2f1817fbc561e5532', class: "digi-progress-indicator__icon--error" }), h("span", { key: '9443b83ca4e2233d0f90d053f2fa2f8f1154829e' }, this.afValidationLabel))), h("div", { key: '8b4ee78d5a9295a75edb08ccdc7864688328e5fc', hidden: true, class: "digi-progress-indicator__slot" }, h("digi-util-mutation-observer", { key: '9acf7cdd34d1f86a0e608ca5c07cbe3743ec8682', ref: (el) => (this._observer = el), onAfOnChange: () => this.getItems() }, h("slot", { key: 'ff9d1eb77ccc33bde20204d9249d8b0c00577642' })))));
+        }))), this.afStepNextLabel !== undefined && (h("p", { key: '0ac81a14818e7cbb57dbc97589a813f505d6eee8', class: "digi-progress-indicator__label" }, h("span", { key: 'c61c922cad41ce499aa97bce0027a861bf6ef375' }, `${this.afStepText}`, " "), h("span", { key: '0f89271d32b4f8a6c8e642a78bbbfd58cb3bfe5b', class: "digi-progress-indicator__label--steps" }, `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}`)))), this.afValidationLabel && this.afWarningStep > 0 && (h("p", { key: '8539daf86548eb1299d652e2fc3e2c5186d19532', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--warning" }, h("digi-icon-validation-warning", { key: '75ace03973584d8d2b58de658f9f99a189316c30', class: "digi-progress-indicator__icon--warning" }), h("span", { key: 'b925a81b4678df6bb3d6b39c3b3dc322fa906b46' }, this.afValidationLabel))), this.afValidationLabel && this.afErrorStep > 0 && (h("p", { key: 'a455c8322599a790df8a139626185bfab0f0a01b', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--error" }, h("digi-icon-validation-error", { key: '73b68f3ff02a40888f93e2b5a756bfe1116a574e', class: "digi-progress-indicator__icon--error" }), h("span", { key: '6b530ad929a828189a30fc8762e4a8a7e6c1d1ec' }, this.afValidationLabel))), h("div", { key: 'a07e9d9a9901da7d0eba5b58913aef0235497a8f', hidden: true, class: "digi-progress-indicator__slot" }, h("slot", { key: '9793f43a344e35d168b6c118897de371ce06ba6f', onSlotchange: () => this.getItems() }))));
     }
     static get is() { return "digi-progress-indicator"; }
     static get encapsulation() { return "scoped"; }
@@ -158,8 +172,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "radius",
                 "reflect": false,
+                "attribute": "radius",
                 "defaultValue": "42"
             },
             "stroke": {
@@ -178,8 +192,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "stroke",
                 "reflect": false,
+                "attribute": "stroke",
                 "defaultValue": "6"
             },
             "afCompletedSteps": {
@@ -201,8 +215,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-completed-steps",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-completed-steps"
             },
             "afWarningStep": {
                 "type": "number",
@@ -223,8 +237,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-warning-step",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-warning-step"
             },
             "afErrorStep": {
                 "type": "number",
@@ -245,8 +259,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-error-step",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-error-step"
             },
             "afTotalSteps": {
                 "type": "number",
@@ -267,8 +281,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-total-steps",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-total-steps"
             },
             "afStepsSeparator": {
                 "type": "string",
@@ -289,8 +303,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-steps-separator",
                 "reflect": false,
+                "attribute": "af-steps-separator",
                 "defaultValue": "_t.of"
             },
             "afStepText": {
@@ -312,8 +326,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-step-text",
                 "reflect": false,
+                "attribute": "af-step-text",
                 "defaultValue": "_t.step"
             },
             "afStepNextText": {
@@ -335,8 +349,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": {
@@ -358,8 +372,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-step-heading",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-step-heading"
             },
             "afHeadingLevel": {
                 "type": "string",
@@ -371,7 +385,8 @@ export class ProgressIndicator {
                         "ProgressIndicatorHeadingLevel": {
                             "location": "import",
                             "path": "./progress-indicator-heading-level.enum",
-                            "id": "src/components/_progress/progress-indicator/progress-indicator-heading-level.enum.ts::ProgressIndicatorHeadingLevel"
+                            "id": "src/components/_progress/progress-indicator/progress-indicator-heading-level.enum.ts::ProgressIndicatorHeadingLevel",
+                            "referenceLocation": "ProgressIndicatorHeadingLevel"
                         }
                     }
                 },
@@ -386,8 +401,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-heading-level",
                 "reflect": false,
+                "attribute": "af-heading-level",
                 "defaultValue": "ProgressIndicatorHeadingLevel.H2"
             },
             "afStepNextLabel": {
@@ -409,8 +424,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",
@@ -431,8 +446,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-validation-label",
-                "reflect": false
+                "reflect": false,
+                "attribute": "af-validation-label"
             },
             "afRole": {
                 "type": "string",
@@ -444,7 +459,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"
                         }
                     }
                 },
@@ -459,8 +475,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-role",
                 "reflect": false,
+                "attribute": "af-role",
                 "defaultValue": "ProgressIndicatorRole.STATUS"
             },
             "afVariation": {
@@ -473,7 +489,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"
                         }
                     }
                 },
@@ -488,8 +505,8 @@ export class ProgressIndicator {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "af-variation",
                 "reflect": false,
+                "attribute": "af-variation",
                 "defaultValue": "ProgressIndicatorVariation.PRIMARY"
             },
             "afId": {
@@ -511,8 +528,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 #fff;
+  box-shadow: inset 0 0 0 4px var(--INDICATOR--CIRCLE--COLOR), inset 0 0 0 7px var(--digi--color--marking--indication--marker);
   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--icon--secondary);
+  --digi--icon--color: var(--digi--color--marking--indication--marker);
   margin: auto;
   max-height: 18px;
   max-width: 18px;