@prolibu-suite/cobalt-core 0.10.0 → 0.10.1
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 +395 -29
- package/dist/cjs/co-accordion.cjs.entry.js +4 -4
- package/dist/cjs/co-action-bar.cjs.entry.js +1 -1
- package/dist/cjs/co-audio-player.cjs.entry.js +82 -12
- package/dist/cjs/co-avatar.cjs.entry.js +72 -0
- package/dist/cjs/co-button.cjs.entry.js +1 -1
- package/dist/cjs/co-checkbox.cjs.entry.js +3 -3
- package/dist/cjs/co-chip_2.cjs.entry.js +62 -10
- package/dist/cjs/co-color-picker.cjs.entry.js +40 -10
- package/dist/cjs/co-data-table.cjs.entry.js +82 -4
- package/dist/cjs/co-input.cjs.entry.js +6 -2
- package/dist/cjs/co-menu-item.cjs.entry.js +1 -1
- package/dist/cjs/co-modal.cjs.entry.js +7 -3
- package/dist/cjs/co-navbar.cjs.entry.js +2 -2
- package/dist/cjs/co-number-field.cjs.entry.js +3 -3
- package/dist/cjs/co-overlay.cjs.entry.js +1 -1
- package/dist/cjs/co-page-header.cjs.entry.js +1 -1
- package/dist/cjs/co-phone-field.cjs.entry.js +1 -1
- package/dist/cjs/co-progress-bar.cjs.entry.js +2 -2
- package/dist/cjs/co-progress-circle.cjs.entry.js +2 -2
- package/dist/cjs/co-provider-logo_2.cjs.entry.js +1 -1
- package/dist/cjs/co-radio.cjs.entry.js +3 -3
- package/dist/cjs/co-rating.cjs.entry.js +3 -3
- package/dist/cjs/co-ref-field.cjs.entry.js +100 -9
- package/dist/cjs/co-rich-text-editor.cjs.entry.js +3 -3
- package/dist/cjs/co-row.cjs.entry.js +2 -2
- package/dist/cjs/co-select.cjs.entry.js +4 -4
- package/dist/cjs/co-separator.cjs.entry.js +1 -1
- package/dist/cjs/co-sidebar.cjs.entry.js +2 -2
- package/dist/cjs/co-slider.cjs.entry.js +2 -2
- package/dist/cjs/co-switch.cjs.entry.js +3 -3
- package/dist/cjs/co-tab-group.cjs.entry.js +2 -2
- package/dist/cjs/co-tab.cjs.entry.js +2 -2
- package/dist/cjs/co-tags-field.cjs.entry.js +5 -5
- package/dist/cjs/co-textarea.cjs.entry.js +4 -4
- package/dist/cjs/co-time-field.cjs.entry.js +1 -1
- package/dist/cjs/co-toggle-button-group.cjs.entry.js +3 -3
- package/dist/cjs/co-toggle-button.cjs.entry.js +3 -3
- package/dist/cjs/{co-avatar_2.cjs.entry.js → co-tooltip.cjs.entry.js} +2 -70
- package/dist/cjs/co-video.cjs.entry.js +2 -2
- package/dist/cjs/cobalt.cjs.js +1 -1
- package/dist/cjs/index-MDAnKsze.js +12 -8
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cobalt/cobalt.esm.js +1 -1
- package/dist/cobalt/{p-82266f11.entry.js → p-000a15b8.entry.js} +1 -1
- package/dist/cobalt/{p-fe7e8813.entry.js → p-148d4aa6.entry.js} +1 -1
- package/dist/cobalt/p-16f8cee6.entry.js +1 -0
- package/dist/cobalt/p-239c5c5f.entry.js +1 -0
- package/dist/cobalt/{p-4d897896.entry.js → p-28764b8e.entry.js} +1 -1
- package/dist/cobalt/{p-73c6d735.entry.js → p-2a30c143.entry.js} +1 -1
- package/dist/cobalt/{p-85501c6a.entry.js → p-2f0f3bb1.entry.js} +1 -1
- package/dist/cobalt/{p-e01f9b9a.entry.js → p-2fba312b.entry.js} +1 -1
- package/dist/cobalt/p-354d5089.entry.js +1 -0
- package/dist/cobalt/{p-5298c030.entry.js → p-383a998e.entry.js} +1 -1
- package/dist/cobalt/{p-325b91b6.entry.js → p-3c4f7026.entry.js} +1 -1
- package/dist/cobalt/p-416795f5.entry.js +1 -0
- package/dist/cobalt/{p-54c987d7.entry.js → p-5a3e4c81.entry.js} +1 -1
- package/dist/cobalt/p-5adf117c.entry.js +1 -0
- package/dist/cobalt/{p-83a9a05a.entry.js → p-5ca394b1.entry.js} +1 -1
- package/dist/cobalt/{p-1a589c8e.entry.js → p-5e4973a6.entry.js} +1 -1
- package/dist/cobalt/{p-b565104d.entry.js → p-6c82a892.entry.js} +1 -1
- package/dist/cobalt/{p-83ea631d.entry.js → p-789c4b3e.entry.js} +1 -1
- package/dist/cobalt/{p-ea20f048.entry.js → p-7e8e6907.entry.js} +1 -1
- package/dist/cobalt/{p-10b82207.entry.js → p-8471abe2.entry.js} +1 -1
- package/dist/cobalt/p-8f2199ff.entry.js +1 -0
- package/dist/cobalt/p-9246e09c.entry.js +1 -0
- package/dist/cobalt/{p-eb063cc0.entry.js → p-93fe45fd.entry.js} +1 -1
- package/dist/cobalt/{p-ad33c40e.entry.js → p-95cfcb34.entry.js} +1 -1
- package/dist/cobalt/{p-bd683db3.entry.js → p-9cf738ed.entry.js} +1 -1
- package/dist/cobalt/p-a2462d7a.entry.js +1 -0
- package/dist/cobalt/p-a325ea0c.entry.js +1 -0
- package/dist/cobalt/{p-e8a4e6b0.entry.js → p-b5bba7fe.entry.js} +1 -1
- package/dist/cobalt/{p-6bf6bc3e.entry.js → p-b821d9de.entry.js} +1 -1
- package/dist/cobalt/{p-92b092db.entry.js → p-be34e447.entry.js} +1 -1
- package/dist/cobalt/p-c7d7d7f7.entry.js +1 -0
- package/dist/cobalt/{p-aae86f96.entry.js → p-d0b2c418.entry.js} +1 -1
- package/dist/cobalt/{p-50bcc76f.entry.js → p-d3344187.entry.js} +1 -1
- package/dist/cobalt/p-d375014b.entry.js +1 -0
- package/dist/cobalt/p-d9d9e8ae.entry.js +1 -0
- package/dist/cobalt/p-e371ec7a.entry.js +1 -0
- package/dist/cobalt/p-eadfd661.entry.js +1 -0
- package/dist/cobalt/p-ef301976.entry.js +1 -0
- package/dist/cobalt/{p-f68dd124.entry.js → p-fb2d1144.entry.js} +1 -1
- package/dist/collection/components/co-accordion/co-accordion.css +2 -2
- package/dist/collection/components/co-accordion/co-accordion.js +4 -4
- package/dist/collection/components/co-action-bar/co-action-bar.css +9 -2
- package/dist/collection/components/co-audio-player/co-audio-player.js +138 -12
- 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 +6 -3
- package/dist/collection/components/co-checkbox/co-checkbox.js +22 -3
- package/dist/collection/components/co-checkbox-group/co-checkbox-group.js +1 -1
- package/dist/collection/components/co-color-picker/co-color-picker.js +40 -10
- 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.css +63 -2
- package/dist/collection/components/co-data-table/co-data-table.js +59 -4
- package/dist/collection/components/co-data-table/headerTruncationLogic.js +34 -0
- package/dist/collection/components/co-date-range-picker/co-date-range-picker.js +2 -2
- package/dist/collection/components/co-input/co-input.js +17 -5
- package/dist/collection/components/co-menu-item/co-menu-item.css +9 -0
- package/dist/collection/components/co-modal/co-modal.css +6 -0
- package/dist/collection/components/co-modal/co-modal.js +33 -2
- package/dist/collection/components/co-navbar/co-navbar.js +2 -2
- package/dist/collection/components/co-number-field/co-number-field.js +3 -3
- package/dist/collection/components/co-option-list/co-option-list.js +32 -3
- package/dist/collection/components/co-option-list/optionListLogic.js +31 -8
- package/dist/collection/components/co-overlay/co-overlay.js +1 -1
- package/dist/collection/components/co-page-header/co-page-header.js +1 -1
- package/dist/collection/components/co-phone-field/co-phone-field.js +1 -1
- package/dist/collection/components/co-popover/co-popover.js +1 -1
- package/dist/collection/components/co-progress-bar/co-progress-bar.js +2 -2
- package/dist/collection/components/co-progress-circle/co-progress-circle.js +2 -2
- package/dist/collection/components/co-radio/co-radio.js +3 -3
- package/dist/collection/components/co-radio-group/co-radio-group.js +1 -1
- package/dist/collection/components/co-rating/co-rating.js +3 -3
- package/dist/collection/components/co-ref-field/co-ref-field.css +40 -0
- package/dist/collection/components/co-ref-field/co-ref-field.js +207 -11
- package/dist/collection/components/co-rich-text-editor/co-rich-text-editor.js +3 -3
- package/dist/collection/components/co-row/co-row.js +2 -2
- package/dist/collection/components/co-segmented-bar/co-segmented-bar.js +1 -1
- package/dist/collection/components/co-select/co-select.js +24 -5
- package/dist/collection/components/co-separator/co-separator.js +1 -1
- package/dist/collection/components/co-sidebar/co-sidebar.js +2 -2
- package/dist/collection/components/co-sidebar-nav/co-sidebar-nav.js +1 -1
- package/dist/collection/components/co-skeleton/co-skeleton.js +1 -1
- package/dist/collection/components/co-slider/co-slider.js +2 -2
- package/dist/collection/components/co-switch/co-switch.js +3 -3
- package/dist/collection/components/co-tab/co-tab.js +2 -2
- package/dist/collection/components/co-tab-group/co-tab-group.js +2 -2
- package/dist/collection/components/co-tags-field/co-tags-field.js +5 -5
- package/dist/collection/components/co-textarea/co-textarea.js +4 -4
- package/dist/collection/components/co-time-field/co-time-field.js +1 -1
- package/dist/collection/components/co-toast/co-toast.js +2 -2
- package/dist/collection/components/co-toggle-button/co-toggle-button.css +6 -5
- package/dist/collection/components/co-toggle-button/co-toggle-button.js +2 -2
- package/dist/collection/components/co-toggle-button-group/co-toggle-button-group.css +9 -5
- package/dist/collection/components/co-toggle-button-group/co-toggle-button-group.js +2 -2
- package/dist/collection/components/co-tooltip/co-tooltip.js +2 -2
- package/dist/collection/components/co-transfer-list/co-transfer-list.js +1 -1
- package/dist/collection/components/co-video/co-video.js +2 -2
- package/dist/components/co-accordion.js +1 -1
- package/dist/components/co-action-bar.js +1 -1
- package/dist/components/co-audio-player.js +1 -1
- package/dist/components/co-autocomplete.js +1 -1
- package/dist/components/co-avatar-group.js +1 -1
- package/dist/components/co-avatar.js +1 -1
- package/dist/components/co-button.js +1 -1
- package/dist/components/co-calendar-month.js +1 -1
- package/dist/components/co-calendar-timegrid.js +1 -1
- package/dist/components/co-checkbox.js +1 -1
- package/dist/components/co-color-picker.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-drawer.js +1 -1
- package/dist/components/co-event-calendar.js +1 -1
- package/dist/components/co-file-field.js +1 -1
- package/dist/components/co-input.js +1 -1
- package/dist/components/co-lightbox.js +1 -1
- package/dist/components/co-list-item.js +1 -1
- package/dist/components/co-menu-item.js +1 -1
- package/dist/components/co-modal.js +1 -1
- package/dist/components/co-navbar.js +1 -1
- package/dist/components/co-number-field.js +1 -1
- package/dist/components/co-option-list.js +1 -1
- package/dist/components/co-overlay.js +1 -1
- package/dist/components/co-page-header.js +1 -1
- package/dist/components/co-phone-field.js +1 -1
- package/dist/components/co-progress-bar.js +1 -1
- package/dist/components/co-progress-circle.js +1 -1
- package/dist/components/co-radio.js +1 -1
- package/dist/components/co-rating.js +1 -1
- package/dist/components/co-ref-field.js +1 -1
- package/dist/components/co-rich-text-editor.js +1 -1
- package/dist/components/co-row.js +1 -1
- package/dist/components/co-select.js +1 -1
- package/dist/components/co-separator.js +1 -1
- package/dist/components/co-sidebar-nav.js +1 -1
- package/dist/components/co-sidebar.js +1 -1
- package/dist/components/co-skeleton.js +1 -1
- package/dist/components/co-slider.js +1 -1
- package/dist/components/co-switch.js +1 -1
- package/dist/components/co-tab-group.js +1 -1
- package/dist/components/co-tab.js +1 -1
- package/dist/components/co-tags-field.js +1 -1
- package/dist/components/co-textarea.js +1 -1
- package/dist/components/co-time-field.js +1 -1
- package/dist/components/co-toggle-button-group.js +1 -1
- package/dist/components/co-toggle-button.js +1 -1
- package/dist/components/co-tooltip.js +1 -1
- package/dist/components/co-video.js +1 -1
- package/dist/components/p-7TncUlLN.js +1 -0
- package/dist/components/{p-BxP8OBw6.js → p-B9xitpGU.js} +1 -1
- package/dist/components/{p-x4grh-eZ.js → p-CBTGN490.js} +1 -1
- package/dist/components/{p-CXPRaTuo.js → p-CLsAo0-A.js} +1 -1
- package/dist/components/{p-B1QFLcY9.js → p-D2ldYZo1.js} +1 -1
- package/dist/components/{p-Bv6U5y3d.js → p-D3mVYO-G.js} +1 -1
- package/dist/components/{p-DkDTmHCg.js → p-DDV_bRcU.js} +1 -1
- package/dist/components/{p-Be_kyNRE.js → p-DSnJWzQw.js} +1 -1
- package/dist/components/{p-BBP5__CY.js → p-DTi2O4O8.js} +1 -1
- package/dist/components/p-De7w9k6_.js +1 -0
- package/dist/components/{p-Cl3AdEQJ.js → p-DoHLTC0n.js} +1 -1
- package/dist/components/{p-CnX3L8aF.js → p-DxtNejr2.js} +1 -1
- package/dist/components/p-wjt4IAGZ.js +1 -0
- package/dist/components/{p-DIo66nBr.js → p-zuhal3IZ.js} +1 -1
- package/dist/esm/co-accordion.entry.js +4 -4
- package/dist/esm/co-action-bar.entry.js +1 -1
- package/dist/esm/co-audio-player.entry.js +82 -12
- package/dist/esm/co-avatar.entry.js +70 -0
- package/dist/esm/co-button.entry.js +1 -1
- package/dist/esm/co-checkbox.entry.js +3 -3
- package/dist/esm/co-chip_2.entry.js +62 -10
- package/dist/esm/co-color-picker.entry.js +40 -10
- package/dist/esm/co-data-table.entry.js +82 -4
- package/dist/esm/co-input.entry.js +6 -2
- package/dist/esm/co-menu-item.entry.js +1 -1
- package/dist/esm/co-modal.entry.js +7 -3
- package/dist/esm/co-navbar.entry.js +2 -2
- package/dist/esm/co-number-field.entry.js +3 -3
- package/dist/esm/co-overlay.entry.js +1 -1
- package/dist/esm/co-page-header.entry.js +1 -1
- package/dist/esm/co-phone-field.entry.js +1 -1
- package/dist/esm/co-progress-bar.entry.js +2 -2
- package/dist/esm/co-progress-circle.entry.js +2 -2
- package/dist/esm/co-provider-logo_2.entry.js +1 -1
- package/dist/esm/co-radio.entry.js +3 -3
- package/dist/esm/co-rating.entry.js +3 -3
- package/dist/esm/co-ref-field.entry.js +100 -9
- package/dist/esm/co-rich-text-editor.entry.js +3 -3
- package/dist/esm/co-row.entry.js +2 -2
- package/dist/esm/co-select.entry.js +4 -4
- package/dist/esm/co-separator.entry.js +1 -1
- package/dist/esm/co-sidebar.entry.js +2 -2
- package/dist/esm/co-slider.entry.js +2 -2
- package/dist/esm/co-switch.entry.js +3 -3
- package/dist/esm/co-tab-group.entry.js +2 -2
- package/dist/esm/co-tab.entry.js +2 -2
- package/dist/esm/co-tags-field.entry.js +5 -5
- package/dist/esm/co-textarea.entry.js +4 -4
- package/dist/esm/co-time-field.entry.js +1 -1
- package/dist/esm/co-toggle-button-group.entry.js +3 -3
- package/dist/esm/co-toggle-button.entry.js +3 -3
- package/dist/esm/{co-avatar_2.entry.js → co-tooltip.entry.js} +3 -70
- package/dist/esm/co-video.entry.js +2 -2
- package/dist/esm/cobalt.js +1 -1
- package/dist/esm/index-DH5lfRNj.js +12 -8
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/co-accordion/co-accordion.d.ts +6 -0
- package/dist/types/components/co-audio-player/co-audio-player.d.ts +25 -0
- package/dist/types/components/co-checkbox/co-checkbox.d.ts +4 -0
- package/dist/types/components/co-color-picker/co-color-picker.d.ts +4 -2
- package/dist/types/components/co-data-table/co-data-table.d.ts +15 -0
- package/dist/types/components/co-data-table/headerTruncationLogic.d.ts +24 -0
- package/dist/types/components/co-input/co-input.d.ts +5 -1
- package/dist/types/components/co-modal/co-modal.d.ts +10 -0
- package/dist/types/components/co-option-list/co-option-list.d.ts +13 -0
- package/dist/types/components/co-option-list/optionListLogic.d.ts +23 -6
- package/dist/types/components/co-ref-field/co-ref-field.d.ts +38 -0
- package/dist/types/components/co-select/co-select.d.ts +6 -0
- package/dist/types/components.d.ts +79 -3
- package/package.json +2 -2
- package/dist/cobalt/p-15d59169.entry.js +0 -1
- package/dist/cobalt/p-1788aab5.entry.js +0 -1
- package/dist/cobalt/p-20a39218.entry.js +0 -1
- package/dist/cobalt/p-3cc3ff93.entry.js +0 -1
- package/dist/cobalt/p-4908f33f.entry.js +0 -1
- package/dist/cobalt/p-63825d7f.entry.js +0 -1
- package/dist/cobalt/p-6f700f0d.entry.js +0 -1
- package/dist/cobalt/p-88195a63.entry.js +0 -1
- package/dist/cobalt/p-8fa5dc4a.entry.js +0 -1
- package/dist/cobalt/p-b1e8d69e.entry.js +0 -1
- package/dist/cobalt/p-b48917c9.entry.js +0 -1
- package/dist/cobalt/p-c32c176a.entry.js +0 -1
- package/dist/cobalt/p-e48f4e45.entry.js +0 -1
- package/dist/cobalt/p-ef5ca521.entry.js +0 -1
- package/dist/components/p-9ceBPSd1.js +0 -1
- package/dist/components/p-B2IsXte7.js +0 -1
- package/dist/components/p-BsTO1uUA.js +0 -1
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, a as getElement } from './index-DH5lfRNj.js';
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* Lógica pura del tooltip de header truncado (sin DOM real: testeable en vitest).
|
|
5
|
+
* Misma regla que co-list-item y `useEllipsisTooltip` de suite-v2: +1px de
|
|
6
|
+
* tolerancia porque el navegador redondea a enteros y 1px de más NO es corte.
|
|
7
|
+
*/
|
|
8
|
+
function isEllipsisTruncated(node) {
|
|
9
|
+
return !!node && node.scrollWidth > node.clientWidth + 1;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Mide TODOS los labels registrados (field → nodo) en una pasada y devuelve el
|
|
13
|
+
* próximo mapa; la MISMA referencia si ningún field cambió. Un field que ya no
|
|
14
|
+
* está registrado (columna quitada) desaparece del mapa.
|
|
15
|
+
*/
|
|
16
|
+
function measureTruncatedHeaders(prev, labels) {
|
|
17
|
+
let changed = Object.keys(prev).some((field) => !labels.has(field));
|
|
18
|
+
const next = {};
|
|
19
|
+
labels.forEach((node, field) => {
|
|
20
|
+
const truncated = isEllipsisTruncated(node);
|
|
21
|
+
next[field] = truncated;
|
|
22
|
+
if (!!prev[field] !== truncated)
|
|
23
|
+
changed = true;
|
|
24
|
+
});
|
|
25
|
+
return changed ? next : prev;
|
|
26
|
+
}
|
|
27
|
+
|
|
3
28
|
/**
|
|
4
29
|
* Pure math for co-data-table's column-resize drag.
|
|
5
30
|
*
|
|
@@ -38,7 +63,7 @@ function resizeWidth({ startWidth, minWidth, pointerDelta, autoScrollExtra }) {
|
|
|
38
63
|
return Math.max(minWidth, startWidth + pointerDelta + autoScrollExtra);
|
|
39
64
|
}
|
|
40
65
|
|
|
41
|
-
const coDataTableCss = () => `co-data-table{display:block;flex:1;min-height:0;overflow:hidden;contain:layout}.co-data-table{position:relative;font-family:var(--co-font-family-primary);background:var(--co-color-base-blanco);display:flex;flex-direction:column;height:100%}.co-data-table--resizing{cursor:col-resize;user-select:none}.co-data-table__scroll{flex:1;overflow-x:auto;overflow-y:auto;min-height:0}.co-data-table__table{min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.co-data-table__head{position:sticky;top:0;z-index:2}.co-data-table__header-row{height:40px}.co-data-table__th{position:relative;height:40px;padding:0 var(--co-spacing-md);background:var(--co-color-base-blanco);border-bottom:1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);border-right:1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);text-align:left;vertical-align:middle;font-size:var(--co-font-size-14);font-weight:500;color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;overflow:hidden;box-sizing:border-box}.co-data-table__th:last-child{border-right:none}.co-data-table__th--sortable{cursor:pointer}.co-data-table__th--sortable:hover{background-image:linear-gradient(var(--co-semantic-surface-hover), var(--co-semantic-surface-hover))}.co-data-table__th-content{display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm)}.co-data-table__pin-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-300);cursor:pointer;opacity:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-data-table__pin-icon--active{opacity:1;color:var(--co-semantic-text-default)}.co-data-table__th:hover .co-data-table__pin-icon{opacity:1}.co-data-table__pin-icon:hover{color:var(--co-semantic-text-default)}.co-data-table__filter-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-300);cursor:pointer;opacity:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-data-table__th:hover .co-data-table__filter-icon{opacity:1}.co-data-table__filter-icon:hover{color:var(--co-semantic-text-default)}.co-data-table__filter-icon--active{opacity:1;color:var(--co-color-primary-azul)}.co-data-table__filter-icon--indirect{opacity:0.45;color:var(--co-semantic-text-muted)}.co-data-table__th-
|
|
66
|
+
const coDataTableCss = () => `co-data-table{display:block;flex:1;min-height:0;overflow:hidden;contain:layout}.co-data-table{position:relative;font-family:var(--co-font-family-primary);background:var(--co-color-base-blanco);display:flex;flex-direction:column;height:100%}.co-data-table--resizing{cursor:col-resize;user-select:none}.co-data-table__scroll{flex:1;overflow-x:auto;overflow-y:auto;min-height:0}.co-data-table__table{min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.co-data-table__head{position:sticky;top:0;z-index:2}.co-data-table__header-row{height:40px}.co-data-table__th{position:relative;height:40px;padding:0 var(--co-spacing-md);background:var(--co-color-base-blanco);border-bottom:1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);border-right:1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);text-align:left;vertical-align:middle;font-size:var(--co-font-size-14);font-weight:500;color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;overflow:hidden;box-sizing:border-box}.co-data-table__th:last-child{border-right:none}.co-data-table__th--sortable{cursor:pointer}.co-data-table__th--sortable:hover{background-image:linear-gradient(var(--co-semantic-surface-hover), var(--co-semantic-surface-hover))}.co-data-table__th-content{display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm)}.co-data-table__pin-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-300);cursor:pointer;opacity:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-data-table__pin-icon--active{opacity:1;color:var(--co-semantic-text-default)}.co-data-table__th:hover .co-data-table__pin-icon{opacity:1}.co-data-table__pin-icon:hover{color:var(--co-semantic-text-default)}.co-data-table__filter-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-300);cursor:pointer;opacity:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-data-table__th:hover .co-data-table__filter-icon{opacity:1}.co-data-table__filter-icon:hover{color:var(--co-semantic-text-default)}.co-data-table__filter-icon--active{opacity:1;color:var(--co-color-primary-azul)}.co-data-table__filter-icon--indirect{opacity:0.45;color:var(--co-semantic-text-muted)}.co-data-table__th-tip{flex:1;min-width:0}.co-data-table__th-label{display:block;overflow:hidden;text-overflow:ellipsis}.co-data-table__sort-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-400);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-data-table__sort-icon--active{color:var(--co-semantic-text-default)}.co-data-table__sort-button{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm);background:transparent;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}.co-data-table__sort-button:focus-visible{outline:2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul));outline-offset:-2px;border-radius:var(--co-border-radius-xxs)}.co-data-table__th--checkbox,.co-data-table__td--checkbox{width:48px;min-width:48px;max-width:48px;padding:0 var(--co-spacing-md);text-align:center;line-height:0;}.co-data-table__th.co-data-table__th--checkbox,.co-data-table__td.co-data-table__td--checkbox{border-right:none}.co-data-table__th--sticky,.co-data-table__td--sticky{position:sticky;z-index:1;background:var(--co-color-base-blanco)}.co-data-table__th--sticky{z-index:3}.co-data-table__th.co-data-table__th--sticky,.co-data-table__td.co-data-table__td--sticky{overflow:visible}.co-data-table__td--sticky::after,.co-data-table__th--sticky::after{content:'';position:absolute;top:0;right:-4px;bottom:0;width:4px;pointer-events:none;opacity:0;background:linear-gradient(to right, var(--co-color-opacity-negro-8), transparent);transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-data-table__td--sticky::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-color:var(--co-semantic-surface-hover);opacity:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), background-color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-data-table__row:hover .co-data-table__td--sticky::before{opacity:1}.co-data-table__row--selected .co-data-table__td--sticky::before{opacity:1;background-color:var(--co-color-opacity-negro-4)}.co-data-table__row--selected:hover .co-data-table__td--sticky::before{background-color:var(--co-color-opacity-negro-8)}.co-data-table__resize-handle{position:absolute;top:0;right:-2px;width:5px;height:100%;cursor:col-resize;z-index:1}.co-data-table__resize-handle:hover{background:var(--co-color-primary-azul);opacity:0.3}.co-data-table__resize-handle--active{background:var(--co-color-primary-azul);opacity:0.3}.co-data-table__row{height:48px;transition:background-color var(--co-motion-duration-fast) var(--co-motion-ease-out);content-visibility:auto;contain-intrinsic-size:auto 48px}.co-data-table__row:hover{background:var(--co-semantic-surface-hover)}.co-data-table__row--selected{background:var(--co-color-opacity-negro-4)}.co-data-table__row--selected:hover{background:var(--co-color-opacity-negro-8)}.co-data-table__td{height:48px;padding:0 var(--co-spacing-md);background:transparent;border-bottom:1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);border-right:1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);vertical-align:middle;font-size:var(--co-font-size-12);font-weight:var(--co-font-weight-medium);color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.co-data-table__td:last-child{border-right:none}.co-data-table__th--align-center,.co-data-table__td--align-center{text-align:center}.co-data-table__th--align-right,.co-data-table__td--align-right{text-align:right}.co-data-table__cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.co-data-table--empty .co-data-table__scroll{flex:0 0 auto;overflow:hidden}.co-data-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1;min-height:280px;padding:var(--co-spacing-3xl) var(--co-spacing-lg);gap:var(--co-spacing-lg) }.co-data-table__empty-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-muted);color:var(--co-semantic-text-secondary);margin-bottom:var(--co-spacing-sm)}.co-data-table__empty-title{font-size:var(--co-font-size-24);font-weight:var(--co-font-weight-medium, 500);line-height:1.25;color:var(--co-semantic-text-default);letter-spacing:-0.03em}.co-data-table__empty-message{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);margin:0;max-width:538px ;line-height:1.25}.co-data-table__empty-action{margin-top:var(--co-spacing-md);display:inline-flex}.co-data-table__empty-action:empty{display:none}.co-data-table__skeleton{height:14px;border-radius:var(--co-border-radius-xxs);background:linear-gradient( 90deg, var(--co-semantic-surface-secondary) 0%, var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04)) 50%, var(--co-semantic-surface-secondary) 100% );background-size:200% 100%;animation:co-dt-shimmer 1.2s ease-in-out infinite;width:70%}.co-data-table__skeleton--checkbox{width:16px;height:16px;margin:0 auto}@keyframes co-dt-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){.co-data-table__skeleton{animation:none}}.co-data-table__row--skeleton{pointer-events:none;content-visibility:visible}.co-data-table__row--flash-create{animation:co-dt-flash-create 1s ease-out}.co-data-table__row--flash-update{animation:co-dt-flash-update 1s ease-out}.co-data-table__row--flash-delete{animation:co-dt-flash-delete 0.5s ease-out forwards}@keyframes co-dt-flash-create{0%{background-color:rgba(2, 162, 112, 0.15)}100%{background-color:transparent}}@keyframes co-dt-flash-update{0%{background-color:rgba(37, 99, 235, 0.15)}100%{background-color:transparent}}@keyframes co-dt-flash-delete{0%{opacity:1;background-color:rgba(170, 46, 27, 0.1)}100%{opacity:0;height:0;padding:0;overflow:hidden}}`;
|
|
42
67
|
|
|
43
68
|
const CoDataTable = class {
|
|
44
69
|
constructor(hostRef) {
|
|
@@ -97,6 +122,9 @@ const CoDataTable = class {
|
|
|
97
122
|
this.parsedFilteredFields = [];
|
|
98
123
|
this.parsedIndirectFields = [];
|
|
99
124
|
this.columnWidths = new Map();
|
|
125
|
+
/** Columnas cambiadas → re-medir tras el render (un cambio de texto con el
|
|
126
|
+
* mismo ancho no dispara el ResizeObserver). */
|
|
127
|
+
this.headerMeasurePending = false;
|
|
100
128
|
this.resizingColumn = null;
|
|
101
129
|
this.resizeStartX = 0;
|
|
102
130
|
this.resizeStartWidth = 0;
|
|
@@ -118,6 +146,7 @@ const CoDataTable = class {
|
|
|
118
146
|
}
|
|
119
147
|
/* ─── WATCHERS ──────────────────────────────────────────── */
|
|
120
148
|
parseColumns() {
|
|
149
|
+
this.headerMeasurePending = true;
|
|
121
150
|
try {
|
|
122
151
|
const cols = typeof this.columns === 'string' ? JSON.parse(this.columns) : this.columns;
|
|
123
152
|
this.parsedColumns = cols;
|
|
@@ -166,13 +195,39 @@ const CoDataTable = class {
|
|
|
166
195
|
}
|
|
167
196
|
}
|
|
168
197
|
componentWillLoad() {
|
|
198
|
+
// Recursos por instancia acá y no en inicializadores de campo: la instancia
|
|
199
|
+
// envuelta de @stencil/vitest los omite (ver nota en co-data-table.spec.tsx).
|
|
200
|
+
this.headerLabelEls = new Map();
|
|
201
|
+
this.truncatedHeaders = {};
|
|
169
202
|
this.parseColumns();
|
|
170
203
|
this.parseRows();
|
|
171
204
|
this.parseSelectedKeys();
|
|
172
205
|
this.parseFilteredFields();
|
|
173
206
|
this.parseIndirectFields();
|
|
174
207
|
}
|
|
208
|
+
componentDidLoad() {
|
|
209
|
+
// Tooltip del header SOLO cuando el label trunca (patrón co-list-item). El
|
|
210
|
+
// estado tiene que estar correcto ANTES del hover: Stencil re-renderiza en
|
|
211
|
+
// rAF, así que una medida en el pointerenter del <th> llega después de que
|
|
212
|
+
// co-tooltip leyó `disabled` al agendar su show (verificado headless
|
|
213
|
+
// 2026-09-07). Un ResizeObserver re-mide cuando el label cambia de ancho
|
|
214
|
+
// (resize de columna, panel que se muestra, viewport) — y en la carga.
|
|
215
|
+
if (typeof ResizeObserver !== 'undefined') {
|
|
216
|
+
this.headerResizeObserver = new ResizeObserver(() => this.measureHeaderTruncation());
|
|
217
|
+
this.headerLabelEls.forEach((el) => this.headerResizeObserver.observe(el));
|
|
218
|
+
}
|
|
219
|
+
this.measureHeaderTruncation();
|
|
220
|
+
}
|
|
221
|
+
disconnectedCallback() {
|
|
222
|
+
var _a;
|
|
223
|
+
(_a = this.headerResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
224
|
+
this.headerResizeObserver = undefined;
|
|
225
|
+
}
|
|
175
226
|
componentDidRender() {
|
|
227
|
+
if (this.headerMeasurePending) {
|
|
228
|
+
this.headerMeasurePending = false;
|
|
229
|
+
this.measureHeaderTruncation();
|
|
230
|
+
}
|
|
176
231
|
// Auto-scroll parity: the resize tick grew the column (async @State render)
|
|
177
232
|
// and owes the container the same px of scroll. Here the DOM already has
|
|
178
233
|
// the new table width, so the advance can't clamp — width and scroll land
|
|
@@ -324,6 +379,29 @@ const CoDataTable = class {
|
|
|
324
379
|
handleRowDblClick(row, index) {
|
|
325
380
|
this.coRowDblClick.emit({ row, index });
|
|
326
381
|
}
|
|
382
|
+
/** Escritura guardada: misma referencia = sin re-render de la tabla. */
|
|
383
|
+
measureHeaderTruncation() {
|
|
384
|
+
const next = measureTruncatedHeaders(this.truncatedHeaders, this.headerLabelEls);
|
|
385
|
+
if (next !== this.truncatedHeaders)
|
|
386
|
+
this.truncatedHeaders = next;
|
|
387
|
+
}
|
|
388
|
+
/** ref del label: registra/observa al montar, limpia al desmontar (ref null). */
|
|
389
|
+
registerHeaderLabel(field, el) {
|
|
390
|
+
var _a, _b, _c;
|
|
391
|
+
const prev = this.headerLabelEls.get(field);
|
|
392
|
+
if (el) {
|
|
393
|
+
if (prev === el)
|
|
394
|
+
return;
|
|
395
|
+
if (prev)
|
|
396
|
+
(_a = this.headerResizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(prev);
|
|
397
|
+
this.headerLabelEls.set(field, el);
|
|
398
|
+
(_b = this.headerResizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
|
|
399
|
+
}
|
|
400
|
+
else if (prev) {
|
|
401
|
+
(_c = this.headerResizeObserver) === null || _c === void 0 ? void 0 : _c.unobserve(prev);
|
|
402
|
+
this.headerLabelEls.delete(field);
|
|
403
|
+
}
|
|
404
|
+
}
|
|
327
405
|
handleColumnPin(field, e) {
|
|
328
406
|
e.stopPropagation();
|
|
329
407
|
this.coColumnPin.emit({ field });
|
|
@@ -433,7 +511,7 @@ const CoDataTable = class {
|
|
|
433
511
|
: undefined }, h("span", { class: "co-data-table__th-content" }, h("span", { class: {
|
|
434
512
|
'co-data-table__pin-icon': true,
|
|
435
513
|
'co-data-table__pin-icon--active': !!col.sticky,
|
|
436
|
-
}, title: col.sticky ? 'Unpin column' : 'Pin column', onClick: (e) => this.handleColumnPin(col.field, e) }, h("co-icon", { name: "push-pin", size: 14, weight: col.sticky ? 'fill' : 'regular' })), col.sortable ? (h("button", { type: "button", class: "co-data-table__sort-button", "aria-label": `Sort by ${col.label}`, onClick: () => this.handleSort(col.field) }, h("span", { class: "co-data-table__th-label" }, col.label), this.renderSortIcon(col))) : (h("span", { class: "co-data-table__th-label" }, col.label)), col.filterable && (h("span", { class: {
|
|
514
|
+
}, title: col.sticky ? 'Unpin column' : 'Pin column', onClick: (e) => this.handleColumnPin(col.field, e) }, h("co-icon", { name: "push-pin", size: 14, weight: col.sticky ? 'fill' : 'regular' })), col.sortable ? (h("button", { type: "button", class: "co-data-table__sort-button", "aria-label": `Sort by ${col.label}`, onClick: () => this.handleSort(col.field) }, h("co-tooltip", { block: true, class: "co-data-table__th-tip", content: col.label, placement: "top", disabled: !this.truncatedHeaders[col.field] }, h("span", { class: "co-data-table__th-label", ref: (el) => this.registerHeaderLabel(col.field, el) }, col.label)), this.renderSortIcon(col))) : (h("co-tooltip", { block: true, class: "co-data-table__th-tip", content: col.label, placement: "top", disabled: !this.truncatedHeaders[col.field] }, h("span", { class: "co-data-table__th-label", ref: (el) => this.registerHeaderLabel(col.field, el) }, col.label))), col.filterable && (h("span", { class: {
|
|
437
515
|
'co-data-table__filter-icon': true,
|
|
438
516
|
'co-data-table__filter-icon--active': this.parsedFilteredFields.includes(col.field),
|
|
439
517
|
'co-data-table__filter-icon--indirect': !this.parsedFilteredFields.includes(col.field) && this.parsedIndirectFields.includes(col.field),
|
|
@@ -468,12 +546,12 @@ const CoDataTable = class {
|
|
|
468
546
|
: h("slot", { name: "empty-action" }))));
|
|
469
547
|
}
|
|
470
548
|
render() {
|
|
471
|
-
return (h("div", { key: '
|
|
549
|
+
return (h("div", { key: '6f71533676a2c66ae46b1ee9940b405744cef174', class: {
|
|
472
550
|
'co-data-table': true,
|
|
473
551
|
'co-data-table--resizing': this.resizingColumn !== null,
|
|
474
552
|
'co-data-table--loading': this.loading,
|
|
475
553
|
'co-data-table--empty': !this.loading && this.parsedRows.length === 0,
|
|
476
|
-
} }, h("div", { key: '
|
|
554
|
+
} }, h("div", { key: '8176dca34858e32ba2ce008ac44cf444ea952f08', class: "co-data-table__scroll" }, h("table", { key: 'f285815728244a7161d91dbed6ca87b158db4de6', class: "co-data-table__table", style: { width: `${this.getTableWidth()}px`, minWidth: '100%' } }, this.renderColgroup(), this.renderHeader(), h("slot", { key: '97f4ed9020a7bdb8b262313a10451e9aff754a8e' }), this.loading ? this.renderSkeletonBody() : null)), this.renderEmpty()));
|
|
477
555
|
}
|
|
478
556
|
get el() { return getElement(this); }
|
|
479
557
|
static get watchers() { return {
|
|
@@ -121,9 +121,13 @@ const CoInput = class {
|
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
123
|
/** Programmatically focus the inner input (post-hydration safe). */
|
|
124
|
-
|
|
124
|
+
/** Enfoca el input nativo. `options` se reenvía a `focus()` — p. ej.
|
|
125
|
+
* `{ preventScroll: true }` para un buscador que vive en un panel
|
|
126
|
+
* top-layer (co-popover): el scroll nativo hacia el foco trepa por los
|
|
127
|
+
* ancestros del light DOM y arrastra al host (drawer) sin necesidad. */
|
|
128
|
+
async setFocus(options) {
|
|
125
129
|
var _a;
|
|
126
|
-
(_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
130
|
+
(_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus(options);
|
|
127
131
|
}
|
|
128
132
|
componentDidLoad() {
|
|
129
133
|
var _a;
|
|
@@ -36,7 +36,7 @@ function inheritedSubmenuSide(el) {
|
|
|
36
36
|
return side === 'left' || side === 'right' ? side : null;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
const coMenuItemCss = () => `:host{display:block}.co-menu-item__wrap{display:block}.co-menu-item{width:100%;display:flex;align-items:center;gap:var(--co-menu-item-gap, var(--co-spacing-sm, 8px));padding:var(--co-menu-item-padding, var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px));background:transparent;border:0;border-radius:var(--co-border-radius-xs, 8px);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default);text-align:left;cursor:pointer;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);min-height:var(--co-menu-item-height, 36px);box-sizing:border-box}.co-menu-item--dense{padding:var(--co-spacing-xs, 4px) var(--co-spacing-md, 12px);min-height:32px}.co-menu-item--selected{background:var(--co-color-gray-100, #f6f6f6)}.co-menu-item:hover,.co-menu-item--submenu-open{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-menu-item:focus-visible{outline:2px solid var(--co-semantic-border-focus, #2563eb);outline-offset:-2px}.co-menu-item--disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.co-menu-item--danger{color:var(--co-color-status-error, #aa2e1b)}.co-menu-item--danger:hover{background:var(--co-color-status-bg-error, #ffefef)}.co-menu-item__icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--co-menu-item-icon-color, currentColor)}.co-menu-item__check{display:inline-flex;align-items:center;flex-shrink:0;color:var(--co-semantic-text-default)}.co-menu-item__label{flex:1;display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-menu-item__label--stacked{flex-direction:column;align-items:flex-start;gap:1px}.co-menu-item__label-main{display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px)}.co-menu-item__caption{font-size:var(--co-font-size-11, 11px);color:var(--co-semantic-text-muted);line-height:1.3;white-space:nowrap}.co-menu-item__suffix{display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);flex-shrink:0;color:var(--co-semantic-text-muted)}.co-menu-item--submenu-open .co-menu-item__suffix{color:var(--co-semantic-text-default)}.co-menu-item__trigger-wrap{display:block}.co-menu-item__submenu{background:var(--co-semantic-surface-secondary, #fff);border-radius:var(--co-border-radius-sm, 12px);box-shadow:var(--co-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04)), inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));padding:var(--co-menu-padding, var(--co-spacing-xs, 4px));min-width:180px;display:flex;flex-direction:column;gap:2px;position:relative}.co-menu-item__submenu::before,.co-menu-item__submenu::after{content:'';position:absolute;top:0;bottom:0;width:6px;}.co-menu-item__submenu::before{left:-6px}.co-menu-item__submenu::after{right:-6px}`;
|
|
39
|
+
const coMenuItemCss = () => `:host{display:block}.co-menu-item__wrap{display:block}.co-menu-item{width:100%;display:flex;align-items:center;gap:var(--co-menu-item-gap, var(--co-spacing-sm, 8px));padding:var(--co-menu-item-padding, var(--co-spacing-sm, 8px) var(--co-spacing-md, 12px));background:transparent;border:0;border-radius:var(--co-border-radius-xs, 8px);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default);text-align:left;cursor:pointer;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);min-height:var(--co-menu-item-height, 36px);box-sizing:border-box}.co-menu-item--dense{padding:var(--co-spacing-xs, 4px) var(--co-spacing-md, 12px);min-height:32px}.co-menu-item--selected{background:var(--co-color-gray-100, #f6f6f6)}.co-menu-item:hover,.co-menu-item--submenu-open{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-menu-item:focus-visible{outline:2px solid var(--co-semantic-border-focus, #2563eb);outline-offset:-2px}.co-menu-item--disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.co-menu-item--danger{color:var(--co-color-status-error, #aa2e1b)}.co-menu-item--danger:hover{background:var(--co-color-status-bg-error, #ffefef)}.co-menu-item__icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--co-menu-item-icon-color, currentColor)}.co-menu-item__check{display:inline-flex;align-items:center;flex-shrink:0;color:var(--co-semantic-text-default)}.co-menu-item__label{flex:1;display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-menu-item__label--stacked{flex-direction:column;align-items:flex-start;gap:1px}.co-menu-item__label-main{display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px)}.co-menu-item__caption{font-size:var(--co-font-size-11, 11px);color:var(--co-semantic-text-muted);line-height:1.3;white-space:nowrap}.co-menu-item__suffix{display:inline-flex;align-items:center;gap:var(--co-spacing-xs, 4px);flex-shrink:0;color:var(--co-semantic-text-muted)}.co-menu-item--submenu-open .co-menu-item__suffix{color:var(--co-semantic-text-default)}.co-menu-item__trigger-wrap{display:block}.co-menu-item__wrap--submenu>co-popover{display:block;width:100%}.co-menu-item__submenu{background:var(--co-semantic-surface-secondary, #fff);border-radius:var(--co-border-radius-sm, 12px);box-shadow:var(--co-shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04)), inset 0 0 0 1px var(--co-color-opacity-negro-8, rgba(31, 28, 27, 0.08));padding:var(--co-menu-padding, var(--co-spacing-xs, 4px));min-width:180px;display:flex;flex-direction:column;gap:2px;position:relative}.co-menu-item__submenu::before,.co-menu-item__submenu::after{content:'';position:absolute;top:0;bottom:0;width:6px;}.co-menu-item__submenu::before{left:-6px}.co-menu-item__submenu::after{right:-6px}`;
|
|
40
40
|
|
|
41
41
|
const CoMenuItem = class {
|
|
42
42
|
constructor(hostRef) {
|
|
@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h } from './index-DH5lfRNj.js'
|
|
|
2
2
|
import { a as afterEventFor } from './overlayAfterClose-Ch1jfwZ2.js';
|
|
3
3
|
import { s as slotHasContent } from './slotContent-CBX_oabB.js';
|
|
4
4
|
|
|
5
|
-
const coModalCss = () => `.co-sq-elevation{border-radius:var(--co-sq-r);corner-shape:squircle;box-shadow:var(--co-sq-shadow)}.co-sq-clip{overflow:hidden;border-radius:var(--co-sq-r);corner-shape:squircle}@supports not (corner-shape: squircle){.co-sq-elevation{box-shadow:none}.co-sq-elevation-fallback{filter:var(--co-sq-drop-shadow)}.co-sq-clip{border-radius:0;--co-sq-tl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 0L95 0L92.5 0L90 0L87.5 0.01L85 0.01L82.5 0.02L80 0.04L77.5 0.06L75 0.1L72.5 0.14L70 0.2L67.5 0.28L65 0.38L62.5 0.5L60 0.65L57.5 0.83L55 1.04L52.5 1.3L50 1.6L47.5 1.96L45 2.37L42.5 2.85L40 3.41L37.5 4.05L35 4.8L32.5 5.65L30 6.63L27.5 7.77L25 9.07L22.5 10.58L20 12.34L17.5 14.41L15 16.85L12.5 19.79L10 23.42L7.5 28.06L5 34.37L2.5 44.29L0 100L100 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-tr:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 0L5 0L7.5 0L10 0L12.5 0.01L15 0.01L17.5 0.02L20 0.04L22.5 0.06L25 0.1L27.5 0.14L30 0.2L32.5 0.28L35 0.38L37.5 0.5L40 0.65L42.5 0.83L45 1.04L47.5 1.3L50 1.6L52.5 1.96L55 2.37L57.5 2.85L60 3.41L62.5 4.05L65 4.8L67.5 5.65L70 6.63L72.5 7.77L75 9.07L77.5 10.58L80 12.34L82.5 14.41L85 16.85L87.5 19.79L90 23.42L92.5 28.06L95 34.37L97.5 44.29L100 100L0 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-bl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 55.71L5 65.63L7.5 71.94L10 76.58L12.5 80.21L15 83.15L17.5 85.59L20 87.66L22.5 89.42L25 90.93L27.5 92.23L30 93.37L32.5 94.35L35 95.2L37.5 95.95L40 96.59L42.5 97.15L45 97.63L47.5 98.04L50 98.4L52.5 98.7L55 98.96L57.5 99.17L60 99.35L62.5 99.5L65 99.62L67.5 99.72L70 99.8L72.5 99.86L75 99.9L77.5 99.94L80 99.96L82.5 99.98L85 99.99L87.5 99.99L90 100L92.5 100L95 100L97.5 100L100 100L100 0Z%27 fill=%27%23fff%27/></svg>");--co-sq-br:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 55.71L95 65.63L92.5 71.94L90 76.58L87.5 80.21L85 83.15L82.5 85.59L80 87.66L77.5 89.42L75 90.93L72.5 92.23L70 93.37L67.5 94.35L65 95.2L62.5 95.95L60 96.59L57.5 97.15L55 97.63L52.5 98.04L50 98.4L47.5 98.7L45 98.96L42.5 99.17L40 99.35L37.5 99.5L35 99.62L32.5 99.72L30 99.8L27.5 99.86L25 99.9L22.5 99.94L20 99.96L17.5 99.98L15 99.99L12.5 99.99L10 100L7.5 100L5 100L2.5 100L0 100L0 0Z%27 fill=%27%23fff%27/></svg>");-webkit-mask:var(--co-sq-tl) top left / var(--co-sq-r) var(--co-sq-r) no-repeat, var(--co-sq-tr) top right / var(--co-sq-r) var(--co-sq-r) no-repeat, var(--co-sq-bl) bottom left / var(--co-sq-r) var(--co-sq-r) no-repeat, var(--co-sq-br) bottom right / var(--co-sq-r) var(--co-sq-r) no-repeat, linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-sq-r) + 2px) no-repeat, linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-sq-r) + 2px) 100% no-repeat;mask:var(--co-sq-tl) top left / var(--co-sq-r) var(--co-sq-r) no-repeat, var(--co-sq-tr) top right / var(--co-sq-r) var(--co-sq-r) no-repeat, var(--co-sq-bl) bottom left / var(--co-sq-r) var(--co-sq-r) no-repeat, var(--co-sq-br) bottom right / var(--co-sq-r) var(--co-sq-r) no-repeat, linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-sq-r) + 2px) no-repeat, linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-sq-r) + 2px) 100% no-repeat}}:host{display:contents;--co-overlay-blur:8px;--co-overlay-bg:rgba(31, 28, 27, 0.35)}.co-modal__frame{display:flex;contain:layout;--co-sq-drop-shadow:drop-shadow(0 1px 2px rgba(31, 28, 27, 0.06)) drop-shadow(0 14px 34px rgba(31, 28, 27, 0.16))}.co-modal{display:flex;flex-direction:column;background:var(--co-semantic-surface-secondary);--co-modal-r:var(--co-border-radius-xl);--co-sq-r:var(--co-modal-r);--co-sq-shadow:0 1px 4px rgba(31, 28, 27, 0.06), 0 14px 68px rgba(31, 28, 27, 0.16);max-width:540px;width:90vw;max-height:80vh;font-family:var(--co-font-family-primary);transform:scale(0.96);opacity:0;transition:transform var(--co-motion-duration-fast) var(--co-motion-ease-in), opacity var(--co-motion-duration-fast) var(--co-motion-ease-in)}.co-modal--sm{max-width:400px}.co-modal--lg{max-width:680px}.co-modal--full{max-width:min(1400px, 95vw);width:95vw;height:92vh;max-height:92vh}.co-modal--full .co-modal__body{flex:1;min-height:0;padding:0;overflow:hidden}.co-modal--open{transform:scale(1);opacity:1;transition:transform var(--co-motion-duration-base) var(--co-motion-ease-out), opacity var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-modal__header{display:flex;align-items:flex-start;gap:var(--co-spacing-md);padding:var(--co-spacing-xl) var(--co-spacing-xl) var(--co-spacing-md)}.co-modal__header-text{display:flex;flex-direction:column;gap:var(--co-spacing-sm);flex:1}.co-modal__heading{margin:0;font-size:var(--co-font-size-20);font-weight:700;color:var(--co-semantic-text-default);line-height:1.3}.co-modal__description{margin:0;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.5}.co-modal__close{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-sm);flex-shrink:0;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-modal__close:hover{background:var(--co-semantic-surface-hover)}.co-modal__body{padding:var(--co-spacing-lg) var(--co-spacing-xl);overflow-y:auto;overscroll-behavior:contain;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.6;border-top:1px solid var(--co-semantic-border-default)}.co-modal__body:empty{display:none}.co-modal__footer{display:flex;justify-content:flex-end;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl) var(--co-spacing-xl);border-top:1px solid var(--co-semantic-border-default);--co-button-radius:var(--co-border-radius-xs)}.co-modal__footer--empty{display:none}.co-modal--no-dividers .co-modal__footer{border-top:none}`;
|
|
5
|
+
const coModalCss = () => `.co-sq-elevation{border-radius:var(--co-sq-r);corner-shape:squircle;box-shadow:var(--co-sq-shadow)}.co-sq-clip{overflow:hidden;border-radius:var(--co-sq-r);corner-shape:squircle}@supports not (corner-shape: squircle){.co-sq-elevation{box-shadow:none}.co-sq-elevation-fallback{filter:var(--co-sq-drop-shadow)}.co-sq-clip{border-radius:0;--co-sq-tl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 0L95 0L92.5 0L90 0L87.5 0.01L85 0.01L82.5 0.02L80 0.04L77.5 0.06L75 0.1L72.5 0.14L70 0.2L67.5 0.28L65 0.38L62.5 0.5L60 0.65L57.5 0.83L55 1.04L52.5 1.3L50 1.6L47.5 1.96L45 2.37L42.5 2.85L40 3.41L37.5 4.05L35 4.8L32.5 5.65L30 6.63L27.5 7.77L25 9.07L22.5 10.58L20 12.34L17.5 14.41L15 16.85L12.5 19.79L10 23.42L7.5 28.06L5 34.37L2.5 44.29L0 100L100 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-tr:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 0L5 0L7.5 0L10 0L12.5 0.01L15 0.01L17.5 0.02L20 0.04L22.5 0.06L25 0.1L27.5 0.14L30 0.2L32.5 0.28L35 0.38L37.5 0.5L40 0.65L42.5 0.83L45 1.04L47.5 1.3L50 1.6L52.5 1.96L55 2.37L57.5 2.85L60 3.41L62.5 4.05L65 4.8L67.5 5.65L70 6.63L72.5 7.77L75 9.07L77.5 10.58L80 12.34L82.5 14.41L85 16.85L87.5 19.79L90 23.42L92.5 28.06L95 34.37L97.5 44.29L100 100L0 100Z%27 fill=%27%23fff%27/></svg>");--co-sq-bl:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M0 0L2.5 55.71L5 65.63L7.5 71.94L10 76.58L12.5 80.21L15 83.15L17.5 85.59L20 87.66L22.5 89.42L25 90.93L27.5 92.23L30 93.37L32.5 94.35L35 95.2L37.5 95.95L40 96.59L42.5 97.15L45 97.63L47.5 98.04L50 98.4L52.5 98.7L55 98.96L57.5 99.17L60 99.35L62.5 99.5L65 99.62L67.5 99.72L70 99.8L72.5 99.86L75 99.9L77.5 99.94L80 99.96L82.5 99.98L85 99.99L87.5 99.99L90 100L92.5 100L95 100L97.5 100L100 100L100 0Z%27 fill=%27%23fff%27/></svg>");--co-sq-br:url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27 preserveAspectRatio=%27none%27><path d=%27M100 0L97.5 55.71L95 65.63L92.5 71.94L90 76.58L87.5 80.21L85 83.15L82.5 85.59L80 87.66L77.5 89.42L75 90.93L72.5 92.23L70 93.37L67.5 94.35L65 95.2L62.5 95.95L60 96.59L57.5 97.15L55 97.63L52.5 98.04L50 98.4L47.5 98.7L45 98.96L42.5 99.17L40 99.35L37.5 99.5L35 99.62L32.5 99.72L30 99.8L27.5 99.86L25 99.9L22.5 99.94L20 99.96L17.5 99.98L15 99.99L12.5 99.99L10 100L7.5 100L5 100L2.5 100L0 100L0 0Z%27 fill=%27%23fff%27/></svg>");-webkit-mask:var(--co-sq-tl) top left / var(--co-sq-r) var(--co-sq-r) no-repeat, var(--co-sq-tr) top right / var(--co-sq-r) var(--co-sq-r) no-repeat, var(--co-sq-bl) bottom left / var(--co-sq-r) var(--co-sq-r) no-repeat, var(--co-sq-br) bottom right / var(--co-sq-r) var(--co-sq-r) no-repeat, linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-sq-r) + 2px) no-repeat, linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-sq-r) + 2px) 100% no-repeat;mask:var(--co-sq-tl) top left / var(--co-sq-r) var(--co-sq-r) no-repeat, var(--co-sq-tr) top right / var(--co-sq-r) var(--co-sq-r) no-repeat, var(--co-sq-bl) bottom left / var(--co-sq-r) var(--co-sq-r) no-repeat, var(--co-sq-br) bottom right / var(--co-sq-r) var(--co-sq-r) no-repeat, linear-gradient(#fff 0 0) center / 100% calc(100% - 2 * var(--co-sq-r) + 2px) no-repeat, linear-gradient(#fff 0 0) center / calc(100% - 2 * var(--co-sq-r) + 2px) 100% no-repeat}}:host{display:contents;--co-overlay-blur:8px;--co-overlay-bg:rgba(31, 28, 27, 0.35)}.co-modal__frame{display:flex;contain:layout;--co-sq-drop-shadow:drop-shadow(0 1px 2px rgba(31, 28, 27, 0.06)) drop-shadow(0 14px 34px rgba(31, 28, 27, 0.16))}.co-modal{display:flex;flex-direction:column;background:var(--co-semantic-surface-secondary);--co-modal-r:var(--co-border-radius-xl);--co-sq-r:var(--co-modal-r);--co-sq-shadow:0 1px 4px rgba(31, 28, 27, 0.06), 0 14px 68px rgba(31, 28, 27, 0.16);max-width:540px;width:90vw;max-height:80vh;font-family:var(--co-font-family-primary);transform:scale(0.96);opacity:0;transition:transform var(--co-motion-duration-fast) var(--co-motion-ease-in), opacity var(--co-motion-duration-fast) var(--co-motion-ease-in)}.co-modal--sm{max-width:400px}.co-modal--lg{max-width:680px}.co-modal--full{max-width:min(1400px, 95vw);width:95vw;height:92vh;max-height:92vh}.co-modal--full .co-modal__body{flex:1;min-height:0;padding:0;overflow:hidden}.co-modal--open{transform:scale(1);opacity:1;transition:transform var(--co-motion-duration-base) var(--co-motion-ease-out), opacity var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-modal__header{display:flex;align-items:flex-start;gap:var(--co-spacing-md);padding:var(--co-spacing-xl) var(--co-spacing-xl) var(--co-spacing-md)}.co-modal__header-text{display:flex;flex-direction:column;gap:var(--co-spacing-sm);flex:1}.co-modal__heading{margin:0;font-size:var(--co-font-size-20);font-weight:700;color:var(--co-semantic-text-default);line-height:1.3}.co-modal__description{margin:0;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.5}.co-modal__close{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs);margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-sm);flex-shrink:0;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-modal__close:hover{background:var(--co-semantic-surface-hover)}.co-modal__body{padding:var(--co-spacing-lg) var(--co-spacing-xl);overflow-y:auto;overscroll-behavior:contain;font-size:var(--co-font-size-14);color:var(--co-semantic-text-secondary);line-height:1.6;border-top:1px solid var(--co-semantic-border-default)}.co-modal__body:empty{display:none}.co-modal__footer{display:flex;justify-content:flex-end;gap:var(--co-spacing-md);padding:var(--co-spacing-lg) var(--co-spacing-xl) var(--co-spacing-xl);border-top:1px solid var(--co-semantic-border-default);--co-button-radius:var(--co-border-radius-xs)}.co-modal__footer--empty{display:none}.co-modal--no-dividers .co-modal__footer{border-top:none}.co-modal--no-header-divider .co-modal__body{border-top:none;padding-top:0}`;
|
|
6
6
|
|
|
7
7
|
const CoModal = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -39,6 +39,9 @@ const CoModal = class {
|
|
|
39
39
|
this.size = 'md';
|
|
40
40
|
/** Hide body section and all border dividers (compact confirm dialogs) */
|
|
41
41
|
this.noDividers = false;
|
|
42
|
+
/** Hairline between header and body. `false` lets the body run straight
|
|
43
|
+
* under the heading (Figma modals whose first row is a segmented control). */
|
|
44
|
+
this.headerDivider = true;
|
|
42
45
|
/* `:empty` can't see across a <slot>, so slotted presence is tracked in JS */
|
|
43
46
|
this.hasFooter = false;
|
|
44
47
|
this.handleFooterSlotChange = (e) => {
|
|
@@ -71,7 +74,7 @@ const CoModal = class {
|
|
|
71
74
|
this.coClose.emit();
|
|
72
75
|
}
|
|
73
76
|
render() {
|
|
74
|
-
return (h("co-overlay", { key: '
|
|
77
|
+
return (h("co-overlay", { key: '9b796364a697af4d4a0ede50e5dd5516ccaa299f', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: 'bea863aedb405cdc492277add25e2c08ea7ef258', class: "co-modal__frame co-sq-elevation-fallback" }, h("div", { key: '05f9e86f7a813243913f60c6a042fb93ed65a463', class: {
|
|
75
78
|
'co-modal': true,
|
|
76
79
|
'co-sq-clip': true,
|
|
77
80
|
'co-sq-elevation': true,
|
|
@@ -80,7 +83,8 @@ const CoModal = class {
|
|
|
80
83
|
'co-modal--lg': this.size === 'lg',
|
|
81
84
|
'co-modal--full': this.size === 'full',
|
|
82
85
|
'co-modal--no-dividers': this.noDividers,
|
|
83
|
-
|
|
86
|
+
'co-modal--no-header-divider': !this.headerDivider,
|
|
87
|
+
}, part: "modal", ref: (el) => (this.modalEl = el), role: "dialog", "aria-modal": "true", "aria-labelledby": this.heading ? 'modal-heading' : undefined, onClick: this.stopPropagation, onTransitionEnd: this.handleTransitionEnd }, h("div", { key: '8ecd9f7f4413339e484710e2abef1c21fc7f25d0', class: "co-modal__header", part: "header" }, h("slot", { key: '09df61b3aac8a26e0eb85a6a6aa48f9a7f547dbf', name: "header-leading" }), h("div", { key: '8e9a55561a1b5615f77eb3eb96284ddc68eddbc3', class: "co-modal__header-text", part: "header-text" }, h("h2", { key: '65c083247543448d9f527592cd8614a4c713cf4c', class: "co-modal__heading", part: "heading", id: "modal-heading" }, this.heading), this.description && (h("p", { key: 'c871aa6549cf56265a02048ca18f736d92d1a482', class: "co-modal__description", part: "description" }, this.description))), h("slot", { key: '106a5be71c8c03736313c1084c61d3b836ebb495', name: "header-actions" }), this.closable && (h("button", { key: 'a0df67cd09e5f414c58f9f67f6a92c58b9f4773b', class: "co-modal__close", type: "button", "aria-label": "Close", onClick: this.handleCloseClick }, h("co-icon", { key: 'e766981fff30de0c79599756dde74c5981d5c9fd', name: "x", size: 20 })))), !this.noDividers && (h("div", { key: '355e455c19cbc4a0783c0e0c2689265e6f599484', class: "co-modal__body", part: "body" }, h("slot", { key: 'fa6d3310464ff33de17618561182736bc6cef0e5' }))), h("div", { key: '43b89751fac3fd1b707a284d260e91dd7d7ea8a6', class: { 'co-modal__footer': true, 'co-modal__footer--empty': !this.hasFooter }, part: "footer" }, h("slot", { key: 'e9821b0712a6903c923f9bb50393e4b85545c211', name: "footer", onSlotchange: this.handleFooterSlotChange }))))));
|
|
84
88
|
}
|
|
85
89
|
};
|
|
86
90
|
CoModal.style = coModalCss();
|
|
@@ -13,12 +13,12 @@ const CoNavbar = class {
|
|
|
13
13
|
this.rounded = false;
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
|
-
return (h("div", { key: '
|
|
16
|
+
return (h("div", { key: '9899b395fdf793bf9b7e47509b81eb559aac0b56', class: {
|
|
17
17
|
'co-navbar': true,
|
|
18
18
|
[`co-navbar--${this.variant}`]: true,
|
|
19
19
|
[`co-navbar--${this.size}`]: true,
|
|
20
20
|
'co-navbar--rounded': this.rounded,
|
|
21
|
-
}, part: "navbar", role: "toolbar" }, h("slot", { key: '
|
|
21
|
+
}, part: "navbar", role: "toolbar" }, h("slot", { key: 'c863bcf8dc9eddab771922a81e11c1966bfe8d2e' })));
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
24
|
CoNavbar.style = coNavbarCss();
|
|
@@ -403,18 +403,18 @@ const CoNumberField = class {
|
|
|
403
403
|
return this.scaled && !this.isEmpty ? '%' : null;
|
|
404
404
|
}
|
|
405
405
|
render() {
|
|
406
|
-
return (h("div", { key: '
|
|
406
|
+
return (h("div", { key: '1bcd7e60596bc28f5159f86a026d69d0d053f038', class: {
|
|
407
407
|
'co-number-field': true,
|
|
408
408
|
'co-number-field--disabled': this.disabled,
|
|
409
409
|
'co-number-field--focused': this.focused,
|
|
410
410
|
[`co-number-field--${this.size}`]: true,
|
|
411
411
|
[`co-number-field--${this.status}`]: this.status !== 'default',
|
|
412
|
-
} }, (this.label || this.secondaryLabel) && (h("div", { key: '
|
|
412
|
+
} }, (this.label || this.secondaryLabel) && (h("div", { key: 'aca2d9958374940304e05495ae05e74d627154c7', class: "co-number-field__labels" }, this.label && h("label", { key: '8cf05675830ad181005430526785984acc793d0b', class: "co-number-field__label" }, this.label, h(RequiredMark, { key: '36aed2cf48890cf79506416d0c45f272ed329664', required: this.required })), this.secondaryLabel && h("span", { key: '636111436e1e3fff8d74fb4b9412c2192c93495a', class: "co-number-field__secondary-label" }, this.secondaryLabel))), h("div", { key: '6cbbb87a304cd9e415aafda276daede8dbe0b6a7', class: "co-number-field__row", part: "row" }, !this.hideControls && (h("button", { key: 'e11dfc41ee97b3287908877aa74f732a4cbe31fe', class: "co-number-field__btn co-number-field__btn--minus", type: "button", tabIndex: -1, disabled: !this.canDecrement, onClick: this.handleDecrement, "aria-label": "Decrease" }, h("co-icon", { key: '3f369b4d8293e9e987d18ba58fa1f010bd538016', name: "minus", size: 16 }))), h("input", { key: '8144b563cd4ae46774adbf224c45fa59378da4c7', ref: el => (this.inputEl = el), class: "co-number-field__input", type: "text", inputMode: "decimal",
|
|
413
413
|
// Mismo guard `focused` que el @Watch: mientras el usuario edita, su
|
|
414
414
|
// texto manda. Sin esto, el re-render que dispara emitValue repinta
|
|
415
415
|
// el input desde el NÚMERO y se come el texto en construcción
|
|
416
416
|
// ("34,640.00" pegado quedaba "34,640"; un "12." perdería el punto).
|
|
417
|
-
value: this.focused && this.inputEl ? this.inputEl.value : this.displayValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }), this.affixText && (h("span", { key: '
|
|
417
|
+
value: this.focused && this.inputEl ? this.inputEl.value : this.displayValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onPaste: this.handlePaste, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, part: "input" }), this.affixText && (h("span", { key: '56e8b3a225f2332f9c3974ec195b63b3681d5b09', class: "co-number-field__affix", "aria-hidden": "true" }, this.affixText)), this.clearable && !this.isEmpty && !this.disabled && (h("button", { key: 'ea8325f7097c5b0b87bd51554163d44bdfe379ff', class: "co-number-field__clear", type: "button", tabIndex: -1, onClick: this.handleClear, "aria-label": "Clear" }, h("co-icon", { key: 'c72d4e3a039752fbcf7cf4594421d24bc2f0570a', name: "x-circle", size: 16, weight: "fill" }))), h("slot", { key: '2a3dc1b5a3e22ade3db02389178dd4ae3b1d3295', name: "suffix" }), !this.hideControls && (h("button", { key: '3b9bf39d86c7aacb212576dc4cf4af548b56fbed', class: "co-number-field__btn co-number-field__btn--plus", type: "button", tabIndex: -1, disabled: !this.canIncrement, onClick: this.handleIncrement, "aria-label": "Increase" }, h("co-icon", { key: '1655aaca9e66b51c0d97fc128c132326d3c740ad', name: "plus", size: 16 })))), this.helperText && (h("div", { key: '397b37569cabdf68072d870b5e5781f7d39da8fe', class: `co-number-field__helper co-number-field__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'b574fddca9813af3e208ea3e9258480a992fd4f2', name: this.statusIcon, size: 14, weight: "fill", class: "co-number-field__helper-icon" }), h("span", { key: 'd17a39a82108f12100dee523d7754b50f147bb63', class: "co-number-field__helper-text" }, this.helperText)))));
|
|
418
418
|
}
|
|
419
419
|
get el() { return getElement(this); }
|
|
420
420
|
static get watchers() { return {
|
|
@@ -249,7 +249,7 @@ const CoOverlay = class {
|
|
|
249
249
|
focusables[nextIndex].focus();
|
|
250
250
|
}
|
|
251
251
|
render() {
|
|
252
|
-
return (h("div", { key: '
|
|
252
|
+
return (h("div", { key: '4fafc87768eca581018ff578875b2362cf5297d2', class: { 'co-overlay': true, 'co-overlay--open': this.open }, part: "overlay", popover: "manual", tabindex: this.trapFocus ? -1 : undefined, ref: (el) => (this.overlayEl = el), onClick: this.handleClick, onTransitionEnd: this.handleTransitionEnd }, h("slot", { key: '2d18410bb6774701806101d38b6d41293b0e7ff9' })));
|
|
253
253
|
}
|
|
254
254
|
get el() { return getElement(this); }
|
|
255
255
|
static get watchers() { return {
|
|
@@ -7,7 +7,7 @@ const CoPageHeader = class {
|
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
8
|
}
|
|
9
9
|
render() {
|
|
10
|
-
return (h("div", { key: '
|
|
10
|
+
return (h("div", { key: '0f064f7e659103d8f679f23242492a5e9a869a88', class: "co-page-header", part: "page-header" }, h("div", { key: '4ccd5682d2d6872a5fa771b2779a8f7e0ab8b6f7', class: "co-page-header__left" }, this.icon && (h("span", { key: '10bc9aa126f8b9932b1e4247d7c3c3c04d89c425', class: "co-page-header__icon" }, h("co-icon", { key: '42f2cda7ec8ee4e0e4a51069606492647d13f690', name: this.icon, size: 24 }))), h("span", { key: '368633ff1b213286d5f6bdf5716e3acb1cbe2f71', class: "co-page-header__title" }, h("slot", { key: 'c74f2dcde7cfc0c0384f6a10a9f069a9ff94f78d' }, this.heading))), h("div", { key: '6666c103a2e6e826837091658ce1e4e4b1704215', class: "co-page-header__actions" }, h("slot", { key: '7df47ea333491b960bc1faff7fd0b6431aba56e5', name: "actions" }))));
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
13
|
CoPageHeader.style = coPageHeaderCss();
|
|
@@ -359,7 +359,7 @@ const CoPhoneField = class {
|
|
|
359
359
|
render() {
|
|
360
360
|
const entry = this.selectedEntry;
|
|
361
361
|
const statusClass = this.status !== 'default' ? `co-phone-field--${this.status}` : '';
|
|
362
|
-
return (h("div", { key: '
|
|
362
|
+
return (h("div", { key: 'a9c32c0be0ebd40ed647e76522424eb7e5e9aa18', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: '37178a06aab45e8254fd0a366758e5302f2eaa46', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: '03a342ae39b5f17ba154b5c41f38c68ed3b017ba', required: this.required }))), h("div", { key: '1ec715b8334d174369e2cf84c1599d98f99e0a46', class: "co-phone-field__container" }, h("button", { key: '4570d47ae1b5f29777ef83934f29238f41f39c72', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (h("co-icon", { name: "phone", size: 16 })), h("span", { key: 'eeea700daa0921575451e84229f756a8b07ba2bc', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: '8a255cbcdd177d2c3df85e70cd533977401b4331', class: "co-phone-field__chevron" }, h("co-icon", { key: 'b7b7f8ae9ff2faa4aced5387cbdcafbdca3ab850', name: "caret-down", size: 14 }))), h("input", { key: '5c22124cf3b89be951b241dc5414ecfaa914f311', class: "co-phone-field__input", type: "tel", placeholder: this.placeholder, value: this.numberPart, disabled: this.disabled, onInput: (e) => this.handleNumberInput(e) })), this.isOpen && (h("div", { key: '58a86dd712fff37ae8a15aa814ecffe68872c546', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: '7641be732c29f0cb601b05a185ea10219fc45bae', class: "co-phone-field__search" }, h("input", { key: 'd77b2e9acb00dcf28babbc203b65692fb5b9c8e7', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: 'a80b7fbe6ac444f44ea802d8820b0dabff943885', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (h("div", { key: 'c24516916b7d78d89eb18d03c8b70363567db9cf', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: 'e76e608653f1b45c7904bbfe0325a2813fe6aff1', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: 'b7f14cc4ad48df862eee0ba4b45e19fe29e26baa', class: "co-phone-field__helper-text" }, this.helperText)))));
|
|
363
363
|
}
|
|
364
364
|
get host() { return getElement(this); }
|
|
365
365
|
static get watchers() { return {
|
|
@@ -19,12 +19,12 @@ const CoProgressBar = class {
|
|
|
19
19
|
render() {
|
|
20
20
|
const clamped = Math.max(0, Math.min(100, this.value));
|
|
21
21
|
const indeterminate = this.indeterminate;
|
|
22
|
-
return (h("div", { key: '
|
|
22
|
+
return (h("div", { key: 'bcf5e566cfa6726eac8578288797d1004e4003fb', class: {
|
|
23
23
|
'co-progress-bar': true,
|
|
24
24
|
[`co-progress-bar--${this.status}`]: true,
|
|
25
25
|
[`co-progress-bar--${this.variant}`]: true,
|
|
26
26
|
'co-progress-bar--indeterminate': indeterminate,
|
|
27
|
-
}, role: "progressbar", "aria-valuenow": indeterminate ? undefined : clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, h("div", { key: '
|
|
27
|
+
}, role: "progressbar", "aria-valuenow": indeterminate ? undefined : clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "bar", style: { height: `${this.thickness}px` } }, h("div", { key: '932537ab1521b2d7fcd0e1bb57c027a276dacaf3', class: "co-progress-bar__fill", style: indeterminate ? undefined : { width: `${clamped}%` } })));
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
30
|
CoProgressBar.style = coProgressBarCss();
|
|
@@ -20,7 +20,7 @@ const CoProgressCircle = class {
|
|
|
20
20
|
const clamped = Math.max(0, Math.min(100, this.value));
|
|
21
21
|
const angle = (clamped / 100) * 360;
|
|
22
22
|
const safeStroke = Math.min(this.strokeWidth, this.size / 2);
|
|
23
|
-
return (h("div", { key: '
|
|
23
|
+
return (h("div", { key: 'bc100ca3ef731aab3168a247098102b8e9ab9537', class: {
|
|
24
24
|
'co-progress-circle': true,
|
|
25
25
|
[`co-progress-circle--${this.status}`]: true,
|
|
26
26
|
}, role: "progressbar", "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": 100, part: "circle", style: {
|
|
@@ -28,7 +28,7 @@ const CoProgressCircle = class {
|
|
|
28
28
|
height: `${this.size}px`,
|
|
29
29
|
'--co-pc-angle': `${angle}deg`,
|
|
30
30
|
'--co-pc-stroke': `${safeStroke}px`,
|
|
31
|
-
} }, h("div", { key: '
|
|
31
|
+
} }, h("div", { key: '48862f1f57c0bb8cd6e03c2f0a84a1ae324d3ec1', class: "co-progress-circle__track" }), this.showLabel && (h("span", { key: '0ff2c6995740504e1df9b11dfa10e0a9f9d368c5', class: "co-progress-circle__label" }, clamped, "%"))));
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
34
|
CoProgressCircle.style = coProgressCircleCss();
|
|
@@ -96,7 +96,7 @@ const CoSkeleton = class {
|
|
|
96
96
|
const style = { width: this.width };
|
|
97
97
|
if (this.height)
|
|
98
98
|
style.height = this.height;
|
|
99
|
-
return (h("div", { key: '
|
|
99
|
+
return (h("div", { key: '45da8e989feca14de295c7b83bfd8f5e196a9734', class: {
|
|
100
100
|
'co-skeleton': true,
|
|
101
101
|
[`co-skeleton--${this.variant}`]: true,
|
|
102
102
|
'co-skeleton--revealed': this.revealed,
|
|
@@ -22,15 +22,15 @@ const CoRadio = class {
|
|
|
22
22
|
};
|
|
23
23
|
}
|
|
24
24
|
render() {
|
|
25
|
-
return (h("div", { key: '
|
|
25
|
+
return (h("div", { key: '59335ec237efb379852efc4fabcb7cbb37632a1e', class: {
|
|
26
26
|
'co-radio-row': true,
|
|
27
27
|
'co-radio-row--disabled': this.disabled,
|
|
28
|
-
}, onClick: this.handleClick }, h("button", { key: '
|
|
28
|
+
}, onClick: this.handleClick }, h("button", { key: 'dc726deac041e9df4cb34f60a473350426ed2cbc', role: "radio", "aria-checked": String(this.checked), "aria-label": this.label || '', class: {
|
|
29
29
|
'co-radio': true,
|
|
30
30
|
[`co-radio--${this.size}`]: true,
|
|
31
31
|
'co-radio--checked': this.checked,
|
|
32
32
|
'co-radio--disabled': this.disabled,
|
|
33
|
-
}, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: '
|
|
33
|
+
}, disabled: this.disabled, part: "circle" }), this.label && (h("span", { key: 'bf2602521d20f806283884ba3ebbab4ff4ef0c70', class: "co-radio__label", part: "label" }, this.label))));
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
36
|
CoRadio.style = coRadioCss();
|
|
@@ -41,16 +41,16 @@ const CoRating = class {
|
|
|
41
41
|
const iconSize = this.size === 'large' ? 28 : 20;
|
|
42
42
|
const active = this.hoverValue || this.value;
|
|
43
43
|
const stars = Array.from({ length: this.max }, (_, i) => i + 1);
|
|
44
|
-
return (h("div", { key: '
|
|
44
|
+
return (h("div", { key: 'a825b7cf49067c0a12ccddb81554c172d90a888f', class: {
|
|
45
45
|
'co-rating': true,
|
|
46
46
|
'co-rating--disabled': this.disabled,
|
|
47
47
|
'co-rating--readonly': this.readOnly,
|
|
48
48
|
[`co-rating--${this.size}`]: true,
|
|
49
|
-
} }, this.label && h("label", { key: '
|
|
49
|
+
} }, this.label && h("label", { key: '354b3b676401d0265e5f64aed1b137b97a147468', class: "co-rating__label" }, this.label), h("div", { key: '29c8af2cde2482ac803e75025dc5533c7051c2ff', class: "co-rating__stars", onMouseLeave: this.handleMouseLeave }, stars.map(star => (h("button", { class: {
|
|
50
50
|
'co-rating__star': true,
|
|
51
51
|
'co-rating__star--active': star <= active,
|
|
52
52
|
'co-rating__star--hover': this.hoverValue > 0 && star <= this.hoverValue,
|
|
53
|
-
}, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (h("div", { key: '
|
|
53
|
+
}, type: "button", tabIndex: this.disabled || this.readOnly ? -1 : 0, disabled: this.disabled, onClick: () => this.handleClick(star), onMouseEnter: () => this.handleMouseEnter(star), "aria-label": `${star} of ${this.max}` }, h("co-icon", { name: this.icon, size: iconSize, weight: star <= active ? 'fill' : 'regular' }))))), this.helperText && (h("div", { key: '0fcc95b7e125f1ef57c67ed9e46d4511da5d3eaa', class: `co-rating__helper co-rating__helper--${this.status}` }, this.statusIcon && h("co-icon", { key: 'c9cb1f60e902c0b52a45225bedacd92ba08ae0b4', name: this.statusIcon, size: 14, weight: "fill", class: "co-rating__helper-icon" }), h("span", { key: '8a5479175de97fccb5947f2f8f2c87888481b104', class: "co-rating__helper-text" }, this.helperText)))));
|
|
54
54
|
}
|
|
55
55
|
};
|
|
56
56
|
CoRating.style = coRatingCss();
|