smoothly 1.0.0-alpha.10 → 1.0.0-alpha.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{smoothly-accordion_60.cjs.entry.js → smoothly-accordion_61.cjs.entry.js} +32 -17
- package/dist/cjs/smoothly-accordion_61.cjs.entry.js.map +1 -0
- package/dist/cjs/smoothly.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/app-demo/index.js +1 -1
- package/dist/collection/components/app-demo/index.js.map +1 -1
- package/dist/collection/components/button/index.js +2 -2
- package/dist/collection/components/button/index.js.map +1 -1
- package/dist/collection/components/button/style.css +17 -0
- package/dist/collection/components/button-demo/index.js +22 -0
- package/dist/collection/components/button-demo/index.js.map +1 -0
- package/dist/collection/components/button-demo/style.css +8 -0
- package/dist/collection/components/filter/index.js +1 -1
- package/dist/collection/components/filter/index.js.map +1 -1
- package/dist/collection/components/filter/style.css +11 -14
- package/dist/collection/components/input-demo/index.js +0 -2
- package/dist/collection/components/input-demo/index.js.map +1 -1
- package/dist/custom-elements/index.d.ts +6 -0
- package/dist/custom-elements/index.js +39 -22
- package/dist/custom-elements/index.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{smoothly-accordion_60.entry.js → smoothly-accordion_61.entry.js} +32 -18
- package/dist/esm/smoothly-accordion_61.entry.js.map +1 -0
- package/dist/esm/smoothly.js +1 -1
- package/dist/smoothly/p-5ed21e39.entry.js +2 -0
- package/dist/smoothly/p-5ed21e39.entry.js.map +1 -0
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/dist/smoothly/smoothly.esm.js.map +1 -1
- package/dist/types/components/button/index.d.ts +1 -1
- package/dist/types/components/button-demo/index.d.ts +3 -0
- package/dist/types/components.d.ts +15 -2
- package/package.json +1 -1
- package/dist/cjs/smoothly-accordion_60.cjs.entry.js.map +0 -1
- package/dist/esm/smoothly-accordion_60.entry.js.map +0 -1
- package/dist/smoothly/p-5200d31c.entry.js +0 -2
- package/dist/smoothly/p-5200d31c.entry.js.map +0 -1
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["smoothly-
|
|
17
|
+
return index.bootstrapLazy([["smoothly-accordion_61.cjs",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}],[0,"smoothly-input-demo"],[2,"smoothly-table-demo"],[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]],[0,"smoothly-display-demo"],[0,"smoothly-button-demo"],[4,"smoothly-app",{"color":[1]}],[0,"smoothly-dialog-demo"],[2,"smoothly-icon-demo"],[4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}],[2,"smoothly-table-demo-filtered",{"criteria":[32],"data":[32],"selector":[32]},[[0,"filters","onFilterUpdate"],[2,"smoothlyChecked","smoothlyCheckedHandler"]]],[2,"smoothly-input-date-range",{"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"open":[1028],"showLabel":[516,"show-label"],"labelStart":[1,"label-start"],"labelEnd":[1,"label-end"]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"],[0,"dateRangeSet","onDateRangeSet"]]],[1,"smoothly-picker",{"disabled":[516],"readonly":[516],"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"mutable":[4],"optionStyle":[8,"option-style"],"options":[1040],"labelSetting":[513,"label-setting"],"label":[513],"selections":[1040],"selectNoneName":[1025,"select-none-name"],"selectAllName":[1025,"select-all-name"],"selectionName":[1025,"selection-name"],"newOptionLabel":[1025,"new-option-label"],"valueValidator":[16],"isOpen":[32],"empty":[32]},[[0,"optionSelect","optionSelectHandler"],[0,"optionUnselect","optionSelectHandler"],[0,"optionAdd","optionAddHandler"],[0,"menuEmpty","emptyHandler"]]],[6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]],[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]],[6,"smoothly-checkbox",{"size":[1],"checked":[1540],"intermediate":[1540],"name":[1],"value":[8],"disabled":[516],"t":[32],"toggle":[64]}],[6,"smoothly-radio-button-item",{"value":[8],"selected":[1540],"color":[513]}],[6,"smoothly-summary",{"color":[1],"fill":[1],"size":[1]}],[1,"smoothly-toggle-switch",{"selected":[1540],"disabled":[516],"size":[513],"name":[1],"value":[8]}],[0,"smoothly-urlencoded",{"data":[1]}],[6,"smoothly-accordion",{"value":[1025]},[[0,"smoothlyOpen","handleOpenClose"],[0,"smoothlyClose","handleOpenClose"],[0,"smoothlyAccordionItemDidLoad","onAccordionItemDidLoad"],[0,"smoothlyAccordionItemDidUnload","onAccordionItemDidUnload"]]],[6,"smoothly-accordion-item",{"name":[1],"brand":[1],"open":[1540]}],[2,"smoothly-display",{"type":[1],"value":[8],"currency":[1],"country":[1],"format":[16]}],[2,"smoothly-display-amount",{"amount":[8],"currency":[1],"toInteger":[4,"to-integer"]}],[2,"smoothly-display-date-time",{"datetime":[1]}],[2,"smoothly-frame",{"url":[1],"name":[1],"origin":[1],"send":[64]}],[6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}],[6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tabIndex":[2,"tab-index"]}],[6,"smoothly-radio-button",{"name":[1],"value":[1032],"deselectable":[516],"decoration":[513]},[[2,"radioItemSelectInternal","radioSelectHandler"]]],[6,"smoothly-select",{"identifier":[1],"background":[513],"value":[1025]}],[2,"smoothly-skeleton",{"widths":[16],"width":[1025],"color":[1],"period":[2],"distance":[1],"align":[513]}],[6,"smoothly-submit",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"size":[513],"shape":[513]}],[2,"smoothly-svg",{"url":[513],"size":[513],"color":[1]}],[6,"smoothly-table-expandable-row",{"align":[1],"open":[1540],"allowSpotlight":[32],"spotlight":[32]},[[0,"click","onClick"],[0,"tableLoad","handleTableLoaded"]]],[6,"smoothly-toggle",{"selected":[1540],"shape":[513],"disabled":[516],"name":[1],"value":[8]},[[0,"click","onClick"]]],[1,"smoothly-filter",{"placeholder":[1025],"criteria":[1040],"inputValue":[1032,"input-value"],"expanded":[32],"freeSearchValue":[32],"clear":[64]},[[0,"filter","filterHandler"]]],[6,"smoothly-input-date",{"name":[513],"value":[1025],"open":[1028],"max":[1025],"min":[1025],"disabled":[1028]},[[0,"dateSet","dateSetHandler"]]],[1,"smoothly-menu-options",{"toggle":[4],"emptyMenuLabel":[1025,"empty-menu-label"],"newOptionLabel":[1,"new-option-label"],"maxMenuHeight":[1,"max-menu-height"],"order":[4],"optionStyle":[8,"option-style"],"options":[1040],"resetHighlightOnOptionsChange":[1028,"reset-highlight-on-options-change"],"mutable":[4],"filteredOptions":[32],"highlightIndex":[32],"keyword":[32],"moveHighlight":[64],"setHighlight":[64],"getHighlighted":[64],"filterOptions":[64]},[[0,"optionHover","optionHoverHandler"]]],[1,"smoothly-filter-input",{"name":[513],"value":[1032],"type":[513],"required":[1540],"minLength":[2,"min-length"],"showLabel":[516,"show-label"],"maxLength":[2,"max-length"],"autocomplete":[4],"pattern":[16],"placeholder":[1],"disabled":[4],"readonly":[4],"currency":[513],"comparison":[1],"criteria":[32],"clear":[64]}],[2,"smoothly-backtotop",{"opacity":[1],"bottom":[1],"right":[1],"visible":[32]}],[6,"smoothly-table-cell"],[6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540],"allowSpotlight":[32],"spotlight":[32]},[[0,"click","onClick"],[0,"tableLoad","handleTableLoaded"]]],[6,"smoothly-tab",{"label":[1],"open":[1540]},[[0,"click","onClick"]]],[6,"smoothly-tab-switch",{"selectedElement":[32]},[[0,"expansionOpen","openChanged"]]],[6,"smoothly-table",{"root":[1540],"align":[513]},[[0,"expandableLoad","handleExpandableLoaded"],[0,"expandableChange","handleExpandableState"],[0,"spotlightChange","handleSpotlightState"],[0,"smoothlyNestedTable","handleNestedTable"],[0,"expansionLoad","handleEvents"],[0,"expansionOpen","handleEvents"]]],[6,"smoothly-table-header",{"name":[1]}],[6,"smoothly-table-row",null,[[0,"expansionLoad","onExpansionLoad"],[0,"expansionOpen","onExpansionOpen"]]],[0,"smoothly-tuple",{"tuple":[16]}],[1,"smoothly-option",{"aliases":[513],"dataHighlight":[1540,"data-highlight"],"name":[1537],"value":[1537],"divider":[1540],"checkbox":[4],"new":[4],"toggle":[4],"checked":[1028]}],[2,"smoothly-calendar",{"month":[1025],"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"doubleInput":[516,"double-input"],"firstSelected":[32]}],[4,"smoothly-form",{"looks":[513],"name":[1],"method":[1],"action":[1],"processing":[1540],"notice":[32],"submit":[64],"clear":[64]},[[2,"smoothlyInput","smoothlyInputHandler"],[2,"smoothlySubmit","smoothlySubmitHandler"]]],[1,"smoothly-button",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"size":[513],"shape":[513],"link":[1],"download":[4]}],[2,"smoothly-input-month",{"value":[1025]}],[6,"smoothly-quiet",{"color":[1]}],[6,"smoothly-selector",{"initialPrompt":[1,"initial-prompt"],"opened":[32],"selectedElement":[32],"missing":[32],"filter":[32],"reset":[64]},[[0,"click","onClick"],[0,"itemSelected","onItemSelected"],[0,"keydown","onKeyDown"]]],[6,"smoothly-item",{"value":[8],"selected":[1540],"marked":[1540],"filter":[64]},[[0,"click","onClick"]]],[2,"smoothly-spinner",{"active":[516],"size":[513]}],[2,"smoothly-notification",{"notice":[16],"tick":[32]},[[0,"trigger","onTrigger"]]],[6,"smoothly-trigger",{"color":[513],"fill":[513],"disabled":[516],"type":[513],"name":[1],"value":[8]},[[0,"click","onClick"]]],[6,"smoothly-input",{"name":[513],"value":[1032],"type":[513],"required":[1540],"minLength":[1026,"min-length"],"showLabel":[516,"show-label"],"maxLength":[1026,"max-length"],"autocomplete":[1028],"pattern":[1040],"placeholder":[1537],"disabled":[1028],"readonly":[1028],"currency":[513],"initialValue":[32],"clear":[64],"getFormData":[64],"setKeepFocusOnReRender":[64],"setSelectionRange":[64]}],[2,"smoothly-icon",{"color":[513],"fill":[513],"name":[1],"size":[513],"toolTip":[1,"tool-tip"],"document":[32]}]]],["smoothly-addresses.cjs",[[2,"smoothly-addresses",{"value":[16],"editable":[16]}]]],["smoothly-color.cjs",[[6,"smoothly-color",{"color":[513]}]]],["smoothly-country.cjs",[[2,"smoothly-country",{"value":[1],"text":[1],"language":[32]}]]],["smoothly-google-font.cjs",[[2,"smoothly-google-font",{"value":[1]}]]],["smoothly-radio-group.cjs",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder.cjs",[[0,"smoothly-reorder"]]],["smoothly-trigger-sink.cjs",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source.cjs",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-address-display.cjs",[[2,"smoothly-address-display",{"value":[16],"editable":[4]}]]],["smoothly-address.cjs",[[2,"smoothly-address",{"value":[16],"editable":[4]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -8,7 +8,7 @@ const Listenable = require('./Listenable-c8d2f8ef.js');
|
|
|
8
8
|
require('./GoogleFont-6c4f0da1.js');
|
|
9
9
|
const getLanguage = require('./getLanguage-430ecf04.js');
|
|
10
10
|
|
|
11
|
-
const styleCss$
|
|
11
|
+
const styleCss$S = "smoothly-accordion-item.sc-smoothly-accordion{border:1px solid rgb(var(--smoothly-dark-color));border-bottom:none}smoothly-accordion-item.sc-smoothly-accordion:first-of-type{border-top-left-radius:4px;border-top-right-radius:4px;margin-top:0.4em}smoothly-accordion-item.sc-smoothly-accordion:last-of-type{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom:1px solid rgb(var(--smoothly-dark-color));margin-bottom:0.6em}smoothly-accordion-item[open].sc-smoothly-accordion{border-color:rgb(var(--smoothly-primary-color));border-bottom:1px solid rgb(var(--smoothly-primary-color))}smoothly-accordion-item[open].sc-smoothly-accordion+smoothly-accordion-item.sc-smoothly-accordion{border-top:none}";
|
|
12
12
|
|
|
13
13
|
const SmoothlyAccordion = class {
|
|
14
14
|
constructor(hostRef) {
|
|
@@ -55,9 +55,9 @@ const SmoothlyAccordion = class {
|
|
|
55
55
|
"value": ["valueChanged"]
|
|
56
56
|
}; }
|
|
57
57
|
};
|
|
58
|
-
SmoothlyAccordion.style = styleCss$
|
|
58
|
+
SmoothlyAccordion.style = styleCss$S;
|
|
59
59
|
|
|
60
|
-
const styleCss$
|
|
60
|
+
const styleCss$R = ".sc-smoothly-accordion-item-h{display:block}[hidden].sc-smoothly-accordion-item-h{display:none}details.sc-smoothly-accordion-item{padding:0}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>span.sc-smoothly-accordion-item{float:right;margin:0.2em;font-size:60%}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item{font-size:120%;list-style-type:none;cursor:pointer;padding:0.4em;color:rgb(var(--smoothly-text-tint))}details.sc-smoothly-accordion-item>fieldset.sc-smoothly-accordion-item{border:none;margin:0;padding:0}[open].sc-smoothly-accordion-item-h>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item::-webkit-details-marker{display:none}details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{width:1em;height:auto;margin-bottom:-0.2em;margin-right:0.4em}[open].sc-smoothly-accordion-item-h>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{fill:rgb(var(--smoothly-primary-contrast))}.sc-smoothly-accordion-item-h:not([open])>details.sc-smoothly-accordion-item>summary.sc-smoothly-accordion-item>svg.sc-smoothly-accordion-item{fill:rgb(var(--smoothly-text-tint))}";
|
|
61
61
|
|
|
62
62
|
const SmoothlyAccordionItem = class {
|
|
63
63
|
constructor(hostRef) {
|
|
@@ -105,9 +105,9 @@ const SmoothlyAccordionItem = class {
|
|
|
105
105
|
"open": ["openChanged"]
|
|
106
106
|
}; }
|
|
107
107
|
};
|
|
108
|
-
SmoothlyAccordionItem.style = styleCss$
|
|
108
|
+
SmoothlyAccordionItem.style = styleCss$R;
|
|
109
109
|
|
|
110
|
-
const styleCss$
|
|
110
|
+
const styleCss$Q = "smoothly-app{display:block;scrollbar-width:none}smoothly-app[hidden]{display:none}smoothly-app[color=default],smoothly-app:not([color]){--smoothly-app-background:var(--smoothly-default-color);--smoothly-app-color:var(--smoothly-default-contrast);--smoothly-app-hover-background:var(--smoothly-primary-color);--smoothly-app-hover-color:var(--smoothly-primary-contrast);--smoothly-app-shadow:var(--smoothly-default-shadow)}smoothly-app[color=primary]{--smoothly-app-background:var(--smoothly-primary-shade);--smoothly-app-color:var(--smoothly-primary-contrast);--smoothly-app-hover-background:var(--smoothly-secondary-color);--smoothly-app-hover-color:var(--smoothly-secondary-contrast);--smoothly-app-shadow:var(--smoothly-primary-shadow)}smoothly-app[color=secondary]{--smoothly-app-background:var(--smoothly-secondary-shade);--smoothly-app-color:var(--smoothly-secondary-contrast);--smoothly-app-hover-background:var(--smoothly-primary-color);--smoothly-app-hover-color:var(--smoothly-primary-contrast);--smoothly-app-shadow:var(--smoothly-secondary-shadow)}smoothly-app[color=tertiary],smoothly-app[color=success],smoothly-app[color=warning],smoothly-app[color=danger]{--smoothly-app-background:var(--smoothly-color-shade);--smoothly-app-color:var(--smoothly-color-contrast);--smoothly-app-hover-background:var(--smoothly-default-shade);--smoothly-app-hover-color:var(--smoothly-default-contrast);--smoothly-app-shadow:var(--smoothly-color-shadow)}smoothly-app>smoothly-notifier>header{position:fixed;top:0;left:0;width:100%;z-index:5;height:5rem;background-color:rgb(var(--smoothly-app-background));color:rgba(var(--smoothly-medium-color));fill:rgb(var(--smoothly-medium-color));stroke:rgb(var(--smoothly-medium-color));display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 5px 0 rgba(var(--smoothly-app-shadow));border-bottom:1px solid rgba(var(--smoothly-dark-color))}smoothly-app>smoothly-notifier>header a{color:inherit;text-decoration:inherit}smoothly-app>smoothly-notifier>header>nav{width:100%;flex-shrink:2}smoothly-app>smoothly-notifier>header>h1,smoothly-app>smoothly-notifier>header>nav,smoothly-app>smoothly-notifier>header>nav>ul,smoothly-app>smoothly-notifier>header>nav>ul li,smoothly-app>smoothly-notifier>header>nav>ul li>*:not(a){display:flex;height:100%;margin:0}smoothly-app>smoothly-notifier>header>h1{margin-left:3.8rem}smoothly-app>smoothly-notifier>header>h1>a{overflow:hidden;user-select:none;height:200%;display:flex;align-self:center;size:100%;background-position-y:center}smoothly-app>smoothly-notifier>header>nav>ul>li a{line-height:1.6cm}smoothly-app>smoothly-notifier>header>nav>ul{width:100%}smoothly-app>smoothly-notifier>header>[slot=header]{margin-right:2.1rem;border:0}smoothly-app>smoothly-notifier>header>[slot=header]>a{display:flex;border-width:0;align-items:center;margin-right:3.9rem}smoothly-app>smoothly-notifier>header>[slot=header]>a>smoothly-icon{fill:rgb(var(--smoothly-primary-shade));stroke:rgb(var(--smoothly-primary-shade));color:rgb(var(--smoothly-primary-shade))}smoothly-app>smoothly-notifier>header>nav>ul li a{display:flex;height:2.3rem;margin:0 0.4cm;text-decoration:none}smoothly-app>smoothly-notifier>header>nav>ul li>a{display:flex;align-items:center;align-self:center;margin-bottom:2px}smoothly-app>smoothly-notifier>header>nav>ul li smoothly-trigger.sc-smoothly-trigger-h{border:0}smoothly-app>smoothly-notifier>header>nav>ul li>a>smoothly-icon>svg{fill:rgb(var(--smoothly-medium-color));stroke:rgb(var(--smoothly-medium-color));color:rgb(var(--smoothly-medium-color));align-items:center;display:flex}smoothly-app>smoothly-notifier>header>nav>ul li>a:hover>smoothly-icon>svg,smoothly-app>smoothly-notifier>header>nav>ul li>a.active>smoothly-icon>svg{color:rgb(var(--smoothly-app-color));stroke:rgb(var(--smoothly-app-color));fill:rgb(var(--smoothly-app-color))}smoothly-app>smoothly-notifier>header>nav>ul li>smoothly-trigger.active a>smoothly-icon,smoothly-app>smoothly-notifier>header>nav>ul li>smoothly-trigger:hover a>smoothly-icon,smoothly-app>smoothly-notifier>header>nav>ul li a:hover,smoothly-app>smoothly-notifier>header>nav>ul li a.active{border-bottom:2px solid rgb(var(--smoothly-app-color));margin-bottom:0px;border-bottom-width:2px;color:rgb(var(--smoothly-app-color));stroke:rgb(var(--smoothly-app-color));fill:rgb(var(--smoothly-app-color))}smoothly-app>smoothly-notifier>main{position:relative;top:5rem}";
|
|
111
111
|
|
|
112
112
|
const SmoothlyApp = class {
|
|
113
113
|
constructor(hostRef) {
|
|
@@ -118,7 +118,7 @@ const SmoothlyApp = class {
|
|
|
118
118
|
return (index.h("smoothly-notifier", null, index.h("slot", null)));
|
|
119
119
|
}
|
|
120
120
|
};
|
|
121
|
-
SmoothlyApp.style = styleCss$
|
|
121
|
+
SmoothlyApp.style = styleCss$Q;
|
|
122
122
|
|
|
123
123
|
const SmoothlyAppDemo = class {
|
|
124
124
|
constructor(hostRef) {
|
|
@@ -126,7 +126,7 @@ const SmoothlyAppDemo = class {
|
|
|
126
126
|
this.baseUrl = undefined;
|
|
127
127
|
}
|
|
128
128
|
render() {
|
|
129
|
-
return (index.h(index$1.App, { label: "Smoothly Demo" }, index.h("a", { slot: "nav-start", href: "display" }, "Display"), index.h("a", { slot: "nav-start", href: "https://google.com" }, "External"), index.h("smoothly-room", { path: "" }, index.h("smoothly-input", { type: "text" }, "Default"), index.h("div", { style: { padding: "1em", maxWidth: "12em" } }, index.h("smoothly-button", { fill: "solid", color: "danger", link: "https://google.com" }, "open"), index.h("smoothly-button", { fill: "solid", color: "danger", link: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", download: true }, "download"), index.h("smoothly-button", { fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), index.h("smoothly-button", { disabled: true, fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), index.h("smoothly-button", { type: "link", fill: "clear", color: "danger", onClick: () => alert("clicked") }, "action link"))), index.h("smoothly-room", { path: "input", label: "Input" }, index.h("smoothly-input-demo", null)), index.h("smoothly-room", { path: "dialog", label: "Dialog" }, index.h("smoothly-dialog-demo", null)), index.h("smoothly-room", { path: "display", label: "Display", icon: "eye-outline" }, index.h("smoothly-display-demo", null)), index.h("smoothly-room", { path: "table", label: "Table" }, index.h("smoothly-table-demo", null)), index.h("smoothly-room", { path: "select", label: "Select" }, index.h("smoothly-select-demo", null)), index.h("smoothly-room", { path: "icon", label: "Icon" }, index.h("smoothly-icon-demo", null)), index.h("smoothly-room", { path: "/redirect", label: "Redirect" }, index.h("smoothly-button", { style: { "max-width": "300px" }, onClick: () => {
|
|
129
|
+
return (index.h(index$1.App, { label: "Smoothly Demo" }, index.h("a", { slot: "nav-start", href: "display" }, "Display"), index.h("a", { slot: "nav-start", href: "https://google.com" }, "External"), index.h("smoothly-room", { path: "" }, index.h("smoothly-input", { type: "text" }, "Default"), index.h("div", { style: { padding: "1em", maxWidth: "12em" } }, index.h("smoothly-button", { fill: "solid", color: "danger", link: "https://google.com" }, "open"), index.h("smoothly-button", { fill: "solid", color: "danger", link: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf", download: true }, "download"), index.h("smoothly-button", { fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), index.h("smoothly-button", { disabled: true, fill: "solid", color: "danger", onClick: () => alert("clicked") }, "action"), index.h("smoothly-button", { type: "link", fill: "clear", color: "danger", onClick: () => alert("clicked") }, "action link"))), index.h("smoothly-room", { path: "input", label: "Input" }, index.h("smoothly-input-demo", null)), index.h("smoothly-room", { path: "button", label: "Button" }, index.h("smoothly-button-demo", null)), index.h("smoothly-room", { path: "dialog", label: "Dialog" }, index.h("smoothly-dialog-demo", null)), index.h("smoothly-room", { path: "display", label: "Display", icon: "eye-outline" }, index.h("smoothly-display-demo", null)), index.h("smoothly-room", { path: "table", label: "Table" }, index.h("smoothly-table-demo", null)), index.h("smoothly-room", { path: "select", label: "Select" }, index.h("smoothly-select-demo", null)), index.h("smoothly-room", { path: "icon", label: "Icon" }, index.h("smoothly-icon-demo", null)), index.h("smoothly-room", { path: "/redirect", label: "Redirect" }, index.h("smoothly-button", { style: { "max-width": "300px" }, onClick: () => {
|
|
130
130
|
index$1.redirect("/routing/pathParameter1");
|
|
131
131
|
} }, "Internal"), index.h("smoothly-button", { style: { "max-width": "300px" }, onClick: () => {
|
|
132
132
|
index$1.redirect("https://google.com");
|
|
@@ -146,7 +146,7 @@ const SmoothlyAppDemo = class {
|
|
|
146
146
|
}
|
|
147
147
|
};
|
|
148
148
|
|
|
149
|
-
const styleCss$
|
|
149
|
+
const styleCss$P = ".sc-smoothly-backtotop-h{background-color:rgba(var(--smoothly-default-color), 1);opacity:var(--opacity);pointer-events:var(--pointer-events);transition:opacity 400ms;z-index:3;border-radius:50%;box-shadow:var(--smoothly-shadow);height:3rem;width:3rem;position:fixed;bottom:var(--bottom);right:var(--right);outline:none;cursor:pointer;display:flex;justify-content:center;align-items:center}";
|
|
150
150
|
|
|
151
151
|
const SmoothlyBacktotop = class {
|
|
152
152
|
constructor(hostRef) {
|
|
@@ -175,7 +175,7 @@ const SmoothlyBacktotop = class {
|
|
|
175
175
|
}) }, index.h("smoothly-icon", { name: "chevron-up-outline" })));
|
|
176
176
|
}
|
|
177
177
|
};
|
|
178
|
-
SmoothlyBacktotop.style = styleCss$
|
|
178
|
+
SmoothlyBacktotop.style = styleCss$P;
|
|
179
179
|
|
|
180
180
|
const Button = ({ disabled, type, link, download }) => {
|
|
181
181
|
return disabled && (link || type == "link") ? (index.h("slot", null)) : link ? (index.h("a", { href: link, target: "_blank", download: download },
|
|
@@ -190,7 +190,7 @@ const Button = ({ disabled, type, link, download }) => {
|
|
|
190
190
|
index.h("slot", { name: "end" })));
|
|
191
191
|
};
|
|
192
192
|
|
|
193
|
-
const styleCss$
|
|
193
|
+
const styleCss$O = "[color=default]{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary]{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary]{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary]{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success]{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-color);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning]{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger]{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light]{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium]{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark]{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}:host{display:inline-block;margin:1em;box-sizing:border-box;border-radius:0.5rem;border:solid 1px;transition:background 150ms ease-in-out}:host([type=link]){display:inline;border:none}:host([disabled]){opacity:0.5;pointer-events:none}a,button{font-size:110%;font-weight:400;border:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem}button{justify-content:center;height:100%;width:100%;border-radius:0.5rem;min-width:8em;align-items:center}:host(:not([size=icon]))>button{padding:0.8em}:host([size=icon])>button{padding:0.5em}:host([shape=rounded])>button,:host([shape=rounded]){border-radius:2rem}:host([type=button])>a{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}:host([size=small])>button{font-size:100%}:host([size=large])>button{font-size:130%}:host(:not([size=icon])){min-width:8em}:host([size=flexible]){min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center;border:none}:host([size=flexible])>button{min-width:unset;padding:0;margin:0 !important}:host([expand]){width:100%}:host([expand=full]){border-left:none;border-right:none;border-radius:0}:host([shape=rounded])>button,:host([shape=rounded]){border-radius:2rem}:host(:not([fill=clear]):hover),:host(:not([fill=clear]):focus),: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{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{color:rgb(var(--smoothly-color-tint)) !important;stroke:rgb(var(--smoothly-color-tint)) !important;fill:rgb(var(--smoothly-color-tint)) !important}: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))}:host([fill=solid])>button,:host([fill=default])>button{color:rgb(var(--smoothly-color-contrast))}:host([fill=outline]){stroke:rgb(var(--smoothly-color));fill:rgb(var(--smoothly-color));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]){font-size:0.65em}:host([hidden]){display:none}";
|
|
194
194
|
|
|
195
195
|
const SmoothlyButton = class {
|
|
196
196
|
constructor(hostRef) {
|
|
@@ -209,7 +209,23 @@ const SmoothlyButton = class {
|
|
|
209
209
|
return index.h(Button, { disabled: this.disabled, type: this.type, link: this.link, download: this.download });
|
|
210
210
|
}
|
|
211
211
|
};
|
|
212
|
-
SmoothlyButton.style = styleCss$
|
|
212
|
+
SmoothlyButton.style = styleCss$O;
|
|
213
|
+
|
|
214
|
+
const styleCss$N = "smoothly-button-demo{display:block}smoothly-button-demo>section>div{display:flex;align-items:center}";
|
|
215
|
+
|
|
216
|
+
const SmoothlyButtonDemo = class {
|
|
217
|
+
constructor(hostRef) {
|
|
218
|
+
index.registerInstance(this, hostRef);
|
|
219
|
+
}
|
|
220
|
+
render() {
|
|
221
|
+
return [
|
|
222
|
+
index.h("h2", null, "Buttons"),
|
|
223
|
+
index.h("section", null, index.h("h4", null, "Toggle button"), index.h("smoothly-toggle", null, index.h("smoothly-icon", { name: "card", fill: "solid", slot: "icon-slot" })), index.h("smoothly-toggle", null, index.h("smoothly-icon", { name: "briefcase", slot: "icon-slot" })), index.h("smoothly-toggle", null, index.h("smoothly-icon", { name: "airplane", slot: "icon-slot" })), index.h("h4", null, "Toggle switches"), index.h("smoothly-toggle-switch", { disabled: false, size: "small" }), index.h("smoothly-toggle-switch", { disabled: false }), index.h("smoothly-toggle-switch", { disabled: false, size: "large" }), index.h("h4", null, "Links with icons"), index.h("smoothly-button", { type: "link" }, index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "type link"), index.h("smoothly-button", { type: "button", color: "warning", fill: "default" }, index.h("smoothly-icon", { name: "call", slot: "start" }), index.h("a", { href: "https://google.com" }, "link")), index.h("smoothly-button", { link: "https://google.com", type: "link" }, index.h("smoothly-icon", { name: "arrow-forward", slot: "end" }), "link + type link"), index.h("h4", null, "Size and Color test"), index.h("smoothly-button", { color: "primary", fill: "solid", size: "small", shape: "rounded" }, "Color Primary + Small"), index.h("smoothly-button", { color: "secondary", fill: "solid", shape: "rounded" }, "Color Secondary + Default"), index.h("smoothly-button", { color: "warning", fill: "solid", size: "large" }, "Color Warning + Large"), index.h("smoothly-button", { color: "danger", fill: "solid", size: "small", shape: "rounded" }, "Color Danger + Small"), index.h("smoothly-button", { color: "success", fill: "solid", size: "small", shape: "rounded" }, "Color Success + Small"), index.h("smoothly-button", { color: "tertiary", fill: "solid", size: "small", shape: "rounded" }, "Color Tertiary + Small"), index.h("smoothly-button", { color: "dark", fill: "solid", size: "small", shape: "rounded" }, "Color Dark + Small"), index.h("smoothly-button", { color: "medium", fill: "solid", size: "small", shape: "rounded" }, "Color Medium + Small"), index.h("smoothly-button", { color: "light", fill: "solid", size: "small", shape: "rounded" }, "Color Light + Small"), index.h("h4", null, "Expand examples"), index.h("smoothly-button", { color: "secondary", fill: "solid", expand: "full" }, "Color Secondary + Default"), index.h("smoothly-button", { color: "warning", fill: "solid", expand: "block" }, "Color Warning + Large"), index.h("h4", null, "Fill examples"), index.h("div", null, index.h("smoothly-button", { shape: "rounded", color: "primary", fill: "solid" }, "Fill Solid"), index.h("smoothly-button", { shape: "rounded", color: "secondary", fill: "outline" }, "Fill Outline"), index.h("smoothly-button", { shape: "rounded", color: "tertiary", fill: "clear" }, "Fill Clear"), index.h("smoothly-button", { size: "icon", shape: "rounded", color: "success", fill: "solid" }, index.h("smoothly-icon", { name: "basketball", fill: "solid" }))), index.h("h4", null, "Buttons with Icon in \"start\""), index.h("div", null, index.h("smoothly-button", { shape: "rounded", fill: "solid", color: "warning" }, index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "Check"), index.h("smoothly-button", { shape: "rounded", fill: "solid", color: "secondary" }, index.h("smoothly-icon", { name: "basketball", slot: "start" }), "Check"), index.h("smoothly-button", { shape: "rounded", fill: "solid", color: "success" }, index.h("smoothly-icon", { name: "call", slot: "start" }), "Check"), index.h("smoothly-button", { size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { name: "call" }))), index.h("h4", null, "Buttons with Icon in \"end\""), index.h("smoothly-button", { fill: "solid", color: "light" }, "Go Forward", index.h("smoothly-icon", { name: "arrow-forward", slot: "end" })), index.h("h4", null, "Test for icon button"), index.h("div", null, index.h("smoothly-button", { size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { name: "call" })), index.h("smoothly-button", { size: "icon", shape: "rounded", color: "warning", fill: "solid" }, index.h("smoothly-icon", { name: "search-outline" })), index.h("smoothly-button", { size: "icon", shape: "rounded", color: "secondary" }, index.h("smoothly-icon", { name: "checkmark-circle" }))), index.h("h4", null, "Link examples"), index.h("div", null, index.h("smoothly-button", { type: "link" }, "type link"), index.h("smoothly-button", { type: "button", fill: "clear" }, index.h("a", { href: "https://google.com" }, "link")), index.h("smoothly-button", { link: "https://google.com", type: "link" }, "link + type link")), index.h("h4", null, "Disabled buttons"), index.h("div", null, index.h("smoothly-button", { disabled: true, fill: "solid", color: "secondary" }, "Disabled"), index.h("smoothly-button", { type: "link", link: "https://google.com", disabled: true }, "Disabled link"))),
|
|
224
|
+
index.h("smoothly-backtotop", null),
|
|
225
|
+
];
|
|
226
|
+
}
|
|
227
|
+
};
|
|
228
|
+
SmoothlyButtonDemo.style = styleCss$N;
|
|
213
229
|
|
|
214
230
|
function month(date) {
|
|
215
231
|
const d = new Date(date);
|
|
@@ -24681,7 +24697,7 @@ var Clearable$1;
|
|
|
24681
24697
|
Clearable.is = is;
|
|
24682
24698
|
})(Clearable$1 || (Clearable$1 = {}));
|
|
24683
24699
|
|
|
24684
|
-
const styleCss$G = "*{box-sizing:border-box}:host{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;width:100%;margin-bottom:1em}:host>smoothly-input{margin-bottom:0.5em}section{display:flex;justify-content:center;align-items:center}.hidden{display:flex;width:0px;opacity:0}.container{width:inherit;position:relative;z-index:3;margin:0.8em 0;opacity:1;transition:opacity 100ms ease-in-out}.container:after{content:\"\";height:100%;width:100%;border:1px solid rgb(var(--smoothly-
|
|
24700
|
+
const styleCss$G = "*{box-sizing:border-box}:host{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;width:100%;margin-bottom:1em}:host>smoothly-input{margin-bottom:0.5em}section{display:flex;justify-content:center;align-items:center}.hidden{display:flex;width:0px;opacity:0}.container{width:inherit;position:relative;z-index:3;margin:0.8em 0;opacity:1;transition:opacity 100ms ease-in-out}.container:after{content:\"\";height:100%;width:100%;border:1px solid rgb(var(--smoothly-color-contrast));border-radius:0.25em;position:absolute;top:0;left:0}.container:before{content:\"\";width:0.6em;height:0.6em;transform:rotate(45deg);border-top:1px solid rgb(var(--smoothly-color-contrast));border-left:1px solid rgb(var(--smoothly-color-contrast));background-color:rgb(var(--smoothly-default-color));position:absolute;z-index:3}.container.arrow-top:before{left:calc(84.5%);top:-5px}.container-wrapper{width:100%;padding:1em;position:relative}.btn.hidden{margin-right:0.25em;opacity:0;cursor:text}.btn.clear{margin-right:0.25em;opacity:0.3}::slotted(div[slot=filter]){display:grid;grid-template-columns:1fr;justify-content:center;align-items:center;gap:0.5em}:host>smoothly-fom>smoothly-input>section[slot=end]>smoothly-button{font-size:100%;min-width:min-content;padding:0;margin:0;border:none !important}";
|
|
24685
24701
|
|
|
24686
24702
|
const SmoothlyFilter = class {
|
|
24687
24703
|
constructor(hostRef) {
|
|
@@ -24716,7 +24732,7 @@ const SmoothlyFilter = class {
|
|
|
24716
24732
|
}
|
|
24717
24733
|
render() {
|
|
24718
24734
|
return [
|
|
24719
|
-
index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { name: "filter", ref: element => (this.freeSearchElement = element), value: dist.create(this.criteria).stringify(), onKeyDown: () => this.onKeyDown(), placeholder: this.placeholder, readonly: true }, index.h("section", { slot: "start" }, index.h("slot", { name: "start" })), index.h("slot", null), index.h("section", { slot: "end" }, index.h("smoothly-icon", { class: Object.keys(this.criteria).length >= 1 ? "btn clear" : "btn hidden", name: "close", size: "tiny"
|
|
24735
|
+
index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { name: "filter", ref: element => (this.freeSearchElement = element), value: dist.create(this.criteria).stringify(), onKeyDown: () => this.onKeyDown(), placeholder: this.placeholder, readonly: true }, index.h("section", { slot: "start" }, index.h("slot", { name: "start" })), index.h("slot", null), index.h("section", { slot: "end" }, index.h("smoothly-button", { size: "flexible", onClick: e => this.clear(e) }, index.h("smoothly-icon", { class: Object.keys(this.criteria).length >= 1 ? "btn clear" : "btn hidden", name: "close", size: "tiny" })), index.h("smoothly-button", { size: "flexible", class: "btn", onClick: () => {
|
|
24720
24736
|
this.expanded = !this.expanded;
|
|
24721
24737
|
} }, this.expanded ? (index.h("smoothly-icon", { name: "options", size: "small" })) : (index.h("smoothly-icon", { name: "options-outline", size: "small" })))))),
|
|
24722
24738
|
index.h("section", { hidden: !this.expanded, class: this.expanded ? "container arrow-top" : "hidden" }, index.h("div", { hidden: !this.expanded, class: this.expanded ? "container-wrapper" : "hidden" }, this.expanded && index.h("slot", { name: "filter" }))),
|
|
@@ -26567,8 +26583,6 @@ const SmoothlyInputDemo = class {
|
|
|
26567
26583
|
}
|
|
26568
26584
|
render() {
|
|
26569
26585
|
return [
|
|
26570
|
-
index.h("h2", null, "Buttons"),
|
|
26571
|
-
index.h("section", null, index.h("h4", null, "Toggle button"), index.h("smoothly-toggle", null, index.h("smoothly-icon", { name: "card", fill: "solid", slot: "icon-slot" })), index.h("smoothly-toggle", null, index.h("smoothly-icon", { name: "briefcase", slot: "icon-slot" })), index.h("smoothly-toggle", null, index.h("smoothly-icon", { name: "airplane", slot: "icon-slot" })), index.h("h4", null, "Toggle switches"), index.h("smoothly-toggle-switch", { disabled: false, size: "small" }), index.h("smoothly-toggle-switch", { disabled: false }), index.h("smoothly-toggle-switch", { disabled: false, size: "large" }), index.h("h4", null, "Links with icons"), index.h("smoothly-button", { type: "link" }, index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "type link"), index.h("smoothly-button", { type: "button", color: "warning", fill: "default" }, index.h("smoothly-icon", { name: "call", slot: "start" }), index.h("a", { href: "https://google.com" }, "link")), index.h("smoothly-button", { link: "https://google.com", type: "link" }, index.h("smoothly-icon", { name: "arrow-forward", slot: "end" }), "link + type link"), index.h("h4", null, "Size and Color test"), index.h("smoothly-button", { color: "primary", fill: "solid", size: "small", shape: "rounded" }, "Color Primary + Small"), index.h("smoothly-button", { color: "secondary", fill: "solid", shape: "rounded" }, "Color Secondary + Default"), index.h("smoothly-button", { color: "warning", fill: "solid", size: "large" }, "Color Warning + Large"), index.h("smoothly-button", { color: "danger", fill: "solid", size: "small", shape: "rounded" }, "Color Danger + Small"), index.h("smoothly-button", { color: "success", fill: "solid", size: "small", shape: "rounded" }, "Color Success + Small"), index.h("smoothly-button", { color: "tertiary", fill: "solid", size: "small", shape: "rounded" }, "Color Tertiary + Small"), index.h("smoothly-button", { color: "dark", fill: "solid", size: "small", shape: "rounded" }, "Color Dark + Small"), index.h("smoothly-button", { color: "medium", fill: "solid", size: "small", shape: "rounded" }, "Color Medium + Small"), index.h("smoothly-button", { color: "light", fill: "solid", size: "small", shape: "rounded" }, "Color Light + Small"), index.h("h4", null, "Expand examples"), index.h("smoothly-button", { color: "secondary", fill: "solid", expand: "full" }, "Color Secondary + Default"), index.h("smoothly-button", { color: "warning", fill: "solid", expand: "block" }, "Color Warning + Large"), index.h("h4", null, "Fill examples"), index.h("smoothly-button", { shape: "rounded", color: "primary", fill: "solid" }, "Fill Solid"), index.h("smoothly-button", { shape: "rounded", color: "secondary", fill: "outline" }, "Fill Outline"), index.h("smoothly-button", { shape: "rounded", color: "tertiary", fill: "clear" }, "Fill Clear"), index.h("smoothly-button", { size: "icon", shape: "rounded", color: "success", fill: "solid" }, index.h("smoothly-icon", { name: "basketball", fill: "solid" })), index.h("h4", null, "Buttons with Icon in \"start\""), index.h("div", { style: { display: "inline-block" } }, index.h("smoothly-button", { shape: "rounded", fill: "solid", color: "warning" }, index.h("smoothly-icon", { name: "checkmark-circle", slot: "start" }), "Check"), index.h("smoothly-button", { shape: "rounded", fill: "solid", color: "secondary" }, index.h("smoothly-icon", { name: "basketball", slot: "start" }), "Check"), index.h("smoothly-button", { shape: "rounded", fill: "solid", color: "success" }, index.h("smoothly-icon", { name: "call", slot: "start" }), "Check"), index.h("smoothly-button", { size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { name: "call" }))), index.h("h4", null, "Buttons with Icon in \"end\""), index.h("smoothly-button", { fill: "solid", color: "light" }, "Go Forward", index.h("smoothly-icon", { name: "arrow-forward", slot: "end" })), index.h("h4", null, "Test for icon button"), index.h("smoothly-button", { size: "icon", fill: "solid", shape: "rounded", color: "success" }, index.h("smoothly-icon", { name: "call" })), index.h("smoothly-button", { size: "icon", shape: "rounded", color: "warning", fill: "solid" }, index.h("smoothly-icon", { name: "search-outline" })), index.h("smoothly-button", { size: "icon", shape: "rounded", color: "secondary" }, index.h("smoothly-icon", { name: "checkmark-circle" })), index.h("h4", null, "Link examples"), index.h("smoothly-button", { type: "link" }, "type link"), index.h("smoothly-button", { type: "button", fill: "clear" }, index.h("a", { href: "https://google.com" }, "link")), index.h("smoothly-button", { link: "https://google.com", type: "link" }, "link + type link"), index.h("h4", null, "Disabled buttons"), index.h("smoothly-button", { disabled: true, fill: "solid", color: "secondary" }, "Disabled"), index.h("smoothly-button", { type: "link", link: "https://google.com", disabled: true }, "Disabled link")),
|
|
26572
26586
|
index.h("h2", null, "Border"),
|
|
26573
26587
|
index.h("smoothly-form", { looks: "border" }, index.h("smoothly-input", { type: "email", name: "email" }, "Email"), index.h("smoothly-input", { type: "password", name: "password" }, "Password"), index.h("smoothly-submit", { onSubmit: (e) => alert(e), color: "success", fill: "solid" }, "Send")),
|
|
26574
26588
|
index.h("h2", null, "Grid"),
|
|
@@ -27521,7 +27535,7 @@ const SmoothlySpinner = class {
|
|
|
27521
27535
|
};
|
|
27522
27536
|
SmoothlySpinner.style = styleCss$g;
|
|
27523
27537
|
|
|
27524
|
-
const styleCss$f = "[color=default].sc-smoothly-submit{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-submit{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-submit{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-submit{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-submit{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-color);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-submit{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-submit{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-submit{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-submit{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-submit{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-submit-h{display:inline-block;margin:1em;box-sizing:border-box;border-radius:0.5rem;border:solid 1px;transition:background 150ms ease-in-out}[type=link].sc-smoothly-submit-h{display:inline;border:none}[disabled].sc-smoothly-submit-h{opacity:0.5;pointer-events:none}a.sc-smoothly-submit,button.sc-smoothly-submit{font-size:110%;font-weight:400;border:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem}button.sc-smoothly-submit{justify-content:center;height:100%;width:100%;border-radius:0.5rem;min-width:8em;align-items:center}.sc-smoothly-submit-h:not([size=icon])>button.sc-smoothly-submit{padding:0.8em}[size=icon].sc-smoothly-submit-h>button.sc-smoothly-submit{padding:0.5em}[shape=rounded].sc-smoothly-submit-h>button.sc-smoothly-submit,[shape=rounded].sc-smoothly-submit-h{border-radius:2rem}[type=button].sc-smoothly-submit-h>a.sc-smoothly-submit{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-submit-h>button.sc-smoothly-submit{font-size:100%}[size=large].sc-smoothly-submit-h>button.sc-smoothly-submit{font-size:130%}.sc-smoothly-submit-h:not([size=icon]){min-width:8em}[expand].sc-smoothly-submit-h{width:100%}[expand=full].sc-smoothly-submit-h{border-left:none;border-right:none;border-radius:0}[shape=rounded].sc-smoothly-submit-h>button.sc-smoothly-submit,[shape=rounded].sc-smoothly-submit-h{border-radius:2rem}.sc-smoothly-submit-h:not([fill=clear]):hover,.sc-smoothly-submit-h:not([fill=clear]):focus,.sc-smoothly-submit-h:not([fill=clear]):active{border-color:rgb(var(--smoothly-color-tint)) !important;background:rgb(var(--smoothly-color-tint)) !important}.sc-smoothly-submit-h:not([fill=clear]):hover>button.sc-smoothly-submit,.sc-smoothly-submit-h:not([fill=clear]):focus>button.sc-smoothly-submit,.sc-smoothly-submit-h:not([fill=clear]):active>button.sc-smoothly-submit{color:rgb(var(--smoothly-color-contrast)) !important;stroke:rgb(var(--smoothly-color-contrast)) !important;fill:rgb(var(--smoothly-color-contrast)) !important}[fill=clear].sc-smoothly-submit-h:hover>button.sc-smoothly-submit,[fill=clear].sc-smoothly-submit-h:focus>button.sc-smoothly-submit,[fill=clear].sc-smoothly-submit-h:active>button.sc-smoothly-submit{color:rgb(var(--smoothly-color-tint)) !important;stroke:rgb(var(--smoothly-color-tint)) !important;fill:rgb(var(--smoothly-color-tint)) !important}[disabled].sc-smoothly-submit-h{opacity:0.5;pointer-events:none}.sc-smoothly-submit-h:not([fill]),[fill=default].sc-smoothly-submit-h{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}[fill=solid].sc-smoothly-submit-h{stroke:rgb(var(--smoothly-color-contrast));fill:rgb(var(--smoothly-color-contrast));background:rgb(var(--smoothly-color));border-color:rgb(var(--smoothly-color-shade))}[fill=solid].sc-smoothly-submit-h>button.sc-smoothly-submit,[fill=default].sc-smoothly-submit-h>button.sc-smoothly-submit{color:rgb(var(--smoothly-color-contrast))}[fill=outline].sc-smoothly-submit-h{stroke:rgb(var(--smoothly-color));fill:rgb(var(--smoothly-color));background:transparent;border-color:rgb(var(--smoothly-color))}[fill=clear].sc-smoothly-submit-h{stroke:rgb(var(--smoothly-color));fill:rgb(var(--smoothly-color));background:transparent;border-color:transparent}[fill=outline].sc-smoothly-submit-h>button.sc-smoothly-submit,[fill=clear].sc-smoothly-submit-h>button.sc-smoothly-submit{color:rgb(var(--smoothly-color))}.sc-smoothly-submit-s>smoothly-icon[slot=start],.sc-smoothly-submit-s>smoothly-icon[slot=end]{font-size:0.65em}[hidden].sc-smoothly-submit-h{display:none}";
|
|
27538
|
+
const styleCss$f = "[color=default].sc-smoothly-submit{--smoothly-color:var(--smoothly-default-color);--smoothly-color-contrast:var(--smoothly-default-contrast);--smoothly-color-shade:var(--smoothly-default-shade);--smoothly-color-tint:var(--smoothly-default-tint)}[color=primary].sc-smoothly-submit{--smoothly-color:var(--smoothly-primary-color);--smoothly-color-contrast:var(--smoothly-primary-contrast);--smoothly-color-shade:var(--smoothly-primary-shade);--smoothly-color-tint:var(--smoothly-primary-tint)}[color=secondary].sc-smoothly-submit{--smoothly-color:var(--smoothly-secondary-color);--smoothly-color-contrast:var(--smoothly-secondary-contrast);--smoothly-color-shade:var(--smoothly-secondary-shade);--smoothly-color-tint:var(--smoothly-secondary-tint)}[color=tertiary].sc-smoothly-submit{--smoothly-color:var(--smoothly-tertiary-color);--smoothly-color-contrast:var(--smoothly-tertiary-contrast);--smoothly-color-shade:var(--smoothly-tertiary-shade);--smoothly-color-tint:var(--smoothly-tertiary-tint)}[color=success].sc-smoothly-submit{--smoothly-color:var(--smoothly-success-color);--smoothly-color-contrast:var(--smoothly-success-color);--smoothly-color-shade:var(--smoothly-success-shade);--smoothly-color-tint:var(--smoothly-success-tint)}[color=warning].sc-smoothly-submit{--smoothly-color:var(--smoothly-warning-color);--smoothly-color-contrast:var(--smoothly-warning-contrast);--smoothly-color-shade:var(--smoothly-warning-shade);--smoothly-color-tint:var(--smoothly-warning-tint)}[color=danger].sc-smoothly-submit{--smoothly-color:var(--smoothly-danger-color);--smoothly-color-contrast:var(--smoothly-danger-contrast);--smoothly-color-shade:var(--smoothly-danger-shade);--smoothly-color-tint:var(--smoothly-danger-tint)}[color=light].sc-smoothly-submit{--smoothly-color:var(--smoothly-light-color);--smoothly-color-contrast:var(--smoothly-light-contrast);--smoothly-color-shade:var(--smoothly-light-shade);--smoothly-color-tint:var(--smoothly-light-tint)}[color=medium].sc-smoothly-submit{--smoothly-color:var(--smoothly-medium-color);--smoothly-color-contrast:var(--smoothly-medium-contrast);--smoothly-color-shade:var(--smoothly-medium-shade);--smoothly-color-tint:var(--smoothly-medium-tint)}[color=dark].sc-smoothly-submit{--smoothly-color:var(--smoothly-dark-color);--smoothly-color-contrast:var(--smoothly-dark-contrast);--smoothly-color-shade:var(--smoothly-dark-shade);--smoothly-color-tint:var(--smoothly-dark-tint)}.sc-smoothly-submit-h{display:inline-block;margin:1em;box-sizing:border-box;border-radius:0.5rem;border:solid 1px;transition:background 150ms ease-in-out}[type=link].sc-smoothly-submit-h{display:inline;border:none}[disabled].sc-smoothly-submit-h{opacity:0.5;pointer-events:none}a.sc-smoothly-submit,button.sc-smoothly-submit{font-size:110%;font-weight:400;border:none;background-color:transparent;cursor:pointer;display:inline-flex;gap:0.5rem}button.sc-smoothly-submit{justify-content:center;height:100%;width:100%;border-radius:0.5rem;min-width:8em;align-items:center}.sc-smoothly-submit-h:not([size=icon])>button.sc-smoothly-submit{padding:0.8em}[size=icon].sc-smoothly-submit-h>button.sc-smoothly-submit{padding:0.5em}[shape=rounded].sc-smoothly-submit-h>button.sc-smoothly-submit,[shape=rounded].sc-smoothly-submit-h{border-radius:2rem}[type=button].sc-smoothly-submit-h>a.sc-smoothly-submit{text-align:center;text-decoration:inherit;width:calc(100% - 0.6em)}[size=small].sc-smoothly-submit-h>button.sc-smoothly-submit{font-size:100%}[size=large].sc-smoothly-submit-h>button.sc-smoothly-submit{font-size:130%}.sc-smoothly-submit-h:not([size=icon]){min-width:8em}[size=flexible].sc-smoothly-submit-h{min-width:unset;padding:0;margin:0;display:flex;justify-content:center;align-items:center;border:none}[size=flexible].sc-smoothly-submit-h>button.sc-smoothly-submit{min-width:unset;padding:0;margin:0 !important}[expand].sc-smoothly-submit-h{width:100%}[expand=full].sc-smoothly-submit-h{border-left:none;border-right:none;border-radius:0}[shape=rounded].sc-smoothly-submit-h>button.sc-smoothly-submit,[shape=rounded].sc-smoothly-submit-h{border-radius:2rem}.sc-smoothly-submit-h:not([fill=clear]):hover,.sc-smoothly-submit-h:not([fill=clear]):focus,.sc-smoothly-submit-h:not([fill=clear]):active{border-color:rgb(var(--smoothly-color-tint)) !important;background:rgb(var(--smoothly-color-tint)) !important}.sc-smoothly-submit-h:not([fill=clear]):hover>button.sc-smoothly-submit,.sc-smoothly-submit-h:not([fill=clear]):focus>button.sc-smoothly-submit,.sc-smoothly-submit-h:not([fill=clear]):active>button.sc-smoothly-submit{color:rgb(var(--smoothly-color-contrast)) !important;stroke:rgb(var(--smoothly-color-contrast)) !important;fill:rgb(var(--smoothly-color-contrast)) !important}[fill=clear].sc-smoothly-submit-h:hover>button.sc-smoothly-submit,[fill=clear].sc-smoothly-submit-h:focus>button.sc-smoothly-submit,[fill=clear].sc-smoothly-submit-h:active>button.sc-smoothly-submit{color:rgb(var(--smoothly-color-tint)) !important;stroke:rgb(var(--smoothly-color-tint)) !important;fill:rgb(var(--smoothly-color-tint)) !important}[disabled].sc-smoothly-submit-h{opacity:0.5;pointer-events:none}.sc-smoothly-submit-h:not([fill]),[fill=default].sc-smoothly-submit-h{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}[fill=solid].sc-smoothly-submit-h{stroke:rgb(var(--smoothly-color-contrast));fill:rgb(var(--smoothly-color-contrast));background:rgb(var(--smoothly-color));border-color:rgb(var(--smoothly-color-shade))}[fill=solid].sc-smoothly-submit-h>button.sc-smoothly-submit,[fill=default].sc-smoothly-submit-h>button.sc-smoothly-submit{color:rgb(var(--smoothly-color-contrast))}[fill=outline].sc-smoothly-submit-h{stroke:rgb(var(--smoothly-color));fill:rgb(var(--smoothly-color));background:transparent;border-color:rgb(var(--smoothly-color))}[fill=clear].sc-smoothly-submit-h{stroke:rgb(var(--smoothly-color));fill:rgb(var(--smoothly-color));background:transparent;border-color:transparent}[fill=outline].sc-smoothly-submit-h>button.sc-smoothly-submit,[fill=clear].sc-smoothly-submit-h>button.sc-smoothly-submit{color:rgb(var(--smoothly-color))}.sc-smoothly-submit-s>smoothly-icon[slot=start],.sc-smoothly-submit-s>smoothly-icon[slot=end]{font-size:0.65em}[hidden].sc-smoothly-submit-h{display:none}";
|
|
27525
27539
|
|
|
27526
27540
|
const SmoothlySubmit = class {
|
|
27527
27541
|
constructor(hostRef) {
|
|
@@ -28040,6 +28054,7 @@ exports.smoothly_app = SmoothlyApp;
|
|
|
28040
28054
|
exports.smoothly_app_demo = SmoothlyAppDemo;
|
|
28041
28055
|
exports.smoothly_backtotop = SmoothlyBacktotop;
|
|
28042
28056
|
exports.smoothly_button = SmoothlyButton;
|
|
28057
|
+
exports.smoothly_button_demo = SmoothlyButtonDemo;
|
|
28043
28058
|
exports.smoothly_calendar = Calendar;
|
|
28044
28059
|
exports.smoothly_checkbox = SmoothlyCheckbox;
|
|
28045
28060
|
exports.smoothly_dialog = SmoothlyDialog;
|
|
@@ -28095,4 +28110,4 @@ exports.smoothly_trigger = SmoothlyTrigger;
|
|
|
28095
28110
|
exports.smoothly_tuple = SmoothlyTuple;
|
|
28096
28111
|
exports.smoothly_urlencoded = Urlencoded;
|
|
28097
28112
|
|
|
28098
|
-
//# sourceMappingURL=smoothly-
|
|
28113
|
+
//# sourceMappingURL=smoothly-accordion_61.cjs.entry.js.map
|