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

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

@@ -0,0 +1,232 @@
+import { h } from "@stencil/core";
+import { Button } from "../../Button";
+import { Editable } from "../Editable";
+import { Submittable } from "../Submittable";
+export class SmoothlyInputSubmit {
+  constructor() {
+    this.color = "tertiary";
+    this.expand = undefined;
+    this.fill = undefined;
+    this.disabled = false;
+    this.display = false;
+    this.shape = undefined;
+    this.type = "button";
+    this.size = undefined;
+  }
+  componentWillLoad() {
+    this.smoothlyInputLoad.emit(parent => {
+      if (Submittable.is(parent) && Editable.type.is(parent)) {
+        this.parent = parent;
+        parent.listen("changed", async (p) => {
+          this.display = !p.readonly;
+          this.disabled = p.readonly ? true : Object.values(p.value).filter(val => val).length < 1 ? true : !p.changed;
+        });
+      }
+    });
+  }
+  clickHandler() {
+    var _a;
+    (_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit();
+  }
+  render() {
+    return (h(Button, { disabled: this.disabled, type: "button" }, h("slot", null)));
+  }
+  static get is() { return "smoothly-input-submit"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Color",
+          "resolved": "\"danger\" | \"dark\" | \"default\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | undefined",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": true,
+        "defaultValue": "\"tertiary\""
+      },
+      "expand": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"block\" | \"full\"",
+          "resolved": "\"block\" | \"full\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "expand",
+        "reflect": true
+      },
+      "fill": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Fill",
+          "resolved": "\"clear\" | \"default\" | \"outline\" | \"solid\" | undefined",
+          "references": {
+            "Fill": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "fill",
+        "reflect": true
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "display": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "display",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "shape": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"rounded\"",
+          "resolved": "\"rounded\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shape",
+        "reflect": true
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"link\" | \"button\"",
+          "resolved": "\"button\" | \"link\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "\"button\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"flexible\" | \"small\" | \"large\" | \"icon\"",
+          "resolved": "\"flexible\" | \"icon\" | \"large\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": true
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "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"
+            }
+          }
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "clickHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/input/submit/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/submit/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAS,MAAM,eAAe,CAAA;AAEzG,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAO5C,MAAM,OAAO,mBAAmB;;iBAEU,UAAU;;;oBAGA,KAAK;mBACN,KAAK;;gBAEJ,QAAQ;;;EAG3D,iBAAiB;IAChB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;MACpC,IAAI,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;QACvD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACpB,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,EAAC,CAAC,EAAC,EAAE;UAClC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAA;UAC1B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;QAC7G,CAAC,CAAC,CAAA;OACF;IACF,CAAC,CAAC,CAAA;EACH,CAAC;EAED,YAAY;;IACX,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAA;EACtB,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,QAAQ;MAC7C,eAAQ,CACA,CACT,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, ComponentWillLoad, Event, EventEmitter, h, Listen, Prop, VNode } from \"@stencil/core\"\nimport { Color, Fill } from \"../../../model\"\nimport { Button } from \"../../Button\"\nimport { Editable } from \"../Editable\"\nimport { Submittable } from \"../Submittable\"\n\n@Component({\n\ttag: \"smoothly-input-submit\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputSubmit implements ComponentWillLoad {\n\tprivate parent?: Submittable & Editable\n\t@Prop({ reflect: true }) color?: Color = \"tertiary\"\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill\n\t@Prop({ reflect: true, mutable: true }) disabled = false\n\t@Prop({ reflect: true, mutable: true }) display = false\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Prop({ reflect: true }) type: \"link\" | \"button\" = \"button\"\n\t@Prop({ reflect: true }) size: \"flexible\" | \"small\" | \"large\" | \"icon\"\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\tcomponentWillLoad(): void {\n\t\tthis.smoothlyInputLoad.emit(parent => {\n\t\t\tif (Submittable.is(parent) && Editable.type.is(parent)) {\n\t\t\t\tthis.parent = parent\n\t\t\t\tparent.listen(\"changed\", async p => {\n\t\t\t\t\tthis.display = !p.readonly\n\t\t\t\t\tthis.disabled = p.readonly ? true : Object.values(p.value).filter(val => val).length < 1 ? true : !p.changed\n\t\t\t\t})\n\t\t\t}\n\t\t})\n\t}\n\t@Listen(\"click\")\n\tclickHandler() {\n\t\tthis.parent?.submit()\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Button disabled={this.disabled} type=\"button\">\n\t\t\t\t<slot />\n\t\t\t</Button>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/input/submit/style.css

