@uh-design-system/component-library 0.5.2 → 0.6.0

package/dist/components/ds-checkbox2.js

@@ -1,13 +1,12 @@
-import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment } from './index2.js';
+import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment } from './index2.js';
 import { c as classNames } from './index3.js';
-import { i as inheritAriaAttributes, b as inheritAttributes } from './attributes.js';
+import { i as inheritAttributes, a as inheritAriaAttributes } from './attributes.js';
 import { g as getRequiredText, a as getOptionalText } from './controlUtils.js';
-import { i as isValidation } from './store.js';
-import { g as getAriaLabel, i as idGenerator, d as defineCustomElement$2 } from './ds-icon2.js';
+import { i as isValidation } from './index.js';
+import { i as idGenerator, d as defineCustomElement$2 } from './ds-icon2.js';
 import { d as defineCustomElement$1 } from './ds-input-validity2.js';
 
-const dsCheckboxCss = ".ds-checkbox-fieldset{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox-fieldset__legend{padding-inline:0;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-fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-textColor-secondary);line-height:var(--ds-lineHeight-large)}.ds-checkbox{display:inline-flex;align-self:flex-start;align-items:center;flex-direction:row;flex-wrap:nowrap;text-wrap:wrap;word-wrap:break-word;word-break:break-all;white-space:normal;position:relative;cursor:pointer;user-select:none;width:auto;padding:var(--ds-spacing-xSmall)}.ds-checkbox--no-margin .ds-checkbox__input{margin-right:0}.ds-checkbox--disabled{color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__span--optional{color:var(--ds-textColor-secondary);font-size:var(--ds-fontSize-14)}.ds-checkbox:has(.ds-checkbox__input:disabled){cursor:not-allowed}.ds-checkbox__input{cursor:pointer;-webkit-appearance:none;appearance:none;background-color:var(--ds-bgColor-white);margin:0;display:grid;place-content:center;height:24px;width:24px;flex-shrink:0;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-palette-black-50);}.ds-checkbox__input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black);outline-offset:var(--ds-borderWidth-thin);outline-style:solid;outline-width:var(--ds-borderWidth-thin)}.ds-checkbox__input:hover,.ds-checkbox__input:active{border-color:var(--ds-borderColor-default)}.ds-checkbox__input:hover{background-color:var(--ds-bgColor-white-hover)}.ds-checkbox__input:active{background-color:var(--ds-bgColor-white-active)}.ds-checkbox__input:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:var(--ds-borderColor-disabled-onLight)}@media (forced-colors: active){.ds-checkbox__input:disabled{border-color:GrayText}}.ds-checkbox__input:checked,.ds-checkbox__input:indeterminate{background-color:var(--ds-bgColor-primary);border-color:var(--ds-borderColor-transparent)}.ds-checkbox__input:checked:hover,.ds-checkbox__input:indeterminate:hover{background-color:var(--ds-bgColor-primary-hover)}.ds-checkbox__input:checked:active,.ds-checkbox__input:indeterminate:active{background-color:var(--ds-bgColor-primary-active)}.ds-checkbox__input:checked:disabled,.ds-checkbox__input:indeterminate:disabled{background-color:var(--ds-bgColor-disabled-onLight)}.ds-checkbox__input:user-invalid,.ds-checkbox__input--invalid,.ds-checkbox__input--invalid:checked,.ds-checkbox__input--invalid:indeterminate{border-color:var(--ds-borderColor-danger)}.ds-checkbox__input:disabled{cursor:not-allowed;color:var(--ds-textColor-disabled-onLight)}.ds-checkbox__input::before{content:\"\";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__input:checked::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:checked:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>\")}.ds-checkbox__input:indeterminate::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:indeterminate:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>\")}.ds-checkbox-error{display:flex}.ds-checkbox-error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-xSmall)}";
-const DsCheckboxStyle0 = dsCheckboxCss;
+const dsCheckboxCss = ":root{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.ds-checkbox-fieldset{display:inline-flex;flex-direction:column;border:none;padding:0;margin:0;gap:var(--ds-spacing-3xSmall)}.ds-checkbox-fieldset__legend{padding-inline:0;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-fieldset__assistive-text{display:inline;font-size:var(--ds-fontSize-14);color:var(--ds-palette-black-70);line-height:var(--ds-lineHeight-large)}.ds-checkbox{display:inline-flex;align-self:flex-start;align-items:flex-start;flex-flow:row nowrap;text-wrap:wrap;word-wrap:break-word;white-space:normal;position:relative;cursor:pointer;user-select:none;width:auto;padding:var(--ds-spacing-xSmall)}.ds-checkbox__input{cursor:pointer;appearance:none;background-color:var(--ds-palette-white);margin:0;display:grid;place-content:center;height:24px;width:24px;flex-shrink:0;margin-right:var(--ds-spacing-xSmall);border-width:var(--ds-borderWidth-thin);border-style:solid;border-color:var(--ds-palette-black-50);}.ds-checkbox__input:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.ds-checkbox__input:hover,.ds-checkbox__input:active{border-color:var(--ds-palette-black-50)}.ds-checkbox__input:hover{background-color:var(--ds-palette-black-10)}.ds-checkbox__input:active{background-color:var(--ds-palette-black-20)}.ds-checkbox__input:disabled{cursor:not-allowed;color:var(--ds-palette-black-40);background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15)}@media (forced-colors: active){.ds-checkbox__input:disabled{border-color:GrayText}}.ds-checkbox__input:user-invalid,.ds-checkbox__input--invalid,.ds-checkbox__input--invalid:checked,.ds-checkbox__input--invalid:indeterminate{border-color:var(--ds-palette-red-50)}.ds-checkbox__input:checked,.ds-checkbox__input:indeterminate{background-color:var(--ds-palette-mainBlue-70);border-color:var(--ds-overlay-black-00)}.ds-checkbox__input:checked:hover,.ds-checkbox__input:indeterminate:hover{background-color:var(--ds-palette-mainBlue-80)}.ds-checkbox__input:checked:active,.ds-checkbox__input:indeterminate:active{background-color:var(--ds-palette-mainBlue-90)}.ds-checkbox__input:checked:disabled,.ds-checkbox__input:indeterminate:disabled{background-color:var(--ds-overlay-black-10)}.ds-checkbox__input::before{content:\"\";display:block;height:1em;width:1em;background-size:contain;background-repeat:no-repeat;background-position:center}.ds-checkbox__input:checked::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:indeterminate::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23ffffff' /></svg>\")}.ds-checkbox__input:checked:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='16' height='13' viewBox='0 0 16 13' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M5.99997 7.87871L13.606 0.272705L15.7273 2.39403L5.99997 12.1214L0.272644 6.39402L2.39396 4.27271L5.99997 7.87871Z' fill='%23999999' /></svg>\")}.ds-checkbox__input:indeterminate:disabled::before{background-image:url(\"data:image/svg+xml;charset=utf-8,<svg width='14' height='4' viewBox='0 0 14 4' xmlns='http://www.w3.org/2000/svg'><rect width='13.3333' height='3' transform='matrix(1 0 0 -1 0.333313 3.5)' fill='%23999999' /></svg>\")}.ds-checkbox--no-margin .ds-checkbox__input{margin-right:0}.ds-checkbox--disabled{color:var(--ds-palette-black-40)}.ds-checkbox__span--optional{color:var(--ds-palette-black-70);font-size:var(--ds-fontSize-14)}.ds-checkbox:has(.ds-checkbox__input:disabled){cursor:not-allowed}.ds-checkbox-error{display:flex}.ds-checkbox-error--visible{padding-top:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-xSmall)}";
 
 const checkboxIdGenerator = idGenerator('ds-checkbox');
 const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
