smoothly 0.1.121 → 0.2.4

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

@@ -4,12 +4,16 @@ export class SmoothlyPicker {
     this.keepFocusOnReRender = false;
     this.emptyMenuLabel = "No Options";
     this.multiple = false;
+    this.mutable = false;
     this.options = [];
     this.selections = [];
     this.selectNoneName = "Select None";
+    this.selectAllName = "Select All";
     this.selectionName = "items selected";
+    this.newOptionLabel = "Add:";
+    this.valueValidator = _ => [true, undefined];
   }
-  isOpenChangeHander() {
+  isOpenChangeHandler() {
     if (this.isOpen == false) {
       this.menuClose.emit(this.selections);
     }
@@ -21,10 +25,26 @@ export class SmoothlyPicker {
       this.keepFocusOnReRender = false;
     }
   }
-  optionSelectHander(event) {
+  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();
+  }
   toggle(option) {
     option.value == "select-none"
       ? this.toggleAll()
@@ -59,9 +79,19 @@ export class SmoothlyPicker {
   }
   toggleHighlighted() {
     var _a;
-    (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.getHighlighted().then((result) => {
-      result && this.toggle(result);
-    });
+    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);
+      });
   }
   highlightDefault() {
     var _a;
@@ -123,7 +153,7 @@ export class SmoothlyPicker {
         ? [
           {
             value: "select-none",
-            name: this.selectNoneName,
+            name: this.selections.length == this.options.length ? this.selectNoneName : this.selectAllName,
             left: this.getCheckHtml(this.selections.length == ((_c = this.options) === null || _c === void 0 ? void 0 : _c.length)),
             divider: true,
           },
@@ -140,7 +170,7 @@ export class SmoothlyPicker {
             : this.selections.map(selection => selection.name).join(", "), onKeyDown: e => this.onKeyDown(e), onInput: (e) => this.onInput(e) }),
         h("smoothly-icon", { class: "down", name: "chevron-down", size: "tiny" }),
         h("smoothly-icon", { class: "up", name: "chevron-up", size: "tiny" })),
-      h("smoothly-menu-options", { style: { width: "100%" }, optionStyle: Object.assign({}, this.optionStyle), order: false, emptyMenuLabel: this.emptyMenuLabel, "max-menu-height": this.maxMenuHeight, ref: (el) => (this.menuElement = el !== null && el !== void 0 ? el : this.menuElement), onClick: e => e.stopPropagation(), resetHighlightOnOptionsChange: false, options: options })));
+      h("smoothly-menu-options", { style: { width: "100%" }, 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 })));
   }
   static get is() { return "smoothly-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -221,6 +251,24 @@ export class SmoothlyPicker {
       "reflect": true,
       "defaultValue": "false"
     },
