@uh-design-system/component-library 1.4.0-rc.2 → 1.4.0

package/dist/components/ds-checkbox-group.js

@@ -1,413 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, F as Fragment } from './p-GalXVdFP.js';
-import { c as classNames } from './p-BfTCfPZ1.js';
-import { i as inheritAriaAttributes, a as inheritAttributes } from './p-BecId8t2.js';
-import { i as idGenerator, t as transformTagName, d as declareComponentDependencies } from './p-J5Ghj1_T.js';
-import { g as getRequiredText, a as getOptionalText, c as atLeastOneOption, d as allOptions } from './p-BGV-ubOj.js';
-import { c as cx } from './p-C34PGDVY.js';
-import { d as defineCustomElement$5 } from './p-DojIH0Sw.js';
-import { d as defineCustomElement$4 } from './p-3TYR8XT2.js';
-import { d as defineCustomElement$3 } from './p-DIxFOW85.js';
-import { d as defineCustomElement$2 } from './p-BVcTj6fF.js';
-
-const dsCheckboxGroupCss = ".ds-checkbox-group__oSBnIJ{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__oSBnIJ__legend{color:var(--ds-textColor-default);padding-inline:0;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-group__oSBnIJ__assistive-text{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}.ds-checkbox-group__oSBnIJ__error{display:flex}.ds-checkbox-group__oSBnIJ__error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-checkbox-group__oSBnIJ>.ds-checkbox-group__oSBnIJ__checkboxes{display:inline-flex;flex-direction:column}.ds-checkbox-group__oSBnIJ--inset{margin-left:var(--ds-spacing-medium)}.ds-checkbox-group__oSBnIJ--horizontal>.ds-checkbox-group__oSBnIJ__checkboxes{flex-flow:row wrap;gap:var(--ds-spacing-small)}";
-
-const fieldsetIdGenerator = idGenerator('ds-checkbox-group');
-const DsCheckboxGroup$1 = proxyCustomElement(class DsCheckboxGroup extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.__attachShadow();
-        this.dsCheckboxGroupChange = createEvent(this, "dsCheckboxGroupChange");
-        this.dsCheckboxGroupIndeterminateChildChange = createEvent(this, "dsCheckboxGroupIndeterminateChildChange");
-        this.dsCheckboxGroupInvalidStateChange = createEvent(this, "dsCheckboxGroupInvalidStateChange");
-        this.dsSubmitInvalid = createEvent(this, "dsSubmitInvalid");
-        this.dsValidity = createEvent(this, "dsValidity");
-        this.internals = this.attachInternals();
-    }
-    checkboxElem;
-    fieldsetId = fieldsetIdGenerator.next().value;
-    checkboxId = `${this.fieldsetId}-checkbox`;
-    legendId = `${this.fieldsetId}-legend`;
-    errorTextId = `${this.fieldsetId}-error`;
-    assistiveTextId = `${this.fieldsetId}-assistive-text`;
-    nestedId = `${this.fieldsetId}-nested`;
-    childBlurTimeout = null;
-    inheritedAttributes = {};
-    get el() { return this; }
-    internals;
-    dsCheckboxGroupChange;
-    dsCheckboxGroupIndeterminateChildChange;
-    dsCheckboxGroupInvalidStateChange;
-    dsSubmitInvalid;
-    dsValidity;
-    dsForm;
-    dsLabel;
-    dsAssistiveText;
-    dsDirection = 'vertical';
-    dsErrorText = '';
-    dsText = '';
-    dsChecked = false;
-    dsDisabled = false;
-    dsRequired = false;
-    dsAllRequired = false;
-    dsOptional = false;
-    dsOptionalText;
-    dsName;
-    get dsId() {
-        return this.checkboxId;
-    }
-    childElementsCount = 0;
-    checkedChildElementCount = 0;
-    isIndeterminate = false;
-    indeterminateChildCheckboxCount = 0;
-    focusedChildCheckbox;
-    wasInvalidOnBlur = false;
-    elementIs = (tagName) => (element) => element.tagName.toLowerCase() === transformTagName(tagName, 'ds-checkbox-group', this.el);
-    elementIsCheckbox = this.elementIs('ds-checkbox');
-    elementIsCheckboxGroup = this.elementIs('ds-checkbox-group');
-    async setFocus() {
-        if (this.checkboxElem) {
-            this.checkboxElem.setFocus();
-            return;
-        }
-        this.getEnabledChildCheckboxElements()?.[0]?.setFocus();
-    }
-    async checkValidity() {
-        return this.internals?.checkValidity();
-    }
-    async setChecked(newValue) {
-        this.updateChildElementsChecked(newValue);
-    }
-    async childConnected() {
-        this.childElementsCount = this.getChildElements().length;
-    }
-    async childDisconnected() {
-        this.childElementsCount = this.getChildElements().length;
-    }
-    getLegendText = () => {
-        if (this.dsRequired || this.dsAllRequired) {
-            return getRequiredText(this.dsLabel);
-        }
-        if (this.dsOptional) {
-            return getOptionalText(this.dsLabel, this.dsOptionalText);
-        }
-        return this.dsLabel;
-    };
-    getChildElements = () => {
-        const slot = this.el.shadowRoot.querySelector('slot:not([name])');
-        return (slot?.assignedElements() || []);
-    };
-    getChildCheckboxElements = () => {
-        return this.getChildElements().filter(this.elementIsCheckbox);
-    };
-    getEnabledChildCheckboxElements = () => {
-        return this.getChildCheckboxElements().filter((element) => !element.dsDisabled);
-    };
-    updateChildElements = (updateFn) => {
-        this.getChildElements().forEach(updateFn);
-    };
-    updateChildCheckboxes = (updateFn) => {
-        this.getChildCheckboxElements().forEach(updateFn);
-    };
-    updateChildElementsChecked = (checked) => {
-        this.checkedChildElementCount = checked ? this.childElementsCount : 0;
-        this.updateChildElements((element) => {
-            element.dsChecked = checked;
-            if (this.elementIsCheckboxGroup(element)) {
-                (async () => {
-                    await element.setChecked(checked);
-                })();
-            }
-        });
-    };
-    dsDisabledObserver(newValue) {
-        this.updateChildElements((element) => {
-            element.dsDisabled = newValue;
-        });
-    }
-    dsAllRequiredObserver(newValue) {
-        this.updateChildElements((element) => {
-            element.dsRequired = newValue;
-        });
-    }
-    dsCheckedObserver(newValue) {
-        this.updateChildElementsChecked(newValue);
-    }
-    isIndeterminateObserver(newValue) {
-        this.dsCheckboxGroupIndeterminateChildChange.emit({ id: this.fieldsetId, indeterminate: newValue });
-    }
-    dsErrorTextObserver(newValue) {
-        this.updateChildCheckboxes((element, index) => {
-            if (index === 0 && newValue) {
-                element.setAttribute('aria-describedby', this.errorTextId);
-            }
-            else if (index === 0 && !newValue) {
-                element.removeAttribute('aria-describedby');
-            }
-        });
-        this.dsCheckboxGroupInvalidStateChange.emit(newValue);
-    }
-    dsFormAssociatedPropObserver(newValue, _oldValue, propName) {
-        this.getChildCheckboxElements().forEach(checkbox => {
-            checkbox[propName] = newValue;
-        });
-    }
-    listenIndeterminateChildChange(event) {
-        this.indeterminateChildCheckboxCount = event.detail.indeterminate ? this.indeterminateChildCheckboxCount + 1 : this.indeterminateChildCheckboxCount - 1;
-    }
-    childElementsCountObserver(newValue, oldValue) {
-        this.updateChildCheckboxes((element, index) => {
-            if (index === 0 && this.dsErrorText) {
-                element.setAttribute('aria-describedby', this.errorTextId);
-            }
-            element.dsErrorsDisabled = true;
-            if (this.dsAllRequired) {
-                element.dsRequired = true;
-            }
-            if (this.dsForm) {
-                element.dsForm = this.dsForm;
-            }
-        });
-        if (oldValue === this.checkedChildElementCount && oldValue > 0) {
-            this.checkedChildElementCount = newValue;
-            this.updateChildElementsChecked(true);
-        }
-    }
-    checkedChildElementCountObserver() {
-        this.isIndeterminate = this.checkedChildElementCount > 0 && this.checkedChildElementCount < this.childElementsCount;
-        if (this.dsRequired && this.checkedChildElementCount === 0) {
-            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getChildCheckboxElements()?.[0]?.querySelector('input'));
-        }
-        else if (this.dsAllRequired && this.checkedChildElementCount !== this.childElementsCount) {
-            this.internals?.setValidity({ valueMissing: true }, allOptions(), this.getChildCheckboxElements()?.[0]?.querySelector('input'));
-        }
-        else {
-            this.internals?.setValidity({});
-        }
-        if (this.wasInvalidOnBlur) {
-            this.dsValidity.emit({
-                flag: this.internals?.validity.valid ? 'valid' : 'customError',
-                message: this.internals?.validationMessage,
-            });
-        }
-    }
-    updateCheckedChildElementCount = (checked) => {
-        this.checkedChildElementCount += checked ? 1 : -1;
-    };
-    listenCheckboxChange(event) {
-        if (event.target === this.el && this.checkboxElem) {
-            this.checkedChildElementCount = this.checkboxElem.dsChecked ? this.childElementsCount : 0;
-            this.updateChildElementsChecked(this.checkboxElem.dsChecked);
-            this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: this.checkboxElem.dsChecked });
-            return;
-        }
-        const target = event.target;
-        const checkbox = target.closest(transformTagName('ds-checkbox', 'ds-checkbox-group', this.el));
-        if (this.getChildCheckboxElements().includes(checkbox)) {
-            const previousCheckedChildElementCount = this.checkedChildElementCount;
-            this.updateCheckedChildElementCount(checkbox.dsChecked);
-            if (this.checkedChildElementCount === this.childElementsCount && this.checkedChildElementCount > previousCheckedChildElementCount) {
-                this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: true });
-            }
-            else if (previousCheckedChildElementCount === this.childElementsCount && this.checkedChildElementCount < previousCheckedChildElementCount) {
-                this.dsCheckboxGroupChange.emit({ id: this.fieldsetId, checked: false });
-            }
-        }
-    }
-    listenCheckboxGroupChange(event) {
-        if (this.getChildElements().includes(event.target)) {
-            event.stopPropagation();
-            this.updateCheckedChildElementCount(event.detail.checked);
-        }
-    }
-    focusedChildCheckboxObserver(newValue) {
-        if (!newValue) {
-            this.wasInvalidOnBlur = !this.internals?.validity.valid;
-            this.dsValidity.emit({
-                flag: this.internals?.validity.valid ? 'valid' : 'customError',
-                message: this.internals?.validationMessage,
-            });
-        }
-    }
-    listenFocus(e) {
-        this.focusedChildCheckbox = e.detail;
-    }
-    listenBlur(e) {
-        this.childBlurTimeout = setTimeout(() => {
-            if (e.detail === this.focusedChildCheckbox) {
-                this.focusedChildCheckbox = undefined;
-            }
-        }, 0);
-    }
-    formResetCallback() {
-        this.dsErrorText = '';
-        this.childElementsCount = 0;
-        this.checkedChildElementCount = 0;
-        this.isIndeterminate = false;
-        this.indeterminateChildCheckboxCount = 0;
-        if (this.dsRequired) {
-            this.internals?.setValidity({ valueMissing: true }, atLeastOneOption(), this.getChildCheckboxElements()?.[0]?.querySelector('input'));
-        }
-        else if (this.dsAllRequired) {
-            this.internals?.setValidity({ valueMissing: true }, allOptions(), this.getChildCheckboxElements()?.[0]?.querySelector('input'));
-        }
-        else {
-            this.internals?.setValidity({});
-        }
-    }
-    connectedCallback() {
-        if (this.internals?.form) {
-            this.el.addEventListener('invalid', this.handleInvalid);
-        }
-    }
-    disconnectedCallback() {
-        if (this.internals?.form) {
-            this.el.removeEventListener('invalid', this.handleInvalid);
-        }
-        if (this.childBlurTimeout) {
-            clearTimeout(this.childBlurTimeout);
-        }
-        this.childBlurTimeout = null;
-    }
-    handleInvalid = (e) => {
-        e.preventDefault();
-        this.dsSubmitInvalid.emit({
-            flag: 'customError',
-            message: this.internals?.validationMessage,
-        });
-    };
-    componentWillLoad() {
-        this.inheritedAttributes = {
-            ...inheritAttributes(this, this.el),
-            ...inheritAriaAttributes(this.el, ['aria-labelledby']),
-        };
-    }
-    componentDidLoad() {
-        this.childElementsCount = this.getChildElements().length;
-    }
-    ariaAttributeObserver(newValue, _oldValue, propName) {
-        this.inheritedAttributes = {
-            ...this.inheritedAttributes,
-            [propName]: newValue,
-        };
-        forceUpdate(this);
-    }
-    render() {
-        const baseClass = cx('ds-checkbox-group');
-        const classes = classNames(baseClass, {
-            [`${baseClass}--horizontal`]: this.dsDirection === 'horizontal',
-        });
-        const legendClasses = classNames(`${baseClass}__legend`);
-        const assistiveTextClasses = classNames(`${baseClass}__assistive-text`);
-        const errorClasses = classNames(`${baseClass}__error`, {
-            [`${baseClass}__error--visible`]: !!this.dsErrorText,
-        });
-        const nestedClasses = classNames(`${baseClass}`, `${baseClass}--inset`);
-        const checkboxesClasses = classNames(`${baseClass}__checkboxes`);
-        const DsCheckbox = transformTagName('ds-checkbox', 'ds-checkbox-group', this.el);
-        const DsInputValidity = transformTagName('ds-input-validity', 'ds-checkbox-group', this.el);
-        return (h("fieldset", { key: '97c33f7bfa88e2f5e65ec4b2e1acf3eae38735a5', class: classes, id: this.fieldsetId, name: this.dsName, form: this.dsForm, "aria-labelledby": `${this.legendId} ${this.dsErrorText && this.errorTextId}`, ...this.inheritedAttributes }, this.dsLabel && (h("legend", { key: '30fede2edca715e8c0f7be36e2f2b96818f668d1', id: this.legendId, class: legendClasses }, this.getLegendText())), this.dsAssistiveText && (h("small", { key: '28a6a32ccef64f5032cc5db8cad62e43695bed85', class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.dsText ? (h(Fragment, null, h(DsCheckbox, { ref: checkboxElem => (this.checkboxElem = checkboxElem), dsId: this.checkboxId, dsText: this.dsText, dsChecked: this.checkedChildElementCount === this.childElementsCount, dsDisabled: this.dsDisabled, dsIndeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate, dsErrorText: this.dsErrorText, dsErrorsDisabled: true }), h("fieldset", { id: this.nestedId, "aria-label": this.dsText, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), !!this.dsErrorText && (h("div", { key: 'd8b664aed2374d434160f2434e3ad7e6075361eb', class: errorClasses }, h(DsInputValidity, { key: '2a6aa333b8c99be0034866eccdc2520df08fe1b7', id: this.errorTextId, dsText: this.dsErrorText, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
-    }
-    static get delegatesFocus() { return true; }
-    static get formAssociated() { return true; }
-    static get watchers() { return {
-        "dsDisabled": ["dsDisabledObserver"],
-        "dsAllRequired": ["dsAllRequiredObserver"],
-        "dsChecked": ["dsCheckedObserver"],
-        "isIndeterminate": ["isIndeterminateObserver"],
-        "dsErrorText": ["dsErrorTextObserver"],
-        "dsForm": ["dsFormAssociatedPropObserver"],
-        "dsName": ["dsFormAssociatedPropObserver"],
-        "childElementsCount": ["childElementsCountObserver", "checkedChildElementCountObserver"],
-        "checkedChildElementCount": ["checkedChildElementCountObserver"],
-        "focusedChildCheckbox": ["focusedChildCheckboxObserver"],
-        "aria-required": ["ariaAttributeObserver"],
-        "aria-invalid": ["ariaAttributeObserver"]
-    }; }
-    static get style() { return dsCheckboxGroupCss; }
-}, [337, "ds-checkbox-group", {
-        "dsForm": [1, "ds-form"],
-        "dsLabel": [1, "ds-label"],
-        "dsAssistiveText": [1, "ds-assistive-text"],
-        "dsDirection": [1, "ds-direction"],
-        "dsErrorText": [1025, "ds-error-text"],
-        "dsText": [1, "ds-text"],
-        "dsChecked": [4, "ds-checked"],
-        "dsDisabled": [4, "ds-disabled"],
-        "dsRequired": [4, "ds-required"],
-        "dsAllRequired": [4, "ds-all-required"],
-        "dsOptional": [4, "ds-optional"],
-        "dsOptionalText": [1, "ds-optional-text"],
-        "dsName": [1, "ds-name"],
-        "dsId": [2049, "ds-id"],
-        "childElementsCount": [32],
-        "checkedChildElementCount": [32],
-        "isIndeterminate": [32],
-        "indeterminateChildCheckboxCount": [32],
-        "focusedChildCheckbox": [32],
-        "wasInvalidOnBlur": [32],
-        "setFocus": [64],
-        "checkValidity": [64],
-        "setChecked": [64],
-        "childConnected": [64],
-        "childDisconnected": [64]
-    }, [[0, "dsCheckboxGroupIndeterminateChildChange", "listenIndeterminateChildChange"], [0, "input", "listenCheckboxChange"], [0, "dsCheckboxGroupChange", "listenCheckboxGroupChange"], [0, "dsFocus", "listenFocus"], [0, "dsBlur", "listenBlur"]], {
-        "dsDisabled": ["dsDisabledObserver"],
-        "dsAllRequired": ["dsAllRequiredObserver"],
-        "dsChecked": ["dsCheckedObserver"],
-        "isIndeterminate": ["isIndeterminateObserver"],
-        "dsErrorText": ["dsErrorTextObserver"],
-        "dsForm": ["dsFormAssociatedPropObserver"],
-        "dsName": ["dsFormAssociatedPropObserver"],
-        "childElementsCount": ["childElementsCountObserver", "checkedChildElementCountObserver"],
-        "checkedChildElementCount": ["checkedChildElementCountObserver"],
-        "focusedChildCheckbox": ["focusedChildCheckboxObserver"],
-        "aria-required": ["ariaAttributeObserver"],
-        "aria-invalid": ["ariaAttributeObserver"]
-    }]);
-declareComponentDependencies([h("ds-checkbox", null), h("ds-checkbox-group", null), h("ds-input-validity", null)]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["ds-checkbox-group", "ds-checkbox", "ds-checkbox-group", "ds-feedback", "ds-icon", "ds-input-validity"];
-    components.forEach(tagName => { switch (tagName) {
-        case "ds-checkbox-group":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DsCheckboxGroup$1);
-            }
-            break;
-        case "ds-checkbox":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "ds-checkbox-group":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-        case "ds-feedback":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "ds-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "ds-input-validity":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DsCheckboxGroup = DsCheckboxGroup$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsCheckboxGroup, defineCustomElement };
+import{p as e,H as s,c as t,f as i,h as d,F as h,t as r}from"./p-D7drWwKe.js";import{c as o}from"./p-BfTCfPZ1.js";import{i as c,a}from"./p-BecId8t2.js";import{i as l,t as n,d as b}from"./p-J5Ghj1_T.js";import{g as u,a as m,c as C,d as k}from"./p-DBW_vEKT.js";import{c as p}from"./p-DgTb4Jpc.js";import{d as x}from"./p-Cv3PkbWi.js";import{d as v}from"./p-cBjVr9Tq.js";import{d as g}from"./p-BRKwvv98.js";import{d as f}from"./p-qyZAXct-.js";import{d as E}from"./p-tTA4zhDH.js";const _=l("ds-checkbox-group"),O=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dsCheckboxGroupChange=t(this,"dsCheckboxGroupChange",7),this.dsCheckboxGroupIndeterminateChildChange=t(this,"dsCheckboxGroupIndeterminateChildChange",7),this.dsCheckboxGroupInvalidStateChange=t(this,"dsCheckboxGroupInvalidStateChange",7),this.dsSubmitInvalid=t(this,"dsSubmitInvalid",7),this.dsValidity=t(this,"dsValidity",7),this.internals=this.attachInternals()}checkboxElem;fieldsetId=_.next().value;checkboxId=this.fieldsetId+"-checkbox";legendId=this.fieldsetId+"-legend";errorTextId=this.fieldsetId+"-error";assistiveTextId=this.fieldsetId+"-assistive-text";nestedId=this.fieldsetId+"-nested";childBlurTimeout=null;inheritedAttributes={};get el(){return this}internals;dsCheckboxGroupChange;dsCheckboxGroupIndeterminateChildChange;dsCheckboxGroupInvalidStateChange;dsSubmitInvalid;dsValidity;dsForm;dsLabel;dsAssistiveText;dsDirection="vertical";dsErrorText="";dsText="";dsChecked=!1;dsDisabled=!1;dsRequired=!1;dsAllRequired=!1;dsOptional=!1;dsOptionalText;dsName;get dsId(){return this.checkboxId}childElementsCount=0;checkedChildElementCount=0;isIndeterminate=!1;indeterminateChildCheckboxCount=0;focusedChildCheckbox;wasInvalidOnBlur=!1;elementIs=e=>s=>s.tagName.toLowerCase()===n(e,"ds-checkbox-group",this.el);elementIsCheckbox=this.elementIs("ds-checkbox");elementIsCheckboxGroup=this.elementIs("ds-checkbox-group");async setFocus(){this.checkboxElem?this.checkboxElem.setFocus():this.getEnabledChildCheckboxElements()?.[0]?.setFocus()}async checkValidity(){return this.internals?.checkValidity()}async setChecked(e){this.updateChildElementsChecked(e)}async childConnected(){this.childElementsCount=this.getChildElements().length}async childDisconnected(){this.childElementsCount=this.getChildElements().length}getLegendText=()=>this.dsRequired||this.dsAllRequired?u(this.dsLabel):this.dsOptional?m(this.dsLabel,this.dsOptionalText):this.dsLabel;getChildElements=()=>{const e=this.el.shadowRoot.querySelector("slot:not([name])");return e?.assignedElements()||[]};getChildCheckboxElements=()=>this.getChildElements().filter(this.elementIsCheckbox);getEnabledChildCheckboxElements=()=>this.getChildCheckboxElements().filter((e=>!e.dsDisabled));updateChildElements=e=>{this.getChildElements().forEach(e)};updateChildCheckboxes=e=>{this.getChildCheckboxElements().forEach(e)};updateChildElementsChecked=e=>{this.checkedChildElementCount=e?this.childElementsCount:0,this.updateChildElements((s=>{s.dsChecked=e,this.elementIsCheckboxGroup(s)&&(async()=>{await s.setChecked(e)})()}))};dsDisabledObserver(e){this.updateChildElements((s=>{s.dsDisabled=e}))}dsAllRequiredObserver(e){this.updateChildElements((s=>{s.dsRequired=e}))}dsCheckedObserver(e){this.updateChildElementsChecked(e)}isIndeterminateObserver(e){this.dsCheckboxGroupIndeterminateChildChange.emit({id:this.fieldsetId,indeterminate:e})}dsErrorTextObserver(e){this.updateChildCheckboxes(((s,t)=>{0===t&&e?s.setAttribute("aria-describedby",this.errorTextId):0!==t||e||s.removeAttribute("aria-describedby")})),this.dsCheckboxGroupInvalidStateChange.emit(e)}dsFormAssociatedPropObserver(e,s,t){this.getChildCheckboxElements().forEach((s=>{s[t]=e}))}listenIndeterminateChildChange(e){this.indeterminateChildCheckboxCount=e.detail.indeterminate?this.indeterminateChildCheckboxCount+1:this.indeterminateChildCheckboxCount-1}childElementsCountObserver(e,s){this.updateChildCheckboxes(((e,s)=>{0===s&&this.dsErrorText&&e.setAttribute("aria-describedby",this.errorTextId),e.dsErrorsDisabled=!0,this.dsAllRequired&&(e.dsRequired=!0),this.dsForm&&(e.dsForm=this.dsForm)})),s===this.checkedChildElementCount&&s>0&&(this.checkedChildElementCount=e,this.updateChildElementsChecked(!0))}checkedChildElementCountObserver(){this.isIndeterminate=this.checkedChildElementCount>0&&this.checkedChildElementCount<this.childElementsCount,this.dsRequired&&0===this.checkedChildElementCount?this.internals?.setValidity({valueMissing:!0},C(),this.getChildCheckboxElements()?.[0]?.querySelector("input")):this.dsAllRequired&&this.checkedChildElementCount!==this.childElementsCount?this.internals?.setValidity({valueMissing:!0},k(),this.getChildCheckboxElements()?.[0]?.querySelector("input")):this.internals?.setValidity({}),this.wasInvalidOnBlur&&this.dsValidity.emit({flag:this.internals?.validity.valid?"valid":"customError",message:this.internals?.validationMessage})}updateCheckedChildElementCount=e=>{this.checkedChildElementCount+=e?1:-1};listenCheckboxChange(e){if(e.target===this.el&&this.checkboxElem)return this.checkedChildElementCount=this.checkboxElem.dsChecked?this.childElementsCount:0,this.updateChildElementsChecked(this.checkboxElem.dsChecked),void this.dsCheckboxGroupChange.emit({id:this.fieldsetId,checked:this.checkboxElem.dsChecked});const s=e.target.closest(n("ds-checkbox","ds-checkbox-group",this.el));if(this.getChildCheckboxElements().includes(s)){const e=this.checkedChildElementCount;this.updateCheckedChildElementCount(s.dsChecked),this.checkedChildElementCount===this.childElementsCount&&this.checkedChildElementCount>e?this.dsCheckboxGroupChange.emit({id:this.fieldsetId,checked:!0}):e===this.childElementsCount&&this.checkedChildElementCount<e&&this.dsCheckboxGroupChange.emit({id:this.fieldsetId,checked:!1})}}listenCheckboxGroupChange(e){this.getChildElements().includes(e.target)&&(e.stopPropagation(),this.updateCheckedChildElementCount(e.detail.checked))}focusedChildCheckboxObserver(e){e||(this.wasInvalidOnBlur=!this.internals?.validity.valid,this.dsValidity.emit({flag:this.internals?.validity.valid?"valid":"customError",message:this.internals?.validationMessage}))}listenFocus(e){this.focusedChildCheckbox=e.detail}listenBlur(e){this.childBlurTimeout=setTimeout((()=>{e.detail===this.focusedChildCheckbox&&(this.focusedChildCheckbox=void 0)}),0)}formResetCallback(){this.dsErrorText="",this.childElementsCount=0,this.checkedChildElementCount=0,this.isIndeterminate=!1,this.indeterminateChildCheckboxCount=0,this.dsRequired?this.internals?.setValidity({valueMissing:!0},C(),this.getChildCheckboxElements()?.[0]?.querySelector("input")):this.dsAllRequired?this.internals?.setValidity({valueMissing:!0},k(),this.getChildCheckboxElements()?.[0]?.querySelector("input")):this.internals?.setValidity({})}connectedCallback(){this.internals?.form&&this.el.addEventListener("invalid",this.handleInvalid)}disconnectedCallback(){this.internals?.form&&this.el.removeEventListener("invalid",this.handleInvalid),this.childBlurTimeout&&clearTimeout(this.childBlurTimeout),this.childBlurTimeout=null}handleInvalid=e=>{e.preventDefault(),this.dsSubmitInvalid.emit({flag:"customError",message:this.internals?.validationMessage})};componentWillLoad(){this.inheritedAttributes={...a(this,this.el),...c(this.el,["aria-labelledby"])}}componentDidLoad(){this.childElementsCount=this.getChildElements().length}ariaAttributeObserver(e,s,t){this.inheritedAttributes={...this.inheritedAttributes,[t]:e},i(this)}render(){const e=p("ds-checkbox-group"),s=o(e,{[e+"--horizontal"]:"horizontal"===this.dsDirection}),t=o(e+"__legend"),i=o(e+"__assistive-text"),r=o(e+"__error",{[e+"__error--visible"]:!!this.dsErrorText}),c=o(""+e,e+"--inset"),a=o(e+"__checkboxes"),l=n("ds-checkbox","ds-checkbox-group",this.el),b=n("ds-input-validity","ds-checkbox-group",this.el);return d("fieldset",{key:"f4a2a1a756d5462350de2edaa9aed784a83e0d09",class:s,id:this.fieldsetId,name:this.dsName,form:this.dsForm,"aria-labelledby":`${this.legendId} ${this.dsErrorText&&this.errorTextId}`,...this.inheritedAttributes},this.dsLabel&&d("legend",{key:"5cbaa003cc6889bc6236ab319aa19fa78a55738e",id:this.legendId,class:t},this.getLegendText()),this.dsAssistiveText&&d("small",{key:"7d80e58250290c5dcd5e97d883340196b3bdbda7",class:i,id:this.assistiveTextId},this.dsAssistiveText),this.dsText?d(h,null,d(l,{ref:e=>this.checkboxElem=e,dsId:this.checkboxId,dsText:this.dsText,dsChecked:this.checkedChildElementCount===this.childElementsCount,dsDisabled:this.dsDisabled,dsIndeterminate:this.indeterminateChildCheckboxCount>0||this.isIndeterminate,dsErrorText:this.dsErrorText,dsErrorsDisabled:!0}),d("fieldset",{id:this.nestedId,"aria-label":this.dsText,class:c},d("slot",null))):d("div",{class:a},d("slot",null)),d("div",{key:"6eccb6f002e1f2fccb1c61c9c23e528f8f1b2137",class:r},d(b,{key:"db8db19062c2c52d261f3666f77946af3ce25451",id:this.errorTextId,dsText:this.dsErrorText,dsType:"error"})))}static get delegatesFocus(){return!0}static get formAssociated(){return!0}static get watchers(){return{dsDisabled:[{dsDisabledObserver:0}],dsAllRequired:[{dsAllRequiredObserver:0}],dsChecked:[{dsCheckedObserver:0}],isIndeterminate:[{isIndeterminateObserver:0}],dsErrorText:[{dsErrorTextObserver:0}],dsForm:[{dsFormAssociatedPropObserver:0}],dsName:[{dsFormAssociatedPropObserver:0}],childElementsCount:[{childElementsCountObserver:0},{checkedChildElementCountObserver:0}],checkedChildElementCount:[{checkedChildElementCountObserver:0}],focusedChildCheckbox:[{focusedChildCheckboxObserver:0}],"aria-required":[{ariaAttributeObserver:0}],"aria-invalid":[{ariaAttributeObserver:0}]}}static get style(){return".ds-checkbox-group__SPFJ1E{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0}.ds-checkbox-group__SPFJ1E__legend{color:var(--ds-textColor-default);padding-inline:0;font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-16);font-weight:var(--ds-fontWeight-semibold);letter-spacing:var(--ds-letterSpacing-wide);line-height:var(--ds-lineHeight-large)}.ds-checkbox-group__SPFJ1E__assistive-text{font-family:var(--ds-fontFamily-body);font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large);margin-bottom:var(--ds-spacing-2xSmall)}.ds-checkbox-group__SPFJ1E__error{display:flex}.ds-checkbox-group__SPFJ1E__error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-4xSmall)}.ds-checkbox-group__SPFJ1E>.ds-checkbox-group__SPFJ1E__checkboxes{display:inline-flex;flex-direction:column}.ds-checkbox-group__SPFJ1E--inset{margin-left:var(--ds-spacing-medium)}.ds-checkbox-group__SPFJ1E--horizontal>.ds-checkbox-group__SPFJ1E__checkboxes{flex-flow:row wrap;gap:var(--ds-spacing-small)}"}},[849,"ds-checkbox-group",{dsForm:[1,"ds-form"],dsLabel:[1,"ds-label"],dsAssistiveText:[1,"ds-assistive-text"],dsDirection:[1,"ds-direction"],dsErrorText:[1025,"ds-error-text"],dsText:[1,"ds-text"],dsChecked:[4,"ds-checked"],dsDisabled:[4,"ds-disabled"],dsRequired:[4,"ds-required"],dsAllRequired:[4,"ds-all-required"],dsOptional:[4,"ds-optional"],dsOptionalText:[1,"ds-optional-text"],dsName:[1,"ds-name"],dsId:[2049,"ds-id"],childElementsCount:[32],checkedChildElementCount:[32],isIndeterminate:[32],indeterminateChildCheckboxCount:[32],focusedChildCheckbox:[32],wasInvalidOnBlur:[32],setFocus:[64],checkValidity:[64],setChecked:[64],childConnected:[64],childDisconnected:[64]},[[0,"dsCheckboxGroupIndeterminateChildChange","listenIndeterminateChildChange"],[0,"input","listenCheckboxChange"],[0,"dsCheckboxGroupChange","listenCheckboxGroupChange"],[0,"dsFocus","listenFocus"],[0,"dsBlur","listenBlur"]],{dsDisabled:[{dsDisabledObserver:0}],dsAllRequired:[{dsAllRequiredObserver:0}],dsChecked:[{dsCheckedObserver:0}],isIndeterminate:[{isIndeterminateObserver:0}],dsErrorText:[{dsErrorTextObserver:0}],dsForm:[{dsFormAssociatedPropObserver:0}],dsName:[{dsFormAssociatedPropObserver:0}],childElementsCount:[{childElementsCountObserver:0},{checkedChildElementCountObserver:0}],checkedChildElementCount:[{checkedChildElementCountObserver:0}],focusedChildCheckbox:[{focusedChildCheckboxObserver:0}],"aria-required":[{ariaAttributeObserver:0}],"aria-invalid":[{ariaAttributeObserver:0}]}]);b([d("ds-checkbox",null),d("ds-checkbox-group",null),d("ds-input-validity",null)]);const y=O,I=function e(){"undefined"!=typeof customElements&&["ds-checkbox-group","ds-checkbox","ds-checkbox-group","ds-feedback","ds-icon","ds-input-validity","ds-visually-hidden"].forEach((s=>{switch(s){case"ds-checkbox-group":customElements.get(r(s))||customElements.define(r(s),O);break;case"ds-checkbox":customElements.get(r(s))||x();break;case"ds-checkbox-group":customElements.get(r(s))||e();break;case"ds-feedback":customElements.get(r(s))||v();break;case"ds-icon":customElements.get(r(s))||g();break;case"ds-input-validity":customElements.get(r(s))||f();break;case"ds-visually-hidden":customElements.get(r(s))||E()}}))};export{y as DsCheckboxGroup,I as defineCustomElement}

package/dist/components/ds-checkbox.js

@@ -1,6 +1 @@
-import { D as DsCheckbox$1, d as defineCustomElement$1 } from './p-DojIH0Sw.js';
-
-const DsCheckbox = DsCheckbox$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DsCheckbox, defineCustomElement };
+import{D as o,d as s}from"./p-Cv3PkbWi.js";const p=o,r=s;export{p as DsCheckbox,r as defineCustomElement}