@design.estate/dees-catalog 3.72.1 → 3.73.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist_bundle/bundle.js +7001 -6950
- package/dist_ts_web/00_commitinfo_data.js +1 -1
- package/dist_ts_web/elements/00group-input/dees-input-text/dees-input-text.js +8 -8
- package/dist_ts_web/elements/00group-layout/dees-label/dees-label.demo.js +128 -7
- package/dist_ts_web/elements/00group-layout/dees-label/dees-label.js +25 -9
- package/dist_watch/bundle.js +7018 -6963
- package/dist_watch/bundle.js.map +4 -4
- package/package.json +5 -5
- package/ts_web/00_commitinfo_data.ts +1 -1
- package/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts +7 -7
- package/ts_web/elements/00group-layout/dees-label/dees-label.demo.ts +127 -6
- package/ts_web/elements/00group-layout/dees-label/dees-label.ts +24 -8
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export const commitinfo = {
|
|
5
5
|
name: '@design.estate/dees-catalog',
|
|
6
|
-
version: '3.
|
|
6
|
+
version: '3.73.2',
|
|
7
7
|
description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
|
|
8
8
|
};
|
|
9
9
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsNkJBQTZCO0lBQ25DLE9BQU8sRUFBRSxRQUFRO0lBQ2pCLFdBQVcsRUFBRSxzSkFBc0o7Q0FDcEssQ0FBQSJ9
|
|
@@ -82,7 +82,7 @@ let DeesInputText = (() => {
|
|
|
82
82
|
reflect: true,
|
|
83
83
|
})];
|
|
84
84
|
_validationState_decorators = [property({
|
|
85
|
-
type:
|
|
85
|
+
type: String,
|
|
86
86
|
reflect: true,
|
|
87
87
|
})];
|
|
88
88
|
_validationText_decorators = [property({
|
|
@@ -237,31 +237,31 @@ let DeesInputText = (() => {
|
|
|
237
237
|
}
|
|
238
238
|
|
|
239
239
|
/* Error state for input */
|
|
240
|
-
:host([
|
|
240
|
+
:host([validationstate="invalid"]) input {
|
|
241
241
|
border-color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
|
|
242
242
|
}
|
|
243
243
|
|
|
244
|
-
:host([
|
|
244
|
+
:host([validationstate="invalid"]) input:focus {
|
|
245
245
|
border-color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
|
|
246
246
|
box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 84.2% 60.2% / 0.05)', 'hsl(0 72.2% 50.6% / 0.05)')};
|
|
247
247
|
}
|
|
248
248
|
|
|
249
249
|
/* Warning state for input */
|
|
250
|
-
:host([
|
|
250
|
+
:host([validationstate="warn"]) input {
|
|
251
251
|
border-color: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
|
|
252
252
|
}
|
|
253
253
|
|
|
254
|
-
:host([
|
|
254
|
+
:host([validationstate="warn"]) input:focus {
|
|
255
255
|
border-color: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
|
|
256
256
|
box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(25 95% 53% / 0.05)', 'hsl(25 95% 63% / 0.05)')};
|
|
257
257
|
}
|
|
258
258
|
|
|
259
259
|
/* Valid state for input */
|
|
260
|
-
:host([
|
|
260
|
+
:host([validationstate="valid"]) input {
|
|
261
261
|
border-color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
|
|
262
262
|
}
|
|
263
263
|
|
|
264
|
-
:host([
|
|
264
|
+
:host([validationstate="valid"]) input:focus {
|
|
265
265
|
border-color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
|
|
266
266
|
box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.05)', 'hsl(142.1 70.6% 45.3% / 0.05)')};
|
|
267
267
|
}
|
|
@@ -386,4 +386,4 @@ let DeesInputText = (() => {
|
|
|
386
386
|
return DeesInputText = _classThis;
|
|
387
387
|
})();
|
|
388
388
|
export { DeesInputText };
|
|
389
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
389
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC10ZXh0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtaW5wdXQvZGVlcy1pbnB1dC10ZXh0L2RlZXMtaW5wdXQtdGV4dC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sTUFBTSxtQkFBbUIsQ0FBQztBQUM1QyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFDdEUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ3JELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBRXpFLE9BQU8sRUFDTCxhQUFhLEVBRWIsUUFBUSxFQUNSLElBQUksRUFDSixVQUFVLEVBQ1YsR0FBRyxHQUNKLE1BQU0sNkJBQTZCLENBQUM7QUFDckMsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sa0JBQWtCLENBQUM7SUFTekMsYUFBYTs0QkFEekIsYUFBYSxDQUFDLGlCQUFpQixDQUFDOzs7O3NCQUNFLGFBQWE7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7NkJBQXJCLFNBQVEsV0FBYTs7OztpQ0FLN0MsUUFBUSxDQUFDO29CQUNSLElBQUksRUFBRSxNQUFNO29CQUNaLE9BQU8sRUFBRSxJQUFJO2lCQUNkLENBQUM7MENBR0QsUUFBUSxDQUFDO29CQUNSLElBQUksRUFBRSxPQUFPO29CQUNiLE9BQU8sRUFBRSxJQUFJO2lCQUNkLENBQUM7NENBR0QsUUFBUSxDQUFDO29CQUNSLElBQUksRUFBRSxPQUFPO29CQUNiLE9BQU8sRUFBRSxJQUFJO2lCQUNkLENBQUM7MkNBR0QsUUFBUSxDQUFDO29CQUNSLElBQUksRUFBRSxNQUFNO29CQUNaLE9BQU8sRUFBRSxJQUFJO2lCQUNkLENBQUM7MENBR0QsUUFBUSxDQUFD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
|
|
@@ -1,7 +1,128 @@
|
|
|
1
|
-
import { html, cssManager } from '@design.estate/dees-element';
|
|
2
|
-
export const demoFunc = () =>
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import { html, css, cssManager } from '@design.estate/dees-element';
|
|
2
|
+
export const demoFunc = () => html `
|
|
3
|
+
<style>
|
|
4
|
+
${css `
|
|
5
|
+
.demo-container {
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
gap: 24px;
|
|
9
|
+
padding: 24px;
|
|
10
|
+
max-width: 800px;
|
|
11
|
+
margin: 0 auto;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.demo-section {
|
|
15
|
+
background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')};
|
|
16
|
+
border-radius: 8px;
|
|
17
|
+
padding: 24px;
|
|
18
|
+
border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.demo-section h3 {
|
|
22
|
+
margin-top: 0;
|
|
23
|
+
margin-bottom: 16px;
|
|
24
|
+
color: ${cssManager.bdTheme('#333', '#fff')};
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.demo-section p {
|
|
28
|
+
color: ${cssManager.bdTheme('#666', '#999')};
|
|
29
|
+
margin-bottom: 16px;
|
|
30
|
+
font-size: 13px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.label-grid {
|
|
34
|
+
display: flex;
|
|
35
|
+
flex-direction: column;
|
|
36
|
+
gap: 24px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.label-row {
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: baseline;
|
|
42
|
+
gap: 16px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.label-row .annotation {
|
|
46
|
+
font-size: 12px;
|
|
47
|
+
font-family: monospace;
|
|
48
|
+
color: ${cssManager.bdTheme('#888', '#666')};
|
|
49
|
+
flex-shrink: 0;
|
|
50
|
+
min-width: 200px;
|
|
51
|
+
}
|
|
52
|
+
`}
|
|
53
|
+
</style>
|
|
54
|
+
|
|
55
|
+
<div class="demo-container">
|
|
56
|
+
<div class="demo-section">
|
|
57
|
+
<h3>Basic Label</h3>
|
|
58
|
+
<p>A simple text label with no additional indicators.</p>
|
|
59
|
+
<div class="label-grid">
|
|
60
|
+
<div class="label-row">
|
|
61
|
+
<span class="annotation">label="Username"</span>
|
|
62
|
+
<dees-label .label=${'Username'}></dees-label>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="label-row">
|
|
65
|
+
<span class="annotation">label="Email Address"</span>
|
|
66
|
+
<dees-label .label=${'Email Address'}></dees-label>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<div class="demo-section">
|
|
72
|
+
<h3>Required Indicator</h3>
|
|
73
|
+
<p>When <code>required</code> is set, a red asterisk appears after the label text.</p>
|
|
74
|
+
<div class="label-grid">
|
|
75
|
+
<div class="label-row">
|
|
76
|
+
<span class="annotation">required=${'{true}'}</span>
|
|
77
|
+
<dees-label .label=${'Full Name'} .required=${true}></dees-label>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="label-row">
|
|
80
|
+
<span class="annotation">required=${'{false}'} (default)</span>
|
|
81
|
+
<dees-label .label=${'Nickname'} .required=${false}></dees-label>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<div class="demo-section">
|
|
87
|
+
<h3>Description (Info Icon)</h3>
|
|
88
|
+
<p>When <code>description</code> is set, an info icon appears next to the label. Hover over it to see the tooltip.</p>
|
|
89
|
+
<div class="label-grid">
|
|
90
|
+
<div class="label-row">
|
|
91
|
+
<span class="annotation">description="..."</span>
|
|
92
|
+
<dees-label .label=${'API Key'} .description=${'Your API key can be found in the developer settings dashboard.'}></dees-label>
|
|
93
|
+
</div>
|
|
94
|
+
<div class="label-row">
|
|
95
|
+
<span class="annotation">short description</span>
|
|
96
|
+
<dees-label .label=${'Region'} .description=${'Select your nearest datacenter.'}></dees-label>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<div class="demo-section">
|
|
102
|
+
<h3>Required + Description</h3>
|
|
103
|
+
<p>Both indicators can be combined. The asterisk appears first, then the info icon.</p>
|
|
104
|
+
<div class="label-grid">
|
|
105
|
+
<div class="label-row">
|
|
106
|
+
<span class="annotation">required + description</span>
|
|
107
|
+
<dees-label .label=${'Password'} .required=${true} .description=${'Must be at least 8 characters with one uppercase letter and one number.'}></dees-label>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="label-row">
|
|
110
|
+
<span class="annotation">required + description</span>
|
|
111
|
+
<dees-label .label=${'Email Address'} .required=${true} .description=${'We will send a verification link to this address.'}></dees-label>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<div class="demo-section">
|
|
117
|
+
<h3>Empty Label</h3>
|
|
118
|
+
<p>When <code>label</code> is empty or not set, nothing is rendered. The element below has no label text:</p>
|
|
119
|
+
<div class="label-grid">
|
|
120
|
+
<div class="label-row">
|
|
121
|
+
<span class="annotation">label="" (empty)</span>
|
|
122
|
+
<dees-label .label=${''}></dees-label>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
`;
|
|
128
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1sYWJlbC5kZW1vLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vdHNfd2ViL2VsZW1lbnRzLzAwZ3JvdXAtbGF5b3V0L2RlZXMtbGFiZWwvZGVlcy1sYWJlbC5kZW1vLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRXBFLE1BQU0sQ0FBQyxNQUFNLFFBQVEsR0FBRyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUE7O01BRTVCLEdBQUcsQ0FBQTs7Ozs7Ozs7Ozs7c0JBV2EsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsU0FBUyxDQUFDOzs7NEJBR2xDLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLE1BQU0sQ0FBQzs7Ozs7O2lCQU1oRCxVQUFVLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRSxNQUFNLENBQUM7Ozs7aUJBSWxDLFVBQVUsQ0FBQyxPQUFPLENBQUMsTUFBTSxFQUFFLE1BQU0sQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7aUJBb0JsQyxVQUFVLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRSxNQUFNLENBQUM7Ozs7S0FJOUM7Ozs7Ozs7Ozs7K0JBVTBCLFVBQVU7Ozs7K0JBSVYsZUFBZTs7Ozs7Ozs7Ozs4Q0FVQSxRQUFROytCQUN2QixXQUFXLGNBQWMsSUFBSTs7OzhDQUdkLFNBQVM7K0JBQ3hCLFVBQVUsY0FBYyxLQUFLOzs7Ozs7Ozs7OzsrQkFXN0IsU0FBUyxpQkFBaUIsZ0VBQWdFOzs7OytCQUkxRixRQUFRLGlCQUFpQixpQ0FBaUM7Ozs7Ozs7Ozs7OytCQVcxRCxVQUFVLGNBQWMsSUFBSSxpQkFBaUIseUVBQXlFOzs7OytCQUl0SCxlQUFlLGNBQWMsSUFBSSxpQkFBaUIsbURBQW1EOzs7Ozs7Ozs7OzsrQkFXckcsRUFBRTs7Ozs7Q0FLaEMsQ0FBQyJ9
|
|
@@ -97,7 +97,8 @@ let DeesLabel = (() => {
|
|
|
97
97
|
}
|
|
98
98
|
|
|
99
99
|
.label {
|
|
100
|
-
display: inline-
|
|
100
|
+
display: inline-flex;
|
|
101
|
+
align-items: center;
|
|
101
102
|
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
|
|
102
103
|
font-size: 14px;
|
|
103
104
|
font-weight: 500;
|
|
@@ -113,13 +114,26 @@ let DeesLabel = (() => {
|
|
|
113
114
|
margin-left: 2px;
|
|
114
115
|
}
|
|
115
116
|
|
|
116
|
-
|
|
117
|
-
display: inline-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
117
|
+
.description-icon {
|
|
118
|
+
display: inline-flex;
|
|
119
|
+
align-items: center;
|
|
120
|
+
justify-content: center;
|
|
121
|
+
width: 24px;
|
|
122
|
+
height: 24px;
|
|
123
|
+
margin: -6px 0 -6px 2px;
|
|
124
|
+
border-radius: 4px;
|
|
125
|
+
cursor: default;
|
|
126
|
+
transition: background 0.15s ease, color 0.15s ease;
|
|
121
127
|
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
|
122
|
-
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.description-icon:hover {
|
|
131
|
+
background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 100% / 0.08)')};
|
|
132
|
+
color: ${cssManager.bdTheme('hsl(0 0% 25%)', 'hsl(0 0% 80%)')};
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.description-icon dees-icon {
|
|
136
|
+
font-size: 14px;
|
|
123
137
|
}
|
|
124
138
|
`,
|
|
125
139
|
];
|
|
@@ -132,7 +146,9 @@ let DeesLabel = (() => {
|
|
|
132
146
|
${this.required ? html `<span class="required">*</span>` : ''}
|
|
133
147
|
${this.description
|
|
134
148
|
? html `
|
|
135
|
-
<
|
|
149
|
+
<div class="description-icon">
|
|
150
|
+
<dees-icon .icon=${'lucide:info'}></dees-icon>
|
|
151
|
+
</div>
|
|
136
152
|
<dees-speechbubble .text=${this.description}></dees-speechbubble>
|
|
137
153
|
`
|
|
138
154
|
: html ``}
|
|
@@ -152,4 +168,4 @@ let DeesLabel = (() => {
|
|
|
152
168
|
return DeesLabel = _classThis;
|
|
153
169
|
})();
|
|
154
170
|
export { DeesLabel };
|
|
155
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
171
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1sYWJlbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy8wMGdyb3VwLWxheW91dC9kZWVzLWxhYmVsL2RlZXMtbGFiZWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxPQUFPLE1BQU0sb0JBQW9CLENBQUM7QUFDOUMsT0FBTyxLQUFLLE1BQU0sTUFBTSxtQkFBbUIsQ0FBQztBQUU1QyxPQUFPLEVBQ0wsYUFBYSxFQUNiLElBQUksRUFDSixHQUFHLEVBQ0gsVUFBVSxFQUNWLFdBQVcsRUFDWCxRQUFRLEVBQ1IsU0FBUyxFQUNULEtBQUssR0FDTixNQUFNLDZCQUE2QixDQUFDO0FBRXJDLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUNoRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztJQUd6QyxTQUFTOzRCQURyQixhQUFhLENBQUMsWUFBWSxDQUFDOzs7O3NCQUNHLFdBQVc7Ozs7Ozs7Ozs7eUJBQW5CLFNBQVEsV0FBVzs7OztpQ0FNdkMsUUFBUSxDQUFDO29CQUNSLElBQUksRUFBRSxNQUFNO29CQUNaLE9BQU8sRUFBRSxJQUFJO2lCQUNkLENBQUM7dUNBR0QsUUFBUSxDQUFDO29CQUNSLElBQUksRUFBRSxNQUFNO29CQUNaLE9BQU8sRUFBRSxJQUFJO2lCQUNkLENBQUM7b0NBR0QsUUFBUSxDQUFDO29CQUNSLElBQUksRUFBRSxPQUFPO29CQUNiLE9BQU8sRUFBRSxJQUFJO2lCQUNkLENBQUM7WUFYRixvS0FBUyxLQUFLLDZCQUFMLEtBQUsscUZBQU07WUFNcEIsc0xBQVMsV0FBVyw2QkFBWCxXQUFXLGlHQUFVO1lBTTlCLDZLQUFTLFFBQVEsNkJBQVIsUUFBUSwyRkFBa0I7WUF0QnJDLDZLQStGQzs7OztRQTlGUSxNQUFNLENBQUMsSUFBSSxHQUFHLFFBQVEsQ0FBQztRQUN2QixNQUFNLENBQUMsVUFBVSxHQUFHLENBQUMsUUFBUSxFQUFFLE9BQU8sQ0FBQyxDQUFDO1FBUS9DLHVFQUFpQixFQUFFLEVBQUM7UUFOcEIsV0FBVztRQU1YLElBQVMsS0FBSywyQ0FBTTtRQUFwQixJQUFTLEtBQUssaURBQU07UUFNcEIsZ0pBQThCO1FBQTlCLElBQVMsV0FBVyxpREFBVTtRQUE5QixJQUFTLFdBQVcsdURBQVU7UUFNOUIsdUlBQTZCLEtBQUssR0FBQztRQUFuQyxJQUFTLFFBQVEsOENBQWtCO1FBQW5DLElBQVMsUUFBUSxvREFBa0I7UUFFNUIsTUFBTSxDQUFDLE1BQU0sR0FBRztZQUNyQixrQkFBa0I7WUFDbEIsVUFBVSxDQUFDLGFBQWE7WUFDeEIsR0FBRyxDQUFBOzs7Ozs7Ozs7aUJBU1UsVUFBVSxDQUFDLE9BQU8sQ0FBQyxlQUFlLEVBQUUsZUFBZSxDQUFDOzs7Ozs7Ozs7OztpQkFXcEQsVUFBVSxDQUFDLE9BQU8sQ0FBQyxvQkFBb0IsRUFBRSxvQkFBb0IsQ0FBQzs7Ozs7Ozs7Ozs7Ozs7aUJBYzlELFVBQVUsQ0FBQyxPQUFPLENBQUMsaUJBQWlCLEVBQUUsaUJBQWlCLENBQUM7Ozs7c0JBSW5ELFVBQVUsQ0FBQyxPQUFPLENBQUMscUJBQXFCLEVBQUUsdUJBQXVCLENBQUM7aUJBQ3ZFLFVBQVUsQ0FBQyxPQUFPLENBQUMsZUFBZSxFQUFFLGVBQWUsQ0FBQzs7Ozs7O0tBTWhFO1NBQ0YsQ0FBQztRQUVLLE1BQU07WUFDWCxPQUFPLElBQUksQ0FBQTtRQUNQLElBQUksQ0FBQyxLQUFLO2dCQUNWLENBQUMsQ0FBQyxJQUFJLENBQUE7O2dCQUVFLElBQUksQ0FBQyxLQUFLO2dCQUNWLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQSxpQ0FBaUMsQ0FBQyxDQUFDLENBQUMsRUFBRTtnQkFDMUQsSUFBSSxDQUFDLFdBQVc7b0JBQ2hCLENBQUMsQ0FBQyxJQUFJLENBQUE7O3lDQUVtQixhQUFhOzsrQ0FFUCxJQUFJLENBQUMsV0FBVzttQkFDNUM7b0JBQ0gsQ0FBQyxDQUFDLElBQUksQ0FBQSxFQUFFOztXQUViO2dCQUNILENBQUMsQ0FBQyxJQUFJLENBQUEsRUFBRTtLQUNYLENBQUM7UUFDSixDQUFDOzs7Ozs7WUE5RlUsdURBQVM7Ozs7O1NBQVQsU0FBUyJ9
|