smoothly 1.0.0-alpha.99 → 1.0.0

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

@@ -3,7 +3,9 @@ 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" }, 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("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("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),
     ];
   }

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\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</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"]}
+{"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":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,UAAU,KAAK,CAAC,IAAgB;EACrC,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAA;EACxB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;EACZ,IAAI,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;EACrC,MAAM,MAAM,GAAe,EAAE,CAAA;EAC7B,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,EAAE,EAAE;IACjC,MAAM,CAAC,GAAG,EAAE,CAAA;IACZ,KAAK,IAAI,MAAM,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE;MAC1C,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAA;MACxB,CAAC,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,CAAA;MACnB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;KAC5B;IACD,IAAI,GAAG,GAAG,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;MAC5E,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;GACf;EACD,OAAO,MAAM,CAAA;AACd,CAAC;AAED,MAAM,UAAU,QAAQ;EACvB,MAAM,GAAG,GAAG,IAAI,UAAU,CAAC,IAAI,EAAE,CAAA;EACjC,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;EAC7C,MAAM,MAAM,GAAa,EAAE,CAAA;EAC3B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;IAC3B,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA;IAChE,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAA;GAC9B;EACD,OAAO,MAAM,CAAA;AACd,CAAC;AAED,MAAM,UAAU,MAAM,CAAC,OAAmB;EACzC,MAAM,GAAG,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EACxC,MAAM,MAAM,GAA6D,EAAE,CAAA;EAC3E,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE;IAC5B,GAAG,CAAC,QAAQ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAA;IACnB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;IACnC,MAAM,CAAC,IAAI,CAAC;MACX,IAAI;MACJ,IAAI,EAAE,GAAG,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;MACtD,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;KACnD,CAAC,CAAA;GACF;EACD,OAAO,MAAM,CAAA;AACd,CAAC;AACD,MAAM,UAAU,KAAK,CAAC,OAAmB;EACxC,MAAM,GAAG,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EACxC,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,GAAG,EAAE,CAAA;EAC3C,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,GAAG,EAAE,CAAA;EACzC,MAAM,MAAM,GAA6D,EAAE,CAAA;EAC3E,KAAK,IAAI,CAAC,GAAG,KAAK,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,EAAE,EAAE;IAClC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAA;IAClB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;IACnC,MAAM,CAAC,IAAI,CAAC;MACX,IAAI;MACJ,IAAI,EAAE,GAAG,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;MACxD,QAAQ,EAAE,IAAI,IAAI,OAAO;KACzB,CAAC,CAAA;GACF;EACD,OAAO,MAAM,CAAA;AACd,CAAC","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,16 +5,21 @@ 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.smoothlyInput.emit({
         [this.name]: checked ? this.value : undefined,
@@ -24,18 +29,16 @@ export class SmoothlyCheckbox {
   }
   async clear() {
     this.checked = false;
-    this.smoothlyInput.emit({
-      [this.name]: undefined,
-    });
+    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"; }
@@ -105,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,
@@ -119,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,
@@ -136,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,
@@ -153,8 +175,8 @@ export class SmoothlyCheckbox {
           "tags": [],
           "text": ""
         },
-        "attribute": "disabled",
-        "reflect": true
+        "attribute": "value",
+        "reflect": false
       }
     };
   }
@@ -222,5 +244,14 @@ export class SmoothlyCheckbox {
     };
   }
   static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "checked",
