@prolibu-suite/cobalt-core 0.11.5 → 0.11.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +65 -31
- package/dist/cjs/co-kbd_2.cjs.entry.js +10 -3
- package/dist/cjs/cobalt.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cobalt/cobalt.esm.js +1 -1
- package/dist/cobalt/p-868d1a18.entry.js +1 -0
- package/dist/collection/components/co-autocomplete/co-autocomplete.js +1 -1
- package/dist/collection/components/co-avatar-group/co-avatar-group.js +1 -1
- package/dist/collection/components/co-checkbox-group/co-checkbox-group.js +1 -1
- package/dist/collection/components/co-color-area/co-color-area.js +2 -2
- package/dist/collection/components/co-color-slider/co-color-slider.js +1 -1
- package/dist/collection/components/co-combobox/co-combobox.js +1 -1
- package/dist/collection/components/co-command-search/co-command-search.js +1 -1
- package/dist/collection/components/co-data-table/co-data-table.js +1 -1
- package/dist/collection/components/co-date-range-picker/co-date-range-picker.js +2 -2
- package/dist/collection/components/co-document-editor/co-document-editor.js +5 -5
- package/dist/collection/components/co-popover/co-popover.js +1 -1
- package/dist/collection/components/co-radio-group/co-radio-group.js +1 -1
- package/dist/collection/components/co-ref-field/co-ref-field.js +4 -4
- package/dist/collection/components/co-segmented-bar/co-segmented-bar.js +1 -1
- package/dist/collection/components/co-select/co-select.js +1 -1
- package/dist/collection/components/co-sidebar-nav/co-sidebar-nav.js +1 -1
- package/dist/collection/components/co-toast/co-toast.js +2 -2
- package/dist/collection/components/co-tooltip/co-tooltip.css +14 -5
- package/dist/collection/components/co-tooltip/co-tooltip.js +29 -2
- package/dist/collection/components/co-transfer-list/co-transfer-list.js +1 -1
- package/dist/collection/components/co-tree-item/co-tree-item.js +2 -2
- package/dist/components/co-autocomplete.js +1 -1
- package/dist/components/co-avatar-group.js +1 -1
- package/dist/components/co-avatar.js +1 -1
- package/dist/components/co-combobox.js +1 -1
- package/dist/components/co-command-search.js +1 -1
- package/dist/components/co-data-table.js +1 -1
- package/dist/components/co-document-editor.js +1 -1
- package/dist/components/co-file-field.js +1 -1
- package/dist/components/co-list-item.js +1 -1
- package/dist/components/co-option-list.js +1 -1
- package/dist/components/co-ref-field.js +1 -1
- package/dist/components/co-sidebar-nav.js +1 -1
- package/dist/components/co-tooltip.js +1 -1
- package/dist/components/{p-BqFBZ1PT.js → p-BW10Sgiy.js} +1 -1
- package/dist/components/{p-VcrjNCew.js → p-BzNBPHen.js} +1 -1
- package/dist/components/p-V7HYy0VO.js +1 -0
- package/dist/esm/co-kbd_2.entry.js +10 -3
- package/dist/esm/cobalt.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/types/components/co-tooltip/co-tooltip.d.ts +6 -0
- package/dist/types/components.d.ts +11 -0
- package/package.json +3 -3
- package/dist/cobalt/p-db623519.entry.js +0 -1
- package/dist/components/p-9VoFSbIH.js +0 -1
|
@@ -48,7 +48,9 @@
|
|
|
48
48
|
opacity: 0;
|
|
49
49
|
pointer-events: none;
|
|
50
50
|
|
|
51
|
-
|
|
51
|
+
/* Superficie única de panel + flecha: el tono la reemplaza en un solo lugar. */
|
|
52
|
+
--co-tooltip-surface: var(--co-color-base-negro, #1f1c1b);
|
|
53
|
+
background: var(--co-tooltip-surface);
|
|
52
54
|
color: var(--co-color-base-blanco, #fff);
|
|
53
55
|
font-family: var(--co-font-family-primary, 'Geist', sans-serif);
|
|
54
56
|
font-size: var(--co-font-size-12, 12px);
|
|
@@ -130,7 +132,7 @@
|
|
|
130
132
|
bottom: -10px;
|
|
131
133
|
left: 50%;
|
|
132
134
|
transform: translateX(-50%);
|
|
133
|
-
border-top-color: var(--co-
|
|
135
|
+
border-top-color: var(--co-tooltip-surface);
|
|
134
136
|
border-bottom: none;
|
|
135
137
|
}
|
|
136
138
|
|
|
@@ -139,7 +141,7 @@
|
|
|
139
141
|
top: -5px;
|
|
140
142
|
left: 50%;
|
|
141
143
|
transform: translateX(-50%);
|
|
142
|
-
border-bottom-color: var(--co-
|
|
144
|
+
border-bottom-color: var(--co-tooltip-surface);
|
|
143
145
|
border-top: none;
|
|
144
146
|
}
|
|
145
147
|
|
|
@@ -148,7 +150,7 @@
|
|
|
148
150
|
right: -10px;
|
|
149
151
|
top: 50%;
|
|
150
152
|
transform: translateY(-50%);
|
|
151
|
-
border-left-color: var(--co-
|
|
153
|
+
border-left-color: var(--co-tooltip-surface);
|
|
152
154
|
border-right: none;
|
|
153
155
|
}
|
|
154
156
|
|
|
@@ -157,10 +159,17 @@
|
|
|
157
159
|
left: -5px;
|
|
158
160
|
top: 50%;
|
|
159
161
|
transform: translateY(-50%);
|
|
160
|
-
border-right-color: var(--co-
|
|
162
|
+
border-right-color: var(--co-tooltip-surface);
|
|
161
163
|
border-left: none;
|
|
162
164
|
}
|
|
163
165
|
|
|
166
|
+
/* ── Tone: error (estado de un registro, p. ej. «Inactivo») ──── */
|
|
167
|
+
/* Aditivo: solo con tone="error". Sólido como el default (oscuro en ambos temas);
|
|
168
|
+
el blanco sobre status-error queda en ~6,3:1. */
|
|
169
|
+
.co-tooltip__panel--tone-error {
|
|
170
|
+
--co-tooltip-surface: var(--co-semantic-status-error, #aa2e1b);
|
|
171
|
+
}
|
|
172
|
+
|
|
164
173
|
/* ── Content ────────────────────────────────────────────── */
|
|
165
174
|
.co-tooltip__content {
|
|
166
175
|
display: block;
|
|
@@ -42,6 +42,12 @@ export class CoTooltip {
|
|
|
42
42
|
* arrow hide is CSS-only — `arrow`'s own default/behavior is unchanged.
|
|
43
43
|
*/
|
|
44
44
|
this.variant = 'default';
|
|
45
|
+
/**
|
|
46
|
+
* Color tone of the panel (and arrow). `error` = solid `--co-semantic-status-error`
|
|
47
|
+
* surface with white text, for a record/state warning (e.g. "Inactive").
|
|
48
|
+
* Independent of `variant`.
|
|
49
|
+
*/
|
|
50
|
+
this.tone = 'default';
|
|
45
51
|
// ── State ──────────────────────────────────────────────────
|
|
46
52
|
this.visible = false;
|
|
47
53
|
this.actualPlacement = 'top';
|
|
@@ -273,11 +279,12 @@ export class CoTooltip {
|
|
|
273
279
|
// ── Render ─────────────────────────────────────────────────
|
|
274
280
|
render() {
|
|
275
281
|
const side = this.actualPlacement.split('-')[0];
|
|
276
|
-
return (h("div", { key: '
|
|
282
|
+
return (h("div", { key: '53c8dbd21619fd8caa4105b86b4b1765c2361252', class: "co-tooltip" }, h("div", { key: 'f9e5e3b352b37c69a67538c6db3d10f9fc945976', class: "co-tooltip__trigger", ref: (el) => (this.triggerEl = el), onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onPointerDown: this.handlePointerDown, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.handleKeyDown, "aria-describedby": this.visible ? 'tooltip-panel' : undefined }, h("slot", { key: '067ac53e5b491c7990acfa7c236ae2090a6657fc' })), (this.visible || this.closing) && this.content && (h("div", { key: '42436edfbd802bfd8c23dea5b8cfdd290fa150c7', id: "tooltip-panel", class: {
|
|
277
283
|
'co-tooltip__panel': true,
|
|
278
284
|
[`co-tooltip__panel--${side}`]: true,
|
|
279
285
|
'co-tooltip__panel--closing': this.closing,
|
|
280
286
|
'co-tooltip__panel--label': this.variant === 'label',
|
|
287
|
+
'co-tooltip__panel--tone-error': this.tone === 'error',
|
|
281
288
|
'co-tooltip__panel--with-shortcut': !!this.shortcut,
|
|
282
289
|
}, role: "tooltip", popover: "manual", part: "panel", onTransitionEnd: this.handlePanelTransitionEnd, ref: (el) => {
|
|
283
290
|
if (el && el !== this.panelEl) {
|
|
@@ -285,7 +292,7 @@ export class CoTooltip {
|
|
|
285
292
|
this.promotePanel();
|
|
286
293
|
this.scheduleUpdate();
|
|
287
294
|
}
|
|
288
|
-
}, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: '
|
|
295
|
+
}, style: { maxWidth: this.maxWidth } }, this.arrow && h("div", { key: '7520aaa3245fea55a7fcac31f33c56247b1fb5d8', class: `co-tooltip__arrow co-tooltip__arrow--${side}` }), h("span", { key: 'd3797d1c3a31c64cb30d4d8f448204e3a9f8c017', class: "co-tooltip__content" }, this.content), this.shortcut && h("co-kbd", { key: '01354b1fd110de3000d48ad9eaef0e3329a64e48', keys: this.shortcut, surface: "dark", size: "xs" })))));
|
|
289
296
|
}
|
|
290
297
|
static get is() { return "co-tooltip"; }
|
|
291
298
|
static get encapsulation() { return "shadow"; }
|
|
@@ -528,6 +535,26 @@ export class CoTooltip {
|
|
|
528
535
|
"attribute": "variant",
|
|
529
536
|
"defaultValue": "'default'"
|
|
530
537
|
},
|
|
538
|
+
"tone": {
|
|
539
|
+
"type": "string",
|
|
540
|
+
"mutable": false,
|
|
541
|
+
"complexType": {
|
|
542
|
+
"original": "'default' | 'error'",
|
|
543
|
+
"resolved": "\"default\" | \"error\"",
|
|
544
|
+
"references": {}
|
|
545
|
+
},
|
|
546
|
+
"required": false,
|
|
547
|
+
"optional": false,
|
|
548
|
+
"docs": {
|
|
549
|
+
"tags": [],
|
|
550
|
+
"text": "Color tone of the panel (and arrow). `error` = solid `--co-semantic-status-error`\nsurface with white text, for a record/state warning (e.g. \"Inactive\").\nIndependent of `variant`."
|
|
551
|
+
},
|
|
552
|
+
"getter": false,
|
|
553
|
+
"setter": false,
|
|
554
|
+
"reflect": false,
|
|
555
|
+
"attribute": "tone",
|
|
556
|
+
"defaultValue": "'default'"
|
|
557
|
+
},
|
|
531
558
|
"shortcut": {
|
|
532
559
|
"type": "string",
|
|
533
560
|
"mutable": false,
|
|
@@ -214,7 +214,7 @@ export class CoTransferList {
|
|
|
214
214
|
"references": {
|
|
215
215
|
"TransferOption": {
|
|
216
216
|
"location": "local",
|
|
217
|
-
"path": "/Users/agox/worktrees/cobalt-
|
|
217
|
+
"path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-transfer-list/co-transfer-list.tsx",
|
|
218
218
|
"id": "src/components/co-transfer-list/co-transfer-list.tsx::TransferOption"
|
|
219
219
|
}
|
|
220
220
|
}
|
|
@@ -243,7 +243,7 @@ export class CoTreeItem {
|
|
|
243
243
|
"references": {
|
|
244
244
|
"TreeItemSelection": {
|
|
245
245
|
"location": "local",
|
|
246
|
-
"path": "/Users/agox/worktrees/cobalt-
|
|
246
|
+
"path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-tree-item/co-tree-item.tsx",
|
|
247
247
|
"id": "src/components/co-tree-item/co-tree-item.tsx::TreeItemSelection"
|
|
248
248
|
}
|
|
249
249
|
}
|
|
@@ -269,7 +269,7 @@ export class CoTreeItem {
|
|
|
269
269
|
"references": {
|
|
270
270
|
"TreeItemSize": {
|
|
271
271
|
"location": "local",
|
|
272
|
-
"path": "/Users/agox/worktrees/cobalt-
|
|
272
|
+
"path": "/Users/agox/worktrees/cobalt-tooltip-tone/packages/core/src/components/co-tree-item/co-tree-item.tsx",
|
|
273
273
|
"id": "src/components/co-tree-item/co-tree-item.tsx::TreeItemSize"
|
|
274
274
|
}
|
|
275
275
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e,p as t,H as o,c,h as a}from"./index.js";import{R as i}from"./p-CWneqh4n.js";import{d as s}from"./p-VcrjNCew.js";import{d as r}from"./p-C_6szR7t.js";import{d as l}from"./p-KK2vAKs-.js";import{d as n}from"./p-8XzG8pzY.js";import{d as p}from"./p-BH184F0X.js";import{d as h}from"./p-BqFBZ1PT.js";import{d}from"./p-9VoFSbIH.js";const u=t(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coSearch=c(this,"coSearch",7),this.coChange=c(this,"coChange",7),this.coClear=c(this,"coClear",7),this.required=!1,this.placeholder="Search…",this.disabled=!1,this.clearable=!0,this.layout="vertical",this.size="md",this.status="default",this.options="[]",this.value="",this.multiple=!1,this.loading=!1,this.minChars=1,this.searchDebounce=300,this.emptyMessage="No results",this.isOpen=!1,this.query="",this.focused=!1,this.handleInput=e=>{const t=e.target.value;this.query=t,this.debounceTimer&&clearTimeout(this.debounceTimer),t.length>=this.minChars?(this.debounceTimer=setTimeout((()=>this.coSearch.emit(t)),this.searchDebounce),this.isOpen=!0):this.isOpen=!1},this.handleFocus=()=>{this.focused=!0,this.query.length>=this.minChars&&this.parsedOptions.length>0&&(this.isOpen=!0)},this.handleClear=e=>{var t;e.stopPropagation(),this.query="",this.value=this.multiple?"[]":"",this.isOpen=!1,this.coClear.emit(),this.coChange.emit({value:this.multiple?[]:"",item:null}),null===(t=this.inputEl)||void 0===t||t.focus()},this.handleChipRemove=e=>{const t=this.selectedValues.filter((t=>t!==e));this.value=JSON.stringify(t),this.coChange.emit({value:t,item:{_id:e,label:e}})},this.handleListChange=e=>{if(null==e.value)return this.value=this.multiple?"[]":"",this.query="",this.isOpen=!1,void this.coChange.emit({value:null,item:null});this.multiple?(this.value=JSON.stringify(e.value),this.coChange.emit({value:e.value,item:e.item})):(this.value=e.value,this.query=e.item.label,this.isOpen=!1,this.coChange.emit({value:e.value,item:e.item}))},this.handleInputKeyDown=async e=>{"Escape"!==e.key?this.isOpen&&this.optionListEl&&("ArrowDown"!==e.key&&"ArrowUp"!==e.key&&"Enter"!==e.key||(e.preventDefault(),await this.optionListEl.handleKey(e))):this.isOpen=!1}}get parsedOptions(){let e=this.options;if("string"==typeof e)try{e=JSON.parse(e)}catch(e){return[]}return Array.isArray(e)?e.map((e=>"string"==typeof e?{label:e,value:e}:e)):[]}get selectedValues(){if(this.multiple){if("string"==typeof this.value)try{return JSON.parse(this.value)}catch(e){return this.value?[this.value]:[]}return this.value}return"string"==typeof this.value&&this.value?[this.value]:[]}get hasValue(){return this.selectedValues.length>0}get statusIcon(){return{error:"warning-circle",success:"check-circle",warning:"warning",info:"info"}[this.status]||null}componentWillLoad(){this.syncQueryFromValue()}onOptionsChange(){this.query.length>=this.minChars&&(this.isOpen=!0),this.focused||this.syncQueryFromValue()}onValueChange(){this.syncQueryFromValue()}syncQueryFromValue(){if(!this.multiple&&"string"==typeof this.value&&this.value){const e=this.parsedOptions.find((e=>e.value===this.value));this.query=e?e.label:this.value}else this.multiple||this.value||(this.query="")}handleDocumentClick(e){this.el.contains(e.target)||(this.isOpen=!1,this.focused=!1)}render(){const e=this.parsedOptions,t=this.selectedValues;return a("div",{key:"02fe5e70777f1a39038af676c76032ae1fbecbc8",class:{"co-autocomplete":!0,"co-autocomplete--disabled":this.disabled,"co-autocomplete--focused":this.focused,["co-autocomplete--"+this.size]:!0,["co-autocomplete--"+this.status]:"default"!==this.status}},(this.label||this.secondaryLabel)&&a("div",{key:"a9237e72752d5d3921d70cb2d63a160625db7e62",class:"co-autocomplete__labels"},this.label&&a("label",{key:"f1284520b961bf6598e4b9c8a3d943b8b1aa847f",class:"co-autocomplete__label"},this.label,a(i,{key:"6c40530c3e2dca2b3adef8a8ce00c256b7070b48",required:this.required})),this.secondaryLabel&&a("span",{key:"37a0de4ba199f1bc6503543e18261623642c00cf",class:"co-autocomplete__secondary-label"},this.secondaryLabel)),a("div",{key:"30ff3eacbf9634085b212135356c3edbef6e8df9",class:"co-autocomplete__field"},this.iconLeft&&a("co-icon",{key:"3b8c564aae36e7db59c39fcc31fda7d98f55fae8",name:this.iconLeft,size:16,class:"co-autocomplete__icon"}),this.multiple&&t.length>0&&a("div",{key:"df7f0b08d2b456a048368f80c828ee83502b0a20",class:"co-autocomplete__chips"},t.map((e=>{const t=this.parsedOptions.find((t=>t.value===e));return a("co-chip",{label:t?t.label:e,size:"small",removable:!0,onCoRemove:()=>this.handleChipRemove(e)})}))),a("input",{key:"e2d9cfa48001c20aa9e8a4ef5800135172b2aff9",ref:e=>this.inputEl=e,class:"co-autocomplete__input",type:"text",value:this.query,placeholder:this.placeholder,disabled:this.disabled,onInput:this.handleInput,onFocus:this.handleFocus,onKeyDown:this.handleInputKeyDown}),this.loading&&a("div",{key:"e58449cb033553a123f3c2b1daa9b9c62a571273",class:"co-autocomplete__spinner"}),this.clearable&&(this.hasValue||this.query)&&!this.disabled&&a("button",{key:"ea8021e0807cd0eece9933f84772f5f497d2a63c",class:"co-autocomplete__clear",type:"button",tabIndex:-1,onClick:this.handleClear,"aria-label":"Clear"},a("co-icon",{key:"67a2f961d0ece0178811aa04fd9e5a082976ef6a",name:"x-circle",size:16,weight:"fill"}))),this.isOpen&&a("div",{key:"562cc6f307edd60c361c60974d0423550d8f681a",class:"co-autocomplete__dropdown"},a("co-option-list",{key:"3dec3da0d38adb8986b57960c74b697ffbc211dd",ref:e=>this.optionListEl=e,items:JSON.stringify(e.map((e=>({_id:e.value,label:e.label,icon:e.icon,disabled:e.disabled})))),value:this.multiple?JSON.stringify(this.selectedValues):this.selectedValues[0]||"",multiple:this.multiple,selectedAffordance:"check",virtual:!0,loading:this.loading,emptyMessage:this.emptyMessage,onCoChange:e=>this.handleListChange(e.detail)})),this.helperText&&a("div",{key:"5c21f62defe09b0160aeec8eaeaa881408dbe964",class:"co-autocomplete__helper co-autocomplete__helper--"+this.status},this.statusIcon&&a("co-icon",{key:"166ccdb5f1e308bb0212c473881bb36a33a8d2e4",name:this.statusIcon,size:14,weight:"fill",class:"co-autocomplete__helper-icon"}),a("span",{key:"bf4b038b665c269484b3bf841b19c92d5b0ceb27",class:"co-autocomplete__helper-text"},this.helperText)))}get el(){return this}static get watchers(){return{options:[{onOptionsChange:0}],value:[{onValueChange:0}]}}static get style(){return":host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-autocomplete{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-autocomplete__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-autocomplete__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-autocomplete__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-autocomplete--disabled .co-autocomplete__label,.co-autocomplete--disabled .co-autocomplete__secondary-label{color:var(--co-semantic-text-disabled)}.co-autocomplete__field{display:flex;align-items:center;flex-wrap:wrap;gap:var(--co-spacing-xs);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-autocomplete--s .co-autocomplete__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-autocomplete--sm .co-autocomplete__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-autocomplete--lg .co-autocomplete__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-autocomplete--focused .co-autocomplete__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-autocomplete--disabled .co-autocomplete__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-autocomplete--error .co-autocomplete__field{border-color:var(--co-semantic-status-error)}.co-autocomplete--success .co-autocomplete__field{border-color:var(--co-semantic-status-success)}.co-autocomplete--warning .co-autocomplete__field{border-color:var(--co-color-status-review)}.co-autocomplete--info .co-autocomplete__field{border-color:var(--co-semantic-status-info)}.co-autocomplete__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-autocomplete__chips{display:flex;flex-wrap:wrap;gap:var(--co-spacing-xs)}.co-autocomplete__input{flex:1;min-width:80px;border:none;background:transparent;color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;line-height:1;padding:0;outline:none}.co-autocomplete__input::placeholder{color:var(--co-semantic-text-muted)}.co-autocomplete--disabled .co-autocomplete__input{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-autocomplete__clear{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-autocomplete__clear:hover{color:var(--co-semantic-text-default)}.co-autocomplete__spinner{width:16px;height:16px;border:2px solid var(--co-semantic-border-subtle);border-top-color:var(--co-semantic-text-default);border-radius:var(--co-border-radius-full);animation:co-spin 0.6s linear infinite;flex-shrink:0}@keyframes co-spin{to{transform:rotate(360deg)}}.co-autocomplete__dropdown{position:absolute;top:100%;left:0;right:0;z-index:100;margin-top:var(--co-spacing-xs);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 16px rgba(31, 28, 27, 0.08);overflow:hidden;}.co-autocomplete__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-autocomplete__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-autocomplete__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-autocomplete__helper--error .co-autocomplete__helper-icon,.co-autocomplete__helper--error .co-autocomplete__helper-text{color:var(--co-semantic-status-error)}.co-autocomplete__helper--success .co-autocomplete__helper-icon,.co-autocomplete__helper--success .co-autocomplete__helper-text{color:var(--co-semantic-status-success)}.co-autocomplete__helper--warning .co-autocomplete__helper-icon,.co-autocomplete__helper--warning .co-autocomplete__helper-text{color:var(--co-color-status-review)}.co-autocomplete__helper--info .co-autocomplete__helper-icon,.co-autocomplete__helper--info .co-autocomplete__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-autocomplete{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-autocomplete__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-autocomplete__label{white-space:normal}:host([layout='horizontal']) .co-autocomplete>:not(.co-autocomplete__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}"}},[1,"co-autocomplete",{label:[1],required:[4],secondaryLabel:[1,"secondary-label"],placeholder:[1],disabled:[4],iconLeft:[1,"icon-left"],clearable:[4],helperText:[1,"helper-text"],layout:[513],size:[513],status:[1],options:[1],value:[1025],multiple:[4],loading:[4],minChars:[2,"min-chars"],searchDebounce:[2,"search-debounce"],emptyMessage:[1,"empty-message"],isOpen:[32],query:[32],focused:[32]},[[4,"click","handleDocumentClick"]],{options:[{onOptionsChange:0}],value:[{onValueChange:0}]}]);function m(){"undefined"!=typeof customElements&&["co-autocomplete","co-avatar","co-chip","co-icon","co-kbd","co-loader","co-option-list","co-tooltip"].forEach((t=>{switch(t){case"co-autocomplete":customElements.get(e(t))||customElements.define(e(t),u);break;case"co-avatar":customElements.get(e(t))||s();break;case"co-chip":customElements.get(e(t))||r();break;case"co-icon":customElements.get(e(t))||l();break;case"co-kbd":customElements.get(e(t))||n();break;case"co-loader":customElements.get(e(t))||p();break;case"co-option-list":customElements.get(e(t))||h();break;case"co-tooltip":customElements.get(e(t))||d()}}))}m();const f=u,b=m;export{f as CoAutocomplete,b as defineCustomElement}
|
|
1
|
+
import{t as e,p as t,H as o,c,h as a}from"./index.js";import{R as i}from"./p-CWneqh4n.js";import{d as s}from"./p-BzNBPHen.js";import{d as r}from"./p-C_6szR7t.js";import{d as l}from"./p-KK2vAKs-.js";import{d as n}from"./p-8XzG8pzY.js";import{d as p}from"./p-BH184F0X.js";import{d as h}from"./p-BW10Sgiy.js";import{d}from"./p-V7HYy0VO.js";const u=t(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coSearch=c(this,"coSearch",7),this.coChange=c(this,"coChange",7),this.coClear=c(this,"coClear",7),this.required=!1,this.placeholder="Search…",this.disabled=!1,this.clearable=!0,this.layout="vertical",this.size="md",this.status="default",this.options="[]",this.value="",this.multiple=!1,this.loading=!1,this.minChars=1,this.searchDebounce=300,this.emptyMessage="No results",this.isOpen=!1,this.query="",this.focused=!1,this.handleInput=e=>{const t=e.target.value;this.query=t,this.debounceTimer&&clearTimeout(this.debounceTimer),t.length>=this.minChars?(this.debounceTimer=setTimeout((()=>this.coSearch.emit(t)),this.searchDebounce),this.isOpen=!0):this.isOpen=!1},this.handleFocus=()=>{this.focused=!0,this.query.length>=this.minChars&&this.parsedOptions.length>0&&(this.isOpen=!0)},this.handleClear=e=>{var t;e.stopPropagation(),this.query="",this.value=this.multiple?"[]":"",this.isOpen=!1,this.coClear.emit(),this.coChange.emit({value:this.multiple?[]:"",item:null}),null===(t=this.inputEl)||void 0===t||t.focus()},this.handleChipRemove=e=>{const t=this.selectedValues.filter((t=>t!==e));this.value=JSON.stringify(t),this.coChange.emit({value:t,item:{_id:e,label:e}})},this.handleListChange=e=>{if(null==e.value)return this.value=this.multiple?"[]":"",this.query="",this.isOpen=!1,void this.coChange.emit({value:null,item:null});this.multiple?(this.value=JSON.stringify(e.value),this.coChange.emit({value:e.value,item:e.item})):(this.value=e.value,this.query=e.item.label,this.isOpen=!1,this.coChange.emit({value:e.value,item:e.item}))},this.handleInputKeyDown=async e=>{"Escape"!==e.key?this.isOpen&&this.optionListEl&&("ArrowDown"!==e.key&&"ArrowUp"!==e.key&&"Enter"!==e.key||(e.preventDefault(),await this.optionListEl.handleKey(e))):this.isOpen=!1}}get parsedOptions(){let e=this.options;if("string"==typeof e)try{e=JSON.parse(e)}catch(e){return[]}return Array.isArray(e)?e.map((e=>"string"==typeof e?{label:e,value:e}:e)):[]}get selectedValues(){if(this.multiple){if("string"==typeof this.value)try{return JSON.parse(this.value)}catch(e){return this.value?[this.value]:[]}return this.value}return"string"==typeof this.value&&this.value?[this.value]:[]}get hasValue(){return this.selectedValues.length>0}get statusIcon(){return{error:"warning-circle",success:"check-circle",warning:"warning",info:"info"}[this.status]||null}componentWillLoad(){this.syncQueryFromValue()}onOptionsChange(){this.query.length>=this.minChars&&(this.isOpen=!0),this.focused||this.syncQueryFromValue()}onValueChange(){this.syncQueryFromValue()}syncQueryFromValue(){if(!this.multiple&&"string"==typeof this.value&&this.value){const e=this.parsedOptions.find((e=>e.value===this.value));this.query=e?e.label:this.value}else this.multiple||this.value||(this.query="")}handleDocumentClick(e){this.el.contains(e.target)||(this.isOpen=!1,this.focused=!1)}render(){const e=this.parsedOptions,t=this.selectedValues;return a("div",{key:"02fe5e70777f1a39038af676c76032ae1fbecbc8",class:{"co-autocomplete":!0,"co-autocomplete--disabled":this.disabled,"co-autocomplete--focused":this.focused,["co-autocomplete--"+this.size]:!0,["co-autocomplete--"+this.status]:"default"!==this.status}},(this.label||this.secondaryLabel)&&a("div",{key:"a9237e72752d5d3921d70cb2d63a160625db7e62",class:"co-autocomplete__labels"},this.label&&a("label",{key:"f1284520b961bf6598e4b9c8a3d943b8b1aa847f",class:"co-autocomplete__label"},this.label,a(i,{key:"6c40530c3e2dca2b3adef8a8ce00c256b7070b48",required:this.required})),this.secondaryLabel&&a("span",{key:"37a0de4ba199f1bc6503543e18261623642c00cf",class:"co-autocomplete__secondary-label"},this.secondaryLabel)),a("div",{key:"30ff3eacbf9634085b212135356c3edbef6e8df9",class:"co-autocomplete__field"},this.iconLeft&&a("co-icon",{key:"3b8c564aae36e7db59c39fcc31fda7d98f55fae8",name:this.iconLeft,size:16,class:"co-autocomplete__icon"}),this.multiple&&t.length>0&&a("div",{key:"df7f0b08d2b456a048368f80c828ee83502b0a20",class:"co-autocomplete__chips"},t.map((e=>{const t=this.parsedOptions.find((t=>t.value===e));return a("co-chip",{label:t?t.label:e,size:"small",removable:!0,onCoRemove:()=>this.handleChipRemove(e)})}))),a("input",{key:"e2d9cfa48001c20aa9e8a4ef5800135172b2aff9",ref:e=>this.inputEl=e,class:"co-autocomplete__input",type:"text",value:this.query,placeholder:this.placeholder,disabled:this.disabled,onInput:this.handleInput,onFocus:this.handleFocus,onKeyDown:this.handleInputKeyDown}),this.loading&&a("div",{key:"e58449cb033553a123f3c2b1daa9b9c62a571273",class:"co-autocomplete__spinner"}),this.clearable&&(this.hasValue||this.query)&&!this.disabled&&a("button",{key:"ea8021e0807cd0eece9933f84772f5f497d2a63c",class:"co-autocomplete__clear",type:"button",tabIndex:-1,onClick:this.handleClear,"aria-label":"Clear"},a("co-icon",{key:"67a2f961d0ece0178811aa04fd9e5a082976ef6a",name:"x-circle",size:16,weight:"fill"}))),this.isOpen&&a("div",{key:"562cc6f307edd60c361c60974d0423550d8f681a",class:"co-autocomplete__dropdown"},a("co-option-list",{key:"3dec3da0d38adb8986b57960c74b697ffbc211dd",ref:e=>this.optionListEl=e,items:JSON.stringify(e.map((e=>({_id:e.value,label:e.label,icon:e.icon,disabled:e.disabled})))),value:this.multiple?JSON.stringify(this.selectedValues):this.selectedValues[0]||"",multiple:this.multiple,selectedAffordance:"check",virtual:!0,loading:this.loading,emptyMessage:this.emptyMessage,onCoChange:e=>this.handleListChange(e.detail)})),this.helperText&&a("div",{key:"5c21f62defe09b0160aeec8eaeaa881408dbe964",class:"co-autocomplete__helper co-autocomplete__helper--"+this.status},this.statusIcon&&a("co-icon",{key:"166ccdb5f1e308bb0212c473881bb36a33a8d2e4",name:this.statusIcon,size:14,weight:"fill",class:"co-autocomplete__helper-icon"}),a("span",{key:"bf4b038b665c269484b3bf841b19c92d5b0ceb27",class:"co-autocomplete__helper-text"},this.helperText)))}get el(){return this}static get watchers(){return{options:[{onOptionsChange:0}],value:[{onValueChange:0}]}}static get style(){return":host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-autocomplete{display:flex;flex-direction:column;gap:var(--co-spacing-sm2);position:relative}.co-autocomplete__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-autocomplete__label{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;cursor:default}.co-autocomplete__secondary-label{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-autocomplete--disabled .co-autocomplete__label,.co-autocomplete--disabled .co-autocomplete__secondary-label{color:var(--co-semantic-text-disabled)}.co-autocomplete__field{display:flex;align-items:center;flex-wrap:wrap;gap:var(--co-spacing-xs);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-semantic-surface-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-autocomplete--s .co-autocomplete__field{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-autocomplete--sm .co-autocomplete__field{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-autocomplete--lg .co-autocomplete__field{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-autocomplete--focused .co-autocomplete__field{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-autocomplete--disabled .co-autocomplete__field{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-autocomplete--error .co-autocomplete__field{border-color:var(--co-semantic-status-error)}.co-autocomplete--success .co-autocomplete__field{border-color:var(--co-semantic-status-success)}.co-autocomplete--warning .co-autocomplete__field{border-color:var(--co-color-status-review)}.co-autocomplete--info .co-autocomplete__field{border-color:var(--co-semantic-status-info)}.co-autocomplete__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-autocomplete__chips{display:flex;flex-wrap:wrap;gap:var(--co-spacing-xs)}.co-autocomplete__input{flex:1;min-width:80px;border:none;background:transparent;color:var(--co-semantic-text-default);font-family:inherit;font-size:inherit;font-weight:400;line-height:1;padding:0;outline:none}.co-autocomplete__input::placeholder{color:var(--co-semantic-text-muted)}.co-autocomplete--disabled .co-autocomplete__input{color:var(--co-semantic-text-disabled);cursor:not-allowed}.co-autocomplete__clear{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-autocomplete__clear:hover{color:var(--co-semantic-text-default)}.co-autocomplete__spinner{width:16px;height:16px;border:2px solid var(--co-semantic-border-subtle);border-top-color:var(--co-semantic-text-default);border-radius:var(--co-border-radius-full);animation:co-spin 0.6s linear infinite;flex-shrink:0}@keyframes co-spin{to{transform:rotate(360deg)}}.co-autocomplete__dropdown{position:absolute;top:100%;left:0;right:0;z-index:100;margin-top:var(--co-spacing-xs);background:var(--co-semantic-surface-secondary);border:1px solid var(--co-semantic-border-subtle);border-radius:var(--co-border-radius-sm, 12px);box-shadow:0 4px 16px rgba(31, 28, 27, 0.08);overflow:hidden;}.co-autocomplete__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-autocomplete__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-autocomplete__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-autocomplete__helper--error .co-autocomplete__helper-icon,.co-autocomplete__helper--error .co-autocomplete__helper-text{color:var(--co-semantic-status-error)}.co-autocomplete__helper--success .co-autocomplete__helper-icon,.co-autocomplete__helper--success .co-autocomplete__helper-text{color:var(--co-semantic-status-success)}.co-autocomplete__helper--warning .co-autocomplete__helper-icon,.co-autocomplete__helper--warning .co-autocomplete__helper-text{color:var(--co-color-status-review)}.co-autocomplete__helper--info .co-autocomplete__helper-icon,.co-autocomplete__helper--info .co-autocomplete__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-autocomplete{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-autocomplete__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-autocomplete__label{white-space:normal}:host([layout='horizontal']) .co-autocomplete>:not(.co-autocomplete__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}"}},[1,"co-autocomplete",{label:[1],required:[4],secondaryLabel:[1,"secondary-label"],placeholder:[1],disabled:[4],iconLeft:[1,"icon-left"],clearable:[4],helperText:[1,"helper-text"],layout:[513],size:[513],status:[1],options:[1],value:[1025],multiple:[4],loading:[4],minChars:[2,"min-chars"],searchDebounce:[2,"search-debounce"],emptyMessage:[1,"empty-message"],isOpen:[32],query:[32],focused:[32]},[[4,"click","handleDocumentClick"]],{options:[{onOptionsChange:0}],value:[{onValueChange:0}]}]);function m(){"undefined"!=typeof customElements&&["co-autocomplete","co-avatar","co-chip","co-icon","co-kbd","co-loader","co-option-list","co-tooltip"].forEach((t=>{switch(t){case"co-autocomplete":customElements.get(e(t))||customElements.define(e(t),u);break;case"co-avatar":customElements.get(e(t))||s();break;case"co-chip":customElements.get(e(t))||r();break;case"co-icon":customElements.get(e(t))||l();break;case"co-kbd":customElements.get(e(t))||n();break;case"co-loader":customElements.get(e(t))||p();break;case"co-option-list":customElements.get(e(t))||h();break;case"co-tooltip":customElements.get(e(t))||d()}}))}m();const f=u,b=m;export{f as CoAutocomplete,b as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as a,p as o,H as t,c as e,h as r}from"./index.js";import{d as i}from"./p-
|
|
1
|
+
import{t as a,p as o,H as t,c as e,h as r}from"./index.js";import{d as i}from"./p-BzNBPHen.js";import{d as s}from"./p-KK2vAKs-.js";import{d as c}from"./p-8XzG8pzY.js";import{d as n}from"./p-V7HYy0VO.js";const l={xl:80,lg:64,md:56,sm:48,xs:32,xxs:24},v={xl:"var(--co-font-size-26)",lg:"var(--co-font-size-22)",md:"var(--co-font-size-18)",sm:"var(--co-font-size-16)",xs:"var(--co-font-size-12)",xxs:"var(--co-font-size-10)"},p=o(class extends t{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.coClick=e(this,"coClick",3),this.items=[],this.max=4,this.size="xs",this.shape="circle",this.interactive=!1,this.activate=()=>{this.coClick.emit()}}accessibleLabel(a){return this.label?this.label:a.map((a=>a.name||a.text)).filter(Boolean).join(", ")}render(){var a,o;const t=Array.isArray(this.items)?this.items:[],e=this.max>0?this.max:t.length,i=t.slice(0,e),s=Math.max(0,t.length-e),c=null!==(a=l[this.size])&&void 0!==a?a:l.xs,n=null!==(o=v[this.size])&&void 0!==o?o:v.xs,p=t.slice(e).map((a=>a.name||a.text)).filter(Boolean).join(", "),u=this.interactive?"button":"div",d=this.interactive?{type:"button","aria-label":this.accessibleLabel(t),onClick:this.activate}:{role:"group"};return r(u,Object.assign({key:"7e14b71d5b7391c15fcba50aa43964fdf65282e3",class:{"co-avatar-group":!0,"co-avatar-group--interactive":this.interactive}},d),i.map(((a,o)=>{var t,e,i;return r("co-avatar",{key:o,class:"co-avatar-group__avatar",type:null!==(t=a.type)&&void 0!==t?t:a.src?"image":a.icon?"icon":"text",size:this.size,shape:null!==(e=a.shape)&&void 0!==e?e:this.shape,text:a.text,src:a.src,icon:null!==(i=a.icon)&&void 0!==i?i:"user",color:a.color,"ring-color":a.ringColor,name:a.name||a.text||""})})),s>0&&r("co-tooltip",{key:"f3cc2f5a9f1ceac07ea3b665e6bd0c87804d27ae",class:"co-avatar-group__slot",content:p,placement:"bottom"},r("div",{key:"c0b5fcb8df88917b06a2a9b36f1c2798f10730ff",class:"co-avatar-group__overflow",style:{width:c+"px",height:c+"px",fontSize:n},role:"img","aria-label":"+"+s},"+",s)))}static get style(){return":host{display:inline-flex}.co-avatar-group{display:inline-flex;align-items:center}.co-avatar-group--interactive{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;color:inherit;cursor:pointer;border-radius:var(--co-border-radius-full);outline:none;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-avatar-group--interactive:hover{opacity:0.88}.co-avatar-group--interactive:focus-visible{box-shadow:0 0 0 2px var(--co-semantic-surface-page), 0 0 0 4px var(--co-semantic-border-focus)}.co-avatar-group__slot{display:inline-flex;align-items:center;line-height:0}.co-avatar-group>*:not(:first-child){margin-left:calc(-1 * var(--co-avatar-group-overlap, var(--co-spacing-sm)))}.co-avatar-group__avatar::part(avatar),.co-avatar-group__overflow{box-shadow:0 0 0 var(--co-avatar-group-ring-width, 2px) var(--co-semantic-surface-page)}.co-avatar-group__avatar,.co-avatar-group__overflow{vertical-align:middle}.co-avatar-group__overflow{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-muted);color:var(--co-semantic-text-secondary);font-family:var(--co-font-family-primary);font-weight:600;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);flex-shrink:0;user-select:none;-webkit-font-smoothing:antialiased}"}},[1,"co-avatar-group",{items:[16],max:[2],size:[1],shape:[1],interactive:[4],label:[1]}]);function u(){"undefined"!=typeof customElements&&["co-avatar-group","co-avatar","co-icon","co-kbd","co-tooltip"].forEach((o=>{switch(o){case"co-avatar-group":customElements.get(a(o))||customElements.define(a(o),p);break;case"co-avatar":customElements.get(a(o))||i();break;case"co-icon":customElements.get(a(o))||s();break;case"co-kbd":customElements.get(a(o))||c();break;case"co-tooltip":customElements.get(a(o))||n()}}))}u();const d=p,f=u;export{d as CoAvatarGroup,f as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{C as o,d as
|
|
1
|
+
import{C as o,d as s}from"./p-BzNBPHen.js";const p=o,r=s;export{p as CoAvatar,r as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as o,H as e,c as t,h as c,t as i}from"./index.js";import{R as s}from"./p-CWneqh4n.js";import{r as a}from"./p-Ba_v-MzM.js";import{d as r}from"./p-VcrjNCew.js";import{d as n}from"./p-C_6szR7t.js";import{d as l}from"./p-KK2vAKs-.js";import{d as h}from"./p-8XzG8pzY.js";import{d as b}from"./p-Bw_b_czs.js";import{d}from"./p-BH184F0X.js";import{d as m}from"./p-BqFBZ1PT.js";import{d as p}from"./p-TGRbLkLz.js";import{d as f}from"./p-9VoFSbIH.js";const x=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",3),this.coClose=t(this,"coClose",3),this.coClear=t(this,"coClear",7),this.coFooterPrimary=t(this,"coFooterPrimary",7),this.coFooterSecondary=t(this,"coFooterSecondary",7),this.required=!1,this.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.emptyMessage="No results found",this.value="[]",this.multiple=!0,this.size="md",this.status="default",this.layout="vertical",this.isOpen=!1,this.searchQuery="",this.overflowCount=0,this.pendingFocus=!1,this.handleTriggerClick=o=>{this.disabled&&o.stopPropagation()},this.handleTriggerKeyDown=o=>{this.disabled||o.target===this.triggerEl&&("Enter"===o.key||" "===o.key?(o.preventDefault(),this.isOpen=!this.isOpen):"ArrowDown"!==o.key||this.isOpen||(o.preventDefault(),this.isOpen=!0))},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({value:this.multiple?[]:"",item:null})},this.handleListChange=o=>{if(null==o.value)return this.value="[]",this.isOpen=!1,void this.coChange.emit({value:null,item:null});if(this.multiple){const e=o.value;this.value=JSON.stringify(e),this.coChange.emit({value:e,item:o.item})}else{const e=o.value;this.value=JSON.stringify([e]),this.isOpen=!1,this.coChange.emit({value:e,item:o.item})}},this.handleListRemove=o=>{const e=this.selectedValues.filter((e=>e!==o));this.value=JSON.stringify(e),this.coChange.emit({value:e,item:{_id:o,label:o}})},this.handleFooterPrimary=()=>{this.coFooterPrimary.emit(),this.isOpen=!1},this.handleFooterSecondary=()=>{this.coFooterSecondary.emit()}}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(){return this.searchQuery?a(this.parsedOptions,this.searchQuery,(o=>o.label)):this.parsedOptions}get listItemsJson(){return JSON.stringify(this.filteredOptions.map((o=>({_id:o.value,label:o.label,icon:o.icon}))))}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}get statusIcon(){return{error:"warning-circle",success:"check-circle",warning:"warning",info:"info"}[this.status]||null}onOpenChange(o){o?(this.searchQuery="",this.pendingFocus=!0,this.coOpen.emit()):(this.coClose.emit(),this.restoreTriggerFocus())}onValueChange(){}connectedCallback(){this.resizeObserver=new ResizeObserver((()=>{this.calcOverflow()}))}disconnectedCallback(){var o;null===(o=this.resizeObserver)||void 0===o||o.disconnect()}componentDidRender(){var o,e,t;this.chipContainerEl&&(null===(o=this.resizeObserver)||void 0===o||o.disconnect(),null===(e=this.resizeObserver)||void 0===e||e.observe(this.chipContainerEl)),this.calcOverflow(),this.pendingFocus&&(null===(t=this.optionListEl)||void 0===t?void 0:t.isConnected)&&(this.pendingFocus=!1,this.optionListEl.focusSearch())}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)}restoreTriggerFocus(){var o;const e=document.activeElement;(e===this.el||this.el.contains(e))&&(null===(o=this.triggerEl)||void 0===o||o.focus())}render(){return c("div",{key:"8b0ff4418cd4ef8313fb18f597423938668e7c4c",class:{"co-combobox":!0,"co-combobox--open":this.isOpen,"co-combobox--disabled":this.disabled,["co-combobox--"+this.size]:!0},part:"wrapper"},(this.label||this.secondaryLabel)&&c("div",{key:"e54542e22563eafd57909405254d85a8b4df3e4f",class:"co-combobox__labels"},this.label&&c("label",{key:"3f54d1ba25400dd89b1e3a59c564f68e8a3785df",class:"co-combobox__label",part:"label"},this.label,c(s,{key:"4b0c64794195101ef3dfac1b656cd393eb19012a",required:this.required})),this.secondaryLabel&&c("span",{key:"51f2ed8dcd890fa162011ccf1fe9e3f96afcc6b9",class:"co-combobox__secondary-label",part:"secondary-label"},this.secondaryLabel)),c("co-popover",{key:"c071e11ad27db937caa615b63d32e056b099ea4a",open:this.isOpen,placement:"bottom-start",matchWidth:!0,offset:4,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},c("div",{key:"c4b215350ab75d791e9f0181f43af320e32506a9",slot:"trigger",class:"co-combobox__trigger",part:"trigger",role:"combobox","aria-expanded":this.isOpen?"true":"false","aria-haspopup":"listbox","aria-label":this.label||void 0,"aria-disabled":this.disabled?"true":void 0,"aria-controls":this.isOpen?o.LIST_ID:void 0,tabIndex:this.disabled?-1:0,ref:o=>this.triggerEl=o,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown},this.iconLeft&&c("co-icon",{key:"595cfc20ba148cd99e487002d4ce186feaf4b590",name:this.iconLeft,size:16,class:"co-combobox__icon"}),c("div",{key:"04a932c116df074d9a9e293d7dc3fead24f85e84",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=>{e.stopPropagation(),this.handleListRemove(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:"3717ddeb6a6cbfb50992f060a94466637d641848",class:"co-combobox__overflow-badge"},this.overflowCount),this.clearable&&this.hasValue&&!this.disabled&&c("button",{key:"3bd22162de7163e761f4deec4813c7bbd2dc7ab3",class:"co-combobox__clear",type:"button",tabIndex:-1,onClick:this.handleClear,"aria-label":"Clear selection",part:"clear"},c("co-icon",{key:"466f7859e45f36d572e2736f8c67bb028be00e90",name:"x-circle",size:16,weight:"fill"})),c("co-icon",{key:"6631ac9f8053225d79b4ec3e70733de96044a5fa",name:this.isOpen?"caret-up":"caret-down",size:16,class:"co-combobox__caret"})),c("div",{key:"3d3cf9b043e50c161f48575e625dfa167c0efefd",class:"co-combobox__dropdown",part:"dropdown"},this.isOpen&&c("co-option-list",{key:"74eb44b2f32b30f5965a24d3d46fd99dba6b05b3",id:o.LIST_ID,ref:o=>this.optionListEl=o,items:this.listItemsJson,value:this.multiple?JSON.stringify(this.selectedValues):this.selectedValues[0]||"",multiple:this.multiple,selectedAffordance:"check",removableItems:this.multiple,virtual:!0,searchable:this.searchable,searchPlaceholder:this.searchPlaceholder,searchDebounce:0,highlightMatches:!0,emptyMessage:this.emptyMessage,onCoSearch:o=>{this.searchQuery=o.detail},onCoChange:o=>this.handleListChange(o.detail),onCoRemoveItem:o=>this.handleListRemove(o.detail)},this.showFooter&&c("co-list-footer",{key:"00861de6c0f6cd87a9a21d88d9f4fe1dd31afc6c",slot:"footer",secondaryLabel:this.footerSecondaryLabel,primaryLabel:this.footerPrimaryLabel,onCoSecondary:this.handleFooterSecondary,onCoPrimary:this.handleFooterPrimary})))),this.helperText&&c("div",{key:"ac1eaf079ae327e76df9723972404a375903689e",class:"co-combobox__helper co-combobox__helper--"+this.status,part:"helper"},this.statusIcon&&c("co-icon",{key:"be90b01fda8c51b11bbc73b8ab76085e160492b1",name:this.statusIcon,size:14,weight:"fill",class:"co-combobox__helper-icon"}),c("span",{key:"c3921ff5a264d24bbba07358085d92675aadbe9b",class:"co-combobox__helper-text"},this.helperText)))}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-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);overflow:hidden}.co-combobox--s .co-combobox__trigger{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-combobox--sm .co-combobox__trigger{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-combobox--lg .co-combobox__trigger{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.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__trigger:focus-visible{outline:none;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:22px;padding: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-status-info, #2d6cc5);color:var(--co-color-base-blanco, #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 var(--co-motion-duration-fast) var(--co-motion-ease-out)}.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{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-combobox__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-combobox__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-combobox__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-combobox__helper--error .co-combobox__helper-icon,.co-combobox__helper--error .co-combobox__helper-text{color:var(--co-semantic-status-error)}.co-combobox__helper--success .co-combobox__helper-icon,.co-combobox__helper--success .co-combobox__helper-text{color:var(--co-semantic-status-success)}.co-combobox__helper--warning .co-combobox__helper-icon,.co-combobox__helper--warning .co-combobox__helper-text{color:var(--co-color-status-review)}.co-combobox__helper--info .co-combobox__helper-icon,.co-combobox__helper--info .co-combobox__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-combobox{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-combobox__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-combobox__label{white-space:normal}:host([layout='horizontal']) .co-combobox>:not(.co-combobox__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}"}},[1,"co-combobox",{label:[1],required:[4],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],emptyMessage:[1,"empty-message"],value:[1025],multiple:[4],size:[513],helperText:[1,"helper-text"],status:[1],layout:[513],isOpen:[32],searchQuery:[32],overflowCount:[32]},void 0,{isOpen:[{onOpenChange:0}],value:[{onValueChange:0}]}]);function u(){"undefined"!=typeof customElements&&["co-combobox","co-avatar","co-chip","co-icon","co-kbd","co-list-footer","co-loader","co-option-list","co-popover","co-tooltip"].forEach((o=>{switch(o){case"co-combobox":customElements.get(i(o))||customElements.define(i(o),x);break;case"co-avatar":customElements.get(i(o))||r();break;case"co-chip":customElements.get(i(o))||n();break;case"co-icon":customElements.get(i(o))||l();break;case"co-kbd":customElements.get(i(o))||h();break;case"co-list-footer":customElements.get(i(o))||b();break;case"co-loader":customElements.get(i(o))||d();break;case"co-option-list":customElements.get(i(o))||m();break;case"co-popover":customElements.get(i(o))||p();break;case"co-tooltip":customElements.get(i(o))||f()}}))}x.LIST_ID="co-combobox-list",u();const g=x,_=u;export{g as CoCombobox,_ as defineCustomElement}
|
|
1
|
+
import{p as o,H as e,c as t,h as c,t as i}from"./index.js";import{R as s}from"./p-CWneqh4n.js";import{r as a}from"./p-Ba_v-MzM.js";import{d as r}from"./p-BzNBPHen.js";import{d as n}from"./p-C_6szR7t.js";import{d as l}from"./p-KK2vAKs-.js";import{d as h}from"./p-8XzG8pzY.js";import{d as b}from"./p-Bw_b_czs.js";import{d}from"./p-BH184F0X.js";import{d as m}from"./p-BW10Sgiy.js";import{d as p}from"./p-TGRbLkLz.js";import{d as f}from"./p-V7HYy0VO.js";const x=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",3),this.coClose=t(this,"coClose",3),this.coClear=t(this,"coClear",7),this.coFooterPrimary=t(this,"coFooterPrimary",7),this.coFooterSecondary=t(this,"coFooterSecondary",7),this.required=!1,this.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.emptyMessage="No results found",this.value="[]",this.multiple=!0,this.size="md",this.status="default",this.layout="vertical",this.isOpen=!1,this.searchQuery="",this.overflowCount=0,this.pendingFocus=!1,this.handleTriggerClick=o=>{this.disabled&&o.stopPropagation()},this.handleTriggerKeyDown=o=>{this.disabled||o.target===this.triggerEl&&("Enter"===o.key||" "===o.key?(o.preventDefault(),this.isOpen=!this.isOpen):"ArrowDown"!==o.key||this.isOpen||(o.preventDefault(),this.isOpen=!0))},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({value:this.multiple?[]:"",item:null})},this.handleListChange=o=>{if(null==o.value)return this.value="[]",this.isOpen=!1,void this.coChange.emit({value:null,item:null});if(this.multiple){const e=o.value;this.value=JSON.stringify(e),this.coChange.emit({value:e,item:o.item})}else{const e=o.value;this.value=JSON.stringify([e]),this.isOpen=!1,this.coChange.emit({value:e,item:o.item})}},this.handleListRemove=o=>{const e=this.selectedValues.filter((e=>e!==o));this.value=JSON.stringify(e),this.coChange.emit({value:e,item:{_id:o,label:o}})},this.handleFooterPrimary=()=>{this.coFooterPrimary.emit(),this.isOpen=!1},this.handleFooterSecondary=()=>{this.coFooterSecondary.emit()}}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(){return this.searchQuery?a(this.parsedOptions,this.searchQuery,(o=>o.label)):this.parsedOptions}get listItemsJson(){return JSON.stringify(this.filteredOptions.map((o=>({_id:o.value,label:o.label,icon:o.icon}))))}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}get statusIcon(){return{error:"warning-circle",success:"check-circle",warning:"warning",info:"info"}[this.status]||null}onOpenChange(o){o?(this.searchQuery="",this.pendingFocus=!0,this.coOpen.emit()):(this.coClose.emit(),this.restoreTriggerFocus())}onValueChange(){}connectedCallback(){this.resizeObserver=new ResizeObserver((()=>{this.calcOverflow()}))}disconnectedCallback(){var o;null===(o=this.resizeObserver)||void 0===o||o.disconnect()}componentDidRender(){var o,e,t;this.chipContainerEl&&(null===(o=this.resizeObserver)||void 0===o||o.disconnect(),null===(e=this.resizeObserver)||void 0===e||e.observe(this.chipContainerEl)),this.calcOverflow(),this.pendingFocus&&(null===(t=this.optionListEl)||void 0===t?void 0:t.isConnected)&&(this.pendingFocus=!1,this.optionListEl.focusSearch())}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)}restoreTriggerFocus(){var o;const e=document.activeElement;(e===this.el||this.el.contains(e))&&(null===(o=this.triggerEl)||void 0===o||o.focus())}render(){return c("div",{key:"8b0ff4418cd4ef8313fb18f597423938668e7c4c",class:{"co-combobox":!0,"co-combobox--open":this.isOpen,"co-combobox--disabled":this.disabled,["co-combobox--"+this.size]:!0},part:"wrapper"},(this.label||this.secondaryLabel)&&c("div",{key:"e54542e22563eafd57909405254d85a8b4df3e4f",class:"co-combobox__labels"},this.label&&c("label",{key:"3f54d1ba25400dd89b1e3a59c564f68e8a3785df",class:"co-combobox__label",part:"label"},this.label,c(s,{key:"4b0c64794195101ef3dfac1b656cd393eb19012a",required:this.required})),this.secondaryLabel&&c("span",{key:"51f2ed8dcd890fa162011ccf1fe9e3f96afcc6b9",class:"co-combobox__secondary-label",part:"secondary-label"},this.secondaryLabel)),c("co-popover",{key:"c071e11ad27db937caa615b63d32e056b099ea4a",open:this.isOpen,placement:"bottom-start",matchWidth:!0,offset:4,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},c("div",{key:"c4b215350ab75d791e9f0181f43af320e32506a9",slot:"trigger",class:"co-combobox__trigger",part:"trigger",role:"combobox","aria-expanded":this.isOpen?"true":"false","aria-haspopup":"listbox","aria-label":this.label||void 0,"aria-disabled":this.disabled?"true":void 0,"aria-controls":this.isOpen?o.LIST_ID:void 0,tabIndex:this.disabled?-1:0,ref:o=>this.triggerEl=o,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown},this.iconLeft&&c("co-icon",{key:"595cfc20ba148cd99e487002d4ce186feaf4b590",name:this.iconLeft,size:16,class:"co-combobox__icon"}),c("div",{key:"04a932c116df074d9a9e293d7dc3fead24f85e84",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=>{e.stopPropagation(),this.handleListRemove(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:"3717ddeb6a6cbfb50992f060a94466637d641848",class:"co-combobox__overflow-badge"},this.overflowCount),this.clearable&&this.hasValue&&!this.disabled&&c("button",{key:"3bd22162de7163e761f4deec4813c7bbd2dc7ab3",class:"co-combobox__clear",type:"button",tabIndex:-1,onClick:this.handleClear,"aria-label":"Clear selection",part:"clear"},c("co-icon",{key:"466f7859e45f36d572e2736f8c67bb028be00e90",name:"x-circle",size:16,weight:"fill"})),c("co-icon",{key:"6631ac9f8053225d79b4ec3e70733de96044a5fa",name:this.isOpen?"caret-up":"caret-down",size:16,class:"co-combobox__caret"})),c("div",{key:"3d3cf9b043e50c161f48575e625dfa167c0efefd",class:"co-combobox__dropdown",part:"dropdown"},this.isOpen&&c("co-option-list",{key:"74eb44b2f32b30f5965a24d3d46fd99dba6b05b3",id:o.LIST_ID,ref:o=>this.optionListEl=o,items:this.listItemsJson,value:this.multiple?JSON.stringify(this.selectedValues):this.selectedValues[0]||"",multiple:this.multiple,selectedAffordance:"check",removableItems:this.multiple,virtual:!0,searchable:this.searchable,searchPlaceholder:this.searchPlaceholder,searchDebounce:0,highlightMatches:!0,emptyMessage:this.emptyMessage,onCoSearch:o=>{this.searchQuery=o.detail},onCoChange:o=>this.handleListChange(o.detail),onCoRemoveItem:o=>this.handleListRemove(o.detail)},this.showFooter&&c("co-list-footer",{key:"00861de6c0f6cd87a9a21d88d9f4fe1dd31afc6c",slot:"footer",secondaryLabel:this.footerSecondaryLabel,primaryLabel:this.footerPrimaryLabel,onCoSecondary:this.handleFooterSecondary,onCoPrimary:this.handleFooterPrimary})))),this.helperText&&c("div",{key:"ac1eaf079ae327e76df9723972404a375903689e",class:"co-combobox__helper co-combobox__helper--"+this.status,part:"helper"},this.statusIcon&&c("co-icon",{key:"be90b01fda8c51b11bbc73b8ab76085e160492b1",name:this.statusIcon,size:14,weight:"fill",class:"co-combobox__helper-icon"}),c("span",{key:"c3921ff5a264d24bbba07358085d92675aadbe9b",class:"co-combobox__helper-text"},this.helperText)))}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-page);border:1px solid var(--co-semantic-border-field);border-radius:var(--co-border-radius-xs);min-height:40px;box-sizing:border-box;cursor:pointer;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out);overflow:hidden}.co-combobox--s .co-combobox__trigger{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-combobox--sm .co-combobox__trigger{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-14)}.co-combobox--lg .co-combobox__trigger{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.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__trigger:focus-visible{outline:none;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:22px;padding: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-status-info, #2d6cc5);color:var(--co-color-base-blanco, #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 var(--co-motion-duration-fast) var(--co-motion-ease-out)}.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{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-combobox__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-combobox__helper-icon{flex-shrink:0;display:flex;align-items:center}.co-combobox__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);font-weight:400;line-height:1}.co-combobox__helper--error .co-combobox__helper-icon,.co-combobox__helper--error .co-combobox__helper-text{color:var(--co-semantic-status-error)}.co-combobox__helper--success .co-combobox__helper-icon,.co-combobox__helper--success .co-combobox__helper-text{color:var(--co-semantic-status-success)}.co-combobox__helper--warning .co-combobox__helper-icon,.co-combobox__helper--warning .co-combobox__helper-text{color:var(--co-color-status-review)}.co-combobox__helper--info .co-combobox__helper-icon,.co-combobox__helper--info .co-combobox__helper-text{color:var(--co-semantic-status-info)}:host([layout='horizontal']) .co-combobox{display:grid;grid-template-columns:var(--co-field-label-width, max-content) 1fr;align-items:start;column-gap:var(--co-spacing-md);row-gap:var(--co-spacing-sm2)}:host([layout='horizontal']) .co-combobox__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-combobox__label{white-space:normal}:host([layout='horizontal']) .co-combobox>:not(.co-combobox__labels){grid-column:2;min-width:0}.co-field-required{margin-left:2px;color:var(--co-color-status-error)}.co-field-required__caption{margin-left:4px;color:var(--co-semantic-text-muted);font-size:var(--co-font-size-12);font-weight:400}.co-field-required__caption::before{content:var(--co-field-required-text, ' (required)')}"}},[1,"co-combobox",{label:[1],required:[4],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],emptyMessage:[1,"empty-message"],value:[1025],multiple:[4],size:[513],helperText:[1,"helper-text"],status:[1],layout:[513],isOpen:[32],searchQuery:[32],overflowCount:[32]},void 0,{isOpen:[{onOpenChange:0}],value:[{onValueChange:0}]}]);function u(){"undefined"!=typeof customElements&&["co-combobox","co-avatar","co-chip","co-icon","co-kbd","co-list-footer","co-loader","co-option-list","co-popover","co-tooltip"].forEach((o=>{switch(o){case"co-combobox":customElements.get(i(o))||customElements.define(i(o),x);break;case"co-avatar":customElements.get(i(o))||r();break;case"co-chip":customElements.get(i(o))||n();break;case"co-icon":customElements.get(i(o))||l();break;case"co-kbd":customElements.get(i(o))||h();break;case"co-list-footer":customElements.get(i(o))||b();break;case"co-loader":customElements.get(i(o))||d();break;case"co-option-list":customElements.get(i(o))||m();break;case"co-popover":customElements.get(i(o))||p();break;case"co-tooltip":customElements.get(i(o))||f()}}))}x.LIST_ID="co-combobox-list",u();const g=x,_=u;export{g as CoCombobox,_ as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as a,p as e,H as o,c,h as t}from"./index.js";import{r as s}from"./p-Ba_v-MzM.js";import{d as r}from"./p-VcrjNCew.js";import{d as i}from"./p-C_6szR7t.js";import{d as n}from"./p-KK2vAKs-.js";import{d}from"./p-8XzG8pzY.js";import{d as h}from"./p-BH184F0X.js";import{d as l}from"./p-BqFBZ1PT.js";import{d as m}from"./p-wUXcJGdy.js";import{d as p}from"./p-9VoFSbIH.js";const f=e(class extends o{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.coSelect=c(this,"coSelect",7),this.coClose=c(this,"coClose",7),this.coSearch=c(this,"coSearch",7),this.coScopeChange=c(this,"coScopeChange",1),this.coBackspaceEmpty=c(this,"coBackspaceEmpty",1),this.coChipRemove=c(this,"coChipRemove",1),this.coTabSelect=c(this,"coTabSelect",1),this.coMoreTabs=c(this,"coMoreTabs",1),this.open=!1,this.placeholder="Search...",this.items=[],this.emptyMessage="No results found",this.async=!1,this.loading=!1,this.chips="[]",this.tabs="[]",this.activeTab="",this.hasMore=!1,this.moreLabel="More",this.favorites="[]",this.query="",this.handleInput=a=>{this.query=a.target.value,this.coSearch.emit(this.query)},this.handleKeyDown=a=>{var e,o;if(function(a,e){return"Backspace"===a&&""===e}(a.key,this.query))return a.preventDefault(),void this.coBackspaceEmpty.emit(this.query);switch(a.key){case"ArrowDown":case"ArrowUp":case"Enter":a.preventDefault(),null===(e=this.optionListEl)||void 0===e||e.handleKey(a);break;case"Escape":a.preventDefault(),this.close();break;case"Tab":a.preventDefault(),null===(o=this.optionListEl)||void 0===o||o.handleKey(new KeyboardEvent("keydown",{key:a.shiftKey?"ArrowUp":"ArrowDown"}))}},this.handleListPick=a=>{const e=this.filteredItems.find((e=>e.value===a));e&&this.selectItem(e)},this.handlePanelKeyDown=a=>{"Escape"===a.key&&(a.preventDefault(),this.close())},this.handleOverlayClick=()=>{this.close()},this.handlePanelClick=a=>{a.stopPropagation()},this.handleTriggerClick=()=>{this.open=!0}}get parsedItems(){if("string"==typeof this.items)try{return JSON.parse(this.items)}catch(a){return[]}return this.items}get filteredItems(){return function(a,e,o){return o?a:e?s(a,e,(a=>[a.label,a.value])):a}(this.parsedItems,this.query,this.async)}get parsedChips(){try{const a="string"==typeof this.chips?JSON.parse(this.chips):this.chips;return Array.isArray(a)?a:[]}catch(a){return[]}}get parsedTabs(){try{const a="string"==typeof this.tabs?JSON.parse(this.tabs):this.tabs;return Array.isArray(a)?a:[]}catch(a){return[]}}get parsedFavorites(){try{const a="string"==typeof this.favorites?JSON.parse(this.favorites):this.favorites;return Array.isArray(a)?a:[]}catch(a){return[]}}onActiveTabChange(a){a&&(this.query=""),requestAnimationFrame((()=>{var a;const e=null===(a=this.el.shadowRoot)||void 0===a?void 0:a.querySelector('.co-command-search__tab[aria-selected="true"]');null==e||e.scrollIntoView({inline:"nearest",block:"nearest"})}))}onOpenChange(a){a&&(this.query="",requestAnimationFrame((()=>{var a;return null===(a=this.inputEl)||void 0===a?void 0:a.focus()})))}selectItem(a){!function(a){return!0===a.keepOpen}(a)?(this.coSelect.emit(a.value),this.close()):this.coScopeChange.emit(a.value)}close(){this.open&&(this.open=!1,this.coClose.emit())}render(){const a=this.filteredItems;return[t("div",{key:"37a7fa941fee9d90d58937fea9a968604e825daf",class:"co-command-search__trigger",onClick:this.handleTriggerClick},t("slot",{key:"23aff571c1cc19b36b1931a5c30d3d3c544eb9b8",name:"trigger"})),t("co-overlay",{key:"bc74cdb881e5005d12ae0e55f301507715303d63",open:this.open,onCoClose:this.handleOverlayClick},t("div",{key:"654ab29570bd313809b660cce6ba9f71c0730e57",class:{"co-command-search":!0,"co-command-search--open":this.open},part:"panel",role:"dialog","aria-modal":"true","aria-label":"Command palette",onClick:this.handlePanelClick,onKeyDown:this.handlePanelKeyDown},t("div",{key:"f62ae09d7384d180b4169e1f7c21d14c7f3ca0b3",class:"co-command-search__input-row",part:"input-row"},t("co-icon",{key:"800323c34524e72dd0255166e45528dcf273a642",name:"magnifying-glass",size:20}),this.parsedChips.map(((a,e)=>t("span",{class:"co-command-search__facet-chip"},a.icon&&t("co-icon",{name:a.icon,size:12}),t("span",{class:"co-command-search__facet-chip-label"},a.label),t("button",{class:"co-command-search__facet-chip-remove",type:"button","aria-label":"Remove filter "+a.label,onClick:a=>{a.stopPropagation(),this.coChipRemove.emit(e)}},t("co-icon",{name:"x",size:10,weight:"bold"}))))),t("input",{key:"5468e510b549c996e7208b691b846b2949b2870d",class:"co-command-search__input",type:"text",placeholder:this.placeholder,value:this.query,onInput:this.handleInput,onKeyDown:this.handleKeyDown,ref:a=>this.inputEl=a,part:"input",role:"combobox","aria-expanded":this.open?"true":"false","aria-autocomplete":"list"}),this.loading&&t("co-loader",{key:"300afe578342e795b968c01ec4a941b2fc07c25b",class:"co-command-search__loading",part:"loading",size:"sm"}),t("span",{key:"96c6c03f2330c1c4fbdecba635cc61aee1cef442",class:"co-command-search__shortcut"},"ESC")),(this.parsedTabs.length>0||this.hasMore)&&t("div",{key:"b05917311a4e65b98ed2e1db1c0cedb9f83bd5a2",class:"co-command-search__tabs",part:"tabs",role:"tablist"},this.parsedTabs.map((a=>{const e=a.value===this.activeTab;return t("co-chip",{class:"co-command-search__tab",role:"tab","aria-selected":e?"true":"false",clickable:!0,selected:e,variant:e?"filled":"outlined",color:e?"primary":"default",iconLeft:a.icon,label:a.label,onCoClick:()=>this.coTabSelect.emit(e?"":a.value)})})),this.hasMore&&t("co-chip",{key:"36c25c208b1e26394bd02a56dda55d5e0fd912fd",class:"co-command-search__tab co-command-search__tab--more",clickable:!0,variant:"outlined",label:this.moreLabel,iconRight:"caret-down",onCoClick:()=>this.coMoreTabs.emit()})),t("div",{key:"72497fec08f07fd6a91f62db10091d7d635eeab9",class:"co-command-search__results",part:"results"},this.parsedFavorites.length>0&&!this.query&&t("div",{key:"be18a43f0e3e5cc4c9ce0cbfacc90c7e5568017b",class:"co-command-search__fav",part:"favorites"},t("div",{key:"9c29628bb6ba66daf9253aa5d490f7dcc56e4b3b",class:"co-command-search__fav-grid"},this.parsedFavorites.map((a=>t("button",{class:"co-command-search__fav-card",type:"button",onClick:()=>this.coSelect.emit(a.value)},t("span",{class:"co-command-search__fav-icon",style:{background:a.color||"var(--co-semantic-surface-muted)"}},t("co-icon",{name:a.icon||"circle",size:26,weight:"fill"})),t("span",{class:"co-command-search__fav-label"},a.label)))))),t("co-option-list",{key:"ee50dd0d97743a7a85de59f8daf6e45e989a422d",ref:a=>this.optionListEl=a,items:JSON.stringify(a.map((a=>({_id:a.value,label:a.label,icon:a.icon,description:a.subtitle,group:a.section,disabled:a.disabled})))),autoHighlight:!0,highlightMatches:!0,highlightTerm:this.query,loading:this.loading,emptyMessage:this.emptyMessage,onCoChange:a=>this.handleListPick(a.detail.item._id)}))))]}get el(){return this}static get watchers(){return{activeTab:[{onActiveTabChange:0}],open:[{onOpenChange:0}]}}static get style(){return":host{display:contents}co-overlay{--co-overlay-bg:rgba(0, 0, 0, 0.16)}.co-command-search__trigger{display:contents}.co-command-search{display:flex;flex-direction:column;width:90vw;max-width:560px;max-height:420px;background:var(--co-semantic-surface-page);border-radius:var(--co-border-radius-lg);box-shadow:0 8px 32px rgba(0, 0, 0, 0.12);overflow:hidden;font-family:var(--co-font-family-primary);transform:translateY(8px) scale(0.98);opacity:0;transition:transform var(--co-motion-duration-fast) var(--co-motion-ease-out), opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);margin-top:-15vh}.co-command-search--open{transform:translateY(0) scale(1);opacity:1}.co-command-search__input-row{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-md) var(--co-spacing-lg);border-bottom:1px solid var(--co-semantic-border-default);color:var(--co-semantic-text-muted)}.co-command-search__input{flex:1;border:none;outline:none;background:transparent;font-size:var(--co-font-size-16);font-family:var(--co-font-family-primary);color:var(--co-semantic-text-default);min-width:0}.co-command-search__input::placeholder{color:var(--co-semantic-text-muted)}.co-command-search__shortcut{font-size:var(--co-font-size-10);color:var(--co-semantic-text-muted);background:var(--co-semantic-surface-muted);padding:2px var(--co-spacing-xs);border-radius:var(--co-border-radius-xxs);font-weight:500;line-height:1.4;flex-shrink:0}.co-command-search__results{flex:1;overflow-y:auto;padding:var(--co-spacing-xs) 0}.co-command-search__loading{flex-shrink:0;display:flex;align-items:center}.co-command-search__facet-chip{display:inline-flex;align-items:center;gap:2px;padding:2px var(--co-spacing-xs);background:var(--co-color-primary-azul);color:var(--co-color-base-blanco, #fff);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-12);font-weight:500;white-space:nowrap;flex-shrink:0}.co-command-search__facet-chip-label{max-width:110px;overflow:hidden;text-overflow:ellipsis}.co-command-search__facet-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border:none;border-radius:var(--co-border-radius-full);background:rgba(255, 255, 255, 0.25);color:inherit;cursor:pointer;padding:0;line-height:1;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-command-search__facet-chip-remove:hover{background:rgba(255, 255, 255, 0.4)}.co-command-search__tabs{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-md);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-bottom:1px solid var(--co-semantic-border-default);scroll-padding-right:104px}.co-command-search__tabs::-webkit-scrollbar{display:none;}.co-command-search__tab{flex:0 0 auto}.co-command-search__tab--more{position:sticky;right:0;padding-left:var(--co-spacing-sm);background:var(--co-semantic-surface-page);box-shadow:-12px 0 10px -4px var(--co-semantic-surface-page)}.co-command-search__fav{padding:var(--co-spacing-sm) var(--co-spacing-lg) var(--co-spacing-md);border-bottom:1px solid var(--co-semantic-border-default)}.co-command-search__fav-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(88px, 1fr));gap:var(--co-spacing-xs)}.co-command-search__fav-card{display:flex;flex-direction:column;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm) var(--co-spacing-xs);background:transparent;border:none;border-radius:var(--co-border-radius-sm);cursor:pointer;font-family:inherit;text-align:center;min-width:0;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-command-search__fav-card:hover{background:var(--co-semantic-surface-hover)}.co-command-search__fav-card:focus-visible{outline:none;box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-command-search__fav-icon{flex:none;width:50px;height:50px;border-radius:var(--co-border-radius-sm);display:flex;align-items:center;justify-content:center;color:var(--co-color-base-blanco, #fff);box-shadow:0 2px 6px rgba(0, 0, 0, 0.14)}.co-command-search__fav-label{font-size:var(--co-font-size-12);font-weight:500;line-height:1.2;color:var(--co-semantic-text-default);max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}"}},[257,"co-command-search",{open:[1540],placeholder:[1],items:[1],emptyMessage:[1,"empty-message"],async:[516],loading:[516],chips:[513],tabs:[1],activeTab:[1,"active-tab"],hasMore:[4,"has-more"],moreLabel:[1,"more-label"],favorites:[1],query:[32]},void 0,{activeTab:[{onActiveTabChange:0}],open:[{onOpenChange:0}]}]);function b(){"undefined"!=typeof customElements&&["co-command-search","co-avatar","co-chip","co-icon","co-kbd","co-loader","co-option-list","co-overlay","co-tooltip"].forEach((e=>{switch(e){case"co-command-search":customElements.get(a(e))||customElements.define(a(e),f);break;case"co-avatar":customElements.get(a(e))||r();break;case"co-chip":customElements.get(a(e))||i();break;case"co-icon":customElements.get(a(e))||n();break;case"co-kbd":customElements.get(a(e))||d();break;case"co-loader":customElements.get(a(e))||h();break;case"co-option-list":customElements.get(a(e))||l();break;case"co-overlay":customElements.get(a(e))||m();break;case"co-tooltip":customElements.get(a(e))||p()}}))}b();const u=f,g=b;export{u as CoCommandSearch,g as defineCustomElement}
|
|
1
|
+
import{t as a,p as e,H as o,c,h as t}from"./index.js";import{r as s}from"./p-Ba_v-MzM.js";import{d as r}from"./p-BzNBPHen.js";import{d as i}from"./p-C_6szR7t.js";import{d as n}from"./p-KK2vAKs-.js";import{d}from"./p-8XzG8pzY.js";import{d as h}from"./p-BH184F0X.js";import{d as l}from"./p-BW10Sgiy.js";import{d as m}from"./p-wUXcJGdy.js";import{d as p}from"./p-V7HYy0VO.js";const f=e(class extends o{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.coSelect=c(this,"coSelect",7),this.coClose=c(this,"coClose",7),this.coSearch=c(this,"coSearch",7),this.coScopeChange=c(this,"coScopeChange",1),this.coBackspaceEmpty=c(this,"coBackspaceEmpty",1),this.coChipRemove=c(this,"coChipRemove",1),this.coTabSelect=c(this,"coTabSelect",1),this.coMoreTabs=c(this,"coMoreTabs",1),this.open=!1,this.placeholder="Search...",this.items=[],this.emptyMessage="No results found",this.async=!1,this.loading=!1,this.chips="[]",this.tabs="[]",this.activeTab="",this.hasMore=!1,this.moreLabel="More",this.favorites="[]",this.query="",this.handleInput=a=>{this.query=a.target.value,this.coSearch.emit(this.query)},this.handleKeyDown=a=>{var e,o;if(function(a,e){return"Backspace"===a&&""===e}(a.key,this.query))return a.preventDefault(),void this.coBackspaceEmpty.emit(this.query);switch(a.key){case"ArrowDown":case"ArrowUp":case"Enter":a.preventDefault(),null===(e=this.optionListEl)||void 0===e||e.handleKey(a);break;case"Escape":a.preventDefault(),this.close();break;case"Tab":a.preventDefault(),null===(o=this.optionListEl)||void 0===o||o.handleKey(new KeyboardEvent("keydown",{key:a.shiftKey?"ArrowUp":"ArrowDown"}))}},this.handleListPick=a=>{const e=this.filteredItems.find((e=>e.value===a));e&&this.selectItem(e)},this.handlePanelKeyDown=a=>{"Escape"===a.key&&(a.preventDefault(),this.close())},this.handleOverlayClick=()=>{this.close()},this.handlePanelClick=a=>{a.stopPropagation()},this.handleTriggerClick=()=>{this.open=!0}}get parsedItems(){if("string"==typeof this.items)try{return JSON.parse(this.items)}catch(a){return[]}return this.items}get filteredItems(){return function(a,e,o){return o?a:e?s(a,e,(a=>[a.label,a.value])):a}(this.parsedItems,this.query,this.async)}get parsedChips(){try{const a="string"==typeof this.chips?JSON.parse(this.chips):this.chips;return Array.isArray(a)?a:[]}catch(a){return[]}}get parsedTabs(){try{const a="string"==typeof this.tabs?JSON.parse(this.tabs):this.tabs;return Array.isArray(a)?a:[]}catch(a){return[]}}get parsedFavorites(){try{const a="string"==typeof this.favorites?JSON.parse(this.favorites):this.favorites;return Array.isArray(a)?a:[]}catch(a){return[]}}onActiveTabChange(a){a&&(this.query=""),requestAnimationFrame((()=>{var a;const e=null===(a=this.el.shadowRoot)||void 0===a?void 0:a.querySelector('.co-command-search__tab[aria-selected="true"]');null==e||e.scrollIntoView({inline:"nearest",block:"nearest"})}))}onOpenChange(a){a&&(this.query="",requestAnimationFrame((()=>{var a;return null===(a=this.inputEl)||void 0===a?void 0:a.focus()})))}selectItem(a){!function(a){return!0===a.keepOpen}(a)?(this.coSelect.emit(a.value),this.close()):this.coScopeChange.emit(a.value)}close(){this.open&&(this.open=!1,this.coClose.emit())}render(){const a=this.filteredItems;return[t("div",{key:"37a7fa941fee9d90d58937fea9a968604e825daf",class:"co-command-search__trigger",onClick:this.handleTriggerClick},t("slot",{key:"23aff571c1cc19b36b1931a5c30d3d3c544eb9b8",name:"trigger"})),t("co-overlay",{key:"bc74cdb881e5005d12ae0e55f301507715303d63",open:this.open,onCoClose:this.handleOverlayClick},t("div",{key:"654ab29570bd313809b660cce6ba9f71c0730e57",class:{"co-command-search":!0,"co-command-search--open":this.open},part:"panel",role:"dialog","aria-modal":"true","aria-label":"Command palette",onClick:this.handlePanelClick,onKeyDown:this.handlePanelKeyDown},t("div",{key:"f62ae09d7384d180b4169e1f7c21d14c7f3ca0b3",class:"co-command-search__input-row",part:"input-row"},t("co-icon",{key:"800323c34524e72dd0255166e45528dcf273a642",name:"magnifying-glass",size:20}),this.parsedChips.map(((a,e)=>t("span",{class:"co-command-search__facet-chip"},a.icon&&t("co-icon",{name:a.icon,size:12}),t("span",{class:"co-command-search__facet-chip-label"},a.label),t("button",{class:"co-command-search__facet-chip-remove",type:"button","aria-label":"Remove filter "+a.label,onClick:a=>{a.stopPropagation(),this.coChipRemove.emit(e)}},t("co-icon",{name:"x",size:10,weight:"bold"}))))),t("input",{key:"5468e510b549c996e7208b691b846b2949b2870d",class:"co-command-search__input",type:"text",placeholder:this.placeholder,value:this.query,onInput:this.handleInput,onKeyDown:this.handleKeyDown,ref:a=>this.inputEl=a,part:"input",role:"combobox","aria-expanded":this.open?"true":"false","aria-autocomplete":"list"}),this.loading&&t("co-loader",{key:"300afe578342e795b968c01ec4a941b2fc07c25b",class:"co-command-search__loading",part:"loading",size:"sm"}),t("span",{key:"96c6c03f2330c1c4fbdecba635cc61aee1cef442",class:"co-command-search__shortcut"},"ESC")),(this.parsedTabs.length>0||this.hasMore)&&t("div",{key:"b05917311a4e65b98ed2e1db1c0cedb9f83bd5a2",class:"co-command-search__tabs",part:"tabs",role:"tablist"},this.parsedTabs.map((a=>{const e=a.value===this.activeTab;return t("co-chip",{class:"co-command-search__tab",role:"tab","aria-selected":e?"true":"false",clickable:!0,selected:e,variant:e?"filled":"outlined",color:e?"primary":"default",iconLeft:a.icon,label:a.label,onCoClick:()=>this.coTabSelect.emit(e?"":a.value)})})),this.hasMore&&t("co-chip",{key:"36c25c208b1e26394bd02a56dda55d5e0fd912fd",class:"co-command-search__tab co-command-search__tab--more",clickable:!0,variant:"outlined",label:this.moreLabel,iconRight:"caret-down",onCoClick:()=>this.coMoreTabs.emit()})),t("div",{key:"72497fec08f07fd6a91f62db10091d7d635eeab9",class:"co-command-search__results",part:"results"},this.parsedFavorites.length>0&&!this.query&&t("div",{key:"be18a43f0e3e5cc4c9ce0cbfacc90c7e5568017b",class:"co-command-search__fav",part:"favorites"},t("div",{key:"9c29628bb6ba66daf9253aa5d490f7dcc56e4b3b",class:"co-command-search__fav-grid"},this.parsedFavorites.map((a=>t("button",{class:"co-command-search__fav-card",type:"button",onClick:()=>this.coSelect.emit(a.value)},t("span",{class:"co-command-search__fav-icon",style:{background:a.color||"var(--co-semantic-surface-muted)"}},t("co-icon",{name:a.icon||"circle",size:26,weight:"fill"})),t("span",{class:"co-command-search__fav-label"},a.label)))))),t("co-option-list",{key:"ee50dd0d97743a7a85de59f8daf6e45e989a422d",ref:a=>this.optionListEl=a,items:JSON.stringify(a.map((a=>({_id:a.value,label:a.label,icon:a.icon,description:a.subtitle,group:a.section,disabled:a.disabled})))),autoHighlight:!0,highlightMatches:!0,highlightTerm:this.query,loading:this.loading,emptyMessage:this.emptyMessage,onCoChange:a=>this.handleListPick(a.detail.item._id)}))))]}get el(){return this}static get watchers(){return{activeTab:[{onActiveTabChange:0}],open:[{onOpenChange:0}]}}static get style(){return":host{display:contents}co-overlay{--co-overlay-bg:rgba(0, 0, 0, 0.16)}.co-command-search__trigger{display:contents}.co-command-search{display:flex;flex-direction:column;width:90vw;max-width:560px;max-height:420px;background:var(--co-semantic-surface-page);border-radius:var(--co-border-radius-lg);box-shadow:0 8px 32px rgba(0, 0, 0, 0.12);overflow:hidden;font-family:var(--co-font-family-primary);transform:translateY(8px) scale(0.98);opacity:0;transition:transform var(--co-motion-duration-fast) var(--co-motion-ease-out), opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);margin-top:-15vh}.co-command-search--open{transform:translateY(0) scale(1);opacity:1}.co-command-search__input-row{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-md) var(--co-spacing-lg);border-bottom:1px solid var(--co-semantic-border-default);color:var(--co-semantic-text-muted)}.co-command-search__input{flex:1;border:none;outline:none;background:transparent;font-size:var(--co-font-size-16);font-family:var(--co-font-family-primary);color:var(--co-semantic-text-default);min-width:0}.co-command-search__input::placeholder{color:var(--co-semantic-text-muted)}.co-command-search__shortcut{font-size:var(--co-font-size-10);color:var(--co-semantic-text-muted);background:var(--co-semantic-surface-muted);padding:2px var(--co-spacing-xs);border-radius:var(--co-border-radius-xxs);font-weight:500;line-height:1.4;flex-shrink:0}.co-command-search__results{flex:1;overflow-y:auto;padding:var(--co-spacing-xs) 0}.co-command-search__loading{flex-shrink:0;display:flex;align-items:center}.co-command-search__facet-chip{display:inline-flex;align-items:center;gap:2px;padding:2px var(--co-spacing-xs);background:var(--co-color-primary-azul);color:var(--co-color-base-blanco, #fff);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-12);font-weight:500;white-space:nowrap;flex-shrink:0}.co-command-search__facet-chip-label{max-width:110px;overflow:hidden;text-overflow:ellipsis}.co-command-search__facet-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border:none;border-radius:var(--co-border-radius-full);background:rgba(255, 255, 255, 0.25);color:inherit;cursor:pointer;padding:0;line-height:1;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-command-search__facet-chip-remove:hover{background:rgba(255, 255, 255, 0.4)}.co-command-search__tabs{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-md);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-bottom:1px solid var(--co-semantic-border-default);scroll-padding-right:104px}.co-command-search__tabs::-webkit-scrollbar{display:none;}.co-command-search__tab{flex:0 0 auto}.co-command-search__tab--more{position:sticky;right:0;padding-left:var(--co-spacing-sm);background:var(--co-semantic-surface-page);box-shadow:-12px 0 10px -4px var(--co-semantic-surface-page)}.co-command-search__fav{padding:var(--co-spacing-sm) var(--co-spacing-lg) var(--co-spacing-md);border-bottom:1px solid var(--co-semantic-border-default)}.co-command-search__fav-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(88px, 1fr));gap:var(--co-spacing-xs)}.co-command-search__fav-card{display:flex;flex-direction:column;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm) var(--co-spacing-xs);background:transparent;border:none;border-radius:var(--co-border-radius-sm);cursor:pointer;font-family:inherit;text-align:center;min-width:0;transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-command-search__fav-card:hover{background:var(--co-semantic-surface-hover)}.co-command-search__fav-card:focus-visible{outline:none;box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-command-search__fav-icon{flex:none;width:50px;height:50px;border-radius:var(--co-border-radius-sm);display:flex;align-items:center;justify-content:center;color:var(--co-color-base-blanco, #fff);box-shadow:0 2px 6px rgba(0, 0, 0, 0.14)}.co-command-search__fav-label{font-size:var(--co-font-size-12);font-weight:500;line-height:1.2;color:var(--co-semantic-text-default);max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}"}},[257,"co-command-search",{open:[1540],placeholder:[1],items:[1],emptyMessage:[1,"empty-message"],async:[516],loading:[516],chips:[513],tabs:[1],activeTab:[1,"active-tab"],hasMore:[4,"has-more"],moreLabel:[1,"more-label"],favorites:[1],query:[32]},void 0,{activeTab:[{onActiveTabChange:0}],open:[{onOpenChange:0}]}]);function b(){"undefined"!=typeof customElements&&["co-command-search","co-avatar","co-chip","co-icon","co-kbd","co-loader","co-option-list","co-overlay","co-tooltip"].forEach((e=>{switch(e){case"co-command-search":customElements.get(a(e))||customElements.define(a(e),f);break;case"co-avatar":customElements.get(a(e))||r();break;case"co-chip":customElements.get(a(e))||i();break;case"co-icon":customElements.get(a(e))||n();break;case"co-kbd":customElements.get(a(e))||d();break;case"co-loader":customElements.get(a(e))||h();break;case"co-option-list":customElements.get(a(e))||l();break;case"co-overlay":customElements.get(a(e))||m();break;case"co-tooltip":customElements.get(a(e))||p()}}))}b();const u=f,g=b;export{u as CoCommandSearch,g as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t,p as e,H as a,c as o,h as i}from"./index.js";import{d as s}from"./p-DhPxNA2f.js";import{d as c}from"./p-BRZci8B3.js";import{d as r}from"./p-KK2vAKs-.js";import{d as n}from"./p-8XzG8pzY.js";import{d as l}from"./p-9VoFSbIH.js";const d=e(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.coSort=o(this,"coSort",7),this.coRowSelect=o(this,"coRowSelect",7),this.coSelectAll=o(this,"coSelectAll",7),this.coColumnResize=o(this,"coColumnResize",7),this.coColumnPin=o(this,"coColumnPin",7),this.coHeaderFilter=o(this,"coHeaderFilter",7),this.coRowDblClick=o(this,"coRowDblClick",7),this.coRowClick=o(this,"coRowClick",7),this.coEmptyAction=o(this,"coEmptyAction",7),this.columns="[]",this.rows="[]",this.rowKey="_id",this.loading=!1,this.skeletonRows=10,this.emptyTitle="",this.emptyMessage="No records found",this.emptyIcon="magnifying-glass",this.emptyActionVariant="stroke",this.sortField="",this.sortOrder="",this.filteredFields="[]",this.indirectFilteredFields="[]",this.selectable=!1,this.selectedKeys="[]",this.resizable=!0,this.parsedColumns=[],this.parsedRows=[],this.parsedSelectedKeys=new Set,this.parsedFilteredFields=[],this.parsedIndirectFields=[],this.columnWidths=new Map,this.headerMeasurePending=!1,this.resizingColumn=null,this.resizeStartX=0,this.resizeStartWidth=0,this.resizeEdgeExtra=0,this.resizeLastClientX=0,this.resizeAutoScrollRaf=0,this.resizePendingScroll=0,this.suppressNextSort=!1}parseColumns(){this.headerMeasurePending=!0;try{const t="string"==typeof this.columns?JSON.parse(this.columns):this.columns;this.parsedColumns=t,t.forEach((t=>{t.width&&!this.columnWidths.has(t.field)&&this.columnWidths.set(t.field,t.width)}))}catch(t){this.parsedColumns=[]}}parseRows(){try{this.parsedRows="string"==typeof this.rows?JSON.parse(this.rows):this.rows}catch(t){this.parsedRows=[]}}parseSelectedKeys(){try{const t="string"==typeof this.selectedKeys?JSON.parse(this.selectedKeys):this.selectedKeys;this.parsedSelectedKeys=new Set(t)}catch(t){this.parsedSelectedKeys=new Set}}parseFilteredFields(){try{this.parsedFilteredFields="string"==typeof this.filteredFields?JSON.parse(this.filteredFields):this.filteredFields||[]}catch(t){this.parsedFilteredFields=[]}}parseIndirectFields(){try{this.parsedIndirectFields="string"==typeof this.indirectFilteredFields?JSON.parse(this.indirectFilteredFields):this.indirectFilteredFields||[]}catch(t){this.parsedIndirectFields=[]}}componentWillLoad(){this.headerLabelEls=new Map,this.truncatedHeaders={},this.parseColumns(),this.parseRows(),this.parseSelectedKeys(),this.parseFilteredFields(),this.parseIndirectFields()}componentDidLoad(){"undefined"!=typeof ResizeObserver&&(this.headerResizeObserver=new ResizeObserver((()=>this.measureHeaderTruncation())),this.headerLabelEls.forEach((t=>this.headerResizeObserver.observe(t)))),this.measureHeaderTruncation()}disconnectedCallback(){var t;null===(t=this.headerResizeObserver)||void 0===t||t.disconnect(),this.headerResizeObserver=void 0}componentDidRender(){if(this.headerMeasurePending&&(this.headerMeasurePending=!1,this.measureHeaderTruncation()),this.resizePendingScroll){const t=this.el.querySelector(".co-data-table__scroll");t&&(t.scrollLeft+=this.resizePendingScroll),this.resizePendingScroll=0}}handleSort(t){if(this.suppressNextSort)return void(this.suppressNextSort=!1);let e;e=this.sortField===t?"asc"===this.sortOrder?"desc":"desc"===this.sortOrder?"":"asc":"asc",this.sortField=""===e?"":t,this.sortOrder=e,this.coSort.emit({field:t,order:e})}isAllSelected(){return 0!==this.parsedRows.length&&this.parsedRows.every((t=>this.parsedSelectedKeys.has(t[this.rowKey]+"")))}isSomeSelected(){if(0===this.parsedRows.length)return!1;const t=this.parsedRows.filter((t=>this.parsedSelectedKeys.has(t[this.rowKey]+""))).length;return t>0&&t<this.parsedRows.length}handleSelectAll(){const t=!this.isAllSelected()&&!this.isSomeSelected();this.coSelectAll.emit({selected:!this.isAllSelected()||t})}handleRowSelect(t){const e=t[this.rowKey]+"",a=!this.parsedSelectedKeys.has(e);this.coRowSelect.emit({key:e,selected:a})}handleResizeStart(t,e){e.preventDefault(),e.stopPropagation(),this.resizingColumn=t,this.resizeStartX=e.clientX,this.resizeStartWidth=this.columnWidths.get(t)||150,this.resizeEdgeExtra=0,this.resizeLastClientX=e.clientX;const a=this.el.querySelector(".co-data-table__scroll"),o=()=>{var t;return(null===(t=this.parsedColumns.find((t=>t.field===this.resizingColumn)))||void 0===t?void 0:t.minWidth)||80},i=()=>{const t=this.resizingColumn;if(!t)return 0;const e=function({startWidth:t,minWidth:e,pointerDelta:a,autoScrollExtra:o}){return Math.max(e,t+a+o)}({startWidth:this.resizeStartWidth,minWidth:o(),pointerDelta:this.resizeLastClientX-this.resizeStartX,autoScrollExtra:this.resizeEdgeExtra});return this.columnWidths=new Map(this.columnWidths.set(t,e)),e},s=()=>{this.resizeAutoScrollRaf=0;const t=this.resizingColumn;if(!t||!a)return;const e=a.getBoundingClientRect(),c=function({pointerX:t,containerLeft:e,containerRight:a,edgeZone:o=72,maxSpeed:i=24}){const s=a-e;if(s<=0)return 0;const c=Math.min(o,s/3),r=a-c;if(t>r)return Math.min(i,(t-r)/c*i);const n=e+c;return t<n?-Math.min(i,(n-t)/c*i):0}({pointerX:this.resizeLastClientX,containerLeft:e.left,containerRight:e.right});c&&(c<0&&(this.columnWidths.get(t)||this.resizeStartWidth)<=o()||(this.resizeEdgeExtra+=c,this.resizePendingScroll+=c,i(),this.resizeAutoScrollRaf=requestAnimationFrame(s)))},c=t=>{this.resizingColumn&&(this.resizeLastClientX=t.clientX,i(),this.resizeAutoScrollRaf||(this.resizeAutoScrollRaf=requestAnimationFrame(s)))},r=()=>{if(this.resizeAutoScrollRaf&&(cancelAnimationFrame(this.resizeAutoScrollRaf),this.resizeAutoScrollRaf=0),this.resizingColumn){const t=this.columnWidths.get(this.resizingColumn)||150;this.coColumnResize.emit({field:this.resizingColumn,width:t}),this.suppressNextSort=!0}this.resizingColumn=null,document.removeEventListener("mousemove",c),document.removeEventListener("mouseup",r)};document.addEventListener("mousemove",c),document.addEventListener("mouseup",r)}handleRowClick(t,e){this.coRowClick.emit({row:t,index:e})}handleRowDblClick(t,e){this.coRowDblClick.emit({row:t,index:e})}measureHeaderTruncation(){const t=function(t,e){let a=Object.keys(t).some((t=>!e.has(t)));const o={};return e.forEach(((e,i)=>{const s=function(t){return!!t&&t.scrollWidth>t.clientWidth+1}(e);o[i]=s,!!t[i]!==s&&(a=!0)})),a?o:t}(this.truncatedHeaders,this.headerLabelEls);t!==this.truncatedHeaders&&(this.truncatedHeaders=t)}registerHeaderLabel(t,e){var a,o,i;const s=this.headerLabelEls.get(t);if(e){if(s===e)return;s&&(null===(a=this.headerResizeObserver)||void 0===a||a.unobserve(s)),this.headerLabelEls.set(t,e),null===(o=this.headerResizeObserver)||void 0===o||o.observe(e)}else s&&(null===(i=this.headerResizeObserver)||void 0===i||i.unobserve(s),this.headerLabelEls.delete(t))}handleColumnPin(t,e){e.stopPropagation(),this.coColumnPin.emit({field:t})}handleColumnFilter(t,e){e.stopPropagation();const a=e.currentTarget.getBoundingClientRect();this.coHeaderFilter.emit({field:t,rect:{top:a.top,left:a.left,bottom:a.bottom,right:a.right,width:a.width,height:a.height}})}formatCellValue(t){if(null==t)return"";if("boolean"==typeof t)return t?"Yes":"No";if("string"==typeof t){if(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(t))try{const e=new Date(t);if(!isNaN(e.getTime()))return e.toLocaleDateString("es",{year:"numeric",month:"short",day:"numeric"})+" "+e.toLocaleTimeString("es",{hour:"2-digit",minute:"2-digit"})}catch(t){}return t}return"number"==typeof t?t+"":Array.isArray(t)?t.map((t=>this.formatCellValue(t))).join(", "):"object"==typeof t?t.firstName||t.lastName?[t.firstName,t.lastName].filter(Boolean).join(" "):t.name?t.name+"":t.title?t.title+"":t.label?t.label+"":t.stageName?t.stageName+"":t.companyName?t.companyName+"":t.dealName?t.dealName+"":t._id&&Object.keys(t).length<=3?t._id+"":JSON.stringify(t):t+""}getColumnStyle(t){return Object.assign({},t.sticky?{left:this.selectable?"48px":"0px"}:{})}getColumnWidth(t){return this.columnWidths.get(t.field)||t.width||t.minWidth||150}getTableWidth(){let t=this.selectable?48:0;for(const e of this.parsedColumns)t+=this.getColumnWidth(e);return t}renderColgroup(){return i("colgroup",null,this.selectable&&i("col",{style:{width:"48px"}}),this.parsedColumns.map((t=>i("col",{style:{width:this.getColumnWidth(t)+"px",minWidth:(t.minWidth||80)+"px"}}))))}renderSortIcon(t){if(!t.sortable)return null;const e=this.sortField===t.field&&""!==this.sortOrder;return i("span",{class:{"co-data-table__sort-icon":!0,"co-data-table__sort-icon--active":e}},i("co-icon",{name:e?"asc"===this.sortOrder?"caret-up":"caret-down":"caret-up-down",size:16,weight:e?"fill":"regular"}))}renderHeader(){return i("thead",{class:"co-data-table__head"},i("tr",{class:"co-data-table__header-row"},this.selectable&&i("th",{class:"co-data-table__th co-data-table__th--checkbox co-data-table__th--sticky",style:{left:"0px"}},i("co-checkbox",{size:"small",checked:this.isAllSelected(),indeterminate:this.isSomeSelected(),onCoChange:()=>this.handleSelectAll()})),this.parsedColumns.map(((t,e)=>i("th",{class:{"co-data-table__th":!0,"co-data-table__th--sticky":!!t.sticky,"co-data-table__th--sortable":!!t.sortable,"co-data-table__th--sorted":this.sortField===t.field,["co-data-table__th--align-"+(t.align||"left")]:!0},style:this.getColumnStyle(t),"aria-sort":t.sortable&&this.sortField===t.field&&""!==this.sortOrder?"asc"===this.sortOrder?"ascending":"descending":void 0},i("span",{class:"co-data-table__th-content"},i("span",{class:{"co-data-table__pin-icon":!0,"co-data-table__pin-icon--active":!!t.sticky},title:t.sticky?"Unpin column":"Pin column",onClick:e=>this.handleColumnPin(t.field,e)},i("co-icon",{name:"push-pin",size:14,weight:t.sticky?"fill":"regular"})),t.sortable?i("button",{type:"button",class:"co-data-table__sort-button","aria-label":"Sort by "+t.label,onClick:()=>this.handleSort(t.field)},i("co-tooltip",{block:!0,class:"co-data-table__th-tip",content:t.label,placement:"top",disabled:!this.truncatedHeaders[t.field]},i("span",{class:"co-data-table__th-label",ref:e=>this.registerHeaderLabel(t.field,e)},t.label)),this.renderSortIcon(t)):i("co-tooltip",{block:!0,class:"co-data-table__th-tip",content:t.label,placement:"top",disabled:!this.truncatedHeaders[t.field]},i("span",{class:"co-data-table__th-label",ref:e=>this.registerHeaderLabel(t.field,e)},t.label)),t.filterable&&i("span",{class:{"co-data-table__filter-icon":!0,"co-data-table__filter-icon--active":this.parsedFilteredFields.includes(t.field),"co-data-table__filter-icon--indirect":!this.parsedFilteredFields.includes(t.field)&&this.parsedIndirectFields.includes(t.field)},title:this.parsedFilteredFields.includes(t.field)?"Edit column filter":this.parsedIndirectFields.includes(t.field)?"Filtered by other filters":"Filter column",onClick:e=>this.handleColumnFilter(t.field,e)},i("co-icon",{name:"funnel",size:14,weight:this.parsedFilteredFields.includes(t.field)?"fill":"regular"}))),this.resizable&&e<this.parsedColumns.length-1&&i("span",{class:{"co-data-table__resize-handle":!0,"co-data-table__resize-handle--active":this.resizingColumn===t.field},onMouseDown:e=>this.handleResizeStart(t.field,e),onClick:t=>t.stopPropagation()}))))))}renderSkeletonBody(){return i("tbody",{class:"co-data-table__body co-data-table__body--skeleton","aria-hidden":"true"},Array.from({length:this.skeletonRows}).map(((t,e)=>i("tr",{class:"co-data-table__row co-data-table__row--skeleton",key:"skeleton-"+e},this.selectable&&i("td",{class:"co-data-table__td co-data-table__td--checkbox co-data-table__td--sticky",style:{left:"0px"}},i("div",{class:"co-data-table__skeleton co-data-table__skeleton--checkbox"})),this.parsedColumns.map((t=>i("td",{class:{"co-data-table__td":!0,"co-data-table__td--sticky":!!t.sticky},style:Object.assign({},this.getColumnStyle(t))},i("div",{class:"co-data-table__skeleton"}))))))))}renderEmpty(){return this.loading||this.parsedRows.length>0?null:i("div",{class:"co-data-table__empty",part:"empty"},i("div",{class:"co-data-table__empty-icon"},i("co-icon",{name:this.emptyIcon,size:32,weight:"regular"})),this.emptyTitle&&i("h3",{class:"co-data-table__empty-title"},this.emptyTitle),this.emptyMessage&&i("p",{class:"co-data-table__empty-message"},this.emptyMessage),i("div",{class:"co-data-table__empty-action"},this.emptyActionLabel?i("co-button",{variant:this.emptyActionVariant,size:"m",label:this.emptyActionLabel,iconLeft:this.emptyActionIcon,onClick:()=>this.coEmptyAction.emit()}):i("slot",{name:"empty-action"})))}render(){return i("div",{key:"db627f32da540ce37e30ef6411c29ffc7be6b7fb",class:{"co-data-table":!0,"co-data-table--resizing":null!==this.resizingColumn,"co-data-table--loading":this.loading,"co-data-table--empty":!this.loading&&0===this.parsedRows.length}},i("div",{key:"03c1c7eb194c077716535a73b753db1b1c7ea49f",class:"co-data-table__scroll"},i("table",{key:"6401d8f51d991e434b6798ffa800ec05521408bd",class:"co-data-table__table",style:{width:this.getTableWidth()+"px",minWidth:"100%"}},this.renderColgroup(),this.renderHeader(),i("slot",{key:"ddc92d612b45877c558d2ad8dd567c1ea12d76ef"}),this.loading?this.renderSkeletonBody():null)),this.renderEmpty())}get el(){return this}static get watchers(){return{columns:[{parseColumns:0}],rows:[{parseRows:0}],selectedKeys:[{parseSelectedKeys:0}],filteredFields:[{parseFilteredFields:0}],indirectFilteredFields:[{parseIndirectFields:0}]}}static get style(){return"co-data-table{display:block;flex:1;min-height:0;overflow:hidden;contain:layout}.co-data-table{position:relative;font-family:var(--co-font-family-primary);background:var(--co-color-base-blanco);display:flex;flex-direction:column;height:100%}.co-data-table--resizing{cursor:col-resize;user-select:none}.co-data-table__scroll{flex:1;overflow-x:auto;overflow-y:auto;min-height:0}.co-data-table__table{min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.co-data-table__head{position:sticky;top:0;z-index:2}.co-data-table__header-row{height:40px}.co-data-table__th{position:relative;height:40px;padding:0 var(--co-spacing-md);background:var(--co-color-base-blanco);border-bottom:1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);border-right:1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);text-align:left;vertical-align:middle;font-size:var(--co-font-size-14);font-weight:500;color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;overflow:hidden;box-sizing:border-box}.co-data-table__th:last-child{border-right:none}.co-data-table__th--sortable{cursor:pointer}.co-data-table__th--sortable:hover{background-image:linear-gradient(var(--co-semantic-surface-hover), var(--co-semantic-surface-hover))}.co-data-table__th-content{display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm)}.co-data-table__pin-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-300);cursor:pointer;opacity:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-data-table__pin-icon--active{opacity:1;color:var(--co-semantic-text-default)}.co-data-table__th:hover .co-data-table__pin-icon{opacity:1}.co-data-table__pin-icon:hover{color:var(--co-semantic-text-default)}.co-data-table__filter-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-300);cursor:pointer;opacity:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-data-table__th:hover .co-data-table__filter-icon{opacity:1}.co-data-table__filter-icon:hover{color:var(--co-semantic-text-default)}.co-data-table__filter-icon--active{opacity:1;color:var(--co-color-primary-azul)}.co-data-table__filter-icon--indirect{opacity:0.45;color:var(--co-semantic-text-muted)}.co-data-table__th-tip{flex:1;min-width:0}.co-data-table__th-label{display:block;overflow:hidden;text-overflow:ellipsis}.co-data-table__sort-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-400);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-data-table__sort-icon--active{color:var(--co-semantic-text-default)}.co-data-table__sort-button{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm);background:transparent;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}.co-data-table__sort-button:focus-visible{outline:2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul));outline-offset:-2px;border-radius:var(--co-border-radius-xxs)}.co-data-table__th--checkbox,.co-data-table__td--checkbox{width:48px;min-width:48px;max-width:48px;padding:0 var(--co-spacing-md);text-align:center;line-height:0;}.co-data-table__th.co-data-table__th--checkbox,.co-data-table__td.co-data-table__td--checkbox{border-right:none}.co-data-table__th--sticky,.co-data-table__td--sticky{position:sticky;z-index:1;background:var(--co-color-base-blanco)}.co-data-table__th--sticky{z-index:3}.co-data-table__th.co-data-table__th--sticky,.co-data-table__td.co-data-table__td--sticky{overflow:visible}.co-data-table__td--sticky::after,.co-data-table__th--sticky::after{content:'';position:absolute;top:0;right:-4px;bottom:0;width:4px;pointer-events:none;opacity:0;background:linear-gradient(to right, var(--co-color-opacity-negro-8), transparent);transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-data-table__td--sticky::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-color:var(--co-semantic-surface-hover);opacity:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), background-color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-data-table__row:hover .co-data-table__td--sticky::before{opacity:1}.co-data-table__row--selected .co-data-table__td--sticky::before{opacity:1;background-color:var(--co-color-opacity-negro-4)}.co-data-table__row--selected:hover .co-data-table__td--sticky::before{background-color:var(--co-color-opacity-negro-8)}.co-data-table__resize-handle{position:absolute;top:0;right:-2px;width:5px;height:100%;cursor:col-resize;z-index:1}.co-data-table__resize-handle:hover{background:var(--co-color-primary-azul);opacity:0.3}.co-data-table__resize-handle--active{background:var(--co-color-primary-azul);opacity:0.3}.co-data-table__row{height:48px;transition:background-color var(--co-motion-duration-fast) var(--co-motion-ease-out);content-visibility:auto;contain-intrinsic-size:auto 48px}.co-data-table__row:hover{background:var(--co-semantic-surface-hover)}.co-data-table__row--selected{background:var(--co-color-opacity-negro-4)}.co-data-table__row--selected:hover{background:var(--co-color-opacity-negro-8)}.co-data-table__td{height:48px;padding:0 var(--co-spacing-md);background:transparent;border-bottom:1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);border-right:1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);vertical-align:middle;font-size:var(--co-font-size-12);font-weight:var(--co-font-weight-medium);color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.co-data-table__td:last-child{border-right:none}.co-data-table__th--align-center,.co-data-table__td--align-center{text-align:center}.co-data-table__th--align-right,.co-data-table__td--align-right{text-align:right}.co-data-table__cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.co-data-table--empty .co-data-table__scroll{flex:0 0 auto;overflow:hidden}.co-data-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1;min-height:280px;padding:var(--co-spacing-3xl) var(--co-spacing-lg);gap:var(--co-spacing-lg) }.co-data-table__empty-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-muted);color:var(--co-semantic-text-secondary);margin-bottom:var(--co-spacing-sm)}.co-data-table__empty-title{font-size:var(--co-font-size-24);font-weight:var(--co-font-weight-medium, 500);line-height:1.25;color:var(--co-semantic-text-default);letter-spacing:-0.03em}.co-data-table__empty-message{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);margin:0;max-width:538px ;line-height:1.25}.co-data-table__empty-action{margin-top:var(--co-spacing-md);display:inline-flex}.co-data-table__empty-action:empty{display:none}.co-data-table__skeleton{height:14px;border-radius:var(--co-border-radius-xxs);background:linear-gradient( 90deg, var(--co-semantic-surface-secondary) 0%, var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04)) 50%, var(--co-semantic-surface-secondary) 100% );background-size:200% 100%;animation:co-dt-shimmer 1.2s ease-in-out infinite;width:70%}.co-data-table__skeleton--checkbox{width:16px;height:16px;margin:0 auto}@keyframes co-dt-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){.co-data-table__skeleton{animation:none}}.co-data-table__row--skeleton{pointer-events:none;content-visibility:visible}.co-data-table__row--flash-create{animation:co-dt-flash-create 1s ease-out}.co-data-table__row--flash-update{animation:co-dt-flash-update 1s ease-out}.co-data-table__row--flash-delete{animation:co-dt-flash-delete 0.5s ease-out forwards}@keyframes co-dt-flash-create{0%{background-color:rgba(2, 162, 112, 0.15)}100%{background-color:transparent}}@keyframes co-dt-flash-update{0%{background-color:rgba(37, 99, 235, 0.15)}100%{background-color:transparent}}@keyframes co-dt-flash-delete{0%{opacity:1;background-color:rgba(170, 46, 27, 0.1)}100%{opacity:0;height:0;padding:0;overflow:hidden}}"}},[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"],emptyActionLabel:[1,"empty-action-label"],emptyActionVariant:[1,"empty-action-variant"],emptyActionIcon:[1,"empty-action-icon"],sortField:[1537,"sort-field"],sortOrder:[1537,"sort-order"],filteredFields:[513,"filtered-fields"],indirectFilteredFields:[513,"indirect-filtered-fields"],selectable:[4],selectedKeys:[1025,"selected-keys"],resizable:[4],parsedColumns:[32],parsedRows:[32],parsedSelectedKeys:[32],parsedFilteredFields:[32],parsedIndirectFields:[32],columnWidths:[32],truncatedHeaders:[32],resizingColumn:[32],resizeStartX:[32],resizeStartWidth:[32]},void 0,{columns:[{parseColumns:0}],rows:[{parseRows:0}],selectedKeys:[{parseSelectedKeys:0}],filteredFields:[{parseFilteredFields:0}],indirectFilteredFields:[{parseIndirectFields:0}]}]);function h(){"undefined"!=typeof customElements&&["co-data-table","co-button","co-checkbox","co-icon","co-kbd","co-tooltip"].forEach((e=>{switch(e){case"co-data-table":customElements.get(t(e))||customElements.define(t(e),d);break;case"co-button":customElements.get(t(e))||s();break;case"co-checkbox":customElements.get(t(e))||c();break;case"co-icon":customElements.get(t(e))||r();break;case"co-kbd":customElements.get(t(e))||n();break;case"co-tooltip":customElements.get(t(e))||l()}}))}h();const b=d,p=h;export{b as CoDataTable,p as defineCustomElement}
|
|
1
|
+
import{t,p as e,H as a,c as o,h as i}from"./index.js";import{d as s}from"./p-DhPxNA2f.js";import{d as c}from"./p-BRZci8B3.js";import{d as r}from"./p-KK2vAKs-.js";import{d as n}from"./p-8XzG8pzY.js";import{d as l}from"./p-V7HYy0VO.js";const d=e(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.coSort=o(this,"coSort",7),this.coRowSelect=o(this,"coRowSelect",7),this.coSelectAll=o(this,"coSelectAll",7),this.coColumnResize=o(this,"coColumnResize",7),this.coColumnPin=o(this,"coColumnPin",7),this.coHeaderFilter=o(this,"coHeaderFilter",7),this.coRowDblClick=o(this,"coRowDblClick",7),this.coRowClick=o(this,"coRowClick",7),this.coEmptyAction=o(this,"coEmptyAction",7),this.columns="[]",this.rows="[]",this.rowKey="_id",this.loading=!1,this.skeletonRows=10,this.emptyTitle="",this.emptyMessage="No records found",this.emptyIcon="magnifying-glass",this.emptyActionVariant="stroke",this.sortField="",this.sortOrder="",this.filteredFields="[]",this.indirectFilteredFields="[]",this.selectable=!1,this.selectedKeys="[]",this.resizable=!0,this.parsedColumns=[],this.parsedRows=[],this.parsedSelectedKeys=new Set,this.parsedFilteredFields=[],this.parsedIndirectFields=[],this.columnWidths=new Map,this.headerMeasurePending=!1,this.resizingColumn=null,this.resizeStartX=0,this.resizeStartWidth=0,this.resizeEdgeExtra=0,this.resizeLastClientX=0,this.resizeAutoScrollRaf=0,this.resizePendingScroll=0,this.suppressNextSort=!1}parseColumns(){this.headerMeasurePending=!0;try{const t="string"==typeof this.columns?JSON.parse(this.columns):this.columns;this.parsedColumns=t,t.forEach((t=>{t.width&&!this.columnWidths.has(t.field)&&this.columnWidths.set(t.field,t.width)}))}catch(t){this.parsedColumns=[]}}parseRows(){try{this.parsedRows="string"==typeof this.rows?JSON.parse(this.rows):this.rows}catch(t){this.parsedRows=[]}}parseSelectedKeys(){try{const t="string"==typeof this.selectedKeys?JSON.parse(this.selectedKeys):this.selectedKeys;this.parsedSelectedKeys=new Set(t)}catch(t){this.parsedSelectedKeys=new Set}}parseFilteredFields(){try{this.parsedFilteredFields="string"==typeof this.filteredFields?JSON.parse(this.filteredFields):this.filteredFields||[]}catch(t){this.parsedFilteredFields=[]}}parseIndirectFields(){try{this.parsedIndirectFields="string"==typeof this.indirectFilteredFields?JSON.parse(this.indirectFilteredFields):this.indirectFilteredFields||[]}catch(t){this.parsedIndirectFields=[]}}componentWillLoad(){this.headerLabelEls=new Map,this.truncatedHeaders={},this.parseColumns(),this.parseRows(),this.parseSelectedKeys(),this.parseFilteredFields(),this.parseIndirectFields()}componentDidLoad(){"undefined"!=typeof ResizeObserver&&(this.headerResizeObserver=new ResizeObserver((()=>this.measureHeaderTruncation())),this.headerLabelEls.forEach((t=>this.headerResizeObserver.observe(t)))),this.measureHeaderTruncation()}disconnectedCallback(){var t;null===(t=this.headerResizeObserver)||void 0===t||t.disconnect(),this.headerResizeObserver=void 0}componentDidRender(){if(this.headerMeasurePending&&(this.headerMeasurePending=!1,this.measureHeaderTruncation()),this.resizePendingScroll){const t=this.el.querySelector(".co-data-table__scroll");t&&(t.scrollLeft+=this.resizePendingScroll),this.resizePendingScroll=0}}handleSort(t){if(this.suppressNextSort)return void(this.suppressNextSort=!1);let e;e=this.sortField===t?"asc"===this.sortOrder?"desc":"desc"===this.sortOrder?"":"asc":"asc",this.sortField=""===e?"":t,this.sortOrder=e,this.coSort.emit({field:t,order:e})}isAllSelected(){return 0!==this.parsedRows.length&&this.parsedRows.every((t=>this.parsedSelectedKeys.has(t[this.rowKey]+"")))}isSomeSelected(){if(0===this.parsedRows.length)return!1;const t=this.parsedRows.filter((t=>this.parsedSelectedKeys.has(t[this.rowKey]+""))).length;return t>0&&t<this.parsedRows.length}handleSelectAll(){const t=!this.isAllSelected()&&!this.isSomeSelected();this.coSelectAll.emit({selected:!this.isAllSelected()||t})}handleRowSelect(t){const e=t[this.rowKey]+"",a=!this.parsedSelectedKeys.has(e);this.coRowSelect.emit({key:e,selected:a})}handleResizeStart(t,e){e.preventDefault(),e.stopPropagation(),this.resizingColumn=t,this.resizeStartX=e.clientX,this.resizeStartWidth=this.columnWidths.get(t)||150,this.resizeEdgeExtra=0,this.resizeLastClientX=e.clientX;const a=this.el.querySelector(".co-data-table__scroll"),o=()=>{var t;return(null===(t=this.parsedColumns.find((t=>t.field===this.resizingColumn)))||void 0===t?void 0:t.minWidth)||80},i=()=>{const t=this.resizingColumn;if(!t)return 0;const e=function({startWidth:t,minWidth:e,pointerDelta:a,autoScrollExtra:o}){return Math.max(e,t+a+o)}({startWidth:this.resizeStartWidth,minWidth:o(),pointerDelta:this.resizeLastClientX-this.resizeStartX,autoScrollExtra:this.resizeEdgeExtra});return this.columnWidths=new Map(this.columnWidths.set(t,e)),e},s=()=>{this.resizeAutoScrollRaf=0;const t=this.resizingColumn;if(!t||!a)return;const e=a.getBoundingClientRect(),c=function({pointerX:t,containerLeft:e,containerRight:a,edgeZone:o=72,maxSpeed:i=24}){const s=a-e;if(s<=0)return 0;const c=Math.min(o,s/3),r=a-c;if(t>r)return Math.min(i,(t-r)/c*i);const n=e+c;return t<n?-Math.min(i,(n-t)/c*i):0}({pointerX:this.resizeLastClientX,containerLeft:e.left,containerRight:e.right});c&&(c<0&&(this.columnWidths.get(t)||this.resizeStartWidth)<=o()||(this.resizeEdgeExtra+=c,this.resizePendingScroll+=c,i(),this.resizeAutoScrollRaf=requestAnimationFrame(s)))},c=t=>{this.resizingColumn&&(this.resizeLastClientX=t.clientX,i(),this.resizeAutoScrollRaf||(this.resizeAutoScrollRaf=requestAnimationFrame(s)))},r=()=>{if(this.resizeAutoScrollRaf&&(cancelAnimationFrame(this.resizeAutoScrollRaf),this.resizeAutoScrollRaf=0),this.resizingColumn){const t=this.columnWidths.get(this.resizingColumn)||150;this.coColumnResize.emit({field:this.resizingColumn,width:t}),this.suppressNextSort=!0}this.resizingColumn=null,document.removeEventListener("mousemove",c),document.removeEventListener("mouseup",r)};document.addEventListener("mousemove",c),document.addEventListener("mouseup",r)}handleRowClick(t,e){this.coRowClick.emit({row:t,index:e})}handleRowDblClick(t,e){this.coRowDblClick.emit({row:t,index:e})}measureHeaderTruncation(){const t=function(t,e){let a=Object.keys(t).some((t=>!e.has(t)));const o={};return e.forEach(((e,i)=>{const s=function(t){return!!t&&t.scrollWidth>t.clientWidth+1}(e);o[i]=s,!!t[i]!==s&&(a=!0)})),a?o:t}(this.truncatedHeaders,this.headerLabelEls);t!==this.truncatedHeaders&&(this.truncatedHeaders=t)}registerHeaderLabel(t,e){var a,o,i;const s=this.headerLabelEls.get(t);if(e){if(s===e)return;s&&(null===(a=this.headerResizeObserver)||void 0===a||a.unobserve(s)),this.headerLabelEls.set(t,e),null===(o=this.headerResizeObserver)||void 0===o||o.observe(e)}else s&&(null===(i=this.headerResizeObserver)||void 0===i||i.unobserve(s),this.headerLabelEls.delete(t))}handleColumnPin(t,e){e.stopPropagation(),this.coColumnPin.emit({field:t})}handleColumnFilter(t,e){e.stopPropagation();const a=e.currentTarget.getBoundingClientRect();this.coHeaderFilter.emit({field:t,rect:{top:a.top,left:a.left,bottom:a.bottom,right:a.right,width:a.width,height:a.height}})}formatCellValue(t){if(null==t)return"";if("boolean"==typeof t)return t?"Yes":"No";if("string"==typeof t){if(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(t))try{const e=new Date(t);if(!isNaN(e.getTime()))return e.toLocaleDateString("es",{year:"numeric",month:"short",day:"numeric"})+" "+e.toLocaleTimeString("es",{hour:"2-digit",minute:"2-digit"})}catch(t){}return t}return"number"==typeof t?t+"":Array.isArray(t)?t.map((t=>this.formatCellValue(t))).join(", "):"object"==typeof t?t.firstName||t.lastName?[t.firstName,t.lastName].filter(Boolean).join(" "):t.name?t.name+"":t.title?t.title+"":t.label?t.label+"":t.stageName?t.stageName+"":t.companyName?t.companyName+"":t.dealName?t.dealName+"":t._id&&Object.keys(t).length<=3?t._id+"":JSON.stringify(t):t+""}getColumnStyle(t){return Object.assign({},t.sticky?{left:this.selectable?"48px":"0px"}:{})}getColumnWidth(t){return this.columnWidths.get(t.field)||t.width||t.minWidth||150}getTableWidth(){let t=this.selectable?48:0;for(const e of this.parsedColumns)t+=this.getColumnWidth(e);return t}renderColgroup(){return i("colgroup",null,this.selectable&&i("col",{style:{width:"48px"}}),this.parsedColumns.map((t=>i("col",{style:{width:this.getColumnWidth(t)+"px",minWidth:(t.minWidth||80)+"px"}}))))}renderSortIcon(t){if(!t.sortable)return null;const e=this.sortField===t.field&&""!==this.sortOrder;return i("span",{class:{"co-data-table__sort-icon":!0,"co-data-table__sort-icon--active":e}},i("co-icon",{name:e?"asc"===this.sortOrder?"caret-up":"caret-down":"caret-up-down",size:16,weight:e?"fill":"regular"}))}renderHeader(){return i("thead",{class:"co-data-table__head"},i("tr",{class:"co-data-table__header-row"},this.selectable&&i("th",{class:"co-data-table__th co-data-table__th--checkbox co-data-table__th--sticky",style:{left:"0px"}},i("co-checkbox",{size:"small",checked:this.isAllSelected(),indeterminate:this.isSomeSelected(),onCoChange:()=>this.handleSelectAll()})),this.parsedColumns.map(((t,e)=>i("th",{class:{"co-data-table__th":!0,"co-data-table__th--sticky":!!t.sticky,"co-data-table__th--sortable":!!t.sortable,"co-data-table__th--sorted":this.sortField===t.field,["co-data-table__th--align-"+(t.align||"left")]:!0},style:this.getColumnStyle(t),"aria-sort":t.sortable&&this.sortField===t.field&&""!==this.sortOrder?"asc"===this.sortOrder?"ascending":"descending":void 0},i("span",{class:"co-data-table__th-content"},i("span",{class:{"co-data-table__pin-icon":!0,"co-data-table__pin-icon--active":!!t.sticky},title:t.sticky?"Unpin column":"Pin column",onClick:e=>this.handleColumnPin(t.field,e)},i("co-icon",{name:"push-pin",size:14,weight:t.sticky?"fill":"regular"})),t.sortable?i("button",{type:"button",class:"co-data-table__sort-button","aria-label":"Sort by "+t.label,onClick:()=>this.handleSort(t.field)},i("co-tooltip",{block:!0,class:"co-data-table__th-tip",content:t.label,placement:"top",disabled:!this.truncatedHeaders[t.field]},i("span",{class:"co-data-table__th-label",ref:e=>this.registerHeaderLabel(t.field,e)},t.label)),this.renderSortIcon(t)):i("co-tooltip",{block:!0,class:"co-data-table__th-tip",content:t.label,placement:"top",disabled:!this.truncatedHeaders[t.field]},i("span",{class:"co-data-table__th-label",ref:e=>this.registerHeaderLabel(t.field,e)},t.label)),t.filterable&&i("span",{class:{"co-data-table__filter-icon":!0,"co-data-table__filter-icon--active":this.parsedFilteredFields.includes(t.field),"co-data-table__filter-icon--indirect":!this.parsedFilteredFields.includes(t.field)&&this.parsedIndirectFields.includes(t.field)},title:this.parsedFilteredFields.includes(t.field)?"Edit column filter":this.parsedIndirectFields.includes(t.field)?"Filtered by other filters":"Filter column",onClick:e=>this.handleColumnFilter(t.field,e)},i("co-icon",{name:"funnel",size:14,weight:this.parsedFilteredFields.includes(t.field)?"fill":"regular"}))),this.resizable&&e<this.parsedColumns.length-1&&i("span",{class:{"co-data-table__resize-handle":!0,"co-data-table__resize-handle--active":this.resizingColumn===t.field},onMouseDown:e=>this.handleResizeStart(t.field,e),onClick:t=>t.stopPropagation()}))))))}renderSkeletonBody(){return i("tbody",{class:"co-data-table__body co-data-table__body--skeleton","aria-hidden":"true"},Array.from({length:this.skeletonRows}).map(((t,e)=>i("tr",{class:"co-data-table__row co-data-table__row--skeleton",key:"skeleton-"+e},this.selectable&&i("td",{class:"co-data-table__td co-data-table__td--checkbox co-data-table__td--sticky",style:{left:"0px"}},i("div",{class:"co-data-table__skeleton co-data-table__skeleton--checkbox"})),this.parsedColumns.map((t=>i("td",{class:{"co-data-table__td":!0,"co-data-table__td--sticky":!!t.sticky},style:Object.assign({},this.getColumnStyle(t))},i("div",{class:"co-data-table__skeleton"}))))))))}renderEmpty(){return this.loading||this.parsedRows.length>0?null:i("div",{class:"co-data-table__empty",part:"empty"},i("div",{class:"co-data-table__empty-icon"},i("co-icon",{name:this.emptyIcon,size:32,weight:"regular"})),this.emptyTitle&&i("h3",{class:"co-data-table__empty-title"},this.emptyTitle),this.emptyMessage&&i("p",{class:"co-data-table__empty-message"},this.emptyMessage),i("div",{class:"co-data-table__empty-action"},this.emptyActionLabel?i("co-button",{variant:this.emptyActionVariant,size:"m",label:this.emptyActionLabel,iconLeft:this.emptyActionIcon,onClick:()=>this.coEmptyAction.emit()}):i("slot",{name:"empty-action"})))}render(){return i("div",{key:"db627f32da540ce37e30ef6411c29ffc7be6b7fb",class:{"co-data-table":!0,"co-data-table--resizing":null!==this.resizingColumn,"co-data-table--loading":this.loading,"co-data-table--empty":!this.loading&&0===this.parsedRows.length}},i("div",{key:"03c1c7eb194c077716535a73b753db1b1c7ea49f",class:"co-data-table__scroll"},i("table",{key:"6401d8f51d991e434b6798ffa800ec05521408bd",class:"co-data-table__table",style:{width:this.getTableWidth()+"px",minWidth:"100%"}},this.renderColgroup(),this.renderHeader(),i("slot",{key:"ddc92d612b45877c558d2ad8dd567c1ea12d76ef"}),this.loading?this.renderSkeletonBody():null)),this.renderEmpty())}get el(){return this}static get watchers(){return{columns:[{parseColumns:0}],rows:[{parseRows:0}],selectedKeys:[{parseSelectedKeys:0}],filteredFields:[{parseFilteredFields:0}],indirectFilteredFields:[{parseIndirectFields:0}]}}static get style(){return"co-data-table{display:block;flex:1;min-height:0;overflow:hidden;contain:layout}.co-data-table{position:relative;font-family:var(--co-font-family-primary);background:var(--co-color-base-blanco);display:flex;flex-direction:column;height:100%}.co-data-table--resizing{cursor:col-resize;user-select:none}.co-data-table__scroll{flex:1;overflow-x:auto;overflow-y:auto;min-height:0}.co-data-table__table{min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.co-data-table__head{position:sticky;top:0;z-index:2}.co-data-table__header-row{height:40px}.co-data-table__th{position:relative;height:40px;padding:0 var(--co-spacing-md);background:var(--co-color-base-blanco);border-bottom:1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);border-right:1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);text-align:left;vertical-align:middle;font-size:var(--co-font-size-14);font-weight:500;color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;white-space:nowrap;overflow:hidden;box-sizing:border-box}.co-data-table__th:last-child{border-right:none}.co-data-table__th--sortable{cursor:pointer}.co-data-table__th--sortable:hover{background-image:linear-gradient(var(--co-semantic-surface-hover), var(--co-semantic-surface-hover))}.co-data-table__th-content{display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm)}.co-data-table__pin-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-300);cursor:pointer;opacity:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-data-table__pin-icon--active{opacity:1;color:var(--co-semantic-text-default)}.co-data-table__th:hover .co-data-table__pin-icon{opacity:1}.co-data-table__pin-icon:hover{color:var(--co-semantic-text-default)}.co-data-table__filter-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-300);cursor:pointer;opacity:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-data-table__th:hover .co-data-table__filter-icon{opacity:1}.co-data-table__filter-icon:hover{color:var(--co-semantic-text-default)}.co-data-table__filter-icon--active{opacity:1;color:var(--co-color-primary-azul)}.co-data-table__filter-icon--indirect{opacity:0.45;color:var(--co-semantic-text-muted)}.co-data-table__th-tip{flex:1;min-width:0}.co-data-table__th-label{display:block;overflow:hidden;text-overflow:ellipsis}.co-data-table__sort-icon{display:flex;align-items:center;flex-shrink:0;color:var(--co-color-gray-400);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-data-table__sort-icon--active{color:var(--co-semantic-text-default)}.co-data-table__sort-button{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--co-spacing-sm);background:transparent;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}.co-data-table__sort-button:focus-visible{outline:2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul));outline-offset:-2px;border-radius:var(--co-border-radius-xxs)}.co-data-table__th--checkbox,.co-data-table__td--checkbox{width:48px;min-width:48px;max-width:48px;padding:0 var(--co-spacing-md);text-align:center;line-height:0;}.co-data-table__th.co-data-table__th--checkbox,.co-data-table__td.co-data-table__td--checkbox{border-right:none}.co-data-table__th--sticky,.co-data-table__td--sticky{position:sticky;z-index:1;background:var(--co-color-base-blanco)}.co-data-table__th--sticky{z-index:3}.co-data-table__th.co-data-table__th--sticky,.co-data-table__td.co-data-table__td--sticky{overflow:visible}.co-data-table__td--sticky::after,.co-data-table__th--sticky::after{content:'';position:absolute;top:0;right:-4px;bottom:0;width:4px;pointer-events:none;opacity:0;background:linear-gradient(to right, var(--co-color-opacity-negro-8), transparent);transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-data-table__td--sticky::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-color:var(--co-semantic-surface-hover);opacity:0;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out), background-color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-data-table__row:hover .co-data-table__td--sticky::before{opacity:1}.co-data-table__row--selected .co-data-table__td--sticky::before{opacity:1;background-color:var(--co-color-opacity-negro-4)}.co-data-table__row--selected:hover .co-data-table__td--sticky::before{background-color:var(--co-color-opacity-negro-8)}.co-data-table__resize-handle{position:absolute;top:0;right:-2px;width:5px;height:100%;cursor:col-resize;z-index:1}.co-data-table__resize-handle:hover{background:var(--co-color-primary-azul);opacity:0.3}.co-data-table__resize-handle--active{background:var(--co-color-primary-azul);opacity:0.3}.co-data-table__row{height:48px;transition:background-color var(--co-motion-duration-fast) var(--co-motion-ease-out);content-visibility:auto;contain-intrinsic-size:auto 48px}.co-data-table__row:hover{background:var(--co-semantic-surface-hover)}.co-data-table__row--selected{background:var(--co-color-opacity-negro-4)}.co-data-table__row--selected:hover{background:var(--co-color-opacity-negro-8)}.co-data-table__td{height:48px;padding:0 var(--co-spacing-md);background:transparent;border-bottom:1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);border-right:1px solid color-mix(in srgb, var(--co-semantic-border-default) 75%, transparent);vertical-align:middle;font-size:var(--co-font-size-12);font-weight:var(--co-font-weight-medium);color:var(--co-semantic-text-default);letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}.co-data-table__td:last-child{border-right:none}.co-data-table__th--align-center,.co-data-table__td--align-center{text-align:center}.co-data-table__th--align-right,.co-data-table__td--align-right{text-align:right}.co-data-table__cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.co-data-table--empty .co-data-table__scroll{flex:0 0 auto;overflow:hidden}.co-data-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1;min-height:280px;padding:var(--co-spacing-3xl) var(--co-spacing-lg);gap:var(--co-spacing-lg) }.co-data-table__empty-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-muted);color:var(--co-semantic-text-secondary);margin-bottom:var(--co-spacing-sm)}.co-data-table__empty-title{font-size:var(--co-font-size-24);font-weight:var(--co-font-weight-medium, 500);line-height:1.25;color:var(--co-semantic-text-default);letter-spacing:-0.03em}.co-data-table__empty-message{font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-secondary);margin:0;max-width:538px ;line-height:1.25}.co-data-table__empty-action{margin-top:var(--co-spacing-md);display:inline-flex}.co-data-table__empty-action:empty{display:none}.co-data-table__skeleton{height:14px;border-radius:var(--co-border-radius-xxs);background:linear-gradient( 90deg, var(--co-semantic-surface-secondary) 0%, var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.04)) 50%, var(--co-semantic-surface-secondary) 100% );background-size:200% 100%;animation:co-dt-shimmer 1.2s ease-in-out infinite;width:70%}.co-data-table__skeleton--checkbox{width:16px;height:16px;margin:0 auto}@keyframes co-dt-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){.co-data-table__skeleton{animation:none}}.co-data-table__row--skeleton{pointer-events:none;content-visibility:visible}.co-data-table__row--flash-create{animation:co-dt-flash-create 1s ease-out}.co-data-table__row--flash-update{animation:co-dt-flash-update 1s ease-out}.co-data-table__row--flash-delete{animation:co-dt-flash-delete 0.5s ease-out forwards}@keyframes co-dt-flash-create{0%{background-color:rgba(2, 162, 112, 0.15)}100%{background-color:transparent}}@keyframes co-dt-flash-update{0%{background-color:rgba(37, 99, 235, 0.15)}100%{background-color:transparent}}@keyframes co-dt-flash-delete{0%{opacity:1;background-color:rgba(170, 46, 27, 0.1)}100%{opacity:0;height:0;padding:0;overflow:hidden}}"}},[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"],emptyActionLabel:[1,"empty-action-label"],emptyActionVariant:[1,"empty-action-variant"],emptyActionIcon:[1,"empty-action-icon"],sortField:[1537,"sort-field"],sortOrder:[1537,"sort-order"],filteredFields:[513,"filtered-fields"],indirectFilteredFields:[513,"indirect-filtered-fields"],selectable:[4],selectedKeys:[1025,"selected-keys"],resizable:[4],parsedColumns:[32],parsedRows:[32],parsedSelectedKeys:[32],parsedFilteredFields:[32],parsedIndirectFields:[32],columnWidths:[32],truncatedHeaders:[32],resizingColumn:[32],resizeStartX:[32],resizeStartWidth:[32]},void 0,{columns:[{parseColumns:0}],rows:[{parseRows:0}],selectedKeys:[{parseSelectedKeys:0}],filteredFields:[{parseFilteredFields:0}],indirectFilteredFields:[{parseIndirectFields:0}]}]);function h(){"undefined"!=typeof customElements&&["co-data-table","co-button","co-checkbox","co-icon","co-kbd","co-tooltip"].forEach((e=>{switch(e){case"co-data-table":customElements.get(t(e))||customElements.define(t(e),d);break;case"co-button":customElements.get(t(e))||s();break;case"co-checkbox":customElements.get(t(e))||c();break;case"co-icon":customElements.get(t(e))||r();break;case"co-kbd":customElements.get(t(e))||n();break;case"co-tooltip":customElements.get(t(e))||l()}}))}h();const b=d,p=h;export{b as CoDataTable,p as defineCustomElement}
|