@getflip/swirl-components 0.397.0 → 0.397.2
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-chip.cjs.entry.js +1 -1
- package/dist/cjs/swirl-time-input.cjs.entry.js +36 -7
- package/dist/collection/components/swirl-chip/swirl-chip.css +1 -0
- 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-chip.js +1 -1
- package/dist/components/swirl-time-input.js +37 -8
- package/dist/esm/swirl-chip.entry.js +1 -1
- package/dist/esm/swirl-time-input.entry.js +37 -8
- package/dist/swirl-components/{p-24e956c7.entry.js → p-03764b63.entry.js} +1 -1
- 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
|
@@ -5,7 +5,7 @@ var index$1 = require('./index-DcAhLZUH.js');
|
|
|
5
5
|
var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
|
|
6
6
|
require('./utils-UfZG-xPD.js');
|
|
7
7
|
|
|
8
|
-
const swirlChipCss = ".sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h *.sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2.5rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--size-s.sc-swirl-chip{height:2rem}.chip--size-s.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-12))}.chip--size-s.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.chip--size-s.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:var(--s-space-4);width:1.5rem;height:1.5rem}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:hover{background-color:var(--s-surface-overlay-hovered)}.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-raised-default)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--interactive.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-overlay-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.875rem + var(--s-space-12))}.chip--intent-critical.sc-swirl-chip{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-critical)}.chip--border-radius-sm.sc-swirl-chip{border-radius:var(--s-border-radius-sm)}.chip--intent-success.sc-swirl-chip{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-success)}.chip--variant-outline.chip--pressed.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-plain.sc-swirl-chip{height:auto;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover{background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive.sc-swirl-chip:active{background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--variant-plain.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12)}.chip--variant-plain.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{position:relative;top:0;right:auto}.chip--variant-plain.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:0;padding-left:0}.chip--has-progress.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:0.1875rem}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon.sc-swirl-chip{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__progress-indicator.sc-swirl-chip{width:100%}.chip__remove-button.sc-swirl-chip{position:absolute;top:0.3125rem;right:var(--s-space-4);display:inline-flex;width:1.875rem;height:1.875rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:var(--s-surface-overlay-default);cursor:pointer}.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-overlay-hovered)}.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}";
|
|
8
|
+
const swirlChipCss = ".sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h *.sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2.5rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--size-s.sc-swirl-chip{height:2rem}.chip--size-s.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-12))}.chip--size-s.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.chip--size-s.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:var(--s-space-4);width:1.5rem;height:1.5rem}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:hover{background-color:var(--s-surface-overlay-hovered)}.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-raised-default)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--interactive.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-overlay-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.875rem + var(--s-space-12))}.chip--intent-critical.sc-swirl-chip{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-critical)}.chip--border-radius-sm.sc-swirl-chip{border-radius:var(--s-border-radius-sm)}.chip--intent-success.sc-swirl-chip{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-success)}.chip--variant-outline.chip--pressed.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default);border-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-plain.sc-swirl-chip{height:auto;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover{background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive.sc-swirl-chip:active{background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--variant-plain.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12)}.chip--variant-plain.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{position:relative;top:0;right:auto}.chip--variant-plain.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:0;padding-left:0}.chip--has-progress.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:0.1875rem}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon.sc-swirl-chip{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__progress-indicator.sc-swirl-chip{width:100%}.chip__remove-button.sc-swirl-chip{position:absolute;top:0.3125rem;right:var(--s-space-4);display:inline-flex;width:1.875rem;height:1.875rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:var(--s-surface-overlay-default);cursor:pointer}.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-overlay-hovered)}.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}";
|
|
9
9
|
|
|
10
10
|
const SwirlChip = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -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
|
},
|