@haiilo/catalyst 13.0.2 → 13.1.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-bbf8cfa7.entry.js → p-0f66432a.entry.js} +4 -4
- package/dist/catalyst/{p-bbf8cfa7.entry.js.map → p-0f66432a.entry.js.map} +1 -1
- package/dist/cjs/cat-alert_30.cjs.entry.js +59 -54
- package/dist/cjs/cat-alert_30.cjs.entry.js.map +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 +49 -0
- package/dist/collection/components/cat-input/cat-input.js +9 -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.css +2 -2
- 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 +10 -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 +2 -2
- package/dist/components/cat-tabs.js.map +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 +59 -54
- package/dist/esm/cat-alert_30.entry.js.map +1 -1
- package/package.json +2 -2
|
@@ -349,18 +349,18 @@ export class CatSelect {
|
|
|
349
349
|
}
|
|
350
350
|
render() {
|
|
351
351
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
352
|
-
return (h(Host, { key: '
|
|
352
|
+
return (h(Host, { key: '93b8cc474d53cf5c950a5ee2ee9b51cf5956288e' }, h("div", { key: 'ce1bc0a70b577af3926a459aa1734bbc6200b2bd', class: {
|
|
353
353
|
'select-field': true,
|
|
354
354
|
'select-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false,
|
|
355
355
|
'select-multiple': this.multiple
|
|
356
|
-
} }, h("div", { key: '
|
|
356
|
+
} }, h("div", { key: '49dd5bf7a639d1c44ccc5a35eb9efcbc362dfc71', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '9fdb7777067c530a46d920ce49eba63ec890bf57', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: 'ed19b3d78c7d9c0f610884a824cd90f4b4a7f1cb', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '39b9b19d3505885c873825b939b9f5334cadf351', name: "label" })) || this.label, h("div", { key: '8db9f030a2278e733e2186d8d386a3bc5e94702b', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '5f3196c0a8c55b6dc55031e958cd30193858500f', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '8434806d6d457a85ee342cecf75e3d8cd4453bb2', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { key: '294b26a82988b0d35e98eb75e0d64227aa92bf7f', class: "select-container" }, h("div", { key: 'bc97d26c6da84a26e90897384895ede9b2091fc0', 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) }, h("div", { key: 'e6c2dd7b1e3053501ab9c84a7c651c87bc1367c0', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
|
|
357
357
|
pill: true,
|
|
358
358
|
'select-no-open': true,
|
|
359
359
|
'select-option-active': this.state.activeSelectionIndex === i
|
|
360
|
-
}, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (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, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.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 ? (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, h("input", { key: '
|
|
360
|
+
}, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (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, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.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 ? (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, h("input", { key: '59735a765001238dddda82e9c12b9e76ba099684', "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 && h("cat-spinner", { key: 'e43f723bd8149aea563ab01453bc47aefb2d4771' }), this.invalid && (h("cat-icon", { key: '602808e09ac23bf6b1f2690c50b538c47a376a6c', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
|
|
361
361
|
!this.disabled &&
|
|
362
362
|
!this.state.isResolving &&
|
|
363
|
-
this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: i18n.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: '
|
|
363
|
+
this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: i18n.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: 'b84edc71dde76b9f65fa019d698cd91b97db2390', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? i18n.t('select.close') : i18n.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 && (h(CatFormHint, { key: 'a7d9d8e2a0a4333d9320d987c51792e9d8b13184', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: '6542000b357d4084d202af29010dd8a85dff5350', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: 'e449f1d397d1140e546b8e473b0649d9e8e2dbd7', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: 'c3c172ebe62fa6a08b1a4f7254b863efc83e8247', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
|
|
364
364
|
? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" }, h("cat-skeleton", { variant: "body", lines: 1 }), h("cat-skeleton", { variant: "body", lines: 1 }))))
|
|
365
365
|
: !this.state.options.length &&
|
|
366
366
|
!this.tags && (h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : i18n.t('select.empty')))))))));
|
|
@@ -139,7 +139,7 @@ export class CatSelectTest {
|
|
|
139
139
|
setTimeout(() => this.multipleSelect && (this.multipleSelect.value = []), 5000);
|
|
140
140
|
}
|
|
141
141
|
render() {
|
|
142
|
-
return (h(Host, { key: '
|
|
142
|
+
return (h(Host, { key: 'a67d8afd350d4dd87c98af1e1811adf9421e9758', style: { display: 'flex', flexDirection: 'column' }, class: "cat-form" }, h("cat-select", { key: '0f408fa2737fa2d8e0bae223f73cdf9c87e1b06e', label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => console.log('Multiple change', this.multipleSelect?.value), onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true, errorUpdate: false }, h("span", { key: '8ed25b6300d1078327125799241713f2af05c65d', slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select", { key: 'a470242e781811524325e7f887b6389734d1bfec', label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: '6ea9ac8aed02b9f65571441a03de45c42f0a06e9', label: "Multiple with initials", ref: el => (this.multipleSelectAvatarInitials = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: 'a2bfa381f885bd2add969045ebf3b41155200a19', label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => console.log('Multiple tagging change', this.multipleSelectTagging?.value), multiple: true, tags: true, clearable: true, errorUpdate: false }), h("cat-select", { key: '5ac14c9554ac770b5a22cf8d0fa323465a5cd748', label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true, errorUpdate: false }), h("cat-select", { key: 'ce1dd654fb032a9e7a042627f49447621dcba078', label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true, errorUpdate: false }), h("cat-select", { key: '931e2a75552354348e8a202bc4ff3ee302dfcdc0', label: "Single with initials", ref: el => (this.singleSelectAvatarInitials = el), placeholder: "Hello World", clearable: true, errorUpdate: false }), h("cat-dropdown", { key: '2a6e57f17442e18efc7cf31e29dbf108c2938467', overflow: true }, h("cat-button", { key: 'd7f34c6ee8493df2693191ad9e257a8c56731d59', slot: "trigger", style: { width: '50%' } }, "Open select"), h("div", { key: '9935750f4063e8baf6b3e0e645b52f8143234d05', slot: "content", style: { width: '400px' } }, h("cat-select", { key: '5472f568bb7826b44ed8e997b5ed1fc624d81fce', label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => console.log('Single change', this.singleSelectTagging?.value), tagHint: "new country", tags: true, clearable: true, errorUpdate: false, style: { width: '90%' } })))));
|
|
143
143
|
}
|
|
144
144
|
get countryConnector() {
|
|
145
145
|
return {
|
|
@@ -19,7 +19,7 @@ export class CatSkeleton {
|
|
|
19
19
|
this.size = 'm';
|
|
20
20
|
}
|
|
21
21
|
render() {
|
|
22
|
-
return (h(Host, { key: '
|
|
22
|
+
return (h(Host, { key: '402c7d7bcd6e39164d2f7f22755bc0ebb20aed35' }, Array.from(Array(this.count)).map(() => (h("div", { style: this.style, class: {
|
|
23
23
|
skeleton: true,
|
|
24
24
|
[`skeleton-${this.effect}`]: Boolean(this.effect),
|
|
25
25
|
[`skeleton-${this.variant}`]: Boolean(this.variant),
|
|
@@ -14,9 +14,9 @@ export class CatSpinner {
|
|
|
14
14
|
this.value = 0;
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
|
-
return (h("span", { key: '
|
|
17
|
+
return (h("span", { key: 'b5994c1a40fef1a165d628e728b1cb8cdff866ea', role: "progressbar", tabindex: "-1", "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100", class: {
|
|
18
18
|
[`spinner-${this.size}`]: this.size !== 'inline'
|
|
19
|
-
} }, h("svg", { key: '
|
|
19
|
+
} }, h("svg", { key: '0cd336a98d08ac723d34c29895847010f49245fc', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, h("circle", { key: 'c634cc4a518a6733fd5e68859e2154384ac6a1d1', cx: "24", cy: "24", r: "21.5" }))));
|
|
20
20
|
}
|
|
21
21
|
static get is() { return "cat-spinner"; }
|
|
22
22
|
static get encapsulation() { return "shadow"; }
|
|
@@ -50,7 +50,7 @@ export class CatTab {
|
|
|
50
50
|
this.catClick.emit(event);
|
|
51
51
|
}
|
|
52
52
|
render() {
|
|
53
|
-
return h(Host, { key: '
|
|
53
|
+
return h(Host, { key: '954bacd020d1405745d1118cf5b09b9e8ddc93b0' });
|
|
54
54
|
}
|
|
55
55
|
static get is() { return "cat-tab"; }
|
|
56
56
|
static get encapsulation() { return "shadow"; }
|
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
display: none;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
:host([tabs-align=center]) {
|
|
16
|
+
:host([tabs-align=center]) .cat-tab-list {
|
|
17
17
|
justify-content: center;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
:host([tabs-align=right]) {
|
|
20
|
+
:host([tabs-align=right]) .cat-tab-list {
|
|
21
21
|
justify-content: end;
|
|
22
22
|
}
|
|
23
23
|
|
|
@@ -92,7 +92,7 @@ export class CatTabs {
|
|
|
92
92
|
}
|
|
93
93
|
render() {
|
|
94
94
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
95
|
-
return (h(Host, { key: '
|
|
95
|
+
return (h(Host, { key: 'df60c82a35f848e88f75062a56ec258ba79c1891' }, h("div", { key: 'd3d003bce6f44045168e6f32db9eea9a2c5a6c27', role: "tablist", class: "cat-tab-list" }, this.tabs.map((tab, index) => {
|
|
96
96
|
return (h("cat-button", { buttonId: tab.id, part: "tab", class: {
|
|
97
97
|
'cat-tab': true,
|
|
98
98
|
'cat-tab-active': tab.id === this.activeTab,
|
|
@@ -95,7 +95,7 @@ export class CatTag {
|
|
|
95
95
|
}
|
|
96
96
|
render() {
|
|
97
97
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
98
|
-
return (h(Host, { key: '
|
|
98
|
+
return (h(Host, { key: '334f8a2d604df123adb018f31b5528040d65180c' }, h("div", { key: '0140867da437b576a9b5593601abf65634badafe', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '9c2284a03aa281bd1c5060684909afffcc3be519', htmlFor: `tags-${this.id}-input`, part: "label" }, h("span", { key: '2e8bab18e8c5b776ab7a7af2805a48f25380ca14', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '285417cf1427d6bfab28f8e79d03d7ebb4a5581a', name: "label" })) || this.label, h("div", { key: '54284d1f7c2d39b3686471a77fe81cdff5a7ba6d', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '2bbb1dd5fbf63c3a11e5072cedd0016fb52a8bbf', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'b800283d2560b788c5de2186bb0657612bf5902b', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { key: '710a3d1df041fabfc099248a10fb581dc29867e8', class: { 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid } }, this.value?.map(value => (h("div", { class: "tag-pill" }, h("span", null, value), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(value), tabIndex: -1 }))))), h("div", { key: '8201854379fedd97152173c5383eeba5a93ff43e', class: "input-inner-wrapper" }, h("input", { key: '11ca4d750d8f36560e5ff1a2a336f83a481dd3be', "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 && (h("cat-button", { key: 'af93bc6cdc41b7bfaacef19549093bf8dc85e000', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": i18n.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.invalid && h("cat-icon", { key: '5df20d3094317ed268588a1cde317243e1390855', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }))), this.hasHint && (h(CatFormHint, { key: 'c3fafb4299fc29ce029c92b34bc54df35a33ffb3', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))));
|
|
99
99
|
}
|
|
100
100
|
get hasHint() {
|
|
101
101
|
return !!this.hint || !!this.hasSlottedHint || this.invalid;
|
|
@@ -110,15 +110,15 @@ export class CatTextarea {
|
|
|
110
110
|
}
|
|
111
111
|
render() {
|
|
112
112
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
113
|
-
return (h(Host, { key: '
|
|
113
|
+
return (h(Host, { key: 'ba2d56e2d7fcb9d4af66a24d5476132e2ebefcf4' }, h("div", { key: 'e60bdc9b54fb1de1ae27f1e93caa6802180a7b4a', class: {
|
|
114
114
|
'textarea-field': true,
|
|
115
115
|
'textarea-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false
|
|
116
|
-
} }, h("div", { key: '
|
|
116
|
+
} }, h("div", { key: '3611f3a9830ed34c86c3f165f01905f4d227b0be', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '77c4783b59f3d6965f0c01328db36d5c8518c0f6', htmlFor: this.id, part: "label" }, h("span", { key: 'd0df4164caa5f19838fdb5acfa5561fc95fdb1fe', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'e958ec958b57ce4543f1178d8cfcb93b056a30d8', name: "label" })) || this.label, h("div", { key: '76f871899822b2bb400be7e88d4e08353c4edbe3', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'd14451a2e39a13a8918892cd11645208c4cdc680', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'b679e94fe20aeecc64f60bd3ecc2952b33639039', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (h("div", { key: '3dce07d25a0aeddc7b91f8f8426cd21b7bd60c7e', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), h("div", { key: '008b6ebfe6dca48aa581d249310c2dda8ba9dba1', class: "textarea-container" }, h("div", { key: 'ff921daa8769f7407e72b4519e31eb6570301b4d', class: {
|
|
117
117
|
'textarea-wrapper': true,
|
|
118
118
|
'textarea-readonly': this.readonly,
|
|
119
119
|
'textarea-disabled': this.disabled,
|
|
120
120
|
'textarea-invalid': this.invalid
|
|
121
|
-
} }, h("textarea", { key: '
|
|
121
|
+
} }, h("textarea", { key: '3ea5625a1f67ab98b4975b8f9095f33091d18455', "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 && (h("cat-icon", { key: '351dc18bfa3aaaa0d0cc5cf585b48334d0cf8cc9', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (h(CatFormHint, { key: '6e469529e9551d19f523f0fe9f23abc92855e92c', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
|
|
122
122
|
}
|
|
123
123
|
get hasHint() {
|
|
124
124
|
return !!this.hint || !!this.hasSlottedHint || this.invalid;
|
|
@@ -162,14 +162,14 @@ export class CatTime {
|
|
|
162
162
|
}
|
|
163
163
|
render() {
|
|
164
164
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
165
|
-
return (h(Host, { key: '
|
|
165
|
+
return (h(Host, { key: 'c900a10f9992512537bb54a55f380148c698bd2d' }, h("cat-input", { key: 'f6447d6a18225762b6adc85955584d4710a9ffa5', class: "cat-time-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, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, testId: this.testId, nativeAttributes: this.nativeAttributes, timeMaskOptions: this.timeMaskOptions, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, h("span", { key: '328134e94616b73309294b1dbd60d9978b1fe32b', slot: "label" }, this.hasSlottedLabel && h("slot", { key: 'c7e48d1a65631ac9f05b30e6e03706771617a9eb', name: "label" }), !this.hasSlottedLabel && this.label, h("span", { key: '59dd274d4039d8ce890b95dd6f9efdc4fc68b456', class: "label-aria" }, " (HH:mm)")), h("div", { key: '962771fb4390695dfa17eef88cde5299dff060df', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (h("cat-button", { key: 'a0fa293b5c430efb3ee873da2f8c6ee9f6e22935', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? this.localizedDayPeriods.am : this.localizedDayPeriods.pm)), h("cat-dropdown", { key: '14d7f7b5063d5f74d6f1272742badce87ed150ac', slot: "addon", placement: this.placement }, h("cat-button", { key: '1ae784a0d45b0ec92f57a1845a2c7f04097e6d3b', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), h("nav", { key: 'bfc501e88cd1941fffc3d10b8aed69d830c9bec6', slot: "content", class: "cat-nav" }, h("ul", { key: 'd65978850e0416d8de748293dcf12397b531fc54' }, this.timeArray().map(time => {
|
|
166
166
|
const isoTime = formatIso(time);
|
|
167
167
|
const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);
|
|
168
168
|
return (h("li", null, h("cat-button", { class: {
|
|
169
169
|
'cat-nav-item': true,
|
|
170
170
|
'time-disabled': disabled
|
|
171
171
|
}, disabled: disabled, active: isoTime === this.value, color: isoTime === this.value ? 'primary' : 'secondary', variant: isoTime === this.value ? 'filled' : 'outlined', onCatClick: () => this.select(time), "data-time": isoTime }, this.format(time))));
|
|
172
|
-
}))))), this.hasSlottedHint && (h("span", { key: '
|
|
172
|
+
}))))), this.hasSlottedHint && (h("span", { key: 'b34b48f7db86956f9f9211a80ba7f0afb0dba10d', slot: "hint" }, h("slot", { key: 'd170ddd7ebe8a75af7b2410771d30bcc4c23bceb', name: "hint" }))))));
|
|
173
173
|
}
|
|
174
174
|
timeArray() {
|
|
175
175
|
const result = [];
|
|
@@ -79,13 +79,13 @@ export class CatToggle {
|
|
|
79
79
|
}
|
|
80
80
|
render() {
|
|
81
81
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
82
|
-
return (h(Host, { key: '
|
|
82
|
+
return (h(Host, { key: '7285035e8798acd7e31d9f244185f66dfd1e8ff2' }, h("label", { key: 'fcfa457a536a826b113493f2851e4fb92336f191', htmlFor: this.id, class: {
|
|
83
83
|
'is-hidden': this.labelHidden,
|
|
84
84
|
'is-disabled': this.disabled,
|
|
85
85
|
'label-left': this.labelLeft,
|
|
86
86
|
'align-center': this.alignment === 'center',
|
|
87
87
|
'align-end': this.alignment === 'bottom'
|
|
88
|
-
} }, h("input", { key: '
|
|
88
|
+
} }, h("input", { key: 'db247c0b593b85237fa9f0c369d706d6fa16d7ec', "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 }), h("span", { key: 'fa4934e1d6f40378b0d2b3aa3e08c1c1444579d3', class: "toggle" }), h("span", { key: 'e4c888660de8acf4ca9c0bf093eb9546bd67e994', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'c2dbaa736eb123c5adcc9e0cda6cef89bf6fd4b8', name: "label" })) || this.label)), this.hasHint && (h("div", { key: '087543ee1d86ccc4739d8f33e5cf4de419818d43', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '424513a88e130972ec5a6b64c7eb8639691258c2', class: "toggle-placeholder" }), h(CatFormHint, { key: 'a1c87e7ce6ed636f69760dbdbb4f54688b0fce4e', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
|
|
89
89
|
}
|
|
90
90
|
get hasHint() {
|
|
91
91
|
return !!this.hint || !!this.hasSlottedHint;
|
|
@@ -73,12 +73,12 @@ export class CatTooltip {
|
|
|
73
73
|
this.hideTooltip();
|
|
74
74
|
}
|
|
75
75
|
render() {
|
|
76
|
-
return (h(Host, { key: '
|
|
76
|
+
return (h(Host, { key: '8f34e0ba58b9cf70b4764914d5f3edd36ed42c10' }, h("slot", { key: 'd053bf106d2884336c1cdeb55215bd62dbd6eae7' }), h("div", { key: '9f310741fd56f1e4441c45125010176621da0c59', ref: el => (this.tooltip = el), id: this.id, role: "tooltip", "aria-hidden": !this.open, "aria-live": this.open ? 'polite' : 'off', class: {
|
|
77
77
|
tooltip: true,
|
|
78
78
|
'tooltip-hidden': this.inactive,
|
|
79
79
|
'tooltip-round': this.round,
|
|
80
80
|
[`tooltip-${this.size}`]: Boolean(this.size)
|
|
81
|
-
} }, h("slot", { key: '
|
|
81
|
+
} }, h("slot", { key: 'c99bd5cee9a1961d39a20c2049ee43675efc4b67', name: "content" }, h("p", { key: '66051fb6e03a9292a7c829b53162d307af2a914e' }, this.content)))));
|
|
82
82
|
}
|
|
83
83
|
addListeners() {
|
|
84
84
|
this.trigger?.addEventListener('focusin', this.boundShowListener);
|
|
@@ -44,7 +44,7 @@ const CatAlert$1 = /*@__PURE__*/ proxyCustomElement(class CatAlert extends HTMLE
|
|
|
44
44
|
setAttributeDefault(this, 'role', this.mapRole.get(this.color));
|
|
45
45
|
}
|
|
46
46
|
render() {
|
|
47
|
-
return (h(Host, { key: '
|
|
47
|
+
return (h(Host, { key: 'd642ef0422878f85d53bdc1b287ce282f9459e30' }, !this.noIcon && h("cat-icon", { key: 'c42d730501e2704466f56f3a1b9f7b1e261af00c', size: "l", icon: this.icon || this.mapIcon.get(this.color) }), h("div", { key: '0e4cf734fb202e9da515753a057e95182c13c7a0', class: "content" }, h("slot", { key: 'a0161fefe3a228488be263421013882565f790e9' }))));
|
|
48
48
|
}
|
|
49
49
|
get hostElement() { return this; }
|
|
50
50
|
static get style() { return catAlertCss; }
|
|
@@ -82,7 +82,7 @@ const CatBadge$1 = /*@__PURE__*/ proxyCustomElement(class CatBadge extends HTMLE
|
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
84
|
render() {
|
|
85
|
-
return (h(Host, { key: '
|
|
85
|
+
return (h(Host, { key: 'd803d632d26891fbd4cc899a8776a54076cdf850', "data-icon-badge": this.isIconBadge ? this.size : null }, this.hasPrefixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null, this.isIconBadge ? (h("cat-icon", { icon: this.icon, size: this.iconSize, class: "icon-only" })) : (h("slot", null)), this.hasSuffixIcon ? h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null));
|
|
86
86
|
}
|
|
87
87
|
get hostElement() { return this; }
|
|
88
88
|
static get watchers() { return {
|
|
@@ -10,7 +10,7 @@ const CatButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(class CatButtonGroup e
|
|
|
10
10
|
this.buttonElements = [];
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: 'a5635200630e28f57a1a88797324379320d0a49e', role: "group", "aria-label": this.a11yLabel }, h("slot", { key: '7aae9852ae371bbf407df59a3de1db1624b4e9d1', onSlotchange: this.onSlotChange.bind(this) })));
|
|
14
14
|
}
|
|
15
15
|
onSlotChange() {
|
|
16
16
|
this.buttonElements = Array.from(this.hostElement.querySelectorAll(':scope > cat-button, :scope > cat-tooltip > cat-button, :scope > cat-dropdown cat-button[slot="trigger"]'));
|
|
@@ -10,7 +10,7 @@ const CatCard$1 = /*@__PURE__*/ proxyCustomElement(class CatCard extends HTMLEle
|
|
|
10
10
|
this.catLoad = createEvent(this, "catLoad", 7);
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return h("slot", { key: '
|
|
13
|
+
return h("slot", { key: '0dc3e0d280b58b480314bf10cea9ed7f954516be' });
|
|
14
14
|
}
|
|
15
15
|
componentDidLoad() {
|
|
16
16
|
this.catLoad.emit();
|
|
@@ -88,13 +88,13 @@ const CatCheckbox = /*@__PURE__*/ proxyCustomElement(class CatCheckbox extends H
|
|
|
88
88
|
this.input.blur();
|
|
89
89
|
}
|
|
90
90
|
render() {
|
|
91
|
-
return (h(Host, { key: '
|
|
91
|
+
return (h(Host, { key: '64f3d1f023c2e8ec2d3c0a23b1f1f0c19241f41f' }, h("label", { key: 'e54c1e60a1d3aa0ce78d218b036b87d04e1a1842', htmlFor: this.id, class: {
|
|
92
92
|
'is-hidden': this.labelHidden,
|
|
93
93
|
'is-disabled': this.disabled,
|
|
94
94
|
'label-left': this.labelLeft,
|
|
95
95
|
'align-center': this.alignment === 'center',
|
|
96
96
|
'align-end': this.alignment === 'bottom'
|
|
97
|
-
} }, h("input", { key: '
|
|
97
|
+
} }, h("input", { key: 'd28a1d799457139337ba0c782d913ade4e74fb07', "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 }), h("span", { key: '96d80b03df081c19d36ca9d2d56b1542637855bd', class: "box", "aria-hidden": "true" }, h("svg", { key: '268e26a8db34695467583106349ceed890168e1c', class: "check", viewBox: "0 0 12 10" }, h("polyline", { key: 'ed1ba34e9839d1e80806ca52e94f4e7a3c6b720b', points: "1.5 6 4.5 9 10.5 1" })), h("svg", { key: '21eef5470b82b17868a4a591dacce708d04fb048', class: "dash", viewBox: "0 0 12 10" }, h("polyline", { key: '35d61e299c39c578069e05bb4f5982b33de8ac57', points: "1.5 5 10.5 5" }))), h("span", { key: 'b78cc985ede85e0174ab7d6fd851e9bc9348fdaf', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && h("slot", { key: 'bcdb0ed764451d3c7c11c00b68db3b48564bc73d', name: "label" })) || this.label, h("span", { key: '0ed579dadbdb3b4c92af29b670528ca253c49f37', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '03e1b787954ba280b670b86c2cfeda5a3635bed7', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '6264f8d9517ca500c36dc75bbda936a407c5429c', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (h("div", { key: 'e149380c00369d71c02da2dabd78447c515c52d3', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '86e662bf29c81eaf8db818500cb3aebc98fe939b', class: "box-placeholder" }), h(CatFormHint, { key: '3de67315be28edc3357bad66bcf0f1cdb64ee518', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
|
|
98
98
|
}
|
|
99
99
|
get hasHint() {
|
|
100
100
|
return !!this.hint || !!this.hasSlottedHint;
|
|
@@ -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
|
} }));
|