npm - @designsystem-se/af - Versions diffs - 32.3.1-beta.0 → 32.4.0 - Mend

@designsystem-se/af 32.3.1-beta.0 → 32.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (139) hide show

package/components/digi-chart-line.js CHANGED Viewed

@@ -2166,7 +2166,7 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
             .attr('font-family', 'sans-serif')
             .text((d) => d)
             .each((...[, i, nodelist]) => {
-            const thisWidth = nodelist[i].getComputedTextLength() + 30; // 15 pixel padding on each side
+            const thisWidth = nodelist[i].getComputedTextLength() + 5; // A little extra padding, text sizes seems to be a little small compared to real life
             textWidth.push(thisWidth);
             nodelist[i].remove();
         });
@@ -2175,16 +2175,18 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
     }
     // Goes through all tick values and checks the biggest in size, this one will decide the default tick-size
     setTickSize() {
+        // Padding on both sides comined
+        const textPadding = 25; // 12.5 pixel padding on each side
         if (this._chartData.data.xValueNames) {
             for (const elem of this._chartData.data.xValueNames) {
-                const size = this.getTextSize(elem);
+                const size = this.getTextSize(elem) + textPadding;
                 if (size > this._tickSize)
                     this._tickSize = size;
             }
         }
         else {
             for (const elem of this._chartData.data.xValues) {
-                const size = this.getTextSize(elem.toString());
+                const size = this.getTextSize(elem.toString()) + textPadding;
                 if (size > this._tickSize)
                     this._tickSize = size;
             }
@@ -2302,7 +2304,7 @@ const ChartLine = /*@__PURE__*/ proxyCustomElement(class ChartLine extends H {
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
         else
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
-        return (h("host", { key: 'f21b013a8b60400e177357d970b9bf06c9f3cf4e', ref: (el) => (this._host = el) }, h("div", { key: 'a2eb77c9af10a36c7e90297e706a75f5f876e307', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '617328a73c5773b51487ca89c4940f1f09ad67eb', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '53ab51dcf6678dfac487afeafa4df02308fb5e16', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '953029ce0933912c1cddadac92fcb5c568914b48', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'a8720c0331ee8171d1dc99184bd59d8e35108d5c', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '7098aef34252ce4bb986cc84e941ad089f66315d', slot: "icon" }), "Visa diagram"), h("div", { key: '9db08924008b91bb11a792250282f56f288de210', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: 'f3acb5aab0e706ac7888f5ea82751e7410a08443', class: "chartTooltip", id: this.afId }, h("div", { key: '9dba5fcd563591a8ee71a2078378857ff6ac2241', class: "tooltipBody" }), h("digi-icon-x", { key: 'b09afdfbac4100be8e3fb6c3daac2aecfd8c6fd4', class: "close" }), ' '), h("div", { key: 'a552c93544509354d578478b1883320c875895ed', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: 'bec7f0c712446eaeeeec8da293a9e40ed7607784', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '40474802d2acfafd937270da9c5523f330b6133c', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (h("host", { key: '23524b77e8aa2bb1cae912a08c4f35791074a769', ref: (el) => (this._host = el) }, h("div", { key: '75c7c1a8be55953b5547c5a3dd956027af73fbd1', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '76e755f765d16611ecf82c2980f660f28cb0239a', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '6665f4a0c7f9ea09b938bd690f1ad2f2838f0c9c', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '05aee665d9cd4d743c37cda816a3f5a3fe3128f5', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '9f42b7ac02cb3f45d5d2503a9e12836bd76ce862', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '43e9db95020bf3d24c68a24b269a179d70d8d056', slot: "icon" }), "Visa diagram"), h("div", { key: 'fc14ac6bf87466a5655dc5416bac08d0627a41ef', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: 'd65b4ea0b2a3a0abdc7a94e1cfb82e425ba50d2e', class: "chartTooltip", id: this.afId }, h("div", { key: '0ecff411dd746d6f21b53ae0d39729a55bedd957', class: "tooltipBody" }), h("digi-icon-x", { key: '9dd0ba013b81972e3e74b2e068b808f443ba7bf4', class: "close" }), ' '), h("div", { key: '371ba97658cd0e4f3a251bff860c45a43e9da9f1', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: 'b4f5e4c1bc605f857910ec423f9de0285ac27e88', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '6bcc5645b85e62d321a2c37cd365b2d36b577b9a', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     get element() { return this; }
     static get watchers() { return {

package/components/digi-context-menu.js CHANGED Viewed

@@ -105,7 +105,7 @@ const ContextMenu = /*@__PURE__*/ proxyCustomElement(class ContextMenu extends H
         }
     }
     render() {
-        return (h(Host, { key: 'b56dc8e0ca38fa90bf6ac4495b9fb583e00b75ed', id: `${this.afId}-identifier` }, h("digi-navigation-dropdown", { key: 'c196f5442e8c21397ea6a5cb284c6f7e96af15e1', afAriaLabelledby: `${this.afId}-trigger`, afItems: this.items, afVisible: this.visible, afMenuPosition: this.afMenuPosition, afDir: this.afDir, afActiveItem: this.activeItemIdx, afLang: this.afLang, onAfRef: (e) => this.handleRef(e.detail.ref, e.detail.id, e.detail.payload), onAfChangeItem: (e) => this.handleChangeItem(e.detail.item, e.detail.idx), onAfFocusItem: (e) => this.handleFocusItem(e.detail.item, e.detail.idx), afRenderItem: (item, idx) => {
+        return (h(Host, { key: 'b56dc8e0ca38fa90bf6ac4495b9fb583e00b75ed', id: `${this.afId}-identifier` }, h("digi-navigation-dropdown", { key: 'f4fe5c1f4812ae2ab492f5ff1159716cafceae68', afAriaLabelledby: `${this.afId}-trigger`, afId: this.afId, afItems: this.items, afVisible: this.visible, afMenuPosition: this.afMenuPosition, afDir: this.afDir, afActiveItem: this.activeItemIdx, afLang: this.afLang, onAfRef: (e) => this.handleRef(e.detail.ref, e.detail.id, e.detail.payload), onAfChangeItem: (e) => this.handleChangeItem(e.detail.item, e.detail.idx), onAfFocusItem: (e) => this.handleFocusItem(e.detail.item, e.detail.idx), afRenderItem: (item, idx) => {
                 const menuItem = this.items[idx];
                 const Container = menuItem.type === 'link' ? 'a' : 'div';
                 const containerArgs = menuItem.type === 'link'
@@ -117,10 +117,10 @@ const ContextMenu = /*@__PURE__*/ proxyCustomElement(class ContextMenu extends H
                             ? 'visible'
                             : 'hidden'
                     } })), h("p", null, item.title)));
-            } }, h("digi-button", { key: 'b8e22491a441218e7f2d47ff7a64acdbceb8291a', id: `${this.afId}-trigger`, afInputRef: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: this.afId, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: {
+            } }, h("digi-button", { key: '6ca8a9350d6a040713e1601c2df874c61883f964', id: `${this.afId}-trigger`, afInputRef: (ref) => (this.buttonRef = ref), onClick: () => this.handleToggle(), afVariation: "function", afAriaControls: `${this.afId}-listbox`, afAriaExpanded: this.visible, afAriaLabel: this.afAriaLabel || null, class: {
                 'digi-navigation-context-menu__trigger-button': true,
                 'digi-navigation-context-menu--active': this.visible
-            } }, !!this.afIcon && h(this.digiIcon, { key: '46475907cc2794c222199e447bd875f62899b956', slot: "icon" }), this.afTitle, h("digi-icon-chevron-down", { key: 'bc867a2cfa17c6fedc3651dac5d117df13415535', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })))));
+            } }, !!this.afIcon && h(this.digiIcon, { key: '23ac109788a00edb22f2a2847c2ab1568abba4c3', slot: "icon" }), this.afTitle, h("digi-icon-chevron-down", { key: 'fc7fa776933779e29da3e7fc64d010fa0c65261d', class: "digi-navigation-context-menu__toggle-icon", slot: "icon-secondary" })))));
     }
     static get watchers() { return {
         "afActiveItem": ["syncActiveItem"],

package/components/digi-progress-circle.js CHANGED Viewed

@@ -43,6 +43,10 @@ const ProgressCircle = /*@__PURE__*/ proxyCustomElement(class ProgressCircle ext
     changeCompletedStepsHandler(value) {
         this.completedSteps = value;
     }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva rubrik-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual heading element.
+     */
     focusOnHeading() {
         this.headingElement.focus();
     }
@@ -59,20 +63,20 @@ const ProgressCircle = /*@__PURE__*/ proxyCustomElement(class ProgressCircle ext
         return;
     }
     render() {
-        return (h("div", { key: '99b44a85b82e6a8ad45a8361a2942df70f85b2d4', class: this.cssModifiers, role: this.afRole === ProgressCircleRole.STATUS
+        return (h("div", { key: '2a876dbd3ce70edf20143d8cad63ef7fa03f16cc', class: this.cssModifiers, role: this.afRole === ProgressCircleRole.STATUS
                 ? ProgressCircleRole.STATUS
-                : null }, h("div", { key: 'b8a56de16fd355d1a6124e90e1fb50925798af1a', class: "digi-progress-circle__circle-wrapper" }, h("div", { key: '42aff20821e2a39e036ae6e0152e8364197cf80a', class: "digi-progress-circle__circle" }, h("p", { key: 'ca57e6b02ce3f4de6b18a45c2ff40ff92318e4e0', class: "digi-progress-circle__circle-label", "aria-label": `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}` }, this.afCompletedSteps, " ", this.afStepsSeparator, ' ', this.afTotalSteps, ' '), h("svg", { key: '00c80edf811f66e09f98244fd98bf36136eec3e7', width: this.radius * 2, height: this.radius * 2 }, h("defs", { key: 'e1af198e062d149f44aad1a48b123a2e2b462115' }, h("mask", { key: 'aac270d76145897b853a19033e49075355dbd842', id: this.afId }, h("circle", { key: 'bcd3c9035c26ab875e743fe7ff2a849015bbffed', 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: '34d76882ac77db38897cc87c113fd15e66270c31' }, h("circle", { key: '3faa9e6b428a47c944ab7c5a62837395fa834f53', 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: '27c3d8bd99cc46f421d1fcd0f96f4f0c60f79561', 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: 'a378becb2da253e4699d7e232ba3064c1819dc3a', 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: '63606706bd225d6cdfa79aef416cb4a8786be52b', 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: '658eb6718710b4d4a0542df6dfa0cb548cea6f49', class: "digi-progress-circle__content" }, this.renderHeading(), this.afCompletedSteps === this.afTotalSteps && (h("p", { key: '088e9ae3b8870aa33c820474c11a359a9b689332', class: "digi-progress-circle__next digi-progress-circle__next--circle", style: {
+                : null }, h("div", { key: '01de3a26258c2c5f01ac5c9b3490604a136ca9ef', class: "digi-progress-circle__circle-wrapper" }, h("div", { key: '4d71758d54585f2b9cebc3193651ce989c0a8212', class: "digi-progress-circle__circle" }, h("p", { key: '88689b7ae3ba17b1e274be28bbd22d9399bf696e', class: "digi-progress-circle__circle-label", "aria-label": `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}` }, this.afCompletedSteps, " ", this.afStepsSeparator, ' ', this.afTotalSteps, ' '), h("svg", { key: '497091cdfc0c12cd459885bcbd091ad56c5619f1', width: this.radius * 2, height: this.radius * 2 }, h("defs", { key: '2fdb96a48b659ae1e2ba6eb757ca765b7493af80' }, h("mask", { key: '8a843cab187c33a8b20554e4c8839cb84ae9570a', id: this.afId }, h("circle", { key: 'ea63c18aca6dd161355e7ca24a007d6b049c0cb0', 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: 'f5ee0f9c80e00e6e1d03be414f0eac31106eb9c3' }, h("circle", { key: 'adf2bb7f0fd8ad758e65731e2d6b4d6e8445733e', 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: '762c976f53361599831ff2f4a7db617b56dce265', 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: 'b50fa15eb6a4eda59a63db6abe7287471a1089c6', 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: 'e94afb0a727cd9c9ad613726d9ac0988d4ca0ed7', 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: 'b9275e2c8bfbaa5c5ccda781745fa15cfcc0956d', class: "digi-progress-circle__content" }, this.renderHeading(), this.afCompletedSteps === this.afTotalSteps && (h("p", { key: 'a65584ef893d7db55f7a534d7855861c81aef55d', class: "digi-progress-circle__next digi-progress-circle__next--circle", style: {
                 visibility: 'hidden'
-            } }, `${this.afStepNextText} ${this.afStepNextLabel}`)), this.afCompletedSteps != this.afTotalSteps && (h("p", { key: '22f2530e1f8a3aa8efdb4f06f86589c5791cbcf4', class: "digi-progress-circle__next digi-progress-circle__next--circle", style: {
+            } }, `${this.afStepNextText} ${this.afStepNextLabel}`)), this.afCompletedSteps != this.afTotalSteps && (h("p", { key: 'b3b98729dce8b5c6c38d11b4b26ad2aa784fa2c0', 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: '4ac2a6e3f8f07746190a8c3ea0c3d63e180ab78b', class: "digi-progress-circle__validation-label digi-progress-circle__validation-label--warning" }, h("digi-icon-validation-warning", { key: '450134e22a151a88bee999afa5e90039cd006d3d', class: "digi-progress-circle__icon--warning" }), h("span", { key: 'c073d0d4f646ded69c6bbe0fc5c5b1be98e8d894' }, this.afValidationLabel))), this.afValidationLabel && this.afErrorStep > 0 && (h("p", { key: '17639d528fb0259ea1cfc64a27f8d89a71142b61', class: "digi-progress-circle__validation-label digi-progress-circle__validation-label--error" }, h("digi-icon-validation-error", { key: '20a37e36adfeb6e6f8e4a2feee7cd5b8dbed47ed', class: "digi-progress-circle__icon--error" }), h("span", { key: 'b3df2d98a5719f1a1181582d63c931e7e4888819' }, this.afValidationLabel)))));
+            } }, `${this.afStepNextText} ${this.afStepNextLabel}`)))), this.afValidationLabel && this.afWarningStep > 0 && (h("p", { key: 'a9a1b1abdc516a0e42685c2b35c5d0f051f93f02', class: "digi-progress-circle__validation-label digi-progress-circle__validation-label--warning" }, h("digi-icon-validation-warning", { key: 'afbe0722e7efda065e9d581bcf6df81f2e83d693', class: "digi-progress-circle__icon--warning" }), h("span", { key: 'd8048bded3902c79a884894f33e620979ca48fd8' }, this.afValidationLabel))), this.afValidationLabel && this.afErrorStep > 0 && (h("p", { key: '141d8d6b766ef7212f4d881f641d8c357ae5693e', class: "digi-progress-circle__validation-label digi-progress-circle__validation-label--error" }, h("digi-icon-validation-error", { key: 'f5d86cadc17fb079e36fb8047d3ffd8004a46c39', class: "digi-progress-circle__icon--error" }), h("span", { key: '396d7ce06f27c74c700ac7d132c0018461ff2976' }, this.afValidationLabel)))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/digi-progress-indicator.js CHANGED Viewed

@@ -75,6 +75,10 @@ const ProgressIndicator = /*@__PURE__*/ proxyCustomElement(class ProgressIndicat
             });
         }
     }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva rubrik-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual heading element.
+     */
     focusOnHeading() {
         this.headingElement.focus();
     }
@@ -93,9 +97,9 @@ const ProgressIndicator = /*@__PURE__*/ proxyCustomElement(class ProgressIndicat
         return;
     }
     render() {
-        return (h("div", { key: '287cbf18a16c942fac231faf112bd6f566223415', class: this.cssModifiers, role: this.afRole === ProgressIndicatorRole.STATUS
+        return (h("div", { key: 'a8526805e4f6517a93cc3af35584440b8310a767', class: this.cssModifiers, role: this.afRole === ProgressIndicatorRole.STATUS
                 ? ProgressIndicatorRole.STATUS
-                : null }, h("div", { key: '4aeadba98f01be82e5f710f5c3cf4d14941ef4d5' }, 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: '1e26da010d00f9290380c66c3f317d5fe26c9283' }, 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'
@@ -121,7 +125,7 @@ const ProgressIndicator = /*@__PURE__*/ proxyCustomElement(class ProgressIndicat
                 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: 'b0b3f8b2c66c4162a14c0d006c66b8c3223bf89f', class: "digi-progress-indicator__label" }, h("span", { key: 'ddbe99366fd65c649a0a8776c30e0d524b3675e5' }, `${this.afStepText}`, " "), h("span", { key: '8e07174a7de9d049e284b0b54131615f1213af2c', class: "digi-progress-indicator__label--steps" }, `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}`)))), this.afValidationLabel && this.afWarningStep > 0 && (h("p", { key: 'e5dff1e3a81d6ba1f0da9257d6c78aff4c5c6e07', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--warning" }, h("digi-icon-validation-warning", { key: '0d42e557e15b1e6ba23082f0168aefb7380ea58d', class: "digi-progress-indicator__icon--warning" }), h("span", { key: '3471990a83522db0e24e9b08c8feef405a00b75e' }, this.afValidationLabel))), this.afValidationLabel && this.afErrorStep > 0 && (h("p", { key: 'c49a7ec3a760589080cbcf8bc1161b01be939aec', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--error" }, h("digi-icon-validation-error", { key: '5e03f34f8721a6e51ae801cab17f8fd2cb561746', class: "digi-progress-indicator__icon--error" }), h("span", { key: 'ab44ebbace52a015f1c59cfe2c33f1650a78ab4a' }, this.afValidationLabel))), h("div", { key: '5eee0a90be57aa07e883146da14b4abbfc5617f7', hidden: true, class: "digi-progress-indicator__slot" }, h("digi-util-mutation-observer", { key: 'f41e38917edf5f706890c2592feff4f11344d8ea', ref: (el) => (this._observer = el), onAfOnChange: () => this.getItems() }, h("slot", { key: '3a46d6cc6a7b03fcf8449e2e8d147545e0ffbc84' })))));
+        }))), this.afStepNextLabel !== undefined && (h("p", { key: 'de8a84871ac8cdbefab3b7801f9c3f5c795399cc', class: "digi-progress-indicator__label" }, h("span", { key: '7c8f034fe155dde4bf718f2583ae55a700a51e9f' }, `${this.afStepText}`, " "), h("span", { key: 'f7d06637612336040965b39becf0e94a176e6b06', class: "digi-progress-indicator__label--steps" }, `${this.afCompletedSteps} ${this.afStepsSeparator} ${this.afTotalSteps}`)))), this.afValidationLabel && this.afWarningStep > 0 && (h("p", { key: 'f49c03efec01348378d596858fd044900ee572ce', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--warning" }, h("digi-icon-validation-warning", { key: '3e0a9a459c934491caa6d061bd080b95058b16ca', class: "digi-progress-indicator__icon--warning" }), h("span", { key: '5cb27f90cf4f0e4f56c74010f7e67105866bb0b6' }, this.afValidationLabel))), this.afValidationLabel && this.afErrorStep > 0 && (h("p", { key: 'a2e8a24a82c5e7785864070bb0abb1fabfce2728', class: "digi-progress-indicator__validation-label digi-progress-indicator__validation-label--error" }, h("digi-icon-validation-error", { key: 'd0afdc657576d2ffbd471b844830daf1e8117083', class: "digi-progress-indicator__icon--error" }), h("span", { key: '98cc008b6c791403e99a1f31ac48f33e14a9f7d7' }, this.afValidationLabel))), h("div", { key: '150b5559c6c21bd0fac13b089ed14ff2d931faac', hidden: true, class: "digi-progress-indicator__slot" }, h("digi-util-mutation-observer", { key: '91c480a4de5e9dcbcbb3ae64707e8cb322edd033', ref: (el) => (this._observer = el), onAfOnChange: () => this.getItems() }, h("slot", { key: '43cc701796f46f9835a7f120449dd4971543c945' })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/digi-tag.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { _ as _t } from './p-42aa440f.js';
 import { d as defineCustomElement$3 } from './p-09e0586b.js';
 import { d as defineCustomElement$2 } from './p-36fbdb2e.js';
-const tagCss = ".sc-digi-tag-h{--digi--tag--display:inline-block;--digi--tag--margin-bottom:var(--digi--gutter--smaller)}.sc-digi-tag-h .digi-tag.sc-digi-tag{display:var(--digi--tag--display);margin-bottom:var(--digi--tag--margin-bottom)}";
+const tagCss = ".sc-digi-tag-h{--digi--tag--display:inline-block;--digi--tag--margin-bottom:var(--digi--gutter--smaller)}.sc-digi-tag-h .digi-tag.sc-digi-tag{display:var(--digi--tag--display);margin-bottom:var(--digi--tag--margin-bottom)}.sc-digi-tag-h .digi-tag__text.sc-digi-tag{display:inline-block;max-width:100%;white-space:normal}.sc-digi-tag-h .digi-tag__text--break.sc-digi-tag{overflow-wrap:anywhere;word-break:break-word;hyphens:auto}";
 const DigiTagStyle0 = tagCss;
 const Tag = /*@__PURE__*/ proxyCustomElement(class Tag extends H {
@@ -16,6 +16,7 @@ const Tag = /*@__PURE__*/ proxyCustomElement(class Tag extends H {
         this.afNoIcon = false;
         this.afAriaLabel = undefined;
         this.afSize = TagSize.SMALL;
+        this.afBreakWords = false;
     }
     clickHandler(e) {
         this.afOnClick.emit(e);
@@ -31,14 +32,15 @@ const Tag = /*@__PURE__*/ proxyCustomElement(class Tag extends H {
         return this.afText;
     }
     render() {
-        return (h("digi-button", { key: 'cd3122d6a6e72ecc037cf22b1d7df6f41aa29a78', onAfOnClick: (e) => this.clickHandler(e), "af-variation": "secondary", "af-size": this.afSize, class: "digi-tag", "af-aria-label": this.ariaLabel }, this.afText, !this.afNoIcon && h("digi-icon-x", { key: '4c6c28a3b449109f65b82238e1d5215630fd63e5', slot: "icon-secondary" })));
+        return (h("digi-button", { key: '6acab75a368cc887ae878b28e544bad8d4df7416', onAfOnClick: (e) => this.clickHandler(e), "af-variation": "secondary", "af-size": this.afSize, class: "digi-tag", "af-aria-label": this.ariaLabel }, this.afText, !this.afNoIcon && h("digi-icon-x", { key: '7fa654eef20bbc37cf17de94d85984aa4ce3e96e', slot: "icon-secondary" })));
     }
     static get style() { return DigiTagStyle0; }
 }, [2, "digi-tag", {
         "afText": [1, "af-text"],
         "afNoIcon": [4, "af-no-icon"],
         "afAriaLabel": [1, "af-aria-label"],
-        "afSize": [1, "af-size"]
+        "afSize": [1, "af-size"],
+        "afBreakWords": [4, "af-break-words"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/components/digi-tools-feedback-rating.js CHANGED Viewed

@@ -170,10 +170,10 @@ const ToolsFeedbackRating = /*@__PURE__*/ proxyCustomElement(class ToolsFeedback
     get content() {
         return (h("digi-typography", null, this.validContent && (h("div", { dir: this.afDir, lang: this.afLang, class: `digi-tools-feedback-rating__wrapper ${this.currentStep === 2 ? 'step2' : ''}` }, this.currentStep === 1 && (h("div", { class: "digi-tools-feedback-rating__star-rating" }, h(this.afHeadingLevel, { id: `${this.afId}-rating-question`, class: `digi-tools-feedback-rating__heading ${this.afType === FeedbackRatingType.MINIMAL ? 'hidden' : ''}` }, this.afQuestion), h("div", { class: "digi-tools-feedback-rating__step1-wrapper" }, this.afRatings && (h("span", { class: "digi-tools-feedback-rating__step1-description" }, "V\u00E4lj fr\u00E5n", ' ', `${(this.ratingsData().find((item) => item.value === 1) ||
             {}).text.toLowerCase() || null} till ${(this.ratingsData().find((item) => item.value === 5) ||
-            {}).text.toLowerCase() || null}`)), h("div", { "aria-labelledby": `${this.afId}-rating-question`, class: "digi-tools-feedback-rating__star-rating-stars", role: "group" }, this.ratingsData().map(({ text, value }) => (h("div", { class: "digi-tools-feedback-rating__star-rating-star" }, h("button", { class: "digi-tools-feedback-rating__star-rating-star-button", onClick: () => this.handleRatingChange(value), "aria-label": `${value} ${value === 1 ? 'stjärna' : 'stjärnor'}${text !== '' ? ', ' + text : ''}`, onMouseEnter: () => this.handleHover(value), onMouseLeave: () => this.handleHover(0), onFocus: () => this.handleHover(value), onFocusout: () => this.handleHover(0) }, h("svg", { "aria-hidden": "true", width: "29px", height: "29px", viewBox: "0 0 32 32", version: "1.1", xmlns: "http://www.w3.org/2000/svg", class: `digi-tools-feedback-rating-star-icon ${this.hoveredRating >= value ? 'filled' : ''}` }, h("g", { stroke: "none", "stroke-width": "1", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("g", { transform: "translate(-1852, -2564)", "stroke-width": "2", class: "digi-tools-feedback-rating-star-icon-border" }, h("g", { transform: "translate(1663, 2565)" }, h("g", { transform: "translate(190, 0)" }, h("path", { d: "M13.0369701,1.00988613 L9.47212213,8.51643297 L1.4958694,9.72422429 C0.0655277509,9.93973122 -0.507709524,11.7709448 0.529620648,12.8199039 L6.30005635,18.6595463 L4.93529305,26.9090563 C4.6897182,28.3999832 6.20191813,29.5170473 7.46854321,28.8195669 L14.6037422,24.9244875 L21.7391705,28.8195669 C23.0057956,29.5113322 24.5179955,28.3999832 24.2721914,26.9090563 L22.9074281,18.6595463 L28.6780931,12.8199039 C29.715194,11.7709448 29.1419567,9.93973122 27.711615,9.72422429 L19.7355916,8.51643297 L16.1707436,1.00988613 C15.531928,-0.328161856 13.6810595,-0.345069029 13.0369701,1.00988613 L13.0369701,1.00988613 Z", id: "Stroke-3" })))))))))))))), this.currentStep === 2 && (h("div", { class: "digi-tools-feedback-rating__thankyou" }, h("div", { class: "digi-tools-feedback-rating__thankyou-text" }, h("svg", { width: "32", height: "26", xmlns: "http://www.w3.org/2000/svg", class: "digi-tools-feedback-rating__thankyou-check-icon" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { d: "M12.431 25.438C5.577 25.438 0 19.848 0 12.978 0 6.107 5.577.518 12.43.518c2.874 0 5.677 1.006 7.893 2.833l-1.441 1.755a10.163 10.163 0 0 0-6.452-2.315c-5.604 0-10.163 4.57-10.163 10.187 0 5.616 4.56 10.186 10.163 10.186 4.346 0 8.21-2.766 9.617-6.883l2.146.737a12.435 12.435 0 0 1-11.763 8.42", fill: "#333" }), h("path", { d: "M13.073 20.935a.725.725 0 0 1-1.022 0l-8.042-8.013a.72.72 0 0 1 0-1.019l1.704-1.699a.725.725 0 0 1 1.023 0l5.826 5.805L28.417.211a.724.724 0 0 1 1.023 0l1.704 1.699a.72.72 0 0 1 0 1.02l-18.07 18.005Z", fill: "#95C13E" }))), h("h2", { class: "digi-tools-feedback-rating__thankyou-text", tabindex: "-1", ref: (el) => (this._thankYouHeading = el) }, this.afThankYouHeading)), this.afRatings && (h("p", { class: "digi-tools-feedback-rating__thankyou-text-with-rating" }, "Du har gett betyget \"", this.selectedText.toLowerCase(), "\" med", ' ', this.selectedRating, `${this.selectedRating === 1 ? ' stjärna' : ' stjärnor'}`, ".")))), this.currentStep === 2 && this.afLinkText && (h("div", { class: "digi-tools-feedback-rating__link" }, h("digi-link-external", { afHref: this.renderLink(), "af-target": "_blank", onAfOnClick: () => this.submitFeedbackLink(), "af-variation": "small" }, this.afLinkText)))))));
+            {}).text.toLowerCase() || null}`)), h("div", { "aria-labelledby": `${this.afId}-rating-question`, class: "digi-tools-feedback-rating__star-rating-stars", role: "group" }, this.ratingsData().map(({ text, value }) => (h("div", { class: "digi-tools-feedback-rating__star-rating-star" }, h("button", { class: "digi-tools-feedback-rating__star-rating-star-button", onClick: () => this.handleRatingChange(value), "aria-label": `${value} ${value === 1 ? 'stjärna' : 'stjärnor'}${text !== '' ? ', ' + text : ''}`, onMouseEnter: () => this.handleHover(value), onMouseLeave: () => this.handleHover(0), onFocus: () => this.handleHover(value), onFocusout: () => this.handleHover(0) }, h("svg", { "aria-hidden": "true", width: "29px", height: "29px", viewBox: "0 0 32 32", version: "1.1", xmlns: "http://www.w3.org/2000/svg", class: `digi-tools-feedback-rating-star-icon ${this.hoveredRating >= value ? 'filled' : ''}` }, h("g", { stroke: "none", "stroke-width": "1", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("g", { transform: "translate(-1852, -2564)", "stroke-width": "2", class: "digi-tools-feedback-rating-star-icon-border" }, h("g", { transform: "translate(1663, 2565)" }, h("g", { transform: "translate(190, 0)" }, h("path", { d: "M13.0369701,1.00988613 L9.47212213,8.51643297 L1.4958694,9.72422429 C0.0655277509,9.93973122 -0.507709524,11.7709448 0.529620648,12.8199039 L6.30005635,18.6595463 L4.93529305,26.9090563 C4.6897182,28.3999832 6.20191813,29.5170473 7.46854321,28.8195669 L14.6037422,24.9244875 L21.7391705,28.8195669 C23.0057956,29.5113322 24.5179955,28.3999832 24.2721914,26.9090563 L22.9074281,18.6595463 L28.6780931,12.8199039 C29.715194,11.7709448 29.1419567,9.93973122 27.711615,9.72422429 L19.7355916,8.51643297 L16.1707436,1.00988613 C15.531928,-0.328161856 13.6810595,-0.345069029 13.0369701,1.00988613 L13.0369701,1.00988613 Z" })))))))))))))), this.currentStep === 2 && (h("div", { class: "digi-tools-feedback-rating__thankyou" }, h("div", { class: "digi-tools-feedback-rating__thankyou-text" }, h("svg", { width: "32", height: "26", xmlns: "http://www.w3.org/2000/svg", class: "digi-tools-feedback-rating__thankyou-check-icon" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("path", { d: "M12.431 25.438C5.577 25.438 0 19.848 0 12.978 0 6.107 5.577.518 12.43.518c2.874 0 5.677 1.006 7.893 2.833l-1.441 1.755a10.163 10.163 0 0 0-6.452-2.315c-5.604 0-10.163 4.57-10.163 10.187 0 5.616 4.56 10.186 10.163 10.186 4.346 0 8.21-2.766 9.617-6.883l2.146.737a12.435 12.435 0 0 1-11.763 8.42", fill: "#333" }), h("path", { d: "M13.073 20.935a.725.725 0 0 1-1.022 0l-8.042-8.013a.72.72 0 0 1 0-1.019l1.704-1.699a.725.725 0 0 1 1.023 0l5.826 5.805L28.417.211a.724.724 0 0 1 1.023 0l1.704 1.699a.72.72 0 0 1 0 1.02l-18.07 18.005Z", fill: "#95C13E" }))), h("h2", { class: "digi-tools-feedback-rating__thankyou-text", tabindex: "-1", ref: (el) => (this._thankYouHeading = el) }, this.afThankYouHeading)), this.afRatings && (h("p", { class: "digi-tools-feedback-rating__thankyou-text-with-rating" }, "Du har gett betyget \"", this.selectedText.toLowerCase(), "\" med", ' ', this.selectedRating, `${this.selectedRating === 1 ? ' stjärna' : ' stjärnor'}`, ".")))), this.currentStep === 2 && this.afLinkText && (h("div", { class: "digi-tools-feedback-rating__link" }, h("digi-link-external", { afHref: this.renderLink(), "af-target": "_blank", onAfOnClick: () => this.submitFeedbackLink(), "af-variation": "small" }, this.afLinkText)))))));
     }
     render() {
-        return (h("div", { key: '0a851042501b8d4be3c30fcb8a59ca8920f6274a', class: Object.assign({ 'digi-tools-feedback-rating': true }, this.cssModifiers) }, h("digi-layout-block", { key: '06d9e3de4b0c967ff8f6105cbd2182c229cf382f', afVariation: this.layoutBlockVariation, afMarginTop: true, "af-container": "none" }, this.content)));
+        return (h("div", { key: '278240381a11afea9dd59c68fba847343976998f', class: Object.assign({ 'digi-tools-feedback-rating': true }, this.cssModifiers) }, h("digi-layout-block", { key: 'fe64918e034cca8a6fc9371c83115c55556ec4b8', afVariation: this.layoutBlockVariation, afMarginTop: true, "af-container": "none" }, this.content)));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/digi-typography-heading-jumbo.js CHANGED Viewed

@@ -13,17 +13,21 @@ const TypographyHeadingJumbo = /*@__PURE__*/ proxyCustomElement(class Typography
         this.afLevel = TypographyHeadingJumboLevel.H1;
         this.afLang = 'sv';
     }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva rubrik-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual heading element.
+     */
     focusOnHeading() {
         this.headingElement.focus();
     }
     get cssModifiers() {
         return {
             'digi-typography-heading-jumbo--primary': this.afVariation === TypographyHeadingJumboVariation.PRIMARY,
-            'digi-typography-heading-jumbo--secondary': this.afVariation === TypographyHeadingJumboVariation.SECONDARY,
+            'digi-typography-heading-jumbo--secondary': this.afVariation === TypographyHeadingJumboVariation.SECONDARY
         };
     }
     render() {
-        return (h(this.afLevel, { key: '33bf2fc6ca5a18c5440ba7ca9ccc2409c853f45a', ref: (el) => (this.headingElement = el), class: Object.assign({ 'digi-typography-heading-jumbo': true }, this.cssModifiers), lang: this.afLang, tabindex: -1 }, this.afText));
+        return (h(this.afLevel, { key: 'bd7809f4395d53100ad65ad8f7f3b066f7c1c471', ref: (el) => (this.headingElement = el), class: Object.assign({ 'digi-typography-heading-jumbo': true }, this.cssModifiers), lang: this.afLang, tabindex: -1 }, this.afText));
     }
     static get style() { return DigiTypographyHeadingJumboStyle0; }
 }, [2, "digi-typography-heading-jumbo", {

package/custom-elements.json CHANGED Viewed

@@ -8194,6 +8194,10 @@
           "name": "af-aria-label",
           "description": "Sätt attributet 'aria-label'."
         },
+        {
+          "name": "af-break-words",
+          "description": "Bryt långa ord vid overflow."
+        },
         {
           "name": "af-no-icon",
           "description": "Tar bort taggens ikon. Falskt som förvalt."