@xplortech/apollo-core 1.0.0-beta.8 → 2.4.2

package/dist/collection/components/xpl-dropdown/xpl-dropdown.js

@@ -1,271 +1,453 @@
 var __rest = (this && this.__rest) || function (s, e) {
-  var t = {};
-  for (var p in s)
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-      t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t[p[i]] = s[p[i]];
-    }
-  return t;
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
-import { Host, h } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 export class XplDropdown {
-  constructor() {
-    this.handleClickOutside = ({ target }) => {
-      const { triggerId } = this;
-      const isTrigger = triggerId && target.id === triggerId;
-      const isInside = this.hostElement.contains(target);
-      if (!isInside && !isTrigger)
+    constructor() {
         this.isOpen = false;
-    };
-    this.isOpen = false;
-    this.closeOnSelect = true;
-    this.mode = 'single';
-    this.options = undefined;
-    this.selectOnFocus = false;
-    this.triggerId = undefined;
-    this.update = undefined;
-  }
-  /**
-   * called on dropdown option click and keydown events to update isSelected states
-   */
-  async handleSelect(e, { component }) {
-    const { hostElement, mode, options, update } = this;
-    const isSingle = mode === 'single';
-    const isMulti = mode === 'multi';
-    if (Boolean(options)) {
-      options
-        .reduce((acc, curr) => [
-        ...acc,
-        ...(curr.groupName ? curr.options : [curr]),
-      ], [])
-        .forEach((option) => {
-        const isMatch = option.label === component.hostElement.label;
-        if (isSingle) {
-          option.isSelected = isMatch;
-          component.hostElement.isSelected = option.isSelected;
-        }
-        else if (isMulti && isMatch) {
-          option.isSelected = !option.isSelected;
-          component.hostElement.isSelected = option.isSelected;
+        this.closeOnSelect = true;
+        this.mode = 'single';
+        this.anchorToTrigger = false;
+        this.selectOnFocus = false;
+        this.requestAnimationFrameId = null;
+        this.updateDropdownPosition = () => {
+            var _a;
+            if (!this.anchorToTrigger || !this.triggerId) {
+                return;
+            }
+            const triggerRect = (_a = document.getElementById(this.triggerId)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            if (!triggerRect) {
+                return;
+            }
+            const dropdownHeight = Math.max(this.hostElement.offsetHeight, 300);
+            const viewportHeight = window.innerHeight;
+            const spaceBelow = viewportHeight - triggerRect.bottom;
+            const spaceAbove = triggerRect.top;
+            const shouldPositionAbove = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
+            if (shouldPositionAbove) {
+                this.hostElement.style.cssText = `
+                left: ${triggerRect.left}px;
+                width: ${triggerRect.width}px;
+                bottom: ${viewportHeight - triggerRect.top}px;
+                top: auto;
+            `;
+                this.hostElement.classList.add('xpl-dropdown--above');
+                this.hostElement.classList.remove('xpl-dropdown--below');
+            }
+            else {
+                this.hostElement.style.cssText = `
+                left: ${triggerRect.left}px;
+                width: ${triggerRect.width}px;
+                top: ${triggerRect.bottom}px;
+                bottom: auto;
+            `;
+                this.hostElement.classList.add('xpl-dropdown--below');
+                this.hostElement.classList.remove('xpl-dropdown--above');
+            }
+        };
+        this.handleClickOutside = ({ target }) => {
+            const { triggerId } = this;
+            const triggerElement = triggerId ? document.getElementById(triggerId) : null;
+            const isTriggerOrChild = triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.contains(target);
+            const isInside = this.hostElement.contains(target);
+            if (!isInside && !isTriggerOrChild && this.isOpen) {
+                this.isOpen = false;
+            }
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === 'Escape' && this.isOpen) {
+                this.isOpen = false;
+            }
+        };
+    }
+    onSelectedValuesChanged(newValues, initialRender = false) {
+        if (this.options && this.options.length > 0) {
+            const flatOptions = this.options.reduce((acc, curr) => [...acc, ...(curr.groupName ? curr.options : [curr])], []);
+            flatOptions.forEach((option) => {
+                const optionValue = option.value || option.label;
+                if (this.mode === 'single') {
+                    option.isSelected = optionValue === newValues;
+                }
+                else {
+                    const selectedArray = Array.isArray(newValues) ? newValues : [];
+                    option.isSelected = selectedArray.includes(optionValue);
+                }
+            });
+            const mapOptions = (option) => {
+                option.options = option.groupName ? option.options.map(mapOptions) : undefined;
+                return option;
+            };
+            this.options = this.options.map(mapOptions);
+            if (this.update && !initialRender) {
+                this.update(null, { component: this });
+            }
         }
-      });
-      const mapOptions = (option) => {
-        option.options = option.groupName
-          ? option.options.map(mapOptions)
-          : undefined;
-        return option;
-      };
-      this.options = options.map(mapOptions);
     }
-    else if (isSingle) {
-      const optionNodes = Array.from(hostElement.querySelectorAll('xpl-dropdown-option'));
-      optionNodes.forEach((node) => (node.isSelected = node === component.hostElement));
+    onIsOpenStateChange(newValue) {
+        this.isOpenChange.emit(newValue);
     }
-    else if (isMulti) {
-      component.isSelected = !component.isSelected;
+    onWindowScroll() {
+        if (this.requestAnimationFrameId) {
+            cancelAnimationFrame(this.requestAnimationFrameId);
+        }
+        this.requestAnimationFrameId = requestAnimationFrame(() => {
+            this.updateDropdownPosition();
+        });
     }
-    if (Boolean(update))
-      update(e, { component: this });
-  }
-  componentWillLoad() {
-    this.handleSelect = this.handleSelect.bind(this);
-  }
-  connectedCallback() {
-    document.addEventListener('mousedown', this.handleClickOutside.bind(this));
-  }
-  disconnectedCallback() {
-    document.removeEventListener('mousedown', this.handleClickOutside);
-  }
-  render() {
-    let { isOpen } = this;
-    const { mode, options } = this;
-    const hasOptions = options && options.length;
-    const mappedOptions = hasOptions &&
-      options.map((_a) => {
-        var { groupName, options } = _a, properties = __rest(_a, ["groupName", "options"]);
-        return groupName ? (h("xpl-dropdown-group", Object.assign({ groupName: groupName, options: options }, properties))) : (h("xpl-dropdown-option", Object.assign({}, properties)));
-      });
-    return (h(Host, { "aria-expanded": isOpen, class: {
-        'xpl-dropdown': true,
-        'xpl-dropdown--multi': mode === 'multi',
-        'xpl-dropdown--open': isOpen,
-      }, role: "listbox" }, h("ul", { class: "xpl-dropdown-list" }, mappedOptions || h("slot", { name: "options" }))));
-  }
-  static get is() { return "xpl-dropdown"; }
-  static get properties() {
-    return {
-      "isOpen": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "text to display as heading"
-        },
-        "attribute": "open",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "closeOnSelect": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "options that are listed"
-        },
-        "attribute": "close-on-select",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "mode": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'single' | 'multi'",
-          "resolved": "\"multi\" | \"single\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "constant representing number of options that can be selected"
-        },
-        "attribute": "mode",
-        "reflect": false,
-        "defaultValue": "'single'"
-      },
-      "options": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "DropdownItem[]",
-          "resolved": "Partial<DropdownOption & DropdownOptionGroup>[]",
-          "references": {
-            "DropdownItem": {
-              "location": "import",
-              "path": "./dropdownoption"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "options that are listed"
+    async handleSelect(e, { component }) {
+        const { hostElement, mode, options, update } = this;
+        const isSingle = mode === 'single';
+        const isMulti = mode === 'multi';
+        if (options) {
+            options
+                .reduce((acc, curr) => [...acc, ...(curr.groupName ? curr.options : [curr])], [])
+                .forEach((option) => {
+                const isMatch = (option.value || option.label) ===
+                    (component.hostElement.value || component.hostElement.label);
+                if (isSingle) {
+                    option.isSelected = isMatch;
+                    component.hostElement.isSelected = true;
+                }
+                else if (isMulti && isMatch) {
+                    option.isSelected = !option.isSelected;
+                    component.hostElement.isSelected = option.isSelected;
+                }
+            });
+            const mapOptions = (option) => {
+                option.options = option.groupName ? option.options.map(mapOptions) : undefined;
+                return option;
+            };
+            this.options = options.map(mapOptions);
         }
-      },
-      "selectOnFocus": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "whether selection should be made when focusing on interactable element"
-        },
-        "attribute": "select-on-focus",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "triggerId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "the id for the element that triggers the open state"
-        },
-        "attribute": "trigger-id",
-        "reflect": false
-      },
-      "update": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "(\n        e: Event,\n        { component }: { component: XplDropdown }\n    ) => void",
-          "resolved": "(e: Event, { component }: { component: XplDropdown; }) => void",
-          "references": {
-            "Event": {
-              "location": "global"
-            },
-            "XplDropdown": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "call back function invoked when a selection is made"
+        else if (isSingle) {
+            const optionNodes = Array.from(hostElement.querySelectorAll('xpl-dropdown-option'));
+            optionNodes.forEach((node) => {
+                node.isSelected = node === component.hostElement;
+            });
         }
-      }
-    };
-  }
-  static get methods() {
-    return {
-      "handleSelect": {
-        "complexType": {
-          "signature": "(e: Event, { component }: { component: XplDropdownOption; }) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
+        else if (isMulti) {
+            component.isSelected = !component.isSelected;
+        }
+        if (update)
+            update(e, { component: this });
+    }
+    componentWillLoad() {
+        this.handleSelect = this.handleSelect.bind(this);
+        if (this.selectedValues) {
+            this.onSelectedValuesChanged(this.selectedValues, true);
+        }
+    }
+    connectedCallback() {
+        document.addEventListener('mousedown', this.handleClickOutside.bind(this));
+        document.addEventListener('keydown', this.handleKeyDown);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('mousedown', this.handleClickOutside);
+        document.removeEventListener('keydown', this.handleKeyDown);
+    }
+    componentDidLoad() {
+        this.updateDropdownPosition();
+    }
+    render() {
+        const { isOpen } = this;
+        const { mode, options } = this;
+        const hasOptions = options && options.length;
+        const mappedOptions = hasOptions &&
+            options.map((_a) => {
+                var { groupName, options: opts, subtitle } = _a, properties = __rest(_a, ["groupName", "options", "subtitle"]);
+                return groupName ? (h("xpl-dropdown-group", Object.assign({ groupName: groupName, options: opts }, properties))) : (h("xpl-dropdown-option", Object.assign({ subtitle: subtitle }, properties)));
+            });
+        return (h(Host, { key: 'd576d4fbedb6a4a4a3da81b06ef881e1b1c6afe2', "aria-expanded": isOpen, class: {
+                'xpl-dropdown': true,
+                'xpl-dropdown--multi': mode === 'multi',
+                'xpl-dropdown--open': isOpen,
+                'xpl-dropdown--anchor-to-trigger': this.anchorToTrigger,
+            }, role: "listbox" }, h("ul", { key: '78bc70d74413a238f0a5366fd607361e5157eafe', class: "xpl-dropdown-list" }, mappedOptions || h("slot", { key: '9128e7407413335b0699434e68e2aefafd222fc2', name: "options" }))));
+    }
+    static get is() { return "xpl-dropdown"; }
+    static get properties() {
+        return {
+            "isOpen": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "text to display as heading"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "closeOnSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "options that are listed"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-select",
+                "defaultValue": "true"
             },
-            "Event": {
-              "location": "global"
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'single' | 'multi'",
+                    "resolved": "\"multi\" | \"single\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "constant representing number of options that can be selected"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'single'"
             },
-            "XplDropdownOption": {
-              "location": "import",
-              "path": "./xpl-dropdown-option/xpl-dropdown-option"
+            "options": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "DropdownItem[]",
+                    "resolved": "Partial<DropdownOption & DropdownOptionGroup>[]",
+                    "references": {
+                        "DropdownItem": {
+                            "location": "import",
+                            "path": "./dropdown-option",
+                            "id": "src/components/components/xpl-dropdown/dropdown-option.ts::DropdownItem",
+                            "referenceLocation": "DropdownItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "options that are listed"
+                },
+                "getter": false,
+                "setter": false
             },
-            "DropdownItem": {
-              "location": "import",
-              "path": "./dropdownoption"
+            "anchorToTrigger": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "whether to anchor the dropdown to the trigger element, requires triggerId to be set"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "anchor-to-trigger",
+                "defaultValue": "false"
+            },
+            "selectedValues": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The currently selected value(s) in the dropdown."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-values"
+            },
+            "selectOnFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "whether selection should be made when focusing on interactive element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "select-on-focus",
+                "defaultValue": "false"
+            },
+            "triggerId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "the id for the element that triggers the open state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-id"
+            },
+            "update": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(e, { component }: { component: XplDropdown }) => void",
+                    "resolved": "(e: any, { component }: { component: XplDropdown; }) => void",
+                    "references": {
+                        "XplDropdown": {
+                            "location": "global",
+                            "id": "global::XplDropdown"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "call back function invoked when a selection is made"
+                },
+                "getter": false,
+                "setter": false
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "called on dropdown option click and keydown events to update isSelected states",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "hostElement"; }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "isOpenChange",
+                "name": "isOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the open state of the dropdown changes."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "handleSelect": {
+                "complexType": {
+                    "signature": "(e: any, { component }: { component: XplDropdownOption; }) => Promise<void>",
+                    "parameters": [{
+                            "name": "e",
+                            "type": "any",
+                            "docs": ""
+                        }, {
+                            "name": "__1",
+                            "type": "{ component: XplDropdownOption; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "XplDropdownOption": {
+                            "location": "global",
+                            "id": "global::XplDropdownOption"
+                        },
+                        "DropdownItem": {
+                            "location": "import",
+                            "path": "./dropdown-option",
+                            "id": "src/components/components/xpl-dropdown/dropdown-option.ts::DropdownItem",
+                            "referenceLocation": "DropdownItem"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "called on dropdown option click and keydown events to update isSelected states",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "selectedValues",
+                "methodName": "onSelectedValuesChanged"
+            }, {
+                "propName": "isOpen",
+                "methodName": "onIsOpenStateChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "scroll",
+                "method": "onWindowScroll",
+                "target": "window",
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "scroll",
+                "method": "onWindowScroll",
+                "target": "document",
+                "capture": true,
+                "passive": true
+            }, {
+                "name": "resize",
+                "method": "onWindowScroll",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }];
+    }
 }