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

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

@@ -71,22 +71,22 @@
 
 :host{
 	display: inline-block;
-	margin: 1em;
 	box-sizing: border-box;
 	border-radius: 0.5rem;
 	border: solid 1px;
 	transition: background 150ms ease-in-out;
+	cursor: pointer;
 }
-:host([type=link]){
+:host([type=link]) {
 	display: inline;
 	border: none;
 }
-:host([disabled]){
+:host([disabled]) {
 	opacity: 0.5;
 	pointer-events: none;
 }
 a,
-button{
+button {
 	font-size: 110%;
 	font-weight: 400;
 	border: none;
@@ -100,17 +100,20 @@ button {
 	height: 100%;
 	width: 100%;
 	border-radius: 0.5rem;
-	min-width: 8em;
 	align-items: center;
 }
-:host(:not([size=icon])) > button {
+:host(:not([size=icon]):not([size=flexible])) > button {
 	padding: 0.8em;
+	min-width: 8em;
 }
-:host([size=icon]) > button{
+:host(:not([size=icon]):not([size=flexible])):has(smoothly-icon) > button {
+	padding: 0.6em;
+}
+:host([size=icon]) > button {
 	padding: 0.5em;
 }
 :host([shape=rounded]) > button,
-:host([shape=rounded]){
+:host([shape=rounded]) {
 	border-radius: 2rem;
 }
 :host([type=button]) > a {
@@ -118,17 +121,15 @@ button {
 	text-decoration: inherit;
 	width: calc(100% - 0.6em);
 }
-:host([size=small]) > button{
+:host([size=small]) > button {
 	font-size: 100%;
 }
-:host([size=large]) > button{
+:host([size=large]) > button {
 	font-size: 130%;
 }
-
-:host(:not([size=icon])){
+:host(:not([size=icon])) {
 	min-width: 8em;
 }
-
 :host([size=flexible]) {
 	min-width: unset;
 	padding: 0;
@@ -138,7 +139,6 @@ button {
 	align-items: center;
 	border: none;
 }
-
 :host([size=flexible]) > button {
 	min-width: unset;
 	padding: 0;
@@ -153,71 +153,69 @@ button {
 	border-radius: 0;
 }
 :host([shape=rounded]) > button,
-:host([shape=rounded]){
+:host([shape=rounded]) {
 	border-radius: 2rem;
 }
 :host(:not([fill=clear]):hover),
 :host(:not([fill=clear]):focus),	
-:host(:not([fill=clear]):active){
+:host(:not([fill=clear]):active) {
 	border-color: rgb(var(--smoothly-color-tint)) !important;
 	background: rgb(var(--smoothly-color-tint)) !important;
 }
 :host(:not([fill=clear]):hover) > button,
 :host(:not([fill=clear]):focus) > button,
-:host(:not([fill=clear]):active) > button{
+:host(:not([fill=clear]):active) > button,
+:host(:not([fill=clear]):hover) ::slotted(smoothly-icon),
+:host(:not([fill=clear]):focus) ::slotted(smoothly-icon),
+:host(:not([fill=clear]):active) ::slotted(smoothly-icon) {
 	color: rgb(var(--smoothly-color-contrast)) !important;
 	stroke: rgb(var(--smoothly-color-contrast)) !important;
 	fill: rgb(var(--smoothly-color-contrast)) !important;
 }
 :host([fill=clear]:hover) > button,
 :host([fill=clear]:focus) > button,
-:host([fill=clear]:active) > button{
+:host([fill=clear]:active) > button {
 	color: rgb(var(--smoothly-color-tint)) !important;
 	stroke: rgb(var(--smoothly-color-tint)) !important;
 	fill: rgb(var(--smoothly-color-tint)) !important;
 }
-:host([disabled]){
+:host([disabled]) {
 	opacity: 0.5;
 	pointer-events: none;
 }
 :host(:not([fill])),
 :host([fill=default]) {
-	color: rgb(var(--smoothly-color-contrast));
-	stroke: rgb(var(--smoothly-color-contrast));
-	fill: rgb(var(--smoothly-color-contrast));
 	background: rgb(var(--smoothly-color));
 	border-color: transparent;
 }
 :host([fill=solid]) {
-	stroke: rgb(var(--smoothly-color-contrast));
-	fill: rgb(var(--smoothly-color-contrast));
 	background: rgb(var(--smoothly-color));
-	border-color: rgb(var(--smoothly-color-shade));
+	border-color: rgb(var(--smoothly-color));
 }
 :host([fill=solid]) > button,
-:host([fill=default]) > button{
+:host([fill=default]) > button {
+	stroke: rgb(var(--smoothly-color-contrast));
+	fill: rgb(var(--smoothly-color-contrast));
 	color: rgb(var(--smoothly-color-contrast));
 }
-:host([fill=outline]) {
+:host([fill=outline]) > button,
+:host([fill=clear]) > button {
 	stroke: rgb(var(--smoothly-color));
 	fill: rgb(var(--smoothly-color));
+	color: rgb(var(--smoothly-color));
+}
+:host([fill=outline]) {
 	background: transparent;
 	border-color: rgb(var(--smoothly-color));
 }
 :host([fill=clear]) {
-	stroke: rgb(var(--smoothly-color));
-	fill: rgb(var(--smoothly-color));
 	background: transparent;
 	border-color: transparent;
 }
-:host([fill=outline]) > button,
-:host([fill=clear]) > button{
-	color: rgb(var(--smoothly-color));
-}
 ::slotted(smoothly-icon[slot=start]),
-::slotted(smoothly-icon[slot=end]){
+::slotted(smoothly-icon[slot=end]) {
 	font-size: 0.65em;
 }
-:host([hidden]){
+:host([hidden]) {
 	display: none;
 }

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

@@ -3,8 +3,10 @@ export class SmoothlyButtonDemo {
   render() {
     return [
       h("h2", null, "Buttons"),
-      h("section", null, h("h4", null, "Toggle button"), h("smoothly-toggle", null, h("smoothly-icon", { name: "card", fill: "solid", slot: "icon-slot" })), h("smoothly-toggle", null, h("smoothly-icon", { name: "briefcase", slot: "icon-slot" })), h("smoothly-toggle", null, h("smoothly-icon", { name: "airplane", slot: "icon-slot" })), h("h4", null, "Toggle switches"), h("smoothly-toggle-switch", { disabled: false, size: "small" }), h("smoothly-toggle-switch", { disabled: false }), h("smoothly-toggle-switch", { disabled: false, size: "large" }), h("h4", null, "Links with icons"), h("smoothly-button", { type: "link" }, h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "type link"), h("smoothly-button", { type: "button", color: "warning", fill: "default" }, h("smoothly-icon", { name: "call", slot: "start" }), h("a", { href: "https://google.com" }, "link")), h("smoothly-button", { link: "https://google.com", type: "link" }, h("smoothly-icon", { name: "arrow-forward", slot: "end" }), "link + type link"), h("h4", null, "Size and Color test"), h("smoothly-button", { color: "primary", fill: "solid", size: "small", shape: "rounded" }, "Color Primary + Small"), h("smoothly-button", { color: "secondary", fill: "solid", shape: "rounded" }, "Color Secondary + Default"), h("smoothly-button", { color: "warning", fill: "solid", size: "large" }, "Color Warning + Large"), h("smoothly-button", { color: "danger", fill: "solid", size: "small", shape: "rounded" }, "Color Danger + Small"), h("smoothly-button", { color: "success", fill: "solid", size: "small", shape: "rounded" }, "Color Success + Small"), h("smoothly-button", { color: "tertiary", fill: "solid", size: "small", shape: "rounded" }, "Color Tertiary + Small"), h("smoothly-button", { color: "dark", fill: "solid", size: "small", shape: "rounded" }, "Color Dark + Small"), h("smoothly-button", { color: "medium", fill: "solid", size: "small", shape: "rounded" }, "Color Medium + Small"), h("smoothly-button", { color: "light", fill: "solid", size: "small", shape: "rounded" }, "Color Light + Small"), h("h4", null, "Expand examples"), h("smoothly-button", { color: "secondary", fill: "solid", expand: "full" }, "Color Secondary + Default"), h("smoothly-button", { color: "warning", fill: "solid", expand: "block" }, "Color Warning + Large"), h("h4", null, "Fill examples"), h("div", null, h("smoothly-button", { shape: "rounded", color: "primary", fill: "solid" }, "Fill Solid"), h("smoothly-button", { shape: "rounded", color: "secondary", fill: "outline" }, "Fill Outline"), h("smoothly-button", { shape: "rounded", color: "tertiary", fill: "clear" }, "Fill Clear"), h("smoothly-button", { size: "icon", shape: "rounded", color: "success", fill: "solid" }, h("smoothly-icon", { name: "basketball", fill: "solid" }))), h("h4", null, "Buttons with Icon in \"start\""), h("div", null, h("smoothly-button", { shape: "rounded", fill: "solid", color: "warning" }, h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "Check"), h("smoothly-button", { shape: "rounded", fill: "solid", color: "secondary" }, h("smoothly-icon", { name: "basketball", slot: "start" }), "Check"), h("smoothly-button", { shape: "rounded", fill: "solid", color: "success" }, h("smoothly-icon", { name: "call", slot: "start" }), "Check"), h("smoothly-button", { size: "icon", fill: "solid", shape: "rounded", color: "success" }, h("smoothly-icon", { name: "call" }))), h("h4", null, "Buttons with Icon in \"end\""), h("smoothly-button", { fill: "solid", color: "light" }, "Go Forward", h("smoothly-icon", { name: "arrow-forward", slot: "end" })), h("h4", null, "Test for icon button"), h("div", null, h("smoothly-button", { size: "icon", fill: "solid", shape: "rounded", color: "success" }, h("smoothly-icon", { name: "call" })), h("smoothly-button", { size: "icon", shape: "rounded", color: "warning", fill: "solid" }, h("smoothly-icon", { name: "search-outline" })), h("smoothly-button", { size: "icon", shape: "rounded", color: "secondary" }, h("smoothly-icon", { name: "checkmark-circle" }))), h("h4", null, "Link examples"), h("div", null, h("smoothly-button", { type: "link" }, "type link"), h("smoothly-button", { type: "button", fill: "clear" }, h("a", { href: "https://google.com" }, "link")), h("smoothly-button", { link: "https://google.com", type: "link" }, "link + type link")), h("h4", null, "Disabled buttons"), h("div", null, h("smoothly-button", { disabled: true, fill: "solid", color: "secondary" }, "Disabled"), h("smoothly-button", { type: "link", link: "https://google.com", disabled: true }, "Disabled link"))),
-      h("smoothly-backtotop", null),
+      h("section", null, h("h4", null, "Confirm button (two clicks)"), h("div", null, h("smoothly-button-confirm", { name: "confirm", type: "button", shape: "rounded", color: "danger", size: "large" }, "Delete"), h("smoothly-button-confirm", { name: "confirm-icon", type: "button", shape: "rounded", color: "success", size: "icon" }, h("smoothly-icon", { name: "checkmark-outline", size: "small" }))), h("h4", null, "Toggle button"), h("smoothly-toggle", null, h("smoothly-icon", { name: "card", fill: "solid", slot: "icon-slot" })), h("smoothly-toggle", null, h("smoothly-icon", { name: "briefcase", slot: "icon-slot" })), h("smoothly-toggle", null, h("smoothly-icon", { name: "airplane", slot: "icon-slot" })), h("h4", null, "Toggle switches"), h("smoothly-toggle-switch", { checkmark: false, color: "primary", disabled: false, size: "small", onSmoothlyToggleSwitchChange: e => {
+          console.log("toggleSwitch ", e.detail);
+        } }), h("smoothly-toggle-switch", { disabled: false }), h("smoothly-toggle-switch", { disabled: false, size: "large" }), h("h4", null, "Links with icons"), h("smoothly-button", { type: "link" }, h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "type link"), h("smoothly-button", { type: "button", color: "warning", fill: "default" }, h("smoothly-icon", { name: "call", slot: "start" }), h("a", { href: "https://google.com" }, "link")), h("smoothly-button", { link: "https://google.com", type: "link" }, h("smoothly-icon", { name: "arrow-forward", slot: "end" }), "link + type link"), h("h4", null, "Size and Color test"), h("smoothly-button", { color: "primary", fill: "solid", size: "small", shape: "rounded" }, "Color Primary + Small"), h("smoothly-button", { color: "secondary", fill: "solid", shape: "rounded" }, "Color Secondary + Default"), h("smoothly-button", { color: "warning", fill: "solid", size: "large" }, "Color Warning + Large"), h("smoothly-button", { color: "danger", fill: "solid", size: "small", shape: "rounded" }, "Color Danger + Small"), h("smoothly-button", { color: "success", fill: "solid", size: "small", shape: "rounded" }, "Color Success + Small"), h("smoothly-button", { color: "tertiary", fill: "solid", size: "small", shape: "rounded" }, "Color Tertiary + Small"), h("smoothly-button", { color: "dark", fill: "solid", size: "small", shape: "rounded" }, "Color Dark + Small"), h("smoothly-button", { color: "medium", fill: "solid", size: "small", shape: "rounded" }, "Color Medium + Small"), h("smoothly-button", { color: "light", fill: "solid", size: "small", shape: "rounded" }, "Color Light + Small"), h("h4", null, "Expand examples"), h("smoothly-button", { color: "secondary", fill: "solid", expand: "full" }, "Color Secondary + Default"), h("smoothly-button", { color: "warning", fill: "solid", expand: "block" }, "Color Warning + Large"), h("h4", null, "Fill examples"), h("div", null, h("smoothly-button", { shape: "rounded", color: "primary", fill: "solid" }, h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "Fill Solid"), h("smoothly-button", { shape: "rounded", color: "secondary", fill: "outline" }, h("smoothly-icon", { name: "checkmark-circle", slot: "start", fill: "clear" }), "Fill Outline"), h("smoothly-button", { shape: "rounded", color: "tertiary", fill: "clear" }, h("smoothly-icon", { name: "checkmark-circle", slot: "start", fill: "clear" }), "Fill Clear"), h("smoothly-button", { size: "icon", shape: "rounded", color: "success", fill: "solid" }, h("smoothly-icon", { name: "basketball", fill: "solid" }))), h("h4", null, "Buttons with Icon in \"start\""), h("div", null, h("smoothly-button", { shape: "rounded", fill: "solid", color: "warning" }, h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "Check"), h("smoothly-button", { shape: "rounded", fill: "solid", color: "secondary" }, h("smoothly-icon", { name: "basketball", slot: "start" }), "Check"), h("smoothly-button", { shape: "rounded", fill: "solid", color: "success" }, h("smoothly-icon", { name: "call", slot: "start" }), "Check"), h("smoothly-button", { size: "icon", fill: "solid", shape: "rounded", color: "success" }, h("smoothly-icon", { name: "call" })), h("smoothly-button", { size: "flexible", fill: "solid", color: "success" }, h("smoothly-icon", { name: "airplane" }))), h("h4", null, "Buttons with Icon in \"end\""), h("smoothly-button", { fill: "solid", color: "light" }, "Go Forward", h("smoothly-icon", { name: "arrow-forward", slot: "end" })), h("h4", null, "Test for icon button"), h("div", null, h("smoothly-button", { size: "icon", fill: "solid", shape: "rounded", color: "success" }, h("smoothly-icon", { name: "call" })), h("smoothly-button", { size: "icon", shape: "rounded", color: "warning", fill: "solid" }, h("smoothly-icon", { name: "search-outline" })), h("smoothly-button", { size: "icon", shape: "rounded", color: "secondary" }, h("smoothly-icon", { name: "checkmark-circle" }))), h("h4", null, "Link examples"), h("div", null, h("smoothly-button", { type: "link" }, "type link"), h("smoothly-button", { type: "button", fill: "clear" }, h("a", { href: "https://google.com" }, "link")), h("smoothly-button", { link: "https://google.com", type: "link" }, "link + type link")), h("h4", null, "Disabled buttons"), h("div", null, h("smoothly-button", { disabled: true, fill: "solid", color: "secondary" }, "Disabled"), h("smoothly-button", { type: "link", link: "https://google.com", disabled: true }, "Disabled link"))),
+      h("smoothly-back-to-top", null),
     ];
   }
   static get is() { return "smoothly-button-demo"; }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/button-demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h } from \"@stencil/core\"\n@Component({\n\ttag: \"smoothly-button-demo\",\n\tstyleUrl: \"style.css\",\n})\nexport class SmoothlyButtonDemo {\n\trender() {\n\t\treturn [\n\t\t\t<h2>Buttons</h2>,\n\t\t\t<section>\n\t\t\t\t<h4>Toggle button</h4>\n\t\t\t\t<smoothly-toggle>\n\t\t\t\t\t<smoothly-icon name=\"card\" fill=\"solid\" slot=\"icon-slot\"></smoothly-icon>\n\t\t\t\t</smoothly-toggle>\n\t\t\t\t<smoothly-toggle>\n\t\t\t\t\t<smoothly-icon name=\"briefcase\" slot=\"icon-slot\"></smoothly-icon>\n\t\t\t\t</smoothly-toggle>\n\t\t\t\t<smoothly-toggle>\n\t\t\t\t\t<smoothly-icon name=\"airplane\" slot=\"icon-slot\"></smoothly-icon>\n\t\t\t\t</smoothly-toggle>\n\t\t\t\t<h4>Toggle switches</h4>\n\t\t\t\t<smoothly-toggle-switch disabled={false} size=\"small\"></smoothly-toggle-switch>\n\t\t\t\t<smoothly-toggle-switch disabled={false}></smoothly-toggle-switch>\n\t\t\t\t<smoothly-toggle-switch disabled={false} size=\"large\"></smoothly-toggle-switch>\n\t\t\t\t<h4>Links with icons</h4>\n\t\t\t\t<smoothly-button type=\"link\">\n\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\ttype link\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button type=\"button\" color=\"warning\" fill=\"default\">\n\t\t\t\t\t<smoothly-icon name=\"call\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\t<a href=\"https://google.com\">link</a>\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button link=\"https://google.com\" type=\"link\">\n\t\t\t\t\t<smoothly-icon name=\"arrow-forward\" slot=\"end\"></smoothly-icon>\n\t\t\t\t\tlink + type link\n\t\t\t\t</smoothly-button>\n\t\t\t\t<h4>Size and Color test</h4>\n\t\t\t\t<smoothly-button color=\"primary\" fill=\"solid\" size=\"small\" shape=\"rounded\">\n\t\t\t\t\tColor Primary + Small\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button color=\"secondary\" fill=\"solid\" shape=\"rounded\">\n\t\t\t\t\tColor Secondary + Default\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button color=\"warning\" fill=\"solid\" size=\"large\">\n\t\t\t\t\tColor Warning + Large\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button color=\"danger\" fill=\"solid\" size=\"small\" shape=\"rounded\">\n\t\t\t\t\tColor Danger + Small\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button color=\"success\" fill=\"solid\" size=\"small\" shape=\"rounded\">\n\t\t\t\t\tColor Success + Small\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button color=\"tertiary\" fill=\"solid\" size=\"small\" shape=\"rounded\">\n\t\t\t\t\tColor Tertiary + Small\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button color=\"dark\" fill=\"solid\" size=\"small\" shape=\"rounded\">\n\t\t\t\t\tColor Dark + Small\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button color=\"medium\" fill=\"solid\" size=\"small\" shape=\"rounded\">\n\t\t\t\t\tColor Medium + Small\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button color=\"light\" fill=\"solid\" size=\"small\" shape=\"rounded\">\n\t\t\t\t\tColor Light + Small\n\t\t\t\t</smoothly-button>\n\t\t\t\t<h4>Expand examples</h4>\n\t\t\t\t<smoothly-button color=\"secondary\" fill=\"solid\" expand=\"full\">\n\t\t\t\t\tColor Secondary + Default\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button color=\"warning\" fill=\"solid\" expand=\"block\">\n\t\t\t\t\tColor Warning + Large\n\t\t\t\t</smoothly-button>\n\t\t\t\t<h4>Fill examples</h4>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-button shape=\"rounded\" color=\"primary\" fill=\"solid\">\n\t\t\t\t\t\tFill Solid\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button shape=\"rounded\" color=\"secondary\" fill=\"outline\">\n\t\t\t\t\t\tFill Outline\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button shape=\"rounded\" color=\"tertiary\" fill=\"clear\">\n\t\t\t\t\t\tFill Clear\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button size=\"icon\" shape=\"rounded\" color=\"success\" fill=\"solid\">\n\t\t\t\t\t\t<smoothly-icon name=\"basketball\" fill=\"solid\"></smoothly-icon>\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</div>\n\t\t\t\t<h4>Buttons with Icon in \"start\"</h4>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-button shape=\"rounded\" fill=\"solid\" color=\"warning\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\t\tCheck\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button shape=\"rounded\" fill=\"solid\" color=\"secondary\">\n\t\t\t\t\t\t<smoothly-icon name=\"basketball\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\t\tCheck\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button shape=\"rounded\" fill=\"solid\" color=\"success\">\n\t\t\t\t\t\t<smoothly-icon name=\"call\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\t\tCheck\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button size=\"icon\" fill=\"solid\" shape=\"rounded\" color=\"success\">\n\t\t\t\t\t\t<smoothly-icon name=\"call\"></smoothly-icon>\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</div>\n\t\t\t\t<h4>Buttons with Icon in \"end\"</h4>\n\t\t\t\t<smoothly-button fill=\"solid\" color=\"light\">\n\t\t\t\t\tGo Forward\n\t\t\t\t\t<smoothly-icon name=\"arrow-forward\" slot=\"end\"></smoothly-icon>\n\t\t\t\t</smoothly-button>\n\t\t\t\t<h4>Test for icon button</h4>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-button size=\"icon\" fill=\"solid\" shape=\"rounded\" color=\"success\">\n\t\t\t\t\t\t<smoothly-icon name=\"call\"></smoothly-icon>\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button size=\"icon\" shape=\"rounded\" color=\"warning\" fill=\"solid\">\n\t\t\t\t\t\t<smoothly-icon name=\"search-outline\"></smoothly-icon>\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button size=\"icon\" shape=\"rounded\" color=\"secondary\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\"></smoothly-icon>\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</div>\n\t\t\t\t<h4>Link examples</h4>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-button type=\"link\">type link</smoothly-button>\n\t\t\t\t\t<smoothly-button type=\"button\" fill=\"clear\">\n\t\t\t\t\t\t<a href=\"https://google.com\">link</a>\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button link=\"https://google.com\" type=\"link\">\n\t\t\t\t\t\tlink + type link\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</div>\n\t\t\t\t<h4>Disabled buttons</h4>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-button disabled fill=\"solid\" color=\"secondary\">\n\t\t\t\t\t\tDisabled\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button type=\"link\" link=\"https://google.com\" disabled>\n\t\t\t\t\t\tDisabled link\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</div>\n\t\t\t</section>,\n\t\t\t<smoothly-backtotop></smoothly-backtotop>,\n\t\t]\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/button-demo/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h } from \"@stencil/core\"\n@Component({\n\ttag: \"smoothly-button-demo\",\n\tstyleUrl: \"style.css\",\n})\nexport class SmoothlyButtonDemo {\n\trender() {\n\t\treturn [\n\t\t\t<h2>Buttons</h2>,\n\t\t\t<section>\n\t\t\t\t<h4>Confirm button (two clicks)</h4>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-button-confirm name=\"confirm\" type=\"button\" shape=\"rounded\" color=\"danger\" size=\"large\">\n\t\t\t\t\t\tDelete\n\t\t\t\t\t</smoothly-button-confirm>\n\t\t\t\t\t<smoothly-button-confirm name=\"confirm-icon\" type=\"button\" shape=\"rounded\" color=\"success\" size=\"icon\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-outline\" size=\"small\" />\n\t\t\t\t\t</smoothly-button-confirm>\n\t\t\t\t</div>\n\t\t\t\t<h4>Toggle button</h4>\n\t\t\t\t<smoothly-toggle>\n\t\t\t\t\t<smoothly-icon name=\"card\" fill=\"solid\" slot=\"icon-slot\"></smoothly-icon>\n\t\t\t\t</smoothly-toggle>\n\t\t\t\t<smoothly-toggle>\n\t\t\t\t\t<smoothly-icon name=\"briefcase\" slot=\"icon-slot\"></smoothly-icon>\n\t\t\t\t</smoothly-toggle>\n\t\t\t\t<smoothly-toggle>\n\t\t\t\t\t<smoothly-icon name=\"airplane\" slot=\"icon-slot\"></smoothly-icon>\n\t\t\t\t</smoothly-toggle>\n\t\t\t\t<h4>Toggle switches</h4>\n\t\t\t\t<smoothly-toggle-switch\n\t\t\t\t\tcheckmark={false}\n\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\tdisabled={false}\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tonSmoothlyToggleSwitchChange={e => {\n\t\t\t\t\t\tconsole.log(\"toggleSwitch \", e.detail)\n\t\t\t\t\t}}></smoothly-toggle-switch>\n\t\t\t\t<smoothly-toggle-switch disabled={false}></smoothly-toggle-switch>\n\t\t\t\t<smoothly-toggle-switch disabled={false} size=\"large\"></smoothly-toggle-switch>\n\t\t\t\t<h4>Links with icons</h4>\n\t\t\t\t<smoothly-button type=\"link\">\n\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\ttype link\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button type=\"button\" color=\"warning\" fill=\"default\">\n\t\t\t\t\t<smoothly-icon name=\"call\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\t<a href=\"https://google.com\">link</a>\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button link=\"https://google.com\" type=\"link\">\n\t\t\t\t\t<smoothly-icon name=\"arrow-forward\" slot=\"end\"></smoothly-icon>\n\t\t\t\t\tlink + type link\n\t\t\t\t</smoothly-button>\n\t\t\t\t<h4>Size and Color test</h4>\n\t\t\t\t<smoothly-button color=\"primary\" fill=\"solid\" size=\"small\" shape=\"rounded\">\n\t\t\t\t\tColor Primary + Small\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button color=\"secondary\" fill=\"solid\" shape=\"rounded\">\n\t\t\t\t\tColor Secondary + Default\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button color=\"warning\" fill=\"solid\" size=\"large\">\n\t\t\t\t\tColor Warning + Large\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button color=\"danger\" fill=\"solid\" size=\"small\" shape=\"rounded\">\n\t\t\t\t\tColor Danger + Small\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button color=\"success\" fill=\"solid\" size=\"small\" shape=\"rounded\">\n\t\t\t\t\tColor Success + Small\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button color=\"tertiary\" fill=\"solid\" size=\"small\" shape=\"rounded\">\n\t\t\t\t\tColor Tertiary + Small\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button color=\"dark\" fill=\"solid\" size=\"small\" shape=\"rounded\">\n\t\t\t\t\tColor Dark + Small\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button color=\"medium\" fill=\"solid\" size=\"small\" shape=\"rounded\">\n\t\t\t\t\tColor Medium + Small\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button color=\"light\" fill=\"solid\" size=\"small\" shape=\"rounded\">\n\t\t\t\t\tColor Light + Small\n\t\t\t\t</smoothly-button>\n\t\t\t\t<h4>Expand examples</h4>\n\t\t\t\t<smoothly-button color=\"secondary\" fill=\"solid\" expand=\"full\">\n\t\t\t\t\tColor Secondary + Default\n\t\t\t\t</smoothly-button>\n\t\t\t\t<smoothly-button color=\"warning\" fill=\"solid\" expand=\"block\">\n\t\t\t\t\tColor Warning + Large\n\t\t\t\t</smoothly-button>\n\t\t\t\t<h4>Fill examples</h4>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-button shape=\"rounded\" color=\"primary\" fill=\"solid\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\t\tFill Solid\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button shape=\"rounded\" color=\"secondary\" fill=\"outline\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" fill=\"clear\"></smoothly-icon>\n\t\t\t\t\t\tFill Outline\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button shape=\"rounded\" color=\"tertiary\" fill=\"clear\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\" fill=\"clear\"></smoothly-icon>\n\t\t\t\t\t\tFill Clear\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button size=\"icon\" shape=\"rounded\" color=\"success\" fill=\"solid\">\n\t\t\t\t\t\t<smoothly-icon name=\"basketball\" fill=\"solid\"></smoothly-icon>\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</div>\n\t\t\t\t<h4>Buttons with Icon in \"start\"</h4>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-button shape=\"rounded\" fill=\"solid\" color=\"warning\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\t\tCheck\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button shape=\"rounded\" fill=\"solid\" color=\"secondary\">\n\t\t\t\t\t\t<smoothly-icon name=\"basketball\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\t\tCheck\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button shape=\"rounded\" fill=\"solid\" color=\"success\">\n\t\t\t\t\t\t<smoothly-icon name=\"call\" slot=\"start\"></smoothly-icon>\n\t\t\t\t\t\tCheck\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button size=\"icon\" fill=\"solid\" shape=\"rounded\" color=\"success\">\n\t\t\t\t\t\t<smoothly-icon name=\"call\"></smoothly-icon>\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button size=\"flexible\" fill=\"solid\" color=\"success\">\n\t\t\t\t\t\t<smoothly-icon name=\"airplane\"></smoothly-icon>\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</div>\n\t\t\t\t<h4>Buttons with Icon in \"end\"</h4>\n\t\t\t\t<smoothly-button fill=\"solid\" color=\"light\">\n\t\t\t\t\tGo Forward\n\t\t\t\t\t<smoothly-icon name=\"arrow-forward\" slot=\"end\"></smoothly-icon>\n\t\t\t\t</smoothly-button>\n\t\t\t\t<h4>Test for icon button</h4>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-button size=\"icon\" fill=\"solid\" shape=\"rounded\" color=\"success\">\n\t\t\t\t\t\t<smoothly-icon name=\"call\"></smoothly-icon>\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button size=\"icon\" shape=\"rounded\" color=\"warning\" fill=\"solid\">\n\t\t\t\t\t\t<smoothly-icon name=\"search-outline\"></smoothly-icon>\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button size=\"icon\" shape=\"rounded\" color=\"secondary\">\n\t\t\t\t\t\t<smoothly-icon name=\"checkmark-circle\"></smoothly-icon>\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</div>\n\t\t\t\t<h4>Link examples</h4>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-button type=\"link\">type link</smoothly-button>\n\t\t\t\t\t<smoothly-button type=\"button\" fill=\"clear\">\n\t\t\t\t\t\t<a href=\"https://google.com\">link</a>\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button link=\"https://google.com\" type=\"link\">\n\t\t\t\t\t\tlink + type link\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</div>\n\t\t\t\t<h4>Disabled buttons</h4>\n\t\t\t\t<div>\n\t\t\t\t\t<smoothly-button disabled fill=\"solid\" color=\"secondary\">\n\t\t\t\t\t\tDisabled\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t\t<smoothly-button type=\"link\" link=\"https://google.com\" disabled>\n\t\t\t\t\t\tDisabled link\n\t\t\t\t\t</smoothly-button>\n\t\t\t\t</div>\n\t\t\t</section>,\n\t\t\t<smoothly-back-to-top />,\n\t\t]\n\t}\n}\n"]}

package/dist/collection/components/button-demo/style.css

@@ -1,5 +1,6 @@
 smoothly-button-demo {
 	display: block;
+	margin: 1rem;
 }
 
 smoothly-button-demo > section > div {

package/dist/collection/components/calendar/generate.js

@@ -8,7 +8,7 @@ export function month(date) {
     const r = [];
     for (let column = 0; column < 7; column++) {
       const d = new Date(date);
-      d.setDate(day++);
+      d.setUTCDate(day++);
       r.push(isoly.Date.create(d));
     }
     if (row < 5 || isoly.Date.firstOfMonth(r[0]) == isoly.Date.firstOfMonth(date))

package/dist/collection/components/calendar/generate.js.map

@@ -1 +1 @@
-{"version":3,"file":"generate.js","sourceRoot":"","sources":["../../../src/components/calendar/generate.ts"],"names":[],"mappings":"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","sourcesContent":["import * as isoly from \"isoly\"\n\nexport function month(date: isoly.Date): isoly.Date[][] {\n\tconst d = new Date(date)\n\td.setDate(1)\n\tlet day = -((d.getDay() + 6) % 7) + 1\n\tconst result: string[][] = []\n\tfor (let row = 0; row < 6; row++) {\n\t\tconst r = []\n\t\tfor (let column = 0; column < 7; column++) {\n\t\t\tconst d = new Date(date)\n\t\t\td.setDate(day++)\n\t\t\tr.push(isoly.Date.create(d))\n\t\t}\n\t\tif (row < 5 || isoly.Date.firstOfMonth(r[0]) == isoly.Date.firstOfMonth(date))\n\t\t\tresult.push(r)\n\t}\n\treturn result\n}\n\nexport function weekdays(): string[] {\n\tconst day = new globalThis.Date()\n\tday.setDate(day.getDate() - day.getDay() + 1)\n\tconst result: string[] = []\n\tfor (let i = 0; i < 7; i++) {\n\t\tresult.push(day.toLocaleString(undefined, { weekday: \"short\" }))\n\t\tday.setDate(day.getDate() + 1)\n\t}\n\treturn result\n}\n\nexport function months(current: isoly.Date): { date: isoly.Date; name: string; selected?: boolean }[] {\n\tconst day = new globalThis.Date(current)\n\tconst result: { date: isoly.Date; name: string; selected?: boolean }[] = []\n\tfor (let i = 0; i < 12; i++) {\n\t\tday.setMonth(i, 28)\n\t\tconst date = isoly.Date.create(day)\n\t\tresult.push({\n\t\t\tdate,\n\t\t\tname: day.toLocaleString(undefined, { month: \"long\" }),\n\t\t\tselected: date.substr(0, 7) == current.substr(0, 7),\n\t\t})\n\t}\n\treturn result\n}\nexport function years(current: isoly.Date): { date: isoly.Date; name: string; selected?: boolean }[] {\n\tconst day = new globalThis.Date(current)\n\tconst start = new Date().getFullYear() - 10\n\tconst end = new Date().getFullYear() + 10\n\tconst result: { date: isoly.Date; name: string; selected?: boolean }[] = []\n\tfor (let i = start; i <= end; i++) {\n\t\tday.setFullYear(i)\n\t\tconst date = isoly.Date.create(day)\n\t\tresult.push({\n\t\t\tdate,\n\t\t\tname: day.toLocaleString(undefined, { year: \"numeric\" }),\n\t\t\tselected: date == current,\n\t\t})\n\t}\n\treturn result\n}\n"]}
+{"version":3,"file":"generate.js","sourceRoot":"","sources":["../../../src/components/calendar/generate.ts"],"names":[],"mappings":"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","sourcesContent":["import * as isoly from \"isoly\"\n\nexport function month(date: isoly.Date): isoly.Date[][] {\n\tconst d = new Date(date)\n\td.setDate(1)\n\tlet day = -((d.getDay() + 6) % 7) + 1\n\tconst result: string[][] = []\n\tfor (let row = 0; row < 6; row++) {\n\t\tconst r = []\n\t\tfor (let column = 0; column < 7; column++) {\n\t\t\tconst d = new Date(date)\n\t\t\td.setUTCDate(day++)\n\t\t\tr.push(isoly.Date.create(d))\n\t\t}\n\t\tif (row < 5 || isoly.Date.firstOfMonth(r[0]) == isoly.Date.firstOfMonth(date))\n\t\t\tresult.push(r)\n\t}\n\treturn result\n}\n\nexport function weekdays(): string[] {\n\tconst day = new globalThis.Date()\n\tday.setDate(day.getDate() - day.getDay() + 1)\n\tconst result: string[] = []\n\tfor (let i = 0; i < 7; i++) {\n\t\tresult.push(day.toLocaleString(undefined, { weekday: \"short\" }))\n\t\tday.setDate(day.getDate() + 1)\n\t}\n\treturn result\n}\n\nexport function months(current: isoly.Date): { date: isoly.Date; name: string; selected?: boolean }[] {\n\tconst day = new globalThis.Date(current)\n\tconst result: { date: isoly.Date; name: string; selected?: boolean }[] = []\n\tfor (let i = 0; i < 12; i++) {\n\t\tday.setMonth(i, 28)\n\t\tconst date = isoly.Date.create(day)\n\t\tresult.push({\n\t\t\tdate,\n\t\t\tname: day.toLocaleString(undefined, { month: \"long\" }),\n\t\t\tselected: date.substr(0, 7) == current.substr(0, 7),\n\t\t})\n\t}\n\treturn result\n}\nexport function years(current: isoly.Date): { date: isoly.Date; name: string; selected?: boolean }[] {\n\tconst day = new globalThis.Date(current)\n\tconst start = new Date().getFullYear() - 10\n\tconst end = new Date().getFullYear() + 10\n\tconst result: { date: isoly.Date; name: string; selected?: boolean }[] = []\n\tfor (let i = start; i <= end; i++) {\n\t\tday.setFullYear(i)\n\t\tconst date = isoly.Date.create(day)\n\t\tresult.push({\n\t\t\tdate,\n\t\t\tname: day.toLocaleString(undefined, { year: \"numeric\" }),\n\t\t\tselected: date == current,\n\t\t})\n\t}\n\treturn result\n}\n"]}

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

@@ -14,13 +14,13 @@ export class Calendar {
     this.firstSelected = undefined;
   }
   onStart(next) {
-    this.startChanged.emit(next);
+    this.smoothlyStartChange.emit(next);
   }
   onEnd(next) {
-    this.endChanged.emit(next);
+    this.smoothlyEndChange.emit(next);
   }
   onClick(date) {
-    this.valueChanged.emit((this.value = date));
+    this.smoothlyValueChange.emit((this.value = date));
     this.clickCounter += 1;
     if (this.doubleInput) {
       if (this.clickCounter % 2 == 1)
@@ -32,12 +32,12 @@ export class Calendar {
           this.start = date;
       }
     }
-    !this.doubleInput && this.dateSet.emit(this.value);
+    !this.doubleInput && this.smoothlyDateSet.emit(this.value);
     this.doubleInput &&
       this.clickCounter % 2 == 0 &&
       this.start &&
       this.end &&
-      this.dateRangeSet.emit({ start: this.start, end: this.end });
+      this.smoothlyDateRangeSet.emit({ start: this.start, end: this.end });
   }
   onHover(date) {
     if (this.doubleInput && this.clickCounter % 2 == 1) {
@@ -54,7 +54,7 @@ export class Calendar {
   render() {
     var _a, _b;
     return [
-      h("smoothly-input-month", { value: (_a = this.month) !== null && _a !== void 0 ? _a : this.value, onValueChanged: event => {
+      h("smoothly-input-month", { value: (_a = this.month) !== null && _a !== void 0 ? _a : this.value, onSmoothlyValueChange: event => {
           this.month = event.detail;
           event.stopPropagation();
         } }),
@@ -250,8 +250,8 @@ export class Calendar {
   }
   static get events() {
     return [{
-        "method": "valueChanged",
-        "name": "valueChanged",
+        "method": "smoothlyValueChange",
+        "name": "smoothlyValueChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -270,8 +270,8 @@ export class Calendar {
           }
         }
       }, {
-        "method": "startChanged",
-        "name": "startChanged",
+        "method": "smoothlyStartChange",
+        "name": "smoothlyStartChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -290,8 +290,8 @@ export class Calendar {
           }
         }
       }, {
-        "method": "endChanged",
-        "name": "endChanged",
+        "method": "smoothlyEndChange",
+        "name": "smoothlyEndChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -310,8 +310,8 @@ export class Calendar {
           }
         }
       }, {
-        "method": "dateSet",
-        "name": "dateSet",
+        "method": "smoothlyDateSet",
+        "name": "smoothlyDateSet",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -330,8 +330,8 @@ export class Calendar {
           }
         }
       }, {
-        "method": "dateRangeSet",
-        "name": "dateRangeSet",
+        "method": "smoothlyDateRangeSet",
+        "name": "smoothlyDateRangeSet",
         "bubbles": true,
         "cancelable": true,
         "composed": true,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/calendar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from \"@stencil/core\"\nimport { Date, DateRange } from \"isoly\"\nimport * as generate from \"./generate\"\n\n@Component({\n\ttag: \"smoothly-calendar\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class Calendar {\n\t@Element() element: HTMLTableRowElement\n\t@Prop({ mutable: true }) month?: Date\n\t@Prop({ mutable: true }) value: Date = Date.now()\n\t@Prop({ mutable: true }) start?: Date\n\t@Prop({ mutable: true }) end?: Date\n\t@Prop({ mutable: true }) max: Date\n\t@Prop({ mutable: true }) min: Date\n\t@Prop({ reflect: true }) doubleInput: boolean\n\t@Event() valueChanged: EventEmitter<Date>\n\t@Event() startChanged: EventEmitter<Date>\n\t@Event() endChanged: EventEmitter<Date>\n\t@Event() dateSet: EventEmitter<Date>\n\t@Event() dateRangeSet: EventEmitter<DateRange>\n\tprivate frozenDate: Date\n\t@State() firstSelected: boolean\n\t@Watch(\"start\")\n\tonStart(next: Date) {\n\t\tthis.startChanged.emit(next)\n\t}\n\t@Watch(\"end\")\n\tonEnd(next: Date) {\n\t\tthis.endChanged.emit(next)\n\t}\n\tprivate clickCounter = 0\n\tprivate onClick(date: Date) {\n\t\tthis.valueChanged.emit((this.value = date))\n\t\tthis.clickCounter += 1\n\t\tif (this.doubleInput) {\n\t\t\tif (this.clickCounter % 2 == 1)\n\t\t\t\tthis.start = this.end = this.frozenDate = date\n\t\t\telse {\n\t\t\t\tif (this.start && date > this.start)\n\t\t\t\t\tthis.end = date\n\t\t\t\telse\n\t\t\t\t\tthis.start = date\n\t\t\t}\n\t\t}\n\t\t!this.doubleInput && this.dateSet.emit(this.value)\n\t\tthis.doubleInput &&\n\t\t\tthis.clickCounter % 2 == 0 &&\n\t\t\tthis.start &&\n\t\t\tthis.end &&\n\t\t\tthis.dateRangeSet.emit({ start: this.start, end: this.end })\n\t}\n\tprivate onHover(date: Date) {\n\t\tif (this.doubleInput && this.clickCounter % 2 == 1) {\n\t\t\tif (date < this.frozenDate) {\n\t\t\t\tthis.start = date\n\t\t\t\tthis.end = this.frozenDate\n\t\t\t} else {\n\t\t\t\tthis.start = this.frozenDate\n\t\t\t\tthis.end = date\n\t\t\t}\n\t\t}\n\t}\n\trender() {\n\t\treturn [\n\t\t\t<smoothly-input-month\n\t\t\t\tvalue={this.month ?? this.value}\n\t\t\t\tonValueChanged={event => {\n\t\t\t\t\tthis.month = event.detail\n\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t}}></smoothly-input-month>,\n\t\t\t<table>\n\t\t\t\t<thead>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t{generate.weekdays().map(day => (\n\t\t\t\t\t\t\t<th>{day}</th>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t{generate.month(this.month ?? this.value).map(week => (\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t{week.map(date => (\n\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\ttabindex={1}\n\t\t\t\t\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t\t\t\t\t!this.doubleInput && (this.min || this.max) && (date < this.min || date > this.max)\n\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t: this.onHover(date)\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\t(this.min || this.max) && (date < this.min || date > this.max) ? undefined : () => this.onClick(date)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tclass={(date == this.value ? [\"selected\"] : [])\n\t\t\t\t\t\t\t\t\t.concat(\n\t\t\t\t\t\t\t\t\t\t...(date == Date.now() ? [\"today\"] : []),\n\t\t\t\t\t\t\t\t\t\tDate.firstOfMonth(this.month ?? this.value) == Date.firstOfMonth(date) ? [\"currentMonth\"] : [],\n\t\t\t\t\t\t\t\t\t\tthis.doubleInput\n\t\t\t\t\t\t\t\t\t\t\t? this.start == date || this.end == date\n\t\t\t\t\t\t\t\t\t\t\t\t? [\"selected\"]\n\t\t\t\t\t\t\t\t\t\t\t\t: date >= (this.start ?? \"\") && date <= (this.end ?? \"\")\n\t\t\t\t\t\t\t\t\t\t\t\t? [\"dateRange\"]\n\t\t\t\t\t\t\t\t\t\t\t\t: []\n\t\t\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t.concat(...(this.min || this.max ? (date < this.min || date > this.max ? [\"disable\"] : []) : \"\"))\n\t\t\t\t\t\t\t\t\t.join(\" \")}>\n\t\t\t\t\t\t\t\t{date.substring(8, 10)}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</tr>\n\t\t\t\t))}\n\t\t\t</table>,\n\t\t]\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/calendar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from \"@stencil/core\"\nimport { Date, DateRange } from \"isoly\"\nimport * as generate from \"./generate\"\n\n@Component({\n\ttag: \"smoothly-calendar\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class Calendar {\n\t@Element() element: HTMLTableRowElement\n\t@Prop({ mutable: true }) month?: Date\n\t@Prop({ mutable: true }) value: Date = Date.now()\n\t@Prop({ mutable: true }) start?: Date\n\t@Prop({ mutable: true }) end?: Date\n\t@Prop({ mutable: true }) max: Date\n\t@Prop({ mutable: true }) min: Date\n\t@Prop({ reflect: true }) doubleInput: boolean\n\t@Event() smoothlyValueChange: EventEmitter<Date>\n\t@Event() smoothlyStartChange: EventEmitter<Date>\n\t@Event() smoothlyEndChange: EventEmitter<Date>\n\t@Event() smoothlyDateSet: EventEmitter<Date>\n\t@Event() smoothlyDateRangeSet: EventEmitter<DateRange>\n\tprivate frozenDate: Date\n\t@State() firstSelected: boolean\n\t@Watch(\"start\")\n\tonStart(next: Date) {\n\t\tthis.smoothlyStartChange.emit(next)\n\t}\n\t@Watch(\"end\")\n\tonEnd(next: Date) {\n\t\tthis.smoothlyEndChange.emit(next)\n\t}\n\tprivate clickCounter = 0\n\tprivate onClick(date: Date) {\n\t\tthis.smoothlyValueChange.emit((this.value = date))\n\t\tthis.clickCounter += 1\n\t\tif (this.doubleInput) {\n\t\t\tif (this.clickCounter % 2 == 1)\n\t\t\t\tthis.start = this.end = this.frozenDate = date\n\t\t\telse {\n\t\t\t\tif (this.start && date > this.start)\n\t\t\t\t\tthis.end = date\n\t\t\t\telse\n\t\t\t\t\tthis.start = date\n\t\t\t}\n\t\t}\n\t\t!this.doubleInput && this.smoothlyDateSet.emit(this.value)\n\t\tthis.doubleInput &&\n\t\t\tthis.clickCounter % 2 == 0 &&\n\t\t\tthis.start &&\n\t\t\tthis.end &&\n\t\t\tthis.smoothlyDateRangeSet.emit({ start: this.start, end: this.end })\n\t}\n\tprivate onHover(date: Date) {\n\t\tif (this.doubleInput && this.clickCounter % 2 == 1) {\n\t\t\tif (date < this.frozenDate) {\n\t\t\t\tthis.start = date\n\t\t\t\tthis.end = this.frozenDate\n\t\t\t} else {\n\t\t\t\tthis.start = this.frozenDate\n\t\t\t\tthis.end = date\n\t\t\t}\n\t\t}\n\t}\n\trender() {\n\t\treturn [\n\t\t\t<smoothly-input-month\n\t\t\t\tvalue={this.month ?? this.value}\n\t\t\t\tonSmoothlyValueChange={event => {\n\t\t\t\t\tthis.month = event.detail\n\t\t\t\t\tevent.stopPropagation()\n\t\t\t\t}}></smoothly-input-month>,\n\t\t\t<table>\n\t\t\t\t<thead>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t{generate.weekdays().map(day => (\n\t\t\t\t\t\t\t<th>{day}</th>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t{generate.month(this.month ?? this.value).map(week => (\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t{week.map(date => (\n\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\ttabindex={1}\n\t\t\t\t\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t\t\t\t\t!this.doubleInput && (this.min || this.max) && (date < this.min || date > this.max)\n\t\t\t\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t\t\t\t: this.onHover(date)\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\t(this.min || this.max) && (date < this.min || date > this.max) ? undefined : () => this.onClick(date)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tclass={(date == this.value ? [\"selected\"] : [])\n\t\t\t\t\t\t\t\t\t.concat(\n\t\t\t\t\t\t\t\t\t\t...(date == Date.now() ? [\"today\"] : []),\n\t\t\t\t\t\t\t\t\t\tDate.firstOfMonth(this.month ?? this.value) == Date.firstOfMonth(date) ? [\"currentMonth\"] : [],\n\t\t\t\t\t\t\t\t\t\tthis.doubleInput\n\t\t\t\t\t\t\t\t\t\t\t? this.start == date || this.end == date\n\t\t\t\t\t\t\t\t\t\t\t\t? [\"selected\"]\n\t\t\t\t\t\t\t\t\t\t\t\t: date >= (this.start ?? \"\") && date <= (this.end ?? \"\")\n\t\t\t\t\t\t\t\t\t\t\t\t? [\"dateRange\"]\n\t\t\t\t\t\t\t\t\t\t\t\t: []\n\t\t\t\t\t\t\t\t\t\t\t: \"\"\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t.concat(...(this.min || this.max ? (date < this.min || date > this.max ? [\"disable\"] : []) : \"\"))\n\t\t\t\t\t\t\t\t\t.join(\" \")}>\n\t\t\t\t\t\t\t\t{date.substring(8, 10)}\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</tr>\n\t\t\t\t))}\n\t\t\t</table>,\n\t\t]\n\t}\n}\n"]}

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

@@ -5,31 +5,40 @@ export class SmoothlyCheckbox {
     this.size = "tiny";
     this.checked = false;
     this.intermediate = false;
+    this.unavailable = false;
+    this.disabled = false;
     this.name = undefined;
     this.value = undefined;
-    this.disabled = undefined;
     this.t = undefined;
   }
   componentWillLoad() {
     this.t = translation.create(this.element);
   }
+  unavailableChanged() {
+    if (this.unavailable && this.checked)
+      this.smoothlyInput.emit({ [this.name]: undefined });
+  }
   async toggle() {
-    if (!this.disabled) {
+    if (!this.disabled && !this.unavailable) {
       const checked = this.intermediate || this.checked == false;
-      this.smoothlyChecked.emit({
+      this.smoothlyInput.emit({
         [this.name]: checked ? this.value : undefined,
       });
       this.checked = checked;
     }
   }
+  async clear() {
+    this.checked = false;
+    this.smoothlyInput.emit({ [this.name]: undefined });
+  }
   render() {
-    return (h(Host, null, h("main", null, h("div", null, h("smoothly-icon", { toolTip: this.t(!this.checked ? "Select" : "De-select"), onClick: e => {
-        this.toggle();
-      }, size: this.size, name: this.intermediate && !this.checked
-        ? "remove-outline"
-        : this.checked && !this.intermediate
-          ? "checkmark-outline"
-          : "empty" })), h("label", { htmlFor: this.name }, h("slot", null))), h("slot", { name: "expansion" })));
+    return (h(Host, null, h("smoothly-icon", { toolTip: this.t(!this.checked ? "Select" : "De-select"), onClick: () => this.toggle(), size: this.size, name: this.unavailable
+        ? "close-outline"
+        : this.intermediate && !this.checked
+          ? "remove-outline"
+          : this.checked && !this.intermediate
+            ? "checkmark-outline"
+            : "empty" }), h("label", { htmlFor: this.name }, h("slot", null)), h("div", { class: "expansion" }, h("slot", { name: "expansion" }))));
   }
   static get is() { return "smoothly-checkbox"; }
   static get encapsulation() { return "scoped"; }
@@ -99,12 +108,12 @@ export class SmoothlyCheckbox {
         "reflect": true,
         "defaultValue": "false"
       },
-      "name": {
-        "type": "string",
+      "unavailable": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -113,15 +122,16 @@ export class SmoothlyCheckbox {
           "tags": [],
           "text": ""
         },
-        "attribute": "name",
-        "reflect": false
+        "attribute": "unavailable",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "value": {
-        "type": "any",
+      "disabled": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
@@ -130,15 +140,33 @@ export class SmoothlyCheckbox {
           "tags": [],
           "text": ""
         },
-        "attribute": "value",
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
         "reflect": false
       },
-      "disabled": {
-        "type": "boolean",
+      "value": {
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "any",
+          "resolved": "any",
           "references": {}
         },
         "required": false,
@@ -147,8 +175,8 @@ export class SmoothlyCheckbox {
           "tags": [],
           "text": ""
         },
-        "attribute": "disabled",
-        "reflect": true
+        "attribute": "value",
+        "reflect": false
       }
     };
   }
@@ -159,8 +187,8 @@ export class SmoothlyCheckbox {
   }
   static get events() {
     return [{
-        "method": "smoothlyChecked",
-        "name": "smoothlyChecked",
+        "method": "smoothlyInput",
+        "name": "smoothlyInput",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -196,9 +224,34 @@ export class SmoothlyCheckbox {
           "text": "",
           "tags": []
         }
+      },
+      "clear": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }
   static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "checked",
+        "methodName": "unavailableChanged"
+      }, {
+        "propName": "unavailable",
+        "methodName": "unavailableChanged"
+      }];
+  }
 }
 //# sourceMappingURL=index.js.map