smoothly 0.1.92 → 0.1.96
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/{index-bc3845e8.js → index-d66869d7.js} +7 -5
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{smoothly-accordion_47.cjs.entry.js → smoothly-accordion_48.cjs.entry.js} +53 -13
- package/dist/cjs/smoothly-backtotop.cjs.entry.js +37 -0
- package/dist/cjs/smoothly-display.cjs.entry.js +1 -1
- package/dist/cjs/smoothly-input-demo.cjs.entry.js +4 -1
- package/dist/cjs/smoothly-input.cjs.entry.js +6 -2
- package/dist/cjs/smoothly.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/backtotop/index.js +94 -0
- package/dist/collection/components/backtotop/style.css +19 -0
- package/dist/collection/components/input/index.js +6 -0
- package/dist/collection/components/input-demo/index.js +45 -42
- package/dist/custom-elements/index.d.ts +6 -0
- package/dist/custom-elements/index.js +56 -14
- package/dist/{smoothly/index-37a67c97.js → esm/index-401c6ce3.js} +7 -5
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{smoothly-accordion_47.entry.js → smoothly-accordion_48.entry.js} +53 -14
- package/dist/esm/smoothly-backtotop.entry.js +33 -0
- package/dist/esm/smoothly-display.entry.js +1 -1
- package/dist/esm/smoothly-input-demo.entry.js +4 -1
- package/dist/esm/smoothly-input.entry.js +6 -2
- package/dist/esm/smoothly.js +1 -1
- package/dist/{esm/index-37a67c97.js → smoothly/index-401c6ce3.js} +7 -5
- package/dist/smoothly/p-c7500dad.entry.js +1 -0
- package/dist/smoothly/smoothly-backtotop.entry.js +33 -0
- package/dist/smoothly/smoothly-display.entry.js +1 -1
- package/dist/smoothly/smoothly-input-demo.entry.js +4 -1
- package/dist/smoothly/smoothly-input.entry.js +6 -2
- package/dist/smoothly/smoothly.esm.js +1 -1
- package/dist/types/components/backtotop/index.d.ts +8 -0
- package/dist/types/components/input/index.d.ts +1 -0
- package/dist/types/components/input-demo/index.d.ts +1 -1
- package/dist/types/components.d.ts +19 -0
- package/package.json +2 -2
- package/dist/smoothly/p-ad2b5e6e.entry.js +0 -1
|
@@ -3,7 +3,7 @@ import { A as App, N as Notice } from './Notice-d87d90f7.js';
|
|
|
3
3
|
import { T as Trigger, M as Message } from './Trigger-d7b181ec.js';
|
|
4
4
|
import './GoogleFont-8474516b.js';
|
|
5
5
|
|
|
6
|
-
const styleCss$
|
|
6
|
+
const styleCss$E = "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}";
|
|
7
7
|
|
|
8
8
|
let SmoothlyAccordion = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -49,9 +49,9 @@ let SmoothlyAccordion = class {
|
|
|
49
49
|
"value": ["valueChanged"]
|
|
50
50
|
}; }
|
|
51
51
|
};
|
|
52
|
-
SmoothlyAccordion.style = styleCss$
|
|
52
|
+
SmoothlyAccordion.style = styleCss$E;
|
|
53
53
|
|
|
54
|
-
const styleCss$
|
|
54
|
+
const styleCss$D = ".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))}";
|
|
55
55
|
|
|
56
56
|
let SmoothlyAccordionItem = class {
|
|
57
57
|
constructor(hostRef) {
|
|
@@ -96,9 +96,9 @@ let SmoothlyAccordionItem = class {
|
|
|
96
96
|
"open": ["openChanged"]
|
|
97
97
|
}; }
|
|
98
98
|
};
|
|
99
|
-
SmoothlyAccordionItem.style = styleCss$
|
|
99
|
+
SmoothlyAccordionItem.style = styleCss$D;
|
|
100
100
|
|
|
101
|
-
const styleCss$
|
|
101
|
+
const styleCss$C = "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-shade);--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:1.6cm;background-color:rgb(var(--smoothly-app-background));color:rgb(var(--smoothly-app-color));fill:rgb(var(--smoothly-app-color));stroke:rgb(var(--smoothly-app-color));display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 5px 0 rgba(var(--smoothly-app-shadow))}smoothly-app>smoothly-notifier>header a{color:inherit;text-decoration:inherit}smoothly-app>smoothly-notifier>header>nav{flex-shrink:0}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:inline-block;height:100%;margin:0}smoothly-app>smoothly-notifier>header>h1 a{overflow:hidden;user-select:none}smoothly-app>smoothly-notifier>header>nav>ul>li a{line-height:1.6cm}smoothly-app>smoothly-notifier>header>h1 a,smoothly-app>smoothly-notifier>header>nav>ul>li a{display:inline-block;height:100%;padding:0 0.4cm;text-decoration:none;font-weight:bold}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{position:relative;top:0.2cm}smoothly-app>smoothly-notifier>header>nav>ul>li>a:hover>smoothly-icon,smoothly-app>smoothly-notifier>header>nav>ul>li>a.active>smoothly-icon,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{background-color:rgb(var(--smoothly-app-hover-background));color:rgb(var(--smoothly-app-hover-color));stroke:rgb(var(--smoothly-app-hover-color));fill:rgb(var(--smoothly-app-hover-color))}smoothly-app>smoothly-notifier>content{position:relative;top:1.6cm}";
|
|
102
102
|
|
|
103
103
|
let SmoothlyApp = class {
|
|
104
104
|
constructor(hostRef) {
|
|
@@ -108,7 +108,7 @@ let SmoothlyApp = class {
|
|
|
108
108
|
return (h("smoothly-notifier", null, h("slot", null)));
|
|
109
109
|
}
|
|
110
110
|
};
|
|
111
|
-
SmoothlyApp.style = styleCss$
|
|
111
|
+
SmoothlyApp.style = styleCss$C;
|
|
112
112
|
|
|
113
113
|
let SmoothlyAppDemo = class {
|
|
114
114
|
constructor(hostRef) {
|
|
@@ -131,6 +131,36 @@ let SmoothlyAppDemo = class {
|
|
|
131
131
|
}
|
|
132
132
|
};
|
|
133
133
|
|
|
134
|
+
const styleCss$B = ".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}";
|
|
135
|
+
|
|
136
|
+
let SmoothlyBacktotop = class {
|
|
137
|
+
constructor(hostRef) {
|
|
138
|
+
registerInstance(this, hostRef);
|
|
139
|
+
this.opacity = "0.5";
|
|
140
|
+
this.bottom = "1rem";
|
|
141
|
+
this.right = "1rem";
|
|
142
|
+
}
|
|
143
|
+
componentWillLoad() {
|
|
144
|
+
window.addEventListener("scroll", () => {
|
|
145
|
+
this.visible = document.body.scrollTop > 20 || document.documentElement.scrollTop > 20;
|
|
146
|
+
});
|
|
147
|
+
}
|
|
148
|
+
render() {
|
|
149
|
+
const cssVariables = {
|
|
150
|
+
"--opacity": this.visible ? this.opacity : "0",
|
|
151
|
+
"--pointer-events": this.visible ? "auto" : "none",
|
|
152
|
+
"--bottom": this.bottom,
|
|
153
|
+
"--right": this.right,
|
|
154
|
+
};
|
|
155
|
+
return (h(Host, { style: cssVariables, onClick: () => window.scrollTo({
|
|
156
|
+
top: 0,
|
|
157
|
+
left: 0,
|
|
158
|
+
behavior: "smooth",
|
|
159
|
+
}) }, h("smoothly-icon", { name: "chevron-up-outline" })));
|
|
160
|
+
}
|
|
161
|
+
};
|
|
162
|
+
SmoothlyBacktotop.style = styleCss$B;
|
|
163
|
+
|
|
134
164
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
135
165
|
|
|
136
166
|
function createCommonjsModule(fn, basedir, module) {
|
|
@@ -37573,6 +37603,8 @@ exports.Action = void 0;
|
|
|
37573
37603
|
function apply(formatter, state, action) {
|
|
37574
37604
|
var _a, _b;
|
|
37575
37605
|
let result = State_1.State.copy(formatter.unformat(StateEditor_1.StateEditor.copy(state)));
|
|
37606
|
+
if (state.autocomplete == "cc-exp" && /^\d\d \/$/g.test(state.value))
|
|
37607
|
+
(action === null || action === void 0 ? void 0 : action.key) && (action.key = "Backspace");
|
|
37576
37608
|
if (action) {
|
|
37577
37609
|
if (action.ctrlKey || action.metaKey) {
|
|
37578
37610
|
if (action.key == "a")
|
|
@@ -37698,7 +37730,7 @@ class Handler {
|
|
|
37698
37730
|
return typeof value == "string" ? value : undefined;
|
|
37699
37731
|
}
|
|
37700
37732
|
format(unformated) {
|
|
37701
|
-
return Object.assign(Object.assign({}, unformated), { type: "
|
|
37733
|
+
return Object.assign(Object.assign({}, unformated), { type: "tel", autocomplete: "cc-csc", length: [3, 3], pattern: /^\d{3}$/ });
|
|
37702
37734
|
}
|
|
37703
37735
|
unformat(formated) {
|
|
37704
37736
|
return formated;
|
|
@@ -37731,7 +37763,7 @@ class Handler {
|
|
|
37731
37763
|
result = result.prepend("0");
|
|
37732
37764
|
if (result.value.length > 1)
|
|
37733
37765
|
result = result.insert(2, " / ");
|
|
37734
|
-
return Object.assign(Object.assign({}, result), { type: "
|
|
37766
|
+
return Object.assign(Object.assign({}, result), { type: "tel", autocomplete: "cc-exp", length: [7, 7], pattern: /^(0[1-9]|1[012]) \/ \d\d$/ });
|
|
37735
37767
|
}
|
|
37736
37768
|
unformat(formated) {
|
|
37737
37769
|
return formated.delete(" / ");
|
|
@@ -37756,8 +37788,8 @@ class Handler {
|
|
|
37756
37788
|
}
|
|
37757
37789
|
format(unformated) {
|
|
37758
37790
|
const issuer = getIssuer(unformated.value);
|
|
37759
|
-
const result = unformated.map((symbol, index) =>
|
|
37760
|
-
return Object.assign(Object.assign({}, result), { type: "
|
|
37791
|
+
const result = unformated.map((symbol, index) => (index != 0 && index % 4 == 0 && index + 1 < issuer.length[0] ? " " : "") + symbol);
|
|
37792
|
+
return Object.assign(Object.assign({}, result), { type: "tel", autocomplete: "cc-number", length: issuer.length.slice(1), pattern: issuer.verification, classes: ["issuer-" + issuer.icon] });
|
|
37761
37793
|
}
|
|
37762
37794
|
unformat(formated) {
|
|
37763
37795
|
return formated.delete(" ");
|
|
@@ -38838,7 +38870,7 @@ class Handler {
|
|
|
38838
38870
|
}
|
|
38839
38871
|
fromString(value) {
|
|
38840
38872
|
const result = typeof value == "string" ? Number.parseFloat(value) : undefined;
|
|
38841
|
-
return result && !isNaN(result) ? result : undefined;
|
|
38873
|
+
return result != undefined && !isNaN(result) ? result : undefined;
|
|
38842
38874
|
}
|
|
38843
38875
|
format(unformated) {
|
|
38844
38876
|
var _a;
|
|
@@ -39675,6 +39707,9 @@ let SmoothlyInput = class {
|
|
|
39675
39707
|
if (value != before)
|
|
39676
39708
|
this.smoothlyChanged.emit({ name: this.name, value });
|
|
39677
39709
|
}
|
|
39710
|
+
onCurrency() {
|
|
39711
|
+
this.state = Object.assign(Object.assign({}, this.state), { value: this.newState({ value: this.formatter.toString(this.value), selection: this.state.selection }).value, pattern: this.newState({ value: this.formatter.toString(this.value), selection: this.state.selection }).pattern });
|
|
39712
|
+
}
|
|
39678
39713
|
componentWillLoad() {
|
|
39679
39714
|
const value = this.formatter.toString(this.value) || "";
|
|
39680
39715
|
const start = value.length;
|
|
@@ -39815,7 +39850,8 @@ let SmoothlyInput = class {
|
|
|
39815
39850
|
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) != "" } }, 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) }), h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }), h("label", { htmlFor: this.name }, h("slot", null))));
|
|
39816
39851
|
}
|
|
39817
39852
|
static get watchers() { return {
|
|
39818
|
-
"value": ["valueWatcher"]
|
|
39853
|
+
"value": ["valueWatcher"],
|
|
39854
|
+
"currency": ["onCurrency"]
|
|
39819
39855
|
}; }
|
|
39820
39856
|
};
|
|
39821
39857
|
function getLocale() {
|
|
@@ -39900,7 +39936,10 @@ let SmoothlyInputDemo = class {
|
|
|
39900
39936
|
registerInstance(this, hostRef);
|
|
39901
39937
|
}
|
|
39902
39938
|
render() {
|
|
39903
|
-
return
|
|
39939
|
+
return [
|
|
39940
|
+
h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Address")), h("main", null, h("smoothly-input", { type: "text", name: "name" }, "Name"), h("smoothly-input", { type: "date", name: "date" }, "Date"), h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), h("smoothly-radio", { name: "option", value: "1" }, "option 1"), h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), h("smoothly-radio", { name: "option", value: "3" }, "option 3"), h("smoothly-accordion", null, h("smoothly-accordion-item", { name: "A", open: true }, h("smoothly-radio", { name: "a", value: "1" }, "a 1"), h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), h("smoothly-radio", { name: "a", value: "3" }, "a 3")), h("smoothly-accordion-item", { name: "B" }, h("smoothly-radio", { name: "b", value: "1" }, "b 1"), h("smoothly-radio", { name: "b", value: "2" }, "b 2"), h("smoothly-radio", { name: "b", value: "3" }, "b 3"))), h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" }), h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true }), h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }), h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), h("smoothly-input-date", null, "Date")), h("footer", null, h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
|
|
39941
|
+
h("smoothly-backtotop", null),
|
|
39942
|
+
];
|
|
39904
39943
|
}
|
|
39905
39944
|
};
|
|
39906
39945
|
|
|
@@ -40944,4 +40983,4 @@ let Urlencoded = class {
|
|
|
40944
40983
|
}
|
|
40945
40984
|
};
|
|
40946
40985
|
|
|
40947
|
-
export { SmoothlyAccordion as smoothly_accordion, SmoothlyAccordionItem as smoothly_accordion_item, SmoothlyApp as smoothly_app, SmoothlyAppDemo as smoothly_app_demo, Calendar as smoothly_calendar, SmoothlyCheckbox as smoothly_checkbox, SmoothlyDialog as smoothly_dialog, SmoothlyDialogDemo as smoothly_dialog_demo, SmoothlyDisplay as smoothly_display, SmoothlyDisplayAmount as smoothly_display_amount, SmoothlyDisplayDateTime as smoothly_display_date_time, SmoothlyDisplayDemo as smoothly_display_demo, SmoothlyFrame as smoothly_frame, SmoothlyIcon as smoothly_icon, SmoothlyIconDemo as smoothly_icon_demo, SmoothlyInput as smoothly_input, InputDate as smoothly_input_date, InputDateRange as smoothly_input_date_range, SmoothlyInputDemo as smoothly_input_demo, MonthSelector as smoothly_input_month, Item as smoothly_item, SmoothlyMenuOptions as smoothly_menu_options, Notification as smoothly_notification, Notifier as smoothly_notifier, SmoothlyOption as smoothly_option, SmoothlyPicker as smoothly_picker, SmoothlyPopup as smoothly_popup, SmoothlyQuiet as smoothly_quiet, SmoothlyRadio as smoothly_radio, SmoothlyRoom as smoothly_room, SmoothlySelect as smoothly_select, SmoothlySelectDemo as smoothly_select_demo, Selector as smoothly_selector, SmoothlySpinner as smoothly_spinner, SmoothlySubmit as smoothly_submit, SmoothlyTab as smoothly_tab, SmoothlyTabSwitch as smoothly_tab_switch, Table as smoothly_table, TableCell as smoothly_table_cell, TableDemo as smoothly_table_demo, TableExpandableCell as smoothly_table_expandable_cell, TableExpandableRow as smoothly_table_expandable_row, TableHeader as smoothly_table_header, TableRow as smoothly_table_row, SmoothlyTrigger as smoothly_trigger, SmoothlyTuple as smoothly_tuple, Urlencoded as smoothly_urlencoded };
|
|
40986
|
+
export { SmoothlyAccordion as smoothly_accordion, SmoothlyAccordionItem as smoothly_accordion_item, SmoothlyApp as smoothly_app, SmoothlyAppDemo as smoothly_app_demo, SmoothlyBacktotop as smoothly_backtotop, Calendar as smoothly_calendar, SmoothlyCheckbox as smoothly_checkbox, SmoothlyDialog as smoothly_dialog, SmoothlyDialogDemo as smoothly_dialog_demo, SmoothlyDisplay as smoothly_display, SmoothlyDisplayAmount as smoothly_display_amount, SmoothlyDisplayDateTime as smoothly_display_date_time, SmoothlyDisplayDemo as smoothly_display_demo, SmoothlyFrame as smoothly_frame, SmoothlyIcon as smoothly_icon, SmoothlyIconDemo as smoothly_icon_demo, SmoothlyInput as smoothly_input, InputDate as smoothly_input_date, InputDateRange as smoothly_input_date_range, SmoothlyInputDemo as smoothly_input_demo, MonthSelector as smoothly_input_month, Item as smoothly_item, SmoothlyMenuOptions as smoothly_menu_options, Notification as smoothly_notification, Notifier as smoothly_notifier, SmoothlyOption as smoothly_option, SmoothlyPicker as smoothly_picker, SmoothlyPopup as smoothly_popup, SmoothlyQuiet as smoothly_quiet, SmoothlyRadio as smoothly_radio, SmoothlyRoom as smoothly_room, SmoothlySelect as smoothly_select, SmoothlySelectDemo as smoothly_select_demo, Selector as smoothly_selector, SmoothlySpinner as smoothly_spinner, SmoothlySubmit as smoothly_submit, SmoothlyTab as smoothly_tab, SmoothlyTabSwitch as smoothly_tab_switch, Table as smoothly_table, TableCell as smoothly_table_cell, TableDemo as smoothly_table_demo, TableExpandableCell as smoothly_table_expandable_cell, TableExpandableRow as smoothly_table_expandable_row, TableHeader as smoothly_table_header, TableRow as smoothly_table_row, SmoothlyTrigger as smoothly_trigger, SmoothlyTuple as smoothly_tuple, Urlencoded as smoothly_urlencoded };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { r as registerInstance, h, k as Host } from './index-02a70ac1.js';
|
|
2
|
+
|
|
3
|
+
const styleCss = ".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}";
|
|
4
|
+
|
|
5
|
+
let SmoothlyBacktotop = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
this.opacity = "0.5";
|
|
9
|
+
this.bottom = "1rem";
|
|
10
|
+
this.right = "1rem";
|
|
11
|
+
}
|
|
12
|
+
componentWillLoad() {
|
|
13
|
+
window.addEventListener("scroll", () => {
|
|
14
|
+
this.visible = document.body.scrollTop > 20 || document.documentElement.scrollTop > 20;
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
render() {
|
|
18
|
+
const cssVariables = {
|
|
19
|
+
"--opacity": this.visible ? this.opacity : "0",
|
|
20
|
+
"--pointer-events": this.visible ? "auto" : "none",
|
|
21
|
+
"--bottom": this.bottom,
|
|
22
|
+
"--right": this.right,
|
|
23
|
+
};
|
|
24
|
+
return (h(Host, { style: cssVariables, onClick: () => window.scrollTo({
|
|
25
|
+
top: 0,
|
|
26
|
+
left: 0,
|
|
27
|
+
behavior: "smooth",
|
|
28
|
+
}) }, h("smoothly-icon", { name: "chevron-up-outline" })));
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
SmoothlyBacktotop.style = styleCss;
|
|
32
|
+
|
|
33
|
+
export { SmoothlyBacktotop as smoothly_backtotop };
|
|
@@ -5,7 +5,10 @@ let SmoothlyInputDemo = class {
|
|
|
5
5
|
registerInstance(this, hostRef);
|
|
6
6
|
}
|
|
7
7
|
render() {
|
|
8
|
-
return
|
|
8
|
+
return [
|
|
9
|
+
h("form", { action: "done", style: { position: "relative" } }, h("header", null, h("h5", null, "Address")), h("main", null, h("smoothly-input", { type: "text", name: "name" }, "Name"), h("smoothly-input", { type: "date", name: "date" }, "Date"), h("smoothly-input", { type: "date-time", name: "date-time" }, "Date-Time"), h("smoothly-input", { type: "divisor", name: "divisor" }, "Divisor"), h("smoothly-input", { type: "text", name: "street", value: "street" }, "Street"), h("smoothly-input", { type: "card-number", name: "card" }, "Card #"), h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"), h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"), h("smoothly-radio", { name: "option", value: "1" }, "option 1"), h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"), h("smoothly-radio", { name: "option", value: "3" }, "option 3"), h("smoothly-accordion", null, h("smoothly-accordion-item", { name: "A", open: true }, h("smoothly-radio", { name: "a", value: "1" }, "a 1"), h("smoothly-radio", { name: "a", value: "2", checked: true }, "a 2"), h("smoothly-radio", { name: "a", value: "3" }, "a 3")), h("smoothly-accordion-item", { name: "B" }, h("smoothly-radio", { name: "b", value: "1" }, "b 1"), h("smoothly-radio", { name: "b", value: "2" }, "b 2"), h("smoothly-radio", { name: "b", value: "3" }, "b 3"))), h("smoothly-display-amount", { currency: "SEK", amount: "1289.5" }), h("smoothly-display-date-time", { datetime: "2019-01-31T20:01:34" }), h("smoothly-checkbox", null), h("smoothly-checkbox", { disabled: true }), h("smoothly-address-display", { value: '{ "countryCode": "SE", "street": "Korkstigen 2", "zipCode": "654 31", "city": "Fejksala" }' }), h("smoothly-address", { editable: false, value: '{ "countryCode": "SE", "street": "Stigv\u00E4gen 34", "zipCode": "123 45", "city": "Hobbiton" }' }), h("smoothly-addresses", { allowed: "billing delivery visit", editable: true, value: '{ "billing": { "countryCode": "SE", "street": "Rundslingan 3", "zipCode": "987 65", "city": "Klotby" }, "visit": { "countryCode": "SE", "street": "G\u00E5ngbanan 34", "zipCode": "543 21", "city": "Trasktr\u00E4sk" } }' }), h("smoothly-input", { type: "postal-code", name: "zip", style: { width: "calc(60% - 2px)" } }, "ZipCode"), h("smoothly-input", { type: "text", name: "testing" }, "Texttest"), h("smoothly-input", { type: "password", name: "password" }, "Password"), h("smoothly-input", { type: "email", name: "email" }, "Email"), h("smoothly-input", { type: "price", currency: "SEK", name: "price" }, "Price"), h("smoothly-input", { type: "percent", name: "percent" }, "Percent"), h("smoothly-input", { type: "phone", name: "phone" }, "Phone"), h("smoothly-input-date", null, "Date")), h("footer", null, h("smoothly-submit", { expand: "block", onSubmit: (e) => alert(e), color: "success" }, "Submit"), h("smoothly-trigger", { expand: "block", color: "success", onClick: (e) => console.log(e.detail) }, "Trigger"))),
|
|
10
|
+
h("smoothly-backtotop", null),
|
|
11
|
+
];
|
|
9
12
|
}
|
|
10
13
|
};
|
|
11
14
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, i as createEvent, h, k as Host } from './index-02a70ac1.js';
|
|
2
2
|
import { d as dist$1 } from './index-a5a08f46.js';
|
|
3
|
-
import { d as dist } from './index-
|
|
3
|
+
import { d as dist } from './index-401c6ce3.js';
|
|
4
4
|
import './_commonjsHelpers-8fe71198.js';
|
|
5
5
|
|
|
6
6
|
const styleCss = ".sc-smoothly-input-h{display:block;position:relative;font-weight:var(--smoothly-font-weight)}[hidden].sc-smoothly-input-h{display:none}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--smoothly-text-tint));opacity:0.8;user-select:none;cursor:inherit;transition:font-size 0.1s;transition-timing-function:ease}input.sc-smoothly-input{padding:1em 0.2em 0.2em 0.2em;width:calc(100% - 0.4em);background:none;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family)}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+smoothly-icon.sc-smoothly-input{display:block}.has-value.sc-smoothly-input-h>label.sc-smoothly-input{top:0.3em;top:0.4em;font-size:60%;z-index:0}.sc-smoothly-input-h:focus-within>label.sc-smoothly-input{top:0.3em;top:0.4em;font-size:60%;z-index:0}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 30px unset inset !important;-webkit-box-shadow:0 0 0 30px unset inset !important}input.sc-smoothly-input:-webkit-autofill{-webkit-text-fill-color:unset !important}input.sc-smoothly-input:-internal-autofill-previewed,input.sc-smoothly-input:-internal-autofill-selected,textarea.sc-smoothly-input:-internal-autofill-previewed,textarea.sc-smoothly-input:-internal-autofill-selected,select.sc-smoothly-input:-internal-autofill-previewed,select.sc-smoothly-input:-internal-autofill-selected{background-color:none !important;background-image:none !important;color:unset !important}";
|
|
@@ -41,6 +41,9 @@ let SmoothlyInput = class {
|
|
|
41
41
|
if (value != before)
|
|
42
42
|
this.smoothlyChanged.emit({ name: this.name, value });
|
|
43
43
|
}
|
|
44
|
+
onCurrency() {
|
|
45
|
+
this.state = Object.assign(Object.assign({}, this.state), { value: this.newState({ value: this.formatter.toString(this.value), selection: this.state.selection }).value, pattern: this.newState({ value: this.formatter.toString(this.value), selection: this.state.selection }).pattern });
|
|
46
|
+
}
|
|
44
47
|
componentWillLoad() {
|
|
45
48
|
const value = this.formatter.toString(this.value) || "";
|
|
46
49
|
const start = value.length;
|
|
@@ -181,7 +184,8 @@ let SmoothlyInput = class {
|
|
|
181
184
|
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) != "" } }, 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) }), h("smoothly-icon", { name: "alert-circle", color: "danger", fill: "clear", size: "small" }), h("label", { htmlFor: this.name }, h("slot", null))));
|
|
182
185
|
}
|
|
183
186
|
static get watchers() { return {
|
|
184
|
-
"value": ["valueWatcher"]
|
|
187
|
+
"value": ["valueWatcher"],
|
|
188
|
+
"currency": ["onCurrency"]
|
|
185
189
|
}; }
|
|
186
190
|
};
|
|
187
191
|
function getLocale() {
|
package/dist/esm/smoothly.js
CHANGED
|
@@ -121,5 +121,5 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
|
|
|
121
121
|
|
|
122
122
|
patchBrowser().then(options => {
|
|
123
123
|
globalScripts();
|
|
124
|
-
return bootstrapLazy([["smoothly-app-demo",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}]]],["smoothly-google-font",[[2,"smoothly-google-font",{"value":[1]}]]],["smoothly-radio-group",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder",[[0,"smoothly-reorder"]]],["smoothly-trigger-sink",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-input-demo",[[0,"smoothly-input-demo"]]],["smoothly-select-demo",[[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]]]],["smoothly-table-demo",[[2,"smoothly-table-demo"]]],["smoothly-display-demo",[[0,"smoothly-display-demo"]]],["smoothly-
|
|
124
|
+
return bootstrapLazy([["smoothly-app-demo",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}]]],["smoothly-google-font",[[2,"smoothly-google-font",{"value":[1]}]]],["smoothly-radio-group",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder",[[0,"smoothly-reorder"]]],["smoothly-trigger-sink",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-input-demo",[[0,"smoothly-input-demo"]]],["smoothly-select-demo",[[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]]]],["smoothly-table-demo",[[2,"smoothly-table-demo"]]],["smoothly-display-demo",[[0,"smoothly-display-demo"]]],["smoothly-app",[[4,"smoothly-app",{"color":[1]}]]],["smoothly-dialog-demo",[[0,"smoothly-dialog-demo"]]],["smoothly-icon-demo",[[2,"smoothly-icon-demo"]]],["smoothly-room",[[4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}]]],["smoothly-input-date-range",[[2,"smoothly-input-date-range",{"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"open":[1028]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"],[0,"dateRangeSet","onDateRangeSet"]]]]],["smoothly-notifier",[[6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]]]],["smoothly-picker",[[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",[[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]]]],["smoothly-backtotop",[[2,"smoothly-backtotop",{"opacity":[1],"bottom":[1],"right":[1],"visible":[32]}]]],["smoothly-checkbox",[[2,"smoothly-checkbox",{"selectAll":[4,"select-all"],"selected":[1540],"disabled":[1540],"t":[32]}]]],["smoothly-submit",[[6,"smoothly-submit",{"processing":[1540],"color":[513],"expand":[513],"fill":[513],"disabled":[516],"prevent":[4],"submit":[64]},[[0,"click","handleSubmit"]]]]],["smoothly-urlencoded",[[0,"smoothly-urlencoded",{"data":[1]}]]],["smoothly-accordion",[[6,"smoothly-accordion",{"value":[1025]},[[0,"smoothlyOpen","handleOpenClose"],[0,"smoothlyClose","handleOpenClose"],[0,"smoothlyAccordionItemDidLoad","onAccordionItemDidLoad"],[0,"smoothlyAccordionItemDidUnload","onAccordionItemDidUnload"]]]]],["smoothly-accordion-item",[[6,"smoothly-accordion-item",{"name":[1],"brand":[1],"open":[1540]}]]],["smoothly-display-amount",[[2,"smoothly-display-amount",{"amount":[8],"currency":[1]}]]],["smoothly-frame",[[2,"smoothly-frame",{"url":[1],"name":[1],"origin":[1],"send":[64]}]]],["smoothly-popup",[[6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}]]],["smoothly-quiet",[[6,"smoothly-quiet",{"color":[1]}]]],["smoothly-radio",[[6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tabIndex":[2,"tab-index"]}]]],["smoothly-select",[[6,"smoothly-select",{"identifier":[1],"background":[513],"value":[1025]}]]],["smoothly-tab",[[6,"smoothly-tab",{"label":[1],"open":[1540]},[[0,"click","onClick"]]]]],["smoothly-tab-switch",[[6,"smoothly-tab-switch",{"selectedElement":[32]},[[0,"expansionOpen","openChanged"]]]]],["smoothly-table",[[6,"smoothly-table",null,[[0,"sort","onSort"]]]]],["smoothly-table-cell",[[6,"smoothly-table-cell"]]],["smoothly-table-expandable-cell",[[6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540],"beginOpen":[32]},[[0,"click","onClick"]]]]],["smoothly-table-expandable-row",[[6,"smoothly-table-expandable-row",null,[[0,"expansionLoaded","onExpansionLoaded"],[0,"expansionOpen","onDetailsLoaded"]]]]],["smoothly-table-header",[[6,"smoothly-table-header",{"name":[1],"sortDirection":[1025,"sort-direction"]},[[0,"click","onClick"]]]]],["smoothly-table-row",[[6,"smoothly-table-row",{"align":[1],"open":[1540],"beginOpen":[32]},[[0,"click","onClick"]]]]],["smoothly-icon",[[2,"smoothly-icon",{"color":[513],"fill":[513],"name":[1],"size":[513],"toolTip":[1,"tool-tip"],"document":[32]}]]],["smoothly-selector",[[6,"smoothly-selector",{"opened":[32],"selectedElement":[32],"missing":[32],"filter":[32]},[[0,"click","onClick"],[0,"itemSelected","onItemSelected"],[0,"keydown","onKeyDown"]]]]],["smoothly-input-date",[[6,"smoothly-input-date",{"value":[1025],"open":[1028],"max":[1025],"min":[1025]},[[0,"dateSet","dateSetHandler"]]]]],["smoothly-notification",[[2,"smoothly-notification",{"notice":[16],"tick":[32]},[[0,"trigger","onTrigger"]]]]],["smoothly-option",[[1,"smoothly-option",{"aliases":[513],"dataHighlight":[1540,"data-highlight"],"name":[1537],"value":[1537]}]]],["smoothly-menu-options",[[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",[[2,"smoothly-display",{"type":[1],"value":[8],"currency":[1],"country":[1]}]]],["smoothly-display-date-time",[[2,"smoothly-display-date-time",{"datetime":[1]}]]],["smoothly-spinner",[[2,"smoothly-spinner",{"active":[516]}]]],["smoothly-tuple",[[0,"smoothly-tuple",{"tuple":[16]}]]],["smoothly-item",[[6,"smoothly-item",{"value":[8],"selected":[1540],"filter":[64]},[[0,"click","onClick"]]]]],["smoothly-calendar",[[2,"smoothly-calendar",{"month":[1025],"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"doubleInput":[516,"double-input"],"firstSelected":[32]}]]],["smoothly-input",[[6,"smoothly-input",{"name":[513],"value":[1032],"type":[513],"required":[1540],"minLength":[1026,"min-length"],"maxLength":[1026,"max-length"],"autocomplete":[1028],"pattern":[1040],"placeholder":[1025],"disabled":[1028],"currency":[513],"getFormData":[64],"setKeepFocusOnReRender":[64],"setSelectionRange":[64]}]]],["smoothly-input-month",[[2,"smoothly-input-month",{"value":[1025]}]]],["smoothly-trigger",[[6,"smoothly-trigger",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"name":[1],"value":[8]},[[0,"click","onClick"]]]]]], options);
|
|
125
125
|
});
|
|
@@ -210,6 +210,8 @@ var Action;
|
|
|
210
210
|
function apply(formatter, state, action) {
|
|
211
211
|
var _a, _b;
|
|
212
212
|
let result = State_1.State.copy(formatter.unformat(StateEditor_1.StateEditor.copy(state)));
|
|
213
|
+
if (state.autocomplete == "cc-exp" && /^\d\d \/$/g.test(state.value))
|
|
214
|
+
(action === null || action === void 0 ? void 0 : action.key) && (action.key = "Backspace");
|
|
213
215
|
if (action) {
|
|
214
216
|
if (action.ctrlKey || action.metaKey) {
|
|
215
217
|
if (action.key == "a")
|
|
@@ -341,7 +343,7 @@ class Handler {
|
|
|
341
343
|
return typeof value == "string" ? value : undefined;
|
|
342
344
|
}
|
|
343
345
|
format(unformated) {
|
|
344
|
-
return Object.assign(Object.assign({}, unformated), { type: "
|
|
346
|
+
return Object.assign(Object.assign({}, unformated), { type: "tel", autocomplete: "cc-csc", length: [3, 3], pattern: /^\d{3}$/ });
|
|
345
347
|
}
|
|
346
348
|
unformat(formated) {
|
|
347
349
|
return formated;
|
|
@@ -377,7 +379,7 @@ class Handler {
|
|
|
377
379
|
result = result.prepend("0");
|
|
378
380
|
if (result.value.length > 1)
|
|
379
381
|
result = result.insert(2, " / ");
|
|
380
|
-
return Object.assign(Object.assign({}, result), { type: "
|
|
382
|
+
return Object.assign(Object.assign({}, result), { type: "tel", autocomplete: "cc-exp", length: [7, 7], pattern: /^(0[1-9]|1[012]) \/ \d\d$/ });
|
|
381
383
|
}
|
|
382
384
|
unformat(formated) {
|
|
383
385
|
return formated.delete(" / ");
|
|
@@ -405,8 +407,8 @@ class Handler {
|
|
|
405
407
|
}
|
|
406
408
|
format(unformated) {
|
|
407
409
|
const issuer = getIssuer(unformated.value);
|
|
408
|
-
const result = unformated.map((symbol, index) =>
|
|
409
|
-
return Object.assign(Object.assign({}, result), { type: "
|
|
410
|
+
const result = unformated.map((symbol, index) => (index != 0 && index % 4 == 0 && index + 1 < issuer.length[0] ? " " : "") + symbol);
|
|
411
|
+
return Object.assign(Object.assign({}, result), { type: "tel", autocomplete: "cc-number", length: issuer.length.slice(1), pattern: issuer.verification, classes: ["issuer-" + issuer.icon] });
|
|
410
412
|
}
|
|
411
413
|
unformat(formated) {
|
|
412
414
|
return formated.delete(" ");
|
|
@@ -1535,7 +1537,7 @@ class Handler {
|
|
|
1535
1537
|
}
|
|
1536
1538
|
fromString(value) {
|
|
1537
1539
|
const result = typeof value == "string" ? Number.parseFloat(value) : undefined;
|
|
1538
|
-
return result && !isNaN(result) ? result : undefined;
|
|
1540
|
+
return result != undefined && !isNaN(result) ? result : undefined;
|
|
1539
1541
|
}
|
|
1540
1542
|
format(unformated) {
|
|
1541
1543
|
var _a;
|