@@ -0,0 +1,236 @@
+[color=default] {
+	--smoothly-color: var(--smoothly-default-color);
+	--smoothly-color-contrast: var(--smoothly-default-contrast);
+	--smoothly-color-shade: var(--smoothly-default-shade);
+	--smoothly-color-tint: var(--smoothly-default-tint);
+}
+
+[color=primary] {
+	--smoothly-color: var(--smoothly-primary-color);
+	--smoothly-color-contrast: var(--smoothly-primary-contrast);
+	--smoothly-color-shade: var(--smoothly-primary-shade);
+	--smoothly-color-tint: var(--smoothly-primary-tint);
+}
+
+[color=secondary] {
+	--smoothly-color: var(--smoothly-secondary-color);
+	--smoothly-color-contrast: var(--smoothly-secondary-contrast);
+	--smoothly-color-shade: var(--smoothly-secondary-shade);
+	--smoothly-color-tint: var(--smoothly-secondary-tint);
+}
+
+[color=tertiary] {
+	--smoothly-color: var(--smoothly-tertiary-color);
+	--smoothly-color-contrast: var(--smoothly-tertiary-contrast);
+	--smoothly-color-shade: var(--smoothly-tertiary-shade);
+	--smoothly-color-tint: var(--smoothly-tertiary-tint);
+}
+
+[color=success] {
+	--smoothly-color: var(--smoothly-success-color);
+	--smoothly-color-contrast: var(--smoothly-success-color);
+	--smoothly-color-shade: var(--smoothly-success-shade);
+	--smoothly-color-tint: var(--smoothly-success-tint);
+}
+
+[color=warning] {
+	--smoothly-color: var(--smoothly-warning-color);
+	--smoothly-color-contrast: var(--smoothly-warning-contrast);
+	--smoothly-color-shade: var(--smoothly-warning-shade);
+	--smoothly-color-tint: var(--smoothly-warning-tint);
+}
+
+[color=danger] {
+	--smoothly-color: var(--smoothly-danger-color);
+	--smoothly-color-contrast: var(--smoothly-danger-contrast);
+	--smoothly-color-shade: var(--smoothly-danger-shade);
+	--smoothly-color-tint: var(--smoothly-danger-tint);
+}
+
+[color=light] {
+	--smoothly-color: var(--smoothly-light-color);
+	--smoothly-color-contrast: var(--smoothly-light-contrast);
+	--smoothly-color-shade: var(--smoothly-light-shade);
+	--smoothly-color-tint: var(--smoothly-light-tint);
+}
+
+[color=medium] {
+	--smoothly-color: var(--smoothly-medium-color);
+	--smoothly-color-contrast: var(--smoothly-medium-contrast);
+	--smoothly-color-shade: var(--smoothly-medium-shade);
+	--smoothly-color-tint: var(--smoothly-medium-tint);
+}
+
+[color=dark] {
+	--smoothly-color: var(--smoothly-dark-color);
+	--smoothly-color-contrast: var(--smoothly-dark-contrast);
+	--smoothly-color-shade: var(--smoothly-dark-shade);
+	--smoothly-color-tint: var(--smoothly-dark-tint);
+}
+
+
+:host{
+	display: inline-block;
+	box-sizing: border-box;
+	border-radius: 0.5rem;
+	border: solid 1px;
+	transition: background 150ms ease-in-out;
+	cursor: pointer;
+}
+:host([type=link]) {
+	display: inline;
+	border: none;
+}
+:host([disabled]) {
+	opacity: 0.5;
+	pointer-events: none;
+}
+a,
+button {
+	font-size: 110%;
+	font-weight: 400;
+	border: none;
+	background-color: transparent;
+	cursor: pointer;
+	display: inline-flex;
+	gap: 0.5rem;
+}
+button {
+	justify-content: center;
+	height: 100%;
+	width: 100%;
+	border-radius: 0.5rem;
+	align-items: center;
+}
+:host(:not([size=icon]):not([size=flexible])) > button {
+	padding: 0.8em;
+	min-width: 8em;
+}
+:host(:not([size=icon]):not([size=flexible])):has(smoothly-icon) > button {
+	padding: 0.6em;
+}
+:host([size=icon]) > button {
+	padding: 0.5em;
+}
+:host([shape=rounded]) > button,
+:host([shape=rounded]) {
+	border-radius: 2rem;
+}
+:host([type=button]) > a {
+	text-align: center;
+	text-decoration: inherit;
+	width: calc(100% - 0.6em);
+}
+:host([size=small]) > button {
+	font-size: 100%;
+}
+:host([size=large]) > button {
+	font-size: 130%;
+}
+:host(:not([size=icon])) {
+	min-width: 8em;
+}
+:host([size=flexible]) {
+	min-width: unset;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border: none;
+}
+:host([size=flexible]) > button {
+	min-width: unset;
+	padding: 0;
+	margin: 0 !important;
+}
+:host([expand]) {
+	width: 100%;
+}
+:host([expand=full]) {
+	border-left: none;
+	border-right: none;
+	border-radius: 0;
+}
+:host([shape=rounded]) > button,
+:host([shape=rounded]) {
+	border-radius: 2rem;
+}
+:host(:not([fill=clear]):hover),
+:host(:not([fill=clear]):focus),	
+:host(:not([fill=clear]):active) {
+	border-color: rgb(var(--smoothly-color-tint)) !important;
+	background: rgb(var(--smoothly-color-tint)) !important;
+}
+:host(:not([fill=clear]):hover) > button,
+:host(:not([fill=clear]):focus) > button,
+:host(:not([fill=clear]):active) > button,
+:host(:not([fill=clear]):hover) ::slotted(smoothly-icon),
+:host(:not([fill=clear]):focus) ::slotted(smoothly-icon),
+:host(:not([fill=clear]):active) ::slotted(smoothly-icon) {
+	color: rgb(var(--smoothly-color-contrast)) !important;
+	stroke: rgb(var(--smoothly-color-contrast)) !important;
+	fill: rgb(var(--smoothly-color-contrast)) !important;
+}
+:host([fill=clear]:hover) > button,
+:host([fill=clear]:focus) > button,
+:host([fill=clear]:active) > button {
+	color: rgb(var(--smoothly-color-tint)) !important;
+	stroke: rgb(var(--smoothly-color-tint)) !important;
+	fill: rgb(var(--smoothly-color-tint)) !important;
+}
+:host([disabled]) {
+	opacity: 0.5;
+	pointer-events: none;
+}
+:host(:not([fill])),
+:host([fill=default]) {
+	background: rgb(var(--smoothly-color));
+	border-color: transparent;
+}
+:host([fill=solid]) {
+	background: rgb(var(--smoothly-color));
+	border-color: rgb(var(--smoothly-color));
+}
+:host([fill=solid]) > button,
+:host([fill=default]) > button {
+	stroke: rgb(var(--smoothly-color-contrast));
+	fill: rgb(var(--smoothly-color-contrast));
+	color: rgb(var(--smoothly-color-contrast));
+}
+:host([fill=outline]) > button,
+:host([fill=clear]) > button {
+	stroke: rgb(var(--smoothly-color));
+	fill: rgb(var(--smoothly-color));
+	color: rgb(var(--smoothly-color));
+}
+:host([fill=outline]) {
+	background: transparent;
+	border-color: rgb(var(--smoothly-color));
+}
+:host([fill=clear]) {
+	background: transparent;
+	border-color: transparent;
+}
+::slotted(smoothly-icon[slot=start]),
+::slotted(smoothly-icon[slot=end]) {
+	font-size: 0.65em;
+}
+:host([hidden]) {
+	display: none;
+}
+
+
+:host([type="button"]) {
+	margin: 1em 0em;
+}
+
+:host(:not([display])) {
+	display: none;
+}
+
+:host() {
+	transition: 0.6s;
+	margin: 0rem;
+	min-width: 0rem;
+}

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

