@getflip/swirl-components 0.397.0 → 0.397.1
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/components.json +1 -1
- package/dist/cjs/swirl-time-input.cjs.entry.js +36 -7
- package/dist/collection/components/swirl-time-input/swirl-time-input.js +36 -7
- package/dist/collection/components/swirl-time-input/swirl-time-input.stories.js +1 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +28 -0
- package/dist/components/swirl-time-input.js +37 -8
- package/dist/esm/swirl-time-input.entry.js +37 -8
- package/dist/swirl-components/p-5e182310.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-time-input/swirl-time-input.d.ts +1 -0
- package/package.json +1 -1
- package/dist/swirl-components/p-7992a861.entry.js +0 -1
package/components.json
CHANGED
|
@@ -56,12 +56,35 @@ const SwirlTimeInput = class {
|
|
|
56
56
|
watchValue(newValue, oldValue) {
|
|
57
57
|
if (newValue !== oldValue) {
|
|
58
58
|
this.valueChange.emit(newValue);
|
|
59
|
-
|
|
59
|
+
// Parse and format the value properly for the mask
|
|
60
|
+
if (this.mask && newValue) {
|
|
61
|
+
const pattern = this.getPattern();
|
|
62
|
+
// Try to parse with internal format first, then display format
|
|
63
|
+
let dateValue = index$1.parse(newValue, internalTimeFormat, new Date());
|
|
64
|
+
if (!index$1.isValid(dateValue)) {
|
|
65
|
+
dateValue = index$1.parse(newValue, pattern, new Date());
|
|
66
|
+
}
|
|
67
|
+
if (index$1.isValid(dateValue)) {
|
|
68
|
+
const formattedValue = index$1.format(dateValue, pattern);
|
|
69
|
+
this.mask.value = formattedValue;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
else if (this.mask && !newValue) {
|
|
73
|
+
this.mask.value = "";
|
|
74
|
+
}
|
|
60
75
|
}
|
|
61
76
|
}
|
|
62
77
|
updateIconSize(smallIcon) {
|
|
63
78
|
this.iconSize = smallIcon ? 20 : 24;
|
|
64
79
|
}
|
|
80
|
+
getPattern() {
|
|
81
|
+
return this.format
|
|
82
|
+
.replace(/(?<!H)H(?!H)/g, "HH")
|
|
83
|
+
.replace(/(?<!h)h(?!h)/g, "hh")
|
|
84
|
+
.replace(/(?<!m)m(?!m)/g, "mm")
|
|
85
|
+
.replace(/(?<!s)s(?!s)/g, "ss")
|
|
86
|
+
.replace(/(?<!a)a(?!a)/g, "aa");
|
|
87
|
+
}
|
|
65
88
|
handleAutoSelect(event) {
|
|
66
89
|
if (!this.autoSelect) {
|
|
67
90
|
setTimeout(() => {
|
|
@@ -80,11 +103,7 @@ const SwirlTimeInput = class {
|
|
|
80
103
|
setupMask() {
|
|
81
104
|
this.mask?.destroy();
|
|
82
105
|
// Due to automatic padding with 0s, we need to replace single characters with full length blocks.
|
|
83
|
-
const pattern = this.
|
|
84
|
-
.replace(/(?<!H)H(?!H)/g, "HH")
|
|
85
|
-
.replace(/(?<!h)h(?!h)/g, "hh")
|
|
86
|
-
.replace(/(?<!m)m(?!m)/g, "mm")
|
|
87
|
-
.replace(/(?<!s)s(?!s)/g, "ss");
|
|
106
|
+
const pattern = this.getPattern();
|
|
88
107
|
this.mask = index$1.IMask(this.inputEl, {
|
|
89
108
|
mask: Date,
|
|
90
109
|
pattern: pattern.replace(/([^A-Za-z0-9])/g, "$1`"), // Add backticks to separators to prevent symbols from shifting back
|
|
@@ -117,6 +136,16 @@ const SwirlTimeInput = class {
|
|
|
117
136
|
to: 59,
|
|
118
137
|
maxLength: 2,
|
|
119
138
|
},
|
|
139
|
+
aa: {
|
|
140
|
+
mask: index$1.IMask.MaskedEnum,
|
|
141
|
+
enum: ["AM", "PM", "A", "P"],
|
|
142
|
+
maxLength: 2,
|
|
143
|
+
},
|
|
144
|
+
aaa: {
|
|
145
|
+
mask: index$1.IMask.MaskedEnum,
|
|
146
|
+
enum: ["am", "pm", "a", "p"],
|
|
147
|
+
maxLength: 3,
|
|
148
|
+
},
|
|
120
149
|
},
|
|
121
150
|
format: (date) => {
|
|
122
151
|
if (!index$1.isValid(date)) {
|
|
@@ -145,7 +174,7 @@ const SwirlTimeInput = class {
|
|
|
145
174
|
const className = index$2.classnames("time-input", {
|
|
146
175
|
"time-input--inline": this.inline,
|
|
147
176
|
});
|
|
148
|
-
return (index.h(index.Host, { key: '
|
|
177
|
+
return (index.h(index.Host, { key: '3bc12a43b29dc70664c128917e1caede1d861277' }, index.h("div", { key: '5e47b258cc474122cf10e546d60263f8a994280b', class: className }, index.h("input", { key: 'f128b5900ce823029d38ea238fddf805f102bc16', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), index.h("span", { key: 'af82605413e6ab52d7509e6b876703123f7cec2a', class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { key: 'e3fa30e4be5418ed8c3e7c0ce167f7de502130e3', size: this.iconSize })))));
|
|
149
178
|
}
|
|
150
179
|
get el() { return index.getElement(this); }
|
|
151
180
|
static get watchers() { return {
|
|
@@ -47,12 +47,35 @@ export class SwirlTimeInput {
|
|
|
47
47
|
watchValue(newValue, oldValue) {
|
|
48
48
|
if (newValue !== oldValue) {
|
|
49
49
|
this.valueChange.emit(newValue);
|
|
50
|
-
|
|
50
|
+
// Parse and format the value properly for the mask
|
|
51
|
+
if (this.mask && newValue) {
|
|
52
|
+
const pattern = this.getPattern();
|
|
53
|
+
// Try to parse with internal format first, then display format
|
|
54
|
+
let dateValue = parse(newValue, internalTimeFormat, new Date());
|
|
55
|
+
if (!isValid(dateValue)) {
|
|
56
|
+
dateValue = parse(newValue, pattern, new Date());
|
|
57
|
+
}
|
|
58
|
+
if (isValid(dateValue)) {
|
|
59
|
+
const formattedValue = format(dateValue, pattern);
|
|
60
|
+
this.mask.value = formattedValue;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
else if (this.mask && !newValue) {
|
|
64
|
+
this.mask.value = "";
|
|
65
|
+
}
|
|
51
66
|
}
|
|
52
67
|
}
|
|
53
68
|
updateIconSize(smallIcon) {
|
|
54
69
|
this.iconSize = smallIcon ? 20 : 24;
|
|
55
70
|
}
|
|
71
|
+
getPattern() {
|
|
72
|
+
return this.format
|
|
73
|
+
.replace(/(?<!H)H(?!H)/g, "HH")
|
|
74
|
+
.replace(/(?<!h)h(?!h)/g, "hh")
|
|
75
|
+
.replace(/(?<!m)m(?!m)/g, "mm")
|
|
76
|
+
.replace(/(?<!s)s(?!s)/g, "ss")
|
|
77
|
+
.replace(/(?<!a)a(?!a)/g, "aa");
|
|
78
|
+
}
|
|
56
79
|
handleAutoSelect(event) {
|
|
57
80
|
if (!this.autoSelect) {
|
|
58
81
|
setTimeout(() => {
|
|
@@ -71,11 +94,7 @@ export class SwirlTimeInput {
|
|
|
71
94
|
setupMask() {
|
|
72
95
|
this.mask?.destroy();
|
|
73
96
|
// Due to automatic padding with 0s, we need to replace single characters with full length blocks.
|
|
74
|
-
const pattern = this.
|
|
75
|
-
.replace(/(?<!H)H(?!H)/g, "HH")
|
|
76
|
-
.replace(/(?<!h)h(?!h)/g, "hh")
|
|
77
|
-
.replace(/(?<!m)m(?!m)/g, "mm")
|
|
78
|
-
.replace(/(?<!s)s(?!s)/g, "ss");
|
|
97
|
+
const pattern = this.getPattern();
|
|
79
98
|
this.mask = IMask(this.inputEl, {
|
|
80
99
|
mask: Date,
|
|
81
100
|
pattern: pattern.replace(/([^A-Za-z0-9])/g, "$1`"), // Add backticks to separators to prevent symbols from shifting back
|
|
@@ -108,6 +127,16 @@ export class SwirlTimeInput {
|
|
|
108
127
|
to: 59,
|
|
109
128
|
maxLength: 2,
|
|
110
129
|
},
|
|
130
|
+
aa: {
|
|
131
|
+
mask: IMask.MaskedEnum,
|
|
132
|
+
enum: ["AM", "PM", "A", "P"],
|
|
133
|
+
maxLength: 2,
|
|
134
|
+
},
|
|
135
|
+
aaa: {
|
|
136
|
+
mask: IMask.MaskedEnum,
|
|
137
|
+
enum: ["am", "pm", "a", "p"],
|
|
138
|
+
maxLength: 3,
|
|
139
|
+
},
|
|
111
140
|
},
|
|
112
141
|
format: (date) => {
|
|
113
142
|
if (!isValid(date)) {
|
|
@@ -136,7 +165,7 @@ export class SwirlTimeInput {
|
|
|
136
165
|
const className = classnames("time-input", {
|
|
137
166
|
"time-input--inline": this.inline,
|
|
138
167
|
});
|
|
139
|
-
return (h(Host, { key: '
|
|
168
|
+
return (h(Host, { key: '3bc12a43b29dc70664c128917e1caede1d861277' }, h("div", { key: '5e47b258cc474122cf10e546d60263f8a994280b', class: className }, h("input", { key: 'f128b5900ce823029d38ea238fddf805f102bc16', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: 'af82605413e6ab52d7509e6b876703123f7cec2a', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'e3fa30e4be5418ed8c3e7c0ce167f7de502130e3', size: this.iconSize })))));
|
|
140
169
|
}
|
|
141
170
|
static get is() { return "swirl-time-input"; }
|
|
142
171
|
static get encapsulation() { return "scoped"; }
|
|
@@ -6,7 +6,7 @@ export default {
|
|
|
6
6
|
description: "See https://date-fns.org/v2.29.3/docs/format.",
|
|
7
7
|
table: {
|
|
8
8
|
type: {
|
|
9
|
-
detail: '"hh", "HH", "mm", "ss", and separators (e.g. ":", ".", ",")',
|
|
9
|
+
detail: '"hh", "HH", "mm", "ss", "aa", "aaa" and separators (e.g. ":", ".", ",")',
|
|
10
10
|
summary: "Allowed patterns",
|
|
11
11
|
},
|
|
12
12
|
},
|