smoothly 1.0.0-alpha.99 → 1.0.0

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

@@ -0,0 +1,440 @@
+import { h, Host } from "@stencil/core";
+export class SmoothlyInputRange {
+  constructor() {
+    this.listener = {};
+    this.initialValue = this.value;
+    this.value = undefined;
+    this.looks = "plain";
+    this.changed = false;
+    this.readonly = false;
+    this.min = 0;
+    this.max = 100000;
+    this.name = undefined;
+    this.labelText = undefined;
+    this.step = "any";
+    this.outputSide = "left";
+  }
+  componentWillLoad() {
+    this.smoothlyInputLooks.emit(looks => (this.looks = looks));
+    this.smoothlyInput.emit({ [this.name]: this.value });
+    this.smoothlyInputLoad.emit(() => {
+      return;
+    });
+    !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
+  }
+  async clear() {
+    this.value = undefined;
+  }
+  async listen(property, listener) {
+    this.listener[property] = listener;
+    listener(this);
+  }
+  async edit(editable) {
+    this.readonly = !editable;
+  }
+  async reset() {
+    this.value = this.initialValue;
+  }
+  async setInitialValue() {
+    this.initialValue = this.value;
+    this.valueChanged();
+  }
+  valueChanged() {
+    var _a, _b;
+    this.changed = this.initialValue !== this.value;
+    this.smoothlyInput.emit({ [this.name]: this.value });
+    (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+  }
+  inputHandler(event) {
+    event.target instanceof HTMLInputElement &&
+      (this.value =
+        this.step !== "any" ? event.target.valueAsNumber : Math.round(event.target.valueAsNumber * 100) / 100);
+  }
+  render() {
+    var _a, _b;
+    return (h(Host, { class: { "output-side-right": this.outputSide === "right" } }, h("slot", { name: "start" }), h("div", null, h("label", { htmlFor: this.name }, h("slot", null)), h("output", { htmlFor: this.name }, (_a = this.value) !== null && _a !== void 0 ? _a : "—"), h("input", { name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: this.step, disabled: this.readonly, onInput: event => this.inputHandler(event), value: (_b = this.value) !== null && _b !== void 0 ? _b : this.min })), h("slot", { name: "end" })));
+  }
+  static get is() { return "smoothly-input-range"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number | undefined",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "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\""
+      },
+      "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"
+      },
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "max",
+        "reflect": false,
+        "defaultValue": "100000"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "labelText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-text",
+        "reflect": false
+      },
+      "step": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "number | \"any\"",
+          "resolved": "\"any\" | number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "step",
+        "reflect": false,
+        "defaultValue": "\"any\""
+      },
+      "outputSide": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"right\" | \"left\"",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "output-side",
+        "reflect": false,
+        "defaultValue": "\"left\""
+      }
+    };
+  }
+  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"
+            }
+          }
+        }
+      }, {
+        "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": "value",
+        "methodName": "valueChanged"
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/input/range/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentWillLoad, Event, EventEmitter, h, Host, Method, Prop, VNode, Watch } from \"@stencil/core\"\nimport { Color } 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-range\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputRange implements Input, Clearable, Editable, ComponentWillLoad {\n\tprivate listener: { changed?: (parent: Editable) => Promise<void> } = {}\n\t@Prop({ mutable: true }) value: number | undefined = undefined\n\tprivate initialValue = this.value\n\t@Prop({ reflect: true, mutable: true }) looks: Looks = \"plain\"\n\t@Prop({ mutable: true }) changed = false\n\t@Prop({ reflect: true, mutable: true }) readonly = false\n\t@Prop() min = 0\n\t@Prop() max = 100000\n\t@Prop() name: string\n\t@Prop() labelText?: string\n\t@Prop() step: number | \"any\" = \"any\"\n\t@Prop() outputSide: \"right\" | \"left\" = \"left\"\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\t@Event() smoothlyFormDisable: EventEmitter<(disabled: boolean) => 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\t!this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly))\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tthis.value = undefined\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\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.value = this.initialValue\n\t}\n\t@Method()\n\tasync setInitialValue(): Promise<void> {\n\t\tthis.initialValue = this.value\n\t\tthis.valueChanged()\n\t}\n\t@Watch(\"value\")\n\tvalueChanged(): void {\n\t\tthis.changed = this.initialValue !== this.value\n\t\tthis.smoothlyInput.emit({ [this.name]: this.value })\n\t\tthis.listener.changed?.(this)\n\t}\n\tinputHandler(event: Event): void {\n\t\tevent.target instanceof HTMLInputElement &&\n\t\t\t(this.value =\n\t\t\t\tthis.step !== \"any\" ? event.target.valueAsNumber : Math.round(event.target.valueAsNumber * 100) / 100)\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host class={{ \"output-side-right\": this.outputSide === \"right\" }}>\n\t\t\t\t<slot name=\"start\" />\n\t\t\t\t<div>\n\t\t\t\t\t<label htmlFor={this.name}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</label>\n\t\t\t\t\t<output htmlFor={this.name}>{this.value ?? \"—\"}</output>\n\t\t\t\t\t<input\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tpart=\"range\"\n\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\tmin={this.min}\n\t\t\t\t\t\tmax={this.max}\n\t\t\t\t\t\tstep={this.step}\n\t\t\t\t\t\tdisabled={this.readonly}\n\t\t\t\t\t\tonInput={event => this.inputHandler(event)}\n\t\t\t\t\t\tvalue={this.value ?? this.min}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<slot name=\"end\" />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,154 @@
+: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));
+
+}
+
+
+* {
+	box-sizing: border-box;
+}
+
+:host {
+	position: relative;
+	width: 100%;
+	justify-content: center;
+	align-items: center;
+	display: flex;
+	background-color: rgb(var(--background-color,var(--smoothly-color-shade)));
+	padding: 0 .4em;
+}
+
+:host :nth-child(2) {
+  margin-left: 0.2em;
+}
+
+:host > div {
+	position: relative;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	padding: 1.1em 0 .1em 0;
+}
+
+:host.output-side-right > div {
+	padding: 0;
+}
+
+:host output {
+	min-width: 4em;
+	text-align: center;
+	margin-left:  .5em
+}
+
+:host label {
+	position: absolute;
+	display: block;
+	white-space: nowrap;
+	text-align: center;
+	top: .5em;
+	left: 0;
+	font-size: .6em;
+}
+
+:host.output-side-right label {
+	position: static;
+	font-size: inherit;
+	text-align: left;
+	padding-right: .5em
+} 
+
+:host.output-side-right output {
+	order: 3;
+	margin: 0;
+} 
+
+/*--------------------Reset browserspecific CSS------------------ */
+input[type=range] {
+  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+  width: 100%; /* Specific width is required for Firefox. */
+  background: transparent; /* Otherwise white in Chrome */
+	height: 1.5em;
+	padding: 0 .4em;
+}
+
+/*--------------------THUMB------------------ */
+/* WebKit/Blink */
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 1.2em;
+  width: .7em;
+  border-radius: 20%;
+  background-color: rgb(var(--smoothly-primary-contrast));
+	border: 1px rgb(var(--text-color, var(--smoothly-color-contrast))) solid;
+  cursor: pointer;
+  margin-top: -.45em; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
+}
+
+/* Firefox */
+input[type=range]::-moz-range-thumb {
+  height: 1.2em;
+  width: .7em;
+  border-radius: 20%;
+  background-color: rgb(var(--smoothly-primary-contrast));
+	border: 1px rgb(var(--text-color, var(--smoothly-color-contrast))) solid;
+  cursor: pointer;
+}
+
+/*--------------------SLIDER TRACK------------------ */
+input[type=range]::-webkit-slider-runnable-track {
+  height: .3em;
+  cursor: pointer;
+	background-color: rgb(var(--smoothly-primary-color));
+  border-radius: 20px;
+}
+
+input[type=range]::-moz-range-track {
+  width: 100%;
+  height: .3em;
+  cursor: pointer;
+  background-color: rgb(var(--smoothly-primary-color));
+  border-radius: 20px;
+}
+
+:host(:not([value])) input[type=range]::-webkit-slider-runnable-track  {
+	background-color: rgb(var(--smoothly-primary-tint));
+}
+
+:host(:not([value])) input[type=range]::-moz-range-track {
+	background-color: rgb(var(--smoothly-primary-tint));
+}
+