@reliability-design/web 1.4.2 → 1.4.4
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 +27 -0
- package/dist/components/rel-autocomplete/README.md +4 -1
- package/dist/components/rel-autocomplete/rel-autocomplete.ts +80 -3
- package/dist/components/rel-button/rel-button.ts +2 -2
- package/dist/components/rel-checkbox/README.md +69 -22
- package/dist/components/rel-checkbox/rel-checkbox.ts +116 -9
- package/dist/components/rel-pagination/README.md +14 -0
- package/dist/components/rel-pagination/rel-pagination.ts +30 -14
- package/dist/components/rel-radio/README.md +16 -1
- package/dist/components/rel-radio/rel-radio.ts +52 -1
- package/dist/components/rel-range-picker/rel-range-picker.ts +117 -2
- package/dist/components/rel-select/README.md +7 -0
- package/dist/components/rel-select/rel-select.ts +1237 -1119
- package/dist/components/rel-textfield/README.md +16 -0
- package/dist/components/rel-textfield/rel-textfield.ts +104 -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/components/rel-upload/UPLOAD-DESIGN-CHANGES.md +134 -0
- package/dist/components/rel-upload/rel-upload-actions.ts +163 -0
- package/dist/components/rel-upload/rel-upload.ts +943 -0
- package/dist/index.d.mts +453 -39
- package/dist/index.d.ts +453 -39
- package/dist/index.js +2659 -339
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2663 -346
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -34,6 +34,15 @@ declare class RelAlert extends LitElement {
|
|
|
34
34
|
type TextFieldState = "default" | "error" | "disabled";
|
|
35
35
|
type TextFieldSize = "small" | "medium" | "large";
|
|
36
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";
|
|
37
46
|
declare class RelTextfield extends LitElement {
|
|
38
47
|
label?: string;
|
|
39
48
|
placeholder: string;
|
|
@@ -49,7 +58,22 @@ declare class RelTextfield extends LitElement {
|
|
|
49
58
|
supportingText?: string;
|
|
50
59
|
state: TextFieldState;
|
|
51
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. */
|
|
52
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;
|
|
53
77
|
variant: TextFieldVariant;
|
|
54
78
|
disabled: boolean;
|
|
55
79
|
required: boolean;
|
|
@@ -71,8 +95,15 @@ declare class RelTextfield extends LitElement {
|
|
|
71
95
|
private get isError();
|
|
72
96
|
private get leadingIcon();
|
|
73
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();
|
|
74
102
|
static styles: lit.CSSResult;
|
|
75
103
|
connectedCallback(): void;
|
|
104
|
+
willUpdate(changed: PropertyValues<this>): void;
|
|
105
|
+
private _warnedNoName;
|
|
106
|
+
updated(): void;
|
|
76
107
|
/** Focuses the inner input/textarea (the host itself is not focusable). */
|
|
77
108
|
focus(options?: FocusOptions): void;
|
|
78
109
|
private handleFocus;
|
|
@@ -131,7 +162,14 @@ declare class RelAutocomplete extends LitElement {
|
|
|
131
162
|
placeholder: string;
|
|
132
163
|
size: TextFieldSize;
|
|
133
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. */
|
|
134
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;
|
|
135
173
|
prefixIcon?: string;
|
|
136
174
|
disabled: boolean;
|
|
137
175
|
readonly: boolean;
|
|
@@ -156,6 +194,9 @@ declare class RelAutocomplete extends LitElement {
|
|
|
156
194
|
/** Set while a selection/clear updates `value` internally, so willUpdate
|
|
157
195
|
* doesn't overwrite the input text the way it does for external writes. */
|
|
158
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();
|
|
159
200
|
static styles: lit.CSSResult;
|
|
160
201
|
disconnectedCallback(): void;
|
|
161
202
|
protected willUpdate(changed: PropertyValues<this>): void;
|
|
@@ -172,6 +213,8 @@ declare class RelAutocomplete extends LitElement {
|
|
|
172
213
|
private onPageScroll;
|
|
173
214
|
private openPanel;
|
|
174
215
|
private closePanel;
|
|
216
|
+
private showNativePopover;
|
|
217
|
+
private hideNativePopover;
|
|
175
218
|
private updatePosition;
|
|
176
219
|
/** Re-evaluates whether the panel should be showing for the current state. */
|
|
177
220
|
private syncPanel;
|
|
@@ -402,6 +445,9 @@ declare class RelCardMedia extends LitElement {
|
|
|
402
445
|
|
|
403
446
|
type CheckboxState = "default" | "error" | "disabled";
|
|
404
447
|
type CheckboxStatus = "unchecked" | "checked" | "indeterminate";
|
|
448
|
+
type CheckboxSize = "small" | "medium";
|
|
449
|
+
type CheckboxDensity = "compact" | "comfortable";
|
|
450
|
+
type CheckboxAlignment = "leading" | "trailing";
|
|
405
451
|
declare class RelCheckbox extends LitElement {
|
|
406
452
|
label: string;
|
|
407
453
|
/** rel-icon name rendered between the checkbox and the label (label prefix icon). */
|
|
@@ -410,11 +456,26 @@ declare class RelCheckbox extends LitElement {
|
|
|
410
456
|
state: CheckboxState;
|
|
411
457
|
status: CheckboxStatus;
|
|
412
458
|
value: string;
|
|
459
|
+
/** Control scale (Figma Size). `"medium"` (default) = 18px box with body-lg
|
|
460
|
+
* label; `"small"` = 14px box with body-md label. */
|
|
461
|
+
size: CheckboxSize;
|
|
462
|
+
/** Supporting-text layout (Figma Density). `"compact"` (default) puts the
|
|
463
|
+
* supporting text on its own line under the row, indented past the box;
|
|
464
|
+
* `"comfortable"` stacks label + supporting text beside the box. */
|
|
465
|
+
density: CheckboxDensity;
|
|
466
|
+
/** Box position (Figma Alignment). `"leading"` (default) renders the box
|
|
467
|
+
* before the label; `"trailing"` pushes it to the far edge of the row.
|
|
468
|
+
* Trailing has no compact layout in the spec, so it always renders with
|
|
469
|
+
* comfortable density. */
|
|
470
|
+
alignment: CheckboxAlignment;
|
|
413
471
|
get checked(): boolean;
|
|
414
472
|
set checked(val: boolean);
|
|
415
473
|
private _onChange;
|
|
416
474
|
private _onTouched;
|
|
417
475
|
static styles: lit.CSSResult;
|
|
476
|
+
protected willUpdate(changed: PropertyValues<this>): void;
|
|
477
|
+
/** Trailing has no compact layout in the spec — trailing wins. */
|
|
478
|
+
private get effectiveDensity();
|
|
418
479
|
private toggle;
|
|
419
480
|
registerOnChange(fn: (value: boolean) => void): void;
|
|
420
481
|
registerOnTouched(fn: () => void): void;
|
|
@@ -522,10 +583,16 @@ declare class RelRangePicker extends LitElement {
|
|
|
522
583
|
private isSelectingRange;
|
|
523
584
|
private hoverDate;
|
|
524
585
|
private triggerButton?;
|
|
586
|
+
private popoverEl?;
|
|
587
|
+
private backdropEl?;
|
|
525
588
|
static styles: lit.CSSResult;
|
|
526
589
|
connectedCallback(): void;
|
|
527
590
|
disconnectedCallback(): void;
|
|
528
|
-
updated(): void;
|
|
591
|
+
updated(changed: Map<string, unknown>): void;
|
|
592
|
+
private showTopLayer;
|
|
593
|
+
private hideTopLayer;
|
|
594
|
+
private onReposition;
|
|
595
|
+
private updatePopoverPosition;
|
|
529
596
|
private handleClickOutside;
|
|
530
597
|
private handleGlobalKeydown;
|
|
531
598
|
private toggleOpen;
|
|
@@ -706,6 +773,42 @@ declare class RelLayout extends LitElement {
|
|
|
706
773
|
render(): lit_html.TemplateResult<1>;
|
|
707
774
|
}
|
|
708
775
|
|
|
776
|
+
type StepStatus = "done" | "progress" | "disabled";
|
|
777
|
+
type TextAlign = "right" | "below";
|
|
778
|
+
type Orientation = "horizontal" | "vertical";
|
|
779
|
+
type StepperSize = "small" | "large";
|
|
780
|
+
/** Figma "Type": indicator content — default (number, check when done), dot, number, icon. */
|
|
781
|
+
type StepperType = "default" | "dot" | "number" | "icon";
|
|
782
|
+
/** Figma "Typel": label placement relative to the indicator. */
|
|
783
|
+
type LabelPlacement = "top" | "centered" | "inverted";
|
|
784
|
+
interface Step {
|
|
785
|
+
title: string;
|
|
786
|
+
status: StepStatus;
|
|
787
|
+
}
|
|
788
|
+
declare class RelStepper extends LitElement {
|
|
789
|
+
steps: Step[];
|
|
790
|
+
textAlign: TextAlign;
|
|
791
|
+
orientation: Orientation;
|
|
792
|
+
size: StepperSize;
|
|
793
|
+
type: StepperType;
|
|
794
|
+
/**
|
|
795
|
+
* Figma Typel axis: top = label top-aligned beside the indicator,
|
|
796
|
+
* centered = label vertically centered beside it, inverted = indicator above
|
|
797
|
+
* the label. When unset, the legacy textAlign prop drives the layout
|
|
798
|
+
* (below ≈ inverted, right ≈ centered). Note Figma marks Top+Horizontal
|
|
799
|
+
* as an unsupported combination.
|
|
800
|
+
*/
|
|
801
|
+
labelPlacement?: LabelPlacement;
|
|
802
|
+
static styles: lit.CSSResult;
|
|
803
|
+
private isDone;
|
|
804
|
+
private isProgress;
|
|
805
|
+
private isDisabled;
|
|
806
|
+
private getStepClasses;
|
|
807
|
+
private onStepClick;
|
|
808
|
+
private renderIndicator;
|
|
809
|
+
render(): lit_html.TemplateResult<1>;
|
|
810
|
+
}
|
|
811
|
+
|
|
709
812
|
interface RadioOption {
|
|
710
813
|
value: string;
|
|
711
814
|
label: string;
|
|
@@ -715,6 +818,12 @@ interface RadioOption {
|
|
|
715
818
|
declare class RelRadio extends LitElement {
|
|
716
819
|
options: RadioOption[];
|
|
717
820
|
name: string;
|
|
821
|
+
/** Layout axis of the option list. `"vertical"` (default) stacks options in
|
|
822
|
+
* a column; `"horizontal"` lays them out in a wrapping row. */
|
|
823
|
+
orientation: Orientation;
|
|
824
|
+
/** Control scale. `"medium"` (default) = 20px circle with body-lg labels;
|
|
825
|
+
* `"small"` = 16px circle with body-md labels. */
|
|
826
|
+
size: "small" | "medium";
|
|
718
827
|
selectedValue: string | null;
|
|
719
828
|
disabled: boolean;
|
|
720
829
|
error: boolean;
|
|
@@ -1129,6 +1238,9 @@ declare class RelPagination extends LitElement {
|
|
|
1129
1238
|
private get activePage();
|
|
1130
1239
|
private get computedTotalPages();
|
|
1131
1240
|
private generatePageNumbers;
|
|
1241
|
+
/** Abbreviate large page numbers (368178 → "368k") so buttons stay compact.
|
|
1242
|
+
Exact below 10,000; floored to k up to 1M; then M with one decimal. */
|
|
1243
|
+
private formatPageLabel;
|
|
1132
1244
|
private handlePageChange;
|
|
1133
1245
|
private renderChevronLeft;
|
|
1134
1246
|
private renderChevronRight;
|
|
@@ -1301,7 +1413,8 @@ declare class RelSegmentedButton extends LitElement {
|
|
|
1301
1413
|
type SelectState = "default" | "error" | "disabled";
|
|
1302
1414
|
type SelectSize = "small" | "medium" | "large";
|
|
1303
1415
|
type SelectBorder = "rounded" | "sharp";
|
|
1304
|
-
type
|
|
1416
|
+
/** Alias of the shared field type — kept so existing imports keep resolving. */
|
|
1417
|
+
type SelectLabelStyle = FieldLabelStyle;
|
|
1305
1418
|
interface SelectOptionObject {
|
|
1306
1419
|
value: string;
|
|
1307
1420
|
label?: string;
|
|
@@ -1313,6 +1426,13 @@ type SelectOption = string | SelectOptionObject;
|
|
|
1313
1426
|
declare class RelSelect extends LitElement {
|
|
1314
1427
|
label: string;
|
|
1315
1428
|
labelStyle: SelectLabelStyle;
|
|
1429
|
+
/**
|
|
1430
|
+
* Accessible name for the trigger. Required when `labelStyle="none"`, since no
|
|
1431
|
+
* `<label>` renders and a placeholder is not a valid naming mechanism.
|
|
1432
|
+
*/
|
|
1433
|
+
fieldAriaLabel?: string;
|
|
1434
|
+
/** IDREF list of external element(s) naming the trigger. Wins over `fieldAriaLabel`. */
|
|
1435
|
+
fieldAriaLabelledby?: string;
|
|
1316
1436
|
options: SelectOption[];
|
|
1317
1437
|
/** Enables multi-select: selected values render as removable chips and options as checkboxes. */
|
|
1318
1438
|
multiple: boolean;
|
|
@@ -1358,6 +1478,7 @@ declare class RelSelect extends LitElement {
|
|
|
1358
1478
|
disconnectedCallback(): void;
|
|
1359
1479
|
protected firstUpdated(): void;
|
|
1360
1480
|
protected willUpdate(changed: PropertyValues<this>): void;
|
|
1481
|
+
private _warnedNoName;
|
|
1361
1482
|
protected updated(changed: PropertyValues<this>): void;
|
|
1362
1483
|
/**
|
|
1363
1484
|
* Width-adaptive chip collapsing: measures every selected chip in the
|
|
@@ -1382,6 +1503,8 @@ declare class RelSelect extends LitElement {
|
|
|
1382
1503
|
private emitChange;
|
|
1383
1504
|
private openListbox;
|
|
1384
1505
|
private closeListbox;
|
|
1506
|
+
private showNativePopover;
|
|
1507
|
+
private hideNativePopover;
|
|
1385
1508
|
private updatePosition;
|
|
1386
1509
|
private selectSingleOption;
|
|
1387
1510
|
private toggleMultiOption;
|
|
@@ -1542,42 +1665,6 @@ declare class RelSnackbar extends LitElement {
|
|
|
1542
1665
|
render(): lit_html.TemplateResult<1>;
|
|
1543
1666
|
}
|
|
1544
1667
|
|
|
1545
|
-
type StepStatus = "done" | "progress" | "disabled";
|
|
1546
|
-
type TextAlign = "right" | "below";
|
|
1547
|
-
type Orientation = "horizontal" | "vertical";
|
|
1548
|
-
type StepperSize = "small" | "large";
|
|
1549
|
-
/** Figma "Type": indicator content — default (number, check when done), dot, number, icon. */
|
|
1550
|
-
type StepperType = "default" | "dot" | "number" | "icon";
|
|
1551
|
-
/** Figma "Typel": label placement relative to the indicator. */
|
|
1552
|
-
type LabelPlacement = "top" | "centered" | "inverted";
|
|
1553
|
-
interface Step {
|
|
1554
|
-
title: string;
|
|
1555
|
-
status: StepStatus;
|
|
1556
|
-
}
|
|
1557
|
-
declare class RelStepper extends LitElement {
|
|
1558
|
-
steps: Step[];
|
|
1559
|
-
textAlign: TextAlign;
|
|
1560
|
-
orientation: Orientation;
|
|
1561
|
-
size: StepperSize;
|
|
1562
|
-
type: StepperType;
|
|
1563
|
-
/**
|
|
1564
|
-
* Figma Typel axis: top = label top-aligned beside the indicator,
|
|
1565
|
-
* centered = label vertically centered beside it, inverted = indicator above
|
|
1566
|
-
* the label. When unset, the legacy textAlign prop drives the layout
|
|
1567
|
-
* (below ≈ inverted, right ≈ centered). Note Figma marks Top+Horizontal
|
|
1568
|
-
* as an unsupported combination.
|
|
1569
|
-
*/
|
|
1570
|
-
labelPlacement?: LabelPlacement;
|
|
1571
|
-
static styles: lit.CSSResult;
|
|
1572
|
-
private isDone;
|
|
1573
|
-
private isProgress;
|
|
1574
|
-
private isDisabled;
|
|
1575
|
-
private getStepClasses;
|
|
1576
|
-
private onStepClick;
|
|
1577
|
-
private renderIndicator;
|
|
1578
|
-
render(): lit_html.TemplateResult<1>;
|
|
1579
|
-
}
|
|
1580
|
-
|
|
1581
1668
|
declare class RelSwitch extends LitElement {
|
|
1582
1669
|
checked: boolean;
|
|
1583
1670
|
disabled: boolean;
|
|
@@ -1627,6 +1714,99 @@ declare class RelTab extends LitElement {
|
|
|
1627
1714
|
render(): lit_html.TemplateResult<1>;
|
|
1628
1715
|
}
|
|
1629
1716
|
|
|
1717
|
+
/**
|
|
1718
|
+
* `<rel-time-picker>` — time selection field.
|
|
1719
|
+
*
|
|
1720
|
+
* Follows the rel-date-picker trigger/field conventions (label, helper/error
|
|
1721
|
+
* text, sizes, fullWidth, clearable) and the rel-range-picker draft model:
|
|
1722
|
+
* column selections are held in draft state until Apply is clicked; Cancel,
|
|
1723
|
+
* Escape, or an outside click discards the draft.
|
|
1724
|
+
*
|
|
1725
|
+
* The committed `value` is ALWAYS 24-hour "HH:mm" regardless of the display
|
|
1726
|
+
* `format`, so consumers get a consistent machine-readable string.
|
|
1727
|
+
*/
|
|
1728
|
+
declare class RelTimePicker extends LitElement {
|
|
1729
|
+
/** Committed time, 24-hour "HH:mm" (e.g. "09:30", "17:05"). */
|
|
1730
|
+
value: string | null;
|
|
1731
|
+
placeholder: string;
|
|
1732
|
+
label: string | null;
|
|
1733
|
+
disabled: boolean;
|
|
1734
|
+
required: boolean;
|
|
1735
|
+
readonly: boolean;
|
|
1736
|
+
/** Display format of the trigger text and hour column. Value stays "HH:mm". */
|
|
1737
|
+
format: "12h" | "24h";
|
|
1738
|
+
/** Minute granularity of the minutes column (1, 5, 10, 15, 30, …). */
|
|
1739
|
+
minuteStep: number;
|
|
1740
|
+
/** Earliest selectable time, "HH:mm" (inclusive). */
|
|
1741
|
+
minTime: string | null;
|
|
1742
|
+
/** Latest selectable time, "HH:mm" (inclusive). */
|
|
1743
|
+
maxTime: string | null;
|
|
1744
|
+
open: boolean;
|
|
1745
|
+
clearable: boolean;
|
|
1746
|
+
error: boolean;
|
|
1747
|
+
/** Alias for `error` (requested-API compat); either flag applies error styling. */
|
|
1748
|
+
invalid: boolean;
|
|
1749
|
+
errorMessage?: string;
|
|
1750
|
+
helperText?: string;
|
|
1751
|
+
name?: string;
|
|
1752
|
+
size: "small" | "medium" | "large";
|
|
1753
|
+
variant: "outlined";
|
|
1754
|
+
fullWidth: boolean;
|
|
1755
|
+
private draftHour;
|
|
1756
|
+
private draftMinute;
|
|
1757
|
+
private triggerButton?;
|
|
1758
|
+
private columnsElement?;
|
|
1759
|
+
static styles: lit.CSSResult;
|
|
1760
|
+
connectedCallback(): void;
|
|
1761
|
+
disconnectedCallback(): void;
|
|
1762
|
+
private handleClickOutside;
|
|
1763
|
+
private handleEscapeKey;
|
|
1764
|
+
updated(changedProperties: Map<string, any>): void;
|
|
1765
|
+
private parseTime;
|
|
1766
|
+
private formatValue;
|
|
1767
|
+
private formatDisplay;
|
|
1768
|
+
private toMinutes;
|
|
1769
|
+
private get minuteStepSafe();
|
|
1770
|
+
private get minBoundMinutes();
|
|
1771
|
+
private get maxBoundMinutes();
|
|
1772
|
+
private isTimeInRange;
|
|
1773
|
+
/** Minutes shown in the minutes column (respecting minuteStep). */
|
|
1774
|
+
private getMinuteOptions;
|
|
1775
|
+
/** An hour is enabled if at least one of its step minutes is in range. */
|
|
1776
|
+
private isHourEnabled;
|
|
1777
|
+
private isPeriodEnabled;
|
|
1778
|
+
/** Hour column entries: display label + the 0–23 hour it maps to. */
|
|
1779
|
+
private getHourOptions;
|
|
1780
|
+
private get draftPeriod();
|
|
1781
|
+
private resetDraftFromValue;
|
|
1782
|
+
/** Snap the draft minute to the nearest valid step minute for the hour. */
|
|
1783
|
+
private clampDraftToRange;
|
|
1784
|
+
private toggleTimePopover;
|
|
1785
|
+
/** Close discarding the draft (Cancel / Escape / outside click). */
|
|
1786
|
+
private cancelPopover;
|
|
1787
|
+
private applySelection;
|
|
1788
|
+
/** Set the draft to the current time, snapped to the minute step and range. */
|
|
1789
|
+
private selectNow;
|
|
1790
|
+
private clearValue;
|
|
1791
|
+
private selectHour;
|
|
1792
|
+
private selectMinute;
|
|
1793
|
+
private selectPeriod;
|
|
1794
|
+
private scrollColumnsToSelection;
|
|
1795
|
+
private handleTriggerKeydown;
|
|
1796
|
+
/**
|
|
1797
|
+
* Column navigation: Up/Down move within the column (and select), Left/Right
|
|
1798
|
+
* jump between columns, Home/End go to the first/last option, Enter applies.
|
|
1799
|
+
*/
|
|
1800
|
+
private handleOptionKeydown;
|
|
1801
|
+
private focusAdjacentColumn;
|
|
1802
|
+
render(): lit_html.TemplateResult<1>;
|
|
1803
|
+
}
|
|
1804
|
+
declare global {
|
|
1805
|
+
interface HTMLElementTagNameMap {
|
|
1806
|
+
"rel-time-picker": RelTimePicker;
|
|
1807
|
+
}
|
|
1808
|
+
}
|
|
1809
|
+
|
|
1630
1810
|
type ToastType = "default" | "error";
|
|
1631
1811
|
declare class RelToast extends LitElement {
|
|
1632
1812
|
message: string;
|
|
@@ -1660,4 +1840,238 @@ declare class RelTooltip extends LitElement {
|
|
|
1660
1840
|
render(): lit_html.TemplateResult<1>;
|
|
1661
1841
|
}
|
|
1662
1842
|
|
|
1663
|
-
|
|
1843
|
+
/** Per-file lifecycle state. Mirrors the Figma "Upload File Row" variants 1:1. */
|
|
1844
|
+
type UploadStatus = "ready" | "uploading" | "success" | "error";
|
|
1845
|
+
/**
|
|
1846
|
+
* Aggregate state, derived from `files` — never set directly. Drives the list
|
|
1847
|
+
* heading, the alert, and the footer button in `<rel-upload-actions>`, and
|
|
1848
|
+
* corresponds to the Figma "Upload Modal" variants.
|
|
1849
|
+
*/
|
|
1850
|
+
type UploadPhase = "empty" | "selected" | "uploading" | "delayed" | "failed";
|
|
1851
|
+
interface UploadFile {
|
|
1852
|
+
/** Stable identity for keyed rendering and remove/retry targeting. */
|
|
1853
|
+
id: string;
|
|
1854
|
+
name: string;
|
|
1855
|
+
/** Size in bytes. */
|
|
1856
|
+
size: number;
|
|
1857
|
+
status: UploadStatus;
|
|
1858
|
+
/** 0–100, present while uploading and after success. */
|
|
1859
|
+
progress?: number;
|
|
1860
|
+
/** Bytes transferred so far. */
|
|
1861
|
+
loaded?: number;
|
|
1862
|
+
/** Human-readable failure reason, e.g. "file exceeds the 10 MB limit". */
|
|
1863
|
+
error?: string;
|
|
1864
|
+
/** The underlying File. Absent when the app supplies `files` itself. */
|
|
1865
|
+
file?: File;
|
|
1866
|
+
}
|
|
1867
|
+
interface UploadRejection {
|
|
1868
|
+
name: string;
|
|
1869
|
+
reason: "format" | "size";
|
|
1870
|
+
message: string;
|
|
1871
|
+
}
|
|
1872
|
+
interface UploaderContext {
|
|
1873
|
+
/** The entry being uploaded. */
|
|
1874
|
+
file: UploadFile;
|
|
1875
|
+
/** Aborted when `cancel()` is called. */
|
|
1876
|
+
signal: AbortSignal;
|
|
1877
|
+
/** Report bytes transferred. `total` defaults to the file size. */
|
|
1878
|
+
onProgress: (loaded: number, total?: number) => void;
|
|
1879
|
+
}
|
|
1880
|
+
/** Supply this to let `<rel-upload>` drive the whole lifecycle itself. */
|
|
1881
|
+
type Uploader = (file: File, ctx: UploaderContext) => Promise<void>;
|
|
1882
|
+
/** Snapshot handed to `<rel-upload-actions>` on every `rel-state` event. */
|
|
1883
|
+
interface UploadState {
|
|
1884
|
+
phase: UploadPhase;
|
|
1885
|
+
total: number;
|
|
1886
|
+
failed: number;
|
|
1887
|
+
canUpload: boolean;
|
|
1888
|
+
primaryLabel: string;
|
|
1889
|
+
}
|
|
1890
|
+
/**
|
|
1891
|
+
* `<rel-upload>` — dropzone plus per-file upload list.
|
|
1892
|
+
*
|
|
1893
|
+
* Two modes, chosen by whether `uploader` is set:
|
|
1894
|
+
*
|
|
1895
|
+
* - **Controlled** (default): the component picks and validates files, then
|
|
1896
|
+
* emits intents (`rel-upload`, `rel-retry`, `rel-cancel`, `rel-remove`). The
|
|
1897
|
+
* app performs the transfer and writes progress back onto `files`.
|
|
1898
|
+
* - **Self-driving**: with an `uploader` function the component runs the whole
|
|
1899
|
+
* batch itself — concurrency, progress, the delay warning, abort and retry.
|
|
1900
|
+
*
|
|
1901
|
+
* The Cancel / Upload buttons are NOT rendered here. They live in
|
|
1902
|
+
* `<rel-upload-actions>` so they can sit in `<rel-modal>`'s footer slot and
|
|
1903
|
+
* stay pinned while this body scrolls.
|
|
1904
|
+
*
|
|
1905
|
+
* Emits (bubbling + composed):
|
|
1906
|
+
* - `rel-files-added` — `{ added: UploadFile[], rejected: UploadRejection[] }`
|
|
1907
|
+
* - `rel-invalid` — `{ rejected: UploadRejection[] }`
|
|
1908
|
+
* - `rel-change` — selection changed; `{ files: UploadFile[] }`
|
|
1909
|
+
* - `rel-remove` — row removed; `{ id, file }`
|
|
1910
|
+
* - `rel-upload` — Upload pressed; `{ files: UploadFile[] }`
|
|
1911
|
+
* - `rel-retry` — Retry pressed; `{ files: UploadFile[] }`
|
|
1912
|
+
* - `rel-cancel` — Cancel pressed
|
|
1913
|
+
* - `rel-progress` — `{ id, progress, loaded, total }`
|
|
1914
|
+
* - `rel-file-complete`— `{ id, file }`
|
|
1915
|
+
* - `rel-file-error` — `{ id, file, error }`
|
|
1916
|
+
* - `rel-complete` — batch settled; `{ succeeded, failed }`
|
|
1917
|
+
* - `rel-state` — derived snapshot changed; `detail: UploadState`
|
|
1918
|
+
*
|
|
1919
|
+
* @element rel-upload
|
|
1920
|
+
*/
|
|
1921
|
+
declare class RelUpload extends LitElement {
|
|
1922
|
+
/** Comma-separated accept list, e.g. ".pdf,.png,.jpg" or "image/*". */
|
|
1923
|
+
accept: string;
|
|
1924
|
+
/** Max size per file as a human string ("10MB", "500kb"). Empty → no limit. */
|
|
1925
|
+
maxSize: string;
|
|
1926
|
+
/** Allow more than one file. */
|
|
1927
|
+
multiple: boolean;
|
|
1928
|
+
/** Disables the whole control. */
|
|
1929
|
+
disabled: boolean;
|
|
1930
|
+
/** Overrides the derived "PDF, PNG or JPG - up to 10 MB per file" hint. */
|
|
1931
|
+
hint: string;
|
|
1932
|
+
/** Dropzone headline. */
|
|
1933
|
+
dropzoneTitle: string;
|
|
1934
|
+
/** Browse button label. */
|
|
1935
|
+
browseLabel: string;
|
|
1936
|
+
/**
|
|
1937
|
+
* The file list. Set it to drive the component in controlled mode; the
|
|
1938
|
+
* component also maintains it itself as files are added and removed.
|
|
1939
|
+
*/
|
|
1940
|
+
files: UploadFile[];
|
|
1941
|
+
/** Supply to run uploads internally. See {@link Uploader}. */
|
|
1942
|
+
uploader?: Uploader;
|
|
1943
|
+
/** Max files transferred at once in self-driving mode. */
|
|
1944
|
+
concurrency: number;
|
|
1945
|
+
/** ms of continuous uploading before the "taking longer than usual" alert. */
|
|
1946
|
+
delayThreshold: number;
|
|
1947
|
+
private dragOver;
|
|
1948
|
+
private delayed;
|
|
1949
|
+
private inputEl;
|
|
1950
|
+
private aborter?;
|
|
1951
|
+
private delayTimer?;
|
|
1952
|
+
private lastSignature;
|
|
1953
|
+
static styles: lit.CSSResult;
|
|
1954
|
+
/**
|
|
1955
|
+
* Aggregate state. Read-only; corresponds to the Figma modal variants.
|
|
1956
|
+
*
|
|
1957
|
+
* `failed` means there is nothing left to send AND something errored — while
|
|
1958
|
+
* any row is still `ready` the primary action is Upload, not Retry.
|
|
1959
|
+
*/
|
|
1960
|
+
get phase(): UploadPhase;
|
|
1961
|
+
/** Files still eligible to be sent. */
|
|
1962
|
+
private get pending();
|
|
1963
|
+
private get failedFiles();
|
|
1964
|
+
/**
|
|
1965
|
+
* Failed rows worth sending again. A file rejected by `accept`/`max-size`
|
|
1966
|
+
* will fail validation every time, so retrying it is pointless — re-check
|
|
1967
|
+
* rather than re-queueing it blindly.
|
|
1968
|
+
*/
|
|
1969
|
+
private get retryable();
|
|
1970
|
+
get canUpload(): boolean;
|
|
1971
|
+
/** Footer button label — "Upload", "Upload 3 files" or "Retry upload". */
|
|
1972
|
+
get primaryLabel(): string;
|
|
1973
|
+
/** The snapshot `<rel-upload-actions>` renders from. */
|
|
1974
|
+
get state(): UploadState;
|
|
1975
|
+
private get listHeading();
|
|
1976
|
+
private get hintText();
|
|
1977
|
+
private get acceptDisplay();
|
|
1978
|
+
private get alertContent();
|
|
1979
|
+
private parseMaxBytes;
|
|
1980
|
+
private matchesAccept;
|
|
1981
|
+
static fmtSize(bytes: number): string;
|
|
1982
|
+
private static ext;
|
|
1983
|
+
/**
|
|
1984
|
+
* Validate and append. Invalid files are kept as `error` rows rather than
|
|
1985
|
+
* dropped — that is how the Figma Failure state surfaces them.
|
|
1986
|
+
*/
|
|
1987
|
+
private ingest;
|
|
1988
|
+
private patch;
|
|
1989
|
+
private startDelayTimer;
|
|
1990
|
+
private stopDelayTimer;
|
|
1991
|
+
private runBatch;
|
|
1992
|
+
/** Start (or resume) the batch. Emits `rel-upload`; runs it when `uploader` is set. */
|
|
1993
|
+
upload(): void;
|
|
1994
|
+
/** Re-queue every retryable failed row and send again. */
|
|
1995
|
+
retry(): void;
|
|
1996
|
+
/** Abort anything in flight and emit `rel-cancel`. Does not clear the list. */
|
|
1997
|
+
cancel(): void;
|
|
1998
|
+
/** Remove one row by id. */
|
|
1999
|
+
removeFile(id: string): void;
|
|
2000
|
+
/** Clear everything and abort in-flight transfers. */
|
|
2001
|
+
reset(): void;
|
|
2002
|
+
private emit;
|
|
2003
|
+
/**
|
|
2004
|
+
* Emit `rel-state` only when the derived snapshot actually changes, so
|
|
2005
|
+
* progress ticks don't spam `<rel-upload-actions>`.
|
|
2006
|
+
*/
|
|
2007
|
+
private notify;
|
|
2008
|
+
private openPicker;
|
|
2009
|
+
private onInputChange;
|
|
2010
|
+
private onDragOver;
|
|
2011
|
+
private onDragLeave;
|
|
2012
|
+
private onDrop;
|
|
2013
|
+
connectedCallback(): void;
|
|
2014
|
+
disconnectedCallback(): void;
|
|
2015
|
+
updated(): void;
|
|
2016
|
+
private rowMeta;
|
|
2017
|
+
private renderRow;
|
|
2018
|
+
render(): lit_html.TemplateResult<1>;
|
|
2019
|
+
}
|
|
2020
|
+
declare global {
|
|
2021
|
+
interface HTMLElementTagNameMap {
|
|
2022
|
+
"rel-upload": RelUpload;
|
|
2023
|
+
}
|
|
2024
|
+
}
|
|
2025
|
+
|
|
2026
|
+
/**
|
|
2027
|
+
* `<rel-upload-actions>` — the Cancel / Upload footer for `<rel-upload>`.
|
|
2028
|
+
*
|
|
2029
|
+
* Lives outside `<rel-upload>` so it can sit in `<rel-modal>`'s footer slot and
|
|
2030
|
+
* stay pinned while the upload body scrolls. It mirrors the sibling
|
|
2031
|
+
* `<rel-upload>`'s derived state, so the button label follows the design:
|
|
2032
|
+
* "Upload" → "Upload 3 files" → spinner → "Retry upload".
|
|
2033
|
+
*
|
|
2034
|
+
* ```html
|
|
2035
|
+
* <rel-modal open side="center" title="Upload documents">
|
|
2036
|
+
* <rel-upload multiple .uploader=${fn}></rel-upload>
|
|
2037
|
+
* <rel-upload-actions slot="footer"></rel-upload-actions>
|
|
2038
|
+
* </rel-modal>
|
|
2039
|
+
* ```
|
|
2040
|
+
*
|
|
2041
|
+
* The target is found automatically among its siblings. Use `for` to point at a
|
|
2042
|
+
* specific `<rel-upload>` by id when a container holds more than one.
|
|
2043
|
+
*
|
|
2044
|
+
* @element rel-upload-actions
|
|
2045
|
+
*/
|
|
2046
|
+
declare class RelUploadActions extends LitElement {
|
|
2047
|
+
/** Id of the `<rel-upload>` to control. Omit to auto-discover a sibling. */
|
|
2048
|
+
for: string;
|
|
2049
|
+
/** Cancel button label. */
|
|
2050
|
+
cancelLabel: string;
|
|
2051
|
+
/** Hides Cancel for flows that only ever move forward. */
|
|
2052
|
+
noCancel: boolean;
|
|
2053
|
+
private snapshot;
|
|
2054
|
+
private target;
|
|
2055
|
+
static styles: lit.CSSResult;
|
|
2056
|
+
connectedCallback(): void;
|
|
2057
|
+
disconnectedCallback(): void;
|
|
2058
|
+
updated(changed: Map<string, unknown>): void;
|
|
2059
|
+
/**
|
|
2060
|
+
* Listen on our own root rather than `document`: a shared root means no
|
|
2061
|
+
* shadow boundary sits between us and the sibling `<rel-upload>`, so
|
|
2062
|
+
* `event.target` is never retargeted away from it.
|
|
2063
|
+
*/
|
|
2064
|
+
private get root();
|
|
2065
|
+
private resolveTarget;
|
|
2066
|
+
private onState;
|
|
2067
|
+
private onCancel;
|
|
2068
|
+
private onPrimary;
|
|
2069
|
+
render(): lit_html.TemplateResult<1>;
|
|
2070
|
+
}
|
|
2071
|
+
declare global {
|
|
2072
|
+
interface HTMLElementTagNameMap {
|
|
2073
|
+
"rel-upload-actions": RelUploadActions;
|
|
2074
|
+
}
|
|
2075
|
+
}
|
|
2076
|
+
|
|
2077
|
+
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, RelUpload, RelUploadActions, 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, type UploadFile, type UploadPhase, type UploadRejection, type UploadState, type UploadStatus, type Uploader, type UploaderContext };
|