@haiilo/catalyst 14.5.0 → 14.5.2
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-0fec1fc5.entry.js +10 -0
- package/dist/catalyst/p-0fec1fc5.entry.js.map +1 -0
- package/dist/cjs/cat-alert_32.cjs.entry.js +123 -91
- package/dist/cjs/catalyst.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +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/cat-button.css +11 -7
- package/dist/collection/components/cat-button/cat-button.js +1 -26
- package/dist/collection/components/cat-button/cat-button.js.map +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 +43 -23
- package/dist/collection/components/cat-dropdown/cat-dropdown.js.map +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-menu/cat-menu.js +5 -4
- package/dist/collection/components/cat-menu/cat-menu.js.map +1 -1
- package/dist/collection/components/cat-menu-item/cat-menu-item.js +37 -4
- package/dist/collection/components/cat-menu-item/cat-menu-item.js.map +1 -1
- 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-button2.js +2 -8
- package/dist/components/cat-button2.js.map +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 +42 -13
- package/dist/components/cat-dropdown2.js.map +1 -1
- package/dist/components/cat-form-group.js +1 -1
- package/dist/components/cat-icon2.js +1 -1
- package/dist/components/cat-menu-item2.js +10 -5
- package/dist/components/cat-menu-item2.js.map +1 -1
- package/dist/components/cat-menu2.js +5 -5
- package/dist/components/cat-menu2.js.map +1 -1
- package/dist/components/floating-ui.dom.js +49 -45
- package/dist/components/floating-ui.dom.js.map +1 -1
- package/dist/esm/cat-alert_32.entry.js +123 -91
- package/dist/esm/catalyst.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cat-button/cat-button.d.ts +0 -4
- package/dist/types/components/cat-dropdown/cat-dropdown.d.ts +12 -2
- package/dist/types/components/cat-menu-item/cat-menu-item.d.ts +3 -1
- package/dist/types/components.d.ts +10 -14
- package/package.json +2 -4
- package/dist/catalyst/p-fb92a2f1.entry.js +0 -10
- package/dist/catalyst/p-fb92a2f1.entry.js.map +0 -1
|
@@ -42,7 +42,7 @@ const CatAlert = class {
|
|
|
42
42
|
setAttributeDefault(this, 'role', this.mapRole.get(this.color));
|
|
43
43
|
}
|
|
44
44
|
render() {
|
|
45
|
-
return (h(Host, { key: '
|
|
45
|
+
return (h(Host, { key: '02844ee6d6dc5d365bee542ee873280b2b7040fc' }, !this.noIcon && h("cat-icon", { key: 'e3497771224d89279b9d4d1f4d83014066504ede', size: "l", icon: this.icon || this.mapIcon.get(this.color) }), h("div", { key: '219d03b29ec237228366c2df596c148429685483', class: "content" }, h("slot", { key: '13a11b580fe9a6ac0707e49120809e97e3b05cd5' }))));
|
|
46
46
|
}
|
|
47
47
|
get hostElement() { return getElement(this); }
|
|
48
48
|
};
|
|
@@ -323,7 +323,7 @@ const CatBadge = class {
|
|
|
323
323
|
}
|
|
324
324
|
}
|
|
325
325
|
render() {
|
|
326
|
-
return (h(Host, { key: '
|
|
326
|
+
return (h(Host, { key: '5c22fb2216adbb84af5bbcbc1cdc97a4fc2e7f2a', "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));
|
|
327
327
|
}
|
|
328
328
|
get hostElement() { return getElement(this); }
|
|
329
329
|
static get watchers() { return {
|
|
@@ -345,7 +345,7 @@ function findClosest(selector, element) {
|
|
|
345
345
|
return nextElement ? findClosest(selector, nextElement) : null;
|
|
346
346
|
}
|
|
347
347
|
|
|
348
|
-
const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}:host([data-button-group=middle]),:host([data-button-group=last]){margin-left:-1px}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button.cat-button-inline{display:inline;padding:0}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-empty .cat-button-content{display:none}.cat-button-inline .cat-button-content{display:inline}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-group-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-button-group-middle{border-radius:0}.cat-button-group-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-button-group:hover{z-index:1}.cat-button-group:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px color-mix(in srgb, rgb(var(--base)) 20%, #fff);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-text{background-color:transparent;color:rgb(var(--text))}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-link{background-color:transparent;color:rgb(var(--text));text-decoration:var(--cat-link-button-decoration, none);text-underline-offset:2px;text-decoration-thickness:1px}.cat-button-link.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-link:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, underline)}.cat-button-primary{--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 99, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 99, 113)}.cat-button-secondary{--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-hover, 105, 118, 135);--fill:var(--cat-secondary-fill-hover, 255, 255, 255);--text:var(--cat-secondary-text-hover, 0, 0, 0)}.cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-secondary-text-active, 0, 0, 0)}.cat-button-info{--bg:var(--cat-info-bg, 0, 115, 230);--fill:var(--cat-info-fill, 255, 255, 255);--text:var(--cat-info-text, 0, 115, 230);--base:var(--cat-info-text, 0, 115, 230)}.cat-button-info:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-hover, 0, 107, 227);--fill:var(--cat-info-fill-hover, 255, 255, 255);--text:var(--cat-info-text-hover, 0, 107, 227)}.cat-button-info.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-info:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-active, 0, 96, 223);--fill:var(--cat-info-fill-active, 255, 255, 255);--text:var(--cat-info-text-active, 0, 96, 223)}.cat-button-success{--bg:var(--cat-success-bg, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 117, 78);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 117, 78)}.cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 105, 70);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 105, 70)}.cat-button-warning{--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0);--base:var(--cat-warning-text, 159, 97, 0)}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-hover, 255, 214, 148);--fill:var(--cat-warning-fill-hover, 0, 0, 0);--text:var(--cat-warning-text-hover, 159, 97, 0)}.cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-active, 255, 222, 168);--fill:var(--cat-warning-fill-active, 0, 0, 0);--text:var(--cat-warning-text-active, 159, 97, 0)}.cat-button-danger{--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13);--base:var(--cat-danger-text, 217, 52, 13)}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-hover, 194, 46, 11);--fill:var(--cat-danger-fill-hover, 255, 255, 255);--text:var(--cat-danger-text-hover, 194, 46, 11)}.cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-danger-text-active, 174, 42, 10)}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.1875rem 0.25rem;font-size:0.875rem;line-height:1.125rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;height:1.5rem;padding:0}:host(.cat-button-pull[size=xs]){margin:-0.1875rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.1875rem;margin-bottom:-0.1875rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.1875rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.1875rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;height:2rem;padding:0}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;height:2.5rem;padding:0}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;gap:0.5rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;height:3rem;padding:0}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;gap:0.75rem}.cat-button-xl.cat-button-icon{width:3.5rem;height:3.5rem;padding:0}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}:host(.cat-tab)::part(button),:host(.cat-tab-more-button)::part(button){padding:1.125rem 0.75rem;--cat-secondary-bg:transparent;--cat-primary-text:transparent;--cat-danger-text:transparent}:host(.cat-tab)::part(content)::before,:host(.cat-tab-more-button)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left;text-align:left}:host(.cat-text-right) .cat-button{justify-content:right;text-align:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-time-format) .cat-button{border-radius:0}:host(.cat-date-toggle) .cat-button,:host(.cat-time-toggle) .cat-button{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-date-item) .cat-button:hover,:host(.cat-date-toggle) .cat-button:hover,:host(.cat-time-format) .cat-button:hover,:host(.cat-time-toggle) .cat-button:hover{z-index:1}:host(.cat-date-item) .cat-button:focus-visible,:host(.cat-date-toggle) .cat-button:focus-visible,:host(.cat-time-format) .cat-button:focus-visible,:host(.cat-time-toggle) .cat-button:focus-visible{z-index:2}:host(.cat-date-item) .cat-button{padding:0;min-width:2rem;max-height:3rem;aspect-ratio:1}:host(.date-start:not(.date-end)) .cat-button{border-top-right-radius:0;border-bottom-right-radius:0}:host(.date-end:not(.date-start)) .cat-button{border-top-left-radius:0;border-bottom-left-radius:0}";
|
|
348
|
+
const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}:host([data-button-group=middle]),:host([data-button-group=last]){margin-left:-1px}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-empty .cat-button-content{display:none}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-group-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-button-group-middle{border-radius:0}.cat-button-group-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-button-group:hover{z-index:1}.cat-button-group:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px color-mix(in srgb, rgb(var(--base)) 20%, #fff);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:color-mix(in srgb, rgb(var(--base)) 10%, #fff)}.cat-button-text{background-color:transparent;color:rgb(var(--text))}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-link{background-color:transparent;color:rgb(var(--text));text-decoration:var(--cat-link-button-decoration, none);text-underline-offset:2px;text-decoration-thickness:1px}.cat-button-link.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-link:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-button-decoration-hover, underline)}.cat-button-primary{--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 99, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 99, 113)}.cat-button-secondary{--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-hover, 105, 118, 135);--fill:var(--cat-secondary-fill-hover, 255, 255, 255);--text:var(--cat-secondary-text-hover, 0, 0, 0)}.cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-secondary-text-active, 0, 0, 0)}.cat-button-info{--bg:var(--cat-info-bg, 0, 115, 230);--fill:var(--cat-info-fill, 255, 255, 255);--text:var(--cat-info-text, 0, 115, 230);--base:var(--cat-info-text, 0, 115, 230)}.cat-button-info:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-hover, 0, 107, 227);--fill:var(--cat-info-fill-hover, 255, 255, 255);--text:var(--cat-info-text-hover, 0, 107, 227)}.cat-button-info.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-info:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-active, 0, 96, 223);--fill:var(--cat-info-fill-active, 255, 255, 255);--text:var(--cat-info-text-active, 0, 96, 223)}.cat-button-success{--bg:var(--cat-success-bg, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 117, 78);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 117, 78)}.cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 105, 70);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 105, 70)}.cat-button-warning{--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0);--base:var(--cat-warning-text, 159, 97, 0)}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-hover, 255, 214, 148);--fill:var(--cat-warning-fill-hover, 0, 0, 0);--text:var(--cat-warning-text-hover, 159, 97, 0)}.cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-active, 255, 222, 168);--fill:var(--cat-warning-fill-active, 0, 0, 0);--text:var(--cat-warning-text-active, 159, 97, 0)}.cat-button-danger{--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13);--base:var(--cat-danger-text, 217, 52, 13)}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-hover, 194, 46, 11);--fill:var(--cat-danger-fill-hover, 255, 255, 255);--text:var(--cat-danger-text-hover, 194, 46, 11)}.cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-danger-text-active, 174, 42, 10)}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.1875rem 0.25rem;font-size:0.875rem;line-height:1.125rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;height:1.5rem;padding:0}:host(.cat-button-pull[size=xs]){margin:-0.1875rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.1875rem;margin-bottom:-0.1875rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.1875rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.1875rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;height:2rem;padding:0}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;height:2.5rem;padding:0}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;gap:0.5rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;height:3rem;padding:0}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;gap:0.75rem}.cat-button-xl.cat-button-icon{width:3.5rem;height:3.5rem;padding:0}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}:host(.cat-tab)::part(button),:host(.cat-tab-more-button)::part(button){padding:1.125rem 0.75rem;--cat-secondary-bg:transparent;--cat-primary-text:transparent;--cat-danger-text:transparent}:host(.cat-tab)::part(content)::before,:host(.cat-tab-more-button)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left;text-align:left}:host(.cat-text-right) .cat-button{justify-content:right;text-align:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-time-format) .cat-button{border-radius:0}:host(.cat-date-toggle) .cat-button,:host(.cat-time-toggle) .cat-button{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-date-item) .cat-button:hover,:host(.cat-date-toggle) .cat-button:hover,:host(.cat-time-format) .cat-button:hover,:host(.cat-time-toggle) .cat-button:hover{z-index:1}:host(.cat-date-item) .cat-button:focus-visible,:host(.cat-date-toggle) .cat-button:focus-visible,:host(.cat-time-format) .cat-button:focus-visible,:host(.cat-time-toggle) .cat-button:focus-visible{z-index:2}:host(.cat-date-item) .cat-button{padding:0;min-width:2rem;max-height:3rem;aspect-ratio:1}:host(.date-start:not(.date-end)) .cat-button{border-top-right-radius:0;border-bottom-right-radius:0}:host(.date-end:not(.date-start)) .cat-button{border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-inline){display:inline}:host(.cat-inline) .cat-button{display:inline;padding:0}:host(.cat-inline) .cat-button-content{display:inline}";
|
|
349
349
|
|
|
350
350
|
const CatButton = class {
|
|
351
351
|
constructor(hostRef) {
|
|
@@ -394,10 +394,6 @@ const CatButton = class {
|
|
|
394
394
|
* Use round button edges.
|
|
395
395
|
*/
|
|
396
396
|
this.round = false;
|
|
397
|
-
/**
|
|
398
|
-
* Link behaves as an inline element.
|
|
399
|
-
*/
|
|
400
|
-
this.inline = false;
|
|
401
397
|
/**
|
|
402
398
|
* Hide the actual button content and only display the icon.
|
|
403
399
|
*/
|
|
@@ -477,8 +473,7 @@ const CatButton = class {
|
|
|
477
473
|
'cat-button-round': this.round,
|
|
478
474
|
'cat-button-loading': this.loading,
|
|
479
475
|
'cat-button-disabled': this.disabled,
|
|
480
|
-
'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton
|
|
481
|
-
'cat-button-inline': this.inline,
|
|
476
|
+
'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
|
|
482
477
|
[`cat-button-${this.variant}`]: Boolean(this.variant),
|
|
483
478
|
[`cat-button-${this.color}`]: Boolean(this.color),
|
|
484
479
|
[`cat-button-${this.size}`]: Boolean(this.size),
|
|
@@ -560,7 +555,7 @@ const CatButtonGroup = class {
|
|
|
560
555
|
this.buttonElements = [];
|
|
561
556
|
}
|
|
562
557
|
render() {
|
|
563
|
-
return (h(Host, { key: '
|
|
558
|
+
return (h(Host, { key: 'a34efc8e64ae1322adc48696bf2c04cc2d1e429c', role: "group", "aria-label": this.a11yLabel }, h("slot", { key: '9149f38be769cef00801abacbb03dd0c95850f12', onSlotchange: this.onSlotChange.bind(this) })));
|
|
564
559
|
}
|
|
565
560
|
onSlotChange() {
|
|
566
561
|
this.buttonElements = Array.from(this.hostElement.querySelectorAll(':scope > cat-button, :scope > cat-tooltip > cat-button, :scope > cat-dropdown cat-button[slot="trigger"]'));
|
|
@@ -581,7 +576,7 @@ const CatCard = class {
|
|
|
581
576
|
this.catLoad = createEvent(this, "catLoad");
|
|
582
577
|
}
|
|
583
578
|
render() {
|
|
584
|
-
return h("slot", { key: '
|
|
579
|
+
return h("slot", { key: '2ddd44a7ce4d8c664f1161710a7a65461c37875f' });
|
|
585
580
|
}
|
|
586
581
|
componentDidLoad() {
|
|
587
582
|
this.catLoad.emit();
|
|
@@ -697,13 +692,13 @@ const CatCheckbox = class {
|
|
|
697
692
|
this.input.blur();
|
|
698
693
|
}
|
|
699
694
|
render() {
|
|
700
|
-
return (h(Host, { key: '
|
|
695
|
+
return (h(Host, { key: '3b747366d141c2e3c678f33841eca2983b9161c9' }, h("label", { key: '2ee8575df8a269ef821a980add768a668d3e208b', htmlFor: this.id, class: {
|
|
701
696
|
'is-hidden': this.labelHidden,
|
|
702
697
|
'is-disabled': this.disabled,
|
|
703
698
|
'label-left': this.labelLeft,
|
|
704
699
|
'align-center': this.alignment === 'center',
|
|
705
700
|
'align-end': this.alignment === 'bottom'
|
|
706
|
-
} }, h("input", { key: '
|
|
701
|
+
} }, h("input", { key: 'aad1de3b8d7dd4eeb0e72166ba1decd79bd25f18', "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: '387095d0a3fdb1820fdc7d3111c9475792865255', class: "box", "aria-hidden": "true" }, h("svg", { key: '94bc42f4729c8ac50d786029d1a2b4446371b1dd', class: "check", viewBox: "0 0 12 10" }, h("polyline", { key: 'b6c0c742108523bafa656aad76fde132748f673d', points: "1.5 6 4.5 9 10.5 1" })), h("svg", { key: '51d990d4002736670ea32bf9ee10f90918ea6856', class: "dash", viewBox: "0 0 12 10" }, h("polyline", { key: '882eb8cf57188490f0b57a052908c52780c708a3', points: "1.5 5 10.5 5" }))), h("span", { key: '36df32838873f91f1b86ed93f5f20e6f7fba8e83', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && h("slot", { key: '568163747405bb172ac389293d1e02eb586d2afe', name: "label" })) || this.label, h("span", { key: '1a95817d8a270fcfba8cdbd20832142358cf793c', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '59b897e56020aedf0dc7f5d847b16cb4059505d5', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '3482694fe72455fb0e0d96d7760cdd01044cb45c', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (h("div", { key: 'f4d2064c5e48dc7131838e62baa941899fa7e3fc', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { key: '1909aa219d7476643da16e2985c5763c770ef382', class: "box-placeholder" }), h(CatFormHint, { key: 'bd850f88c63eadfc4f1082d71c0781db8cb558b6', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
|
|
707
702
|
}
|
|
708
703
|
get hasHint() {
|
|
709
704
|
return !!this.hint || !!this.hasSlottedHint;
|
|
@@ -940,14 +935,14 @@ const CatDate = class {
|
|
|
940
935
|
}
|
|
941
936
|
render() {
|
|
942
937
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
943
|
-
return (h(Host, { key: '
|
|
938
|
+
return (h(Host, { key: 'b579a4b31629206532b1a91ea9dd9b2634f0536b' }, h("cat-input", { key: '55c5c4dfaaa13d229e74d83569b6e99e7a5ce146', 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 => {
|
|
944
939
|
this.inputFocused = e.target === this.input;
|
|
945
940
|
e.stopPropagation();
|
|
946
941
|
this.catFocus.emit(e.detail);
|
|
947
942
|
}, onCatBlur: e => {
|
|
948
943
|
e.stopPropagation();
|
|
949
944
|
this.onInputBlur(e.detail);
|
|
950
|
-
} }, h("span", { key: '
|
|
945
|
+
} }, h("span", { key: 'cb362f3eb82c46adb276ec16069b5f25181c342a', slot: "label" }, this.label, h("span", { key: '7c226f594c97ceda86dc5da3500ff78665381abc', class: "label-aria" }, " (", this.locale.formatStr, ")")), h("cat-dropdown", { key: '98f13bc9d41b2c3f946007bf5f2d42ac62faab9b', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, h("cat-button", { key: 'a801df892743f0e60f4a205fde7c62546a24625b', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), h("div", { key: '5253067cb8500afa512d9e495610b17d08511edc', slot: "content" }, h("cat-date-inline", { key: '1867958d9ef4c9452a0f0ddcd8aed673f9c595b2', 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) }))))));
|
|
951
946
|
}
|
|
952
947
|
getTriggerA11yLabel() {
|
|
953
948
|
const date = this.locale.fromLocalISO(this.value);
|
|
@@ -1771,12 +1766,12 @@ const CatDateInline = class {
|
|
|
1771
1766
|
const [minDate, maxDate] = this.getMinMaxDate();
|
|
1772
1767
|
const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
|
|
1773
1768
|
const [dateStart, dateEnd] = this.getValue();
|
|
1774
|
-
return (h(Host, { key: '
|
|
1769
|
+
return (h(Host, { key: 'ca4f74e4e26b4240c2ac5a88a5ff501f6f9fbfc0', "aria-label": this.label || undefined }, h("div", { key: '30d452f2a08102ce54cc169fe444f83ac24521c4', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '3e5f7c62688dafcdd99cf77477b84ddcfcb262f6', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, h("span", { key: '3c6ce82acb14c46c83d56f50dda4015b4d30874e', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '1540ccc41e02740a69023a2c5ca839320d03e70d', name: "label" })) || this.label, h("div", { key: '64708a81ac29b0ab9509dc2f7fc8709a7594b400', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '3f5da06e86b4c202f86c034ea74256e4f0c21dba', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'd0a77ed00b40a9f676b4dbf27101783c038fea29', class: "label-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))))), h("div", { key: 'b7f667802033e1c2fe55268b1d677789ea7ae8fc', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, h("div", { key: '9ef0de6c6d7dd9d87c1002c63317a6ce0fc64cc4', class: "picker-head" }, h("cat-button", { key: '12455ccb1d3fa0f68f18e4103a84dd0542a013e1', 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: '313d660fb3fa61b1de67a7b6b12dae22b48a8299', 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: 'c7628a8f071cba27d3b8ee6ed9a9239d26d0ed6e' }, this.getHeadline()), h("cat-button", { key: '11fd72dc5bd661ac9189bb2e0cd3eba0a25ce8ab', 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: '56936eff41884c6e5112587843518d2031b86eda', 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: 'c8de1f15b1885a396c19b24344da471336036874', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, h("div", { key: 'fcb71d996b515d8d0cb36d69249c1737f79599be', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
|
|
1775
1770
|
const day = (i + this.locale.weekInfo.firstDay) % 7;
|
|
1776
1771
|
return h("abbr", { title: this.locale.days.long[day] }, this.locale.days.short[day]);
|
|
1777
|
-
})), this.weeks && (h("div", { key: '
|
|
1772
|
+
})), this.weeks && (h("div", { key: '2e9f70a7a94d7f19adfe5ad1a8c5079fbd0e25fd', class: "picker-grid-weeks" }, dateGrid
|
|
1778
1773
|
.filter((_, i) => i % 7 === 0)
|
|
1779
|
-
.map(day => (h("div", null, this.getWeekNumber(day)))))), h("div", { key: '
|
|
1774
|
+
.map(day => (h("div", null, this.getWeekNumber(day)))))), h("div", { key: '59b9726035ea9a1ab7aa99228c841817522692c1', class: "picker-grid-days" }, dateGrid.map(day => {
|
|
1780
1775
|
const isStartDate = isSameDay(dateStart, day);
|
|
1781
1776
|
const isEndDate = isSameDay(dateEnd, day);
|
|
1782
1777
|
const isRange = !!dateStart && !!dateEnd && day > dateStart && day < dateEnd;
|
|
@@ -1793,7 +1788,7 @@ const CatDateInline = class {
|
|
|
1793
1788
|
'date-focusable': this.canFocus(day),
|
|
1794
1789
|
'date-disabled': !this.canClick(day)
|
|
1795
1790
|
}, 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()));
|
|
1796
|
-
}))), h("div", { key: '
|
|
1791
|
+
}))), h("div", { key: 'e879de98e8433a0ef17f715ff48686307f401634', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (h("cat-button", { key: '34c99fbd08c4ef2dab9a390c2d208f726a2d7645', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && h("p", { key: 'd958de3864e0c29daf885af05162ed3f123c08f2', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (h("cat-button", { key: 'd7f3902bc982a060318fb3e51e9e2a00b43af618', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), h("p", { key: '68f6e23f25d229b31afcfb2b1f51c8f42eb28282', class: "cursor-aria", "aria-live": "polite" })));
|
|
1797
1792
|
}
|
|
1798
1793
|
focus(date, focus = true) {
|
|
1799
1794
|
const [minDate, maxDate] = this.getMinMaxDate();
|
|
@@ -4724,10 +4719,6 @@ const oppositeSideMap = {
|
|
|
4724
4719
|
bottom: 'top',
|
|
4725
4720
|
top: 'bottom'
|
|
4726
4721
|
};
|
|
4727
|
-
const oppositeAlignmentMap = {
|
|
4728
|
-
start: 'end',
|
|
4729
|
-
end: 'start'
|
|
4730
|
-
};
|
|
4731
4722
|
function clamp(start, value, end) {
|
|
4732
4723
|
return max(start, min(value, end));
|
|
4733
4724
|
}
|
|
@@ -4746,9 +4737,9 @@ function getOppositeAxis(axis) {
|
|
|
4746
4737
|
function getAxisLength(axis) {
|
|
4747
4738
|
return axis === 'y' ? 'height' : 'width';
|
|
4748
4739
|
}
|
|
4749
|
-
const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
|
|
4750
4740
|
function getSideAxis(placement) {
|
|
4751
|
-
|
|
4741
|
+
const firstChar = placement[0];
|
|
4742
|
+
return firstChar === 't' || firstChar === 'b' ? 'y' : 'x';
|
|
4752
4743
|
}
|
|
4753
4744
|
function getAlignmentAxis(placement) {
|
|
4754
4745
|
return getOppositeAxis(getSideAxis(placement));
|
|
@@ -4771,7 +4762,7 @@ function getExpandedPlacements(placement) {
|
|
|
4771
4762
|
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
4772
4763
|
}
|
|
4773
4764
|
function getOppositeAlignmentPlacement(placement) {
|
|
4774
|
-
return placement.replace(
|
|
4765
|
+
return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
|
|
4775
4766
|
}
|
|
4776
4767
|
const lrPlacement = ['left', 'right'];
|
|
4777
4768
|
const rlPlacement = ['right', 'left'];
|
|
@@ -4802,7 +4793,8 @@ function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
|
4802
4793
|
return list;
|
|
4803
4794
|
}
|
|
4804
4795
|
function getOppositePlacement(placement) {
|
|
4805
|
-
|
|
4796
|
+
const side = getSide(placement);
|
|
4797
|
+
return oppositeSideMap[side] + placement.slice(side.length);
|
|
4806
4798
|
}
|
|
4807
4799
|
function expandPaddingObject(padding) {
|
|
4808
4800
|
return {
|
|
@@ -4961,6 +4953,9 @@ async function detectOverflow(state, options) {
|
|
|
4961
4953
|
};
|
|
4962
4954
|
}
|
|
4963
4955
|
|
|
4956
|
+
// Maximum number of resets that can occur before bailing to avoid infinite reset loops.
|
|
4957
|
+
const MAX_RESET_COUNT = 50;
|
|
4958
|
+
|
|
4964
4959
|
/**
|
|
4965
4960
|
* Computes the `x` and `y` coordinates that will place the floating element
|
|
4966
4961
|
* next to a given reference element.
|
|
@@ -4975,7 +4970,10 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
4975
4970
|
middleware = [],
|
|
4976
4971
|
platform
|
|
4977
4972
|
} = config;
|
|
4978
|
-
const
|
|
4973
|
+
const platformWithDetectOverflow = platform.detectOverflow ? platform : {
|
|
4974
|
+
...platform,
|
|
4975
|
+
detectOverflow
|
|
4976
|
+
};
|
|
4979
4977
|
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
|
4980
4978
|
let rects = await platform.getElementRects({
|
|
4981
4979
|
reference,
|
|
@@ -4987,14 +4985,17 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
4987
4985
|
y
|
|
4988
4986
|
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
4989
4987
|
let statefulPlacement = placement;
|
|
4990
|
-
let middlewareData = {};
|
|
4991
4988
|
let resetCount = 0;
|
|
4992
|
-
|
|
4993
|
-
|
|
4989
|
+
const middlewareData = {};
|
|
4990
|
+
for (let i = 0; i < middleware.length; i++) {
|
|
4991
|
+
const currentMiddleware = middleware[i];
|
|
4992
|
+
if (!currentMiddleware) {
|
|
4993
|
+
continue;
|
|
4994
|
+
}
|
|
4994
4995
|
const {
|
|
4995
4996
|
name,
|
|
4996
4997
|
fn
|
|
4997
|
-
} =
|
|
4998
|
+
} = currentMiddleware;
|
|
4998
4999
|
const {
|
|
4999
5000
|
x: nextX,
|
|
5000
5001
|
y: nextY,
|
|
@@ -5008,10 +5009,7 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
5008
5009
|
strategy,
|
|
5009
5010
|
middlewareData,
|
|
5010
5011
|
rects,
|
|
5011
|
-
platform:
|
|
5012
|
-
...platform,
|
|
5013
|
-
detectOverflow: (_platform$detectOverf = platform.detectOverflow) != null ? _platform$detectOverf : detectOverflow
|
|
5014
|
-
},
|
|
5012
|
+
platform: platformWithDetectOverflow,
|
|
5015
5013
|
elements: {
|
|
5016
5014
|
reference,
|
|
5017
5015
|
floating
|
|
@@ -5019,14 +5017,11 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
5019
5017
|
});
|
|
5020
5018
|
x = nextX != null ? nextX : x;
|
|
5021
5019
|
y = nextY != null ? nextY : y;
|
|
5022
|
-
middlewareData = {
|
|
5023
|
-
...middlewareData,
|
|
5024
|
-
|
|
5025
|
-
...middlewareData[name],
|
|
5026
|
-
...data
|
|
5027
|
-
}
|
|
5020
|
+
middlewareData[name] = {
|
|
5021
|
+
...middlewareData[name],
|
|
5022
|
+
...data
|
|
5028
5023
|
};
|
|
5029
|
-
if (reset && resetCount
|
|
5024
|
+
if (reset && resetCount < MAX_RESET_COUNT) {
|
|
5030
5025
|
resetCount++;
|
|
5031
5026
|
if (typeof reset === 'object') {
|
|
5032
5027
|
if (reset.placement) {
|
|
@@ -5481,7 +5476,6 @@ function isShadowRoot(value) {
|
|
|
5481
5476
|
}
|
|
5482
5477
|
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
5483
5478
|
}
|
|
5484
|
-
const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
|
|
5485
5479
|
function isOverflowElement(element) {
|
|
5486
5480
|
const {
|
|
5487
5481
|
overflow,
|
|
@@ -5489,32 +5483,35 @@ function isOverflowElement(element) {
|
|
|
5489
5483
|
overflowY,
|
|
5490
5484
|
display
|
|
5491
5485
|
} = getComputedStyle$1(element);
|
|
5492
|
-
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) &&
|
|
5486
|
+
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
|
|
5493
5487
|
}
|
|
5494
|
-
const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
|
|
5495
5488
|
function isTableElement(element) {
|
|
5496
|
-
return
|
|
5489
|
+
return /^(table|td|th)$/.test(getNodeName(element));
|
|
5497
5490
|
}
|
|
5498
|
-
const topLayerSelectors = [':popover-open', ':modal'];
|
|
5499
5491
|
function isTopLayer(element) {
|
|
5500
|
-
|
|
5501
|
-
|
|
5502
|
-
return
|
|
5503
|
-
} catch (_e) {
|
|
5504
|
-
return false;
|
|
5492
|
+
try {
|
|
5493
|
+
if (element.matches(':popover-open')) {
|
|
5494
|
+
return true;
|
|
5505
5495
|
}
|
|
5506
|
-
})
|
|
5496
|
+
} catch (_e) {
|
|
5497
|
+
// no-op
|
|
5498
|
+
}
|
|
5499
|
+
try {
|
|
5500
|
+
return element.matches(':modal');
|
|
5501
|
+
} catch (_e) {
|
|
5502
|
+
return false;
|
|
5503
|
+
}
|
|
5507
5504
|
}
|
|
5508
|
-
const
|
|
5509
|
-
const
|
|
5510
|
-
const
|
|
5505
|
+
const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
|
|
5506
|
+
const containRe = /paint|layout|strict|content/;
|
|
5507
|
+
const isNotNone = value => !!value && value !== 'none';
|
|
5508
|
+
let isWebKitValue;
|
|
5511
5509
|
function isContainingBlock(elementOrCss) {
|
|
5512
|
-
const webkit = isWebKit();
|
|
5513
5510
|
const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
|
|
5514
5511
|
|
|
5515
5512
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
5516
5513
|
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
|
5517
|
-
return
|
|
5514
|
+
return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
|
|
5518
5515
|
}
|
|
5519
5516
|
function getContainingBlock(element) {
|
|
5520
5517
|
let currentNode = getParentNode(element);
|
|
@@ -5529,12 +5526,13 @@ function getContainingBlock(element) {
|
|
|
5529
5526
|
return null;
|
|
5530
5527
|
}
|
|
5531
5528
|
function isWebKit() {
|
|
5532
|
-
if (
|
|
5533
|
-
|
|
5529
|
+
if (isWebKitValue == null) {
|
|
5530
|
+
isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
|
|
5531
|
+
}
|
|
5532
|
+
return isWebKitValue;
|
|
5534
5533
|
}
|
|
5535
|
-
const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
|
|
5536
5534
|
function isLastTraversableNode(node) {
|
|
5537
|
-
return
|
|
5535
|
+
return /^(html|body|#document)$/.test(getNodeName(node));
|
|
5538
5536
|
}
|
|
5539
5537
|
function getComputedStyle$1(element) {
|
|
5540
5538
|
return getWindow(element).getComputedStyle(element);
|
|
@@ -5590,8 +5588,9 @@ function getOverflowAncestors(node, list, traverseIframes) {
|
|
|
5590
5588
|
if (isBody) {
|
|
5591
5589
|
const frameElement = getFrameElement(win);
|
|
5592
5590
|
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
|
5591
|
+
} else {
|
|
5592
|
+
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
5593
5593
|
}
|
|
5594
|
-
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
5595
5594
|
}
|
|
5596
5595
|
function getFrameElement(win) {
|
|
5597
5596
|
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
|
@@ -6427,7 +6426,7 @@ const CatDatepickerFlat = class {
|
|
|
6427
6426
|
}
|
|
6428
6427
|
render() {
|
|
6429
6428
|
return [
|
|
6430
|
-
h("cat-input", { key: '
|
|
6429
|
+
h("cat-input", { key: '199c9fd2a919b876106eaab58a37a6d286654c27', 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 => {
|
|
6431
6430
|
e.stopPropagation();
|
|
6432
6431
|
this.value = e.detail || undefined;
|
|
6433
6432
|
}, onCatFocus: e => {
|
|
@@ -6436,8 +6435,8 @@ const CatDatepickerFlat = class {
|
|
|
6436
6435
|
}, onCatBlur: e => {
|
|
6437
6436
|
e.stopPropagation();
|
|
6438
6437
|
this.catBlur.emit(e.detail);
|
|
6439
|
-
} }, this.hasSlottedLabel && (h("span", { key: '
|
|
6440
|
-
h("div", { key: '
|
|
6438
|
+
} }, this.hasSlottedLabel && (h("span", { key: 'aedecd1ff7f34f8f038df57c3fb42bdd3282273e', slot: "label" }, h("slot", { key: 'a86b6a3bd04da7fde60ddb19df4142e9ff39c0fe', name: "label" }))), this.hasSlottedHint && (h("span", { key: '70f4739871308bcd4fa88e265a2ec5c8e5eeff35', slot: "hint" }, h("slot", { key: '8cc4b602ae9064da5816653ca2dfb918329e26d3', name: "hint" })))),
|
|
6439
|
+
h("div", { key: 'abc43645698cf1b209598f8a34432d6be0c9e519', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
|
|
6441
6440
|
];
|
|
6442
6441
|
}
|
|
6443
6442
|
initDatepicker(input) {
|
|
@@ -6547,11 +6546,11 @@ const CatDatepickerInline = class {
|
|
|
6547
6546
|
this.pickr = this.initDatepicker(this.input);
|
|
6548
6547
|
}
|
|
6549
6548
|
render() {
|
|
6550
|
-
return (h(Host, { key: '
|
|
6549
|
+
return (h(Host, { key: '3a51929cf5486122309a0949df55b414bfa83462' }, h("div", { key: 'ad94b1019c6013d04af429702d23d996927567a9', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
|
|
6551
6550
|
'datepicker-wrapper': true,
|
|
6552
6551
|
'datepicker-disabled': this.disabled,
|
|
6553
6552
|
'datepicker-readonly': this.readonly
|
|
6554
|
-
} }, h("input", { key: '
|
|
6553
|
+
} }, h("input", { key: '0edefcd24538d19c49fb57eab6cb4ed5a19f22ce', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
|
|
6555
6554
|
}
|
|
6556
6555
|
initDatepicker(input) {
|
|
6557
6556
|
if (!input) {
|
|
@@ -7677,7 +7676,7 @@ const CatDropdown = class {
|
|
|
7677
7676
|
this.noInitialFocus = false;
|
|
7678
7677
|
/**
|
|
7679
7678
|
* Trigger element will not receive focus when dropdown is closed.
|
|
7680
|
-
*
|
|
7679
|
+
* Please use this property carefully, consider using cat-menu over using this property
|
|
7681
7680
|
*/
|
|
7682
7681
|
this.noReturnFocus = false;
|
|
7683
7682
|
/**
|
|
@@ -7691,6 +7690,9 @@ const CatDropdown = class {
|
|
|
7691
7690
|
* @internal
|
|
7692
7691
|
*/
|
|
7693
7692
|
this.focusTrap = true;
|
|
7693
|
+
this.boundWindowClickListener = this.windowClickListener.bind(this);
|
|
7694
|
+
this.boundWindowMousedownListener = this.windowMousedownListener.bind(this);
|
|
7695
|
+
this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);
|
|
7694
7696
|
}
|
|
7695
7697
|
/**
|
|
7696
7698
|
* Whether the dropdown is open.
|
|
@@ -7712,6 +7714,7 @@ const CatDropdown = class {
|
|
|
7712
7714
|
path.includes(this.content) &&
|
|
7713
7715
|
// check if click was not on a trigger for a sub-dropdown
|
|
7714
7716
|
event.target?.slot !== 'trigger' &&
|
|
7717
|
+
!event.target.subMenu &&
|
|
7715
7718
|
// check if click was not an element marked with data-dropdown-no-close
|
|
7716
7719
|
!path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))) {
|
|
7717
7720
|
this.close();
|
|
@@ -7722,15 +7725,14 @@ const CatDropdown = class {
|
|
|
7722
7725
|
this.close();
|
|
7723
7726
|
}
|
|
7724
7727
|
}
|
|
7725
|
-
|
|
7726
|
-
|
|
7727
|
-
|
|
7728
|
-
|
|
7729
|
-
|
|
7730
|
-
|
|
7731
|
-
|
|
7732
|
-
|
|
7733
|
-
}
|
|
7728
|
+
windowClickListener(event) {
|
|
7729
|
+
this.handleClickOutside(event);
|
|
7730
|
+
}
|
|
7731
|
+
windowMousedownListener(event) {
|
|
7732
|
+
this.handleClickOutside(event);
|
|
7733
|
+
}
|
|
7734
|
+
windowTouchStartListener(event) {
|
|
7735
|
+
this.handleClickOutside(event);
|
|
7734
7736
|
}
|
|
7735
7737
|
/**
|
|
7736
7738
|
* Toggles the dropdown.
|
|
@@ -7767,8 +7769,10 @@ const CatDropdown = class {
|
|
|
7767
7769
|
: createFocusTrap(this.content, {
|
|
7768
7770
|
tabbableOptions: this.tabbableOptions,
|
|
7769
7771
|
allowOutsideClick: true,
|
|
7772
|
+
clickOutsideDeactivates: event => this.shouldCloseByClickEvent(event),
|
|
7773
|
+
onPostDeactivate: () => this.close(),
|
|
7770
7774
|
onPostActivate: () => this.catOpen.emit(),
|
|
7771
|
-
setReturnFocus: elem => (!this.isFocusVisible ? false : this.trigger || elem),
|
|
7775
|
+
setReturnFocus: elem => (!this.isFocusVisible || this.noReturnFocus ? false : this.trigger || elem),
|
|
7772
7776
|
isKeyForward: event => {
|
|
7773
7777
|
if ((this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||
|
|
7774
7778
|
(this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')) {
|
|
@@ -7792,6 +7796,7 @@ const CatDropdown = class {
|
|
|
7792
7796
|
this.trap.activate();
|
|
7793
7797
|
}
|
|
7794
7798
|
else {
|
|
7799
|
+
this.addListeners();
|
|
7795
7800
|
this.catOpen.emit();
|
|
7796
7801
|
}
|
|
7797
7802
|
});
|
|
@@ -7810,6 +7815,7 @@ const CatDropdown = class {
|
|
|
7810
7815
|
if (shouldReturnFocus) {
|
|
7811
7816
|
this.trigger?.focus();
|
|
7812
7817
|
}
|
|
7818
|
+
this.removeListeners();
|
|
7813
7819
|
// give CSS transition time to apply
|
|
7814
7820
|
setTimeout(() => {
|
|
7815
7821
|
this._isOpen = false;
|
|
@@ -7834,7 +7840,29 @@ const CatDropdown = class {
|
|
|
7834
7840
|
this.cleanupFloatingUi = undefined;
|
|
7835
7841
|
}
|
|
7836
7842
|
render() {
|
|
7837
|
-
return (h(Host, { key: '
|
|
7843
|
+
return (h(Host, { key: 'bd6c2271fbd5a3f9222cb9eb8c59d7113dc72c7a' }, h("slot", { key: '26b1d2b753fffa0f91c8ee505209c46880e9233b', name: "anchor", ref: el => (this.anchorSlot = el) }), h("slot", { key: 'ac3b213022083bdb89edf4583cc216a5308bb1d2', name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { key: 'c4849c420a3e248bc7192db3a059e3372b7612fb', id: this.contentId, class: { content: true, 'overflow-auto': !this.overflow, justified: this.justify, aligned: !this.justify }, ref: el => (this.content = el) }, h("slot", { key: '1bbcaa8a86c2726e61aff6236e01b3f4ac6004e9', name: "content" }))));
|
|
7844
|
+
}
|
|
7845
|
+
addListeners() {
|
|
7846
|
+
window.addEventListener('click', this.boundWindowClickListener);
|
|
7847
|
+
window.addEventListener('mousedown', this.boundWindowMousedownListener);
|
|
7848
|
+
window.addEventListener('touchstart', this.boundWindowTouchStartListener);
|
|
7849
|
+
}
|
|
7850
|
+
removeListeners() {
|
|
7851
|
+
window.removeEventListener('click', this.boundWindowClickListener);
|
|
7852
|
+
window.removeEventListener('mousedown', this.boundWindowMousedownListener);
|
|
7853
|
+
window.removeEventListener('touchstart', this.boundWindowTouchStartListener);
|
|
7854
|
+
}
|
|
7855
|
+
handleClickOutside(event) {
|
|
7856
|
+
if (this.shouldCloseByClickEvent(event)) {
|
|
7857
|
+
this.close();
|
|
7858
|
+
}
|
|
7859
|
+
}
|
|
7860
|
+
shouldCloseByClickEvent(event) {
|
|
7861
|
+
return (!this.noAutoClose &&
|
|
7862
|
+
// check if click was outside of the dropdown content
|
|
7863
|
+
!event.composedPath().includes(this.content) &&
|
|
7864
|
+
// check if click was not on an element marked with data-dropdown-no-close
|
|
7865
|
+
!event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')));
|
|
7838
7866
|
}
|
|
7839
7867
|
get contentId() {
|
|
7840
7868
|
return `cat-dropdown-${this.id}`;
|
|
@@ -7970,7 +7998,7 @@ const CatFormGroup = class {
|
|
|
7970
7998
|
});
|
|
7971
7999
|
}
|
|
7972
8000
|
render() {
|
|
7973
|
-
return (h(Host, { key: '
|
|
8001
|
+
return (h(Host, { key: 'cb3ed29df264b00c7740a97558ef5283a018c0c4', style: { '--label-size': this.labelSize } }, h("slot", { key: 'da29f356a770a8c5abc99719353e76ea565bf483', onSlotchange: this.onSlotChange.bind(this) })));
|
|
7974
8002
|
}
|
|
7975
8003
|
onSlotChange() {
|
|
7976
8004
|
this.formElements = Array.from(this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker, cat-date, cat-time'));
|
|
@@ -8001,7 +8029,7 @@ const CatIcon = class {
|
|
|
8001
8029
|
this.size = 'm';
|
|
8002
8030
|
}
|
|
8003
8031
|
render() {
|
|
8004
|
-
return (h("span", { key: '
|
|
8032
|
+
return (h("span", { key: '7d03b1a8d0443200d1daf1a77c14ed4d75a2f74e', innerHTML: this.iconSrc || (this.icon ? catIconRegistry.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
|
|
8005
8033
|
icon: true,
|
|
8006
8034
|
[`icon-${this.size}`]: this.size !== 'inline'
|
|
8007
8035
|
} }));
|
|
@@ -8327,10 +8355,10 @@ const CatMenu = class {
|
|
|
8327
8355
|
}
|
|
8328
8356
|
getDeepActiveElement() {
|
|
8329
8357
|
let active = document.activeElement;
|
|
8330
|
-
while (active?.shadowRoot?.activeElement
|
|
8358
|
+
while (active?.shadowRoot?.activeElement) {
|
|
8331
8359
|
active = active.shadowRoot.activeElement;
|
|
8332
8360
|
}
|
|
8333
|
-
return active;
|
|
8361
|
+
return active ? (findClosest('cat-menu-item', active) ?? active) : null;
|
|
8334
8362
|
}
|
|
8335
8363
|
onDocumentKeydown(event) {
|
|
8336
8364
|
const navigationKeys = this.arrowNavigation === 'horizontal'
|
|
@@ -8398,10 +8426,10 @@ const CatMenu = class {
|
|
|
8398
8426
|
this.catMenuItems = Array.from(this.hostElement.querySelectorAll('cat-menu-item'));
|
|
8399
8427
|
}
|
|
8400
8428
|
render() {
|
|
8401
|
-
return (h(Host, { key: '
|
|
8429
|
+
return (h(Host, { key: '477d279400f05909efb6d3893ad3832383b0b1f1' }, h("cat-dropdown", { key: '39b1b867490e2f7f9a9f45bdf247785102e2fc73', ref: el => (this.dropdown = el), focusTrap: false, placement: this.placement, justify: this.justify, arrowNavigation: "none", noResize: this.noResize, overflow: this.overflow, delayedTriggerInit: this.delayedTriggerInit, onCatOpen: this.onMenuOpen, onCatClose: () => this.catClose.emit() }, h("cat-button", { key: '13c95fc31610cfe5eff4bd6ce9cad055c77ef454', slot: "trigger", part: "trigger", variant: this.triggerVariant, size: this.triggerSize, icon: this.triggerIcon ?? (this.triggerLabel === undefined ? 'more-horizontal-filled' : undefined), iconOnly: this.triggerIconOnly ?? this.triggerLabel === undefined, color: this.triggerColor, a11yLabel: this.triggerA11yLabel ?? this.triggerLabel, class: this.triggerClass, testId: this.triggerTestId, nativeAttributes: {
|
|
8402
8430
|
...this.triggerNativeAttributes,
|
|
8403
8431
|
'aria-haspopup': 'menu'
|
|
8404
|
-
}, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && h("slot", { key: '
|
|
8432
|
+
}, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && h("slot", { key: 'f688c20ef06f986a2fec549e524a9293e40bb362', name: "trigger-label" }, this.triggerLabel)), h("nav", { key: 'f257a0cc30a58b63f6cc073a24fe56018d029ed8', role: "menu", slot: "content", class: "cat-menu-list", "aria-orientation": this.arrowNavigation }, h("ul", { key: '127a61cbf0958eb7bd6f7edcb4bec923e0f9491c' }, h("slot", { key: 'ec19aade8956369dc02f7f7aa08401955ed3b358' }))))));
|
|
8405
8433
|
}
|
|
8406
8434
|
get hostElement() { return getElement(this); }
|
|
8407
8435
|
};
|
|
@@ -8433,10 +8461,14 @@ const CatMenuItem = class {
|
|
|
8433
8461
|
* Specifies that the menu item should be disabled.
|
|
8434
8462
|
*/
|
|
8435
8463
|
this.disabled = false;
|
|
8464
|
+
this.subMenu = false;
|
|
8436
8465
|
}
|
|
8437
8466
|
get id() {
|
|
8438
8467
|
return this.identifier || this._id;
|
|
8439
8468
|
}
|
|
8469
|
+
onClick(event) {
|
|
8470
|
+
this.catClick.emit(event);
|
|
8471
|
+
}
|
|
8440
8472
|
/**
|
|
8441
8473
|
* Programmatically move focus to the menu item.
|
|
8442
8474
|
*/
|
|
@@ -8450,14 +8482,14 @@ const CatMenuItem = class {
|
|
|
8450
8482
|
this.button?.doBlur();
|
|
8451
8483
|
}
|
|
8452
8484
|
render() {
|
|
8453
|
-
return (h(Host, { key: '
|
|
8485
|
+
return (h(Host, { key: 'ff1abf6c6d74fc9d0bbc7491d64e0ad3373f6899' }, h("li", { key: '45089d058d664822cb67bc7bbf802b06333c351e' }, h("cat-button", { key: '47a83844fe837313f65115d95571f0e9b6f7591b', ref: el => (this.button = el), class: "cat-nav-item", buttonId: this.id, part: "menu-item", variant: this.variant, icon: this.icon, iconOnly: this.iconOnly, iconRight: this.iconRight, url: this.url, disabled: this.disabled, urlTarget: this.urlTarget, loading: this.loading, color: this.color, active: this.active, testId: this.testId, nativeAttributes: {
|
|
8454
8486
|
...this.nativeAttributes,
|
|
8455
8487
|
role: 'menuitem',
|
|
8456
8488
|
tabindex: '-1'
|
|
8457
|
-
}, onCatClick: this.
|
|
8489
|
+
}, onCatClick: event => this.click(event) }, h("slot", { key: '49bc9f6cc4a5ed1293e261cefb67351342b805fb' })))));
|
|
8458
8490
|
}
|
|
8459
|
-
|
|
8460
|
-
|
|
8491
|
+
click(event) {
|
|
8492
|
+
event.stopPropagation();
|
|
8461
8493
|
}
|
|
8462
8494
|
};
|
|
8463
8495
|
|