smoothly 1.0.0-alpha.99 → 1.0.0

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

@@ -0,0 +1,226 @@
+import { h, Host, } from "@stencil/core";
+export class SmoothlyInputColor {
+  constructor() {
+    this.value = undefined;
+    this.looks = "plain";
+    this.name = undefined;
+  }
+  componentWillLoad() {
+    this.smoothlyInputLooks.emit(looks => (this.looks = looks));
+    this.smoothlyInput.emit({ [this.name]: this.value });
+    this.smoothlyInputLoad.emit(() => {
+      return;
+    });
+  }
+  smoothlyInputHandler(event) {
+    if (event.target != this.element)
+      event.stopPropagation();
+  }
+  smoothlyInputLooksHandler(event) {
+    if (event.target != this.element)
+      event.stopPropagation();
+  }
+  smoothlyInputLoadHandler(event) {
+    if (event.target != this.element)
+      event.stopPropagation();
+  }
+  async clear() {
+    this.value = undefined;
+  }
+  valueChanged() {
+    this.smoothlyInput.emit({ [this.name]: this.value });
+  }
+  inputHandler(event) {
+    this.value = event.detail[this.name];
+  }
+  render() {
+    return (h(Host, { style: { "--value": this.value } }, h("smoothly-input", { value: this.value, name: this.name, looks: this.looks, onSmoothlyInput: event => this.inputHandler(event) }, "Color", h("div", { slot: "end", class: "color-sample" }))));
+  }
+  static get is() { return "smoothly-input-color"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "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\""
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      }
+    };
+  }
+  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": "Record<string, any>",
+          "resolved": "{ [x: string]: any; }",
+          "references": {
+            "Record": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "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 methods() {
+    return {
+      "clear": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "valueChanged"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "smoothlyInput",
+        "method": "smoothlyInputHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "smoothlyInputLooks",
+        "method": "smoothlyInputLooksHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "smoothlyInputLoad",
+        "method": "smoothlyInputLoadHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/color/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EAET,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EAEJ,KAAK,GACL,MAAM,eAAe,CAAA;AAatB,MAAM,OAAO,kBAAkB;;;iBAGyB,OAAO;;;EAK9D,iBAAiB;IAChB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAA;IAC3D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;IACpD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,EAAE;MAChC,OAAM;IACP,CAAC,CAAC,CAAA;EACH,CAAC;EAED,oBAAoB,CAAC,KAAuC;IAC3D,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO;MAC/B,KAAK,CAAC,eAAe,EAAE,CAAA;EACzB,CAAC;EAED,yBAAyB,CAAC,KAA0C;IACnE,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO;MAC/B,KAAK,CAAC,eAAe,EAAE,CAAA;EACzB,CAAC;EAED,wBAAwB,CAAC,KAAmD;IAC3E,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO;MAC/B,KAAK,CAAC,eAAe,EAAE,CAAA;EACzB,CAAC;EAED,KAAK,CAAC,KAAK;IACV,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;EACvB,CAAC;EAED,YAAY;IACX,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;EACrD,CAAC;EACD,YAAY,CAAC,KAAoD;IAChE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;EACrC,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,EAAE;MACrC,sBACC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;;QAElD,WAAK,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,cAAc,GAAO,CAC3B,CACX,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n\tComponent,\n\tComponentWillLoad,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tMethod,\n\tProp,\n\tVNode,\n\tWatch,\n} from \"@stencil/core\"\nimport { SmoothlyInputCustomEvent } from \"../../../components\"\nimport { Color } from \"../../../model\"\nimport { Clearable } from \"../Clearable\"\nimport { SmoothlyInput } from \"../index\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\n\n@Component({\n\ttag: \"smoothly-input-color\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputColor implements Input, Clearable, ComponentWillLoad {\n\t@Element() element: HTMLElement\n\t@Prop({ mutable: true }) value: string | undefined\n\t@Prop({ mutable: true, reflect: true }) looks: Looks = \"plain\"\n\t@Prop() name: string\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\tcomponentWillLoad(): void | Promise<void> {\n\t\tthis.smoothlyInputLooks.emit(looks => (this.looks = looks))\n\t\tthis.smoothlyInput.emit({ [this.name]: this.value })\n\t\tthis.smoothlyInputLoad.emit(() => {\n\t\t\treturn\n\t\t})\n\t}\n\t@Listen(\"smoothlyInput\")\n\tsmoothlyInputHandler(event: CustomEvent<Record<string, any>>): void {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>): void {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tsmoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyInput) => void>): void {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.value = undefined\n\t}\n\t@Watch(\"value\")\n\tvalueChanged(): void {\n\t\tthis.smoothlyInput.emit({ [this.name]: this.value })\n\t}\n\tinputHandler(event: SmoothlyInputCustomEvent<Record<string, any>>): void {\n\t\tthis.value = event.detail[this.name]\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host style={{ \"--value\": this.value }}>\n\t\t\t\t<smoothly-input\n\t\t\t\t\tvalue={this.value}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tlooks={this.looks}\n\t\t\t\t\tonSmoothlyInput={event => this.inputHandler(event)}>\n\t\t\t\t\tColor\n\t\t\t\t\t<div slot=\"end\" class=\"color-sample\"></div>\n\t\t\t\t</smoothly-input>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,15 @@
+:host {
+	display: flex;
+}
+
+:host smoothly-input { 
+	width: 100% /* Element doesnt take up all its avaliable space without this*/
+}
+
+:host .color-sample {
+	height: 2em;
+	width: 5em;
+	background-color: var(--value);
+	border: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
+	border-radius: 2px;
+}

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

@@ -19,7 +19,7 @@ export class InputDate {
     this.value = undefined;
   }
   onStart(next) {
-    this.valueChanged.emit(next);
+    this.smoothlyValueChange.emit(next);
     this.smoothlyInput.emit({ [this.name]: next });
   }
   smoothlyInputHandler(event) {
@@ -37,11 +37,11 @@ export class InputDate {
   render() {
     var _a;
     return [
-      h("smoothly-input", { color: this.color, name: this.name, onFocus: () => (this.open = !this.open), onClick: () => (this.open = !this.open), disabled: this.disabled, type: "date", value: this.value, looks: "plain", showLabel: this.showLabel, onSmoothlyInput: e => (this.value = e.detail[this.name]) }, h("slot", null)),
+      h("smoothly-input", { color: this.color, name: this.name, onFocus: () => (this.open = !this.open), onClick: () => (this.open = !this.open), disabled: this.disabled, type: "date", value: this.value, looks: this.looks, showLabel: this.showLabel, onSmoothlyInput: e => (this.value = e.detail[this.name]) }, h("slot", null)),
       this.open && !this.disabled
         ? [
           h("div", { onClick: () => (this.open = false) }),
-          h("nav", null, h("div", { class: "arrow" }), h("smoothly-calendar", { doubleInput: false, value: (_a = this.value) !== null && _a !== void 0 ? _a : Date.now(), onValueChanged: event => {
+          h("nav", null, h("div", { class: "arrow" }), h("smoothly-calendar", { doubleInput: false, value: (_a = this.value) !== null && _a !== void 0 ? _a : Date.now(), onSmoothlyValueChange: event => {
               this.value = event.detail;
               event.stopPropagation();
             }, max: this.max, min: this.min })),
@@ -90,7 +90,7 @@ export class InputDate {
         "mutable": true,
         "complexType": {
           "original": "Looks",
-          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\"",
+          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\" | \"transparent\"",
           "references": {
             "Looks": {
               "location": "import",
@@ -247,8 +247,8 @@ export class InputDate {
   }
   static get events() {
     return [{
-        "method": "valueChanged",
-        "name": "valueChanged",
+        "method": "smoothlyValueChange",
+        "name": "smoothlyValueChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -297,7 +297,7 @@ export class InputDate {
         },
         "complexType": {
           "original": "(looks: Looks, color: Color) => void",
-          "resolved": "(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",
@@ -352,7 +352,7 @@ export class InputDate {
         "capture": false,
         "passive": false
       }, {
-        "name": "dateSet",
+        "name": "smoothlyDateSet",
         "method": "dateSetHandler",
         "target": undefined,
         "capture": false,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/date/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, Watch } from \"@stencil/core\"\nimport { Date } from \"isoly\"\nimport { Color } from \"../../../model\"\nimport { Clearable } from \"../Clearable\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\n\n@Component({\n\ttag: \"smoothly-input-date\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class InputDate implements Clearable, Input {\n\t@Element() element: HTMLElement\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ mutable: true }) value?: Date\n\t@Prop({ mutable: true }) open: boolean\n\t@Prop({ mutable: true }) max: Date\n\t@Prop({ mutable: true }) min: Date\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop({ mutable: true }) disabled: boolean\n\t@Event() valueChanged: EventEmitter<Date>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>\n\n\tcomponentWillLoad() {\n\t\tthis.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)))\n\t}\n\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.value = undefined\n\t}\n\t@Watch(\"value\")\n\tonStart(next: Date) {\n\t\tthis.valueChanged.emit(next)\n\t\tthis.smoothlyInput.emit({ [this.name]: next })\n\t}\n\t@Listen(\"smoothlyInput\")\n\tsmoothlyInputHandler(event: CustomEvent<Record<string, any>>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"dateSet\")\n\tdateSetHandler(event: CustomEvent<Date>) {\n\t\tthis.open = false\n\t\tevent.stopPropagation()\n\t}\n\trender() {\n\t\treturn [\n\t\t\t<smoothly-input\n\t\t\t\tcolor={this.color}\n\t\t\t\tname={this.name}\n\t\t\t\tonFocus={() => (this.open = !this.open)}\n\t\t\t\tonClick={() => (this.open = !this.open)}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\ttype=\"date\"\n\t\t\t\tvalue={this.value}\n\t\t\t\tlooks=\"plain\"\n\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\tonSmoothlyInput={e => (this.value = e.detail[this.name])}>\n\t\t\t\t<slot></slot>\n\t\t\t</smoothly-input>,\n\t\t\tthis.open && !this.disabled\n\t\t\t\t? [\n\t\t\t\t\t\t<div onClick={() => (this.open = false)}></div>,\n\t\t\t\t\t\t<nav>\n\t\t\t\t\t\t\t<div class=\"arrow\"></div>\n\t\t\t\t\t\t\t<smoothly-calendar\n\t\t\t\t\t\t\t\tdoubleInput={false}\n\t\t\t\t\t\t\t\tvalue={this.value ?? Date.now()}\n\t\t\t\t\t\t\t\tonValueChanged={event => {\n\t\t\t\t\t\t\t\t\tthis.value = event.detail\n\t\t\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tmax={this.max}\n\t\t\t\t\t\t\t\tmin={this.min}></smoothly-calendar>\n\t\t\t\t\t\t</nav>,\n\t\t\t\t  ]\n\t\t\t\t: [],\n\t\t]\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/date/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACvG,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAW5B,MAAM,OAAO,SAAS;;;iBAGkC,OAAO;;;;;;qBAMzB,IAAI;;;EAMzC,iBAAiB;IAChB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;EAC5G,CAAC;EAGD,KAAK,CAAC,KAAK;IACV,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;EACvB,CAAC;EAED,OAAO,CAAC,IAAU;IACjB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACnC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC,CAAA;EAC/C,CAAC;EAED,oBAAoB,CAAC,KAAuC;IAC3D,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO;MAC/B,KAAK,CAAC,eAAe,EAAE,CAAA;EACzB,CAAC;EAED,yBAAyB,CAAC,KAA0C;IACnE,IAAI,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,OAAO;MAC/B,KAAK,CAAC,eAAe,EAAE,CAAA;EACzB,CAAC;EAED,cAAc,CAAC,KAAwB;IACtC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;IACjB,KAAK,CAAC,eAAe,EAAE,CAAA;EACxB,CAAC;EACD,MAAM;;IACL,OAAO;MACN,sBACC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,EACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACxD,eAAa,CACG;MACjB,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ;QAC1B,CAAC,CAAC;UACA,WAAK,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC,GAAQ;UAC/C;YACC,WAAK,KAAK,EAAC,OAAO,GAAO;YACzB,yBACC,WAAW,EAAE,KAAK,EAClB,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,IAAI,CAAC,GAAG,EAAE,EAC/B,qBAAqB,EAAE,KAAK,CAAC,EAAE;gBAC9B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAA;gBACzB,KAAK,CAAC,eAAe,EAAE,CAAA;cACxB,CAAC,EACD,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,GAAsB,CAC/B;SACL;QACH,CAAC,CAAC,EAAE;KACL,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, Watch } from \"@stencil/core\"\nimport { Date } from \"isoly\"\nimport { Color } from \"../../../model\"\nimport { Clearable } from \"../Clearable\"\nimport { Input } from \"../Input\"\nimport { Looks } from \"../Looks\"\n\n@Component({\n\ttag: \"smoothly-input-date\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class InputDate implements Clearable, Input {\n\t@Element() element: HTMLElement\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ mutable: true }) value?: Date\n\t@Prop({ mutable: true }) open: boolean\n\t@Prop({ mutable: true }) max: Date\n\t@Prop({ mutable: true }) min: Date\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop({ mutable: true }) disabled: boolean\n\t@Event() smoothlyValueChange: EventEmitter<Date>\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>\n\n\tcomponentWillLoad() {\n\t\tthis.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)))\n\t}\n\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.value = undefined\n\t}\n\t@Watch(\"value\")\n\tonStart(next: Date) {\n\t\tthis.smoothlyValueChange.emit(next)\n\t\tthis.smoothlyInput.emit({ [this.name]: next })\n\t}\n\t@Listen(\"smoothlyInput\")\n\tsmoothlyInputHandler(event: CustomEvent<Record<string, any>>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyDateSet\")\n\tdateSetHandler(event: CustomEvent<Date>) {\n\t\tthis.open = false\n\t\tevent.stopPropagation()\n\t}\n\trender() {\n\t\treturn [\n\t\t\t<smoothly-input\n\t\t\t\tcolor={this.color}\n\t\t\t\tname={this.name}\n\t\t\t\tonFocus={() => (this.open = !this.open)}\n\t\t\t\tonClick={() => (this.open = !this.open)}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\ttype=\"date\"\n\t\t\t\tvalue={this.value}\n\t\t\t\tlooks={this.looks}\n\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\tonSmoothlyInput={e => (this.value = e.detail[this.name])}>\n\t\t\t\t<slot></slot>\n\t\t\t</smoothly-input>,\n\t\t\tthis.open && !this.disabled\n\t\t\t\t? [\n\t\t\t\t\t\t<div onClick={() => (this.open = false)}></div>,\n\t\t\t\t\t\t<nav>\n\t\t\t\t\t\t\t<div class=\"arrow\"></div>\n\t\t\t\t\t\t\t<smoothly-calendar\n\t\t\t\t\t\t\t\tdoubleInput={false}\n\t\t\t\t\t\t\t\tvalue={this.value ?? Date.now()}\n\t\t\t\t\t\t\t\tonSmoothlyValueChange={event => {\n\t\t\t\t\t\t\t\t\tthis.value = event.detail\n\t\t\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tmax={this.max}\n\t\t\t\t\t\t\t\tmin={this.min}></smoothly-calendar>\n\t\t\t\t\t\t</nav>,\n\t\t\t\t  ]\n\t\t\t\t: [],\n\t\t]\n\t}\n}\n"]}

package/dist/collection/components/input/date/range/index.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { isoly } from "isoly";
 export class InputDateRange {
   constructor() {
@@ -25,7 +25,7 @@ export class InputDateRange {
       this.smoothlyInput.emit({ [this.name]: { start: this.start, end: this.end } });
   }
   onValue(next) {
-    this.valueChanged.emit(next);
+    this.smoothlyValueChange.emit(next);
   }
   smoothlyInputHandler(event) {
     if (event.target != this.element)
@@ -48,14 +48,10 @@ export class InputDateRange {
   }
   render() {
     var _a;
-    return [
-      h("section", { onClick: () => (this.open = !this.open) }, h("smoothly-input", { type: "date", name: "start", value: this.start, looks: "plain", showLabel: this.showLabel, onSmoothlyInput: e => (this.start = e.detail.start) }, `${this.labelStart}`), h("span", null, "\u2013"), h("smoothly-input", { type: "date", name: "end", value: this.end, looks: "plain", showLabel: this.showLabel, onSmoothlyInput: e => (this.end = e.detail.end) }, `${this.labelEnd}`)),
-      this.open ? h("div", { onClick: () => (this.open = false) }) : [],
-      this.open ? (h("nav", null, h("div", { class: "arrow" }), h("smoothly-calendar", { doubleInput: true, value: (_a = this.value) !== null && _a !== void 0 ? _a : isoly.Date.now(), onValueChanged: event => {
-          this.value = event.detail;
-          event.stopPropagation();
-        }, start: this.start, end: this.end, max: this.max, min: this.min }))) : ([]),
-    ];
+    return (h(Host, { tabindex: 0 }, h("section", { onClick: () => (this.open = !this.open) }, h("smoothly-input", { type: "date", name: "start", value: this.start, looks: this.looks, showLabel: this.showLabel, onSmoothlyInput: e => (this.start = e.detail.start) }, `${this.labelStart}`), h("span", null, "\u2013"), h("smoothly-input", { type: "date", name: "end", value: this.end, looks: this.looks, showLabel: this.showLabel, onSmoothlyInput: e => (this.end = e.detail.end) }, `${this.labelEnd}`)), this.open ? h("div", { onClick: () => (this.open = false) }) : [], this.open ? (h("nav", null, h("div", { class: "arrow" }), h("smoothly-calendar", { doubleInput: true, value: (_a = this.value) !== null && _a !== void 0 ? _a : isoly.Date.now(), onSmoothlyValueChange: event => {
+        this.value = event.detail;
+        event.stopPropagation();
+      }, start: this.start, end: this.end, max: this.max, min: this.min }))) : ([])));
   }
   static get is() { return "smoothly-input-date-range"; }
   static get encapsulation() { return "scoped"; }
@@ -98,7 +94,7 @@ export class InputDateRange {
         "mutable": true,
         "complexType": {
           "original": "Looks",
-          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\"",
+          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\" | \"transparent\"",
           "references": {
             "Looks": {
               "location": "import",
@@ -318,8 +314,8 @@ export class InputDateRange {
   }
   static get events() {
     return [{
-        "method": "valueChanged",
-        "name": "valueChanged",
+        "method": "smoothlyValueChange",
+        "name": "smoothlyValueChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -369,7 +365,7 @@ export class InputDateRange {
         },
         "complexType": {
           "original": "(looks: Looks, color: Color) => void",
-          "resolved": "(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",
@@ -424,19 +420,19 @@ export class InputDateRange {
         "capture": false,
         "passive": false
       }, {
-        "name": "startChanged",
+        "name": "smoothlyStartChange",
         "method": "onStartChanged",
         "target": undefined,
         "capture": false,
         "passive": false
       }, {
-        "name": "endChanged",
+        "name": "smoothlyEndChange",
         "method": "onEndChanged",
         "target": undefined,
         "capture": false,
         "passive": false
       }, {
-        "name": "dateRangeSet",
+        "name": "smoothlyDateRangeSet",
         "method": "onDateRangeSet",
         "target": undefined,
         "capture": false,

package/dist/collection/components/input/date/range/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/input/date/range/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, Watch } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { Clearable } from \"../../Clearable\"\nimport { Input } from \"../../Input\"\nimport { Looks } from \"../../Looks\"\nimport { Color, Data } from \"./../../../../model\"\n\n@Component({\n\ttag: \"smoothly-input-date-range\",\n\tstyleUrl: \"style.scss\",\n\tscoped: true,\n})\nexport class InputDateRange implements Clearable, Input {\n\t@Element() element: HTMLElement\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ mutable: true }) value?: isoly.Date\n\t@Prop({ mutable: true }) start?: isoly.Date\n\t@Prop({ mutable: true }) end?: isoly.Date\n\t@Prop({ mutable: true }) max: isoly.Date\n\t@Prop({ mutable: true }) min: isoly.Date\n\t@Prop({ mutable: true }) open: boolean\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop() labelStart = \"from\"\n\t@Prop() labelEnd = \"to\"\n\t@Event() valueChanged: EventEmitter<isoly.Date>\n\t@Event() smoothlyInput: EventEmitter<Data>\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>\n\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.start = undefined\n\t\tthis.end = undefined\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)))\n\t\tif (this.start && this.end)\n\t\t\tthis.smoothlyInput.emit({ [this.name]: { start: this.start, end: this.end } })\n\t}\n\t@Watch(\"value\")\n\tonValue(next: isoly.Date) {\n\t\tthis.valueChanged.emit(next)\n\t}\n\t@Listen(\"smoothlyInput\")\n\tsmoothlyInputHandler(event: CustomEvent<Record<string, any>>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"startChanged\")\n\tonStartChanged(event: CustomEvent<isoly.Date>) {\n\t\tthis.start = event.detail\n\t}\n\t@Listen(\"endChanged\")\n\tonEndChanged(event: CustomEvent<isoly.Date>) {\n\t\tthis.end = event.detail\n\t}\n\t@Listen(\"dateRangeSet\")\n\tonDateRangeSet(event: CustomEvent<isoly.DateRange>) {\n\t\tthis.open = false\n\t\tevent.stopPropagation()\n\t\tisoly.DateRange.is(event.detail) && this.smoothlyInput.emit({ [this.name]: event.detail })\n\t}\n\trender() {\n\t\treturn [\n\t\t\t<section onClick={() => (this.open = !this.open)}>\n\t\t\t\t<smoothly-input\n\t\t\t\t\ttype=\"date\"\n\t\t\t\t\tname=\"start\"\n\t\t\t\t\tvalue={this.start}\n\t\t\t\t\tlooks=\"plain\"\n\t\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\t\tonSmoothlyInput={e => (this.start = e.detail.start)}>\n\t\t\t\t\t{`${this.labelStart}`}\n\t\t\t\t</smoothly-input>\n\t\t\t\t<span>–</span>\n\t\t\t\t<smoothly-input\n\t\t\t\t\ttype=\"date\"\n\t\t\t\t\tname=\"end\"\n\t\t\t\t\tvalue={this.end}\n\t\t\t\t\tlooks=\"plain\"\n\t\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\t\tonSmoothlyInput={e => (this.end = e.detail.end)}>\n\t\t\t\t\t{`${this.labelEnd}`}\n\t\t\t\t</smoothly-input>\n\t\t\t</section>,\n\t\t\tthis.open ? <div onClick={() => (this.open = false)}></div> : [],\n\t\t\tthis.open ? (\n\t\t\t\t<nav>\n\t\t\t\t\t<div class=\"arrow\"></div>\n\t\t\t\t\t<smoothly-calendar\n\t\t\t\t\t\tdoubleInput={true}\n\t\t\t\t\t\tvalue={this.value ?? isoly.Date.now()}\n\t\t\t\t\t\tonValueChanged={event => {\n\t\t\t\t\t\t\tthis.value = event.detail\n\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tstart={this.start}\n\t\t\t\t\t\tend={this.end}\n\t\t\t\t\t\tmax={this.max}\n\t\t\t\t\t\tmin={this.min}></smoothly-calendar>\n\t\t\t\t</nav>\n\t\t\t) : (\n\t\t\t\t[]\n\t\t\t),\n\t\t]\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/input/date/range/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, Watch } from \"@stencil/core\"\nimport { isoly } from \"isoly\"\nimport { Clearable } from \"../../Clearable\"\nimport { Input } from \"../../Input\"\nimport { Looks } from \"../../Looks\"\nimport { Color, Data } from \"./../../../../model\"\n\n@Component({\n\ttag: \"smoothly-input-date-range\",\n\tstyleUrl: \"style.scss\",\n\tscoped: true,\n})\nexport class InputDateRange implements Clearable, Input {\n\t@Element() element: HTMLElement\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ mutable: true }) value?: isoly.Date\n\t@Prop({ mutable: true }) start?: isoly.Date\n\t@Prop({ mutable: true }) end?: isoly.Date\n\t@Prop({ mutable: true }) max: isoly.Date\n\t@Prop({ mutable: true }) min: isoly.Date\n\t@Prop({ mutable: true }) open: boolean\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop() labelStart = \"from\"\n\t@Prop() labelEnd = \"to\"\n\t@Event() smoothlyValueChange: EventEmitter<isoly.Date>\n\t@Event() smoothlyInput: EventEmitter<Data>\n\t@Event() smoothlyInputLooks: EventEmitter<(looks: Looks, color: Color) => void>\n\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.start = undefined\n\t\tthis.end = undefined\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)))\n\t\tif (this.start && this.end)\n\t\t\tthis.smoothlyInput.emit({ [this.name]: { start: this.start, end: this.end } })\n\t}\n\t@Watch(\"value\")\n\tonValue(next: isoly.Date) {\n\t\tthis.smoothlyValueChange.emit(next)\n\t}\n\t@Listen(\"smoothlyInput\")\n\tsmoothlyInputHandler(event: CustomEvent<Record<string, any>>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks) => void>) {\n\t\tif (event.target != this.element)\n\t\t\tevent.stopPropagation()\n\t}\n\t@Listen(\"smoothlyStartChange\")\n\tonStartChanged(event: CustomEvent<isoly.Date>) {\n\t\tthis.start = event.detail\n\t}\n\t@Listen(\"smoothlyEndChange\")\n\tonEndChanged(event: CustomEvent<isoly.Date>) {\n\t\tthis.end = event.detail\n\t}\n\t@Listen(\"smoothlyDateRangeSet\")\n\tonDateRangeSet(event: CustomEvent<isoly.DateRange>) {\n\t\tthis.open = false\n\t\tevent.stopPropagation()\n\t\tisoly.DateRange.is(event.detail) && this.smoothlyInput.emit({ [this.name]: event.detail })\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host tabindex={0}>\n\t\t\t\t<section onClick={() => (this.open = !this.open)}>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\tname=\"start\"\n\t\t\t\t\t\tvalue={this.start}\n\t\t\t\t\t\tlooks={this.looks}\n\t\t\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\t\t\tonSmoothlyInput={e => (this.start = e.detail.start)}>\n\t\t\t\t\t\t{`${this.labelStart}`}\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t\t<span>–</span>\n\t\t\t\t\t<smoothly-input\n\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\tname=\"end\"\n\t\t\t\t\t\tvalue={this.end}\n\t\t\t\t\t\tlooks={this.looks}\n\t\t\t\t\t\tshowLabel={this.showLabel}\n\t\t\t\t\t\tonSmoothlyInput={e => (this.end = e.detail.end)}>\n\t\t\t\t\t\t{`${this.labelEnd}`}\n\t\t\t\t\t</smoothly-input>\n\t\t\t\t</section>\n\t\t\t\t{this.open ? <div onClick={() => (this.open = false)}></div> : []}\n\t\t\t\t{this.open ? (\n\t\t\t\t\t<nav>\n\t\t\t\t\t\t<div class=\"arrow\"></div>\n\t\t\t\t\t\t<smoothly-calendar\n\t\t\t\t\t\t\tdoubleInput={true}\n\t\t\t\t\t\t\tvalue={this.value ?? isoly.Date.now()}\n\t\t\t\t\t\t\tonSmoothlyValueChange={event => {\n\t\t\t\t\t\t\t\tthis.value = event.detail\n\t\t\t\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstart={this.start}\n\t\t\t\t\t\t\tend={this.end}\n\t\t\t\t\t\t\tmax={this.max}\n\t\t\t\t\t\t\tmin={this.min}></smoothly-calendar>\n\t\t\t\t\t</nav>\n\t\t\t\t) : (\n\t\t\t\t\t[]\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/input/date/range/style.css

@@ -5,14 +5,36 @@
 :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 {
   position: relative;
@@ -20,6 +42,9 @@
   width: fit-content;
   background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
 }
+:host:focus-within smoothly-input {
+  outline: none;
+}
 
 :host > nav {
   position: absolute;

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

@@ -5,14 +5,36 @@
 :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 {
@@ -20,6 +42,9 @@
 	max-width: 100vw;
 	background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
 }
+:host[looks=transparent] smoothly-input {
+	outline: none;
+}
 nav {
 	position: absolute;
 	z-index: 10;