@haiilo/catalyst 10.37.0 → 11.0.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/dist/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/catalyst.esm.js.map +1 -1
- package/dist/catalyst/p-59e2ada2.entry.js +10 -0
- package/dist/catalyst/p-59e2ada2.entry.js.map +1 -0
- package/dist/cjs/cat-alert_30.cjs.entry.js +290 -1801
- package/dist/cjs/cat-alert_30.cjs.entry.js.map +1 -1
- package/dist/cjs/catalyst.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/cat-alert/cat-alert.js +1 -1
- package/dist/collection/components/cat-badge/cat-badge.js +1 -1
- package/dist/collection/components/cat-button-group/cat-button-group.js +1 -1
- package/dist/collection/components/cat-card/cat-card.js +1 -1
- package/dist/collection/components/cat-checkbox/cat-checkbox.js +2 -2
- package/dist/collection/components/cat-date/cat-date.js +10 -5
- package/dist/collection/components/cat-date/cat-date.js.map +1 -1
- package/dist/collection/components/cat-date-inline/cat-date-inline.js +4 -4
- package/dist/collection/components/cat-dropdown/cat-dropdown.css +5 -0
- package/dist/collection/components/cat-dropdown/cat-dropdown.js +24 -23
- package/dist/collection/components/cat-dropdown/cat-dropdown.js.map +1 -1
- package/dist/collection/components/cat-dropdown/cat-dropdown.spec.js +1 -0
- package/dist/collection/components/cat-dropdown/cat-dropdown.spec.js.map +1 -1
- package/dist/collection/components/cat-input/cat-input.js +58 -43
- package/dist/collection/components/cat-input/cat-input.js.map +1 -1
- package/dist/collection/components/cat-select/cat-select.js +4 -4
- package/dist/collection/components/cat-time/cat-time-locale.js.map +1 -1
- package/dist/collection/components/cat-time/cat-time.js +3 -9
- package/dist/collection/components/cat-time/cat-time.js.map +1 -1
- package/dist/collection/components/cat-tooltip/cat-tooltip.js +2 -2
- package/dist/collection/index.js.map +1 -1
- package/dist/collection/utils/first-tabbable-with-visibility-hidden.js +49 -0
- package/dist/collection/utils/first-tabbable-with-visibility-hidden.js.map +1 -0
- package/dist/components/cat-alert.js +1 -1
- package/dist/components/cat-badge.js +1 -1
- package/dist/components/cat-button-group.js +1 -1
- package/dist/components/cat-card.js +1 -1
- package/dist/components/cat-checkbox2.js +2 -2
- package/dist/components/cat-date-inline2.js +4 -4
- package/dist/components/cat-date.js +6 -5
- package/dist/components/cat-date.js.map +1 -1
- package/dist/components/cat-dropdown2.js +75 -27
- package/dist/components/cat-dropdown2.js.map +1 -1
- package/dist/components/cat-input2.js +19 -1571
- package/dist/components/cat-input2.js.map +1 -1
- package/dist/components/cat-select2.js +4 -4
- package/dist/components/cat-time.js +3 -9
- package/dist/components/cat-time.js.map +1 -1
- package/dist/components/cat-tooltip.js +2 -2
- package/dist/esm/cat-alert_30.entry.js +292 -1803
- package/dist/esm/cat-alert_30.entry.js.map +1 -1
- package/dist/esm/catalyst.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cat-date/cat-date.d.ts +2 -0
- package/dist/types/components/cat-dropdown/cat-dropdown.d.ts +1 -1
- package/dist/types/components/cat-input/cat-input.d.ts +22 -7
- package/dist/types/components/cat-time/cat-time-locale.d.ts +4 -3
- package/dist/types/components/cat-time/cat-time.d.ts +1 -1
- package/dist/types/components.d.ts +18 -7
- package/dist/types/index.d.ts +1 -0
- package/dist/types/utils/first-tabbable-with-visibility-hidden.d.ts +2 -0
- package/package.json +3 -4
- package/dist/catalyst/p-3a3e9083.entry.js +0 -10
- package/dist/catalyst/p-3a3e9083.entry.js.map +0 -1
|
@@ -823,7 +823,7 @@ const CatAlert = class {
|
|
|
823
823
|
setAttributeDefault(this, 'role', this.mapRole.get(this.color));
|
|
824
824
|
}
|
|
825
825
|
render() {
|
|
826
|
-
return (index.h(index.Host, { key: '
|
|
826
|
+
return (index.h(index.Host, { key: '5cda6d92f1cf40029c2a93723999ed9e8c44baac' }, !this.noIcon && index.h("cat-icon", { key: '69124d111b0a62932bbd761b6cbd1dc4ab155670', size: "l", icon: this.icon || this.mapIcon.get(this.color) }), index.h("div", { key: '22f6070cefa6ef5036e8b9e1ec7dcad357a69462', class: "content" }, index.h("slot", { key: 'e86f500e97dd688b986aa90af5db0f94819407e4' }))));
|
|
827
827
|
}
|
|
828
828
|
get hostElement() { return index.getElement(this); }
|
|
829
829
|
};
|
|
@@ -1084,7 +1084,7 @@ const CatBadge = class {
|
|
|
1084
1084
|
}
|
|
1085
1085
|
}
|
|
1086
1086
|
render() {
|
|
1087
|
-
return (index.h(index.Host, { key: '
|
|
1087
|
+
return (index.h(index.Host, { key: '61ec6bb61ee078254f1fc4277c4b5608d055acde', "data-icon-badge": this.isIconBadge ? this.size : null }, this.hasPrefixIcon ? index.h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null, this.isIconBadge ? (index.h("cat-icon", { icon: this.icon, size: this.iconSize, class: "icon-only" })) : (index.h("slot", null)), this.hasSuffixIcon ? index.h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null));
|
|
1088
1088
|
}
|
|
1089
1089
|
get hostElement() { return index.getElement(this); }
|
|
1090
1090
|
static get watchers() { return {
|
|
@@ -1296,7 +1296,7 @@ const CatButtonGroup = class {
|
|
|
1296
1296
|
this.a11yLabel = undefined;
|
|
1297
1297
|
}
|
|
1298
1298
|
render() {
|
|
1299
|
-
return (index.h(index.Host, { key: '
|
|
1299
|
+
return (index.h(index.Host, { key: '3d43547333f73560d31ca96bdba2d2b8b9976dbd', role: "group", "aria-label": this.a11yLabel }, index.h("slot", { key: 'd329ea90250b161862361e907427920e8866445a', onSlotchange: this.onSlotChange.bind(this) })));
|
|
1300
1300
|
}
|
|
1301
1301
|
onSlotChange() {
|
|
1302
1302
|
this.buttonElements = Array.from(this.hostElement.querySelectorAll(':scope > cat-button, :scope > cat-tooltip > cat-button, :scope > cat-dropdown cat-button[slot="trigger"]'));
|
|
@@ -1318,7 +1318,7 @@ const CatCard = class {
|
|
|
1318
1318
|
this.catLoad = index.createEvent(this, "catLoad", 7);
|
|
1319
1319
|
}
|
|
1320
1320
|
render() {
|
|
1321
|
-
return index.h("slot", { key: '
|
|
1321
|
+
return index.h("slot", { key: '6617daf8e8f9c7e854f287c49c23d4985588fc79' });
|
|
1322
1322
|
}
|
|
1323
1323
|
componentDidLoad() {
|
|
1324
1324
|
this.catLoad.emit();
|
|
@@ -1411,13 +1411,13 @@ const CatCheckbox = class {
|
|
|
1411
1411
|
this.input.blur();
|
|
1412
1412
|
}
|
|
1413
1413
|
render() {
|
|
1414
|
-
return (index.h(index.Host, { key: '
|
|
1414
|
+
return (index.h(index.Host, { key: '22986b5dd3edf4e197fad9e02e7725c80e5f9bc5' }, index.h("label", { key: '531252b51952b5731b4038f6ddf77a56b2ce4b4b', htmlFor: this.id, class: {
|
|
1415
1415
|
'is-hidden': this.labelHidden,
|
|
1416
1416
|
'is-disabled': this.disabled,
|
|
1417
1417
|
'label-left': this.labelLeft,
|
|
1418
1418
|
'align-center': this.alignment === 'center',
|
|
1419
1419
|
'align-end': this.alignment === 'bottom'
|
|
1420
|
-
} }, index.h("input", { key: '
|
|
1420
|
+
} }, index.h("input", { key: '26e8943be3be357a3fdc921c36d12d0f4b7aa32a', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), index.h("span", { key: '4ec18b92e0d09f2f17ed7f9a5444efb4448d2bcf', class: "box", "aria-hidden": "true" }, index.h("svg", { key: '8e0f01f6326c0f39d0d1fece1a68eb51907194ea', class: "check", viewBox: "0 0 12 10" }, index.h("polyline", { key: '4c43fcff56b492108820b0f657063d80cf478284', points: "1.5 6 4.5 9 10.5 1" })), index.h("svg", { key: 'b251c0afcef5841ed7c4e9bfd7a57c783109f897', class: "dash", viewBox: "0 0 12 10" }, index.h("polyline", { key: 'e44721268266f5e97884678da809d47fe6375bac', points: "1.5 5 10.5 5" }))), index.h("span", { key: '1ae79389911efaaeac38068a97f246666d259f0b', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: 'b07515a03f8231ce37e8718a0416e77ef59bca5a', name: "label" })) || this.label, index.h("span", { key: 'c301bc1625f34f3161387f9ef06b9710f533f2cd', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'f2aa2b0ca452521dfe567d9014bbfc4f39239cf3', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '8810b908cfe30c9d4f66a5f10d15010d8a6e4a29', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (index.h("div", { key: 'a095e831cbd4a8ed9c6b490205607c2188c9405a', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: '9a3ad1814b1b14e57be99d3f09992813c07cb594', class: "box-placeholder" }), index.h(CatFormHint, { key: '0b4f2f7adb5c45f7e25ad6f29fa83036ec5a2cf7', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
|
|
1421
1421
|
}
|
|
1422
1422
|
get hasHint() {
|
|
1423
1423
|
return !!this.hint || !!this.hasSlottedHint;
|
|
@@ -1554,6 +1554,7 @@ const CatDate = class {
|
|
|
1554
1554
|
this.language = of.catI18nRegistry.getLocale();
|
|
1555
1555
|
this.locale = getLocale$2(this.language);
|
|
1556
1556
|
this.inputFocused = false;
|
|
1557
|
+
this.dateMaskOptions = undefined;
|
|
1557
1558
|
this.requiredMarker = 'optional';
|
|
1558
1559
|
this.horizontal = false;
|
|
1559
1560
|
this.autoComplete = 'off';
|
|
@@ -1602,13 +1603,12 @@ const CatDate = class {
|
|
|
1602
1603
|
componentDidLoad() {
|
|
1603
1604
|
const format = this.locale.formatStr.replace('YYYY', 'Y').replace('YY', 'y').replace('MM', 'm').replace('DD', 'd');
|
|
1604
1605
|
const [, p1, d1, p2, p3] = /(\w+)([^\w]+)(\w+)[^\w]+(\w+)/.exec(format) || [];
|
|
1605
|
-
this.
|
|
1606
|
-
date: true,
|
|
1606
|
+
this.dateMaskOptions = {
|
|
1607
1607
|
dateMin: this.min,
|
|
1608
1608
|
dateMax: this.max,
|
|
1609
1609
|
delimiter: d1,
|
|
1610
1610
|
datePattern: [p1, p2, p3]
|
|
1611
|
-
}
|
|
1611
|
+
};
|
|
1612
1612
|
}
|
|
1613
1613
|
/**
|
|
1614
1614
|
* Programmatically move focus to the input. Use this method instead of
|
|
@@ -1635,14 +1635,14 @@ const CatDate = class {
|
|
|
1635
1635
|
}
|
|
1636
1636
|
render() {
|
|
1637
1637
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
1638
|
-
return (index.h(index.Host, { key: '
|
|
1638
|
+
return (index.h(index.Host, { key: '446b89d959955840787f93b304c60c14610f19a3' }, index.h("cat-input", { key: 'd1a7ac9cac5bbfaf53ad06c7604503658a378bdd', class: "cat-date-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, errors: this.errors, errorUpdate: this.errorUpdate, testId: this.testId, nativeAttributes: this.nativeAttributes, value: this.inputValue, dateMaskOptions: this.dateMaskOptions, onCatFocus: e => {
|
|
1639
1639
|
this.inputFocused = e.target === this.input;
|
|
1640
1640
|
e.stopPropagation();
|
|
1641
1641
|
this.catFocus.emit(e.detail);
|
|
1642
1642
|
}, onCatBlur: e => {
|
|
1643
1643
|
e.stopPropagation();
|
|
1644
1644
|
this.onInputBlur(e.detail);
|
|
1645
|
-
} }, index.h("span", { key: '
|
|
1645
|
+
} }, index.h("span", { key: '04cf706a258dd0a8f45bbd938ac9cd0feb663044', slot: "label" }, this.label, index.h("span", { key: '87cb203b21f42eca664a06bf0363158f577248a7', class: "label-aria" }, " (", this.locale.formatStr, ")")), index.h("cat-dropdown", { key: '7bfa57a6f2758e8299f49ce9d7d114368c088084', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, index.h("cat-button", { key: 'e5fce006dccc245f98800c21adbe00354813f008', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), index.h("div", { key: '20896aaf3e536510c0c8ca1e354989ab9afc42e0', slot: "content" }, index.h("cat-date-inline", { key: '6b3d8c5cdf01af45926ef3593d72a6625bb022cb', ref: el => (this.dateInline = el), min: this.min, max: this.max, value: this.value, hint: true, weeks: true, noClear: true, onCatChange: this.onDateChange.bind(this) }))))));
|
|
1646
1646
|
}
|
|
1647
1647
|
getTriggerA11yLabel() {
|
|
1648
1648
|
const date = this.locale.fromLocalISO(this.value);
|
|
@@ -2445,12 +2445,12 @@ const CatDateInline = class {
|
|
|
2445
2445
|
const [minDate, maxDate] = this.getMinMaxDate();
|
|
2446
2446
|
const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
|
|
2447
2447
|
const [dateStart, dateEnd] = this.getValue();
|
|
2448
|
-
return (index.h(index.Host, { key: '
|
|
2448
|
+
return (index.h(index.Host, { key: 'f99536926cfa6b5cebaeee0234ef393cae7c6290', "aria-label": this.label || undefined }, index.h("div", { key: '75d8cc40adf407d30bb2346a76f0d88b4a3d7c6a', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '038b0c612f7fad742371cbcc42367a9539dd75eb', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, index.h("span", { key: 'b5d55a662eebaa50c49a8c653e2659b256b65529', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '73f85529636703818e31875059d90b334ae41f80', name: "label" })) || this.label, index.h("div", { key: '9f1fabf18e18a8e5ef10c0b67fc7750555769d44', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '9aeec8774b56f6216d7dc56c08a4ac300fe11c67', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '5e18a94063b8ae0844afeb3cb4ca71d14882f9e6', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: 'edecc4cf058717971710ee35b87a132b9906f5ec', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, index.h("div", { key: '3bd9c5313671337674b07eb35c1af4e6127a3ce2', class: "picker-head" }, index.h("cat-button", { key: '807e707e95bf1861952b4d53dae86ba33a9fabbe', icon: "$cat:datepicker-year-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevYear, disabled: isSameYear(this.viewDate, minDate), onClick: () => this.navigate('prev', 'year'), "data-dropdown-no-close": true }), index.h("cat-button", { key: 'cae8a861478e370cb56a2a0b0e9e03b736fd536e', icon: "$cat:datepicker-month-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevMonth, disabled: isSameMonth(this.viewDate, minDate), onClick: () => this.navigate('prev', 'month'), "data-dropdown-no-close": true }), index.h("h3", { key: '4e6d8580663bb496dffe13c8f03806f15003073d' }, this.getHeadline()), index.h("cat-button", { key: 'ba0ee1f437b48067599148c526d6d843232640a6', icon: "$cat:datepicker-month-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextMonth, disabled: isSameMonth(this.viewDate, maxDate), onClick: () => this.navigate('next', 'month'), "data-dropdown-no-close": true }), index.h("cat-button", { key: '15359d6e6a498f633ec5d8a47b5fc317a3fe1fa3', icon: "$cat:datepicker-year-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextYear, disabled: isSameYear(this.viewDate, maxDate), onClick: () => this.navigate('next', 'year'), "data-dropdown-no-close": true })), index.h("div", { key: '9376764766e77ed75c78403f90c6cd2f45b609ea', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, index.h("div", { key: 'c4411952bf4fd12f6b14dd2d235e220eef1e0280', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
|
|
2449
2449
|
const day = (i + this.locale.weekInfo.firstDay) % 7;
|
|
2450
2450
|
return index.h("abbr", { title: this.locale.days.long[day] }, this.locale.days.short[day]);
|
|
2451
|
-
})), this.weeks && (index.h("div", { key: '
|
|
2451
|
+
})), this.weeks && (index.h("div", { key: 'f076b226855bb73f817c534e34cb021fb6d48a08', class: "picker-grid-weeks" }, dateGrid
|
|
2452
2452
|
.filter((_, i) => i % 7 === 0)
|
|
2453
|
-
.map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: '
|
|
2453
|
+
.map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: '48d757568b3d8640960caadf95f297cfe1f857ee', class: "picker-grid-days" }, dateGrid.map(day => {
|
|
2454
2454
|
const isStartDate = isSameDay(dateStart, day);
|
|
2455
2455
|
const isEndDate = isSameDay(dateEnd, day);
|
|
2456
2456
|
const isRange = !!dateStart && !!dateEnd && day > dateStart && day < dateEnd;
|
|
@@ -2467,7 +2467,7 @@ const CatDateInline = class {
|
|
|
2467
2467
|
'date-focusable': this.canFocus(day),
|
|
2468
2468
|
'date-disabled': !this.canClick(day)
|
|
2469
2469
|
}, nativeAttributes: !this.canFocus(day) ? { tabindex: '-1' } : {}, variant: isStartDate || isEndDate ? 'filled' : isToday ? 'outlined' : 'text', a11yLabel: this.locale.toLocalStr(day), active: isStartDate || isEndDate || isRange, color: isStartDate || isEndDate || isToday ? 'primary' : 'secondary', disabled: !this.canClick(day), onClick: () => this.select(day), "data-date": this.locale.toLocalISO(day) }, day.getDate()));
|
|
2470
|
-
}))), index.h("div", { key: '
|
|
2470
|
+
}))), index.h("div", { key: 'b8df8f56cd18a70f241ad50a9309548355cd6437', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (index.h("cat-button", { key: '19b88e876f7770e6bd97134bccae479198e87992', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && index.h("p", { key: 'eb3a49013b64b0787b8c318e6a274900d95cf4f5', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (index.h("cat-button", { key: '203a7eec0e8719d4a78f1222426049213f787ba7', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), index.h("p", { key: '75736aa7b9f8636432a116f82cb886fd0c99393f', class: "cursor-aria", "aria-live": "polite" })));
|
|
2471
2471
|
}
|
|
2472
2472
|
focus(date, focus = true) {
|
|
2473
2473
|
const [minDate, maxDate] = this.getMinMaxDate();
|
|
@@ -8671,7 +8671,55 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
|
|
|
8671
8671
|
return trap;
|
|
8672
8672
|
};
|
|
8673
8673
|
|
|
8674
|
-
const
|
|
8674
|
+
const focusableSelectors = [
|
|
8675
|
+
'input',
|
|
8676
|
+
'select',
|
|
8677
|
+
'textarea',
|
|
8678
|
+
'button',
|
|
8679
|
+
'a[href]',
|
|
8680
|
+
'[tabindex]',
|
|
8681
|
+
'iframe',
|
|
8682
|
+
'[contenteditable]',
|
|
8683
|
+
'audio[controls]',
|
|
8684
|
+
'video[controls]'
|
|
8685
|
+
];
|
|
8686
|
+
const findFirstTabbableIncludeHidden = (element) => {
|
|
8687
|
+
if (element instanceof HTMLElement) {
|
|
8688
|
+
const potentiallyTabbableElement = getPotentiallyTabbable(element);
|
|
8689
|
+
if (potentiallyTabbableElement) {
|
|
8690
|
+
return potentiallyTabbableElement;
|
|
8691
|
+
}
|
|
8692
|
+
}
|
|
8693
|
+
const children = Array.from(element.querySelectorAll('*'));
|
|
8694
|
+
for (const child of children) {
|
|
8695
|
+
const potentiallyTabbableElement = getPotentiallyTabbable(child);
|
|
8696
|
+
if (potentiallyTabbableElement) {
|
|
8697
|
+
return potentiallyTabbableElement;
|
|
8698
|
+
}
|
|
8699
|
+
}
|
|
8700
|
+
return undefined;
|
|
8701
|
+
};
|
|
8702
|
+
function couldBeTabbable(value) {
|
|
8703
|
+
if (!value.matches(focusableSelectors.join(','))) {
|
|
8704
|
+
return false;
|
|
8705
|
+
}
|
|
8706
|
+
const tabindex = value.getAttribute('tabindex');
|
|
8707
|
+
return tabindex === null || Number(tabindex) >= 0;
|
|
8708
|
+
}
|
|
8709
|
+
function getPotentiallyTabbable(element) {
|
|
8710
|
+
if (couldBeTabbable(element)) {
|
|
8711
|
+
return element;
|
|
8712
|
+
}
|
|
8713
|
+
if (element.shadowRoot) {
|
|
8714
|
+
const shadowTabbable = findFirstTabbableIncludeHidden(element.shadowRoot);
|
|
8715
|
+
if (shadowTabbable) {
|
|
8716
|
+
return shadowTabbable;
|
|
8717
|
+
}
|
|
8718
|
+
}
|
|
8719
|
+
return undefined;
|
|
8720
|
+
}
|
|
8721
|
+
|
|
8722
|
+
const catDropdownCss = ":host{display:contents}:host([hidden]){display:none}::slotted(nav){padding:0.25rem}.aligned ::slotted(nav){min-width:8rem;max-width:16rem}.justified ::slotted(nav){width:100%}.content{position:fixed;background:white;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);border:1px solid rgb(var(--cat-border-color, 235, 236, 240));z-index:calc(var(--cat-z-index, 1000) + 100);display:none;opacity:0;transform:scale(0.9);transition:transform 125ms cubic-bezier(0.3, 0, 0.8, 0.15), opacity 125ms cubic-bezier(0.3, 0, 0.8, 0.15)}.content[data-placement^=top]{transform-origin:bottom}.content[data-placement^=top-start]{transform-origin:bottom left}.content[data-placement^=top-end]{transform-origin:bottom right}.content[data-placement^=left]{transform-origin:right}.content[data-placement^=left-start]{transform-origin:right top}.content[data-placement^=left-end]{transform-origin:right bottom}.content[data-placement^=right]{transform-origin:left}.content[data-placement^=right-start]{transform-origin:left top}.content[data-placement^=right-end]{transform-origin:left bottom}.content[data-placement^=bottom]{transform-origin:top}.content[data-placement^=bottom-start]{transform-origin:top left}.content[data-placement^=bottom-end]{transform-origin:top right}.content.show{opacity:1;transform:scale(1);transition:transform 250ms cubic-bezier(0.05, 0.7, 0.1, 1), opacity 250ms cubic-bezier(0.05, 0.7, 0.1, 1)}.content.overflow-auto{overflow:auto}";
|
|
8675
8723
|
const CatDropdownStyle0 = catDropdownCss;
|
|
8676
8724
|
|
|
8677
8725
|
let nextUniqueId$8 = 0;
|
|
@@ -8698,14 +8746,6 @@ const CatDropdown = class {
|
|
|
8698
8746
|
this.noReturnFocus = false;
|
|
8699
8747
|
}
|
|
8700
8748
|
clickHandler(event) {
|
|
8701
|
-
// we need to delay the initialization of the trigger until first
|
|
8702
|
-
// interaction because the element might still be hidden (and thus not
|
|
8703
|
-
// tabbable) if contained in another Stencil web component
|
|
8704
|
-
if (!this.trigger) {
|
|
8705
|
-
this.hasInitialFocus = this.isEventOriginFromKeyboard(event.detail);
|
|
8706
|
-
this.initTrigger();
|
|
8707
|
-
this.toggle();
|
|
8708
|
-
}
|
|
8709
8749
|
// hide dropdown on button clicks inside the dropdown content
|
|
8710
8750
|
const path = event.composedPath();
|
|
8711
8751
|
if (!this.noAutoClose &&
|
|
@@ -8729,12 +8769,6 @@ const CatDropdown = class {
|
|
|
8729
8769
|
* @param isFocusVisible is dropdown should receive visible focus when it's opened.
|
|
8730
8770
|
*/
|
|
8731
8771
|
async open(isFocusVisible) {
|
|
8732
|
-
// we need to delay the initialization of the trigger until first
|
|
8733
|
-
// interaction because the element might still be hidden (and thus not
|
|
8734
|
-
// tabbable) if contained in another Stencil web component
|
|
8735
|
-
if (!this.trigger) {
|
|
8736
|
-
this.initTrigger();
|
|
8737
|
-
}
|
|
8738
8772
|
if (this.isOpen === null || this.isOpen) {
|
|
8739
8773
|
return; // busy or open
|
|
8740
8774
|
}
|
|
@@ -8803,11 +8837,12 @@ const CatDropdown = class {
|
|
|
8803
8837
|
this.catClose.emit();
|
|
8804
8838
|
}, timeTransitionS);
|
|
8805
8839
|
}
|
|
8806
|
-
render() {
|
|
8807
|
-
return (index.h(index.Host, { key: 'abd5eb8eb84977f0981113b3f7958ec2a31a47bb' }, index.h("slot", { key: '6049c92c9b30e3fba338fb94d17543476620fe37', name: "anchor", ref: el => (this.anchorSlot = el) }), index.h("slot", { key: '6eb5f52f222ad08b4a7f0d41d4ace943b371a6b7', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: 'e186f63a79fcc457bee344ee188fef37f2c27383', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, index.h("slot", { key: 'c0060ac95085f3794f61fd88922368c59a31b1b7', name: "content" }))));
|
|
8808
|
-
}
|
|
8809
8840
|
componentDidLoad() {
|
|
8810
8841
|
this.initAnchor();
|
|
8842
|
+
this.initTrigger();
|
|
8843
|
+
}
|
|
8844
|
+
render() {
|
|
8845
|
+
return (index.h(index.Host, { key: '05019873f2b9ae46bfbe4c34c1c9b7349dddeb92' }, index.h("slot", { key: '0760052c1d65818b5a4f8c8bf8dc587da27ec5b3', name: "anchor", ref: el => (this.anchorSlot = el) }), index.h("slot", { key: '1ab727c6bc362c9a0d233fd1c0d3db76e04b2f1c', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: '02c216317f4140217578020d83fb853194993d96', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, index.h("slot", { key: '8c31f2d7b16bbdfdc528938b5dd09fa84eeb80c3', name: "content" }))));
|
|
8811
8846
|
}
|
|
8812
8847
|
get contentId() {
|
|
8813
8848
|
return `cat-dropdown-${this.id}`;
|
|
@@ -8837,7 +8872,7 @@ const CatDropdown = class {
|
|
|
8837
8872
|
}
|
|
8838
8873
|
findTrigger() {
|
|
8839
8874
|
let trigger;
|
|
8840
|
-
|
|
8875
|
+
let elems = this.triggerSlot?.assignedElements?.() || [];
|
|
8841
8876
|
while (!trigger && elems.length) {
|
|
8842
8877
|
const elem = elems.shift();
|
|
8843
8878
|
trigger = elem?.hasAttribute('data-trigger')
|
|
@@ -8847,6 +8882,15 @@ const CatDropdown = class {
|
|
|
8847
8882
|
if (!trigger) {
|
|
8848
8883
|
trigger = firstTabbable(this.triggerSlot);
|
|
8849
8884
|
}
|
|
8885
|
+
// if no tabbable element is still found let's attempt to search through elements with visibility:hidden styles
|
|
8886
|
+
// which stencil assigns to component in prehydration state
|
|
8887
|
+
if (!trigger) {
|
|
8888
|
+
elems = this.triggerSlot?.assignedElements?.() || [];
|
|
8889
|
+
while (!trigger && elems.length) {
|
|
8890
|
+
const elem = elems.shift();
|
|
8891
|
+
trigger = findFirstTabbableIncludeHidden(elem);
|
|
8892
|
+
}
|
|
8893
|
+
}
|
|
8850
8894
|
if (!trigger) {
|
|
8851
8895
|
throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');
|
|
8852
8896
|
}
|
|
@@ -8862,13 +8906,17 @@ const CatDropdown = class {
|
|
|
8862
8906
|
apply({ rects, availableWidth, availableHeight, elements }) {
|
|
8863
8907
|
if (justify) {
|
|
8864
8908
|
Object.assign(elements.floating.style, {
|
|
8865
|
-
minWidth: `${rects.reference.width}px
|
|
8909
|
+
minWidth: `${rects.reference.width}px`,
|
|
8910
|
+
maxWidth: `${rects.reference.width}px`,
|
|
8911
|
+
maxHeight: `${availableHeight}px`
|
|
8912
|
+
});
|
|
8913
|
+
}
|
|
8914
|
+
else {
|
|
8915
|
+
Object.assign(elements.floating.style, {
|
|
8916
|
+
maxWidth: `${availableWidth}px`,
|
|
8917
|
+
maxHeight: `${availableHeight}px`
|
|
8866
8918
|
});
|
|
8867
8919
|
}
|
|
8868
|
-
Object.assign(elements.floating.style, {
|
|
8869
|
-
maxWidth: `${availableWidth}px`,
|
|
8870
|
-
maxHeight: `${availableHeight}px`
|
|
8871
|
-
});
|
|
8872
8920
|
}
|
|
8873
8921
|
})
|
|
8874
8922
|
];
|
|
@@ -8953,1767 +9001,214 @@ const CatIcon = class {
|
|
|
8953
9001
|
};
|
|
8954
9002
|
CatIcon.style = CatIconStyle0;
|
|
8955
9003
|
|
|
8956
|
-
|
|
8957
|
-
|
|
8958
|
-
|
|
8959
|
-
|
|
8960
|
-
|
|
8961
|
-
|
|
8962
|
-
|
|
8963
|
-
|
|
8964
|
-
|
|
8965
|
-
|
|
8966
|
-
tailPrefix,
|
|
8967
|
-
delimiter) {
|
|
8968
|
-
var owner = this;
|
|
8969
|
-
|
|
8970
|
-
owner.numeralDecimalMark = numeralDecimalMark || '.';
|
|
8971
|
-
owner.numeralIntegerScale = numeralIntegerScale > 0 ? numeralIntegerScale : 0;
|
|
8972
|
-
owner.numeralDecimalScale = numeralDecimalScale >= 0 ? numeralDecimalScale : 2;
|
|
8973
|
-
owner.numeralThousandsGroupStyle = numeralThousandsGroupStyle || NumeralFormatter.groupStyle.thousand;
|
|
8974
|
-
owner.numeralPositiveOnly = !!numeralPositiveOnly;
|
|
8975
|
-
owner.stripLeadingZeroes = stripLeadingZeroes !== false;
|
|
8976
|
-
owner.prefix = (prefix || prefix === '') ? prefix : '';
|
|
8977
|
-
owner.signBeforePrefix = !!signBeforePrefix;
|
|
8978
|
-
owner.tailPrefix = !!tailPrefix;
|
|
8979
|
-
owner.delimiter = (delimiter || delimiter === '') ? delimiter : ',';
|
|
8980
|
-
owner.delimiterRE = delimiter ? new RegExp('\\' + delimiter, 'g') : '';
|
|
8981
|
-
};
|
|
8982
|
-
|
|
8983
|
-
NumeralFormatter.groupStyle = {
|
|
8984
|
-
thousand: 'thousand',
|
|
8985
|
-
lakh: 'lakh',
|
|
8986
|
-
wan: 'wan',
|
|
8987
|
-
none: 'none'
|
|
8988
|
-
};
|
|
8989
|
-
|
|
8990
|
-
NumeralFormatter.prototype = {
|
|
8991
|
-
getRawValue: function (value) {
|
|
8992
|
-
return value.replace(this.delimiterRE, '').replace(this.numeralDecimalMark, '.');
|
|
8993
|
-
},
|
|
8994
|
-
|
|
8995
|
-
format: function (value) {
|
|
8996
|
-
var owner = this, parts, partSign, partSignAndPrefix, partInteger, partDecimal = '';
|
|
8997
|
-
|
|
8998
|
-
// strip alphabet letters
|
|
8999
|
-
value = value.replace(/[A-Za-z]/g, '')
|
|
9000
|
-
// replace the first decimal mark with reserved placeholder
|
|
9001
|
-
.replace(owner.numeralDecimalMark, 'M')
|
|
9002
|
-
|
|
9003
|
-
// strip non numeric letters except minus and "M"
|
|
9004
|
-
// this is to ensure prefix has been stripped
|
|
9005
|
-
.replace(/[^\dM-]/g, '')
|
|
9006
|
-
|
|
9007
|
-
// replace the leading minus with reserved placeholder
|
|
9008
|
-
.replace(/^\-/, 'N')
|
|
9009
|
-
|
|
9010
|
-
// strip the other minus sign (if present)
|
|
9011
|
-
.replace(/\-/g, '')
|
|
9004
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
9005
|
+
function coerceBoolean(value) {
|
|
9006
|
+
return value != null && `${value}` !== 'false';
|
|
9007
|
+
}
|
|
9008
|
+
function coerceNumber(value, fallbackValue = 0) {
|
|
9009
|
+
return isNumberValue(value) ? Number(value) : fallbackValue;
|
|
9010
|
+
}
|
|
9011
|
+
function isNumberValue(value) {
|
|
9012
|
+
return !isNaN(parseFloat(value)) && !isNaN(Number(value));
|
|
9013
|
+
}
|
|
9012
9014
|
|
|
9013
|
-
|
|
9014
|
-
.replace('N', owner.numeralPositiveOnly ? '' : '-')
|
|
9015
|
+
var e$1,r$1,t$1,i=function(e){return e.replace(/[^\d]/g,"")},n$1=function(e){return e.reduce(function(e,r){return e+r},0)},a=function(e,r){return e.slice(0,r)},l=function(e){var r=e.value;return e.delimiters.forEach(function(e){e.split("").forEach(function(e){r=r.replace(new RegExp(e.replace(/([.?*+^$[\]\\(){}|-])/g,"\\$1"),"g"),"");});}),r},u=function(e){var r=e.blocks,t=e.delimiter,i=void 0===t?"":t,n=e.delimiters,a=void 0===n?[]:n,l=e.delimiterLazyShow,u=void 0!==l&&l,c="",s=e.value,o="";return r.forEach(function(e,t){if(s.length>0){var n,l=s.slice(0,e),d=s.slice(e);o=a.length>0?null!=(n=a[u?t-1:t])?n:o:i,u?(t>0&&(c+=o),c+=l):(c+=l,l.length===e&&t<r.length-1&&(c+=o)),s=d;}}),c};!function(e){e.UATP="uatp",e.AMEX="amex",e.DINERS="diners",e.DISCOVER="discover",e.MASTERCARD="mastercard",e.DANKORT="dankort",e.INSTAPAYMENT="instapayment",e.JCB15="jcb15",e.JCB="jcb",e.MAESTRO="maestro",e.VISA="visa",e.MIR="mir",e.UNIONPAY="unionpay",e.GENERAL="general";}(t$1||(t$1={}));var v;((e$1={})[t$1.UATP]=[4,5,6],e$1[t$1.AMEX]=[4,6,5],e$1[t$1.DINERS]=[4,6,4],e$1[t$1.DISCOVER]=[4,4,4,4],e$1[t$1.MASTERCARD]=[4,4,4,4],e$1[t$1.DANKORT]=[4,4,4,4],e$1[t$1.INSTAPAYMENT]=[4,4,4,4],e$1[t$1.JCB15]=[4,6,5],e$1[t$1.JCB]=[4,4,4,4],e$1[t$1.MAESTRO]=[4,4,4,4],e$1[t$1.VISA]=[4,4,4,4],e$1[t$1.MIR]=[4,4,4,4],e$1[t$1.UNIONPAY]=[4,4,4,4],e$1[t$1.GENERAL]=[4,4,4,4],e$1);((r$1={})[t$1.UATP]=/^(?!1800)1\d{0,14}/,r$1[t$1.AMEX]=/^3[47]\d{0,13}/,r$1[t$1.DISCOVER]=/^(?:6011|65\d{0,2}|64[4-9]\d?)\d{0,12}/,r$1[t$1.DINERS]=/^3(?:0([0-5]|9)|[689]\d?)\d{0,11}/,r$1[t$1.MASTERCARD]=/^(5[1-5]\d{0,2}|22[2-9]\d{0,1}|2[3-7]\d{0,2})\d{0,12}/,r$1[t$1.DANKORT]=/^(5019|4175|4571)\d{0,12}/,r$1[t$1.INSTAPAYMENT]=/^63[7-9]\d{0,13}/,r$1[t$1.JCB15]=/^(?:2131|1800)\d{0,11}/,r$1[t$1.JCB]=/^(?:35\d{0,2})\d{0,12}/,r$1[t$1.MAESTRO]=/^(?:5[0678]\d{0,2}|6304|67\d{0,2})\d{0,12}/,r$1[t$1.MIR]=/^220[0-4]\d{0,12}/,r$1[t$1.VISA]=/^4\d{0,15}/,r$1[t$1.UNIONPAY]=/^(62|81)\d{0,14}/,r$1);!function(e){e.THOUSAND="thousand",e.LAKH="lakh",e.WAN="wan",e.NONE="none";}(v||(v={}));var k=["d","m","Y"],C=function(e,r){return r?(e<10?"000":e<100?"00":e<1e3?"0":"")+e:(e<10?"0":"")+e},L=function(e){return (e<10?"0":"")+e},P=function(e,r,t){var i;return e=Math.min(e,31),t=null!=(i=t)?i:0,((r=Math.min(r,12))<7&&r%2==0||r>8&&r%2==1)&&(e=Math.min(e,2===r?function(e){return e%4==0&&e%100!=0||e%400==0}(t)?29:28:30)),[e,r,t]},y=function(e,r){var t=null!=r?r:{},c=t.delimiterLazyShow,s=void 0!==c&&c,o=t.delimiter,d=void 0===o?"/":o,v=t.datePattern,m=void 0===v?k:v,f=t.dateMax,p=void 0===f?"":f,h=t.dateMin,E=void 0===h?"":h;e=i(e);var g=function(e){var r=[];return e.forEach(function(e){r.push("Y"===e?4:2);}),r}(m),I=function(e){var r=e.dateMax,t=e.dateMin.split("-").reverse().map(function(e){return parseInt(e,10)});2===t.length&&t.unshift(0);var i=r.split("-").reverse().map(function(e){return parseInt(e,10)});return 2===i.length&&i.unshift(0),{min:t,max:i}}({dateMax:p,dateMin:E});e=function(e){var r=e.value,t=void 0===r?"":r,i=e.blocks,n=e.datePattern,a=e.min,l=e.max,u="";return (void 0===i?[]:i).forEach(function(e,r){if(t.length>0){var i=t.slice(0,e),a=i.slice(0,1),l=t.slice(e);switch(n[r]){case"d":"00"===i?i="01":parseInt(a,10)>3?i="0"+a:parseInt(i,10)>31&&(i="31");break;case"m":"00"===i?i="01":parseInt(a,10)>1?i="0"+a:parseInt(i,10)>12&&(i="12");}u+=i,t=l;}}),function(e){var r,t,i,n=e.value,a=void 0===n?"":n,l=e.datePattern,u=e.min,c=e.max,s=[],o=0,d=0,v=0,m=0,f=0,p=0,h=!1;return 4===a.length&&"y"!==l[0].toLowerCase()&&"y"!==l[1].toLowerCase()&&(f=2-(m="d"===l[0]?0:2),r=parseInt(a.slice(m,m+2),10),t=parseInt(a.slice(f,f+2),10),s=P(r,t,0)),8===a.length&&(l.forEach(function(e,r){switch(e){case"d":o=r;break;case"m":d=r;break;default:v=r;}}),p=2*v,m=o<=v?2*o:2*o+2,f=d<=v?2*d:2*d+2,r=parseInt(a.slice(m,m+2),10),t=parseInt(a.slice(f,f+2),10),i=parseInt(a.slice(p,p+4),10),h=4===a.slice(p,p+4).length,s=P(r,t,i)),4!==a.length||"y"!==l[0]&&"y"!==l[1]||(p=2-(f="m"===l[0]?0:2),t=parseInt(a.slice(f,f+2),10),i=parseInt(a.slice(p,p+2),10),h=2===a.slice(p,p+2).length,s=[0,t,i]),6!==a.length||"Y"!==l[0]&&"Y"!==l[1]||(p=2-.5*(f="m"===l[0]?0:4),t=parseInt(a.slice(f,f+2),10),i=parseInt(a.slice(p,p+4),10),h=4===a.slice(p,p+4).length,s=[0,t,i]),0===(s=function(e){var r=e.date,t=void 0===r?[]:r,i=e.min,n=e.max;return 0===t.length||i.length<3&&n.length<3||e.datePattern.filter(function(e){return "y"===e.toLowerCase()}).length>0&&0===t[2]?t:n.length>0&&(n[2]<t[2]||n[2]===t[2]&&(n[1]<t[1]||n[1]===t[1]&&n[0]<t[0]))?n:i.length>0&&(i[2]>t[2]||i[2]===t[2]&&(i[1]>t[1]||i[1]===t[1]&&i[0]>t[0]))?i:t}({date:s,datePattern:l,min:u,max:c})).length?a:l.reduce(function(e,r){switch(r){case"d":return e+(0===s[0]?"":L(s[0]));case"m":return e+(0===s[1]?"":L(s[1]));case"y":return e+(h?C(s[2],!1):"");case"Y":return e+(h?C(s[2],!0):"")}return e},"")}({value:u,datePattern:n,min:a,max:l})}({value:e,blocks:g,datePattern:m,min:I.min,max:I.max}),e=l({value:e,delimiters:[d]});var A=n$1(g);return e=a(e,A),u({value:e,blocks:g,delimiter:d,delimiterLazyShow:s})},R=["h","m","s"],T=function(e){return (e<10?"0":"")+e},b=function(e,r,t){return t=Math.min(t,60),r=Math.min(r,60),[e=Math.min(e,60),r,t]},w=function(e,r){var t=null!=r?r:{},c=t.delimiterLazyShow,s=void 0!==c&&c,o=t.delimiter,d=void 0===o?":":o,v=t.timePattern,m=void 0===v?R:v,f=t.timeFormat,p=void 0===f?"24":f;e=i(e);var h=function(e){var r=[];return e.forEach(function(){r.push(2);}),r}(m);e=function(e){var r=e.value,t=e.timePattern,i="",n="12"===e.timeFormat?{maxHourFirstDigit:1,maxHours:12,maxMinutesFirstDigit:5,maxMinutes:60}:{maxHourFirstDigit:2,maxHours:23,maxMinutesFirstDigit:5,maxMinutes:60};return e.blocks.forEach(function(e,a){if(r.length>0){var l=r.slice(0,e),u=l.slice(0,1),c=r.slice(e);switch(t[a]){case"h":parseInt(u,10)>n.maxHourFirstDigit?l="0"+u:parseInt(l,10)>n.maxHours&&(l=n.maxHours+"");break;case"m":case"s":parseInt(u,10)>n.maxMinutesFirstDigit?l="0"+u:parseInt(l,10)>n.maxMinutes&&(l=n.maxMinutes+"");}i+=l,r=c;}}),function(e){var r,t,i,n=e.value,a=e.timePattern,l=[],u=0,c=0,s=0,o=0,d=0,v=0;return 6===n.length&&(a.forEach(function(e,r){switch(e){case"s":u=2*r;break;case"m":c=2*r;break;case"h":s=2*r;}}),v=s,d=c,o=u,r=parseInt(n.slice(o,o+2),10),t=parseInt(n.slice(d,d+2),10),i=parseInt(n.slice(v,v+2),10),l=b(i,t,r)),4!==n.length||a.includes("s")||(a.forEach(function(e,r){switch(e){case"m":c=2*r;break;case"h":s=2*r;}}),v=s,d=c,r=0,t=parseInt(n.slice(d,d+2),10),i=parseInt(n.slice(v,v+2),10),l=b(i,t,r)),0===l.length?n:a.reduce(function(e,r){switch(r){case"s":return e+T(l[2]);case"m":return e+T(l[1]);case"h":return e+T(l[0])}return e},"")}({value:i,timePattern:t})}({value:e,blocks:h,timePattern:m,timeFormat:p}),e=l({value:e,delimiters:[d]});var E=n$1(h);return e=a(e,E),u({value:e,blocks:h,delimiter:d,delimiterLazyShow:s})};
|
|
9015
9016
|
|
|
9016
|
-
// replace decimal mark
|
|
9017
|
-
|
|
9017
|
+
const catInputCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-primary-hover{transition:background-color 125ms, color 125ms}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}button.cat-text-primary,button.cat-link-primary{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-primary:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-primary:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-primary,.cat-text-primary-hover{transition:color 125ms}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-bg-primaryInverted-hover{transition:background-color 125ms, color 125ms}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}button.cat-text-primaryInverted,button.cat-link-primaryInverted{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-primaryInverted:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-primaryInverted:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 125ms}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-secondary-hover{transition:background-color 125ms, color 125ms}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}button.cat-text-secondary,button.cat-link-secondary{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-secondary:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-secondary:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-secondary,.cat-text-secondary-hover{transition:color 125ms}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-bg-secondaryInverted-hover{transition:background-color 125ms, color 125ms}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}button.cat-text-secondaryInverted,button.cat-link-secondaryInverted{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-secondaryInverted:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-secondaryInverted:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 125ms}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-info{background-color:rgb(var(--cat-info-bg, 0, 115, 230)) !important;color:rgb(var(--cat-info-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-info-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-info-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-info-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-info-hover{transition:background-color 125ms, color 125ms}.cat-bg-info-hover:hover{background-color:rgb(var(--cat-info-bg-hover, 0, 107, 227)) !important;color:rgb(var(--cat-info-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-info-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-info-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-info-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-info,.cat-link-info{color:rgb(var(--cat-info-text, 0, 115, 230)) !important}button.cat-text-info,button.cat-link-info{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-info:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-info:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-info,.cat-text-info-hover{transition:color 125ms}.cat-link-info:hover,.cat-text-info-hover:hover{color:rgb(var(--cat-info-text-hover, 0, 107, 227)) !important}.cat-link-info:active,.cat-text-info-hover:active{color:rgb(var(--cat-info-text-active, 0, 96, 223)) !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-success-hover{transition:background-color 125ms, color 125ms}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}button.cat-text-success,button.cat-link-success{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-success:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-success:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-success,.cat-text-success-hover{transition:color 125ms}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important;--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}.cat-bg-warning-hover{transition:background-color 125ms, color 125ms}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important;--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}button.cat-text-warning,button.cat-link-warning{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-warning:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-warning:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-warning,.cat-text-warning-hover{transition:color 125ms}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-danger-hover{transition:background-color 125ms, color 125ms}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}button.cat-text-danger,button.cat-link-danger{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-danger:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-danger:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-danger,.cat-text-danger-hover{transition:color 125ms}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-text-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-text-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-bg-muted{background-color:#f2f4f7 !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.input-field:not(.input-horizontal) .label-container.hidden,.textarea-field:not(.textarea-horizontal) .label-container.hidden,.select-field:not(.select-horizontal) .label-container.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-container{flex-basis:var(--label-size, 33.33%)}.label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.label-optional,.label-character-count{display:inline-flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem}.label-character-count{margin-left:auto}.input-horizontal .label-container.hidden label,.textarea-horizontal .label-container.hidden label,.select-horizontal .label-container.hidden label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper,.select-horizontal .label-wrapper{flex-direction:column}.input-horizontal label,.textarea-horizontal label,.select-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata,.select-horizontal .label-metadata{justify-content:flex-start}.input-horizontal .label-metadata .label-character-count,.textarea-horizontal .label-metadata .label-character-count,.select-horizontal .label-metadata .label-character-count{margin-left:0}:host{display:flex;font-size:0.9375rem;line-height:1.25rem}:host([hidden]){display:none}.input-field,.input-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.input-field.input-horizontal{flex-direction:row;gap:1rem}.input-wrapper{flex:1 1 auto;display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:inset 0 0 0 1px rgb(var(--border-color));transition:box-shadow 125ms linear;--border-color:var(--cat-border-color-dark, 215, 219, 224);}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-readonly{pointer-events:none}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.input-wrapper:not(.input-disabled):hover{box-shadow:inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color))}.input-wrapper:focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-1px}.input-wrapper:focus-within:has(.clearable:focus){outline:none}.input-wrapper.input-invalid{--border-color:var(--cat-danger-bg, 217, 52, 13), 0.2}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-loading,.icon-prefix,.icon-suffix{align-self:center}.input-outer-wrapper{display:flex}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input.has-clearable,input.has-toggle-password{padding-right:1.5rem}input.has-clearable.has-toggle-password{padding-right:3.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.toggle-password{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.has-clearable~.toggle-password{right:1.5rem}:host(.cat-date-input) .input-wrapper,:host(.cat-time-input) .input-wrapper{z-index:1;border-top-right-radius:0;border-bottom-right-radius:0}";
|
|
9018
|
+
const CatInputStyle0 = catInputCss;
|
|
9018
9019
|
|
|
9019
|
-
|
|
9020
|
-
|
|
9021
|
-
|
|
9020
|
+
let nextUniqueId$7 = 0;
|
|
9021
|
+
const CatInput = class {
|
|
9022
|
+
constructor(hostRef) {
|
|
9023
|
+
index.registerInstance(this, hostRef);
|
|
9024
|
+
this.catChange = index.createEvent(this, "catChange", 7);
|
|
9025
|
+
this.catFocus = index.createEvent(this, "catFocus", 7);
|
|
9026
|
+
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
9027
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
9028
|
+
this.internals = hostRef.$hostElement$["s-ei"];
|
|
9022
9029
|
}
|
|
9023
|
-
|
|
9024
|
-
|
|
9025
|
-
|
|
9026
|
-
|
|
9027
|
-
|
|
9028
|
-
|
|
9029
|
-
|
|
9030
|
+
else {
|
|
9031
|
+
this.internals = hostRef.$hostElement$.attachInternals();
|
|
9032
|
+
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
9033
|
+
}
|
|
9034
|
+
this._id = `cat-input-${nextUniqueId$7++}`;
|
|
9035
|
+
this.hasSlottedLabel = false;
|
|
9036
|
+
this.hasSlottedHint = false;
|
|
9037
|
+
this.hasSlottedCounter = false;
|
|
9038
|
+
this.isPasswordShown = false;
|
|
9039
|
+
this.errorMap = undefined;
|
|
9040
|
+
this.requiredMarker = 'optional';
|
|
9041
|
+
this.horizontal = false;
|
|
9042
|
+
this.autoComplete = undefined;
|
|
9043
|
+
this.clearable = false;
|
|
9044
|
+
this.togglePassword = false;
|
|
9045
|
+
this.disabled = false;
|
|
9046
|
+
this.loading = false;
|
|
9047
|
+
this.hint = undefined;
|
|
9048
|
+
this.icon = undefined;
|
|
9049
|
+
this.iconRight = false;
|
|
9050
|
+
this.identifier = undefined;
|
|
9051
|
+
this.label = '';
|
|
9052
|
+
this.labelHidden = false;
|
|
9053
|
+
this.max = undefined;
|
|
9054
|
+
this.maxLength = undefined;
|
|
9055
|
+
this.min = undefined;
|
|
9056
|
+
this.minLength = undefined;
|
|
9057
|
+
this.name = undefined;
|
|
9058
|
+
this.placeholder = undefined;
|
|
9059
|
+
this.textPrefix = undefined;
|
|
9060
|
+
this.textSuffix = undefined;
|
|
9061
|
+
this.readonly = false;
|
|
9062
|
+
this.required = false;
|
|
9063
|
+
this.round = false;
|
|
9064
|
+
this.type = 'text';
|
|
9065
|
+
this.value = undefined;
|
|
9066
|
+
this.errors = undefined;
|
|
9067
|
+
this.errorUpdate = 0;
|
|
9068
|
+
this.nativeAttributes = undefined;
|
|
9069
|
+
this.testId = undefined;
|
|
9070
|
+
this.timeMaskOptions = undefined;
|
|
9071
|
+
this.dateMaskOptions = undefined;
|
|
9072
|
+
}
|
|
9073
|
+
get id() {
|
|
9074
|
+
return this.identifier || this._id;
|
|
9075
|
+
}
|
|
9076
|
+
componentWillLoad() {
|
|
9077
|
+
this.onErrorsChanged(this.errors, undefined, false);
|
|
9078
|
+
}
|
|
9079
|
+
componentWillRender() {
|
|
9080
|
+
this.internals.setFormValue(this.value ?? null);
|
|
9081
|
+
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
9082
|
+
this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
9083
|
+
this.hasSlottedCounter = !!this.hostElement.querySelector('[slot="counter"]');
|
|
9084
|
+
}
|
|
9085
|
+
/**
|
|
9086
|
+
* Programmatically move focus to the input. Use this method instead of
|
|
9087
|
+
* `input.focus()`.
|
|
9088
|
+
*
|
|
9089
|
+
* @param options An optional object providing options to control aspects of
|
|
9090
|
+
* the focusing process.
|
|
9091
|
+
*/
|
|
9092
|
+
async doFocus(options) {
|
|
9093
|
+
// hack to make datepicker inputs focusable. The datepicker hides the input
|
|
9094
|
+
// element and dynamically creates a sibling. We need to find the new input
|
|
9095
|
+
// element and focus it instead.
|
|
9096
|
+
const input = this.input.type === 'hidden' ? this.findSiblingInput(this.input.nextSibling) : this.input;
|
|
9097
|
+
input?.focus(options);
|
|
9098
|
+
}
|
|
9099
|
+
/**
|
|
9100
|
+
* Programmatically remove focus from the input. Use this method instead of
|
|
9101
|
+
* `input.blur()`.
|
|
9102
|
+
*/
|
|
9103
|
+
async doBlur() {
|
|
9104
|
+
this.input.blur();
|
|
9105
|
+
}
|
|
9106
|
+
/**
|
|
9107
|
+
* Clear the input.
|
|
9108
|
+
*/
|
|
9109
|
+
async clear() {
|
|
9110
|
+
this.value = '';
|
|
9111
|
+
this.catChange.emit(this.value);
|
|
9112
|
+
}
|
|
9113
|
+
onErrorsChanged(newValue, _oldValue, update = true) {
|
|
9114
|
+
if (!coerceBoolean(this.errorUpdate)) {
|
|
9115
|
+
this.errorMap = undefined;
|
|
9116
|
+
}
|
|
9117
|
+
else {
|
|
9118
|
+
this.errorMapSrc = Array.isArray(newValue)
|
|
9119
|
+
? newValue.reduce((acc, err) => ({ ...acc, [err]: undefined }), {})
|
|
9120
|
+
: newValue || undefined;
|
|
9121
|
+
if (update) {
|
|
9122
|
+
this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();
|
|
9030
9123
|
}
|
|
9031
|
-
} else {
|
|
9032
|
-
partSignAndPrefix = partSign;
|
|
9033
9124
|
}
|
|
9034
|
-
|
|
9035
|
-
|
|
9036
|
-
|
|
9037
|
-
|
|
9038
|
-
|
|
9039
|
-
|
|
9040
|
-
|
|
9125
|
+
}
|
|
9126
|
+
render() {
|
|
9127
|
+
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
9128
|
+
return (index.h("div", { key: '2d1470e5fcbc444187c35b52a977ae919f5441f5', class: {
|
|
9129
|
+
'input-field': true,
|
|
9130
|
+
'input-horizontal': this.horizontal
|
|
9131
|
+
} }, index.h("div", { key: 'f78abacd75b12bccab406da85e6d77866e271dae', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '5985d170af91fc174a28fa102f2a7e33475aaa93', htmlFor: this.id, part: "label" }, index.h("span", { key: '49c82004f681bd34acae7b3f7aef95278a975cb3', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '3c2b12e5bf2af34487569f346b48123d9d633618', name: "label" })) || this.label, index.h("div", { key: 'a0a12f7f406845bf49efcee8e3afc0dbcb20ec66', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'c3076888f346793dcd35b40efbe023e1b77a13af', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'a55f8332f32fe7b42062ef726ea6148c6cec72a1', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (index.h("div", { key: 'a7178393a4e61a6fa1a7548caeb2622561156499', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (index.h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), index.h("div", { key: '5be7d2b3f4630cbc98ff2f2370e58c3e02158e82', class: "input-container" }, index.h("div", { key: 'ffe47bed961517990aea7115fd48090cea7973f7', class: "input-outer-wrapper" }, index.h("div", { key: '8054a1dead8ec0f04ec09c42afa64304e1eeab73', class: {
|
|
9132
|
+
'input-wrapper': true,
|
|
9133
|
+
'input-round': this.round,
|
|
9134
|
+
'input-readonly': this.readonly,
|
|
9135
|
+
'input-disabled': this.disabled,
|
|
9136
|
+
'input-invalid': this.invalid
|
|
9137
|
+
}, onClick: () => this.input.focus() }, this.textPrefix && (index.h("span", { key: '679c04bcdf71a18281c57d8b894bb2d09db04c61', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (index.h("cat-icon", { key: '9676f80f87886585bd1e66dc36d79f73d8dcbc1d', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), index.h("div", { key: '63d68df805f010fd43cabbb2a926b15d38cbac02', class: "input-inner-wrapper" }, index.h("input", { key: 'c647bb48d0ce78bfdd32738293d48a6fd0decebd', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
|
|
9138
|
+
'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,
|
|
9139
|
+
'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value
|
|
9140
|
+
}, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { key: 'b55760f57d4e2a614ffb52e603a909002953023a', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { key: '09fb349df1ab00b7260a290bc3aa2fc7fae6ba55', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && index.h("cat-spinner", { key: '5afe2fb200dee5e83b0502db4dddb4609d2ff8c5', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (index.h("cat-icon", { key: '4aa4fbef3cd5c6de7819ebaf8b7fd9df86a33656', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (index.h("cat-icon", { key: 'ead450e2a1aad0bd0ae939610bdd25555d487955', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (index.h("span", { key: '54b5f3a403ef48046f4a2ce077195e256e68cfaf', class: "text-suffix", part: "suffix" }, this.textSuffix))), index.h("slot", { key: '60f90528fa403d432bd930819961f41adbdffd64', name: "addon" })), this.hasHint && (index.h(CatFormHint, { key: 'de40c1cc2308e00089a6515d95faa3252ec2ec49', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))));
|
|
9141
|
+
}
|
|
9142
|
+
get hasHint() {
|
|
9143
|
+
return !!this.hint || !!this.hasSlottedHint || this.invalid;
|
|
9144
|
+
}
|
|
9145
|
+
get invalid() {
|
|
9146
|
+
return this.errorMap === true || !!Object.keys(this.errorMap || {}).length;
|
|
9147
|
+
}
|
|
9148
|
+
onInput() {
|
|
9149
|
+
let formattedValue = this.input.value;
|
|
9150
|
+
if (this.timeMaskOptions) {
|
|
9151
|
+
formattedValue = w(this.input.value, this.timeMaskOptions);
|
|
9041
9152
|
}
|
|
9042
|
-
|
|
9043
|
-
|
|
9044
|
-
partInteger = partInteger.slice(1);
|
|
9153
|
+
if (this.dateMaskOptions) {
|
|
9154
|
+
formattedValue = y(this.input.value, this.dateMaskOptions);
|
|
9045
9155
|
}
|
|
9046
|
-
|
|
9047
|
-
|
|
9048
|
-
|
|
9156
|
+
this.value = formattedValue;
|
|
9157
|
+
this.input.value = formattedValue;
|
|
9158
|
+
this.internals.setFormValue(this.input.value);
|
|
9159
|
+
this.catChange.emit(this.value);
|
|
9160
|
+
this.showErrorsIfTimeout();
|
|
9161
|
+
}
|
|
9162
|
+
onFocus(event) {
|
|
9163
|
+
this.catFocus.emit(event);
|
|
9164
|
+
}
|
|
9165
|
+
onBlur(event) {
|
|
9166
|
+
this.catBlur.emit(event);
|
|
9167
|
+
if (coerceBoolean(this.errorUpdate)) {
|
|
9168
|
+
this.showErrors();
|
|
9049
9169
|
}
|
|
9050
|
-
|
|
9051
|
-
|
|
9052
|
-
|
|
9053
|
-
|
|
9054
|
-
|
|
9055
|
-
|
|
9056
|
-
|
|
9057
|
-
|
|
9058
|
-
|
|
9059
|
-
|
|
9060
|
-
|
|
9061
|
-
|
|
9062
|
-
|
|
9063
|
-
partInteger = partInteger.replace(/(\d)(?=(\d{3})+$)/g, '$1' + owner.delimiter);
|
|
9064
|
-
|
|
9065
|
-
break;
|
|
9170
|
+
}
|
|
9171
|
+
doTogglePassword() {
|
|
9172
|
+
this.isPasswordShown = !this.isPasswordShown;
|
|
9173
|
+
}
|
|
9174
|
+
showErrors() {
|
|
9175
|
+
this.errorMap = this.errorMapSrc;
|
|
9176
|
+
}
|
|
9177
|
+
showErrorsIfTimeout() {
|
|
9178
|
+
const errorUpdate = coerceNumber(this.errorUpdate, null);
|
|
9179
|
+
if (errorUpdate !== null) {
|
|
9180
|
+
typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);
|
|
9181
|
+
this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);
|
|
9182
|
+
return true;
|
|
9066
9183
|
}
|
|
9067
|
-
|
|
9068
|
-
|
|
9069
|
-
|
|
9184
|
+
return false;
|
|
9185
|
+
}
|
|
9186
|
+
showErrorsIfNoFocus() {
|
|
9187
|
+
const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;
|
|
9188
|
+
if (!hasFocus) {
|
|
9189
|
+
this.showErrors();
|
|
9070
9190
|
}
|
|
9071
|
-
|
|
9072
|
-
return partSignAndPrefix + partInteger.toString() + (owner.numeralDecimalScale > 0 ? partDecimal.toString() : '');
|
|
9073
9191
|
}
|
|
9192
|
+
findSiblingInput(node) {
|
|
9193
|
+
if (node instanceof HTMLInputElement) {
|
|
9194
|
+
return node;
|
|
9195
|
+
}
|
|
9196
|
+
else if (node?.nextSibling) {
|
|
9197
|
+
return this.findSiblingInput(node.nextSibling);
|
|
9198
|
+
}
|
|
9199
|
+
return undefined;
|
|
9200
|
+
}
|
|
9201
|
+
static get delegatesFocus() { return true; }
|
|
9202
|
+
static get formAssociated() { return true; }
|
|
9203
|
+
get hostElement() { return index.getElement(this); }
|
|
9204
|
+
static get watchers() { return {
|
|
9205
|
+
"errors": ["onErrorsChanged"]
|
|
9206
|
+
}; }
|
|
9074
9207
|
};
|
|
9208
|
+
CatInput.style = CatInputStyle0;
|
|
9075
9209
|
|
|
9076
|
-
|
|
9077
|
-
|
|
9078
|
-
var DateFormatter = function (datePattern, dateMin, dateMax) {
|
|
9079
|
-
var owner = this;
|
|
9080
|
-
|
|
9081
|
-
owner.date = [];
|
|
9082
|
-
owner.blocks = [];
|
|
9083
|
-
owner.datePattern = datePattern;
|
|
9084
|
-
owner.dateMin = dateMin
|
|
9085
|
-
.split('-')
|
|
9086
|
-
.reverse()
|
|
9087
|
-
.map(function(x) {
|
|
9088
|
-
return parseInt(x, 10);
|
|
9089
|
-
});
|
|
9090
|
-
if (owner.dateMin.length === 2) owner.dateMin.unshift(0);
|
|
9091
|
-
|
|
9092
|
-
owner.dateMax = dateMax
|
|
9093
|
-
.split('-')
|
|
9094
|
-
.reverse()
|
|
9095
|
-
.map(function(x) {
|
|
9096
|
-
return parseInt(x, 10);
|
|
9097
|
-
});
|
|
9098
|
-
if (owner.dateMax.length === 2) owner.dateMax.unshift(0);
|
|
9099
|
-
|
|
9100
|
-
owner.initBlocks();
|
|
9101
|
-
};
|
|
9102
|
-
|
|
9103
|
-
DateFormatter.prototype = {
|
|
9104
|
-
initBlocks: function () {
|
|
9105
|
-
var owner = this;
|
|
9106
|
-
owner.datePattern.forEach(function (value) {
|
|
9107
|
-
if (value === 'Y') {
|
|
9108
|
-
owner.blocks.push(4);
|
|
9109
|
-
} else {
|
|
9110
|
-
owner.blocks.push(2);
|
|
9111
|
-
}
|
|
9112
|
-
});
|
|
9113
|
-
},
|
|
9114
|
-
|
|
9115
|
-
getISOFormatDate: function () {
|
|
9116
|
-
var owner = this,
|
|
9117
|
-
date = owner.date;
|
|
9118
|
-
|
|
9119
|
-
return date[2] ? (
|
|
9120
|
-
date[2] + '-' + owner.addLeadingZero(date[1]) + '-' + owner.addLeadingZero(date[0])
|
|
9121
|
-
) : '';
|
|
9122
|
-
},
|
|
9123
|
-
|
|
9124
|
-
getBlocks: function () {
|
|
9125
|
-
return this.blocks;
|
|
9126
|
-
},
|
|
9127
|
-
|
|
9128
|
-
getValidatedDate: function (value) {
|
|
9129
|
-
var owner = this, result = '';
|
|
9130
|
-
|
|
9131
|
-
value = value.replace(/[^\d]/g, '');
|
|
9132
|
-
|
|
9133
|
-
owner.blocks.forEach(function (length, index) {
|
|
9134
|
-
if (value.length > 0) {
|
|
9135
|
-
var sub = value.slice(0, length),
|
|
9136
|
-
sub0 = sub.slice(0, 1),
|
|
9137
|
-
rest = value.slice(length);
|
|
9138
|
-
|
|
9139
|
-
switch (owner.datePattern[index]) {
|
|
9140
|
-
case 'd':
|
|
9141
|
-
if (sub === '00') {
|
|
9142
|
-
sub = '01';
|
|
9143
|
-
} else if (parseInt(sub0, 10) > 3) {
|
|
9144
|
-
sub = '0' + sub0;
|
|
9145
|
-
} else if (parseInt(sub, 10) > 31) {
|
|
9146
|
-
sub = '31';
|
|
9147
|
-
}
|
|
9148
|
-
|
|
9149
|
-
break;
|
|
9150
|
-
|
|
9151
|
-
case 'm':
|
|
9152
|
-
if (sub === '00') {
|
|
9153
|
-
sub = '01';
|
|
9154
|
-
} else if (parseInt(sub0, 10) > 1) {
|
|
9155
|
-
sub = '0' + sub0;
|
|
9156
|
-
} else if (parseInt(sub, 10) > 12) {
|
|
9157
|
-
sub = '12';
|
|
9158
|
-
}
|
|
9159
|
-
|
|
9160
|
-
break;
|
|
9161
|
-
}
|
|
9162
|
-
|
|
9163
|
-
result += sub;
|
|
9164
|
-
|
|
9165
|
-
// update remaining string
|
|
9166
|
-
value = rest;
|
|
9167
|
-
}
|
|
9168
|
-
});
|
|
9169
|
-
|
|
9170
|
-
return this.getFixedDateString(result);
|
|
9171
|
-
},
|
|
9172
|
-
|
|
9173
|
-
getFixedDateString: function (value) {
|
|
9174
|
-
var owner = this, datePattern = owner.datePattern, date = [],
|
|
9175
|
-
dayIndex = 0, monthIndex = 0, yearIndex = 0,
|
|
9176
|
-
dayStartIndex = 0, monthStartIndex = 0, yearStartIndex = 0,
|
|
9177
|
-
day, month, year, fullYearDone = false;
|
|
9178
|
-
|
|
9179
|
-
// mm-dd || dd-mm
|
|
9180
|
-
if (value.length === 4 && datePattern[0].toLowerCase() !== 'y' && datePattern[1].toLowerCase() !== 'y') {
|
|
9181
|
-
dayStartIndex = datePattern[0] === 'd' ? 0 : 2;
|
|
9182
|
-
monthStartIndex = 2 - dayStartIndex;
|
|
9183
|
-
day = parseInt(value.slice(dayStartIndex, dayStartIndex + 2), 10);
|
|
9184
|
-
month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10);
|
|
9185
|
-
|
|
9186
|
-
date = this.getFixedDate(day, month, 0);
|
|
9187
|
-
}
|
|
9188
|
-
|
|
9189
|
-
// yyyy-mm-dd || yyyy-dd-mm || mm-dd-yyyy || dd-mm-yyyy || dd-yyyy-mm || mm-yyyy-dd
|
|
9190
|
-
if (value.length === 8) {
|
|
9191
|
-
datePattern.forEach(function (type, index) {
|
|
9192
|
-
switch (type) {
|
|
9193
|
-
case 'd':
|
|
9194
|
-
dayIndex = index;
|
|
9195
|
-
break;
|
|
9196
|
-
case 'm':
|
|
9197
|
-
monthIndex = index;
|
|
9198
|
-
break;
|
|
9199
|
-
default:
|
|
9200
|
-
yearIndex = index;
|
|
9201
|
-
break;
|
|
9202
|
-
}
|
|
9203
|
-
});
|
|
9204
|
-
|
|
9205
|
-
yearStartIndex = yearIndex * 2;
|
|
9206
|
-
dayStartIndex = (dayIndex <= yearIndex) ? dayIndex * 2 : (dayIndex * 2 + 2);
|
|
9207
|
-
monthStartIndex = (monthIndex <= yearIndex) ? monthIndex * 2 : (monthIndex * 2 + 2);
|
|
9208
|
-
|
|
9209
|
-
day = parseInt(value.slice(dayStartIndex, dayStartIndex + 2), 10);
|
|
9210
|
-
month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10);
|
|
9211
|
-
year = parseInt(value.slice(yearStartIndex, yearStartIndex + 4), 10);
|
|
9212
|
-
|
|
9213
|
-
fullYearDone = value.slice(yearStartIndex, yearStartIndex + 4).length === 4;
|
|
9214
|
-
|
|
9215
|
-
date = this.getFixedDate(day, month, year);
|
|
9216
|
-
}
|
|
9217
|
-
|
|
9218
|
-
// mm-yy || yy-mm
|
|
9219
|
-
if (value.length === 4 && (datePattern[0] === 'y' || datePattern[1] === 'y')) {
|
|
9220
|
-
monthStartIndex = datePattern[0] === 'm' ? 0 : 2;
|
|
9221
|
-
yearStartIndex = 2 - monthStartIndex;
|
|
9222
|
-
month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10);
|
|
9223
|
-
year = parseInt(value.slice(yearStartIndex, yearStartIndex + 2), 10);
|
|
9224
|
-
|
|
9225
|
-
fullYearDone = value.slice(yearStartIndex, yearStartIndex + 2).length === 2;
|
|
9226
|
-
|
|
9227
|
-
date = [0, month, year];
|
|
9228
|
-
}
|
|
9229
|
-
|
|
9230
|
-
// mm-yyyy || yyyy-mm
|
|
9231
|
-
if (value.length === 6 && (datePattern[0] === 'Y' || datePattern[1] === 'Y')) {
|
|
9232
|
-
monthStartIndex = datePattern[0] === 'm' ? 0 : 4;
|
|
9233
|
-
yearStartIndex = 2 - 0.5 * monthStartIndex;
|
|
9234
|
-
month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10);
|
|
9235
|
-
year = parseInt(value.slice(yearStartIndex, yearStartIndex + 4), 10);
|
|
9236
|
-
|
|
9237
|
-
fullYearDone = value.slice(yearStartIndex, yearStartIndex + 4).length === 4;
|
|
9238
|
-
|
|
9239
|
-
date = [0, month, year];
|
|
9240
|
-
}
|
|
9241
|
-
|
|
9242
|
-
date = owner.getRangeFixedDate(date);
|
|
9243
|
-
owner.date = date;
|
|
9244
|
-
|
|
9245
|
-
var result = date.length === 0 ? value : datePattern.reduce(function (previous, current) {
|
|
9246
|
-
switch (current) {
|
|
9247
|
-
case 'd':
|
|
9248
|
-
return previous + (date[0] === 0 ? '' : owner.addLeadingZero(date[0]));
|
|
9249
|
-
case 'm':
|
|
9250
|
-
return previous + (date[1] === 0 ? '' : owner.addLeadingZero(date[1]));
|
|
9251
|
-
case 'y':
|
|
9252
|
-
return previous + (fullYearDone ? owner.addLeadingZeroForYear(date[2], false) : '');
|
|
9253
|
-
case 'Y':
|
|
9254
|
-
return previous + (fullYearDone ? owner.addLeadingZeroForYear(date[2], true) : '');
|
|
9255
|
-
}
|
|
9256
|
-
}, '');
|
|
9257
|
-
|
|
9258
|
-
return result;
|
|
9259
|
-
},
|
|
9260
|
-
|
|
9261
|
-
getRangeFixedDate: function (date) {
|
|
9262
|
-
var owner = this,
|
|
9263
|
-
datePattern = owner.datePattern,
|
|
9264
|
-
dateMin = owner.dateMin || [],
|
|
9265
|
-
dateMax = owner.dateMax || [];
|
|
9266
|
-
|
|
9267
|
-
if (!date.length || (dateMin.length < 3 && dateMax.length < 3)) return date;
|
|
9268
|
-
|
|
9269
|
-
if (
|
|
9270
|
-
datePattern.find(function(x) {
|
|
9271
|
-
return x.toLowerCase() === 'y';
|
|
9272
|
-
}) &&
|
|
9273
|
-
date[2] === 0
|
|
9274
|
-
) return date;
|
|
9275
|
-
|
|
9276
|
-
if (dateMax.length && (dateMax[2] < date[2] || (
|
|
9277
|
-
dateMax[2] === date[2] && (dateMax[1] < date[1] || (
|
|
9278
|
-
dateMax[1] === date[1] && dateMax[0] < date[0]
|
|
9279
|
-
))
|
|
9280
|
-
))) return dateMax;
|
|
9281
|
-
|
|
9282
|
-
if (dateMin.length && (dateMin[2] > date[2] || (
|
|
9283
|
-
dateMin[2] === date[2] && (dateMin[1] > date[1] || (
|
|
9284
|
-
dateMin[1] === date[1] && dateMin[0] > date[0]
|
|
9285
|
-
))
|
|
9286
|
-
))) return dateMin;
|
|
9287
|
-
|
|
9288
|
-
return date;
|
|
9289
|
-
},
|
|
9290
|
-
|
|
9291
|
-
getFixedDate: function (day, month, year) {
|
|
9292
|
-
day = Math.min(day, 31);
|
|
9293
|
-
month = Math.min(month, 12);
|
|
9294
|
-
year = parseInt((year || 0), 10);
|
|
9295
|
-
|
|
9296
|
-
if ((month < 7 && month % 2 === 0) || (month > 8 && month % 2 === 1)) {
|
|
9297
|
-
day = Math.min(day, month === 2 ? (this.isLeapYear(year) ? 29 : 28) : 30);
|
|
9298
|
-
}
|
|
9299
|
-
|
|
9300
|
-
return [day, month, year];
|
|
9301
|
-
},
|
|
9302
|
-
|
|
9303
|
-
isLeapYear: function (year) {
|
|
9304
|
-
return ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0);
|
|
9305
|
-
},
|
|
9306
|
-
|
|
9307
|
-
addLeadingZero: function (number) {
|
|
9308
|
-
return (number < 10 ? '0' : '') + number;
|
|
9309
|
-
},
|
|
9310
|
-
|
|
9311
|
-
addLeadingZeroForYear: function (number, fullYearMode) {
|
|
9312
|
-
if (fullYearMode) {
|
|
9313
|
-
return (number < 10 ? '000' : (number < 100 ? '00' : (number < 1000 ? '0' : ''))) + number;
|
|
9314
|
-
}
|
|
9315
|
-
|
|
9316
|
-
return (number < 10 ? '0' : '') + number;
|
|
9317
|
-
}
|
|
9318
|
-
};
|
|
9319
|
-
|
|
9320
|
-
var DateFormatter_1 = DateFormatter;
|
|
9321
|
-
|
|
9322
|
-
var TimeFormatter = function (timePattern, timeFormat) {
|
|
9323
|
-
var owner = this;
|
|
9324
|
-
|
|
9325
|
-
owner.time = [];
|
|
9326
|
-
owner.blocks = [];
|
|
9327
|
-
owner.timePattern = timePattern;
|
|
9328
|
-
owner.timeFormat = timeFormat;
|
|
9329
|
-
owner.initBlocks();
|
|
9330
|
-
};
|
|
9331
|
-
|
|
9332
|
-
TimeFormatter.prototype = {
|
|
9333
|
-
initBlocks: function () {
|
|
9334
|
-
var owner = this;
|
|
9335
|
-
owner.timePattern.forEach(function () {
|
|
9336
|
-
owner.blocks.push(2);
|
|
9337
|
-
});
|
|
9338
|
-
},
|
|
9339
|
-
|
|
9340
|
-
getISOFormatTime: function () {
|
|
9341
|
-
var owner = this,
|
|
9342
|
-
time = owner.time;
|
|
9343
|
-
|
|
9344
|
-
return time[2] ? (
|
|
9345
|
-
owner.addLeadingZero(time[0]) + ':' + owner.addLeadingZero(time[1]) + ':' + owner.addLeadingZero(time[2])
|
|
9346
|
-
) : '';
|
|
9347
|
-
},
|
|
9348
|
-
|
|
9349
|
-
getBlocks: function () {
|
|
9350
|
-
return this.blocks;
|
|
9351
|
-
},
|
|
9352
|
-
|
|
9353
|
-
getTimeFormatOptions: function () {
|
|
9354
|
-
var owner = this;
|
|
9355
|
-
if (String(owner.timeFormat) === '12') {
|
|
9356
|
-
return {
|
|
9357
|
-
maxHourFirstDigit: 1,
|
|
9358
|
-
maxHours: 12,
|
|
9359
|
-
maxMinutesFirstDigit: 5,
|
|
9360
|
-
maxMinutes: 60
|
|
9361
|
-
};
|
|
9362
|
-
}
|
|
9363
|
-
|
|
9364
|
-
return {
|
|
9365
|
-
maxHourFirstDigit: 2,
|
|
9366
|
-
maxHours: 23,
|
|
9367
|
-
maxMinutesFirstDigit: 5,
|
|
9368
|
-
maxMinutes: 60
|
|
9369
|
-
};
|
|
9370
|
-
},
|
|
9371
|
-
|
|
9372
|
-
getValidatedTime: function (value) {
|
|
9373
|
-
var owner = this, result = '';
|
|
9374
|
-
|
|
9375
|
-
value = value.replace(/[^\d]/g, '');
|
|
9376
|
-
|
|
9377
|
-
var timeFormatOptions = owner.getTimeFormatOptions();
|
|
9378
|
-
|
|
9379
|
-
owner.blocks.forEach(function (length, index) {
|
|
9380
|
-
if (value.length > 0) {
|
|
9381
|
-
var sub = value.slice(0, length),
|
|
9382
|
-
sub0 = sub.slice(0, 1),
|
|
9383
|
-
rest = value.slice(length);
|
|
9384
|
-
|
|
9385
|
-
switch (owner.timePattern[index]) {
|
|
9386
|
-
|
|
9387
|
-
case 'h':
|
|
9388
|
-
if (parseInt(sub0, 10) > timeFormatOptions.maxHourFirstDigit) {
|
|
9389
|
-
sub = '0' + sub0;
|
|
9390
|
-
} else if (parseInt(sub, 10) > timeFormatOptions.maxHours) {
|
|
9391
|
-
sub = timeFormatOptions.maxHours + '';
|
|
9392
|
-
}
|
|
9393
|
-
|
|
9394
|
-
break;
|
|
9395
|
-
|
|
9396
|
-
case 'm':
|
|
9397
|
-
case 's':
|
|
9398
|
-
if (parseInt(sub0, 10) > timeFormatOptions.maxMinutesFirstDigit) {
|
|
9399
|
-
sub = '0' + sub0;
|
|
9400
|
-
} else if (parseInt(sub, 10) > timeFormatOptions.maxMinutes) {
|
|
9401
|
-
sub = timeFormatOptions.maxMinutes + '';
|
|
9402
|
-
}
|
|
9403
|
-
break;
|
|
9404
|
-
}
|
|
9405
|
-
|
|
9406
|
-
result += sub;
|
|
9407
|
-
|
|
9408
|
-
// update remaining string
|
|
9409
|
-
value = rest;
|
|
9410
|
-
}
|
|
9411
|
-
});
|
|
9412
|
-
|
|
9413
|
-
return this.getFixedTimeString(result);
|
|
9414
|
-
},
|
|
9415
|
-
|
|
9416
|
-
getFixedTimeString: function (value) {
|
|
9417
|
-
var owner = this, timePattern = owner.timePattern, time = [],
|
|
9418
|
-
secondIndex = 0, minuteIndex = 0, hourIndex = 0,
|
|
9419
|
-
secondStartIndex = 0, minuteStartIndex = 0, hourStartIndex = 0,
|
|
9420
|
-
second, minute, hour;
|
|
9421
|
-
|
|
9422
|
-
if (value.length === 6) {
|
|
9423
|
-
timePattern.forEach(function (type, index) {
|
|
9424
|
-
switch (type) {
|
|
9425
|
-
case 's':
|
|
9426
|
-
secondIndex = index * 2;
|
|
9427
|
-
break;
|
|
9428
|
-
case 'm':
|
|
9429
|
-
minuteIndex = index * 2;
|
|
9430
|
-
break;
|
|
9431
|
-
case 'h':
|
|
9432
|
-
hourIndex = index * 2;
|
|
9433
|
-
break;
|
|
9434
|
-
}
|
|
9435
|
-
});
|
|
9436
|
-
|
|
9437
|
-
hourStartIndex = hourIndex;
|
|
9438
|
-
minuteStartIndex = minuteIndex;
|
|
9439
|
-
secondStartIndex = secondIndex;
|
|
9440
|
-
|
|
9441
|
-
second = parseInt(value.slice(secondStartIndex, secondStartIndex + 2), 10);
|
|
9442
|
-
minute = parseInt(value.slice(minuteStartIndex, minuteStartIndex + 2), 10);
|
|
9443
|
-
hour = parseInt(value.slice(hourStartIndex, hourStartIndex + 2), 10);
|
|
9444
|
-
|
|
9445
|
-
time = this.getFixedTime(hour, minute, second);
|
|
9446
|
-
}
|
|
9447
|
-
|
|
9448
|
-
if (value.length === 4 && owner.timePattern.indexOf('s') < 0) {
|
|
9449
|
-
timePattern.forEach(function (type, index) {
|
|
9450
|
-
switch (type) {
|
|
9451
|
-
case 'm':
|
|
9452
|
-
minuteIndex = index * 2;
|
|
9453
|
-
break;
|
|
9454
|
-
case 'h':
|
|
9455
|
-
hourIndex = index * 2;
|
|
9456
|
-
break;
|
|
9457
|
-
}
|
|
9458
|
-
});
|
|
9459
|
-
|
|
9460
|
-
hourStartIndex = hourIndex;
|
|
9461
|
-
minuteStartIndex = minuteIndex;
|
|
9462
|
-
|
|
9463
|
-
second = 0;
|
|
9464
|
-
minute = parseInt(value.slice(minuteStartIndex, minuteStartIndex + 2), 10);
|
|
9465
|
-
hour = parseInt(value.slice(hourStartIndex, hourStartIndex + 2), 10);
|
|
9466
|
-
|
|
9467
|
-
time = this.getFixedTime(hour, minute, second);
|
|
9468
|
-
}
|
|
9469
|
-
|
|
9470
|
-
owner.time = time;
|
|
9471
|
-
|
|
9472
|
-
return time.length === 0 ? value : timePattern.reduce(function (previous, current) {
|
|
9473
|
-
switch (current) {
|
|
9474
|
-
case 's':
|
|
9475
|
-
return previous + owner.addLeadingZero(time[2]);
|
|
9476
|
-
case 'm':
|
|
9477
|
-
return previous + owner.addLeadingZero(time[1]);
|
|
9478
|
-
case 'h':
|
|
9479
|
-
return previous + owner.addLeadingZero(time[0]);
|
|
9480
|
-
}
|
|
9481
|
-
}, '');
|
|
9482
|
-
},
|
|
9483
|
-
|
|
9484
|
-
getFixedTime: function (hour, minute, second) {
|
|
9485
|
-
second = Math.min(parseInt(second || 0, 10), 60);
|
|
9486
|
-
minute = Math.min(minute, 60);
|
|
9487
|
-
hour = Math.min(hour, 60);
|
|
9488
|
-
|
|
9489
|
-
return [hour, minute, second];
|
|
9490
|
-
},
|
|
9491
|
-
|
|
9492
|
-
addLeadingZero: function (number) {
|
|
9493
|
-
return (number < 10 ? '0' : '') + number;
|
|
9494
|
-
}
|
|
9495
|
-
};
|
|
9496
|
-
|
|
9497
|
-
var TimeFormatter_1 = TimeFormatter;
|
|
9498
|
-
|
|
9499
|
-
var PhoneFormatter = function (formatter, delimiter) {
|
|
9500
|
-
var owner = this;
|
|
9501
|
-
|
|
9502
|
-
owner.delimiter = (delimiter || delimiter === '') ? delimiter : ' ';
|
|
9503
|
-
owner.delimiterRE = delimiter ? new RegExp('\\' + delimiter, 'g') : '';
|
|
9504
|
-
|
|
9505
|
-
owner.formatter = formatter;
|
|
9506
|
-
};
|
|
9507
|
-
|
|
9508
|
-
PhoneFormatter.prototype = {
|
|
9509
|
-
setFormatter: function (formatter) {
|
|
9510
|
-
this.formatter = formatter;
|
|
9511
|
-
},
|
|
9512
|
-
|
|
9513
|
-
format: function (phoneNumber) {
|
|
9514
|
-
var owner = this;
|
|
9515
|
-
|
|
9516
|
-
owner.formatter.clear();
|
|
9517
|
-
|
|
9518
|
-
// only keep number and +
|
|
9519
|
-
phoneNumber = phoneNumber.replace(/[^\d+]/g, '');
|
|
9520
|
-
|
|
9521
|
-
// strip non-leading +
|
|
9522
|
-
phoneNumber = phoneNumber.replace(/^\+/, 'B').replace(/\+/g, '').replace('B', '+');
|
|
9523
|
-
|
|
9524
|
-
// strip delimiter
|
|
9525
|
-
phoneNumber = phoneNumber.replace(owner.delimiterRE, '');
|
|
9526
|
-
|
|
9527
|
-
var result = '', current, validated = false;
|
|
9528
|
-
|
|
9529
|
-
for (var i = 0, iMax = phoneNumber.length; i < iMax; i++) {
|
|
9530
|
-
current = owner.formatter.inputDigit(phoneNumber.charAt(i));
|
|
9531
|
-
|
|
9532
|
-
// has ()- or space inside
|
|
9533
|
-
if (/[\s()-]/g.test(current)) {
|
|
9534
|
-
result = current;
|
|
9535
|
-
|
|
9536
|
-
validated = true;
|
|
9537
|
-
} else {
|
|
9538
|
-
if (!validated) {
|
|
9539
|
-
result = current;
|
|
9540
|
-
}
|
|
9541
|
-
// else: over length input
|
|
9542
|
-
// it turns to invalid number again
|
|
9543
|
-
}
|
|
9544
|
-
}
|
|
9545
|
-
|
|
9546
|
-
// strip ()
|
|
9547
|
-
// e.g. US: 7161234567 returns (716) 123-4567
|
|
9548
|
-
result = result.replace(/[()]/g, '');
|
|
9549
|
-
// replace library delimiter with user customized delimiter
|
|
9550
|
-
result = result.replace(/[\s-]/g, owner.delimiter);
|
|
9551
|
-
|
|
9552
|
-
return result;
|
|
9553
|
-
}
|
|
9554
|
-
};
|
|
9555
|
-
|
|
9556
|
-
var PhoneFormatter_1 = PhoneFormatter;
|
|
9557
|
-
|
|
9558
|
-
var CreditCardDetector = {
|
|
9559
|
-
blocks: {
|
|
9560
|
-
uatp: [4, 5, 6],
|
|
9561
|
-
amex: [4, 6, 5],
|
|
9562
|
-
diners: [4, 6, 4],
|
|
9563
|
-
discover: [4, 4, 4, 4],
|
|
9564
|
-
mastercard: [4, 4, 4, 4],
|
|
9565
|
-
dankort: [4, 4, 4, 4],
|
|
9566
|
-
instapayment: [4, 4, 4, 4],
|
|
9567
|
-
jcb15: [4, 6, 5],
|
|
9568
|
-
jcb: [4, 4, 4, 4],
|
|
9569
|
-
maestro: [4, 4, 4, 4],
|
|
9570
|
-
visa: [4, 4, 4, 4],
|
|
9571
|
-
mir: [4, 4, 4, 4],
|
|
9572
|
-
unionPay: [4, 4, 4, 4],
|
|
9573
|
-
general: [4, 4, 4, 4]
|
|
9574
|
-
},
|
|
9575
|
-
|
|
9576
|
-
re: {
|
|
9577
|
-
// starts with 1; 15 digits, not starts with 1800 (jcb card)
|
|
9578
|
-
uatp: /^(?!1800)1\d{0,14}/,
|
|
9579
|
-
|
|
9580
|
-
// starts with 34/37; 15 digits
|
|
9581
|
-
amex: /^3[47]\d{0,13}/,
|
|
9582
|
-
|
|
9583
|
-
// starts with 6011/65/644-649; 16 digits
|
|
9584
|
-
discover: /^(?:6011|65\d{0,2}|64[4-9]\d?)\d{0,12}/,
|
|
9585
|
-
|
|
9586
|
-
// starts with 300-305/309 or 36/38/39; 14 digits
|
|
9587
|
-
diners: /^3(?:0([0-5]|9)|[689]\d?)\d{0,11}/,
|
|
9588
|
-
|
|
9589
|
-
// starts with 51-55/2221–2720; 16 digits
|
|
9590
|
-
mastercard: /^(5[1-5]\d{0,2}|22[2-9]\d{0,1}|2[3-7]\d{0,2})\d{0,12}/,
|
|
9591
|
-
|
|
9592
|
-
// starts with 5019/4175/4571; 16 digits
|
|
9593
|
-
dankort: /^(5019|4175|4571)\d{0,12}/,
|
|
9594
|
-
|
|
9595
|
-
// starts with 637-639; 16 digits
|
|
9596
|
-
instapayment: /^63[7-9]\d{0,13}/,
|
|
9597
|
-
|
|
9598
|
-
// starts with 2131/1800; 15 digits
|
|
9599
|
-
jcb15: /^(?:2131|1800)\d{0,11}/,
|
|
9600
|
-
|
|
9601
|
-
// starts with 2131/1800/35; 16 digits
|
|
9602
|
-
jcb: /^(?:35\d{0,2})\d{0,12}/,
|
|
9603
|
-
|
|
9604
|
-
// starts with 50/56-58/6304/67; 16 digits
|
|
9605
|
-
maestro: /^(?:5[0678]\d{0,2}|6304|67\d{0,2})\d{0,12}/,
|
|
9606
|
-
|
|
9607
|
-
// starts with 22; 16 digits
|
|
9608
|
-
mir: /^220[0-4]\d{0,12}/,
|
|
9609
|
-
|
|
9610
|
-
// starts with 4; 16 digits
|
|
9611
|
-
visa: /^4\d{0,15}/,
|
|
9612
|
-
|
|
9613
|
-
// starts with 62/81; 16 digits
|
|
9614
|
-
unionPay: /^(62|81)\d{0,14}/
|
|
9615
|
-
},
|
|
9616
|
-
|
|
9617
|
-
getStrictBlocks: function (block) {
|
|
9618
|
-
var total = block.reduce(function (prev, current) {
|
|
9619
|
-
return prev + current;
|
|
9620
|
-
}, 0);
|
|
9621
|
-
|
|
9622
|
-
return block.concat(19 - total);
|
|
9623
|
-
},
|
|
9624
|
-
|
|
9625
|
-
getInfo: function (value, strictMode) {
|
|
9626
|
-
var blocks = CreditCardDetector.blocks,
|
|
9627
|
-
re = CreditCardDetector.re;
|
|
9628
|
-
|
|
9629
|
-
// Some credit card can have up to 19 digits number.
|
|
9630
|
-
// Set strictMode to true will remove the 16 max-length restrain,
|
|
9631
|
-
// however, I never found any website validate card number like
|
|
9632
|
-
// this, hence probably you don't want to enable this option.
|
|
9633
|
-
strictMode = !!strictMode;
|
|
9634
|
-
|
|
9635
|
-
for (var key in re) {
|
|
9636
|
-
if (re[key].test(value)) {
|
|
9637
|
-
var matchedBlocks = blocks[key];
|
|
9638
|
-
return {
|
|
9639
|
-
type: key,
|
|
9640
|
-
blocks: strictMode ? this.getStrictBlocks(matchedBlocks) : matchedBlocks
|
|
9641
|
-
};
|
|
9642
|
-
}
|
|
9643
|
-
}
|
|
9644
|
-
|
|
9645
|
-
return {
|
|
9646
|
-
type: 'unknown',
|
|
9647
|
-
blocks: strictMode ? this.getStrictBlocks(blocks.general) : blocks.general
|
|
9648
|
-
};
|
|
9649
|
-
}
|
|
9650
|
-
};
|
|
9651
|
-
|
|
9652
|
-
var CreditCardDetector_1 = CreditCardDetector;
|
|
9653
|
-
|
|
9654
|
-
var Util = {
|
|
9655
|
-
noop: function () {
|
|
9656
|
-
},
|
|
9657
|
-
|
|
9658
|
-
strip: function (value, re) {
|
|
9659
|
-
return value.replace(re, '');
|
|
9660
|
-
},
|
|
9661
|
-
|
|
9662
|
-
getPostDelimiter: function (value, delimiter, delimiters) {
|
|
9663
|
-
// single delimiter
|
|
9664
|
-
if (delimiters.length === 0) {
|
|
9665
|
-
return value.slice(-delimiter.length) === delimiter ? delimiter : '';
|
|
9666
|
-
}
|
|
9667
|
-
|
|
9668
|
-
// multiple delimiters
|
|
9669
|
-
var matchedDelimiter = '';
|
|
9670
|
-
delimiters.forEach(function (current) {
|
|
9671
|
-
if (value.slice(-current.length) === current) {
|
|
9672
|
-
matchedDelimiter = current;
|
|
9673
|
-
}
|
|
9674
|
-
});
|
|
9675
|
-
|
|
9676
|
-
return matchedDelimiter;
|
|
9677
|
-
},
|
|
9678
|
-
|
|
9679
|
-
getDelimiterREByDelimiter: function (delimiter) {
|
|
9680
|
-
return new RegExp(delimiter.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'), 'g');
|
|
9681
|
-
},
|
|
9682
|
-
|
|
9683
|
-
getNextCursorPosition: function (prevPos, oldValue, newValue, delimiter, delimiters) {
|
|
9684
|
-
// If cursor was at the end of value, just place it back.
|
|
9685
|
-
// Because new value could contain additional chars.
|
|
9686
|
-
if (oldValue.length === prevPos) {
|
|
9687
|
-
return newValue.length;
|
|
9688
|
-
}
|
|
9689
|
-
|
|
9690
|
-
return prevPos + this.getPositionOffset(prevPos, oldValue, newValue, delimiter ,delimiters);
|
|
9691
|
-
},
|
|
9692
|
-
|
|
9693
|
-
getPositionOffset: function (prevPos, oldValue, newValue, delimiter, delimiters) {
|
|
9694
|
-
var oldRawValue, newRawValue, lengthOffset;
|
|
9695
|
-
|
|
9696
|
-
oldRawValue = this.stripDelimiters(oldValue.slice(0, prevPos), delimiter, delimiters);
|
|
9697
|
-
newRawValue = this.stripDelimiters(newValue.slice(0, prevPos), delimiter, delimiters);
|
|
9698
|
-
lengthOffset = oldRawValue.length - newRawValue.length;
|
|
9699
|
-
|
|
9700
|
-
return (lengthOffset !== 0) ? (lengthOffset / Math.abs(lengthOffset)) : 0;
|
|
9701
|
-
},
|
|
9702
|
-
|
|
9703
|
-
stripDelimiters: function (value, delimiter, delimiters) {
|
|
9704
|
-
var owner = this;
|
|
9705
|
-
|
|
9706
|
-
// single delimiter
|
|
9707
|
-
if (delimiters.length === 0) {
|
|
9708
|
-
var delimiterRE = delimiter ? owner.getDelimiterREByDelimiter(delimiter) : '';
|
|
9709
|
-
|
|
9710
|
-
return value.replace(delimiterRE, '');
|
|
9711
|
-
}
|
|
9712
|
-
|
|
9713
|
-
// multiple delimiters
|
|
9714
|
-
delimiters.forEach(function (current) {
|
|
9715
|
-
current.split('').forEach(function (letter) {
|
|
9716
|
-
value = value.replace(owner.getDelimiterREByDelimiter(letter), '');
|
|
9717
|
-
});
|
|
9718
|
-
});
|
|
9719
|
-
|
|
9720
|
-
return value;
|
|
9721
|
-
},
|
|
9722
|
-
|
|
9723
|
-
headStr: function (str, length) {
|
|
9724
|
-
return str.slice(0, length);
|
|
9725
|
-
},
|
|
9726
|
-
|
|
9727
|
-
getMaxLength: function (blocks) {
|
|
9728
|
-
return blocks.reduce(function (previous, current) {
|
|
9729
|
-
return previous + current;
|
|
9730
|
-
}, 0);
|
|
9731
|
-
},
|
|
9732
|
-
|
|
9733
|
-
// strip prefix
|
|
9734
|
-
// Before type | After type | Return value
|
|
9735
|
-
// PEFIX-... | PEFIX-... | ''
|
|
9736
|
-
// PREFIX-123 | PEFIX-123 | 123
|
|
9737
|
-
// PREFIX-123 | PREFIX-23 | 23
|
|
9738
|
-
// PREFIX-123 | PREFIX-1234 | 1234
|
|
9739
|
-
getPrefixStrippedValue: function (value, prefix, prefixLength, prevResult, delimiter, delimiters, noImmediatePrefix, tailPrefix, signBeforePrefix) {
|
|
9740
|
-
// No prefix
|
|
9741
|
-
if (prefixLength === 0) {
|
|
9742
|
-
return value;
|
|
9743
|
-
}
|
|
9744
|
-
|
|
9745
|
-
// Value is prefix
|
|
9746
|
-
if (value === prefix && value !== '') {
|
|
9747
|
-
return '';
|
|
9748
|
-
}
|
|
9749
|
-
|
|
9750
|
-
if (signBeforePrefix && (value.slice(0, 1) == '-')) {
|
|
9751
|
-
var prev = (prevResult.slice(0, 1) == '-') ? prevResult.slice(1) : prevResult;
|
|
9752
|
-
return '-' + this.getPrefixStrippedValue(value.slice(1), prefix, prefixLength, prev, delimiter, delimiters, noImmediatePrefix, tailPrefix, signBeforePrefix);
|
|
9753
|
-
}
|
|
9754
|
-
|
|
9755
|
-
// Pre result prefix string does not match pre-defined prefix
|
|
9756
|
-
if (prevResult.slice(0, prefixLength) !== prefix && !tailPrefix) {
|
|
9757
|
-
// Check if the first time user entered something
|
|
9758
|
-
if (noImmediatePrefix && !prevResult && value) return value;
|
|
9759
|
-
return '';
|
|
9760
|
-
} else if (prevResult.slice(-prefixLength) !== prefix && tailPrefix) {
|
|
9761
|
-
// Check if the first time user entered something
|
|
9762
|
-
if (noImmediatePrefix && !prevResult && value) return value;
|
|
9763
|
-
return '';
|
|
9764
|
-
}
|
|
9765
|
-
|
|
9766
|
-
var prevValue = this.stripDelimiters(prevResult, delimiter, delimiters);
|
|
9767
|
-
|
|
9768
|
-
// New value has issue, someone typed in between prefix letters
|
|
9769
|
-
// Revert to pre value
|
|
9770
|
-
if (value.slice(0, prefixLength) !== prefix && !tailPrefix) {
|
|
9771
|
-
return prevValue.slice(prefixLength);
|
|
9772
|
-
} else if (value.slice(-prefixLength) !== prefix && tailPrefix) {
|
|
9773
|
-
return prevValue.slice(0, -prefixLength - 1);
|
|
9774
|
-
}
|
|
9775
|
-
|
|
9776
|
-
// No issue, strip prefix for new value
|
|
9777
|
-
return tailPrefix ? value.slice(0, -prefixLength) : value.slice(prefixLength);
|
|
9778
|
-
},
|
|
9779
|
-
|
|
9780
|
-
getFirstDiffIndex: function (prev, current) {
|
|
9781
|
-
var index = 0;
|
|
9782
|
-
|
|
9783
|
-
while (prev.charAt(index) === current.charAt(index)) {
|
|
9784
|
-
if (prev.charAt(index++) === '') {
|
|
9785
|
-
return -1;
|
|
9786
|
-
}
|
|
9787
|
-
}
|
|
9788
|
-
|
|
9789
|
-
return index;
|
|
9790
|
-
},
|
|
9791
|
-
|
|
9792
|
-
getFormattedValue: function (value, blocks, blocksLength, delimiter, delimiters, delimiterLazyShow) {
|
|
9793
|
-
var result = '',
|
|
9794
|
-
multipleDelimiters = delimiters.length > 0,
|
|
9795
|
-
currentDelimiter = '';
|
|
9796
|
-
|
|
9797
|
-
// no options, normal input
|
|
9798
|
-
if (blocksLength === 0) {
|
|
9799
|
-
return value;
|
|
9800
|
-
}
|
|
9801
|
-
|
|
9802
|
-
blocks.forEach(function (length, index) {
|
|
9803
|
-
if (value.length > 0) {
|
|
9804
|
-
var sub = value.slice(0, length),
|
|
9805
|
-
rest = value.slice(length);
|
|
9806
|
-
|
|
9807
|
-
if (multipleDelimiters) {
|
|
9808
|
-
currentDelimiter = delimiters[delimiterLazyShow ? (index - 1) : index] || currentDelimiter;
|
|
9809
|
-
} else {
|
|
9810
|
-
currentDelimiter = delimiter;
|
|
9811
|
-
}
|
|
9812
|
-
|
|
9813
|
-
if (delimiterLazyShow) {
|
|
9814
|
-
if (index > 0) {
|
|
9815
|
-
result += currentDelimiter;
|
|
9816
|
-
}
|
|
9817
|
-
|
|
9818
|
-
result += sub;
|
|
9819
|
-
} else {
|
|
9820
|
-
result += sub;
|
|
9821
|
-
|
|
9822
|
-
if (sub.length === length && index < blocksLength - 1) {
|
|
9823
|
-
result += currentDelimiter;
|
|
9824
|
-
}
|
|
9825
|
-
}
|
|
9826
|
-
|
|
9827
|
-
// update remaining string
|
|
9828
|
-
value = rest;
|
|
9829
|
-
}
|
|
9830
|
-
});
|
|
9831
|
-
|
|
9832
|
-
return result;
|
|
9833
|
-
},
|
|
9834
|
-
|
|
9835
|
-
// move cursor to the end
|
|
9836
|
-
// the first time user focuses on an input with prefix
|
|
9837
|
-
fixPrefixCursor: function (el, prefix, delimiter, delimiters) {
|
|
9838
|
-
if (!el) {
|
|
9839
|
-
return;
|
|
9840
|
-
}
|
|
9841
|
-
|
|
9842
|
-
var val = el.value,
|
|
9843
|
-
appendix = delimiter || (delimiters[0] || ' ');
|
|
9844
|
-
|
|
9845
|
-
if (!el.setSelectionRange || !prefix || (prefix.length + appendix.length) <= val.length) {
|
|
9846
|
-
return;
|
|
9847
|
-
}
|
|
9848
|
-
|
|
9849
|
-
var len = val.length * 2;
|
|
9850
|
-
|
|
9851
|
-
// set timeout to avoid blink
|
|
9852
|
-
setTimeout(function () {
|
|
9853
|
-
el.setSelectionRange(len, len);
|
|
9854
|
-
}, 1);
|
|
9855
|
-
},
|
|
9856
|
-
|
|
9857
|
-
// Check if input field is fully selected
|
|
9858
|
-
checkFullSelection: function(value) {
|
|
9859
|
-
try {
|
|
9860
|
-
var selection = window.getSelection() || document.getSelection() || {};
|
|
9861
|
-
return selection.toString().length === value.length;
|
|
9862
|
-
} catch (ex) {
|
|
9863
|
-
// Ignore
|
|
9864
|
-
}
|
|
9865
|
-
|
|
9866
|
-
return false;
|
|
9867
|
-
},
|
|
9868
|
-
|
|
9869
|
-
setSelection: function (element, position, doc) {
|
|
9870
|
-
if (element !== this.getActiveElement(doc)) {
|
|
9871
|
-
return;
|
|
9872
|
-
}
|
|
9873
|
-
|
|
9874
|
-
// cursor is already in the end
|
|
9875
|
-
if (element && element.value.length <= position) {
|
|
9876
|
-
return;
|
|
9877
|
-
}
|
|
9878
|
-
|
|
9879
|
-
if (element.createTextRange) {
|
|
9880
|
-
var range = element.createTextRange();
|
|
9881
|
-
|
|
9882
|
-
range.move('character', position);
|
|
9883
|
-
range.select();
|
|
9884
|
-
} else {
|
|
9885
|
-
try {
|
|
9886
|
-
element.setSelectionRange(position, position);
|
|
9887
|
-
} catch (e) {
|
|
9888
|
-
// eslint-disable-next-line
|
|
9889
|
-
console.warn('The input element type does not support selection');
|
|
9890
|
-
}
|
|
9891
|
-
}
|
|
9892
|
-
},
|
|
9893
|
-
|
|
9894
|
-
getActiveElement: function(parent) {
|
|
9895
|
-
var activeElement = parent.activeElement;
|
|
9896
|
-
if (activeElement && activeElement.shadowRoot) {
|
|
9897
|
-
return this.getActiveElement(activeElement.shadowRoot);
|
|
9898
|
-
}
|
|
9899
|
-
return activeElement;
|
|
9900
|
-
},
|
|
9901
|
-
|
|
9902
|
-
isAndroid: function () {
|
|
9903
|
-
return navigator && /android/i.test(navigator.userAgent);
|
|
9904
|
-
},
|
|
9905
|
-
|
|
9906
|
-
// On Android chrome, the keyup and keydown events
|
|
9907
|
-
// always return key code 229 as a composition that
|
|
9908
|
-
// buffers the user’s keystrokes
|
|
9909
|
-
// see https://github.com/nosir/cleave.js/issues/147
|
|
9910
|
-
isAndroidBackspaceKeydown: function (lastInputValue, currentInputValue) {
|
|
9911
|
-
if (!this.isAndroid() || !lastInputValue || !currentInputValue) {
|
|
9912
|
-
return false;
|
|
9913
|
-
}
|
|
9914
|
-
|
|
9915
|
-
return currentInputValue === lastInputValue.slice(0, -1);
|
|
9916
|
-
}
|
|
9917
|
-
};
|
|
9918
|
-
|
|
9919
|
-
var Util_1 = Util;
|
|
9920
|
-
|
|
9921
|
-
/**
|
|
9922
|
-
* Props Assignment
|
|
9923
|
-
*
|
|
9924
|
-
* Separate this, so react module can share the usage
|
|
9925
|
-
*/
|
|
9926
|
-
var DefaultProperties = {
|
|
9927
|
-
// Maybe change to object-assign
|
|
9928
|
-
// for now just keep it as simple
|
|
9929
|
-
assign: function (target, opts) {
|
|
9930
|
-
target = target || {};
|
|
9931
|
-
opts = opts || {};
|
|
9932
|
-
|
|
9933
|
-
// credit card
|
|
9934
|
-
target.creditCard = !!opts.creditCard;
|
|
9935
|
-
target.creditCardStrictMode = !!opts.creditCardStrictMode;
|
|
9936
|
-
target.creditCardType = '';
|
|
9937
|
-
target.onCreditCardTypeChanged = opts.onCreditCardTypeChanged || (function () {});
|
|
9938
|
-
|
|
9939
|
-
// phone
|
|
9940
|
-
target.phone = !!opts.phone;
|
|
9941
|
-
target.phoneRegionCode = opts.phoneRegionCode || 'AU';
|
|
9942
|
-
target.phoneFormatter = {};
|
|
9943
|
-
|
|
9944
|
-
// time
|
|
9945
|
-
target.time = !!opts.time;
|
|
9946
|
-
target.timePattern = opts.timePattern || ['h', 'm', 's'];
|
|
9947
|
-
target.timeFormat = opts.timeFormat || '24';
|
|
9948
|
-
target.timeFormatter = {};
|
|
9949
|
-
|
|
9950
|
-
// date
|
|
9951
|
-
target.date = !!opts.date;
|
|
9952
|
-
target.datePattern = opts.datePattern || ['d', 'm', 'Y'];
|
|
9953
|
-
target.dateMin = opts.dateMin || '';
|
|
9954
|
-
target.dateMax = opts.dateMax || '';
|
|
9955
|
-
target.dateFormatter = {};
|
|
9956
|
-
|
|
9957
|
-
// numeral
|
|
9958
|
-
target.numeral = !!opts.numeral;
|
|
9959
|
-
target.numeralIntegerScale = opts.numeralIntegerScale > 0 ? opts.numeralIntegerScale : 0;
|
|
9960
|
-
target.numeralDecimalScale = opts.numeralDecimalScale >= 0 ? opts.numeralDecimalScale : 2;
|
|
9961
|
-
target.numeralDecimalMark = opts.numeralDecimalMark || '.';
|
|
9962
|
-
target.numeralThousandsGroupStyle = opts.numeralThousandsGroupStyle || 'thousand';
|
|
9963
|
-
target.numeralPositiveOnly = !!opts.numeralPositiveOnly;
|
|
9964
|
-
target.stripLeadingZeroes = opts.stripLeadingZeroes !== false;
|
|
9965
|
-
target.signBeforePrefix = !!opts.signBeforePrefix;
|
|
9966
|
-
target.tailPrefix = !!opts.tailPrefix;
|
|
9967
|
-
|
|
9968
|
-
// others
|
|
9969
|
-
target.swapHiddenInput = !!opts.swapHiddenInput;
|
|
9970
|
-
|
|
9971
|
-
target.numericOnly = target.creditCard || target.date || !!opts.numericOnly;
|
|
9972
|
-
|
|
9973
|
-
target.uppercase = !!opts.uppercase;
|
|
9974
|
-
target.lowercase = !!opts.lowercase;
|
|
9975
|
-
|
|
9976
|
-
target.prefix = (target.creditCard || target.date) ? '' : (opts.prefix || '');
|
|
9977
|
-
target.noImmediatePrefix = !!opts.noImmediatePrefix;
|
|
9978
|
-
target.prefixLength = target.prefix.length;
|
|
9979
|
-
target.rawValueTrimPrefix = !!opts.rawValueTrimPrefix;
|
|
9980
|
-
target.copyDelimiter = !!opts.copyDelimiter;
|
|
9981
|
-
|
|
9982
|
-
target.initValue = (opts.initValue !== undefined && opts.initValue !== null) ? opts.initValue.toString() : '';
|
|
9983
|
-
|
|
9984
|
-
target.delimiter =
|
|
9985
|
-
(opts.delimiter || opts.delimiter === '') ? opts.delimiter :
|
|
9986
|
-
(opts.date ? '/' :
|
|
9987
|
-
(opts.time ? ':' :
|
|
9988
|
-
(opts.numeral ? ',' :
|
|
9989
|
-
(opts.phone ? ' ' :
|
|
9990
|
-
' '))));
|
|
9991
|
-
target.delimiterLength = target.delimiter.length;
|
|
9992
|
-
target.delimiterLazyShow = !!opts.delimiterLazyShow;
|
|
9993
|
-
target.delimiters = opts.delimiters || [];
|
|
9994
|
-
|
|
9995
|
-
target.blocks = opts.blocks || [];
|
|
9996
|
-
target.blocksLength = target.blocks.length;
|
|
9997
|
-
|
|
9998
|
-
target.root = (typeof commonjsGlobal === 'object' && commonjsGlobal) ? commonjsGlobal : window;
|
|
9999
|
-
target.document = opts.document || target.root.document;
|
|
10000
|
-
|
|
10001
|
-
target.maxLength = 0;
|
|
10002
|
-
|
|
10003
|
-
target.backspace = false;
|
|
10004
|
-
target.result = '';
|
|
10005
|
-
|
|
10006
|
-
target.onValueChanged = opts.onValueChanged || (function () {});
|
|
10007
|
-
|
|
10008
|
-
return target;
|
|
10009
|
-
}
|
|
10010
|
-
};
|
|
10011
|
-
|
|
10012
|
-
var DefaultProperties_1 = DefaultProperties;
|
|
10013
|
-
|
|
10014
|
-
/**
|
|
10015
|
-
* Construct a new Cleave instance by passing the configuration object
|
|
10016
|
-
*
|
|
10017
|
-
* @param {String | HTMLElement} element
|
|
10018
|
-
* @param {Object} opts
|
|
10019
|
-
*/
|
|
10020
|
-
var Cleave = function (element, opts) {
|
|
10021
|
-
var owner = this;
|
|
10022
|
-
var hasMultipleElements = false;
|
|
10023
|
-
|
|
10024
|
-
if (typeof element === 'string') {
|
|
10025
|
-
owner.element = document.querySelector(element);
|
|
10026
|
-
hasMultipleElements = document.querySelectorAll(element).length > 1;
|
|
10027
|
-
} else {
|
|
10028
|
-
if (typeof element.length !== 'undefined' && element.length > 0) {
|
|
10029
|
-
owner.element = element[0];
|
|
10030
|
-
hasMultipleElements = element.length > 1;
|
|
10031
|
-
} else {
|
|
10032
|
-
owner.element = element;
|
|
10033
|
-
}
|
|
10034
|
-
}
|
|
10035
|
-
|
|
10036
|
-
if (!owner.element) {
|
|
10037
|
-
throw new Error('[cleave.js] Please check the element');
|
|
10038
|
-
}
|
|
10039
|
-
|
|
10040
|
-
if (hasMultipleElements) {
|
|
10041
|
-
try {
|
|
10042
|
-
// eslint-disable-next-line
|
|
10043
|
-
console.warn('[cleave.js] Multiple input fields matched, cleave.js will only take the first one.');
|
|
10044
|
-
} catch (e) {
|
|
10045
|
-
// Old IE
|
|
10046
|
-
}
|
|
10047
|
-
}
|
|
10048
|
-
|
|
10049
|
-
opts.initValue = owner.element.value;
|
|
10050
|
-
|
|
10051
|
-
owner.properties = Cleave.DefaultProperties.assign({}, opts);
|
|
10052
|
-
|
|
10053
|
-
owner.init();
|
|
10054
|
-
};
|
|
10055
|
-
|
|
10056
|
-
Cleave.prototype = {
|
|
10057
|
-
init: function () {
|
|
10058
|
-
var owner = this, pps = owner.properties;
|
|
10059
|
-
|
|
10060
|
-
// no need to use this lib
|
|
10061
|
-
if (!pps.numeral && !pps.phone && !pps.creditCard && !pps.time && !pps.date && (pps.blocksLength === 0 && !pps.prefix)) {
|
|
10062
|
-
owner.onInput(pps.initValue);
|
|
10063
|
-
|
|
10064
|
-
return;
|
|
10065
|
-
}
|
|
10066
|
-
|
|
10067
|
-
pps.maxLength = Cleave.Util.getMaxLength(pps.blocks);
|
|
10068
|
-
|
|
10069
|
-
owner.isAndroid = Cleave.Util.isAndroid();
|
|
10070
|
-
owner.lastInputValue = '';
|
|
10071
|
-
owner.isBackward = '';
|
|
10072
|
-
|
|
10073
|
-
owner.onChangeListener = owner.onChange.bind(owner);
|
|
10074
|
-
owner.onKeyDownListener = owner.onKeyDown.bind(owner);
|
|
10075
|
-
owner.onFocusListener = owner.onFocus.bind(owner);
|
|
10076
|
-
owner.onCutListener = owner.onCut.bind(owner);
|
|
10077
|
-
owner.onCopyListener = owner.onCopy.bind(owner);
|
|
10078
|
-
|
|
10079
|
-
owner.initSwapHiddenInput();
|
|
10080
|
-
|
|
10081
|
-
owner.element.addEventListener('input', owner.onChangeListener);
|
|
10082
|
-
owner.element.addEventListener('keydown', owner.onKeyDownListener);
|
|
10083
|
-
owner.element.addEventListener('focus', owner.onFocusListener);
|
|
10084
|
-
owner.element.addEventListener('cut', owner.onCutListener);
|
|
10085
|
-
owner.element.addEventListener('copy', owner.onCopyListener);
|
|
10086
|
-
|
|
10087
|
-
|
|
10088
|
-
owner.initPhoneFormatter();
|
|
10089
|
-
owner.initDateFormatter();
|
|
10090
|
-
owner.initTimeFormatter();
|
|
10091
|
-
owner.initNumeralFormatter();
|
|
10092
|
-
|
|
10093
|
-
// avoid touch input field if value is null
|
|
10094
|
-
// otherwise Firefox will add red box-shadow for <input required />
|
|
10095
|
-
if (pps.initValue || (pps.prefix && !pps.noImmediatePrefix)) {
|
|
10096
|
-
owner.onInput(pps.initValue);
|
|
10097
|
-
}
|
|
10098
|
-
},
|
|
10099
|
-
|
|
10100
|
-
initSwapHiddenInput: function () {
|
|
10101
|
-
var owner = this, pps = owner.properties;
|
|
10102
|
-
if (!pps.swapHiddenInput) return;
|
|
10103
|
-
|
|
10104
|
-
var inputFormatter = owner.element.cloneNode(true);
|
|
10105
|
-
owner.element.parentNode.insertBefore(inputFormatter, owner.element);
|
|
10106
|
-
|
|
10107
|
-
owner.elementSwapHidden = owner.element;
|
|
10108
|
-
owner.elementSwapHidden.type = 'hidden';
|
|
10109
|
-
|
|
10110
|
-
owner.element = inputFormatter;
|
|
10111
|
-
owner.element.id = '';
|
|
10112
|
-
},
|
|
10113
|
-
|
|
10114
|
-
initNumeralFormatter: function () {
|
|
10115
|
-
var owner = this, pps = owner.properties;
|
|
10116
|
-
|
|
10117
|
-
if (!pps.numeral) {
|
|
10118
|
-
return;
|
|
10119
|
-
}
|
|
10120
|
-
|
|
10121
|
-
pps.numeralFormatter = new Cleave.NumeralFormatter(
|
|
10122
|
-
pps.numeralDecimalMark,
|
|
10123
|
-
pps.numeralIntegerScale,
|
|
10124
|
-
pps.numeralDecimalScale,
|
|
10125
|
-
pps.numeralThousandsGroupStyle,
|
|
10126
|
-
pps.numeralPositiveOnly,
|
|
10127
|
-
pps.stripLeadingZeroes,
|
|
10128
|
-
pps.prefix,
|
|
10129
|
-
pps.signBeforePrefix,
|
|
10130
|
-
pps.tailPrefix,
|
|
10131
|
-
pps.delimiter
|
|
10132
|
-
);
|
|
10133
|
-
},
|
|
10134
|
-
|
|
10135
|
-
initTimeFormatter: function() {
|
|
10136
|
-
var owner = this, pps = owner.properties;
|
|
10137
|
-
|
|
10138
|
-
if (!pps.time) {
|
|
10139
|
-
return;
|
|
10140
|
-
}
|
|
10141
|
-
|
|
10142
|
-
pps.timeFormatter = new Cleave.TimeFormatter(pps.timePattern, pps.timeFormat);
|
|
10143
|
-
pps.blocks = pps.timeFormatter.getBlocks();
|
|
10144
|
-
pps.blocksLength = pps.blocks.length;
|
|
10145
|
-
pps.maxLength = Cleave.Util.getMaxLength(pps.blocks);
|
|
10146
|
-
},
|
|
10147
|
-
|
|
10148
|
-
initDateFormatter: function () {
|
|
10149
|
-
var owner = this, pps = owner.properties;
|
|
10150
|
-
|
|
10151
|
-
if (!pps.date) {
|
|
10152
|
-
return;
|
|
10153
|
-
}
|
|
10154
|
-
|
|
10155
|
-
pps.dateFormatter = new Cleave.DateFormatter(pps.datePattern, pps.dateMin, pps.dateMax);
|
|
10156
|
-
pps.blocks = pps.dateFormatter.getBlocks();
|
|
10157
|
-
pps.blocksLength = pps.blocks.length;
|
|
10158
|
-
pps.maxLength = Cleave.Util.getMaxLength(pps.blocks);
|
|
10159
|
-
},
|
|
10160
|
-
|
|
10161
|
-
initPhoneFormatter: function () {
|
|
10162
|
-
var owner = this, pps = owner.properties;
|
|
10163
|
-
|
|
10164
|
-
if (!pps.phone) {
|
|
10165
|
-
return;
|
|
10166
|
-
}
|
|
10167
|
-
|
|
10168
|
-
// Cleave.AsYouTypeFormatter should be provided by
|
|
10169
|
-
// external google closure lib
|
|
10170
|
-
try {
|
|
10171
|
-
pps.phoneFormatter = new Cleave.PhoneFormatter(
|
|
10172
|
-
new pps.root.Cleave.AsYouTypeFormatter(pps.phoneRegionCode),
|
|
10173
|
-
pps.delimiter
|
|
10174
|
-
);
|
|
10175
|
-
} catch (ex) {
|
|
10176
|
-
throw new Error('[cleave.js] Please include phone-type-formatter.{country}.js lib');
|
|
10177
|
-
}
|
|
10178
|
-
},
|
|
10179
|
-
|
|
10180
|
-
onKeyDown: function (event) {
|
|
10181
|
-
var owner = this,
|
|
10182
|
-
charCode = event.which || event.keyCode;
|
|
10183
|
-
|
|
10184
|
-
owner.lastInputValue = owner.element.value;
|
|
10185
|
-
owner.isBackward = charCode === 8;
|
|
10186
|
-
},
|
|
10187
|
-
|
|
10188
|
-
onChange: function (event) {
|
|
10189
|
-
var owner = this, pps = owner.properties,
|
|
10190
|
-
Util = Cleave.Util;
|
|
10191
|
-
|
|
10192
|
-
owner.isBackward = owner.isBackward || event.inputType === 'deleteContentBackward';
|
|
10193
|
-
|
|
10194
|
-
var postDelimiter = Util.getPostDelimiter(owner.lastInputValue, pps.delimiter, pps.delimiters);
|
|
10195
|
-
|
|
10196
|
-
if (owner.isBackward && postDelimiter) {
|
|
10197
|
-
pps.postDelimiterBackspace = postDelimiter;
|
|
10198
|
-
} else {
|
|
10199
|
-
pps.postDelimiterBackspace = false;
|
|
10200
|
-
}
|
|
10201
|
-
|
|
10202
|
-
this.onInput(this.element.value);
|
|
10203
|
-
},
|
|
10204
|
-
|
|
10205
|
-
onFocus: function () {
|
|
10206
|
-
var owner = this,
|
|
10207
|
-
pps = owner.properties;
|
|
10208
|
-
owner.lastInputValue = owner.element.value;
|
|
10209
|
-
|
|
10210
|
-
if (pps.prefix && pps.noImmediatePrefix && !owner.element.value) {
|
|
10211
|
-
this.onInput(pps.prefix);
|
|
10212
|
-
}
|
|
10213
|
-
|
|
10214
|
-
Cleave.Util.fixPrefixCursor(owner.element, pps.prefix, pps.delimiter, pps.delimiters);
|
|
10215
|
-
},
|
|
10216
|
-
|
|
10217
|
-
onCut: function (e) {
|
|
10218
|
-
if (!Cleave.Util.checkFullSelection(this.element.value)) return;
|
|
10219
|
-
this.copyClipboardData(e);
|
|
10220
|
-
this.onInput('');
|
|
10221
|
-
},
|
|
10222
|
-
|
|
10223
|
-
onCopy: function (e) {
|
|
10224
|
-
if (!Cleave.Util.checkFullSelection(this.element.value)) return;
|
|
10225
|
-
this.copyClipboardData(e);
|
|
10226
|
-
},
|
|
10227
|
-
|
|
10228
|
-
copyClipboardData: function (e) {
|
|
10229
|
-
var owner = this,
|
|
10230
|
-
pps = owner.properties,
|
|
10231
|
-
Util = Cleave.Util,
|
|
10232
|
-
inputValue = owner.element.value,
|
|
10233
|
-
textToCopy = '';
|
|
10234
|
-
|
|
10235
|
-
if (!pps.copyDelimiter) {
|
|
10236
|
-
textToCopy = Util.stripDelimiters(inputValue, pps.delimiter, pps.delimiters);
|
|
10237
|
-
} else {
|
|
10238
|
-
textToCopy = inputValue;
|
|
10239
|
-
}
|
|
10240
|
-
|
|
10241
|
-
try {
|
|
10242
|
-
if (e.clipboardData) {
|
|
10243
|
-
e.clipboardData.setData('Text', textToCopy);
|
|
10244
|
-
} else {
|
|
10245
|
-
window.clipboardData.setData('Text', textToCopy);
|
|
10246
|
-
}
|
|
10247
|
-
|
|
10248
|
-
e.preventDefault();
|
|
10249
|
-
} catch (ex) {
|
|
10250
|
-
// empty
|
|
10251
|
-
}
|
|
10252
|
-
},
|
|
10253
|
-
|
|
10254
|
-
onInput: function (value) {
|
|
10255
|
-
var owner = this, pps = owner.properties,
|
|
10256
|
-
Util = Cleave.Util;
|
|
10257
|
-
|
|
10258
|
-
// case 1: delete one more character "4"
|
|
10259
|
-
// 1234*| -> hit backspace -> 123|
|
|
10260
|
-
// case 2: last character is not delimiter which is:
|
|
10261
|
-
// 12|34* -> hit backspace -> 1|34*
|
|
10262
|
-
// note: no need to apply this for numeral mode
|
|
10263
|
-
var postDelimiterAfter = Util.getPostDelimiter(value, pps.delimiter, pps.delimiters);
|
|
10264
|
-
if (!pps.numeral && pps.postDelimiterBackspace && !postDelimiterAfter) {
|
|
10265
|
-
value = Util.headStr(value, value.length - pps.postDelimiterBackspace.length);
|
|
10266
|
-
}
|
|
10267
|
-
|
|
10268
|
-
// phone formatter
|
|
10269
|
-
if (pps.phone) {
|
|
10270
|
-
if (pps.prefix && (!pps.noImmediatePrefix || value.length)) {
|
|
10271
|
-
pps.result = pps.prefix + pps.phoneFormatter.format(value).slice(pps.prefix.length);
|
|
10272
|
-
} else {
|
|
10273
|
-
pps.result = pps.phoneFormatter.format(value);
|
|
10274
|
-
}
|
|
10275
|
-
owner.updateValueState();
|
|
10276
|
-
|
|
10277
|
-
return;
|
|
10278
|
-
}
|
|
10279
|
-
|
|
10280
|
-
// numeral formatter
|
|
10281
|
-
if (pps.numeral) {
|
|
10282
|
-
// Do not show prefix when noImmediatePrefix is specified
|
|
10283
|
-
// This mostly because we need to show user the native input placeholder
|
|
10284
|
-
if (pps.prefix && pps.noImmediatePrefix && value.length === 0) {
|
|
10285
|
-
pps.result = '';
|
|
10286
|
-
} else {
|
|
10287
|
-
pps.result = pps.numeralFormatter.format(value);
|
|
10288
|
-
}
|
|
10289
|
-
owner.updateValueState();
|
|
10290
|
-
|
|
10291
|
-
return;
|
|
10292
|
-
}
|
|
10293
|
-
|
|
10294
|
-
// date
|
|
10295
|
-
if (pps.date) {
|
|
10296
|
-
value = pps.dateFormatter.getValidatedDate(value);
|
|
10297
|
-
}
|
|
10298
|
-
|
|
10299
|
-
// time
|
|
10300
|
-
if (pps.time) {
|
|
10301
|
-
value = pps.timeFormatter.getValidatedTime(value);
|
|
10302
|
-
}
|
|
10303
|
-
|
|
10304
|
-
// strip delimiters
|
|
10305
|
-
value = Util.stripDelimiters(value, pps.delimiter, pps.delimiters);
|
|
10306
|
-
|
|
10307
|
-
// strip prefix
|
|
10308
|
-
value = Util.getPrefixStrippedValue(value, pps.prefix, pps.prefixLength, pps.result, pps.delimiter, pps.delimiters, pps.noImmediatePrefix, pps.tailPrefix, pps.signBeforePrefix);
|
|
10309
|
-
|
|
10310
|
-
// strip non-numeric characters
|
|
10311
|
-
value = pps.numericOnly ? Util.strip(value, /[^\d]/g) : value;
|
|
10312
|
-
|
|
10313
|
-
// convert case
|
|
10314
|
-
value = pps.uppercase ? value.toUpperCase() : value;
|
|
10315
|
-
value = pps.lowercase ? value.toLowerCase() : value;
|
|
10316
|
-
|
|
10317
|
-
// prevent from showing prefix when no immediate option enabled with empty input value
|
|
10318
|
-
if (pps.prefix) {
|
|
10319
|
-
if (pps.tailPrefix) {
|
|
10320
|
-
value = value + pps.prefix;
|
|
10321
|
-
} else {
|
|
10322
|
-
value = pps.prefix + value;
|
|
10323
|
-
}
|
|
10324
|
-
|
|
10325
|
-
|
|
10326
|
-
// no blocks specified, no need to do formatting
|
|
10327
|
-
if (pps.blocksLength === 0) {
|
|
10328
|
-
pps.result = value;
|
|
10329
|
-
owner.updateValueState();
|
|
10330
|
-
|
|
10331
|
-
return;
|
|
10332
|
-
}
|
|
10333
|
-
}
|
|
10334
|
-
|
|
10335
|
-
// update credit card props
|
|
10336
|
-
if (pps.creditCard) {
|
|
10337
|
-
owner.updateCreditCardPropsByValue(value);
|
|
10338
|
-
}
|
|
10339
|
-
|
|
10340
|
-
// strip over length characters
|
|
10341
|
-
value = Util.headStr(value, pps.maxLength);
|
|
10342
|
-
|
|
10343
|
-
// apply blocks
|
|
10344
|
-
pps.result = Util.getFormattedValue(
|
|
10345
|
-
value,
|
|
10346
|
-
pps.blocks, pps.blocksLength,
|
|
10347
|
-
pps.delimiter, pps.delimiters, pps.delimiterLazyShow
|
|
10348
|
-
);
|
|
10349
|
-
|
|
10350
|
-
owner.updateValueState();
|
|
10351
|
-
},
|
|
10352
|
-
|
|
10353
|
-
updateCreditCardPropsByValue: function (value) {
|
|
10354
|
-
var owner = this, pps = owner.properties,
|
|
10355
|
-
Util = Cleave.Util,
|
|
10356
|
-
creditCardInfo;
|
|
10357
|
-
|
|
10358
|
-
// At least one of the first 4 characters has changed
|
|
10359
|
-
if (Util.headStr(pps.result, 4) === Util.headStr(value, 4)) {
|
|
10360
|
-
return;
|
|
10361
|
-
}
|
|
10362
|
-
|
|
10363
|
-
creditCardInfo = Cleave.CreditCardDetector.getInfo(value, pps.creditCardStrictMode);
|
|
10364
|
-
|
|
10365
|
-
pps.blocks = creditCardInfo.blocks;
|
|
10366
|
-
pps.blocksLength = pps.blocks.length;
|
|
10367
|
-
pps.maxLength = Util.getMaxLength(pps.blocks);
|
|
10368
|
-
|
|
10369
|
-
// credit card type changed
|
|
10370
|
-
if (pps.creditCardType !== creditCardInfo.type) {
|
|
10371
|
-
pps.creditCardType = creditCardInfo.type;
|
|
10372
|
-
|
|
10373
|
-
pps.onCreditCardTypeChanged.call(owner, pps.creditCardType);
|
|
10374
|
-
}
|
|
10375
|
-
},
|
|
10376
|
-
|
|
10377
|
-
updateValueState: function () {
|
|
10378
|
-
var owner = this,
|
|
10379
|
-
Util = Cleave.Util,
|
|
10380
|
-
pps = owner.properties;
|
|
10381
|
-
|
|
10382
|
-
if (!owner.element) {
|
|
10383
|
-
return;
|
|
10384
|
-
}
|
|
10385
|
-
|
|
10386
|
-
var endPos = owner.element.selectionEnd;
|
|
10387
|
-
var oldValue = owner.element.value;
|
|
10388
|
-
var newValue = pps.result;
|
|
10389
|
-
|
|
10390
|
-
endPos = Util.getNextCursorPosition(endPos, oldValue, newValue, pps.delimiter, pps.delimiters);
|
|
10391
|
-
|
|
10392
|
-
// fix Android browser type="text" input field
|
|
10393
|
-
// cursor not jumping issue
|
|
10394
|
-
if (owner.isAndroid) {
|
|
10395
|
-
window.setTimeout(function () {
|
|
10396
|
-
owner.element.value = newValue;
|
|
10397
|
-
Util.setSelection(owner.element, endPos, pps.document, false);
|
|
10398
|
-
owner.callOnValueChanged();
|
|
10399
|
-
}, 1);
|
|
10400
|
-
|
|
10401
|
-
return;
|
|
10402
|
-
}
|
|
10403
|
-
|
|
10404
|
-
owner.element.value = newValue;
|
|
10405
|
-
if (pps.swapHiddenInput) owner.elementSwapHidden.value = owner.getRawValue();
|
|
10406
|
-
|
|
10407
|
-
Util.setSelection(owner.element, endPos, pps.document, false);
|
|
10408
|
-
owner.callOnValueChanged();
|
|
10409
|
-
},
|
|
10410
|
-
|
|
10411
|
-
callOnValueChanged: function () {
|
|
10412
|
-
var owner = this,
|
|
10413
|
-
pps = owner.properties;
|
|
10414
|
-
|
|
10415
|
-
pps.onValueChanged.call(owner, {
|
|
10416
|
-
target: {
|
|
10417
|
-
name: owner.element.name,
|
|
10418
|
-
value: pps.result,
|
|
10419
|
-
rawValue: owner.getRawValue()
|
|
10420
|
-
}
|
|
10421
|
-
});
|
|
10422
|
-
},
|
|
10423
|
-
|
|
10424
|
-
setPhoneRegionCode: function (phoneRegionCode) {
|
|
10425
|
-
var owner = this, pps = owner.properties;
|
|
10426
|
-
|
|
10427
|
-
pps.phoneRegionCode = phoneRegionCode;
|
|
10428
|
-
owner.initPhoneFormatter();
|
|
10429
|
-
owner.onChange();
|
|
10430
|
-
},
|
|
10431
|
-
|
|
10432
|
-
setRawValue: function (value) {
|
|
10433
|
-
var owner = this, pps = owner.properties;
|
|
10434
|
-
|
|
10435
|
-
value = value !== undefined && value !== null ? value.toString() : '';
|
|
10436
|
-
|
|
10437
|
-
if (pps.numeral) {
|
|
10438
|
-
value = value.replace('.', pps.numeralDecimalMark);
|
|
10439
|
-
}
|
|
10440
|
-
|
|
10441
|
-
pps.postDelimiterBackspace = false;
|
|
10442
|
-
|
|
10443
|
-
owner.element.value = value;
|
|
10444
|
-
owner.onInput(value);
|
|
10445
|
-
},
|
|
10446
|
-
|
|
10447
|
-
getRawValue: function () {
|
|
10448
|
-
var owner = this,
|
|
10449
|
-
pps = owner.properties,
|
|
10450
|
-
Util = Cleave.Util,
|
|
10451
|
-
rawValue = owner.element.value;
|
|
10452
|
-
|
|
10453
|
-
if (pps.rawValueTrimPrefix) {
|
|
10454
|
-
rawValue = Util.getPrefixStrippedValue(rawValue, pps.prefix, pps.prefixLength, pps.result, pps.delimiter, pps.delimiters, pps.noImmediatePrefix, pps.tailPrefix, pps.signBeforePrefix);
|
|
10455
|
-
}
|
|
10456
|
-
|
|
10457
|
-
if (pps.numeral) {
|
|
10458
|
-
rawValue = pps.numeralFormatter.getRawValue(rawValue);
|
|
10459
|
-
} else {
|
|
10460
|
-
rawValue = Util.stripDelimiters(rawValue, pps.delimiter, pps.delimiters);
|
|
10461
|
-
}
|
|
10462
|
-
|
|
10463
|
-
return rawValue;
|
|
10464
|
-
},
|
|
10465
|
-
|
|
10466
|
-
getISOFormatDate: function () {
|
|
10467
|
-
var owner = this,
|
|
10468
|
-
pps = owner.properties;
|
|
10469
|
-
|
|
10470
|
-
return pps.date ? pps.dateFormatter.getISOFormatDate() : '';
|
|
10471
|
-
},
|
|
10472
|
-
|
|
10473
|
-
getISOFormatTime: function () {
|
|
10474
|
-
var owner = this,
|
|
10475
|
-
pps = owner.properties;
|
|
10476
|
-
|
|
10477
|
-
return pps.time ? pps.timeFormatter.getISOFormatTime() : '';
|
|
10478
|
-
},
|
|
10479
|
-
|
|
10480
|
-
getFormattedValue: function () {
|
|
10481
|
-
return this.element.value;
|
|
10482
|
-
},
|
|
10483
|
-
|
|
10484
|
-
destroy: function () {
|
|
10485
|
-
var owner = this;
|
|
10486
|
-
|
|
10487
|
-
owner.element.removeEventListener('input', owner.onChangeListener);
|
|
10488
|
-
owner.element.removeEventListener('keydown', owner.onKeyDownListener);
|
|
10489
|
-
owner.element.removeEventListener('focus', owner.onFocusListener);
|
|
10490
|
-
owner.element.removeEventListener('cut', owner.onCutListener);
|
|
10491
|
-
owner.element.removeEventListener('copy', owner.onCopyListener);
|
|
10492
|
-
},
|
|
10493
|
-
|
|
10494
|
-
toString: function () {
|
|
10495
|
-
return '[Cleave Object]';
|
|
10496
|
-
}
|
|
10497
|
-
};
|
|
10498
|
-
|
|
10499
|
-
Cleave.NumeralFormatter = NumeralFormatter_1;
|
|
10500
|
-
Cleave.DateFormatter = DateFormatter_1;
|
|
10501
|
-
Cleave.TimeFormatter = TimeFormatter_1;
|
|
10502
|
-
Cleave.PhoneFormatter = PhoneFormatter_1;
|
|
10503
|
-
Cleave.CreditCardDetector = CreditCardDetector_1;
|
|
10504
|
-
Cleave.Util = Util_1;
|
|
10505
|
-
Cleave.DefaultProperties = DefaultProperties_1;
|
|
10506
|
-
|
|
10507
|
-
// for angular directive
|
|
10508
|
-
((typeof commonjsGlobal === 'object' && commonjsGlobal) ? commonjsGlobal : window)['Cleave'] = Cleave;
|
|
10509
|
-
|
|
10510
|
-
// CommonJS
|
|
10511
|
-
var Cleave_1 = Cleave;
|
|
10512
|
-
|
|
10513
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
10514
|
-
function coerceBoolean(value) {
|
|
10515
|
-
return value != null && `${value}` !== 'false';
|
|
10516
|
-
}
|
|
10517
|
-
function coerceNumber(value, fallbackValue = 0) {
|
|
10518
|
-
return isNumberValue(value) ? Number(value) : fallbackValue;
|
|
10519
|
-
}
|
|
10520
|
-
function isNumberValue(value) {
|
|
10521
|
-
return !isNaN(parseFloat(value)) && !isNaN(Number(value));
|
|
10522
|
-
}
|
|
10523
|
-
|
|
10524
|
-
const catInputCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-primary-hover{transition:background-color 125ms, color 125ms}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}button.cat-text-primary,button.cat-link-primary{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-primary:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-primary:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-primary,.cat-text-primary-hover{transition:color 125ms}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-bg-primaryInverted-hover{transition:background-color 125ms, color 125ms}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}button.cat-text-primaryInverted,button.cat-link-primaryInverted{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-primaryInverted:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-primaryInverted:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 125ms}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-secondary-hover{transition:background-color 125ms, color 125ms}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}button.cat-text-secondary,button.cat-link-secondary{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-secondary:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-secondary:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-secondary,.cat-text-secondary-hover{transition:color 125ms}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-bg-secondaryInverted-hover{transition:background-color 125ms, color 125ms}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}button.cat-text-secondaryInverted,button.cat-link-secondaryInverted{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-secondaryInverted:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-secondaryInverted:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 125ms}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-info{background-color:rgb(var(--cat-info-bg, 0, 115, 230)) !important;color:rgb(var(--cat-info-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-info-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-info-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-info-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-info-hover{transition:background-color 125ms, color 125ms}.cat-bg-info-hover:hover{background-color:rgb(var(--cat-info-bg-hover, 0, 107, 227)) !important;color:rgb(var(--cat-info-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-info-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-info-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-info-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-info,.cat-link-info{color:rgb(var(--cat-info-text, 0, 115, 230)) !important}button.cat-text-info,button.cat-link-info{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-info:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-info:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-info,.cat-text-info-hover{transition:color 125ms}.cat-link-info:hover,.cat-text-info-hover:hover{color:rgb(var(--cat-info-text-hover, 0, 107, 227)) !important}.cat-link-info:active,.cat-text-info-hover:active{color:rgb(var(--cat-info-text-active, 0, 96, 223)) !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-success-hover{transition:background-color 125ms, color 125ms}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}button.cat-text-success,button.cat-link-success{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-success:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-success:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-success,.cat-text-success-hover{transition:color 125ms}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important;--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}.cat-bg-warning-hover{transition:background-color 125ms, color 125ms}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important;--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}button.cat-text-warning,button.cat-link-warning{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-warning:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-warning:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-warning,.cat-text-warning-hover{transition:color 125ms}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-danger-hover{transition:background-color 125ms, color 125ms}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}button.cat-text-danger,button.cat-link-danger{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-danger:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-danger:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-danger,.cat-text-danger-hover{transition:color 125ms}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-text-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-text-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-bg-muted{background-color:#f2f4f7 !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.input-field:not(.input-horizontal) .label-container.hidden,.textarea-field:not(.textarea-horizontal) .label-container.hidden,.select-field:not(.select-horizontal) .label-container.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-container{flex-basis:var(--label-size, 33.33%)}.label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.label-optional,.label-character-count{display:inline-flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem}.label-character-count{margin-left:auto}.input-horizontal .label-container.hidden label,.textarea-horizontal .label-container.hidden label,.select-horizontal .label-container.hidden label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper,.select-horizontal .label-wrapper{flex-direction:column}.input-horizontal label,.textarea-horizontal label,.select-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata,.select-horizontal .label-metadata{justify-content:flex-start}.input-horizontal .label-metadata .label-character-count,.textarea-horizontal .label-metadata .label-character-count,.select-horizontal .label-metadata .label-character-count{margin-left:0}:host{display:flex;font-size:0.9375rem;line-height:1.25rem}:host([hidden]){display:none}.input-field,.input-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.input-field.input-horizontal{flex-direction:row;gap:1rem}.input-wrapper{flex:1 1 auto;display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:inset 0 0 0 1px rgb(var(--border-color));transition:box-shadow 125ms linear;--border-color:var(--cat-border-color-dark, 215, 219, 224);}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-readonly{pointer-events:none}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.input-wrapper:not(.input-disabled):hover{box-shadow:inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color))}.input-wrapper:focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-1px}.input-wrapper:focus-within:has(.clearable:focus){outline:none}.input-wrapper.input-invalid{--border-color:var(--cat-danger-bg, 217, 52, 13), 0.2}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-loading,.icon-prefix,.icon-suffix{align-self:center}.input-outer-wrapper{display:flex}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input.has-clearable,input.has-toggle-password{padding-right:1.5rem}input.has-clearable.has-toggle-password{padding-right:3.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.toggle-password{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.has-clearable~.toggle-password{right:1.5rem}:host(.cat-date-input) .input-wrapper,:host(.cat-time-input) .input-wrapper{z-index:1;border-top-right-radius:0;border-bottom-right-radius:0}";
|
|
10525
|
-
const CatInputStyle0 = catInputCss;
|
|
10526
|
-
|
|
10527
|
-
let nextUniqueId$7 = 0;
|
|
10528
|
-
const CatInput = class {
|
|
10529
|
-
constructor(hostRef) {
|
|
10530
|
-
index.registerInstance(this, hostRef);
|
|
10531
|
-
this.catChange = index.createEvent(this, "catChange", 7);
|
|
10532
|
-
this.catFocus = index.createEvent(this, "catFocus", 7);
|
|
10533
|
-
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
10534
|
-
if (hostRef.$hostElement$["s-ei"]) {
|
|
10535
|
-
this.internals = hostRef.$hostElement$["s-ei"];
|
|
10536
|
-
}
|
|
10537
|
-
else {
|
|
10538
|
-
this.internals = hostRef.$hostElement$.attachInternals();
|
|
10539
|
-
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
10540
|
-
}
|
|
10541
|
-
this._id = `cat-input-${nextUniqueId$7++}`;
|
|
10542
|
-
this.hasSlottedLabel = false;
|
|
10543
|
-
this.hasSlottedHint = false;
|
|
10544
|
-
this.hasSlottedCounter = false;
|
|
10545
|
-
this.isPasswordShown = false;
|
|
10546
|
-
this.errorMap = undefined;
|
|
10547
|
-
this.requiredMarker = 'optional';
|
|
10548
|
-
this.horizontal = false;
|
|
10549
|
-
this.autoComplete = undefined;
|
|
10550
|
-
this.clearable = false;
|
|
10551
|
-
this.togglePassword = false;
|
|
10552
|
-
this.disabled = false;
|
|
10553
|
-
this.loading = false;
|
|
10554
|
-
this.hint = undefined;
|
|
10555
|
-
this.icon = undefined;
|
|
10556
|
-
this.iconRight = false;
|
|
10557
|
-
this.identifier = undefined;
|
|
10558
|
-
this.label = '';
|
|
10559
|
-
this.labelHidden = false;
|
|
10560
|
-
this.max = undefined;
|
|
10561
|
-
this.maxLength = undefined;
|
|
10562
|
-
this.min = undefined;
|
|
10563
|
-
this.minLength = undefined;
|
|
10564
|
-
this.name = undefined;
|
|
10565
|
-
this.placeholder = undefined;
|
|
10566
|
-
this.textPrefix = undefined;
|
|
10567
|
-
this.textSuffix = undefined;
|
|
10568
|
-
this.readonly = false;
|
|
10569
|
-
this.required = false;
|
|
10570
|
-
this.round = false;
|
|
10571
|
-
this.type = 'text';
|
|
10572
|
-
this.value = undefined;
|
|
10573
|
-
this.errors = undefined;
|
|
10574
|
-
this.errorUpdate = 0;
|
|
10575
|
-
this.nativeAttributes = undefined;
|
|
10576
|
-
this.testId = undefined;
|
|
10577
|
-
}
|
|
10578
|
-
get id() {
|
|
10579
|
-
return this.identifier || this._id;
|
|
10580
|
-
}
|
|
10581
|
-
componentWillLoad() {
|
|
10582
|
-
this.onErrorsChanged(this.errors, undefined, false);
|
|
10583
|
-
}
|
|
10584
|
-
componentWillRender() {
|
|
10585
|
-
this.internals.setFormValue(this.value ?? null);
|
|
10586
|
-
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
10587
|
-
this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
10588
|
-
this.hasSlottedCounter = !!this.hostElement.querySelector('[slot="counter"]');
|
|
10589
|
-
}
|
|
10590
|
-
/**
|
|
10591
|
-
* Programmatically move focus to the input. Use this method instead of
|
|
10592
|
-
* `input.focus()`.
|
|
10593
|
-
*
|
|
10594
|
-
* @param options An optional object providing options to control aspects of
|
|
10595
|
-
* the focusing process.
|
|
10596
|
-
*/
|
|
10597
|
-
async doFocus(options) {
|
|
10598
|
-
// hack to make datepicker inputs focusable. The datepicker hides the input
|
|
10599
|
-
// element and dynamically creates a sibling. We need to find the new input
|
|
10600
|
-
// element and focus it instead.
|
|
10601
|
-
const input = this.input.type === 'hidden' ? this.findSiblingInput(this.input.nextSibling) : this.input;
|
|
10602
|
-
input?.focus(options);
|
|
10603
|
-
}
|
|
10604
|
-
/**
|
|
10605
|
-
* Programmatically remove focus from the input. Use this method instead of
|
|
10606
|
-
* `input.blur()`.
|
|
10607
|
-
*/
|
|
10608
|
-
async doBlur() {
|
|
10609
|
-
this.input.blur();
|
|
10610
|
-
}
|
|
10611
|
-
/**
|
|
10612
|
-
* Clear the input.
|
|
10613
|
-
*/
|
|
10614
|
-
async clear() {
|
|
10615
|
-
this.value = '';
|
|
10616
|
-
this.catChange.emit(this.value);
|
|
10617
|
-
}
|
|
10618
|
-
/**
|
|
10619
|
-
* Adds a Cleave.js mask to the input.
|
|
10620
|
-
*
|
|
10621
|
-
* @param options The Cleave.js options.
|
|
10622
|
-
*/
|
|
10623
|
-
async mask(options) {
|
|
10624
|
-
new Cleave_1(this.input, options);
|
|
10625
|
-
}
|
|
10626
|
-
onErrorsChanged(newValue, _oldValue, update = true) {
|
|
10627
|
-
if (!coerceBoolean(this.errorUpdate)) {
|
|
10628
|
-
this.errorMap = undefined;
|
|
10629
|
-
}
|
|
10630
|
-
else {
|
|
10631
|
-
this.errorMapSrc = Array.isArray(newValue)
|
|
10632
|
-
? newValue.reduce((acc, err) => ({ ...acc, [err]: undefined }), {})
|
|
10633
|
-
: newValue || undefined;
|
|
10634
|
-
if (update) {
|
|
10635
|
-
this.showErrorsIfTimeout() || this.showErrorsIfNoFocus();
|
|
10636
|
-
}
|
|
10637
|
-
}
|
|
10638
|
-
}
|
|
10639
|
-
render() {
|
|
10640
|
-
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
10641
|
-
return (index.h("div", { key: '72c7cf2c86831c1aca03467ec92149fa0a58b05a', class: {
|
|
10642
|
-
'input-field': true,
|
|
10643
|
-
'input-horizontal': this.horizontal
|
|
10644
|
-
} }, index.h("div", { key: '7cc76563550305d886b1a18d2344bf59b27f6fc2', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '247ad3243e98e5ecf1002e59a84f8f2d1b4f17f4', htmlFor: this.id, part: "label" }, index.h("span", { key: '0d5f489a87735fc11c9dbacf9acded6d7523926a', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '3ade7278530f2b79a3dda8db8923392b84629feb', name: "label" })) || this.label, index.h("div", { key: '0c1bea5d04c65ceace3ba7a10f7d513301709f86', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '437f7c224b323514b2a4dcca8ffd6cdc83d3c384', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'cbc29c60d0f624bcceb1b5e55ba6bc38afc8d514', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (index.h("div", { key: 'f00cdace4e8f842019d7ffae484aca11925e2bc2', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (index.h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), index.h("div", { key: '8c961aaf1d0451118d9f5ae583a228be54b320eb', class: "input-container" }, index.h("div", { key: '6e9e98caaabea18e4a71b8b09baea5355f2eac7b', class: "input-outer-wrapper" }, index.h("div", { key: '38a5db004dbee08ce542dd36bf0da13156887e26', class: {
|
|
10645
|
-
'input-wrapper': true,
|
|
10646
|
-
'input-round': this.round,
|
|
10647
|
-
'input-readonly': this.readonly,
|
|
10648
|
-
'input-disabled': this.disabled,
|
|
10649
|
-
'input-invalid': this.invalid
|
|
10650
|
-
}, onClick: () => this.input.focus() }, this.textPrefix && (index.h("span", { key: '350c53ffd8b59df4aa63d23c44213425df9add95', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (index.h("cat-icon", { key: '5f4794dac4ded82db99a395f1fe34fa9d393498f', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), index.h("div", { key: '5514838423e9ecfed27f877edc2bedaeeebb1584', class: "input-inner-wrapper" }, index.h("input", { key: '2dd5de3d46df35470caf488d3f48b5339081c537', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
|
|
10651
|
-
'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,
|
|
10652
|
-
'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value
|
|
10653
|
-
}, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { key: '0392b61e401ad12bcc32fe6de7f2acdf49184093', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { key: 'c33c6b188af0d2ccbf67b4a3527d7dc53af8a1fb', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && index.h("cat-spinner", { key: '3c51656392e532a3a16efcc5dbf181c40b96ed32', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (index.h("cat-icon", { key: 'f3a527250b2ab0ae5bb56217366cabe00c5e7bee', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (index.h("cat-icon", { key: '063104b3c65eceb1260109c0f55944ca39c5c2ac', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (index.h("span", { key: '0508e322d57cc28a245a8e1fe2f16e02af04679b', class: "text-suffix", part: "suffix" }, this.textSuffix))), index.h("slot", { key: 'b5ea42f17934631b97c05c0ccfbadd8a1554d779', name: "addon" })), this.hasHint && (index.h(CatFormHint, { key: '549e082c4e1ff946d2d26ce3843db26af96333d3', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))));
|
|
10654
|
-
}
|
|
10655
|
-
get hasHint() {
|
|
10656
|
-
return !!this.hint || !!this.hasSlottedHint || this.invalid;
|
|
10657
|
-
}
|
|
10658
|
-
get invalid() {
|
|
10659
|
-
return this.errorMap === true || !!Object.keys(this.errorMap || {}).length;
|
|
10660
|
-
}
|
|
10661
|
-
onInput() {
|
|
10662
|
-
this.value = this.input.value;
|
|
10663
|
-
this.internals.setFormValue(this.input.value);
|
|
10664
|
-
this.catChange.emit(this.value);
|
|
10665
|
-
this.showErrorsIfTimeout();
|
|
10666
|
-
}
|
|
10667
|
-
onFocus(event) {
|
|
10668
|
-
this.catFocus.emit(event);
|
|
10669
|
-
}
|
|
10670
|
-
onBlur(event) {
|
|
10671
|
-
this.catBlur.emit(event);
|
|
10672
|
-
if (coerceBoolean(this.errorUpdate)) {
|
|
10673
|
-
this.showErrors();
|
|
10674
|
-
}
|
|
10675
|
-
}
|
|
10676
|
-
doTogglePassword() {
|
|
10677
|
-
this.isPasswordShown = !this.isPasswordShown;
|
|
10678
|
-
}
|
|
10679
|
-
showErrors() {
|
|
10680
|
-
this.errorMap = this.errorMapSrc;
|
|
10681
|
-
}
|
|
10682
|
-
showErrorsIfTimeout() {
|
|
10683
|
-
const errorUpdate = coerceNumber(this.errorUpdate, null);
|
|
10684
|
-
if (errorUpdate !== null) {
|
|
10685
|
-
typeof this.errorUpdateTimeoutId === 'number' && window.clearTimeout(this.errorUpdateTimeoutId);
|
|
10686
|
-
this.errorUpdateTimeoutId = window.setTimeout(() => this.showErrors(), errorUpdate);
|
|
10687
|
-
return true;
|
|
10688
|
-
}
|
|
10689
|
-
return false;
|
|
10690
|
-
}
|
|
10691
|
-
showErrorsIfNoFocus() {
|
|
10692
|
-
const hasFocus = document.activeElement === this.hostElement || document.activeElement === this.input;
|
|
10693
|
-
if (!hasFocus) {
|
|
10694
|
-
this.showErrors();
|
|
10695
|
-
}
|
|
10696
|
-
}
|
|
10697
|
-
findSiblingInput(node) {
|
|
10698
|
-
if (node instanceof HTMLInputElement) {
|
|
10699
|
-
return node;
|
|
10700
|
-
}
|
|
10701
|
-
else if (node?.nextSibling) {
|
|
10702
|
-
return this.findSiblingInput(node.nextSibling);
|
|
10703
|
-
}
|
|
10704
|
-
return undefined;
|
|
10705
|
-
}
|
|
10706
|
-
static get delegatesFocus() { return true; }
|
|
10707
|
-
static get formAssociated() { return true; }
|
|
10708
|
-
get hostElement() { return index.getElement(this); }
|
|
10709
|
-
static get watchers() { return {
|
|
10710
|
-
"errors": ["onErrorsChanged"]
|
|
10711
|
-
}; }
|
|
10712
|
-
};
|
|
10713
|
-
CatInput.style = CatInputStyle0;
|
|
10714
|
-
|
|
10715
|
-
const catPaginationCss = ":host{display:inline-block}:host([hidden]){display:none}ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}li{display:inline-flex;justify-content:center}li.dots{-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([variant=outlined]) ol{gap:0.75rem}.cat-pagination-xs li.dots,.cat-pagination-xs li.text{height:1.5rem;line-height:1.5rem;font-size:0.875rem}.cat-pagination-xs li.dots{width:1.5rem}:host([variant=outlined]) .cat-pagination-xs{gap:0.375rem}.cat-pagination-s li.dots,.cat-pagination-s li.text{height:2rem;line-height:2rem;font-size:0.9375rem}.cat-pagination-s li.dots{width:2rem}:host([variant=outlined]) .cat-pagination-s{gap:0.5rem}.cat-pagination-m li.dots,.cat-pagination-m li.text{height:2.5rem;line-height:2.5rem;font-size:0.9375rem}.cat-pagination-m li.dots{width:2.5rem}:host([variant=outlined]) .cat-pagination-m{gap:0.625rem}.cat-pagination-l li.dots,.cat-pagination-l li.text{height:3rem;line-height:3rem;font-size:0.9375rem}.cat-pagination-l li.dots{width:3rem}:host([variant=outlined]) .cat-pagination-l{gap:0.75rem}.cat-pagination-xl li.dots,.cat-pagination-xl li.text{height:3.5rem;line-height:3.5rem;font-size:1.125rem}.cat-pagination-xl li.dots{width:3.5rem}:host([variant=outlined]) .cat-pagination-xl{gap:0.875rem}";
|
|
10716
|
-
const CatPaginationStyle0 = catPaginationCss;
|
|
9210
|
+
const catPaginationCss = ":host{display:inline-block}:host([hidden]){display:none}ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}li{display:inline-flex;justify-content:center}li.dots{-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([variant=outlined]) ol{gap:0.75rem}.cat-pagination-xs li.dots,.cat-pagination-xs li.text{height:1.5rem;line-height:1.5rem;font-size:0.875rem}.cat-pagination-xs li.dots{width:1.5rem}:host([variant=outlined]) .cat-pagination-xs{gap:0.375rem}.cat-pagination-s li.dots,.cat-pagination-s li.text{height:2rem;line-height:2rem;font-size:0.9375rem}.cat-pagination-s li.dots{width:2rem}:host([variant=outlined]) .cat-pagination-s{gap:0.5rem}.cat-pagination-m li.dots,.cat-pagination-m li.text{height:2.5rem;line-height:2.5rem;font-size:0.9375rem}.cat-pagination-m li.dots{width:2.5rem}:host([variant=outlined]) .cat-pagination-m{gap:0.625rem}.cat-pagination-l li.dots,.cat-pagination-l li.text{height:3rem;line-height:3rem;font-size:0.9375rem}.cat-pagination-l li.dots{width:3rem}:host([variant=outlined]) .cat-pagination-l{gap:0.75rem}.cat-pagination-xl li.dots,.cat-pagination-xl li.text{height:3.5rem;line-height:3.5rem;font-size:1.125rem}.cat-pagination-xl li.dots{width:3.5rem}:host([variant=outlined]) .cat-pagination-xl{gap:0.875rem}";
|
|
9211
|
+
const CatPaginationStyle0 = catPaginationCss;
|
|
10717
9212
|
|
|
10718
9213
|
const CatPagination = class {
|
|
10719
9214
|
constructor(hostRef) {
|
|
@@ -11488,18 +9983,18 @@ const CatSelect = class {
|
|
|
11488
9983
|
}
|
|
11489
9984
|
render() {
|
|
11490
9985
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
11491
|
-
return (index.h(index.Host, { key: '
|
|
9986
|
+
return (index.h(index.Host, { key: 'c26f4f1d90648ae5bdc7d15f6c112adafb2e4f78' }, index.h("div", { key: '15d47938edbc1226d59bc8f921178424dccf7999', class: {
|
|
11492
9987
|
'select-field': true,
|
|
11493
9988
|
'select-horizontal': this.horizontal,
|
|
11494
9989
|
'select-multiple': this.multiple
|
|
11495
|
-
} }, index.h("div", { key: '
|
|
9990
|
+
} }, index.h("div", { key: '3ac28917d6f6ea995142803bbc74f381c540775d', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'f0a54b4dd57db2771b216408313fb289eedd27a2', htmlFor: `select-${this.id}-input`, part: "label" }, index.h("span", { key: '024573bca075cd84d08349af763d96ed9b53c8c4', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '8e7d2ef38e100add967d3c369cda2cccf7c3f334', name: "label" })) || this.label, index.h("div", { key: 'b9abce3cd81828a3e9dadf6d3c9fc551043cc927', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '3d55ace4e034fcc81c56c887649846ff330d25c4', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'ca265e7b81572037f80e78c167622680ae7ba74e', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: '2941249432c643a7aca2887edb76c9503a93fdca', class: "select-container" }, index.h("div", { key: 'eaeccdc2e8305a9937bf5c646ae03798bda777ff', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, index.h("div", { key: '6f17f7a17ab914a3430e5dccc84fe6fcd1b22166', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (index.h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (index.h("span", { class: {
|
|
11496
9991
|
pill: true,
|
|
11497
9992
|
'select-no-open': true,
|
|
11498
9993
|
'select-option-active': this.state.activeSelectionIndex === i
|
|
11499
|
-
}, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, index.h("span", null, item.render.label), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: of.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (index.h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, index.h("input", { key: '
|
|
9994
|
+
}, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, index.h("span", null, item.render.label), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: of.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (index.h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, index.h("input", { key: '364215d3ab64ccaf43edfefa6bc1b9bbb4cbd176', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && index.h("cat-spinner", { key: '1350abe2789adba0e65931358e2637a4a6be2b8f' }), this.invalid && (index.h("cat-icon", { key: 'af9025ce007880906410bc6047ebbb7dab7e5f8c', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
|
|
11500
9995
|
!this.disabled &&
|
|
11501
9996
|
!this.state.isResolving &&
|
|
11502
|
-
this.clearable ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: of.catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (index.h("cat-button", { key: '
|
|
9997
|
+
this.clearable ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: of.catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (index.h("cat-button", { key: '253cd4626cd0c2503f2f6d832656d091b1b1db83', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? of.catI18nRegistry.t('select.close') : of.catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (index.h(CatFormHint, { key: 'f5403e4f52632c7e69c781d3b5f2fe5dd476d086', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))), index.h("div", { key: 'f72b057e941d0a8abc535314e83339a59c09416b', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { key: '2a9a17d9a9e2e931e15296c504735c6d77ba2a9f', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.h("ul", { key: 'af6c9b9152eff975198123219f19b840feddac92', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
|
|
11503
9998
|
? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (index.h("li", { class: "select-option-loading" }, index.h("cat-skeleton", { variant: "body", lines: 1 }), index.h("cat-skeleton", { variant: "body", lines: 1 }))))
|
|
11504
9999
|
: !this.state.options.length &&
|
|
11505
10000
|
!this.tags && (index.h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : of.catI18nRegistry.t('select.empty')))))))));
|
|
@@ -13795,6 +12290,7 @@ const CatTime = class {
|
|
|
13795
12290
|
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
13796
12291
|
this.language = of.catI18nRegistry.getLocale();
|
|
13797
12292
|
this.locale = getLocale(this.language);
|
|
12293
|
+
this.timeMaskOptions = { timeFormat: this.locale.timeFormat, timePattern: ['h', 'm'] };
|
|
13798
12294
|
this.hasSlottedLabel = false;
|
|
13799
12295
|
this.hasSlottedHint = false;
|
|
13800
12296
|
this.selectionTime = null;
|
|
@@ -13854,13 +12350,6 @@ const CatTime = class {
|
|
|
13854
12350
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
13855
12351
|
this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
13856
12352
|
}
|
|
13857
|
-
componentDidLoad() {
|
|
13858
|
-
this.input?.mask({
|
|
13859
|
-
time: true,
|
|
13860
|
-
timeFormat: this.locale.timeFormat,
|
|
13861
|
-
timePattern: ['h', 'm']
|
|
13862
|
-
});
|
|
13863
|
-
}
|
|
13864
12353
|
onOpen() {
|
|
13865
12354
|
const query = (selector) => this.hostElement.shadowRoot?.querySelector(selector);
|
|
13866
12355
|
const time = clampTime(this.min ?? null, this.selectionTime ?? new Date(2000, 5, 1, 8), this.max ?? null);
|
|
@@ -13929,14 +12418,14 @@ const CatTime = class {
|
|
|
13929
12418
|
}
|
|
13930
12419
|
render() {
|
|
13931
12420
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
13932
|
-
return (index.h(index.Host, { key: '
|
|
12421
|
+
return (index.h(index.Host, { key: 'e0c2114b16b85916f3dce9dfad94d03c12239605' }, index.h("cat-input", { key: '5efacf81af8c646cfd374a67890052c8456c7427', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, testId: this.testId, nativeAttributes: this.nativeAttributes, timeMaskOptions: this.timeMaskOptions, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, index.h("span", { key: '3a6975d2d679c3b115cd4d56793f0754d78a01b9', slot: "label" }, this.hasSlottedLabel && index.h("slot", { key: 'ba3b9a395737599e0f69df407e310acce9ef43f0', name: "label" }), !this.hasSlottedLabel && this.label, index.h("span", { key: 'f8f19c73c24d62d890d37d817dedbfb362f5f423', class: "label-aria" }, " (HH:mm)")), index.h("div", { key: '8bd9f5e3599e9cca6c2a9d8e76882c0c939427e8', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (index.h("cat-button", { key: 'b17a3bb5aba864ca5a9beced56c9e7f5618c0758', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), index.h("cat-dropdown", { key: '164d26eb81e3645806b31f61086ac08a0ff2a034', slot: "addon", placement: this.placement }, index.h("cat-button", { key: '47a1f42ae5edb4c074f57e0fca7b06d42084be2f', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), index.h("nav", { key: '7d8479f2d343202ba7f582420687b42747a7267e', slot: "content", class: "cat-nav" }, index.h("ul", { key: '54bd4225780e10d7e9abb0f31e0fc6a6e58672a7' }, this.timeArray().map(time => {
|
|
13933
12422
|
const isoTime = formatIso(time);
|
|
13934
12423
|
const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);
|
|
13935
12424
|
return (index.h("li", null, index.h("cat-button", { class: {
|
|
13936
12425
|
'cat-nav-item': true,
|
|
13937
12426
|
'time-disabled': disabled
|
|
13938
12427
|
}, disabled: disabled, active: isoTime === this.value, color: isoTime === this.value ? 'primary' : 'secondary', variant: isoTime === this.value ? 'filled' : 'outlined', onCatClick: () => this.select(time), "data-time": isoTime }, this.format(time))));
|
|
13939
|
-
}))))), this.hasSlottedHint && (index.h("span", { key: '
|
|
12428
|
+
}))))), this.hasSlottedHint && (index.h("span", { key: '395d2ed324e51c1899004acad59072e47377c29a', slot: "hint" }, index.h("slot", { key: '4f07ebff747ac5cf97239150875daa8cd5295f2f', name: "hint" }))))));
|
|
13940
12429
|
}
|
|
13941
12430
|
timeArray() {
|
|
13942
12431
|
const result = [];
|
|
@@ -14169,12 +12658,12 @@ const CatTooltip = class {
|
|
|
14169
12658
|
}
|
|
14170
12659
|
}
|
|
14171
12660
|
render() {
|
|
14172
|
-
return (index.h(index.Host, { key: '
|
|
12661
|
+
return (index.h(index.Host, { key: 'a4d508bd463b29935745236c388f31b4bc01516f' }, index.h("slot", { key: 'b1992e73fa0e53b58493b8253c10823d562dac05' }), index.h("div", { key: 'd33515016f4d31548d9628f23d778acde69be531', ref: el => (this.tooltip = el), id: this.id, role: "tooltip", "aria-hidden": !this.open, "aria-live": this.open ? 'polite' : 'off', class: {
|
|
14173
12662
|
tooltip: true,
|
|
14174
12663
|
'tooltip-hidden': this.inactive,
|
|
14175
12664
|
'tooltip-round': this.round,
|
|
14176
12665
|
[`tooltip-${this.size}`]: Boolean(this.size)
|
|
14177
|
-
} }, index.h("slot", { key: '
|
|
12666
|
+
} }, index.h("slot", { key: '58c5455be822bf8bc9476c2e5086e0299805791f', name: "content" }, index.h("p", { key: '56d35f4ec8846ad8928c72a269fd5ed19bf087e1' }, this.content)))));
|
|
14178
12667
|
}
|
|
14179
12668
|
async update() {
|
|
14180
12669
|
if (this.trigger && this.tooltip) {
|