smoothly 1.0.0-alpha.13 → 1.0.0-alpha.130

package/dist/collection/components/picker/style.css

@@ -1,152 +1,68 @@
 :host {
-  --background-color: var(--smoothly-default-color), 1;
-  --color: var(--smoothly-secondary-contrast);
-  --border-color: var(--smoothly-default-shade), 1;
-  --border-highlight-color: var(--smoothly-secondary-contrast), 1;
-  --label-color: var(--smoothly-secondary-contrast), 0.8;
-  --selected-item-border-radius: 0.25rem;
-  --selected-item-background-color: var(--smoothly-secondary-color), 1;
-  --selected-item-color: 255, 255, 255, 1;
+	box-sizing: border-box;
 }
-
-:host {
-  display: block;
-  position: relative;
-  background-color: rgba(var(--background-color));
-  width: 100%;
-  cursor: pointer;
-  --intergiro-transition: border-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
-  transition: var(--intergiro-transition);
-  border: 1px solid rgb(var(--border-color));
-  margin: 1px;
-  height: 2.5rem;
-  border-radius: 0.25rem;
+:host[looks="border"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="border"] {
+	border: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
 }
-
-:host(:focus-within) {
-  border-color: rgb(var(--smoothly-primary-shade));
-  border-width: 2px;
-  margin: 0px;
-}
-
-:host > div {
-  display: flex;
-  background-color: transparent;
-  min-height: 2.5rem;
-  align-items: center;
-  align-self: center;
-  border: none;
-  max-height: var(--max-height);
+: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 > div .icons > smoothly-icon {
-  flex-shrink: 0;
-  padding-left: 0.6em;
-  stroke: rgba(var(--color), 0.4);
-  fill: rgba(var(--color), 0.4);
-  /* stylelint-disable-next-line declaration-no-important */
-  width: 1.5em !important;
-  /* stylelint-disable-next-line declaration-no-important */
-  height: 1.5em !important;
-}
-:host > div .icons > smoothly-icon:hover {
-  fill: rgba(var(--color), 1);
-}
-:host > div input {
-  width: 100%;
-  background-color: transparent;
-  outline: none;
-  border: none;
-  cursor: pointer;
-  color: rgb(var(--color));
-  padding: 0 0.6rem;
-  font-family: var(--smoothly-font-family);
-  font-size: 1.05rem;
-}
-:host > div input::placeholder {
-  opacity: 1;
-  text-overflow: ellipsis;
+: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([is-open]) > div input {
-  color: rgb(var(--smoothly-medium-color));
-}
-
-:host(:not(:focus-within)[multiple]) ul > li:last-child {
-  /* Remove Input out of the CSS flow Layout. This way input takes up no extra space */
-  position: absolute;
-  pointer-events: none;
-}
-
-/* stylelint-disable selector-attribute-quotes */
-:host([label=""]) ul,
-:host:not([label]) ul,
-:host([label-setting=hide]) ul {
-  padding-top: 0.1rem;
-  padding-bottom: 0.1rem;
-}
-
-label {
-  padding-left: 0.6rem;
-  white-space: nowrap;
-  color: rgba(var(--label-color));
-  transition: var(--intergiro-transition);
-  font-family: var(--smoothly-font-family);
-  pointer-events: none;
-  transform-origin: left;
-}
-
-:host([has-selection]) label {
-  display: var(--label-display);
-}
 
-:host([has-selection]) label,
-:host(:focus-within) label {
-  display: none;
-}
-
-:host(:hover) smoothly-icon[data-arrow],
-:host(:focus-within) smoothly-icon[data-arrow] {
-  stroke: rgba(var(--color), 1);
-}
-
-:host smoothly-icon[data-arrow] {
-  pointer-events: none;
-}
-
-:host smoothly-icon {
-  flex-shrink: 0;
-  width: 1rem;
-  height: 1rem;
-}
-
-:host(:not([is-open])) smoothly-icon.up,
-:host([is-open]) smoothly-icon.down {
-  display: none;
-}
-
-smoothly-icon.search {
-  display: flex;
-  align-self: center;
-  padding-left: 0.8rem;
-}
-
-smoothly-icon.up,
-smoothly-icon.down {
-  display: flex;
-  align-self: center;
-  padding-right: 0.8rem;
-  stroke: rgb(var(--smoothly-primary-shade));
-}
-
-:host smoothly-menu-options {
-  margin-top: 0.5rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  position: absolute;
-  z-index: 1;
+:host {
+	display: flex;
+	position: relative;
+	width: max-content;
+	padding: 1.2em 0.7em 0.2em 0.8em;
+	background-color: rgb(var(--background-color, var(--smoothly-color-shade)));
+}
+:host div.element {
+	display: flex;
+	background-color: inherit;
+}
+smoothly-slot-elements {
+	white-space: nowrap;
+}
+.selected {
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	width: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	margin-right: 2px;
+}
+.selected::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	width: 2ch;
+	background: linear-gradient(90deg, rgba(var(--background-color, var(--smoothly-color-shade)), 0) 0%, rgba(var(--background-color, var(--smoothly-color-shade)), 1) 100%);
+}
+.selected * {
+	display: none;
+}
+.label {
+	position: absolute;
+	left: 0.4rem;
+	top: 0.6rem;
+	color: rgb(var(--text-color, var(--smoothly-color-contrast)));
+	opacity: 0.8;
+	user-select: none;
+	cursor: inherit;
+	transform-origin: top left;
+	transition: transform 100ms ease;
+}
+.selected:not(:empty) + .label {
+	top: 0.4em;
+	transform: scale(0.6);
 }
-
-:host(:not([is-open])) > smoothly-menu-options {
-  /* hide options by default */
-  display: none;
-}

package/dist/collection/components/radio/index.js

@@ -4,7 +4,7 @@ export class SmoothlyRadio {
     this.name = undefined;
     this.value = undefined;
     this.checked = undefined;
-    this.tabIndex = undefined;
+    this.tab = undefined;
   }
   async onInput(e) {
     if (e.target && e.target.value && (this.checked = e.target.checked))
@@ -13,7 +13,7 @@ export class SmoothlyRadio {
   }
   render() {
     return [
-      h("input", { type: "radio", name: this.name, id: this.value, tabindex: this.tabIndex, checked: this.checked, value: this.value, onChange: e => this.onInput(e) }),
+      h("input", { type: "radio", name: this.name, id: this.value, tabindex: this.tab, checked: this.checked, value: this.value, onChange: e => this.onInput(e) }),
       h("label", { htmlFor: this.value }, h("slot", null)),
     ];
   }
@@ -82,7 +82,7 @@ export class SmoothlyRadio {
         "attribute": "checked",
         "reflect": true
       },
-      "tabIndex": {
+      "tab": {
         "type": "number",
         "mutable": false,
         "complexType": {
@@ -96,7 +96,7 @@ export class SmoothlyRadio {
           "tags": [],
           "text": ""
         },
-        "attribute": "tab-index",
+        "attribute": "tab",
         "reflect": false
       }
     };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/radio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAOvE,MAAM,OAAO,aAAa;;;;;;;EAOf,KAAK,CAAC,OAAO,CAAC,CAAU;IACjC,IAAI,CAAC,CAAC,MAAM,IAAK,CAAC,CAAC,MAA2B,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAC;MAC9G,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;IACnE,OAAO,IAAI,CAAA;EACZ,CAAC;EACD,MAAM;IACL,OAAO;MACN,aACC,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAY,CAAC,GACxC;MACF,aAAO,OAAO,EAAE,IAAI,CAAC,KAAK;QACzB,eAAQ,CACD;KACR,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-radio\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyRadio {\n\t@Prop() name: string\n\t@Prop() value: string\n\t@Prop({ mutable: true, reflect: true }) checked: boolean\n\t@Prop() tabIndex: number\n\t@Event() smoothlySelected!: EventEmitter<{ name: string; value: string }>\n\n\tprotected async onInput(e: UIEvent): Promise<boolean> {\n\t\tif (e.target && (e.target as HTMLInputElement).value && (this.checked = (e.target as HTMLInputElement).checked))\n\t\t\tthis.smoothlySelected.emit({ name: this.name, value: this.value })\n\t\treturn true\n\t}\n\trender() {\n\t\treturn [\n\t\t\t<input\n\t\t\t\ttype=\"radio\"\n\t\t\t\tname={this.name}\n\t\t\t\tid={this.value}\n\t\t\t\ttabindex={this.tabIndex}\n\t\t\t\tchecked={this.checked}\n\t\t\t\tvalue={this.value}\n\t\t\t\tonChange={e => this.onInput(e as UIEvent)}\n\t\t\t/>,\n\t\t\t<label htmlFor={this.value}>\n\t\t\t\t<slot />\n\t\t\t</label>,\n\t\t]\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/radio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAOvE,MAAM,OAAO,aAAa;;;;;;;EAOf,KAAK,CAAC,OAAO,CAAC,CAAU;IACjC,IAAI,CAAC,CAAC,MAAM,IAAK,CAAC,CAAC,MAA2B,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO,CAAC;MAC9G,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAA;IACnE,OAAO,IAAI,CAAA;EACZ,CAAC;EACD,MAAM;IACL,OAAO;MACN,aACC,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,QAAQ,EAAE,IAAI,CAAC,GAAG,EAClB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAY,CAAC,GACxC;MACF,aAAO,OAAO,EAAE,IAAI,CAAC,KAAK;QACzB,eAAQ,CACD;KACR,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-radio\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyRadio {\n\t@Prop() name: string\n\t@Prop() value: string\n\t@Prop({ mutable: true, reflect: true }) checked: boolean\n\t@Prop() tab: number\n\t@Event() smoothlySelected!: EventEmitter<{ name: string; value: string }>\n\n\tprotected async onInput(e: UIEvent): Promise<boolean> {\n\t\tif (e.target && (e.target as HTMLInputElement).value && (this.checked = (e.target as HTMLInputElement).checked))\n\t\t\tthis.smoothlySelected.emit({ name: this.name, value: this.value })\n\t\treturn true\n\t}\n\trender() {\n\t\treturn [\n\t\t\t<input\n\t\t\t\ttype=\"radio\"\n\t\t\t\tname={this.name}\n\t\t\t\tid={this.value}\n\t\t\t\ttabindex={this.tab}\n\t\t\t\tchecked={this.checked}\n\t\t\t\tvalue={this.value}\n\t\t\t\tonChange={e => this.onInput(e as UIEvent)}\n\t\t\t/>,\n\t\t\t<label htmlFor={this.value}>\n\t\t\t\t<slot />\n\t\t\t</label>,\n\t\t]\n\t}\n}\n"]}

package/dist/collection/components/radio-button/index.js

@@ -11,9 +11,11 @@ export class SmoothlyRadioButton {
     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.radioButtonSelected.emit({
-        name: this.name,
-        value: (this.value = this.active.selected ? this.active.value : undefined),
+      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);
     }
@@ -40,11 +42,11 @@ export class SmoothlyRadioButton {
         "mutable": false,
         "complexType": {
           "original": "string",
-          "resolved": "string | undefined",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": ""
@@ -108,8 +110,8 @@ export class SmoothlyRadioButton {
   }
   static get events() {
     return [{
-        "method": "radioButtonSelected",
-        "name": "radioButtonSelected",
+        "method": "smoothlyInput",
+        "name": "smoothlyInput",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -118,9 +120,32 @@ export class SmoothlyRadioButton {
           "text": ""
         },
         "complexType": {
-          "original": "{ name: string | undefined; value: any }",
-          "resolved": "{ name: string | undefined; value: any; }",
-          "references": {}
+          "original": "Record<string, string>",
+          "resolved": "{ [x: string]: string; }",
+          "references": {
+            "Record": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "smoothlyChange",
+        "name": "smoothlyChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "Record<string, string>",
+          "resolved": "{ [x: string]: string; }",
+          "references": {
+            "Record": {
+              "location": "global"
+            }
+          }
         }
       }];
   }

package/dist/collection/components/radio-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/radio-button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAQrF,MAAM,OAAO,mBAAmB;;;;;sBAI2B,OAAO;;EAKjE,kBAAkB,CAAC,KAA4B;;IAC9C,IAAI,IAAI,CAAC,YAAY,IAAI,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,KAAI,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE;MAClE,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,CAAC,KAAK,CAAC,CAAA;MAC1B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAA;MAC1B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;QAC7B,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;OAC1E,CAAC,CAAA;MACF,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;KACxC;EACF,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,eAAa,CACP,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Listen, Prop } from \"@stencil/core\"\nimport { Selected } from \"./Selected\"\n\n@Component({\n\ttag: \"smoothly-radio-button\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyRadioButton {\n\t@Prop() name?: string\n\t@Prop({ mutable: true }) value?: any\n\t@Prop({ reflect: true }) deselectable?: boolean\n\t@Prop({ reflect: true }) decoration: \"button\" | \"radio\" = \"radio\"\n\tactive?: Selected\n\t@Event() radioButtonSelected: EventEmitter<{ name: string | undefined; value: any }>\n\n\t@Listen(\"radioItemSelectInternal\", { capture: true })\n\tradioSelectHandler(event: CustomEvent<Selected>) {\n\t\tif (this.deselectable || this.active?.value != event.detail.value) {\n\t\t\tthis.active?.select(false)\n\t\t\tthis.active = event.detail\n\t\t\tthis.radioButtonSelected.emit({\n\t\t\t\tname: this.name,\n\t\t\t\tvalue: (this.value = this.active.selected ? this.active.value : undefined),\n\t\t\t})\n\t\t\tthis.active.select(this.active.selected)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/radio-button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAQrF,MAAM,OAAO,mBAAmB;;;;;sBAI2B,OAAO;;EAKjE,kBAAkB,CAAC,KAA4B;;IAC9C,IAAI,IAAI,CAAC,YAAY,IAAI,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,KAAI,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE;MAClE,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,CAAC,KAAK,CAAC,CAAA;MAC1B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAA;MAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;QACvB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;OAChF,CAAC,CAAA;MACF,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;QACxB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;OAChF,CAAC,CAAA;MACF,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;KACxC;EACF,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,eAAa,CACP,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Listen, Prop } from \"@stencil/core\"\nimport { Selected } from \"./Selected\"\n\n@Component({\n\ttag: \"smoothly-radio-button\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyRadioButton {\n\t@Prop() name: string\n\t@Prop({ mutable: true }) value?: any\n\t@Prop({ reflect: true }) deselectable?: boolean\n\t@Prop({ reflect: true }) decoration: \"button\" | \"radio\" = \"radio\"\n\tactive?: Selected\n\t@Event() smoothlyInput: EventEmitter<Record<string, string>>\n\t@Event() smoothlyChange: EventEmitter<Record<string, string>>\n\t@Listen(\"radioItemSelectInternal\", { capture: true })\n\tradioSelectHandler(event: CustomEvent<Selected>) {\n\t\tif (this.deselectable || this.active?.value != event.detail.value) {\n\t\t\tthis.active?.select(false)\n\t\t\tthis.active = event.detail\n\t\t\tthis.smoothlyInput.emit({\n\t\t\t\t[this.name]: (this.value = this.active.selected ? this.active.value : undefined),\n\t\t\t})\n\t\t\tthis.smoothlyChange.emit({\n\t\t\t\t[this.name]: (this.value = this.active.selected ? this.active.value : undefined),\n\t\t\t})\n\t\t\tthis.active.select(this.active.selected)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/select-demo/index.js

@@ -1,85 +1,7 @@
 import { h } from "@stencil/core";
-import { Notice } from "../../model";
 export class SmoothlySelectDemo {
-  constructor() {
-    this.currencies = ["SEK", "EUR"];
-    this.currency = "SEK";
-  }
-  alertf() {
-    var _a;
-    console.log(this.quantityElement);
-    alert((_a = this.quantityElement) === null || _a === void 0 ? void 0 : _a.value);
-  }
-  handleSelectionChanged(event) {
-    console.log("selectionChanged", event.detail);
-  }
   render() {
     return [
-      h("smoothly-select", { identifier: "currency" }, this.currencies.map(option => this.currency == option ? (h("option", { value: option, selected: true }, option)) : (h("option", { value: option }, option)))),
-      h("smoothly-select", { identifier: "language" }, h("optgroup", { label: "Nordic" }, h("option", { value: "sv" }, "Swedish"), h("option", { value: "da", selected: true }, "Danish"), h("option", { value: "no" }, "Norwegian")), h("optgroup", { label: "Other" }, h("option", { value: "en" }, "English"))),
-      h("smoothly-select", { identifier: "quantity", ref: e => (this.quantityElement = e) }, h("option", { value: "1" }, "1"), h("option", { value: "2" }, "2"), h("option", { value: "3" }, "3")),
-      h("smoothly-input-date", null, "Date"),
-      h("smoothly-input-date", { value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"),
-      h("smoothly-input-date-range", { start: "2022-10-28", end: "2022-11-27", min: "2021-10-10", max: "2022-12-30" }),
-      h("smoothly-input-date-range", { start: "2022-10-28", end: "2022-11-27", min: "2021-10-10", max: "2022-12-30", showLabel: false, style: {
-          "--border-radius": "4px",
-          "--padding": "0 0.75em",
-          "--input-width": "6rem",
-        } }),
-      h("smoothly-selector", { initialPrompt: "Select...", ref: (element) => (this.selectorElement = element) }, h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")),
-      h("button", { onClick: async () => this.selectorElement.reset() }, "reset selector"),
-      h("button", { onClick: () => this.alertf() }, "press here"),
-      h("smoothly-picker", { label: "Filter", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", maxMenuHeight: "20rem", multiple: true, options: [
-          { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
-          { name: "Cat Stevens", value: "cat", aliases: ["moew"], hint: "moew" },
-          { name: "Noble Pig", value: "pig" },
-          { name: "Turtle Wax", value: "turtle", hint: "slow" },
-          { name: "Spider Man", value: "spider" },
-          { name: "Phoenix Order Long Wooord", value: "phoenix" },
-          { name: "Horse Back", value: "horse" },
-          { name: "Unicorn Horn", value: "unicorn" },
-          { name: "Talking Parrot Parrot", value: "parrot" },
-          { name: "Hidden Dragon", value: "dragon" },
-          { name: "Scary Kraken", value: "kraken" },
-        ] }),
-      h("br", null),
-      h("smoothly-picker", { label: "Multiple", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, options: [
-          { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
-          { name: "Cat Stevens", value: "cat", aliases: ["moew"] },
-          { name: "Noble Pig", value: "pig" },
-          { name: "Turtle Wax", value: "turtle" },
-          { name: "Spider Man", value: "spider" },
-          { name: "Phoenix Order Long Wooord", value: "phoenix" },
-          { name: "Horse Back", value: "horse" },
-          { name: "Unicorn Horn", value: "unicorn" },
-          { name: "Talking Parrot Parrot", value: "parrot" },
-          { name: "Hidden Dragon", value: "dragon" },
-          { name: "Scary Kraken", value: "kraken" },
-        ] }),
-      h("br", null),
-      h("smoothly-picker", { label: "Multiple mutable", "max-height": "58px", multiple: true, mutable: true, newOptionLabel: "Invite:", options: [
-          { name: "john@example.com", value: "john@example.com" },
-          { name: "jane@example.com", value: "jane@example.com" },
-          { name: "james@example.com", value: "james@example.com" },
-          { name: "jessie@example.com", value: "jessie@example.com" },
-        ], valueValidator: (email) => email.match(/^\w+@\w+/) ? [true, undefined] : [false, Notice.failed("Incorrectly formatted email")] }),
-      h("br", null),
-      h("smoothly-picker", { label: "Single select", multiple: false, "max-menu-height": "200px", options: [
-          { name: "Dog", value: "dog", aliases: ["WOFF"], hint: "Woof 🐶" },
-          { name: "Cat", value: "cat", aliases: ["moew"] },
-          { name: "Pig", value: "pig" },
-          { name: "Turtle", value: "turtle" },
-          { name: "Spider", value: "spider" },
-          { name: "Phoenix", value: "phoenix" },
-          { name: "Horse", value: "horse" },
-          { name: "Unicorn", value: "unicorn" },
-          { name: "Parrot", value: "parrot" },
-          { name: "Dragon", value: "dragon" },
-          { name: "Kraken", value: "kraken" },
-        ] }),
-      h("br", null),
-      h("smoothly-picker", { label: "readonly", readonly: true, options: [{ name: "readonly", value: "readonly" }] }),
-      h("br", null),
       h("smoothly-tab-switch", null, h("smoothly-tab", { label: "test1", open: true }, "Hello world!"), h("smoothly-tab", { label: "test2" }, "this is a test message!"), h("smoothly-tab", { label: "test3" }, "this is a test message again!")),
     ];
   }
@@ -95,14 +17,5 @@ export class SmoothlySelectDemo {
       "$": ["style.css"]
     };
   }
-  static get listeners() {
-    return [{
-        "name": "selectionChanged",
-        "method": "handleSelectionChanged",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
 }
 //# sourceMappingURL=index.js.map

package/dist/collection/components/select-demo/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/select-demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Listen } from \"@stencil/core\"\nimport { Currency } from \"isoly\"\nimport { Notice } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-select-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlySelectDemo {\n\tprivate quantityElement?: HTMLSmoothlySelectElement\n\tprivate currencies: Currency[] = [\"SEK\", \"EUR\"]\n\tprivate currency: Currency = \"SEK\"\n\tprivate selectorElement: HTMLSmoothlySelectorElement\n\n\tprivate alertf() {\n\t\tconsole.log(this.quantityElement)\n\t\talert(this.quantityElement?.value)\n\t}\n\t@Listen(\"selectionChanged\")\n\thandleSelectionChanged(event: CustomEvent<{ identifier: string; value: string }>) {\n\t\tconsole.log(\"selectionChanged\", event.detail)\n\t}\n\n\trender() {\n\t\treturn [\n\t\t\t<smoothly-select identifier=\"currency\">\n\t\t\t\t{this.currencies.map(option =>\n\t\t\t\t\tthis.currency == option ? (\n\t\t\t\t\t\t<option value={option} selected>\n\t\t\t\t\t\t\t{option}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<option value={option}>{option}</option>\n\t\t\t\t\t)\n\t\t\t\t)}\n\t\t\t</smoothly-select>,\n\t\t\t<smoothly-select identifier=\"language\">\n\t\t\t\t<optgroup label=\"Nordic\">\n\t\t\t\t\t<option value=\"sv\">Swedish</option>\n\t\t\t\t\t<option value=\"da\" selected>\n\t\t\t\t\t\tDanish\n\t\t\t\t\t</option>\n\t\t\t\t\t<option value=\"no\">Norwegian</option>\n\t\t\t\t</optgroup>\n\t\t\t\t<optgroup label=\"Other\">\n\t\t\t\t\t<option value=\"en\">English</option>\n\t\t\t\t</optgroup>\n\t\t\t</smoothly-select>,\n\t\t\t<smoothly-select identifier=\"quantity\" ref={e => (this.quantityElement = e)}>\n\t\t\t\t<option value=\"1\">1</option>\n\t\t\t\t<option value=\"2\">2</option>\n\t\t\t\t<option value=\"3\">3</option>\n\t\t\t</smoothly-select>,\n\t\t\t<smoothly-input-date>Date</smoothly-input-date>,\n\t\t\t<smoothly-input-date value=\"2021-10-28\" max=\"2021-12-30\" min=\"2021-10-10\">\n\t\t\t\tDate\n\t\t\t</smoothly-input-date>,\n\t\t\t<smoothly-input-date-range\n\t\t\t\tstart=\"2022-10-28\"\n\t\t\t\tend=\"2022-11-27\"\n\t\t\t\tmin=\"2021-10-10\"\n\t\t\t\tmax=\"2022-12-30\"></smoothly-input-date-range>,\n\t\t\t<smoothly-input-date-range\n\t\t\t\tstart=\"2022-10-28\"\n\t\t\t\tend=\"2022-11-27\"\n\t\t\t\tmin=\"2021-10-10\"\n\t\t\t\tmax=\"2022-12-30\"\n\t\t\t\tshowLabel={false}\n\t\t\t\tstyle={{\n\t\t\t\t\t\"--border-radius\": \"4px\",\n\t\t\t\t\t\"--padding\": \"0 0.75em\",\n\t\t\t\t\t\"--input-width\": \"6rem\",\n\t\t\t\t}}></smoothly-input-date-range>,\n\t\t\t<smoothly-selector\n\t\t\t\tinitialPrompt=\"Select...\"\n\t\t\t\tref={(element: HTMLSmoothlySelectorElement) => (this.selectorElement = element)}>\n\t\t\t\t<smoothly-item value=\"1\">January</smoothly-item>\n\t\t\t\t<smoothly-item value=\"2\">February</smoothly-item>\n\t\t\t\t<smoothly-item value=\"3\">March</smoothly-item>\n\t\t\t\t<smoothly-item value=\"4\">April</smoothly-item>\n\t\t\t\t<smoothly-item value=\"5\">May</smoothly-item>\n\t\t\t\t<smoothly-item value=\"6\">June</smoothly-item>\n\t\t\t\t<smoothly-item value=\"7\">July</smoothly-item>\n\t\t\t\t<smoothly-item value=\"8\">August</smoothly-item>\n\t\t\t\t<smoothly-item value=\"9\">September</smoothly-item>\n\t\t\t\t<smoothly-item value=\"10\">October</smoothly-item>\n\t\t\t\t<smoothly-item value=\"11\">November</smoothly-item>\n\t\t\t\t<smoothly-item value=\"12\">December</smoothly-item>\n\t\t\t</smoothly-selector>,\n\t\t\t<button onClick={async () => this.selectorElement.reset()}>reset selector</button>,\n\t\t\t<button onClick={() => this.alertf()}>press here</button>,\n\t\t\t<smoothly-picker\n\t\t\t\tlabel=\"Filter\"\n\t\t\t\tempty-menu-label=\"Sorry, we're out of options.\"\n\t\t\t\tmax-height=\"58px\"\n\t\t\t\tmaxMenuHeight=\"20rem\"\n\t\t\t\tmultiple={true}\n\t\t\t\toptions={[\n\t\t\t\t\t{ name: \"Big Dog\", value: \"dog\", aliases: [\"WOFF\"] },\n\t\t\t\t\t{ name: \"Cat Stevens\", value: \"cat\", aliases: [\"moew\"], hint: \"moew\" },\n\t\t\t\t\t{ name: \"Noble Pig\", value: \"pig\" },\n\t\t\t\t\t{ name: \"Turtle Wax\", value: \"turtle\", hint: \"slow\" },\n\t\t\t\t\t{ name: \"Spider Man\", value: \"spider\" },\n\t\t\t\t\t{ name: \"Phoenix Order Long Wooord\", value: \"phoenix\" },\n\t\t\t\t\t{ name: \"Horse Back\", value: \"horse\" },\n\t\t\t\t\t{ name: \"Unicorn Horn\", value: \"unicorn\" },\n\t\t\t\t\t{ name: \"Talking Parrot Parrot\", value: \"parrot\" },\n\t\t\t\t\t{ name: \"Hidden Dragon\", value: \"dragon\" },\n\t\t\t\t\t{ name: \"Scary Kraken\", value: \"kraken\" },\n\t\t\t\t]}></smoothly-picker>,\n\t\t\t<br />,\n\t\t\t<smoothly-picker\n\t\t\t\tlabel=\"Multiple\"\n\t\t\t\tempty-menu-label=\"Sorry, we're out of options.\"\n\t\t\t\tmax-height=\"58px\"\n\t\t\t\tmultiple={true}\n\t\t\t\toptions={[\n\t\t\t\t\t{ name: \"Big Dog\", value: \"dog\", aliases: [\"WOFF\"] },\n\t\t\t\t\t{ name: \"Cat Stevens\", value: \"cat\", aliases: [\"moew\"] },\n\t\t\t\t\t{ name: \"Noble Pig\", value: \"pig\" },\n\t\t\t\t\t{ name: \"Turtle Wax\", value: \"turtle\" },\n\t\t\t\t\t{ name: \"Spider Man\", value: \"spider\" },\n\t\t\t\t\t{ name: \"Phoenix Order Long Wooord\", value: \"phoenix\" },\n\t\t\t\t\t{ name: \"Horse Back\", value: \"horse\" },\n\t\t\t\t\t{ name: \"Unicorn Horn\", value: \"unicorn\" },\n\t\t\t\t\t{ name: \"Talking Parrot Parrot\", value: \"parrot\" },\n\t\t\t\t\t{ name: \"Hidden Dragon\", value: \"dragon\" },\n\t\t\t\t\t{ name: \"Scary Kraken\", value: \"kraken\" },\n\t\t\t\t]}></smoothly-picker>,\n\t\t\t<br />,\n\t\t\t<smoothly-picker\n\t\t\t\tlabel=\"Multiple mutable\"\n\t\t\t\tmax-height=\"58px\"\n\t\t\t\tmultiple={true}\n\t\t\t\tmutable={true}\n\t\t\t\tnewOptionLabel=\"Invite:\"\n\t\t\t\toptions={[\n\t\t\t\t\t{ name: \"john@example.com\", value: \"john@example.com\" },\n\t\t\t\t\t{ name: \"jane@example.com\", value: \"jane@example.com\" },\n\t\t\t\t\t{ name: \"james@example.com\", value: \"james@example.com\" },\n\t\t\t\t\t{ name: \"jessie@example.com\", value: \"jessie@example.com\" },\n\t\t\t\t]}\n\t\t\t\tvalueValidator={(email: string) =>\n\t\t\t\t\temail.match(/^\\w+@\\w+/) ? [true, undefined] : [false, Notice.failed(\"Incorrectly formatted email\")]\n\t\t\t\t}></smoothly-picker>,\n\t\t\t<br />,\n\t\t\t<smoothly-picker\n\t\t\t\tlabel=\"Single select\"\n\t\t\t\tmultiple={false}\n\t\t\t\tmax-menu-height=\"200px\"\n\t\t\t\toptions={[\n\t\t\t\t\t{ name: \"Dog\", value: \"dog\", aliases: [\"WOFF\"], hint: \"Woof 🐶\" },\n\t\t\t\t\t{ name: \"Cat\", value: \"cat\", aliases: [\"moew\"] },\n\t\t\t\t\t{ name: \"Pig\", value: \"pig\" },\n\t\t\t\t\t{ name: \"Turtle\", value: \"turtle\" },\n\t\t\t\t\t{ name: \"Spider\", value: \"spider\" },\n\t\t\t\t\t{ name: \"Phoenix\", value: \"phoenix\" },\n\t\t\t\t\t{ name: \"Horse\", value: \"horse\" },\n\t\t\t\t\t{ name: \"Unicorn\", value: \"unicorn\" },\n\t\t\t\t\t{ name: \"Parrot\", value: \"parrot\" },\n\t\t\t\t\t{ name: \"Dragon\", value: \"dragon\" },\n\t\t\t\t\t{ name: \"Kraken\", value: \"kraken\" },\n\t\t\t\t]}></smoothly-picker>,\n\t\t\t<br />,\n\t\t\t<smoothly-picker\n\t\t\t\tlabel=\"readonly\"\n\t\t\t\treadonly={true}\n\t\t\t\toptions={[{ name: \"readonly\", value: \"readonly\" }]}></smoothly-picker>,\n\t\t\t<br />,\n\t\t\t<smoothly-tab-switch>\n\t\t\t\t<smoothly-tab label=\"test1\" open>\n\t\t\t\t\tHello world!\n\t\t\t\t</smoothly-tab>\n\t\t\t\t<smoothly-tab label=\"test2\">this is a test message!</smoothly-tab>\n\t\t\t\t<smoothly-tab label=\"test3\">this is a test message again!</smoothly-tab>\n\t\t\t</smoothly-tab-switch>,\n\t\t]\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/select-demo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAO5C,MAAM,OAAO,kBAAkB;EAC9B,MAAM;IACL,OAAO;MACN;QACC,oBAAc,KAAK,EAAC,OAAO,EAAC,IAAI,yBAEjB;QACf,oBAAc,KAAK,EAAC,OAAO,8BAAuC;QAClE,oBAAc,KAAK,EAAC,OAAO,oCAA6C,CACnD;KACtB,CAAA;EACF,CAAC;;;;;;;;;CACD","sourcesContent":["import { Component, h } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-select-demo\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlySelectDemo {\n\trender() {\n\t\treturn [\n\t\t\t<smoothly-tab-switch>\n\t\t\t\t<smoothly-tab label=\"test1\" open>\n\t\t\t\t\tHello world!\n\t\t\t\t</smoothly-tab>\n\t\t\t\t<smoothly-tab label=\"test2\">this is a test message!</smoothly-tab>\n\t\t\t\t<smoothly-tab label=\"test3\">this is a test message again!</smoothly-tab>\n\t\t\t</smoothly-tab-switch>,\n\t\t]\n\t}\n}\n"]}

package/dist/collection/components/spinner/style.css

@@ -10,6 +10,7 @@
   display: block;
   stroke: rgb(var(--spinner-color, var(--smoothly-primary-tint)));
   position: absolute;
+  z-index: 4;
   inset: 0;
   width: 100%;
   height: 100%;

package/dist/collection/components/submit/index.js

@@ -1,5 +1,6 @@
 import { h } from "@stencil/core";
 import { Button } from "../Button";
+import { Submittable } from "../input/Submittable";
 export class SmoothlySubmit {
   constructor() {
     this.color = "success";
@@ -9,20 +10,32 @@ export class SmoothlySubmit {
     this.type = "button";
     this.size = undefined;
     this.shape = undefined;
+    this.prevent = true;
+  }
+  async componentWillLoad() {
+    this.smoothlyInputLoad.emit(parent => {
+      if (Submittable.is(parent)) {
+        this.parent = parent;
+      }
+    });
+  }
+  clickHandler() {
+    var _a;
+    (_a = this.parent) === null || _a === void 0 ? void 0 : _a.submit();
   }
   render() {
-    return h(Button, { disabled: this.disabled, type: this.type });
+    return (h(Button, { disabled: this.disabled, type: this.type }, h("slot", null)));
   }
   static get is() { return "smoothly-submit"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
-      "$": ["../button/style.css"]
+      "$": ["./style.css"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["../button/style.css"]
+      "$": ["style.css"]
     };
   }
   static get properties() {
@@ -129,8 +142,8 @@ export class SmoothlySubmit {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"small\" | \"large\" | \"icon\"",
-          "resolved": "\"icon\" | \"large\" | \"small\"",
+          "original": "\"flexible\" | \"small\" | \"large\" | \"icon\"",
+          "resolved": "\"flexible\" | \"icon\" | \"large\" | \"small\"",
           "references": {}
         },
         "required": false,
@@ -158,6 +171,24 @@ export class SmoothlySubmit {
         },
         "attribute": "shape",
         "reflect": true
+      },
+      "prevent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "prevent",
+        "reflect": false,
+        "defaultValue": "true"
       }
     };
   }
@@ -177,6 +208,34 @@ export class SmoothlySubmit {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "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
       }];
   }
 }

package/dist/collection/components/submit/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/submit/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEvE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAOlC,MAAM,OAAO,cAAc;;iBACe,SAAS;;;oBAGd,KAAK;gBACU,QAAQ;;;;EAI3D,MAAM;IACL,OAAO,EAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAW,CAAA;EACnE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from \"@stencil/core\"\nimport { Color, Fill } from \"../../model\"\nimport { Button } from \"../Button\"\n\n@Component({\n\ttag: \"smoothly-submit\",\n\tstyleUrl: \"../button/style.css\",\n\tscoped: true,\n})\nexport class SmoothlySubmit {\n\t@Prop({ reflect: true }) color?: Color = \"success\"\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill\n\t@Prop({ reflect: true }) disabled = false\n\t@Prop({ reflect: true }) type: \"link\" | \"button\" = \"button\"\n\t@Prop({ reflect: true }) size: \"small\" | \"large\" | \"icon\"\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Event() smoothlySubmit: EventEmitter\n\trender() {\n\t\treturn <Button disabled={this.disabled} type={this.type}></Button>\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/submit/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,WAAW,CAAA;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAOlD,MAAM,OAAO,cAAc;;iBACe,SAAS;;;oBAGd,KAAK;gBACU,QAAQ;;;mBAGzC,IAAI;;EAKtB,KAAK,CAAC,iBAAiB;IACtB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;MACpC,IAAI,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE;QAC3B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;OACpB;IACF,CAAC,CAAC,CAAA;EACH,CAAC;EAGD,YAAY;;IACX,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAA;EACtB,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;MAC/C,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 { Submittable } from \"../input/Submittable\"\n\n@Component({\n\ttag: \"smoothly-submit\",\n\tstyleUrl: \"./style.css\",\n\tscoped: true,\n})\nexport class SmoothlySubmit {\n\t@Prop({ reflect: true }) color?: Color = \"success\"\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill\n\t@Prop({ reflect: true }) disabled = false\n\t@Prop({ reflect: true }) type: \"link\" | \"button\" = \"button\"\n\t@Prop({ reflect: true }) size: \"flexible\" | \"small\" | \"large\" | \"icon\"\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Prop() prevent = true\n\t@Event() smoothlySubmit: EventEmitter\n\tprivate parent?: Submittable\n\t@Event() smoothlyInputLoad: EventEmitter<(parent: HTMLElement) => void>\n\n\tasync componentWillLoad() {\n\t\tthis.smoothlyInputLoad.emit(parent => {\n\t\t\tif (Submittable.is(parent)) {\n\t\t\t\tthis.parent = parent\n\t\t\t}\n\t\t})\n\t}\n\n\t@Listen(\"click\")\n\tclickHandler() {\n\t\tthis.parent?.submit()\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Button disabled={this.disabled} type={this.type}>\n\t\t\t\t<slot />\n\t\t\t</Button>\n\t\t)\n\t}\n}\n"]}