@haiilo/catalyst 10.30.2 → 10.31.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-486166cb.entry.js → p-8b90ffbd.entry.js} +3 -3
- package/dist/catalyst/p-8b90ffbd.entry.js.map +1 -0
- package/dist/cjs/cat-alert_30.cjs.entry.js +28 -20
- 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-button/cat-button.js +20 -2
- package/dist/collection/components/cat-button/cat-button.js.map +1 -1
- package/dist/collection/components/cat-checkbox/cat-checkbox.js +20 -2
- package/dist/collection/components/cat-checkbox/cat-checkbox.js.map +1 -1
- package/dist/collection/components/cat-input/cat-input.js +22 -4
- package/dist/collection/components/cat-input/cat-input.js.map +1 -1
- package/dist/collection/components/cat-radio/cat-radio.js +20 -2
- package/dist/collection/components/cat-radio/cat-radio.js.map +1 -1
- package/dist/collection/components/cat-select/cat-select.js +22 -4
- package/dist/collection/components/cat-select/cat-select.js.map +1 -1
- package/dist/collection/components/cat-tag/cat-tag.js +19 -1
- package/dist/collection/components/cat-tag/cat-tag.js.map +1 -1
- package/dist/collection/components/cat-textarea/cat-textarea.js +21 -3
- package/dist/collection/components/cat-textarea/cat-textarea.js.map +1 -1
- package/dist/collection/components/cat-toggle/cat-toggle.js +20 -2
- package/dist/collection/components/cat-toggle/cat-toggle.js.map +1 -1
- package/dist/components/cat-button2.js +4 -2
- package/dist/components/cat-button2.js.map +1 -1
- package/dist/components/cat-checkbox2.js +4 -2
- package/dist/components/cat-checkbox2.js.map +1 -1
- package/dist/components/cat-input2.js +6 -4
- package/dist/components/cat-input2.js.map +1 -1
- package/dist/components/cat-radio.js +4 -2
- package/dist/components/cat-radio.js.map +1 -1
- package/dist/components/cat-select2.js +6 -4
- package/dist/components/cat-select2.js.map +1 -1
- package/dist/components/cat-tag.js +3 -1
- package/dist/components/cat-tag.js.map +1 -1
- package/dist/components/cat-textarea.js +5 -3
- package/dist/components/cat-textarea.js.map +1 -1
- package/dist/components/cat-toggle.js +4 -2
- package/dist/components/cat-toggle.js.map +1 -1
- package/dist/esm/cat-alert_30.entry.js +28 -20
- 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-button/cat-button.d.ts +6 -0
- package/dist/types/components/cat-checkbox/cat-checkbox.d.ts +6 -0
- package/dist/types/components/cat-input/cat-input.d.ts +6 -0
- package/dist/types/components/cat-radio/cat-radio.d.ts +6 -0
- package/dist/types/components/cat-select/cat-select.d.ts +6 -0
- package/dist/types/components/cat-tag/cat-tag.d.ts +6 -0
- package/dist/types/components/cat-textarea/cat-textarea.d.ts +6 -0
- package/dist/types/components/cat-toggle/cat-toggle.d.ts +6 -0
- package/dist/types/components.d.ts +64 -0
- package/package.json +2 -2
- package/dist/catalyst/p-486166cb.entry.js.map +0 -1
|
@@ -1138,6 +1138,7 @@ const CatButton = class {
|
|
|
1138
1138
|
this.a11yCurrent = undefined;
|
|
1139
1139
|
this.nativeAttributes = undefined;
|
|
1140
1140
|
this.nativeContentAttributes = undefined;
|
|
1141
|
+
this.testId = undefined;
|
|
1141
1142
|
this.buttonGroupPosition = undefined;
|
|
1142
1143
|
}
|
|
1143
1144
|
onIconOnlyChanged(value) {
|
|
@@ -1203,7 +1204,7 @@ const CatButton = class {
|
|
|
1203
1204
|
render() {
|
|
1204
1205
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
1205
1206
|
if (this.url) {
|
|
1206
|
-
return (index.h(index.Host, { "data-button-group": this.buttonGroupPosition }, index.h("a", { ...this.nativeAttributes, ref: el => (this.button = el), href: this.disabled ? undefined : this.url, target: this.urlTarget, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, "aria-current": this.a11yCurrent, id: this.buttonId, part: "button", class: {
|
|
1207
|
+
return (index.h(index.Host, { "data-button-group": this.buttonGroupPosition }, index.h("a", { "data-test": this.testId, ...this.nativeAttributes, ref: el => (this.button = el), href: this.disabled ? undefined : this.url, target: this.urlTarget, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, "aria-current": this.a11yCurrent, id: this.buttonId, part: "button", class: {
|
|
1207
1208
|
'cat-button': true,
|
|
1208
1209
|
'cat-button-empty': !this.hasSlottedContent,
|
|
1209
1210
|
'cat-button-active': this.active,
|
|
@@ -1219,7 +1220,7 @@ const CatButton = class {
|
|
|
1219
1220
|
}, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content)));
|
|
1220
1221
|
}
|
|
1221
1222
|
else {
|
|
1222
|
-
return (index.h(index.Host, { "data-button-group": this.buttonGroupPosition }, index.h("button", { ...this.nativeAttributes, ref: el => (this.button = el), type: this.submit ? 'submit' : 'button', name: this.name, value: this.value, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, "aria-current": this.a11yCurrent, id: this.buttonId, part: "button", class: {
|
|
1223
|
+
return (index.h(index.Host, { "data-button-group": this.buttonGroupPosition }, index.h("button", { "data-test": this.testId, ...this.nativeAttributes, ref: el => (this.button = el), type: this.submit ? 'submit' : 'button', name: this.name, value: this.value, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, "aria-current": this.a11yCurrent, id: this.buttonId, part: "button", class: {
|
|
1223
1224
|
'cat-button': true,
|
|
1224
1225
|
'cat-button-empty': !this.hasSlottedContent,
|
|
1225
1226
|
'cat-button-active': this.active,
|
|
@@ -1371,6 +1372,7 @@ const CatCheckbox = class {
|
|
|
1371
1372
|
this.labelLeft = false;
|
|
1372
1373
|
this.alignment = 'top';
|
|
1373
1374
|
this.nativeAttributes = undefined;
|
|
1375
|
+
this.testId = undefined;
|
|
1374
1376
|
this.requiredMarker = 'none';
|
|
1375
1377
|
}
|
|
1376
1378
|
get id() {
|
|
@@ -1401,13 +1403,13 @@ const CatCheckbox = class {
|
|
|
1401
1403
|
this.input.blur();
|
|
1402
1404
|
}
|
|
1403
1405
|
render() {
|
|
1404
|
-
return (index.h(index.Host, { key: '
|
|
1406
|
+
return (index.h(index.Host, { key: 'c6446d420b369604f4dd80549c1b14ec8a5534bf' }, index.h("label", { key: 'd56e412e5e1b13c88a6c38ae203b572139f363bd', htmlFor: this.id, class: {
|
|
1405
1407
|
'is-hidden': this.labelHidden,
|
|
1406
1408
|
'is-disabled': this.disabled,
|
|
1407
1409
|
'label-left': this.labelLeft,
|
|
1408
1410
|
'align-center': this.alignment === 'center',
|
|
1409
1411
|
'align-end': this.alignment === 'bottom'
|
|
1410
|
-
} }, index.h("input", { key: '
|
|
1412
|
+
} }, index.h("input", { key: '0b6a5475785d4dc765cd55b5718bdd234d62a6c9', "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: '1102aa4097d1fe8d6c301b134227a5a307a33242', class: "box", "aria-hidden": "true" }, index.h("svg", { key: '0a77cfbfd0a67e48d4f5cedbaca3bd449fe75219', class: "check", viewBox: "0 0 12 10" }, index.h("polyline", { key: '75ef61d7183e175b4de406ed3ac13664c4e51885', points: "1.5 6 4.5 9 10.5 1" })), index.h("svg", { key: '25bd595e54be48df3d5420fe38a3f80e00784550', class: "dash", viewBox: "0 0 12 10" }, index.h("polyline", { key: '8afc51523d4e39255c6c2434994311d31c48e4eb', points: "1.5 5 10.5 5" }))), index.h("span", { key: '3ce6b8c09b706068720084c85ad6cf5ed38761a2', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: '27b7301494cfafaed271b75732950441c0c34ce7', name: "label" })) || this.label, index.h("span", { key: 'dac83db2245ad29bd20b3904051d56cfd169aa5e', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'fc144468a305d1982362232021f9222a0c41ad37', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'a08ed77111677146007d6c24571a8311aed72d10', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (index.h("div", { key: '9976b27a7d673daeb05dd45154c2ad341b7a521b', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: '8751a6a323b05995825a563b973cc76b5ca100f8', class: "box-placeholder" }), index.h(CatFormHint, { key: '2d057ca07be5f2b316fb5d83ed97f560d30b1af6', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
|
|
1411
1413
|
}
|
|
1412
1414
|
get hasHint() {
|
|
1413
1415
|
return !!this.hint || !!this.hasSlottedHint;
|
|
@@ -10530,6 +10532,7 @@ const CatInput = class {
|
|
|
10530
10532
|
this.errors = undefined;
|
|
10531
10533
|
this.errorUpdate = 0;
|
|
10532
10534
|
this.nativeAttributes = undefined;
|
|
10535
|
+
this.testId = undefined;
|
|
10533
10536
|
}
|
|
10534
10537
|
get id() {
|
|
10535
10538
|
return this.identifier || this._id;
|
|
@@ -10593,19 +10596,19 @@ const CatInput = class {
|
|
|
10593
10596
|
}
|
|
10594
10597
|
render() {
|
|
10595
10598
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
10596
|
-
return (index.h("div", { key: '
|
|
10599
|
+
return (index.h("div", { key: '65536a5d26ff0ebe45920b352cdfa4e28719efeb', class: {
|
|
10597
10600
|
'input-field': true,
|
|
10598
10601
|
'input-horizontal': this.horizontal
|
|
10599
|
-
} }, index.h("div", { key: '
|
|
10602
|
+
} }, index.h("div", { key: '1492e4f53056086c1b01d9314b368a301d36667b', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '6ced806dcfcbe1eb0f2a6ebcd31f4ff4a3280e58', htmlFor: this.id, part: "label" }, index.h("span", { key: '23bbe79e6af8b0869510bc43533e02b60fd345ac', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'd1ccafcf2d7f49eedf400d78b678fbafabb2c158', name: "label" })) || this.label, index.h("div", { key: '7ee3879f60ec33a414406e040da4f93c24ccd5ea', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '58f31ad7dc3a108f6dde1ec88c482a5a3c74fcbd', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '63d78c225748e457899f55d964bcb1d2a0da851c', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (index.h("div", { key: 'b36623a31118624beca4d4005dbf0480e476cb53', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (index.h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), index.h("div", { key: '75d9b67e7cf19f2526e1e036de0efce6b02d2fa5', class: "input-container" }, index.h("div", { key: '33b2d24c18c7e4b78bcaf569787f4153237f0686', class: "input-outer-wrapper" }, index.h("div", { key: '50f66d6a718bc66162ce93d3f3ce75b53afd193a', class: {
|
|
10600
10603
|
'input-wrapper': true,
|
|
10601
10604
|
'input-round': this.round,
|
|
10602
10605
|
'input-readonly': this.readonly,
|
|
10603
10606
|
'input-disabled': this.disabled,
|
|
10604
10607
|
'input-invalid': this.invalid
|
|
10605
|
-
}, onClick: () => this.input.focus() }, this.textPrefix && (index.h("span", { key: '
|
|
10608
|
+
}, onClick: () => this.input.focus() }, this.textPrefix && (index.h("span", { key: '9549568c8b7d088babf19125a063270863d545a3', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (index.h("cat-icon", { key: 'fbd58b96277fc28e9de49ffd355471811fb16257', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), index.h("div", { key: '9ea5b2502d1364de65b656c064124329ace8a074', class: "input-inner-wrapper" }, index.h("input", { key: '80f00d9abc53fbc3cd6fa261663f6c9e940ec213', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
|
|
10606
10609
|
'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,
|
|
10607
10610
|
'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value
|
|
10608
|
-
}, 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: '
|
|
10611
|
+
}, 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: 'f301a2b57d36d2005e8705e07ea59dd32e54691a', 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: '8a9e442e985f5654ae1a2dc4ad7e24939e2275c4', 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: '50ef079a4d7a193d367817a0afa3db8be839b4a6', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (index.h("cat-icon", { key: '8ceedd341d85faebb2ebbb1d60b137f9e866aa05', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (index.h("cat-icon", { key: '3be8071c0d5d25d6607fd40547d2405c4cd1b7bb', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (index.h("span", { key: '7019774d260c7c59c33a2dc1d82c6f4fa1f45b45', class: "text-suffix", part: "suffix" }, this.textSuffix))), index.h("slot", { key: 'd3882acee81f3456c1d7ab86469b12deed42debe', name: "addon" })), this.hasHint && (index.h(CatFormHint, { key: '3dce699be6ee391d0aee55735959ed69501e52ff', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))));
|
|
10609
10612
|
}
|
|
10610
10613
|
get hasHint() {
|
|
10611
10614
|
return !!this.hint || !!this.hasSlottedHint || this.invalid;
|
|
@@ -10766,6 +10769,7 @@ const CatRadio = class {
|
|
|
10766
10769
|
this.labelLeft = false;
|
|
10767
10770
|
this.alignment = 'top';
|
|
10768
10771
|
this.nativeAttributes = undefined;
|
|
10772
|
+
this.testId = undefined;
|
|
10769
10773
|
}
|
|
10770
10774
|
get id() {
|
|
10771
10775
|
return this.identifier || this._id;
|
|
@@ -10793,13 +10797,13 @@ const CatRadio = class {
|
|
|
10793
10797
|
}
|
|
10794
10798
|
render() {
|
|
10795
10799
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
10796
|
-
return (index.h(index.Host, { key: '
|
|
10800
|
+
return (index.h(index.Host, { key: 'ca329dab3b08cf59911216e6d1d89e931d4c6836' }, index.h("label", { key: '0fae08dcf9b6017f1052342f22989a9218437a82', htmlFor: this.id, class: {
|
|
10797
10801
|
'is-hidden': this.labelHidden,
|
|
10798
10802
|
'is-disabled': this.disabled,
|
|
10799
10803
|
'label-left': this.labelLeft,
|
|
10800
10804
|
'align-center': this.alignment === 'center',
|
|
10801
10805
|
'align-end': this.alignment === 'bottom'
|
|
10802
|
-
}, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, index.h("span", { key: '
|
|
10806
|
+
}, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, index.h("span", { key: 'eed2cf5a6e64d64770466bbfcd5fd0f6e7e329d9', class: "radio" }, index.h("input", { key: '02a288466717c319419f94e2f9607ab63575e9d5', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, 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: 'f75aa8f50e723b8aa90b60001190638d3d56234a', class: "circle" })), index.h("span", { key: '52de52cc932bb531440862a04ede38cdf2b29a3a', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: '3c66d88d6517721590a342001258b5375f274714', name: "label" })) || this.label)), this.hasHint && (index.h("div", { key: 'b86904829302d22f22ce51f42bd147504b6e387f', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: 'dcca2f05ea10d9cbf731c7b59f82e33916014327', class: "circle-placeholder" }), index.h(CatFormHint, { key: 'e7b29ec3c4675b1e077fc783fe90780b5794f78a', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
|
|
10803
10807
|
}
|
|
10804
10808
|
get hasHint() {
|
|
10805
10809
|
return !!this.hint || !!this.hasSlottedHint;
|
|
@@ -11162,6 +11166,7 @@ const CatSelect = class {
|
|
|
11162
11166
|
this.errors = undefined;
|
|
11163
11167
|
this.errorUpdate = 0;
|
|
11164
11168
|
this.nativeAttributes = undefined;
|
|
11169
|
+
this.testId = undefined;
|
|
11165
11170
|
}
|
|
11166
11171
|
get id() {
|
|
11167
11172
|
return this.identifier || this._id;
|
|
@@ -11427,18 +11432,18 @@ const CatSelect = class {
|
|
|
11427
11432
|
}
|
|
11428
11433
|
render() {
|
|
11429
11434
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
11430
|
-
return (index.h(index.Host, { key: '
|
|
11435
|
+
return (index.h(index.Host, { key: '4ffaec1ec7c59635d3e923912e5bb5b554661973' }, index.h("div", { key: 'ad9ad59ff47ab4fe9c9485da344b0be8f030f824', class: {
|
|
11431
11436
|
'select-field': true,
|
|
11432
11437
|
'select-horizontal': this.horizontal,
|
|
11433
11438
|
'select-multiple': this.multiple
|
|
11434
|
-
} }, index.h("div", { key: '
|
|
11439
|
+
} }, index.h("div", { key: 'd87e3451ded9630ef471c6a0d0230f73bf2001f0', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '0eb6bd92232da327fd11a5b8fa5108064216b98d', htmlFor: `select-${this.id}-input`, part: "label" }, index.h("span", { key: '29b3bc2a6300cf116e85b598c43bc3d590bfca40', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '105d69c1c4ebce966d207248d0919713402775fc', name: "label" })) || this.label, index.h("div", { key: '60d737d4bc621e64c4d60a4454c81d5cd2f14036', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '3ff4fc174c6769300fecde9b4f3785e7f510b3c5', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '44beff5fb235a6ecfe4d3bde6173309ab9374b7d', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: 'ca853307f93adc14b4ebe5de1f0b5cd255d438d7', class: "select-container" }, index.h("div", { key: 'fc56c44f4d6b27ca4d7d1c3f344bef6c5495ae84', 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: '77d3a48ea7ad111136fb1513aaeb6c3b15533436', 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: {
|
|
11435
11440
|
pill: true,
|
|
11436
11441
|
'select-no-open': true,
|
|
11437
11442
|
'select-option-active': this.state.activeSelectionIndex === i
|
|
11438
|
-
}, 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: '
|
|
11443
|
+
}, 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: 'a4e438192ecee41d5acf77de45a1526876409a0f', "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: '04d53d0d39bc429a6ac9a479c46f42c6b03a9283' }), this.invalid && (index.h("cat-icon", { key: 'd21136d141632914fc176ea1939164a4d40dc446', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
|
|
11439
11444
|
!this.disabled &&
|
|
11440
11445
|
!this.state.isResolving &&
|
|
11441
|
-
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: '
|
|
11446
|
+
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: 'cd5c84bbc7b04b28acda86d656b2ea9835cbb439', 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: 'd0f3f4f080abf2136e681161802f0b332591a30a', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))), index.h("div", { key: '1fb0555801f6793b6351dbc19f2eba12c7292593', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { key: '8eea85eea2b000f29d690aafc7fbae106bf275e5', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.h("ul", { key: 'fa0415a3459967bc8a8591c94e3227c8fb99443d', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
|
|
11442
11447
|
? 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 }))))
|
|
11443
11448
|
: !this.state.options.length &&
|
|
11444
11449
|
!this.tags && (index.h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : of.catI18nRegistry.t('select.empty')))))))));
|
|
@@ -13392,6 +13397,7 @@ const CatTag = class {
|
|
|
13392
13397
|
this.labelHidden = false;
|
|
13393
13398
|
this.required = false;
|
|
13394
13399
|
this.nativeAttributes = undefined;
|
|
13400
|
+
this.testId = undefined;
|
|
13395
13401
|
this.value = undefined;
|
|
13396
13402
|
this.clearable = false;
|
|
13397
13403
|
this.errors = undefined;
|
|
@@ -13438,7 +13444,7 @@ const CatTag = class {
|
|
|
13438
13444
|
}
|
|
13439
13445
|
render() {
|
|
13440
13446
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
13441
|
-
return (index.h(index.Host, { key: '
|
|
13447
|
+
return (index.h(index.Host, { key: 'ea219f15738c0e0b11d7b4134e970141c337a991' }, index.h("div", { key: '54cbafd14a0a243b459b8cce5f5b9199cdef7f59', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '4a916c1ec4f99f3db7e2a31008d0277b1a93690e', htmlFor: `tags-${this.id}-input`, part: "label" }, index.h("span", { key: '999ad493f6ab3b97e9dbf4c62033ad358a77ab57', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'ff636ee0ccd174878eafe0ab709e9c66d3ba4d3e', name: "label" })) || this.label, index.h("div", { key: 'b983335cc6f08005495c3784fb9c0de6a39f039f', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '91fd49cfdf2e2a7af3d7d87b91c4f6bc6ed88f3f', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'd59686d3ac8c02b2198fc8013ad34463d8e2afba', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: '37cc1963186b77dae6e853042db75919316f5a10', class: { 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid } }, this.value?.map(value => (index.h("div", { class: "tag-pill" }, index.h("span", null, value), !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(value), tabIndex: -1 }))))), index.h("div", { key: '37902cc20fcf55f9f8848daa167a765dc7f48ac2', class: "input-inner-wrapper" }, index.h("input", { key: '316e34e90944d96b1e829a49e5041ad865336d63', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `tags-${this.id}-input`, class: "tags-input", role: "combobox", ref: el => (this.input = el), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), onBlur: this.onBlur.bind(this), placeholder: this.placeholder, disabled: this.disabled }), this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (index.h("cat-button", { key: '17a6710dbf2aa77eefa25ad97252f78101e1dcee', 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.invalid && index.h("cat-icon", { key: 'c439cfc9bf8e2579d053cb7efe827665456167ed', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }))), this.hasHint && (index.h(CatFormHint, { key: '577f9da90fb534b99d43b7d35643237d46c6f6da', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))));
|
|
13442
13448
|
}
|
|
13443
13449
|
get hasHint() {
|
|
13444
13450
|
return !!this.hint || !!this.hasSlottedHint || this.invalid;
|
|
@@ -13555,6 +13561,7 @@ const CatTextarea = class {
|
|
|
13555
13561
|
this.errors = undefined;
|
|
13556
13562
|
this.errorUpdate = 0;
|
|
13557
13563
|
this.nativeAttributes = undefined;
|
|
13564
|
+
this.testId = undefined;
|
|
13558
13565
|
}
|
|
13559
13566
|
get id() {
|
|
13560
13567
|
return this.identifier || this._id;
|
|
@@ -13609,15 +13616,15 @@ const CatTextarea = class {
|
|
|
13609
13616
|
}
|
|
13610
13617
|
render() {
|
|
13611
13618
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
13612
|
-
return (index.h(index.Host, { key: '
|
|
13619
|
+
return (index.h(index.Host, { key: '776354bbb03c8cb024d707f005cc53b11a61bc08' }, index.h("div", { key: '8ba766cb2681246058e7bd1082bb8b06d09c3edf', class: {
|
|
13613
13620
|
'textarea-field': true,
|
|
13614
13621
|
'textarea-horizontal': this.horizontal
|
|
13615
|
-
} }, index.h("div", { key: '
|
|
13622
|
+
} }, index.h("div", { key: '75345030c6d4c269f60da416c43ddaf0979f93fc', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'b0332bc73a58d3559e31620687802cf5abf5d92f', htmlFor: this.id, part: "label" }, index.h("span", { key: '177f5cccd3b74c85fa86acc1a9f2b4a0bc05809e', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '775fd2269ed0d8333d1a1630cc6fd4928fe851a0', name: "label" })) || this.label, index.h("div", { key: 'a3db8aaaae6a72789e7b1039c5ce685335f081da', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '7b80ecce688910d85b63b230085489bfdde5d833', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '0d047c9fc850c795df761d4b9d7a414861eb38be', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (index.h("div", { key: 'd1339f4e4df011c65c57f701d5fc861966ff918d', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (index.h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), index.h("div", { key: '31af38f5bd63cbf2b315b072421dbbded35ee5ae', class: "textarea-container" }, index.h("div", { key: '5da2c1a1cbcd790a931a1444097919648f73761e', class: {
|
|
13616
13623
|
'textarea-wrapper': true,
|
|
13617
13624
|
'textarea-readonly': this.readonly,
|
|
13618
13625
|
'textarea-disabled': this.disabled,
|
|
13619
13626
|
'textarea-invalid': this.invalid
|
|
13620
|
-
} }, index.h("textarea", { key: '
|
|
13627
|
+
} }, index.h("textarea", { key: 'bc3f1210a9ed12884e916e050e4f0c93823d0600', "data-test": this.testId, ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, autocomplete: this.autoComplete, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, 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.invalid && (index.h("cat-icon", { key: '342839d1ebb8fd3fab02d6692ec26b680fb187c6', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (index.h(CatFormHint, { key: '132bfe8caf387912b7d1156e2b066aecec99ed54', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
|
|
13621
13628
|
}
|
|
13622
13629
|
get hasHint() {
|
|
13623
13630
|
return !!this.hint || !!this.hasSlottedHint || this.invalid;
|
|
@@ -13959,6 +13966,7 @@ const CatToggle = class {
|
|
|
13959
13966
|
this.labelLeft = false;
|
|
13960
13967
|
this.alignment = 'top';
|
|
13961
13968
|
this.nativeAttributes = undefined;
|
|
13969
|
+
this.testId = undefined;
|
|
13962
13970
|
}
|
|
13963
13971
|
get id() {
|
|
13964
13972
|
return this.identifier || this._id;
|
|
@@ -13989,13 +13997,13 @@ const CatToggle = class {
|
|
|
13989
13997
|
}
|
|
13990
13998
|
render() {
|
|
13991
13999
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
13992
|
-
return (index.h(index.Host, { key: '
|
|
14000
|
+
return (index.h(index.Host, { key: '18e3e673ff5447b34457de423f601cc1af767c00' }, index.h("label", { key: '22df334a9f372ee040c3deb3165f82f8fdcef0b0', htmlFor: this.id, class: {
|
|
13993
14001
|
'is-hidden': this.labelHidden,
|
|
13994
14002
|
'is-disabled': this.disabled,
|
|
13995
14003
|
'label-left': this.labelLeft,
|
|
13996
14004
|
'align-center': this.alignment === 'center',
|
|
13997
14005
|
'align-end': this.alignment === 'bottom'
|
|
13998
|
-
} }, index.h("input", { key: '
|
|
14006
|
+
} }, index.h("input", { key: '4472899b180f286d43c5d34aa7821a29db3ffb18', "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, class: "form-check-input", role: "switch", 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: '90e342a85fd5e80ccde346aa65aaccacaf2cb919', class: "toggle" }), index.h("span", { key: '138b08fbf20d83cd74d18b3a7c76ecb87d4b9eb2', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: '6753f56609e0447ec0eb5b040c74bd511f6dd4de', name: "label" })) || this.label)), this.hasHint && (index.h("div", { key: '4d5bda25b5e53b0ba8725b41539d08fd9c3bf5f6', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: '9006cf3a82f66cf15c255bba4e2720f86b63e8c8', class: "toggle-placeholder" }), index.h(CatFormHint, { key: '17eebfed86f71a33629ee9ed943bcd9e0fe276c5', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
|
|
13999
14007
|
}
|
|
14000
14008
|
get hasHint() {
|
|
14001
14009
|
return !!this.hint || !!this.hasSlottedHint;
|