smoothly 0.2.11 → 0.3.1

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

@@ -3,28 +3,35 @@ export class SmoothlyOption {
   constructor() {
     this.dataHighlight = false;
     this.divider = false;
+    this.toggle = false;
+    this.checked = false;
   }
   onHover(event) {
     this.optionHover.emit({ name: this.name, value: this.value });
   }
   onSelect(event) {
-    if (this.value)
+    if (this.value) {
       this.new
         ? this.optionAdd.emit({ name: this.name, value: this.value })
-        : this.optionSelect.emit({ name: this.name, value: this.value });
+        : !this.toggle || (this.toggle && !this.checked)
+          ? this.optionSelect.emit({ name: this.name, value: this.value })
+          : this.optionUnselect.emit({ name: this.name, value: this.value });
+      this.toggle && (this.checked = !this.checked);
+    }
     else
       throw `smoothly-option ${this.element.innerHTML} lacks value-property and can therefore not be selected`;
   }
   render() {
     return (h(Host, { onMouseDown: (e) => this.onSelect(e), onMouseOver: (e) => this.onHover(e) },
-      h("slot", { name: "left" }),
-      h("div", { class: "middle" }, this.name),
-      h("slot", { name: "right" })));
+      this.toggle && h("smoothly-icon", { name: this.checked ? "checkbox" : "square-outline" }),
+      h("div", { class: "name" }, this.name),
+      h("smoothly-quiet", null,
+        h("slot", { name: "hint" }))));
   }
   static get is() { return "smoothly-option"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["style.scss"]
+    "$": ["style.css"]
   }; }
   static get styleUrls() { return {
     "$": ["style.css"]
@@ -117,6 +124,23 @@ export class SmoothlyOption {
       "reflect": true,
       "defaultValue": "false"
     },
+    "checkbox": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checkbox",
+      "reflect": false
+    },
     "new": {
       "type": "boolean",
       "mutable": false,
@@ -133,6 +157,42 @@ export class SmoothlyOption {
       },
       "attribute": "new",
       "reflect": false
+    },
+    "toggle": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "toggle",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "checked": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{
@@ -165,6 +225,21 @@ export class SmoothlyOption {
         "resolved": "{ value: any; name: string; }",
         "references": {}
       }
+    }, {
+      "method": "optionUnselect",
+      "name": "optionUnselect",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{ value: any; name: string }",
+        "resolved": "{ value: any; name: string; }",
+        "references": {}
+      }
     }, {
       "method": "optionAdd",
       "name": "optionAdd",

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

@@ -1,46 +1,42 @@
 :host {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0.7em 1em;
-  margin-left: 1px;
-  margin-right: 1px;
-  background-color: transparent;
-  position: relative;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	padding: 0.7em 1em;
+	margin-left: 1px;
+	margin-right: 1px;
+	background-color: transparent;
+	position: relative;
 }
-
 :host([data-highlight]) {
-  background-color: rgb(var(--smoothly-default-shade));
+	background-color: rgb(var(--smoothly-default-shade));
 }
-
-:host > div.middle {
-  padding-left: 0.5em;
-  flex-shrink: 1;
-  width: 100%;
+:host > div.name {
+	padding-left: 0.5em;
+	flex-shrink: 1;
+	width: 100%;
 }
-
 :host([divider]) {
-  margin-bottom: 0.5em;
+	margin-bottom: 0.5em;
 }
-
 ::slotted([slot=right]) {
-  font-style: italic;
-  white-space: nowrap;
+	font-style: italic;
+	white-space: nowrap;
 }
-
 :host([divider])::after {
-  position: absolute;
-  height: 1px;
-  width: 100%;
-  left: 0;
-  bottom: -0.25em;
-  content: "";
-  background-color: rgba(var(--smoothly-dark-color));
+	position: absolute;
+	height: 1px;
+	width: 100%;
+	left: 0;
+	bottom: -0.25em;
+	content: "";
+	background-color: rgba(var(--smoothly-dark-color));
+}
+::slotted([slot=hint]) {
+	display: flex;
+	align-items: center;
+	gap: 1ch;
+	font-style: italic;
+	white-space: nowrap;
 }
-
-::slotted([slot=left]) {
-  display: flex;
-  align-items: center;
-  gap: 1ch;
-}

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

@@ -4,6 +4,7 @@ export class SmoothlyPicker {
     this.keepFocusOnReRender = false;
     this.disabled = false;
     this.readonly = false;
+    this.maxMenuHeight = "inherit";
     this.emptyMenuLabel = "No Options";
     this.multiple = false;
     this.mutable = false;
@@ -140,17 +141,14 @@ export class SmoothlyPicker {
     this.isOpen = false;
     this.filterOptions();
   }
-  getCheckHtml(checked) {
-    return checked ? (h("smoothly-icon", { name: "checkbox", size: "small" })) : (h("smoothly-icon", { name: "square-outline", size: "small" }));
-  }
   render() {
-    var _a, _b, _c, _d;
+    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.left = this.getCheckHtml(this.selections.map(s => s.value).includes(o.value));
+      o.checked = this.selections.map(s => s.value).includes(o.value);
     });
     const options = [
       ...(this.multiple
@@ -158,12 +156,12 @@ export class SmoothlyPicker {
           {
             value: "select-none",
             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)),
+            checked: this.selections.length == this.options.length,
             divider: true,
           },
         ]
         : []),
-      ...((_d = this.options) !== null && _d !== void 0 ? _d : []),
+      ...((_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,
@@ -174,7 +172,7 @@ export class SmoothlyPicker {
             : 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%" }, 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 })));
+      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 })));
   }
   static get is() { return "smoothly-picker"; }
   static get encapsulation() { return "shadow"; }
