@haiilo/catalyst 0.1.1 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/catalyst/cat-alert.entry.js +22 -0
- package/dist/catalyst/cat-badge.entry.js +42 -0
- package/dist/catalyst/cat-button.entry.js +11 -7
- package/dist/catalyst/cat-icon.entry.js +3 -3
- package/dist/catalyst/cat-menu.entry.js +44 -17
- package/dist/catalyst/cat-skeleton.entry.js +53 -0
- package/dist/catalyst/cat-spinner.entry.js +2 -2
- package/dist/catalyst/catalyst.css +585 -44
- package/dist/catalyst/catalyst.esm.js +8 -4
- package/dist/catalyst/{css-shim-20dbffa5.js → css-shim-e6dd2538.js} +2 -2
- package/dist/catalyst/{dom-c5ed0ba5.js → dom-7fc649b0.js} +1 -1
- package/dist/catalyst/{index-45406d3b.js → index-a0f41a84.js} +30 -4
- package/dist/catalyst/{shadow-css-8c625855.js → shadow-css-4d56fa31.js} +1 -1
- package/dist/components/cat-alert.d.ts +11 -0
- package/dist/components/cat-badge.d.ts +11 -0
- package/dist/components/cat-skeleton.d.ts +11 -0
- package/dist/components/index.d.ts +1 -1
- package/dist/types/components/cat-alert/cat-alert.d.ts +12 -0
- package/dist/types/components/cat-badge/cat-badge.d.ts +28 -0
- package/dist/types/components/cat-button/cat-button.d.ts +5 -0
- package/dist/types/components/cat-menu/cat-menu.d.ts +13 -4
- package/dist/types/components/cat-skeleton/cat-skeleton.d.ts +28 -0
- package/dist/types/components.d.ts +129 -0
- package/package.json +9 -9
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { r as registerInstance, h } from './index-a0f41a84.js';
|
|
2
|
+
|
|
3
|
+
const catAlertCss = ":host{display:block;margin-bottom:1rem}:host([hidden]){display:none}.cat-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;width:100%}::slotted(:last-child){margin-bottom:0 !important}.cat-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)}.cat-alert-secondary{--bg:105, 118, 135;--text:0, 0, 0;--border:105, 118, 135}.cat-alert-success{--bg:0, 132, 88;--text:0, 132, 88;--border:0, 132, 88}.cat-alert-warning{--bg:255, 206, 128;--text:159, 97, 0;--border:159, 97, 0}.cat-alert-danger{--bg:217, 52, 13;--text:217, 52, 13;--border:217, 52, 13}";
|
|
4
|
+
|
|
5
|
+
const CatAlert = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
/**
|
|
9
|
+
* The color palette of the alert.
|
|
10
|
+
*/
|
|
11
|
+
this.color = 'primary';
|
|
12
|
+
}
|
|
13
|
+
render() {
|
|
14
|
+
return (h("div", { part: "alert", class: {
|
|
15
|
+
'cat-alert': true,
|
|
16
|
+
[`cat-alert-${this.color}`]: Boolean(this.color)
|
|
17
|
+
} }, h("slot", null)));
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
CatAlert.style = catAlertCss;
|
|
21
|
+
|
|
22
|
+
export { CatAlert as cat_alert };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { r as registerInstance, h } from './index-a0f41a84.js';
|
|
2
|
+
|
|
3
|
+
const catBadgeCss = ":host{display:inline-flex;max-width:100%;vertical-align:baseline}:host([hidden]){display:none}.cat-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}.cat-badge slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-badge-round{border-radius:10rem}.cat-badge-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-badge-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}.cat-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)}.cat-badge-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}.cat-badge-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}.cat-badge-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}.cat-badge-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border:217, 52, 13}.cat-badge-xs{height:0.75rem;min-width:0.75rem;font-size:0.75rem;padding:0 0.1875rem}.cat-badge-s{height:1rem;min-width:1rem;font-size:0.75rem;padding:0 0.25rem}.cat-badge-m{height:1.25rem;min-width:1.25rem;font-size:0.75rem;padding:0 0.3125rem}.cat-badge-l{height:1.5rem;min-width:1.5rem;font-size:0.875rem;padding:0 0.375rem}.cat-badge-xl{height:1.75rem;min-width:1.75rem;font-size:0.9375rem;padding:0 0.4375rem}.cat-badge-pulse.cat-badge-filled{animation:1.5s ease 0s infinite normal none running pulse}.cat-badge-pulse.cat-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 0px 0px 0px 0.5rem}100%{box-shadow:transparent 0px 0px 0px 0px}}@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 0px 0px 0px 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2)}100%{box-shadow:transparent 0px 0px 0px 0px, inset 0 0 0 1px rgba(var(--border), 0.2)}}";
|
|
4
|
+
|
|
5
|
+
const CatBadge = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
/**
|
|
9
|
+
* The rendering style of the badge.
|
|
10
|
+
*/
|
|
11
|
+
this.variant = 'filled';
|
|
12
|
+
/**
|
|
13
|
+
* The color palette of the badge.
|
|
14
|
+
*/
|
|
15
|
+
this.color = 'primary';
|
|
16
|
+
/**
|
|
17
|
+
* The size of the badge.
|
|
18
|
+
*/
|
|
19
|
+
this.size = 'm';
|
|
20
|
+
/**
|
|
21
|
+
* Use round badge edges.
|
|
22
|
+
*/
|
|
23
|
+
this.round = false;
|
|
24
|
+
/**
|
|
25
|
+
* Draw attention to the badge with a subtle animation.
|
|
26
|
+
*/
|
|
27
|
+
this.pulse = false;
|
|
28
|
+
}
|
|
29
|
+
render() {
|
|
30
|
+
return (h("span", { part: "badge", class: {
|
|
31
|
+
'cat-badge': true,
|
|
32
|
+
'cat-badge-round': this.round,
|
|
33
|
+
'cat-badge-pulse': this.pulse,
|
|
34
|
+
[`cat-badge-${this.variant}`]: Boolean(this.variant),
|
|
35
|
+
[`cat-badge-${this.color}`]: Boolean(this.color),
|
|
36
|
+
[`cat-badge-${this.size}`]: Boolean(this.size)
|
|
37
|
+
} }, h("slot", null)));
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
CatBadge.style = catBadgeCss;
|
|
41
|
+
|
|
42
|
+
export { CatBadge as cat_badge };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, e as createEvent, h } from './index-
|
|
1
|
+
import { r as registerInstance, e as createEvent, h } from './index-a0f41a84.js';
|
|
2
2
|
|
|
3
3
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
4
4
|
|
|
@@ -458,22 +458,23 @@ function createEmptyStyleRule(query) {
|
|
|
458
458
|
}
|
|
459
459
|
}
|
|
460
460
|
|
|
461
|
-
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{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 #0071ff;outline-offset:1px}.cat-button-content{flex:1 1 auto;text-align:center}.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:underline}.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}.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}.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}.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}.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){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host-context(nav) .cat-button-content{text-align:left}";
|
|
461
|
+
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{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 #0071ff;outline-offset:1px}.cat-button-content{flex:1 1 auto;text-align:center}.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:underline}.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:1rem;padding-right:1rem}.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:1rem;padding-right:1rem}.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:1rem;padding-right:1rem}.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:1rem;padding-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:1rem;padding-right:1rem}:host-context(nav){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host-context(nav) .cat-button-content{text-align:left}";
|
|
462
462
|
|
|
463
|
-
|
|
463
|
+
const CatButton = class {
|
|
464
464
|
constructor(hostRef) {
|
|
465
465
|
registerInstance(this, hostRef);
|
|
466
|
+
this.catClick = createEvent(this, "catClick", 7);
|
|
466
467
|
this.catFocus = createEvent(this, "catFocus", 7);
|
|
467
468
|
this.catBlur = createEvent(this, "catBlur", 7);
|
|
468
469
|
this._iconOnly = true;
|
|
469
470
|
/**
|
|
470
471
|
* The rendering style of the button.
|
|
471
472
|
*/
|
|
472
|
-
this.variant = '
|
|
473
|
+
this.variant = 'outlined';
|
|
473
474
|
/**
|
|
474
475
|
* The color palette of the button.
|
|
475
476
|
*/
|
|
476
|
-
this.color = '
|
|
477
|
+
this.color = 'secondary';
|
|
477
478
|
/**
|
|
478
479
|
* The size of the button.
|
|
479
480
|
*/
|
|
@@ -565,7 +566,7 @@ let CatButton = class {
|
|
|
565
566
|
[`cat-button-${this.variant}`]: Boolean(this.variant),
|
|
566
567
|
[`cat-button-${this.color}`]: Boolean(this.color),
|
|
567
568
|
[`cat-button-${this.size}`]: Boolean(this.size)
|
|
568
|
-
}, onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
|
|
569
|
+
}, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
|
|
569
570
|
}
|
|
570
571
|
else {
|
|
571
572
|
return (h("button", { ref: el => (this.button = el), type: this.submit ? 'submit' : 'button', name: this.name, value: this.value, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.a11yLabel, id: this.buttonId, part: "button", class: {
|
|
@@ -578,7 +579,7 @@ let CatButton = class {
|
|
|
578
579
|
[`cat-button-${this.variant}`]: Boolean(this.variant),
|
|
579
580
|
[`cat-button-${this.color}`]: Boolean(this.color),
|
|
580
581
|
[`cat-button-${this.size}`]: Boolean(this.size)
|
|
581
|
-
}, onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
|
|
582
|
+
}, onClick: this.onClick.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }, this.content));
|
|
582
583
|
}
|
|
583
584
|
}
|
|
584
585
|
get iconSize() {
|
|
@@ -614,6 +615,9 @@ let CatButton = class {
|
|
|
614
615
|
this.loading ? h("cat-spinner", { size: this.spinnerSize }) : null
|
|
615
616
|
];
|
|
616
617
|
}
|
|
618
|
+
onClick(event) {
|
|
619
|
+
this.catClick.emit(event);
|
|
620
|
+
}
|
|
617
621
|
onFocus(event) {
|
|
618
622
|
this.catFocus.emit(event);
|
|
619
623
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index-
|
|
1
|
+
import { r as registerInstance, h } from './index-a0f41a84.js';
|
|
2
2
|
import { C as CatIconRegistry } from './cat-icon-registry-59da2e37.js';
|
|
3
3
|
|
|
4
|
-
const catIconCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host[hidden]{display:none}span{display:inline-flex}svg{fill:currentColor;stroke:none;transform-origin:center center;width:1em;height:1em}.cat-icon-xs svg{font-size:0.75rem}.cat-icon-s svg{font-size:1rem}.cat-icon-m svg{font-size:1.25rem}.cat-icon-l svg{font-size:1.5rem}.cat-icon-xl svg{font-size:1.75rem}";
|
|
4
|
+
const catIconCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}span{display:inline-flex}svg{fill:currentColor;stroke:none;transform-origin:center center;width:1em;height:1em}.cat-icon-xs svg{font-size:0.75rem}.cat-icon-s svg{font-size:1rem}.cat-icon-m svg{font-size:1.25rem}.cat-icon-l svg{font-size:1.5rem}.cat-icon-xl svg{font-size:1.75rem}";
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
const CatIcon = class {
|
|
7
7
|
constructor(hostRef) {
|
|
8
8
|
registerInstance(this, hostRef);
|
|
9
9
|
this.iconRegistry = CatIconRegistry.getInstance();
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as registerInstance, e as createEvent, h, f as Host
|
|
1
|
+
import { r as registerInstance, e as createEvent, h, f as Host } from './index-a0f41a84.js';
|
|
2
2
|
|
|
3
3
|
function getSide(placement) {
|
|
4
4
|
return placement.split('-')[0];
|
|
@@ -2875,45 +2875,68 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
|
|
|
2875
2875
|
return trap;
|
|
2876
2876
|
};
|
|
2877
2877
|
|
|
2878
|
-
const catMenuCss = ".content{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}";
|
|
2878
|
+
const catMenuCss = ":host{display:inline-block}: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}";
|
|
2879
2879
|
|
|
2880
|
-
let
|
|
2880
|
+
let nextUniqueId = 0;
|
|
2881
|
+
const CatMenu = class {
|
|
2881
2882
|
constructor(hostRef) {
|
|
2882
2883
|
registerInstance(this, hostRef);
|
|
2883
2884
|
this.catOpen = createEvent(this, "catOpen", 7);
|
|
2884
2885
|
this.catClose = createEvent(this, "catClose", 7);
|
|
2885
|
-
this.
|
|
2886
|
-
|
|
2886
|
+
this.id = nextUniqueId++;
|
|
2887
|
+
/**
|
|
2888
|
+
* The placement of the menu.
|
|
2889
|
+
*/
|
|
2887
2890
|
this.placement = 'bottom-start';
|
|
2888
2891
|
}
|
|
2889
|
-
|
|
2892
|
+
clickHandler(event) {
|
|
2890
2893
|
var _a;
|
|
2891
|
-
|
|
2892
|
-
this.content
|
|
2894
|
+
// hide menu on button click
|
|
2895
|
+
if (this.content && event.composedPath().includes(this.content)) {
|
|
2896
|
+
(_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
|
|
2897
|
+
this.hide();
|
|
2898
|
+
}
|
|
2899
|
+
}
|
|
2900
|
+
componentDidLoad() {
|
|
2901
|
+
var _a, _b, _c, _d, _e;
|
|
2902
|
+
this.trigger = this.firstTabbable(this.triggerSlot);
|
|
2903
|
+
(_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', 'true');
|
|
2904
|
+
(_b = this.trigger) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', 'false');
|
|
2905
|
+
(_c = this.trigger) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-controls', this.contentId);
|
|
2906
|
+
(_d = this.content) === null || _d === void 0 ? void 0 : _d.setAttribute('id', this.contentId);
|
|
2893
2907
|
if (this.trigger && this.content) {
|
|
2894
|
-
(
|
|
2908
|
+
(_e = this.trigger) === null || _e === void 0 ? void 0 : _e.addEventListener('click', () => this.show());
|
|
2895
2909
|
autoUpdate(this.trigger, this.content, () => this.update());
|
|
2896
2910
|
}
|
|
2897
|
-
|
|
2911
|
+
this.keyListener = event => {
|
|
2898
2912
|
if (this.content && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
|
|
2899
2913
|
const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });
|
|
2900
|
-
const activeElement = document.activeElement
|
|
2901
|
-
|
|
2902
|
-
: [];
|
|
2903
|
-
const activeIdx = activeElement.length ? targetElements.indexOf(activeElement[0]) : -1;
|
|
2914
|
+
const activeElement = this.firstTabbable(document.activeElement);
|
|
2915
|
+
const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;
|
|
2904
2916
|
const activeOff = event.key === 'ArrowDown' ? 1 : -1;
|
|
2905
2917
|
const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
|
|
2906
2918
|
targetElements[targetIdx].focus();
|
|
2907
2919
|
event.preventDefault();
|
|
2908
2920
|
}
|
|
2909
|
-
}
|
|
2921
|
+
};
|
|
2922
|
+
document.addEventListener('keydown', this.keyListener);
|
|
2923
|
+
}
|
|
2924
|
+
disconnectedCallback() {
|
|
2925
|
+
if (this.keyListener) {
|
|
2926
|
+
document.removeEventListener('keydown', this.keyListener);
|
|
2927
|
+
}
|
|
2910
2928
|
}
|
|
2911
2929
|
render() {
|
|
2912
|
-
return (h(Host, null, h("slot", { name: "trigger" }), h("div", { class: "content" }, h("slot", { name: "content" }))));
|
|
2930
|
+
return (h(Host, null, h("slot", { name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { class: "content", ref: el => (this.content = el) }, h("slot", { name: "content" }))));
|
|
2931
|
+
}
|
|
2932
|
+
get contentId() {
|
|
2933
|
+
return `cat-menu-${this.id}`;
|
|
2913
2934
|
}
|
|
2914
2935
|
show() {
|
|
2936
|
+
var _a;
|
|
2915
2937
|
if (this.content) {
|
|
2916
2938
|
this.content.style.display = 'block';
|
|
2939
|
+
(_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'true');
|
|
2917
2940
|
this.catOpen.emit();
|
|
2918
2941
|
this.trap = this.trap
|
|
2919
2942
|
? this.trap.updateContainerElements(this.content)
|
|
@@ -2929,8 +2952,10 @@ let CatMenu = class {
|
|
|
2929
2952
|
}
|
|
2930
2953
|
}
|
|
2931
2954
|
hide() {
|
|
2955
|
+
var _a;
|
|
2932
2956
|
if (this.content) {
|
|
2933
2957
|
this.content.style.display = '';
|
|
2958
|
+
(_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
|
|
2934
2959
|
this.catClose.emit();
|
|
2935
2960
|
}
|
|
2936
2961
|
}
|
|
@@ -2949,7 +2974,9 @@ let CatMenu = class {
|
|
|
2949
2974
|
});
|
|
2950
2975
|
}
|
|
2951
2976
|
}
|
|
2952
|
-
|
|
2977
|
+
firstTabbable(container) {
|
|
2978
|
+
return (container ? tabbable(container, { includeContainer: true, getShadowRoot: true }) : []).shift();
|
|
2979
|
+
}
|
|
2953
2980
|
};
|
|
2954
2981
|
CatMenu.OFFSET = 4;
|
|
2955
2982
|
CatMenu.style = catMenuCss;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { r as registerInstance, h, f as Host } from './index-a0f41a84.js';
|
|
2
|
+
|
|
3
|
+
const catSkeletonCss = ":host{display:flex;flex-direction:column;position:relative;--background:#ebecf0;--highlight:#d7dbe0;--speed:2s}:host([variant=square]),:host([variant=circle]){display:inline-flex}:host([hidden]){display:none}:host([variant=head]){margin-bottom:0.5rem}:host([variant=body]){margin-bottom:1rem}.cat-skeleton{display:block;border-radius:0.25rem;background:var(--background)}.cat-skeleton-circle{border-radius:10rem}.cat-skeleton-xs.cat-skeleton-rectangle{width:var(--width, 100%);height:var(--height, 1.5rem)}.cat-skeleton-xs.cat-skeleton-square,.cat-skeleton-xs.cat-skeleton-circle{width:var(--width, 1.5rem);height:var(--height, 1.5rem)}.cat-skeleton-xs.cat-skeleton-head,.cat-skeleton-xs.cat-skeleton-body{width:var(--width, var(--line-width, 100%))}.cat-skeleton-xs.cat-skeleton-head{height:calc(0.9375rem - 4px);margin:calc((1.25rem - 0.9375rem + 4px) * 0.5) 0}.cat-skeleton-xs.cat-skeleton-body{height:calc(0.75rem - 4px);margin:calc((1rem - 0.75rem + 4px) * 0.5) 0}.cat-skeleton-s.cat-skeleton-rectangle{width:var(--width, 100%);height:var(--height, 2rem)}.cat-skeleton-s.cat-skeleton-square,.cat-skeleton-s.cat-skeleton-circle{width:var(--width, 2rem);height:var(--height, 2rem)}.cat-skeleton-s.cat-skeleton-head,.cat-skeleton-s.cat-skeleton-body{width:var(--width, var(--line-width, 100%))}.cat-skeleton-s.cat-skeleton-head{height:calc(1.125rem - 4px);margin:calc((1.5rem - 1.125rem + 4px) * 0.5) 0}.cat-skeleton-s.cat-skeleton-body{height:calc(0.875rem - 4px);margin:calc((1rem - 0.875rem + 4px) * 0.5) 0}.cat-skeleton-m.cat-skeleton-rectangle{width:var(--width, 100%);height:var(--height, 2.5rem)}.cat-skeleton-m.cat-skeleton-square,.cat-skeleton-m.cat-skeleton-circle{width:var(--width, 2.5rem);height:var(--height, 2.5rem)}.cat-skeleton-m.cat-skeleton-head,.cat-skeleton-m.cat-skeleton-body{width:var(--width, var(--line-width, 100%))}.cat-skeleton-m.cat-skeleton-head{height:calc(1.25rem - 4px);margin:calc((1.5rem - 1.25rem + 4px) * 0.5) 0}.cat-skeleton-m.cat-skeleton-body{height:calc(0.9375rem - 4px);margin:calc((1.25rem - 0.9375rem + 4px) * 0.5) 0}.cat-skeleton-l.cat-skeleton-rectangle{width:var(--width, 100%);height:var(--height, 3rem)}.cat-skeleton-l.cat-skeleton-square,.cat-skeleton-l.cat-skeleton-circle{width:var(--width, 3rem);height:var(--height, 3rem)}.cat-skeleton-l.cat-skeleton-head,.cat-skeleton-l.cat-skeleton-body{width:var(--width, var(--line-width, 100%))}.cat-skeleton-l.cat-skeleton-head{height:calc(1.5rem - 4px);margin:calc((1.75rem - 1.5rem + 4px) * 0.5) 0}.cat-skeleton-l.cat-skeleton-body{height:calc(1.125rem - 4px);margin:calc((1.5rem - 1.125rem + 4px) * 0.5) 0}.cat-skeleton-xl.cat-skeleton-rectangle{width:var(--width, 100%);height:var(--height, 3.5rem)}.cat-skeleton-xl.cat-skeleton-square,.cat-skeleton-xl.cat-skeleton-circle{width:var(--width, 3.5rem);height:var(--height, 3.5rem)}.cat-skeleton-xl.cat-skeleton-head,.cat-skeleton-xl.cat-skeleton-body{width:var(--width, var(--line-width, 100%))}.cat-skeleton-xl.cat-skeleton-head{height:calc(1.75rem - 4px);margin:calc((2rem - 1.75rem + 4px) * 0.5) 0}.cat-skeleton-xl.cat-skeleton-body{height:calc(1.25rem - 4px);margin:calc((1.5rem - 1.25rem + 4px) * 0.5) 0}.cat-skeleton-sheen{background:linear-gradient(90deg, var(--background) 33%, var(--highlight) 50%, var(--background) 66%) var(--background);background-size:300% 100%;animation:sheen var(--speed) ease-in-out infinite}.cat-skeleton-pulse{position:relative;overflow:hidden}.cat-skeleton-pulse::before{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:var(--highlight);animation:var(--speed) ease-in-out 0.5s infinite normal none running pulse;opacity:0}@keyframes sheen{0%{background-position:right}}@keyframes pulse{50%{opacity:1}}";
|
|
4
|
+
|
|
5
|
+
const CatSkeleton = class {
|
|
6
|
+
constructor(hostRef) {
|
|
7
|
+
registerInstance(this, hostRef);
|
|
8
|
+
/**
|
|
9
|
+
* The animation style of the skeleton.
|
|
10
|
+
*/
|
|
11
|
+
this.effect = 'sheen';
|
|
12
|
+
/**
|
|
13
|
+
* The rendering style of the skeleton.
|
|
14
|
+
*/
|
|
15
|
+
this.variant = 'rectangle';
|
|
16
|
+
/**
|
|
17
|
+
* The size of the skeleton. If the variant is set to "head", the size values
|
|
18
|
+
* "xs" to "xl" translate to the head levels `h1` to `h5`.
|
|
19
|
+
*/
|
|
20
|
+
this.size = 'm';
|
|
21
|
+
}
|
|
22
|
+
render() {
|
|
23
|
+
return (h(Host, null, Array.from(Array(this.count)).map(() => (h("div", { style: this.style, class: {
|
|
24
|
+
'cat-skeleton': true,
|
|
25
|
+
[`cat-skeleton-${this.effect}`]: Boolean(this.effect),
|
|
26
|
+
[`cat-skeleton-${this.variant}`]: Boolean(this.variant),
|
|
27
|
+
[`cat-skeleton-${this.size}`]: Boolean(this.size)
|
|
28
|
+
} })))));
|
|
29
|
+
}
|
|
30
|
+
get count() {
|
|
31
|
+
switch (this.variant) {
|
|
32
|
+
case 'head':
|
|
33
|
+
return Math.max(1, this.lines || 1);
|
|
34
|
+
case 'body':
|
|
35
|
+
return Math.max(1, this.lines || 3);
|
|
36
|
+
default:
|
|
37
|
+
return 1;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
get style() {
|
|
41
|
+
return this.variant === 'head' || this.variant === 'body'
|
|
42
|
+
? {
|
|
43
|
+
'--line-width': `${this.random(50, 100)}%`
|
|
44
|
+
}
|
|
45
|
+
: undefined;
|
|
46
|
+
}
|
|
47
|
+
random(min, max) {
|
|
48
|
+
return Math.floor(Math.random() * (max - min + 1) + min);
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
CatSkeleton.style = catSkeletonCss;
|
|
52
|
+
|
|
53
|
+
export { CatSkeleton as cat_skeleton };
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { r as registerInstance, h } from './index-
|
|
1
|
+
import { r as registerInstance, h } from './index-a0f41a84.js';
|
|
2
2
|
|
|
3
3
|
const catSpinnerCss = ":host{display:inline-flex;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host[hidden]{display:none}span{display:inline-flex}svg{fill:none;stroke:currentColor;stroke-dasharray:135px;stroke-dashoffset:95px;stroke-linecap:round;stroke-width:5px;transform-origin:center center;animation:cat-spinner 0.75s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;width:1em;height:1em}.cat-spinner-xs svg{font-size:0.75rem}.cat-spinner-s svg{font-size:1rem}.cat-spinner-m svg{font-size:1.25rem}.cat-spinner-l svg{font-size:1.5rem}.cat-spinner-xl svg{font-size:1.75rem}@keyframes cat-spinner{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}";
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
const CatSpinner = class {
|
|
6
6
|
constructor(hostRef) {
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
/**
|