@getflip/swirl-components 0.340.0 → 0.341.0
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/{maska-BX2QG_K8.js → index-BOqO2Grl.js} +3593 -17
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/swirl-components.cjs.js +1 -1
- package/dist/cjs/swirl-date-input.cjs.entry.js +92 -37
- package/dist/cjs/swirl-modal.cjs.entry.js +1 -1
- package/dist/cjs/swirl-time-input.cjs.entry.js +78 -49
- package/dist/collection/components/swirl-date-input/swirl-date-input.js +88 -33
- package/dist/collection/components/swirl-date-input/swirl-date-input.stories.js +1 -1
- package/dist/collection/components/swirl-modal/swirl-modal.css +12 -9
- package/dist/collection/components/swirl-time-input/swirl-time-input.js +77 -46
- 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/{maska.js → index3.js} +3593 -17
- package/dist/components/swirl-date-input.js +88 -33
- package/dist/components/swirl-modal.js +1 -1
- package/dist/components/swirl-time-input.js +78 -48
- package/dist/esm/{maska-CSSJQ9ZE.js → index-D3UoejeY.js} +3593 -17
- package/dist/esm/loader.js +1 -1
- package/dist/esm/swirl-components.js +1 -1
- package/dist/esm/swirl-date-input.entry.js +88 -33
- package/dist/esm/swirl-modal.entry.js +1 -1
- package/dist/esm/swirl-time-input.entry.js +76 -47
- package/dist/swirl-components/p-1bbb3a4b.entry.js +1 -0
- package/dist/swirl-components/p-96441b7e.entry.js +1 -0
- package/dist/swirl-components/p-D3UoejeY.js +1 -0
- package/dist/swirl-components/{p-a9c2c278.entry.js → p-d7f59668.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-date-input/swirl-date-input.d.ts +2 -2
- package/dist/types/components/swirl-time-input/swirl-time-input.d.ts +1 -2
- package/package.json +2 -2
- package/dist/swirl-components/p-1217fdca.entry.js +0 -1
- package/dist/swirl-components/p-CSSJQ9ZE.js +0 -6
- package/dist/swirl-components/p-b96b8029.entry.js +0 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-Cks2WRVX.js');
|
|
4
|
-
var index$
|
|
5
|
-
var
|
|
4
|
+
var index$2 = require('./index-DcAhLZUH.js');
|
|
5
|
+
var index$1 = require('./index-BOqO2Grl.js');
|
|
6
6
|
var mediaQuery_service = require('./media-query.service-DRPgROAV.js');
|
|
7
7
|
var utils = require('./utils-Br2wWntR.js');
|
|
8
8
|
|
|
@@ -25,29 +25,6 @@ const SwirlDateInput = class {
|
|
|
25
25
|
this.iconSize = 24;
|
|
26
26
|
this.readonly = false;
|
|
27
27
|
this.mediaQueryUnsubscribe = () => { };
|
|
28
|
-
this.onChange = (event) => {
|
|
29
|
-
const value = event.target.value;
|
|
30
|
-
if (value === "") {
|
|
31
|
-
this.value = undefined;
|
|
32
|
-
}
|
|
33
|
-
const newDate = maska.parse(value, this.format, new Date());
|
|
34
|
-
// First, escape any backslashes in the format string
|
|
35
|
-
const escapedFormat = this.format.replace(/\\/g, "\\\\");
|
|
36
|
-
// Then construct the RegExp using the escaped format string
|
|
37
|
-
const formatRegExp = new RegExp(`^${escapedFormat.replace(/[ydM]/g, "\\d")}$`);
|
|
38
|
-
if (!Boolean(value.match(formatRegExp))) {
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
if (!maska.isValid(newDate)) {
|
|
42
|
-
this.invalidInput.emit(value);
|
|
43
|
-
return;
|
|
44
|
-
}
|
|
45
|
-
const newValue = maska.format(newDate, internalDateFormat);
|
|
46
|
-
this.value = newValue;
|
|
47
|
-
};
|
|
48
|
-
this.onInput = (event) => {
|
|
49
|
-
this.onChange(event);
|
|
50
|
-
};
|
|
51
28
|
this.onClick = (event) => {
|
|
52
29
|
event.preventDefault();
|
|
53
30
|
if (this.preferredInputMode === "pick") {
|
|
@@ -71,8 +48,10 @@ const SwirlDateInput = class {
|
|
|
71
48
|
};
|
|
72
49
|
this.onPickDate = (event) => {
|
|
73
50
|
const newDateValue = event.detail;
|
|
74
|
-
const newValue =
|
|
51
|
+
const newValue = index$1.format(newDateValue, internalDateFormat);
|
|
75
52
|
this.value = newValue;
|
|
53
|
+
this.inputEl.value = index$1.format(newDateValue, this.pattern);
|
|
54
|
+
this.mask.updateValue();
|
|
76
55
|
this.setReadOnly(true);
|
|
77
56
|
this.pickerPopover.close();
|
|
78
57
|
};
|
|
@@ -101,7 +80,7 @@ const SwirlDateInput = class {
|
|
|
101
80
|
}
|
|
102
81
|
watchValue(newValue, oldValue) {
|
|
103
82
|
if (newValue !== oldValue) {
|
|
104
|
-
this.
|
|
83
|
+
this.updateValue();
|
|
105
84
|
}
|
|
106
85
|
}
|
|
107
86
|
focus() {
|
|
@@ -114,9 +93,18 @@ const SwirlDateInput = class {
|
|
|
114
93
|
}
|
|
115
94
|
handleAutoSelect(event) {
|
|
116
95
|
if (!this.autoSelect) {
|
|
96
|
+
setTimeout(() => {
|
|
97
|
+
if (event.target &&
|
|
98
|
+
event.target instanceof HTMLInputElement &&
|
|
99
|
+
event.target.setSelectionRange) {
|
|
100
|
+
event.target.setSelectionRange(0, 0);
|
|
101
|
+
}
|
|
102
|
+
});
|
|
117
103
|
return;
|
|
118
104
|
}
|
|
119
|
-
event.target.
|
|
105
|
+
if (event.target && event.target instanceof HTMLInputElement) {
|
|
106
|
+
event.target.select();
|
|
107
|
+
}
|
|
120
108
|
}
|
|
121
109
|
setReadOnly(readOnly) {
|
|
122
110
|
if (this.preferredInputMode === "pick" && utils.isMobileViewport()) {
|
|
@@ -128,24 +116,91 @@ const SwirlDateInput = class {
|
|
|
128
116
|
}
|
|
129
117
|
setupMask() {
|
|
130
118
|
this.mask?.destroy();
|
|
131
|
-
|
|
132
|
-
|
|
119
|
+
// Due to automatic padding with 0s, we need to replace single characters with full length blocks.
|
|
120
|
+
this.pattern = this.format
|
|
121
|
+
.replace(/(?<!d)d(?!d)/g, "dd")
|
|
122
|
+
.replace(/(?<!M)M(?!M)/g, "MM")
|
|
123
|
+
.replace(/(?<!y)y(?!y)/g, "yyyy")
|
|
124
|
+
.replace(/(?<!y)yyy(?!y)/g, "yyyy");
|
|
125
|
+
if (!this.pattern) {
|
|
126
|
+
this.pattern = internalDateFormat;
|
|
127
|
+
}
|
|
128
|
+
this.mask = index$1.IMask(this.inputEl, {
|
|
129
|
+
mask: Date,
|
|
130
|
+
pattern: this.pattern.replace(/([^A-Za-z0-9])/g, "$1`"), // Add backticks to separators to prevent symbols from shifting back
|
|
131
|
+
autofix: "pad",
|
|
132
|
+
lazy: true,
|
|
133
|
+
overwrite: true,
|
|
134
|
+
eager: "append",
|
|
135
|
+
blocks: {
|
|
136
|
+
dd: {
|
|
137
|
+
mask: index$1.IMask.MaskedRange,
|
|
138
|
+
from: 1,
|
|
139
|
+
to: 31,
|
|
140
|
+
maxLength: 2,
|
|
141
|
+
},
|
|
142
|
+
MM: {
|
|
143
|
+
mask: index$1.IMask.MaskedRange,
|
|
144
|
+
from: 1,
|
|
145
|
+
to: 12,
|
|
146
|
+
maxLength: 2,
|
|
147
|
+
},
|
|
148
|
+
yy: {
|
|
149
|
+
mask: index$1.IMask.MaskedRange,
|
|
150
|
+
from: 0,
|
|
151
|
+
to: 99,
|
|
152
|
+
maxLength: 2,
|
|
153
|
+
},
|
|
154
|
+
yyyy: {
|
|
155
|
+
mask: index$1.IMask.MaskedRange,
|
|
156
|
+
from: 1000,
|
|
157
|
+
to: 9999,
|
|
158
|
+
maxLength: 4,
|
|
159
|
+
},
|
|
160
|
+
},
|
|
161
|
+
// define date -> str conversion
|
|
162
|
+
format: (date) => {
|
|
163
|
+
const newDate = index$1.format(date, this.pattern);
|
|
164
|
+
if (!index$1.isValid(date)) {
|
|
165
|
+
this.invalidInput.emit(date.toString());
|
|
166
|
+
return "";
|
|
167
|
+
}
|
|
168
|
+
this.value = index$1.format(date, internalDateFormat);
|
|
169
|
+
return newDate;
|
|
170
|
+
},
|
|
171
|
+
// define str -> date conversion
|
|
172
|
+
parse: (str) => {
|
|
173
|
+
const newString = index$1.parse(str, this.pattern, new Date());
|
|
174
|
+
return newString;
|
|
175
|
+
},
|
|
133
176
|
});
|
|
177
|
+
this.updateValue();
|
|
178
|
+
}
|
|
179
|
+
updateValue() {
|
|
180
|
+
if (this.value) {
|
|
181
|
+
const dateValue = index$1.parse(this.value, internalDateFormat, new Date());
|
|
182
|
+
if (index$1.isValid(dateValue)) {
|
|
183
|
+
const formattedValue = index$1.format(dateValue, this.pattern);
|
|
184
|
+
this.mask.value = formattedValue;
|
|
185
|
+
this.valueChange.emit(this.value);
|
|
186
|
+
}
|
|
187
|
+
else {
|
|
188
|
+
this.invalidInput.emit(this.value);
|
|
189
|
+
}
|
|
190
|
+
}
|
|
134
191
|
}
|
|
135
192
|
render() {
|
|
136
193
|
const ariaInvalid = this.invalid === true || this.invalid === false
|
|
137
194
|
? String(this.invalid)
|
|
138
195
|
: undefined;
|
|
139
|
-
const
|
|
140
|
-
?
|
|
141
|
-
: undefined;
|
|
142
|
-
const displayValue = maska.isValid(dateValue)
|
|
143
|
-
? maska.format(dateValue, this.format)
|
|
196
|
+
const newDate = Boolean(this.value)
|
|
197
|
+
? index$1.parse(this.value, internalDateFormat, new Date())
|
|
144
198
|
: undefined;
|
|
145
|
-
const
|
|
199
|
+
const dateValue = index$1.isValid(newDate) ? newDate : undefined;
|
|
200
|
+
const className = index$2.classnames("date-input", {
|
|
146
201
|
"date-input--inline": this.inline,
|
|
147
202
|
});
|
|
148
|
-
return (index.h(index.Host, { key: '
|
|
203
|
+
return (index.h(index.Host, { key: '9f3d225dc75468cdddff1c0446234abfd9ca09e0' }, index.h("div", { key: '977ea02e1a0a599f2b32e5c382210efb913d0463', class: className }, index.h("input", { key: '5da50a63dcc55d88abccb1dd51fef4d28e66a5ee', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), index.h("swirl-popover-trigger", { key: '556f13ed495626e32a6436f0ab172820cd9066c7', swirlPopover: `popover-${this.id}` }, index.h("button", { key: 'e6dddc6e1cabe9c1e632dbe0f15834b0ab17fa2b', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, index.h("swirl-icon-today", { key: 'a2ef423472b1db8429c44ad717847e600fb20cb8', size: this.iconSize })))), !this.disabled && (index.h("swirl-popover", { key: '84a3e021ac7d946171347de0e627233abc25e493', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, index.h("swirl-date-picker", { key: '7edd4e96694530a7f49bc273d8fe36961c4b9e25', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
|
|
149
204
|
}
|
|
150
205
|
get el() { return index.getElement(this); }
|
|
151
206
|
static get watchers() { return {
|
|
@@ -5,7 +5,7 @@ var bodyScrollLock_esm = require('./bodyScrollLock.esm-DMDeaEpJ.js');
|
|
|
5
5
|
var index$1 = require('./index-DcAhLZUH.js');
|
|
6
6
|
var focusTrap_esm = require('./focus-trap.esm-kePK98yh.js');
|
|
7
7
|
|
|
8
|
-
const swirlModalCss = ":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);--swirl-resource-list-item-background-default:var(\n --s-surface-overlay-default\n );--swirl-resource-list-item-background-hovered:var(\n --s-surface-overlay-hovered\n );--swirl-resource-list-item-background-pressed:var(\n --s-surface-overlay-pressed\n );--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-header-height:3.75rem;--swirl-modal-max-width:40rem;--swirl-modal-sidebar-width:25rem;--swirl-modal-max-secondary-content-width:24rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16)\n var(--s-space-12) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24)\n var(--s-space-16) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0}.modal[aria-hidden=\"true\"]{display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}.modal--variant-drawer .modal__header-bar .modal__fullscreen-button{display:none}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content:not(.modal--fullscreen) .modal__body{max-width:calc(\n var(--swirl-modal-max-width) +\n var(--swirl-modal-max-secondary-content-width)\n )}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - var(--swirl-modal-max-secondary-content-width));max-height:none;flex-basis:calc(100% - var(--swirl-modal-max-secondary-content-width))}}.modal--has-secondary-content .modal__secondary-content{display:block}.modal__main-content{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1}.modal__sidebar{display:none}.modal--has-sidebar-content:not(.modal--fullscreen) .modal__body{max-width:calc(\n var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width)\n )}@media (min-width: 768px){.modal--has-sidebar-content .modal__sidebar{display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;width:var(--swirl-modal-sidebar-width);border-right:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header{border-bottom:var(--s-border-width-default) solid transparent;display:flex;align-items:center;gap:var(--s-space-8);padding-right:var(--s-space-24);padding-left:var(--s-space-24)}.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header.modal__sidebar-header--has-close-button{padding-left:var(--s-space-16)}.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading{display:flex;align-items:center;height:var(--swirl-modal-header-height)}.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content{display:block;flex-grow:1;overflow-y:auto}}@media (min-width: 992px){.modal--has-sidebar-content .modal__primary-content{flex-basis:calc(100% - 20rem)}}.modal--sidebar-padded .modal__sidebar .modal__sidebar-content{padding-left:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled:not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled.modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled .modal__custom-header{border-bottom-color:var(--s-border-default)}}@media (min-width: 768px){.modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header{border-bottom-color:var(--s-border-default)}}.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-large)}}@media (min-width: 768px){.modal--sidebar-scrollable .modal__sidebar-content{padding-bottom:0 !important}}.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);--swirl-accordion-item-toggle-default:var(--s-surface-overlay-default);--swirl-accordion-item-toggle-hovered:var(--s-surface-overlay-hovered);--swirl-accordion-item-toggle-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out, max-height 0.15s ease-out, min-height 0.15s ease-out}@media (min-width: 768px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);min-height:0;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse}}.modal__fullscreen-button{display:none}@media (min-width: 768px){.modal__fullscreen-button{display:block}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:var(--swirl-modal-max-secondary-content-width);max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%;flex-grow:1}}.modal__custom-footer{flex-shrink:0}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-secondary-content.modal--has-sidebar-content:not(.modal--fullscreen) .modal__body{max-width:calc(\n var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) +\n var(--swirl-modal-max-secondary-content-width)\n )}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}";
|
|
8
|
+
const swirlModalCss = ":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);--swirl-resource-list-item-background-default:var(\n --s-surface-overlay-default\n );--swirl-resource-list-item-background-hovered:var(\n --s-surface-overlay-hovered\n );--swirl-resource-list-item-background-pressed:var(\n --s-surface-overlay-pressed\n );--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-header-height:3.75rem;--swirl-modal-max-width:40rem;--swirl-modal-sidebar-width:25rem;--swirl-modal-max-secondary-content-width:24rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16)\n var(--s-space-12) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24)\n var(--s-space-16) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0}.modal[aria-hidden=\"true\"]{display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}.modal--variant-drawer .modal__header-bar .modal__fullscreen-button{display:none}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal--has-secondary-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(\n var(--swirl-modal-max-width) +\n var(--swirl-modal-max-secondary-content-width)\n )}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - var(--swirl-modal-max-secondary-content-width));max-height:none;flex-basis:calc(100% - var(--swirl-modal-max-secondary-content-width))}}.modal--has-secondary-content .modal__secondary-content{display:block}.modal__main-content{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1}.modal__sidebar{display:none}.modal.modal--has-sidebar-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal.modal--has-sidebar-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(\n var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width)\n )}@media (min-width: 768px){.modal.modal--has-sidebar-content .modal__sidebar{display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;width:var(--swirl-modal-sidebar-width);border-right:var(--s-border-width-default) solid var(--s-border-default)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header{border-bottom:var(--s-border-width-default) solid transparent;display:flex;align-items:center;gap:var(--s-space-8);padding-right:var(--s-space-24);padding-left:var(--s-space-24)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header.modal__sidebar-header--has-close-button{padding-left:var(--s-space-16)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading{display:flex;align-items:center;height:var(--swirl-modal-header-height)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content{display:block;flex-grow:1;overflow-y:auto}}@media (min-width: 992px){.modal.modal--has-sidebar-content .modal__primary-content{flex-basis:calc(100% - 20rem)}}.modal--sidebar-padded .modal__sidebar .modal__sidebar-content{padding-left:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled:not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled.modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled .modal__custom-header{border-bottom-color:var(--s-border-default)}}@media (min-width: 768px){.modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header{border-bottom-color:var(--s-border-default)}}.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-large)}}@media (min-width: 768px){.modal--sidebar-scrollable .modal__sidebar-content{padding-bottom:0 !important}}.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);--swirl-accordion-item-toggle-default:var(--s-surface-overlay-default);--swirl-accordion-item-toggle-hovered:var(--s-surface-overlay-hovered);--swirl-accordion-item-toggle-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out,\n max-height 0.15s ease-out, min-height 0.15s ease-out}@media (min-width: 768px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);min-height:0;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse}}.modal__fullscreen-button{display:none}@media (min-width: 768px){.modal__fullscreen-button{display:block}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;overflow-y:auto;flex-grow:1;flex-basis:100%;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:var(--swirl-modal-max-secondary-content-width);max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%;flex-grow:1}}.modal__custom-footer{flex-shrink:0}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-secondary-content.modal--has-sidebar-content:not(.modal--fullscreen) .modal__body{max-width:calc(\n var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) +\n var(--swirl-modal-max-secondary-content-width)\n )}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}";
|
|
9
9
|
|
|
10
10
|
const SwirlModal = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-Cks2WRVX.js');
|
|
4
|
-
var index$
|
|
5
|
-
var
|
|
4
|
+
var index$2 = require('./index-DcAhLZUH.js');
|
|
5
|
+
var index$1 = require('./index-BOqO2Grl.js');
|
|
6
6
|
var mediaQuery_service = require('./media-query.service-DRPgROAV.js');
|
|
7
7
|
require('./utils-Br2wWntR.js');
|
|
8
8
|
|
|
@@ -19,43 +19,8 @@ const SwirlTimeInput = class {
|
|
|
19
19
|
this.placeholder = "hh:mm";
|
|
20
20
|
this.iconSize = 24;
|
|
21
21
|
this.mediaQueryUnsubscribe = () => { };
|
|
22
|
-
this.onChange = (event) => {
|
|
23
|
-
const value = event.target.value;
|
|
24
|
-
let newValue;
|
|
25
|
-
if (value === "") {
|
|
26
|
-
this.value = undefined;
|
|
27
|
-
this.valueChange.emit(undefined);
|
|
28
|
-
}
|
|
29
|
-
const newDate = maska.parse(value, this.format, new Date());
|
|
30
|
-
const formatRegExp = new RegExp(`^${this.format.replace(/[Hhms]/g, "\\d")}$`);
|
|
31
|
-
if (!Boolean(value.match(formatRegExp))) {
|
|
32
|
-
return;
|
|
33
|
-
}
|
|
34
|
-
if (!maska.isValid(newDate)) {
|
|
35
|
-
newValue = maska.format(new Date(), internalTimeFormat);
|
|
36
|
-
}
|
|
37
|
-
else {
|
|
38
|
-
newValue = maska.format(newDate, internalTimeFormat);
|
|
39
|
-
}
|
|
40
|
-
this.value = newValue;
|
|
41
|
-
this.valueChange.emit(newValue);
|
|
42
|
-
};
|
|
43
22
|
this.onBlur = (event) => {
|
|
44
23
|
this.inputBlur.emit(event);
|
|
45
|
-
const input = event.target;
|
|
46
|
-
const dateValue = maska.parse(input.value, this.format, new Date());
|
|
47
|
-
if (!maska.isValid(dateValue) && Boolean(this.value)) {
|
|
48
|
-
const currentDateValue = Boolean(this.value)
|
|
49
|
-
? maska.parse(this.value, internalTimeFormat, new Date())
|
|
50
|
-
: undefined;
|
|
51
|
-
if (!Boolean(currentDateValue) || !maska.isValid(currentDateValue)) {
|
|
52
|
-
this.value = "";
|
|
53
|
-
}
|
|
54
|
-
input.value = maska.format(currentDateValue, this.format);
|
|
55
|
-
}
|
|
56
|
-
};
|
|
57
|
-
this.onInput = (event) => {
|
|
58
|
-
this.onChange(event);
|
|
59
24
|
};
|
|
60
25
|
this.onClick = (event) => {
|
|
61
26
|
event.preventDefault();
|
|
@@ -88,39 +53,103 @@ const SwirlTimeInput = class {
|
|
|
88
53
|
watchFormat() {
|
|
89
54
|
this.setupMask();
|
|
90
55
|
}
|
|
56
|
+
watchValue(newValue, oldValue) {
|
|
57
|
+
if (newValue !== oldValue) {
|
|
58
|
+
this.valueChange.emit(newValue);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
91
61
|
updateIconSize(smallIcon) {
|
|
92
62
|
this.iconSize = smallIcon ? 20 : 24;
|
|
93
63
|
}
|
|
94
64
|
handleAutoSelect(event) {
|
|
95
65
|
if (!this.autoSelect) {
|
|
66
|
+
setTimeout(() => {
|
|
67
|
+
if (event.target &&
|
|
68
|
+
event.target instanceof HTMLInputElement &&
|
|
69
|
+
event.target.setSelectionRange) {
|
|
70
|
+
event.target.setSelectionRange(0, 0);
|
|
71
|
+
}
|
|
72
|
+
});
|
|
96
73
|
return;
|
|
97
74
|
}
|
|
98
|
-
event.target.
|
|
75
|
+
if (event.target && event.target instanceof HTMLInputElement) {
|
|
76
|
+
event.target.select();
|
|
77
|
+
}
|
|
99
78
|
}
|
|
100
79
|
setupMask() {
|
|
101
80
|
this.mask?.destroy();
|
|
102
|
-
|
|
103
|
-
|
|
81
|
+
// Due to automatic padding with 0s, we need to replace single characters with full length blocks.
|
|
82
|
+
const pattern = this.format
|
|
83
|
+
.replace(/(?<!H)H(?!H)/g, "HH")
|
|
84
|
+
.replace(/(?<!h)h(?!h)/g, "hh")
|
|
85
|
+
.replace(/(?<!m)m(?!m)/g, "mm")
|
|
86
|
+
.replace(/(?<!s)s(?!s)/g, "ss");
|
|
87
|
+
this.mask = index$1.IMask(this.inputEl, {
|
|
88
|
+
mask: Date,
|
|
89
|
+
pattern: pattern.replace(/([^A-Za-z0-9])/g, "$1`"), // Add backticks to separators to prevent symbols from shifting back
|
|
90
|
+
autofix: "pad",
|
|
91
|
+
lazy: true,
|
|
92
|
+
overwrite: true,
|
|
93
|
+
eager: "append",
|
|
94
|
+
blocks: {
|
|
95
|
+
HH: {
|
|
96
|
+
mask: index$1.IMask.MaskedRange,
|
|
97
|
+
from: 0,
|
|
98
|
+
to: 23,
|
|
99
|
+
maxLength: 2,
|
|
100
|
+
},
|
|
101
|
+
hh: {
|
|
102
|
+
mask: index$1.IMask.MaskedRange,
|
|
103
|
+
from: 1,
|
|
104
|
+
to: 12,
|
|
105
|
+
maxLength: 2,
|
|
106
|
+
},
|
|
107
|
+
mm: {
|
|
108
|
+
mask: index$1.IMask.MaskedRange,
|
|
109
|
+
from: 0,
|
|
110
|
+
to: 59,
|
|
111
|
+
maxLength: 2,
|
|
112
|
+
},
|
|
113
|
+
ss: {
|
|
114
|
+
mask: index$1.IMask.MaskedRange,
|
|
115
|
+
from: 0,
|
|
116
|
+
to: 59,
|
|
117
|
+
maxLength: 2,
|
|
118
|
+
},
|
|
119
|
+
},
|
|
120
|
+
format: (date) => {
|
|
121
|
+
if (!index$1.isValid(date)) {
|
|
122
|
+
return "";
|
|
123
|
+
}
|
|
124
|
+
this.value = index$1.format(date, internalTimeFormat);
|
|
125
|
+
return index$1.format(date, pattern);
|
|
126
|
+
},
|
|
127
|
+
parse: (str) => {
|
|
128
|
+
return index$1.parse(str, pattern, new Date());
|
|
129
|
+
},
|
|
104
130
|
});
|
|
131
|
+
// Set the initial value if it exists
|
|
132
|
+
if (this.value) {
|
|
133
|
+
const dateValue = index$1.parse(this.value, internalTimeFormat, new Date());
|
|
134
|
+
if (index$1.isValid(dateValue)) {
|
|
135
|
+
const formattedValue = index$1.format(dateValue, pattern);
|
|
136
|
+
this.mask.value = formattedValue;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
105
139
|
}
|
|
106
140
|
render() {
|
|
107
141
|
const ariaInvalid = this.invalid === true || this.invalid === false
|
|
108
142
|
? String(this.invalid)
|
|
109
143
|
: undefined;
|
|
110
|
-
const
|
|
111
|
-
? maska.parse(this.value, internalTimeFormat, new Date())
|
|
112
|
-
: undefined;
|
|
113
|
-
const displayValue = maska.isValid(dateValue)
|
|
114
|
-
? maska.format(dateValue, this.format)
|
|
115
|
-
: undefined;
|
|
116
|
-
const className = index$1.classnames("time-input", {
|
|
144
|
+
const className = index$2.classnames("time-input", {
|
|
117
145
|
"time-input--inline": this.inline,
|
|
118
146
|
});
|
|
119
|
-
return (index.h(index.Host, { key: '
|
|
147
|
+
return (index.h(index.Host, { key: '8947322735a4ce58217aff86dcc3b5132905b82a' }, index.h("div", { key: '1368952e9638f3337d3b67b3ce6a22ce9c736dfd', class: className }, index.h("input", { key: '23299e8dce3200618853f2bc319fdfc741f215e1', "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" }), index.h("span", { key: 'd793539f7f1b7027a97d02649f1f89a5251ceb33', class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { key: '3fe2d103178eb908b82fa0fed4918253de760618', size: this.iconSize })))));
|
|
120
148
|
}
|
|
121
149
|
get el() { return index.getElement(this); }
|
|
122
150
|
static get watchers() { return {
|
|
123
|
-
"format": ["watchFormat"]
|
|
151
|
+
"format": ["watchFormat"],
|
|
152
|
+
"value": ["watchValue"]
|
|
124
153
|
}; }
|
|
125
154
|
};
|
|
126
155
|
SwirlTimeInput.style = swirlTimeInputCss;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h, Host, } from "@stencil/core";
|
|
2
2
|
import classnames from "classnames";
|
|
3
3
|
import { format, isValid, parse } from "date-fns";
|
|
4
|
-
import
|
|
4
|
+
import IMask from "imask";
|
|
5
5
|
import { DesktopMediaQuery } from "../../services/media-query.service";
|
|
6
6
|
import { isMobileViewport } from "../../utils";
|
|
7
7
|
const internalDateFormat = "yyyy-MM-dd";
|
|
@@ -18,29 +18,6 @@ export class SwirlDateInput {
|
|
|
18
18
|
this.iconSize = 24;
|
|
19
19
|
this.readonly = false;
|
|
20
20
|
this.mediaQueryUnsubscribe = () => { };
|
|
21
|
-
this.onChange = (event) => {
|
|
22
|
-
const value = event.target.value;
|
|
23
|
-
if (value === "") {
|
|
24
|
-
this.value = undefined;
|
|
25
|
-
}
|
|
26
|
-
const newDate = parse(value, this.format, new Date());
|
|
27
|
-
// First, escape any backslashes in the format string
|
|
28
|
-
const escapedFormat = this.format.replace(/\\/g, "\\\\");
|
|
29
|
-
// Then construct the RegExp using the escaped format string
|
|
30
|
-
const formatRegExp = new RegExp(`^${escapedFormat.replace(/[ydM]/g, "\\d")}$`);
|
|
31
|
-
if (!Boolean(value.match(formatRegExp))) {
|
|
32
|
-
return;
|
|
33
|
-
}
|
|
34
|
-
if (!isValid(newDate)) {
|
|
35
|
-
this.invalidInput.emit(value);
|
|
36
|
-
return;
|
|
37
|
-
}
|
|
38
|
-
const newValue = format(newDate, internalDateFormat);
|
|
39
|
-
this.value = newValue;
|
|
40
|
-
};
|
|
41
|
-
this.onInput = (event) => {
|
|
42
|
-
this.onChange(event);
|
|
43
|
-
};
|
|
44
21
|
this.onClick = (event) => {
|
|
45
22
|
event.preventDefault();
|
|
46
23
|
if (this.preferredInputMode === "pick") {
|
|
@@ -66,6 +43,8 @@ export class SwirlDateInput {
|
|
|
66
43
|
const newDateValue = event.detail;
|
|
67
44
|
const newValue = format(newDateValue, internalDateFormat);
|
|
68
45
|
this.value = newValue;
|
|
46
|
+
this.inputEl.value = format(newDateValue, this.pattern);
|
|
47
|
+
this.mask.updateValue();
|
|
69
48
|
this.setReadOnly(true);
|
|
70
49
|
this.pickerPopover.close();
|
|
71
50
|
};
|
|
@@ -94,7 +73,7 @@ export class SwirlDateInput {
|
|
|
94
73
|
}
|
|
95
74
|
watchValue(newValue, oldValue) {
|
|
96
75
|
if (newValue !== oldValue) {
|
|
97
|
-
this.
|
|
76
|
+
this.updateValue();
|
|
98
77
|
}
|
|
99
78
|
}
|
|
100
79
|
focus() {
|
|
@@ -107,9 +86,18 @@ export class SwirlDateInput {
|
|
|
107
86
|
}
|
|
108
87
|
handleAutoSelect(event) {
|
|
109
88
|
if (!this.autoSelect) {
|
|
89
|
+
setTimeout(() => {
|
|
90
|
+
if (event.target &&
|
|
91
|
+
event.target instanceof HTMLInputElement &&
|
|
92
|
+
event.target.setSelectionRange) {
|
|
93
|
+
event.target.setSelectionRange(0, 0);
|
|
94
|
+
}
|
|
95
|
+
});
|
|
110
96
|
return;
|
|
111
97
|
}
|
|
112
|
-
event.target.
|
|
98
|
+
if (event.target && event.target instanceof HTMLInputElement) {
|
|
99
|
+
event.target.select();
|
|
100
|
+
}
|
|
113
101
|
}
|
|
114
102
|
setReadOnly(readOnly) {
|
|
115
103
|
if (this.preferredInputMode === "pick" && isMobileViewport()) {
|
|
@@ -121,24 +109,91 @@ export class SwirlDateInput {
|
|
|
121
109
|
}
|
|
122
110
|
setupMask() {
|
|
123
111
|
this.mask?.destroy();
|
|
124
|
-
|
|
125
|
-
|
|
112
|
+
// Due to automatic padding with 0s, we need to replace single characters with full length blocks.
|
|
113
|
+
this.pattern = this.format
|
|
114
|
+
.replace(/(?<!d)d(?!d)/g, "dd")
|
|
115
|
+
.replace(/(?<!M)M(?!M)/g, "MM")
|
|
116
|
+
.replace(/(?<!y)y(?!y)/g, "yyyy")
|
|
117
|
+
.replace(/(?<!y)yyy(?!y)/g, "yyyy");
|
|
118
|
+
if (!this.pattern) {
|
|
119
|
+
this.pattern = internalDateFormat;
|
|
120
|
+
}
|
|
121
|
+
this.mask = IMask(this.inputEl, {
|
|
122
|
+
mask: Date,
|
|
123
|
+
pattern: this.pattern.replace(/([^A-Za-z0-9])/g, "$1`"), // Add backticks to separators to prevent symbols from shifting back
|
|
124
|
+
autofix: "pad",
|
|
125
|
+
lazy: true,
|
|
126
|
+
overwrite: true,
|
|
127
|
+
eager: "append",
|
|
128
|
+
blocks: {
|
|
129
|
+
dd: {
|
|
130
|
+
mask: IMask.MaskedRange,
|
|
131
|
+
from: 1,
|
|
132
|
+
to: 31,
|
|
133
|
+
maxLength: 2,
|
|
134
|
+
},
|
|
135
|
+
MM: {
|
|
136
|
+
mask: IMask.MaskedRange,
|
|
137
|
+
from: 1,
|
|
138
|
+
to: 12,
|
|
139
|
+
maxLength: 2,
|
|
140
|
+
},
|
|
141
|
+
yy: {
|
|
142
|
+
mask: IMask.MaskedRange,
|
|
143
|
+
from: 0,
|
|
144
|
+
to: 99,
|
|
145
|
+
maxLength: 2,
|
|
146
|
+
},
|
|
147
|
+
yyyy: {
|
|
148
|
+
mask: IMask.MaskedRange,
|
|
149
|
+
from: 1000,
|
|
150
|
+
to: 9999,
|
|
151
|
+
maxLength: 4,
|
|
152
|
+
},
|
|
153
|
+
},
|
|
154
|
+
// define date -> str conversion
|
|
155
|
+
format: (date) => {
|
|
156
|
+
const newDate = format(date, this.pattern);
|
|
157
|
+
if (!isValid(date)) {
|
|
158
|
+
this.invalidInput.emit(date.toString());
|
|
159
|
+
return "";
|
|
160
|
+
}
|
|
161
|
+
this.value = format(date, internalDateFormat);
|
|
162
|
+
return newDate;
|
|
163
|
+
},
|
|
164
|
+
// define str -> date conversion
|
|
165
|
+
parse: (str) => {
|
|
166
|
+
const newString = parse(str, this.pattern, new Date());
|
|
167
|
+
return newString;
|
|
168
|
+
},
|
|
126
169
|
});
|
|
170
|
+
this.updateValue();
|
|
171
|
+
}
|
|
172
|
+
updateValue() {
|
|
173
|
+
if (this.value) {
|
|
174
|
+
const dateValue = parse(this.value, internalDateFormat, new Date());
|
|
175
|
+
if (isValid(dateValue)) {
|
|
176
|
+
const formattedValue = format(dateValue, this.pattern);
|
|
177
|
+
this.mask.value = formattedValue;
|
|
178
|
+
this.valueChange.emit(this.value);
|
|
179
|
+
}
|
|
180
|
+
else {
|
|
181
|
+
this.invalidInput.emit(this.value);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
127
184
|
}
|
|
128
185
|
render() {
|
|
129
186
|
const ariaInvalid = this.invalid === true || this.invalid === false
|
|
130
187
|
? String(this.invalid)
|
|
131
188
|
: undefined;
|
|
132
|
-
const
|
|
189
|
+
const newDate = Boolean(this.value)
|
|
133
190
|
? parse(this.value, internalDateFormat, new Date())
|
|
134
191
|
: undefined;
|
|
135
|
-
const
|
|
136
|
-
? format(dateValue, this.format)
|
|
137
|
-
: undefined;
|
|
192
|
+
const dateValue = isValid(newDate) ? newDate : undefined;
|
|
138
193
|
const className = classnames("date-input", {
|
|
139
194
|
"date-input--inline": this.inline,
|
|
140
195
|
});
|
|
141
|
-
return (h(Host, { key: '
|
|
196
|
+
return (h(Host, { key: '9f3d225dc75468cdddff1c0446234abfd9ca09e0' }, h("div", { key: '977ea02e1a0a599f2b32e5c382210efb913d0463', class: className }, h("input", { key: '5da50a63dcc55d88abccb1dd51fef4d28e66a5ee', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), h("swirl-popover-trigger", { key: '556f13ed495626e32a6436f0ab172820cd9066c7', swirlPopover: `popover-${this.id}` }, h("button", { key: 'e6dddc6e1cabe9c1e632dbe0f15834b0ab17fa2b', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'a2ef423472b1db8429c44ad717847e600fb20cb8', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '84a3e021ac7d946171347de0e627233abc25e493', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '7edd4e96694530a7f49bc273d8fe36961c4b9e25', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
|
|
142
197
|
}
|
|
143
198
|
static get is() { return "swirl-date-input"; }
|
|
144
199
|
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: '"
|
|
9
|
+
detail: '"dd", "MM", "yy", "yyyy" and separators (e.g. ".", "-", "/", " ")',
|
|
10
10
|
summary: "Allowed patterns",
|
|
11
11
|
},
|
|
12
12
|
},
|