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

package/dist/collection/components/picker/index.js

@@ -1,183 +1,93 @@
+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;
+};
 import { h, Host } from "@stencil/core";
 export class SmoothlyPicker {
   constructor() {
-    this.keepFocusOnReRender = false;
-    this.isOpen = undefined;
-    this.empty = undefined;
-    this.disabled = false;
-    this.readonly = false;
-    this.maxMenuHeight = "inherit";
-    this.maxHeight = undefined;
-    this.emptyMenuLabel = "No Options";
-    this.multiple = false;
+    this.looks = "plain";
+    this.name = undefined;
+    this.open = false;
     this.mutable = false;
-    this.optionStyle = undefined;
-    this.options = [];
-    this.labelSetting = undefined;
-    this.label = undefined;
-    this.selections = [];
-    this.selectNoneName = "Select None";
-    this.selectAllName = "Select All";
-    this.selectionName = "items selected";
-    this.newOptionLabel = "Add:";
-    this.valueValidator = _ => [true, undefined];
-  }
-  isOpenChangeHandler() {
-    if (this.isOpen == false) {
-      this.menuClose.emit(this.selections);
-    }
-  }
-  componentDidRender() {
-    this.filterOptions();
-    if (this.keepFocusOnReRender) {
-      this.inputElement.focus();
-      this.keepFocusOnReRender = false;
-    }
-  }
-  optionSelectHandler(event) {
-    this.toggle(event.detail);
-    event.stopPropagation();
-  }
-  optionAddHandler(event) {
-    if (this.mutable) {
-      const [status, notice] = this.valueValidator(event.detail.value);
-      if (status) {
-        const option = Object.assign({}, event.detail);
-        this.options = [...this.options, option];
-        this.select(option);
-      }
-      notice && this.notice.emit(notice);
-    }
-    event.stopPropagation();
-  }
-  emptyHandler(event) {
-    this.empty = event.detail;
-    event.stopPropagation();
+    this.multiple = false;
+    this.readonly = false;
+    this.validator = undefined;
+    this.selected = new Map();
+    this.display = undefined;
   }
-  toggle(option) {
-    option.value == "select-none"
-      ? this.toggleAll()
-      : this.selections.map(s => s.value).includes(option.value)
-        ? this.unselect(option)
-        : this.select(option);
+  componentWillLoad() {
+    this.smoothlyInputLooks.emit(looks => (this.looks = looks));
   }
-  toggleAll() {
+  selectedChanged() {
     var _a;
-    this.selections = this.selections.length == ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) ? [] : this.options;
-    this.inputElement.focus();
-    this.keepFocusOnReRender = true;
-  }
-  unselect(selection) {
-    const index = this.selections.map(selection => selection.value).indexOf(selection.value);
-    if (index != -1) {
-      this.selections = [
-        ...this.selections.slice(0, index),
-        ...this.selections.slice(index + 1, this.selections.length),
-      ];
-      this.keepFocusOnReRender = true;
+    const selected = Array.from(this.selected.values(), option => option.value);
+    if ((_a = this.controls) === null || _a === void 0 ? void 0 : _a.synced()) {
+      this.smoothlyInput.emit({ [this.name]: this.multiple ? selected : selected.at(0) });
+      this.smoothlyChange.emit({ [this.name]: this.multiple ? selected : selected.at(0) });
     }
+    this.display = Array.from(this.selected.values(), option => {
+      const span = document.createElement("span");
+      option.slotted.forEach(node => span.appendChild(node.cloneNode(true)));
+      return span;
+    });
   }
-  select(selection) {
-    const isNewSelection = this.selections.reduce((acc, current) => acc && current.value != selection.value, true);
-    if (isNewSelection)
-      this.selections = this.multiple ? [...this.selections, selection] : [selection];
-    this.inputElement.value = "";
-    this.filterOptions();
-    this.keepFocusOnReRender = true;
-    this.isOpen = this.multiple;
+  componentDidLoad() {
+    if (this.controls)
+      this.smoothlyPickerLoaded.emit(((_a) => {
+        var { synced } = _a, controls = __rest(_a, ["synced"]);
+        return controls;
+      })(this.controls));
   }
-  toggleHighlighted() {
-    var _a;
-    if (this.mutable && this.empty) {
-      const [status, notice] = this.valueValidator(this.inputElement.value);
-      if (status) {
-        const option = { name: this.inputElement.value, value: this.inputElement.value };
-        this.options = [...this.options, option];
-        this.select(option);
-      }
-      notice && this.notice.emit(notice);
-    }
-    else
-      (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.getHighlighted().then((result) => {
-        result && this.toggle(result);
-      });
+  smoothlyInputLooksHandler(event) {
+    if (event.target != this.element)
+      event.stopPropagation();
   }
-  highlightDefault() {
-    var _a;
-    this.filterOptions();
-    (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.setHighlight(this.multiple || this.selections.length == 0 ? 0 : this.selections[0].value);
+  menuLoadedHandler(event) {
+    this.controls = event.detail;
   }
-  filterOptions() {
-    var _a;
-    (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.filterOptions(this.inputElement.value, []);
+  optionLoadedHandler(event) {
+    if (event.detail.selected)
+      this.selected = this.multiple
+        ? new Map(this.selected.set(event.detail.value, event.detail).entries())
+        : new Map().set(event.detail.value, event.detail);
   }
-  onInput(event) {
-    this.isOpen = this.inputElement.value != "" ? true : this.isOpen;
-    this.highlightDefault();
+  optionChangeHandler(event) {
+    if (!this.readonly)
+      if (this.multiple)
+        this.selected = event.detail.selected
+          ? new Map(this.selected.set(event.detail.value, event.detail).entries())
+          : !this.selected.delete(event.detail.value)
+            ? this.selected
+            : new Map(this.selected.entries());
+      else
+        this.selected = !event.detail.selected ? new Map() : new Map().set(event.detail.value, event.detail);
   }
-  onKeyDown(event) {
-    var _a;
-    if (event.key == "ArrowUp" || event.key == "ArrowDown") {
-      (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.moveHighlight(event.key == "ArrowUp" ? -1 : 1);
-      event.preventDefault();
-    }
-    else if (event.key == "Enter" && this.isOpen)
-      this.toggleHighlighted();
-    else if (event.key == "Escape") {
-      this.inputElement.value = "";
-      this.isOpen = false;
-      this.filterOptions();
-    }
-    else if (event.key == " " && this.inputElement.value == "") {
-      event.preventDefault();
-      this.isOpen = true;
-      this.filterOptions();
-    }
+  clickHandler(event) {
+    this.open = !event.composedPath().includes(this.element) ? false : !this.open;
   }
-  onClick() {
-    if (!(this.readonly || this.disabled)) {
-      this.isOpen = !this.isOpen;
-      this.inputElement.focus();
-      this.highlightDefault();
-      this.filterOptions();
-    }
+  focusHandler(event) {
+    if (!event.composedPath().includes(this.element))
+      this.open = false;
   }
-  onBlur() {
-    this.inputElement.value = "";
-    this.isOpen = false;
-    this.filterOptions();
+  async clear() {
+    this.selected.forEach(option => option.selected && option.element.clickHandler());
   }
   render() {
-    var _a, _b, _c;
-    const cssVariables = {
-      "--max-height": (_a = this.maxHeight) !== null && _a !== void 0 ? _a : "inherit",
-      "--label-display": this.labelSetting == "hide" ? "none" : "absolute",
-    };
-    (_b = this.options) === null || _b === void 0 ? void 0 : _b.forEach(o => {
-      o.checked = this.selections.map(s => s.value).includes(o.value);
-    });
-    const options = [
-      ...(this.multiple
-        ? [
-          {
-            value: "select-none",
-            name: this.selections.length == this.options.length ? this.selectNoneName : this.selectAllName,
-            checked: this.selections.length == this.options.length,
-            divider: true,
-          },
-        ]
-        : []),
-      ...((_c = this.options) !== null && _c !== void 0 ? _c : []),
-    ];
-    return (h(Host, { style: cssVariables, "has-selection": this.selections.length > 0, "is-open": this.isOpen ? "" : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => this.onClick() }, h("div", null, h("smoothly-icon", { part: "search", class: "search", name: "search-outline", size: "tiny" }), h("label", { part: "label-element" }, this.label), h("input", { part: "input", disabled: this.disabled, readonly: this.readonly, type: "text", ref: (el) => (this.inputElement = el ? el : this.inputElement), onFocus: () => this.highlightDefault(), onBlur: () => this.onBlur(), placeholder: this.selections.length > 3
-        ? this.selections.length.toString() + " " + this.selectionName
-        : this.selections.map(selection => selection.name).join(", "), onKeyDown: e => this.onKeyDown(e), onInput: (e) => this.onInput(e) }), h("smoothly-icon", { part: "chevron", class: "down", name: "chevron-down", size: "tiny" }), h("smoothly-icon", { part: "chevron", class: "up", name: "chevron-up", size: "tiny" })), h("smoothly-menu-options", { part: "menu-options", style: { width: "100%" }, toggle: true, optionStyle: Object.assign({}, this.optionStyle), order: false, emptyMenuLabel: this.emptyMenuLabel, newOptionLabel: this.newOptionLabel, "max-menu-height": this.maxMenuHeight, mutable: this.mutable, ref: (el) => (this.menuElement = el !== null && el !== void 0 ? el : this.menuElement), onClick: e => e.stopPropagation(), resetHighlightOnOptionsChange: false, options: options })));
+    return (h(Host, { tabindex: 0 }, h("smoothly-slot-elements", { class: "selected", nodes: this.display }), h("span", { class: "label" }, h("slot", { name: "label" })), h("button", { type: "button" }, h("smoothly-icon", { size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), h("slot", { name: "child" }), h("smoothly-picker-menu", { open: this.open, looks: this.looks, onClick: e => e.stopPropagation(), multiple: this.multiple, mutable: this.mutable, readonly: this.readonly, validator: this.validator }, h("slot", { name: "search", slot: "search" }), h("slot", { name: "display", slot: "display" }), h("slot", null))));
   }
   static get is() { return "smoothly-picker"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
-      "$": ["style.scss"]
+      "$": ["style.css"]
     };
   }
   static get styleUrls() {
@@ -187,49 +97,18 @@ export class SmoothlyPicker {
   }
   static get properties() {
     return {
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "readonly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "readonly",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "maxMenuHeight": {
+      "looks": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "Looks",
+          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\" | \"transparent\"",
+          "references": {
+            "Looks": {
+              "location": "import",
+              "path": "../input/Looks"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -237,11 +116,11 @@ export class SmoothlyPicker {
           "tags": [],
           "text": ""
         },
-        "attribute": "max-menu-height",
-        "reflect": false,
-        "defaultValue": "\"inherit\""
+        "attribute": "looks",
+        "reflect": true,
+        "defaultValue": "\"plain\""
       },
-      "maxHeight": {
+      "name": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -255,15 +134,15 @@ export class SmoothlyPicker {
           "tags": [],
           "text": ""
         },
-        "attribute": "max-height",
-        "reflect": false
+        "attribute": "name",
+        "reflect": true
       },
-      "emptyMenuLabel": {
-        "type": "string",
+      "open": {
+        "type": "boolean",
         "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -272,11 +151,11 @@ export class SmoothlyPicker {
           "tags": [],
           "text": ""
         },
-        "attribute": "empty-menu-label",
-        "reflect": false,
-        "defaultValue": "\"No Options\""
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "multiple": {
+      "mutable": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -290,11 +169,11 @@ export class SmoothlyPicker {
           "tags": [],
           "text": ""
         },
-        "attribute": "multiple",
+        "attribute": "mutable",
         "reflect": true,
         "defaultValue": "false"
       },
-      "mutable": {
+      "multiple": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -308,16 +187,16 @@ export class SmoothlyPicker {
           "tags": [],
           "text": ""
         },
-        "attribute": "mutable",
-        "reflect": false,
+        "attribute": "multiple",
+        "reflect": true,
         "defaultValue": "false"
       },
-      "optionStyle": {
-        "type": "any",
+      "readonly": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -326,190 +205,81 @@ export class SmoothlyPicker {
           "tags": [],
           "text": ""
         },
-        "attribute": "option-style",
-        "reflect": false
+        "attribute": "readonly",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "options": {
+      "validator": {
         "type": "unknown",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "(Option & { checked?: boolean })[]",
-          "resolved": "(Option & { checked?: boolean | undefined; })[]",
+          "original": "(value: string) => boolean | { result: boolean; notice: Notice }",
+          "resolved": "((value: string) => boolean | { result: boolean; notice: Notice; }) | undefined",
           "references": {
-            "Option": {
+            "Notice": {
               "location": "import",
               "path": "../../model"
             }
           }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
-        },
-        "defaultValue": "[]"
-      },
-      "labelSetting": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"hide\" | \"default\"",
-          "resolved": "\"default\" | \"hide\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "label-setting",
-        "reflect": true
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "selected": {},
+      "display": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "smoothlyPickerLoaded",
+        "name": "smoothlyPickerLoaded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "label",
-        "reflect": true
-      },
-      "selections": {
-        "type": "unknown",
-        "mutable": true,
         "complexType": {
-          "original": "Option[]",
-          "resolved": "Option[]",
+          "original": "Controls",
+          "resolved": "Controls",
           "references": {
-            "Option": {
+            "Controls": {
               "location": "import",
-              "path": "../../model"
+              "path": "./menu"
             }
           }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "defaultValue": "[]"
-      },
-      "selectNoneName": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "select-none-name",
-        "reflect": false,
-        "defaultValue": "\"Select None\""
-      },
-      "selectAllName": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "select-all-name",
-        "reflect": false,
-        "defaultValue": "\"Select All\""
-      },
-      "selectionName": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "selection-name",
-        "reflect": false,
-        "defaultValue": "\"items selected\""
-      },
-      "newOptionLabel": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
+        }
+      }, {
+        "method": "smoothlyInput",
+        "name": "smoothlyInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "new-option-label",
-        "reflect": false,
-        "defaultValue": "\"Add:\""
-      },
-      "valueValidator": {
-        "type": "unknown",
-        "mutable": false,
         "complexType": {
-          "original": "(value: any) => [boolean, Notice | undefined]",
-          "resolved": "(value: any) => [boolean, Notice | undefined]",
+          "original": "Record<string, any | any[]>",
+          "resolved": "{ [x: string]: any; }",
           "references": {
-            "Notice": {
-              "location": "import",
-              "path": "../../model"
+            "Record": {
+              "location": "global"
             }
           }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "defaultValue": "_ => [true, undefined]"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isOpen": {},
-      "empty": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "menuClose",
-        "name": "menuClose",
+        }
+      }, {
+        "method": "smoothlyChange",
+        "name": "smoothlyChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -518,18 +288,17 @@ export class SmoothlyPicker {
           "text": ""
         },
         "complexType": {
-          "original": "Option[]",
-          "resolved": "Option[]",
+          "original": "Record<string, any | any[]>",
+          "resolved": "{ [x: string]: any; }",
           "references": {
-            "Option": {
-              "location": "import",
-              "path": "../../model"
+            "Record": {
+              "location": "global"
             }
           }
         }
       }, {
-        "method": "notice",
-        "name": "notice",
+        "method": "smoothlyInputLooks",
+        "name": "smoothlyInputLooks",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -538,49 +307,81 @@ export class SmoothlyPicker {
           "text": ""
         },
         "complexType": {
-          "original": "Notice",
-          "resolved": "Notice",
+          "original": "(looks: Looks) => void",
+          "resolved": "(looks: \"line\" | \"grid\" | \"plain\" | \"border\" | \"transparent\") => void",
           "references": {
-            "Notice": {
+            "Looks": {
               "location": "import",
-              "path": "../../model"
+              "path": "../input/Looks"
             }
           }
         }
       }];
   }
+  static get methods() {
+    return {
+      "clear": {
+        "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": "isOpen",
-        "methodName": "isOpenChangeHandler"
+        "propName": "selected",
+        "methodName": "selectedChanged"
       }];
   }
   static get listeners() {
     return [{
-        "name": "optionSelect",
-        "method": "optionSelectHandler",
+        "name": "smoothlyInputLooks",
+        "method": "smoothlyInputLooksHandler",
         "target": undefined,
         "capture": false,
         "passive": false
       }, {
-        "name": "optionUnselect",
-        "method": "optionSelectHandler",
+        "name": "smoothlyPickerMenuLoaded",
+        "method": "menuLoadedHandler",
         "target": undefined,
         "capture": false,
         "passive": false
       }, {
-        "name": "optionAdd",
-        "method": "optionAddHandler",
+        "name": "smoothlyPickerOptionLoaded",
+        "method": "optionLoadedHandler",
         "target": undefined,
         "capture": false,
         "passive": false
       }, {
-        "name": "menuEmpty",
-        "method": "emptyHandler",
+        "name": "smoothlyPickerOptionChange",
+        "method": "optionChangeHandler",
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "click",
+        "method": "clickHandler",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "focusin",
+        "method": "focusHandler",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }];
   }
 }