smoothly 1.0.0-alpha.99 → 1.0.0

package/dist/collection/components/input/select/index.js

@@ -1,123 +1,229 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
+import { Item } from "../../item/Item";
 export class SmoothlyInputSelect {
   constructor() {
+    this.initialValue = [];
+    this.initialValueHandled = false;
+    this.listener = {};
     this.items = [];
-    this.name = undefined;
+    this.name = "selected";
     this.color = undefined;
     this.looks = "plain";
-    this.initialPrompt = undefined;
-    this.opened = false;
-    this.selectedElement = undefined;
-    this.missing = false;
+    this.showSelected = true;
+    this.readonly = false;
+    this.multiple = false;
+    this.clearable = true;
+    this.changed = false;
+    this.placeholder = undefined;
+    this.menuHeight = undefined;
+    this.open = false;
+    this.selected = [];
     this.filter = "";
   }
   componentWillLoad() {
-    this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)));
+    var _a, _b;
+    this.smoothlyInputLooks.emit(looks => (this.looks = looks));
+    this.smoothlyInputLoad.emit(() => {
+      return;
+    });
+    !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
+    (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+  }
+  componentDidLoad() {
+    this.selected && !this.initialValueHandled && (this.initialValue = [...this.selected]);
+    this.initialValueHandled = true;
+  }
+  componentDidRender() {
+    var _a, _b, _c, _d;
+    this.itemHeight === undefined && (this.itemHeight = (_a = this.items.find(item => item.clientHeight > 0)) === null || _a === void 0 ? void 0 : _a.clientHeight);
+    if (this.menuHeight && this.itemHeight) {
+      (_b = this.element) === null || _b === void 0 ? void 0 : _b.style.setProperty("--menu-height", !this.menuHeight.endsWith("items") || this.items.length == 0
+        ? this.menuHeight
+        : `${this.itemHeight * +((_d = (_c = this.menuHeight.match(/^(\d+(\.\d+)?|\.\d+)/g)) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : "10")}px`);
+    }
+  }
+  async listen(property, listener) {
+    this.listener[property] = listener;
+    listener(this);
   }
   async reset() {
+    this.selected.forEach(item => (item.selected = item.hidden = false));
+    this.initialValue.forEach(item => (item.selected = true));
+    this.selected = [...this.initialValue];
+    this.displaySelected();
+    this.changed = false;
+    this.open && this.handleShowOptions();
+  }
+  async clear() {
     var _a;
-    this.selectedElement = undefined;
-    if (this.mainElement) {
-      this.mainElement.innerHTML = (_a = this.initialPrompt) !== null && _a !== void 0 ? _a : "(none)";
+    if (this.clearable) {
+      this.selected.forEach(item => (item.selected = item.hidden = false));
+      this.selected = [];
+      if (this.displaySelectedElement) {
+        this.displaySelectedElement.innerHTML = (_a = this.placeholder) !== null && _a !== void 0 ? _a : "(none)";
+      }
     }
   }
-  onSelectedChange(value, old) {
-    if (old)
-      old.selected = false;
-    this.selected.emit(value === null || value === void 0 ? void 0 : value.value);
-    this.smoothlyInput.emit({ [this.name]: value === null || value === void 0 ? void 0 : value.value });
+  async edit(editable) {
+    this.readonly = !editable;
+  }
+  async setInitialValue() {
+    this.changed = false;
+    this.initialValue = [...this.selected];
+  }
+  onSelectedChange() {
+    var _a, _b;
+    this.initialValueHandled && (this.changed = !this.areValuesEqual(this.selected, this.initialValue));
+    const value = !this.multiple && this.selected[0]
+      ? this.selected[0].value
+      : this.multiple && this.selected.length > 0
+        ? this.selected.map(item => item.value)
+        : undefined;
+    this.smoothlyInput.emit({ [this.name]: value });
+    (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
   }
   async onFilterChange(value) {
     value = value.toLowerCase();
-    if (!(await Promise.all(this.items.map(item => item.filter(value)))).some(r => r)) {
-      this.missing = true;
-      this.items.forEach(el => el.filter(""));
+    await Promise.all(this.items.map(item => item.filter(value)));
+  }
+  watchingReadonly() {
+    var _a, _b;
+    (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+  }
+  async smoothlyInputLoadHandler(event) {
+    if (event.target && "name" in event.target && event.target.name !== this.name) {
+      event.stopPropagation();
     }
-    else
-      this.missing = false;
+    else if (Item.type.is(event.target)) {
+      event.stopPropagation();
+      this.items.push(event.target);
+    }
+    event.detail(this);
   }
-  onClick(event) {
-    event.stopPropagation();
-    this.opened = !this.opened;
+  onWindowClick(event) {
+    !event.composedPath().includes(this.element) && this.open && this.handleShowOptions();
   }
-  onItemSelected(event) {
-    this.selectedElement = event.target;
-    if (this.mainElement)
-      this.mainElement.innerHTML = this.selectedElement.innerHTML;
+  onItemSelect(event) {
+    event.stopPropagation();
+    if (this.multiple) {
+      this.selected = event.detail.selected
+        ? [...this.selected, event.detail]
+        : this.selected.filter(item => item.selected);
+    }
+    else {
+      this.selected[0] && (this.selected[0].hidden = this.selected[0].selected = false);
+      this.selected = !event.detail.selected ? [] : [event.detail];
+      !this.showSelected && event.detail.selected && (event.detail.hidden = true);
+    }
+    this.displaySelected();
+    this.element.focus();
   }
   onClosed() {
-    if (!this.opened) {
+    if (!this.open) {
       const marked = this.items.find(item => item.marked);
       if (marked)
         marked.marked = false;
     }
   }
+  handleShowOptions(event) {
+    !this.readonly &&
+      !(event && event.target && this.items.includes(event.target) && this.multiple) &&
+      (this.open = !this.open);
+    this.filter = "";
+  }
+  areValuesEqual(selected, initialValue) {
+    return selected.length === initialValue.length && initialValue.every(value => selected.includes(value));
+  }
+  displaySelected() {
+    const displayString = "<div>" + this.selected.map(option => option.innerHTML).join("</div><div>") + "</div>";
+    this.displaySelectedElement &&
+      (this.displaySelectedElement.innerHTML =
+        this.selected.length > 0 ? displayString : this.placeholder ? this.placeholder : "");
+  }
   onKeyDown(event) {
     event.stopPropagation();
-    event.preventDefault();
-    if (this.opened) {
-      let direction = 0;
+    const visibleItems = this.items.some(item => item.getAttribute("hidden") === null);
+    if (event.key != "Tab" && !event.ctrlKey && !event.metaKey)
+      event.preventDefault();
+    if (this.open) {
       switch (event.key) {
         case "ArrowUp":
-          direction = -1;
+          visibleItems && this.move(-1);
           break;
         case "ArrowDown":
-          direction = 1;
+          visibleItems && this.move(1);
           break;
         case "Escape":
-          this.filter = "";
+          if (this.filter == "")
+            this.open = false;
+          else
+            this.filter = "";
           break;
         case "Backspace":
           this.filter = this.filter.slice(0, -1);
           break;
         case "Enter":
           const result = this.items.find(item => item.marked);
-          if (result === null || result === void 0 ? void 0 : result.value) {
-            result.selected = true;
+          if (result === null || result === void 0 ? void 0 : result.value)
+            result.selected = !result.selected;
+          this.smoothlyItemSelect.emit(result);
+          if (!this.multiple) {
+            this.open = false;
+            this.filter = "";
           }
-          this.opened = false;
-          this.filter = "";
+          break;
+        case "Tab":
+          this.open = false;
           break;
         default:
           if (event.key.length == 1)
             this.filter += event.key;
           break;
       }
-      this.move(direction);
     }
-    else if (event.key == "Enter")
-      this.opened = true;
+    else {
+      switch (event.key) {
+        case "Enter":
+        case " ":
+          this.handleShowOptions();
+          break;
+        case "ArrowDown":
+          this.handleShowOptions();
+          this.move(0);
+          break;
+        case "ArrowUp":
+          this.handleShowOptions();
+          this.move(-1);
+          break;
+        case "Tab":
+          break;
+        default:
+          this.handleShowOptions();
+          if (event.key.length == 1)
+            this.filter += event.key;
+          break;
+      }
+    }
   }
   move(direction) {
-    if (direction) {
-      let markedIndex = this.items.findIndex(item => item.marked);
-      if (markedIndex == -1)
-        markedIndex = this.items.findIndex(item => item.selected);
-      if (this.items[markedIndex])
-        this.items[markedIndex].marked = false;
-      do {
-        markedIndex = (markedIndex + direction + this.items.length) % this.items.length;
-      } while (this.items[markedIndex].hidden);
-      this.items[markedIndex].marked = true;
-      this.items[markedIndex].focus();
-    }
+    let markedIndex = this.items.findIndex(item => item.marked);
+    if (markedIndex == -1)
+      markedIndex = this.items.findIndex(item => item.selected);
+    if (this.items[markedIndex])
+      this.items[markedIndex].marked = false;
+    if (markedIndex == -1)
+      markedIndex = 0;
+    do {
+      markedIndex = (markedIndex + direction + this.items.length) % this.items.length;
+    } while (this.items[markedIndex].hidden);
+    this.items[markedIndex].marked = true;
   }
   render() {
-    var _a;
-    return (h(Host, { tabIndex: 2, class: this.missing ? "missing" : "" }, h("main", { ref: element => (this.mainElement = element) }, (_a = this.initialPrompt) !== null && _a !== void 0 ? _a : "(none)"), this.filter.length != 0 ? (h("aside", { ref: element => (this.aside = element) }, this.filter, h("button", { onClick: e => {
+    return (h(Host, { tabIndex: 0, class: { "has-value": this.selected.length !== 0 }, onClick: (event) => this.handleShowOptions(event) }, h("div", { class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), h("div", { class: "icons" }, h("slot", { name: "end" }), h("smoothly-icon", { size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), h("slot", { name: "label" }), h("div", { class: `${this.open ? "" : "hidden"} options` }, this.filter.length > 0 && (h("smoothly-item", { selectable: false }, h("smoothly-icon", { name: "search-outline", size: "small" }), this.filter, h("smoothly-icon", { name: "backspace-outline", size: "small", onClick: e => {
         e.stopPropagation();
         this.filter = "";
-      } }, h("smoothly-icon", { name: "close", size: "small" })))) : undefined, this.opened ? h("section", { onClick: () => (this.opened = true) }) : [], h("div", { class: this.opened ? "" : "hidden" }, h("nav", null, h("slot", null)))));
-  }
-  componentDidRender() {
-    const items = [];
-    const children = this.element.querySelectorAll("div > nav > smoothly-item");
-    for (let i = 0; i < children.length; i++) {
-      const node = children.item(i);
-      if (isItem(node))
-        items.push(node);
-    }
-    this.items = items;
+        this.element.focus();
+      } }))), h("slot", null))));
   }
   static get is() { return "smoothly-input-select"; }
   static get encapsulation() { return "scoped"; }
@@ -148,7 +254,8 @@ export class SmoothlyInputSelect {
           "text": ""
         },
         "attribute": "name",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"selected\""
       },
       "color": {
         "type": "string",
@@ -177,7 +284,7 @@ export class SmoothlyInputSelect {
         "mutable": true,
         "complexType": {
           "original": "Looks",
-          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\"",
+          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\" | \"transparent\"",
           "references": {
             "Looks": {
               "location": "import",
@@ -195,12 +302,119 @@ export class SmoothlyInputSelect {
         "reflect": true,
         "defaultValue": "\"plain\""
       },
-      "initialPrompt": {
+      "showSelected": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show-selected",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "multiple": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "multiple",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "clearable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "clearable",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "changed": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "changed",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "placeholder": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "string | any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "placeholder",
+        "reflect": true
+      },
+      "menuHeight": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
+          "original": "`${number}${\"items\" | \"rem\" | \"px\" | \"vh\"}`",
+          "resolved": "`${number}items` | `${number}px` | `${number}rem` | `${number}vh` | undefined",
           "references": {}
         },
         "required": false,
@@ -209,23 +423,22 @@ export class SmoothlyInputSelect {
           "tags": [],
           "text": ""
         },
-        "attribute": "initial-prompt",
+        "attribute": "menu-height",
         "reflect": false
       }
     };
   }
   static get states() {
     return {
-      "opened": {},
-      "selectedElement": {},
-      "missing": {},
+      "open": {},
+      "selected": {},
       "filter": {}
     };
   }
   static get events() {
     return [{
-        "method": "selected",
-        "name": "selected",
+        "method": "smoothlySelect",
+        "name": "smoothlySelect",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -234,8 +447,8 @@ export class SmoothlyInputSelect {
           "text": ""
         },
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "unknown",
+          "resolved": "unknown",
           "references": {}
         }
       }, {
@@ -249,11 +462,12 @@ export class SmoothlyInputSelect {
           "text": ""
         },
         "complexType": {
-          "original": "Record<number, any>",
-          "resolved": "{ [x: number]: any; }",
+          "original": "Data",
+          "resolved": "{ [name: string]: Value | Data; }",
           "references": {
-            "Record": {
-              "location": "global"
+            "Data": {
+              "location": "import",
+              "path": "../../../model"
             }
           }
         }
@@ -269,7 +483,7 @@ export class SmoothlyInputSelect {
         },
         "complexType": {
           "original": "(looks: Looks, color: Color) => void",
-          "resolved": "(looks: Looks, color: Color) => void",
+          "resolved": "(looks: \"line\" | \"grid\" | \"plain\" | \"border\" | \"transparent\", color: \"success\" | \"default\" | \"primary\" | \"secondary\" | \"tertiary\" | \"warning\" | \"danger\" | \"light\" | \"medium\" | \"dark\") => void",
           "references": {
             "Looks": {
               "location": "import",
@@ -281,10 +495,89 @@ export class SmoothlyInputSelect {
             }
           }
         }
+      }, {
+        "method": "smoothlyInputLoad",
+        "name": "smoothlyInputLoad",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "(parent: HTMLElement) => void",
+          "resolved": "(parent: HTMLElement) => void",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "smoothlyFormDisable",
+        "name": "smoothlyFormDisable",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "(disabled: boolean) => void",
+          "resolved": "(disabled: boolean) => void",
+          "references": {}
+        }
+      }, {
+        "method": "smoothlyItemSelect",
+        "name": "smoothlyItemSelect",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "HTMLSmoothlyItemElement",
+          "resolved": "HTMLSmoothlyItemElement",
+          "references": {
+            "HTMLSmoothlyItemElement": {
+              "location": "global"
+            }
+          }
+        }
       }];
   }
   static get methods() {
     return {
+      "listen": {
+        "complexType": {
+          "signature": "(property: \"changed\", listener: (parent: Editable) => Promise<void>) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "Editable": {
+              "location": "import",
+              "path": "../Editable"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
       "reset": {
         "complexType": {
           "signature": "() => Promise<void>",
@@ -300,32 +593,92 @@ export class SmoothlyInputSelect {
           "text": "",
           "tags": []
         }
+      },
+      "clear": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "edit": {
+        "complexType": {
+          "signature": "(editable: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "setInitialValue": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }
   static get elementRef() { return "element"; }
   static get watchers() {
     return [{
-        "propName": "selectedElement",
+        "propName": "selected",
         "methodName": "onSelectedChange"
       }, {
         "propName": "filter",
         "methodName": "onFilterChange"
       }, {
-        "propName": "opened",
+        "propName": "readonly",
+        "methodName": "watchingReadonly"
+      }, {
+        "propName": "open",
         "methodName": "onClosed"
       }];
   }
   static get listeners() {
     return [{
-        "name": "click",
-        "method": "onClick",
+        "name": "smoothlyInputLoad",
+        "method": "smoothlyInputLoadHandler",
         "target": undefined,
         "capture": false,
         "passive": false
       }, {
-        "name": "itemSelected",
-        "method": "onItemSelected",
+        "name": "click",
+        "method": "onWindowClick",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "smoothlyItemSelect",
+        "method": "onItemSelect",
         "target": undefined,
         "capture": false,
         "passive": false
@@ -338,9 +691,4 @@ export class SmoothlyInputSelect {
       }];
   }
 }
-function isItem(value) {
-  return (typeof value == "object" &&
-    (typeof value.selected == "boolean" || value.selected == undefined) &&
-    typeof value.filter == "function");
-}
 //# sourceMappingURL=index.js.map