smoothly 1.0.0-alpha.99 → 1.0.0

package/dist/collection/components/{radio-button → input/radio/item}/index.js

@@ -1,29 +1,22 @@
 import { h, Host } from "@stencil/core";
-export class SmoothlyRadioButton {
+export class SmoothlyInputRadioItem {
   constructor() {
-    this.name = undefined;
     this.value = undefined;
-    this.deselectable = undefined;
-    this.decoration = "radio";
+    this.selected = false;
+    this.looks = "plain";
+    this.name = undefined;
+  }
+  componentWillLoad() {
+    this.smoothlyRadioButtonRegister.emit(name => (this.name = name));
+    this.selected && this.inputHandler();
   }
-  radioSelectHandler(event) {
-    var _a, _b;
-    if (this.deselectable || ((_a = this.active) === null || _a === void 0 ? void 0 : _a.value) != event.detail.value) {
-      (_b = this.active) === null || _b === void 0 ? void 0 : _b.select(false);
-      this.active = event.detail;
-      this.smoothlyInput.emit({
-        [this.name]: (this.value = this.active.selected ? this.active.value : undefined),
-      });
-      this.smoothlyChange.emit({
-        [this.name]: (this.value = this.active.selected ? this.active.value : undefined),
-      });
-      this.active.select(this.active.selected);
-    }
+  inputHandler() {
+    this.smoothlySelect.emit({ value: this.value, selected: this.selected, select: s => (this.selected = s) });
   }
   render() {
-    return (h(Host, null, h("slot", null)));
+    return (h(Host, { onClick: () => this.inputHandler() }, h("input", { name: this.name, type: "radio", checked: this.selected }), h("smoothly-icon", { name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "medium", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), h("label", null, h("slot", null))));
   }
-  static get is() { return "smoothly-radio-button"; }
+  static get is() { return "smoothly-input-radio-item"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
@@ -37,12 +30,12 @@ export class SmoothlyRadioButton {
   }
   static get properties() {
     return {
-      "name": {
-        "type": "string",
-        "mutable": false,
+      "value": {
+        "type": "any",
+        "mutable": true,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "any",
+          "resolved": "any",
           "references": {}
         },
         "required": false,
@@ -51,49 +44,56 @@ export class SmoothlyRadioButton {
           "tags": [],
           "text": ""
         },
-        "attribute": "name",
+        "attribute": "value",
         "reflect": false
       },
-      "value": {
-        "type": "any",
+      "selected": {
+        "type": "boolean",
         "mutable": true,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "value",
-        "reflect": false
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "deselectable": {
-        "type": "boolean",
-        "mutable": false,
+      "looks": {
+        "type": "string",
+        "mutable": true,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
+          "original": "Looks",
+          "resolved": "\"border\" | \"grid\" | \"line\" | \"plain\" | \"transparent\"",
+          "references": {
+            "Looks": {
+              "location": "import",
+              "path": "../../Looks"
+            }
+          }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "deselectable",
-        "reflect": true
+        "attribute": "looks",
+        "reflect": true,
+        "defaultValue": "\"plain\""
       },
-      "decoration": {
+      "name": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
-          "original": "\"button\" | \"radio\"",
-          "resolved": "\"button\" | \"radio\"",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -102,16 +102,15 @@ export class SmoothlyRadioButton {
           "tags": [],
           "text": ""
         },
-        "attribute": "decoration",
-        "reflect": true,
-        "defaultValue": "\"radio\""
+        "attribute": "name",
+        "reflect": false
       }
     };
   }
   static get events() {
     return [{
-        "method": "smoothlyInput",
-        "name": "smoothlyInput",
+        "method": "smoothlySelect",
+        "name": "smoothlySelect",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -120,17 +119,18 @@ export class SmoothlyRadioButton {
           "text": ""
         },
         "complexType": {
-          "original": "Record<string, string>",
-          "resolved": "{ [x: string]: string; }",
+          "original": "Selectable",
+          "resolved": "Selectable",
           "references": {
-            "Record": {
-              "location": "global"
+            "Selectable": {
+              "location": "import",
+              "path": "../Selected"
             }
           }
         }
       }, {
-        "method": "smoothlyChange",
-        "name": "smoothlyChange",
+        "method": "smoothlyRadioButtonRegister",
+        "name": "smoothlyRadioButtonRegister",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -139,24 +139,12 @@ export class SmoothlyRadioButton {
           "text": ""
         },
         "complexType": {
-          "original": "Record<string, string>",
-          "resolved": "{ [x: string]: string; }",
-          "references": {
-            "Record": {
-              "location": "global"
-            }
-          }
+          "original": "(name: string) => void",
+          "resolved": "(name: string) => void",
+          "references": {}
         }
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "radioItemSelectInternal",
-        "method": "radioSelectHandler",
-        "target": undefined,
-        "capture": true,
-        "passive": false
-      }];
-  }
+  static get elementRef() { return "element"; }
 }
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/input/radio/item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAS,MAAM,eAAe,CAAA;AAS7F,MAAM,OAAO,sBAAsB;;;oBAGE,KAAK;iBACc,OAAO;;;EAI9D,iBAAiB;IAChB,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAA;IACjE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE,CAAA;EACrC,CAAC;EACD,YAAY;IACX,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,EAAE,CAAC,CAAA;EAC3G,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;MACvC,aAAO,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,GAAI;MAC/D,qBACC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,EAC5D,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAC3C,OAAO,EAAC,QAAQ,GACf;MACF;QACC,eAAQ,CACD,CACF,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Prop, VNode } from \"@stencil/core\"\nimport { Looks } from \"../../Looks\"\nimport { Selectable } from \"../Selected\"\n\n@Component({\n\ttag: \"smoothly-input-radio-item\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyInputRadioItem {\n\t@Element() element: HTMLInputElement\n\t@Prop({ mutable: true }) value: any\n\t@Prop({ mutable: true }) selected = false\n\t@Prop({ mutable: true, reflect: true }) looks: Looks = \"plain\"\n\t@Prop({ mutable: true }) name: string\n\t@Event() smoothlySelect: EventEmitter<Selectable>\n\t@Event() smoothlyRadioButtonRegister: EventEmitter<(name: string) => void>\n\tcomponentWillLoad(): void | Promise<void> {\n\t\tthis.smoothlyRadioButtonRegister.emit(name => (this.name = name))\n\t\tthis.selected && this.inputHandler()\n\t}\n\tinputHandler(): void {\n\t\tthis.smoothlySelect.emit({ value: this.value, selected: this.selected, select: s => (this.selected = s) })\n\t}\n\n\trender(): VNode | VNode[] {\n\t\treturn (\n\t\t\t<Host onClick={() => this.inputHandler()}>\n\t\t\t\t<input name={this.name} type=\"radio\" checked={this.selected} />\n\t\t\t\t<smoothly-icon\n\t\t\t\t\tname={this.selected ? \"checkmark-circle\" : \"ellipse-outline\"}\n\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\tfill=\"outline\"\n\t\t\t\t\tcolor={this.selected ? \"success\" : \"medium\"}\n\t\t\t\t\ttoolTip=\"Select\"\n\t\t\t\t/>\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/radio/item/style.css

@@ -0,0 +1,28 @@
+:host {
+	display: flex;
+	align-items: center;
+	position: relative;
+}
+
+:host:hover > * {
+	cursor: pointer;
+}
+
+:host input:focus-visible + smoothly-icon {
+	outline: 2px solid rgb(var(--smoothly-primary-color));	
+	border-radius: 1px;
+}
+
+:host input {
+	opacity: 0;
+	z-index: 1;
+	width: 1.5em;
+	height: 1.5em;
+	position: absolute;
+	transform: translateX(50%);
+}
+
+:host label {
+	padding: 0 .3em;
+	white-space: nowrap;
+}

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

@@ -0,0 +1,66 @@
+: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 {
+	padding: .4em; 
+	background-color: rgb(var(--background-color,var(--smoothly-color-shade)));
+	display: flex;
+	align-items: center;
+}
+
+:host .input-group {
+	display: flex;
+	width: 100%;
+	align-items: center;
+	gap: 1em
+}
+
+:host .input-group div {
+	align-items: center;
+	display: flex;
+	justify-content: right;
+	width: 100%;
+	flex-wrap: wrap;
+	gap: 1em;
+}
+
+:host .input-group::slotted(p) {
+	margin: 0 0 0 0.2em;
+	white-space: nowrap;
+}