smoothly 1.0.0-alpha.99 → 1.0.0

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

@@ -0,0 +1,382 @@
+import { h, Host } from "@stencil/core";
+export class SmoothlyInputCheckbox {
+  constructor() {
+    this.listener = {};
+    this.name = undefined;
+    this.changed = false;
+    this.readonly = false;
+    this.checked = false;
+    this.value = this.checked;
+    this.looks = "plain";
+    this.disabled = undefined;
+  }
+  componentWillLoad() {
+    var _a, _b;
+    this.initialValue = this.checked;
+    !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
+    this.smoothlyInputLooks.emit(looks => (this.looks = looks));
+    this.smoothlyInputLoad.emit(() => {
+      return;
+    });
+    (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+  }
+  async clear() {
+    !this.disabled && !this.readonly && (this.checked = false);
+  }
+  async listen(property, listener) {
+    this.listener[property] = listener;
+    listener(this);
+  }
+  async edit(editable) {
+    this.readonly = !editable;
+  }
+  async reset() {
+    this.checked = this.initialValue;
+  }
+  async setInitialValue() {
+    this.initialValue = this.checked;
+    this.changed = false;
+  }
+  elementCheck() {
+    var _a, _b;
+    this.changed = this.initialValue !== this.checked;
+    this.smoothlyInput.emit({ [this.name]: this.checked });
+    (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+  }
+  inputHandler() {
+    !this.disabled && !this.readonly && (this.checked = !this.checked);
+  }
+  render() {
+    return (h(Host, { onClick: () => this.inputHandler() }, h("input", { type: "checkbox", checked: this.checked }), this.checked && h("smoothly-icon", { name: "checkmark-outline", size: "tiny" }), h("label", null, h("slot", null))));
+  }
+  static get is() { return "smoothly-input-checkbox"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "changed": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "changed",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "readonly": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "readonly",
+        "reflect": true,
+        "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"
+      },
+      "value": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "this.checked"
+      },
+      "looks": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Looks",
+          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\" | \"transparent\"",
+          "references": {
+            "Looks": {
+              "location": "import",
+              "path": "../Looks"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "looks",
+        "reflect": true,
+        "defaultValue": "\"plain\""
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "smoothlyInputLooks",
+        "name": "smoothlyInputLooks",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "(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",
+              "path": "../Looks"
+            },
+            "Color": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        }
+      }, {
+        "method": "smoothlyInput",
+        "name": "smoothlyInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Data",
+          "resolved": "{ [name: string]: Value | Data; }",
+          "references": {
+            "Data": {
+              "location": "import",
+              "path": "../../../model"
+            }
+          }
+        }
+      }, {
+        "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": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "clear": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "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": []
+        }
+      },
+      "edit": {
+        "complexType": {
+          "signature": "(editable: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "reset": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "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 watchers() {
+    return [{
+        "propName": "checked",
+        "methodName": "elementCheck"
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/checkbox/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentWillLoad, Event, EventEmitter, h, Host, Method, Prop, Watch } from \"@stencil/core\"\nimport { Color, Data } from \"../../../model\"\nimport { Clearable } from \"../Clearable\"\nimport { Editable } from \"../Editable\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\n\n@Component({\n\ttag: \"smoothly-input-checkbox\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputCheckbox implements Input, Clearable, Editable, ComponentWillLoad {\n\tprivate initialValue?: any\n\tprivate listener: { changed?: (parent: Editable) => Promise<void> } = {}\n\t@Prop() name: string\n\t@Prop({ mutable: true }) changed = false\n\t@Prop({ reflect: true, mutable: true }) readonly = false\n\t@Prop({ mutable: true }) checked = false\n\t@Prop() value = this.checked\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true }) disabled: boolean\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>\n\t@Event() smoothlyInput: EventEmitter<Data>\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => void>\n\tcomponentWillLoad(): void | Promise<void> {\n\t\tthis.initialValue = this.checked\n\t\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t\tthis.smoothlyInputLooks.emit(looks => (this.looks = looks))\n\t\tthis.smoothlyInputLoad.emit(() => {\n\t\t\treturn\n\t\t})\n\t\tthis.listener.changed?.(this)\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\t!this.disabled && !this.readonly && (this.checked = false)\n\t}\n\t@Method()\n\tasync listen(property: \"changed\", listener: (parent: Editable) => Promise<void>): Promise<void> {\n\t\tthis.listener[property] = listener\n\t\tlistener(this)\n\t}\n\n\t@Method()\n\tasync edit(editable: boolean): Promise<void> {\n\t\tthis.readonly = !editable\n\t}\n\t@Method()\n\tasync reset(): Promise<void> {\n\t\tthis.checked = this.initialValue\n\t}\n\t@Method()\n\tasync setInitialValue(): Promise<void> {\n\t\tthis.initialValue = this.checked\n\t\tthis.changed = false\n\t}\n\t@Watch(\"checked\")\n\telementCheck(): void {\n\t\tthis.changed = this.initialValue !== this.checked\n\t\tthis.smoothlyInput.emit({ [this.name]: this.checked })\n\t\tthis.listener.changed?.(this)\n\t}\n\tinputHandler() {\n\t\t!this.disabled && !this.readonly && (this.checked = !this.checked)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host onClick={() => this.inputHandler()}>\n\t\t\t\t<input type=\"checkbox\" checked={this.checked} />\n\t\t\t\t{this.checked && <smoothly-icon name=\"checkmark-outline\" size=\"tiny\" />}\n\t\t\t\t<label>\n\t\t\t\t\t<slot />\n\t\t\t\t</label>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,75 @@
+:host {
+	box-sizing: border-box;
+}
+:host[looks="border"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="border"] {
+	border: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+}
+:host[looks="border"][readonly]{
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px;
+}
+:host[looks="line"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="line"] {
+	border-bottom: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+}
+:host[looks="line"][readonly]{
+	border-bottom: rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px;
+}
+:host[looks="grid"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="grid"] {
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px;
+}
+:host[looks="grid"][readonly]{
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px;
+}
+:host[looks="transparent"] {
+	border: none;
+}
+:host[looks="transparent"]:not(:focus-within) {
+	background-color: transparent;
+}
+:host[looks="transparent"]:not(:focus-within) input {
+	background: transparent;
+}
+:host[looks="transparent"]:focus-within {
+	outline: 1px solid rgb(var(--smoothly-color-contrast));
+
+}
+
+
+:host {
+	display: flex;
+	align-items: center;
+	flex-direction: row;
+	position: relative;
+	gap: .5em;
+	padding: .6em;
+	box-sizing: border-box;
+	background-color: rgb(var(--background-color));
+}
+
+smoothly-icon {
+	position: absolute;
+	z-index: 1;
+}
+
+:host input {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	height: 1.2em;
+	width: 1.2em;
+	border: 1px solid black;
+	display: block;
+}
+
+:host:not([readonly]) smoothly-icon,
+:host:not([readonly]) input {
+	cursor: pointer;
+}
+
+:host[disabled] input,
+:host[disabled] smoothly-icon {
+	border-color: rgb(var(--smoothly-color-contrast), 0.3);
+	color: rgb(var(--smoothly-color-contrast), 0.4);
+}

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

@@ -1,9 +1,9 @@
 import { h } from "@stencil/core";
 import { Button } from "../../Button";
 import { SmoothlyForm } from "../../form";
-import { SmoothlyInput } from "..";
-import { Changeable } from "../Changeable";
 import { Clearable } from "../Clearable";
+import { Editable } from "../Editable";
+import { Input } from "../Input";
 export class SmoothlyInputClear {
   constructor() {
     this.color = undefined;
@@ -19,13 +19,18 @@ export class SmoothlyInputClear {
     this.smoothlyInputLoad.emit(parent => {
       if (Clearable.is(parent)) {
         this.parent = parent;
-        if (Changeable.is(parent))
+        if (Editable.Element.type.is(parent)) {
           parent.listen("changed", async (p) => {
-            if (p instanceof SmoothlyForm)
-              this.disabled = !p.changed;
-            if (p instanceof SmoothlyInput)
-              this.display = p.changed;
+            if (Input.is(p)) {
+              this.disabled = p.readonly ? true : !p.value;
+              this.display = p.readonly ? false : Boolean(p.value);
+            }
+            if (p instanceof SmoothlyForm) {
+              this.disabled = p.readonly ? true : Object.values(p.value).filter(val => val).length < 1;
+              this.display = !p.readonly;
+            }
           });
+        }
       }
     });
   }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/clear/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAE/E,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,IAAI,CAAA;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAOxC,MAAM,OAAO,kBAAkB;;;;gBAGS,OAAO;oBACK,KAAK;;;mBAGN,IAAI;gBACJ,OAAO;;EAIzD,KAAK,CAAC,iBAAiB;IACtB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;MACpC,IAAI,SAAS,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;QACzB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACpB,IAAI,UAAU,CAAC,EAAE,CAAC,MAAM,CAAC;UACxB,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,EAAC,CAAC,EAAC,EAAE;YAClC,IAAI,CAAC,YAAY,YAAY;cAC5B,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,OAAO,CAAA;YAC3B,IAAI,CAAC,YAAY,aAAa;cAC7B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,OAAO,CAAA;UAC1B,CAAC,CAAC,CAAA;OACH;IACF,CAAC,CAAC,CAAA;EACH,CAAC;EAED,YAAY;;IACX,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,EAAE,CAAA;EACrB,CAAC;EACD,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, Event, EventEmitter, h, Listen, Prop } from \"@stencil/core\"\nimport { Color, Fill } from \"../../../model\"\nimport { Button } from \"../../Button\"\nimport { SmoothlyForm } from \"../../form\"\nimport { SmoothlyInput } from \"..\"\nimport { Changeable } from \"../Changeable\"\nimport { Clearable } from \"../Clearable\"\n\n@Component({\n\ttag: \"smoothly-input-clear\",\n\tstyleUrl: \"./style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputClear {\n\t@Prop({ reflect: true }) color?: Color\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill = \"clear\"\n\t@Prop({ reflect: true, mutable: true }) disabled = false\n\t@Prop({ reflect: true }) size: \"small\" | \"large\" | \"icon\" | \"flexible\"\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Prop({ reflect: true, mutable: true }) display = true\n\t@Prop({ reflect: true }) type: \"form\" | \"input\" = \"input\"\n\tprivate parent?: Clearable | (Clearable & Changeable)\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\n\tasync componentWillLoad() {\n\t\tthis.smoothlyInputLoad.emit(parent => {\n\t\t\tif (Clearable.is(parent)) {\n\t\t\t\tthis.parent = parent\n\t\t\t\tif (Changeable.is(parent))\n\t\t\t\t\tparent.listen(\"changed\", async p => {\n\t\t\t\t\t\tif (p instanceof SmoothlyForm)\n\t\t\t\t\t\t\tthis.disabled = !p.changed\n\t\t\t\t\t\tif (p instanceof SmoothlyInput)\n\t\t\t\t\t\t\tthis.display = p.changed\n\t\t\t\t\t})\n\t\t\t}\n\t\t})\n\t}\n\t@Listen(\"click\")\n\tclickHandler() {\n\t\tthis.parent?.clear()\n\t}\n\trender() {\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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/clear/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAE/E,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAOhC,MAAM,OAAO,kBAAkB;;;;gBAGS,OAAO;oBACK,KAAK;;;mBAGN,IAAI;gBACJ,OAAO;;EAIzD,KAAK,CAAC,iBAAiB;IACtB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;MACpC,IAAI,SAAS,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;QACzB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;QACpB,IAAI,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;UACrC,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,EAAC,CAAC,EAAC,EAAE;YAClC,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;cAChB,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;cAC5C,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;aACpD;YACD,IAAI,CAAC,YAAY,YAAY,EAAE;cAC9B,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,CAAA;cACxF,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAA;aAC1B;UACF,CAAC,CAAC,CAAA;SACF;OACD;IACF,CAAC,CAAC,CAAA;EACH,CAAC;EAED,YAAY;;IACX,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,EAAE,CAAA;EACrB,CAAC;EACD,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, Event, EventEmitter, h, Listen, Prop } from \"@stencil/core\"\nimport { Color, Fill } from \"../../../model\"\nimport { Button } from \"../../Button\"\nimport { SmoothlyForm } from \"../../form\"\nimport { Clearable } from \"../Clearable\"\nimport { Editable } from \"../Editable\"\nimport { Input } from \"../Input\"\n\n@Component({\n\ttag: \"smoothly-input-clear\",\n\tstyleUrl: \"./style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputClear {\n\t@Prop({ reflect: true }) color?: Color\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill = \"clear\"\n\t@Prop({ reflect: true, mutable: true }) disabled = false\n\t@Prop({ reflect: true }) size: \"small\" | \"large\" | \"icon\" | \"flexible\"\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Prop({ reflect: true, mutable: true }) display = true\n\t@Prop({ reflect: true }) type: \"form\" | \"input\" = \"input\"\n\tprivate parent?: Clearable | (Clearable & Editable)\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\n\tasync componentWillLoad() {\n\t\tthis.smoothlyInputLoad.emit(parent => {\n\t\t\tif (Clearable.is(parent)) {\n\t\t\t\tthis.parent = parent\n\t\t\t\tif (Editable.Element.type.is(parent)) {\n\t\t\t\t\tparent.listen(\"changed\", async p => {\n\t\t\t\t\t\tif (Input.is(p)) {\n\t\t\t\t\t\t\tthis.disabled = p.readonly ? true : !p.value\n\t\t\t\t\t\t\tthis.display = p.readonly ? false : Boolean(p.value)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (p instanceof SmoothlyForm) {\n\t\t\t\t\t\t\tthis.disabled = p.readonly ? true : Object.values(p.value).filter(val => val).length < 1\n\t\t\t\t\t\t\tthis.display = !p.readonly\n\t\t\t\t\t\t}\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}\n\t@Listen(\"click\")\n\tclickHandler() {\n\t\tthis.parent?.clear()\n\t}\n\trender() {\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/clear/style.css

@@ -71,22 +71,22 @@
 
 :host{
 	display: inline-block;
-	margin: 1em;
 	box-sizing: border-box;
 	border-radius: 0.5rem;
 	border: solid 1px;
 	transition: background 150ms ease-in-out;
+	cursor: pointer;
 }
-:host([type=link]){
+:host([type=link]) {
 	display: inline;
 	border: none;
 }
-:host([disabled]){
+:host([disabled]) {
 	opacity: 0.5;
 	pointer-events: none;
 }
 a,
-button{
+button {
 	font-size: 110%;
 	font-weight: 400;
 	border: none;
@@ -100,17 +100,20 @@ button {
 	height: 100%;
 	width: 100%;
 	border-radius: 0.5rem;
-	min-width: 8em;
 	align-items: center;
 }
-:host(:not([size=icon])) > button {
+: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{
+:host([size=icon]) > button {
 	padding: 0.5em;
 }
 :host([shape=rounded]) > button,
-:host([shape=rounded]){
+:host([shape=rounded]) {
 	border-radius: 2rem;
 }
 :host([type=button]) > a {
@@ -118,13 +121,13 @@ button {
 	text-decoration: inherit;
 	width: calc(100% - 0.6em);
 }
-:host([size=small]) > button{
+:host([size=small]) > button {
 	font-size: 100%;
 }
-:host([size=large]) > button{
+:host([size=large]) > button {
 	font-size: 130%;
 }
-:host(:not([size=icon])){
+:host(:not([size=icon])) {
 	min-width: 8em;
 }
 :host([size=flexible]) {
@@ -150,12 +153,12 @@ button {
 	border-radius: 0;
 }
 :host([shape=rounded]) > button,
-:host([shape=rounded]){
+:host([shape=rounded]) {
 	border-radius: 2rem;
 }
 :host(:not([fill=clear]):hover),
 :host(:not([fill=clear]):focus),	
-:host(:not([fill=clear]):active){
+:host(:not([fill=clear]):active) {
 	border-color: rgb(var(--smoothly-color-tint)) !important;
 	background: rgb(var(--smoothly-color-tint)) !important;
 }
@@ -164,19 +167,19 @@ 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){
+: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{
+: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]){
+:host([disabled]) {
 	opacity: 0.5;
 	pointer-events: none;
 }
@@ -190,13 +193,13 @@ button {
 	border-color: rgb(var(--smoothly-color));
 }
 :host([fill=solid]) > button,
-:host([fill=default]) > 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{
+:host([fill=clear]) > button {
 	stroke: rgb(var(--smoothly-color));
 	fill: rgb(var(--smoothly-color));
 	color: rgb(var(--smoothly-color));
@@ -210,10 +213,10 @@ button {
 	border-color: transparent;
 }
 ::slotted(smoothly-icon[slot=start]),
-::slotted(smoothly-icon[slot=end]){
+::slotted(smoothly-icon[slot=end]) {
 	font-size: 0.65em;
 }
-:host([hidden]){
+:host([hidden]) {
 	display: none;
 }