@uh-design-system/component-library 0.4.1 → 0.5.0

package/dist/collection/components/01-base-components/ds-checkbox/ds-checkbox.js

@@ -1,21 +1,22 @@
 import { Fragment, h } from "@stencil/core";
 import classNames from "classnames";
 import { inheritAriaAttributes } from "../../../utils/attributes/attributes";
-import { idGenerator } from "../../../utils/utils";
 import { getOptionalText, getRequiredText } from "../../../utils/controls/controlUtils";
+import { isValidation } from "../../../store";
+import { getAriaLabel, idGenerator } from "../../../utils/utils";
 const checkboxIdGenerator = idGenerator('ds-checkbox');
 export class DsCheckbox {
+    inputElem;
     labelId;
-    errorTextId;
+    inputValidityId;
     assistiveTextId;
     inheritedAttributes = {};
     initialChecked;
-    inputElem;
+    labelClicked = false;
     el;
     internals;
-    dsCheckboxChange;
-    dsCheckboxError;
-    checkboxId;
+    dsCheckboxInput;
+    identifier = checkboxIdGenerator.next().value;
     checked = false;
     legend;
     assistiveText;
@@ -31,12 +32,11 @@ export class DsCheckbox {
     value = this.checked.toString();
     validationMessage;
     setIds = () => {
-        this.checkboxId = this.checkboxId || checkboxIdGenerator.next().value;
-        this.labelId = `${this.checkboxId}-label`;
-        this.errorTextId = `${this.checkboxId}-error`;
-        this.assistiveTextId = `${this.checkboxId}-assistive-text`;
+        this.labelId = `${this.identifier}-label`;
+        this.inputValidityId = `${this.identifier}-validity`;
+        this.assistiveTextId = `${this.identifier}-assistive-text`;
     };
-    getErrorText = () => (!this.errorsDisabled ? this.errorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
+    getValidationMessage = () => (!this.errorsDisabled ? this.errorText || this.internals?.validationMessage || this.inputElem?.validationMessage : '');
     getLegendText = () => {
         if (this.required) {
             return getRequiredText(this.legend);
@@ -58,7 +58,7 @@ export class DsCheckbox {
         }
         return this.text;
     };
-    getAriaDescribedBy = () => [Boolean(this.assistiveText) && this.assistiveTextId, Boolean(this.getErrorText()) && this.errorTextId].filter(Boolean).join(' ');
+    getAriaDescribedBy = () => [Boolean(this.assistiveText) && this.assistiveTextId, Boolean(this.getValidationMessage()) && this.inputValidityId].filter(Boolean).join(' ');
     restoreInitialState = () => {
         this.checked = this.initialChecked;
         this.value = this.checked.toString();
@@ -70,34 +70,43 @@ export class DsCheckbox {
         this.value = this.checked.toString();
         this.internals?.setFormValue(this.value);
     };
-    emitCheckboxError = () => {
-        this.dsCheckboxError.emit(this.getErrorText());
-    };
     formResetCallback() {
         this.restoreInitialState();
     }
     componentWillLoad() {
         this.setInitialState();
         this.setIds();
-        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden']);
-    }
-    componentDidLoad() {
-        this.ariaLabel = this.el.getAttribute('aria-label');
-        this.el.removeAttribute('aria-label');
-    }
-    componentDidUpdate() {
-        this.emitCheckboxError();
+        this.inheritedAttributes = inheritAriaAttributes(this.el, ['aria-label', 'aria-describedby', 'aria-hidden', 'aria-invalid']);
+        if (isValidation('server') || this.errorText) {
+            this.validationMessage = this.getValidationMessage();
+        }
     }
-    handleChange = () => {
-        this.checked = !this.checked;
-        this.value = this.checked.toString();
+    handleInput = (e) => {
+        const target = e.target;
+        this.checked = target.checked;
+        this.value = target.checked.toString();
         this.internals?.setFormValue(this.value);
-        this.dsCheckboxChange.emit({ id: this.checkboxId, checked: this.checked });
+        this.dsCheckboxInput.emit({ id: this.identifier, checked: target.checked });
+        if (isValidation('client') && this.validationMessage) {
+            this.validationMessage = this.getValidationMessage();
+        }
     };
     handleKeyUp = (event) => {
         if (event.key === 'Enter') {
-            this.handleChange();
+            this.inputElem.dispatchEvent(new Event('input'));
+        }
+    };
+    handleBlur = () => {
+        if (isValidation('client') && !this.labelClicked) {
+            this.validationMessage = this.getValidationMessage();
         }
+        this.labelClicked = false;
+    };
+    handleMouseDown = () => {
+        this.labelClicked = true;
+    };
+    handleMouseUp = () => {
+        this.labelClicked = false;
     };
     renderCheckbox() {
         const classes = classNames('ds-checkbox', {
@@ -107,12 +116,11 @@ export class DsCheckbox {
         const inputClasses = classNames('ds-checkbox__input', {
             'ds-checkbox__input--invalid': Boolean(this.errorText),
         });
-        const errorText = this.getErrorText();
         const errorClasses = classNames('ds-checkbox-error', {
-            'ds-checkbox-error--visible': Boolean(errorText),
+            '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 }, h("input", { ref: inputElem => (this.inputElem = inputElem), type: "checkbox", class: inputClasses, checked: this.checked, indeterminate: this.indeterminate, onChange: this.handleChange, onKeyUp: this.handleKeyUp, value: this.value, disabled: this.disabled, required: this.required, id: this.checkboxId, "aria-describedby": ariaDescribedBy, "aria-label": this.ariaLabel, ...this.inheritedAttributes }), this.getCheckboxText())), !this.errorsDisabled && (h("div", { class: errorClasses }, h("ds-input-validity", { id: this.errorTextId, text: errorText, type: "error" })))));
+        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" })))));
     }
     renderFieldset() {
         const fieldsetClasses = classNames('ds-checkbox-fieldset');
@@ -141,9 +149,9 @@ export class DsCheckbox {
     }
     static get properties() {
         return {
-            "checkboxId": {
+            "identifier": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -158,7 +166,8 @@ export class DsCheckbox {
                 "getter": false,
                 "setter": false,
                 "attribute": "id",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "checkboxIdGenerator.next().value as string"
             },
             "checked": {
                 "type": "boolean",
@@ -375,20 +384,38 @@ export class DsCheckbox {
                 "setter": false,
                 "attribute": "optional-text",
                 "reflect": false
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-label",
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
-            "ariaLabel": {},
             "value": {},
             "validationMessage": {}
         };
     }
     static get events() {
         return [{
-                "method": "dsCheckboxChange",
-                "name": "dsCheckboxChange",
+                "method": "dsCheckboxInput",
+                "name": "dsCheckboxInput",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -397,31 +424,16 @@ export class DsCheckbox {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "CheckboxChangeEvent",
-                    "resolved": "CheckboxChangeEvent",
+                    "original": "DsCheckboxInputEvent",
+                    "resolved": "DsCheckboxInputEvent",
                     "references": {
-                        "CheckboxChangeEvent": {
+                        "DsCheckboxInputEvent": {
                             "location": "local",
                             "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-checkbox/ds-checkbox.tsx",
-                            "id": "src/components/01-base-components/ds-checkbox/ds-checkbox.tsx::CheckboxChangeEvent"
+                            "id": "src/components/01-base-components/ds-checkbox/ds-checkbox.tsx::DsCheckboxInputEvent"
                         }
                     }
                 }
-            }, {
-                "method": "dsCheckboxError",
-                "name": "dsCheckboxError",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
             }];
     }
     static get elementRef() { return "el"; }

package/dist/collection/components/01-base-components/ds-checkbox/stories/ds-checkbox.stories.js

@@ -33,5 +33,6 @@ export const Playground = {
         legend: { control: 'text' },
         assistiveText: { control: 'text' },
         optionalText: { control: 'text' },
+        ariaLabel: { name: 'aria-label', control: 'text' },
     },
 };

package/dist/collection/components/01-base-components/ds-checkbox-group/ds-checkbox-group.css

@@ -24,7 +24,7 @@
 .ds-checkbox-group__error--visible {
   padding-top: var(--ds-spacing-3xSmall);
 }
-.ds-checkbox-group__checkboxes {
+.ds-checkbox-group > .ds-checkbox-group__checkboxes {
   display: inline-flex;
   flex-direction: column;
 }

package/dist/collection/components/01-base-components/ds-checkbox-group/ds-checkbox-group.js

@@ -19,10 +19,9 @@ export class DsCheckboxGroup {
     errorText = '';
     text = '';
     checked = false;
-    checkedChildElementCount = 0;
     disabled = false;
-    parentCheckedCount = 0;
     childElementsCount = 0;
+    checkedChildElementCount = 0;
     isIndeterminate = false;
     indeterminateChildCheckboxCount = 0;
     elementIs = (localName) => (element) => element.localName === localName;
@@ -56,21 +55,21 @@ export class DsCheckboxGroup {
     async setChecked(newValue) {
         this.updateChildElementsChecked(newValue);
     }
-    handleCheckboxDisabledChange(newValue) {
+    watchCheckboxDisabledChange(newValue) {
         this.updateChildElements((element) => {
             element.disabled = newValue;
         });
     }
-    handleCheckedChange(newValue) {
+    watchCheckedChange(newValue) {
         this.updateChildElementsChecked(newValue);
     }
-    handleIndeterminateChange(newValue) {
+    watchIndeterminateChange(newValue) {
         this.dsCheckboxGroupIndeterminateChildChange.emit({ id: this.fieldsetId, indeterminate: newValue });
     }
-    handleIndeterminateChildChange(event) {
+    listenIndeterminateChildChange(event) {
         this.indeterminateChildCheckboxCount = event.detail.indeterminate ? this.indeterminateChildCheckboxCount + 1 : this.indeterminateChildCheckboxCount - 1;
     }
-    handleCheckedChildElementCountChange(newValue, oldValue) {
+    watchCheckedChildElementCountChange(newValue, oldValue) {
         this.isIndeterminate =
             this.checkedChildElementCount !== this.childElementsCount && this.checkedChildElementCount < this.childElementsCount && this.checkedChildElementCount > 0;
         if (newValue === this.childElementsCount && newValue > oldValue) {
@@ -88,7 +87,7 @@ export class DsCheckboxGroup {
             this.checkedChildElementCount = this.checkedChildElementCount === 0 ? 0 : this.checkedChildElementCount - 1;
         }
     };
-    handleCheckboxChange(event) {
+    listenCheckboxChange(event) {
         if (event.detail.id === this.checkboxId) {
             this.updateChildElementsChecked(event.detail.checked);
             return;
@@ -97,7 +96,7 @@ export class DsCheckboxGroup {
             this.updateCheckedChildElementCount(event);
         }
     }
-    handleCheckboxGroupChange(event) {
+    listenCheckboxGroupChange(event) {
         if (this.getChildElements().includes(event.target)) {
             this.updateCheckedChildElementCount(event);
         }
@@ -129,7 +128,7 @@ export class DsCheckboxGroup {
         const nestedClasses = classNames('ds-checkbox-group', 'ds-checkbox-group--inset');
         const checkboxesClasses = classNames('ds-checkbox-group__checkboxes');
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h("fieldset", { key: '2080f4f193fe5bb3a6702287cebcf5d7dcc4a9b7', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.legend && h("legend", { key: '15754cea90c38ad46ff41196b0de108f10f007a9', class: legendClasses }, this.legend), this.assistiveText && (h("small", { key: '7dde97170e62d0668a52b3a21256be65e04ae811', class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.text ? (h(Fragment, null, h("ds-checkbox", { id: this.checkboxId, text: this.text, checked: this.checkedChildElementCount === this.childElementsCount, disabled: this.disabled, indeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate }), h("fieldset", { id: this.nestedId, "aria-labelledby": this.checkboxId, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), h("div", { key: 'b2e23012afd2f5439c89d5683f8b3776cf438ce5', class: errorClasses }, h("ds-input-validity", { key: 'cfb43cc67a907b7685d55f1ffdd86eb3f73f1bd0', id: this.errorTextId, text: this.errorText, type: "error" }))));
+        return (h("fieldset", { key: '1029763130b4d2d138679c9f84ec72c0231fcc83', id: this.fieldsetId, class: classes, "aria-describedby": ariaDescribedBy, ...this.inheritedAttributes }, this.legend && h("legend", { key: 'a9be37aab510d5e402841c8bbda64190548bc1ea', class: legendClasses }, this.legend), this.assistiveText && (h("small", { key: '0ae42c2b46e52dad0570ad120180e662db43f2fa', class: assistiveTextClasses, id: this.assistiveTextId }, this.assistiveText)), this.text ? (h(Fragment, null, h("ds-checkbox", { id: this.checkboxId, text: this.text, checked: this.checkedChildElementCount === this.childElementsCount, disabled: this.disabled, indeterminate: this.indeterminateChildCheckboxCount > 0 || this.isIndeterminate }), h("fieldset", { id: this.nestedId, "aria-labelledby": this.checkboxId, class: nestedClasses }, h("slot", null)))) : (h("div", { class: checkboxesClasses }, h("slot", null))), h("div", { key: '3ea5bb7991a99c676cb50a24d1a679b6f68c96bf', class: errorClasses }, h("ds-input-validity", { key: '8d5ca5e80b2a5f985e09bf7039538a5a13278e8e', id: this.errorTextId, text: this.errorText, type: "error" }))));
     }
     static get is() { return "ds-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -245,7 +244,7 @@ export class DsCheckboxGroup {
             },
             "checked": {
                 "type": "boolean",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -263,26 +262,6 @@ export class DsCheckboxGroup {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "checkedChildElementCount": {
-                "type": "number",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "checked-child-element-count",
-                "reflect": false,
-                "defaultValue": "0"
-            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,
@@ -302,32 +281,13 @@ export class DsCheckboxGroup {
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
-            },
-            "parentCheckedCount": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "parent-checked-count",
-                "reflect": false,
-                "defaultValue": "0"
             }
         };
     }
     static get states() {
         return {
             "childElementsCount": {},
+            "checkedChildElementCount": {},
             "isIndeterminate": {},
             "indeterminateChildCheckboxCount": {}
         };
@@ -344,13 +304,13 @@ export class DsCheckboxGroup {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "CheckboxGroupChangeEvent",
-                    "resolved": "CheckboxGroupChangeEvent",
+                    "original": "DsCheckboxGroupChangeEvent",
+                    "resolved": "DsCheckboxGroupChangeEvent",
                     "references": {
-                        "CheckboxGroupChangeEvent": {
+                        "DsCheckboxGroupChangeEvent": {
                             "location": "local",
                             "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
-                            "id": "src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx::CheckboxGroupChangeEvent"
+                            "id": "src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx::DsCheckboxGroupChangeEvent"
                         }
                     }
                 }
@@ -365,13 +325,13 @@ export class DsCheckboxGroup {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "CheckboxGroupIndeterminateChildChangeEvent",
-                    "resolved": "CheckboxGroupIndeterminateChildChangeEvent",
+                    "original": "DsCheckboxGroupIndeterminateChildChangeEvent",
+                    "resolved": "DsCheckboxGroupIndeterminateChildChangeEvent",
                     "references": {
-                        "CheckboxGroupIndeterminateChildChangeEvent": {
+                        "DsCheckboxGroupIndeterminateChildChangeEvent": {
                             "location": "local",
                             "path": "/Users/teemuparssinen/hy/uh-design-system/component-library/packages/component-library/src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx",
-                            "id": "src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx::CheckboxGroupIndeterminateChildChangeEvent"
+                            "id": "src/components/01-base-components/ds-checkbox-group/ds-checkbox-group.tsx::DsCheckboxGroupIndeterminateChildChangeEvent"
                         }
                     }
                 }
@@ -409,34 +369,34 @@ export class DsCheckboxGroup {
     static get watchers() {
         return [{
                 "propName": "disabled",
-                "methodName": "handleCheckboxDisabledChange"
+                "methodName": "watchCheckboxDisabledChange"
             }, {
                 "propName": "checked",
-                "methodName": "handleCheckedChange"
+                "methodName": "watchCheckedChange"
             }, {
                 "propName": "isIndeterminate",
-                "methodName": "handleIndeterminateChange"
+                "methodName": "watchIndeterminateChange"
             }, {
                 "propName": "checkedChildElementCount",
-                "methodName": "handleCheckedChildElementCountChange"
+                "methodName": "watchCheckedChildElementCountChange"
             }];
     }
     static get listeners() {
         return [{
                 "name": "dsCheckboxGroupIndeterminateChildChange",
-                "method": "handleIndeterminateChildChange",
+                "method": "listenIndeterminateChildChange",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
-                "name": "dsCheckboxChange",
-                "method": "handleCheckboxChange",
+                "name": "dsCheckboxInput",
+                "method": "listenCheckboxChange",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
                 "name": "dsCheckboxGroupChange",
-                "method": "handleCheckboxGroupChange",
+                "method": "listenCheckboxGroupChange",
                 "target": undefined,
                 "capture": false,
                 "passive": false

package/dist/collection/components/01-base-components/ds-icon/ds-icon.js

@@ -48,7 +48,7 @@ export class DsIcon {
         }
     }
     render() {
-        return (h(Fragment, { key: '3f68a522cda5ce59a62a8afa72c0c3305b0fb6e0' }, h("span", { key: 'cb6c204588d641e847c78bab7860e859d96dd300', class: "ds-icon--container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
+        return (h(Fragment, { key: '58309a22dafbad09a1f9e884657aad264261174e' }, h("span", { key: '3295d61af901e74ea7c39d1e7a4b7e083f44794f', class: "ds-icon--container", innerHTML: this.getIcon(), "aria-hidden": this.hidden ? 'true' : 'false' })));
     }
     static get is() { return "ds-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/01-base-components/ds-input-validity/ds-input-validity.js

@@ -1,10 +1,11 @@
-import { Fragment, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import classNames from "classnames";
+import { isValidation } from "../../../store";
 export class DsInputValidity {
     el;
     text;
     type = 'error';
-    role = 'status';
+    validityRole;
     identifier;
     componentDidLoad() {
         this.identifier = this.el.getAttribute('id');
@@ -16,10 +17,7 @@ export class DsInputValidity {
             'ds-input-validity--success': this.type === 'success',
         });
         const icon = this.type === 'success' ? 'check_circle_fill' : 'warning_fill';
-        if (!this.text) {
-            return null;
-        }
-        return (h(Fragment, null, this.text && (h("div", { class: classes, role: this.role }, h("ds-icon", { name: icon }), h("small", { id: this.identifier }, this.text)))));
+        return (h("div", { key: '2eca152eca6e7b4d7e894ff8aaf50a6d03c3e44f', role: isValidation('client') ? this.validityRole : undefined }, this.text && (h("div", { key: '73e4cd1b3af6a84b9c7cbca813c166bc10e9dd26', class: classes }, h("ds-icon", { key: '4eaad4001e758837f9e8b1aae48292a1c5a1a08f', name: icon }), h("small", { key: '3ee5d39785454b9aab9ae6012f3ad940c1f18df0', id: this.identifier }, this.text)))));
     }
     static get is() { return "ds-input-validity"; }
     static get originalStyleUrls() {
@@ -78,7 +76,7 @@ export class DsInputValidity {
                 "reflect": false,
                 "defaultValue": "'error'"
             },
-            "role": {
+            "validityRole": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -100,8 +98,7 @@ export class DsInputValidity {
                 "getter": false,
                 "setter": false,
                 "attribute": "role",
-                "reflect": false,
-                "defaultValue": "'status'"
+                "reflect": false
             }
         };
     }

package/dist/collection/components/01-base-components/ds-input-validity/stories/ds-input-validity.stories.js

@@ -17,5 +17,6 @@ export const Playground = {
     argTypes: {
         text: { control: 'text' },
         type: { control: 'select', options: ['error', 'success'] },
+        validityRole: { name: 'role', control: 'radio', options: ['alert', 'status'] },
     },
 };