@@ -15,100 +14,108 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.dsCheckboxInput = createEvent(this, "dsCheckboxInput", 7);
+        this.dsChange = createEvent(this, "dsChange");
         this.internals = this.attachInternals();
     }
+    checkboxGroup = null;
     inputElem;
     labelId;
     inputValidityId;
     assistiveTextId;
     inheritedAttributes = {};
-    initialChecked;
     labelClicked = false;
     get el() { return this; }
     internals;
-    dsCheckboxInput;
-    identifier = checkboxIdGenerator.next().value;
-    checked = false;
-    legend;
-    assistiveText;
-    text;
-    indeterminate = false;
-    disabled = false;
-    errorText = '';
-    errorsDisabled = false;
-    required = false;
-    optional = false;
-    optionalText;
-    ariaLabel;
-    value = this.checked.toString();
+    dsId = checkboxIdGenerator.next().value;
+    dsChecked = false;
+    dsLegend;
+    dsAssistiveText;
+    dsText;
+    dsIndeterminate = false;
+    dsDisabled = false;
+    dsErrorText = '';
+    dsErrorsDisabled = false;
+    dsRequired = false;
+    dsOptional = false;
+    dsOptionalText;
+    dsAriaLabel;
+    dsChange;
+    invalid = !!this.dsErrorText;
+    initialChecked = this.dsChecked;
     validationMessage;
     setIds = () => {
-        this.labelId = `${this.identifier}-label`;
-        this.inputValidityId = `${this.identifier}-validity`;
-        this.assistiveTextId = `${this.identifier}-assistive-text`;
+        this.labelId = `${this.dsId}-label`;
+        this.inputValidityId = `${this.dsId}-validity`;
+        this.assistiveTextId = `${this.dsId}-assistive-text`;
     };