+    "mutable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "mutable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "optionStyle": {
       "type": "any",
       "mutable": false,
@@ -332,6 +380,24 @@ export class SmoothlyPicker {
       "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,
@@ -349,10 +415,50 @@ export class SmoothlyPicker {
       "attribute": "selection-name",
       "reflect": false,
       "defaultValue": "\"items selected\""
+    },
+    "newOptionLabel": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "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]",
+        "references": {
+          "Notice": {
+            "location": "import",
+            "path": "../../model"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "_ => [true, undefined]"
     }
   }; }
   static get states() { return {
-    "isOpen": {}
+    "isOpen": {},
+    "empty": {}
   }; }
   static get events() { return [{
       "method": "menuClose",
@@ -374,18 +480,50 @@ export class SmoothlyPicker {
           }
         }
       }
+    }, {
+      "method": "notice",
+      "name": "notice",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "Notice",
+        "resolved": "Notice",
+        "references": {
+          "Notice": {
+            "location": "import",
+            "path": "../../model"
+          }
+        }
+      }
     }]; }
   static get elementRef() { return "element"; }
   static get watchers() { return [{
       "propName": "selections",
-      "methodName": "isOpenChangeHander"
+      "methodName": "isOpenChangeHandler"
     }, {
       "propName": "isOpen",
-      "methodName": "isOpenChangeHander"
+      "methodName": "isOpenChangeHandler"
     }]; }
   static get listeners() { return [{
       "name": "optionSelect",
-      "method": "optionSelectHander",
+      "method": "optionSelectHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "optionAdd",
+      "method": "optionAddHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "menuEmpty",
+      "method": "emptyHandler",
       "target": undefined,
       "capture": false,
       "passive": false

package/dist/collection/components/select-demo/index.js

@@ -1,4 +1,5 @@
 import { Component, h, Listen } from "@stencil/core";
+import { Notice } from "../../model";
 export class SmoothlySelectDemo {
   constructor() {
     this.currencies = ["SEK", "EUR"];
@@ -63,7 +64,7 @@ export class SmoothlySelectDemo {
           { name: "Scary Kraken", value: "kraken" },
         ] }),
       h("br", null),
-      h("smoothly-picker", { label: "", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, options: [
+      h("smoothly-picker", { label: "Multiple", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, options: [
           { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
           { name: "Cat Stevens", value: "cat", aliases: ["moew"] },
           { name: "Noble Pig", value: "pig" },
@@ -77,6 +78,13 @@ export class SmoothlySelectDemo {
           { name: "Scary Kraken", value: "kraken" },
         ] }),
       h("br", null),
+      h("smoothly-picker", { label: "Multiple mutable", "max-height": "58px", multiple: true, mutable: true, newOptionLabel: "Invite:", options: [
+          { name: "john@example.com", value: "john@example.com" },
+          { name: "jane@example.com", value: "jane@example.com" },
+          { name: "james@example.com", value: "james@example.com" },
+          { name: "jessie@example.com", value: "jessie@example.com" },
+        ], valueValidator: (email) => email.match(/^\w+@\w+/) ? [true, undefined] : [false, Notice.failed("Incorrectly formatted email")] }),
+      h("br", null),
       h("smoothly-picker", { label: "Single select", multiple: false, "max-menu-height": "200px", options: [
           { name: "Dog", value: "dog", aliases: ["WOFF"], right: "Woof 🐶" },
           { name: "Cat", value: "cat", aliases: ["moew"] },

package/dist/collection/components/select-demo/style.css

@@ -8,5 +8,5 @@ button:focus {
 	outline: none;
 }
 smoothly-selector {
-	outline: none
+	outline: none;
 }

package/dist/collection/components/selector/style.css

@@ -1,4 +1,3 @@
-
 :host {
 	position: relative;
 	height: 100%;
@@ -9,7 +8,6 @@
 	display: flex;
 	align-items: center;
 }
-
 :host > div > nav {
 	display: flex;
 	flex-direction: column;

package/dist/collection/components/tab/style.css

@@ -6,14 +6,13 @@
 }
 label {
 	display: block;
-  padding: 1em;
+	padding: 1em;
 	background-color: rgb(var(--smoothly-default-shade));
 	border-top-left-radius: 0.3rem;
 	border-top-right-radius: 0.3rem;
 	width: 6.25rem;
-
 }
 div {
-  background-color: rgb(var(--smoothly-default-shade));
-  padding: 1em;
+	background-color: rgb(var(--smoothly-default-shade));
+	padding: 1em;
 }

package/dist/collection/components/tab-switch/index.js

@@ -1,6 +1,7 @@
 import { Component, Element, h, Host, Listen, State, Watch } from "@stencil/core";
 export class SmoothlyTabSwitch {
   openChanged(event) {
+    event.stopPropagation();
     this.selectedElement = event.target;
     this.selectedElement.open = true;
     this.element.after(event.detail);

package/dist/collection/components/tab-switch/style.css

@@ -1,5 +1,5 @@
 :host {
 	display: flex;
 	flex-direction: row;
-	margin: 1em 1em 0em 0em
+	margin: 1em 1em 0em 0em;
 }

package/dist/collection/components/table/cell/style.css

@@ -1,4 +1,6 @@
 :host {
 	display: table-cell;
-	padding: 0.5em;
+	vertical-align: middle;
+	line-height: 1.5rem;
+	padding: 0.2rem 0 0.2rem 1rem;
 }

package/dist/collection/components/table/demo/index.js

@@ -6,46 +6,52 @@ export class TableDemo {
         h("smoothly-table-row", null,
           h("smoothly-table-header", null, "Header A"),
           h("smoothly-table-header", null, "Header B"),
-          h("smoothly-table-header", null, "Header C")),
-        h("smoothly-table-expandable-row", null,
+          h("smoothly-table-header", null, "Header C"),
+          h("smoothly-table-header", null, "Header D"),
+          h("smoothly-table-header", null)),
+        h("smoothly-table-row", null,
           h("smoothly-table-expandable-cell", null,
-            "Value 1A",
-            h("div", { slot: "detail" }, "1A details")),
+            "normal row (exp.cell)",
+            h("div", { slot: "detail" }, "expandable cell 1 content")),
           h("smoothly-table-expandable-cell", null,
-            h("smoothly-display", { type: "price", value: 20, currency: "EUR" }),
-            h("div", { slot: "detail" }, "Budget details.")),
+            "expandable cell",
+            h("div", { slot: "detail" }, "expandable cell 2 content")),
           h("smoothly-table-expandable-cell", null,
-            h("smoothly-display", { type: "price", value: 18, currency: "EUR" }),
-            h("div", { slot: "detail" }, "Cost details."))),
-        h("smoothly-table-expandable-row", null,
+            "expandable cell",
+            h("div", { slot: "detail" }, "expandable cell 3 content")),
           h("smoothly-table-expandable-cell", null,
-            "Value 1A",
-            h("div", { slot: "detail" }, "2A details")),
+            "expandable cell",
+            h("div", { slot: "detail" }, "expandable cell 4 content"))),
+        h("smoothly-table-row", null,
+          h("smoothly-table-cell", null, "normal row (nor.cell)\""),
+          h("smoothly-table-cell", null, "normal cell"),
           h("smoothly-table-expandable-cell", null,
-            h("smoothly-display", { type: "price", value: 30, currency: "EUR" }),
-            h("div", { slot: "detail" }, "Budget details.")),
+            "expandable cell",
+            h("div", { slot: "detail" }, "expandable cell details.")),
           h("smoothly-table-expandable-cell", null,
-            h("smoothly-display", { type: "price", value: 38, currency: "EUR" }),
-            h("div", { slot: "detail" }, "Cost details.")))),
+            "expandable cell",
+            h("div", { slot: "detail" }, "expandable cell details."))),
+        h("smoothly-table-expandable-row", null,
+          h("smoothly-table-cell", null, "expandable row (nor.cell)"),
+          h("smoothly-table-cell", null, "Normal cell"),
+          h("smoothly-table-cell", null, "normal cell"),
+          h("smoothly-table-cell", null, "Normal cell"),
+          h("div", { slot: "detail" }, "expandable row content"))),
       h("smoothly-table", null,
         h("smoothly-table-row", null,
-          h("smoothly-table-header", null, "Header D"),
-          h("smoothly-table-header", null, "Header E"),
-          h("smoothly-table-header", null, "Header F")),
-        h("smoothly-table-row", null,
-          h("smoothly-table-cell", null, "Value 1A"),
-          h("smoothly-table-cell", null,
-            h("smoothly-display", { type: "price", value: 20, currency: "EUR" })),
-          h("smoothly-table-cell", null,
-            h("smoothly-display", { type: "price", value: 18, currency: "EUR" })),
-          h("div", { slot: "detail" }, "Cost details.")),
-        h("smoothly-table-row", null,
-          h("smoothly-table-cell", null, "Value 1A"),
-          h("smoothly-table-cell", null,
-            h("smoothly-display", { type: "price", value: 20, currency: "EUR" })),
-          h("smoothly-table-cell", null,
-            h("smoothly-display", { type: "price", value: 18, currency: "EUR" })),
-          h("div", { slot: "detail" }, "Cost details."))),
+          h("smoothly-table-header", null, "Header A"),
+          h("smoothly-table-header", null)),
+        h("smoothly-table-expandable-row", null,
+          "A Content",
+          h("div", { slot: "detail" },
+            h("smoothly-tab-switch", null,
+              h("smoothly-tab", { label: "1", open: true },
+                h("smoothly-table", null,
+                  h("smoothly-table-row", null,
+                    h("smoothly-table-header", null, "Header B"),
+                    h("smoothly-table-header", null)),
+                  h("smoothly-table-expandable-row", null,
+                    h("smoothly-table-cell", null, "B Content")))))))),
     ];
   }
   static get is() { return "smoothly-table-demo"; }

package/dist/collection/components/table/expandable/cell/index.js

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Host, Listen, Prop, State, Watch, } from "@stencil/core";
+import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
 export class TableExpandableCell {
   constructor() {
     this.align = "left";
@@ -14,7 +14,7 @@ export class TableExpandableCell {
     this.open = !this.open;
   }
   componentDidLoad() {
-    this.expansionLoaded.emit();
+    this.expansionLoad.emit();
   }
   componentDidRender() {
     if (this.beginOpen) {
@@ -25,9 +25,11 @@ export class TableExpandableCell {
   render() {
     return (h(Host, { style: { textAlign: this.align } },
       h("slot", null),
+      h("smoothly-icon", { name: "chevron-forward", size: "tiny" }),
       h("tr", { ref: e => (this.expansionElement = e) },
-        h("td", { colSpan: 500, class: !this.open ? "hide" : "" },
-          h("slot", { name: "detail" })))));
+        h("td", { colSpan: 999, class: !this.open ? "hide" : "" },
+          h("div", { class: "slot-detail" },
+            h("slot", { name: "detail" }))))));
   }
   static get is() { return "smoothly-table-expandable-cell"; }
   static get encapsulation() { return "scoped"; }
@@ -74,9 +76,6 @@ export class TableExpandableCell {
       "reflect": true
     }
   }; }
