smoothly 1.0.0-alpha.21 → 1.0.0-alpha.210

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

@@ -1,152 +1,92 @@
 :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[looks="border"][readonly]{
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px;
 }
-
-: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 > 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="line"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="line"] {
+	border-bottom: rgb(var(--text-color, var(--smoothly-color-contrast))) solid 1px;
 }
-
-:host([is-open]) > div input {
-  color: rgb(var(--smoothly-medium-color));
+:host[looks="line"][readonly]{
+	border-bottom: rgba(var(--text-color, var(--smoothly-color-contrast)), .1) solid 1px;
 }
-
-: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;
+:host[looks="grid"]::slotted(smoothly-picker-menu smoothly-input),
+:host[looks="grid"] {
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .5) solid .5px;
 }
-
-/* 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;
+:host[looks="grid"][readonly]{
+	border: rgba(var(--text-color, var(--smoothly-color-contrast)), .2) solid .5px;
 }
-
-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[looks="transparent"] {
+	border: none;
 }
-
-:host([has-selection]) label {
-  display: var(--label-display);
+:host[looks="transparent"]:not(:focus-within) {
+	background-color: transparent;
 }
-
-:host([has-selection]) label,
-:host(:focus-within) label {
-  display: none;
+:host[looks="transparent"]:not(:focus-within) input {
+	background: transparent;
 }
+:host[looks="transparent"]:focus-within {
+	outline: 1px solid rgb(var(--smoothly-color-contrast));
 
-: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;
+}
+:host:not([looks=transparent]) .selected::after {
+	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/popup/index.js

@@ -8,20 +8,20 @@ export class SmoothlyPopup {
   onClick() {
     var _a, _b, _c, _d, _e, _f;
     if (this.visible == false) {
-      (_a = this.aside) === null || _a === void 0 ? void 0 : _a.style.setProperty("display", "block");
+      (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.style.setProperty("display", "block");
       this.cssVariables =
-        ((_c = (_b = this.aside) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().right) !== null && _c !== void 0 ? _c : 0) >= window.innerWidth
+        ((_c = (_b = this.popupElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().right) !== null && _c !== void 0 ? _c : 0) >= window.innerWidth
           ? { "--right": "0.1em" }
-          : ((_e = (_d = this.aside) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect().left) !== null && _e !== void 0 ? _e : 0) < 0
+          : ((_e = (_d = this.popupElement) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect().left) !== null && _e !== void 0 ? _e : 0) < 0
             ? { "--left": "0.1em" }
             : this.cssVariables;
-      (_f = this.aside) === null || _f === void 0 ? void 0 : _f.style.removeProperty("display");
+      (_f = this.popupElement) === null || _f === void 0 ? void 0 : _f.style.removeProperty("display");
     }
     this.visible = !this.visible;
     this.popup.emit(this.visible);
   }
   render() {
-    return (h(Host, { style: Object.assign({}, this.cssVariables) }, h("content", { class: "pointer", onClick: () => this.onClick() }, h("slot", null)), h("div", { class: "background", onClick: () => this.onClick() }), h("div", { class: "arrow", onClick: () => this.onClick() }), h("aside", { ref: el => (this.aside = el) }, h("slot", { name: "popup" }))));
+    return (h(Host, { style: Object.assign({}, this.cssVariables) }, h("div", { class: "pointer", onClick: () => this.onClick() }, h("slot", null)), h("div", { class: "background", onClick: () => this.onClick() }), h("div", { class: "arrow", onClick: () => this.onClick() }), h("div", { class: "popup", ref: el => (this.popupElement = el) }, h("slot", { name: "popup" }))));
   }
   static get is() { return "smoothly-popup"; }
   static get encapsulation() { return "scoped"; }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAOpF,MAAM,OAAO,aAAa;;mBACyB,KAAK;qBACY,MAAM;wBACN,EAAE,QAAQ,EAAE,OAAO,EAAE;;EAIhF,OAAO;;IACd,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,EAAE;MAC1B,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;MACjD,IAAI,CAAC,YAAY;QAChB,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,qBAAqB,GAAG,KAAK,mCAAI,CAAC,CAAC,IAAI,MAAM,CAAC,UAAU;UACpE,CAAC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE;UACxB,CAAC,CAAC,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,qBAAqB,GAAG,IAAI,mCAAI,CAAC,CAAC,GAAG,CAAC;YACrD,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE;YACvB,CAAC,CAAC,IAAI,CAAC,YAAY,CAAA;MACrB,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAA;KAC3C;IACD,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAA;IAC5B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC9B,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,oBAAO,IAAI,CAAC,YAAY;MAClC,eAAS,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;QACrD,eAAa,CACJ;MACV,WAAK,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,GAAQ;MAC7D,WAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,GAAQ;MACxD,aAAO,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAClC,YAAM,IAAI,EAAC,OAAO,GAAQ,CACnB,CACF,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { Component, Event, EventEmitter, h, Host, Prop, State } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-popup\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyPopup {\n\t@Prop({ mutable: true, reflect: true }) visible = false\n\t@Prop({ mutable: true, reflect: true }) direction: \"up\" | \"down\" = \"down\"\n\t@State() cssVariables: { \"--left\"?: string; \"--right\"?: string } = { \"--left\": \"0.1em\" }\n\t@Event() popup: EventEmitter<boolean>\n\tprivate aside: HTMLElement | undefined\n\n\tprivate onClick() {\n\t\tif (this.visible == false) {\n\t\t\tthis.aside?.style.setProperty(\"display\", \"block\")\n\t\t\tthis.cssVariables =\n\t\t\t\t(this.aside?.getBoundingClientRect().right ?? 0) >= window.innerWidth\n\t\t\t\t\t? { \"--right\": \"0.1em\" }\n\t\t\t\t\t: (this.aside?.getBoundingClientRect().left ?? 0) < 0\n\t\t\t\t\t? { \"--left\": \"0.1em\" }\n\t\t\t\t\t: this.cssVariables\n\t\t\tthis.aside?.style.removeProperty(\"display\")\n\t\t}\n\t\tthis.visible = !this.visible\n\t\tthis.popup.emit(this.visible)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host style={{ ...this.cssVariables }}>\n\t\t\t\t<content class=\"pointer\" onClick={() => this.onClick()}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</content>\n\t\t\t\t<div class=\"background\" onClick={() => this.onClick()}></div>\n\t\t\t\t<div class=\"arrow\" onClick={() => this.onClick()}></div>\n\t\t\t\t<aside ref={el => (this.aside = el)}>\n\t\t\t\t\t<slot name=\"popup\"></slot>\n\t\t\t\t</aside>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAOpF,MAAM,OAAO,aAAa;;mBACyB,KAAK;qBACY,MAAM;wBACN,EAAE,QAAQ,EAAE,OAAO,EAAE;;EAIhF,OAAO;;IACd,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,EAAE;MAC1B,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;MACxD,IAAI,CAAC,YAAY;QAChB,CAAC,MAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,qBAAqB,GAAG,KAAK,mCAAI,CAAC,CAAC,IAAI,MAAM,CAAC,UAAU;UAC3E,CAAC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE;UACxB,CAAC,CAAC,CAAC,MAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,qBAAqB,GAAG,IAAI,mCAAI,CAAC,CAAC,GAAG,CAAC;YAC5D,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE;YACvB,CAAC,CAAC,IAAI,CAAC,YAAY,CAAA;MACrB,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAA;KAClD;IACD,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAA;IAC5B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC9B,CAAC;EACD,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,oBAAO,IAAI,CAAC,YAAY;MAClC,WAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;QACjD,eAAa,CACR;MACN,WAAK,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,GAAQ;MAC7D,WAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,GAAQ;MACxD,WAAK,KAAK,EAAC,OAAO,EAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACrD,YAAM,IAAI,EAAC,OAAO,GAAQ,CACrB,CACA,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { Component, Event, EventEmitter, h, Host, Prop, State } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-popup\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyPopup {\n\t@Prop({ mutable: true, reflect: true }) visible = false\n\t@Prop({ mutable: true, reflect: true }) direction: \"up\" | \"down\" = \"down\"\n\t@State() cssVariables: { \"--left\"?: string; \"--right\"?: string } = { \"--left\": \"0.1em\" }\n\t@Event() popup: EventEmitter<boolean>\n\tprivate popupElement: HTMLElement | undefined\n\n\tprivate onClick() {\n\t\tif (this.visible == false) {\n\t\t\tthis.popupElement?.style.setProperty(\"display\", \"block\")\n\t\t\tthis.cssVariables =\n\t\t\t\t(this.popupElement?.getBoundingClientRect().right ?? 0) >= window.innerWidth\n\t\t\t\t\t? { \"--right\": \"0.1em\" }\n\t\t\t\t\t: (this.popupElement?.getBoundingClientRect().left ?? 0) < 0\n\t\t\t\t\t? { \"--left\": \"0.1em\" }\n\t\t\t\t\t: this.cssVariables\n\t\t\tthis.popupElement?.style.removeProperty(\"display\")\n\t\t}\n\t\tthis.visible = !this.visible\n\t\tthis.popup.emit(this.visible)\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host style={{ ...this.cssVariables }}>\n\t\t\t\t<div class=\"pointer\" onClick={() => this.onClick()}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"background\" onClick={() => this.onClick()}></div>\n\t\t\t\t<div class=\"arrow\" onClick={() => this.onClick()}></div>\n\t\t\t\t<div class=\"popup\" ref={el => (this.popupElement = el)}>\n\t\t\t\t\t<slot name=\"popup\"></slot>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -5,10 +5,10 @@
 :host[hidden] {
 	display: none;
 }
-:host:not([visible]) aside {
+:host:not([visible]) .popup {
 	display: none;
 }
-:host aside {
+:host .popup {
 	display: inline;
 	position: absolute;
 	padding: 0.3em;
@@ -21,11 +21,11 @@
 	border-radius: 0.6em;
 	z-index: 3;
 }
-:host[direction=down] aside {
+:host[direction=down] .popup {
 	top: 2.2em;
 	box-shadow: 6px 5px 9px -9px black, 5px 6px 9px -9px black;
 }
-:host[direction=up] aside {
+:host[direction=up] .popup {
 	bottom: 2.2em;
 	box-shadow: -6px -5px 9px -9px black, -5px -6px 9px -9px black;
 }

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"]}