@reliability-design/web 1.4.1 → 1.4.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/CHANGELOG.md +49 -22
- package/dist/components/rel-autocomplete/README.md +96 -0
- package/dist/components/rel-autocomplete/rel-autocomplete.ts +634 -0
- package/dist/components/rel-button/rel-button.ts +17 -3
- package/dist/components/rel-checkbox/README.md +1 -0
- package/dist/components/rel-checkbox/rel-checkbox.ts +34 -0
- package/dist/components/rel-drawer/rel-drawer.ts +9 -0
- package/dist/components/rel-popover/rel-popover.ts +56 -0
- package/dist/components/rel-radio/README.md +16 -1
- package/dist/components/rel-radio/rel-radio.ts +64 -1
- package/dist/components/rel-select/README.md +10 -2
- package/dist/components/rel-select/rel-select.ts +238 -15
- package/dist/components/rel-sheet/rel-sheet.ts +20 -0
- package/dist/components/rel-textfield/README.md +16 -0
- package/dist/components/rel-textfield/rel-textfield.ts +109 -6
- package/dist/components/rel-time-picker/README.md +199 -0
- package/dist/components/rel-time-picker/rel-time-picker.ts +994 -0
- package/dist/index.d.mts +377 -77
- package/dist/index.d.ts +377 -77
- package/dist/index.js +4585 -2608
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +3428 -1453
- package/dist/index.mjs.map +1 -1
- package/dist/styles/vars.css +866 -866
- package/dist/{vars-BYCEEKWJ.css → vars-XNMTSRVN.css} +866 -866
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as lit_html from 'lit-html';
|
|
2
2
|
import * as lit from 'lit';
|
|
3
|
-
import { LitElement, PropertyValues } from 'lit';
|
|
3
|
+
import { LitElement, PropertyValues, TemplateResult } from 'lit';
|
|
4
4
|
export * from '@reliability-design/icons';
|
|
5
5
|
|
|
6
6
|
declare class RelAccordion extends LitElement {
|
|
@@ -31,6 +31,213 @@ declare class RelAlert extends LitElement {
|
|
|
31
31
|
render(): lit_html.TemplateResult<1>;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
+
type TextFieldState = "default" | "error" | "disabled";
|
|
35
|
+
type TextFieldSize = "small" | "medium" | "large";
|
|
36
|
+
type TextFieldVariant = "default" | "underline" | "legend";
|
|
37
|
+
/**
|
|
38
|
+
* How a field presents its label. Shared by `<rel-textfield>`, `<rel-select>`
|
|
39
|
+
* and `<rel-autocomplete>` so the three stay in step.
|
|
40
|
+
* - `"default"` — static label above the control
|
|
41
|
+
* - `"floating"` — label rests over the placeholder, animates onto the border
|
|
42
|
+
* - `"none"` — no label renders; supply `fieldAriaLabel` /
|
|
43
|
+
* `fieldAriaLabelledby` to keep an accessible name
|
|
44
|
+
*/
|
|
45
|
+
type FieldLabelStyle = "default" | "floating" | "none";
|
|
46
|
+
declare class RelTextfield extends LitElement {
|
|
47
|
+
label?: string;
|
|
48
|
+
placeholder: string;
|
|
49
|
+
type: string;
|
|
50
|
+
value: string;
|
|
51
|
+
leftIcon?: string;
|
|
52
|
+
rightIcon?: string;
|
|
53
|
+
/** Makes the trailing icon interactive (pointer + focusable) and emits
|
|
54
|
+
* `rel-right-icon-click` — e.g. a password show/hide toggle or clear button. */
|
|
55
|
+
clickableRightIcon: boolean;
|
|
56
|
+
/** Accessible label for the trailing icon when it is clickable. */
|
|
57
|
+
rightIconAriaLabel?: string;
|
|
58
|
+
supportingText?: string;
|
|
59
|
+
state: TextFieldState;
|
|
60
|
+
size: TextFieldSize;
|
|
61
|
+
/**
|
|
62
|
+
* Label presentation. Left `undefined` the deprecated `floatingLabel` boolean
|
|
63
|
+
* decides, so existing markup keeps working; set explicitly and it wins.
|
|
64
|
+
* Declares `attribute` because Lit would otherwise only listen for the
|
|
65
|
+
* all-lowercase `labelstyle`.
|
|
66
|
+
*/
|
|
67
|
+
labelStyle?: FieldLabelStyle;
|
|
68
|
+
/** @deprecated Use `labelStyle="floating"`. Kept permanently as an alias. */
|
|
69
|
+
floatingLabel: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Accessible name for the input. Required when `labelStyle="none"`, since no
|
|
72
|
+
* `<label>` renders and a placeholder is not a valid naming mechanism.
|
|
73
|
+
*/
|
|
74
|
+
fieldAriaLabel?: string;
|
|
75
|
+
/** IDREF list of external element(s) naming the input. Wins over `fieldAriaLabel`. */
|
|
76
|
+
fieldAriaLabelledby?: string;
|
|
77
|
+
variant: TextFieldVariant;
|
|
78
|
+
disabled: boolean;
|
|
79
|
+
required: boolean;
|
|
80
|
+
multiline: boolean;
|
|
81
|
+
rows: number;
|
|
82
|
+
prefixIcon?: string;
|
|
83
|
+
prefixIconAriaLabel?: string;
|
|
84
|
+
error: boolean;
|
|
85
|
+
errorMessage?: string;
|
|
86
|
+
helperText?: string;
|
|
87
|
+
readonly: boolean;
|
|
88
|
+
maxLength?: number;
|
|
89
|
+
name?: string;
|
|
90
|
+
fullWidth: boolean;
|
|
91
|
+
private internalState;
|
|
92
|
+
private _wasError;
|
|
93
|
+
private uniqueId;
|
|
94
|
+
private get isDisabled();
|
|
95
|
+
private get isError();
|
|
96
|
+
private get leadingIcon();
|
|
97
|
+
private get helper();
|
|
98
|
+
/** labelStyle supersedes the deprecated floatingLabel boolean. */
|
|
99
|
+
private get resolvedLabelStyle();
|
|
100
|
+
/** True when no visible label renders and the input needs an ARIA name. */
|
|
101
|
+
private get labelHidden();
|
|
102
|
+
static styles: lit.CSSResult;
|
|
103
|
+
connectedCallback(): void;
|
|
104
|
+
willUpdate(changed: PropertyValues<this>): void;
|
|
105
|
+
private _warnedNoName;
|
|
106
|
+
updated(): void;
|
|
107
|
+
/** Focuses the inner input/textarea (the host itself is not focusable). */
|
|
108
|
+
focus(options?: FocusOptions): void;
|
|
109
|
+
private handleFocus;
|
|
110
|
+
private handleBlur;
|
|
111
|
+
private handleRightIconClick;
|
|
112
|
+
private handleRightIconKeydown;
|
|
113
|
+
private handleInput;
|
|
114
|
+
render(): lit_html.TemplateResult<1>;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/** An item is a plain string or any object read through displayField/valueField. */
|
|
118
|
+
type AutocompleteItem = string | Record<string, unknown>;
|
|
119
|
+
type AutocompleteFilter = "contains" | "starts-with" | "none";
|
|
120
|
+
type AutocompleteSearchFn = (query: string) => Promise<AutocompleteItem[]>;
|
|
121
|
+
/**
|
|
122
|
+
* `<rel-autocomplete>` — searchable single-select type-ahead field.
|
|
123
|
+
*
|
|
124
|
+
* Composes `<rel-textfield>` for all field chrome (label, sizes, variants,
|
|
125
|
+
* states, icons) and adds a suggestion panel on top. Two data modes:
|
|
126
|
+
* - local: set `items`; typing filters them (`filter` mode)
|
|
127
|
+
* - remote: set `searchFn`; input is debounced (`debounceMs`), queries are
|
|
128
|
+
* latest-wins (stale responses discarded), and `items` is ignored
|
|
129
|
+
*
|
|
130
|
+
* The committed `value` is always the selected item's value string (its
|
|
131
|
+
* `valueField`) — typing alone emits `rel-change` with the raw text but does
|
|
132
|
+
* not change `value` until an item is picked (or the text exactly matches an
|
|
133
|
+
* item's label/value on Enter/blur).
|
|
134
|
+
*/
|
|
135
|
+
declare class RelAutocomplete extends LitElement {
|
|
136
|
+
/** Local (or fallback initial) suggestion list. Ignored while searchFn drives results. */
|
|
137
|
+
items: AutocompleteItem[];
|
|
138
|
+
/** Committed value — the selected item's valueField string ("" = none). */
|
|
139
|
+
value: string;
|
|
140
|
+
/** Object key read for the row label when items are objects. */
|
|
141
|
+
displayField: string;
|
|
142
|
+
/** Object key read for the committed value when items are objects. */
|
|
143
|
+
valueField: string;
|
|
144
|
+
/** Local filtering mode. Ignored when searchFn is set (results arrive pre-filtered). */
|
|
145
|
+
filter: AutocompleteFilter;
|
|
146
|
+
/** Async data source. When set, local filtering is bypassed entirely. */
|
|
147
|
+
searchFn?: AutocompleteSearchFn;
|
|
148
|
+
/** Debounce for searchFn calls, in ms. */
|
|
149
|
+
debounceMs: number;
|
|
150
|
+
/** Minimum typed characters before the panel opens / searchFn fires. 0 = open on focus. */
|
|
151
|
+
minSearchLength: number;
|
|
152
|
+
/** Optional cap on rendered suggestions (panel scrolls regardless). */
|
|
153
|
+
maxSuggestions: number;
|
|
154
|
+
/** Shows a trailing ✕ that clears the text and the committed value. */
|
|
155
|
+
clearable: boolean;
|
|
156
|
+
/** Externally-controlled loading state (internal searchFn loading is automatic). */
|
|
157
|
+
loading: boolean;
|
|
158
|
+
/** Row shown when a query yields nothing. */
|
|
159
|
+
noResultsText: string;
|
|
160
|
+
loadingText: string;
|
|
161
|
+
label?: string;
|
|
162
|
+
placeholder: string;
|
|
163
|
+
size: TextFieldSize;
|
|
164
|
+
variant: TextFieldVariant;
|
|
165
|
+
/** See `FieldLabelStyle`. Left `undefined` the deprecated `floatingLabel` decides. */
|
|
166
|
+
labelStyle?: FieldLabelStyle;
|
|
167
|
+
/** @deprecated Use `labelStyle="floating"`. Kept permanently as an alias. */
|
|
168
|
+
floatingLabel: boolean;
|
|
169
|
+
/** Accessible name for the input. Required when `labelStyle="none"`. */
|
|
170
|
+
fieldAriaLabel?: string;
|
|
171
|
+
/** IDREF list of external element(s) naming the input. Wins over `fieldAriaLabel`. */
|
|
172
|
+
fieldAriaLabelledby?: string;
|
|
173
|
+
prefixIcon?: string;
|
|
174
|
+
disabled: boolean;
|
|
175
|
+
readonly: boolean;
|
|
176
|
+
required: boolean;
|
|
177
|
+
error: boolean;
|
|
178
|
+
errorMessage?: string;
|
|
179
|
+
helperText?: string;
|
|
180
|
+
name?: string;
|
|
181
|
+
fullWidth: boolean;
|
|
182
|
+
private open;
|
|
183
|
+
private inputText;
|
|
184
|
+
private highlightedIndex;
|
|
185
|
+
private panelStyle;
|
|
186
|
+
private searching;
|
|
187
|
+
/** searchFn results; null = idle/local mode (use items). */
|
|
188
|
+
private remoteItems;
|
|
189
|
+
private fieldEl;
|
|
190
|
+
private panelEl;
|
|
191
|
+
private uniqueId;
|
|
192
|
+
private debounceTimer?;
|
|
193
|
+
private searchSeq;
|
|
194
|
+
/** Set while a selection/clear updates `value` internally, so willUpdate
|
|
195
|
+
* doesn't overwrite the input text the way it does for external writes. */
|
|
196
|
+
private internalValueWrite;
|
|
197
|
+
/** Name used for the suggestion panel — the visible label, or fieldAriaLabel
|
|
198
|
+
* once labelStyle="none" hides it. Mirrors rel-textfield's own resolution. */
|
|
199
|
+
private get accessibleName();
|
|
200
|
+
static styles: lit.CSSResult;
|
|
201
|
+
disconnectedCallback(): void;
|
|
202
|
+
protected willUpdate(changed: PropertyValues<this>): void;
|
|
203
|
+
/** Full normalized source list (remote results while searchFn drives, else items). */
|
|
204
|
+
private get allItems();
|
|
205
|
+
private normalizeItem;
|
|
206
|
+
/** Suggestions for the current query — local filter only applies without searchFn. */
|
|
207
|
+
private get filteredItems();
|
|
208
|
+
private get isLoading();
|
|
209
|
+
private get queryLongEnough();
|
|
210
|
+
private addGlobalListeners;
|
|
211
|
+
private removeGlobalListeners;
|
|
212
|
+
private onOutsidePointerDown;
|
|
213
|
+
private onPageScroll;
|
|
214
|
+
private openPanel;
|
|
215
|
+
private closePanel;
|
|
216
|
+
private updatePosition;
|
|
217
|
+
/** Re-evaluates whether the panel should be showing for the current state. */
|
|
218
|
+
private syncPanel;
|
|
219
|
+
private onFieldInput;
|
|
220
|
+
private runSearch;
|
|
221
|
+
private selectItem;
|
|
222
|
+
/** Silent commit when typed text exactly matches an item (label or value, case-insensitive). */
|
|
223
|
+
private commitExactMatch;
|
|
224
|
+
private emitChanged;
|
|
225
|
+
private clear;
|
|
226
|
+
private onKeyDown;
|
|
227
|
+
private onFocusIn;
|
|
228
|
+
private onFocusOut;
|
|
229
|
+
/** Delegates focus to the inner textfield. */
|
|
230
|
+
focus(): void;
|
|
231
|
+
/** Bolds the first occurrence of the query inside a suggestion label. */
|
|
232
|
+
private renderLabel;
|
|
233
|
+
render(): TemplateResult<1>;
|
|
234
|
+
}
|
|
235
|
+
declare global {
|
|
236
|
+
interface HTMLElementTagNameMap {
|
|
237
|
+
"rel-autocomplete": RelAutocomplete;
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
|
|
34
241
|
declare class RelAvatar extends LitElement {
|
|
35
242
|
size: "lg" | "md" | "sm" | "xs";
|
|
36
243
|
type: "image" | "text" | "icon";
|
|
@@ -238,6 +445,8 @@ type CheckboxState = "default" | "error" | "disabled";
|
|
|
238
445
|
type CheckboxStatus = "unchecked" | "checked" | "indeterminate";
|
|
239
446
|
declare class RelCheckbox extends LitElement {
|
|
240
447
|
label: string;
|
|
448
|
+
/** rel-icon name rendered between the checkbox and the label (label prefix icon). */
|
|
449
|
+
icon: string;
|
|
241
450
|
supportingtext: string;
|
|
242
451
|
state: CheckboxState;
|
|
243
452
|
status: CheckboxStatus;
|
|
@@ -538,6 +747,42 @@ declare class RelLayout extends LitElement {
|
|
|
538
747
|
render(): lit_html.TemplateResult<1>;
|
|
539
748
|
}
|
|
540
749
|
|
|
750
|
+
type StepStatus = "done" | "progress" | "disabled";
|
|
751
|
+
type TextAlign = "right" | "below";
|
|
752
|
+
type Orientation = "horizontal" | "vertical";
|
|
753
|
+
type StepperSize = "small" | "large";
|
|
754
|
+
/** Figma "Type": indicator content — default (number, check when done), dot, number, icon. */
|
|
755
|
+
type StepperType = "default" | "dot" | "number" | "icon";
|
|
756
|
+
/** Figma "Typel": label placement relative to the indicator. */
|
|
757
|
+
type LabelPlacement = "top" | "centered" | "inverted";
|
|
758
|
+
interface Step {
|
|
759
|
+
title: string;
|
|
760
|
+
status: StepStatus;
|
|
761
|
+
}
|
|
762
|
+
declare class RelStepper extends LitElement {
|
|
763
|
+
steps: Step[];
|
|
764
|
+
textAlign: TextAlign;
|
|
765
|
+
orientation: Orientation;
|
|
766
|
+
size: StepperSize;
|
|
767
|
+
type: StepperType;
|
|
768
|
+
/**
|
|
769
|
+
* Figma Typel axis: top = label top-aligned beside the indicator,
|
|
770
|
+
* centered = label vertically centered beside it, inverted = indicator above
|
|
771
|
+
* the label. When unset, the legacy textAlign prop drives the layout
|
|
772
|
+
* (below ≈ inverted, right ≈ centered). Note Figma marks Top+Horizontal
|
|
773
|
+
* as an unsupported combination.
|
|
774
|
+
*/
|
|
775
|
+
labelPlacement?: LabelPlacement;
|
|
776
|
+
static styles: lit.CSSResult;
|
|
777
|
+
private isDone;
|
|
778
|
+
private isProgress;
|
|
779
|
+
private isDisabled;
|
|
780
|
+
private getStepClasses;
|
|
781
|
+
private onStepClick;
|
|
782
|
+
private renderIndicator;
|
|
783
|
+
render(): lit_html.TemplateResult<1>;
|
|
784
|
+
}
|
|
785
|
+
|
|
541
786
|
interface RadioOption {
|
|
542
787
|
value: string;
|
|
543
788
|
label: string;
|
|
@@ -547,6 +792,12 @@ interface RadioOption {
|
|
|
547
792
|
declare class RelRadio extends LitElement {
|
|
548
793
|
options: RadioOption[];
|
|
549
794
|
name: string;
|
|
795
|
+
/** Layout axis of the option list. `"vertical"` (default) stacks options in
|
|
796
|
+
* a column; `"horizontal"` lays them out in a wrapping row. */
|
|
797
|
+
orientation: Orientation;
|
|
798
|
+
/** Control scale. `"medium"` (default) = 20px circle with body-lg labels;
|
|
799
|
+
* `"small"` = 16px circle with body-md labels. */
|
|
800
|
+
size: "small" | "medium";
|
|
550
801
|
selectedValue: string | null;
|
|
551
802
|
disabled: boolean;
|
|
552
803
|
error: boolean;
|
|
@@ -1001,6 +1252,8 @@ declare class RelPopover extends LitElement {
|
|
|
1001
1252
|
private onHostPointerDown;
|
|
1002
1253
|
private onOpen;
|
|
1003
1254
|
private onClose;
|
|
1255
|
+
private showNativePopover;
|
|
1256
|
+
private hideNativePopover;
|
|
1004
1257
|
private addGlobalListeners;
|
|
1005
1258
|
private removeGlobalListeners;
|
|
1006
1259
|
private onOutsidePointerDown;
|
|
@@ -1131,16 +1384,26 @@ declare class RelSegmentedButton extends LitElement {
|
|
|
1131
1384
|
type SelectState = "default" | "error" | "disabled";
|
|
1132
1385
|
type SelectSize = "small" | "medium" | "large";
|
|
1133
1386
|
type SelectBorder = "rounded" | "sharp";
|
|
1134
|
-
type
|
|
1387
|
+
/** Alias of the shared field type — kept so existing imports keep resolving. */
|
|
1388
|
+
type SelectLabelStyle = FieldLabelStyle;
|
|
1135
1389
|
interface SelectOptionObject {
|
|
1136
1390
|
value: string;
|
|
1137
1391
|
label?: string;
|
|
1138
1392
|
supportingText?: string;
|
|
1393
|
+
/** rel-icon name rendered as a prefix (leading icon) on the menu item. */
|
|
1394
|
+
icon?: string;
|
|
1139
1395
|
}
|
|
1140
1396
|
type SelectOption = string | SelectOptionObject;
|
|
1141
1397
|
declare class RelSelect extends LitElement {
|
|
1142
1398
|
label: string;
|
|
1143
1399
|
labelStyle: SelectLabelStyle;
|
|
1400
|
+
/**
|
|
1401
|
+
* Accessible name for the trigger. Required when `labelStyle="none"`, since no
|
|
1402
|
+
* `<label>` renders and a placeholder is not a valid naming mechanism.
|
|
1403
|
+
*/
|
|
1404
|
+
fieldAriaLabel?: string;
|
|
1405
|
+
/** IDREF list of external element(s) naming the trigger. Wins over `fieldAriaLabel`. */
|
|
1406
|
+
fieldAriaLabelledby?: string;
|
|
1144
1407
|
options: SelectOption[];
|
|
1145
1408
|
/** Enables multi-select: selected values render as removable chips and options as checkboxes. */
|
|
1146
1409
|
multiple: boolean;
|
|
@@ -1157,7 +1420,11 @@ declare class RelSelect extends LitElement {
|
|
|
1157
1420
|
placeholder: string;
|
|
1158
1421
|
searchPlaceholder: string;
|
|
1159
1422
|
selectAllLabel: string;
|
|
1160
|
-
/**
|
|
1423
|
+
/**
|
|
1424
|
+
* Optional hard cap on visible chips. By default (no cap) the visible
|
|
1425
|
+
* count adapts to the trigger's width: chips collapse into the "+N" badge
|
|
1426
|
+
* one by one instead of wrapping to a second line.
|
|
1427
|
+
*/
|
|
1161
1428
|
maxVisibleChips: number;
|
|
1162
1429
|
/** Hides the in-panel search field. Figma's "Single Option" dropdown has no search bar at all — use this for short, non-searchable lists. */
|
|
1163
1430
|
noSearch: boolean;
|
|
@@ -1166,13 +1433,31 @@ declare class RelSelect extends LitElement {
|
|
|
1166
1433
|
private panelStyle;
|
|
1167
1434
|
private searchValue;
|
|
1168
1435
|
private internalState;
|
|
1436
|
+
/** How many chips currently fit in the trigger width (width-adaptive). */
|
|
1437
|
+
private visibleChipCount;
|
|
1169
1438
|
private triggerEl;
|
|
1170
1439
|
private searchInputEl;
|
|
1171
1440
|
private listboxEl;
|
|
1441
|
+
private valueEl;
|
|
1442
|
+
private chipsMeasureEl;
|
|
1443
|
+
/** Must match the `gap` of .select-chips / .select-chips-measure. */
|
|
1444
|
+
private static readonly CHIP_GAP;
|
|
1445
|
+
private chipResizeObserver?;
|
|
1172
1446
|
private uniqueId;
|
|
1173
1447
|
static styles: lit.CSSResult;
|
|
1448
|
+
connectedCallback(): void;
|
|
1174
1449
|
disconnectedCallback(): void;
|
|
1450
|
+
protected firstUpdated(): void;
|
|
1175
1451
|
protected willUpdate(changed: PropertyValues<this>): void;
|
|
1452
|
+
private _warnedNoName;
|
|
1453
|
+
protected updated(changed: PropertyValues<this>): void;
|
|
1454
|
+
/**
|
|
1455
|
+
* Width-adaptive chip collapsing: measures every selected chip in the
|
|
1456
|
+
* hidden .select-chips-measure row and works out how many fit in the value
|
|
1457
|
+
* area, always reserving room for the trailing "+N" chip when not all fit.
|
|
1458
|
+
* At least one chip stays visible no matter how narrow the field gets.
|
|
1459
|
+
*/
|
|
1460
|
+
private computeVisibleChips;
|
|
1176
1461
|
private get normalizedOptions();
|
|
1177
1462
|
/** Options matching the current search text (substring match, case-insensitive). */
|
|
1178
1463
|
private get filteredOptions();
|
|
@@ -1200,6 +1485,13 @@ declare class RelSelect extends LitElement {
|
|
|
1200
1485
|
private onSearchKeyDown;
|
|
1201
1486
|
private handleListNavigation;
|
|
1202
1487
|
private renderChips;
|
|
1488
|
+
/**
|
|
1489
|
+
* Hidden, unconstrained copy of every selected chip used purely for width
|
|
1490
|
+
* measurement (see computeVisibleChips). Chips mirror the visible ones'
|
|
1491
|
+
* width-affecting props (removable adds the ✕ icon). The trailing chip is
|
|
1492
|
+
* the widest "+N" badge that could ever be needed.
|
|
1493
|
+
*/
|
|
1494
|
+
private renderChipsMeasure;
|
|
1203
1495
|
render(): lit_html.TemplateResult<1>;
|
|
1204
1496
|
}
|
|
1205
1497
|
declare global {
|
|
@@ -1247,6 +1539,7 @@ declare class RelModal extends LitElement {
|
|
|
1247
1539
|
static styles: lit.CSSResult;
|
|
1248
1540
|
connectedCallback(): void;
|
|
1249
1541
|
disconnectedCallback(): void;
|
|
1542
|
+
protected willUpdate(): void;
|
|
1250
1543
|
updated(changed: Map<string, unknown>): void;
|
|
1251
1544
|
private handleOpen;
|
|
1252
1545
|
private handleClose;
|
|
@@ -1341,42 +1634,6 @@ declare class RelSnackbar extends LitElement {
|
|
|
1341
1634
|
render(): lit_html.TemplateResult<1>;
|
|
1342
1635
|
}
|
|
1343
1636
|
|
|
1344
|
-
type StepStatus = "done" | "progress" | "disabled";
|
|
1345
|
-
type TextAlign = "right" | "below";
|
|
1346
|
-
type Orientation = "horizontal" | "vertical";
|
|
1347
|
-
type StepperSize = "small" | "large";
|
|
1348
|
-
/** Figma "Type": indicator content — default (number, check when done), dot, number, icon. */
|
|
1349
|
-
type StepperType = "default" | "dot" | "number" | "icon";
|
|
1350
|
-
/** Figma "Typel": label placement relative to the indicator. */
|
|
1351
|
-
type LabelPlacement = "top" | "centered" | "inverted";
|
|
1352
|
-
interface Step {
|
|
1353
|
-
title: string;
|
|
1354
|
-
status: StepStatus;
|
|
1355
|
-
}
|
|
1356
|
-
declare class RelStepper extends LitElement {
|
|
1357
|
-
steps: Step[];
|
|
1358
|
-
textAlign: TextAlign;
|
|
1359
|
-
orientation: Orientation;
|
|
1360
|
-
size: StepperSize;
|
|
1361
|
-
type: StepperType;
|
|
1362
|
-
/**
|
|
1363
|
-
* Figma Typel axis: top = label top-aligned beside the indicator,
|
|
1364
|
-
* centered = label vertically centered beside it, inverted = indicator above
|
|
1365
|
-
* the label. When unset, the legacy textAlign prop drives the layout
|
|
1366
|
-
* (below ≈ inverted, right ≈ centered). Note Figma marks Top+Horizontal
|
|
1367
|
-
* as an unsupported combination.
|
|
1368
|
-
*/
|
|
1369
|
-
labelPlacement?: LabelPlacement;
|
|
1370
|
-
static styles: lit.CSSResult;
|
|
1371
|
-
private isDone;
|
|
1372
|
-
private isProgress;
|
|
1373
|
-
private isDisabled;
|
|
1374
|
-
private getStepClasses;
|
|
1375
|
-
private onStepClick;
|
|
1376
|
-
private renderIndicator;
|
|
1377
|
-
render(): lit_html.TemplateResult<1>;
|
|
1378
|
-
}
|
|
1379
|
-
|
|
1380
1637
|
declare class RelSwitch extends LitElement {
|
|
1381
1638
|
checked: boolean;
|
|
1382
1639
|
disabled: boolean;
|
|
@@ -1426,55 +1683,98 @@ declare class RelTab extends LitElement {
|
|
|
1426
1683
|
render(): lit_html.TemplateResult<1>;
|
|
1427
1684
|
}
|
|
1428
1685
|
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1686
|
+
/**
|
|
1687
|
+
* `<rel-time-picker>` — time selection field.
|
|
1688
|
+
*
|
|
1689
|
+
* Follows the rel-date-picker trigger/field conventions (label, helper/error
|
|
1690
|
+
* text, sizes, fullWidth, clearable) and the rel-range-picker draft model:
|
|
1691
|
+
* column selections are held in draft state until Apply is clicked; Cancel,
|
|
1692
|
+
* Escape, or an outside click discards the draft.
|
|
1693
|
+
*
|
|
1694
|
+
* The committed `value` is ALWAYS 24-hour "HH:mm" regardless of the display
|
|
1695
|
+
* `format`, so consumers get a consistent machine-readable string.
|
|
1696
|
+
*/
|
|
1697
|
+
declare class RelTimePicker extends LitElement {
|
|
1698
|
+
/** Committed time, 24-hour "HH:mm" (e.g. "09:30", "17:05"). */
|
|
1699
|
+
value: string | null;
|
|
1434
1700
|
placeholder: string;
|
|
1435
|
-
|
|
1436
|
-
value: string;
|
|
1437
|
-
leftIcon?: string;
|
|
1438
|
-
rightIcon?: string;
|
|
1439
|
-
/** Makes the trailing icon interactive (pointer + focusable) and emits
|
|
1440
|
-
* `rel-right-icon-click` — e.g. a password show/hide toggle or clear button. */
|
|
1441
|
-
clickableRightIcon: boolean;
|
|
1442
|
-
/** Accessible label for the trailing icon when it is clickable. */
|
|
1443
|
-
rightIconAriaLabel?: string;
|
|
1444
|
-
supportingText?: string;
|
|
1445
|
-
state: TextFieldState;
|
|
1446
|
-
size: TextFieldSize;
|
|
1447
|
-
floatingLabel: boolean;
|
|
1448
|
-
variant: TextFieldVariant;
|
|
1701
|
+
label: string | null;
|
|
1449
1702
|
disabled: boolean;
|
|
1450
1703
|
required: boolean;
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1704
|
+
readonly: boolean;
|
|
1705
|
+
/** Display format of the trigger text and hour column. Value stays "HH:mm". */
|
|
1706
|
+
format: "12h" | "24h";
|
|
1707
|
+
/** Minute granularity of the minutes column (1, 5, 10, 15, 30, …). */
|
|
1708
|
+
minuteStep: number;
|
|
1709
|
+
/** Earliest selectable time, "HH:mm" (inclusive). */
|
|
1710
|
+
minTime: string | null;
|
|
1711
|
+
/** Latest selectable time, "HH:mm" (inclusive). */
|
|
1712
|
+
maxTime: string | null;
|
|
1713
|
+
open: boolean;
|
|
1714
|
+
clearable: boolean;
|
|
1455
1715
|
error: boolean;
|
|
1716
|
+
/** Alias for `error` (requested-API compat); either flag applies error styling. */
|
|
1717
|
+
invalid: boolean;
|
|
1456
1718
|
errorMessage?: string;
|
|
1457
1719
|
helperText?: string;
|
|
1458
|
-
readonly: boolean;
|
|
1459
|
-
maxLength?: number;
|
|
1460
1720
|
name?: string;
|
|
1721
|
+
size: "small" | "medium" | "large";
|
|
1722
|
+
variant: "outlined";
|
|
1461
1723
|
fullWidth: boolean;
|
|
1462
|
-
private
|
|
1463
|
-
private
|
|
1464
|
-
private
|
|
1465
|
-
private
|
|
1466
|
-
private get isError();
|
|
1467
|
-
private get leadingIcon();
|
|
1468
|
-
private get helper();
|
|
1724
|
+
private draftHour;
|
|
1725
|
+
private draftMinute;
|
|
1726
|
+
private triggerButton?;
|
|
1727
|
+
private columnsElement?;
|
|
1469
1728
|
static styles: lit.CSSResult;
|
|
1470
1729
|
connectedCallback(): void;
|
|
1471
|
-
|
|
1472
|
-
private
|
|
1473
|
-
private
|
|
1474
|
-
|
|
1475
|
-
private
|
|
1730
|
+
disconnectedCallback(): void;
|
|
1731
|
+
private handleClickOutside;
|
|
1732
|
+
private handleEscapeKey;
|
|
1733
|
+
updated(changedProperties: Map<string, any>): void;
|
|
1734
|
+
private parseTime;
|
|
1735
|
+
private formatValue;
|
|
1736
|
+
private formatDisplay;
|
|
1737
|
+
private toMinutes;
|
|
1738
|
+
private get minuteStepSafe();
|
|
1739
|
+
private get minBoundMinutes();
|
|
1740
|
+
private get maxBoundMinutes();
|
|
1741
|
+
private isTimeInRange;
|
|
1742
|
+
/** Minutes shown in the minutes column (respecting minuteStep). */
|
|
1743
|
+
private getMinuteOptions;
|
|
1744
|
+
/** An hour is enabled if at least one of its step minutes is in range. */
|
|
1745
|
+
private isHourEnabled;
|
|
1746
|
+
private isPeriodEnabled;
|
|
1747
|
+
/** Hour column entries: display label + the 0–23 hour it maps to. */
|
|
1748
|
+
private getHourOptions;
|
|
1749
|
+
private get draftPeriod();
|
|
1750
|
+
private resetDraftFromValue;
|
|
1751
|
+
/** Snap the draft minute to the nearest valid step minute for the hour. */
|
|
1752
|
+
private clampDraftToRange;
|
|
1753
|
+
private toggleTimePopover;
|
|
1754
|
+
/** Close discarding the draft (Cancel / Escape / outside click). */
|
|
1755
|
+
private cancelPopover;
|
|
1756
|
+
private applySelection;
|
|
1757
|
+
/** Set the draft to the current time, snapped to the minute step and range. */
|
|
1758
|
+
private selectNow;
|
|
1759
|
+
private clearValue;
|
|
1760
|
+
private selectHour;
|
|
1761
|
+
private selectMinute;
|
|
1762
|
+
private selectPeriod;
|
|
1763
|
+
private scrollColumnsToSelection;
|
|
1764
|
+
private handleTriggerKeydown;
|
|
1765
|
+
/**
|
|
1766
|
+
* Column navigation: Up/Down move within the column (and select), Left/Right
|
|
1767
|
+
* jump between columns, Home/End go to the first/last option, Enter applies.
|
|
1768
|
+
*/
|
|
1769
|
+
private handleOptionKeydown;
|
|
1770
|
+
private focusAdjacentColumn;
|
|
1476
1771
|
render(): lit_html.TemplateResult<1>;
|
|
1477
1772
|
}
|
|
1773
|
+
declare global {
|
|
1774
|
+
interface HTMLElementTagNameMap {
|
|
1775
|
+
"rel-time-picker": RelTimePicker;
|
|
1776
|
+
}
|
|
1777
|
+
}
|
|
1478
1778
|
|
|
1479
1779
|
type ToastType = "default" | "error";
|
|
1480
1780
|
declare class RelToast extends LitElement {
|
|
@@ -1509,4 +1809,4 @@ declare class RelTooltip extends LitElement {
|
|
|
1509
1809
|
render(): lit_html.TemplateResult<1>;
|
|
1510
1810
|
}
|
|
1511
1811
|
|
|
1512
|
-
export { type BreadcrumbItem, type ButtonTone, type ButtonVariant, type ChipBorder, type ChipSize, type ChipTone, type ChipVariant, type DrawerCloseReason, type DrawerSide, type LabelPlacement, type MenuItem, type MenuType, type ModalSide, type Orientation, type OtpType, type ProgressMode, type RadioOption, RelAccordion, RelAlert, RelAvatar, RelBadge, RelBreadcrumbs, RelButton, RelCalendar, RelCard, RelCardMedia, RelCarousel, RelCheckbox, RelChip, RelContainer, RelDatePicker, RelDivider, RelDrawer, RelDrawerFooter, RelKbd, RelKbdGroup, RelLayout, RelMenu, RelMenuItem, RelMenubar, RelMenubarMenu, RelModal, RelNavbar, RelOtp, RelPagination, RelPopover, RelPopoverContent, RelProgress, RelRadio, RelRangePicker, RelResizableGroup, RelResizableHandle, RelResizablePanel, RelSegmentedButton, RelSelect, RelSkeleton, RelSlider, RelSnackbar, RelStepper, RelSwitch, RelTab, RelTabItem, RelTextfield, RelToast, RelTooltip, RelTopbar, RelTopbarActions, RelTopbarBrand, RelTopbarDropdown, RelTopbarDropdownItem, RelTopbarItem, RelTopbarMobilePanel, RelTopbarProfile, RelTopbarUtilities, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectLabelStyle, type SelectOption, type SelectOptionObject, type SelectSize, type SelectState, type SkeletonAnimation, type SkeletonShape, type SliderType, type SnackbarLines, type SnackbarType, type Step, type StepStatus, type StepperSize, type StepperType, type TabItem, type TextAlign, type TextFieldSize, type TextFieldState, type TextFieldVariant, type ToastType, type TooltipPosition, type TooltipType, type TopbarForceLayout, type TopbarProfileType, type TopbarRewardTier, type TopbarVariant, type TrackStyle };
|
|
1812
|
+
export { type AutocompleteFilter, type AutocompleteItem, type AutocompleteSearchFn, type BreadcrumbItem, type ButtonTone, type ButtonVariant, type ChipBorder, type ChipSize, type ChipTone, type ChipVariant, type DrawerCloseReason, type DrawerSide, type FieldLabelStyle, type LabelPlacement, type MenuItem, type MenuType, type ModalSide, type Orientation, type OtpType, type ProgressMode, type RadioOption, RelAccordion, RelAlert, RelAutocomplete, RelAvatar, RelBadge, RelBreadcrumbs, RelButton, RelCalendar, RelCard, RelCardMedia, RelCarousel, RelCheckbox, RelChip, RelContainer, RelDatePicker, RelDivider, RelDrawer, RelDrawerFooter, RelKbd, RelKbdGroup, RelLayout, RelMenu, RelMenuItem, RelMenubar, RelMenubarMenu, RelModal, RelNavbar, RelOtp, RelPagination, RelPopover, RelPopoverContent, RelProgress, RelRadio, RelRangePicker, RelResizableGroup, RelResizableHandle, RelResizablePanel, RelSegmentedButton, RelSelect, RelSkeleton, RelSlider, RelSnackbar, RelStepper, RelSwitch, RelTab, RelTabItem, RelTextfield, RelTimePicker, RelToast, RelTooltip, RelTopbar, RelTopbarActions, RelTopbarBrand, RelTopbarDropdown, RelTopbarDropdownItem, RelTopbarItem, RelTopbarMobilePanel, RelTopbarProfile, RelTopbarUtilities, type SegmentAlign, type SegmentOption, type SegmentSize, type SelectBorder, type SelectLabelStyle, type SelectOption, type SelectOptionObject, type SelectSize, type SelectState, type SkeletonAnimation, type SkeletonShape, type SliderType, type SnackbarLines, type SnackbarType, type Step, type StepStatus, type StepperSize, type StepperType, type TabItem, type TextAlign, type TextFieldSize, type TextFieldState, type TextFieldVariant, type ToastType, type TooltipPosition, type TooltipType, type TopbarForceLayout, type TopbarProfileType, type TopbarRewardTier, type TopbarVariant, type TrackStyle };
|