@designsystem-se/af 37.0.2-beta.0 → 37.0.2

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

@@ -0,0 +1,129 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-7a477838.js');
+const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
+const logger_util = require('./logger.util-fdafc086.js');
+const text = require('./text-65b1b58c.js');
+const formValidationMessageVariation_enum = require('./form-validation-message-variation.enum-855ae0be.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 DigiFormLabelStyle0 = formLabelCss;
+
+const FormLabel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.labelText = undefined;
+        this.hasActionSlot = undefined;
+        this.afLabel = undefined;
+        this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-label');
+        this.afFor = undefined;
+        this.afDescription = undefined;
+        this.afRequired = undefined;
+        this.afAnnounceIfOptional = false;
+        this.afRequiredText = text._t.required.toLowerCase();
+        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: '24ae333ab5edc928ce4d26e6e4da0f642617792a', class: "digi-form-label" }, index.h("div", { key: 'b1a5073a7c9883b13a86f741b865c3b368c1d02b', class: "digi-form-label__label-group" }, this.afFor && this.afLabel && (index.h("label", { key: '4dd98d11699d82e0e6b5f1127ca0e97382dc45d1', class: "digi-form-label__label", htmlFor: this.afFor, id: this.afId }, index.h("span", { key: 'a8c1b2cf89d24625e3c13a93bac5fd144d95a3cb', class: "digi-form-label__label--label" }, this.labelText), this.afDescription && (index.h("span", { key: '4a82c714e6b4f3189772d44bd5748c830252a8d5', class: "digi-form-label__label--description" }, this.afDescription)))), this.hasActionSlot && (index.h("div", { key: 'd07f90e8e0a8ba9061686bf7cc331480091fbb33', class: "digi-form-label__actions" }, index.h("slot", { key: '7c5f1750217d9666a6543044e6dbb29ee4839940', name: "actions" }))))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "afFor": ["validateFor"],
+        "afLabel": ["setLabelText"],
+        "afRequired": ["setLabelText"],
+        "afAnnounceIfOptional": ["setLabelText"]
+    }; }
+};
+FormLabel.style = DigiFormLabelStyle0;
+
+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 DigiFormValidationMessageStyle0 = formValidationMessageCss;
+
+const FormValidationMessage = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        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: 'b15c3cca06f4e015c7006bae470876b246b6ce06', class: Object.assign({ 'digi-form-validation-message': true }, this.cssModifiers) }, index.h("div", { key: '1e9378eb8b193c35e24e700ef865fb44ae4fb28b', class: "digi-form-validation-message__icon", "aria-hidden": "true" }, this.icon), index.h("span", { key: '6e72b4f07b641d63603914a33720d6b09a5bd44f', class: "digi-form-validation-message__text" }, index.h("slot", { key: '74cfa597bf12b19fb2dbef039eac148358ff2635' }))));
+    }
+    get hostElement() { return index.getElement(this); }
+};
+FormValidationMessage.style = DigiFormValidationMessageStyle0;
+
+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 DigiIconValidationSuccessStyle0 = iconValidationSuccessCss;
+
+const IconCheckCircle = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.afTitle = undefined;
+        this.afDesc = undefined;
+        this.afSvgAriaHidden = true;
+        this.afSvgAriaLabelledby = undefined;
+        this.titleId = randomIdGenerator_util.randomIdGenerator('icontitle');
+    }
+    render() {
+        return (index.h("svg", { key: '8e17bc8da17af20998fb67b64fc24b40461b176c', 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: '6f56caf229cfb9e2d8f6f54eaeaa4f86c9881eaf', id: this.titleId }, this.afTitle), this.afDesc && index.h("desc", { key: 'f7fa4c25a72c4ef312a8f6daedf31ce199979bc2' }, this.afDesc), index.h("path", { key: 'f90d6e4c93085c88e81ef6935289f437a6a26aa6', 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 = DigiIconValidationSuccessStyle0;
+
+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

@@ -0,0 +1,80 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-7a477838.js');
+const randomIdGenerator_util = require('./randomIdGenerator.util-e7f4b6de.js');
+const formRadiogroupValidation_enum = require('./form-radiogroup-validation.enum-03a17d4d.js');
+
+const formRadiogroupCss = ".sc-digi-form-radiogroup-h{display:block;width:fit-content}";
+const DigiFormRadiogroupStyle0 = formRadiogroupCss;
+
+const FormRadiogroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.afOnGroupChange = index.createEvent(this, "afOnGroupChange", 7);
+        this.radiobuttons = undefined;
+        this.afId = randomIdGenerator_util.randomIdGenerator('digi-form-radiogroup');
+        this.afValue = undefined;
+        this.value = undefined;
+        this.afName = randomIdGenerator_util.randomIdGenerator('digi-form-radiogroup');
+        this.afValidation = formRadiogroupValidation_enum.FormRadiogroupValidation.NEUTRAL;
+        this.afValidationText = undefined;
+        this.afErrorMessageIsAlert = true;
+    }
+    OnAfValueChange(value) {
+        this.value = value;
+    }
+    OnValueChange(value) {
+        this.afValue = value;
+        this.setRadiobuttons(value);
+    }
+    get errorMessageIsAlert() {
+        return (this.afErrorMessageIsAlert !== false &&
+            this.afErrorMessageIsAlert !== 'false');
+    }
+    /**
+     * Lyssnar på om fokus sätts på custom-elementet och propagerar ner det till den första radioknappen i gruppen
+     * @en Listens for when focus is set on the custom element and propagates it down to the first radionutton in the group.
+     */
+    focusOnGroup() {
+        const radioButtons = this.radiobuttons;
+        if (radioButtons.length > 0) {
+            radioButtons[0].focus();
+        }
+    }
+    radiobuttonChangeListener(e) {
+        if (Array.from(this.radiobuttons).includes(e.target)) {
+            e.preventDefault();
+            this.afValue = e.detail.target.value;
+            this.afOnGroupChange.emit(e.detail.target.value);
+        }
+    }
+    componentDidLoad() {
+        this.setRadiobuttons(this.value || this.afValue);
+        if (this.value)
+            this.afValue = this.value;
+    }
+    setRadiobuttons(value) {
+        this.radiobuttons = this.hostElement.querySelectorAll('digi-form-radiobutton');
+        this.radiobuttons.forEach((r) => {
+            r.afName = this.afName;
+            if (value && r.afValue == value) {
+                r.setAttribute('af-checked', 'true');
+            }
+        });
+    }
+    render() {
+        return (index.h(index.Host, { key: '0b03e0ccdc03d2f06466f9a2527f68b937637e6f', tabindex: -1 }, index.h("div", { key: '02b0862fc0645ba6c5b12480279078d0b796f5ef', id: this.afId, class: {
+                'digi-form-radiogroup': true
+            } }, index.h("digi-util-mutation-observer", { key: 'ed9e1a034e5d5221c4c004e12db780077277876e', onAfOnChange: (e) => this.radiobuttonChangeListener(e) }, index.h("slot", { key: '5572449dc6ad235472c92e8524d26688d56e1b10' }))), index.h("div", { key: 'b0696ddf7c218434fded2380f41bca17e407a797', 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: '63cde6f36e3064bd421c7d162e72ab414f5584cf', class: "digi-form-input__validation-message", "af-variation": this.afValidation }, this.afValidationText)))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "afValue": ["OnAfValueChange"],
+        "value": ["OnValueChange"]
+    }; }
+};
+FormRadiogroup.style = DigiFormRadiogroupStyle0;
+
+exports.digi_form_radiogroup = FormRadiogroup;

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

@@ -3,22 +3,32 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7a477838.js');
-const typographyVariation_enum = require('./typography-variation.enum-e41bd69d.js');
+const typographyVariation_enum = require('./typography-variation.enum-50512a4e.js');
 require('./badge-notification-shape.enum-ff802554.js');
 require('./badge-status-variation.enum-0a5adc21.js');
-require('./code-example-variation.enum-1611825e.js');
-require('./form-input-type.enum-1fb2180a.js');
+require('./button-size.enum-1fd86b9e.js');
+require('./button-type.enum-406723db.js');
 require('./button-variation.enum-bc521499.js');
 require('./calendar-week-view-heading-level.enum-fd0c841b.js');
 require('./bar-chart-variation.enum-a4e866b6.js');
+require('./code-example-variation.enum-c6557727.js');
 require('./code-variation.enum-c4a4e6fd.js');
 require('./expandable-accordion-header-level.enum-45483252.js');
+require('./expandable-faq-item-variation.enum-89427195.js');
 require('./expandable-faq-variation.enum-af923f49.js');
 require('./footer-card-variation.enum-99555edc.js');
-require('./form-validation-message-variation.enum-c5ec3e2d.js');
+require('./form-checkbox-variation.enum-d2ca879e.js');
+require('./form-file-upload-variation.enum-634cfae8.js');
+require('./form-input-search-variation.enum-c50239bc.js');
+require('./form-input-type.enum-9c8ee12a.js');
+require('./form-input-variation.enum-c750520c.js');
+require('./form-radiogroup-validation.enum-03a17d4d.js');
+require('./form-select-variation.enum-528c1bf0.js');
 require('./form-textarea-variation.enum-9c90d40f.js');
+require('./form-validation-message-variation.enum-855ae0be.js');
 require('./info-card-multi-type.enum-14746572.js');
 require('./info-card-variation.enum-64cef637.js');
+require('./layout-container-max-width.enum-7e637f44.js');
 const layoutBlockVariation_enum = require('./layout-block-variation.enum-f6102119.js');
 require('./layout-columns-variation.enum-65675649.js');
 require('./link-button-variation.enum-137785e3.js');
@@ -28,6 +38,8 @@ require('./loader-spinner-size.enum-db2973f0.js');
 require('./logo-variation.enum-607fadb4.js');
 require('./media-figure-alignment.enum-3885aba5.js');
 require('./navigation-sidebar-variation.enum-1c0c3064.js');
+require('./navigation-vertical-menu-variation.enum-c237edd3.js');
+require('./progress-indicator-variation.enum-7cf8e0e4.js');
 require('./progress-list-item-variation.enum-90e4c874.js');
 require('./progress-list-variation.enum-06d5ce27.js');
 require('./progressbar-variation.enum-aff9fa80.js');
@@ -37,6 +49,8 @@ require('./tag-media-icon.enum-372563c5.js');
 require('./tag-size.enum-387c516c.js');
 require('./tools-feedback-banner-type.enum-de373ba0.js');
 require('./tools-feedback-rating-variation.enum-2f71e84d.js');
+require('./tools-theme-provider.brand.enum-bc855272.js');
+require('./typography-heading-jumbo-variation.enum-8677e099.js');
 require('./typography-meta-variation.enum-13ac3538.js');
 require('./typography-time-variation.enum-bce1d87e.js');
 require('./util-breakpoint-observer-breakpoints.enum-e96d3a84.js');