@haiilo/catalyst 1.1.0 → 1.2.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/p-9044f4d7.entry.js +10 -0
- package/dist/catalyst/p-9044f4d7.entry.js.map +1 -0
- package/dist/cjs/cat-alert_23.cjs.entry.js +43 -31
- package/dist/cjs/cat-alert_23.cjs.entry.js.map +1 -1
- package/dist/collection/components/cat-alert/cat-alert.css +2 -2
- package/dist/collection/components/cat-alert/cat-alert.js +8 -8
- package/dist/collection/components/cat-alert/cat-alert.js.map +1 -1
- package/dist/collection/components/cat-avatar/cat-avatar.css +8 -8
- package/dist/collection/components/cat-badge/cat-badge.css +27 -33
- package/dist/collection/components/cat-badge/cat-badge.js +9 -12
- package/dist/collection/components/cat-badge/cat-badge.js.map +1 -1
- package/dist/collection/components/cat-button/cat-button.css +14 -30
- package/dist/collection/components/cat-button/cat-button.js +2 -2
- package/dist/collection/components/cat-button/cat-button.js.map +1 -1
- package/dist/collection/components/cat-card/cat-card.js +2 -3
- package/dist/collection/components/cat-card/cat-card.js.map +1 -1
- package/dist/collection/components/cat-checkbox/cat-checkbox.css +4 -4
- package/dist/collection/components/cat-radio/cat-radio.css +2 -2
- package/dist/collection/components/cat-select/cat-select.css +5 -0
- package/dist/collection/components/cat-select/cat-select.js +6 -1
- package/dist/collection/components/cat-select/cat-select.js.map +1 -1
- package/dist/collection/components/cat-select-demo/cat-select-demo.js +5 -5
- package/dist/collection/components/cat-select-demo/cat-select-demo.js.map +1 -1
- package/dist/collection/components/cat-tabs/cat-tabs.css +2 -2
- package/dist/collection/components/cat-tabs/cat-tabs.js +1 -1
- package/dist/collection/components/cat-tabs/cat-tabs.js.map +1 -1
- package/dist/collection/components/cat-toggle/cat-toggle.css +1 -1
- package/dist/collection/utils/setDefault.js +9 -0
- package/dist/collection/utils/setDefault.js.map +1 -0
- package/dist/components/cat-alert.js +8 -8
- package/dist/components/cat-alert.js.map +1 -1
- package/dist/components/cat-avatar2.js +1 -1
- package/dist/components/cat-avatar2.js.map +1 -1
- package/dist/components/cat-badge.js +9 -9
- package/dist/components/cat-badge.js.map +1 -1
- package/dist/components/cat-button2.js +2 -2
- package/dist/components/cat-button2.js.map +1 -1
- package/dist/components/cat-card.js +2 -2
- package/dist/components/cat-card.js.map +1 -1
- package/dist/components/cat-checkbox2.js +1 -1
- package/dist/components/cat-checkbox2.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-demo.js +3 -3
- package/dist/components/cat-select-demo.js.map +1 -1
- package/dist/components/cat-select2.js +7 -2
- package/dist/components/cat-select2.js.map +1 -1
- package/dist/components/cat-tabs.js +2 -2
- package/dist/components/cat-tabs.js.map +1 -1
- package/dist/components/cat-toggle.js +1 -1
- package/dist/components/cat-toggle.js.map +1 -1
- package/dist/components/setDefault.js +12 -0
- package/dist/components/setDefault.js.map +1 -0
- package/dist/esm/cat-alert_23.entry.js +43 -31
- package/dist/esm/cat-alert_23.entry.js.map +1 -1
- package/dist/types/components/cat-alert/cat-alert.d.ts +1 -2
- package/dist/types/components/cat-badge/cat-badge.d.ts +2 -2
- package/dist/types/components/cat-button/cat-button.d.ts +1 -1
- package/dist/types/components/cat-select/cat-select.d.ts +2 -0
- package/dist/types/components.d.ts +2 -2
- package/dist/types/utils/setDefault.d.ts +6 -0
- package/package.json +2 -2
- package/dist/catalyst/p-78b3fc17.entry.js +0 -10
- package/dist/catalyst/p-78b3fc17.entry.js.map +0 -1
|
@@ -5,7 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-8ab22379.js');
|
|
6
6
|
const catNotification = require('./cat-notification-bcb9fb86.js');
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
function setAttributeDefault(host, attr, value) {
|
|
9
|
+
if (!host.hostElement.hasAttribute(attr) && value != null) {
|
|
10
|
+
host.hostElement.setAttribute(attr, String(value));
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
function setPropertyDefault(host, prop) {
|
|
14
|
+
setAttributeDefault(host, String(prop), host[prop]);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}:host([color=primary]){background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.1)}:host([color=primary]) cat-icon{color:rgb(var(--cat-primary-text, 0, 129, 148))}:host([color=secondary]){background-color:rgba(105, 118, 135, 0.1)}:host([color=secondary]) cat-icon{color:#697687}:host([color=success]){background-color:rgba(0, 132, 88, 0.1)}:host([color=success]) cat-icon{color:#008458}:host([color=warning]){background-color:rgba(255, 206, 128, 0.1)}:host([color=warning]) cat-icon{color:#ebb663}:host([color=danger]){background-color:rgba(217, 52, 13, 0.1)}:host([color=danger]) cat-icon{color:#d9340d}";
|
|
9
18
|
|
|
10
19
|
const CatAlert = class {
|
|
11
20
|
constructor(hostRef) {
|
|
@@ -33,14 +42,13 @@ const CatAlert = class {
|
|
|
33
42
|
*/
|
|
34
43
|
this.noIcon = false;
|
|
35
44
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
return this.hostElement.getAttribute('tabindex') || '0';
|
|
45
|
+
connectedCallback() {
|
|
46
|
+
setAttributeDefault(this, 'tabindex', 0);
|
|
47
|
+
setAttributeDefault(this, 'role', this.mapRole.get(this.color));
|
|
48
|
+
setPropertyDefault(this, 'color');
|
|
41
49
|
}
|
|
42
|
-
|
|
43
|
-
return this.
|
|
50
|
+
render() {
|
|
51
|
+
return (index.h(index.Host, null, !this.noIcon && index.h("cat-icon", { size: "l", icon: this.icon ? this.icon : this.mapIcon.get(this.color) }), index.h("div", { class: "content" }, index.h("slot", null))));
|
|
44
52
|
}
|
|
45
53
|
get hostElement() { return index.getElement(this); }
|
|
46
54
|
};
|
|
@@ -61,7 +69,7 @@ const loadImg = (src) => {
|
|
|
61
69
|
});
|
|
62
70
|
};
|
|
63
71
|
|
|
64
|
-
const catAvatarCss = ":host{display:
|
|
72
|
+
const catAvatarCss = ":host{display:contents}:host([hidden]){display:none}.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:0.25rem;text-decoration:inherit;color:var(--cat-avatar-fill, white);background-color:var(--cat-avatar-bg, #697687);background-size:cover;background-position:center;white-space:nowrap;overflow:hidden;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.avatar:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.avatar-round{border-radius:50%}.avatar-xs{width:var(--cat-avatar-size, 1.5rem);height:var(--cat-avatar-size, 1.5rem);line-height:var(--cat-avatar-size, 1.5rem);font-size:var(--cat-avatar-font-size, 0.75rem)}.avatar-s{width:var(--cat-avatar-size, 2rem);height:var(--cat-avatar-size, 2rem);line-height:var(--cat-avatar-size, 2rem);font-size:var(--cat-avatar-font-size, 0.875rem)}.avatar-m{width:var(--cat-avatar-size, 2.5rem);height:var(--cat-avatar-size, 2.5rem);line-height:var(--cat-avatar-size, 2.5rem);font-size:var(--cat-avatar-font-size, 0.9375rem)}.avatar-l{width:var(--cat-avatar-size, 3rem);height:var(--cat-avatar-size, 3rem);line-height:var(--cat-avatar-size, 3rem);font-size:var(--cat-avatar-font-size, 1.125rem)}.avatar-xl{width:var(--cat-avatar-size, 3.5rem);height:var(--cat-avatar-size, 3.5rem);line-height:var(--cat-avatar-size, 3.5rem);font-size:var(--cat-avatar-font-size, 1.25rem)}";
|
|
65
73
|
|
|
66
74
|
const CatAvatar = class {
|
|
67
75
|
constructor(hostRef) {
|
|
@@ -131,7 +139,7 @@ const CatAvatar = class {
|
|
|
131
139
|
};
|
|
132
140
|
CatAvatar.style = catAvatarCss;
|
|
133
141
|
|
|
134
|
-
const catBadgeCss = ":host{display:inline-
|
|
142
|
+
const catBadgeCss = ":host([hidden]){display:none}:host{display:inline-flex;max-width:100%;vertical-align:baseline;align-items:center;justify-content:center;border-radius:0.25rem;text-decoration:none;line-height:1.5}:host slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}:host([round]){border-radius:10rem}:host([variant=filled]){background-color:rgba(var(--bg), 0.1);color:rgb(var(--text));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}:host([variant=outlined]){background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}:host([color=primary]){--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--border:var(--cat-primary-text, 0, 129, 148)}:host([color=secondary]){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}:host([color=success]){--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}:host([color=warning]){--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}:host([color=danger]){--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border:217, 52, 13}:host([size=xs]){height:1rem;min-width:1rem;font-size:0.75rem;padding:0 0.25rem}:host([size=s]){height:1.5rem;min-width:1.5rem;font-size:0.75rem;padding:0 0.5rem}:host([size=m]){height:2rem;min-width:2rem;font-size:0.875rem;padding:0 0.75rem}:host([size=l]){height:2.5rem;min-width:2.5rem;font-size:0.9375rem;padding:0 1rem}:host([size=xl]){height:3rem;min-width:3rem;font-size:1.125rem;padding:0 1rem}:host([pulse][variant=filled]){animation:1.5s ease 0s infinite normal none running pulse}:host([pulse][variant=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)}}";
|
|
135
143
|
|
|
136
144
|
const CatBadge = class {
|
|
137
145
|
constructor(hostRef) {
|
|
@@ -157,16 +165,15 @@ const CatBadge = class {
|
|
|
157
165
|
*/
|
|
158
166
|
this.pulse = false;
|
|
159
167
|
}
|
|
168
|
+
connectedCallback() {
|
|
169
|
+
setPropertyDefault(this, 'variant');
|
|
170
|
+
setPropertyDefault(this, 'color');
|
|
171
|
+
setPropertyDefault(this, 'size');
|
|
172
|
+
}
|
|
160
173
|
render() {
|
|
161
|
-
return
|
|
162
|
-
badge: true,
|
|
163
|
-
'badge-round': this.round,
|
|
164
|
-
'badge-pulse': this.pulse,
|
|
165
|
-
[`badge-${this.variant}`]: Boolean(this.variant),
|
|
166
|
-
[`badge-${this.color}`]: Boolean(this.color),
|
|
167
|
-
[`badge-${this.size}`]: Boolean(this.size)
|
|
168
|
-
} }, index.h("slot", null)));
|
|
174
|
+
return index.h("slot", null);
|
|
169
175
|
}
|
|
176
|
+
get hostElement() { return index.getElement(this); }
|
|
170
177
|
};
|
|
171
178
|
CatBadge.style = catBadgeCss;
|
|
172
179
|
|
|
@@ -285,7 +292,7 @@ function createEmptyStyleRule(query) {
|
|
|
285
292
|
}
|
|
286
293
|
}
|
|
287
294
|
|
|
288
|
-
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-content{word-wrap:break-word;word-break:break-word}.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,
|
|
295
|
+
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-content{word-wrap:break-word;word-break:break-word}.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),.cat-button-outlined.cat-button-active: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),.cat-button-text.cat-button-active: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, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 83, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 83, 113)}.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.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.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.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.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.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.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.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.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}.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}.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}.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}.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}.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}: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}";
|
|
289
296
|
|
|
290
297
|
const CatButton = class {
|
|
291
298
|
constructor(hostRef) {
|
|
@@ -303,7 +310,7 @@ const CatButton = class {
|
|
|
303
310
|
*/
|
|
304
311
|
this.color = 'secondary';
|
|
305
312
|
/**
|
|
306
|
-
*
|
|
313
|
+
* Set the button into an active state.
|
|
307
314
|
*/
|
|
308
315
|
this.active = false;
|
|
309
316
|
/**
|
|
@@ -469,7 +476,7 @@ const CatCard = class {
|
|
|
469
476
|
index.registerInstance(this, hostRef);
|
|
470
477
|
}
|
|
471
478
|
render() {
|
|
472
|
-
return
|
|
479
|
+
return index.h("slot", null);
|
|
473
480
|
}
|
|
474
481
|
};
|
|
475
482
|
CatCard.style = catCardCss;
|
|
@@ -489,7 +496,7 @@ const CatFormHint = props => {
|
|
|
489
496
|
]));
|
|
490
497
|
};
|
|
491
498
|
|
|
492
|
-
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 !important}:host-context(.cat-error) .hint-section{color:#d9340d}: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:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg,
|
|
499
|
+
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 !important}:host-context(.cat-error) .hint-section{color:#d9340d}: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:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host(.cat-error) .box{border:1px solid #d9340d}:host(.cat-error) :checked+.box,:host(.cat-error) :indeterminate+.box{background-color:#d9340d;border-color:#d9340d;stroke:white}.label{flex:1 1 auto;min-width:0}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
|
|
493
500
|
|
|
494
501
|
let nextUniqueId$8 = 0;
|
|
495
502
|
const CatCheckbox = class {
|
|
@@ -3213,7 +3220,7 @@ const CatModal = class {
|
|
|
3213
3220
|
};
|
|
3214
3221
|
CatModal.style = catModalCss;
|
|
3215
3222
|
|
|
3216
|
-
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 !important}:host-context(.cat-error) .hint-section{color:#d9340d}: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,
|
|
3223
|
+
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 !important}:host-context(.cat-error) .hint-section{color:#d9340d}: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, 0, 129, 148));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, 0, 129, 148))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host(.cat-error) input{border-color:#d9340d}:host(.cat-error) .circle{background-color:#d9340d}.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}";
|
|
3217
3224
|
|
|
3218
3225
|
let nextUniqueId$5 = 0;
|
|
3219
3226
|
const CatRadio = class {
|
|
@@ -5225,7 +5232,7 @@ var autosizeInput = function (element, options) {
|
|
|
5225
5232
|
}
|
|
5226
5233
|
};
|
|
5227
5234
|
|
|
5228
|
-
const catSelectCss = ".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 !important}:host-context(.cat-error) .hint-section{color:#d9340d}:host{display:flex;flex-direction:column;gap:0.5rem;position:relative;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))}.select-wrapper{display:flex;align-items:flex-start;background:white;border-radius:0.25rem;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear;padding:0.25rem}.select-wrapper:not(.select-disabled):hover{box-shadow:0 0 0 2px #d7dbe0}.select-wrapper:not(.select-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}:host(.cat-error) .select-wrapper{box-shadow:0 0 0 1px #d9340d}:host(.cat-error) .select-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px #d9340d}.select-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));pointer-events:none}.select-wrapper-inner{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:0.25rem;min-width:0}.select-wrapper-inner>cat-avatar{padding-left:0.25rem}.select-wrapper-inner cat-avatar{--cat-avatar-size:1.25rem}.select-input{font:inherit;background:none;border:none;outline:none;padding:0.375rem 0.5rem;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.select-disabled .select-input{cursor:inherit}.select-pills{display:contents}.pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;background:#f2f4f7;border-radius:0.125rem;white-space:nowrap;min-width:0}.pill>span{overflow:hidden;text-overflow:ellipsis}.pill>cat-button{margin-right:-0.25rem;margin-left:-0.25rem}.select-btn{transition:transform 0.13s linear}.select-btn::part(button){outline:none}cat-spinner{padding:0.375rem}.select-btn-open{transform:rotate(180deg)}.select-dropdown{position:absolute;right:0;background:white;display:none;overflow:auto;box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:0.25rem;z-index:100}.select-options-wrapper{max-height:16rem;width:100%}.select-empty{margin:1rem 0;padding:0 1.25rem}.select-options{list-style-type:none;margin:0;padding:0.5rem 0}.select-options cat-checkbox,.select-options .select-option-single{margin:0;padding:0.5rem 1rem}.select-option-inner{display:flex;gap:0.5rem;--cat-avatar-size:1.25rem}.select-option-single{cursor:pointer}.select-input-transparent-caret{caret-color:transparent}.select-option-empty,.select-option-loading{padding:0.5rem 1rem}.select-option:hover{background-color:rgba(105, 118, 135, 0.05)}.select-option-active{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-2px}.select-option-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}.select-option-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
|
|
5235
|
+
const catSelectCss = ".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 !important}:host-context(.cat-error) .hint-section{color:#d9340d}:host{display:flex;flex-direction:column;gap:0.5rem;position:relative;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))}.select-wrapper{display:flex;align-items:flex-start;background:white;border-radius:0.25rem;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear;padding:0.25rem}.select-wrapper:not(.select-disabled):hover{box-shadow:0 0 0 2px #d7dbe0}.select-wrapper:not(.select-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}:host(.cat-error) .select-wrapper{box-shadow:0 0 0 1px #d9340d}:host(.cat-error) .select-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px #d9340d}.select-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));pointer-events:none}.select-wrapper-inner{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:0.25rem;min-width:0}.select-wrapper-inner>cat-avatar{padding-left:0.25rem}.select-wrapper-inner cat-avatar{--cat-avatar-size:1.25rem}.select-input{font:inherit;background:none;border:none;outline:none;padding:0.375rem 0.5rem;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.select-disabled .select-input{cursor:inherit}.select-pills{display:contents}.pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;background:#f2f4f7;border-radius:0.125rem;white-space:nowrap;min-width:0}.pill>span{overflow:hidden;text-overflow:ellipsis;flex:1 1 0%}.pill>cat-button{margin-right:-0.25rem;margin-left:-0.25rem}.select-btn{transition:transform 0.13s linear}.select-btn::part(button){outline:none}cat-spinner{padding:0.375rem}.select-btn-open{transform:rotate(180deg)}.select-dropdown{position:absolute;right:0;background:white;display:none;overflow:auto;box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:0.25rem;z-index:100}.select-options-wrapper{max-height:16rem;width:100%}.select-empty{margin:1rem 0;padding:0 1.25rem}.select-options{list-style-type:none;margin:0;padding:0.5rem 0}.select-options cat-checkbox,.select-options .select-option-single{margin:0;padding:0.5rem 1rem}.select-option-inner{display:flex;gap:0.5rem;--cat-avatar-size:1.25rem}.select-option-text{flex:1 1 0%}.select-option-single{cursor:pointer}.select-input-transparent-caret{caret-color:transparent}.select-option-empty,.select-option-loading{padding:0.5rem 1rem}.select-option:hover{background-color:rgba(105, 118, 135, 0.05)}.select-option-active{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-2px}.select-option-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}.select-option-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
|
|
5229
5236
|
|
|
5230
5237
|
const INIT_STATE = {
|
|
5231
5238
|
term: '',
|
|
@@ -5400,6 +5407,11 @@ const CatSelect = class {
|
|
|
5400
5407
|
if (this.state.activeSelectionIndex >= 0) {
|
|
5401
5408
|
this.deselect(this.state.selection[this.state.activeSelectionIndex].item.id);
|
|
5402
5409
|
}
|
|
5410
|
+
else if (this.state.selection.length) {
|
|
5411
|
+
const selectionClone = [...this.state.selection];
|
|
5412
|
+
selectionClone.pop();
|
|
5413
|
+
this.patchState({ selection: selectionClone });
|
|
5414
|
+
}
|
|
5403
5415
|
}
|
|
5404
5416
|
}
|
|
5405
5417
|
else if (event.key === 'Tab') {
|
|
@@ -5454,7 +5466,7 @@ const CatSelect = class {
|
|
|
5454
5466
|
.subscribe(items => {
|
|
5455
5467
|
var _a;
|
|
5456
5468
|
const options = items === null || items === void 0 ? void 0 : items.map(item => ({
|
|
5457
|
-
item,
|
|
5469
|
+
item: Object.assign(Object.assign({}, item), { id: this.connectorSafe.customId ? this.connectorSafe.customId(item) : item.id }),
|
|
5458
5470
|
render: this.connectorSafe.render(item)
|
|
5459
5471
|
}));
|
|
5460
5472
|
if (this.tags &&
|
|
@@ -5870,7 +5882,7 @@ const CatSelectTest = class {
|
|
|
5870
5882
|
}
|
|
5871
5883
|
})
|
|
5872
5884
|
});
|
|
5873
|
-
(_c = this.multipleSelectTagging) === null || _c === void 0 ? void 0 : _c.connect(this.countryConnector);
|
|
5885
|
+
(_c = this.multipleSelectTagging) === null || _c === void 0 ? void 0 : _c.connect(Object.assign(Object.assign({}, this.countryConnector), { customId: (item) => item.country }));
|
|
5874
5886
|
(_d = this.singleSelect) === null || _d === void 0 ? void 0 : _d.connect({
|
|
5875
5887
|
resolve: (ids) => {
|
|
5876
5888
|
console.info(`Resolving data... (${ids.join(', ')})`);
|
|
@@ -5901,11 +5913,11 @@ const CatSelectTest = class {
|
|
|
5901
5913
|
description: user.desc
|
|
5902
5914
|
})
|
|
5903
5915
|
});
|
|
5904
|
-
(_e = this.singleSelectAvatar) === null || _e === void 0 ? void 0 : _e.connect(this.countryConnector);
|
|
5916
|
+
(_e = this.singleSelectAvatar) === null || _e === void 0 ? void 0 : _e.connect(Object.assign(Object.assign({}, this.countryConnector), { customId: (item) => item.country }));
|
|
5905
5917
|
(_f = this.singleSelectTagging) === null || _f === void 0 ? void 0 : _f.connect(this.countryConnector);
|
|
5906
5918
|
}
|
|
5907
5919
|
render() {
|
|
5908
|
-
return (index.h(index.Host, { style: { display: 'flex', flexDirection: 'column' } }, index.h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatBlur: e => console.log('Multiple blur', e), multiple: true, clearable: true }, index.h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), index.h("cat-select", { label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test'] }, placeholder: "Select country", onCatChange: () => { var _a; return console.log((_a = this.multipleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, multiple: true, tags: true, clearable: true }), index.h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true }), index.h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true }), index.h("cat-select", { label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '1', tag: '' }, placeholder: "Search for a country or capital", onCatChange: () => { var _a; return console.log('Single', (_a = this.singleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, tagHint: "new country", tags: true, clearable: true })));
|
|
5920
|
+
return (index.h(index.Host, { style: { display: 'flex', flexDirection: 'column' } }, index.h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => { var _a; return console.log((_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.value); }, onCatBlur: e => console.log('Multiple blur', e), multiple: true, clearable: true }, index.h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), index.h("cat-select", { label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania'] }, placeholder: "Select country", onCatChange: () => { var _a; return console.log((_a = this.multipleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, multiple: true, tags: true, clearable: true }), index.h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true }), index.h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', onCatChange: () => { var _a; return console.log((_a = this.singleSelectAvatar) === null || _a === void 0 ? void 0 : _a.value); }, placeholder: "Search for a country or capital", clearable: true }), index.h("cat-select", { label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '1', tag: '' }, placeholder: "Search for a country or capital", onCatChange: () => { var _a; return console.log('Single', (_a = this.singleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, tagHint: "new country", tags: true, clearable: true })));
|
|
5909
5921
|
}
|
|
5910
5922
|
get countryConnector() {
|
|
5911
5923
|
return {
|
|
@@ -7261,7 +7273,7 @@ const CatTab = class {
|
|
|
7261
7273
|
};
|
|
7262
7274
|
CatTab.style = catTabCss;
|
|
7263
7275
|
|
|
7264
|
-
const catTabsCss = ":host{display:flex;flex-direction:row;box-shadow:inset 0 -1px 0 0 #d7dbe0}:host([hidden]){display:none}:host([tabs-align=center]){justify-content:center}:host([tabs-align=right]){justify-content:end}:host([tabs-align=justify]) cat-button{flex:1 0 auto}.tab{padding:0.5rem}.tab.tab-active{box-shadow:inset 0 -3px 0 0 rgb(var(--cat-primary-bg,
|
|
7276
|
+
const catTabsCss = ":host{display:flex;flex-direction:row;box-shadow:inset 0 -1px 0 0 #d7dbe0}:host([hidden]){display:none}:host([tabs-align=center]){justify-content:center}:host([tabs-align=right]){justify-content:end}:host([tabs-align=justify]) cat-button{flex:1 0 auto}.tab{padding:0.5rem 0}.tab.tab-active{box-shadow:inset 0 -3px 0 0 rgb(var(--cat-primary-bg, 0, 129, 148))}";
|
|
7265
7277
|
|
|
7266
7278
|
const CatTabs = class {
|
|
7267
7279
|
constructor(hostRef) {
|
|
@@ -7317,7 +7329,7 @@ const CatTabs = class {
|
|
|
7317
7329
|
return (index.h("cat-button", { ref: el => el && this.updateButtonsRef(el), buttonId: tab.id, role: "tab", part: "tab", class: {
|
|
7318
7330
|
tab: true,
|
|
7319
7331
|
'tab-active': Boolean(this.activeTabId && tab.id === this.activeTabId)
|
|
7320
|
-
}, color: this.activeTabId && tab.id === this.activeTabId ? 'primary' : 'secondary', variant: "text", icon: tab.icon, iconOnly: tab.iconOnly, iconRight: tab.iconRight, url: tab.url, disabled: tab.deactivated, urlTarget: tab.urlTarget, onCatClick: () => (this.activeTabId = tab.id) }, tab.label));
|
|
7332
|
+
}, active: Boolean(this.activeTabId && tab.id === this.activeTabId), color: this.activeTabId && tab.id === this.activeTabId ? 'primary' : 'secondary', variant: "text", icon: tab.icon, iconOnly: tab.iconOnly, iconRight: tab.iconRight, url: tab.url, disabled: tab.deactivated, urlTarget: tab.urlTarget, onCatClick: () => (this.activeTabId = tab.id) }, tab.label));
|
|
7321
7333
|
})));
|
|
7322
7334
|
}
|
|
7323
7335
|
updateButtonsRef(button) {
|
|
@@ -7474,7 +7486,7 @@ const CatToastDemo = class {
|
|
|
7474
7486
|
};
|
|
7475
7487
|
CatToastDemo.style = catToastDemoCss;
|
|
7476
7488
|
|
|
7477
|
-
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 !important}:host-context(.cat-error) .hint-section{color:#d9340d}: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,
|
|
7489
|
+
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 !important}:host-context(.cat-error) .hint-section{color:#d9340d}: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, 0, 129, 148))}: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));background:rgb(var(--cat-primary-fill, 255, 255, 255))}:host(.cat-error) .toggle{background-color:rgba(217, 52, 13, 0.2)}:host(.cat-error) :checked+.toggle{background-color:#d9340d}:host(.cat-error) :checked+.toggle::after{background:white}.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))}";
|
|
7478
7490
|
|
|
7479
7491
|
let nextUniqueId$1 = 0;
|
|
7480
7492
|
const CatToggle = class {
|