@haiilo/catalyst 10.35.0 → 10.37.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-98a95fb7.entry.js → p-3a3e9083.entry.js} +4 -4
- package/dist/catalyst/p-3a3e9083.entry.js.map +1 -0
- package/dist/catalyst/p-7f3bcfb9.js +3 -0
- package/dist/{esm/index-30afba72.js.map → catalyst/p-7f3bcfb9.js.map} +1 -1
- package/dist/cjs/cat-alert_30.cjs.entry.js +61 -15
- package/dist/cjs/cat-alert_30.cjs.entry.js.map +1 -1
- package/dist/cjs/catalyst.cjs.js +2 -2
- package/dist/cjs/{index-0c9af7fb.js → index-1094f0fc.js} +30 -2
- package/dist/cjs/index-1094f0fc.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/components/cat-checkbox/cat-checkbox.js +6 -2
- package/dist/collection/components/cat-checkbox/cat-checkbox.js.map +1 -1
- package/dist/collection/components/cat-dropdown/cat-dropdown.js +27 -3
- package/dist/collection/components/cat-dropdown/cat-dropdown.js.map +1 -1
- package/dist/collection/components/cat-input/cat-input.js +8 -4
- package/dist/collection/components/cat-input/cat-input.js.map +1 -1
- package/dist/collection/components/cat-textarea/cat-textarea.js +7 -3
- package/dist/collection/components/cat-textarea/cat-textarea.js.map +1 -1
- package/dist/collection/components/cat-toggle/cat-toggle.js +6 -2
- package/dist/collection/components/cat-toggle/cat-toggle.js.map +1 -1
- package/dist/components/cat-checkbox2.js +7 -3
- package/dist/components/cat-checkbox2.js.map +1 -1
- package/dist/components/cat-dropdown2.js +10 -3
- package/dist/components/cat-dropdown2.js.map +1 -1
- package/dist/components/cat-input2.js +9 -5
- package/dist/components/cat-input2.js.map +1 -1
- package/dist/components/cat-textarea.js +8 -4
- package/dist/components/cat-textarea.js.map +1 -1
- package/dist/components/cat-toggle.js +7 -3
- package/dist/components/cat-toggle.js.map +1 -1
- package/dist/esm/cat-alert_30.entry.js +61 -15
- package/dist/esm/cat-alert_30.entry.js.map +1 -1
- package/dist/esm/catalyst.js +3 -3
- package/dist/esm/{index-30afba72.js → index-e8c0ddf2.js} +30 -2
- package/dist/esm/index-e8c0ddf2.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/types/components/cat-checkbox/cat-checkbox.d.ts +1 -0
- package/dist/types/components/cat-dropdown/cat-dropdown.d.ts +6 -0
- package/dist/types/components/cat-input/cat-input.d.ts +1 -0
- package/dist/types/components/cat-textarea/cat-textarea.d.ts +1 -0
- package/dist/types/components/cat-toggle/cat-toggle.d.ts +1 -0
- package/dist/types/components.d.ts +8 -0
- package/package.json +4 -4
- package/dist/catalyst/p-98a95fb7.entry.js.map +0 -1
- package/dist/catalyst/p-c3a9aef7.js +0 -3
- package/dist/catalyst/p-c3a9aef7.js.map +0 -1
- package/dist/cjs/index-0c9af7fb.js.map +0 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-1094f0fc.js');
|
|
6
6
|
const of = require('./of-958251e4.js');
|
|
7
7
|
|
|
8
8
|
const ObjectUnsubscribedError = of.createErrorClass((_super) => function ObjectUnsubscribedErrorImpl() {
|
|
@@ -1354,6 +1354,13 @@ const CatCheckbox = class {
|
|
|
1354
1354
|
this.catChange = index.createEvent(this, "catChange", 7);
|
|
1355
1355
|
this.catFocus = index.createEvent(this, "catFocus", 7);
|
|
1356
1356
|
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
1357
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
1358
|
+
this.internals = hostRef.$hostElement$["s-ei"];
|
|
1359
|
+
}
|
|
1360
|
+
else {
|
|
1361
|
+
this.internals = hostRef.$hostElement$.attachInternals();
|
|
1362
|
+
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
1363
|
+
}
|
|
1357
1364
|
this._id = `cat-checkbox-${nextUniqueId$a++}`;
|
|
1358
1365
|
this.hasSlottedLabel = false;
|
|
1359
1366
|
this.hasSlottedHint = false;
|
|
@@ -1382,6 +1389,7 @@ const CatCheckbox = class {
|
|
|
1382
1389
|
this.updateResolved();
|
|
1383
1390
|
}
|
|
1384
1391
|
componentWillRender() {
|
|
1392
|
+
this.internals.setFormValue(this.checked ? (this.value ?? 'on') : (this.noValue ?? null));
|
|
1385
1393
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
1386
1394
|
this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
1387
1395
|
}
|
|
@@ -1403,19 +1411,20 @@ const CatCheckbox = class {
|
|
|
1403
1411
|
this.input.blur();
|
|
1404
1412
|
}
|
|
1405
1413
|
render() {
|
|
1406
|
-
return (index.h(index.Host, { key: '
|
|
1414
|
+
return (index.h(index.Host, { key: '05b68d962533497b453115b800e3ea303158212c' }, index.h("label", { key: 'd15945284e20c6d58cf2df7688b036b2e5425f0f', htmlFor: this.id, class: {
|
|
1407
1415
|
'is-hidden': this.labelHidden,
|
|
1408
1416
|
'is-disabled': this.disabled,
|
|
1409
1417
|
'label-left': this.labelLeft,
|
|
1410
1418
|
'align-center': this.alignment === 'center',
|
|
1411
1419
|
'align-end': this.alignment === 'bottom'
|
|
1412
|
-
} }, index.h("input", { key: '
|
|
1420
|
+
} }, index.h("input", { key: 'a5d6f3093e75db63e7c300253518e42106760a52', "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: '0c65b6e371a36520133fd172be153df28196491d', class: "box", "aria-hidden": "true" }, index.h("svg", { key: '044cab34d712b243c9329922482df42694950cfc', class: "check", viewBox: "0 0 12 10" }, index.h("polyline", { key: 'a573d56014dc292b1f41cb1b01f28d814b4a5516', points: "1.5 6 4.5 9 10.5 1" })), index.h("svg", { key: 'f09647dc93bfb204ce076dc77ec32ca9d024ea65', class: "dash", viewBox: "0 0 12 10" }, index.h("polyline", { key: '9cb83216b18ba26d53936911c73e2f3de67916c3', points: "1.5 5 10.5 5" }))), index.h("span", { key: '84c1bee050ca233c8fdda98ceace71de343a350d', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: '61a771b1bad26a055baed80e762c0aaac09bc3f4', name: "label" })) || this.label, index.h("span", { key: '5a330f42046052f38bb46e149fc029daa8fb8f3e', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '4579818c0b721db3e9f177c9510072eaef451dba', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'a5ca8a8bc0753aef66d36f86f6c61c31ec4a4069', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (index.h("div", { key: '15312bf5c2d948928fb70e6055b28ae996ffdd1b', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: 'f1bf992ec81de9aa642093aafa8bd8da73d237f8', class: "box-placeholder" }), index.h(CatFormHint, { key: '66354c340d274a802a21eac6d95b1e4390cfde71', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
|
|
1413
1421
|
}
|
|
1414
1422
|
get hasHint() {
|
|
1415
1423
|
return !!this.hint || !!this.hasSlottedHint;
|
|
1416
1424
|
}
|
|
1417
1425
|
onInput() {
|
|
1418
1426
|
this.checked = this.input.checked;
|
|
1427
|
+
this.internals.setFormValue(this.input.checked ? (this.value ?? 'on') : (this.noValue ?? null));
|
|
1419
1428
|
this.indeterminate = this.input.indeterminate;
|
|
1420
1429
|
this.updateResolved();
|
|
1421
1430
|
this.catChange.emit(this.resolvedValue);
|
|
@@ -1429,6 +1438,7 @@ const CatCheckbox = class {
|
|
|
1429
1438
|
updateResolved() {
|
|
1430
1439
|
this.resolvedValue = this.checked ? (this.value ?? true) : (this.noValue ?? false);
|
|
1431
1440
|
}
|
|
1441
|
+
static get formAssociated() { return true; }
|
|
1432
1442
|
get hostElement() { return index.getElement(this); }
|
|
1433
1443
|
};
|
|
1434
1444
|
CatCheckbox.style = CatCheckboxStyle0;
|
|
@@ -8679,6 +8689,7 @@ const CatDropdown = class {
|
|
|
8679
8689
|
*/
|
|
8680
8690
|
this.hasInitialFocus = false;
|
|
8681
8691
|
this.placement = 'bottom-start';
|
|
8692
|
+
this.justify = false;
|
|
8682
8693
|
this.noAutoClose = false;
|
|
8683
8694
|
this.arrowNavigation = 'vertical';
|
|
8684
8695
|
this.noResize = false;
|
|
@@ -8793,7 +8804,7 @@ const CatDropdown = class {
|
|
|
8793
8804
|
}, timeTransitionS);
|
|
8794
8805
|
}
|
|
8795
8806
|
render() {
|
|
8796
|
-
return (index.h(index.Host, { key: '
|
|
8807
|
+
return (index.h(index.Host, { key: 'abd5eb8eb84977f0981113b3f7958ec2a31a47bb' }, index.h("slot", { key: '6049c92c9b30e3fba338fb94d17543476620fe37', name: "anchor", ref: el => (this.anchorSlot = el) }), index.h("slot", { key: '6eb5f52f222ad08b4a7f0d41d4ace943b371a6b7', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: 'e186f63a79fcc457bee344ee188fef37f2c27383', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow }, ref: el => (this.content = el) }, index.h("slot", { key: 'c0060ac95085f3794f61fd88922368c59a31b1b7', name: "content" }))));
|
|
8797
8808
|
}
|
|
8798
8809
|
componentDidLoad() {
|
|
8799
8810
|
this.initAnchor();
|
|
@@ -8841,14 +8852,19 @@ const CatDropdown = class {
|
|
|
8841
8852
|
}
|
|
8842
8853
|
return trigger;
|
|
8843
8854
|
}
|
|
8844
|
-
update(anchorElement) {
|
|
8855
|
+
update(anchorElement, justify = this.justify) {
|
|
8845
8856
|
if (anchorElement) {
|
|
8846
8857
|
const resize = this.noResize
|
|
8847
8858
|
? []
|
|
8848
8859
|
: [
|
|
8849
8860
|
size({
|
|
8850
8861
|
padding: CatDropdown.OFFSET,
|
|
8851
|
-
apply({ availableWidth, availableHeight, elements }) {
|
|
8862
|
+
apply({ rects, availableWidth, availableHeight, elements }) {
|
|
8863
|
+
if (justify) {
|
|
8864
|
+
Object.assign(elements.floating.style, {
|
|
8865
|
+
minWidth: `${rects.reference.width}px`
|
|
8866
|
+
});
|
|
8867
|
+
}
|
|
8852
8868
|
Object.assign(elements.floating.style, {
|
|
8853
8869
|
maxWidth: `${availableWidth}px`,
|
|
8854
8870
|
maxHeight: `${availableHeight}px`
|
|
@@ -10515,6 +10531,13 @@ const CatInput = class {
|
|
|
10515
10531
|
this.catChange = index.createEvent(this, "catChange", 7);
|
|
10516
10532
|
this.catFocus = index.createEvent(this, "catFocus", 7);
|
|
10517
10533
|
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
10534
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
10535
|
+
this.internals = hostRef.$hostElement$["s-ei"];
|
|
10536
|
+
}
|
|
10537
|
+
else {
|
|
10538
|
+
this.internals = hostRef.$hostElement$.attachInternals();
|
|
10539
|
+
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
10540
|
+
}
|
|
10518
10541
|
this._id = `cat-input-${nextUniqueId$7++}`;
|
|
10519
10542
|
this.hasSlottedLabel = false;
|
|
10520
10543
|
this.hasSlottedHint = false;
|
|
@@ -10559,6 +10582,7 @@ const CatInput = class {
|
|
|
10559
10582
|
this.onErrorsChanged(this.errors, undefined, false);
|
|
10560
10583
|
}
|
|
10561
10584
|
componentWillRender() {
|
|
10585
|
+
this.internals.setFormValue(this.value ?? null);
|
|
10562
10586
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
10563
10587
|
this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
10564
10588
|
this.hasSlottedCounter = !!this.hostElement.querySelector('[slot="counter"]');
|
|
@@ -10614,19 +10638,19 @@ const CatInput = class {
|
|
|
10614
10638
|
}
|
|
10615
10639
|
render() {
|
|
10616
10640
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
10617
|
-
return (index.h("div", { key: '
|
|
10641
|
+
return (index.h("div", { key: '72c7cf2c86831c1aca03467ec92149fa0a58b05a', class: {
|
|
10618
10642
|
'input-field': true,
|
|
10619
10643
|
'input-horizontal': this.horizontal
|
|
10620
|
-
} }, index.h("div", { key: '
|
|
10644
|
+
} }, index.h("div", { key: '7cc76563550305d886b1a18d2344bf59b27f6fc2', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '247ad3243e98e5ecf1002e59a84f8f2d1b4f17f4', htmlFor: this.id, part: "label" }, index.h("span", { key: '0d5f489a87735fc11c9dbacf9acded6d7523926a', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '3ade7278530f2b79a3dda8db8923392b84629feb', name: "label" })) || this.label, index.h("div", { key: '0c1bea5d04c65ceace3ba7a10f7d513301709f86', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '437f7c224b323514b2a4dcca8ffd6cdc83d3c384', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'cbc29c60d0f624bcceb1b5e55ba6bc38afc8d514', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (index.h("div", { key: 'f00cdace4e8f842019d7ffae484aca11925e2bc2', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (index.h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), index.h("div", { key: '8c961aaf1d0451118d9f5ae583a228be54b320eb', class: "input-container" }, index.h("div", { key: '6e9e98caaabea18e4a71b8b09baea5355f2eac7b', class: "input-outer-wrapper" }, index.h("div", { key: '38a5db004dbee08ce542dd36bf0da13156887e26', class: {
|
|
10621
10645
|
'input-wrapper': true,
|
|
10622
10646
|
'input-round': this.round,
|
|
10623
10647
|
'input-readonly': this.readonly,
|
|
10624
10648
|
'input-disabled': this.disabled,
|
|
10625
10649
|
'input-invalid': this.invalid
|
|
10626
|
-
}, onClick: () => this.input.focus() }, this.textPrefix && (index.h("span", { key: '
|
|
10650
|
+
}, onClick: () => this.input.focus() }, this.textPrefix && (index.h("span", { key: '350c53ffd8b59df4aa63d23c44213425df9add95', class: "text-prefix", part: "prefix" }, this.textPrefix)), this.icon && !this.iconRight && (index.h("cat-icon", { key: '5f4794dac4ded82db99a395f1fe34fa9d393498f', icon: this.icon, class: "icon-prefix", size: "l", onClick: () => this.doFocus() })), index.h("div", { key: '5514838423e9ecfed27f877edc2bedaeeebb1584', class: "input-inner-wrapper" }, index.h("input", { key: '2dd5de3d46df35470caf488d3f48b5339081c537', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, class: {
|
|
10627
10651
|
'has-clearable': this.clearable && !this.disabled && !this.readonly && !!this.value,
|
|
10628
10652
|
'has-toggle-password': this.togglePassword && !this.disabled && !this.readonly && !!this.value
|
|
10629
|
-
}, 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: '
|
|
10653
|
+
}, autocomplete: this.autoComplete, disabled: this.disabled, max: this.max, maxlength: this.maxLength, min: this.min, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, type: this.isPasswordShown ? 'text' : this.type, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.clearable && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { key: '0392b61e401ad12bcc32fe6de7f2acdf49184093', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.togglePassword && !this.disabled && !this.readonly && this.value && (index.h("cat-button", { key: 'c33c6b188af0d2ccbf67b4a3527d7dc53af8a1fb', class: "toggle-password", icon: this.isPasswordShown ? '$cat:input-password-hide' : '$cat:input-password-show', "icon-only": "true", size: "s", variant: "text", "a11y-label": of.catI18nRegistry.t(this.isPasswordShown ? 'input.hidePassword' : 'input.showPassword'), onClick: this.doTogglePassword.bind(this) }))), this.loading && index.h("cat-spinner", { key: '3c51656392e532a3a16efcc5dbf181c40b96ed32', size: "m", class: "icon-loading" }), !this.invalid && this.icon && this.iconRight && (index.h("cat-icon", { key: 'f3a527250b2ab0ae5bb56217366cabe00c5e7bee', icon: this.icon, class: "icon-suffix", size: "l", onClick: () => this.doFocus() })), this.invalid && (index.h("cat-icon", { key: '063104b3c65eceb1260109c0f55944ca39c5c2ac', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), this.textSuffix && (index.h("span", { key: '0508e322d57cc28a245a8e1fe2f16e02af04679b', class: "text-suffix", part: "suffix" }, this.textSuffix))), index.h("slot", { key: 'b5ea42f17934631b97c05c0ccfbadd8a1554d779', name: "addon" })), this.hasHint && (index.h(CatFormHint, { key: '549e082c4e1ff946d2d26ce3843db26af96333d3', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))));
|
|
10630
10654
|
}
|
|
10631
10655
|
get hasHint() {
|
|
10632
10656
|
return !!this.hint || !!this.hasSlottedHint || this.invalid;
|
|
@@ -10636,6 +10660,7 @@ const CatInput = class {
|
|
|
10636
10660
|
}
|
|
10637
10661
|
onInput() {
|
|
10638
10662
|
this.value = this.input.value;
|
|
10663
|
+
this.internals.setFormValue(this.input.value);
|
|
10639
10664
|
this.catChange.emit(this.value);
|
|
10640
10665
|
this.showErrorsIfTimeout();
|
|
10641
10666
|
}
|
|
@@ -10679,6 +10704,7 @@ const CatInput = class {
|
|
|
10679
10704
|
return undefined;
|
|
10680
10705
|
}
|
|
10681
10706
|
static get delegatesFocus() { return true; }
|
|
10707
|
+
static get formAssociated() { return true; }
|
|
10682
10708
|
get hostElement() { return index.getElement(this); }
|
|
10683
10709
|
static get watchers() { return {
|
|
10684
10710
|
"errors": ["onErrorsChanged"]
|
|
@@ -13568,6 +13594,13 @@ const CatTextarea = class {
|
|
|
13568
13594
|
this.catChange = index.createEvent(this, "catChange", 7);
|
|
13569
13595
|
this.catFocus = index.createEvent(this, "catFocus", 7);
|
|
13570
13596
|
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
13597
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
13598
|
+
this.internals = hostRef.$hostElement$["s-ei"];
|
|
13599
|
+
}
|
|
13600
|
+
else {
|
|
13601
|
+
this.internals = hostRef.$hostElement$.attachInternals();
|
|
13602
|
+
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
13603
|
+
}
|
|
13571
13604
|
this._id = `cat-textarea-${nextUniqueId$2++}`;
|
|
13572
13605
|
this.hasSlottedLabel = false;
|
|
13573
13606
|
this.hasSlottedHint = false;
|
|
@@ -13601,6 +13634,7 @@ const CatTextarea = class {
|
|
|
13601
13634
|
this.onErrorsChanged(this.errors, undefined, false);
|
|
13602
13635
|
}
|
|
13603
13636
|
componentWillRender() {
|
|
13637
|
+
this.internals.setFormValue(this.value ?? null);
|
|
13604
13638
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
13605
13639
|
this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
13606
13640
|
this.hasSlottedCounter = !!this.hostElement.querySelector('[slot="counter"]');
|
|
@@ -13647,15 +13681,15 @@ const CatTextarea = class {
|
|
|
13647
13681
|
}
|
|
13648
13682
|
render() {
|
|
13649
13683
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
13650
|
-
return (index.h(index.Host, { key: '
|
|
13684
|
+
return (index.h(index.Host, { key: '15b9959f246c2252a40612928bcbbb3062f5ee33' }, index.h("div", { key: '559389b16d2ffbc57f220f042a8bf5406ab38c46', class: {
|
|
13651
13685
|
'textarea-field': true,
|
|
13652
13686
|
'textarea-horizontal': this.horizontal
|
|
13653
|
-
} }, index.h("div", { key: '
|
|
13687
|
+
} }, index.h("div", { key: '5b02ba0adc0df7aa500f4031bbeab1b2c7ab8c12', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '3b40ff524f852b431f6e98197810503d981ee315', htmlFor: this.id, part: "label" }, index.h("span", { key: 'afcad9c98545e36b1d1f199bf166145114932df1', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '6846020e1fa1600ff7bbc2cabc789b7289aed021', name: "label" })) || this.label, index.h("div", { key: '92ea11607812b8f3892aee8c0ce4ac2ca8dd5e02', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '47ea9bca97afbfe7fa4433260311342425fbfeda', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '9c084e2bc9f2cd6c601bd43d2dc01af7ce9bfa7d', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (index.h("div", { key: '1de2f7b5006f76b79b730fa75eff5829e29dc113', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (index.h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), index.h("div", { key: 'b06f84a61994d2648a154b50fc2b75bb440901ff', class: "textarea-container" }, index.h("div", { key: '7e64f6176bd76f10c20c7fc952ba1ac55ad2e401', class: {
|
|
13654
13688
|
'textarea-wrapper': true,
|
|
13655
13689
|
'textarea-readonly': this.readonly,
|
|
13656
13690
|
'textarea-disabled': this.disabled,
|
|
13657
13691
|
'textarea-invalid': this.invalid
|
|
13658
|
-
} }, index.h("textarea", { key: '
|
|
13692
|
+
} }, index.h("textarea", { key: '04189852da504f91cb6219aefb58c1ed393996f1', "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: '794c3208f8a8db16c912960b643a6f5207496111', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (index.h(CatFormHint, { key: '96a271ee88d1608283efbc5f8913586da8e787e3', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
|
|
13659
13693
|
}
|
|
13660
13694
|
get hasHint() {
|
|
13661
13695
|
return !!this.hint || !!this.hasSlottedHint || this.invalid;
|
|
@@ -13665,6 +13699,7 @@ const CatTextarea = class {
|
|
|
13665
13699
|
}
|
|
13666
13700
|
onInput() {
|
|
13667
13701
|
this.value = this.textarea.value;
|
|
13702
|
+
this.internals.setFormValue(this.textarea.value);
|
|
13668
13703
|
this.catChange.emit(this.value);
|
|
13669
13704
|
this.showErrorsIfTimeout();
|
|
13670
13705
|
}
|
|
@@ -13696,6 +13731,7 @@ const CatTextarea = class {
|
|
|
13696
13731
|
}
|
|
13697
13732
|
}
|
|
13698
13733
|
static get delegatesFocus() { return true; }
|
|
13734
|
+
static get formAssociated() { return true; }
|
|
13699
13735
|
get hostElement() { return index.getElement(this); }
|
|
13700
13736
|
static get watchers() { return {
|
|
13701
13737
|
"errors": ["onErrorsChanged"]
|
|
@@ -13981,6 +14017,13 @@ const CatToggle = class {
|
|
|
13981
14017
|
this.catChange = index.createEvent(this, "catChange", 7);
|
|
13982
14018
|
this.catFocus = index.createEvent(this, "catFocus", 7);
|
|
13983
14019
|
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
14020
|
+
if (hostRef.$hostElement$["s-ei"]) {
|
|
14021
|
+
this.internals = hostRef.$hostElement$["s-ei"];
|
|
14022
|
+
}
|
|
14023
|
+
else {
|
|
14024
|
+
this.internals = hostRef.$hostElement$.attachInternals();
|
|
14025
|
+
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
14026
|
+
}
|
|
13984
14027
|
this._id = `cat-toggle-${nextUniqueId$1++}`;
|
|
13985
14028
|
this.hasSlottedLabel = false;
|
|
13986
14029
|
this.hasSlottedHint = false;
|
|
@@ -14007,6 +14050,7 @@ const CatToggle = class {
|
|
|
14007
14050
|
this.updateResolved();
|
|
14008
14051
|
}
|
|
14009
14052
|
componentWillRender() {
|
|
14053
|
+
this.internals.setFormValue(this.checked ? (this.value ?? 'on') : (this.noValue ?? null));
|
|
14010
14054
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
14011
14055
|
this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
14012
14056
|
}
|
|
@@ -14029,19 +14073,20 @@ const CatToggle = class {
|
|
|
14029
14073
|
}
|
|
14030
14074
|
render() {
|
|
14031
14075
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
14032
|
-
return (index.h(index.Host, { key: '
|
|
14076
|
+
return (index.h(index.Host, { key: '4648a8de33b6a63ba94cd5fd15b6e3e65986470d' }, index.h("label", { key: '063aa2a20504db693e4ae6d96733f96217dcc4b4', htmlFor: this.id, class: {
|
|
14033
14077
|
'is-hidden': this.labelHidden,
|
|
14034
14078
|
'is-disabled': this.disabled,
|
|
14035
14079
|
'label-left': this.labelLeft,
|
|
14036
14080
|
'align-center': this.alignment === 'center',
|
|
14037
14081
|
'align-end': this.alignment === 'bottom'
|
|
14038
|
-
} }, index.h("input", { key: '
|
|
14082
|
+
} }, index.h("input", { key: 'd7ed53b6668b5335621e92fe648f28d34e43d371', "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: '852f811c47488c5ee7ba5536c79c82502dd18f92', class: "toggle" }), index.h("span", { key: '00efe1901a1b2ad93b24362124c7d5b604ca62a9', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: '039e0fdcd80e110bb1b2ab6ac74472ff9d2e82f4', name: "label" })) || this.label)), this.hasHint && (index.h("div", { key: '4c59d7a015ac1d0c9430e569244ba20bd71886e2', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: '53f611eaded0a9048c79d82a444144c104589208', class: "toggle-placeholder" }), index.h(CatFormHint, { key: '250ebfbbbeafe28c1e47c857c6af1ee2429edcb5', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
|
|
14039
14083
|
}
|
|
14040
14084
|
get hasHint() {
|
|
14041
14085
|
return !!this.hint || !!this.hasSlottedHint;
|
|
14042
14086
|
}
|
|
14043
14087
|
onInput() {
|
|
14044
14088
|
this.checked = this.input.checked;
|
|
14089
|
+
this.internals.setFormValue(this.input.checked ? (this.value ?? 'on') : (this.noValue ?? null));
|
|
14045
14090
|
this.updateResolved();
|
|
14046
14091
|
this.catChange.emit(this.resolvedValue);
|
|
14047
14092
|
}
|
|
@@ -14055,6 +14100,7 @@ const CatToggle = class {
|
|
|
14055
14100
|
this.resolvedValue = this.checked ? (this.value ?? true) : (this.noValue ?? false);
|
|
14056
14101
|
}
|
|
14057
14102
|
static get delegatesFocus() { return true; }
|
|
14103
|
+
static get formAssociated() { return true; }
|
|
14058
14104
|
get hostElement() { return index.getElement(this); }
|
|
14059
14105
|
};
|
|
14060
14106
|
CatToggle.style = CatToggleStyle0;
|