+        "methodName": "unavailableChanged"
+      }, {
+        "propName": "unavailable",
+        "methodName": "unavailableChanged"
+      }];
+  }
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAGrG,OAAO,KAAK,WAAW,MAAM,eAAe,CAAA;AAM5C,MAAM,OAAO,gBAAgB;;gBAE0B,MAAM;mBACV,KAAK;wBACA,KAAK;;;;;;EAO5D,iBAAiB;IAChB,IAAI,CAAC,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC1C,CAAC;EAGD,KAAK,CAAC,MAAM;IACX,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MACnB,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,CAAA;MAC1D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;QACvB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;OAC7C,CAAC,CAAA;MACF,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;KACtB;EACF,CAAC;EAED,KAAK,CAAC,KAAK;IACV,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;IACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;MACvB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,SAAS;KACtB,CAAC,CAAA;EACH,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ;QACC;UACC,qBACC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,EACvD,OAAO,EAAE,CAAC,CAAC,EAAE;cACZ,IAAI,CAAC,MAAM,EAAE,CAAA;YACd,CAAC,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EACH,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,OAAO;cACjC,CAAC,CAAC,gBAAgB;cAClB,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY;gBACpC,CAAC,CAAC,mBAAmB;gBACrB,CAAC,CAAC,OAAO,GACO,CACd;QACN,aAAO,OAAO,EAAE,IAAI,CAAC,IAAI;UACxB,eAAa,CACN,CACF;MACP,YAAM,IAAI,EAAC,WAAW,GAAG,CACnB,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from \"@stencil/core\"\nimport * as langly from \"langly\"\nimport { Clearable } from \"../filter/Clearable\"\nimport * as translation from \"./translation\"\n@Component({\n\ttag: \"smoothly-checkbox\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyCheckbox implements Clearable {\n\t@Element() element: HTMLElement\n\t@Prop() size: \"tiny\" | \"small\" | \"medium\" | \"large\" = \"tiny\"\n\t@Prop({ mutable: true, reflect: true }) checked = false\n\t@Prop({ mutable: true, reflect: true }) intermediate = false\n\t@Prop() name: string\n\t@Prop() value: any\n\t@Prop({ reflect: true }) disabled: boolean\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@State() t: langly.Translate\n\n\tcomponentWillLoad() {\n\t\tthis.t = translation.create(this.element)\n\t}\n\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tif (!this.disabled) {\n\t\t\tconst checked = this.intermediate || this.checked == false\n\t\t\tthis.smoothlyInput.emit({\n\t\t\t\t[this.name]: checked ? this.value : undefined,\n\t\t\t})\n\t\t\tthis.checked = checked\n\t\t}\n\t}\n\t@Method()\n\tasync clear() {\n\t\tthis.checked = false\n\t\tthis.smoothlyInput.emit({\n\t\t\t[this.name]: undefined,\n\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<main>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<smoothly-icon\n\t\t\t\t\t\t\ttoolTip={this.t(!this.checked ? \"Select\" : \"De-select\")}\n\t\t\t\t\t\t\tonClick={e => {\n\t\t\t\t\t\t\t\tthis.toggle()\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\t\tname={\n\t\t\t\t\t\t\t\tthis.intermediate && !this.checked\n\t\t\t\t\t\t\t\t\t? \"remove-outline\"\n\t\t\t\t\t\t\t\t\t: this.checked && !this.intermediate\n\t\t\t\t\t\t\t\t\t? \"checkmark-outline\"\n\t\t\t\t\t\t\t\t\t: \"empty\"\n\t\t\t\t\t\t\t}></smoothly-icon>\n\t\t\t\t\t</div>\n\t\t\t\t\t<label htmlFor={this.name}>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</label>\n\t\t\t\t</main>\n\t\t\t\t<slot name=\"expansion\" />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/checkbox/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;AAG5G,OAAO,KAAK,WAAW,MAAM,eAAe,CAAA;AAM5C,MAAM,OAAO,gBAAgB;;gBAE0B,MAAM;mBACV,KAAK;wBACA,KAAK;uBACrB,KAAK;oBACR,KAAK;;;;;EAMzC,iBAAiB;IAChB,IAAI,CAAC,CAAC,GAAG,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EAC1C,CAAC;EAID,kBAAkB;IACjB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO;MACnC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,CAAA;EACrD,CAAC;EAGD,KAAK,CAAC,MAAM;IACX,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;MACxC,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,CAAA;MAC1D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;QACvB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;OAC7C,CAAC,CAAA;MACF,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;KACtB;EACF,CAAC;EAED,KAAK,CAAC,KAAK;IACV,IAAI,CAAC,OAAO,GAAG,KAAK,CAAA;IACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC,CAAA;EACpD,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI;MACJ,qBACC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,EACvD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC5B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EACH,IAAI,CAAC,WAAW;UACf,CAAC,CAAC,eAAe;UACjB,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,OAAO;YACpC,CAAC,CAAC,gBAAgB;YAClB,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,YAAY;cACpC,CAAC,CAAC,mBAAmB;cACrB,CAAC,CAAC,OAAO,GAEV;MACF,aAAO,OAAO,EAAE,IAAI,CAAC,IAAI;QACxB,eAAa,CACN;MACR,WAAK,KAAK,EAAE,WAAW;QACtB,YAAM,IAAI,EAAC,WAAW,GAAG,CACpB,CACA,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport * as langly from \"langly\"\nimport { Clearable } from \"../input/Clearable\"\nimport * as translation from \"./translation\"\n@Component({\n\ttag: \"smoothly-checkbox\",\n\tstyleUrl: \"style.css\",\n\tscoped: true,\n})\nexport class SmoothlyCheckbox implements Clearable {\n\t@Element() element: HTMLElement\n\t@Prop() size: \"tiny\" | \"small\" | \"medium\" | \"large\" = \"tiny\"\n\t@Prop({ mutable: true, reflect: true }) checked = false\n\t@Prop({ mutable: true, reflect: true }) intermediate = false\n\t@Prop({ reflect: true }) unavailable = false\n\t@Prop({ reflect: true }) disabled = false\n\t@Prop() name: string\n\t@Prop() value: any\n\t@Event() smoothlyInput: EventEmitter<Record<string, any>>\n\t@State() t: langly.Translate\n\n\tcomponentWillLoad() {\n\t\tthis.t = translation.create(this.element)\n\t}\n\n\t@Watch(\"checked\")\n\t@Watch(\"unavailable\")\n\tunavailableChanged(): void {\n\t\tif (this.unavailable && this.checked)\n\t\t\tthis.smoothlyInput.emit({ [this.name]: undefined })\n\t}\n\n\t@Method()\n\tasync toggle(): Promise<void> {\n\t\tif (!this.disabled && !this.unavailable) {\n\t\t\tconst checked = this.intermediate || this.checked == false\n\t\t\tthis.smoothlyInput.emit({\n\t\t\t\t[this.name]: checked ? this.value : undefined,\n\t\t\t})\n\t\t\tthis.checked = checked\n\t\t}\n\t}\n\t@Method()\n\tasync clear() {\n\t\tthis.checked = false\n\t\tthis.smoothlyInput.emit({ [this.name]: undefined })\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<smoothly-icon\n\t\t\t\t\ttoolTip={this.t(!this.checked ? \"Select\" : \"De-select\")}\n\t\t\t\t\tonClick={() => this.toggle()}\n\t\t\t\t\tsize={this.size}\n\t\t\t\t\tname={\n\t\t\t\t\t\tthis.unavailable\n\t\t\t\t\t\t\t? \"close-outline\"\n\t\t\t\t\t\t\t: this.intermediate && !this.checked\n\t\t\t\t\t\t\t? \"remove-outline\"\n\t\t\t\t\t\t\t: this.checked && !this.intermediate\n\t\t\t\t\t\t\t? \"checkmark-outline\"\n\t\t\t\t\t\t\t: \"empty\"\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<label htmlFor={this.name}>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</label>\n\t\t\t\t<div class={\"expansion\"}>\n\t\t\t\t\t<slot name=\"expansion\" />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -1,63 +1,60 @@
 * {
 	box-sizing: border-box;
 }