-    getValidationMessage = () => (!this.errorsDisabled ? this.errorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
+    getValidationMessage = () => (!this.dsErrorsDisabled ? this.dsErrorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
     getLegendText = () => {
-        if (this.required) {
-            return getRequiredText(this.legend);
+        if (this.dsRequired) {
+            return getRequiredText(this.dsLegend);
         }
-        if (this.optional) {
-            return getOptionalText(this.legend, this.optionalText);
+        if (this.dsOptional) {
+            return getOptionalText(this.dsLegend, this.dsOptionalText);
         }
-        return this.legend;
+        return this.dsLegend;
     };
     getCheckboxText = () => {
-        if (this.legend) {
-            return this.text;
+        if (this.dsLegend) {
+            return this.dsText;
         }
-        if (this.required) {
-            return getRequiredText(this.text);
+        if (this.dsRequired) {
+            return getRequiredText(this.dsText);
         }
-        if (this.optional) {
-            return getOptionalText(this.text, this.optionalText);
+        if (this.dsOptional) {
+            return getOptionalText(this.dsText, this.dsOptionalText);
         }
-        return this.text;
-    };
-    getAriaDescribedBy = () => [Boolean(this.assistiveText) && this.assistiveTextId, Boolean(this.getValidationMessage()) && this.inputValidityId].filter(Boolean).join(' ');
-    restoreInitialState = () => {
-        this.checked = this.initialChecked;
-        this.value = this.checked.toString();
-        this.internals?.setValidity({});
-        this.internals?.setFormValue(this.value);
-    };
-    setInitialState = () => {
-        this.initialChecked = this.checked;
-        this.value = this.checked.toString();
-        this.internals?.setFormValue(this.value);
+        return this.dsText;
     };
+    getAriaDescribedBy = () => [Boolean(this.dsAssistiveText) && this.assistiveTextId, Boolean(this.getValidationMessage()) && this.inputValidityId].filter(Boolean).join(' ');
     formResetCallback() {
-        this.restoreInitialState();
+        this.dsChecked = this.initialChecked;
+        this.internals?.setValidity({});
+        this.internals?.setFormValue(this.dsChecked.toString());
+    }
+    connectedCallback() {
+        this.checkboxGroup = this.el.closest('ds-checkbox-group');
+        if (this.checkboxGroup) {
+            this.invalid = !!this.checkboxGroup.dsErrorText;
+            this.checkboxGroup.addEventListener('dsCheckboxGroupInvalidStateChange', this.updateInvalidState);
+        }
+    }
+    disconnectedCallback() {
+        if (this.checkboxGroup) {
+            this.checkboxGroup.removeEventListener('dsCheckboxGroupInvalidStateChange', this.updateInvalidState);
+        }
+        this.checkboxGroup = null;
     }
+    updateInvalidState = (e) => {
+        this.invalid = e.detail;
+    };
     componentWillLoad() {
-        this.setInitialState();
         this.setIds();
         this.inheritedAttributes = {
             ...inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden', 'aria-invalid']),
             ...inheritAttributes(this, this.el),
         };
-        if (isValidation('server') || this.errorText) {
+        if (isValidation('server') || this.dsErrorText) {
             this.validationMessage = this.getValidationMessage();
         }
     }
+    dsCheckedObserver(isChecked) {
+        this.dsChange.emit(isChecked);
+    }
     handleInput = (e) => {
         const target = e.target;
-        this.checked = target.checked;
-        this.value = target.checked.toString();
-        this.internals?.setFormValue(this.value);
-        this.dsCheckboxInput.emit({ id: this.identifier, checked: target.checked });
+        this.dsChecked = target.checked;
+        this.internals?.setFormValue(target.checked.toString());
         if (isValidation('client') && this.validationMessage) {
             this.validationMessage = this.getValidationMessage();
         }
     };
     handleKeyUp = (event) => {
         if (event.key === 'Enter') {
-            this.inputElem.dispatchEvent(new Event('input'));
+            this.inputElem.click();
         }
     };
     handleBlur = () => {
@@ -125,48 +132,54 @@ const DsCheckbox = proxyCustomElement(class DsCheckbox extends H {
     };
     renderCheckbox() {
         const classes = classNames('ds-checkbox', {
-            'ds-checkbox--disabled': this.disabled,
-            'ds-checkbox--no-margin': Boolean(!this.text),
+            'ds-checkbox--disabled': this.dsDisabled,
+            'ds-checkbox--no-margin': Boolean(!this.dsText),
         });
         const inputClasses = classNames('ds-checkbox__input', {
-            'ds-checkbox__input--invalid': Boolean(this.errorText),
+            'ds-checkbox__input--invalid': Boolean(this.dsErrorText) || this.invalid,
         });
         const errorClasses = classNames('ds-checkbox-error', {
             'ds-checkbox-error--visible': Boolean(this.validationMessage),
         });
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h(Fragment, null, h("div", null, h("label", { id: this.labelId, class: classes, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp }, h("input", { ref: inputElem => (this.inputElem = inputElem), type: "checkbox", class: inputClasses, checked: this.checked, indeterminate: this.indeterminate, onInput: this.handleInput, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, value: this.value, disabled: this.disabled, required: this.required, id: this.identifier, "aria-describedby": ariaDescribedBy, "aria-label": getAriaLabel(this.getCheckboxText(), this.ariaLabel), "aria-invalid": this.errorText ? true : undefined, ...this.inheritedAttributes }), this.getCheckboxText())), !this.errorsDisabled && (h("div", { class: errorClasses }, h("ds-input-validity", { id: this.inputValidityId, text: this.validationMessage, type: "error", role: "alert" })))));
+        return (h(Fragment, null, h("div", null, h("label", { id: this.labelId, class: classes, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp }, h("input", { ref: inputElem => (this.inputElem = inputElem), type: "checkbox", class: inputClasses, checked: this.dsChecked, indeterminate: this.dsIndeterminate, onInput: this.handleInput, onKeyUp: this.handleKeyUp, onBlur: this.handleBlur, value: this.dsChecked.toString(), disabled: this.dsDisabled, required: this.dsRequired, id: this.dsId, "aria-describedby": ariaDescribedBy, "aria-label": this.dsAriaLabel, "aria-invalid": this.dsErrorText ? true : undefined, ...this.inheritedAttributes }), this.getCheckboxText())), !this.dsErrorsDisabled && (h("div", { class: errorClasses }, h("ds-input-validity", { id: this.inputValidityId, dsText: this.validationMessage, dsType: "error", dsAriaLive: "polite", dsAriaAtomic: "true" })))));
     }
     renderFieldset() {
         const fieldsetClasses = classNames('ds-checkbox-fieldset');
         const legendClasses = classNames('ds-checkbox-fieldset__legend');
         const assistiveTextClasses = classNames('ds-checkbox-fieldset__assistive-text');
-        return (h("fieldset", { class: fieldsetClasses }, h("legend", { class: legendClasses }, this.getLegendText()), this.assistiveText && (h("small", { class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.renderCheckbox()));
+        return (h("fieldset", { class: fieldsetClasses }, h("legend", { class: legendClasses }, this.getLegendText()), this.dsAssistiveText && (h("small", { class: assistiveTextClasses, id: this.assistiveTextId }, this.dsAssistiveText)), this.renderCheckbox()));
     }
     render() {
-        if (this.legend) {
+        if (this.dsLegend) {
             return this.renderFieldset();
         }
         return this.renderCheckbox();
     }
     static get formAssociated() { return true; }
-    static get style() { return DsCheckboxStyle0; }
+    static get watchers() { return {
+        "dsChecked": ["dsCheckedObserver"]
+    }; }
+    static get style() { return dsCheckboxCss; }
 }, [65, "ds-checkbox", {
-        "identifier": [1, "id"],
-        "checked": [1028],
-        "legend": [1],
-        "assistiveText": [1, "assistive-text"],
-        "text": [1],
-        "indeterminate": [4],
-        "disabled": [4],
-        "errorText": [1, "error-text"],
-        "errorsDisabled": [4, "data-errors-disabled"],
-        "required": [4],
-        "optional": [4],
-        "optionalText": [1, "optional-text"],
-        "ariaLabel": [1, "aria-label"],
-        "value": [32],
+        "dsId": [1, "ds-id"],
+        "dsChecked": [1028, "ds-checked"],
+        "dsLegend": [1, "ds-legend"],
+        "dsAssistiveText": [1, "ds-assistive-text"],
+        "dsText": [1, "ds-text"],
+        "dsIndeterminate": [4, "ds-indeterminate"],
+        "dsDisabled": [4, "ds-disabled"],
+        "dsErrorText": [1, "ds-error-text"],
+        "dsErrorsDisabled": [4, "ds-errors-disabled"],
+        "dsRequired": [4, "ds-required"],
+        "dsOptional": [4, "ds-optional"],
+        "dsOptionalText": [1, "ds-optional-text"],
+        "dsAriaLabel": [1, "ds-aria-label"],
+        "invalid": [32],
+        "initialChecked": [32],
         "validationMessage": [32]
+    }, undefined, {
+        "dsChecked": ["dsCheckedObserver"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {