smoothly 1.0.0-alpha.13 → 1.0.0-alpha.131

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

@@ -1,149 +1,137 @@
 smoothly-app {
+	--margin: -0.5rem;
 	display: block;
 	scrollbar-width: none;
+	margin-left: var(--margin);
+	margin-right: var(--margin);
+	margin-top: var(--margin);
 }
 smoothly-app[hidden] {
 	display: none;
 }
-smoothly-app[color=default],
-smoothly-app:not([color]) {
-	--smoothly-app-background: var(--smoothly-default-color);
-	--smoothly-app-color: var(--smoothly-default-contrast);
-	--smoothly-app-hover-background: var(--smoothly-primary-color);
-	--smoothly-app-hover-color: var(--smoothly-primary-contrast);
-	--smoothly-app-shadow: var(--smoothly-default-shadow);
-}
-smoothly-app[color=primary] {
-	--smoothly-app-background: var(--smoothly-primary-shade);
-	--smoothly-app-color: var(--smoothly-primary-contrast);
-	--smoothly-app-hover-background: var(--smoothly-secondary-color);
-	--smoothly-app-hover-color: var(--smoothly-secondary-contrast);
-	--smoothly-app-shadow: var(--smoothly-primary-shadow);
-}
-smoothly-app[color=secondary] {
-	--smoothly-app-background: var(--smoothly-secondary-shade);
-	--smoothly-app-color: var(--smoothly-secondary-contrast);
-	--smoothly-app-hover-background: var(--smoothly-primary-color);
-	--smoothly-app-hover-color: var(--smoothly-primary-contrast);
-	--smoothly-app-shadow: var(--smoothly-secondary-shadow);
-}
-smoothly-app[color=tertiary],
-smoothly-app[color=success],
-smoothly-app[color=warning],
-smoothly-app[color=danger] {
-	--smoothly-app-background: var(--smoothly-color-shade);
-	--smoothly-app-color: var(--smoothly-color-contrast);
-	--smoothly-app-hover-background: var(--smoothly-default-shade);
-	--smoothly-app-hover-color: var(--smoothly-default-contrast);
-	--smoothly-app-shadow: var(--smoothly-color-shadow);
+smoothly-app > smoothly-notifier {
+	background: none;
 }
 smoothly-app > smoothly-notifier > header {
-	position: fixed;
+	position: sticky;
 	top: 0;
-	left: 0;
-	width: 100%;
 	z-index: 5;
+	width: 100%;
 	height: 5rem;
-	background-color: rgb(var(--smoothly-app-background));
-	color: rgba(var(--smoothly-medium-color));
-	fill: rgb(var(--smoothly-medium-color));
-	stroke: rgb(var(--smoothly-medium-color));
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	box-shadow: 0 2px 5px 0 rgba(var(--smoothly-app-shadow));
+	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 a {
-	color: inherit;
-	text-decoration: inherit;
+	background: rgba(var(--smoothly-color));
+	color: rgba(var(--smoothly-color-contrast));
 }
 smoothly-app > smoothly-notifier > header > nav {
 	width: 100%;
 	flex-shrink: 2;
+	height: 100%;
 }
-smoothly-app>smoothly-notifier>header>h1,
-smoothly-app>smoothly-notifier>header>nav,
-smoothly-app>smoothly-notifier>header>nav>ul,
-smoothly-app>smoothly-notifier>header>nav>ul li,
-smoothly-app>smoothly-notifier>header>nav>ul li>*:not(a) {
+
+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-left: 1rem;
+	margin-bottom: 0.8em;
+	display: flex;
+	height: 100%;
 }
 smoothly-app > smoothly-notifier > header > h1 > a {
-	overflow: hidden;
-	user-select: none;
-	height: 200%;
-	display: flex;
+	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 {
+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 > [slot=header] {
-	margin-right: 2.1rem;
-	border: 0;
+smoothly-app > smoothly-notifier > header > nav > ul > div.nav-start-container {
+	display: flex;
+	align-items: center;
+	height: 100%;
 }
-smoothly-app > smoothly-notifier > header > [slot=header] > a {
+smoothly-app > smoothly-notifier > header > nav > ul > div.nav-end-container {
 	display: flex;
-	border-width: 0;
+	gap: 1rem;
 	align-items: center;
-	margin-right: 3.9rem;
+	height: 100%;
+	margin-left: auto;
+	margin-right: 1rem;
 }
-smoothly-app > smoothly-notifier > header > [slot=header] > a > smoothly-icon {
-	fill: rgb(var(--smoothly-primary-shade));
-	stroke: rgb(var(--smoothly-primary-shade));
-	color: rgb(var(--smoothly-primary-shade));
+smoothly-app > smoothly-notifier > header > nav > ul > [slot="nav-end"] {
+	width: fit-content;
+	gap: 0.5em;
+	align-self: center;
+	height: fit-content;
+	margin-left: 10rem;
 }
-smoothly-app>smoothly-notifier>header>nav>ul li a {
+smoothly-app > smoothly-notifier > header > nav > ul li a {
 	display: flex;
 	height: 2.3rem;
-	margin: 0 0.4cm;
 	text-decoration: none;
-}
-smoothly-app>smoothly-notifier>header>nav>ul li>a {
-	display: flex;
 	align-items: center;
 	align-self: center;
-	margin-bottom: 2px;
-}
-smoothly-app>smoothly-notifier>header>nav>ul li smoothly-trigger.sc-smoothly-trigger-h {
-	border: 0;
-}
-smoothly-app>smoothly-notifier>header>nav>ul li>a>smoothly-icon>svg {
-	fill: rgb(var(--smoothly-medium-color));
-	stroke: rgb(var(--smoothly-medium-color));
-	color: rgb(var(--smoothly-medium-color));
-	align-items: center;
-	display: flex;
 }
-smoothly-app>smoothly-notifier>header>nav>ul li>a:hover>smoothly-icon>svg,
-smoothly-app>smoothly-notifier>header>nav>ul li>a.active>smoothly-icon>svg {
-	color: rgb(var(--smoothly-app-color));
-	stroke: rgb(var(--smoothly-app-color));
-	fill: rgb(var(--smoothly-app-color));
-}
-smoothly-app>smoothly-notifier>header>nav>ul li>smoothly-trigger.active a>smoothly-icon,
-smoothly-app>smoothly-notifier>header>nav>ul li>smoothly-trigger:hover a>smoothly-icon,
-smoothly-app>smoothly-notifier>header>nav>ul li a:hover,
-smoothly-app>smoothly-notifier>header>nav>ul li a.active {
-	border-bottom: 2px solid rgb(var(--smoothly-app-color));
-	margin-bottom: 0px;
-	border-bottom-width: 2px;
-	color: rgb(var(--smoothly-app-color));
-	stroke: rgb(var(--smoothly-app-color));
-	fill: rgb(var(--smoothly-app-color));
-}
-smoothly-app > smoothly-notifier > main {
-	position: relative;
-	top: 5rem;
+
+@media screen and (max-width: 900px) {
+	smoothly-app > smoothly-notifier > header > nav {
+		width: 50dvw;
+		max-width: 15rem;
+		top: 100%;
+		position: absolute;
+		right: 0;
+		height: auto;
+	}
+	smoothly-app > smoothly-notifier > header > nav,
+	smoothly-app > smoothly-notifier > header > nav > ul {
+		flex-direction: column;
+		background-color: rgba(var(--smoothly-color));
+	}
+	smoothly-app > smoothly-notifier > header > nav > ul {
+		padding: 1.5rem;
+		box-sizing: border-box;
+	}
+	smoothly-app > smoothly-notifier > header > nav > ul li {
+		margin-right: 0;
+		margin-bottom: 1em;
+		width: 100%;
+	}
+
+	smoothly-app > smoothly-notifier > header > 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 > div.nav-start-container,
+	smoothly-app > smoothly-notifier > header > nav > ul > div.nav-end-container {
+		flex-direction: column;
+		margin: 0;
+		align-items: start;
+		justify-content: center;
+		gap: 1em;
+	}
+	smoothly-app > smoothly-notifier > header > nav > ul > div.nav-start-container > *:last-child {
+		margin-bottom: 1em;
+	}
+}
+smoothly-app > smoothly-notifier > header > nav:not(.menu-open) {
+	display: none;
 }

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

@@ -1,28 +1,14 @@
 import { h } from "@stencil/core";
-import { redirect } from "../../index";
-import { App } from "../App";
 export class SmoothlyAppDemo {
   constructor() {
     this.baseUrl = undefined;
   }
   render() {
-    return (h(App, { label: "Smoothly Demo" }, h("a", { slot: "nav-start", href: "display" }, "Display"), h("a", { slot: "nav-start", href: "https://google.com" }, "External"), h("smoothly-room", { path: "" }, h("smoothly-input", { type: "text" }, "Default"), h("div", { style: { padding: "1em", maxWidth: "12em" } }, h("smoothly-button", { fill: "solid", color: "danger", link: "https://google.com" }, "open"), h("smoothly-button", { fill: "solid", color: "danger", link: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", download: true }, "download"), h("smoothly-button", { fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), h("smoothly-button", { disabled: true, fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), h("smoothly-button", { type: "link", fill: "clear", color: "danger", onClick: () => alert("clicked") }, "action link"))), h("smoothly-room", { path: "input", label: "Input" }, h("smoothly-input-demo", null)), h("smoothly-room", { path: "button", label: "Button" }, h("smoothly-button-demo", null)), h("smoothly-room", { path: "dialog", label: "Dialog" }, h("smoothly-dialog-demo", null)), h("smoothly-room", { path: "display", label: "Display", icon: "eye-outline" }, h("smoothly-display-demo", null)), h("smoothly-room", { path: "table", label: "Table" }, h("smoothly-table-demo", null)), h("smoothly-room", { path: "select", label: "Select" }, h("smoothly-select-demo", null)), h("smoothly-room", { path: "icon", label: "Icon" }, h("smoothly-icon-demo", null)), h("smoothly-room", { path: "/redirect", label: "Redirect" }, h("smoothly-button", { style: { "max-width": "300px" }, onClick: () => {
-        redirect("/routing/pathParameter1");
-      } }, "Internal"), h("smoothly-button", { style: { "max-width": "300px" }, onClick: () => {
-        redirect("https://google.com");
-      } }, "External")), h("smoothly-room", { path: /^\/routing\/\w+\/?/, label: "No effect" }, h("h2", null, "Regex routing")), h("smoothly-room", { path: "old", label: "Old", to: "select" }), h("span", { slot: "header", style: { width: "100%", maxWidth: "500px" } }, h("smoothly-picker", { label: "All Animals Selected", style: { minWidth: "100px" }, labelSetting: "hide", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, "select-none-name": "Select All", options: [
-        { name: "Big Dog", value: "dog", aliases: ["WOFF"] },
-        { name: "Cat Stevens", value: "cat", aliases: ["moew"], hint: "moew 🐈" },
-        { name: "Noble Pig", value: "pig", hint: "🐷" },
-        { name: "Turtle Wax", value: "turtle" },
-        { name: "Spider Man", value: "spider" },
-        { name: "Phoenix Order Long Wooord", value: "phoenix" },
-        { name: "Horse Back", value: "horse" },
-        { name: "Unicorn Horn", value: "unicorn" },
-        { name: "Talking Parrot Parrot", value: "parrot" },
-        { name: "Hidden Dragon", value: "dragon" },
-        { name: "Scary Kraken", value: "kraken" },
-      ] })), h("smoothly-trigger", { slot: "header", type: "link", name: "logout" }, h("smoothly-icon", { toolTip: "Log out", name: "log-out", size: "medium" }))));
+    return (h("smoothly-app", { color: "dark", label: "Smoothly Demo", ref: e => (this.app = e) }, h("smoothly-trigger", { slot: "nav-start", type: "link", name: "logout" }, h("smoothly-icon", { toolTip: "Log out", name: "log-out", size: "medium" })), h("smoothly-app-room", { path: "/root", label: "root" }, h("smoothly-button", { type: "link", link: "/redirect" }, "To redirect"), h("smoothly-button", { type: "link", link: "/redirect" }, "To /redirect"), h("smoothly-button", { type: "link", link: new URL("/redirect", window.location.origin).href }, "To new URL(\"redirect\")"), h("smoothly-button", { type: "link", link: "redirect/nested" }, "To redirect nested")), h("smoothly-app-room", { path: "/links", label: "Links" }, h("smoothly-input", { type: "text" }, "Default"), h("div", { style: { padding: "1em", maxWidth: "12em" } }, h("smoothly-button", { fill: "solid", color: "danger", link: "https://google.com" }, "open"), h("smoothly-button", { fill: "solid", color: "danger", link: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", type: "download" }, "download"), h("smoothly-button", { fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), h("smoothly-button", { disabled: true, fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), h("smoothly-button", { type: "link", fill: "clear", color: "danger", onClick: () => alert("clicked") }, "action link"))), h("smoothly-app-room", { path: "/input", label: "Input" }, h("smoothly-input-demo", null)), h("smoothly-app-room", { path: "/button", label: "Button" }, h("smoothly-button-demo", null)), h("smoothly-app-room", { path: "/dialog", label: "Dialog" }, h("smoothly-dialog-demo", null)), h("smoothly-app-room", { path: "/display", label: "Display", icon: "eye-outline" }, h("smoothly-display-demo", null)), h("smoothly-app-room", { path: "/table", label: "Table" }, h("smoothly-table-demo", null)), h("smoothly-app-room", { path: "/select", label: "Select" }, h("smoothly-select-demo", null)), h("smoothly-app-room", { path: "/icon", label: "Icon" }, h("smoothly-icon-demo", null)), h("smoothly-app-room", { path: "/old", label: "Old", to: "select" }), h("smoothly-app-room", { path: "/redirect", label: "Redirect" }, h("smoothly-button", { type: "link", link: "/input" }, "To input"), h("smoothly-button", { type: "link", link: "../button" }, "To button"), h("smoothly-button", { type: "link", link: new URL("/hidden", window.location.origin).href }, "To hidden"), h("smoothly-button", { type: "link", link: "/redirect" }, "To redirect"), h("smoothly-button", { type: "link", link: "nested" }, "To redirect nested, relative path")), h("smoothly-app-room", { path: "/hidden" }, h("p", null, "hello world!")), h("smoothly-app-room", { path: "/redirect/nested" }, "this is a nested room")));
+  }
+  componentDidRender() {
+    var _a;
+    (_a = this.app) === null || _a === void 0 ? void 0 : _a.selectRoom("/root");
   }
   static get is() { return "smoothly-app-demo"; }
   static get properties() {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/app-demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\"\nimport { redirect } from \"../../index\"\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { App } from \"../App\"\n\n@Component({\n\ttag: \"smoothly-app-demo\",\n})\nexport class SmoothlyAppDemo {\n\t@Prop() baseUrl: string\n\trender() {\n\t\treturn (\n\t\t\t<App label=\"Smoothly Demo\">\n\t\t\t\t<a slot=\"nav-start\" href=\"display\">\n\t\t\t\t\tDisplay\n\t\t\t\t</a>\n\t\t\t\t<a slot=\"nav-start\" href=\"https://google.com\">\n\t\t\t\t\tExternal\n\t\t\t\t</a>\n\t\t\t\t<smoothly-room path=\"\">\n\t\t\t\t\t<smoothly-input type=\"text\">Default</smoothly-input>\n\t\t\t\t\t<div style={{ padding: \"1em\", maxWidth: \"12em\" }}>\n\t\t\t\t\t\t<smoothly-button fill=\"solid\" color=\"danger\" link=\"https://google.com\">\n\t\t\t\t\t\t\topen\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\tfill=\"solid\"\n\t\t\t\t\t\t\tcolor=\"danger\"\n\t\t\t\t\t\t\tlink=\"https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf\"\n\t\t\t\t\t\t\tdownload={true}>\n\t\t\t\t\t\t\tdownload\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button fill=\"solid\" color=\"danger\" onClick={() => alert(\"clicked\")}>\n\t\t\t\t\t\t\taction\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button disabled fill=\"solid\" color=\"danger\" onClick={() => alert(\"clicked\")}>\n\t\t\t\t\t\t\taction\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button type=\"link\" fill=\"clear\" color=\"danger\" onClick={() => alert(\"clicked\")}>\n\t\t\t\t\t\t\taction link\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t</div>\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path=\"input\" label=\"Input\">\n\t\t\t\t\t<smoothly-input-demo />\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path=\"button\" label=\"Button\">\n\t\t\t\t\t<smoothly-button-demo />\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path=\"dialog\" label=\"Dialog\">\n\t\t\t\t\t<smoothly-dialog-demo />\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path=\"display\" label=\"Display\" icon=\"eye-outline\">\n\t\t\t\t\t<smoothly-display-demo />\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path=\"table\" label=\"Table\">\n\t\t\t\t\t<smoothly-table-demo />\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path=\"select\" label=\"Select\">\n\t\t\t\t\t<smoothly-select-demo />\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path=\"icon\" label=\"Icon\">\n\t\t\t\t\t<smoothly-icon-demo />\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path=\"/redirect\" label=\"Redirect\">\n\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\tstyle={{ \"max-width\": \"300px\" }}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tredirect(\"/routing/pathParameter1\")\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\tInternal\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button\n\t\t\t\t\t\tstyle={{ \"max-width\": \"300px\" }}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tredirect(\"https://google.com\")\n\t\t\t\t\t\t}}>\n\t\t\t\t\t\tExternal\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path={/^\\/routing\\/\\w+\\/?/} label=\"No effect\">\n\t\t\t\t\t<h2>Regex routing</h2>\n\t\t\t\t</smoothly-room>\n\t\t\t\t<smoothly-room path=\"old\" label=\"Old\" to=\"select\"></smoothly-room>\n\t\t\t\t<span slot=\"header\" style={{ width: \"100%\", maxWidth: \"500px\" }}>\n\t\t\t\t\t<smoothly-picker\n\t\t\t\t\t\tlabel=\"All Animals Selected\"\n\t\t\t\t\t\tstyle={{ minWidth: \"100px\" }}\n\t\t\t\t\t\tlabelSetting=\"hide\"\n\t\t\t\t\t\tempty-menu-label=\"Sorry, we're out of options.\"\n\t\t\t\t\t\tmax-height=\"58px\"\n\t\t\t\t\t\tmultiple={true}\n\t\t\t\t\t\tselect-none-name=\"Select All\"\n\t\t\t\t\t\toptions={[\n\t\t\t\t\t\t\t{ name: \"Big Dog\", value: \"dog\", aliases: [\"WOFF\"] },\n\t\t\t\t\t\t\t{ name: \"Cat Stevens\", value: \"cat\", aliases: [\"moew\"], hint: \"moew 🐈\" },\n\t\t\t\t\t\t\t{ name: \"Noble Pig\", value: \"pig\", hint: \"🐷\" },\n\t\t\t\t\t\t\t{ name: \"Turtle Wax\", value: \"turtle\" },\n\t\t\t\t\t\t\t{ name: \"Spider Man\", value: \"spider\" },\n\t\t\t\t\t\t\t{ name: \"Phoenix Order Long Wooord\", value: \"phoenix\" },\n\t\t\t\t\t\t\t{ name: \"Horse Back\", value: \"horse\" },\n\t\t\t\t\t\t\t{ name: \"Unicorn Horn\", value: \"unicorn\" },\n\t\t\t\t\t\t\t{ name: \"Talking Parrot Parrot\", value: \"parrot\" },\n\t\t\t\t\t\t\t{ name: \"Hidden Dragon\", value: \"dragon\" },\n\t\t\t\t\t\t\t{ name: \"Scary Kraken\", value: \"kraken\" },\n\t\t\t\t\t\t]}></smoothly-picker>\n\t\t\t\t</span>\n\t\t\t\t<smoothly-trigger slot=\"header\" type=\"link\" name=\"logout\">\n\t\t\t\t\t<smoothly-icon toolTip={\"Log out\"} name=\"log-out\" size=\"medium\"></smoothly-icon>\n\t\t\t\t</smoothly-trigger>\n\t\t\t</App>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/app-demo/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAKlD,MAAM,OAAO,eAAe;;;;EAG3B,MAAM;IACL,OAAO,CACN,oBAAc,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC;MACxE,wBAAkB,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ;QAC3D,qBAAe,OAAO,EAAE,SAAS,EAAE,IAAI,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,GAAiB,CAC9D;MACnB,yBAAmB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM;QAC3C,uBAAiB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,WAAW,kBAE3B;QAClB,uBAAiB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,WAAW,mBAE3B;QAClB,uBAAiB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,GAAG,CAAC,WAAW,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,+BAElE;QAClB,uBAAiB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,iBAAiB,yBAEjC,CACC;MACpB,yBAAmB,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO;QAC7C,sBAAgB,IAAI,EAAC,MAAM,cAAyB;QACpD,WAAK,KAAK,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE;UAC/C,uBAAiB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,oBAAoB,WAEpD;UAClB,uBACC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,yEAAyE,EAC9E,IAAI,EAAC,UAAU,eAEE;UAClB,uBAAiB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,aAE1D;UAClB,uBAAiB,QAAQ,QAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,aAEnE;UAClB,uBAAiB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,kBAEtE,CACb,CACa;MACpB,yBAAmB,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO;QAC7C,8BAAuB,CACJ;MACpB,yBAAmB,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ;QAC/C,+BAAwB,CACL;MACpB,yBAAmB,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ;QAC/C,+BAAwB,CACL;MACpB,yBAAmB,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,aAAa;QACpE,gCAAyB,CACN;MACpB,yBAAmB,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO;QAC7C,8BAAuB,CACJ;MACpB,yBAAmB,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ;QAC/C,+BAAwB,CACL;MACpB,yBAAmB,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,MAAM;QAC3C,6BAAsB,CACH;MACpB,yBAAmB,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,KAAK,EAAC,EAAE,EAAC,QAAQ,GAAqB;MAC3E,yBAAmB,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,UAAU;QACnD,uBAAiB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,eAExB;QAClB,uBAAiB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,WAAW,gBAE3B;QAClB,uBAAiB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,GAAG,CAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,gBAEhE;QAClB,uBAAiB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,WAAW,kBAE3B;QAClB,uBAAiB,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,wCAExB,CACC;MACpB,yBAAmB,IAAI,EAAC,SAAS;QAChC,4BAAmB,CACA;MACpB,yBAAmB,IAAI,EAAC,kBAAkB,4BAA0C,CACtE,CACf,CAAA;EACF,CAAC;EACD,kBAAkB;;IACjB,MAAA,IAAI,CAAC,GAAG,0CAAE,UAAU,CAAC,OAAO,CAAC,CAAA;EAC9B,CAAC;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-app-demo\",\n})\nexport class SmoothlyAppDemo {\n\t@Prop() baseUrl: string\n\tapp?: HTMLSmoothlyAppElement\n\trender() {\n\t\treturn (\n\t\t\t<smoothly-app color=\"dark\" label=\"Smoothly Demo\" ref={e => (this.app = e)}>\n\t\t\t\t<smoothly-trigger slot=\"nav-start\" type=\"link\" name=\"logout\">\n\t\t\t\t\t<smoothly-icon toolTip={\"Log out\"} name=\"log-out\" size=\"medium\"></smoothly-icon>\n\t\t\t\t</smoothly-trigger>\n\t\t\t\t<smoothly-app-room path=\"/root\" label=\"root\">\n\t\t\t\t\t<smoothly-button type=\"link\" link=\"/redirect\">\n\t\t\t\t\t\tTo redirect\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button type=\"link\" link=\"/redirect\">\n\t\t\t\t\t\tTo /redirect\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button type=\"link\" link={new URL(\"/redirect\", window.location.origin).href}>\n\t\t\t\t\t\tTo new URL(\"redirect\")\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button type=\"link\" link=\"redirect/nested\">\n\t\t\t\t\t\tTo redirect nested\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/links\" label=\"Links\">\n\t\t\t\t\t<smoothly-input type=\"text\">Default</smoothly-input>\n\t\t\t\t\t<div style={{ padding: \"1em\", maxWidth: \"12em\" }}>\n\t\t\t\t\t\t<smoothly-button fill=\"solid\" color=\"danger\" link=\"https://google.com\">\n\t\t\t\t\t\t\topen\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\tfill=\"solid\"\n\t\t\t\t\t\t\tcolor=\"danger\"\n\t\t\t\t\t\t\tlink=\"https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf\"\n\t\t\t\t\t\t\ttype=\"download\">\n\t\t\t\t\t\t\tdownload\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button fill=\"solid\" color=\"danger\" onClick={() => alert(\"clicked\")}>\n\t\t\t\t\t\t\taction\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button disabled fill=\"solid\" color=\"danger\" onClick={() => alert(\"clicked\")}>\n\t\t\t\t\t\t\taction\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t\t<smoothly-button type=\"link\" fill=\"clear\" color=\"danger\" onClick={() => alert(\"clicked\")}>\n\t\t\t\t\t\t\taction link\n\t\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t</div>\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/input\" label=\"Input\">\n\t\t\t\t\t<smoothly-input-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/button\" label=\"Button\">\n\t\t\t\t\t<smoothly-button-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/dialog\" label=\"Dialog\">\n\t\t\t\t\t<smoothly-dialog-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/display\" label=\"Display\" icon=\"eye-outline\">\n\t\t\t\t\t<smoothly-display-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/table\" label=\"Table\">\n\t\t\t\t\t<smoothly-table-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/select\" label=\"Select\">\n\t\t\t\t\t<smoothly-select-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/icon\" label=\"Icon\">\n\t\t\t\t\t<smoothly-icon-demo />\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/old\" label=\"Old\" to=\"select\"></smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/redirect\" label=\"Redirect\">\n\t\t\t\t\t<smoothly-button type=\"link\" link=\"/input\">\n\t\t\t\t\t\tTo input\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button type=\"link\" link=\"../button\">\n\t\t\t\t\t\tTo button\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button type=\"link\" link={new URL(\"/hidden\", window.location.origin).href}>\n\t\t\t\t\t\tTo hidden\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button type=\"link\" link=\"/redirect\">\n\t\t\t\t\t\tTo redirect\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button type=\"link\" link=\"nested\">\n\t\t\t\t\t\tTo redirect nested, relative path\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/hidden\">\n\t\t\t\t\t<p>hello world!</p>\n\t\t\t\t</smoothly-app-room>\n\t\t\t\t<smoothly-app-room path=\"/redirect/nested\">this is a nested room</smoothly-app-room>\n\t\t\t</smoothly-app>\n\t\t)\n\t}\n\tcomponentDidRender() {\n\t\tthis.app?.selectRoom(\"/root\")\n\t}\n}\n"]}

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-export class SmoothlyBacktotop {
+export class SmoothlyBackToTop {
   constructor() {
     this.opacity = "0.5";
     this.bottom = "1rem";
@@ -22,9 +22,9 @@ export class SmoothlyBacktotop {
         top: 0,
         left: 0,
         behavior: "smooth",
-      }) }, h("smoothly-icon", { name: "chevron-up-outline" })));
+      }) }, h("smoothly-icon", { name: "caret-up-outline" })));
   }
-  static get is() { return "smoothly-backtotop"; }
+  static get is() { return "smoothly-back-to-top"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/backtotop/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAO/D,MAAM,OAAO,iBAAiB;;mBACX,KAAK;kBACN,MAAM;iBACP,MAAM;;;EAEtB,iBAAiB;IAChB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;MACtC,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,IAAI,QAAQ,CAAC,eAAe,CAAC,SAAS,GAAG,EAAE,CAAA;IACvF,CAAC,CAAC,CAAA;EACH,CAAC;EACD,MAAM;IACL,MAAM,YAAY,GAAG;MACpB,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;MAC9C,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;MAClD,UAAU,EAAE,IAAI,CAAC,MAAM;MACvB,SAAS,EAAE,IAAI,CAAC,KAAK;KACrB,CAAA;IACD,OAAO,CACN,EAAC,IAAI,IACJ,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,GAAG,EAAE,CACb,MAAM,CAAC,QAAQ,CAAC;QACf,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,QAAQ;OAClB,CAAC;MAEH,qBAAe,IAAI,EAAC,oBAAoB,GAAiB,CACnD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop, State } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-backtotop\",\n\tstyleUrl: \"style.scss\",\n\tscoped: true,\n})\nexport class SmoothlyBacktotop {\n\t@Prop() opacity = \"0.5\"\n\t@Prop() bottom = \"1rem\"\n\t@Prop() right = \"1rem\"\n\t@State() visible: boolean\n\tcomponentWillLoad() {\n\t\twindow.addEventListener(\"scroll\", () => {\n\t\t\tthis.visible = document.body.scrollTop > 20 || document.documentElement.scrollTop > 20\n\t\t})\n\t}\n\trender() {\n\t\tconst cssVariables = {\n\t\t\t\"--opacity\": this.visible ? this.opacity : \"0\",\n\t\t\t\"--pointer-events\": this.visible ? \"auto\" : \"none\",\n\t\t\t\"--bottom\": this.bottom,\n\t\t\t\"--right\": this.right,\n\t\t}\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tstyle={cssVariables}\n\t\t\t\tonClick={() =>\n\t\t\t\t\twindow.scrollTo({\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\t})\n\t\t\t\t}>\n\t\t\t\t<smoothly-icon name=\"chevron-up-outline\"></smoothly-icon>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/backtotop/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAO/D,MAAM,OAAO,iBAAiB;;mBACX,KAAK;kBACN,MAAM;iBACP,MAAM;;;EAEtB,iBAAiB;IAChB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;MACtC,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,IAAI,QAAQ,CAAC,eAAe,CAAC,SAAS,GAAG,EAAE,CAAA;IACvF,CAAC,CAAC,CAAA;EACH,CAAC;EACD,MAAM;IACL,MAAM,YAAY,GAAG;MACpB,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;MAC9C,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;MAClD,UAAU,EAAE,IAAI,CAAC,MAAM;MACvB,SAAS,EAAE,IAAI,CAAC,KAAK;KACrB,CAAA;IACD,OAAO,CACN,EAAC,IAAI,IACJ,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,GAAG,EAAE,CACb,MAAM,CAAC,QAAQ,CAAC;QACf,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,QAAQ,EAAE,QAAQ;OAClB,CAAC;MAEH,qBAAe,IAAI,EAAC,kBAAkB,GAAiB,CACjD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Host, Prop, State } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-back-to-top\",\n\tstyleUrl: \"style.scss\",\n\tscoped: true,\n})\nexport class SmoothlyBackToTop {\n\t@Prop() opacity = \"0.5\"\n\t@Prop() bottom = \"1rem\"\n\t@Prop() right = \"1rem\"\n\t@State() visible: boolean\n\tcomponentWillLoad() {\n\t\twindow.addEventListener(\"scroll\", () => {\n\t\t\tthis.visible = document.body.scrollTop > 20 || document.documentElement.scrollTop > 20\n\t\t})\n\t}\n\trender() {\n\t\tconst cssVariables = {\n\t\t\t\"--opacity\": this.visible ? this.opacity : \"0\",\n\t\t\t\"--pointer-events\": this.visible ? \"auto\" : \"none\",\n\t\t\t\"--bottom\": this.bottom,\n\t\t\t\"--right\": this.right,\n\t\t}\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tstyle={cssVariables}\n\t\t\t\tonClick={() =>\n\t\t\t\t\twindow.scrollTo({\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\tbehavior: \"smooth\",\n\t\t\t\t\t})\n\t\t\t\t}>\n\t\t\t\t<smoothly-icon name=\"caret-up-outline\"></smoothly-icon>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,174 @@
+import { h, Host } from "@stencil/core";
+export class SmoothlyBurger {
+  constructor() {
+    this.visible = undefined;
+    this.open = false;
+    this.mediaQuery = "(max-width: 900px)";
+    this.history = undefined;
+  }
+  componentWillLoad() {
+    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);
+    this.visibleStatus.emit(this.visible);
+  }
+  openChanged() {
+    this.navStatus.emit(this.open);
+  }
+  clickHandler(event) {
+    if (this.visible)
+      this.open = !this.open;
+  }
+  resizeHandler() {
+    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.visibleStatus.emit(this.visible);
+      this.navStatus.emit(!this.visible);
+    }
+    this.history = result;
+  }
+  render() {
+    return (h(Host, null, h("span", { class: "burger" }, h("smoothly-icon", { name: "menu" }))));
+  }
+  static get is() { return "smoothly-burger"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["style.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "visible": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "visible",
+        "reflect": true
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "mediaQuery": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "media-query",
+        "reflect": true,
+        "defaultValue": "\"(max-width: 900px)\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "history": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "navStatus",
+        "name": "navStatus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
+        "method": "visibleStatus",
+        "name": "visibleStatus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "open",
+        "methodName": "openChanged"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "clickHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "resize",
+        "method": "resizeHandler",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/burger/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAO5G,MAAM,OAAO,cAAc;;;gBAGqB,KAAK;sBACd,oBAAoB;;;EAK1D,iBAAiB;IAChB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAA;IACzD,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO;MAC9C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;;MAEpB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;IACpB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAClC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EACtC,CAAC;EAGD,WAAW;IACV,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;EAC/B,CAAC;EAGD,YAAY,CAAC,KAAiB;IAC7B,IAAI,IAAI,CAAC,OAAO;MACf,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;EACxB,CAAC;EAGD,aAAa;IACZ,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAA;IACzD,IAAI,MAAM,IAAI,IAAI,CAAC,OAAO,EAAE;MAC3B,IAAI,MAAM,EAAE;QACX,IAAI,CAAC,OAAO,GAAG,IAAI,CAAA;QACnB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;OACjB;WAAM;QACN,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;QACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;OACjB;MACD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;MACrC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;KAClC;IACD,IAAI,CAAC,OAAO,GAAG,MAAM,CAAA;EACtB,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,YAAM,KAAK,EAAC,QAAQ;QACnB,qBAAe,IAAI,EAAC,MAAM,GAAG,CACvB,CACD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\"\n\n@Component({\n\ttag: \"smoothly-burger\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyBurger {\n\t@Element() element: HTMLSmoothlyBurgerElement\n\t@Prop({ mutable: true, reflect: true }) visible: boolean\n\t@Prop({ mutable: true, reflect: true }) open = false\n\t@Prop({ reflect: true }) mediaQuery = \"(max-width: 900px)\"\n\t@State() history: boolean\n\t@Event() navStatus: EventEmitter<boolean>\n\t@Event() visibleStatus: EventEmitter<boolean>\n\n\tcomponentWillLoad() {\n\t\tthis.history = window.matchMedia(this.mediaQuery).matches\n\t\tif (!window.matchMedia(this.mediaQuery).matches)\n\t\t\tthis.visible = false\n\t\telse\n\t\t\tthis.visible = true\n\t\tthis.navStatus.emit(!this.visible)\n\t\tthis.visibleStatus.emit(this.visible)\n\t}\n\n\t@Watch(\"open\")\n\topenChanged() {\n\t\tthis.navStatus.emit(this.open)\n\t}\n\n\t@Listen(\"click\")\n\tclickHandler(event: MouseEvent) {\n\t\tif (this.visible)\n\t\t\tthis.open = !this.open\n\t}\n\n\t@Listen(\"resize\", { target: \"window\" })\n\tresizeHandler() {\n\t\tconst result = window.matchMedia(this.mediaQuery).matches\n\t\tif (result != this.history) {\n\t\t\tif (result) {\n\t\t\t\tthis.visible = true\n\t\t\t\tthis.open = false\n\t\t\t} else {\n\t\t\t\tthis.visible = false\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t\tthis.visibleStatus.emit(this.visible)\n\t\t\tthis.navStatus.emit(!this.visible)\n\t\t}\n\t\tthis.history = result\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span class=\"burger\">\n\t\t\t\t\t<smoothly-icon name=\"menu\" />\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,22 @@
+:host([visible]){
+display: flex;
+justify-content: center;
+align-items: center;
+height: 100%;
+}
+:host([visible]) .burger smoothly-icon{
+	font-size: 1.7em;
+	cursor: pointer;
+	margin-right: 1em;
+}
+:host:not([visible]){
+	display: none;
+}
+:host:not([open]) smoothly-icon{
+	transform: rotate(0deg);
+	transition: transform 100ms ease-in-out;
+}
+:host([open]) smoothly-icon{
+	transform: rotate(-90deg);
+	transition: transform 100ms ease-in-out;
+}

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

@@ -10,13 +10,12 @@ export class SmoothlyButton {
     this.size = undefined;
     this.shape = undefined;
     this.link = undefined;
-    this.download = undefined;
   }
   render() {
-    return h(Button, { disabled: this.disabled, type: this.type, link: this.link, download: this.download });
+    return (h(Button, { disabled: this.disabled, type: this.type, link: this.link }, h("slot", null)));
   }
   static get is() { return "smoothly-button"; }
-  static get encapsulation() { return "shadow"; }
+  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
       "$": ["../button/style.css"]
@@ -112,9 +111,14 @@ export class SmoothlyButton {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"link\" | \"button\"",
-          "resolved": "\"button\" | \"link\"",
-          "references": {}
+          "original": "Button.Properties[\"type\"]",
+          "resolved": "\"button\" | \"download\" | \"link\"",
+          "references": {
+            "Button": {
+              "location": "import",
+              "path": "../Button"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -176,23 +180,6 @@ export class SmoothlyButton {
         },
         "attribute": "link",
         "reflect": false
-      },
-      "download": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "download",
-        "reflect": false
       }
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAOlC,MAAM,OAAO,cAAc;;;;;oBAIU,KAAK;gBACU,QAAQ;;;;;;EAM3D,MAAM;IACL,OAAO,EAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAW,CAAA;EAC7G,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\"\nimport { Color, Fill } from \"../../model\"\nimport { Button } from \"../Button\"\n\n@Component({\n\ttag: \"smoothly-button\",\n\tstyleUrl: \"../button/style.css\",\n\tshadow: true,\n})\nexport class SmoothlyButton {\n\t@Prop({ reflect: true }) color?: Color\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill\n\t@Prop({ reflect: true }) disabled = false\n\t@Prop({ reflect: true }) type: \"link\" | \"button\" = \"button\"\n\t@Prop({ reflect: true }) size: \"small\" | \"large\" | \"icon\" | \"flexible\"\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Prop() link?: string\n\t@Prop() download?: boolean\n\n\trender() {\n\t\treturn <Button disabled={this.disabled} type={this.type} link={this.link} download={this.download}></Button>\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAOlC,MAAM,OAAO,cAAc;;;;;oBAIU,KAAK;gBACkB,QAAQ;;;;;EAKnE,MAAM;IACL,OAAO,CACN,EAAC,MAAM,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;MAChE,eAAQ,CACA,CACT,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\"\nimport { Color, Fill } from \"../../model\"\nimport { Button } from \"../Button\"\n\n@Component({\n\ttag: \"smoothly-button\",\n\tstyleUrl: \"../button/style.css\",\n\tscoped: true,\n})\nexport class SmoothlyButton {\n\t@Prop({ reflect: true }) color?: Color\n\t@Prop({ reflect: true }) expand?: \"block\" | \"full\"\n\t@Prop({ reflect: true }) fill?: Fill\n\t@Prop({ reflect: true }) disabled = false\n\t@Prop({ reflect: true }) type: Button.Properties[\"type\"] = \"button\"\n\t@Prop({ reflect: true }) size: \"small\" | \"large\" | \"icon\" | \"flexible\"\n\t@Prop({ reflect: true }) shape?: \"rounded\"\n\t@Prop() link?: string\n\n\trender() {\n\t\treturn (\n\t\t\t<Button disabled={this.disabled} type={this.type} link={this.link}>\n\t\t\t\t<slot />\n\t\t\t</Button>\n\t\t)\n\t}\n}\n"]}