@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
|
@@ -44,7 +44,7 @@ const CatAlert = class {
|
|
|
44
44
|
setAttributeDefault(this, 'role', this.mapRole.get(this.color));
|
|
45
45
|
}
|
|
46
46
|
render() {
|
|
47
|
-
return (index.h(index.Host, { key: '
|
|
47
|
+
return (index.h(index.Host, { key: '02844ee6d6dc5d365bee542ee873280b2b7040fc' }, !this.noIcon && index.h("cat-icon", { key: 'e3497771224d89279b9d4d1f4d83014066504ede', size: "l", icon: this.icon || this.mapIcon.get(this.color) }), index.h("div", { key: '219d03b29ec237228366c2df596c148429685483', class: "content" }, index.h("slot", { key: '13a11b580fe9a6ac0707e49120809e97e3b05cd5' }))));
|
|
48
48
|
}
|
|
49
49
|
get hostElement() { return index.getElement(this); }
|
|
50
50
|
};
|
|
@@ -325,7 +325,7 @@ const CatBadge = class {
|
|
|
325
325
|
}
|
|
326
326
|
}
|
|
327
327
|
render() {
|
|
328
|
-
return (index.h(index.Host, { key: '
|
|
328
|
+
return (index.h(index.Host, { key: '5c22fb2216adbb84af5bbcbc1cdc97a4fc2e7f2a', "data-icon-badge": this.isIconBadge ? this.size : null }, this.hasPrefixIcon ? index.h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null, this.isIconBadge ? (index.h("cat-icon", { icon: this.icon, size: this.iconSize, class: "icon-only" })) : (index.h("slot", null)), this.hasSuffixIcon ? index.h("cat-icon", { icon: this.icon, size: this.iconSize, part: "prefix" }) : null));
|
|
329
329
|
}
|
|
330
330
|
get hostElement() { return index.getElement(this); }
|
|
331
331
|
static get watchers() { return {
|
|
@@ -347,7 +347,7 @@ function findClosest(selector, element) {
|
|
|
347
347
|
return nextElement ? findClosest(selector, nextElement) : null;
|
|
348
348
|
}
|
|
349
349
|
|
|
350
|
-
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}";
|
|
350
|
+
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}";
|
|
351
351
|
|
|
352
352
|
const CatButton = class {
|
|
353
353
|
constructor(hostRef) {
|
|
@@ -396,10 +396,6 @@ const CatButton = class {
|
|
|
396
396
|
* Use round button edges.
|
|
397
397
|
*/
|
|
398
398
|
this.round = false;
|
|
399
|
-
/**
|
|
400
|
-
* Link behaves as an inline element.
|
|
401
|
-
*/
|
|
402
|
-
this.inline = false;
|
|
403
399
|
/**
|
|
404
400
|
* Hide the actual button content and only display the icon.
|
|
405
401
|
*/
|
|
@@ -479,8 +475,7 @@ const CatButton = class {
|
|
|
479
475
|
'cat-button-round': this.round,
|
|
480
476
|
'cat-button-loading': this.loading,
|
|
481
477
|
'cat-button-disabled': this.disabled,
|
|
482
|
-
'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton
|
|
483
|
-
'cat-button-inline': this.inline,
|
|
478
|
+
'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
|
|
484
479
|
[`cat-button-${this.variant}`]: Boolean(this.variant),
|
|
485
480
|
[`cat-button-${this.color}`]: Boolean(this.color),
|
|
486
481
|
[`cat-button-${this.size}`]: Boolean(this.size),
|
|
@@ -562,7 +557,7 @@ const CatButtonGroup = class {
|
|
|
562
557
|
this.buttonElements = [];
|
|
563
558
|
}
|
|
564
559
|
render() {
|
|
565
|
-
return (index.h(index.Host, { key: '
|
|
560
|
+
return (index.h(index.Host, { key: 'a34efc8e64ae1322adc48696bf2c04cc2d1e429c', role: "group", "aria-label": this.a11yLabel }, index.h("slot", { key: '9149f38be769cef00801abacbb03dd0c95850f12', onSlotchange: this.onSlotChange.bind(this) })));
|
|
566
561
|
}
|
|
567
562
|
onSlotChange() {
|
|
568
563
|
this.buttonElements = Array.from(this.hostElement.querySelectorAll(':scope > cat-button, :scope > cat-tooltip > cat-button, :scope > cat-dropdown cat-button[slot="trigger"]'));
|
|
@@ -583,7 +578,7 @@ const CatCard = class {
|
|
|
583
578
|
this.catLoad = index.createEvent(this, "catLoad");
|
|
584
579
|
}
|
|
585
580
|
render() {
|
|
586
|
-
return index.h("slot", { key: '
|
|
581
|
+
return index.h("slot", { key: '2ddd44a7ce4d8c664f1161710a7a65461c37875f' });
|
|
587
582
|
}
|
|
588
583
|
componentDidLoad() {
|
|
589
584
|
this.catLoad.emit();
|
|
@@ -699,13 +694,13 @@ const CatCheckbox = class {
|
|
|
699
694
|
this.input.blur();
|
|
700
695
|
}
|
|
701
696
|
render() {
|
|
702
|
-
return (index.h(index.Host, { key: '
|
|
697
|
+
return (index.h(index.Host, { key: '3b747366d141c2e3c678f33841eca2983b9161c9' }, index.h("label", { key: '2ee8575df8a269ef821a980add768a668d3e208b', htmlFor: this.id, class: {
|
|
703
698
|
'is-hidden': this.labelHidden,
|
|
704
699
|
'is-disabled': this.disabled,
|
|
705
700
|
'label-left': this.labelLeft,
|
|
706
701
|
'align-center': this.alignment === 'center',
|
|
707
702
|
'align-end': this.alignment === 'bottom'
|
|
708
|
-
} }, index.h("input", { key: '
|
|
703
|
+
} }, index.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 }), index.h("span", { key: '387095d0a3fdb1820fdc7d3111c9475792865255', class: "box", "aria-hidden": "true" }, index.h("svg", { key: '94bc42f4729c8ac50d786029d1a2b4446371b1dd', class: "check", viewBox: "0 0 12 10" }, index.h("polyline", { key: 'b6c0c742108523bafa656aad76fde132748f673d', points: "1.5 6 4.5 9 10.5 1" })), index.h("svg", { key: '51d990d4002736670ea32bf9ee10f90918ea6856', class: "dash", viewBox: "0 0 12 10" }, index.h("polyline", { key: '882eb8cf57188490f0b57a052908c52780c708a3', points: "1.5 5 10.5 5" }))), index.h("span", { key: '36df32838873f91f1b86ed93f5f20e6f7fba8e83', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: '568163747405bb172ac389293d1e02eb586d2afe', name: "label" })) || this.label, index.h("span", { key: '1a95817d8a270fcfba8cdbd20832142358cf793c', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '59b897e56020aedf0dc7f5d847b16cb4059505d5', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '3482694fe72455fb0e0d96d7760cdd01044cb45c', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (index.h("div", { key: 'f4d2064c5e48dc7131838e62baa941899fa7e3fc', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: '1909aa219d7476643da16e2985c5763c770ef382', class: "box-placeholder" }), index.h(CatFormHint, { key: 'bd850f88c63eadfc4f1082d71c0781db8cb558b6', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
|
|
709
704
|
}
|
|
710
705
|
get hasHint() {
|
|
711
706
|
return !!this.hint || !!this.hasSlottedHint;
|
|
@@ -942,14 +937,14 @@ const CatDate = class {
|
|
|
942
937
|
}
|
|
943
938
|
render() {
|
|
944
939
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
945
|
-
return (index.h(index.Host, { key: '
|
|
940
|
+
return (index.h(index.Host, { key: 'b579a4b31629206532b1a91ea9dd9b2634f0536b' }, index.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 => {
|
|
946
941
|
this.inputFocused = e.target === this.input;
|
|
947
942
|
e.stopPropagation();
|
|
948
943
|
this.catFocus.emit(e.detail);
|
|
949
944
|
}, onCatBlur: e => {
|
|
950
945
|
e.stopPropagation();
|
|
951
946
|
this.onInputBlur(e.detail);
|
|
952
|
-
} }, index.h("span", { key: '
|
|
947
|
+
} }, index.h("span", { key: 'cb362f3eb82c46adb276ec16069b5f25181c342a', slot: "label" }, this.label, index.h("span", { key: '7c226f594c97ceda86dc5da3500ff78665381abc', class: "label-aria" }, " (", this.locale.formatStr, ")")), index.h("cat-dropdown", { key: '98f13bc9d41b2c3f946007bf5f2d42ac62faab9b', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, index.h("cat-button", { key: 'a801df892743f0e60f4a205fde7c62546a24625b', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), index.h("div", { key: '5253067cb8500afa512d9e495610b17d08511edc', slot: "content" }, index.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) }))))));
|
|
953
948
|
}
|
|
954
949
|
getTriggerA11yLabel() {
|
|
955
950
|
const date = this.locale.fromLocalISO(this.value);
|
|
@@ -1773,12 +1768,12 @@ const CatDateInline = class {
|
|
|
1773
1768
|
const [minDate, maxDate] = this.getMinMaxDate();
|
|
1774
1769
|
const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
|
|
1775
1770
|
const [dateStart, dateEnd] = this.getValue();
|
|
1776
|
-
return (index.h(index.Host, { key: '
|
|
1771
|
+
return (index.h(index.Host, { key: 'ca4f74e4e26b4240c2ac5a88a5ff501f6f9fbfc0', "aria-label": this.label || undefined }, index.h("div", { key: '30d452f2a08102ce54cc169fe444f83ac24521c4', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '3e5f7c62688dafcdd99cf77477b84ddcfcb262f6', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, index.h("span", { key: '3c6ce82acb14c46c83d56f50dda4015b4d30874e', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '1540ccc41e02740a69023a2c5ca839320d03e70d', name: "label" })) || this.label, index.h("div", { key: '64708a81ac29b0ab9509dc2f7fc8709a7594b400', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '3f5da06e86b4c202f86c034ea74256e4f0c21dba', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'd0a77ed00b40a9f676b4dbf27101783c038fea29', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: 'b7f667802033e1c2fe55268b1d677789ea7ae8fc', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, index.h("div", { key: '9ef0de6c6d7dd9d87c1002c63317a6ce0fc64cc4', class: "picker-head" }, index.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 }), index.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 }), index.h("h3", { key: 'c7628a8f071cba27d3b8ee6ed9a9239d26d0ed6e' }, this.getHeadline()), index.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 }), index.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 })), index.h("div", { key: 'c8de1f15b1885a396c19b24344da471336036874', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, index.h("div", { key: 'fcb71d996b515d8d0cb36d69249c1737f79599be', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
|
|
1777
1772
|
const day = (i + this.locale.weekInfo.firstDay) % 7;
|
|
1778
1773
|
return index.h("abbr", { title: this.locale.days.long[day] }, this.locale.days.short[day]);
|
|
1779
|
-
})), this.weeks && (index.h("div", { key: '
|
|
1774
|
+
})), this.weeks && (index.h("div", { key: '2e9f70a7a94d7f19adfe5ad1a8c5079fbd0e25fd', class: "picker-grid-weeks" }, dateGrid
|
|
1780
1775
|
.filter((_, i) => i % 7 === 0)
|
|
1781
|
-
.map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: '
|
|
1776
|
+
.map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: '59b9726035ea9a1ab7aa99228c841817522692c1', class: "picker-grid-days" }, dateGrid.map(day => {
|
|
1782
1777
|
const isStartDate = isSameDay(dateStart, day);
|
|
1783
1778
|
const isEndDate = isSameDay(dateEnd, day);
|
|
1784
1779
|
const isRange = !!dateStart && !!dateEnd && day > dateStart && day < dateEnd;
|
|
@@ -1795,7 +1790,7 @@ const CatDateInline = class {
|
|
|
1795
1790
|
'date-focusable': this.canFocus(day),
|
|
1796
1791
|
'date-disabled': !this.canClick(day)
|
|
1797
1792
|
}, 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()));
|
|
1798
|
-
}))), index.h("div", { key: '
|
|
1793
|
+
}))), index.h("div", { key: 'e879de98e8433a0ef17f715ff48686307f401634', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (index.h("cat-button", { key: '34c99fbd08c4ef2dab9a390c2d208f726a2d7645', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && index.h("p", { key: 'd958de3864e0c29daf885af05162ed3f123c08f2', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (index.h("cat-button", { key: 'd7f3902bc982a060318fb3e51e9e2a00b43af618', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), index.h("p", { key: '68f6e23f25d229b31afcfb2b1f51c8f42eb28282', class: "cursor-aria", "aria-live": "polite" })));
|
|
1799
1794
|
}
|
|
1800
1795
|
focus(date, focus = true) {
|
|
1801
1796
|
const [minDate, maxDate] = this.getMinMaxDate();
|
|
@@ -4726,10 +4721,6 @@ const oppositeSideMap = {
|
|
|
4726
4721
|
bottom: 'top',
|
|
4727
4722
|
top: 'bottom'
|
|
4728
4723
|
};
|
|
4729
|
-
const oppositeAlignmentMap = {
|
|
4730
|
-
start: 'end',
|
|
4731
|
-
end: 'start'
|
|
4732
|
-
};
|
|
4733
4724
|
function clamp(start, value, end) {
|
|
4734
4725
|
return max(start, min(value, end));
|
|
4735
4726
|
}
|
|
@@ -4748,9 +4739,9 @@ function getOppositeAxis(axis) {
|
|
|
4748
4739
|
function getAxisLength(axis) {
|
|
4749
4740
|
return axis === 'y' ? 'height' : 'width';
|
|
4750
4741
|
}
|
|
4751
|
-
const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
|
|
4752
4742
|
function getSideAxis(placement) {
|
|
4753
|
-
|
|
4743
|
+
const firstChar = placement[0];
|
|
4744
|
+
return firstChar === 't' || firstChar === 'b' ? 'y' : 'x';
|
|
4754
4745
|
}
|
|
4755
4746
|
function getAlignmentAxis(placement) {
|
|
4756
4747
|
return getOppositeAxis(getSideAxis(placement));
|
|
@@ -4773,7 +4764,7 @@ function getExpandedPlacements(placement) {
|
|
|
4773
4764
|
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
4774
4765
|
}
|
|
4775
4766
|
function getOppositeAlignmentPlacement(placement) {
|
|
4776
|
-
return placement.replace(
|
|
4767
|
+
return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
|
|
4777
4768
|
}
|
|
4778
4769
|
const lrPlacement = ['left', 'right'];
|
|
4779
4770
|
const rlPlacement = ['right', 'left'];
|
|
@@ -4804,7 +4795,8 @@ function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
|
4804
4795
|
return list;
|
|
4805
4796
|
}
|
|
4806
4797
|
function getOppositePlacement(placement) {
|
|
4807
|
-
|
|
4798
|
+
const side = getSide(placement);
|
|
4799
|
+
return oppositeSideMap[side] + placement.slice(side.length);
|
|
4808
4800
|
}
|
|
4809
4801
|
function expandPaddingObject(padding) {
|
|
4810
4802
|
return {
|
|
@@ -4963,6 +4955,9 @@ async function detectOverflow(state, options) {
|
|
|
4963
4955
|
};
|
|
4964
4956
|
}
|
|
4965
4957
|
|
|
4958
|
+
// Maximum number of resets that can occur before bailing to avoid infinite reset loops.
|
|
4959
|
+
const MAX_RESET_COUNT = 50;
|
|
4960
|
+
|
|
4966
4961
|
/**
|
|
4967
4962
|
* Computes the `x` and `y` coordinates that will place the floating element
|
|
4968
4963
|
* next to a given reference element.
|
|
@@ -4977,7 +4972,10 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
4977
4972
|
middleware = [],
|
|
4978
4973
|
platform
|
|
4979
4974
|
} = config;
|
|
4980
|
-
const
|
|
4975
|
+
const platformWithDetectOverflow = platform.detectOverflow ? platform : {
|
|
4976
|
+
...platform,
|
|
4977
|
+
detectOverflow
|
|
4978
|
+
};
|
|
4981
4979
|
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
|
4982
4980
|
let rects = await platform.getElementRects({
|
|
4983
4981
|
reference,
|
|
@@ -4989,14 +4987,17 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
4989
4987
|
y
|
|
4990
4988
|
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
4991
4989
|
let statefulPlacement = placement;
|
|
4992
|
-
let middlewareData = {};
|
|
4993
4990
|
let resetCount = 0;
|
|
4994
|
-
|
|
4995
|
-
|
|
4991
|
+
const middlewareData = {};
|
|
4992
|
+
for (let i = 0; i < middleware.length; i++) {
|
|
4993
|
+
const currentMiddleware = middleware[i];
|
|
4994
|
+
if (!currentMiddleware) {
|
|
4995
|
+
continue;
|
|
4996
|
+
}
|
|
4996
4997
|
const {
|
|
4997
4998
|
name,
|
|
4998
4999
|
fn
|
|
4999
|
-
} =
|
|
5000
|
+
} = currentMiddleware;
|
|
5000
5001
|
const {
|
|
5001
5002
|
x: nextX,
|
|
5002
5003
|
y: nextY,
|
|
@@ -5010,10 +5011,7 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
5010
5011
|
strategy,
|
|
5011
5012
|
middlewareData,
|
|
5012
5013
|
rects,
|
|
5013
|
-
platform:
|
|
5014
|
-
...platform,
|
|
5015
|
-
detectOverflow: (_platform$detectOverf = platform.detectOverflow) != null ? _platform$detectOverf : detectOverflow
|
|
5016
|
-
},
|
|
5014
|
+
platform: platformWithDetectOverflow,
|
|
5017
5015
|
elements: {
|
|
5018
5016
|
reference,
|
|
5019
5017
|
floating
|
|
@@ -5021,14 +5019,11 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
5021
5019
|
});
|
|
5022
5020
|
x = nextX != null ? nextX : x;
|
|
5023
5021
|
y = nextY != null ? nextY : y;
|
|
5024
|
-
middlewareData = {
|
|
5025
|
-
...middlewareData,
|
|
5026
|
-
|
|
5027
|
-
...middlewareData[name],
|
|
5028
|
-
...data
|
|
5029
|
-
}
|
|
5022
|
+
middlewareData[name] = {
|
|
5023
|
+
...middlewareData[name],
|
|
5024
|
+
...data
|
|
5030
5025
|
};
|
|
5031
|
-
if (reset && resetCount
|
|
5026
|
+
if (reset && resetCount < MAX_RESET_COUNT) {
|
|
5032
5027
|
resetCount++;
|
|
5033
5028
|
if (typeof reset === 'object') {
|
|
5034
5029
|
if (reset.placement) {
|
|
@@ -5483,7 +5478,6 @@ function isShadowRoot(value) {
|
|
|
5483
5478
|
}
|
|
5484
5479
|
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
5485
5480
|
}
|
|
5486
|
-
const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
|
|
5487
5481
|
function isOverflowElement(element) {
|
|
5488
5482
|
const {
|
|
5489
5483
|
overflow,
|
|
@@ -5491,32 +5485,35 @@ function isOverflowElement(element) {
|
|
|
5491
5485
|
overflowY,
|
|
5492
5486
|
display
|
|
5493
5487
|
} = getComputedStyle$1(element);
|
|
5494
|
-
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) &&
|
|
5488
|
+
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
|
|
5495
5489
|
}
|
|
5496
|
-
const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
|
|
5497
5490
|
function isTableElement(element) {
|
|
5498
|
-
return
|
|
5491
|
+
return /^(table|td|th)$/.test(getNodeName(element));
|
|
5499
5492
|
}
|
|
5500
|
-
const topLayerSelectors = [':popover-open', ':modal'];
|
|
5501
5493
|
function isTopLayer(element) {
|
|
5502
|
-
|
|
5503
|
-
|
|
5504
|
-
return
|
|
5505
|
-
} catch (_e) {
|
|
5506
|
-
return false;
|
|
5494
|
+
try {
|
|
5495
|
+
if (element.matches(':popover-open')) {
|
|
5496
|
+
return true;
|
|
5507
5497
|
}
|
|
5508
|
-
})
|
|
5498
|
+
} catch (_e) {
|
|
5499
|
+
// no-op
|
|
5500
|
+
}
|
|
5501
|
+
try {
|
|
5502
|
+
return element.matches(':modal');
|
|
5503
|
+
} catch (_e) {
|
|
5504
|
+
return false;
|
|
5505
|
+
}
|
|
5509
5506
|
}
|
|
5510
|
-
const
|
|
5511
|
-
const
|
|
5512
|
-
const
|
|
5507
|
+
const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
|
|
5508
|
+
const containRe = /paint|layout|strict|content/;
|
|
5509
|
+
const isNotNone = value => !!value && value !== 'none';
|
|
5510
|
+
let isWebKitValue;
|
|
5513
5511
|
function isContainingBlock(elementOrCss) {
|
|
5514
|
-
const webkit = isWebKit();
|
|
5515
5512
|
const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
|
|
5516
5513
|
|
|
5517
5514
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
5518
5515
|
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
|
5519
|
-
return
|
|
5516
|
+
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 || '');
|
|
5520
5517
|
}
|
|
5521
5518
|
function getContainingBlock(element) {
|
|
5522
5519
|
let currentNode = getParentNode(element);
|
|
@@ -5531,12 +5528,13 @@ function getContainingBlock(element) {
|
|
|
5531
5528
|
return null;
|
|
5532
5529
|
}
|
|
5533
5530
|
function isWebKit() {
|
|
5534
|
-
if (
|
|
5535
|
-
|
|
5531
|
+
if (isWebKitValue == null) {
|
|
5532
|
+
isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
|
|
5533
|
+
}
|
|
5534
|
+
return isWebKitValue;
|
|
5536
5535
|
}
|
|
5537
|
-
const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
|
|
5538
5536
|
function isLastTraversableNode(node) {
|
|
5539
|
-
return
|
|
5537
|
+
return /^(html|body|#document)$/.test(getNodeName(node));
|
|
5540
5538
|
}
|
|
5541
5539
|
function getComputedStyle$1(element) {
|
|
5542
5540
|
return getWindow(element).getComputedStyle(element);
|
|
@@ -5592,8 +5590,9 @@ function getOverflowAncestors(node, list, traverseIframes) {
|
|
|
5592
5590
|
if (isBody) {
|
|
5593
5591
|
const frameElement = getFrameElement(win);
|
|
5594
5592
|
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
|
5593
|
+
} else {
|
|
5594
|
+
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
5595
5595
|
}
|
|
5596
|
-
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
5597
5596
|
}
|
|
5598
5597
|
function getFrameElement(win) {
|
|
5599
5598
|
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
|
@@ -6429,7 +6428,7 @@ const CatDatepickerFlat = class {
|
|
|
6429
6428
|
}
|
|
6430
6429
|
render() {
|
|
6431
6430
|
return [
|
|
6432
|
-
index.h("cat-input", { key: '
|
|
6431
|
+
index.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 => {
|
|
6433
6432
|
e.stopPropagation();
|
|
6434
6433
|
this.value = e.detail || undefined;
|
|
6435
6434
|
}, onCatFocus: e => {
|
|
@@ -6438,8 +6437,8 @@ const CatDatepickerFlat = class {
|
|
|
6438
6437
|
}, onCatBlur: e => {
|
|
6439
6438
|
e.stopPropagation();
|
|
6440
6439
|
this.catBlur.emit(e.detail);
|
|
6441
|
-
} }, this.hasSlottedLabel && (index.h("span", { key: '
|
|
6442
|
-
index.h("div", { key: '
|
|
6440
|
+
} }, this.hasSlottedLabel && (index.h("span", { key: 'aedecd1ff7f34f8f038df57c3fb42bdd3282273e', slot: "label" }, index.h("slot", { key: 'a86b6a3bd04da7fde60ddb19df4142e9ff39c0fe', name: "label" }))), this.hasSlottedHint && (index.h("span", { key: '70f4739871308bcd4fa88e265a2ec5c8e5eeff35', slot: "hint" }, index.h("slot", { key: '8cc4b602ae9064da5816653ca2dfb918329e26d3', name: "hint" })))),
|
|
6441
|
+
index.h("div", { key: 'abc43645698cf1b209598f8a34432d6be0c9e519', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
|
|
6443
6442
|
];
|
|
6444
6443
|
}
|
|
6445
6444
|
initDatepicker(input) {
|
|
@@ -6549,11 +6548,11 @@ const CatDatepickerInline = class {
|
|
|
6549
6548
|
this.pickr = this.initDatepicker(this.input);
|
|
6550
6549
|
}
|
|
6551
6550
|
render() {
|
|
6552
|
-
return (index.h(index.Host, { key: '
|
|
6551
|
+
return (index.h(index.Host, { key: '3a51929cf5486122309a0949df55b414bfa83462' }, index.h("div", { key: 'ad94b1019c6013d04af429702d23d996927567a9', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
|
|
6553
6552
|
'datepicker-wrapper': true,
|
|
6554
6553
|
'datepicker-disabled': this.disabled,
|
|
6555
6554
|
'datepicker-readonly': this.readonly
|
|
6556
|
-
} }, index.h("input", { key: '
|
|
6555
|
+
} }, index.h("input", { key: '0edefcd24538d19c49fb57eab6cb4ed5a19f22ce', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
|
|
6557
6556
|
}
|
|
6558
6557
|
initDatepicker(input) {
|
|
6559
6558
|
if (!input) {
|
|
@@ -7679,7 +7678,7 @@ const CatDropdown = class {
|
|
|
7679
7678
|
this.noInitialFocus = false;
|
|
7680
7679
|
/**
|
|
7681
7680
|
* Trigger element will not receive focus when dropdown is closed.
|
|
7682
|
-
*
|
|
7681
|
+
* Please use this property carefully, consider using cat-menu over using this property
|
|
7683
7682
|
*/
|
|
7684
7683
|
this.noReturnFocus = false;
|
|
7685
7684
|
/**
|
|
@@ -7693,6 +7692,9 @@ const CatDropdown = class {
|
|
|
7693
7692
|
* @internal
|
|
7694
7693
|
*/
|
|
7695
7694
|
this.focusTrap = true;
|
|
7695
|
+
this.boundWindowClickListener = this.windowClickListener.bind(this);
|
|
7696
|
+
this.boundWindowMousedownListener = this.windowMousedownListener.bind(this);
|
|
7697
|
+
this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);
|
|
7696
7698
|
}
|
|
7697
7699
|
/**
|
|
7698
7700
|
* Whether the dropdown is open.
|
|
@@ -7714,6 +7716,7 @@ const CatDropdown = class {
|
|
|
7714
7716
|
path.includes(this.content) &&
|
|
7715
7717
|
// check if click was not on a trigger for a sub-dropdown
|
|
7716
7718
|
event.target?.slot !== 'trigger' &&
|
|
7719
|
+
!event.target.subMenu &&
|
|
7717
7720
|
// check if click was not an element marked with data-dropdown-no-close
|
|
7718
7721
|
!path.slice(0, path.indexOf(this.content)).find(el => this.hasAttribute(el, 'data-dropdown-no-close'))) {
|
|
7719
7722
|
this.close();
|
|
@@ -7724,15 +7727,14 @@ const CatDropdown = class {
|
|
|
7724
7727
|
this.close();
|
|
7725
7728
|
}
|
|
7726
7729
|
}
|
|
7727
|
-
|
|
7728
|
-
|
|
7729
|
-
|
|
7730
|
-
|
|
7731
|
-
|
|
7732
|
-
|
|
7733
|
-
|
|
7734
|
-
|
|
7735
|
-
}
|
|
7730
|
+
windowClickListener(event) {
|
|
7731
|
+
this.handleClickOutside(event);
|
|
7732
|
+
}
|
|
7733
|
+
windowMousedownListener(event) {
|
|
7734
|
+
this.handleClickOutside(event);
|
|
7735
|
+
}
|
|
7736
|
+
windowTouchStartListener(event) {
|
|
7737
|
+
this.handleClickOutside(event);
|
|
7736
7738
|
}
|
|
7737
7739
|
/**
|
|
7738
7740
|
* Toggles the dropdown.
|
|
@@ -7769,8 +7771,10 @@ const CatDropdown = class {
|
|
|
7769
7771
|
: createFocusTrap(this.content, {
|
|
7770
7772
|
tabbableOptions: this.tabbableOptions,
|
|
7771
7773
|
allowOutsideClick: true,
|
|
7774
|
+
clickOutsideDeactivates: event => this.shouldCloseByClickEvent(event),
|
|
7775
|
+
onPostDeactivate: () => this.close(),
|
|
7772
7776
|
onPostActivate: () => this.catOpen.emit(),
|
|
7773
|
-
setReturnFocus: elem => (!this.isFocusVisible ? false : this.trigger || elem),
|
|
7777
|
+
setReturnFocus: elem => (!this.isFocusVisible || this.noReturnFocus ? false : this.trigger || elem),
|
|
7774
7778
|
isKeyForward: event => {
|
|
7775
7779
|
if ((this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||
|
|
7776
7780
|
(this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')) {
|
|
@@ -7794,6 +7798,7 @@ const CatDropdown = class {
|
|
|
7794
7798
|
this.trap.activate();
|
|
7795
7799
|
}
|
|
7796
7800
|
else {
|
|
7801
|
+
this.addListeners();
|
|
7797
7802
|
this.catOpen.emit();
|
|
7798
7803
|
}
|
|
7799
7804
|
});
|
|
@@ -7812,6 +7817,7 @@ const CatDropdown = class {
|
|
|
7812
7817
|
if (shouldReturnFocus) {
|
|
7813
7818
|
this.trigger?.focus();
|
|
7814
7819
|
}
|
|
7820
|
+
this.removeListeners();
|
|
7815
7821
|
// give CSS transition time to apply
|
|
7816
7822
|
setTimeout(() => {
|
|
7817
7823
|
this._isOpen = false;
|
|
@@ -7836,7 +7842,29 @@ const CatDropdown = class {
|
|
|
7836
7842
|
this.cleanupFloatingUi = undefined;
|
|
7837
7843
|
}
|
|
7838
7844
|
render() {
|
|
7839
|
-
return (index.h(index.Host, { key: '
|
|
7845
|
+
return (index.h(index.Host, { key: 'bd6c2271fbd5a3f9222cb9eb8c59d7113dc72c7a' }, index.h("slot", { key: '26b1d2b753fffa0f91c8ee505209c46880e9233b', name: "anchor", ref: el => (this.anchorSlot = el) }), index.h("slot", { key: 'ac3b213022083bdb89edf4583cc216a5308bb1d2', name: "trigger", ref: el => (this.triggerSlot = el) }), index.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) }, index.h("slot", { key: '1bbcaa8a86c2726e61aff6236e01b3f4ac6004e9', name: "content" }))));
|
|
7846
|
+
}
|
|
7847
|
+
addListeners() {
|
|
7848
|
+
window.addEventListener('click', this.boundWindowClickListener);
|
|
7849
|
+
window.addEventListener('mousedown', this.boundWindowMousedownListener);
|
|
7850
|
+
window.addEventListener('touchstart', this.boundWindowTouchStartListener);
|
|
7851
|
+
}
|
|
7852
|
+
removeListeners() {
|
|
7853
|
+
window.removeEventListener('click', this.boundWindowClickListener);
|
|
7854
|
+
window.removeEventListener('mousedown', this.boundWindowMousedownListener);
|
|
7855
|
+
window.removeEventListener('touchstart', this.boundWindowTouchStartListener);
|
|
7856
|
+
}
|
|
7857
|
+
handleClickOutside(event) {
|
|
7858
|
+
if (this.shouldCloseByClickEvent(event)) {
|
|
7859
|
+
this.close();
|
|
7860
|
+
}
|
|
7861
|
+
}
|
|
7862
|
+
shouldCloseByClickEvent(event) {
|
|
7863
|
+
return (!this.noAutoClose &&
|
|
7864
|
+
// check if click was outside of the dropdown content
|
|
7865
|
+
!event.composedPath().includes(this.content) &&
|
|
7866
|
+
// check if click was not on an element marked with data-dropdown-no-close
|
|
7867
|
+
!event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close')));
|
|
7840
7868
|
}
|
|
7841
7869
|
get contentId() {
|
|
7842
7870
|
return `cat-dropdown-${this.id}`;
|
|
@@ -7972,7 +8000,7 @@ const CatFormGroup = class {
|
|
|
7972
8000
|
});
|
|
7973
8001
|
}
|
|
7974
8002
|
render() {
|
|
7975
|
-
return (index.h(index.Host, { key: '
|
|
8003
|
+
return (index.h(index.Host, { key: 'cb3ed29df264b00c7740a97558ef5283a018c0c4', style: { '--label-size': this.labelSize } }, index.h("slot", { key: 'da29f356a770a8c5abc99719353e76ea565bf483', onSlotchange: this.onSlotChange.bind(this) })));
|
|
7976
8004
|
}
|
|
7977
8005
|
onSlotChange() {
|
|
7978
8006
|
this.formElements = Array.from(this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker, cat-date, cat-time'));
|
|
@@ -8003,7 +8031,7 @@ const CatIcon = class {
|
|
|
8003
8031
|
this.size = 'm';
|
|
8004
8032
|
}
|
|
8005
8033
|
render() {
|
|
8006
|
-
return (index.h("span", { key: '
|
|
8034
|
+
return (index.h("span", { key: '7d03b1a8d0443200d1daf1a77c14ed4d75a2f74e', innerHTML: this.iconSrc || (this.icon ? index$1.catIconRegistry.getIcon(this.icon) : ''), "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', part: "icon", class: {
|
|
8007
8035
|
icon: true,
|
|
8008
8036
|
[`icon-${this.size}`]: this.size !== 'inline'
|
|
8009
8037
|
} }));
|
|
@@ -8329,10 +8357,10 @@ const CatMenu = class {
|
|
|
8329
8357
|
}
|
|
8330
8358
|
getDeepActiveElement() {
|
|
8331
8359
|
let active = document.activeElement;
|
|
8332
|
-
while (active?.shadowRoot?.activeElement
|
|
8360
|
+
while (active?.shadowRoot?.activeElement) {
|
|
8333
8361
|
active = active.shadowRoot.activeElement;
|
|
8334
8362
|
}
|
|
8335
|
-
return active;
|
|
8363
|
+
return active ? (findClosest('cat-menu-item', active) ?? active) : null;
|
|
8336
8364
|
}
|
|
8337
8365
|
onDocumentKeydown(event) {
|
|
8338
8366
|
const navigationKeys = this.arrowNavigation === 'horizontal'
|
|
@@ -8400,10 +8428,10 @@ const CatMenu = class {
|
|
|
8400
8428
|
this.catMenuItems = Array.from(this.hostElement.querySelectorAll('cat-menu-item'));
|
|
8401
8429
|
}
|
|
8402
8430
|
render() {
|
|
8403
|
-
return (index.h(index.Host, { key: '
|
|
8431
|
+
return (index.h(index.Host, { key: '477d279400f05909efb6d3893ad3832383b0b1f1' }, index.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() }, index.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: {
|
|
8404
8432
|
...this.triggerNativeAttributes,
|
|
8405
8433
|
'aria-haspopup': 'menu'
|
|
8406
|
-
}, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && index.h("slot", { key: '
|
|
8434
|
+
}, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && index.h("slot", { key: 'f688c20ef06f986a2fec549e524a9293e40bb362', name: "trigger-label" }, this.triggerLabel)), index.h("nav", { key: 'f257a0cc30a58b63f6cc073a24fe56018d029ed8', role: "menu", slot: "content", class: "cat-menu-list", "aria-orientation": this.arrowNavigation }, index.h("ul", { key: '127a61cbf0958eb7bd6f7edcb4bec923e0f9491c' }, index.h("slot", { key: 'ec19aade8956369dc02f7f7aa08401955ed3b358' }))))));
|
|
8407
8435
|
}
|
|
8408
8436
|
get hostElement() { return index.getElement(this); }
|
|
8409
8437
|
};
|
|
@@ -8435,10 +8463,14 @@ const CatMenuItem = class {
|
|
|
8435
8463
|
* Specifies that the menu item should be disabled.
|
|
8436
8464
|
*/
|
|
8437
8465
|
this.disabled = false;
|
|
8466
|
+
this.subMenu = false;
|
|
8438
8467
|
}
|
|
8439
8468
|
get id() {
|
|
8440
8469
|
return this.identifier || this._id;
|
|
8441
8470
|
}
|
|
8471
|
+
onClick(event) {
|
|
8472
|
+
this.catClick.emit(event);
|
|
8473
|
+
}
|
|
8442
8474
|
/**
|
|
8443
8475
|
* Programmatically move focus to the menu item.
|
|
8444
8476
|
*/
|
|
@@ -8452,14 +8484,14 @@ const CatMenuItem = class {
|
|
|
8452
8484
|
this.button?.doBlur();
|
|
8453
8485
|
}
|
|
8454
8486
|
render() {
|
|
8455
|
-
return (index.h(index.Host, { key: '
|
|
8487
|
+
return (index.h(index.Host, { key: 'ff1abf6c6d74fc9d0bbc7491d64e0ad3373f6899' }, index.h("li", { key: '45089d058d664822cb67bc7bbf802b06333c351e' }, index.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: {
|
|
8456
8488
|
...this.nativeAttributes,
|
|
8457
8489
|
role: 'menuitem',
|
|
8458
8490
|
tabindex: '-1'
|
|
8459
|
-
}, onCatClick: this.
|
|
8491
|
+
}, onCatClick: event => this.click(event) }, index.h("slot", { key: '49bc9f6cc4a5ed1293e261cefb67351342b805fb' })))));
|
|
8460
8492
|
}
|
|
8461
|
-
|
|
8462
|
-
|
|
8493
|
+
click(event) {
|
|
8494
|
+
event.stopPropagation();
|
|
8463
8495
|
}
|
|
8464
8496
|
};
|
|
8465
8497
|
|