tyrell-components 1.0.0-RC6 → 1.0.0-TC10
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/tyrell.js +1 -1
- package/lib/components/button.d.ts +9 -0
- package/lib/components/button.d.ts.map +1 -1
- package/lib/components/button.js +34 -1
- package/lib/components/button.js.map +1 -1
- package/lib/components/dropdown.d.ts +15 -13
- package/lib/components/dropdown.d.ts.map +1 -1
- package/lib/components/dropdown.js +52 -37
- package/lib/components/dropdown.js.map +1 -1
- package/lib/components/file-upload.d.ts +121 -0
- package/lib/components/file-upload.d.ts.map +1 -0
- package/lib/components/file-upload.js +441 -0
- package/lib/components/file-upload.js.map +1 -0
- package/lib/components/multiselect.d.ts +15 -4
- package/lib/components/multiselect.d.ts.map +1 -1
- package/lib/components/multiselect.js +56 -21
- package/lib/components/multiselect.js.map +1 -1
- package/lib/components/switch.js +6 -6
- package/lib/components/switch.js.map +1 -1
- package/lib/index.d.ts +8 -0
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +3 -0
- package/lib/index.js.map +1 -1
- package/lib/styles/button.d.ts +1 -1
- package/lib/styles/button.d.ts.map +1 -1
- package/lib/styles/button.js +41 -0
- package/lib/styles/button.js.map +1 -1
- package/lib/styles/dropdown.d.ts +1 -1
- package/lib/styles/dropdown.d.ts.map +1 -1
- package/lib/styles/dropdown.js +73 -0
- package/lib/styles/dropdown.js.map +1 -1
- package/lib/styles/file-upload.d.ts +2 -0
- package/lib/styles/file-upload.d.ts.map +1 -0
- package/lib/styles/file-upload.js +241 -0
- package/lib/styles/file-upload.js.map +1 -0
- package/lib/styles/multiselect.d.ts +1 -1
- package/lib/styles/multiselect.d.ts.map +1 -1
- package/lib/styles/multiselect.js +71 -0
- package/lib/styles/multiselect.js.map +1 -1
- package/lib/utils/loader-registry.d.ts +35 -0
- package/lib/utils/loader-registry.d.ts.map +1 -0
- package/lib/utils/loader-registry.js +43 -0
- package/lib/utils/loader-registry.js.map +1 -0
- package/lib/version.d.ts +1 -1
- package/lib/version.d.ts.map +1 -1
- package/lib/version.js +1 -1
- package/lib/version.js.map +1 -1
- package/package.json +5 -1
|
@@ -17,6 +17,7 @@ interface ButtonState {
|
|
|
17
17
|
size: Size;
|
|
18
18
|
appearance: Appearance;
|
|
19
19
|
disabled: boolean;
|
|
20
|
+
loading: boolean;
|
|
20
21
|
type: "button" | "submit" | "reset";
|
|
21
22
|
pill: boolean;
|
|
22
23
|
action: boolean;
|
|
@@ -61,6 +62,11 @@ export declare class TyButton extends TyComponent<ButtonState> implements TyButt
|
|
|
61
62
|
visual: boolean;
|
|
62
63
|
default: boolean;
|
|
63
64
|
};
|
|
65
|
+
loading: {
|
|
66
|
+
type: "boolean";
|
|
67
|
+
visual: boolean;
|
|
68
|
+
default: boolean;
|
|
69
|
+
};
|
|
64
70
|
type: {
|
|
65
71
|
type: "string";
|
|
66
72
|
visual: boolean;
|
|
@@ -103,6 +109,8 @@ export declare class TyButton extends TyComponent<ButtonState> implements TyButt
|
|
|
103
109
|
set appearance(value: Appearance);
|
|
104
110
|
get disabled(): boolean;
|
|
105
111
|
set disabled(value: boolean);
|
|
112
|
+
get loading(): boolean;
|
|
113
|
+
set loading(value: boolean);
|
|
106
114
|
get type(): "button" | "submit" | "reset";
|
|
107
115
|
set type(value: "button" | "submit" | "reset");
|
|
108
116
|
get pill(): boolean;
|
|
@@ -120,6 +128,7 @@ export declare class TyButton extends TyComponent<ButtonState> implements TyButt
|
|
|
120
128
|
private buildClasses;
|
|
121
129
|
private handleFormAction;
|
|
122
130
|
private initializeButtonStructure;
|
|
131
|
+
private applyLoadingState;
|
|
123
132
|
protected render(): void;
|
|
124
133
|
}
|
|
125
134
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAKnE,KAAK,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;AAEjD,UAAU,WAAW;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,IAAI,CAAC;IACX,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;GASG;AACH,qBAAa,QACX,SAAQ,WAAW,CAAC,WAAW,CAC/B,YAAW,eAAe;IAE1B,MAAM,CAAC,cAAc,UAAQ;IAE7B,SAAS,CAAC,MAAM,CAAC,UAAU;;;;;;;;;;0BAUT,GAAG;wBACL,GAAG;;;;;;0BAYD,GAAG;wBACL,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA8CjB;IAEF,OAAO,CAAC,qBAAqB,CAAS;;IAOtC,SAAS,CAAC,SAAS,IAAI,IAAI;IAC3B,SAAS,CAAC,YAAY,IAAI,IAAI;IAC9B,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,EAAE,GAAG,IAAI;IAM/D,IAAI,MAAM,IAAI,MAAM,CAEnB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,EAEvB;IAED,IAAI,IAAI,IAAI,IAAI,CAEf;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,EAEnB;IAED,IAAI,UAAU,IAAI,UAAU,CAE3B;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,UAAU,EAE/B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,IAAI,IAAI,IAAI,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAExC;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,EAE5C;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,EAExB;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAMD,oEAAoE;IACpE,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,gBAAgB;IAmBxB,OAAO,CAAC,yBAAyB;IA8CjC,OAAO,CAAC,iBAAiB;IAazB,SAAS,CAAC,MAAM,IAAI,IAAI;CAgBzB"}
|
package/lib/components/button.js
CHANGED
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
import { TyComponent } from "../base/ty-component.js";
|
|
12
12
|
import { ensureStyles, buildClassList } from "../utils/styles.js";
|
|
13
13
|
import { buttonStyles } from "../styles/button.js";
|
|
14
|
+
import { getLoaderSvg } from "../utils/loader-registry.js";
|
|
14
15
|
/**
|
|
15
16
|
* Ty Button Component
|
|
16
17
|
*
|
|
@@ -57,6 +58,12 @@ export class TyButton extends TyComponent {
|
|
|
57
58
|
set disabled(value) {
|
|
58
59
|
this.setProperty("disabled", value);
|
|
59
60
|
}
|
|
61
|
+
get loading() {
|
|
62
|
+
return this.getProperty("loading");
|
|
63
|
+
}
|
|
64
|
+
set loading(value) {
|
|
65
|
+
this.setProperty("loading", value);
|
|
66
|
+
}
|
|
60
67
|
get type() {
|
|
61
68
|
return this.getProperty("type");
|
|
62
69
|
}
|
|
@@ -133,6 +140,10 @@ export class TyButton extends TyComponent {
|
|
|
133
140
|
const button = document.createElement("button");
|
|
134
141
|
button.disabled = this.disabled;
|
|
135
142
|
button.className = classes;
|
|
143
|
+
const loader = document.createElement("span");
|
|
144
|
+
loader.className = "loader-icon";
|
|
145
|
+
loader.setAttribute("aria-hidden", "true");
|
|
146
|
+
loader.innerHTML = getLoaderSvg();
|
|
136
147
|
const startSlot = document.createElement("slot");
|
|
137
148
|
startSlot.name = "start";
|
|
138
149
|
startSlot.className = "start";
|
|
@@ -140,11 +151,12 @@ export class TyButton extends TyComponent {
|
|
|
140
151
|
const endSlot = document.createElement("slot");
|
|
141
152
|
endSlot.name = "end";
|
|
142
153
|
endSlot.className = "end";
|
|
154
|
+
button.appendChild(loader);
|
|
143
155
|
button.appendChild(startSlot);
|
|
144
156
|
button.appendChild(defaultSlot);
|
|
145
157
|
button.appendChild(endSlot);
|
|
146
158
|
button.addEventListener("click", (e) => {
|
|
147
|
-
if (this.disabled)
|
|
159
|
+
if (this.disabled || this.loading)
|
|
148
160
|
return;
|
|
149
161
|
e.stopPropagation();
|
|
150
162
|
this.handleFormAction();
|
|
@@ -154,9 +166,24 @@ export class TyButton extends TyComponent {
|
|
|
154
166
|
detail: { originalEvent: e },
|
|
155
167
|
}));
|
|
156
168
|
});
|
|
169
|
+
this.applyLoadingState(button);
|
|
157
170
|
shadow.appendChild(button);
|
|
158
171
|
this._structureInitialized = true;
|
|
159
172
|
}
|
|
173
|
+
applyLoadingState(button) {
|
|
174
|
+
const isLoading = this.loading;
|
|
175
|
+
button.classList.toggle("loading", isLoading);
|
|
176
|
+
if (isLoading) {
|
|
177
|
+
button.setAttribute("aria-busy", "true");
|
|
178
|
+
// Pull the latest registered loader SVG so registry changes take effect
|
|
179
|
+
const loader = button.querySelector(".loader-icon");
|
|
180
|
+
if (loader)
|
|
181
|
+
loader.innerHTML = getLoaderSvg();
|
|
182
|
+
}
|
|
183
|
+
else {
|
|
184
|
+
button.removeAttribute("aria-busy");
|
|
185
|
+
}
|
|
186
|
+
}
|
|
160
187
|
render() {
|
|
161
188
|
const shadow = this.shadowRoot;
|
|
162
189
|
if (!this._structureInitialized) {
|
|
@@ -168,6 +195,7 @@ export class TyButton extends TyComponent {
|
|
|
168
195
|
if (button) {
|
|
169
196
|
button.disabled = this.disabled;
|
|
170
197
|
button.className = classes;
|
|
198
|
+
this.applyLoadingState(button);
|
|
171
199
|
}
|
|
172
200
|
}
|
|
173
201
|
}
|
|
@@ -209,6 +237,11 @@ TyButton.properties = {
|
|
|
209
237
|
visual: true,
|
|
210
238
|
default: false,
|
|
211
239
|
},
|
|
240
|
+
loading: {
|
|
241
|
+
type: "boolean",
|
|
242
|
+
visual: true,
|
|
243
|
+
default: false,
|
|
244
|
+
},
|
|
212
245
|
type: {
|
|
213
246
|
type: "string",
|
|
214
247
|
visual: false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/components/button.ts"],"names":[],"mappings":"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"}
|
|
@@ -134,9 +134,13 @@ export declare class TyDropdown extends TyComponent<DropdownState> {
|
|
|
134
134
|
validate: (v: any) => boolean;
|
|
135
135
|
coerce: (v: any) => number;
|
|
136
136
|
};
|
|
137
|
+
loading: {
|
|
138
|
+
type: "boolean";
|
|
139
|
+
visual: boolean;
|
|
140
|
+
default: boolean;
|
|
141
|
+
};
|
|
137
142
|
};
|
|
138
143
|
private _value;
|
|
139
|
-
private _name;
|
|
140
144
|
private _placeholder;
|
|
141
145
|
private _label;
|
|
142
146
|
private _disabled;
|
|
@@ -144,15 +148,14 @@ export declare class TyDropdown extends TyComponent<DropdownState> {
|
|
|
144
148
|
private _required;
|
|
145
149
|
private _externalSearch;
|
|
146
150
|
private _clearable;
|
|
151
|
+
private _loading;
|
|
147
152
|
private _size;
|
|
148
|
-
private _flavor;
|
|
149
153
|
private _state;
|
|
150
154
|
private _scrollLockId;
|
|
151
155
|
private _stubClickHandler;
|
|
152
156
|
private _outsideClickHandler;
|
|
153
157
|
private _optionClickHandler;
|
|
154
158
|
private _searchInputHandler;
|
|
155
|
-
private _searchBlurHandler;
|
|
156
159
|
private _blockSearchClick;
|
|
157
160
|
private _keyboardHandler;
|
|
158
161
|
private _clearClickHandler;
|
|
@@ -176,6 +179,13 @@ export declare class TyDropdown extends TyComponent<DropdownState> {
|
|
|
176
179
|
* Handle state synchronization BEFORE render
|
|
177
180
|
*/
|
|
178
181
|
protected onPropertiesChanged(changes: PropertyChange[]): void;
|
|
182
|
+
/**
|
|
183
|
+
* Toggle the loading visual state on the open popup.
|
|
184
|
+
* Replaces the options list with a centered spinner; search input stays usable.
|
|
185
|
+
* Pulls the latest registered loader SVG on each call so registry changes
|
|
186
|
+
* take effect on the next loading toggle.
|
|
187
|
+
*/
|
|
188
|
+
private applyLoadingState;
|
|
179
189
|
/**
|
|
180
190
|
* Get the form value for this component
|
|
181
191
|
* TyComponent calls this automatically when formValue property changes
|
|
@@ -185,10 +195,6 @@ export declare class TyDropdown extends TyComponent<DropdownState> {
|
|
|
185
195
|
* Parse dropdown value (single string)
|
|
186
196
|
*/
|
|
187
197
|
private parseValue;
|
|
188
|
-
/**
|
|
189
|
-
* Validate flavor attribute
|
|
190
|
-
*/
|
|
191
|
-
private validateFlavor;
|
|
192
198
|
/**
|
|
193
199
|
* Initialize component state from attributes
|
|
194
200
|
*/
|
|
@@ -297,12 +303,6 @@ export declare class TyDropdown extends TyComponent<DropdownState> {
|
|
|
297
303
|
* Handle search input changes
|
|
298
304
|
*/
|
|
299
305
|
private handleSearchInput;
|
|
300
|
-
/**
|
|
301
|
-
* Handle search blur - DISABLED
|
|
302
|
-
* Previously caused race conditions with option clicks.
|
|
303
|
-
* Search reset now handled in closeDesktopDropdown() instead.
|
|
304
|
-
*/
|
|
305
|
-
private handleSearchBlur;
|
|
306
306
|
/**
|
|
307
307
|
* Block search input click from bubbling
|
|
308
308
|
* Prevents search input clicks from triggering outside click handler
|
|
@@ -390,6 +390,8 @@ export declare class TyDropdown extends TyComponent<DropdownState> {
|
|
|
390
390
|
set externalSearch(v: boolean);
|
|
391
391
|
get clearable(): boolean;
|
|
392
392
|
set clearable(v: boolean);
|
|
393
|
+
get loading(): boolean;
|
|
394
|
+
set loading(v: boolean);
|
|
393
395
|
get size(): Size;
|
|
394
396
|
set size(v: Size);
|
|
395
397
|
get flavor(): Flavor;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/components/dropdown.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAA;AAKtD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;
|
|
1
|
+
{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/components/dropdown.ts"],"names":[],"mappings":"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"}
|
|
@@ -41,6 +41,7 @@ import { lockScroll, unlockScroll } from '../utils/scroll-lock.js';
|
|
|
41
41
|
import { isMobileTouch } from '../utils/mobile.js';
|
|
42
42
|
import { TyComponent } from '../base/ty-component.js';
|
|
43
43
|
import { CustomScrollbar, isCustomScrollbarEnabled } from '../utils/custom-scrollbar.js';
|
|
44
|
+
import { getLoaderSvg } from '../utils/loader-registry.js';
|
|
44
45
|
// ============================================================================
|
|
45
46
|
// Element Hash Utility (equivalent to ClojureScript's hash function)
|
|
46
47
|
// ============================================================================
|
|
@@ -97,7 +98,6 @@ export class TyDropdown extends TyComponent {
|
|
|
97
98
|
// PRIVATE FIELDS (will be removed in Phase 3)
|
|
98
99
|
// ============================================================================
|
|
99
100
|
this._value = '';
|
|
100
|
-
this._name = '';
|
|
101
101
|
this._placeholder = 'Select an option...';
|
|
102
102
|
this._label = '';
|
|
103
103
|
this._disabled = false;
|
|
@@ -105,8 +105,8 @@ export class TyDropdown extends TyComponent {
|
|
|
105
105
|
this._required = false;
|
|
106
106
|
this._externalSearch = false;
|
|
107
107
|
this._clearable = true;
|
|
108
|
+
this._loading = false;
|
|
108
109
|
this._size = 'md';
|
|
109
|
-
this._flavor = 'neutral';
|
|
110
110
|
// Component state
|
|
111
111
|
this._state = {
|
|
112
112
|
open: false,
|
|
@@ -123,7 +123,6 @@ export class TyDropdown extends TyComponent {
|
|
|
123
123
|
this._outsideClickHandler = null;
|
|
124
124
|
this._optionClickHandler = null;
|
|
125
125
|
this._searchInputHandler = null;
|
|
126
|
-
this._searchBlurHandler = null;
|
|
127
126
|
this._blockSearchClick = null;
|
|
128
127
|
this._keyboardHandler = null;
|
|
129
128
|
this._clearClickHandler = null;
|
|
@@ -145,6 +144,8 @@ export class TyDropdown extends TyComponent {
|
|
|
145
144
|
else {
|
|
146
145
|
this.renderDesktop();
|
|
147
146
|
}
|
|
147
|
+
// Loading visual lives on a dynamically rendered wrapper; reapply each render
|
|
148
|
+
this.applyLoadingState();
|
|
148
149
|
}
|
|
149
150
|
// ============================================================================
|
|
150
151
|
// LIFECYCLE HOOKS - TyComponent integration
|
|
@@ -189,9 +190,6 @@ export class TyDropdown extends TyComponent {
|
|
|
189
190
|
this._state.currentValue = newValue || null;
|
|
190
191
|
this.syncSelectedOption();
|
|
191
192
|
break;
|
|
192
|
-
case 'name':
|
|
193
|
-
this._name = newValue || '';
|
|
194
|
-
break;
|
|
195
193
|
case 'placeholder':
|
|
196
194
|
this._placeholder = newValue || 'Select an option...';
|
|
197
195
|
this.updatePlaceholderInDOM();
|
|
@@ -218,15 +216,40 @@ export class TyDropdown extends TyComponent {
|
|
|
218
216
|
case 'size':
|
|
219
217
|
this._size = newValue;
|
|
220
218
|
break;
|
|
221
|
-
case 'flavor':
|
|
222
|
-
this._flavor = newValue;
|
|
223
|
-
break;
|
|
224
219
|
case 'debounce':
|
|
225
220
|
this._debounce = newValue;
|
|
226
221
|
break;
|
|
222
|
+
case 'loading':
|
|
223
|
+
this._loading = newValue;
|
|
224
|
+
this.applyLoadingState();
|
|
225
|
+
break;
|
|
227
226
|
}
|
|
228
227
|
}
|
|
229
228
|
}
|
|
229
|
+
/**
|
|
230
|
+
* Toggle the loading visual state on the open popup.
|
|
231
|
+
* Replaces the options list with a centered spinner; search input stays usable.
|
|
232
|
+
* Pulls the latest registered loader SVG on each call so registry changes
|
|
233
|
+
* take effect on the next loading toggle.
|
|
234
|
+
*/
|
|
235
|
+
applyLoadingState() {
|
|
236
|
+
const shadow = this.shadowRoot;
|
|
237
|
+
if (!shadow)
|
|
238
|
+
return;
|
|
239
|
+
const svg = this._loading ? getLoaderSvg() : null;
|
|
240
|
+
shadow.querySelectorAll('.dropdown-options-wrapper').forEach((wrapper) => {
|
|
241
|
+
wrapper.classList.toggle('loading', this._loading);
|
|
242
|
+
if (this._loading) {
|
|
243
|
+
wrapper.setAttribute('aria-busy', 'true');
|
|
244
|
+
const spinner = wrapper.querySelector('.dropdown-loading-spinner');
|
|
245
|
+
if (spinner && svg)
|
|
246
|
+
spinner.innerHTML = svg;
|
|
247
|
+
}
|
|
248
|
+
else {
|
|
249
|
+
wrapper.removeAttribute('aria-busy');
|
|
250
|
+
}
|
|
251
|
+
});
|
|
252
|
+
}
|
|
230
253
|
/**
|
|
231
254
|
* Get the form value for this component
|
|
232
255
|
* TyComponent calls this automatically when formValue property changes
|
|
@@ -243,19 +266,6 @@ export class TyDropdown extends TyComponent {
|
|
|
243
266
|
return null;
|
|
244
267
|
return value.trim();
|
|
245
268
|
}
|
|
246
|
-
/**
|
|
247
|
-
* Validate flavor attribute
|
|
248
|
-
*/
|
|
249
|
-
validateFlavor(flavor) {
|
|
250
|
-
const validFlavors = ['primary', 'secondary', 'success', 'danger', 'warning', 'neutral'];
|
|
251
|
-
const normalized = (flavor || 'neutral');
|
|
252
|
-
if (!validFlavors.includes(normalized)) {
|
|
253
|
-
console.warn(`[ty-dropdown] Invalid flavor '${flavor}'. Using 'neutral'. ` +
|
|
254
|
-
`Valid flavors: ${validFlavors.join(', ')}`);
|
|
255
|
-
return 'neutral';
|
|
256
|
-
}
|
|
257
|
-
return normalized;
|
|
258
|
-
}
|
|
259
269
|
/**
|
|
260
270
|
* Initialize component state from attributes
|
|
261
271
|
*/
|
|
@@ -587,10 +597,6 @@ export class TyDropdown extends TyComponent {
|
|
|
587
597
|
// - handleSearchInput(): Handles search input for both dialog and modal
|
|
588
598
|
// * Desktop: Filters options locally OR dispatches search event
|
|
589
599
|
// * Mobile: Same behavior
|
|
590
|
-
//
|
|
591
|
-
// - handleSearchBlur(): Resets search when input loses focus
|
|
592
|
-
// * Desktop: Clears search and shows all options
|
|
593
|
-
// * Mobile: Same behavior
|
|
594
600
|
// ============================================================================
|
|
595
601
|
/**
|
|
596
602
|
* Setup event listeners
|
|
@@ -615,7 +621,6 @@ export class TyDropdown extends TyComponent {
|
|
|
615
621
|
this._blockSearchClick = this.blockSearchClick.bind(this);
|
|
616
622
|
searchInput.addEventListener('input', this._searchInputHandler);
|
|
617
623
|
searchInput.addEventListener('click', this._blockSearchClick);
|
|
618
|
-
// searchInput.addEventListener('blur', this._searchBlurHandler)
|
|
619
624
|
}
|
|
620
625
|
// Add clear button handler
|
|
621
626
|
const clearBtn = shadow.querySelector('.dropdown-clear-btn');
|
|
@@ -925,15 +930,6 @@ export class TyDropdown extends TyComponent {
|
|
|
925
930
|
this.clearHighlights(allOptions);
|
|
926
931
|
}
|
|
927
932
|
}
|
|
928
|
-
/**
|
|
929
|
-
* Handle search blur - DISABLED
|
|
930
|
-
* Previously caused race conditions with option clicks.
|
|
931
|
-
* Search reset now handled in closeDesktopDropdown() instead.
|
|
932
|
-
*/
|
|
933
|
-
handleSearchBlur(_e) {
|
|
934
|
-
// Blur handler disabled - search reset happens in closeDesktopDropdown
|
|
935
|
-
// This prevents race conditions where blur timer fires before click completes
|
|
936
|
-
}
|
|
937
933
|
/**
|
|
938
934
|
* Block search input click from bubbling
|
|
939
935
|
* Prevents search input clicks from triggering outside click handler
|
|
@@ -1170,6 +1166,12 @@ export class TyDropdown extends TyComponent {
|
|
|
1170
1166
|
<div class="dropdown-options">
|
|
1171
1167
|
<slot id="options-slot"></slot>
|
|
1172
1168
|
</div>
|
|
1169
|
+
<div class="dropdown-loading" aria-hidden="true">
|
|
1170
|
+
<slot name="loading">
|
|
1171
|
+
<span class="dropdown-loading-spinner"></span>
|
|
1172
|
+
<span class="dropdown-loading-text">Searching…</span>
|
|
1173
|
+
</slot>
|
|
1174
|
+
</div>
|
|
1173
1175
|
</div>
|
|
1174
1176
|
</dialog>
|
|
1175
1177
|
</div>
|
|
@@ -1283,8 +1285,14 @@ export class TyDropdown extends TyComponent {
|
|
|
1283
1285
|
<dialog class="mobile-dialog">
|
|
1284
1286
|
<div class="mobile-dialog-content">
|
|
1285
1287
|
${searchHeaderHtml}
|
|
1286
|
-
<div class="mobile-options-container">
|
|
1288
|
+
<div class="mobile-options-container dropdown-options-wrapper">
|
|
1287
1289
|
<slot id="options-slot"></slot>
|
|
1290
|
+
<div class="dropdown-loading" aria-hidden="true">
|
|
1291
|
+
<slot name="loading">
|
|
1292
|
+
<span class="dropdown-loading-spinner"></span>
|
|
1293
|
+
<span class="dropdown-loading-text">Searching…</span>
|
|
1294
|
+
</slot>
|
|
1295
|
+
</div>
|
|
1288
1296
|
</div>
|
|
1289
1297
|
</div>
|
|
1290
1298
|
</dialog>
|
|
@@ -1444,6 +1452,8 @@ export class TyDropdown extends TyComponent {
|
|
|
1444
1452
|
set externalSearch(v) { this.setProperty('externalSearch', v); }
|
|
1445
1453
|
get clearable() { return this.getProperty('clearable'); }
|
|
1446
1454
|
set clearable(v) { this.setProperty('clearable', v); }
|
|
1455
|
+
get loading() { return this.getProperty('loading'); }
|
|
1456
|
+
set loading(v) { this.setProperty('loading', v); }
|
|
1447
1457
|
get size() { return this.getProperty('size'); }
|
|
1448
1458
|
set size(v) { this.setProperty('size', v); }
|
|
1449
1459
|
get flavor() { return this.getProperty('flavor'); }
|
|
@@ -1543,6 +1553,11 @@ TyDropdown.properties = {
|
|
|
1543
1553
|
return 0;
|
|
1544
1554
|
return Math.max(0, Math.min(5000, num));
|
|
1545
1555
|
}
|
|
1556
|
+
},
|
|
1557
|
+
loading: {
|
|
1558
|
+
type: 'boolean',
|
|
1559
|
+
visual: true,
|
|
1560
|
+
default: false
|
|
1546
1561
|
}
|
|
1547
1562
|
};
|
|
1548
1563
|
// Register the custom element
|