@dropi/ui 0.1.5 → 0.1.7
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/dist/cjs/dropi-select.cjs.entry.js +1 -1
- package/dist/collection/components/dropi-select/dropi-select.css +2 -0
- package/dist/components/dropi-select.js +1 -1
- package/dist/dropi-ui/dropi-ui.esm.js +1 -1
- package/dist/dropi-ui/p-0faaab2b.entry.js +1 -0
- package/dist/esm/dropi-select.entry.js +1 -1
- package/package.json +1 -1
- package/readme.md +1 -1
- package/scripts/postinstall.js +23 -1
- package/dist/dropi-ui/p-c7b9cbda.entry.js +0 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-CuGLZVqo.js');
|
|
4
4
|
|
|
5
|
-
const dropiSelectCss = () => `:host{display:block;width:100
|
|
5
|
+
const dropiSelectCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.2s ease;gap:8px}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button-error{border-color:var(--Error-Error-500, #f46a6b) !important}.no-border{border:none !important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);background-color:transparent !important;gap:var(--Size-2, 8px)}.no-border:disabled{background-color:transparent !important}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;min-width:0}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-dropdown-overlay{position:fixed;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);margin:0;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12);z-index:9999;animation:dropdown-open 120ms ease-out}@keyframes dropdown-open{from{opacity:0;transform:scaleY(0.95);transform-origin:top}to{opacity:1;transform:scaleY(1);transform-origin:top}}.option{box-sizing:border-box;width:100%;min-height:40px;border-radius:var(--Border-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--Size-2, 8px);transition:background 0.15s ease}.option:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled,.disabled-option{opacity:0.5;cursor:not-allowed}.option.selected-option:not(.option-radio){background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-group-title{padding:var(--Size-3, 12px) var(--Size-4, 16px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Gray-Gray-500, #69738c);list-style:none}.option-group{padding-left:var(--Size-6, 32px)}.sticky-search{position:sticky;top:calc(-1 * var(--Size-4, 16px));background:var(--Neutral-White, #fff);z-index:10;margin:calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;padding:var(--Size-2, 8px) var(--Size-4, 16px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);list-style:none}.search-wrapper{display:flex;align-items:center;gap:8px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);padding:6px 10px;background:var(--Neutral-White, #fff)}.search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.multi-checkbox{width:18px;height:18px;min-width:18px;border-radius:var(--Border-1, 4px);border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s, border-color 0.15s}.multi-checkbox.checked{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.option-radio{display:flex;align-items:center;gap:12px}.option-radio.selected-option{border-radius:var(--Border-2, 8px);background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-radio.selected-option .option-second-label{color:var(--Primary-Primary-500, #f49a3d)}.radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.circle{width:12px;height:12px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.labels-container{display:flex;justify-content:space-between;width:100%;min-width:0}.option-image{width:24px;height:24px;border-radius:60px;object-fit:cover;flex-shrink:0}.small-image{width:20px;height:20px}.option-image-fallback{width:24px;height:24px;border-radius:60px;background:var(--Primary-Primary-500, #f49a3d);color:white;font-size:13px;font-weight:bold;display:flex;justify-content:center;align-items:center;flex-shrink:0}.small-image.option-image-fallback{width:20px;height:20px}.option-second-label{color:var(--Gray-Gray-700, #32394d);font-weight:700;white-space:nowrap}.flag-placeholder{font-size:11px;font-weight:600;color:var(--Gray-Gray-500, #69738c);flex-shrink:0}.select-helper,.select-helper-error{display:flex;gap:var(--Size-1, 4px);align-items:center;margin-top:var(--Size-1, 4px)}.select-helper span{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.select-helper-error span{color:var(--Error-Error-500, #f46a6b);font-size:var(--font-size-xs, 10px)}.no-results{padding:var(--Size-3, 12px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px);list-style:none;text-align:center}`;
|
|
6
6
|
|
|
7
7
|
const DropiSelect = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
display: block;
|
|
3
3
|
width: 100%;
|
|
4
|
+
text-align: left;
|
|
4
5
|
}
|
|
5
6
|
|
|
6
7
|
*, *::before, *::after { box-sizing: border-box; }
|
|
@@ -12,6 +13,7 @@
|
|
|
12
13
|
}
|
|
13
14
|
|
|
14
15
|
.custom-select label {
|
|
16
|
+
display: block;
|
|
15
17
|
font-size: var(--font-size-xs, 10px);
|
|
16
18
|
font-weight: var(--font-weight-regular, 400);
|
|
17
19
|
color: var(--Gray-Gray-600, #475066);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e,p as t,H as i,c as r,h as o}from"./index.js";import{d as s}from"./p-MNma8N1x.js";const a=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiChange=r(this,"dropiChange"),this.dropiClear=r(this,"dropiClear"),this.dropiSearch=r(this,"dropiSearch"),this.dropiScrollEnd=r(this,"dropiScrollEnd"),this.dropiKeyEnter=r(this,"dropiKeyEnter"),this.internals=this.attachInternals()}get el(){return this}internals;buttonRef;scrollDebounce;hasEmittedScrollEnd=!1;lastScrollTop=0;label="";placeholder="Seleccionar";options=[];name="";disabled=!1;invalid=!1;errorText="";helperText="";showObligatory=!1;searchEnabled=!1;multiSelect=!1;dropdownType=!1;showCountryFlags=!1;radioOptions=!1;placeHolderSearch="Buscar";preIcon="";defaultSelectedId="";value=null;isOpen=!1;selectedOption=null;multiSelected=[];filteredOptions=[];searchTerm="";dropdownStyle={top:"0px",left:"0px",width:"0px"};dropiChange;dropiClear;dropiSearch;dropiScrollEnd;dropiKeyEnter;componentWillLoad(){this.normalizeOptions(),this.filteredOptions=[...this.options],this.applyDefaultSelection()}optionsChanged(){this.normalizeOptions(),this.filteredOptions=[...this.options],this.applyDefaultSelection()}normalizeOptions(){if("string"==typeof this.options)try{this.options=JSON.parse(this.options)}catch(e){this.options=[]}}defaultChanged(e){this.applyDefaultSelection(e)}valueChanged(e){this.selectedOption=e,this.internals.setFormValue(e?e.id+"":"")}async setById(e){const t=this.options.find((t=>t.id===e||t.id+""==e+""));t&&this.selectOption(t)}async setByLabel(e){const t=this.options.find((t=>t.label===e));t&&this.selectOption(t)}async clearSelection(){this.selectedOption=null,this.multiSelected=[],this.internals.setFormValue(""),this.dropiClear.emit()}async resetMultiSelect(e){this.multiSelected=[],this.internals.setFormValue("")}handleOutsideClick(e){this.el.contains(e.target)||this.closeDropdown()}applyDefaultSelection(e){const t=e??this.defaultSelectedId;if(""===t||null==t)return;const i=this.flatOptions().find((e=>e.id===t||e.id+""==t+""));i&&(this.selectedOption=i,this.internals.setFormValue(i.id+""))}flatOptions(){return this.options?.length?"category"in this.options[0]?this.options.flatMap((e=>e.options)):this.options:[]}get isGrouped(){return this.options?.length>0&&"category"in this.options[0]}get triggerLabel(){return this.multiSelect?this.multiSelected.length?this.multiSelected.map((e=>e.label)).join(", "):this.placeholder:this.selectedOption?this.showCountryFlags&&this.selectedOption.shortLabel?this.selectedOption.shortLabel:this.selectedOption.label:this.placeholder}openDropdown(){if(this.disabled)return;const e=this.buttonRef.getBoundingClientRect(),t=window.innerHeight;this.dropdownStyle={top:(t-e.bottom>=250?e.bottom+4:e.top-250-4)+"px",left:e.left+"px",width:e.width+"px"},this.isOpen=!0,this.searchEnabled&&setTimeout((()=>{const e=this.el.shadowRoot?.querySelector(".search-input");e?.focus()}),50)}closeDropdown(){this.isOpen=!1,this.searchTerm="",this.filteredOptions=[...this.options]}toggleDropdown(){this.isOpen?this.closeDropdown():this.openDropdown()}selectOption(e){if(!e.disabled)if(this.multiSelect){const t=this.multiSelected.findIndex((t=>t.id===e.id));this.multiSelected=t>=0?this.multiSelected.filter((t=>t.id!==e.id)):[...this.multiSelected,e],this.internals.setFormValue(this.multiSelected.map((e=>e.id)).join(",")),this.dropiChange.emit([...this.multiSelected])}else this.selectedOption=e,this.internals.setFormValue(e.id+""),this.dropiChange.emit(e),this.closeDropdown()}isOptionChecked(e){return this.multiSelected.some((t=>t.id===e.id))}handleSearch(e){this.searchTerm=e,this.dropiSearch.emit(e);const t=e.toLowerCase().trim();this.filteredOptions=t?this.isGrouped?this.options.map((e=>({...e,options:e.options.filter((e=>e.label.toLowerCase().includes(t)))}))).filter((e=>e.options.length>0)):this.options.filter((e=>e.label.toLowerCase().includes(t))):[...this.options]}handleScroll(e){const t=e.target;clearTimeout(this.scrollDebounce),this.scrollDebounce=setTimeout((()=>{if(!t)return;const e=t.scrollHeight-t.scrollTop-t.clientHeight,i=Math.min(50,t.clientHeight/2);t.scrollTop<this.lastScrollTop&&(this.hasEmittedScrollEnd=!1),this.lastScrollTop=t.scrollTop,e<=i&&!this.hasEmittedScrollEnd&&(this.dropiScrollEnd.emit(),this.hasEmittedScrollEnd=!0,setTimeout((()=>{this.hasEmittedScrollEnd=!1}),1e3))}),100)}renderTrigger(){const e=this.disabled?"Gray-Gray-300":this.dropdownType?"Gray-Gray-600":"Gray-Gray-400",t=this.dropdownType?"24px":"20px";return o("button",{type:"button",class:{"select-button":!0,"select-completed":this.multiSelect?this.multiSelected.length>0:!!this.selectedOption,"select-button-error":this.invalid,"no-border":this.dropdownType},disabled:this.disabled,ref:e=>this.buttonRef=e,onClick:()=>this.toggleDropdown()},o("div",{class:{"button-content":!0,"option-radio":this.radioOptions&&!!this.selectedOption&&!this.multiSelect}},this.preIcon&&o("dropi-icon",{name:this.preIcon,width:"20px",height:"20px",color:"Gray-Gray-500"}),this.radioOptions&&this.selectedOption&&!this.multiSelect&&[this.selectedOption.imageUrl&&!this.selectedOption.isFallback?o("img",{class:"option-image small-image",src:this.selectedOption.imageUrl,alt:"",onError:()=>{this.selectedOption&&(this.selectedOption={...this.selectedOption,isFallback:!0})}}):this.selectedOption.isFallback?o("span",{class:"option-image-fallback small-image"},this.selectedOption.label.charAt(0).toUpperCase()):null,o("div",{class:"labels-container elipsis"},o("span",null,this.selectedOption.label),this.selectedOption.secondLabel&&o("span",{class:"option-second-label"},this.selectedOption.secondLabel))],!(this.radioOptions&&this.selectedOption&&!this.multiSelect)&&o("div",{class:"elipsis"},this.triggerLabel)),o("dropi-icon",{name:this.isOpen?"Dropdown-up":"Dropdown-down",width:t,height:t,color:e}))}renderOption(e){const t=this.multiSelect?this.isOptionChecked(e):this.selectedOption?.id===e.id;return o("li",{key:e.id},o("button",{type:"button",class:{option:!0,"option-radio":this.radioOptions,"option-with-flag":this.showCountryFlags&&!!e.countryCode,"disabled-option":!!e.disabled,"selected-option":t},disabled:e.disabled,onClick:()=>this.selectOption(e)},this.multiSelect&&o("span",{class:{"multi-checkbox":!0,checked:t}},t&&o("svg",{width:"10",height:"10",viewBox:"0 0 24 24",fill:"none"},o("path",{d:"M20.6 5.7L9.1 17.2c-.2.2-.5.3-.8.3s-.6-.1-.8-.3L3 12.8c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l3.9 3.9L19.2 4.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4z",fill:"white"}))),this.radioOptions&&o("div",{class:{radio:!0,selected:t}},t&&o("div",{class:"circle"})),!this.radioOptions&&e.preIcon&&o("dropi-icon",{name:e.preIcon,width:"20px",height:"20px",color:"Gray-Gray-500"}),this.radioOptions&&e.imageUrl&&!e.isFallback&&o("img",{class:"option-image",src:e.imageUrl,alt:"",onError:()=>{e.isFallback=!0,this.options=[...this.options]}}),this.radioOptions&&e.isFallback&&o("span",{class:"option-image-fallback"},e.label.charAt(0).toUpperCase()),this.showCountryFlags&&e.countryCode&&o("span",{class:"flag-placeholder"},e.countryCode),this.radioOptions?o("div",{class:"labels-container"},o("span",{class:"elipsis"},e.label),e.secondLabel&&o("span",{class:"option-second-label"},e.secondLabel)):o("span",{class:"elipsis"},this.showCountryFlags&&e.shortLabel?e.shortLabel:e.label)))}renderDropdown(){return this.isOpen?o("ul",{class:"select-dropdown-overlay",style:this.dropdownStyle,onScroll:e=>this.handleScroll(e)},this.searchEnabled&&o("li",{class:"sticky-search"},o("div",{class:"search-wrapper"},o("dropi-icon",{name:"Search",width:"16px",height:"16px",color:"Gray-Gray-400"}),o("input",{class:"search-input",type:"text",placeholder:this.placeHolderSearch,value:this.searchTerm,onInput:e=>this.handleSearch(e.target.value),onKeyDown:e=>{"Enter"===e.key&&this.dropiKeyEnter.emit(e)}}),this.searchTerm&&o("button",{type:"button",class:"search-clear",onClick:()=>this.handleSearch("")},o("dropi-icon",{name:"Close",width:"14px",height:"14px",color:"Gray-Gray-400"})))),this.isGrouped&&this.filteredOptions.map((e=>[o("li",{class:"option-group-title"},e.category),...e.options.map((e=>o("li",{key:e.id},o("button",{type:"button",class:{option:!0,"option-group":!0,"disabled-option":!!e.disabled},disabled:e.disabled,onClick:()=>this.selectOption(e)},e.preIcon&&o("dropi-icon",{name:e.preIcon,width:"20px",height:"20px",color:"Gray-Gray-500"}),o("span",{class:"elipsis"},e.label)))))])),!this.isGrouped&&this.filteredOptions.map((e=>this.renderOption(e))),0===this.filteredOptions.length&&o("li",{class:"no-results"},"Sin resultados")):null}render(){return o("div",{key:"94383b3267955dcb8d1a6c523730e291976157b2",class:"custom-select"},!this.dropdownType&&this.label&&o("label",{key:"4ff14d77b301a275f6c608d227361ff2829ac7a1",class:{"disabled-label":this.disabled}},this.label,this.showObligatory&&!this.disabled&&o("span",{key:"8345af7646d8cea8e66c996f0eb4abf210c9d211",class:"asterisk"}," *")),o("div",{key:"290a9521e39c2e1bdb1a8aacf35b2b22bf4966de",class:"dropdown-container"},this.dropdownType&&this.label&&o("div",{key:"a9ad2741e23d31b3b0dc69a3aa89f54eaa291b04",class:"left-label"},this.label),this.renderTrigger()),this.helperText&&!this.invalid&&o("div",{key:"8dd7cd895c1124b07020f396ac316390d4ee8cc8",class:"select-helper"},o("span",{key:"cdcaeb30b27baf4441d6ef87f6f553fd2b73e145"},this.helperText)),this.invalid&&this.errorText&&o("div",{key:"8e1a4da603de7b6c730a9946b63652fbe5e68321",class:"select-helper-error"},o("dropi-icon",{key:"f831c9f543c4f4be52d969f1d26f7d7e8816d08f",name:"Warning-circle",width:"12px",height:"12px",color:"Error-Error-500"}),o("span",{key:"1eefbade098b9743b23abee3e43836ed33ecbadb"},this.errorText)),this.renderDropdown())}static get formAssociated(){return!0}static get watchers(){return{options:[{optionsChanged:0}],defaultSelectedId:[{defaultChanged:0}],value:[{valueChanged:0}]}}static get style(){return":host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.2s ease;gap:8px}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button-error{border-color:var(--Error-Error-500, #f46a6b) !important}.no-border{border:none !important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);background-color:transparent !important;gap:var(--Size-2, 8px)}.no-border:disabled{background-color:transparent !important}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;min-width:0}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-dropdown-overlay{position:fixed;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);margin:0;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12);z-index:9999;animation:dropdown-open 120ms ease-out}@keyframes dropdown-open{from{opacity:0;transform:scaleY(0.95);transform-origin:top}to{opacity:1;transform:scaleY(1);transform-origin:top}}.option{box-sizing:border-box;width:100%;min-height:40px;border-radius:var(--Border-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--Size-2, 8px);transition:background 0.15s ease}.option:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled,.disabled-option{opacity:0.5;cursor:not-allowed}.option.selected-option:not(.option-radio){background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-group-title{padding:var(--Size-3, 12px) var(--Size-4, 16px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Gray-Gray-500, #69738c);list-style:none}.option-group{padding-left:var(--Size-6, 32px)}.sticky-search{position:sticky;top:calc(-1 * var(--Size-4, 16px));background:var(--Neutral-White, #fff);z-index:10;margin:calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;padding:var(--Size-2, 8px) var(--Size-4, 16px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);list-style:none}.search-wrapper{display:flex;align-items:center;gap:8px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);padding:6px 10px;background:var(--Neutral-White, #fff)}.search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.multi-checkbox{width:18px;height:18px;min-width:18px;border-radius:var(--Border-1, 4px);border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s, border-color 0.15s}.multi-checkbox.checked{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.option-radio{display:flex;align-items:center;gap:12px}.option-radio.selected-option{border-radius:var(--Border-2, 8px);background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-radio.selected-option .option-second-label{color:var(--Primary-Primary-500, #f49a3d)}.radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.circle{width:12px;height:12px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.labels-container{display:flex;justify-content:space-between;width:100%;min-width:0}.option-image{width:24px;height:24px;border-radius:60px;object-fit:cover;flex-shrink:0}.small-image{width:20px;height:20px}.option-image-fallback{width:24px;height:24px;border-radius:60px;background:var(--Primary-Primary-500, #f49a3d);color:white;font-size:13px;font-weight:bold;display:flex;justify-content:center;align-items:center;flex-shrink:0}.small-image.option-image-fallback{width:20px;height:20px}.option-second-label{color:var(--Gray-Gray-700, #32394d);font-weight:700;white-space:nowrap}.flag-placeholder{font-size:11px;font-weight:600;color:var(--Gray-Gray-500, #69738c);flex-shrink:0}.select-helper,.select-helper-error{display:flex;gap:var(--Size-1, 4px);align-items:center;margin-top:var(--Size-1, 4px)}.select-helper span{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.select-helper-error span{color:var(--Error-Error-500, #f46a6b);font-size:var(--font-size-xs, 10px)}.no-results{padding:var(--Size-3, 12px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px);list-style:none;text-align:center}"}},[577,"dropi-select",{label:[1],placeholder:[1],options:[1040],name:[1],disabled:[516],invalid:[4],errorText:[1,"error-text"],helperText:[1,"helper-text"],showObligatory:[4,"show-obligatory"],searchEnabled:[4,"search-enabled"],multiSelect:[4,"multi-select"],dropdownType:[4,"dropdown-type"],showCountryFlags:[4,"show-country-flags"],radioOptions:[4,"radio-options"],placeHolderSearch:[1,"place-holder-search"],preIcon:[1,"pre-icon"],defaultSelectedId:[1032,"default-selected-id"],value:[1040],isOpen:[32],selectedOption:[32],multiSelected:[32],filteredOptions:[32],searchTerm:[32],dropdownStyle:[32],setById:[64],setByLabel:[64],clearSelection:[64],resetMultiSelect:[64]},[[4,"click","handleOutsideClick"]],{options:[{optionsChanged:0}],defaultSelectedId:[{defaultChanged:0}],value:[{valueChanged:0}]}]);function n(){"undefined"!=typeof customElements&&["dropi-select","dropi-icon"].forEach((t=>{switch(t){case"dropi-select":customElements.get(e(t))||customElements.define(e(t),a);break;case"dropi-icon":customElements.get(e(t))||s()}}))}n();const l=a,d=n;export{l as DropiSelect,d as defineCustomElement}
|
|
1
|
+
import{t as e,p as t,H as i,c as r,h as o}from"./index.js";import{d as a}from"./p-MNma8N1x.js";const s=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiChange=r(this,"dropiChange"),this.dropiClear=r(this,"dropiClear"),this.dropiSearch=r(this,"dropiSearch"),this.dropiScrollEnd=r(this,"dropiScrollEnd"),this.dropiKeyEnter=r(this,"dropiKeyEnter"),this.internals=this.attachInternals()}get el(){return this}internals;buttonRef;scrollDebounce;hasEmittedScrollEnd=!1;lastScrollTop=0;label="";placeholder="Seleccionar";options=[];name="";disabled=!1;invalid=!1;errorText="";helperText="";showObligatory=!1;searchEnabled=!1;multiSelect=!1;dropdownType=!1;showCountryFlags=!1;radioOptions=!1;placeHolderSearch="Buscar";preIcon="";defaultSelectedId="";value=null;isOpen=!1;selectedOption=null;multiSelected=[];filteredOptions=[];searchTerm="";dropdownStyle={top:"0px",left:"0px",width:"0px"};dropiChange;dropiClear;dropiSearch;dropiScrollEnd;dropiKeyEnter;componentWillLoad(){this.normalizeOptions(),this.filteredOptions=[...this.options],this.applyDefaultSelection()}optionsChanged(){this.normalizeOptions(),this.filteredOptions=[...this.options],this.applyDefaultSelection()}normalizeOptions(){if("string"==typeof this.options)try{this.options=JSON.parse(this.options)}catch(e){this.options=[]}}defaultChanged(e){this.applyDefaultSelection(e)}valueChanged(e){this.selectedOption=e,this.internals.setFormValue(e?e.id+"":"")}async setById(e){const t=this.options.find((t=>t.id===e||t.id+""==e+""));t&&this.selectOption(t)}async setByLabel(e){const t=this.options.find((t=>t.label===e));t&&this.selectOption(t)}async clearSelection(){this.selectedOption=null,this.multiSelected=[],this.internals.setFormValue(""),this.dropiClear.emit()}async resetMultiSelect(e){this.multiSelected=[],this.internals.setFormValue("")}handleOutsideClick(e){this.el.contains(e.target)||this.closeDropdown()}applyDefaultSelection(e){const t=e??this.defaultSelectedId;if(""===t||null==t)return;const i=this.flatOptions().find((e=>e.id===t||e.id+""==t+""));i&&(this.selectedOption=i,this.internals.setFormValue(i.id+""))}flatOptions(){return this.options?.length?"category"in this.options[0]?this.options.flatMap((e=>e.options)):this.options:[]}get isGrouped(){return this.options?.length>0&&"category"in this.options[0]}get triggerLabel(){return this.multiSelect?this.multiSelected.length?this.multiSelected.map((e=>e.label)).join(", "):this.placeholder:this.selectedOption?this.showCountryFlags&&this.selectedOption.shortLabel?this.selectedOption.shortLabel:this.selectedOption.label:this.placeholder}openDropdown(){if(this.disabled)return;const e=this.buttonRef.getBoundingClientRect(),t=window.innerHeight;this.dropdownStyle={top:(t-e.bottom>=250?e.bottom+4:e.top-250-4)+"px",left:e.left+"px",width:e.width+"px"},this.isOpen=!0,this.searchEnabled&&setTimeout((()=>{const e=this.el.shadowRoot?.querySelector(".search-input");e?.focus()}),50)}closeDropdown(){this.isOpen=!1,this.searchTerm="",this.filteredOptions=[...this.options]}toggleDropdown(){this.isOpen?this.closeDropdown():this.openDropdown()}selectOption(e){if(!e.disabled)if(this.multiSelect){const t=this.multiSelected.findIndex((t=>t.id===e.id));this.multiSelected=t>=0?this.multiSelected.filter((t=>t.id!==e.id)):[...this.multiSelected,e],this.internals.setFormValue(this.multiSelected.map((e=>e.id)).join(",")),this.dropiChange.emit([...this.multiSelected])}else this.selectedOption=e,this.internals.setFormValue(e.id+""),this.dropiChange.emit(e),this.closeDropdown()}isOptionChecked(e){return this.multiSelected.some((t=>t.id===e.id))}handleSearch(e){this.searchTerm=e,this.dropiSearch.emit(e);const t=e.toLowerCase().trim();this.filteredOptions=t?this.isGrouped?this.options.map((e=>({...e,options:e.options.filter((e=>e.label.toLowerCase().includes(t)))}))).filter((e=>e.options.length>0)):this.options.filter((e=>e.label.toLowerCase().includes(t))):[...this.options]}handleScroll(e){const t=e.target;clearTimeout(this.scrollDebounce),this.scrollDebounce=setTimeout((()=>{if(!t)return;const e=t.scrollHeight-t.scrollTop-t.clientHeight,i=Math.min(50,t.clientHeight/2);t.scrollTop<this.lastScrollTop&&(this.hasEmittedScrollEnd=!1),this.lastScrollTop=t.scrollTop,e<=i&&!this.hasEmittedScrollEnd&&(this.dropiScrollEnd.emit(),this.hasEmittedScrollEnd=!0,setTimeout((()=>{this.hasEmittedScrollEnd=!1}),1e3))}),100)}renderTrigger(){const e=this.disabled?"Gray-Gray-300":this.dropdownType?"Gray-Gray-600":"Gray-Gray-400",t=this.dropdownType?"24px":"20px";return o("button",{type:"button",class:{"select-button":!0,"select-completed":this.multiSelect?this.multiSelected.length>0:!!this.selectedOption,"select-button-error":this.invalid,"no-border":this.dropdownType},disabled:this.disabled,ref:e=>this.buttonRef=e,onClick:()=>this.toggleDropdown()},o("div",{class:{"button-content":!0,"option-radio":this.radioOptions&&!!this.selectedOption&&!this.multiSelect}},this.preIcon&&o("dropi-icon",{name:this.preIcon,width:"20px",height:"20px",color:"Gray-Gray-500"}),this.radioOptions&&this.selectedOption&&!this.multiSelect&&[this.selectedOption.imageUrl&&!this.selectedOption.isFallback?o("img",{class:"option-image small-image",src:this.selectedOption.imageUrl,alt:"",onError:()=>{this.selectedOption&&(this.selectedOption={...this.selectedOption,isFallback:!0})}}):this.selectedOption.isFallback?o("span",{class:"option-image-fallback small-image"},this.selectedOption.label.charAt(0).toUpperCase()):null,o("div",{class:"labels-container elipsis"},o("span",null,this.selectedOption.label),this.selectedOption.secondLabel&&o("span",{class:"option-second-label"},this.selectedOption.secondLabel))],!(this.radioOptions&&this.selectedOption&&!this.multiSelect)&&o("div",{class:"elipsis"},this.triggerLabel)),o("dropi-icon",{name:this.isOpen?"Dropdown-up":"Dropdown-down",width:t,height:t,color:e}))}renderOption(e){const t=this.multiSelect?this.isOptionChecked(e):this.selectedOption?.id===e.id;return o("li",{key:e.id},o("button",{type:"button",class:{option:!0,"option-radio":this.radioOptions,"option-with-flag":this.showCountryFlags&&!!e.countryCode,"disabled-option":!!e.disabled,"selected-option":t},disabled:e.disabled,onClick:()=>this.selectOption(e)},this.multiSelect&&o("span",{class:{"multi-checkbox":!0,checked:t}},t&&o("svg",{width:"10",height:"10",viewBox:"0 0 24 24",fill:"none"},o("path",{d:"M20.6 5.7L9.1 17.2c-.2.2-.5.3-.8.3s-.6-.1-.8-.3L3 12.8c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l3.9 3.9L19.2 4.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4z",fill:"white"}))),this.radioOptions&&o("div",{class:{radio:!0,selected:t}},t&&o("div",{class:"circle"})),!this.radioOptions&&e.preIcon&&o("dropi-icon",{name:e.preIcon,width:"20px",height:"20px",color:"Gray-Gray-500"}),this.radioOptions&&e.imageUrl&&!e.isFallback&&o("img",{class:"option-image",src:e.imageUrl,alt:"",onError:()=>{e.isFallback=!0,this.options=[...this.options]}}),this.radioOptions&&e.isFallback&&o("span",{class:"option-image-fallback"},e.label.charAt(0).toUpperCase()),this.showCountryFlags&&e.countryCode&&o("span",{class:"flag-placeholder"},e.countryCode),this.radioOptions?o("div",{class:"labels-container"},o("span",{class:"elipsis"},e.label),e.secondLabel&&o("span",{class:"option-second-label"},e.secondLabel)):o("span",{class:"elipsis"},this.showCountryFlags&&e.shortLabel?e.shortLabel:e.label)))}renderDropdown(){return this.isOpen?o("ul",{class:"select-dropdown-overlay",style:this.dropdownStyle,onScroll:e=>this.handleScroll(e)},this.searchEnabled&&o("li",{class:"sticky-search"},o("div",{class:"search-wrapper"},o("dropi-icon",{name:"Search",width:"16px",height:"16px",color:"Gray-Gray-400"}),o("input",{class:"search-input",type:"text",placeholder:this.placeHolderSearch,value:this.searchTerm,onInput:e=>this.handleSearch(e.target.value),onKeyDown:e=>{"Enter"===e.key&&this.dropiKeyEnter.emit(e)}}),this.searchTerm&&o("button",{type:"button",class:"search-clear",onClick:()=>this.handleSearch("")},o("dropi-icon",{name:"Close",width:"14px",height:"14px",color:"Gray-Gray-400"})))),this.isGrouped&&this.filteredOptions.map((e=>[o("li",{class:"option-group-title"},e.category),...e.options.map((e=>o("li",{key:e.id},o("button",{type:"button",class:{option:!0,"option-group":!0,"disabled-option":!!e.disabled},disabled:e.disabled,onClick:()=>this.selectOption(e)},e.preIcon&&o("dropi-icon",{name:e.preIcon,width:"20px",height:"20px",color:"Gray-Gray-500"}),o("span",{class:"elipsis"},e.label)))))])),!this.isGrouped&&this.filteredOptions.map((e=>this.renderOption(e))),0===this.filteredOptions.length&&o("li",{class:"no-results"},"Sin resultados")):null}render(){return o("div",{key:"94383b3267955dcb8d1a6c523730e291976157b2",class:"custom-select"},!this.dropdownType&&this.label&&o("label",{key:"4ff14d77b301a275f6c608d227361ff2829ac7a1",class:{"disabled-label":this.disabled}},this.label,this.showObligatory&&!this.disabled&&o("span",{key:"8345af7646d8cea8e66c996f0eb4abf210c9d211",class:"asterisk"}," *")),o("div",{key:"290a9521e39c2e1bdb1a8aacf35b2b22bf4966de",class:"dropdown-container"},this.dropdownType&&this.label&&o("div",{key:"a9ad2741e23d31b3b0dc69a3aa89f54eaa291b04",class:"left-label"},this.label),this.renderTrigger()),this.helperText&&!this.invalid&&o("div",{key:"8dd7cd895c1124b07020f396ac316390d4ee8cc8",class:"select-helper"},o("span",{key:"cdcaeb30b27baf4441d6ef87f6f553fd2b73e145"},this.helperText)),this.invalid&&this.errorText&&o("div",{key:"8e1a4da603de7b6c730a9946b63652fbe5e68321",class:"select-helper-error"},o("dropi-icon",{key:"f831c9f543c4f4be52d969f1d26f7d7e8816d08f",name:"Warning-circle",width:"12px",height:"12px",color:"Error-Error-500"}),o("span",{key:"1eefbade098b9743b23abee3e43836ed33ecbadb"},this.errorText)),this.renderDropdown())}static get formAssociated(){return!0}static get watchers(){return{options:[{optionsChanged:0}],defaultSelectedId:[{defaultChanged:0}],value:[{valueChanged:0}]}}static get style(){return":host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.2s ease;gap:8px}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button-error{border-color:var(--Error-Error-500, #f46a6b) !important}.no-border{border:none !important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);background-color:transparent !important;gap:var(--Size-2, 8px)}.no-border:disabled{background-color:transparent !important}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;min-width:0}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-dropdown-overlay{position:fixed;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);margin:0;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12);z-index:9999;animation:dropdown-open 120ms ease-out}@keyframes dropdown-open{from{opacity:0;transform:scaleY(0.95);transform-origin:top}to{opacity:1;transform:scaleY(1);transform-origin:top}}.option{box-sizing:border-box;width:100%;min-height:40px;border-radius:var(--Border-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--Size-2, 8px);transition:background 0.15s ease}.option:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled,.disabled-option{opacity:0.5;cursor:not-allowed}.option.selected-option:not(.option-radio){background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-group-title{padding:var(--Size-3, 12px) var(--Size-4, 16px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Gray-Gray-500, #69738c);list-style:none}.option-group{padding-left:var(--Size-6, 32px)}.sticky-search{position:sticky;top:calc(-1 * var(--Size-4, 16px));background:var(--Neutral-White, #fff);z-index:10;margin:calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;padding:var(--Size-2, 8px) var(--Size-4, 16px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);list-style:none}.search-wrapper{display:flex;align-items:center;gap:8px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);padding:6px 10px;background:var(--Neutral-White, #fff)}.search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.multi-checkbox{width:18px;height:18px;min-width:18px;border-radius:var(--Border-1, 4px);border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s, border-color 0.15s}.multi-checkbox.checked{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.option-radio{display:flex;align-items:center;gap:12px}.option-radio.selected-option{border-radius:var(--Border-2, 8px);background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-radio.selected-option .option-second-label{color:var(--Primary-Primary-500, #f49a3d)}.radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.circle{width:12px;height:12px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.labels-container{display:flex;justify-content:space-between;width:100%;min-width:0}.option-image{width:24px;height:24px;border-radius:60px;object-fit:cover;flex-shrink:0}.small-image{width:20px;height:20px}.option-image-fallback{width:24px;height:24px;border-radius:60px;background:var(--Primary-Primary-500, #f49a3d);color:white;font-size:13px;font-weight:bold;display:flex;justify-content:center;align-items:center;flex-shrink:0}.small-image.option-image-fallback{width:20px;height:20px}.option-second-label{color:var(--Gray-Gray-700, #32394d);font-weight:700;white-space:nowrap}.flag-placeholder{font-size:11px;font-weight:600;color:var(--Gray-Gray-500, #69738c);flex-shrink:0}.select-helper,.select-helper-error{display:flex;gap:var(--Size-1, 4px);align-items:center;margin-top:var(--Size-1, 4px)}.select-helper span{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.select-helper-error span{color:var(--Error-Error-500, #f46a6b);font-size:var(--font-size-xs, 10px)}.no-results{padding:var(--Size-3, 12px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px);list-style:none;text-align:center}"}},[577,"dropi-select",{label:[1],placeholder:[1],options:[1040],name:[1],disabled:[516],invalid:[4],errorText:[1,"error-text"],helperText:[1,"helper-text"],showObligatory:[4,"show-obligatory"],searchEnabled:[4,"search-enabled"],multiSelect:[4,"multi-select"],dropdownType:[4,"dropdown-type"],showCountryFlags:[4,"show-country-flags"],radioOptions:[4,"radio-options"],placeHolderSearch:[1,"place-holder-search"],preIcon:[1,"pre-icon"],defaultSelectedId:[1032,"default-selected-id"],value:[1040],isOpen:[32],selectedOption:[32],multiSelected:[32],filteredOptions:[32],searchTerm:[32],dropdownStyle:[32],setById:[64],setByLabel:[64],clearSelection:[64],resetMultiSelect:[64]},[[4,"click","handleOutsideClick"]],{options:[{optionsChanged:0}],defaultSelectedId:[{defaultChanged:0}],value:[{valueChanged:0}]}]);function n(){"undefined"!=typeof customElements&&["dropi-select","dropi-icon"].forEach((t=>{switch(t){case"dropi-select":customElements.get(e(t))||customElements.define(e(t),s);break;case"dropi-icon":customElements.get(e(t))||a()}}))}n();const l=s,d=n;export{l as DropiSelect,d as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,g as o,b as t}from"./p-DFz-gwFP.js";export{s as setNonce}from"./p-DFz-gwFP.js";(()=>{const o=import.meta.url,t={};return""!==o&&(t.resourcesUrl=new URL(".",o).href),e(t)})().then((async e=>(await o(),t([["p-6f0aa619",[[513,"dropi-icon",{name:[1],width:[1],height:[1],color:[1]},null,{color:[{colorChanged:0}]}]]],["p-21abf91a",[[769,"dropi-button",{type:[1],severity:[1],size:[1],state:[1],preIcon:[1,"pre-icon"],postIcon:[1,"post-icon"],text:[1]}]]],["p-a46a05a6",[[577,"dropi-input",{inputId:[1,"input-id"],name:[1],label:[1],placeholder:[1],value:[1025],maxlength:[2],disabled:[516],required:[516],showAsterisk:[4,"show-asterisk"],fixedLabel:[4,"fixed-label"],inputMode:[1,"input-mode"],passwordInput:[4,"password-input"],moneyFormat:[4,"money-format"],thousandSeparator:[4,"thousand-separator"],onlyNumbers:[4,"only-numbers"],allowDecimals:[4,"allow-decimals"],onlyLetters:[4,"only-letters"],icon:[1],iconColor:[1,"icon-color"],invalid:[4],helperText:[1,"helper-text"],showHelperOnlyOnError:[4,"show-helper-only-on-error"],showPassword:[32],touched:[32]},null,{value:[{valueChanged:0}],disabled:[{disabledChanged:0}]}]]],["p-
|
|
1
|
+
import{p as e,g as o,b as t}from"./p-DFz-gwFP.js";export{s as setNonce}from"./p-DFz-gwFP.js";(()=>{const o=import.meta.url,t={};return""!==o&&(t.resourcesUrl=new URL(".",o).href),e(t)})().then((async e=>(await o(),t([["p-6f0aa619",[[513,"dropi-icon",{name:[1],width:[1],height:[1],color:[1]},null,{color:[{colorChanged:0}]}]]],["p-21abf91a",[[769,"dropi-button",{type:[1],severity:[1],size:[1],state:[1],preIcon:[1,"pre-icon"],postIcon:[1,"post-icon"],text:[1]}]]],["p-a46a05a6",[[577,"dropi-input",{inputId:[1,"input-id"],name:[1],label:[1],placeholder:[1],value:[1025],maxlength:[2],disabled:[516],required:[516],showAsterisk:[4,"show-asterisk"],fixedLabel:[4,"fixed-label"],inputMode:[1,"input-mode"],passwordInput:[4,"password-input"],moneyFormat:[4,"money-format"],thousandSeparator:[4,"thousand-separator"],onlyNumbers:[4,"only-numbers"],allowDecimals:[4,"allow-decimals"],onlyLetters:[4,"only-letters"],icon:[1],iconColor:[1,"icon-color"],invalid:[4],helperText:[1,"helper-text"],showHelperOnlyOnError:[4,"show-helper-only-on-error"],showPassword:[32],touched:[32]},null,{value:[{valueChanged:0}],disabled:[{disabledChanged:0}]}]]],["p-0faaab2b",[[577,"dropi-select",{label:[1],placeholder:[1],options:[1040],name:[1],disabled:[516],invalid:[4],errorText:[1,"error-text"],helperText:[1,"helper-text"],showObligatory:[4,"show-obligatory"],searchEnabled:[4,"search-enabled"],multiSelect:[4,"multi-select"],dropdownType:[4,"dropdown-type"],showCountryFlags:[4,"show-country-flags"],radioOptions:[4,"radio-options"],placeHolderSearch:[1,"place-holder-search"],preIcon:[1,"pre-icon"],defaultSelectedId:[1032,"default-selected-id"],value:[1040],isOpen:[32],selectedOption:[32],multiSelected:[32],filteredOptions:[32],searchTerm:[32],dropdownStyle:[32],setById:[64],setByLabel:[64],clearSelection:[64],resetMultiSelect:[64]},[[4,"click","handleOutsideClick"]],{options:[{optionsChanged:0}],defaultSelectedId:[{defaultChanged:0}],value:[{valueChanged:0}]}]]],["p-52291024",[[513,"dropi-tag",{type:[1],state:[1],showIcon:[4,"show-icon"],icon:[1],text:[1]},null,{type:[{propsChanged:0}],state:[{propsChanged:0}]}]]],["p-9c7076d3",[[577,"dropi-text-area",{inputId:[1,"input-id"],name:[1],label:[1],placeholder:[1],value:[1025],maxlength:[2],minlength:[2],rows:[2],resize:[1],disabled:[516],required:[516],showAsterisk:[4,"show-asterisk"],helperText:[1,"helper-text"],invalid:[4],touched:[32]},null,{value:[{valueChanged:0}]}]]],["p-f785011f",[[513,"dropi-badge",{state:[1]}]]],["p-dd089a60",[[577,"dropi-checkbox",{checked:[1540],disabled:[516]}]]],["p-bda1427f",[[577,"dropi-radio-button",{label:[1],name:[1],inputId:[1,"input-id"],checked:[1540],resetTrigger:[4,"reset-trigger"]},null,{resetTrigger:[{onResetTrigger:0}]}]]],["p-a1944f3d",[[577,"dropi-switch",{isChecked:[1540,"is-checked"],disabled:[516]}]]]],e))));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as t,c as i,a as e,h as r}from"./p-DFz-gwFP.js";const a=class{constructor(e){t(this,e),this.dropiChange=i(this,"dropiChange"),this.dropiClear=i(this,"dropiClear"),this.dropiSearch=i(this,"dropiSearch"),this.dropiScrollEnd=i(this,"dropiScrollEnd"),this.dropiKeyEnter=i(this,"dropiKeyEnter"),e.$hostElement$["s-ei"]?this.internals=e.$hostElement$["s-ei"]:(this.internals=e.$hostElement$.attachInternals(),e.$hostElement$["s-ei"]=this.internals)}get el(){return e(this)}internals;buttonRef;scrollDebounce;hasEmittedScrollEnd=!1;lastScrollTop=0;label="";placeholder="Seleccionar";options=[];name="";disabled=!1;invalid=!1;errorText="";helperText="";showObligatory=!1;searchEnabled=!1;multiSelect=!1;dropdownType=!1;showCountryFlags=!1;radioOptions=!1;placeHolderSearch="Buscar";preIcon="";defaultSelectedId="";value=null;isOpen=!1;selectedOption=null;multiSelected=[];filteredOptions=[];searchTerm="";dropdownStyle={top:"0px",left:"0px",width:"0px"};dropiChange;dropiClear;dropiSearch;dropiScrollEnd;dropiKeyEnter;componentWillLoad(){this.normalizeOptions(),this.filteredOptions=[...this.options],this.applyDefaultSelection()}optionsChanged(){this.normalizeOptions(),this.filteredOptions=[...this.options],this.applyDefaultSelection()}normalizeOptions(){if("string"==typeof this.options)try{this.options=JSON.parse(this.options)}catch(t){this.options=[]}}defaultChanged(t){this.applyDefaultSelection(t)}valueChanged(t){this.selectedOption=t,this.internals.setFormValue(t?String(t.id):"")}async setById(t){const i=this.options.find((i=>i.id===t||String(i.id)===String(t)));i&&this.selectOption(i)}async setByLabel(t){const i=this.options.find((i=>i.label===t));i&&this.selectOption(i)}async clearSelection(){this.selectedOption=null,this.multiSelected=[],this.internals.setFormValue(""),this.dropiClear.emit()}async resetMultiSelect(t){this.multiSelected=[],this.internals.setFormValue("")}handleOutsideClick(t){this.el.contains(t.target)||this.closeDropdown()}applyDefaultSelection(t){const i=t??this.defaultSelectedId;if(""===i||null==i)return;const e=this.flatOptions().find((t=>t.id===i||String(t.id)===String(i)));e&&(this.selectedOption=e,this.internals.setFormValue(String(e.id)))}flatOptions(){return this.options?.length?"category"in this.options[0]?this.options.flatMap((t=>t.options)):this.options:[]}get isGrouped(){return this.options?.length>0&&"category"in this.options[0]}get triggerLabel(){return this.multiSelect?this.multiSelected.length?this.multiSelected.map((t=>t.label)).join(", "):this.placeholder:this.selectedOption?this.showCountryFlags&&this.selectedOption.shortLabel?this.selectedOption.shortLabel:this.selectedOption.label:this.placeholder}openDropdown(){if(this.disabled)return;const t=this.buttonRef.getBoundingClientRect(),i=window.innerHeight;this.dropdownStyle={top:`${i-t.bottom>=250?t.bottom+4:t.top-250-4}px`,left:`${t.left}px`,width:`${t.width}px`},this.isOpen=!0,this.searchEnabled&&setTimeout((()=>{const t=this.el.shadowRoot?.querySelector(".search-input");t?.focus()}),50)}closeDropdown(){this.isOpen=!1,this.searchTerm="",this.filteredOptions=[...this.options]}toggleDropdown(){this.isOpen?this.closeDropdown():this.openDropdown()}selectOption(t){if(!t.disabled)if(this.multiSelect){const i=this.multiSelected.findIndex((i=>i.id===t.id));this.multiSelected=i>=0?this.multiSelected.filter((i=>i.id!==t.id)):[...this.multiSelected,t],this.internals.setFormValue(this.multiSelected.map((t=>t.id)).join(",")),this.dropiChange.emit([...this.multiSelected])}else this.selectedOption=t,this.internals.setFormValue(String(t.id)),this.dropiChange.emit(t),this.closeDropdown()}isOptionChecked(t){return this.multiSelected.some((i=>i.id===t.id))}handleSearch(t){this.searchTerm=t,this.dropiSearch.emit(t);const i=t.toLowerCase().trim();this.filteredOptions=i?this.isGrouped?this.options.map((t=>({...t,options:t.options.filter((t=>t.label.toLowerCase().includes(i)))}))).filter((t=>t.options.length>0)):this.options.filter((t=>t.label.toLowerCase().includes(i))):[...this.options]}handleScroll(t){const i=t.target;clearTimeout(this.scrollDebounce),this.scrollDebounce=setTimeout((()=>{if(!i)return;const t=i.scrollHeight-i.scrollTop-i.clientHeight,e=Math.min(50,i.clientHeight/2);i.scrollTop<this.lastScrollTop&&(this.hasEmittedScrollEnd=!1),this.lastScrollTop=i.scrollTop,t<=e&&!this.hasEmittedScrollEnd&&(this.dropiScrollEnd.emit(),this.hasEmittedScrollEnd=!0,setTimeout((()=>{this.hasEmittedScrollEnd=!1}),1e3))}),100)}renderTrigger(){const t=this.disabled?"Gray-Gray-300":this.dropdownType?"Gray-Gray-600":"Gray-Gray-400",i=this.dropdownType?"24px":"20px";return r("button",{type:"button",class:{"select-button":!0,"select-completed":this.multiSelect?this.multiSelected.length>0:!!this.selectedOption,"select-button-error":this.invalid,"no-border":this.dropdownType},disabled:this.disabled,ref:t=>this.buttonRef=t,onClick:()=>this.toggleDropdown()},r("div",{class:{"button-content":!0,"option-radio":this.radioOptions&&!!this.selectedOption&&!this.multiSelect}},this.preIcon&&r("dropi-icon",{name:this.preIcon,width:"20px",height:"20px",color:"Gray-Gray-500"}),this.radioOptions&&this.selectedOption&&!this.multiSelect&&[this.selectedOption.imageUrl&&!this.selectedOption.isFallback?r("img",{class:"option-image small-image",src:this.selectedOption.imageUrl,alt:"",onError:()=>{this.selectedOption&&(this.selectedOption={...this.selectedOption,isFallback:!0})}}):this.selectedOption.isFallback?r("span",{class:"option-image-fallback small-image"},this.selectedOption.label.charAt(0).toUpperCase()):null,r("div",{class:"labels-container elipsis"},r("span",null,this.selectedOption.label),this.selectedOption.secondLabel&&r("span",{class:"option-second-label"},this.selectedOption.secondLabel))],!(this.radioOptions&&this.selectedOption&&!this.multiSelect)&&r("div",{class:"elipsis"},this.triggerLabel)),r("dropi-icon",{name:this.isOpen?"Dropdown-up":"Dropdown-down",width:i,height:i,color:t}))}renderOption(t){const i=this.multiSelect?this.isOptionChecked(t):this.selectedOption?.id===t.id;return r("li",{key:t.id},r("button",{type:"button",class:{option:!0,"option-radio":this.radioOptions,"option-with-flag":this.showCountryFlags&&!!t.countryCode,"disabled-option":!!t.disabled,"selected-option":i},disabled:t.disabled,onClick:()=>this.selectOption(t)},this.multiSelect&&r("span",{class:{"multi-checkbox":!0,checked:i}},i&&r("svg",{width:"10",height:"10",viewBox:"0 0 24 24",fill:"none"},r("path",{d:"M20.6 5.7L9.1 17.2c-.2.2-.5.3-.8.3s-.6-.1-.8-.3L3 12.8c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l3.9 3.9L19.2 4.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4z",fill:"white"}))),this.radioOptions&&r("div",{class:{radio:!0,selected:i}},i&&r("div",{class:"circle"})),!this.radioOptions&&t.preIcon&&r("dropi-icon",{name:t.preIcon,width:"20px",height:"20px",color:"Gray-Gray-500"}),this.radioOptions&&t.imageUrl&&!t.isFallback&&r("img",{class:"option-image",src:t.imageUrl,alt:"",onError:()=>{t.isFallback=!0,this.options=[...this.options]}}),this.radioOptions&&t.isFallback&&r("span",{class:"option-image-fallback"},t.label.charAt(0).toUpperCase()),this.showCountryFlags&&t.countryCode&&r("span",{class:"flag-placeholder"},t.countryCode),this.radioOptions?r("div",{class:"labels-container"},r("span",{class:"elipsis"},t.label),t.secondLabel&&r("span",{class:"option-second-label"},t.secondLabel)):r("span",{class:"elipsis"},this.showCountryFlags&&t.shortLabel?t.shortLabel:t.label)))}renderDropdown(){return this.isOpen?r("ul",{class:"select-dropdown-overlay",style:this.dropdownStyle,onScroll:t=>this.handleScroll(t)},this.searchEnabled&&r("li",{class:"sticky-search"},r("div",{class:"search-wrapper"},r("dropi-icon",{name:"Search",width:"16px",height:"16px",color:"Gray-Gray-400"}),r("input",{class:"search-input",type:"text",placeholder:this.placeHolderSearch,value:this.searchTerm,onInput:t=>this.handleSearch(t.target.value),onKeyDown:t=>{"Enter"===t.key&&this.dropiKeyEnter.emit(t)}}),this.searchTerm&&r("button",{type:"button",class:"search-clear",onClick:()=>this.handleSearch("")},r("dropi-icon",{name:"Close",width:"14px",height:"14px",color:"Gray-Gray-400"})))),this.isGrouped&&this.filteredOptions.map((t=>[r("li",{class:"option-group-title"},t.category),...t.options.map((t=>r("li",{key:t.id},r("button",{type:"button",class:{option:!0,"option-group":!0,"disabled-option":!!t.disabled},disabled:t.disabled,onClick:()=>this.selectOption(t)},t.preIcon&&r("dropi-icon",{name:t.preIcon,width:"20px",height:"20px",color:"Gray-Gray-500"}),r("span",{class:"elipsis"},t.label)))))])),!this.isGrouped&&this.filteredOptions.map((t=>this.renderOption(t))),0===this.filteredOptions.length&&r("li",{class:"no-results"},"Sin resultados")):null}render(){return r("div",{key:"94383b3267955dcb8d1a6c523730e291976157b2",class:"custom-select"},!this.dropdownType&&this.label&&r("label",{key:"4ff14d77b301a275f6c608d227361ff2829ac7a1",class:{"disabled-label":this.disabled}},this.label,this.showObligatory&&!this.disabled&&r("span",{key:"8345af7646d8cea8e66c996f0eb4abf210c9d211",class:"asterisk"}," *")),r("div",{key:"290a9521e39c2e1bdb1a8aacf35b2b22bf4966de",class:"dropdown-container"},this.dropdownType&&this.label&&r("div",{key:"a9ad2741e23d31b3b0dc69a3aa89f54eaa291b04",class:"left-label"},this.label),this.renderTrigger()),this.helperText&&!this.invalid&&r("div",{key:"8dd7cd895c1124b07020f396ac316390d4ee8cc8",class:"select-helper"},r("span",{key:"cdcaeb30b27baf4441d6ef87f6f553fd2b73e145"},this.helperText)),this.invalid&&this.errorText&&r("div",{key:"8e1a4da603de7b6c730a9946b63652fbe5e68321",class:"select-helper-error"},r("dropi-icon",{key:"f831c9f543c4f4be52d969f1d26f7d7e8816d08f",name:"Warning-circle",width:"12px",height:"12px",color:"Error-Error-500"}),r("span",{key:"1eefbade098b9743b23abee3e43836ed33ecbadb"},this.errorText)),this.renderDropdown())}static get formAssociated(){return!0}static get watchers(){return{options:[{optionsChanged:0}],defaultSelectedId:[{defaultChanged:0}],value:[{valueChanged:0}]}}};a.style=":host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.2s ease;gap:8px}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button-error{border-color:var(--Error-Error-500, #f46a6b) !important}.no-border{border:none !important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);background-color:transparent !important;gap:var(--Size-2, 8px)}.no-border:disabled{background-color:transparent !important}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;min-width:0}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-dropdown-overlay{position:fixed;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);margin:0;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12);z-index:9999;animation:dropdown-open 120ms ease-out}@keyframes dropdown-open{from{opacity:0;transform:scaleY(0.95);transform-origin:top}to{opacity:1;transform:scaleY(1);transform-origin:top}}.option{box-sizing:border-box;width:100%;min-height:40px;border-radius:var(--Border-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--Size-2, 8px);transition:background 0.15s ease}.option:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled,.disabled-option{opacity:0.5;cursor:not-allowed}.option.selected-option:not(.option-radio){background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-group-title{padding:var(--Size-3, 12px) var(--Size-4, 16px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Gray-Gray-500, #69738c);list-style:none}.option-group{padding-left:var(--Size-6, 32px)}.sticky-search{position:sticky;top:calc(-1 * var(--Size-4, 16px));background:var(--Neutral-White, #fff);z-index:10;margin:calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;padding:var(--Size-2, 8px) var(--Size-4, 16px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);list-style:none}.search-wrapper{display:flex;align-items:center;gap:8px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);padding:6px 10px;background:var(--Neutral-White, #fff)}.search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.multi-checkbox{width:18px;height:18px;min-width:18px;border-radius:var(--Border-1, 4px);border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s, border-color 0.15s}.multi-checkbox.checked{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.option-radio{display:flex;align-items:center;gap:12px}.option-radio.selected-option{border-radius:var(--Border-2, 8px);background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-radio.selected-option .option-second-label{color:var(--Primary-Primary-500, #f49a3d)}.radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.circle{width:12px;height:12px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.labels-container{display:flex;justify-content:space-between;width:100%;min-width:0}.option-image{width:24px;height:24px;border-radius:60px;object-fit:cover;flex-shrink:0}.small-image{width:20px;height:20px}.option-image-fallback{width:24px;height:24px;border-radius:60px;background:var(--Primary-Primary-500, #f49a3d);color:white;font-size:13px;font-weight:bold;display:flex;justify-content:center;align-items:center;flex-shrink:0}.small-image.option-image-fallback{width:20px;height:20px}.option-second-label{color:var(--Gray-Gray-700, #32394d);font-weight:700;white-space:nowrap}.flag-placeholder{font-size:11px;font-weight:600;color:var(--Gray-Gray-500, #69738c);flex-shrink:0}.select-helper,.select-helper-error{display:flex;gap:var(--Size-1, 4px);align-items:center;margin-top:var(--Size-1, 4px)}.select-helper span{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.select-helper-error span{color:var(--Error-Error-500, #f46a6b);font-size:var(--font-size-xs, 10px)}.no-results{padding:var(--Size-3, 12px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px);list-style:none;text-align:center}";export{a as dropi_select}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, a as getElement, h } from './index-DFz-gwFP.js';
|
|
2
2
|
|
|
3
|
-
const dropiSelectCss = () => `:host{display:block;width:100
|
|
3
|
+
const dropiSelectCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.2s ease;gap:8px}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button-error{border-color:var(--Error-Error-500, #f46a6b) !important}.no-border{border:none !important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);background-color:transparent !important;gap:var(--Size-2, 8px)}.no-border:disabled{background-color:transparent !important}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;min-width:0}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-dropdown-overlay{position:fixed;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);margin:0;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12);z-index:9999;animation:dropdown-open 120ms ease-out}@keyframes dropdown-open{from{opacity:0;transform:scaleY(0.95);transform-origin:top}to{opacity:1;transform:scaleY(1);transform-origin:top}}.option{box-sizing:border-box;width:100%;min-height:40px;border-radius:var(--Border-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--Size-2, 8px);transition:background 0.15s ease}.option:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled,.disabled-option{opacity:0.5;cursor:not-allowed}.option.selected-option:not(.option-radio){background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-group-title{padding:var(--Size-3, 12px) var(--Size-4, 16px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Gray-Gray-500, #69738c);list-style:none}.option-group{padding-left:var(--Size-6, 32px)}.sticky-search{position:sticky;top:calc(-1 * var(--Size-4, 16px));background:var(--Neutral-White, #fff);z-index:10;margin:calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;padding:var(--Size-2, 8px) var(--Size-4, 16px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);list-style:none}.search-wrapper{display:flex;align-items:center;gap:8px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);padding:6px 10px;background:var(--Neutral-White, #fff)}.search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.multi-checkbox{width:18px;height:18px;min-width:18px;border-radius:var(--Border-1, 4px);border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s, border-color 0.15s}.multi-checkbox.checked{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.option-radio{display:flex;align-items:center;gap:12px}.option-radio.selected-option{border-radius:var(--Border-2, 8px);background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-radio.selected-option .option-second-label{color:var(--Primary-Primary-500, #f49a3d)}.radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.circle{width:12px;height:12px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.labels-container{display:flex;justify-content:space-between;width:100%;min-width:0}.option-image{width:24px;height:24px;border-radius:60px;object-fit:cover;flex-shrink:0}.small-image{width:20px;height:20px}.option-image-fallback{width:24px;height:24px;border-radius:60px;background:var(--Primary-Primary-500, #f49a3d);color:white;font-size:13px;font-weight:bold;display:flex;justify-content:center;align-items:center;flex-shrink:0}.small-image.option-image-fallback{width:20px;height:20px}.option-second-label{color:var(--Gray-Gray-700, #32394d);font-weight:700;white-space:nowrap}.flag-placeholder{font-size:11px;font-weight:600;color:var(--Gray-Gray-500, #69738c);flex-shrink:0}.select-helper,.select-helper-error{display:flex;gap:var(--Size-1, 4px);align-items:center;margin-top:var(--Size-1, 4px)}.select-helper span{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.select-helper-error span{color:var(--Error-Error-500, #f46a6b);font-size:var(--font-size-xs, 10px)}.no-results{padding:var(--Size-3, 12px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px);list-style:none;text-align:center}`;
|
|
4
4
|
|
|
5
5
|
const DropiSelect = class {
|
|
6
6
|
constructor(hostRef) {
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Librería de Web Components del Design System de Dropi, construida con **Stencil.js v4**.
|
|
4
4
|
Genera componentes reutilizables para Angular, React y Vue desde una única base de código.
|
|
5
5
|
|
|
6
|
-
- **Paquete npm:** `@dropi/ui` (v0.1.
|
|
6
|
+
- **Paquete npm:** `@dropi/ui` (v0.1.6)
|
|
7
7
|
- **React wrappers:** `@dropi/ui-react`
|
|
8
8
|
|
|
9
9
|
---
|
package/scripts/postinstall.js
CHANGED
|
@@ -197,7 +197,27 @@ try {
|
|
|
197
197
|
}
|
|
198
198
|
} catch (e) { log.warn.push('No se pudo copiar sprite: ' + e.message); }
|
|
199
199
|
|
|
200
|
-
// ── 6.
|
|
200
|
+
// ── 6. Auto-instalar @dropi/ui-react si es proyecto React ────────────────────
|
|
201
|
+
let reactInstalled = false;
|
|
202
|
+
if (isReact) {
|
|
203
|
+
try {
|
|
204
|
+
const pkg = JSON.parse(fs.readFileSync(path.join(projectRoot, 'package.json'), 'utf8'));
|
|
205
|
+
const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
|
|
206
|
+
if (!allDeps['@dropi/ui-react']) {
|
|
207
|
+
const { execSync } = require('child_process');
|
|
208
|
+
const pkgMgrCmd = fs.existsSync(path.join(projectRoot, 'yarn.lock')) ? 'yarn add'
|
|
209
|
+
: fs.existsSync(path.join(projectRoot, 'pnpm-lock.yaml')) ? 'pnpm add'
|
|
210
|
+
: 'npm install';
|
|
211
|
+
console.log(' Proyecto React detectado → instalando @dropi/ui-react...');
|
|
212
|
+
execSync(`${pkgMgrCmd} @dropi/ui-react`, { cwd: projectRoot, stdio: 'inherit' });
|
|
213
|
+
reactInstalled = true;
|
|
214
|
+
} else {
|
|
215
|
+
reactInstalled = 'ya';
|
|
216
|
+
}
|
|
217
|
+
} catch (e) { log.warn.push('No se pudo auto-instalar @dropi/ui-react: ' + e.message); }
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
// ── 7. Output final ───────────────────────────────────────────────────────────
|
|
201
221
|
const hasClaudeCode = fs.existsSync(path.join(projectRoot, '.claude'));
|
|
202
222
|
const hasCursor = fs.existsSync(path.join(projectRoot, '.cursor')) || fs.existsSync(path.join(projectRoot, '.cursorrules'));
|
|
203
223
|
const hasWindsurf = fs.existsSync(path.join(projectRoot, '.windsurfrules'));
|
|
@@ -213,6 +233,8 @@ if (vitePatchDone === true) console.log(' ✓ vite.config → optimizeDeps.
|
|
|
213
233
|
if (vitePatchDone === 'ya') console.log(' ✓ vite.config → ya estaba configurado');
|
|
214
234
|
if (tsconfigPatchDone) console.log(' ✓ tsconfig → skipLibCheck: true');
|
|
215
235
|
if (spriteDone) console.log(' ✓ Sprite SVG → ' + path.relative(projectRoot, spriteDest));
|
|
236
|
+
if (reactInstalled === true) console.log(' ✓ @dropi/ui-react → instalado automáticamente');
|
|
237
|
+
if (reactInstalled === 'ya') console.log(' ✓ @dropi/ui-react → ya estaba instalado');
|
|
216
238
|
if (log.ok.length > 0) log.ok.forEach(m => console.log(' ✓ ' + m));
|
|
217
239
|
if (skillsCopied.length > 0) console.log(' ✓ Skills IA → ' + skillsCopied.join(', '));
|
|
218
240
|
if (log.warn.length > 0) { console.log(''); log.warn.forEach(w => console.warn(' ⚠️ ' + w)); }
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as i,c as t,a as e,h as r}from"./p-DFz-gwFP.js";const a=class{constructor(e){i(this,e),this.dropiChange=t(this,"dropiChange"),this.dropiClear=t(this,"dropiClear"),this.dropiSearch=t(this,"dropiSearch"),this.dropiScrollEnd=t(this,"dropiScrollEnd"),this.dropiKeyEnter=t(this,"dropiKeyEnter"),e.$hostElement$["s-ei"]?this.internals=e.$hostElement$["s-ei"]:(this.internals=e.$hostElement$.attachInternals(),e.$hostElement$["s-ei"]=this.internals)}get el(){return e(this)}internals;buttonRef;scrollDebounce;hasEmittedScrollEnd=!1;lastScrollTop=0;label="";placeholder="Seleccionar";options=[];name="";disabled=!1;invalid=!1;errorText="";helperText="";showObligatory=!1;searchEnabled=!1;multiSelect=!1;dropdownType=!1;showCountryFlags=!1;radioOptions=!1;placeHolderSearch="Buscar";preIcon="";defaultSelectedId="";value=null;isOpen=!1;selectedOption=null;multiSelected=[];filteredOptions=[];searchTerm="";dropdownStyle={top:"0px",left:"0px",width:"0px"};dropiChange;dropiClear;dropiSearch;dropiScrollEnd;dropiKeyEnter;componentWillLoad(){this.normalizeOptions(),this.filteredOptions=[...this.options],this.applyDefaultSelection()}optionsChanged(){this.normalizeOptions(),this.filteredOptions=[...this.options],this.applyDefaultSelection()}normalizeOptions(){if("string"==typeof this.options)try{this.options=JSON.parse(this.options)}catch(i){this.options=[]}}defaultChanged(i){this.applyDefaultSelection(i)}valueChanged(i){this.selectedOption=i,this.internals.setFormValue(i?String(i.id):"")}async setById(i){const t=this.options.find((t=>t.id===i||String(t.id)===String(i)));t&&this.selectOption(t)}async setByLabel(i){const t=this.options.find((t=>t.label===i));t&&this.selectOption(t)}async clearSelection(){this.selectedOption=null,this.multiSelected=[],this.internals.setFormValue(""),this.dropiClear.emit()}async resetMultiSelect(i){this.multiSelected=[],this.internals.setFormValue("")}handleOutsideClick(i){this.el.contains(i.target)||this.closeDropdown()}applyDefaultSelection(i){const t=i??this.defaultSelectedId;if(""===t||null==t)return;const e=this.flatOptions().find((i=>i.id===t||String(i.id)===String(t)));e&&(this.selectedOption=e,this.internals.setFormValue(String(e.id)))}flatOptions(){return this.options?.length?"category"in this.options[0]?this.options.flatMap((i=>i.options)):this.options:[]}get isGrouped(){return this.options?.length>0&&"category"in this.options[0]}get triggerLabel(){return this.multiSelect?this.multiSelected.length?this.multiSelected.map((i=>i.label)).join(", "):this.placeholder:this.selectedOption?this.showCountryFlags&&this.selectedOption.shortLabel?this.selectedOption.shortLabel:this.selectedOption.label:this.placeholder}openDropdown(){if(this.disabled)return;const i=this.buttonRef.getBoundingClientRect(),t=window.innerHeight;this.dropdownStyle={top:`${t-i.bottom>=250?i.bottom+4:i.top-250-4}px`,left:`${i.left}px`,width:`${i.width}px`},this.isOpen=!0,this.searchEnabled&&setTimeout((()=>{const i=this.el.shadowRoot?.querySelector(".search-input");i?.focus()}),50)}closeDropdown(){this.isOpen=!1,this.searchTerm="",this.filteredOptions=[...this.options]}toggleDropdown(){this.isOpen?this.closeDropdown():this.openDropdown()}selectOption(i){if(!i.disabled)if(this.multiSelect){const t=this.multiSelected.findIndex((t=>t.id===i.id));this.multiSelected=t>=0?this.multiSelected.filter((t=>t.id!==i.id)):[...this.multiSelected,i],this.internals.setFormValue(this.multiSelected.map((i=>i.id)).join(",")),this.dropiChange.emit([...this.multiSelected])}else this.selectedOption=i,this.internals.setFormValue(String(i.id)),this.dropiChange.emit(i),this.closeDropdown()}isOptionChecked(i){return this.multiSelected.some((t=>t.id===i.id))}handleSearch(i){this.searchTerm=i,this.dropiSearch.emit(i);const t=i.toLowerCase().trim();this.filteredOptions=t?this.isGrouped?this.options.map((i=>({...i,options:i.options.filter((i=>i.label.toLowerCase().includes(t)))}))).filter((i=>i.options.length>0)):this.options.filter((i=>i.label.toLowerCase().includes(t))):[...this.options]}handleScroll(i){const t=i.target;clearTimeout(this.scrollDebounce),this.scrollDebounce=setTimeout((()=>{if(!t)return;const i=t.scrollHeight-t.scrollTop-t.clientHeight,e=Math.min(50,t.clientHeight/2);t.scrollTop<this.lastScrollTop&&(this.hasEmittedScrollEnd=!1),this.lastScrollTop=t.scrollTop,i<=e&&!this.hasEmittedScrollEnd&&(this.dropiScrollEnd.emit(),this.hasEmittedScrollEnd=!0,setTimeout((()=>{this.hasEmittedScrollEnd=!1}),1e3))}),100)}renderTrigger(){const i=this.disabled?"Gray-Gray-300":this.dropdownType?"Gray-Gray-600":"Gray-Gray-400",t=this.dropdownType?"24px":"20px";return r("button",{type:"button",class:{"select-button":!0,"select-completed":this.multiSelect?this.multiSelected.length>0:!!this.selectedOption,"select-button-error":this.invalid,"no-border":this.dropdownType},disabled:this.disabled,ref:i=>this.buttonRef=i,onClick:()=>this.toggleDropdown()},r("div",{class:{"button-content":!0,"option-radio":this.radioOptions&&!!this.selectedOption&&!this.multiSelect}},this.preIcon&&r("dropi-icon",{name:this.preIcon,width:"20px",height:"20px",color:"Gray-Gray-500"}),this.radioOptions&&this.selectedOption&&!this.multiSelect&&[this.selectedOption.imageUrl&&!this.selectedOption.isFallback?r("img",{class:"option-image small-image",src:this.selectedOption.imageUrl,alt:"",onError:()=>{this.selectedOption&&(this.selectedOption={...this.selectedOption,isFallback:!0})}}):this.selectedOption.isFallback?r("span",{class:"option-image-fallback small-image"},this.selectedOption.label.charAt(0).toUpperCase()):null,r("div",{class:"labels-container elipsis"},r("span",null,this.selectedOption.label),this.selectedOption.secondLabel&&r("span",{class:"option-second-label"},this.selectedOption.secondLabel))],!(this.radioOptions&&this.selectedOption&&!this.multiSelect)&&r("div",{class:"elipsis"},this.triggerLabel)),r("dropi-icon",{name:this.isOpen?"Dropdown-up":"Dropdown-down",width:t,height:t,color:i}))}renderOption(i){const t=this.multiSelect?this.isOptionChecked(i):this.selectedOption?.id===i.id;return r("li",{key:i.id},r("button",{type:"button",class:{option:!0,"option-radio":this.radioOptions,"option-with-flag":this.showCountryFlags&&!!i.countryCode,"disabled-option":!!i.disabled,"selected-option":t},disabled:i.disabled,onClick:()=>this.selectOption(i)},this.multiSelect&&r("span",{class:{"multi-checkbox":!0,checked:t}},t&&r("svg",{width:"10",height:"10",viewBox:"0 0 24 24",fill:"none"},r("path",{d:"M20.6 5.7L9.1 17.2c-.2.2-.5.3-.8.3s-.6-.1-.8-.3L3 12.8c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l3.9 3.9L19.2 4.3c.4-.4 1-.4 1.4 0 .4.4.4 1 0 1.4z",fill:"white"}))),this.radioOptions&&r("div",{class:{radio:!0,selected:t}},t&&r("div",{class:"circle"})),!this.radioOptions&&i.preIcon&&r("dropi-icon",{name:i.preIcon,width:"20px",height:"20px",color:"Gray-Gray-500"}),this.radioOptions&&i.imageUrl&&!i.isFallback&&r("img",{class:"option-image",src:i.imageUrl,alt:"",onError:()=>{i.isFallback=!0,this.options=[...this.options]}}),this.radioOptions&&i.isFallback&&r("span",{class:"option-image-fallback"},i.label.charAt(0).toUpperCase()),this.showCountryFlags&&i.countryCode&&r("span",{class:"flag-placeholder"},i.countryCode),this.radioOptions?r("div",{class:"labels-container"},r("span",{class:"elipsis"},i.label),i.secondLabel&&r("span",{class:"option-second-label"},i.secondLabel)):r("span",{class:"elipsis"},this.showCountryFlags&&i.shortLabel?i.shortLabel:i.label)))}renderDropdown(){return this.isOpen?r("ul",{class:"select-dropdown-overlay",style:this.dropdownStyle,onScroll:i=>this.handleScroll(i)},this.searchEnabled&&r("li",{class:"sticky-search"},r("div",{class:"search-wrapper"},r("dropi-icon",{name:"Search",width:"16px",height:"16px",color:"Gray-Gray-400"}),r("input",{class:"search-input",type:"text",placeholder:this.placeHolderSearch,value:this.searchTerm,onInput:i=>this.handleSearch(i.target.value),onKeyDown:i=>{"Enter"===i.key&&this.dropiKeyEnter.emit(i)}}),this.searchTerm&&r("button",{type:"button",class:"search-clear",onClick:()=>this.handleSearch("")},r("dropi-icon",{name:"Close",width:"14px",height:"14px",color:"Gray-Gray-400"})))),this.isGrouped&&this.filteredOptions.map((i=>[r("li",{class:"option-group-title"},i.category),...i.options.map((i=>r("li",{key:i.id},r("button",{type:"button",class:{option:!0,"option-group":!0,"disabled-option":!!i.disabled},disabled:i.disabled,onClick:()=>this.selectOption(i)},i.preIcon&&r("dropi-icon",{name:i.preIcon,width:"20px",height:"20px",color:"Gray-Gray-500"}),r("span",{class:"elipsis"},i.label)))))])),!this.isGrouped&&this.filteredOptions.map((i=>this.renderOption(i))),0===this.filteredOptions.length&&r("li",{class:"no-results"},"Sin resultados")):null}render(){return r("div",{key:"94383b3267955dcb8d1a6c523730e291976157b2",class:"custom-select"},!this.dropdownType&&this.label&&r("label",{key:"4ff14d77b301a275f6c608d227361ff2829ac7a1",class:{"disabled-label":this.disabled}},this.label,this.showObligatory&&!this.disabled&&r("span",{key:"8345af7646d8cea8e66c996f0eb4abf210c9d211",class:"asterisk"}," *")),r("div",{key:"290a9521e39c2e1bdb1a8aacf35b2b22bf4966de",class:"dropdown-container"},this.dropdownType&&this.label&&r("div",{key:"a9ad2741e23d31b3b0dc69a3aa89f54eaa291b04",class:"left-label"},this.label),this.renderTrigger()),this.helperText&&!this.invalid&&r("div",{key:"8dd7cd895c1124b07020f396ac316390d4ee8cc8",class:"select-helper"},r("span",{key:"cdcaeb30b27baf4441d6ef87f6f553fd2b73e145"},this.helperText)),this.invalid&&this.errorText&&r("div",{key:"8e1a4da603de7b6c730a9946b63652fbe5e68321",class:"select-helper-error"},r("dropi-icon",{key:"f831c9f543c4f4be52d969f1d26f7d7e8816d08f",name:"Warning-circle",width:"12px",height:"12px",color:"Error-Error-500"}),r("span",{key:"1eefbade098b9743b23abee3e43836ed33ecbadb"},this.errorText)),this.renderDropdown())}static get formAssociated(){return!0}static get watchers(){return{options:[{optionsChanged:0}],defaultSelectedId:[{defaultChanged:0}],value:[{valueChanged:0}]}}};a.style=":host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}.custom-select label{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.disabled-label{color:var(--Gray-Gray-400, #858ea6) !important}.asterisk{color:var(--Error-Error-500, #f46a6b)}.dropdown-container{display:flex;align-items:center;gap:4px}.left-label{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-m, 14px);white-space:nowrap}.select-button{box-sizing:border-box;width:100%;height:40px;padding:0 0.75rem;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.2s ease;gap:8px}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #50a5f1)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066)}.select-button-error{border-color:var(--Error-Error-500, #f46a6b) !important}.no-border{border:none !important;color:var(--Gray-Gray-600, #475066);padding:var(--Size-4, 16px);background-color:transparent !important;gap:var(--Size-2, 8px)}.no-border:disabled{background-color:transparent !important}.button-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1;min-width:0}.elipsis{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-dropdown-overlay{position:fixed;max-height:250px;overflow-y:auto;list-style:none;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);margin:0;border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #fff);box-shadow:0px 8px 24px rgba(0, 0, 0, 0.12);z-index:9999;animation:dropdown-open 120ms ease-out}@keyframes dropdown-open{from{opacity:0;transform:scaleY(0.95);transform-origin:top}to{opacity:1;transform:scaleY(1);transform-origin:top}}.option{box-sizing:border-box;width:100%;min-height:40px;border-radius:var(--Border-2, 8px);padding:var(--Size-3, 12px) var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:var(--Size-2, 8px);transition:background 0.15s ease}.option:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled,.disabled-option{opacity:0.5;cursor:not-allowed}.option.selected-option:not(.option-radio){background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-group-title{padding:var(--Size-3, 12px) var(--Size-4, 16px);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);color:var(--Gray-Gray-500, #69738c);list-style:none}.option-group{padding-left:var(--Size-6, 32px)}.sticky-search{position:sticky;top:calc(-1 * var(--Size-4, 16px));background:var(--Neutral-White, #fff);z-index:10;margin:calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;padding:var(--Size-2, 8px) var(--Size-4, 16px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2);list-style:none}.search-wrapper{display:flex;align-items:center;gap:8px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);padding:6px 10px;background:var(--Neutral-White, #fff)}.search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:transparent}.search-input::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-clear{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.multi-checkbox{width:18px;height:18px;min-width:18px;border-radius:var(--Border-1, 4px);border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.15s, border-color 0.15s}.multi-checkbox.checked{background:var(--Primary-Primary-500, #f49a3d);border-color:var(--Primary-Primary-500, #f49a3d)}.option-radio{display:flex;align-items:center;gap:12px}.option-radio.selected-option{border-radius:var(--Border-2, 8px);background:var(--Primary-Primary-50, #fef8f2);color:var(--Primary-Primary-500, #f49a3d)}.option-radio.selected-option .option-second-label{color:var(--Primary-Primary-500, #f49a3d)}.radio{width:20px;height:20px;min-width:20px;border-radius:50%;border:2px solid var(--Gray-Gray-200, #c3c9d9);display:flex;align-items:center;justify-content:center;flex-shrink:0}.radio.selected{border-color:var(--Primary-Primary-500, #f49a3d)}.circle{width:12px;height:12px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.labels-container{display:flex;justify-content:space-between;width:100%;min-width:0}.option-image{width:24px;height:24px;border-radius:60px;object-fit:cover;flex-shrink:0}.small-image{width:20px;height:20px}.option-image-fallback{width:24px;height:24px;border-radius:60px;background:var(--Primary-Primary-500, #f49a3d);color:white;font-size:13px;font-weight:bold;display:flex;justify-content:center;align-items:center;flex-shrink:0}.small-image.option-image-fallback{width:20px;height:20px}.option-second-label{color:var(--Gray-Gray-700, #32394d);font-weight:700;white-space:nowrap}.flag-placeholder{font-size:11px;font-weight:600;color:var(--Gray-Gray-500, #69738c);flex-shrink:0}.select-helper,.select-helper-error{display:flex;gap:var(--Size-1, 4px);align-items:center;margin-top:var(--Size-1, 4px)}.select-helper span{color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.select-helper-error span{color:var(--Error-Error-500, #f46a6b);font-size:var(--font-size-xs, 10px)}.no-results{padding:var(--Size-3, 12px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 12px);list-style:none;text-align:center}";export{a as dropi_select}
|