@prolibu-suite/cobalt-core 0.11.1 → 0.11.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/custom-elements.json +113 -34
- package/dist/cjs/co-button.cjs.entry.js +1 -1
- package/dist/cjs/co-chip_2.cjs.entry.js +1 -1
- package/dist/cjs/co-document-editor.cjs.entry.js +1 -1
- package/dist/cjs/co-modal.cjs.entry.js +27 -1
- package/dist/cjs/co-overlay.cjs.entry.js +205 -34
- package/dist/cjs/co-rich-text-editor.cjs.entry.js +2 -2
- package/dist/cjs/co-rich-text-viewer.cjs.entry.js +1 -1
- package/dist/cjs/cobalt.cjs.js +1 -1
- package/dist/cjs/{index-oMHzCXm6.js → index-BbSD1Eyw.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{pagination-DV43TRj9.js → pagination-S2sSAgdl.js} +26 -2
- package/dist/cobalt/cobalt.esm.js +1 -1
- package/dist/cobalt/{p-d6e7c258.entry.js → p-02ff847e.entry.js} +1 -1
- package/dist/cobalt/{p-87e62e2b.entry.js → p-12914c0a.entry.js} +1 -1
- package/dist/cobalt/p-38eb2615.entry.js +1 -0
- package/dist/cobalt/{p-47eca182.entry.js → p-6c7e423c.entry.js} +1 -1
- package/dist/cobalt/p-93063876.entry.js +1 -0
- package/dist/cobalt/{p-RVQJEYxa.js → p-Ch-Tygdb.js} +1 -1
- package/dist/cobalt/p-DGLDAl09.js +1 -0
- package/dist/cobalt/{p-3b6efb79.entry.js → p-bb7bbe70.entry.js} +1 -1
- package/dist/cobalt/p-efd3e0de.entry.js +1 -0
- package/dist/collection/components/co-autocomplete/co-autocomplete.js +1 -1
- package/dist/collection/components/co-avatar-group/co-avatar-group.js +1 -1
- package/dist/collection/components/co-button/co-button.css +15 -0
- package/dist/collection/components/co-checkbox-group/co-checkbox-group.js +1 -1
- package/dist/collection/components/co-chip/co-chip.css +16 -11
- package/dist/collection/components/co-color-area/co-color-area.js +2 -2
- package/dist/collection/components/co-color-slider/co-color-slider.js +1 -1
- package/dist/collection/components/co-combobox/co-combobox.js +1 -1
- package/dist/collection/components/co-command-search/co-command-search.js +1 -1
- package/dist/collection/components/co-data-table/co-data-table.js +1 -1
- package/dist/collection/components/co-date-range-picker/co-date-range-picker.js +2 -2
- package/dist/collection/components/co-document-editor/co-document-editor.js +5 -5
- package/dist/collection/components/co-modal/co-modal.js +68 -1
- package/dist/collection/components/co-overlay/co-overlay.css +7 -0
- package/dist/collection/components/co-overlay/co-overlay.js +130 -26
- package/dist/collection/components/co-overlay/focusTrap.js +111 -3
- package/dist/collection/components/co-popover/co-popover.js +1 -1
- package/dist/collection/components/co-radio-group/co-radio-group.js +1 -1
- package/dist/collection/components/co-ref-field/co-ref-field.js +4 -4
- package/dist/collection/components/co-segmented-bar/co-segmented-bar.js +1 -1
- package/dist/collection/components/co-select/co-select.js +1 -1
- package/dist/collection/components/co-sidebar-nav/co-sidebar-nav.js +1 -1
- package/dist/collection/components/co-toast/co-toast.js +2 -2
- package/dist/collection/components/co-transfer-list/co-transfer-list.js +1 -1
- package/dist/collection/components/co-tree-item/co-tree-item.js +2 -2
- package/dist/components/co-autocomplete.js +1 -1
- package/dist/components/co-button.js +1 -1
- package/dist/components/co-chip.js +1 -1
- package/dist/components/co-column-picker.js +1 -1
- package/dist/components/co-combobox.js +1 -1
- package/dist/components/co-command-search.js +1 -1
- package/dist/components/co-data-table.js +1 -1
- package/dist/components/co-date-picker.js +1 -1
- package/dist/components/co-date-range-picker.js +1 -1
- package/dist/components/co-date-range.js +1 -1
- package/dist/components/co-date-time-picker.js +1 -1
- package/dist/components/co-document-editor.js +1 -1
- package/dist/components/co-drawer.js +1 -1
- package/dist/components/co-modal.js +1 -1
- package/dist/components/co-overlay.js +1 -1
- package/dist/components/co-rich-text-editor.js +1 -1
- package/dist/components/co-rich-text-viewer.js +1 -1
- package/dist/components/{p-BVdCvEza.js → p-BI_VaFsx.js} +1 -1
- package/dist/components/{p-Du8EpQb-.js → p-C_6szR7t.js} +1 -1
- package/dist/components/{p-RVQJEYxa.js → p-Ch-Tygdb.js} +1 -1
- package/dist/components/{p-zJ3pjFzW.js → p-DB8DGMc-.js} +1 -1
- package/dist/components/p-DGLDAl09.js +1 -0
- package/dist/components/{p-Hi57w2_2.js → p-DhPxNA2f.js} +1 -1
- package/dist/components/p-wUXcJGdy.js +1 -0
- package/dist/esm/co-button.entry.js +1 -1
- package/dist/esm/co-chip_2.entry.js +1 -1
- package/dist/esm/co-document-editor.entry.js +1 -1
- package/dist/esm/co-modal.entry.js +28 -2
- package/dist/esm/co-overlay.entry.js +205 -34
- package/dist/esm/co-rich-text-editor.entry.js +2 -2
- package/dist/esm/co-rich-text-viewer.entry.js +1 -1
- package/dist/esm/cobalt.js +1 -1
- package/dist/esm/{index-Cpo8HTwr.js → index-CgyOJePd.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{pagination-D9OfZUnY.js → pagination-BzrIQtrk.js} +26 -2
- package/dist/types/components/co-modal/co-modal.d.ts +23 -0
- package/dist/types/components/co-overlay/co-overlay.d.ts +29 -1
- package/dist/types/components/co-overlay/focusTrap.d.ts +24 -3
- package/dist/types/components.d.ts +21 -2
- package/package.json +4 -4
- package/dist/cobalt/p-1a5bec8c.entry.js +0 -1
- package/dist/cobalt/p-67a024dd.entry.js +0 -1
- package/dist/cobalt/p-B1JT7us1.js +0 -1
- package/dist/cobalt/p-c4c997f3.entry.js +0 -1
- package/dist/components/p-B1JT7us1.js +0 -1
- package/dist/components/p-nrwDl_gx.js +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h } from "@stencil/core";
|
|
2
2
|
import { afterEventFor } from "./overlayAfterClose";
|
|
3
3
|
import { isBackdropDismiss } from "./backdropDismiss";
|
|
4
|
-
import {
|
|
4
|
+
import { getComposedFocusables, isTopTrap, resolveInitialFocus, resolveTabIndex } from "./focusTrap";
|
|
5
5
|
/**
|
|
6
6
|
* Module-level body-scroll lock shared by every overlay instance.
|
|
7
7
|
* Ref-counted so stacked/nested overlays (e.g. a modal opened from a drawer)
|
|
@@ -28,6 +28,16 @@ function unlockBodyScroll() {
|
|
|
28
28
|
document.body.style.overflow = savedOverflow;
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
|
+
/**
|
|
32
|
+
* Pila de trampas de foco ABIERTAS, compartida por todas las instancias (como el
|
|
33
|
+
* scroll lock). Todas escuchan el keydown de document: con un confirm encima de
|
|
34
|
+
* un modal, las dos movían el foco en el mismo Tab. Solo la capa más reciente
|
|
35
|
+
* (`isTopTrap`) maneja Tab y el foco inicial.
|
|
36
|
+
*/
|
|
37
|
+
const trapStack = [];
|
|
38
|
+
let trapSeq = 0;
|
|
39
|
+
/** Clase del div mientras dura el re-apilado de `bringToFront()` (ver co-overlay.css). */
|
|
40
|
+
const REFRONT_CLASS = 'co-overlay--refront';
|
|
31
41
|
function nextFrame(cb) {
|
|
32
42
|
if (typeof requestAnimationFrame === 'function')
|
|
33
43
|
requestAnimationFrame(cb);
|
|
@@ -53,6 +63,11 @@ export class CoOverlay {
|
|
|
53
63
|
* previously-focused element, moves focus into the overlay, cycles Tab /
|
|
54
64
|
* Shift+Tab within the slotted content, and restores focus on close.
|
|
55
65
|
* Default false → existing consumers are unchanged.
|
|
66
|
+
*
|
|
67
|
+
* The walk is COMPOSED (shadow roots + assigned slots): it reaches the
|
|
68
|
+
* consumer's content projected through a host's slots and the inner control
|
|
69
|
+
* of every co-* (a co-button's `<button>`). With several traps open, only the
|
|
70
|
+
* most recent one handles Tab.
|
|
56
71
|
*/
|
|
57
72
|
this.trapFocus = false;
|
|
58
73
|
/**
|
|
@@ -62,6 +77,10 @@ export class CoOverlay {
|
|
|
62
77
|
this.closeOnEscape = false;
|
|
63
78
|
/** Whether THIS instance currently holds a scroll lock (prevents double-count). */
|
|
64
79
|
this.hasLock = false;
|
|
80
|
+
/** Identidad de esta instancia en `trapStack`. */
|
|
81
|
+
this.trapId = `co-overlay-trap-${++trapSeq}`;
|
|
82
|
+
/** Whether THIS instance is currently in `trapStack` (prevents double push). */
|
|
83
|
+
this.trapping = false;
|
|
65
84
|
// Origen de la pulsación en curso (ver isBackdropDismiss): un drag que
|
|
66
85
|
// empieza dentro del contenido y suelta en el fondo NO es un cierre —el
|
|
67
86
|
// navegador despacha ese `click` al ancestro común, el propio scrim—, ni
|
|
@@ -103,27 +122,55 @@ export class CoOverlay {
|
|
|
103
122
|
else
|
|
104
123
|
this.releaseLock();
|
|
105
124
|
this.syncPopover();
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
this.restoreFocus();
|
|
111
|
-
}
|
|
125
|
+
this.syncTrap();
|
|
126
|
+
}
|
|
127
|
+
onTrapFocusChange() {
|
|
128
|
+
this.syncTrap();
|
|
112
129
|
}
|
|
113
130
|
componentDidLoad() {
|
|
114
131
|
// Handle the case where the overlay mounts already open.
|
|
115
132
|
if (this.open)
|
|
116
133
|
this.acquireLock();
|
|
117
134
|
this.syncPopover();
|
|
118
|
-
|
|
119
|
-
this.captureAndFocus();
|
|
135
|
+
this.syncTrap();
|
|
120
136
|
}
|
|
121
137
|
disconnectedCallback() {
|
|
122
138
|
// Safety: never leave the body locked if removed while open.
|
|
123
139
|
this.releaseLock();
|
|
124
|
-
// Safety: return focus if
|
|
125
|
-
|
|
126
|
-
|
|
140
|
+
// Safety: leave the trap stack and return focus if removed while trapping.
|
|
141
|
+
this.releaseTrap();
|
|
142
|
+
}
|
|
143
|
+
/**
|
|
144
|
+
* Re-promueve el scrim al TOPE del top layer (QA 2026-09-24, «Generar
|
|
145
|
+
* contrato»): un drawer abierto DESPUÉS de un modal pintaba encima, porque en
|
|
146
|
+
* el top layer gana el último promovido y no hay z-index que lo corrija.
|
|
147
|
+
* `hidePopover()` + `showPopover()` lo vuelven a meter último.
|
|
148
|
+
*
|
|
149
|
+
* No es un cierre: no emite `coClose` / `coAfterClose` / `coAfterOpen`, no
|
|
150
|
+
* toca `open` ni el scroll lock, y no re-anima la entrada (la clase
|
|
151
|
+
* `co-overlay--refront` anula la transición durante el re-show y se retira en
|
|
152
|
+
* el frame siguiente). Tampoco mueve el foco: si el re-show dispara los
|
|
153
|
+
* «popover focusing steps» (un `[autofocus]` adentro), se devuelve a donde
|
|
154
|
+
* estaba. No-op cerrado, sin Popover API o fuera del top layer.
|
|
155
|
+
*/
|
|
156
|
+
async bringToFront() {
|
|
157
|
+
const el = this.overlayEl;
|
|
158
|
+
if (!this.open || !el || typeof el.showPopover !== 'function')
|
|
159
|
+
return;
|
|
160
|
+
if (!el.matches(':popover-open'))
|
|
161
|
+
return;
|
|
162
|
+
const active = this.deepActiveElement();
|
|
163
|
+
el.classList.add(REFRONT_CLASS);
|
|
164
|
+
try {
|
|
165
|
+
el.hidePopover();
|
|
166
|
+
el.showPopover();
|
|
167
|
+
}
|
|
168
|
+
catch (_a) {
|
|
169
|
+
/* desconectado entre medio: no hay nada que re-apilar */
|
|
170
|
+
}
|
|
171
|
+
if (active && active.isConnected && this.deepActiveElement() !== active)
|
|
172
|
+
active.focus({ preventScroll: true });
|
|
173
|
+
nextFrame(() => el.classList.remove(REFRONT_CLASS));
|
|
127
174
|
}
|
|
128
175
|
acquireLock() {
|
|
129
176
|
if (this.hasLock)
|
|
@@ -161,19 +208,43 @@ export class CoOverlay {
|
|
|
161
208
|
/* not connected yet, or already in the desired state */
|
|
162
209
|
}
|
|
163
210
|
}
|
|
164
|
-
/**
|
|
211
|
+
/** La trampa está activa exactamente mientras el overlay está abierto con `trapFocus`. */
|
|
212
|
+
syncTrap() {
|
|
213
|
+
if (this.open && this.trapFocus)
|
|
214
|
+
this.engageTrap();
|
|
215
|
+
else
|
|
216
|
+
this.releaseTrap();
|
|
217
|
+
}
|
|
218
|
+
engageTrap() {
|
|
219
|
+
if (this.trapping)
|
|
220
|
+
return;
|
|
221
|
+
this.trapping = true;
|
|
222
|
+
trapStack.push(this.trapId);
|
|
223
|
+
this.captureAndFocus();
|
|
224
|
+
}
|
|
225
|
+
releaseTrap() {
|
|
226
|
+
if (!this.trapping)
|
|
227
|
+
return;
|
|
228
|
+
this.trapping = false;
|
|
229
|
+
const i = trapStack.indexOf(this.trapId);
|
|
230
|
+
if (i >= 0)
|
|
231
|
+
trapStack.splice(i, 1);
|
|
232
|
+
this.restoreFocus();
|
|
233
|
+
}
|
|
234
|
+
/** Record the current focus and move it into the overlay (only while trapping). */
|
|
165
235
|
captureAndFocus() {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
236
|
+
// El activo PROFUNDO: `document.activeElement` se queda en el host de un
|
|
237
|
+
// co-* (co-button), cuyo focus() no llega al <button> interno.
|
|
238
|
+
this.returnFocusEl = this.deepActiveElement();
|
|
169
239
|
// Defer so slotted content / the open transition is ready to take focus.
|
|
170
240
|
nextFrame(() => {
|
|
171
241
|
var _a;
|
|
172
|
-
|
|
242
|
+
// Una trampa abierta en el mismo frame por ENCIMA (confirm) se queda el foco.
|
|
243
|
+
if (!this.open || !this.trapping || !isTopTrap(trapStack, this.trapId))
|
|
173
244
|
return;
|
|
174
|
-
const
|
|
175
|
-
if (
|
|
176
|
-
|
|
245
|
+
const target = resolveInitialFocus(this.el);
|
|
246
|
+
if (target)
|
|
247
|
+
target.focus();
|
|
177
248
|
else
|
|
178
249
|
(_a = this.overlayEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
179
250
|
});
|
|
@@ -182,8 +253,9 @@ export class CoOverlay {
|
|
|
182
253
|
restoreFocus() {
|
|
183
254
|
const target = this.returnFocusEl;
|
|
184
255
|
this.returnFocusEl = null;
|
|
185
|
-
|
|
186
|
-
|
|
256
|
+
// Desmontado mientras el overlay estaba abierto (el paso de un wizard): no hay adónde volver.
|
|
257
|
+
if (target && target.isConnected && typeof target.focus === 'function')
|
|
258
|
+
target.focus({ preventScroll: true });
|
|
187
259
|
}
|
|
188
260
|
/** Deepest active element, descending through nested shadow roots. */
|
|
189
261
|
deepActiveElement() {
|
|
@@ -202,12 +274,16 @@ export class CoOverlay {
|
|
|
202
274
|
this.coClose.emit();
|
|
203
275
|
return;
|
|
204
276
|
}
|
|
205
|
-
if (this.
|
|
277
|
+
if (this.trapping && e.key === 'Tab' && isTopTrap(trapStack, this.trapId))
|
|
206
278
|
this.trapTab(e);
|
|
207
279
|
}
|
|
208
280
|
trapTab(e) {
|
|
209
281
|
var _a;
|
|
210
|
-
|
|
282
|
+
// Tab ya manejado por un control de adentro (co-tags-field agrega el tag, las listas de co-rich-text y
|
|
283
|
+
// CodeMirror indentan): el listener de document corre DESPUÉS y no le roba el foco.
|
|
284
|
+
if (e.defaultPrevented)
|
|
285
|
+
return;
|
|
286
|
+
const focusables = getComposedFocusables(this.el);
|
|
211
287
|
if (focusables.length === 0) {
|
|
212
288
|
// Nothing to move to — keep focus pinned to the overlay container.
|
|
213
289
|
e.preventDefault();
|
|
@@ -222,7 +298,7 @@ export class CoOverlay {
|
|
|
222
298
|
focusables[nextIndex].focus();
|
|
223
299
|
}
|
|
224
300
|
render() {
|
|
225
|
-
return (h("div", { key: '
|
|
301
|
+
return (h("div", { key: 'e18d7b0e3ebd4933a78a9f2d39af6058ce429105', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '2f29233d44de8a0cc3100cfa08233cdc10ebf352' })));
|
|
226
302
|
}
|
|
227
303
|
static get is() { return "co-overlay"; }
|
|
228
304
|
static get encapsulation() { return "shadow"; }
|
|
@@ -270,7 +346,7 @@ export class CoOverlay {
|
|
|
270
346
|
"optional": false,
|
|
271
347
|
"docs": {
|
|
272
348
|
"tags": [],
|
|
273
|
-
"text": "Opt-in accessible focus trap. When true, opening the overlay records the\npreviously-focused element, moves focus into the overlay, cycles Tab /\nShift+Tab within the slotted content, and restores focus on close.\nDefault false \u2192 existing consumers are unchanged."
|
|
349
|
+
"text": "Opt-in accessible focus trap. When true, opening the overlay records the\npreviously-focused element, moves focus into the overlay, cycles Tab /\nShift+Tab within the slotted content, and restores focus on close.\nDefault false \u2192 existing consumers are unchanged.\n\nThe walk is COMPOSED (shadow roots + assigned slots): it reaches the\nconsumer's content projected through a host's slots and the inner control\nof every co-* (a co-button's `<button>`). With several traps open, only the\nmost recent one handles Tab."
|
|
274
350
|
},
|
|
275
351
|
"getter": false,
|
|
276
352
|
"setter": false,
|
|
@@ -348,11 +424,39 @@ export class CoOverlay {
|
|
|
348
424
|
}
|
|
349
425
|
}];
|
|
350
426
|
}
|
|
427
|
+
static get methods() {
|
|
428
|
+
return {
|
|
429
|
+
"bringToFront": {
|
|
430
|
+
"complexType": {
|
|
431
|
+
"signature": "() => Promise<void>",
|
|
432
|
+
"parameters": [],
|
|
433
|
+
"references": {
|
|
434
|
+
"Promise": {
|
|
435
|
+
"location": "global",
|
|
436
|
+
"id": "global::Promise"
|
|
437
|
+
},
|
|
438
|
+
"HTMLElement": {
|
|
439
|
+
"location": "global",
|
|
440
|
+
"id": "global::HTMLElement"
|
|
441
|
+
}
|
|
442
|
+
},
|
|
443
|
+
"return": "Promise<void>"
|
|
444
|
+
},
|
|
445
|
+
"docs": {
|
|
446
|
+
"text": "Re-promueve el scrim al TOPE del top layer (QA 2026-09-24, \u00ABGenerar\ncontrato\u00BB): un drawer abierto DESPU\u00C9S de un modal pintaba encima, porque en\nel top layer gana el \u00FAltimo promovido y no hay z-index que lo corrija.\n`hidePopover()` + `showPopover()` lo vuelven a meter \u00FAltimo.\n\nNo es un cierre: no emite `coClose` / `coAfterClose` / `coAfterOpen`, no\ntoca `open` ni el scroll lock, y no re-anima la entrada (la clase\n`co-overlay--refront` anula la transici\u00F3n durante el re-show y se retira en\nel frame siguiente). Tampoco mueve el foco: si el re-show dispara los\n\u00ABpopover focusing steps\u00BB (un `[autofocus]` adentro), se devuelve a donde\nestaba. No-op cerrado, sin Popover API o fuera del top layer.",
|
|
447
|
+
"tags": []
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
};
|
|
451
|
+
}
|
|
351
452
|
static get elementRef() { return "el"; }
|
|
352
453
|
static get watchers() {
|
|
353
454
|
return [{
|
|
354
455
|
"propName": "open",
|
|
355
456
|
"methodName": "onOpenChange"
|
|
457
|
+
}, {
|
|
458
|
+
"propName": "trapFocus",
|
|
459
|
+
"methodName": "onTrapFocusChange"
|
|
356
460
|
}];
|
|
357
461
|
}
|
|
358
462
|
static get listeners() {
|
|
@@ -40,9 +40,13 @@ export function resolveTabIndex(count, activeIndex, shiftKey) {
|
|
|
40
40
|
return activeIndex === -1 || activeIndex >= count - 1 ? 0 : activeIndex + 1;
|
|
41
41
|
}
|
|
42
42
|
/**
|
|
43
|
-
* Collect the tabbable elements
|
|
44
|
-
*
|
|
45
|
-
*
|
|
43
|
+
* Collect the tabbable elements in the overlay's light DOM, skipping hidden /
|
|
44
|
+
* aria-hidden ones.
|
|
45
|
+
*
|
|
46
|
+
* Kept for compatibility only — co-overlay no longer uses it: it cannot see past
|
|
47
|
+
* a shadow root, and co-overlay lives INSIDE co-modal's shadow, so its light DOM
|
|
48
|
+
* is the modal frame (the ✕) and never the consumer's slotted content nor the
|
|
49
|
+
* inner `<button>` of a co-button. Use `getComposedFocusables`.
|
|
46
50
|
*/
|
|
47
51
|
export function getFocusableElements(root) {
|
|
48
52
|
const nodes = Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR));
|
|
@@ -51,3 +55,107 @@ export function getFocusableElements(root) {
|
|
|
51
55
|
// offsetParent is null for display:none; getClientRects covers position:fixed.
|
|
52
56
|
(el.offsetParent !== null || el.getClientRects().length > 0));
|
|
53
57
|
}
|
|
58
|
+
// ── Recorrido compuesto (QA 2026-09-24, «Generar contrato» de contratos V2) ──
|
|
59
|
+
// El foco nunca entraba ni quedaba atrapado en un co-modal: `getFocusableElements`
|
|
60
|
+
// solo mira el light DOM de co-overlay (el frame del modal: el ✕). El contenido
|
|
61
|
+
// del consumidor llega por DOS <slot> (el de co-overlay y el del frame) y los
|
|
62
|
+
// controles reales viven en el shadow de cada co-* (el <button> de co-button, el
|
|
63
|
+
// <input> de co-input). El recorrido sigue el árbol PLANO: baja por shadowRoots
|
|
64
|
+
// y, en cada <slot>, por sus asignados — o por su contenido por defecto si no
|
|
65
|
+
// tiene. Todo esto corre solo en el navegador (abrir la trampa / cada Tab).
|
|
66
|
+
/** Hijos en el árbol plano: el shadow del host, los asignados de un slot o los hijos. */
|
|
67
|
+
function composedChildren(el) {
|
|
68
|
+
if (el.shadowRoot)
|
|
69
|
+
return Array.from(el.shadowRoot.children);
|
|
70
|
+
if (el.tagName === 'SLOT') {
|
|
71
|
+
const assigned = el.assignedElements({ flatten: true });
|
|
72
|
+
return assigned.length ? assigned : Array.from(el.children);
|
|
73
|
+
}
|
|
74
|
+
return Array.from(el.children);
|
|
75
|
+
}
|
|
76
|
+
/** Subárbol fuera de la trampa entero: oculto a AT o inerte. */
|
|
77
|
+
function isExcludedSubtree(el) {
|
|
78
|
+
return el.getAttribute('aria-hidden') === 'true' || el.hasAttribute('inert');
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Parada de Tab: matchea el selector, no está deshabilitado, no se sacó del
|
|
82
|
+
* orden con tabindex negativo (los botones internos de un trigger co-* —clear,
|
|
83
|
+
* chips— van con `tabIndex={-1}`, y `button:not([disabled])` los matchearía
|
|
84
|
+
* igual), tiene caja (offsetParent null = display:none; getClientRects cubre
|
|
85
|
+
* position:fixed) y no es `visibility:hidden`: un acordeón o fieldset colapsado
|
|
86
|
+
* conserva la caja pero el navegador no le da el foco, y la trampa lo elegiría
|
|
87
|
+
* igual → Tab clavado (WCAG 2.1.2). Sin la API (navegador viejo, jsdom) no filtra.
|
|
88
|
+
*/
|
|
89
|
+
function isTabStop(el) {
|
|
90
|
+
var _a, _b;
|
|
91
|
+
if (!((_a = el.matches) === null || _a === void 0 ? void 0 : _a.call(el, FOCUSABLE_SELECTOR)) || el.hasAttribute('disabled'))
|
|
92
|
+
return false;
|
|
93
|
+
const tabindex = el.getAttribute('tabindex');
|
|
94
|
+
if (tabindex !== null && Number(tabindex) < 0)
|
|
95
|
+
return false;
|
|
96
|
+
if (el.offsetParent === null && el.getClientRects().length === 0)
|
|
97
|
+
return false;
|
|
98
|
+
return ((_b = el.checkVisibility) === null || _b === void 0 ? void 0 : _b.call(el, { visibilityProperty: true })) !== false;
|
|
99
|
+
}
|
|
100
|
+
/**
|
|
101
|
+
* Recorre en orden del árbol plano los descendientes compuestos de `root` (sin
|
|
102
|
+
* incluirlo) hasta que `visit` devuelve true. Poda aria-hidden / inert.
|
|
103
|
+
*/
|
|
104
|
+
function walkComposed(root, visit) {
|
|
105
|
+
const step = (node) => {
|
|
106
|
+
if (isExcludedSubtree(node))
|
|
107
|
+
return false;
|
|
108
|
+
if (visit(node))
|
|
109
|
+
return true;
|
|
110
|
+
return composedChildren(node).some(step);
|
|
111
|
+
};
|
|
112
|
+
composedChildren(root).some(step);
|
|
113
|
+
}
|
|
114
|
+
/** Primer descendiente compuesto que cumple `match`, en orden del árbol plano. */
|
|
115
|
+
function findComposed(root, match) {
|
|
116
|
+
let found = null;
|
|
117
|
+
walkComposed(root, (el) => {
|
|
118
|
+
if (!match(el))
|
|
119
|
+
return false;
|
|
120
|
+
found = el;
|
|
121
|
+
return true;
|
|
122
|
+
});
|
|
123
|
+
return found;
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* Paradas de Tab dentro de `root` en el árbol COMPUESTO (shadowRoots + slots
|
|
127
|
+
* asignados), con las mismas exclusiones que `getFocusableElements`.
|
|
128
|
+
*/
|
|
129
|
+
export function getComposedFocusables(root) {
|
|
130
|
+
const out = [];
|
|
131
|
+
walkComposed(root, (el) => {
|
|
132
|
+
if (isTabStop(el))
|
|
133
|
+
out.push(el);
|
|
134
|
+
return false;
|
|
135
|
+
});
|
|
136
|
+
return out;
|
|
137
|
+
}
|
|
138
|
+
/**
|
|
139
|
+
* Dónde cae el foco al abrir la trampa: el primer `[autofocus]` del recorrido
|
|
140
|
+
* compuesto —si es un host con shadow (`<co-input autofocus>`), su primer
|
|
141
|
+
* enfocable compuesto—; si no hay, la primera parada de Tab. `null` = nada
|
|
142
|
+
* enfocable (el llamador cae al contenedor).
|
|
143
|
+
*/
|
|
144
|
+
export function resolveInitialFocus(root) {
|
|
145
|
+
const autofocus = findComposed(root, (el) => el.hasAttribute('autofocus'));
|
|
146
|
+
if (autofocus) {
|
|
147
|
+
if (isTabStop(autofocus))
|
|
148
|
+
return autofocus;
|
|
149
|
+
const inner = autofocus.shadowRoot ? getComposedFocusables(autofocus)[0] : undefined;
|
|
150
|
+
if (inner)
|
|
151
|
+
return inner;
|
|
152
|
+
}
|
|
153
|
+
return findComposed(root, isTabStop);
|
|
154
|
+
}
|
|
155
|
+
/**
|
|
156
|
+
* Con dos trampas abiertas (un confirm sobre un modal, un modal anidado) las dos
|
|
157
|
+
* escuchan el keydown de document: solo la capa MÁS RECIENTE maneja Tab.
|
|
158
|
+
*/
|
|
159
|
+
export function isTopTrap(stack, id) {
|
|
160
|
+
return stack.length > 0 && stack[stack.length - 1] === id;
|
|
161
|
+
}
|
|
@@ -446,7 +446,7 @@ export class CoPopover {
|
|
|
446
446
|
"references": {
|
|
447
447
|
"PopoverPlacement": {
|
|
448
448
|
"location": "local",
|
|
449
|
-
"path": "/Users/agox/worktrees/cobalt-
|
|
449
|
+
"path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-popover/co-popover.tsx",
|
|
450
450
|
"id": "src/components/co-popover/co-popover.tsx::PopoverPlacement"
|
|
451
451
|
}
|
|
452
452
|
}
|
|
@@ -224,7 +224,7 @@ export class CoRadioGroup {
|
|
|
224
224
|
"references": {
|
|
225
225
|
"RadioOption": {
|
|
226
226
|
"location": "local",
|
|
227
|
-
"path": "/Users/agox/worktrees/cobalt-
|
|
227
|
+
"path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-radio-group/co-radio-group.tsx",
|
|
228
228
|
"id": "src/components/co-radio-group/co-radio-group.tsx::RadioOption"
|
|
229
229
|
}
|
|
230
230
|
}
|
|
@@ -1349,7 +1349,7 @@ export class CoRefField {
|
|
|
1349
1349
|
"references": {
|
|
1350
1350
|
"RefFieldOption": {
|
|
1351
1351
|
"location": "local",
|
|
1352
|
-
"path": "/Users/agox/worktrees/cobalt-
|
|
1352
|
+
"path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-ref-field/co-ref-field.tsx",
|
|
1353
1353
|
"id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
|
|
1354
1354
|
}
|
|
1355
1355
|
}
|
|
@@ -1490,7 +1490,7 @@ export class CoRefField {
|
|
|
1490
1490
|
"references": {
|
|
1491
1491
|
"RefFieldOption": {
|
|
1492
1492
|
"location": "local",
|
|
1493
|
-
"path": "/Users/agox/worktrees/cobalt-
|
|
1493
|
+
"path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-ref-field/co-ref-field.tsx",
|
|
1494
1494
|
"id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
|
|
1495
1495
|
}
|
|
1496
1496
|
}
|
|
@@ -1511,7 +1511,7 @@ export class CoRefField {
|
|
|
1511
1511
|
"references": {
|
|
1512
1512
|
"RefFieldOption": {
|
|
1513
1513
|
"location": "local",
|
|
1514
|
-
"path": "/Users/agox/worktrees/cobalt-
|
|
1514
|
+
"path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-ref-field/co-ref-field.tsx",
|
|
1515
1515
|
"id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
|
|
1516
1516
|
}
|
|
1517
1517
|
}
|
|
@@ -1550,7 +1550,7 @@ export class CoRefField {
|
|
|
1550
1550
|
},
|
|
1551
1551
|
"RefFieldOption": {
|
|
1552
1552
|
"location": "local",
|
|
1553
|
-
"path": "/Users/agox/worktrees/cobalt-
|
|
1553
|
+
"path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-ref-field/co-ref-field.tsx",
|
|
1554
1554
|
"id": "src/components/co-ref-field/co-ref-field.tsx::RefFieldOption"
|
|
1555
1555
|
}
|
|
1556
1556
|
},
|
|
@@ -160,7 +160,7 @@ export class CoSegmentedBar {
|
|
|
160
160
|
"references": {
|
|
161
161
|
"CoSegment": {
|
|
162
162
|
"location": "local",
|
|
163
|
-
"path": "/Users/agox/worktrees/cobalt-
|
|
163
|
+
"path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-segmented-bar/co-segmented-bar.tsx",
|
|
164
164
|
"id": "src/components/co-segmented-bar/co-segmented-bar.tsx::CoSegment"
|
|
165
165
|
}
|
|
166
166
|
}
|
|
@@ -846,7 +846,7 @@ export class CoSelect {
|
|
|
846
846
|
"references": {
|
|
847
847
|
"SelectOption": {
|
|
848
848
|
"location": "local",
|
|
849
|
-
"path": "/Users/agox/worktrees/cobalt-
|
|
849
|
+
"path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-select/co-select.tsx",
|
|
850
850
|
"id": "src/components/co-select/co-select.tsx::SelectOption"
|
|
851
851
|
}
|
|
852
852
|
}
|
|
@@ -718,7 +718,7 @@ export class CoSidebarNav {
|
|
|
718
718
|
"references": {
|
|
719
719
|
"NavigateDetail": {
|
|
720
720
|
"location": "local",
|
|
721
|
-
"path": "/Users/agox/worktrees/cobalt-
|
|
721
|
+
"path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-sidebar-nav/co-sidebar-nav.tsx",
|
|
722
722
|
"id": "src/components/co-sidebar-nav/co-sidebar-nav.tsx::NavigateDetail"
|
|
723
723
|
}
|
|
724
724
|
}
|
|
@@ -189,7 +189,7 @@ export class CoToast {
|
|
|
189
189
|
"references": {
|
|
190
190
|
"CoToastActionsLayout": {
|
|
191
191
|
"location": "local",
|
|
192
|
-
"path": "/Users/agox/worktrees/cobalt-
|
|
192
|
+
"path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-toast/co-toast.tsx",
|
|
193
193
|
"id": "src/components/co-toast/co-toast.tsx::CoToastActionsLayout"
|
|
194
194
|
}
|
|
195
195
|
}
|
|
@@ -215,7 +215,7 @@ export class CoToast {
|
|
|
215
215
|
"references": {
|
|
216
216
|
"CoToastVariant": {
|
|
217
217
|
"location": "local",
|
|
218
|
-
"path": "/Users/agox/worktrees/cobalt-
|
|
218
|
+
"path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-toast/co-toast.tsx",
|
|
219
219
|
"id": "src/components/co-toast/co-toast.tsx::CoToastVariant"
|
|
220
220
|
}
|
|
221
221
|
}
|
|
@@ -214,7 +214,7 @@ export class CoTransferList {
|
|
|
214
214
|
"references": {
|
|
215
215
|
"TransferOption": {
|
|
216
216
|
"location": "local",
|
|
217
|
-
"path": "/Users/agox/worktrees/cobalt-
|
|
217
|
+
"path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-transfer-list/co-transfer-list.tsx",
|
|
218
218
|
"id": "src/components/co-transfer-list/co-transfer-list.tsx::TransferOption"
|
|
219
219
|
}
|
|
220
220
|
}
|
|
@@ -243,7 +243,7 @@ export class CoTreeItem {
|
|
|
243
243
|
"references": {
|
|
244
244
|
"TreeItemSelection": {
|
|
245
245
|
"location": "local",
|
|
246
|
-
"path": "/Users/agox/worktrees/cobalt-
|
|
246
|
+
"path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-tree-item/co-tree-item.tsx",
|
|
247
247
|
"id": "src/components/co-tree-item/co-tree-item.tsx::TreeItemSelection"
|
|
248
248
|
}
|
|
249
249
|
}
|
|
@@ -269,7 +269,7 @@ export class CoTreeItem {
|
|
|
269
269
|
"references": {
|
|
270
270
|
"TreeItemSize": {
|
|
271
271
|
"location": "local",
|
|
272
|
-
"path": "/Users/agox/worktrees/cobalt-
|
|
272
|
+
"path": "/Users/agox/worktrees/cobalt-release-0.11.2/packages/core/src/components/co-tree-item/co-tree-item.tsx",
|
|
273
273
|
"id": "src/components/co-tree-item/co-tree-item.tsx::TreeItemSize"
|
|
274
274
|
}
|
|
275
275
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e,p as t,H as o,c,h as a}from"./index.js";import{R as i}from"./p-CWneqh4n.js";import{d as s}from"./p-VcrjNCew.js";import{d as r}from"./p-Du8EpQb-.js";import{d as l}from"./p-KK2vAKs-.js";import{d as n}from"./p-8XzG8pzY.js";import{d as p}from"./p-BH184F0X.js";import{d as h}from"./p-Cnfd6Zze.js";import{d}from"./p-9VoFSbIH.js";const u=t(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coSearch=c(this,"coSearch",7),this.coChange=c(this,"coChange",7),this.coClear=c(this,"coClear",7),this.required=!1,this.placeholder="Search…",this.disabled=!1,this.clearable=!0,this.layout="vertical",this.size="md",this.status="default",this.options="[]",this.value="",this.multiple=!1,this.loading=!1,this.minChars=1,this.searchDebounce=300,this.emptyMessage="No results",this.isOpen=!1,this.query="",this.focused=!1,this.handleInput=e=>{const t=e.target.value;this.query=t,this.debounceTimer&&clearTimeout(this.debounceTimer),t.length>=this.minChars?(this.debounceTimer=setTimeout((()=>this.coSearch.emit(t)),this.searchDebounce),this.isOpen=!0):this.isOpen=!1},this.handleFocus=()=>{this.focused=!0,this.query.length>=this.minChars&&this.parsedOptions.length>0&&(this.isOpen=!0)},this.handleClear=e=>{var t;e.stopPropagation(),this.query="",this.value=this.multiple?"[]":"",this.isOpen=!1,this.coClear.emit(),this.coChange.emit({value:this.multiple?[]:"",item:null}),null===(t=this.inputEl)||void 0===t||t.focus()},this.handleChipRemove=e=>{const t=this.selectedValues.filter((t=>t!==e));this.value=JSON.stringify(t),this.coChange.emit({value:t,item:{_id:e,label:e}})},this.handleListChange=e=>{if(null==e.value)return this.value=this.multiple?"[]":"",this.query="",this.isOpen=!1,void this.coChange.emit({value:null,item:null});this.multiple?(this.value=JSON.stringify(e.value),this.coChange.emit({value:e.value,item:e.item})):(this.value=e.value,this.query=e.item.label,this.isOpen=!1,this.coChange.emit({value:e.value,item:e.item}))},this.handleInputKeyDown=async e=>{"Escape"!==e.key?this.isOpen&&this.optionListEl&&("ArrowDown"!==e.key&&"ArrowUp"!==e.key&&"Enter"!==e.key||(e.preventDefault(),await this.optionListEl.handleKey(e))):this.isOpen=!1}}get parsedOptions(){let e=this.options;if("string"==typeof e)try{e=JSON.parse(e)}catch(e){return[]}return Array.isArray(e)?e.map((e=>"string"==typeof e?{label:e,value:e}:e)):[]}get selectedValues(){if(this.multiple){if("string"==typeof this.value)try{return JSON.parse(this.value)}catch(e){return this.value?[this.value]:[]}return this.value}return"string"==typeof this.value&&this.value?[this.value]:[]}get hasValue(){return this.selectedValues.length>0}get statusIcon(){return{error:"warning-circle",success:"check-circle",warning:"warning",info:"info"}[this.status]||null}componentWillLoad(){this.syncQueryFromValue()}onOptionsChange(){this.query.length>=this.minChars&&(this.isOpen=!0),this.focused||this.syncQueryFromValue()}onValueChange(){this.syncQueryFromValue()}syncQueryFromValue(){if(!this.multiple&&"string"==typeof this.value&&this.value){const e=this.parsedOptions.find((e=>e.value===this.value));this.query=e?e.label:this.value}else this.multiple||this.value||(this.query="")}handleDocumentClick(e){this.el.contains(e.target)||(this.isOpen=!1,this.focused=!1)}render(){const e=this.parsedOptions,t=this.selectedValues;return a("div",{key:"02fe5e70777f1a39038af676c76032ae1fbecbc8",class:{"co-autocomplete":!0,"co-autocomplete--disabled":this.disabled,"co-autocomplete--focused":this.focused,["co-autocomplete--"+this.size]:!0,["co-autocomplete--"+this.status]:"default"!==this.status}},(this.label||this.secondaryLabel)&&a("div",{key:"a9237e72752d5d3921d70cb2d63a160625db7e62",class:"co-autocomplete__labels"},this.label&&a("label",{key:"f1284520b961bf6598e4b9c8a3d943b8b1aa847f",class:"co-autocomplete__label"},this.label,a(i,{key:"6c40530c3e2dca2b3adef8a8ce00c256b7070b48",required:this.required})),this.secondaryLabel&&a("span",{key:"37a0de4ba199f1bc6503543e18261623642c00cf",class:"co-autocomplete__secondary-label"},this.secondaryLabel)),a("div",{key:"30ff3eacbf9634085b212135356c3edbef6e8df9",class:"co-autocomplete__field"},this.iconLeft&&a("co-icon",{key:"3b8c564aae36e7db59c39fcc31fda7d98f55fae8",name:this.iconLeft,size:16,class:"co-autocomplete__icon"}),this.multiple&&t.length>0&&a("div",{key:"df7f0b08d2b456a048368f80c828ee83502b0a20",class:"co-autocomplete__chips"},t.map((e=>{const t=this.parsedOptions.find((t=>t.value===e));return a("co-chip",{label:t?t.label:e,size:"small",removable:!0,onCoRemove:()=>this.handleChipRemove(e)})}))),a("input",{key:"e2d9cfa48001c20aa9e8a4ef5800135172b2aff9",ref:e=>this.inputEl=e,class:"co-autocomplete__input",type:"text",value:this.query,placeholder:this.placeholder,disabled:this.disabled,onInput:this.handleInput,onFocus:this.handleFocus,onKeyDown:this.handleInputKeyDown}),this.loading&&a("div",{key:"e58449cb033553a123f3c2b1daa9b9c62a571273",class:"co-autocomplete__spinner"}),this.clearable&&(this.hasValue||this.query)&&!this.disabled&&a("button",{key:"ea8021e0807cd0eece9933f84772f5f497d2a63c",class:"co-autocomplete__clear",type:"button",tabIndex:-1,onClick:this.handleClear,"aria-label":"Clear"},a("co-icon",{key:"67a2f961d0ece0178811aa04fd9e5a082976ef6a",name:"x-circle",size:16,weight:"fill"}))),this.isOpen&&a("div",{key:"562cc6f307edd60c361c60974d0423550d8f681a",class:"co-autocomplete__dropdown"},a("co-option-list",{key:"3dec3da0d38adb8986b57960c74b697ffbc211dd",ref:e=>this.optionListEl=e,items:JSON.stringify(e.map((e=>({_id:e.value,label:e.label,icon:e.icon,disabled:e.disabled})))),value:this.multiple?JSON.stringify(this.selectedValues):this.selectedValues[0]||"",multiple:this.multiple,selectedAffordance:"check",virtual:!0,loading:this.loading,emptyMessage:this.emptyMessage,onCoChange:e=>this.handleListChange(e.detail)})),this.helperText&&a("div",{key:"5c21f62defe09b0160aeec8eaeaa881408dbe964",class:"co-autocomplete__helper co-autocomplete__helper--"+this.status},this.statusIcon&&a("co-icon",{key:"166ccdb5f1e308bb0212c473881bb36a33a8d2e4",name:this.statusIcon,size:14,weight:"fill",class:"co-autocomplete__helper-icon"}),a("span",{key:"bf4b038b665c269484b3bf841b19c92d5b0ceb27",class:"co-autocomplete__helper-text"},this.helperText)))}get el(){return this}static get watchers(){return{options:[{onOptionsChange:0}],value:[{onValueChange:0}]}}static get style(){return":host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-autocomplete{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-autocomplete__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-autocomplete__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-autocomplete__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-autocomplete--disabled .co-autocomplete__label,.co-autocomplete--disabled .co-autocomplete__secondary-label{color:var(--co-semantic-text-disabled)}.co-autocomplete__field{display:flex;align-items:center;flex-wrap:wrap;gap:var(--co-spacing-xs);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-autocomplete--s .co-autocomplete__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-autocomplete--sm .co-autocomplete__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-autocomplete--lg .co-autocomplete__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-autocomplete--focused .co-autocomplete__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-autocomplete--disabled .co-autocomplete__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-autocomplete--error .co-autocomplete__field{border-color:var(--co-semantic-status-error)}.co-autocomplete--success .co-autocomplete__field{border-color:var(--co-semantic-status-success)}.co-autocomplete--warning .co-autocomplete__field{border-color:var(--co-color-status-review)}.co-autocomplete--info .co-autocomplete__field{border-color:var(--co-semantic-status-info)}.co-autocomplete__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-autocomplete__chips{display:flex;flex-wrap:wrap;gap:var(--co-spacing-xs)}.co-autocomplete__input{flex:1;min-width:80px;border:none;background:transparent;color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;line-height:1;padding:0;outline:none}.co-autocomplete__input::placeholder{color:var(--co-semantic-text-muted)}.co-autocomplete--disabled .co-autocomplete__input{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-autocomplete__clear{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-autocomplete__clear:hover{color:var(--co-semantic-text-default)}.co-autocomplete__spinner{width:16px;height:16px;border:2px solid var(--co-semantic-border-subtle);border-top-color:var(--co-semantic-text-default);border-radius:var(--co-border-radius-full);animation:co-spin 0.6s linear infinite;flex-shrink:0}@keyframes co-spin{to{transform:rotate(360deg)}}.co-autocomplete__dropdown{position:absolute;top:100%;left:0;right:0;z-index:100;margin-top:var(--co-spacing-xs);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 16px rgba(31, 28, 27, 0.08);overflow:hidden;}.co-autocomplete__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-autocomplete__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-autocomplete__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-autocomplete__helper--error .co-autocomplete__helper-icon,.co-autocomplete__helper--error .co-autocomplete__helper-text{color:var(--co-semantic-status-error)}.co-autocomplete__helper--success .co-autocomplete__helper-icon,.co-autocomplete__helper--success .co-autocomplete__helper-text{color:var(--co-semantic-status-success)}.co-autocomplete__helper--warning .co-autocomplete__helper-icon,.co-autocomplete__helper--warning .co-autocomplete__helper-text{color:var(--co-color-status-review)}.co-autocomplete__helper--info .co-autocomplete__helper-icon,.co-autocomplete__helper--info .co-autocomplete__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-autocomplete{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-autocomplete__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-autocomplete__label{white-space:normal}:host([layout='horizontal']) .co-autocomplete>:not(.co-autocomplete__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}"}},[1,"co-autocomplete",{label:[1],required:[4],secondaryLabel:[1,"secondary-label"],placeholder:[1],disabled:[4],iconLeft:[1,"icon-left"],clearable:[4],helperText:[1,"helper-text"],layout:[513],size:[513],status:[1],options:[1],value:[1025],multiple:[4],loading:[4],minChars:[2,"min-chars"],searchDebounce:[2,"search-debounce"],emptyMessage:[1,"empty-message"],isOpen:[32],query:[32],focused:[32]},[[4,"click","handleDocumentClick"]],{options:[{onOptionsChange:0}],value:[{onValueChange:0}]}]);function m(){"undefined"!=typeof customElements&&["co-autocomplete","co-avatar","co-chip","co-icon","co-kbd","co-loader","co-option-list","co-tooltip"].forEach((t=>{switch(t){case"co-autocomplete":customElements.get(e(t))||customElements.define(e(t),u);break;case"co-avatar":customElements.get(e(t))||s();break;case"co-chip":customElements.get(e(t))||r();break;case"co-icon":customElements.get(e(t))||l();break;case"co-kbd":customElements.get(e(t))||n();break;case"co-loader":customElements.get(e(t))||p();break;case"co-option-list":customElements.get(e(t))||h();break;case"co-tooltip":customElements.get(e(t))||d()}}))}m();const f=u,b=m;export{f as CoAutocomplete,b as defineCustomElement}
|
|
1
|
+
import{t as e,p as t,H as o,c,h as a}from"./index.js";import{R as i}from"./p-CWneqh4n.js";import{d as s}from"./p-VcrjNCew.js";import{d as r}from"./p-C_6szR7t.js";import{d as l}from"./p-KK2vAKs-.js";import{d as n}from"./p-8XzG8pzY.js";import{d as p}from"./p-BH184F0X.js";import{d as h}from"./p-Cnfd6Zze.js";import{d}from"./p-9VoFSbIH.js";const u=t(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coSearch=c(this,"coSearch",7),this.coChange=c(this,"coChange",7),this.coClear=c(this,"coClear",7),this.required=!1,this.placeholder="Search…",this.disabled=!1,this.clearable=!0,this.layout="vertical",this.size="md",this.status="default",this.options="[]",this.value="",this.multiple=!1,this.loading=!1,this.minChars=1,this.searchDebounce=300,this.emptyMessage="No results",this.isOpen=!1,this.query="",this.focused=!1,this.handleInput=e=>{const t=e.target.value;this.query=t,this.debounceTimer&&clearTimeout(this.debounceTimer),t.length>=this.minChars?(this.debounceTimer=setTimeout((()=>this.coSearch.emit(t)),this.searchDebounce),this.isOpen=!0):this.isOpen=!1},this.handleFocus=()=>{this.focused=!0,this.query.length>=this.minChars&&this.parsedOptions.length>0&&(this.isOpen=!0)},this.handleClear=e=>{var t;e.stopPropagation(),this.query="",this.value=this.multiple?"[]":"",this.isOpen=!1,this.coClear.emit(),this.coChange.emit({value:this.multiple?[]:"",item:null}),null===(t=this.inputEl)||void 0===t||t.focus()},this.handleChipRemove=e=>{const t=this.selectedValues.filter((t=>t!==e));this.value=JSON.stringify(t),this.coChange.emit({value:t,item:{_id:e,label:e}})},this.handleListChange=e=>{if(null==e.value)return this.value=this.multiple?"[]":"",this.query="",this.isOpen=!1,void this.coChange.emit({value:null,item:null});this.multiple?(this.value=JSON.stringify(e.value),this.coChange.emit({value:e.value,item:e.item})):(this.value=e.value,this.query=e.item.label,this.isOpen=!1,this.coChange.emit({value:e.value,item:e.item}))},this.handleInputKeyDown=async e=>{"Escape"!==e.key?this.isOpen&&this.optionListEl&&("ArrowDown"!==e.key&&"ArrowUp"!==e.key&&"Enter"!==e.key||(e.preventDefault(),await this.optionListEl.handleKey(e))):this.isOpen=!1}}get parsedOptions(){let e=this.options;if("string"==typeof e)try{e=JSON.parse(e)}catch(e){return[]}return Array.isArray(e)?e.map((e=>"string"==typeof e?{label:e,value:e}:e)):[]}get selectedValues(){if(this.multiple){if("string"==typeof this.value)try{return JSON.parse(this.value)}catch(e){return this.value?[this.value]:[]}return this.value}return"string"==typeof this.value&&this.value?[this.value]:[]}get hasValue(){return this.selectedValues.length>0}get statusIcon(){return{error:"warning-circle",success:"check-circle",warning:"warning",info:"info"}[this.status]||null}componentWillLoad(){this.syncQueryFromValue()}onOptionsChange(){this.query.length>=this.minChars&&(this.isOpen=!0),this.focused||this.syncQueryFromValue()}onValueChange(){this.syncQueryFromValue()}syncQueryFromValue(){if(!this.multiple&&"string"==typeof this.value&&this.value){const e=this.parsedOptions.find((e=>e.value===this.value));this.query=e?e.label:this.value}else this.multiple||this.value||(this.query="")}handleDocumentClick(e){this.el.contains(e.target)||(this.isOpen=!1,this.focused=!1)}render(){const e=this.parsedOptions,t=this.selectedValues;return a("div",{key:"02fe5e70777f1a39038af676c76032ae1fbecbc8",class:{"co-autocomplete":!0,"co-autocomplete--disabled":this.disabled,"co-autocomplete--focused":this.focused,["co-autocomplete--"+this.size]:!0,["co-autocomplete--"+this.status]:"default"!==this.status}},(this.label||this.secondaryLabel)&&a("div",{key:"a9237e72752d5d3921d70cb2d63a160625db7e62",class:"co-autocomplete__labels"},this.label&&a("label",{key:"f1284520b961bf6598e4b9c8a3d943b8b1aa847f",class:"co-autocomplete__label"},this.label,a(i,{key:"6c40530c3e2dca2b3adef8a8ce00c256b7070b48",required:this.required})),this.secondaryLabel&&a("span",{key:"37a0de4ba199f1bc6503543e18261623642c00cf",class:"co-autocomplete__secondary-label"},this.secondaryLabel)),a("div",{key:"30ff3eacbf9634085b212135356c3edbef6e8df9",class:"co-autocomplete__field"},this.iconLeft&&a("co-icon",{key:"3b8c564aae36e7db59c39fcc31fda7d98f55fae8",name:this.iconLeft,size:16,class:"co-autocomplete__icon"}),this.multiple&&t.length>0&&a("div",{key:"df7f0b08d2b456a048368f80c828ee83502b0a20",class:"co-autocomplete__chips"},t.map((e=>{const t=this.parsedOptions.find((t=>t.value===e));return a("co-chip",{label:t?t.label:e,size:"small",removable:!0,onCoRemove:()=>this.handleChipRemove(e)})}))),a("input",{key:"e2d9cfa48001c20aa9e8a4ef5800135172b2aff9",ref:e=>this.inputEl=e,class:"co-autocomplete__input",type:"text",value:this.query,placeholder:this.placeholder,disabled:this.disabled,onInput:this.handleInput,onFocus:this.handleFocus,onKeyDown:this.handleInputKeyDown}),this.loading&&a("div",{key:"e58449cb033553a123f3c2b1daa9b9c62a571273",class:"co-autocomplete__spinner"}),this.clearable&&(this.hasValue||this.query)&&!this.disabled&&a("button",{key:"ea8021e0807cd0eece9933f84772f5f497d2a63c",class:"co-autocomplete__clear",type:"button",tabIndex:-1,onClick:this.handleClear,"aria-label":"Clear"},a("co-icon",{key:"67a2f961d0ece0178811aa04fd9e5a082976ef6a",name:"x-circle",size:16,weight:"fill"}))),this.isOpen&&a("div",{key:"562cc6f307edd60c361c60974d0423550d8f681a",class:"co-autocomplete__dropdown"},a("co-option-list",{key:"3dec3da0d38adb8986b57960c74b697ffbc211dd",ref:e=>this.optionListEl=e,items:JSON.stringify(e.map((e=>({_id:e.value,label:e.label,icon:e.icon,disabled:e.disabled})))),value:this.multiple?JSON.stringify(this.selectedValues):this.selectedValues[0]||"",multiple:this.multiple,selectedAffordance:"check",virtual:!0,loading:this.loading,emptyMessage:this.emptyMessage,onCoChange:e=>this.handleListChange(e.detail)})),this.helperText&&a("div",{key:"5c21f62defe09b0160aeec8eaeaa881408dbe964",class:"co-autocomplete__helper co-autocomplete__helper--"+this.status},this.statusIcon&&a("co-icon",{key:"166ccdb5f1e308bb0212c473881bb36a33a8d2e4",name:this.statusIcon,size:14,weight:"fill",class:"co-autocomplete__helper-icon"}),a("span",{key:"bf4b038b665c269484b3bf841b19c92d5b0ceb27",class:"co-autocomplete__helper-text"},this.helperText)))}get el(){return this}static get watchers(){return{options:[{onOptionsChange:0}],value:[{onValueChange:0}]}}static get style(){return":host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-autocomplete{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-autocomplete__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-autocomplete__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-autocomplete__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-autocomplete--disabled .co-autocomplete__label,.co-autocomplete--disabled .co-autocomplete__secondary-label{color:var(--co-semantic-text-disabled)}.co-autocomplete__field{display:flex;align-items:center;flex-wrap:wrap;gap:var(--co-spacing-xs);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-autocomplete--s .co-autocomplete__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-autocomplete--sm .co-autocomplete__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-autocomplete--lg .co-autocomplete__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-autocomplete--focused .co-autocomplete__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-autocomplete--disabled .co-autocomplete__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-autocomplete--error .co-autocomplete__field{border-color:var(--co-semantic-status-error)}.co-autocomplete--success .co-autocomplete__field{border-color:var(--co-semantic-status-success)}.co-autocomplete--warning .co-autocomplete__field{border-color:var(--co-color-status-review)}.co-autocomplete--info .co-autocomplete__field{border-color:var(--co-semantic-status-info)}.co-autocomplete__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-autocomplete__chips{display:flex;flex-wrap:wrap;gap:var(--co-spacing-xs)}.co-autocomplete__input{flex:1;min-width:80px;border:none;background:transparent;color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;line-height:1;padding:0;outline:none}.co-autocomplete__input::placeholder{color:var(--co-semantic-text-muted)}.co-autocomplete--disabled .co-autocomplete__input{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-autocomplete__clear{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-autocomplete__clear:hover{color:var(--co-semantic-text-default)}.co-autocomplete__spinner{width:16px;height:16px;border:2px solid var(--co-semantic-border-subtle);border-top-color:var(--co-semantic-text-default);border-radius:var(--co-border-radius-full);animation:co-spin 0.6s linear infinite;flex-shrink:0}@keyframes co-spin{to{transform:rotate(360deg)}}.co-autocomplete__dropdown{position:absolute;top:100%;left:0;right:0;z-index:100;margin-top:var(--co-spacing-xs);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 16px rgba(31, 28, 27, 0.08);overflow:hidden;}.co-autocomplete__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-autocomplete__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-autocomplete__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-autocomplete__helper--error .co-autocomplete__helper-icon,.co-autocomplete__helper--error .co-autocomplete__helper-text{color:var(--co-semantic-status-error)}.co-autocomplete__helper--success .co-autocomplete__helper-icon,.co-autocomplete__helper--success .co-autocomplete__helper-text{color:var(--co-semantic-status-success)}.co-autocomplete__helper--warning .co-autocomplete__helper-icon,.co-autocomplete__helper--warning .co-autocomplete__helper-text{color:var(--co-color-status-review)}.co-autocomplete__helper--info .co-autocomplete__helper-icon,.co-autocomplete__helper--info .co-autocomplete__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-autocomplete{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-autocomplete__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-autocomplete__label{white-space:normal}:host([layout='horizontal']) .co-autocomplete>:not(.co-autocomplete__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}"}},[1,"co-autocomplete",{label:[1],required:[4],secondaryLabel:[1,"secondary-label"],placeholder:[1],disabled:[4],iconLeft:[1,"icon-left"],clearable:[4],helperText:[1,"helper-text"],layout:[513],size:[513],status:[1],options:[1],value:[1025],multiple:[4],loading:[4],minChars:[2,"min-chars"],searchDebounce:[2,"search-debounce"],emptyMessage:[1,"empty-message"],isOpen:[32],query:[32],focused:[32]},[[4,"click","handleDocumentClick"]],{options:[{onOptionsChange:0}],value:[{onValueChange:0}]}]);function m(){"undefined"!=typeof customElements&&["co-autocomplete","co-avatar","co-chip","co-icon","co-kbd","co-loader","co-option-list","co-tooltip"].forEach((t=>{switch(t){case"co-autocomplete":customElements.get(e(t))||customElements.define(e(t),u);break;case"co-avatar":customElements.get(e(t))||s();break;case"co-chip":customElements.get(e(t))||r();break;case"co-icon":customElements.get(e(t))||l();break;case"co-kbd":customElements.get(e(t))||n();break;case"co-loader":customElements.get(e(t))||p();break;case"co-option-list":customElements.get(e(t))||h();break;case"co-tooltip":customElements.get(e(t))||d()}}))}m();const f=u,b=m;export{f as CoAutocomplete,b as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{C as o,d as s}from"./p-
|
|
1
|
+
import{C as o,d as s}from"./p-DhPxNA2f.js";const p=o,r=s;export{p as CoButton,r as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{C as
|
|
1
|
+
import{C as s,d as o}from"./p-C_6szR7t.js";const t=s,p=o;export{t as CoChip,p as defineCustomElement}
|