@haiilo/catalyst 10.3.1 → 10.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/catalyst.esm.js.map +1 -1
- package/dist/catalyst/index.esm.js +1 -1
- package/dist/catalyst/index.esm.js.map +1 -1
- package/dist/catalyst/p-54544546.js +2 -0
- package/dist/catalyst/p-54544546.js.map +1 -0
- package/dist/catalyst/{p-8a1d505d.entry.js → p-66b41008.entry.js} +4 -4
- package/dist/catalyst/p-66b41008.entry.js.map +1 -0
- package/dist/cjs/{cat-alert_28.cjs.entry.js → cat-alert_29.cjs.entry.js} +269 -176
- package/dist/cjs/cat-alert_29.cjs.entry.js.map +1 -0
- package/dist/cjs/catalyst.cjs.js +1 -1
- package/dist/cjs/index.cjs.js +4 -1
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{of-45281229.js → of-8163b41f.js} +11 -3
- package/dist/cjs/of-8163b41f.js.map +1 -0
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/cat-button/cat-button.css +12 -2
- package/dist/collection/components/cat-date/cat-date.css +2 -96
- package/dist/collection/components/cat-date/cat-date.js +46 -254
- package/dist/collection/components/cat-date/cat-date.js.map +1 -1
- package/dist/collection/components/cat-date/cat-date.spec.js +2 -1
- package/dist/collection/components/cat-date/cat-date.spec.js.map +1 -1
- package/dist/collection/components/cat-date-inline/cat-date-inline.css +166 -0
- package/dist/collection/components/cat-date-inline/cat-date-inline.e2e.js +11 -0
- package/dist/collection/components/cat-date-inline/cat-date-inline.e2e.js.map +1 -0
- package/dist/collection/components/cat-date-inline/cat-date-inline.js +505 -0
- package/dist/collection/components/cat-date-inline/cat-date-inline.js.map +1 -0
- package/dist/collection/components/cat-date-inline/cat-date-inline.spec.js +16 -0
- package/dist/collection/components/cat-date-inline/cat-date-inline.spec.js.map +1 -0
- package/dist/collection/components/{cat-date → cat-date-inline}/cat-date-locale.js +22 -1
- package/dist/collection/components/cat-date-inline/cat-date-locale.js.map +1 -0
- package/dist/collection/components/cat-date-inline/cat-date-math.js.map +1 -0
- package/dist/collection/components/cat-datepicker/cat-datepicker.js +2 -2
- package/dist/collection/components/cat-datepicker-inline/cat-datepicker-inline.js +2 -2
- package/dist/collection/components/cat-dropdown/cat-dropdown.js +5 -1
- package/dist/collection/components/cat-dropdown/cat-dropdown.js.map +1 -1
- package/dist/collection/components/cat-form-group/cat-form-group.js +4 -1
- package/dist/collection/components/cat-form-group/cat-form-group.js.map +1 -1
- package/dist/collection/components/cat-i18n/cat-i18n-registry.js +6 -0
- package/dist/collection/components/cat-i18n/cat-i18n-registry.js.map +1 -1
- package/dist/collection/components/cat-icon/cat-icon-registry.js +4 -2
- package/dist/collection/components/cat-icon/cat-icon-registry.js.map +1 -1
- package/dist/collection/components/cat-icon/cat-icon.js +1 -1
- package/dist/collection/components/cat-input/cat-input.js +4 -4
- package/dist/collection/components/cat-notification/cat-notification.js +3 -0
- package/dist/collection/components/cat-notification/cat-notification.js.map +1 -1
- package/dist/collection/components/cat-pagination/cat-pagination.js +2 -2
- package/dist/collection/components/cat-radio/cat-radio.js +1 -1
- package/dist/collection/components/cat-radio-group/cat-radio-group.js +1 -1
- package/dist/collection/components/cat-scrollable/cat-scrollable.js +3 -3
- package/dist/collection/components/cat-select-demo/cat-select-demo.js +1 -1
- package/dist/collection/components/cat-skeleton/cat-skeleton.js +1 -1
- package/dist/collection/components/cat-spinner/cat-spinner.js +2 -2
- package/dist/collection/components/cat-tab/cat-tab.js +1 -1
- package/dist/collection/components/cat-tabs/cat-tabs.js +1 -1
- package/dist/collection/components/cat-textarea/cat-textarea.js +3 -3
- package/dist/collection/components/cat-time/cat-time.js +4 -1
- package/dist/collection/components/cat-time/cat-time.js.map +1 -1
- package/dist/collection/components/cat-toggle/cat-toggle.js +1 -1
- package/dist/collection/components/cat-tooltip/cat-tooltip.js +7 -2
- package/dist/collection/components/cat-tooltip/cat-tooltip.js.map +1 -1
- package/dist/components/cat-button2.js +1 -1
- package/dist/components/cat-button2.js.map +1 -1
- package/dist/components/cat-date-inline.d.ts +11 -0
- package/dist/components/cat-date-inline.js +8 -0
- package/dist/components/cat-date-inline.js.map +1 -0
- package/dist/components/cat-date-inline2.js +386 -0
- package/dist/components/cat-date-inline2.js.map +1 -0
- package/dist/components/cat-date.js +50 -288
- package/dist/components/cat-date.js.map +1 -1
- package/dist/components/cat-datepicker-inline.js +2 -2
- package/dist/components/cat-datepicker.js +2 -2
- package/dist/components/cat-dropdown2.js +1 -1
- package/dist/components/cat-dropdown2.js.map +1 -1
- package/dist/components/cat-form-group.js +1 -1
- package/dist/components/cat-form-group.js.map +1 -1
- package/dist/components/cat-i18n-registry.js +6 -0
- package/dist/components/cat-i18n-registry.js.map +1 -1
- package/dist/components/cat-icon-registry.js +4 -2
- package/dist/components/cat-icon-registry.js.map +1 -1
- package/dist/components/cat-icon2.js +1 -1
- package/dist/components/cat-input2.js +4 -4
- package/dist/components/cat-pagination.js +2 -2
- package/dist/components/cat-radio-group.js +1 -1
- package/dist/components/cat-radio.js +1 -1
- package/dist/components/cat-scrollable2.js +3 -3
- package/dist/components/cat-select-demo.js +1 -1
- package/dist/components/cat-skeleton2.js +1 -1
- package/dist/components/cat-spinner2.js +2 -2
- package/dist/components/cat-tab.js +1 -1
- package/dist/components/cat-tabs.js +1 -1
- package/dist/components/cat-textarea.js +3 -3
- package/dist/components/cat-time.js +1 -1
- package/dist/components/cat-time.js.map +1 -1
- package/dist/components/cat-toggle.js +1 -1
- package/dist/components/cat-tooltip.js +2 -2
- package/dist/components/cat-tooltip.js.map +1 -1
- package/dist/components/index.js +3 -0
- package/dist/components/index.js.map +1 -1
- package/dist/esm/{cat-alert_28.entry.js → cat-alert_29.entry.js} +269 -177
- package/dist/esm/cat-alert_29.entry.js.map +1 -0
- package/dist/esm/catalyst.js +1 -1
- package/dist/esm/index.js +5 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{of-19888f3b.js → of-f4b9a3ca.js} +11 -3
- package/dist/esm/of-f4b9a3ca.js.map +1 -0
- package/dist/types/components/cat-date/cat-date.d.ts +8 -31
- package/dist/types/components/cat-date-inline/cat-date-inline.d.ts +81 -0
- package/dist/types/components/{cat-date → cat-date-inline}/cat-date-locale.d.ts +5 -0
- package/dist/types/components/cat-dropdown/cat-dropdown.d.ts +4 -0
- package/dist/types/components/cat-form-group/cat-form-group.d.ts +3 -0
- package/dist/types/components/cat-i18n/cat-i18n-registry.d.ts +6 -0
- package/dist/types/components/cat-icon/cat-icon-registry.d.ts +1 -0
- package/dist/types/components/cat-notification/cat-notification.d.ts +3 -0
- package/dist/types/components/cat-time/cat-time.d.ts +3 -0
- package/dist/types/components/cat-tooltip/cat-tooltip.d.ts +5 -0
- package/dist/types/components.d.ts +201 -5
- package/package.json +2 -2
- package/dist/catalyst/p-81800b65.js +0 -2
- package/dist/catalyst/p-81800b65.js.map +0 -1
- package/dist/catalyst/p-8a1d505d.entry.js.map +0 -1
- package/dist/cjs/cat-alert_28.cjs.entry.js.map +0 -1
- package/dist/cjs/of-45281229.js.map +0 -1
- package/dist/collection/components/cat-date/cat-date-locale.js.map +0 -1
- package/dist/collection/components/cat-date/cat-date-math.js.map +0 -1
- package/dist/esm/cat-alert_28.entry.js.map +0 -1
- package/dist/esm/of-19888f3b.js.map +0 -1
- /package/dist/collection/components/{cat-date → cat-date-inline}/cat-date-math.js +0 -0
- /package/dist/types/components/{cat-date → cat-date-inline}/cat-date-math.d.ts +0 -0
|
@@ -56,7 +56,7 @@ export class CatRadio {
|
|
|
56
56
|
this.input.blur();
|
|
57
57
|
}
|
|
58
58
|
render() {
|
|
59
|
-
return (h(Host, { key: '
|
|
59
|
+
return (h(Host, { key: '1f5432c0800e82741e2786146b728403157eb874' }, h("label", { key: 'cac427f0f10635bd03a799d25ac0160b721cfcdb', 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", { key: '6a8598e54d46eb976717faf125c58a675b79ad99', class: "radio" }, h("input", { key: '7b5dea2ce070d83a1a1f16375d3d782f8b3d1459', ...this.nativeAttributes, part: "input", ref: el => (this.input = el), id: this.identifier || this.id, type: "radio", 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), "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), h("span", { key: 'e6f1802e164c2b74f84f413fd351ea6a9f10c9a2', class: "circle" })), h("span", { key: '95e951a221d6b36d980a6619fa501a409555e981', 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: "circle-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
|
|
60
60
|
}
|
|
61
61
|
get hasHint() {
|
|
62
62
|
return !!this.hint || !!this.hasSlottedHint;
|
|
@@ -67,7 +67,7 @@ export class CatRadioGroup {
|
|
|
67
67
|
}
|
|
68
68
|
}
|
|
69
69
|
render() {
|
|
70
|
-
return (h("div", { key: '
|
|
70
|
+
return (h("div", { key: '5608e54b1bb857a4068a6287b072bd71081d51d2', role: "radiogroup", "aria-label": this.a11yLabel }, h("slot", { key: '8e62283745589e94e99650f7fe85afeea39fa253' })));
|
|
71
71
|
}
|
|
72
72
|
init() {
|
|
73
73
|
this.catRadioGroup = Array.from(this.hostElement.querySelectorAll(`cat-radio`));
|
|
@@ -57,13 +57,13 @@ export class CatScrollable {
|
|
|
57
57
|
}
|
|
58
58
|
render() {
|
|
59
59
|
return [
|
|
60
|
-
h("div", { key: '
|
|
61
|
-
h("div", { key: '
|
|
60
|
+
h("div", { key: 'b8d4abf49b6747e516f23bc4e16bbc1b7b9e2efe', class: "scrollable-wrapper", ref: el => (this.scrollWrapperElement = el) }, !this.noShadowY && h("div", { class: "shadow-top" }), !this.noShadowX && h("div", { class: "shadow-left" }), !this.noShadowX && h("div", { class: "shadow-right" }), !this.noShadowY && h("div", { class: "shadow-bottom" })),
|
|
61
|
+
h("div", { key: '9552a4a4a86713effab40df3f95310dae5863f78', ref: el => (this.scrollElement = el), class: {
|
|
62
62
|
'scrollable-content': true,
|
|
63
63
|
'scroll-x': !this.noOverflowX,
|
|
64
64
|
'scroll-y': !this.noOverflowY,
|
|
65
65
|
'no-overscroll': this.noOverscroll
|
|
66
|
-
} }, h("slot", { key: '
|
|
66
|
+
} }, h("slot", { key: 'acc0afcb95539ad6db29c6a96b2673892f2d9153' }))
|
|
67
67
|
];
|
|
68
68
|
}
|
|
69
69
|
attachEmitter(from, emitter) {
|
|
@@ -139,7 +139,7 @@ export class CatSelectTest {
|
|
|
139
139
|
setTimeout(() => this.multipleSelect && (this.multipleSelect.value = []), 5000);
|
|
140
140
|
}
|
|
141
141
|
render() {
|
|
142
|
-
return (h(Host, { key: '
|
|
142
|
+
return (h(Host, { key: 'fbbdfc05bd034597b84d235445b70c526ed17dd4', style: { display: 'flex', flexDirection: 'column' }, class: "cat-form" }, h("cat-select", { key: 'e88f94e3022868b3ec6ca75a704a45edac6dedc6', label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => console.log('Multiple change', this.multipleSelect?.value), onCatBlur: e => console.log('Multiple blur', e), multiple: true, noItems: "No results", clearable: true, errorUpdate: false }, h("span", { key: 'a5e00768df01e4f91dfd2b4b3f62a998df32bf7d', slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select", { key: '935aacbe810131079d95d61d9e6fd2efbec03d01', label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: '0b8fbe7e2ec42acf7cbd01fd216d0909befd30a2', label: "Multiple with initials", ref: el => (this.multipleSelectAvatarInitials = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true, errorUpdate: false }), h("cat-select", { key: '509741cf8a8f6438649f2a4debe0829fd3b905eb', label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania', 'Algeria'] }, placeholder: "Select country", onCatChange: () => console.log('Multiple tagging change', this.multipleSelectTagging?.value), multiple: true, tags: true, clearable: true, errorUpdate: false }), h("cat-select", { key: 'a42ff7c4b8f1686fa0cdbd5a202b4bff59f7e599', label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true, errorUpdate: false }), h("cat-select", { key: 'e29353e92663b785844080bf6ef6937348c80379', label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true, errorUpdate: false }), h("cat-select", { key: 'a53e0848faed0a98be3d2bc6e81c1e21c82cbc9c', label: "Single with initials", ref: el => (this.singleSelectAvatarInitials = el), placeholder: "Hello World", clearable: true, errorUpdate: false }), h("cat-dropdown", { key: 'f6173b84ec5d84401dbc7190c6e09719c0412f26', overflow: true }, h("cat-button", { key: '4d45f4bd17867cb4d54078f503e8613441e04374', slot: "trigger", style: { width: '50%' } }, "Open select"), h("div", { key: '2736181440e085cf623c2c3c875edaab23f71a3e', slot: "content", style: { width: '400px' } }, h("cat-select", { key: '9fa27d270fc984bd22ef82de2e54e7ac952f71a2', label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '', tag: 'Albania' }, placeholder: "Search for a country or capital", onCatChange: () => console.log('Single change', this.singleSelectTagging?.value), tagHint: "new country", tags: true, clearable: true, errorUpdate: false, style: { width: '90%' } })))));
|
|
143
143
|
}
|
|
144
144
|
get countryConnector() {
|
|
145
145
|
return {
|
|
@@ -10,7 +10,7 @@ export class CatSkeleton {
|
|
|
10
10
|
this.lines = undefined;
|
|
11
11
|
}
|
|
12
12
|
render() {
|
|
13
|
-
return (h(Host, { key: '
|
|
13
|
+
return (h(Host, { key: '8f1e4584c050cc8b6d1341efd3d8b04ca7223a73' }, Array.from(Array(this.count)).map(() => (h("div", { style: this.style, class: {
|
|
14
14
|
skeleton: true,
|
|
15
15
|
[`skeleton-${this.effect}`]: Boolean(this.effect),
|
|
16
16
|
[`skeleton-${this.variant}`]: Boolean(this.variant),
|
|
@@ -8,9 +8,9 @@ export class CatSpinner {
|
|
|
8
8
|
this.a11yLabel = undefined;
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
|
-
return (h("span", { key: '
|
|
11
|
+
return (h("span", { key: 'cf1110c7ae2c653c87f44f2668aa3bcc757ed0c9', "aria-label": this.a11yLabel, "aria-hidden": this.a11yLabel ? null : 'true', class: {
|
|
12
12
|
[`spinner-${this.size}`]: this.size !== 'inline'
|
|
13
|
-
} }, h("svg", { key: '
|
|
13
|
+
} }, h("svg", { key: '22d1a1c15575274a75d4203ae9a1c945a199759d', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 48 48" }, h("circle", { key: 'f067c870a5699603761b7d8d6e4a32354cef6f7e', cx: "24", cy: "24", r: "21.5" }))));
|
|
14
14
|
}
|
|
15
15
|
static get is() { return "cat-spinner"; }
|
|
16
16
|
static get encapsulation() { return "shadow"; }
|
|
@@ -24,7 +24,7 @@ export class CatTab {
|
|
|
24
24
|
this.catClick.emit(event);
|
|
25
25
|
}
|
|
26
26
|
render() {
|
|
27
|
-
return h(Host, { key: '
|
|
27
|
+
return h(Host, { key: 'e0b1e0562a35130f4b0de08530eb66c9df5ec145' });
|
|
28
28
|
}
|
|
29
29
|
static get is() { return "cat-tab"; }
|
|
30
30
|
static get encapsulation() { return "shadow"; }
|
|
@@ -58,7 +58,7 @@ export class CatTabs {
|
|
|
58
58
|
this.activate(this.tabs[index]);
|
|
59
59
|
}
|
|
60
60
|
render() {
|
|
61
|
-
return (h(Host, { key: '
|
|
61
|
+
return (h(Host, { key: '05969fc6e983159aaad4a36ab07b6326c5c85589' }, this.tabs.map((tab) => {
|
|
62
62
|
return (h("cat-button", { buttonId: tab.id, role: "tab", part: "tab", class: {
|
|
63
63
|
'cat-tab': true,
|
|
64
64
|
'cat-tab-active': tab.id === this.activeTab,
|
|
@@ -92,15 +92,15 @@ export class CatTextarea {
|
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
94
|
render() {
|
|
95
|
-
return (h(Host, { key: '
|
|
95
|
+
return (h(Host, { key: '2fac5152cbeeb9d4a9c4dc0f9539bb1a1503c9e8' }, h("div", { key: '88d992d98f72a0862b3736ad102a0124363e17b6', class: {
|
|
96
96
|
'textarea-field': true,
|
|
97
97
|
'textarea-horizontal': this.horizontal
|
|
98
|
-
} }, h("div", { key: '
|
|
98
|
+
} }, h("div", { key: 'ab23b2ebcc13b7511c4e951041817bb8b1952c0c', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, part: "label" }, h("span", { class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, h("div", { class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")")), this.maxLength && (h("div", { class: "label-character-count", "aria-hidden": "true" }, this.value?.length ?? 0, "/", this.maxLength))))))), h("div", { key: '30a02b82d605c5e416a63b8eef5205d41139ce6d', class: "textarea-container" }, h("div", { key: '32aad8e1e15134dad90e991cc3e471b06dcbc9fd', class: {
|
|
99
99
|
'textarea-wrapper': true,
|
|
100
100
|
'textarea-readonly': this.readonly,
|
|
101
101
|
'textarea-disabled': this.disabled,
|
|
102
102
|
'textarea-invalid': this.invalid
|
|
103
|
-
} }, h("textarea", { key: '
|
|
103
|
+
} }, h("textarea", { key: '96d5a02bfdb1c7feb85ce02380a59ff63a7d1760', ...this.nativeAttributes, part: "textarea", ref: el => (this.textarea = el), id: this.id, disabled: this.disabled, maxlength: this.maxLength, minlength: this.minLength, name: this.name, placeholder: this.placeholder, readonly: this.readonly, required: this.required, rows: this.rows, value: this.value, onInput: this.onInput.bind(this), onFocus: this.onFocus.bind(this), onBlur: this.onBlur.bind(this), "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined }), this.invalid && (h("cat-icon", { icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l", onClick: () => this.textarea.focus() }))), this.hasHint && (h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap }))))));
|
|
104
104
|
}
|
|
105
105
|
get hasHint() {
|
|
106
106
|
return !!this.hint || !!this.hasSlottedHint || this.invalid;
|
|
@@ -2,6 +2,9 @@ import { Host, h } from "@stencil/core";
|
|
|
2
2
|
import { catI18nRegistry as i18n } from "../cat-i18n/cat-i18n-registry";
|
|
3
3
|
import { getLocale } from "./cat-time-locale";
|
|
4
4
|
import { clampTime, isAfter, isBefore } from "./cat-time-math";
|
|
5
|
+
/**
|
|
6
|
+
* A time input component to select a time in a dropdown.
|
|
7
|
+
*/
|
|
5
8
|
export class CatTime {
|
|
6
9
|
constructor() {
|
|
7
10
|
this.language = i18n.getLocale();
|
|
@@ -111,7 +114,7 @@ export class CatTime {
|
|
|
111
114
|
this.input?.clear();
|
|
112
115
|
}
|
|
113
116
|
render() {
|
|
114
|
-
return (h(Host, { key: '
|
|
117
|
+
return (h(Host, { key: '899fb8f5f263ba560bacb99d111792e9219e057a' }, h("cat-input", { key: 'e2b84c644e265cdc166c7ec50cb873d79ddeb12e', class: "cat-time-input", ref: el => (this.input = el), requiredMarker: this.requiredMarker, horizontal: this.horizontal, autoComplete: this.autoComplete, clearable: this.clearable, disabled: this.disabled, hint: this.hint, icon: this.icon, iconRight: this.iconRight, identifier: this.identifier, label: this.label, labelHidden: this.labelHidden, name: this.name, placeholder: this.placeholder, textPrefix: this.textPrefix, textSuffix: this.textSuffix, readonly: this.readonly, required: this.required, value: this.format(this.selectionTime, false), errors: this.errors, errorUpdate: this.errorUpdate, nativeAttributes: this.nativeAttributes, onCatFocus: e => this.catFocus.emit(e.detail), onCatBlur: e => this.onInputBlur(e.detail) }, h("span", { key: '097ee8e93a2d05d35051ddc1aa105b1e9ebf0528', slot: "label" }, this.hasSlottedLabel && h("slot", { name: "label" }), !this.hasSlottedLabel && this.label, h("span", { key: '5d526fe661331f8eb1a887ddc0eabc3f3338747a', class: "label-aria" }, " (HH:mm)")), h("div", { key: '28fcd51b6e297d552e121a01813c92c564cccbda', slot: "addon", class: "cat-time-addon" }, this.locale.timeFormat === '12' && (h("cat-button", { class: "cat-time-format", disabled: this.disabled || this.readonly, onCatClick: () => this.toggleAm() }, this.isAm ? 'AM' : 'PM')), h("cat-dropdown", { key: 'f93687883da3f3c32027edcd89d6989caad8e504', slot: "addon", placement: this.placement }, h("cat-button", { key: 'eae27c8538ff6564d6b5a735b30e8c2aac07751d', slot: "trigger", class: "cat-time-toggle", disabled: this.disabled || this.readonly, icon: "$cat:timepicker-clock", iconOnly: true, a11yLabel: this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose }), h("nav", { key: 'a334804d935c713bb95e3bb88fce40fa7f05724c', slot: "content", class: "cat-nav" }, h("ul", { key: '713181fc8597cf4b9486f2fb7aa63fb412180054' }, this.timeArray().map(time => {
|
|
115
118
|
const isoTime = this.formatIso(time);
|
|
116
119
|
const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);
|
|
117
120
|
return (h("li", null, h("cat-button", { class: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-time.js","sourceRoot":"","sources":["../../../src/components/cat-time/cat-time.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Placement } from '@floating-ui/dom';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, h } from '@stencil/core';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { getLocale } from './cat-time-locale';\nimport { clampTime, isAfter, isBefore } from './cat-time-math';\n\n@Component({\n tag: 'cat-time',\n styleUrl: 'cat-time.scss',\n shadow: true\n})\nexport class CatTime {\n private readonly language = i18n.getLocale();\n private readonly locale = getLocale(this.language);\n private input?: HTMLCatInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() selectionTime: Date | null = null;\n\n @State() isAm = true;\n\n /**\n * Whether the label need a marker to shown if the input is required or optional.\n */\n @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n /**\n * Whether the label is on top or left.\n */\n @Prop() horizontal = false;\n\n /**\n * Hint for form autofill feature.\n */\n @Prop() autoComplete?: string;\n\n /**\n * Whether the input should show a clear button.\n */\n @Prop() clearable = false;\n\n /**\n * Whether the input is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * Optional hint text(s) to be displayed with the input.\n */\n @Prop() hint?: string | string[];\n\n /**\n * The name of an icon to be displayed in the input.\n */\n @Prop() icon?: string;\n\n /**\n * Display the icon on the right.\n */\n @Prop() iconRight = false;\n\n /**\n * A unique identifier for the input.\n */\n @Prop() identifier?: string;\n\n /**\n * The label for the input.\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 * A maximum time value given in HH:mm format.\n */\n @Prop() max?: string;\n\n /**\n * A minimum value given in HH:mm format.\n */\n @Prop() min?: string;\n\n /**\n * The name of the form control. Submitted with the form as part of a name/value pair.\n */\n @Prop() name?: string;\n\n /**\n * The placeholder text to display within the input.\n */\n @Prop() placeholder?: string;\n\n /**\n * A textual prefix to be displayed in the input.\n */\n @Prop() textPrefix?: string;\n\n /**\n * A textual suffix to be displayed in the input.\n */\n @Prop() textSuffix?: string;\n\n /**\n * The value is not editable.\n */\n @Prop() readonly = false;\n\n /**\n * A value is required or must be check for the form to be submittable.\n */\n @Prop() required = false;\n\n /**\n * The value of the control given in HH:mm format\n */\n @Prop({ mutable: true }) value?: string;\n\n /**\n * The validation errors for this input. Will render a hint under the input\n * with the translated error message(s) `error.${key}`. If an object is\n * passed, the keys will be used as error keys and the values translation\n * parameters.\n * If the value is `true`, the input will be marked as invalid without any\n * hints under the input.\n */\n @Prop() errors?: boolean | string[] | ErrorMap;\n\n /**\n * Fine-grained control over when the errors are shown. Can be `false` to\n * never show errors, `true` to show errors on blur, or a number to show\n * errors on change with the given delay in milliseconds.\n */\n @Prop() errorUpdate: boolean | number = 0;\n\n /**\n * Attributes that will be added to the native HTML input element.\n */\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-end';\n\n /**\n * The step size for times in minutes.\n */\n @Prop() step = 30;\n\n /**\n * Emitted when the value is changed.\n */\n @Event() catChange!: EventEmitter<string>;\n\n /**\n * Emitted when the input received focus.\n */\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the input loses focus.\n */\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad() {\n this.syncValue(this.value ?? '');\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n }\n\n componentDidLoad() {\n this.input?.mask({\n time: true,\n timeFormat: this.locale.timeFormat,\n timePattern: ['h', 'm']\n });\n }\n\n @Listen('catOpen')\n onOpen() {\n const query = (selector: string) => this.hostElement.shadowRoot?.querySelector<HTMLCatButtonElement>(selector);\n const time = clampTime(this.min ?? null, this.selectionTime ?? new Date(2000, 5, 1, 8), this.max ?? null);\n const elem1 = query(`[data-time=\"${this.formatIso(time)}\"]`);\n time.setMinutes(Math.floor(time.getMinutes() / this.step) * this.step);\n const elem2 = query(`[data-time=\"${this.formatIso(time)}\"]`);\n setTimeout(() => {\n (elem2 ?? elem1)?.doFocus();\n (elem2 ?? elem1)?.scrollIntoView(this.selectionTime ? { block: 'center' } : undefined);\n }); // not entirely sure why this is necessary\n }\n\n /**\n * Select a time in the picker.\n *\n * @param date The time to select.\n */\n @Method()\n async select(date: Date | null): Promise<void> {\n const oldValue = this.value;\n if (!date) {\n this.selectionTime = null;\n this.value = undefined;\n } else {\n const time = clampTime(this.min ?? null, date, this.max ?? null);\n this.isAm = this.format(time).toLowerCase().includes('am');\n this.selectionTime = time;\n this.value = this.formatIso(time);\n }\n // we need to set the input explicitly to sync the input even without a\n // rerender (if the value is not changed)\n if (this.input) {\n this.input.value = this.format(this.selectionTime, false);\n }\n if (oldValue !== this.value) {\n this.catChange.emit(this.value);\n }\n }\n\n /**\n * Programmatically move focus to the input. 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?.doFocus(options);\n }\n\n /**\n * Programmatically remove focus from the input. Use this method instead of\n * `input.blur()`.\n */\n @Method()\n async doBlur(): Promise<void> {\n this.input?.doBlur();\n }\n\n /**\n * Clear the input.\n */\n @Method()\n async clear(): Promise<void> {\n this.input?.clear();\n }\n\n render() {\n return (\n <Host>\n <cat-input\n class=\"cat-time-input\"\n ref={el => (this.input = el as HTMLCatInputElement)}\n requiredMarker={this.requiredMarker}\n horizontal={this.horizontal}\n autoComplete={this.autoComplete}\n clearable={this.clearable}\n disabled={this.disabled}\n hint={this.hint}\n icon={this.icon}\n iconRight={this.iconRight}\n identifier={this.identifier}\n label={this.label}\n labelHidden={this.labelHidden}\n name={this.name}\n placeholder={this.placeholder}\n textPrefix={this.textPrefix}\n textSuffix={this.textSuffix}\n readonly={this.readonly}\n required={this.required}\n value={this.format(this.selectionTime, false)}\n errors={this.errors}\n errorUpdate={this.errorUpdate}\n nativeAttributes={this.nativeAttributes}\n onCatFocus={e => this.catFocus.emit(e.detail)}\n onCatBlur={e => this.onInputBlur(e.detail)}\n >\n <span slot=\"label\">\n {this.hasSlottedLabel && <slot name=\"label\"></slot>}\n {!this.hasSlottedLabel && this.label}\n <span class=\"label-aria\"> (HH:mm)</span>\n </span>\n <div slot=\"addon\" class=\"cat-time-addon\">\n {this.locale.timeFormat === '12' && (\n <cat-button\n class=\"cat-time-format\"\n disabled={this.disabled || this.readonly}\n onCatClick={() => this.toggleAm()}\n >\n {this.isAm ? 'AM' : 'PM'}\n </cat-button>\n )}\n <cat-dropdown slot=\"addon\" placement={this.placement}>\n <cat-button\n slot=\"trigger\"\n class=\"cat-time-toggle\"\n disabled={this.disabled || this.readonly}\n icon=\"$cat:timepicker-clock\"\n iconOnly\n a11yLabel={\n this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose\n }\n ></cat-button>\n <nav slot=\"content\" class=\"cat-nav\">\n <ul>\n {this.timeArray().map(time => {\n const isoTime = this.formatIso(time);\n const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);\n return (\n <li>\n <cat-button\n class={{\n 'cat-nav-item': true,\n 'time-disabled': disabled\n }}\n disabled={disabled}\n active={isoTime === this.value}\n color={isoTime === this.value ? 'primary' : 'secondary'}\n variant={isoTime === this.value ? 'filled' : 'outlined'}\n onCatClick={() => this.select(time)}\n data-time={isoTime}\n >\n {this.format(time)}\n </cat-button>\n </li>\n );\n })}\n </ul>\n </nav>\n </cat-dropdown>\n </div>\n {this.hasSlottedHint && (\n <span slot=\"hint\">\n <slot name=\"hint\"></slot>\n </span>\n )}\n </cat-input>\n </Host>\n );\n }\n\n private timeArray() {\n const result = [];\n const start = new Date(2000, 5, 1, 0, 0, 0);\n let time = new Date(start.getTime());\n while (time.getDate() === start.getDate()) {\n result.push(time);\n time = new Date(time.getTime() + this.step * 60000);\n }\n return result;\n }\n\n private syncValue(value: string) {\n const [, hh, mm] = value.match(/(\\d{2}):(\\d{2})/)?.map(Number) ?? [];\n if (hh === undefined || mm === undefined) {\n this.select(null);\n return;\n }\n this.select(\n this.locale.timeFormat === '24'\n ? new Date(2000, 5, 1, hh, mm, 0)\n : new Date(2000, 5, 1, (hh % 12) + (this.isAm ? 0 : 12), mm, 0)\n );\n }\n\n private toggleAm() {\n if (this.selectionTime) {\n this.select(new Date(this.selectionTime.getTime() + (this.isAm ? 12 : -12) * 3600000));\n } else {\n this.isAm = !this.isAm;\n }\n }\n\n private onInputBlur(e: FocusEvent) {\n this.syncValue(this.input?.value ?? '');\n this.catBlur.emit(e);\n }\n\n private format(date: Date | null, includeAmPm = true) {\n const str = date\n ? new Intl.DateTimeFormat(this.language, {\n hour: '2-digit',\n minute: '2-digit'\n }).format(date)\n : '';\n return includeAmPm ? str : str.replace(/\\s?(am|pm)/i, '');\n }\n\n private formatIso(date: Date) {\n return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cat-time.js","sourceRoot":"","sources":["../../../src/components/cat-time/cat-time.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Placement } from '@floating-ui/dom';\nimport { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, State, h } from '@stencil/core';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { getLocale } from './cat-time-locale';\nimport { clampTime, isAfter, isBefore } from './cat-time-math';\n\n/**\n * A time input component to select a time in a dropdown.\n */\n@Component({\n tag: 'cat-time',\n styleUrl: 'cat-time.scss',\n shadow: true\n})\nexport class CatTime {\n private readonly language = i18n.getLocale();\n private readonly locale = getLocale(this.language);\n private input?: HTMLCatInputElement;\n\n @Element() hostElement!: HTMLElement;\n\n @State() hasSlottedLabel = false;\n\n @State() hasSlottedHint = false;\n\n @State() selectionTime: Date | null = null;\n\n @State() isAm = true;\n\n /**\n * Whether the label need a marker to shown if the input is required or optional.\n */\n @Prop() requiredMarker?: 'none' | 'required' | 'optional' | 'none!' | 'optional!' | 'required!' = 'optional';\n\n /**\n * Whether the label is on top or left.\n */\n @Prop() horizontal = false;\n\n /**\n * Hint for form autofill feature.\n */\n @Prop() autoComplete?: string;\n\n /**\n * Whether the input should show a clear button.\n */\n @Prop() clearable = false;\n\n /**\n * Whether the input is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * Optional hint text(s) to be displayed with the input.\n */\n @Prop() hint?: string | string[];\n\n /**\n * The name of an icon to be displayed in the input.\n */\n @Prop() icon?: string;\n\n /**\n * Display the icon on the right.\n */\n @Prop() iconRight = false;\n\n /**\n * A unique identifier for the input.\n */\n @Prop() identifier?: string;\n\n /**\n * The label for the input.\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 * A maximum time value given in HH:mm format.\n */\n @Prop() max?: string;\n\n /**\n * A minimum value given in HH:mm format.\n */\n @Prop() min?: string;\n\n /**\n * The name of the form control. Submitted with the form as part of a name/value pair.\n */\n @Prop() name?: string;\n\n /**\n * The placeholder text to display within the input.\n */\n @Prop() placeholder?: string;\n\n /**\n * A textual prefix to be displayed in the input.\n */\n @Prop() textPrefix?: string;\n\n /**\n * A textual suffix to be displayed in the input.\n */\n @Prop() textSuffix?: string;\n\n /**\n * The value is not editable.\n */\n @Prop() readonly = false;\n\n /**\n * A value is required or must be check for the form to be submittable.\n */\n @Prop() required = false;\n\n /**\n * The value of the control given in HH:mm format\n */\n @Prop({ mutable: true }) value?: string;\n\n /**\n * The validation errors for this input. Will render a hint under the input\n * with the translated error message(s) `error.${key}`. If an object is\n * passed, the keys will be used as error keys and the values translation\n * parameters.\n * If the value is `true`, the input will be marked as invalid without any\n * hints under the input.\n */\n @Prop() errors?: boolean | string[] | ErrorMap;\n\n /**\n * Fine-grained control over when the errors are shown. Can be `false` to\n * never show errors, `true` to show errors on blur, or a number to show\n * errors on change with the given delay in milliseconds.\n */\n @Prop() errorUpdate: boolean | number = 0;\n\n /**\n * Attributes that will be added to the native HTML input element.\n */\n @Prop() nativeAttributes?: { [key: string]: string };\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-end';\n\n /**\n * The step size for times in minutes.\n */\n @Prop() step = 30;\n\n /**\n * Emitted when the value is changed.\n */\n @Event() catChange!: EventEmitter<string>;\n\n /**\n * Emitted when the input received focus.\n */\n @Event() catFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the input loses focus.\n */\n @Event() catBlur!: EventEmitter<FocusEvent>;\n\n componentWillLoad() {\n this.syncValue(this.value ?? '');\n }\n\n componentWillRender(): void {\n this.hasSlottedLabel = !!this.hostElement.querySelector('[slot=\"label\"]');\n this.hasSlottedHint = !!this.hostElement.querySelector('[slot=\"hint\"]');\n }\n\n componentDidLoad() {\n this.input?.mask({\n time: true,\n timeFormat: this.locale.timeFormat,\n timePattern: ['h', 'm']\n });\n }\n\n @Listen('catOpen')\n onOpen() {\n const query = (selector: string) => this.hostElement.shadowRoot?.querySelector<HTMLCatButtonElement>(selector);\n const time = clampTime(this.min ?? null, this.selectionTime ?? new Date(2000, 5, 1, 8), this.max ?? null);\n const elem1 = query(`[data-time=\"${this.formatIso(time)}\"]`);\n time.setMinutes(Math.floor(time.getMinutes() / this.step) * this.step);\n const elem2 = query(`[data-time=\"${this.formatIso(time)}\"]`);\n setTimeout(() => {\n (elem2 ?? elem1)?.doFocus();\n (elem2 ?? elem1)?.scrollIntoView(this.selectionTime ? { block: 'center' } : undefined);\n }); // not entirely sure why this is necessary\n }\n\n /**\n * Select a time in the picker.\n *\n * @param date The time to select.\n */\n @Method()\n async select(date: Date | null): Promise<void> {\n const oldValue = this.value;\n if (!date) {\n this.selectionTime = null;\n this.value = undefined;\n } else {\n const time = clampTime(this.min ?? null, date, this.max ?? null);\n this.isAm = this.format(time).toLowerCase().includes('am');\n this.selectionTime = time;\n this.value = this.formatIso(time);\n }\n // we need to set the input explicitly to sync the input even without a\n // rerender (if the value is not changed)\n if (this.input) {\n this.input.value = this.format(this.selectionTime, false);\n }\n if (oldValue !== this.value) {\n this.catChange.emit(this.value);\n }\n }\n\n /**\n * Programmatically move focus to the input. 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?.doFocus(options);\n }\n\n /**\n * Programmatically remove focus from the input. Use this method instead of\n * `input.blur()`.\n */\n @Method()\n async doBlur(): Promise<void> {\n this.input?.doBlur();\n }\n\n /**\n * Clear the input.\n */\n @Method()\n async clear(): Promise<void> {\n this.input?.clear();\n }\n\n render() {\n return (\n <Host>\n <cat-input\n class=\"cat-time-input\"\n ref={el => (this.input = el as HTMLCatInputElement)}\n requiredMarker={this.requiredMarker}\n horizontal={this.horizontal}\n autoComplete={this.autoComplete}\n clearable={this.clearable}\n disabled={this.disabled}\n hint={this.hint}\n icon={this.icon}\n iconRight={this.iconRight}\n identifier={this.identifier}\n label={this.label}\n labelHidden={this.labelHidden}\n name={this.name}\n placeholder={this.placeholder}\n textPrefix={this.textPrefix}\n textSuffix={this.textSuffix}\n readonly={this.readonly}\n required={this.required}\n value={this.format(this.selectionTime, false)}\n errors={this.errors}\n errorUpdate={this.errorUpdate}\n nativeAttributes={this.nativeAttributes}\n onCatFocus={e => this.catFocus.emit(e.detail)}\n onCatBlur={e => this.onInputBlur(e.detail)}\n >\n <span slot=\"label\">\n {this.hasSlottedLabel && <slot name=\"label\"></slot>}\n {!this.hasSlottedLabel && this.label}\n <span class=\"label-aria\"> (HH:mm)</span>\n </span>\n <div slot=\"addon\" class=\"cat-time-addon\">\n {this.locale.timeFormat === '12' && (\n <cat-button\n class=\"cat-time-format\"\n disabled={this.disabled || this.readonly}\n onCatClick={() => this.toggleAm()}\n >\n {this.isAm ? 'AM' : 'PM'}\n </cat-button>\n )}\n <cat-dropdown slot=\"addon\" placement={this.placement}>\n <cat-button\n slot=\"trigger\"\n class=\"cat-time-toggle\"\n disabled={this.disabled || this.readonly}\n icon=\"$cat:timepicker-clock\"\n iconOnly\n a11yLabel={\n this.selectionTime ? `${this.locale.change}, ${this.format(this.selectionTime)}` : this.locale.choose\n }\n ></cat-button>\n <nav slot=\"content\" class=\"cat-nav\">\n <ul>\n {this.timeArray().map(time => {\n const isoTime = this.formatIso(time);\n const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);\n return (\n <li>\n <cat-button\n class={{\n 'cat-nav-item': true,\n 'time-disabled': disabled\n }}\n disabled={disabled}\n active={isoTime === this.value}\n color={isoTime === this.value ? 'primary' : 'secondary'}\n variant={isoTime === this.value ? 'filled' : 'outlined'}\n onCatClick={() => this.select(time)}\n data-time={isoTime}\n >\n {this.format(time)}\n </cat-button>\n </li>\n );\n })}\n </ul>\n </nav>\n </cat-dropdown>\n </div>\n {this.hasSlottedHint && (\n <span slot=\"hint\">\n <slot name=\"hint\"></slot>\n </span>\n )}\n </cat-input>\n </Host>\n );\n }\n\n private timeArray() {\n const result = [];\n const start = new Date(2000, 5, 1, 0, 0, 0);\n let time = new Date(start.getTime());\n while (time.getDate() === start.getDate()) {\n result.push(time);\n time = new Date(time.getTime() + this.step * 60000);\n }\n return result;\n }\n\n private syncValue(value: string) {\n const [, hh, mm] = value.match(/(\\d{2}):(\\d{2})/)?.map(Number) ?? [];\n if (hh === undefined || mm === undefined) {\n this.select(null);\n return;\n }\n this.select(\n this.locale.timeFormat === '24'\n ? new Date(2000, 5, 1, hh, mm, 0)\n : new Date(2000, 5, 1, (hh % 12) + (this.isAm ? 0 : 12), mm, 0)\n );\n }\n\n private toggleAm() {\n if (this.selectionTime) {\n this.select(new Date(this.selectionTime.getTime() + (this.isAm ? 12 : -12) * 3600000));\n } else {\n this.isAm = !this.isAm;\n }\n }\n\n private onInputBlur(e: FocusEvent) {\n this.syncValue(this.input?.value ?? '');\n this.catBlur.emit(e);\n }\n\n private format(date: Date | null, includeAmPm = true) {\n const str = date\n ? new Intl.DateTimeFormat(this.language, {\n hour: '2-digit',\n minute: '2-digit'\n }).format(date)\n : '';\n return includeAmPm ? str : str.replace(/\\s?(am|pm)/i, '');\n }\n\n private formatIso(date: Date) {\n return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;\n }\n}\n"]}
|
|
@@ -61,7 +61,7 @@ export class CatToggle {
|
|
|
61
61
|
this.input.blur();
|
|
62
62
|
}
|
|
63
63
|
render() {
|
|
64
|
-
return (h(Host, { key: '
|
|
64
|
+
return (h(Host, { key: '08337e6aece1d072c3c4540e4c5e97562a0c1f4c' }, h("label", { key: '79b0b9d2d136125ba7f15be32a3a34da73488a2f', htmlFor: this.id, class: { 'is-hidden': this.labelHidden, 'is-disabled': this.disabled, 'label-left': this.labelLeft } }, h("input", { key: '0c22754e817b0d6eab349583287c8d30f25f84ad', ...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, class: "form-check-input", role: "switch", 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: '7a08a4ec1fc79d18c16065697f672bf7f4e35908', class: "toggle" }), h("span", { key: 'b78eacbcb262452ba33972f2647dc69b01c1bd20', 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: "toggle-placeholder" }), h(CatFormHint, { id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }) })))));
|
|
65
65
|
}
|
|
66
66
|
get hasHint() {
|
|
67
67
|
return !!this.hint || !!this.hasSlottedHint;
|
|
@@ -2,6 +2,11 @@ import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/d
|
|
|
2
2
|
import { h, Host } from "@stencil/core";
|
|
3
3
|
import isTouchScreen from "../../utils/is-touch-screen";
|
|
4
4
|
let nextUniqueId = 0;
|
|
5
|
+
/**
|
|
6
|
+
* Tooltips display additional information when the user hovers over or
|
|
7
|
+
* interacts with a trigger element. The tooltip can be customized with
|
|
8
|
+
* different placements, sizes, and styles.
|
|
9
|
+
*/
|
|
5
10
|
export class CatTooltip {
|
|
6
11
|
constructor() {
|
|
7
12
|
this.id = `cat-tooltip-${nextUniqueId++}`;
|
|
@@ -59,12 +64,12 @@ export class CatTooltip {
|
|
|
59
64
|
}
|
|
60
65
|
}
|
|
61
66
|
render() {
|
|
62
|
-
return (h(Host, { key: '
|
|
67
|
+
return (h(Host, { key: '742d0c7f6203b8e685886f1c272562176b348fa9' }, h("slot", { key: '0e7bf66c6aadcf0b87fbbadf2d3e357ebb9b98c0' }), h("div", { key: '14eaa638d2f3170be57188d32841e22c98f1319b', ref: el => (this.tooltip = el), id: this.id, role: "tooltip", "aria-hidden": !this.open, "aria-live": this.open ? 'polite' : 'off', class: {
|
|
63
68
|
tooltip: true,
|
|
64
69
|
'tooltip-hidden': this.inactive,
|
|
65
70
|
'tooltip-round': this.round,
|
|
66
71
|
[`tooltip-${this.size}`]: Boolean(this.size)
|
|
67
|
-
} }, h("slot", { key: '
|
|
72
|
+
} }, h("slot", { key: '724fac6b27719c0cb9d243aab8ab4485fa72fc43', name: "content" }, h("p", { key: '2d6c325c46035725ac8c81330038888eefeb0c89' }, this.content)))));
|
|
68
73
|
}
|
|
69
74
|
async update() {
|
|
70
75
|
if (this.trigger && this.tooltip) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-tooltip.js","sourceRoot":"","sources":["../../../src/components/cat-tooltip/cat-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, shift } from '@floating-ui/dom';\nimport { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport isTouchScreen from '../../utils/is-touch-screen';\n\nlet nextUniqueId = 0;\n\n@Component({\n tag: 'cat-tooltip',\n styleUrl: 'cat-tooltip.scss',\n shadow: true\n})\nexport class CatTooltip {\n private static readonly OFFSET = 4;\n private static readonly SHIFT_PADDING = 4;\n private readonly id = `cat-tooltip-${nextUniqueId++}`;\n private tooltip?: HTMLElement;\n private trigger?: Element;\n private showTimeout?: number;\n private hideTimeout?: number;\n private touchTimeout?: number;\n private inactive = false;\n private cleanupFloatingUi?: () => void;\n\n private readonly boundShowListener: () => void;\n private readonly boundHideListener: () => void;\n private readonly boundWindowTouchStartListener: () => void;\n private readonly boundTouchStartListener: (event: Event) => void;\n private readonly boundTouchEndListener: () => void;\n\n constructor() {\n this.boundShowListener = this.showListener.bind(this);\n this.boundHideListener = this.hideListener.bind(this);\n this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);\n this.boundTouchStartListener = this.touchStartListener.bind(this);\n this.boundTouchEndListener = this.touchEndListener.bind(this);\n }\n\n @Element() hostElement!: HTMLElement;\n\n @State() open = false;\n\n /**\n * The content of the tooltip.\n */\n @Prop() content = '';\n\n /**\n * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n * and invisible. Corresponds with the native HTML disabled attribute.\n */\n @Prop() disabled = false;\n\n /**\n * The placement of the tooltip.\n */\n @Prop() placement: Placement = 'top';\n\n /**\n * Use round tooltip edges.\n */\n @Prop() round = false;\n\n /**\n * The size of the tooltip.\n */\n @Prop() size: 's' | 'm' | 'l' = 'm';\n\n /**\n * The delay time for showing tooltip in ms.\n */\n @Prop() showDelay = 250;\n\n /**\n * The delay time for hiding tooltip in ms.\n */\n @Prop() hideDelay = 0;\n\n /**\n * The duration of tap to show the tooltip.\n */\n @Prop() longTouchDuration = 1000;\n\n @Listen('keydown')\n handleKeyDown({ key }: KeyboardEvent) {\n key === 'Escape' && this.hideTooltip();\n }\n\n componentDidLoad(): void {\n const slot = this.hostElement.shadowRoot?.querySelector('slot');\n this.trigger = slot?.assignedElements?.()?.[0];\n if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {\n this.trigger.setAttribute('aria-describedby', this.id);\n }\n\n if (isTouchScreen) {\n window.addEventListener('touchstart', this.boundWindowTouchStartListener);\n this.trigger?.addEventListener('touchstart', this.boundTouchStartListener);\n this.trigger?.addEventListener('touchend', this.boundTouchEndListener);\n } else {\n this.trigger?.addEventListener('focusin', this.boundShowListener);\n this.trigger?.addEventListener('focusout', this.boundHideListener);\n this.trigger?.addEventListener('mouseenter', this.boundShowListener);\n this.trigger?.addEventListener('mouseleave', this.boundHideListener);\n }\n }\n\n componentWillRender(): void {\n this.inactive = this.disabled || (!this.content && !this.hostElement.querySelector('[slot=\"content\"]'));\n }\n\n disconnectedCallback(): void {\n if (isTouchScreen) {\n window.removeEventListener('touchstart', this.boundWindowTouchStartListener);\n this.trigger?.removeEventListener('touchstart', this.boundTouchStartListener);\n this.trigger?.removeEventListener('touchend', this.boundTouchEndListener);\n } else {\n this.trigger?.removeEventListener('mouseenter', this.boundShowListener);\n this.trigger?.removeEventListener('mouseleave', this.boundHideListener);\n this.trigger?.removeEventListener('focusin', this.boundShowListener);\n this.trigger?.removeEventListener('focusout', this.boundHideListener);\n }\n }\n\n render() {\n return (\n <Host>\n <slot />\n <div\n ref={el => (this.tooltip = el)}\n id={this.id}\n role=\"tooltip\"\n aria-hidden={!this.open}\n aria-live={this.open ? 'polite' : 'off'}\n class={{\n tooltip: true,\n 'tooltip-hidden': this.inactive,\n 'tooltip-round': this.round,\n [`tooltip-${this.size}`]: Boolean(this.size)\n }}\n >\n <slot name=\"content\">\n {/* The paragraph is needed here to make aria-live work properly. */}\n <p>{this.content}</p>\n </slot>\n </div>\n </Host>\n );\n }\n\n private async update() {\n if (this.trigger && this.tooltip) {\n await computePosition(this.trigger, this.tooltip, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [\n offset(CatTooltip.OFFSET),\n flip({ fallbackAxisSideDirection: 'start' }),\n shift({ padding: CatTooltip.SHIFT_PADDING })\n ]\n }).then(({ x, y }) => {\n if (this.tooltip) {\n Object.assign(this.tooltip.style, {\n left: `${Math.max(0, x)}px`,\n top: `${y}px`\n });\n }\n });\n }\n }\n\n private showListener() {\n window.clearTimeout(this.hideTimeout);\n this.hideTimeout = undefined;\n if (!this.showTimeout) {\n this.showTimeout = window.setTimeout(() => {\n this.showTimeout = undefined;\n this.showTooltip();\n }, this.showDelay);\n }\n }\n\n private hideListener() {\n window.clearTimeout(this.showTimeout);\n this.showTimeout = undefined;\n if (!this.hideTimeout) {\n this.hideTimeout = window.setTimeout(() => {\n this.hideTimeout = undefined;\n this.hideTooltip();\n }, this.hideDelay);\n }\n }\n\n private touchStartListener(event: Event) {\n event.stopPropagation();\n if (!this.touchTimeout) {\n this.touchTimeout = window.setTimeout(() => {\n this.touchTimeout = undefined;\n this.showTooltip();\n }, this.longTouchDuration);\n }\n }\n\n private touchEndListener() {\n window.clearTimeout(this.touchTimeout);\n this.touchTimeout = undefined;\n this.hideTooltip();\n }\n\n private windowTouchStartListener() {\n this.hideTooltip();\n }\n\n private showTooltip() {\n if (this.trigger && this.tooltip) {\n this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());\n }\n if (!this.inactive) {\n this.open = true;\n this.tooltip?.classList.add('tooltip-show');\n }\n }\n\n private hideTooltip() {\n this.open = false;\n this.tooltip?.classList.remove('tooltip-show');\n this.cleanupFloatingUi?.();\n this.cleanupFloatingUi = undefined;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cat-tooltip.js","sourceRoot":"","sources":["../../../src/components/cat-tooltip/cat-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,EAAa,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC/F,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjF,OAAO,aAAa,MAAM,6BAA6B,CAAC;AAExD,IAAI,YAAY,GAAG,CAAC,CAAC;AAErB;;;;GAIG;AAMH,MAAM,OAAO,UAAU;IAkBrB;QAfiB,OAAE,GAAG,eAAe,YAAY,EAAE,EAAE,CAAC;QAM9C,aAAQ,GAAG,KAAK,CAAC;oBAmBT,KAAK;uBAKH,EAAE;wBAMD,KAAK;yBAKO,KAAK;qBAKpB,KAAK;oBAKW,GAAG;yBAKf,GAAG;yBAKH,CAAC;iCAKO,IAAI;QAlD9B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtD,IAAI,CAAC,6BAA6B,GAAG,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9E,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC/D;IAgDD,aAAa,CAAC,EAAE,GAAG,EAAiB;QAClC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;IACzC,CAAC;IAED,gBAAgB;QACd,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QAChE,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;QAC/C,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,CAAC;YACnE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QACzD,CAAC;QAED,IAAI,aAAa,EAAE,CAAC;YAClB,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,6BAA6B,CAAC,CAAC;YAC1E,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;YAC3E,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;QACzE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YAClE,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACnE,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACrE,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAC1G,CAAC;IAED,oBAAoB;QAClB,IAAI,aAAa,EAAE,CAAC;YAClB,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,6BAA6B,CAAC,CAAC;YAC7E,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;YAC9E,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;QAC5E,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACxE,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACxE,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;YACrE,IAAI,CAAC,OAAO,EAAE,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACxE,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ;YACR,4DACE,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAC9B,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,SAAS,iBACD,CAAC,IAAI,CAAC,IAAI,eACZ,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EACvC,KAAK,EAAE;oBACL,OAAO,EAAE,IAAI;oBACb,gBAAgB,EAAE,IAAI,CAAC,QAAQ;oBAC/B,eAAe,EAAE,IAAI,CAAC,KAAK;oBAC3B,CAAC,WAAW,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;iBAC7C;gBAED,6DAAM,IAAI,EAAC,SAAS;oBAElB,4DAAI,IAAI,CAAC,OAAO,CAAK,CAChB,CACH,CACD,CACR,CAAC;IACJ,CAAC;IAEO,KAAK,CAAC,MAAM;QAClB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjC,MAAM,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;gBAChD,QAAQ,EAAE,OAAO;gBACjB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,UAAU,EAAE;oBACV,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC;oBACzB,IAAI,CAAC,EAAE,yBAAyB,EAAE,OAAO,EAAE,CAAC;oBAC5C,KAAK,CAAC,EAAE,OAAO,EAAE,UAAU,CAAC,aAAa,EAAE,CAAC;iBAC7C;aACF,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE;gBACnB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;oBACjB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;wBAChC,IAAI,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI;wBAC3B,GAAG,EAAE,GAAG,CAAC,IAAI;qBACd,CAAC,CAAC;gBACL,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACtC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC7B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACxC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;gBAC7B,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACrB,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACtC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;QAC7B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACxC,IAAI,CAAC,WAAW,GAAG,SAAS,CAAC;gBAC7B,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QACrB,CAAC;IACH,CAAC;IAEO,kBAAkB,CAAC,KAAY;QACrC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACzC,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;gBAC9B,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,CAAC,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC;IAEO,gBAAgB;QACtB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvC,IAAI,CAAC,YAAY,GAAG,SAAS,CAAC;QAC9B,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEO,wBAAwB;QAC9B,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjC,IAAI,CAAC,iBAAiB,GAAG,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;QACvF,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;QAC/C,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC;QAC3B,IAAI,CAAC,iBAAiB,GAAG,SAAS,CAAC;IACrC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAvNuB,iBAAM,GAAG,CAAC,AAAJ,CAAK;AACX,wBAAa,GAAG,CAAC,AAAJ,CAAK","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, shift } from '@floating-ui/dom';\nimport { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\nimport isTouchScreen from '../../utils/is-touch-screen';\n\nlet nextUniqueId = 0;\n\n/**\n * Tooltips display additional information when the user hovers over or\n * interacts with a trigger element. The tooltip can be customized with\n * different placements, sizes, and styles.\n */\n@Component({\n tag: 'cat-tooltip',\n styleUrl: 'cat-tooltip.scss',\n shadow: true\n})\nexport class CatTooltip {\n private static readonly OFFSET = 4;\n private static readonly SHIFT_PADDING = 4;\n private readonly id = `cat-tooltip-${nextUniqueId++}`;\n private tooltip?: HTMLElement;\n private trigger?: Element;\n private showTimeout?: number;\n private hideTimeout?: number;\n private touchTimeout?: number;\n private inactive = false;\n private cleanupFloatingUi?: () => void;\n\n private readonly boundShowListener: () => void;\n private readonly boundHideListener: () => void;\n private readonly boundWindowTouchStartListener: () => void;\n private readonly boundTouchStartListener: (event: Event) => void;\n private readonly boundTouchEndListener: () => void;\n\n constructor() {\n this.boundShowListener = this.showListener.bind(this);\n this.boundHideListener = this.hideListener.bind(this);\n this.boundWindowTouchStartListener = this.windowTouchStartListener.bind(this);\n this.boundTouchStartListener = this.touchStartListener.bind(this);\n this.boundTouchEndListener = this.touchEndListener.bind(this);\n }\n\n @Element() hostElement!: HTMLElement;\n\n @State() open = false;\n\n /**\n * The content of the tooltip.\n */\n @Prop() content = '';\n\n /**\n * Specifies that the tooltip should be disabled. A disabled tooltip is unusable,\n * and invisible. Corresponds with the native HTML disabled attribute.\n */\n @Prop() disabled = false;\n\n /**\n * The placement of the tooltip.\n */\n @Prop() placement: Placement = 'top';\n\n /**\n * Use round tooltip edges.\n */\n @Prop() round = false;\n\n /**\n * The size of the tooltip.\n */\n @Prop() size: 's' | 'm' | 'l' = 'm';\n\n /**\n * The delay time for showing tooltip in ms.\n */\n @Prop() showDelay = 250;\n\n /**\n * The delay time for hiding tooltip in ms.\n */\n @Prop() hideDelay = 0;\n\n /**\n * The duration of tap to show the tooltip.\n */\n @Prop() longTouchDuration = 1000;\n\n @Listen('keydown')\n handleKeyDown({ key }: KeyboardEvent) {\n key === 'Escape' && this.hideTooltip();\n }\n\n componentDidLoad(): void {\n const slot = this.hostElement.shadowRoot?.querySelector('slot');\n this.trigger = slot?.assignedElements?.()?.[0];\n if (this.trigger && !this.trigger.hasAttribute('aria-describedby')) {\n this.trigger.setAttribute('aria-describedby', this.id);\n }\n\n if (isTouchScreen) {\n window.addEventListener('touchstart', this.boundWindowTouchStartListener);\n this.trigger?.addEventListener('touchstart', this.boundTouchStartListener);\n this.trigger?.addEventListener('touchend', this.boundTouchEndListener);\n } else {\n this.trigger?.addEventListener('focusin', this.boundShowListener);\n this.trigger?.addEventListener('focusout', this.boundHideListener);\n this.trigger?.addEventListener('mouseenter', this.boundShowListener);\n this.trigger?.addEventListener('mouseleave', this.boundHideListener);\n }\n }\n\n componentWillRender(): void {\n this.inactive = this.disabled || (!this.content && !this.hostElement.querySelector('[slot=\"content\"]'));\n }\n\n disconnectedCallback(): void {\n if (isTouchScreen) {\n window.removeEventListener('touchstart', this.boundWindowTouchStartListener);\n this.trigger?.removeEventListener('touchstart', this.boundTouchStartListener);\n this.trigger?.removeEventListener('touchend', this.boundTouchEndListener);\n } else {\n this.trigger?.removeEventListener('mouseenter', this.boundShowListener);\n this.trigger?.removeEventListener('mouseleave', this.boundHideListener);\n this.trigger?.removeEventListener('focusin', this.boundShowListener);\n this.trigger?.removeEventListener('focusout', this.boundHideListener);\n }\n }\n\n render() {\n return (\n <Host>\n <slot />\n <div\n ref={el => (this.tooltip = el)}\n id={this.id}\n role=\"tooltip\"\n aria-hidden={!this.open}\n aria-live={this.open ? 'polite' : 'off'}\n class={{\n tooltip: true,\n 'tooltip-hidden': this.inactive,\n 'tooltip-round': this.round,\n [`tooltip-${this.size}`]: Boolean(this.size)\n }}\n >\n <slot name=\"content\">\n {/* The paragraph is needed here to make aria-live work properly. */}\n <p>{this.content}</p>\n </slot>\n </div>\n </Host>\n );\n }\n\n private async update() {\n if (this.trigger && this.tooltip) {\n await computePosition(this.trigger, this.tooltip, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [\n offset(CatTooltip.OFFSET),\n flip({ fallbackAxisSideDirection: 'start' }),\n shift({ padding: CatTooltip.SHIFT_PADDING })\n ]\n }).then(({ x, y }) => {\n if (this.tooltip) {\n Object.assign(this.tooltip.style, {\n left: `${Math.max(0, x)}px`,\n top: `${y}px`\n });\n }\n });\n }\n }\n\n private showListener() {\n window.clearTimeout(this.hideTimeout);\n this.hideTimeout = undefined;\n if (!this.showTimeout) {\n this.showTimeout = window.setTimeout(() => {\n this.showTimeout = undefined;\n this.showTooltip();\n }, this.showDelay);\n }\n }\n\n private hideListener() {\n window.clearTimeout(this.showTimeout);\n this.showTimeout = undefined;\n if (!this.hideTimeout) {\n this.hideTimeout = window.setTimeout(() => {\n this.hideTimeout = undefined;\n this.hideTooltip();\n }, this.hideDelay);\n }\n }\n\n private touchStartListener(event: Event) {\n event.stopPropagation();\n if (!this.touchTimeout) {\n this.touchTimeout = window.setTimeout(() => {\n this.touchTimeout = undefined;\n this.showTooltip();\n }, this.longTouchDuration);\n }\n }\n\n private touchEndListener() {\n window.clearTimeout(this.touchTimeout);\n this.touchTimeout = undefined;\n this.hideTooltip();\n }\n\n private windowTouchStartListener() {\n this.hideTooltip();\n }\n\n private showTooltip() {\n if (this.trigger && this.tooltip) {\n this.cleanupFloatingUi = autoUpdate(this.trigger, this.tooltip, () => this.update());\n }\n if (!this.inactive) {\n this.open = true;\n this.tooltip?.classList.add('tooltip-show');\n }\n }\n\n private hideTooltip() {\n this.open = false;\n this.tooltip?.classList.remove('tooltip-show');\n this.cleanupFloatingUi?.();\n this.cleanupFloatingUi = undefined;\n }\n}\n"]}
|
|
@@ -118,7 +118,7 @@ function createEmptyStyleRule(query) {
|
|
|
118
118
|
}
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
-
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}:host(.cat-time-format) .cat-button{border-radius:0}:host(.cat-date-toggle) .cat-button,:host(.cat-time-toggle) .cat-button{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-date-item) .cat-button:hover,:host(.cat-date-toggle) .cat-button:hover,:host(.cat-time-format) .cat-button:hover,:host(.cat-time-toggle) .cat-button:hover{z-index:1}:host(.cat-date-item) .cat-button:focus-visible,:host(.cat-date-toggle) .cat-button:focus-visible,:host(.cat-time-format) .cat-button:focus-visible,:host(.cat-time-toggle) .cat-button:focus-visible{z-index:2}:host(.cat-date-item) .cat-button{padding-left:0;padding-right:0}";
|
|
121
|
+
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}:host(.cat-time-format) .cat-button{border-radius:0}:host(.cat-date-toggle) .cat-button,:host(.cat-time-toggle) .cat-button{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}:host(.cat-date-item) .cat-button:hover,:host(.cat-date-toggle) .cat-button:hover,:host(.cat-time-format) .cat-button:hover,:host(.cat-time-toggle) .cat-button:hover{z-index:1}:host(.cat-date-item) .cat-button:focus-visible,:host(.cat-date-toggle) .cat-button:focus-visible,:host(.cat-time-format) .cat-button:focus-visible,:host(.cat-time-toggle) .cat-button:focus-visible{z-index:2}:host(.cat-date-item) .cat-button{padding:0;aspect-ratio:1}:host(.date-start:not(.date-end)) .cat-button{border-top-right-radius:0;border-bottom-right-radius:0}:host(.date-end:not(.date-start)) .cat-button{border-top-left-radius:0;border-bottom-left-radius:0}";
|
|
122
122
|
const CatButtonStyle0 = catButtonCss;
|
|
123
123
|
|
|
124
124
|
const CatButton = /*@__PURE__*/ proxyCustomElement(class CatButton extends HTMLElement {
|