@dso-toolkit/core 62.18.0 → 62.19.0

package/dist/collection/components/selectable/selectable.js

@@ -7,359 +7,357 @@ import { createIdentifier } from "../../utils/create-identifier";
  * @slot options - for further nested selectable options: `<ul class="dso-selectable-options" slot="options">` and wrap each Selectable in a `<li>`.
  */
 export class Selectable {
-  constructor() {
-    this.fallbackIdentifier = createIdentifier("DsoSelectable");
-    this.handleOnChange = (e) => {
-      const { target } = e;
-      this.dsoChange.emit({
-        originalEvent: e,
-        checked: target instanceof HTMLInputElement && target.checked,
-      });
-      forceUpdate(this.host);
-    };
-    this.type = undefined;
-    this.identifier = undefined;
-    this.name = undefined;
-    this.value = undefined;
-    this.invalid = undefined;
-    this.describedById = undefined;
-    this.labelledById = undefined;
-    this.disabled = undefined;
-    this.required = undefined;
-    this.checked = undefined;
-    this.indeterminate = undefined;
-    this.infoFixed = undefined;
-    this.infoActive = false;
-    this.keyboardFocus = false;
-  }
-  /**
-   * Method to toggle the Info. Is set to `active` when passed.
-   *
-   * If `active` is not passed, Info is toggled to opposite value.
-   * @param active
-   */
-  async toggleInfo(active) {
-    this.infoActive = active !== null && active !== void 0 ? active : !this.infoActive;
-  }
-  componentDidLoad() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
-    this.mutationObserver.observe(this.host, {
-      childList: true,
-    });
-    this.setIndeterminate();
-  }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
-  setIndeterminate() {
-    if (!(this.input instanceof HTMLInputElement) || this.type !== "checkbox") {
-      return;
+    constructor() {
+        this.fallbackIdentifier = createIdentifier("DsoSelectable");
+        this.handleOnChange = (e) => {
+            const { target } = e;
+            this.dsoChange.emit({
+                originalEvent: e,
+                checked: target instanceof HTMLInputElement && target.checked,
+            });
+            forceUpdate(this.host);
+        };
+        this.type = undefined;
+        this.identifier = undefined;
+        this.name = undefined;
+        this.value = undefined;
+        this.invalid = undefined;
+        this.describedById = undefined;
+        this.labelledById = undefined;
+        this.disabled = undefined;
+        this.required = undefined;
+        this.checked = undefined;
+        this.indeterminate = undefined;
+        this.infoFixed = undefined;
+        this.infoActive = false;
+        this.keyboardFocus = false;
     }
-    this.input.indeterminate = !!this.indeterminate;
-  }
-  render() {
-    var _a;
-    const hasInfo = !!this.host.querySelector('[slot="info"]');
-    return (h(Fragment, null, h("div", { class: "dso-selectable-container" }, h("div", { class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", null, h("slot", { name: "info" })))), h("slot", { name: "options" })));
-  }
-  componentDidRender() {
-    if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {
-      this.input.checked = this.checked;
+    /**
+     * Method to toggle the Info. Is set to `active` when passed.
+     *
+     * If `active` is not passed, Info is toggled to opposite value.
+     * @param active
+     */
+    async toggleInfo(active) {
+        this.infoActive = active !== null && active !== void 0 ? active : !this.infoActive;
     }
-  }
-  getIdentifier() {
-    var _a;
-    return (_a = this.identifier) !== null && _a !== void 0 ? _a : this.fallbackIdentifier;
-  }
-  static get is() { return "dso-selectable"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["selectable.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["selectable.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"checkbox\" | \"radio\"",
-          "resolved": "\"checkbox\" | \"radio\"",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Type of Selectable.\r\n\r\n`checkbox`: Multiple options\r\n`radio`: Single option."
-        },
-        "attribute": "type",
-        "reflect": false
-      },
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "To set `<input id>` attribute for external references."
-        },
-        "attribute": "identifier",
-        "reflect": false
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Name of the Selectable. Can be used to group Selectables."
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The value of the Selectable."
-        },
-        "attribute": "value",
-        "reflect": false
-      },
-      "invalid": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Set to true of the current value is not valid."
-        },
-        "attribute": "invalid",
-        "reflect": false
-      },
-      "describedById": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "To link this control to an element that describes it."
-        },
-        "attribute": "described-by-id",
-        "reflect": false
-      },
-      "labelledById": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "To link this control to an element that labels it."
-        },
-        "attribute": "labelled-by-id",
-        "reflect": false
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "To disable the Selectable."
-        },
-        "attribute": "disabled",
-        "reflect": false
-      },
-      "required": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "To mark the Selectable as required."
-        },
-        "attribute": "required",
-        "reflect": false
-      },
-      "checked": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Mark the Selectable as checked"
-        },
-        "attribute": "checked",
-        "reflect": true
-      },
-      "indeterminate": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n\r\nCan be used to indicate child Selectables that are a mix of checked and unchecked."
-        },
-        "attribute": "indeterminate",
-        "reflect": false
-      },
-      "infoFixed": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Set to true if the Info should not be toggled and always visible."
-        },
-        "attribute": "info-fixed",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "infoActive": {},
-      "keyboardFocus": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dsoChange",
-        "name": "dsoChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the user checks or unchecks the Selectable."
-        },
-        "complexType": {
-          "original": "SelectableChangeEvent",
-          "resolved": "SelectableChangeEvent",
-          "references": {
-            "SelectableChangeEvent": {
-              "location": "import",
-              "path": "./selectable.interfaces",
-              "id": "src/components/selectable/selectable.interfaces.ts::SelectableChangeEvent"
-            }
-          }
+    componentDidLoad() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
+        this.mutationObserver.observe(this.host, {
+            childList: true,
+        });
+        this.setIndeterminate();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    setIndeterminate() {
+        if (!(this.input instanceof HTMLInputElement) || this.type !== "checkbox") {
+            return;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "toggleInfo": {
-        "complexType": {
-          "signature": "(active?: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "active"
-                }],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Method to toggle the Info. Is set to `active` when passed.\r\n\r\nIf `active` is not passed, Info is toggled to opposite value.",
-          "tags": [{
-              "name": "param",
-              "text": "active"
-            }]
+        this.input.indeterminate = !!this.indeterminate;
+    }
+    render() {
+        var _a;
+        const hasInfo = !!this.host.querySelector('[slot="info"]');
+        return (h(Fragment, { key: '464fc6c5ae2facd6f1bcb4445d555d2079544ec6' }, h("div", { key: '3769e5d36ddccd9c026c8d26617400fdcb03c583', class: "dso-selectable-container" }, h("div", { key: '27b398eaa28f243631fb578c2785a81757eedfa6', class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, h("input", { key: '3aa55937f3f0024900a4da1f6f43f381772dbd1a', type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: this.handleOnChange, onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null, h("slot", null)))), hasInfo && !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) }))), hasInfo && (h("dso-info", { id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", null, h("slot", { name: "info" })))), h("slot", { key: '6530043dfeb9be8ff9e98dff3c3b7bd34d47a4e6', name: "options" })));
+    }
+    componentDidRender() {
+        if (this.input && typeof this.checked === "boolean" && this.input.checked !== this.checked) {
+            this.input.checked = this.checked;
         }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "indeterminate",
-        "methodName": "setIndeterminate"
-      }];
-  }
+    }
+    getIdentifier() {
+        var _a;
+        return (_a = this.identifier) !== null && _a !== void 0 ? _a : this.fallbackIdentifier;
+    }
+    static get is() { return "dso-selectable"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["selectable.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["selectable.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"checkbox\" | \"radio\"",
+                    "resolved": "\"checkbox\" | \"radio\"",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Type of Selectable.\r\n\r\n`checkbox`: Multiple options\r\n`radio`: Single option."
+                },
+                "attribute": "type",
+                "reflect": false
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "To set `<input id>` attribute for external references."
+                },
+                "attribute": "identifier",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the Selectable. Can be used to group Selectables."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the Selectable."
+                },
+                "attribute": "value",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true of the current value is not valid."
+                },
+                "attribute": "invalid",
+                "reflect": false
+            },
+            "describedById": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "To link this control to an element that describes it."
+                },
+                "attribute": "described-by-id",
+                "reflect": false
+            },
+            "labelledById": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "To link this control to an element that labels it."
+                },
+                "attribute": "labelled-by-id",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "To disable the Selectable."
+                },
+                "attribute": "disabled",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "To mark the Selectable as required."
+                },
+                "attribute": "required",
+                "reflect": false
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Mark the Selectable as checked"
+                },
+                "attribute": "checked",
+                "reflect": true
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n\r\nCan be used to indicate child Selectables that are a mix of checked and unchecked."
+                },
+                "attribute": "indeterminate",
+                "reflect": false
+            },
+            "infoFixed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true if the Info should not be toggled and always visible."
+                },
+                "attribute": "info-fixed",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "infoActive": {},
+            "keyboardFocus": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoChange",
+                "name": "dsoChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user checks or unchecks the Selectable."
+                },
+                "complexType": {
+                    "original": "SelectableChangeEvent",
+                    "resolved": "SelectableChangeEvent",
+                    "references": {
+                        "SelectableChangeEvent": {
+                            "location": "import",
+                            "path": "./selectable.interfaces",
+                            "id": "src/components/selectable/selectable.interfaces.ts::SelectableChangeEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleInfo": {
+                "complexType": {
+                    "signature": "(active?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "active",
+                            "type": "boolean | undefined",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Method to toggle the Info. Is set to `active` when passed.\r\n\r\nIf `active` is not passed, Info is toggled to opposite value.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "active"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "indeterminate",
+                "methodName": "setIndeterminate"
+            }];
+    }
 }
 //# sourceMappingURL=selectable.js.map