@designsystem-se/af 39.4.0-beta.darkmode.1 → 39.5.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D09d7Toa.js');
+var index = require('./index-D36hZyeW.js');
 var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
 var formRadiogroupValidation_enum = require('./form-radiogroup-validation.enum-DBDbjF6N.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 {

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

@@ -1,34 +1,55 @@
 'use strict';
 
-var index = require('./index-D09d7Toa.js');
-var typographyVariation_enum = require('./typography-variation.enum-B05du-qd.js');
+var index = require('./index-D36hZyeW.js');
+var typographyVariation_enum = require('./typography-variation.enum-C4i5DFTI.js');
 require('./badge-notification-shape.enum-CEyEo2G5.js');
 require('./badge-status-variation.enum-XX8d--rj.js');
-require('./code-example-variation.enum-BCENTUV2.js');
-require('./form-input-type.enum-B2CsNSBg.js');
+require('./button-size.enum-DgyvMkwE.js');
+require('./button-type.enum-2UH0KkO-.js');
 require('./button-variation.enum-DkUalo9f.js');
 require('./calendar-week-view-heading-level.enum-NEkm5SUq.js');
 require('./bar-chart-variation.enum-BZFN4377.js');
+require('./code-example-variation.enum-Cq-BioXW.js');
 require('./code-variation.enum-BM-hhQuD.js');
 require('./expandable-accordion-header-level.enum-CjL9V3Kt.js');
+require('./expandable-faq-item-variation.enum-aKkYAQgd.js');
 require('./expandable-faq-variation.enum-FEybT9s4.js');
+require('./footer-card-variation.enum-BPnpkC45.js');
+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-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');
+require('./info-card-variation.enum-prsWZkWC.js');
+require('./layout-container-max-width.enum-DqWtU7WK.js');
 var layoutBlockVariation_enum = require('./layout-block-variation.enum-BldWvnDk.js');
+require('./layout-columns-variation.enum-OgD-hvRN.js');
+require('./link-button-variation.enum-03cHZQxx.js');
 require('./list-type.enum-CkFOn-eB.js');
 require('./loader-skeleton-variation.enum-UvPtdesw.js');
 require('./loader-spinner-size.enum-u5AQs-UJ.js');
+require('./logo-color.enum-BJZv-f6R.js');
 require('./media-figure-alignment.enum-BWO1sg67.js');
 require('./navigation-sidebar-variation.enum-70NIGQoi.js');
+require('./navigation-vertical-menu-variation.enum-7IUICId3.js');
 require('./progress-circle-heading-level.enum-DNlyzNd6.js');
+require('./progress-indicator-heading-level.enum-CNarUduE.js');
 require('./progress-list-item-variation.enum-Dk3YS--x.js');
 require('./progress-list-variation.enum-BvLLJK9O.js');
 require('./progressbar-variation.enum-CnRJPSs7.js');
 require('./quote-image-inner-position.enum-CLifVlj0.js');
 require('./table-variation.enum-DlDZKXbq.js');
+require('./tag-media-icon.enum-DzhiwvjI.js');
 require('./tag-size.enum-DFom3Smn.js');
 require('./tools-feedback-banner-type.enum-Dyeg3XNb.js');
 require('./tools-feedback-rating-variation.enum-CBI4GhXs.js');
+require('./tools-theme-provider.brand.enum-BzduvCUY.js');
+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');
@@ -105,7 +126,7 @@ const FormReceipt = class {
         return (index.h("div", { class: "digi-form-receipt__content" }, index.h("svg", { class: "digi-form-receipt__icon", "aria-hidden": "true", version: "1.1", viewBox: "0 0 35 29" }, index.h("title", null, "Check mark"), index.h("g", { fill: "none", "fill-rule": "evenodd" }, index.h("g", { transform: "translate(-170 -32)" }, index.h("g", { transform: "translate(170 32.325)" }, index.h("g", { transform: "translate(0 .77495)" }, index.h("mask", { id: "b", fill: "white" }, index.h("polygon", { points: "0 0 26.685 0 26.685 27.689 0 27.689" })), index.h("path", { d: "m13.711 27.689c-7.5602 0-13.711-6.2103-13.711-13.844 0-7.6345 6.151-13.845 13.711-13.845 3.1693 0 6.2611 1.1179 8.7048 3.1478l-1.5894 1.9509c-1.9972-1.6592-4.5241-2.5724-7.1155-2.5724-6.181 0-11.209 5.0773-11.209 11.319 0 6.2406 5.0283 11.318 11.209 11.318 4.7924 0 9.0551-3.0733 10.607-7.6478l2.3668 0.81853c-1.8983 5.5958-7.1124 9.3556-12.974 9.3556", fill: "#333", mask: "url(#b)" })), index.h("g", { transform: "translate(4.2177)" }, index.h("mask", { id: "a", fill: "white" }, index.h("polygon", { points: "0 0 30.425 0 30.425 23.496 0 23.496" })), index.h("path", { class: "digi-form-receipt__infographic-primary", d: "m30.191 3.2545-19.95 20.007c-0.31227 0.31253-0.81758 0.31253-1.1292 0l-8.878-8.9033c-0.31164-0.31316-0.31164-0.81992 0-1.1324l1.8818-1.8878c0.31164-0.31253 0.81758-0.31253 1.1292 0l6.4315 6.4499 17.504-17.553c0.31164-0.31316 0.81695-0.31316 1.1292 0l1.8818 1.8872c0.31164 0.31253 0.31164 0.81929 0 1.1324", fill: "#95C13E", mask: "url(#a)" })))))), index.h(this.afHeadingLevel, { class: "digi-form-receipt__heading", tabIndex: -1 }, this.afText), this.slotContent));
     }
     render() {
-        return (index.h("div", { key: 'f28dea64d4e1d8600757d7c5afcaca5c33b596c9', class: Object.assign({ 'digi-form-receipt': true }, this.cssModifiers) }, this.afVariation === typographyVariation_enum.FormReceiptVariation.FULLWIDTH ? (index.h("digi-layout-block", { afVariation: layoutBlockVariation_enum.LayoutBlockVariation.TRANSPARENT }, this.content)) : (this.content)));
+        return (index.h("div", { key: 'a3f258babb2e8829afef0d9cb07cb27533c730eb', class: Object.assign({ 'digi-form-receipt': true }, this.cssModifiers) }, this.afVariation === typographyVariation_enum.FormReceiptVariation.FULLWIDTH ? (index.h("digi-layout-block", { afVariation: layoutBlockVariation_enum.LayoutBlockVariation.TRANSPARENT }, this.content)) : (this.content)));
     }
     get hostElement() { return index.getElement(this); }
 };