@haiilo/catalyst 0.8.6 → 0.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/catalyst/catalyst.css +1 -1
- package/dist/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/catalyst.esm.js.map +1 -1
- package/dist/catalyst/index.esm.js +1 -1
- package/dist/catalyst/{p-6a8a4dc0.js → p-8121572a.js} +3 -3
- package/dist/catalyst/p-8121572a.js.map +1 -0
- package/dist/catalyst/{p-74fbe829.entry.js → p-b58ac55c.entry.js} +5 -5
- package/dist/catalyst/p-b58ac55c.entry.js.map +1 -0
- package/dist/catalyst/scss/_variables.scss +1 -0
- package/dist/catalyst/scss/core/_typography.scss +7 -7
- package/dist/catalyst/scss/index.scss +1 -5
- package/dist/cjs/{cat-alert_20.cjs.entry.js → cat-alert_21.cjs.entry.js} +153 -26
- package/dist/cjs/cat-alert_21.cjs.entry.js.map +1 -0
- package/dist/cjs/{cat-notification-fe237312.js → cat-notification-c2859ed7.js} +121 -1
- package/dist/cjs/cat-notification-c2859ed7.js.map +1 -0
- package/dist/cjs/catalyst.cjs.js +1 -5
- package/dist/cjs/catalyst.cjs.js.map +1 -1
- package/dist/cjs/index.cjs.js +3 -4
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -5
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/collection/collection-manifest.json +2 -2
- package/dist/collection/components/cat-button/cat-button.css +2 -1
- package/dist/collection/components/cat-card/cat-card.css +34 -0
- package/dist/collection/components/cat-checkbox/cat-checkbox.css +4 -0
- package/dist/collection/components/cat-checkbox/cat-checkbox.js +23 -1
- package/dist/collection/components/cat-checkbox/cat-checkbox.js.map +1 -1
- package/dist/collection/components/cat-i18n/cat-i18n-registry.js +3 -2
- package/dist/collection/components/cat-i18n/cat-i18n-registry.js.map +1 -1
- package/dist/collection/components/cat-radio/cat-radio.css +7 -0
- package/dist/collection/components/cat-radio/cat-radio.js +25 -2
- package/dist/collection/components/cat-radio/cat-radio.js.map +1 -1
- package/dist/collection/components/cat-radio-group/cat-radio-group.css +12 -0
- package/dist/collection/components/cat-radio-group/cat-radio-group.js +179 -0
- package/dist/collection/components/cat-radio-group/cat-radio-group.js.map +1 -0
- package/dist/collection/components/cat-select/cat-select.js +57 -10
- package/dist/collection/components/cat-select/cat-select.js.map +1 -1
- package/dist/collection/components/cat-toggle/cat-toggle.css +4 -0
- package/dist/collection/components/cat-toggle/cat-toggle.js +25 -3
- package/dist/collection/components/cat-toggle/cat-toggle.js.map +1 -1
- package/dist/collection/index.js.map +1 -1
- package/dist/collection/scss/_variables.scss +1 -0
- package/dist/collection/scss/core/_typography.scss +7 -7
- package/dist/collection/scss/index.scss +1 -5
- package/dist/components/cat-button2.js +1 -1
- package/dist/components/cat-button2.js.map +1 -1
- package/dist/components/cat-card.js +1 -1
- package/dist/components/cat-card.js.map +1 -1
- package/dist/components/cat-checkbox.js +7 -2
- package/dist/components/cat-checkbox.js.map +1 -1
- package/dist/components/cat-i18n-registry.js +3 -2
- package/dist/components/cat-i18n-registry.js.map +1 -1
- package/dist/components/cat-radio-group.d.ts +11 -0
- package/dist/components/cat-radio-group.js +111 -0
- package/dist/components/cat-radio-group.js.map +1 -0
- package/dist/components/cat-radio.js +9 -3
- package/dist/components/cat-radio.js.map +1 -1
- package/dist/components/cat-select.js +42 -11
- package/dist/components/cat-select.js.map +1 -1
- package/dist/components/cat-toggle.js +8 -3
- package/dist/components/cat-toggle.js.map +1 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +1 -253
- package/dist/components/index.js.map +1 -1
- package/dist/esm/{cat-alert_20.entry.js → cat-alert_21.entry.js} +150 -24
- package/dist/esm/cat-alert_21.entry.js.map +1 -0
- package/dist/esm/{cat-notification-a9655c00.js → cat-notification-3da6ddb1.js} +121 -3
- package/dist/esm/cat-notification-3da6ddb1.js.map +1 -0
- package/dist/esm/catalyst.js +1 -5
- package/dist/esm/catalyst.js.map +1 -1
- package/dist/esm/index.js +1 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +1 -5
- package/dist/esm/loader.js.map +1 -1
- package/dist/types/components/cat-checkbox/cat-checkbox.d.ts +4 -0
- package/dist/types/components/cat-radio/cat-radio.d.ts +4 -0
- package/dist/types/components/cat-radio-group/cat-radio-group.d.ts +29 -0
- package/dist/types/components/cat-select/cat-select.d.ts +7 -0
- package/dist/types/components/cat-toggle/cat-toggle.d.ts +5 -1
- package/dist/types/components.d.ts +75 -2
- package/dist/types/index.d.ts +1 -0
- package/package.json +2 -2
- package/dist/catalyst/p-6a8a4dc0.js.map +0 -1
- package/dist/catalyst/p-74fbe829.entry.js.map +0 -1
- package/dist/catalyst/p-decdc6f1.js +0 -2
- package/dist/catalyst/p-decdc6f1.js.map +0 -1
- package/dist/catalyst/p-f45bcfd6.js +0 -2
- package/dist/catalyst/p-f45bcfd6.js.map +0 -1
- package/dist/cjs/app-globals-79765026.js +0 -256
- package/dist/cjs/app-globals-79765026.js.map +0 -1
- package/dist/cjs/cat-alert_20.cjs.entry.js.map +0 -1
- package/dist/cjs/cat-icon-registry-b015a65f.js +0 -125
- package/dist/cjs/cat-icon-registry-b015a65f.js.map +0 -1
- package/dist/cjs/cat-notification-fe237312.js.map +0 -1
- package/dist/collection/init.js +0 -17
- package/dist/collection/init.js.map +0 -1
- package/dist/esm/app-globals-7d163b94.js +0 -254
- package/dist/esm/app-globals-7d163b94.js.map +0 -1
- package/dist/esm/cat-alert_20.entry.js.map +0 -1
- package/dist/esm/cat-icon-registry-dc1ef79a.js +0 -122
- package/dist/esm/cat-icon-registry-dc1ef79a.js.map +0 -1
- package/dist/esm/cat-notification-a9655c00.js.map +0 -1
- package/dist/types/init.d.ts +0 -1
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-41ceb7da.js';
|
|
2
2
|
import { l as loglevel, c as createCommonjsModule, g as getDefaultExportFromCjs } from './loglevel-c8b59c3a.js';
|
|
3
3
|
import { C as CatFormHint } from './cat-form-hint-790d1e46.js';
|
|
4
|
-
import {
|
|
5
|
-
import { N as NotificationsService } from './cat-notification-a9655c00.js';
|
|
4
|
+
import { a as CatIconRegistry, C as CatI18nRegistry, N as NotificationsService } from './cat-notification-3da6ddb1.js';
|
|
6
5
|
|
|
7
6
|
const catAlertCss = ":host{display:block;margin-bottom:1rem}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}:host([hidden]){display:none}.alert{font:inherit;color:rgb(var(--text));background-color:rgba(var(--bg), 0.1);box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);border-radius:0.25rem;padding:0.75rem 1rem}::slotted(:last-child){margin-bottom:0 !important}.alert-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--text:var(--cat-primary-text, 32, 127, 138);--border:var(--cat-primary-text, 32, 127, 138)}.alert-secondary{--bg:105, 118, 135;--text:0, 0, 0;--border:105, 118, 135}.alert-success{--bg:0, 132, 88;--text:0, 132, 88;--border:0, 132, 88}.alert-warning{--bg:255, 206, 128;--text:159, 97, 0;--border:159, 97, 0}.alert-danger{--bg:217, 52, 13;--text:217, 52, 13;--border:217, 52, 13}";
|
|
8
7
|
|
|
@@ -271,7 +270,7 @@ function createEmptyStyleRule(query) {
|
|
|
271
270
|
}
|
|
272
271
|
}
|
|
273
272
|
|
|
274
|
-
const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:0.25rem;text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:0.65;filter:grayscale(100%)}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:none}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:
|
|
273
|
+
const catButtonCss = ":host{display:inline-block;max-width:100%;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.cat-button{position:relative;font:inherit;display:flex;align-items:center;justify-content:center;border:none;border-radius:0.25rem;text-decoration:none;width:100%;box-sizing:border-box;cursor:pointer;transition:color 0.13s linear, border-color 0.13s linear, background-color 0.13s linear, box-shadow 0.13s linear}.cat-button:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.cat-button-ellipsed .cat-button-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.cat-button-disabled{cursor:not-allowed;opacity:0.65;filter:grayscale(100%)}.cat-button-round{border-radius:10rem}.cat-button-loading{cursor:default}.cat-button-loading cat-spinner{position:absolute}.cat-button-loading>*:not(cat-spinner){visibility:hidden}.cat-button-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.cat-button-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--base), 0.2);color:rgb(var(--text))}.cat-button-outlined:hover:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.05)}.cat-button-outlined:active:not(.cat-button-disabled):not(.cat-button-loading){background-color:rgba(var(--base), 0.1)}.cat-button-text{background-color:transparent;color:rgb(var(--text));text-decoration:none}.cat-button-text:hover:not(.cat-button-disabled):not(.cat-button-loading){text-decoration:none;background-color:rgba(var(--base), 0.05)}.cat-button-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--base:var(--cat-primary-text, 32, 127, 138)}.cat-button-primary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-hover, 28, 112, 122);--fill:var(--cat-primary-fill-hover, 255, 255, 255);--text:var(--cat-primary-text-hover, 28, 112, 122)}.cat-button-primary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:var(--cat-primary-bg-active, 25, 101, 110);--fill:var(--cat-primary-fill-active, 255, 255, 255);--text:var(--cat-primary-text-active, 25, 101, 110)}.cat-button-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--base:105, 118, 135}.cat-button-secondary:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-secondary:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0}.cat-button-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--base:0, 132, 88}.cat-button-success:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 117, 78;--fill:255, 255, 255;--text:0, 117, 78}.cat-button-success:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:0, 105, 70;--fill:255, 255, 255;--text:0, 105, 70}.cat-button-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--base:159, 97, 0}.cat-button-warning:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 214, 148;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-warning:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:255, 222, 168;--fill:0, 0, 0;--text:159, 97, 0}.cat-button-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--base:217, 52, 13}.cat-button-danger:hover:not(.cat-button-disabled):not(.cat-button-loading){--bg:194, 46, 11;--fill:255, 255, 255;--text:194, 46, 11}.cat-button-danger:active:not(.cat-button-disabled):not(.cat-button-loading){--bg:174, 42, 10;--fill:255, 255, 255;--text:174, 42, 10}.cat-button-xs{min-width:1.5rem;padding:0.25rem 0.25rem;font-size:0.875rem;line-height:1rem}.cat-button-xs .cat-button-prefix{margin-right:0.25rem}.cat-button-xs .cat-button-suffix{margin-left:0.25rem}.cat-button-xs.cat-button-icon{width:1.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xs{padding-left:1rem;padding-right:1rem}.cat-button-s{min-width:2rem;padding:0.375rem 0.5rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-s .cat-button-prefix{margin-right:0.25rem}.cat-button-s .cat-button-suffix{margin-left:0.25rem}.cat-button-s cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-s.cat-button-icon{width:2rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-s{padding-left:1rem;padding-right:1rem}.cat-button-m{min-width:2.5rem;padding:0.625rem 0.75rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-m .cat-button-prefix{margin-right:0.25rem}.cat-button-m .cat-button-suffix{margin-left:0.25rem}.cat-button-m cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-m.cat-button-icon{width:2.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-m{padding-left:1rem;padding-right:1rem}.cat-button-l{min-width:3rem;padding:0.875rem 1rem;font-size:0.9375rem;line-height:1.25rem}.cat-button-l .cat-button-prefix{margin-right:0.25rem}.cat-button-l .cat-button-suffix{margin-left:0.25rem}.cat-button-l cat-icon{margin-top:-0.125rem;margin-bottom:-0.125rem}.cat-button-l.cat-button-icon{width:3rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-l{padding-left:1rem;padding-right:1rem}.cat-button-xl{min-width:3.5rem;padding:1rem 1.25rem;font-size:1.125rem;line-height:1.5rem}.cat-button-xl .cat-button-prefix{margin-right:0.25rem}.cat-button-xl .cat-button-suffix{margin-left:0.25rem}.cat-button-xl.cat-button-icon{width:3.5rem;padding-left:0;padding-right:0}:host-context(nav) .cat-button-xl{padding-left:1rem;padding-right:1rem}.cat-button-active::before{content:\"\";display:block;position:absolute;top:0;left:0;width:0.25rem;height:100%;background:rgb(var(--base))}:host-context(nav){width:100%}:host-context(nav) .cat-button{box-shadow:none;border-radius:0;justify-content:left}:host-context(nav) .cat-button:focus-visible{outline-offset:-2px}:host(.cat-text-left) .cat-button{justify-content:left}:host(.cat-text-right) .cat-button{justify-content:right}";
|
|
275
274
|
|
|
276
275
|
const CatButton = class {
|
|
277
276
|
constructor(hostRef) {
|
|
@@ -448,7 +447,7 @@ const CatButton = class {
|
|
|
448
447
|
};
|
|
449
448
|
CatButton.style = catButtonCss;
|
|
450
449
|
|
|
451
|
-
const catCardCss = ":host{display:block;margin-bottom:1rem;border-radius:0.5rem;background-color:white;padding:1.5rem}:host([hidden]){display:none}::slotted(nav){margin:-1rem -1.5rem !important}::slotted(:last-child){margin-bottom:0}";
|
|
450
|
+
const catCardCss = ":host{display:block;margin-bottom:1rem;border-radius:0.5rem;background-color:white;padding:1.5rem}:host([hidden]){display:none}::slotted(nav){margin:-1rem -1.5rem !important}::slotted(:last-child){margin-bottom:0}::slotted(.cat-card-pull){margin:-1.5rem !important;width:calc(100% + 3rem) !important;height:calc(100% + 3rem) !important}::slotted(.cat-card-pull-h){margin-left:-1.5rem !important;margin-right:-1.5rem !important;width:calc(100% + 3rem) !important}::slotted(.cat-card-pull-v){margin-top:-1.5rem !important;margin-bottom:-1.5rem !important;height:calc(100% + 3rem) !important}::slotted(.cat-card-pull-t){margin-top:-1.5rem !important}::slotted(.cat-card-pull-l){margin-left:-1.5rem !important}::slotted(.cat-card-pull-r){margin-right:-1.5rem !important}::slotted(.cat-card-pull-b){margin-bottom:-1.5rem !important}";
|
|
452
451
|
|
|
453
452
|
const CatCard = class {
|
|
454
453
|
constructor(hostRef) {
|
|
@@ -460,7 +459,7 @@ const CatCard = class {
|
|
|
460
459
|
};
|
|
461
460
|
CatCard.style = catCardCss;
|
|
462
461
|
|
|
463
|
-
const catCheckboxCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}input{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}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid #d7dbe0;border-radius:0.125rem;transition:background-color 0.13s ease, border-color 0.13s ease}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:70%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
|
|
462
|
+
const catCheckboxCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.label-left{flex-direction:row-reverse}input{position:absolute !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}.box{flex:0 0 auto;display:flex;position:relative;height:1.25rem;width:1.25rem;background-color:white;border:1px solid #d7dbe0;border-radius:0.125rem;transition:background-color 0.13s ease, border-color 0.13s ease}.box svg{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all 0.13s ease;width:70%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.99)}:checked+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:checked+.box .check{stroke-dashoffset:0}:indeterminate+.box{background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-color:rgb(var(--cat-primary-bg, 32, 127, 138));stroke:rgb(var(--cat-primary-fill, 255, 255, 255))}:indeterminate+.box .dash{stroke-dashoffset:0}:focus-visible+.box{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
|
|
464
463
|
|
|
465
464
|
let nextUniqueId$7 = 0;
|
|
466
465
|
const CatCheckbox = class {
|
|
@@ -495,6 +494,10 @@ const CatCheckbox = class {
|
|
|
495
494
|
* Required state of the checkbox
|
|
496
495
|
*/
|
|
497
496
|
this.required = false;
|
|
497
|
+
/**
|
|
498
|
+
* Whether the label should appear to the left of the checkbox.
|
|
499
|
+
*/
|
|
500
|
+
this.labelLeft = false;
|
|
498
501
|
}
|
|
499
502
|
componentDidLoad() {
|
|
500
503
|
if (this.input && this.indeterminate) {
|
|
@@ -517,7 +520,7 @@ const CatCheckbox = class {
|
|
|
517
520
|
this.input.focus(options);
|
|
518
521
|
}
|
|
519
522
|
render() {
|
|
520
|
-
return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, h("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, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, 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.hintSection));
|
|
523
|
+
return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("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, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "box", "aria-hidden": "true", part: "checkbox" }, 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.hintSection));
|
|
521
524
|
}
|
|
522
525
|
get hintSection() {
|
|
523
526
|
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
@@ -3062,7 +3065,7 @@ const CatModal = class {
|
|
|
3062
3065
|
};
|
|
3063
3066
|
CatModal.style = catModalCss;
|
|
3064
3067
|
|
|
3065
|
-
const catRadioCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;cursor:pointer}.radio{display:flex;position:relative}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid #d7dbe0;border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.is-disabled input{background-color:#f8f8fb}.is-disabled input:checked{border-color:#d7dbe0}.is-disabled .circle{background-color:#d7dbe0}";
|
|
3068
|
+
const catRadioCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;cursor:pointer}.label-left{flex-direction:row-reverse}.radio{display:flex;position:relative}.circle{position:absolute;width:0.75rem;height:0.75rem;background-color:rgb(var(--cat-primary-bg, 32, 127, 138));border-radius:10rem;top:calc(50% - 0.375rem);left:calc(50% - 0.375rem);visibility:hidden}input{margin:0;width:1.25rem;height:1.25rem;appearance:none;background-color:white;border:1px solid #d7dbe0;border-radius:10rem;cursor:inherit}input:checked{border-color:rgb(var(--cat-primary-bg, 32, 127, 138))}input:checked+.circle{visibility:visible}input:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.is-disabled input{background-color:#f8f8fb}.is-disabled input:checked{border-color:#d7dbe0}.is-disabled .circle{background-color:#d7dbe0}";
|
|
3066
3069
|
|
|
3067
3070
|
let nextUniqueId$4 = 0;
|
|
3068
3071
|
const CatRadio = class {
|
|
@@ -3093,6 +3096,10 @@ const CatRadio = class {
|
|
|
3093
3096
|
* Whether the radio is required.
|
|
3094
3097
|
*/
|
|
3095
3098
|
this.required = false;
|
|
3099
|
+
/**
|
|
3100
|
+
* Whether the label should appear to the left of the radio component.
|
|
3101
|
+
*/
|
|
3102
|
+
this.labelLeft = false;
|
|
3096
3103
|
}
|
|
3097
3104
|
componentWillRender() {
|
|
3098
3105
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
@@ -3110,13 +3117,14 @@ const CatRadio = class {
|
|
|
3110
3117
|
this.input.focus(options);
|
|
3111
3118
|
}
|
|
3112
3119
|
render() {
|
|
3113
|
-
return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, h("span", { class: "radio" }, h("input", { ref: el => (this.input = el), id: this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
|
|
3120
|
+
return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft }, role: "radio", "aria-checked": this.checked ? 'true' : 'false' }, h("span", { class: "radio" }, h("input", { ref: el => (this.input = el), id: this.id, type: "radio", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onInput: this.onChange.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "circle" })), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
|
|
3114
3121
|
}
|
|
3115
3122
|
get hintSection() {
|
|
3116
3123
|
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
3117
3124
|
return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
|
|
3118
3125
|
}
|
|
3119
3126
|
onChange(event) {
|
|
3127
|
+
this.checked = true;
|
|
3120
3128
|
this.value = this.input.value;
|
|
3121
3129
|
this.catChange.emit(event);
|
|
3122
3130
|
}
|
|
@@ -3130,6 +3138,89 @@ const CatRadio = class {
|
|
|
3130
3138
|
};
|
|
3131
3139
|
CatRadio.style = catRadioCss;
|
|
3132
3140
|
|
|
3141
|
+
const catRadioGroupCss = ":host{display:block}:host([hidden]){display:none}";
|
|
3142
|
+
|
|
3143
|
+
const CatRadioGroup = class {
|
|
3144
|
+
constructor(hostRef) {
|
|
3145
|
+
registerInstance(this, hostRef);
|
|
3146
|
+
this.catRadioGroup = [];
|
|
3147
|
+
/**
|
|
3148
|
+
* Whether this radio group is disabled.
|
|
3149
|
+
*/
|
|
3150
|
+
this.disabled = false;
|
|
3151
|
+
/**
|
|
3152
|
+
* Whether the label of the radios should appear to the left of them.
|
|
3153
|
+
*/
|
|
3154
|
+
this.labelLeft = false;
|
|
3155
|
+
}
|
|
3156
|
+
onNameChanged(newName) {
|
|
3157
|
+
this.catRadioGroup.forEach(catRadio => {
|
|
3158
|
+
catRadio.name = newName;
|
|
3159
|
+
});
|
|
3160
|
+
}
|
|
3161
|
+
onDisabledChanged(disabled) {
|
|
3162
|
+
this.catRadioGroup.forEach(catRadio => {
|
|
3163
|
+
if (disabled) {
|
|
3164
|
+
catRadio.disabled = disabled;
|
|
3165
|
+
}
|
|
3166
|
+
});
|
|
3167
|
+
}
|
|
3168
|
+
onLabelLeftChanged(labelLeft) {
|
|
3169
|
+
this.catRadioGroup.forEach(catRadio => {
|
|
3170
|
+
if (labelLeft) {
|
|
3171
|
+
catRadio.labelLeft = labelLeft;
|
|
3172
|
+
}
|
|
3173
|
+
});
|
|
3174
|
+
}
|
|
3175
|
+
componentDidLoad() {
|
|
3176
|
+
this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));
|
|
3177
|
+
this.onNameChanged(this.name);
|
|
3178
|
+
this.onDisabledChanged(this.disabled);
|
|
3179
|
+
this.onLabelLeftChanged(this.labelLeft);
|
|
3180
|
+
this.updateTabIndex();
|
|
3181
|
+
}
|
|
3182
|
+
onKeydown(event) {
|
|
3183
|
+
var _a, _b;
|
|
3184
|
+
if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(event.key) && this.catRadioGroup.length) {
|
|
3185
|
+
const targetElements = this.catRadioGroup.filter(catRadio => !catRadio.disabled);
|
|
3186
|
+
const activeElement = document.activeElement;
|
|
3187
|
+
const activeIdx = this.catRadioGroup.findIndex(catRadio => catRadio === activeElement);
|
|
3188
|
+
const activeOff = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 1 : -1;
|
|
3189
|
+
const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
|
|
3190
|
+
targetElements[targetIdx].setFocus();
|
|
3191
|
+
(_b = (_a = targetElements[targetIdx].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.click();
|
|
3192
|
+
this.updateTabIndex();
|
|
3193
|
+
event.preventDefault();
|
|
3194
|
+
}
|
|
3195
|
+
}
|
|
3196
|
+
onInput(event) {
|
|
3197
|
+
const catRadioElement = this.catRadioGroup.find(value => value === event.target);
|
|
3198
|
+
if (catRadioElement && catRadioElement.checked) {
|
|
3199
|
+
const catRadioElements = this.catRadioGroup.filter(value => value !== catRadioElement);
|
|
3200
|
+
catRadioElements.forEach(value => (value.checked = false));
|
|
3201
|
+
this.updateTabIndex();
|
|
3202
|
+
}
|
|
3203
|
+
}
|
|
3204
|
+
render() {
|
|
3205
|
+
return (h("div", { role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", null)));
|
|
3206
|
+
}
|
|
3207
|
+
updateTabIndex() {
|
|
3208
|
+
var _a, _b;
|
|
3209
|
+
if (this.catRadioGroup.length) {
|
|
3210
|
+
this.catRadioGroup.forEach(value => { var _a, _b; return (_b = (_a = value.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '-1'); });
|
|
3211
|
+
const checkedRadioIndex = this.catRadioGroup.findIndex(value => value.checked);
|
|
3212
|
+
(_b = (_a = this.catRadioGroup[checkedRadioIndex >= 0 ? checkedRadioIndex : 0].shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
|
|
3213
|
+
}
|
|
3214
|
+
}
|
|
3215
|
+
get hostElement() { return getElement(this); }
|
|
3216
|
+
static get watchers() { return {
|
|
3217
|
+
"name": ["onNameChanged"],
|
|
3218
|
+
"disabled": ["onDisabledChanged"],
|
|
3219
|
+
"labelLeft": ["onLabelLeftChanged"]
|
|
3220
|
+
}; }
|
|
3221
|
+
};
|
|
3222
|
+
CatRadioGroup.style = catRadioGroupCss;
|
|
3223
|
+
|
|
3133
3224
|
function isFunction(value) {
|
|
3134
3225
|
return typeof value === 'function';
|
|
3135
3226
|
}
|
|
@@ -11963,6 +12054,7 @@ const CatSelect = class {
|
|
|
11963
12054
|
registerInstance(this, hostRef);
|
|
11964
12055
|
this.catChange = createEvent(this, "catChange", 7);
|
|
11965
12056
|
this.catSearch = createEvent(this, "catSearch", 7);
|
|
12057
|
+
this.catScrolledBottom = createEvent(this, "catScrolledBottom", 7);
|
|
11966
12058
|
this.i18n = CatI18nRegistry.getInstance();
|
|
11967
12059
|
this.id = `cat-select-${nextUniqueId$3++}`;
|
|
11968
12060
|
this.hasSlottedLabel = false;
|
|
@@ -12010,6 +12102,11 @@ const CatSelect = class {
|
|
|
12010
12102
|
return;
|
|
12011
12103
|
this.setChoices(choices, 'value', 'label', true);
|
|
12012
12104
|
}
|
|
12105
|
+
setValueHandler(value) {
|
|
12106
|
+
if (this.multiple)
|
|
12107
|
+
return;
|
|
12108
|
+
this.setValue(value || []);
|
|
12109
|
+
}
|
|
12013
12110
|
componentWillRender() {
|
|
12014
12111
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
12015
12112
|
if (!this.label && !this.hasSlottedLabel) {
|
|
@@ -12017,29 +12114,36 @@ const CatSelect = class {
|
|
|
12017
12114
|
}
|
|
12018
12115
|
}
|
|
12019
12116
|
componentDidLoad() {
|
|
12020
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
12117
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
12021
12118
|
this.init();
|
|
12022
|
-
|
|
12023
|
-
(
|
|
12024
|
-
|
|
12025
|
-
|
|
12026
|
-
|
|
12119
|
+
const attachedInternals = (_b = (_a = this.hostElement).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
12120
|
+
if (attachedInternals) {
|
|
12121
|
+
this.choiceInner = ((_c = attachedInternals.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.choices__inner')) || undefined;
|
|
12122
|
+
this.choiceDropdown =
|
|
12123
|
+
((_e = (_d = attachedInternals.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.choices__list--dropdown')) === null || _e === void 0 ? void 0 : _e.firstElementChild) || undefined;
|
|
12124
|
+
}
|
|
12125
|
+
(_f = this.choiceInner) === null || _f === void 0 ? void 0 : _f.addEventListener('click', this.showDropdownHandler.bind(this));
|
|
12126
|
+
(_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.addEventListener('addItem', this.onChange.bind(this));
|
|
12127
|
+
(_h = this.selectElement) === null || _h === void 0 ? void 0 : _h.addEventListener('removeItem', this.onChange.bind(this));
|
|
12128
|
+
(_j = this.selectElement) === null || _j === void 0 ? void 0 : _j.addEventListener('search', this.onSearch.bind(this));
|
|
12129
|
+
(_k = this.choiceDropdown) === null || _k === void 0 ? void 0 : _k.addEventListener('scroll', this.onScrolledBottom.bind(this));
|
|
12027
12130
|
if (this.multiple) {
|
|
12028
|
-
(
|
|
12131
|
+
(_l = this.selectElement) === null || _l === void 0 ? void 0 : _l.addEventListener('choice', this.onChoice.bind(this));
|
|
12029
12132
|
this.createRemoveItemButton();
|
|
12030
12133
|
}
|
|
12031
12134
|
}
|
|
12032
12135
|
disconnectedCallback() {
|
|
12033
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
12136
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
12034
12137
|
(_a = this.choice) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
12035
12138
|
this.choice = undefined;
|
|
12036
12139
|
(_b = this.choiceInner) === null || _b === void 0 ? void 0 : _b.removeEventListener('click', this.showDropdownHandler.bind(this));
|
|
12037
12140
|
(_c = this.selectElement) === null || _c === void 0 ? void 0 : _c.removeEventListener('addItem', this.onChange.bind(this));
|
|
12038
12141
|
(_d = this.selectElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('removeItem', this.onChange.bind(this));
|
|
12039
12142
|
(_e = this.selectElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('search', this.onSearch.bind(this));
|
|
12143
|
+
(_f = this.choiceDropdown) === null || _f === void 0 ? void 0 : _f.removeEventListener('scroll', this.onScrolledBottom.bind(this));
|
|
12040
12144
|
if (this.multiple) {
|
|
12041
|
-
(
|
|
12042
|
-
(
|
|
12145
|
+
(_g = this.selectElement) === null || _g === void 0 ? void 0 : _g.removeEventListener('choice', this.onChoice.bind(this));
|
|
12146
|
+
(_h = this.removeElement) === null || _h === void 0 ? void 0 : _h.removeEventListener('click', this.onRemoveItemButtonClick.bind(this));
|
|
12043
12147
|
}
|
|
12044
12148
|
}
|
|
12045
12149
|
/**
|
|
@@ -12083,6 +12187,7 @@ const CatSelect = class {
|
|
|
12083
12187
|
}
|
|
12084
12188
|
init() {
|
|
12085
12189
|
const value = this.value || [];
|
|
12190
|
+
const removeItemText = (value) => this.i18n.t('select.removeItem', { value });
|
|
12086
12191
|
const config = {
|
|
12087
12192
|
allowHTML: true,
|
|
12088
12193
|
items: Array.isArray(value) ? value : [value],
|
|
@@ -12118,6 +12223,10 @@ const CatSelect = class {
|
|
|
12118
12223
|
return strToEl(`
|
|
12119
12224
|
<div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable} ${data.placeholder ? classNames.placeholder : ''}" data-item data-id="${data.id}" data-value="${data.value}" ${data.active ? 'aria-selected="true"' : ''} ${data.disabled ? 'aria-disabled="true"' : ''}>
|
|
12120
12225
|
<span>${template}</span> ${data.label}
|
|
12226
|
+
<button type="button"
|
|
12227
|
+
class="${classNames.button}"
|
|
12228
|
+
aria-label="${removeItemText(data.label)}"
|
|
12229
|
+
data-button>${removeItemText(data.label)}</button>
|
|
12121
12230
|
</div>
|
|
12122
12231
|
`);
|
|
12123
12232
|
}
|
|
@@ -12142,6 +12251,10 @@ const CatSelect = class {
|
|
|
12142
12251
|
${data.disabled ? 'aria-disabled="true"' : ''}>
|
|
12143
12252
|
${template}
|
|
12144
12253
|
${data.label}
|
|
12254
|
+
<button type="button"
|
|
12255
|
+
class="${classNames.button}"
|
|
12256
|
+
aria-label="${removeItemText(data.label)}"
|
|
12257
|
+
data-button>${removeItemText(data.label)}</button>
|
|
12145
12258
|
</div>`);
|
|
12146
12259
|
},
|
|
12147
12260
|
choice: function ({ classNames }, data) {
|
|
@@ -12181,6 +12294,14 @@ const CatSelect = class {
|
|
|
12181
12294
|
const customEvent = event;
|
|
12182
12295
|
this.catSearch.emit(customEvent.detail.value);
|
|
12183
12296
|
}
|
|
12297
|
+
onScrolledBottom() {
|
|
12298
|
+
var _a, _b, _c;
|
|
12299
|
+
const scrolledBottom = ((_a = this.choiceDropdown) === null || _a === void 0 ? void 0 : _a.scrollHeight) ===
|
|
12300
|
+
(((_b = this.choiceDropdown) === null || _b === void 0 ? void 0 : _b.scrollTop) || 0) + (((_c = this.choiceDropdown) === null || _c === void 0 ? void 0 : _c.clientHeight) || 0);
|
|
12301
|
+
if (scrolledBottom) {
|
|
12302
|
+
this.catScrolledBottom.emit();
|
|
12303
|
+
}
|
|
12304
|
+
}
|
|
12184
12305
|
onChoice(event) {
|
|
12185
12306
|
var _a, _b;
|
|
12186
12307
|
const customEvent = event;
|
|
@@ -12223,7 +12344,8 @@ const CatSelect = class {
|
|
|
12223
12344
|
}
|
|
12224
12345
|
get hostElement() { return getElement(this); }
|
|
12225
12346
|
static get watchers() { return {
|
|
12226
|
-
"choices": ["setChoicesHandler"]
|
|
12347
|
+
"choices": ["setChoicesHandler"],
|
|
12348
|
+
"value": ["setValueHandler"]
|
|
12227
12349
|
}; }
|
|
12228
12350
|
};
|
|
12229
12351
|
CatSelect.style = catSelectCss;
|
|
@@ -12440,7 +12562,7 @@ const CatToastDemo = class {
|
|
|
12440
12562
|
};
|
|
12441
12563
|
CatToastDemo.style = catToastDemoCss;
|
|
12442
12564
|
|
|
12443
|
-
const catToggleCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}input{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}.toggle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;position:relative;width:2rem;height:1.25rem;border-radius:10rem;background-color:#d7dbe0;transition:background-color 0.13s ease}:checked+.toggle{background-color:rgb(var(--cat-primary-bg, 32, 127, 138))}:focus-visible+.toggle{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.toggle::after{content:\"\";position:absolute;width:1rem;height:1rem;background:#fff;border-radius:10rem;transform:translateX(calc(2px - 0.5rem));transition:transform 0.13s linear;box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2)}:checked+.toggle::after{transform:translateX(calc(-2px + 0.5rem))}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
|
|
12565
|
+
const catToggleCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;margin:0}:host{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}label{flex:0 1 auto;display:flex;gap:0.5rem;font-size:0.9375rem;line-height:1.25rem;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.label-left{flex-direction:row-reverse}input{position:absolute !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}.toggle{flex:0 0 auto;display:flex;align-items:center;justify-content:center;position:relative;width:2rem;height:1.25rem;border-radius:10rem;background-color:#d7dbe0;transition:background-color 0.13s ease}:checked+.toggle{background-color:rgb(var(--cat-primary-bg, 32, 127, 138))}:focus-visible+.toggle{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.toggle::after{content:\"\";position:absolute;width:1rem;height:1rem;background:#fff;border-radius:10rem;transform:translateX(calc(2px - 0.5rem));transition:transform 0.13s linear;box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2)}:checked+.toggle::after{transform:translateX(calc(-2px + 0.5rem))}.label{flex:1 1 auto}.is-hidden .label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.is-disabled{cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
|
|
12444
12566
|
|
|
12445
12567
|
let nextUniqueId$1 = 0;
|
|
12446
12568
|
const CatToggle = class {
|
|
@@ -12468,9 +12590,13 @@ const CatToggle = class {
|
|
|
12468
12590
|
*/
|
|
12469
12591
|
this.labelHidden = false;
|
|
12470
12592
|
/**
|
|
12471
|
-
* Required state of the toggle
|
|
12593
|
+
* Required state of the toggle.
|
|
12472
12594
|
*/
|
|
12473
12595
|
this.required = false;
|
|
12596
|
+
/**
|
|
12597
|
+
* Whether the label should appear to the left of the toggle.
|
|
12598
|
+
*/
|
|
12599
|
+
this.labelLeft = false;
|
|
12474
12600
|
}
|
|
12475
12601
|
componentWillRender() {
|
|
12476
12602
|
this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
|
|
@@ -12488,7 +12614,7 @@ const CatToggle = class {
|
|
|
12488
12614
|
this.input.focus(options);
|
|
12489
12615
|
}
|
|
12490
12616
|
render() {
|
|
12491
|
-
return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled } }, h("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, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "toggle", part: "toggle" }), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
|
|
12617
|
+
return (h(Host, null, h("label", { htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("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, class: "form-check-input", role: "switch", onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this) }), h("span", { class: "toggle", part: "toggle" }), h("span", { class: "label", part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label)), this.hintSection));
|
|
12492
12618
|
}
|
|
12493
12619
|
get hintSection() {
|
|
12494
12620
|
const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
|
|
@@ -12636,6 +12762,6 @@ const CatTooltip = class {
|
|
|
12636
12762
|
CatTooltip.OFFSET = 4;
|
|
12637
12763
|
CatTooltip.style = catTooltipCss;
|
|
12638
12764
|
|
|
12639
|
-
export { CatAlert as cat_alert, CatAvatar as cat_avatar, CatBadge as cat_badge, CatButton as cat_button, CatCard as cat_card, CatCheckbox as cat_checkbox, CatIcon as cat_icon, CatInput as cat_input, CatMenu as cat_menu, CatModal as cat_modal, CatRadio as cat_radio, CatScrollable as cat_scrollable, CatSelect as cat_select, CatSkeleton as cat_skeleton, CatSpinner as cat_spinner, CatTab as cat_tab, CatTabs as cat_tabs, CatToastDemo as cat_toast_demo, CatToggle as cat_toggle, CatTooltip as cat_tooltip };
|
|
12765
|
+
export { CatAlert as cat_alert, CatAvatar as cat_avatar, CatBadge as cat_badge, CatButton as cat_button, CatCard as cat_card, CatCheckbox as cat_checkbox, CatIcon as cat_icon, CatInput as cat_input, CatMenu as cat_menu, CatModal as cat_modal, CatRadio as cat_radio, CatRadioGroup as cat_radio_group, CatScrollable as cat_scrollable, CatSelect as cat_select, CatSkeleton as cat_skeleton, CatSpinner as cat_spinner, CatTab as cat_tab, CatTabs as cat_tabs, CatToastDemo as cat_toast_demo, CatToggle as cat_toggle, CatTooltip as cat_tooltip };
|
|
12640
12766
|
|
|
12641
|
-
//# sourceMappingURL=cat-
|
|
12767
|
+
//# sourceMappingURL=cat-alert_21.entry.js.map
|