@haiilo/catalyst 5.4.0 → 6.0.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 +1071 -0
- package/dist/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/catalyst.esm.js.map +1 -1
- package/dist/catalyst/index.cdn.js +6 -0
- package/dist/catalyst/index.esm.js +2 -2
- package/dist/catalyst/index.esm.js.map +1 -1
- package/dist/catalyst/p-ad5fca6b.entry.js +10 -0
- package/dist/catalyst/p-ad5fca6b.entry.js.map +1 -0
- package/dist/catalyst/p-d7dc291a.js +2 -0
- package/dist/catalyst/p-d7dc291a.js.map +1 -0
- package/dist/catalyst/scss/index.scss +2 -0
- package/dist/catalyst/scss/vendor/_flatpickr.scss +314 -0
- package/dist/cjs/{cat-alert_27.cjs.entry.js → cat-alert_25.cjs.entry.js} +2922 -3480
- package/dist/cjs/cat-alert_25.cjs.entry.js.map +1 -0
- package/dist/cjs/{cat-icon-registry-228164a1.js → cat-icon-registry-6161e2ee.js} +14 -2
- package/dist/cjs/cat-icon-registry-6161e2ee.js.map +1 -0
- package/dist/cjs/catalyst.cjs.js +1 -1
- package/dist/cjs/index.cjs.js +12 -14
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +0 -2
- package/dist/collection/components/cat-avatar/cat-avatar.js +5 -5
- package/dist/collection/components/cat-avatar/cat-avatar.js.map +1 -1
- package/dist/collection/components/cat-button/cat-button.js +5 -7
- package/dist/collection/components/cat-button/cat-button.js.map +1 -1
- package/dist/collection/components/cat-checkbox/cat-checkbox.js +39 -42
- package/dist/collection/components/cat-checkbox/cat-checkbox.js.map +1 -1
- package/dist/collection/components/cat-datepicker/cat-datepicker.config.js +22 -0
- package/dist/collection/components/cat-datepicker/cat-datepicker.config.js.map +1 -0
- package/dist/collection/components/cat-datepicker/cat-datepicker.css +6 -369
- package/dist/collection/components/cat-datepicker/cat-datepicker.js +110 -314
- package/dist/collection/components/cat-datepicker/cat-datepicker.js.map +1 -1
- package/dist/collection/components/cat-datepicker/cat-datepicker.locale.js +51 -0
- package/dist/collection/components/cat-datepicker/cat-datepicker.locale.js.map +1 -0
- package/dist/collection/components/cat-dropdown/cat-dropdown.js +6 -9
- package/dist/collection/components/cat-dropdown/cat-dropdown.js.map +1 -1
- package/dist/collection/components/cat-form-group/cat-form-group.js +4 -5
- package/dist/collection/components/cat-form-group/cat-form-group.js.map +1 -1
- package/dist/collection/components/cat-form-hint/cat-form-hint.js +2 -6
- package/dist/collection/components/cat-form-hint/cat-form-hint.js.map +1 -1
- package/dist/collection/components/cat-i18n/cat-i18n-registry.js +13 -1
- package/dist/collection/components/cat-i18n/cat-i18n-registry.js.map +1 -1
- package/dist/collection/components/cat-input/cat-input.css +0 -377
- package/dist/collection/components/cat-input/cat-input.js +14 -40
- package/dist/collection/components/cat-input/cat-input.js.map +1 -1
- package/dist/collection/components/cat-input/input-type.js.map +1 -1
- package/dist/collection/components/cat-notification/cat-notification.js +11 -13
- 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-pagination/cat-pagination.js.map +1 -1
- package/dist/collection/components/cat-radio/cat-radio.js +11 -36
- package/dist/collection/components/cat-radio/cat-radio.js.map +1 -1
- package/dist/collection/components/cat-radio-group/cat-radio-group.js +37 -11
- package/dist/collection/components/cat-radio-group/cat-radio-group.js.map +1 -1
- package/dist/collection/components/cat-scrollable/cat-scrollable.js +2 -3
- package/dist/collection/components/cat-scrollable/cat-scrollable.js.map +1 -1
- package/dist/collection/components/cat-select/cat-select.js +42 -53
- package/dist/collection/components/cat-select/cat-select.js.map +1 -1
- package/dist/collection/components/cat-select-demo/cat-select-demo.js +21 -25
- package/dist/collection/components/cat-select-demo/cat-select-demo.js.map +1 -1
- package/dist/collection/components/cat-tabs/cat-tabs.js +4 -7
- package/dist/collection/components/cat-tabs/cat-tabs.js.map +1 -1
- package/dist/collection/components/cat-textarea/cat-textarea.js +17 -21
- package/dist/collection/components/cat-textarea/cat-textarea.js.map +1 -1
- package/dist/collection/components/cat-toggle/cat-toggle.js +38 -41
- package/dist/collection/components/cat-toggle/cat-toggle.js.map +1 -1
- package/dist/collection/components/cat-tooltip/cat-tooltip.js +17 -22
- package/dist/collection/components/cat-tooltip/cat-tooltip.js.map +1 -1
- package/dist/collection/index.cdn.js +6 -0
- package/dist/collection/scss/index.scss +2 -0
- package/dist/collection/scss/vendor/_flatpickr.scss +314 -0
- package/dist/collection/utils/platform.js +1 -1
- package/dist/collection/utils/platform.js.map +1 -1
- package/dist/components/cat-avatar2.js +5 -5
- package/dist/components/cat-avatar2.js.map +1 -1
- package/dist/components/cat-button2.js +6 -8
- package/dist/components/cat-button2.js.map +1 -1
- package/dist/components/cat-checkbox2.js +14 -15
- package/dist/components/cat-checkbox2.js.map +1 -1
- package/dist/components/cat-datepicker.js +2725 -3028
- package/dist/components/cat-datepicker.js.map +1 -1
- package/dist/components/cat-dropdown2.js +6 -9
- package/dist/components/cat-dropdown2.js.map +1 -1
- package/dist/components/cat-form-group.js +4 -5
- package/dist/components/cat-form-group.js.map +1 -1
- package/dist/components/cat-form-hint.js +2 -6
- package/dist/components/cat-form-hint.js.map +1 -1
- package/dist/components/cat-i18n-registry.js +13 -1
- package/dist/components/cat-i18n-registry.js.map +1 -1
- package/dist/components/cat-input2.js +9 -16
- package/dist/components/cat-input2.js.map +1 -1
- package/dist/components/cat-pagination.js.map +1 -1
- package/dist/components/cat-radio-group.js +15 -9
- package/dist/components/cat-radio-group.js.map +1 -1
- package/dist/components/cat-radio.js +5 -12
- package/dist/components/cat-radio.js.map +1 -1
- package/dist/components/cat-scrollable2.js +2 -3
- package/dist/components/cat-scrollable2.js.map +1 -1
- package/dist/components/cat-select-demo.js +21 -25
- package/dist/components/cat-select-demo.js.map +1 -1
- package/dist/components/cat-select2.js +42 -53
- package/dist/components/cat-select2.js.map +1 -1
- package/dist/components/cat-tabs.js +4 -7
- package/dist/components/cat-tabs.js.map +1 -1
- package/dist/components/cat-textarea.js +11 -11
- package/dist/components/cat-textarea.js.map +1 -1
- package/dist/components/cat-toggle.js +14 -15
- package/dist/components/cat-toggle.js.map +1 -1
- package/dist/components/cat-tooltip.js +17 -22
- package/dist/components/cat-tooltip.js.map +1 -1
- package/dist/components/floating-ui.dom.esm.js +55 -68
- package/dist/components/floating-ui.dom.esm.js.map +1 -1
- package/dist/components/index.js +11 -13
- package/dist/components/index.js.map +1 -1
- package/dist/esm/{cat-alert_27.entry.js → cat-alert_25.entry.js} +2922 -3478
- package/dist/esm/cat-alert_25.entry.js.map +1 -0
- package/dist/esm/{cat-icon-registry-4bd597f4.js → cat-icon-registry-f15b29d9.js} +14 -2
- package/dist/esm/cat-icon-registry-f15b29d9.js.map +1 -0
- package/dist/esm/catalyst.js +1 -1
- package/dist/esm/index.js +13 -15
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/@types/Intl.d.ts +3 -0
- package/dist/types/components/cat-checkbox/cat-checkbox.d.ts +11 -9
- package/dist/types/components/cat-datepicker/cat-datepicker.config.d.ts +1 -0
- package/dist/types/components/cat-datepicker/cat-datepicker.d.ts +21 -65
- package/dist/types/components/cat-datepicker/cat-datepicker.locale.d.ts +3 -0
- package/dist/types/components/cat-i18n/cat-i18n-registry.d.ts +3 -0
- package/dist/types/components/cat-input/cat-input.d.ts +2 -6
- package/dist/types/components/cat-input/input-type.d.ts +1 -1
- package/dist/types/components/cat-pagination/cat-pagination.d.ts +1 -1
- package/dist/types/components/cat-radio/cat-radio.d.ts +3 -7
- package/dist/types/components/cat-radio-group/cat-radio-group.d.ts +6 -1
- package/dist/types/components/cat-textarea/cat-textarea.d.ts +4 -4
- package/dist/types/components/cat-toggle/cat-toggle.d.ts +10 -8
- package/dist/types/components.d.ts +83 -417
- package/package.json +8 -10
- package/dist/catalyst/p-34e0cbba.entry.js +0 -10
- package/dist/catalyst/p-34e0cbba.entry.js.map +0 -1
- package/dist/catalyst/p-cf32399c.js +0 -2
- package/dist/catalyst/p-cf32399c.js.map +0 -1
- package/dist/cjs/cat-alert_27.cjs.entry.js.map +0 -1
- package/dist/cjs/cat-icon-registry-228164a1.js.map +0 -1
- package/dist/collection/components/cat-datepicker/datepicker-type.js +0 -8
- package/dist/collection/components/cat-datepicker/datepicker-type.js.map +0 -1
- package/dist/collection/components/cat-datepicker/dayjs.config.js +0 -8
- package/dist/collection/components/cat-datepicker/dayjs.config.js.map +0 -1
- package/dist/collection/components/cat-datepicker/vanillajs-datepicker.config.js +0 -46
- package/dist/collection/components/cat-datepicker/vanillajs-datepicker.config.js.map +0 -1
- package/dist/collection/components/cat-label/cat-label.css +0 -22
- package/dist/collection/components/cat-label/cat-label.js +0 -134
- package/dist/collection/components/cat-label/cat-label.js.map +0 -1
- package/dist/collection/components/cat-timepicker/cat-timepicker.css +0 -5
- package/dist/collection/components/cat-timepicker/cat-timepicker.js +0 -668
- package/dist/collection/components/cat-timepicker/cat-timepicker.js.map +0 -1
- package/dist/components/cat-label.d.ts +0 -11
- package/dist/components/cat-label.js +0 -73
- package/dist/components/cat-label.js.map +0 -1
- package/dist/components/cat-timepicker.d.ts +0 -11
- package/dist/components/cat-timepicker.js +0 -258
- package/dist/components/cat-timepicker.js.map +0 -1
- package/dist/esm/cat-alert_27.entry.js.map +0 -1
- package/dist/esm/cat-icon-registry-4bd597f4.js.map +0 -1
- package/dist/types/components/cat-datepicker/datepicker-type.d.ts +0 -7
- package/dist/types/components/cat-datepicker/datepicker.d.ts +0 -1
- package/dist/types/components/cat-datepicker/dayjs.config.d.ts +0 -3
- package/dist/types/components/cat-datepicker/vanillajs-datepicker.config.d.ts +0 -4
- package/dist/types/components/cat-label/cat-label.d.ts +0 -27
- package/dist/types/components/cat-timepicker/cat-timepicker.d.ts +0 -158
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
|
|
2
|
+
export function getHour12(language) {
|
|
3
|
+
const dateStr = new Intl.DateTimeFormat(language, { hour: '2-digit', minute: '2-digit' })
|
|
4
|
+
.format(new Date())
|
|
5
|
+
.toLowerCase();
|
|
6
|
+
return dateStr.includes('am') || dateStr.includes('pm');
|
|
7
|
+
}
|
|
8
|
+
function getFirstDayOfWeek(language) {
|
|
9
|
+
const locale = new Intl.Locale(language);
|
|
10
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
11
|
+
const weekInfo = locale.getWeekInfo?.() ?? locale.weekInfo;
|
|
12
|
+
return weekInfo?.firstDay ?? 1;
|
|
13
|
+
}
|
|
14
|
+
function daysForLocale(language, weekday = 'long') {
|
|
15
|
+
const date = new Date();
|
|
16
|
+
const firstDayOfWeek = date.getUTCDate() - date.getUTCDay();
|
|
17
|
+
const format = new Intl.DateTimeFormat(language, { weekday }).format;
|
|
18
|
+
return [...Array(7).keys()].map(day => format(date.setUTCDate(firstDayOfWeek + day)));
|
|
19
|
+
}
|
|
20
|
+
function monthsForLocale(language, month = 'long') {
|
|
21
|
+
const date = new Date();
|
|
22
|
+
const format = new Intl.DateTimeFormat(language, { month }).format;
|
|
23
|
+
return [...Array(12).keys()].map(month => format(date.setUTCMonth(month)));
|
|
24
|
+
}
|
|
25
|
+
export function getLocale(language) {
|
|
26
|
+
return {
|
|
27
|
+
firstDayOfWeek: getFirstDayOfWeek(language),
|
|
28
|
+
rangeSeparator: ' – ',
|
|
29
|
+
weekAbbreviation: '',
|
|
30
|
+
yearAriaLabel: i18n.t('datepicker.year'),
|
|
31
|
+
monthAriaLabel: i18n.t('datepicker.month'),
|
|
32
|
+
hourAriaLabel: i18n.t('datepicker.hour'),
|
|
33
|
+
minuteAriaLabel: i18n.t('datepicker.minute'),
|
|
34
|
+
toggleTitle: i18n.t('datepicker.toggle'),
|
|
35
|
+
scrollTitle: i18n.t('datepicker.scroll'),
|
|
36
|
+
time_24hr: !getHour12(language),
|
|
37
|
+
weekdays: {
|
|
38
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
39
|
+
shorthand: daysForLocale(language, 'short'),
|
|
40
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
41
|
+
longhand: daysForLocale(language, 'long')
|
|
42
|
+
},
|
|
43
|
+
months: {
|
|
44
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
45
|
+
shorthand: monthsForLocale(language, 'short'),
|
|
46
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
47
|
+
longhand: monthsForLocale(language, 'long')
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
//# sourceMappingURL=cat-datepicker.locale.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cat-datepicker.locale.js","sourceRoot":"","sources":["../../../src/components/cat-datepicker/cat-datepicker.locale.tsx"],"names":[],"mappings":"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","sourcesContent":["import { CustomLocale } from 'flatpickr/dist/types/locale';\nimport { 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\nfunction getFirstDayOfWeek(language: string): number {\n const locale = new Intl.Locale(language);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const weekInfo = (locale as any).getWeekInfo?.() ?? (locale as any).weekInfo;\n return weekInfo?.firstDay ?? 1;\n}\n\nfunction daysForLocale(language: string, weekday: 'long' | 'short' | 'narrow' = 'long') {\n const date = new Date();\n const firstDayOfWeek = date.getUTCDate() - date.getUTCDay();\n const format = new Intl.DateTimeFormat(language, { weekday }).format;\n return [...Array(7).keys()].map(day => format(date.setUTCDate(firstDayOfWeek + day)));\n}\n\nfunction monthsForLocale(language: string, month: 'long' | 'short' = 'long') {\n const date = new Date();\n const format = new Intl.DateTimeFormat(language, { month }).format;\n return [...Array(12).keys()].map(month => format(date.setUTCMonth(month)));\n}\n\nexport function getLocale(language: string): CustomLocale {\n return {\n firstDayOfWeek: getFirstDayOfWeek(language),\n rangeSeparator: ' – ',\n weekAbbreviation: '',\n yearAriaLabel: i18n.t('datepicker.year'),\n monthAriaLabel: i18n.t('datepicker.month'),\n hourAriaLabel: i18n.t('datepicker.hour'),\n minuteAriaLabel: i18n.t('datepicker.minute'),\n toggleTitle: i18n.t('datepicker.toggle'),\n scrollTitle: i18n.t('datepicker.scroll'),\n time_24hr: !getHour12(language),\n weekdays: {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n shorthand: daysForLocale(language, 'short') as any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n longhand: daysForLocale(language, 'long') as any\n },\n months: {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n shorthand: monthsForLocale(language, 'short') as any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n longhand: monthsForLocale(language, 'long') as any\n }\n };\n}\n"]}
|
|
@@ -44,10 +44,9 @@ export class CatDropdown {
|
|
|
44
44
|
this.content.style.display = 'block';
|
|
45
45
|
// give CSS transition time to apply
|
|
46
46
|
setTimeout(() => {
|
|
47
|
-
var _a;
|
|
48
47
|
this.isOpen = true;
|
|
49
48
|
this.content.classList.add('show');
|
|
50
|
-
|
|
49
|
+
this.trigger?.setAttribute('aria-expanded', 'true');
|
|
51
50
|
this.catOpen.emit();
|
|
52
51
|
this.trap = this.trap
|
|
53
52
|
? this.trap.updateContainerElements(this.content)
|
|
@@ -81,12 +80,11 @@ export class CatDropdown {
|
|
|
81
80
|
this.content.classList.remove('show');
|
|
82
81
|
// give CSS transition time to apply
|
|
83
82
|
setTimeout(() => {
|
|
84
|
-
var _a, _b;
|
|
85
83
|
this.isOpen = false;
|
|
86
84
|
this.content.classList.remove('show');
|
|
87
85
|
this.content.style.display = '';
|
|
88
|
-
|
|
89
|
-
|
|
86
|
+
this.trigger?.setAttribute('aria-expanded', 'false');
|
|
87
|
+
this.trap?.deactivate();
|
|
90
88
|
this.catClose.emit();
|
|
91
89
|
}, timeTransitionS);
|
|
92
90
|
}
|
|
@@ -124,14 +122,13 @@ export class CatDropdown {
|
|
|
124
122
|
autoUpdate(this.trigger, this.content, () => this.update());
|
|
125
123
|
}
|
|
126
124
|
findTrigger() {
|
|
127
|
-
var _a, _b, _c;
|
|
128
125
|
let trigger;
|
|
129
|
-
const elems =
|
|
126
|
+
const elems = this.triggerSlot?.assignedElements?.() || [];
|
|
130
127
|
while (!trigger && elems.length) {
|
|
131
128
|
const elem = elems.shift();
|
|
132
|
-
trigger =
|
|
129
|
+
trigger = elem?.hasAttribute('data-trigger')
|
|
133
130
|
? elem
|
|
134
|
-
:
|
|
131
|
+
: elem?.querySelector('[data-trigger]') ?? undefined;
|
|
135
132
|
}
|
|
136
133
|
if (!trigger) {
|
|
137
134
|
trigger = firstTabbable(this.triggerSlot);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport { FocusableElement, tabbable } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n tag: 'cat-dropdown',\n styleUrl: 'cat-dropdown.scss',\n shadow: true\n})\nexport class CatDropdown {\n private static readonly OFFSET = 4;\n private readonly id = nextUniqueId++;\n private triggerSlot!: HTMLSlotElement;\n private trigger?: FocusableElement;\n private content!: HTMLElement;\n private trap?: focusTrap.FocusTrap;\n private keyListener?: (event: KeyboardEvent) => void;\n private isOpen: boolean | null = false;\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-start';\n\n /**\n * Do not close the dropdown on outside clicks.\n */\n @Prop() noAutoClose = false;\n\n /**\n * Allow overflow when dropdown is open.\n */\n @Prop() overflow = false;\n\n /**\n * Emitted when the dropdown is opened.\n */\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the dropdown is closed.\n */\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n @Listen('catClick')\n clickHandler(event: CustomEvent<MouseEvent>) {\n // we need to delay the initialization of the trigger until first,\n // interaction because the element might still be hidden (and thus not\n // tabbable) if contained in another Stencil web component\n if (!this.trigger) {\n this.initTrigger();\n this.toggle();\n }\n\n const button = event.target as HTMLButtonElement;\n\n // hide dropdown on button click\n if (!this.noAutoClose && event.composedPath().includes(this.content) && button.slot !== 'trigger') {\n this.close();\n }\n }\n\n /**\n * Toggles the dropdown.\n */\n async toggle(): Promise<void> {\n this.isOpen ? this.close() : this.open();\n }\n\n /**\n * Opens the dropdown.\n */\n async open(): Promise<void> {\n if (this.isOpen === null) {\n return; // busy\n }\n\n this.isOpen = null;\n this.content.style.display = 'block';\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = true;\n this.content.classList.add('show');\n this.trigger?.setAttribute('aria-expanded', 'true');\n this.catOpen.emit();\n this.trap = this.trap\n ? this.trap.updateContainerElements(this.content)\n : focusTrap.createFocusTrap(this.content, {\n tabbableOptions: {\n getShadowRoot: true\n },\n allowOutsideClick: true,\n clickOutsideDeactivates: event => {\n const shouldClose =\n !this.noAutoClose &&\n !event.composedPath().includes(this.content) &&\n (!this.trigger || !event.composedPath().includes(this.trigger));\n if (shouldClose) {\n this.close();\n }\n return shouldClose;\n },\n onPostDeactivate: () => this.close()\n });\n this.trap.activate();\n });\n }\n\n /**\n * Closes the dropdown.\n */\n @Method()\n async close(): Promise<void> {\n if (this.isOpen === null || !this.isOpen) {\n return; // busy\n }\n\n this.isOpen = null;\n this.content.classList.remove('show');\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = false;\n this.content.classList.remove('show');\n this.content.style.display = '';\n this.trigger?.setAttribute('aria-expanded', 'false');\n this.trap?.deactivate();\n this.catClose.emit();\n }, timeTransitionS);\n }\n\n componentDidLoad(): void {\n this.keyListener = event => {\n if (this.isOpen && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });\n const activeElement = firstTabbable(document.activeElement);\n const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n const activeOff = event.key === 'ArrowDown' ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].focus();\n event.preventDefault();\n }\n };\n document.addEventListener('keydown', this.keyListener);\n }\n\n disconnectedCallback(): void {\n if (this.keyListener) {\n document.removeEventListener('keydown', this.keyListener);\n }\n }\n\n render() {\n return (\n <Host>\n <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n <div\n id={this.contentId}\n class={{ content: true, 'overflow-auto': !this.overflow }}\n ref={el => (this.content = el as HTMLElement)}\n >\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n\n private get contentId() {\n return `cat-dropdown-${this.id}`;\n }\n\n private initTrigger() {\n this.trigger = this.findTrigger();\n this.trigger.setAttribute('aria-haspopup', 'true');\n this.trigger.setAttribute('aria-expanded', 'false');\n this.trigger.setAttribute('aria-controls', this.contentId);\n this.trigger.addEventListener('click', () => this.toggle());\n autoUpdate(this.trigger, this.content, () => this.update());\n }\n\n private findTrigger() {\n let trigger: FocusableElement | undefined;\n const elems = this.triggerSlot?.assignedElements?.() || [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = elem?.hasAttribute('data-trigger')\n ? (elem as HTMLElement)\n : elem?.querySelector('[data-trigger]') ?? undefined;\n }\n if (!trigger) {\n trigger = firstTabbable(this.triggerSlot);\n }\n if (!trigger) {\n throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n }\n return trigger;\n }\n\n private update() {\n if (this.trigger) {\n computePosition(this.trigger, this.content, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [\n offset(CatDropdown.OFFSET),\n flip(),\n size({\n padding: CatDropdown.OFFSET,\n apply({ availableWidth, availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`\n });\n }\n })\n ]\n }).then(({ x, y, placement }) => {\n this.content.dataset.placement = placement;\n Object.assign(this.content.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n });\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"cat-dropdown.js","sourceRoot":"","sources":["../../../src/components/cat-dropdown/cat-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { autoUpdate, computePosition, flip, offset, Placement, size } from '@floating-ui/dom';\nimport { timeTransitionS } from '@haiilo/catalyst-tokens';\nimport { Component, Event, EventEmitter, h, Host, Listen, Method, Prop } from '@stencil/core';\nimport * as focusTrap from 'focus-trap';\nimport { FocusableElement, tabbable } from 'tabbable';\nimport firstTabbable from '../../utils/first-tabbable';\n\nlet nextUniqueId = 0;\n\n@Component({\n tag: 'cat-dropdown',\n styleUrl: 'cat-dropdown.scss',\n shadow: true\n})\nexport class CatDropdown {\n private static readonly OFFSET = 4;\n private readonly id = nextUniqueId++;\n private triggerSlot!: HTMLSlotElement;\n private trigger?: FocusableElement;\n private content!: HTMLElement;\n private trap?: focusTrap.FocusTrap;\n private keyListener?: (event: KeyboardEvent) => void;\n private isOpen: boolean | null = false;\n\n /**\n * The placement of the dropdown.\n */\n @Prop() placement: Placement = 'bottom-start';\n\n /**\n * Do not close the dropdown on outside clicks.\n */\n @Prop() noAutoClose = false;\n\n /**\n * Allow overflow when dropdown is open.\n */\n @Prop() overflow = false;\n\n /**\n * Emitted when the dropdown is opened.\n */\n @Event() catOpen!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the dropdown is closed.\n */\n @Event() catClose!: EventEmitter<FocusEvent>;\n\n @Listen('catClick')\n clickHandler(event: CustomEvent<MouseEvent>) {\n // we need to delay the initialization of the trigger until first,\n // interaction because the element might still be hidden (and thus not\n // tabbable) if contained in another Stencil web component\n if (!this.trigger) {\n this.initTrigger();\n this.toggle();\n }\n\n const button = event.target as HTMLButtonElement;\n\n // hide dropdown on button click\n if (!this.noAutoClose && event.composedPath().includes(this.content) && button.slot !== 'trigger') {\n this.close();\n }\n }\n\n /**\n * Toggles the dropdown.\n */\n async toggle(): Promise<void> {\n this.isOpen ? this.close() : this.open();\n }\n\n /**\n * Opens the dropdown.\n */\n async open(): Promise<void> {\n if (this.isOpen === null) {\n return; // busy\n }\n\n this.isOpen = null;\n this.content.style.display = 'block';\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = true;\n this.content.classList.add('show');\n this.trigger?.setAttribute('aria-expanded', 'true');\n this.catOpen.emit();\n this.trap = this.trap\n ? this.trap.updateContainerElements(this.content)\n : focusTrap.createFocusTrap(this.content, {\n tabbableOptions: {\n getShadowRoot: true\n },\n allowOutsideClick: true,\n clickOutsideDeactivates: event => {\n const shouldClose =\n !this.noAutoClose &&\n !event.composedPath().includes(this.content) &&\n (!this.trigger || !event.composedPath().includes(this.trigger));\n if (shouldClose) {\n this.close();\n }\n return shouldClose;\n },\n onPostDeactivate: () => this.close()\n });\n this.trap.activate();\n });\n }\n\n /**\n * Closes the dropdown.\n */\n @Method()\n async close(): Promise<void> {\n if (this.isOpen === null || !this.isOpen) {\n return; // busy\n }\n\n this.isOpen = null;\n this.content.classList.remove('show');\n // give CSS transition time to apply\n setTimeout(() => {\n this.isOpen = false;\n this.content.classList.remove('show');\n this.content.style.display = '';\n this.trigger?.setAttribute('aria-expanded', 'false');\n this.trap?.deactivate();\n this.catClose.emit();\n }, timeTransitionS);\n }\n\n componentDidLoad(): void {\n this.keyListener = event => {\n if (this.isOpen && ['ArrowDown', 'ArrowUp'].includes(event.key)) {\n const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });\n const activeElement = firstTabbable(document.activeElement);\n const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;\n const activeOff = event.key === 'ArrowDown' ? 1 : -1;\n const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;\n targetElements[targetIdx].focus();\n event.preventDefault();\n }\n };\n document.addEventListener('keydown', this.keyListener);\n }\n\n disconnectedCallback(): void {\n if (this.keyListener) {\n document.removeEventListener('keydown', this.keyListener);\n }\n }\n\n render() {\n return (\n <Host>\n <slot name=\"trigger\" ref={el => (this.triggerSlot = el as HTMLSlotElement)}></slot>\n <div\n id={this.contentId}\n class={{ content: true, 'overflow-auto': !this.overflow }}\n ref={el => (this.content = el as HTMLElement)}\n >\n <slot name=\"content\"></slot>\n </div>\n </Host>\n );\n }\n\n private get contentId() {\n return `cat-dropdown-${this.id}`;\n }\n\n private initTrigger() {\n this.trigger = this.findTrigger();\n this.trigger.setAttribute('aria-haspopup', 'true');\n this.trigger.setAttribute('aria-expanded', 'false');\n this.trigger.setAttribute('aria-controls', this.contentId);\n this.trigger.addEventListener('click', () => this.toggle());\n autoUpdate(this.trigger, this.content, () => this.update());\n }\n\n private findTrigger() {\n let trigger: FocusableElement | undefined;\n const elems = this.triggerSlot?.assignedElements?.() || [];\n while (!trigger && elems.length) {\n const elem = elems.shift();\n trigger = elem?.hasAttribute('data-trigger')\n ? (elem as HTMLElement)\n : elem?.querySelector('[data-trigger]') ?? undefined;\n }\n if (!trigger) {\n trigger = firstTabbable(this.triggerSlot);\n }\n if (!trigger) {\n throw new Error('Cannot find tabbable element. Use [data-trigger] to set the trigger.');\n }\n return trigger;\n }\n\n private update() {\n if (this.trigger) {\n computePosition(this.trigger, this.content, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [\n offset(CatDropdown.OFFSET),\n flip(),\n size({\n padding: CatDropdown.OFFSET,\n apply({ availableWidth, availableHeight, elements }) {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`\n });\n }\n })\n ]\n }).then(({ x, y, placement }) => {\n this.content.dataset.placement = placement;\n Object.assign(this.content.style, {\n left: `${x}px`,\n top: `${y}px`\n });\n });\n }\n }\n}\n"]}
|
|
@@ -8,7 +8,7 @@ export class CatFormGroup {
|
|
|
8
8
|
}
|
|
9
9
|
onRequiredMarker(newRequiredMarker) {
|
|
10
10
|
const updateMarker = newRequiredMarker === 'auto' ? this.calculate(this.formElements) : newRequiredMarker;
|
|
11
|
-
this.formElements.forEach(element =>
|
|
11
|
+
this.formElements.forEach(element => !element.requiredMarker?.endsWith('!') && (element.requiredMarker = updateMarker));
|
|
12
12
|
}
|
|
13
13
|
onHorizontal(newHorizontal) {
|
|
14
14
|
this.formElements.forEach(element => {
|
|
@@ -19,14 +19,13 @@ export class CatFormGroup {
|
|
|
19
19
|
return (h(Host, { style: { '--label-size': this.labelSize } }, h("slot", { onSlotchange: this.onSlotChange.bind(this) })));
|
|
20
20
|
}
|
|
21
21
|
onSlotChange() {
|
|
22
|
-
this.formElements = Array.from(this.hostElement.querySelectorAll('cat-
|
|
22
|
+
this.formElements = Array.from(this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker'));
|
|
23
23
|
this.onRequiredMarker(this.requiredMarker);
|
|
24
24
|
this.onHorizontal(this.horizontal);
|
|
25
25
|
}
|
|
26
26
|
calculate(elements) {
|
|
27
|
-
const
|
|
28
|
-
const
|
|
29
|
-
const requiredFields = formFields.length - optionalFields;
|
|
27
|
+
const optionalFields = elements.filter(value => !value.required).length;
|
|
28
|
+
const requiredFields = elements.length - optionalFields;
|
|
30
29
|
return requiredFields >= optionalFields ? 'optional' : 'required';
|
|
31
30
|
}
|
|
32
31
|
static get is() { return "cat-form-group"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-form-group.js","sourceRoot":"","sources":["../../../src/components/cat-form-group/cat-form-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"cat-form-group.js","sourceRoot":"","sources":["../../../src/components/cat-form-group/cat-form-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAazE,MAAM,OAAO,YAAY;;IACf,iBAAY,GAA8B,EAAE,CAAC;0BAWe,MAAM;sBAKrD,KAAK;;;EAQ1B,gBAAgB,CAAC,iBAA4D;IAC3E,MAAM,YAAY,GAAG,iBAAiB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAC1G,IAAI,CAAC,YAAY,CAAC,OAAO,CACvB,OAAO,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,GAAG,YAAY,CAAC,CAC7F,CAAC;EACJ,CAAC;EAGD,YAAY,CAAC,aAAsB;IACjC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;MAClC,OAAO,CAAC,UAAU,GAAG,aAAa,CAAC;IACrC,CAAC,CAAC,CAAC;EACL,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,CAAC,SAAS,EAAE;MAC7C,YAAM,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CACpD,CACR,CAAC;EACJ,CAAC;EAEO,YAAY;IAClB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAC5B,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,qDAAqD,CAAC,CAC5D,CAAC;IAC/B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;EACrC,CAAC;EAEO,SAAS,CAAC,QAAmC;IACnD,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;IACxE,MAAM,cAAc,GAAG,QAAQ,CAAC,MAAM,GAAG,cAAc,CAAC;IACxD,OAAO,cAAc,IAAI,cAAc,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;EACpE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';\n\ntype HTMLCatFormFieldElement =\n | HTMLCatInputElement\n | HTMLCatTextareaElement\n | HTMLCatSelectElement\n | HTMLCatDatepickerElement;\n\n@Component({\n tag: 'cat-form-group',\n styleUrl: 'cat-form-group.scss',\n shadow: true\n})\nexport class CatFormGroup {\n private formElements: HTMLCatFormFieldElement[] = [];\n\n @Element() hostElement!: HTMLElement;\n\n /**\n * Whether the labels need a marker to shown if the forms fields are required or optional.<br /><br />\n * By default, it is set to auto, it will display the mark depending on the number of required and optional fields: <br />\n * - If there are more required, the optional will be marked.<br />\n * - If there are less required, it will mark the required.<br /><br />\n * If a form field had \"!\", the requiredMarked of the field would not change.\n */\n @Prop() requiredMarker: 'none' | 'required' | 'optional' | 'auto' = 'auto';\n\n /**\n * Whether the label is on top or left.\n */\n @Prop() horizontal = false;\n\n /**\n * The space allocated to the input label\n */\n @Prop() labelSize?: string;\n\n @Watch('requiredMarker')\n onRequiredMarker(newRequiredMarker: 'none' | 'required' | 'optional' | 'auto') {\n const updateMarker = newRequiredMarker === 'auto' ? this.calculate(this.formElements) : newRequiredMarker;\n this.formElements.forEach(\n element => !element.requiredMarker?.endsWith('!') && (element.requiredMarker = updateMarker)\n );\n }\n\n @Watch('horizontal')\n onHorizontal(newHorizontal: boolean) {\n this.formElements.forEach(element => {\n element.horizontal = newHorizontal;\n });\n }\n\n render() {\n return (\n <Host style={{ '--label-size': this.labelSize }}>\n <slot onSlotchange={this.onSlotChange.bind(this)}></slot>\n </Host>\n );\n }\n\n private onSlotChange(): void {\n this.formElements = Array.from(\n this.hostElement.querySelectorAll('cat-input, cat-textarea, cat-select, cat-datepicker')\n ) as HTMLCatFormFieldElement[];\n this.onRequiredMarker(this.requiredMarker);\n this.onHorizontal(this.horizontal);\n }\n\n private calculate(elements: HTMLCatFormFieldElement[]): 'optional' | 'required' {\n const optionalFields = elements.filter(value => !value.required).length;\n const requiredFields = elements.length - optionalFields;\n return requiredFields >= optionalFields ? 'optional' : 'required';\n }\n}\n"]}
|
|
@@ -7,17 +7,13 @@ import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
|
|
|
7
7
|
* @return a JSX.Element
|
|
8
8
|
*/
|
|
9
9
|
export const CatFormHint = props => {
|
|
10
|
-
var _a;
|
|
11
10
|
const { id, hint, slottedHint, errorMap } = props;
|
|
12
11
|
const errors = Object.entries(errorMap || {});
|
|
13
12
|
return (h("div", { id: id + '-hint', class: "hint-section" }, errors.length
|
|
14
|
-
? errors.map(([key, params]) => {
|
|
15
|
-
var _a;
|
|
16
|
-
return (h("p", { class: ((_a = props.class) !== null && _a !== void 0 ? _a : '') + ' input-hint cat-text-danger' }, i18n.t(`error.${key}`, params)));
|
|
17
|
-
})
|
|
13
|
+
? errors.map(([key, params]) => (h("p", { class: (props.class ?? '') + ' input-hint cat-text-danger' }, i18n.t(`error.${key}`, params))))
|
|
18
14
|
: [
|
|
19
15
|
hint &&
|
|
20
|
-
(Array.isArray(hint) ? (hint.map(item =>
|
|
16
|
+
(Array.isArray(hint) ? (hint.map(item => h("p", { class: (props.class ?? '') + ' input-hint' }, item))) : (h("p", { class: (props.class ?? '') + ' input-hint' }, hint))),
|
|
21
17
|
slottedHint
|
|
22
18
|
]));
|
|
23
19
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-form-hint.js","sourceRoot":"","sources":["../../../src/components/cat-form-hint/cat-form-hint.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAmBxE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAA0C,KAAK,CAAC,EAAE
|
|
1
|
+
{"version":3,"file":"cat-form-hint.js","sourceRoot":"","sources":["../../../src/components/cat-form-hint/cat-form-hint.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAuB,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,eAAe,IAAI,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAmBxE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAA0C,KAAK,CAAC,EAAE;EACxE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;EAClD,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC;EAC9C,OAAO,CACL,WAAK,EAAE,EAAE,EAAE,GAAG,OAAO,EAAE,KAAK,EAAC,cAAc,IACxC,MAAM,CAAC,MAAM;IACZ,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAC5B,SAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,6BAA6B,IAAG,IAAI,CAAC,CAAC,CAAC,SAAS,GAAG,EAAE,EAAE,MAAM,CAAC,CAAK,CACpG,CAAC;IACJ,CAAC,CAAC;MACE,IAAI;QACF,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CACrB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,SAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,aAAa,IAAG,IAAI,CAAK,CAAC,CAC5E,CAAC,CAAC,CAAC,CACF,SAAG,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,aAAa,IAAG,IAAI,CAAK,CAC1D,CAAC;MACJ,WAAW;KACZ,CACD,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h, FunctionalComponent } from '@stencil/core';\nimport { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type ErrorMap = { [key: string]: any };\n\n/**\n * Properties of CatFormHint.\n *\n * @property hint - Optional hint text(s) of the form field.\n * @property slottedHint - Optional hint element of the form field.\n */\ninterface CatFormHintProps {\n id: string;\n hint?: string | string[];\n slottedHint?: HTMLSlotElement;\n class?: string;\n errorMap?: ErrorMap;\n}\n\n/**\n * CatFormHint is a functional component that represents the hint area of form elements.\n *\n * @param props - {@link CatFormHintProps}\n * @return a JSX.Element\n */\nexport const CatFormHint: FunctionalComponent<CatFormHintProps> = props => {\n const { id, hint, slottedHint, errorMap } = props;\n const errors = Object.entries(errorMap || {});\n return (\n <div id={id + '-hint'} class=\"hint-section\">\n {errors.length\n ? errors.map(([key, params]) => (\n <p class={(props.class ?? '') + ' input-hint cat-text-danger'}>{i18n.t(`error.${key}`, params)}</p>\n ))\n : [\n hint &&\n (Array.isArray(hint) ? (\n hint.map(item => <p class={(props.class ?? '') + ' input-hint'}>{item}</p>)\n ) : (\n <p class={(props.class ?? '') + ' input-hint'}>{hint}</p>\n )),\n slottedHint\n ]}\n </div>\n );\n};\n"]}
|
|
@@ -30,6 +30,18 @@ export class CatI18nRegistry {
|
|
|
30
30
|
}
|
|
31
31
|
return CatI18nRegistry.instance;
|
|
32
32
|
}
|
|
33
|
+
getLocale() {
|
|
34
|
+
return this._locale ?? window?.navigator?.language ?? 'en';
|
|
35
|
+
}
|
|
36
|
+
setLocale(locale) {
|
|
37
|
+
try {
|
|
38
|
+
this._locale = Intl.getCanonicalLocales(locale)[0];
|
|
39
|
+
log.info(`[CatI18nRegistry] Set locale: ${this._locale}`);
|
|
40
|
+
}
|
|
41
|
+
catch (err) {
|
|
42
|
+
log.error(`[CatI18nRegistry] Invalid locale: ${locale}`);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
33
45
|
set(i18n, silent = false) {
|
|
34
46
|
const i18nEntries = Object.entries(i18n);
|
|
35
47
|
i18nEntries.forEach(([key, message]) => this.i18n.set(key, message));
|
|
@@ -47,7 +59,7 @@ export class CatI18nRegistry {
|
|
|
47
59
|
log.error(`[CatI18nRegistry] Unknown message key: ${key}`);
|
|
48
60
|
return key;
|
|
49
61
|
}
|
|
50
|
-
return message.replace(/{{\s*([-a-zA-Z._]+)\s*}}/g, (_match, key) =>
|
|
62
|
+
return message.replace(/{{\s*([-a-zA-Z._]+)\s*}}/g, (_match, key) => `${params?.[key] ?? ''}`);
|
|
51
63
|
}
|
|
52
64
|
buildEvent(name, detail) {
|
|
53
65
|
return new CustomEvent(name, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cat-i18n-registry.js","sourceRoot":"","sources":["../../../src/components/cat-i18n/cat-i18n-registry.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,UAAU,CAAC;AAE3B,MAAM,OAAO,eAAe;
|
|
1
|
+
{"version":3,"file":"cat-i18n-registry.js","sourceRoot":"","sources":["../../../src/components/cat-i18n/cat-i18n-registry.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,UAAU,CAAC;AAE3B,MAAM,OAAO,eAAe;EAO1B;IACE,mBAAmB;IALJ,OAAE,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACnD,SAAI,GAAwB,IAAI,GAAG,EAAE,CAAC;IAMrD,2EAA2E;IAC3E,yEAAyE;IACzE,yEAAyE;IACzE,4EAA4E;IAC5E,yEAAyE;IACzE,0EAA0E;IAC1E,oBAAoB;IACpB,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,KAAK,CAAC,EAAE;MAC9C,MAAM,EAAE,MAAM,EAAE,GAAI,KAAqB,IAAI,EAAE,CAAC;MAChD,IAAI,MAAM,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE;QACnC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;OAC7B;IACH,CAAC,CAAC,CAAC;IACH,MAAM,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE;MAChD,MAAM,EAAE,MAAM,EAAE,GAAI,KAAqB,IAAI,EAAE,CAAC;MAChD,IAAI,MAAM,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE;QACnC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;OAClB;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAED,MAAM,CAAC,WAAW;IAChB,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE;MAC7B,eAAe,CAAC,QAAQ,GAAG,IAAI,eAAe,EAAE,CAAC;KAClD;IACD,OAAO,eAAe,CAAC,QAAQ,CAAC;EAClC,CAAC;EAED,SAAS;IACP,OAAO,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,SAAS,EAAE,QAAQ,IAAI,IAAI,CAAC;EAC7D,CAAC;EAED,SAAS,CAAC,MAAc;IACtB,IAAI;MACF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;MACnD,GAAG,CAAC,IAAI,CAAC,iCAAiC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;KAC3D;IAAC,OAAO,GAAG,EAAE;MACZ,GAAG,CAAC,KAAK,CAAC,qCAAqC,MAAM,EAAE,CAAC,CAAC;KAC1D;EACH,CAAC;EAED,GAAG,CAAC,IAA+B,EAAE,MAAM,GAAG,KAAK;IACjD,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACzC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC;IACrE,GAAG,CAAC,IAAI,CAAC,gCAAgC,WAAW,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC;IAC9F,CAAC,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;EAC1F,CAAC;EAED,KAAK,CAAC,MAAM,GAAG,KAAK;IAClB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;IAClB,GAAG,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;IAC/C,CAAC,MAAM,IAAI,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC;EACrE,CAAC;EAED,CAAC,CAAC,GAAW,EAAE,MAAmC;IAChD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnC,IAAI,OAAO,KAAK,SAAS,EAAE;MACzB,GAAG,CAAC,KAAK,CAAC,0CAA0C,GAAG,EAAE,CAAC,CAAC;MAC3D,OAAO,GAAG,CAAC;KACZ;IACD,OAAO,OAAO,CAAC,OAAO,CAAC,2BAA2B,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;EACjG,CAAC;EAEO,UAAU,CAAI,IAAY,EAAE,MAAU;IAC5C,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE;MAC3B,OAAO,EAAE,IAAI;MACb,QAAQ,EAAE,IAAI;MACd,MAAM;KACP,CAAC,CAAC;EACL,CAAC;CACF;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC,WAAW,EAAE,CAAC","sourcesContent":["import log from 'loglevel';\n\nexport class CatI18nRegistry {\n private static instance: CatI18nRegistry;\n\n private readonly id = (Math.random() + 1).toString(36).substring(2);\n private readonly i18n: Map<string, string> = new Map();\n private _locale?: string;\n\n private constructor() {\n // hide constructor\n\n // In rare cases, the registry can be initialized twice. This can happen in\n // a micro frontend architecture where the registry is initialized in the\n // host application and in the micro frontend. To prevent the registry in\n // one application from overwriting the registry in the other, we listen for\n // events that are dispatched when messages are added or removed in other\n // applications and add or remove messages if the event was not dispatched\n // by this registry.\n window.addEventListener('cat-i18n-set', event => {\n const { detail } = (event as CustomEvent) || {};\n if (detail && detail.id !== this.id) {\n this.set(detail.i18n, true);\n }\n });\n window.addEventListener('cat-i18n-clear', event => {\n const { detail } = (event as CustomEvent) || {};\n if (detail && detail.id !== this.id) {\n this.clear(true);\n }\n });\n }\n\n static getInstance(): CatI18nRegistry {\n if (!CatI18nRegistry.instance) {\n CatI18nRegistry.instance = new CatI18nRegistry();\n }\n return CatI18nRegistry.instance;\n }\n\n getLocale(): string {\n return this._locale ?? window?.navigator?.language ?? 'en';\n }\n\n setLocale(locale: string): void {\n try {\n this._locale = Intl.getCanonicalLocales(locale)[0];\n log.info(`[CatI18nRegistry] Set locale: ${this._locale}`);\n } catch (err) {\n log.error(`[CatI18nRegistry] Invalid locale: ${locale}`);\n }\n }\n\n set(i18n: { [key: string]: string }, silent = false): void {\n const i18nEntries = Object.entries(i18n);\n i18nEntries.forEach(([key, message]) => this.i18n.set(key, message));\n log.info(`[CatI18nRegistry] Registered ${i18nEntries.length !== 1 ? 'messages' : 'message'}`);\n !silent && window.dispatchEvent(this.buildEvent('cat-i18n-set', { i18n, id: this.id }));\n }\n\n clear(silent = false): void {\n this.i18n.clear();\n log.info(`[CatI18nRegistry] Cleared messages`);\n !silent && window.dispatchEvent(this.buildEvent('cat-i18n-clear'));\n }\n\n t(key: string, params?: { [key: string]: unknown }): string {\n const message = this.i18n.get(key);\n if (message === undefined) {\n log.error(`[CatI18nRegistry] Unknown message key: ${key}`);\n return key;\n }\n return message.replace(/{{\\s*([-a-zA-Z._]+)\\s*}}/g, (_match, key) => `${params?.[key] ?? ''}`);\n }\n\n private buildEvent<T>(name: string, detail?: T) {\n return new CustomEvent(name, {\n bubbles: true,\n composed: true,\n detail\n });\n }\n}\n\nexport const catI18nRegistry = CatI18nRegistry.getInstance();\n"]}
|