npm - @nanoporetech-digital/components - Versions diffs - 7.9.1 → 8.0.0-alpha.0 - Mend

@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1783) hide show

package/dist/collection/components/checkbox/checkbox-group.js CHANGED Viewed

@@ -1,17 +1,20 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, Build, } from "@stencil/core";
 import { getClassMap } from "../../utils/theme";
 import { debounce } from "../../utils/throttle";
 import { transformTag, h } from "../../utils/renderer";
 /**
- * `nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.
- * It provides a convenient place to anchor a collective label and any validation issues.
+ * Checkbox group is an optional wrapper for all checkbox controls.
+ * It provides a convenient place to anchor labels and validation messages.
  *
- * @slot - Used for grouping checkboxes inside the group wrapper
- * @slot legend - if you do not set a legend attribute, you can use this slot for more complex markup
- * @slot helper - helper text to accompany the form field underneath.
+ * @status stable
+ * @version 1.0.0
+ *
+ * @slot - Used for grouping checkboxes inside the group
+ * @slot legend - used for more complex, label markup
+ * @slot helper - text that describes how to use the checkbox group
  */
 export class CheckboxGroup {
     mo;
@@ -48,10 +51,19 @@ export class CheckboxGroup {
      * Disable all the nested form controls
      */
     disabled = null;
+    _legend = '';
     /**
-     * A common label for children controls
+     * A collective label for children controls
      */
-    legend = '';
+    get legend() {
+        if (!this._legend.endsWith('*') && this.nativeCbs?.find((cb) => !!cb.required)) {
+            return this._legend + ' *';
+        }
+        return this._legend;
+    }
+    set legend(value) {
+        this._legend = value;
+    }
     /**
      * Visually hide the legend but still available to screen readers.
      */
@@ -120,8 +132,7 @@ export class CheckboxGroup {
             return;
         this.errorMessage = message;
         await cb.setError(message);
-        if (this.showInlineError)
-            this.showInlineValidation();
+        this.showInlineValidation();
     }
     // Events
     /**
@@ -149,7 +160,7 @@ export class CheckboxGroup {
         if (this.invalid) {
             this.showErrorMsg = this._invalid = false;
         }
-        this.showErrorMsg = this._invalid = this.customValidate();
+        this.customValidate();
         if (this.validateOn !== 'dirty')
             return;
         this.showInlineValidation();
@@ -160,18 +171,25 @@ export class CheckboxGroup {
             !this.nativeCbs.length ||
             !this.checkboxes)
             return;
+        // reset errors
+        this.checkboxes.forEach((cb, i) => {
+            const nativeCb = this.nativeCbs[i];
+            cb.setError('');
+            nativeCb.setCustomValidity('');
+        });
         const onlyRadios = this.nativeCbs.filter((cb) => cb?.type === 'radio');
-        if (onlyRadios &&
-            onlyRadios.length &&
-            (this.showErrorMsg || this.validateOn === 'dirty')) {
+        if (onlyRadios && onlyRadios.length) {
+            // we only care about radio controls.
             const required = onlyRadios.find((cb) => cb.required);
-            const checked = onlyRadios.filter((cb) => cb.checked);
+            const checked = onlyRadios.find((cb) => cb.checked);
             if (required && checked) {
-                this.checkboxes.forEach((rd) => rd.reportValidity(false));
                 return false;
             }
-            else if (required && !checked)
+            else if (required && !checked) {
+                // we have a required radio that is not checked
+                // so we have a native validation error
                 return true;
+            }
         }
         // we only care about checkbox controls.
         const onlyCbs = this.nativeCbs.filter((cb) => cb?.type === 'checkbox');
@@ -180,26 +198,30 @@ export class CheckboxGroup {
         const checked = onlyCbs.filter((cb) => cb.checked);
         const required = onlyCbs.find((cb) => cb.required);
         let invalid = false;
-        if (required && !checked.find((cb) => cb === required))
+        if (required && !checked.find((cb) => cb === required)) {
+            // we have a required checkbox that is not checked
+            // so we have a native validation error
             return true;
+        }
         this.checkboxes.forEach((cb, i) => {
             const nativeCb = this.nativeCbs[i];
-            cb.setError('');
-            nativeCb.setCustomValidity('');
+            // cb.setError('');
+            // nativeCb.setCustomValidity('');
+            let errorMsg = '';
             if (this.min && checked.length < this.min) {
-                this.errorMessage = `You must select a minimum of ${this.min} values.`;
+                errorMsg = `You must select a minimum of ${this.min} values.`;
                 invalid = true;
             }
             if (this.max && checked.length > this.max) {
-                this.errorMessage = `Only up to ${this.max} values are allowed.`;
+                errorMsg = `Only up to ${this.max} values are allowed.`;
                 invalid = true;
             }
             if (invalid) {
-                cb.setError(this.errorMessage, this.showErrorMsg);
+                cb.setError(errorMsg, this.showErrorMsg);
                 // bit fugly. We're just doing this 'cos stencil
                 // methods are async and we want the validity message
                 // asap to keep things in sync
-                nativeCb.setCustomValidity(this.errorMessage);
+                nativeCb.setCustomValidity(errorMsg);
             }
         });
         return invalid;
@@ -230,14 +252,19 @@ export class CheckboxGroup {
     }
     setCbValue() {
         this.checkboxes?.forEach((cb) => {
-            if (cb.value === this.value ||
-                (Array.isArray(this.value) && this.value.includes(cb.value))) {
+            let value = this.value;
+            if (typeof this.value === 'string' && this.value.includes(',')) {
+                value = this.value.split(',');
+            }
+            if (cb.value === value ||
+                cb.value === this.value ||
+                (Array.isArray(value) && value.includes(cb.value))) {
                 cb.checked = true;
             }
         });
     }
     attachSlotObserver() {
-        if (!!this.mo || !window['MutationObserver'])
+        if (!!this.mo || Build.isServer)
             return;
         const mo = (this.mo = new MutationObserver(() => this.handleSlotChange()));
         mo.observe(this.host, { childList: true });
@@ -254,26 +281,36 @@ export class CheckboxGroup {
                 cb.addEventListener('invalid', this.handleInvalid);
         });
     }
+    // handle native `invalid` events from native inputs
     handleInvalid = (ev) => {
         this._invalid = true;
-        if (this.validateOn === 'submit') {
-            this._invalid = this.showErrorMsg = this.customValidate();
-        }
-        if (this.showInlineError)
+        // prevent default to suppress native error message
+        if (this.showInlineError) {
             ev.preventDefault();
+        }
+        if (this.validateOn === 'submit')
+            this.customValidate();
         this.showInlineValidation(ev);
     };
     showInlineValidation = (ev) => {
-        if (!this.nativeCbs || !this.nativeCbs.length)
+        if (!this.nativeCbs || !this.nativeCbs.length || !this.showInlineError)
             return;
         if (this.validateOn === 'submitThenDirty')
             this.validateOn = 'dirty';
         this.showErrorMsg = false;
         this._invalid = false;
-        this.nativeCbs.forEach((cb, _i) => {
-            if (!cb.validity.valid) {
-                this.errorMessage = cb.validationMessage;
-                this.showErrorMsg = true;
+        this.errorMessage = '';
+        // find any native error messages set against native controls
+        // (`customValidate` sets custom validity messages on these controls too)
+        this.checkboxes.forEach((cb, i) => {
+            const nativeCb = this.nativeCbs[i];
+            if (!nativeCb.validity.valid) {
+                if (nativeCb.validationMessage) {
+                    this.errorMessage = nativeCb.validationMessage;
+                    this.showErrorMsg = true;
+                    // set the visual validity state on the individual control
+                    cb.reportValidity(false);
+                }
                 this._invalid = true;
             }
         });
@@ -287,8 +324,7 @@ export class CheckboxGroup {
     componentWillLoad() {
         this.handleValueChange = this.handleValueChange.bind(this);
         this.handleValueChange = debounce(this.handleValueChange, 1);
-        this.showInlineValidation = debounce(this.showInlineValidation, 50);
-        this.customValidate = this.customValidate.bind(this);
+        this.showInlineValidation = debounce(this.showInlineValidation, 10);
         this.handleDisabledChange();
         this.handleSlotChange();
         this.setCbValue();
@@ -310,10 +346,14 @@ export class CheckboxGroup {
     render() {
         const legendId = this.grpId + '-lbl';
         const moreId = this.showInlineError || this.hasHelperSlot ? this.grpId + '-more' : '';
-        return (h(Host, { key: '93c54171d768c6ef41eeb1d7e24b8d80c83af780', class: this.checkboxTypes }, h("fieldset", { key: '24457a9b9d1d5993eb2a6c78f2d39e057be99a2f', disabled: this.disabled, class: { nanogroupcb: true, 'show-error': this.showErrorMsg } }, h("legend", { key: '1e443d6d7970c8c3c8e03dbdc470d8cbf8ab60d2', id: legendId, class: {
-                nanogroupcb__legend: true,
+        return (h(Host, { key: 'b6d81d374260c8cb97dfc1557238c20945b44632', class: this.checkboxTypes }, h("fieldset", { key: 'fa058ccca23a91b369c659ff442585de43a4333d', disabled: this.disabled, class: {
+                cbgroup: true,
+                'has-error': this.showErrorMsg && !!this.errorMessage,
+                'has-helper': this.hasHelperSlot,
+            } }, h("legend", { key: '429737fad96eef6af343c5e978a4642a599ea4a6', id: legendId, class: {
+                cbgroup__legend: true,
                 'visually-hide': this.hideLegend,
-            } }, h("slot", { key: 'fc853be6da9fe11a8f2e82f5d3c458587227a8be', name: "legend" }, this.legend)), h("div", { key: 'f5f0ffae9ae4987cfdb3bad2ccf92c3334d08895', class: "nanogroupcb__cbs", role: "group", "aria-labelledby": legendId + ' ' + moreId }, h("slot", { key: '559dba12b4fe7ec3b791986487a3c3615c6a3a11' })), (this.showInlineError || this.hasHelperSlot) && (h("div", { key: 'a1e9ce7fc24ec31ea12211073700670f08eb9f04', class: "nanogroupcb__more", id: moreId }, this.showInlineError ? (h("div", { class: "nanogroupcb__error" }, this.errorMessage)) : (''), h("div", { key: 'bb8bddba4822fe404c336b4c742c2865ff58c9d1', class: "nanogroupcb__help" }, h("slot", { key: '22e8b1b90d45bf6883a291239d01b8dc90c9b4d9', name: "helper" })))))));
+            } }, h("slot", { key: 'd592da5791f7e830c57aec7c62c01b32326b5a34', name: "legend" }, this.legend)), h("div", { key: '0bb0a2206a13bb9f773857b4ac897bfffb75a741', class: "cbgroup__cbs", role: "group", "aria-labelledby": legendId + ' ' + moreId }, h("slot", { key: '23f668b5fa4a1d23f39ea49998ae75767df15624' })), (this.showInlineError || this.hasHelperSlot) && (h("div", { key: '1e15d0bb57352fb8cd7a3a746dd5adb8bb979819', class: "cbgroup__more", id: moreId }, this.showInlineError ? (h("div", { class: "cbgroup__error" }, this.errorMessage)) : (''), h("div", { key: 'e23596644945fafd2802bf1ac8958a314a076bc8', class: "cbgroup__help" }, h("slot", { key: 'd6df38d9ceaa915364a20dc29d8a1457b071c6ef', name: "helper" })))))));
     }
     static get is() { return "nano-checkbox-group"; }
     static get encapsulation() { return "scoped"; }
@@ -331,6 +371,7 @@ export class CheckboxGroup {
         return {
             "validateOn": {
                 "type": "string",
+                "attribute": "validate-on",
                 "mutable": true,
                 "complexType": {
                     "original": "'dirty' | 'submit' | 'submitThenDirty'",
@@ -345,12 +386,12 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "validate-on",
                 "reflect": false,
                 "defaultValue": "'submitThenDirty'"
             },
             "showInlineError": {
                 "type": "boolean",
+                "attribute": "show-inline-error",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -365,12 +406,12 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-inline-error",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "min": {
                 "type": "number",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -385,12 +426,12 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "max": {
                 "type": "number",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -405,12 +446,12 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false,
                 "defaultValue": "null"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean | null",
@@ -425,13 +466,13 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "null"
             },
             "legend": {
                 "type": "string",
-                "mutable": false,
+                "attribute": "legend",
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -441,16 +482,16 @@ export class CheckboxGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "A common label for children controls"
+                    "text": "A collective label for children controls"
                 },
-                "getter": false,
-                "setter": false,
-                "attribute": "legend",
+                "getter": true,
+                "setter": true,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "hideLegend": {
                 "type": "boolean",
+                "attribute": "hide-legend",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -465,12 +506,12 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-legend",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "invalid": {
                 "type": "boolean",
+                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -488,12 +529,12 @@ export class CheckboxGroup {
                 },
                 "getter": true,
                 "setter": false,
-                "attribute": "invalid",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "validityMessage": {
                 "type": "string",
+                "attribute": "validity-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -511,12 +552,12 @@ export class CheckboxGroup {
                 },
                 "getter": true,
                 "setter": false,
-                "attribute": "validity-message",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string[] | string",
@@ -531,7 +572,6 @@ export class CheckboxGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             }
         };
@@ -695,4 +735,3 @@ export class CheckboxGroup {
     }
 }
 let grpIds = 0;
-//# sourceMappingURL=checkbox-group.js.map

package/dist/collection/components/checkbox/checkbox-interface.js CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export {};
2	- //# sourceMappingURL=checkbox-interface.js.map