@prolibu-suite/cobalt-core 0.9.4 → 0.9.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 +20 -20
- package/dist/cjs/co-avatar_2.cjs.entry.js +1 -1
- package/dist/cjs/co-file-field.cjs.entry.js +1 -1
- package/dist/cjs/co-ref-field.cjs.entry.js +13 -1
- package/dist/cobalt/cobalt.esm.js +1 -1
- package/dist/cobalt/{p-8b4b3589.entry.js → p-7532c739.entry.js} +1 -1
- package/dist/cobalt/p-76420ac1.entry.js +1 -0
- package/dist/cobalt/{p-0caa059c.entry.js → p-e84eda2e.entry.js} +1 -1
- 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-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-file-field/co-file-field.css +2 -0
- 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 +16 -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 +6 -0
- package/dist/collection/components/co-transfer-list/co-transfer-list.js +1 -1
- package/dist/components/co-autocomplete.js +1 -1
- package/dist/components/co-avatar-group.js +1 -1
- package/dist/components/co-avatar.js +1 -1
- package/dist/components/co-combobox.js +1 -1
- package/dist/components/co-command-search.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-gI62K3Be.js → p-Bz0QZqnB.js} +1 -1
- package/dist/components/{p-C1Kv3zYZ.js → p-DI1ek0EB.js} +1 -1
- package/dist/components/{p-BZIB4JDs.js → p-D_9BRkj6.js} +1 -1
- package/dist/esm/co-avatar_2.entry.js +1 -1
- package/dist/esm/co-file-field.entry.js +1 -1
- package/dist/esm/co-ref-field.entry.js +13 -1
- package/package.json +3 -3
- package/dist/cobalt/p-f00be11f.entry.js +0 -1
|
@@ -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-CQY6Ul7q.js";import{d as r}from"./p-BZIB4JDs.js";import{d as n}from"./p-Bxk96Zgc.js";import{d as l}from"./p-Dj1EZ5qD.js";import{d as h}from"./p-CA_JAK9s.js";import{d as b}from"./p-BH184F0X.js";import{d}from"./p-C1Kv3zYZ.js";import{d as m}from"./p-DP0bbhfN.js";import{d as p}from"./p-gI62K3Be.js";const f=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:"37a1a6c5d14a61e45a522024b1aecf9ef3421cb5",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:"4db14a62bbdbd01088df7279939cce69eb30f9a3",class:"co-combobox__labels"},this.label&&c("label",{key:"294744758ea6e99f1c68c3b612269aa5fb38e838",class:"co-combobox__label",part:"label"},this.label,c(s,{key:"17c9fd9fe7cac0abd1f6b8bee4f31a9e536758fb",required:this.required})),this.secondaryLabel&&c("span",{key:"457e35ca2dd250a7ecd5c36980ced045fb46f319",class:"co-combobox__secondary-label",part:"secondary-label"},this.secondaryLabel)),c("co-popover",{key:"54fdc55762dcf268d1522c345968d39f26fc768e",open:this.isOpen,placement:"bottom-start",matchWidth:!0,offset:4,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},c("div",{key:"0bb104f5e51e7ea5b36d7325e178c7c7eadde05c",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:"ebdfa267be7257aaa2b187fc867cb5d334d91319",name:this.iconLeft,size:16,class:"co-combobox__icon"}),c("div",{key:"77671cfffe0d593242c776316292dec69af64ed6",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:"c230748247efc705f21f299254c24b717d7f5af7",class:"co-combobox__overflow-badge"},this.overflowCount),this.clearable&&this.hasValue&&!this.disabled&&c("button",{key:"b8acd2eeeb17ec672912886e7dfa67abd1026927",class:"co-combobox__clear",type:"button",tabIndex:-1,onClick:this.handleClear,"aria-label":"Clear selection",part:"clear"},c("co-icon",{key:"d21e7dec49db82e5514a1562b60596d51ee69094",name:"x-circle",size:16,weight:"fill"})),c("co-icon",{key:"51becab683f82d56d93599e701025a640822127c",name:this.isOpen?"caret-up":"caret-down",size:16,class:"co-combobox__caret"})),c("div",{key:"8d21ea81c9c5ca9500359f7cedadf12328e4c5eb",class:"co-combobox__dropdown",part:"dropdown"},this.isOpen&&c("co-option-list",{key:"066a18d85a356c238ff9ced3721c1d3280bce4c8",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:"11d5f3fd067ac246e2068bc33a7ef938efef8829",slot:"footer",secondaryLabel:this.footerSecondaryLabel,primaryLabel:this.footerPrimaryLabel,onCoSecondary:this.handleFooterSecondary,onCoPrimary:this.handleFooterPrimary})))),this.helperText&&c("div",{key:"aea733779599bf85e1060062b9664821bcd1f003",class:"co-combobox__helper co-combobox__helper--"+this.status,part:"helper"},this.statusIcon&&c("co-icon",{key:"629698daf7e0005c8849062777daf8b329fe969c",name:this.statusIcon,size:14,weight:"fill",class:"co-combobox__helper-icon"}),c("span",{key:"d91bd4fdadedb2eebbe4a2a3c5d033978cb8db76",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 x(){"undefined"!=typeof customElements&&["co-combobox","co-avatar","co-chip","co-icon","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),f);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-list-footer":customElements.get(i(o))||h();break;case"co-loader":customElements.get(i(o))||b();break;case"co-option-list":customElements.get(i(o))||d();break;case"co-popover":customElements.get(i(o))||m();break;case"co-tooltip":customElements.get(i(o))||p()}}))}f.LIST_ID="co-combobox-list",x();const g=f,u=x;export{g as CoCombobox,u 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-CQY6Ul7q.js";import{d as r}from"./p-D_9BRkj6.js";import{d as n}from"./p-Bxk96Zgc.js";import{d as l}from"./p-Dj1EZ5qD.js";import{d as h}from"./p-CA_JAK9s.js";import{d as b}from"./p-BH184F0X.js";import{d}from"./p-DI1ek0EB.js";import{d as m}from"./p-DP0bbhfN.js";import{d as p}from"./p-Bz0QZqnB.js";const f=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:"37a1a6c5d14a61e45a522024b1aecf9ef3421cb5",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:"4db14a62bbdbd01088df7279939cce69eb30f9a3",class:"co-combobox__labels"},this.label&&c("label",{key:"294744758ea6e99f1c68c3b612269aa5fb38e838",class:"co-combobox__label",part:"label"},this.label,c(s,{key:"17c9fd9fe7cac0abd1f6b8bee4f31a9e536758fb",required:this.required})),this.secondaryLabel&&c("span",{key:"457e35ca2dd250a7ecd5c36980ced045fb46f319",class:"co-combobox__secondary-label",part:"secondary-label"},this.secondaryLabel)),c("co-popover",{key:"54fdc55762dcf268d1522c345968d39f26fc768e",open:this.isOpen,placement:"bottom-start",matchWidth:!0,offset:4,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},c("div",{key:"0bb104f5e51e7ea5b36d7325e178c7c7eadde05c",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:"ebdfa267be7257aaa2b187fc867cb5d334d91319",name:this.iconLeft,size:16,class:"co-combobox__icon"}),c("div",{key:"77671cfffe0d593242c776316292dec69af64ed6",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:"c230748247efc705f21f299254c24b717d7f5af7",class:"co-combobox__overflow-badge"},this.overflowCount),this.clearable&&this.hasValue&&!this.disabled&&c("button",{key:"b8acd2eeeb17ec672912886e7dfa67abd1026927",class:"co-combobox__clear",type:"button",tabIndex:-1,onClick:this.handleClear,"aria-label":"Clear selection",part:"clear"},c("co-icon",{key:"d21e7dec49db82e5514a1562b60596d51ee69094",name:"x-circle",size:16,weight:"fill"})),c("co-icon",{key:"51becab683f82d56d93599e701025a640822127c",name:this.isOpen?"caret-up":"caret-down",size:16,class:"co-combobox__caret"})),c("div",{key:"8d21ea81c9c5ca9500359f7cedadf12328e4c5eb",class:"co-combobox__dropdown",part:"dropdown"},this.isOpen&&c("co-option-list",{key:"066a18d85a356c238ff9ced3721c1d3280bce4c8",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:"11d5f3fd067ac246e2068bc33a7ef938efef8829",slot:"footer",secondaryLabel:this.footerSecondaryLabel,primaryLabel:this.footerPrimaryLabel,onCoSecondary:this.handleFooterSecondary,onCoPrimary:this.handleFooterPrimary})))),this.helperText&&c("div",{key:"aea733779599bf85e1060062b9664821bcd1f003",class:"co-combobox__helper co-combobox__helper--"+this.status,part:"helper"},this.statusIcon&&c("co-icon",{key:"629698daf7e0005c8849062777daf8b329fe969c",name:this.statusIcon,size:14,weight:"fill",class:"co-combobox__helper-icon"}),c("span",{key:"d91bd4fdadedb2eebbe4a2a3c5d033978cb8db76",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 x(){"undefined"!=typeof customElements&&["co-combobox","co-avatar","co-chip","co-icon","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),f);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-list-footer":customElements.get(i(o))||h();break;case"co-loader":customElements.get(i(o))||b();break;case"co-option-list":customElements.get(i(o))||d();break;case"co-popover":customElements.get(i(o))||m();break;case"co-tooltip":customElements.get(i(o))||p()}}))}f.LIST_ID="co-combobox-list",x();const g=f,u=x;export{g as CoCombobox,u as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as a,p as e,H as o,c as t,h as c}from"./index.js";import{r as s}from"./p-CQY6Ul7q.js";import{d as r}from"./p-BZIB4JDs.js";import{d as i}from"./p-Bxk96Zgc.js";import{d as n}from"./p-Dj1EZ5qD.js";import{d}from"./p-BH184F0X.js";import{d as h}from"./p-C1Kv3zYZ.js";import{d as l}from"./p-D6OUW6oW.js";import{d as m}from"./p-gI62K3Be.js";const p=e(class extends o{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.coSelect=t(this,"coSelect",7),this.coClose=t(this,"coClose",7),this.coSearch=t(this,"coSearch",7),this.coScopeChange=t(this,"coScopeChange",1),this.coBackspaceEmpty=t(this,"coBackspaceEmpty",1),this.coChipRemove=t(this,"coChipRemove",1),this.coTabSelect=t(this,"coTabSelect",1),this.coMoreTabs=t(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[c("div",{key:"2fa819f611d5e106367baecd8d0d468ef538abb9",class:"co-command-search__trigger",onClick:this.handleTriggerClick},c("slot",{key:"ee17e409b1253cc447d9813a458c3b123597caa1",name:"trigger"})),c("co-overlay",{key:"57f2be7cc61b9c73d20af7cabe44f27f52da130b",open:this.open,onCoClose:this.handleOverlayClick},c("div",{key:"8e582bca997ca0b0ed0b77a26a2f5bce17540159",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},c("div",{key:"6252fab9df91285b063186c0814a678c2f91aec9",class:"co-command-search__input-row",part:"input-row"},c("co-icon",{key:"4ce68141969cd823f3b6d1e286dcd62609244587",name:"magnifying-glass",size:20}),this.parsedChips.map(((a,e)=>c("span",{class:"co-command-search__facet-chip"},a.icon&&c("co-icon",{name:a.icon,size:12}),c("span",{class:"co-command-search__facet-chip-label"},a.label),c("button",{class:"co-command-search__facet-chip-remove",type:"button","aria-label":"Remove filter "+a.label,onClick:a=>{a.stopPropagation(),this.coChipRemove.emit(e)}},c("co-icon",{name:"x",size:10,weight:"bold"}))))),c("input",{key:"565abed1c59c32ce3336e110cd9da6afadb693b5",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&&c("co-loader",{key:"f84db9e0b3f9c53d8eae6ab6edb790f189b3e49d",class:"co-command-search__loading",part:"loading",size:"sm"}),c("span",{key:"7f9e3b653c9d52d0438fafbb645506f3a7aa7f2c",class:"co-command-search__shortcut"},"ESC")),(this.parsedTabs.length>0||this.hasMore)&&c("div",{key:"fd734ad98b004d5e08f601631d6e2c547ef70dca",class:"co-command-search__tabs",part:"tabs",role:"tablist"},this.parsedTabs.map((a=>{const e=a.value===this.activeTab;return c("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&&c("co-chip",{key:"f5812a94f9f24df93b34abd9588e43b354d6c5e8",class:"co-command-search__tab co-command-search__tab--more",clickable:!0,variant:"outlined",label:this.moreLabel,iconRight:"caret-down",onCoClick:()=>this.coMoreTabs.emit()})),c("div",{key:"b21f950593d51ecb05ffa7f752cd3b8eebf0ef08",class:"co-command-search__results",part:"results"},this.parsedFavorites.length>0&&!this.query&&c("div",{key:"054210475307154dbd369a6468e5bd38a88534a2",class:"co-command-search__fav",part:"favorites"},c("div",{key:"4cc849cf107af9b94cb9715a7d054f6567e75345",class:"co-command-search__fav-grid"},this.parsedFavorites.map((a=>c("button",{class:"co-command-search__fav-card",type:"button",onClick:()=>this.coSelect.emit(a.value)},c("span",{class:"co-command-search__fav-icon",style:{background:a.color||"var(--co-semantic-surface-muted)"}},c("co-icon",{name:a.icon||"circle",size:26,weight:"fill"})),c("span",{class:"co-command-search__fav-label"},a.label)))))),c("co-option-list",{key:"b48e7eb20f3591e8539211343908fa84ca1ebd1f",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 f(){"undefined"!=typeof customElements&&["co-command-search","co-avatar","co-chip","co-icon","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),p);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-loader":customElements.get(a(e))||d();break;case"co-option-list":customElements.get(a(e))||h();break;case"co-overlay":customElements.get(a(e))||l();break;case"co-tooltip":customElements.get(a(e))||m()}}))}f();const b=p,u=f;export{b as CoCommandSearch,u as defineCustomElement}
|
|
1
|
+
import{t as a,p as e,H as o,c as t,h as c}from"./index.js";import{r as s}from"./p-CQY6Ul7q.js";import{d as r}from"./p-D_9BRkj6.js";import{d as i}from"./p-Bxk96Zgc.js";import{d as n}from"./p-Dj1EZ5qD.js";import{d}from"./p-BH184F0X.js";import{d as h}from"./p-DI1ek0EB.js";import{d as l}from"./p-D6OUW6oW.js";import{d as m}from"./p-Bz0QZqnB.js";const p=e(class extends o{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.coSelect=t(this,"coSelect",7),this.coClose=t(this,"coClose",7),this.coSearch=t(this,"coSearch",7),this.coScopeChange=t(this,"coScopeChange",1),this.coBackspaceEmpty=t(this,"coBackspaceEmpty",1),this.coChipRemove=t(this,"coChipRemove",1),this.coTabSelect=t(this,"coTabSelect",1),this.coMoreTabs=t(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[c("div",{key:"2fa819f611d5e106367baecd8d0d468ef538abb9",class:"co-command-search__trigger",onClick:this.handleTriggerClick},c("slot",{key:"ee17e409b1253cc447d9813a458c3b123597caa1",name:"trigger"})),c("co-overlay",{key:"57f2be7cc61b9c73d20af7cabe44f27f52da130b",open:this.open,onCoClose:this.handleOverlayClick},c("div",{key:"8e582bca997ca0b0ed0b77a26a2f5bce17540159",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},c("div",{key:"6252fab9df91285b063186c0814a678c2f91aec9",class:"co-command-search__input-row",part:"input-row"},c("co-icon",{key:"4ce68141969cd823f3b6d1e286dcd62609244587",name:"magnifying-glass",size:20}),this.parsedChips.map(((a,e)=>c("span",{class:"co-command-search__facet-chip"},a.icon&&c("co-icon",{name:a.icon,size:12}),c("span",{class:"co-command-search__facet-chip-label"},a.label),c("button",{class:"co-command-search__facet-chip-remove",type:"button","aria-label":"Remove filter "+a.label,onClick:a=>{a.stopPropagation(),this.coChipRemove.emit(e)}},c("co-icon",{name:"x",size:10,weight:"bold"}))))),c("input",{key:"565abed1c59c32ce3336e110cd9da6afadb693b5",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&&c("co-loader",{key:"f84db9e0b3f9c53d8eae6ab6edb790f189b3e49d",class:"co-command-search__loading",part:"loading",size:"sm"}),c("span",{key:"7f9e3b653c9d52d0438fafbb645506f3a7aa7f2c",class:"co-command-search__shortcut"},"ESC")),(this.parsedTabs.length>0||this.hasMore)&&c("div",{key:"fd734ad98b004d5e08f601631d6e2c547ef70dca",class:"co-command-search__tabs",part:"tabs",role:"tablist"},this.parsedTabs.map((a=>{const e=a.value===this.activeTab;return c("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&&c("co-chip",{key:"f5812a94f9f24df93b34abd9588e43b354d6c5e8",class:"co-command-search__tab co-command-search__tab--more",clickable:!0,variant:"outlined",label:this.moreLabel,iconRight:"caret-down",onCoClick:()=>this.coMoreTabs.emit()})),c("div",{key:"b21f950593d51ecb05ffa7f752cd3b8eebf0ef08",class:"co-command-search__results",part:"results"},this.parsedFavorites.length>0&&!this.query&&c("div",{key:"054210475307154dbd369a6468e5bd38a88534a2",class:"co-command-search__fav",part:"favorites"},c("div",{key:"4cc849cf107af9b94cb9715a7d054f6567e75345",class:"co-command-search__fav-grid"},this.parsedFavorites.map((a=>c("button",{class:"co-command-search__fav-card",type:"button",onClick:()=>this.coSelect.emit(a.value)},c("span",{class:"co-command-search__fav-icon",style:{background:a.color||"var(--co-semantic-surface-muted)"}},c("co-icon",{name:a.icon||"circle",size:26,weight:"fill"})),c("span",{class:"co-command-search__fav-label"},a.label)))))),c("co-option-list",{key:"b48e7eb20f3591e8539211343908fa84ca1ebd1f",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 f(){"undefined"!=typeof customElements&&["co-command-search","co-avatar","co-chip","co-icon","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),p);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-loader":customElements.get(a(e))||d();break;case"co-option-list":customElements.get(a(e))||h();break;case"co-overlay":customElements.get(a(e))||l();break;case"co-tooltip":customElements.get(a(e))||m()}}))}f();const b=p,u=f;export{b as CoCommandSearch,u as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e,p as i,H as o,c as t,h as r}from"./index.js";import{R as a}from"./p-CWneqh4n.js";import{d as s}from"./p-Dj1EZ5qD.js";import{d as l}from"./p-BTQEg3UO.js";import{d as c}from"./p-gI62K3Be.js";const n={es:{uploadButton:"Cargar archivo",dropHint:"Arrastra y suelta archivos aquí",helperBoth:"Puedes subir hasta {n} archivos, cada uno hasta {x}",helperFiles:"Puedes subir hasta {n} archivos",helperBytes:"Cada archivo hasta {x}",uploadedTitle:"Archivos subidos",removeFile:"Eliminar archivo",copyUrl:"Copiar enlace",downloadFile:"Descargar",copied:"Copiado",dragToReorder:"Arrastra para reordenar",openPreview:"Abrir vista previa",errInvalidFormat:"Formato no permitido: .{x}",errTooLarge:"Archivo demasiado grande: {x}",errMaxFiles:"Puedes subir hasta {n} archivos"},en:{uploadButton:"Upload file",dropHint:"Drag and drop files here",helperBoth:"You can upload up to {n} files, each up to {x}",helperFiles:"You can upload up to {n} files",helperBytes:"Each file up to {x}",uploadedTitle:"Uploaded files",removeFile:"Remove file",copyUrl:"Copy link",downloadFile:"Download",copied:"Copied",dragToReorder:"Drag to reorder",openPreview:"Open preview",errInvalidFormat:"Invalid format: .{x}",errTooLarge:"File too large: {x}",errMaxFiles:"You can upload up to {n} files"},pt:{uploadButton:"Carregar arquivo",dropHint:"Arraste e solte arquivos aqui",helperBoth:"Você pode enviar até {n} arquivos, cada um até {x}",helperFiles:"Você pode enviar até {n} arquivos",helperBytes:"Cada arquivo até {x}",uploadedTitle:"Arquivos enviados",removeFile:"Remover arquivo",copyUrl:"Copiar link",downloadFile:"Baixar",copied:"Copiado",dragToReorder:"Arraste para reordenar",openPreview:"Abrir pré-visualização",errInvalidFormat:"Formato inválido: .{x}",errTooLarge:"Arquivo muito grande: {x}",errMaxFiles:"Você pode enviar até {n} arquivos"}};function d(e,i){var o,t;return e.replace("{n}",(null!==(o=i.n)&&void 0!==o?o:"")+"").replace("{x}",null!==(t=i.x)&&void 0!==t?t:"")}function f(e){if(null==e||isNaN(e))return"";if(e<1024)return e+" B";const i=e=>e.toFixed(2).replace(/\.?0+$/,"");return e<1048576?i(e/1024)+" KB":i(e/1048576)+" MB"}const h=new Set(["png","jpg","jpeg","gif","webp","svg","avif","bmp"]);function p(e){const i=(e.name||e.url||"").split("?")[0],o=i.lastIndexOf(".");return o>=0&&h.has(i.slice(o+1).toLowerCase())}function u(e){return"done"===e.status&&(!(!e.thumbnail&&!e.url)&&(!!e.thumbnail||p(e)))}function v(e){return p(e)?e.url||e.thumbnail:e.thumbnail||e.url}const m=i(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coFilesSelected=t(this,"coFilesSelected",3),this.coRemove=t(this,"coRemove",3),this.coClear=t(this,"coClear",3),this.coReorder=t(this,"coReorder",3),this.coCopy=t(this,"coCopy",3),this.coPreviewOpen=t(this,"coPreviewOpen",3),this.disabled=!1,this.readonly=!1,this.required=!1,this.multiple=!1,this.maxFiles=100,this.status="default",this.layout="vertical",this.reorderable=!0,this.files="[]",this.dragOver=!1,this.localError="",this.copiedKey="",this.armedKey="",this.dragKey="",this.overKey="",this.failedPreviews=new Set,this.tempSeq=0,this.lastFilesStr="",this.lastParsed=[],this.handleDragOver=e=>{this.disabled||this.readonly||this.dragKey||(e.preventDefault(),this.dragOver=!0)},this.handleDragLeave=e=>{const i=e.relatedTarget;i&&e.currentTarget instanceof Node&&e.currentTarget.contains(i)||(this.dragOver=!1)},this.handleDrop=e=>{var i;e.preventDefault(),this.dragOver=!1,this.dragKey||(null===(i=e.dataTransfer)||void 0===i?void 0:i.files)&&this.handleFiles(e.dataTransfer.files)},this.handleBrowse=e=>{var i;this.disabled||this.readonly||e&&this.fromActionsSlot(e)||null===(i=this.inputEl)||void 0===i||i.click()},this.handleInputChange=e=>{const i=e.target;i.files&&this.handleFiles(i.files),i.value=""},this.disarmDrag=()=>{this.armedKey&&!this.dragKey&&(this.armedKey="")},this.handleRowDragEnd=()=>{this.resetDragState()}}connectedCallback(){window.addEventListener("mouseup",this.disarmDrag)}disconnectedCallback(){window.removeEventListener("mouseup",this.disarmDrag),clearTimeout(this.copiedTimer),this.closeLightbox()}get parsedFiles(){const e=this.files;if("string"!=typeof e||!e.trim())return[];if(e===this.lastFilesStr)return this.lastParsed;let i=[];try{const o=JSON.parse(e);Array.isArray(o)&&(i=o)}catch(e){}return this.lastFilesStr=e,this.lastParsed=i,i}get strings(){return function(e){return n[function(e){const i=(e||"").toLowerCase();return i.startsWith("es")?"es":i.startsWith("pt")?"pt":"en"}(e)]}(this.locale)}get acceptList(){const e=this.accept;if(!e)return[];let i=[];try{const o=JSON.parse(e);Array.isArray(o)&&(i=o.map(String))}catch(o){i=e.split(",")}return i.map((e=>e.trim().toLowerCase().replace(/^\./,""))).filter((e=>e&&"*"!==e))}get isInvalid(){return"error"===this.status||!!this.localError}get inputAccept(){const e=this.acceptList;if(e.length)return e.map((e=>e.includes("/")?e:"."+e)).join(",")}extOf(e){const i=e.lastIndexOf(".");return i>=0?e.slice(i+1).toLowerCase():""}validate(e){const i=this.acceptList;if(i.length){const o=this.extOf(e.name),t=i.includes(o),r=i.some((i=>i.includes("/")&&e.type===i));if(!t&&!r)return d(this.strings.errInvalidFormat,{x:o})}return this.maxBytes&&e.size>this.maxBytes?d(this.strings.errTooLarge,{x:f(e.size)}):null}handleFiles(e){if(this.disabled||this.readonly)return;this.localError="";const i=Array.from(e);if(!i.length)return;const o=this.multiple?i:i.slice(0,1);if(this.multiple){const e=this.maxFiles-this.parsedFiles.length;if(e<=0)return void(this.localError=d(this.strings.errMaxFiles,{n:this.maxFiles}));o.length>e&&(o.length=e)}const t=[],r=[];for(const e of o){const i=this.validate(e);i?this.localError=i:(t.push(e),r.push(`tmp-${Date.now()}-${this.tempSeq++}`))}t.length&&this.coFilesSelected.emit({files:t,tempIds:r})}fromActionsSlot(e){return e.composedPath().some((e=>{var i,o;return"actions"===(null===(o=(i=e).getAttribute)||void 0===o?void 0:o.call(i,"slot"))}))}keyFor(e){var i;return e.id||e.tempId||`${e.name}:${null!==(i=e.size)&&void 0!==i?i:""}`}handleCopy(e){var i;const o=e.url||"";if(!o)return;const t=this.keyFor(e);this.coCopy.emit({id:t,url:o}),(null===(i=navigator.clipboard)||void 0===i?void 0:i.writeText)&&navigator.clipboard.writeText(o).then((()=>{this.copiedKey=t,clearTimeout(this.copiedTimer),this.copiedTimer=setTimeout((()=>this.copiedKey=""),1500)})).catch((()=>{}))}handlePreviewOpen(e){const i=e.url||e.thumbnail;if(!i)return;this.coPreviewOpen.emit({id:this.keyFor(e),url:i});const o=this.parsedFiles.filter((e=>u(e)&&!this.failedPreviews.has(this.keyFor(e)))),t=o.map((e=>({src:v(e),thumbnail:e.thumbnail,alt:e.name}))),r=Math.max(0,o.findIndex((i=>this.keyFor(i)===this.keyFor(e))));this.closeLightbox();const a=document.createElement("co-lightbox");a.images=JSON.stringify(t),a.startIndex=r,this.locale&&(a.locale=this.locale),a.addEventListener("coClose",(()=>this.closeLightbox())),document.body.appendChild(a),this.lightboxEl=a,requestAnimationFrame((()=>{a.open=!0}))}closeLightbox(){const e=this.lightboxEl;this.lightboxEl=void 0,e&&(e.open=!1,setTimeout((()=>e.remove()),220))}handlePreviewError(e){this.failedPreviews=new Set([...this.failedPreviews,this.keyFor(e)])}handleRowDragStart(e,i){this.armedKey===i?(this.dragKey=i,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",i))):e.preventDefault()}handleRowDragOver(e,i){this.dragKey&&this.dragKey!==i&&(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this.overKey=i)}handleRowDrop(e,i){e.preventDefault(),e.stopPropagation();const o=this.parsedFiles.map((e=>this.keyFor(e))),t=o.indexOf(this.dragKey),r=o.indexOf(i);this.resetDragState(),t<0||r<0||t===r||(o.splice(r,0,...o.splice(t,1)),this.coReorder.emit(o))}resetDragState(){this.armedKey="",this.dragKey="",this.overKey=""}capacityHint(e){const i=this.maxBytes?f(this.maxBytes):"";return this.multiple&&this.maxBytes?d(e.helperBoth,{n:this.maxFiles,x:i}):this.multiple?d(e.helperFiles,{n:this.maxFiles}):this.maxBytes?d(e.helperBytes,{x:i}):""}render(){const e=this.strings,i=this.parsedFiles,o=this.localError||this.helperText,t=!(this.readonly||(this.multiple?this.multiple&&i.length>=this.maxFiles:0!==i.length)),s="default"!==this.status?"co-file-field--"+this.status:"",l=i.filter((e=>u(e)&&!this.failedPreviews.has(this.keyFor(e)))),c=this.reorderable&&this.multiple&&!this.disabled&&!this.readonly&&i.length>1,n=this.capacityHint(e);return r("div",{key:"615291bd9c075d4f26f264602da03427e13bf35b",class:{"co-file-field":!0,"co-file-field--disabled":this.disabled,"co-file-field--invalid":this.isInvalid,[s]:!!s},part:"wrapper"},this.label&&r("div",{key:"0c4fbdb6c5824824bbe39a96c568f06f442955ef",class:"co-file-field__labels"},r("label",{key:"4f8767b17adcd04d553c2cf6668c60c30a780783",class:"co-file-field__label",part:"label"},this.label,r(a,{key:"82fb4a69b136fcdcdd3b3e81ea8d2deb8ca64e10",required:this.required}))),t&&r("div",{key:"bce9efbedf17d917ae4bf00ae839409f63e4cccd",class:{"co-file-field__dropzone":!0,"co-file-field__dropzone--drag":this.dragOver},part:"dropzone",role:"button",tabIndex:this.disabled?-1:0,onClick:this.handleBrowse,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||this.fromActionsSlot(e)||(e.preventDefault(),this.handleBrowse())},onDragOver:this.handleDragOver,onDragLeave:this.handleDragLeave,onDrop:this.handleDrop},r("button",{key:"82c82cf57f9692bc560d4c82e0bc22a539e25e08",class:"co-file-field__upload-btn",part:"upload-button",type:"button",tabIndex:-1},r("co-icon",{key:"e2dc567ce78647717c894c877334e2eecab6b80e",name:"file-arrow-up",size:18}),r("span",{key:"9c0082e62f13a53d5d598623e35678db84df52b3"},this.uploadButtonText||e.uploadButton)),r("span",{key:"3f43f21c3fb54f1d21143aa7cdf9a485ee89cf69",class:"co-file-field__dropzone-text"},this.dropText||e.dropHint),n&&r("span",{key:"d4b2a12ffde1a17c5f1cdded7fb50f035ffb6f0c",class:"co-file-field__dropzone-hint"},n),r("div",{key:"38e36894d82bb094d4dbd37fb10b915607bf3f13",class:"co-file-field__actions",part:"actions"},r("slot",{key:"993f64d18baed0474f29e50418bd5883ac6bc90c",name:"actions"})),r("input",{key:"33dcec562a9c266ca3920537297ddbff2688a0a3",ref:e=>this.inputEl=e,class:"co-file-field__input",type:"file",multiple:this.multiple,accept:this.inputAccept,disabled:this.disabled,onChange:this.handleInputChange,"aria-hidden":"true",tabIndex:-1})),i.length>0&&r("div",{key:"a78a747ee890c15d082c99770c0a8487405301ee",class:"co-file-field__uploaded"},this.multiple&&r("div",{key:"08336c691f85e1c39216779a850e1c4eb4ad92eb",class:"co-file-field__uploaded-title",part:"uploaded-title"},`${this.uploadedTitle||e.uploadedTitle} (${i.length})`),l.length>0&&r("div",{key:"374c52cbaf91ab19d1781c6f4faaed809146aea5",class:"co-file-field__previews",part:"previews"},l.map((i=>r("button",{class:"co-file-field__preview",part:"preview",type:"button",key:"prev-"+this.keyFor(i),title:i.name,"aria-label":e.openPreview,onClick:()=>this.handlePreviewOpen(i)},r("img",{src:i.thumbnail||i.url,alt:i.name,loading:"lazy",onError:()=>this.handlePreviewError(i)}))))),r("ul",{key:"93ab31f0a3567287db8de9b5b00f4e3772988c82",class:"co-file-field__list",part:"list"},i.map((i=>{const o=this.keyFor(i),t=c&&"done"===i.status;return r("li",{class:{"co-file-field__row":!0,["co-file-field__row--"+i.status]:!0,"co-file-field__row--dragging":this.dragKey===o,"co-file-field__row--drop-target":this.overKey===o},part:"row",key:o,draggable:this.armedKey===o,onDragStart:e=>this.handleRowDragStart(e,o),onDragOver:e=>this.handleRowDragOver(e,o),onDrop:e=>this.handleRowDrop(e,o),onDragEnd:this.handleRowDragEnd},t?r("co-tooltip",{content:e.dragToReorder},r("span",{class:"co-file-field__drag-handle",part:"drag-handle",onMouseDown:()=>this.armedKey=o},r("co-icon",{name:"list",size:18}))):r("co-icon",{name:"error"===i.status?"warning-circle":"uploading"===i.status?"spinner-gap":"file",size:18,class:{"co-file-field__row-icon":!0,"co-file-field__row-icon--spin":"uploading"===i.status}}),r("div",{class:"co-file-field__row-body"},r("span",{class:"co-file-field__row-name",title:i.name},function(e,i=35){return!e||e.length<=i?e:"..."+e.slice(-i)}(i.name)),"uploading"===i.status&&r("div",{class:"co-file-field__progress"},r("div",{class:"co-file-field__progress-bar",style:"number"==typeof i.progress?{width:i.progress+"%"}:void 0})),"error"===i.status&&i.error&&r("span",{class:"co-file-field__row-error"},i.error)),null!=i.size&&r("span",{class:"co-file-field__row-size"},f(i.size)),"done"===i.status&&!!i.url&&r("co-tooltip",{content:e.downloadFile},r("a",{class:"co-file-field__action",href:i.url,target:"_blank",rel:"noopener noreferrer",download:i.name,tabIndex:-1,"aria-label":e.downloadFile},r("co-icon",{name:"download",size:18}))),"done"===i.status&&!!i.url&&r("co-tooltip",{content:this.copiedKey===o?e.copied:e.copyUrl},r("button",{class:{"co-file-field__action":!0,"co-file-field__action--copied":this.copiedKey===o},type:"button",tabIndex:-1,"aria-label":e.copyUrl,onClick:()=>this.handleCopy(i)},r("co-icon",{name:this.copiedKey===o?"check":"copy",size:18}))),!this.disabled&&!this.readonly&&r("co-tooltip",{content:e.removeFile},r("button",{class:"co-file-field__action",type:"button",tabIndex:-1,"aria-label":e.removeFile,onClick:()=>this.coRemove.emit(o)},r("co-icon",{name:"trash",size:18}))))})))),o&&r("div",{key:"d05514a8115362aa08a872baaf1293a55048ad79",class:{"co-file-field__helper":!0,"co-file-field__helper--error":this.isInvalid},part:"helper"},this.isInvalid&&r("co-icon",{key:"0e5f2c0feb7dff2da1d549b498ed1e7ae6051448",name:"warning-circle",size:14,class:"co-file-field__helper-icon"}),r("span",{key:"716ea5cc929a44f1da1984952da2bb5a9ce0a791",class:"co-file-field__helper-text"},o)))}get el(){return this}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}.co-file-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-file-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs)}.co-file-field__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-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)')}.co-file-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-spacing-md);padding:var(--co-spacing-4xl) var(--co-spacing-2xl);background:color-mix(in srgb, var(--co-semantic-surface-hover) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px dashed var(--co-semantic-border-field);border-radius:var(--co-border-radius-sm);cursor:pointer;text-align:center;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-file-field__dropzone:hover{border-color:var(--co-semantic-border-focus)}.co-file-field__dropzone--drag{border-color:var(--co-semantic-border-focus);background:var(--co-semantic-surface-hover)}.co-file-field__upload-btn{display:inline-flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-md) var(--co-spacing-xl);margin-bottom:var(--co-spacing-xs);background:var(--co-semantic-surface-secondary);color:var(--co-semantic-text-default);border:none;border-radius:var(--co-border-radius-full);box-shadow:var(--co-shadow-lg);font-family:inherit;font-size:var(--co-font-size-16);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;cursor:pointer;transition:box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-file-field__upload-btn:hover{box-shadow:var(--co-shadow-xl, var(--co-shadow-lg));transform:translateY(-1px)}.co-file-field__upload-btn co-icon{display:inline-flex;flex-shrink:0}.co-file-field__dropzone-text{color:var(--co-semantic-text-default);font-size:var(--co-font-size-18);line-height:1.25}.co-file-field__dropzone-hint{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);line-height:1.25}.co-file-field__actions{display:contents}.co-file-field__input{display:none}.co-file-field__uploaded{display:flex;flex-direction:column;gap:var(--co-spacing-lg);margin-top:var(--co-spacing-sm2)}.co-file-field__uploaded-title{color:var(--co-semantic-text-default);font-size:var(--co-font-size-22);font-weight:500;letter-spacing:-0.03em;line-height:1.25}.co-file-field__previews{display:grid;grid-template-columns:repeat(auto-fill, minmax(150px, 180px));gap:var(--co-spacing-md)}.co-file-field__preview{padding:0;border:none;border-radius:var(--co-border-radius-sm);overflow:hidden;aspect-ratio:3 / 2;background:var(--co-semantic-surface-hover);cursor:pointer}.co-file-field__preview img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-file-field__preview:hover img{transform:scale(1.02)}.co-file-field__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-file-field__row{display:flex;align-items:center;gap:var(--co-spacing-lg);padding:var(--co-spacing-xl);background:var(--co-semantic-surface-hover);border:1px solid transparent;border-radius:var(--co-border-radius-sm)}.co-file-field__row--error{border-color:var(--co-semantic-status-error)}.co-file-field__row--dragging{opacity:0.5}.co-file-field__row--drop-target{border-color:var(--co-semantic-border-focus);background:var(--co-semantic-surface-hover)}.co-file-field__drag-handle{flex-shrink:0;display:flex;align-items:center;color:var(--co-semantic-text-secondary);cursor:grab}.co-file-field__drag-handle:active{cursor:grabbing}.co-file-field__row-icon{flex-shrink:0;color:var(--co-semantic-text-secondary);display:flex;align-items:center}.co-file-field__row--error .co-file-field__row-icon{color:var(--co-semantic-status-error)}.co-file-field__row-icon--spin{animation:co-file-spin 0.8s linear infinite}@keyframes co-file-spin{to{transform:rotate(360deg)}}.co-file-field__row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--co-spacing-xs)}.co-file-field__row-name{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-file-field__row-error{color:var(--co-semantic-status-error);font-size:var(--co-font-size-12)}.co-file-field__row-size{flex-shrink:0;color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1;white-space:nowrap}.co-file-field__progress{position:relative;height:4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-hover);overflow:hidden}.co-file-field__progress-bar{position:absolute;inset:0;width:40%;border-radius:var(--co-border-radius-full);background:var(--co-semantic-status-info);transition:width var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-file-field__progress-bar:not([style]){animation:co-file-indeterminate 1.2s ease-in-out infinite}@keyframes co-file-indeterminate{0%{left:-40%}100%{left:100%}}.co-file-field__action{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-secondary);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-file-field__action:hover{color:var(--co-semantic-text-default)}.co-file-field__action--copied,.co-file-field__action--copied:hover{color:var(--co-color-primary-verde)}.co-file-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-file-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-file-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);line-height:1}.co-file-field--disabled{opacity:0.6;pointer-events:none}.co-file-field--invalid .co-file-field__dropzone,.co-file-field--error .co-file-field__dropzone{border-color:var(--co-semantic-status-error)}.co-file-field__helper--error .co-file-field__helper-icon,.co-file-field__helper--error .co-file-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-file-field{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-file-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-file-field__label{white-space:normal}:host([layout='horizontal']) .co-file-field>:not(.co-file-field__labels){grid-column:2;min-width:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-file-field__dropzone{background:var(--co-semantic-surface-hover)}}"}},[257,"co-file-field",{label:[1],disabled:[4],readonly:[4],required:[4],multiple:[4],accept:[1],maxFiles:[2,"max-files"],maxBytes:[2,"max-bytes"],status:[1],helperText:[1,"helper-text"],layout:[513],locale:[1],uploadButtonText:[1,"upload-button-text"],dropText:[1,"drop-text"],uploadedTitle:[1,"uploaded-title"],reorderable:[4],files:[1],dragOver:[32],localError:[32],copiedKey:[32],armedKey:[32],dragKey:[32],overKey:[32],failedPreviews:[32]}]);function g(){"undefined"!=typeof customElements&&["co-file-field","co-icon","co-lightbox","co-tooltip"].forEach((i=>{switch(i){case"co-file-field":customElements.get(e(i))||customElements.define(e(i),m);break;case"co-icon":customElements.get(e(i))||s();break;case"co-lightbox":customElements.get(e(i))||l();break;case"co-tooltip":customElements.get(e(i))||c()}}))}g();const b=m,_=g;export{b as CoFileField,_ as defineCustomElement}
|
|
1
|
+
import{t as e,p as i,H as o,c as t,h as r}from"./index.js";import{R as a}from"./p-CWneqh4n.js";import{d as s}from"./p-Dj1EZ5qD.js";import{d as l}from"./p-BTQEg3UO.js";import{d as c}from"./p-Bz0QZqnB.js";const n={es:{uploadButton:"Cargar archivo",dropHint:"Arrastra y suelta archivos aquí",helperBoth:"Puedes subir hasta {n} archivos, cada uno hasta {x}",helperFiles:"Puedes subir hasta {n} archivos",helperBytes:"Cada archivo hasta {x}",uploadedTitle:"Archivos subidos",removeFile:"Eliminar archivo",copyUrl:"Copiar enlace",downloadFile:"Descargar",copied:"Copiado",dragToReorder:"Arrastra para reordenar",openPreview:"Abrir vista previa",errInvalidFormat:"Formato no permitido: .{x}",errTooLarge:"Archivo demasiado grande: {x}",errMaxFiles:"Puedes subir hasta {n} archivos"},en:{uploadButton:"Upload file",dropHint:"Drag and drop files here",helperBoth:"You can upload up to {n} files, each up to {x}",helperFiles:"You can upload up to {n} files",helperBytes:"Each file up to {x}",uploadedTitle:"Uploaded files",removeFile:"Remove file",copyUrl:"Copy link",downloadFile:"Download",copied:"Copied",dragToReorder:"Drag to reorder",openPreview:"Open preview",errInvalidFormat:"Invalid format: .{x}",errTooLarge:"File too large: {x}",errMaxFiles:"You can upload up to {n} files"},pt:{uploadButton:"Carregar arquivo",dropHint:"Arraste e solte arquivos aqui",helperBoth:"Você pode enviar até {n} arquivos, cada um até {x}",helperFiles:"Você pode enviar até {n} arquivos",helperBytes:"Cada arquivo até {x}",uploadedTitle:"Arquivos enviados",removeFile:"Remover arquivo",copyUrl:"Copiar link",downloadFile:"Baixar",copied:"Copiado",dragToReorder:"Arraste para reordenar",openPreview:"Abrir pré-visualização",errInvalidFormat:"Formato inválido: .{x}",errTooLarge:"Arquivo muito grande: {x}",errMaxFiles:"Você pode enviar até {n} arquivos"}};function d(e,i){var o,t;return e.replace("{n}",(null!==(o=i.n)&&void 0!==o?o:"")+"").replace("{x}",null!==(t=i.x)&&void 0!==t?t:"")}function f(e){if(null==e||isNaN(e))return"";if(e<1024)return e+" B";const i=e=>e.toFixed(2).replace(/\.?0+$/,"");return e<1048576?i(e/1024)+" KB":i(e/1048576)+" MB"}const h=new Set(["png","jpg","jpeg","gif","webp","svg","avif","bmp"]);function p(e){const i=(e.name||e.url||"").split("?")[0],o=i.lastIndexOf(".");return o>=0&&h.has(i.slice(o+1).toLowerCase())}function u(e){return"done"===e.status&&(!(!e.thumbnail&&!e.url)&&(!!e.thumbnail||p(e)))}function v(e){return p(e)?e.url||e.thumbnail:e.thumbnail||e.url}const m=i(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coFilesSelected=t(this,"coFilesSelected",3),this.coRemove=t(this,"coRemove",3),this.coClear=t(this,"coClear",3),this.coReorder=t(this,"coReorder",3),this.coCopy=t(this,"coCopy",3),this.coPreviewOpen=t(this,"coPreviewOpen",3),this.disabled=!1,this.readonly=!1,this.required=!1,this.multiple=!1,this.maxFiles=100,this.status="default",this.layout="vertical",this.reorderable=!0,this.files="[]",this.dragOver=!1,this.localError="",this.copiedKey="",this.armedKey="",this.dragKey="",this.overKey="",this.failedPreviews=new Set,this.tempSeq=0,this.lastFilesStr="",this.lastParsed=[],this.handleDragOver=e=>{this.disabled||this.readonly||this.dragKey||(e.preventDefault(),this.dragOver=!0)},this.handleDragLeave=e=>{const i=e.relatedTarget;i&&e.currentTarget instanceof Node&&e.currentTarget.contains(i)||(this.dragOver=!1)},this.handleDrop=e=>{var i;e.preventDefault(),this.dragOver=!1,this.dragKey||(null===(i=e.dataTransfer)||void 0===i?void 0:i.files)&&this.handleFiles(e.dataTransfer.files)},this.handleBrowse=e=>{var i;this.disabled||this.readonly||e&&this.fromActionsSlot(e)||null===(i=this.inputEl)||void 0===i||i.click()},this.handleInputChange=e=>{const i=e.target;i.files&&this.handleFiles(i.files),i.value=""},this.disarmDrag=()=>{this.armedKey&&!this.dragKey&&(this.armedKey="")},this.handleRowDragEnd=()=>{this.resetDragState()}}connectedCallback(){window.addEventListener("mouseup",this.disarmDrag)}disconnectedCallback(){window.removeEventListener("mouseup",this.disarmDrag),clearTimeout(this.copiedTimer),this.closeLightbox()}get parsedFiles(){const e=this.files;if("string"!=typeof e||!e.trim())return[];if(e===this.lastFilesStr)return this.lastParsed;let i=[];try{const o=JSON.parse(e);Array.isArray(o)&&(i=o)}catch(e){}return this.lastFilesStr=e,this.lastParsed=i,i}get strings(){return function(e){return n[function(e){const i=(e||"").toLowerCase();return i.startsWith("es")?"es":i.startsWith("pt")?"pt":"en"}(e)]}(this.locale)}get acceptList(){const e=this.accept;if(!e)return[];let i=[];try{const o=JSON.parse(e);Array.isArray(o)&&(i=o.map(String))}catch(o){i=e.split(",")}return i.map((e=>e.trim().toLowerCase().replace(/^\./,""))).filter((e=>e&&"*"!==e))}get isInvalid(){return"error"===this.status||!!this.localError}get inputAccept(){const e=this.acceptList;if(e.length)return e.map((e=>e.includes("/")?e:"."+e)).join(",")}extOf(e){const i=e.lastIndexOf(".");return i>=0?e.slice(i+1).toLowerCase():""}validate(e){const i=this.acceptList;if(i.length){const o=this.extOf(e.name),t=i.includes(o),r=i.some((i=>i.includes("/")&&e.type===i));if(!t&&!r)return d(this.strings.errInvalidFormat,{x:o})}return this.maxBytes&&e.size>this.maxBytes?d(this.strings.errTooLarge,{x:f(e.size)}):null}handleFiles(e){if(this.disabled||this.readonly)return;this.localError="";const i=Array.from(e);if(!i.length)return;const o=this.multiple?i:i.slice(0,1);if(this.multiple){const e=this.maxFiles-this.parsedFiles.length;if(e<=0)return void(this.localError=d(this.strings.errMaxFiles,{n:this.maxFiles}));o.length>e&&(o.length=e)}const t=[],r=[];for(const e of o){const i=this.validate(e);i?this.localError=i:(t.push(e),r.push(`tmp-${Date.now()}-${this.tempSeq++}`))}t.length&&this.coFilesSelected.emit({files:t,tempIds:r})}fromActionsSlot(e){return e.composedPath().some((e=>{var i,o;return"actions"===(null===(o=(i=e).getAttribute)||void 0===o?void 0:o.call(i,"slot"))}))}keyFor(e){var i;return e.id||e.tempId||`${e.name}:${null!==(i=e.size)&&void 0!==i?i:""}`}handleCopy(e){var i;const o=e.url||"";if(!o)return;const t=this.keyFor(e);this.coCopy.emit({id:t,url:o}),(null===(i=navigator.clipboard)||void 0===i?void 0:i.writeText)&&navigator.clipboard.writeText(o).then((()=>{this.copiedKey=t,clearTimeout(this.copiedTimer),this.copiedTimer=setTimeout((()=>this.copiedKey=""),1500)})).catch((()=>{}))}handlePreviewOpen(e){const i=e.url||e.thumbnail;if(!i)return;this.coPreviewOpen.emit({id:this.keyFor(e),url:i});const o=this.parsedFiles.filter((e=>u(e)&&!this.failedPreviews.has(this.keyFor(e)))),t=o.map((e=>({src:v(e),thumbnail:e.thumbnail,alt:e.name}))),r=Math.max(0,o.findIndex((i=>this.keyFor(i)===this.keyFor(e))));this.closeLightbox();const a=document.createElement("co-lightbox");a.images=JSON.stringify(t),a.startIndex=r,this.locale&&(a.locale=this.locale),a.addEventListener("coClose",(()=>this.closeLightbox())),document.body.appendChild(a),this.lightboxEl=a,requestAnimationFrame((()=>{a.open=!0}))}closeLightbox(){const e=this.lightboxEl;this.lightboxEl=void 0,e&&(e.open=!1,setTimeout((()=>e.remove()),220))}handlePreviewError(e){this.failedPreviews=new Set([...this.failedPreviews,this.keyFor(e)])}handleRowDragStart(e,i){this.armedKey===i?(this.dragKey=i,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",i))):e.preventDefault()}handleRowDragOver(e,i){this.dragKey&&this.dragKey!==i&&(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this.overKey=i)}handleRowDrop(e,i){e.preventDefault(),e.stopPropagation();const o=this.parsedFiles.map((e=>this.keyFor(e))),t=o.indexOf(this.dragKey),r=o.indexOf(i);this.resetDragState(),t<0||r<0||t===r||(o.splice(r,0,...o.splice(t,1)),this.coReorder.emit(o))}resetDragState(){this.armedKey="",this.dragKey="",this.overKey=""}capacityHint(e){const i=this.maxBytes?f(this.maxBytes):"";return this.multiple&&this.maxBytes?d(e.helperBoth,{n:this.maxFiles,x:i}):this.multiple?d(e.helperFiles,{n:this.maxFiles}):this.maxBytes?d(e.helperBytes,{x:i}):""}render(){const e=this.strings,i=this.parsedFiles,o=this.localError||this.helperText,t=!(this.readonly||(this.multiple?this.multiple&&i.length>=this.maxFiles:0!==i.length)),s="default"!==this.status?"co-file-field--"+this.status:"",l=i.filter((e=>u(e)&&!this.failedPreviews.has(this.keyFor(e)))),c=this.reorderable&&this.multiple&&!this.disabled&&!this.readonly&&i.length>1,n=this.capacityHint(e);return r("div",{key:"615291bd9c075d4f26f264602da03427e13bf35b",class:{"co-file-field":!0,"co-file-field--disabled":this.disabled,"co-file-field--invalid":this.isInvalid,[s]:!!s},part:"wrapper"},this.label&&r("div",{key:"0c4fbdb6c5824824bbe39a96c568f06f442955ef",class:"co-file-field__labels"},r("label",{key:"4f8767b17adcd04d553c2cf6668c60c30a780783",class:"co-file-field__label",part:"label"},this.label,r(a,{key:"82fb4a69b136fcdcdd3b3e81ea8d2deb8ca64e10",required:this.required}))),t&&r("div",{key:"bce9efbedf17d917ae4bf00ae839409f63e4cccd",class:{"co-file-field__dropzone":!0,"co-file-field__dropzone--drag":this.dragOver},part:"dropzone",role:"button",tabIndex:this.disabled?-1:0,onClick:this.handleBrowse,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||this.fromActionsSlot(e)||(e.preventDefault(),this.handleBrowse())},onDragOver:this.handleDragOver,onDragLeave:this.handleDragLeave,onDrop:this.handleDrop},r("button",{key:"82c82cf57f9692bc560d4c82e0bc22a539e25e08",class:"co-file-field__upload-btn",part:"upload-button",type:"button",tabIndex:-1},r("co-icon",{key:"e2dc567ce78647717c894c877334e2eecab6b80e",name:"file-arrow-up",size:18}),r("span",{key:"9c0082e62f13a53d5d598623e35678db84df52b3"},this.uploadButtonText||e.uploadButton)),r("span",{key:"3f43f21c3fb54f1d21143aa7cdf9a485ee89cf69",class:"co-file-field__dropzone-text"},this.dropText||e.dropHint),n&&r("span",{key:"d4b2a12ffde1a17c5f1cdded7fb50f035ffb6f0c",class:"co-file-field__dropzone-hint"},n),r("div",{key:"38e36894d82bb094d4dbd37fb10b915607bf3f13",class:"co-file-field__actions",part:"actions"},r("slot",{key:"993f64d18baed0474f29e50418bd5883ac6bc90c",name:"actions"})),r("input",{key:"33dcec562a9c266ca3920537297ddbff2688a0a3",ref:e=>this.inputEl=e,class:"co-file-field__input",type:"file",multiple:this.multiple,accept:this.inputAccept,disabled:this.disabled,onChange:this.handleInputChange,"aria-hidden":"true",tabIndex:-1})),i.length>0&&r("div",{key:"a78a747ee890c15d082c99770c0a8487405301ee",class:"co-file-field__uploaded"},this.multiple&&r("div",{key:"08336c691f85e1c39216779a850e1c4eb4ad92eb",class:"co-file-field__uploaded-title",part:"uploaded-title"},`${this.uploadedTitle||e.uploadedTitle} (${i.length})`),l.length>0&&r("div",{key:"374c52cbaf91ab19d1781c6f4faaed809146aea5",class:"co-file-field__previews",part:"previews"},l.map((i=>r("button",{class:"co-file-field__preview",part:"preview",type:"button",key:"prev-"+this.keyFor(i),title:i.name,"aria-label":e.openPreview,onClick:()=>this.handlePreviewOpen(i)},r("img",{src:i.thumbnail||i.url,alt:i.name,loading:"lazy",onError:()=>this.handlePreviewError(i)}))))),r("ul",{key:"93ab31f0a3567287db8de9b5b00f4e3772988c82",class:"co-file-field__list",part:"list"},i.map((i=>{const o=this.keyFor(i),t=c&&"done"===i.status;return r("li",{class:{"co-file-field__row":!0,["co-file-field__row--"+i.status]:!0,"co-file-field__row--dragging":this.dragKey===o,"co-file-field__row--drop-target":this.overKey===o},part:"row",key:o,draggable:this.armedKey===o,onDragStart:e=>this.handleRowDragStart(e,o),onDragOver:e=>this.handleRowDragOver(e,o),onDrop:e=>this.handleRowDrop(e,o),onDragEnd:this.handleRowDragEnd},t?r("co-tooltip",{content:e.dragToReorder},r("span",{class:"co-file-field__drag-handle",part:"drag-handle",onMouseDown:()=>this.armedKey=o},r("co-icon",{name:"list",size:18}))):r("co-icon",{name:"error"===i.status?"warning-circle":"uploading"===i.status?"spinner-gap":"file",size:18,class:{"co-file-field__row-icon":!0,"co-file-field__row-icon--spin":"uploading"===i.status}}),r("div",{class:"co-file-field__row-body"},r("span",{class:"co-file-field__row-name",title:i.name},function(e,i=35){return!e||e.length<=i?e:"..."+e.slice(-i)}(i.name)),"uploading"===i.status&&r("div",{class:"co-file-field__progress"},r("div",{class:"co-file-field__progress-bar",style:"number"==typeof i.progress?{width:i.progress+"%"}:void 0})),"error"===i.status&&i.error&&r("span",{class:"co-file-field__row-error"},i.error)),null!=i.size&&r("span",{class:"co-file-field__row-size"},f(i.size)),"done"===i.status&&!!i.url&&r("co-tooltip",{content:e.downloadFile},r("a",{class:"co-file-field__action",href:i.url,target:"_blank",rel:"noopener noreferrer",download:i.name,tabIndex:-1,"aria-label":e.downloadFile},r("co-icon",{name:"download",size:18}))),"done"===i.status&&!!i.url&&r("co-tooltip",{content:this.copiedKey===o?e.copied:e.copyUrl},r("button",{class:{"co-file-field__action":!0,"co-file-field__action--copied":this.copiedKey===o},type:"button",tabIndex:-1,"aria-label":e.copyUrl,onClick:()=>this.handleCopy(i)},r("co-icon",{name:this.copiedKey===o?"check":"copy",size:18}))),!this.disabled&&!this.readonly&&r("co-tooltip",{content:e.removeFile},r("button",{class:"co-file-field__action",type:"button",tabIndex:-1,"aria-label":e.removeFile,onClick:()=>this.coRemove.emit(o)},r("co-icon",{name:"trash",size:18}))))})))),o&&r("div",{key:"d05514a8115362aa08a872baaf1293a55048ad79",class:{"co-file-field__helper":!0,"co-file-field__helper--error":this.isInvalid},part:"helper"},this.isInvalid&&r("co-icon",{key:"0e5f2c0feb7dff2da1d549b498ed1e7ae6051448",name:"warning-circle",size:14,class:"co-file-field__helper-icon"}),r("span",{key:"716ea5cc929a44f1da1984952da2bb5a9ce0a791",class:"co-file-field__helper-text"},o)))}get el(){return this}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}.co-file-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-file-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs)}.co-file-field__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-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)')}.co-file-field__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--co-spacing-md);padding:var(--co-spacing-4xl) var(--co-spacing-2xl);background:color-mix(in srgb, var(--co-semantic-surface-hover) 55%, transparent);-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));border:1px dashed var(--co-semantic-border-field);border-radius:var(--co-border-radius-sm);cursor:pointer;text-align:center;transition:border-color var(--co-motion-duration-fast) var(--co-motion-ease-out), background var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-file-field__dropzone:hover{border-color:var(--co-semantic-border-focus)}.co-file-field__dropzone--drag{border-color:var(--co-semantic-border-focus);background:var(--co-semantic-surface-hover)}.co-file-field__upload-btn{display:inline-flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-md) var(--co-spacing-xl);margin-bottom:var(--co-spacing-xs);background:var(--co-semantic-surface-secondary);color:var(--co-semantic-text-default);border:none;border-radius:var(--co-border-radius-full);box-shadow:var(--co-shadow-lg);font-family:inherit;font-size:var(--co-font-size-16);font-weight:400;letter-spacing:var(--co-font-letter-spacing-body);line-height:1;cursor:pointer;transition:box-shadow var(--co-motion-duration-fast) var(--co-motion-ease-out), transform var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-file-field__upload-btn:hover{box-shadow:var(--co-shadow-xl, var(--co-shadow-lg));transform:translateY(-1px)}.co-file-field__upload-btn co-icon{display:inline-flex;flex-shrink:0}.co-file-field__dropzone-text{color:var(--co-semantic-text-default);font-size:var(--co-font-size-18);line-height:1.25}.co-file-field__dropzone-hint{color:var(--co-semantic-text-secondary);font-size:var(--co-font-size-14);line-height:1.25}.co-file-field__actions{display:contents}.co-file-field__input{display:none}.co-file-field__uploaded{display:flex;flex-direction:column;gap:var(--co-spacing-lg);margin-top:var(--co-spacing-sm2)}.co-file-field__uploaded-title{color:var(--co-semantic-text-default);font-size:var(--co-font-size-22);font-weight:500;letter-spacing:-0.03em;line-height:1.25}.co-file-field__previews{display:grid;grid-template-columns:repeat(auto-fill, minmax(150px, 180px));gap:var(--co-spacing-md)}.co-file-field__preview{padding:0;border:none;border-radius:var(--co-border-radius-sm);overflow:hidden;aspect-ratio:3 / 2;background:var(--co-semantic-surface-hover);cursor:pointer}.co-file-field__preview img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-file-field__preview:hover img{transform:scale(1.02)}.co-file-field__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-file-field__row{display:flex;align-items:center;gap:var(--co-spacing-lg);padding:var(--co-spacing-xl);background:var(--co-semantic-surface-hover);border:1px solid transparent;border-radius:var(--co-border-radius-sm)}.co-file-field__row--error{border-color:var(--co-semantic-status-error)}.co-file-field__row--dragging{opacity:0.5}.co-file-field__row--drop-target{border-color:var(--co-semantic-border-focus);background:var(--co-semantic-surface-hover)}.co-file-field__drag-handle{flex-shrink:0;display:flex;align-items:center;color:var(--co-semantic-text-secondary);cursor:grab}.co-file-field__drag-handle:active{cursor:grabbing}.co-file-field__row-icon{flex-shrink:0;color:var(--co-semantic-text-secondary);display:flex;align-items:center}.co-file-field__row--error .co-file-field__row-icon{color:var(--co-semantic-status-error)}.co-file-field__row-icon--spin{animation:co-file-spin 0.8s linear infinite}@keyframes co-file-spin{to{transform:rotate(360deg)}}.co-file-field__row-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--co-spacing-xs)}.co-file-field__row-name{color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-file-field__row-error{color:var(--co-semantic-status-error);font-size:var(--co-font-size-12)}.co-file-field__row-size{flex-shrink:0;color:var(--co-semantic-text-default);font-size:var(--co-font-size-14);line-height:1;white-space:nowrap}.co-file-field__progress{position:relative;height:4px;border-radius:var(--co-border-radius-full);background:var(--co-semantic-surface-hover);overflow:hidden}.co-file-field__progress-bar{position:absolute;inset:0;width:40%;border-radius:var(--co-border-radius-full);background:var(--co-semantic-status-info);transition:width var(--co-motion-duration-base) var(--co-motion-ease-out)}.co-file-field__progress-bar:not([style]){animation:co-file-indeterminate 1.2s ease-in-out infinite}@keyframes co-file-indeterminate{0%{left:-40%}100%{left:100%}}.co-file-field__action{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;text-decoration:none;color:var(--co-semantic-text-secondary);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-file-field__action:hover{color:var(--co-semantic-text-default)}.co-file-field__action--copied,.co-file-field__action--copied:hover{color:var(--co-color-primary-verde)}.co-file-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs)}.co-file-field__helper-icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-file-field__helper-text{color:var(--co-semantic-text-muted);font-size:var(--co-font-size-14);line-height:1}.co-file-field--disabled{opacity:0.6;pointer-events:none}.co-file-field--invalid .co-file-field__dropzone,.co-file-field--error .co-file-field__dropzone{border-color:var(--co-semantic-status-error)}.co-file-field__helper--error .co-file-field__helper-icon,.co-file-field__helper--error .co-file-field__helper-text{color:var(--co-semantic-status-error)}:host([layout='horizontal']) .co-file-field{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-file-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-file-field__label{white-space:normal}:host([layout='horizontal']) .co-file-field>:not(.co-file-field__labels){grid-column:2;min-width:0}@supports not (background: color-mix(in srgb, red, transparent)){.co-file-field__dropzone{background:var(--co-semantic-surface-hover)}}"}},[257,"co-file-field",{label:[1],disabled:[4],readonly:[4],required:[4],multiple:[4],accept:[1],maxFiles:[2,"max-files"],maxBytes:[2,"max-bytes"],status:[1],helperText:[1,"helper-text"],layout:[513],locale:[1],uploadButtonText:[1,"upload-button-text"],dropText:[1,"drop-text"],uploadedTitle:[1,"uploaded-title"],reorderable:[4],files:[1],dragOver:[32],localError:[32],copiedKey:[32],armedKey:[32],dragKey:[32],overKey:[32],failedPreviews:[32]}]);function g(){"undefined"!=typeof customElements&&["co-file-field","co-icon","co-lightbox","co-tooltip"].forEach((i=>{switch(i){case"co-file-field":customElements.get(e(i))||customElements.define(e(i),m);break;case"co-icon":customElements.get(e(i))||s();break;case"co-lightbox":customElements.get(e(i))||l();break;case"co-tooltip":customElements.get(e(i))||c()}}))}g();const b=m,_=g;export{b as CoFileField,_ as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t,p as e,H as i,c as s,h as o}from"./index.js";import{d as c}from"./p-Dj1EZ5qD.js";import{d as a}from"./p-
|
|
1
|
+
import{t,p as e,H as i,c as s,h as o}from"./index.js";import{d as c}from"./p-Dj1EZ5qD.js";import{d as a}from"./p-Bz0QZqnB.js";const n=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.coSelect=s(this,"coSelect",7),this.selected=!1,this.disabled=!1,this.dense=!1,this.labelTruncated=!1,this.descTruncated=!1,this.measureTruncation=()=>{const t=!!this.labelEl&&this.labelEl.scrollWidth>this.labelEl.clientWidth+1,e=!!this.descEl&&this.descEl.scrollWidth>this.descEl.clientWidth+1;t!==this.labelTruncated&&(this.labelTruncated=t),e!==this.descTruncated&&(this.descTruncated=e)},this.handleClick=()=>{this.disabled||this.coSelect.emit()},this.handleKeyDown=t=>{this.disabled||"Enter"!==t.key&&" "!==t.key&&"Spacebar"!==t.key||(t.preventDefault(),this.coSelect.emit())}}componentDidLoad(){"undefined"!=typeof ResizeObserver&&(this.ro=new ResizeObserver((()=>this.measureTruncation())),this.labelEl&&this.ro.observe(this.labelEl),this.descEl&&this.ro.observe(this.descEl)),this.measureTruncation()}disconnectedCallback(){var t;null===(t=this.ro)||void 0===t||t.disconnect(),this.ro=void 0}onTextChange(){requestAnimationFrame(this.measureTruncation)}render(){return o("div",{key:"4f75f2a1f42dea993a9b6fa7fe922bed8cbac7e5",class:{"co-list-item":!0,"co-list-item--selected":this.selected,"co-list-item--disabled":this.disabled,"co-list-item--dense":this.dense,"co-list-item--has-description":!!this.description},part:"item",role:"option",tabindex:this.disabled?-1:0,"aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false",onClick:this.handleClick,onKeyDown:this.handleKeyDown},o("span",{key:"f4da4a9cfc3685cd3124c95308857353729fe71e",class:"co-list-item__prefix"},this.icon&&o("co-icon",{key:"640630cb8639d9b897734ceb4fa91b6eddd2a432",name:this.icon,size:18}),o("slot",{key:"300cfc7354b11bce7c94a349d2ec0c6d58bc00da",name:"prefix"})),o("div",{key:"7278c5c18ce4f390e31fc2af8f360de91c2ca644",class:"co-list-item__content"},this.label&&o("co-tooltip",{key:"fb1a48e2364bd34d1940cddda3402c8a114720cc",block:!0,class:"co-list-item__tip",content:this.label,placement:"top",disabled:!this.labelTruncated},o("span",{key:"4079eb57702d8faa93f6dab67ddf3024ba2fea15",class:"co-list-item__label",ref:t=>{this.labelEl=t,t&&this.ro&&this.ro.observe(t)}},this.label)),this.description&&o("co-tooltip",{key:"b40df7e5bec902fad45f79e2984b226302b68d5f",block:!0,class:"co-list-item__tip",content:this.description,placement:"top",disabled:!this.descTruncated},o("span",{key:"2af014c92bbf2d596f7fd78d73309f6cb7813047",class:"co-list-item__description",ref:t=>{this.descEl=t,t&&this.ro&&this.ro.observe(t)}},this.description)),o("slot",{key:"1066c2e56c9855d77e28d891b77602988e70aba4"})),o("span",{key:"c6413614311416a7d06681c7d381a004dfd9891b",class:"co-list-item__suffix"},o("slot",{key:"aff9146f80c9b61c42e1da3926b7b6b8a7eaf1f7",name:"suffix"})))}get el(){return this}static get watchers(){return{label:[{onTextChange:0}],description:[{onTextChange:0}]}}static get style(){return":host{display:block}.co-list-item{display:flex;align-items:center;gap:var(--co-spacing-md);padding:var(--co-spacing-md) var(--co-spacing-lg);font-family:var(--co-font-family-primary);cursor:pointer;border-radius:var(--co-border-radius-sm);transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box;min-height:40px}.co-list-item--dense{gap:var(--co-spacing-sm);padding:6px var(--co-spacing-sm);border-radius:var(--co-border-radius-xxs);min-height:32px}.co-list-item--dense .co-list-item__label{font-size:var(--co-font-size-14)}.co-list-item:hover:not(.co-list-item--disabled){background:var(--co-semantic-surface-hover)}.co-list-item:focus-visible{outline:none;box-shadow:0 0 0 2px var(--co-semantic-border-focus)}.co-list-item--selected{background:var(--co-semantic-surface-muted)}.co-list-item--disabled{opacity:0.4;cursor:not-allowed}.co-list-item__prefix,.co-list-item__suffix{display:flex;align-items:center;gap:var(--co-spacing-sm);flex-shrink:0;color:var(--co-semantic-text-muted)}.co-list-item__prefix:empty,.co-list-item__suffix:empty{display:none}.co-list-item__content{display:flex;flex-direction:column;flex:1;min-width:0}.co-list-item__content>.co-list-item__tip{min-width:0;max-width:100%}.co-list-item__label{display:block;font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-default);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-list-item__description{display:block;font-size:var(--co-font-size-12);color:var(--co-semantic-text-muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"}},[257,"co-list-item",{label:[1],description:[1],icon:[1],selected:[516],disabled:[4],dense:[516],labelTruncated:[32],descTruncated:[32]},void 0,{label:[{onTextChange:0}],description:[{onTextChange:0}]}]);function l(){"undefined"!=typeof customElements&&["co-list-item","co-icon","co-tooltip"].forEach((e=>{switch(e){case"co-list-item":customElements.get(t(e))||customElements.define(t(e),n);break;case"co-icon":customElements.get(t(e))||c();break;case"co-tooltip":customElements.get(t(e))||a()}}))}l();const d=n,r=l;export{d as CoListItem,r as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{C as o,d as s}from"./p-
|
|
1
|
+
import{C as o,d as s}from"./p-DI1ek0EB.js";const p=o,r=s;export{p as CoOptionList,r as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,H as i,c as o,h as t,t as r}from"./index.js";import{R as s}from"./p-CWneqh4n.js";import{F as a}from"./p-C4U2tbRp.js";import{i as c,d as l}from"./p-BZIB4JDs.js";import{d as n}from"./p-Dj1EZ5qD.js";import{d as f}from"./p-BH184F0X.js";import{d}from"./p-C1Kv3zYZ.js";import{d as h}from"./p-DP0bbhfN.js";import{d as p}from"./p-gI62K3Be.js";const g=e(class e extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coChange=o(this,"coChange",7),this.coClear=o(this,"coClear",7),this.coSearch=o(this,"coSearch",7),this.coLoadMore=o(this,"coLoadMore",7),this.coOpen=o(this,"coOpen",3),this.coClose=o(this,"coClose",3),this.coRemove=o(this,"coRemove",7),this.coFooterPrimary=o(this,"coFooterPrimary",7),this.coFooterSecondary=o(this,"coFooterSecondary",7),this.coPinToggle=o(this,"coPinToggle",7),this.coListReorder=o(this,"coListReorder",7),this.coEditSelected=o(this,"coEditSelected",7),this.required=!1,this.placeholder="Select…",this.disabled=!1,this.clearable=!0,this.editable=!1,this.editLabel="Edit",this.multiple=!1,this.status="default",this.layout="vertical",this.size="md",this.variant="default",this.value="",this.options="[]",this.selectedDisplay="[]",this.loading=!1,this.total=0,this.searchable=!0,this.searchPlaceholder="Search…",this.searchDebounce=350,this.emptyMessage="No results found",this.showFooter=!1,this.footerPrimaryLabel="Ok",this.footerSecondaryLabel="New",this.maxChips=0,this.panelTheme="auto",this.colorMode="dot",this.triggerBadgeIcon="",this.triggerBadgeLabel="",this.avatarShape="circle",this.pinnable=!1,this.listReorderable=!1,this.isOpen=!1,this.overflowCount=0,this.lastChipsKey="\0",this.pendingFocus=!1,this.handlePopoverOpen=()=>{this.isOpen=!0},this.handlePopoverClose=()=>{this.isOpen=!1},this.handleTriggerClick=e=>{this.disabled&&e.stopPropagation()},this.handleTriggerKeyDown=e=>{this.disabled||e.target===this.triggerEl&&("Enter"===e.key||" "===e.key?(e.preventDefault(),this.isOpen=!this.isOpen):"ArrowDown"!==e.key||this.isOpen||(e.preventDefault(),this.isOpen=!0))},this.handleListChange=e=>{if(!this.multiple&&null===e.value)return this.value="",this.coClear.emit(),void(this.isOpen=!1);this.handleOptionClick(e.item)},this.handleOptionClick=e=>{if(this.multiple){const i=this.parsedValue;let o;o=i.indexOf(e._id)>=0?i.filter((i=>i!==e._id)):[...i,e._id],this.value=JSON.stringify(o),this.coChange.emit({value:o,item:e})}else this.value=e._id,this.coChange.emit({value:e._id,item:e}),this.isOpen=!1},this.handleReorder=e=>{this.value=JSON.stringify(e.value),this.coChange.emit({value:e.value,item:e.item})},this.handleClear=e=>{e.stopPropagation(),this.value=this.multiple?"[]":"",this.coClear.emit()},this.handleEditClick=e=>{e.stopPropagation();const i=this.effectiveDisplayItems[0];i&&this.coEditSelected.emit(i._id)},this.handleRemoveChip=(e,i)=>{i.stopPropagation();const o=this.parsedValue.filter((i=>i!==e));this.value=JSON.stringify(o),this.coRemove.emit(e)},this.handleFooterPrimary=()=>{this.coFooterPrimary.emit(),this.isOpen=!1},this.handleFooterSecondary=()=>{this.coFooterSecondary.emit()}}get normalizedSize(){return"default"===this.size?"md":this.size}get parsedOptions(){try{const e="string"==typeof this.options?JSON.parse(this.options):this.options;return Array.isArray(e)?e:[]}catch(e){return[]}}get parsedSelectedDisplay(){try{const e="string"==typeof this.selectedDisplay?JSON.parse(this.selectedDisplay):this.selectedDisplay;return Array.isArray(e)?e:[]}catch(e){return[]}}get effectiveDisplayItems(){const e=this.parsedValue;if(0===e.length)return[];const i=new Map;for(const e of this.parsedSelectedDisplay)i.set(e._id,e);for(const e of this.parsedOptions)i.has(e._id)||i.set(e._id,{_id:e._id,label:e.label,description:e.description,color:e.color,avatar:e.avatar,image:e.image});return e.map((e=>i.get(e))).filter(Boolean)}get parsedValue(){if(!this.value)return[];try{const e=JSON.parse(this.value);return Array.isArray(e)?e:[this.value]}catch(e){return this.value?[this.value]:[]}}connectedCallback(){this.resizeObserver=new ResizeObserver((()=>this.calcOverflow()))}componentDidRender(){var e,i,o,t;this.chipsEl!==this.observedChipsEl&&(null===(e=this.resizeObserver)||void 0===e||e.disconnect(),this.chipsEl&&(null===(i=this.resizeObserver)||void 0===i||i.observe(this.chipsEl)),this.observedChipsEl=this.chipsEl);const r=null===(o=this.chipsEl)||void 0===o?void 0:o.querySelectorAll(".co-ref-field__chip"),s=r?Array.from(r,(e=>e.textContent)).join(""):"";s!==this.lastChipsKey&&(this.lastChipsKey=s,this.calcOverflow()),this.pendingFocus&&(null===(t=this.optionListEl)||void 0===t?void 0:t.isConnected)&&(this.pendingFocus=!1,this.optionListEl.focusSearch())}disconnectedCallback(){var e;null===(e=this.resizeObserver)||void 0===e||e.disconnect()}calcOverflow(){if(!this.multiple||this.maxChips>0||!this.chipsEl)return void(0!==this.overflowCount&&(this.overflowCount=0));const e=Array.from(this.chipsEl.querySelectorAll(".co-ref-field__chip"));if(0===e.length)return void(0!==this.overflowCount&&(this.overflowCount=0));const i=this.chipsEl.getBoundingClientRect().right;let o=0;for(let t=e.length-1;t>=0&&e[t].getBoundingClientRect().right>i+1;t--)o++;o!==this.overflowCount&&(this.overflowCount=o)}onOpenChange(e){e?(this.coOpen.emit(),this.pendingFocus=!0):(this.coClose.emit(),this.restoreTriggerFocus())}restoreTriggerFocus(){var e;const i=document.activeElement;(i===this.el||this.el.contains(i))&&(null===(e=this.triggerEl)||void 0===e||e.focus())}renderTrigger(){const i=this.effectiveDisplayItems,o=i.length>0;return t("div",{class:{"co-ref-field__trigger":!0,"co-ref-field--open":this.isOpen,"co-ref-field--disabled":this.disabled,["co-ref-field--"+this.normalizedSize]:!0,["co-ref-field--"+this.status]:"default"!==this.status,"co-ref-field--flat":"flat"===this.variant},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?e.LIST_ID:void 0,tabIndex:this.disabled?-1:0,ref:e=>this.triggerEl=e,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown},this.iconLeft&&t("span",{class:"co-ref-field__icon"},t("co-icon",{name:this.iconLeft,size:16})),t("div",{class:"co-ref-field__value"},!o&&t("span",{class:"co-ref-field__placeholder",part:"trigger-placeholder"},this.placeholder),o&&!this.multiple&&this.renderSingleValue(i[0]),o&&this.multiple&&this.renderMultipleValue(i)),o&&this.triggerBadgeIcon&&t("span",{class:"co-ref-field__trigger-badge",part:"trigger-badge",role:"img",title:this.triggerBadgeLabel||void 0,"aria-label":this.triggerBadgeLabel||void 0},t("co-icon",{name:this.triggerBadgeIcon,size:11,weight:"fill"})),o&&!this.multiple&&this.editable&&!this.disabled&&t("button",{class:"co-ref-field__edit",part:"trigger-edit",tabIndex:-1,onClick:this.handleEditClick,type:"button",title:this.editLabel||void 0,"aria-label":this.editLabel||void 0},t("co-icon",{name:"pencil-simple",size:14})),o&&this.clearable&&!this.disabled&&t("button",{class:"co-ref-field__clear",part:"trigger-clear",tabIndex:-1,onClick:this.handleClear,type:"button"},t("co-icon",{name:"x",size:14})),t("span",{class:"co-ref-field__caret",part:"trigger-chevron"},t("co-icon",{name:"caret-up-down",size:16})))}renderItemAvatar(e){return e.image||e.avatar?t("co-avatar",{class:"co-ref-field__avatar",type:e.image?"image":"text",src:e.image,text:e.avatar,color:e.color,size:"xxs",shape:this.avatarShape}):e.color?t("span",{class:"co-ref-field__color-dot",style:{backgroundColor:e.color}}):null}renderSingleValue(e){return t("div",{class:"co-ref-field__selected"},this.renderItemAvatar(e),t("span",{class:"co-ref-field__selected-label",part:"trigger-text"},e.label))}renderMultipleValue(e){const i=this.maxChips>0,o=Math.min(this.overflowCount,Math.max(0,e.length-1)),r=i?e.slice(0,this.maxChips):e,s=i?e.length-this.maxChips:o,l=e.length-(i?0:o);return t("div",{class:"co-ref-field__chips-row"},t("div",{class:"co-ref-field__chips",ref:e=>this.chipsEl=e},r.map(((e,o)=>{const r="fill"===this.colorMode&&!!e.color&&!(e.image||e.avatar);return t(a,{key:e._id,baseClass:"co-ref-field__chip",label:e.label,modifiers:{"co-ref-field__chip--avatar":!(!e.image&&!e.avatar),"co-ref-field__chip--fill":r,"co-ref-field__chip--fill-light":r&&c(e.color),"co-ref-field__chip--clipped":!i&&o>=l,["co-ref-field__chip--"+this.normalizedSize]:!0},style:r?{backgroundColor:e.color}:void 0,onRemove:i=>this.handleRemoveChip(e._id,i)},e.image||e.avatar?this.renderItemAvatar(e):e.color&&!r?t("span",{class:"co-ref-field__chip-dot",style:{backgroundColor:e.color}}):null)}))),s>0&&t("span",{class:"co-ref-field__chip-overflow"},"+",s))}renderPanel(){return t("div",{class:{"co-ref-field__panel":!0,"co-ref-field__panel--dark":"dark"===this.panelTheme,"co-ref-field__panel--light":"light"===this.panelTheme},style:this.panelWidth?{width:this.panelWidth}:void 0},t("co-option-list",{id:e.LIST_ID,ref:e=>this.optionListEl=e,items:"string"==typeof this.options?this.options:JSON.stringify(this.options),value:this.value,selectedItems:"string"==typeof this.selectedDisplay?this.selectedDisplay:JSON.stringify(this.selectedDisplay),multiple:this.multiple,selectedFirst:this.multiple,reorderable:this.multiple,pinnable:this.pinnable,listReorderable:this.listReorderable,selectedAffordance:"deselect",searchable:this.searchable,searchPlaceholder:this.searchPlaceholder,searchDebounce:this.searchDebounce,loading:this.loading,total:this.total,emptyMessage:this.emptyMessage,avatarShape:this.avatarShape,onCoSearch:e=>this.coSearch.emit(e.detail),onCoChange:e=>this.handleListChange(e.detail),onCoReorder:e=>this.handleReorder(e.detail),onCoPinToggle:e=>this.coPinToggle.emit(e.detail),onCoListReorder:e=>this.coListReorder.emit(e.detail),onCoLoadMore:()=>this.coLoadMore.emit()},t("slot",{name:"panel-footer",slot:"footer"}),this.showFooter&&t("div",{class:"co-ref-field__footer",slot:"footer"},this.footerSecondaryLabel&&t("button",{class:"co-ref-field__footer-btn co-ref-field__footer-btn--secondary",type:"button",onClick:this.handleFooterSecondary},t("co-icon",{name:"plus",size:16}),t("span",null,this.footerSecondaryLabel)),t("button",{class:"co-ref-field__footer-btn co-ref-field__footer-btn--primary",type:"button",onClick:this.handleFooterPrimary},t("co-icon",{name:"check",size:16}),t("span",null,this.footerPrimaryLabel)))))}render(){return t("div",{key:"6bfad2357faa70a7fe4d71aa61b8eaab589c26f2",class:"co-ref-field"},(this.label||this.secondaryLabel)&&t("div",{key:"0de5d626d21c9cc3d96b7c39da180369bfd2b228",class:"co-ref-field__labels"},this.label&&t("label",{key:"ae25a6e7630ce52208ae0d13c0228fa0cac9496d",class:"co-ref-field__label"},this.labelIcon&&t("co-icon",{key:"bce6b7a835f291d658eab0ca3589d39bf5ab7d5c",class:"co-ref-field__label-icon",name:this.labelIcon,size:16}),this.label,t(s,{key:"84f6a8d95f46674717e1b7e5699790b317a69a67",required:this.required})),this.secondaryLabel&&t("span",{key:"f9bbcdcb833a0347b2b2ee050e1ba58f95bb3d40",class:"co-ref-field__secondary-label"},this.secondaryLabel)),t("co-popover",{key:"18ac882e39908cd9fdda86d70ed750faca8bc8d1",open:this.isOpen,placement:"bottom-start",matchWidth:!this.panelWidth,offset:4,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},t("div",{key:"e542d937f4738a7199f38057986931a21fc8462f",slot:"trigger"},this.renderTrigger()),this.isOpen&&this.renderPanel()),this.helperText&&t("div",{key:"f75928e549c2c1f6f5f0589e105c00b71e85f661",class:"co-ref-field__helper co-ref-field__helper--"+this.status},"default"!==this.status&&t("co-icon",{key:"1f329a60a6b03fdfc77361c8c2287cc55369764f",name:"error"===this.status?"warning-circle":"success"===this.status?"check-circle":"info",size:14}),t("span",{key:"5fa6dbe648f63789c496081c9197eac7ac89c9b3"},this.helperText)))}get el(){return this}static get watchers(){return{isOpen:[{onOpenChange:0}]}}static get style(){return":host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-ref-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-ref-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-ref-field__label{display:inline-flex;align-items:center;color:var(--co-ref-field-label-color, var(--co-semantic-text-secondary));font-family:var(--co-ref-field-label-font-family, var(--co-font-family-primary));font-size:var(--co-ref-field-label-font-size, var(--co-font-size-14));font-weight:var(--co-ref-field-label-font-weight, 400);line-height:1;white-space:nowrap;cursor:default;text-transform:var(--co-ref-field-label-text-transform, none);letter-spacing:var(--co-ref-field-label-letter-spacing, var(--co-font-letter-spacing-body))}.co-ref-field__secondary-label{color:var(--co-semantic-text-muted);font-family:var(--co-font-family-mono);font-size:var(--co-font-size-12);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-ref-field__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-ref-field-trigger-bg, var(--co-semantic-surface-page));border:1px solid var(--co-ref-field-trigger-border-color, 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)}.co-ref-field--flat{background:transparent;border-color:transparent}.co-ref-field--s{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-ref-field--sm{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-ref-field--lg{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-ref-field--open{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-ref-field__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-ref-field--disabled{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-ref-field--error{border-color:var(--co-semantic-status-error)}.co-ref-field--success{border-color:var(--co-semantic-status-success)}.co-ref-field--warning{border-color:var(--co-color-status-review)}.co-ref-field--s .co-ref-field__selected{--co-avatar-size:20px}.co-ref-field--sm .co-ref-field__selected{--co-avatar-size:22px}.co-ref-field--md .co-ref-field__selected{--co-avatar-size:22px}.co-ref-field--lg .co-ref-field__selected{--co-avatar-size:28px}.co-ref-field__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-ref-field__label-icon{flex-shrink:0;margin-right:var(--co-spacing-xs);color:var(--co-semantic-text-secondary)}.co-ref-field__value{flex:1;min-width:0;display:flex;align-items:center}.co-ref-field__placeholder{color:var(--co-semantic-text-muted);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-ref-field__trigger-badge{flex-shrink:0;display:grid;place-items:center;width:18px;height:18px;border-radius:var(--co-border-radius-xxs);background:var(--co-ref-field-trigger-badge-bg, rgba(0, 0, 0, 0.22));color:var(--co-semantic-text-default)}.co-ref-field__clear{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-ref-field__clear:hover{color:var(--co-semantic-text-default)}.co-ref-field__edit{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-ref-field__edit:hover{color:var(--co-semantic-text-default)}.co-ref-field__selected{display:flex;align-items:center;gap:var(--co-spacing-sm);min-width:0}.co-ref-field__color-dot{width:10px;height:10px;min-width:10px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__avatar{flex-shrink:0}.co-ref-field__selected-label{color:var(--co-semantic-text-default);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__chips-row{flex:1;min-width:0;display:flex;align-items:center;gap:var(--co-spacing-xs)}.co-ref-field__chips{flex:1;min-width:0;display:flex;flex-wrap:nowrap;overflow:hidden;gap:var(--co-spacing-xs);align-items:center}.co-ref-field__chip{display:inline-flex;align-items:center;gap:var(--co-spacing-sm);padding:0 var(--co-spacing-sm2);background:var(--co-color-gray-100);border-radius:var(--co-border-radius-full);line-height:1;max-width:min(160px, 100%);flex-shrink:0}.co-ref-field__chip--avatar{padding-left:var(--co-spacing-xxs)}.co-ref-field__chip--s{min-height:20px;--co-avatar-size:20px;font-size:var(--co-font-size-12)}.co-ref-field__chip--sm{min-height:22px;--co-avatar-size:22px;font-size:var(--co-font-size-12)}.co-ref-field__chip--md{min-height:22px;--co-avatar-size:22px;font-size:var(--co-font-size-14)}.co-ref-field__chip--lg{min-height:28px;--co-avatar-size:28px;font-size:var(--co-font-size-14)}.co-ref-field__chip--clipped{visibility:hidden}.co-ref-field__chip-dot{width:8px;height:8px;min-width:8px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__chip--fill{color:var(--co-color-base-blanco);border-radius:var(--co-spacing-sm)}.co-ref-field__chip--fill-light{color:var(--co-color-base-negro)}.co-ref-field__chip--fill .co-ref-field__chip-label,.co-ref-field__chip--fill .co-ref-field__chip-remove{color:inherit}.co-ref-field__chip--fill .co-ref-field__chip-remove{opacity:0.72}.co-ref-field__chip--fill .co-ref-field__chip-remove:hover{color:inherit;opacity:1}.co-ref-field__chip-label{color:var(--co-semantic-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.co-ref-field__chip-remove{display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-color-gray-500);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out);flex-shrink:0}.co-ref-field__chip-remove:hover{color:var(--co-semantic-text-default)}.co-ref-field__chip-overflow{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs) var(--co-spacing-sm);background:var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-12);font-weight:600;color:var(--co-semantic-text-secondary);line-height:1}.co-ref-field__panel{display:flex;flex-direction:column;border-radius:var(--co-border-radius-sm, 12px);overflow:hidden}.co-ref-field__panel--dark{--co-semantic-surface-page:#0A0A0A;--co-semantic-surface-primary:#0A0A0A;--co-semantic-surface-hover:rgba(255, 255, 255, 0.08);--co-semantic-surface-muted:rgba(255, 255, 255, 0.12);--co-semantic-text-default:#ffffff;--co-semantic-text-secondary:rgba(255, 255, 255, 0.8);--co-semantic-text-muted:rgba(255, 255, 255, 0.5);--co-semantic-border-subtle:rgba(255, 255, 255, 0.12);--co-semantic-border-default:rgba(255, 255, 255, 0.16);background:#0A0A0A;color:#ffffff}.co-ref-field__panel--light{--co-semantic-surface-page:#ffffff;--co-semantic-surface-primary:#ffffff;--co-semantic-surface-hover:var(--co-color-gray-100, #f5f5f5);--co-semantic-surface-muted:var(--co-color-gray-200, #e5e5e5);--co-semantic-text-default:var(--co-color-gray-700, #1F1C1B);--co-semantic-text-secondary:rgba(0, 0, 0, 0.6);--co-semantic-text-muted:rgba(0, 0, 0, 0.45);--co-semantic-border-subtle:var(--co-color-gray-200, #e5e5e5);--co-semantic-border-default:var(--co-color-gray-300, #d4d4d4);background:#ffffff;color:var(--co-color-gray-700, #1F1C1B)}.co-ref-field__footer{display:flex;gap:var(--co-spacing-sm2);border-top:1px solid var(--co-semantic-border-subtle);padding:var(--co-spacing-sm2)}.co-ref-field__footer-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box;min-height:32px}.co-ref-field__footer-btn:hover{opacity:0.85}.co-ref-field__footer-btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-ref-field__footer-btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}.co-ref-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs);font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-muted)}.co-ref-field__helper--error{color:var(--co-semantic-status-error)}.co-ref-field__helper--success{color:var(--co-semantic-status-success)}.co-ref-field__helper--warning{color:var(--co-color-status-review)}:host([layout='horizontal']) .co-ref-field{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-ref-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-ref-field__label{white-space:normal}:host([layout='horizontal']) .co-ref-field>:not(.co-ref-field__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)')}"}},[257,"co-ref-field",{label:[1],required:[4],secondaryLabel:[1,"secondary-label"],labelIcon:[513,"label-icon"],placeholder:[1],disabled:[4],clearable:[4],editable:[4],editLabel:[1,"edit-label"],multiple:[4],status:[1],helperText:[1,"helper-text"],iconLeft:[1,"icon-left"],layout:[513],size:[513],variant:[513],value:[1025],options:[1],selectedDisplay:[1,"selected-display"],loading:[4],total:[2],searchable:[4],searchPlaceholder:[1,"search-placeholder"],searchDebounce:[2,"search-debounce"],emptyMessage:[1,"empty-message"],showFooter:[4,"show-footer"],footerPrimaryLabel:[1,"footer-primary-label"],footerSecondaryLabel:[1,"footer-secondary-label"],maxChips:[2,"max-chips"],panelTheme:[1,"panel-theme"],colorMode:[1,"color-mode"],triggerBadgeIcon:[1,"trigger-badge-icon"],triggerBadgeLabel:[1,"trigger-badge-label"],panelWidth:[1,"panel-width"],avatarShape:[1,"avatar-shape"],pinnable:[4],listReorderable:[4,"list-reorderable"],isOpen:[32],overflowCount:[32]},void 0,{isOpen:[{onOpenChange:0}]}]);function m(){"undefined"!=typeof customElements&&["co-ref-field","co-avatar","co-icon","co-loader","co-option-list","co-popover","co-tooltip"].forEach((e=>{switch(e){case"co-ref-field":customElements.get(r(e))||customElements.define(r(e),g);break;case"co-avatar":customElements.get(r(e))||l();break;case"co-icon":customElements.get(r(e))||n();break;case"co-loader":customElements.get(r(e))||f();break;case"co-option-list":customElements.get(r(e))||d();break;case"co-popover":customElements.get(r(e))||h();break;case"co-tooltip":customElements.get(r(e))||p()}}))}g.LIST_ID="co-ref-field-list",m();const v=g,u=m;export{v as CoRefField,u as defineCustomElement}
|
|
1
|
+
import{p as e,H as i,c as o,h as t,t as r}from"./index.js";import{R as s}from"./p-CWneqh4n.js";import{F as a}from"./p-C4U2tbRp.js";import{i as c,d as l}from"./p-D_9BRkj6.js";import{d as n}from"./p-Dj1EZ5qD.js";import{d as f}from"./p-BH184F0X.js";import{d}from"./p-DI1ek0EB.js";import{d as h}from"./p-DP0bbhfN.js";import{d as p}from"./p-Bz0QZqnB.js";const m=e(class e extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coChange=o(this,"coChange",7),this.coClear=o(this,"coClear",7),this.coSearch=o(this,"coSearch",7),this.coLoadMore=o(this,"coLoadMore",7),this.coOpen=o(this,"coOpen",3),this.coClose=o(this,"coClose",3),this.coRemove=o(this,"coRemove",7),this.coFooterPrimary=o(this,"coFooterPrimary",7),this.coFooterSecondary=o(this,"coFooterSecondary",7),this.coPinToggle=o(this,"coPinToggle",7),this.coListReorder=o(this,"coListReorder",7),this.coEditSelected=o(this,"coEditSelected",7),this.required=!1,this.placeholder="Select…",this.disabled=!1,this.clearable=!0,this.editable=!1,this.editLabel="Edit",this.multiple=!1,this.status="default",this.layout="vertical",this.size="md",this.variant="default",this.value="",this.options="[]",this.selectedDisplay="[]",this.loading=!1,this.total=0,this.searchable=!0,this.searchPlaceholder="Search…",this.searchDebounce=350,this.emptyMessage="No results found",this.showFooter=!1,this.footerPrimaryLabel="Ok",this.footerSecondaryLabel="New",this.maxChips=0,this.panelTheme="auto",this.colorMode="dot",this.triggerBadgeIcon="",this.triggerBadgeLabel="",this.avatarShape="circle",this.pinnable=!1,this.listReorderable=!1,this.isOpen=!1,this.overflowCount=0,this.lastChipsKey="\0",this.pendingFocus=!1,this.handlePopoverOpen=()=>{this.isOpen=!0},this.handlePopoverClose=()=>{this.isOpen=!1},this.handleTriggerClick=e=>{this.disabled&&e.stopPropagation()},this.handleTriggerKeyDown=e=>{this.disabled||e.target===this.triggerEl&&("Enter"===e.key||" "===e.key?(e.preventDefault(),this.isOpen=!this.isOpen):"ArrowDown"!==e.key||this.isOpen||(e.preventDefault(),this.isOpen=!0))},this.handleListChange=e=>{if(!this.multiple&&null===e.value)return this.value="",this.coClear.emit(),void(this.isOpen=!1);this.handleOptionClick(e.item)},this.handleOptionClick=e=>{if(this.multiple){const i=this.parsedValue;let o;o=i.indexOf(e._id)>=0?i.filter((i=>i!==e._id)):[...i,e._id],this.value=JSON.stringify(o),this.coChange.emit({value:o,item:e})}else this.value=e._id,this.coChange.emit({value:e._id,item:e}),this.isOpen=!1},this.handleReorder=e=>{this.value=JSON.stringify(e.value),this.coChange.emit({value:e.value,item:e.item})},this.handleClear=e=>{e.stopPropagation(),this.value=this.multiple?"[]":"",this.coClear.emit()},this.handleEditClick=e=>{e.stopPropagation();const i=this.effectiveDisplayItems[0];i&&this.coEditSelected.emit(i._id)},this.handleRemoveChip=(e,i)=>{var o;i.stopPropagation();const t=null!==(o=this.effectiveDisplayItems.find((i=>i._id===e)))&&void 0!==o?o:{_id:e,label:e},r=this.parsedValue.filter((i=>i!==e));this.value=JSON.stringify(r),this.coRemove.emit(e),this.coChange.emit({value:r,item:t})},this.handleFooterPrimary=()=>{this.coFooterPrimary.emit(),this.isOpen=!1},this.handleFooterSecondary=()=>{this.coFooterSecondary.emit()}}get normalizedSize(){return"default"===this.size?"md":this.size}get parsedOptions(){try{const e="string"==typeof this.options?JSON.parse(this.options):this.options;return Array.isArray(e)?e:[]}catch(e){return[]}}get parsedSelectedDisplay(){try{const e="string"==typeof this.selectedDisplay?JSON.parse(this.selectedDisplay):this.selectedDisplay;return Array.isArray(e)?e:[]}catch(e){return[]}}get effectiveDisplayItems(){const e=this.parsedValue;if(0===e.length)return[];const i=new Map;for(const e of this.parsedSelectedDisplay)i.set(e._id,e);for(const e of this.parsedOptions)i.has(e._id)||i.set(e._id,{_id:e._id,label:e.label,description:e.description,color:e.color,avatar:e.avatar,image:e.image});return e.map((e=>i.get(e))).filter(Boolean)}get parsedValue(){if(!this.value)return[];try{const e=JSON.parse(this.value);return Array.isArray(e)?e:[this.value]}catch(e){return this.value?[this.value]:[]}}connectedCallback(){this.resizeObserver=new ResizeObserver((()=>this.calcOverflow()))}componentDidRender(){var e,i,o,t;this.chipsEl!==this.observedChipsEl&&(null===(e=this.resizeObserver)||void 0===e||e.disconnect(),this.chipsEl&&(null===(i=this.resizeObserver)||void 0===i||i.observe(this.chipsEl)),this.observedChipsEl=this.chipsEl);const r=null===(o=this.chipsEl)||void 0===o?void 0:o.querySelectorAll(".co-ref-field__chip"),s=r?Array.from(r,(e=>e.textContent)).join(""):"";s!==this.lastChipsKey&&(this.lastChipsKey=s,this.calcOverflow()),this.pendingFocus&&(null===(t=this.optionListEl)||void 0===t?void 0:t.isConnected)&&(this.pendingFocus=!1,this.optionListEl.focusSearch())}disconnectedCallback(){var e;null===(e=this.resizeObserver)||void 0===e||e.disconnect()}calcOverflow(){if(!this.multiple||this.maxChips>0||!this.chipsEl)return void(0!==this.overflowCount&&(this.overflowCount=0));const e=Array.from(this.chipsEl.querySelectorAll(".co-ref-field__chip"));if(0===e.length)return void(0!==this.overflowCount&&(this.overflowCount=0));const i=this.chipsEl.getBoundingClientRect().right;let o=0;for(let t=e.length-1;t>=0&&e[t].getBoundingClientRect().right>i+1;t--)o++;o!==this.overflowCount&&(this.overflowCount=o)}onOpenChange(e){e?(this.coOpen.emit(),this.pendingFocus=!0):(this.coClose.emit(),this.restoreTriggerFocus())}restoreTriggerFocus(){var e;const i=document.activeElement;(i===this.el||this.el.contains(i))&&(null===(e=this.triggerEl)||void 0===e||e.focus())}renderTrigger(){const i=this.effectiveDisplayItems,o=i.length>0;return t("div",{class:{"co-ref-field__trigger":!0,"co-ref-field--open":this.isOpen,"co-ref-field--disabled":this.disabled,["co-ref-field--"+this.normalizedSize]:!0,["co-ref-field--"+this.status]:"default"!==this.status,"co-ref-field--flat":"flat"===this.variant},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?e.LIST_ID:void 0,tabIndex:this.disabled?-1:0,ref:e=>this.triggerEl=e,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown},this.iconLeft&&t("span",{class:"co-ref-field__icon"},t("co-icon",{name:this.iconLeft,size:16})),t("div",{class:"co-ref-field__value"},!o&&t("span",{class:"co-ref-field__placeholder",part:"trigger-placeholder"},this.placeholder),o&&!this.multiple&&this.renderSingleValue(i[0]),o&&this.multiple&&this.renderMultipleValue(i)),o&&this.triggerBadgeIcon&&t("span",{class:"co-ref-field__trigger-badge",part:"trigger-badge",role:"img",title:this.triggerBadgeLabel||void 0,"aria-label":this.triggerBadgeLabel||void 0},t("co-icon",{name:this.triggerBadgeIcon,size:11,weight:"fill"})),o&&!this.multiple&&this.editable&&!this.disabled&&t("button",{class:"co-ref-field__edit",part:"trigger-edit",tabIndex:-1,onClick:this.handleEditClick,type:"button",title:this.editLabel||void 0,"aria-label":this.editLabel||void 0},t("co-icon",{name:"pencil-simple",size:14})),o&&this.clearable&&!this.disabled&&t("button",{class:"co-ref-field__clear",part:"trigger-clear",tabIndex:-1,onClick:this.handleClear,type:"button"},t("co-icon",{name:"x",size:14})),t("span",{class:"co-ref-field__caret",part:"trigger-chevron"},t("co-icon",{name:"caret-up-down",size:16})))}renderItemAvatar(e){return e.image||e.avatar?t("co-avatar",{class:"co-ref-field__avatar",type:e.image?"image":"text",src:e.image,text:e.avatar,color:e.color,size:"xxs",shape:this.avatarShape}):e.color?t("span",{class:"co-ref-field__color-dot",style:{backgroundColor:e.color}}):null}renderSingleValue(e){return t("div",{class:"co-ref-field__selected"},this.renderItemAvatar(e),t("span",{class:"co-ref-field__selected-label",part:"trigger-text"},e.label))}renderMultipleValue(e){const i=this.maxChips>0,o=Math.min(this.overflowCount,Math.max(0,e.length-1)),r=i?e.slice(0,this.maxChips):e,s=i?e.length-this.maxChips:o,l=e.length-(i?0:o);return t("div",{class:"co-ref-field__chips-row"},t("div",{class:"co-ref-field__chips",ref:e=>this.chipsEl=e},r.map(((e,o)=>{const r="fill"===this.colorMode&&!!e.color&&!(e.image||e.avatar);return t(a,{key:e._id,baseClass:"co-ref-field__chip",label:e.label,modifiers:{"co-ref-field__chip--avatar":!(!e.image&&!e.avatar),"co-ref-field__chip--fill":r,"co-ref-field__chip--fill-light":r&&c(e.color),"co-ref-field__chip--clipped":!i&&o>=l,["co-ref-field__chip--"+this.normalizedSize]:!0},style:r?{backgroundColor:e.color}:void 0,onRemove:i=>this.handleRemoveChip(e._id,i)},e.image||e.avatar?this.renderItemAvatar(e):e.color&&!r?t("span",{class:"co-ref-field__chip-dot",style:{backgroundColor:e.color}}):null)}))),s>0&&t("span",{class:"co-ref-field__chip-overflow"},"+",s))}renderPanel(){return t("div",{class:{"co-ref-field__panel":!0,"co-ref-field__panel--dark":"dark"===this.panelTheme,"co-ref-field__panel--light":"light"===this.panelTheme},style:this.panelWidth?{width:this.panelWidth}:void 0},t("co-option-list",{id:e.LIST_ID,ref:e=>this.optionListEl=e,items:"string"==typeof this.options?this.options:JSON.stringify(this.options),value:this.value,selectedItems:"string"==typeof this.selectedDisplay?this.selectedDisplay:JSON.stringify(this.selectedDisplay),multiple:this.multiple,selectedFirst:this.multiple,reorderable:this.multiple,pinnable:this.pinnable,listReorderable:this.listReorderable,selectedAffordance:"deselect",searchable:this.searchable,searchPlaceholder:this.searchPlaceholder,searchDebounce:this.searchDebounce,loading:this.loading,total:this.total,emptyMessage:this.emptyMessage,avatarShape:this.avatarShape,onCoSearch:e=>this.coSearch.emit(e.detail),onCoChange:e=>this.handleListChange(e.detail),onCoReorder:e=>this.handleReorder(e.detail),onCoPinToggle:e=>this.coPinToggle.emit(e.detail),onCoListReorder:e=>this.coListReorder.emit(e.detail),onCoLoadMore:()=>this.coLoadMore.emit()},t("slot",{name:"panel-footer",slot:"footer"}),this.showFooter&&t("div",{class:"co-ref-field__footer",slot:"footer"},this.footerSecondaryLabel&&t("button",{class:"co-ref-field__footer-btn co-ref-field__footer-btn--secondary",type:"button",onClick:this.handleFooterSecondary},t("co-icon",{name:"plus",size:16}),t("span",null,this.footerSecondaryLabel)),t("button",{class:"co-ref-field__footer-btn co-ref-field__footer-btn--primary",type:"button",onClick:this.handleFooterPrimary},t("co-icon",{name:"check",size:16}),t("span",null,this.footerPrimaryLabel)))))}render(){return t("div",{key:"8904995ce46d0552556775029316fa42c0d1261e",class:"co-ref-field"},(this.label||this.secondaryLabel)&&t("div",{key:"a3b1d77f18f04b0233d5cf9c5b18c484b60d06e4",class:"co-ref-field__labels"},this.label&&t("label",{key:"837c1f52807a6b258874d4984fdd3aafd48737ed",class:"co-ref-field__label"},this.labelIcon&&t("co-icon",{key:"c9e74495eac50df1f9f074f3a25b3be7bcf36d1c",class:"co-ref-field__label-icon",name:this.labelIcon,size:16}),this.label,t(s,{key:"49a4366d6fc20c7ddbad31d020a1d45ea4134554",required:this.required})),this.secondaryLabel&&t("span",{key:"4f9dd9e68d79642cfafd16a71e51747599668f9e",class:"co-ref-field__secondary-label"},this.secondaryLabel)),t("co-popover",{key:"91ad529d27a62ccbcb8acac7f23cee7ac2ca33ce",open:this.isOpen,placement:"bottom-start",matchWidth:!this.panelWidth,offset:4,onCoOpen:this.handlePopoverOpen,onCoClose:this.handlePopoverClose},t("div",{key:"809b6f7e0f64ffd7c6151c1fae340114f5887e72",slot:"trigger"},this.renderTrigger()),this.isOpen&&this.renderPanel()),this.helperText&&t("div",{key:"4089f6e3cd993ce620742d619282d12542e87057",class:"co-ref-field__helper co-ref-field__helper--"+this.status},"default"!==this.status&&t("co-icon",{key:"3d9e658ba0cc04034778911930837f1268afeedd",name:"error"===this.status?"warning-circle":"success"===this.status?"check-circle":"info",size:14}),t("span",{key:"8c26be0575794b6f8b410f1fd0b71efd715d5324"},this.helperText)))}get el(){return this}static get watchers(){return{isOpen:[{onOpenChange:0}]}}static get style(){return":host{display:block;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);letter-spacing:var(--co-font-letter-spacing-body);line-height:1;position:relative}.co-ref-field{display:flex;flex-direction:column;gap:var(--co-spacing-sm2)}.co-ref-field__labels{display:flex;align-items:center;justify-content:space-between;padding:0 var(--co-spacing-xs);gap:var(--co-spacing-sm2)}.co-ref-field__label{display:inline-flex;align-items:center;color:var(--co-ref-field-label-color, var(--co-semantic-text-secondary));font-family:var(--co-ref-field-label-font-family, var(--co-font-family-primary));font-size:var(--co-ref-field-label-font-size, var(--co-font-size-14));font-weight:var(--co-ref-field-label-font-weight, 400);line-height:1;white-space:nowrap;cursor:default;text-transform:var(--co-ref-field-label-text-transform, none);letter-spacing:var(--co-ref-field-label-letter-spacing, var(--co-font-letter-spacing-body))}.co-ref-field__secondary-label{color:var(--co-semantic-text-muted);font-family:var(--co-font-family-mono);font-size:var(--co-font-size-12);font-weight:400;line-height:1;white-space:nowrap;text-align:right}.co-ref-field__trigger{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-sm2) var(--co-spacing-md);background:var(--co-ref-field-trigger-bg, var(--co-semantic-surface-page));border:1px solid var(--co-ref-field-trigger-border-color, 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)}.co-ref-field--flat{background:transparent;border-color:transparent}.co-ref-field--s{min-height:28px;padding:var(--co-spacing-xxs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-ref-field--sm{min-height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);font-size:var(--co-font-size-12)}.co-ref-field--lg{min-height:48px;padding:var(--co-spacing-sm) var(--co-spacing-lg);font-size:var(--co-font-size-16)}.co-ref-field--open{border-color:var(--co-semantic-border-focus);box-shadow:0 0 0 2px var(--co-semantic-border-focus-ring)}.co-ref-field__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-ref-field--disabled{background:var(--co-semantic-surface-disabled);border-color:transparent;cursor:not-allowed}.co-ref-field--error{border-color:var(--co-semantic-status-error)}.co-ref-field--success{border-color:var(--co-semantic-status-success)}.co-ref-field--warning{border-color:var(--co-color-status-review)}.co-ref-field--s .co-ref-field__selected{--co-avatar-size:20px}.co-ref-field--sm .co-ref-field__selected{--co-avatar-size:22px}.co-ref-field--md .co-ref-field__selected{--co-avatar-size:22px}.co-ref-field--lg .co-ref-field__selected{--co-avatar-size:28px}.co-ref-field__icon{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-ref-field__label-icon{flex-shrink:0;margin-right:var(--co-spacing-xs);color:var(--co-semantic-text-secondary)}.co-ref-field__value{flex:1;min-width:0;display:flex;align-items:center}.co-ref-field__placeholder{color:var(--co-semantic-text-muted);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__caret{flex-shrink:0;color:var(--co-semantic-text-muted);display:flex;align-items:center}.co-ref-field__trigger-badge{flex-shrink:0;display:grid;place-items:center;width:18px;height:18px;border-radius:var(--co-border-radius-xxs);background:var(--co-ref-field-trigger-badge-bg, rgba(0, 0, 0, 0.22));color:var(--co-semantic-text-default)}.co-ref-field__clear{flex-shrink:0;display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-semantic-text-muted);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-ref-field__clear:hover{color:var(--co-semantic-text-default)}.co-ref-field__edit{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-ref-field__edit:hover{color:var(--co-semantic-text-default)}.co-ref-field__selected{display:flex;align-items:center;gap:var(--co-spacing-sm);min-width:0}.co-ref-field__color-dot{width:10px;height:10px;min-width:10px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__avatar{flex-shrink:0}.co-ref-field__selected-label{color:var(--co-semantic-text-default);font-size:inherit;font-weight:400;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-ref-field__chips-row{flex:1;min-width:0;display:flex;align-items:center;gap:var(--co-spacing-xs)}.co-ref-field__chips{flex:1;min-width:0;display:flex;flex-wrap:nowrap;overflow:hidden;gap:var(--co-spacing-xs);align-items:center}.co-ref-field__chip{display:inline-flex;align-items:center;gap:var(--co-spacing-sm);padding:0 var(--co-spacing-sm2);background:var(--co-color-gray-100);border-radius:var(--co-border-radius-full);line-height:1;max-width:min(160px, 100%);flex-shrink:0}.co-ref-field__chip--avatar{padding-left:var(--co-spacing-xxs)}.co-ref-field__chip--s{min-height:20px;--co-avatar-size:20px;font-size:var(--co-font-size-12)}.co-ref-field__chip--sm{min-height:22px;--co-avatar-size:22px;font-size:var(--co-font-size-12)}.co-ref-field__chip--md{min-height:22px;--co-avatar-size:22px;font-size:var(--co-font-size-14)}.co-ref-field__chip--lg{min-height:28px;--co-avatar-size:28px;font-size:var(--co-font-size-14)}.co-ref-field__chip--clipped{visibility:hidden}.co-ref-field__chip-dot{width:8px;height:8px;min-width:8px;border-radius:var(--co-border-radius-full);flex-shrink:0}.co-ref-field__chip--fill{color:var(--co-color-base-blanco);border-radius:var(--co-spacing-sm)}.co-ref-field__chip--fill-light{color:var(--co-color-base-negro)}.co-ref-field__chip--fill .co-ref-field__chip-label,.co-ref-field__chip--fill .co-ref-field__chip-remove{color:inherit}.co-ref-field__chip--fill .co-ref-field__chip-remove{opacity:0.72}.co-ref-field__chip--fill .co-ref-field__chip-remove:hover{color:inherit;opacity:1}.co-ref-field__chip-label{color:var(--co-semantic-text-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.co-ref-field__chip-remove{display:flex;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;color:var(--co-color-gray-500);transition:color var(--co-motion-duration-fast) var(--co-motion-ease-out);flex-shrink:0}.co-ref-field__chip-remove:hover{color:var(--co-semantic-text-default)}.co-ref-field__chip-overflow{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--co-spacing-xs) var(--co-spacing-sm);background:var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-full);font-size:var(--co-font-size-12);font-weight:600;color:var(--co-semantic-text-secondary);line-height:1}.co-ref-field__panel{display:flex;flex-direction:column;border-radius:var(--co-border-radius-sm, 12px);overflow:hidden}.co-ref-field__panel--dark{--co-semantic-surface-page:#0A0A0A;--co-semantic-surface-primary:#0A0A0A;--co-semantic-surface-hover:rgba(255, 255, 255, 0.08);--co-semantic-surface-muted:rgba(255, 255, 255, 0.12);--co-semantic-text-default:#ffffff;--co-semantic-text-secondary:rgba(255, 255, 255, 0.8);--co-semantic-text-muted:rgba(255, 255, 255, 0.5);--co-semantic-border-subtle:rgba(255, 255, 255, 0.12);--co-semantic-border-default:rgba(255, 255, 255, 0.16);background:#0A0A0A;color:#ffffff}.co-ref-field__panel--light{--co-semantic-surface-page:#ffffff;--co-semantic-surface-primary:#ffffff;--co-semantic-surface-hover:var(--co-color-gray-100, #f5f5f5);--co-semantic-surface-muted:var(--co-color-gray-200, #e5e5e5);--co-semantic-text-default:var(--co-color-gray-700, #1F1C1B);--co-semantic-text-secondary:rgba(0, 0, 0, 0.6);--co-semantic-text-muted:rgba(0, 0, 0, 0.45);--co-semantic-border-subtle:var(--co-color-gray-200, #e5e5e5);--co-semantic-border-default:var(--co-color-gray-300, #d4d4d4);background:#ffffff;color:var(--co-color-gray-700, #1F1C1B)}.co-ref-field__footer{display:flex;gap:var(--co-spacing-sm2);border-top:1px solid var(--co-semantic-border-subtle);padding:var(--co-spacing-sm2)}.co-ref-field__footer-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-sm2) var(--co-spacing-md);border-radius:var(--co-border-radius-xs);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12, 12px);font-weight:500;line-height:1;letter-spacing:var(--co-font-letter-spacing-body);white-space:nowrap;cursor:pointer;transition:opacity var(--co-motion-duration-fast) var(--co-motion-ease-out);box-sizing:border-box;min-height:32px}.co-ref-field__footer-btn:hover{opacity:0.85}.co-ref-field__footer-btn--secondary{background:transparent;color:var(--co-semantic-text-default);border:1px solid var(--co-semantic-border-default)}.co-ref-field__footer-btn--primary{background:var(--co-semantic-surface-primary);color:var(--co-semantic-on-primary);border:none}.co-ref-field__helper{display:flex;align-items:center;gap:var(--co-spacing-xs);padding:0 var(--co-spacing-xs);font-size:var(--co-font-size-14);font-weight:400;color:var(--co-semantic-text-muted)}.co-ref-field__helper--error{color:var(--co-semantic-status-error)}.co-ref-field__helper--success{color:var(--co-semantic-status-success)}.co-ref-field__helper--warning{color:var(--co-color-status-review)}:host([layout='horizontal']) .co-ref-field{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-ref-field__labels{grid-column:1;grid-row:1;padding-top:var(--co-spacing-sm2);min-width:0}:host([layout='horizontal']) .co-ref-field__label{white-space:normal}:host([layout='horizontal']) .co-ref-field>:not(.co-ref-field__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)')}"}},[257,"co-ref-field",{label:[1],required:[4],secondaryLabel:[1,"secondary-label"],labelIcon:[513,"label-icon"],placeholder:[1],disabled:[4],clearable:[4],editable:[4],editLabel:[1,"edit-label"],multiple:[4],status:[1],helperText:[1,"helper-text"],iconLeft:[1,"icon-left"],layout:[513],size:[513],variant:[513],value:[1025],options:[1],selectedDisplay:[1,"selected-display"],loading:[4],total:[2],searchable:[4],searchPlaceholder:[1,"search-placeholder"],searchDebounce:[2,"search-debounce"],emptyMessage:[1,"empty-message"],showFooter:[4,"show-footer"],footerPrimaryLabel:[1,"footer-primary-label"],footerSecondaryLabel:[1,"footer-secondary-label"],maxChips:[2,"max-chips"],panelTheme:[1,"panel-theme"],colorMode:[1,"color-mode"],triggerBadgeIcon:[1,"trigger-badge-icon"],triggerBadgeLabel:[1,"trigger-badge-label"],panelWidth:[1,"panel-width"],avatarShape:[1,"avatar-shape"],pinnable:[4],listReorderable:[4,"list-reorderable"],isOpen:[32],overflowCount:[32]},void 0,{isOpen:[{onOpenChange:0}]}]);function g(){"undefined"!=typeof customElements&&["co-ref-field","co-avatar","co-icon","co-loader","co-option-list","co-popover","co-tooltip"].forEach((e=>{switch(e){case"co-ref-field":customElements.get(r(e))||customElements.define(r(e),m);break;case"co-avatar":customElements.get(r(e))||l();break;case"co-icon":customElements.get(r(e))||n();break;case"co-loader":customElements.get(r(e))||f();break;case"co-option-list":customElements.get(r(e))||d();break;case"co-popover":customElements.get(r(e))||h();break;case"co-tooltip":customElements.get(r(e))||p()}}))}m.LIST_ID="co-ref-field-list",g();const v=m,u=g;export{v as CoRefField,u as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e,p as a,H as o,c as t,h as i,a as r}from"./index.js";import{n as s}from"./p-CQY6Ul7q.js";import{d as n}from"./p-Dj1EZ5qD.js";import{d as c}from"./p-gI62K3Be.js";const l={Home:"house",Contacts:"address-book",Companies:"buildings",Presentations:"presentation-chart",Deals:"handshake",Invoices:"receipt",Payments:"credit-card",Conversations:"chat-circle",Channels:"broadcast",ChannelProviders:"plugs-connected",ConversationFlows:"flow-arrow",PhoneNumbers:"phone",Tasks:"check-square",TaskGroups:"squares-four",WorkOrders:"clipboard-text",Tickets:"ticket",CaseTypes:"tag",EmailHubs:"at",RoutingRules:"path",Contracts:"file-text",Notes:"note",Meetings:"video-camera",Calls:"phone-call",CloudDrive:"cloud",Quotes:"quotes",ContentTemplates:"article",MessageTemplates:"chat-text",Skills:"brain",Insights:"chart-line",Dashboards:"gauge",Reports:"chart-bar",Emails:"envelope",ContactLists:"users-three",EmailCampaigns:"megaphone",VirtualTours:"cube",Scenes:"image",Spots:"map-pin",FloorPlans:"blueprint",Users:"user",UserTeams:"users",UserGroups:"user-circle-gear",Roles:"shield",Workspaces:"stack",AuthenticationRules:"lock-key",OauthApps:"key",ServiceCredentials:"certificate",Calendars:"calendar",CalendarPolicies:"calendar-check",CalendarGroups:"calendar-dots",CalendarEvents:"calendar-plus",ProposalWizards:"magic-wand",WizardGroups:"folders",AdHubs:"storefront",AdCampaigns:"flag-banner",Pricebooks:"book-open",PricebookEntries:"list-numbers",Products:"package",Taxes:"percent",ProductGroups:"stack",ProductFamilies:"tree-structure",ProductCategories:"tag",ProductRules:"gear-six",DiscountSchedules:"piggy-bank",LiveStreams:"broadcast",EventSubscriptions:"bell-ringing",Stages:"steps",ContactFlows:"flow-arrow",Categories:"folder-simple",CustomFilters:"funnel",Logs:"list-bullets",Devices:"cpu",Scripts:"code",Webhooks:"webhooks-logo",Endpoints:"plug",Sites:"globe",HealthChecks:"heartbeat",Plugins:"puzzle-piece",Cobs:"cube",CustomFields:"textbox",CustomUis:"layout",Documentation:"book-open-text",Sections:"article",Articles:"newspaper",Directory:"address-book",Sales:"currency-dollar",Communications:"chat-teardrop-text",Operations:"gear",Support:"lifebuoy",Tools:"wrench",Configuration:"sliders",Analytics:"chart-pie",Mailing:"envelope-simple",Billing:"money",Libraries:"books",Scheduling:"timer",Pricing:"tag",Development:"terminal",AccessControl:"shield-check",Notifications:"bell",System:"database",Iot:"wifi-high",Advertising:"megaphone",Wizards:"magic-wand",TourStudio:"cube",Docs:"file-text",Setup:"gear-six",Recruitment:"user-plus",Candidates:"user-list",Recognition:"hands-clapping",Achievements:"trophy",Rewards:"gift",Badges:"medal",BadgeNominations:"star",Prizes:"trophy",RewardsBudgets:"wallet",RedeemedPrizes:"crown",PaymentReceipts:"hand-coins",Coupons:"seal-percent",EventManager:"calendar-star",EventProspects:"users-four",BusinessEvents:"briefcase",EventExpense:"coins",Content:"folder-open",Portals:"app-window",CommunicationCenter:"headset",Integrations:"plugs-connected",Mcp:"plug",LifecycleHooks:"arrows-clockwise",PaymentProviders:"credit-card",Stripe:"credit-card",ThirdParty:"plugs-connected",Sendgrid:"paper-plane-tilt",Apollo:"rocket-launch",Kaspr:"identification-card",OpenAi:"robot",Ultramsg:"whatsapp-logo",Slack:"slack-logo",Telegram:"telegram-logo",Discord:"discord-logo"},d=a(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coNavigate=t(this,"coNavigate",7),this.coSearch=t(this,"coSearch",7),this.items="{}",this.activeKey="",this.mode="full",this.searchable=!1,this.searchPlaceholder="Search",this.search="",this.iconMap="{}",this.translations="{}",this.searchText="",this.expandedKeys=new Set,this.flyoutKey=null,this.flyoutPosition={top:0,bottom:null,left:0},this.parsedIconMap={},this.parsedTranslations={},this.flyoutTimeout=null,this.handleSearchInput=e=>{this.searchText=e.target.value,this.coSearch.emit(this.searchText)}}onIconMapChange(){this.parseIconMap()}onTranslationsChange(){this.parseTranslations()}onSearchChange(){this.searchText=this.search}onActiveKeyChange(){this.autoExpandForActiveKey()}onItemsChange(){this.autoExpandForActiveKey()}componentWillLoad(){this.parseIconMap(),this.parseTranslations(),this.autoExpandForActiveKey()}componentDidLoad(){}parseIconMap(){try{this.parsedIconMap=Object.assign(Object.assign({},l),JSON.parse(this.iconMap))}catch(e){this.parsedIconMap=Object.assign({},l)}}parseTranslations(){try{this.parsedTranslations=JSON.parse(this.translations)}catch(e){this.parsedTranslations={}}}get parsedItems(){try{const e=JSON.parse(this.items);return Array.isArray(e)?e:this.transformMenuData(e,0)}catch(e){return[]}}transformMenuData(e,a){return Object.keys(e).map((o=>{const t=e[o],i=t.modelName||"object"==typeof t&&!Object.keys(t).some((e=>"object"==typeof t[e]&&"modelName"!==e));return{key:o,label:o,url:t.url,target:t.target,modelName:i?t.modelName:void 0,customIcon:t.customIcon,children:i?void 0:this.transformMenuData(t,a+1),level:a}}))}get filteredItems(){return this.searchText?this.filterRecursive(this.parsedItems,s(this.searchText)):this.parsedItems}filterRecursive(e,a){const o=[];for(const t of e)if(s(this.getLabel(t.key)).includes(a))o.push(t);else if(t.children){const e=this.filterRecursive(t.children,a);e.length>0&&o.push(Object.assign(Object.assign({},t),{children:e}))}return o}autoExpandForActiveKey(){if(!this.activeKey)return;const e=new Set(this.expandedKeys);this.findAndExpandParents(this.parsedItems,this.activeKey,e),this.expandedKeys=e}findAndExpandParents(e,a,o){for(const t of e){if(t.key===a)return!0;if(t.children&&this.findAndExpandParents(t.children,a,o))return o.add(t.key),!0}return!1}getLabel(e){return this.parsedTranslations[e]?this.parsedTranslations[e]:e.replace(/([a-z])([A-Z])/g,"$1 $2")}getIcon(e){return this.parsedIconMap[e]||"circle"}isLeaf(e){return!e.children||0===e.children.length}hasActiveDescendant(e){return e.key===this.activeKey||!!e.children&&e.children.some((e=>this.hasActiveDescendant(e)))}toggleExpand(e){const a=new Set(this.expandedKeys);a.has(e)?a.delete(e):a.add(e),this.expandedKeys=a}handleLeafClick(e){this.flyoutKey=null,this.coNavigate.emit({key:e.key,modelName:e.modelName,url:e.url,target:e.target,customIcon:e.customIcon})}renderSearch(){return this.searchable&&"min"!==this.mode?i("div",{class:"co-sidebar-nav__search"},i("co-icon",{name:"magnifying-glass",size:16}),i("input",{type:"text",class:"co-sidebar-nav__search-input",placeholder:this.searchPlaceholder,value:this.searchText,onInput:this.handleSearchInput}),this.searchText&&i("button",{class:"co-sidebar-nav__search-clear",onClick:()=>{this.searchText="",this.coSearch.emit("")}},i("co-icon",{name:"x",size:14}))):null}renderIcon(e,a=16){if(e.customIcon)return i("img",{class:"co-sidebar-nav__custom-icon",src:e.customIcon,alt:""});const o=e.icon||this.getIcon(e.key);return i("co-icon",{name:o,size:a})}renderHighlightedLabel(e){const a=this.getLabel(e);if(!this.searchText)return a;const o=this.searchText.toLowerCase(),t=a.toLowerCase().indexOf(o);if(-1===t)return a;const r=a.slice(0,t),s=a.slice(t,t+o.length),n=a.slice(t+o.length);return[r,i("mark",{class:"co-sidebar-nav__highlight"},s),n]}renderLeafItem(e,a=!1){const o=e.key===this.activeKey,t=this.getLabel(e.key),r="full"===this.mode||a,s=i("button",{class:{"co-sidebar-nav__item":!0,"co-sidebar-nav__item--active":o},onClick:()=>this.handleLeafClick(e),"aria-label":r?void 0:t},i("span",{class:"co-sidebar-nav__item-icon"},this.renderIcon(e,r?16:18)),r&&i("span",{class:"co-sidebar-nav__item-label"},this.renderHighlightedLabel(e.key)));return"min"!==this.mode||a?s:i("co-tooltip",{content:t,placement:"right",offset:12},s)}openFlyout(e,a,o=0){if(clearTimeout(this.flyoutTimeout),a){const e=a.getBoundingClientRect(),t=e.right+8,i=window.innerHeight;this.flyoutPosition=e.top+(28+32*o+24)>i-16?{top:null,bottom:i-e.bottom,left:t}:{top:e.top,bottom:null,left:t}}this.flyoutKey=e}closeFlyout(){this.flyoutTimeout=setTimeout((()=>{this.flyoutKey=null}),150)}renderExpansion(e){const a=this.expandedKeys.has(e.key)||this.searchText.length>0,o=this.hasActiveDescendant(e);if("min"===this.mode){const a=this.flyoutKey===e.key;return i("div",{class:"co-sidebar-nav__flyout-anchor",onMouseEnter:a=>{var o;return this.openFlyout(e.key,a.currentTarget,(null===(o=e.children)||void 0===o?void 0:o.length)||0)},onMouseLeave:()=>this.closeFlyout()},i("button",{class:{"co-sidebar-nav__item":!0,"co-sidebar-nav__item--active":o||a},title:this.getLabel(e.key),onClick:a=>{var o;a.stopPropagation();const t=a.currentTarget.closest(".co-sidebar-nav__flyout-anchor");this.flyoutKey===e.key?this.flyoutKey=null:this.openFlyout(e.key,t||void 0,(null===(o=e.children)||void 0===o?void 0:o.length)||0)}},i("span",{class:"co-sidebar-nav__item-icon"},this.renderIcon(e,18))),a&&i("div",{class:"co-sidebar-nav__flyout",style:Object.assign(Object.assign(Object.assign({},null!==this.flyoutPosition.top?{top:this.flyoutPosition.top+"px"}:{}),null!==this.flyoutPosition.bottom?{bottom:this.flyoutPosition.bottom+"px"}:{}),{left:this.flyoutPosition.left+"px"}),onMouseEnter:()=>clearTimeout(this.flyoutTimeout),onMouseLeave:()=>this.closeFlyout()},i("span",{class:"co-sidebar-nav__flyout-title"},this.renderHighlightedLabel(e.key)),e.children.map((e=>this.renderLeafItem(e,!0)))))}return i("div",{class:{"co-sidebar-nav__expansion":!0,"co-sidebar-nav__expansion--expanded":a,"co-sidebar-nav__expansion--active":o}},i("button",{class:"co-sidebar-nav__expansion-header",onClick:()=>this.toggleExpand(e.key)},i("span",{class:"co-sidebar-nav__item-icon"},this.renderIcon(e)),i("span",{class:"co-sidebar-nav__item-label"},this.renderHighlightedLabel(e.key)),i("co-icon",{name:"caret-right",size:14,class:"co-sidebar-nav__expansion-caret"})),i("div",{class:"co-sidebar-nav__expansion-body"},e.children.map((e=>this.renderItem(e)))))}renderCategory(e){return"min"===this.mode?i("div",{class:"co-sidebar-nav__category--min"},e.children.map((e=>this.renderItem(e)))):i("div",{class:"co-sidebar-nav__category"},i("span",{class:"co-sidebar-nav__category-label"},this.renderHighlightedLabel(e.key)),i("div",{class:"co-sidebar-nav__category-items"},e.children.map((e=>this.renderItem(e)))))}renderItem(e){return this.isLeaf(e)?this.renderLeafItem(e):0!==e.level&&void 0!==e.level||e.modelName?this.renderExpansion(e):this.renderCategory(e)}render(){const e=this.filteredItems;return i(r,{key:"fa9a50c4a517fa550406669bb3d40abbf12db32a",class:{"flyout-open":!!this.flyoutKey}},i("nav",{key:"5df964b67ed0e376a268dd28e1095b985c0b328b",class:{"co-sidebar-nav":!0,"co-sidebar-nav--min":"min"===this.mode}},this.renderSearch(),i("div",{key:"c276aacf1b0b9eb66e35977d124465c400c96cd1",class:"co-sidebar-nav__items"},e.map((e=>this.renderItem(e))))))}get el(){return this}static get watchers(){return{iconMap:[{onIconMapChange:0}],translations:[{onTranslationsChange:0}],search:[{onSearchChange:0}],activeKey:[{onActiveKeyChange:0}],items:[{onItemsChange:0}]}}static get style(){return'@property --co-sidebar-fade-top{syntax:"<length>";inherits:false;initial-value:0px}@property --co-sidebar-fade-bottom{syntax:"<length>";inherits:false;initial-value:0px}:host{display:block;height:100%;overflow-y:auto;overflow-x:hidden;font-family:var(--co-font-family-primary);scrollbar-width:thin;scrollbar-color:transparent transparent;--co-sidebar-fade-size:28px}:host(:not([mode="min"])),:host([mode="min"]:not(.flyout-open)){-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--co-sidebar-fade-top), #000 calc(100% - var(--co-sidebar-fade-bottom)), transparent 100%);mask-image:linear-gradient(to bottom, transparent 0, #000 var(--co-sidebar-fade-top), #000 calc(100% - var(--co-sidebar-fade-bottom)), transparent 100%)}@supports (animation-timeline: scroll()){:host(:not([mode="min"])),:host([mode="min"]:not(.flyout-open)){animation:co-sidebar-edge-fade linear both;animation-timeline:scroll(self block)}}@keyframes co-sidebar-edge-fade{0%{--co-sidebar-fade-top:0px;--co-sidebar-fade-bottom:var(--co-sidebar-fade-size)}8%{--co-sidebar-fade-top:var(--co-sidebar-fade-size);--co-sidebar-fade-bottom:var(--co-sidebar-fade-size)}92%{--co-sidebar-fade-top:var(--co-sidebar-fade-size);--co-sidebar-fade-bottom:var(--co-sidebar-fade-size)}100%{--co-sidebar-fade-top:var(--co-sidebar-fade-size);--co-sidebar-fade-bottom:0px}}:host(:hover){scrollbar-color:var(--co-color-opacity-blanco-16) transparent}:host::-webkit-scrollbar{width:6px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:transparent;border-radius:9999px}:host(:hover)::-webkit-scrollbar-thumb{background:var(--co-color-opacity-blanco-16)}:host(:hover)::-webkit-scrollbar-thumb:hover{background:var(--co-color-opacity-blanco-25)}:host(:hover)::-webkit-scrollbar-thumb:active{background:var(--co-color-opacity-blanco-50)}:host([mode="min"]){scrollbar-width:none !important}:host([mode="min"])::-webkit-scrollbar{width:0 !important}.co-sidebar-nav{display:flex;flex-direction:column;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs)}.co-sidebar-nav--min{align-items:center;padding:var(--co-spacing-xs) 0}.co-sidebar-nav__search{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-xs) var(--co-spacing-sm);margin:0 var(--co-spacing-xs) var(--co-spacing-xs);border:1px solid var(--co-semantic-border-default);border-radius:var(--co-border-radius-xs);background:var(--co-semantic-surface-secondary);height:32px}.co-sidebar-nav__search co-icon{color:var(--co-semantic-text-muted);flex-shrink:0}.co-sidebar-nav__search-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);letter-spacing:var(--co-font-letter-spacing-body);color:var(--co-semantic-text-default);min-width:0}.co-sidebar-nav__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-sidebar-nav__search-clear{display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;padding:0;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-xxs)}.co-sidebar-nav__search-clear:hover{color:var(--co-semantic-text-default)}.co-sidebar-nav__items{display:flex;flex-direction:column;gap:var(--co-spacing-xxs)}.co-sidebar-nav--min .co-sidebar-nav__items{align-items:center}.co-sidebar-nav__category{display:flex;flex-direction:column}.co-sidebar-nav__category+.co-sidebar-nav__category{margin-top:var(--co-spacing-sm)}.co-sidebar-nav__category-label{text-transform:uppercase;font-family:var(--co-font-family-mono);font-size:var(--co-font-size-10);font-weight:400;color:var(--co-semantic-text-muted);line-height:110%;letter-spacing:0.08em;padding:var(--co-spacing-lg) var(--co-spacing-sm) var(--co-spacing-xs);user-select:none}.co-sidebar-nav__category-items{display:flex;flex-direction:column;gap:var(--co-spacing-xxs)}.co-sidebar-nav__category--min{display:flex;flex-direction:column;align-items:center;gap:var(--co-spacing-xxs)}.co-sidebar-nav__category--min+.co-sidebar-nav__category--min{margin-top:var(--co-spacing-md)}.co-sidebar-nav__item{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);border:none;background:none;cursor:pointer;width:100%;text-align:left;color:var(--co-semantic-text-default);transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:var(--co-font-weight-medium);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-sidebar-nav__item:hover{background:var(--co-semantic-surface-hover);color:var(--co-semantic-text-default)}.co-sidebar-nav__item--active{background:var(--co-sidebar-nav-active-bg, var(--co-semantic-surface-hover));color:var(--co-sidebar-nav-active-color, var(--co-color-primary-azul));font-weight:var(--co-font-weight-medium);--co-glass-blur:12px;--co-glass-saturate:1.3;-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate))}.co-sidebar-nav__item--active:hover{background:var(--co-sidebar-nav-active-bg-min, var(--co-sidebar-nav-active-bg, var(--co-semantic-surface-hover)));color:var(--co-sidebar-nav-active-color, var(--co-color-primary-azul))}.co-sidebar-nav__item-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px}.co-sidebar-nav__item-icon co-icon{color:inherit}.co-sidebar-nav__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-sidebar-nav__custom-icon{width:18px;height:18px;object-fit:contain;border-radius:var(--co-border-radius-xxs)}.co-sidebar-nav--min .co-sidebar-nav__item{width:36px;height:36px;padding:0;justify-content:center;border-radius:var(--co-border-radius-xs)}.co-sidebar-nav__flyout-anchor{position:relative}.co-sidebar-nav__flyout{position:fixed;min-width:180px;max-width:240px;background:var(--co-color-base-blanco);border:1px solid var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-sm);box-shadow:var(--co-shadow-lg);padding:var(--co-spacing-md);display:flex;flex-direction:column;z-index:9999;animation:co-flyout-in var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-sidebar-nav__flyout-title{text-transform:uppercase;font-family:var(--co-font-family-mono);font-size:var(--co-font-size-10);font-weight:400;color:var(--co-color-gray-500);line-height:110%;letter-spacing:var(--co-font-letter-spacing-overline);padding:var(--co-spacing-xxs) var(--co-spacing-sm) var(--co-spacing-xs);user-select:none}.co-sidebar-nav__flyout .co-sidebar-nav__item{width:100%;height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);gap:var(--co-spacing-md);font-weight:var(--co-font-weight-regular);color:var(--co-color-base-negro);line-height:var(--co-font-line-height-none);justify-content:flex-start}.co-sidebar-nav__flyout .co-sidebar-nav__item:hover{background:var(--co-color-gray-100)}.co-sidebar-nav__flyout .co-sidebar-nav__item--active{background:var(--co-sidebar-nav-active-bg-min, var(--co-color-gray-100));color:var(--co-sidebar-nav-active-color, var(--co-color-primary-azul));font-weight:var(--co-font-weight-medium)}.co-sidebar-nav__flyout .co-sidebar-nav__item-icon{display:flex;width:24px;height:24px}.co-sidebar-nav__flyout .co-sidebar-nav__item-icon co-icon{color:var(--co-color-base-negro)}.co-sidebar-nav__flyout .co-sidebar-nav__item--active .co-sidebar-nav__item-icon co-icon{color:var(--co-sidebar-nav-active-color, var(--co-color-primary-azul))}@keyframes co-flyout-in{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}.co-sidebar-nav__expansion{display:flex;flex-direction:column}.co-sidebar-nav__expansion-header{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);border:none;background:none;cursor:pointer;width:100%;text-align:left;color:var(--co-semantic-text-secondary);transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:var(--co-font-weight-medium);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-sidebar-nav__expansion-header:hover{background:var(--co-semantic-surface-hover);color:var(--co-semantic-text-default)}.co-sidebar-nav__expansion--active>.co-sidebar-nav__expansion-header{color:var(--co-semantic-text-default)}.co-sidebar-nav__expansion-caret{margin-left:auto;flex-shrink:0;transition:transform var(--co-motion-duration-base) var(--co-motion-ease-out);color:var(--co-semantic-text-muted)}.co-sidebar-nav__expansion--expanded>.co-sidebar-nav__expansion-header .co-sidebar-nav__expansion-caret{transform:rotate(90deg)}.co-sidebar-nav__expansion-body{display:flex;flex-direction:column;gap:var(--co-spacing-xxs);overflow:hidden;max-height:0;opacity:0;transition:max-height var(--co-motion-duration-slow) var(--co-motion-ease-out), opacity var(--co-motion-duration-base) var(--co-motion-ease-out), padding var(--co-motion-duration-base) var(--co-motion-ease-out);padding-left:var(--co-spacing-xl)}.co-sidebar-nav__expansion--expanded>.co-sidebar-nav__expansion-body{max-height:1000px;opacity:1;padding-top:var(--co-spacing-xxs)}.co-sidebar-nav__highlight{all:unset;background-color:var(--co-color-primary-amarillo, #facc15);color:var(--co-color-base-negro, #000);border-radius:2px;padding:0 1px}'}},[1,"co-sidebar-nav",{items:[1],activeKey:[513,"active-key"],mode:[513],searchable:[4],searchPlaceholder:[1,"search-placeholder"],search:[1],iconMap:[1,"icon-map"],translations:[1],searchText:[32],expandedKeys:[32],flyoutKey:[32],flyoutPosition:[32]},void 0,{iconMap:[{onIconMapChange:0}],translations:[{onTranslationsChange:0}],search:[{onSearchChange:0}],activeKey:[{onActiveKeyChange:0}],items:[{onItemsChange:0}]}]);function h(){"undefined"!=typeof customElements&&["co-sidebar-nav","co-icon","co-tooltip"].forEach((a=>{switch(a){case"co-sidebar-nav":customElements.get(e(a))||customElements.define(e(a),d);break;case"co-icon":customElements.get(e(a))||n();break;case"co-tooltip":customElements.get(e(a))||c()}}))}h();const v=d,p=h;export{v as CoSidebarNav,p as defineCustomElement}
|
|
1
|
+
import{t as e,p as a,H as o,c as t,h as i,a as r}from"./index.js";import{n as s}from"./p-CQY6Ul7q.js";import{d as n}from"./p-Dj1EZ5qD.js";import{d as c}from"./p-Bz0QZqnB.js";const l={Home:"house",Contacts:"address-book",Companies:"buildings",Presentations:"presentation-chart",Deals:"handshake",Invoices:"receipt",Payments:"credit-card",Conversations:"chat-circle",Channels:"broadcast",ChannelProviders:"plugs-connected",ConversationFlows:"flow-arrow",PhoneNumbers:"phone",Tasks:"check-square",TaskGroups:"squares-four",WorkOrders:"clipboard-text",Tickets:"ticket",CaseTypes:"tag",EmailHubs:"at",RoutingRules:"path",Contracts:"file-text",Notes:"note",Meetings:"video-camera",Calls:"phone-call",CloudDrive:"cloud",Quotes:"quotes",ContentTemplates:"article",MessageTemplates:"chat-text",Skills:"brain",Insights:"chart-line",Dashboards:"gauge",Reports:"chart-bar",Emails:"envelope",ContactLists:"users-three",EmailCampaigns:"megaphone",VirtualTours:"cube",Scenes:"image",Spots:"map-pin",FloorPlans:"blueprint",Users:"user",UserTeams:"users",UserGroups:"user-circle-gear",Roles:"shield",Workspaces:"stack",AuthenticationRules:"lock-key",OauthApps:"key",ServiceCredentials:"certificate",Calendars:"calendar",CalendarPolicies:"calendar-check",CalendarGroups:"calendar-dots",CalendarEvents:"calendar-plus",ProposalWizards:"magic-wand",WizardGroups:"folders",AdHubs:"storefront",AdCampaigns:"flag-banner",Pricebooks:"book-open",PricebookEntries:"list-numbers",Products:"package",Taxes:"percent",ProductGroups:"stack",ProductFamilies:"tree-structure",ProductCategories:"tag",ProductRules:"gear-six",DiscountSchedules:"piggy-bank",LiveStreams:"broadcast",EventSubscriptions:"bell-ringing",Stages:"steps",ContactFlows:"flow-arrow",Categories:"folder-simple",CustomFilters:"funnel",Logs:"list-bullets",Devices:"cpu",Scripts:"code",Webhooks:"webhooks-logo",Endpoints:"plug",Sites:"globe",HealthChecks:"heartbeat",Plugins:"puzzle-piece",Cobs:"cube",CustomFields:"textbox",CustomUis:"layout",Documentation:"book-open-text",Sections:"article",Articles:"newspaper",Directory:"address-book",Sales:"currency-dollar",Communications:"chat-teardrop-text",Operations:"gear",Support:"lifebuoy",Tools:"wrench",Configuration:"sliders",Analytics:"chart-pie",Mailing:"envelope-simple",Billing:"money",Libraries:"books",Scheduling:"timer",Pricing:"tag",Development:"terminal",AccessControl:"shield-check",Notifications:"bell",System:"database",Iot:"wifi-high",Advertising:"megaphone",Wizards:"magic-wand",TourStudio:"cube",Docs:"file-text",Setup:"gear-six",Recruitment:"user-plus",Candidates:"user-list",Recognition:"hands-clapping",Achievements:"trophy",Rewards:"gift",Badges:"medal",BadgeNominations:"star",Prizes:"trophy",RewardsBudgets:"wallet",RedeemedPrizes:"crown",PaymentReceipts:"hand-coins",Coupons:"seal-percent",EventManager:"calendar-star",EventProspects:"users-four",BusinessEvents:"briefcase",EventExpense:"coins",Content:"folder-open",Portals:"app-window",CommunicationCenter:"headset",Integrations:"plugs-connected",Mcp:"plug",LifecycleHooks:"arrows-clockwise",PaymentProviders:"credit-card",Stripe:"credit-card",ThirdParty:"plugs-connected",Sendgrid:"paper-plane-tilt",Apollo:"rocket-launch",Kaspr:"identification-card",OpenAi:"robot",Ultramsg:"whatsapp-logo",Slack:"slack-logo",Telegram:"telegram-logo",Discord:"discord-logo"},d=a(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.coNavigate=t(this,"coNavigate",7),this.coSearch=t(this,"coSearch",7),this.items="{}",this.activeKey="",this.mode="full",this.searchable=!1,this.searchPlaceholder="Search",this.search="",this.iconMap="{}",this.translations="{}",this.searchText="",this.expandedKeys=new Set,this.flyoutKey=null,this.flyoutPosition={top:0,bottom:null,left:0},this.parsedIconMap={},this.parsedTranslations={},this.flyoutTimeout=null,this.handleSearchInput=e=>{this.searchText=e.target.value,this.coSearch.emit(this.searchText)}}onIconMapChange(){this.parseIconMap()}onTranslationsChange(){this.parseTranslations()}onSearchChange(){this.searchText=this.search}onActiveKeyChange(){this.autoExpandForActiveKey()}onItemsChange(){this.autoExpandForActiveKey()}componentWillLoad(){this.parseIconMap(),this.parseTranslations(),this.autoExpandForActiveKey()}componentDidLoad(){}parseIconMap(){try{this.parsedIconMap=Object.assign(Object.assign({},l),JSON.parse(this.iconMap))}catch(e){this.parsedIconMap=Object.assign({},l)}}parseTranslations(){try{this.parsedTranslations=JSON.parse(this.translations)}catch(e){this.parsedTranslations={}}}get parsedItems(){try{const e=JSON.parse(this.items);return Array.isArray(e)?e:this.transformMenuData(e,0)}catch(e){return[]}}transformMenuData(e,a){return Object.keys(e).map((o=>{const t=e[o],i=t.modelName||"object"==typeof t&&!Object.keys(t).some((e=>"object"==typeof t[e]&&"modelName"!==e));return{key:o,label:o,url:t.url,target:t.target,modelName:i?t.modelName:void 0,customIcon:t.customIcon,children:i?void 0:this.transformMenuData(t,a+1),level:a}}))}get filteredItems(){return this.searchText?this.filterRecursive(this.parsedItems,s(this.searchText)):this.parsedItems}filterRecursive(e,a){const o=[];for(const t of e)if(s(this.getLabel(t.key)).includes(a))o.push(t);else if(t.children){const e=this.filterRecursive(t.children,a);e.length>0&&o.push(Object.assign(Object.assign({},t),{children:e}))}return o}autoExpandForActiveKey(){if(!this.activeKey)return;const e=new Set(this.expandedKeys);this.findAndExpandParents(this.parsedItems,this.activeKey,e),this.expandedKeys=e}findAndExpandParents(e,a,o){for(const t of e){if(t.key===a)return!0;if(t.children&&this.findAndExpandParents(t.children,a,o))return o.add(t.key),!0}return!1}getLabel(e){return this.parsedTranslations[e]?this.parsedTranslations[e]:e.replace(/([a-z])([A-Z])/g,"$1 $2")}getIcon(e){return this.parsedIconMap[e]||"circle"}isLeaf(e){return!e.children||0===e.children.length}hasActiveDescendant(e){return e.key===this.activeKey||!!e.children&&e.children.some((e=>this.hasActiveDescendant(e)))}toggleExpand(e){const a=new Set(this.expandedKeys);a.has(e)?a.delete(e):a.add(e),this.expandedKeys=a}handleLeafClick(e){this.flyoutKey=null,this.coNavigate.emit({key:e.key,modelName:e.modelName,url:e.url,target:e.target,customIcon:e.customIcon})}renderSearch(){return this.searchable&&"min"!==this.mode?i("div",{class:"co-sidebar-nav__search"},i("co-icon",{name:"magnifying-glass",size:16}),i("input",{type:"text",class:"co-sidebar-nav__search-input",placeholder:this.searchPlaceholder,value:this.searchText,onInput:this.handleSearchInput}),this.searchText&&i("button",{class:"co-sidebar-nav__search-clear",onClick:()=>{this.searchText="",this.coSearch.emit("")}},i("co-icon",{name:"x",size:14}))):null}renderIcon(e,a=16){if(e.customIcon)return i("img",{class:"co-sidebar-nav__custom-icon",src:e.customIcon,alt:""});const o=e.icon||this.getIcon(e.key);return i("co-icon",{name:o,size:a})}renderHighlightedLabel(e){const a=this.getLabel(e);if(!this.searchText)return a;const o=this.searchText.toLowerCase(),t=a.toLowerCase().indexOf(o);if(-1===t)return a;const r=a.slice(0,t),s=a.slice(t,t+o.length),n=a.slice(t+o.length);return[r,i("mark",{class:"co-sidebar-nav__highlight"},s),n]}renderLeafItem(e,a=!1){const o=e.key===this.activeKey,t=this.getLabel(e.key),r="full"===this.mode||a,s=i("button",{class:{"co-sidebar-nav__item":!0,"co-sidebar-nav__item--active":o},onClick:()=>this.handleLeafClick(e),"aria-label":r?void 0:t},i("span",{class:"co-sidebar-nav__item-icon"},this.renderIcon(e,r?16:18)),r&&i("span",{class:"co-sidebar-nav__item-label"},this.renderHighlightedLabel(e.key)));return"min"!==this.mode||a?s:i("co-tooltip",{content:t,placement:"right",offset:12},s)}openFlyout(e,a,o=0){if(clearTimeout(this.flyoutTimeout),a){const e=a.getBoundingClientRect(),t=e.right+8,i=window.innerHeight;this.flyoutPosition=e.top+(28+32*o+24)>i-16?{top:null,bottom:i-e.bottom,left:t}:{top:e.top,bottom:null,left:t}}this.flyoutKey=e}closeFlyout(){this.flyoutTimeout=setTimeout((()=>{this.flyoutKey=null}),150)}renderExpansion(e){const a=this.expandedKeys.has(e.key)||this.searchText.length>0,o=this.hasActiveDescendant(e);if("min"===this.mode){const a=this.flyoutKey===e.key;return i("div",{class:"co-sidebar-nav__flyout-anchor",onMouseEnter:a=>{var o;return this.openFlyout(e.key,a.currentTarget,(null===(o=e.children)||void 0===o?void 0:o.length)||0)},onMouseLeave:()=>this.closeFlyout()},i("button",{class:{"co-sidebar-nav__item":!0,"co-sidebar-nav__item--active":o||a},title:this.getLabel(e.key),onClick:a=>{var o;a.stopPropagation();const t=a.currentTarget.closest(".co-sidebar-nav__flyout-anchor");this.flyoutKey===e.key?this.flyoutKey=null:this.openFlyout(e.key,t||void 0,(null===(o=e.children)||void 0===o?void 0:o.length)||0)}},i("span",{class:"co-sidebar-nav__item-icon"},this.renderIcon(e,18))),a&&i("div",{class:"co-sidebar-nav__flyout",style:Object.assign(Object.assign(Object.assign({},null!==this.flyoutPosition.top?{top:this.flyoutPosition.top+"px"}:{}),null!==this.flyoutPosition.bottom?{bottom:this.flyoutPosition.bottom+"px"}:{}),{left:this.flyoutPosition.left+"px"}),onMouseEnter:()=>clearTimeout(this.flyoutTimeout),onMouseLeave:()=>this.closeFlyout()},i("span",{class:"co-sidebar-nav__flyout-title"},this.renderHighlightedLabel(e.key)),e.children.map((e=>this.renderLeafItem(e,!0)))))}return i("div",{class:{"co-sidebar-nav__expansion":!0,"co-sidebar-nav__expansion--expanded":a,"co-sidebar-nav__expansion--active":o}},i("button",{class:"co-sidebar-nav__expansion-header",onClick:()=>this.toggleExpand(e.key)},i("span",{class:"co-sidebar-nav__item-icon"},this.renderIcon(e)),i("span",{class:"co-sidebar-nav__item-label"},this.renderHighlightedLabel(e.key)),i("co-icon",{name:"caret-right",size:14,class:"co-sidebar-nav__expansion-caret"})),i("div",{class:"co-sidebar-nav__expansion-body"},e.children.map((e=>this.renderItem(e)))))}renderCategory(e){return"min"===this.mode?i("div",{class:"co-sidebar-nav__category--min"},e.children.map((e=>this.renderItem(e)))):i("div",{class:"co-sidebar-nav__category"},i("span",{class:"co-sidebar-nav__category-label"},this.renderHighlightedLabel(e.key)),i("div",{class:"co-sidebar-nav__category-items"},e.children.map((e=>this.renderItem(e)))))}renderItem(e){return this.isLeaf(e)?this.renderLeafItem(e):0!==e.level&&void 0!==e.level||e.modelName?this.renderExpansion(e):this.renderCategory(e)}render(){const e=this.filteredItems;return i(r,{key:"fa9a50c4a517fa550406669bb3d40abbf12db32a",class:{"flyout-open":!!this.flyoutKey}},i("nav",{key:"5df964b67ed0e376a268dd28e1095b985c0b328b",class:{"co-sidebar-nav":!0,"co-sidebar-nav--min":"min"===this.mode}},this.renderSearch(),i("div",{key:"c276aacf1b0b9eb66e35977d124465c400c96cd1",class:"co-sidebar-nav__items"},e.map((e=>this.renderItem(e))))))}get el(){return this}static get watchers(){return{iconMap:[{onIconMapChange:0}],translations:[{onTranslationsChange:0}],search:[{onSearchChange:0}],activeKey:[{onActiveKeyChange:0}],items:[{onItemsChange:0}]}}static get style(){return'@property --co-sidebar-fade-top{syntax:"<length>";inherits:false;initial-value:0px}@property --co-sidebar-fade-bottom{syntax:"<length>";inherits:false;initial-value:0px}:host{display:block;height:100%;overflow-y:auto;overflow-x:hidden;font-family:var(--co-font-family-primary);scrollbar-width:thin;scrollbar-color:transparent transparent;--co-sidebar-fade-size:28px}:host(:not([mode="min"])),:host([mode="min"]:not(.flyout-open)){-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--co-sidebar-fade-top), #000 calc(100% - var(--co-sidebar-fade-bottom)), transparent 100%);mask-image:linear-gradient(to bottom, transparent 0, #000 var(--co-sidebar-fade-top), #000 calc(100% - var(--co-sidebar-fade-bottom)), transparent 100%)}@supports (animation-timeline: scroll()){:host(:not([mode="min"])),:host([mode="min"]:not(.flyout-open)){animation:co-sidebar-edge-fade linear both;animation-timeline:scroll(self block)}}@keyframes co-sidebar-edge-fade{0%{--co-sidebar-fade-top:0px;--co-sidebar-fade-bottom:var(--co-sidebar-fade-size)}8%{--co-sidebar-fade-top:var(--co-sidebar-fade-size);--co-sidebar-fade-bottom:var(--co-sidebar-fade-size)}92%{--co-sidebar-fade-top:var(--co-sidebar-fade-size);--co-sidebar-fade-bottom:var(--co-sidebar-fade-size)}100%{--co-sidebar-fade-top:var(--co-sidebar-fade-size);--co-sidebar-fade-bottom:0px}}:host(:hover){scrollbar-color:var(--co-color-opacity-blanco-16) transparent}:host::-webkit-scrollbar{width:6px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:transparent;border-radius:9999px}:host(:hover)::-webkit-scrollbar-thumb{background:var(--co-color-opacity-blanco-16)}:host(:hover)::-webkit-scrollbar-thumb:hover{background:var(--co-color-opacity-blanco-25)}:host(:hover)::-webkit-scrollbar-thumb:active{background:var(--co-color-opacity-blanco-50)}:host([mode="min"]){scrollbar-width:none !important}:host([mode="min"])::-webkit-scrollbar{width:0 !important}.co-sidebar-nav{display:flex;flex-direction:column;gap:var(--co-spacing-xs);padding:var(--co-spacing-xs)}.co-sidebar-nav--min{align-items:center;padding:var(--co-spacing-xs) 0}.co-sidebar-nav__search{display:flex;align-items:center;gap:var(--co-spacing-sm);padding:var(--co-spacing-xs) var(--co-spacing-sm);margin:0 var(--co-spacing-xs) var(--co-spacing-xs);border:1px solid var(--co-semantic-border-default);border-radius:var(--co-border-radius-xs);background:var(--co-semantic-surface-secondary);height:32px}.co-sidebar-nav__search co-icon{color:var(--co-semantic-text-muted);flex-shrink:0}.co-sidebar-nav__search-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--co-font-family-primary);font-size:var(--co-font-size-12);letter-spacing:var(--co-font-letter-spacing-body);color:var(--co-semantic-text-default);min-width:0}.co-sidebar-nav__search-input::placeholder{color:var(--co-semantic-text-muted)}.co-sidebar-nav__search-clear{display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;padding:0;color:var(--co-semantic-text-muted);border-radius:var(--co-border-radius-xxs)}.co-sidebar-nav__search-clear:hover{color:var(--co-semantic-text-default)}.co-sidebar-nav__items{display:flex;flex-direction:column;gap:var(--co-spacing-xxs)}.co-sidebar-nav--min .co-sidebar-nav__items{align-items:center}.co-sidebar-nav__category{display:flex;flex-direction:column}.co-sidebar-nav__category+.co-sidebar-nav__category{margin-top:var(--co-spacing-sm)}.co-sidebar-nav__category-label{text-transform:uppercase;font-family:var(--co-font-family-mono);font-size:var(--co-font-size-10);font-weight:400;color:var(--co-semantic-text-muted);line-height:110%;letter-spacing:0.08em;padding:var(--co-spacing-lg) var(--co-spacing-sm) var(--co-spacing-xs);user-select:none}.co-sidebar-nav__category-items{display:flex;flex-direction:column;gap:var(--co-spacing-xxs)}.co-sidebar-nav__category--min{display:flex;flex-direction:column;align-items:center;gap:var(--co-spacing-xxs)}.co-sidebar-nav__category--min+.co-sidebar-nav__category--min{margin-top:var(--co-spacing-md)}.co-sidebar-nav__item{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);border:none;background:none;cursor:pointer;width:100%;text-align:left;color:var(--co-semantic-text-default);transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:var(--co-font-weight-medium);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-sidebar-nav__item:hover{background:var(--co-semantic-surface-hover);color:var(--co-semantic-text-default)}.co-sidebar-nav__item--active{background:var(--co-sidebar-nav-active-bg, var(--co-semantic-surface-hover));color:var(--co-sidebar-nav-active-color, var(--co-color-primary-azul));font-weight:var(--co-font-weight-medium);--co-glass-blur:12px;--co-glass-saturate:1.3;-webkit-backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate));backdrop-filter:blur(var(--co-glass-blur)) saturate(var(--co-glass-saturate))}.co-sidebar-nav__item--active:hover{background:var(--co-sidebar-nav-active-bg-min, var(--co-sidebar-nav-active-bg, var(--co-semantic-surface-hover)));color:var(--co-sidebar-nav-active-color, var(--co-color-primary-azul))}.co-sidebar-nav__item-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px}.co-sidebar-nav__item-icon co-icon{color:inherit}.co-sidebar-nav__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.co-sidebar-nav__custom-icon{width:18px;height:18px;object-fit:contain;border-radius:var(--co-border-radius-xxs)}.co-sidebar-nav--min .co-sidebar-nav__item{width:36px;height:36px;padding:0;justify-content:center;border-radius:var(--co-border-radius-xs)}.co-sidebar-nav__flyout-anchor{position:relative}.co-sidebar-nav__flyout{position:fixed;min-width:180px;max-width:240px;background:var(--co-color-base-blanco);border:1px solid var(--co-color-opacity-negro-8);border-radius:var(--co-border-radius-sm);box-shadow:var(--co-shadow-lg);padding:var(--co-spacing-md);display:flex;flex-direction:column;z-index:9999;animation:co-flyout-in var(--co-motion-duration-fast) var(--co-motion-ease-out)}.co-sidebar-nav__flyout-title{text-transform:uppercase;font-family:var(--co-font-family-mono);font-size:var(--co-font-size-10);font-weight:400;color:var(--co-color-gray-500);line-height:110%;letter-spacing:var(--co-font-letter-spacing-overline);padding:var(--co-spacing-xxs) var(--co-spacing-sm) var(--co-spacing-xs);user-select:none}.co-sidebar-nav__flyout .co-sidebar-nav__item{width:100%;height:32px;padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);gap:var(--co-spacing-md);font-weight:var(--co-font-weight-regular);color:var(--co-color-base-negro);line-height:var(--co-font-line-height-none);justify-content:flex-start}.co-sidebar-nav__flyout .co-sidebar-nav__item:hover{background:var(--co-color-gray-100)}.co-sidebar-nav__flyout .co-sidebar-nav__item--active{background:var(--co-sidebar-nav-active-bg-min, var(--co-color-gray-100));color:var(--co-sidebar-nav-active-color, var(--co-color-primary-azul));font-weight:var(--co-font-weight-medium)}.co-sidebar-nav__flyout .co-sidebar-nav__item-icon{display:flex;width:24px;height:24px}.co-sidebar-nav__flyout .co-sidebar-nav__item-icon co-icon{color:var(--co-color-base-negro)}.co-sidebar-nav__flyout .co-sidebar-nav__item--active .co-sidebar-nav__item-icon co-icon{color:var(--co-sidebar-nav-active-color, var(--co-color-primary-azul))}@keyframes co-flyout-in{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}.co-sidebar-nav__expansion{display:flex;flex-direction:column}.co-sidebar-nav__expansion-header{display:flex;align-items:center;gap:var(--co-spacing-sm2);padding:var(--co-spacing-xs) var(--co-spacing-sm);border-radius:var(--co-border-radius-xs);border:none;background:none;cursor:pointer;width:100%;text-align:left;color:var(--co-semantic-text-secondary);transition:background var(--co-motion-duration-fast) var(--co-motion-ease-out), color var(--co-motion-duration-fast) var(--co-motion-ease-out);font-family:var(--co-font-family-primary);font-size:var(--co-font-size-14);font-weight:var(--co-font-weight-medium);letter-spacing:var(--co-font-letter-spacing-body);line-height:1}.co-sidebar-nav__expansion-header:hover{background:var(--co-semantic-surface-hover);color:var(--co-semantic-text-default)}.co-sidebar-nav__expansion--active>.co-sidebar-nav__expansion-header{color:var(--co-semantic-text-default)}.co-sidebar-nav__expansion-caret{margin-left:auto;flex-shrink:0;transition:transform var(--co-motion-duration-base) var(--co-motion-ease-out);color:var(--co-semantic-text-muted)}.co-sidebar-nav__expansion--expanded>.co-sidebar-nav__expansion-header .co-sidebar-nav__expansion-caret{transform:rotate(90deg)}.co-sidebar-nav__expansion-body{display:flex;flex-direction:column;gap:var(--co-spacing-xxs);overflow:hidden;max-height:0;opacity:0;transition:max-height var(--co-motion-duration-slow) var(--co-motion-ease-out), opacity var(--co-motion-duration-base) var(--co-motion-ease-out), padding var(--co-motion-duration-base) var(--co-motion-ease-out);padding-left:var(--co-spacing-xl)}.co-sidebar-nav__expansion--expanded>.co-sidebar-nav__expansion-body{max-height:1000px;opacity:1;padding-top:var(--co-spacing-xxs)}.co-sidebar-nav__highlight{all:unset;background-color:var(--co-color-primary-amarillo, #facc15);color:var(--co-color-base-negro, #000);border-radius:2px;padding:0 1px}'}},[1,"co-sidebar-nav",{items:[1],activeKey:[513,"active-key"],mode:[513],searchable:[4],searchPlaceholder:[1,"search-placeholder"],search:[1],iconMap:[1,"icon-map"],translations:[1],searchText:[32],expandedKeys:[32],flyoutKey:[32],flyoutPosition:[32]},void 0,{iconMap:[{onIconMapChange:0}],translations:[{onTranslationsChange:0}],search:[{onSearchChange:0}],activeKey:[{onActiveKeyChange:0}],items:[{onItemsChange:0}]}]);function h(){"undefined"!=typeof customElements&&["co-sidebar-nav","co-icon","co-tooltip"].forEach((a=>{switch(a){case"co-sidebar-nav":customElements.get(e(a))||customElements.define(e(a),d);break;case"co-icon":customElements.get(e(a))||n();break;case"co-tooltip":customElements.get(e(a))||c()}}))}h();const v=d,p=h;export{v as CoSidebarNav,p as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{C as o,d as s}from"./p-
|
|
1
|
+
import{C as o,d as s}from"./p-Bz0QZqnB.js";const p=o,r=s;export{p as CoTooltip,r as defineCustomElement}
|