@@ -7,15 +7,15 @@ export class Item {
   }
   onSelectedChanged(value, old) {
     if (value && !old)
-      this.itemSelected.emit();
+      this.smoothlyItemSelect.emit();
   }
   onClick() {
     this.selected = true;
-    this.itemSelected.emit();
+    this.smoothlyItemSelect.emit();
   }
   componentDidLoad() {
     if (this.selected)
-      this.itemSelected.emit();
+      this.smoothlyItemSelect.emit();
   }
   async filter(filter) {
     const result = !(this.element.hidden = filter
@@ -96,8 +96,8 @@ export class Item {
   }
   static get events() {
     return [{
-        "method": "itemSelected",
-        "name": "itemSelected",
+        "method": "smoothlyItemSelect",
+        "name": "smoothlyItemSelect",
         "bubbles": true,
         "cancelable": true,
         "composed": true,

package/dist/collection/components/item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/item/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,MAAM,eAAe,CAAA;AAO7G,MAAM,OAAO,IAAI;;;;;;EAOhB,iBAAiB,CAAC,KAAc,EAAE,GAAY;IAC7C,IAAI,KAAK,IAAI,CAAC,GAAG;MAChB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;EAC1B,CAAC;EAED,OAAO;IACN,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;EACzB,CAAC;EACD,gBAAgB;IACf,IAAI,IAAI,CAAC,QAAQ;MAChB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAA;EAC1B,CAAC;EAED,KAAK,CAAC,MAAM,CAAC,MAAc;IAC1B,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,MAAM;MAC5C,CAAC,CAAC,CAAC,CACD,CAAC,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC;QACzG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CACpD;MACH,CAAC,CAAC,KAAK,CAAC,CAAA;IACT,OAAO,MAAM,CAAA;EACd,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,QAAQ,EAAE,CAAC,CAAC;MACjB,eAAQ,CACF,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, Watch } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-item\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class Item {\n\t@Element() element: HTMLSmoothlyItemElement\n\t@Prop() value: any\n\t@Prop({ reflect: true, mutable: true }) selected: boolean\n\t@Prop({ reflect: true, mutable: true }) marked: boolean\n\t@Event() itemSelected: EventEmitter<void>\n\t@Watch(\"selected\")\n\tonSelectedChanged(value: boolean, old: boolean) {\n\t\tif (value && !old)\n\t\t\tthis.itemSelected.emit()\n\t}\n\t@Listen(\"click\")\n\tonClick() {\n\t\tthis.selected = true\n\t\tthis.itemSelected.emit()\n\t}\n\tcomponentDidLoad() {\n\t\tif (this.selected)\n\t\t\tthis.itemSelected.emit()\n\t}\n\t@Method()\n\tasync filter(filter: string): Promise<boolean> {\n\t\tconst result = !(this.element.hidden = filter\n\t\t\t? !(\n\t\t\t\t\t(typeof this.value === \"string\" ? this.value : JSON.stringify(this.value)).toLowerCase().includes(filter) ||\n\t\t\t\t\tthis.element.innerText.toLowerCase().includes(filter)\n\t\t\t  )\n\t\t\t: false)\n\t\treturn result\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host tabIndex={-1}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/item/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,MAAM,eAAe,CAAA;AAO7G,MAAM,OAAO,IAAI;;;;;;EAOhB,iBAAiB,CAAC,KAAc,EAAE,GAAY;IAC7C,IAAI,KAAK,IAAI,CAAC,GAAG;MAChB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAA;EAChC,CAAC;EAED,OAAO;IACN,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAA;EAC/B,CAAC;EACD,gBAAgB;IACf,IAAI,IAAI,CAAC,QAAQ;MAChB,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAA;EAChC,CAAC;EAED,KAAK,CAAC,MAAM,CAAC,MAAc;IAC1B,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,MAAM;MAC5C,CAAC,CAAC,CAAC,CACD,CAAC,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC;QACzG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,CACpD;MACH,CAAC,CAAC,KAAK,CAAC,CAAA;IACT,OAAO,MAAM,CAAA;EACd,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,QAAQ,EAAE,CAAC,CAAC;MACjB,eAAQ,CACF,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, Watch } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-item\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class Item {\n\t@Element() element: HTMLSmoothlyItemElement\n\t@Prop() value: any\n\t@Prop({ reflect: true, mutable: true }) selected: boolean\n\t@Prop({ reflect: true, mutable: true }) marked: boolean\n\t@Event() smoothlyItemSelect: EventEmitter<void>\n\t@Watch(\"selected\")\n\tonSelectedChanged(value: boolean, old: boolean) {\n\t\tif (value && !old)\n\t\t\tthis.smoothlyItemSelect.emit()\n\t}\n\t@Listen(\"click\")\n\tonClick() {\n\t\tthis.selected = true\n\t\tthis.smoothlyItemSelect.emit()\n\t}\n\tcomponentDidLoad() {\n\t\tif (this.selected)\n\t\t\tthis.smoothlyItemSelect.emit()\n\t}\n\t@Method()\n\tasync filter(filter: string): Promise<boolean> {\n\t\tconst result = !(this.element.hidden = filter\n\t\t\t? !(\n\t\t\t\t\t(typeof this.value === \"string\" ? this.value : JSON.stringify(this.value)).toLowerCase().includes(filter) ||\n\t\t\t\t\tthis.element.innerText.toLowerCase().includes(filter)\n\t\t\t  )\n\t\t\t: false)\n\t\treturn result\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host tabIndex={-1}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,81 @@
+import { h, Host } from "@stencil/core";
+export class SmoothlyLabel {
+  constructor() {
+    this.hue = undefined;
+    this.description = undefined;
+    this.shape = undefined;
+  }
+  render() {
+    return (h(Host, { title: this.description, style: {
+        "--hue": this.hue.toString(),
+      } }, h("slot", null)));
+  }
+  static get is() { return "smoothly-label"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "hue": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "hue",
+        "reflect": false
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "description",
+        "reflect": false
+      },
+      "shape": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"rectangle\" | \"rounded\"",
+          "resolved": "\"rectangle\" | \"rounded\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shape",
+        "reflect": true
+      }
+    };
+  }
+}
+//# sourceMappingURL=index.js.map

package/dist/collection/components/label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/label/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAOxD,MAAM,OAAO,aAAa;;;;;;EAKzB,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IACJ,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,KAAK,EAAE;QACN,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE;OAC5B;MACD,eAAa,CACP,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-label\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyLabel {\n\t@Prop() hue: number\n\t@Prop() description: string\n\t@Prop({ reflect: true }) shape: \"rectangle\" | \"rounded\"\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\ttitle={this.description}\n\t\t\t\tstyle={{\n\t\t\t\t\t\"--hue\": this.hue.toString(),\n\t\t\t\t}}>\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,15 @@
+:host {
+	position: relative;
+	width: max-content;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0.15em 0.6em;
+	border-radius: 2em;
+	color: rgb(var(--smoothly-default-contrast));
+	background-color: hsl(var(--hue), 85%, 70%);
+}
+
+:host([shape=rectangle]) {
+	border-radius: 0.3em;
+}

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

@@ -0,0 +1,73 @@
+import { h, Host } from "@stencil/core";
+export class SmoothlyLazy {
+  constructor() {
+    this.show = false;
+    this.content = undefined;
+  }
+  loadMoreHandler(event) {
+    event.stopPropagation();
+    this.show = true;
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "before" }), h("smoothly-load-more", { onSmoothlyLoadMore: e => this.loadMoreHandler(e) }), this.show && (typeof this.content == "function" ? h(this.content, null) : this.content), h("slot", null)));
+  }
+  static get is() { return "smoothly-lazy"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "show": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "content": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "JSX.Element | FunctionalComponent",
+          "resolved": "Element | FunctionalComponent<{}> | undefined",
+          "references": {
+            "JSX": {
+              "location": "import",
+              "path": "@stencil/core"
+            },
+            "FunctionalComponent": {
+              "location": "import",
+              "path": "@stencil/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+}
+//# sourceMappingURL=index.js.map