@haiilo/catalyst 0.11.0 → 0.14.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 +1 -1
- package/dist/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/catalyst.esm.js.map +1 -1
- package/dist/catalyst/index.esm.js +1 -1
- package/dist/catalyst/p-5f9b3485.entry.js +12 -0
- package/dist/catalyst/p-5f9b3485.entry.js.map +1 -0
- package/dist/catalyst/p-933b6a7a.js +10 -0
- package/dist/catalyst/p-933b6a7a.js.map +1 -0
- package/dist/catalyst/{p-659073b5.js → p-a255bd64.js} +2 -2
- package/dist/catalyst/p-a255bd64.js.map +1 -0
- package/dist/catalyst/scss/core/_base.scss +0 -1
- package/dist/catalyst/scss/core/_toast.scss +22 -12
- package/dist/catalyst/scss/utils/_layout.scss +4 -4
- package/dist/catalyst/scss/utils/_sizing.mixins.scss +0 -4
- package/dist/catalyst/scss/utils/_typography.mixins.scss +3 -3
- package/dist/cjs/{cat-alert_21.cjs.entry.js → cat-alert_22.cjs.entry.js} +234 -63
- package/dist/cjs/cat-alert_22.cjs.entry.js.map +1 -0
- package/dist/cjs/{cat-notification-c2859ed7.js → cat-notification-6a438ad1.js} +374 -58
- package/dist/cjs/cat-notification-6a438ad1.js.map +1 -0
- package/dist/cjs/catalyst.cjs.js +2 -2
- package/dist/cjs/{index-936b777e.js → index-c7955116.js} +12 -1
- package/dist/cjs/index-c7955116.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -2
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/components/cat-alert/cat-alert.css +24 -14
- package/dist/collection/components/cat-alert/cat-alert.js +49 -1
- package/dist/collection/components/cat-alert/cat-alert.js.map +1 -1
- package/dist/collection/components/cat-button/cat-button.css +185 -0
- package/dist/collection/components/cat-checkbox/cat-checkbox.css +16 -9
- package/dist/collection/components/cat-input/cat-input.css +3 -0
- package/dist/collection/components/cat-input/cat-input.js +8 -3
- package/dist/collection/components/cat-input/cat-input.js.map +1 -1
- package/dist/collection/components/cat-input/input-type.js +2 -0
- package/dist/collection/components/cat-input/input-type.js.map +1 -0
- package/dist/collection/components/cat-notification/cat-notification.js +43 -44
- package/dist/collection/components/cat-notification/cat-notification.js.map +1 -1
- package/dist/collection/components/cat-radio/cat-radio.css +3 -0
- package/dist/collection/components/cat-radio-group/cat-radio-group.js +30 -0
- package/dist/collection/components/cat-radio-group/cat-radio-group.js.map +1 -1
- package/dist/collection/components/cat-select/cat-select.css +4 -2
- package/dist/collection/components/cat-select/cat-select.js +77 -20
- package/dist/collection/components/cat-select/cat-select.js.map +1 -1
- package/dist/collection/components/cat-tab/cat-tab.js +7 -7
- package/dist/collection/components/cat-tab/cat-tab.js.map +1 -1
- package/dist/collection/components/cat-tabs/cat-tabs.js +19 -2
- package/dist/collection/components/cat-tabs/cat-tabs.js.map +1 -1
- package/dist/collection/components/cat-textarea/cat-textarea.css +3 -0
- package/dist/collection/components/cat-toast-demo/cat-toast-demo.js +12 -1
- package/dist/collection/components/cat-toast-demo/cat-toast-demo.js.map +1 -1
- package/dist/collection/components/cat-toggle/cat-toggle.css +9 -9
- package/dist/collection/components/cat-tooltip/cat-tooltip.css +2 -3
- package/dist/collection/index.js.map +1 -1
- package/dist/collection/scss/core/_base.scss +0 -1
- package/dist/collection/scss/core/_toast.scss +22 -12
- package/dist/collection/scss/utils/_layout.scss +4 -4
- package/dist/collection/scss/utils/_sizing.mixins.scss +0 -4
- package/dist/collection/scss/utils/_typography.mixins.scss +3 -3
- package/dist/components/cat-alert.js +23 -4
- package/dist/components/cat-alert.js.map +1 -1
- package/dist/components/cat-avatar.js.map +1 -1
- package/dist/components/cat-badge.js.map +1 -1
- package/dist/components/cat-button2.js +1 -1
- package/dist/components/cat-button2.js.map +1 -1
- package/dist/components/cat-checkbox.js +1 -1
- package/dist/components/cat-checkbox.js.map +1 -1
- package/dist/components/cat-icon2.js.map +1 -1
- package/dist/components/cat-input.js +1 -1
- package/dist/components/cat-input.js.map +1 -1
- package/dist/components/cat-radio-group.js +7 -1
- package/dist/components/cat-radio-group.js.map +1 -1
- package/dist/components/cat-radio.js +1 -1
- package/dist/components/cat-radio.js.map +1 -1
- package/dist/components/cat-select.js +53 -21
- package/dist/components/cat-select.js.map +1 -1
- package/dist/components/cat-skeleton.js.map +1 -1
- package/dist/components/cat-spinner2.js.map +1 -1
- package/dist/components/cat-tab.js +7 -7
- package/dist/components/cat-tab.js.map +1 -1
- package/dist/components/cat-tabs.js +19 -2
- package/dist/components/cat-tabs.js.map +1 -1
- package/dist/components/cat-textarea.js +1 -1
- package/dist/components/cat-textarea.js.map +1 -1
- package/dist/components/cat-toast-demo.js +55 -45
- package/dist/components/cat-toast-demo.js.map +1 -1
- package/dist/components/cat-toggle.js +1 -1
- package/dist/components/cat-toggle.js.map +1 -1
- package/dist/components/cat-tooltip.js +1 -1
- package/dist/components/cat-tooltip.js.map +1 -1
- package/dist/esm/{cat-alert_21.entry.js → cat-alert_22.entry.js} +219 -49
- package/dist/esm/cat-alert_22.entry.js.map +1 -0
- package/dist/esm/{cat-notification-3da6ddb1.js → cat-notification-5b6a2cd9.js} +360 -47
- package/dist/esm/cat-notification-5b6a2cd9.js.map +1 -0
- package/dist/esm/catalyst.js +2 -2
- package/dist/esm/{index-41ceb7da.js → index-17d2bcf3.js} +12 -1
- package/dist/esm/index-17d2bcf3.js.map +1 -0
- package/dist/esm/index.js +1 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +2 -2
- package/dist/types/components/cat-alert/cat-alert.d.ts +9 -0
- package/dist/types/components/cat-input/cat-input.d.ts +2 -1
- package/dist/types/components/cat-input/input-type.d.ts +1 -0
- package/dist/types/components/cat-notification/cat-notification.d.ts +9 -4
- package/dist/types/components/cat-radio-group/cat-radio-group.d.ts +5 -0
- package/dist/types/components/cat-select/cat-select.d.ts +9 -0
- package/dist/types/components/cat-tabs/cat-tabs.d.ts +5 -1
- package/dist/types/components.d.ts +27 -2
- package/dist/types/index.d.ts +1 -1
- package/package.json +4 -4
- package/dist/catalyst/p-2ad6f8d8.js +0 -2
- package/dist/catalyst/p-2ad6f8d8.js.map +0 -1
- package/dist/catalyst/p-659073b5.js.map +0 -1
- package/dist/catalyst/p-6fce43dd.js +0 -2
- package/dist/catalyst/p-6fce43dd.js.map +0 -1
- package/dist/catalyst/p-8121572a.js +0 -10
- package/dist/catalyst/p-8121572a.js.map +0 -1
- package/dist/catalyst/p-aa382647.entry.js +0 -12
- package/dist/catalyst/p-aa382647.entry.js.map +0 -1
- package/dist/catalyst/p-c0b4200d.entry.js +0 -2
- package/dist/catalyst/p-c0b4200d.entry.js.map +0 -1
- package/dist/cjs/cat-alert_21.cjs.entry.js.map +0 -1
- package/dist/cjs/cat-form-hint-25fdfed5.js +0 -22
- package/dist/cjs/cat-form-hint-25fdfed5.js.map +0 -1
- package/dist/cjs/cat-notification-c2859ed7.js.map +0 -1
- package/dist/cjs/cat-textarea.cjs.entry.js +0 -92
- package/dist/cjs/cat-textarea.cjs.entry.js.map +0 -1
- package/dist/cjs/index-936b777e.js.map +0 -1
- package/dist/cjs/loglevel-b5d158ad.js +0 -324
- package/dist/cjs/loglevel-b5d158ad.js.map +0 -1
- package/dist/esm/cat-alert_21.entry.js.map +0 -1
- package/dist/esm/cat-form-hint-790d1e46.js +0 -20
- package/dist/esm/cat-form-hint-790d1e46.js.map +0 -1
- package/dist/esm/cat-notification-3da6ddb1.js.map +0 -1
- package/dist/esm/cat-textarea.entry.js +0 -88
- package/dist/esm/cat-textarea.entry.js.map +0 -1
- package/dist/esm/index-41ceb7da.js.map +0 -1
- package/dist/esm/loglevel-c8b59c3a.js +0 -319
- package/dist/esm/loglevel-c8b59c3a.js.map +0 -1
|
@@ -2,26 +2,35 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
6
|
-
const
|
|
7
|
-
const catFormHint = require('./cat-form-hint-25fdfed5.js');
|
|
8
|
-
const catNotification = require('./cat-notification-c2859ed7.js');
|
|
5
|
+
const index = require('./index-c7955116.js');
|
|
6
|
+
const catNotification = require('./cat-notification-6a438ad1.js');
|
|
9
7
|
|
|
10
|
-
const catAlertCss = ":host{display:block;margin-bottom:1rem}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host([hidden]){display:none}.alert{font:inherit;
|
|
8
|
+
const catAlertCss = ":host{display:block;margin-bottom:1rem}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host([hidden]){display:none}.alert{font:inherit;background-color:rgba(var(--bg), 0.1);border-radius:0.5rem;padding:1.25rem;display:flex;flex-direction:row;gap:0.5rem}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}.alert-primary{--bg:var(--cat-primary-bg, 32, 127, 138)}.alert-primary cat-icon{color:#207f8a}.alert-secondary{--bg:105, 118, 135}.alert-secondary cat-icon{color:#697687}.alert-success{--bg:0, 132, 88}.alert-success cat-icon{color:#008458}.alert-warning{--bg:255, 206, 128}.alert-warning cat-icon{color:#ebb663}.alert-danger{--bg:217, 52, 13}.alert-danger cat-icon{color:#d9340d}";
|
|
11
9
|
|
|
12
10
|
const CatAlert = class {
|
|
13
11
|
constructor(hostRef) {
|
|
14
12
|
index.registerInstance(this, hostRef);
|
|
13
|
+
this.mapIcon = new Map([
|
|
14
|
+
['primary', 'star-circle-filled'],
|
|
15
|
+
['secondary', 'clock-filled'],
|
|
16
|
+
['success', 'check-circle-filled'],
|
|
17
|
+
['warning', 'danger-filled'],
|
|
18
|
+
['danger', 'cross-circle-filled']
|
|
19
|
+
]);
|
|
15
20
|
/**
|
|
16
21
|
* The color palette of the alert.
|
|
17
22
|
*/
|
|
18
23
|
this.color = 'primary';
|
|
24
|
+
/**
|
|
25
|
+
* Whether the icon of the alert is deactivated.
|
|
26
|
+
*/
|
|
27
|
+
this.noIcon = false;
|
|
19
28
|
}
|
|
20
29
|
render() {
|
|
21
30
|
return (index.h(index.Host, { tabindex: "0", role: this.role }, index.h("div", { part: "alert", class: {
|
|
22
31
|
alert: true,
|
|
23
32
|
[`alert-${this.color}`]: Boolean(this.color)
|
|
24
|
-
} }, index.h("slot", null))));
|
|
33
|
+
} }, !this.noIcon && index.h("cat-icon", { size: "l", icon: this.icon ? this.icon : this.mapIcon.get(this.color) }), index.h("div", { class: "content" }, index.h("slot", null)))));
|
|
25
34
|
}
|
|
26
35
|
get role() {
|
|
27
36
|
switch (this.color) {
|
|
@@ -81,7 +90,7 @@ const CatAvatar = class {
|
|
|
81
90
|
}
|
|
82
91
|
componentWillRender() {
|
|
83
92
|
if (!this.label) {
|
|
84
|
-
|
|
93
|
+
catNotification.loglevel.warn('[A11y] Missing ARIA label on avatar', this);
|
|
85
94
|
}
|
|
86
95
|
}
|
|
87
96
|
render() {
|
|
@@ -270,11 +279,11 @@ function createEmptyStyleRule(query) {
|
|
|
270
279
|
}
|
|
271
280
|
}
|
|
272
281
|
catch (e) {
|
|
273
|
-
|
|
282
|
+
catNotification.loglevel.error(e);
|
|
274
283
|
}
|
|
275
284
|
}
|
|
276
285
|
|
|
277
|
-
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}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:0.25rem;text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:0.65;filter:grayscale(100%)}.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-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:none}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:none;background-color:rgba(var(--base), 0.05)}.cat-button-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--base:var(--cat-primary-text, 32, 127, 138)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 28, 112, 122);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 28, 112, 122)}.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 25, 101, 110);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 25, 101, 110)}.cat-button-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--base:105, 118, 135}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--base:0, 132, 88}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 117, 78;--fill:255, 255, 255;--text:0, 117, 78}.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 105, 70;--fill:255, 255, 255;--text:0, 105, 70}.cat-button-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--base:159, 97, 0}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 214, 148;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 222, 168;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--base:217, 52, 13}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:194, 46, 11;--fill:255, 255, 255;--text:194, 46, 11}.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:174, 42, 10;--fill:255, 255, 255;--text:174, 42, 10}.cat-button-xs{min-width:1.5rem;padding:0.25rem 0.25rem;font-size:0.875rem;line-height:1rem}.cat-button-xs .cat-button-prefix{margin-right:0.25rem}.cat-button-xs .cat-button-suffix{margin-left:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xs{padding-left:1.25rem;padding-right:1.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-s .cat-button-prefix{margin-right:0.25rem}.cat-button-s .cat-button-suffix{margin-left:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-s{padding-left:1.25rem;padding-right:1.25rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-m .cat-button-prefix{margin-right:0.25rem}.cat-button-m .cat-button-suffix{margin-left:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-m{padding-left:1.25rem;padding-right:1.25rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-l .cat-button-prefix{margin-right:0.25rem}.cat-button-l .cat-button-suffix{margin-left:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-l{padding-left:1.25rem;padding-right:1.25rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem}.cat-button-xl .cat-button-prefix{margin-right:0.25rem}.cat-button-xl .cat-button-suffix{margin-left:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xl{padding-left:1.25rem;padding-right:1.25rem}.cat-button-active::before{content:\"\";display:block;position:absolute;top:0;left:0;width:0.25rem;height:100%;background:rgb(var(--base))}:host-context(nav){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0;justify-content:left}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}";
|
|
286
|
+
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}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:0.25rem;text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:0.65;filter:grayscale(100%)}.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-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:none}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:none;background-color:rgba(var(--base), 0.05)}.cat-button-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--base:var(--cat-primary-text, 32, 127, 138)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 28, 112, 122);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 28, 112, 122)}.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 25, 101, 110);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 25, 101, 110)}.cat-button-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--base:105, 118, 135}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--base:0, 132, 88}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 117, 78;--fill:255, 255, 255;--text:0, 117, 78}.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 105, 70;--fill:255, 255, 255;--text:0, 105, 70}.cat-button-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--base:159, 97, 0}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 214, 148;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 222, 168;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--base:217, 52, 13}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:194, 46, 11;--fill:255, 255, 255;--text:194, 46, 11}.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:174, 42, 10;--fill:255, 255, 255;--text: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.25rem 0.25rem;font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400)}.cat-button-xs .cat-button-prefix{margin-right:0.25rem}.cat-button-xs .cat-button-suffix{margin-left:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xs{padding-left:1.25rem;padding-right:1.25rem}:host(.cat-button-pull[size=xs]){margin:-0.25rem -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.25rem;margin-bottom:-0.25rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.25rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.25rem}: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;font-weight:var(--cat-font-weight-body, 400)}.cat-button-s .cat-button-prefix{margin-right:0.25rem}.cat-button-s .cat-button-suffix{margin-left:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-s{padding-left:1.25rem;padding-right:1.25rem}: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;font-weight:var(--cat-font-weight-body, 400)}.cat-button-m .cat-button-prefix{margin-right:0.25rem}.cat-button-m .cat-button-suffix{margin-left:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-m{padding-left:1.25rem;padding-right:1.25rem}: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;font-weight:var(--cat-font-weight-body, 400)}.cat-button-l .cat-button-prefix{margin-right:0.25rem}.cat-button-l .cat-button-suffix{margin-left:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-l{padding-left:1.25rem;padding-right:1.25rem}: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;font-weight:var(--cat-font-weight-body, 400)}.cat-button-xl .cat-button-prefix{margin-right:0.25rem}.cat-button-xl .cat-button-suffix{margin-left:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xl{padding-left:1.25rem;padding-right:1.25rem}: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}.cat-button-active::before{content:\"\";display:block;position:absolute;top:0;left:0;width:0.25rem;height:100%;background:rgb(var(--base))}:host-context(nav){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0;justify-content:left}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}";
|
|
278
287
|
|
|
279
288
|
const CatButton = class {
|
|
280
289
|
constructor(hostRef) {
|
|
@@ -355,7 +364,7 @@ const CatButton = class {
|
|
|
355
364
|
}
|
|
356
365
|
componentWillRender() {
|
|
357
366
|
if (this.isIconButton && !this.a11yLabel) {
|
|
358
|
-
|
|
367
|
+
catNotification.loglevel.warn('[A11y] Missing ARIA label on icon button', this);
|
|
359
368
|
}
|
|
360
369
|
}
|
|
361
370
|
haltDisabledEvents(event) {
|
|
@@ -463,16 +472,31 @@ const CatCard = class {
|
|
|
463
472
|
};
|
|
464
473
|
CatCard.style = catCardCss;
|
|
465
474
|
|
|
466
|
-
|
|
475
|
+
/**
|
|
476
|
+
* CatFormHint is a functional component that represents the hint area of form elements.
|
|
477
|
+
*
|
|
478
|
+
* @param props - {@link CatFormHintProps}
|
|
479
|
+
* @return a JSX.Element
|
|
480
|
+
*/
|
|
481
|
+
const CatFormHint = props => {
|
|
482
|
+
const { hint, slottedHint } = props;
|
|
483
|
+
return (index.h("div", { class: "hint-section" }, [
|
|
484
|
+
hint &&
|
|
485
|
+
(Array.isArray(hint) ? hint.map(item => index.h("p", { class: "input-hint" }, item)) : index.h("p", { class: "input-hint" }, hint)),
|
|
486
|
+
slottedHint
|
|
487
|
+
]));
|
|
488
|
+
};
|
|
489
|
+
|
|
490
|
+
const catCheckboxCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}: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{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid #d7dbe0;border-radius:0.125rem;transition:background-color 0.13s ease, border-color 0.13s ease;pointer-events:none}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:70%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.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, 105, 118, 135))}";
|
|
467
491
|
|
|
468
|
-
let nextUniqueId$
|
|
492
|
+
let nextUniqueId$8 = 0;
|
|
469
493
|
const CatCheckbox = class {
|
|
470
494
|
constructor(hostRef) {
|
|
471
495
|
index.registerInstance(this, hostRef);
|
|
472
496
|
this.catChange = index.createEvent(this, "catChange", 7);
|
|
473
497
|
this.catFocus = index.createEvent(this, "catFocus", 7);
|
|
474
498
|
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
475
|
-
this.id = `cat-checkbox-${nextUniqueId$
|
|
499
|
+
this.id = `cat-checkbox-${nextUniqueId$8++}`;
|
|
476
500
|
this.hasSlottedLabel = false;
|
|
477
501
|
/**
|
|
478
502
|
* Checked state of the checkbox
|
|
@@ -511,7 +535,7 @@ const CatCheckbox = class {
|
|
|
511
535
|
componentWillRender() {
|
|
512
536
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
513
537
|
if (!this.label && !this.hasSlottedLabel) {
|
|
514
|
-
|
|
538
|
+
catNotification.loglevel.error('[A11y] Missing ARIA label on checkbox', this);
|
|
515
539
|
}
|
|
516
540
|
}
|
|
517
541
|
/**
|
|
@@ -528,7 +552,7 @@ const CatCheckbox = class {
|
|
|
528
552
|
}
|
|
529
553
|
get hintSection() {
|
|
530
554
|
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
531
|
-
return ((this.hint || hasSlottedHint) && (index.h(
|
|
555
|
+
return ((this.hint || hasSlottedHint) && (index.h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
|
|
532
556
|
}
|
|
533
557
|
onInput(event) {
|
|
534
558
|
this.value = this.input.value;
|
|
@@ -568,9 +592,9 @@ const CatIcon = class {
|
|
|
568
592
|
};
|
|
569
593
|
CatIcon.style = catIconCss;
|
|
570
594
|
|
|
571
|
-
const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;margin-bottom:1rem}:host([hidden]){display:none}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:0.25rem;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px #d7dbe0}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}label{align-self:flex-start}label.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}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid #d7dbe0;padding-right:0.75rem}.text-suffix{border-left:1px solid #d7dbe0;padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
|
|
595
|
+
const catInputCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}.input-wrapper{display:flex;align-items:stretch;gap:0.75rem;padding:0 0.75rem;height:2.5rem;overflow:hidden;background:white;border-radius:0.25rem;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear}.input-wrapper.input-round{border-radius:10rem}.input-wrapper.input-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.input-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px #d7dbe0}.input-wrapper:not(.input-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}label{align-self:flex-start}label.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}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.text-prefix,.text-suffix{display:inline-flex;align-items:center;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.text-prefix{border-right:1px solid #d7dbe0;padding-right:0.75rem}.text-suffix{border-left:1px solid #d7dbe0;padding-left:0.75rem}.icon-prefix,.icon-suffix{align-self:center}.input-inner-wrapper{display:flex;position:relative;flex:1 1 auto}input{font:inherit;margin:0;padding:0;width:100%;min-width:0;border:none;outline:none;background:none}.input-disabled input{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}input.has-clearable{padding-right:1.5rem}input::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.clearable{position:absolute;top:calc(50% - 1rem);right:-0.5rem}";
|
|
572
596
|
|
|
573
|
-
let nextUniqueId$
|
|
597
|
+
let nextUniqueId$7 = 0;
|
|
574
598
|
const CatInput = class {
|
|
575
599
|
constructor(hostRef) {
|
|
576
600
|
index.registerInstance(this, hostRef);
|
|
@@ -578,7 +602,7 @@ const CatInput = class {
|
|
|
578
602
|
this.catFocus = index.createEvent(this, "catFocus", 7);
|
|
579
603
|
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
580
604
|
this.i18n = catNotification.CatI18nRegistry.getInstance();
|
|
581
|
-
this.id = `cat-input-${nextUniqueId$
|
|
605
|
+
this.id = `cat-input-${nextUniqueId$7++}`;
|
|
582
606
|
this.hasSlottedLabel = false;
|
|
583
607
|
/**
|
|
584
608
|
* Whether the input should show a clear button.
|
|
@@ -624,7 +648,7 @@ const CatInput = class {
|
|
|
624
648
|
componentWillRender() {
|
|
625
649
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
626
650
|
if (!this.label && !this.hasSlottedLabel) {
|
|
627
|
-
|
|
651
|
+
catNotification.loglevel.error('[A11y] Missing ARIA label on input', this);
|
|
628
652
|
}
|
|
629
653
|
}
|
|
630
654
|
/**
|
|
@@ -653,7 +677,7 @@ const CatInput = class {
|
|
|
653
677
|
}
|
|
654
678
|
get hintSection() {
|
|
655
679
|
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
656
|
-
return ((this.hint || hasSlottedHint) && (index.h(
|
|
680
|
+
return ((this.hint || hasSlottedHint) && (index.h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
|
|
657
681
|
}
|
|
658
682
|
onInput(event) {
|
|
659
683
|
this.value = this.input.value;
|
|
@@ -2904,13 +2928,13 @@ const firstTabbable = (container) => {
|
|
|
2904
2928
|
|
|
2905
2929
|
const catMenuCss = ":host{display:contents}:host([hidden]){display:none}.content{padding-top:0.5rem;padding-bottom:0.5rem;position:absolute;background:white;display:none;overflow:auto;-webkit-overflow-scrolling:touch;min-width:8rem;max-width:16rem;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:0.25rem;z-index:100}";
|
|
2906
2930
|
|
|
2907
|
-
let nextUniqueId$
|
|
2931
|
+
let nextUniqueId$6 = 0;
|
|
2908
2932
|
const CatMenu = class {
|
|
2909
2933
|
constructor(hostRef) {
|
|
2910
2934
|
index.registerInstance(this, hostRef);
|
|
2911
2935
|
this.catOpen = index.createEvent(this, "catOpen", 7);
|
|
2912
2936
|
this.catClose = index.createEvent(this, "catClose", 7);
|
|
2913
|
-
this.id = nextUniqueId$
|
|
2937
|
+
this.id = nextUniqueId$6++;
|
|
2914
2938
|
/**
|
|
2915
2939
|
* The placement of the menu.
|
|
2916
2940
|
*/
|
|
@@ -3069,16 +3093,16 @@ const CatModal = class {
|
|
|
3069
3093
|
};
|
|
3070
3094
|
CatModal.style = catModalCss;
|
|
3071
3095
|
|
|
3072
|
-
const catRadioCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;cursor:pointer}.label-left{flex-direction:row-reverse}.radio{display:flex;position:relative;align-self:flex-start}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid #d7dbe0;border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.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, 105, 118, 135))}.is-disabled input{background-color:#f8f8fb}.is-disabled input:checked{border-color:#d7dbe0}.is-disabled .circle{background-color:#d7dbe0}";
|
|
3096
|
+
const catRadioCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);cursor:pointer}.label-left{flex-direction:row-reverse}.radio{display:flex;position:relative;align-self:flex-start}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden;pointer-events:none}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid #d7dbe0;border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.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, 105, 118, 135))}.is-disabled input{background-color:#f8f8fb}.is-disabled input:checked{border-color:#d7dbe0}.is-disabled .circle{background-color:#d7dbe0}";
|
|
3073
3097
|
|
|
3074
|
-
let nextUniqueId$
|
|
3098
|
+
let nextUniqueId$5 = 0;
|
|
3075
3099
|
const CatRadio = class {
|
|
3076
3100
|
constructor(hostRef) {
|
|
3077
3101
|
index.registerInstance(this, hostRef);
|
|
3078
3102
|
this.catChange = index.createEvent(this, "catChange", 7);
|
|
3079
3103
|
this.catFocus = index.createEvent(this, "catFocus", 7);
|
|
3080
3104
|
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
3081
|
-
this.id = `cat-radio-${++nextUniqueId$
|
|
3105
|
+
this.id = `cat-radio-${++nextUniqueId$5}`;
|
|
3082
3106
|
this.hasSlottedLabel = false;
|
|
3083
3107
|
/**
|
|
3084
3108
|
* Whether this radio is checked.
|
|
@@ -3108,7 +3132,7 @@ const CatRadio = class {
|
|
|
3108
3132
|
componentWillRender() {
|
|
3109
3133
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
3110
3134
|
if (!this.label && !this.hasSlottedLabel) {
|
|
3111
|
-
|
|
3135
|
+
catNotification.loglevel.error('[A11y] Missing ARIA label on radio', this);
|
|
3112
3136
|
}
|
|
3113
3137
|
}
|
|
3114
3138
|
/**
|
|
@@ -3125,7 +3149,7 @@ const CatRadio = class {
|
|
|
3125
3149
|
}
|
|
3126
3150
|
get hintSection() {
|
|
3127
3151
|
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
3128
|
-
return ((this.hint || hasSlottedHint) && (index.h(
|
|
3152
|
+
return ((this.hint || hasSlottedHint) && (index.h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
|
|
3129
3153
|
}
|
|
3130
3154
|
onChange(event) {
|
|
3131
3155
|
this.checked = true;
|
|
@@ -3147,6 +3171,7 @@ const CatRadioGroup = class {
|
|
|
3147
3171
|
constructor(hostRef) {
|
|
3148
3172
|
index.registerInstance(this, hostRef);
|
|
3149
3173
|
this.catChange = index.createEvent(this, "catChange", 7);
|
|
3174
|
+
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
3150
3175
|
this.catRadioGroup = [];
|
|
3151
3176
|
/**
|
|
3152
3177
|
* Whether this radio group is disabled.
|
|
@@ -3208,6 +3233,11 @@ const CatRadioGroup = class {
|
|
|
3208
3233
|
this.value = catRadioElement === null || catRadioElement === void 0 ? void 0 : catRadioElement.value;
|
|
3209
3234
|
this.catChange.emit();
|
|
3210
3235
|
}
|
|
3236
|
+
onBlur(event) {
|
|
3237
|
+
if (!event.relatedTarget) {
|
|
3238
|
+
this.catBlur.emit(event);
|
|
3239
|
+
}
|
|
3240
|
+
}
|
|
3211
3241
|
render() {
|
|
3212
3242
|
return (index.h("div", { role: "radiogroup", "aria-label": this.a11yLabel }, index.h("slot", null)));
|
|
3213
3243
|
}
|
|
@@ -4560,7 +4590,7 @@ const CatScrollable = class {
|
|
|
4560
4590
|
};
|
|
4561
4591
|
CatScrollable.style = catScrollableCss;
|
|
4562
4592
|
|
|
4563
|
-
var choices =
|
|
4593
|
+
var choices = catNotification.createCommonjsModule(function (module, exports) {
|
|
4564
4594
|
/*! choices.js v10.1.0 | © 2022 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
|
|
4565
4595
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
4566
4596
|
module.exports = factory();
|
|
@@ -12040,11 +12070,11 @@ __webpack_exports__ = __webpack_exports__["default"];
|
|
|
12040
12070
|
});
|
|
12041
12071
|
});
|
|
12042
12072
|
|
|
12043
|
-
const Choices = /*@__PURE__*/
|
|
12073
|
+
const Choices = /*@__PURE__*/catNotification.getDefaultExportFromCjs(choices);
|
|
12044
12074
|
|
|
12045
|
-
const catSelectCss = "*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*::before,*::after{box-sizing:border-box}html,body{position:relative;margin:0;width:100%;height:100%}body{font-family:\"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0;margin-bottom:8px}hr{display:block;margin:30px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:visited,a:focus{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;appearance:none;margin-bottom:24px}h1,.h1{font-size:32px}h2,.h2{font-size:24px}h3,.h3{font-size:20px}h4,.h4{font-size:18px}h5,.h5{font-size:16px}h6,.h6{font-size:14px}label+p{margin-top:-4px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width: 620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:visited,.section a:focus{color:#00bcd4}.logo{display:block;margin-bottom:12px}.logo-img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.push-bottom{margin-bottom:24px}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}[data-test-hook]{margin-bottom:24px}.hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start;font-size:inherit;font-weight:inherit;margin:0}label.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}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.choices{position:relative;overflow:hidden;font-size:16px}.choices:focus{outline:none;box-shadow:0 1px 4px 0 #101d3033}.choices:last-child{margin-bottom:0}.choices.is-open{overflow:visible;box-shadow:0 1px 4px 0 #101d3033}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices [hidden]{display:none !important}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__list--dropdown .choices__list{padding-top:0.5rem}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:12px 16px 12px 40px;border-bottom:1px solid #d7dbe0;margin:0;color:#000;background:#fff url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjUgMC4yNUMzLjk0MzY1IDAuMjUgMC4yNSAzLjk0MzY1IDAuMjUgOC41QzAuMjUgMTMuMDU2MyAzLjk0MzY1IDE2Ljc1IDguNSAxNi43NUMxMC41MjU1IDE2Ljc1IDEyLjM4MDUgMTYuMDIwMSAxMy44MTYzIDE0LjgwODlDMTMuODUyNiAxNC44ODkyIDEzLjkwMzcgMTQuOTY0NCAxMy45Njk3IDE1LjAzMDNMMTYuNDY5NyAxNy41MzAzQzE2Ljc2MjYgMTcuODIzMiAxNy4yMzc0IDE3LjgyMzIgMTcuNTMwMyAxNy41MzAzQzE3LjgyMzIgMTcuMjM3NCAxNy44MjMyIDE2Ljc2MjYgMTcuNTMwMyAxNi40Njk3TDE1LjAzMDMgMTMuOTY5N0MxNC45NjQ0IDEzLjkwMzcgMTQuODg5MiAxMy44NTI2IDE0LjgwODkgMTMuODE2M0MxNi4wMjAxIDEyLjM4MDUgMTYuNzUgMTAuNTI1NSAxNi43NSA4LjVDMTYuNzUgMy45NDM2NSAxMy4wNTYzIDAuMjUgOC41IDAuMjVaTTEuNzUgOC41QzEuNzUgNC43NzIwOCA0Ljc3MjA4IDEuNzUgOC41IDEuNzVDMTIuMjI3OSAxLjc1IDE1LjI1IDQuNzcyMDggMTUuMjUgOC41QzE1LjI1IDEyLjIyNzkgMTIuMjI3OSAxNS4yNSA4LjUgMTUuMjVDNC43NzIwOCAxNS4yNSAxLjc1IDEyLjIyNzkgMS43NSA4LjVaIiBmaWxsPSIjNjk3Njg3Ii8+Cjwvc3ZnPgo=\") no-repeat left 12px center}.choices[data-type*=select-one] .choices__input::before{content:\"abc\"}.choices[data-type*=select-one] .choices__button{background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNDY5NjcgNi40Njk2N0M2Ljc2MjU2IDYuMTc2NzggNy4yMzc0NCA2LjE3Njc4IDcuNTMwMzMgNi40Njk2N0wxMCA4LjkzOTM0TDEyLjQ2OTcgNi40Njk2N0MxMi43NjI2IDYuMTc2NzggMTMuMjM3NCA2LjE3Njc4IDEzLjUzMDMgNi40Njk2N0MxMy44MjMyIDYuNzYyNTYgMTMuODIzMiA3LjIzNzQ0IDEzLjUzMDMgNy41MzAzM0wxMS4wNjA3IDEwTDEzLjUzMDMgMTIuNDY5N0MxMy44MjMyIDEyLjc2MjYgMTMuODIzMiAxMy4yMzc0IDEzLjUzMDMgMTMuNTMwM0MxMy4yMzc0IDEzLjgyMzIgMTIuNzYyNiAxMy44MjMyIDEyLjQ2OTcgMTMuNTMwM0wxMCAxMS4wNjA3TDcuNTMwMzMgMTMuNTMwM0M3LjIzNzQ0IDEzLjgyMzIgNi43NjI1NiAxMy44MjMyIDYuNDY5NjcgMTMuNTMwM0M2LjE3Njc4IDEzLjIzNzQgNi4xNzY3OCAxMi43NjI2IDYuNDY5NjcgMTIuNDY5N0w4LjkzOTM0IDEwTDYuNDY5NjcgNy41MzAzM0M2LjE3Njc4IDcuMjM3NDQgNi4xNzY3OCA2Ljc2MjU2IDYuNDY5NjcgNi40Njk2N1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMC4yNUM0LjYxNTIyIDAuMjUgMC4yNSA0LjYxNTIyIDAuMjUgMTBDMC4yNSAxNS4zODQ4IDQuNjE1MjIgMTkuNzUgMTAgMTkuNzVDMTUuMzg0OCAxOS43NSAxOS43NSAxNS4zODQ4IDE5Ljc1IDEwQzE5Ljc1IDQuNjE1MjIgMTUuMzg0OCAwLjI1IDEwIDAuMjVaTTEuNzUgMTBDMS43NSA1LjQ0MzY1IDUuNDQzNjUgMS43NSAxMCAxLjc1QzE0LjU1NjMgMS43NSAxOC4yNSA1LjQ0MzY1IDE4LjI1IDEwQzE4LjI1IDE0LjU1NjMgMTQuNTU2MyAxOC4yNSAxMCAxOC4yNUM1LjQ0MzY1IDE4LjI1IDEuNzUgMTQuNTU2MyAxLjc1IDEwWiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==\");padding:0;background-size:20px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:35px;height:20px;width:20px}.choices[data-type*=select-one] .choices__button:focus{box-shadow:0 0 0 2px rgba(105, 118, 135, 0.1)}.choices[data-type*=select-one] .choices__item[data-value=\"\"] .choices__button{display:none}.choices[data-type*=select-one] .choices__item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.choices[data-type*=select-one][dir=rtl]::after{left:11.5px;right:auto}.choices[data-type*=select-one][dir=rtl] .choices__button{right:auto;left:0;margin-left:35px;margin-right:0}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text;display:flex;flex-flow:row wrap;align-items:center;padding:4px 60px 4px 4px;gap:4px}.choices[data-type*=select-multiple] .choices__item cat-checkbox,.choices[data-type*=text] .choices__item cat-checkbox{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}.choices[data-type*=select-multiple] .choices__item cat-checkbox::part(label),.choices[data-type*=text] .choices__item cat-checkbox::part(label){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.choices[data-type*=select-multiple] .choices__input,.choices[data-type*=text] .choices__input{min-width:1ch;width:1ch}.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button{position:relative;display:inline-block;padding-left:24px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuMjc1MzIgMC4zOTEzNzFDMS4wMzEyNCAwLjE0NzI5NCAwLjYzNTUxIDAuMTQ3Mjk0IDAuMzkxNDMyIDAuMzkxMzcxQzAuMTQ3MzU1IDAuNjM1NDQ5IDAuMTQ3MzU1IDEuMDMxMTggMC4zOTE0MzIgMS4yNzUyNUw0LjExNjE2IDQuOTk5OThMMC4zOTE0MzIgOC43MjQ3QzAuMTQ3MzU1IDguOTY4NzggMC4xNDczNTUgOS4zNjQ1MSAwLjM5MTQzMiA5LjYwODU5QzAuNjM1NTEgOS44NTI2NyAxLjAzMTI0IDkuODUyNjcgMS4yNzUzMiA5LjYwODU5TDUuMDAwMDQgNS44ODM4Nkw4LjcyNDc3IDkuNjA4NTlDOC45Njg4NCA5Ljg1MjY3IDkuMzY0NTcgOS44NTI2NyA5LjYwODY1IDkuNjA4NTlDOS44NTI3MyA5LjM2NDUxIDkuODUyNzMgOC45Njg3OCA5LjYwODY1IDguNzI0N0w1Ljg4MzkyIDQuOTk5OThMOS42MDg2NSAxLjI3NTI1QzkuODUyNzMgMS4wMzExOCA5Ljg1MjczIDAuNjM1NDQ5IDkuNjA4NjUgMC4zOTEzNzFDOS4zNjQ1NyAwLjE0NzI5NCA4Ljk2ODg0IDAuMTQ3Mjk0IDguNzI0NzcgMC4zOTEzNzFMNS4wMDAwNCA0LjExNjFMMS4yNzUzMiAwLjM5MTM3MVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=\");background-size:10px;width:10px;line-height:1;opacity:0.75;border-radius:0}.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=text] .choices__button:hover,.choices[data-type*=text] .choices__button:focus{opacity:1}.choices[data-type*=select-multiple] cat-button,.choices[data-type*=text] cat-button{position:absolute;top:50%;right:0;margin-top:-20px;margin-right:25px}.choices[data-type*=select-multiple] cat-button::part(button),.choices[data-type*=text] cat-button::part(button){box-shadow:unset;background-color:transparent}.choices[data-type*=select-multiple][dir=rtl] .choices__inner,.choices[data-type*=text][dir=rtl] .choices__inner{padding-right:4px;padding-left:60px}.choices[data-type*=select-multiple][dir=rtl] cat-button,.choices[data-type*=text][dir=rtl] cat-button{right:auto;left:0;margin-left:25px;margin-right:0}.choices[data-type*=select-one]::after,.choices[data-type*=select-multiple]::after{content:\"\";width:12px;height:6.5px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEyIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC40Njk2NyAwLjQ2OTY3QzAuNzYyNTYzIDAuMTc2Nzc3IDEuMjM3NDQgMC4xNzY3NzcgMS41MzAzMyAwLjQ2OTY3TDYgNC45MzkzNEwxMC40Njk3IDAuNDY5NjcxQzEwLjc2MjYgMC4xNzY3NzggMTEuMjM3NCAwLjE3Njc3OCAxMS41MzAzIDAuNDY5NjcxQzExLjgyMzIgMC43NjI1NjQgMTEuODIzMiAxLjIzNzQ0IDExLjUzMDMgMS41MzAzM0w2LjUzMDMzIDYuNTMwMzNDNi4yMzc0NCA2LjgyMzIyIDUuNzYyNTYgNi44MjMyMiA1LjQ2OTY3IDYuNTMwMzNMMC40Njk2NyAxLjUzMDMzQzAuMTc2Nzc3IDEuMjM3NDQgMC4xNzY3NzcgMC43NjI1NjMgMC40Njk2NyAwLjQ2OTY3WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==\");position:absolute;right:11.5px;top:50%;margin-top:-2.5px;pointer-events:none;transition:transform 0.25s linear}.choices[data-type*=select-one][dir=rtl]::after,.choices[data-type*=select-multiple][dir=rtl]::after{left:11.5px;right:auto}.choices[data-type*=select-one].is-open::after,.choices[data-type*=select-multiple].is-open::after{transform:rotate(180deg);transition:transform 0.25s linear}.choices__inner{display:inline-block;vertical-align:top;width:100%;background-color:#fff;border:1px solid #d7dbe0;border-radius:4px;font-size:15px;min-height:40px;overflow:hidden}.is-open .choices__inner{border-radius:4px 4px 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 4px 4px}.choices__list{margin:0;padding-left:0;list-style:none}.choices__list--single{display:flex;padding:9px 50px 9px 12px;width:100%}[dir=rtl] .choices__list--single{padding-right:12px;padding-left:50px}.choices__list--single .choices__item{width:100%}.choices__list--multiple{display:contents}.choices__list--multiple .choices__item{font-size:0.9375rem;line-height:1.25rem;font-weight:600;display:inline-flex;align-items:center;justify-content:space-between;border-radius:2px;padding:5px 8px 5px 4px;background-color:rgba(105, 118, 135, 0.1);color:#000;word-break:break-all;box-sizing:border-box}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}[dir=rtl] .choices__list--multiple .choices__item{margin-right:0;margin-left:3.75px}.choices__list--multiple .choices__item.is-highlighted{background-color:rgba(94, 105, 121, 0.1)}.is-disabled .choices__list--multiple .choices__item{background-color:#aaaaaa}.choices__list--dropdown,.choices__list[aria-expanded]{visibility:hidden;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #d7dbe0;top:100%;margin-top:-1px;overflow:hidden;word-break:break-all;will-change:visibility;box-shadow:0 2px 4px 0 #101d3033;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.is-active.choices__list--dropdown,.is-active.choices__list[aria-expanded]{visibility:visible}.is-flipped .choices__list--dropdown,.is-flipped .choices__list[aria-expanded]{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:0.25rem 0.25rem 0 0}.choices__list--dropdown .choices__list,.choices__list[aria-expanded] .choices__list{position:relative;max-height:300px;padding:8px 0;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item{font-size:0.9375rem;line-height:1.25rem;font-weight:500;position:relative;padding:10px;min-height:40px}[dir=rtl] .choices__list--dropdown .choices__item,[dir=rtl] .choices__list[aria-expanded] .choices__item{text-align:right}@media (min-width: 640px){.choices__list--dropdown .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]),.choices__list[aria-expanded] .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]){padding-right:100px}[dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]),[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]){padding-right:10px}.choices__list--dropdown .choices__item--selectable::after,.choices__list[aria-expanded] .choices__item--selectable::after{content:attr(data-select-text);font-size:12px;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%)}[dir=rtl] .choices__list--dropdown .choices__item--selectable,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable{text-align:right;padding-left:100px}[dir=rtl] .choices__list--dropdown .choices__item--selectable::after,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable::after{right:auto;left:10px}}.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{background-color:rgba(105, 118, 135, 0.05)}.choices__list--dropdown .choices__item--selectable.is-highlighted::after,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after{opacity:0.5}.choices__item{cursor:default;border-left:3px solid transparent;transition:0.25s linear}.choices__item--selectable{cursor:pointer}.choices__item--selected{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}.choices__item--disabled{cursor:not-allowed;user-select:none;opacity:0.5}.choices__heading{font-weight:600;font-size:12px;padding:10px;border-bottom:1px solid #f4f5f6;color:gray}.choices__button{text-indent:-9999px;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.choices__button:focus{outline:none}.choices__input{display:inline-block;vertical-align:baseline;background-color:white;font-size:15px;font-family:var(--cat-font-family-body, \"Lato\"), system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";border:0;border-radius:0;max-width:100%;padding:7px 0 4px 2px}.choices__input:focus{outline:0}.choices__input::-webkit-search-decoration,.choices__input::-webkit-search-cancel-button,.choices__input::-webkit-search-results-button,.choices__input::-webkit-search-results-decoration{display:none}.choices__input::-ms-clear,.choices__input::-ms-reveal{display:none;width:0;height:0}[dir=rtl] .choices__input{padding-right:2px;padding-left:0}.choices__placeholder{opacity:0.5}.choices__group{padding:8px 16px;height:34px}.choices__group .choices__heading{font-style:normal;font-weight:700;font-size:14px;line-height:18px;padding:unset;border-bottom:0;color:#697687}.choices__group:not(:first-child){border-top:1px solid #f4f5f6;margin-top:8px}.d-flex{display:flex}.align-items-center{align-items:center}.choices-option-icon{width:20px;aspect-ratio:1;border-radius:0.125rem}";
|
|
12075
|
+
const catSelectCss = "*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*::before,*::after{box-sizing:border-box}html,body{position:relative;margin:0;width:100%;height:100%}body{font-family:\"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0;margin-bottom:8px}hr{display:block;margin:30px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:visited,a:focus{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;appearance:none;margin-bottom:24px}h1,.h1{font-size:32px}h2,.h2{font-size:24px}h3,.h3{font-size:20px}h4,.h4{font-size:18px}h5,.h5{font-size:16px}h6,.h6{font-size:14px}label+p{margin-top:-4px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width: 620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:visited,.section a:focus{color:#00bcd4}.logo{display:block;margin-bottom:12px}.logo-img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.push-bottom{margin-bottom:24px}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}[data-test-hook]{margin-bottom:24px}.hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start;font-size:inherit;font-weight:inherit;margin:0}label.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}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.choices{position:relative;overflow:hidden;font-size:16px}.choices.is-focused,.choices:focus{outline:none;box-shadow:0 1px 4px 0 #101d3033}.choices:last-child{margin-bottom:0}.choices.is-open{overflow:visible}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices [hidden]{display:none !important}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__list--dropdown .choices__list{padding-top:0.5rem}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:12px 16px 12px 40px;border-bottom:1px solid #d7dbe0;margin:0;color:#000;background:#fff url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik04LjUgMC4yNUMzLjk0MzY1IDAuMjUgMC4yNSAzLjk0MzY1IDAuMjUgOC41QzAuMjUgMTMuMDU2MyAzLjk0MzY1IDE2Ljc1IDguNSAxNi43NUMxMC41MjU1IDE2Ljc1IDEyLjM4MDUgMTYuMDIwMSAxMy44MTYzIDE0LjgwODlDMTMuODUyNiAxNC44ODkyIDEzLjkwMzcgMTQuOTY0NCAxMy45Njk3IDE1LjAzMDNMMTYuNDY5NyAxNy41MzAzQzE2Ljc2MjYgMTcuODIzMiAxNy4yMzc0IDE3LjgyMzIgMTcuNTMwMyAxNy41MzAzQzE3LjgyMzIgMTcuMjM3NCAxNy44MjMyIDE2Ljc2MjYgMTcuNTMwMyAxNi40Njk3TDE1LjAzMDMgMTMuOTY5N0MxNC45NjQ0IDEzLjkwMzcgMTQuODg5MiAxMy44NTI2IDE0LjgwODkgMTMuODE2M0MxNi4wMjAxIDEyLjM4MDUgMTYuNzUgMTAuNTI1NSAxNi43NSA4LjVDMTYuNzUgMy45NDM2NSAxMy4wNTYzIDAuMjUgOC41IDAuMjVaTTEuNzUgOC41QzEuNzUgNC43NzIwOCA0Ljc3MjA4IDEuNzUgOC41IDEuNzVDMTIuMjI3OSAxLjc1IDE1LjI1IDQuNzcyMDggMTUuMjUgOC41QzE1LjI1IDEyLjIyNzkgMTIuMjI3OSAxNS4yNSA4LjUgMTUuMjVDNC43NzIwOCAxNS4yNSAxLjc1IDEyLjIyNzkgMS43NSA4LjVaIiBmaWxsPSIjNjk3Njg3Ii8+Cjwvc3ZnPgo=\") no-repeat left 12px center}.choices[data-type*=select-one] .choices__input::before{content:\"abc\"}.choices[data-type*=select-one] .choices__button{background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuNDY5NjcgNi40Njk2N0M2Ljc2MjU2IDYuMTc2NzggNy4yMzc0NCA2LjE3Njc4IDcuNTMwMzMgNi40Njk2N0wxMCA4LjkzOTM0TDEyLjQ2OTcgNi40Njk2N0MxMi43NjI2IDYuMTc2NzggMTMuMjM3NCA2LjE3Njc4IDEzLjUzMDMgNi40Njk2N0MxMy44MjMyIDYuNzYyNTYgMTMuODIzMiA3LjIzNzQ0IDEzLjUzMDMgNy41MzAzM0wxMS4wNjA3IDEwTDEzLjUzMDMgMTIuNDY5N0MxMy44MjMyIDEyLjc2MjYgMTMuODIzMiAxMy4yMzc0IDEzLjUzMDMgMTMuNTMwM0MxMy4yMzc0IDEzLjgyMzIgMTIuNzYyNiAxMy44MjMyIDEyLjQ2OTcgMTMuNTMwM0wxMCAxMS4wNjA3TDcuNTMwMzMgMTMuNTMwM0M3LjIzNzQ0IDEzLjgyMzIgNi43NjI1NiAxMy44MjMyIDYuNDY5NjcgMTMuNTMwM0M2LjE3Njc4IDEzLjIzNzQgNi4xNzY3OCAxMi43NjI2IDYuNDY5NjcgMTIuNDY5N0w4LjkzOTM0IDEwTDYuNDY5NjcgNy41MzAzM0M2LjE3Njc4IDcuMjM3NDQgNi4xNzY3OCA2Ljc2MjU2IDYuNDY5NjcgNi40Njk2N1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAgMC4yNUM0LjYxNTIyIDAuMjUgMC4yNSA0LjYxNTIyIDAuMjUgMTBDMC4yNSAxNS4zODQ4IDQuNjE1MjIgMTkuNzUgMTAgMTkuNzVDMTUuMzg0OCAxOS43NSAxOS43NSAxNS4zODQ4IDE5Ljc1IDEwQzE5Ljc1IDQuNjE1MjIgMTUuMzg0OCAwLjI1IDEwIDAuMjVaTTEuNzUgMTBDMS43NSA1LjQ0MzY1IDUuNDQzNjUgMS43NSAxMCAxLjc1QzE0LjU1NjMgMS43NSAxOC4yNSA1LjQ0MzY1IDE4LjI1IDEwQzE4LjI1IDE0LjU1NjMgMTQuNTU2MyAxOC4yNSAxMCAxOC4yNUM1LjQ0MzY1IDE4LjI1IDEuNzUgMTQuNTU2MyAxLjc1IDEwWiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==\");padding:0;background-size:20px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:35px;height:20px;width:20px}.choices[data-type*=select-one] .choices__button:focus{box-shadow:0 0 0 2px rgba(105, 118, 135, 0.1)}.choices[data-type*=select-one] .choices__item[data-value=\"\"] .choices__button{display:none}.choices[data-type*=select-one] .choices__item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.choices[data-type*=select-one][dir=rtl]::after{left:11.5px;right:auto}.choices[data-type*=select-one][dir=rtl] .choices__button{right:auto;left:0;margin-left:35px;margin-right:0}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text;display:flex;flex-flow:row wrap;align-items:center;padding:4px 60px 4px 4px;gap:4px}.choices[data-type*=select-multiple] .choices__item cat-checkbox,.choices[data-type*=text] .choices__item cat-checkbox{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}.choices[data-type*=select-multiple] .choices__item cat-checkbox::part(label),.choices[data-type*=text] .choices__item cat-checkbox::part(label){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.choices[data-type*=select-multiple] .choices__input,.choices[data-type*=text] .choices__input{min-width:1ch;width:1ch}.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button{position:relative;display:inline-block;padding-left:24px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEuMjc1MzIgMC4zOTEzNzFDMS4wMzEyNCAwLjE0NzI5NCAwLjYzNTUxIDAuMTQ3Mjk0IDAuMzkxNDMyIDAuMzkxMzcxQzAuMTQ3MzU1IDAuNjM1NDQ5IDAuMTQ3MzU1IDEuMDMxMTggMC4zOTE0MzIgMS4yNzUyNUw0LjExNjE2IDQuOTk5OThMMC4zOTE0MzIgOC43MjQ3QzAuMTQ3MzU1IDguOTY4NzggMC4xNDczNTUgOS4zNjQ1MSAwLjM5MTQzMiA5LjYwODU5QzAuNjM1NTEgOS44NTI2NyAxLjAzMTI0IDkuODUyNjcgMS4yNzUzMiA5LjYwODU5TDUuMDAwMDQgNS44ODM4Nkw4LjcyNDc3IDkuNjA4NTlDOC45Njg4NCA5Ljg1MjY3IDkuMzY0NTcgOS44NTI2NyA5LjYwODY1IDkuNjA4NTlDOS44NTI3MyA5LjM2NDUxIDkuODUyNzMgOC45Njg3OCA5LjYwODY1IDguNzI0N0w1Ljg4MzkyIDQuOTk5OThMOS42MDg2NSAxLjI3NTI1QzkuODUyNzMgMS4wMzExOCA5Ljg1MjczIDAuNjM1NDQ5IDkuNjA4NjUgMC4zOTEzNzFDOS4zNjQ1NyAwLjE0NzI5NCA4Ljk2ODg0IDAuMTQ3Mjk0IDguNzI0NzcgMC4zOTEzNzFMNS4wMDAwNCA0LjExNjFMMS4yNzUzMiAwLjM5MTM3MVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=\");background-size:10px;width:10px;line-height:1;opacity:0.75;border-radius:0}.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=text] .choices__button:hover,.choices[data-type*=text] .choices__button:focus{opacity:1}.choices[data-type*=select-multiple] cat-button,.choices[data-type*=text] cat-button{position:absolute;top:50%;right:0;margin-top:-20px;margin-right:25px}.choices[data-type*=select-multiple] cat-button::part(button),.choices[data-type*=text] cat-button::part(button){box-shadow:unset;background-color:transparent}.choices[data-type*=select-multiple][dir=rtl] .choices__inner,.choices[data-type*=text][dir=rtl] .choices__inner{padding-right:4px;padding-left:60px}.choices[data-type*=select-multiple][dir=rtl] cat-button,.choices[data-type*=text][dir=rtl] cat-button{right:auto;left:0;margin-left:25px;margin-right:0}.choices[data-type*=select-one]::after,.choices[data-type*=select-multiple]::after{content:\"\";width:12px;height:6.5px;background-image:url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEyIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMC40Njk2NyAwLjQ2OTY3QzAuNzYyNTYzIDAuMTc2Nzc3IDEuMjM3NDQgMC4xNzY3NzcgMS41MzAzMyAwLjQ2OTY3TDYgNC45MzkzNEwxMC40Njk3IDAuNDY5NjcxQzEwLjc2MjYgMC4xNzY3NzggMTEuMjM3NCAwLjE3Njc3OCAxMS41MzAzIDAuNDY5NjcxQzExLjgyMzIgMC43NjI1NjQgMTEuODIzMiAxLjIzNzQ0IDExLjUzMDMgMS41MzAzM0w2LjUzMDMzIDYuNTMwMzNDNi4yMzc0NCA2LjgyMzIyIDUuNzYyNTYgNi44MjMyMiA1LjQ2OTY3IDYuNTMwMzNMMC40Njk2NyAxLjUzMDMzQzAuMTc2Nzc3IDEuMjM3NDQgMC4xNzY3NzcgMC43NjI1NjMgMC40Njk2NyAwLjQ2OTY3WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==\");position:absolute;right:11.5px;top:50%;margin-top:-2.5px;pointer-events:none;transition:transform 0.25s linear}.choices[data-type*=select-one][dir=rtl]::after,.choices[data-type*=select-multiple][dir=rtl]::after{left:11.5px;right:auto}.choices[data-type*=select-one].is-open::after,.choices[data-type*=select-multiple].is-open::after{transform:rotate(180deg);transition:transform 0.25s linear}.choices__inner{display:inline-block;vertical-align:top;width:100%;background-color:#fff;border:1px solid #d7dbe0;border-radius:4px;font-size:15px;min-height:40px;overflow:hidden}.is-open .choices__inner{border-radius:4px 4px 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 4px 4px}.choices__list{margin:0;padding-left:0;list-style:none}.choices__list--single{display:flex;padding:9px 50px 9px 12px;width:100%}[dir=rtl] .choices__list--single{padding-right:12px;padding-left:50px}.choices__list--single .choices__item{width:100%}.choices__list--multiple{display:contents}.choices__list--multiple .choices__item{font-size:0.9375rem;line-height:1.25rem;font-weight:600;display:inline-flex;align-items:center;justify-content:space-between;border-radius:2px;padding:5px 8px 5px 4px;background-color:rgba(105, 118, 135, 0.1);color:#000;word-break:break-all;box-sizing:border-box}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}[dir=rtl] .choices__list--multiple .choices__item{margin-right:0;margin-left:3.75px}.choices__list--multiple .choices__item.is-highlighted{background-color:rgba(94, 105, 121, 0.1)}.is-disabled .choices__list--multiple .choices__item{background-color:#aaaaaa}.choices__list--dropdown,.choices__list[aria-expanded]{visibility:hidden;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #d7dbe0;top:100%;margin-top:-1px;overflow:hidden;word-break:break-all;will-change:visibility;box-shadow:0 2px 4px 0 #101d3033;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.is-active.choices__list--dropdown,.is-active.choices__list[aria-expanded]{visibility:visible}.is-flipped .choices__list--dropdown,.is-flipped .choices__list[aria-expanded]{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:0.25rem 0.25rem 0 0}.choices__list--dropdown .choices__list,.choices__list[aria-expanded] .choices__list{position:relative;max-height:300px;padding:8px 0;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item{font-size:0.9375rem;line-height:1.25rem;font-weight:500;position:relative;padding:10px;min-height:40px}[dir=rtl] .choices__list--dropdown .choices__item,[dir=rtl] .choices__list[aria-expanded] .choices__item{text-align:right}@media (min-width: 640px){.choices__list--dropdown .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]),.choices__list[aria-expanded] .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]){padding-right:100px}[dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]),[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text]:not([data-select-text=\"\"]){padding-right:10px}.choices__list--dropdown .choices__item--selectable::after,.choices__list[aria-expanded] .choices__item--selectable::after{content:attr(data-select-text);font-size:12px;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%)}[dir=rtl] .choices__list--dropdown .choices__item--selectable,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable{text-align:right;padding-left:100px}[dir=rtl] .choices__list--dropdown .choices__item--selectable::after,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable::after{right:auto;left:10px}}.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{background-color:rgba(105, 118, 135, 0.05)}.choices__list--dropdown .choices__item--selectable.is-highlighted::after,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after{opacity:0.5}.choices__item{cursor:default;border-left:3px solid transparent;transition:0.25s linear}.choices__item--selectable{cursor:pointer}.choices__item--selected{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}.choices__item--disabled{cursor:not-allowed;user-select:none;opacity:0.5}.choices__heading{font-weight:600;font-size:12px;padding:10px;border-bottom:1px solid #f4f5f6;color:gray}.choices__button{text-indent:-9999px;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.choices__button:focus{outline:none}.choices__input{display:inline-block;vertical-align:baseline;background-color:white;font-size:15px;font-family:var(--cat-font-family-body, \"Lato\"), system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";border:0;border-radius:0;max-width:100%;padding:7px 0 4px 2px}.choices__input:focus{outline:0}.choices__input::-webkit-search-decoration,.choices__input::-webkit-search-cancel-button,.choices__input::-webkit-search-results-button,.choices__input::-webkit-search-results-decoration{display:none}.choices__input::-ms-clear,.choices__input::-ms-reveal{display:none;width:0;height:0}[dir=rtl] .choices__input{padding-right:2px;padding-left:0}.choices__placeholder{opacity:0.5}.choices__group{padding:8px 16px;height:34px}.choices__group .choices__heading{font-style:normal;font-weight:700;font-size:14px;line-height:18px;padding:unset;border-bottom:0;color:#697687}.choices__group:not(:first-child){border-top:1px solid #f4f5f6;margin-top:8px}.d-flex{display:flex}.align-items-center{align-items:center}.choices-option-icon{width:20px;aspect-ratio:1;border-radius:0.125rem}";
|
|
12046
12076
|
|
|
12047
|
-
let nextUniqueId$
|
|
12077
|
+
let nextUniqueId$4 = 0;
|
|
12048
12078
|
const getOptionTemplate = (data) => {
|
|
12049
12079
|
var _a;
|
|
12050
12080
|
if ((_a = data.customProperties) === null || _a === void 0 ? void 0 : _a.imageUrl) {
|
|
@@ -12063,8 +12093,9 @@ const CatSelect = class {
|
|
|
12063
12093
|
this.catChange = index.createEvent(this, "catChange", 7);
|
|
12064
12094
|
this.catSearch = index.createEvent(this, "catSearch", 7);
|
|
12065
12095
|
this.catScrolledBottom = index.createEvent(this, "catScrolledBottom", 7);
|
|
12096
|
+
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
12066
12097
|
this.i18n = catNotification.CatI18nRegistry.getInstance();
|
|
12067
|
-
this.id = `cat-select-${nextUniqueId$
|
|
12098
|
+
this.id = `cat-select-${nextUniqueId$4++}`;
|
|
12068
12099
|
this.resetItemsOnNextValueChange = true;
|
|
12069
12100
|
this.hasSlottedLabel = false;
|
|
12070
12101
|
/**
|
|
@@ -12113,7 +12144,8 @@ const CatSelect = class {
|
|
|
12113
12144
|
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.setChoices(choices, 'value', 'label', true);
|
|
12114
12145
|
const vItems = ((_b = this.choice) === null || _b === void 0 ? void 0 : _b.getValue()) || [];
|
|
12115
12146
|
const vItemsArray = (Array.isArray(vItems) ? vItems : [vItems]);
|
|
12116
|
-
const
|
|
12147
|
+
const value = this.value || [];
|
|
12148
|
+
const vItemValues = [...value];
|
|
12117
12149
|
// remove duplicate items
|
|
12118
12150
|
(_c = this.choice) === null || _c === void 0 ? void 0 : _c.unhighlightAll();
|
|
12119
12151
|
vItemsArray.forEach(vItem => {
|
|
@@ -12129,6 +12161,7 @@ const CatSelect = class {
|
|
|
12129
12161
|
});
|
|
12130
12162
|
(_d = this.choice) === null || _d === void 0 ? void 0 : _d.removeHighlightedItems(false);
|
|
12131
12163
|
}
|
|
12164
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
12132
12165
|
setValueHandler(value) {
|
|
12133
12166
|
var _a, _b;
|
|
12134
12167
|
if (this.resetItemsOnNextValueChange) {
|
|
@@ -12141,39 +12174,51 @@ const CatSelect = class {
|
|
|
12141
12174
|
componentWillRender() {
|
|
12142
12175
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
12143
12176
|
if (!this.label && !this.hasSlottedLabel) {
|
|
12144
|
-
|
|
12177
|
+
catNotification.loglevel.error('[A11y] Missing ARIA label on select', this);
|
|
12145
12178
|
}
|
|
12146
12179
|
}
|
|
12147
12180
|
componentDidLoad() {
|
|
12148
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
12181
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
12149
12182
|
this.init();
|
|
12150
12183
|
const attachedInternals = (_b = (_a = this.hostElement).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
12151
12184
|
if (attachedInternals) {
|
|
12152
12185
|
const root = attachedInternals.shadowRoot;
|
|
12186
|
+
this.choicesElement = (root === null || root === void 0 ? void 0 : root.querySelector('.choices')) || undefined;
|
|
12153
12187
|
this.choiceInner = (root === null || root === void 0 ? void 0 : root.querySelector('.choices__inner')) || undefined;
|
|
12154
12188
|
this.choiceDropdown = ((_c = root === null || root === void 0 ? void 0 : root.querySelector('.choices__list--dropdown')) === null || _c === void 0 ? void 0 : _c.firstElementChild) || undefined;
|
|
12155
12189
|
}
|
|
12156
|
-
(_d = this.
|
|
12157
|
-
(_e = this.
|
|
12158
|
-
(_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.addEventListener('
|
|
12159
|
-
(_g = this.
|
|
12190
|
+
(_d = this.choicesElement) === null || _d === void 0 ? void 0 : _d.addEventListener('click', this.resetFocus.bind(this));
|
|
12191
|
+
(_e = this.choiceInner) === null || _e === void 0 ? void 0 : _e.addEventListener('click', this.showDropdownHandler.bind(this));
|
|
12192
|
+
(_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.addEventListener('hideDropdown', this.showMultipleFocus.bind(this));
|
|
12193
|
+
(_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.addEventListener('showDropdown', this.showMultipleFocus.bind(this));
|
|
12194
|
+
(_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.addEventListener('removeItem', this.resetFocus.bind(this));
|
|
12195
|
+
(_j = this.selectElement) === null || _j === void 0 ? void 0 : _j.addEventListener('change', this.onChange.bind(this));
|
|
12196
|
+
(_k = this.selectElement) === null || _k === void 0 ? void 0 : _k.addEventListener('search', this.onSearch.bind(this));
|
|
12197
|
+
(_l = this.choiceDropdown) === null || _l === void 0 ? void 0 : _l.addEventListener('scroll', this.onScrolledBottom.bind(this));
|
|
12160
12198
|
if (this.multiple) {
|
|
12161
|
-
(
|
|
12199
|
+
(_m = this.selectElement) === null || _m === void 0 ? void 0 : _m.addEventListener('choice', this.onChoice.bind(this));
|
|
12162
12200
|
this.createRemoveItemButton();
|
|
12163
12201
|
}
|
|
12164
12202
|
}
|
|
12165
12203
|
disconnectedCallback() {
|
|
12166
|
-
var _a, _b, _c, _d, _e, _f;
|
|
12204
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
12167
12205
|
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
12168
12206
|
this.choice = undefined;
|
|
12169
|
-
(_b = this.
|
|
12170
|
-
(_c = this.
|
|
12171
|
-
(_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('
|
|
12172
|
-
(_e = this.
|
|
12207
|
+
(_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', this.resetFocus.bind(this));
|
|
12208
|
+
(_c = this.choiceInner) === null || _c === void 0 ? void 0 : _c.removeEventListener('click', this.showDropdownHandler.bind(this));
|
|
12209
|
+
(_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('hideDropdown', this.showMultipleFocus.bind(this));
|
|
12210
|
+
(_e = this.selectElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('showDropdown', this.showMultipleFocus.bind(this));
|
|
12211
|
+
(_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('removeItem', this.resetFocus.bind(this));
|
|
12212
|
+
(_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.removeEventListener('change', this.onChange.bind(this));
|
|
12213
|
+
(_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.removeEventListener('search', this.onSearch.bind(this));
|
|
12214
|
+
(_j = this.choiceDropdown) === null || _j === void 0 ? void 0 : _j.removeEventListener('scroll', this.onScrolledBottom.bind(this));
|
|
12173
12215
|
if (this.multiple) {
|
|
12174
|
-
(
|
|
12216
|
+
(_k = this.removeElement) === null || _k === void 0 ? void 0 : _k.removeEventListener('choice', this.onChoice.bind(this));
|
|
12175
12217
|
}
|
|
12176
12218
|
}
|
|
12219
|
+
onBlur(event) {
|
|
12220
|
+
this.catBlur.emit(event);
|
|
12221
|
+
}
|
|
12177
12222
|
render() {
|
|
12178
12223
|
return (index.h(index.Host, null, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, !this.required && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(", this.i18n.t('input.optional'), ")"))))), index.h("select", { id: this.id, ref: el => (this.selectElement = el), multiple: this.multiple, disabled: this.disabled }), this.hintSection));
|
|
12179
12224
|
}
|
|
@@ -12275,7 +12320,7 @@ const CatSelect = class {
|
|
|
12275
12320
|
}
|
|
12276
12321
|
get hintSection() {
|
|
12277
12322
|
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
12278
|
-
return ((this.hint || hasSlottedHint) && (index.h(
|
|
12323
|
+
return ((this.hint || hasSlottedHint) && (index.h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
|
|
12279
12324
|
}
|
|
12280
12325
|
onChange() {
|
|
12281
12326
|
var _a;
|
|
@@ -12283,12 +12328,30 @@ const CatSelect = class {
|
|
|
12283
12328
|
this.value = (_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue(true);
|
|
12284
12329
|
this.catChange.emit(this.value);
|
|
12285
12330
|
}
|
|
12331
|
+
showMultipleFocus() {
|
|
12332
|
+
var _a, _b;
|
|
12333
|
+
if (this.multiple && this.isFocused() && !((_a = this.choicesElement) === null || _a === void 0 ? void 0 : _a.classList.contains('is-focused'))) {
|
|
12334
|
+
(_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.classList.add('is-focused');
|
|
12335
|
+
}
|
|
12336
|
+
}
|
|
12337
|
+
resetFocus() {
|
|
12338
|
+
var _a, _b, _c;
|
|
12339
|
+
if (!this.isFocused()) {
|
|
12340
|
+
if (!((_a = this.choicesElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('tabindex'))) {
|
|
12341
|
+
(_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
|
|
12342
|
+
}
|
|
12343
|
+
(_c = this.choicesElement) === null || _c === void 0 ? void 0 : _c.focus();
|
|
12344
|
+
}
|
|
12345
|
+
}
|
|
12346
|
+
isFocused() {
|
|
12347
|
+
return document.activeElement === this.hostElement;
|
|
12348
|
+
}
|
|
12286
12349
|
onChoice(event) {
|
|
12287
12350
|
var _a;
|
|
12288
12351
|
const customEvent = event;
|
|
12289
|
-
const
|
|
12290
|
-
if (
|
|
12291
|
-
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItemsByValue(
|
|
12352
|
+
const choice = customEvent.detail.choice;
|
|
12353
|
+
if (choice.selected) {
|
|
12354
|
+
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItemsByValue(choice.value);
|
|
12292
12355
|
this.onChange();
|
|
12293
12356
|
}
|
|
12294
12357
|
}
|
|
@@ -12320,8 +12383,7 @@ const CatSelect = class {
|
|
|
12320
12383
|
}
|
|
12321
12384
|
updateRemoveItemButtonVisibility() {
|
|
12322
12385
|
var _a, _b, _c;
|
|
12323
|
-
|
|
12324
|
-
if (items.length) {
|
|
12386
|
+
if ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) {
|
|
12325
12387
|
(_b = this.removeElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('hidden');
|
|
12326
12388
|
}
|
|
12327
12389
|
else {
|
|
@@ -12332,7 +12394,7 @@ const CatSelect = class {
|
|
|
12332
12394
|
var _a;
|
|
12333
12395
|
event.stopPropagation();
|
|
12334
12396
|
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItems(-1);
|
|
12335
|
-
this.
|
|
12397
|
+
this.onChange();
|
|
12336
12398
|
}
|
|
12337
12399
|
get hostElement() { return index.getElement(this); }
|
|
12338
12400
|
static get watchers() { return {
|
|
@@ -12412,7 +12474,7 @@ CatSpinner.style = catSpinnerCss;
|
|
|
12412
12474
|
|
|
12413
12475
|
const catTabCss = ":host{display:block}:host([hidden]){display:none}";
|
|
12414
12476
|
|
|
12415
|
-
let nextUniqueId$
|
|
12477
|
+
let nextUniqueId$3 = 0;
|
|
12416
12478
|
const CatTab = class {
|
|
12417
12479
|
constructor(hostRef) {
|
|
12418
12480
|
index.registerInstance(this, hostRef);
|
|
@@ -12436,7 +12498,7 @@ const CatTab = class {
|
|
|
12436
12498
|
}
|
|
12437
12499
|
connectedCallback() {
|
|
12438
12500
|
if (!this.hostElement.id) {
|
|
12439
|
-
this.hostElement.id = `cat-tab-${nextUniqueId$
|
|
12501
|
+
this.hostElement.id = `cat-tab-${nextUniqueId$3++}`;
|
|
12440
12502
|
}
|
|
12441
12503
|
}
|
|
12442
12504
|
onClick(event) {
|
|
@@ -12454,8 +12516,8 @@ const catTabsCss = ":host{display:flex;flex-direction:row;box-shadow:inset 0 -1p
|
|
|
12454
12516
|
const CatTabs = class {
|
|
12455
12517
|
constructor(hostRef) {
|
|
12456
12518
|
index.registerInstance(this, hostRef);
|
|
12457
|
-
this.tabs = [];
|
|
12458
12519
|
this.buttons = [];
|
|
12520
|
+
this.tabs = [];
|
|
12459
12521
|
/**
|
|
12460
12522
|
* The ID of the active tab.
|
|
12461
12523
|
*/
|
|
@@ -12470,11 +12532,24 @@ const CatTabs = class {
|
|
|
12470
12532
|
activeTab === null || activeTab === void 0 ? void 0 : activeTab.click();
|
|
12471
12533
|
}
|
|
12472
12534
|
componentWillLoad() {
|
|
12473
|
-
this.
|
|
12535
|
+
this.syncTabs();
|
|
12474
12536
|
if (this.tabs.length) {
|
|
12475
12537
|
this.activeTabId = this.activeTab;
|
|
12476
12538
|
}
|
|
12477
12539
|
}
|
|
12540
|
+
componentDidLoad() {
|
|
12541
|
+
var _a;
|
|
12542
|
+
this.mutationObserver = new MutationObserver(mutations => mutations.some(value => value.target.nodeName === 'CAT-TAB') && this.syncTabs());
|
|
12543
|
+
(_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.hostElement, {
|
|
12544
|
+
childList: true,
|
|
12545
|
+
attributes: true,
|
|
12546
|
+
subtree: true
|
|
12547
|
+
});
|
|
12548
|
+
}
|
|
12549
|
+
disconnectedCallback() {
|
|
12550
|
+
var _a;
|
|
12551
|
+
(_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
12552
|
+
}
|
|
12478
12553
|
onKeydown(event) {
|
|
12479
12554
|
var _a;
|
|
12480
12555
|
if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
|
|
@@ -12504,6 +12579,9 @@ const CatTabs = class {
|
|
|
12504
12579
|
this.buttons.push(button);
|
|
12505
12580
|
}
|
|
12506
12581
|
}
|
|
12582
|
+
syncTabs() {
|
|
12583
|
+
this.tabs = Array.from(this.hostElement.querySelectorAll('cat-tab'));
|
|
12584
|
+
}
|
|
12507
12585
|
get hostElement() { return index.getElement(this); }
|
|
12508
12586
|
static get watchers() { return {
|
|
12509
12587
|
"activeTabId": ["onActiveTabChanged"]
|
|
@@ -12511,6 +12589,87 @@ const CatTabs = class {
|
|
|
12511
12589
|
};
|
|
12512
12590
|
CatTabs.style = catTabsCss;
|
|
12513
12591
|
|
|
12592
|
+
var e,t,n="function"==typeof Map?new Map:(e=[],t=[],{has:function(t){return e.indexOf(t)>-1},get:function(n){return t[e.indexOf(n)]},set:function(n,o){-1===e.indexOf(n)&&(e.push(n),t.push(o));},delete:function(n){var o=e.indexOf(n);o>-1&&(e.splice(o,1),t.splice(o,1));}}),o=function(e){return new Event(e,{bubbles:!0})};try{new Event("test");}catch(e){o=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t};}function r(e){var t=n.get(e);t&&t.destroy();}function i(e){var t=n.get(e);t&&t.update();}var l=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?((l=function(e){return e}).destroy=function(e){return e},l.update=function(e){return e}):((l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return function(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!n.has(e)){var t,r=null,i=null,l=null,d=function(){e.clientWidth!==i&&c();},a=function(t){window.removeEventListener("resize",d,!1),e.removeEventListener("input",c,!1),e.removeEventListener("keyup",c,!1),e.removeEventListener("autosize:destroy",a,!1),e.removeEventListener("autosize:update",c,!1),Object.keys(t).forEach(function(n){e.style[n]=t[n];}),n.delete(e);}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener("autosize:destroy",a,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",c,!1),window.addEventListener("resize",d,!1),e.addEventListener("input",c,!1),e.addEventListener("autosize:update",c,!1),e.style.overflowX="hidden",e.style.wordWrap="break-word",n.set(e,{destroy:a,update:c}),"vertical"===(t=window.getComputedStyle(e,null)).resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),r="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(r)&&(r=0),c();}function u(t){var n=e.style.width;e.style.width="0px",e.style.width=n,e.style.overflowY=t;}function s(){if(0!==e.scrollHeight){var t=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push({node:e.parentNode,scrollTop:e.parentNode.scrollTop}),e=e.parentNode;return t}(e),n=document.documentElement&&document.documentElement.scrollTop;e.style.height="",e.style.height=e.scrollHeight+r+"px",i=e.clientWidth,t.forEach(function(e){e.node.scrollTop=e.scrollTop;}),n&&(document.documentElement.scrollTop=n);}}function c(){s();var t=Math.round(parseFloat(e.style.height)),n=window.getComputedStyle(e,null),r="content-box"===n.boxSizing?Math.round(parseFloat(n.height)):e.offsetHeight;if(r<t?"hidden"===n.overflowY&&(u("scroll"),s(),r="content-box"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight):"hidden"!==n.overflowY&&(u("hidden"),s(),r="content-box"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight),l!==r){l=r;var i=o("autosize:resized");try{e.dispatchEvent(i);}catch(e){}}}}(e)}),e}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e});var d=l;
|
|
12593
|
+
|
|
12594
|
+
const catTextareaCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start}label.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}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}textarea{margin:0;padding:0.625rem 0.75rem;min-height:2.5rem;font:inherit;background:white;border-radius:0.25rem;border:none;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear}textarea:disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));resize:none}textarea:hover:not(:disabled){box-shadow:0 0 0 2px #d7dbe0}textarea:focus{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}textarea::placeholder{color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
|
|
12595
|
+
|
|
12596
|
+
let nextUniqueId$2 = 0;
|
|
12597
|
+
const CatTextarea = class {
|
|
12598
|
+
constructor(hostRef) {
|
|
12599
|
+
index.registerInstance(this, hostRef);
|
|
12600
|
+
this.catChange = index.createEvent(this, "catChange", 7);
|
|
12601
|
+
this.catFocus = index.createEvent(this, "catFocus", 7);
|
|
12602
|
+
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
12603
|
+
this.id = `cat-textarea-${nextUniqueId$2++}`;
|
|
12604
|
+
this.hasSlottedLabel = false;
|
|
12605
|
+
/**
|
|
12606
|
+
* Whether the textarea is disabled.
|
|
12607
|
+
*/
|
|
12608
|
+
this.disabled = false;
|
|
12609
|
+
/**
|
|
12610
|
+
* The label for the textarea.
|
|
12611
|
+
*/
|
|
12612
|
+
this.label = '';
|
|
12613
|
+
/**
|
|
12614
|
+
* Visually hide the label, but still show it to assistive technologies like screen readers.
|
|
12615
|
+
*/
|
|
12616
|
+
this.labelHidden = false;
|
|
12617
|
+
/**
|
|
12618
|
+
* The name of the form control. Submitted with the form as part of a name/value pair.
|
|
12619
|
+
*/
|
|
12620
|
+
this.name = '';
|
|
12621
|
+
/**
|
|
12622
|
+
* The value is not editable.
|
|
12623
|
+
*/
|
|
12624
|
+
this.readonly = false;
|
|
12625
|
+
/**
|
|
12626
|
+
* A value is required or must be check for the form to be submittable.
|
|
12627
|
+
*/
|
|
12628
|
+
this.required = false;
|
|
12629
|
+
/**
|
|
12630
|
+
* Specifies the initial number of lines in the textarea.
|
|
12631
|
+
*/
|
|
12632
|
+
this.rows = 3;
|
|
12633
|
+
}
|
|
12634
|
+
componentWillRender() {
|
|
12635
|
+
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
12636
|
+
if (!this.label && !this.hasSlottedLabel) {
|
|
12637
|
+
catNotification.loglevel.error('[A11y] Missing ARIA label on textarea', this);
|
|
12638
|
+
}
|
|
12639
|
+
}
|
|
12640
|
+
componentDidLoad() {
|
|
12641
|
+
d(this.textarea);
|
|
12642
|
+
}
|
|
12643
|
+
/**
|
|
12644
|
+
* Sets focus on the textarea. Use this method instead of `textarea.focus()`.
|
|
12645
|
+
*
|
|
12646
|
+
* @param options An optional object providing options to control aspects of
|
|
12647
|
+
* the focusing process.
|
|
12648
|
+
*/
|
|
12649
|
+
async setFocus(options) {
|
|
12650
|
+
this.textarea.focus(options);
|
|
12651
|
+
}
|
|
12652
|
+
render() {
|
|
12653
|
+
return (index.h(index.Host, null, (this.hasSlottedLabel || this.label) && (index.h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, index.h("span", { part: "label" }, (this.hasSlottedLabel && index.h("slot", { name: "label" })) || this.label, !this.required && (index.h("span", { class: "input-optional", "aria-hidden": "true" }, "(Optional)"))))), index.h("textarea", { ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, 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) }), this.hintSection));
|
|
12654
|
+
}
|
|
12655
|
+
get hintSection() {
|
|
12656
|
+
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
12657
|
+
return ((this.hint || hasSlottedHint) && (index.h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
|
|
12658
|
+
}
|
|
12659
|
+
onInput(event) {
|
|
12660
|
+
this.value = this.textarea.value;
|
|
12661
|
+
this.catChange.emit(event);
|
|
12662
|
+
}
|
|
12663
|
+
onFocus(event) {
|
|
12664
|
+
this.catFocus.emit(event);
|
|
12665
|
+
}
|
|
12666
|
+
onBlur(event) {
|
|
12667
|
+
this.catBlur.emit(event);
|
|
12668
|
+
}
|
|
12669
|
+
get hostElement() { return index.getElement(this); }
|
|
12670
|
+
};
|
|
12671
|
+
CatTextarea.style = catTextareaCss;
|
|
12672
|
+
|
|
12514
12673
|
const catToastDemoCss = ":host{display:block}";
|
|
12515
12674
|
|
|
12516
12675
|
const CatToastDemo = class {
|
|
@@ -12522,7 +12681,8 @@ const CatToastDemo = class {
|
|
|
12522
12681
|
}
|
|
12523
12682
|
onClick() {
|
|
12524
12683
|
const infoOptions = {
|
|
12525
|
-
position: 'top-left'
|
|
12684
|
+
position: 'top-left',
|
|
12685
|
+
type: 'info'
|
|
12526
12686
|
};
|
|
12527
12687
|
const errorOptions = {
|
|
12528
12688
|
position: 'top-center',
|
|
@@ -12543,6 +12703,16 @@ const CatToastDemo = class {
|
|
|
12543
12703
|
type: 'success',
|
|
12544
12704
|
content: template.content.firstChild
|
|
12545
12705
|
};
|
|
12706
|
+
const primaryOptions = {
|
|
12707
|
+
position: 'bottom-right',
|
|
12708
|
+
type: 'primary'
|
|
12709
|
+
};
|
|
12710
|
+
const secondaryOptions = {
|
|
12711
|
+
position: 'bottom-right',
|
|
12712
|
+
type: 'secondary'
|
|
12713
|
+
};
|
|
12714
|
+
catNotification.NotificationsService.secondary('Secondary Click', 'secondary info', secondaryOptions);
|
|
12715
|
+
catNotification.NotificationsService.primary('primary Click', 'secondary info', primaryOptions);
|
|
12546
12716
|
catNotification.NotificationsService.error('Default Click');
|
|
12547
12717
|
catNotification.NotificationsService.error('Long default title, long default title, long default title, long default title');
|
|
12548
12718
|
catNotification.NotificationsService.info('Info Click', 'Info message', infoOptions);
|
|
@@ -12554,7 +12724,7 @@ const CatToastDemo = class {
|
|
|
12554
12724
|
};
|
|
12555
12725
|
CatToastDemo.style = catToastDemoCss;
|
|
12556
12726
|
|
|
12557
|
-
const catToggleCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.label-left{flex-direction:row-reverse}input{position:absolute
|
|
12727
|
+
const catToggleCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}: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}.label-left{flex-direction:row-reverse}input{position:absolute;margin:0;width:2rem;height:1.25rem;opacity:0;cursor:inherit}.toggle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;position:relative;width:2rem;height:1.25rem;border-radius:10rem;background-color:#d7dbe0;transition:background-color 0.13s ease;pointer-events:none}:checked+.toggle{background-color:rgb(var(--cat-primary-bg, 32, 127, 138))}:focus-visible+.toggle{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.toggle::after{content:\"\";position:absolute;width:1rem;height:1rem;background:#fff;border-radius:10rem;transform:translateX(calc(2px - 0.5rem));transition:transform 0.13s linear;box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2)}:checked+.toggle::after{transform:translateX(calc(-2px + 0.5rem))}.label{flex:1 1 auto}.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, 105, 118, 135))}";
|
|
12558
12728
|
|
|
12559
12729
|
let nextUniqueId$1 = 0;
|
|
12560
12730
|
const CatToggle = class {
|
|
@@ -12593,7 +12763,7 @@ const CatToggle = class {
|
|
|
12593
12763
|
componentWillRender() {
|
|
12594
12764
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
12595
12765
|
if (!this.label && !this.hasSlottedLabel) {
|
|
12596
|
-
|
|
12766
|
+
catNotification.loglevel.error('[A11y] Missing ARIA label on toggle', this);
|
|
12597
12767
|
}
|
|
12598
12768
|
}
|
|
12599
12769
|
/**
|
|
@@ -12610,7 +12780,7 @@ const CatToggle = class {
|
|
|
12610
12780
|
}
|
|
12611
12781
|
get hintSection() {
|
|
12612
12782
|
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
12613
|
-
return ((this.hint || hasSlottedHint) && (index.h(
|
|
12783
|
+
return ((this.hint || hasSlottedHint) && (index.h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
|
|
12614
12784
|
}
|
|
12615
12785
|
onInput(event) {
|
|
12616
12786
|
this.value = this.input.value;
|
|
@@ -12628,7 +12798,7 @@ CatToggle.style = catToggleCss;
|
|
|
12628
12798
|
|
|
12629
12799
|
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
|
12630
12800
|
|
|
12631
|
-
const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{position:absolute;font-size:0.875rem;line-height:1rem;font-weight:500;padding:0.75rem;background-color:
|
|
12801
|
+
const catTooltipCss = ":host{display:contents}:host([hidden]){display:none}.tooltip{position:absolute;font-size:0.875rem;line-height:1rem;font-weight:500;padding:0.75rem;background-color:black;border-radius:0.25rem;color:white;transition:opacity 0.25s linear, visibility 0.25s linear;visibility:hidden;opacity:0;box-shadow:rgba(0, 0, 0, 0.08) 0 1px 8px 0;z-index:200;max-width:16rem}.tooltip-show{opacity:1;visibility:visible}.tooltip-trigger{display:inline-block}.tooltip-trigger:focus{outline:none}";
|
|
12632
12802
|
|
|
12633
12803
|
let nextUniqueId = 0;
|
|
12634
12804
|
const CatTooltip = class {
|
|
@@ -12772,8 +12942,9 @@ exports.cat_skeleton = CatSkeleton;
|
|
|
12772
12942
|
exports.cat_spinner = CatSpinner;
|
|
12773
12943
|
exports.cat_tab = CatTab;
|
|
12774
12944
|
exports.cat_tabs = CatTabs;
|
|
12945
|
+
exports.cat_textarea = CatTextarea;
|
|
12775
12946
|
exports.cat_toast_demo = CatToastDemo;
|
|
12776
12947
|
exports.cat_toggle = CatToggle;
|
|
12777
12948
|
exports.cat_tooltip = CatTooltip;
|
|
12778
12949
|
|
|
12779
|
-
//# sourceMappingURL=cat-
|
|
12950
|
+
//# sourceMappingURL=cat-alert_22.cjs.entry.js.map
|