@designsystem-se/af 39.2.1-beta.3 → 39.2.1-beta.4

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

@@ -0,0 +1,147 @@
+'use strict';
+
+var index = require('./index-Cn1hHaSy.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{font-weight:var(--digi--typography--label--font-weight--desktop)}.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{line-height:var(--digi--typography--label--line-height--desktop);cursor:pointer;display:block}.sc-digi-form-label-h .digi-form-label__label-group.sc-digi-form-label{display:inline-flex;align-items:center;gap:var(--digi--gutter--icon)}.sc-digi-form-label-h .digi-form-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)}`;
+
+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: 'ac9aec4d1d20cc37694af578a97a16a17291c9f3', class: "digi-form-label" }, index.h("div", { key: 'bf27c3012d1973798095e6b832572fc20863c5f1', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (index.h("label", { key: '75435e49548e4fa27330a35b033689a0ed9e99a7', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, index.h("span", { key: '0527ddcebbd2a1b215f42eaed06ba7fc28633d43', class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (index.h("span", { key: '8a3b3e6a0ec0a97adb0760b390f0ddb34b3e0b87', class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (index.h("div", { key: 'f2e6ad691a5cbc57b990416097454a393da35c01', class: "digi-form-label__actions" }, index.h("slot", { key: '1fab5cca94da7ad0f2b617db7f713d3b4d17c52d', 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: '5c89cb2cfe7085ec0203814f2c7a43c9fe518db4', class: Object.assign({ 'digi-form-validation-message': true }, this.cssModifiers) }, index.h("div", { key: 'cb85b6a6e02b081710f80ad7bbbe96e182d8c353', class: "digi-form-validation-message__icon", "aria-hidden": "true" }, this.icon), index.h("span", { key: '9b1689dcad19fd3f033c679f496a1c94348f393b', class: "digi-form-validation-message__text" }, index.h("slot", { key: '794c1b1c0771cae8c0b19bd7123f7f5bc28e99b7' }))));
+    }
+    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: '1c9dcaf014e400504cbce24f69c67bdbb1dc0361', 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: 'ed5b4d39b987b025d99ef2ce2153a8de749f587e', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: '7c5175b745577dd9076170ba83fa00f8cc03c4a2' }, this.afDesc), index.h("path", { key: 'f9cb601de2dfbf7959b2b43023692e111f1fbf91', 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-Be3UbTxs.js');
+var index = require('./index-Cn1hHaSy.js');
 var randomIdGenerator_util = require('./randomIdGenerator.util-C8XR2Tn1.js');
 var formRadiogroupValidation_enum = require('./form-radiogroup-validation.enum-DBDbjF6N.js');
 

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

@@ -1,34 +1,53 @@
 'use strict';
 
-var index = require('./index-Be3UbTxs.js');
-var typographyVariation_enum = require('./typography-variation.enum-B05du-qd.js');
-require('./badge-notification-shape.enum-CEyEo2G5.js');
+var index = require('./index-Cn1hHaSy.js');
+var typographyVariation_enum = require('./typography-variation.enum-BDSt7CVI.js');
+require('./calendar-week-view-heading-level.enum-BI2f9bbk.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-variation.enum-DkUalo9f.js');
-require('./calendar-week-view-heading-level.enum-NEkm5SUq.js');
+require('./button-variation.enum-ngMqFLdW.js');
+require('./button-type.enum-2UH0KkO-.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-pqhvdrsN.js');
+require('./info-card-variation.enum-B1cqmknX.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');