npm - @haiilo/catalyst - Versions diffs - 10.1.0 → 10.2.0 - Mend

@haiilo/catalyst 10.1.0 → 10.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.

Files changed (184) hide show

package/dist/components/cat-button2.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { l as loglevel } from './loglevel.js';
+import { l as log } from './loglevel.js';
 import { d as defineCustomElement$2 } from './cat-icon2.js';
 import { d as defineCustomElement$1 } from './cat-spinner2.js';
@@ -114,11 +114,12 @@ function createEmptyStyleRule(query) {
         }
     }
     catch (e) {
-        loglevel.error(e);
+        log.error(e);
     }
 }
-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:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-group-button-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-group-button-middle{border-radius:0}.cat-group-button-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-group-button:hover{z-index:1}.cat-group-button:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.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:var(--cat-link-button-decoration, none)}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-link{background-color:transparent;color:rgb(var(--text))}.cat-button-link.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-link:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-decoration-hover, underline)}.cat-button-primary{--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 99, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 99, 113)}.cat-button-secondary{--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-hover, 105, 118, 135);--fill:var(--cat-secondary-fill-hover, 255, 255, 255);--text:var(--cat-secondary-text-hover, 0, 0, 0)}.cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-secondary-text-active, 0, 0, 0)}.cat-button-info{--bg:var(--cat-success-bg, 0, 115, 230);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 115, 230);--base:var(--cat-success-text, 0, 115, 230)}.cat-button-info:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 107, 227);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 107, 227)}.cat-button-info.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-info:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 96, 223);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 96, 223)}.cat-button-success{--bg:var(--cat-success-bg, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 117, 78);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 117, 78)}.cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 105, 70);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 105, 70)}.cat-button-warning{--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0);--base:var(--cat-warning-text, 159, 97, 0)}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-hover, 255, 214, 148);--fill:var(--cat-warning-fill-hover, 0, 0, 0);--text:var(--cat-warning-text-hover, 159, 97, 0)}.cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-active, 255, 222, 168);--fill:var(--cat-warning-fill-active, 0, 0, 0);--text:var(--cat-warning-text-active, 159, 97, 0)}.cat-button-danger{--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13);--base:var(--cat-danger-text, 217, 52, 13)}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-hover, 194, 46, 11);--fill:var(--cat-danger-fill-hover, 255, 255, 255);--text:var(--cat-danger-text-hover, 194, 46, 11)}.cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-danger-text-active, 174, 42, 10)}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.1875rem 0.25rem;font-size:0.875rem;line-height:1.125rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;height:1.5rem;padding:0}:host(.cat-button-pull[size=xs]){margin:-0.1875rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.1875rem;margin-bottom:-0.1875rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.1875rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.1875rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;height:2rem;padding:0}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;height:2.5rem;padding:0}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;height:3rem;padding:0}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;gap:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;height:3.5rem;padding:0}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}:host(.cat-tab)::part(button){padding:1.125rem 0.75rem;--cat-secondary-bg:transparent;--cat-primary-text:transparent;--cat-danger-text:transparent}:host(.cat-tab)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}";
+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:var(--cat-border-radius-m, 0.25rem);text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 125ms linear, border-color 125ms linear, background-color 125ms linear, box-shadow 125ms linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-content{display:flex;flex-direction:column;min-width:0}.cat-button-content-inner{word-wrap:break-word;word-break:break-word}.cat-button-ellipsed .cat-button-content-inner{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-group-button-first{border-top-right-radius:0;border-bottom-right-radius:0}.cat-group-button-middle{border-radius:0}.cat-group-button-last{border-top-left-radius:0;border-bottom-left-radius:0}.cat-group-button:hover{z-index:1}.cat-group-button:focus-visible{z-index:2}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:var(--cat-font-weight-button, 600);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-filled.cat-button-disabled{--bg:242, 244, 247;--fill:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined.cat-button-disabled{--base:var(--cat-font-color-muted, 81, 92, 108);--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-outlined.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.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:var(--cat-link-button-decoration, none)}.cat-button-text.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-link{background-color:transparent;color:rgb(var(--text))}.cat-button-link.cat-button-disabled{--text:var(--cat-font-color-muted, 81, 92, 108)}.cat-button-link:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-decoration-hover, underline)}.cat-button-link.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:var(--cat-link-decoration-hover, underline)}.cat-button-primary{--bg:var(--cat-primary-bg, 0, 129, 148);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 0, 129, 148);--base:var(--cat-primary-text, 0, 129, 148)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 1, 115, 132);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 1, 115, 132)}.cat-button-primary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 2, 99, 113);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 2, 99, 113)}.cat-button-secondary{--bg:var(--cat-secondary-bg, 105, 118, 135);--fill:var(--cat-secondary-fill, 255, 255, 255);--text:var(--cat-secondary-text, 0, 0, 0);--base:var(--cat-secondary-bg, 105, 118, 135)}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-hover, 105, 118, 135);--fill:var(--cat-secondary-fill-hover, 255, 255, 255);--text:var(--cat-secondary-text-hover, 0, 0, 0)}.cat-button-secondary.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-secondary-bg-active, 105, 118, 135);--fill:var(--cat-secondary-fill-active, 255, 255, 255);--text:var(--cat-secondary-text-active, 0, 0, 0)}.cat-button-info{--bg:var(--cat-info-bg, 0, 115, 230);--fill:var(--cat-info-fill, 255, 255, 255);--text:var(--cat-info-text, 0, 115, 230);--base:var(--cat-info-text, 0, 115, 230)}.cat-button-info:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-hover, 0, 107, 227);--fill:var(--cat-info-fill-hover, 255, 255, 255);--text:var(--cat-info-text-hover, 0, 107, 227)}.cat-button-info.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-info:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-info-bg-active, 0, 96, 223);--fill:var(--cat-info-fill-active, 255, 255, 255);--text:var(--cat-info-text-active, 0, 96, 223)}.cat-button-success{--bg:var(--cat-success-bg, 0, 132, 88);--fill:var(--cat-success-fill, 255, 255, 255);--text:var(--cat-success-text, 0, 132, 88);--base:var(--cat-success-text, 0, 132, 88)}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-hover, 0, 117, 78);--fill:var(--cat-success-fill-hover, 255, 255, 255);--text:var(--cat-success-text-hover, 0, 117, 78)}.cat-button-success.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-success-bg-active, 0, 105, 70);--fill:var(--cat-success-fill-active, 255, 255, 255);--text:var(--cat-success-text-active, 0, 105, 70)}.cat-button-warning{--bg:var(--cat-warning-bg, 255, 206, 128);--fill:var(--cat-warning-fill, 0, 0, 0);--text:var(--cat-warning-text, 159, 97, 0);--base:var(--cat-warning-text, 159, 97, 0)}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-hover, 255, 214, 148);--fill:var(--cat-warning-fill-hover, 0, 0, 0);--text:var(--cat-warning-text-hover, 159, 97, 0)}.cat-button-warning.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-warning-bg-active, 255, 222, 168);--fill:var(--cat-warning-fill-active, 0, 0, 0);--text:var(--cat-warning-text-active, 159, 97, 0)}.cat-button-danger{--bg:var(--cat-danger-bg, 217, 52, 13);--fill:var(--cat-danger-fill, 255, 255, 255);--text:var(--cat-danger-text, 217, 52, 13);--base:var(--cat-danger-text, 217, 52, 13)}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-hover, 194, 46, 11);--fill:var(--cat-danger-fill-hover, 255, 255, 255);--text:var(--cat-danger-text-hover, 194, 46, 11)}.cat-button-danger.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-danger-bg-active, 174, 42, 10);--fill:var(--cat-danger-fill-active, 255, 255, 255);--text:var(--cat-danger-text-active, 174, 42, 10)}:host(.cat-button-pull:not([size])){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h:not([size])){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v:not([size])){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t:not([size])){margin-top:-0.625rem}:host(.cat-button-pull-l:not([size])){margin-left:-0.75rem}:host(.cat-button-pull-b:not([size])){margin-bottom:-0.625rem}:host(.cat-button-pull-r:not([size])){margin-right:-0.75rem}.cat-button-xs{min-width:1.5rem;padding:0.1875rem 0.25rem;font-size:0.875rem;line-height:1.125rem;gap:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;height:1.5rem;padding:0}:host(.cat-button-pull[size=xs]){margin:-0.1875rem -0.25rem}:host(.cat-button-pull-h[size=xs]){margin-left:-0.25rem;margin-right:-0.25rem}:host(.cat-button-pull-v[size=xs]){margin-top:-0.1875rem;margin-bottom:-0.1875rem}:host(.cat-button-pull-t[size=xs]){margin-top:-0.1875rem}:host(.cat-button-pull-l[size=xs]){margin-left:-0.25rem}:host(.cat-button-pull-b[size=xs]){margin-bottom:-0.1875rem}:host(.cat-button-pull-r[size=xs]){margin-right:-0.25rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;height:2rem;padding:0}:host(.cat-button-pull[size=s]){margin:-0.375rem -0.5rem}:host(.cat-button-pull-h[size=s]){margin-left:-0.5rem;margin-right:-0.5rem}:host(.cat-button-pull-v[size=s]){margin-top:-0.375rem;margin-bottom:-0.375rem}:host(.cat-button-pull-t[size=s]){margin-top:-0.375rem}:host(.cat-button-pull-l[size=s]){margin-left:-0.5rem}:host(.cat-button-pull-b[size=s]){margin-bottom:-0.375rem}:host(.cat-button-pull-r[size=s]){margin-right:-0.5rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;height:2.5rem;padding:0}:host(.cat-button-pull[size=m]){margin:-0.625rem -0.75rem}:host(.cat-button-pull-h[size=m]){margin-left:-0.75rem;margin-right:-0.75rem}:host(.cat-button-pull-v[size=m]){margin-top:-0.625rem;margin-bottom:-0.625rem}:host(.cat-button-pull-t[size=m]){margin-top:-0.625rem}:host(.cat-button-pull-l[size=m]){margin-left:-0.75rem}:host(.cat-button-pull-b[size=m]){margin-bottom:-0.625rem}:host(.cat-button-pull-r[size=m]){margin-right:-0.75rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem;gap:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;height:3rem;padding:0}:host(.cat-button-pull[size=l]){margin:-0.875rem -1rem}:host(.cat-button-pull-h[size=l]){margin-left:-1rem;margin-right:-1rem}:host(.cat-button-pull-v[size=l]){margin-top:-0.875rem;margin-bottom:-0.875rem}:host(.cat-button-pull-t[size=l]){margin-top:-0.875rem}:host(.cat-button-pull-l[size=l]){margin-left:-1rem}:host(.cat-button-pull-b[size=l]){margin-bottom:-0.875rem}:host(.cat-button-pull-r[size=l]){margin-right:-1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem;gap:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;height:3.5rem;padding:0}:host(.cat-button-pull[size=xl]){margin:-1rem -1.25rem}:host(.cat-button-pull-h[size=xl]){margin-left:-1.25rem;margin-right:-1.25rem}:host(.cat-button-pull-v[size=xl]){margin-top:-1rem;margin-bottom:-1rem}:host(.cat-button-pull-t[size=xl]){margin-top:-1rem}:host(.cat-button-pull-l[size=xl]){margin-left:-1.25rem}:host(.cat-button-pull-b[size=xl]){margin-bottom:-1rem}:host(.cat-button-pull-r[size=xl]){margin-right:-1.25rem}:host(.cat-tab)::part(button){padding:1.125rem 0.75rem;--cat-secondary-bg:transparent;--cat-primary-text:transparent;--cat-danger-text:transparent}:host(.cat-tab)::part(content)::before{content:attr(data-text);content:attr(data-text)/\"\";height:0;visibility:hidden;overflow:hidden;user-select:none;pointer-events:none;font-weight:700}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}:host(.cat-nav-item){width:100%}:host(.cat-nav-item) .cat-button{box-shadow:none;justify-content:left;gap:0.5rem}:host(.cat-nav-item) .cat-button:focus-visible{outline-offset:-2px}";
+const CatButtonStyle0 = catButtonCss;
 const CatButton = /*@__PURE__*/ proxyCustomElement(class CatButton extends HTMLElement {
     constructor() {
@@ -175,7 +176,7 @@ const CatButton = /*@__PURE__*/ proxyCustomElement(class CatButton extends HTMLE
     }
     componentWillRender() {
         if (this.isIconButton && !this.a11yLabel) {
-            loglevel.warn('[A11y] Missing ARIA label on icon button', this);
+            log.warn('[A11y] Missing ARIA label on icon button', this);
         }
     }
     haltDisabledEvents(event) {
@@ -284,7 +285,7 @@ const CatButton = /*@__PURE__*/ proxyCustomElement(class CatButton extends HTMLE
     static get watchers() { return {
         "iconOnly": ["onIconOnlyChanged"]
     }; }
-    static get style() { return catButtonCss; }
+    static get style() { return CatButtonStyle0; }
 }, [1, "cat-button", {
         "variant": [1],
         "color": [1],

package/dist/components/cat-button2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-button2.js","mappings":"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","names":["log"],"sources":["src/utils/breakpoints.ts","src/utils/platform.ts","src/utils/media-matcher.ts","src/components/cat-button/cat-button.scss?tag=cat-button&encapsulation=shadow","src/components/cat-button/cat-button.tsx"],"sourcesContent":["const _breakpoints = ['xs', 's', 'm', 'l', 'xl'] as const;\n\nexport type Breakpoint = (typeof _breakpoints)[number];\n\nexport const Breakpoints: { [breakpoint in Breakpoint]: string } = {\n xs: '(max-width: 539.98px)',\n s: '(max-width: 767.98px)',\n m: '(max-width: 991.98px)',\n l: '(max-width: 1199.98px)',\n xl: '(max-width: 1399.98px)'\n};\n\nexport function isBreakpoint(value: unknown): value is Breakpoint {\n return typeof value === 'string' && _breakpoints.includes(value as Breakpoint);\n}\n","// https://github.com/angular/components/blob/master/src/cdk/platform/platform.ts\n\n// Whether the current platform supports the V8 Break Iterator. The V8 check\n// is necessary to detect all Blink based browsers.\nlet hasV8BreakIterator: boolean;\n\n// We need a try/catch around the reference to `Intl`, because accessing it in some cases can\n// cause IE to throw. These cases are tied to particular versions of Windows and can happen if\n// the consumer is providing a polyfilled `Map`. See:\n// https://github.com/Microsoft/ChakraCore/issues/3189\n// https://github.com/angular/components/issues/15687\ntry {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n hasV8BreakIterator = typeof Intl !== 'undefined' && (Intl as any).v8BreakIterator;\n} catch {\n hasV8BreakIterator = false;\n}\n\nexport class Platform {\n /** Whether the current browser is Microsoft Edge. /\n EDGE: boolean = /(edge)/i.test(navigator.userAgent);\n\n /* Whether the current rendering engine is Microsoft Trident. /\n TRIDENT: boolean = /(msie\|trident)/i.test(navigator.userAgent);\n\n // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.\n /* Whether the current rendering engine is Blink. /\n BLINK: boolean =\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n !!((window as any).chrome \|\| hasV8BreakIterator) && typeof CSS !== 'undefined' && !this.EDGE && !this.TRIDENT;\n\n // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to\n // ensure that Webkit runs standalone and is not used as another engine's base.\n /* Whether the current rendering engine is WebKit. /\n WEBKIT: boolean = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;\n\n /* Whether the current platform is Apple iOS. /\n IOS: boolean = /iPad\|iPhone\|iPod/.test(navigator.userAgent) && !('MSStream' in window);\n\n // It's difficult to detect the plain Gecko engine, because most of the browsers identify\n // them self as Gecko-like browsers and modify the userAgent's according to that.\n // Since we only cover one explicit Firefox case, we can simply check for Firefox\n // instead of having an unstable check for Gecko.\n /* Whether the current browser is Firefox. /\n FIREFOX: boolean = /(firefox\|minefield)/i.test(navigator.userAgent);\n\n /* Whether the current platform is Android. /\n // Trident on mobile adds the android platform to the userAgent to trick detections.\n ANDROID: boolean = /android/i.test(navigator.userAgent) && !this.TRIDENT;\n\n // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake\n // this and just place the Safari keyword in the userAgent. To be more safe about Safari every\n // Safari browser should also use Webkit as its layout engine.\n /* Whether the current browser is Safari. /\n SAFARI: boolean = /safari/i.test(navigator.userAgent) && this.WEBKIT;\n}\n","import log from 'loglevel';\nimport { Platform } from './platform';\n\n// https://github.com/angular/components/blob/master/src/cdk/layout/media-matcher.ts\n\n/* Global registry for all dynamically-created, injected media queries. /\nconst mediaQueriesForWebkitCompatibility: Set<string> = new Set<string>();\n\n/* Style tag that holds all of the dynamically-created media queries. /\nlet mediaQueryStyleNode: HTMLStyleElement \| undefined;\n\n/* A utility for calling matchMedia queries. /\nexport class MediaMatcher {\n private _platform;\n private _matchMedia: (query: string) => MediaQueryList;\n\n constructor() {\n this._platform = new Platform();\n this._matchMedia = window.matchMedia.bind(window);\n }\n\n /\n Evaluates the given media query and returns the native MediaQueryList from which results\n * can be retrieved.\n * Confirms the layout engine will trigger for the selector query provided and returns the\n * MediaQueryList for the query provided.\n /\n matchMedia(query: string): MediaQueryList {\n if (this._platform.WEBKIT \|\| this._platform.BLINK) {\n createEmptyStyleRule(query);\n }\n return this._matchMedia(query);\n }\n}\n\n/\n Creates an empty stylesheet that is used to work around browser inconsistencies related to\n * `matchMedia`. At the time of writing, it handles the following cases:\n * 1. On WebKit browsers, a media query has to have at least one rule in order for `matchMedia`\n * to fire. We work around it by declaring a dummy stylesheet with a `@media` declaration.\n * 2. In some cases Blink browsers will stop firing the `matchMedia` listener if none of the rules\n * inside the `@media` match existing elements on the page. We work around it by having one rule\n * targeting the `body`. See https://github.com/angular/components/issues/23546.\n /\nfunction createEmptyStyleRule(query: string) {\n if (mediaQueriesForWebkitCompatibility.has(query)) {\n return;\n }\n\n try {\n if (!mediaQueryStyleNode) {\n mediaQueryStyleNode = document.createElement('style');\n mediaQueryStyleNode.setAttribute('type', 'text/css');\n document.head.appendChild(mediaQueryStyleNode);\n }\n if (mediaQueryStyleNode.sheet) {\n mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);\n mediaQueriesForWebkitCompatibility.add(query);\n }\n } catch (e) {\n log.error(e);\n }\n}\n","@use 'variables' as ;\n@use 'mixins' as ;\n@use 'sass:map';\n\n$button-sizes: (\n 'xl': 3.5rem,\n 'l': 3rem,\n 'm': 2.5rem,\n 's': 2rem,\n 'xs': 1.5rem\n);\n\n:host {\n display: inline-block;\n max-width: 100%;\n vertical-align: middle;\n @include cat-select(none);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.cat-button {\n position: relative;\n font: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: cat-border-radius('m');\n text-decoration: none;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n transition:\n color cat-token('time.transition.s') linear,\n border-color cat-token('time.transition.s') linear,\n background-color cat-token('time.transition.s') linear,\n box-shadow cat-token('time.transition.s') linear;\n\n &:focus-visible {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: 1px;\n }\n}\n\n// ----- content\n\n.cat-button-content {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n\n.cat-button-content-inner {\n @include cat-break-word;\n\n .cat-button-ellipsed & {\n @include cat-ellipsis;\n }\n}\n\n// ----- disabled\n\n.cat-button-disabled {\n cursor: not-allowed;\n}\n\n// ----- round\n\n.cat-button-round {\n border-radius: 10rem;\n}\n\n// ----- loading\n\n.cat-button-loading {\n cursor: default;\n\n cat-spinner {\n position: absolute;\n }\n\n > :not(cat-spinner) {\n visibility: hidden;\n }\n}\n\n// ----- group button\n\n.cat-group-button {\n &-first {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n &-middle {\n border-radius: 0;\n }\n\n &-last {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n &:hover {\n z-index: 1;\n }\n\n &:focus-visible {\n z-index: 2;\n }\n}\n\n// ----- theme\n\n.cat-button-filled {\n background-color: cat-token-wrap(var(--bg));\n color: cat-token-wrap(var(--fill));\n font-weight: var(--cat-font-weight-button, 600);\n @include cat-font-smooth;\n\n &.cat-button-disabled {\n --bg: #{cat-token('color.ui.background.muted', $wrap: false)};\n --fill: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n}\n\n.cat-button-outlined {\n background-color: cat-token('color.ui.background.surface');\n box-shadow: inset 0 0 0 1px cat-token-wrap(var(--base), $alpha: 0.2);\n color: cat-token-wrap(var(--text));\n\n &.cat-button-disabled {\n --base: #{cat-token('color.ui.font.muted', $wrap: false)};\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n }\n\n &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n }\n}\n\n.cat-button-text {\n background-color: transparent;\n color: cat-token-wrap(var(--text));\n text-decoration: cat-token('font.decoration.linkButton');\n\n &.cat-button-disabled {\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: rgba(var(--base), 0.1);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: rgba(var(--base), 0.1);\n }\n}\n\n.cat-button-link {\n background-color: transparent;\n color: cat-token-wrap(var(--text));\n\n &.cat-button-disabled {\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration: cat-token('font.decoration.linkHover');\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration: cat-token('font.decoration.linkHover');\n }\n}\n\n@mixin theme($theme) {\n .cat-button-#{$theme} {\n --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n @if $theme == 'secondary' {\n --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n } @else {\n --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)};\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),\n &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.textActive', $wrap: false)};\n }\n }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('info');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize, $padding) {\n $-line-height: cat-body-line-height($fontSize);\n\n $-total-height: map.get($button-sizes, $size);\n $-padding-v: ($-total-height - $-line-height) * 0.5;\n $-padding-h: $padding;\n\n .cat-button-#{$size} {\n min-width: map.get($button-sizes, $size);\n padding: $-padding-v $-padding-h;\n @include cat-body($fontSize, null);\n gap: 0.25rem;\n\n // normalize icon size for line height\n @if $fontSize == 'm' {\n cat-icon {\n margin-top: -0.125rem;\n margin-bottom: -0.125rem;\n }\n }\n\n &.cat-button-icon {\n width: $-total-height;\n height: $-total-height;\n padding: 0;\n }\n }\n\n :host(.cat-button-pull[size='#{$size}']) {\n margin: $-padding-v * -1 $-padding-h * -1;\n }\n\n :host(.cat-button-pull-h[size='#{$size}']) {\n margin-left: $-padding-h * -1;\n margin-right: $-padding-h * -1;\n }\n\n :host(.cat-button-pull-v[size='#{$size}']) {\n margin-top: $-padding-v * -1;\n margin-bottom: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-t[size='#{$size}']) {\n margin-top: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-l[size='#{$size}']) {\n margin-left: $-padding-h * -1;\n }\n\n :host(.cat-button-pull-b[size='#{$size}']) {\n margin-bottom: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-r[size='#{$size}']) {\n margin-right: $-padding-h * -1;\n }\n}\n\n:host(.cat-button-pull:not([size])) {\n margin: -0.625rem -0.75rem;\n}\n\n:host(.cat-button-pull-h:not([size])) {\n margin-left: -0.75rem;\n margin-right: -0.75rem;\n}\n\n:host(.cat-button-pull-v:not([size])) {\n margin-top: -0.625rem;\n margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-t:not([size])) {\n margin-top: -0.625rem;\n}\n\n:host(.cat-button-pull-l:not([size])) {\n margin-left: -0.75rem;\n}\n\n:host(.cat-button-pull-b:not([size])) {\n margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-r:not([size])) {\n margin-right: -0.75rem;\n}\n\n@include size('xs', 's', 0.25rem);\n@include size('s', 'm', 0.5rem);\n@include size('m', 'm', 0.75rem);\n@include size('l', 'm', 1rem);\n@include size('xl', 'l', 1.25rem);\n\n// ----- tabs\n\n:host(.cat-tab) {\n &::part(button) {\n padding: 1.125rem 0.75rem;\n --cat-secondary-bg: transparent;\n --cat-primary-text: transparent;\n --cat-danger-text: transparent;\n }\n\n &::part(content) {\n &::before {\n content: attr(data-text);\n content: attr(data-text) / '';\n height: 0;\n visibility: hidden;\n overflow: hidden;\n user-select: none;\n pointer-events: none;\n font-weight: 700;\n }\n }\n}\n\n// ----- alignment\n\n:host(.cat-text-left) .cat-button {\n justify-content: left;\n}\n\n:host(.cat-text-right) .cat-button {\n justify-content: right;\n}\n\n// ----- navigation\n\n:host(.cat-nav-item) {\n width: 100%;\n\n .cat-button {\n box-shadow: none;\n justify-content: left;\n gap: 0.5rem;\n\n &:focus-visible {\n outline-offset: -2px;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/*\n Buttons are used for interface actions. Primary style should be used only\n * once per view for main call-to-action.\n \n @part button - The native anchor or button element.\n * @part content - The textual content of the button.\n * @part prefix - The prefix icon.\n * @part suffix - The suffix icon.\n /\n@Component({\n tag: 'cat-button',\n styleUrl: 'cat-button.scss',\n shadow: true\n})\nexport class CatButton {\n private button!: HTMLButtonElement \| HTMLAnchorElement;\n private mediaMatcher?: MediaMatcher;\n private mediaQueryList?: MediaQueryList;\n private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n @State() _iconOnly = true;\n\n /\n The rendering style of the button.\n /\n @Prop() variant: 'filled' \| 'outlined' \| 'text' \| 'link' = 'outlined';\n\n /\n The color palette of the button.\n /\n @Prop() color: 'primary' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger' = 'secondary';\n\n /\n Set the button into an active state.\n /\n @Prop() active = false;\n\n /\n The size of the button.\n /\n @Prop() size: 'xs' \| 's' \| 'm' \| 'l' \| 'xl' = 'm';\n\n /\n The name of the button, which gets paired with the button's value when\n * submitted as part of a form. Corresponds with the native HTML name\n * attribute.\n /\n @Prop() name?: string;\n\n /\n The value of the button, which gets paired with the button's name when\n * submitted as part of a form. Corresponds with the native HTML value\n * attribute.\n /\n @Prop() value?: string;\n\n /\n Specifies that the button should be disabled. A disabled button is unusable\n * and un-clickable. Corresponds with the native HTML disabled attribute.\n /\n @Prop() disabled = false;\n\n /\n Displays the button in a loading state with a spinner. Just like a disabled\n * button, an inactive button is unusable and un-clickable. However, it\n * retains the current focus state.\n /\n @Prop() loading = false;\n\n /\n Allows the button to submit a form.\n /\n @Prop() submit = false;\n\n /\n Disables ellipse overflowing button content.\n /\n @Prop() noEllipsis = false;\n\n /\n Use round button edges.\n /\n @Prop() round = false;\n\n /\n A destination to link to, rendered in the href attribute of a link.\n /\n @Prop() url?: string;\n\n /\n Specifies where to open the linked document.\n /\n @Prop() urlTarget?: '_blank' \| '_self';\n\n /\n The name of an icon to be displayed in the button.\n /\n @Prop() icon?: string;\n\n /\n Hide the actual button content and only display the icon.\n /\n @Prop() iconOnly: boolean \| Breakpoint = false;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\n\n /\n Adds a unique identifier for the button. Please note that with this\n * particular component this ID is added inside the web component. If you need\n * an ID on the HTML element, use the regular `id` attribute instead.\n /\n @Prop() buttonId?: string;\n\n /\n Adds accessible label for the button that is only shown for screen\n * readers. Typically, this label text replaces the visible text on the\n * button for users who use assistive technology.\n /\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /\n Sets the `aria-current` attribute on the button.\n /\n @Prop({ attribute: 'a11y-current' }) a11yCurrent?: string;\n\n /\n Attributes that will be added to the native HTML button element\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n Attributes that will be added to the native HTML button content element\n /\n @Prop() nativeContentAttributes?: { [key: string]: string };\n\n /\n The index of a button that is used inside a cat-button-group component\n /\n @Prop() buttonGroupPosition?: 'first' \| 'last' \| 'middle';\n\n @Watch('iconOnly')\n onIconOnlyChanged(value: boolean \| Breakpoint): void {\n // teardown\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n this.mediaQueryList = undefined;\n this.mediaQueryListener = undefined;\n // setup\n if (isBreakpoint(value)) {\n this.mediaMatcher ??= new MediaMatcher();\n this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n this._iconOnly = this.mediaQueryList.matches;\n } else {\n this._iconOnly = value;\n }\n }\n\n /\n Emitted when the button is clicked.\n /\n @Event() catClick!: EventEmitter<MouseEvent>;\n\n /\n Emitted when the button received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the button loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad(): void {\n this.onIconOnlyChanged(this.iconOnly);\n }\n\n componentWillRender(): void {\n if (this.isIconButton && !this.a11yLabel) {\n log.warn('[A11y] Missing ARIA label on icon button', this);\n }\n }\n\n @Listen('click')\n haltDisabledEvents(event: Event): void {\n if (this.disabled \|\| this.loading) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n /\n Programmatically move focus to the button. Use this method instead of\n * `button.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.button.focus(options);\n }\n\n /\n Programmatically remove focus from the button. Use this method instead of\n * `button.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.button.blur();\n }\n\n /\n Programmatically simulate a click on the button.\n */\n @Method()\n async doClick(): Promise<void> {\n this.button.click();\n }\n\n render() {\n if (this.url) {\n return (\n <a\n {...this.nativeAttributes}\n ref={el => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? undefined : this.url}\n target={this.urlTarget}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n aria-current={this.a11yCurrent}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-active': this.active,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </a>\n );\n } else {\n return (\n <button\n {...this.nativeAttributes}\n ref={el => (this.button = el as HTMLButtonElement)}\n type={this.submit ? 'submit' : 'button'}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n aria-current={this.a11yCurrent}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-active': this.active,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round ?? this.isIconButton,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size),\n [`cat-group-button-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition),\n 'cat-group-button': Boolean(this.buttonGroupPosition)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </button>\n );\n }\n }\n\n private get iconSize(): 'xs' \| 's' \| 'm' \| 'l' \| 'xl' {\n switch (this.size) {\n case 'xs':\n return 's';\n default:\n return 'l';\n }\n }\n\n private get spinnerSize(): 'xs' \| 's' \| 'm' \| 'l' \| 'xl' {\n switch (this.size) {\n case 'xs':\n return 'xs';\n default:\n return 'm';\n }\n }\n\n private get isIconButton() {\n return Boolean(this.icon) && this._iconOnly;\n }\n\n private get hasPrefixIcon() {\n return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n }\n\n private get hasSuffixIcon() {\n return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n }\n\n private get content() {\n return [\n this.hasPrefixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null,\n this.isIconButton ? (\n <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>\n ) : (\n <span class=\"cat-button-content\" part=\"content\" {...this.nativeContentAttributes}>\n <span class=\"cat-button-content-inner\">\n <slot></slot>\n </span>\n </span>\n ),\n this.hasSuffixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"suffix\"></cat-icon> : null,\n this.loading ? <cat-spinner size={this.spinnerSize}></cat-spinner> : null\n ];\n }\n\n private onClick(event: MouseEvent) {\n this.catClick.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"],"version":3}
1	+ {"file":"cat-button2.js","mappings":"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","names":[],"sources":["src/utils/breakpoints.ts","src/utils/platform.ts","src/utils/media-matcher.ts","src/components/cat-button/cat-button.scss?tag=cat-button&encapsulation=shadow","src/components/cat-button/cat-button.tsx"],"sourcesContent":["const _breakpoints = ['xs', 's', 'm', 'l', 'xl'] as const;\n\nexport type Breakpoint = (typeof _breakpoints)[number];\n\nexport const Breakpoints: { [breakpoint in Breakpoint]: string } = {\n xs: '(max-width: 539.98px)',\n s: '(max-width: 767.98px)',\n m: '(max-width: 991.98px)',\n l: '(max-width: 1199.98px)',\n xl: '(max-width: 1399.98px)'\n};\n\nexport function isBreakpoint(value: unknown): value is Breakpoint {\n return typeof value === 'string' && _breakpoints.includes(value as Breakpoint);\n}\n","// https://github.com/angular/components/blob/master/src/cdk/platform/platform.ts\n\n// Whether the current platform supports the V8 Break Iterator. The V8 check\n// is necessary to detect all Blink based browsers.\nlet hasV8BreakIterator: boolean;\n\n// We need a try/catch around the reference to `Intl`, because accessing it in some cases can\n// cause IE to throw. These cases are tied to particular versions of Windows and can happen if\n// the consumer is providing a polyfilled `Map`. See:\n// https://github.com/Microsoft/ChakraCore/issues/3189\n// https://github.com/angular/components/issues/15687\ntry {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n hasV8BreakIterator = typeof Intl !== 'undefined' && (Intl as any).v8BreakIterator;\n} catch {\n hasV8BreakIterator = false;\n}\n\nexport class Platform {\n /** Whether the current browser is Microsoft Edge. /\n EDGE: boolean = /(edge)/i.test(navigator.userAgent);\n\n /* Whether the current rendering engine is Microsoft Trident. /\n TRIDENT: boolean = /(msie\|trident)/i.test(navigator.userAgent);\n\n // EdgeHTML and Trident mock Blink specific things and need to be excluded from this check.\n /* Whether the current rendering engine is Blink. /\n BLINK: boolean =\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n !!((window as any).chrome \|\| hasV8BreakIterator) && typeof CSS !== 'undefined' && !this.EDGE && !this.TRIDENT;\n\n // Webkit is part of the userAgent in EdgeHTML, Blink and Trident. Therefore we need to\n // ensure that Webkit runs standalone and is not used as another engine's base.\n /* Whether the current rendering engine is WebKit. /\n WEBKIT: boolean = /AppleWebKit/i.test(navigator.userAgent) && !this.BLINK && !this.EDGE && !this.TRIDENT;\n\n /* Whether the current platform is Apple iOS. /\n IOS: boolean = /iPad\|iPhone\|iPod/.test(navigator.userAgent) && !('MSStream' in window);\n\n // It's difficult to detect the plain Gecko engine, because most of the browsers identify\n // them self as Gecko-like browsers and modify the userAgent's according to that.\n // Since we only cover one explicit Firefox case, we can simply check for Firefox\n // instead of having an unstable check for Gecko.\n /* Whether the current browser is Firefox. /\n FIREFOX: boolean = /(firefox\|minefield)/i.test(navigator.userAgent);\n\n /* Whether the current platform is Android. /\n // Trident on mobile adds the android platform to the userAgent to trick detections.\n ANDROID: boolean = /android/i.test(navigator.userAgent) && !this.TRIDENT;\n\n // Safari browsers will include the Safari keyword in their userAgent. Some browsers may fake\n // this and just place the Safari keyword in the userAgent. To be more safe about Safari every\n // Safari browser should also use Webkit as its layout engine.\n /* Whether the current browser is Safari. /\n SAFARI: boolean = /safari/i.test(navigator.userAgent) && this.WEBKIT;\n}\n","import log from 'loglevel';\nimport { Platform } from './platform';\n\n// https://github.com/angular/components/blob/master/src/cdk/layout/media-matcher.ts\n\n/* Global registry for all dynamically-created, injected media queries. /\nconst mediaQueriesForWebkitCompatibility: Set<string> = new Set<string>();\n\n/* Style tag that holds all of the dynamically-created media queries. /\nlet mediaQueryStyleNode: HTMLStyleElement \| undefined;\n\n/* A utility for calling matchMedia queries. /\nexport class MediaMatcher {\n private _platform;\n private _matchMedia: (query: string) => MediaQueryList;\n\n constructor() {\n this._platform = new Platform();\n this._matchMedia = window.matchMedia.bind(window);\n }\n\n /\n Evaluates the given media query and returns the native MediaQueryList from which results\n * can be retrieved.\n * Confirms the layout engine will trigger for the selector query provided and returns the\n * MediaQueryList for the query provided.\n /\n matchMedia(query: string): MediaQueryList {\n if (this._platform.WEBKIT \|\| this._platform.BLINK) {\n createEmptyStyleRule(query);\n }\n return this._matchMedia(query);\n }\n}\n\n/\n Creates an empty stylesheet that is used to work around browser inconsistencies related to\n * `matchMedia`. At the time of writing, it handles the following cases:\n * 1. On WebKit browsers, a media query has to have at least one rule in order for `matchMedia`\n * to fire. We work around it by declaring a dummy stylesheet with a `@media` declaration.\n * 2. In some cases Blink browsers will stop firing the `matchMedia` listener if none of the rules\n * inside the `@media` match existing elements on the page. We work around it by having one rule\n * targeting the `body`. See https://github.com/angular/components/issues/23546.\n /\nfunction createEmptyStyleRule(query: string) {\n if (mediaQueriesForWebkitCompatibility.has(query)) {\n return;\n }\n\n try {\n if (!mediaQueryStyleNode) {\n mediaQueryStyleNode = document.createElement('style');\n mediaQueryStyleNode.setAttribute('type', 'text/css');\n document.head.appendChild(mediaQueryStyleNode);\n }\n if (mediaQueryStyleNode.sheet) {\n mediaQueryStyleNode.sheet.insertRule(`@media ${query} {body{ }}`, 0);\n mediaQueriesForWebkitCompatibility.add(query);\n }\n } catch (e) {\n log.error(e);\n }\n}\n","@use 'variables' as ;\n@use 'mixins' as ;\n@use 'sass:map';\n\n$button-sizes: (\n 'xl': 3.5rem,\n 'l': 3rem,\n 'm': 2.5rem,\n 's': 2rem,\n 'xs': 1.5rem\n);\n\n:host {\n display: inline-block;\n max-width: 100%;\n vertical-align: middle;\n @include cat-select(none);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.cat-button {\n position: relative;\n font: inherit;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: cat-border-radius('m');\n text-decoration: none;\n width: 100%;\n box-sizing: border-box;\n cursor: pointer;\n transition:\n color cat-token('time.transition.s') linear,\n border-color cat-token('time.transition.s') linear,\n background-color cat-token('time.transition.s') linear,\n box-shadow cat-token('time.transition.s') linear;\n\n &:focus-visible {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: 1px;\n }\n}\n\n// ----- content\n\n.cat-button-content {\n display: flex;\n flex-direction: column;\n min-width: 0;\n}\n\n.cat-button-content-inner {\n @include cat-break-word;\n\n .cat-button-ellipsed & {\n @include cat-ellipsis;\n }\n}\n\n// ----- disabled\n\n.cat-button-disabled {\n cursor: not-allowed;\n}\n\n// ----- round\n\n.cat-button-round {\n border-radius: 10rem;\n}\n\n// ----- loading\n\n.cat-button-loading {\n cursor: default;\n\n cat-spinner {\n position: absolute;\n }\n\n > :not(cat-spinner) {\n visibility: hidden;\n }\n}\n\n// ----- group button\n\n.cat-group-button {\n &-first {\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n &-middle {\n border-radius: 0;\n }\n\n &-last {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n\n &:hover {\n z-index: 1;\n }\n\n &:focus-visible {\n z-index: 2;\n }\n}\n\n// ----- theme\n\n.cat-button-filled {\n background-color: cat-token-wrap(var(--bg));\n color: cat-token-wrap(var(--fill));\n font-weight: var(--cat-font-weight-button, 600);\n @include cat-font-smooth;\n\n &.cat-button-disabled {\n --bg: #{cat-token('color.ui.background.muted', $wrap: false)};\n --fill: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n}\n\n.cat-button-outlined {\n background-color: cat-token('color.ui.background.surface');\n box-shadow: inset 0 0 0 1px cat-token-wrap(var(--base), $alpha: 0.2);\n color: cat-token-wrap(var(--text));\n\n &.cat-button-disabled {\n --base: #{cat-token('color.ui.font.muted', $wrap: false)};\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n }\n\n &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: cat-token-wrap(var(--base), $alpha: 0.1);\n }\n}\n\n.cat-button-text {\n background-color: transparent;\n color: cat-token-wrap(var(--text));\n text-decoration: cat-token('font.decoration.linkButton');\n\n &.cat-button-disabled {\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: rgba(var(--base), 0.1);\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n background-color: rgba(var(--base), 0.1);\n }\n}\n\n.cat-button-link {\n background-color: transparent;\n color: cat-token-wrap(var(--text));\n\n &.cat-button-disabled {\n --text: #{cat-token('color.ui.font.muted', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration: cat-token('font.decoration.linkHover');\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {\n text-decoration: cat-token('font.decoration.linkHover');\n }\n}\n\n@mixin theme($theme) {\n .cat-button-#{$theme} {\n --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n @if $theme == 'secondary' {\n --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};\n } @else {\n --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};\n }\n\n &:hover:not(.cat-button-disabled):not(.cat-button-loading) {\n --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)};\n }\n\n &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),\n &:active:not(.cat-button-disabled):not(.cat-button-loading) {\n --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)};\n --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};\n --text: #{cat-token('color.theme.#{$theme}.textActive', $wrap: false)};\n }\n }\n}\n\n@include theme('primary');\n@include theme('secondary');\n@include theme('info');\n@include theme('success');\n@include theme('warning');\n@include theme('danger');\n\n// ----- size\n\n@mixin size($size, $fontSize, $padding) {\n $-line-height: cat-body-line-height($fontSize);\n\n $-total-height: map.get($button-sizes, $size);\n $-padding-v: ($-total-height - $-line-height) * 0.5;\n $-padding-h: $padding;\n\n .cat-button-#{$size} {\n min-width: map.get($button-sizes, $size);\n padding: $-padding-v $-padding-h;\n @include cat-body($fontSize, null);\n gap: 0.25rem;\n\n // normalize icon size for line height\n @if $fontSize == 'm' {\n cat-icon {\n margin-top: -0.125rem;\n margin-bottom: -0.125rem;\n }\n }\n\n &.cat-button-icon {\n width: $-total-height;\n height: $-total-height;\n padding: 0;\n }\n }\n\n :host(.cat-button-pull[size='#{$size}']) {\n margin: $-padding-v * -1 $-padding-h * -1;\n }\n\n :host(.cat-button-pull-h[size='#{$size}']) {\n margin-left: $-padding-h * -1;\n margin-right: $-padding-h * -1;\n }\n\n :host(.cat-button-pull-v[size='#{$size}']) {\n margin-top: $-padding-v * -1;\n margin-bottom: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-t[size='#{$size}']) {\n margin-top: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-l[size='#{$size}']) {\n margin-left: $-padding-h * -1;\n }\n\n :host(.cat-button-pull-b[size='#{$size}']) {\n margin-bottom: $-padding-v * -1;\n }\n\n :host(.cat-button-pull-r[size='#{$size}']) {\n margin-right: $-padding-h * -1;\n }\n}\n\n:host(.cat-button-pull:not([size])) {\n margin: -0.625rem -0.75rem;\n}\n\n:host(.cat-button-pull-h:not([size])) {\n margin-left: -0.75rem;\n margin-right: -0.75rem;\n}\n\n:host(.cat-button-pull-v:not([size])) {\n margin-top: -0.625rem;\n margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-t:not([size])) {\n margin-top: -0.625rem;\n}\n\n:host(.cat-button-pull-l:not([size])) {\n margin-left: -0.75rem;\n}\n\n:host(.cat-button-pull-b:not([size])) {\n margin-bottom: -0.625rem;\n}\n\n:host(.cat-button-pull-r:not([size])) {\n margin-right: -0.75rem;\n}\n\n@include size('xs', 's', 0.25rem);\n@include size('s', 'm', 0.5rem);\n@include size('m', 'm', 0.75rem);\n@include size('l', 'm', 1rem);\n@include size('xl', 'l', 1.25rem);\n\n// ----- tabs\n\n:host(.cat-tab) {\n &::part(button) {\n padding: 1.125rem 0.75rem;\n --cat-secondary-bg: transparent;\n --cat-primary-text: transparent;\n --cat-danger-text: transparent;\n }\n\n &::part(content) {\n &::before {\n content: attr(data-text);\n content: attr(data-text) / '';\n height: 0;\n visibility: hidden;\n overflow: hidden;\n user-select: none;\n pointer-events: none;\n font-weight: 700;\n }\n }\n}\n\n// ----- alignment\n\n:host(.cat-text-left) .cat-button {\n justify-content: left;\n}\n\n:host(.cat-text-right) .cat-button {\n justify-content: right;\n}\n\n// ----- navigation\n\n:host(.cat-nav-item) {\n width: 100%;\n\n .cat-button {\n box-shadow: none;\n justify-content: left;\n gap: 0.5rem;\n\n &:focus-visible {\n outline-offset: -2px;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport log from 'loglevel';\nimport { Breakpoint, Breakpoints, isBreakpoint } from '../../utils/breakpoints';\nimport { MediaMatcher } from '../../utils/media-matcher';\n\n/*\n Buttons are used for interface actions. Primary style should be used only\n * once per view for main call-to-action.\n \n @part button - The native anchor or button element.\n * @part content - The textual content of the button.\n * @part prefix - The prefix icon.\n * @part suffix - The suffix icon.\n /\n@Component({\n tag: 'cat-button',\n styleUrl: 'cat-button.scss',\n shadow: true\n})\nexport class CatButton {\n private button!: HTMLButtonElement \| HTMLAnchorElement;\n private mediaMatcher?: MediaMatcher;\n private mediaQueryList?: MediaQueryList;\n private mediaQueryListener?: (event: MediaQueryListEvent) => void;\n\n @State() _iconOnly = true;\n\n /\n The rendering style of the button.\n /\n @Prop() variant: 'filled' \| 'outlined' \| 'text' \| 'link' = 'outlined';\n\n /\n The color palette of the button.\n /\n @Prop() color: 'primary' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger' = 'secondary';\n\n /\n Set the button into an active state.\n /\n @Prop() active = false;\n\n /\n The size of the button.\n /\n @Prop() size: 'xs' \| 's' \| 'm' \| 'l' \| 'xl' = 'm';\n\n /\n The name of the button, which gets paired with the button's value when\n * submitted as part of a form. Corresponds with the native HTML name\n * attribute.\n /\n @Prop() name?: string;\n\n /\n The value of the button, which gets paired with the button's name when\n * submitted as part of a form. Corresponds with the native HTML value\n * attribute.\n /\n @Prop() value?: string;\n\n /\n Specifies that the button should be disabled. A disabled button is unusable\n * and un-clickable. Corresponds with the native HTML disabled attribute.\n /\n @Prop() disabled = false;\n\n /\n Displays the button in a loading state with a spinner. Just like a disabled\n * button, an inactive button is unusable and un-clickable. However, it\n * retains the current focus state.\n /\n @Prop() loading = false;\n\n /\n Allows the button to submit a form.\n /\n @Prop() submit = false;\n\n /\n Disables ellipse overflowing button content.\n /\n @Prop() noEllipsis = false;\n\n /\n Use round button edges.\n /\n @Prop() round = false;\n\n /\n A destination to link to, rendered in the href attribute of a link.\n /\n @Prop() url?: string;\n\n /\n Specifies where to open the linked document.\n /\n @Prop() urlTarget?: '_blank' \| '_self';\n\n /\n The name of an icon to be displayed in the button.\n /\n @Prop() icon?: string;\n\n /\n Hide the actual button content and only display the icon.\n /\n @Prop() iconOnly: boolean \| Breakpoint = false;\n\n /\n Display the icon on the right.\n /\n @Prop() iconRight = false;\n\n /\n Adds a unique identifier for the button. Please note that with this\n * particular component this ID is added inside the web component. If you need\n * an ID on the HTML element, use the regular `id` attribute instead.\n /\n @Prop() buttonId?: string;\n\n /\n Adds accessible label for the button that is only shown for screen\n * readers. Typically, this label text replaces the visible text on the\n * button for users who use assistive technology.\n /\n @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n /\n Sets the `aria-current` attribute on the button.\n /\n @Prop({ attribute: 'a11y-current' }) a11yCurrent?: string;\n\n /\n Attributes that will be added to the native HTML button element\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n Attributes that will be added to the native HTML button content element\n /\n @Prop() nativeContentAttributes?: { [key: string]: string };\n\n /\n The index of a button that is used inside a cat-button-group component\n /\n @Prop() buttonGroupPosition?: 'first' \| 'last' \| 'middle';\n\n @Watch('iconOnly')\n onIconOnlyChanged(value: boolean \| Breakpoint): void {\n // teardown\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n this.mediaQueryList?.removeEventListener('change', this.mediaQueryListener!);\n this.mediaQueryList = undefined;\n this.mediaQueryListener = undefined;\n // setup\n if (isBreakpoint(value)) {\n this.mediaMatcher ??= new MediaMatcher();\n this.mediaQueryList = this.mediaMatcher.matchMedia(Breakpoints[value]);\n this.mediaQueryListener = (event: MediaQueryListEvent) => (this._iconOnly = event.matches);\n this.mediaQueryList.addEventListener('change', this.mediaQueryListener);\n this._iconOnly = this.mediaQueryList.matches;\n } else {\n this._iconOnly = value;\n }\n }\n\n /\n Emitted when the button is clicked.\n /\n @Event() catClick!: EventEmitter<MouseEvent>;\n\n /\n Emitted when the button received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the button loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad(): void {\n this.onIconOnlyChanged(this.iconOnly);\n }\n\n componentWillRender(): void {\n if (this.isIconButton && !this.a11yLabel) {\n log.warn('[A11y] Missing ARIA label on icon button', this);\n }\n }\n\n @Listen('click')\n haltDisabledEvents(event: Event): void {\n if (this.disabled \|\| this.loading) {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n /\n Programmatically move focus to the button. Use this method instead of\n * `button.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.button.focus(options);\n }\n\n /\n Programmatically remove focus from the button. Use this method instead of\n * `button.blur()`.\n /\n @Method()\n async doBlur(): Promise<void> {\n this.button.blur();\n }\n\n /\n Programmatically simulate a click on the button.\n */\n @Method()\n async doClick(): Promise<void> {\n this.button.click();\n }\n\n render() {\n if (this.url) {\n return (\n <a\n {...this.nativeAttributes}\n ref={el => (this.button = el as HTMLAnchorElement)}\n href={this.disabled ? undefined : this.url}\n target={this.urlTarget}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n aria-current={this.a11yCurrent}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-active': this.active,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </a>\n );\n } else {\n return (\n <button\n {...this.nativeAttributes}\n ref={el => (this.button = el as HTMLButtonElement)}\n type={this.submit ? 'submit' : 'button'}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\n aria-disabled={this.disabled ? 'true' : null}\n aria-label={this.a11yLabel}\n aria-current={this.a11yCurrent}\n id={this.buttonId}\n part=\"button\"\n class={{\n 'cat-button': true,\n 'cat-button-active': this.active,\n 'cat-button-icon': this.isIconButton,\n 'cat-button-round': this.round ?? this.isIconButton,\n 'cat-button-loading': this.loading,\n 'cat-button-disabled': this.disabled,\n 'cat-button-ellipsed': !this.noEllipsis && !this.isIconButton,\n [`cat-button-${this.variant}`]: Boolean(this.variant),\n [`cat-button-${this.color}`]: Boolean(this.color),\n [`cat-button-${this.size}`]: Boolean(this.size),\n [`cat-group-button-${this.buttonGroupPosition}`]: Boolean(this.buttonGroupPosition),\n 'cat-group-button': Boolean(this.buttonGroupPosition)\n }}\n onClick={this.onClick.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n >\n {this.content}\n </button>\n );\n }\n }\n\n private get iconSize(): 'xs' \| 's' \| 'm' \| 'l' \| 'xl' {\n switch (this.size) {\n case 'xs':\n return 's';\n default:\n return 'l';\n }\n }\n\n private get spinnerSize(): 'xs' \| 's' \| 'm' \| 'l' \| 'xl' {\n switch (this.size) {\n case 'xs':\n return 'xs';\n default:\n return 'm';\n }\n }\n\n private get isIconButton() {\n return Boolean(this.icon) && this._iconOnly;\n }\n\n private get hasPrefixIcon() {\n return Boolean(this.icon) && !this._iconOnly && !this.iconRight;\n }\n\n private get hasSuffixIcon() {\n return Boolean(this.icon) && !this._iconOnly && this.iconRight;\n }\n\n private get content() {\n return [\n this.hasPrefixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"prefix\"></cat-icon> : null,\n this.isIconButton ? (\n <cat-icon icon={this.icon} size={this.iconSize}></cat-icon>\n ) : (\n <span class=\"cat-button-content\" part=\"content\" {...this.nativeContentAttributes}>\n <span class=\"cat-button-content-inner\">\n <slot></slot>\n </span>\n </span>\n ),\n this.hasSuffixIcon ? <cat-icon icon={this.icon} size={this.iconSize} part=\"suffix\"></cat-icon> : null,\n this.loading ? <cat-spinner size={this.spinnerSize}></cat-spinner> : null\n ];\n }\n\n private onClick(event: MouseEvent) {\n this.catClick.emit(event);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n}\n"],"version":3}

package/dist/components/cat-card.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 const catCardCss = ":host{display:block;border-radius:var(--cat-border-radius-l, 0.5rem);background-color:white;padding:1.25rem}:host([hidden]){display:none}::slotted(:last-child){margin-bottom:0 !important}::slotted(nav),::slotted(nav:last-child){margin:-1rem -1rem !important}::slotted(.cat-card-pull){margin:-1.25rem !important;width:calc(100% + 2.5rem) !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-h){margin-left:-1.25rem !important;margin-right:-1.25rem !important;width:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-v){margin-top:-1.25rem !important;margin-bottom:-1.25rem !important;height:calc(100% + 2.5rem) !important}::slotted(.cat-card-pull-t){margin-top:-1.25rem !important}::slotted(.cat-card-pull-l){margin-left:-1.25rem !important}::slotted(.cat-card-pull-r){margin-right:-1.25rem !important}::slotted(.cat-card-pull-b){margin-bottom:-1.25rem !important}";
+const CatCardStyle0 = catCardCss;
 const CatCard$1 = /*@__PURE__*/ proxyCustomElement(class CatCard extends HTMLElement {
     constructor() {
@@ -9,9 +10,9 @@ const CatCard$1 = /*@__PURE__*/ proxyCustomElement(class CatCard extends HTMLEle
         this.__attachShadow();
     }
     render() {
-        return h("slot", null);
+        return h("slot", { key: '58d43efd186dd1e2ee48363f501298ebb761f3ba' });
     }
-    static get style() { return catCardCss; }
+    static get style() { return CatCardStyle0; }
 }, [1, "cat-card"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/cat-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,23BAA23B;;~~MCWj4BA~~,SAAO;;;;;;IAClB,MAAM;QACJ,OAAO,~~eAAa~~,CAAC;KACtB;;;;;;;;;;;;;;;;;;;;;;","names":["CatCard"],"sources":["src/components/cat-card/cat-card.scss?tag=cat-card&encapsulation=shadow","src/components/cat-card/cat-card.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n\n$-padding: 1.25rem;\n\n:host {\n display: block;\n border-radius: cat-border-radius('l');\n background-color: cat-token('color.ui.background.surface');\n padding: $-padding;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n::slotted(:last-child) {\n margin-bottom: 0 !important;\n}\n\n::slotted(nav),\n::slotted(nav:last-child) {\n margin: #{0.25rem - $-padding} #{0.25rem - $-padding} !important;\n}\n\n// --- pull out helper classes\n\n::slotted(.cat-card-pull) {\n margin: -$-padding !important;\n width: calc(100% + #{2 * $-padding}) !important;\n height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-h) {\n margin-left: -$-padding !important;\n margin-right: -$-padding !important;\n width: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-v) {\n margin-top: -$-padding !important;\n margin-bottom: -$-padding !important;\n height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-t) {\n margin-top: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-l) {\n margin-left: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-r) {\n margin-right: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-b) {\n margin-bottom: -$-padding !important;\n}\n","import { Component, h } from '@stencil/core';\n\n/*\n Cards are surfaces that display content and actions on a single topic. They\n * should be easy to scan for relevant and actionable information.\n */\n@Component({\n tag: 'cat-card',\n styleUrl: 'cat-card.scss',\n shadow: true\n})\nexport class CatCard {\n render() {\n return <slot></slot>;\n }\n}\n"],"version":3}
1	+ {"file":"cat-card.js","mappings":";;AAAA,MAAM,UAAU,GAAG,23BAA23B,CAAC;AAC/4B,sBAAe,UAAU;;MCUZA,SAAO;;;;;;IAClB,MAAM;QACJ,OAAO,8DAAa,CAAC;KACtB;;;;;;;;;;;;;;;;;;;;;;","names":["CatCard"],"sources":["src/components/cat-card/cat-card.scss?tag=cat-card&encapsulation=shadow","src/components/cat-card/cat-card.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n\n$-padding: 1.25rem;\n\n:host {\n display: block;\n border-radius: cat-border-radius('l');\n background-color: cat-token('color.ui.background.surface');\n padding: $-padding;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n::slotted(:last-child) {\n margin-bottom: 0 !important;\n}\n\n::slotted(nav),\n::slotted(nav:last-child) {\n margin: #{0.25rem - $-padding} #{0.25rem - $-padding} !important;\n}\n\n// --- pull out helper classes\n\n::slotted(.cat-card-pull) {\n margin: -$-padding !important;\n width: calc(100% + #{2 * $-padding}) !important;\n height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-h) {\n margin-left: -$-padding !important;\n margin-right: -$-padding !important;\n width: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-v) {\n margin-top: -$-padding !important;\n margin-bottom: -$-padding !important;\n height: calc(100% + #{2 * $-padding}) !important;\n}\n\n::slotted(.cat-card-pull-t) {\n margin-top: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-l) {\n margin-left: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-r) {\n margin-right: -$-padding !important;\n}\n\n::slotted(.cat-card-pull-b) {\n margin-bottom: -$-padding !important;\n}\n","import { Component, h } from '@stencil/core';\n\n/*\n Cards are surfaces that display content and actions on a single topic. They\n * should be easy to scan for relevant and actionable information.\n */\n@Component({\n tag: 'cat-card',\n styleUrl: 'cat-card.scss',\n shadow: true\n})\nexport class CatCard {\n render() {\n return <slot></slot>;\n }\n}\n"],"version":3}

package/dist/components/cat-checkbox2.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { l as loglevel } from './loglevel.js';
+import { l as log } from './loglevel.js';
 import { C as CatFormHint } from './cat-form-hint.js';
 const catCheckboxCss = ".hint-wrapper{flex:0 1 auto;display:flex;gap:0.5rem}.hint-section{flex:1 1 auto;display:flex;flex-direction:column;gap:0.25rem;color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.875rem;line-height:1.125rem}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){margin:0 !important}:host{display:flex;flex-direction:column;gap:0.5rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;font-weight:var(--cat-font-weight-body, 400);-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative}.label-left{flex-direction:row-reverse}.label-left input{right:1px;left:unset}input{position:absolute;width:1.25rem;height:1.25rem;margin:0;opacity:0;cursor:inherit;left:1px;top:0.5px}.box-placeholder{width:calc(1.25rem + 2px);flex-shrink:0}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid rgb(var(--cat-border-color-dark, 215, 219, 224));border-radius:var(--cat-border-radius-s, 0.125rem);transition:background-color 125ms ease, border-color 125ms ease;pointer-events:none}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 125ms ease;width:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 0, 129, 148));border-color:rgb(var(--cat-primary-bg, 0, 129, 148));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .check{stroke-dashoffset:16px}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.is-disabled .box{background-color:#f2f4f7;border-color:rgb(var(--cat-border-color-dark, 215, 219, 224));stroke:rgb(var(--cat-font-color-muted, 81, 92, 108))}:host(.cat-error) .box{border:1px solid rgb(var(--cat-danger-bg, 217, 52, 13))}:host(.cat-error) :checked+.box,:host(.cat-error) :indeterminate+.box{background-color:rgb(var(--cat-danger-bg, 217, 52, 13));border-color:rgb(var(--cat-danger-bg, 217, 52, 13));stroke:rgb(var(--cat-danger-fill, 255, 255, 255))}.label{flex:1 1 auto;min-width:0}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}";
+const CatCheckboxStyle0 = catCheckboxCss;
 let nextUniqueId = 0;
 const CatCheckbox = /*@__PURE__*/ proxyCustomElement(class CatCheckbox extends HTMLElement {
@@ -41,7 +42,7 @@ const CatCheckbox = /*@__PURE__*/ proxyCustomElement(class CatCheckbox extends H
         this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
         this.hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
         if (!this.label && !this.hasSlottedLabel) {
-            loglevel.warn('[A11y] Missing ARIA label on checkbox', this);
+            log.warn('[A11y] Missing ARIA label on checkbox', this);
         }
     }
     /**
@@ -62,7 +63,7 @@ const CatCheckbox = /*@__PURE__*/ proxyCustomElement(class CatCheckbox extends H
         this.input.blur();
     }
     render() {
-        return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { class: "box", "aria-hidden": "true" }, h("svg", { class: "check", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 6 4.5 9 10.5 1" })), h("svg", { class: "dash", viewBox: "0 0 12 10" }, h("polyline", { points: "1.5 5 10.5 5" }))), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hasHint && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "box-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
+        return (h(Host, { key: '4717606c6860aa834b0be517a990e7c9b3d12ca4' }, h("label", { key: 'f10b076bce44f869fac2ba524c9b84a9d35540d4', htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { key: '9c1ce8476f5336e1bda998998233f1576fa04304', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.id, type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, indeterminate: this.indeterminate, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: '54bfdef569a5653d8cf49c8138907e17525f282e', class: "box", "aria-hidden": "true" }, h("svg", { key: 'cdd7a17cbd71c788af281f83f936cae6f8ce7e52', class: "check", viewBox: "0 0 12 10" }, h("polyline", { key: 'ee39ce12ece8d32ad5aca05183ab43b49ca278c7', points: "1.5 6 4.5 9 10.5 1" })), h("svg", { key: '5593c28f8cd548031d6b3823e9491a4bcc8246e3', class: "dash", viewBox: "0 0 12 10" }, h("polyline", { key: '49e30776717be8566e6a135bf791918a93a6f429', points: "1.5 5 10.5 5" }))), h("span", { key: '4461a4d9e42548e5acea1e991b044f7b135f9b67', class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hasHint && (h("div", { class: { 'hint-wrapper': true, 'label-left': this.labelLeft } }, h("div", { class: "box-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
     }
     get hasHint() {
         return !!this.hint || !!this.hasSlottedHint;
@@ -83,7 +84,7 @@ const CatCheckbox = /*@__PURE__*/ proxyCustomElement(class CatCheckbox extends H
         this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;
     }
     get hostElement() { return this; }
-    static get style() { return catCheckboxCss; }
+    static get style() { return CatCheckboxStyle0; }
 }, [1, "cat-checkbox", {
         "checked": [1028],
         "indeterminate": [1028],

package/dist/components/cat-checkbox2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-checkbox2.js","mappings":"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","names":["log"],"sources":["src/components/cat-checkbox/cat-checkbox.scss?tag=cat-checkbox&encapsulation=shadow","src/components/cat-checkbox/cat-checkbox.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$checkbox-width: 1.25rem;\n$checkbox-height: 1.25rem;\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n:host([hidden]) {\n display: none;\n}\n\nlabel {\n flex: 0 1 auto;\n display: flex;\n gap: 0.5rem;\n @include cat-body('m');\n @include cat-select(none);\n cursor: pointer;\n position: relative;\n}\n\n.label-left {\n flex-direction: row-reverse;\n\n input {\n right: 1px;\n left: unset;\n }\n}\n\ninput {\n position: absolute;\n width: $checkbox-width;\n height: $checkbox-height;\n margin: 0;\n opacity: 0;\n cursor: inherit;\n left: 1px;\n top: 0.5px;\n}\n\n.box-placeholder {\n width: calc($checkbox-width + 2px);\n flex-shrink: 0;\n}\n\n.box {\n flex: 0 0 auto;\n display: flex;\n position: relative;\n height: $checkbox-height;\n width: $checkbox-width;\n background-color: cat-token('color.ui.background.input');\n border: 1px solid cat-token('color.ui.border.dark');\n border-radius: cat-border-radius(s);\n transition:\n background-color cat-token('time.transition.s') ease,\n border-color cat-token('time.transition.s') ease;\n pointer-events: none;\n\n svg {\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 16px;\n stroke-dashoffset: 16px;\n transition: all cat-token('time.transition.s') ease;\n width: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.99);\n }\n\n :checked + & {\n background-color: cat-token('color.theme.primary.bg');\n border-color: cat-token('color.theme.primary.bg');\n stroke: cat-token('color.theme.primary.fill');\n\n .check {\n stroke-dashoffset: 0;\n }\n }\n\n :indeterminate + & {\n background-color: cat-token('color.theme.primary.bg');\n border-color: cat-token('color.theme.primary.bg');\n stroke: cat-token('color.theme.primary.fill');\n\n .check {\n stroke-dashoffset: 16px;\n }\n\n .dash {\n stroke-dashoffset: 0;\n }\n }\n\n :focus-visible + & {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: 1px;\n }\n\n .is-disabled & {\n background-color: cat-token('color.ui.background.muted');\n border-color: cat-token('color.ui.border.dark');\n stroke: cat-token('color.ui.font.muted');\n }\n}\n\n:host(.cat-error) {\n .box {\n border: 1px solid cat-token('color.theme.danger.bg');\n }\n\n :checked + .box,\n :indeterminate + .box {\n background-color: cat-token('color.theme.danger.bg');\n border-color: cat-token('color.theme.danger.bg');\n stroke: cat-token('color.theme.danger.fill');\n }\n}\n\n.label {\n flex: 1 1 auto;\n min-width: 0;\n\n .is-hidden & {\n @include cat-visually-hidden;\n }\n}\n\n.is-disabled {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/*\n Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n \n @slot hint - Optional hint element to be displayed with the checkbox.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part input - The native input element.\n /\n@Component({\n tag: 'cat-checkbox',\n styleUrls: ['cat-checkbox.scss'],\n shadow: true\n})\nexport class CatCheckbox {\n private readonly _id = `cat-checkbox-${nextUniqueId++}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n @State() hasSlottedHint = false;\n\n /\n Checked state of the checkbox\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Indeterminate state of the checkbox\n /\n @Prop({ mutable: true }) indeterminate = false;\n\n /\n Disabled state of the checkbox\n /\n @Prop() disabled = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n Label of the checkbox which is presented in the UI\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n The name of the input.\n /\n @Prop() name?: string;\n\n /\n Required state of the checkbox.\n /\n @Prop() required = false;\n\n /\n The value of the checked checkbox.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Prop() value?: any;\n\n /\n The value of the unchecked checkbox.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Prop() noValue?: any;\n\n /\n The resolved value of the checkbox, based on the checked state and value.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Prop({ mutable: true }) resolvedValue: any = null;\n\n /\n Optional hint text(s) to be displayed with the checkbox.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the checkbox.\n /\n @Prop() labelLeft = false;\n\n /\n Attributes that will be added to the native HTML input element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n Emitted when the checked status of the checkbox is changed.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Event() catChange!: EventEmitter<any>;\n\n /\n Emitted when the checkbox received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the checkbox loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad() {\n this.updateResolved();\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on checkbox', this);\n }\n }\n\n /\n Programmatically move focus to the checkbox. Use this method instead of\n * `input.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.input.focus(options);\n }\n\n /\n Programmatically remove focus from the checkbox. Use this method instead of\n * `input.blur()`.\n */\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n render() {\n return (\n <Host>\n <label\n htmlFor={this.id}\n class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n >\n <input\n {...this.nativeAttributes}\n part=\"input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n indeterminate={this.indeterminate}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n />\n <span class=\"box\" aria-hidden=\"true\">\n <svg class=\"check\" viewBox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n </svg>\n <svg class=\"dash\" viewBox=\"0 0 12 10\">\n <polyline points=\"1.5 5 10.5 5\"></polyline>\n </svg>\n </span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n </span>\n </label>\n {this.hasHint && (\n <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n <div class=\"box-placeholder\"></div>\n <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n </div>\n )}\n </Host>\n );\n }\n\n private get hasHint() {\n return !!this.hint \|\| !!this.hasSlottedHint;\n }\n\n private onInput() {\n this.checked = this.input.checked;\n this.indeterminate = this.input.indeterminate;\n this.updateResolved();\n this.catChange.emit(this.resolvedValue);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n\n private updateResolved() {\n this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;\n }\n}\n"],"version":3}
1	+ {"file":"cat-checkbox2.js","mappings":"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","names":[],"sources":["src/components/cat-checkbox/cat-checkbox.scss?tag=cat-checkbox&encapsulation=shadow","src/components/cat-checkbox/cat-checkbox.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n@use 'src/components/cat-form-hint/cat-form-hint';\n\n$checkbox-width: 1.25rem;\n$checkbox-height: 1.25rem;\n\n:host {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n:host([hidden]) {\n display: none;\n}\n\nlabel {\n flex: 0 1 auto;\n display: flex;\n gap: 0.5rem;\n @include cat-body('m');\n @include cat-select(none);\n cursor: pointer;\n position: relative;\n}\n\n.label-left {\n flex-direction: row-reverse;\n\n input {\n right: 1px;\n left: unset;\n }\n}\n\ninput {\n position: absolute;\n width: $checkbox-width;\n height: $checkbox-height;\n margin: 0;\n opacity: 0;\n cursor: inherit;\n left: 1px;\n top: 0.5px;\n}\n\n.box-placeholder {\n width: calc($checkbox-width + 2px);\n flex-shrink: 0;\n}\n\n.box {\n flex: 0 0 auto;\n display: flex;\n position: relative;\n height: $checkbox-height;\n width: $checkbox-width;\n background-color: cat-token('color.ui.background.input');\n border: 1px solid cat-token('color.ui.border.dark');\n border-radius: cat-border-radius(s);\n transition:\n background-color cat-token('time.transition.s') ease,\n border-color cat-token('time.transition.s') ease;\n pointer-events: none;\n\n svg {\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n stroke-dasharray: 16px;\n stroke-dashoffset: 16px;\n transition: all cat-token('time.transition.s') ease;\n width: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) scale(0.99);\n }\n\n :checked + & {\n background-color: cat-token('color.theme.primary.bg');\n border-color: cat-token('color.theme.primary.bg');\n stroke: cat-token('color.theme.primary.fill');\n\n .check {\n stroke-dashoffset: 0;\n }\n }\n\n :indeterminate + & {\n background-color: cat-token('color.theme.primary.bg');\n border-color: cat-token('color.theme.primary.bg');\n stroke: cat-token('color.theme.primary.fill');\n\n .check {\n stroke-dashoffset: 16px;\n }\n\n .dash {\n stroke-dashoffset: 0;\n }\n }\n\n :focus-visible + & {\n outline: 2px solid cat-token('color.ui.border.focus');\n outline-offset: 1px;\n }\n\n .is-disabled & {\n background-color: cat-token('color.ui.background.muted');\n border-color: cat-token('color.ui.border.dark');\n stroke: cat-token('color.ui.font.muted');\n }\n}\n\n:host(.cat-error) {\n .box {\n border: 1px solid cat-token('color.theme.danger.bg');\n }\n\n :checked + .box,\n :indeterminate + .box {\n background-color: cat-token('color.theme.danger.bg');\n border-color: cat-token('color.theme.danger.bg');\n stroke: cat-token('color.theme.danger.fill');\n }\n}\n\n.label {\n flex: 1 1 auto;\n min-width: 0;\n\n .is-hidden & {\n @include cat-visually-hidden;\n }\n}\n\n.is-disabled {\n cursor: not-allowed;\n color: cat-token('color.ui.font.muted');\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport log from 'loglevel';\nimport { CatFormHint } from '../cat-form-hint/cat-form-hint';\n\nlet nextUniqueId = 0;\n\n/*\n Checkboxes are used to let a user choose one or more options from a limited\n * number of options.\n \n @slot hint - Optional hint element to be displayed with the checkbox.\n * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.\n * @part label - The label content.\n * @part input - The native input element.\n /\n@Component({\n tag: 'cat-checkbox',\n styleUrls: ['cat-checkbox.scss'],\n shadow: true\n})\nexport class CatCheckbox {\n private readonly _id = `cat-checkbox-${nextUniqueId++}`;\n private get id() {\n return this.identifier \|\| this._id;\n }\n\n private input!: HTMLInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n @State() hasSlottedHint = false;\n\n /\n Checked state of the checkbox\n /\n @Prop({ mutable: true }) checked = false;\n\n /\n Indeterminate state of the checkbox\n /\n @Prop({ mutable: true }) indeterminate = false;\n\n /\n Disabled state of the checkbox\n /\n @Prop() disabled = false;\n\n /\n A unique identifier for the input.\n /\n @Prop() identifier?: string;\n\n /\n Label of the checkbox which is presented in the UI\n /\n @Prop() label = '';\n\n /\n Visually hide the label, but still show it to assistive technologies like screen readers.\n /\n @Prop() labelHidden = false;\n\n /\n The name of the input.\n /\n @Prop() name?: string;\n\n /\n Required state of the checkbox.\n /\n @Prop() required = false;\n\n /\n The value of the checked checkbox.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Prop() value?: any;\n\n /\n The value of the unchecked checkbox.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Prop() noValue?: any;\n\n /\n The resolved value of the checkbox, based on the checked state and value.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Prop({ mutable: true }) resolvedValue: any = null;\n\n /\n Optional hint text(s) to be displayed with the checkbox.\n /\n @Prop() hint?: string \| string[];\n\n /\n Whether the label should appear to the left of the checkbox.\n /\n @Prop() labelLeft = false;\n\n /\n Attributes that will be added to the native HTML input element.\n /\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /\n Emitted when the checked status of the checkbox is changed.\n /\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n @Event() catChange!: EventEmitter<any>;\n\n /\n Emitted when the checkbox received focus.\n /\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /\n Emitted when the checkbox loses focus.\n /\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad() {\n this.updateResolved();\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n if (!this.label && !this.hasSlottedLabel) {\n log.warn('[A11y] Missing ARIA label on checkbox', this);\n }\n }\n\n /\n Programmatically move focus to the checkbox. Use this method instead of\n * `input.focus()`.\n \n @param options An optional object providing options to control aspects of\n * the focusing process.\n /\n @Method()\n async doFocus(options?: FocusOptions): Promise<void> {\n this.input.focus(options);\n }\n\n /\n Programmatically remove focus from the checkbox. Use this method instead of\n * `input.blur()`.\n */\n @Method()\n async doBlur(): Promise<void> {\n this.input.blur();\n }\n\n render() {\n return (\n <Host>\n <label\n htmlFor={this.id}\n class={{ 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }}\n >\n <input\n {...this.nativeAttributes}\n part=\"input\"\n ref={el => (this.input = el as HTMLInputElement)}\n id={this.id}\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n indeterminate={this.indeterminate}\n onInput={this.onInput.bind(this)}\n onFocus={this.onFocus.bind(this)}\n onBlur={this.onBlur.bind(this)}\n aria-describedby={this.hasHint ? this.id + '-hint' : undefined}\n />\n <span class=\"box\" aria-hidden=\"true\">\n <svg class=\"check\" viewBox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\n </svg>\n <svg class=\"dash\" viewBox=\"0 0 12 10\">\n <polyline points=\"1.5 5 10.5 5\"></polyline>\n </svg>\n </span>\n <span class=\"label\" part=\"label\">\n {(this.hasSlottedLabel && <slot name=\"label\"></slot>) \|\| this.label}\n </span>\n </label>\n {this.hasHint && (\n <div class={{ 'hint-wrapper': true, 'label-left': this.labelLeft }}>\n <div class=\"box-placeholder\"></div>\n <CatFormHint id={this.id} hint={this.hint} slottedHint={this.hasSlottedHint && <slot name=\"hint\"></slot>} />\n </div>\n )}\n </Host>\n );\n }\n\n private get hasHint() {\n return !!this.hint \|\| !!this.hasSlottedHint;\n }\n\n private onInput() {\n this.checked = this.input.checked;\n this.indeterminate = this.input.indeterminate;\n this.updateResolved();\n this.catChange.emit(this.resolvedValue);\n }\n\n private onFocus(event: FocusEvent) {\n this.catFocus.emit(event);\n }\n\n private onBlur(event: FocusEvent) {\n this.catBlur.emit(event);\n }\n\n private updateResolved() {\n this.resolvedValue = this.checked ? this.value ?? true : this.noValue ?? false;\n }\n}\n"],"version":3}

package/dist/components/cat-datepicker-inline.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { f as flatpickr, g as getConfig, a as getLocale, b as getFormat } from '
 import { c as catI18nRegistry } from './cat-i18n-registry.js';
 const catDatepickerInlineCss = "@charset \"UTF-8\";.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);animation:fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{left:0;}.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{right:0;}.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill 0.1s;transition:fill 0.1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:\"\";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:0.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 0.5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 0.5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px);opacity:1}.dayContainer+.dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7, 5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7, 5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:\"\";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0, -20px, 0);transform:translate3d(0, -20px, 0)}to{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}.flatpickr-calendar{font-size:0.875rem;line-height:1.125rem;font-weight:var(--cat-font-weight-body, 400);box-shadow:0 4px 6px -2px rgba(27, 31, 38, 0.03), 0 12px 16px -4px rgba(27, 31, 38, 0.08);border-radius:var(--cat-border-radius-m, 0.25rem);border:1px solid rgb(var(--cat-border-color, 235, 236, 240));background:white;padding:1rem}.flatpickr-calendar:not(.inline).animate{transform:translateY(-1rem);opacity:0;transition:transform 125ms cubic-bezier(0.3, 0, 0.8, 0.15), opacity 125ms cubic-bezier(0.3, 0, 0.8, 0.15)}.flatpickr-calendar::before,.flatpickr-calendar::after{display:none}.flatpickr-calendar.inline,.flatpickr-calendar.open{display:flex;flex-direction:column;gap:1rem;width:auto !important}.flatpickr-calendar.inline{border:unset;padding:0}.flatpickr-calendar.open{z-index:calc(var(--cat-z-index, 1000) + 100);margin-top:0.75rem;margin-left:-0.75rem}.flatpickr-calendar.open.animate{opacity:1;transform:translateY(0);transition:transform 500ms cubic-bezier(0.05, 0.7, 0.1, 1), opacity 500ms cubic-bezier(0.05, 0.7, 0.1, 1)}.flatpickr-months{gap:0.25rem}.flatpickr-months .flatpickr-month{height:auto}.flatpickr-current-month{font-size:1.125rem;line-height:1.5rem;font-weight:var(--cat-font-weight-head, 600);font-feature-settings:\"pnum\";height:100%;padding:0;display:flex;position:static;width:auto;gap:0.25rem}.flatpickr-current-month .flatpickr-monthDropdown-months{padding:0 0.25rem;flex:1;margin:unset;font-weight:inherit;border-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-current-month .flatpickr-monthDropdown-months:hover,.flatpickr-current-month .flatpickr-monthDropdown-months:focus-within{background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.05)}.flatpickr-current-month input.cur-year{padding:0;font-weight:inherit;line-height:2.25rem}.flatpickr-current-month .numInputWrapper{width:7ch}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{position:static;width:2.25rem;height:2.25rem;padding:0;align-items:center;display:flex;justify-content:center;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:rgb(var(--cat-font-color-base, 0, 0, 0))}.flatpickr-weekdays{height:2rem}.flatpickr-weekdays .flatpickr-weekday{color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-size:0.75rem;line-height:1rem;font-weight:700}.flatpickr-weekwrapper .flatpickr-weekday{height:2rem}.flatpickr-weekwrapper .flatpickr-weeks{box-shadow:none;width:2rem;padding:0;margin-right:0.5rem;background:#f2f4f7;border-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{font-size:0.75rem;line-height:1rem;font-weight:700;color:rgb(var(--cat-font-color-muted, 81, 92, 108));text-align:center;line-height:2.25rem}.flatpickr-days{width:15.75rem !important}.dayContainer{width:15.75rem;min-width:15.75rem;max-width:15.75rem}.flatpickr-day{color:rgb(var(--cat-font-color-base, 0, 0, 0));height:2.25rem;line-height:2.25rem;border:0;border-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-day:hover{background-color:#f2f4f7;font-weight:700}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{color:rgb(var(--cat-font-color-muted, 81, 92, 108));font-weight:inherit;background-color:inherit !important}.flatpickr-day.today{color:rgb(var(--cat-primary-text, 0, 129, 148));box-shadow:inset 0 0 0 2px rgb(var(--cat-primary-text, 0, 129, 148))}.flatpickr-day.today:hover,.flatpickr-day.today:focus{background-color:#f2f4f7;color:rgb(var(--cat-primary-text, 0, 129, 148))}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(var(--cat-font-color-muted, 81, 92, 108), 0.5)}.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.selected:focus,.flatpickr-day.selected.inRange,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange,.flatpickr-day.startRange:hover,.flatpickr-day.startRange:focus,.flatpickr-day.startRange.inRange,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange,.flatpickr-day.endRange:hover,.flatpickr-day.endRange:focus,.flatpickr-day.endRange.inRange,.flatpickr-day.endRange.nextMonthDay,.flatpickr-day.endRange.prevMonthDay{font-weight:700;background-color:rgb(var(--cat-primary-bg, 0, 129, 148)) !important;color:rgb(var(--cat-primary-fill, 255, 255, 255)) !important}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.1)}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-top-left-radius:var(--cat-border-radius-m, 0.25rem);border-bottom-left-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-top-right-radius:var(--cat-border-radius-m, 0.25rem);border-bottom-right-radius:var(--cat-border-radius-m, 0.25rem)}.numInputWrapper{padding:0 1rem 0 0.5rem;border-radius:var(--cat-border-radius-m, 0.25rem)}.numInputWrapper:hover,.numInputWrapper:focus-within{background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.05)}.numInputWrapper span{border:none;background:transparent;width:1rem;padding:0;color:rgb(var(--cat-font-color-muted, 81, 92, 108))}.numInputWrapper span.arrowUp::after{content:\"↑\";align-items:flex-end}.numInputWrapper span.arrowDown::after{content:\"↓\";align-items:flex-start}.numInputWrapper span::after{font-size:0.75rem;line-height:1rem;font-weight:700;position:static;border:0 !important;font-size:10px;display:flex;height:100%;justify-content:center}.numInputWrapper span:hover{color:rgb(var(--cat-font-color-base, 0, 0, 0));background:transparent}.flatpickr-calendar.hasTime .flatpickr-time{border:1px solid rgb(var(--cat-border-color, 235, 236, 240));border-radius:var(--cat-border-radius-m, 0.25rem);min-width:12rem;height:auto}.flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper{height:2rem;padding:0;margin:0.25rem;display:flex}.flatpickr-calendar.hasTime.noCalendar{padding:0}.flatpickr-calendar.hasTime.noCalendar .flatpickr-time{border:none}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{margin:0 0.25rem;font-size:1.125rem;line-height:1.5rem;font-weight:400;font-feature-settings:\"pnum\";color:rgb(var(--cat-font-color-base, 0, 0, 0));line-height:2.25rem}.flatpickr-time .flatpickr-am-pm{width:25%;padding:0 0.5rem}.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time .flatpickr-am-pm:focus{border-radius:var(--cat-border-radius-m, 0.25rem);background-color:rgba(var(--cat-primary-bg, 0, 129, 148), 0.05)}.flatpickr-time{max-height:unset}.flatpickr-time input{background:transparent !important;color:rgb(var(--cat-font-color-base, 0, 0, 0));font-size:0.9375rem;line-height:2.25rem;font-family:inherit}.flatpickr-time input.flatpickr-hour{font-weight:inherit}.flatpickr-day.inRange:not(.today),.flatpickr-day.week.selected{box-shadow:none}.flatpickr-day.inRange:nth-child(7n+1),.flatpickr-day.week.selected:nth-child(7n+1){border-top-left-radius:var(--cat-border-radius-m, 0.25rem);border-bottom-left-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-day.inRange:nth-child(7n+7),.flatpickr-day.week.selected:nth-child(7n+7){border-top-right-radius:var(--cat-border-radius-m, 0.25rem);border-bottom-right-radius:var(--cat-border-radius-m, 0.25rem)}.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)){box-shadow:none}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:var(--cat-border-radius-m, 0.25rem)}:host{display:inline-flex}:host>div{display:flex}:host([hidden]){display:none}.datepicker-disabled .flatpickr-days,.datepicker-disabled .flatpickr-time,.datepicker-readonly .flatpickr-days,.datepicker-readonly .flatpickr-time{pointer-events:none}.datepicker-disabled .flatpickr-days{opacity:0.75}.datepicker-disabled .flatpickr-time input,.datepicker-disabled .flatpickr-time .flatpickr-time-separator,.datepicker-disabled .flatpickr-time .flatpickr-am-pm{color:rgb(var(--cat-font-color-muted, 81, 92, 108));opacity:0.75}input{display:none}.flatpickr-calendar{box-shadow:unset;background:unset}";
+const CatDatepickerInlineStyle0 = catDatepickerInlineCss;
 const CatDatepickerInline$1 = /*@__PURE__*/ proxyCustomElement(class CatDatepickerInline extends HTMLElement {
     constructor() {
@@ -41,11 +42,11 @@ const CatDatepickerInline$1 = /*@__PURE__*/ proxyCustomElement(class CatDatepick
         this.pickr = this.initDatepicker(this.input);
     }
     render() {
-        return (h(Host, null, h("div", { tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
+        return (h(Host, { key: '76c2554d2968d81f9610a48498a2cc688d65f596' }, h("div", { key: '029811c7aaec4382d62be054965864556112a017', tabIndex: this.disabled || this.readonly ? -1 : undefined, class: {
                 'datepicker-wrapper': true,
                 'datepicker-disabled': this.disabled,
                 'datepicker-readonly': this.readonly
-            } }, h("input", { ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
+            } }, h("input", { key: '2f4ccdf0392adcb7d231639d078b12eba82cd477', ref: el => (this.input = el), value: this.value, disabled: this.disabled, readonly: this.readonly }))));
     }
     initDatepicker(input) {
         if (!input) {
@@ -72,7 +73,7 @@ const CatDatepickerInline$1 = /*@__PURE__*/ proxyCustomElement(class CatDatepick
         "disabled": ["onDisabledChanged"],
         "readonly": ["onDisabledChanged"]
     }; }
-    static get style() { return catDatepickerInlineCss; }
+    static get style() { return CatDatepickerInlineStyle0; }
 }, [1, "cat-datepicker-inline", {
         "disabled": [4],
         "max": [1],

package/dist/components/cat-datepicker-inline.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"cat-datepicker-inline.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,o5wBAAo5wB;;~~MCat6wBA~~,qBAAmB;;;;;;wBAOX,KAAK;;;oBAeU,MAAM;wBAKrB,KAAK;oBAKT,CAAC;;;;IAkBhB,cAAc,CAAC,KAAa;QAC1B,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;YAClC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC5B;aAAM;YACL,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;YACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SAChC;KACF;IAID,iBAAiB;;;;QAIf,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC;QACtB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;QACvB,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;KAClE;IAED,gBAAgB;QACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC9C;IAED,MAAM;QACJ,QACE,EAAC,IAAI,~~QACH~~,~~WACE~~,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,SAAS,EACzD,KAAK,EAAE;gBACL,oBAAoB,EAAE,IAAI;gBAC1B,qBAAqB,EAAE,IAAI,CAAC,QAAQ;gBACpC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;aACrC,IAED,~~aACE~~,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAChB,CACL,CACD,EACP;KACH;IAEO,cAAc,CAAC,KAAwB;QAC7C,IAAI,CAAC,KAAK,EAAE;YACV,OAAO;SACR;QAED,OAAO,SAAS,CACd,KAAK,EACL,SAAS,CACP;YACE,MAAM,EAAE,SAAS,CAACC,eAAI,CAAC,SAAS,EAAE,CAAC;YACnC,MAAM,EAAE,SAAS,CAACA,eAAI,CAAC,SAAS,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC;YAC9C,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,IAAI,EAAE;YACzD,WAAW,EAAE,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SAC3C,EACD;YACE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC;YACxC,MAAM,EAAE,IAAI;SACb,CACF,CACF,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatDatepickerInline","i18n"],"sources":["src/components/cat-datepicker-inline/cat-datepicker-inline.scss?tag=cat-datepicker-inline&encapsulation=shadow","src/components/cat-datepicker-inline/cat-datepicker-inline.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n\n@import '~flatpickr/dist/flatpickr.css';\n@import '../styles/vendor/flatpickr';\n\n:host {\n display: inline-flex;\n\n > div {\n display: flex;\n }\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.datepicker-disabled,\n.datepicker-readonly {\n .flatpickr-days,\n .flatpickr-time {\n pointer-events: none;\n }\n}\n\n.datepicker-disabled {\n .flatpickr-days {\n opacity: 0.75;\n }\n\n .flatpickr-time {\n input,\n .flatpickr-time-separator,\n .flatpickr-am-pm {\n color: cat-token('color.ui.font.muted');\n opacity: 0.75;\n }\n }\n}\n\ninput {\n display: none;\n}\n\n.flatpickr-calendar {\n box-shadow: unset;\n background: unset;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport flatpickr from 'flatpickr';\nimport { getConfig } from '../cat-datepicker/cat-datepicker.config';\nimport { getFormat } from '../cat-datepicker/cat-datepicker.format';\nimport { getLocale } from '../cat-datepicker/cat-datepicker.locale';\nimport { CatDatepickerMode } from '../cat-datepicker/cat-datepicker.mode';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n@Component({\n tag: 'cat-datepicker-inline',\n styleUrl: 'cat-datepicker-inline.scss',\n shadow: true\n})\nexport class CatDatepickerInline {\n private pickr?: flatpickr.Instance;\n private input?: HTMLInputElement;\n\n /*\n Whether the input is disabled.\n /\n @Prop() disabled = false;\n\n /\n A maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n /\n @Prop() max?: string;\n\n /\n A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n /\n @Prop() min?: string;\n\n /\n The mode of the datepicker, to select a date, time, both, a date range or a week number.\n /\n @Prop() mode: CatDatepickerMode = 'date';\n\n /\n The value is not editable.\n /\n @Prop() readonly = false;\n\n /\n The step size to use when changing the time.\n /\n @Prop() step = 5;\n\n /\n The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.\n /\n @Prop({ mutable: true }) value?: string;\n\n /\n Attributes that will be added to the rendered HTML datepicker element.\n /\n @Prop() nativePickerAttributes?: { [key: string]: string };\n\n /\n Emitted when the value is changed.\n */\n @Event() catChange!: EventEmitter<string>;\n\n @Watch('value')\n onValueChanged(value: string) {\n if (value) {\n this.pickr?.setDate(value, false);\n this.catChange.emit(value);\n } else {\n this.pickr?.clear(false);\n this.catChange.emit(undefined);\n }\n }\n\n @Watch('disabled')\n @Watch('readonly')\n onDisabledChanged() {\n // Dynamically unsetting 'enabled' value to undefined is not working due to\n // a bug in the library. We thus need to fully recreate the date picker\n // after the value has been updated.\n this.pickr?.destroy();\n this.pickr = undefined;\n setTimeout(() => (this.pickr = this.initDatepicker(this.input)));\n }\n\n componentDidLoad() {\n this.pickr = this.initDatepicker(this.input);\n }\n\n render() {\n return (\n <Host>\n <div\n tabIndex={this.disabled \|\| this.readonly ? -1 : undefined}\n class={{\n 'datepicker-wrapper': true,\n 'datepicker-disabled': this.disabled,\n 'datepicker-readonly': this.readonly\n }}\n >\n <input\n ref={el => (this.input = el)}\n value={this.value}\n disabled={this.disabled}\n readonly={this.readonly}\n ></input>\n </div>\n </Host>\n );\n }\n\n private initDatepicker(input?: HTMLInputElement): flatpickr.Instance \| undefined {\n if (!input) {\n return;\n }\n\n return flatpickr(\n input,\n getConfig(\n {\n locale: getLocale(i18n.getLocale()),\n format: getFormat(i18n.getLocale(), this.mode),\n mode: this.mode,\n min: this.min,\n max: this.max,\n step: this.step,\n disabled: this.disabled,\n readonly: this.readonly,\n nativePickerAttributes: this.nativePickerAttributes ?? {},\n applyChange: value => (this.value = value)\n },\n {\n ...(this.disabled ? { enable: [] } : {}),\n inline: true\n }\n )\n );\n }\n}\n"],"version":3}
1	+ {"file":"cat-datepicker-inline.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,o5wBAAo5wB,CAAC;AACp7wB,kCAAe,sBAAsB;;MCYxBA,qBAAmB;;;;;;wBAOX,KAAK;;;oBAeU,MAAM;wBAKrB,KAAK;oBAKT,CAAC;;;;IAkBhB,cAAc,CAAC,KAAa;QAC1B,IAAI,KAAK,EAAE;YACT,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;YAClC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC5B;aAAM;YACL,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;YACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SAChC;KACF;IAID,iBAAiB;;;;QAIf,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC;QACtB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;QACvB,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;KAClE;IAED,gBAAgB;QACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC9C;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,SAAS,EACzD,KAAK,EAAE;gBACL,oBAAoB,EAAE,IAAI;gBAC1B,qBAAqB,EAAE,IAAI,CAAC,QAAQ;gBACpC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;aACrC,IAED,8DACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAChB,CACL,CACD,EACP;KACH;IAEO,cAAc,CAAC,KAAwB;QAC7C,IAAI,CAAC,KAAK,EAAE;YACV,OAAO;SACR;QAED,OAAO,SAAS,CACd,KAAK,EACL,SAAS,CACP;YACE,MAAM,EAAE,SAAS,CAACC,eAAI,CAAC,SAAS,EAAE,CAAC;YACnC,MAAM,EAAE,SAAS,CAACA,eAAI,CAAC,SAAS,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC;YAC9C,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,GAAG,EAAE,IAAI,CAAC,GAAG;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,sBAAsB,EAAE,IAAI,CAAC,sBAAsB,IAAI,EAAE;YACzD,WAAW,EAAE,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;SAC3C,EACD;YACE,IAAI,IAAI,CAAC,QAAQ,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC;YACxC,MAAM,EAAE,IAAI;SACb,CACF,CACF,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CatDatepickerInline","i18n"],"sources":["src/components/cat-datepicker-inline/cat-datepicker-inline.scss?tag=cat-datepicker-inline&encapsulation=shadow","src/components/cat-datepicker-inline/cat-datepicker-inline.tsx"],"sourcesContent":["@use 'variables' as ;\n@use 'mixins' as ;\n\n@import '~flatpickr/dist/flatpickr.css';\n@import '../styles/vendor/flatpickr';\n\n:host {\n display: inline-flex;\n\n > div {\n display: flex;\n }\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.datepicker-disabled,\n.datepicker-readonly {\n .flatpickr-days,\n .flatpickr-time {\n pointer-events: none;\n }\n}\n\n.datepicker-disabled {\n .flatpickr-days {\n opacity: 0.75;\n }\n\n .flatpickr-time {\n input,\n .flatpickr-time-separator,\n .flatpickr-am-pm {\n color: cat-token('color.ui.font.muted');\n opacity: 0.75;\n }\n }\n}\n\ninput {\n display: none;\n}\n\n.flatpickr-calendar {\n box-shadow: unset;\n background: unset;\n}\n","import { Component, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport flatpickr from 'flatpickr';\nimport { getConfig } from '../cat-datepicker/cat-datepicker.config';\nimport { getFormat } from '../cat-datepicker/cat-datepicker.format';\nimport { getLocale } from '../cat-datepicker/cat-datepicker.locale';\nimport { CatDatepickerMode } from '../cat-datepicker/cat-datepicker.mode';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n@Component({\n tag: 'cat-datepicker-inline',\n styleUrl: 'cat-datepicker-inline.scss',\n shadow: true\n})\nexport class CatDatepickerInline {\n private pickr?: flatpickr.Instance;\n private input?: HTMLInputElement;\n\n /*\n Whether the input is disabled.\n /\n @Prop() disabled = false;\n\n /\n A maximum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n /\n @Prop() max?: string;\n\n /\n A minimum value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z.\n /\n @Prop() min?: string;\n\n /\n The mode of the datepicker, to select a date, time, both, a date range or a week number.\n /\n @Prop() mode: CatDatepickerMode = 'date';\n\n /\n The value is not editable.\n /\n @Prop() readonly = false;\n\n /\n The step size to use when changing the time.\n /\n @Prop() step = 5;\n\n /\n The value as ISO Date string, e.g. 2017-03-04T01:23:43.000Z or as a week number string.\n /\n @Prop({ mutable: true }) value?: string;\n\n /\n Attributes that will be added to the rendered HTML datepicker element.\n /\n @Prop() nativePickerAttributes?: { [key: string]: string };\n\n /\n Emitted when the value is changed.\n */\n @Event() catChange!: EventEmitter<string>;\n\n @Watch('value')\n onValueChanged(value: string) {\n if (value) {\n this.pickr?.setDate(value, false);\n this.catChange.emit(value);\n } else {\n this.pickr?.clear(false);\n this.catChange.emit(undefined);\n }\n }\n\n @Watch('disabled')\n @Watch('readonly')\n onDisabledChanged() {\n // Dynamically unsetting 'enabled' value to undefined is not working due to\n // a bug in the library. We thus need to fully recreate the date picker\n // after the value has been updated.\n this.pickr?.destroy();\n this.pickr = undefined;\n setTimeout(() => (this.pickr = this.initDatepicker(this.input)));\n }\n\n componentDidLoad() {\n this.pickr = this.initDatepicker(this.input);\n }\n\n render() {\n return (\n <Host>\n <div\n tabIndex={this.disabled \|\| this.readonly ? -1 : undefined}\n class={{\n 'datepicker-wrapper': true,\n 'datepicker-disabled': this.disabled,\n 'datepicker-readonly': this.readonly\n }}\n >\n <input\n ref={el => (this.input = el)}\n value={this.value}\n disabled={this.disabled}\n readonly={this.readonly}\n ></input>\n </div>\n </Host>\n );\n }\n\n private initDatepicker(input?: HTMLInputElement): flatpickr.Instance \| undefined {\n if (!input) {\n return;\n }\n\n return flatpickr(\n input,\n getConfig(\n {\n locale: getLocale(i18n.getLocale()),\n format: getFormat(i18n.getLocale(), this.mode),\n mode: this.mode,\n min: this.min,\n max: this.max,\n step: this.step,\n disabled: this.disabled,\n readonly: this.readonly,\n nativePickerAttributes: this.nativePickerAttributes ?? {},\n applyChange: value => (this.value = value)\n },\n {\n ...(this.disabled ? { enable: [] } : {}),\n inline: true\n }\n )\n );\n }\n}\n"],"version":3}