@r2digisolutions/components 0.15.2 → 0.15.3
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/components/organisms/CommandPalette/CommandPalette.svelte +124 -37
- package/dist/components/organisms/CommandPalette/CommandPalette.svelte.d.ts +14 -1
- package/dist/components/organisms/CommandPalette/CommandPaletteStory.svelte +29 -11
- package/dist/index.d.ts +1 -1
- package/dist/utils/i18n.d.ts +4 -0
- package/dist/utils/i18n.js +18 -0
- package/package.json +1 -1
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
import type { Component } from 'svelte';
|
|
3
|
+
import { untrack } from 'svelte';
|
|
2
4
|
import Kbd from '../../atoms/Kbd/Kbd.svelte';
|
|
5
|
+
import { i18n } from '../../../utils/i18n.svelte';
|
|
6
|
+
|
|
7
|
+
export type CommandIcon = Component<{
|
|
8
|
+
class?: string;
|
|
9
|
+
size?: number | string;
|
|
10
|
+
strokeWidth?: number | string;
|
|
11
|
+
}>;
|
|
3
12
|
|
|
4
13
|
export interface CommandItem {
|
|
5
14
|
id: string;
|
|
@@ -7,41 +16,65 @@
|
|
|
7
16
|
group?: string;
|
|
8
17
|
shortcut?: string[];
|
|
9
18
|
disabled?: boolean;
|
|
19
|
+
subtitle?: string;
|
|
20
|
+
keywords?: string;
|
|
21
|
+
href?: string;
|
|
22
|
+
icon?: CommandIcon;
|
|
10
23
|
}
|
|
11
24
|
|
|
12
25
|
interface CommandPaletteProps {
|
|
13
26
|
open?: boolean;
|
|
14
27
|
items?: CommandItem[];
|
|
15
28
|
placeholder?: string;
|
|
29
|
+
emptyLabel?: string;
|
|
30
|
+
loading?: boolean;
|
|
16
31
|
class?: string;
|
|
17
32
|
onselect?: (item: CommandItem) => void;
|
|
18
33
|
onclose?: () => void;
|
|
34
|
+
onquery?: (query: string) => void;
|
|
19
35
|
}
|
|
20
36
|
|
|
21
37
|
let {
|
|
22
38
|
open = $bindable(false),
|
|
23
39
|
items = [],
|
|
24
|
-
placeholder
|
|
40
|
+
placeholder,
|
|
41
|
+
emptyLabel,
|
|
42
|
+
loading = false,
|
|
25
43
|
class: className = '',
|
|
26
44
|
onselect,
|
|
27
|
-
onclose
|
|
45
|
+
onclose,
|
|
46
|
+
onquery
|
|
28
47
|
}: CommandPaletteProps = $props();
|
|
29
48
|
|
|
30
49
|
let query = $state('');
|
|
31
50
|
let activeIndex = $state(0);
|
|
32
|
-
let inputEl = $state<HTMLInputElement | null>(null);
|
|
33
51
|
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
52
|
+
const resolvedPlaceholder = $derived(placeholder ?? i18n.t('commandPalettePlaceholder'));
|
|
53
|
+
const resolvedEmpty = $derived(emptyLabel ?? i18n.t('noResults'));
|
|
54
|
+
const dialogLabel = $derived(i18n.t('commandPalette'));
|
|
55
|
+
|
|
56
|
+
function normalize(value: string) {
|
|
57
|
+
return value
|
|
58
|
+
.normalize('NFD')
|
|
59
|
+
.replace(/\p{Diacritic}/gu, '')
|
|
60
|
+
.toLowerCase();
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
function matches(item: CommandItem, haystack: string) {
|
|
64
|
+
if (!haystack) return true;
|
|
65
|
+
const blob = normalize([item.label, item.subtitle ?? '', item.keywords ?? ''].join(' '));
|
|
66
|
+
return blob.includes(haystack);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
const filtered = $derived.by(() => {
|
|
70
|
+
const haystack = normalize(query.trim());
|
|
71
|
+
return items.filter((item) => matches(item, haystack));
|
|
72
|
+
});
|
|
40
73
|
|
|
41
74
|
const groups = $derived.by(() => {
|
|
42
75
|
const map = new Map<string, CommandItem[]>();
|
|
43
76
|
for (const item of filtered) {
|
|
44
|
-
const key = item.group ||
|
|
77
|
+
const key = item.group || dialogLabel;
|
|
45
78
|
const list = map.get(key) ?? [];
|
|
46
79
|
list.push(item);
|
|
47
80
|
map.set(key, list);
|
|
@@ -50,19 +83,19 @@
|
|
|
50
83
|
});
|
|
51
84
|
|
|
52
85
|
const flat = $derived(filtered);
|
|
86
|
+
const showIconColumn = $derived(flat.some((item) => item.icon));
|
|
53
87
|
|
|
54
88
|
$effect(() => {
|
|
55
89
|
if (open) {
|
|
56
90
|
query = '';
|
|
57
91
|
activeIndex = 0;
|
|
58
|
-
|
|
92
|
+
untrack(() => onquery?.(''));
|
|
59
93
|
}
|
|
60
94
|
});
|
|
61
95
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
});
|
|
96
|
+
function focusInput(node: HTMLInputElement) {
|
|
97
|
+
queueMicrotask(() => node.focus());
|
|
98
|
+
}
|
|
66
99
|
|
|
67
100
|
function close() {
|
|
68
101
|
open = false;
|
|
@@ -84,7 +117,7 @@
|
|
|
84
117
|
}
|
|
85
118
|
if (e.key === 'ArrowDown') {
|
|
86
119
|
e.preventDefault();
|
|
87
|
-
activeIndex = Math.min(flat.length - 1, activeIndex + 1);
|
|
120
|
+
activeIndex = Math.min(Math.max(flat.length - 1, 0), activeIndex + 1);
|
|
88
121
|
} else if (e.key === 'ArrowUp') {
|
|
89
122
|
e.preventDefault();
|
|
90
123
|
activeIndex = Math.max(0, activeIndex - 1);
|
|
@@ -94,51 +127,81 @@
|
|
|
94
127
|
if (item) choose(item);
|
|
95
128
|
}
|
|
96
129
|
}
|
|
130
|
+
|
|
131
|
+
function onInput() {
|
|
132
|
+
activeIndex = 0;
|
|
133
|
+
onquery?.(query);
|
|
134
|
+
}
|
|
97
135
|
</script>
|
|
98
136
|
|
|
99
137
|
{#if open}
|
|
100
|
-
<
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
></button>
|
|
138
|
+
<button
|
|
139
|
+
type="button"
|
|
140
|
+
class="inset-0 bg-black/60 p-0 dark:bg-black/70 backdrop-blur-sm fixed z-50 border-0"
|
|
141
|
+
aria-label={i18n.t('close')}
|
|
142
|
+
onclick={close}
|
|
143
|
+
></button>
|
|
107
144
|
|
|
145
|
+
<div
|
|
146
|
+
class="px-4 inset-0 pointer-events-none fixed z-[51] flex items-start justify-center pt-[12vh]"
|
|
147
|
+
>
|
|
108
148
|
<div
|
|
109
149
|
role="dialog"
|
|
110
150
|
aria-modal="true"
|
|
111
|
-
aria-label=
|
|
151
|
+
aria-label={dialogLabel}
|
|
152
|
+
tabindex="-1"
|
|
112
153
|
class={[
|
|
113
|
-
'
|
|
154
|
+
'max-w-xl rounded-2xl border-border bg-surface-elevated shadow-2xl pointer-events-auto w-full overflow-hidden border',
|
|
114
155
|
className
|
|
115
156
|
]}
|
|
116
157
|
onkeydown={onKeydown}
|
|
117
158
|
>
|
|
118
|
-
<div class="
|
|
119
|
-
<svg
|
|
120
|
-
|
|
159
|
+
<div class="gap-2 border-border px-3 flex items-center border-b">
|
|
160
|
+
<svg
|
|
161
|
+
class="h-4 w-4 text-muted shrink-0"
|
|
162
|
+
viewBox="0 0 24 24"
|
|
163
|
+
fill="none"
|
|
164
|
+
stroke="currentColor"
|
|
165
|
+
stroke-width="2"
|
|
166
|
+
aria-hidden="true"
|
|
167
|
+
>
|
|
168
|
+
<path
|
|
169
|
+
stroke-linecap="round"
|
|
170
|
+
stroke-linejoin="round"
|
|
171
|
+
d="M21 21l-4.35-4.35M11 18a7 7 0 100-14 7 7 0 000 14z"
|
|
172
|
+
/>
|
|
121
173
|
</svg>
|
|
122
174
|
<input
|
|
123
|
-
bind:this={inputEl}
|
|
124
175
|
bind:value={query}
|
|
125
|
-
{
|
|
126
|
-
|
|
176
|
+
{@attach focusInput}
|
|
177
|
+
placeholder={resolvedPlaceholder}
|
|
178
|
+
class="h-12 text-sm text-primary placeholder:text-muted w-full bg-transparent outline-none"
|
|
179
|
+
autocomplete="off"
|
|
180
|
+
spellcheck="false"
|
|
181
|
+
aria-autocomplete="list"
|
|
182
|
+
oninput={onInput}
|
|
127
183
|
/>
|
|
184
|
+
{#if loading}
|
|
185
|
+
<span
|
|
186
|
+
class="h-4 w-4 animate-spin border-border border-t-brand-500 shrink-0 rounded-full border-2"
|
|
187
|
+
aria-hidden="true"
|
|
188
|
+
></span>
|
|
189
|
+
{/if}
|
|
128
190
|
<Kbd keys={['Esc']} size="sm" />
|
|
129
191
|
</div>
|
|
130
192
|
|
|
131
|
-
<div class="max-h-80 overflow-y-auto
|
|
193
|
+
<div class="max-h-80 p-2 overflow-y-auto">
|
|
132
194
|
{#if flat.length === 0}
|
|
133
|
-
<p class="px-3 py-6 text-
|
|
195
|
+
<p class="px-3 py-6 text-sm text-muted text-center">{resolvedEmpty}</p>
|
|
134
196
|
{:else}
|
|
135
197
|
{#each groups as [groupName, groupItems] (groupName)}
|
|
136
|
-
<p class="px-2 py-1.5
|
|
198
|
+
<p class="px-2 py-1.5 font-semibold tracking-wide text-muted text-[11px] uppercase">
|
|
137
199
|
{groupName}
|
|
138
200
|
</p>
|
|
139
|
-
<ul class="mb-2 flex flex-col
|
|
201
|
+
<ul class="mb-2 gap-0.5 flex flex-col">
|
|
140
202
|
{#each groupItems as item (item.id)}
|
|
141
203
|
{@const index = flat.findIndex((f) => f.id === item.id)}
|
|
204
|
+
{@const Icon = item.icon}
|
|
142
205
|
<li>
|
|
143
206
|
<button
|
|
144
207
|
type="button"
|
|
@@ -146,14 +209,38 @@
|
|
|
146
209
|
onclick={() => choose(item)}
|
|
147
210
|
onmouseenter={() => (activeIndex = index)}
|
|
148
211
|
class={[
|
|
149
|
-
'
|
|
212
|
+
'gap-3 rounded-xl px-3 py-2 text-sm flex w-full items-center justify-between text-left transition-colors',
|
|
150
213
|
index === activeIndex
|
|
151
214
|
? 'bg-brand-50 text-brand-700 dark:bg-brand-950/40 dark:text-brand-300'
|
|
152
215
|
: 'text-primary hover:bg-surface-overlay',
|
|
153
216
|
item.disabled && 'cursor-not-allowed opacity-40'
|
|
154
217
|
]}
|
|
155
218
|
>
|
|
156
|
-
<span>
|
|
219
|
+
<span class="gap-3 min-w-0 flex flex-1 items-center">
|
|
220
|
+
{#if showIconColumn}
|
|
221
|
+
<span
|
|
222
|
+
class={[
|
|
223
|
+
'h-8 w-8 rounded-lg flex shrink-0 items-center justify-center',
|
|
224
|
+
index === activeIndex
|
|
225
|
+
? 'bg-brand-100/80 text-brand-700 dark:bg-brand-900/50 dark:text-brand-300'
|
|
226
|
+
: 'bg-surface-overlay text-muted'
|
|
227
|
+
]}
|
|
228
|
+
aria-hidden="true"
|
|
229
|
+
>
|
|
230
|
+
{#if Icon}
|
|
231
|
+
<Icon size={16} strokeWidth={2} />
|
|
232
|
+
{/if}
|
|
233
|
+
</span>
|
|
234
|
+
{/if}
|
|
235
|
+
<span class="min-w-0 flex-1">
|
|
236
|
+
<span class="block truncate">{item.label}</span>
|
|
237
|
+
{#if item.subtitle}
|
|
238
|
+
<span class="mt-0.5 text-xs text-muted block truncate"
|
|
239
|
+
>{item.subtitle}</span
|
|
240
|
+
>
|
|
241
|
+
{/if}
|
|
242
|
+
</span>
|
|
243
|
+
</span>
|
|
157
244
|
{#if item.shortcut?.length}
|
|
158
245
|
<Kbd keys={item.shortcut} size="sm" />
|
|
159
246
|
{/if}
|
|
@@ -1,18 +1,31 @@
|
|
|
1
|
+
import type { Component } from 'svelte';
|
|
2
|
+
export type CommandIcon = Component<{
|
|
3
|
+
class?: string;
|
|
4
|
+
size?: number | string;
|
|
5
|
+
strokeWidth?: number | string;
|
|
6
|
+
}>;
|
|
1
7
|
export interface CommandItem {
|
|
2
8
|
id: string;
|
|
3
9
|
label: string;
|
|
4
10
|
group?: string;
|
|
5
11
|
shortcut?: string[];
|
|
6
12
|
disabled?: boolean;
|
|
13
|
+
subtitle?: string;
|
|
14
|
+
keywords?: string;
|
|
15
|
+
href?: string;
|
|
16
|
+
icon?: CommandIcon;
|
|
7
17
|
}
|
|
8
18
|
interface CommandPaletteProps {
|
|
9
19
|
open?: boolean;
|
|
10
20
|
items?: CommandItem[];
|
|
11
21
|
placeholder?: string;
|
|
22
|
+
emptyLabel?: string;
|
|
23
|
+
loading?: boolean;
|
|
12
24
|
class?: string;
|
|
13
25
|
onselect?: (item: CommandItem) => void;
|
|
14
26
|
onclose?: () => void;
|
|
27
|
+
onquery?: (query: string) => void;
|
|
15
28
|
}
|
|
16
|
-
declare const CommandPalette:
|
|
29
|
+
declare const CommandPalette: Component<CommandPaletteProps, {}, "open">;
|
|
17
30
|
type CommandPalette = ReturnType<typeof CommandPalette>;
|
|
18
31
|
export default CommandPalette;
|
|
@@ -1,14 +1,36 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
import { FileText, FolderPlus, Search, Settings, UserPlus, Users } from '@lucide/svelte';
|
|
2
3
|
import CommandPalette, { type CommandItem } from './CommandPalette.svelte';
|
|
3
4
|
import Button from '../../atoms/Button/Button.svelte';
|
|
4
5
|
import Kbd from '../../atoms/Kbd/Kbd.svelte';
|
|
5
6
|
|
|
6
7
|
const items: CommandItem[] = [
|
|
7
|
-
{
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
8
|
+
{
|
|
9
|
+
id: 'new',
|
|
10
|
+
label: 'Create project',
|
|
11
|
+
group: 'Actions',
|
|
12
|
+
shortcut: ['⌘', 'N'],
|
|
13
|
+
icon: FolderPlus
|
|
14
|
+
},
|
|
15
|
+
{ id: 'search', label: 'Search files', group: 'Actions', shortcut: ['⌘', 'P'], icon: Search },
|
|
16
|
+
{
|
|
17
|
+
id: 'invoice',
|
|
18
|
+
label: 'FAC-2026-0142',
|
|
19
|
+
subtitle: 'Invoice · Acme S.L.',
|
|
20
|
+
group: 'Documents',
|
|
21
|
+
keywords: 'factura invoice',
|
|
22
|
+
icon: FileText
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
id: 'settings',
|
|
26
|
+
label: 'Open settings',
|
|
27
|
+
group: 'Navigation',
|
|
28
|
+
shortcut: ['⌘', ','],
|
|
29
|
+
href: '/settings',
|
|
30
|
+
icon: Settings
|
|
31
|
+
},
|
|
32
|
+
{ id: 'team', label: 'Invite teammate', group: 'Navigation', icon: UserPlus },
|
|
33
|
+
{ id: 'billing', label: 'Billing', group: 'Navigation', disabled: true, icon: Users }
|
|
12
34
|
];
|
|
13
35
|
|
|
14
36
|
let open = $state(false);
|
|
@@ -24,7 +46,7 @@
|
|
|
24
46
|
|
|
25
47
|
<svelte:window onkeydown={onWindowKey} />
|
|
26
48
|
|
|
27
|
-
<div class="flex flex-col items-center
|
|
49
|
+
<div class="gap-3 flex flex-col items-center">
|
|
28
50
|
<Button size="sm" onclick={() => (open = true)}>
|
|
29
51
|
Open palette
|
|
30
52
|
<Kbd keys={['⌘', 'K']} size="sm" />
|
|
@@ -34,8 +56,4 @@
|
|
|
34
56
|
{/if}
|
|
35
57
|
</div>
|
|
36
58
|
|
|
37
|
-
<CommandPalette
|
|
38
|
-
bind:open
|
|
39
|
-
{items}
|
|
40
|
-
onselect={(item) => (last = item.label)}
|
|
41
|
-
/>
|
|
59
|
+
<CommandPalette bind:open {items} onselect={(item) => (last = item.label)} />
|
package/dist/index.d.ts
CHANGED
|
@@ -666,7 +666,7 @@ export type { NavbarLink } from './components/organisms/Navbar/Navbar.svelte';
|
|
|
666
666
|
export { default as BottomNav } from './components/organisms/BottomNav/BottomNav.svelte';
|
|
667
667
|
export type { BottomNavItem, BottomNavIcon } from './components/organisms/BottomNav/BottomNav.svelte';
|
|
668
668
|
export { default as CommandPalette } from './components/organisms/CommandPalette/CommandPalette.svelte';
|
|
669
|
-
export type { CommandItem } from './components/organisms/CommandPalette/CommandPalette.svelte';
|
|
669
|
+
export type { CommandItem, CommandIcon } from './components/organisms/CommandPalette/CommandPalette.svelte';
|
|
670
670
|
export { default as AppShell } from './components/organisms/AppShell/AppShell.svelte';
|
|
671
671
|
export { getAppChrome, setAppChrome, AppChrome } from './components/organisms/AppShell/app-chrome.svelte.js';
|
|
672
672
|
export type { AppShellContextual } from './components/organisms/AppShell/app-chrome.svelte.js';
|
package/dist/utils/i18n.d.ts
CHANGED
|
@@ -14,6 +14,10 @@ export interface UiMessages {
|
|
|
14
14
|
addItem: string;
|
|
15
15
|
removeItem: string;
|
|
16
16
|
noItems: string;
|
|
17
|
+
/** CommandPalette */
|
|
18
|
+
noResults: string;
|
|
19
|
+
commandPalette: string;
|
|
20
|
+
commandPalettePlaceholder: string;
|
|
17
21
|
/** FileUploader */
|
|
18
22
|
uploadFiles: string;
|
|
19
23
|
uploadHelper: string;
|
package/dist/utils/i18n.js
CHANGED
|
@@ -12,6 +12,9 @@ const en = {
|
|
|
12
12
|
addItem: 'Add item',
|
|
13
13
|
removeItem: 'Remove item',
|
|
14
14
|
noItems: 'No items yet',
|
|
15
|
+
noResults: 'No results',
|
|
16
|
+
commandPalette: 'Command palette',
|
|
17
|
+
commandPalettePlaceholder: 'Type a command or search…',
|
|
15
18
|
uploadFiles: 'Upload files',
|
|
16
19
|
uploadHelper: 'SVG, PNG, JPG or GIF (max. 10MB)',
|
|
17
20
|
dropToUpload: 'Drop files to upload',
|
|
@@ -56,6 +59,9 @@ const es = {
|
|
|
56
59
|
addItem: 'Añadir elemento',
|
|
57
60
|
removeItem: 'Eliminar elemento',
|
|
58
61
|
noItems: 'Sin elementos todavía',
|
|
62
|
+
noResults: 'Sin resultados',
|
|
63
|
+
commandPalette: 'Paleta de comandos',
|
|
64
|
+
commandPalettePlaceholder: 'Escribe un comando o busca…',
|
|
59
65
|
uploadFiles: 'Subir archivos',
|
|
60
66
|
uploadHelper: 'SVG, PNG, JPG o GIF (máx. 10MB)',
|
|
61
67
|
dropToUpload: 'Suelta los archivos para subirlos',
|
|
@@ -100,6 +106,9 @@ const pt = {
|
|
|
100
106
|
addItem: 'Adicionar item',
|
|
101
107
|
removeItem: 'Remover item',
|
|
102
108
|
noItems: 'Ainda sem itens',
|
|
109
|
+
noResults: 'Sem resultados',
|
|
110
|
+
commandPalette: 'Paleta de comandos',
|
|
111
|
+
commandPalettePlaceholder: 'Escreve um comando ou pesquisa…',
|
|
103
112
|
uploadFiles: 'Carregar ficheiros',
|
|
104
113
|
uploadHelper: 'SVG, PNG, JPG ou GIF (máx. 10MB)',
|
|
105
114
|
dropToUpload: 'Largue os ficheiros para carregar',
|
|
@@ -144,6 +153,9 @@ const fr = {
|
|
|
144
153
|
addItem: 'Ajouter un élément',
|
|
145
154
|
removeItem: 'Supprimer l’élément',
|
|
146
155
|
noItems: 'Aucun élément pour l’instant',
|
|
156
|
+
noResults: 'Aucun résultat',
|
|
157
|
+
commandPalette: 'Palette de commandes',
|
|
158
|
+
commandPalettePlaceholder: 'Tapez une commande ou recherchez…',
|
|
147
159
|
uploadFiles: 'Téléverser des fichiers',
|
|
148
160
|
uploadHelper: 'SVG, PNG, JPG ou GIF (max. 10MB)',
|
|
149
161
|
dropToUpload: 'Déposez les fichiers pour les téléverser',
|
|
@@ -188,6 +200,9 @@ const de = {
|
|
|
188
200
|
addItem: 'Element hinzufügen',
|
|
189
201
|
removeItem: 'Element entfernen',
|
|
190
202
|
noItems: 'Noch keine Elemente',
|
|
203
|
+
noResults: 'Keine Ergebnisse',
|
|
204
|
+
commandPalette: 'Befehlspalette',
|
|
205
|
+
commandPalettePlaceholder: 'Befehl eingeben oder suchen…',
|
|
191
206
|
uploadFiles: 'Dateien hochladen',
|
|
192
207
|
uploadHelper: 'SVG, PNG, JPG oder GIF (max. 10MB)',
|
|
193
208
|
dropToUpload: 'Dateien zum Hochladen ablegen',
|
|
@@ -232,6 +247,9 @@ const ca = {
|
|
|
232
247
|
addItem: 'Afegir element',
|
|
233
248
|
removeItem: 'Eliminar element',
|
|
234
249
|
noItems: 'Encara sense elements',
|
|
250
|
+
noResults: 'Sense resultats',
|
|
251
|
+
commandPalette: 'Paleta de comandes',
|
|
252
|
+
commandPalettePlaceholder: 'Escriu una comanda o cerca…',
|
|
235
253
|
uploadFiles: 'Pujar fitxers',
|
|
236
254
|
uploadHelper: 'SVG, PNG, JPG o GIF (màx. 10MB)',
|
|
237
255
|
dropToUpload: 'Deixa anar els fitxers per pujar-los',
|