@sondor-technology/sondor-components 1.0.7 → 1.0.8
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/components/calendar/calendar.d.ts +36 -0
- package/dist/components/calendar/calendar.d.ts.map +1 -0
- package/dist/components/calendar/calendar.js +439 -0
- package/dist/components/calendar/calendar.js.map +1 -0
- package/dist/components/cron-builder/cron-builder.d.ts +34 -0
- package/dist/components/cron-builder/cron-builder.d.ts.map +1 -0
- package/dist/components/cron-builder/cron-builder.js +456 -0
- package/dist/components/cron-builder/cron-builder.js.map +1 -0
- package/dist/components/input/input.d.ts +1 -0
- package/dist/components/input/input.d.ts.map +1 -1
- package/dist/components/input/input.js +35 -12
- package/dist/components/input/input.js.map +1 -1
- package/dist/components/pin-input/pin-input.d.ts +33 -0
- package/dist/components/pin-input/pin-input.d.ts.map +1 -0
- package/dist/components/pin-input/pin-input.js +253 -0
- package/dist/components/pin-input/pin-input.js.map +1 -0
- package/dist/components/popover/popover.d.ts +26 -0
- package/dist/components/popover/popover.d.ts.map +1 -0
- package/dist/components/popover/popover.js +196 -0
- package/dist/components/popover/popover.js.map +1 -0
- package/dist/components/select/select.d.ts +4 -1
- package/dist/components/select/select.d.ts.map +1 -1
- package/dist/components/select/select.js +26 -4
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/time-picker/time-picker.d.ts +38 -0
- package/dist/components/time-picker/time-picker.d.ts.map +1 -0
- package/dist/components/time-picker/time-picker.js +280 -0
- package/dist/components/time-picker/time-picker.js.map +1 -0
- package/dist/components/toggle-group/toggle-button.d.ts +23 -0
- package/dist/components/toggle-group/toggle-button.d.ts.map +1 -0
- package/dist/components/toggle-group/toggle-button.js +115 -0
- package/dist/components/toggle-group/toggle-button.js.map +1 -0
- package/dist/components/toggle-group/toggle-group.d.ts +32 -0
- package/dist/components/toggle-group/toggle-group.d.ts.map +1 -0
- package/dist/components/toggle-group/toggle-group.js +150 -0
- package/dist/components/toggle-group/toggle-group.js.map +1 -0
- package/dist/components/tooltip/tooltip.d.ts +33 -0
- package/dist/components/tooltip/tooltip.d.ts.map +1 -0
- package/dist/components/tooltip/tooltip.js +293 -0
- package/dist/components/tooltip/tooltip.js.map +1 -0
- package/dist/styles/index.css +1 -0
- package/package.json +29 -1
- package/src/components/calendar/calendar.ts +444 -0
- package/src/components/cron-builder/cron-builder.ts +452 -0
- package/src/components/input/input.ts +38 -14
- package/src/components/pin-input/pin-input.ts +249 -0
- package/src/components/popover/popover.ts +192 -0
- package/src/components/select/select.ts +25 -63
- package/src/components/time-picker/time-picker.ts +272 -0
- package/src/components/toggle-group/toggle-button.ts +104 -0
- package/src/components/toggle-group/toggle-group.ts +148 -0
- package/src/components/tooltip/tooltip.ts +286 -0
- package/src/styles/theme.css +2 -0
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { LitElement, PropertyValues } from "lit";
|
|
2
|
+
export declare class StTimePicker extends LitElement {
|
|
3
|
+
static formAssociated: boolean;
|
|
4
|
+
private _internals;
|
|
5
|
+
name: string;
|
|
6
|
+
label: string;
|
|
7
|
+
hideLabel: boolean;
|
|
8
|
+
value: string;
|
|
9
|
+
min: string;
|
|
10
|
+
max: string;
|
|
11
|
+
step?: number;
|
|
12
|
+
disabled: boolean;
|
|
13
|
+
required: boolean;
|
|
14
|
+
invalid: boolean;
|
|
15
|
+
private _touched;
|
|
16
|
+
private _inputEl;
|
|
17
|
+
private _labelId;
|
|
18
|
+
private _defaultValue;
|
|
19
|
+
constructor();
|
|
20
|
+
static styles: import("lit").CSSResult[];
|
|
21
|
+
firstUpdated(changedProperties: PropertyValues): void;
|
|
22
|
+
updated(changedProperties: PropertyValues): void;
|
|
23
|
+
private _syncValidity;
|
|
24
|
+
checkValidity(): boolean;
|
|
25
|
+
reportValidity(): boolean;
|
|
26
|
+
formResetCallback(): void;
|
|
27
|
+
focus(options?: FocusOptions): void;
|
|
28
|
+
private _handleInput;
|
|
29
|
+
private _handleChange;
|
|
30
|
+
private _handleBlur;
|
|
31
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
32
|
+
}
|
|
33
|
+
declare global {
|
|
34
|
+
interface HTMLElementTagNameMap {
|
|
35
|
+
"st-time-picker": StTimePicker;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
//# sourceMappingURL=time-picker.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../../src/components/time-picker/time-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAM1D,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAEI,IAAI,SAAM;IACzB,KAAK,SAAM;IAGe,SAAS,UAAS;IAG5C,KAAK,SAAM;IAEX,GAAG,SAAM;IACT,GAAG,SAAM;IACT,IAAI,CAAC,EAAE,MAAM,CAAC;IAEE,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAEjD,OAAO,CAAC,QAAQ,CAAS;IAEV,OAAO,CAAC,QAAQ,CAAoB;IAE5D,OAAO,CAAC,QAAQ,CAA8D;IAC9E,OAAO,CAAC,aAAa,CAAM;IAE3B,cAGC;IAED,MAAM,CAAC,MAAM,4BAyFX;IAEO,YAAY,CAAC,iBAAiB,EAAE,cAAc,QAMtD;IAEQ,OAAO,CAAC,iBAAiB,EAAE,cAAc,QAWjD;IAED,OAAO,CAAC,aAAa;IA2Cd,aAAa,YAEnB;IACM,cAAc,YAIpB;IAED,iBAAiB,SAKhB;IAEe,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,QAE3C;IAED,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,WAAW;IAKnB,MAAM,yCAgCL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
|
|
@@ -0,0 +1,280 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, html, css } from "lit";
|
|
8
|
+
import { customElement, property, query, state } from "lit/decorators.js";
|
|
9
|
+
import { classMap } from "lit/directives/class-map.js";
|
|
10
|
+
import { ifDefined } from "lit/directives/if-defined.js";
|
|
11
|
+
import { resetStyles } from "../../styles/reset.js";
|
|
12
|
+
let StTimePicker = class StTimePicker extends LitElement {
|
|
13
|
+
constructor() {
|
|
14
|
+
super();
|
|
15
|
+
this.name = "";
|
|
16
|
+
this.label = "";
|
|
17
|
+
// Visually hide the label for screen-reader only accessibility
|
|
18
|
+
this.hideLabel = false;
|
|
19
|
+
// Time string in HH:mm format (e.g., "14:30")
|
|
20
|
+
this.value = "";
|
|
21
|
+
this.min = "";
|
|
22
|
+
this.max = "";
|
|
23
|
+
this.disabled = false;
|
|
24
|
+
this.required = false;
|
|
25
|
+
this.invalid = false;
|
|
26
|
+
this._touched = false;
|
|
27
|
+
this._labelId = `time-label-${Math.random().toString(36).substring(2, 9)}`;
|
|
28
|
+
this._defaultValue = "";
|
|
29
|
+
this._internals = this.attachInternals();
|
|
30
|
+
}
|
|
31
|
+
firstUpdated(changedProperties) {
|
|
32
|
+
super.firstUpdated(changedProperties);
|
|
33
|
+
this._defaultValue = this.value;
|
|
34
|
+
// Sync initial validity state based on native input
|
|
35
|
+
this._syncValidity();
|
|
36
|
+
}
|
|
37
|
+
updated(changedProperties) {
|
|
38
|
+
super.updated(changedProperties);
|
|
39
|
+
if (changedProperties.has("value") ||
|
|
40
|
+
changedProperties.has("required") ||
|
|
41
|
+
changedProperties.has("min") ||
|
|
42
|
+
changedProperties.has("max")) {
|
|
43
|
+
this._internals.setFormValue(this.value || null);
|
|
44
|
+
this._syncValidity();
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
_syncValidity() {
|
|
48
|
+
if (!this._inputEl)
|
|
49
|
+
return;
|
|
50
|
+
this.invalid = false;
|
|
51
|
+
// 🚀 FIX: Safari/WebKit poorly supports min/max on time inputs.
|
|
52
|
+
// We enforce these constraints manually using strict lexicographical comparison.
|
|
53
|
+
if (this.required && !this.value) {
|
|
54
|
+
this._internals.setValidity({ valueMissing: true }, "Please select a time.");
|
|
55
|
+
if (this._touched)
|
|
56
|
+
this.invalid = true;
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
if (this.value && this.min && this.value < this.min) {
|
|
60
|
+
this._internals.setValidity({ rangeUnderflow: true }, `Time must be ${this.min} or later.`);
|
|
61
|
+
if (this._touched)
|
|
62
|
+
this.invalid = true;
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
if (this.value && this.max && this.value > this.max) {
|
|
66
|
+
this._internals.setValidity({ rangeOverflow: true }, `Time must be ${this.max} or earlier.`);
|
|
67
|
+
if (this._touched)
|
|
68
|
+
this.invalid = true;
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
// Fallback to native validation for things like 'step' bounds
|
|
72
|
+
const isValid = this._inputEl.checkValidity();
|
|
73
|
+
if (isValid) {
|
|
74
|
+
this._internals.setValidity({});
|
|
75
|
+
this.invalid = false;
|
|
76
|
+
}
|
|
77
|
+
else {
|
|
78
|
+
this._internals.setValidity(this._inputEl.validity, this._inputEl.validationMessage, this._inputEl);
|
|
79
|
+
if (this._touched) {
|
|
80
|
+
this.invalid = true;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
checkValidity() {
|
|
85
|
+
return this._internals.checkValidity();
|
|
86
|
+
}
|
|
87
|
+
reportValidity() {
|
|
88
|
+
this._touched = true;
|
|
89
|
+
this._syncValidity();
|
|
90
|
+
return this._internals.reportValidity();
|
|
91
|
+
}
|
|
92
|
+
formResetCallback() {
|
|
93
|
+
this.value = this._defaultValue;
|
|
94
|
+
this._touched = false;
|
|
95
|
+
this.invalid = false;
|
|
96
|
+
this._syncValidity();
|
|
97
|
+
}
|
|
98
|
+
focus(options) {
|
|
99
|
+
this._inputEl?.focus(options);
|
|
100
|
+
}
|
|
101
|
+
_handleInput(e) {
|
|
102
|
+
this.value = e.target.value;
|
|
103
|
+
this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
|
|
104
|
+
}
|
|
105
|
+
_handleChange(e) {
|
|
106
|
+
this._touched = true;
|
|
107
|
+
this.value = e.target.value;
|
|
108
|
+
this._syncValidity();
|
|
109
|
+
this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
|
|
110
|
+
}
|
|
111
|
+
_handleBlur() {
|
|
112
|
+
this._touched = true;
|
|
113
|
+
this._syncValidity();
|
|
114
|
+
}
|
|
115
|
+
render() {
|
|
116
|
+
return html `
|
|
117
|
+
${this.label
|
|
118
|
+
? html `<label id=${this._labelId} class=${classMap({ "sr-only": this.hideLabel })}
|
|
119
|
+
>${this.label}</label
|
|
120
|
+
>`
|
|
121
|
+
: ""}
|
|
122
|
+
|
|
123
|
+
<div
|
|
124
|
+
class=${classMap({
|
|
125
|
+
"input-wrapper": true,
|
|
126
|
+
"is-disabled": this.disabled,
|
|
127
|
+
"is-invalid": this.invalid,
|
|
128
|
+
})}
|
|
129
|
+
>
|
|
130
|
+
<input
|
|
131
|
+
class="native-input"
|
|
132
|
+
type="time"
|
|
133
|
+
name=${ifDefined(this.name || undefined)}
|
|
134
|
+
.value=${this.value}
|
|
135
|
+
min=${ifDefined(this.min || undefined)}
|
|
136
|
+
max=${ifDefined(this.max || undefined)}
|
|
137
|
+
step=${ifDefined(this.step)}
|
|
138
|
+
?required=${this.required}
|
|
139
|
+
?disabled=${this.disabled}
|
|
140
|
+
aria-labelledby=${ifDefined(this.label ? this._labelId : undefined)}
|
|
141
|
+
@input=${this._handleInput}
|
|
142
|
+
@change=${this._handleChange}
|
|
143
|
+
@blur=${this._handleBlur}
|
|
144
|
+
/>
|
|
145
|
+
</div>
|
|
146
|
+
`;
|
|
147
|
+
}
|
|
148
|
+
};
|
|
149
|
+
StTimePicker.formAssociated = true;
|
|
150
|
+
StTimePicker.styles = [
|
|
151
|
+
resetStyles,
|
|
152
|
+
css `
|
|
153
|
+
:host {
|
|
154
|
+
display: block;
|
|
155
|
+
font-family: inherit;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
label {
|
|
159
|
+
display: block;
|
|
160
|
+
font-size: var(--st-font-size-sm);
|
|
161
|
+
font-weight: 500;
|
|
162
|
+
color: var(--st-color-text-muted);
|
|
163
|
+
margin-bottom: var(--st-spacing-xs);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.sr-only {
|
|
167
|
+
position: absolute;
|
|
168
|
+
width: 1px;
|
|
169
|
+
height: 1px;
|
|
170
|
+
padding: 0;
|
|
171
|
+
margin: -1px;
|
|
172
|
+
overflow: hidden;
|
|
173
|
+
clip: rect(0, 0, 0, 0);
|
|
174
|
+
border: 0;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
.input-wrapper {
|
|
178
|
+
position: relative;
|
|
179
|
+
display: flex;
|
|
180
|
+
align-items: center;
|
|
181
|
+
width: 100%;
|
|
182
|
+
background: var(--st-color-surface);
|
|
183
|
+
border: 1px solid var(--st-color-border);
|
|
184
|
+
border-radius: var(--st-radius-md);
|
|
185
|
+
box-sizing: border-box;
|
|
186
|
+
transition:
|
|
187
|
+
border-color 0.2s,
|
|
188
|
+
box-shadow 0.2s,
|
|
189
|
+
background-color 0.2s;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
/* Focus within ring */
|
|
193
|
+
.input-wrapper:focus-within {
|
|
194
|
+
border-color: var(--st-color-primary);
|
|
195
|
+
box-shadow: 0 0 0 2px var(--st-color-primary-muted, rgba(59, 130, 246, 0.25));
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.input-wrapper.is-invalid {
|
|
199
|
+
border-color: var(--st-color-danger, #dc2626);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.input-wrapper.is-disabled {
|
|
203
|
+
background: var(--st-color-surface-muted, #f1f5f9);
|
|
204
|
+
cursor: not-allowed;
|
|
205
|
+
opacity: 0.7;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.native-input {
|
|
209
|
+
width: 100%;
|
|
210
|
+
min-height: 42px;
|
|
211
|
+
padding: var(--st-spacing-xs) var(--st-spacing-md);
|
|
212
|
+
background: transparent;
|
|
213
|
+
border: none;
|
|
214
|
+
color: var(--st-color-text);
|
|
215
|
+
font-family: inherit;
|
|
216
|
+
font-size: var(--st-font-size-base);
|
|
217
|
+
outline: none;
|
|
218
|
+
cursor: inherit;
|
|
219
|
+
appearance: none;
|
|
220
|
+
-webkit-appearance: none;
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
/* Style the native clock icon generated by WebKit/Blink */
|
|
224
|
+
.native-input::-webkit-calendar-picker-indicator {
|
|
225
|
+
cursor: pointer;
|
|
226
|
+
opacity: 0.6;
|
|
227
|
+
transition: opacity 0.2s;
|
|
228
|
+
filter: var(--st-icon-filter, none); /* Allows inverting for dark mode */
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.native-input::-webkit-calendar-picker-indicator:hover {
|
|
232
|
+
opacity: 1;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.native-input:disabled {
|
|
236
|
+
color: var(--st-color-text-muted);
|
|
237
|
+
}
|
|
238
|
+
`,
|
|
239
|
+
];
|
|
240
|
+
__decorate([
|
|
241
|
+
property({ type: String, reflect: true })
|
|
242
|
+
], StTimePicker.prototype, "name", void 0);
|
|
243
|
+
__decorate([
|
|
244
|
+
property({ type: String })
|
|
245
|
+
], StTimePicker.prototype, "label", void 0);
|
|
246
|
+
__decorate([
|
|
247
|
+
property({ type: Boolean, attribute: "hide-label" })
|
|
248
|
+
], StTimePicker.prototype, "hideLabel", void 0);
|
|
249
|
+
__decorate([
|
|
250
|
+
property({ type: String })
|
|
251
|
+
], StTimePicker.prototype, "value", void 0);
|
|
252
|
+
__decorate([
|
|
253
|
+
property({ type: String })
|
|
254
|
+
], StTimePicker.prototype, "min", void 0);
|
|
255
|
+
__decorate([
|
|
256
|
+
property({ type: String })
|
|
257
|
+
], StTimePicker.prototype, "max", void 0);
|
|
258
|
+
__decorate([
|
|
259
|
+
property({ type: Number })
|
|
260
|
+
], StTimePicker.prototype, "step", void 0);
|
|
261
|
+
__decorate([
|
|
262
|
+
property({ type: Boolean, reflect: true })
|
|
263
|
+
], StTimePicker.prototype, "disabled", void 0);
|
|
264
|
+
__decorate([
|
|
265
|
+
property({ type: Boolean, reflect: true })
|
|
266
|
+
], StTimePicker.prototype, "required", void 0);
|
|
267
|
+
__decorate([
|
|
268
|
+
property({ type: Boolean, reflect: true })
|
|
269
|
+
], StTimePicker.prototype, "invalid", void 0);
|
|
270
|
+
__decorate([
|
|
271
|
+
state()
|
|
272
|
+
], StTimePicker.prototype, "_touched", void 0);
|
|
273
|
+
__decorate([
|
|
274
|
+
query(".native-input")
|
|
275
|
+
], StTimePicker.prototype, "_inputEl", void 0);
|
|
276
|
+
StTimePicker = __decorate([
|
|
277
|
+
customElement("st-time-picker")
|
|
278
|
+
], StTimePicker);
|
|
279
|
+
export { StTimePicker };
|
|
280
|
+
//# sourceMappingURL=time-picker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"time-picker.js","sourceRoot":"","sources":["../../../src/components/time-picker/time-picker.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { LitElement } from "lit";
|
|
2
|
+
export declare class StToggleButton extends LitElement {
|
|
3
|
+
static shadowRootOptions: {
|
|
4
|
+
clonable?: boolean;
|
|
5
|
+
customElementRegistry?: CustomElementRegistry | null;
|
|
6
|
+
mode: ShadowRootMode;
|
|
7
|
+
serializable?: boolean;
|
|
8
|
+
slotAssignment?: SlotAssignmentMode;
|
|
9
|
+
delegatesFocus: boolean;
|
|
10
|
+
};
|
|
11
|
+
value: string;
|
|
12
|
+
selected: boolean;
|
|
13
|
+
disabled: boolean;
|
|
14
|
+
static styles: import("lit").CSSResult[];
|
|
15
|
+
private _handleClick;
|
|
16
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
17
|
+
}
|
|
18
|
+
declare global {
|
|
19
|
+
interface HTMLElementTagNameMap {
|
|
20
|
+
"st-toggle-button": StToggleButton;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
//# sourceMappingURL=toggle-button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle-button.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-group/toggle-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,cAAe,SAAQ,UAAU;IAE5C,MAAM,CAAC,iBAAiB;;;;;;;MAA6D;IAEzD,KAAK,SAAM;IACK,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAE7D,MAAM,CAAC,MAAM,4BA2DX;IAEF,OAAO,CAAC,YAAY;IAWpB,MAAM,yCAWL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, html, css } from "lit";
|
|
8
|
+
import { customElement, property } from "lit/decorators.js";
|
|
9
|
+
import { resetStyles } from "../../styles/reset.js";
|
|
10
|
+
let StToggleButton = class StToggleButton extends LitElement {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments);
|
|
13
|
+
this.value = "";
|
|
14
|
+
this.selected = false;
|
|
15
|
+
this.disabled = false;
|
|
16
|
+
}
|
|
17
|
+
_handleClick() {
|
|
18
|
+
if (this.disabled)
|
|
19
|
+
return;
|
|
20
|
+
// Dispatch an internal event for the group orchestrator to catch
|
|
21
|
+
this.dispatchEvent(new CustomEvent("st-toggle-action", {
|
|
22
|
+
detail: { value: this.value },
|
|
23
|
+
bubbles: true,
|
|
24
|
+
composed: true
|
|
25
|
+
}));
|
|
26
|
+
}
|
|
27
|
+
render() {
|
|
28
|
+
return html `
|
|
29
|
+
<button
|
|
30
|
+
type="button"
|
|
31
|
+
aria-pressed=${this.selected ? "true" : "false"}
|
|
32
|
+
?disabled=${this.disabled}
|
|
33
|
+
@click=${this._handleClick}
|
|
34
|
+
>
|
|
35
|
+
<slot></slot>
|
|
36
|
+
</button>
|
|
37
|
+
`;
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
// 🚀 FIX: Forwards programmatic focus natively to the inner button
|
|
41
|
+
StToggleButton.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
|
|
42
|
+
StToggleButton.styles = [
|
|
43
|
+
resetStyles,
|
|
44
|
+
css `
|
|
45
|
+
:host {
|
|
46
|
+
display: inline-flex;
|
|
47
|
+
flex: 1; /* Ensures all buttons in a group stretch evenly */
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
button {
|
|
51
|
+
display: inline-flex;
|
|
52
|
+
align-items: center;
|
|
53
|
+
justify-content: center;
|
|
54
|
+
gap: var(--st-spacing-xs);
|
|
55
|
+
width: 100%;
|
|
56
|
+
padding: var(--st-spacing-sm) var(--st-spacing-md);
|
|
57
|
+
background-color: var(--st-color-surface);
|
|
58
|
+
color: var(--st-color-text);
|
|
59
|
+
border: none;
|
|
60
|
+
font-size: var(--st-font-size-sm);
|
|
61
|
+
font-weight: var(--st-font-weight-medium);
|
|
62
|
+
cursor: pointer;
|
|
63
|
+
transition: all 0.2s ease;
|
|
64
|
+
white-space: nowrap;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
button:hover:not(:disabled) {
|
|
68
|
+
background-color: var(--st-color-surface-hover, #f8fafc);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
button:focus-visible {
|
|
72
|
+
outline: 2px solid var(--st-color-primary);
|
|
73
|
+
outline-offset: -2px;
|
|
74
|
+
z-index: 1; /* Brings the focus ring above siblings */
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* Active/Selected State */
|
|
78
|
+
:host([selected]) button {
|
|
79
|
+
background-color: var(--st-color-primary-light, #eff6ff);
|
|
80
|
+
color: var(--st-color-primary-dark, #1d4ed8);
|
|
81
|
+
font-weight: var(--st-font-weight-semibold);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* Disabled State */
|
|
85
|
+
:host([disabled]) {
|
|
86
|
+
pointer-events: none;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
:host([disabled]) button {
|
|
90
|
+
opacity: 0.5;
|
|
91
|
+
background-color: var(--st-color-surface-muted, #f1f5f9);
|
|
92
|
+
color: var(--st-color-text-muted);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
::slotted(svg) {
|
|
96
|
+
width: 1.125rem;
|
|
97
|
+
height: 1.125rem;
|
|
98
|
+
fill: currentColor;
|
|
99
|
+
}
|
|
100
|
+
`
|
|
101
|
+
];
|
|
102
|
+
__decorate([
|
|
103
|
+
property({ type: String })
|
|
104
|
+
], StToggleButton.prototype, "value", void 0);
|
|
105
|
+
__decorate([
|
|
106
|
+
property({ type: Boolean, reflect: true })
|
|
107
|
+
], StToggleButton.prototype, "selected", void 0);
|
|
108
|
+
__decorate([
|
|
109
|
+
property({ type: Boolean, reflect: true })
|
|
110
|
+
], StToggleButton.prototype, "disabled", void 0);
|
|
111
|
+
StToggleButton = __decorate([
|
|
112
|
+
customElement("st-toggle-button")
|
|
113
|
+
], StToggleButton);
|
|
114
|
+
export { StToggleButton };
|
|
115
|
+
//# sourceMappingURL=toggle-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle-button.js","sourceRoot":"","sources":["../../../src/components/toggle-group/toggle-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAG7C,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAIuB,UAAK,GAAG,EAAE,CAAC;QACK,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;IAsF/D,CAAC;IAvBS,YAAY;QAClB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,iEAAiE;QACjE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,kBAAkB,EAAE;YACrD,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE;YAC7B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC,CAAC;IACN,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;uBAGQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;oBACnC,IAAI,CAAC,QAAQ;iBAChB,IAAI,CAAC,YAAY;;;;KAI7B,CAAC;IACJ,CAAC;CACF,CAAA;AA3FC,mEAAmE;AAC5D,gCAAiB,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,AAA5D,CAA6D;AAM9E,qBAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAwDF;CACF,AA3DY,CA2DX;AA/D0B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAY;AACK;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AACjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AANlD,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CA4F1B"}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { LitElement, PropertyValues } from "lit";
|
|
2
|
+
import "./toggle-button.js";
|
|
3
|
+
export declare class StToggleGroup extends LitElement {
|
|
4
|
+
static formAssociated: boolean;
|
|
5
|
+
private _internals;
|
|
6
|
+
private _buttons;
|
|
7
|
+
name: string;
|
|
8
|
+
value: string;
|
|
9
|
+
multiple: boolean;
|
|
10
|
+
disabled: boolean;
|
|
11
|
+
required: boolean;
|
|
12
|
+
ariaLabel: string;
|
|
13
|
+
private _defaultValue;
|
|
14
|
+
constructor();
|
|
15
|
+
static styles: import("lit").CSSResult[];
|
|
16
|
+
firstUpdated(changedProperties: PropertyValues): void;
|
|
17
|
+
updated(changedProperties: PropertyValues): void;
|
|
18
|
+
private _syncButtons;
|
|
19
|
+
private _handleSlotChange;
|
|
20
|
+
private _handleToggle;
|
|
21
|
+
formResetCallback(): void;
|
|
22
|
+
private _syncValidity;
|
|
23
|
+
checkValidity(): boolean;
|
|
24
|
+
reportValidity(): boolean;
|
|
25
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
26
|
+
}
|
|
27
|
+
declare global {
|
|
28
|
+
interface HTMLElementTagNameMap {
|
|
29
|
+
"st-toggle-group": StToggleGroup;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
//# sourceMappingURL=toggle-group.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-group/toggle-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5D,OAAO,oBAAoB,CAAC;AAE5B,qBACa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAGrC,OAAO,CAAC,QAAQ,CAAoB;IAEO,IAAI,SAAM;IAGzB,KAAK,SAAM;IAEV,QAAQ,UAAS;IACF,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAGtB,SAAS,SAAM;IAEtD,OAAO,CAAC,aAAa,CAAM;IAE3B,cAIC;IAED,MAAM,CAAC,MAAM,4BAsBX;IAEO,YAAY,CAAC,iBAAiB,EAAE,cAAc,QAGtD;IAEQ,OAAO,CAAC,iBAAiB,EAAE,cAAc,QAYjD;IAED,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,aAAa;IAsBrB,iBAAiB,SAEhB;IAED,OAAO,CAAC,aAAa;IAQd,aAAa,YAA8C;IAC3D,cAAc,YAA+C;IAEpE,MAAM,yCAWL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, html, css } from "lit";
|
|
8
|
+
import { customElement, property, queryAssignedElements } from "lit/decorators.js";
|
|
9
|
+
import { ifDefined } from "lit/directives/if-defined.js";
|
|
10
|
+
import { resetStyles } from "../../styles/reset.js";
|
|
11
|
+
import "./toggle-button.js";
|
|
12
|
+
let StToggleGroup = class StToggleGroup extends LitElement {
|
|
13
|
+
constructor() {
|
|
14
|
+
super();
|
|
15
|
+
this.name = "";
|
|
16
|
+
// A comma-separated list of values if multiple=true, or a single value if false
|
|
17
|
+
this.value = "";
|
|
18
|
+
this.multiple = false;
|
|
19
|
+
this.disabled = false;
|
|
20
|
+
this.required = false;
|
|
21
|
+
// ARIA Support
|
|
22
|
+
this.ariaLabel = "";
|
|
23
|
+
this._defaultValue = "";
|
|
24
|
+
this._internals = this.attachInternals();
|
|
25
|
+
this.addEventListener("st-toggle-action", this._handleToggle);
|
|
26
|
+
}
|
|
27
|
+
firstUpdated(changedProperties) {
|
|
28
|
+
super.firstUpdated(changedProperties);
|
|
29
|
+
this._defaultValue = this.value;
|
|
30
|
+
}
|
|
31
|
+
updated(changedProperties) {
|
|
32
|
+
super.updated(changedProperties);
|
|
33
|
+
if (changedProperties.has("value")) {
|
|
34
|
+
this._internals.setFormValue(this.value || null);
|
|
35
|
+
this._syncButtons();
|
|
36
|
+
this._syncValidity();
|
|
37
|
+
}
|
|
38
|
+
if (changedProperties.has("disabled")) {
|
|
39
|
+
this._buttons.forEach(btn => btn.disabled = this.disabled);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
_syncButtons() {
|
|
43
|
+
const values = this.multiple && this.value ? this.value.split(",") : [this.value];
|
|
44
|
+
this._buttons.forEach(btn => {
|
|
45
|
+
btn.selected = values.includes(btn.value);
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
_handleSlotChange() {
|
|
49
|
+
this._syncButtons();
|
|
50
|
+
if (this.disabled) {
|
|
51
|
+
this._buttons.forEach(btn => btn.disabled = true);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
_handleToggle(e) {
|
|
55
|
+
e.stopPropagation();
|
|
56
|
+
const toggledValue = e.detail.value;
|
|
57
|
+
if (this.multiple) {
|
|
58
|
+
let values = this.value ? this.value.split(",") : [];
|
|
59
|
+
if (values.includes(toggledValue)) {
|
|
60
|
+
values = values.filter(v => v !== toggledValue); // Deselect
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
values.push(toggledValue); // Select
|
|
64
|
+
}
|
|
65
|
+
this.value = values.join(",");
|
|
66
|
+
}
|
|
67
|
+
else {
|
|
68
|
+
// Single select behavior (radio button style: clicking active doesn't deselect)
|
|
69
|
+
if (this.value !== toggledValue) {
|
|
70
|
+
this.value = toggledValue;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
|
|
74
|
+
}
|
|
75
|
+
formResetCallback() {
|
|
76
|
+
this.value = this._defaultValue;
|
|
77
|
+
}
|
|
78
|
+
_syncValidity() {
|
|
79
|
+
if (this.required && !this.value) {
|
|
80
|
+
this._internals.setValidity({ valueMissing: true }, "Please select an option.");
|
|
81
|
+
}
|
|
82
|
+
else {
|
|
83
|
+
this._internals.setValidity({});
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
checkValidity() { return this._internals.checkValidity(); }
|
|
87
|
+
reportValidity() { return this._internals.reportValidity(); }
|
|
88
|
+
render() {
|
|
89
|
+
return html `
|
|
90
|
+
<div
|
|
91
|
+
class="group-container"
|
|
92
|
+
role="group"
|
|
93
|
+
aria-label=${ifDefined(this.ariaLabel || undefined)}
|
|
94
|
+
aria-required=${this.required ? "true" : "false"}
|
|
95
|
+
>
|
|
96
|
+
<slot @slotchange=${this._handleSlotChange}></slot>
|
|
97
|
+
</div>
|
|
98
|
+
`;
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
StToggleGroup.formAssociated = true;
|
|
102
|
+
StToggleGroup.styles = [
|
|
103
|
+
resetStyles,
|
|
104
|
+
css `
|
|
105
|
+
:host {
|
|
106
|
+
display: inline-flex;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.group-container {
|
|
110
|
+
display: inline-flex;
|
|
111
|
+
background-color: var(--st-color-border);
|
|
112
|
+
/* 🚀 FIX: This 1px gap perfectly acts as the inner border between children */
|
|
113
|
+
gap: 1px;
|
|
114
|
+
border: 1px solid var(--st-color-border);
|
|
115
|
+
border-radius: var(--st-radius-md);
|
|
116
|
+
overflow: hidden; /* Clips the child buttons exactly to the border radius */
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
:host([disabled]) .group-container {
|
|
120
|
+
opacity: 0.5;
|
|
121
|
+
pointer-events: none;
|
|
122
|
+
}
|
|
123
|
+
`
|
|
124
|
+
];
|
|
125
|
+
__decorate([
|
|
126
|
+
queryAssignedElements({ selector: "st-toggle-button" })
|
|
127
|
+
], StToggleGroup.prototype, "_buttons", void 0);
|
|
128
|
+
__decorate([
|
|
129
|
+
property({ type: String, reflect: true })
|
|
130
|
+
], StToggleGroup.prototype, "name", void 0);
|
|
131
|
+
__decorate([
|
|
132
|
+
property({ type: String })
|
|
133
|
+
], StToggleGroup.prototype, "value", void 0);
|
|
134
|
+
__decorate([
|
|
135
|
+
property({ type: Boolean })
|
|
136
|
+
], StToggleGroup.prototype, "multiple", void 0);
|
|
137
|
+
__decorate([
|
|
138
|
+
property({ type: Boolean, reflect: true })
|
|
139
|
+
], StToggleGroup.prototype, "disabled", void 0);
|
|
140
|
+
__decorate([
|
|
141
|
+
property({ type: Boolean, reflect: true })
|
|
142
|
+
], StToggleGroup.prototype, "required", void 0);
|
|
143
|
+
__decorate([
|
|
144
|
+
property({ attribute: "aria-label" })
|
|
145
|
+
], StToggleGroup.prototype, "ariaLabel", void 0);
|
|
146
|
+
StToggleGroup = __decorate([
|
|
147
|
+
customElement("st-toggle-group")
|
|
148
|
+
], StToggleGroup);
|
|
149
|
+
export { StToggleGroup };
|
|
150
|
+
//# sourceMappingURL=toggle-group.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle-group.js","sourceRoot":"","sources":["../../../src/components/toggle-group/toggle-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,OAAO,oBAAoB,CAAC;AAGrB,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAqB3C;QACE,KAAK,EAAE,CAAC;QAfiC,SAAI,GAAG,EAAE,CAAC;QAErD,gFAAgF;QACpD,UAAK,GAAG,EAAE,CAAC;QAEV,aAAQ,GAAG,KAAK,CAAC;QACF,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QAE7D,eAAe;QACwB,cAAS,GAAG,EAAE,CAAC;QAE9C,kBAAa,GAAG,EAAE,CAAC;QAIzB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACzC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,aAA8B,CAAC,CAAC;IACjF,CAAC;IA0BQ,YAAY,CAAC,iBAAiC;QACrD,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACtC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;IAClC,CAAC;IAEQ,OAAO,CAAC,iBAAiC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;YACjD,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClF,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YAC1B,GAAG,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,iBAAiB;QACvB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAEO,aAAa,CAAC,CAAiC;QACrD,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,YAAY,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;QAEpC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YACrD,IAAI,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC;gBAClC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,WAAW;YAC9D,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS;YACtC,CAAC;YACD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,gFAAgF;YAChF,IAAI,IAAI,CAAC,KAAK,KAAK,YAAY,EAAE,CAAC;gBAChC,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;YAC5B,CAAC;QACH,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC7E,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC;IAClC,CAAC;IAEO,aAAa;QACnB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACjC,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,0BAA0B,CAAC,CAAC;QAClF,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IAEM,aAAa,KAAK,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC;IAC3D,cAAc,KAAK,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;IAEpE,MAAM;QACJ,OAAO,IAAI,CAAA;;;;qBAIM,SAAS,CAAC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC;wBACnC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;4BAE5B,IAAI,CAAC,iBAAiB;;KAE7C,CAAC;IACJ,CAAC;CACF,CAAA;AApIQ,4BAAc,GAAG,IAAI,AAAP,CAAQ;AA0BtB,oBAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;KAmBF;CACF,AAtBY,CAsBX;AA5CM;IADP,qBAAqB,CAAC,EAAE,QAAQ,EAAE,kBAAkB,EAAE,CAAC;+CACpB;AAEO;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAW;AAGzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAY;AAEV;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AACF;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAkB;AACjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAkB;AAGtB;IAAtC,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;gDAAgB;AAjB3C,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAqIzB"}
|