@rcarls/rc-progress 0.1.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +159 -0
- package/README.md +5 -0
- package/dist/custom-elements.json +18 -0
- package/dist/{rc-progress-Q8vVdyM1.js → rc-progress-bH32dzeI.js} +33 -163
- package/dist/rc-progress-bH32dzeI.js.map +1 -0
- package/dist/rc-progress-define.js +1 -1
- package/dist/rc-progress.js +1 -1
- package/dist/types/packages/rc-progress/src/rc-progress.d.ts +7 -2
- package/package.json +2 -2
- package/dist/rc-progress-Q8vVdyM1.js.map +0 -1
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
# @rcarls/rc-progress
|
|
2
|
+
|
|
3
|
+
## 0.7.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 54d9ead: Localize every component's built-in text. Button names, role
|
|
8
|
+
descriptions, announcements, and default labels now resolve per key from
|
|
9
|
+
the element's `messages` property, then from text registered with
|
|
10
|
+
`registerMessages(locale, catalog)` in `@rcarls/rc-common`, then from the
|
|
11
|
+
English defaults. The locale is the element's own `lang`, else
|
|
12
|
+
`<html lang>`; an ancestor's `lang` is ignored, because it usually marks
|
|
13
|
+
content rather than the interface. Components re-render when that locale
|
|
14
|
+
changes or new text is registered. `RcMessageCatalog` types the catalog,
|
|
15
|
+
and each package adds its scope to it.
|
|
16
|
+
|
|
17
|
+
Numbers a component formats as text follow the same locale:
|
|
18
|
+
`rc-progress`'s default percentage and `rc-splitter`'s `aria-valuetext`
|
|
19
|
+
use `Intl.NumberFormat`. `TypeaheadController` matches prefixes with an
|
|
20
|
+
`Intl.Collator`, so case and accents are ignored the way the locale
|
|
21
|
+
ignores them, and takes a `locale` option. `ItemsCollectionController`'s
|
|
22
|
+
`setCreateOption(text, label?)` takes the option's visible text from its
|
|
23
|
+
caller.
|
|
24
|
+
|
|
25
|
+
`rc-transfer-list`'s direction arrows are now decorative: screen readers
|
|
26
|
+
read only the action name, and the arrows turn over in RTL.
|
|
27
|
+
|
|
28
|
+
**Breaking:** chrome-text properties are replaced by `messages`. Migrate:
|
|
29
|
+
|
|
30
|
+
- `rc-search-bar` `clear-label` / `clearLabel` → `messages.clear`
|
|
31
|
+
- `rc-adaptive-menu` `overflow-label` / `overflowLabel` → `messages.overflow`
|
|
32
|
+
- `rc-chip-group` `show-all-label` / `showAllLabel` and `show-less-label` /
|
|
33
|
+
`showLessLabel` → `messages.showAll` and `messages.showLess`
|
|
34
|
+
- `rc-select` and `rc-combobox` `dialog-confirm-label` /
|
|
35
|
+
`dialogConfirmLabel` and `dialog-cancel-label` / `dialogCancelLabel` →
|
|
36
|
+
`messages.done` and `messages.cancel`
|
|
37
|
+
- `rc-editor-toolbar` `label` → `messages.toolbar`
|
|
38
|
+
|
|
39
|
+
Per-instance names stay attributes, but now default to `undefined` and fall
|
|
40
|
+
back to a message: `label` on `rc-adaptive-menu`, `rc-chip-group`,
|
|
41
|
+
`rc-menubar`, and `rc-splitter`; `available-label` and `selected-label`
|
|
42
|
+
on `rc-transfer-list`; `low-label` and `high-label` on `rc-range-slider`.
|
|
43
|
+
Read the resolved name from the rendered `aria-label` instead of the
|
|
44
|
+
property.
|
|
45
|
+
|
|
46
|
+
- 6e548d9: Several components handle `prefers-reduced-motion: reduce` in their own
|
|
47
|
+
shadow styles, outside a theme's reach, and refine it the same way the theme
|
|
48
|
+
layer already does: spatial motion (`translate`, `scale`, `transform`,
|
|
49
|
+
`inline-size`, `block-size`) goes fully to zero, while effects motion (color,
|
|
50
|
+
opacity) shortens instead of disappearing.
|
|
51
|
+
|
|
52
|
+
`rc-app-bar` zeros its host's hide/show `translate` but shortens the
|
|
53
|
+
expanded title's fade-in. `rc-disclosure` keeps its panel's expand/collapse
|
|
54
|
+
zeroed, but its summary/content backstop for a theme-added transition now
|
|
55
|
+
shortens instead of zeroing it outright. `rc-list-item`'s row and
|
|
56
|
+
state-layer transition only color and opacity, so the whole sweep shortens.
|
|
57
|
+
`rc-fab-menu`'s popup mixes `scale` with opacity/overlay/display under one
|
|
58
|
+
shared duration; reduced motion now zeros the scale and shortens the rest.
|
|
59
|
+
`rc-switch`'s thumb mixes background-color with inline-size/block-size/
|
|
60
|
+
transform the same way; the icons and track, which each transition only one
|
|
61
|
+
kind of property, needed only the zero-or-shorten call. `rc-fab`'s
|
|
62
|
+
scroll-reveal is opacity/visibility only with no time-based duration to
|
|
63
|
+
shorten in its scroll-linked path, so reduced motion narrows the scroll
|
|
64
|
+
window instead of collapsing it to zero; its JS-transition fallback path
|
|
65
|
+
shortens the same fade rather than removing it. `rc-progress`'s determinate
|
|
66
|
+
fill transition, previously unguarded under reduced motion, is now zeroed;
|
|
67
|
+
its indeterminate loop, a continuous sweep with no meaningful shortened
|
|
68
|
+
form, stays fully stopped rather than shortened.
|
|
69
|
+
|
|
70
|
+
- 114e38a: `rc-progress`'s determinate fill transition is now themeable through two new
|
|
71
|
+
CSS custom properties, `--rc-progress-fill-transition-duration` (default
|
|
72
|
+
`150ms`) and `--rc-progress-fill-transition-easing` (default `ease-out`),
|
|
73
|
+
replacing a hardcoded `0.15s ease-out` no theme could reach.
|
|
74
|
+
|
|
75
|
+
The indeterminate loop's easing changes from `ease-in-out` to `linear`. A
|
|
76
|
+
loop has no beginning or end to decelerate into or accelerate out of, so an
|
|
77
|
+
eased loop visibly pulses at each cycle boundary; Material 3 specifies linear
|
|
78
|
+
easing for indeterminate loops for the same reason.
|
|
79
|
+
|
|
80
|
+
`rc-theme-material` and `rc-theme-substrate` map the new duration/easing
|
|
81
|
+
properties to their effects-fast motion tokens; `rc-theme-win31` already sets
|
|
82
|
+
`transition: none` on the fill part directly and needs no change.
|
|
83
|
+
|
|
84
|
+
### Patch Changes
|
|
85
|
+
|
|
86
|
+
- 5c006de: Ship component CSS minified. Package builds now run the CSS in Lit `css` styles
|
|
87
|
+
and light-DOM structural styles through Lightning CSS, removing comments and
|
|
88
|
+
whitespace while keeping source maps that resolve to each template. Rendered
|
|
89
|
+
styles are unchanged.
|
|
90
|
+
|
|
91
|
+
`@rcarls/rc-common` adds `cssText`, an identity tag that marks a plain CSS
|
|
92
|
+
string for minification. `rc-chip`, `rc-disclosure`, and `rc-accordion` now
|
|
93
|
+
depend on `@rcarls/rc-common` for it.
|
|
94
|
+
|
|
95
|
+
- cc7289f: `rc-progress`'s indeterminate sweep now animates `translate` instead of
|
|
96
|
+
`inset-inline-start`, moving the animation onto the compositor instead of
|
|
97
|
+
forcing layout on every frame. `translate`'s percentages resolve against the
|
|
98
|
+
element's own box, not the track, and its direction is physical rather than
|
|
99
|
+
logical, so it does not flip for RTL the way `inset-inline-start` did on its
|
|
100
|
+
own; an internal custom property now carries that sign flip via `:dir(rtl)`,
|
|
101
|
+
verified to still sweep start-to-end in both writing directions.
|
|
102
|
+
- Updated dependencies [e3dfa59]
|
|
103
|
+
- Updated dependencies [50d5610]
|
|
104
|
+
- Updated dependencies [9ee769c]
|
|
105
|
+
- Updated dependencies [1179f24]
|
|
106
|
+
- Updated dependencies [595fe37]
|
|
107
|
+
- Updated dependencies [38cd00c]
|
|
108
|
+
- Updated dependencies [5c006de]
|
|
109
|
+
- Updated dependencies [a6553ff]
|
|
110
|
+
- Updated dependencies [2205478]
|
|
111
|
+
- Updated dependencies [4341311]
|
|
112
|
+
- Updated dependencies [899bb5e]
|
|
113
|
+
- Updated dependencies [25fcfe0]
|
|
114
|
+
- Updated dependencies [51f6403]
|
|
115
|
+
- Updated dependencies [9caca6b]
|
|
116
|
+
- Updated dependencies [b764a3c]
|
|
117
|
+
- Updated dependencies [54d9ead]
|
|
118
|
+
- Updated dependencies [b9175e9]
|
|
119
|
+
- Updated dependencies [c8b762b]
|
|
120
|
+
- Updated dependencies [55e1e7f]
|
|
121
|
+
- Updated dependencies [f1ca82d]
|
|
122
|
+
- Updated dependencies [b87f27b]
|
|
123
|
+
- Updated dependencies [32ebead]
|
|
124
|
+
- Updated dependencies [bfefedd]
|
|
125
|
+
- Updated dependencies [c130173]
|
|
126
|
+
- Updated dependencies [11680b6]
|
|
127
|
+
- Updated dependencies [223d36c]
|
|
128
|
+
- Updated dependencies [7b91a44]
|
|
129
|
+
- Updated dependencies [aa04ead]
|
|
130
|
+
- Updated dependencies [ac65b5b]
|
|
131
|
+
- Updated dependencies [afcfef8]
|
|
132
|
+
- Updated dependencies [11ef1ad]
|
|
133
|
+
- @rcarls/rc-common@0.7.0
|
|
134
|
+
|
|
135
|
+
## 0.6.0
|
|
136
|
+
|
|
137
|
+
### Minor Changes
|
|
138
|
+
|
|
139
|
+
- 509ee64: Add `rc-progress`, a native `<progress>` enhancer with a formatted value
|
|
140
|
+
display, a track and fill you can restyle with CSS custom properties, and a
|
|
141
|
+
built-in fix for the indeterminate/undefined-binding footgun.
|
|
142
|
+
|
|
143
|
+
Keep the native element as the uncontrolled source of truth, support releasing
|
|
144
|
+
a controlled value, and react to live native `value`/`max` changes. Preserve a
|
|
145
|
+
native determinate value while `indeterminate` temporarily removes its
|
|
146
|
+
attribute.
|
|
147
|
+
|
|
148
|
+
The bar renders at its intended height with no `display` attribute set,
|
|
149
|
+
matching its own documented default: previously the track/fill/native
|
|
150
|
+
`<progress>` are all absolutely positioned, contributing nothing to the
|
|
151
|
+
control's normal-flow height, so with no value-display text sharing its grid
|
|
152
|
+
row to give it one, the whole bar collapsed to 0px.
|
|
153
|
+
|
|
154
|
+
### Patch Changes
|
|
155
|
+
|
|
156
|
+
- Updated dependencies [6683eb9]
|
|
157
|
+
- Updated dependencies [ee7ba6c]
|
|
158
|
+
- Updated dependencies [30eb232]
|
|
159
|
+
- @rcarls/rc-common@0.6.0
|
package/README.md
CHANGED
|
@@ -33,3 +33,8 @@ you, avoiding the well-known `<progress>.value = undefined` throw:
|
|
|
33
33
|
<progress aria-label="Preparing…"></progress>
|
|
34
34
|
</rc-progress>
|
|
35
35
|
```
|
|
36
|
+
|
|
37
|
+
## Localization
|
|
38
|
+
|
|
39
|
+
Without `value-text`, the value display shows the rounded percentage formatted with
|
|
40
|
+
`Intl.NumberFormat` for the element's own `lang`, else `<html lang>`.
|
|
@@ -84,6 +84,16 @@
|
|
|
84
84
|
"name": "--rc-progress-fill-background",
|
|
85
85
|
"default": "var(--rc-accent)"
|
|
86
86
|
},
|
|
87
|
+
{
|
|
88
|
+
"description": "Determinate fill transition duration.",
|
|
89
|
+
"name": "--rc-progress-fill-transition-duration",
|
|
90
|
+
"default": "150ms"
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"description": "Determinate fill transition easing.",
|
|
94
|
+
"name": "--rc-progress-fill-transition-easing",
|
|
95
|
+
"default": "ease-out"
|
|
96
|
+
},
|
|
87
97
|
{
|
|
88
98
|
"description": "Value display text color.",
|
|
89
99
|
"name": "--rc-progress-value-color",
|
|
@@ -218,6 +228,14 @@
|
|
|
218
228
|
"description": "Screen-reader value text. When set, forwarded as `aria-valuetext` on the\nnative `<progress>` and used as the default formatted display text.",
|
|
219
229
|
"attribute": "value-text"
|
|
220
230
|
},
|
|
231
|
+
{
|
|
232
|
+
"kind": "field",
|
|
233
|
+
"name": "_locale",
|
|
234
|
+
"privacy": "private",
|
|
235
|
+
"readonly": true,
|
|
236
|
+
"default": "new LocaleController(this)",
|
|
237
|
+
"description": "Formats the default percentage in the element's own `lang`, else `<html lang>`."
|
|
238
|
+
},
|
|
221
239
|
{
|
|
222
240
|
"kind": "field",
|
|
223
241
|
"name": "orientation",
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { LitElement as
|
|
1
|
+
import { LitElement as h, css as v, nothing as a, html as d } from "lit";
|
|
2
2
|
import { property as n } from "lit/decorators.js";
|
|
3
|
-
import { ifDefined as
|
|
4
|
-
import {
|
|
5
|
-
var
|
|
6
|
-
for (var s = l > 1 ? void 0 : l ?
|
|
7
|
-
(p =
|
|
8
|
-
return l && s &&
|
|
3
|
+
import { ifDefined as m } from "lit/directives/if-defined.js";
|
|
4
|
+
import { LocaleController as f, NativeChildController as g, numberFormat as _ } from "@rcarls/rc-common";
|
|
5
|
+
var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (r, e, t, l) => {
|
|
6
|
+
for (var s = l > 1 ? void 0 : l ? b(e, t) : e, u = r.length - 1, p; u >= 0; u--)
|
|
7
|
+
(p = r[u]) && (s = (l ? p(e, t, s) : p(s)) || s);
|
|
8
|
+
return l && s && y(e, t, s), s;
|
|
9
9
|
};
|
|
10
|
-
const
|
|
11
|
-
fromAttribute(
|
|
12
|
-
return
|
|
10
|
+
const x = {
|
|
11
|
+
fromAttribute(r) {
|
|
12
|
+
return r === null ? null : r === "" || r === "overlay" ? "overlay" : r === "inline-start" ? "inline-start" : r === "inline-end" ? "inline-end" : null;
|
|
13
13
|
},
|
|
14
|
-
toAttribute(
|
|
15
|
-
return
|
|
14
|
+
toAttribute(r) {
|
|
15
|
+
return r;
|
|
16
16
|
}
|
|
17
|
-
}, c = class c extends
|
|
17
|
+
}, c = class c extends h {
|
|
18
18
|
constructor() {
|
|
19
|
-
super(...arguments), this._valueInitialized = !1, this.indeterminate = !1, this.disabled = !1, this.display = null, this.valueText = "", this.orientation = "horizontal", this._$nativeProgress = null, this._completedDispatched = !1, this._progressObserver = null, this._nativeProgressController = new
|
|
19
|
+
super(...arguments), this._valueInitialized = !1, this.indeterminate = !1, this.disabled = !1, this.display = null, this.valueText = "", this._locale = new f(this), this.orientation = "horizontal", this._$nativeProgress = null, this._completedDispatched = !1, this._progressObserver = null, this._nativeProgressController = new g(
|
|
20
20
|
this,
|
|
21
21
|
{
|
|
22
22
|
selector: ":scope > progress",
|
|
@@ -62,12 +62,12 @@ const y = {
|
|
|
62
62
|
render() {
|
|
63
63
|
if (!this._$nativeProgress)
|
|
64
64
|
return a;
|
|
65
|
-
const t =
|
|
65
|
+
const t = d`
|
|
66
66
|
<span part="value-display" class="rc-progress-value" aria-hidden="true">
|
|
67
67
|
<slot name="value-display">${this._displayText}</slot>
|
|
68
68
|
</span>
|
|
69
69
|
`;
|
|
70
|
-
return
|
|
70
|
+
return d`
|
|
71
71
|
<div
|
|
72
72
|
part="root"
|
|
73
73
|
class="rc-progress-root"
|
|
@@ -83,7 +83,7 @@ const y = {
|
|
|
83
83
|
<span
|
|
84
84
|
part="fill"
|
|
85
85
|
class="rc-progress-fill"
|
|
86
|
-
style=${
|
|
86
|
+
style=${m(this.indeterminate ? void 0 : this._fillStyle())}
|
|
87
87
|
></span>
|
|
88
88
|
</span>
|
|
89
89
|
|
|
@@ -100,8 +100,10 @@ const y = {
|
|
|
100
100
|
return this.valueText;
|
|
101
101
|
if (this.indeterminate)
|
|
102
102
|
return "";
|
|
103
|
-
const e = this.max > 0 ? this.value / this.max
|
|
104
|
-
return
|
|
103
|
+
const e = this.max > 0 ? this.value / this.max : 0;
|
|
104
|
+
return _(this._locale.locale, { style: "percent", maximumFractionDigits: 0 }).format(
|
|
105
|
+
e
|
|
106
|
+
);
|
|
105
107
|
}
|
|
106
108
|
get _nativeProgressValue() {
|
|
107
109
|
const e = this._$nativeProgress?.value;
|
|
@@ -155,162 +157,30 @@ const y = {
|
|
|
155
157
|
return this.orientation === "vertical" ? `inset-block-start:${(100 - e).toFixed(3)}%;block-size:${e.toFixed(3)}%` : `inline-size:${e.toFixed(3)}%`;
|
|
156
158
|
}
|
|
157
159
|
};
|
|
158
|
-
c.styles = v
|
|
159
|
-
|
|
160
|
-
display: block;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
.rc-progress-root {
|
|
164
|
-
display: grid;
|
|
165
|
-
gap: var(--rc-progress-gap, var(--rc-control-gap, 0.5rem));
|
|
166
|
-
align-items: center;
|
|
167
|
-
font-family: var(--rc-font-family, inherit);
|
|
168
|
-
font-size: var(--rc-font-size, inherit);
|
|
169
|
-
line-height: var(--rc-line-height, normal);
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.rc-progress-root[data-display='inline-start'] {
|
|
173
|
-
grid-template-columns: auto minmax(0, 1fr);
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.rc-progress-root[data-display='inline-end'] {
|
|
177
|
-
grid-template-columns: minmax(0, 1fr) auto;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
.rc-progress-control {
|
|
181
|
-
position: relative;
|
|
182
|
-
display: block;
|
|
183
|
-
min-width: 0;
|
|
184
|
-
/*
|
|
185
|
-
* Everything this wraps (the track, the fill, the slotted <progress>)
|
|
186
|
-
* is position: absolute, contributing nothing to normal-flow height.
|
|
187
|
-
* Without an explicit block-size here, this collapses to 0px and the
|
|
188
|
-
* whole bar renders invisible whenever no value-display text (the
|
|
189
|
-
* only other thing that could give the shared grid row a height) is
|
|
190
|
-
* shown alongside it — the default, since display is unset unless a
|
|
191
|
-
* consumer opts into inline-start/inline-end/overlay.
|
|
192
|
-
*/
|
|
193
|
-
block-size: var(--rc-progress-control-size, 0.5rem);
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
.rc-progress-track,
|
|
197
|
-
.rc-progress-fill {
|
|
198
|
-
position: absolute;
|
|
199
|
-
pointer-events: none;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
.rc-progress-track {
|
|
203
|
-
inset: 0;
|
|
204
|
-
block-size: var(--rc-progress-control-size, 0.5rem);
|
|
205
|
-
background: var(--rc-progress-track-background, CanvasText);
|
|
206
|
-
opacity: var(--rc-progress-track-opacity, 0.25);
|
|
207
|
-
border-radius: var(--rc-progress-track-radius, var(--rc-control-radius, 0));
|
|
208
|
-
overflow: hidden;
|
|
209
|
-
z-index: 0;
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
::slotted(progress) {
|
|
213
|
-
position: absolute;
|
|
214
|
-
inset: 0;
|
|
215
|
-
inline-size: 100%;
|
|
216
|
-
block-size: 100%;
|
|
217
|
-
margin: 0;
|
|
218
|
-
opacity: 0;
|
|
219
|
-
z-index: 2;
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
.rc-progress-fill {
|
|
223
|
-
inset-block: 0;
|
|
224
|
-
inset-inline-start: 0;
|
|
225
|
-
background: var(--rc-progress-fill-background, var(--rc-accent, Highlight));
|
|
226
|
-
border-radius: inherit;
|
|
227
|
-
z-index: 1;
|
|
228
|
-
transition: inline-size 0.15s ease-out;
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
:host([indeterminate]) .rc-progress-fill {
|
|
232
|
-
inline-size: 40% !important;
|
|
233
|
-
animation: rc-progress-indeterminate 1.4s ease-in-out infinite;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
@keyframes rc-progress-indeterminate {
|
|
237
|
-
0% {
|
|
238
|
-
inset-inline-start: -40%;
|
|
239
|
-
}
|
|
240
|
-
100% {
|
|
241
|
-
inset-inline-start: 100%;
|
|
242
|
-
}
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
@media (prefers-reduced-motion: reduce) {
|
|
246
|
-
:host([indeterminate]) .rc-progress-fill {
|
|
247
|
-
animation: none;
|
|
248
|
-
inset-inline-start: 0;
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
.rc-progress-value {
|
|
253
|
-
font-variant-numeric: tabular-nums;
|
|
254
|
-
white-space: nowrap;
|
|
255
|
-
color: var(--rc-progress-value-color, var(--rc-text-disabled, GrayText));
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
.rc-progress-root[data-display='overlay'] .rc-progress-value {
|
|
259
|
-
position: absolute;
|
|
260
|
-
inset: 0;
|
|
261
|
-
display: flex;
|
|
262
|
-
align-items: center;
|
|
263
|
-
justify-content: center;
|
|
264
|
-
pointer-events: none;
|
|
265
|
-
z-index: 3;
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
:host([orientation='vertical']) {
|
|
269
|
-
display: inline-block;
|
|
270
|
-
}
|
|
271
|
-
|
|
272
|
-
:host([orientation='vertical']) .rc-progress-control {
|
|
273
|
-
inline-size: var(--rc-progress-control-size, 0.5rem);
|
|
274
|
-
block-size: var(--rc-progress-vertical-size, 12.5rem);
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
:host([orientation='vertical']) .rc-progress-track {
|
|
278
|
-
inline-size: var(--rc-progress-control-size, 0.5rem);
|
|
279
|
-
block-size: auto;
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
:host([orientation='vertical']) .rc-progress-fill {
|
|
283
|
-
inset-inline: 0;
|
|
284
|
-
inset-block-start: auto;
|
|
285
|
-
}
|
|
286
|
-
|
|
287
|
-
:host([disabled]) {
|
|
288
|
-
opacity: 0.5;
|
|
289
|
-
}
|
|
290
|
-
`;
|
|
291
|
-
let r = c;
|
|
160
|
+
c.styles = v`:host{--_rc-progress-indeterminate-direction:1;display:block}:host(:dir(rtl)){--_rc-progress-indeterminate-direction:-1}.rc-progress-root{gap:var(--rc-progress-gap,var(--rc-control-gap,.5rem));font-family:var(--rc-font-family,inherit);font-size:var(--rc-font-size,inherit);line-height:var(--rc-line-height,normal);align-items:center;display:grid}.rc-progress-root[data-display=inline-start]{grid-template-columns:auto minmax(0,1fr)}.rc-progress-root[data-display=inline-end]{grid-template-columns:minmax(0,1fr) auto}.rc-progress-control{min-width:0;block-size:var(--rc-progress-control-size,.5rem);display:block;position:relative}.rc-progress-track,.rc-progress-fill{pointer-events:none;position:absolute}.rc-progress-track{block-size:var(--rc-progress-control-size,.5rem);background:var(--rc-progress-track-background,CanvasText);opacity:var(--rc-progress-track-opacity,.25);border-radius:var(--rc-progress-track-radius,var(--rc-control-radius,0));z-index:0;inset:0;overflow:hidden}::slotted(progress){opacity:0;z-index:2;block-size:100%;inline-size:100%;margin:0;position:absolute;inset:0}.rc-progress-fill{background:var(--rc-progress-fill-background,var(--rc-accent,Highlight));border-radius:inherit;z-index:1;transition:inline-size var(--rc-progress-fill-transition-duration,.15s) var(--rc-progress-fill-transition-easing,ease-out);inset-block:0;inset-inline-start:0}:host([indeterminate]) .rc-progress-fill{animation:1.4s linear infinite rc-progress-indeterminate;inline-size:40%!important}@keyframes rc-progress-indeterminate{0%{translate:calc(var(--_rc-progress-indeterminate-direction) * -100%) 0}to{translate:calc(var(--_rc-progress-indeterminate-direction) * 250%) 0}}@media (prefers-reduced-motion:reduce){:host(:not([indeterminate])) .rc-progress-fill{transition-duration:0s}:host([indeterminate]) .rc-progress-fill{animation:none;translate:none}}.rc-progress-value{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--rc-progress-value-color,var(--rc-text-disabled,GrayText))}.rc-progress-root[data-display=overlay] .rc-progress-value{pointer-events:none;z-index:3;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}:host([orientation=vertical]){display:inline-block}:host([orientation=vertical]) .rc-progress-control{inline-size:var(--rc-progress-control-size,.5rem);block-size:var(--rc-progress-vertical-size,12.5rem)}:host([orientation=vertical]) .rc-progress-track{inline-size:var(--rc-progress-control-size,.5rem);block-size:auto}:host([orientation=vertical]) .rc-progress-fill{inset-block-start:auto;inset-inline:0}:host([disabled]){opacity:.5}`;
|
|
161
|
+
let i = c;
|
|
292
162
|
o([
|
|
293
163
|
n({ type: Number })
|
|
294
|
-
],
|
|
164
|
+
], i.prototype, "value", 1);
|
|
295
165
|
o([
|
|
296
166
|
n({ type: Number, attribute: "default-value" })
|
|
297
|
-
],
|
|
167
|
+
], i.prototype, "defaultValue", 1);
|
|
298
168
|
o([
|
|
299
169
|
n({ type: Boolean, reflect: !0 })
|
|
300
|
-
],
|
|
170
|
+
], i.prototype, "indeterminate", 2);
|
|
301
171
|
o([
|
|
302
172
|
n({ type: Boolean, reflect: !0 })
|
|
303
|
-
],
|
|
173
|
+
], i.prototype, "disabled", 2);
|
|
304
174
|
o([
|
|
305
|
-
n({ reflect: !0, converter:
|
|
306
|
-
],
|
|
175
|
+
n({ reflect: !0, converter: x })
|
|
176
|
+
], i.prototype, "display", 2);
|
|
307
177
|
o([
|
|
308
178
|
n({ attribute: "value-text" })
|
|
309
|
-
],
|
|
179
|
+
], i.prototype, "valueText", 2);
|
|
310
180
|
o([
|
|
311
181
|
n({ reflect: !0 })
|
|
312
|
-
],
|
|
182
|
+
], i.prototype, "orientation", 2);
|
|
313
183
|
export {
|
|
314
|
-
|
|
184
|
+
i as R
|
|
315
185
|
};
|
|
316
|
-
//# sourceMappingURL=rc-progress-
|
|
186
|
+
//# sourceMappingURL=rc-progress-bH32dzeI.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rc-progress-bH32dzeI.js","sources":["../src/rc-progress.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport type { ComplexAttributeConverter, PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport {\n LocaleController,\n NativeChildController,\n numberFormat,\n warnMissingDirectChild,\n} from '@rcarls/rc-common';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'rc-progress': RCProgress;\n }\n\n interface HTMLElementEventMap {\n 'rc-progress-complete': CustomEvent<Record<string, never>>;\n }\n}\n\ntype DisplayValue = 'inline-start' | 'inline-end' | 'overlay' | null;\n\n/**\n * Normalises the `display` attribute.\n * A bare boolean attribute (`display` with no value) maps to `'overlay'` so\n * the reflected attribute is always an explicit string, never an empty string.\n */\nconst displayConverter: ComplexAttributeConverter<DisplayValue> = {\n fromAttribute(v: string | null): DisplayValue {\n if (v === null) {\n return null;\n }\n\n if (v === '' || v === 'overlay') {\n return 'overlay';\n }\n\n if (v === 'inline-start') {\n return 'inline-start';\n }\n\n if (v === 'inline-end') {\n return 'inline-end';\n }\n\n return null;\n },\n toAttribute(v: DisplayValue): string | null {\n return v;\n },\n};\n\n/**\n * Enhances a native `<progress>` with a custom track/fill and an optional\n * formatted value display, following the same progressive-enhancement shape\n * as `rc-slider`.\n *\n * Deliberately does one job: it does not render a dialog, own any phase\n * state, or assume anything about where it's placed. Compose it with\n * `rc-dialog`, a card, or an inline status row as needed.\n *\n * Label association:\n * - Explicit `for`/`id`: `<label for=\"sync\">Sync</label><rc-progress><progress id=\"sync\" …></rc-progress>`\n * - Direct `aria-label` on the `<progress>`: `<progress aria-label=\"Sync\" …>`\n *\n * These patterns all work without JavaScript. The component does not render\n * a label itself — the consumer is responsible for accessible naming.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-progress rc-progress docs}\n *\n * @slot - Place a `<progress>` element here.\n * @slot value-display - Optional replacement for the rendered value text.\n *\n * @fires rc-progress-complete - Fires once when `value` reaches `max` while\n * not indeterminate. Does not re-fire on subsequent updates while already\n * at max.\n *\n * @attr value - Current progress value. Host writes are silent.\n * @attr default-value - Initial uncontrolled value. Has no effect after the first\n * host write.\n * @attr indeterminate - When present, the component removes the native `<progress>`'s\n * `value` attribute instead of asking the consumer to bind `undefined` to it.\n * @attr display - Controls the live value display: absent (none), `overlay` (centered on\n * the bar), `inline-start`, or `inline-end`. Without `value-text` it shows the rounded\n * percentage, formatted for the element's own `lang`, else `<html lang>`.\n * @attr value-text - Screen-reader value text, forwarded as `aria-valuetext` on the\n * native `<progress>`. Also used as the default formatted display text when set.\n * @attr orientation - Orientation, forwarded to `aria-orientation`: `horizontal` or\n * `vertical`.\n * @attr disabled - Visual-only dimming; native `<progress>` has no functional disabled state.\n *\n * @cssprop [--rc-progress-control-size=0.5rem] - Track hit-area block size.\n * @cssprop [--rc-progress-vertical-size=12.5rem] - Track length when `orientation=\"vertical\"`.\n * @cssprop [--rc-progress-gap=var(--rc-control-gap)] - Gap between track and inline value display.\n * @cssprop [--rc-progress-track-background=CanvasText] - Unfilled track color.\n * @cssprop [--rc-progress-track-opacity=0.25] - Unfilled track opacity.\n * @cssprop [--rc-progress-track-radius=var(--rc-control-radius)] - Track border radius.\n * @cssprop [--rc-progress-fill-background=var(--rc-accent)] - Filled track color.\n * @cssprop [--rc-progress-fill-transition-duration=150ms] - Determinate fill transition duration.\n * @cssprop [--rc-progress-fill-transition-easing=ease-out] - Determinate fill transition easing.\n * @cssprop [--rc-progress-value-color=var(--rc-text-disabled)] - Value display text color.\n *\n * @csspart root - Root layout wrapper.\n * @csspart control - Track positioning wrapper.\n * @csspart track - Visual track.\n * @csspart fill - Filled progress segment.\n * @csspart value-display - Rendered value text.\n */\nexport class RCProgress extends LitElement {\n static override styles = css`\n :host {\n display: block;\n /*\n * translate() percentages resolve against the element's own box, not\n * the parent's, and its direction is physical, not logical — it does\n * not flip for RTL the way inset-inline-start does on its own. This\n * sign flips the indeterminate sweep's direction so it still travels\n * start-to-end in the document's actual writing direction.\n */\n --_rc-progress-indeterminate-direction: 1;\n }\n\n :host(:dir(rtl)) {\n --_rc-progress-indeterminate-direction: -1;\n }\n\n .rc-progress-root {\n display: grid;\n gap: var(--rc-progress-gap, var(--rc-control-gap, 0.5rem));\n align-items: center;\n font-family: var(--rc-font-family, inherit);\n font-size: var(--rc-font-size, inherit);\n line-height: var(--rc-line-height, normal);\n }\n\n .rc-progress-root[data-display='inline-start'] {\n grid-template-columns: auto minmax(0, 1fr);\n }\n\n .rc-progress-root[data-display='inline-end'] {\n grid-template-columns: minmax(0, 1fr) auto;\n }\n\n .rc-progress-control {\n position: relative;\n display: block;\n min-width: 0;\n /*\n * Everything this wraps (the track, the fill, the slotted <progress>)\n * is position: absolute, contributing nothing to normal-flow height.\n * Without an explicit block-size here, this collapses to 0px and the\n * whole bar renders invisible whenever no value-display text (the\n * only other thing that could give the shared grid row a height) is\n * shown alongside it — the default, since display is unset unless a\n * consumer opts into inline-start/inline-end/overlay.\n */\n block-size: var(--rc-progress-control-size, 0.5rem);\n }\n\n .rc-progress-track,\n .rc-progress-fill {\n position: absolute;\n pointer-events: none;\n }\n\n .rc-progress-track {\n inset: 0;\n block-size: var(--rc-progress-control-size, 0.5rem);\n background: var(--rc-progress-track-background, CanvasText);\n opacity: var(--rc-progress-track-opacity, 0.25);\n border-radius: var(--rc-progress-track-radius, var(--rc-control-radius, 0));\n overflow: hidden;\n z-index: 0;\n }\n\n ::slotted(progress) {\n position: absolute;\n inset: 0;\n inline-size: 100%;\n block-size: 100%;\n margin: 0;\n opacity: 0;\n z-index: 2;\n }\n\n .rc-progress-fill {\n inset-block: 0;\n inset-inline-start: 0;\n background: var(--rc-progress-fill-background, var(--rc-accent, Highlight));\n border-radius: inherit;\n z-index: 1;\n transition: inline-size var(--rc-progress-fill-transition-duration, 150ms)\n var(--rc-progress-fill-transition-easing, ease-out);\n }\n\n :host([indeterminate]) .rc-progress-fill {\n inline-size: 40% !important;\n /*\n * A loop has no beginning or end to decelerate into or accelerate out\n * of, so it uses a constant, linear pace; an eased loop visibly pulses\n * at each cycle boundary.\n */\n animation: rc-progress-indeterminate 1.4s linear infinite;\n }\n\n /*\n * translate() moves on the compositor; inset-inline-start forces layout\n * on every frame. The fill's own box is 40% of the track (its inline-\n * size), so a translate of N% moves it N% of that 40%, not of the\n * track: -100% (of self) lands at -40% of the track, matching where\n * this keyframe used to start, and 250% (of self) lands at 100%.\n */\n @keyframes rc-progress-indeterminate {\n 0% {\n translate: calc(var(--_rc-progress-indeterminate-direction) * -100%) 0;\n }\n 100% {\n translate: calc(var(--_rc-progress-indeterminate-direction) * 250%) 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n /*\n * The determinate fill's inline-size transition is spatial (a real\n * width change), so it drops to 0ms. The indeterminate loop is an\n * unbounded, continuous translate sweeping most of the track, which\n * has no meaningful \"shortened\" form, so it stops outright rather\n * than looping faster; the fill still shows a static bar via its\n * existing 40% inline-size.\n */\n :host(:not([indeterminate])) .rc-progress-fill {\n transition-duration: 0ms;\n }\n\n :host([indeterminate]) .rc-progress-fill {\n animation: none;\n translate: none;\n }\n }\n\n .rc-progress-value {\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n color: var(--rc-progress-value-color, var(--rc-text-disabled, GrayText));\n }\n\n .rc-progress-root[data-display='overlay'] .rc-progress-value {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n z-index: 3;\n }\n\n :host([orientation='vertical']) {\n display: inline-block;\n }\n\n :host([orientation='vertical']) .rc-progress-control {\n inline-size: var(--rc-progress-control-size, 0.5rem);\n block-size: var(--rc-progress-vertical-size, 12.5rem);\n }\n\n :host([orientation='vertical']) .rc-progress-track {\n inline-size: var(--rc-progress-control-size, 0.5rem);\n block-size: auto;\n }\n\n :host([orientation='vertical']) .rc-progress-fill {\n inset-inline: 0;\n inset-block-start: auto;\n }\n\n :host([disabled]) {\n opacity: 0.5;\n }\n `;\n\n private _value: number | undefined;\n private _defaultValue: number | undefined;\n private _valueInitialized = false;\n\n /** Current progress value. */\n @property({ type: Number })\n get value(): number {\n return this._value ?? this._defaultValue ?? this._nativeProgressValue;\n }\n\n set value(value: number | undefined) {\n const oldValue = this.value;\n\n this._value = value ?? undefined;\n this._valueInitialized = true;\n this._applyValueToNative(this.value);\n this.requestUpdate('value', oldValue);\n }\n\n /** Initial uncontrolled value. Has no effect after the first host write. */\n @property({ type: Number, attribute: 'default-value' })\n get defaultValue(): number | undefined {\n return this._defaultValue;\n }\n\n set defaultValue(value: number | undefined) {\n const oldValue = this._defaultValue;\n\n this._defaultValue = value;\n\n if (!this._valueInitialized && this._value === undefined && value !== undefined) {\n this._applyValueToNative(value);\n this.requestUpdate('value', undefined);\n }\n\n this.requestUpdate('defaultValue', oldValue);\n }\n\n /**\n * Maximum progress value, read directly from the native `<progress>`\n * child's own `max` IDL property (native default `1`) rather than\n * duplicated as a separate host attribute — the consumer already owns it\n * by setting `max` on the slotted `<progress>` element.\n */\n get max(): number {\n return this._$nativeProgress?.max ?? 1;\n }\n\n /**\n * When present, the component removes the native `<progress>`'s `value`\n * attribute instead of asking the consumer to bind `undefined` to it —\n * binding `undefined` to a live `<progress>.value` throws.\n */\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n /** Visual-only dimming; native `<progress>` has no functional disabled state. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Controls the live value display.\n *\n * - Absent (default) — no value shown.\n * - `overlay` (or bare `display`) — centered on the bar.\n * - `display=\"inline-start\"` — rendered before the track, inline in the grid.\n * - `display=\"inline-end\"` — rendered after the track, inline in the grid.\n */\n @property({ reflect: true, converter: displayConverter })\n display: DisplayValue = null;\n\n /**\n * Screen-reader value text. When set, forwarded as `aria-valuetext` on the\n * native `<progress>` and used as the default formatted display text.\n */\n @property({ attribute: 'value-text' }) valueText = '';\n\n /** Formats the default percentage in the element's own `lang`, else `<html lang>`. */\n private readonly _locale = new LocaleController(this);\n\n /** Orientation; reflected as an attribute and forwarded to `aria-orientation`. */\n @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n private _$nativeProgress: HTMLProgressElement | null = null;\n private _completedDispatched = false;\n private _nativeValueBeforeIndeterminate: number | undefined;\n private _progressObserver: MutationObserver | null = null;\n\n private readonly _nativeProgressController = new NativeChildController<HTMLProgressElement>(\n this,\n {\n selector: ':scope > progress',\n observe: true,\n onChange: ($progress, $previous) => this._setupProgress($progress, $previous),\n onMissing: () => {\n if (import.meta.env.DEV) {\n warnMissingDirectChild(this, {\n selector: ':scope > progress',\n message: '[rc-progress] Requires a child <progress> element.',\n });\n }\n },\n },\n );\n\n override disconnectedCallback(): void {\n this._progressObserver?.disconnect();\n\n super.disconnectedCallback();\n }\n\n override updated(changed: PropertyValues): void {\n const $progress = this._$nativeProgress;\n\n if ($progress) {\n this._syncAriaAttributes($progress);\n }\n\n if (changed.has('indeterminate')) {\n this._applyIndeterminate();\n }\n\n if (changed.has('value') || changed.has('indeterminate')) {\n this._checkComplete();\n }\n }\n\n override render() {\n const $progress = this._$nativeProgress;\n\n if (!$progress) {\n return nothing;\n }\n\n const valueDisplay = html`\n <span part=\"value-display\" class=\"rc-progress-value\" aria-hidden=\"true\">\n <slot name=\"value-display\">${this._displayText}</slot>\n </span>\n `;\n\n return html`\n <div\n part=\"root\"\n class=\"rc-progress-root\"\n data-display=${this.display ?? nothing}\n data-orientation=${this.orientation}\n data-disabled=${this.disabled ? '' : nothing}\n data-has-value-text=${this.valueText ? '' : nothing}\n >\n ${this.display === 'inline-start' ? valueDisplay : nothing}\n\n <span part=\"control\" class=\"rc-progress-control\">\n <span part=\"track\" class=\"rc-progress-track\" aria-hidden=\"true\">\n <span\n part=\"fill\"\n class=\"rc-progress-fill\"\n style=${ifDefined(this.indeterminate ? undefined : this._fillStyle())}\n ></span>\n </span>\n\n <slot @slotchange=${this._onDefaultSlotChange}></slot>\n ${this.display === 'overlay' ? valueDisplay : nothing}\n </span>\n\n ${this.display === 'inline-end' ? valueDisplay : nothing}\n </div>\n `;\n }\n\n private get _displayText(): string {\n if (this.valueText) {\n return this.valueText;\n }\n\n if (this.indeterminate) {\n return '';\n }\n\n const ratio = this.max > 0 ? this.value / this.max : 0;\n\n return numberFormat(this._locale.locale, { style: 'percent', maximumFractionDigits: 0 }).format(\n ratio,\n );\n }\n\n private get _nativeProgressValue(): number {\n const value = this._$nativeProgress?.value;\n\n return value === undefined || isNaN(value) ? 0 : value;\n }\n\n private _setupProgress(\n $progress: HTMLProgressElement | null,\n $previous?: HTMLProgressElement | null,\n ): void {\n void $previous;\n\n this._progressObserver?.disconnect();\n this._progressObserver = null;\n\n if (!$progress) {\n this._$nativeProgress = null;\n\n return;\n }\n\n this._$nativeProgress = $progress;\n this._applyInitialValueToNative();\n this._applyIndeterminate();\n\n if (typeof MutationObserver === 'function') {\n this._progressObserver = new MutationObserver(() => {\n if (this.indeterminate) {\n this._applyIndeterminate();\n }\n\n this.requestUpdate();\n this._checkComplete();\n });\n\n this._progressObserver.observe($progress, {\n attributes: true,\n attributeFilter: ['max', 'value'],\n });\n }\n\n this.requestUpdate();\n }\n\n private _onDefaultSlotChange = (): void => {\n this._nativeProgressController.sync();\n this.requestUpdate();\n };\n\n private _applyInitialValueToNative(): void {\n if (this._value !== undefined) {\n this._applyValueToNative(this._value);\n\n return;\n }\n\n if (this._defaultValue !== undefined) {\n this._applyValueToNative(this._defaultValue);\n\n return;\n }\n\n // With no host-owned value, keep reading the live native control rather\n // than copying its initial value into component state. This preserves the\n // native element as the uncontrolled source of truth.\n }\n\n private _applyValueToNative(value: number): void {\n if (!this._$nativeProgress || this.indeterminate) {\n return;\n }\n\n this._$nativeProgress.value = value;\n }\n\n /**\n * Adds or removes the native `<progress>`'s `value` attribute/property to\n * reflect `indeterminate` — the one piece of state this component owns so\n * consumers never bind `undefined` to a live `<progress>.value` themselves.\n */\n private _applyIndeterminate(): void {\n const $progress = this._$nativeProgress;\n\n if (!$progress) {\n return;\n }\n\n if (this.indeterminate) {\n if ($progress.hasAttribute('value')) {\n this._nativeValueBeforeIndeterminate = $progress.value;\n }\n\n $progress.removeAttribute('value');\n } else {\n $progress.value =\n this._value ??\n this._defaultValue ??\n this._nativeValueBeforeIndeterminate ??\n this._nativeProgressValue;\n\n this._nativeValueBeforeIndeterminate = undefined;\n }\n }\n\n private _syncAriaAttributes($progress: HTMLProgressElement): void {\n if (this.valueText) {\n $progress.setAttribute('aria-valuetext', this.valueText);\n } else {\n $progress.removeAttribute('aria-valuetext');\n }\n\n if (this.orientation === 'vertical') {\n $progress.setAttribute('aria-orientation', 'vertical');\n } else {\n $progress.removeAttribute('aria-orientation');\n }\n }\n\n private _checkComplete(): void {\n const isComplete = !this.indeterminate && this.max > 0 && this.value >= this.max;\n\n if (isComplete && !this._completedDispatched) {\n this._completedDispatched = true;\n\n this.dispatchEvent(\n new CustomEvent('rc-progress-complete', { bubbles: true, composed: true }),\n );\n } else if (!isComplete) {\n this._completedDispatched = false;\n }\n }\n\n private _fillStyle(): string {\n const percent = this.max > 0 ? Math.min(100, Math.max(0, (this.value / this.max) * 100)) : 0;\n\n if (this.orientation === 'vertical') {\n return `inset-block-start:${(100 - percent).toFixed(3)}%;block-size:${percent.toFixed(3)}%`;\n }\n\n return `inline-size:${percent.toFixed(3)}%`;\n }\n}\n\nexport default RCProgress;\n"],"names":["displayConverter","v","_RCProgress","LitElement","LocaleController","NativeChildController","$progress","$previous","value","oldValue","changed","nothing","valueDisplay","html","ifDefined","ratio","numberFormat","isComplete","percent","css","RCProgress","__decorateClass","property"],"mappings":"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"}
|
package/dist/rc-progress.js
CHANGED
|
@@ -39,7 +39,8 @@ type DisplayValue = 'inline-start' | 'inline-end' | 'overlay' | null;
|
|
|
39
39
|
* @attr indeterminate - When present, the component removes the native `<progress>`'s
|
|
40
40
|
* `value` attribute instead of asking the consumer to bind `undefined` to it.
|
|
41
41
|
* @attr display - Controls the live value display: absent (none), `overlay` (centered on
|
|
42
|
-
* the bar), `inline-start`, or `inline-end`.
|
|
42
|
+
* the bar), `inline-start`, or `inline-end`. Without `value-text` it shows the rounded
|
|
43
|
+
* percentage, formatted for the element's own `lang`, else `<html lang>`.
|
|
43
44
|
* @attr value-text - Screen-reader value text, forwarded as `aria-valuetext` on the
|
|
44
45
|
* native `<progress>`. Also used as the default formatted display text when set.
|
|
45
46
|
* @attr orientation - Orientation, forwarded to `aria-orientation`: `horizontal` or
|
|
@@ -53,6 +54,8 @@ type DisplayValue = 'inline-start' | 'inline-end' | 'overlay' | null;
|
|
|
53
54
|
* @cssprop [--rc-progress-track-opacity=0.25] - Unfilled track opacity.
|
|
54
55
|
* @cssprop [--rc-progress-track-radius=var(--rc-control-radius)] - Track border radius.
|
|
55
56
|
* @cssprop [--rc-progress-fill-background=var(--rc-accent)] - Filled track color.
|
|
57
|
+
* @cssprop [--rc-progress-fill-transition-duration=150ms] - Determinate fill transition duration.
|
|
58
|
+
* @cssprop [--rc-progress-fill-transition-easing=ease-out] - Determinate fill transition easing.
|
|
56
59
|
* @cssprop [--rc-progress-value-color=var(--rc-text-disabled)] - Value display text color.
|
|
57
60
|
*
|
|
58
61
|
* @csspart root - Root layout wrapper.
|
|
@@ -101,6 +104,8 @@ export declare class RCProgress extends LitElement {
|
|
|
101
104
|
* native `<progress>` and used as the default formatted display text.
|
|
102
105
|
*/
|
|
103
106
|
valueText: string;
|
|
107
|
+
/** Formats the default percentage in the element's own `lang`, else `<html lang>`. */
|
|
108
|
+
private readonly _locale;
|
|
104
109
|
/** Orientation; reflected as an attribute and forwarded to `aria-orientation`. */
|
|
105
110
|
orientation: 'horizontal' | 'vertical';
|
|
106
111
|
private _$nativeProgress;
|
|
@@ -110,7 +115,7 @@ export declare class RCProgress extends LitElement {
|
|
|
110
115
|
private readonly _nativeProgressController;
|
|
111
116
|
disconnectedCallback(): void;
|
|
112
117
|
updated(changed: PropertyValues): void;
|
|
113
|
-
render(): typeof nothing | import('lit').TemplateResult<1>;
|
|
118
|
+
render(): typeof nothing | import('lit-html').TemplateResult<1>;
|
|
114
119
|
private get _displayText();
|
|
115
120
|
private get _nativeProgressValue();
|
|
116
121
|
private _setupProgress;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "0.
|
|
6
|
+
"version": "0.7.0",
|
|
7
7
|
"description": "Native <progress> enhancer with a formatted value display, restyleable track/fill, and a built-in fix for the indeterminate/undefined-binding footgun.",
|
|
8
8
|
"repository": {
|
|
9
9
|
"type": "git",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"vitest-browser-lit": "^1.0.1"
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@rcarls/rc-common": "0.
|
|
60
|
+
"@rcarls/rc-common": "0.7.0"
|
|
61
61
|
},
|
|
62
62
|
"peerDependencies": {
|
|
63
63
|
"lit": "^3.0.0"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"rc-progress-Q8vVdyM1.js","sources":["../src/rc-progress.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport type { ComplexAttributeConverter, PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { NativeChildController, warnMissingDirectChild } from '@rcarls/rc-common';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'rc-progress': RCProgress;\n }\n\n interface HTMLElementEventMap {\n 'rc-progress-complete': CustomEvent<Record<string, never>>;\n }\n}\n\ntype DisplayValue = 'inline-start' | 'inline-end' | 'overlay' | null;\n\n/**\n * Normalises the `display` attribute.\n * A bare boolean attribute (`display` with no value) maps to `'overlay'` so\n * the reflected attribute is always an explicit string, never an empty string.\n */\nconst displayConverter: ComplexAttributeConverter<DisplayValue> = {\n fromAttribute(v: string | null): DisplayValue {\n if (v === null) {\n return null;\n }\n\n if (v === '' || v === 'overlay') {\n return 'overlay';\n }\n\n if (v === 'inline-start') {\n return 'inline-start';\n }\n\n if (v === 'inline-end') {\n return 'inline-end';\n }\n\n return null;\n },\n toAttribute(v: DisplayValue): string | null {\n return v;\n },\n};\n\n/**\n * Enhances a native `<progress>` with a custom track/fill and an optional\n * formatted value display, following the same progressive-enhancement shape\n * as `rc-slider`.\n *\n * Deliberately does one job: it does not render a dialog, own any phase\n * state, or assume anything about where it's placed. Compose it with\n * `rc-dialog`, a card, or an inline status row as needed.\n *\n * Label association:\n * - Explicit `for`/`id`: `<label for=\"sync\">Sync</label><rc-progress><progress id=\"sync\" …></rc-progress>`\n * - Direct `aria-label` on the `<progress>`: `<progress aria-label=\"Sync\" …>`\n *\n * These patterns all work without JavaScript. The component does not render\n * a label itself — the consumer is responsible for accessible naming.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-progress rc-progress docs}\n *\n * @slot - Place a `<progress>` element here.\n * @slot value-display - Optional replacement for the rendered value text.\n *\n * @fires rc-progress-complete - Fires once when `value` reaches `max` while\n * not indeterminate. Does not re-fire on subsequent updates while already\n * at max.\n *\n * @attr value - Current progress value. Host writes are silent.\n * @attr default-value - Initial uncontrolled value. Has no effect after the first\n * host write.\n * @attr indeterminate - When present, the component removes the native `<progress>`'s\n * `value` attribute instead of asking the consumer to bind `undefined` to it.\n * @attr display - Controls the live value display: absent (none), `overlay` (centered on\n * the bar), `inline-start`, or `inline-end`.\n * @attr value-text - Screen-reader value text, forwarded as `aria-valuetext` on the\n * native `<progress>`. Also used as the default formatted display text when set.\n * @attr orientation - Orientation, forwarded to `aria-orientation`: `horizontal` or\n * `vertical`.\n * @attr disabled - Visual-only dimming; native `<progress>` has no functional disabled state.\n *\n * @cssprop [--rc-progress-control-size=0.5rem] - Track hit-area block size.\n * @cssprop [--rc-progress-vertical-size=12.5rem] - Track length when `orientation=\"vertical\"`.\n * @cssprop [--rc-progress-gap=var(--rc-control-gap)] - Gap between track and inline value display.\n * @cssprop [--rc-progress-track-background=CanvasText] - Unfilled track color.\n * @cssprop [--rc-progress-track-opacity=0.25] - Unfilled track opacity.\n * @cssprop [--rc-progress-track-radius=var(--rc-control-radius)] - Track border radius.\n * @cssprop [--rc-progress-fill-background=var(--rc-accent)] - Filled track color.\n * @cssprop [--rc-progress-value-color=var(--rc-text-disabled)] - Value display text color.\n *\n * @csspart root - Root layout wrapper.\n * @csspart control - Track positioning wrapper.\n * @csspart track - Visual track.\n * @csspart fill - Filled progress segment.\n * @csspart value-display - Rendered value text.\n */\nexport class RCProgress extends LitElement {\n static override styles = css`\n :host {\n display: block;\n }\n\n .rc-progress-root {\n display: grid;\n gap: var(--rc-progress-gap, var(--rc-control-gap, 0.5rem));\n align-items: center;\n font-family: var(--rc-font-family, inherit);\n font-size: var(--rc-font-size, inherit);\n line-height: var(--rc-line-height, normal);\n }\n\n .rc-progress-root[data-display='inline-start'] {\n grid-template-columns: auto minmax(0, 1fr);\n }\n\n .rc-progress-root[data-display='inline-end'] {\n grid-template-columns: minmax(0, 1fr) auto;\n }\n\n .rc-progress-control {\n position: relative;\n display: block;\n min-width: 0;\n /*\n * Everything this wraps (the track, the fill, the slotted <progress>)\n * is position: absolute, contributing nothing to normal-flow height.\n * Without an explicit block-size here, this collapses to 0px and the\n * whole bar renders invisible whenever no value-display text (the\n * only other thing that could give the shared grid row a height) is\n * shown alongside it — the default, since display is unset unless a\n * consumer opts into inline-start/inline-end/overlay.\n */\n block-size: var(--rc-progress-control-size, 0.5rem);\n }\n\n .rc-progress-track,\n .rc-progress-fill {\n position: absolute;\n pointer-events: none;\n }\n\n .rc-progress-track {\n inset: 0;\n block-size: var(--rc-progress-control-size, 0.5rem);\n background: var(--rc-progress-track-background, CanvasText);\n opacity: var(--rc-progress-track-opacity, 0.25);\n border-radius: var(--rc-progress-track-radius, var(--rc-control-radius, 0));\n overflow: hidden;\n z-index: 0;\n }\n\n ::slotted(progress) {\n position: absolute;\n inset: 0;\n inline-size: 100%;\n block-size: 100%;\n margin: 0;\n opacity: 0;\n z-index: 2;\n }\n\n .rc-progress-fill {\n inset-block: 0;\n inset-inline-start: 0;\n background: var(--rc-progress-fill-background, var(--rc-accent, Highlight));\n border-radius: inherit;\n z-index: 1;\n transition: inline-size 0.15s ease-out;\n }\n\n :host([indeterminate]) .rc-progress-fill {\n inline-size: 40% !important;\n animation: rc-progress-indeterminate 1.4s ease-in-out infinite;\n }\n\n @keyframes rc-progress-indeterminate {\n 0% {\n inset-inline-start: -40%;\n }\n 100% {\n inset-inline-start: 100%;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n :host([indeterminate]) .rc-progress-fill {\n animation: none;\n inset-inline-start: 0;\n }\n }\n\n .rc-progress-value {\n font-variant-numeric: tabular-nums;\n white-space: nowrap;\n color: var(--rc-progress-value-color, var(--rc-text-disabled, GrayText));\n }\n\n .rc-progress-root[data-display='overlay'] .rc-progress-value {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n z-index: 3;\n }\n\n :host([orientation='vertical']) {\n display: inline-block;\n }\n\n :host([orientation='vertical']) .rc-progress-control {\n inline-size: var(--rc-progress-control-size, 0.5rem);\n block-size: var(--rc-progress-vertical-size, 12.5rem);\n }\n\n :host([orientation='vertical']) .rc-progress-track {\n inline-size: var(--rc-progress-control-size, 0.5rem);\n block-size: auto;\n }\n\n :host([orientation='vertical']) .rc-progress-fill {\n inset-inline: 0;\n inset-block-start: auto;\n }\n\n :host([disabled]) {\n opacity: 0.5;\n }\n `;\n\n private _value: number | undefined;\n private _defaultValue: number | undefined;\n private _valueInitialized = false;\n\n /** Current progress value. */\n @property({ type: Number })\n get value(): number {\n return this._value ?? this._defaultValue ?? this._nativeProgressValue;\n }\n\n set value(value: number | undefined) {\n const oldValue = this.value;\n\n this._value = value ?? undefined;\n this._valueInitialized = true;\n this._applyValueToNative(this.value);\n this.requestUpdate('value', oldValue);\n }\n\n /** Initial uncontrolled value. Has no effect after the first host write. */\n @property({ type: Number, attribute: 'default-value' })\n get defaultValue(): number | undefined {\n return this._defaultValue;\n }\n\n set defaultValue(value: number | undefined) {\n const oldValue = this._defaultValue;\n\n this._defaultValue = value;\n\n if (!this._valueInitialized && this._value === undefined && value !== undefined) {\n this._applyValueToNative(value);\n this.requestUpdate('value', undefined);\n }\n\n this.requestUpdate('defaultValue', oldValue);\n }\n\n /**\n * Maximum progress value, read directly from the native `<progress>`\n * child's own `max` IDL property (native default `1`) rather than\n * duplicated as a separate host attribute — the consumer already owns it\n * by setting `max` on the slotted `<progress>` element.\n */\n get max(): number {\n return this._$nativeProgress?.max ?? 1;\n }\n\n /**\n * When present, the component removes the native `<progress>`'s `value`\n * attribute instead of asking the consumer to bind `undefined` to it —\n * binding `undefined` to a live `<progress>.value` throws.\n */\n @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n /** Visual-only dimming; native `<progress>` has no functional disabled state. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /**\n * Controls the live value display.\n *\n * - Absent (default) — no value shown.\n * - `overlay` (or bare `display`) — centered on the bar.\n * - `display=\"inline-start\"` — rendered before the track, inline in the grid.\n * - `display=\"inline-end\"` — rendered after the track, inline in the grid.\n */\n @property({ reflect: true, converter: displayConverter })\n display: DisplayValue = null;\n\n /**\n * Screen-reader value text. When set, forwarded as `aria-valuetext` on the\n * native `<progress>` and used as the default formatted display text.\n */\n @property({ attribute: 'value-text' }) valueText = '';\n\n /** Orientation; reflected as an attribute and forwarded to `aria-orientation`. */\n @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n private _$nativeProgress: HTMLProgressElement | null = null;\n private _completedDispatched = false;\n private _nativeValueBeforeIndeterminate: number | undefined;\n private _progressObserver: MutationObserver | null = null;\n\n private readonly _nativeProgressController = new NativeChildController<HTMLProgressElement>(\n this,\n {\n selector: ':scope > progress',\n observe: true,\n onChange: ($progress, $previous) => this._setupProgress($progress, $previous),\n onMissing: () => {\n if (import.meta.env.DEV) {\n warnMissingDirectChild(this, {\n selector: ':scope > progress',\n message: '[rc-progress] Requires a child <progress> element.',\n });\n }\n },\n },\n );\n\n override disconnectedCallback(): void {\n this._progressObserver?.disconnect();\n\n super.disconnectedCallback();\n }\n\n override updated(changed: PropertyValues): void {\n const $progress = this._$nativeProgress;\n\n if ($progress) {\n this._syncAriaAttributes($progress);\n }\n\n if (changed.has('indeterminate')) {\n this._applyIndeterminate();\n }\n\n if (changed.has('value') || changed.has('indeterminate')) {\n this._checkComplete();\n }\n }\n\n override render() {\n const $progress = this._$nativeProgress;\n\n if (!$progress) {\n return nothing;\n }\n\n const valueDisplay = html`\n <span part=\"value-display\" class=\"rc-progress-value\" aria-hidden=\"true\">\n <slot name=\"value-display\">${this._displayText}</slot>\n </span>\n `;\n\n return html`\n <div\n part=\"root\"\n class=\"rc-progress-root\"\n data-display=${this.display ?? nothing}\n data-orientation=${this.orientation}\n data-disabled=${this.disabled ? '' : nothing}\n data-has-value-text=${this.valueText ? '' : nothing}\n >\n ${this.display === 'inline-start' ? valueDisplay : nothing}\n\n <span part=\"control\" class=\"rc-progress-control\">\n <span part=\"track\" class=\"rc-progress-track\" aria-hidden=\"true\">\n <span\n part=\"fill\"\n class=\"rc-progress-fill\"\n style=${ifDefined(this.indeterminate ? undefined : this._fillStyle())}\n ></span>\n </span>\n\n <slot @slotchange=${this._onDefaultSlotChange}></slot>\n ${this.display === 'overlay' ? valueDisplay : nothing}\n </span>\n\n ${this.display === 'inline-end' ? valueDisplay : nothing}\n </div>\n `;\n }\n\n private get _displayText(): string {\n if (this.valueText) {\n return this.valueText;\n }\n\n if (this.indeterminate) {\n return '';\n }\n\n const percent = this.max > 0 ? (this.value / this.max) * 100 : 0;\n\n return `${Math.round(percent)}%`;\n }\n\n private get _nativeProgressValue(): number {\n const value = this._$nativeProgress?.value;\n\n return value === undefined || isNaN(value) ? 0 : value;\n }\n\n private _setupProgress(\n $progress: HTMLProgressElement | null,\n $previous?: HTMLProgressElement | null,\n ): void {\n void $previous;\n\n this._progressObserver?.disconnect();\n this._progressObserver = null;\n\n if (!$progress) {\n this._$nativeProgress = null;\n\n return;\n }\n\n this._$nativeProgress = $progress;\n this._applyInitialValueToNative();\n this._applyIndeterminate();\n\n if (typeof MutationObserver === 'function') {\n this._progressObserver = new MutationObserver(() => {\n if (this.indeterminate) {\n this._applyIndeterminate();\n }\n\n this.requestUpdate();\n this._checkComplete();\n });\n\n this._progressObserver.observe($progress, {\n attributes: true,\n attributeFilter: ['max', 'value'],\n });\n }\n\n this.requestUpdate();\n }\n\n private _onDefaultSlotChange = (): void => {\n this._nativeProgressController.sync();\n this.requestUpdate();\n };\n\n private _applyInitialValueToNative(): void {\n if (this._value !== undefined) {\n this._applyValueToNative(this._value);\n\n return;\n }\n\n if (this._defaultValue !== undefined) {\n this._applyValueToNative(this._defaultValue);\n\n return;\n }\n\n // With no host-owned value, keep reading the live native control rather\n // than copying its initial value into component state. This preserves the\n // native element as the uncontrolled source of truth.\n }\n\n private _applyValueToNative(value: number): void {\n if (!this._$nativeProgress || this.indeterminate) {\n return;\n }\n\n this._$nativeProgress.value = value;\n }\n\n /**\n * Adds or removes the native `<progress>`'s `value` attribute/property to\n * reflect `indeterminate` — the one piece of state this component owns so\n * consumers never bind `undefined` to a live `<progress>.value` themselves.\n */\n private _applyIndeterminate(): void {\n const $progress = this._$nativeProgress;\n\n if (!$progress) {\n return;\n }\n\n if (this.indeterminate) {\n if ($progress.hasAttribute('value')) {\n this._nativeValueBeforeIndeterminate = $progress.value;\n }\n\n $progress.removeAttribute('value');\n } else {\n $progress.value =\n this._value ??\n this._defaultValue ??\n this._nativeValueBeforeIndeterminate ??\n this._nativeProgressValue;\n\n this._nativeValueBeforeIndeterminate = undefined;\n }\n }\n\n private _syncAriaAttributes($progress: HTMLProgressElement): void {\n if (this.valueText) {\n $progress.setAttribute('aria-valuetext', this.valueText);\n } else {\n $progress.removeAttribute('aria-valuetext');\n }\n\n if (this.orientation === 'vertical') {\n $progress.setAttribute('aria-orientation', 'vertical');\n } else {\n $progress.removeAttribute('aria-orientation');\n }\n }\n\n private _checkComplete(): void {\n const isComplete = !this.indeterminate && this.max > 0 && this.value >= this.max;\n\n if (isComplete && !this._completedDispatched) {\n this._completedDispatched = true;\n\n this.dispatchEvent(\n new CustomEvent('rc-progress-complete', { bubbles: true, composed: true }),\n );\n } else if (!isComplete) {\n this._completedDispatched = false;\n }\n }\n\n private _fillStyle(): string {\n const percent = this.max > 0 ? Math.min(100, Math.max(0, (this.value / this.max) * 100)) : 0;\n\n if (this.orientation === 'vertical') {\n return `inset-block-start:${(100 - percent).toFixed(3)}%;block-size:${percent.toFixed(3)}%`;\n }\n\n return `inline-size:${percent.toFixed(3)}%`;\n }\n}\n\nexport default RCProgress;\n"],"names":["displayConverter","v","_RCProgress","LitElement","NativeChildController","$progress","$previous","value","oldValue","changed","nothing","valueDisplay","html","ifDefined","percent","isComplete","css","RCProgress","__decorateClass","property"],"mappings":";;;;;;;;;AAwBA,MAAMA,IAA4D;AAAA,EAChE,cAAcC,GAAgC;AAC5C,WAAIA,MAAM,OACD,OAGLA,MAAM,MAAMA,MAAM,YACb,YAGLA,MAAM,iBACD,iBAGLA,MAAM,eACD,eAGF;AAAA,EACT;AAAA,EACA,YAAYA,GAAgC;AAC1C,WAAOA;AAAA,EACT;AACF,GAuDaC,IAAN,MAAMA,UAAmBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAyIL,KAAQ,oBAAoB,IAmDgB,KAAA,gBAAgB,IAGhB,KAAA,WAAW,IAWvD,KAAA,UAAwB,MAMe,KAAA,YAAY,IAGtB,KAAA,cAAyC,cAEtE,KAAQ,mBAA+C,MACvD,KAAQ,uBAAuB,IAE/B,KAAQ,oBAA6C,MAErD,KAAiB,4BAA4B,IAAIC;AAAA,MAC/C;AAAA,MACA;AAAA,QACE,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU,CAACC,GAAWC,MAAc,KAAK,eAAeD,GAAWC,CAAS;AAAA,QAC5E,WAAW,MAAM;AAAA,QAOjB;AAAA,MAAA;AAAA,IACF,GA6HF,KAAQ,uBAAuB,MAAY;AACzC,WAAK,0BAA0B,KAAA,GAC/B,KAAK,cAAA;AAAA,IACP;AAAA,EAAA;AAAA,EA3NA,IAAI,QAAgB;AAClB,WAAO,KAAK,UAAU,KAAK,iBAAiB,KAAK;AAAA,EACnD;AAAA,EAEA,IAAI,MAAMC,GAA2B;AACnC,UAAMC,IAAW,KAAK;AAEtB,SAAK,SAASD,KAAS,QACvB,KAAK,oBAAoB,IACzB,KAAK,oBAAoB,KAAK,KAAK,GACnC,KAAK,cAAc,SAASC,CAAQ;AAAA,EACtC;AAAA,EAIA,IAAI,eAAmC;AACrC,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAI,aAAaD,GAA2B;AAC1C,UAAMC,IAAW,KAAK;AAEtB,SAAK,gBAAgBD,GAEjB,CAAC,KAAK,qBAAqB,KAAK,WAAW,UAAaA,MAAU,WACpE,KAAK,oBAAoBA,CAAK,GAC9B,KAAK,cAAc,SAAS,MAAS,IAGvC,KAAK,cAAc,gBAAgBC,CAAQ;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,IAAI,MAAc;AAChB,WAAO,KAAK,kBAAkB,OAAO;AAAA,EACvC;AAAA,EAsDS,uBAA6B;AACpC,SAAK,mBAAmB,WAAA,GAExB,MAAM,qBAAA;AAAA,EACR;AAAA,EAES,QAAQC,GAA+B;AAC9C,UAAMJ,IAAY,KAAK;AAEvB,IAAIA,KACF,KAAK,oBAAoBA,CAAS,GAGhCI,EAAQ,IAAI,eAAe,KAC7B,KAAK,oBAAA,IAGHA,EAAQ,IAAI,OAAO,KAAKA,EAAQ,IAAI,eAAe,MACrD,KAAK,eAAA;AAAA,EAET;AAAA,EAES,SAAS;AAGhB,QAAI,CAFc,KAAK;AAGrB,aAAOC;AAGT,UAAMC,IAAeC;AAAA;AAAA,qCAEY,KAAK,YAAY;AAAA;AAAA;AAIlD,WAAOA;AAAA;AAAA;AAAA;AAAA,uBAIY,KAAK,WAAWF,CAAO;AAAA,2BACnB,KAAK,WAAW;AAAA,wBACnB,KAAK,WAAW,KAAKA,CAAO;AAAA,8BACtB,KAAK,YAAY,KAAKA,CAAO;AAAA;AAAA,UAEjD,KAAK,YAAY,iBAAiBC,IAAeD,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAO5CG,EAAU,KAAK,gBAAgB,SAAY,KAAK,YAAY,CAAC;AAAA;AAAA;AAAA;AAAA,8BAIrD,KAAK,oBAAoB;AAAA,YAC3C,KAAK,YAAY,YAAYF,IAAeD,CAAO;AAAA;AAAA;AAAA,UAGrD,KAAK,YAAY,eAAeC,IAAeD,CAAO;AAAA;AAAA;AAAA,EAG9D;AAAA,EAEA,IAAY,eAAuB;AACjC,QAAI,KAAK;AACP,aAAO,KAAK;AAGd,QAAI,KAAK;AACP,aAAO;AAGT,UAAMI,IAAU,KAAK,MAAM,IAAK,KAAK,QAAQ,KAAK,MAAO,MAAM;AAE/D,WAAO,GAAG,KAAK,MAAMA,CAAO,CAAC;AAAA,EAC/B;AAAA,EAEA,IAAY,uBAA+B;AACzC,UAAMP,IAAQ,KAAK,kBAAkB;AAErC,WAAOA,MAAU,UAAa,MAAMA,CAAK,IAAI,IAAIA;AAAA,EACnD;AAAA,EAEQ,eACNF,GACAC,GACM;AAMN,QAHA,KAAK,mBAAmB,WAAA,GACxB,KAAK,oBAAoB,MAErB,CAACD,GAAW;AACd,WAAK,mBAAmB;AAExB;AAAA,IACF;AAEA,SAAK,mBAAmBA,GACxB,KAAK,2BAAA,GACL,KAAK,oBAAA,GAED,OAAO,oBAAqB,eAC9B,KAAK,oBAAoB,IAAI,iBAAiB,MAAM;AAClD,MAAI,KAAK,iBACP,KAAK,oBAAA,GAGP,KAAK,cAAA,GACL,KAAK,eAAA;AAAA,IACP,CAAC,GAED,KAAK,kBAAkB,QAAQA,GAAW;AAAA,MACxC,YAAY;AAAA,MACZ,iBAAiB,CAAC,OAAO,OAAO;AAAA,IAAA,CACjC,IAGH,KAAK,cAAA;AAAA,EACP;AAAA,EAOQ,6BAAmC;AACzC,QAAI,KAAK,WAAW,QAAW;AAC7B,WAAK,oBAAoB,KAAK,MAAM;AAEpC;AAAA,IACF;AAEA,QAAI,KAAK,kBAAkB,QAAW;AACpC,WAAK,oBAAoB,KAAK,aAAa;AAE3C;AAAA,IACF;AAAA,EAKF;AAAA,EAEQ,oBAAoBE,GAAqB;AAC/C,IAAI,CAAC,KAAK,oBAAoB,KAAK,kBAInC,KAAK,iBAAiB,QAAQA;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,sBAA4B;AAClC,UAAMF,IAAY,KAAK;AAEvB,IAAKA,MAID,KAAK,iBACHA,EAAU,aAAa,OAAO,MAChC,KAAK,kCAAkCA,EAAU,QAGnDA,EAAU,gBAAgB,OAAO,MAEjCA,EAAU,QACR,KAAK,UACL,KAAK,iBACL,KAAK,mCACL,KAAK,sBAEP,KAAK,kCAAkC;AAAA,EAE3C;AAAA,EAEQ,oBAAoBA,GAAsC;AAChE,IAAI,KAAK,YACPA,EAAU,aAAa,kBAAkB,KAAK,SAAS,IAEvDA,EAAU,gBAAgB,gBAAgB,GAGxC,KAAK,gBAAgB,aACvBA,EAAU,aAAa,oBAAoB,UAAU,IAErDA,EAAU,gBAAgB,kBAAkB;AAAA,EAEhD;AAAA,EAEQ,iBAAuB;AAC7B,UAAMU,IAAa,CAAC,KAAK,iBAAiB,KAAK,MAAM,KAAK,KAAK,SAAS,KAAK;AAE7E,IAAIA,KAAc,CAAC,KAAK,wBACtB,KAAK,uBAAuB,IAE5B,KAAK;AAAA,MACH,IAAI,YAAY,wBAAwB,EAAE,SAAS,IAAM,UAAU,IAAM;AAAA,IAAA,KAEjEA,MACV,KAAK,uBAAuB;AAAA,EAEhC;AAAA,EAEQ,aAAqB;AAC3B,UAAMD,IAAU,KAAK,MAAM,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,KAAK,QAAQ,KAAK,MAAO,GAAG,CAAC,IAAI;AAE3F,WAAI,KAAK,gBAAgB,aAChB,sBAAsB,MAAMA,GAAS,QAAQ,CAAC,CAAC,gBAAgBA,EAAQ,QAAQ,CAAC,CAAC,MAGnF,eAAeA,EAAQ,QAAQ,CAAC,CAAC;AAAA,EAC1C;AACF;AArcEZ,EAAgB,SAASc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAMC,IAANf;AA6IDgB,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5IfF,EA6IP,WAAA,SAAA,CAAA;AAeAC,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GA3J3CF,EA4JP,WAAA,gBAAA,CAAA;AAgCwCC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5L/BF,EA4LiC,WAAA,iBAAA,CAAA;AAGAC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA/L/BF,EA+LiC,WAAA,YAAA,CAAA;AAW5CC,EAAA;AAAA,EADCC,EAAS,EAAE,SAAS,IAAM,WAAWnB,GAAkB;AAAA,GAzM7CiB,EA0MX,WAAA,WAAA,CAAA;AAMuCC,EAAA;AAAA,EAAtCC,EAAS,EAAE,WAAW,aAAA,CAAc;AAAA,GAhN1BF,EAgN4B,WAAA,aAAA,CAAA;AAGVC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAnNhBF,EAmNkB,WAAA,eAAA,CAAA;"}
|