smoothly 1.0.0-alpha.21 → 1.0.0-alpha.211

package/dist/collection/components/menu-options/index.js

@@ -1,413 +0,0 @@
-import { h, Host } from "@stencil/core";
-export class SmoothlyMenuOptions {
-  constructor() {
-    this.optionElements = [];
-    this.filteredOptions = [];
-    this.highlightIndex = 0;
-    this.keyword = undefined;
-    this.toggle = false;
-    this.emptyMenuLabel = "No Options";
-    this.newOptionLabel = "Add:";
-    this.maxMenuHeight = undefined;
-    this.order = false;
-    this.optionStyle = undefined;
-    this.options = [];
-    this.resetHighlightOnOptionsChange = true;
-    this.mutable = false;
-  }
-  optionsChangeHandler() {
-    this.highlightIndex = this.resetHighlightOnOptionsChange ? 0 : this.highlightIndex;
-  }
-  optionHoverHandler(event) {
-    if (event.detail.value)
-      this.setHighlight(event.detail.value);
-    event.stopPropagation();
-  }
-  async moveHighlight(step) {
-    if (this.filteredOptions.length > 0)
-      this.setHighlight((this.highlightIndex + step + this.filteredOptions.length) % this.filteredOptions.length, true);
-  }
-  async setHighlight(newIndex, scrollToHighlight = false) {
-    if (typeof newIndex == "number") {
-      this.highlightIndex = newIndex;
-      scrollToHighlight && this.scrollTo(this.highlightIndex);
-    }
-    else {
-      const value = newIndex;
-      let isHighlightSet = false;
-      this.filteredOptions.forEach((option, index) => {
-        const highlight = option.value == value;
-        this.highlightIndex = highlight ? index : this.highlightIndex;
-        highlight && scrollToHighlight && this.scrollTo(index);
-        isHighlightSet = highlight ? true : isHighlightSet;
-      });
-      if (!isHighlightSet)
-        this.setHighlight(0, true);
-    }
-  }
-  async getHighlighted() {
-    let result = undefined;
-    if (this.highlightIndex != undefined && this.filteredOptions.length > 0)
-      result = this.filteredOptions[this.highlightIndex];
-    return result;
-  }
-  async filterOptions(keyword, excludeValues = []) {
-    this.keyword = keyword;
-    const keywordLowercase = keyword.toLowerCase();
-    this.filteredOptions = [];
-    for (const option of this.options) {
-      const names = option.name + (option.aliases ? option.aliases.join(" ") : "");
-      const isVisible = names.toLowerCase().includes(keywordLowercase) && !excludeValues.includes(option.value);
-      isVisible && this.filteredOptions.push(option);
-    }
-    this.menuEmpty.emit(!this.filteredOptions.length);
-    this.order && this.sortOptions(keyword);
-  }
-  sortOptions(keyword) {
-    const keywordLowercase = keyword.toLowerCase();
-    this.filteredOptions.sort((a, b) => {
-      return this.getPriorityScore(a, keywordLowercase) - this.getPriorityScore(b, keywordLowercase);
-    });
-  }
-  getPriorityScore(option, keywordLowercase) {
-    let result = Number.MAX_SAFE_INTEGER;
-    const name = option.name;
-    const aliases = option.aliases ? option.aliases.join(" ") : "";
-    const names = `${name ? name : ""} ${aliases ? aliases : ""}`.toLowerCase();
-    if (name) {
-      result = names.split(" ").reduce((minIndex, word) => {
-        const index = word.indexOf(keywordLowercase);
-        return index != -1 && index < minIndex ? index : minIndex;
-      }, Number.MAX_SAFE_INTEGER);
-    }
-    return result;
-  }
-  scrollTo(optionIndex) {
-    var _a;
-    const optionHeight = (_a = this.firstOptionsElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height;
-    if (optionHeight) {
-      const menuHeight = this.element.getBoundingClientRect().height;
-      const scrollPosition = this.element.scrollTop;
-      const optionPosition = optionIndex * optionHeight;
-      const numOptionsInMenu = Math.floor(menuHeight / optionHeight);
-      if (optionPosition - optionHeight / 2 < scrollPosition)
-        this.element.scrollTo({ top: (optionIndex - 1) * optionHeight });
-      else if (scrollPosition < optionPosition + optionHeight - menuHeight)
-        this.element.scrollTo({ top: (optionIndex + 1 - numOptionsInMenu) * optionHeight });
-    }
-  }
-  render() {
-    return (h(Host, { style: { "--max-menu-height": this.maxMenuHeight } }, this.filteredOptions.length > 0 ? (this.filteredOptions.map((option, index) => (h("smoothly-option", { style: this.optionStyle, toggle: this.toggle, ref: el => {
-        index == 0 && (this.firstOptionsElement = el !== null && el !== void 0 ? el : this.firstOptionsElement);
-        el && (this.optionElements[index] = el);
-      }, checked: option.checked, value: option.value, name: option.name, divider: option.divider, "data-highlight": this.highlightIndex == index }, option.hint ? h("div", { slot: "hint" }, option.hint) : undefined)))) : this.mutable ? (h("smoothly-option", { style: this.optionStyle, value: this.keyword, name: this.keyword, "data-highlight": 0, new: true }, h("div", { slot: "left" }, h("smoothly-icon", { name: "square-outline", size: "small" }), " ", this.newOptionLabel))) : (h("div", null, this.emptyMenuLabel))));
-  }
-  static get is() { return "smoothly-menu-options"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["style.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["style.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "toggle": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "toggle",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "emptyMenuLabel": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "empty-menu-label",
-        "reflect": false,
-        "defaultValue": "\"No Options\""
-      },
-      "newOptionLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "new-option-label",
-        "reflect": false,
-        "defaultValue": "\"Add:\""
-      },
-      "maxMenuHeight": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"inherit\"",
-          "resolved": "\"inherit\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "max-menu-height",
-        "reflect": false
-      },
-      "order": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "order",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "optionStyle": {
-        "type": "any",
-        "mutable": false,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "option-style",
-        "reflect": false
-      },
-      "options": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "Option[]",
-          "resolved": "Option[]",
-          "references": {
-            "Option": {
-              "location": "import",
-              "path": "../../model"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "defaultValue": "[]"
-      },
-      "resetHighlightOnOptionsChange": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "reset-highlight-on-options-change",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "mutable": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "mutable",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "filteredOptions": {},
-      "highlightIndex": {},
-      "keyword": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "menuEmpty",
-        "name": "menuEmpty",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "moveHighlight": {
-        "complexType": {
-          "signature": "(step: number) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "setHighlight": {
-        "complexType": {
-          "signature": "(newIndex: number | string, scrollToHighlight?: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "getHighlighted": {
-        "complexType": {
-          "signature": "() => Promise<Option | undefined>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "Option": {
-              "location": "import",
-              "path": "../../model"
-            }
-          },
-          "return": "Promise<Option | undefined>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      },
-      "filterOptions": {
-        "complexType": {
-          "signature": "(keyword: string, excludeValues?: string[]) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-  static get watchers() {
-    return [{
-        "propName": "options",
-        "methodName": "optionsChangeHandler"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "optionHover",
-        "method": "optionHoverHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
-//# sourceMappingURL=index.js.map

package/dist/collection/components/menu-options/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/menu-options/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAQpH,MAAM,OAAO,mBAAmB;;IAEvB,mBAAc,GAAgC,EAAE,CAAA;2BAEO,EAAE;0BACvC,CAAC;;kBAEV,KAAK;0BACoB,YAAY;0BAC7B,MAAM;;iBAEf,KAAK;;mBAEuC,EAAE;yCACL,IAAI;mBAC3C,KAAK;;EAGvB,oBAAoB;IACnB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,6BAA6B,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAA;EACnF,CAAC;EAED,kBAAkB,CAAC,KAAgD;IAClE,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK;MACrB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;IACtC,KAAK,CAAC,eAAe,EAAE,CAAA;EACxB,CAAC;EAED,KAAK,CAAC,aAAa,CAAC,IAAY;IAC/B,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC;MAClC,IAAI,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;EACnH,CAAC;EAED,KAAK,CAAC,YAAY,CAAC,QAAyB,EAAE,iBAAiB,GAAG,KAAK;IACtE,IAAI,OAAO,QAAQ,IAAI,QAAQ,EAAE;MAChC,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAA;MAC9B,iBAAiB,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;KACvD;SAAM;MACN,MAAM,KAAK,GAAG,QAAQ,CAAA;MACtB,IAAI,cAAc,GAAG,KAAK,CAAA;MAC1B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;QAC9C,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,IAAI,KAAK,CAAA;QACvC,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAA;QAC7D,SAAS,IAAI,iBAAiB,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QACtD,cAAc,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAA;MACnD,CAAC,CAAC,CAAA;MACF,IAAI,CAAC,cAAc;QAClB,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA;KAC3B;EACF,CAAC;EAED,KAAK,CAAC,cAAc;IACnB,IAAI,MAAM,GAAG,SAAS,CAAA;IACtB,IAAI,IAAI,CAAC,cAAc,IAAI,SAAS,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC;MACtE,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;IACnD,OAAO,MAAM,CAAA;EACd,CAAC;EAED,KAAK,CAAC,aAAa,CAAC,OAAe,EAAE,gBAA0B,EAAE;IAChE,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;IACtB,MAAM,gBAAgB,GAAG,OAAO,CAAC,WAAW,EAAE,CAAA;IAC9C,IAAI,CAAC,eAAe,GAAG,EAAE,CAAA;IACzB,KAAK,MAAM,MAAM,IAAI,IAAI,CAAC,OAAO,EAAE;MAClC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;MAC5E,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;MACzG,SAAS,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;KAC9C;IACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAA;IACjD,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;EACxC,CAAC;EACD,WAAW,CAAC,OAAe;IAC1B,MAAM,gBAAgB,GAAG,OAAO,CAAC,WAAW,EAAE,CAAA;IAC9C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAS,EAAE,CAAS,EAAE,EAAE;MAClD,OAAO,IAAI,CAAC,gBAAgB,CAAC,CAAC,EAAE,gBAAgB,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAA;IAC/F,CAAC,CAAC,CAAA;EACH,CAAC;EACD,gBAAgB,CAAC,MAAc,EAAE,gBAAwB;IACxD,IAAI,MAAM,GAAG,MAAM,CAAC,gBAAgB,CAAA;IACpC,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;IACxB,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAC9D,MAAM,KAAK,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,EAAE,CAAA;IAC3E,IAAI,IAAI,EAAE;MACT,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,QAAgB,EAAE,IAAY,EAAE,EAAE;QACnE,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAA;QAC5C,OAAO,KAAK,IAAI,CAAC,CAAC,IAAI,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAA;MAC1D,CAAC,EAAE,MAAM,CAAC,gBAAgB,CAAC,CAAA;KAC3B;IACD,OAAO,MAAM,CAAA;EACd,CAAC;EACD,QAAQ,CAAC,WAAmB;;IAC3B,MAAM,YAAY,GAAG,MAAA,IAAI,CAAC,mBAAmB,0CAAE,qBAAqB,GAAG,MAAM,CAAA;IAC7E,IAAI,YAAY,EAAE;MACjB,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAA;MAC9D,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAA;MAC7C,MAAM,cAAc,GAAG,WAAW,GAAG,YAAY,CAAA;MACjD,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,YAAY,CAAC,CAAA;MAC9D,IAAI,cAAc,GAAG,YAAY,GAAG,CAAC,GAAG,cAAc;QACrD,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,YAAY,EAAE,CAAC,CAAA;WAC5D,IAAI,cAAc,GAAG,cAAc,GAAG,YAAY,GAAG,UAAU;QACnE,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,WAAW,GAAG,CAAC,GAAG,gBAAgB,CAAC,GAAG,YAAY,EAAE,CAAC,CAAA;KACpF;EACF,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,mBAAmB,EAAE,IAAI,CAAC,aAAa,EAAE,IACtD,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAClC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3C,uBACC,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,EAAE,CAAC,EAAE;QACT,KAAK,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,IAAI,CAAC,mBAAmB,CAAC,CAAA;QACzE,EAAE,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAA;MACxC,CAAC,EACD,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,OAAO,EAAE,MAAM,CAAC,OAAO,oBACP,IAAI,CAAC,cAAc,IAAI,KAAK,IAC3C,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,WAAK,IAAI,EAAC,MAAM,IAAE,MAAM,CAAC,IAAI,CAAO,CAAC,CAAC,CAAC,SAAS,CAC9C,CAClB,CAAC,CACF,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAClB,uBACC,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,IAAI,EAAE,IAAI,CAAC,OAAO,oBACF,CAAC,EACjB,GAAG,EAAE,IAAI;MACT,WAAK,IAAI,EAAC,MAAM;QACf,qBAAe,IAAI,EAAC,gBAAgB,EAAC,IAAI,EAAC,OAAO,GAAiB;;QAAE,IAAI,CAAC,cAAc,CAClF,CACW,CAClB,CAAC,CAAC,CAAC,CACH,eAAM,IAAI,CAAC,cAAc,CAAO,CAChC,CACK,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { Option } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-menu-options\",\n\tstyleUrl: \"style.scss\",\n\tshadow: true,\n})\nexport class SmoothlyMenuOptions {\n\tprivate firstOptionsElement: HTMLSmoothlyOptionElement\n\tprivate optionElements: HTMLSmoothlyOptionElement[] = []\n\t@Element() element: HTMLElement\n\t@State() filteredOptions: (Option & { checked?: boolean })[] = []\n\t@State() highlightIndex = 0\n\t@State() keyword?: string\n\t@Prop() toggle = false\n\t@Prop({ mutable: true }) emptyMenuLabel = \"No Options\"\n\t@Prop() newOptionLabel = \"Add:\"\n\t@Prop() maxMenuHeight: \"inherit\"\n\t@Prop() order = false\n\t@Prop() optionStyle: any\n\t@Prop({ mutable: true, reflect: true }) options: Option[] = []\n\t@Prop({ mutable: true }) resetHighlightOnOptionsChange = true\n\t@Prop() mutable = false\n\t@Event() menuEmpty: EventEmitter<boolean>\n\t@Watch(\"options\")\n\toptionsChangeHandler() {\n\t\tthis.highlightIndex = this.resetHighlightOnOptionsChange ? 0 : this.highlightIndex\n\t}\n\t@Listen(\"optionHover\")\n\toptionHoverHandler(event: CustomEvent<{ value: any; name: string }>) {\n\t\tif (event.detail.value)\n\t\t\tthis.setHighlight(event.detail.value)\n\t\tevent.stopPropagation()\n\t}\n\t@Method()\n\tasync moveHighlight(step: number) {\n\t\tif (this.filteredOptions.length > 0)\n\t\t\tthis.setHighlight((this.highlightIndex + step + this.filteredOptions.length) % this.filteredOptions.length, true)\n\t}\n\t@Method()\n\tasync setHighlight(newIndex: number | string, scrollToHighlight = false) {\n\t\tif (typeof newIndex == \"number\") {\n\t\t\tthis.highlightIndex = newIndex\n\t\t\tscrollToHighlight && this.scrollTo(this.highlightIndex)\n\t\t} else {\n\t\t\tconst value = newIndex\n\t\t\tlet isHighlightSet = false\n\t\t\tthis.filteredOptions.forEach((option, index) => {\n\t\t\t\tconst highlight = option.value == value\n\t\t\t\tthis.highlightIndex = highlight ? index : this.highlightIndex\n\t\t\t\thighlight && scrollToHighlight && this.scrollTo(index)\n\t\t\t\tisHighlightSet = highlight ? true : isHighlightSet\n\t\t\t})\n\t\t\tif (!isHighlightSet)\n\t\t\t\tthis.setHighlight(0, true)\n\t\t}\n\t}\n\t@Method()\n\tasync getHighlighted(): Promise<Option | undefined> {\n\t\tlet result = undefined\n\t\tif (this.highlightIndex != undefined && this.filteredOptions.length > 0)\n\t\t\tresult = this.filteredOptions[this.highlightIndex]\n\t\treturn result\n\t}\n\t@Method()\n\tasync filterOptions(keyword: string, excludeValues: string[] = []) {\n\t\tthis.keyword = keyword\n\t\tconst keywordLowercase = keyword.toLowerCase()\n\t\tthis.filteredOptions = []\n\t\tfor (const option of this.options) {\n\t\t\tconst names = option.name + (option.aliases ? option.aliases.join(\" \") : \"\")\n\t\t\tconst isVisible = names.toLowerCase().includes(keywordLowercase) && !excludeValues.includes(option.value)\n\t\t\tisVisible && this.filteredOptions.push(option)\n\t\t}\n\t\tthis.menuEmpty.emit(!this.filteredOptions.length)\n\t\tthis.order && this.sortOptions(keyword)\n\t}\n\tsortOptions(keyword: string) {\n\t\tconst keywordLowercase = keyword.toLowerCase()\n\t\tthis.filteredOptions.sort((a: Option, b: Option) => {\n\t\t\treturn this.getPriorityScore(a, keywordLowercase) - this.getPriorityScore(b, keywordLowercase)\n\t\t})\n\t}\n\tgetPriorityScore(option: Option, keywordLowercase: string) {\n\t\tlet result = Number.MAX_SAFE_INTEGER\n\t\tconst name = option.name\n\t\tconst aliases = option.aliases ? option.aliases.join(\" \") : \"\"\n\t\tconst names = `${name ? name : \"\"} ${aliases ? aliases : \"\"}`.toLowerCase()\n\t\tif (name) {\n\t\t\tresult = names.split(\" \").reduce((minIndex: number, word: string) => {\n\t\t\t\tconst index = word.indexOf(keywordLowercase)\n\t\t\t\treturn index != -1 && index < minIndex ? index : minIndex\n\t\t\t}, Number.MAX_SAFE_INTEGER)\n\t\t}\n\t\treturn result\n\t}\n\tscrollTo(optionIndex: number) {\n\t\tconst optionHeight = this.firstOptionsElement?.getBoundingClientRect().height\n\t\tif (optionHeight) {\n\t\t\tconst menuHeight = this.element.getBoundingClientRect().height\n\t\t\tconst scrollPosition = this.element.scrollTop\n\t\t\tconst optionPosition = optionIndex * optionHeight\n\t\t\tconst numOptionsInMenu = Math.floor(menuHeight / optionHeight)\n\t\t\tif (optionPosition - optionHeight / 2 < scrollPosition)\n\t\t\t\tthis.element.scrollTo({ top: (optionIndex - 1) * optionHeight })\n\t\t\telse if (scrollPosition < optionPosition + optionHeight - menuHeight)\n\t\t\t\tthis.element.scrollTo({ top: (optionIndex + 1 - numOptionsInMenu) * optionHeight })\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host style={{ \"--max-menu-height\": this.maxMenuHeight }}>\n\t\t\t\t{this.filteredOptions.length > 0 ? (\n\t\t\t\t\tthis.filteredOptions.map((option, index) => (\n\t\t\t\t\t\t<smoothly-option\n\t\t\t\t\t\t\tstyle={this.optionStyle}\n\t\t\t\t\t\t\ttoggle={this.toggle}\n\t\t\t\t\t\t\tref={el => {\n\t\t\t\t\t\t\t\tindex == 0 && (this.firstOptionsElement = el ?? this.firstOptionsElement)\n\t\t\t\t\t\t\t\tel && (this.optionElements[index] = el)\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tchecked={option.checked}\n\t\t\t\t\t\t\tvalue={option.value}\n\t\t\t\t\t\t\tname={option.name}\n\t\t\t\t\t\t\tdivider={option.divider}\n\t\t\t\t\t\t\tdata-highlight={this.highlightIndex == index}>\n\t\t\t\t\t\t\t{option.hint ? <div slot=\"hint\">{option.hint}</div> : undefined}\n\t\t\t\t\t\t</smoothly-option>\n\t\t\t\t\t))\n\t\t\t\t) : this.mutable ? (\n\t\t\t\t\t<smoothly-option\n\t\t\t\t\t\tstyle={this.optionStyle}\n\t\t\t\t\t\tvalue={this.keyword}\n\t\t\t\t\t\tname={this.keyword}\n\t\t\t\t\t\tdata-highlight={0}\n\t\t\t\t\t\tnew={true}>\n\t\t\t\t\t\t<div slot=\"left\">\n\t\t\t\t\t\t\t<smoothly-icon name=\"square-outline\" size=\"small\"></smoothly-icon> {this.newOptionLabel}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</smoothly-option>\n\t\t\t\t) : (\n\t\t\t\t\t<div>{this.emptyMenuLabel}</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/menu-options/style.css

@@ -1,18 +0,0 @@
-:host {
-  max-height: 18.75rem;
-  width: 85%;
-  max-height: var(--max-menu-height);
-  box-sizing: border-box;
-  background-color: rgb(var(--smoothly-default-color));
-  border-radius: 0.25em;
-  color: rgb(var(--smoothly-primary-color));
-  stroke: rgb(var(--smoothly-primary-color));
-  fill: rgb(var(--smoothly-primary-color));
-  box-shadow: 0px 2px 1.5rem rgba(64, 60, 57, 0.08), inset 0px 0px 1px rgba(64, 60, 57, 0.4);
-  overflow-y: auto;
-  cursor: pointer;
-}
-
-:host:first-child {
-  margin: 10em;
-}