@watermarkinsights/ripple 0.0.1 → 0.1.0-alpha.1

package/dist/collection/components/selects/wm-optgroup/wm-optgroup.js

@@ -0,0 +1,363 @@
+import { h, Host } from "@stencil/core";
+import { handleDisabledAttribute, toBool } from "../../../global/functions";
+/**
+ * Named group of wm-option elements used inside wm-nested-select. Renders as a slide-in
+ * panel that appears when the user selects the group from the top-level menu.
+ *
+ * @usageNotes
+ * - Always used as a direct child of wm-nested-select.
+ * - `label` is required — it is shown as the group heading in the dropdown menu.
+ * - The `disabled` prop prevents the group button from being clicked, hiding all its options.
+ * - `wmOptgroupAllSelected` and `wmOptgroupAllDeselected` are fired when the "Select All /
+ *   Deselect All" button inside the group is activated; they bubble to wm-nested-select.
+ *
+ * @example {html} Optgroup inside nested select
+ * <wm-nested-select label="Department">
+ *   <wm-optgroup label="Sciences">
+ *     <wm-option selected>Select a department</wm-option>
+ *     <wm-option>Biology</wm-option>
+ *   </wm-optgroup>
+ * </wm-nested-select>
+ *
+ * @example {react} Optgroup inside nested select
+ * <WmNestedSelect label="Department">
+ *   <WmOptgroup label="Sciences">
+ *     <WmOption selected={true}>Select a department</WmOption>
+ *     <WmOption>Biology</WmOption>
+ *   </WmOptgroup>
+ * </WmNestedSelect>
+ *
+ * @example {html} Disabled optgroup
+ * <wm-nested-select label="Program">
+ *   <wm-optgroup label="Sciences" disabled>
+ *     <wm-option>Biology</wm-option>
+ *   </wm-optgroup>
+ * </wm-nested-select>
+ *
+ * @example {react} Disabled optgroup
+ * <WmNestedSelect label="Program">
+ *   <WmOptgroup label="Sciences" disabled={true}>
+ *     <WmOption>Biology</WmOption>
+ *   </WmOptgroup>
+ * </WmNestedSelect>
+ */
+export class Optgroup {
+    constructor() {
+        this.label = undefined;
+        this.isExpanded = false;
+        this.multiple = false;
+        this.disabled = false;
+    }
+    get parentNestedSelect() {
+        return this.el.parentElement;
+    }
+    get isDisabled() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        return toBool(this.disabled);
+    }
+    isExpandedChanged() {
+        if (this.isExpanded) {
+            this.el.classList.add("visible");
+            this.optgroupExpanded.emit();
+            window.setTimeout(() => {
+                // wait for slide in animation to complete before assigning focus
+                this.optionListEl.handleInitialFocus();
+            }, 250);
+        }
+        else {
+            this.optgroupHidden.emit(this.label);
+            this.optionListEl.clearSearch();
+            window.setTimeout(() => {
+                // wait for slide out animation to complete before hiding
+                this.el.classList.remove("visible");
+            }, 250);
+        }
+        if (this.parentNestedSelect.multiple) {
+            this.optionListEl.updateOptionVisibility();
+        }
+    }
+    /**
+     * @description Programmatically deselects all options in this group by emitting
+     * `wmOptgroupAllDeselected`.
+     * @returns `Promise<void>`
+     */
+    async emitDeselection() {
+        this.wmOptgroupAllDeselected.emit();
+    }
+    /**
+     * @internal
+     * @description Notifies the internal option list that child options have changed so it can
+     * refresh clone state — not for application use.
+     */
+    async handleChildChange() {
+        this.optionListEl.handleChildChange();
+    }
+    handleOptionKeyLeft() {
+        this.isExpanded = false;
+    }
+    componentWillLoad() {
+        handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    render() {
+        return (h(Host, { key: '200740286cccf6118cfac8ea47b4fa2fd6188d44' }, h("div", { key: 'e2f2ff3597b4efe04ede67e03c33c63c08174b30', class: `list-wrapper` }, h("priv-option-list", { key: '8cee7311d3b2cf8dc2ca9e6baa6099551995519a', ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, maxHeight: this.parentNestedSelect.constrainedMaxHeight, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", { key: '58b743bb4046bc9b1f5cfced2ee486adc764c95a' })))));
+    }
+    static get is() { return "wm-optgroup"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-optgroup.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-optgroup.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Display name for this group, shown as the group button text in the\ndropdown menu."
+                        }, {
+                            "name": "required",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "isExpanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Controls whether this group's option panel is currently visible. Managed\nby the parent wm-nested-select \u2014 not for application use."
+                        }],
+                    "text": ""
+                },
+                "attribute": "is-expanded",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Propagated from the parent wm-nested-select to configure the internal\noption list \u2014 not for application use."
+                        }],
+                    "text": ""
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Disables this group, preventing the user from opening it or selecting any\nof its options."
+                        }, {
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmOptgroupAllSelected",
+                "name": "wmOptgroupAllSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the \"Select All\" button inside this group is activated."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "wmOptgroupAllDeselected",
+                "name": "wmOptgroupAllDeselected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "description",
+                            "text": "Fires when the \"Deselect All\" button inside this group is activated."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "optgroupExpanded",
+                "name": "optgroupExpanded",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Signals the parent wm-nested-select that this group's panel has opened \u2014\nnot for application use."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "optgroupHidden",
+                "name": "optgroupHidden",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Signals the parent wm-nested-select that this group's panel has closed,\ncarrying the group label so the parent can restore focus \u2014 not for application use."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "emitDeselection": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "description",
+                            "text": "Programmatically deselects all options in this group by emitting\n`wmOptgroupAllDeselected`."
+                        }, {
+                            "name": "returns",
+                            "text": "`Promise<void>`"
+                        }]
+                }
+            },
+            "handleChildChange": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }, {
+                            "name": "description",
+                            "text": "Notifies the internal option list that child options have changed so it can\nrefresh clone state \u2014 not for application use."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isExpanded",
+                "methodName": "isExpandedChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "wmKeyLeftPressed",
+                "method": "handleOptionKeyLeft",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}