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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display-demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h } from \"@stencil/core\"\nimport { Notice } from \"../../model\"\n@Component({\n\ttag: \"smoothly-display-demo\",\n})\nexport class SmoothlyDisplayDemo {\n\t@Event() notice: EventEmitter<Notice>\n\tprivate noticeWarning(notice: Notice) {\n\t\tconsole.log(\"emit\", notice)\n\t\tthis.notice.emit(notice)\n\t}\n\trender() {\n\t\treturn [\n\t\t\t<main>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Smoothly display</h2>\n\t\t\t\t\t<smoothly-display-date-time datetime=\"2019-08-15T08:08:17.65Z\"></smoothly-display-date-time>\n\t\t\t\t\t<dl>\n\t\t\t\t\t\t<dt>text</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"text\" value=\"text\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>postal code</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"postal-code\" value=\"752 31\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>password</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"password\" value=\"password\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>email</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"email\" value=\"test@example.com\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>price</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"price\" value=\"13.37\" currency=\"SEK\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>display amount without decimals</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display-amount amount={200} currency=\"SEK\" toInteger={true}></smoothly-display-amount>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>display amount with decimals if they are set, otherwise no decimal</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display-amount amount={200.20} currency=\"SEK\" toInteger={true}></smoothly-display-amount>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>display amount with decimals</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display-amount amount={200.20} currency=\"SEK\"></smoothly-display-amount>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>percent</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"percent\" value=\"42\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>phone</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"phone\" value=\"0101881108\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>card number</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"card-number\" value=\"4111111111111111\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>card expires</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"card-expires\" value=\"7/22\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>card csc</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"card-csc\" value=\"987\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>date</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date\" value=\"2022-07-07\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>date time</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date-time\" format={{year: \"numeric\", month: \"short\", day: \"numeric\", hour: \"numeric\", minute: \"numeric\", second: \"numeric\"}} value=\"2022-07-07T02:02:02Z\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date-time\" format={{year: \"2-digit\", month: \"long\", day: \"2-digit\", hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\"}} value=\"2022-07-07T02:02:02Z\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date-time\" format={{year: \"numeric\", month: \"2-digit\", day: \"2-digit\", hour: \"numeric\", minute: \"numeric\", second: \"numeric\"}} value=\"2022-07-07T12:22:24Z\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date-time\" format={{year: \"numeric\", month: \"numeric\", day: \"numeric\", hour: \"numeric\", minute: \"numeric\", second: \"numeric\"}} value=\"2022-07-07T12:22:24Z\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date-time\" format={{year: \"numeric\", month: \"short\", day: \"numeric\"}} value=\"2022-07-07T00:00+02:00\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date-time\" format={{year: \"2-digit\", month: \"numeric\", day: \"numeric\"}} value=\"2022-07-07T00:00+02:00\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date-time\" format={{year: \"2-digit\", month: \"numeric\", day: \"numeric\", hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\", timeZone:\"+01:00\"}} value=\"2022-07-07T12:15Z\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>Deprecated display date time</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display-date-time datetime=\"2019-01-31T20:01:34\"></smoothly-display-date-time>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>Display amount</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display-amount currency=\"SEK\" amount=\"1289.5\"></smoothly-display-amount>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>Quiet</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-quiet color=\"dark\">-</smoothly-quiet>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t</dl>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Smoothly skeleton</h2>\n\t\t\t\t\t<smoothly-skeleton period={3} distance=\"20rem\" width=\"20rem\"></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton period={3} distance=\"20rem\" color=\"200,200,255\"></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton period={3} distance=\"20rem\" color=\"var(--smoothly-warning-color)\"></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"center\" period={3} distance=\"20rem\" width=\"20rem\"></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"center\" period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"center\" period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"center\" period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"right\" period={3} distance=\"20rem\" width=\"20rem\"></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"right\" period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"right\" period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"right\" period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Smoothly URL encoded</h2>\n\t\t\t\t\t<smoothly-urlencoded data=\"hej=hopp&tjena=moss\"></smoothly-urlencoded>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Smoothly popup</h2>\n\t\t\t\t\t<div style={{display: \"flex\", justifyContent: \"space-between\"}}>\n\t\t\t\t\t\t<smoothly-popup direction=\"down\">\n\t\t\t\t\t\t\tClick for popup\n\t\t\t\t\t\t\t<span slot=\"popup\" color=\"dark\" style={{whiteSpace: \"nowrap\"}}>Some popup stuff that has a lot of text</span>\n\t\t\t\t\t\t</smoothly-popup>\n\t\t\t\t\t\t<smoothly-popup direction=\"down\">\n\t\t\t\t\t\t\tClick for popup\n\t\t\t\t\t\t\t<span slot=\"popup\" color=\"dark\" style={{whiteSpace: \"nowrap\"}}>Some popup with a bunch of text.</span>\n\t\t\t\t\t\t</smoothly-popup>\n\t\t\t\t\t</div>\n\t\t\t\t\t<smoothly-popup>\n\t\t\t\t\t\t<div>Popup, click me</div>\n\t\t\t\t\t\t<div color=\"dark\" slot=\"popup\">\n\t\t\t\t\t\t\t1 line popup\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</smoothly-popup>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t<h2>Test of different kinds of notifier</h2>\n\t\t\t\t\t<button onClick={() => this.noticeWarning(Notice.warn(\"This is a test warning notice.\"))}>warning</button>\n\t\t\t\t\t<button onClick={() => this.noticeWarning(Notice.succeded(\"This is a test success notice.\"))}>success</button>\n\t\t\t\t\t<button onClick={() => this.noticeWarning(Notice.failed(\"This is a test danger notice.\"))}>danger</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\tthis.noticeWarning(\n\t\t\t\t\t\t\t\tNotice.execute(\n\t\t\t\t\t\t\t\t\t\"This is a test execute notice.\",\n\t\t\t\t\t\t\t\t\t() =>\n\t\t\t\t\t\t\t\t\t\tnew Promise<[boolean, string]>(resolve =>\n\t\t\t\t\t\t\t\t\t\t\twindow.setTimeout(() => resolve([true, \"This went great\"]), 3000)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}>\n\t\t\t\t\t\texecute\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\tthis.noticeWarning(\n\t\t\t\t\t\t\t\tNotice.delay(\n\t\t\t\t\t\t\t\t\t\"This is a test delay notice.\",\n\t\t\t\t\t\t\t\t\t() =>\n\t\t\t\t\t\t\t\t\t\tnew Promise<[boolean, string]>(resolve =>\n\t\t\t\t\t\t\t\t\t\t\twindow.setTimeout(() => resolve([true, \"This went great\"]), 3000)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}>\n\t\t\t\t\t\tdelay\n\t\t\t\t\t</button>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Smoothly spinner</h2>\n\t\t\t\t\t<div style={{position: \"relative\", height: \"10em\"}}>Large Spinner<smoothly-spinner active size=\"large\" style={{\"--background-color\": \"255,255,255\", \"--background-opacity\": \"0.2\", \"--spinner-color\": \"0,130,0\", }}></smoothly-spinner></div>\n\t\t\t\t\t<div style={{position: \"relative\", height: \"10em\"}}>Medium Spinner<smoothly-spinner active size=\"medium\"></smoothly-spinner></div>\n\t\t\t\t\t<div style={{position: \"relative\", height: \"10em\"}}>Small Spinner<smoothly-spinner active size=\"small\"></smoothly-spinner></div>\n\t\t\t\t\t<div style={{position: \"absolute\", left: \"500px\", top: \"150px\" }}><smoothly-svg url=\"https://theme.payfunc.com/intergiro/animated-logo.svg\"></smoothly-svg></div>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Smoothly summary</h2>\n\t\t\t\t\t<smoothly-summary color=\"light\" fill=\"clear\" size=\"large\">\n\t\t\t\t\t\t<p slot=\"summary\">Some title</p>\n\t\t\t\t\t\t<p slot=\"content\">Some content</p>\n\t\t\t\t\t</smoothly-summary>\n\t\t\t\t\t<smoothly-summary color=\"light\" fill=\"clear\" size=\"large\">\n\t\t\t\t\t\t<p slot=\"summary\">Some title</p>\n\t\t\t\t\t\t<p slot=\"content\">Some content</p>\n\t\t\t\t\t</smoothly-summary>\n\t\t\t\t\t<smoothly-summary color=\"danger\" fill=\"clear\">\n\t\t\t\t\t\t<div slot=\"summary\" style={{display: \"flex\", gap: \"0.3rem\"}}><span>Person</span><smoothly-icon name=\"person\" color=\"light\" fill=\"clear\" size=\"tiny\"></smoothly-icon></div>\n\t\t\t\t\t\t<p slot=\"content\">Some person information.</p>\n\t\t\t\t\t</smoothly-summary>\n\t\t\t\t\t<smoothly-summary color=\"danger\" fill=\"clear\">\n\t\t\t\t\t\t<p slot=\"summary\">Some other title</p>\n\t\t\t\t\t\t<p slot=\"content\">A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.</p>\n\t\t\t\t\t</smoothly-summary>\n\t\t\t\t</fieldset>\n\t\t\t</main>,\n\t\t]\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/display-demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h } from \"@stencil/core\"\nimport { Notice } from \"../../model\"\n@Component({\n\ttag: \"smoothly-display-demo\",\n})\nexport class SmoothlyDisplayDemo {\n\t@Event() notice: EventEmitter<Notice>\n\tprivate noticeWarning(notice: Notice) {\n\t\tconsole.log(\"emit\", notice)\n\t\tthis.notice.emit(notice)\n\t}\n\trender() {\n\t\treturn [\n\t\t\t<main>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Smoothly display</h2>\n\t\t\t\t\t<dl>\n\t\t\t\t\t\t<dt>text</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"text\" value=\"text\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>postal code</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"postal-code\" value=\"752 31\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>password</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"password\" value=\"password\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>email</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"email\" value=\"test@example.com\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>price</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"price\" value=\"13.37\" currency=\"SEK\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>display amount without decimals</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display-amount amount={200} currency=\"SEK\" toInteger={true}></smoothly-display-amount>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>display amount with decimals if they are set, otherwise no decimal</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display-amount amount={200.20} currency=\"SEK\" toInteger={true}></smoothly-display-amount>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>display amount with decimals</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display-amount amount={200.20} currency=\"SEK\"></smoothly-display-amount>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>percent</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"percent\" value=\"42\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>phone</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"phone\" value=\"0101881108\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>card number</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"card-number\" value=\"4111111111111111\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>card expires</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"card-expires\" value=\"7/22\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>card csc</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"card-csc\" value=\"987\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>date</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date\" value=\"2022-07-07\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>date time</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date-time\" format={{year: \"numeric\", month: \"short\", day: \"numeric\", hour: \"numeric\", minute: \"numeric\", second: \"numeric\"}} value=\"2022-07-07T02:02:02Z\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date-time\" format={{year: \"2-digit\", month: \"long\", day: \"2-digit\", hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\"}} value=\"2022-07-07T02:02:02Z\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date-time\" format={{year: \"numeric\", month: \"2-digit\", day: \"2-digit\", hour: \"numeric\", minute: \"numeric\", second: \"numeric\"}} value=\"2022-07-07T12:22:24Z\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date-time\" format={{year: \"numeric\", month: \"numeric\", day: \"numeric\", hour: \"numeric\", minute: \"numeric\", second: \"numeric\"}} value=\"2022-07-07T12:22:24Z\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date-time\" format={{year: \"numeric\", month: \"short\", day: \"numeric\"}} value=\"2022-07-07T00:00+02:00\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date-time\" format={{year: \"2-digit\", month: \"numeric\", day: \"numeric\"}} value=\"2022-07-07T00:00+02:00\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display type=\"date-time\" format={{year: \"2-digit\", month: \"numeric\", day: \"numeric\", hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\", timeZone:\"Europe/Stockholm\"}} value=\"2022-07-07T12:15Z\"></smoothly-display>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>Deprecated display date time</dt>\n\t\t\t\t\t\t<dt>Display amount</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-display-amount currency=\"SEK\" amount=\"1289.5\"></smoothly-display-amount>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>Quiet</dt>\n\t\t\t\t\t\t<dd>\n\t\t\t\t\t\t\t<smoothly-quiet color=\"dark\">-</smoothly-quiet>\n\t\t\t\t\t\t</dd>\n\t\t\t\t\t\t<dt>Duration</dt>\n\t\t\t\t\t\t<dd><smoothly-display type=\"duration\" value={{hours: 13, minutes: 35}} unit=\"h\" /><smoothly-display type=\"duration\" value={{hours: 8, minutes: 30}} unit=\"\" /><smoothly-display type=\"duration\" value={{hours: 0, minutes: 3}} unit=\" h\" /></dd>\n\t\t\t\t\t</dl>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Smoothly skeleton</h2>\n\t\t\t\t\t<smoothly-skeleton period={3} distance=\"20rem\" width=\"20rem\"></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton period={3} distance=\"20rem\" color=\"200,200,255\"></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton period={3} distance=\"20rem\" color=\"var(--smoothly-warning-color)\"></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"center\" period={3} distance=\"20rem\" width=\"20rem\"></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"center\" period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"center\" period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"center\" period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"right\" period={3} distance=\"20rem\" width=\"20rem\"></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"right\" period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"right\" period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t\t<smoothly-skeleton align=\"right\" period={3} distance=\"20rem\" ></smoothly-skeleton>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Smoothly URL encoded</h2>\n\t\t\t\t\t<smoothly-urlencoded data=\"hej=hopp&tjena=moss\"></smoothly-urlencoded>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Smoothly popup</h2>\n\t\t\t\t\t<div style={{display: \"flex\", justifyContent: \"space-between\"}}>\n\t\t\t\t\t\t<smoothly-popup direction=\"down\">\n\t\t\t\t\t\t\tClick for popup\n\t\t\t\t\t\t\t<span slot=\"popup\" color=\"dark\" style={{whiteSpace: \"nowrap\"}}>Some popup stuff that has a lot of text</span>\n\t\t\t\t\t\t</smoothly-popup>\n\t\t\t\t\t\t<smoothly-popup direction=\"down\">\n\t\t\t\t\t\t\tClick for popup\n\t\t\t\t\t\t\t<span slot=\"popup\" color=\"dark\" style={{whiteSpace: \"nowrap\"}}>Some popup with a bunch of text.</span>\n\t\t\t\t\t\t</smoothly-popup>\n\t\t\t\t\t</div>\n\t\t\t\t\t<smoothly-popup>\n\t\t\t\t\t\t<div>Popup, click me</div>\n\t\t\t\t\t\t<div color=\"dark\" slot=\"popup\">\n\t\t\t\t\t\t\t1 line popup\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</smoothly-popup>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t<h2>Test of different kinds of notifier</h2>\n\t\t\t\t\t<button onClick={() => this.noticeWarning(Notice.warn(\"This is a test warning notice.\"))}>warning</button>\n\t\t\t\t\t<button onClick={() => this.noticeWarning(Notice.succeeded(\"This is a test success notice.\"))}>success</button>\n\t\t\t\t\t<button onClick={() => this.noticeWarning(Notice.failed(\"This is a test danger notice.\"))}>danger</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\tthis.noticeWarning(\n\t\t\t\t\t\t\t\tNotice.execute(\n\t\t\t\t\t\t\t\t\t\"This is a test execute notice.\",\n\t\t\t\t\t\t\t\t\t() =>\n\t\t\t\t\t\t\t\t\t\tnew Promise<[boolean, string]>(resolve =>\n\t\t\t\t\t\t\t\t\t\t\twindow.setTimeout(() => resolve([true, \"This went great\"]), 3000)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}>\n\t\t\t\t\t\texecute\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\tthis.noticeWarning(\n\t\t\t\t\t\t\t\tNotice.delay(\n\t\t\t\t\t\t\t\t\t\"This is a test delay notice.\",\n\t\t\t\t\t\t\t\t\t() =>\n\t\t\t\t\t\t\t\t\t\tnew Promise<[boolean, string]>(resolve =>\n\t\t\t\t\t\t\t\t\t\t\twindow.setTimeout(() => resolve([true, \"This went great\"]), 3000)\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t}>\n\t\t\t\t\t\tdelay\n\t\t\t\t\t</button>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Smoothly spinner</h2>\n\t\t\t\t\t<div style={{position: \"relative\", height: \"10em\"}}>Large Spinner<smoothly-spinner active size=\"large\" style={{\"--background-color\": \"255,255,255\", \"--background-opacity\": \"0.2\", \"--spinner-color\": \"0,130,0\", }}></smoothly-spinner></div>\n\t\t\t\t\t<div style={{position: \"relative\", height: \"10em\"}}>Medium Spinner<smoothly-spinner active size=\"medium\"></smoothly-spinner></div>\n\t\t\t\t\t<div style={{position: \"relative\", height: \"10em\"}}>Small Spinner<smoothly-spinner active size=\"small\"></smoothly-spinner></div>\n\t\t\t\t\t<div style={{position: \"absolute\", left: \"500px\", top: \"150px\" }}><smoothly-svg url=\"https://theme.payfunc.com/intergiro/animated-logo.svg\"></smoothly-svg></div>\n\t\t\t\t</fieldset>\n\t\t\t\t<fieldset>\n\t\t\t\t\t<h2>Smoothly summary</h2>\n\t\t\t\t\t<smoothly-summary color=\"light\" fill=\"clear\" size=\"large\">\n\t\t\t\t\t\t<p slot=\"summary\">Some title</p>\n\t\t\t\t\t\t<p slot=\"content\">Some content</p>\n\t\t\t\t\t</smoothly-summary>\n\t\t\t\t\t<smoothly-summary color=\"light\" fill=\"clear\" size=\"large\">\n\t\t\t\t\t\t<p slot=\"summary\">Some title</p>\n\t\t\t\t\t\t<p slot=\"content\">Some content</p>\n\t\t\t\t\t</smoothly-summary>\n\t\t\t\t\t<smoothly-summary color=\"danger\" fill=\"clear\">\n\t\t\t\t\t\t<div slot=\"summary\" style={{display: \"flex\", gap: \"0.3rem\"}}><span>Person</span><smoothly-icon name=\"person\" color=\"light\" fill=\"clear\" size=\"tiny\"></smoothly-icon></div>\n\t\t\t\t\t\t<p slot=\"content\">Some person information.</p>\n\t\t\t\t\t</smoothly-summary>\n\t\t\t\t\t<smoothly-summary color=\"danger\" fill=\"clear\" open>\n\t\t\t\t\t\t<p slot=\"summary\">Some other title</p>\n\t\t\t\t\t\t<p slot=\"content\">A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.A lot more content, yes please. A lot more content, yes please. A lot more content, yes please. A lot more content, yes please.</p>\n\t\t\t\t\t</smoothly-summary>\n\t\t\t\t</fieldset>\n\t\t\t</main>,\n\t\t]\n\t}\n}\n"]}

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

