@designsystem-se/af 37.0.1 → 37.0.2

package/components/p-5fd00d55.js

@@ -1,143 +0,0 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-a53686b3.js';
-import { r as randomIdGenerator } from './p-ffe5c0e8.js';
-import { b as FormRadiobuttonVariation, F as FormRadiobuttonLayout, a as FormRadiobuttonValidation } from './p-06625463.js';
-
-const formRadiobuttonCss = ".sc-digi-form-radiobutton-h{--digi--form-radiobutton--border-color:var(--digi--color--border--interactive--default--on-input);--digi--form-radiobutton--border-color--primary:var(--digi--color--border--interactive--selected--primary);--digi--form-radiobutton--border-color--secondary:var(--digi--color--border--interactive--selected--secondary);--digi--form-radiobutton--border-color--error:var(--digi--color--border--interactive--validation--error);--digi--form-radiobutton--box-shadow--error:var(--digi--color--border--interactive--validation--error);--digi--form-radiobutton--background-color:var(--digi--color--background--interactive--default--input-elements);--digi--form-radiobutton--background-color--primary:var(--digi--color--background--interactive--selected--primary);--digi--form-radiobutton--background-color--secondary:var(--digi--color--background--interactive--selected--secondary);--digi--form-radiobutton--background-color--error:var(--digi--color--background--interactive--validation--error);--digi--form-radiobutton--border-width:var(--digi--border-width--primary);--digi--form-radiobutton--color--marker:var(--digi--grayscale--0);--digi--form-radiobutton--size:1.25rem;--digi--form-radiobutton--marker--size:calc(var(--digi--typography--input--font-size--desktop-large) * 0.4);--digi--form-radiobutton--height:var(--digi--input-height--large);--digi--form-radiobutton--border-radius:var(--digi--border-radius--primary);--digi--form-radiobutton--padding:var(--digi--gutter--icon);--digi--form-radiobutton--padding--block:var(--digi--gutter--small);--digi--form-radiobutton--padding--inline:var(--digi--gutter--icon)}.sc-digi-form-radiobutton-h .digi-form-radiobutton.sc-digi-form-radiobutton{--BACKGROUND--DEFAULT:var(--digi--form-radiobutton--background-color);--BORDER-COLOR--DEFAULT:var(--digi--form-radiobutton--border-color);position:relative}.sc-digi-form-radiobutton-h .digi-form-radiobutton--primary.sc-digi-form-radiobutton{--BACKGROUND--CHECKED:var(--digi--form-radiobutton--background-color--primary);--BORDER-COLOR--CHECKED:var(--digi--form-radiobutton--border-color--primary)}.sc-digi-form-radiobutton-h .digi-form-radiobutton--secondary.sc-digi-form-radiobutton{--BACKGROUND--CHECKED:var(--digi--form-radiobutton--background-color--secondary);--BORDER-COLOR--CHECKED:var(--digi--form-radiobutton--border-color--secondary)}.sc-digi-form-radiobutton-h .digi-form-radiobutton--error.sc-digi-form-radiobutton .digi-form-radiobutton__input.sc-digi-form-radiobutton:not(:checked)~.digi-form-radiobutton__label.sc-digi-form-radiobutton .digi-form-radiobutton__circle.sc-digi-form-radiobutton{--BACKGROUND--CHECKED:var(--digi--form-radiobutton--background-color--error);--BORDER-COLOR--CHECKED:var(--digi--form-radiobutton--border-color--error)}.sc-digi-form-radiobutton-h .digi-form-radiobutton--error.sc-digi-form-radiobutton .digi-form-radiobutton__input.sc-digi-form-radiobutton~.digi-form-radiobutton__label.sc-digi-form-radiobutton .digi-form-radiobutton__circle.sc-digi-form-radiobutton{background-color:var(--BACKGROUND--CHECKED);border-color:var(--BORDER-COLOR--CHECKED);box-shadow:0 0 0 var(--digi--border-width--primary) var(--digi--form-radiobutton--box-shadow--error)}.digi-form-radiobutton__input.sc-digi-form-radiobutton{position:absolute;opacity:0;cursor:pointer;height:0;width:0;top:0;left:0}.digi-form-radiobutton__label.sc-digi-form-radiobutton{display:inline-flex;align-items:center;gap:var(--digi--gutter--icon);font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--body--font-size--desktop);color:var(--digi--color--text--primary);font-weight:var(--digi--typography--body--font-weight--desktop);cursor:pointer;margin-bottom:0.75rem}.digi-form-radiobutton__circle.sc-digi-form-radiobutton{flex-shrink:0;align-self:flex-start;cursor:pointer;background-color:var(--BACKGROUND--DEFAULT);border-color:var(--BORDER-COLOR--DEFAULT);border-width:var(--digi--form-radiobutton--border-width);border-style:solid;height:var(--digi--form-radiobutton--size);width:var(--digi--form-radiobutton--size);border-radius:var(--digi--form-radiobutton--size);position:relative;transform:translateY(1px)}.digi-form-radiobutton__input.sc-digi-form-radiobutton:focus-visible~.digi-form-radiobutton__label.sc-digi-form-radiobutton .digi-form-radiobutton__circle.sc-digi-form-radiobutton{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.digi-form-radiobutton__input.sc-digi-form-radiobutton:focus:not(:checked)~.digi-form-radiobutton__label.sc-digi-form-radiobutton .digi-form-radiobutton__circle.sc-digi-form-radiobutton{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.digi-form-radiobutton__input.sc-digi-form-radiobutton:checked~.digi-form-radiobutton__label.sc-digi-form-radiobutton .digi-form-radiobutton__circle.sc-digi-form-radiobutton{background-color:var(--BACKGROUND--CHECKED);border-color:var(--BORDER-COLOR--CHECKED)}.digi-form-radiobutton__input.sc-digi-form-radiobutton:checked~.digi-form-radiobutton__label.sc-digi-form-radiobutton .digi-form-radiobutton__circle.sc-digi-form-radiobutton::after{content:\"\";width:var(--digi--form-radiobutton--marker--size);height:var(--digi--form-radiobutton--marker--size);border-radius:var(--digi--form-radiobutton--marker--size);background:var(--digi--form-radiobutton--color--marker);position:absolute;left:calc(50% - var(--digi--form-radiobutton--marker--size) / 2);top:calc(50% - var(--digi--form-radiobutton--marker--size) / 2)}";
-const DigiFormRadiobuttonStyle0 = formRadiobuttonCss;
-
-const FormRadiobutton = /*@__PURE__*/ proxyCustomElement(class FormRadiobutton extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.afOnChange = createEvent(this, "afOnChange", 7);
-        this.afOnBlur = createEvent(this, "afOnBlur", 7);
-        this.afOnFocus = createEvent(this, "afOnFocus", 7);
-        this.afOnFocusout = createEvent(this, "afOnFocusout", 7);
-        this.afOnInput = createEvent(this, "afOnInput", 7);
-        this.afOnDirty = createEvent(this, "afOnDirty", 7);
-        this.afOnTouched = createEvent(this, "afOnTouched", 7);
-        this.afOnReady = createEvent(this, "afOnReady", 3);
-        this.dirty = false;
-        this.touched = false;
-        this.afLabel = undefined;
-        this.afVariation = FormRadiobuttonVariation.PRIMARY;
-        this.afLayout = FormRadiobuttonLayout.INLINE;
-        this.afName = undefined;
-        this.afId = randomIdGenerator('digi-form-radiobutton');
-        this.afRequired = undefined;
-        this.value = undefined;
-        this.afValue = undefined;
-        this.checked = undefined;
-        this.afChecked = undefined;
-        this.afValidation = undefined;
-        this.afAriaLabelledby = undefined;
-        this.afAriaDescribedby = undefined;
-        this.afAutofocus = undefined;
-    }
-    onValueChanged(newValue) {
-        this.afChecked = newValue === this.afValue;
-    }
-    onCheckedChanged(checked) {
-        this.afChecked = checked;
-    }
-    onAfCheckedChanged(checked) {
-        this.checked = checked;
-    }
-    /**
-     * Hämta 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();
-    }
-    componentDidLoad() {
-        this.afOnReady.emit();
-    }
-    get cssModifiers() {
-        return {
-            'digi-form-radiobutton--error': this.afValidation === FormRadiobuttonValidation.ERROR,
-            'digi-form-radiobutton--primary': this.afVariation === FormRadiobuttonVariation.PRIMARY,
-            'digi-form-radiobutton--secondary': this.afVariation === FormRadiobuttonVariation.SECONDARY,
-            [`digi-form-radiobutton--layout-${this.afLayout}`]: !!this.afLayout
-        };
-    }
-    blurHandler(e) {
-        if (!this.touched) {
-            this.afOnTouched.emit(e);
-            this.touched = true;
-        }
-        this.afOnBlur.emit(e);
-    }
-    changeHandler(e) {
-        this.afOnChange.emit(e);
-    }
-    focusHandler(e) {
-        this.afOnFocus.emit(e);
-    }
-    focusoutHandler(e) {
-        this.afOnFocusout.emit(e);
-    }
-    inputHandler(e) {
-        if (!this.dirty) {
-            this.afOnDirty.emit(e);
-            this.dirty = true;
-        }
-        this.afOnInput.emit(e);
-    }
-    render() {
-        return (h(Host, { key: 'c219f20c710f23829a44887396b31f03860b5071', tabindex: -1 }, h("div", { key: '8a79373d73a6a2285694738d15e735dffa06f058', class: Object.assign({ 'digi-form-radiobutton': true }, this.cssModifiers) }, h("input", { key: 'eaf8472603390c55b3857f1918094494b0ff38f9', class: "digi-form-radiobutton__input", ref: (el) => (this._input = el), onInput: (e) => this.inputHandler(e), onBlur: (e) => this.blurHandler(e), onChange: (e) => this.changeHandler(e), onFocus: (e) => this.focusHandler(e), onFocusout: (e) => this.focusoutHandler(e), "aria-describedby": this.afAriaDescribedby, "aria-labelledby": this.afAriaLabelledby, "aria-invalid": this.afValidation === FormRadiobuttonValidation.ERROR
-                ? 'true'
-                : 'false', required: this.afRequired, id: this.afId, name: this.afName, type: "radio", checked: this.afChecked, value: this.afValue, autofocus: this.afAutofocus ? this.afAutofocus : null }), h("label", { key: 'f3049d0f425c3f756f6e157a0a9f243541dbd468', htmlFor: this.afId, class: "digi-form-radiobutton__label" }, h("span", { key: '3114e3bc85e870e916dd642a448bd4016e7b648e', class: "digi-form-radiobutton__circle" }), this.afLabel))));
-    }
-    get hostElement() { return this; }
-    static get watchers() { return {
-        "value": ["onValueChanged"],
-        "checked": ["onCheckedChanged"],
-        "afChecked": ["onAfCheckedChanged"]
-    }; }
-    static get style() { return DigiFormRadiobuttonStyle0; }
-}, [2, "digi-form-radiobutton", {
-        "afLabel": [1, "af-label"],
-        "afVariation": [1, "af-variation"],
-        "afLayout": [1, "af-layout"],
-        "afName": [1, "af-name"],
-        "afId": [1, "af-id"],
-        "afRequired": [4, "af-required"],
-        "value": [1],
-        "afValue": [1, "af-value"],
-        "checked": [4],
-        "afChecked": [4, "af-checked"],
-        "afValidation": [1, "af-validation"],
-        "afAriaLabelledby": [1, "af-aria-labelledby"],
-        "afAriaDescribedby": [1, "af-aria-describedby"],
-        "afAutofocus": [4, "af-autofocus"],
-        "dirty": [32],
-        "touched": [32],
-        "afMGetFormControlElement": [64]
-    }, [[0, "focus", "focusOnInput"]], {
-        "value": ["onValueChanged"],
-        "checked": ["onCheckedChanged"],
-        "afChecked": ["onAfCheckedChanged"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["digi-form-radiobutton"];
-    components.forEach(tagName => { switch (tagName) {
-        case "digi-form-radiobutton":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, FormRadiobutton);
-            }
-            break;
-    } });
-}
-
-export { FormRadiobutton as F, defineCustomElement as d };