@haiilo/catalyst 10.4.0 → 10.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/catalyst/catalyst.css +2 -2
- 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-2c8ac8cf.js +2 -0
- package/dist/catalyst/p-2c8ac8cf.js.map +1 -0
- package/dist/catalyst/p-b2ec6eb3.entry.js +10 -0
- package/dist/catalyst/p-b2ec6eb3.entry.js.map +1 -0
- package/dist/catalyst/scss/_variables.scss +0 -1
- package/dist/catalyst/scss/core/_form.scss +2 -2
- package/dist/cjs/{cat-alert_28.cjs.entry.js → cat-alert_29.cjs.entry.js} +387 -218
- 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-f2844da8.js} +12 -4
- package/dist/cjs/of-f2844da8.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-checkbox/cat-checkbox.css +2 -1
- package/dist/collection/components/cat-date/cat-date.css +2 -96
- package/dist/collection/components/cat-date/cat-date.js +77 -245
- 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 +29 -2
- 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.css +1 -1
- 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/cat-select.js +5 -5
- 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-locale.js +3 -0
- package/dist/collection/components/cat-time/cat-time-locale.js.map +1 -1
- package/dist/collection/components/cat-time/cat-time.js +39 -8
- package/dist/collection/components/cat-time/cat-time.js.map +1 -1
- package/dist/collection/components/cat-toggle/cat-toggle.css +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/collection/scss/_variables.scss +0 -1
- package/dist/collection/scss/core/_form.scss +2 -2
- package/dist/components/cat-button2.js +1 -1
- package/dist/components/cat-button2.js.map +1 -1
- package/dist/components/cat-checkbox2.js +1 -1
- package/dist/components/cat-checkbox2.js.map +1 -1
- package/dist/components/cat-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 +83 -283
- 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 +8 -2
- 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 +2 -2
- package/dist/components/cat-radio.js.map +1 -1
- package/dist/components/cat-scrollable2.js +8 -6
- package/dist/components/cat-scrollable2.js.map +1 -1
- package/dist/components/cat-select-demo.js +3 -3
- package/dist/components/cat-select-demo.js.map +1 -1
- package/dist/components/cat-select2.js.map +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 +37 -8
- package/dist/components/cat-time.js.map +1 -1
- package/dist/components/cat-toggle.js +2 -2
- package/dist/components/cat-toggle.js.map +1 -1
- package/dist/components/cat-tooltip.js +2 -2
- package/dist/components/cat-tooltip.js.map +1 -1
- package/dist/components/floating-ui.dom.esm.js +38 -30
- package/dist/components/floating-ui.dom.esm.js.map +1 -1
- package/dist/components/from.js +1 -1
- package/dist/components/from.js.map +1 -1
- package/dist/components/index.js +3 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/of.js.map +1 -1
- package/dist/esm/{cat-alert_28.entry.js → cat-alert_29.entry.js} +387 -219
- 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-53334b95.js} +12 -4
- package/dist/esm/of-53334b95.js.map +1 -0
- package/dist/types/components/cat-date/cat-date.d.ts +11 -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 +9 -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-locale.d.ts +1 -0
- package/dist/types/components/cat-time/cat-time.d.ts +6 -1
- package/dist/types/components/cat-tooltip/cat-tooltip.d.ts +5 -0
- package/dist/types/components.d.ts +209 -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 +0 -10
- 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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-notification.js","sourceRoot":"","sources":["../../../src/components/cat-notification/cat-notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import Toastify, { Options } from 'toastify-js';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\ninterface ToastRef {\n toast?: {\n showToast: () => void;\n hideToast: () => void;\n };\n}\n\nexport interface ToastOptions {\n /** The appearance mode of the notification. (Default: `dark`) */\n mode: 'dark' | 'light';\n /** An optional icon to appear in the notification. */\n icon: string;\n /** The placement of the notification on screen. (Default: `bottom-left`) */\n placement: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';\n /** Enables auto-closing of the notification. (Default: `true`) */\n autoClose: boolean;\n /** The duration in ms for the notification to be visible on screen. (Default: `3000`) */\n duration: number;\n /** An optional label for an action button. */\n action: string;\n /** Enable markup escape and sanitise HTML input. (Default: true) */\n escapeMarkup: boolean;\n /** Callback executed when the action button is clicked. Receives a reference to the notification as first argument. */\n onAction: (toast: ToastRef) => void;\n /** Callback executed when the notification is clicked. Receives a reference to the notification as first argument. */\n onClick: (toast: ToastRef) => void;\n /** Callback executed when the notification is dismissed. Receives a reference to the notification as first argument. */\n onDismiss: (toast: ToastRef) => void;\n}\n\nexport class CatNotificationService {\n private static instance: CatNotificationService;\n private static duration = 3000;\n\n private constructor() {\n // hide constructor\n }\n\n static getInstance(): CatNotificationService {\n if (!CatNotificationService.instance) {\n CatNotificationService.instance = new CatNotificationService();\n }\n return CatNotificationService.instance;\n }\n\n show(content: string | Node, options?: Partial<ToastOptions>): () => void {\n const ref: ToastRef = {};\n const toastContent = this.getNode(content, ref, options);\n const toastOptions = this.getOptions(toastContent, ref, options);\n const toast = Toastify(toastOptions);\n ref.toast = toast;\n toast.showToast();\n return () => toast.hideToast();\n }\n\n private getNode(content: string | Node, ref: ToastRef, options?: Partial<ToastOptions>): HTMLElement {\n const template = document.createElement('template');\n template.innerHTML = `<div class=\"cat-toastify-wrapper\">\n ${options?.icon ? `<cat-icon class=\"cat-toastify-icon\" icon=\"${options.icon}\" size=\"l\"></cat-icon>` : ''}\n <div class=\"cat-toastify-content\">\n <div class=\"cat-toastify-inner\"></div>\n ${\n options?.action\n ? `<cat-button class=\"cat-toastify-action cat-button-pull\" size=\"s\" variant=\"text\" color=\"primary\">${options.action}</cat-button>`\n : ''\n }\n </div>\n ${\n options?.autoClose === false\n ? `<cat-button class=\"cat-toastify-close cat-button-pull\" size=\"s\" icon=\"$cat:notification-close\" variant=\"text\" icon-only=\"true\" class=\"close\" a11y-label=\"${i18n.t(\n 'notification.dismiss'\n )}\"></cat-button>`\n : ''\n }\n </div>`;\n\n const node = template.content.firstElementChild as HTMLElement;\n node.querySelector('.cat-toastify-close')?.addEventListener('click', () => ref.toast?.hideToast());\n node.querySelector('.cat-toastify-action')?.addEventListener('click', () => options?.onAction?.(ref));\n const inner = node.querySelector<HTMLDivElement>('.cat-toastify-inner');\n if (inner) {\n if (typeof content !== 'string') {\n inner.replaceChildren(content);\n } else if (options?.escapeMarkup === false) {\n inner.innerHTML = content;\n } else {\n inner.innerText = content;\n }\n }\n\n return node;\n }\n\n private getOptions(node: Node, ref: ToastRef, options?: Partial<ToastOptions>): Options {\n const [gravity, position] = (options?.placement?.split('-') ?? ['bottom', 'left']) as [\n Options['gravity'],\n Options['position']\n ];\n const duration = options?.duration ?? (options?.autoClose === false ? -1 : CatNotificationService.duration);\n return {\n gravity,\n position,\n node,\n duration,\n close: false,\n className: options?.mode === 'light' ? 'cat-toastify' : 'cat-toastify cat-toastify-dark',\n stopOnFocus: true,\n onClick: () => options?.onClick?.(ref),\n callback: () => options?.onDismiss?.(ref),\n offset: {\n x: '1rem',\n y: '1rem'\n }\n };\n }\n}\n\nexport const catNotificationService = CatNotificationService.getInstance();\n"]}
|
|
1
|
+
{"version":3,"file":"cat-notification.js","sourceRoot":"","sources":["../../../src/components/cat-notification/cat-notification.tsx"],"names":[],"mappings":"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","sourcesContent":["import Toastify, { Options } from 'toastify-js';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\ninterface ToastRef {\n toast?: {\n showToast: () => void;\n hideToast: () => void;\n };\n}\n\nexport interface ToastOptions {\n /** The appearance mode of the notification. (Default: `dark`) */\n mode: 'dark' | 'light';\n /** An optional icon to appear in the notification. */\n icon: string;\n /** The placement of the notification on screen. (Default: `bottom-left`) */\n placement: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';\n /** Enables auto-closing of the notification. (Default: `true`) */\n autoClose: boolean;\n /** The duration in ms for the notification to be visible on screen. (Default: `3000`) */\n duration: number;\n /** An optional label for an action button. */\n action: string;\n /** Enable markup escape and sanitise HTML input. (Default: true) */\n escapeMarkup: boolean;\n /** Callback executed when the action button is clicked. Receives a reference to the notification as first argument. */\n onAction: (toast: ToastRef) => void;\n /** Callback executed when the notification is clicked. Receives a reference to the notification as first argument. */\n onClick: (toast: ToastRef) => void;\n /** Callback executed when the notification is dismissed. Receives a reference to the notification as first argument. */\n onDismiss: (toast: ToastRef) => void;\n}\n\n/**\n * A service to show additional information via toast notifications.\n */\nexport class CatNotificationService {\n private static instance: CatNotificationService;\n private static duration = 3000;\n\n private constructor() {\n // hide constructor\n }\n\n static getInstance(): CatNotificationService {\n if (!CatNotificationService.instance) {\n CatNotificationService.instance = new CatNotificationService();\n }\n return CatNotificationService.instance;\n }\n\n show(content: string | Node, options?: Partial<ToastOptions>): () => void {\n const ref: ToastRef = {};\n const toastContent = this.getNode(content, ref, options);\n const toastOptions = this.getOptions(toastContent, ref, options);\n const toast = Toastify(toastOptions);\n ref.toast = toast;\n toast.showToast();\n return () => toast.hideToast();\n }\n\n private getNode(content: string | Node, ref: ToastRef, options?: Partial<ToastOptions>): HTMLElement {\n const template = document.createElement('template');\n template.innerHTML = `<div class=\"cat-toastify-wrapper\">\n ${options?.icon ? `<cat-icon class=\"cat-toastify-icon\" icon=\"${options.icon}\" size=\"l\"></cat-icon>` : ''}\n <div class=\"cat-toastify-content\">\n <div class=\"cat-toastify-inner\"></div>\n ${\n options?.action\n ? `<cat-button class=\"cat-toastify-action cat-button-pull\" size=\"s\" variant=\"text\" color=\"primary\">${options.action}</cat-button>`\n : ''\n }\n </div>\n ${\n options?.autoClose === false\n ? `<cat-button class=\"cat-toastify-close cat-button-pull\" size=\"s\" icon=\"$cat:notification-close\" variant=\"text\" icon-only=\"true\" class=\"close\" a11y-label=\"${i18n.t(\n 'notification.dismiss'\n )}\"></cat-button>`\n : ''\n }\n </div>`;\n\n const node = template.content.firstElementChild as HTMLElement;\n node.querySelector('.cat-toastify-close')?.addEventListener('click', () => ref.toast?.hideToast());\n node.querySelector('.cat-toastify-action')?.addEventListener('click', () => options?.onAction?.(ref));\n const inner = node.querySelector<HTMLDivElement>('.cat-toastify-inner');\n if (inner) {\n if (typeof content !== 'string') {\n inner.replaceChildren(content);\n } else if (options?.escapeMarkup === false) {\n inner.innerHTML = content;\n } else {\n inner.innerText = content;\n }\n }\n\n return node;\n }\n\n private getOptions(node: Node, ref: ToastRef, options?: Partial<ToastOptions>): Options {\n const [gravity, position] = (options?.placement?.split('-') ?? ['bottom', 'left']) as [\n Options['gravity'],\n Options['position']\n ];\n const duration = options?.duration ?? (options?.autoClose === false ? -1 : CatNotificationService.duration);\n return {\n gravity,\n position,\n node,\n duration,\n close: false,\n className: options?.mode === 'light' ? 'cat-toastify' : 'cat-toastify cat-toastify-dark',\n stopOnFocus: true,\n onClick: () => options?.onClick?.(ref),\n callback: () => options?.onDismiss?.(ref),\n offset: {\n x: '1rem',\n y: '1rem'\n }\n };\n }\n}\n\nexport const catNotificationService = CatNotificationService.getInstance();\n"]}
|
|
@@ -21,9 +21,9 @@ export class CatPagination {
|
|
|
21
21
|
this.iconNext = '$cat:pagination-right';
|
|
22
22
|
}
|
|
23
23
|
render() {
|
|
24
|
-
return (h("nav", { key: '
|
|
24
|
+
return (h("nav", { key: 'ede4b30a483fb729428b8d2bfdd4d67b1b5f1022', role: "navigation" }, h("ol", { key: '04fd80b91e33c55a23d010e5fa108b10a08e2bdb', class: {
|
|
25
25
|
[`cat-pagination-${this.size}`]: Boolean(this.size)
|
|
26
|
-
} }, h("li", { key: '
|
|
26
|
+
} }, h("li", { key: 'cd98373b4a9a69b25e9df8185b808561336c9a75' }, h("cat-button", { key: 'ec601998cd4ba8a2007e1f1dcecad86f36633095', variant: this.variant, size: this.size, round: this.round, disabled: this.isFirst, a11yLabel: i18n.t('pagination.prev'), icon: this.iconPrev, iconOnly: true, onClick: () => this.setPage(this.page - 1) })), this.content, h("li", { key: '8ff7654e0087ece5cb4f81205083ea8f13af7112' }, h("cat-button", { key: '3ca4cf8fa48d650472e20efc09cbed49b55d33bf', variant: this.variant, size: this.size, round: this.round, disabled: this.isLast, a11yLabel: i18n.t('pagination.next'), icon: this.iconNext, iconOnly: true, onClick: () => this.setPage(this.page + 1) })))));
|
|
27
27
|
}
|
|
28
28
|
get isFirst() {
|
|
29
29
|
return this.page === 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) {
|
|
@@ -795,12 +795,12 @@ export class CatSelect {
|
|
|
795
795
|
"references": {
|
|
796
796
|
"CatSelectTaggingValue": {
|
|
797
797
|
"location": "local",
|
|
798
|
-
"path": "/
|
|
798
|
+
"path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
|
|
799
799
|
"id": "src/components/cat-select/cat-select.tsx::CatSelectTaggingValue"
|
|
800
800
|
},
|
|
801
801
|
"CatSelectMultipleTaggingValue": {
|
|
802
802
|
"location": "local",
|
|
803
|
-
"path": "/
|
|
803
|
+
"path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
|
|
804
804
|
"id": "src/components/cat-select/cat-select.tsx::CatSelectMultipleTaggingValue"
|
|
805
805
|
}
|
|
806
806
|
}
|
|
@@ -1253,17 +1253,17 @@ export class CatSelect {
|
|
|
1253
1253
|
},
|
|
1254
1254
|
"CatSelectConnector": {
|
|
1255
1255
|
"location": "local",
|
|
1256
|
-
"path": "/
|
|
1256
|
+
"path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
|
|
1257
1257
|
"id": "src/components/cat-select/cat-select.tsx::CatSelectConnector"
|
|
1258
1258
|
},
|
|
1259
1259
|
"Observable": {
|
|
1260
1260
|
"location": "import",
|
|
1261
1261
|
"path": "rxjs",
|
|
1262
|
-
"id": "../node_modules/.pnpm/rxjs@7.
|
|
1262
|
+
"id": "../node_modules/.pnpm/rxjs@7.8.1/node_modules/rxjs/dist/types/index.d.ts::Observable"
|
|
1263
1263
|
},
|
|
1264
1264
|
"Item": {
|
|
1265
1265
|
"location": "local",
|
|
1266
|
-
"path": "/
|
|
1266
|
+
"path": "/home/runner/work/catalyst/catalyst/core/src/components/cat-select/cat-select.tsx",
|
|
1267
1267
|
"id": "src/components/cat-select/cat-select.tsx::Item"
|
|
1268
1268
|
}
|
|
1269
1269
|
},
|
|
@@ -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;
|
|
@@ -12,4 +12,7 @@ export function getLocale(language) {
|
|
|
12
12
|
timeFormat: getHour12(language) ? '12' : '24'
|
|
13
13
|
};
|
|
14
14
|
}
|
|
15
|
+
export function formatIso(date) {
|
|
16
|
+
return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
|
|
17
|
+
}
|
|
15
18
|
//# sourceMappingURL=cat-time-locale.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-time-locale.js","sourceRoot":"","sources":["../../../src/components/cat-time/cat-time-locale.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAExE,MAAM,UAAU,SAAS,CAAC,QAAgB;IACxC,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;SACtF,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;SAClB,WAAW,EAAE,CAAC;IACjB,OAAO,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC1D,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,QAAgB;IACxC,OAAO;QACL,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC;QACnC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC;QACnC,UAAU,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;KAC9C,CAAC;AACJ,CAAC","sourcesContent":["import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\nexport function getHour12(language: string): boolean {\n const dateStr = new Intl.DateTimeFormat(language, { hour: '2-digit', minute: '2-digit' })\n .format(new Date())\n .toLowerCase();\n return dateStr.includes('am') || dateStr.includes('pm');\n}\n\nexport function getLocale(language: string) {\n return {\n change: i18n.t('timepicker.change'),\n choose: i18n.t('timepicker.choose'),\n timeFormat: getHour12(language) ? '12' : '24'\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cat-time-locale.js","sourceRoot":"","sources":["../../../src/components/cat-time/cat-time-locale.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAExE,MAAM,UAAU,SAAS,CAAC,QAAgB;IACxC,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;SACtF,MAAM,CAAC,IAAI,IAAI,EAAE,CAAC;SAClB,WAAW,EAAE,CAAC;IACjB,OAAO,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AAC1D,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,QAAgB;IACxC,OAAO;QACL,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC;QACnC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,mBAAmB,CAAC;QACnC,UAAU,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI;KAC9C,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,IAAU;IAClC,OAAO,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;AAC3G,CAAC","sourcesContent":["import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\nexport function getHour12(language: string): boolean {\n const dateStr = new Intl.DateTimeFormat(language, { hour: '2-digit', minute: '2-digit' })\n .format(new Date())\n .toLowerCase();\n return dateStr.includes('am') || dateStr.includes('pm');\n}\n\nexport function getLocale(language: string) {\n return {\n change: i18n.t('timepicker.change'),\n choose: i18n.t('timepicker.choose'),\n timeFormat: getHour12(language) ? '12' : '24'\n };\n}\n\nexport function formatIso(date: Date) {\n return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;\n}\n"]}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
import { catI18nRegistry as i18n } from "../cat-i18n/cat-i18n-registry";
|
|
3
|
-
import { getLocale } from "./cat-time-locale";
|
|
3
|
+
import { formatIso, 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();
|
|
@@ -36,6 +39,16 @@ export class CatTime {
|
|
|
36
39
|
this.placement = 'bottom-end';
|
|
37
40
|
this.step = 30;
|
|
38
41
|
}
|
|
42
|
+
onMinChanged(min, oldMin) {
|
|
43
|
+
if (min !== oldMin) {
|
|
44
|
+
this.reclamp('min', min);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
onMaxChanged(max, oldMax) {
|
|
48
|
+
if (max !== oldMax) {
|
|
49
|
+
this.reclamp('max', max);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
39
52
|
componentWillLoad() {
|
|
40
53
|
this.syncValue(this.value ?? '');
|
|
41
54
|
}
|
|
@@ -53,9 +66,9 @@ export class CatTime {
|
|
|
53
66
|
onOpen() {
|
|
54
67
|
const query = (selector) => this.hostElement.shadowRoot?.querySelector(selector);
|
|
55
68
|
const time = clampTime(this.min ?? null, this.selectionTime ?? new Date(2000, 5, 1, 8), this.max ?? null);
|
|
56
|
-
const elem1 = query(`[data-time="${
|
|
69
|
+
const elem1 = query(`[data-time="${formatIso(time)}"]`);
|
|
57
70
|
time.setMinutes(Math.floor(time.getMinutes() / this.step) * this.step);
|
|
58
|
-
const elem2 = query(`[data-time="${
|
|
71
|
+
const elem2 = query(`[data-time="${formatIso(time)}"]`);
|
|
59
72
|
setTimeout(() => {
|
|
60
73
|
(elem2 ?? elem1)?.doFocus();
|
|
61
74
|
(elem2 ?? elem1)?.scrollIntoView(this.selectionTime ? { block: 'center' } : undefined);
|
|
@@ -76,7 +89,7 @@ export class CatTime {
|
|
|
76
89
|
const time = clampTime(this.min ?? null, date, this.max ?? null);
|
|
77
90
|
this.isAm = this.format(time).toLowerCase().includes('am');
|
|
78
91
|
this.selectionTime = time;
|
|
79
|
-
this.value =
|
|
92
|
+
this.value = formatIso(time);
|
|
80
93
|
}
|
|
81
94
|
// we need to set the input explicitly to sync the input even without a
|
|
82
95
|
// rerender (if the value is not changed)
|
|
@@ -111,8 +124,8 @@ export class CatTime {
|
|
|
111
124
|
this.input?.clear();
|
|
112
125
|
}
|
|
113
126
|
render() {
|
|
114
|
-
return (h(Host, { key: '
|
|
115
|
-
const isoTime =
|
|
127
|
+
return (h(Host, { key: 'c7ebe7c00d372720ce9c34907438f47150df0820' }, h("cat-input", { key: 'e83d9bddbdff4d1e0c97531f3684618e0f4251a8', 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: '504e24bcf7d7fa3e0eddb7df91261778e720cc87', slot: "label" }, this.hasSlottedLabel && h("slot", { name: "label" }), !this.hasSlottedLabel && this.label, h("span", { key: 'c617e13394f44bd851beae13e809f791a56dfa42', class: "label-aria" }, " (HH:mm)")), h("div", { key: '601bd57b6137a44901a3d32ce10f881aae67a2a8', 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: 'ecdd2fb5987eb30890c9258ece4bd1e176b2d6c6', slot: "addon", placement: this.placement }, h("cat-button", { key: 'a38158d199940ff276b5263833c39cdbea04d194', 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: 'e2e77112f74467cc2db37d24f38165389888978a', slot: "content", class: "cat-nav" }, h("ul", { key: 'c005ac2b43037f3e5953117e968a967ce60be477' }, this.timeArray().map(time => {
|
|
128
|
+
const isoTime = formatIso(time);
|
|
116
129
|
const disabled = isBefore(time, this.min ?? null) || isAfter(time, this.max ?? null);
|
|
117
130
|
return (h("li", null, h("cat-button", { class: {
|
|
118
131
|
'cat-nav-item': true,
|
|
@@ -161,8 +174,17 @@ export class CatTime {
|
|
|
161
174
|
: '';
|
|
162
175
|
return includeAmPm ? str : str.replace(/\s?(am|pm)/i, '');
|
|
163
176
|
}
|
|
164
|
-
|
|
165
|
-
|
|
177
|
+
reclamp(mode, limit) {
|
|
178
|
+
if (!this.value)
|
|
179
|
+
return;
|
|
180
|
+
const min = (mode === 'min' ? limit : this.min) ?? null;
|
|
181
|
+
const max = (mode === 'max' ? limit : this.max) ?? null;
|
|
182
|
+
const [match, hh, mm] = this.value.match(/(\d{2}):(\d{2})/) ?? [];
|
|
183
|
+
const newValue = match ? formatIso(clampTime(min, new Date(2000, 5, 1, Number(hh), Number(mm)), max)) : undefined;
|
|
184
|
+
if (this.value !== newValue) {
|
|
185
|
+
this.syncValue(newValue ?? '');
|
|
186
|
+
this.catChange.emit(newValue);
|
|
187
|
+
}
|
|
166
188
|
}
|
|
167
189
|
static get is() { return "cat-time"; }
|
|
168
190
|
static get encapsulation() { return "shadow"; }
|
|
@@ -788,6 +810,15 @@ export class CatTime {
|
|
|
788
810
|
};
|
|
789
811
|
}
|
|
790
812
|
static get elementRef() { return "hostElement"; }
|
|
813
|
+
static get watchers() {
|
|
814
|
+
return [{
|
|
815
|
+
"propName": "min",
|
|
816
|
+
"methodName": "onMinChanged"
|
|
817
|
+
}, {
|
|
818
|
+
"propName": "max",
|
|
819
|
+
"methodName": "onMaxChanged"
|
|
820
|
+
}];
|
|
821
|
+
}
|
|
791
822
|
static get listeners() {
|
|
792
823
|
return [{
|
|
793
824
|
"name": "catOpen",
|
|
@@ -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, Watch, h } from '@stencil/core';\nimport { ErrorMap } from '../cat-form-hint/cat-form-hint';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\nimport { formatIso, 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 @Watch('min')\n onMinChanged(min?: string, oldMin?: string) {\n if (min !== oldMin) {\n this.reclamp('min', min);\n }\n }\n\n @Watch('max')\n onMaxChanged(max?: string, oldMax?: string) {\n if (max !== oldMax) {\n this.reclamp('max', max);\n }\n }\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=\"${formatIso(time)}\"]`);\n time.setMinutes(Math.floor(time.getMinutes() / this.step) * this.step);\n const elem2 = query(`[data-time=\"${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 = 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 = 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 reclamp(mode: 'min' | 'max', limit: string | undefined) {\n if (!this.value) return;\n const min = (mode === 'min' ? limit : this.min) ?? null;\n const max = (mode === 'max' ? limit : this.max) ?? null;\n const [match, hh, mm] = this.value.match(/(\\d{2}):(\\d{2})/) ?? [];\n const newValue = match ? formatIso(clampTime(min, new Date(2000, 5, 1, Number(hh), Number(mm)), max)) : undefined;\n if (this.value !== newValue) {\n this.syncValue(newValue ?? '');\n this.catChange.emit(newValue);\n }\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) {
|