@haiilo/catalyst 14.3.0 → 14.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/catalyst/catalyst.css +15 -4
- package/dist/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/index.cdn.js +1 -0
- package/dist/catalyst/{p-CFGROHMy.js → p-7uZgmxXB.js} +2 -2
- package/dist/catalyst/p-7uZgmxXB.js.map +1 -0
- package/dist/catalyst/p-fb92a2f1.entry.js +10 -0
- package/dist/catalyst/p-fb92a2f1.entry.js.map +1 -0
- package/dist/catalyst/scss/core/_nav.scss +2 -1
- package/dist/catalyst/scss/core/sanitize-overwrite.scss +3 -0
- package/dist/catalyst/scss/index.scss +1 -0
- package/dist/cjs/{cat-alert_30.cjs.entry.js → cat-alert_32.cjs.entry.js} +346 -103
- package/dist/cjs/catalyst.cjs.js +2 -2
- package/dist/cjs/{index-B8-TCsLD.js → index-Ddad39qn.js} +7 -4
- package/dist/cjs/index-Ddad39qn.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +3 -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 +9 -2
- package/dist/collection/components/cat-button/cat-button.js +26 -1
- 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 +116 -47
- package/dist/collection/components/cat-dropdown/cat-dropdown.js.map +1 -1
- package/dist/collection/components/cat-menu/cat-menu.css +9 -0
- package/dist/collection/components/cat-menu/cat-menu.js +652 -0
- package/dist/collection/components/cat-menu/cat-menu.js.map +1 -0
- package/dist/collection/components/cat-menu-item/cat-menu-item.js +387 -0
- package/dist/collection/components/cat-menu-item/cat-menu-item.js.map +1 -0
- package/dist/collection/components/cat-pagination/cat-pagination.js +2 -2
- package/dist/collection/components/cat-pagination/cat-pagination.js.map +1 -1
- package/dist/collection/components/cat-radio/cat-radio.js +2 -2
- package/dist/collection/components/cat-radio-group/cat-radio-group.js +1 -1
- package/dist/collection/components/cat-scrollable/cat-scrollable.js +3 -3
- package/dist/collection/components/cat-select/cat-select.js +14 -18
- package/dist/collection/components/cat-select/cat-select.js.map +1 -1
- package/dist/collection/components/cat-select-demo/cat-select-demo.js +1 -1
- package/dist/collection/components/cat-skeleton/cat-skeleton.js +1 -1
- package/dist/collection/components/cat-spinner/cat-spinner.js +2 -2
- package/dist/collection/components/cat-tab/cat-tab.js +1 -1
- package/dist/collection/components/cat-tabs/cat-tabs.js +1 -1
- package/dist/collection/components/cat-tag/cat-tag.js +1 -1
- package/dist/collection/components/cat-textarea/cat-textarea.js +3 -3
- package/dist/collection/components/cat-time/cat-time.css +0 -9
- package/dist/collection/components/cat-time/cat-time.js +4 -5
- package/dist/collection/components/cat-time/cat-time.js.map +1 -1
- package/dist/collection/components/cat-toggle/cat-toggle.js +2 -2
- package/dist/collection/index.cdn.js +1 -0
- package/dist/collection/index.js.map +1 -1
- package/dist/collection/scss/core/_nav.scss +2 -1
- package/dist/collection/scss/core/sanitize-overwrite.scss +3 -0
- package/dist/collection/scss/index.scss +1 -0
- 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 +8 -2
- 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 +69 -44
- package/dist/components/cat-dropdown2.js.map +1 -1
- package/dist/components/cat-menu-item.d.ts +11 -0
- package/dist/components/cat-menu-item.js +9 -0
- package/dist/components/cat-menu-item.js.map +1 -0
- package/dist/components/cat-menu-item2.js +111 -0
- package/dist/components/cat-menu-item2.js.map +1 -0
- package/dist/components/cat-menu.d.ts +11 -0
- package/dist/components/cat-menu.js +9 -0
- package/dist/components/cat-menu.js.map +1 -0
- package/dist/components/cat-menu2.js +227 -0
- package/dist/components/cat-menu2.js.map +1 -0
- package/dist/components/cat-pagination.js +2 -2
- package/dist/components/cat-pagination.js.map +1 -1
- package/dist/components/cat-radio-group.js +1 -1
- package/dist/components/cat-radio.js +2 -2
- package/dist/components/cat-scrollable2.js +3 -3
- package/dist/components/cat-select-demo.js +1 -1
- package/dist/components/cat-select2.js +5 -5
- package/dist/components/cat-select2.js.map +1 -1
- package/dist/components/cat-skeleton2.js +1 -1
- package/dist/components/cat-spinner2.js +2 -2
- package/dist/components/cat-tab.js +1 -1
- package/dist/components/cat-tabs.js +1 -1
- package/dist/components/cat-tag.js +1 -1
- package/dist/components/cat-textarea.js +3 -3
- package/dist/components/cat-time.js +25 -14
- package/dist/components/cat-time.js.map +1 -1
- package/dist/components/cat-toggle.js +2 -2
- package/dist/esm/{cat-alert_30.entry.js → cat-alert_32.entry.js} +345 -104
- package/dist/esm/catalyst.js +3 -3
- package/dist/esm/{index-CFGROHMy.js → index-7uZgmxXB.js} +7 -4
- package/dist/esm/index-7uZgmxXB.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/types/components/cat-button/cat-button.d.ts +4 -0
- package/dist/types/components/cat-dropdown/cat-dropdown.d.ts +14 -2
- package/dist/types/components/cat-menu/cat-menu.d.ts +124 -0
- package/dist/types/components/cat-menu-item/cat-menu-item.d.ts +80 -0
- package/dist/types/components/cat-select/cat-select.d.ts +3 -2
- package/dist/types/components.d.ts +426 -7
- package/dist/types/index.d.ts +2 -1
- package/package.json +2 -2
- package/dist/catalyst/p-0df8aaa1.entry.js +0 -10
- package/dist/catalyst/p-0df8aaa1.entry.js.map +0 -1
- package/dist/catalyst/p-CFGROHMy.js.map +0 -1
- package/dist/cjs/index-B8-TCsLD.js.map +0 -1
- package/dist/esm/index-CFGROHMy.js.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-Ddad39qn.js');
|
|
4
4
|
var index$1 = require('./index-CgyHmlOr.js');
|
|
5
5
|
|
|
6
6
|
function setAttributeDefault(host, attr, value) {
|
|
@@ -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: '69fa5ac520b7473f3e64c7aa08f1f706a0e84777' }, !this.noIcon && index.h("cat-icon", { key: '6350faf2c7748f5366040eb861b999adb094f746', size: "l", icon: this.icon || this.mapIcon.get(this.color) }), index.h("div", { key: '566add2aa7d14f4118104a1f1ed43ae7600cd0b0', class: "content" }, index.h("slot", { key: '18cb577bd42e5386ddac4a6226426bcab9260415' }))));
|
|
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: 'b11c4ad289bf67783fe98e9e6b9ac0d390fc9cdb', "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-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-style:var(--cat-link-button-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration-style: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.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}";
|
|
351
351
|
|
|
352
352
|
const CatButton = class {
|
|
353
353
|
constructor(hostRef) {
|
|
@@ -396,6 +396,10 @@ 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;
|
|
399
403
|
/**
|
|
400
404
|
* Hide the actual button content and only display the icon.
|
|
401
405
|
*/
|
|
@@ -475,7 +479,8 @@ const CatButton = class {
|
|
|
475
479
|
'cat-button-round': this.round,
|
|
476
480
|
'cat-button-loading': this.loading,
|
|
477
481
|
'cat-button-disabled': this.disabled,
|
|
478
|
-
'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,
|
|
482
|
+
'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton && !this.inline,
|
|
483
|
+
'cat-button-inline': this.inline,
|
|
479
484
|
[`cat-button-${this.variant}`]: Boolean(this.variant),
|
|
480
485
|
[`cat-button-${this.color}`]: Boolean(this.color),
|
|
481
486
|
[`cat-button-${this.size}`]: Boolean(this.size),
|
|
@@ -557,7 +562,7 @@ const CatButtonGroup = class {
|
|
|
557
562
|
this.buttonElements = [];
|
|
558
563
|
}
|
|
559
564
|
render() {
|
|
560
|
-
return (index.h(index.Host, { key: '
|
|
565
|
+
return (index.h(index.Host, { key: '3bf39dc84ed4e47a328927f937eb956ace5f6f71', role: "group", "aria-label": this.a11yLabel }, index.h("slot", { key: '843ae7ed619e04239a405250cd83f83e694bfde9', onSlotchange: this.onSlotChange.bind(this) })));
|
|
561
566
|
}
|
|
562
567
|
onSlotChange() {
|
|
563
568
|
this.buttonElements = Array.from(this.hostElement.querySelectorAll(':scope > cat-button, :scope > cat-tooltip > cat-button, :scope > cat-dropdown cat-button[slot="trigger"]'));
|
|
@@ -578,7 +583,7 @@ const CatCard = class {
|
|
|
578
583
|
this.catLoad = index.createEvent(this, "catLoad");
|
|
579
584
|
}
|
|
580
585
|
render() {
|
|
581
|
-
return index.h("slot", { key: '
|
|
586
|
+
return index.h("slot", { key: '462ccb0dce9a3bb536ff1f69caf8a04c02565344' });
|
|
582
587
|
}
|
|
583
588
|
componentDidLoad() {
|
|
584
589
|
this.catLoad.emit();
|
|
@@ -606,7 +611,7 @@ const CatFormHint = props => {
|
|
|
606
611
|
|
|
607
612
|
const catCheckboxCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.input-field:not(.input-horizontal) .label-container.hidden,.textarea-field:not(.textarea-horizontal) .label-container.hidden,.select-field:not(.select-horizontal) .label-container.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-container{flex-basis:var(--label-size, 33.33%)}.label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.label-optional,.label-character-count{display:inline-flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem}.label-character-count{margin-left:auto}.input-horizontal .label-container.hidden label,.textarea-horizontal .label-container.hidden label,.select-horizontal .label-container.hidden label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper,.select-horizontal .label-wrapper{flex-direction:column}.input-horizontal .label-container,.textarea-horizontal .label-container,.select-horizontal .label-container{flex-shrink:0}.input-horizontal label,.textarea-horizontal label,.select-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata,.select-horizontal .label-metadata{justify-content:flex-start}.input-horizontal .label-metadata .label-character-count,.textarea-horizontal .label-metadata .label-character-count,.select-horizontal .label-metadata .label-character-count{margin-left:0}:host{display:flex;flex-direction:column;gap:0.25rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative}.label-left{flex-direction:row-reverse}.label-left input{right:1px;left:unset}input{position:absolute;width:1.25rem;height:1.25rem;margin:0;opacity:0;cursor:inherit;left:1px;top:0.5px}.box-placeholder{width:1.25rem;flex-shrink:0}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));border-radius:var(--cat-border-radius-s, 0.125rem);transition:background-color 125ms ease, border-color 125ms ease;pointer-events:none;box-sizing:border-box}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 125ms ease;width:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .check{stroke-dashoffset:16px}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.is-disabled .box{background-color:#f2f4f7;border-color:rgb(var(--cat-border-color-dark, 215, 219, 224));stroke:rgb(var(--cat-font-color-muted, 81, 92, 108))}:host(.cat-error) .box{border:1px solid rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) :checked+.box,:host(.cat-error) :indeterminate+.box{background-color:rgb(var(--cat-danger-bg, 217, 52, 13));border-color:rgb(var(--cat-danger-bg, 217, 52, 13));stroke:rgb(var(--cat-danger-fill, 255, 255, 255))}.label{flex:1 1 auto;min-width:0}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.align-center{align-items:center}.align-end{align-items:flex-end}";
|
|
608
613
|
|
|
609
|
-
let nextUniqueId$
|
|
614
|
+
let nextUniqueId$b = 0;
|
|
610
615
|
const CatCheckbox = class {
|
|
611
616
|
constructor(hostRef) {
|
|
612
617
|
index.registerInstance(this, hostRef);
|
|
@@ -620,7 +625,7 @@ const CatCheckbox = class {
|
|
|
620
625
|
this.internals = hostRef.$hostElement$.attachInternals();
|
|
621
626
|
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
622
627
|
}
|
|
623
|
-
this._id = `cat-checkbox-${nextUniqueId$
|
|
628
|
+
this._id = `cat-checkbox-${nextUniqueId$b++}`;
|
|
624
629
|
this.hasSlottedLabel = false;
|
|
625
630
|
this.hasSlottedHint = false;
|
|
626
631
|
/**
|
|
@@ -694,13 +699,13 @@ const CatCheckbox = class {
|
|
|
694
699
|
this.input.blur();
|
|
695
700
|
}
|
|
696
701
|
render() {
|
|
697
|
-
return (index.h(index.Host, { key: '
|
|
702
|
+
return (index.h(index.Host, { key: 'eb33a26363bc39edc83c1b1312c85f805e8e3894' }, index.h("label", { key: 'f8094c4c8859d30a4fe6096efad161a4503b2896', htmlFor: this.id, class: {
|
|
698
703
|
'is-hidden': this.labelHidden,
|
|
699
704
|
'is-disabled': this.disabled,
|
|
700
705
|
'label-left': this.labelLeft,
|
|
701
706
|
'align-center': this.alignment === 'center',
|
|
702
707
|
'align-end': this.alignment === 'bottom'
|
|
703
|
-
} }, index.h("input", { key: '
|
|
708
|
+
} }, index.h("input", { key: '02c15b7985af4252f45ff04ebd977e3c09883949', "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: 'b4a30c339f54ab5ae1b7f9e31f6d0c409c6c2613', class: "box", "aria-hidden": "true" }, index.h("svg", { key: 'e3d0faed8b2d2d59fab9b8a2c011dd4d6aa5b338', class: "check", viewBox: "0 0 12 10" }, index.h("polyline", { key: '7f1d041823ce9ed4c4b1496b61de9c5767979ff7', points: "1.5 6 4.5 9 10.5 1" })), index.h("svg", { key: 'dd636bd06ab6cf5918edaacb63091d9eb09ae0af', class: "dash", viewBox: "0 0 12 10" }, index.h("polyline", { key: 'b46f113aae6d0e8e3bb5cd1a2740a7d7422ea749', points: "1.5 5 10.5 5" }))), index.h("span", { key: 'c0266346a2d7b22f8e18dba57737cd098217b08a', class: { label: true, 'label-wrapper': !this.hasSlottedLabel }, part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: '2416235aa2a02df58f4d96337215725e426a729a', name: "label" })) || this.label, index.h("span", { key: '4da54bdb128f377225732f2c7d69bf205d5098c1', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '70b0dfdf0c4210394a09adb83866d6566a1df025', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'a49f720ae915fd3054748184d89fbe9c784cc730', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.required'), ")"))))), this.hasHint && (index.h("div", { key: '10630551393491643e19ff001840aed935f78645', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: 'f4236a3a4c2f573bcd77311ed009e4d09ffb73af', class: "box-placeholder" }), index.h(CatFormHint, { key: '85c1227154f23e6e52a36fe7184fcb1ab999160e', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
|
|
704
709
|
}
|
|
705
710
|
get hasHint() {
|
|
706
711
|
return !!this.hint || !!this.hasSlottedHint;
|
|
@@ -937,14 +942,14 @@ const CatDate = class {
|
|
|
937
942
|
}
|
|
938
943
|
render() {
|
|
939
944
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
940
|
-
return (index.h(index.Host, { key: '
|
|
945
|
+
return (index.h(index.Host, { key: '664187eb3780f94f61b463088cf6a056a3107af5' }, index.h("cat-input", { key: '42e6d9c9edff8a699c81d98873164eb755aeaeab', 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 => {
|
|
941
946
|
this.inputFocused = e.target === this.input;
|
|
942
947
|
e.stopPropagation();
|
|
943
948
|
this.catFocus.emit(e.detail);
|
|
944
949
|
}, onCatBlur: e => {
|
|
945
950
|
e.stopPropagation();
|
|
946
951
|
this.onInputBlur(e.detail);
|
|
947
|
-
} }, index.h("span", { key: '
|
|
952
|
+
} }, index.h("span", { key: '36b14afb75c694a1559e4b5539a2bde0be1f59bc', slot: "label" }, this.label, index.h("span", { key: 'f541147e5515a679db3adcf4c93c52514b9c9cb3', class: "label-aria" }, " (", this.locale.formatStr, ")")), index.h("cat-dropdown", { key: '5a73b806ed95c3c6367a5b74d764b31cba4ded92', slot: "addon", placement: this.placement, arrowNavigation: "none", noResize: true, onCatOpen: () => this.dateInline?.resetView() }, index.h("cat-button", { key: 'ae9da7387e3baf2b1989c9b5d5c9b82d30257c69', slot: "trigger", icon: "$cat:datepicker-calendar", iconOnly: true, class: "cat-date-toggle", disabled: this.disabled, a11yLabel: this.getTriggerA11yLabel() }), index.h("div", { key: 'b255073bb1ce8e57def9f61c1b347880f9115533', slot: "content" }, index.h("cat-date-inline", { key: '07e019b2872994198e8cb56a54e12e24b2cb81a4', 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) }))))));
|
|
948
953
|
}
|
|
949
954
|
getTriggerA11yLabel() {
|
|
950
955
|
const date = this.locale.fromLocalISO(this.value);
|
|
@@ -1597,12 +1602,12 @@ const firstTabbable = (container) => {
|
|
|
1597
1602
|
|
|
1598
1603
|
const catDateInlineCss = "/**\n * Auto-generated file. Do not edit directly.\n */\n/* stylelint-disable value-keyword-case */\n/* stylelint-enable value-keyword-case */\n.label {\n overflow: hidden;\n word-wrap: break-word;\n word-break: break-word;\n}\n\n.input-field:not(.input-horizontal) .label-container.hidden,\n.textarea-field:not(.textarea-horizontal) .label-container.hidden,\n.select-field:not(.select-horizontal) .label-container.hidden {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n\n.label-container {\n flex-basis: var(--label-size, 33.33%);\n}\n\n.label-wrapper {\n display: flex;\n gap: 0.25rem;\n}\n\n.label-metadata {\n display: flex;\n flex-shrink: 0;\n flex-grow: 1;\n justify-content: space-between;\n gap: 0.25rem;\n color: rgb(var(--cat-font-color-muted, 81, 92, 108));\n}\n\n.label-optional,\n.label-character-count {\n display: inline-flex;\n align-items: center;\n max-height: 1.25rem;\n font-size: 0.75rem;\n line-height: 1rem;\n}\n\n.label-character-count {\n margin-left: auto;\n}\n\n.input-horizontal .label-container.hidden label,\n.textarea-horizontal .label-container.hidden label,\n.select-horizontal .label-container.hidden label {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n.input-horizontal .label-wrapper,\n.textarea-horizontal .label-wrapper,\n.select-horizontal .label-wrapper {\n flex-direction: column;\n}\n.input-horizontal .label-container,\n.textarea-horizontal .label-container,\n.select-horizontal .label-container {\n flex-shrink: 0;\n}\n.input-horizontal label,\n.textarea-horizontal label,\n.select-horizontal label {\n min-height: 2.5rem;\n display: inline-flex;\n align-items: center;\n}\n.input-horizontal .label-metadata,\n.textarea-horizontal .label-metadata,\n.select-horizontal .label-metadata {\n justify-content: flex-start;\n}\n.input-horizontal .label-metadata .label-character-count,\n.textarea-horizontal .label-metadata .label-character-count,\n.select-horizontal .label-metadata .label-character-count {\n margin-left: 0;\n}\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.label-hidden,\n.label-container:empty {\n display: none;\n}\n\n.picker {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.picker-head {\n display: flex;\n align-items: center;\n container-type: inline-size;\n}\n.picker-head > :not(:last-child) {\n margin-right: 0.25rem;\n}\n.picker-head h3 {\n font-size: 0.9375rem;\n line-height: 1.25rem;\n font-weight: var(--cat-font-weight-head, 600);\n font-feature-settings: \"pnum\";\n flex: 1;\n text-align: center;\n margin-block: 0;\n}\n@container (min-width: 20rem) {\n .picker-head h3 {\n font-size: 1.125rem;\n line-height: 1.5rem;\n font-weight: var(--cat-font-weight-head, 600);\n font-feature-settings: \"pnum\";\n }\n .picker-head > :not(:last-child) {\n margin-right: 0.5rem;\n }\n}\n\n.picker-grid {\n display: grid;\n /* stylelint-disable declaration-block-no-redundant-longhand-properties */\n grid-template-rows: 2rem repeat(6, 1fr);\n grid-template-columns: repeat(7, 1fr);\n grid-template-areas: \"h h h h h h h\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\" \"d d d d d d d\";\n /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n}\n.picker-weeks .picker-grid {\n /* stylelint-disable declaration-block-no-redundant-longhand-properties */\n grid-template-columns: 2rem repeat(7, 1fr);\n grid-template-areas: \". h h h h h h h\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\" \"w d d d d d d d\";\n /* stylelint-enable declaration-block-no-redundant-longhand-properties */\n}\n\n.picker-grid-head {\n grid-area: h;\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n place-items: end center;\n padding-bottom: 0.5rem;\n}\n\n.picker-grid-weeks {\n grid-area: w;\n display: grid;\n grid-template-rows: repeat(6, 1fr);\n place-items: center right;\n padding-right: 0.5rem;\n}\n\n.picker-grid-days {\n grid-area: d;\n display: grid;\n grid-template-rows: repeat(6, 1fr);\n grid-template-columns: repeat(7, 1fr);\n}\n\n.picker-grid-head > *,\n.picker-grid-weeks > * {\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: 600;\n color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;\n text-decoration: none;\n}\n\n.date-other {\n opacity: 0.5;\n}\n\n.date-disabled {\n opacity: 0.25;\n}\n\n.picker-foot {\n display: flex;\n align-items: center;\n width: min-content;\n min-width: 100%;\n justify-content: space-between;\n container-type: inline-size;\n}\n.picker-foot > :not(:last-child) {\n margin-right: 0.25rem;\n}\n@container (min-width: 20rem) {\n .picker-foot > :not(:last-child) {\n margin-right: 0.5rem;\n }\n .picker-foot .cursor-help {\n font-size: 0.875rem;\n line-height: 1.125rem;\n font-weight: var(--cat-font-weight-body, 400);\n }\n}\n\n.cursor-help {\n margin-block: 0;\n font-size: 0.75rem;\n line-height: 1rem;\n font-weight: var(--cat-font-weight-body, 400);\n color: rgb(var(--cat-font-color-muted, 81, 92, 108)) !important;\n text-align: center;\n flex: 1;\n}\n.cursor-help:first-child {\n text-align: left;\n}\n.cursor-help:last-child {\n text-align: right;\n}\n.cursor-help:only-child {\n text-align: center;\n}\n\n.cursor-aria {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n\n.date-range {\n --cat-border-radius-m: 0;\n}";
|
|
1599
1604
|
|
|
1600
|
-
let nextUniqueId$
|
|
1605
|
+
let nextUniqueId$a = 0;
|
|
1601
1606
|
const CatDateInline = class {
|
|
1602
1607
|
constructor(hostRef) {
|
|
1603
1608
|
index.registerInstance(this, hostRef);
|
|
1604
1609
|
this.catChange = index.createEvent(this, "catChange");
|
|
1605
|
-
this._id = `cat-date-inline-${nextUniqueId$
|
|
1610
|
+
this._id = `cat-date-inline-${nextUniqueId$a++}`;
|
|
1606
1611
|
this.language = index$1.catI18nRegistry.getLocale();
|
|
1607
1612
|
this.locale = getLocale$2(this.language);
|
|
1608
1613
|
// additonally store the focus date to ensure correct focus after potential re-render
|
|
@@ -1768,12 +1773,12 @@ const CatDateInline = class {
|
|
|
1768
1773
|
const [minDate, maxDate] = this.getMinMaxDate();
|
|
1769
1774
|
const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
|
|
1770
1775
|
const [dateStart, dateEnd] = this.getValue();
|
|
1771
|
-
return (index.h(index.Host, { key: '
|
|
1776
|
+
return (index.h(index.Host, { key: '0f06004b6e4a37950a8933175e66694e685a254d', "aria-label": this.label || undefined }, index.h("div", { key: '50eb04ff252b57dfaca6fcd612e3f4b6defda40d', class: { 'label-container': true, 'label-hidden': this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'f19844d5b24c2dc5de7b68d4de4988593582b6c3', id: `${this.id}-label`, htmlFor: this.id, part: "label", onClick: () => this.doFocus() }, index.h("span", { key: 'c5fd299ba527527ad4025d28fa3e74f7daba201f', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'b20d1bd0440adac6f5c32e7cc11d5274882f913b', name: "label" })) || this.label, index.h("div", { key: '701a18fc68395264285e01d5bad7b111970f4f0a', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '2d82d9fa7ffca66b45f17201467b1d3ecf6ff0df', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '06094565395b6054d89cac6ce4399947387d2c88', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: 'd5082f212000ef6738235d32a0bc117a06074573', class: { picker: true, 'picker-weeks': this.weeks }, id: this.id, "aria-describedby": `${this.id}-label` }, index.h("div", { key: 'd085532af173d7224e8b9f12e3fe332d3aba4030', class: "picker-head" }, index.h("cat-button", { key: '162d251a5a27bd2b14cb7e4a0dc1365ee55da01f', 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: 'eddfec3c6484b63c4292b688112966f23e0db900', 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: '874b1707cc80604429797ae273526d6db311619a' }, this.getHeadline()), index.h("cat-button", { key: '738f739252c1bd6e036aad7bfddbb76a86db3a17', 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: '935f968b3a1ea7879a5aa38163d8edc4fcdaea64', 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: '7f9a940cf201568daed8b4b35e44e74f61967188', class: "picker-grid", onFocusin: () => this.setAriaLive(this.locale.arrowKeys) }, index.h("div", { key: '750c7dc2abe47cf05b75ba21e7c13ac153b07363', class: "picker-grid-head" }, Array.from(Array(7), (_, i) => {
|
|
1772
1777
|
const day = (i + this.locale.weekInfo.firstDay) % 7;
|
|
1773
1778
|
return index.h("abbr", { title: this.locale.days.long[day] }, this.locale.days.short[day]);
|
|
1774
|
-
})), this.weeks && (index.h("div", { key: '
|
|
1779
|
+
})), this.weeks && (index.h("div", { key: '661cecfeef5e835e2e95b267c39a8608e40789d1', class: "picker-grid-weeks" }, dateGrid
|
|
1775
1780
|
.filter((_, i) => i % 7 === 0)
|
|
1776
|
-
.map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: '
|
|
1781
|
+
.map(day => (index.h("div", null, this.getWeekNumber(day)))))), index.h("div", { key: '215f61a30ec58c84d549181a8c216dc847bdbfa5', class: "picker-grid-days" }, dateGrid.map(day => {
|
|
1777
1782
|
const isStartDate = isSameDay(dateStart, day);
|
|
1778
1783
|
const isEndDate = isSameDay(dateEnd, day);
|
|
1779
1784
|
const isRange = !!dateStart && !!dateEnd && day > dateStart && day < dateEnd;
|
|
@@ -1790,7 +1795,7 @@ const CatDateInline = class {
|
|
|
1790
1795
|
'date-focusable': this.canFocus(day),
|
|
1791
1796
|
'date-disabled': !this.canClick(day)
|
|
1792
1797
|
}, 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()));
|
|
1793
|
-
}))), index.h("div", { key: '
|
|
1798
|
+
}))), index.h("div", { key: 'cede3e1fd2319aca96f3afccbab3113f17d4229b', class: "picker-foot" }, !this.noToday && this.canClick(this.locale.now()) && (index.h("cat-button", { key: '93dd8019983d1ae458706dbc62ad13e3131c29a5', size: "s", "data-dropdown-no-close": true, onClick: () => this.select(this.locale.now()) }, this.locale.today)), this.hint && index.h("p", { key: '4836275c3b11b58d94f31c1c1f00f5bb3e9645b5', class: "cursor-help" }, this.locale.arrowKeys), !this.noClear && (index.h("cat-button", { key: '58440f20e7ecd65dd8e2f136b11cb9b5a4379b79', size: "s", disabled: !this.value, "data-dropdown-no-close": true, onClick: () => this.clear() }, this.locale.clear)))), index.h("p", { key: '3a3507b2e3b4c0452e35f8eb78b2dd21c31e2c9d', class: "cursor-aria", "aria-live": "polite" })));
|
|
1794
1799
|
}
|
|
1795
1800
|
focus(date, focus = true) {
|
|
1796
1801
|
const [minDate, maxDate] = this.getMinMaxDate();
|
|
@@ -6424,7 +6429,7 @@ const CatDatepickerFlat = class {
|
|
|
6424
6429
|
}
|
|
6425
6430
|
render() {
|
|
6426
6431
|
return [
|
|
6427
|
-
index.h("cat-input", { key: '
|
|
6432
|
+
index.h("cat-input", { key: 'd81f695ecf9eb3dd175a14070811b8ca99e13f67', 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 => {
|
|
6428
6433
|
e.stopPropagation();
|
|
6429
6434
|
this.value = e.detail || undefined;
|
|
6430
6435
|
}, onCatFocus: e => {
|
|
@@ -6433,8 +6438,8 @@ const CatDatepickerFlat = class {
|
|
|
6433
6438
|
}, onCatBlur: e => {
|
|
6434
6439
|
e.stopPropagation();
|
|
6435
6440
|
this.catBlur.emit(e.detail);
|
|
6436
|
-
} }, this.hasSlottedLabel && (index.h("span", { key: '
|
|
6437
|
-
index.h("div", { key: '
|
|
6441
|
+
} }, this.hasSlottedLabel && (index.h("span", { key: '41f0dfcbe0a7ab562a80416a109ee6283d602147', slot: "label" }, index.h("slot", { key: '4148dec98c036b3f7d604b16c05dfed648ec16a3', name: "label" }))), this.hasSlottedHint && (index.h("span", { key: '8181253f8adadc606f0d66abe5bad5a85b7a0f7f', slot: "hint" }, index.h("slot", { key: 'c6807aed385298a19d67e1f2652de82473ea6f16', name: "hint" })))),
|
|
6442
|
+
index.h("div", { key: '8b0f02c5f6cf61ad89dccd831937649c6740035c', ref: el => (this._calendarWrapper = el), class: "datepicker-wrapper" })
|
|
6438
6443
|
];
|
|
6439
6444
|
}
|
|
6440
6445
|
initDatepicker(input) {
|
|
@@ -6544,11 +6549,11 @@ const CatDatepickerInline = class {
|
|
|
6544
6549
|
this.pickr = this.initDatepicker(this.input);
|
|
6545
6550
|
}
|
|
6546
6551
|
render() {
|
|
6547
|
-
return (index.h(index.Host, { key: '
|
|
6552
|
+
return (index.h(index.Host, { key: '22ff03e4cb6c74bc944e5022764308b6d2b2fe29' }, index.h("div", { key: '1c7e6b0beab570e1357014384ab8eaf76458858f', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
|
|
6548
6553
|
'datepicker-wrapper': true,
|
|
6549
6554
|
'datepicker-disabled': this.disabled,
|
|
6550
6555
|
'datepicker-readonly': this.readonly
|
|
6551
|
-
} }, index.h("input", { key: '
|
|
6556
|
+
} }, index.h("input", { key: '75edfdc337ba101bd0cb9afa1ddef11571e94bf9', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
|
|
6552
6557
|
}
|
|
6553
6558
|
initDatepicker(input) {
|
|
6554
6559
|
if (!input) {
|
|
@@ -7620,20 +7625,21 @@ function getPotentiallyTabbable(element) {
|
|
|
7620
7625
|
|
|
7621
7626
|
const catDropdownCss = ":host{display:contents}:host([hidden]){display:none}::slotted(nav){padding:0.25rem}.aligned ::slotted(nav){min-width:8rem;max-width:16rem}.justified ::slotted(nav){width:100%}.content{position:fixed;background:white;-webkit-overflow-scrolling:touch;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);border:1px solid rgb(var(--cat-border-color, 235, 236, 240));z-index:calc(var(--cat-z-index, 1000) + 100);display:none;opacity:0;transform:scale(0.9);transition:transform 125ms cubic-bezier(0.3, 0, 0.8, 0.15), opacity 125ms cubic-bezier(0.3, 0, 0.8, 0.15)}.content[data-placement^=top]{transform-origin:bottom}.content[data-placement^=top-start]{transform-origin:bottom left}.content[data-placement^=top-end]{transform-origin:bottom right}.content[data-placement^=left]{transform-origin:right}.content[data-placement^=left-start]{transform-origin:right top}.content[data-placement^=left-end]{transform-origin:right bottom}.content[data-placement^=right]{transform-origin:left}.content[data-placement^=right-start]{transform-origin:left top}.content[data-placement^=right-end]{transform-origin:left bottom}.content[data-placement^=bottom]{transform-origin:top}.content[data-placement^=bottom-start]{transform-origin:top left}.content[data-placement^=bottom-end]{transform-origin:top right}.content.show{opacity:1;transform:scale(1);transition:transform 250ms cubic-bezier(0.05, 0.7, 0.1, 1), opacity 250ms cubic-bezier(0.05, 0.7, 0.1, 1)}.content.overflow-auto{overflow:auto}";
|
|
7622
7627
|
|
|
7623
|
-
let nextUniqueId$
|
|
7628
|
+
let nextUniqueId$9 = 0;
|
|
7624
7629
|
const CatDropdown = class {
|
|
7625
7630
|
constructor(hostRef) {
|
|
7626
7631
|
index.registerInstance(this, hostRef);
|
|
7627
7632
|
this.catOpen = index.createEvent(this, "catOpen");
|
|
7628
7633
|
this.catClose = index.createEvent(this, "catClose");
|
|
7629
|
-
this.id = nextUniqueId$
|
|
7634
|
+
this.id = nextUniqueId$9++;
|
|
7630
7635
|
this._isOpen = false;
|
|
7636
|
+
this.tabbableOptions = { getShadowRoot: true };
|
|
7631
7637
|
/**
|
|
7632
7638
|
* Tracking the origin of opening the dropdown and specify if initial focus should be set.
|
|
7633
7639
|
* Currently we set it only when the origin is keyboard.
|
|
7634
7640
|
* We might not need to track this in future when focus-visible support is improved across browsers
|
|
7635
7641
|
*/
|
|
7636
|
-
this.
|
|
7642
|
+
this.isFocusVisible = false;
|
|
7637
7643
|
/**
|
|
7638
7644
|
* The placement of the dropdown.
|
|
7639
7645
|
*/
|
|
@@ -7650,6 +7656,7 @@ const CatDropdown = class {
|
|
|
7650
7656
|
this.noAutoClose = false;
|
|
7651
7657
|
/**
|
|
7652
7658
|
* Do not navigate focus inside the dropdown via vertical arrow keys.
|
|
7659
|
+
* @deprecated use cat-menu
|
|
7653
7660
|
*/
|
|
7654
7661
|
this.arrowNavigation = 'vertical';
|
|
7655
7662
|
/**
|
|
@@ -7672,6 +7679,7 @@ const CatDropdown = class {
|
|
|
7672
7679
|
this.noInitialFocus = false;
|
|
7673
7680
|
/**
|
|
7674
7681
|
* Trigger element will not receive focus when dropdown is closed.
|
|
7682
|
+
* @deprecated the property can be removed, focus is arranged internally
|
|
7675
7683
|
*/
|
|
7676
7684
|
this.noReturnFocus = false;
|
|
7677
7685
|
/**
|
|
@@ -7679,6 +7687,12 @@ const CatDropdown = class {
|
|
|
7679
7687
|
* Can be useful when trigger is rendered dynamically.
|
|
7680
7688
|
*/
|
|
7681
7689
|
this.delayedTriggerInit = false;
|
|
7690
|
+
/**
|
|
7691
|
+
* Whether the focus should be trapped inside dropdown popup.
|
|
7692
|
+
* Use it only when the dropdown popup content has role dialog.
|
|
7693
|
+
* @internal
|
|
7694
|
+
*/
|
|
7695
|
+
this.focusTrap = true;
|
|
7682
7696
|
}
|
|
7683
7697
|
/**
|
|
7684
7698
|
* Whether the dropdown is open.
|
|
@@ -7689,7 +7703,7 @@ const CatDropdown = class {
|
|
|
7689
7703
|
}
|
|
7690
7704
|
clickHandler(event) {
|
|
7691
7705
|
if (!this.trigger && this.delayedTriggerInit) {
|
|
7692
|
-
this.
|
|
7706
|
+
this.isFocusVisible = this.isEventOriginFromKeyboard(event.detail);
|
|
7693
7707
|
this.initTrigger();
|
|
7694
7708
|
this.toggle();
|
|
7695
7709
|
}
|
|
@@ -7705,6 +7719,21 @@ const CatDropdown = class {
|
|
|
7705
7719
|
this.close();
|
|
7706
7720
|
}
|
|
7707
7721
|
}
|
|
7722
|
+
keydownHandler(event) {
|
|
7723
|
+
if (this.isOpen && event.key === 'Escape') {
|
|
7724
|
+
this.close();
|
|
7725
|
+
}
|
|
7726
|
+
}
|
|
7727
|
+
globalClickHandler(event) {
|
|
7728
|
+
if (this.isOpen &&
|
|
7729
|
+
!this.noAutoClose &&
|
|
7730
|
+
// check if click was outside of the dropdown content
|
|
7731
|
+
!event.composedPath().includes(this.content) &&
|
|
7732
|
+
// check if click was not on an element marked with data-dropdown-no-close
|
|
7733
|
+
!event.composedPath().find(el => this.hasAttribute(el, 'data-dropdown-no-close'))) {
|
|
7734
|
+
this.close();
|
|
7735
|
+
}
|
|
7736
|
+
}
|
|
7708
7737
|
/**
|
|
7709
7738
|
* Toggles the dropdown.
|
|
7710
7739
|
*/
|
|
@@ -7724,58 +7753,55 @@ const CatDropdown = class {
|
|
|
7724
7753
|
}
|
|
7725
7754
|
this._isOpen = null;
|
|
7726
7755
|
this.content.style.display = 'block';
|
|
7727
|
-
this.
|
|
7756
|
+
this.isFocusVisible = isFocusVisible ?? this.isFocusVisible;
|
|
7728
7757
|
const trigger = this.anchor || this.trigger;
|
|
7729
7758
|
if (trigger) {
|
|
7730
7759
|
this.cleanupFloatingUi = autoUpdate(trigger, this.content, () => this.update(trigger));
|
|
7731
7760
|
}
|
|
7732
7761
|
// give CSS transition time to apply
|
|
7733
|
-
|
|
7762
|
+
requestAnimationFrame(() => {
|
|
7734
7763
|
this._isOpen = true;
|
|
7735
7764
|
this.content.classList.add('show');
|
|
7736
7765
|
this.trigger?.setAttribute('aria-expanded', 'true');
|
|
7737
|
-
this.
|
|
7738
|
-
|
|
7739
|
-
|
|
7740
|
-
|
|
7741
|
-
|
|
7742
|
-
|
|
7743
|
-
|
|
7744
|
-
|
|
7745
|
-
|
|
7746
|
-
|
|
7747
|
-
|
|
7748
|
-
|
|
7749
|
-
|
|
7750
|
-
|
|
7751
|
-
|
|
7752
|
-
|
|
7753
|
-
|
|
7754
|
-
(this.arrowNavigation === '
|
|
7755
|
-
|
|
7756
|
-
|
|
7757
|
-
|
|
7758
|
-
|
|
7759
|
-
|
|
7760
|
-
|
|
7761
|
-
|
|
7762
|
-
|
|
7763
|
-
event.preventDefault();
|
|
7764
|
-
return true;
|
|
7766
|
+
if (this.focusTrap) {
|
|
7767
|
+
this.trap = this.trap
|
|
7768
|
+
? this.trap.updateContainerElements(this.content)
|
|
7769
|
+
: createFocusTrap(this.content, {
|
|
7770
|
+
tabbableOptions: this.tabbableOptions,
|
|
7771
|
+
allowOutsideClick: true,
|
|
7772
|
+
onPostActivate: () => this.catOpen.emit(),
|
|
7773
|
+
setReturnFocus: elem => (!this.isFocusVisible ? false : this.trigger || elem),
|
|
7774
|
+
isKeyForward: event => {
|
|
7775
|
+
if ((this.arrowNavigation === 'horizontal' && event.key === 'ArrowRight') ||
|
|
7776
|
+
(this.arrowNavigation === 'vertical' && event.key === 'ArrowDown')) {
|
|
7777
|
+
event.preventDefault();
|
|
7778
|
+
return true;
|
|
7779
|
+
}
|
|
7780
|
+
return event.key === 'Tab';
|
|
7781
|
+
},
|
|
7782
|
+
isKeyBackward: event => {
|
|
7783
|
+
if ((this.arrowNavigation === 'horizontal' && event.key === 'ArrowLeft') ||
|
|
7784
|
+
(this.arrowNavigation === 'vertical' && event.key === 'ArrowUp')) {
|
|
7785
|
+
event.preventDefault();
|
|
7786
|
+
return true;
|
|
7787
|
+
}
|
|
7788
|
+
return event.key === 'Tab' && event.shiftKey;
|
|
7789
|
+
},
|
|
7790
|
+
initialFocus: () => {
|
|
7791
|
+
return this.isFocusVisible ? undefined : false;
|
|
7765
7792
|
}
|
|
7766
|
-
|
|
7767
|
-
|
|
7768
|
-
|
|
7769
|
-
|
|
7770
|
-
|
|
7771
|
-
|
|
7772
|
-
this.trap.activate();
|
|
7793
|
+
});
|
|
7794
|
+
this.trap.activate();
|
|
7795
|
+
}
|
|
7796
|
+
else {
|
|
7797
|
+
this.catOpen.emit();
|
|
7798
|
+
}
|
|
7773
7799
|
});
|
|
7774
7800
|
}
|
|
7775
7801
|
/**
|
|
7776
7802
|
* Closes the dropdown.
|
|
7777
7803
|
*/
|
|
7778
|
-
async close() {
|
|
7804
|
+
async close(shouldReturnFocus = this.isFocusVisible) {
|
|
7779
7805
|
if (!this._isOpen) {
|
|
7780
7806
|
return; // busy or closed
|
|
7781
7807
|
}
|
|
@@ -7783,6 +7809,9 @@ const CatDropdown = class {
|
|
|
7783
7809
|
this.trap?.deactivate();
|
|
7784
7810
|
this.trap = undefined;
|
|
7785
7811
|
this.content.classList.remove('show');
|
|
7812
|
+
if (shouldReturnFocus) {
|
|
7813
|
+
this.trigger?.focus();
|
|
7814
|
+
}
|
|
7786
7815
|
// give CSS transition time to apply
|
|
7787
7816
|
setTimeout(() => {
|
|
7788
7817
|
this._isOpen = false;
|
|
@@ -7807,7 +7836,7 @@ const CatDropdown = class {
|
|
|
7807
7836
|
this.cleanupFloatingUi = undefined;
|
|
7808
7837
|
}
|
|
7809
7838
|
render() {
|
|
7810
|
-
return (index.h(index.Host, { key: '
|
|
7839
|
+
return (index.h(index.Host, { key: '865e31b60994932637b3530afe48b2317868ecd3' }, index.h("slot", { key: '393e1697e6dd728bb2f3c8294370de7deaba95d1', name: "anchor", ref: el => (this.anchorSlot = el) }), index.h("slot", { key: '2bd3a3528005bebf7dcba84e52f5b6f6786a7f50', name: "trigger", ref: el => (this.triggerSlot = el) }), index.h("div", { key: '74ae76bb604041881af0247002d6a383dc386f50', 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: '6fd6acedb2c4044edd8f09f1418916e5086465fc', name: "content" }))));
|
|
7811
7840
|
}
|
|
7812
7841
|
get contentId() {
|
|
7813
7842
|
return `cat-dropdown-${this.id}`;
|
|
@@ -7819,7 +7848,7 @@ const CatDropdown = class {
|
|
|
7819
7848
|
this.trigger.setAttribute('aria-expanded', 'false');
|
|
7820
7849
|
this.trigger.setAttribute('aria-controls', this.contentId);
|
|
7821
7850
|
this.trigger.addEventListener('click', (event) => {
|
|
7822
|
-
this.
|
|
7851
|
+
this.isFocusVisible = this.isEventOriginFromKeyboard(event);
|
|
7823
7852
|
this.toggle();
|
|
7824
7853
|
});
|
|
7825
7854
|
}
|
|
@@ -7897,7 +7926,7 @@ const CatDropdown = class {
|
|
|
7897
7926
|
computePosition(anchorElement, this.content, {
|
|
7898
7927
|
strategy: 'fixed',
|
|
7899
7928
|
placement: this.placement,
|
|
7900
|
-
middleware: [
|
|
7929
|
+
middleware: [...middleware, ...resize]
|
|
7901
7930
|
}).then(({ x, y, placement }) => {
|
|
7902
7931
|
this.content.dataset.placement = placement;
|
|
7903
7932
|
Object.assign(this.content.style, {
|
|
@@ -7997,7 +8026,7 @@ var e$1,r$1,t$1,i=function(e){return e.replace(/[^\d]/g,"")},n$1=function(e){ret
|
|
|
7997
8026
|
|
|
7998
8027
|
const catInputCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}.cat-bg-primary{background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-primary-hover{transition:background-color 125ms, color 125ms}.cat-bg-primary-hover:hover{background-color:rgb(var(--cat-primary-bg-hover, 1, 115, 132)) !important;color:rgb(var(--cat-primary-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-primary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-primary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-primary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-primary,.cat-link-primary{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}button.cat-text-primary,button.cat-link-primary{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-primary:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-primary:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-primary,.cat-text-primary-hover{transition:color 125ms}.cat-link-primary:hover,.cat-text-primary-hover:hover{color:rgb(var(--cat-primary-text-hover, 1, 115, 132)) !important}.cat-link-primary:active,.cat-text-primary-hover:active{color:rgb(var(--cat-primary-text-active, 2, 99, 113)) !important}.cat-bg-primaryInverted{background-color:#93b4f2 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-bg-primaryInverted-hover{transition:background-color 125ms, color 125ms}.cat-bg-primaryInverted-hover:hover{background-color:#93b4f2 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-text-primaryInverted,.cat-link-primaryInverted{color:#93b4f2 !important}button.cat-text-primaryInverted,button.cat-link-primaryInverted{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-primaryInverted:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-primaryInverted:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-primaryInverted,.cat-text-primaryInverted-hover{transition:color 125ms}.cat-link-primaryInverted:hover,.cat-text-primaryInverted-hover:hover{color:#93b4f2 !important}.cat-link-primaryInverted:active,.cat-text-primaryInverted-hover:active{color:#93b4f2 !important}.cat-bg-secondary{background-color:rgb(var(--cat-secondary-bg, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-secondary-hover{transition:background-color 125ms, color 125ms}.cat-bg-secondary-hover:hover{background-color:rgb(var(--cat-secondary-bg-hover, 105, 118, 135)) !important;color:rgb(var(--cat-secondary-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-secondary-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-secondary-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-secondary-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-secondary,.cat-link-secondary{color:rgb(var(--cat-secondary-text, 0, 0, 0)) !important}button.cat-text-secondary,button.cat-link-secondary{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-secondary:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-secondary:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-secondary,.cat-text-secondary-hover{transition:color 125ms}.cat-link-secondary:hover,.cat-text-secondary-hover:hover{color:rgb(var(--cat-secondary-text-hover, 0, 0, 0)) !important}.cat-link-secondary:active,.cat-text-secondary-hover:active{color:rgb(var(--cat-secondary-text-active, 0, 0, 0)) !important}.cat-bg-secondaryInverted{background-color:#697687 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-bg-secondaryInverted-hover{transition:background-color 125ms, color 125ms}.cat-bg-secondaryInverted-hover:hover{background-color:#697687 !important;color:black !important;--cat-primary-text:0, 0, 0;--cat-primary-text-hover:0, 0, 0;--cat-primary-text-active:0, 0, 0;--cat-link-decoration:underline}.cat-text-secondaryInverted,.cat-link-secondaryInverted{color:white !important}button.cat-text-secondaryInverted,button.cat-link-secondaryInverted{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-secondaryInverted:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-secondaryInverted:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-secondaryInverted,.cat-text-secondaryInverted-hover{transition:color 125ms}.cat-link-secondaryInverted:hover,.cat-text-secondaryInverted-hover:hover{color:white !important}.cat-link-secondaryInverted:active,.cat-text-secondaryInverted-hover:active{color:white !important}.cat-bg-info{background-color:rgb(var(--cat-info-bg, 0, 115, 230)) !important;color:rgb(var(--cat-info-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-info-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-info-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-info-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-info-hover{transition:background-color 125ms, color 125ms}.cat-bg-info-hover:hover{background-color:rgb(var(--cat-info-bg-hover, 0, 107, 227)) !important;color:rgb(var(--cat-info-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-info-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-info-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-info-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-info,.cat-link-info{color:rgb(var(--cat-info-text, 0, 115, 230)) !important}button.cat-text-info,button.cat-link-info{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-info:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-info:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-info,.cat-text-info-hover{transition:color 125ms}.cat-link-info:hover,.cat-text-info-hover:hover{color:rgb(var(--cat-info-text-hover, 0, 107, 227)) !important}.cat-link-info:active,.cat-text-info-hover:active{color:rgb(var(--cat-info-text-active, 0, 96, 223)) !important}.cat-bg-success{background-color:rgb(var(--cat-success-bg, 0, 132, 88)) !important;color:rgb(var(--cat-success-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-success-hover{transition:background-color 125ms, color 125ms}.cat-bg-success-hover:hover{background-color:rgb(var(--cat-success-bg-hover, 0, 117, 78)) !important;color:rgb(var(--cat-success-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-success-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-success-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-success-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-success,.cat-link-success{color:rgb(var(--cat-success-text, 0, 132, 88)) !important}button.cat-text-success,button.cat-link-success{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-success:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-success:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-success,.cat-text-success-hover{transition:color 125ms}.cat-link-success:hover,.cat-text-success-hover:hover{color:rgb(var(--cat-success-text-hover, 0, 117, 78)) !important}.cat-link-success:active,.cat-text-success-hover:active{color:rgb(var(--cat-success-text-active, 0, 105, 70)) !important}.cat-bg-warning{background-color:rgb(var(--cat-warning-bg, 255, 206, 128)) !important;color:rgb(var(--cat-warning-fill, 0, 0, 0)) !important;--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}.cat-bg-warning-hover{transition:background-color 125ms, color 125ms}.cat-bg-warning-hover:hover{background-color:rgb(var(--cat-warning-bg-hover, 255, 214, 148)) !important;color:rgb(var(--cat-warning-fill-hover, 0, 0, 0)) !important;--cat-primary-text:var(--cat-warning-fill, 0, 0, 0);--cat-primary-text-hover:var(--cat-warning-fill-hover, 0, 0, 0);--cat-primary-text-active:var(--cat-warning-fill-active, 0, 0, 0);--cat-link-decoration:underline}.cat-text-warning,.cat-link-warning{color:rgb(var(--cat-warning-text, 159, 97, 0)) !important}button.cat-text-warning,button.cat-link-warning{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-warning:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-warning:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-warning,.cat-text-warning-hover{transition:color 125ms}.cat-link-warning:hover,.cat-text-warning-hover:hover{color:rgb(var(--cat-warning-text-hover, 159, 97, 0)) !important}.cat-link-warning:active,.cat-text-warning-hover:active{color:rgb(var(--cat-warning-text-active, 159, 97, 0)) !important}.cat-bg-danger{background-color:rgb(var(--cat-danger-bg, 217, 52, 13)) !important;color:rgb(var(--cat-danger-fill, 255, 255, 255)) !important;--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-bg-danger-hover{transition:background-color 125ms, color 125ms}.cat-bg-danger-hover:hover{background-color:rgb(var(--cat-danger-bg-hover, 194, 46, 11)) !important;color:rgb(var(--cat-danger-fill-hover, 255, 255, 255)) !important;--cat-primary-text:var(--cat-danger-fill, 255, 255, 255);--cat-primary-text-hover:var(--cat-danger-fill-hover, 255, 255, 255);--cat-primary-text-active:var(--cat-danger-fill-active, 255, 255, 255);--cat-link-decoration:underline}.cat-text-danger,.cat-link-danger{color:rgb(var(--cat-danger-text, 217, 52, 13)) !important}button.cat-text-danger,button.cat-link-danger{margin:0;padding:0;font:inherit;border:none;background:none;cursor:pointer}button.cat-link-danger:hover:not(:disabled){text-decoration:var(--cat-link-decoration-hover, underline)}button.cat-link-danger:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-link-danger,.cat-text-danger-hover{transition:color 125ms}.cat-link-danger:hover,.cat-text-danger-hover:hover{color:rgb(var(--cat-danger-text-hover, 194, 46, 11)) !important}.cat-link-danger:active,.cat-text-danger-hover:active{color:rgb(var(--cat-danger-text-active, 174, 42, 10)) !important}.cat-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-text-active{color:rgb(var(--cat-primary-text, 0, 129, 148)) !important}.cat-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-text-muted{color:rgb(var(--cat-font-color-muted, 81, 92, 108)) !important}.cat-bg-muted{background-color:#f2f4f7 !important}.cat-text-reset{color:inherit !important}.cat-link-reset{color:inherit !important;text-decoration:inherit !important}.label{overflow:hidden;word-wrap:break-word;word-break:break-word}.input-field:not(.input-horizontal) .label-container.hidden,.textarea-field:not(.textarea-horizontal) .label-container.hidden,.select-field:not(.select-horizontal) .label-container.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.label-container{flex-basis:var(--label-size, 33.33%)}.label-wrapper{display:flex;gap:0.25rem}.label-metadata{display:flex;flex-shrink:0;flex-grow:1;justify-content:space-between;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.label-optional,.label-character-count{display:inline-flex;align-items:center;max-height:1.25rem;font-size:0.75rem;line-height:1rem}.label-character-count{margin-left:auto}.input-horizontal .label-container.hidden label,.textarea-horizontal .label-container.hidden label,.select-horizontal .label-container.hidden label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-horizontal .label-wrapper,.textarea-horizontal .label-wrapper,.select-horizontal .label-wrapper{flex-direction:column}.input-horizontal .label-container,.textarea-horizontal .label-container,.select-horizontal .label-container{flex-shrink:0}.input-horizontal label,.textarea-horizontal label,.select-horizontal label{min-height:2.5rem;display:inline-flex;align-items:center}.input-horizontal .label-metadata,.textarea-horizontal .label-metadata,.select-horizontal .label-metadata{justify-content:flex-start}.input-horizontal .label-metadata .label-character-count,.textarea-horizontal .label-metadata .label-character-count,.select-horizontal .label-metadata .label-character-count{margin-left:0}:host{display:flex;font-size:0.9375rem;line-height:1.25rem}:host([hidden]){display:none}.input-field,.input-container{display:flex;flex-direction:column;gap:0.5rem;flex:1 1 auto}.input-field.input-horizontal{flex-direction:row;gap:1rem}.input-wrapper{flex:1 1 auto;display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:var(--cat-border-radius-m, 0.25rem);box-shadow:inset 0 0 0 1px rgb(var(--border-color));transition:box-shadow 125ms linear;--border-color:var(--cat-border-color-dark, 215, 219, 224)}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-readonly{pointer-events:none}.input-wrapper.input-disabled{background:#f2f4f7;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.input-wrapper:not(.input-disabled):hover{box-shadow:inset 0 0 0 1px rgb(var(--border-color)), 0 0 0 1px rgb(var(--border-color))}.input-wrapper:focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-1px}.input-wrapper:focus-within:has(.clearable:focus){outline:none}.input-wrapper.input-invalid{--border-color:var(--cat-danger-bg, 217, 52, 13), 0.2}.input-wrapper:has(input[type=file]){padding-left:0}.input-wrapper{}.input-wrapper:has(input:-webkit-autofill),.input-wrapper:has(input:-webkit-autofill):hover,.input-wrapper:has(input:-webkit-autofill):focus{background-color:#e8f0fe}.input-wrapper{}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.text-prefix{border-right:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-right:0.75rem}.text-suffix{border-left:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));padding-left:0.75rem}.icon-loading,.icon-prefix,.icon-suffix{align-self:center}.input-outer-wrapper{display:flex}.input-inner-wrapper{display:flex;align-items:center;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}input.has-clearable,input.has-toggle-password{padding-right:1.5rem}input.has-clearable.has-toggle-password{padding-right:3.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 81, 92, 108));opacity:1}input::file-selector-button{background-color:transparent;cursor:pointer;border:1px solid var(--cat-border-color-dark, #ccc);border-radius:var(--cat-border-radius-m, 0.25rem);height:1.75rem;margin:0 0.75rem 0 0.375rem}input{}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 9999px #e8f0fe inset}input{}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.toggle-password{position:absolute;top:calc(50% - 1rem);right:-0.5rem}.has-clearable~.toggle-password{right:1.5rem}.input-inner-wrapper.has-clearable,.input-inner-wrapper.has-toggle-password{padding-right:2rem}.input-inner-wrapper.has-clearable.has-toggle-password{padding-right:4rem}input[type=color]{flex:0 0 1.5625rem;width:1.5625rem;height:1.5625rem;border:1px solid var(--cat-border-color-dark, #ccc);border-radius:0.25rem;background:none;cursor:pointer;appearance:none;box-sizing:border-box;padding:0 !important}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:0;width:100%;height:100%;box-sizing:border-box}input[type=color]::-moz-color-swatch{border:none;border-radius:0;width:100%;height:100%;box-sizing:border-box}.color-value{flex-grow:1}:host(.cat-date-input) .input-wrapper,:host(.cat-time-input) .input-wrapper{z-index:1;border-top-right-radius:0;border-bottom-right-radius:0}";
|
|
7999
8028
|
|
|
8000
|
-
let nextUniqueId$
|
|
8029
|
+
let nextUniqueId$8 = 0;
|
|
8001
8030
|
const CatInput = class {
|
|
8002
8031
|
constructor(hostRef) {
|
|
8003
8032
|
index.registerInstance(this, hostRef);
|
|
@@ -8012,7 +8041,7 @@ const CatInput = class {
|
|
|
8012
8041
|
this.internals = hostRef.$hostElement$.attachInternals();
|
|
8013
8042
|
hostRef.$hostElement$["s-ei"] = this.internals;
|
|
8014
8043
|
}
|
|
8015
|
-
this._id = `cat-input-${nextUniqueId$
|
|
8044
|
+
this._id = `cat-input-${nextUniqueId$8++}`;
|
|
8016
8045
|
this.hasSlottedLabel = false;
|
|
8017
8046
|
this.hasSlottedHint = false;
|
|
8018
8047
|
this.hasSlottedCounter = false;
|
|
@@ -8221,6 +8250,219 @@ const CatInput = class {
|
|
|
8221
8250
|
};
|
|
8222
8251
|
CatInput.style = catInputCss;
|
|
8223
8252
|
|
|
8253
|
+
const catMenuCss = ":host(.cat-time-menu) nav{max-height:16rem}ul{list-style:none;margin:0;padding:0}";
|
|
8254
|
+
|
|
8255
|
+
const CatMenu = class {
|
|
8256
|
+
constructor(hostRef) {
|
|
8257
|
+
index.registerInstance(this, hostRef);
|
|
8258
|
+
this.catOpen = index.createEvent(this, "catOpen");
|
|
8259
|
+
this.catClose = index.createEvent(this, "catClose");
|
|
8260
|
+
this.catTriggerClick = index.createEvent(this, "catTriggerClick");
|
|
8261
|
+
this.catMenuItems = [];
|
|
8262
|
+
/**
|
|
8263
|
+
* The placement of the dropdown.
|
|
8264
|
+
*/
|
|
8265
|
+
this.placement = 'bottom-start';
|
|
8266
|
+
/**
|
|
8267
|
+
* The arrow key navigation direction for menu items.
|
|
8268
|
+
*/
|
|
8269
|
+
this.arrowNavigation = 'vertical';
|
|
8270
|
+
/**
|
|
8271
|
+
* The trigger button variant.
|
|
8272
|
+
*/
|
|
8273
|
+
this.triggerVariant = 'text';
|
|
8274
|
+
/**
|
|
8275
|
+
* The trigger button size.
|
|
8276
|
+
*/
|
|
8277
|
+
this.triggerSize = 'm';
|
|
8278
|
+
/**
|
|
8279
|
+
* The color palette of the trigger button.
|
|
8280
|
+
*/
|
|
8281
|
+
this.triggerColor = 'secondary';
|
|
8282
|
+
/**
|
|
8283
|
+
* Disable the menu.
|
|
8284
|
+
*/
|
|
8285
|
+
this.disabled = false;
|
|
8286
|
+
/**
|
|
8287
|
+
* Make the dropdown match the width of the reference regardless of its
|
|
8288
|
+
* contents. Note that this only applies to the minimum width of the
|
|
8289
|
+
* dropdown. The maximum width is still limited by the viewport.
|
|
8290
|
+
*/
|
|
8291
|
+
this.justify = false;
|
|
8292
|
+
/**
|
|
8293
|
+
* Do not change the size of the dropdown to ensure it isn’t too big to fit
|
|
8294
|
+
* in the viewport (or more specifically, its clipping context).
|
|
8295
|
+
*/
|
|
8296
|
+
this.noResize = false;
|
|
8297
|
+
/**
|
|
8298
|
+
* Allow overflow when dropdown is open.
|
|
8299
|
+
*/
|
|
8300
|
+
this.overflow = false;
|
|
8301
|
+
/**
|
|
8302
|
+
* Whether the dropdown trigger should be initialized only before first opening.
|
|
8303
|
+
* Can be useful when trigger is rendered dynamically.
|
|
8304
|
+
*/
|
|
8305
|
+
this.delayedTriggerInit = false;
|
|
8306
|
+
this.onTriggerClick = (event) => {
|
|
8307
|
+
this.catTriggerClick.emit(event.detail);
|
|
8308
|
+
};
|
|
8309
|
+
this.onMenuOpen = (event) => {
|
|
8310
|
+
this.catOpen.emit(event.detail);
|
|
8311
|
+
// Set focus to first non-disabled menu item when menu opens
|
|
8312
|
+
requestAnimationFrame(() => {
|
|
8313
|
+
if (!this.isMenuItemInFocus()) {
|
|
8314
|
+
const firstEnabledItem = this.catMenuItems.find(item => !item.disabled);
|
|
8315
|
+
firstEnabledItem?.doFocus();
|
|
8316
|
+
}
|
|
8317
|
+
});
|
|
8318
|
+
};
|
|
8319
|
+
}
|
|
8320
|
+
onFocusOut() {
|
|
8321
|
+
if (!this.dropdown?.isOpen) {
|
|
8322
|
+
return;
|
|
8323
|
+
}
|
|
8324
|
+
requestAnimationFrame(() => {
|
|
8325
|
+
if (!this.isMenuItemInFocus()) {
|
|
8326
|
+
this.dropdown?.close(false);
|
|
8327
|
+
}
|
|
8328
|
+
});
|
|
8329
|
+
}
|
|
8330
|
+
getDeepActiveElement() {
|
|
8331
|
+
let active = document.activeElement;
|
|
8332
|
+
while (active?.shadowRoot?.activeElement && active.nodeName !== 'CAT-MENU-ITEM') {
|
|
8333
|
+
active = active.shadowRoot.activeElement;
|
|
8334
|
+
}
|
|
8335
|
+
return active;
|
|
8336
|
+
}
|
|
8337
|
+
onDocumentKeydown(event) {
|
|
8338
|
+
const navigationKeys = this.arrowNavigation === 'horizontal'
|
|
8339
|
+
? ['ArrowRight', 'ArrowLeft', 'Home', 'End']
|
|
8340
|
+
: ['ArrowDown', 'ArrowUp', 'Home', 'End'];
|
|
8341
|
+
if (!this.dropdown?.isOpen || !navigationKeys.includes(event.key)) {
|
|
8342
|
+
return;
|
|
8343
|
+
}
|
|
8344
|
+
const targetElements = this.catMenuItems.filter(item => !item.disabled);
|
|
8345
|
+
if (!targetElements.length) {
|
|
8346
|
+
return;
|
|
8347
|
+
}
|
|
8348
|
+
const activeIdx = targetElements.findIndex(item => this.getDeepActiveElement() === item);
|
|
8349
|
+
let targetIdx;
|
|
8350
|
+
if (event.key === 'Home') {
|
|
8351
|
+
targetIdx = 0;
|
|
8352
|
+
}
|
|
8353
|
+
else if (event.key === 'End') {
|
|
8354
|
+
targetIdx = targetElements.length - 1;
|
|
8355
|
+
}
|
|
8356
|
+
else {
|
|
8357
|
+
const forwardKey = this.arrowNavigation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
|
|
8358
|
+
const activeOff = event.key === forwardKey ? 1 : -1;
|
|
8359
|
+
targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
|
|
8360
|
+
}
|
|
8361
|
+
targetElements[targetIdx].doFocus();
|
|
8362
|
+
event.preventDefault();
|
|
8363
|
+
}
|
|
8364
|
+
componentDidLoad() {
|
|
8365
|
+
this.syncMenuItems();
|
|
8366
|
+
this.mutationObserver = new MutationObserver(mutations => mutations.some(value => value.target.nodeName === 'CAT-MENU-ITEM') && this.syncMenuItems());
|
|
8367
|
+
this.mutationObserver?.observe(this.hostElement, {
|
|
8368
|
+
childList: true,
|
|
8369
|
+
attributes: true,
|
|
8370
|
+
subtree: true
|
|
8371
|
+
});
|
|
8372
|
+
}
|
|
8373
|
+
disconnectedCallback() {
|
|
8374
|
+
this.mutationObserver?.disconnect();
|
|
8375
|
+
}
|
|
8376
|
+
/**
|
|
8377
|
+
* Opens the menu.
|
|
8378
|
+
*/
|
|
8379
|
+
async open() {
|
|
8380
|
+
await this.dropdown?.open();
|
|
8381
|
+
}
|
|
8382
|
+
/**
|
|
8383
|
+
* Closes the menu.
|
|
8384
|
+
*/
|
|
8385
|
+
async close() {
|
|
8386
|
+
await this.dropdown?.close();
|
|
8387
|
+
}
|
|
8388
|
+
/**
|
|
8389
|
+
* Toggles the menu.
|
|
8390
|
+
*/
|
|
8391
|
+
async toggle() {
|
|
8392
|
+
await this.dropdown?.toggle();
|
|
8393
|
+
}
|
|
8394
|
+
isMenuItemInFocus() {
|
|
8395
|
+
const activeElement = this.getDeepActiveElement();
|
|
8396
|
+
const isInMenu = activeElement && this.catMenuItems.some(item => activeElement === item);
|
|
8397
|
+
return !!(activeElement && isInMenu);
|
|
8398
|
+
}
|
|
8399
|
+
syncMenuItems() {
|
|
8400
|
+
this.catMenuItems = Array.from(this.hostElement.querySelectorAll('cat-menu-item'));
|
|
8401
|
+
}
|
|
8402
|
+
render() {
|
|
8403
|
+
return (index.h(index.Host, { key: '1659f098d4d11e61119cde4f290bb89bf450f9d9' }, index.h("cat-dropdown", { key: 'a5ca6e28245167c0f208d1846c9f93a75991dee1', 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: '63986a7d31784fdd59de48c79a5b5777cf198b94', 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
|
+
...this.triggerNativeAttributes,
|
|
8405
|
+
'aria-haspopup': 'menu'
|
|
8406
|
+
}, disabled: this.disabled, onCatClick: this.onTriggerClick }, !this.triggerIconOnly && index.h("slot", { key: 'c10341a8bec971b814ec88044a89aa6752f3be23', name: "trigger-label" }, this.triggerLabel)), index.h("nav", { key: '265da5937ea993d27ccec21f9c0bc84439208d6c', role: "menu", slot: "content", class: "cat-menu-list", "aria-orientation": this.arrowNavigation }, index.h("ul", { key: '9b8edcb90028b39690be08961f25ea8c7a769752' }, index.h("slot", { key: 'f30590ff83386f30ba4539e76d621a80b0aefffd' }))))));
|
|
8407
|
+
}
|
|
8408
|
+
get hostElement() { return index.getElement(this); }
|
|
8409
|
+
};
|
|
8410
|
+
CatMenu.style = catMenuCss;
|
|
8411
|
+
|
|
8412
|
+
let nextUniqueId$7 = 0;
|
|
8413
|
+
const CatMenuItem = class {
|
|
8414
|
+
constructor(hostRef) {
|
|
8415
|
+
index.registerInstance(this, hostRef);
|
|
8416
|
+
this.catClick = index.createEvent(this, "catClick");
|
|
8417
|
+
this._id = `cat-menu-item-${++nextUniqueId$7}`;
|
|
8418
|
+
/**
|
|
8419
|
+
* Whether the menu item is active.
|
|
8420
|
+
*/
|
|
8421
|
+
this.active = false;
|
|
8422
|
+
/**
|
|
8423
|
+
* The variant of the menu item button.
|
|
8424
|
+
*/
|
|
8425
|
+
this.variant = 'text';
|
|
8426
|
+
/**
|
|
8427
|
+
* Hide the actual button content and only display the icon.
|
|
8428
|
+
*/
|
|
8429
|
+
this.iconOnly = false;
|
|
8430
|
+
/**
|
|
8431
|
+
* Display the icon on the right.
|
|
8432
|
+
*/
|
|
8433
|
+
this.iconRight = false;
|
|
8434
|
+
/**
|
|
8435
|
+
* Specifies that the menu item should be disabled.
|
|
8436
|
+
*/
|
|
8437
|
+
this.disabled = false;
|
|
8438
|
+
}
|
|
8439
|
+
get id() {
|
|
8440
|
+
return this.identifier || this._id;
|
|
8441
|
+
}
|
|
8442
|
+
/**
|
|
8443
|
+
* Programmatically move focus to the menu item.
|
|
8444
|
+
*/
|
|
8445
|
+
async doFocus(options) {
|
|
8446
|
+
this.button?.doFocus(options);
|
|
8447
|
+
}
|
|
8448
|
+
/**
|
|
8449
|
+
* Programmatically remove focus from the menu item.
|
|
8450
|
+
*/
|
|
8451
|
+
async doBlur() {
|
|
8452
|
+
this.button?.doBlur();
|
|
8453
|
+
}
|
|
8454
|
+
render() {
|
|
8455
|
+
return (index.h(index.Host, { key: '69db1c5c6d91ea31103639a5fe3cbb96da32aa40' }, index.h("li", { key: '88569a9541369cf5dbc7f79b562ef5b68c9905a3' }, index.h("cat-button", { key: '65b6e6c3ca873a07204f36b3cae69dfffbc51a0b', 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
|
+
...this.nativeAttributes,
|
|
8457
|
+
role: 'menuitem',
|
|
8458
|
+
tabindex: '-1'
|
|
8459
|
+
}, onCatClick: this.onCatClick }, index.h("slot", { key: 'c8036dabc3f0cb762d96bee7797ac50f871ac44d' })))));
|
|
8460
|
+
}
|
|
8461
|
+
onCatClick(event) {
|
|
8462
|
+
this.catClick.emit(event.detail);
|
|
8463
|
+
}
|
|
8464
|
+
};
|
|
8465
|
+
|
|
8224
8466
|
const catPaginationCss = ":host{display:inline-block}:host([hidden]){display:none}ol{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}li{display:inline-flex;justify-content:center}li.dots{-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([variant=outlined]) ol{gap:0.75rem}.cat-pagination-xs li.dots,.cat-pagination-xs li.text{height:1.5rem;line-height:1.5rem;font-size:0.875rem}.cat-pagination-xs li.dots{width:1.5rem}:host([variant=outlined]) .cat-pagination-xs{gap:0.375rem}.cat-pagination-s li.dots,.cat-pagination-s li.text{height:2rem;line-height:2rem;font-size:0.9375rem}.cat-pagination-s li.dots{width:2rem}:host([variant=outlined]) .cat-pagination-s{gap:0.5rem}.cat-pagination-m li.dots,.cat-pagination-m li.text{height:2.5rem;line-height:2.5rem;font-size:0.9375rem}.cat-pagination-m li.dots{width:2.5rem}:host([variant=outlined]) .cat-pagination-m{gap:0.625rem}.cat-pagination-l li.dots,.cat-pagination-l li.text{height:3rem;line-height:3rem;font-size:0.9375rem}.cat-pagination-l li.dots{width:3rem}:host([variant=outlined]) .cat-pagination-l{gap:0.75rem}.cat-pagination-xl li.dots,.cat-pagination-xl li.text{height:3.5rem;line-height:3.5rem;font-size:1.125rem}.cat-pagination-xl li.dots{width:3.5rem}:host([variant=outlined]) .cat-pagination-xl{gap:0.875rem}";
|
|
8225
8467
|
|
|
8226
8468
|
const CatPagination = class {
|
|
@@ -8270,9 +8512,9 @@ const CatPagination = class {
|
|
|
8270
8512
|
}
|
|
8271
8513
|
render() {
|
|
8272
8514
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
8273
|
-
return (index.h("nav", { key: '
|
|
8515
|
+
return (index.h("nav", { key: 'ad282454abdbfd0fbc50097b0d635cbb933bb752', "aria-label": index$1.catI18nRegistry.t('pagination.ariaLabel') }, index.h("ol", { key: '8007380dc28cce2c6149e7eece49ec5f5fe0965b', class: {
|
|
8274
8516
|
[`cat-pagination-${this.size}`]: Boolean(this.size)
|
|
8275
|
-
} }, index.h("li", { key: '
|
|
8517
|
+
} }, index.h("li", { key: 'fc6b7bd088fdfd80480e92201912ac38502b0a82' }, index.h("cat-button", { key: 'eff8810da8b950897f7f161186eb129f9817f4d9', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: index$1.catI18nRegistry.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, index.h("li", { key: 'f974b12f22475beb32fe5a314743fd0adec08133' }, index.h("cat-button", { key: '08ca8508120395e559da76b04b7375c1f1cead68', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: index$1.catI18nRegistry.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
|
|
8276
8518
|
}
|
|
8277
8519
|
get isFirst() {
|
|
8278
8520
|
return this.page === 0;
|
|
@@ -8398,13 +8640,13 @@ const CatRadio = class {
|
|
|
8398
8640
|
}
|
|
8399
8641
|
render() {
|
|
8400
8642
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
8401
|
-
return (index.h(index.Host, { key: '
|
|
8643
|
+
return (index.h(index.Host, { key: '0049b858f753639137fc5f1868300be789583fc5' }, index.h("label", { key: 'd4a67cf145780cec29e6c8148bca5b9f2e4d862f', htmlFor: this.id, class: {
|
|
8402
8644
|
'is-hidden': this.labelHidden,
|
|
8403
8645
|
'is-disabled': this.disabled,
|
|
8404
8646
|
'label-left': this.labelLeft,
|
|
8405
8647
|
'align-center': this.alignment === 'center',
|
|
8406
8648
|
'align-end': this.alignment === 'bottom'
|
|
8407
|
-
}, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, index.h("span", { key: '
|
|
8649
|
+
}, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, index.h("span", { key: 'ee81c40a3fe2e10d4fc4ed1deb1f81816936a8fd', class: "radio" }, index.h("input", { key: 'd5c5b924ec1cffa7c7f02d8bf4faf689876802fa', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, 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: 'efa28acc6827dbc2aeeae01ead830e40d5372493', class: "circle" })), index.h("span", { key: 'beaaf1b38e100b636e0496dda1123dff7cf93a33', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: 'ada26a86266f139f09353d4275b9d4b13755ad67', name: "label" })) || this.label)), this.hasHint && (index.h("div", { key: 'bb3fe9a5dbefc66d6a3075cefbb64deaab153f23', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: '130db3e44b1102561d69538ebac20289de598183', class: "circle-placeholder" }), index.h(CatFormHint, { key: 'b914b9b25c658700abcc9ea932b95861f10d966d', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
|
|
8408
8650
|
}
|
|
8409
8651
|
get hasHint() {
|
|
8410
8652
|
return !!this.hint || !!this.hasSlottedHint;
|
|
@@ -8498,7 +8740,7 @@ const CatRadioGroup = class {
|
|
|
8498
8740
|
}
|
|
8499
8741
|
}
|
|
8500
8742
|
render() {
|
|
8501
|
-
return (index.h("div", { key: '
|
|
8743
|
+
return (index.h("div", { key: '092e314344de49819b981fc58295c4e6985bf03e', role: "radiogroup", "aria-label": this.a11yLabel }, index.h("slot", { key: '10740a5816e614c5e3f046110b84728de398cdc4' })));
|
|
8502
8744
|
}
|
|
8503
8745
|
init() {
|
|
8504
8746
|
this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));
|
|
@@ -8908,13 +9150,13 @@ const CatScrollable = class {
|
|
|
8908
9150
|
}
|
|
8909
9151
|
render() {
|
|
8910
9152
|
return [
|
|
8911
|
-
index.h("div", { key: '
|
|
8912
|
-
index.h("div", { key: '
|
|
9153
|
+
index.h("div", { key: '01170df73b6535997e71f3a35cce5edcc864969f', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && index.h("div", { key: '26bcf225d5416926be598ada1a533119db191fb8', class: "shadow-top" }), !this.noShadowX && index.h("div", { key: '2809cafcf67edf778e3508907fd4500d46da185e', class: "shadow-left" }), !this.noShadowX && index.h("div", { key: '78d1b9d3768be4af4af9e87c04428ec59e5ffc1e', class: "shadow-right" }), !this.noShadowY && index.h("div", { key: '81084c2ed0a43a136d5ec46a1a2307410036cede', class: "shadow-bottom" })),
|
|
9154
|
+
index.h("div", { key: '7ec4056d8752be30c4e97f75ff3aa905dd7ac96a', ref: el => (this.scrollElement = el), class: {
|
|
8913
9155
|
'scrollable-content': true,
|
|
8914
9156
|
'scroll-x': !this.noOverflowX,
|
|
8915
9157
|
'scroll-y': !this.noOverflowY,
|
|
8916
9158
|
'no-overscroll': this.noOverscroll
|
|
8917
|
-
} }, index.h("slot", { key: '
|
|
9159
|
+
} }, index.h("slot", { key: '1a4d1d317fc7e92160ff21fb743db8b3edad28a5' }))
|
|
8918
9160
|
];
|
|
8919
9161
|
}
|
|
8920
9162
|
attachEmitter(from, emitter) {
|
|
@@ -9197,7 +9439,7 @@ const CatSelect = class {
|
|
|
9197
9439
|
if (!oldState.isResolving) {
|
|
9198
9440
|
this.valueChangedBySelection = true;
|
|
9199
9441
|
this.value = newValue;
|
|
9200
|
-
this.catChange.emit();
|
|
9442
|
+
this.catChange.emit(newValue);
|
|
9201
9443
|
}
|
|
9202
9444
|
this.showErrorsIfTimeout();
|
|
9203
9445
|
}
|
|
@@ -9402,18 +9644,18 @@ const CatSelect = class {
|
|
|
9402
9644
|
}
|
|
9403
9645
|
render() {
|
|
9404
9646
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
9405
|
-
return (index.h(index.Host, { key: '
|
|
9647
|
+
return (index.h(index.Host, { key: 'efdb83ec9f52b391d279ece98996723fa558a87a' }, index.h("div", { key: 'eceeb2c9d577a78e5e0e52b1bde30706c8bb36ea', class: {
|
|
9406
9648
|
'select-field': true,
|
|
9407
9649
|
'select-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false,
|
|
9408
9650
|
'select-multiple': this.multiple
|
|
9409
|
-
} }, index.h("div", { key: '
|
|
9651
|
+
} }, index.h("div", { key: 'a5803daa82570587270e53b640f098f2cdb0a3e5', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '28cd43343dd2a806f612f5691bc7a1cdf0d6df72', htmlFor: `select-${this.id}-input`, part: "label" }, index.h("span", { key: '0c80bc9e92fc6090231eb04ff574198da6119639', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '596fc3bceee736805d4047f879b28464ac12981e', name: "label" })) || this.label, index.h("div", { key: '02cbb3685b1b4d40566f67b20374309859d134e2', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'c14d1a9ca86d4693c095fdf14fea202843ce6dab', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '44678be1c8667215a4fbaba68510f8f40cd5ef1e', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: 'e899d7810102e93836309d644cf842a366c368a1', class: "select-container" }, index.h("div", { key: '2c3707ee5070ac8a9d4a40a3eb3325a93a5664b5', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, index.h("div", { key: 'b35e65763cd13120de56eb8592dc39d459aae199', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (index.h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (index.h("span", { class: {
|
|
9410
9652
|
pill: true,
|
|
9411
9653
|
'select-no-open': true,
|
|
9412
9654
|
'select-option-active': this.state.activeSelectionIndex === i
|
|
9413
|
-
}, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, index.h("span", null, item.render.label), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: index$1.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (index.h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, index.h("input", { key: '
|
|
9655
|
+
}, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, index.h("span", null, item.render.label), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: index$1.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (index.h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, index.h("input", { key: 'c7eb2d1f582c83ef1f257652f302ba6cf10e8d3c', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && index.h("cat-spinner", { key: 'e3d92ddd13d486940dbc35743be8bd65c841160e' }), this.invalid && (index.h("cat-icon", { key: '943a586107b4e449cea8006819442e78a8e84c6c', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
|
|
9414
9656
|
!this.disabled &&
|
|
9415
9657
|
!this.state.isResolving &&
|
|
9416
|
-
this.clearable ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: index$1.catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (index.h("cat-button", { key: '
|
|
9658
|
+
this.clearable ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: index$1.catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (index.h("cat-button", { key: '1cb61ffc8c383f964672479d710d7ffaad5c6081', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? index$1.catI18nRegistry.t('select.close') : index$1.catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (index.h(CatFormHint, { key: 'c231a520a632a58aec59ef56ee97f9d7e4ec5f40', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))), index.h("div", { key: 'd53fc5dd1b2a86a2f69d56e270e660aade45bd98', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { key: '979bffc2506e09806c4f0e6c467efad884254a8c', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.h("ul", { key: '8b5ceec249c36079ebbebb3fde24aa2bf340f040', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
|
|
9417
9659
|
? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (index.h("li", { class: "select-option-loading" }, index.h("cat-skeleton", { variant: "body", lines: 1 }), index.h("cat-skeleton", { variant: "body", lines: 1 }))))
|
|
9418
9660
|
: !this.state.options.length &&
|
|
9419
9661
|
!this.tags && (index.h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : index$1.catI18nRegistry.t('select.empty')))))))));
|
|
@@ -9918,7 +10160,7 @@ const CatSelectTest = class {
|
|
|
9918
10160
|
setTimeout(() => this.multipleSelect && (this.multipleSelect.value = []), 5000);
|
|
9919
10161
|
}
|
|
9920
10162
|
render() {
|
|
9921
|
-
return (index.h(index.Host, { key: '
|
|
10163
|
+
return (index.h(index.Host, { key: '0b110383eafefbb51a89f8e4ffdcf135cc295c61', style: { display: 'flex', flexDirection: 'column' }, class: "cat-form" }, index.h("cat-select", { key: '4acd0e15ca9c1cc6d4dd61c99ddafe3c68076d9d', label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => console.log('Multiple change', this.multipleSelect?.value), onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true, errorUpdate: false }, index.h("span", { key: '4a1d2877a54109202783e74eefac9c2c1a3855c9', slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.h("cat-select", { key: '223d911d289e35812d6d4c244f40e44bee1e6665', label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), index.h("cat-select", { key: '25efd965a37df80e7f047eaf234d53b2efc3a8e1', label: "Multiple with initials", ref: el => (this.multipleSelectAvatarInitials = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), index.h("cat-select", { key: 'c7305a291c8671b4c949aca1f218691a450f5892', label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => console.log('Multiple tagging change', this.multipleSelectTagging?.value), multiple: true, tags: true, clearable: true, errorUpdate: false }), index.h("cat-select", { key: 'e0a098e370475f37eb65445bce5213b2e631fb10', label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true, errorUpdate: false }), index.h("cat-select", { key: 'ec16873b5ddec4aa6ef5d228edf6c6fd4c6a544b', label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true, errorUpdate: false }), index.h("cat-select", { key: '822aa2fa1565b4e434c1746507d71fe5e9db250c', label: "Single with initials", ref: el => (this.singleSelectAvatarInitials = el), placeholder: "Hello World", clearable: true, errorUpdate: false }), index.h("cat-dropdown", { key: '9a72d5e8f6b732915ac8e2ba9299e4182b615037', overflow: true }, index.h("cat-button", { key: '37ed8862808033ef771388ee0c79e8aec2881d77', slot: "trigger", style: { width: '50%' } }, "Open select"), index.h("div", { key: '6399c1b3926dff5b70214edca7396c8712ee5930', slot: "content", style: { width: '400px' } }, index.h("cat-select", { key: 'd113eef5a77b89b531902fbef66e76e2aaf3bfb3', label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => console.log('Single change', this.singleSelectTagging?.value), tagHint: "new country", tags: true, clearable: true, errorUpdate: false, style: { width: '90%' } })))));
|
|
9922
10164
|
}
|
|
9923
10165
|
get countryConnector() {
|
|
9924
10166
|
return {
|
|
@@ -11182,7 +11424,7 @@ const CatSkeleton = class {
|
|
|
11182
11424
|
this.size = 'm';
|
|
11183
11425
|
}
|
|
11184
11426
|
render() {
|
|
11185
|
-
return (index.h(index.Host, { key: '
|
|
11427
|
+
return (index.h(index.Host, { key: '04a0e55776d02c7ceddaeab47e49de8bb9dd1c11' }, Array.from(Array(this.count)).map(() => (index.h("div", { style: this.style, class: {
|
|
11186
11428
|
skeleton: true,
|
|
11187
11429
|
[`skeleton-${this.effect}`]: Boolean(this.effect),
|
|
11188
11430
|
[`skeleton-${this.variant}`]: Boolean(this.variant),
|
|
@@ -11227,9 +11469,9 @@ const CatSpinner = class {
|
|
|
11227
11469
|
this.value = 0;
|
|
11228
11470
|
}
|
|
11229
11471
|
render() {
|
|
11230
|
-
return (index.h("span", { key: '
|
|
11472
|
+
return (index.h("span", { key: 'de9a11a10c7299043402faf311fef09e90a0fc18', role: "progressbar", tabindex: "-1", "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', "aria-valuenow": this.value, "aria-valuemin": "0", "aria-valuemax": "100", class: {
|
|
11231
11473
|
[`spinner-${this.size}`]: this.size !== 'inline'
|
|
11232
|
-
} }, index.h("svg", { key: '
|
|
11474
|
+
} }, index.h("svg", { key: 'b1ecb51aeecde21f10f7e36951ff714e4e784d1b', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, index.h("circle", { key: '770e31b46e323e0f8a3fd47425da594d5c0d98e0', cx: "24", cy: "24", r: "21.5" }))));
|
|
11233
11475
|
}
|
|
11234
11476
|
};
|
|
11235
11477
|
CatSpinner.style = catSpinnerCss;
|
|
@@ -11286,7 +11528,7 @@ const CatTab = class {
|
|
|
11286
11528
|
this.catClick.emit(event);
|
|
11287
11529
|
}
|
|
11288
11530
|
render() {
|
|
11289
|
-
return index.h(index.Host, { key: '
|
|
11531
|
+
return index.h(index.Host, { key: '4c98e5bc36165bb30551a78d85b1ed14bb26add3' });
|
|
11290
11532
|
}
|
|
11291
11533
|
get hostElement() { return index.getElement(this); }
|
|
11292
11534
|
};
|
|
@@ -11381,7 +11623,7 @@ const CatTabs = class {
|
|
|
11381
11623
|
}
|
|
11382
11624
|
render() {
|
|
11383
11625
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
11384
|
-
return (index.h(index.Host, { key: '
|
|
11626
|
+
return (index.h(index.Host, { key: '0be484a9645000026e230eef10f1031ad2f929ee' }, index.h("div", { key: '1f679c93dbbc5f066a8c890127c15d60d2a7ce5b', role: "tablist", class: "cat-tab-list" }, this.tabs.map((tab, index$1) => {
|
|
11385
11627
|
return (index.h("cat-button", { buttonId: tab.id, part: "tab", class: {
|
|
11386
11628
|
'cat-tab': true,
|
|
11387
11629
|
'cat-tab-active': tab.id === this.activeTab,
|
|
@@ -11608,7 +11850,7 @@ const CatTag = class {
|
|
|
11608
11850
|
}
|
|
11609
11851
|
render() {
|
|
11610
11852
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
11611
|
-
return (index.h(index.Host, { key: '
|
|
11853
|
+
return (index.h(index.Host, { key: '171c329333cff7d1e8788f3c301c2294e3915ba1' }, index.h("div", { key: 'ed982ed87e1091055ad043019436fb7478d415b9', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '75d6d6a0ded73c1220df5b5566e7f9529016897a', htmlFor: `tags-${this.id}-input`, part: "label" }, index.h("span", { key: '446f8af8fc443e5463b32542b360204d10a79298', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'ee1942db1d84db2ae8e84854dc4cff7af01b3716', name: "label" })) || this.label, index.h("div", { key: 'abe9779a7d02671a62cf21ace171fe9537d4918c', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'dbe700d2be221519264cc36c2f6aaf68fed937ae', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '942db85ecf5b29bae16a2f13db9e4722e87de0a8', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: '4199a06b528424d114627a09613f2b33781e712e', class: { 'input-wrapper': true, 'input-disabled': this.disabled, 'input-invalid': this.invalid } }, this.value?.map(value => (index.h("div", { class: "tag-pill" }, index.h("span", null, value), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: index$1.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(value), tabIndex: -1 }))))), index.h("div", { key: '48317c5e3925204e867fc367a71e4281b011e1e2', class: "input-inner-wrapper" }, index.h("input", { key: '5fc7eb50ad3ad93de37c9435789154a658418bdd', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `tags-${this.id}-input`, class: "tags-input", role: "combobox", ref: el => (this.input = el), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, onInput: this.onInput.bind(this), onBlur: this.onBlur.bind(this), placeholder: this.placeholder, disabled: this.disabled }), this.clearable && !this.disabled && (this.value?.length ?? 0) > 0 && (index.h("cat-button", { key: '9c215bbba9db2f0a9373388ac9189e831acd289f', class: "clearable", icon: "$cat:input-close", "icon-only": "true", size: "s", variant: "text", "a11y-label": index$1.catI18nRegistry.t('input.clear'), onClick: this.clear.bind(this), "data-dropdown-no-close": true })), this.invalid && index.h("cat-icon", { key: 'dfdcb36c4b89ed056fa945a1a5056d533eb4fcfb', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" }))), this.hasHint && (index.h(CatFormHint, { key: 'bcd5d5e78a7ff3ff44b5590d95239a765b604520', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))));
|
|
11612
11854
|
}
|
|
11613
11855
|
get hasHint() {
|
|
11614
11856
|
return !!this.hint || !!this.hasSlottedHint || this.invalid;
|
|
@@ -11807,15 +12049,15 @@ const CatTextarea = class {
|
|
|
11807
12049
|
}
|
|
11808
12050
|
render() {
|
|
11809
12051
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
11810
|
-
return (index.h(index.Host, { key: '
|
|
12052
|
+
return (index.h(index.Host, { key: 'd87b6d534a19ab716b8ca63f6d0300f03f5ebb6e' }, index.h("div", { key: '195ff026142d034ad3b26ce05e2e9ecff4df7215', class: {
|
|
11811
12053
|
'textarea-field': true,
|
|
11812
12054
|
'textarea-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false
|
|
11813
|
-
} }, index.h("div", { key: '
|
|
12055
|
+
} }, index.h("div", { key: '28bd19fa39ca4c8c647d162b7d4eebd943552904', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '645577cd1c2a4dfbb79ce9ddd29c3e3c32cc423b', htmlFor: this.id, part: "label" }, index.h("span", { key: '07f995873131e1e487ed0c1830f7975656fd13e0', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'e2e68d09a18fd86f5f9e5321a11ff7896eb4479e', name: "label" })) || this.label, index.h("div", { key: '5582198ab3259c93e330514a69f7039d9a37e6ec', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '3e36ff38400b75ac34e0b080ded43c1b4998261c', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '1fcaf02c0b5357ba32b51f9e0e059f865db4dacf', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.required'), ")")), (this.maxLength || this.hasSlottedCounter) && (index.h("div", { key: 'aa03f12a5bf631b8ccdb2e4239d35e65756bf654', class: "label-character-count", "aria-hidden": "true" }, this.hasSlottedCounter ? (index.h("slot", { name: "counter" })) : (`${this.value?.length ?? 0}/${this.maxLength}`)))))))), index.h("div", { key: '5c377d9419759c3908d2d075a3875c6c879fe78f', class: "textarea-container" }, index.h("div", { key: '656634131de7ed9672302b5cc9b659c99b6b2ca7', class: {
|
|
11814
12056
|
'textarea-wrapper': true,
|
|
11815
12057
|
'textarea-readonly': this.readonly,
|
|
11816
12058
|
'textarea-disabled': this.disabled,
|
|
11817
12059
|
'textarea-invalid': this.invalid
|
|
11818
|
-
} }, index.h("textarea", { key: '
|
|
12060
|
+
} }, index.h("textarea", { key: '66d0209200f1c293daae3bc61e2888521417d649', "data-test": this.testId, ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, autocomplete: this.autoComplete, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (index.h("cat-icon", { key: '1ff117d4e85338fbde618e757e870236b0d71e7d', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (index.h(CatFormHint, { key: 'cd9cfa54af1e754b39bc3e4c094196380c29ed08', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
|
|
11819
12061
|
}
|
|
11820
12062
|
get hasHint() {
|
|
11821
12063
|
return !!this.hint || !!this.hasSlottedHint || this.invalid;
|
|
@@ -11908,7 +12150,7 @@ function isAfter(date, time) {
|
|
|
11908
12150
|
return date.getHours() > hh || (date.getHours() === hh && date.getMinutes() > mm);
|
|
11909
12151
|
}
|
|
11910
12152
|
|
|
11911
|
-
const catTimeCss = ":host{display:block}:host([hidden]){display:none}.label-aria{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.cat-time-addon{margin-left:-1px;display:flex}
|
|
12153
|
+
const catTimeCss = ":host{display:block}:host([hidden]){display:none}.label-aria{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.cat-time-addon{margin-left:-1px;display:flex}.time-disabled{opacity:0.25}";
|
|
11912
12154
|
|
|
11913
12155
|
const CatTime = class {
|
|
11914
12156
|
constructor(hostRef) {
|
|
@@ -12071,14 +12313,13 @@ const CatTime = class {
|
|
|
12071
12313
|
}
|
|
12072
12314
|
render() {
|
|
12073
12315
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
12074
|
-
return (index.h(index.Host, { key: '
|
|
12316
|
+
return (index.h(index.Host, { key: '03493c3335828e76016dfec40e3f5db330f801ba' }, index.h("cat-input", { key: '060fa288c1ab0446023462999af843af3fcf3182', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal ?? this.fallbackHorizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, testId: this.testId, nativeAttributes: this.nativeAttributes, timeMaskOptions: this.timeMaskOptions, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, index.h("span", { key: '9ebeb3f5ad8124c3eee6e8315fe05bfbd4894a36', slot: "label" }, this.hasSlottedLabel && index.h("slot", { key: '09ef9b793927045d5e2b5c64d7b6f7fa69cbd5b6', name: "label" }), !this.hasSlottedLabel && this.label, index.h("span", { key: '2e97206fe1bd5ef3042a811450fa775325192d02', class: "label-aria" }, " (HH:mm)")), index.h("div", { key: '5733c93fc1061f1faaee287be7cd7f8b638969f8', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (index.h("cat-button", { key: 'aca95536e1ba8088f7ffd489f07a2d6fb60ac713', class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? this.localizedDayPeriods.am : this.localizedDayPeriods.pm)), index.h("cat-menu", { key: '758cd74fd0da3fbec5fb72f117f0a7c48ec8b0fd', slot: "addon", class: "cat-time-menu", placement: this.placement, disabled: this.disabled || this.readonly, triggerIconOnly: true, triggerA11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose, triggerIcon: "$cat:timepicker-clock", triggerClass: "cat-time-toggle", triggerVariant: "outlined" }, this.timeArray().map(time => {
|
|
12075
12317
|
const isoTime = formatIso(time);
|
|
12076
12318
|
const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);
|
|
12077
|
-
return (index.h("
|
|
12078
|
-
'cat-nav-item': true,
|
|
12319
|
+
return (index.h("cat-menu-item", { class: {
|
|
12079
12320
|
'time-disabled': disabled
|
|
12080
|
-
}, disabled: disabled, active: isoTime === this.value, color: isoTime === this.value ? 'primary' : 'secondary', variant: isoTime === this.value ? 'filled' : 'outlined',
|
|
12081
|
-
})))
|
|
12321
|
+
}, disabled: disabled, active: isoTime === this.value, color: isoTime === this.value ? 'primary' : 'secondary', variant: isoTime === this.value ? 'filled' : 'outlined', onClick: () => this.select(time), "data-time": isoTime }, this.format(time)));
|
|
12322
|
+
}))), this.hasSlottedHint && (index.h("span", { key: '076955b6e464671d85a61175581424261de06976', slot: "hint" }, index.h("slot", { key: 'f3033c089bba6cca62a4434de7c906c480bc2e48', name: "hint" }))))));
|
|
12082
12323
|
}
|
|
12083
12324
|
timeArray() {
|
|
12084
12325
|
const result = [];
|
|
@@ -12248,13 +12489,13 @@ const CatToggle = class {
|
|
|
12248
12489
|
}
|
|
12249
12490
|
render() {
|
|
12250
12491
|
this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
|
|
12251
|
-
return (index.h(index.Host, { key: '
|
|
12492
|
+
return (index.h(index.Host, { key: '12211a73c13d26b9d7b7fe614751da979ef0190d' }, index.h("label", { key: '76655e86e680ce9c6bbc2ae382aad2ce12c3e570', htmlFor: this.id, class: {
|
|
12252
12493
|
'is-hidden': this.labelHidden,
|
|
12253
12494
|
'is-disabled': this.disabled,
|
|
12254
12495
|
'label-left': this.labelLeft,
|
|
12255
12496
|
'align-center': this.alignment === 'center',
|
|
12256
12497
|
'align-end': this.alignment === 'bottom'
|
|
12257
|
-
} }, index.h("input", { key: '
|
|
12498
|
+
} }, index.h("input", { key: 'f50b05351cb373b273ef4d09e48a508812897e51', "data-test": this.testId, ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), index.h("span", { key: 'c2d27a9c034d7c3166e01fcf704ee19bb547047a', class: "toggle" }), index.h("span", { key: '4d01418528e94fdbbaad9e6e968cd40d9a5941cb', class: "label", part: "label" }, (this.hasSlottedLabel && index.h("slot", { key: 'ec1b50034d02a93f5252c15e5a61ede19a075571', name: "label" })) || this.label)), this.hasHint && (index.h("div", { key: '22e264d955d2e29eff3b5bdaea2e3d61b75cfe69', class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, index.h("div", { key: 'a1e8530c9189bc2283c86e45069df7a121413834', class: "toggle-placeholder" }), index.h(CatFormHint, { key: 'da1e3b113ad78c934c1f3bbab879b479f9079dc4', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }) })))));
|
|
12258
12499
|
}
|
|
12259
12500
|
get hasHint() {
|
|
12260
12501
|
return !!this.hint || !!this.hasSlottedHint;
|
|
@@ -12474,6 +12715,8 @@ exports.cat_dropdown = CatDropdown;
|
|
|
12474
12715
|
exports.cat_form_group = CatFormGroup;
|
|
12475
12716
|
exports.cat_icon = CatIcon;
|
|
12476
12717
|
exports.cat_input = CatInput;
|
|
12718
|
+
exports.cat_menu = CatMenu;
|
|
12719
|
+
exports.cat_menu_item = CatMenuItem;
|
|
12477
12720
|
exports.cat_pagination = CatPagination;
|
|
12478
12721
|
exports.cat_radio = CatRadio;
|
|
12479
12722
|
exports.cat_radio_group = CatRadioGroup;
|
|
@@ -12489,4 +12732,4 @@ exports.cat_textarea = CatTextarea;
|
|
|
12489
12732
|
exports.cat_time = CatTime;
|
|
12490
12733
|
exports.cat_toggle = CatToggle;
|
|
12491
12734
|
exports.cat_tooltip = CatTooltip;
|
|
12492
|
-
//# sourceMappingURL=cat-alert.cat-avatar.cat-badge.cat-button.cat-button-group.cat-card.cat-checkbox.cat-date.cat-date-inline.cat-datepicker.cat-datepicker-inline.cat-dropdown.cat-form-group.cat-icon.cat-input.cat-pagination.cat-radio.cat-radio-group.cat-scrollable.cat-select.cat-select-demo.cat-skeleton.cat-spinner.cat-tab.cat-tabs.cat-tag.cat-textarea.cat-time.cat-toggle.cat-tooltip.entry.cjs.js.map
|
|
12735
|
+
//# sourceMappingURL=cat-alert.cat-avatar.cat-badge.cat-button.cat-button-group.cat-card.cat-checkbox.cat-date.cat-date-inline.cat-datepicker.cat-datepicker-inline.cat-dropdown.cat-form-group.cat-icon.cat-input.cat-menu.cat-menu-item.cat-pagination.cat-radio.cat-radio-group.cat-scrollable.cat-select.cat-select-demo.cat-skeleton.cat-spinner.cat-tab.cat-tabs.cat-tag.cat-textarea.cat-time.cat-toggle.cat-tooltip.entry.cjs.js.map
|