@designsystem-se/af 39.4.0 → 39.5.0

package/dist/cjs/digi-footer-card.cjs.entry.js

@@ -21,7 +21,7 @@ const FooterFooterCard = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'a15273fc73e9e7e9fc9084dafb28c4bdd211a304' }, index.h("div", { key: '80d2759e16e78a4018a94b8a83cbabdb7d50ce96', class: Object.assign({ 'digi-footer-card': true }, this.cssModifiers) }, index.h("div", { key: 'f305ebb61e11f1e3b6862d02eb8be3dc6ca00e4c', class: "digi-footer-card__content" }, index.h("slot", { key: '4928d8f14f35856a3adee2d7d8d44f9dffaebd1b' })))));
+        return (index.h(index.Host, { key: '53f8d5774dce0d2b9c41000a68e76c44957a43f2' }, index.h("div", { key: '00af88b7956647374a763dc3af89f444e748ecd1', class: Object.assign({ 'digi-footer-card': true }, this.cssModifiers) }, index.h("div", { key: '28eac7401a11f8526fb997950c4a393471d1c4d9', class: "digi-footer-card__content" }, index.h("slot", { key: '39f48ef9ffc87f4cac7149d10d7a6e1736532b75' })))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/digi-footer.cjs.entry.js

@@ -19,8 +19,9 @@ require('./form-checkbox-variation.enum-BfOGU4Qt.js');
 require('./form-file-upload-variation.enum-xcEOoggr.js');
 require('./form-input-search-variation.enum-VVfvlVeM.js');
 require('./form-input-type.enum-DvF_MTHK.js');
-require('./form-select-variation.enum-Chx0EWzg.js');
+require('./form-input-variation.enum-kpoXNUuI.js');
 require('./form-radiogroup-validation.enum-DBDbjF6N.js');
+require('./form-select-variation.enum-e6wjWyaS.js');
 require('./form-textarea-variation.enum-BcEyaR5W.js');
 require('./form-validation-message-variation.enum-BA5nmCiw.js');
 require('./info-card-multi-type.enum-DlNiPNfH.js');
@@ -70,7 +71,7 @@ const FooterFooter = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '133c1439937cd5c605b46960487caad993847dd3' }, index.h("footer", { key: '77ad14d88b16d7452ffe5406b0b0bf78c552d3ad', class: Object.assign({ 'digi-footer': true }, this.cssModifiers) }, index.h("digi-typography", { key: 'd695e51d7fed7bdacd5c2706804287e0cd67e94a' }, index.h("digi-layout-block", { key: '9dd0f463665ae8402445f2ff8b6ddc8b198836dd', afVariation: layoutBlockVariation_enum.LayoutBlockVariation.PROFILE }, index.h("digi-layout-container", { key: 'a8b72e661ee8f878ae6cf5a2d5da65bf1fb4fc7f', "af-no-gutter": true }, index.h("div", { key: '518a65a77376a7648e0c4298c1fd07c19dc725a4', class: "digi-footer__content-top" }, index.h("slot", { key: '87b6ba476ca0ef0f1a8c96926da133b0a5d27d3c', name: "content-top" })), index.h("div", { key: '4c43eec28c77d7dd793031beeb1c1962a7d997eb', class: "digi-footer__content-bottom" }, index.h("slot", { key: 'a2086ff384d987ae36cdadd758647bd950ff08ca', name: "content-bottom-left" }), index.h("slot", { key: '9a1147e4665ba559a87c0282412298d0be3a4794', name: "content-bottom-right" }))))))));
+        return (index.h(index.Host, { key: '01f991e208985e0f4baa2370e1759796e79e16e2' }, index.h("footer", { key: 'ec717c1ea929b7e8f4768a8f2cda28d44c40457c', class: Object.assign({ 'digi-footer': true }, this.cssModifiers) }, index.h("digi-typography", { key: '0f880d2402708f5d5b9750ed79c4e5da249d79d0' }, index.h("digi-layout-block", { key: '33ebd6330a7a5a491c74dd8b0ba02ef4498fd418', afVariation: layoutBlockVariation_enum.LayoutBlockVariation.PROFILE }, index.h("digi-layout-container", { key: 'f646697637b94cefb4d15d68e5577dd36f5cca56', "af-no-gutter": true }, index.h("div", { key: '1489000ea40378ff7c53d90eba8b6514bc921c67', class: "digi-footer__content-top" }, index.h("slot", { key: '694e5154560344d84fbaf6aac24ec81887054e15', name: "content-top" })), index.h("div", { key: '016b0d947e1874414636808aa97471561d310c6f', class: "digi-footer__content-bottom" }, index.h("slot", { key: '7ed92012150110ae25bc17ee35c9417fa6f58b31', name: "content-bottom-left" }), index.h("slot", { key: '7e46f29f763f76fd30605bde73b5b23542906b88', name: "content-bottom-right" }))))))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/digi-form-category-filter.cjs.entry.js

@@ -128,7 +128,7 @@ const FormCategoryFilter = class {
         this.afHideToggle = !this.toggleHidden;
     }
     render() {
-        return (index.h(index.Host, { key: 'ec8e3838a29d5f77462b0c7e8e5ddb510eac2bc9' }, index.h("div", { key: '085c916fa62b00636a188ac8b225af8f370c25ff', class: {
+        return (index.h(index.Host, { key: 'eb3139656b9a3238816d8421ba6aba35c3adb51e' }, index.h("div", { key: 'f01cdb704aac7eb4062ec533830fd3a1481f2373', class: {
                 'digi-form-category-filter': true
             } }, this.displayCategories().map((category) => (index.h("digi-button", { class: {
                 'digi-form-category-filter--category': true,
@@ -136,7 +136,7 @@ const FormCategoryFilter = class {
             }, afVariation: "primary", afAriaPressed: this.selectedCategories.includes(category.name), onAfOnClick: () => {
                 this.toggleCategory(category);
             } }, typeof category.hits === 'undefined' && category.name, typeof category.hits !== 'undefined' && (index.h("span", null, category.name, ' ', index.h("span", { class: "digi-form-category-filter--category--thin-text" }, "(", category.hits, ")")))))), this.afHideToggle === false &&
-            this.afCategories.length > this.afVisibleCollapsed && (index.h("div", { key: '2c8459757e7940cc6840132d6bf58d765ad3bef1' }, index.h("digi-button", { key: 'cf326f63112f4301fafd93bbbe0ae6a604ce6790', afVariation: "function", afAriaExpanded: !this.collapsed, onClick: () => {
+            this.afCategories.length > this.afVisibleCollapsed && (index.h("div", { key: '107986a33eb0e7dd26a991837ecb0b51e9c7599b' }, index.h("digi-button", { key: '88ef298b12108b3a57f0d67bcbaf2a54b109a182', afVariation: "function", afAriaExpanded: !this.collapsed, onClick: () => {
                 this.toggleCollapsed();
             } }, this.collapsed ? 'Visa alla' : 'Visa färre', this.collapsed ? (index.h("digi-icon-plus", { slot: "icon", "aria-hidden": "true" })) : (index.h("digi-icon-minus", { slot: "icon", "aria-hidden": "true" }))))))));
     }

package/dist/cjs/digi-form-checkbox.cjs.entry.js

@@ -116,7 +116,7 @@ const FormCheckbox = class {
         this.afOnInput.emit(e);
     }
     render() {
-        return (index.h(index.Host, { key: 'e8ca1dfe96537dd438a4b6c206adfc7c9fd64d9c', tabindex: -1 }, index.h("div", { key: '850911b7ffdcea222b12c2c883cf93b63f703b4f', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, index.h("input", { key: '923a49d0402e6b3034d3e8e6d43033692695c830', class: "digi-form-checkbox__input", ref: (el) => {
+        return (index.h(index.Host, { key: 'd65f3b10bcc81390a6dd8ff669b7b88e6b792db5', tabindex: -1 }, index.h("div", { key: 'a946c40b143842c33d0db93b274c85e5307ba6cc', class: Object.assign({ 'digi-form-checkbox': true }, this.cssModifiers) }, index.h("input", { key: 'fd47917e689015d260ca6c3d7884d44667455d9c', class: "digi-form-checkbox__input", ref: (el) => {
                 var _a;
                 this._input = el;
                 (_a = this === null || this === void 0 ? void 0 : this.afInputRef) === null || _a === void 0 ? void 0 : _a.call(this, el);
@@ -124,7 +124,7 @@ const FormCheckbox = class {
                 ? null
                 : `${this.afAriaDescribedby ? `${this.afAriaDescribedby} ` : ''}${this.afDescription ? `${this.afId}-description` : ''}`, "aria-labelledby": this.afAriaLabelledby, "aria-label": this.afAriaLabel, "aria-invalid": this.afValidation === formCheckboxVariation_enum.FormCheckboxValidation.ERROR
                 ? 'true'
-                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "checkbox", checked: this.afChecked, value: this.afValue, indeterminate: this.afIndeterminate, autofocus: this.afAutofocus ? this.afAutofocus : null }), index.h("label", { key: 'dccbd4e83dbc757483a18ac22d1539ef83dfb534', htmlFor: this.afId, class: "digi-form-checkbox__label" }, index.h("span", { key: '1cbc88be9d74dab3e04472bc9462712377447d4a', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (index.h("p", { key: 'bdab264d9d13520858c581d2664c0d53171a1415', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
+                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "checkbox", checked: this.afChecked, value: this.afValue, indeterminate: this.afIndeterminate, autofocus: this.afAutofocus ? this.afAutofocus : null }), index.h("label", { key: 'fa62b461c60b54de3bccf598f95188d076f4c338', htmlFor: this.afId, class: "digi-form-checkbox__label" }, index.h("span", { key: 'a9a340d0240750079514942d431511ed85f6341a', class: "digi-form-checkbox__box" }), this.afLabel), !!this.afDescription && (index.h("p", { key: '38a38ee333dbfddc997592db7e94ded6f12ec485', id: `${this.afId}-description`, class: "digi-form-checkbox__description" }, this.afDescription)))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/digi-form-error-list.cjs.entry.js

@@ -20,8 +20,9 @@ require('./form-checkbox-variation.enum-BfOGU4Qt.js');
 require('./form-file-upload-variation.enum-xcEOoggr.js');
 require('./form-input-search-variation.enum-VVfvlVeM.js');
 require('./form-input-type.enum-DvF_MTHK.js');
-require('./form-select-variation.enum-Chx0EWzg.js');
+require('./form-input-variation.enum-kpoXNUuI.js');
 require('./form-radiogroup-validation.enum-DBDbjF6N.js');
+require('./form-select-variation.enum-e6wjWyaS.js');
 require('./form-textarea-variation.enum-BcEyaR5W.js');
 require('./form-validation-message-variation.enum-BA5nmCiw.js');
 require('./info-card-multi-type.enum-DlNiPNfH.js');
@@ -53,20 +54,7 @@ require('./typography-heading-jumbo-variation.enum-Di1Jeh0G.js');
 require('./typography-meta-variation.enum-lvDemnSz.js');
 require('./typography-time-variation.enum-D2gIVzYH.js');
 require('./util-breakpoint-observer-breakpoints.enum-zoJiezkV.js');
-
-/**
- * Small utility for adding Stencil component scope to dynamically inserted elements
- * (e.g. svg for title logotypes)
- */
-function applyStencilScope(host, root) {
-    const scopeClasses = [...host.classList].filter(c => c.startsWith('sc-'));
-    if (!scopeClasses.length)
-        return;
-    root.classList.add(...scopeClasses);
-    root.querySelectorAll('*').forEach(el => {
-        el.classList.add(...scopeClasses);
-    });
-}
+var applyStencilScope_util = require('./applyStencilScope.util-Dvz01Lkf.js');
 
 const formErrorListCss = () => `.sc-digi-form-error-list-h{--digi--form-error-list--list--padding:var(--digi--gutter--smaller) 0 0 0;--digi--form-error-list--list--margin:0;--digi--form-error-list--item--padding:var(--digi--padding--smaller) 0 0 0;--digi--form-error-list--item--margin:0}.sc-digi-form-error-list-h .digi-form-error-list.sc-digi-form-error-list ul.sc-digi-form-error-list{list-style:none;padding:var(--digi--form-error-list--list--padding);margin:var(--digi--form-error-list--list--margin)}.sc-digi-form-error-list-h .digi-form-error-list.sc-digi-form-error-list ul.sc-digi-form-error-list>li.sc-digi-form-error-list{list-style:none;padding:var(--digi--form-error-list--item--padding);margin:var(--digi--form-error-list--item--margin)}`;
 
@@ -109,7 +97,7 @@ const FormErrorList = class {
             const hasChildChanges = mutations.some(mutation => mutation.type === 'childList');
             if (hasChildChanges) {
                 const hostElement = this.hostElement.querySelector('.digi-form-error-list');
-                applyStencilScope(hostElement, hostElement);
+                applyStencilScope_util.applyStencilScope(hostElement, hostElement);
             }
         });
         this.observer.observe(this.hostElement, {
@@ -148,7 +136,7 @@ const FormErrorList = class {
         this.afOnClickLink.emit({ id });
     }
     render() {
-        return (index.h("div", { key: '9471a904e95c6304644d884e15aac90d3b0fbad1', class: "digi-form-error-list", id: this.afId }, index.h("digi-notification-alert", { key: '13a8bf3037570f929f470cc2a531156d552ca53a', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": typographyVariation_enum.NotificationAlertVariation.DANGER }, this.afDescription && (index.h("digi-typography", { key: '8e8ef106286f426b0cbcfd904407582e79e8ce24', "af-variation": typographyVariation_enum.TypographyVariation.SMALL }, index.h("p", { key: '51175a8da94efe46a262ce365994aa3c23983f2e', class: "digi-form-error-list__description" }, this.afDescription))), index.h("slot", { key: 'b9f5287d0e2c0326100a094a48fa5e7ab314b92f' }))));
+        return (index.h("div", { key: '0c4f71c70ed3508b1131cc0f1c36178c276049cb', class: "digi-form-error-list", id: this.afId }, index.h("digi-notification-alert", { key: '9296680964f179e5072b84ddcaf93c487920a8b3', ref: (el) => (this._notificationAlert = el), "af-heading": this.afHeading, "af-heading-level": this.afHeadingLevel, "af-variation": typographyVariation_enum.NotificationAlertVariation.DANGER }, this.afDescription && (index.h("digi-typography", { key: 'c994f0e46ed524f49cbb1ad48691086033c377e6', "af-variation": typographyVariation_enum.TypographyVariation.SMALL }, index.h("p", { key: '89ddb19171b4ebe1faf4dffb63c96ed0ea80b19e', class: "digi-form-error-list__description" }, this.afDescription))), index.h("slot", { key: '90862bca7234cdae69472ab64f2e3a8a5e26b27c' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/digi-form-file-upload.cjs.entry.js

@@ -604,22 +604,22 @@ const FormFileUpload = class {
             } }, this.renderFiles())));
     }
     render() {
-        return (index.h(index.Fragment, { key: 'ea0f5e831e4b91840870f13a0f765bddde7f2b3f' }, index.h("digi-util-breakpoint-observer", { key: 'fdba1fa892784d3bfaa437c14ca7fe4a2d6211d0', onAfOnChange: (e) => this.breakpointHandler(e) }), index.h("div", { key: 'cc6ffd28d1478bd5f1205bd3dfe4fa84c19e8f55', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, index.h("digi-form-label", { key: 'e341b099dceeadda16bb1b00c9f294b32eb619fa', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), index.h("div", { key: 'ddb216147c7463573e772bd25cd8ea1313c0be8d', class: {
+        return (index.h(index.Fragment, { key: '83069862652bb057b4ade8e870f43ea1641c7d2c' }, index.h("digi-util-breakpoint-observer", { key: '27bc65b3574c42f5b16dfeff2e811ccdce05ba6a', onAfOnChange: (e) => this.breakpointHandler(e) }), index.h("div", { key: '816c7e52c0fe0893c647c9d95a3758ada6b9e4a5', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, index.h("digi-form-label", { key: 'faee214b9bbfcd70ba45ec8c6f4b183a8a27df94', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), index.h("div", { key: '0ee520a66a4f40cda20249b823135604c5a2f798', class: {
                 'digi-form-file-upload__upload-area': true,
                 'digi-form-file-upload__upload-area--hover': this.fileHover
             }, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), onDragEnter: (e) => this.handleOnDragEnterLeave(e), onDragLeave: (e) => this.handleOnDragEnterLeave(e), onClick: (e) => this.handleInputClick(e) }, this.fileHover &&
-            this.afVariation != formFileUploadVariation_enum.FormFileUploadVariation.SMALL && (index.h("div", { key: 'b5ed1a44293012aa6bdcfc86937f04bf751fc642', class: "digi-form-file-upload__upload-area-overlay" })), index.h("div", { key: 'ec86494fd7299db8e3c5e9ad9940a633fc9e73a8', class: "digi-form-file-upload__text-area" }, index.h("button", { key: 'adcc823a998bce77bd83f2c0ee486f55d060204b', type: "button", id: this.afId + '-button', ref: (el) => {
+            this.afVariation != formFileUploadVariation_enum.FormFileUploadVariation.SMALL && (index.h("div", { key: 'f04e8f14c0043cd4a6d6ffb616db01a2975cc9e5', class: "digi-form-file-upload__upload-area-overlay" })), index.h("div", { key: 'c5ff24fe4f6bb6f2a3cff53568bba5c4193de367', class: "digi-form-file-upload__text-area" }, index.h("button", { key: '7a207ece768ccdc173117facbd8bef5c5f76ac6b', type: "button", id: this.afId + '-button', ref: (el) => {
                 this._uploadButton = el;
             }, onClick: (e) => this.handleInputClick(e), class: "digi-form-file-upload__button hidden_mobile", style: {
                 margin: '0'
-            } }, index.h("digi-icon-paperclip", { key: 'ae23c375fcbbbf3e4b8b105d7e30d9c8316fc5f3', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
+            } }, index.h("digi-icon-paperclip", { key: '3976556e518bfa6f954d89e7217ed15b6e300a39', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
             ? this.afUploadBtnText
-            : text._t.form.file_choose), index.h("input", { key: '5d2beb87d1565c478cfa280b9790fc25de90e958', ref: (el) => {
+            : text._t.form.file_choose), index.h("input", { key: 'b2346e862c48e16cebf663c6ac1cf786e3698034', ref: (el) => {
                 this._input = el;
-            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), index.h("span", { key: 'c8e9e00250ab4cb9da92bd7695fb389ddd74428a' }, this.afVariation !== formFileUploadVariation_enum.FormFileUploadVariation.SMALL &&
-            text._t.form.file_dropzone))), index.h("p", { key: 'e54f8e9d99ddd6b39833c32f3080c6f7eef840a9', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
+            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), index.h("span", { key: '8ce154335e22dce04d656f54da41a19ad171bf32' }, this.afVariation !== formFileUploadVariation_enum.FormFileUploadVariation.SMALL &&
+            text._t.form.file_dropzone))), index.h("p", { key: 'ccd6176368265c11bb579a38780033d373307e8f', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
                 this._srTextContainer = el;
-            } }), (this.files.length > 0 || this.error) && (index.h("div", { key: '5f246f4669dc97e046855e46f25792da5325051c', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
+            } }), (this.files.length > 0 || this.error) && (index.h("div", { key: '17798bba897bd1e54fda60e85acbe9a531202674', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/digi-form-filter.cjs.entry.js

@@ -220,24 +220,24 @@ const FormFilter = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'dfd9336afc099665b35c08b47467d68320279469' }, index.h("div", { key: 'a329b82ecd5905e1792021a16dd1c12b3b7b00a0', id: `${this.afId}-identifier`, ref: (el) => (this.refs.root = el), class: {
+        return (index.h(index.Host, { key: '629ed6c227116a5fa43e0e2e4c90da6f15310b46' }, index.h("div", { key: '60e8979ca12ea06f48dac9103fed77a25a895b64', id: `${this.afId}-identifier`, ref: (el) => (this.refs.root = el), class: {
                 'digi-form-filter': true,
                 'digi-form-filter--open': this.isActive
-            } }, index.h("digi-button", { key: 'b5a6b2aca44be78743d9f0df213b801395f09ae4', id: `${this.afId}-toggle-button`, afInputRef: (el) => (this.refs.toggle = el), class: "digi-form-filter__toggle-button", onAfOnClick: () => this.handleToggle(), "af-aria-haspopup": "true", "af-variation": "secondary", "af-aria-label": this.afFilterButtonAriaLabel, "af-aria-labelledby": this.afFilterButtonAriaDescribedby, "af-aria-controls": `${this.afId}-dropdown-menu`, "af-aria-expanded": this.isActive, "af-autofocus": this.afAutofocus ? this.afAutofocus : null }, index.h("i", { key: '38753316b8e1cdc24a977c835da398ff344b3d68', class: {
+            } }, index.h("digi-button", { key: 'f91142adf06d5320b5bd18f7e057ba3db67982a4', id: `${this.afId}-toggle-button`, afInputRef: (el) => (this.refs.toggle = el), class: "digi-form-filter__toggle-button", onAfOnClick: () => this.handleToggle(), "af-aria-haspopup": "true", "af-variation": "secondary", "af-aria-label": this.afFilterButtonAriaLabel, "af-aria-labelledby": this.afFilterButtonAriaDescribedby, "af-aria-controls": `${this.afId}-dropdown-menu`, "af-aria-expanded": this.isActive, "af-autofocus": this.afAutofocus ? this.afAutofocus : null }, index.h("i", { key: '06b3942b320859323c70bef9a48b0170e62494b1', class: {
                 'digi-form-filter__toggle-button-indicator': true,
                 'digi-form-filter__toggle-button-indicator--active': this.checkedItems.length > 0
-            } }), index.h("span", { key: 'bef6dc84b8439cb5bd45229f5e77b0a2bd6a97ad', class: "digi-form-filter__toggle-button-text" }, this.afFilterButtonText), index.h("digi-icon-chevron-down", { key: '9572d1ec8bc6f8ac50252be491131544fbb2c151', class: "digi-form-filter__toggle-icon", slot: "icon-secondary" })), index.h("div", { key: 'f2071068664d89a5510f2840a7d8912b654c56f4', id: `${this.afId}-dropdown-menu`, ref: (el) => (this.refs.menu = el), class: {
+            } }), index.h("span", { key: '72654121dd476fde27a6dfc8dac7e0fa308da60a', class: "digi-form-filter__toggle-button-text" }, this.afFilterButtonText), index.h("digi-icon-chevron-down", { key: 'a1d0c0155b0c5017cc85315134130b41697a6d54', class: "digi-form-filter__toggle-icon", slot: "icon-secondary" })), index.h("div", { key: '930be23958d57a8ec6b40e027f9729cb3297bc6c', id: `${this.afId}-dropdown-menu`, ref: (el) => (this.refs.menu = el), class: {
                 'digi-form-filter__dropdown': true,
                 'digi-form-filter__dropdown--right': this.afAlignRight,
                 'digi-form-filter__dropdown--hidden': !this.isActive
-            } }, index.h("div", { key: '3574702676988b2a0777564b343fdf6dc271177c', class: "digi-form-filter__scroll" }, index.h("fieldset", { key: '03098521d312f77170041c7240c1bfd1f9831107' }, this.afName ? (index.h("legend", { class: "digi-form-filter__legend" }, this.afName)) : (index.h("legend", { class: "legend-hidden" }, this.afFilterButtonText)), index.h("ul", { key: '532094b7579a8c7f60e87e4ee973f66b16cb7487', class: "digi-form-filter__list", "aria-label": this.afFilterButtonAriaLabel, id: `${this.afId}-filter-list` }, this.listItems.map((item) => {
+            } }, index.h("div", { key: 'be2ff919debc13ccae9b55443b6ede7b20584a62', class: "digi-form-filter__scroll" }, index.h("fieldset", { key: 'e8e95989e36cefe37dc8d9ea35f733b721ba0925' }, this.afName ? (index.h("legend", { class: "digi-form-filter__legend" }, this.afName)) : (index.h("legend", { class: "legend-hidden" }, this.afFilterButtonText)), index.h("ul", { key: 'ad8e66517cee5fe0c6ed26c016e23a00e62ee9ff', class: "digi-form-filter__list", "aria-label": this.afFilterButtonAriaLabel, id: `${this.afId}-filter-list` }, this.listItems.map((item) => {
             const isChecked = this.checkedItems.includes(item.id);
             const isTabbable = this.tabItems.includes(item.id);
             return (index.h("li", { class: "digi-form-filter__item", key: item.id }, index.h("digi-form-checkbox", { afInputRef: (ref) => (this.refs.filter = Object.assign(Object.assign({}, this.refs.filter), { [item.id]: ref })), afTabIndex: isTabbable ? 0 : -1, afLabel: item.label, afValue: item.id, afChecked: isChecked, onClick: (e) => {
                     e.preventDefault();
                     this.handleCheckItem(item);
                 } })));
-        })))), index.h("div", { key: 'c7985ef9aec4f29899fc4ff829867fd43fa85c08', class: "digi-form-filter__footer" }, index.h("digi-button", { key: '06dca89dd7498a070c1046a97cdda36986bebded', class: "digi-form-filter__submit-button", "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => this.handleSubmit(), afInputRef: (ref) => (this.refs.submit = ref) }, this.afSubmitButtonText), !this.afHideResetButton && (index.h("digi-button", { key: '863114cc93fd93a5fea02d114d60c64c86d29d8f', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.handleReset(), class: "digi-form-filter__reset-button", afInputRef: (ref) => (this.refs.reset = ref) }, this.afResetButtonText))))), index.h("div", { key: 'ac372d9c7e3a82886b6b692493bfcb536b52b5be', ref: (ref) => (this.slotRef = ref), id: `${this.afId}-children`, style: { display: 'none' } }, index.h("slot", { key: '5c1fc764d95c7928a84a13cfb57f9299e620e510' }))));
+        })))), index.h("div", { key: '79448216684afafd5746362f923ca6cda0b3a136', class: "digi-form-filter__footer" }, index.h("digi-button", { key: '891b9ba1f286b1c9fc11c42855c41612fb3b84f4', class: "digi-form-filter__submit-button", "af-variation": "primary", "af-aria-label": this.afSubmitButtonTextAriaLabel, onClick: () => this.handleSubmit(), afInputRef: (ref) => (this.refs.submit = ref) }, this.afSubmitButtonText), !this.afHideResetButton && (index.h("digi-button", { key: '11fa710bab35b7709c8063f143da9af0da6daaef', "af-variation": "secondary", "af-aria-label": this.afResetButtonTextAriaLabel, onClick: () => this.handleReset(), class: "digi-form-filter__reset-button", afInputRef: (ref) => (this.refs.reset = ref) }, this.afResetButtonText))))), index.h("div", { key: '29f9d7299f89d564a616c302d9965e8431cbc3f8', ref: (ref) => (this.slotRef = ref), id: `${this.afId}-children`, style: { display: 'none' } }, index.h("slot", { key: 'a4b103b33602a14617884e95a28db8b958fcbbcd' }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/digi-form-input-search.cjs.entry.js

@@ -138,10 +138,10 @@ const FormInputSearch = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '479760a36173d0a06d88a6c407c87543a6b13125', tabindex: -1 }, index.h("div", { key: '4e49bfd22f8191c07418f4e11b6328c53efbf8d8', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, index.h("digi-form-input", { key: 'e4fdc40206a1bb9423b852e1f7e683ea8676a924', class: {
+        return (index.h(index.Host, { key: '0644a6dc56c3e6223d8150e6cac0410543b9001d', tabindex: -1 }, index.h("div", { key: '67b6bf12828abf4245dd9c06c32043965a2d880f', class: Object.assign({ 'digi-form-input-search': true }, this.cssModifiers), "data-af-identifier": this.afId }, index.h("digi-form-input", { key: '4c8c614a10dfa9bdbe0c3cd28dbdadd74a5be37b', class: {
                 'digi-form-input-search__input': true,
                 'digi-form-input-search__input--no-button': this.afHideButton
-            }, ref: (el) => (this._input = el), onAfOnBlur: (e) => this.blurHandler(e), onAfOnChange: (e) => this.changeHandler(e), onAfOnFocus: (e) => this.focusHandler(e), onAfOnFocusout: (e) => this.focusoutHandler(e), onAfOnKeyup: (e) => this.keyupHandler(e), onAfOnInput: (e) => this.inputHandler(e), afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afAriaActivedescendant: this.afAriaActivedescendant, afAriaDescribedby: this.afAriaDescribedby, afAriaLabelledby: this.afAriaLabelledby, afAriaAutocomplete: this.afAriaAutocomplete, afAutocomplete: this.afAutocomplete, afName: this.afName, afType: this.afType, afValue: this.afValue, afVariation: this.afVariation, afAutofocus: this.afAutofocus ? this.afAutofocus : null, afButtonVariation: this.afButtonVariation, afId: this.afId }, !this.afHideButton && (index.h("digi-button", { key: '3cd29d50fde3ddeb6b731969a51609688554cf75', class: "digi-form-input-search__button", onAfOnClick: (e) => this.clickHandler(e), onAfOnFocus: (e) => e.stopPropagation(), afType: this.afButtonType, afAriaLabel: this.afButtonAriaLabel, afAriaLabelledby: this.afButtonAriaLabelledby, afSize: this.afVariation, slot: "button" }, index.h("digi-icon-search", { key: '26f2f3fbcd23a4e8ac3646f6f7d1cafd75126345', slot: "icon" }), this.afButtonText))))));
+            }, ref: (el) => (this._input = el), onAfOnBlur: (e) => this.blurHandler(e), onAfOnChange: (e) => this.changeHandler(e), onAfOnFocus: (e) => this.focusHandler(e), onAfOnFocusout: (e) => this.focusoutHandler(e), onAfOnKeyup: (e) => this.keyupHandler(e), onAfOnInput: (e) => this.inputHandler(e), afLabel: this.afLabel, afLabelDescription: this.afLabelDescription, afAriaActivedescendant: this.afAriaActivedescendant, afAriaDescribedby: this.afAriaDescribedby, afAriaLabelledby: this.afAriaLabelledby, afAriaAutocomplete: this.afAriaAutocomplete, afAutocomplete: this.afAutocomplete, afName: this.afName, afType: this.afType, afValue: this.afValue, afVariation: this.afVariation, afAutofocus: this.afAutofocus ? this.afAutofocus : null, afButtonVariation: this.afButtonVariation, afId: this.afId }, !this.afHideButton && (index.h("digi-button", { key: '9e67c29ddca5c642e1c6c4464662c9172d75f474', class: "digi-form-input-search__button", onAfOnClick: (e) => this.clickHandler(e), onAfOnFocus: (e) => e.stopPropagation(), afType: this.afButtonType, afAriaLabel: this.afButtonAriaLabel, afAriaLabelledby: this.afButtonAriaLabelledby, afSize: this.afVariation, slot: "button" }, index.h("digi-icon-search", { key: '0abfcf61703e2f8901caa567cd9efac74503dc8e', slot: "icon" }), this.afButtonText))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/digi-form-input.cjs.entry.js

@@ -0,0 +1,205 @@
+'use strict';
+
+var index = require('./index-D36hZyeW.js');
+var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
+var formInputType_enum = require('./form-input-type.enum-DvF_MTHK.js');
+var formInputVariation_enum = require('./form-input-variation.enum-kpoXNUuI.js');
+
+const formInputCss = () => `.sc-digi-form-input-h{--digi--form-input--height--small:var(--digi--input-height--small);--digi--form-input--height--medium:var(--digi--input-height--medium);--digi--form-input--height--large:var(--digi--input-height--large);--digi--form-input--border-radius:var(--digi--border-radius--input);--digi--form-input--padding:0 var(--digi--gutter--medium);--digi--form-input--background--empty:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--neutral:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--success:var(--digi--color--background--interactive--validation--success);--digi--form-input--background--warning:var(--digi--color--background--interactive--validation--warning);--digi--form-input--background--error:var(--digi--color--background--interactive--validation--error);--digi--form-input--border--neutral:var(--digi--border-width--input-regular) solid;--digi--form-input--border--error:var(--digi--border-width--input-validation) solid;--digi--form-input--border--success:var(--digi--border-width--input-validation) solid;--digi--form-input--border--warning:var(--digi--border-width--input-validation) solid;--digi--form-input--border-color--neutral:var(--digi--color--border--interactive--default--on-input);--digi--form-input--border-color--success:var(--digi--color--border--interactive--validation--success);--digi--form-input--border-color--warning:var(--digi--color--border--interactive--validation--warning);--digi--form-input--border-color--error:var(--digi--color--border--interactive--validation--error)}.sc-digi-form-input-h .digi-form-input.sc-digi-form-input{display:flex;flex-direction:column;gap:0.4em}.sc-digi-form-input-h .digi-form-input--small.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--small)}.sc-digi-form-input-h .digi-form-input--medium.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--medium)}.sc-digi-form-input-h .digi-form-input--large.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--large)}.sc-digi-form-input-h .digi-form-input--neutral.sc-digi-form-input{--BORDER:var(--digi--form-input--border--neutral);--BORDER-COLOR:var(--digi--form-input--border-color--neutral);--BACKGROUND:var(--digi--form-input--background--neutral)}.sc-digi-form-input-h .digi-form-input--empty.sc-digi-form-input:not(:focus-within){--BACKGROUND:var(--digi--form-input--background--empty)}.sc-digi-form-input-h .digi-form-input--success.sc-digi-form-input{--BORDER:var(--digi--form-input--border--success);--BORDER-COLOR:var(--digi--form-input--border-color--success);--BACKGROUND:var(--digi--form-input--background--success)}.sc-digi-form-input-h .digi-form-input--warning.sc-digi-form-input{--BORDER:var(--digi--form-input--border--warning);--BORDER-COLOR:var(--digi--form-input--border-color--warning);--BACKGROUND:var(--digi--form-input--background--warning)}.sc-digi-form-input-h .digi-form-input--error.sc-digi-form-input{--BORDER:var(--digi--form-input--border--error);--BORDER-COLOR:var(--digi--form-input--border-color--error);--BACKGROUND:var(--digi--form-input--background--error)}.digi-form-input__input-wrapper.sc-digi-form-input{position:relative;display:flex}.digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{--MIN-HEIGHT:100%}.digi-form-input--button-variation-primary .digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{border-start-start-radius:0;border-end-start-radius:0}.digi-form-input--button-variation-secondary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input-wrapper.sc-digi-form-input{gap:var(--digi--gutter--medium);flex-wrap:wrap}.digi-form-input__input.sc-digi-form-input{flex:1;height:var(--HEIGHT);font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--body--font-size--desktop);padding:var(--digi--form-input--padding);color:var(--digi--color--text--primary);background:var(--BACKGROUND);border:var(--BORDER);border-color:var(--BORDER-COLOR);border-radius:var(--digi--form-input--border-radius);box-sizing:border-box}.digi-form-input__input.sc-digi-form-input:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.digi-form-input--button-variation-primary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input.sc-digi-form-input{border-end-end-radius:0;border-start-end-radius:0}`;
+
+const FormInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.afOnChange = index.createEvent(this, "afOnChange", 7);
+        this.afOnBlur = index.createEvent(this, "afOnBlur", 7);
+        this.afOnKeyup = index.createEvent(this, "afOnKeyup", 7);
+        this.afOnFocus = index.createEvent(this, "afOnFocus", 7);
+        this.afOnFocusout = index.createEvent(this, "afOnFocusout", 7);
+        this.afOnInput = index.createEvent(this, "afOnInput", 7);
+        this.afOnDirty = index.createEvent(this, "afOnDirty", 7);
+        this.afOnTouched = index.createEvent(this, "afOnTouched", 7);
+        this.afOnReady = index.createEvent(this, "afOnReady", 3);
+        this.hasActiveValidationMessage = false;
+        this.dirty = false;
+        this.touched = false;
+        /**
+         * Sätter attributet 'type'.
+         * @en Input type attribute
+         */
+        this.afType = formInputType_enum.FormInputType.TEXT;
+        /**
+         * Sätter attributet 'inputmode'.
+         * @en Inputmode  type attribute
+         */
+        this.afInputmode = formInputVariation_enum.FormInputMode.DEFAULT;
+        /**
+         * Layout för hur inmatningsfältet ska visas då det finns en knapp
+         * @en Input layout when there is a button
+         */
+        this.afButtonVariation = formInputType_enum.FormInputButtonVariation.PRIMARY;
+        /**
+         * Sätter variant. Kan vara 'small', 'medium' eller 'large'
+         * @en Set input variation.
+         */
+        this.afVariation = formInputVariation_enum.FormInputVariation.MEDIUM;
+        /**
+         * 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_util.randomIdGenerator('digi-form-input');
+        /**
+         * Sätt denna till true om formuläret innehåller fler obligatoriska fält än valfria.
+         * @en Set this to true if the form contains more required fields than optional fields.
+         */
+        this.afAnnounceIfOptional = false;
+        /**
+         * Sätter valideringsstatus. Kan vara 'success', 'error', 'warning', 'neutral' eller ingenting.
+         * @en Set input validation status
+         */
+        this.afValidation = formInputVariation_enum.FormInputValidation.NEUTRAL;
+        /**
+         * Om värdet är true får felmeddelandet attributet role="alert".
+         * Om felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska värdet sättas till false.
+         * @en If the value is true, the error message gets the attribute role="alert".
+         * If the error is shown together with multiple errors (for example after server-side validation), the value should be set to false.
+         */
+        this.afErrorMessageIsAlert = true;
+    }
+    onValueChanged(value) {
+        this.afValue = value;
+    }
+    onAfValueChanged(value) {
+        this.value = value;
+        if (this._input && this._input.value !== String(value !== null && value !== void 0 ? value : '')) {
+            this._input.value = String(value !== null && value !== void 0 ? value : '');
+        }
+    }
+    get errorMessageIsAlert() {
+        return (this.afErrorMessageIsAlert !== false &&
+            this.afErrorMessageIsAlert !== 'false');
+    }
+    afValidationTextWatch() {
+        this.setActiveValidationMessage();
+    }
+    /**
+     * Hämtar en referens till inputelementet. Bra för att t.ex. sätta fokus programmatiskt.
+     * @en Returns a reference to the input element. Handy for setting focus programmatically.
+     */
+    async afMGetFormControlElement() {
+        return this._input;
+    }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till själva input-elementet.
+     * @en Listens for when focus is set on the custom element and propagates it down to the actual input element.
+     */
+    focusOnInput() {
+        this._input.focus();
+    }
+    componentWillLoad() {
+        this.afValue ? (this.value = this.afValue) : (this.afValue = this.value);
+        this.setActiveValidationMessage();
+        this.setHasButton();
+    }
+    componentWillUpdate() {
+        this.setHasButton();
+    }
+    componentDidLoad() {
+        this.afOnReady.emit();
+    }
+    setActiveValidationMessage() {
+        this.hasActiveValidationMessage = !!this.afValidationText;
+    }
+    get cssModifiers() {
+        return {
+            'digi-form-input--small': this.afVariation === formInputVariation_enum.FormInputVariation.SMALL,
+            'digi-form-input--medium': this.afVariation === formInputVariation_enum.FormInputVariation.MEDIUM,
+            'digi-form-input--large': this.afVariation === formInputVariation_enum.FormInputVariation.LARGE,
+            'digi-form-input--neutral': this.afValidation === formInputVariation_enum.FormInputValidation.NEUTRAL,
+            'digi-form-input--success': this.afValidation === formInputVariation_enum.FormInputValidation.SUCCESS,
+            'digi-form-input--error': this.afValidation === formInputVariation_enum.FormInputValidation.ERROR,
+            'digi-form-input--warning': this.afValidation === formInputVariation_enum.FormInputValidation.WARNING,
+            [`digi-form-input--button-variation-${this.afButtonVariation}`]: !!this.afButtonVariation,
+            [`digi-form-input--has-button-${this.hasButton}`]: true,
+            'digi-form-input--empty': !this.afValue &&
+                (!this.afValidation ||
+                    this.afValidation === formInputVariation_enum.FormInputValidation.NEUTRAL)
+        };
+    }
+    blurHandler(e) {
+        const trimableTypes = [
+            formInputType_enum.FormInputType.TEXT,
+            formInputType_enum.FormInputType.EMAIL,
+            formInputType_enum.FormInputType.SEARCH,
+            formInputType_enum.FormInputType.TEL,
+            formInputType_enum.FormInputType.URL
+        ];
+        const shouldTrim = this.afTrimValue && trimableTypes.includes(this.afType);
+        if (shouldTrim && typeof e.target.value === 'string') {
+            const trimmedValue = e.target.value.trim();
+            if (trimmedValue !== e.target.value) {
+                this.afValue = this.value = trimmedValue;
+                if (this._input) {
+                    this._input.value = trimmedValue;
+                }
+                // Emittar afOnInput så Angulars value accessor får det trimmade värdet
+                this.afOnInput.emit(e);
+            }
+        }
+        if (!this.touched) {
+            this.afOnTouched.emit(e);
+            this.touched = true;
+        }
+        this.afOnBlur.emit(e);
+    }
+    changeHandler(e) {
+        this.setActiveValidationMessage();
+        this.afOnChange.emit(e);
+    }
+    focusHandler(e) {
+        this.afOnFocus.emit(e);
+    }
+    focusoutHandler(e) {
+        this.afOnFocusout.emit(e);
+    }
+    keyupHandler(e) {
+        this.afOnKeyup.emit(e);
+    }
+    inputHandler(e) {
+        this.afValue = this.value =
+            this.afType === formInputType_enum.FormInputType.NUMBER
+                ? parseFloat(e.target.value)
+                : e.target.value;
+        if (!this.dirty) {
+            this.afOnDirty.emit(e);
+            this.dirty = true;
+        }
+        this.setActiveValidationMessage();
+        this.afOnInput.emit(e);
+    }
+    setHasButton() {
+        this.hasButton = !!this.hostElement.querySelector('[slot="button"]');
+    }
+    render() {
+        return (index.h(index.Host, { key: 'bc3d04d6ce2c7493463e25777c886a02aab33b60', tabindex: -1 }, index.h("div", { key: '4e7331cdfbeca168b993d4b2dbd3d6404cb55002', class: Object.assign({ 'digi-form-input': true }, this.cssModifiers) }, index.h("digi-form-label", { key: '3a6b5f558655f055a547fbf5a9d4b37a1cdfd54d', class: "digi-form-input__label", afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), index.h("div", { key: 'e451db64601f98466d7bdd1914e4e207a1d090d6', class: "digi-form-input__input-wrapper" }, index.h("input", Object.assign({ key: '36db75eec2ec062a5cad58b03561f6ba64b00a2b', class: "digi-form-input__input", ref: (el) => (this._input = el), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), onKeyUp: (e) => this.keyupHandler(e), onInput: (e) => this.inputHandler(e), "aria-activedescendant": this.afAriaActivedescendant, "aria-describedby": `${this.afAriaDescribedby} ${this.afId}--validation-message`, "aria-labelledby": this.afAriaLabelledby, "aria-autocomplete": this.afAriaAutocomplete, "aria-invalid": this.afValidation === formInputVariation_enum.FormInputValidation.ERROR
+                ? 'true'
+                : 'false', "aria-controls": this.afAriaControls, autocomplete: this.afAutocomplete, autofocus: this.afAutofocus ? this.afAutofocus : null, maxLength: this.afMaxlength, minLength: this.afMinlength, max: this.afMax, min: this.afMin, step: this.afStep, list: this.afList, role: this.afRole, dirName: this.afDirname, required: this.afRequired, id: this.afId, name: this.afName, type: this.afType, value: this.afValue }, (this.afInputmode == formInputVariation_enum.FormInputMode.DEFAULT
+            ? {}
+            : { inputmode: this.afInputmode }))), index.h("slot", { key: 'cce7fa086fdb6996753b0c86e7e3a4e441c2f3d5', name: "button" })), index.h("div", { key: '233fb68dc6d2fe40e55024732a90750009bc1818', class: "digi-form-input__footer" }, index.h("div", { key: 'd5f2fab5f4c385f4b2dc10804e265d6c04d55dd4', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-message` }, this.hasActiveValidationMessage &&
+            this.afValidation != formInputVariation_enum.FormInputValidation.NEUTRAL && (index.h("digi-form-validation-message", { key: 'bb2cd0ac275e22e95c6785f0d4c90ef37dfc6d7f', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChanged": 0
+            }],
+        "afValue": [{
+                "onAfValueChanged": 0
+            }],
+        "afValidationText": [{
+                "afValidationTextWatch": 0
+            }]
+    }; }
+};
+FormInput.style = formInputCss();
+
+exports.digi_form_input = FormInput;

package/dist/cjs/digi-form-label_3.cjs.entry.js

@@ -0,0 +1,147 @@
+'use strict';
+
+var index = require('./index-D36hZyeW.js');
+var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
+var logger_util = require('./logger.util-DUhrcCTY.js');
+var text = require('./text-Cu3CaHGj.js');
+var formValidationMessageVariation_enum = require('./form-validation-message-variation.enum-BA5nmCiw.js');
+
+const formLabelCss = () => `.sc-digi-form-label-h .digi-form-label.sc-digi-form-label{font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--label--font-size--desktop);color:var(--digi--color--text--primary);display:flex;flex-direction:column}.sc-digi-form-label-h .digi-form-label__label--label.sc-digi-form-label,.sc-digi-form-label-h .digi-form-label__label--description.sc-digi-form-label{max-width:var(--digi--paragraph-width--medium);line-height:var(--digi--typography--label-description--line-height--desktop);font-size:var(--digi--typography--label-description--font-size--desktop);display:block;user-select:text;--webkit-user-select:text}.sc-digi-form-label-h .digi-form-label__label--label.sc-digi-form-label{font-weight:var(--digi--typography--label--font-weight--desktop);cursor:pointer}.sc-digi-form-label-h .digi-form-label__label--description.sc-digi-form-label{cursor:text}`;
+
+const FormLabel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
+         * @en Set id attribute. Defaults to random string.
+         */
+        this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-label');
+        /**
+         * Sätt denna till true om formuläret innehåller fler obligatoriska fält än valfria.
+         * @en Set this to true if the form contains more required fields than optional fields.
+         */
+        this.afAnnounceIfOptional = false;
+        /**
+         * Sätter text för afRequired.
+         * @en Set text for afRequired.
+         */
+        this.afRequiredText = text._t.required.toLowerCase();
+        /**
+         * Sätter text för afAnnounceIfOptional.
+         * @en Set text for afAnnounceIfOptional.
+         */
+        this.afAnnounceIfOptionalText = text._t.optional.toLowerCase();
+    }
+    componentWillLoad() {
+        this.setLabelText();
+        this.validateFor();
+        this.handleSlotVisibility();
+    }
+    validateFor() {
+        if (this.afFor == null) {
+            logger_util.logger.warn(`digi-form-label must have a for attribute. Please add a for attribute using af-for`, this.hostElement);
+        }
+    }
+    setLabelText() {
+        this.labelText = `${this.afLabel} ${this.requiredText}`;
+        if (!this.afLabel) {
+            logger_util.logger.warn(`digi-form-label must have a label. Please add a label using af-label`, this.hostElement);
+        }
+    }
+    handleSlotVisibility() {
+        this.hasActionSlot = !!this.hostElement.querySelector('[slot="actions"]');
+    }
+    get requiredText() {
+        if (this.afRequired && !this.afAnnounceIfOptional) {
+            return this.afRequiredText ? ` (${this.afRequiredText})` : '';
+        }
+        else if (!this.afRequired && this.afAnnounceIfOptional) {
+            return this.afAnnounceIfOptionalText
+                ? ` (${this.afAnnounceIfOptionalText})`
+                : '';
+        }
+        else {
+            return '';
+        }
+    }
+    render() {
+        return (index.h("div", { key: '78c3c9cc7609ede22abcd68c16514c85b52c945e', class: "digi-form-label" }, index.h("div", { key: '5bd7a74e6508c261f489716673f011391bf7c0d8', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (index.h("label", { key: '6952422ebe4e447857befae6116fd7336046dc1f', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, index.h("span", { key: '2da61e9396c9c20b40ee4d80c21ae96e2a491e8f', tabindex: "-1", class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (index.h("span", { key: '858d2ae39681662c278352e42b7bccb511279bd0', tabindex: "-1", class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (index.h("div", { key: '7719bef7cfe38637a5ef4b71d5e9a6237ed48ff2', class: "digi-form-label__actions" }, index.h("slot", { key: '37bd2332a7d4e7fa15c4ff61a0cc26c92bed08d8', name: "actions" }))))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "afFor": [{
+                "validateFor": 0
+            }],
+        "afLabel": [{
+                "setLabelText": 0
+            }],
+        "afRequired": [{
+                "setLabelText": 0
+            }],
+        "afAnnounceIfOptional": [{
+                "setLabelText": 0
+            }]
+    }; }
+};
+FormLabel.style = formLabelCss();
+
+const formValidationMessageCss = () => `.sc-digi-form-validation-message-h{--digi--form-validation-message--icon-color--success:var(--digi--color--icon--validation--success);--digi--form-validation-message--icon-color--warning:var(--digi--color--icon--validation--warning);--digi--form-validation-message--icon-color--error:var(--digi--color--icon--validation--error)}.sc-digi-form-validation-message-h .digi-form-validation-message.sc-digi-form-validation-message{display:flex;flex-wrap:wrap;align-items:center}.sc-digi-form-validation-message-h .digi-form-validation-message--success.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--success)}.sc-digi-form-validation-message-h .digi-form-validation-message--warning.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--warning)}.sc-digi-form-validation-message-h .digi-form-validation-message--error.sc-digi-form-validation-message{--ICON-COLOR:var(--digi--form-validation-message--icon-color--error)}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message{color:var(--ICON-COLOR);margin-inline-end:var(--digi--gutter--icon)}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message>*.sc-digi-form-validation-message{--digi--icon--width:1.25em;--digi--icon--height:1.25em;--digi--icon--color:var(--ICON-COLOR);display:flex}.sc-digi-form-validation-message-h .digi-form-validation-message__icon.sc-digi-form-validation-message .warning.sc-digi-form-validation-message{top:3px;position:relative}.sc-digi-form-validation-message-h .digi-form-validation-message__text.sc-digi-form-validation-message{flex:1;font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--tag--font-size--desktop);color:var(--digi--color--text--primary)}`;
+
+const FormValidationMessage = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Sätter valideringsstatus. Kan vara 'success', 'error' eller 'warning'.
+         * @en Set validation status
+         */
+        this.afVariation = formValidationMessageVariation_enum.FormValidationMessageVariation.SUCCESS;
+    }
+    get cssModifiers() {
+        return {
+            'digi-form-validation-message--success': this.afVariation === formValidationMessageVariation_enum.FormValidationMessageVariation.SUCCESS,
+            'digi-form-validation-message--error': this.afVariation === formValidationMessageVariation_enum.FormValidationMessageVariation.ERROR,
+            'digi-form-validation-message--warning': this.afVariation === formValidationMessageVariation_enum.FormValidationMessageVariation.WARNING
+        };
+    }
+    get icon() {
+        switch (this.afVariation) {
+            case formValidationMessageVariation_enum.FormValidationMessageVariation.SUCCESS:
+                return index.h("digi-icon-validation-success", null);
+            case formValidationMessageVariation_enum.FormValidationMessageVariation.ERROR:
+                return index.h("digi-icon-validation-error", null);
+            case formValidationMessageVariation_enum.FormValidationMessageVariation.WARNING:
+                return index.h("digi-icon-validation-warning", { class: "warning" });
+        }
+    }
+    render() {
+        return (index.h("div", { key: '5f010165e073249ebf394e341afdff8a5ed41db8', class: Object.assign({ 'digi-form-validation-message': true }, this.cssModifiers) }, index.h("div", { key: '6bff114f85afb3ec53bdf9c9eec43e1f369ab69a', class: "digi-form-validation-message__icon", "aria-hidden": "true" }, this.icon), index.h("span", { key: '51223bf120314df5505300b35f7c744f89a5e5ce', class: "digi-form-validation-message__text" }, index.h("slot", { key: '2379115a27540a6422fca6d868ce2fbb931c994f' }))));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+FormValidationMessage.style = formValidationMessageCss();
+
+const iconValidationSuccessCss = () => `.sc-digi-icon-validation-success-h{--digi--icon--color:var(--digi--color--icon--primary);--digi--icon--width:initial;--digi--icon--height:auto;display:flex;min-height:1.4em;align-items:center}.sc-digi-icon-validation-success-h svg.sc-digi-icon-validation-success{color:var(--digi--icon--color);max-width:var(--digi--icon--width);max-height:var(--digi--icon--height);width:var(--digi--icon--width, auto);height:var(--digi--icon--height, auto)}`;
+
+const IconCheckCircle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * För att dölja ikonen för skärmläsare. Default är satt till true.
+         * @en Hides the icon for screen readers. Default is set to true.
+         */
+        this.afSvgAriaHidden = true;
+        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
+    }
+    render() {
+        return (index.h("svg", { key: '17db5bbcefc21fe324363bc54ed2a2617c9f925a', class: "digi-icon-validation-success", width: "25", height: "25", viewBox: "0 0 25 25", "aria-hidden": this.afSvgAriaHidden ? 'true' : 'false', "aria-labelledby": this.afSvgAriaLabelledby
+                ? this.afSvgAriaLabelledby
+                : this.afTitle
+                    ? this.titleId
+                    : undefined, xmlns: "http://www.w3.org/2000/svg" }, this.afTitle && index.h("title", { key: 'f895dcaa57b2ba196bc55382ad7cd12cc7da4aaf', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '95a3f9c27e32de783d5fe2cb7d3cb33d7ea44a3e' }, this.afDesc), index.h("path", { key: '50509fcf4cc01f7283178f2c0345b2f26613d2a1', class: "digi-icon-validation-success__shape", d: "M25 12.5C25 19.404 19.404 25 12.5 25S0 19.404 0 12.5 5.596 0 12.5 0 25 5.596 25 12.5zm-13.946 6.619l9.274-9.275a.806.806 0 000-1.14l-1.14-1.14a.806.806 0 00-1.14 0l-7.564 7.563-3.531-3.531a.807.807 0 00-1.14 0l-1.141 1.14a.806.806 0 000 1.14l5.242 5.243a.806.806 0 001.14 0z", fill: "currentColor", "fill-rule": "nonzero" })));
+    }
+};
+IconCheckCircle.style = iconValidationSuccessCss();
+
+exports.digi_form_label = FormLabel;
+exports.digi_form_validation_message = FormValidationMessage;
+exports.digi_icon_validation_success = IconCheckCircle;

package/dist/cjs/digi-form-radiogroup.cjs.entry.js

@@ -91,9 +91,9 @@ const FormRadiogroup = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '4dbf540c453ceae10ede282625b6cec774e38e7e', tabindex: -1 }, index.h("div", { key: '2c3b135f63fc23dd1cd3418e6191fb5fbf18bfce', id: this.afId, class: {
+        return (index.h(index.Host, { key: 'fe691e3d5e0ffb6d0289365a0b1f5b6443cc2bcc', tabindex: -1 }, index.h("div", { key: 'ee096645242254ca00e918facb2dc40467b51ad0', id: this.afId, class: {
                 'digi-form-radiogroup': true
-            } }, index.h("slot", { key: 'a30c5afdfac57eba9f4bbf99d649858be9fe2551', onSlotchange: () => this.setRadiobuttons(this.value || this.afValue) })), index.h("div", { key: '1c4a269da4da56c91c1792d95e2e51c41820e73e', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-text` }, this.afValidation != formRadiogroupValidation_enum.FormRadiogroupValidation.NEUTRAL && (index.h("digi-form-validation-message", { key: 'ad4781c8cfe0bd5457f4d96d1acb8894ff7256be', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
+            } }, index.h("slot", { key: '5c24b6cae4673f069fd2f5137350063b72557b07', onSlotchange: () => this.setRadiobuttons(this.value || this.afValue) })), index.h("div", { key: '3e003b80056bd750e76f46af8d81017a06856e9d', class: "digi-form-input__validation", "aria-atomic": "true", role: this.errorMessageIsAlert ? 'alert' : null, id: `${this.afId}--validation-text` }, this.afValidation != formRadiogroupValidation_enum.FormRadiogroupValidation.NEUTRAL && (index.h("digi-form-validation-message", { key: 'dbbfbbfb56db3f3029d71a2d046eaee2a1960db5', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {