smoothly 1.0.0-alpha.76 → 1.0.0-alpha.78

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<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</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 onSmoothlySummaryOpen={e => console.log(\"summary is open?\", e.detail)}>\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</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/custom-elements/index.js

@@ -1477,7 +1477,7 @@ const SmoothlyAddresses$1 = class extends HTMLElement {
   static get style() { return styleCss$11; }
 };
 
-const styleCss$10 = "smoothly-app{display:block;scrollbar-width:none}smoothly-app[hidden]{display:none}smoothly-app>smoothly-notifier{background:none}smoothly-app>smoothly-notifier>header{background:rgba(var(--smoothly-color));color:rgba(var(--smoothly-color-contrast))}smoothly-app>smoothly-notifier>header{position:fixed;top:0;left:0;width:100%;z-index:5;height:5rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 5px 0 rgba(var(--smoothly-dark-shadow));border-bottom:1px solid rgba(var(--smoothly-dark-color))}smoothly-app>smoothly-notifier>header>nav{width:100%;flex-shrink:2}smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{display:flex;height:100%;margin:0}smoothly-app>smoothly-notifier>header>h1{margin-left:3.8rem;margin-bottom:0.8em;display:flex;height:100%}smoothly-app>smoothly-notifier>header>h1>a{display:inline-block;align-self:center;size:100%;background-position-y:center;text-decoration:none;white-space:nowrap}smoothly-app>smoothly-notifier>header>nav>ul li a{line-height:1.6cm}smoothly-app>smoothly-notifier>header>nav>ul li a{line-height:1.6cm}smoothly-app>smoothly-notifier>header>nav>ul{width:100%}smoothly-app>smoothly-notifier>header>nav>ul>[slot=nav-start]{height:fit-content;padding:0.5em 0em;margin-top:1em}smoothly-app>smoothly-notifier>header>nav>ul>[slot=nav-end]{width:fit-content;gap:0.5em;align-self:center;height:fit-content;margin-left:10em}smoothly-app>smoothly-notifier>header>nav>ul li a{display:flex;height:2.3rem;text-decoration:none;align-items:center;align-self:center}smoothly-app>smoothly-notifier>main{position:relative;top:5rem}@media screen and (max-width: 900px){smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{width:10em;top:2.5rem;position:absolute;right:0;flex-direction:column}smoothly-app>smoothly-notifier>header>nav>ul li{margin-right:0;margin-bottom:1em;background-color:rgba(var(--smoothly-color));width:100%}smoothly-app>smoothly-notifier>header>nav>ul smoothly-burger{position:absolute;top:0;right:0}smoothly-app>smoothly-notifier>header>nav>ul>[slot=nav-start]{display:none}smoothly-app>smoothly-notifier>header>nav>ul>[slot=nav-end]{margin-left:3em;width:10em;padding:1.5em;background-color:rgba(var(--smoothly-color))}}.true:not([menuOpen]){display:none}";
+const styleCss$10 = "smoothly-app{display:block;scrollbar-width:none}smoothly-app[hidden]{display:none}smoothly-app>smoothly-notifier{background:none}smoothly-app>smoothly-notifier>header{background:rgba(var(--smoothly-color));color:rgba(var(--smoothly-color-contrast))}smoothly-app>smoothly-notifier>header{position:fixed;top:0;left:0;width:100%;z-index:5;height:5rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 5px 0 rgba(var(--smoothly-dark-shadow));border-bottom:1px solid rgba(var(--smoothly-dark-color))}smoothly-app>smoothly-notifier>header>nav{width:100%;flex-shrink:2}smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{display:flex;height:100%;margin:0}smoothly-app>smoothly-notifier>header>h1{margin-left:3.8rem;margin-bottom:0.8em;display:flex;height:100%}smoothly-app>smoothly-notifier>header>h1>a{display:inline-block;align-self:center;size:100%;background-position-y:center;text-decoration:none;white-space:nowrap}smoothly-app>smoothly-notifier>header>nav>ul li a{line-height:1.6cm}smoothly-app>smoothly-notifier>header>nav>ul li a{line-height:1.6cm}smoothly-app>smoothly-notifier>header>nav>ul{width:100%}smoothly-app>smoothly-notifier>header>nav>ul>[slot=nav-start]{height:fit-content;padding:0.5em 0em;margin-top:1em}smoothly-app>smoothly-notifier>header>nav>ul>[slot=nav-end]{width:fit-content;gap:0.5em;align-self:center;height:fit-content;margin-left:10em}smoothly-app>smoothly-notifier>header>nav>ul li a{display:flex;height:2.3rem;text-decoration:none;align-items:center;align-self:center}smoothly-app>smoothly-notifier>main{position:relative;top:5rem}@media screen and (max-width: 900px){smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul{width:10em;top:2.5rem;position:absolute;right:0;flex-direction:column}smoothly-app>smoothly-notifier>header>nav>ul li{margin-right:0;margin-bottom:1em;background-color:rgba(var(--smoothly-color));width:100%}smoothly-app>smoothly-notifier>header>nav>ul smoothly-burger{position:absolute;top:0;right:0}smoothly-app>smoothly-notifier>header>nav>ul>[slot=nav-start]{display:none}smoothly-app>smoothly-notifier>header>nav>ul>[slot=nav-end]{margin-left:3em;width:10em;padding:1.5em;background-color:rgba(var(--smoothly-color))}}nav:not(.menuOpen){display:none}";
 
 const SmoothlyApp$1 = class extends HTMLElement {
   constructor() {
@@ -1507,7 +1507,7 @@ const SmoothlyApp$1 = class extends HTMLElement {
   }
   burgerStatusHandler(event) {
     event.stopPropagation();
-    this.menuOpen = event.detail ? true : false;
+    this.menuOpen = event.detail;
   }
   async locationChangeHandler(event) {
     var _a;
@@ -1526,7 +1526,7 @@ const SmoothlyApp$1 = class extends HTMLElement {
     this.rooms[event.target.path.toString()] = { element: event.target };
   }
   render() {
-    return (h("smoothly-notifier", null, h("header", { color: this.color }, h("h1", null, h("a", { href: "" }, this.label)), h("slot", { name: "header" }), h("nav", { class: this.menuOpen.toString() }, h("ul", null, h("slot", { name: "nav-start" }), h("slot", null, " "), h("slot", { name: "nav-end" }))), h("smoothly-burger", null)), h("main", { ref: e => (this.mainElement = e) })));
+    return (h("smoothly-notifier", null, h("header", { color: this.color }, h("h1", null, h("a", { href: "" }, this.label)), h("slot", { name: "header" }), h("nav", { class: { menuOpen: this.menuOpen } }, h("ul", null, h("slot", { name: "nav-start" }), h("slot", null, " "), h("slot", { name: "nav-end" }))), h("smoothly-burger", { onNavStatus: e => this.burgerStatusHandler(e) })), h("main", { ref: e => (this.mainElement = e) })));
   }
   static get watchers() { return {
     "selected": ["selectedChanged"]
@@ -2833,40 +2833,49 @@ const SmoothlyBacktotop$1 = class extends HTMLElement {
   static get style() { return styleCss$_; }
 };
 
-const styleCss$Z = "[visible].sc-smoothly-burger-h{display:flex;justify-content:center;align-items:center;height:100%}[visible].sc-smoothly-burger-h .burger.sc-smoothly-burger smoothly-icon.sc-smoothly-burger{font-size:1.7em;cursor:pointer;margin-right:1em}.sc-smoothly-burger-h:not([visible]){display:none}[open].sc-smoothly-burger-h smoothly-icon.sc-smoothly-burger{transform:rotate(0deg);transition:transform 100ms ease-in-out}.sc-smoothly-burger-h:not([open]) smoothly-icon.sc-smoothly-burger{transform:rotate(-90deg);transition:transform 100ms ease-in-out}";
+const styleCss$Z = "[visible].sc-smoothly-burger-h{display:flex;justify-content:center;align-items:center;height:100%}[visible].sc-smoothly-burger-h .burger.sc-smoothly-burger smoothly-icon.sc-smoothly-burger{font-size:1.7em;cursor:pointer;margin-right:1em}.sc-smoothly-burger-h:not([visible]){display:none}.sc-smoothly-burger-h:not([open]) smoothly-icon.sc-smoothly-burger{transform:rotate(0deg);transition:transform 100ms ease-in-out}[open].sc-smoothly-burger-h smoothly-icon.sc-smoothly-burger{transform:rotate(-90deg);transition:transform 100ms ease-in-out}";
 
 const SmoothlyBurger$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.burgerStatus = createEvent(this, "burgerStatus", 7);
+    this.navStatus = createEvent(this, "navStatus", 7);
     this.visible = undefined;
-    this.open = undefined;
+    this.open = false;
     this.mediaQuery = "(max-width: 900px)";
+    this.history = undefined;
   }
   componentWillLoad() {
-    const windowsize = window.innerWidth;
-    windowsize > 900 ? (this.visible = false) : (this.visible = true);
+    this.history = window.matchMedia(this.mediaQuery).matches;
+    if (!window.matchMedia(this.mediaQuery).matches)
+      this.visible = false;
+    else
+      this.visible = true;
+    this.navStatus.emit(!this.visible);
   }
-  closedHandler() {
-    this.burgerStatus.emit(this.open);
+  openChanged() {
+    this.navStatus.emit(this.open);
   }
   resizeHandler() {
-    const reduced = window.matchMedia(this.mediaQuery).matches;
-    if (reduced) {
-      this.visible = true;
-      this.open = true;
-    }
-    else {
-      this.visible = false;
-      this.open = false;
+    const result = window.matchMedia(this.mediaQuery).matches;
+    if (result != this.history) {
+      if (result) {
+        this.visible = true;
+        this.open = false;
+      }
+      else {
+        this.visible = false;
+        this.open = false;
+      }
+      this.navStatus.emit(!this.visible);
     }
+    this.history = result;
   }
   render() {
-    return (h(Host, null, h("span", { class: "burger", onClick: () => (this.open = !this.open) }, h("smoothly-icon", { name: "menu" }, " "))));
+    return (h(Host, null, h("span", { class: "burger", onClick: () => (this.open = !this.open) }, h("smoothly-icon", { name: "menu" }))));
   }
   static get watchers() { return {
-    "open": ["closedHandler"]
+    "open": ["openChanged"]
   }; }
   static get style() { return styleCss$Z; }
 };
@@ -47602,7 +47611,7 @@ const SmoothlyDisplayDemo$1 = class extends HTMLElement {
   }
   render() {
     return [
-      h("main", null, h("fieldset", null, h("h2", null, "Smoothly display"), h("dl", null, h("dt", null, "text"), h("dd", null, h("smoothly-display", { type: "text", value: "text" })), h("dt", null, "postal code"), h("dd", null, h("smoothly-display", { type: "postal-code", value: "752 31" })), h("dt", null, "password"), h("dd", null, h("smoothly-display", { type: "password", value: "password" })), h("dt", null, "email"), h("dd", null, h("smoothly-display", { type: "email", value: "test@example.com" })), h("dt", null, "price"), h("dd", null, h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), h("dt", null, "display amount without decimals"), h("dd", null, h("smoothly-display-amount", { amount: 200, currency: "SEK", toInteger: true })), h("dt", null, "display amount with decimals if they are set, otherwise no decimal"), h("dd", null, h("smoothly-display-amount", { amount: 200.20, currency: "SEK", toInteger: true })), h("dt", null, "display amount with decimals"), h("dd", null, h("smoothly-display-amount", { amount: 200.20, currency: "SEK" })), h("dt", null, "percent"), h("dd", null, h("smoothly-display", { type: "percent", value: "42" })), h("dt", null, "phone"), h("dd", null, h("smoothly-display", { type: "phone", value: "0101881108" })), h("dt", null, "card number"), h("dd", null, h("smoothly-display", { type: "card-number", value: "4111111111111111" })), h("dt", null, "card expires"), h("dd", null, h("smoothly-display", { type: "card-expires", value: "7/22" })), h("dt", null, "card csc"), h("dd", null, h("smoothly-display", { type: "card-csc", value: "987" })), h("dt", null, "date"), h("dd", null, h("smoothly-display", { type: "date", value: "2022-07-07" })), h("dt", null, "date time"), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T02:02:02Z" })), h("dd", null, h("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" })), h("dd", null, h("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" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", null, h("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" })), h("dt", null, "Deprecated display date time"), h("dt", null, "Display amount"), h("dd", null, h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" })), h("dt", null, "Quiet"), h("dd", null, h("smoothly-quiet", { color: "dark" }, "-")))), h("fieldset", null, h("h2", null, "Smoothly skeleton"), h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), h("smoothly-skeleton", { period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" })), h("fieldset", null, h("h2", null, "Smoothly URL encoded"), h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" })), h("fieldset", null, h("h2", null, "Smoothly popup"), h("div", { style: { display: "flex", justifyContent: "space-between" } }, h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), h("smoothly-popup", null, h("div", null, "Popup, click me"), h("div", { color: "dark", slot: "popup" }, "1 line popup"))), h("fieldset", null, h("h2", null, "Test of different kinds of notifier"), h("button", { onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { onClick: () => this.noticeWarning(Notice.succeeded("This is a test success notice.")) }, "success"), h("button", { onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), h("fieldset", null, h("h2", null, "Smoothly spinner"), h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", h("smoothly-spinner", { active: true, size: "medium" })), h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", h("smoothly-spinner", { active: true, size: "small" })), h("div", { style: { position: "absolute", left: "500px", top: "150px" } }, h("smoothly-svg", { url: "https://theme.payfunc.com/intergiro/animated-logo.svg" }))), h("fieldset", null, h("h2", null, "Smoothly summary"), h("smoothly-summary", { color: "light", fill: "clear", size: "large" }, h("p", { slot: "summary" }, "Some title"), h("p", { slot: "content" }, "Some content")), h("smoothly-summary", { color: "light", fill: "clear", size: "large" }, h("p", { slot: "summary" }, "Some title"), h("p", { slot: "content" }, "Some content")), h("smoothly-summary", { color: "danger", fill: "clear" }, h("div", { slot: "summary", style: { display: "flex", gap: "0.3rem" } }, h("span", null, "Person"), h("smoothly-icon", { name: "person", color: "light", fill: "clear", size: "tiny" })), h("p", { slot: "content" }, "Some person information.")), h("smoothly-summary", { color: "danger", fill: "clear", open: true, onSmoothlySummaryOpen: e => console.log("summary is open?", e.detail) }, h("p", { slot: "summary" }, "Some other title"), h("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.")))),
+      h("main", null, h("fieldset", null, h("h2", null, "Smoothly display"), h("dl", null, h("dt", null, "text"), h("dd", null, h("smoothly-display", { type: "text", value: "text" })), h("dt", null, "postal code"), h("dd", null, h("smoothly-display", { type: "postal-code", value: "752 31" })), h("dt", null, "password"), h("dd", null, h("smoothly-display", { type: "password", value: "password" })), h("dt", null, "email"), h("dd", null, h("smoothly-display", { type: "email", value: "test@example.com" })), h("dt", null, "price"), h("dd", null, h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), h("dt", null, "display amount without decimals"), h("dd", null, h("smoothly-display-amount", { amount: 200, currency: "SEK", toInteger: true })), h("dt", null, "display amount with decimals if they are set, otherwise no decimal"), h("dd", null, h("smoothly-display-amount", { amount: 200.20, currency: "SEK", toInteger: true })), h("dt", null, "display amount with decimals"), h("dd", null, h("smoothly-display-amount", { amount: 200.20, currency: "SEK" })), h("dt", null, "percent"), h("dd", null, h("smoothly-display", { type: "percent", value: "42" })), h("dt", null, "phone"), h("dd", null, h("smoothly-display", { type: "phone", value: "0101881108" })), h("dt", null, "card number"), h("dd", null, h("smoothly-display", { type: "card-number", value: "4111111111111111" })), h("dt", null, "card expires"), h("dd", null, h("smoothly-display", { type: "card-expires", value: "7/22" })), h("dt", null, "card csc"), h("dd", null, h("smoothly-display", { type: "card-csc", value: "987" })), h("dt", null, "date"), h("dd", null, h("smoothly-display", { type: "date", value: "2022-07-07" })), h("dt", null, "date time"), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T02:02:02Z" })), h("dd", null, h("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" })), h("dd", null, h("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" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric", second: "numeric" }, value: "2022-07-07T12:22:24Z" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "numeric", month: "short", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", null, h("smoothly-display", { type: "date-time", format: { year: "2-digit", month: "numeric", day: "numeric" }, value: "2022-07-07T00:00+02:00" })), h("dd", null, h("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" })), h("dt", null, "Deprecated display date time"), h("dt", null, "Display amount"), h("dd", null, h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" })), h("dt", null, "Quiet"), h("dd", null, h("smoothly-quiet", { color: "dark" }, "-")))), h("fieldset", null, h("h2", null, "Smoothly skeleton"), h("smoothly-skeleton", { period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "200,200,255" }), h("smoothly-skeleton", { period: 3, distance: "20rem", color: "var(--smoothly-warning-color)" }), h("smoothly-skeleton", { period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "center", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem", width: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" }), h("smoothly-skeleton", { align: "right", period: 3, distance: "20rem" })), h("fieldset", null, h("h2", null, "Smoothly URL encoded"), h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" })), h("fieldset", null, h("h2", null, "Smoothly popup"), h("div", { style: { display: "flex", justifyContent: "space-between" } }, h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), h("smoothly-popup", { direction: "down" }, "Click for popup", h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), h("smoothly-popup", null, h("div", null, "Popup, click me"), h("div", { color: "dark", slot: "popup" }, "1 line popup"))), h("fieldset", null, h("h2", null, "Test of different kinds of notifier"), h("button", { onClick: () => this.noticeWarning(Notice.warn("This is a test warning notice.")) }, "warning"), h("button", { onClick: () => this.noticeWarning(Notice.succeeded("This is a test success notice.")) }, "success"), h("button", { onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"), h("button", { onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), h("button", { onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")), h("fieldset", null, h("h2", null, "Smoothly spinner"), h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", h("smoothly-spinner", { active: true, size: "medium" })), h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", h("smoothly-spinner", { active: true, size: "small" })), h("div", { style: { position: "absolute", left: "500px", top: "150px" } }, h("smoothly-svg", { url: "https://theme.payfunc.com/intergiro/animated-logo.svg" }))), h("fieldset", null, h("h2", null, "Smoothly summary"), h("smoothly-summary", { color: "light", fill: "clear", size: "large" }, h("p", { slot: "summary" }, "Some title"), h("p", { slot: "content" }, "Some content")), h("smoothly-summary", { color: "light", fill: "clear", size: "large" }, h("p", { slot: "summary" }, "Some title"), h("p", { slot: "content" }, "Some content")), h("smoothly-summary", { color: "danger", fill: "clear" }, h("div", { slot: "summary", style: { display: "flex", gap: "0.3rem" } }, h("span", null, "Person"), h("smoothly-icon", { name: "person", color: "light", fill: "clear", size: "tiny" })), h("p", { slot: "content" }, "Some person information.")), h("smoothly-summary", { color: "danger", fill: "clear", open: true }, h("p", { slot: "summary" }, "Some other title"), h("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.")))),
     ];
   }
 };
@@ -55251,11 +55260,11 @@ const SmoothlyAccordionItem = /*@__PURE__*/proxyCustomElement(SmoothlyAccordionI
 const SmoothlyAddress = /*@__PURE__*/proxyCustomElement(SmoothlyAddress$1, [2,"smoothly-address",{"value":[16],"editable":[4]}]);
 const SmoothlyAddressDisplay = /*@__PURE__*/proxyCustomElement(SmoothlyAddressDisplay$1, [2,"smoothly-address-display",{"value":[16],"editable":[4]}]);
 const SmoothlyAddresses = /*@__PURE__*/proxyCustomElement(SmoothlyAddresses$1, [2,"smoothly-addresses",{"value":[16],"editable":[16]}]);
-const SmoothlyApp = /*@__PURE__*/proxyCustomElement(SmoothlyApp$1, [4,"smoothly-app",{"label":[1],"color":[1],"menuOpen":[1540,"menu-open"],"selected":[32]},[[0,"burgerStatus","burgerStatusHandler"],[8,"popstate","locationChangeHandler"],[0,"smoothlyRoomSelected","roomSelectedHandler"],[0,"smoothlyRoomLoaded","roomLoadedHandler"]]]);
+const SmoothlyApp = /*@__PURE__*/proxyCustomElement(SmoothlyApp$1, [4,"smoothly-app",{"label":[1],"color":[1],"menuOpen":[1540,"menu-open"],"selected":[32]},[[8,"popstate","locationChangeHandler"],[0,"smoothlyRoomSelected","roomSelectedHandler"],[0,"smoothlyRoomLoaded","roomLoadedHandler"]]]);
 const SmoothlyAppDemo = /*@__PURE__*/proxyCustomElement(SmoothlyAppDemo$1, [0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}]);
 const SmoothlyAppRoom = /*@__PURE__*/proxyCustomElement(SmoothlyAppRoom$1, [6,"smoothly-app-room",{"label":[1],"icon":[1],"path":[1],"to":[1],"selected":[1540]}]);
 const SmoothlyBacktotop = /*@__PURE__*/proxyCustomElement(SmoothlyBacktotop$1, [2,"smoothly-backtotop",{"opacity":[1],"bottom":[1],"right":[1],"visible":[32]}]);
-const SmoothlyBurger = /*@__PURE__*/proxyCustomElement(SmoothlyBurger$1, [2,"smoothly-burger",{"visible":[1540],"open":[1540],"mediaQuery":[513,"media-query"]},[[9,"resize","resizeHandler"]]]);
+const SmoothlyBurger = /*@__PURE__*/proxyCustomElement(SmoothlyBurger$1, [2,"smoothly-burger",{"visible":[1540],"open":[1540],"mediaQuery":[513,"media-query"],"history":[32]},[[9,"resize","resizeHandler"]]]);
 const SmoothlyButton = /*@__PURE__*/proxyCustomElement(SmoothlyButton$1, [6,"smoothly-button",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"size":[513],"shape":[513],"link":[1],"download":[4]}]);
 const SmoothlyButtonDemo = /*@__PURE__*/proxyCustomElement(SmoothlyButtonDemo$1, [0,"smoothly-button-demo"]);
 const SmoothlyCalendar = /*@__PURE__*/proxyCustomElement(Calendar, [2,"smoothly-calendar",{"month":[1025],"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"doubleInput":[516,"double-input"],"firstSelected":[32]}]);