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

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

@@ -0,0 +1,242 @@
+import { h } from "@stencil/core";
+import { Button } from "../../Button";
+import { SmoothlyForm } from "../../form";
+import { Clearable } from "../Clearable";
+import { Editable } from "../Editable";
+import { Input } from "../Input";
+export class SmoothlyInputClear {
+  constructor() {
+    this.color = undefined;
+    this.expand = undefined;
+    this.fill = "clear";
+    this.disabled = false;
+    this.size = undefined;
+    this.shape = undefined;
+    this.display = true;
+    this.type = "input";
+  }
+  async componentWillLoad() {
+    this.smoothlyInputLoad.emit(parent => {
+      if (Clearable.is(parent)) {
+        this.parent = parent;
+        if (Editable.Element.type.is(parent)) {
+          parent.listen("changed", async (p) => {
+            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;
+            }
+          });
+        }
+      }
+    });
+  }
+  clickHandler() {
+    var _a;
+    (_a = this.parent) === null || _a === void 0 ? void 0 : _a.clear();
+  }
+  render() {
+    return (h(Button, { disabled: this.disabled, type: "button" }, h("slot", null)));
+  }
+  static get is() { return "smoothly-input-clear"; }
+  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
+      },
+      "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,
+        "defaultValue": "\"clear\""
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"small\" | \"large\" | \"icon\" | \"flexible\"",
+          "resolved": "\"flexible\" | \"icon\" | \"large\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": true
+      },
+      "shape": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"rounded\"",
+          "resolved": "\"rounded\" | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "shape",
+        "reflect": true
+      },
+      "display": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "display",
+        "reflect": true,
+        "defaultValue": "true"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"form\" | \"input\"",
+          "resolved": "\"form\" | \"input\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "\"input\""
+      }
+    };
+  }
+  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/clear/index.js.map

@@ -0,0 +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,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

@@ -0,0 +1,256 @@
+[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(:not([display])) {
+	display: none;
+}
+
+:host() {
+	transition: 0.6s;
+	margin: 0rem;
+	min-width: 0rem;
+}
+
+:host([type="input"]) {
+	line-height: 1;
+}
+
+:host([type="form"]) {
+	margin: 1em 0em;
+}
+
+:host([type="input"]) ::slotted(smoothly-icon) {
+	filter: opacity(60%);
+	font-size: 70%;
+}
+
+:host([type="input"]):hover ::slotted(smoothly-icon) {
+	cursor: pointer;
+	filter: opacity(100%);
+}
+
+:host([type="input"]) button {
+ 	padding: 0rem;
+ 	margin: 0rem;
+ 	min-width: 0rem; 
+}