@haiilo/catalyst 13.0.3 → 13.2.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/{p-8206d34b.entry.js → p-1823cdaa.entry.js} +4 -4
- package/dist/catalyst/p-1823cdaa.entry.js.map +1 -0
- package/dist/cjs/cat-alert_30.cjs.entry.js +58 -53
- 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/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 +2 -2
- package/dist/collection/components/cat-date-inline/cat-date-inline.js +4 -4
- package/dist/collection/components/cat-datepicker/cat-datepicker.js +3 -3
- package/dist/collection/components/cat-datepicker-inline/cat-datepicker-inline.js +2 -2
- package/dist/collection/components/cat-dropdown/cat-dropdown.js +1 -1
- package/dist/collection/components/cat-form-group/cat-form-group.js +1 -1
- package/dist/collection/components/cat-icon/cat-icon.js +1 -1
- package/dist/collection/components/cat-input/cat-input.css +60 -0
- package/dist/collection/components/cat-input/cat-input.js +47 -4
- package/dist/collection/components/cat-input/cat-input.js.map +1 -1
- package/dist/collection/components/cat-pagination/cat-pagination.js +2 -2
- package/dist/collection/components/cat-radio/cat-radio.js +2 -2
- package/dist/collection/components/cat-radio-group/cat-radio-group.js +1 -1
- package/dist/collection/components/cat-scrollable/cat-scrollable.js +3 -3
- package/dist/collection/components/cat-select/cat-select.js +4 -4
- package/dist/collection/components/cat-select-demo/cat-select-demo.js +1 -1
- package/dist/collection/components/cat-skeleton/cat-skeleton.js +1 -1
- package/dist/collection/components/cat-spinner/cat-spinner.js +2 -2
- package/dist/collection/components/cat-tab/cat-tab.js +1 -1
- package/dist/collection/components/cat-tabs/cat-tabs.js +1 -1
- package/dist/collection/components/cat-tag/cat-tag.js +1 -1
- package/dist/collection/components/cat-textarea/cat-textarea.js +3 -3
- package/dist/collection/components/cat-time/cat-time.js +2 -2
- package/dist/collection/components/cat-toggle/cat-toggle.js +2 -2
- package/dist/collection/components/cat-tooltip/cat-tooltip.js +2 -2
- 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 +2 -2
- package/dist/components/cat-datepicker-inline.js +2 -2
- package/dist/components/cat-datepicker.js +3 -3
- package/dist/components/cat-dropdown2.js +1 -1
- package/dist/components/cat-form-group.js +1 -1
- package/dist/components/cat-icon2.js +1 -1
- package/dist/components/cat-input2.js +12 -5
- package/dist/components/cat-input2.js.map +1 -1
- package/dist/components/cat-pagination.js +2 -2
- package/dist/components/cat-radio-group.js +1 -1
- package/dist/components/cat-radio.js +2 -2
- package/dist/components/cat-scrollable2.js +3 -3
- package/dist/components/cat-select-demo.js +1 -1
- package/dist/components/cat-select2.js +4 -4
- package/dist/components/cat-skeleton2.js +1 -1
- package/dist/components/cat-spinner2.js +2 -2
- package/dist/components/cat-tab.js +1 -1
- package/dist/components/cat-tabs.js +1 -1
- package/dist/components/cat-tag.js +1 -1
- package/dist/components/cat-textarea.js +3 -3
- package/dist/components/cat-time.js +2 -2
- package/dist/components/cat-toggle.js +2 -2
- package/dist/components/cat-tooltip.js +2 -2
- package/dist/esm/cat-alert_30.entry.js +58 -53
- 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-input/cat-input.d.ts +8 -0
- package/dist/types/components.d.ts +16 -0
- package/package.json +2 -2
- package/dist/catalyst/p-8206d34b.entry.js.map +0 -1
|
@@ -279,12 +279,12 @@ const CatDateInline = /*@__PURE__*/ proxyCustomElement(class CatDateInline exten
|
|
|
279
279
|
const [minDate, maxDate] = this.getMinMaxDate();
|
|
280
280
|
const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
|
|
281
281
|
const [dateStart, dateEnd] = this.getValue();
|
|
282
|
-
return (h(Host, { key: '
|
|
282
|
+
return (h(Host, { key: '4f88a5e30d1f61645d5aa8282216db5edaa556d0', "aria-label": this.label || undefined }, h("div", { key: '9200c341cb79bdedc0735191f4ecfda4f117b047', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '02611e74ccbabd435b93aad59f3d1fff0726a27b', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, h("span", { key: '115d1d26624922d8395fb2df8f745aa32f9cf2a9', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'eb833b75fa0e338644f72cbcb1fc5a548eb7dfc1', name: "label" })) || this.label, h("div", { key: '96c32106a48d3190bda2f4c8812c42e8c8d0fc49', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '8db39d017daa88f96ba29ca1633c0509aff20346', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'e553ac1bc15cfe07302954a54d00905b2c5bc742', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: '8f7a7b2518113c00d12329ae0ca06bf98c334866', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, h("div", { key: 'b7b0862916bdeb23d4be2438db325440f3fb0b58', class: "picker-head" }, h("cat-button", { key: '7904e2ef258bb24b6f1279dd6145295ae7db6cea', 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 }), h("cat-button", { key: '178f7126e01234f503f4906259f69a622e0b9d18', 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 }), h("h3", { key: '1b622bc415fa5e937bcfd2b1640b12e4e873e93f' }, this.getHeadline()), h("cat-button", { key: '033fc4f73a3e5b9588a50689dad07b8b43ef3a0f', 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 }), h("cat-button", { key: '38a355bb323254c67fe5ed7d7d33a5ad214a1004', 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 })), h("div", { key: 'd297630ebf2533932d7135aecb3d2166a8a2f151', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, h("div", { key: 'ed47ea8d491e56c7907df646d742bba281750820', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
|
|
283
283
|
const day = (i + this.locale.weekInfo.firstDay) % 7;
|
|
284
284
|
return h("abbr", { title: this.locale.days.long[day] }, this.locale.days.short[day]);
|
|
285
|
-
})), this.weeks && (h("div", { key: '
|
|
285
|
+
})), this.weeks && (h("div", { key: 'b374554582d393c05beb6702ce04ad8077bc7f47', class: "picker-grid-weeks" }, dateGrid
|
|
286
286
|
.filter((_, i) => i % 7 === 0)
|
|
287
|
-
.map(day => (h("div", null, this.getWeekNumber(day)))))), h("div", { key: '
|
|
287
|
+
.map(day => (h("div", null, this.getWeekNumber(day)))))), h("div", { key: '99373d659fe800751f7a9e15ad36ae39900325b0', class: "picker-grid-days" }, dateGrid.map(day => {
|
|
288
288
|
const isStartDate = isSameDay(dateStart, day);
|
|
289
289
|
const isEndDate = isSameDay(dateEnd, day);
|
|
290
290
|
const isRange = !!dateStart && !!dateEnd && day > dateStart && day < dateEnd;
|
|
@@ -301,7 +301,7 @@ const CatDateInline = /*@__PURE__*/ proxyCustomElement(class CatDateInline exten
|
|
|
301
301
|
'date-focusable': this.canFocus(day),
|
|
302
302
|
'date-disabled': !this.canClick(day)
|
|
303
303
|
}, 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()));
|
|
304
|
-
}))), h("div", { key: '
|
|
304
|
+
}))), h("div", { key: '20b7927695e94d38b2d3ca98357234ca349efe44', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (h("cat-button", { key: 'a23f374f39e146922f0ef26245f0ad3ddef92b52', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && h("p", { key: '897142aae96af3f1dbf8faa388546a750da32790', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (h("cat-button", { key: 'c1bfa1f3f46f56caeea23b39bd63e7c42ff6ed07', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), h("p", { key: '5a892650df531633253d7495cd19800c3f07d572', class: "cursor-aria", "aria-live": "polite" })));
|
|
305
305
|
}
|
|
306
306
|
focus(date, focus = true) {
|
|
307
307
|
const [minDate, maxDate] = this.getMinMaxDate();
|
|
@@ -121,14 +121,14 @@ const CatDate$1 = /*@__PURE__*/ proxyCustomElement(class CatDate extends HTMLEle
|
|
|
121
121
|
}
|
|
122
122
|
render() {
|
|
123
123
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
124
|
-
return (h(Host, { key: '
|
|
124
|
+
return (h(Host, { key: '8e61bf32ad23785d71d3d406c5233b67fd97d013' }, h("cat-input", { key: '88d0e2e74b85897d635720c38d20abde5b6c2a00', class: "cat-date-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal ?? this.fallbackHorizontal, 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 => {
|
|
125
125
|
this.inputFocused = e.target === this.input;
|
|
126
126
|
e.stopPropagation();
|
|
127
127
|
this.catFocus.emit(e.detail);
|
|
128
128
|
}, onCatBlur: e => {
|
|
129
129
|
e.stopPropagation();
|
|
130
130
|
this.onInputBlur(e.detail);
|
|
131
|
-
} }, h("span", { key: '
|
|
131
|
+
} }, h("span", { key: 'ab9f44e69986f3181b34e49b30797f73cda4a76f', slot: "label" }, this.label, h("span", { key: 'd972e719de11e561a6dfc5b0d5ea04bee717df64', class: "label-aria" }, " (", this.locale.formatStr, ")")), h("cat-dropdown", { key: '8d11ecde79aab1b62b395bc6d6bed4a41e64189f', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, h("cat-button", { key: '67e4877caa735a95e6547ffc07ff7c3e91b7f5a7', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), h("div", { key: '587e5c57b4035a84658843483898a78631a822af', slot: "content" }, h("cat-date-inline", { key: '081dd6e2bf191b2a3b19b13c0d1933f8c7b1086b', 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) }))))));
|
|
132
132
|
}
|
|
133
133
|
getTriggerA11yLabel() {
|
|
134
134
|
const date = this.locale.fromLocalISO(this.value);
|
|
@@ -49,11 +49,11 @@ const CatDatepickerInline$1 = /*@__PURE__*/ proxyCustomElement(class CatDatepick
|
|
|
49
49
|
this.pickr = this.initDatepicker(this.input);
|
|
50
50
|
}
|
|
51
51
|
render() {
|
|
52
|
-
return (h(Host, { key: '
|
|
52
|
+
return (h(Host, { key: '5877c910a861b8c82e32a8b636260bfccab1c57e' }, h("div", { key: '151936c5d8db28c6c7f6f602cc867c51762217aa', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
|
|
53
53
|
'datepicker-wrapper': true,
|
|
54
54
|
'datepicker-disabled': this.disabled,
|
|
55
55
|
'datepicker-readonly': this.readonly
|
|
56
|
-
} }, h("input", { key: '
|
|
56
|
+
} }, h("input", { key: 'edb97330b0b6146cc6cbdefe904b59681d0296b9', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
|
|
57
57
|
}
|
|
58
58
|
initDatepicker(input) {
|
|
59
59
|
if (!input) {
|
|
@@ -135,7 +135,7 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
|
|
|
135
135
|
}
|
|
136
136
|
render() {
|
|
137
137
|
return [
|
|
138
|
-
h("cat-input", { key: '
|
|
138
|
+
h("cat-input", { key: '13a6214c279fa0a80ee26003846844ab712788a6', ref: el => (this._input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal ?? this.fallbackHorizontal, 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.value, errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatChange: e => {
|
|
139
139
|
e.stopPropagation();
|
|
140
140
|
this.value = e.detail || undefined;
|
|
141
141
|
}, onCatFocus: e => {
|
|
@@ -144,8 +144,8 @@ const CatDatepickerFlat = /*@__PURE__*/ proxyCustomElement(class CatDatepickerFl
|
|
|
144
144
|
}, onCatBlur: e => {
|
|
145
145
|
e.stopPropagation();
|
|
146
146
|
this.catBlur.emit(e.detail);
|
|
147
|
-
} }, this.hasSlottedLabel && (h("span", { key: '
|
|
148
|
-
h("div", { key: '
|
|
147
|
+
} }, this.hasSlottedLabel && (h("span", { key: 'f21cc9a20667083df413002d759719ce19bfdb7a', slot: "label" }, h("slot", { key: '8f0e1bdc5e51547188dcf6eab433bda4741e5058', name: "label" }))), this.hasSlottedHint && (h("span", { key: '59bd33499e1b4d70f554527e5ac75823c7a50a2e', slot: "hint" }, h("slot", { key: 'ecaaba4ad177832b4ced570e2802a10778dc30ae', name: "hint" })))),
|
|
148
|
+
h("div", { key: 'f20bead2effff6240291c9b2241010bfc1c88ae2', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
|
|
149
149
|
];
|
|
150
150
|
}
|
|
151
151
|
initDatepicker(input) {
|
|
@@ -1225,7 +1225,7 @@ const CatDropdown = /*@__PURE__*/ proxyCustomElement(class CatDropdown extends H
|
|
|
1225
1225
|
this.trap = undefined;
|
|
1226
1226
|
}
|
|
1227
1227
|
render() {
|
|
1228
|
-
return (h(Host, { key: '
|
|
1228
|
+
return (h(Host, { key: '4e91635ab4bc80145586164ae41f48dca6198779' }, h("slot", { key: 'dc974d5f288760ed8cca3eb3b0266a6d3b6fcec2', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'd9bf7cad85fda295ccad2fadcac8776068e9da22', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: '2c2c5b04e05c28e01c3eef6d641542a39ee1554b', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '6d64a56876aa01e81759a9260c8e7f9f65c20742', name: "content" }))));
|
|
1229
1229
|
}
|
|
1230
1230
|
get contentId() {
|
|
1231
1231
|
return `cat-dropdown-${this.id}`;
|
|
@@ -31,7 +31,7 @@ const CatFormGroup$1 = /*@__PURE__*/ proxyCustomElement(class CatFormGroup exten
|
|
|
31
31
|
});
|
|
32
32
|
}
|
|
33
33
|
render() {
|
|
34
|
-
return (h(Host, { key: '
|
|
34
|
+
return (h(Host, { key: '256d7b8493d24b515d9989f6c0bfa3d2af99ba67', style: { '--label-size': this.labelSize } }, h("slot", { key: '806080ce0d61ce3b64819dcb50b7bc1651b31c98', onSlotchange: this.onSlotChange.bind(this) })));
|
|
35
35
|
}
|
|
36
36
|
onSlotChange() {
|
|
37
37
|
this.formElements = Array.from(this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker, cat-date, cat-time'));
|
|
@@ -14,7 +14,7 @@ const CatIcon = /*@__PURE__*/ proxyCustomElement(class CatIcon extends HTMLEleme
|
|
|
14
14
|
this.size = 'm';
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
|
-
return (h("span", { key: '
|
|
17
|
+
return (h("span", { key: 'b7c7a3e889ebc12349f1b8f35c227feb1992f8a8', innerHTML: this.iconSrc || (this.icon ? catIconRegistry.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
|
|
18
18
|
icon: true,
|
|
19
19
|
[`icon-${this.size}`]: this.size !== 'inline'
|
|
20
20
|
} }));
|
|
@@ -8,7 +8,7 @@ import { d as defineCustomElement$1 } from './cat-spinner2.js';
|
|
|
8
8
|
|
|
9
9
|
var e,r,t,i=function(e){return e.replace(/[^\d]/g,"")},n=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||(t={}));var v;((e={})[t.UATP]=[4,5,6],e[t.AMEX]=[4,6,5],e[t.DINERS]=[4,6,4],e[t.DISCOVER]=[4,4,4,4],e[t.MASTERCARD]=[4,4,4,4],e[t.DANKORT]=[4,4,4,4],e[t.INSTAPAYMENT]=[4,4,4,4],e[t.JCB15]=[4,6,5],e[t.JCB]=[4,4,4,4],e[t.MAESTRO]=[4,4,4,4],e[t.VISA]=[4,4,4,4],e[t.MIR]=[4,4,4,4],e[t.UNIONPAY]=[4,4,4,4],e[t.GENERAL]=[4,4,4,4],e);((r={})[t.UATP]=/^(?!1800)1\d{0,14}/,r[t.AMEX]=/^3[47]\d{0,13}/,r[t.DISCOVER]=/^(?:6011|65\d{0,2}|64[4-9]\d?)\d{0,12}/,r[t.DINERS]=/^3(?:0([0-5]|9)|[689]\d?)\d{0,11}/,r[t.MASTERCARD]=/^(5[1-5]\d{0,2}|22[2-9]\d{0,1}|2[3-7]\d{0,2})\d{0,12}/,r[t.DANKORT]=/^(5019|4175|4571)\d{0,12}/,r[t.INSTAPAYMENT]=/^63[7-9]\d{0,13}/,r[t.JCB15]=/^(?:2131|1800)\d{0,11}/,r[t.JCB]=/^(?:35\d{0,2})\d{0,12}/,r[t.MAESTRO]=/^(?:5[0678]\d{0,2}|6304|67\d{0,2})\d{0,12}/,r[t.MIR]=/^220[0-4]\d{0,12}/,r[t.VISA]=/^4\d{0,15}/,r[t.UNIONPAY]=/^(62|81)\d{0,14}/,r);!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=false;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],false):"");case "Y":return e+(h?C(s[2],true):"")}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(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(h);return e=a(e,E),u({value:e,blocks:h,delimiter:d,delimiterLazyShow:s})};
|
|
10
10
|
|
|
11
|
-
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-container,.textarea-horizontal .label-container,.select-horizontal .label-container{flex-shrink:0}.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{}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}.input-wrapper{}.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{}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}input{}.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}";
|
|
11
|
+
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-container,.textarea-horizontal .label-container,.select-horizontal .label-container{flex-shrink:0}.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[type=file]){padding-left:0}.input-wrapper{}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}.input-wrapper{}.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::file-selector-button{background-color:transparent;cursor:pointer;border:1px solid var(--cat-border-color-dark, #ccc);border-radius:var(--cat-border-radius-m, 0.25rem);height:1.75rem;margin:0 0.75rem 0 0.375rem}input{}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}input{}.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}.input-inner-wrapper.has-clearable,.input-inner-wrapper.has-toggle-password{padding-right:2rem}.input-inner-wrapper.has-clearable.has-toggle-password{padding-right:4rem}input[type=color]{flex:0 0 1.5625rem;width:1.5625rem;height:1.5625rem;border:1px solid var(--cat-border-color-dark, #ccc);border-radius:0.25rem;background:none;cursor:pointer;appearance:none;box-sizing:border-box;padding:0 !important}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:0;width:100%;height:100%;box-sizing:border-box}input[type=color]::-moz-color-swatch{border:none;border-radius:0;width:100%;height:100%;box-sizing:border-box}.color-value{flex-grow:1}: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}";
|
|
12
12
|
|
|
13
13
|
let nextUniqueId = 0;
|
|
14
14
|
const CatInput = /*@__PURE__*/ proxyCustomElement(class CatInput extends HTMLElement {
|
|
@@ -135,19 +135,24 @@ const CatInput = /*@__PURE__*/ proxyCustomElement(class CatInput extends HTMLEle
|
|
|
135
135
|
}
|
|
136
136
|
render() {
|
|
137
137
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
138
|
-
return (h("div", { key: '
|
|
138
|
+
return (h("div", { key: '50c440a0998694c006b5a6cad4125bc395a159f1', class: {
|
|
139
139
|
'input-field': true,
|
|
140
140
|
'input-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false
|
|
141
|
-
} }, h("div", { key: '
|
|
141
|
+
} }, h("div", { key: 'daa77827a09a7a06a5984498ad5537c1e7b07605', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'a39c7bd5557d03d0cb92713229da76fcf9c2e4f4', htmlFor: this.id, part: "label" }, h("span", { key: 'bddb726ce5a13891f316cd6961f2313103ffaa06', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '9d9b6db604192d7da651e84c786eaab140faa951', name: "label" })) || this.label, h("div", { key: 'f59ccad528690950b12a582df7bc3580e40f3a84', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'f8d8b6ddd9a3056986bfc9bc2cbc3196c3241891', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '93034a970baf7e474934ba6b5327550678abd096', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (h("div", { key: '458caee7098e89168d779b776030e24be1c8fce0', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), h("div", { key: 'c8583c36bf7cef298d1d0f50c942f43dbc8d9cab', class: { 'input-color': this.type === 'color', 'input-container': true } }, h("div", { key: '937aacc0c048c44ca710f3b14e71b436ac3d0039', class: "input-outer-wrapper" }, h("div", { key: '02d657ad1dad507dfcd63863a12da02c46ceeb20', class: {
|
|
142
142
|
'input-wrapper': true,
|
|
143
143
|
'input-round': this.round,
|
|
144
144
|
'input-readonly': this.readonly,
|
|
145
145
|
'input-disabled': this.disabled,
|
|
146
146
|
'input-invalid': this.invalid
|
|
147
|
-
}, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { key: '
|
|
147
|
+
}, onClick: () => this.input.focus() }, this.textPrefix && (h("span", { key: 'fa5b35337dda6e3132f392133a914ae43e70c94e', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (h("cat-icon", { key: '4d06684dc073e4dcc2b1703fa56e7e386901a632', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), h("div", { key: 'e839a75201951e435a88fd6b740d1143d912c13b', class: {
|
|
148
|
+
'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,
|
|
149
|
+
'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value,
|
|
150
|
+
'input-inner-wrapper': true,
|
|
151
|
+
'type-color': this.type === 'color'
|
|
152
|
+
} }, this.type === 'color' && h("span", { key: '1ba9f12990e0ec1ac114186d9784dbcc9dd57644', class: "color-value" }, this.value ?? '#000000'), h("input", { key: '6e089b3f68e7deb4912f16dd68a49f31821d0bfc', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
|
|
148
153
|
'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,
|
|
149
154
|
'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value
|
|
150
|
-
}, 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 && (h("cat-button", { key: '
|
|
155
|
+
}, autocomplete: this.autoComplete, disabled: this.disabled, accept: this.type === 'file' ? this.accept : undefined, multiple: this.type === 'file' ? this.multiple : undefined, 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 && (h("cat-button", { key: '5462cce12644d0ba36763e3a477c5953283fb884', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (h("cat-button", { key: 'd45bc4743ba06802ddf4cfbbd413cad94611bcae', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && h("cat-spinner", { key: '63ab5d0a0dd36ef44ec8952dbeb09e336af3f231', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (h("cat-icon", { key: '977d45f4d87510f41642566856fabc36db0727b9', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (h("cat-icon", { key: '4a71c080f96ab75de98624d553f159ec19155880', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (h("span", { key: 'cdf4a92c9de5e483b914e7a1f33fab72db57ab0d', class: "text-suffix", part: "suffix" }, this.textSuffix))), h("slot", { key: 'c8e42694679b3d1f0fecbfcaba6fccc9ef18eff0', name: "addon" })), this.hasHint && (h(CatFormHint, { key: 'a5690f41eec951c3d88db93bf5c8527c53756945', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))));
|
|
151
156
|
}
|
|
152
157
|
get hasHint() {
|
|
153
158
|
return !!this.hint || !!this.hasSlottedHint || this.invalid;
|
|
@@ -220,6 +225,8 @@ const CatInput = /*@__PURE__*/ proxyCustomElement(class CatInput extends HTMLEle
|
|
|
220
225
|
"requiredMarker": [1, "required-marker"],
|
|
221
226
|
"horizontal": [4],
|
|
222
227
|
"fallbackHorizontal": [4, "fallback-horizontal"],
|
|
228
|
+
"accept": [1],
|
|
229
|
+
"multiple": [4],
|
|
223
230
|
"autoComplete": [1, "auto-complete"],
|
|
224
231
|
"clearable": [4],
|
|
225
232
|
"togglePassword": [4, "toggle-password"],
|