-  static get states() { return {
-    "beginOpen": {}
-  }; }
   static get events() { return [{
       "method": "expansionOpen",
       "name": "expansionOpen",
@@ -97,8 +96,8 @@ export class TableExpandableCell {
         }
       }
     }, {
-      "method": "expansionLoaded",
-      "name": "expansionLoaded",
+      "method": "expansionLoad",
+      "name": "expansionLoad",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

package/dist/collection/components/table/expandable/cell/style.css

@@ -1,7 +1,44 @@
 :host {
 	display: table-cell;
-	padding: 0.5em;
+	vertical-align: middle;
+	line-height: 1.5em;
+	cursor: pointer;
+	padding: 0.2em 0 0.2em;
+	border-style: solid solid none solid;
+	border-width: 2px;
+	border-color: rgb(var(--smoothly-default-color));
 }
 .hide {
 	display: none;
 }
+:host[open] {
+	position: relative;
+	z-index: 3;
+	background-color: rgb(var(--smoothly-default-color));
+	border-style: solid solid none solid;
+	border-width: 2px;
+	border-color: rgb(var(--smoothly-dark-color));
+}
+.slot-detail {
+	position: relative;
+	background-color: rgb(var(--smoothly-default-color));
+	width: 104%;
+	left: -2%;
+	border-left-style: solid;
+	border-left-color: rgb(var(--smoothly-tertiary-color));
+	box-shadow: 0px 0px 5px 4px rgb(var(--smoothly-dark-color), 0.5);
+	box-sizing: border-box;
+	padding: 0.5rem 2%;
+}
+:host smoothly-icon {
+	width: 0.6rem;
+	height: 1rem;
+	float: left;
+	padding-left: 0.2rem;
+	padding-right: 0.2rem;
+	padding-bottom: 0.5rem;
+	transition: transform 0.2s;
+}
+:host[open] smoothly-icon {
+	transform: rotate(90deg);
+}

package/dist/collection/components/table/expandable/row/index.js

@@ -1,22 +1,30 @@
-import { Component, Element, h, Host, Listen } from "@stencil/core";
+import { Component, Element, Event, h, Host, Listen, Prop, Watch } from "@stencil/core";
 export class TableExpandableRow {
   constructor() {
-    this.expansions = [];
+    this.align = "left";
   }
-  onExpansionLoaded(event) {
-    this.expansions.push(event.target);
+  openChanged(value) {
+    if (this.expansionElement)
+      this.element.after(this.expansionElement);
   }
-  onDetailsLoaded(event) {
-    this.expansions.forEach(cell => {
-      if (cell != event.target)
-        cell.open = false;
-    });
-    if (event.detail)
-      this.element.after(event.detail);
+  onClick(e) {
+    this.open = !this.open;
+    e.stopPropagation();
+  }
+  componentDidRender() {
+    this.expansionOpen.emit(this.expansionElement);
+    if (this.expansionElement && this.open)
+      this.element.after(this.expansionElement);
   }
   render() {
-    return (h(Host, null,
-      h("slot", null)));
+    return (h(Host, { style: { textAlign: this.align } },
+      h("slot", null),
+      h("smoothly-table-cell", null,
+        h("smoothly-icon", { name: "chevron-forward", size: "tiny" })),
+      h("tr", { ref: e => (this.expansionElement = e) },
+        h("td", { colSpan: 999, class: !this.open ? "hide" : "" },
+          h("div", { class: "slot-detail" },
+            h("slot", { name: "detail" }))))));
   }
   static get is() { return "smoothly-table-expandable-row"; }
   static get encapsulation() { return "scoped"; }
@@ -26,16 +34,71 @@ export class TableExpandableRow {
   static get styleUrls() { return {
     "$": ["style.css"]
   }; }
+  static get properties() { return {
+    "align": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"left\" | \"center\" | \"right\"",
+        "resolved": "\"center\" | \"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "align",
+      "reflect": false,
+      "defaultValue": "\"left\""
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "open",
+      "reflect": true
+    }
+  }; }
+  static get events() { return [{
+      "method": "expansionOpen",
+      "name": "expansionOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "HTMLElement",
+        "resolved": "HTMLElement",
+        "references": {
+          "HTMLElement": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
   static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "openChanged"
+    }]; }
   static get listeners() { return [{
-      "name": "expansionLoaded",
-      "method": "onExpansionLoaded",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "expansionOpen",
-      "method": "onDetailsLoaded",
+      "name": "click",
+      "method": "onClick",
       "target": undefined,
       "capture": false,
       "passive": false