smoothly 0.1.100 → 0.1.103
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_48.cjs.entry.js +10 -5
- package/dist/cjs/smoothly-display-demo.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-input.cjs.entry.js +2 -2
- package/dist/cjs/smoothly-spinner.cjs.entry.js +7 -2
- package/dist/cjs/smoothly.cjs.js +1 -1
- package/dist/collection/components/display-demo/index.js +10 -1
- package/dist/collection/components/input/index.js +2 -2
- package/dist/collection/components/input/style.css +23 -33
- package/dist/collection/components/spinner/index.js +30 -3
- package/dist/collection/components/spinner/style.css +48 -60
- package/dist/custom-elements/index.js +11 -6
- package/dist/esm/loader.js +1 -1
- package/dist/esm/smoothly-accordion_48.entry.js +10 -5
- package/dist/esm/smoothly-display-demo.entry.js +1 -1
- package/dist/esm/smoothly-input.entry.js +2 -2
- package/dist/esm/smoothly-spinner.entry.js +8 -3
- package/dist/esm/smoothly.js +1 -1
- package/dist/smoothly/{p-a8cd3a7b.entry.js → p-3160a740.entry.js} +1 -1
- package/dist/smoothly/smoothly-display-demo.entry.js +1 -1
- package/dist/smoothly/smoothly-input.entry.js +2 -2
- package/dist/smoothly/smoothly-spinner.entry.js +8 -3
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/dist/types/components/spinner/index.d.ts +1 -0
- package/dist/types/components.d.ts +2 -0
- package/package.json +1 -1
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -30,7 +30,7 @@ const defineCustomElements = (win, options) => {
|
|
|
30
30
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
31
31
|
return patchEsm().then(() => {
|
|
32
32
|
appGlobals.globalScripts();
|
|
33
|
-
return index.bootstrapLazy([["smoothly-app-demo.cjs",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}]]],["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-input-demo.cjs",[[0,"smoothly-input-demo"]]],["smoothly-select-demo.cjs",[[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]]]],["smoothly-
|
|
33
|
+
return index.bootstrapLazy([["smoothly-app-demo.cjs",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}]]],["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-input-demo.cjs",[[0,"smoothly-input-demo"]]],["smoothly-select-demo.cjs",[[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]]]],["smoothly-display-demo.cjs",[[0,"smoothly-display-demo"]]],["smoothly-table-demo.cjs",[[2,"smoothly-table-demo"]]],["smoothly-app.cjs",[[4,"smoothly-app",{"color":[1]}]]],["smoothly-dialog-demo.cjs",[[0,"smoothly-dialog-demo"]]],["smoothly-icon-demo.cjs",[[2,"smoothly-icon-demo"]]],["smoothly-room.cjs",[[4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}]]],["smoothly-input-date-range.cjs",[[2,"smoothly-input-date-range",{"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"open":[1028],"showLabel":[516,"show-label"]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"],[0,"dateRangeSet","onDateRangeSet"]]]]],["smoothly-notifier.cjs",[[6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]]]],["smoothly-picker.cjs",[[1,"smoothly-picker",{"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"optionStyle":[8,"option-style"],"options":[16],"labelSetting":[513,"label-setting"],"label":[513],"selections":[1040],"selectNoneName":[1025,"select-none-name"],"isOpen":[32]},[[0,"optionSelect","optionSelectHander"]]]]],["smoothly-dialog.cjs",[[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]]]],["smoothly-backtotop.cjs",[[2,"smoothly-backtotop",{"opacity":[1],"bottom":[1],"right":[1],"visible":[32]}]]],["smoothly-checkbox.cjs",[[2,"smoothly-checkbox",{"selectAll":[4,"select-all"],"size":[1],"intermediate":[1540],"selected":[1540],"disabled":[1540],"t":[32]}]]],["smoothly-submit.cjs",[[6,"smoothly-submit",{"processing":[1540],"color":[513],"expand":[513],"fill":[513],"disabled":[516],"prevent":[4],"submit":[64]},[[0,"click","handleSubmit"]]]]],["smoothly-tuple.cjs",[[0,"smoothly-tuple",{"tuple":[16]}]]],["smoothly-urlencoded.cjs",[[0,"smoothly-urlencoded",{"data":[1]}]]],["smoothly-accordion.cjs",[[6,"smoothly-accordion",{"value":[1025]},[[0,"smoothlyOpen","handleOpenClose"],[0,"smoothlyClose","handleOpenClose"],[0,"smoothlyAccordionItemDidLoad","onAccordionItemDidLoad"],[0,"smoothlyAccordionItemDidUnload","onAccordionItemDidUnload"]]]]],["smoothly-accordion-item.cjs",[[6,"smoothly-accordion-item",{"name":[1],"brand":[1],"open":[1540]}]]],["smoothly-display-amount.cjs",[[2,"smoothly-display-amount",{"amount":[8],"currency":[1]}]]],["smoothly-frame.cjs",[[2,"smoothly-frame",{"url":[1],"name":[1],"origin":[1],"send":[64]}]]],["smoothly-popup.cjs",[[6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}]]],["smoothly-quiet.cjs",[[6,"smoothly-quiet",{"color":[1]}]]],["smoothly-radio.cjs",[[6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tabIndex":[2,"tab-index"]}]]],["smoothly-select.cjs",[[6,"smoothly-select",{"identifier":[1],"background":[513],"value":[1025]}]]],["smoothly-tab.cjs",[[6,"smoothly-tab",{"label":[1],"open":[1540]},[[0,"click","onClick"]]]]],["smoothly-tab-switch.cjs",[[6,"smoothly-tab-switch",{"selectedElement":[32]},[[0,"expansionOpen","openChanged"]]]]],["smoothly-table.cjs",[[6,"smoothly-table",null,[[0,"sort","onSort"]]]]],["smoothly-table-cell.cjs",[[6,"smoothly-table-cell"]]],["smoothly-table-expandable-cell.cjs",[[6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540],"beginOpen":[32]},[[0,"click","onClick"]]]]],["smoothly-table-expandable-row.cjs",[[6,"smoothly-table-expandable-row",null,[[0,"expansionLoaded","onExpansionLoaded"],[0,"expansionOpen","onDetailsLoaded"]]]]],["smoothly-table-header.cjs",[[6,"smoothly-table-header",{"name":[1],"sortDirection":[1025,"sort-direction"]},[[0,"click","onClick"]]]]],["smoothly-table-row.cjs",[[6,"smoothly-table-row",{"align":[1],"open":[1540],"beginOpen":[32]},[[0,"click","onClick"]]]]],["smoothly-icon.cjs",[[2,"smoothly-icon",{"color":[513],"fill":[513],"name":[1],"size":[513],"toolTip":[1,"tool-tip"],"document":[32]}]]],["smoothly-input-date.cjs",[[6,"smoothly-input-date",{"value":[1025],"open":[1028],"max":[1025],"min":[1025]},[[0,"dateSet","dateSetHandler"]]]]],["smoothly-notification.cjs",[[2,"smoothly-notification",{"notice":[16],"tick":[32]},[[0,"trigger","onTrigger"]]]]],["smoothly-menu-options.cjs",[[1,"smoothly-menu-options",{"emptyMenuLabel":[1025,"empty-menu-label"],"maxMenuHeight":[1,"max-menu-height"],"order":[4],"optionStyle":[8,"option-style"],"options":[1040],"resetHighlightOnOptionsChange":[1028,"reset-highlight-on-options-change"],"filteredOptions":[32],"highlightIndex":[32],"moveHighlight":[64],"setHighlight":[64],"getHighlighted":[64],"filterOptions":[64]},[[0,"optionHover","optionHoverHandler"]]]]],["smoothly-display.cjs",[[2,"smoothly-display",{"type":[1],"value":[8],"currency":[1],"country":[1]}]]],["smoothly-display-date-time.cjs",[[2,"smoothly-display-date-time",{"datetime":[1]}]]],["smoothly-option.cjs",[[1,"smoothly-option",{"aliases":[513],"dataHighlight":[1540,"data-highlight"],"name":[1537],"value":[1537]}]]],["smoothly-spinner.cjs",[[2,"smoothly-spinner",{"active":[516],"size":[513]}]]],["smoothly-selector.cjs",[[6,"smoothly-selector",{"opened":[32],"selectedElement":[32],"missing":[32],"filter":[32]},[[0,"click","onClick"],[0,"itemSelected","onItemSelected"],[0,"keydown","onKeyDown"]]]]],["smoothly-item.cjs",[[6,"smoothly-item",{"value":[8],"selected":[1540],"filter":[64]},[[0,"click","onClick"]]]]],["smoothly-calendar.cjs",[[2,"smoothly-calendar",{"month":[1025],"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"doubleInput":[516,"double-input"],"firstSelected":[32]}]]],["smoothly-input.cjs",[[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":[1025],"disabled":[1028],"currency":[513],"getFormData":[64],"setKeepFocusOnReRender":[64],"setSelectionRange":[64]}]]],["smoothly-input-month.cjs",[[2,"smoothly-input-month",{"value":[1025]}]]],["smoothly-trigger.cjs",[[6,"smoothly-trigger",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"name":[1],"value":[8]},[[0,"click","onClick"]]]]]], options);
|
|
34
34
|
});
|
|
35
35
|
};
|
|
36
36
|
|
|
@@ -39100,7 +39100,7 @@ let SmoothlyDisplayDemo = class {
|
|
|
39100
39100
|
}
|
|
39101
39101
|
render() {
|
|
39102
39102
|
return [
|
|
39103
|
-
index.h("main", null, index.h("smoothly-popup", null, index.h("div", null, "Popup, click me"), index.h("div", { color: "dark", slot: "popup" }, "1 line popup")), index.h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), index.h("dl", null, index.h("dt", null, "text"), index.h("dd", null, index.h("smoothly-display", { type: "text", value: "text" })), index.h("dt", null, "postal code"), index.h("dd", null, index.h("smoothly-display", { type: "postal-code", value: "752 31" })), index.h("dt", null, "password"), index.h("dd", null, index.h("smoothly-display", { type: "password", value: "password" })), index.h("dt", null, "email"), index.h("dd", null, index.h("smoothly-display", { type: "email", value: "test@example.com" })), index.h("dt", null, "price"), index.h("dd", null, index.h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), index.h("dt", null, "percent"), index.h("dd", null, index.h("smoothly-display", { type: "percent", value: "42" })), index.h("dt", null, "phone"), index.h("dd", null, index.h("smoothly-display", { type: "phone", value: "0101881108" })), index.h("dt", null, "card number"), index.h("dd", null, index.h("smoothly-display", { type: "card-number", value: "4111111111111111" })), index.h("dt", null, "card expires"), index.h("dd", null, index.h("smoothly-display", { type: "card-expires", value: "7/22" })), index.h("dt", null, "card csc"), index.h("dd", null, index.h("smoothly-display", { type: "card-csc", value: "987" })), index.h("dt", null, "Quiet"), index.h("dd", null, index.h("smoothly-quiet", { color: "dark" }, "-"))), index.h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), index.h("div", { style: { display: "flex", justifyContent: "space-between" } }, index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), index.h("p", null, "Test of diffrent kinds of notifier:"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.succeded("This is a test success notice.")) }, "success"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")),
|
|
39103
|
+
index.h("main", null, index.h("smoothly-popup", null, index.h("div", null, "Popup, click me"), index.h("div", { color: "dark", slot: "popup" }, "1 line popup")), index.h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), index.h("dl", null, index.h("dt", null, "text"), index.h("dd", null, index.h("smoothly-display", { type: "text", value: "text" })), index.h("dt", null, "postal code"), index.h("dd", null, index.h("smoothly-display", { type: "postal-code", value: "752 31" })), index.h("dt", null, "password"), index.h("dd", null, index.h("smoothly-display", { type: "password", value: "password" })), index.h("dt", null, "email"), index.h("dd", null, index.h("smoothly-display", { type: "email", value: "test@example.com" })), index.h("dt", null, "price"), index.h("dd", null, index.h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), index.h("dt", null, "percent"), index.h("dd", null, index.h("smoothly-display", { type: "percent", value: "42" })), index.h("dt", null, "phone"), index.h("dd", null, index.h("smoothly-display", { type: "phone", value: "0101881108" })), index.h("dt", null, "card number"), index.h("dd", null, index.h("smoothly-display", { type: "card-number", value: "4111111111111111" })), index.h("dt", null, "card expires"), index.h("dd", null, index.h("smoothly-display", { type: "card-expires", value: "7/22" })), index.h("dt", null, "card csc"), index.h("dd", null, index.h("smoothly-display", { type: "card-csc", value: "987" })), index.h("dt", null, "Quiet"), index.h("dd", null, index.h("smoothly-quiet", { color: "dark" }, "-"))), index.h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), index.h("div", { style: { display: "flex", justifyContent: "space-between" } }, index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), index.h("p", null, "Test of diffrent kinds of notifier:"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.succeded("This is a test success notice.")) }, "success"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { onClick: () => this.noticeWarning(Notice.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay"), index.h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", index.h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), index.h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", index.h("smoothly-spinner", { active: true, size: "medium" })), index.h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", index.h("smoothly-spinner", { active: true, size: "small" }))),
|
|
39104
39104
|
];
|
|
39105
39105
|
}
|
|
39106
39106
|
};
|
|
@@ -39675,7 +39675,7 @@ let SmoothlyIconDemo = class {
|
|
|
39675
39675
|
};
|
|
39676
39676
|
SmoothlyIconDemo.style = styleCss$s;
|
|
39677
39677
|
|
|
39678
|
-
const styleCss$r = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight);padding:var(--padding)}[hidden].sc-smoothly-input-h{display:none}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--smoothly-
|
|
39678
|
+
const styleCss$r = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight);padding:var(--padding);overflow:hidden;background-color:rgb(var(--background-color));color:rgb(var(--text-color, var(--smoothly-default-contrast)))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--text-color, var(--smoothly-default-contrast)));opacity:0.8;user-select:none;cursor:inherit;transition:transform 0.1s;transform-origin:top left;transition-timing-function:ease}.sc-smoothly-input-h:not([show-label]) label.sc-smoothly-input{display:none}.sc-smoothly-input-h:not([show-label]) input.sc-smoothly-input{padding:0.6em 0.2em 0.6em 0.2em}input.sc-smoothly-input{padding:1em 0.2em 0.2em 0.2em;box-sizing:border-box;width:100%;height:100%;background:none;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family);background-color:rgb(var(--background-color))}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+label.sc-smoothly-input+smoothly-icon.sc-smoothly-input{display:block}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.has-value.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input,.sc-smoothly-input-h:focus-within>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;transform:scale(0.6)}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--background-color)) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--background-color)) inset}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--text-color, var(--smoothly-default-contrast)))}";
|
|
39679
39679
|
|
|
39680
39680
|
let SmoothlyInput = class {
|
|
39681
39681
|
constructor(hostRef) {
|
|
@@ -39854,7 +39854,7 @@ let SmoothlyInput = class {
|
|
|
39854
39854
|
}
|
|
39855
39855
|
render() {
|
|
39856
39856
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
39857
|
-
return (index.h(index.Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("div", null, index.h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), index.h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" })
|
|
39857
|
+
return (index.h(index.Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("div", null, index.h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), index.h("label", { htmlFor: this.name }, index.h("slot", null)), index.h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }))));
|
|
39858
39858
|
}
|
|
39859
39859
|
static get watchers() { return {
|
|
39860
39860
|
"value": ["valueWatcher"],
|
|
@@ -40652,14 +40652,19 @@ function isItem(value) {
|
|
|
40652
40652
|
}
|
|
40653
40653
|
Selector.style = styleCss$c;
|
|
40654
40654
|
|
|
40655
|
-
const styleCss$b = ".sc-smoothly-spinner-h{display:
|
|
40655
|
+
const styleCss$b = ".sc-smoothly-spinner-h:not([active]){display:none}[hidden].sc-smoothly-spinner-h{display:none}.sc-smoothly-spinner-h{display:block;stroke:rgb(var(--spinner-color, var(--smoothly-primary-tint)));position:absolute;inset:0;width:100%;height:100%;background-color:rgba(var(--background-color, var(--smoothly-default-color)), var(--background-opacity, var(--smoothly-semitransparent, 0.8)))}.sc-smoothly-spinner-h svg.sc-smoothly-spinner{position:absolute;left:calc(50% - var(--size) / 2);top:calc(50% - var(--size) / 2);width:var(--size);animation:SPIN-SVG 1.4s linear infinite}.sc-smoothly-spinner-h svg.sc-smoothly-spinner circle.sc-smoothly-spinner{transform-origin:center;animation:SPIN-CIRCLE 1.4s ease-in-out infinite;stroke-dasharray:187;stroke-dashoffset:0}@keyframes SPIN-SVG{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}@keyframes SPIN-CIRCLE{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}";
|
|
40656
40656
|
|
|
40657
40657
|
let SmoothlySpinner = class {
|
|
40658
40658
|
constructor(hostRef) {
|
|
40659
40659
|
index.registerInstance(this, hostRef);
|
|
40660
|
+
this.size = "large";
|
|
40660
40661
|
}
|
|
40661
40662
|
render() {
|
|
40662
|
-
|
|
40663
|
+
const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : 12;
|
|
40664
|
+
return (index.h(index.Host, { style: {
|
|
40665
|
+
"--color": `var(--spinner-color)`,
|
|
40666
|
+
"--size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : "1.2em",
|
|
40667
|
+
} }, index.h("svg", { class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
|
|
40663
40668
|
}
|
|
40664
40669
|
};
|
|
40665
40670
|
SmoothlySpinner.style = styleCss$b;
|
|
@@ -17,7 +17,7 @@ let SmoothlyDisplayDemo = class {
|
|
|
17
17
|
}
|
|
18
18
|
render() {
|
|
19
19
|
return [
|
|
20
|
-
index.h("main", null, index.h("smoothly-popup", null, index.h("div", null, "Popup, click me"), index.h("div", { color: "dark", slot: "popup" }, "1 line popup")), index.h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), index.h("dl", null, index.h("dt", null, "text"), index.h("dd", null, index.h("smoothly-display", { type: "text", value: "text" })), index.h("dt", null, "postal code"), index.h("dd", null, index.h("smoothly-display", { type: "postal-code", value: "752 31" })), index.h("dt", null, "password"), index.h("dd", null, index.h("smoothly-display", { type: "password", value: "password" })), index.h("dt", null, "email"), index.h("dd", null, index.h("smoothly-display", { type: "email", value: "test@example.com" })), index.h("dt", null, "price"), index.h("dd", null, index.h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), index.h("dt", null, "percent"), index.h("dd", null, index.h("smoothly-display", { type: "percent", value: "42" })), index.h("dt", null, "phone"), index.h("dd", null, index.h("smoothly-display", { type: "phone", value: "0101881108" })), index.h("dt", null, "card number"), index.h("dd", null, index.h("smoothly-display", { type: "card-number", value: "4111111111111111" })), index.h("dt", null, "card expires"), index.h("dd", null, index.h("smoothly-display", { type: "card-expires", value: "7/22" })), index.h("dt", null, "card csc"), index.h("dd", null, index.h("smoothly-display", { type: "card-csc", value: "987" })), index.h("dt", null, "Quiet"), index.h("dd", null, index.h("smoothly-quiet", { color: "dark" }, "-"))), index.h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), index.h("div", { style: { display: "flex", justifyContent: "space-between" } }, index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), index.h("p", null, "Test of diffrent kinds of notifier:"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.succeded("This is a test success notice.")) }, "success"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")),
|
|
20
|
+
index.h("main", null, index.h("smoothly-popup", null, index.h("div", null, "Popup, click me"), index.h("div", { color: "dark", slot: "popup" }, "1 line popup")), index.h("smoothly-display-date-time", { datetime: "2019-08-15T08:08:17.65Z" }), index.h("dl", null, index.h("dt", null, "text"), index.h("dd", null, index.h("smoothly-display", { type: "text", value: "text" })), index.h("dt", null, "postal code"), index.h("dd", null, index.h("smoothly-display", { type: "postal-code", value: "752 31" })), index.h("dt", null, "password"), index.h("dd", null, index.h("smoothly-display", { type: "password", value: "password" })), index.h("dt", null, "email"), index.h("dd", null, index.h("smoothly-display", { type: "email", value: "test@example.com" })), index.h("dt", null, "price"), index.h("dd", null, index.h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })), index.h("dt", null, "percent"), index.h("dd", null, index.h("smoothly-display", { type: "percent", value: "42" })), index.h("dt", null, "phone"), index.h("dd", null, index.h("smoothly-display", { type: "phone", value: "0101881108" })), index.h("dt", null, "card number"), index.h("dd", null, index.h("smoothly-display", { type: "card-number", value: "4111111111111111" })), index.h("dt", null, "card expires"), index.h("dd", null, index.h("smoothly-display", { type: "card-expires", value: "7/22" })), index.h("dt", null, "card csc"), index.h("dd", null, index.h("smoothly-display", { type: "card-csc", value: "987" })), index.h("dt", null, "Quiet"), index.h("dd", null, index.h("smoothly-quiet", { color: "dark" }, "-"))), index.h("smoothly-urlencoded", { data: "hej=hopp&tjena=moss" }), index.h("div", { style: { display: "flex", justifyContent: "space-between" } }, index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup stuff that has a lot of text")), index.h("smoothly-popup", { direction: "down" }, "Click for popup", index.h("span", { slot: "popup", color: "dark", style: { whiteSpace: "nowrap" } }, "Some popup with a bunch of text."))), index.h("p", null, "Test of diffrent kinds of notifier:"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.warn("This is a test warning notice.")) }, "warning"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.succeded("This is a test success notice.")) }, "success"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.failed("This is a test danger notice.")) }, "danger"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"), index.h("button", { onClick: () => this.noticeWarning(index$1.Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay"), index.h("div", { style: { position: "relative", height: "10em" } }, "Large Spinner", index.h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })), index.h("div", { style: { position: "relative", height: "10em" } }, "Medium Spinner", index.h("smoothly-spinner", { active: true, size: "medium" })), index.h("div", { style: { position: "relative", height: "10em" } }, "Small Spinner", index.h("smoothly-spinner", { active: true, size: "small" }))),
|
|
21
21
|
];
|
|
22
22
|
}
|
|
23
23
|
};
|
|
@@ -7,7 +7,7 @@ const index$2 = require('./index-ac32385c.js');
|
|
|
7
7
|
const index$1 = require('./index-d66869d7.js');
|
|
8
8
|
require('./_commonjsHelpers-10109b76.js');
|
|
9
9
|
|
|
10
|
-
const styleCss = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight);padding:var(--padding)}[hidden].sc-smoothly-input-h{display:none}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--smoothly-
|
|
10
|
+
const styleCss = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight);padding:var(--padding);overflow:hidden;background-color:rgb(var(--background-color));color:rgb(var(--text-color, var(--smoothly-default-contrast)))}[hidden].sc-smoothly-input-h{display:none}.sc-smoothly-input-h>div.sc-smoothly-input{position:relative;width:100%;height:100%}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--text-color, var(--smoothly-default-contrast)));opacity:0.8;user-select:none;cursor:inherit;transition:transform 0.1s;transform-origin:top left;transition-timing-function:ease}.sc-smoothly-input-h:not([show-label]) label.sc-smoothly-input{display:none}.sc-smoothly-input-h:not([show-label]) input.sc-smoothly-input{padding:0.6em 0.2em 0.6em 0.2em}input.sc-smoothly-input{padding:1em 0.2em 0.2em 0.2em;box-sizing:border-box;width:100%;height:100%;background:none;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family);background-color:rgb(var(--background-color))}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+label.sc-smoothly-input+smoothly-icon.sc-smoothly-input{display:block}.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input{z-index:1;pointer-events:none}.has-value.sc-smoothly-input-h>div.sc-smoothly-input>label.sc-smoothly-input,.sc-smoothly-input-h:focus-within>div.sc-smoothly-input>label.sc-smoothly-input{top:0.4em;transform:scale(0.6)}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 40em rgb(var(--background-color)) inset;-webkit-box-shadow:0 0 0 40em rgb(var(--background-color)) inset}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill+label.sc-smoothly-input{-webkit-text-fill-color:rgb(var(--text-color, var(--smoothly-default-contrast)))}";
|
|
11
11
|
|
|
12
12
|
let SmoothlyInput = class {
|
|
13
13
|
constructor(hostRef) {
|
|
@@ -186,7 +186,7 @@ let SmoothlyInput = class {
|
|
|
186
186
|
}
|
|
187
187
|
render() {
|
|
188
188
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
189
|
-
return (index.h(index.Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("div", null, index.h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), index.h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" })
|
|
189
|
+
return (index.h(index.Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("div", null, index.h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), index.h("label", { htmlFor: this.name }, index.h("slot", null)), index.h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }))));
|
|
190
190
|
}
|
|
191
191
|
static get watchers() { return {
|
|
192
192
|
"value": ["valueWatcher"],
|
|
@@ -4,14 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-138c41c2.js');
|
|
6
6
|
|
|
7
|
-
const styleCss = ".sc-smoothly-spinner-h{display:
|
|
7
|
+
const styleCss = ".sc-smoothly-spinner-h:not([active]){display:none}[hidden].sc-smoothly-spinner-h{display:none}.sc-smoothly-spinner-h{display:block;stroke:rgb(var(--spinner-color, var(--smoothly-primary-tint)));position:absolute;inset:0;width:100%;height:100%;background-color:rgba(var(--background-color, var(--smoothly-default-color)), var(--background-opacity, var(--smoothly-semitransparent, 0.8)))}.sc-smoothly-spinner-h svg.sc-smoothly-spinner{position:absolute;left:calc(50% - var(--size) / 2);top:calc(50% - var(--size) / 2);width:var(--size);animation:SPIN-SVG 1.4s linear infinite}.sc-smoothly-spinner-h svg.sc-smoothly-spinner circle.sc-smoothly-spinner{transform-origin:center;animation:SPIN-CIRCLE 1.4s ease-in-out infinite;stroke-dasharray:187;stroke-dashoffset:0}@keyframes SPIN-SVG{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}@keyframes SPIN-CIRCLE{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}";
|
|
8
8
|
|
|
9
9
|
let SmoothlySpinner = class {
|
|
10
10
|
constructor(hostRef) {
|
|
11
11
|
index.registerInstance(this, hostRef);
|
|
12
|
+
this.size = "large";
|
|
12
13
|
}
|
|
13
14
|
render() {
|
|
14
|
-
|
|
15
|
+
const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : 12;
|
|
16
|
+
return (index.h(index.Host, { style: {
|
|
17
|
+
"--color": `var(--spinner-color)`,
|
|
18
|
+
"--size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : "1.2em",
|
|
19
|
+
} }, index.h("svg", { class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
|
|
15
20
|
}
|
|
16
21
|
};
|
|
17
22
|
SmoothlySpinner.style = styleCss;
|
package/dist/cjs/smoothly.cjs.js
CHANGED
|
@@ -123,5 +123,5 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
|
|
|
123
123
|
|
|
124
124
|
patchBrowser().then(options => {
|
|
125
125
|
appGlobals.globalScripts();
|
|
126
|
-
return index.bootstrapLazy([["smoothly-app-demo.cjs",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}]]],["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-input-demo.cjs",[[0,"smoothly-input-demo"]]],["smoothly-select-demo.cjs",[[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]]]],["smoothly-
|
|
126
|
+
return index.bootstrapLazy([["smoothly-app-demo.cjs",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}]]],["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-input-demo.cjs",[[0,"smoothly-input-demo"]]],["smoothly-select-demo.cjs",[[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]]]],["smoothly-display-demo.cjs",[[0,"smoothly-display-demo"]]],["smoothly-table-demo.cjs",[[2,"smoothly-table-demo"]]],["smoothly-app.cjs",[[4,"smoothly-app",{"color":[1]}]]],["smoothly-dialog-demo.cjs",[[0,"smoothly-dialog-demo"]]],["smoothly-icon-demo.cjs",[[2,"smoothly-icon-demo"]]],["smoothly-room.cjs",[[4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}]]],["smoothly-input-date-range.cjs",[[2,"smoothly-input-date-range",{"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"open":[1028],"showLabel":[516,"show-label"]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"],[0,"dateRangeSet","onDateRangeSet"]]]]],["smoothly-notifier.cjs",[[6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]]]],["smoothly-picker.cjs",[[1,"smoothly-picker",{"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"optionStyle":[8,"option-style"],"options":[16],"labelSetting":[513,"label-setting"],"label":[513],"selections":[1040],"selectNoneName":[1025,"select-none-name"],"isOpen":[32]},[[0,"optionSelect","optionSelectHander"]]]]],["smoothly-dialog.cjs",[[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]]]],["smoothly-backtotop.cjs",[[2,"smoothly-backtotop",{"opacity":[1],"bottom":[1],"right":[1],"visible":[32]}]]],["smoothly-checkbox.cjs",[[2,"smoothly-checkbox",{"selectAll":[4,"select-all"],"size":[1],"intermediate":[1540],"selected":[1540],"disabled":[1540],"t":[32]}]]],["smoothly-submit.cjs",[[6,"smoothly-submit",{"processing":[1540],"color":[513],"expand":[513],"fill":[513],"disabled":[516],"prevent":[4],"submit":[64]},[[0,"click","handleSubmit"]]]]],["smoothly-tuple.cjs",[[0,"smoothly-tuple",{"tuple":[16]}]]],["smoothly-urlencoded.cjs",[[0,"smoothly-urlencoded",{"data":[1]}]]],["smoothly-accordion.cjs",[[6,"smoothly-accordion",{"value":[1025]},[[0,"smoothlyOpen","handleOpenClose"],[0,"smoothlyClose","handleOpenClose"],[0,"smoothlyAccordionItemDidLoad","onAccordionItemDidLoad"],[0,"smoothlyAccordionItemDidUnload","onAccordionItemDidUnload"]]]]],["smoothly-accordion-item.cjs",[[6,"smoothly-accordion-item",{"name":[1],"brand":[1],"open":[1540]}]]],["smoothly-display-amount.cjs",[[2,"smoothly-display-amount",{"amount":[8],"currency":[1]}]]],["smoothly-frame.cjs",[[2,"smoothly-frame",{"url":[1],"name":[1],"origin":[1],"send":[64]}]]],["smoothly-popup.cjs",[[6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}]]],["smoothly-quiet.cjs",[[6,"smoothly-quiet",{"color":[1]}]]],["smoothly-radio.cjs",[[6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tabIndex":[2,"tab-index"]}]]],["smoothly-select.cjs",[[6,"smoothly-select",{"identifier":[1],"background":[513],"value":[1025]}]]],["smoothly-tab.cjs",[[6,"smoothly-tab",{"label":[1],"open":[1540]},[[0,"click","onClick"]]]]],["smoothly-tab-switch.cjs",[[6,"smoothly-tab-switch",{"selectedElement":[32]},[[0,"expansionOpen","openChanged"]]]]],["smoothly-table.cjs",[[6,"smoothly-table",null,[[0,"sort","onSort"]]]]],["smoothly-table-cell.cjs",[[6,"smoothly-table-cell"]]],["smoothly-table-expandable-cell.cjs",[[6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540],"beginOpen":[32]},[[0,"click","onClick"]]]]],["smoothly-table-expandable-row.cjs",[[6,"smoothly-table-expandable-row",null,[[0,"expansionLoaded","onExpansionLoaded"],[0,"expansionOpen","onDetailsLoaded"]]]]],["smoothly-table-header.cjs",[[6,"smoothly-table-header",{"name":[1],"sortDirection":[1025,"sort-direction"]},[[0,"click","onClick"]]]]],["smoothly-table-row.cjs",[[6,"smoothly-table-row",{"align":[1],"open":[1540],"beginOpen":[32]},[[0,"click","onClick"]]]]],["smoothly-icon.cjs",[[2,"smoothly-icon",{"color":[513],"fill":[513],"name":[1],"size":[513],"toolTip":[1,"tool-tip"],"document":[32]}]]],["smoothly-input-date.cjs",[[6,"smoothly-input-date",{"value":[1025],"open":[1028],"max":[1025],"min":[1025]},[[0,"dateSet","dateSetHandler"]]]]],["smoothly-notification.cjs",[[2,"smoothly-notification",{"notice":[16],"tick":[32]},[[0,"trigger","onTrigger"]]]]],["smoothly-menu-options.cjs",[[1,"smoothly-menu-options",{"emptyMenuLabel":[1025,"empty-menu-label"],"maxMenuHeight":[1,"max-menu-height"],"order":[4],"optionStyle":[8,"option-style"],"options":[1040],"resetHighlightOnOptionsChange":[1028,"reset-highlight-on-options-change"],"filteredOptions":[32],"highlightIndex":[32],"moveHighlight":[64],"setHighlight":[64],"getHighlighted":[64],"filterOptions":[64]},[[0,"optionHover","optionHoverHandler"]]]]],["smoothly-display.cjs",[[2,"smoothly-display",{"type":[1],"value":[8],"currency":[1],"country":[1]}]]],["smoothly-display-date-time.cjs",[[2,"smoothly-display-date-time",{"datetime":[1]}]]],["smoothly-option.cjs",[[1,"smoothly-option",{"aliases":[513],"dataHighlight":[1540,"data-highlight"],"name":[1537],"value":[1537]}]]],["smoothly-spinner.cjs",[[2,"smoothly-spinner",{"active":[516],"size":[513]}]]],["smoothly-selector.cjs",[[6,"smoothly-selector",{"opened":[32],"selectedElement":[32],"missing":[32],"filter":[32]},[[0,"click","onClick"],[0,"itemSelected","onItemSelected"],[0,"keydown","onKeyDown"]]]]],["smoothly-item.cjs",[[6,"smoothly-item",{"value":[8],"selected":[1540],"filter":[64]},[[0,"click","onClick"]]]]],["smoothly-calendar.cjs",[[2,"smoothly-calendar",{"month":[1025],"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"doubleInput":[516,"double-input"],"firstSelected":[32]}]]],["smoothly-input.cjs",[[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":[1025],"disabled":[1028],"currency":[513],"getFormData":[64],"setKeepFocusOnReRender":[64],"setSelectionRange":[64]}]]],["smoothly-input-month.cjs",[[2,"smoothly-input-month",{"value":[1025]}]]],["smoothly-trigger.cjs",[[6,"smoothly-trigger",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"name":[1],"value":[8]},[[0,"click","onClick"]]]]]], options);
|
|
127
127
|
});
|
|
@@ -59,7 +59,16 @@ export class SmoothlyDisplayDemo {
|
|
|
59
59
|
h("button", { onClick: () => this.noticeWarning(Notice.succeded("This is a test success notice.")) }, "success"),
|
|
60
60
|
h("button", { onClick: () => this.noticeWarning(Notice.failed("This is a test danger notice.")) }, "danger"),
|
|
61
61
|
h("button", { onClick: () => this.noticeWarning(Notice.execute("This is a test execute notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "execute"),
|
|
62
|
-
h("button", { onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay")
|
|
62
|
+
h("button", { onClick: () => this.noticeWarning(Notice.delay("This is a test delay notice.", () => new Promise(resolve => window.setTimeout(() => resolve([true, "This went great"]), 3000)))) }, "delay"),
|
|
63
|
+
h("div", { style: { position: "relative", height: "10em" } },
|
|
64
|
+
"Large Spinner",
|
|
65
|
+
h("smoothly-spinner", { active: true, size: "large", style: { "--background-color": "255,255,255", "--background-opacity": "0.2", "--spinner-color": "0,130,0", } })),
|
|
66
|
+
h("div", { style: { position: "relative", height: "10em" } },
|
|
67
|
+
"Medium Spinner",
|
|
68
|
+
h("smoothly-spinner", { active: true, size: "medium" })),
|
|
69
|
+
h("div", { style: { position: "relative", height: "10em" } },
|
|
70
|
+
"Small Spinner",
|
|
71
|
+
h("smoothly-spinner", { active: true, size: "small" }))),
|
|
63
72
|
];
|
|
64
73
|
}
|
|
65
74
|
static get is() { return "smoothly-display-demo"; }
|
|
@@ -179,9 +179,9 @@ export class SmoothlyInput {
|
|
|
179
179
|
return (h(Host, { class: { "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } },
|
|
180
180
|
h("div", null,
|
|
181
181
|
h("input", { name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_d = this.state) === null || _d === void 0 ? void 0 : _d.autocomplete : "off", disabled: this.disabled, pattern: ((_e = this.state) === null || _e === void 0 ? void 0 : _e.pattern) && ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern.source), value: (_g = this.state) === null || _g === void 0 ? void 0 : _g.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }),
|
|
182
|
-
h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }),
|
|
183
182
|
h("label", { htmlFor: this.name },
|
|
184
|
-
h("slot", null))
|
|
183
|
+
h("slot", null)),
|
|
184
|
+
h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }))));
|
|
185
185
|
}
|
|
186
186
|
static get is() { return "smoothly-input"; }
|
|
187
187
|
static get encapsulation() { return "scoped"; }
|
|
@@ -3,19 +3,28 @@
|
|
|
3
3
|
position: relative;
|
|
4
4
|
font-weight: var(--smoothly-font-weight);
|
|
5
5
|
padding: var(--padding);
|
|
6
|
+
overflow: hidden;
|
|
7
|
+
background-color: rgb(var(--background-color));
|
|
8
|
+
color: rgb(var(--text-color, var(--smoothly-default-contrast)));
|
|
6
9
|
}
|
|
7
10
|
:host[hidden] {
|
|
8
11
|
display: none;
|
|
9
12
|
}
|
|
13
|
+
:host > div {
|
|
14
|
+
position: relative;
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 100%;
|
|
17
|
+
}
|
|
10
18
|
label {
|
|
11
19
|
position: absolute;
|
|
12
20
|
left: 0.4em;
|
|
13
21
|
top: 0.6em;
|
|
14
|
-
color: rgb(var(--smoothly-
|
|
22
|
+
color: rgb(var(--text-color, var(--smoothly-default-contrast)));
|
|
15
23
|
opacity: 0.8;
|
|
16
24
|
user-select: none;
|
|
17
25
|
cursor: inherit;
|
|
18
|
-
transition:
|
|
26
|
+
transition: transform 0.1s;
|
|
27
|
+
transform-origin: top left;
|
|
19
28
|
transition-timing-function: ease;
|
|
20
29
|
}
|
|
21
30
|
:host:not([show-label]) label {
|
|
@@ -26,13 +35,16 @@ label {
|
|
|
26
35
|
}
|
|
27
36
|
input {
|
|
28
37
|
padding: 1em 0.2em 0.2em 0.2em;
|
|
29
|
-
|
|
38
|
+
box-sizing: border-box;
|
|
39
|
+
width: 100%;
|
|
40
|
+
height: 100%;
|
|
30
41
|
background: none;
|
|
31
42
|
border: 0;
|
|
32
43
|
z-index: 1;
|
|
33
44
|
position: relative;
|
|
34
45
|
font-size: 1rem;
|
|
35
46
|
font-family: var(--smoothly-font-family);
|
|
47
|
+
background-color: rgb(var(--background-color));
|
|
36
48
|
}
|
|
37
49
|
smoothly-icon {
|
|
38
50
|
display: none;
|
|
@@ -40,51 +52,29 @@ smoothly-icon {
|
|
|
40
52
|
right: 0.2em;
|
|
41
53
|
top: 0.6em;
|
|
42
54
|
}
|
|
43
|
-
input:invalid + smoothly-icon {
|
|
55
|
+
input:invalid + label + smoothly-icon {
|
|
44
56
|
display: block;
|
|
45
57
|
}
|
|
46
|
-
:host > div {
|
|
47
|
-
position: relative;
|
|
48
|
-
}
|
|
49
58
|
:host > div > label {
|
|
50
59
|
z-index: 1;
|
|
51
60
|
pointer-events: none;
|
|
52
61
|
}
|
|
53
|
-
:host.has-value > div > label
|
|
54
|
-
top: 0.4em;
|
|
55
|
-
font-size: 60%;
|
|
56
|
-
}
|
|
62
|
+
:host.has-value > div > label,
|
|
57
63
|
:host:focus-within > div > label {
|
|
58
64
|
top: 0.4em;
|
|
59
|
-
|
|
65
|
+
transform: scale(0.6);
|
|
60
66
|
}
|
|
61
67
|
input:focus {
|
|
62
68
|
outline: none;
|
|
63
69
|
}
|
|
64
|
-
/* Change the white to any color ;) */
|
|
65
70
|
input:-webkit-autofill,
|
|
66
71
|
input:-webkit-autofill:hover,
|
|
67
72
|
input:-webkit-autofill:focus,
|
|
68
73
|
input:-webkit-autofill:active {
|
|
69
|
-
|
|
70
|
-
box-shadow: 0 0 0
|
|
71
|
-
/* stylelint-disable-next-line declaration-no-important */
|
|
72
|
-
-webkit-box-shadow: 0 0 0 30px unset inset !important;
|
|
74
|
+
box-shadow: 0 0 0 40em rgb(var(--background-color)) inset;
|
|
75
|
+
-webkit-box-shadow: 0 0 0 40em rgb(var(--background-color)) inset;
|
|
73
76
|
}
|
|
74
|
-
input:-webkit-autofill
|
|
75
|
-
|
|
76
|
-
-webkit-text-fill-color:
|
|
77
|
-
}
|
|
78
|
-
input:-internal-autofill-previewed,
|
|
79
|
-
input:-internal-autofill-selected,
|
|
80
|
-
textarea:-internal-autofill-previewed,
|
|
81
|
-
textarea:-internal-autofill-selected,
|
|
82
|
-
select:-internal-autofill-previewed,
|
|
83
|
-
select:-internal-autofill-selected {
|
|
84
|
-
/* stylelint-disable-next-line declaration-no-important */
|
|
85
|
-
background-color: none !important;
|
|
86
|
-
/* stylelint-disable-next-line declaration-no-important */
|
|
87
|
-
background-image: none !important;
|
|
88
|
-
/* stylelint-disable-next-line declaration-no-important */
|
|
89
|
-
color: unset !important;
|
|
77
|
+
input:-webkit-autofill,
|
|
78
|
+
input:-webkit-autofill + label {
|
|
79
|
+
-webkit-text-fill-color: rgb(var(--text-color, var(--smoothly-default-contrast)));
|
|
90
80
|
}
|
|
@@ -1,12 +1,21 @@
|
|
|
1
|
-
import { Component, h, Prop } from "@stencil/core";
|
|
1
|
+
import { Component, h, Host, Prop } from "@stencil/core";
|
|
2
2
|
export class SmoothlySpinner {
|
|
3
|
+
constructor() {
|
|
4
|
+
this.size = "large";
|
|
5
|
+
}
|
|
3
6
|
render() {
|
|
4
|
-
|
|
7
|
+
const strokeWidth = this.size == "large" ? 6 : this.size == "medium" ? 8 : 12;
|
|
8
|
+
return (h(Host, { style: {
|
|
9
|
+
"--color": `var(--spinner-color)`,
|
|
10
|
+
"--size": this.size == "large" ? "5em" : this.size == "medium" ? "3em" : "1.2em",
|
|
11
|
+
} },
|
|
12
|
+
h("svg", { class: "spinner", viewBox: `0 0 ${60 + strokeWidth} ${60 + strokeWidth}`, xmlns: "http://www.w3.org/2000/svg" },
|
|
13
|
+
h("circle", { class: "path", fill: "none", "stroke-width": strokeWidth, "stroke-linecap": "round", cx: `${30 + strokeWidth / 2}`, cy: `${30 + strokeWidth / 2}`, r: "30" }))));
|
|
5
14
|
}
|
|
6
15
|
static get is() { return "smoothly-spinner"; }
|
|
7
16
|
static get encapsulation() { return "scoped"; }
|
|
8
17
|
static get originalStyleUrls() { return {
|
|
9
|
-
"$": ["style.
|
|
18
|
+
"$": ["style.scss"]
|
|
10
19
|
}; }
|
|
11
20
|
static get styleUrls() { return {
|
|
12
21
|
"$": ["style.css"]
|
|
@@ -28,6 +37,24 @@ export class SmoothlySpinner {
|
|
|
28
37
|
},
|
|
29
38
|
"attribute": "active",
|
|
30
39
|
"reflect": true
|
|
40
|
+
},
|
|
41
|
+
"size": {
|
|
42
|
+
"type": "string",
|
|
43
|
+
"mutable": false,
|
|
44
|
+
"complexType": {
|
|
45
|
+
"original": "\"small\" | \"medium\" | \"large\"",
|
|
46
|
+
"resolved": "\"large\" | \"medium\" | \"small\"",
|
|
47
|
+
"references": {}
|
|
48
|
+
},
|
|
49
|
+
"required": false,
|
|
50
|
+
"optional": false,
|
|
51
|
+
"docs": {
|
|
52
|
+
"tags": [],
|
|
53
|
+
"text": ""
|
|
54
|
+
},
|
|
55
|
+
"attribute": "size",
|
|
56
|
+
"reflect": true,
|
|
57
|
+
"defaultValue": "\"large\""
|
|
31
58
|
}
|
|
32
59
|
}; }
|
|
33
60
|
}
|
|
@@ -1,64 +1,52 @@
|
|
|
1
|
-
:host {
|
|
2
|
-
|
|
3
|
-
position: relative;
|
|
1
|
+
:host:not([active]) {
|
|
2
|
+
display: none;
|
|
4
3
|
}
|
|
4
|
+
|
|
5
5
|
:host[hidden] {
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
:host:not([active]) {
|
|
9
|
-
display: none;
|
|
6
|
+
display: none;
|
|
10
7
|
}
|
|
8
|
+
|
|
11
9
|
:host {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
:
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
:
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}
|
|
55
|
-
@keyframes load8 {
|
|
56
|
-
0% {
|
|
57
|
-
-webkit-transform: rotate(0deg);
|
|
58
|
-
transform: rotate(0deg);
|
|
59
|
-
}
|
|
60
|
-
100% {
|
|
61
|
-
-webkit-transform: rotate(360deg);
|
|
62
|
-
transform: rotate(360deg);
|
|
63
|
-
}
|
|
64
|
-
}
|
|
10
|
+
display: block;
|
|
11
|
+
stroke: rgb(var(--spinner-color, var(--smoothly-primary-tint)));
|
|
12
|
+
position: absolute;
|
|
13
|
+
inset: 0;
|
|
14
|
+
width: 100%;
|
|
15
|
+
height: 100%;
|
|
16
|
+
background-color: rgba(var(--background-color, var(--smoothly-default-color)), var(--background-opacity, var(--smoothly-semitransparent, 0.8)));
|
|
17
|
+
}
|
|
18
|
+
:host svg {
|
|
19
|
+
position: absolute;
|
|
20
|
+
left: calc(50% - var(--size) / 2);
|
|
21
|
+
top: calc(50% - var(--size) / 2);
|
|
22
|
+
width: var(--size);
|
|
23
|
+
animation: SPIN-SVG 1.4s linear infinite;
|
|
24
|
+
}
|
|
25
|
+
:host svg circle {
|
|
26
|
+
transform-origin: center;
|
|
27
|
+
animation: SPIN-CIRCLE 1.4s ease-in-out infinite;
|
|
28
|
+
stroke-dasharray: 187;
|
|
29
|
+
stroke-dashoffset: 0;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@keyframes SPIN-SVG {
|
|
33
|
+
0% {
|
|
34
|
+
transform: rotate(0deg);
|
|
35
|
+
}
|
|
36
|
+
100% {
|
|
37
|
+
transform: rotate(270deg);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
@keyframes SPIN-CIRCLE {
|
|
41
|
+
0% {
|
|
42
|
+
stroke-dashoffset: 187;
|
|
43
|
+
}
|
|
44
|
+
50% {
|
|
45
|
+
stroke-dashoffset: 46.75;
|
|
46
|
+
transform: rotate(135deg);
|
|
47
|
+
}
|
|
48
|
+
100% {
|
|
49
|
+
stroke-dashoffset: 187;
|
|
50
|
+
transform: rotate(450deg);
|
|
51
|
+
}
|
|
52
|
+
}
|