@prolibu-suite/cobalt-core 0.1.0 → 0.1.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/README.md +84 -0
- package/custom-elements.json +1 -1
- package/dist/cjs/co-combobox.cjs.entry.js +1 -1
- package/dist/cjs/co-popover.cjs.entry.js +1 -1
- package/dist/cobalt/cobalt.esm.js +1 -1
- package/dist/cobalt/{p-4ce98a64.entry.js → p-1d91ec93.entry.js} +1 -1
- package/dist/cobalt/{p-a477d23a.entry.js → p-ff6a647c.entry.js} +1 -1
- package/dist/collection/components/co-combobox/co-combobox.css +1 -1
- package/dist/collection/components/co-popover/co-popover.css +1 -1
- package/dist/components/co-combobox.js +1 -1
- package/dist/components/co-menu-item.js +1 -1
- package/dist/components/co-menu.js +1 -1
- package/dist/components/co-popover.js +1 -1
- package/dist/components/co-ref-field.js +1 -1
- package/dist/components/co-select.js +1 -1
- package/dist/components/{p-Dv_iMPy0.js → p-FBICWTuN.js} +1 -1
- package/dist/esm/co-combobox.entry.js +1 -1
- package/dist/esm/co-popover.entry.js +1 -1
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# @prolibu-suite/cobalt-core
|
|
2
|
+
|
|
3
|
+
53 Web Components `co-*` framework-agnostic del **Cobalt Design System**, construidos con [Stencil](https://stenciljs.com/).
|
|
4
|
+
|
|
5
|
+
> Elemento #27. El azul que no se desvanece. La estructura invisible que hace que todo funcione.
|
|
6
|
+
|
|
7
|
+
## Instalación
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @prolibu-suite/cobalt-core @prolibu-suite/cobalt-tokens
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Uso
|
|
14
|
+
|
|
15
|
+
### Vue / React / Svelte / cualquier bundler
|
|
16
|
+
|
|
17
|
+
```js
|
|
18
|
+
// main.js — registra todos los custom elements
|
|
19
|
+
import { defineCustomElements } from '@prolibu-suite/cobalt-core/loader';
|
|
20
|
+
defineCustomElements(window);
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
```html
|
|
24
|
+
<co-button label="Guardar" variant="primary"></co-button>
|
|
25
|
+
<co-input label="Email" icon-left="envelope"></co-input>
|
|
26
|
+
<co-icon name="bell" weight="fill"></co-icon>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### Vue 3 — configurar custom elements
|
|
30
|
+
|
|
31
|
+
```js
|
|
32
|
+
// vite.config.js
|
|
33
|
+
export default {
|
|
34
|
+
plugins: [vue({
|
|
35
|
+
template: {
|
|
36
|
+
compilerOptions: { isCustomElement: (tag) => tag.startsWith('co-') }
|
|
37
|
+
}
|
|
38
|
+
})]
|
|
39
|
+
};
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Sin build · vía CDN
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<!DOCTYPE html>
|
|
46
|
+
<html>
|
|
47
|
+
<head>
|
|
48
|
+
<link rel="stylesheet" href="https://unpkg.com/@prolibu-suite/cobalt-tokens@0.1.1/build/css/tokens.css">
|
|
49
|
+
<script type="module" src="https://unpkg.com/@prolibu-suite/cobalt-core@0.1.1/dist/cobalt/cobalt.esm.js"></script>
|
|
50
|
+
</head>
|
|
51
|
+
<body>
|
|
52
|
+
<co-button label="Guardar" variant="primary"></co-button>
|
|
53
|
+
<co-input label="Email" icon-left="envelope"></co-input>
|
|
54
|
+
</body>
|
|
55
|
+
</html>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Wrappers framework-específicos
|
|
59
|
+
|
|
60
|
+
Para tipado completo y mejor DX, usá los wrappers oficiales:
|
|
61
|
+
|
|
62
|
+
- [`@prolibu-suite/cobalt-vue`](https://www.npmjs.com/package/@prolibu-suite/cobalt-vue) — Vue 3
|
|
63
|
+
- [`@prolibu-suite/cobalt-react`](https://www.npmjs.com/package/@prolibu-suite/cobalt-react) — React 17/18/19
|
|
64
|
+
|
|
65
|
+
## Componentes incluidos
|
|
66
|
+
|
|
67
|
+
Botones, inputs, selects, tablas, modales, drawers, tabs, tooltips, popovers, badges, chips, sidebars, autocomplete, combobox, transfer-list… 53 en total. Ver la [referencia completa](https://dev10.prolibu.com/ui/static/cobalt-docs/componentes/co-button/).
|
|
68
|
+
|
|
69
|
+
## Iconos
|
|
70
|
+
|
|
71
|
+
`<co-icon>` usa [Phosphor Icons](https://phosphoricons.com/) en kebab-case:
|
|
72
|
+
|
|
73
|
+
```html
|
|
74
|
+
<co-icon name="magnifying-glass"></co-icon>
|
|
75
|
+
<co-icon name="bell" weight="fill" size="20"></co-icon>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## Documentación
|
|
79
|
+
|
|
80
|
+
→ [cobalt-docs](https://dev10.prolibu.com/ui/static/cobalt-docs/) — referencia completa, ejemplos y guías de theming.
|
|
81
|
+
|
|
82
|
+
## License
|
|
83
|
+
|
|
84
|
+
MIT
|
package/custom-elements.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-BEovErzl.js');
|
|
4
4
|
|
|
5
|
-
const coComboboxCss = () => `: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-combobox{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-combobox__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-combobox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-combobox__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-combobox__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-
|
|
5
|
+
const coComboboxCss = () => `: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-combobox{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-combobox__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-combobox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-combobox__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-combobox__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease;overflow:hidden}.co-combobox--open .co-combobox__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-combobox--disabled .co-combobox__trigger{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-combobox__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__icon{color:var(--co-semantic-text-disabled)}.co-combobox__input-wrapper{flex:1;display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-width:0;min-height:24px;padding:var(--co-spacing-xxs) 0;overflow:hidden}.co-combobox__input-wrapper co-chip{--co-chip-max-width:120px;--co-chip-bg:var(--co-semantic-surface-muted);--co-chip-color:var(--co-semantic-text-default);--co-chip-border:1px solid var(--co-semantic-border-subtle);flex-shrink:0}.co-combobox__overflow-badge{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-info, #2563eb);color:#fff;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-10);font-weight:600;line-height:1;white-space:nowrap}.co-combobox__text{color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-combobox__text--placeholder{color:var(--co-semantic-text-muted)}.co-combobox--disabled .co-combobox__text{color:var(--co-semantic-text-disabled)}.co-combobox__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-combobox__clear:hover{color:var(--co-semantic-text-default)}.co-combobox__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__caret{color:var(--co-semantic-text-disabled)}.co-combobox__dropdown{padding:var(--co-spacing-md);display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-combobox__search{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-sm2);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);overflow:hidden;height:32px;box-sizing:border-box}.co-combobox__search-icon{flex-shrink:0;color:var(--co-semantic-text-muted);opacity:0.7;display:flex;align-items:center}.co-combobox__search-input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--co-font-size-12, 12px);font-weight:500;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-combobox__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-combobox__options{max-height:280px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--co-semantic-border-subtle) transparent}.co-combobox__options::-webkit-scrollbar{width:6px}.co-combobox__options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.co-combobox__options::-webkit-scrollbar-thumb{background:var(--co-semantic-border-subtle);border-radius:3px;transition:background 0.15s ease}.co-combobox__options::-webkit-scrollbar-thumb:hover{background:var(--co-semantic-text-muted)}.co-combobox__virtual-spacer{width:100%}.co-combobox__option{display:flex;align-items:center;justify-content:space-between;padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);cursor:pointer;height:32px;margin-bottom:2px;box-sizing:border-box;transition:background 0.1s ease}.co-combobox__option:hover{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-combobox__option-content{display:flex;align-items:center;gap:var(--co-spacing-sm2);flex:1;min-width:0}.co-combobox__option-icon-wrapper{width:24px;height:24px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}.co-combobox__option-icon{color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox__option-label{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-combobox__option-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;overflow:hidden;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-combobox__option-remove:hover{color:var(--co-semantic-text-default)}.co-combobox__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-combobox__footer{display:flex;gap:var(--co-spacing-sm2);padding-top:var(--co-spacing-sm2)}.co-combobox__footer-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity 0.15s ease;box-sizing:border-box;min-height:32px}.co-combobox__footer-btn:hover{opacity:0.85}.co-combobox__footer-btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-combobox__footer-btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}`;
|
|
6
6
|
|
|
7
7
|
const CoCombobox = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var index = require('./index-BEovErzl.js');
|
|
4
4
|
var positioning = require('./positioning-DozpXyBd.js');
|
|
5
5
|
|
|
6
|
-
const coPopoverCss = () => `:host{display:inline-block;position:relative}:host([match-width]){display:block;width:100%}.co-popover{display:block;width:100%}.co-popover__trigger{display:block;width:100%;cursor:pointer}.co-popover__panel{position:fixed;top:0;left:0;z-index:10000;visibility:hidden;background:var(--co-semantic-surface-
|
|
6
|
+
const coPopoverCss = () => `:host{display:inline-block;position:relative}:host([match-width]){display:block;width:100%}.co-popover{display:block;width:100%}.co-popover__trigger{display:block;width:100%;cursor:pointer}.co-popover__panel{position:fixed;top:0;left:0;z-index:10000;visibility:hidden;background:var(--co-semantic-surface-page, #fff);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:visible}.co-popover__panel--positioned{visibility:visible}`;
|
|
7
7
|
|
|
8
8
|
const CoPopover = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,g as a,b as l}from"./p-B0lqrhFo.js";export{s as setNonce}from"./p-B0lqrhFo.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((async e=>(await a(),l(JSON.parse('[["p-7028880b",[[1,"co-icon",{"name":[1],"weight":[1],"size":[2],"svgContent":[32]},null,{"name":[{"onPropsChange":0}],"weight":[{"onPropsChange":0}]}]]],["p-72113ec2",[[1,"co-autocomplete",{"label":[1],"secondaryLabel":[1,"secondary-label"],"placeholder":[1],"disabled":[4],"iconLeft":[1,"icon-left"],"clearable":[4],"helperText":[1,"helper-text"],"status":[1],"options":[1],"value":[1025],"multiple":[4],"loading":[4],"minChars":[2,"min-chars"],"debounce":[2],"emptyText":[1,"empty-text"],"isOpen":[32],"query":[32],"scrollTop":[32],"focused":[32]},[[4,"click","handleDocumentClick"]],{"options":[{"onOptionsChange":0}]}]]],["p-4ce98a64",[[1,"co-combobox",{"label":[1],"secondaryLabel":[1,"secondary-label"],"placeholder":[1],"disabled":[4],"iconLeft":[1,"icon-left"],"clearable":[4],"searchable":[4],"searchPlaceholder":[1,"search-placeholder"],"showFooter":[4,"show-footer"],"footerPrimaryLabel":[1,"footer-primary-label"],"footerSecondaryLabel":[1,"footer-secondary-label"],"options":[1],"value":[1025],"multiple":[4],"helperText":[1,"helper-text"],"isOpen":[32],"searchQuery":[32],"overflowCount":[32],"scrollTop":[32]},null,{"isOpen":[{"onOpenChange":0}],"value":[{"onValueChange":0}]}]]],["p-4e7ce8ee",[[257,"co-drawer",{"open":[1540],"position":[513],"size":[513],"heading":[1],"closable":[4],"closeOnOverlay":[4,"close-on-overlay"],"closeOnEscape":[4,"close-on-escape"],"loading":[4]},[[4,"keydown","handleKey"]],{"open":[{"onOpenChange":0}]}]]],["p-1d3338b6",[[1,"co-ref-field",{"label":[1],"secondaryLabel":[1,"secondary-label"],"placeholder":[1],"disabled":[4],"clearable":[4],"multiple":[4],"status":[1],"helperText":[1,"helper-text"],"iconLeft":[1,"icon-left"],"value":[1025],"options":[1],"selectedDisplay":[1,"selected-display"],"loading":[4],"total":[2],"searchable":[4],"searchPlaceholder":[1,"search-placeholder"],"searchDebounce":[2,"search-debounce"],"emptyMessage":[1,"empty-message"],"createLabel":[1,"create-label"],"showFooter":[4,"show-footer"],"footerPrimaryLabel":[1,"footer-primary-label"],"footerSecondaryLabel":[1,"footer-secondary-label"],"maxChips":[2,"max-chips"],"isOpen":[32],"searchText":[32]},null,{"isOpen":[{"onOpenChange":0}]}]]],["p-ebd68f56",[[257,"co-command-search",{"open":[1540],"placeholder":[1],"items":[1],"emptyMessage":[1,"empty-message"],"query":[32],"activeIndex":[32]},null,{"open":[{"onOpenChange":0}]}]]],["p-4dd7499c",[[260,"co-data-table",{"columns":[1],"rows":[1],"rowKey":[1,"row-key"],"loading":[4],"skeletonRows":[2,"skeleton-rows"],"emptyTitle":[1,"empty-title"],"emptyMessage":[1,"empty-message"],"emptyIcon":[1,"empty-icon"],"sortField":[1537,"sort-field"],"sortOrder":[1537,"sort-order"],"selectable":[4],"selectedKeys":[1025,"selected-keys"],"resizable":[4],"parsedColumns":[32],"parsedRows":[32],"parsedSelectedKeys":[32],"columnWidths":[32],"resizingColumn":[32],"resizeStartX":[32],"resizeStartWidth":[32]},null,{"columns":[{"parseColumns":0}],"rows":[{"parseRows":0}],"selectedKeys":[{"parseSelectedKeys":0}]}]]],["p-e808916c",[[257,"co-menu-item",{"icon":[1],"label":[1],"dense":[4],"disabled":[4],"variant":[1],"hasSubmenu":[32],"submenuOpen":[32],"focusItem":[64]}]]],["p-b89d54d9",[[257,"co-modal",{"open":[1540],"heading":[1],"description":[1],"closable":[4],"closeOnOverlay":[4,"close-on-overlay"]}]]],["p-689e38b3",[[1,"co-select",{"label":[1],"secondaryLabel":[1,"secondary-label"],"placeholder":[1],"disabled":[4],"iconLeft":[1,"icon-left"],"clearable":[4],"helperText":[1,"helper-text"],"status":[1],"options":[1],"value":[1025],"multiple":[4],"isOpen":[32],"scrollTop":[32]},null,{"isOpen":[{"onOpenChange":0}]}]]],["p-d9d8b10e",[[257,"co-accordion",{"open":[1540],"heading":[1],"disabled":[4]}]]],["p-08afdc51",[[1,"co-avatar",{"type":[1],"size":[1],"text":[1],"icon":[1],"iconWeight":[1,"icon-weight"],"shape":[1],"color":[1]}]]],["p-9a5c6600",[[257,"co-button",{"variant":[1],"shape":[1],"size":[1],"disabled":[4],"label":[1],"iconLeft":[1,"icon-left"],"iconRight":[1,"icon-right"],"iconWeight":[1,"icon-weight"],"type":[1]}]]],["p-b6840df4",[[1,"co-checkbox-group",{"label":[1],"secondaryLabel":[1,"secondary-label"],"helperText":[1,"helper-text"],"status":[1],"value":[1025],"options":[1],"direction":[1],"size":[1],"disabled":[4]},null,{"value":[{"onValueChange":0}]}]]],["p-4d8ff00a",[[1,"co-data-table-pagination",{"page":[1538],"pageSize":[1538,"page-size"],"totalCount":[2,"total-count"],"pageSizes":[1,"page-sizes"],"perPageLabel":[1,"per-page-label"],"recordsLabel":[1,"records-label"],"jumpToPageLabel":[1,"jump-to-page-label"],"previousLabel":[1,"previous-label"],"nextLabel":[1,"next-label"],"parsedPageSizes":[32],"jumpToValue":[32],"showPageSizeDropdown":[32]},null,{"pageSizes":[{"parsePageSizes":0}]}]]],["p-a1b248ad",[[1,"co-date-range",{"value":[1025],"label":[1],"placeholder":[1],"disabled":[4],"clearable":[4],"presets":[4],"status":[1],"helperText":[1,"helper-text"],"locale":[1],"presetTodayLabel":[1,"preset-today-label"],"presetThisWeekLabel":[1,"preset-this-week-label"],"presetThisMonthLabel":[1,"preset-this-month-label"],"presetLast30DaysLabel":[1,"preset-last-3-0-days-label"],"presetLast90DaysLabel":[1,"preset-last-9-0-days-label"],"presetThisYearLabel":[1,"preset-this-year-label"],"applyLabel":[1,"apply-label"],"clearLabel":[1,"clear-label"],"isOpen":[32],"draftFrom":[32],"draftTo":[32],"hoverDay":[32],"viewMonth":[32],"viewYear":[32]},null,{"value":[{"onValueChange":0}]}]]],["p-d29c77cb",[[257,"co-empty-state",{"icon":[1],"heading":[1],"description":[1]}]]],["p-ebd1555e",[[1,"co-fab",{"icon":[1],"label":[1],"variant":[1],"size":[1],"disabled":[4],"position":[1]}]]],["p-e50c4c6f",[[257,"co-helper-text",{"status":[1],"message":[1]}]]],["p-da55678f",[[1,"co-icon-button",{"variant":[1],"shape":[1],"size":[1],"disabled":[4],"label":[1],"icon":[1],"iconWeight":[1,"icon-weight"]}]]],["p-37c1f700",[[257,"co-input",{"label":[1],"secondaryLabel":[1,"secondary-label"],"placeholder":[1],"value":[1025],"helperText":[1,"helper-text"],"disabled":[4],"readonly":[4],"clearable":[4],"iconLeft":[1,"icon-left"],"iconRight":[1,"icon-right"],"layout":[1],"type":[1],"name":[1],"required":[4],"autocomplete":[1],"status":[1],"actionLabel":[1,"action-label"],"actionIcon":[1,"action-icon"],"hasFocus":[32]}]]],["p-8e54e74d",[[257,"co-list-item",{"label":[1],"description":[1],"icon":[1],"selected":[516],"disabled":[4],"dense":[516]}]]],["p-1021f612",[[257,"co-menu",{"placement":[1],"offset":[2],"autoClose":[4,"auto-close"],"open":[1540],"focusFirstItem":[64]},[[0,"coMenuSelect","handleMenuSelect"]],{"open":[{"onOpenChange":0}]}]]],["p-fe1447a3",[[1,"co-number-field",{"label":[1],"secondaryLabel":[1,"secondary-label"],"helperText":[1,"helper-text"],"status":[1],"value":[1538],"min":[2],"max":[2],"step":[2],"disabled":[4],"placeholder":[1],"focused":[32]}]]],["p-e2c9cb00",[[257,"co-page-header",{"heading":[1],"icon":[1]}]]],["p-a4d55b1a",[[1,"co-radio-group",{"label":[1],"secondaryLabel":[1,"secondary-label"],"helperText":[1,"helper-text"],"status":[1],"value":[1025],"options":[1],"direction":[1],"size":[1],"disabled":[4],"name":[1]},null,{"value":[{"onValueChange":0}]}]]],["p-319937c3",[[1,"co-rating",{"label":[1],"value":[1538],"max":[2],"size":[1],"disabled":[4],"readOnly":[4,"read-only"],"icon":[1],"helperText":[1,"helper-text"],"status":[1],"hoverValue":[32]}]]],["p-a470b764",[[1,"co-sidebar-nav",{"items":[1],"activeKey":[513,"active-key"],"mode":[513],"searchable":[4],"searchPlaceholder":[1,"search-placeholder"],"search":[1],"iconMap":[1,"icon-map"],"translations":[1],"searchText":[32],"expandedKeys":[32],"flyoutKey":[32],"flyoutPosition":[32]},null,{"iconMap":[{"onIconMapChange":0}],"translations":[{"onTranslationsChange":0}],"search":[{"onSearchChange":0}],"activeKey":[{"onActiveKeyChange":0}],"items":[{"onItemsChange":0}]}]]],["p-416bb5ae",[[1,"co-slider",{"label":[1],"secondaryLabel":[1,"secondary-label"],"helperText":[1,"helper-text"],"status":[1],"value":[1026],"min":[2],"max":[2],"step":[2],"disabled":[4],"showValue":[4,"show-value"],"showMarks":[4,"show-marks"],"dragging":[32]}]]],["p-9887b828",[[1,"co-switch",{"checked":[1540],"disabled":[4],"label":[1],"secondaryLabel":[1,"secondary-label"],"helperText":[1,"helper-text"],"status":[1]}]]],["p-fb047df8",[[1,"co-tab",{"label":[1],"value":[1],"selected":[1540],"size":[1],"iconLeft":[1,"icon-left"],"iconRight":[1,"icon-right"],"disabled":[4]}]]],["p-a7fa4484",[[257,"co-toast",{"message":[1],"description":[1],"icon":[1],"dismissible":[4],"actionsLayout":[1,"actions-layout"],"variant":[1]}]]],["p-ca41eec2",[[1,"co-toggle-button",{"selected":[1540],"value":[1],"label":[1],"iconLeft":[1,"icon-left"],"iconRight":[1,"icon-right"],"size":[1],"disabled":[4]}]]],["p-f051f44d",[[1,"co-transfer-list",{"label":[1],"leftTitle":[1,"left-title"],"rightTitle":[1,"right-title"],"options":[1],"value":[1025],"disabled":[4],"helperText":[1,"helper-text"],"status":[1],"leftChecked":[32],"rightChecked":[32]}]]],["p-5a13e3a0",[[257,"co-app-shell",{"sidebarMode":[1537,"sidebar-mode"],"contentCard":[4,"content-card"]}]]],["p-1b5c723a",[[1,"co-badge",{"size":[1],"color":[1]}]]],["p-1d7da33f",[[257,"co-button-group",{"variant":[1],"size":[1],"direction":[1],"disabled":[4]}]]],["p-230a23f3",[[257,"co-card",{"variant":[1],"padding":[1],"clickable":[4]}]]],["p-6793c51e",[[1,"co-menu-divider"]]],["p-ba84631a",[[257,"co-navbar",{"variant":[1],"size":[1],"rounded":[4]}]]],["p-1b7d6808",[[1,"co-progress-bar",{"value":[2],"status":[1],"variant":[1],"thickness":[2]}]]],["p-4cf6d1f4",[[1,"co-radio",{"checked":[1540],"size":[1],"disabled":[4],"label":[1],"value":[1]}]]],["p-3b2f7959",[[257,"co-row",{"position":[1],"size":[1]}]]],["p-697df797",[[1,"co-separator",{"vertical":[516],"spaced":[520],"inset":[520],"color":[1],"size":[1],"dark":[516]}]]],["p-c7517f86",[[257,"co-sidebar",{"mode":[1537]}]]],["p-31bc842d",[[257,"co-tab-group",{"value":[1537]},[[0,"coTabSelect","onTabSelect"]],{"value":[{"watchValue":0}]}]]],["p-92c39eed",[[257,"co-toggle-button-group",{"value":[1025],"multiple":[4],"size":[1],"disabled":[4],"direction":[1]},[[0,"coToggle","handleToggle"]],{"value":[{"syncChildren":0}]}]]],["p-dc5598d1",[[257,"co-tooltip",{"content":[1],"placement":[1],"offset":[2],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"disabled":[4],"arrow":[4],"flip":[4],"maxWidth":[1,"max-width"],"visible":[32],"actualPlacement":[32]},null,{"visible":[{"onVisibleChange":0}],"disabled":[{"onDisabledChange":0}]}]]],["p-cc93ab05",[[1,"co-checkbox",{"checked":[1540],"indeterminate":[1540],"size":[1],"disabled":[4],"label":[1],"value":[1]}]]],["p-4905b51d",[[257,"co-chip",{"shape":[1],"size":[1],"iconMode":[1,"icon-mode"],"variant":[1],"color":[1],"label":[1],"iconLeft":[1,"icon-left"],"iconRight":[1,"icon-right"],"iconWeight":[1,"icon-weight"],"removable":[4],"clickable":[4],"disabled":[4],"selected":[1540]}]]],["p-c9b0e73f",[[1,"co-loader",{"visible":[516],"overlay":[516],"size":[513],"text":[1],"background":[1]}]]],["p-4ffba5a3",[[257,"co-overlay",{"open":[1540]}]]],["p-a477d23a",[[257,"co-popover",{"open":[1540],"placement":[1],"matchWidth":[516,"match-width"],"offset":[2],"closeOnClickOutside":[4,"close-on-click-outside"],"closeOnEscape":[4,"close-on-escape"],"flip":[4],"toggle":[64],"show":[64],"hide":[64]},null,{"open":[{"onOpenChange":0}]}]]]]'),e))));
|
|
1
|
+
import{p as e,g as a,b as l}from"./p-B0lqrhFo.js";export{s as setNonce}from"./p-B0lqrhFo.js";(()=>{const a=import.meta.url,l={};return""!==a&&(l.resourcesUrl=new URL(".",a).href),e(l)})().then((async e=>(await a(),l(JSON.parse('[["p-7028880b",[[1,"co-icon",{"name":[1],"weight":[1],"size":[2],"svgContent":[32]},null,{"name":[{"onPropsChange":0}],"weight":[{"onPropsChange":0}]}]]],["p-72113ec2",[[1,"co-autocomplete",{"label":[1],"secondaryLabel":[1,"secondary-label"],"placeholder":[1],"disabled":[4],"iconLeft":[1,"icon-left"],"clearable":[4],"helperText":[1,"helper-text"],"status":[1],"options":[1],"value":[1025],"multiple":[4],"loading":[4],"minChars":[2,"min-chars"],"debounce":[2],"emptyText":[1,"empty-text"],"isOpen":[32],"query":[32],"scrollTop":[32],"focused":[32]},[[4,"click","handleDocumentClick"]],{"options":[{"onOptionsChange":0}]}]]],["p-1d91ec93",[[1,"co-combobox",{"label":[1],"secondaryLabel":[1,"secondary-label"],"placeholder":[1],"disabled":[4],"iconLeft":[1,"icon-left"],"clearable":[4],"searchable":[4],"searchPlaceholder":[1,"search-placeholder"],"showFooter":[4,"show-footer"],"footerPrimaryLabel":[1,"footer-primary-label"],"footerSecondaryLabel":[1,"footer-secondary-label"],"options":[1],"value":[1025],"multiple":[4],"helperText":[1,"helper-text"],"isOpen":[32],"searchQuery":[32],"overflowCount":[32],"scrollTop":[32]},null,{"isOpen":[{"onOpenChange":0}],"value":[{"onValueChange":0}]}]]],["p-4e7ce8ee",[[257,"co-drawer",{"open":[1540],"position":[513],"size":[513],"heading":[1],"closable":[4],"closeOnOverlay":[4,"close-on-overlay"],"closeOnEscape":[4,"close-on-escape"],"loading":[4]},[[4,"keydown","handleKey"]],{"open":[{"onOpenChange":0}]}]]],["p-1d3338b6",[[1,"co-ref-field",{"label":[1],"secondaryLabel":[1,"secondary-label"],"placeholder":[1],"disabled":[4],"clearable":[4],"multiple":[4],"status":[1],"helperText":[1,"helper-text"],"iconLeft":[1,"icon-left"],"value":[1025],"options":[1],"selectedDisplay":[1,"selected-display"],"loading":[4],"total":[2],"searchable":[4],"searchPlaceholder":[1,"search-placeholder"],"searchDebounce":[2,"search-debounce"],"emptyMessage":[1,"empty-message"],"createLabel":[1,"create-label"],"showFooter":[4,"show-footer"],"footerPrimaryLabel":[1,"footer-primary-label"],"footerSecondaryLabel":[1,"footer-secondary-label"],"maxChips":[2,"max-chips"],"isOpen":[32],"searchText":[32]},null,{"isOpen":[{"onOpenChange":0}]}]]],["p-ebd68f56",[[257,"co-command-search",{"open":[1540],"placeholder":[1],"items":[1],"emptyMessage":[1,"empty-message"],"query":[32],"activeIndex":[32]},null,{"open":[{"onOpenChange":0}]}]]],["p-4dd7499c",[[260,"co-data-table",{"columns":[1],"rows":[1],"rowKey":[1,"row-key"],"loading":[4],"skeletonRows":[2,"skeleton-rows"],"emptyTitle":[1,"empty-title"],"emptyMessage":[1,"empty-message"],"emptyIcon":[1,"empty-icon"],"sortField":[1537,"sort-field"],"sortOrder":[1537,"sort-order"],"selectable":[4],"selectedKeys":[1025,"selected-keys"],"resizable":[4],"parsedColumns":[32],"parsedRows":[32],"parsedSelectedKeys":[32],"columnWidths":[32],"resizingColumn":[32],"resizeStartX":[32],"resizeStartWidth":[32]},null,{"columns":[{"parseColumns":0}],"rows":[{"parseRows":0}],"selectedKeys":[{"parseSelectedKeys":0}]}]]],["p-e808916c",[[257,"co-menu-item",{"icon":[1],"label":[1],"dense":[4],"disabled":[4],"variant":[1],"hasSubmenu":[32],"submenuOpen":[32],"focusItem":[64]}]]],["p-b89d54d9",[[257,"co-modal",{"open":[1540],"heading":[1],"description":[1],"closable":[4],"closeOnOverlay":[4,"close-on-overlay"]}]]],["p-689e38b3",[[1,"co-select",{"label":[1],"secondaryLabel":[1,"secondary-label"],"placeholder":[1],"disabled":[4],"iconLeft":[1,"icon-left"],"clearable":[4],"helperText":[1,"helper-text"],"status":[1],"options":[1],"value":[1025],"multiple":[4],"isOpen":[32],"scrollTop":[32]},null,{"isOpen":[{"onOpenChange":0}]}]]],["p-d9d8b10e",[[257,"co-accordion",{"open":[1540],"heading":[1],"disabled":[4]}]]],["p-08afdc51",[[1,"co-avatar",{"type":[1],"size":[1],"text":[1],"icon":[1],"iconWeight":[1,"icon-weight"],"shape":[1],"color":[1]}]]],["p-9a5c6600",[[257,"co-button",{"variant":[1],"shape":[1],"size":[1],"disabled":[4],"label":[1],"iconLeft":[1,"icon-left"],"iconRight":[1,"icon-right"],"iconWeight":[1,"icon-weight"],"type":[1]}]]],["p-b6840df4",[[1,"co-checkbox-group",{"label":[1],"secondaryLabel":[1,"secondary-label"],"helperText":[1,"helper-text"],"status":[1],"value":[1025],"options":[1],"direction":[1],"size":[1],"disabled":[4]},null,{"value":[{"onValueChange":0}]}]]],["p-4d8ff00a",[[1,"co-data-table-pagination",{"page":[1538],"pageSize":[1538,"page-size"],"totalCount":[2,"total-count"],"pageSizes":[1,"page-sizes"],"perPageLabel":[1,"per-page-label"],"recordsLabel":[1,"records-label"],"jumpToPageLabel":[1,"jump-to-page-label"],"previousLabel":[1,"previous-label"],"nextLabel":[1,"next-label"],"parsedPageSizes":[32],"jumpToValue":[32],"showPageSizeDropdown":[32]},null,{"pageSizes":[{"parsePageSizes":0}]}]]],["p-a1b248ad",[[1,"co-date-range",{"value":[1025],"label":[1],"placeholder":[1],"disabled":[4],"clearable":[4],"presets":[4],"status":[1],"helperText":[1,"helper-text"],"locale":[1],"presetTodayLabel":[1,"preset-today-label"],"presetThisWeekLabel":[1,"preset-this-week-label"],"presetThisMonthLabel":[1,"preset-this-month-label"],"presetLast30DaysLabel":[1,"preset-last-3-0-days-label"],"presetLast90DaysLabel":[1,"preset-last-9-0-days-label"],"presetThisYearLabel":[1,"preset-this-year-label"],"applyLabel":[1,"apply-label"],"clearLabel":[1,"clear-label"],"isOpen":[32],"draftFrom":[32],"draftTo":[32],"hoverDay":[32],"viewMonth":[32],"viewYear":[32]},null,{"value":[{"onValueChange":0}]}]]],["p-d29c77cb",[[257,"co-empty-state",{"icon":[1],"heading":[1],"description":[1]}]]],["p-ebd1555e",[[1,"co-fab",{"icon":[1],"label":[1],"variant":[1],"size":[1],"disabled":[4],"position":[1]}]]],["p-e50c4c6f",[[257,"co-helper-text",{"status":[1],"message":[1]}]]],["p-da55678f",[[1,"co-icon-button",{"variant":[1],"shape":[1],"size":[1],"disabled":[4],"label":[1],"icon":[1],"iconWeight":[1,"icon-weight"]}]]],["p-37c1f700",[[257,"co-input",{"label":[1],"secondaryLabel":[1,"secondary-label"],"placeholder":[1],"value":[1025],"helperText":[1,"helper-text"],"disabled":[4],"readonly":[4],"clearable":[4],"iconLeft":[1,"icon-left"],"iconRight":[1,"icon-right"],"layout":[1],"type":[1],"name":[1],"required":[4],"autocomplete":[1],"status":[1],"actionLabel":[1,"action-label"],"actionIcon":[1,"action-icon"],"hasFocus":[32]}]]],["p-8e54e74d",[[257,"co-list-item",{"label":[1],"description":[1],"icon":[1],"selected":[516],"disabled":[4],"dense":[516]}]]],["p-1021f612",[[257,"co-menu",{"placement":[1],"offset":[2],"autoClose":[4,"auto-close"],"open":[1540],"focusFirstItem":[64]},[[0,"coMenuSelect","handleMenuSelect"]],{"open":[{"onOpenChange":0}]}]]],["p-fe1447a3",[[1,"co-number-field",{"label":[1],"secondaryLabel":[1,"secondary-label"],"helperText":[1,"helper-text"],"status":[1],"value":[1538],"min":[2],"max":[2],"step":[2],"disabled":[4],"placeholder":[1],"focused":[32]}]]],["p-e2c9cb00",[[257,"co-page-header",{"heading":[1],"icon":[1]}]]],["p-a4d55b1a",[[1,"co-radio-group",{"label":[1],"secondaryLabel":[1,"secondary-label"],"helperText":[1,"helper-text"],"status":[1],"value":[1025],"options":[1],"direction":[1],"size":[1],"disabled":[4],"name":[1]},null,{"value":[{"onValueChange":0}]}]]],["p-319937c3",[[1,"co-rating",{"label":[1],"value":[1538],"max":[2],"size":[1],"disabled":[4],"readOnly":[4,"read-only"],"icon":[1],"helperText":[1,"helper-text"],"status":[1],"hoverValue":[32]}]]],["p-a470b764",[[1,"co-sidebar-nav",{"items":[1],"activeKey":[513,"active-key"],"mode":[513],"searchable":[4],"searchPlaceholder":[1,"search-placeholder"],"search":[1],"iconMap":[1,"icon-map"],"translations":[1],"searchText":[32],"expandedKeys":[32],"flyoutKey":[32],"flyoutPosition":[32]},null,{"iconMap":[{"onIconMapChange":0}],"translations":[{"onTranslationsChange":0}],"search":[{"onSearchChange":0}],"activeKey":[{"onActiveKeyChange":0}],"items":[{"onItemsChange":0}]}]]],["p-416bb5ae",[[1,"co-slider",{"label":[1],"secondaryLabel":[1,"secondary-label"],"helperText":[1,"helper-text"],"status":[1],"value":[1026],"min":[2],"max":[2],"step":[2],"disabled":[4],"showValue":[4,"show-value"],"showMarks":[4,"show-marks"],"dragging":[32]}]]],["p-9887b828",[[1,"co-switch",{"checked":[1540],"disabled":[4],"label":[1],"secondaryLabel":[1,"secondary-label"],"helperText":[1,"helper-text"],"status":[1]}]]],["p-fb047df8",[[1,"co-tab",{"label":[1],"value":[1],"selected":[1540],"size":[1],"iconLeft":[1,"icon-left"],"iconRight":[1,"icon-right"],"disabled":[4]}]]],["p-a7fa4484",[[257,"co-toast",{"message":[1],"description":[1],"icon":[1],"dismissible":[4],"actionsLayout":[1,"actions-layout"],"variant":[1]}]]],["p-ca41eec2",[[1,"co-toggle-button",{"selected":[1540],"value":[1],"label":[1],"iconLeft":[1,"icon-left"],"iconRight":[1,"icon-right"],"size":[1],"disabled":[4]}]]],["p-f051f44d",[[1,"co-transfer-list",{"label":[1],"leftTitle":[1,"left-title"],"rightTitle":[1,"right-title"],"options":[1],"value":[1025],"disabled":[4],"helperText":[1,"helper-text"],"status":[1],"leftChecked":[32],"rightChecked":[32]}]]],["p-5a13e3a0",[[257,"co-app-shell",{"sidebarMode":[1537,"sidebar-mode"],"contentCard":[4,"content-card"]}]]],["p-1b5c723a",[[1,"co-badge",{"size":[1],"color":[1]}]]],["p-1d7da33f",[[257,"co-button-group",{"variant":[1],"size":[1],"direction":[1],"disabled":[4]}]]],["p-230a23f3",[[257,"co-card",{"variant":[1],"padding":[1],"clickable":[4]}]]],["p-6793c51e",[[1,"co-menu-divider"]]],["p-ba84631a",[[257,"co-navbar",{"variant":[1],"size":[1],"rounded":[4]}]]],["p-1b7d6808",[[1,"co-progress-bar",{"value":[2],"status":[1],"variant":[1],"thickness":[2]}]]],["p-4cf6d1f4",[[1,"co-radio",{"checked":[1540],"size":[1],"disabled":[4],"label":[1],"value":[1]}]]],["p-3b2f7959",[[257,"co-row",{"position":[1],"size":[1]}]]],["p-697df797",[[1,"co-separator",{"vertical":[516],"spaced":[520],"inset":[520],"color":[1],"size":[1],"dark":[516]}]]],["p-c7517f86",[[257,"co-sidebar",{"mode":[1537]}]]],["p-31bc842d",[[257,"co-tab-group",{"value":[1537]},[[0,"coTabSelect","onTabSelect"]],{"value":[{"watchValue":0}]}]]],["p-92c39eed",[[257,"co-toggle-button-group",{"value":[1025],"multiple":[4],"size":[1],"disabled":[4],"direction":[1]},[[0,"coToggle","handleToggle"]],{"value":[{"syncChildren":0}]}]]],["p-dc5598d1",[[257,"co-tooltip",{"content":[1],"placement":[1],"offset":[2],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"disabled":[4],"arrow":[4],"flip":[4],"maxWidth":[1,"max-width"],"visible":[32],"actualPlacement":[32]},null,{"visible":[{"onVisibleChange":0}],"disabled":[{"onDisabledChange":0}]}]]],["p-cc93ab05",[[1,"co-checkbox",{"checked":[1540],"indeterminate":[1540],"size":[1],"disabled":[4],"label":[1],"value":[1]}]]],["p-4905b51d",[[257,"co-chip",{"shape":[1],"size":[1],"iconMode":[1,"icon-mode"],"variant":[1],"color":[1],"label":[1],"iconLeft":[1,"icon-left"],"iconRight":[1,"icon-right"],"iconWeight":[1,"icon-weight"],"removable":[4],"clickable":[4],"disabled":[4],"selected":[1540]}]]],["p-c9b0e73f",[[1,"co-loader",{"visible":[516],"overlay":[516],"size":[513],"text":[1],"background":[1]}]]],["p-4ffba5a3",[[257,"co-overlay",{"open":[1540]}]]],["p-ff6a647c",[[257,"co-popover",{"open":[1540],"placement":[1],"matchWidth":[516,"match-width"],"offset":[2],"closeOnClickOutside":[4,"close-on-click-outside"],"closeOnEscape":[4,"close-on-escape"],"flip":[4],"toggle":[64],"show":[64],"hide":[64]},null,{"open":[{"onOpenChange":0}]}]]]]'),e))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as o,c as e,h as t,a as c}from"./p-B0lqrhFo.js";const i=class{constructor(t){o(this,t),this.coChange=e(this,"coChange",7),this.coOpen=e(this,"coOpen",7),this.coClose=e(this,"coClose",7),this.coClear=e(this,"coClear",7),this.coFooterPrimary=e(this,"coFooterPrimary",7),this.coFooterSecondary=e(this,"coFooterSecondary",7),this.placeholder="Placeholder",this.disabled=!1,this.clearable=!0,this.searchable=!1,this.searchPlaceholder="Search",this.showFooter=!1,this.footerPrimaryLabel="Ok",this.footerSecondaryLabel="New Tags",this.options="[]",this.value="[]",this.multiple=!0,this.isOpen=!1,this.searchQuery="",this.overflowCount=0,this.scrollTop=0,this.handleTriggerClick=o=>{console.log("[co-combobox] handleTriggerClick, disabled:",this.disabled),this.disabled&&o.stopPropagation()},this.handlePopoverOpen=()=>{console.log("[co-combobox] handlePopoverOpen called"),this.isOpen=!0},this.handlePopoverClose=()=>{console.log("[co-combobox] handlePopoverClose called"),this.isOpen=!1},this.handleClear=o=>{o.stopPropagation(),this.value="[]",this.coClear.emit(),this.coChange.emit([])},this.handleOptionClick=o=>{const e=[...this.selectedValues],t=e.indexOf(o);t>=0?e.splice(t,1):this.multiple?e.push(o):(e.length=0,e.push(o),this.isOpen=!1),this.value=JSON.stringify(e),this.coChange.emit(e)},this.handleRemoveOption=(o,e)=>{o.stopPropagation();const t=this.selectedValues.filter((o=>o!==e));this.value=JSON.stringify(t),this.coChange.emit(t)},this.handleSearchInput=o=>{this.searchQuery=o.target.value,this.scrollTop=0,this.optionsContainerEl&&(this.optionsContainerEl.scrollTop=0)},this.handleFooterPrimary=()=>{this.coFooterPrimary.emit(),this.isOpen=!1},this.handleFooterSecondary=()=>{this.coFooterSecondary.emit()},this.handleOptionsScroll=o=>{this.scrollTop=o.target.scrollTop}}normalizeOptions(o){return o.map((o=>"string"==typeof o?{label:o,value:o}:o))}get parsedOptions(){if("string"==typeof this.options)try{return this.normalizeOptions(JSON.parse(this.options))}catch(o){return[]}return this.normalizeOptions(this.options)}get selectedValues(){if("string"==typeof this.value)try{return JSON.parse(this.value)}catch(o){return[]}return this.value}get filteredOptions(){if(!this.searchQuery)return this.parsedOptions;const o=this.searchQuery.toLowerCase();return this.parsedOptions.filter((e=>e.label.toLowerCase().includes(o)))}get displayText(){const o=this.selectedValues;if(0===o.length)return"";const e=this.parsedOptions.find((e=>e.value===o[0]));return e?e.label:o[0]}get selectedOptions(){return this.selectedValues.map((o=>this.parsedOptions.find((e=>e.value===o)))).filter((o=>!!o))}get hasValue(){return this.selectedValues.length>0}onOpenChange(o){o?(this.searchQuery="",this.scrollTop=0,this.coOpen.emit()):this.coClose.emit()}onValueChange(){}connectedCallback(){this.resizeObserver=new ResizeObserver((()=>{this.calcOverflow()}))}disconnectedCallback(){var o;null===(o=this.resizeObserver)||void 0===o||o.disconnect()}componentDidRender(){var o,e;this.chipContainerEl&&(null===(o=this.resizeObserver)||void 0===o||o.disconnect(),null===(e=this.resizeObserver)||void 0===e||e.observe(this.chipContainerEl)),this.calcOverflow()}calcOverflow(){if(!this.multiple||!this.chipContainerEl)return;const o=this.chipContainerEl,e=Array.from(o.querySelectorAll("co-chip"));if(0===e.length)return void(0!==this.overflowCount&&(this.overflowCount=0));const t=o.getBoundingClientRect().right;let c=0;for(let o=e.length-1;o>=0&&e[o].getBoundingClientRect().right>t+1;o--)c++;c!==this.overflowCount&&(this.overflowCount=c)}getVirtualSlice(o){const{ITEM_HEIGHT:e,VIEWPORT_ITEMS:t,OVERSCAN:c}=i,a=o.length,s=a*e,r=Math.max(0,Math.floor(this.scrollTop/e)-c);return{totalHeight:s,startIdx:r,endIdx:Math.min(a,r+t+2*c),offsetY:r*e}}render(){const o=this.selectedValues,e=this.filteredOptions;return t("div",{key:"e77d4338436c01bf4aeac90a08ec31c60c320e56",class:{"co-combobox":!0,"co-combobox--open":this.isOpen,"co-combobox--disabled":this.disabled,"co-combobox--filled":this.hasValue},part:"wrapper"},(this.label||this.secondaryLabel)&&t("div",{key:"60f9e0522a8dee4833bbfa564fb55e2bd4b924eb",class:"co-combobox__labels"},this.label&&t("label",{key:"070a1111f508e299313d90364920aca7c2c00062",class:"co-combobox__label",part:"label"},this.label),this.secondaryLabel&&t("span",{key:"77544e3e6783ae2b7e4c51fdf2c614b43db3df18",class:"co-combobox__secondary-label",part:"secondary-label"},this.secondaryLabel)),t("co-popover",{key:"69b76f964e92406025c94c44aa639c7d128643ee",open:this.isOpen,placement:"bottom-start",matchWidth:!0,offset:4,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},t("div",{key:"4ea12edc1d79d609379fe293f7807af3c4a31c20",slot:"trigger",class:"co-combobox__trigger",part:"trigger",onClick:this.handleTriggerClick},this.iconLeft&&t("co-icon",{key:"7c9053e320c472bd67a621487de2b456714de2b7",name:this.iconLeft,size:16,class:"co-combobox__icon"}),t("div",{key:"1c9e01f82203801fd4e11c3d01448f0caa3d9cd5",class:"co-combobox__input-wrapper",ref:o=>this.chipContainerEl=o},this.multiple&&this.hasValue?this.selectedOptions.map((o=>t("co-chip",{size:"small","icon-mode":"both",label:o.label},t("co-icon",{slot:"icon-left",name:o.icon||"circle",size:10}),t("co-icon",{slot:"icon-right",name:"x-circle",size:10,weight:"fill",onClick:e=>this.handleRemoveOption(e,o.value)})))):t("span",{class:{"co-combobox__text":!0,"co-combobox__text--placeholder":!this.hasValue}},this.hasValue?this.displayText:this.placeholder)),this.multiple&&this.overflowCount>0&&t("span",{key:"dba6a9ca703aa80b0b47b3ca132a3ad4364a5968",class:"co-combobox__overflow-badge"},this.overflowCount),this.clearable&&this.hasValue&&!this.disabled&&t("button",{key:"2b1f12c41ee1eb95a59dc763b6d1c23f191543aa",class:"co-combobox__clear",type:"button",tabIndex:-1,onClick:this.handleClear,"aria-label":"Clear selection",part:"clear"},t("co-icon",{key:"d34a19853a49618668609c963bbf1d6c79170859",name:"x-circle",size:16,weight:"fill"})),t("co-icon",{key:"bc0be278e45f1a4be653f294f4fcea5253491653",name:this.isOpen?"caret-up":"caret-down",size:16,class:"co-combobox__caret"})),t("div",{key:"0a346246fb89f71f1b55e68b102c6d670d2d5e17",class:"co-combobox__dropdown",part:"dropdown"},this.searchable&&t("div",{key:"5c7134c5a68402e62b050d6a1ac43bfa110232b4",class:"co-combobox__search",part:"search"},t("co-icon",{key:"4533ade5d31966b24d6f3f57d32fefe711f2ee5f",name:"magnifying-glass",size:16,class:"co-combobox__search-icon"}),t("input",{key:"edbfb2c18dbba3416410a4bbb67dfffa962eeb57",class:"co-combobox__search-input",type:"text",placeholder:this.searchPlaceholder,value:this.searchQuery,onInput:this.handleSearchInput,part:"search-input"})),t("div",{key:"6734495aca88397e2874e5dda5252bda2a96a5ca",class:"co-combobox__options",part:"options",ref:o=>this.optionsContainerEl=o,onScroll:this.handleOptionsScroll},(()=>{const{totalHeight:c,startIdx:i,endIdx:a,offsetY:s}=this.getVirtualSlice(e);return t("div",{class:"co-combobox__virtual-spacer",style:{height:`${c}px`,position:"relative"}},t("div",{style:{position:"absolute",top:`${s}px`,left:"0",right:"0"}},e.slice(i,a).map((e=>{const c=o.includes(e.value);return t("div",{class:{"co-combobox__option":!0,"co-combobox__option--selected":c},onClick:()=>this.handleOptionClick(e.value),part:"option"},t("div",{class:"co-combobox__option-content"},t("div",{class:"co-combobox__option-icon-wrapper"},t("co-icon",{name:e.icon||"circle",size:20,class:"co-combobox__option-icon"})),t("span",{class:"co-combobox__option-label"},e.label)),c&&this.multiple&&t("button",{class:"co-combobox__option-remove",type:"button",tabIndex:-1,onClick:o=>this.handleRemoveOption(o,e.value),"aria-label":`Remove ${e.label}`},t("co-icon",{name:"x-circle",size:16,weight:"fill"})),c&&!this.multiple&&t("co-icon",{name:"check",size:16,class:"co-combobox__option-check"}))}))))})()),this.showFooter&&t("div",{key:"d618d08c25c1f2d1d04b9e7b19df9b01d79f7002",class:"co-combobox__footer",part:"footer"},t("button",{key:"950ab40c71a96de34f339859b9f69397ad69b1c3",class:"co-combobox__footer-btn co-combobox__footer-btn--secondary",type:"button",onClick:this.handleFooterSecondary},t("co-icon",{key:"89c72b7cbbfab66980fc3b5ff2d6e61cfc0e544d",name:"plus",size:16}),t("span",{key:"167aadfbcae4abccf7e35f2b32e0893f75a495f6"},this.footerSecondaryLabel)),t("button",{key:"92778f91ff795978396c3b99b7f1900645a51cf7",class:"co-combobox__footer-btn co-combobox__footer-btn--primary",type:"button",onClick:this.handleFooterPrimary},t("co-icon",{key:"31c26c2ee563b10948313d750cfce00e5cf47a9f",name:"plus",size:16}),t("span",{key:"4860a6e7399596dd28ad3e0e9c577a1e93ece861"},this.footerPrimaryLabel))))))}get el(){return c(this)}static get watchers(){return{isOpen:[{onOpenChange:0}],value:[{onValueChange:0}]}}};i.ITEM_HEIGHT=34,i.VIEWPORT_ITEMS=8,i.OVERSCAN=3,i.style=":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-combobox{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-combobox__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-combobox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-combobox__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-combobox__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-white, white);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease;overflow:hidden}.co-combobox--open .co-combobox__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-combobox--disabled .co-combobox__trigger{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-combobox__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__icon{color:var(--co-semantic-text-disabled)}.co-combobox__input-wrapper{flex:1;display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-width:0;min-height:24px;padding:var(--co-spacing-xxs) 0;overflow:hidden}.co-combobox__input-wrapper co-chip{--co-chip-max-width:120px;--co-chip-bg:var(--co-semantic-surface-muted);--co-chip-color:var(--co-semantic-text-default);--co-chip-border:1px solid var(--co-semantic-border-subtle);flex-shrink:0}.co-combobox__overflow-badge{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-info, #2563eb);color:#fff;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-10);font-weight:600;line-height:1;white-space:nowrap}.co-combobox__text{color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-combobox__text--placeholder{color:var(--co-semantic-text-muted)}.co-combobox--disabled .co-combobox__text{color:var(--co-semantic-text-disabled)}.co-combobox__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-combobox__clear:hover{color:var(--co-semantic-text-default)}.co-combobox__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__caret{color:var(--co-semantic-text-disabled)}.co-combobox__dropdown{padding:var(--co-spacing-md);display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-combobox__search{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-sm2);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);overflow:hidden;height:32px;box-sizing:border-box}.co-combobox__search-icon{flex-shrink:0;color:var(--co-semantic-text-muted);opacity:0.7;display:flex;align-items:center}.co-combobox__search-input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--co-font-size-12, 12px);font-weight:500;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-combobox__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-combobox__options{max-height:280px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--co-semantic-border-subtle) transparent}.co-combobox__options::-webkit-scrollbar{width:6px}.co-combobox__options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.co-combobox__options::-webkit-scrollbar-thumb{background:var(--co-semantic-border-subtle);border-radius:3px;transition:background 0.15s ease}.co-combobox__options::-webkit-scrollbar-thumb:hover{background:var(--co-semantic-text-muted)}.co-combobox__virtual-spacer{width:100%}.co-combobox__option{display:flex;align-items:center;justify-content:space-between;padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);cursor:pointer;height:32px;margin-bottom:2px;box-sizing:border-box;transition:background 0.1s ease}.co-combobox__option:hover{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-combobox__option-content{display:flex;align-items:center;gap:var(--co-spacing-sm2);flex:1;min-width:0}.co-combobox__option-icon-wrapper{width:24px;height:24px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}.co-combobox__option-icon{color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox__option-label{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-combobox__option-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;overflow:hidden;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-combobox__option-remove:hover{color:var(--co-semantic-text-default)}.co-combobox__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-combobox__footer{display:flex;gap:var(--co-spacing-sm2);padding-top:var(--co-spacing-sm2)}.co-combobox__footer-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity 0.15s ease;box-sizing:border-box;min-height:32px}.co-combobox__footer-btn:hover{opacity:0.85}.co-combobox__footer-btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-combobox__footer-btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}";export{i as co_combobox}
|
|
1
|
+
import{r as o,c as e,h as t,a as c}from"./p-B0lqrhFo.js";const i=class{constructor(t){o(this,t),this.coChange=e(this,"coChange",7),this.coOpen=e(this,"coOpen",7),this.coClose=e(this,"coClose",7),this.coClear=e(this,"coClear",7),this.coFooterPrimary=e(this,"coFooterPrimary",7),this.coFooterSecondary=e(this,"coFooterSecondary",7),this.placeholder="Placeholder",this.disabled=!1,this.clearable=!0,this.searchable=!1,this.searchPlaceholder="Search",this.showFooter=!1,this.footerPrimaryLabel="Ok",this.footerSecondaryLabel="New Tags",this.options="[]",this.value="[]",this.multiple=!0,this.isOpen=!1,this.searchQuery="",this.overflowCount=0,this.scrollTop=0,this.handleTriggerClick=o=>{console.log("[co-combobox] handleTriggerClick, disabled:",this.disabled),this.disabled&&o.stopPropagation()},this.handlePopoverOpen=()=>{console.log("[co-combobox] handlePopoverOpen called"),this.isOpen=!0},this.handlePopoverClose=()=>{console.log("[co-combobox] handlePopoverClose called"),this.isOpen=!1},this.handleClear=o=>{o.stopPropagation(),this.value="[]",this.coClear.emit(),this.coChange.emit([])},this.handleOptionClick=o=>{const e=[...this.selectedValues],t=e.indexOf(o);t>=0?e.splice(t,1):this.multiple?e.push(o):(e.length=0,e.push(o),this.isOpen=!1),this.value=JSON.stringify(e),this.coChange.emit(e)},this.handleRemoveOption=(o,e)=>{o.stopPropagation();const t=this.selectedValues.filter((o=>o!==e));this.value=JSON.stringify(t),this.coChange.emit(t)},this.handleSearchInput=o=>{this.searchQuery=o.target.value,this.scrollTop=0,this.optionsContainerEl&&(this.optionsContainerEl.scrollTop=0)},this.handleFooterPrimary=()=>{this.coFooterPrimary.emit(),this.isOpen=!1},this.handleFooterSecondary=()=>{this.coFooterSecondary.emit()},this.handleOptionsScroll=o=>{this.scrollTop=o.target.scrollTop}}normalizeOptions(o){return o.map((o=>"string"==typeof o?{label:o,value:o}:o))}get parsedOptions(){if("string"==typeof this.options)try{return this.normalizeOptions(JSON.parse(this.options))}catch(o){return[]}return this.normalizeOptions(this.options)}get selectedValues(){if("string"==typeof this.value)try{return JSON.parse(this.value)}catch(o){return[]}return this.value}get filteredOptions(){if(!this.searchQuery)return this.parsedOptions;const o=this.searchQuery.toLowerCase();return this.parsedOptions.filter((e=>e.label.toLowerCase().includes(o)))}get displayText(){const o=this.selectedValues;if(0===o.length)return"";const e=this.parsedOptions.find((e=>e.value===o[0]));return e?e.label:o[0]}get selectedOptions(){return this.selectedValues.map((o=>this.parsedOptions.find((e=>e.value===o)))).filter((o=>!!o))}get hasValue(){return this.selectedValues.length>0}onOpenChange(o){o?(this.searchQuery="",this.scrollTop=0,this.coOpen.emit()):this.coClose.emit()}onValueChange(){}connectedCallback(){this.resizeObserver=new ResizeObserver((()=>{this.calcOverflow()}))}disconnectedCallback(){var o;null===(o=this.resizeObserver)||void 0===o||o.disconnect()}componentDidRender(){var o,e;this.chipContainerEl&&(null===(o=this.resizeObserver)||void 0===o||o.disconnect(),null===(e=this.resizeObserver)||void 0===e||e.observe(this.chipContainerEl)),this.calcOverflow()}calcOverflow(){if(!this.multiple||!this.chipContainerEl)return;const o=this.chipContainerEl,e=Array.from(o.querySelectorAll("co-chip"));if(0===e.length)return void(0!==this.overflowCount&&(this.overflowCount=0));const t=o.getBoundingClientRect().right;let c=0;for(let o=e.length-1;o>=0&&e[o].getBoundingClientRect().right>t+1;o--)c++;c!==this.overflowCount&&(this.overflowCount=c)}getVirtualSlice(o){const{ITEM_HEIGHT:e,VIEWPORT_ITEMS:t,OVERSCAN:c}=i,a=o.length,s=a*e,r=Math.max(0,Math.floor(this.scrollTop/e)-c);return{totalHeight:s,startIdx:r,endIdx:Math.min(a,r+t+2*c),offsetY:r*e}}render(){const o=this.selectedValues,e=this.filteredOptions;return t("div",{key:"e77d4338436c01bf4aeac90a08ec31c60c320e56",class:{"co-combobox":!0,"co-combobox--open":this.isOpen,"co-combobox--disabled":this.disabled,"co-combobox--filled":this.hasValue},part:"wrapper"},(this.label||this.secondaryLabel)&&t("div",{key:"60f9e0522a8dee4833bbfa564fb55e2bd4b924eb",class:"co-combobox__labels"},this.label&&t("label",{key:"070a1111f508e299313d90364920aca7c2c00062",class:"co-combobox__label",part:"label"},this.label),this.secondaryLabel&&t("span",{key:"77544e3e6783ae2b7e4c51fdf2c614b43db3df18",class:"co-combobox__secondary-label",part:"secondary-label"},this.secondaryLabel)),t("co-popover",{key:"69b76f964e92406025c94c44aa639c7d128643ee",open:this.isOpen,placement:"bottom-start",matchWidth:!0,offset:4,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},t("div",{key:"4ea12edc1d79d609379fe293f7807af3c4a31c20",slot:"trigger",class:"co-combobox__trigger",part:"trigger",onClick:this.handleTriggerClick},this.iconLeft&&t("co-icon",{key:"7c9053e320c472bd67a621487de2b456714de2b7",name:this.iconLeft,size:16,class:"co-combobox__icon"}),t("div",{key:"1c9e01f82203801fd4e11c3d01448f0caa3d9cd5",class:"co-combobox__input-wrapper",ref:o=>this.chipContainerEl=o},this.multiple&&this.hasValue?this.selectedOptions.map((o=>t("co-chip",{size:"small","icon-mode":"both",label:o.label},t("co-icon",{slot:"icon-left",name:o.icon||"circle",size:10}),t("co-icon",{slot:"icon-right",name:"x-circle",size:10,weight:"fill",onClick:e=>this.handleRemoveOption(e,o.value)})))):t("span",{class:{"co-combobox__text":!0,"co-combobox__text--placeholder":!this.hasValue}},this.hasValue?this.displayText:this.placeholder)),this.multiple&&this.overflowCount>0&&t("span",{key:"dba6a9ca703aa80b0b47b3ca132a3ad4364a5968",class:"co-combobox__overflow-badge"},this.overflowCount),this.clearable&&this.hasValue&&!this.disabled&&t("button",{key:"2b1f12c41ee1eb95a59dc763b6d1c23f191543aa",class:"co-combobox__clear",type:"button",tabIndex:-1,onClick:this.handleClear,"aria-label":"Clear selection",part:"clear"},t("co-icon",{key:"d34a19853a49618668609c963bbf1d6c79170859",name:"x-circle",size:16,weight:"fill"})),t("co-icon",{key:"bc0be278e45f1a4be653f294f4fcea5253491653",name:this.isOpen?"caret-up":"caret-down",size:16,class:"co-combobox__caret"})),t("div",{key:"0a346246fb89f71f1b55e68b102c6d670d2d5e17",class:"co-combobox__dropdown",part:"dropdown"},this.searchable&&t("div",{key:"5c7134c5a68402e62b050d6a1ac43bfa110232b4",class:"co-combobox__search",part:"search"},t("co-icon",{key:"4533ade5d31966b24d6f3f57d32fefe711f2ee5f",name:"magnifying-glass",size:16,class:"co-combobox__search-icon"}),t("input",{key:"edbfb2c18dbba3416410a4bbb67dfffa962eeb57",class:"co-combobox__search-input",type:"text",placeholder:this.searchPlaceholder,value:this.searchQuery,onInput:this.handleSearchInput,part:"search-input"})),t("div",{key:"6734495aca88397e2874e5dda5252bda2a96a5ca",class:"co-combobox__options",part:"options",ref:o=>this.optionsContainerEl=o,onScroll:this.handleOptionsScroll},(()=>{const{totalHeight:c,startIdx:i,endIdx:a,offsetY:s}=this.getVirtualSlice(e);return t("div",{class:"co-combobox__virtual-spacer",style:{height:`${c}px`,position:"relative"}},t("div",{style:{position:"absolute",top:`${s}px`,left:"0",right:"0"}},e.slice(i,a).map((e=>{const c=o.includes(e.value);return t("div",{class:{"co-combobox__option":!0,"co-combobox__option--selected":c},onClick:()=>this.handleOptionClick(e.value),part:"option"},t("div",{class:"co-combobox__option-content"},t("div",{class:"co-combobox__option-icon-wrapper"},t("co-icon",{name:e.icon||"circle",size:20,class:"co-combobox__option-icon"})),t("span",{class:"co-combobox__option-label"},e.label)),c&&this.multiple&&t("button",{class:"co-combobox__option-remove",type:"button",tabIndex:-1,onClick:o=>this.handleRemoveOption(o,e.value),"aria-label":`Remove ${e.label}`},t("co-icon",{name:"x-circle",size:16,weight:"fill"})),c&&!this.multiple&&t("co-icon",{name:"check",size:16,class:"co-combobox__option-check"}))}))))})()),this.showFooter&&t("div",{key:"d618d08c25c1f2d1d04b9e7b19df9b01d79f7002",class:"co-combobox__footer",part:"footer"},t("button",{key:"950ab40c71a96de34f339859b9f69397ad69b1c3",class:"co-combobox__footer-btn co-combobox__footer-btn--secondary",type:"button",onClick:this.handleFooterSecondary},t("co-icon",{key:"89c72b7cbbfab66980fc3b5ff2d6e61cfc0e544d",name:"plus",size:16}),t("span",{key:"167aadfbcae4abccf7e35f2b32e0893f75a495f6"},this.footerSecondaryLabel)),t("button",{key:"92778f91ff795978396c3b99b7f1900645a51cf7",class:"co-combobox__footer-btn co-combobox__footer-btn--primary",type:"button",onClick:this.handleFooterPrimary},t("co-icon",{key:"31c26c2ee563b10948313d750cfce00e5cf47a9f",name:"plus",size:16}),t("span",{key:"4860a6e7399596dd28ad3e0e9c577a1e93ece861"},this.footerPrimaryLabel))))))}get el(){return c(this)}static get watchers(){return{isOpen:[{onOpenChange:0}],value:[{onValueChange:0}]}}};i.ITEM_HEIGHT=34,i.VIEWPORT_ITEMS=8,i.OVERSCAN=3,i.style=":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-combobox{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-combobox__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-combobox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-combobox__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-combobox__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease;overflow:hidden}.co-combobox--open .co-combobox__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-combobox--disabled .co-combobox__trigger{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-combobox__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__icon{color:var(--co-semantic-text-disabled)}.co-combobox__input-wrapper{flex:1;display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-width:0;min-height:24px;padding:var(--co-spacing-xxs) 0;overflow:hidden}.co-combobox__input-wrapper co-chip{--co-chip-max-width:120px;--co-chip-bg:var(--co-semantic-surface-muted);--co-chip-color:var(--co-semantic-text-default);--co-chip-border:1px solid var(--co-semantic-border-subtle);flex-shrink:0}.co-combobox__overflow-badge{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-info, #2563eb);color:#fff;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-10);font-weight:600;line-height:1;white-space:nowrap}.co-combobox__text{color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-combobox__text--placeholder{color:var(--co-semantic-text-muted)}.co-combobox--disabled .co-combobox__text{color:var(--co-semantic-text-disabled)}.co-combobox__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-combobox__clear:hover{color:var(--co-semantic-text-default)}.co-combobox__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__caret{color:var(--co-semantic-text-disabled)}.co-combobox__dropdown{padding:var(--co-spacing-md);display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-combobox__search{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-sm2);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);overflow:hidden;height:32px;box-sizing:border-box}.co-combobox__search-icon{flex-shrink:0;color:var(--co-semantic-text-muted);opacity:0.7;display:flex;align-items:center}.co-combobox__search-input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--co-font-size-12, 12px);font-weight:500;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-combobox__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-combobox__options{max-height:280px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--co-semantic-border-subtle) transparent}.co-combobox__options::-webkit-scrollbar{width:6px}.co-combobox__options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.co-combobox__options::-webkit-scrollbar-thumb{background:var(--co-semantic-border-subtle);border-radius:3px;transition:background 0.15s ease}.co-combobox__options::-webkit-scrollbar-thumb:hover{background:var(--co-semantic-text-muted)}.co-combobox__virtual-spacer{width:100%}.co-combobox__option{display:flex;align-items:center;justify-content:space-between;padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);cursor:pointer;height:32px;margin-bottom:2px;box-sizing:border-box;transition:background 0.1s ease}.co-combobox__option:hover{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-combobox__option-content{display:flex;align-items:center;gap:var(--co-spacing-sm2);flex:1;min-width:0}.co-combobox__option-icon-wrapper{width:24px;height:24px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}.co-combobox__option-icon{color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox__option-label{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-combobox__option-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;overflow:hidden;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-combobox__option-remove:hover{color:var(--co-semantic-text-default)}.co-combobox__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-combobox__footer{display:flex;gap:var(--co-spacing-sm2);padding-top:var(--co-spacing-sm2)}.co-combobox__footer-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity 0.15s ease;box-sizing:border-box;min-height:32px}.co-combobox__footer-btn:hover{opacity:0.85}.co-combobox__footer-btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-combobox__footer-btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}";export{i as co_combobox}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as
|
|
1
|
+
import{r as s,c as i,h as t,a as e}from"./p-B0lqrhFo.js";import{c as h,g as o,f as c}from"./p-Am-OlB8h.js";const r=class{constructor(t){s(this,t),this.coOpen=i(this,"coOpen",3),this.coClose=i(this,"coClose",3),this.open=!1,this.placement="bottom-start",this.matchWidth=!1,this.offset=4,this.closeOnClickOutside=!0,this.closeOnEscape=!0,this.flip=!0,this.scrollParents=[],this.cachedOffsetAncestor=null,this.offsetAncestorComputed=!1,this.docListenersBound=!1,this.handleDocumentClickManual=s=>{this.open&&this.closeOnClickOutside&&(s.composedPath().includes(this.el)||(this.open=!1))},this.handleDocumentKeydownManual=s=>{this.open&&this.closeOnEscape&&"Escape"===s.key&&(s.stopPropagation(),this.open=!1)},this.updatePosition=()=>{if(!this.open||!this.triggerEl||!this.panelEl)return;const s=this.triggerEl.getBoundingClientRect(),i=this.panelEl.getBoundingClientRect(),{top:t,left:e}=h(s,i,{placement:this.placement,offset:this.offset,flip:this.flip});let c=t,r=e;if(this.offsetAncestorComputed||(this.cachedOffsetAncestor=o(this.panelEl),this.offsetAncestorComputed=!0),this.cachedOffsetAncestor){const s=this.cachedOffsetAncestor.getBoundingClientRect();c-=s.top,r-=s.left}const a={top:`${c}px`,left:`${r}px`};this.matchWidth&&(a.width=`${s.width}px`),this.panelEl&&(Object.assign(this.panelEl.style,a),this.panelEl.classList.add("co-popover__panel--positioned"))},this.scheduleUpdate=()=>{this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.updatePosition)},this.handleTriggerClick=()=>{this.open=!this.open}}disconnectedCallback(){this.unbindDocListeners(),this.cleanupListeners()}onOpenChange(s){s?(this.coOpen.emit(),this.bindDocListeners(),this.scheduleUpdate(),requestAnimationFrame((()=>{requestAnimationFrame((()=>{this.updatePosition()}))})),this.addScrollListeners()):(this.coClose.emit(),this.cleanupListeners(),this.unbindDocListeners(),this.cachedOffsetAncestor=null,this.offsetAncestorComputed=!1)}bindDocListeners(){this.docListenersBound||(document.addEventListener("click",this.handleDocumentClickManual,!0),document.addEventListener("keydown",this.handleDocumentKeydownManual,!0),this.docListenersBound=!0)}unbindDocListeners(){this.docListenersBound&&(document.removeEventListener("click",this.handleDocumentClickManual,!0),document.removeEventListener("keydown",this.handleDocumentKeydownManual,!0),this.docListenersBound=!1)}async toggle(){this.open=!this.open}async show(){this.open=!0}async hide(){this.open=!1}addScrollListeners(){window.addEventListener("resize",this.scheduleUpdate,{passive:!0}),window.addEventListener("scroll",this.scheduleUpdate,{passive:!0,capture:!0}),this.scrollParents=[];const s=c(this.el);s&&(s.addEventListener("scroll",this.scheduleUpdate,{passive:!0}),this.scrollParents.push(s))}cleanupListeners(){this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=void 0),window.removeEventListener("resize",this.scheduleUpdate),window.removeEventListener("scroll",this.scheduleUpdate,{capture:!0});for(const s of this.scrollParents)s.removeEventListener("scroll",this.scheduleUpdate);this.scrollParents=[]}render(){return t("div",{key:"a10448fae8b1ab711c359f7dc0c7a01432700638",class:"co-popover"},t("div",{key:"4e42cabce7bb62a866b080870d31cb03ea62ccdf",class:"co-popover__trigger",ref:s=>this.triggerEl=s,onClick:this.handleTriggerClick},t("slot",{key:"a5d85e222124e3af63266e4b99b460d62581200b",name:"trigger"})),this.open&&t("div",{key:"9143a817e7b46b41ba393480743f3ca38e507a84",class:"co-popover__panel",ref:s=>{s&&s!==this.panelEl&&(this.panelEl=s,this.scheduleUpdate())}},t("slot",{key:"6230166198f8d5535d5de3d9bdf4a4d8d0c82cb7"})))}get el(){return e(this)}static get watchers(){return{open:[{onOpenChange:0}]}}};r.style=":host{display:inline-block;position:relative}:host([match-width]){display:block;width:100%}.co-popover{display:block;width:100%}.co-popover__trigger{display:block;width:100%;cursor:pointer}.co-popover__panel{position:fixed;top:0;left:0;z-index:10000;visibility:hidden;background:var(--co-semantic-surface-page, #fff);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:visible}.co-popover__panel--positioned{visibility:visible}";export{r as co_popover}
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
align-items: center;
|
|
56
56
|
gap: var(--co-spacing-sm2);
|
|
57
57
|
padding: var(--co-spacing-sm2) var(--co-spacing-md);
|
|
58
|
-
background: var(--co-semantic-surface-
|
|
58
|
+
background: var(--co-semantic-surface-secondary);
|
|
59
59
|
border: 1px solid var(--co-semantic-border-subtle);
|
|
60
60
|
border-radius: var(--co-border-radius-xs);
|
|
61
61
|
min-height: 40px;
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
left: 0;
|
|
30
30
|
z-index: 10000;
|
|
31
31
|
visibility: hidden;
|
|
32
|
-
background: var(--co-semantic-surface-
|
|
32
|
+
background: var(--co-semantic-surface-page, #fff);
|
|
33
33
|
border: 1px solid var(--co-semantic-border-subtle);
|
|
34
34
|
border-radius: var(--co-border-radius-sm, 12px);
|
|
35
35
|
box-shadow: 0 4px 16px rgba(31, 28, 27, 0.08);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as o,H as e,c as t,h as c,t as i}from"./index.js";import{d as a}from"./p-B18FTYLq.js";import{d as s}from"./p-wwWquAtm.js";import{d as r}from"./p-Dv_iMPy0.js";const n=o(class o extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.coChange=t(this,"coChange",7),this.coOpen=t(this,"coOpen",7),this.coClose=t(this,"coClose",7),this.coClear=t(this,"coClear",7),this.coFooterPrimary=t(this,"coFooterPrimary",7),this.coFooterSecondary=t(this,"coFooterSecondary",7),this.placeholder="Placeholder",this.disabled=!1,this.clearable=!0,this.searchable=!1,this.searchPlaceholder="Search",this.showFooter=!1,this.footerPrimaryLabel="Ok",this.footerSecondaryLabel="New Tags",this.options="[]",this.value="[]",this.multiple=!0,this.isOpen=!1,this.searchQuery="",this.overflowCount=0,this.scrollTop=0,this.handleTriggerClick=o=>{console.log("[co-combobox] handleTriggerClick, disabled:",this.disabled),this.disabled&&o.stopPropagation()},this.handlePopoverOpen=()=>{console.log("[co-combobox] handlePopoverOpen called"),this.isOpen=!0},this.handlePopoverClose=()=>{console.log("[co-combobox] handlePopoverClose called"),this.isOpen=!1},this.handleClear=o=>{o.stopPropagation(),this.value="[]",this.coClear.emit(),this.coChange.emit([])},this.handleOptionClick=o=>{const e=[...this.selectedValues],t=e.indexOf(o);t>=0?e.splice(t,1):this.multiple?e.push(o):(e.length=0,e.push(o),this.isOpen=!1),this.value=JSON.stringify(e),this.coChange.emit(e)},this.handleRemoveOption=(o,e)=>{o.stopPropagation();const t=this.selectedValues.filter((o=>o!==e));this.value=JSON.stringify(t),this.coChange.emit(t)},this.handleSearchInput=o=>{this.searchQuery=o.target.value,this.scrollTop=0,this.optionsContainerEl&&(this.optionsContainerEl.scrollTop=0)},this.handleFooterPrimary=()=>{this.coFooterPrimary.emit(),this.isOpen=!1},this.handleFooterSecondary=()=>{this.coFooterSecondary.emit()},this.handleOptionsScroll=o=>{this.scrollTop=o.target.scrollTop}}normalizeOptions(o){return o.map((o=>"string"==typeof o?{label:o,value:o}:o))}get parsedOptions(){if("string"==typeof this.options)try{return this.normalizeOptions(JSON.parse(this.options))}catch(o){return[]}return this.normalizeOptions(this.options)}get selectedValues(){if("string"==typeof this.value)try{return JSON.parse(this.value)}catch(o){return[]}return this.value}get filteredOptions(){if(!this.searchQuery)return this.parsedOptions;const o=this.searchQuery.toLowerCase();return this.parsedOptions.filter((e=>e.label.toLowerCase().includes(o)))}get displayText(){const o=this.selectedValues;if(0===o.length)return"";const e=this.parsedOptions.find((e=>e.value===o[0]));return e?e.label:o[0]}get selectedOptions(){return this.selectedValues.map((o=>this.parsedOptions.find((e=>e.value===o)))).filter((o=>!!o))}get hasValue(){return this.selectedValues.length>0}onOpenChange(o){o?(this.searchQuery="",this.scrollTop=0,this.coOpen.emit()):this.coClose.emit()}onValueChange(){}connectedCallback(){this.resizeObserver=new ResizeObserver((()=>{this.calcOverflow()}))}disconnectedCallback(){var o;null===(o=this.resizeObserver)||void 0===o||o.disconnect()}componentDidRender(){var o,e;this.chipContainerEl&&(null===(o=this.resizeObserver)||void 0===o||o.disconnect(),null===(e=this.resizeObserver)||void 0===e||e.observe(this.chipContainerEl)),this.calcOverflow()}calcOverflow(){if(!this.multiple||!this.chipContainerEl)return;const o=this.chipContainerEl,e=Array.from(o.querySelectorAll("co-chip"));if(0===e.length)return void(0!==this.overflowCount&&(this.overflowCount=0));const t=o.getBoundingClientRect().right;let c=0;for(let o=e.length-1;o>=0&&e[o].getBoundingClientRect().right>t+1;o--)c++;c!==this.overflowCount&&(this.overflowCount=c)}getVirtualSlice(e){const{ITEM_HEIGHT:t,VIEWPORT_ITEMS:c,OVERSCAN:i}=o,a=e.length,s=a*t,r=Math.max(0,Math.floor(this.scrollTop/t)-i);return{totalHeight:s,startIdx:r,endIdx:Math.min(a,r+c+2*i),offsetY:r*t}}render(){const o=this.selectedValues,e=this.filteredOptions;return c("div",{key:"e77d4338436c01bf4aeac90a08ec31c60c320e56",class:{"co-combobox":!0,"co-combobox--open":this.isOpen,"co-combobox--disabled":this.disabled,"co-combobox--filled":this.hasValue},part:"wrapper"},(this.label||this.secondaryLabel)&&c("div",{key:"60f9e0522a8dee4833bbfa564fb55e2bd4b924eb",class:"co-combobox__labels"},this.label&&c("label",{key:"070a1111f508e299313d90364920aca7c2c00062",class:"co-combobox__label",part:"label"},this.label),this.secondaryLabel&&c("span",{key:"77544e3e6783ae2b7e4c51fdf2c614b43db3df18",class:"co-combobox__secondary-label",part:"secondary-label"},this.secondaryLabel)),c("co-popover",{key:"69b76f964e92406025c94c44aa639c7d128643ee",open:this.isOpen,placement:"bottom-start",matchWidth:!0,offset:4,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},c("div",{key:"4ea12edc1d79d609379fe293f7807af3c4a31c20",slot:"trigger",class:"co-combobox__trigger",part:"trigger",onClick:this.handleTriggerClick},this.iconLeft&&c("co-icon",{key:"7c9053e320c472bd67a621487de2b456714de2b7",name:this.iconLeft,size:16,class:"co-combobox__icon"}),c("div",{key:"1c9e01f82203801fd4e11c3d01448f0caa3d9cd5",class:"co-combobox__input-wrapper",ref:o=>this.chipContainerEl=o},this.multiple&&this.hasValue?this.selectedOptions.map((o=>c("co-chip",{size:"small","icon-mode":"both",label:o.label},c("co-icon",{slot:"icon-left",name:o.icon||"circle",size:10}),c("co-icon",{slot:"icon-right",name:"x-circle",size:10,weight:"fill",onClick:e=>this.handleRemoveOption(e,o.value)})))):c("span",{class:{"co-combobox__text":!0,"co-combobox__text--placeholder":!this.hasValue}},this.hasValue?this.displayText:this.placeholder)),this.multiple&&this.overflowCount>0&&c("span",{key:"dba6a9ca703aa80b0b47b3ca132a3ad4364a5968",class:"co-combobox__overflow-badge"},this.overflowCount),this.clearable&&this.hasValue&&!this.disabled&&c("button",{key:"2b1f12c41ee1eb95a59dc763b6d1c23f191543aa",class:"co-combobox__clear",type:"button",tabIndex:-1,onClick:this.handleClear,"aria-label":"Clear selection",part:"clear"},c("co-icon",{key:"d34a19853a49618668609c963bbf1d6c79170859",name:"x-circle",size:16,weight:"fill"})),c("co-icon",{key:"bc0be278e45f1a4be653f294f4fcea5253491653",name:this.isOpen?"caret-up":"caret-down",size:16,class:"co-combobox__caret"})),c("div",{key:"0a346246fb89f71f1b55e68b102c6d670d2d5e17",class:"co-combobox__dropdown",part:"dropdown"},this.searchable&&c("div",{key:"5c7134c5a68402e62b050d6a1ac43bfa110232b4",class:"co-combobox__search",part:"search"},c("co-icon",{key:"4533ade5d31966b24d6f3f57d32fefe711f2ee5f",name:"magnifying-glass",size:16,class:"co-combobox__search-icon"}),c("input",{key:"edbfb2c18dbba3416410a4bbb67dfffa962eeb57",class:"co-combobox__search-input",type:"text",placeholder:this.searchPlaceholder,value:this.searchQuery,onInput:this.handleSearchInput,part:"search-input"})),c("div",{key:"6734495aca88397e2874e5dda5252bda2a96a5ca",class:"co-combobox__options",part:"options",ref:o=>this.optionsContainerEl=o,onScroll:this.handleOptionsScroll},(()=>{const{totalHeight:t,startIdx:i,endIdx:a,offsetY:s}=this.getVirtualSlice(e);return c("div",{class:"co-combobox__virtual-spacer",style:{height:t+"px",position:"relative"}},c("div",{style:{position:"absolute",top:s+"px",left:"0",right:"0"}},e.slice(i,a).map((e=>{const t=o.includes(e.value);return c("div",{class:{"co-combobox__option":!0,"co-combobox__option--selected":t},onClick:()=>this.handleOptionClick(e.value),part:"option"},c("div",{class:"co-combobox__option-content"},c("div",{class:"co-combobox__option-icon-wrapper"},c("co-icon",{name:e.icon||"circle",size:20,class:"co-combobox__option-icon"})),c("span",{class:"co-combobox__option-label"},e.label)),t&&this.multiple&&c("button",{class:"co-combobox__option-remove",type:"button",tabIndex:-1,onClick:o=>this.handleRemoveOption(o,e.value),"aria-label":"Remove "+e.label},c("co-icon",{name:"x-circle",size:16,weight:"fill"})),t&&!this.multiple&&c("co-icon",{name:"check",size:16,class:"co-combobox__option-check"}))}))))})()),this.showFooter&&c("div",{key:"d618d08c25c1f2d1d04b9e7b19df9b01d79f7002",class:"co-combobox__footer",part:"footer"},c("button",{key:"950ab40c71a96de34f339859b9f69397ad69b1c3",class:"co-combobox__footer-btn co-combobox__footer-btn--secondary",type:"button",onClick:this.handleFooterSecondary},c("co-icon",{key:"89c72b7cbbfab66980fc3b5ff2d6e61cfc0e544d",name:"plus",size:16}),c("span",{key:"167aadfbcae4abccf7e35f2b32e0893f75a495f6"},this.footerSecondaryLabel)),c("button",{key:"92778f91ff795978396c3b99b7f1900645a51cf7",class:"co-combobox__footer-btn co-combobox__footer-btn--primary",type:"button",onClick:this.handleFooterPrimary},c("co-icon",{key:"31c26c2ee563b10948313d750cfce00e5cf47a9f",name:"plus",size:16}),c("span",{key:"4860a6e7399596dd28ad3e0e9c577a1e93ece861"},this.footerPrimaryLabel))))))}get el(){return this}static get watchers(){return{isOpen:[{onOpenChange: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-combobox{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-combobox__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-combobox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-combobox__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-combobox__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-white, white);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease;overflow:hidden}.co-combobox--open .co-combobox__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-combobox--disabled .co-combobox__trigger{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-combobox__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__icon{color:var(--co-semantic-text-disabled)}.co-combobox__input-wrapper{flex:1;display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-width:0;min-height:24px;padding:var(--co-spacing-xxs) 0;overflow:hidden}.co-combobox__input-wrapper co-chip{--co-chip-max-width:120px;--co-chip-bg:var(--co-semantic-surface-muted);--co-chip-color:var(--co-semantic-text-default);--co-chip-border:1px solid var(--co-semantic-border-subtle);flex-shrink:0}.co-combobox__overflow-badge{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-info, #2563eb);color:#fff;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-10);font-weight:600;line-height:1;white-space:nowrap}.co-combobox__text{color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-combobox__text--placeholder{color:var(--co-semantic-text-muted)}.co-combobox--disabled .co-combobox__text{color:var(--co-semantic-text-disabled)}.co-combobox__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-combobox__clear:hover{color:var(--co-semantic-text-default)}.co-combobox__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__caret{color:var(--co-semantic-text-disabled)}.co-combobox__dropdown{padding:var(--co-spacing-md);display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-combobox__search{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-sm2);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);overflow:hidden;height:32px;box-sizing:border-box}.co-combobox__search-icon{flex-shrink:0;color:var(--co-semantic-text-muted);opacity:0.7;display:flex;align-items:center}.co-combobox__search-input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--co-font-size-12, 12px);font-weight:500;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-combobox__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-combobox__options{max-height:280px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--co-semantic-border-subtle) transparent}.co-combobox__options::-webkit-scrollbar{width:6px}.co-combobox__options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.co-combobox__options::-webkit-scrollbar-thumb{background:var(--co-semantic-border-subtle);border-radius:3px;transition:background 0.15s ease}.co-combobox__options::-webkit-scrollbar-thumb:hover{background:var(--co-semantic-text-muted)}.co-combobox__virtual-spacer{width:100%}.co-combobox__option{display:flex;align-items:center;justify-content:space-between;padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);cursor:pointer;height:32px;margin-bottom:2px;box-sizing:border-box;transition:background 0.1s ease}.co-combobox__option:hover{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-combobox__option-content{display:flex;align-items:center;gap:var(--co-spacing-sm2);flex:1;min-width:0}.co-combobox__option-icon-wrapper{width:24px;height:24px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}.co-combobox__option-icon{color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox__option-label{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-combobox__option-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;overflow:hidden;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-combobox__option-remove:hover{color:var(--co-semantic-text-default)}.co-combobox__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-combobox__footer{display:flex;gap:var(--co-spacing-sm2);padding-top:var(--co-spacing-sm2)}.co-combobox__footer-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity 0.15s ease;box-sizing:border-box;min-height:32px}.co-combobox__footer-btn:hover{opacity:0.85}.co-combobox__footer-btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-combobox__footer-btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}"}},[1,"co-combobox",{label:[1],secondaryLabel:[1,"secondary-label"],placeholder:[1],disabled:[4],iconLeft:[1,"icon-left"],clearable:[4],searchable:[4],searchPlaceholder:[1,"search-placeholder"],showFooter:[4,"show-footer"],footerPrimaryLabel:[1,"footer-primary-label"],footerSecondaryLabel:[1,"footer-secondary-label"],options:[1],value:[1025],multiple:[4],helperText:[1,"helper-text"],isOpen:[32],searchQuery:[32],overflowCount:[32],scrollTop:[32]},void 0,{isOpen:[{onOpenChange:0}],value:[{onValueChange:0}]}]);function l(){"undefined"!=typeof customElements&&["co-combobox","co-chip","co-icon","co-popover"].forEach((o=>{switch(o){case"co-combobox":customElements.get(i(o))||customElements.define(i(o),n);break;case"co-chip":customElements.get(i(o))||a();break;case"co-icon":customElements.get(i(o))||s();break;case"co-popover":customElements.get(i(o))||r()}}))}n.ITEM_HEIGHT=34,n.VIEWPORT_ITEMS=8,n.OVERSCAN=3,l();const b=n,d=l;export{b as CoCombobox,d as defineCustomElement}
|
|
1
|
+
import{p as o,H as e,c as t,h as c,t as i}from"./index.js";import{d as a}from"./p-B18FTYLq.js";import{d as s}from"./p-wwWquAtm.js";import{d as r}from"./p-FBICWTuN.js";const n=o(class o extends e{constructor(o){super(),!1!==o&&this.__registerHost(),this.__attachShadow(),this.coChange=t(this,"coChange",7),this.coOpen=t(this,"coOpen",7),this.coClose=t(this,"coClose",7),this.coClear=t(this,"coClear",7),this.coFooterPrimary=t(this,"coFooterPrimary",7),this.coFooterSecondary=t(this,"coFooterSecondary",7),this.placeholder="Placeholder",this.disabled=!1,this.clearable=!0,this.searchable=!1,this.searchPlaceholder="Search",this.showFooter=!1,this.footerPrimaryLabel="Ok",this.footerSecondaryLabel="New Tags",this.options="[]",this.value="[]",this.multiple=!0,this.isOpen=!1,this.searchQuery="",this.overflowCount=0,this.scrollTop=0,this.handleTriggerClick=o=>{console.log("[co-combobox] handleTriggerClick, disabled:",this.disabled),this.disabled&&o.stopPropagation()},this.handlePopoverOpen=()=>{console.log("[co-combobox] handlePopoverOpen called"),this.isOpen=!0},this.handlePopoverClose=()=>{console.log("[co-combobox] handlePopoverClose called"),this.isOpen=!1},this.handleClear=o=>{o.stopPropagation(),this.value="[]",this.coClear.emit(),this.coChange.emit([])},this.handleOptionClick=o=>{const e=[...this.selectedValues],t=e.indexOf(o);t>=0?e.splice(t,1):this.multiple?e.push(o):(e.length=0,e.push(o),this.isOpen=!1),this.value=JSON.stringify(e),this.coChange.emit(e)},this.handleRemoveOption=(o,e)=>{o.stopPropagation();const t=this.selectedValues.filter((o=>o!==e));this.value=JSON.stringify(t),this.coChange.emit(t)},this.handleSearchInput=o=>{this.searchQuery=o.target.value,this.scrollTop=0,this.optionsContainerEl&&(this.optionsContainerEl.scrollTop=0)},this.handleFooterPrimary=()=>{this.coFooterPrimary.emit(),this.isOpen=!1},this.handleFooterSecondary=()=>{this.coFooterSecondary.emit()},this.handleOptionsScroll=o=>{this.scrollTop=o.target.scrollTop}}normalizeOptions(o){return o.map((o=>"string"==typeof o?{label:o,value:o}:o))}get parsedOptions(){if("string"==typeof this.options)try{return this.normalizeOptions(JSON.parse(this.options))}catch(o){return[]}return this.normalizeOptions(this.options)}get selectedValues(){if("string"==typeof this.value)try{return JSON.parse(this.value)}catch(o){return[]}return this.value}get filteredOptions(){if(!this.searchQuery)return this.parsedOptions;const o=this.searchQuery.toLowerCase();return this.parsedOptions.filter((e=>e.label.toLowerCase().includes(o)))}get displayText(){const o=this.selectedValues;if(0===o.length)return"";const e=this.parsedOptions.find((e=>e.value===o[0]));return e?e.label:o[0]}get selectedOptions(){return this.selectedValues.map((o=>this.parsedOptions.find((e=>e.value===o)))).filter((o=>!!o))}get hasValue(){return this.selectedValues.length>0}onOpenChange(o){o?(this.searchQuery="",this.scrollTop=0,this.coOpen.emit()):this.coClose.emit()}onValueChange(){}connectedCallback(){this.resizeObserver=new ResizeObserver((()=>{this.calcOverflow()}))}disconnectedCallback(){var o;null===(o=this.resizeObserver)||void 0===o||o.disconnect()}componentDidRender(){var o,e;this.chipContainerEl&&(null===(o=this.resizeObserver)||void 0===o||o.disconnect(),null===(e=this.resizeObserver)||void 0===e||e.observe(this.chipContainerEl)),this.calcOverflow()}calcOverflow(){if(!this.multiple||!this.chipContainerEl)return;const o=this.chipContainerEl,e=Array.from(o.querySelectorAll("co-chip"));if(0===e.length)return void(0!==this.overflowCount&&(this.overflowCount=0));const t=o.getBoundingClientRect().right;let c=0;for(let o=e.length-1;o>=0&&e[o].getBoundingClientRect().right>t+1;o--)c++;c!==this.overflowCount&&(this.overflowCount=c)}getVirtualSlice(e){const{ITEM_HEIGHT:t,VIEWPORT_ITEMS:c,OVERSCAN:i}=o,a=e.length,s=a*t,r=Math.max(0,Math.floor(this.scrollTop/t)-i);return{totalHeight:s,startIdx:r,endIdx:Math.min(a,r+c+2*i),offsetY:r*t}}render(){const o=this.selectedValues,e=this.filteredOptions;return c("div",{key:"e77d4338436c01bf4aeac90a08ec31c60c320e56",class:{"co-combobox":!0,"co-combobox--open":this.isOpen,"co-combobox--disabled":this.disabled,"co-combobox--filled":this.hasValue},part:"wrapper"},(this.label||this.secondaryLabel)&&c("div",{key:"60f9e0522a8dee4833bbfa564fb55e2bd4b924eb",class:"co-combobox__labels"},this.label&&c("label",{key:"070a1111f508e299313d90364920aca7c2c00062",class:"co-combobox__label",part:"label"},this.label),this.secondaryLabel&&c("span",{key:"77544e3e6783ae2b7e4c51fdf2c614b43db3df18",class:"co-combobox__secondary-label",part:"secondary-label"},this.secondaryLabel)),c("co-popover",{key:"69b76f964e92406025c94c44aa639c7d128643ee",open:this.isOpen,placement:"bottom-start",matchWidth:!0,offset:4,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},c("div",{key:"4ea12edc1d79d609379fe293f7807af3c4a31c20",slot:"trigger",class:"co-combobox__trigger",part:"trigger",onClick:this.handleTriggerClick},this.iconLeft&&c("co-icon",{key:"7c9053e320c472bd67a621487de2b456714de2b7",name:this.iconLeft,size:16,class:"co-combobox__icon"}),c("div",{key:"1c9e01f82203801fd4e11c3d01448f0caa3d9cd5",class:"co-combobox__input-wrapper",ref:o=>this.chipContainerEl=o},this.multiple&&this.hasValue?this.selectedOptions.map((o=>c("co-chip",{size:"small","icon-mode":"both",label:o.label},c("co-icon",{slot:"icon-left",name:o.icon||"circle",size:10}),c("co-icon",{slot:"icon-right",name:"x-circle",size:10,weight:"fill",onClick:e=>this.handleRemoveOption(e,o.value)})))):c("span",{class:{"co-combobox__text":!0,"co-combobox__text--placeholder":!this.hasValue}},this.hasValue?this.displayText:this.placeholder)),this.multiple&&this.overflowCount>0&&c("span",{key:"dba6a9ca703aa80b0b47b3ca132a3ad4364a5968",class:"co-combobox__overflow-badge"},this.overflowCount),this.clearable&&this.hasValue&&!this.disabled&&c("button",{key:"2b1f12c41ee1eb95a59dc763b6d1c23f191543aa",class:"co-combobox__clear",type:"button",tabIndex:-1,onClick:this.handleClear,"aria-label":"Clear selection",part:"clear"},c("co-icon",{key:"d34a19853a49618668609c963bbf1d6c79170859",name:"x-circle",size:16,weight:"fill"})),c("co-icon",{key:"bc0be278e45f1a4be653f294f4fcea5253491653",name:this.isOpen?"caret-up":"caret-down",size:16,class:"co-combobox__caret"})),c("div",{key:"0a346246fb89f71f1b55e68b102c6d670d2d5e17",class:"co-combobox__dropdown",part:"dropdown"},this.searchable&&c("div",{key:"5c7134c5a68402e62b050d6a1ac43bfa110232b4",class:"co-combobox__search",part:"search"},c("co-icon",{key:"4533ade5d31966b24d6f3f57d32fefe711f2ee5f",name:"magnifying-glass",size:16,class:"co-combobox__search-icon"}),c("input",{key:"edbfb2c18dbba3416410a4bbb67dfffa962eeb57",class:"co-combobox__search-input",type:"text",placeholder:this.searchPlaceholder,value:this.searchQuery,onInput:this.handleSearchInput,part:"search-input"})),c("div",{key:"6734495aca88397e2874e5dda5252bda2a96a5ca",class:"co-combobox__options",part:"options",ref:o=>this.optionsContainerEl=o,onScroll:this.handleOptionsScroll},(()=>{const{totalHeight:t,startIdx:i,endIdx:a,offsetY:s}=this.getVirtualSlice(e);return c("div",{class:"co-combobox__virtual-spacer",style:{height:t+"px",position:"relative"}},c("div",{style:{position:"absolute",top:s+"px",left:"0",right:"0"}},e.slice(i,a).map((e=>{const t=o.includes(e.value);return c("div",{class:{"co-combobox__option":!0,"co-combobox__option--selected":t},onClick:()=>this.handleOptionClick(e.value),part:"option"},c("div",{class:"co-combobox__option-content"},c("div",{class:"co-combobox__option-icon-wrapper"},c("co-icon",{name:e.icon||"circle",size:20,class:"co-combobox__option-icon"})),c("span",{class:"co-combobox__option-label"},e.label)),t&&this.multiple&&c("button",{class:"co-combobox__option-remove",type:"button",tabIndex:-1,onClick:o=>this.handleRemoveOption(o,e.value),"aria-label":"Remove "+e.label},c("co-icon",{name:"x-circle",size:16,weight:"fill"})),t&&!this.multiple&&c("co-icon",{name:"check",size:16,class:"co-combobox__option-check"}))}))))})()),this.showFooter&&c("div",{key:"d618d08c25c1f2d1d04b9e7b19df9b01d79f7002",class:"co-combobox__footer",part:"footer"},c("button",{key:"950ab40c71a96de34f339859b9f69397ad69b1c3",class:"co-combobox__footer-btn co-combobox__footer-btn--secondary",type:"button",onClick:this.handleFooterSecondary},c("co-icon",{key:"89c72b7cbbfab66980fc3b5ff2d6e61cfc0e544d",name:"plus",size:16}),c("span",{key:"167aadfbcae4abccf7e35f2b32e0893f75a495f6"},this.footerSecondaryLabel)),c("button",{key:"92778f91ff795978396c3b99b7f1900645a51cf7",class:"co-combobox__footer-btn co-combobox__footer-btn--primary",type:"button",onClick:this.handleFooterPrimary},c("co-icon",{key:"31c26c2ee563b10948313d750cfce00e5cf47a9f",name:"plus",size:16}),c("span",{key:"4860a6e7399596dd28ad3e0e9c577a1e93ece861"},this.footerPrimaryLabel))))))}get el(){return this}static get watchers(){return{isOpen:[{onOpenChange: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-combobox{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-combobox__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-combobox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-combobox__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-combobox__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease;overflow:hidden}.co-combobox--open .co-combobox__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-combobox--disabled .co-combobox__trigger{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-combobox__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__icon{color:var(--co-semantic-text-disabled)}.co-combobox__input-wrapper{flex:1;display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-width:0;min-height:24px;padding:var(--co-spacing-xxs) 0;overflow:hidden}.co-combobox__input-wrapper co-chip{--co-chip-max-width:120px;--co-chip-bg:var(--co-semantic-surface-muted);--co-chip-color:var(--co-semantic-text-default);--co-chip-border:1px solid var(--co-semantic-border-subtle);flex-shrink:0}.co-combobox__overflow-badge{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-info, #2563eb);color:#fff;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-10);font-weight:600;line-height:1;white-space:nowrap}.co-combobox__text{color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-combobox__text--placeholder{color:var(--co-semantic-text-muted)}.co-combobox--disabled .co-combobox__text{color:var(--co-semantic-text-disabled)}.co-combobox__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-combobox__clear:hover{color:var(--co-semantic-text-default)}.co-combobox__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__caret{color:var(--co-semantic-text-disabled)}.co-combobox__dropdown{padding:var(--co-spacing-md);display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-combobox__search{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-sm2);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);overflow:hidden;height:32px;box-sizing:border-box}.co-combobox__search-icon{flex-shrink:0;color:var(--co-semantic-text-muted);opacity:0.7;display:flex;align-items:center}.co-combobox__search-input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--co-font-size-12, 12px);font-weight:500;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-combobox__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-combobox__options{max-height:280px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--co-semantic-border-subtle) transparent}.co-combobox__options::-webkit-scrollbar{width:6px}.co-combobox__options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.co-combobox__options::-webkit-scrollbar-thumb{background:var(--co-semantic-border-subtle);border-radius:3px;transition:background 0.15s ease}.co-combobox__options::-webkit-scrollbar-thumb:hover{background:var(--co-semantic-text-muted)}.co-combobox__virtual-spacer{width:100%}.co-combobox__option{display:flex;align-items:center;justify-content:space-between;padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);cursor:pointer;height:32px;margin-bottom:2px;box-sizing:border-box;transition:background 0.1s ease}.co-combobox__option:hover{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-combobox__option-content{display:flex;align-items:center;gap:var(--co-spacing-sm2);flex:1;min-width:0}.co-combobox__option-icon-wrapper{width:24px;height:24px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}.co-combobox__option-icon{color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox__option-label{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-combobox__option-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;overflow:hidden;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-combobox__option-remove:hover{color:var(--co-semantic-text-default)}.co-combobox__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-combobox__footer{display:flex;gap:var(--co-spacing-sm2);padding-top:var(--co-spacing-sm2)}.co-combobox__footer-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity 0.15s ease;box-sizing:border-box;min-height:32px}.co-combobox__footer-btn:hover{opacity:0.85}.co-combobox__footer-btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-combobox__footer-btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}"}},[1,"co-combobox",{label:[1],secondaryLabel:[1,"secondary-label"],placeholder:[1],disabled:[4],iconLeft:[1,"icon-left"],clearable:[4],searchable:[4],searchPlaceholder:[1,"search-placeholder"],showFooter:[4,"show-footer"],footerPrimaryLabel:[1,"footer-primary-label"],footerSecondaryLabel:[1,"footer-secondary-label"],options:[1],value:[1025],multiple:[4],helperText:[1,"helper-text"],isOpen:[32],searchQuery:[32],overflowCount:[32],scrollTop:[32]},void 0,{isOpen:[{onOpenChange:0}],value:[{onValueChange:0}]}]);function l(){"undefined"!=typeof customElements&&["co-combobox","co-chip","co-icon","co-popover"].forEach((o=>{switch(o){case"co-combobox":customElements.get(i(o))||customElements.define(i(o),n);break;case"co-chip":customElements.get(i(o))||a();break;case"co-icon":customElements.get(i(o))||s();break;case"co-popover":customElements.get(i(o))||r()}}))}n.ITEM_HEIGHT=34,n.VIEWPORT_ITEMS=8,n.OVERSCAN=3,l();const b=n,d=l;export{b as CoCombobox,d as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e,p as i,H as t,c as s,h as o}from"./index.js";import{d as n}from"./p-wwWquAtm.js";import{d as r}from"./p-
|
|
1
|
+
import{t as e,p as i,H as t,c as s,h as o}from"./index.js";import{d as n}from"./p-wwWquAtm.js";import{d as r}from"./p-FBICWTuN.js";const c=i(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coSelect=s(this,"coSelect",7),this.coMenuSelect=s(this,"coMenuSelect",7),this.dense=!1,this.disabled=!1,this.variant="default",this.hasSubmenu=!1,this.submenuOpen=!1,this.handleClick=e=>{if(!this.disabled){if(this.hasSubmenu)return e.stopPropagation(),void this.openSubmenu();this.coSelect.emit(),this.coMenuSelect.emit()}},this.handleKeydown=e=>{var i;this.disabled||("Enter"===e.key||" "===e.key?(e.preventDefault(),this.handleClick(e)):"ArrowRight"===e.key&&this.hasSubmenu?(e.preventDefault(),this.openSubmenu(),requestAnimationFrame((()=>{var e;const i=this.el.querySelector("co-menu-item");null===(e=null==i?void 0:i.focusItem)||void 0===e||e.call(i)}))):"ArrowLeft"===e.key&&this.submenuOpen&&(e.preventDefault(),this.submenuOpen=!1,null===(i=this.rowEl)||void 0===i||i.focus()))},this.handleMouseEnter=()=>{!this.disabled&&this.hasSubmenu&&(this.cancelClose(),this.openSubmenu())},this.handleMouseLeave=()=>{this.hasSubmenu&&this.scheduleClose()}}async focusItem(){var e;null===(e=this.rowEl)||void 0===e||e.focus()}componentWillLoad(){this.hasSubmenu=this.detectSubmenu()}disconnectedCallback(){this.cancelClose()}detectSubmenu(){for(const e of Array.from(this.el.children)){const i=e.tagName.toLowerCase();if("co-menu-item"===i||"co-menu-divider"===i)return!0}return!1}openSubmenu(){this.submenuOpen=!0}scheduleClose(){this.cancelClose(),this.closeTimer=window.setTimeout((()=>{this.submenuOpen=!1}),200)}cancelClose(){this.closeTimer&&(window.clearTimeout(this.closeTimer),this.closeTimer=void 0)}render(){const e=o("button",{ref:e=>this.rowEl=e,class:{"co-menu-item":!0,"co-menu-item--dense":this.dense,"co-menu-item--disabled":this.disabled,"co-menu-item--danger":"danger"===this.variant,"co-menu-item--submenu":this.hasSubmenu,"co-menu-item--submenu-open":this.hasSubmenu&&this.submenuOpen},type:"button",role:"menuitem","aria-haspopup":this.hasSubmenu?"menu":void 0,"aria-expanded":this.hasSubmenu?this.submenuOpen?"true":"false":void 0,disabled:this.disabled,onClick:this.handleClick,onKeyDown:this.handleKeydown,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},this.icon&&o("span",{class:"co-menu-item__icon"},o("co-icon",{name:this.icon,size:16})),o("span",{class:"co-menu-item__label"},this.label,o("slot",{name:"label"})),o("span",{class:"co-menu-item__suffix"},o("slot",{name:"suffix"}),this.hasSubmenu&&o("co-icon",{name:"caret-right",size:14})));return this.hasSubmenu?o("div",{class:"co-menu-item__wrap co-menu-item__wrap--submenu",onMouseEnter:this.cancelClose,onMouseLeave:this.handleMouseLeave},o("co-popover",{placement:"right-start",offset:4,open:this.submenuOpen,onCoOpen:()=>{this.submenuOpen=!0},onCoClose:()=>{this.submenuOpen=!1}},o("div",{slot:"trigger",class:"co-menu-item__trigger-wrap"},e),o("div",{class:"co-menu-item__submenu",role:"menu"},o("slot",null)))):o("div",{class:"co-menu-item__wrap"},e)}get el(){return this}static get style(){return":host{display:block}.co-menu-item__wrap{display:block}.co-menu-item{width:100%;display:flex;align-items:center;gap:var(--co-spacing-sm, 8px);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 0.1s ease, color 0.1s ease;min-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: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-error-bg, rgba(170, 46, 27, 0.08))}.co-menu-item__icon{display:inline-flex;align-items:center;flex-shrink:0;color:currentColor}.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__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:1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);padding:var(--co-spacing-xs, 4px);min-width:180px;display:flex;flex-direction:column;gap:2px}"}},[257,"co-menu-item",{icon:[1],label:[1],dense:[4],disabled:[4],variant:[1],hasSubmenu:[32],submenuOpen:[32],focusItem:[64]}]);function a(){"undefined"!=typeof customElements&&["co-menu-item","co-icon","co-popover"].forEach((i=>{switch(i){case"co-menu-item":customElements.get(e(i))||customElements.define(e(i),c);break;case"co-icon":customElements.get(e(i))||n();break;case"co-popover":customElements.get(e(i))||r()}}))}a();const m=c,u=a;export{m as CoMenuItem,u as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e,p as t,H as o,c as s,h as n}from"./index.js";import{d as c}from"./p-
|
|
1
|
+
import{t as e,p as t,H as o,c as s,h as n}from"./index.js";import{d as c}from"./p-FBICWTuN.js";const i=t(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coOpen=s(this,"coOpen",3),this.coClose=s(this,"coClose",3),this.placement="bottom-end",this.offset=4,this.autoClose=!0,this.open=!1,this.handleKeydown=e=>{if(this.open)switch(e.key){case"Escape":e.preventDefault(),e.stopPropagation(),this.open=!1;break;case"ArrowDown":case"ArrowUp":e.preventDefault(),this.moveFocus("ArrowDown"===e.key?1:-1)}},this.handlePopoverOpen=()=>{this.open=!0,this.coOpen.emit()},this.handlePopoverClose=()=>{this.open=!1,this.coClose.emit()}}handleMenuSelect(){this.autoClose&&(this.open=!1)}onOpenChange(e){e?(document.addEventListener("keydown",this.handleKeydown,!0),requestAnimationFrame((()=>this.focusFirstItem()))):document.removeEventListener("keydown",this.handleKeydown,!0)}disconnectedCallback(){document.removeEventListener("keydown",this.handleKeydown,!0)}async focusFirstItem(){var e,t;null===(t=null===(e=this.getMenuItems()[0])||void 0===e?void 0:e.focusItem)||void 0===t||t.call(e)}getMenuItems(){return Array.from(this.el.querySelectorAll("co-menu-item"))}moveFocus(e){var t,o;const s=this.getMenuItems().filter((e=>!e.disabled));if(0===s.length)return;const n=document.activeElement;let c=s.findIndex((e=>e===n||e.contains(n)));-1===c&&(c=e>0?-1:s.length),null===(o=null===(t=s[(c+e+s.length)%s.length])||void 0===t?void 0:t.focusItem)||void 0===o||o.call(t)}render(){return n("co-popover",{key:"b3c7932fb6c4574e66ddb3ccbc139ebcd86cce41",placement:this.placement,offset:this.offset,open:this.open,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},n("slot",{key:"aa6546808d38973f71d12575ac62106a4e4c2c1f",name:"trigger",slot:"trigger"}),n("div",{key:"376d8202add51e08dd9361fa4fd6d4840c1d61ce",class:"co-menu",role:"menu"},n("slot",{key:"2e1df74c20f44e98dc51474b9009e8dc12f9b403"})))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return":host{display:contents}.co-menu{background:var(--co-semantic-surface-secondary, #fff);border:1px solid var(--co-semantic-border-subtle, rgba(31, 28, 27, 0.08));border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);padding:var(--co-spacing-xs, 4px);min-width:200px;display:flex;flex-direction:column;gap:2px;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14, 14px);color:var(--co-semantic-text-default)}"}},[257,"co-menu",{placement:[1],offset:[2],autoClose:[4,"auto-close"],open:[1540],focusFirstItem:[64]},[[0,"coMenuSelect","handleMenuSelect"]],{open:[{onOpenChange:0}]}]);function r(){"undefined"!=typeof customElements&&["co-menu","co-popover"].forEach((t=>{switch(t){case"co-menu":customElements.get(e(t))||customElements.define(e(t),i);break;case"co-popover":customElements.get(e(t))||c()}}))}r();const a=i,d=r;export{a as CoMenu,d as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{C as o,d as s}from"./p-
|
|
1
|
+
import{C as o,d as s}from"./p-FBICWTuN.js";const p=o,r=s;export{p as CoPopover,r as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e,p as o,H as i,c as r,h as t}from"./index.js";import{i as s}from"./p-BG4WRR22.js";import{d as a}from"./p-wwWquAtm.js";import{d as c}from"./p-OGpfa9Yd.js";import{d as n}from"./p-Dv_iMPy0.js";const l=o(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coChange=r(this,"coChange",7),this.coClear=r(this,"coClear",7),this.coSearch=r(this,"coSearch",7),this.coLoadMore=r(this,"coLoadMore",7),this.coOpen=r(this,"coOpen",3),this.coClose=r(this,"coClose",3),this.coCreate=r(this,"coCreate",7),this.coRemove=r(this,"coRemove",7),this.coFooterPrimary=r(this,"coFooterPrimary",7),this.coFooterSecondary=r(this,"coFooterSecondary",7),this.placeholder="Select…",this.disabled=!1,this.clearable=!0,this.multiple=!1,this.status="default",this.value="",this.options="[]",this.selectedDisplay="[]",this.loading=!1,this.total=0,this.searchable=!0,this.searchPlaceholder="Search…",this.searchDebounce=350,this.emptyMessage="No results found",this.showFooter=!1,this.footerPrimaryLabel="Ok",this.footerSecondaryLabel="New",this.maxChips=3,this.isOpen=!1,this.searchText="",this.handlePopoverOpen=()=>{this.isOpen=!0},this.handlePopoverClose=()=>{this.isOpen=!1},this.handleTriggerClick=e=>{this.disabled&&e.stopPropagation()},this.handleSearchInput=e=>{const o=e.target.value;this.searchText=o,this.debounceTimer&&clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout((()=>{this.coSearch.emit(o)}),this.searchDebounce)},this.handleOptionClick=e=>{if(this.multiple){const o=this.parsedValue;let i;i=o.indexOf(e._id)>=0?o.filter((o=>o!==e._id)):[...o,e._id],this.value=JSON.stringify(i),this.coChange.emit({value:i,item:e})}else this.value=e._id,this.coChange.emit({value:e._id,item:e}),this.isOpen=!1},this.handleClear=e=>{e.stopPropagation(),this.value=this.multiple?"[]":"",this.coClear.emit()},this.handleRemoveChip=(e,o)=>{o.stopPropagation();const i=this.parsedValue.filter((o=>o!==e));this.value=JSON.stringify(i),this.coRemove.emit(e)},this.handleScroll=()=>{if(!this.optionsEl||this.loading||!this.hasMore)return;const{scrollTop:e,scrollHeight:o,clientHeight:i}=this.optionsEl;e+i>=o-40&&this.coLoadMore.emit()},this.handleCreateClick=()=>{this.coCreate.emit(this.searchText)},this.handleFooterPrimary=()=>{this.coFooterPrimary.emit(),this.isOpen=!1},this.handleFooterSecondary=()=>{this.coFooterSecondary.emit()}}get parsedOptions(){try{const e="string"==typeof this.options?JSON.parse(this.options):this.options;return Array.isArray(e)?e:[]}catch(e){return[]}}get parsedSelectedDisplay(){try{const e="string"==typeof this.selectedDisplay?JSON.parse(this.selectedDisplay):this.selectedDisplay;return Array.isArray(e)?e:[]}catch(e){return[]}}get effectiveDisplayItems(){const e=this.parsedValue;if(0===e.length)return[];const o=new Map;for(const e of this.parsedSelectedDisplay)o.set(e._id,e);for(const e of this.parsedOptions)o.has(e._id)||o.set(e._id,{_id:e._id,label:e.label,description:e.description,color:e.color,avatar:e.avatar});return e.map((e=>o.get(e))).filter(Boolean)}get parsedValue(){if(!this.value)return[];try{const e=JSON.parse(this.value);return Array.isArray(e)?e:[this.value]}catch(e){return this.value?[this.value]:[]}}get hasMore(){return this.parsedOptions.length<this.total}get remainingCount(){return Math.max(0,this.total-this.parsedOptions.length)}disconnectedCallback(){this.debounceTimer&&clearTimeout(this.debounceTimer)}onOpenChange(e){e?(this.coOpen.emit(),requestAnimationFrame((()=>{var e;null===(e=this.searchInputEl)||void 0===e||e.focus()}))):(this.searchText="",this.coClose.emit())}renderTrigger(){const e=this.effectiveDisplayItems,o=e.length>0;return t("div",{class:{"co-ref-field__trigger":!0,"co-ref-field--open":this.isOpen,"co-ref-field--disabled":this.disabled,["co-ref-field--"+this.status]:"default"!==this.status},onClick:this.handleTriggerClick},this.iconLeft&&t("span",{class:"co-ref-field__icon"},t("co-icon",{name:this.iconLeft,size:16})),t("div",{class:"co-ref-field__value"},!o&&t("span",{class:"co-ref-field__placeholder"},this.placeholder),o&&!this.multiple&&this.renderSingleValue(e[0]),o&&this.multiple&&this.renderMultipleValue(e)),o&&this.clearable&&!this.disabled&&t("button",{class:"co-ref-field__clear",onClick:this.handleClear,type:"button"},t("co-icon",{name:"x",size:14})),t("span",{class:"co-ref-field__caret"},t("co-icon",{name:"caret-up-down",size:16})))}renderSingleValue(e){return t("div",{class:"co-ref-field__selected"},e.avatar?t("span",{class:{"co-ref-field__avatar-sm":!0,"co-ref-field__avatar-sm--light":!!e.color&&s(e.color)},style:{backgroundColor:e.color||"var(--co-color-primary-azul)"}},e.avatar):e.color?t("span",{class:"co-ref-field__color-dot",style:{backgroundColor:e.color}}):null,t("span",{class:"co-ref-field__selected-label"},e.label))}renderMultipleValue(e){const o=e.slice(0,this.maxChips),i=e.length-this.maxChips;return t("div",{class:"co-ref-field__chips"},o.map((e=>t("span",{class:"co-ref-field__chip",key:e._id},e.color&&t("span",{class:"co-ref-field__chip-dot",style:{backgroundColor:e.color}}),t("span",{class:"co-ref-field__chip-label"},e.label),t("button",{class:"co-ref-field__chip-remove",onClick:o=>this.handleRemoveChip(e._id,o),type:"button"},t("co-icon",{name:"x",size:10}))))),i>0&&t("span",{class:"co-ref-field__chip-overflow"},"+",i))}renderPanel(){const e=this.parsedOptions,o=this.parsedValue;return t("div",{class:"co-ref-field__panel"},this.searchable&&t("div",{class:"co-ref-field__search"},t("co-icon",{name:"magnifying-glass",size:16}),t("input",{class:"co-ref-field__search-input",type:"text",placeholder:this.searchPlaceholder,value:this.searchText,onInput:this.handleSearchInput,ref:e=>this.searchInputEl=e})),t("div",{class:"co-ref-field__options",ref:e=>this.optionsEl=e,onScroll:this.handleScroll},this.loading&&0===e.length&&t("div",{class:"co-ref-field__loading"},t("co-loader",{size:"sm"})),!this.loading&&0===e.length&&t("div",{class:"co-ref-field__empty"},t("co-icon",{name:"magnifying-glass",size:20}),t("span",null,this.emptyMessage)),e.map((e=>{const i=o.includes(e._id);return t("div",{class:{"co-ref-field__option":!0,"co-ref-field__option--selected":i},key:e._id,onClick:()=>this.handleOptionClick(e)},e.avatar&&t("span",{class:{"co-ref-field__option-avatar":!0,"co-ref-field__option-avatar--light":!!e.color&&s(e.color)},style:{backgroundColor:e.color||"var(--co-color-primary-azul)"}},e.avatar),!e.avatar&&e.color&&t("span",{class:"co-ref-field__option-color",style:{backgroundColor:e.color}}),e.icon&&!e.color&&!e.avatar&&t("co-icon",{name:e.icon,size:16,class:"co-ref-field__option-icon"}),t("div",{class:"co-ref-field__option-text"},t("span",{class:"co-ref-field__option-label"},e.label),e.description&&t("span",{class:"co-ref-field__option-desc"},e.description)),i&&t("button",{class:"co-ref-field__option-deselect",onClick:o=>{o.stopPropagation(),this.handleOptionClick(e)},type:"button"},t("co-icon",{name:"x-circle",weight:"fill",size:18})))})),this.loading&&e.length>0&&t("div",{class:"co-ref-field__loading-more"},t("div",{class:"co-ref-field__spinner-sm"})),!this.loading&&this.hasMore&&this.remainingCount>0&&t("div",{class:"co-ref-field__more"},this.remainingCount," more results")),this.showFooter&&t("div",{class:"co-ref-field__footer"},t("button",{class:"co-ref-field__footer-btn co-ref-field__footer-btn--secondary",type:"button",onClick:this.handleFooterSecondary},t("co-icon",{name:"plus",size:16}),t("span",null,this.footerSecondaryLabel)),t("button",{class:"co-ref-field__footer-btn co-ref-field__footer-btn--primary",type:"button",onClick:this.handleFooterPrimary},t("co-icon",{name:"check",size:16}),t("span",null,this.footerPrimaryLabel))),!this.showFooter&&this.createLabel&&t("div",{class:"co-ref-field__footer"},t("button",{class:"co-ref-field__create-btn",onClick:this.handleCreateClick,type:"button"},t("co-icon",{name:"plus",size:14}),t("span",null,this.createLabel))))}render(){return t("div",{key:"6153fa8ba51c07acd9be897e118a7216caa98993",class:"co-ref-field"},(this.label||this.secondaryLabel)&&t("div",{key:"3030bf64028c44ab89e4c9666e38f3024b148e91",class:"co-ref-field__labels"},this.label&&t("label",{key:"23a6315ce9b480f2b5163da2e679b5bd67f62ba8",class:"co-ref-field__label"},this.label),this.secondaryLabel&&t("span",{key:"f3ad11000ff8446603ad9e3d4e2a10ddb16f678f",class:"co-ref-field__secondary-label"},this.secondaryLabel)),t("co-popover",{key:"3fb1374f50cd82d8098b4888e3cdd4fcbc9cbb15",open:this.isOpen,placement:"bottom-start",matchWidth:!0,offset:4,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},t("div",{key:"ce8fd9568c6a8eb911ceee4dc79d6e1551f61d04",slot:"trigger"},this.renderTrigger()),this.renderPanel()),this.helperText&&t("div",{key:"7f2127c6fd4050db16da696c6c3df250a65e853a",class:"co-ref-field__helper co-ref-field__helper--"+this.status},"default"!==this.status&&t("co-icon",{key:"0e36272220332148acd867c322baf23b0a056bff",name:"error"===this.status?"warning-circle":"success"===this.status?"check-circle":"info",size:14}),t("span",{key:"28a61124531c5a5a9ea87239133986ae7882744d"},this.helperText)))}get el(){return this}static get watchers(){return{isOpen:[{onOpenChange: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-ref-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-ref-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-ref-field__label{color:var(--co-ref-field-label-color, var(--co-semantic-text-secondary));font-family:var(--co-ref-field-label-font-family, var(--co-font-family-primary));font-size:var(--co-ref-field-label-font-size, var(--co-font-size-12));font-weight:var(--co-ref-field-label-font-weight, 500);line-height:1;white-space:nowrap;cursor:default;text-transform:uppercase;letter-spacing:0.06em}.co-ref-field__secondary-label{color:var(--co-semantic-text-muted);font-family:var(--co-font-family-mono);font-size:var(--co-font-size-12);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-ref-field__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease}.co-ref-field--open{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-ref-field--disabled{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-ref-field--error{border-color:var(--co-semantic-status-error)}.co-ref-field--success{border-color:var(--co-semantic-status-success)}.co-ref-field--warning{border-color:var(--co-color-status-review)}.co-ref-field__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-ref-field__value{flex:1;min-width:0;display:flex;align-items:center}.co-ref-field__placeholder{color:var(--co-semantic-text-muted);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-ref-field__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 0.15s ease}.co-ref-field__clear:hover{color:var(--co-semantic-text-default)}.co-ref-field__selected{display:flex;align-items:center;gap:var(--co-spacing-sm);min-width:0}.co-ref-field__color-dot{width:10px;height:10px;min-width:10px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__avatar-sm{width:24px;height:24px;min-width:24px;border-radius:var(--co-border-radius-xxs);display:flex;align-items:center;justify-content:center;font-size:var(--co-font-size-10);font-weight:700;color:var(--co-color-base-blanco);flex-shrink:0}.co-ref-field__avatar-sm--light{color:rgba(0, 0, 0, 0.87)}.co-ref-field__selected-label{color:var(--co-semantic-text-default);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__chips{display:flex;flex-wrap:wrap;gap:var(--co-spacing-xs);align-items:center}.co-ref-field__chip{display:inline-flex;align-items:center;gap:var(--co-spacing-xs);padding:2px var(--co-spacing-sm) 2px var(--co-spacing-sm);background:var(--co-semantic-surface-muted);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-12);line-height:1;max-width:120px}.co-ref-field__chip-dot{width:8px;height:8px;min-width:8px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__chip-label{color:var(--co-semantic-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__chip-remove{display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.1s ease;flex-shrink:0}.co-ref-field__chip-remove:hover{color:var(--co-semantic-text-default)}.co-ref-field__chip-overflow{display:inline-flex;align-items:center;justify-content:center;padding:2px var(--co-spacing-sm);background:var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-12);font-weight:600;color:var(--co-semantic-text-secondary);line-height:1}.co-ref-field__panel{display:flex;flex-direction:column}.co-ref-field__search{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-sm2);margin:var(--co-spacing-sm2) var(--co-spacing-sm2) 0;border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);overflow:hidden;height:32px;box-sizing:border-box;color:var(--co-semantic-text-muted)}.co-ref-field__search co-icon{flex-shrink:0;opacity:0.7;display:flex;align-items:center}.co-ref-field__search-input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--co-font-size-12, 12px);font-weight:500;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-ref-field__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-ref-field__options{max-height:280px;overflow-y:auto;overflow-x:hidden;padding:var(--co-spacing-sm2);scrollbar-width:thin;scrollbar-color:var(--co-semantic-border-default) transparent}.co-ref-field__options::-webkit-scrollbar{width:6px}.co-ref-field__options::-webkit-scrollbar-track{background:transparent}.co-ref-field__options::-webkit-scrollbar-thumb{background:var(--co-semantic-border-default);border-radius:var(--co-border-radius-full)}.co-ref-field__option{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-xs) var(--co-spacing-sm2);border-radius:var(--co-border-radius-xs);cursor:pointer;transition:background 0.1s ease;min-height:40px;box-sizing:border-box}.co-ref-field__option:hover{background:var(--co-semantic-surface-hover)}.co-ref-field__option--selected{background:var(--co-semantic-surface-muted)}.co-ref-field__option-color{width:10px;height:10px;min-width:10px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__option-avatar{width:32px;height:32px;min-width:32px;border-radius:var(--co-border-radius-xxs);display:flex;align-items:center;justify-content:center;font-size:var(--co-font-size-12);font-weight:700;color:var(--co-color-base-blanco);flex-shrink:0;letter-spacing:0.02em}.co-ref-field__option-avatar--light{color:rgba(0, 0, 0, 0.87)}.co-ref-field__option-icon{flex-shrink:0;color:var(--co-semantic-text-muted)}.co-ref-field__option-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.co-ref-field__option-label{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__option-desc{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-ref-field__option-deselect{flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-ref-field__option-deselect:hover{color:var(--co-semantic-text-default)}.co-ref-field__loading,.co-ref-field__loading-more{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-md)}.co-ref-field__spinner-sm{width:16px;height:16px;border:2px solid var(--co-semantic-border-subtle);border-top-color:var(--co-color-primary-azul);border-radius:50%;animation:co-ref-spin 0.6s linear infinite}@keyframes co-ref-spin{to{transform:rotate(360deg)}}.co-ref-field__empty{display:flex;flex-direction:column;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-lg) var(--co-spacing-md);color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12)}.co-ref-field__more{text-align:center;padding:var(--co-spacing-sm);font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted)}.co-ref-field__footer{display:flex;gap:var(--co-spacing-sm2);border-top:1px solid var(--co-semantic-border-subtle);padding:var(--co-spacing-sm2)}.co-ref-field__footer-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity 0.15s ease;box-sizing:border-box;min-height:32px}.co-ref-field__footer-btn:hover{opacity:0.85}.co-ref-field__footer-btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-ref-field__footer-btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}.co-ref-field__create-btn{display:flex;align-items:center;gap:var(--co-spacing-sm);width:100%;padding:var(--co-spacing-sm2) var(--co-spacing-md);border:none;border-radius:var(--co-border-radius-xs);background:transparent;cursor:pointer;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);color:var(--co-color-primary-azul);font-weight:500;transition:background 0.1s ease}.co-ref-field__create-btn:hover{background:var(--co-semantic-surface-hover)}.co-ref-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs);font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted)}.co-ref-field__helper--error{color:var(--co-semantic-status-error)}.co-ref-field__helper--success{color:var(--co-semantic-status-success)}.co-ref-field__helper--warning{color:var(--co-color-status-review)}"}},[1,"co-ref-field",{label:[1],secondaryLabel:[1,"secondary-label"],placeholder:[1],disabled:[4],clearable:[4],multiple:[4],status:[1],helperText:[1,"helper-text"],iconLeft:[1,"icon-left"],value:[1025],options:[1],selectedDisplay:[1,"selected-display"],loading:[4],total:[2],searchable:[4],searchPlaceholder:[1,"search-placeholder"],searchDebounce:[2,"search-debounce"],emptyMessage:[1,"empty-message"],createLabel:[1,"create-label"],showFooter:[4,"show-footer"],footerPrimaryLabel:[1,"footer-primary-label"],footerSecondaryLabel:[1,"footer-secondary-label"],maxChips:[2,"max-chips"],isOpen:[32],searchText:[32]},void 0,{isOpen:[{onOpenChange:0}]}]);function d(){"undefined"!=typeof customElements&&["co-ref-field","co-icon","co-loader","co-popover"].forEach((o=>{switch(o){case"co-ref-field":customElements.get(e(o))||customElements.define(e(o),l);break;case"co-icon":customElements.get(e(o))||a();break;case"co-loader":customElements.get(e(o))||c();break;case"co-popover":customElements.get(e(o))||n()}}))}d();const f=l,h=d;export{f as CoRefField,h as defineCustomElement}
|
|
1
|
+
import{t as e,p as o,H as i,c as r,h as t}from"./index.js";import{i as s}from"./p-BG4WRR22.js";import{d as a}from"./p-wwWquAtm.js";import{d as c}from"./p-OGpfa9Yd.js";import{d as n}from"./p-FBICWTuN.js";const l=o(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coChange=r(this,"coChange",7),this.coClear=r(this,"coClear",7),this.coSearch=r(this,"coSearch",7),this.coLoadMore=r(this,"coLoadMore",7),this.coOpen=r(this,"coOpen",3),this.coClose=r(this,"coClose",3),this.coCreate=r(this,"coCreate",7),this.coRemove=r(this,"coRemove",7),this.coFooterPrimary=r(this,"coFooterPrimary",7),this.coFooterSecondary=r(this,"coFooterSecondary",7),this.placeholder="Select…",this.disabled=!1,this.clearable=!0,this.multiple=!1,this.status="default",this.value="",this.options="[]",this.selectedDisplay="[]",this.loading=!1,this.total=0,this.searchable=!0,this.searchPlaceholder="Search…",this.searchDebounce=350,this.emptyMessage="No results found",this.showFooter=!1,this.footerPrimaryLabel="Ok",this.footerSecondaryLabel="New",this.maxChips=3,this.isOpen=!1,this.searchText="",this.handlePopoverOpen=()=>{this.isOpen=!0},this.handlePopoverClose=()=>{this.isOpen=!1},this.handleTriggerClick=e=>{this.disabled&&e.stopPropagation()},this.handleSearchInput=e=>{const o=e.target.value;this.searchText=o,this.debounceTimer&&clearTimeout(this.debounceTimer),this.debounceTimer=setTimeout((()=>{this.coSearch.emit(o)}),this.searchDebounce)},this.handleOptionClick=e=>{if(this.multiple){const o=this.parsedValue;let i;i=o.indexOf(e._id)>=0?o.filter((o=>o!==e._id)):[...o,e._id],this.value=JSON.stringify(i),this.coChange.emit({value:i,item:e})}else this.value=e._id,this.coChange.emit({value:e._id,item:e}),this.isOpen=!1},this.handleClear=e=>{e.stopPropagation(),this.value=this.multiple?"[]":"",this.coClear.emit()},this.handleRemoveChip=(e,o)=>{o.stopPropagation();const i=this.parsedValue.filter((o=>o!==e));this.value=JSON.stringify(i),this.coRemove.emit(e)},this.handleScroll=()=>{if(!this.optionsEl||this.loading||!this.hasMore)return;const{scrollTop:e,scrollHeight:o,clientHeight:i}=this.optionsEl;e+i>=o-40&&this.coLoadMore.emit()},this.handleCreateClick=()=>{this.coCreate.emit(this.searchText)},this.handleFooterPrimary=()=>{this.coFooterPrimary.emit(),this.isOpen=!1},this.handleFooterSecondary=()=>{this.coFooterSecondary.emit()}}get parsedOptions(){try{const e="string"==typeof this.options?JSON.parse(this.options):this.options;return Array.isArray(e)?e:[]}catch(e){return[]}}get parsedSelectedDisplay(){try{const e="string"==typeof this.selectedDisplay?JSON.parse(this.selectedDisplay):this.selectedDisplay;return Array.isArray(e)?e:[]}catch(e){return[]}}get effectiveDisplayItems(){const e=this.parsedValue;if(0===e.length)return[];const o=new Map;for(const e of this.parsedSelectedDisplay)o.set(e._id,e);for(const e of this.parsedOptions)o.has(e._id)||o.set(e._id,{_id:e._id,label:e.label,description:e.description,color:e.color,avatar:e.avatar});return e.map((e=>o.get(e))).filter(Boolean)}get parsedValue(){if(!this.value)return[];try{const e=JSON.parse(this.value);return Array.isArray(e)?e:[this.value]}catch(e){return this.value?[this.value]:[]}}get hasMore(){return this.parsedOptions.length<this.total}get remainingCount(){return Math.max(0,this.total-this.parsedOptions.length)}disconnectedCallback(){this.debounceTimer&&clearTimeout(this.debounceTimer)}onOpenChange(e){e?(this.coOpen.emit(),requestAnimationFrame((()=>{var e;null===(e=this.searchInputEl)||void 0===e||e.focus()}))):(this.searchText="",this.coClose.emit())}renderTrigger(){const e=this.effectiveDisplayItems,o=e.length>0;return t("div",{class:{"co-ref-field__trigger":!0,"co-ref-field--open":this.isOpen,"co-ref-field--disabled":this.disabled,["co-ref-field--"+this.status]:"default"!==this.status},onClick:this.handleTriggerClick},this.iconLeft&&t("span",{class:"co-ref-field__icon"},t("co-icon",{name:this.iconLeft,size:16})),t("div",{class:"co-ref-field__value"},!o&&t("span",{class:"co-ref-field__placeholder"},this.placeholder),o&&!this.multiple&&this.renderSingleValue(e[0]),o&&this.multiple&&this.renderMultipleValue(e)),o&&this.clearable&&!this.disabled&&t("button",{class:"co-ref-field__clear",onClick:this.handleClear,type:"button"},t("co-icon",{name:"x",size:14})),t("span",{class:"co-ref-field__caret"},t("co-icon",{name:"caret-up-down",size:16})))}renderSingleValue(e){return t("div",{class:"co-ref-field__selected"},e.avatar?t("span",{class:{"co-ref-field__avatar-sm":!0,"co-ref-field__avatar-sm--light":!!e.color&&s(e.color)},style:{backgroundColor:e.color||"var(--co-color-primary-azul)"}},e.avatar):e.color?t("span",{class:"co-ref-field__color-dot",style:{backgroundColor:e.color}}):null,t("span",{class:"co-ref-field__selected-label"},e.label))}renderMultipleValue(e){const o=e.slice(0,this.maxChips),i=e.length-this.maxChips;return t("div",{class:"co-ref-field__chips"},o.map((e=>t("span",{class:"co-ref-field__chip",key:e._id},e.color&&t("span",{class:"co-ref-field__chip-dot",style:{backgroundColor:e.color}}),t("span",{class:"co-ref-field__chip-label"},e.label),t("button",{class:"co-ref-field__chip-remove",onClick:o=>this.handleRemoveChip(e._id,o),type:"button"},t("co-icon",{name:"x",size:10}))))),i>0&&t("span",{class:"co-ref-field__chip-overflow"},"+",i))}renderPanel(){const e=this.parsedOptions,o=this.parsedValue;return t("div",{class:"co-ref-field__panel"},this.searchable&&t("div",{class:"co-ref-field__search"},t("co-icon",{name:"magnifying-glass",size:16}),t("input",{class:"co-ref-field__search-input",type:"text",placeholder:this.searchPlaceholder,value:this.searchText,onInput:this.handleSearchInput,ref:e=>this.searchInputEl=e})),t("div",{class:"co-ref-field__options",ref:e=>this.optionsEl=e,onScroll:this.handleScroll},this.loading&&0===e.length&&t("div",{class:"co-ref-field__loading"},t("co-loader",{size:"sm"})),!this.loading&&0===e.length&&t("div",{class:"co-ref-field__empty"},t("co-icon",{name:"magnifying-glass",size:20}),t("span",null,this.emptyMessage)),e.map((e=>{const i=o.includes(e._id);return t("div",{class:{"co-ref-field__option":!0,"co-ref-field__option--selected":i},key:e._id,onClick:()=>this.handleOptionClick(e)},e.avatar&&t("span",{class:{"co-ref-field__option-avatar":!0,"co-ref-field__option-avatar--light":!!e.color&&s(e.color)},style:{backgroundColor:e.color||"var(--co-color-primary-azul)"}},e.avatar),!e.avatar&&e.color&&t("span",{class:"co-ref-field__option-color",style:{backgroundColor:e.color}}),e.icon&&!e.color&&!e.avatar&&t("co-icon",{name:e.icon,size:16,class:"co-ref-field__option-icon"}),t("div",{class:"co-ref-field__option-text"},t("span",{class:"co-ref-field__option-label"},e.label),e.description&&t("span",{class:"co-ref-field__option-desc"},e.description)),i&&t("button",{class:"co-ref-field__option-deselect",onClick:o=>{o.stopPropagation(),this.handleOptionClick(e)},type:"button"},t("co-icon",{name:"x-circle",weight:"fill",size:18})))})),this.loading&&e.length>0&&t("div",{class:"co-ref-field__loading-more"},t("div",{class:"co-ref-field__spinner-sm"})),!this.loading&&this.hasMore&&this.remainingCount>0&&t("div",{class:"co-ref-field__more"},this.remainingCount," more results")),this.showFooter&&t("div",{class:"co-ref-field__footer"},t("button",{class:"co-ref-field__footer-btn co-ref-field__footer-btn--secondary",type:"button",onClick:this.handleFooterSecondary},t("co-icon",{name:"plus",size:16}),t("span",null,this.footerSecondaryLabel)),t("button",{class:"co-ref-field__footer-btn co-ref-field__footer-btn--primary",type:"button",onClick:this.handleFooterPrimary},t("co-icon",{name:"check",size:16}),t("span",null,this.footerPrimaryLabel))),!this.showFooter&&this.createLabel&&t("div",{class:"co-ref-field__footer"},t("button",{class:"co-ref-field__create-btn",onClick:this.handleCreateClick,type:"button"},t("co-icon",{name:"plus",size:14}),t("span",null,this.createLabel))))}render(){return t("div",{key:"6153fa8ba51c07acd9be897e118a7216caa98993",class:"co-ref-field"},(this.label||this.secondaryLabel)&&t("div",{key:"3030bf64028c44ab89e4c9666e38f3024b148e91",class:"co-ref-field__labels"},this.label&&t("label",{key:"23a6315ce9b480f2b5163da2e679b5bd67f62ba8",class:"co-ref-field__label"},this.label),this.secondaryLabel&&t("span",{key:"f3ad11000ff8446603ad9e3d4e2a10ddb16f678f",class:"co-ref-field__secondary-label"},this.secondaryLabel)),t("co-popover",{key:"3fb1374f50cd82d8098b4888e3cdd4fcbc9cbb15",open:this.isOpen,placement:"bottom-start",matchWidth:!0,offset:4,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},t("div",{key:"ce8fd9568c6a8eb911ceee4dc79d6e1551f61d04",slot:"trigger"},this.renderTrigger()),this.renderPanel()),this.helperText&&t("div",{key:"7f2127c6fd4050db16da696c6c3df250a65e853a",class:"co-ref-field__helper co-ref-field__helper--"+this.status},"default"!==this.status&&t("co-icon",{key:"0e36272220332148acd867c322baf23b0a056bff",name:"error"===this.status?"warning-circle":"success"===this.status?"check-circle":"info",size:14}),t("span",{key:"28a61124531c5a5a9ea87239133986ae7882744d"},this.helperText)))}get el(){return this}static get watchers(){return{isOpen:[{onOpenChange: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-ref-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-ref-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-ref-field__label{color:var(--co-ref-field-label-color, var(--co-semantic-text-secondary));font-family:var(--co-ref-field-label-font-family, var(--co-font-family-primary));font-size:var(--co-ref-field-label-font-size, var(--co-font-size-12));font-weight:var(--co-ref-field-label-font-weight, 500);line-height:1;white-space:nowrap;cursor:default;text-transform:uppercase;letter-spacing:0.06em}.co-ref-field__secondary-label{color:var(--co-semantic-text-muted);font-family:var(--co-font-family-mono);font-size:var(--co-font-size-12);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-ref-field__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease}.co-ref-field--open{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-ref-field--disabled{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-ref-field--error{border-color:var(--co-semantic-status-error)}.co-ref-field--success{border-color:var(--co-semantic-status-success)}.co-ref-field--warning{border-color:var(--co-color-status-review)}.co-ref-field__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-ref-field__value{flex:1;min-width:0;display:flex;align-items:center}.co-ref-field__placeholder{color:var(--co-semantic-text-muted);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-ref-field__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 0.15s ease}.co-ref-field__clear:hover{color:var(--co-semantic-text-default)}.co-ref-field__selected{display:flex;align-items:center;gap:var(--co-spacing-sm);min-width:0}.co-ref-field__color-dot{width:10px;height:10px;min-width:10px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__avatar-sm{width:24px;height:24px;min-width:24px;border-radius:var(--co-border-radius-xxs);display:flex;align-items:center;justify-content:center;font-size:var(--co-font-size-10);font-weight:700;color:var(--co-color-base-blanco);flex-shrink:0}.co-ref-field__avatar-sm--light{color:rgba(0, 0, 0, 0.87)}.co-ref-field__selected-label{color:var(--co-semantic-text-default);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__chips{display:flex;flex-wrap:wrap;gap:var(--co-spacing-xs);align-items:center}.co-ref-field__chip{display:inline-flex;align-items:center;gap:var(--co-spacing-xs);padding:2px var(--co-spacing-sm) 2px var(--co-spacing-sm);background:var(--co-semantic-surface-muted);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-12);line-height:1;max-width:120px}.co-ref-field__chip-dot{width:8px;height:8px;min-width:8px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__chip-label{color:var(--co-semantic-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__chip-remove{display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.1s ease;flex-shrink:0}.co-ref-field__chip-remove:hover{color:var(--co-semantic-text-default)}.co-ref-field__chip-overflow{display:inline-flex;align-items:center;justify-content:center;padding:2px var(--co-spacing-sm);background:var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-12);font-weight:600;color:var(--co-semantic-text-secondary);line-height:1}.co-ref-field__panel{display:flex;flex-direction:column}.co-ref-field__search{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-sm2);margin:var(--co-spacing-sm2) var(--co-spacing-sm2) 0;border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);overflow:hidden;height:32px;box-sizing:border-box;color:var(--co-semantic-text-muted)}.co-ref-field__search co-icon{flex-shrink:0;opacity:0.7;display:flex;align-items:center}.co-ref-field__search-input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--co-font-size-12, 12px);font-weight:500;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-ref-field__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-ref-field__options{max-height:280px;overflow-y:auto;overflow-x:hidden;padding:var(--co-spacing-sm2);scrollbar-width:thin;scrollbar-color:var(--co-semantic-border-default) transparent}.co-ref-field__options::-webkit-scrollbar{width:6px}.co-ref-field__options::-webkit-scrollbar-track{background:transparent}.co-ref-field__options::-webkit-scrollbar-thumb{background:var(--co-semantic-border-default);border-radius:var(--co-border-radius-full)}.co-ref-field__option{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-xs) var(--co-spacing-sm2);border-radius:var(--co-border-radius-xs);cursor:pointer;transition:background 0.1s ease;min-height:40px;box-sizing:border-box}.co-ref-field__option:hover{background:var(--co-semantic-surface-hover)}.co-ref-field__option--selected{background:var(--co-semantic-surface-muted)}.co-ref-field__option-color{width:10px;height:10px;min-width:10px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__option-avatar{width:32px;height:32px;min-width:32px;border-radius:var(--co-border-radius-xxs);display:flex;align-items:center;justify-content:center;font-size:var(--co-font-size-12);font-weight:700;color:var(--co-color-base-blanco);flex-shrink:0;letter-spacing:0.02em}.co-ref-field__option-avatar--light{color:rgba(0, 0, 0, 0.87)}.co-ref-field__option-icon{flex-shrink:0;color:var(--co-semantic-text-muted)}.co-ref-field__option-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.co-ref-field__option-label{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__option-desc{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-ref-field__option-deselect{flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-ref-field__option-deselect:hover{color:var(--co-semantic-text-default)}.co-ref-field__loading,.co-ref-field__loading-more{display:flex;align-items:center;justify-content:center;padding:var(--co-spacing-md)}.co-ref-field__spinner-sm{width:16px;height:16px;border:2px solid var(--co-semantic-border-subtle);border-top-color:var(--co-color-primary-azul);border-radius:50%;animation:co-ref-spin 0.6s linear infinite}@keyframes co-ref-spin{to{transform:rotate(360deg)}}.co-ref-field__empty{display:flex;flex-direction:column;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-lg) var(--co-spacing-md);color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12)}.co-ref-field__more{text-align:center;padding:var(--co-spacing-sm);font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted)}.co-ref-field__footer{display:flex;gap:var(--co-spacing-sm2);border-top:1px solid var(--co-semantic-border-subtle);padding:var(--co-spacing-sm2)}.co-ref-field__footer-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity 0.15s ease;box-sizing:border-box;min-height:32px}.co-ref-field__footer-btn:hover{opacity:0.85}.co-ref-field__footer-btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-ref-field__footer-btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}.co-ref-field__create-btn{display:flex;align-items:center;gap:var(--co-spacing-sm);width:100%;padding:var(--co-spacing-sm2) var(--co-spacing-md);border:none;border-radius:var(--co-border-radius-xs);background:transparent;cursor:pointer;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);color:var(--co-color-primary-azul);font-weight:500;transition:background 0.1s ease}.co-ref-field__create-btn:hover{background:var(--co-semantic-surface-hover)}.co-ref-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs);font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted)}.co-ref-field__helper--error{color:var(--co-semantic-status-error)}.co-ref-field__helper--success{color:var(--co-semantic-status-success)}.co-ref-field__helper--warning{color:var(--co-color-status-review)}"}},[1,"co-ref-field",{label:[1],secondaryLabel:[1,"secondary-label"],placeholder:[1],disabled:[4],clearable:[4],multiple:[4],status:[1],helperText:[1,"helper-text"],iconLeft:[1,"icon-left"],value:[1025],options:[1],selectedDisplay:[1,"selected-display"],loading:[4],total:[2],searchable:[4],searchPlaceholder:[1,"search-placeholder"],searchDebounce:[2,"search-debounce"],emptyMessage:[1,"empty-message"],createLabel:[1,"create-label"],showFooter:[4,"show-footer"],footerPrimaryLabel:[1,"footer-primary-label"],footerSecondaryLabel:[1,"footer-secondary-label"],maxChips:[2,"max-chips"],isOpen:[32],searchText:[32]},void 0,{isOpen:[{onOpenChange:0}]}]);function d(){"undefined"!=typeof customElements&&["co-ref-field","co-icon","co-loader","co-popover"].forEach((o=>{switch(o){case"co-ref-field":customElements.get(e(o))||customElements.define(e(o),l);break;case"co-icon":customElements.get(e(o))||a();break;case"co-loader":customElements.get(e(o))||c();break;case"co-popover":customElements.get(e(o))||n()}}))}d();const f=l,h=d;export{f as CoRefField,h as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as t,c,h as s,t as o}from"./index.js";import{d as i}from"./p-wwWquAtm.js";import{d as r}from"./p-Dv_iMPy0.js";const a=e(class e extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coChange=c(this,"coChange",7),this.coClear=c(this,"coClear",7),this.placeholder="Select…",this.disabled=!1,this.clearable=!1,this.status="default",this.options="[]",this.value="",this.multiple=!1,this.isOpen=!1,this.scrollTop=0,this.handleTriggerClick=e=>{this.disabled&&e.stopPropagation()},this.handlePopoverOpen=()=>{this.isOpen=!0},this.handlePopoverClose=()=>{this.isOpen=!1},this.handleClear=e=>{e.stopPropagation(),this.value=this.multiple?"[]":"",this.coClear.emit(),this.coChange.emit(this.multiple?[]:"")},this.handleOptionClick=e=>{if(this.multiple){const t=[...this.selectedValues],c=t.indexOf(e);c>=0?t.splice(c,1):t.push(e),this.value=JSON.stringify(t),this.coChange.emit(t)}else this.value=e,this.isOpen=!1,this.coChange.emit(e)},this.handleOptionsScroll=e=>{this.scrollTop=e.target.scrollTop}}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 displayText(){const e=this.selectedValues;if(0===e.length)return"";if(!this.multiple){const t=this.parsedOptions.find((t=>t.value===e[0]));return t?t.label:e[0]}return e.map((e=>{const t=this.parsedOptions.find((t=>t.value===e));return t?t.label:e})).join(", ")}get statusIcon(){return{error:"warning-circle",success:"check-circle",warning:"warning",info:"info"}[this.status]||null}onOpenChange(e){e&&(this.scrollTop=0)}getVirtualSlice(t){const{ITEM_HEIGHT:c,VIEWPORT_ITEMS:s,OVERSCAN:o}=e,i=t.length,r=i*c,a=Math.max(0,Math.floor(this.scrollTop/c)-o);return{totalHeight:r,startIdx:a,endIdx:Math.min(i,a+s+2*o),offsetY:a*c}}render(){const e=this.selectedValues,t=this.parsedOptions;return s("div",{key:"62e8257cc3b4e5f21c411fae888c2fbfb5e0966f",class:{"co-select":!0,"co-select--open":this.isOpen,"co-select--disabled":this.disabled,["co-select--"+this.status]:"default"!==this.status}},(this.label||this.secondaryLabel)&&s("div",{key:"b686a479a92fa78105a2d8b70544dafee562d04e",class:"co-select__labels"},this.label&&s("label",{key:"605ec7cdd6614397b18010b3c5aa7c563c5f2b5e",class:"co-select__label"},this.label),this.secondaryLabel&&s("span",{key:"808c1038a7beb82a0d8279b45161f0f2058a3f6d",class:"co-select__secondary-label"},this.secondaryLabel)),s("co-popover",{key:"e3c4dfb846300956a721e6d39c0bf01226945b1f",open:this.isOpen,placement:"bottom-start",matchWidth:!0,offset:4,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},s("div",{key:"9b6a5847d6223317d8df65e7964e4574da426482",slot:"trigger",class:"co-select__trigger",onClick:this.handleTriggerClick},this.iconLeft&&s("co-icon",{key:"d0f62a9e449acf5234d9f876d6e7c97fa181a42b",name:this.iconLeft,size:16,class:"co-select__icon"}),s("span",{key:"ec49195d6e7e15e1400e436ba39bc5dfa119ff66",class:{"co-select__text":!0,"co-select__text--placeholder":!this.hasValue}},this.hasValue?this.displayText:this.placeholder),this.clearable&&this.hasValue&&!this.disabled&&s("button",{key:"14637ea81b731edf44e8d03c9dc316c9e6a5db2c",class:"co-select__clear",type:"button",tabIndex:-1,onClick:this.handleClear,"aria-label":"Clear"},s("co-icon",{key:"965c17bae724c916fdb4ce5438625801446d341e",name:"x-circle",size:16,weight:"fill"})),s("co-icon",{key:"706be511d092a16835d0fc7907b41ea550ba3100",name:this.isOpen?"caret-up":"caret-down",size:16,class:"co-select__caret"})),s("div",{key:"33e5a0c3075357ca4080a4be72c579f34e3a1e94",class:"co-select__dropdown"},s("div",{key:"a6f857d29a52fe2969da4d8536f9d0a0bf9c06dc",class:"co-select__options",ref:e=>this.optionsContainerEl=e,onScroll:this.handleOptionsScroll},(()=>{const{totalHeight:c,startIdx:o,endIdx:i,offsetY:r}=this.getVirtualSlice(t);return s("div",{class:"co-select__virtual-spacer",style:{height:c+"px",position:"relative"}},s("div",{style:{position:"absolute",top:r+"px",left:"0",right:"0"}},t.slice(o,i).map((t=>{const c=e.includes(t.value),o=!!t.disabled;return s("div",{class:{"co-select__option":!0,"co-select__option--selected":c,"co-select__option--disabled":o},onClick:()=>!o&&this.handleOptionClick(t.value)},t.icon&&s("co-icon",{name:t.icon,size:20,class:"co-select__option-icon"}),s("span",{class:"co-select__option-label"},t.label),c&&s("co-icon",{name:"check",size:16,class:"co-select__option-check"}))}))))})()))),this.helperText&&s("div",{key:"abd1a1647c257674ad54a7d8623f75c211d1ac84",class:"co-select__helper co-select__helper--"+this.status},this.statusIcon&&s("co-icon",{key:"1db3bfcc66e832bd5c41d2ddf6ae202a1cafa31d",name:this.statusIcon,size:14,weight:"fill",class:"co-select__helper-icon"}),s("span",{key:"b5b66e6ec7c098e8b98bd6f59ef8234630f8ee39",class:"co-select__helper-text"},this.helperText)))}get el(){return this}static get watchers(){return{isOpen:[{onOpenChange: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-select{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-select__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-select__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-select__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-select--disabled .co-select__label,.co-select--disabled .co-select__secondary-label{color:var(--co-semantic-text-disabled)}.co-select__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease}.co-select--open .co-select__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-select--disabled .co-select__trigger{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-select--error .co-select__trigger{border-color:var(--co-semantic-status-error)}.co-select--success .co-select__trigger{border-color:var(--co-semantic-status-success)}.co-select--warning .co-select__trigger{border-color:var(--co-color-status-review)}.co-select--info .co-select__trigger{border-color:var(--co-semantic-status-info)}.co-select__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-select__text{flex:1;min-width:0;color:var(--co-semantic-text-default);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-select__text--placeholder{color:var(--co-semantic-text-muted)}.co-select--disabled .co-select__text{color:var(--co-semantic-text-disabled)}.co-select__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 0.15s ease}.co-select__clear:hover{color:var(--co-semantic-text-default)}.co-select__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-select__dropdown{padding:var(--co-spacing-sm2)}.co-select__options{max-height:calc(34px * 8);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--co-semantic-border-default) transparent}.co-select__options::-webkit-scrollbar{width:6px}.co-select__options::-webkit-scrollbar-track{background:transparent}.co-select__options::-webkit-scrollbar-thumb{background:var(--co-semantic-border-default);border-radius:var(--co-border-radius-full)}.co-select__option{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);cursor:pointer;transition:background 0.1s ease;min-height:32px;box-sizing:border-box}.co-select__option:hover{background:var(--co-semantic-surface-hover)}.co-select__option--selected{background:var(--co-semantic-surface-muted)}.co-select__option--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-select__option-icon{flex-shrink:0;color:var(--co-semantic-text-muted)}.co-select__option-label{flex:1;color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-select__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-select__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-select__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-select__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-select__helper--error .co-select__helper-icon,.co-select__helper--error .co-select__helper-text{color:var(--co-semantic-status-error)}.co-select__helper--success .co-select__helper-icon,.co-select__helper--success .co-select__helper-text{color:var(--co-semantic-status-success)}.co-select__helper--warning .co-select__helper-icon,.co-select__helper--warning .co-select__helper-text{color:var(--co-color-status-review)}.co-select__helper--info .co-select__helper-icon,.co-select__helper--info .co-select__helper-text{color:var(--co-semantic-status-info)}"}},[1,"co-select",{label:[1],secondaryLabel:[1,"secondary-label"],placeholder:[1],disabled:[4],iconLeft:[1,"icon-left"],clearable:[4],helperText:[1,"helper-text"],status:[1],options:[1],value:[1025],multiple:[4],isOpen:[32],scrollTop:[32]},void 0,{isOpen:[{onOpenChange:0}]}]);function l(){"undefined"!=typeof customElements&&["co-select","co-icon","co-popover"].forEach((e=>{switch(e){case"co-select":customElements.get(o(e))||customElements.define(o(e),a);break;case"co-icon":customElements.get(o(e))||i();break;case"co-popover":customElements.get(o(e))||r()}}))}a.ITEM_HEIGHT=34,a.VIEWPORT_ITEMS=8,a.OVERSCAN=3,l();const n=a,d=l;export{n as CoSelect,d as defineCustomElement}
|
|
1
|
+
import{p as e,H as t,c,h as s,t as o}from"./index.js";import{d as i}from"./p-wwWquAtm.js";import{d as r}from"./p-FBICWTuN.js";const a=e(class e extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coChange=c(this,"coChange",7),this.coClear=c(this,"coClear",7),this.placeholder="Select…",this.disabled=!1,this.clearable=!1,this.status="default",this.options="[]",this.value="",this.multiple=!1,this.isOpen=!1,this.scrollTop=0,this.handleTriggerClick=e=>{this.disabled&&e.stopPropagation()},this.handlePopoverOpen=()=>{this.isOpen=!0},this.handlePopoverClose=()=>{this.isOpen=!1},this.handleClear=e=>{e.stopPropagation(),this.value=this.multiple?"[]":"",this.coClear.emit(),this.coChange.emit(this.multiple?[]:"")},this.handleOptionClick=e=>{if(this.multiple){const t=[...this.selectedValues],c=t.indexOf(e);c>=0?t.splice(c,1):t.push(e),this.value=JSON.stringify(t),this.coChange.emit(t)}else this.value=e,this.isOpen=!1,this.coChange.emit(e)},this.handleOptionsScroll=e=>{this.scrollTop=e.target.scrollTop}}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 displayText(){const e=this.selectedValues;if(0===e.length)return"";if(!this.multiple){const t=this.parsedOptions.find((t=>t.value===e[0]));return t?t.label:e[0]}return e.map((e=>{const t=this.parsedOptions.find((t=>t.value===e));return t?t.label:e})).join(", ")}get statusIcon(){return{error:"warning-circle",success:"check-circle",warning:"warning",info:"info"}[this.status]||null}onOpenChange(e){e&&(this.scrollTop=0)}getVirtualSlice(t){const{ITEM_HEIGHT:c,VIEWPORT_ITEMS:s,OVERSCAN:o}=e,i=t.length,r=i*c,a=Math.max(0,Math.floor(this.scrollTop/c)-o);return{totalHeight:r,startIdx:a,endIdx:Math.min(i,a+s+2*o),offsetY:a*c}}render(){const e=this.selectedValues,t=this.parsedOptions;return s("div",{key:"62e8257cc3b4e5f21c411fae888c2fbfb5e0966f",class:{"co-select":!0,"co-select--open":this.isOpen,"co-select--disabled":this.disabled,["co-select--"+this.status]:"default"!==this.status}},(this.label||this.secondaryLabel)&&s("div",{key:"b686a479a92fa78105a2d8b70544dafee562d04e",class:"co-select__labels"},this.label&&s("label",{key:"605ec7cdd6614397b18010b3c5aa7c563c5f2b5e",class:"co-select__label"},this.label),this.secondaryLabel&&s("span",{key:"808c1038a7beb82a0d8279b45161f0f2058a3f6d",class:"co-select__secondary-label"},this.secondaryLabel)),s("co-popover",{key:"e3c4dfb846300956a721e6d39c0bf01226945b1f",open:this.isOpen,placement:"bottom-start",matchWidth:!0,offset:4,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},s("div",{key:"9b6a5847d6223317d8df65e7964e4574da426482",slot:"trigger",class:"co-select__trigger",onClick:this.handleTriggerClick},this.iconLeft&&s("co-icon",{key:"d0f62a9e449acf5234d9f876d6e7c97fa181a42b",name:this.iconLeft,size:16,class:"co-select__icon"}),s("span",{key:"ec49195d6e7e15e1400e436ba39bc5dfa119ff66",class:{"co-select__text":!0,"co-select__text--placeholder":!this.hasValue}},this.hasValue?this.displayText:this.placeholder),this.clearable&&this.hasValue&&!this.disabled&&s("button",{key:"14637ea81b731edf44e8d03c9dc316c9e6a5db2c",class:"co-select__clear",type:"button",tabIndex:-1,onClick:this.handleClear,"aria-label":"Clear"},s("co-icon",{key:"965c17bae724c916fdb4ce5438625801446d341e",name:"x-circle",size:16,weight:"fill"})),s("co-icon",{key:"706be511d092a16835d0fc7907b41ea550ba3100",name:this.isOpen?"caret-up":"caret-down",size:16,class:"co-select__caret"})),s("div",{key:"33e5a0c3075357ca4080a4be72c579f34e3a1e94",class:"co-select__dropdown"},s("div",{key:"a6f857d29a52fe2969da4d8536f9d0a0bf9c06dc",class:"co-select__options",ref:e=>this.optionsContainerEl=e,onScroll:this.handleOptionsScroll},(()=>{const{totalHeight:c,startIdx:o,endIdx:i,offsetY:r}=this.getVirtualSlice(t);return s("div",{class:"co-select__virtual-spacer",style:{height:c+"px",position:"relative"}},s("div",{style:{position:"absolute",top:r+"px",left:"0",right:"0"}},t.slice(o,i).map((t=>{const c=e.includes(t.value),o=!!t.disabled;return s("div",{class:{"co-select__option":!0,"co-select__option--selected":c,"co-select__option--disabled":o},onClick:()=>!o&&this.handleOptionClick(t.value)},t.icon&&s("co-icon",{name:t.icon,size:20,class:"co-select__option-icon"}),s("span",{class:"co-select__option-label"},t.label),c&&s("co-icon",{name:"check",size:16,class:"co-select__option-check"}))}))))})()))),this.helperText&&s("div",{key:"abd1a1647c257674ad54a7d8623f75c211d1ac84",class:"co-select__helper co-select__helper--"+this.status},this.statusIcon&&s("co-icon",{key:"1db3bfcc66e832bd5c41d2ddf6ae202a1cafa31d",name:this.statusIcon,size:14,weight:"fill",class:"co-select__helper-icon"}),s("span",{key:"b5b66e6ec7c098e8b98bd6f59ef8234630f8ee39",class:"co-select__helper-text"},this.helperText)))}get el(){return this}static get watchers(){return{isOpen:[{onOpenChange: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-select{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-select__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-select__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-select__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-select--disabled .co-select__label,.co-select--disabled .co-select__secondary-label{color:var(--co-semantic-text-disabled)}.co-select__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease}.co-select--open .co-select__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-select--disabled .co-select__trigger{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-select--error .co-select__trigger{border-color:var(--co-semantic-status-error)}.co-select--success .co-select__trigger{border-color:var(--co-semantic-status-success)}.co-select--warning .co-select__trigger{border-color:var(--co-color-status-review)}.co-select--info .co-select__trigger{border-color:var(--co-semantic-status-info)}.co-select__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-select__text{flex:1;min-width:0;color:var(--co-semantic-text-default);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-select__text--placeholder{color:var(--co-semantic-text-muted)}.co-select--disabled .co-select__text{color:var(--co-semantic-text-disabled)}.co-select__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 0.15s ease}.co-select__clear:hover{color:var(--co-semantic-text-default)}.co-select__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-select__dropdown{padding:var(--co-spacing-sm2)}.co-select__options{max-height:calc(34px * 8);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--co-semantic-border-default) transparent}.co-select__options::-webkit-scrollbar{width:6px}.co-select__options::-webkit-scrollbar-track{background:transparent}.co-select__options::-webkit-scrollbar-thumb{background:var(--co-semantic-border-default);border-radius:var(--co-border-radius-full)}.co-select__option{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);cursor:pointer;transition:background 0.1s ease;min-height:32px;box-sizing:border-box}.co-select__option:hover{background:var(--co-semantic-surface-hover)}.co-select__option--selected{background:var(--co-semantic-surface-muted)}.co-select__option--disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.co-select__option-icon{flex-shrink:0;color:var(--co-semantic-text-muted)}.co-select__option-label{flex:1;color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-select__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-select__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-select__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-select__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-select__helper--error .co-select__helper-icon,.co-select__helper--error .co-select__helper-text{color:var(--co-semantic-status-error)}.co-select__helper--success .co-select__helper-icon,.co-select__helper--success .co-select__helper-text{color:var(--co-semantic-status-success)}.co-select__helper--warning .co-select__helper-icon,.co-select__helper--warning .co-select__helper-text{color:var(--co-color-status-review)}.co-select__helper--info .co-select__helper-icon,.co-select__helper--info .co-select__helper-text{color:var(--co-semantic-status-info)}"}},[1,"co-select",{label:[1],secondaryLabel:[1,"secondary-label"],placeholder:[1],disabled:[4],iconLeft:[1,"icon-left"],clearable:[4],helperText:[1,"helper-text"],status:[1],options:[1],value:[1025],multiple:[4],isOpen:[32],scrollTop:[32]},void 0,{isOpen:[{onOpenChange:0}]}]);function l(){"undefined"!=typeof customElements&&["co-select","co-icon","co-popover"].forEach((e=>{switch(e){case"co-select":customElements.get(o(e))||customElements.define(o(e),a);break;case"co-icon":customElements.get(o(e))||i();break;case"co-popover":customElements.get(o(e))||r()}}))}a.ITEM_HEIGHT=34,a.VIEWPORT_ITEMS=8,a.OVERSCAN=3,l();const n=a,d=l;export{n as CoSelect,d as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as s,p as t,H as i,c as e,h as o}from"./index.js";import{c as h,g as c,f as n}from"./p-Am-OlB8h.js";const a=t(class extends i{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.coOpen=e(this,"coOpen",3),this.coClose=e(this,"coClose",3),this.open=!1,this.placement="bottom-start",this.matchWidth=!1,this.offset=4,this.closeOnClickOutside=!0,this.closeOnEscape=!0,this.flip=!0,this.scrollParents=[],this.cachedOffsetAncestor=null,this.offsetAncestorComputed=!1,this.docListenersBound=!1,this.handleDocumentClickManual=s=>{this.open&&this.closeOnClickOutside&&(s.composedPath().includes(this.el)||(this.open=!1))},this.handleDocumentKeydownManual=s=>{this.open&&this.closeOnEscape&&"Escape"===s.key&&(s.stopPropagation(),this.open=!1)},this.updatePosition=()=>{if(!this.open||!this.triggerEl||!this.panelEl)return;const s=this.triggerEl.getBoundingClientRect(),t=this.panelEl.getBoundingClientRect(),{top:i,left:e}=h(s,t,{placement:this.placement,offset:this.offset,flip:this.flip});let o=i,n=e;if(this.offsetAncestorComputed||(this.cachedOffsetAncestor=c(this.panelEl),this.offsetAncestorComputed=!0),this.cachedOffsetAncestor){const s=this.cachedOffsetAncestor.getBoundingClientRect();o-=s.top,n-=s.left}const a={top:`${o}px`,left:`${n}px`};this.matchWidth&&(a.width=`${s.width}px`),this.panelEl&&(Object.assign(this.panelEl.style,a),this.panelEl.classList.add("co-popover__panel--positioned"))},this.scheduleUpdate=()=>{this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.updatePosition)},this.handleTriggerClick=()=>{this.open=!this.open}}disconnectedCallback(){this.unbindDocListeners(),this.cleanupListeners()}onOpenChange(s){s?(this.coOpen.emit(),this.bindDocListeners(),this.scheduleUpdate(),requestAnimationFrame((()=>{requestAnimationFrame((()=>{this.updatePosition()}))})),this.addScrollListeners()):(this.coClose.emit(),this.cleanupListeners(),this.unbindDocListeners(),this.cachedOffsetAncestor=null,this.offsetAncestorComputed=!1)}bindDocListeners(){this.docListenersBound||(document.addEventListener("click",this.handleDocumentClickManual,!0),document.addEventListener("keydown",this.handleDocumentKeydownManual,!0),this.docListenersBound=!0)}unbindDocListeners(){this.docListenersBound&&(document.removeEventListener("click",this.handleDocumentClickManual,!0),document.removeEventListener("keydown",this.handleDocumentKeydownManual,!0),this.docListenersBound=!1)}async toggle(){this.open=!this.open}async show(){this.open=!0}async hide(){this.open=!1}addScrollListeners(){window.addEventListener("resize",this.scheduleUpdate,{passive:!0}),window.addEventListener("scroll",this.scheduleUpdate,{passive:!0,capture:!0}),this.scrollParents=[];const s=n(this.el);s&&(s.addEventListener("scroll",this.scheduleUpdate,{passive:!0}),this.scrollParents.push(s))}cleanupListeners(){this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=void 0),window.removeEventListener("resize",this.scheduleUpdate),window.removeEventListener("scroll",this.scheduleUpdate,{capture:!0});for(const s of this.scrollParents)s.removeEventListener("scroll",this.scheduleUpdate);this.scrollParents=[]}render(){return o("div",{key:"a10448fae8b1ab711c359f7dc0c7a01432700638",class:"co-popover"},o("div",{key:"4e42cabce7bb62a866b080870d31cb03ea62ccdf",class:"co-popover__trigger",ref:s=>this.triggerEl=s,onClick:this.handleTriggerClick},o("slot",{key:"a5d85e222124e3af63266e4b99b460d62581200b",name:"trigger"})),this.open&&o("div",{key:"9143a817e7b46b41ba393480743f3ca38e507a84",class:"co-popover__panel",ref:s=>{s&&s!==this.panelEl&&(this.panelEl=s,this.scheduleUpdate())}},o("slot",{key:"6230166198f8d5535d5de3d9bdf4a4d8d0c82cb7"})))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return":host{display:inline-block;position:relative}:host([match-width]){display:block;width:100%}.co-popover{display:block;width:100%}.co-popover__trigger{display:block;width:100%;cursor:pointer}.co-popover__panel{position:fixed;top:0;left:0;z-index:10000;visibility:hidden;background:var(--co-semantic-surface-
|
|
1
|
+
import{t as s,p as t,H as i,c as e,h as o}from"./index.js";import{c as h,g as c,f as n}from"./p-Am-OlB8h.js";const a=t(class extends i{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.coOpen=e(this,"coOpen",3),this.coClose=e(this,"coClose",3),this.open=!1,this.placement="bottom-start",this.matchWidth=!1,this.offset=4,this.closeOnClickOutside=!0,this.closeOnEscape=!0,this.flip=!0,this.scrollParents=[],this.cachedOffsetAncestor=null,this.offsetAncestorComputed=!1,this.docListenersBound=!1,this.handleDocumentClickManual=s=>{this.open&&this.closeOnClickOutside&&(s.composedPath().includes(this.el)||(this.open=!1))},this.handleDocumentKeydownManual=s=>{this.open&&this.closeOnEscape&&"Escape"===s.key&&(s.stopPropagation(),this.open=!1)},this.updatePosition=()=>{if(!this.open||!this.triggerEl||!this.panelEl)return;const s=this.triggerEl.getBoundingClientRect(),t=this.panelEl.getBoundingClientRect(),{top:i,left:e}=h(s,t,{placement:this.placement,offset:this.offset,flip:this.flip});let o=i,n=e;if(this.offsetAncestorComputed||(this.cachedOffsetAncestor=c(this.panelEl),this.offsetAncestorComputed=!0),this.cachedOffsetAncestor){const s=this.cachedOffsetAncestor.getBoundingClientRect();o-=s.top,n-=s.left}const a={top:`${o}px`,left:`${n}px`};this.matchWidth&&(a.width=`${s.width}px`),this.panelEl&&(Object.assign(this.panelEl.style,a),this.panelEl.classList.add("co-popover__panel--positioned"))},this.scheduleUpdate=()=>{this.rafId&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(this.updatePosition)},this.handleTriggerClick=()=>{this.open=!this.open}}disconnectedCallback(){this.unbindDocListeners(),this.cleanupListeners()}onOpenChange(s){s?(this.coOpen.emit(),this.bindDocListeners(),this.scheduleUpdate(),requestAnimationFrame((()=>{requestAnimationFrame((()=>{this.updatePosition()}))})),this.addScrollListeners()):(this.coClose.emit(),this.cleanupListeners(),this.unbindDocListeners(),this.cachedOffsetAncestor=null,this.offsetAncestorComputed=!1)}bindDocListeners(){this.docListenersBound||(document.addEventListener("click",this.handleDocumentClickManual,!0),document.addEventListener("keydown",this.handleDocumentKeydownManual,!0),this.docListenersBound=!0)}unbindDocListeners(){this.docListenersBound&&(document.removeEventListener("click",this.handleDocumentClickManual,!0),document.removeEventListener("keydown",this.handleDocumentKeydownManual,!0),this.docListenersBound=!1)}async toggle(){this.open=!this.open}async show(){this.open=!0}async hide(){this.open=!1}addScrollListeners(){window.addEventListener("resize",this.scheduleUpdate,{passive:!0}),window.addEventListener("scroll",this.scheduleUpdate,{passive:!0,capture:!0}),this.scrollParents=[];const s=n(this.el);s&&(s.addEventListener("scroll",this.scheduleUpdate,{passive:!0}),this.scrollParents.push(s))}cleanupListeners(){this.rafId&&(cancelAnimationFrame(this.rafId),this.rafId=void 0),window.removeEventListener("resize",this.scheduleUpdate),window.removeEventListener("scroll",this.scheduleUpdate,{capture:!0});for(const s of this.scrollParents)s.removeEventListener("scroll",this.scheduleUpdate);this.scrollParents=[]}render(){return o("div",{key:"a10448fae8b1ab711c359f7dc0c7a01432700638",class:"co-popover"},o("div",{key:"4e42cabce7bb62a866b080870d31cb03ea62ccdf",class:"co-popover__trigger",ref:s=>this.triggerEl=s,onClick:this.handleTriggerClick},o("slot",{key:"a5d85e222124e3af63266e4b99b460d62581200b",name:"trigger"})),this.open&&o("div",{key:"9143a817e7b46b41ba393480743f3ca38e507a84",class:"co-popover__panel",ref:s=>{s&&s!==this.panelEl&&(this.panelEl=s,this.scheduleUpdate())}},o("slot",{key:"6230166198f8d5535d5de3d9bdf4a4d8d0c82cb7"})))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return":host{display:inline-block;position:relative}:host([match-width]){display:block;width:100%}.co-popover{display:block;width:100%}.co-popover__trigger{display:block;width:100%;cursor:pointer}.co-popover__panel{position:fixed;top:0;left:0;z-index:10000;visibility:hidden;background:var(--co-semantic-surface-page, #fff);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:visible}.co-popover__panel--positioned{visibility:visible}"}},[257,"co-popover",{open:[1540],placement:[1],matchWidth:[516,"match-width"],offset:[2],closeOnClickOutside:[4,"close-on-click-outside"],closeOnEscape:[4,"close-on-escape"],flip:[4],toggle:[64],show:[64],hide:[64]},void 0,{open:[{onOpenChange:0}]}]);function r(){"undefined"!=typeof customElements&&["co-popover"].forEach((t=>{"co-popover"===t&&(customElements.get(s(t))||customElements.define(s(t),a))}))}r();export{a as C,r as d}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, a as getElement } from './index-B0lqrhFo.js';
|
|
2
2
|
|
|
3
|
-
const coComboboxCss = () => `: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-combobox{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-combobox__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-combobox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-combobox__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-combobox__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-
|
|
3
|
+
const coComboboxCss = () => `: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-combobox{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-combobox__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-combobox__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;cursor:default}.co-combobox__secondary-label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;text-align:right}.co-combobox__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color 0.15s ease, box-shadow 0.15s ease;overflow:hidden}.co-combobox--open .co-combobox__trigger{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-combobox--disabled .co-combobox__trigger{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-combobox__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__icon{color:var(--co-semantic-text-disabled)}.co-combobox__input-wrapper{flex:1;display:flex;align-items:center;flex-wrap:nowrap;gap:4px;min-width:0;min-height:24px;padding:var(--co-spacing-xxs) 0;overflow:hidden}.co-combobox__input-wrapper co-chip{--co-chip-max-width:120px;--co-chip-bg:var(--co-semantic-surface-muted);--co-chip-color:var(--co-semantic-text-default);--co-chip-border:1px solid var(--co-semantic-border-subtle);flex-shrink:0}.co-combobox__overflow-badge{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-info, #2563eb);color:#fff;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-10);font-weight:600;line-height:1;white-space:nowrap}.co-combobox__text{color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;letter-spacing:inherit;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-combobox__text--placeholder{color:var(--co-semantic-text-muted)}.co-combobox--disabled .co-combobox__text{color:var(--co-semantic-text-disabled)}.co-combobox__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-combobox__clear:hover{color:var(--co-semantic-text-default)}.co-combobox__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox--disabled .co-combobox__caret{color:var(--co-semantic-text-disabled)}.co-combobox__dropdown{padding:var(--co-spacing-md);display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-combobox__search{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs) var(--co-spacing-sm2);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-xs);overflow:hidden;height:32px;box-sizing:border-box}.co-combobox__search-icon{flex-shrink:0;color:var(--co-semantic-text-muted);opacity:0.7;display:flex;align-items:center}.co-combobox__search-input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--co-font-size-12, 12px);font-weight:500;letter-spacing:inherit;line-height:1;color:var(--co-semantic-text-default);padding:0;margin:0}.co-combobox__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-combobox__options{max-height:280px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--co-semantic-border-subtle) transparent}.co-combobox__options::-webkit-scrollbar{width:6px}.co-combobox__options::-webkit-scrollbar-track{background:transparent;border-radius:3px}.co-combobox__options::-webkit-scrollbar-thumb{background:var(--co-semantic-border-subtle);border-radius:3px;transition:background 0.15s ease}.co-combobox__options::-webkit-scrollbar-thumb:hover{background:var(--co-semantic-text-muted)}.co-combobox__virtual-spacer{width:100%}.co-combobox__option{display:flex;align-items:center;justify-content:space-between;padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);cursor:pointer;height:32px;margin-bottom:2px;box-sizing:border-box;transition:background 0.1s ease}.co-combobox__option:hover{background:var(--co-semantic-surface-hover, rgba(31, 28, 27, 0.04))}.co-combobox__option-content{display:flex;align-items:center;gap:var(--co-spacing-sm2);flex:1;min-width:0}.co-combobox__option-icon-wrapper{width:24px;height:24px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}.co-combobox__option-icon{color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-combobox__option-label{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-combobox__option-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;overflow:hidden;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color 0.15s ease}.co-combobox__option-remove:hover{color:var(--co-semantic-text-default)}.co-combobox__option-check{flex-shrink:0;color:var(--co-semantic-text-default)}.co-combobox__footer{display:flex;gap:var(--co-spacing-sm2);padding-top:var(--co-spacing-sm2)}.co-combobox__footer-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity 0.15s ease;box-sizing:border-box;min-height:32px}.co-combobox__footer-btn:hover{opacity:0.85}.co-combobox__footer-btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-combobox__footer-btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}`;
|
|
4
4
|
|
|
5
5
|
const CoCombobox = class {
|
|
6
6
|
constructor(hostRef) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, a as getElement } from './index-B0lqrhFo.js';
|
|
2
2
|
import { c as computePosition, g as getOffsetAncestor, f as findNearestScrollParent } from './positioning-Am-OlB8h.js';
|
|
3
3
|
|
|
4
|
-
const coPopoverCss = () => `:host{display:inline-block;position:relative}:host([match-width]){display:block;width:100%}.co-popover{display:block;width:100%}.co-popover__trigger{display:block;width:100%;cursor:pointer}.co-popover__panel{position:fixed;top:0;left:0;z-index:10000;visibility:hidden;background:var(--co-semantic-surface-
|
|
4
|
+
const coPopoverCss = () => `:host{display:inline-block;position:relative}:host([match-width]){display:block;width:100%}.co-popover{display:block;width:100%}.co-popover__trigger{display:block;width:100%;cursor:pointer}.co-popover__panel{position:fixed;top:0;left:0;z-index:10000;visibility:hidden;background:var(--co-semantic-surface-page, #fff);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:visible}.co-popover__panel--positioned{visibility:visible}`;
|
|
5
5
|
|
|
6
6
|
const CoPopover = class {
|
|
7
7
|
constructor(hostRef) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prolibu-suite/cobalt-core",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Cobalt Design System — Framework-agnostic Web Components built with Stencil",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"license": "MIT",
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"@phosphor-icons/core": "^2.1.1",
|
|
47
|
-
"@prolibu-suite/cobalt-tokens": "0.1.
|
|
47
|
+
"@prolibu-suite/cobalt-tokens": "0.1.1"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
50
|
"@stencil/core": "^4.43.4",
|