@haiilo/catalyst 0.10.8 → 0.13.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-4ced6c7c.entry.js +12 -0
- package/dist/catalyst/p-4ced6c7c.entry.js.map +1 -0
- package/dist/catalyst/p-f88f8914.js +10 -0
- package/dist/catalyst/p-f88f8914.js.map +1 -0
- package/dist/catalyst/scss/core/_base.scss +0 -1
- package/dist/catalyst/scss/index.scss +1 -1
- 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} +245 -130
- package/dist/cjs/cat-alert_22.cjs.entry.js.map +1 -0
- package/dist/cjs/{cat-notification-c2859ed7.js → cat-notification-444c9ea0.js} +331 -14
- package/dist/cjs/cat-notification-444c9ea0.js.map +1 -0
- package/dist/cjs/catalyst.cjs.js +1 -1
- package/dist/cjs/index.cjs.js +1 -2
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/cat-badge/cat-badge.css +15 -15
- 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 +1 -1
- package/dist/collection/components/cat-input/cat-input.js.map +1 -1
- package/dist/collection/components/cat-radio/cat-radio.css +4 -0
- package/dist/collection/components/cat-radio-group/cat-radio-group.js +35 -4
- 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 +136 -200
- package/dist/collection/components/cat-select/cat-select.js.map +1 -1
- package/dist/collection/components/cat-textarea/cat-textarea.css +3 -0
- 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/index.scss +1 -1
- 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-avatar.js.map +1 -1
- package/dist/components/cat-badge.js +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 -3
- 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 +112 -100
- 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-textarea.js +1 -1
- package/dist/components/cat-textarea.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} +230 -116
- package/dist/esm/cat-alert_22.entry.js.map +1 -0
- package/dist/esm/{cat-notification-3da6ddb1.js → cat-notification-953c785d.js} +317 -3
- package/dist/esm/cat-notification-953c785d.js.map +1 -0
- package/dist/esm/catalyst.js +1 -1
- package/dist/esm/index.js +1 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/cat-input/cat-input.d.ts +1 -1
- package/dist/types/components/cat-radio-group/cat-radio-group.d.ts +14 -0
- package/dist/types/components/cat-select/cat-select.d.ts +22 -28
- package/dist/types/components.d.ts +36 -35
- package/dist/types/index.d.ts +1 -1
- package/package.json +2 -2
- package/dist/catalyst/p-2ad6f8d8.js +0 -2
- package/dist/catalyst/p-2ad6f8d8.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-c0b4200d.entry.js +0 -2
- package/dist/catalyst/p-c0b4200d.entry.js.map +0 -1
- package/dist/catalyst/p-e5c5e21d.entry.js +0 -12
- package/dist/catalyst/p-e5c5e21d.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/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/loglevel-c8b59c3a.js +0 -319
- package/dist/esm/loglevel-c8b59c3a.js.map +0 -1
|
@@ -3,9 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
const index = require('./index-936b777e.js');
|
|
6
|
-
const
|
|
7
|
-
const catFormHint = require('./cat-form-hint-25fdfed5.js');
|
|
8
|
-
const catNotification = require('./cat-notification-c2859ed7.js');
|
|
6
|
+
const catNotification = require('./cat-notification-444c9ea0.js');
|
|
9
7
|
|
|
10
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;color:rgb(var(--text));background-color:rgba(var(--bg), 0.1);box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);border-radius:0.25rem;padding:0.75rem 1rem}::slotted(:last-child){margin-bottom:0 !important}.alert-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--text:var(--cat-primary-text, 32, 127, 138);--border:var(--cat-primary-text, 32, 127, 138)}.alert-secondary{--bg:105, 118, 135;--text:0, 0, 0;--border:105, 118, 135}.alert-success{--bg:0, 132, 88;--text:0, 132, 88;--border:0, 132, 88}.alert-warning{--bg:255, 206, 128;--text:159, 97, 0;--border:159, 97, 0}.alert-danger{--bg:217, 52, 13;--text:217, 52, 13;--border:217, 52, 13}";
|
|
11
9
|
|
|
@@ -81,7 +79,7 @@ const CatAvatar = class {
|
|
|
81
79
|
}
|
|
82
80
|
componentWillRender() {
|
|
83
81
|
if (!this.label) {
|
|
84
|
-
|
|
82
|
+
catNotification.loglevel.warn('[A11y] Missing ARIA label on avatar', this);
|
|
85
83
|
}
|
|
86
84
|
}
|
|
87
85
|
render() {
|
|
@@ -120,7 +118,7 @@ const CatAvatar = class {
|
|
|
120
118
|
};
|
|
121
119
|
CatAvatar.style = catAvatarCss;
|
|
122
120
|
|
|
123
|
-
const catBadgeCss = ":host{display:inline-flex;max-width:100%;vertical-align:baseline}:host([hidden]){display:none}.badge{font:inherit;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:0.125rem;text-decoration:none;width:100%;box-sizing:border-box;line-height:1;white-space:nowrap}.badge slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.badge-round{border-radius:10rem}.badge-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.badge-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}.badge-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);--border:var(--cat-primary-text, 32, 127, 138)}.badge-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}.badge-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}.badge-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}.badge-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border:217, 52, 13}.badge-xs{height:
|
|
121
|
+
const catBadgeCss = ":host{display:inline-flex;max-width:100%;vertical-align:baseline}:host([hidden]){display:none}.badge{font:inherit;flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:0.125rem;text-decoration:none;width:100%;box-sizing:border-box;line-height:1;white-space:nowrap}.badge slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.badge-round{border-radius:10rem}.badge-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.badge-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}.badge-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);--border:var(--cat-primary-text, 32, 127, 138)}.badge-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}.badge-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}.badge-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}.badge-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border:217, 52, 13}.badge-xs{height:1rem;min-width:0.75rem;font-size:12px;padding:0 0.25rem}.badge-s{height:1.5rem;min-width:1rem;font-size:12px;padding:0 0.5rem}.badge-m{height:2rem;min-width:1.25rem;font-size:13px;padding:0 0.75rem}.badge-l{height:2.5rem;min-width:1.5rem;font-size:15px;padding:0 1rem}.badge-xl{height:3rem;min-width:1.75rem;font-size:18px;padding:0 1rem}.badge-pulse.badge-filled{animation:1.5s ease 0s infinite normal none running pulse}.badge-pulse.badge-outlined{animation:1.5s ease 0s infinite normal none running pulse-outlined}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--bg))}70%{box-shadow:transparent 0 0 0 0.5rem}100%{box-shadow:transparent 0 0 0 0}}@keyframes pulse-outlined{0%{box-shadow:0 0 0 0 rgb(var(--bg)), inset 0 0 0 1px rgba(var(--border), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--border), 0.2)}}";
|
|
124
122
|
|
|
125
123
|
const CatBadge = class {
|
|
126
124
|
constructor(hostRef) {
|
|
@@ -270,11 +268,11 @@ function createEmptyStyleRule(query) {
|
|
|
270
268
|
}
|
|
271
269
|
}
|
|
272
270
|
catch (e) {
|
|
273
|
-
|
|
271
|
+
catNotification.loglevel.error(e);
|
|
274
272
|
}
|
|
275
273
|
}
|
|
276
274
|
|
|
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}";
|
|
275
|
+
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
276
|
|
|
279
277
|
const CatButton = class {
|
|
280
278
|
constructor(hostRef) {
|
|
@@ -355,7 +353,7 @@ const CatButton = class {
|
|
|
355
353
|
}
|
|
356
354
|
componentWillRender() {
|
|
357
355
|
if (this.isIconButton && !this.a11yLabel) {
|
|
358
|
-
|
|
356
|
+
catNotification.loglevel.warn('[A11y] Missing ARIA label on icon button', this);
|
|
359
357
|
}
|
|
360
358
|
}
|
|
361
359
|
haltDisabledEvents(event) {
|
|
@@ -463,16 +461,31 @@ const CatCard = class {
|
|
|
463
461
|
};
|
|
464
462
|
CatCard.style = catCardCss;
|
|
465
463
|
|
|
466
|
-
|
|
464
|
+
/**
|
|
465
|
+
* CatFormHint is a functional component that represents the hint area of form elements.
|
|
466
|
+
*
|
|
467
|
+
* @param props - {@link CatFormHintProps}
|
|
468
|
+
* @return a JSX.Element
|
|
469
|
+
*/
|
|
470
|
+
const CatFormHint = props => {
|
|
471
|
+
const { hint, slottedHint } = props;
|
|
472
|
+
return (index.h("div", { class: "hint-section" }, [
|
|
473
|
+
hint &&
|
|
474
|
+
(Array.isArray(hint) ? hint.map(item => index.h("p", { class: "input-hint" }, item)) : index.h("p", { class: "input-hint" }, hint)),
|
|
475
|
+
slottedHint
|
|
476
|
+
]));
|
|
477
|
+
};
|
|
467
478
|
|
|
468
|
-
|
|
479
|
+
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))}";
|
|
480
|
+
|
|
481
|
+
let nextUniqueId$8 = 0;
|
|
469
482
|
const CatCheckbox = class {
|
|
470
483
|
constructor(hostRef) {
|
|
471
484
|
index.registerInstance(this, hostRef);
|
|
472
485
|
this.catChange = index.createEvent(this, "catChange", 7);
|
|
473
486
|
this.catFocus = index.createEvent(this, "catFocus", 7);
|
|
474
487
|
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
475
|
-
this.id = `cat-checkbox-${nextUniqueId$
|
|
488
|
+
this.id = `cat-checkbox-${nextUniqueId$8++}`;
|
|
476
489
|
this.hasSlottedLabel = false;
|
|
477
490
|
/**
|
|
478
491
|
* Checked state of the checkbox
|
|
@@ -511,7 +524,7 @@ const CatCheckbox = class {
|
|
|
511
524
|
componentWillRender() {
|
|
512
525
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
513
526
|
if (!this.label && !this.hasSlottedLabel) {
|
|
514
|
-
|
|
527
|
+
catNotification.loglevel.error('[A11y] Missing ARIA label on checkbox', this);
|
|
515
528
|
}
|
|
516
529
|
}
|
|
517
530
|
/**
|
|
@@ -528,7 +541,7 @@ const CatCheckbox = class {
|
|
|
528
541
|
}
|
|
529
542
|
get hintSection() {
|
|
530
543
|
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
531
|
-
return ((this.hint || hasSlottedHint) && (index.h(
|
|
544
|
+
return ((this.hint || hasSlottedHint) && (index.h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
|
|
532
545
|
}
|
|
533
546
|
onInput(event) {
|
|
534
547
|
this.value = this.input.value;
|
|
@@ -568,9 +581,9 @@ const CatIcon = class {
|
|
|
568
581
|
};
|
|
569
582
|
CatIcon.style = catIconCss;
|
|
570
583
|
|
|
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}";
|
|
584
|
+
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
585
|
|
|
573
|
-
let nextUniqueId$
|
|
586
|
+
let nextUniqueId$7 = 0;
|
|
574
587
|
const CatInput = class {
|
|
575
588
|
constructor(hostRef) {
|
|
576
589
|
index.registerInstance(this, hostRef);
|
|
@@ -578,7 +591,7 @@ const CatInput = class {
|
|
|
578
591
|
this.catFocus = index.createEvent(this, "catFocus", 7);
|
|
579
592
|
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
580
593
|
this.i18n = catNotification.CatI18nRegistry.getInstance();
|
|
581
|
-
this.id = `cat-input-${nextUniqueId$
|
|
594
|
+
this.id = `cat-input-${nextUniqueId$7++}`;
|
|
582
595
|
this.hasSlottedLabel = false;
|
|
583
596
|
/**
|
|
584
597
|
* Whether the input should show a clear button.
|
|
@@ -624,7 +637,7 @@ const CatInput = class {
|
|
|
624
637
|
componentWillRender() {
|
|
625
638
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
626
639
|
if (!this.label && !this.hasSlottedLabel) {
|
|
627
|
-
|
|
640
|
+
catNotification.loglevel.error('[A11y] Missing ARIA label on input', this);
|
|
628
641
|
}
|
|
629
642
|
}
|
|
630
643
|
/**
|
|
@@ -653,7 +666,7 @@ const CatInput = class {
|
|
|
653
666
|
}
|
|
654
667
|
get hintSection() {
|
|
655
668
|
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
656
|
-
return ((this.hint || hasSlottedHint) && (index.h(
|
|
669
|
+
return ((this.hint || hasSlottedHint) && (index.h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
|
|
657
670
|
}
|
|
658
671
|
onInput(event) {
|
|
659
672
|
this.value = this.input.value;
|
|
@@ -2904,13 +2917,13 @@ const firstTabbable = (container) => {
|
|
|
2904
2917
|
|
|
2905
2918
|
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
2919
|
|
|
2907
|
-
let nextUniqueId$
|
|
2920
|
+
let nextUniqueId$6 = 0;
|
|
2908
2921
|
const CatMenu = class {
|
|
2909
2922
|
constructor(hostRef) {
|
|
2910
2923
|
index.registerInstance(this, hostRef);
|
|
2911
2924
|
this.catOpen = index.createEvent(this, "catOpen", 7);
|
|
2912
2925
|
this.catClose = index.createEvent(this, "catClose", 7);
|
|
2913
|
-
this.id = nextUniqueId$
|
|
2926
|
+
this.id = nextUniqueId$6++;
|
|
2914
2927
|
/**
|
|
2915
2928
|
* The placement of the menu.
|
|
2916
2929
|
*/
|
|
@@ -3069,16 +3082,16 @@ const CatModal = class {
|
|
|
3069
3082
|
};
|
|
3070
3083
|
CatModal.style = catModalCss;
|
|
3071
3084
|
|
|
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}.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}";
|
|
3085
|
+
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
3086
|
|
|
3074
|
-
let nextUniqueId$
|
|
3087
|
+
let nextUniqueId$5 = 0;
|
|
3075
3088
|
const CatRadio = class {
|
|
3076
3089
|
constructor(hostRef) {
|
|
3077
3090
|
index.registerInstance(this, hostRef);
|
|
3078
3091
|
this.catChange = index.createEvent(this, "catChange", 7);
|
|
3079
3092
|
this.catFocus = index.createEvent(this, "catFocus", 7);
|
|
3080
3093
|
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
3081
|
-
this.id = `cat-radio-${++nextUniqueId$
|
|
3094
|
+
this.id = `cat-radio-${++nextUniqueId$5}`;
|
|
3082
3095
|
this.hasSlottedLabel = false;
|
|
3083
3096
|
/**
|
|
3084
3097
|
* Whether this radio is checked.
|
|
@@ -3108,7 +3121,7 @@ const CatRadio = class {
|
|
|
3108
3121
|
componentWillRender() {
|
|
3109
3122
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
3110
3123
|
if (!this.label && !this.hasSlottedLabel) {
|
|
3111
|
-
|
|
3124
|
+
catNotification.loglevel.error('[A11y] Missing ARIA label on radio', this);
|
|
3112
3125
|
}
|
|
3113
3126
|
}
|
|
3114
3127
|
/**
|
|
@@ -3125,7 +3138,7 @@ const CatRadio = class {
|
|
|
3125
3138
|
}
|
|
3126
3139
|
get hintSection() {
|
|
3127
3140
|
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
3128
|
-
return ((this.hint || hasSlottedHint) && (index.h(
|
|
3141
|
+
return ((this.hint || hasSlottedHint) && (index.h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
|
|
3129
3142
|
}
|
|
3130
3143
|
onChange(event) {
|
|
3131
3144
|
this.checked = true;
|
|
@@ -3147,6 +3160,7 @@ const CatRadioGroup = class {
|
|
|
3147
3160
|
constructor(hostRef) {
|
|
3148
3161
|
index.registerInstance(this, hostRef);
|
|
3149
3162
|
this.catChange = index.createEvent(this, "catChange", 7);
|
|
3163
|
+
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
3150
3164
|
this.catRadioGroup = [];
|
|
3151
3165
|
/**
|
|
3152
3166
|
* Whether this radio group is disabled.
|
|
@@ -3188,7 +3202,6 @@ const CatRadioGroup = class {
|
|
|
3188
3202
|
this.onValueChanged(this.value);
|
|
3189
3203
|
this.onDisabledChanged(this.disabled);
|
|
3190
3204
|
this.onLabelLeftChanged(this.labelLeft);
|
|
3191
|
-
//this.updateTabIndex();
|
|
3192
3205
|
}
|
|
3193
3206
|
onKeydown(event) {
|
|
3194
3207
|
var _a, _b;
|
|
@@ -3207,9 +3220,13 @@ const CatRadioGroup = class {
|
|
|
3207
3220
|
onInput(event) {
|
|
3208
3221
|
const catRadioElement = this.catRadioGroup.find(value => value === event.target);
|
|
3209
3222
|
this.value = catRadioElement === null || catRadioElement === void 0 ? void 0 : catRadioElement.value;
|
|
3210
|
-
//this.updateTabIndex();
|
|
3211
3223
|
this.catChange.emit();
|
|
3212
3224
|
}
|
|
3225
|
+
onBlur(event) {
|
|
3226
|
+
if (!event.relatedTarget) {
|
|
3227
|
+
this.catBlur.emit(event);
|
|
3228
|
+
}
|
|
3229
|
+
}
|
|
3213
3230
|
render() {
|
|
3214
3231
|
return (index.h("div", { role: "radiogroup", "aria-label": this.a11yLabel }, index.h("slot", null)));
|
|
3215
3232
|
}
|
|
@@ -4562,7 +4579,7 @@ const CatScrollable = class {
|
|
|
4562
4579
|
};
|
|
4563
4580
|
CatScrollable.style = catScrollableCss;
|
|
4564
4581
|
|
|
4565
|
-
var choices =
|
|
4582
|
+
var choices = catNotification.createCommonjsModule(function (module, exports) {
|
|
4566
4583
|
/*! choices.js v10.1.0 | © 2022 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
|
|
4567
4584
|
(function webpackUniversalModuleDefinition(root, factory) {
|
|
4568
4585
|
module.exports = factory();
|
|
@@ -12042,11 +12059,11 @@ __webpack_exports__ = __webpack_exports__["default"];
|
|
|
12042
12059
|
});
|
|
12043
12060
|
});
|
|
12044
12061
|
|
|
12045
|
-
const Choices = /*@__PURE__*/
|
|
12062
|
+
const Choices = /*@__PURE__*/catNotification.getDefaultExportFromCjs(choices);
|
|
12046
12063
|
|
|
12047
|
-
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}";
|
|
12064
|
+
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}";
|
|
12048
12065
|
|
|
12049
|
-
let nextUniqueId$
|
|
12066
|
+
let nextUniqueId$4 = 0;
|
|
12050
12067
|
const getOptionTemplate = (data) => {
|
|
12051
12068
|
var _a;
|
|
12052
12069
|
if ((_a = data.customProperties) === null || _a === void 0 ? void 0 : _a.imageUrl) {
|
|
@@ -12065,8 +12082,10 @@ const CatSelect = class {
|
|
|
12065
12082
|
this.catChange = index.createEvent(this, "catChange", 7);
|
|
12066
12083
|
this.catSearch = index.createEvent(this, "catSearch", 7);
|
|
12067
12084
|
this.catScrolledBottom = index.createEvent(this, "catScrolledBottom", 7);
|
|
12085
|
+
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
12068
12086
|
this.i18n = catNotification.CatI18nRegistry.getInstance();
|
|
12069
|
-
this.id = `cat-select-${nextUniqueId$
|
|
12087
|
+
this.id = `cat-select-${nextUniqueId$4++}`;
|
|
12088
|
+
this.resetItemsOnNextValueChange = true;
|
|
12070
12089
|
this.hasSlottedLabel = false;
|
|
12071
12090
|
/**
|
|
12072
12091
|
* The label for the select.
|
|
@@ -12083,7 +12102,7 @@ const CatSelect = class {
|
|
|
12083
12102
|
/**
|
|
12084
12103
|
* The available options for the input.
|
|
12085
12104
|
*/
|
|
12086
|
-
this.
|
|
12105
|
+
this.items = [];
|
|
12087
12106
|
/**
|
|
12088
12107
|
* Disable the select.
|
|
12089
12108
|
*/
|
|
@@ -12105,107 +12124,103 @@ const CatSelect = class {
|
|
|
12105
12124
|
/**
|
|
12106
12125
|
* Enable search for the select.
|
|
12107
12126
|
*/
|
|
12108
|
-
this.
|
|
12109
|
-
}
|
|
12110
|
-
setChoicesHandler(
|
|
12111
|
-
|
|
12112
|
-
|
|
12113
|
-
|
|
12127
|
+
this.search = false;
|
|
12128
|
+
}
|
|
12129
|
+
setChoicesHandler(items) {
|
|
12130
|
+
var _a, _b, _c, _d;
|
|
12131
|
+
const isSelected = (item) => { var _a; return (_a = this.value) === null || _a === void 0 ? void 0 : _a.includes(item.value); };
|
|
12132
|
+
const choices = items.map(item => (Object.assign(Object.assign({}, item), { selected: isSelected(item) })));
|
|
12133
|
+
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.setChoices(choices, 'value', 'label', true);
|
|
12134
|
+
const vItems = ((_b = this.choice) === null || _b === void 0 ? void 0 : _b.getValue()) || [];
|
|
12135
|
+
const vItemsArray = (Array.isArray(vItems) ? vItems : [vItems]);
|
|
12136
|
+
const value = this.value || [];
|
|
12137
|
+
const vItemValues = [...value];
|
|
12138
|
+
// remove duplicate items
|
|
12139
|
+
(_c = this.choice) === null || _c === void 0 ? void 0 : _c.unhighlightAll();
|
|
12140
|
+
vItemsArray.forEach(vItem => {
|
|
12141
|
+
var _a;
|
|
12142
|
+
const index = vItemValues.indexOf(vItem.value);
|
|
12143
|
+
if (index > -1) {
|
|
12144
|
+
vItemValues.splice(index, 1);
|
|
12145
|
+
}
|
|
12146
|
+
else {
|
|
12147
|
+
vItem.choiceId = -1; // disconnect item from choice
|
|
12148
|
+
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.highlightItem(vItem, false);
|
|
12149
|
+
}
|
|
12150
|
+
});
|
|
12151
|
+
(_d = this.choice) === null || _d === void 0 ? void 0 : _d.removeHighlightedItems(false);
|
|
12114
12152
|
}
|
|
12153
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
12115
12154
|
setValueHandler(value) {
|
|
12116
|
-
|
|
12117
|
-
|
|
12118
|
-
|
|
12155
|
+
var _a, _b;
|
|
12156
|
+
if (this.resetItemsOnNextValueChange) {
|
|
12157
|
+
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItems(-1);
|
|
12158
|
+
}
|
|
12159
|
+
this.resetItemsOnNextValueChange = true;
|
|
12160
|
+
(_b = this.choice) === null || _b === void 0 ? void 0 : _b.setChoiceByValue(value);
|
|
12161
|
+
this.multiple && this.updateRemoveItemButtonVisibility();
|
|
12119
12162
|
}
|
|
12120
12163
|
componentWillRender() {
|
|
12121
12164
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
12122
12165
|
if (!this.label && !this.hasSlottedLabel) {
|
|
12123
|
-
|
|
12166
|
+
catNotification.loglevel.error('[A11y] Missing ARIA label on select', this);
|
|
12124
12167
|
}
|
|
12125
12168
|
}
|
|
12126
12169
|
componentDidLoad() {
|
|
12127
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
12170
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
12128
12171
|
this.init();
|
|
12129
12172
|
const attachedInternals = (_b = (_a = this.hostElement).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
12130
12173
|
if (attachedInternals) {
|
|
12131
|
-
|
|
12132
|
-
this.
|
|
12133
|
-
|
|
12134
|
-
|
|
12135
|
-
|
|
12136
|
-
(
|
|
12137
|
-
(
|
|
12138
|
-
(
|
|
12139
|
-
(
|
|
12174
|
+
const root = attachedInternals.shadowRoot;
|
|
12175
|
+
this.choicesElement = (root === null || root === void 0 ? void 0 : root.querySelector('.choices')) || undefined;
|
|
12176
|
+
this.choiceInner = (root === null || root === void 0 ? void 0 : root.querySelector('.choices__inner')) || undefined;
|
|
12177
|
+
this.choiceDropdown = ((_c = root === null || root === void 0 ? void 0 : root.querySelector('.choices__list--dropdown')) === null || _c === void 0 ? void 0 : _c.firstElementChild) || undefined;
|
|
12178
|
+
}
|
|
12179
|
+
(_d = this.choicesElement) === null || _d === void 0 ? void 0 : _d.addEventListener('click', this.resetFocus.bind(this));
|
|
12180
|
+
(_e = this.choiceInner) === null || _e === void 0 ? void 0 : _e.addEventListener('click', this.showDropdownHandler.bind(this));
|
|
12181
|
+
(_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.addEventListener('hideDropdown', this.showMultipleFocus.bind(this));
|
|
12182
|
+
(_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.addEventListener('showDropdown', this.showMultipleFocus.bind(this));
|
|
12183
|
+
(_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.addEventListener('removeItem', this.resetFocus.bind(this));
|
|
12184
|
+
(_j = this.selectElement) === null || _j === void 0 ? void 0 : _j.addEventListener('change', this.onChange.bind(this));
|
|
12185
|
+
(_k = this.selectElement) === null || _k === void 0 ? void 0 : _k.addEventListener('search', this.onSearch.bind(this));
|
|
12186
|
+
(_l = this.choiceDropdown) === null || _l === void 0 ? void 0 : _l.addEventListener('scroll', this.onScrolledBottom.bind(this));
|
|
12140
12187
|
if (this.multiple) {
|
|
12141
|
-
(
|
|
12188
|
+
(_m = this.selectElement) === null || _m === void 0 ? void 0 : _m.addEventListener('choice', this.onChoice.bind(this));
|
|
12142
12189
|
this.createRemoveItemButton();
|
|
12143
12190
|
}
|
|
12144
12191
|
}
|
|
12145
12192
|
disconnectedCallback() {
|
|
12146
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
12193
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
12147
12194
|
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
12148
12195
|
this.choice = undefined;
|
|
12149
|
-
(_b = this.
|
|
12150
|
-
(_c = this.
|
|
12151
|
-
(_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('
|
|
12152
|
-
(_e = this.selectElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('
|
|
12153
|
-
(_f = this.
|
|
12196
|
+
(_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', this.resetFocus.bind(this));
|
|
12197
|
+
(_c = this.choiceInner) === null || _c === void 0 ? void 0 : _c.removeEventListener('click', this.showDropdownHandler.bind(this));
|
|
12198
|
+
(_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('hideDropdown', this.showMultipleFocus.bind(this));
|
|
12199
|
+
(_e = this.selectElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('showDropdown', this.showMultipleFocus.bind(this));
|
|
12200
|
+
(_f = this.selectElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('removeItem', this.resetFocus.bind(this));
|
|
12201
|
+
(_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.removeEventListener('change', this.onChange.bind(this));
|
|
12202
|
+
(_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.removeEventListener('search', this.onSearch.bind(this));
|
|
12203
|
+
(_j = this.choiceDropdown) === null || _j === void 0 ? void 0 : _j.removeEventListener('scroll', this.onScrolledBottom.bind(this));
|
|
12154
12204
|
if (this.multiple) {
|
|
12155
|
-
(
|
|
12156
|
-
(_h = this.removeElement) === null || _h === void 0 ? void 0 : _h.removeEventListener('click', this.onRemoveItemButtonClick.bind(this));
|
|
12205
|
+
(_k = this.removeElement) === null || _k === void 0 ? void 0 : _k.removeEventListener('choice', this.onChoice.bind(this));
|
|
12157
12206
|
}
|
|
12158
12207
|
}
|
|
12159
|
-
|
|
12160
|
-
|
|
12161
|
-
* exactly the same as passing items via the items option but can be called
|
|
12162
|
-
* after initialisation.
|
|
12163
|
-
*/
|
|
12164
|
-
async setValue(args) {
|
|
12165
|
-
var _a;
|
|
12166
|
-
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.setValue(args);
|
|
12167
|
-
return this;
|
|
12168
|
-
}
|
|
12169
|
-
/**
|
|
12170
|
-
* Set choices of select input via an array of objects (or function that
|
|
12171
|
-
* returns array of object or promise of it), a value field name and a label
|
|
12172
|
-
* field name.
|
|
12173
|
-
*/
|
|
12174
|
-
async setChoices(choices, value, label, replaceChoices) {
|
|
12175
|
-
var _a;
|
|
12176
|
-
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.setChoices(choices, value, label, replaceChoices);
|
|
12177
|
-
return this;
|
|
12178
|
-
}
|
|
12179
|
-
/**
|
|
12180
|
-
* Clear all choices from select.
|
|
12181
|
-
*/
|
|
12182
|
-
async clearChoices() {
|
|
12183
|
-
var _a;
|
|
12184
|
-
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.clearChoices();
|
|
12185
|
-
return this;
|
|
12186
|
-
}
|
|
12187
|
-
/**
|
|
12188
|
-
* Clear input of any user inputted text.
|
|
12189
|
-
*/
|
|
12190
|
-
async clearInput() {
|
|
12191
|
-
var _a;
|
|
12192
|
-
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.clearInput();
|
|
12193
|
-
return this;
|
|
12208
|
+
onBlur(event) {
|
|
12209
|
+
this.catBlur.emit(event);
|
|
12194
12210
|
}
|
|
12195
12211
|
render() {
|
|
12196
12212
|
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));
|
|
12197
12213
|
}
|
|
12198
12214
|
init() {
|
|
12199
|
-
const
|
|
12215
|
+
const component = this; // eslint-disable-line @typescript-eslint/no-this-alias
|
|
12200
12216
|
const removeItemText = (value) => this.i18n.t('select.removeItem', { value });
|
|
12201
12217
|
const config = {
|
|
12202
12218
|
allowHTML: true,
|
|
12203
|
-
items: Array.isArray(value) ? value : [value],
|
|
12204
12219
|
removeItemButton: true,
|
|
12205
12220
|
duplicateItemsAllowed: false,
|
|
12206
12221
|
delimiter: '',
|
|
12207
12222
|
paste: false,
|
|
12208
|
-
searchEnabled:
|
|
12223
|
+
searchEnabled: this.search,
|
|
12209
12224
|
searchChoices: false,
|
|
12210
12225
|
position: this.position,
|
|
12211
12226
|
resetScrollPosition: false,
|
|
@@ -12220,7 +12235,12 @@ const CatSelect = class {
|
|
|
12220
12235
|
addItemText: (value) => this.i18n.t('select.addItem', { value }),
|
|
12221
12236
|
maxItemText: (maxItemCount) => this.i18n.t('select.maxItem', { maxItemCount }),
|
|
12222
12237
|
uniqueItemText: this.i18n.t('select.uniqueItem'),
|
|
12223
|
-
customAddItemText: this.i18n.t('select.customAddItem')
|
|
12238
|
+
customAddItemText: this.i18n.t('select.customAddItem'),
|
|
12239
|
+
callbackOnInit: function () {
|
|
12240
|
+
const choice = this;
|
|
12241
|
+
choice.setChoices(component.items, 'value', 'label', true);
|
|
12242
|
+
choice.setChoiceByValue(component.value);
|
|
12243
|
+
}
|
|
12224
12244
|
};
|
|
12225
12245
|
const configSingle = {
|
|
12226
12246
|
callbackOnCreateTemplates: (strToEl) => {
|
|
@@ -12286,18 +12306,42 @@ const CatSelect = class {
|
|
|
12286
12306
|
const settings = this.multiple
|
|
12287
12307
|
? Object.assign(Object.assign({}, config), configMultiple) : Object.assign(Object.assign({}, config), configSingle);
|
|
12288
12308
|
this.choice = new Choices(this.selectElement, settings);
|
|
12289
|
-
this.choice.setChoices(this.choices);
|
|
12290
12309
|
}
|
|
12291
12310
|
get hintSection() {
|
|
12292
12311
|
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
12293
|
-
return ((this.hint || hasSlottedHint) && (index.h(
|
|
12312
|
+
return ((this.hint || hasSlottedHint) && (index.h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
|
|
12294
12313
|
}
|
|
12295
12314
|
onChange() {
|
|
12315
|
+
var _a;
|
|
12316
|
+
this.resetItemsOnNextValueChange = false;
|
|
12317
|
+
this.value = (_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue(true);
|
|
12318
|
+
this.catChange.emit(this.value);
|
|
12319
|
+
}
|
|
12320
|
+
showMultipleFocus() {
|
|
12296
12321
|
var _a, _b;
|
|
12297
|
-
this.
|
|
12298
|
-
|
|
12299
|
-
|
|
12300
|
-
|
|
12322
|
+
if (this.multiple && this.isFocused() && !((_a = this.choicesElement) === null || _a === void 0 ? void 0 : _a.classList.contains('is-focused'))) {
|
|
12323
|
+
(_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.classList.add('is-focused');
|
|
12324
|
+
}
|
|
12325
|
+
}
|
|
12326
|
+
resetFocus() {
|
|
12327
|
+
var _a, _b, _c;
|
|
12328
|
+
if (!this.isFocused()) {
|
|
12329
|
+
if (!((_a = this.choicesElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('tabindex'))) {
|
|
12330
|
+
(_b = this.choicesElement) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
|
|
12331
|
+
}
|
|
12332
|
+
(_c = this.choicesElement) === null || _c === void 0 ? void 0 : _c.focus();
|
|
12333
|
+
}
|
|
12334
|
+
}
|
|
12335
|
+
isFocused() {
|
|
12336
|
+
return document.activeElement === this.hostElement;
|
|
12337
|
+
}
|
|
12338
|
+
onChoice(event) {
|
|
12339
|
+
var _a;
|
|
12340
|
+
const customEvent = event;
|
|
12341
|
+
const choice = customEvent.detail.choice;
|
|
12342
|
+
if (choice.selected) {
|
|
12343
|
+
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItemsByValue(choice.value);
|
|
12344
|
+
this.onChange();
|
|
12301
12345
|
}
|
|
12302
12346
|
}
|
|
12303
12347
|
onSearch(event) {
|
|
@@ -12312,20 +12356,9 @@ const CatSelect = class {
|
|
|
12312
12356
|
this.catScrolledBottom.emit();
|
|
12313
12357
|
}
|
|
12314
12358
|
}
|
|
12315
|
-
onChoice(event) {
|
|
12316
|
-
var _a, _b;
|
|
12317
|
-
const customEvent = event;
|
|
12318
|
-
const items = Array.from((_a = this.choice) === null || _a === void 0 ? void 0 : _a.getValue());
|
|
12319
|
-
const item = items.find(value => value.choiceId === customEvent.detail.choice.id);
|
|
12320
|
-
if (item) {
|
|
12321
|
-
(_b = this.choice) === null || _b === void 0 ? void 0 : _b._removeItem(item);
|
|
12322
|
-
}
|
|
12323
|
-
}
|
|
12324
12359
|
showDropdownHandler() {
|
|
12325
12360
|
var _a;
|
|
12326
|
-
|
|
12327
|
-
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.showDropdown();
|
|
12328
|
-
}
|
|
12361
|
+
!this.disabled && ((_a = this.choice) === null || _a === void 0 ? void 0 : _a.showDropdown());
|
|
12329
12362
|
}
|
|
12330
12363
|
createRemoveItemButton() {
|
|
12331
12364
|
var _a;
|
|
@@ -12339,11 +12372,10 @@ const CatSelect = class {
|
|
|
12339
12372
|
}
|
|
12340
12373
|
updateRemoveItemButtonVisibility() {
|
|
12341
12374
|
var _a, _b, _c;
|
|
12342
|
-
|
|
12343
|
-
if (items.length) {
|
|
12375
|
+
if ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) {
|
|
12344
12376
|
(_b = this.removeElement) === null || _b === void 0 ? void 0 : _b.removeAttribute('hidden');
|
|
12345
12377
|
}
|
|
12346
|
-
else
|
|
12378
|
+
else {
|
|
12347
12379
|
(_c = this.removeElement) === null || _c === void 0 ? void 0 : _c.setAttribute('hidden', 'true');
|
|
12348
12380
|
}
|
|
12349
12381
|
}
|
|
@@ -12351,10 +12383,11 @@ const CatSelect = class {
|
|
|
12351
12383
|
var _a;
|
|
12352
12384
|
event.stopPropagation();
|
|
12353
12385
|
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.removeActiveItems(-1);
|
|
12386
|
+
this.onChange();
|
|
12354
12387
|
}
|
|
12355
12388
|
get hostElement() { return index.getElement(this); }
|
|
12356
12389
|
static get watchers() { return {
|
|
12357
|
-
"
|
|
12390
|
+
"items": ["setChoicesHandler"],
|
|
12358
12391
|
"value": ["setValueHandler"]
|
|
12359
12392
|
}; }
|
|
12360
12393
|
};
|
|
@@ -12430,7 +12463,7 @@ CatSpinner.style = catSpinnerCss;
|
|
|
12430
12463
|
|
|
12431
12464
|
const catTabCss = ":host{display:block}:host([hidden]){display:none}";
|
|
12432
12465
|
|
|
12433
|
-
let nextUniqueId$
|
|
12466
|
+
let nextUniqueId$3 = 0;
|
|
12434
12467
|
const CatTab = class {
|
|
12435
12468
|
constructor(hostRef) {
|
|
12436
12469
|
index.registerInstance(this, hostRef);
|
|
@@ -12454,7 +12487,7 @@ const CatTab = class {
|
|
|
12454
12487
|
}
|
|
12455
12488
|
connectedCallback() {
|
|
12456
12489
|
if (!this.hostElement.id) {
|
|
12457
|
-
this.hostElement.id = `cat-tab-${nextUniqueId$
|
|
12490
|
+
this.hostElement.id = `cat-tab-${nextUniqueId$3++}`;
|
|
12458
12491
|
}
|
|
12459
12492
|
}
|
|
12460
12493
|
onClick(event) {
|
|
@@ -12529,6 +12562,87 @@ const CatTabs = class {
|
|
|
12529
12562
|
};
|
|
12530
12563
|
CatTabs.style = catTabsCss;
|
|
12531
12564
|
|
|
12565
|
+
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;
|
|
12566
|
+
|
|
12567
|
+
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))}";
|
|
12568
|
+
|
|
12569
|
+
let nextUniqueId$2 = 0;
|
|
12570
|
+
const CatTextarea = class {
|
|
12571
|
+
constructor(hostRef) {
|
|
12572
|
+
index.registerInstance(this, hostRef);
|
|
12573
|
+
this.catChange = index.createEvent(this, "catChange", 7);
|
|
12574
|
+
this.catFocus = index.createEvent(this, "catFocus", 7);
|
|
12575
|
+
this.catBlur = index.createEvent(this, "catBlur", 7);
|
|
12576
|
+
this.id = `cat-textarea-${nextUniqueId$2++}`;
|
|
12577
|
+
this.hasSlottedLabel = false;
|
|
12578
|
+
/**
|
|
12579
|
+
* Whether the textarea is disabled.
|
|
12580
|
+
*/
|
|
12581
|
+
this.disabled = false;
|
|
12582
|
+
/**
|
|
12583
|
+
* The label for the textarea.
|
|
12584
|
+
*/
|
|
12585
|
+
this.label = '';
|
|
12586
|
+
/**
|
|
12587
|
+
* Visually hide the label, but still show it to assistive technologies like screen readers.
|
|
12588
|
+
*/
|
|
12589
|
+
this.labelHidden = false;
|
|
12590
|
+
/**
|
|
12591
|
+
* The name of the form control. Submitted with the form as part of a name/value pair.
|
|
12592
|
+
*/
|
|
12593
|
+
this.name = '';
|
|
12594
|
+
/**
|
|
12595
|
+
* The value is not editable.
|
|
12596
|
+
*/
|
|
12597
|
+
this.readonly = false;
|
|
12598
|
+
/**
|
|
12599
|
+
* A value is required or must be check for the form to be submittable.
|
|
12600
|
+
*/
|
|
12601
|
+
this.required = false;
|
|
12602
|
+
/**
|
|
12603
|
+
* Specifies the initial number of lines in the textarea.
|
|
12604
|
+
*/
|
|
12605
|
+
this.rows = 3;
|
|
12606
|
+
}
|
|
12607
|
+
componentWillRender() {
|
|
12608
|
+
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
12609
|
+
if (!this.label && !this.hasSlottedLabel) {
|
|
12610
|
+
catNotification.loglevel.error('[A11y] Missing ARIA label on textarea', this);
|
|
12611
|
+
}
|
|
12612
|
+
}
|
|
12613
|
+
componentDidLoad() {
|
|
12614
|
+
d(this.textarea);
|
|
12615
|
+
}
|
|
12616
|
+
/**
|
|
12617
|
+
* Sets focus on the textarea. Use this method instead of `textarea.focus()`.
|
|
12618
|
+
*
|
|
12619
|
+
* @param options An optional object providing options to control aspects of
|
|
12620
|
+
* the focusing process.
|
|
12621
|
+
*/
|
|
12622
|
+
async setFocus(options) {
|
|
12623
|
+
this.textarea.focus(options);
|
|
12624
|
+
}
|
|
12625
|
+
render() {
|
|
12626
|
+
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));
|
|
12627
|
+
}
|
|
12628
|
+
get hintSection() {
|
|
12629
|
+
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
12630
|
+
return ((this.hint || hasSlottedHint) && (index.h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
|
|
12631
|
+
}
|
|
12632
|
+
onInput(event) {
|
|
12633
|
+
this.value = this.textarea.value;
|
|
12634
|
+
this.catChange.emit(event);
|
|
12635
|
+
}
|
|
12636
|
+
onFocus(event) {
|
|
12637
|
+
this.catFocus.emit(event);
|
|
12638
|
+
}
|
|
12639
|
+
onBlur(event) {
|
|
12640
|
+
this.catBlur.emit(event);
|
|
12641
|
+
}
|
|
12642
|
+
get hostElement() { return index.getElement(this); }
|
|
12643
|
+
};
|
|
12644
|
+
CatTextarea.style = catTextareaCss;
|
|
12645
|
+
|
|
12532
12646
|
const catToastDemoCss = ":host{display:block}";
|
|
12533
12647
|
|
|
12534
12648
|
const CatToastDemo = class {
|
|
@@ -12572,7 +12686,7 @@ const CatToastDemo = class {
|
|
|
12572
12686
|
};
|
|
12573
12687
|
CatToastDemo.style = catToastDemoCss;
|
|
12574
12688
|
|
|
12575
|
-
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
|
|
12689
|
+
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))}";
|
|
12576
12690
|
|
|
12577
12691
|
let nextUniqueId$1 = 0;
|
|
12578
12692
|
const CatToggle = class {
|
|
@@ -12611,7 +12725,7 @@ const CatToggle = class {
|
|
|
12611
12725
|
componentWillRender() {
|
|
12612
12726
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
12613
12727
|
if (!this.label && !this.hasSlottedLabel) {
|
|
12614
|
-
|
|
12728
|
+
catNotification.loglevel.error('[A11y] Missing ARIA label on toggle', this);
|
|
12615
12729
|
}
|
|
12616
12730
|
}
|
|
12617
12731
|
/**
|
|
@@ -12628,7 +12742,7 @@ const CatToggle = class {
|
|
|
12628
12742
|
}
|
|
12629
12743
|
get hintSection() {
|
|
12630
12744
|
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
12631
|
-
return ((this.hint || hasSlottedHint) && (index.h(
|
|
12745
|
+
return ((this.hint || hasSlottedHint) && (index.h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && index.h("slot", { name: "hint" }) })));
|
|
12632
12746
|
}
|
|
12633
12747
|
onInput(event) {
|
|
12634
12748
|
this.value = this.input.value;
|
|
@@ -12646,7 +12760,7 @@ CatToggle.style = catToggleCss;
|
|
|
12646
12760
|
|
|
12647
12761
|
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
|
|
12648
12762
|
|
|
12649
|
-
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:
|
|
12763
|
+
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}";
|
|
12650
12764
|
|
|
12651
12765
|
let nextUniqueId = 0;
|
|
12652
12766
|
const CatTooltip = class {
|
|
@@ -12790,8 +12904,9 @@ exports.cat_skeleton = CatSkeleton;
|
|
|
12790
12904
|
exports.cat_spinner = CatSpinner;
|
|
12791
12905
|
exports.cat_tab = CatTab;
|
|
12792
12906
|
exports.cat_tabs = CatTabs;
|
|
12907
|
+
exports.cat_textarea = CatTextarea;
|
|
12793
12908
|
exports.cat_toast_demo = CatToastDemo;
|
|
12794
12909
|
exports.cat_toggle = CatToggle;
|
|
12795
12910
|
exports.cat_tooltip = CatTooltip;
|
|
12796
12911
|
|
|
12797
|
-
//# sourceMappingURL=cat-
|
|
12912
|
+
//# sourceMappingURL=cat-alert_22.cjs.entry.js.map
|