-
 :host {
-	display: block;
-}
-
-:host > main {
-	display: flex;
-	align-items: center;
+	display: grid;
 	width: fit-content;
-	height: max-content;
-	margin: 0.3rem 0;
-	line-height: 0;
-}
-
-:host > main > label {
-	display:flex;
-	justify-content: center;
+	grid-template-columns: auto 1fr;
+	row-gap: 0.5rem;
 	align-items: center;
-	margin: 0 0.2em;
+}
+:host label:empty {
+	display: none;
+}
+:host label {
+	grid-column: 2;
+	margin-left: 0.2rem;
 }
 
-:host > main > div {
+:host smoothly-icon {
+	grid-column: 1;
+	line-height: 0;
 	border: 1px solid rgb(var(--smoothly-color-contrast));
 }
-
-:host > main > div > smoothly-icon {
-	display: flex;
-	justify-content: center;	
-	align-items: center;
+:host:not([disabled]):not([unavailable]) smoothly-icon {
+	cursor: pointer;
 }
-
-:host:not([checked]) > main > div > smoothly-icon,
-:host:not([intermediate]) > main > div > smoothly-icon {
-	stroke: rgb(var(--smoothly-color-contrast));
+:host[disabled] smoothly-icon,
+:host[unavailable] smoothly-icon {
+	border-color: rgb(var(--smoothly-color-contrast), 0.3);
 }
-
-:host[disabled] > main > div {
-	border: 1px solid rgb(var(--smoothly-color-contrast), 0.3);
+:host[disabled] smoothly-icon,
+:host[unavailable] smoothly-icon {
+	opacity: 0.7;
+}
+:host:not([checked]) smoothly-icon,
+:host:not([intermediate]) smoothly-icon
+:host:not([unavailable]) {
+	stroke: rgb(var(--smoothly-color-contrast));
 }
 
-::slotted([slot=expansion]) {
-	display: none;
+:host div.expansion {
+	position: relative;
+	grid-column-start: 2;
 	background-color: rgb(var(--smoothly-secondary-color));
 	color: rgb(var(--smoothly-secondary-contrast));
-}
-
-[checked]::slotted([slot=expansion]) {
-	display: block;
-	padding: 0.5em;
+	padding: 0.5rem;
 	border-radius: 5px;
-	margin: 0.5rem 0;
 }
-
-[checked]::slotted([slot=expansion])::before {
+:host:not([checked]) div.expansion,
+:host div.expansion:empty {
+	display: none;
+}
+:host div.expansion::before {
 	content: "\25B2";
-	position: relative;
-	top: -1.35em;
-	left: 2rem;
+	position: absolute;
+	bottom: calc(100% + 0.5rem /* <-- alignment */ - 0.3rem /* <-- adjustment*/);
+	line-height: 0;
+	left: 0.5rem;
 	color: rgb(var(--smoothly-secondary-color))
 }