@@ -225,8 +223,8 @@ export class SmoothlyPicker {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"inherit\"",
-        "resolved": "\"inherit\"",
+        "original": "string",
+        "resolved": "string",
         "references": {}
       },
       "required": false,
@@ -236,7 +234,8 @@ export class SmoothlyPicker {
         "text": ""
       },
       "attribute": "max-menu-height",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"inherit\""
     },
     "maxHeight": {
       "type": "string",
@@ -328,12 +327,12 @@ export class SmoothlyPicker {
     },
     "options": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
-        "original": "OptionType[]",
-        "resolved": "OptionType[]",
+        "original": "(Option & { checked?: boolean })[]",
+        "resolved": "(Option & { checked?: boolean | undefined; })[]",
         "references": {
-          "OptionType": {
+          "Option": {
             "location": "import",
             "path": "../../model"
           }
@@ -385,10 +384,10 @@ export class SmoothlyPicker {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "OptionType[]",
-        "resolved": "OptionType[]",
+        "original": "Option[]",
+        "resolved": "Option[]",
         "references": {
-          "OptionType": {
+          "Option": {
             "location": "import",
             "path": "../../model"
           }
@@ -511,10 +510,10 @@ export class SmoothlyPicker {
         "text": ""
       },
       "complexType": {
-        "original": "OptionType[]",
-        "resolved": "OptionType[]",
+        "original": "Option[]",
+        "resolved": "Option[]",
         "references": {
-          "OptionType": {
+          "Option": {
             "location": "import",
             "path": "../../model"
           }
@@ -552,6 +551,12 @@ export class SmoothlyPicker {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "optionUnselect",
+      "method": "optionSelectHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }, {
       "name": "optionAdd",
       "method": "optionAddHandler",

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

@@ -50,11 +50,11 @@ export class SmoothlySelectDemo {
         h("smoothly-item", { value: "11" }, "November"),
         h("smoothly-item", { value: "12" }, "December")),
       h("button", { onClick: () => this.alertf() }, "press here"),
-      h("smoothly-picker", { label: "Filter", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, options: [
+      h("smoothly-picker", { label: "Filter", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", maxMenuHeight: "20rem", multiple: true, options: [
           { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
-          { name: "Cat Stevens", value: "cat", aliases: ["moew"] },
+          { name: "Cat Stevens", value: "cat", aliases: ["moew"], hint: "moew" },
           { name: "Noble Pig", value: "pig" },
-          { name: "Turtle Wax", value: "turtle" },
+          { name: "Turtle Wax", value: "turtle", hint: "slow" },
           { name: "Spider Man", value: "spider" },
           { name: "Phoenix Order Long Wooord", value: "phoenix" },
           { name: "Horse Back", value: "horse" },
@@ -86,7 +86,7 @@ export class SmoothlySelectDemo {
         ], 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: "Dog", value: "dog", aliases: ["WOFF"], hint: "Woof 🐶" },
           { name: "Cat", value: "cat", aliases: ["moew"] },
           { name: "Pig", value: "pig" },
           { name: "Turtle", value: "turtle" },

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

@@ -40,7 +40,7 @@ export class SmoothlySkeleton {
     },
     "width": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",