@@ -33,7 +33,7 @@ export class SmoothlyFilter {
   }
   render() {
     return [
-      h("smoothly-form", { looks: "border" }, h("smoothly-input", { name: "filter", ref: element => (this.freeSearchElement = element), value: selectivelyCreate(this.criteria).stringify(), onKeyDown: () => this.onKeyDown(), placeholder: this.placeholder, readonly: true }, h("section", { slot: "start" }, h("slot", { name: "start" })), h("slot", null), h("section", { slot: "end" }, h("smoothly-button", { size: "flexible", onClick: e => this.clear(e) }, h("smoothly-icon", { class: Object.keys(this.criteria).length >= 1 ? "btn clear" : "btn hidden", name: "close", size: "tiny" })), h("smoothly-button", { size: "flexible", class: "btn", onClick: () => {
+      h("smoothly-form", { looks: "border" }, h("smoothly-input", { name: "filter", ref: element => (this.freeSearchElement = element), value: selectivelyCreate(this.criteria).stringify(), onKeyDown: () => this.onKeyDown(), placeholder: this.placeholder }, h("section", { slot: "start" }, h("slot", { name: "start" })), h("slot", null), h("section", { slot: "end" }, h("smoothly-button", { size: "flexible", onClick: e => this.clear(e) }, h("smoothly-icon", { class: Object.keys(this.criteria).length >= 1 ? "btn clear" : "btn hidden", name: "close", size: "tiny" })), h("smoothly-button", { size: "flexible", class: "btn", onClick: () => {
           this.expanded = !this.expanded;
         } }, this.expanded ? (h("smoothly-icon", { name: "options", size: "small" })) : (h("smoothly-icon", { name: "options-outline", size: "small" })))))),
       h("section", { hidden: !this.expanded, class: this.expanded ? "container arrow-top" : "hidden" }, h("div", { hidden: !this.expanded, class: this.expanded ? "container-wrapper" : "hidden" }, this.expanded && h("slot", { name: "filter" }))),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/filter/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Listen, Method, Prop, State } from \"@stencil/core\"\nimport * as selectively from \"selectively\"\nimport { create as selectivelyCreate, Criteria } from \"selectively\"\nimport { Clearable } from \"./Clearable\"\n\n@Component({\n\ttag: \"smoothly-filter\",\n\tstyleUrl: \"style.css\",\n\tshadow: true,\n})\nexport class SmoothlyFilter {\n\tprivate freeSearchElement?: HTMLSmoothlyInputElement\n\tprivate inputs = new Map<string, Clearable>()\n\t@Prop({ mutable: true }) placeholder: string | undefined\n\t@State() expanded = false\n\t@State() freeSearchValue: string\n\t@Prop({ mutable: true }) criteria: Record<string, Criteria> = {}\n\t@Prop({ mutable: true }) inputValue: Criteria\n\n\t@Listen(\"filter\")\n\tfilterHandler(event: CustomEvent<Record<string, Criteria>>) {\n\t\tevent.stopPropagation()\n\n\t\tif (Clearable.is(event.target)) {\n\t\t\tconst target = event.target\n\t\t\tObject.keys(event.detail).forEach(key => this.inputs.set(key, target))\n\t\t}\n\t\t!this.freeSearchValue\n\t\t\t? this.filters.emit((this.criteria = { ...this.criteria, ...event.detail }))\n\t\t\t: this.filters.emit(\n\t\t\t\t\tselectively.and(\n\t\t\t\t\t\tselectively.any(selectively.includes(this.freeSearchValue)),\n\t\t\t\t\t\t(this.criteria = { ...this.criteria, ...event.detail })\n\t\t\t\t\t)\n\t\t\t  )\n\t}\n\t@Event() filters: EventEmitter<Criteria>\n\tonKeyDown() {\n\t\tthis.freeSearchValue = this.freeSearchElement?.value\n\t\tthis.inputValue = selectively.includes(this.freeSearchValue)\n\t\tthis.filters.emit(selectively.any(this.inputValue))\n\t}\n\n\t@Method()\n\tasync clear(event: MouseEvent): Promise<void> {\n\t\tnew Set(this.inputs.values()).forEach(input => input.clear())\n\t\tthis.filters.emit((this.criteria = {}))\n\t}\n\n\trender() {\n\t\treturn [\n\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t<smoothly-input\n\t\t\t\t\tname=\"filter\"\n\t\t\t\t\tref={element => (this.freeSearchElement = element)}\n\t\t\t\t\tvalue={selectivelyCreate(this.criteria).stringify()}\n\t\t\t\t\tonKeyDown={() => this.onKeyDown()}\n\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\treadonly>\n\t\t\t\t\t<section slot=\"start\">\n\t\t\t\t\t\t<slot name=\"start\" />\n\t\t\t\t\t</section>\n\t\t\t\t\t<slot />\n\t\t\t\t\t<section slot=\"end\">\n\t\t\t\t\t\t<smoothly-button size=\"flexible\" onClick={e => this.clear(e)}>\n\t\t\t\t\t\t\t<smoothly-icon\n\t\t\t\t\t\t\t\tclass={Object.keys(this.criteria).length >= 1 ? \"btn clear\" : \"btn hidden\"}\n\t\t\t\t\t\t\t\tname=\"close\"\n\t\t\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\t\tsize=\"flexible\"\n\t\t\t\t\t\t\tclass=\"btn\"\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tthis.expanded = !this.expanded\n\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t{this.expanded ? (\n\t\t\t\t\t\t\t\t<smoothly-icon name=\"options\" size=\"small\" />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<smoothly-icon name=\"options-outline\" size=\"small\" />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t</section>\n\t\t\t\t</smoothly-input>\n\t\t\t</smoothly-form>,\n\n\t\t\t<section hidden={!this.expanded} class={this.expanded ? \"container arrow-top\" : \"hidden\"}>\n\t\t\t\t<div hidden={!this.expanded} class={this.expanded ? \"container-wrapper\" : \"hidden\"}>\n\t\t\t\t\t{this.expanded && <slot name=\"filter\" />}\n\t\t\t\t</div>\n\t\t\t</section>,\n\t\t]\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/filter/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Listen, Method, Prop, State } from \"@stencil/core\"\nimport * as selectively from \"selectively\"\nimport { create as selectivelyCreate, Criteria } from \"selectively\"\nimport { Clearable } from \"./Clearable\"\n\n@Component({\n\ttag: \"smoothly-filter\",\n\tstyleUrl: \"style.css\",\n\tshadow: true,\n})\nexport class SmoothlyFilter {\n\tprivate freeSearchElement?: HTMLSmoothlyInputElement\n\tprivate inputs = new Map<string, Clearable>()\n\t@Prop({ mutable: true }) placeholder: string | undefined\n\t@State() expanded = false\n\t@State() freeSearchValue: string\n\t@Prop({ mutable: true }) criteria: Record<string, Criteria> = {}\n\t@Prop({ mutable: true }) inputValue: Criteria\n\n\t@Listen(\"filter\")\n\tfilterHandler(event: CustomEvent<Record<string, Criteria>>) {\n\t\tevent.stopPropagation()\n\n\t\tif (Clearable.is(event.target)) {\n\t\t\tconst target = event.target\n\t\t\tObject.keys(event.detail).forEach(key => this.inputs.set(key, target))\n\t\t}\n\t\t!this.freeSearchValue\n\t\t\t? this.filters.emit((this.criteria = { ...this.criteria, ...event.detail }))\n\t\t\t: this.filters.emit(\n\t\t\t\t\tselectively.and(\n\t\t\t\t\t\tselectively.any(selectively.includes(this.freeSearchValue)),\n\t\t\t\t\t\t(this.criteria = { ...this.criteria, ...event.detail })\n\t\t\t\t\t)\n\t\t\t  )\n\t}\n\t@Event() filters: EventEmitter<Criteria>\n\tonKeyDown() {\n\t\tthis.freeSearchValue = this.freeSearchElement?.value\n\t\tthis.inputValue = selectively.includes(this.freeSearchValue)\n\t\tthis.filters.emit(selectively.any(this.inputValue))\n\t}\n\n\t@Method()\n\tasync clear(event: MouseEvent): Promise<void> {\n\t\tnew Set(this.inputs.values()).forEach(input => input.clear())\n\t\tthis.filters.emit((this.criteria = {}))\n\t}\n\n\trender() {\n\t\treturn [\n\t\t\t<smoothly-form looks=\"border\">\n\t\t\t\t<smoothly-input\n\t\t\t\t\tname=\"filter\"\n\t\t\t\t\tref={element => (this.freeSearchElement = element)}\n\t\t\t\t\tvalue={selectivelyCreate(this.criteria).stringify()}\n\t\t\t\t\tonKeyDown={() => this.onKeyDown()}\n\t\t\t\t\tplaceholder={this.placeholder}>\n\t\t\t\t\t<section slot=\"start\">\n\t\t\t\t\t\t<slot name=\"start\" />\n\t\t\t\t\t</section>\n\t\t\t\t\t<slot />\n\t\t\t\t\t<section slot=\"end\">\n\t\t\t\t\t\t<smoothly-button size=\"flexible\" onClick={e => this.clear(e)}>\n\t\t\t\t\t\t\t<smoothly-icon\n\t\t\t\t\t\t\t\tclass={Object.keys(this.criteria).length >= 1 ? \"btn clear\" : \"btn hidden\"}\n\t\t\t\t\t\t\t\tname=\"close\"\n\t\t\t\t\t\t\t\tsize=\"tiny\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\t\tsize=\"flexible\"\n\t\t\t\t\t\t\tclass=\"btn\"\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tthis.expanded = !this.expanded\n\t\t\t\t\t\t\t}}>\n\t\t\t\t\t\t\t{this.expanded ? (\n\t\t\t\t\t\t\t\t<smoothly-icon name=\"options\" size=\"small\" />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<smoothly-icon name=\"options-outline\" size=\"small\" />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t</section>\n\t\t\t\t</smoothly-input>\n\t\t\t</smoothly-form>,\n\n\t\t\t<section hidden={!this.expanded} class={this.expanded ? \"container arrow-top\" : \"hidden\"}>\n\t\t\t\t<div hidden={!this.expanded} class={this.expanded ? \"container-wrapper\" : \"hidden\"}>\n\t\t\t\t\t{this.expanded && <slot name=\"filter\" />}\n\t\t\t\t</div>\n\t\t\t</section>,\n\t\t]\n\t}\n}\n"]}

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

@@ -3,7 +3,7 @@ import * as selectively from "selectively";
 export class SmoothlyFilterInput {
   constructor() {
     this.name = undefined;
-    this.value = undefined;
+    this.value = "";
     this.type = "text";
     this.required = false;
     this.minLength = 0;
@@ -20,6 +20,7 @@ export class SmoothlyFilterInput {
   }
   onFilter() {
     this.value = this.smoothlyInput.value;
+    let result = "";
     let criteria;
     switch (this.comparison) {
       case "equals":
@@ -42,7 +43,11 @@ export class SmoothlyFilterInput {
         criteria = selectively.includes(this.value);
         break;
     }
-    this.filter.emit({ [this.name]: criteria });
+    result = this.name
+      .split(".")
+      .reverse()
+      .reduce((previousValue, currentValue) => ({ [currentValue]: previousValue }), criteria);
+    this.filter.emit(result);
   }
   async clear() {
     this.value = "";
@@ -50,7 +55,8 @@ export class SmoothlyFilterInput {
   render() {
     return [
       h("smoothly-input", { name: this.name, ref: (element) => (this.smoothlyInput = element), value: this.value, onKeyDown: () => this.onFilter(), onSmoothlyInput: e => {
-          this.value = e.detail.value;
+          var _a;
+          this.value = (_a = e.detail.value) !== null && _a !== void 0 ? _a : "";
         }, placeholder: this.placeholder }, h("div", { slot: "start" }, h("slot", { name: "start" })), h("slot", null)),
     ];
   }
@@ -86,11 +92,11 @@ export class SmoothlyFilterInput {
         "reflect": true
       },
       "value": {
-        "type": "any",
+        "type": "string",
         "mutable": true,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -100,7 +106,8 @@ export class SmoothlyFilterInput {
           "text": ""
         },
         "attribute": "value",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"\""
       },
       "type": {
         "type": "string",
@@ -279,7 +286,7 @@ export class SmoothlyFilterInput {
           "text": ""
         },
         "attribute": "readonly",
-        "reflect": false,
+        "reflect": true,
         "defaultValue": "false"
       },
       "currency": {
@@ -287,7 +294,7 @@ export class SmoothlyFilterInput {
         "mutable": false,
         "complexType": {
           "original": "Currency",
-          "resolved": "\"BTN\" | \"MKD\" | \"CHE\" | \"AED\" | \"AFN\" | \"ALL\" | \"AMD\" | \"ANG\" | \"AOA\" | \"ARS\" | \"AUD\" | \"AWG\" | \"AZN\" | \"BAM\" | \"BBD\" | \"BDT\" | \"BGN\" | \"BHD\" | \"BIF\" | \"BMD\" | \"BND\" | \"BOB\" | \"BOV\" | \"BRL\" | \"BSD\" | \"BWP\" | \"BYN\" | \"BZD\" | \"CAD\" | \"CDF\" | \"CHF\" | \"CHW\" | \"CLF\" | \"CLP\" | \"CNY\" | \"COP\" | \"COU\" | \"CRC\" | \"CUC\" | \"CUP\" | \"CVE\" | \"CZK\" | \"DJF\" | \"DKK\" | \"DOP\" | \"DZD\" | \"EGP\" | \"ERN\" | \"ETB\" | \"EUR\" | \"FJD\" | \"FKP\" | \"GBP\" | \"GEL\" | \"GHS\" | \"GIP\" | \"GMD\" | \"GNF\" | \"GTQ\" | \"GYD\" | \"HKD\" | \"HNL\" | \"HRK\" | \"HTG\" | \"HUF\" | \"IDR\" | \"ILS\" | \"INR\" | \"IQD\" | \"IRR\" | \"ISK\" | \"JMD\" | \"JOD\" | \"JPY\" | \"KES\" | \"KGS\" | \"KHR\" | \"KMF\" | \"KPW\" | \"KRW\" | \"KWD\" | \"KYD\" | \"KZT\" | \"LAK\" | \"LBP\" | \"LKR\" | \"LRD\" | \"LSL\" | \"LYD\" | \"MAD\" | \"MDL\" | \"MGA\" | \"MMK\" | \"MNT\" | \"MOP\" | \"MRU\" | \"MUR\" | \"MVR\" | \"MWK\" | \"MXN\" | \"MXV\" | \"MYR\" | \"MZN\" | \"NAD\" | \"NGN\" | \"NIO\" | \"NOK\" | \"NPR\" | \"NZD\" | \"OMR\" | \"PAB\" | \"PEN\" | \"PGK\" | \"PHP\" | \"PKR\" | \"PLN\" | \"PYG\" | \"QAR\" | \"RON\" | \"RSD\" | \"RUB\" | \"RWF\" | \"SAR\" | \"SBD\" | \"SCR\" | \"SDG\" | \"SEK\" | \"SGD\" | \"SHP\" | \"SLL\" | \"SOS\" | \"SRD\" | \"SSP\" | \"STN\" | \"SVC\" | \"SYP\" | \"SZL\" | \"THB\" | \"TJS\" | \"TMT\" | \"TND\" | \"TOP\" | \"TRY\" | \"TTD\" | \"TWD\" | \"TZS\" | \"UAH\" | \"UGX\" | \"USD\" | \"USN\" | \"UYI\" | \"UYU\" | \"UYW\" | \"UZS\" | \"VES\" | \"VND\" | \"VUV\" | \"WST\" | \"XAF\" | \"XAG\" | \"XAU\" | \"XBA\" | \"XBB\" | \"XBC\" | \"XBD\" | \"XCD\" | \"XDR\" | \"XOF\" | \"XPD\" | \"XPF\" | \"XPT\" | \"XSU\" | \"XTS\" | \"XUA\" | \"XXX\" | \"YER\" | \"ZAR\" | \"ZMW\" | \"ZWL\" | undefined",
+          "resolved": "\"BTN\" | \"CHE\" | \"MKD\" | \"AED\" | \"AFN\" | \"ALL\" | \"AMD\" | \"ANG\" | \"AOA\" | \"ARS\" | \"AUD\" | \"AWG\" | \"AZN\" | \"BAM\" | \"BBD\" | \"BDT\" | \"BGN\" | \"BHD\" | \"BIF\" | \"BMD\" | \"BND\" | \"BOB\" | \"BOV\" | \"BRL\" | \"BSD\" | \"BWP\" | \"BYN\" | \"BZD\" | \"CAD\" | \"CDF\" | \"CHF\" | \"CHW\" | \"CLF\" | \"CLP\" | \"CNY\" | \"COP\" | \"COU\" | \"CRC\" | \"CUC\" | \"CUP\" | \"CVE\" | \"CZK\" | \"DJF\" | \"DKK\" | \"DOP\" | \"DZD\" | \"EGP\" | \"ERN\" | \"ETB\" | \"EUR\" | \"FJD\" | \"FKP\" | \"GBP\" | \"GEL\" | \"GHS\" | \"GIP\" | \"GMD\" | \"GNF\" | \"GTQ\" | \"GYD\" | \"HKD\" | \"HNL\" | \"HRK\" | \"HTG\" | \"HUF\" | \"IDR\" | \"ILS\" | \"INR\" | \"IQD\" | \"IRR\" | \"ISK\" | \"JMD\" | \"JOD\" | \"JPY\" | \"KES\" | \"KGS\" | \"KHR\" | \"KMF\" | \"KPW\" | \"KRW\" | \"KWD\" | \"KYD\" | \"KZT\" | \"LAK\" | \"LBP\" | \"LKR\" | \"LRD\" | \"LSL\" | \"LYD\" | \"MAD\" | \"MDL\" | \"MGA\" | \"MMK\" | \"MNT\" | \"MOP\" | \"MRU\" | \"MUR\" | \"MVR\" | \"MWK\" | \"MXN\" | \"MXV\" | \"MYR\" | \"MZN\" | \"NAD\" | \"NGN\" | \"NIO\" | \"NOK\" | \"NPR\" | \"NZD\" | \"OMR\" | \"PAB\" | \"PEN\" | \"PGK\" | \"PHP\" | \"PKR\" | \"PLN\" | \"PYG\" | \"QAR\" | \"RON\" | \"RSD\" | \"RUB\" | \"RWF\" | \"SAR\" | \"SBD\" | \"SCR\" | \"SDG\" | \"SEK\" | \"SGD\" | \"SHP\" | \"SLL\" | \"SOS\" | \"SRD\" | \"SSP\" | \"STN\" | \"SVC\" | \"SYP\" | \"SZL\" | \"THB\" | \"TJS\" | \"TMT\" | \"TND\" | \"TOP\" | \"TRY\" | \"TTD\" | \"TWD\" | \"TZS\" | \"UAH\" | \"UGX\" | \"USD\" | \"USN\" | \"UYI\" | \"UYU\" | \"UYW\" | \"UZS\" | \"VES\" | \"VND\" | \"VUV\" | \"WST\" | \"XAF\" | \"XAG\" | \"XAU\" | \"XBA\" | \"XBB\" | \"XBC\" | \"XBD\" | \"XCD\" | \"XDR\" | \"XOF\" | \"XPD\" | \"XPF\" | \"XPT\" | \"XSU\" | \"XTS\" | \"XUA\" | \"XXX\" | \"YER\" | \"ZAR\" | \"ZMW\" | \"ZWL\" | undefined",
           "references": {
             "Currency": {
               "location": "import",

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/filter/input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAEtF,OAAO,KAAK,WAAW,MAAM,aAAa,CAAA;AAQ1C,MAAM,OAAO,mBAAmB;;;;gBAKC,MAAM;oBACa,KAAK;qBACpC,CAAC;qBACgB,IAAI;qBACb,MAAM,CAAC,iBAAiB;wBAC7B,IAAI;;;oBAGR,KAAK;oBACL,KAAK;;sBAE6D,UAAU;;;EAIvF,QAAQ;IACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAA;IACrC,IAAI,QAA8B,CAAA;IAClC,QAAQ,IAAI,CAAC,UAAU,EAAE;MACxB,KAAK,QAAQ;QACZ,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAA;QACrB,MAAK;MACN,KAAK,MAAM;QACV,QAAQ,GAAG,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC7C,MAAK;MACN,KAAK,SAAS;QACb,QAAQ,GAAG,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC9C,MAAK;MACN,KAAK,QAAQ;QACZ,QAAQ,GAAG,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC7C,MAAK;MACN,KAAK,MAAM;QACV,QAAQ,GAAG,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC3C,MAAK;MACN,QAAQ;MACR,KAAK,UAAU;QACd,QAAQ,GAAG,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAC3C,MAAK;KACN;IACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAA;EAC5C,CAAC;EAED,KAAK,CAAC,KAAK;IACV,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;EAChB,CAAC;EAED,MAAM;IACL,OAAO;MACN,sBACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,CAAC,OAAiC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,EAC1E,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAChC,eAAe,EAAE,CAAC,CAAC,EAAE;UACpB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAA;QAC5B,CAAC,EACD,WAAW,EAAE,IAAI,CAAC,WAAW;QAC7B,WAAK,IAAI,EAAC,OAAO;UAChB,YAAM,IAAI,EAAC,OAAO,GAAG,CAChB;QACN,eAAQ,CACQ;KACjB,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Event, EventEmitter, h, Method, Prop, State } from \"@stencil/core\"\nimport { Currency } from \"isoly\"\nimport * as selectively from \"selectively\"\nimport { Criteria } from \"selectively\"\n\n@Component({\n\ttag: \"smoothly-filter-input\",\n\tstyleUrl: \"style.css\",\n\tshadow: true,\n})\nexport class SmoothlyFilterInput {\n\tsmoothlyInput: HTMLSmoothlyInputElement\n\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ mutable: true }) value: any\n\t@Prop({ reflect: true }) type = \"text\"\n\t@Prop({ mutable: true, reflect: true }) required = false\n\t@Prop() minLength = 0\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop() maxLength: number = Number.POSITIVE_INFINITY\n\t@Prop() autocomplete = true\n\t@Prop() pattern?: RegExp\n\t@Prop() placeholder?: string\n\t@Prop() disabled = false\n\t@Prop() readonly = false\n\t@Prop({ reflect: true }) currency?: Currency\n\t@Prop() comparison: \"equals\" | \"less\" | \"greater\" | \"starts\" | \"ends\" | \"includes\" = \"includes\"\n\t@State() criteria: Criteria\n\n\t@Event() filter: EventEmitter<Criteria>\n\tprivate onFilter() {\n\t\tthis.value = this.smoothlyInput.value\n\t\tlet criteria: selectively.Criteria\n\t\tswitch (this.comparison) {\n\t\t\tcase \"equals\":\n\t\t\t\tcriteria = this.value\n\t\t\t\tbreak\n\t\t\tcase \"less\":\n\t\t\t\tcriteria = selectively.lesserThan(this.value)\n\t\t\t\tbreak\n\t\t\tcase \"greater\":\n\t\t\t\tcriteria = selectively.greaterThan(this.value)\n\t\t\t\tbreak\n\t\t\tcase \"starts\":\n\t\t\t\tcriteria = selectively.startsWith(this.value)\n\t\t\t\tbreak\n\t\t\tcase \"ends\":\n\t\t\t\tcriteria = selectively.endsWith(this.value)\n\t\t\t\tbreak\n\t\t\tdefault:\n\t\t\tcase \"includes\":\n\t\t\t\tcriteria = selectively.includes(this.value)\n\t\t\t\tbreak\n\t\t}\n\t\tthis.filter.emit({ [this.name]: criteria })\n\t}\n\t@Method()\n\tasync clear() {\n\t\tthis.value = \"\"\n\t}\n\n\trender() {\n\t\treturn [\n\t\t\t<smoothly-input\n\t\t\t\tname={this.name}\n\t\t\t\tref={(element: HTMLSmoothlyInputElement) => (this.smoothlyInput = element)}\n\t\t\t\tvalue={this.value}\n\t\t\t\tonKeyDown={() => this.onFilter()}\n\t\t\t\tonSmoothlyInput={e => {\n\t\t\t\t\tthis.value = e.detail.value\n\t\t\t\t}}\n\t\t\t\tplaceholder={this.placeholder}>\n\t\t\t\t<div slot=\"start\">\n\t\t\t\t\t<slot name=\"start\" />\n\t\t\t\t</div>\n\t\t\t\t<slot />\n\t\t\t</smoothly-input>,\n\t\t]\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/filter/input/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Method, Prop, State } from \"@stencil/core\"\nimport { Currency } from \"isoly\"\nimport * as selectively from \"selectively\"\nimport { Criteria } from \"selectively\"\n\n@Component({\n\ttag: \"smoothly-filter-input\",\n\tstyleUrl: \"style.css\",\n\tshadow: true,\n})\nexport class SmoothlyFilterInput {\n\tsmoothlyInput: HTMLSmoothlyInputElement\n\n\t@Prop({ reflect: true }) name: string\n\t@Prop({ mutable: true }) value = \"\"\n\t@Prop({ reflect: true }) type = \"text\"\n\t@Prop({ mutable: true, reflect: true }) required = false\n\t@Prop() minLength = 0\n\t@Prop({ reflect: true }) showLabel = true\n\t@Prop() maxLength: number = Number.POSITIVE_INFINITY\n\t@Prop() autocomplete = true\n\t@Prop() pattern?: RegExp\n\t@Prop() placeholder?: string\n\t@Prop() disabled = false\n\t@Prop({ reflect: true }) readonly = false\n\t@Prop({ reflect: true }) currency?: Currency\n\t@Prop() comparison: \"equals\" | \"less\" | \"greater\" | \"starts\" | \"ends\" | \"includes\" = \"includes\"\n\t@State() criteria: Criteria\n\n\t@Event() filter: EventEmitter<Criteria>\n\tprivate onFilter() {\n\t\tthis.value = this.smoothlyInput.value\n\t\tlet result: Criteria = \"\"\n\t\tlet criteria: Criteria\n\n\t\tswitch (this.comparison) {\n\t\t\tcase \"equals\":\n\t\t\t\tcriteria = this.value\n\t\t\t\tbreak\n\t\t\tcase \"less\":\n\t\t\t\tcriteria = selectively.lesserThan(this.value)\n\t\t\t\tbreak\n\t\t\tcase \"greater\":\n\t\t\t\tcriteria = selectively.greaterThan(this.value)\n\t\t\t\tbreak\n\t\t\tcase \"starts\":\n\t\t\t\tcriteria = selectively.startsWith(this.value)\n\t\t\t\tbreak\n\t\t\tcase \"ends\":\n\t\t\t\tcriteria = selectively.endsWith(this.value)\n\t\t\t\tbreak\n\t\t\tdefault:\n\t\t\tcase \"includes\":\n\t\t\t\tcriteria = selectively.includes(this.value)\n\t\t\t\tbreak\n\t\t}\n\n\t\tresult = this.name\n\t\t\t.split(\".\")\n\t\t\t.reverse()\n\t\t\t.reduce<Criteria>((previousValue, currentValue) => ({ [currentValue]: previousValue }), criteria)\n\t\tthis.filter.emit(result)\n\t}\n\n\t@Method()\n\tasync clear() {\n\t\tthis.value = \"\"\n\t}\n\n\trender() {\n\t\treturn [\n\t\t\t<smoothly-input\n\t\t\t\tname={this.name}\n\t\t\t\tref={(element: HTMLSmoothlyInputElement) => (this.smoothlyInput = element)}\n\t\t\t\tvalue={this.value}\n\t\t\t\tonKeyDown={() => this.onFilter()}\n\t\t\t\tonSmoothlyInput={e => {\n\t\t\t\t\tthis.value = e.detail.value ?? \"\"\n\t\t\t\t}}\n\t\t\t\tplaceholder={this.placeholder}>\n\t\t\t\t<div slot=\"start\">\n\t\t\t\t\t<slot name=\"start\" />\n\t\t\t\t</div>\n\t\t\t\t<slot />\n\t\t\t</smoothly-input>,\n\t\t]\n\t}\n}\n"]}

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

@@ -1,18 +1,38 @@
 import { h, Host } from "@stencil/core";
 import { http } from "cloudly-http";
+import { Data } from "../../model/Data";
 import { Notice } from "../../model/Notice";
-import { Clearable } from "./Clearable";
-import { Data } from "./Data";
+import { Clearable } from "../input/Clearable";
 export class SmoothlyForm {
   constructor() {
-    this.value = {};
     this.clearables = new Map();
+    this.listeners = {};
+    this.color = undefined;
+    this.value = {};
     this.looks = "plain";
     this.name = undefined;
     this.method = undefined;
     this.action = undefined;
     this.processing = undefined;
+    this.prevent = true;
     this.notice = undefined;
+    this.changed = false;
+  }
+  listen(property, listener) {
+    var _a;
+    var _b;
+    ;
+    ((_a = (_b = this.listeners)[property]) !== null && _a !== void 0 ? _a : (_b[property] = [])).push(listener);
+    listener(this);
+  }
+  watchValue() {
+    var _a;
+    this.changed = Object.values(this.value).filter(value => Boolean(value)).length > 0;
+    (_a = this.listeners.changed) === null || _a === void 0 ? void 0 : _a.forEach(l => l(this));
+  }
+  smoothlyInputLooksHandler(event) {
+    event.stopPropagation();
+    event.detail(this.looks, this.color);
   }
   async smoothlyInputHandler(event) {
     this.notice = undefined;
@@ -27,6 +47,9 @@ export class SmoothlyForm {
     this.submit();
     this.processing = false;
   }
+  async SmoothlyInputLoadHandler(event) {
+    event.detail(this);
+  }
   async submit() {
     this.smoothlyFormSubmit.emit(this.value);
     if (this.action) {
@@ -34,7 +57,7 @@ export class SmoothlyForm {
         ? { method: "POST", url: this.action, body: this.value }
         : { url: `${this.action}?${http.Search.stringify(this.value)}` });
       if (response.status >= 200 && response.status < 300) {
-        this.notice = Notice.succeded("Form sucessfully submitted.");
+        this.notice = Notice.succeeded("Form sucessfully submitted.");
         await this.clear();
       }
       else
@@ -45,7 +68,7 @@ export class SmoothlyForm {
     new Set(this.clearables.values()).forEach(clearable => clearable.clear());
   }
   render() {
-    return (h(Host, null, this.notice ? h("smoothly-notification", { notice: this.notice }) : [], h("smoothly-spinner", { active: this.processing }), h("form", { name: this.name }, h("fieldset", null, h("slot", null)), h("slot", { name: "submit" }))));
+    return (h(Host, null, this.notice ? h("smoothly-notification", { notice: this.notice }) : [], h("smoothly-spinner", { active: this.processing }), h("form", { onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, h("fieldset", null, h("slot", null)), h("div", null, h("slot", { name: "clear" }), h("slot", { name: "submit" })))));
   }
   static get is() { return "smoothly-form"; }
   static get originalStyleUrls() {
@@ -60,6 +83,52 @@ export class SmoothlyForm {
   }
   static get properties() {
     return {
+      "color": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "Color",
+          "resolved": "\"danger\" | \"dark\" | \"default\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | undefined",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "../../model"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": true
+      },
+      "value": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Readonly<Data>",
+          "resolved": "{ readonly [x: string]: Value | Data; }",
+          "references": {
+            "Readonly": {
+              "location": "global"
+            },
+            "Data": {
+              "location": "import",
+              "path": "../../model/Data"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "{}"
+      },
       "looks": {
         "type": "string",
         "mutable": false,
@@ -145,6 +214,42 @@ export class SmoothlyForm {
         },
         "attribute": "processing",
         "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"
+      },
+      "changed": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "changed",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }
@@ -170,7 +275,7 @@ export class SmoothlyForm {
           "references": {
             "Data": {
               "location": "import",
-              "path": "./Data"
+              "path": "../../model/Data"
             }
           }
         }
@@ -190,7 +295,7 @@ export class SmoothlyForm {
           "references": {
             "Data": {
               "location": "import",
-              "path": "./Data"
+              "path": "../../model/Data"
             }
           }
         }
@@ -232,18 +337,36 @@ export class SmoothlyForm {
       }
     };
   }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "watchValue"
+      }];
+  }
   static get listeners() {
     return [{
+        "name": "smoothlyInputLooks",
+        "method": "smoothlyInputLooksHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
         "name": "smoothlyInput",
         "method": "smoothlyInputHandler",
         "target": undefined,
-        "capture": true,
+        "capture": false,
         "passive": false
       }, {
         "name": "smoothlySubmit",
         "method": "smoothlySubmitHandler",
         "target": undefined,
-        "capture": true,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "smoothlyInputLoad",
+        "method": "SmoothlyInputLoadHandler",
+        "target": undefined,
+        "capture": false,
         "passive": false
       }];
   }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/form/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Listen, Method, Prop, State } from \"@stencil/core\"\nimport { http } from \"cloudly-http\"\nimport { Notice } from \"../../model/Notice\"\nimport { Clearable } from \"./Clearable\"\nimport { Data } from \"./Data\"\n\n@Component({\n\ttag: \"smoothly-form\",\n\tstyleUrl: \"style.css\",\n})\nexport class SmoothlyForm {\n\tprivate value: Data = {}\n\tprivate clearables = new Map<string, Clearable>()\n\t@Prop({ reflect: true, attribute: \"looks\" }) looks: \"plain\" | \"grid\" | \"border\" | \"line\" = \"plain\"\n\t@Prop() name?: string\n\t@Prop() method?: \"GET\" | \"POST\"\n\t@Prop() action?: string\n\t@Prop({ mutable: true, reflect: true }) processing: boolean\n\t@Event() smoothlyFormInput: EventEmitter<Data>\n\t@Event() smoothlyFormSubmit: EventEmitter<Data>\n\t@State() notice?: Notice\n\n\t@Listen(\"smoothlyInput\", { capture: true })\n\tasync smoothlyInputHandler(event: CustomEvent<Record<string, any>>): Promise<void> {\n\t\tthis.notice = undefined\n\t\tthis.smoothlyFormInput.emit(\n\t\t\t(this.value = Object.entries(event.detail).reduce(\n\t\t\t\t(r, [name, value]) => Data.set(r, name.split(\".\"), value),\n\t\t\t\tthis.value\n\t\t\t))\n\t\t)\n\t\tif (Clearable.is(event.target)) {\n\t\t\tconst clearable = event.target\n\t\t\tObject.keys(event.detail).forEach(key => this.clearables.set(key, clearable))\n\t\t}\n\t}\n\t@Listen(\"smoothlySubmit\", { capture: true })\n\tasync smoothlySubmitHandler(event: CustomEvent): Promise<void> {\n\t\tthis.processing = true\n\t\tthis.submit()\n\t\tthis.processing = false\n\t}\n\t@Method()\n\tasync submit(): Promise<void> {\n\t\tthis.smoothlyFormSubmit.emit(this.value)\n\t\tif (this.action) {\n\t\t\tconst response = await http.fetch(\n\t\t\t\tthis.method == \"POST\"\n\t\t\t\t\t? { method: \"POST\", url: this.action, body: this.value }\n\t\t\t\t\t: { url: `${this.action}?${http.Search.stringify(this.value)}` }\n\t\t\t)\n\t\t\tif (response.status >= 200 && response.status < 300) {\n\t\t\t\tthis.notice = Notice.succeded(\"Form sucessfully submitted.\")\n\t\t\t\tawait this.clear()\n\t\t\t} else\n\t\t\t\tthis.notice = Notice.failed(\"Failed to submit form.\")\n\t\t}\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tnew Set(this.clearables.values()).forEach(clearable => clearable.clear())\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.notice ? <smoothly-notification notice={this.notice}></smoothly-notification> : []}\n\t\t\t\t<smoothly-spinner active={this.processing}></smoothly-spinner>\n\t\t\t\t<form name={this.name}>\n\t\t\t\t\t<fieldset>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</fieldset>\n\t\t\t\t\t<slot name=\"submit\"></slot>\n\t\t\t\t</form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/form/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { http } from \"cloudly-http\"\nimport { Color } from \"../../model\"\nimport { Data } from \"../../model/Data\"\nimport { Notice } from \"../../model/Notice\"\nimport { Changeable } from \"../input/Changeable\"\nimport { Clearable } from \"../input/Clearable\"\nimport { Looks } from \"../input/Looks\"\nimport { Submittable } from \"../input/Submittable\"\n\n@Component({\n\ttag: \"smoothly-form\",\n\tstyleUrl: \"style.css\",\n})\nexport class SmoothlyForm implements Changeable, Clearable, Submittable {\n\tprivate clearables = new Map<string, Clearable>()\n\t@Prop({ reflect: true, mutable: true }) color?: Color\n\t@Prop({ mutable: true }) value: Readonly<Data> = {}\n\t@Prop({ reflect: true, attribute: \"looks\" }) looks: \"plain\" | \"grid\" | \"border\" | \"line\" = \"plain\"\n\t@Prop() name?: string\n\t@Prop() method?: \"GET\" | \"POST\"\n\t@Prop() action?: string\n\t@Prop({ mutable: true, reflect: true }) processing: boolean\n\t@Prop() prevent = true\n\t@Event() smoothlyFormInput: EventEmitter<Data>\n\t@Event() smoothlyFormSubmit: EventEmitter<Data>\n\t@State() notice?: Notice\n\t@Prop({ mutable: true, reflect: true }) changed = false\n\tprivate listeners: { changed?: ((parent: Changeable) => Promise<void>)[] } = {}\n\n\tlisten(property: \"changed\", listener: (parent: Changeable) => Promise<void>): void {\n\t\t;(this.listeners[property] ??= []).push(listener)\n\t\tlistener(this)\n\t}\n\t@Watch(\"value\")\n\twatchValue() {\n\t\tthis.changed = Object.values(this.value).filter(value => Boolean(value)).length > 0\n\t\tthis.listeners.changed?.forEach(l => l(this))\n\t}\n\t@Listen(\"smoothlyInputLooks\")\n\tsmoothlyInputLooksHandler(event: CustomEvent<(looks: Looks, color: Color | undefined) => void>) {\n\t\tevent.stopPropagation()\n\t\tevent.detail(this.looks, this.color)\n\t}\n\t@Listen(\"smoothlyInput\")\n\tasync smoothlyInputHandler(event: CustomEvent<Record<string, any>>): Promise<void> {\n\t\tthis.notice = undefined\n\t\tthis.smoothlyFormInput.emit(\n\t\t\t(this.value = Object.entries(event.detail).reduce(\n\t\t\t\t(r, [name, value]) => Data.set(r, name.split(\".\"), value),\n\t\t\t\tthis.value\n\t\t\t))\n\t\t)\n\t\tif (Clearable.is(event.target)) {\n\t\t\tconst clearable = event.target\n\t\t\tObject.keys(event.detail).forEach(key => this.clearables.set(key, clearable))\n\t\t}\n\t}\n\t@Listen(\"smoothlySubmit\")\n\tasync smoothlySubmitHandler(event: CustomEvent): Promise<void> {\n\t\tthis.processing = true\n\t\tthis.submit()\n\t\tthis.processing = false\n\t}\n\t@Listen(\"smoothlyInputLoad\")\n\tasync SmoothlyInputLoadHandler(event: CustomEvent<(parent: SmoothlyForm) => void>): Promise<void> {\n\t\tevent.detail(this)\n\t}\n\t@Method()\n\tasync submit(): Promise<void> {\n\t\tthis.smoothlyFormSubmit.emit(this.value)\n\t\tif (this.action) {\n\t\t\tconst response = await http.fetch(\n\t\t\t\tthis.method == \"POST\"\n\t\t\t\t\t? { method: \"POST\", url: this.action, body: this.value }\n\t\t\t\t\t: { url: `${this.action}?${http.Search.stringify(this.value)}` }\n\t\t\t)\n\t\t\tif (response.status >= 200 && response.status < 300) {\n\t\t\t\tthis.notice = Notice.succeeded(\"Form sucessfully submitted.\")\n\t\t\t\tawait this.clear()\n\t\t\t} else\n\t\t\t\tthis.notice = Notice.failed(\"Failed to submit form.\")\n\t\t}\n\t}\n\t@Method()\n\tasync clear(): Promise<void> {\n\t\tnew Set(this.clearables.values()).forEach(clearable => clearable.clear())\n\t}\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.notice ? <smoothly-notification notice={this.notice}></smoothly-notification> : []}\n\t\t\t\t<smoothly-spinner active={this.processing}></smoothly-spinner>\n\t\t\t\t<form onSubmit={!this.prevent ? undefined : e => e.preventDefault()} name={this.name}>\n\t\t\t\t\t<fieldset>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</fieldset>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<slot name=\"clear\"></slot>\n\t\t\t\t\t\t<slot name=\"submit\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</form>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -1,5 +1,8 @@
 smoothly-form {
 	display: block;
+	position: relative;
+	--background-color: var(--smoothly-color-shade);
+	--text-color: var(--smoothly-color-contrast)
 }
 smoothly-form > form {
 	position: relative;
@@ -8,7 +11,6 @@ smoothly-form > form {
 smoothly-form > form > fieldset {
 	display: flex;
 	flex-flow: row wrap;
-
 	margin-inline-start: unset;
 	margin-inline-end: unset;
 	padding-block-start: unset;
@@ -24,27 +26,18 @@ smoothly-form > form > fieldset {
 smoothly-form > form > fieldset > * {
 	flex-grow: 1;
 	min-width: 10em;
-	width: 40%;
-}
-smoothly-form[looks="border"] > form > fieldset > *,
-smoothly-form[looks="grid"] > form > fieldset > * {
-	border: rgb(var(--smoothly-default-contrast)) solid 1px;
-}
-smoothly-form[looks="line"] > form > fieldset > * {
-	border-bottom: rgb(var(--smoothly-default-contrast)) solid 1px;
+	flex-basis: 40%;
 }
 smoothly-form[looks="grid"] > form > fieldset {
-	border: rgba(var(--smoothly-default-contrast), .5) solid .5px;
-}
-smoothly-form[looks="grid"] > form > fieldset > * {
-	border: rgba(var(--smoothly-default-contrast), .5) solid .5px;
+	border: rgba(var(--text-color), .5) solid .5px;
 }
 smoothly-form[looks="line"] > form > fieldset,
 smoothly-form[looks="border"] > form > fieldset {
 	gap: 2em
 }
 
-smoothly-form > form > [slot=submit] {
-	margin: .5em auto;
-	max-width: 10em;
+smoothly-form > form > div {
+	display: flex;
+	justify-content: end;
+	gap: 1em;
 }

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

@@ -1,4 +1,3 @@
-import { h } from "@stencil/core";
 import { Message, Trigger } from "../../model";
 export class SmoothlyFrame {
   constructor() {
@@ -36,7 +35,7 @@ export class SmoothlyFrame {
       }, this.contentWindow);
   }
   render() {
-    return h("iframe", { src: this.url + "#" + window.location.origin, height: "100%", width: "100%" });
+    return [];
   }
   static get is() { return "smoothly-frame"; }
   static get encapsulation() { return "scoped"; }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/frame/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACxF,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAO9C,MAAM,OAAO,aAAa;;;;;;EAMzB,IAAI,aAAa;IAChB,MAAM,MAAM,GACX,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAE,IAAI,CAAC,OAAO,CAAC,iBAAuC,CAAC,CAAC,CAAC,SAAS,CAAA;IACnH,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,IAAI,SAAS,CAAA;EACrD,CAAC;EAID,IAAI,aAAa;IAChB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,oCAAoC,CAAC,CAAA;IAClE,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;EAC9B,CAAC;EACD,gBAAgB;;IACf,IAAI,IAAI,CAAC,aAAa;MACrB,OAAO,CAAC,MAAM,CACb,MAAA,IAAI,CAAC,MAAM,mCAAI,IAAI,CAAC,aAAa,EACjC,CAAC,WAAmB,EAAE,OAAY,EAAE,EAAE;QACrC,IAAI,WAAW,IAAI,IAAI,CAAC,IAAI;UAC3B,IAAI,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC;YACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;;YAE1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,CAAA;MAC/C,CAAC,EACD,MAAM,CACN,CAAA;EACH,CAAC;EAID,KAAK,CAAC,IAAI,CAAC,QAA+B,EAAE,OAAuB;;IAClE,IAAI,OAAO,QAAQ,IAAI,QAAQ;MAC9B,OAAO,CAAC,IAAI,CAAC,CAAC,MAAA,IAAI,CAAC,MAAM,mCAAI,IAAI,CAAC,aAAa,CAAC,GAAG,GAAG,GAAG,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;SAC3F,IAAI,OAAO,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,aAAa;MAClD,OAAO,CAAC,IAAI,CACX;QACC,WAAW,EAAE,CAAC,MAAA,IAAI,CAAC,MAAM,mCAAI,IAAI,CAAC,aAAa,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,WAAW;QAC7E,OAAO,EAAE,QAAQ,CAAC,WAAW;OAC7B,EACD,IAAI,CAAC,aAAa,CAClB,CAAA;EACH,CAAC;EACD,MAAM;IACL,OAAO,cAAQ,GAAG,EAAE,IAAI,CAAC,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,GAAU,CAAA;EAClG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop } from \"@stencil/core\"\nimport { Message, Trigger } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-frame\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyFrame {\n\t@Prop() url: string\n\t@Prop() name: string\n\t@Event() trigger: EventEmitter<Trigger>\n\t@Event() message2: EventEmitter<Message<any>>\n\t@Element() element?: HTMLElement\n\tget contentWindow(): Window | undefined {\n\t\tconst iframe =\n\t\t\tthis.element && this.element.firstElementChild ? (this.element.firstElementChild as HTMLIFrameElement) : undefined\n\t\treturn (iframe && iframe.contentWindow) || undefined\n\t}\n\t@Prop()\n\torigin: string | undefined\n\n\tget defaultOrigin(): string {\n\t\tconst match = this.url.match(/^(([a-z]+\\+)*[a-z]+:\\/\\/)?[^/^\\n]+/)\n\t\treturn match ? match[0] : \"*\"\n\t}\n\tcomponentDidLoad() {\n\t\tif (this.contentWindow)\n\t\t\tMessage.listen(\n\t\t\t\tthis.origin ?? this.defaultOrigin,\n\t\t\t\t(destination: string, content: any) => {\n\t\t\t\t\tif (destination == this.name)\n\t\t\t\t\t\tif (Trigger.is(content))\n\t\t\t\t\t\t\tthis.trigger.emit(content)\n\t\t\t\t\t\telse\n\t\t\t\t\t\t\tthis.message2.emit({ destination, content })\n\t\t\t\t},\n\t\t\t\twindow\n\t\t\t)\n\t}\n\tsend(message2: Message<any>): void\n\tsend(destination: string, content: Trigger | any): void\n\t@Method()\n\tasync send(message2: string | Message<any>, content?: Trigger | any): Promise<void> {\n\t\tif (typeof message2 == \"string\")\n\t\t\tMessage.send((this.origin ?? this.defaultOrigin) + \"#\" + message2, content, this.contentWindow)\n\t\telse if (Message.is(message2) && this.contentWindow)\n\t\t\tMessage.send(\n\t\t\t\t{\n\t\t\t\t\tdestination: (this.origin ?? this.defaultOrigin) + \"#\" + message2.destination,\n\t\t\t\t\tcontent: message2.destination,\n\t\t\t\t},\n\t\t\t\tthis.contentWindow\n\t\t\t)\n\t}\n\trender() {\n\t\treturn <iframe src={this.url + \"#\" + window.location.origin} height=\"100%\" width=\"100%\"></iframe>\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/frame/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACrF,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAO9C,MAAM,OAAO,aAAa;;;;;;EAMzB,IAAI,aAAa;IAChB,MAAM,MAAM,GACX,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAE,IAAI,CAAC,OAAO,CAAC,iBAAuC,CAAC,CAAC,CAAC,SAAS,CAAA;IACnH,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,IAAI,SAAS,CAAA;EACrD,CAAC;EAID,IAAI,aAAa;IAChB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,oCAAoC,CAAC,CAAA;IAClE,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;EAC9B,CAAC;EACD,gBAAgB;;IACf,IAAI,IAAI,CAAC,aAAa;MACrB,OAAO,CAAC,MAAM,CACb,MAAA,IAAI,CAAC,MAAM,mCAAI,IAAI,CAAC,aAAa,EACjC,CAAC,WAAmB,EAAE,OAAY,EAAE,EAAE;QACrC,IAAI,WAAW,IAAI,IAAI,CAAC,IAAI;UAC3B,IAAI,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC;YACtB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;;YAE1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,CAAA;MAC/C,CAAC,EACD,MAAM,CACN,CAAA;EACH,CAAC;EAID,KAAK,CAAC,IAAI,CAAC,QAA+B,EAAE,OAAuB;;IAClE,IAAI,OAAO,QAAQ,IAAI,QAAQ;MAC9B,OAAO,CAAC,IAAI,CAAC,CAAC,MAAA,IAAI,CAAC,MAAM,mCAAI,IAAI,CAAC,aAAa,CAAC,GAAG,GAAG,GAAG,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;SAC3F,IAAI,OAAO,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,aAAa;MAClD,OAAO,CAAC,IAAI,CACX;QACC,WAAW,EAAE,CAAC,MAAA,IAAI,CAAC,MAAM,mCAAI,IAAI,CAAC,aAAa,CAAC,GAAG,GAAG,GAAG,QAAQ,CAAC,WAAW;QAC7E,OAAO,EAAE,QAAQ,CAAC,WAAW;OAC7B,EACD,IAAI,CAAC,aAAa,CAClB,CAAA;EACH,CAAC;EAED,MAAM;IACL,OAAO,EAAE,CAAA;EACV,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, Method, Prop } from \"@stencil/core\"\nimport { Message, Trigger } from \"../../model\"\n\n@Component({\n\ttag: \"smoothly-frame\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyFrame {\n\t@Prop() url: string\n\t@Prop() name: string\n\t@Event() trigger: EventEmitter<Trigger>\n\t@Event() message2: EventEmitter<Message<any>>\n\t@Element() element?: HTMLElement\n\tget contentWindow(): Window | undefined {\n\t\tconst iframe =\n\t\t\tthis.element && this.element.firstElementChild ? (this.element.firstElementChild as HTMLIFrameElement) : undefined\n\t\treturn (iframe && iframe.contentWindow) || undefined\n\t}\n\t@Prop()\n\torigin: string | undefined\n\n\tget defaultOrigin(): string {\n\t\tconst match = this.url.match(/^(([a-z]+\\+)*[a-z]+:\\/\\/)?[^/^\\n]+/)\n\t\treturn match ? match[0] : \"*\"\n\t}\n\tcomponentDidLoad() {\n\t\tif (this.contentWindow)\n\t\t\tMessage.listen(\n\t\t\t\tthis.origin ?? this.defaultOrigin,\n\t\t\t\t(destination: string, content: any) => {\n\t\t\t\t\tif (destination == this.name)\n\t\t\t\t\t\tif (Trigger.is(content))\n\t\t\t\t\t\t\tthis.trigger.emit(content)\n\t\t\t\t\t\telse\n\t\t\t\t\t\t\tthis.message2.emit({ destination, content })\n\t\t\t\t},\n\t\t\t\twindow\n\t\t\t)\n\t}\n\tsend(message2: Message<any>): void\n\tsend(destination: string, content: Trigger | any): void\n\t@Method()\n\tasync send(message2: string | Message<any>, content?: Trigger | any): Promise<void> {\n\t\tif (typeof message2 == \"string\")\n\t\t\tMessage.send((this.origin ?? this.defaultOrigin) + \"#\" + message2, content, this.contentWindow)\n\t\telse if (Message.is(message2) && this.contentWindow)\n\t\t\tMessage.send(\n\t\t\t\t{\n\t\t\t\t\tdestination: (this.origin ?? this.defaultOrigin) + \"#\" + message2.destination,\n\t\t\t\t\tcontent: message2.destination,\n\t\t\t\t},\n\t\t\t\tthis.contentWindow\n\t\t\t)\n\t}\n\n\trender() {\n\t\treturn []\n\t}\n}\n"]}