@orange-halo/components 2.1.0 → 3.0.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/custom-elements.json +968 -362
- package/dist/base.d.ts.map +1 -1
- package/dist/base.js +1 -2
- package/dist/base.js.map +1 -1
- package/dist/index.d.ts +4 -8
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -4
- package/dist/index.js.map +1 -1
- package/dist/oh-accordion.d.ts +53 -8
- package/dist/oh-accordion.d.ts.map +1 -1
- package/dist/oh-accordion.js +99 -29
- package/dist/oh-accordion.js.map +1 -1
- package/dist/oh-alert.d.ts +26 -8
- package/dist/oh-alert.d.ts.map +1 -1
- package/dist/oh-alert.js +96 -36
- package/dist/oh-alert.js.map +1 -1
- package/dist/oh-badge.d.ts +32 -13
- package/dist/oh-badge.d.ts.map +1 -1
- package/dist/oh-badge.js +38 -19
- package/dist/oh-badge.js.map +1 -1
- package/dist/oh-breadcrumb.d.ts +39 -12
- package/dist/oh-breadcrumb.d.ts.map +1 -1
- package/dist/oh-breadcrumb.js +66 -25
- package/dist/oh-breadcrumb.js.map +1 -1
- package/dist/oh-button.d.ts +49 -23
- package/dist/oh-button.d.ts.map +1 -1
- package/dist/oh-button.figma.js +1 -3
- package/dist/oh-button.figma.js.map +1 -1
- package/dist/oh-button.js +133 -82
- package/dist/oh-button.js.map +1 -1
- package/dist/oh-card.d.ts +47 -19
- package/dist/oh-card.d.ts.map +1 -1
- package/dist/oh-card.js +143 -96
- package/dist/oh-card.js.map +1 -1
- package/dist/oh-checkbox-group.d.ts +56 -12
- package/dist/oh-checkbox-group.d.ts.map +1 -1
- package/dist/oh-checkbox-group.figma.js +4 -6
- package/dist/oh-checkbox-group.figma.js.map +1 -1
- package/dist/oh-checkbox-group.js +114 -49
- package/dist/oh-checkbox-group.js.map +1 -1
- package/dist/oh-checkbox.d.ts +54 -17
- package/dist/oh-checkbox.d.ts.map +1 -1
- package/dist/oh-checkbox.js +117 -60
- package/dist/oh-checkbox.js.map +1 -1
- package/dist/oh-cluster.d.ts +19 -14
- package/dist/oh-cluster.d.ts.map +1 -1
- package/dist/oh-cluster.js +19 -19
- package/dist/oh-cluster.js.map +1 -1
- package/dist/oh-container.d.ts +19 -16
- package/dist/oh-container.d.ts.map +1 -1
- package/dist/oh-container.js +21 -23
- package/dist/oh-container.js.map +1 -1
- package/dist/oh-drawer.d.ts +28 -11
- package/dist/oh-drawer.d.ts.map +1 -1
- package/dist/oh-drawer.js +52 -24
- package/dist/oh-drawer.js.map +1 -1
- package/dist/oh-footer.d.ts +37 -18
- package/dist/oh-footer.d.ts.map +1 -1
- package/dist/oh-footer.js +38 -19
- package/dist/oh-footer.js.map +1 -1
- package/dist/oh-grid.d.ts +27 -14
- package/dist/oh-grid.d.ts.map +1 -1
- package/dist/oh-grid.js +28 -21
- package/dist/oh-grid.js.map +1 -1
- package/dist/oh-icon.d.ts +21 -5
- package/dist/oh-icon.d.ts.map +1 -1
- package/dist/oh-icon.js +27 -9
- package/dist/oh-icon.js.map +1 -1
- package/dist/oh-input.d.ts +110 -21
- package/dist/oh-input.d.ts.map +1 -1
- package/dist/oh-input.figma.js +2 -2
- package/dist/oh-input.figma.js.map +1 -1
- package/dist/oh-input.js +227 -71
- package/dist/oh-input.js.map +1 -1
- package/dist/oh-link.d.ts +42 -19
- package/dist/oh-link.d.ts.map +1 -1
- package/dist/oh-link.js +83 -38
- package/dist/oh-link.js.map +1 -1
- package/dist/oh-modal.d.ts +35 -6
- package/dist/oh-modal.d.ts.map +1 -1
- package/dist/oh-modal.js +90 -39
- package/dist/oh-modal.js.map +1 -1
- package/dist/oh-navbar.d.ts +42 -19
- package/dist/oh-navbar.d.ts.map +1 -1
- package/dist/oh-navbar.js +44 -20
- package/dist/oh-navbar.js.map +1 -1
- package/dist/oh-progress.d.ts +26 -7
- package/dist/oh-progress.d.ts.map +1 -1
- package/dist/oh-progress.js +35 -14
- package/dist/oh-progress.js.map +1 -1
- package/dist/oh-radio-group.d.ts +55 -13
- package/dist/oh-radio-group.d.ts.map +1 -1
- package/dist/oh-radio-group.figma.js +2 -2
- package/dist/oh-radio-group.figma.js.map +1 -1
- package/dist/oh-radio-group.js +122 -51
- package/dist/oh-radio-group.js.map +1 -1
- package/dist/oh-radio.d.ts +55 -17
- package/dist/oh-radio.d.ts.map +1 -1
- package/dist/oh-radio.js +120 -61
- package/dist/oh-radio.js.map +1 -1
- package/dist/oh-select.d.ts +59 -16
- package/dist/oh-select.d.ts.map +1 -1
- package/dist/oh-select.js +141 -69
- package/dist/oh-select.js.map +1 -1
- package/dist/oh-skip-link.d.ts +33 -15
- package/dist/oh-skip-link.d.ts.map +1 -1
- package/dist/oh-skip-link.js +43 -32
- package/dist/oh-skip-link.js.map +1 -1
- package/dist/oh-stack.d.ts +17 -14
- package/dist/oh-stack.d.ts.map +1 -1
- package/dist/oh-stack.js +18 -20
- package/dist/oh-stack.js.map +1 -1
- package/dist/oh-tabs.d.ts +55 -30
- package/dist/oh-tabs.d.ts.map +1 -1
- package/dist/oh-tabs.js +100 -76
- package/dist/oh-tabs.js.map +1 -1
- package/dist/oh-textarea.d.ts +129 -0
- package/dist/oh-textarea.d.ts.map +1 -0
- package/dist/oh-textarea.js +401 -0
- package/dist/oh-textarea.js.map +1 -0
- package/dist/oh-toggle.d.ts +45 -12
- package/dist/oh-toggle.d.ts.map +1 -1
- package/dist/oh-toggle.js +84 -34
- package/dist/oh-toggle.js.map +1 -1
- package/dist/styles/typography.js +1 -1
- package/package.json +7 -7
- package/dist/oh-hero.d.ts +0 -33
- package/dist/oh-hero.d.ts.map +0 -1
- package/dist/oh-hero.js +0 -246
- package/dist/oh-hero.js.map +0 -1
package/dist/oh-icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-icon.js","sourceRoot":"","sources":["../src/oh-icon.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-icon.js","sourceRoot":"","sources":["../src/oh-icon.ts"],"names":[],"mappings":"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"}
|
package/dist/oh-input.d.ts
CHANGED
|
@@ -1,59 +1,148 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* oh-input
|
|
3
3
|
*
|
|
4
|
-
* A chunky, inset input field that feels pressed into the page.
|
|
5
|
-
* On focus, it rises to meet you.
|
|
6
|
-
*
|
|
7
4
|
* DESIGN DECISIONS:
|
|
8
5
|
* ─────────────────
|
|
9
|
-
* 1.
|
|
10
|
-
* -
|
|
11
|
-
* -
|
|
12
|
-
* -
|
|
6
|
+
* 1. LOOK FROM TOKENS
|
|
7
|
+
* - Border: input.base.borderWidth (stroke.control) in color.border.emphasis
|
|
8
|
+
* - Corners: shape.control (same as oh-button)
|
|
9
|
+
* - Shadow: an inset shadow offset by elevation.offset.md in elevation.color.field
|
|
13
10
|
*
|
|
14
|
-
* 2.
|
|
15
|
-
* -
|
|
16
|
-
*
|
|
17
|
-
* -
|
|
11
|
+
* 2. FOCUS IS A SOLID RING
|
|
12
|
+
* - An inset ring in focus.ringColor inside the border, so focus doesn't
|
|
13
|
+
* shift the layout
|
|
14
|
+
* - Background switches to color.surface.highlight
|
|
18
15
|
*
|
|
19
|
-
* 3.
|
|
20
|
-
* -
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
16
|
+
* 3. A REAL FORM CONTROL
|
|
17
|
+
* - Form-associated, like oh-textarea: its value submits with the form
|
|
18
|
+
* under its name and shows in form.elements, `required` blocks
|
|
19
|
+
* submission, a form reset restores the starting value, and a
|
|
20
|
+
* disabled <fieldset> disables it
|
|
24
21
|
*
|
|
25
|
-
*
|
|
22
|
+
* 4. SUGGESTIONS ARE NATIVE
|
|
23
|
+
* - `suggestions` renders a <datalist> inside the component (a list
|
|
24
|
+
* outside it can't reach an input in the shadow root). The browser
|
|
25
|
+
* draws the list and handles the keyboard and screen readers, so
|
|
26
|
+
* people can still type anything: it suggests, it doesn't restrict
|
|
27
|
+
*
|
|
28
|
+
* 5. ERRORS BEFORE THE FIELD
|
|
29
|
+
* - Error text sits after the label and before the field, with an icon,
|
|
30
|
+
* so it's read before the field is reached. Helper text sits after
|
|
26
31
|
*/
|
|
27
32
|
import { type PropertyValues } from "lit";
|
|
28
33
|
import { OhElement } from "./base.js";
|
|
29
34
|
export type InputType = "text" | "email" | "password" | "search" | "tel" | "url";
|
|
30
35
|
export type InputState = "default" | "hover" | "focus";
|
|
36
|
+
/**
|
|
37
|
+
* A single-line text field that submits with a native form, with optional
|
|
38
|
+
* typing suggestions.
|
|
39
|
+
*
|
|
40
|
+
* **Use it for** short free text: names, email addresses, search terms.
|
|
41
|
+
* **Don't use it for** several lines (use `oh-textarea`) or a choice from a
|
|
42
|
+
* fixed list (use `oh-select`, or `oh-radio-group` for a few options).
|
|
43
|
+
* `suggestions` offers values while still allowing any text.
|
|
44
|
+
*
|
|
45
|
+
* **Types:** `text` (default), `email`, `password`, `search`, `tel`, `url`.
|
|
46
|
+
* One size. **States:** rest, hover, focus, error (set `error-text`),
|
|
47
|
+
* disabled, required.
|
|
48
|
+
*
|
|
49
|
+
* **Behaviour:** form-associated: the value submits under `name`, `required`
|
|
50
|
+
* blocks submission (validity comes from the inner `<input>`), a form reset
|
|
51
|
+
* restores the starting value, and a disabled `<fieldset>` disables it.
|
|
52
|
+
* Fires `oh-input` as the text changes and `oh-change` when it's committed.
|
|
53
|
+
* `suggestions` renders a native `<datalist>`, so the browser handles its
|
|
54
|
+
* keyboard and screen reader support. `autocomplete` is passed to the inner
|
|
55
|
+
* `<input>`.
|
|
56
|
+
*
|
|
57
|
+
* **Accessibility:** always set `label`: it's the field's name. The error
|
|
58
|
+
* shows after the label and before the field, with an icon, and is linked
|
|
59
|
+
* with `aria-describedby` and `aria-invalid`; it's announced (`role="alert"`)
|
|
60
|
+
* only when it appears after first render. Helper text is linked the same
|
|
61
|
+
* way (it's hidden while an error shows). Focus is a solid inset ring.
|
|
62
|
+
* Set `autocomplete` for personal data (WCAG 1.3.5).
|
|
63
|
+
*
|
|
64
|
+
* **Look:** set by tokens — `input.base.borderWidth` (`stroke.control`) in
|
|
65
|
+
* `color.border.emphasis` (border), `shape.control` (corners),
|
|
66
|
+
* `typography.control.*` (type), `input.size.md.minHeight` (height),
|
|
67
|
+
* `elevation.offset.md` and `elevation.color.field` (inset shadow),
|
|
68
|
+
* `color.border.hover` (hover), `focus.ringColor` and
|
|
69
|
+
* `color.surface.highlight` (focus), `color.feedback.error`,
|
|
70
|
+
* `color.feedback.errorSubtle` and `elevation.color.error` (error),
|
|
71
|
+
* `color.surface.disabled`, `color.border.disabled` and
|
|
72
|
+
* `color.text.disabled` (disabled).
|
|
73
|
+
*
|
|
74
|
+
* @element oh-input
|
|
75
|
+
* @fires oh-input - Whenever the text changes: typing, or picking a suggestion. detail: { value, originalEvent }
|
|
76
|
+
* @fires oh-change - When the value is committed (on blur or Enter). detail: { value, originalEvent }
|
|
77
|
+
* @csspart label - The visible label
|
|
78
|
+
* @csspart input - The text field
|
|
79
|
+
* @csspart helper - The helper text, and the error message (which also has the error part)
|
|
80
|
+
* @csspart error - The error message
|
|
81
|
+
*/
|
|
31
82
|
export declare class OhInput extends OhElement {
|
|
83
|
+
static formAssociated: boolean;
|
|
32
84
|
static styles: import("lit").CSSResult[];
|
|
85
|
+
/** The kind of text: text, email, password, search, tel or url */
|
|
33
86
|
type: InputType;
|
|
87
|
+
/** The text in the field */
|
|
34
88
|
value: string;
|
|
89
|
+
/** Example text shown while the field is empty. Not a replacement for the label */
|
|
35
90
|
placeholder: string;
|
|
91
|
+
/** The visible label. Always set one: it names the field */
|
|
36
92
|
label: string;
|
|
93
|
+
/** Help shown under the field and linked to it */
|
|
37
94
|
helperText: string;
|
|
95
|
+
/** Error shown before the field and linked to it. Setting it puts the field in its error state */
|
|
38
96
|
errorText: string;
|
|
97
|
+
/** The name the value is submitted under */
|
|
98
|
+
name: string;
|
|
99
|
+
/** Must be filled in before the form submits */
|
|
39
100
|
required: boolean;
|
|
101
|
+
/** Not editable, and left out of the form's data */
|
|
102
|
+
disabled: boolean;
|
|
103
|
+
/**
|
|
104
|
+
* Values offered while typing, shown by the browser as a list under the
|
|
105
|
+
* field. They suggest, they don't restrict: any text is still allowed.
|
|
106
|
+
* Set it as a property (an array of strings) or, in HTML, as a JSON array:
|
|
107
|
+
* suggestions='["Option one","Option two"]'. Browsers also offer the
|
|
108
|
+
* field's autofill history, so set autocomplete="off" to show only these.
|
|
109
|
+
*/
|
|
110
|
+
suggestions: string[];
|
|
111
|
+
/**
|
|
112
|
+
* The input's purpose, for autofill and assistive tech (WCAG 1.3.5):
|
|
113
|
+
* an HTML autocomplete token such as "email", "name" or "tel".
|
|
114
|
+
* Passed to the inner <input>.
|
|
115
|
+
*/
|
|
116
|
+
autocomplete?: string;
|
|
40
117
|
/**
|
|
41
118
|
* Force a visual state (for documentation/Figma sync only)
|
|
42
119
|
* Values: 'hover' | 'focus'
|
|
43
120
|
*/
|
|
44
121
|
forceState: InputState;
|
|
45
122
|
private _input;
|
|
46
|
-
private
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
123
|
+
private _internals;
|
|
124
|
+
/** The starting value, restored when the form resets */
|
|
125
|
+
private _defaultValue;
|
|
126
|
+
/** Set when a disabled <fieldset> around it disables it */
|
|
127
|
+
private _formDisabled;
|
|
50
128
|
/**
|
|
51
129
|
* Errors that appear after first render (e.g. on submit) are announced via
|
|
52
130
|
* role="alert". Errors present on page load are only linked with
|
|
53
131
|
* aria-describedby, so they aren't read out unprompted.
|
|
54
132
|
*/
|
|
55
133
|
private _announceError;
|
|
134
|
+
connectedCallback(): void;
|
|
135
|
+
/** The form this field belongs to */
|
|
136
|
+
get form(): HTMLFormElement | null;
|
|
137
|
+
focus(options?: FocusOptions): void;
|
|
138
|
+
blur(): void;
|
|
139
|
+
formResetCallback(): void;
|
|
140
|
+
formDisabledCallback(disabled: boolean): void;
|
|
141
|
+
formStateRestoreCallback(state: string | File | FormData | null): void;
|
|
56
142
|
willUpdate(changed: PropertyValues): void;
|
|
143
|
+
updated(changed: PropertyValues): void;
|
|
144
|
+
private _handleInput;
|
|
145
|
+
private _handleChange;
|
|
57
146
|
render(): import("lit").TemplateResult<1>;
|
|
58
147
|
}
|
|
59
148
|
declare global {
|
package/dist/oh-input.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-input.d.ts","sourceRoot":"","sources":["../src/oh-input.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"oh-input.d.ts","sourceRoot":"","sources":["../src/oh-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAElD,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,OAAO,GACP,UAAU,GACV,QAAQ,GACR,KAAK,GACL,KAAK,CAAC;AACV,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBACa,OAAQ,SAAQ,SAAS;IACpC,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAgB,MAAM,4BAiLpB;IAEF,kEAAkE;IAElE,IAAI,EAAE,SAAS,CAAU;IAEzB,4BAA4B;IAE5B,KAAK,SAAM;IAEX,mFAAmF;IAEnF,WAAW,SAAM;IAEjB,4DAA4D;IAE5D,KAAK,SAAM;IAEX,kDAAkD;IAElD,UAAU,SAAM;IAEhB,kGAAkG;IAElG,SAAS,SAAM;IAEf,4CAA4C;IAE5C,IAAI,SAAM;IAEV,gDAAgD;IAEhD,QAAQ,UAAS;IAEjB,oDAAoD;IAEpD,QAAQ,UAAS;IAEjB;;;;;;OAMG;IAEH,WAAW,EAAE,MAAM,EAAE,CAAM;IAE3B;;;;OAIG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IAEH,UAAU,EAAE,UAAU,CAAa;IAGnC,OAAO,CAAC,MAAM,CAAoB;IAElC,OAAO,CAAC,UAAU,CAA0B;IAE5C,wDAAwD;IACxD,OAAO,CAAC,aAAa,CAAM;IAE3B,2DAA2D;IAE3D,OAAO,CAAC,aAAa,CAAS;IAE9B;;;;OAIG;IAEH,OAAO,CAAC,cAAc,CAAS;IAE/B,iBAAiB;IAKjB,qCAAqC;IACrC,IAAI,IAAI,2BAEP;IAED,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,IAAI;IAIJ,iBAAiB;IAIjB,oBAAoB,CAAC,QAAQ,EAAE,OAAO;IAItC,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI;IAI/D,UAAU,CAAC,OAAO,EAAE,cAAc;IAMlC,OAAO,CAAC,OAAO,EAAE,cAAc;IAe/B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAIrB,MAAM;CAkFP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
|
package/dist/oh-input.figma.js
CHANGED
|
@@ -28,8 +28,8 @@ figma.connect("https://www.figma.com/design/q9ZYrOj2w9DrTVmgQFU7bu/OHDS?node-id=
|
|
|
28
28
|
value="${props.value}"
|
|
29
29
|
placeholder="${props.showPlaceholder ? props.placeholder : ""}"
|
|
30
30
|
?required="${props.required}"
|
|
31
|
-
|
|
32
|
-
|
|
31
|
+
helper-text="${props.helperText}"
|
|
32
|
+
error-text="${props.errorText}"
|
|
33
33
|
></oh-input>
|
|
34
34
|
`,
|
|
35
35
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"oh-input.figma.js","sourceRoot":"","sources":["../src/oh-input.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;;;;;;;;;;;GAYG;AAEH,KAAK,CAAC,OAAO,CACX,uEAAuE,EACvE;IACE,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC;QAClD,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;QACxC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;QACnC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;QACvC,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC;KACtC;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;iBAEX,KAAK,CAAC,KAAK;iBACX,KAAK,CAAC,KAAK;uBACL,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;qBAChD,KAAK,CAAC,QAAQ;
|
|
1
|
+
{"version":3,"file":"oh-input.figma.js","sourceRoot":"","sources":["../src/oh-input.figma.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;;;;;;;;;;;GAYG;AAEH,KAAK,CAAC,OAAO,CACX,uEAAuE,EACvE;IACE,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,kBAAkB,CAAC;QAClD,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;QACxC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC;QACnC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;QACvC,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC;KACtC;IACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;iBAEX,KAAK,CAAC,KAAK;iBACX,KAAK,CAAC,KAAK;uBACL,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;qBAChD,KAAK,CAAC,QAAQ;uBACZ,KAAK,CAAC,UAAU;sBACjB,KAAK,CAAC,SAAS;;KAEhC;CACF,CACF,CAAC"}
|