@peektravel/app-utilities 0.1.1 → 0.1.2
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/README.md +96 -27
- package/dist/index.cjs +138 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +81 -1
- package/dist/index.d.ts +81 -1
- package/dist/index.js +138 -1
- package/dist/index.js.map +1 -1
- package/dist/ui/index.cjs +3926 -0
- package/dist/ui/index.cjs.map +1 -0
- package/dist/ui/index.d.cts +1479 -0
- package/dist/ui/index.d.ts +1479 -0
- package/dist/ui/index.js +3847 -0
- package/dist/ui/index.js.map +1 -0
- package/dist/ui/odyssey.css +781 -0
- package/dist/ui/tokens.css +104 -0
- package/docs/ui.md +1001 -0
- package/llms.txt +49 -5
- package/package.json +22 -4
|
@@ -0,0 +1,1479 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Localization for the Odyssey Web Components' **built-in** strings (aria-labels,
|
|
3
|
+
* default placeholders, status labels — not consumer-provided content).
|
|
4
|
+
*
|
|
5
|
+
* The active language is resolved from the DOM: a component reads the closest
|
|
6
|
+
* ancestor `lang` attribute (so `<html lang="es">` localizes everything), with
|
|
7
|
+
* fallback to English. Consumers register term bundles once:
|
|
8
|
+
*
|
|
9
|
+
* ```ts
|
|
10
|
+
* import { registerTranslation } from '@peektravel/app-utilities/ui';
|
|
11
|
+
* registerTranslation('es', { close: 'Cerrar', clear: 'Borrar', search: 'Buscar' });
|
|
12
|
+
* ```
|
|
13
|
+
*
|
|
14
|
+
* A single instance can still be overridden with a per-instance attribute
|
|
15
|
+
* (e.g. `<ody-panel close-label="Cerrar">`), which wins over the registry.
|
|
16
|
+
*/
|
|
17
|
+
/** The full set of built-in term keys. Bundles may provide any subset. */
|
|
18
|
+
interface OdyTerms {
|
|
19
|
+
close: string;
|
|
20
|
+
clear: string;
|
|
21
|
+
search: string;
|
|
22
|
+
noOptions: string;
|
|
23
|
+
previousMonth: string;
|
|
24
|
+
nextMonth: string;
|
|
25
|
+
selectDate: string;
|
|
26
|
+
openSubMenu: string;
|
|
27
|
+
toggleMenu: string;
|
|
28
|
+
breadcrumb: string;
|
|
29
|
+
radioGroup: string;
|
|
30
|
+
toggleGroup: string;
|
|
31
|
+
checkInInProgress: string;
|
|
32
|
+
checkInNoShow: string;
|
|
33
|
+
checkInOverdue: string;
|
|
34
|
+
checkInReserved: string;
|
|
35
|
+
checkInReturned: string;
|
|
36
|
+
checkInNone: string;
|
|
37
|
+
}
|
|
38
|
+
type OdyTermKey = keyof OdyTerms;
|
|
39
|
+
/**
|
|
40
|
+
* Register (or extend) a translation bundle for a BCP-47 language code
|
|
41
|
+
* (e.g. `'es'`, `'fr-CA'`). Re-registering merges into the existing bundle and
|
|
42
|
+
* triggers a re-render of mounted components.
|
|
43
|
+
*/
|
|
44
|
+
declare function registerTranslation(lang: string, terms: Partial<OdyTerms>): void;
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Shared base class and helpers for the Odyssey Web Components.
|
|
48
|
+
*
|
|
49
|
+
* The components render into the **light DOM** (no Shadow DOM) on purpose: the
|
|
50
|
+
* shipped `odyssey.css` global classes then style them exactly as the Ember
|
|
51
|
+
* addon does, and consuming apps can override with the same selectors. The base
|
|
52
|
+
* handles the common plumbing — re-rendering when an observed attribute
|
|
53
|
+
* changes, and preserving consumer-provided child content ("slotted" nodes)
|
|
54
|
+
* across those re-renders.
|
|
55
|
+
*
|
|
56
|
+
* It also localizes **built-in** strings: {@link term} resolves a term for the
|
|
57
|
+
* element's language (the nearest `lang` ancestor), and components re-render
|
|
58
|
+
* automatically when the language or a registered bundle changes.
|
|
59
|
+
*/
|
|
60
|
+
|
|
61
|
+
declare abstract class OdyElement extends HTMLElement {
|
|
62
|
+
#private;
|
|
63
|
+
connectedCallback(): void;
|
|
64
|
+
attributeChangedCallback(): void;
|
|
65
|
+
/** Build the component's inner markup; implementations call {@link mount}. */
|
|
66
|
+
protected abstract render(): void;
|
|
67
|
+
/**
|
|
68
|
+
* Replace the element's inner markup with `chrome`, then re-insert any
|
|
69
|
+
* consumer-provided child nodes into the placeholder element marked with a
|
|
70
|
+
* `data-ody-slot` attribute (if the chrome declares one). Idempotent — safe
|
|
71
|
+
* to call on every attribute change without losing the original children.
|
|
72
|
+
*/
|
|
73
|
+
protected mount(chrome: string): void;
|
|
74
|
+
/** Read a string attribute with a fallback. */
|
|
75
|
+
protected attr(name: string, fallback?: string): string;
|
|
76
|
+
/** Whether a boolean attribute is present and not explicitly `"false"`. */
|
|
77
|
+
protected flag(name: string): boolean;
|
|
78
|
+
/** Escape a string for safe interpolation into chrome markup. */
|
|
79
|
+
protected esc(value: string): string;
|
|
80
|
+
/** Translate a built-in term key for this element's resolved language. */
|
|
81
|
+
protected term(key: OdyTermKey): string;
|
|
82
|
+
/**
|
|
83
|
+
* A per-instance attribute override (e.g. `close-label`) when present,
|
|
84
|
+
* otherwise the localized built-in term. Result is HTML-escaped for safe
|
|
85
|
+
* interpolation into chrome (e.g. inside an `aria-label="…"`).
|
|
86
|
+
*/
|
|
87
|
+
protected localized(attrName: string, key: OdyTermKey): string;
|
|
88
|
+
disconnectedCallback(): void;
|
|
89
|
+
}
|
|
90
|
+
/** HTML-escape a string (ampersand, angle brackets, quotes). */
|
|
91
|
+
declare function escapeHtml(value: string): string;
|
|
92
|
+
/**
|
|
93
|
+
* Join class-name fragments, dropping falsy entries. Keeps component templates
|
|
94
|
+
* readable when classes are conditional.
|
|
95
|
+
*/
|
|
96
|
+
declare function classes(...parts: Array<string | false | null | undefined>): string;
|
|
97
|
+
/**
|
|
98
|
+
* Register a custom element under `tag`, guarding against double registration
|
|
99
|
+
* (and against running in a non-DOM environment such as a Node import).
|
|
100
|
+
*/
|
|
101
|
+
declare function define(tag: string, ctor: CustomElementConstructor): void;
|
|
102
|
+
|
|
103
|
+
type OdyIconSize = 'extra-small' | 'mid-small' | 'small' | 'base' | 'medium' | 'large' | 'free';
|
|
104
|
+
/**
|
|
105
|
+
* `<ody-icon>` — renders a named inline SVG from the bundled icon set.
|
|
106
|
+
*
|
|
107
|
+
* Attributes:
|
|
108
|
+
* - `name` — icon name (see `icons.ts`); unknown names render nothing.
|
|
109
|
+
* - `size` — one of {@link OdyIconSize} (default `base`).
|
|
110
|
+
* - `disabled` — dims the icon.
|
|
111
|
+
*/
|
|
112
|
+
declare class OdyIcon extends OdyElement {
|
|
113
|
+
static observedAttributes: string[];
|
|
114
|
+
protected render(): void;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
type OdyButtonVariant = 'primary' | 'secondary' | 'ghost' | 'tertiary' | 'danger';
|
|
118
|
+
type OdyButtonAppearance = 'success' | 'interaction' | 'danger' | 'grey';
|
|
119
|
+
type OdyButtonSize = 'base' | 'small';
|
|
120
|
+
/**
|
|
121
|
+
* `<ody-button>` — the Odyssey button. The text label is the element's child
|
|
122
|
+
* content; icons and state are driven by attributes.
|
|
123
|
+
*
|
|
124
|
+
* Attributes:
|
|
125
|
+
* - `variant` — `primary` | `secondary` | `ghost` | `tertiary` | `danger` (default `primary`).
|
|
126
|
+
* - `appearance` — colour intent `interaction` | `success` | `danger` | `grey` (default `interaction`).
|
|
127
|
+
* - `size` — `base` | `small` (default `base`).
|
|
128
|
+
* - `type` — native button type `button` | `submit` (default `button`).
|
|
129
|
+
* - `left-icon` / `right-icon` — named icons placed beside the label.
|
|
130
|
+
* - `loading`, `icon-only`, `active`, `disabled`, `icon-rotate` — boolean flags.
|
|
131
|
+
*/
|
|
132
|
+
declare class OdyButton extends OdyElement {
|
|
133
|
+
static observedAttributes: string[];
|
|
134
|
+
protected render(): void;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
type OdyTagVariant = 'primary' | 'secondary';
|
|
138
|
+
type OdyTagColor = 'default' | 'info' | 'success' | 'warning' | 'danger' | 'teal' | 'lime' | 'purple' | 'pink' | 'turquoise' | 'yellow' | 'orange' | 'rose' | 'blue';
|
|
139
|
+
type OdyTagSize = 'base' | 'small';
|
|
140
|
+
/**
|
|
141
|
+
* `<ody-tag>` — a rounded label/pill. Label text is the element's child content.
|
|
142
|
+
*
|
|
143
|
+
* Attributes:
|
|
144
|
+
* - `variant` — `primary` (filled) | `secondary` (outline) (default `primary`).
|
|
145
|
+
* - `color` — semantic/accent colour (default `default`).
|
|
146
|
+
* - `size` — `base` | `small` (default `base`).
|
|
147
|
+
* - `icon` — optional leading icon name.
|
|
148
|
+
* - `count` — optional trailing count.
|
|
149
|
+
*/
|
|
150
|
+
declare class OdyTag extends OdyElement {
|
|
151
|
+
static observedAttributes: string[];
|
|
152
|
+
protected render(): void;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
type OdyAlertVariant = 'info' | 'success' | 'warning' | 'danger';
|
|
156
|
+
/**
|
|
157
|
+
* `<ody-alert>` — a contextual message box. The body is the element's child
|
|
158
|
+
* content; the bold heading line is set via the `heading` attribute.
|
|
159
|
+
*
|
|
160
|
+
* Attributes:
|
|
161
|
+
* - `variant` — `info` | `success` | `warning` | `danger` (default `info`).
|
|
162
|
+
* - `heading` — optional bold message shown beside the icon.
|
|
163
|
+
*/
|
|
164
|
+
declare class OdyAlert extends OdyElement {
|
|
165
|
+
static observedAttributes: string[];
|
|
166
|
+
protected render(): void;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/**
|
|
170
|
+
* `<ody-card>` — a bordered content container with an accent bar on the left.
|
|
171
|
+
* Card content is the element's child content.
|
|
172
|
+
*
|
|
173
|
+
* Attributes:
|
|
174
|
+
* - `bar-color` — CSS colour for the accent bar (default neutral-200).
|
|
175
|
+
* - `clickable` — adds pointer affordance (emit your own click handling).
|
|
176
|
+
*/
|
|
177
|
+
declare class OdyCard extends OdyElement {
|
|
178
|
+
static observedAttributes: string[];
|
|
179
|
+
protected render(): void;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/** `<ody-divider>` — a 1px horizontal rule that fills its container width. */
|
|
183
|
+
declare class OdyDivider extends OdyElement {
|
|
184
|
+
protected render(): void;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
type OdyStatusDotColor = 'green' | 'blue' | 'orange';
|
|
188
|
+
/**
|
|
189
|
+
* `<ody-status-dot>` — a coloured dot with a label. Label is the child content.
|
|
190
|
+
*
|
|
191
|
+
* Attributes:
|
|
192
|
+
* - `color` — `green` | `blue` | `orange` (default `green`).
|
|
193
|
+
*/
|
|
194
|
+
declare class OdyStatusDot extends OdyElement {
|
|
195
|
+
static observedAttributes: string[];
|
|
196
|
+
protected render(): void;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
/**
|
|
200
|
+
* `<ody-message>` — a small inline status message with an optional leading
|
|
201
|
+
* icon. Message text is the element's child content.
|
|
202
|
+
*
|
|
203
|
+
* Attributes:
|
|
204
|
+
* - `icon` — optional leading icon name.
|
|
205
|
+
*/
|
|
206
|
+
declare class OdyMessage extends OdyElement {
|
|
207
|
+
static observedAttributes: string[];
|
|
208
|
+
protected render(): void;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
type OdySpinnerSize = 'small' | 'base' | 'large';
|
|
212
|
+
/**
|
|
213
|
+
* `<ody-loading-spinner>` — an animated spinner with an optional label
|
|
214
|
+
* (the element's child content).
|
|
215
|
+
*
|
|
216
|
+
* Attributes:
|
|
217
|
+
* - `size` — `small` | `base` | `large` (default `base`).
|
|
218
|
+
*/
|
|
219
|
+
declare class OdyLoadingSpinner extends OdyElement {
|
|
220
|
+
static observedAttributes: string[];
|
|
221
|
+
protected render(): void;
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
/**
|
|
225
|
+
* `<ody-loading-bar>` — a horizontal progress bar.
|
|
226
|
+
*
|
|
227
|
+
* Attributes:
|
|
228
|
+
* - `value` — fill percentage, clamped to 0–100 (default 0).
|
|
229
|
+
* - `color` — CSS colour for the fill (default interaction-300).
|
|
230
|
+
* - `label` — optional caption shown above the bar with the percentage.
|
|
231
|
+
*/
|
|
232
|
+
declare class OdyLoadingBar extends OdyElement {
|
|
233
|
+
static observedAttributes: string[];
|
|
234
|
+
protected render(): void;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
/**
|
|
238
|
+
* Built-in empty-state variants. Each maps to a default icon when no explicit
|
|
239
|
+
* `icon`/`img-src` is supplied — mirroring the Odyssey `empty-state-*` SVGs.
|
|
240
|
+
*/
|
|
241
|
+
type OdyEmptyStateVariant = 'default' | 'error' | 'no-results' | 'no-search' | 'not-authorized';
|
|
242
|
+
/**
|
|
243
|
+
* `<ody-empty-state>` — a centred placeholder for empty/error/no-results views.
|
|
244
|
+
* The element's child content is rendered below the label/caption (e.g. an
|
|
245
|
+
* action button).
|
|
246
|
+
*
|
|
247
|
+
* Attributes:
|
|
248
|
+
* - `variant` — `default` | `error` | `no-results` | `no-search` | `not-authorized`
|
|
249
|
+
* (default `default`); selects a fallback illustration icon.
|
|
250
|
+
* - `img-src` / `img-alt` — render a custom image instead of the icon.
|
|
251
|
+
* - `icon` — override the illustration with a named icon.
|
|
252
|
+
* - `label` — bold primary message.
|
|
253
|
+
* - `caption` — secondary message.
|
|
254
|
+
*/
|
|
255
|
+
declare class OdyEmptyState extends OdyElement {
|
|
256
|
+
static observedAttributes: string[];
|
|
257
|
+
protected render(): void;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
/**
|
|
261
|
+
* `<ody-breadcrumb>` — a breadcrumb trail. Compose with nested
|
|
262
|
+
* `<ody-breadcrumb-item>` children; the wrapper renders the
|
|
263
|
+
* `<nav><ol>` chrome and the items render the `<li>` rows.
|
|
264
|
+
*
|
|
265
|
+
* Example:
|
|
266
|
+
* ```html
|
|
267
|
+
* <ody-breadcrumb>
|
|
268
|
+
* <ody-breadcrumb-item><a href="/">Home</a></ody-breadcrumb-item>
|
|
269
|
+
* <ody-breadcrumb-item current>Details</ody-breadcrumb-item>
|
|
270
|
+
* </ody-breadcrumb>
|
|
271
|
+
* ```
|
|
272
|
+
*/
|
|
273
|
+
declare class OdyBreadcrumb extends OdyElement {
|
|
274
|
+
protected render(): void;
|
|
275
|
+
}
|
|
276
|
+
/**
|
|
277
|
+
* `<ody-breadcrumb-item>` — a single crumb. Label/link is the child content.
|
|
278
|
+
*
|
|
279
|
+
* Attributes:
|
|
280
|
+
* - `current` — marks the active page (`aria-current="page"` + active style).
|
|
281
|
+
*/
|
|
282
|
+
declare class OdyBreadcrumbItem extends OdyElement {
|
|
283
|
+
static observedAttributes: string[];
|
|
284
|
+
protected render(): void;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
/** Colour tone for a stat's value. */
|
|
288
|
+
type OdyStatTone = 'default' | 'success' | 'warning';
|
|
289
|
+
/**
|
|
290
|
+
* `<ody-stat-summary>` — a bordered card grouping a row of `<ody-stat>` figures.
|
|
291
|
+
* For the optional detail strip, render an `<ody-stat-summary-detail>` as a
|
|
292
|
+
* sibling immediately after it (see that component).
|
|
293
|
+
*
|
|
294
|
+
* Simplest usage — stats only:
|
|
295
|
+
* ```html
|
|
296
|
+
* <ody-stat-summary>
|
|
297
|
+
* <ody-stat label="Revenue" value="$1,200"></ody-stat>
|
|
298
|
+
* <ody-stat label="Bookings" value="34" tone="success"></ody-stat>
|
|
299
|
+
* </ody-stat-summary>
|
|
300
|
+
* ```
|
|
301
|
+
*/
|
|
302
|
+
declare class OdyStatSummary extends OdyElement {
|
|
303
|
+
protected render(): void;
|
|
304
|
+
}
|
|
305
|
+
/**
|
|
306
|
+
* `<ody-stat>` — a single labelled figure inside an `<ody-stat-summary>`.
|
|
307
|
+
*
|
|
308
|
+
* Attributes:
|
|
309
|
+
* - `label` — caption above the value.
|
|
310
|
+
* - `value` — the prominent figure (falls back to child content if omitted).
|
|
311
|
+
* - `sub` — small sub-text below the value.
|
|
312
|
+
* - `tone` — `default` | `success` | `warning` (colours the value).
|
|
313
|
+
*/
|
|
314
|
+
declare class OdyStat extends OdyElement {
|
|
315
|
+
static observedAttributes: string[];
|
|
316
|
+
protected render(): void;
|
|
317
|
+
}
|
|
318
|
+
/**
|
|
319
|
+
* `<ody-stat-detail>` — a small key/value pair for the detail strip beneath a
|
|
320
|
+
* stat summary. Place inside an `<ody-stat-summary-detail>` group.
|
|
321
|
+
*
|
|
322
|
+
* Attributes:
|
|
323
|
+
* - `value` — the bold value text appended after the label (child content).
|
|
324
|
+
*/
|
|
325
|
+
declare class OdyStatDetail extends OdyElement {
|
|
326
|
+
static observedAttributes: string[];
|
|
327
|
+
protected render(): void;
|
|
328
|
+
}
|
|
329
|
+
/**
|
|
330
|
+
* `<ody-stat-summary-detail>` — the optional detail strip rendered under a
|
|
331
|
+
* `<ody-stat-summary>` (divider + a row of `<ody-stat-detail>` items). Place it
|
|
332
|
+
* as a sibling after the stat summary.
|
|
333
|
+
*/
|
|
334
|
+
declare class OdyStatSummaryDetail extends OdyElement {
|
|
335
|
+
protected render(): void;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
type OdyInlineListSeparator = 'line' | 'bullet';
|
|
339
|
+
/**
|
|
340
|
+
* `<ody-inline-list>` — a horizontal list whose items are separated by a thin
|
|
341
|
+
* rule or a bullet. Compose with nested `<ody-inline-list-item>` children.
|
|
342
|
+
*
|
|
343
|
+
* Attributes:
|
|
344
|
+
* - `separator` — `line` | `bullet` (default `line`).
|
|
345
|
+
* - `gap` — spacing in px between items (default `12`).
|
|
346
|
+
*
|
|
347
|
+
* Example:
|
|
348
|
+
* ```html
|
|
349
|
+
* <ody-inline-list separator="bullet" gap="8">
|
|
350
|
+
* <ody-inline-list-item>One</ody-inline-list-item>
|
|
351
|
+
* <ody-inline-list-item>Two</ody-inline-list-item>
|
|
352
|
+
* </ody-inline-list>
|
|
353
|
+
* ```
|
|
354
|
+
*/
|
|
355
|
+
declare class OdyInlineList extends OdyElement {
|
|
356
|
+
static observedAttributes: string[];
|
|
357
|
+
protected render(): void;
|
|
358
|
+
}
|
|
359
|
+
/**
|
|
360
|
+
* `<ody-inline-list-item>` — a single item inside an `<ody-inline-list>`. Item
|
|
361
|
+
* content is the element's child content.
|
|
362
|
+
*/
|
|
363
|
+
declare class OdyInlineListItem extends OdyElement {
|
|
364
|
+
protected render(): void;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
/**
|
|
368
|
+
* `<ody-list-item>` — a clickable list row with content on the left and a
|
|
369
|
+
* forward chevron on the right. The row content is the element's child content.
|
|
370
|
+
* Clicking (or pressing Enter/Space) emits a `select` `CustomEvent` whose
|
|
371
|
+
* `detail` is `{ itemId }`.
|
|
372
|
+
*
|
|
373
|
+
* Attributes:
|
|
374
|
+
* - `item-id` — identifier emitted in the `select` event.
|
|
375
|
+
* - `active-item-id` — when it equals `item-id`, the row renders active.
|
|
376
|
+
* - `active` — force the active style regardless of the ids.
|
|
377
|
+
*/
|
|
378
|
+
declare class OdyListItem extends OdyElement {
|
|
379
|
+
#private;
|
|
380
|
+
static observedAttributes: string[];
|
|
381
|
+
connectedCallback(): void;
|
|
382
|
+
disconnectedCallback(): void;
|
|
383
|
+
protected render(): void;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
type OdyProductIndicatorSize = 'base' | 'small';
|
|
387
|
+
/**
|
|
388
|
+
* `<ody-product-indicator>` — a coloured vertical bar beside a product name and
|
|
389
|
+
* optional detail line. Extra content (e.g. a tag) is the element's child
|
|
390
|
+
* content, rendered after the name/detail.
|
|
391
|
+
*
|
|
392
|
+
* Attributes:
|
|
393
|
+
* - `name` — the product name (bold line).
|
|
394
|
+
* - `detail` — a secondary detail line.
|
|
395
|
+
* - `bar-color` — CSS colour for the accent bar (default neutral-400).
|
|
396
|
+
* - `text-color` — CSS colour for the name text.
|
|
397
|
+
* - `size` — `base` | `small` (default `base`).
|
|
398
|
+
* - `indicator-id` — when set together with `clickable`, emitted in the `select`
|
|
399
|
+
* event `detail` as `{ id }`.
|
|
400
|
+
* - `clickable` — makes the whole indicator a button that emits `select`.
|
|
401
|
+
*/
|
|
402
|
+
declare class OdyProductIndicator extends OdyElement {
|
|
403
|
+
#private;
|
|
404
|
+
static observedAttributes: string[];
|
|
405
|
+
connectedCallback(): void;
|
|
406
|
+
disconnectedCallback(): void;
|
|
407
|
+
protected render(): void;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
type OdyToggleButtonSize = 'base' | 'small';
|
|
411
|
+
/** A single option in an {@link OdyToggleButton} group. */
|
|
412
|
+
interface OdyToggleOption {
|
|
413
|
+
/** Value emitted in the `change` event when selected. */
|
|
414
|
+
value: string;
|
|
415
|
+
/** Visible label (omit for an icon-only button). */
|
|
416
|
+
label?: string;
|
|
417
|
+
/** Optional leading icon name. */
|
|
418
|
+
leftIcon?: string;
|
|
419
|
+
/** Optional trailing icon name. */
|
|
420
|
+
rightIcon?: string;
|
|
421
|
+
/** Render as an icon-only square button. */
|
|
422
|
+
iconOnly?: boolean;
|
|
423
|
+
/** Disable this individual option. */
|
|
424
|
+
disabled?: boolean;
|
|
425
|
+
}
|
|
426
|
+
/**
|
|
427
|
+
* `<ody-toggle-button>` — a segmented control of mutually-exclusive buttons.
|
|
428
|
+
* Selecting an option emits a `change` `CustomEvent` whose `detail` is
|
|
429
|
+
* `{ value }`; the `selected` attribute reflects the active value.
|
|
430
|
+
*
|
|
431
|
+
* Attributes:
|
|
432
|
+
* - `options` — JSON array of {@link OdyToggleOption} (e.g.
|
|
433
|
+
* `options='[{"value":"day","label":"Day"},{"value":"week","label":"Week"}]'`).
|
|
434
|
+
* - `selected` — the currently-selected option value.
|
|
435
|
+
* - `size` — `base` | `small` (default `base`).
|
|
436
|
+
* - `disabled` — disables the whole group.
|
|
437
|
+
*/
|
|
438
|
+
declare class OdyToggleButton extends OdyElement {
|
|
439
|
+
#private;
|
|
440
|
+
static observedAttributes: string[];
|
|
441
|
+
connectedCallback(): void;
|
|
442
|
+
disconnectedCallback(): void;
|
|
443
|
+
protected render(): void;
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
/** Gap between section children, in pixels. */
|
|
447
|
+
type OdySectionGap = '8' | '16' | '24' | '32';
|
|
448
|
+
/** Vertical alignment for columns. */
|
|
449
|
+
type OdySectionVerticalAlign = 'center' | 'top' | 'bottom';
|
|
450
|
+
/**
|
|
451
|
+
* `<ody-section-columns>` — lays out child `<ody-section-column-item>` elements
|
|
452
|
+
* in a row.
|
|
453
|
+
*
|
|
454
|
+
* Attributes:
|
|
455
|
+
* - `gap-size` — `8` | `16` | `24` | `32` px (default `16`).
|
|
456
|
+
* - `vertical-align` — `center` | `top` | `bottom` (default `bottom`).
|
|
457
|
+
*/
|
|
458
|
+
declare class OdySectionColumns extends OdyElement {
|
|
459
|
+
static observedAttributes: string[];
|
|
460
|
+
protected render(): void;
|
|
461
|
+
}
|
|
462
|
+
/**
|
|
463
|
+
* `<ody-section-column-item>` — a column inside `<ody-section-columns>`.
|
|
464
|
+
*
|
|
465
|
+
* Attributes (boolean flags):
|
|
466
|
+
* - `no-grow` — size to content instead of filling.
|
|
467
|
+
* - `individual-scroll` — scroll this column independently.
|
|
468
|
+
* - `stretch` — stretch to the row's height.
|
|
469
|
+
* - `with-padding` — add 16px internal padding.
|
|
470
|
+
*/
|
|
471
|
+
declare class OdySectionColumnItem extends OdyElement {
|
|
472
|
+
static observedAttributes: string[];
|
|
473
|
+
protected render(): void;
|
|
474
|
+
}
|
|
475
|
+
/**
|
|
476
|
+
* `<ody-section-rows>` — stacks child `<ody-section-row-item>` elements
|
|
477
|
+
* vertically.
|
|
478
|
+
*
|
|
479
|
+
* Attributes:
|
|
480
|
+
* - `gap-size` — `8` | `16` | `24` | `32` px (default `16`).
|
|
481
|
+
*/
|
|
482
|
+
declare class OdySectionRows extends OdyElement {
|
|
483
|
+
static observedAttributes: string[];
|
|
484
|
+
protected render(): void;
|
|
485
|
+
}
|
|
486
|
+
/**
|
|
487
|
+
* `<ody-section-row-item>` — a row inside `<ody-section-rows>`, optionally with
|
|
488
|
+
* a title/description header and a trailing divider.
|
|
489
|
+
*
|
|
490
|
+
* Attributes:
|
|
491
|
+
* - `title` — bold header line.
|
|
492
|
+
* - `description` — secondary header line.
|
|
493
|
+
* - `description-icon` — named icon shown before the description.
|
|
494
|
+
* - `no-divider` — suppress the trailing divider.
|
|
495
|
+
*/
|
|
496
|
+
declare class OdySectionRowItem extends OdyElement {
|
|
497
|
+
static observedAttributes: string[];
|
|
498
|
+
protected render(): void;
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
/**
|
|
502
|
+
* `<ody-two-column>` — a master/detail layout: a main content area beside an
|
|
503
|
+
* optional secondary panel. Compose with `<ody-two-column-main>` and
|
|
504
|
+
* `<ody-two-column-secondary>` children. The secondary panel is shown only when
|
|
505
|
+
* the `secondary-open` attribute is present.
|
|
506
|
+
*
|
|
507
|
+
* Attributes:
|
|
508
|
+
* - `secondary-open` — when present, reveals the secondary panel.
|
|
509
|
+
*
|
|
510
|
+
* Example:
|
|
511
|
+
* ```html
|
|
512
|
+
* <ody-two-column secondary-open>
|
|
513
|
+
* <ody-two-column-main>…list…</ody-two-column-main>
|
|
514
|
+
* <ody-two-column-secondary>
|
|
515
|
+
* <ody-two-column-secondary-header title="Details"></ody-two-column-secondary-header>
|
|
516
|
+
* …detail…
|
|
517
|
+
* </ody-two-column-secondary>
|
|
518
|
+
* </ody-two-column>
|
|
519
|
+
* ```
|
|
520
|
+
*/
|
|
521
|
+
declare class OdyTwoColumn extends OdyElement {
|
|
522
|
+
static observedAttributes: string[];
|
|
523
|
+
protected render(): void;
|
|
524
|
+
}
|
|
525
|
+
/**
|
|
526
|
+
* `<ody-two-column-main>` — the primary content area inside `<ody-two-column>`.
|
|
527
|
+
*/
|
|
528
|
+
declare class OdyTwoColumnMain extends OdyElement {
|
|
529
|
+
protected render(): void;
|
|
530
|
+
}
|
|
531
|
+
/**
|
|
532
|
+
* `<ody-two-column-secondary>` — the secondary/detail panel inside
|
|
533
|
+
* `<ody-two-column>`. Hidden unless the parent has `secondary-open`.
|
|
534
|
+
*/
|
|
535
|
+
declare class OdyTwoColumnSecondary extends OdyElement {
|
|
536
|
+
protected render(): void;
|
|
537
|
+
}
|
|
538
|
+
/**
|
|
539
|
+
* `<ody-two-column-secondary-header>` — a title bar with a close button for the
|
|
540
|
+
* secondary panel. Clicking the close button emits a `close` `CustomEvent`.
|
|
541
|
+
*
|
|
542
|
+
* Attributes:
|
|
543
|
+
* - `title` — the header title text.
|
|
544
|
+
*/
|
|
545
|
+
declare class OdyTwoColumnSecondaryHeader extends OdyElement {
|
|
546
|
+
#private;
|
|
547
|
+
static observedAttributes: string[];
|
|
548
|
+
connectedCallback(): void;
|
|
549
|
+
disconnectedCallback(): void;
|
|
550
|
+
protected render(): void;
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
/**
|
|
554
|
+
* `<ody-collapsible-section>` — a titled section that expands/collapses on
|
|
555
|
+
* header click. Place the expandable body in an `<ody-collapsible-content>`
|
|
556
|
+
* child and the optional always-visible-when-collapsed teaser in an
|
|
557
|
+
* `<ody-collapsible-collapsed>` child. Toggling emits an `expanded`
|
|
558
|
+
* `CustomEvent` whose `detail` is `{ expanded }`.
|
|
559
|
+
*
|
|
560
|
+
* Attributes:
|
|
561
|
+
* - `header-text` — the header label.
|
|
562
|
+
* - `secondary-header-text` — lighter text after the header label.
|
|
563
|
+
* - `icon` — optional named icon before the header label.
|
|
564
|
+
* - `expanded` — open initially / reflects the open state.
|
|
565
|
+
*
|
|
566
|
+
* Example:
|
|
567
|
+
* ```html
|
|
568
|
+
* <ody-collapsible-section header-text="Details" icon="info">
|
|
569
|
+
* <ody-collapsible-collapsed>Tap to see more</ody-collapsible-collapsed>
|
|
570
|
+
* <ody-collapsible-content>…full content…</ody-collapsible-content>
|
|
571
|
+
* </ody-collapsible-section>
|
|
572
|
+
* ```
|
|
573
|
+
*/
|
|
574
|
+
declare class OdyCollapsibleSection extends OdyElement {
|
|
575
|
+
#private;
|
|
576
|
+
static observedAttributes: string[];
|
|
577
|
+
connectedCallback(): void;
|
|
578
|
+
disconnectedCallback(): void;
|
|
579
|
+
protected render(): void;
|
|
580
|
+
}
|
|
581
|
+
/**
|
|
582
|
+
* `<ody-collapsible-collapsed>` — teaser content shown only while the parent
|
|
583
|
+
* `<ody-collapsible-section>` is collapsed.
|
|
584
|
+
*/
|
|
585
|
+
declare class OdyCollapsibleCollapsed extends OdyElement {
|
|
586
|
+
protected render(): void;
|
|
587
|
+
}
|
|
588
|
+
/**
|
|
589
|
+
* `<ody-collapsible-content>` — the body shown only while the parent
|
|
590
|
+
* `<ody-collapsible-section>` is expanded.
|
|
591
|
+
*/
|
|
592
|
+
declare class OdyCollapsibleContent extends OdyElement {
|
|
593
|
+
protected render(): void;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
type OdyInputSize = 'base' | 'small';
|
|
597
|
+
type OdyInputState = 'warning' | 'info';
|
|
598
|
+
/**
|
|
599
|
+
* `<ody-input>` — the Odyssey text field. Renders a native `<input>` (or
|
|
600
|
+
* `<textarea>`) in the light DOM so it stays form-friendly and accessible.
|
|
601
|
+
*
|
|
602
|
+
* Attributes:
|
|
603
|
+
* - `label` — optional caption shown above the field.
|
|
604
|
+
* - `placeholder` — native placeholder text.
|
|
605
|
+
* - `value` — current value (also a JS property; see {@link value}).
|
|
606
|
+
* - `size` — `base` | `small` (default `base`).
|
|
607
|
+
* - `icon` — optional leading icon name.
|
|
608
|
+
* - `caption` — neutral helper text in the footer.
|
|
609
|
+
* - `warning` / `info` — message text; also sets the `warning`/`info` state ring.
|
|
610
|
+
* - `maxlength` — when set, shows a character counter.
|
|
611
|
+
* - `textarea` — render a multi-line `<textarea>` instead of an `<input>`.
|
|
612
|
+
* - `readonly`, `disabled`, `full-width`, `max-content` — boolean flags.
|
|
613
|
+
* - `no-clear` — suppress the clear button even when there is a value.
|
|
614
|
+
*
|
|
615
|
+
* Events: dispatches `input` (on every keystroke) and `change` (on the native
|
|
616
|
+
* change / clear) as `CustomEvent<{ value: string }>`, bubbling.
|
|
617
|
+
*/
|
|
618
|
+
declare class OdyInput extends OdyElement {
|
|
619
|
+
#private;
|
|
620
|
+
static observedAttributes: string[];
|
|
621
|
+
/** Current field value. */
|
|
622
|
+
get value(): string;
|
|
623
|
+
set value(next: string);
|
|
624
|
+
protected render(): void;
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
type OdyInlineInputSize = 'base' | 'small';
|
|
628
|
+
/**
|
|
629
|
+
* `<ody-inline-input>` — the thin "inline" variant of {@link OdyInput}. Same
|
|
630
|
+
* native-control behaviour, but with the compact `ody-inline-input__group`
|
|
631
|
+
* chrome (a borderless label/field row used inside tables and forms).
|
|
632
|
+
*
|
|
633
|
+
* Attributes mirror `<ody-input>`: `label`, `placeholder`, `value`, `size`,
|
|
634
|
+
* `icon`, `caption`, `warning`, `info`, `maxlength`, `textarea`, `readonly`,
|
|
635
|
+
* `disabled`, `full-width`, `max-content`, `no-clear`.
|
|
636
|
+
*
|
|
637
|
+
* Events: `input` and `change` as `CustomEvent<{ value: string }>`, bubbling.
|
|
638
|
+
*/
|
|
639
|
+
declare class OdyInlineInput extends OdyElement {
|
|
640
|
+
#private;
|
|
641
|
+
static observedAttributes: string[];
|
|
642
|
+
/** Current field value. */
|
|
643
|
+
get value(): string;
|
|
644
|
+
set value(next: string);
|
|
645
|
+
protected render(): void;
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
type OdySearchInputSize = 'base' | 'small';
|
|
649
|
+
/**
|
|
650
|
+
* `<ody-search-input>` — a text field with a leading search icon and a
|
|
651
|
+
* focus-tracking container. Renders a native `<input>` in the light DOM.
|
|
652
|
+
*
|
|
653
|
+
* Attributes:
|
|
654
|
+
* - `value` — current value (also a JS property; see {@link value}).
|
|
655
|
+
* - `placeholder` — placeholder text (default `"Search"`).
|
|
656
|
+
* - `size` — `base` | `small` (default `base`).
|
|
657
|
+
* - `info-message` — neutral helper caption.
|
|
658
|
+
* - `warning-message` — warning caption + ring.
|
|
659
|
+
* - `disabled` — boolean flag.
|
|
660
|
+
*
|
|
661
|
+
* Events: dispatches `input` and `change` as `CustomEvent<{ value: string }>`,
|
|
662
|
+
* bubbling. The container gains `ody-search-input--focused` while focused.
|
|
663
|
+
*/
|
|
664
|
+
declare class OdySearchInput extends OdyElement {
|
|
665
|
+
#private;
|
|
666
|
+
static observedAttributes: string[];
|
|
667
|
+
/** Current field value. */
|
|
668
|
+
get value(): string;
|
|
669
|
+
set value(next: string);
|
|
670
|
+
protected render(): void;
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
type OdyMoneyInputSize = 'base' | 'small';
|
|
674
|
+
/**
|
|
675
|
+
* `<ody-money-input>` — a currency amount field. Renders a native `<input>`
|
|
676
|
+
* with a leading currency symbol; on blur the value is sanitised to digits and
|
|
677
|
+
* a decimal point, clamped to `max-amount`, and rounded to the currency's
|
|
678
|
+
* precision (JPY → 0 decimals, everything else → 2).
|
|
679
|
+
*
|
|
680
|
+
* Attributes:
|
|
681
|
+
* - `value` — the amount string (also a JS property; see {@link value}).
|
|
682
|
+
* - `currency` — ISO code used for the symbol + precision (default `USD`).
|
|
683
|
+
* - `max-amount` — optional upper clamp applied on blur.
|
|
684
|
+
* - `label`, `size`, `warning` — passed through to the field chrome.
|
|
685
|
+
* - `readonly`, `disabled` — boolean flags.
|
|
686
|
+
*
|
|
687
|
+
* Events: `input` (per keystroke) and `change` (on blur, after formatting),
|
|
688
|
+
* each `CustomEvent<{ value: string }>`, bubbling.
|
|
689
|
+
*/
|
|
690
|
+
declare class OdyMoneyInput extends OdyElement {
|
|
691
|
+
#private;
|
|
692
|
+
static observedAttributes: string[];
|
|
693
|
+
/** Current amount value. */
|
|
694
|
+
get value(): string;
|
|
695
|
+
set value(next: string);
|
|
696
|
+
/** Decimal precision for the configured currency. */
|
|
697
|
+
get precision(): number;
|
|
698
|
+
protected render(): void;
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
type OdyPercentageInputSize = 'base' | 'small';
|
|
702
|
+
/**
|
|
703
|
+
* `<ody-percentage-input>` — a numeric field constrained to 0–100 with a
|
|
704
|
+
* trailing `%`. Keystrokes that are letters/symbols or would push the value
|
|
705
|
+
* outside the range are blocked; on blur the value is clamped and normalised.
|
|
706
|
+
*
|
|
707
|
+
* Attributes:
|
|
708
|
+
* - `value` — the percentage string (also a JS property; see {@link value}).
|
|
709
|
+
* - `label`, `size`, `warning` — passed through to the field chrome.
|
|
710
|
+
* - `readonly`, `disabled` — boolean flags.
|
|
711
|
+
*
|
|
712
|
+
* Events: `input` (per keystroke) and `change` (on blur, after clamping),
|
|
713
|
+
* each `CustomEvent<{ value: string }>`, bubbling.
|
|
714
|
+
*/
|
|
715
|
+
declare class OdyPercentageInput extends OdyElement {
|
|
716
|
+
#private;
|
|
717
|
+
static observedAttributes: string[];
|
|
718
|
+
/** Current percentage value. */
|
|
719
|
+
get value(): string;
|
|
720
|
+
set value(next: string);
|
|
721
|
+
protected render(): void;
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
type OdyCheckboxSize = 'base' | 'small';
|
|
725
|
+
/**
|
|
726
|
+
* `<ody-checkbox>` — a single checkbox with an optional label. Renders a native
|
|
727
|
+
* `<input type="checkbox">` in the light DOM. The Ember addon paints the
|
|
728
|
+
* check/indeterminate marks with server-hosted background SVGs; to stay
|
|
729
|
+
* standalone we overlay the bundled `check` / `minus` icons instead.
|
|
730
|
+
*
|
|
731
|
+
* Attributes:
|
|
732
|
+
* - `label` — text shown beside the box.
|
|
733
|
+
* - `size` — `base` | `small` (default `small`).
|
|
734
|
+
* - `checked`, `indeterminate`, `disabled` — boolean flags.
|
|
735
|
+
*
|
|
736
|
+
* Reflects: `checked`. Events: dispatches `change` as
|
|
737
|
+
* `CustomEvent<{ checked: boolean; value: boolean }>`, bubbling.
|
|
738
|
+
*/
|
|
739
|
+
declare class OdyCheckbox extends OdyElement {
|
|
740
|
+
#private;
|
|
741
|
+
static observedAttributes: string[];
|
|
742
|
+
/** Whether the box is checked (mirrors the `checked` attribute). */
|
|
743
|
+
get checked(): boolean;
|
|
744
|
+
set checked(next: boolean);
|
|
745
|
+
/** Convenience alias for {@link checked}. */
|
|
746
|
+
get value(): boolean;
|
|
747
|
+
set value(next: boolean);
|
|
748
|
+
protected render(): void;
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
type OdyRadioButtonGroupSize = 'base' | 'small';
|
|
752
|
+
/** A single selectable option in a radio-button group. */
|
|
753
|
+
interface OdyRadioOption {
|
|
754
|
+
label: string;
|
|
755
|
+
value: string;
|
|
756
|
+
}
|
|
757
|
+
/**
|
|
758
|
+
* `<ody-radio-button-group>` — a fieldset of native radio inputs. Options are
|
|
759
|
+
* supplied as a JSON array attribute and the current selection is tracked
|
|
760
|
+
* internally.
|
|
761
|
+
*
|
|
762
|
+
* Attributes:
|
|
763
|
+
* - `options` — JSON array, e.g. `options='[{"label":"A","value":"a"}]'`.
|
|
764
|
+
* - `value` — the selected option value (also a JS property; see {@link value}).
|
|
765
|
+
* - `size` — `base` | `small` (default `base`).
|
|
766
|
+
* - `disabled` — boolean flag applied to every option.
|
|
767
|
+
*
|
|
768
|
+
* Events: dispatches `change` as `CustomEvent<{ value: string }>`, bubbling.
|
|
769
|
+
*/
|
|
770
|
+
declare class OdyRadioButtonGroup extends OdyElement {
|
|
771
|
+
#private;
|
|
772
|
+
static observedAttributes: string[];
|
|
773
|
+
/** The selected option value. */
|
|
774
|
+
get value(): string;
|
|
775
|
+
set value(next: string);
|
|
776
|
+
/** Parsed `options`; malformed JSON yields an empty list. */
|
|
777
|
+
get options(): OdyRadioOption[];
|
|
778
|
+
protected render(): void;
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
type OdyCheckboxGroupSize = 'base' | 'small';
|
|
782
|
+
/** A single selectable option in a checkbox group. */
|
|
783
|
+
interface OdyCheckboxOption {
|
|
784
|
+
label: string;
|
|
785
|
+
value: string;
|
|
786
|
+
}
|
|
787
|
+
/**
|
|
788
|
+
* `<ody-checkbox-group>` — a list of checkboxes with an optional "select all"
|
|
789
|
+
* parent. Options are supplied as a JSON array attribute and the set of
|
|
790
|
+
* selected values is tracked internally.
|
|
791
|
+
*
|
|
792
|
+
* The parent checkbox reflects the children: checked when all are selected,
|
|
793
|
+
* indeterminate when some are, and toggling it selects/clears every child.
|
|
794
|
+
*
|
|
795
|
+
* Attributes:
|
|
796
|
+
* - `options` — JSON array, e.g. `options='[{"label":"A","value":"a"}]'`.
|
|
797
|
+
* - `value` — comma-separated selected values (also a JS array property,
|
|
798
|
+
* {@link value}).
|
|
799
|
+
* - `select-all-label` — when present, renders the parent select-all row.
|
|
800
|
+
* - `size` — `base` | `small` (default `small`).
|
|
801
|
+
* - `disabled` — boolean flag applied to every checkbox.
|
|
802
|
+
*
|
|
803
|
+
* Events: dispatches `change` as `CustomEvent<{ value: string[] }>`, bubbling.
|
|
804
|
+
*/
|
|
805
|
+
declare class OdyCheckboxGroup extends OdyElement {
|
|
806
|
+
#private;
|
|
807
|
+
static observedAttributes: string[];
|
|
808
|
+
/** The selected option values. */
|
|
809
|
+
get value(): string[];
|
|
810
|
+
set value(next: string[]);
|
|
811
|
+
/** Parsed `options`; malformed JSON yields an empty list. */
|
|
812
|
+
get options(): OdyCheckboxOption[];
|
|
813
|
+
protected render(): void;
|
|
814
|
+
}
|
|
815
|
+
|
|
816
|
+
/**
|
|
817
|
+
* `<ody-accordion>` — an expand/collapse panel with a clickable header.
|
|
818
|
+
*
|
|
819
|
+
* The header label is set via the `title` attribute (or a `[data-ody-slot]`
|
|
820
|
+
* header child is not used here — the body content is the element's child
|
|
821
|
+
* content). Clicking the header toggles the `open` boolean attribute and
|
|
822
|
+
* dispatches a `toggle` CustomEvent with `{ open }`.
|
|
823
|
+
*
|
|
824
|
+
* Attributes:
|
|
825
|
+
* - `title` — header label text.
|
|
826
|
+
* - `open` — boolean; whether the body is expanded (reflected, toggled on click).
|
|
827
|
+
* - `sticky` — boolean; pins the header to the top while scrolling.
|
|
828
|
+
*/
|
|
829
|
+
declare class OdyAccordion extends OdyElement {
|
|
830
|
+
#private;
|
|
831
|
+
static observedAttributes: string[];
|
|
832
|
+
protected render(): void;
|
|
833
|
+
}
|
|
834
|
+
|
|
835
|
+
/**
|
|
836
|
+
* `<ody-collapsible>` — a lightweight inline collapsible. The header is an
|
|
837
|
+
* inline label + chevron; clicking it toggles the `open` boolean attribute and
|
|
838
|
+
* dispatches a `toggle` CustomEvent with `{ open }`. The body content is the
|
|
839
|
+
* element's child content and is shown only when expanded.
|
|
840
|
+
*
|
|
841
|
+
* Attributes:
|
|
842
|
+
* - `label` — header label text.
|
|
843
|
+
* - `open` — boolean; whether the content is expanded (reflected, toggled on click).
|
|
844
|
+
*/
|
|
845
|
+
declare class OdyCollapsible extends OdyElement {
|
|
846
|
+
#private;
|
|
847
|
+
static observedAttributes: string[];
|
|
848
|
+
protected render(): void;
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
interface OdyTabDef {
|
|
852
|
+
id: string;
|
|
853
|
+
label: string;
|
|
854
|
+
disabled?: boolean;
|
|
855
|
+
}
|
|
856
|
+
type OdyTabsSize = 'base' | 'small';
|
|
857
|
+
type OdyTabsPosition = 'top' | 'left';
|
|
858
|
+
/**
|
|
859
|
+
* `<ody-tabs>` — a horizontal tab list. Tabs are supplied as a JSON array via
|
|
860
|
+
* the `tabs` attribute, e.g. `tabs='[{"id":"a","label":"A"}]'`. The active tab
|
|
861
|
+
* is tracked in the `active` attribute; clicking a tab updates it and
|
|
862
|
+
* dispatches a `change` CustomEvent with `{ id }`.
|
|
863
|
+
*
|
|
864
|
+
* Attributes:
|
|
865
|
+
* - `tabs` — JSON array of `{ id, label, disabled? }`.
|
|
866
|
+
* - `active` — id of the active tab (reflected, defaults to the first tab).
|
|
867
|
+
* - `size` — `base` | `small` (default `base`).
|
|
868
|
+
* - `position` — `top` | `left` (default `top`).
|
|
869
|
+
*/
|
|
870
|
+
declare class OdyTabs extends OdyElement {
|
|
871
|
+
#private;
|
|
872
|
+
static observedAttributes: string[];
|
|
873
|
+
protected render(): void;
|
|
874
|
+
}
|
|
875
|
+
|
|
876
|
+
/**
|
|
877
|
+
* `<ody-copy-button>` — a button that copies its `value` to the clipboard via
|
|
878
|
+
* `navigator.clipboard.writeText`, showing a transient success (or error) state.
|
|
879
|
+
* Dispatches a `copy` CustomEvent with `{ value, ok }`.
|
|
880
|
+
*
|
|
881
|
+
* Attributes:
|
|
882
|
+
* - `value` — the text copied to the clipboard.
|
|
883
|
+
* - `label` — optional button label (icon-only when omitted).
|
|
884
|
+
* - `success-duration` — ms the success/error state is shown (default 1200).
|
|
885
|
+
*/
|
|
886
|
+
declare class OdyCopyButton extends OdyElement {
|
|
887
|
+
#private;
|
|
888
|
+
static observedAttributes: string[];
|
|
889
|
+
protected render(): void;
|
|
890
|
+
}
|
|
891
|
+
|
|
892
|
+
/**
|
|
893
|
+
* Fulfillment / check-in status values (ported from the Ember
|
|
894
|
+
* `FulfillmentStatus` enum on the check-in-status component).
|
|
895
|
+
*/
|
|
896
|
+
type OdyCheckInStatusValue = 'IN_PROGRESS' | 'NO_SHOW' | 'NONE' | 'OVERDUE' | 'RESERVED' | 'RETURNED';
|
|
897
|
+
/**
|
|
898
|
+
* `<ody-check-in-status>` — a status dot/icon with a label and optional
|
|
899
|
+
* secondary text. The `status` attribute selects an icon, colour and default
|
|
900
|
+
* label; an explicit `label` overrides the mapped label.
|
|
901
|
+
*
|
|
902
|
+
* Attributes:
|
|
903
|
+
* - `status` — one of the `OdyCheckInStatusValue` values (default `RESERVED`).
|
|
904
|
+
* - `label` — overrides the status's default label.
|
|
905
|
+
* - `optional-text` — optional secondary line below the label.
|
|
906
|
+
*/
|
|
907
|
+
declare class OdyCheckInStatus extends OdyElement {
|
|
908
|
+
static observedAttributes: string[];
|
|
909
|
+
protected render(): void;
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
/**
|
|
913
|
+
* `<ody-option>` — a selectable menu/list option row. The option's label/content
|
|
914
|
+
* is the element's child content. An optional sub-menu affordance (a trailing
|
|
915
|
+
* icon button) is shown when `sub-menu` is present; clicking it dispatches a
|
|
916
|
+
* `submenu` CustomEvent. Clicking the row dispatches a `select` CustomEvent.
|
|
917
|
+
*
|
|
918
|
+
* Attributes:
|
|
919
|
+
* - `selected` — boolean; marks the option as selected.
|
|
920
|
+
* - `disabled` — boolean; disables interaction.
|
|
921
|
+
* - `sub-menu` — boolean; shows the trailing sub-menu trigger.
|
|
922
|
+
* - `trigger-icon` — icon name for the sub-menu trigger (default `chevron-right`).
|
|
923
|
+
*/
|
|
924
|
+
declare class OdyOption extends OdyElement {
|
|
925
|
+
#private;
|
|
926
|
+
static observedAttributes: string[];
|
|
927
|
+
protected render(): void;
|
|
928
|
+
}
|
|
929
|
+
|
|
930
|
+
/**
|
|
931
|
+
* `<ody-split-button>` — a primary action button joined to a dropdown toggle.
|
|
932
|
+
* The primary label is the `text` attribute; clicking it dispatches a `primary`
|
|
933
|
+
* CustomEvent. The toggle reveals a click-toggled panel whose content is the
|
|
934
|
+
* element's child content; toggling dispatches a `toggle` CustomEvent with
|
|
935
|
+
* `{ open }` and reflects the `open` boolean attribute.
|
|
936
|
+
*
|
|
937
|
+
* Attributes:
|
|
938
|
+
* - `text` — primary button label.
|
|
939
|
+
* - `variant` — button variant (default `secondary`).
|
|
940
|
+
* - `size` — `base` | `small` (default `base`).
|
|
941
|
+
* - `icon` — toggle icon name (default `chevron-down`).
|
|
942
|
+
* - `open` — boolean; whether the dropdown panel is shown (reflected).
|
|
943
|
+
*/
|
|
944
|
+
declare class OdySplitButton extends OdyElement {
|
|
945
|
+
#private;
|
|
946
|
+
static observedAttributes: string[];
|
|
947
|
+
protected render(): void;
|
|
948
|
+
}
|
|
949
|
+
|
|
950
|
+
type OdySortDirection$1 = 'UNSET' | 'ASC' | 'DESC';
|
|
951
|
+
/**
|
|
952
|
+
* `<ody-table-header>` — a sortable column header. Clicking cycles the sort
|
|
953
|
+
* direction none → desc → asc → none and dispatches a `sort` CustomEvent with
|
|
954
|
+
* `{ direction, columnId }`. The icon reflects the current direction.
|
|
955
|
+
*
|
|
956
|
+
* Attributes:
|
|
957
|
+
* - `column-name` — the header text.
|
|
958
|
+
* - `column-id` — passed through in the `sort` event detail.
|
|
959
|
+
* - `direction` — current sort `UNSET` | `ASC` | `DESC` (reflected, default `UNSET`).
|
|
960
|
+
* - `static` — boolean; renders a non-interactive header with no sort affordance.
|
|
961
|
+
* - `rounded-left` / `rounded-right` — boolean; round the matching corners.
|
|
962
|
+
*/
|
|
963
|
+
declare class OdyTableHeader extends OdyElement {
|
|
964
|
+
#private;
|
|
965
|
+
static observedAttributes: string[];
|
|
966
|
+
protected render(): void;
|
|
967
|
+
}
|
|
968
|
+
|
|
969
|
+
type OdyModalSize = 'base' | 'small' | 'medium' | 'large' | 'full';
|
|
970
|
+
/**
|
|
971
|
+
* `<ody-modal>` — an overlay dialog that blocks the rest of the page until
|
|
972
|
+
* dismissed. The backdrop and dialog are portaled to `document.body` so they
|
|
973
|
+
* escape any clipping ancestor. Body content is the element's child content.
|
|
974
|
+
*
|
|
975
|
+
* Attributes:
|
|
976
|
+
* - `open` — boolean; when present the modal is shown (mirrors {@link open}/{@link close}).
|
|
977
|
+
* - `heading` — optional title shown in the header.
|
|
978
|
+
* - `size` — `base` | `small` | `medium` | `large` | `full` (default `base`).
|
|
979
|
+
* - `icon` — optional named icon shown before the heading.
|
|
980
|
+
*
|
|
981
|
+
* Behaviour: clicking the backdrop or pressing Escape closes the modal and
|
|
982
|
+
* dispatches a `close` {@link CustomEvent}.
|
|
983
|
+
*/
|
|
984
|
+
declare class OdyModal extends OdyElement {
|
|
985
|
+
#private;
|
|
986
|
+
static observedAttributes: string[];
|
|
987
|
+
/** Open the modal (sets the `open` attribute). */
|
|
988
|
+
open(): void;
|
|
989
|
+
/** Close the modal, removing the `open` attribute and dispatching `close`. */
|
|
990
|
+
close(): void;
|
|
991
|
+
protected render(): void;
|
|
992
|
+
connectedCallback(): void;
|
|
993
|
+
disconnectedCallback(): void;
|
|
994
|
+
}
|
|
995
|
+
|
|
996
|
+
/**
|
|
997
|
+
* `<ody-popover>` — a floating panel anchored to a trigger, toggled by clicking
|
|
998
|
+
* the trigger and dismissed by clicking outside. The panel is portaled to
|
|
999
|
+
* `document.body` and positioned with {@link position}.
|
|
1000
|
+
*
|
|
1001
|
+
* Light-DOM children:
|
|
1002
|
+
* - the **trigger** is the child marked `[data-ody-popover-trigger]`, else the
|
|
1003
|
+
* first element child (unless `for` is set);
|
|
1004
|
+
* - the **content** is the child marked `[data-ody-popover-content]`, else the
|
|
1005
|
+
* remaining children.
|
|
1006
|
+
*
|
|
1007
|
+
* Attributes:
|
|
1008
|
+
* - `for` — id of an external trigger element (overrides a slotted trigger).
|
|
1009
|
+
* - `placement` — `top` | `bottom` | `left` | `right` (default `bottom`).
|
|
1010
|
+
*
|
|
1011
|
+
* Dispatches `open` / `close` {@link CustomEvent}s. Methods: {@link open},
|
|
1012
|
+
* {@link close}, {@link toggle}.
|
|
1013
|
+
*/
|
|
1014
|
+
declare class OdyPopover extends OdyElement {
|
|
1015
|
+
#private;
|
|
1016
|
+
static observedAttributes: string[];
|
|
1017
|
+
/** Whether the popover panel is currently shown. */
|
|
1018
|
+
get isOpen(): boolean;
|
|
1019
|
+
/** Show the popover and position it against its trigger. */
|
|
1020
|
+
open(): void;
|
|
1021
|
+
/** Hide the popover. */
|
|
1022
|
+
close(): void;
|
|
1023
|
+
/** Toggle the popover open/closed. */
|
|
1024
|
+
toggle(): void;
|
|
1025
|
+
protected render(): void;
|
|
1026
|
+
disconnectedCallback(): void;
|
|
1027
|
+
}
|
|
1028
|
+
|
|
1029
|
+
/**
|
|
1030
|
+
* `<ody-tooltip>` — a small floating label shown when the trigger is hovered or
|
|
1031
|
+
* focused. The tooltip bubble is portaled to `document.body` (so it escapes any
|
|
1032
|
+
* `overflow: hidden` ancestor) and positioned with {@link position}.
|
|
1033
|
+
*
|
|
1034
|
+
* The **trigger** is an external element referenced by `for`, otherwise the
|
|
1035
|
+
* element's slotted child. Tooltip text comes from the `text` attribute, or from
|
|
1036
|
+
* any extra slotted children when a `for` trigger is used.
|
|
1037
|
+
*
|
|
1038
|
+
* Attributes:
|
|
1039
|
+
* - `text` — the tooltip text (alternative to slotted content).
|
|
1040
|
+
* - `placement` — `top` | `bottom` | `left` | `right` (default `top`).
|
|
1041
|
+
* - `for` — id of an external trigger element.
|
|
1042
|
+
*/
|
|
1043
|
+
declare class OdyTooltip extends OdyElement {
|
|
1044
|
+
#private;
|
|
1045
|
+
static observedAttributes: string[];
|
|
1046
|
+
/** Whether the tooltip is currently shown. */
|
|
1047
|
+
get isVisible(): boolean;
|
|
1048
|
+
/** Show the tooltip and position it against its trigger. */
|
|
1049
|
+
show(): void;
|
|
1050
|
+
/** Hide the tooltip. */
|
|
1051
|
+
hide(): void;
|
|
1052
|
+
protected render(): void;
|
|
1053
|
+
disconnectedCallback(): void;
|
|
1054
|
+
}
|
|
1055
|
+
|
|
1056
|
+
/**
|
|
1057
|
+
* `<ody-panel>` — a side panel that slides in from the right when `open` is set
|
|
1058
|
+
* and slides out when it is removed. The panel and its overlay are portaled to
|
|
1059
|
+
* `document.body`. Body content is the element's child content.
|
|
1060
|
+
*
|
|
1061
|
+
* Attributes:
|
|
1062
|
+
* - `open` — boolean; toggles the slide-in (mirrors {@link open}/{@link close}).
|
|
1063
|
+
* - `heading` — optional panel title.
|
|
1064
|
+
* - `full-height` — boolean; spans the full viewport height.
|
|
1065
|
+
*
|
|
1066
|
+
* Clicking the overlay or the close button closes the panel and dispatches a
|
|
1067
|
+
* `close` {@link CustomEvent}.
|
|
1068
|
+
*/
|
|
1069
|
+
declare class OdyPanel extends OdyElement {
|
|
1070
|
+
#private;
|
|
1071
|
+
static observedAttributes: string[];
|
|
1072
|
+
/** Open the panel (sets the `open` attribute). */
|
|
1073
|
+
open(): void;
|
|
1074
|
+
/** Close the panel, removing `open` and dispatching `close`. */
|
|
1075
|
+
close(): void;
|
|
1076
|
+
protected render(): void;
|
|
1077
|
+
disconnectedCallback(): void;
|
|
1078
|
+
}
|
|
1079
|
+
|
|
1080
|
+
type OdyToastVariant = 'info' | 'success' | 'warning' | 'danger';
|
|
1081
|
+
/** Options for {@link toast}. */
|
|
1082
|
+
interface OdyToastOptions {
|
|
1083
|
+
/** Visual intent (default `info`). */
|
|
1084
|
+
variant?: OdyToastVariant;
|
|
1085
|
+
/** Optional bold title shown above the message. */
|
|
1086
|
+
title?: string;
|
|
1087
|
+
/** Auto-dismiss delay in ms; `0` disables auto-dismiss (default `4000`). */
|
|
1088
|
+
timeout?: number;
|
|
1089
|
+
}
|
|
1090
|
+
/**
|
|
1091
|
+
* `<ody-toast-host>` — the stacking container that holds active toasts. It is
|
|
1092
|
+
* portaled to `document.body`. You normally never write this tag yourself;
|
|
1093
|
+
* {@link toast} lazily creates and portals one for you.
|
|
1094
|
+
*/
|
|
1095
|
+
declare class OdyToastHost extends OdyElement {
|
|
1096
|
+
protected render(): void;
|
|
1097
|
+
/** Render and stack a toast, returning a handle to dismiss it early. */
|
|
1098
|
+
push(message: string, options?: OdyToastOptions): {
|
|
1099
|
+
dismiss: () => void;
|
|
1100
|
+
};
|
|
1101
|
+
}
|
|
1102
|
+
/**
|
|
1103
|
+
* Show a toast notification, lazily creating an {@link OdyToastHost} portaled to
|
|
1104
|
+
* `document.body` on first use. Returns a handle whose `dismiss()` removes the
|
|
1105
|
+
* toast early.
|
|
1106
|
+
*
|
|
1107
|
+
* ```ts
|
|
1108
|
+
* import { toast } from '@peektravel/app-utilities/ui';
|
|
1109
|
+
* toast('Saved!', { variant: 'success' });
|
|
1110
|
+
* ```
|
|
1111
|
+
*/
|
|
1112
|
+
declare function toast(message: string, options?: OdyToastOptions): {
|
|
1113
|
+
dismiss: () => void;
|
|
1114
|
+
};
|
|
1115
|
+
|
|
1116
|
+
/** A selectable option for the dropdown components. */
|
|
1117
|
+
interface OdySelectOption {
|
|
1118
|
+
/** The value stored/emitted when the option is chosen. */
|
|
1119
|
+
value: string;
|
|
1120
|
+
/** The human-readable label shown in the list (defaults to `value`). */
|
|
1121
|
+
label: string;
|
|
1122
|
+
/** When true, the option is shown but cannot be selected. */
|
|
1123
|
+
disabled?: boolean;
|
|
1124
|
+
}
|
|
1125
|
+
/**
|
|
1126
|
+
* Shared base for `<ody-dropdown-single>` and `<ody-dropdown-multi>`.
|
|
1127
|
+
*
|
|
1128
|
+
* Self-contains the popup panel (no dependency on `<ody-popover>`) so subclasses
|
|
1129
|
+
* fully control ARIA roles, `aria-activedescendant`, and keyboard handling per
|
|
1130
|
+
* the WAI-ARIA combobox / listbox patterns. Subclasses implement the selection
|
|
1131
|
+
* model (single value vs. value array) and the trigger / option rendering.
|
|
1132
|
+
*/
|
|
1133
|
+
declare abstract class OdySelectBase extends OdyElement {
|
|
1134
|
+
#private;
|
|
1135
|
+
/** Whether the popup panel is currently open. */
|
|
1136
|
+
protected open: boolean;
|
|
1137
|
+
/** Index of the active (virtually-focused) option, or -1 when none. */
|
|
1138
|
+
protected activeIndex: number;
|
|
1139
|
+
/** Current search/filter query when `searchable`. */
|
|
1140
|
+
protected query: string;
|
|
1141
|
+
/** Stable id suffix used to wire up `aria-controls` / `aria-activedescendant`. */
|
|
1142
|
+
protected readonly uid: string;
|
|
1143
|
+
/** Parsed `options`: the JS property wins, else the JSON attribute fallback. */
|
|
1144
|
+
get options(): OdySelectOption[];
|
|
1145
|
+
set options(next: OdySelectOption[]);
|
|
1146
|
+
/** Whether the dropdown is disabled. */
|
|
1147
|
+
get disabled(): boolean;
|
|
1148
|
+
/** Whether the filter input is shown. */
|
|
1149
|
+
protected get searchable(): boolean;
|
|
1150
|
+
/** True once the first render has happened (so setters can re-render safely). */
|
|
1151
|
+
protected get isRendered(): boolean;
|
|
1152
|
+
/** Options after applying the current search query (case-insensitive). */
|
|
1153
|
+
protected get visibleOptions(): OdySelectOption[];
|
|
1154
|
+
/** Whether the given option value is currently selected. */
|
|
1155
|
+
protected abstract isSelected(value: string): boolean;
|
|
1156
|
+
/** Commit a user selection of `option`; subclass updates value + emits. */
|
|
1157
|
+
protected abstract commit(option: OdySelectOption): void;
|
|
1158
|
+
/** Whether choosing an option should close the panel (single yes, multi no). */
|
|
1159
|
+
protected abstract get closeOnSelect(): boolean;
|
|
1160
|
+
/** Build the trigger's inner content (label/placeholder/chips). */
|
|
1161
|
+
protected abstract triggerContent(): string;
|
|
1162
|
+
/** ARIA `aria-multiselectable` value for the listbox (`'true'`/`'false'`). */
|
|
1163
|
+
protected abstract get multiselectable(): boolean;
|
|
1164
|
+
protected render(): void;
|
|
1165
|
+
/** Open the panel and start listening for outside clicks. */
|
|
1166
|
+
protected openPanel(): void;
|
|
1167
|
+
/** Close the panel; optionally restore focus to the trigger. */
|
|
1168
|
+
protected closePanel(focusTrigger?: boolean): void;
|
|
1169
|
+
disconnectedCallback(): void;
|
|
1170
|
+
}
|
|
1171
|
+
/** Parse a JSON options string into a typed list, tolerating bad input. */
|
|
1172
|
+
declare function parseOptions(raw: string): OdySelectOption[];
|
|
1173
|
+
|
|
1174
|
+
/**
|
|
1175
|
+
* `<ody-dropdown-single>` — a select-only combobox following the WAI-ARIA
|
|
1176
|
+
* combobox pattern. The trigger (`role="combobox"`) shows the selected option's
|
|
1177
|
+
* label or the `placeholder`; clicking it opens a `role="listbox"` panel whose
|
|
1178
|
+
* rows reuse the `.ody-option` look. Selection closes the panel.
|
|
1179
|
+
*
|
|
1180
|
+
* Options are supplied either as the {@link options} JS property or as a JSON
|
|
1181
|
+
* `options` attribute fallback (parsed on connect):
|
|
1182
|
+
* `options='[{"value":"a","label":"A","disabled":false}]'`.
|
|
1183
|
+
*
|
|
1184
|
+
* Attributes:
|
|
1185
|
+
* - `value` — the selected option value (reflected; also a JS property).
|
|
1186
|
+
* - `options` — JSON array fallback for {@link options}.
|
|
1187
|
+
* - `placeholder` — text shown when nothing is selected.
|
|
1188
|
+
* - `label` / `aria-label` — accessible name for the combobox trigger.
|
|
1189
|
+
* - `search-placeholder` — placeholder for the filter input when `searchable`.
|
|
1190
|
+
* - `disabled` — boolean; disables the trigger.
|
|
1191
|
+
* - `searchable` — boolean; renders a filter input atop the list.
|
|
1192
|
+
*
|
|
1193
|
+
* Keyboard: ArrowDown/ArrowUp (or Enter/Space) open and move the active option;
|
|
1194
|
+
* Home/End jump to the first/last; Enter selects and closes; Escape closes and
|
|
1195
|
+
* restores focus to the trigger; Tab closes; printable characters typeahead.
|
|
1196
|
+
*
|
|
1197
|
+
* Events: dispatches `change` as `CustomEvent<{ value: string }>` (bubbling) on
|
|
1198
|
+
* user selection only — not when the value is set programmatically.
|
|
1199
|
+
*/
|
|
1200
|
+
declare class OdyDropdownSingle extends OdySelectBase {
|
|
1201
|
+
static observedAttributes: string[];
|
|
1202
|
+
/** The selected option value. */
|
|
1203
|
+
get value(): string;
|
|
1204
|
+
set value(next: string);
|
|
1205
|
+
protected get closeOnSelect(): boolean;
|
|
1206
|
+
protected get multiselectable(): boolean;
|
|
1207
|
+
protected isSelected(value: string): boolean;
|
|
1208
|
+
protected triggerContent(): string;
|
|
1209
|
+
protected commit(option: OdySelectOption): void;
|
|
1210
|
+
}
|
|
1211
|
+
|
|
1212
|
+
/**
|
|
1213
|
+
* `<ody-dropdown-multi>` — a multi-select listbox combobox following the
|
|
1214
|
+
* WAI-ARIA listbox pattern (`aria-multiselectable="true"`). The trigger shows
|
|
1215
|
+
* the selected options as `.ody-tag` chips (or `placeholder` when empty);
|
|
1216
|
+
* clicking it opens the panel. Each option carries a checkbox-style check mark
|
|
1217
|
+
* and `aria-selected`. Toggling an option keeps the panel open.
|
|
1218
|
+
*
|
|
1219
|
+
* Options are supplied either as the {@link options} JS property or as a JSON
|
|
1220
|
+
* `options` attribute fallback (parsed on connect).
|
|
1221
|
+
*
|
|
1222
|
+
* Attributes:
|
|
1223
|
+
* - `value` — comma-delimited selected values (reflected; the JS {@link value}
|
|
1224
|
+
* property reads/writes a `string[]`).
|
|
1225
|
+
* - `options` — JSON array fallback for {@link options}.
|
|
1226
|
+
* - `placeholder` — text shown when nothing is selected.
|
|
1227
|
+
* - `label` / `aria-label` — accessible name for the combobox trigger.
|
|
1228
|
+
* - `search-placeholder` — placeholder for the filter input when `searchable`.
|
|
1229
|
+
* - `disabled` — boolean; disables the trigger.
|
|
1230
|
+
* - `searchable` — boolean; renders a filter input atop the list.
|
|
1231
|
+
*
|
|
1232
|
+
* Keyboard: ArrowDown/ArrowUp (or Enter/Space) open and move the active option;
|
|
1233
|
+
* Home/End jump to the first/last; Space or Enter toggles the active option;
|
|
1234
|
+
* Escape closes and restores focus to the trigger; Tab closes.
|
|
1235
|
+
*
|
|
1236
|
+
* Events: dispatches `change` as `CustomEvent<{ value: string[] }>` (bubbling)
|
|
1237
|
+
* on user selection only — not when the value is set programmatically.
|
|
1238
|
+
*/
|
|
1239
|
+
declare class OdyDropdownMulti extends OdySelectBase {
|
|
1240
|
+
#private;
|
|
1241
|
+
static observedAttributes: string[];
|
|
1242
|
+
/** The selected option values as an array. */
|
|
1243
|
+
get value(): string[];
|
|
1244
|
+
set value(next: string[]);
|
|
1245
|
+
protected get closeOnSelect(): boolean;
|
|
1246
|
+
protected get multiselectable(): boolean;
|
|
1247
|
+
protected isSelected(value: string): boolean;
|
|
1248
|
+
protected triggerContent(): string;
|
|
1249
|
+
protected render(): void;
|
|
1250
|
+
protected commit(option: OdySelectOption): void;
|
|
1251
|
+
}
|
|
1252
|
+
|
|
1253
|
+
/** A preset shortcut shown beside the calendar. */
|
|
1254
|
+
interface OdyDatePreset {
|
|
1255
|
+
/** Button label. */
|
|
1256
|
+
label: string;
|
|
1257
|
+
/** `yyyy-mm-dd` (single) or `yyyy-mm-dd/yyyy-mm-dd` (range). */
|
|
1258
|
+
value: string;
|
|
1259
|
+
}
|
|
1260
|
+
/** Predicate disabling arbitrary days; assigned as a JS property. */
|
|
1261
|
+
type OdyDateDisallowed = (date: Date) => boolean;
|
|
1262
|
+
/** Custom display formatter for the trigger label; assigned as a JS property. */
|
|
1263
|
+
type OdyDateFormatter = (date: Date) => string;
|
|
1264
|
+
/**
|
|
1265
|
+
* `<ody-datepicker>` — a dependency-free calendar date picker following the
|
|
1266
|
+
* WAI-ARIA date-picker-dialog pattern. A tertiary trigger button toggles a
|
|
1267
|
+
* popover containing a `role="grid"` calendar with roving-tabindex keyboard
|
|
1268
|
+
* navigation. Uses native `Date` only (no date library).
|
|
1269
|
+
*
|
|
1270
|
+
* Attributes:
|
|
1271
|
+
* - `value` — selected date `yyyy-mm-dd`, or `start/end` in range mode.
|
|
1272
|
+
* - `min` / `max` — selectable bounds `yyyy-mm-dd` (inclusive).
|
|
1273
|
+
* - `range` — boolean; enables start/end range selection.
|
|
1274
|
+
* - `first-day-of-week` — `0`–`6` (0 = Sunday, default `0`).
|
|
1275
|
+
* - `placeholder` — trigger text shown when no value is selected.
|
|
1276
|
+
* - `presets` — JSON `[{ "label", "value" }]` shortcut buttons.
|
|
1277
|
+
* - `display-format` — how the selected date is shown to the user:
|
|
1278
|
+
* `short` | `medium` (default) | `long` | `full`. The displayed text is
|
|
1279
|
+
* localized via `Intl.DateTimeFormat` for the element's `lang`; the `value`
|
|
1280
|
+
* attribute and `change` payload always stay machine-readable ISO `yyyy-mm-dd`.
|
|
1281
|
+
*
|
|
1282
|
+
* Properties:
|
|
1283
|
+
* - `isDateDisallowed?: (date: Date) => boolean` — disable arbitrary days.
|
|
1284
|
+
* - `formatDate?: (date: Date) => string` — full control of the trigger label.
|
|
1285
|
+
*
|
|
1286
|
+
* Calendar weekday/month names and day labels are localized via `Intl` for the
|
|
1287
|
+
* resolved `lang`. Dispatches a `change` {@link CustomEvent} on **user**
|
|
1288
|
+
* selection only (`{ value }` single, `{ value, start, end }` range, all ISO);
|
|
1289
|
+
* never on a programmatic `value` set.
|
|
1290
|
+
*/
|
|
1291
|
+
declare class OdyDatePicker extends OdyElement {
|
|
1292
|
+
#private;
|
|
1293
|
+
static observedAttributes: string[];
|
|
1294
|
+
/** Disable arbitrary days; not an attribute (functions can't serialize). */
|
|
1295
|
+
isDateDisallowed?: OdyDateDisallowed;
|
|
1296
|
+
/** Custom trigger-label formatter; wins over `display-format`/`Intl`. */
|
|
1297
|
+
formatDate?: OdyDateFormatter;
|
|
1298
|
+
/** Whether the popover is currently shown. */
|
|
1299
|
+
get isOpen(): boolean;
|
|
1300
|
+
/** Show the popover and focus the roving day. */
|
|
1301
|
+
openPopover(): void;
|
|
1302
|
+
/** Hide the popover. */
|
|
1303
|
+
closePopover(): void;
|
|
1304
|
+
protected render(): void;
|
|
1305
|
+
disconnectedCallback(): void;
|
|
1306
|
+
}
|
|
1307
|
+
|
|
1308
|
+
/** Horizontal alignment for a column's header and cells. */
|
|
1309
|
+
type OdyTableAlign = 'left' | 'center' | 'right';
|
|
1310
|
+
/** Active sort direction; `null` means unsorted. */
|
|
1311
|
+
type OdySortDirection = 'ascending' | 'descending' | null;
|
|
1312
|
+
/** A single column definition (set as a JS property, never an attribute). */
|
|
1313
|
+
interface OdyTableColumn {
|
|
1314
|
+
/** Property key read from each row object. */
|
|
1315
|
+
key: string;
|
|
1316
|
+
/** Header text shown to the user. */
|
|
1317
|
+
label: string;
|
|
1318
|
+
/** Whether this column participates in sorting (requires the global `sortable`). */
|
|
1319
|
+
sortable?: boolean;
|
|
1320
|
+
/** Text alignment for the header and the column's cells (default `left`). */
|
|
1321
|
+
align?: OdyTableAlign;
|
|
1322
|
+
/**
|
|
1323
|
+
* Optional custom cell renderer. Receives a fresh per-cell content element and
|
|
1324
|
+
* the row object; populate the element however you like. When omitted the cell
|
|
1325
|
+
* shows the (HTML-escaped) string value of `row[key]`.
|
|
1326
|
+
*/
|
|
1327
|
+
render?: (cellEl: HTMLElement, row: OdyTableRow) => void;
|
|
1328
|
+
}
|
|
1329
|
+
/** A row is an arbitrary record keyed by column `key`. */
|
|
1330
|
+
type OdyTableRow = Record<string, unknown>;
|
|
1331
|
+
/** `detail` of the `sort-change` event. */
|
|
1332
|
+
interface OdyTableSortChangeDetail {
|
|
1333
|
+
key: string;
|
|
1334
|
+
direction: OdySortDirection;
|
|
1335
|
+
}
|
|
1336
|
+
/** `detail` of the `selection-change` event. */
|
|
1337
|
+
interface OdyTableSelectionChangeDetail {
|
|
1338
|
+
selected: OdyTableRow[];
|
|
1339
|
+
}
|
|
1340
|
+
/** `detail` of the `row-click` event. */
|
|
1341
|
+
interface OdyTableRowClickDetail {
|
|
1342
|
+
row: OdyTableRow;
|
|
1343
|
+
index: number;
|
|
1344
|
+
}
|
|
1345
|
+
/**
|
|
1346
|
+
* `<ody-table>` — a lightweight, data-driven Odyssey data table that renders a
|
|
1347
|
+
* native `<table>` with sortable headers and an optional checkbox selection
|
|
1348
|
+
* column. Rich data is supplied through **JS properties** (`columns`, `data`),
|
|
1349
|
+
* not attributes; scalar configuration uses reflected attributes.
|
|
1350
|
+
*
|
|
1351
|
+
* Properties:
|
|
1352
|
+
* - `columns: OdyTableColumn[]` — column definitions. If omitted, columns are
|
|
1353
|
+
* auto-generated from the keys of the first data row.
|
|
1354
|
+
* - `data: OdyTableRow[]` (alias `rows`) — the row objects to display.
|
|
1355
|
+
* - `selected: OdyTableRow[]` — read-only getter of the currently selected rows.
|
|
1356
|
+
*
|
|
1357
|
+
* Attributes:
|
|
1358
|
+
* - `selectable` — boolean; adds a leading checkbox column with a header
|
|
1359
|
+
* select-all (indeterminate when only some rows are selected).
|
|
1360
|
+
* - `sortable` — boolean; globally enables sorting (per-column opt-in via
|
|
1361
|
+
* `column.sortable`).
|
|
1362
|
+
* - `sort-key` — the column key currently sorted.
|
|
1363
|
+
* - `sort-direction` — `ascending` | `descending`.
|
|
1364
|
+
* - `sticky-header` — boolean; pins the header row while the body scrolls.
|
|
1365
|
+
*
|
|
1366
|
+
* Events (all `CustomEvent`, bubbling):
|
|
1367
|
+
* - `sort-change` — `{ key, direction }` after a header sort cycle.
|
|
1368
|
+
* - `selection-change` — `{ selected }` after the selection changes.
|
|
1369
|
+
* - `row-click` — `{ row, index }` when a body row is clicked.
|
|
1370
|
+
*/
|
|
1371
|
+
declare class OdyTable extends OdyElement {
|
|
1372
|
+
#private;
|
|
1373
|
+
static observedAttributes: string[];
|
|
1374
|
+
/** Column definitions; setting re-renders. */
|
|
1375
|
+
get columns(): OdyTableColumn[];
|
|
1376
|
+
set columns(next: OdyTableColumn[]);
|
|
1377
|
+
/** Row data; setting re-renders. */
|
|
1378
|
+
get data(): OdyTableRow[];
|
|
1379
|
+
set data(next: OdyTableRow[]);
|
|
1380
|
+
/** Alias for {@link data}. */
|
|
1381
|
+
get rows(): OdyTableRow[];
|
|
1382
|
+
set rows(next: OdyTableRow[]);
|
|
1383
|
+
/** The currently selected rows (read-only). */
|
|
1384
|
+
get selected(): OdyTableRow[];
|
|
1385
|
+
set selected(next: OdyTableRow[]);
|
|
1386
|
+
protected render(): void;
|
|
1387
|
+
}
|
|
1388
|
+
|
|
1389
|
+
/**
|
|
1390
|
+
* Brand / fixed-colour icon library for the Odyssey Web Components.
|
|
1391
|
+
*
|
|
1392
|
+
* Generated from the Odyssey SVGs that bake in their own colours or gradients
|
|
1393
|
+
* (logos, illustrations, status art — see `brand-icons-data.ts` and
|
|
1394
|
+
* `scripts/generate-icons.mjs`). Unlike the themeable {@link iconSvg} set, these
|
|
1395
|
+
* keep their original colours and do NOT follow `currentColor`.
|
|
1396
|
+
*
|
|
1397
|
+
* Render one declaratively with `<ody-brand-icon name="…">`, or get the raw
|
|
1398
|
+
* markup via {@link brandIconSvg}.
|
|
1399
|
+
*/
|
|
1400
|
+
|
|
1401
|
+
/** Whether a named brand icon is known. */
|
|
1402
|
+
declare function hasBrandIcon(name: string): boolean;
|
|
1403
|
+
/** All brand icon names, sorted. */
|
|
1404
|
+
declare function brandIconNames(): string[];
|
|
1405
|
+
/**
|
|
1406
|
+
* Render a named brand icon as an `<svg>` string (keeping its baked-in colours).
|
|
1407
|
+
* Unknown names yield an empty `<svg>` so layout is preserved without throwing.
|
|
1408
|
+
*/
|
|
1409
|
+
declare function brandIconSvg(name: string, className?: string): string;
|
|
1410
|
+
type OdyBrandIconSize = 'extra-small' | 'mid-small' | 'small' | 'base' | 'medium' | 'large' | 'free';
|
|
1411
|
+
/**
|
|
1412
|
+
* `<ody-brand-icon>` — renders a named fixed-colour Odyssey brand icon.
|
|
1413
|
+
*
|
|
1414
|
+
* Attributes:
|
|
1415
|
+
* - `name` — brand icon name (see {@link brandIconNames}); unknown renders nothing.
|
|
1416
|
+
* - `size` — one of {@link OdyBrandIconSize} (default `base`); use `free` to
|
|
1417
|
+
* size from the surrounding box (handy for larger illustrations).
|
|
1418
|
+
*/
|
|
1419
|
+
declare class OdyBrandIcon extends OdyElement {
|
|
1420
|
+
static observedAttributes: string[];
|
|
1421
|
+
protected render(): void;
|
|
1422
|
+
}
|
|
1423
|
+
|
|
1424
|
+
/** A registered icon: its `viewBox` and inner SVG markup. */
|
|
1425
|
+
interface OdyIconData {
|
|
1426
|
+
viewBox: string;
|
|
1427
|
+
body: string;
|
|
1428
|
+
}
|
|
1429
|
+
/** Register (or override) a named icon with raw inner-SVG markup. */
|
|
1430
|
+
declare function registerIcon(name: string, innerSvg: string, viewBox?: string): void;
|
|
1431
|
+
/** Whether a named icon is known. */
|
|
1432
|
+
declare function hasIcon(name: string): boolean;
|
|
1433
|
+
/** All registered themeable icon names, sorted. */
|
|
1434
|
+
declare function iconNames(): string[];
|
|
1435
|
+
/** Build an `<svg>` string from icon data, using the icon's own viewBox. */
|
|
1436
|
+
declare function renderIconSvg(icon: OdyIconData, className?: string): string;
|
|
1437
|
+
/**
|
|
1438
|
+
* Render a named themeable icon as an `<svg>` string with the given class.
|
|
1439
|
+
* Unknown names yield an empty `<svg>` so layout is preserved without throwing.
|
|
1440
|
+
*/
|
|
1441
|
+
declare function iconSvg(name: string, className?: string): string;
|
|
1442
|
+
|
|
1443
|
+
/**
|
|
1444
|
+
* Small, framework-agnostic overlay utilities shared by the floating Odyssey
|
|
1445
|
+
* components (modal, popover, tooltip, panel, toast). The Ember addon relied on
|
|
1446
|
+
* `in-element` / `ember-basic-dropdown`; here we re-implement the two things
|
|
1447
|
+
* those gave us — portaling a node to `document.body` and computing a
|
|
1448
|
+
* placement next to an anchor — with a few lines of vanilla DOM.
|
|
1449
|
+
*/
|
|
1450
|
+
/** Placement of a floating element relative to its anchor. */
|
|
1451
|
+
type OdyPlacement = 'top' | 'bottom' | 'left' | 'right';
|
|
1452
|
+
/** A `top`/`left` pair (in `px`, document-relative) plus the resolved placement. */
|
|
1453
|
+
interface OdyPosition {
|
|
1454
|
+
top: number;
|
|
1455
|
+
left: number;
|
|
1456
|
+
placement: OdyPlacement;
|
|
1457
|
+
}
|
|
1458
|
+
/**
|
|
1459
|
+
* Append `node` to `document.body` so it escapes any clipping/stacking ancestor.
|
|
1460
|
+
* No-op (returns the node) if the node is already a direct child of `body`.
|
|
1461
|
+
*/
|
|
1462
|
+
declare function portal<T extends Node>(node: T): T;
|
|
1463
|
+
/** Remove a previously {@link portal}ed node from the DOM if it is still attached. */
|
|
1464
|
+
declare function removePortal(node: Node): void;
|
|
1465
|
+
/**
|
|
1466
|
+
* Compute the `top`/`left` (page coordinates, including scroll offset) for a
|
|
1467
|
+
* `floating` element placed at `placement` relative to `anchor`. The floating
|
|
1468
|
+
* element is centred along the cross axis. If the requested placement would push
|
|
1469
|
+
* the element off the viewport edge, it flips to the opposite side (a single,
|
|
1470
|
+
* basic flip — `top`↔`bottom`, `left`↔`right`).
|
|
1471
|
+
*
|
|
1472
|
+
* Both elements must already be in the DOM so their rects can be measured;
|
|
1473
|
+
* portal the floating element first, then position it.
|
|
1474
|
+
*
|
|
1475
|
+
* @param gap Pixels between the anchor and the floating element (default `8`).
|
|
1476
|
+
*/
|
|
1477
|
+
declare function position(anchor: Element, floating: Element, placement?: OdyPlacement, gap?: number): OdyPosition;
|
|
1478
|
+
|
|
1479
|
+
export { OdyAccordion, OdyAlert, type OdyAlertVariant, OdyBrandIcon, type OdyBrandIconSize, OdyBreadcrumb, OdyBreadcrumbItem, OdyButton, type OdyButtonAppearance, type OdyButtonSize, type OdyButtonVariant, OdyCard, OdyCheckInStatus, type OdyCheckInStatusValue, OdyCheckbox, OdyCheckboxGroup, type OdyCheckboxGroupSize, type OdyCheckboxOption, type OdyCheckboxSize, OdyCollapsible, OdyCollapsibleCollapsed, OdyCollapsibleContent, OdyCollapsibleSection, OdyCopyButton, type OdyDateDisallowed, OdyDatePicker, type OdyDatePreset, OdyDivider, OdyDropdownMulti, OdyDropdownSingle, OdyElement, OdyEmptyState, type OdyEmptyStateVariant, OdyIcon, type OdyIconData, type OdyIconSize, OdyInlineInput, type OdyInlineInputSize, OdyInlineList, OdyInlineListItem, type OdyInlineListSeparator, OdyInput, type OdyInputSize, type OdyInputState, OdyListItem, OdyLoadingBar, OdyLoadingSpinner, OdyMessage, OdyModal, type OdyModalSize, OdyMoneyInput, type OdyMoneyInputSize, OdyOption, OdyPanel, OdyPercentageInput, type OdyPercentageInputSize, type OdyPlacement, OdyPopover, type OdyPosition, OdyProductIndicator, type OdyProductIndicatorSize, OdyRadioButtonGroup, type OdyRadioButtonGroupSize, type OdyRadioOption, OdySearchInput, type OdySearchInputSize, OdySectionColumnItem, OdySectionColumns, type OdySectionGap, OdySectionRowItem, OdySectionRows, type OdySectionVerticalAlign, OdySelectBase, type OdySelectOption, type OdySortDirection$1 as OdySortDirection, type OdySpinnerSize, OdySplitButton, OdyStat, OdyStatDetail, OdyStatSummary, OdyStatSummaryDetail, type OdyStatTone, OdyStatusDot, type OdyStatusDotColor, type OdyTabDef, OdyTable, type OdyTableAlign, type OdyTableColumn, OdyTableHeader, type OdyTableRow, type OdyTableRowClickDetail, type OdyTableSelectionChangeDetail, type OdyTableSortChangeDetail, type OdySortDirection as OdyTableSortDirection, OdyTabs, type OdyTabsPosition, type OdyTabsSize, OdyTag, type OdyTagColor, type OdyTagSize, type OdyTagVariant, type OdyTermKey, type OdyTerms, OdyToastHost, type OdyToastOptions, type OdyToastVariant, OdyToggleButton, type OdyToggleButtonSize, type OdyToggleOption, OdyTooltip, OdyTwoColumn, OdyTwoColumnMain, OdyTwoColumnSecondary, OdyTwoColumnSecondaryHeader, brandIconNames, brandIconSvg, classes, define, escapeHtml, hasBrandIcon, hasIcon, iconNames, iconSvg, parseOptions, portal, position, registerIcon, registerTranslation, removePortal, renderIconSvg, toast };
|