@haiilo/catalyst 10.15.2 → 10.16.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-45d9f803.entry.js → p-00b27672.entry.js} +4 -4
- package/dist/catalyst/p-00b27672.entry.js.map +1 -0
- package/dist/cjs/cat-alert_29.cjs.entry.js +7 -6
- package/dist/cjs/cat-alert_29.cjs.entry.js.map +1 -1
- package/dist/collection/components/cat-date-inline/cat-date-inline.css +1 -0
- package/dist/collection/components/cat-date-inline/cat-date-inline.js +6 -5
- package/dist/collection/components/cat-date-inline/cat-date-inline.js.map +1 -1
- package/dist/components/cat-date-inline2.js +7 -6
- package/dist/components/cat-date-inline2.js.map +1 -1
- package/dist/esm/cat-alert_29.entry.js +7 -6
- package/dist/esm/cat-alert_29.entry.js.map +1 -1
- package/package.json +2 -2
- package/dist/catalyst/p-45d9f803.entry.js.map +0 -1
|
@@ -2186,7 +2186,7 @@ const firstTabbable = (container) => {
|
|
|
2186
2186
|
return (container ? tabbable(container, { includeContainer: true, getShadowRoot: true }) : []).shift();
|
|
2187
2187
|
};
|
|
2188
2188
|
|
|
2189
|
-
const catDateInlineCss = "/**\n * Auto-generated file. Do not edit directly.\n */\n/* stylelint-disable value-keyword-case */\n/* stylelint-enable value-keyword-case */\n.label {\n overflow: hidden;\n word-wrap: break-word;\n word-break: break-word;\n}\n\n.input-field:not(.input-horizontal) .label-container.hidden,\n.textarea-field:not(.textarea-horizontal) .label-container.hidden,\n.select-field:not(.select-horizontal) .label-container.hidden {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n\n.label-container {\n flex-basis: var(--label-size, 33.33%);\n}\n.label-container .label-wrapper {\n display: flex;\n gap: 0.25rem;\n}\n\n.label-metadata {\n display: flex;\n flex-shrink: 0;\n flex-grow: 1;\n justify-content: space-between;\n gap: 0.25rem;\n color: rgb(var(--cat-font-color-muted, 81, 92, 108));\n}\n\n.label-optional,\n.label-character-count {\n display: inline-flex;\n align-items: center;\n max-height: 1.25rem;\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.label-character-count {\n margin-left: auto;\n}\n\n.input-horizontal .label-container.hidden label,\n.textarea-horizontal .label-container.hidden label,\n.select-horizontal .label-container.hidden label {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n.input-horizontal .label-wrapper,\n.textarea-horizontal .label-wrapper,\n.select-horizontal .label-wrapper {\n flex-direction: column;\n}\n.input-horizontal label,\n.textarea-horizontal label,\n.select-horizontal label {\n min-height: 2.5rem;\n display: inline-flex;\n align-items: center;\n}\n.input-horizontal .label-metadata,\n.textarea-horizontal .label-metadata,\n.select-horizontal .label-metadata {\n justify-content: flex-start;\n}\n.input-horizontal .label-metadata .label-character-count,\n.textarea-horizontal .label-metadata .label-character-count,\n.select-horizontal .label-metadata .label-character-count {\n margin-left: 0;\n}\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.label-container:empty {\n display: none;\n}\n\n.picker {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.picker-head {\n display: flex;\n align-items: center;\n container-type: inline-size;\n}\n.picker-head > :not(:last-child) {\n margin-right: 0.25rem;\n}\n.picker-head h3 {\n font-size: 0.9375rem;\n line-height: 1.25rem;\n font-weight: var(--cat-font-weight-head, 600);\n font-feature-settings: \"pnum\";\n flex: 1;\n text-align: center;\n margin-block: 0;\n}\n@container (min-width: 20rem) {\n .picker-head h3 {\n font-size: 1.125rem;\n line-height: 1.5rem;\n font-weight: var(--cat-font-weight-head, 600);\n font-feature-settings: \"pnum\";\n }\n .picker-head > :not(:last-child) {\n margin-right: 0.5rem;\n }\n}\n\n.picker-grid {\n display: grid;\n /* stylelint-disable declaration-block-no-redundant-longhand-properties */\n grid-template-rows: 2rem repeat(6, 1fr);\n grid-template-columns: repeat(7, 1fr);\n grid-template-areas: \"h h h h h h h\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\";\n /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n}\n.picker-weeks .picker-grid {\n /* stylelint-disable declaration-block-no-redundant-longhand-properties */\n grid-template-columns: 2rem repeat(7, 1fr);\n grid-template-areas: \". h h h h h h h\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\";\n /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n}\n\n.picker-grid-head {\n grid-area: h;\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n place-items: end center;\n padding-bottom: 0.5rem;\n}\n\n.picker-grid-weeks {\n grid-area: w;\n display: grid;\n grid-template-rows: repeat(6, 1fr);\n place-items: center right;\n padding-right: 0.5rem;\n}\n\n.picker-grid-days {\n grid-area: d;\n display: grid;\n grid-template-rows: repeat(6, 1fr);\n grid-template-columns: repeat(7, 1fr);\n}\n\n.picker-grid-head > *,\n.picker-grid-weeks > * {\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: 600;\n color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;\n text-decoration: none;\n}\n\n.date-other {\n opacity: 0.5;\n}\n\n.date-disabled {\n opacity: 0.25;\n}\n\n.picker-foot {\n display: flex;\n align-items: center;\n width: min-content;\n min-width: 100%;\n justify-content: space-between;\n container-type: inline-size;\n}\n.picker-foot > :not(:last-child) {\n margin-right: 0.25rem;\n}\n@container (min-width: 20rem) {\n .picker-foot > :not(:last-child) {\n margin-right: 0.5rem;\n }\n .picker-foot .cursor-help {\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: var(--cat-font-weight-body, 400);\n }\n}\n\n.cursor-help {\n margin-block: 0;\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: var(--cat-font-weight-body, 400);\n color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;\n text-align: center;\n flex: 1;\n}\n.cursor-help:first-child {\n text-align: left;\n}\n.cursor-help:last-child {\n text-align: right;\n}\n.cursor-help:only-child {\n text-align: center;\n}\n\n.cursor-aria {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n\n.date-range {\n --cat-border-radius-m: 0;\n}";
|
|
2189
|
+
const catDateInlineCss = "/**\n * Auto-generated file. Do not edit directly.\n */\n/* stylelint-disable value-keyword-case */\n/* stylelint-enable value-keyword-case */\n.label {\n overflow: hidden;\n word-wrap: break-word;\n word-break: break-word;\n}\n\n.input-field:not(.input-horizontal) .label-container.hidden,\n.textarea-field:not(.textarea-horizontal) .label-container.hidden,\n.select-field:not(.select-horizontal) .label-container.hidden {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n\n.label-container {\n flex-basis: var(--label-size, 33.33%);\n}\n.label-container .label-wrapper {\n display: flex;\n gap: 0.25rem;\n}\n\n.label-metadata {\n display: flex;\n flex-shrink: 0;\n flex-grow: 1;\n justify-content: space-between;\n gap: 0.25rem;\n color: rgb(var(--cat-font-color-muted, 81, 92, 108));\n}\n\n.label-optional,\n.label-character-count {\n display: inline-flex;\n align-items: center;\n max-height: 1.25rem;\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.label-character-count {\n margin-left: auto;\n}\n\n.input-horizontal .label-container.hidden label,\n.textarea-horizontal .label-container.hidden label,\n.select-horizontal .label-container.hidden label {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n.input-horizontal .label-wrapper,\n.textarea-horizontal .label-wrapper,\n.select-horizontal .label-wrapper {\n flex-direction: column;\n}\n.input-horizontal label,\n.textarea-horizontal label,\n.select-horizontal label {\n min-height: 2.5rem;\n display: inline-flex;\n align-items: center;\n}\n.input-horizontal .label-metadata,\n.textarea-horizontal .label-metadata,\n.select-horizontal .label-metadata {\n justify-content: flex-start;\n}\n.input-horizontal .label-metadata .label-character-count,\n.textarea-horizontal .label-metadata .label-character-count,\n.select-horizontal .label-metadata .label-character-count {\n margin-left: 0;\n}\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.label-hidden,\n.label-container:empty {\n display: none;\n}\n\n.picker {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.picker-head {\n display: flex;\n align-items: center;\n container-type: inline-size;\n}\n.picker-head > :not(:last-child) {\n margin-right: 0.25rem;\n}\n.picker-head h3 {\n font-size: 0.9375rem;\n line-height: 1.25rem;\n font-weight: var(--cat-font-weight-head, 600);\n font-feature-settings: \"pnum\";\n flex: 1;\n text-align: center;\n margin-block: 0;\n}\n@container (min-width: 20rem) {\n .picker-head h3 {\n font-size: 1.125rem;\n line-height: 1.5rem;\n font-weight: var(--cat-font-weight-head, 600);\n font-feature-settings: \"pnum\";\n }\n .picker-head > :not(:last-child) {\n margin-right: 0.5rem;\n }\n}\n\n.picker-grid {\n display: grid;\n /* stylelint-disable declaration-block-no-redundant-longhand-properties */\n grid-template-rows: 2rem repeat(6, 1fr);\n grid-template-columns: repeat(7, 1fr);\n grid-template-areas: \"h h h h h h h\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\";\n /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n}\n.picker-weeks .picker-grid {\n /* stylelint-disable declaration-block-no-redundant-longhand-properties */\n grid-template-columns: 2rem repeat(7, 1fr);\n grid-template-areas: \". h h h h h h h\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\";\n /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n}\n\n.picker-grid-head {\n grid-area: h;\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n place-items: end center;\n padding-bottom: 0.5rem;\n}\n\n.picker-grid-weeks {\n grid-area: w;\n display: grid;\n grid-template-rows: repeat(6, 1fr);\n place-items: center right;\n padding-right: 0.5rem;\n}\n\n.picker-grid-days {\n grid-area: d;\n display: grid;\n grid-template-rows: repeat(6, 1fr);\n grid-template-columns: repeat(7, 1fr);\n}\n\n.picker-grid-head > *,\n.picker-grid-weeks > * {\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: 600;\n color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;\n text-decoration: none;\n}\n\n.date-other {\n opacity: 0.5;\n}\n\n.date-disabled {\n opacity: 0.25;\n}\n\n.picker-foot {\n display: flex;\n align-items: center;\n width: min-content;\n min-width: 100%;\n justify-content: space-between;\n container-type: inline-size;\n}\n.picker-foot > :not(:last-child) {\n margin-right: 0.25rem;\n}\n@container (min-width: 20rem) {\n .picker-foot > :not(:last-child) {\n margin-right: 0.5rem;\n }\n .picker-foot .cursor-help {\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: var(--cat-font-weight-body, 400);\n }\n}\n\n.cursor-help {\n margin-block: 0;\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: var(--cat-font-weight-body, 400);\n color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;\n text-align: center;\n flex: 1;\n}\n.cursor-help:first-child {\n text-align: left;\n}\n.cursor-help:last-child {\n text-align: right;\n}\n.cursor-help:only-child {\n text-align: center;\n}\n\n.cursor-aria {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n\n.date-range {\n --cat-border-radius-m: 0;\n}";
|
|
2190
2190
|
const CatDateInlineStyle0 = catDateInlineCss;
|
|
2191
2191
|
|
|
2192
2192
|
let nextUniqueId$8 = 0;
|
|
@@ -2234,6 +2234,7 @@ const CatDateInline = class {
|
|
|
2234
2234
|
else if (startDate) {
|
|
2235
2235
|
this.focus(startDate, false);
|
|
2236
2236
|
}
|
|
2237
|
+
this.hostElement.addEventListener('focusin', () => this.setAriaLive(this.a11yLabel));
|
|
2237
2238
|
}
|
|
2238
2239
|
componentWillRender() {
|
|
2239
2240
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
@@ -2336,12 +2337,12 @@ const CatDateInline = class {
|
|
|
2336
2337
|
const [minDate, maxDate] = this.getMinMaxDate();
|
|
2337
2338
|
const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
|
|
2338
2339
|
const [dateStart, dateEnd] = this.getValue();
|
|
2339
|
-
return (index.h(index.Host, { key: '
|
|
2340
|
+
return (index.h(index.Host, { key: 'e2e9aa2e0bc5d50ce5c1d6f6da33a32f1737ef78', "aria-label": this.label || undefined }, index.h("div", { key: '2e7cc2ebb54e285290777f39caec8a6918a736ee', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '9d12dd2cb55b4039856733420fc7c882e881d6fe', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, index.h("span", { key: '92e4fd06cb118224cea23d67d453c9a4ddda14d4', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'd57b13447265fc181f9fc61d199788a601b734df', name: "label" })) || this.label, index.h("div", { key: '3dd4de9b7b63f35f22559e511c66d6b9ae4bd03f', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '17fe366d100382c2c06040ea0577858e52b9c8bc', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '69eea3e662a0299510d46419572942d00d9953d0', class: "label-optional", "aria-hidden": "true" }, "(", of.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: 'f8c0f81fbcf1de5b8b29dc4553a9ef7d9a8a0a33', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, index.h("div", { key: '21a91015790a36e5adbc30900b9b0569417e6dac', class: "picker-head" }, index.h("cat-button", { key: '42a77937b5fbd389ac213c8ae7d4569783c2f276', icon: "$cat:datepicker-year-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevYear, disabled: isSameYear(this.viewDate, minDate), onClick: () => this.navigate('prev', 'year'), "data-dropdown-no-close": true }), index.h("cat-button", { key: '9899167030554272d5cb2c09fb11600fc0176129', icon: "$cat:datepicker-month-prev", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.prevMonth, disabled: isSameMonth(this.viewDate, minDate), onClick: () => this.navigate('prev', 'month'), "data-dropdown-no-close": true }), index.h("h3", { key: '7fa8b7cbbd8f03f2a1174d2b5e4ce41bb16cc43e' }, this.getHeadline()), index.h("cat-button", { key: 'ac761d54a1b9d65d59f0e51b35c18b6d4492fbcf', icon: "$cat:datepicker-month-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextMonth, disabled: isSameMonth(this.viewDate, maxDate), onClick: () => this.navigate('next', 'month'), "data-dropdown-no-close": true }), index.h("cat-button", { key: '5dd1c76fa99cd010d7afbd18b32a530eac67b4cc', icon: "$cat:datepicker-year-next", iconOnly: true, size: "xs", variant: "text", "a11y-label": this.locale.nextYear, disabled: isSameYear(this.viewDate, maxDate), onClick: () => this.navigate('next', 'year'), "data-dropdown-no-close": true })), index.h("div", { key: '377376e3636917c824e99fdf02d70f603bdf7a25', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, index.h("div", { key: '6d8865b35fe48e518916dfc4b1dce361730cea8a', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
|
|
2340
2341
|
const day = (i + this.locale.weekInfo.firstDay) % 7;
|
|
2341
2342
|
return index.h("abbr", { title: this.locale.days.long[day] }, this.locale.days.short[day]);
|
|
2342
|
-
})), this.weeks && (index.h("div", { key: '
|
|
2343
|
+
})), this.weeks && (index.h("div", { key: 'bc144213ad6d2e2436bb531772cc9c8ab5ae1b32', class: "picker-grid-weeks" }, dateGrid
|
|
2343
2344
|
.filter((_, i) => i % 7 === 0)
|
|
2344
|
-
.map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: '
|
|
2345
|
+
.map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: 'e9c27f2e1d02cdd0d4ad39bda42637a05e67598f', class: "picker-grid-days" }, dateGrid.map(day => {
|
|
2345
2346
|
const isStartDate = isSameDay(dateStart, day);
|
|
2346
2347
|
const isEndDate = isSameDay(dateEnd, day);
|
|
2347
2348
|
const isRange = !!dateStart && !!dateEnd && day > dateStart && day < dateEnd;
|
|
@@ -2358,7 +2359,7 @@ const CatDateInline = class {
|
|
|
2358
2359
|
'date-focusable': this.canFocus(day),
|
|
2359
2360
|
'date-disabled': !this.canClick(day)
|
|
2360
2361
|
}, 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()));
|
|
2361
|
-
}))), index.h("div", { key: '
|
|
2362
|
+
}))), index.h("div", { key: '3a6e1074c86692f2ff8563c4fe7ba05e9b3220d4', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (index.h("cat-button", { key: 'eec6a8fd4a0397157ef32b78b631b96c56e11989', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && index.h("p", { key: '2d315978114c2e9d4c8ba25d542c1ca4dd3797f7', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (index.h("cat-button", { key: '5a764b18fbc2748e94cd42051937aa8806fc49f0', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), index.h("p", { key: 'df2fed119bd9a3498fa9ff8932cd3c2674a33e92', class: "cursor-aria", "aria-live": "polite" })));
|
|
2362
2363
|
}
|
|
2363
2364
|
focus(date, focus = true) {
|
|
2364
2365
|
const [minDate, maxDate] = this.getMinMaxDate();
|
|
@@ -2384,7 +2385,7 @@ const CatDateInline = class {
|
|
|
2384
2385
|
}
|
|
2385
2386
|
setAriaLive(text) {
|
|
2386
2387
|
const node = this.hostElement.shadowRoot?.querySelector('.cursor-aria');
|
|
2387
|
-
if (node) {
|
|
2388
|
+
if (node && text) {
|
|
2388
2389
|
node.innerHTML = text;
|
|
2389
2390
|
}
|
|
2390
2391
|
}
|