@aquera/nile-elements 2.0.4 → 2.0.5

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.
Files changed (41) hide show
  1. package/README.md +5 -0
  2. package/demo/nxtgen-classes.css +594 -0
  3. package/demo/nxtgen-dark.css +240 -21
  4. package/demo/nxtgen-utilities.css +594 -0
  5. package/demo/nxtgen.css +55 -0
  6. package/dist/index.js +51 -47
  7. package/dist/nile-combobox/nile-combobox.cjs.js +1 -1
  8. package/dist/nile-combobox/nile-combobox.cjs.js.map +1 -1
  9. package/dist/nile-combobox/nile-combobox.css.cjs.js +1 -1
  10. package/dist/nile-combobox/nile-combobox.css.cjs.js.map +1 -1
  11. package/dist/nile-combobox/nile-combobox.css.esm.js +28 -15
  12. package/dist/nile-combobox/nile-combobox.esm.js +11 -8
  13. package/dist/nile-combobox/portal-manager.cjs.js +1 -1
  14. package/dist/nile-combobox/portal-manager.cjs.js.map +1 -1
  15. package/dist/nile-combobox/portal-manager.esm.js +1 -1
  16. package/dist/nile-combobox/renderer.cjs.js +1 -1
  17. package/dist/nile-combobox/renderer.cjs.js.map +1 -1
  18. package/dist/nile-combobox/renderer.esm.js +31 -43
  19. package/dist/src/nile-combobox/nile-combobox.css.js +28 -15
  20. package/dist/src/nile-combobox/nile-combobox.css.js.map +1 -1
  21. package/dist/src/nile-combobox/nile-combobox.js +49 -10
  22. package/dist/src/nile-combobox/nile-combobox.js.map +1 -1
  23. package/dist/src/nile-combobox/portal-manager.js +2 -22
  24. package/dist/src/nile-combobox/portal-manager.js.map +1 -1
  25. package/dist/src/nile-combobox/renderer.d.ts +2 -3
  26. package/dist/src/nile-combobox/renderer.js +14 -45
  27. package/dist/src/nile-combobox/renderer.js.map +1 -1
  28. package/dist/src/version.d.ts +1 -1
  29. package/dist/src/version.js +11 -3
  30. package/dist/src/version.js.map +1 -1
  31. package/dist/tsconfig.tsbuildinfo +1 -1
  32. package/dist/version.cjs.js +1 -1
  33. package/dist/version.cjs.js.map +1 -1
  34. package/dist/version.esm.js +1 -1
  35. package/package.json +2 -1
  36. package/scripts/replace-version.cjs +12 -10
  37. package/src/nile-combobox/nile-combobox.css.ts +28 -15
  38. package/src/nile-combobox/nile-combobox.ts +61 -12
  39. package/src/nile-combobox/portal-manager.ts +4 -22
  40. package/src/nile-combobox/renderer.ts +26 -69
  41. package/src/version.ts +11 -2
package/dist/nile-combobox/portal-manager.esm.js CHANGED
@@ -1 +1 @@
1
- import{c as t,o as i,s,f as o,a as e,p as a,b as n}from"../floating-ui.dom-cc9126da.esm.js";import{P as l}from"../nile-select/portal-utils.esm.js";class h{constructor(t){this.portalContainer=null,this.originalListboxParent=null,this.measuredPopupHeight=null,this.cleanupAutoUpdate=null,this.currentPlacement="bottom",this.component=t}get portalContainerElement(){return this.portalContainer}createPortalContainer(){const t=document.createElement("div");return t.style.position="absolute",t.style.zIndex="9999",t.style.pointerEvents="none",t.className="nile-combobox-portal",t}async computePosition(){if(!this.portalContainer)return;const n=this.component.combobox||this.component,h=this.portalContainer;try{const r=l.findBoundaryElements(n),c=l.getOptimalPlacement(n),{x:u,y:p,placement:b}=await t(n,h,{placement:c,strategy:"fixed",middleware:[i(4),s({apply:({availableWidth:t,availableHeight:i,elements:s,rects:o})=>{const e=l.calculateOptimalHeight(o.reference,window.innerHeight,this.currentPlacement);s.floating.style.maxWidth=`${t}px`,s.floating.style.maxHeight=`${e}px`,s.floating.style.setProperty("--auto-size-available-width",`${t}px`),s.floating.style.setProperty("--auto-size-available-height",`${e}px`)},padding:10,boundary:r}),o({fallbackPlacements:["bottom","top","bottom-start","top-start"],fallbackStrategy:"bestFit",padding:10,boundary:r}),e({padding:10,crossAxis:!0,boundary:r})],platform:a}),m=n.getBoundingClientRect();Object.assign(h.style,{left:`${u}px`,top:`${p}px`,position:"fixed",pointerEvents:"auto",width:`${m.width}px`}),this.currentPlacement=b;const d=b.split("-")[0];h.className=`nile-combobox-portal combobox__listbox--${d}`}catch{this.fallbackPositioning()}}fallbackPositioning(){if(!this.portalContainer)return;const t=(this.component.combobox||this.component).getBoundingClientRect(),i=window.innerHeight-t.bottom,s=t.top;let o,e,a;s>i?(e=Math.max(s-20,100),o=Math.max(t.top-e-4,10),a="top"):(e=Math.max(i-20,100),o=t.bottom+4,a="bottom"),Object.assign(this.portalContainer.style,{left:`${t.left}px`,top:`${o}px`,width:`${t.width}px`,maxHeight:`${e}px`,pointerEvents:"auto"}),this.portalContainer.className=`nile-combobox-portal combobox__listbox--${a}`,this.portalContainer.style.setProperty("--auto-size-available-height",`${e}px`),this.portalContainer.style.setProperty("--auto-size-available-width",`${t.width}px`)}extractStylesAsCSS(t){return"string"==typeof t?t:Array.isArray(t)?t.map((t=>this.extractStylesAsCSS(t))).join("\n"):t&&"object"==typeof t&&t.cssText?t.cssText:""}injectStyles(){if(!this.portalContainer)return;const t=`nile-combobox-styles-${Math.random().toString(36).substring(2,11)}`;if(document.getElementById(t))return;const i=this.component.constructor.styles;if(!i)return;const s=document.createElement("style");s.id=t,s.textContent=this.extractStylesAsCSS(i),document.head.appendChild(s),this.portalContainer.t=t}setupPortal(){this.component.portal&&this.component.updateComplete.then((()=>{const t=this.component.shadowRoot?.querySelector("#listbox");t&&(this.originalListboxParent=t.parentElement,this.portalContainer=this.createPortalContainer(),this.portalContainer.appendChild(t),document.body.appendChild(this.portalContainer),this.injectStyles(),t.style.display="",this.computePosition(),this.cleanupAutoUpdate=n(this.component,this.portalContainer,(()=>this.computePosition()),{ancestorScroll:!0,ancestorResize:!0,elementResize:!0,layoutShift:!0,animationFrame:!0}))}))}cleanupPortal(){if(this.cleanupAutoUpdate&&(this.cleanupAutoUpdate(),this.cleanupAutoUpdate=null),this.portalContainer&&this.portalContainer.parentNode){const t=this.portalContainer.querySelector("#listbox");t&&this.originalListboxParent&&(this.originalListboxParent.appendChild(t),t.style.display=this.component.portal?"none":"");const i=this.portalContainer.t;i&&document.getElementById(i)?.remove(),this.portalContainer.parentNode.removeChild(this.portalContainer)}this.portalContainer=null,this.originalListboxParent=null,this.measuredPopupHeight=null,this.currentPlacement="bottom"}updatePosition(){this.component.portal&&this.portalContainer&&this.computePosition()}resetMeasuredHeight(){this.measuredPopupHeight=null}async resetScrollPosition(){await this.component.updateComplete,requestAnimationFrame((()=>{let t=null;if(t=this.component.portal&&this.portalContainer?this.portalContainer.querySelector("#listbox"):this.component.shadowRoot?.querySelector("#listbox"),!t||!t.isConnected)return;t.scrollTop=0;const i=t.querySelector(".virtualized");if(i&&i.isConnected){this.component.filteredData?.length<5?(i.style.overflowY="hidden",i.style.maxHeight="none",t.style.overflowY="hidden",t.style.maxHeight="fit-content"):(i.style.overflowY="auto",i.style.maxHeight="",t.style.overflowY="auto",t.style.maxHeight=""),i.scrollTop=0}const s=t.querySelector("lit-virtualizer");s&&s.isConnected&&(s.scrollTop=0)}))}}export{h as C};
1
+ import{c as t,o as i,s,f as o,a as e,p as a,b as n}from"../floating-ui.dom-cc9126da.esm.js";import{P as l}from"../nile-select/portal-utils.esm.js";class h{constructor(t){this.portalContainer=null,this.originalListboxParent=null,this.measuredPopupHeight=null,this.cleanupAutoUpdate=null,this.currentPlacement="bottom",this.component=t}get portalContainerElement(){return this.portalContainer}createPortalContainer(){const t=document.createElement("div");return t.style.position="absolute",t.style.zIndex="9999",t.style.pointerEvents="none",t.className="nile-combobox-portal",t}async computePosition(){if(!this.portalContainer)return;const n=this.component.combobox||this.component,h=this.portalContainer;try{const r=l.findBoundaryElements(n),c=l.getOptimalPlacement(n),{x:p,y:u,placement:b}=await t(n,h,{placement:c,strategy:"fixed",middleware:[i(4),s({apply:({availableWidth:t,availableHeight:i,elements:s,rects:o})=>{const e=l.calculateOptimalHeight(o.reference,window.innerHeight,this.currentPlacement);s.floating.style.maxWidth=`${t}px`,s.floating.style.maxHeight=`${e}px`,s.floating.style.setProperty("--auto-size-available-width",`${t}px`),s.floating.style.setProperty("--auto-size-available-height",`${e}px`)},padding:10,boundary:r}),o({fallbackPlacements:["bottom","top","bottom-start","top-start"],fallbackStrategy:"bestFit",padding:10,boundary:r}),e({padding:10,crossAxis:!0,boundary:r})],platform:a}),m=n.getBoundingClientRect();Object.assign(h.style,{left:`${p}px`,top:`${u}px`,position:"fixed",pointerEvents:"auto",width:`${m.width}px`}),this.currentPlacement=b;const x=b.split("-")[0];h.className=`nile-combobox-portal combobox__listbox--${x}`}catch{this.fallbackPositioning()}}fallbackPositioning(){if(!this.portalContainer)return;const t=(this.component.combobox||this.component).getBoundingClientRect(),i=window.innerHeight-t.bottom,s=t.top;let o,e,a;s>i?(e=Math.max(s-20,100),o=Math.max(t.top-e-4,10),a="top"):(e=Math.max(i-20,100),o=t.bottom+4,a="bottom"),Object.assign(this.portalContainer.style,{left:`${t.left}px`,top:`${o}px`,width:`${t.width}px`,maxHeight:`${e}px`,pointerEvents:"auto"}),this.portalContainer.className=`nile-combobox-portal combobox__listbox--${a}`,this.portalContainer.style.setProperty("--auto-size-available-height",`${e}px`),this.portalContainer.style.setProperty("--auto-size-available-width",`${t.width}px`)}extractStylesAsCSS(t){return"string"==typeof t?t:Array.isArray(t)?t.map((t=>this.extractStylesAsCSS(t))).join("\n"):t&&"object"==typeof t&&t.cssText?t.cssText:""}injectStyles(){if(!this.portalContainer)return;const t=`nile-combobox-styles-${Math.random().toString(36).substring(2,11)}`;if(document.getElementById(t))return;const i=this.component.constructor.styles;if(!i)return;const s=document.createElement("style");s.id=t,s.textContent=this.extractStylesAsCSS(i),document.head.appendChild(s),this.portalContainer.t=t}setupPortal(){this.component.portal&&this.component.updateComplete.then((()=>{const t=this.component.shadowRoot?.querySelector("#listbox");t&&(this.originalListboxParent=t.parentElement,this.portalContainer=this.createPortalContainer(),this.portalContainer.appendChild(t),document.body.appendChild(this.portalContainer),this.injectStyles(),t.style.display="",this.computePosition(),this.cleanupAutoUpdate=n(this.component,this.portalContainer,(()=>this.computePosition()),{ancestorScroll:!0,ancestorResize:!0,elementResize:!0,layoutShift:!0,animationFrame:!0}))}))}cleanupPortal(){if(this.cleanupAutoUpdate&&(this.cleanupAutoUpdate(),this.cleanupAutoUpdate=null),this.portalContainer&&this.portalContainer.parentNode){const t=this.portalContainer.querySelector("#listbox");t&&this.originalListboxParent&&(this.originalListboxParent.appendChild(t),t.style.display=this.component.portal?"none":"");const i=this.portalContainer.t;i&&document.getElementById(i)?.remove(),this.portalContainer.parentNode.removeChild(this.portalContainer)}this.portalContainer=null,this.originalListboxParent=null,this.measuredPopupHeight=null,this.currentPlacement="bottom"}updatePosition(){this.component.portal&&this.portalContainer&&this.computePosition()}resetMeasuredHeight(){this.measuredPopupHeight=null}async resetScrollPosition(){await this.component.updateComplete,requestAnimationFrame((()=>{let t=null;if(t=this.component.portal&&this.portalContainer?this.portalContainer.querySelector("#listbox"):this.component.shadowRoot?.querySelector("#listbox"),!t||!t.isConnected)return;(t.querySelector(".combobox__options-scroll")??t).scrollTop=0}))}}export{h as C};
package/dist/nile-combobox/renderer.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- System.register(["lit","lit/directives/unsafe-html.js","lit/directives/class-map.js","lit/directives/repeat.js"],function(_export,_context){"use strict";var t,o,i,e,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,_templateObject10,_templateObject11,_templateObject12,_templateObject13,_templateObject14,_templateObject15,_templateObject16,_templateObject17,_templateObject18,_templateObject19,_templateObject20,_templateObject21,s;function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e;}function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}return{setters:[function(_lit){t=_lit.html;},function(_litDirectivesUnsafeHtmlJs){o=_litDirectivesUnsafeHtmlJs.unsafeHTML;},function(_litDirectivesClassMapJs){i=_litDirectivesClassMapJs.classMap;},function(_litDirectivesRepeatJs){e=_litDirectivesRepeatJs.repeat;}],execute:function execute(){_export("C",s=/*#__PURE__*/function(){function s(){_classCallCheck(this,s);}return _createClass(s,null,[{key:"renderGroupHeader",value:function renderGroupHeader(o){return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <div\n part=\"group-header\"\n class=\"combobox__group-header\"\n role=\"presentation\"\n data-group-id=","\n style=","\n >\n ","\n <span class=\"combobox__group-label\">","</span>\n </div>\n "])),o.id,"--group-depth:".concat(o.depth),o.prefix?t(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["<nile-icon\n class=\"combobox__group-prefix\"\n name=","\n size=\"14\"\n method=\"fill\"\n ></nile-icon>"])),o.prefix):"",o.label);}},{key:"renderRowsPlain",value:function renderRowsPlain(o,i,e,r,n,l,a,d,p,c,$,v,b,u,m){return l&&!d&&0===o.length?s.renderNoResults(a,m):t(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n <div\n part=\"select-options\"\n class=\"combobox__options ","\"\n >\n <div class=\"combobox__options-plain\" @scroll=",">\n ","\n </div>\n </div>\n "])),d?"loading":"",p,o.map(function(t){return"header"===t.kind?s.renderGroupHeader(t):s.renderItem(t.item,i,e,r,n,c,$,v,b,u);}));}},{key:"renderRowsVirtualized",value:function renderRowsVirtualized(o,i,r,n,l,a,d,p,c,$,v,b,u){return t(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n <div\n part=\"select-options\"\n class=\"combobox__options ","\"\n >\n <div style=\"position:relative;height:","px;width:100%;\">\n ","\n </div>\n </div>\n "])),p?"loading":"",i,e(o,function(t){return t.key;},function(o){var i=r[o.index];if(!i)return t(_templateObject5||(_templateObject5=_taggedTemplateLiteral([""])));var e="position:absolute;top:0;left:0;right:0;transform:translateY(".concat(o.start,"px);height:").concat(o.size,"px;");return"header"===i.kind?t(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n <div style="," class=\"combobox__group-header-slot\">\n ","\n </div>\n "])),e,s.renderGroupHeader(i)):t(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n <div style=",">\n ","\n </div>\n "])),e,s.renderItem(i.item,n,l,a,d,c,$,v,b,u));}));}},{key:"renderVirtualizedOptions",value:function renderVirtualizedOptions(o,i,r,n,l,a,d,p,c,$,v,b,u,m){var x=o.length>0?o[0].start:0;return t(_templateObject8||(_templateObject8=_taggedTemplateLiteral(["\n <div\n part=\"select-options\"\n class=\"combobox__options ","\"\n >\n <div style=\"position:relative;height:","px;width:100%;\">\n <div style=\"position:absolute;top:0;left:0;width:100%;transform:translateY(","px);\">\n ","\n </div>\n </div>\n </div>\n "])),p?"loading":"",i,x,e(o,function(t){return t.key;},function(t){var o=r[t.index];return s.renderMeasuredItem(o,t.index,n,l,a,d,c,v,b,u,m);}));}},{key:"renderPlainOptions",value:function renderPlainOptions(o,i,e,r,n,l,a,d,p,c,$,v,b,u,m){return l&&!d&&0===o.length?s.renderNoResults(a,m):t(_templateObject9||(_templateObject9=_taggedTemplateLiteral(["\n <div\n part=\"select-options\"\n class=\"combobox__options ","\"\n >\n <div class=\"combobox__options-plain\" @scroll=",">\n ","\n </div>\n </div>\n "])),d?"loading":"",p,o.map(function(t){return s.renderItem(t,i,e,r,n,c,$,v,b,u);}));}},{key:"renderNoResults",value:function renderNoResults(o,i){return t(_templateObject10||(_templateObject10=_taggedTemplateLiteral(["\n <div part=\"select-options\" class=\"combobox__options\">\n <div part=\"no-results\" class=\"combobox__no-results\">\n <div part=\"no-results-title\" class=\"combobox__no-results-title\">\n ","\n </div>\n ","\n </div>\n </div>\n "])),o||"No result found",i?t(_templateObject11||(_templateObject11=_taggedTemplateLiteral(["<div part=\"no-results-subtitle\" class=\"combobox__no-results-subtitle\">","</div>"])),i):"");}},{key:"renderNoData",value:function renderNoData(o){return t(_templateObject12||(_templateObject12=_taggedTemplateLiteral(["\n <div part=\"select-options\" class=\"combobox__options\">\n <div part=\"no-data\" class=\"combobox__no-results\">\n <div part=\"no-data-title\" class=\"combobox__no-results-title\">\n ","\n </div>\n </div>\n </div>\n "])),o||"No data available");}},{key:"renderMeasuredItem",value:function renderMeasuredItem(e,_s,r,n,l,a,d,p,c,$,v){var _e$description,_e$prefix,_e$suffix;if(!e)return t(_templateObject13||(_templateObject13=_taggedTemplateLiteral([""])));var b=a(e),u=l(e),m=(e===null||e===void 0?void 0:e.disabled)||!1,x=e===null||e===void 0?void 0:e.className,_=p?p(e):(_e$description=e===null||e===void 0?void 0:e.description)!==null&&_e$description!==void 0?_e$description:"",h=c?c(e):(_e$prefix=e===null||e===void 0?void 0:e.prefix)!==null&&_e$prefix!==void 0?_e$prefix:"",g=$?$(e):(_e$suffix=e===null||e===void 0?void 0:e.suffix)!==null&&_e$suffix!==void 0?_e$suffix:"";var f=!1;return f=n?Array.isArray(r)&&r.some(function(t){return String(t)===String(b);}):String(Array.isArray(r)?r[0]:r)===String(b),t(_templateObject14||(_templateObject14=_taggedTemplateLiteral(["\n <nile-option\n data-index=","\n value=","\n .selected=","\n .disabled=","\n .showCheckbox=","\n class=","\n .description=","\n .isDescriptionEnabled=","\n >\n ","\n ","\n ","\n </nile-option>\n "])),_s,b,f,m,n,i(_defineProperty({option:v!==null&&v!==void 0?v:!1},x!==null&&x!==void 0?x:"",!!x)),_,v,o(h),d?o(u):u,o(g));}},{key:"renderItem",value:function renderItem(e,_s2,r,n,l,a,d,p,c,$){var _e$description2,_e$prefix2,_e$suffix2;if(!e)return t(_templateObject15||(_templateObject15=_taggedTemplateLiteral([""])));var v=l(e),b=n(e),u=(e===null||e===void 0?void 0:e.disabled)||!1,m=e===null||e===void 0?void 0:e.className,x=d?d(e):(_e$description2=e===null||e===void 0?void 0:e.description)!==null&&_e$description2!==void 0?_e$description2:"",_=p?p(e):(_e$prefix2=e===null||e===void 0?void 0:e.prefix)!==null&&_e$prefix2!==void 0?_e$prefix2:"",h=c?c(e):(_e$suffix2=e===null||e===void 0?void 0:e.suffix)!==null&&_e$suffix2!==void 0?_e$suffix2:"";var g=!1;return g=r?Array.isArray(_s2)&&_s2.some(function(t){return String(t)===String(v);}):String(Array.isArray(_s2)?_s2[0]:_s2)===String(v),t(_templateObject16||(_templateObject16=_taggedTemplateLiteral(["\n <nile-option\n value=","\n .selected=","\n .disabled=","\n .showCheckbox=","\n class=","\n .description=","\n .isDescriptionEnabled=","\n >\n ","\n ","\n ","\n </nile-option>\n "])),v,g,u,r,i(_defineProperty({option:$!==null&&$!==void 0?$:!1},m!==null&&m!==void 0?m:"",!!m)),x,$,o(_),a?o(b):b,o(h));}},{key:"renderVirtualizedGrid",value:function renderVirtualizedGrid(o,i,r,n,l,a,d,p,c,$,v,b,u,m){var x=o.length>0?o[0].start:0,_=m?"repeat(".concat(a,", ").concat(m,"px)"):"repeat(".concat(a,", 1fr)");return t(_templateObject17||(_templateObject17=_taggedTemplateLiteral(["\n <div\n part=\"select-options\"\n class=\"combobox__options ","\"\n >\n <div style=\"position:relative;height:","px;width:",";min-width:100%;\">\n <div style=\"position:absolute;top:0;left:0;width:",";min-width:100%;transform:translateY(","px);\">\n ","\n </div>\n </div>\n </div>\n "])),c?"loading":"",i,m?"max-content":"100%",m?"max-content":"100%",x,e(o,function(t){return t.key;},function(o){var i=o.index*a,e=r.slice(i,i+a);return t(_templateObject18||(_templateObject18=_taggedTemplateLiteral(["\n <div class=\"combobox__grid-row\" style=\"display:grid;grid-template-columns:",";gap:4px;\">\n ","\n </div>\n "])),_,e.map(function(t){return s.renderItem(t,n,l,d,p,$,v,b,u);}));}));}},{key:"renderHorizontalGrid",value:function renderHorizontalGrid(o,i,r,n,l,a,d,p,c,$,v,b,u,m){var x=o.length>0?o[0].start:0;return t(_templateObject19||(_templateObject19=_taggedTemplateLiteral(["\n <div\n part=\"select-options\"\n class=\"combobox__options combobox__options--horizontal ","\"\n >\n <div style=\"position:relative;width:","px;height:","px;\">\n <div style=\"position:absolute;top:0;left:0;height:100%;display:flex;transform:translateX(","px);\">\n ","\n </div>\n </div>\n </div>\n "])),$?"loading":"",i,38*a,x,e(o,function(t){return t.key;},function(o){var i=o.index*a,e=r.slice(i,i+a);return t(_templateObject20||(_templateObject20=_taggedTemplateLiteral(["\n <div class=\"combobox__grid-col\" style=\"width:","px;flex-shrink:0;display:flex;flex-direction:column;\">\n ","\n </div>\n "])),d,e.map(function(t){return s.renderItem(t,n,l,p,c,v,b,u,m);}));}));}},{key:"renderAddCustomOption",value:function renderAddCustomOption(o,i){return t(_templateObject21||(_templateObject21=_taggedTemplateLiteral(["\n <nile-option\n value=","\n class=\"combobox__add-option\"\n .showCheckbox=","\n >\n + Add \"","\"\n </nile-option>\n "])),o,i,o);}},{key:"shouldUseVirtualizer",value:function shouldUseVirtualizer(t){var o=arguments.length>1&&arguments[1]!==undefined?arguments[1]:1;return o>1||t.length>=5;}}]);}());}};});
1
+ System.register(["lit","lit/directives/unsafe-html.js","lit/directives/class-map.js","lit/directives/repeat.js"],function(_export,_context){"use strict";var t,o,i,s,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,_templateObject10,_templateObject11,_templateObject12,_templateObject13,_templateObject14,_templateObject15,_templateObject16,_templateObject17,_templateObject18,_templateObject19,_templateObject20,e;function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e;}function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}return{setters:[function(_lit){t=_lit.html;},function(_litDirectivesUnsafeHtmlJs){o=_litDirectivesUnsafeHtmlJs.unsafeHTML;},function(_litDirectivesClassMapJs){i=_litDirectivesClassMapJs.classMap;},function(_litDirectivesRepeatJs){s=_litDirectivesRepeatJs.repeat;}],execute:function execute(){_export("C",e=/*#__PURE__*/function(){function e(){_classCallCheck(this,e);}return _createClass(e,null,[{key:"renderGroupHeader",value:function renderGroupHeader(o){return t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n <div\n part=\"group-header\"\n class=\"combobox__group-header\"\n role=\"presentation\"\n data-group-id=","\n style=","\n >\n ","\n <span class=\"combobox__group-label\">","</span>\n </div>\n "])),o.id,"--group-depth:".concat(o.depth),o.prefix?t(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["<nile-icon\n class=\"combobox__group-prefix\"\n name=","\n size=\"14\"\n method=\"fill\"\n ></nile-icon>"])),o.prefix):"",o.label);}},{key:"renderRowsPlain",value:function renderRowsPlain(o,i,s,r,n,l,a,d,p,c,v,$,b,u,m){return l&&!d&&0===o.length?e.renderNoResults(a,m):t(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n <div\n part=\"select-options\"\n class=\"combobox__options ","\"\n >\n <div class=\"combobox__options-plain\" @scroll=",">\n ","\n </div>\n </div>\n "])),d?"loading":"",p,o.map(function(t){return"header"===t.kind?e.renderGroupHeader(t):e.renderItem(t.item,i,s,r,n,c,v,$,b,u);}));}},{key:"renderRowsVirtualized",value:function renderRowsVirtualized(o,i,r,n,l,a,d,p,c,v,$,b,u,m){var x=arguments.length>14&&arguments[14]!==undefined?arguments[14]:-1;return t(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n <div\n part=\"select-options\"\n class=\"combobox__options ","\"\n >\n <div style=\"position:relative;height:","px;width:100%;\">\n ","\n ","\n </div>\n </div>\n "])),p?"loading":"",i,m!==null&&m!==void 0?m:"",s(o,function(t){return t.key;},function(o){var i=r[o.index];if(!i)return t(_templateObject5||(_templateObject5=_taggedTemplateLiteral([""])));var s="position:absolute;top:0;left:0;right:0;transform:translateY(".concat(o.start,"px);height:").concat(o.size,"px;");if("header"===i.kind){var _r=o.index===x?"".concat(s,"visibility:hidden;"):s;return t(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n <div style="," class=\"combobox__group-header-slot\">\n ","\n </div>\n "])),_r,e.renderGroupHeader(i));}return t(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n <div style=",">\n ","\n </div>\n "])),s,e.renderItem(i.item,n,l,a,d,c,v,$,b,u));}));}},{key:"renderVirtualizedOptions",value:function renderVirtualizedOptions(o,i,r,n,l,a,d,p,c,v,$,b,u){return t(_templateObject8||(_templateObject8=_taggedTemplateLiteral(["\n <div\n part=\"select-options\"\n class=\"combobox__options ","\"\n >\n <div style=\"position:relative;height:","px;width:100%;\">\n ","\n </div>\n </div>\n "])),p?"loading":"",i,s(o,function(t){return t.key;},function(o){var i=r[o.index],s="position:absolute;top:0;left:0;right:0;transform:translateY(".concat(o.start,"px);height:").concat(o.size,"px;");return t(_templateObject9||(_templateObject9=_taggedTemplateLiteral(["\n <div style=",">\n ","\n </div>\n "])),s,e.renderItem(i,n,l,a,d,c,v,$,b,u));}));}},{key:"renderPlainOptions",value:function renderPlainOptions(o,i,s,r,n,l,a,d,p,c,v,$,b,u,m){return l&&!d&&0===o.length?e.renderNoResults(a,m):t(_templateObject10||(_templateObject10=_taggedTemplateLiteral(["\n <div\n part=\"select-options\"\n class=\"combobox__options ","\"\n >\n <div class=\"combobox__options-plain\" @scroll=",">\n ","\n </div>\n </div>\n "])),d?"loading":"",p,o.map(function(t){return e.renderItem(t,i,s,r,n,c,v,$,b,u);}));}},{key:"renderNoResults",value:function renderNoResults(o,i){return t(_templateObject11||(_templateObject11=_taggedTemplateLiteral(["\n <div part=\"select-options\" class=\"combobox__options\">\n <div part=\"no-results\" class=\"combobox__no-results\">\n <div part=\"no-results-title\" class=\"combobox__no-results-title\">\n ","\n </div>\n ","\n </div>\n </div>\n "])),o||"No result found",i?t(_templateObject12||(_templateObject12=_taggedTemplateLiteral(["<div part=\"no-results-subtitle\" class=\"combobox__no-results-subtitle\">","</div>"])),i):"");}},{key:"renderNoData",value:function renderNoData(o){return t(_templateObject13||(_templateObject13=_taggedTemplateLiteral(["\n <div part=\"select-options\" class=\"combobox__options\">\n <div part=\"no-data\" class=\"combobox__no-results\">\n <div part=\"no-data-title\" class=\"combobox__no-results-title\">\n ","\n </div>\n </div>\n </div>\n "])),o||"No data available");}},{key:"renderItem",value:function renderItem(s,_e,r,n,l,a,d,p,c,v){var _s$description,_s$prefix,_s$suffix;if(!s)return t(_templateObject14||(_templateObject14=_taggedTemplateLiteral([""])));var $=l(s),b=n(s),u=(s===null||s===void 0?void 0:s.disabled)||!1,m=s===null||s===void 0?void 0:s.className,x=d?d(s):(_s$description=s===null||s===void 0?void 0:s.description)!==null&&_s$description!==void 0?_s$description:"",_=p?p(s):(_s$prefix=s===null||s===void 0?void 0:s.prefix)!==null&&_s$prefix!==void 0?_s$prefix:"",h=c?c(s):(_s$suffix=s===null||s===void 0?void 0:s.suffix)!==null&&_s$suffix!==void 0?_s$suffix:"";var g=!1;return g=r?Array.isArray(_e)&&_e.some(function(t){return String(t)===String($);}):String(Array.isArray(_e)?_e[0]:_e)===String($),t(_templateObject15||(_templateObject15=_taggedTemplateLiteral(["\n <nile-option\n value=","\n .selected=","\n .disabled=","\n .showCheckbox=","\n class=","\n .description=","\n .isDescriptionEnabled=","\n >\n ","\n ","\n ","\n </nile-option>\n "])),$,g,u,r,i(_defineProperty({option:v!==null&&v!==void 0?v:!1},m!==null&&m!==void 0?m:"",!!m)),x,v,o(_),a?o(b):b,o(h));}},{key:"renderVirtualizedGrid",value:function renderVirtualizedGrid(o,i,r,n,l,a,d,p,c,v,$,b,u,m){var x=o.length>0?o[0].start:0,_=m?"repeat(".concat(a,", ").concat(m,"px)"):"repeat(".concat(a,", 1fr)");return t(_templateObject16||(_templateObject16=_taggedTemplateLiteral(["\n <div\n part=\"select-options\"\n class=\"combobox__options ","\"\n >\n <div style=\"position:relative;height:","px;width:",";min-width:100%;\">\n <div style=\"position:absolute;top:0;left:0;width:",";min-width:100%;transform:translateY(","px);\">\n ","\n </div>\n </div>\n </div>\n "])),c?"loading":"",i,m?"max-content":"100%",m?"max-content":"100%",x,s(o,function(t){return t.key;},function(o){var i=o.index*a,s=r.slice(i,i+a);return t(_templateObject17||(_templateObject17=_taggedTemplateLiteral(["\n <div class=\"combobox__grid-row\" style=\"display:grid;grid-template-columns:",";gap:4px;\">\n ","\n </div>\n "])),_,s.map(function(t){return e.renderItem(t,n,l,d,p,v,$,b,u);}));}));}},{key:"renderHorizontalGrid",value:function renderHorizontalGrid(o,i,r,n,l,a,d,p,c,v,$,b,u,m){var x=o.length>0?o[0].start:0;return t(_templateObject18||(_templateObject18=_taggedTemplateLiteral(["\n <div\n part=\"select-options\"\n class=\"combobox__options combobox__options--horizontal ","\"\n >\n <div style=\"position:relative;width:","px;height:","px;\">\n <div style=\"position:absolute;top:0;left:0;height:100%;display:flex;transform:translateX(","px);\">\n ","\n </div>\n </div>\n </div>\n "])),v?"loading":"",i,38*a,x,s(o,function(t){return t.key;},function(o){var i=o.index*a,s=r.slice(i,i+a);return t(_templateObject19||(_templateObject19=_taggedTemplateLiteral(["\n <div class=\"combobox__grid-col\" style=\"width:","px;flex-shrink:0;display:flex;flex-direction:column;\">\n ","\n </div>\n "])),d,s.map(function(t){return e.renderItem(t,n,l,p,c,$,b,u,m);}));}));}},{key:"renderAddCustomOption",value:function renderAddCustomOption(o,i){return t(_templateObject20||(_templateObject20=_taggedTemplateLiteral(["\n <nile-option\n value=","\n class=\"combobox__add-option\"\n .showCheckbox=","\n >\n + Add \"","\"\n </nile-option>\n "])),o,i,o);}},{key:"shouldUseVirtualizer",value:function shouldUseVirtualizer(t){var o=arguments.length>1&&arguments[1]!==undefined?arguments[1]:1;return o>1||t.length>=5;}}]);}());}};});
2
2
  //# sourceMappingURL=renderer.cjs.js.map
package/dist/nile-combobox/renderer.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"renderer.cjs.js","sources":["../../../src/nile-combobox/renderer.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, type TemplateResult } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { VirtualItem } from '@tanstack/virtual-core';\nimport type { ComboboxRow, ComboboxHeaderRow } from './types';\n\nexport class ComboboxRenderer {\n\n static renderGroupHeader(row: ComboboxHeaderRow): TemplateResult {\n return html`\n <div\n part=\"group-header\"\n class=\"combobox__group-header\"\n role=\"presentation\"\n data-group-id=${row.id}\n style=${`--group-depth:${row.depth}`}\n >\n ${row.prefix\n ? html`<nile-icon\n class=\"combobox__group-prefix\"\n name=${row.prefix}\n size=\"14\"\n method=\"fill\"\n ></nile-icon>`\n : ''}\n <span class=\"combobox__group-label\">${row.label}</span>\n </div>\n `;\n }\n\n static renderRowsPlain(\n rows: ComboboxRow[],\n value: string | string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n showNoResults: boolean,\n noResultsMessage: string,\n isLoading: boolean,\n onScroll: (e: Event) => void,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n noResultsSubtitle?: string,\n ): TemplateResult {\n if (showNoResults && !isLoading && rows.length === 0) {\n return ComboboxRenderer.renderNoResults(noResultsMessage, noResultsSubtitle);\n }\n\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div class=\"combobox__options-plain\" @scroll=${onScroll}>\n ${rows.map((row) =>\n row.kind === 'header'\n ? ComboboxRenderer.renderGroupHeader(row)\n : ComboboxRenderer.renderItem(\n row.item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix, enableDescription,\n ),\n )}\n </div>\n </div>\n `;\n }\n\n static renderRowsVirtualized(\n virtualItems: VirtualItem[],\n totalSize: number,\n rows: ComboboxRow[],\n value: string | string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n isLoading: boolean,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n ): TemplateResult {\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div style=\"position:relative;height:${totalSize}px;width:100%;\">\n ${repeat(\n virtualItems,\n (vItem) => vItem.key,\n (vItem) => {\n const row = rows[vItem.index];\n if (!row) return html``;\n const posStyle =\n `position:absolute;top:0;left:0;right:0;` +\n `transform:translateY(${vItem.start}px);` +\n `height:${vItem.size}px;`;\n if (row.kind === 'header') {\n return html`\n <div style=${posStyle} class=\"combobox__group-header-slot\">\n ${ComboboxRenderer.renderGroupHeader(row)}\n </div>\n `;\n }\n return html`\n <div style=${posStyle}>\n ${ComboboxRenderer.renderItem(\n row.item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix, enableDescription,\n )}\n </div>\n `;\n },\n )}\n </div>\n </div>\n `;\n }\n\n static renderVirtualizedOptions(\n virtualItems: VirtualItem[],\n totalSize: number,\n data: any[],\n value: string | string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n isLoading: boolean,\n allowHtmlLabel: boolean,\n measureElement: (el: Element | null) => void,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n ): TemplateResult {\n const offsetTop = virtualItems.length > 0 ? virtualItems[0].start : 0;\n\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div style=\"position:relative;height:${totalSize}px;width:100%;\">\n <div style=\"position:absolute;top:0;left:0;width:100%;transform:translateY(${offsetTop}px);\">\n ${repeat(\n virtualItems,\n (vItem) => vItem.key,\n (vItem) => {\n const item = data[vItem.index];\n return ComboboxRenderer.renderMeasuredItem(\n item, vItem.index, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix, enableDescription,\n );\n },\n )}\n </div>\n </div>\n </div>\n `;\n }\n\n static renderPlainOptions(\n data: any[],\n value: string | string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n showNoResults: boolean,\n noResultsMessage: string,\n isLoading: boolean,\n onScroll: (e: Event) => void,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n noResultsSubtitle?: string,\n ): TemplateResult {\n if (showNoResults && !isLoading && data.length === 0) {\n return ComboboxRenderer.renderNoResults(noResultsMessage, noResultsSubtitle);\n }\n\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div class=\"combobox__options-plain\" @scroll=${onScroll}>\n ${data.map((item: any) =>\n ComboboxRenderer.renderItem(\n item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix, enableDescription,\n ),\n )}\n </div>\n </div>\n `;\n }\n\n static renderNoResults(noResultsMessage: string, noResultsSubtitle?: string): TemplateResult {\n return html`\n <div part=\"select-options\" class=\"combobox__options\">\n <div part=\"no-results\" class=\"combobox__no-results\">\n <div part=\"no-results-title\" class=\"combobox__no-results-title\">\n ${noResultsMessage || 'No result found'}\n </div>\n ${noResultsSubtitle\n ? html`<div part=\"no-results-subtitle\" class=\"combobox__no-results-subtitle\">${noResultsSubtitle}</div>`\n : ''}\n </div>\n </div>\n `;\n }\n\n static renderNoData(noDataMessage: string): TemplateResult {\n return html`\n <div part=\"select-options\" class=\"combobox__options\">\n <div part=\"no-data\" class=\"combobox__no-results\">\n <div part=\"no-data-title\" class=\"combobox__no-results-title\">\n ${noDataMessage || 'No data available'}\n </div>\n </div>\n </div>\n `;\n }\n\n private static renderMeasuredItem(\n item: any,\n index: number,\n value: string | string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n ): TemplateResult {\n if (!item) return html``;\n\n const optionValue = getItemValue(item);\n const displayText = getDisplayText(item);\n const isDisabled = item?.disabled || false;\n const className = item?.className;\n const description = getItemDescription ? getItemDescription(item) : (item?.description ?? '');\n const prefix = getItemPrefix ? getItemPrefix(item) : (item?.prefix ?? '');\n const suffix = getItemSuffix ? getItemSuffix(item) : (item?.suffix ?? '');\n\n let isSelected = false;\n if (multiple) {\n isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));\n } else {\n isSelected = String(Array.isArray(value) ? value[0] : value) === String(optionValue);\n }\n\n return html`\n <nile-option\n data-index=${index}\n value=${optionValue}\n .selected=${isSelected}\n .disabled=${isDisabled}\n .showCheckbox=${multiple}\n class=${classMap({\n option: enableDescription ?? false,\n [className ?? '']: !!className,\n })}\n .description=${description}\n .isDescriptionEnabled=${enableDescription}\n >\n ${unsafeHTML(prefix)}\n ${allowHtmlLabel ? unsafeHTML(displayText) : displayText}\n ${unsafeHTML(suffix)}\n </nile-option>\n `;\n }\n\n static renderItem(\n item: any,\n value: string | string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n ): TemplateResult {\n if (!item) return html``;\n\n const optionValue = getItemValue(item);\n const displayText = getDisplayText(item);\n const isDisabled = item?.disabled || false;\n const className = item?.className;\n const description = getItemDescription ? getItemDescription(item) : (item?.description ?? '');\n const prefix = getItemPrefix ? getItemPrefix(item) : (item?.prefix ?? '');\n const suffix = getItemSuffix ? getItemSuffix(item) : (item?.suffix ?? '');\n\n let isSelected = false;\n if (multiple) {\n isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));\n } else {\n isSelected = String(Array.isArray(value) ? value[0] : value) === String(optionValue);\n }\n\n return html`\n <nile-option\n value=${optionValue}\n .selected=${isSelected}\n .disabled=${isDisabled}\n .showCheckbox=${multiple}\n class=${classMap({\n option: enableDescription ?? false,\n [className ?? '']: !!className,\n })}\n .description=${description}\n .isDescriptionEnabled=${enableDescription}\n >\n ${unsafeHTML(prefix)}\n ${allowHtmlLabel ? unsafeHTML(displayText) : displayText}\n ${unsafeHTML(suffix)}\n </nile-option>\n `;\n }\n\n static renderVirtualizedGrid(\n virtualItems: VirtualItem[],\n totalSize: number,\n data: any[],\n value: string | string[],\n multiple: boolean,\n gridColumns: number,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n isLoading: boolean,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n gridColumnWidth?: number,\n ): TemplateResult {\n const offsetTop = virtualItems.length > 0 ? virtualItems[0].start : 0;\n const colTemplate = gridColumnWidth\n ? `repeat(${gridColumns}, ${gridColumnWidth}px)`\n : `repeat(${gridColumns}, 1fr)`;\n\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div style=\"position:relative;height:${totalSize}px;width:${gridColumnWidth ? 'max-content' : '100%'};min-width:100%;\">\n <div style=\"position:absolute;top:0;left:0;width:${gridColumnWidth ? 'max-content' : '100%'};min-width:100%;transform:translateY(${offsetTop}px);\">\n ${repeat(\n virtualItems,\n (vItem) => vItem.key,\n (vItem) => {\n const rowStart = vItem.index * gridColumns;\n const rowItems = data.slice(rowStart, rowStart + gridColumns);\n return html`\n <div class=\"combobox__grid-row\" style=\"display:grid;grid-template-columns:${colTemplate};gap:4px;\">\n ${rowItems.map((item: any) =>\n ComboboxRenderer.renderItem(\n item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix,\n ),\n )}\n </div>\n `;\n },\n )}\n </div>\n </div>\n </div>\n `;\n }\n\n static renderHorizontalGrid(\n virtualItems: VirtualItem[],\n totalSize: number,\n data: any[],\n value: string | string[],\n multiple: boolean,\n gridRows: number,\n gridColumnWidth: number,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n isLoading: boolean,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n ): TemplateResult {\n const offsetLeft = virtualItems.length > 0 ? virtualItems[0].start : 0;\n const rowHeight = 38;\n\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options combobox__options--horizontal ${isLoading ? 'loading' : ''}\"\n >\n <div style=\"position:relative;width:${totalSize}px;height:${rowHeight * gridRows}px;\">\n <div style=\"position:absolute;top:0;left:0;height:100%;display:flex;transform:translateX(${offsetLeft}px);\">\n ${repeat(\n virtualItems,\n (vCol) => vCol.key,\n (vCol) => {\n const colStart = vCol.index * gridRows;\n const colItems = data.slice(colStart, colStart + gridRows);\n return html`\n <div class=\"combobox__grid-col\" style=\"width:${gridColumnWidth}px;flex-shrink:0;display:flex;flex-direction:column;\">\n ${colItems.map((item: any) =>\n ComboboxRenderer.renderItem(\n item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix,\n ),\n )}\n </div>\n `;\n },\n )}\n </div>\n </div>\n </div>\n `;\n }\n\n static renderAddCustomOption(\n searchValue: string,\n multiple: boolean,\n ): TemplateResult {\n return html`\n <nile-option\n value=${searchValue}\n class=\"combobox__add-option\"\n .showCheckbox=${multiple}\n >\n + Add \"${searchValue}\"\n </nile-option>\n `;\n }\n\n static shouldUseVirtualizer(data: any[], gridColumns = 1): boolean {\n if (gridColumns > 1) return true;\n return data.length >= 5;\n }\n}\n"],"names":["ComboboxRenderer","s","_classCallCheck","_createClass","key","value","renderGroupHeader","row","html","_templateObject","_taggedTemplateLiteral","id","depth","prefix","_templateObject2","label","renderRowsPlain","rows","multiple","getDisplayText","getItemValue","showNoResults","noResultsMessage","isLoading","onScroll","allowHtmlLabel","getItemDescription","getItemPrefix","getItemSuffix","enableDescription","noResultsSubtitle","length","renderNoResults","_templateObject3","map","kind","renderItem","item","renderRowsVirtualized","virtualItems","totalSize","_templateObject4","repeat","vItem","index","_templateObject5","posStyle","concat","start","size","_templateObject6","_templateObject7","renderVirtualizedOptions","data","measureElement","offsetTop","_templateObject8","renderMeasuredItem","renderPlainOptions","_templateObject9","_templateObject10","_templateObject11","renderNoData","noDataMessage","_templateObject12","_templateObject13","optionValue","displayText","isDisabled","disabled","className","description","_e$description","_e$prefix","suffix","isSelected","Array","isArray","some","v","String","_templateObject14","classMap","option","unsafeHTML","_e$description2","_e$prefix2","_e$suffix2","_templateObject15","_templateObject16","renderVirtualizedGrid","gridColumns","gridColumnWidth","colTemplate","_templateObject17","rowStart","rowItems","slice","_templateObject18","renderHorizontalGrid","gridRows","offsetLeft","_templateObject19","vCol","colStart","colItems","_templateObject20","renderAddCustomOption","searchValue","_templateObject21","shouldUseVirtualizer","arguments","undefined"],"mappings":"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"}
1
+ {"version":3,"file":"renderer.cjs.js","sources":["../../../src/nile-combobox/renderer.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, type TemplateResult } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport type { VirtualItem } from '@tanstack/virtual-core';\nimport type { ComboboxRow, ComboboxHeaderRow } from './types';\n\nexport class ComboboxRenderer {\n\n static renderGroupHeader(row: ComboboxHeaderRow): TemplateResult {\n return html`\n <div\n part=\"group-header\"\n class=\"combobox__group-header\"\n role=\"presentation\"\n data-group-id=${row.id}\n style=${`--group-depth:${row.depth}`}\n >\n ${row.prefix\n ? html`<nile-icon\n class=\"combobox__group-prefix\"\n name=${row.prefix}\n size=\"14\"\n method=\"fill\"\n ></nile-icon>`\n : ''}\n <span class=\"combobox__group-label\">${row.label}</span>\n </div>\n `;\n }\n\n static renderRowsPlain(\n rows: ComboboxRow[],\n value: string | string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n showNoResults: boolean,\n noResultsMessage: string,\n isLoading: boolean,\n onScroll: (e: Event) => void,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n noResultsSubtitle?: string,\n ): TemplateResult {\n if (showNoResults && !isLoading && rows.length === 0) {\n return ComboboxRenderer.renderNoResults(noResultsMessage, noResultsSubtitle);\n }\n\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div class=\"combobox__options-plain\" @scroll=${onScroll}>\n ${rows.map((row) =>\n row.kind === 'header'\n ? ComboboxRenderer.renderGroupHeader(row)\n : ComboboxRenderer.renderItem(\n row.item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix, enableDescription,\n ),\n )}\n </div>\n </div>\n `;\n }\n\n static renderRowsVirtualized(\n virtualItems: VirtualItem[],\n totalSize: number,\n rows: ComboboxRow[],\n value: string | string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n isLoading: boolean,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n stickyOverlay?: TemplateResult,\n stickyIndex = -1,\n ): TemplateResult {\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div style=\"position:relative;height:${totalSize}px;width:100%;\">\n ${stickyOverlay ?? ''}\n ${repeat(\n virtualItems,\n (vItem) => vItem.key,\n (vItem) => {\n const row = rows[vItem.index];\n if (!row) return html``;\n const posStyle =\n `position:absolute;top:0;left:0;right:0;` +\n `transform:translateY(${vItem.start}px);` +\n `height:${vItem.size}px;`;\n if (row.kind === 'header') {\n const headerStyle =\n vItem.index === stickyIndex ? `${posStyle}visibility:hidden;` : posStyle;\n return html`\n <div style=${headerStyle} class=\"combobox__group-header-slot\">\n ${ComboboxRenderer.renderGroupHeader(row)}\n </div>\n `;\n }\n return html`\n <div style=${posStyle}>\n ${ComboboxRenderer.renderItem(\n row.item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix, enableDescription,\n )}\n </div>\n `;\n },\n )}\n </div>\n </div>\n `;\n }\n\n static renderVirtualizedOptions(\n virtualItems: VirtualItem[],\n totalSize: number,\n data: any[],\n value: string | string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n isLoading: boolean,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n ): TemplateResult {\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div style=\"position:relative;height:${totalSize}px;width:100%;\">\n ${repeat(\n virtualItems,\n (vItem) => vItem.key,\n (vItem) => {\n const item = data[vItem.index];\n const posStyle =\n `position:absolute;top:0;left:0;right:0;` +\n `transform:translateY(${vItem.start}px);` +\n `height:${vItem.size}px;`;\n return html`\n <div style=${posStyle}>\n ${ComboboxRenderer.renderItem(\n item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix, enableDescription,\n )}\n </div>\n `;\n },\n )}\n </div>\n </div>\n `;\n }\n\n static renderPlainOptions(\n data: any[],\n value: string | string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n showNoResults: boolean,\n noResultsMessage: string,\n isLoading: boolean,\n onScroll: (e: Event) => void,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n noResultsSubtitle?: string,\n ): TemplateResult {\n if (showNoResults && !isLoading && data.length === 0) {\n return ComboboxRenderer.renderNoResults(noResultsMessage, noResultsSubtitle);\n }\n\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div class=\"combobox__options-plain\" @scroll=${onScroll}>\n ${data.map((item: any) =>\n ComboboxRenderer.renderItem(\n item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix, enableDescription,\n ),\n )}\n </div>\n </div>\n `;\n }\n\n static renderNoResults(noResultsMessage: string, noResultsSubtitle?: string): TemplateResult {\n return html`\n <div part=\"select-options\" class=\"combobox__options\">\n <div part=\"no-results\" class=\"combobox__no-results\">\n <div part=\"no-results-title\" class=\"combobox__no-results-title\">\n ${noResultsMessage || 'No result found'}\n </div>\n ${noResultsSubtitle\n ? html`<div part=\"no-results-subtitle\" class=\"combobox__no-results-subtitle\">${noResultsSubtitle}</div>`\n : ''}\n </div>\n </div>\n `;\n }\n\n static renderNoData(noDataMessage: string): TemplateResult {\n return html`\n <div part=\"select-options\" class=\"combobox__options\">\n <div part=\"no-data\" class=\"combobox__no-results\">\n <div part=\"no-data-title\" class=\"combobox__no-results-title\">\n ${noDataMessage || 'No data available'}\n </div>\n </div>\n </div>\n `;\n }\n\n static renderItem(\n item: any,\n value: string | string[],\n multiple: boolean,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n enableDescription?: boolean,\n ): TemplateResult {\n if (!item) return html``;\n\n const optionValue = getItemValue(item);\n const displayText = getDisplayText(item);\n const isDisabled = item?.disabled || false;\n const className = item?.className;\n const description = getItemDescription ? getItemDescription(item) : (item?.description ?? '');\n const prefix = getItemPrefix ? getItemPrefix(item) : (item?.prefix ?? '');\n const suffix = getItemSuffix ? getItemSuffix(item) : (item?.suffix ?? '');\n\n let isSelected = false;\n if (multiple) {\n isSelected = Array.isArray(value) && value.some(v => String(v) === String(optionValue));\n } else {\n isSelected = String(Array.isArray(value) ? value[0] : value) === String(optionValue);\n }\n\n return html`\n <nile-option\n value=${optionValue}\n .selected=${isSelected}\n .disabled=${isDisabled}\n .showCheckbox=${multiple}\n class=${classMap({\n option: enableDescription ?? false,\n [className ?? '']: !!className,\n })}\n .description=${description}\n .isDescriptionEnabled=${enableDescription}\n >\n ${unsafeHTML(prefix)}\n ${allowHtmlLabel ? unsafeHTML(displayText) : displayText}\n ${unsafeHTML(suffix)}\n </nile-option>\n `;\n }\n\n static renderVirtualizedGrid(\n virtualItems: VirtualItem[],\n totalSize: number,\n data: any[],\n value: string | string[],\n multiple: boolean,\n gridColumns: number,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n isLoading: boolean,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n gridColumnWidth?: number,\n ): TemplateResult {\n const offsetTop = virtualItems.length > 0 ? virtualItems[0].start : 0;\n const colTemplate = gridColumnWidth\n ? `repeat(${gridColumns}, ${gridColumnWidth}px)`\n : `repeat(${gridColumns}, 1fr)`;\n\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options ${isLoading ? 'loading' : ''}\"\n >\n <div style=\"position:relative;height:${totalSize}px;width:${gridColumnWidth ? 'max-content' : '100%'};min-width:100%;\">\n <div style=\"position:absolute;top:0;left:0;width:${gridColumnWidth ? 'max-content' : '100%'};min-width:100%;transform:translateY(${offsetTop}px);\">\n ${repeat(\n virtualItems,\n (vItem) => vItem.key,\n (vItem) => {\n const rowStart = vItem.index * gridColumns;\n const rowItems = data.slice(rowStart, rowStart + gridColumns);\n return html`\n <div class=\"combobox__grid-row\" style=\"display:grid;grid-template-columns:${colTemplate};gap:4px;\">\n ${rowItems.map((item: any) =>\n ComboboxRenderer.renderItem(\n item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix,\n ),\n )}\n </div>\n `;\n },\n )}\n </div>\n </div>\n </div>\n `;\n }\n\n static renderHorizontalGrid(\n virtualItems: VirtualItem[],\n totalSize: number,\n data: any[],\n value: string | string[],\n multiple: boolean,\n gridRows: number,\n gridColumnWidth: number,\n getDisplayText: (item: any) => string,\n getItemValue: (item: any) => string,\n isLoading: boolean,\n allowHtmlLabel: boolean,\n getItemDescription?: (item: any) => string,\n getItemPrefix?: (item: any) => string,\n getItemSuffix?: (item: any) => string,\n ): TemplateResult {\n const offsetLeft = virtualItems.length > 0 ? virtualItems[0].start : 0;\n const rowHeight = 38;\n\n return html`\n <div\n part=\"select-options\"\n class=\"combobox__options combobox__options--horizontal ${isLoading ? 'loading' : ''}\"\n >\n <div style=\"position:relative;width:${totalSize}px;height:${rowHeight * gridRows}px;\">\n <div style=\"position:absolute;top:0;left:0;height:100%;display:flex;transform:translateX(${offsetLeft}px);\">\n ${repeat(\n virtualItems,\n (vCol) => vCol.key,\n (vCol) => {\n const colStart = vCol.index * gridRows;\n const colItems = data.slice(colStart, colStart + gridRows);\n return html`\n <div class=\"combobox__grid-col\" style=\"width:${gridColumnWidth}px;flex-shrink:0;display:flex;flex-direction:column;\">\n ${colItems.map((item: any) =>\n ComboboxRenderer.renderItem(\n item, value, multiple, getDisplayText, getItemValue,\n allowHtmlLabel, getItemDescription, getItemPrefix,\n getItemSuffix,\n ),\n )}\n </div>\n `;\n },\n )}\n </div>\n </div>\n </div>\n `;\n }\n\n static renderAddCustomOption(\n searchValue: string,\n multiple: boolean,\n ): TemplateResult {\n return html`\n <nile-option\n value=${searchValue}\n class=\"combobox__add-option\"\n .showCheckbox=${multiple}\n >\n + Add \"${searchValue}\"\n </nile-option>\n `;\n }\n\n static shouldUseVirtualizer(data: any[], gridColumns = 1): boolean {\n if (gridColumns > 1) return true;\n return data.length >= 5;\n }\n}\n"],"names":["ComboboxRenderer","e","_classCallCheck","_createClass","key","value","renderGroupHeader","row","html","_templateObject","_taggedTemplateLiteral","id","depth","prefix","_templateObject2","label","renderRowsPlain","rows","multiple","getDisplayText","getItemValue","showNoResults","noResultsMessage","isLoading","onScroll","allowHtmlLabel","getItemDescription","getItemPrefix","getItemSuffix","enableDescription","noResultsSubtitle","length","renderNoResults","_templateObject3","map","kind","renderItem","item","renderRowsVirtualized","virtualItems","totalSize","stickyOverlay","stickyIndex","arguments","undefined","_templateObject4","repeat","vItem","index","_templateObject5","posStyle","concat","start","size","headerStyle","_templateObject6","_templateObject7","renderVirtualizedOptions","data","_templateObject8","_templateObject9","renderPlainOptions","_templateObject10","_templateObject11","_templateObject12","renderNoData","noDataMessage","_templateObject13","_s$description","_s$prefix","_s$suffix","_templateObject14","optionValue","displayText","isDisabled","disabled","className","description","suffix","isSelected","Array","isArray","some","v","String","_templateObject15","classMap","option","unsafeHTML","renderVirtualizedGrid","gridColumns","gridColumnWidth","offsetTop","colTemplate","_templateObject16","rowStart","rowItems","slice","_templateObject17","renderHorizontalGrid","gridRows","offsetLeft","_templateObject18","vCol","colStart","colItems","_templateObject19","renderAddCustomOption","searchValue","_templateObject20","shouldUseVirtualizer"],"mappings":"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"}
package/dist/nile-combobox/renderer.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import{html as t}from"lit";import{unsafeHTML as o}from"lit/directives/unsafe-html.js";import{classMap as i}from"lit/directives/class-map.js";import{repeat as e}from"lit/directives/repeat.js";class s{static renderGroupHeader(o){return t`
1
+ import{html as t}from"lit";import{unsafeHTML as o}from"lit/directives/unsafe-html.js";import{classMap as i}from"lit/directives/class-map.js";import{repeat as s}from"lit/directives/repeat.js";class e{static renderGroupHeader(o){return t`
2
2
  <div
3
3
  part="group-header"
4
4
  class="combobox__group-header"
@@ -14,50 +14,53 @@ import{html as t}from"lit";import{unsafeHTML as o}from"lit/directives/unsafe-htm
14
14
  ></nile-icon>`:""}
15
15
  <span class="combobox__group-label">${o.label}</span>
16
16
  </div>
17
- `}static renderRowsPlain(o,i,e,r,n,l,a,d,p,c,$,v,b,u,m){return l&&!d&&0===o.length?s.renderNoResults(a,m):t`
17
+ `}static renderRowsPlain(o,i,s,r,n,l,a,d,p,c,v,$,b,u,m){return l&&!d&&0===o.length?e.renderNoResults(a,m):t`
18
18
  <div
19
19
  part="select-options"
20
20
  class="combobox__options ${d?"loading":""}"
21
21
  >
22
22
  <div class="combobox__options-plain" @scroll=${p}>
23
- ${o.map((t=>"header"===t.kind?s.renderGroupHeader(t):s.renderItem(t.item,i,e,r,n,c,$,v,b,u)))}
23
+ ${o.map((t=>"header"===t.kind?e.renderGroupHeader(t):e.renderItem(t.item,i,s,r,n,c,v,$,b,u)))}
24
24
  </div>
25
25
  </div>
26
- `}static renderRowsVirtualized(o,i,r,n,l,a,d,p,c,$,v,b,u){return t`
26
+ `}static renderRowsVirtualized(o,i,r,n,l,a,d,p,c,v,$,b,u,m,x=-1){return t`
27
27
  <div
28
28
  part="select-options"
29
29
  class="combobox__options ${p?"loading":""}"
30
30
  >
31
31
  <div style="position:relative;height:${i}px;width:100%;">
32
- ${e(o,(t=>t.key),(o=>{const i=r[o.index];if(!i)return t``;const e=`position:absolute;top:0;left:0;right:0;transform:translateY(${o.start}px);height:${o.size}px;`;return"header"===i.kind?t`
33
- <div style=${e} class="combobox__group-header-slot">
34
- ${s.renderGroupHeader(i)}
32
+ ${m??""}
33
+ ${s(o,(t=>t.key),(o=>{const i=r[o.index];if(!i)return t``;const s=`position:absolute;top:0;left:0;right:0;transform:translateY(${o.start}px);height:${o.size}px;`;if("header"===i.kind){const r=o.index===x?`${s}visibility:hidden;`:s;return t`
34
+ <div style=${r} class="combobox__group-header-slot">
35
+ ${e.renderGroupHeader(i)}
35
36
  </div>
36
- `:t`
37
- <div style=${e}>
38
- ${s.renderItem(i.item,n,l,a,d,c,$,v,b,u)}
37
+ `}return t`
38
+ <div style=${s}>
39
+ ${e.renderItem(i.item,n,l,a,d,c,v,$,b,u)}
39
40
  </div>
40
41
  `}))}
41
42
  </div>
42
43
  </div>
43
- `}static renderVirtualizedOptions(o,i,r,n,l,a,d,p,c,$,v,b,u,m){const x=o.length>0?o[0].start:0;return t`
44
+ `}static renderVirtualizedOptions(o,i,r,n,l,a,d,p,c,v,$,b,u){return t`
44
45
  <div
45
46
  part="select-options"
46
47
  class="combobox__options ${p?"loading":""}"
47
48
  >
48
49
  <div style="position:relative;height:${i}px;width:100%;">
49
- <div style="position:absolute;top:0;left:0;width:100%;transform:translateY(${x}px);">
50
- ${e(o,(t=>t.key),(t=>{const o=r[t.index];return s.renderMeasuredItem(o,t.index,n,l,a,d,c,v,b,u,m)}))}
51
- </div>
50
+ ${s(o,(t=>t.key),(o=>{const i=r[o.index],s=`position:absolute;top:0;left:0;right:0;transform:translateY(${o.start}px);height:${o.size}px;`;return t`
51
+ <div style=${s}>
52
+ ${e.renderItem(i,n,l,a,d,c,v,$,b,u)}
53
+ </div>
54
+ `}))}
52
55
  </div>
53
56
  </div>
54
- `}static renderPlainOptions(o,i,e,r,n,l,a,d,p,c,$,v,b,u,m){return l&&!d&&0===o.length?s.renderNoResults(a,m):t`
57
+ `}static renderPlainOptions(o,i,s,r,n,l,a,d,p,c,v,$,b,u,m){return l&&!d&&0===o.length?e.renderNoResults(a,m):t`
55
58
  <div
56
59
  part="select-options"
57
60
  class="combobox__options ${d?"loading":""}"
58
61
  >
59
62
  <div class="combobox__options-plain" @scroll=${p}>
60
- ${o.map((t=>s.renderItem(t,i,e,r,n,c,$,v,b,u)))}
63
+ ${o.map((t=>e.renderItem(t,i,s,r,n,c,v,$,b,u)))}
61
64
  </div>
62
65
  </div>
63
66
  `}static renderNoResults(o,i){return t`
@@ -77,60 +80,45 @@ import{html as t}from"lit";import{unsafeHTML as o}from"lit/directives/unsafe-htm
77
80
  </div>
78
81
  </div>
79
82
  </div>
80
- `}static renderMeasuredItem(e,s,r,n,l,a,d,p,c,$,v){if(!e)return t``;const b=a(e),u=l(e),m=e?.disabled||!1,x=e?.className,_=p?p(e):e?.description??"",h=c?c(e):e?.prefix??"",g=$?$(e):e?.suffix??"";let f=!1;return f=n?Array.isArray(r)&&r.some((t=>String(t)===String(b))):String(Array.isArray(r)?r[0]:r)===String(b),t`
83
+ `}static renderItem(s,e,r,n,l,a,d,p,c,v){if(!s)return t``;const $=l(s),b=n(s),u=s?.disabled||!1,m=s?.className,x=d?d(s):s?.description??"",_=p?p(s):s?.prefix??"",h=c?c(s):s?.suffix??"";let g=!1;return g=r?Array.isArray(e)&&e.some((t=>String(t)===String($))):String(Array.isArray(e)?e[0]:e)===String($),t`
81
84
  <nile-option
82
- data-index=${s}
83
- value=${b}
84
- .selected=${f}
85
- .disabled=${m}
86
- .showCheckbox=${n}
87
- class=${i({option:v??!1,[x??""]:!!x})}
88
- .description=${_}
89
- .isDescriptionEnabled=${v}
90
- >
91
- ${o(h)}
92
- ${d?o(u):u}
93
- ${o(g)}
94
- </nile-option>
95
- `}static renderItem(e,s,r,n,l,a,d,p,c,$){if(!e)return t``;const v=l(e),b=n(e),u=e?.disabled||!1,m=e?.className,x=d?d(e):e?.description??"",_=p?p(e):e?.prefix??"",h=c?c(e):e?.suffix??"";let g=!1;return g=r?Array.isArray(s)&&s.some((t=>String(t)===String(v))):String(Array.isArray(s)?s[0]:s)===String(v),t`
96
- <nile-option
97
- value=${v}
85
+ value=${$}
98
86
  .selected=${g}
99
87
  .disabled=${u}
100
88
  .showCheckbox=${r}
101
- class=${i({option:$??!1,[m??""]:!!m})}
89
+ class=${i({option:v??!1,[m??""]:!!m})}
102
90
  .description=${x}
103
- .isDescriptionEnabled=${$}
91
+ .isDescriptionEnabled=${v}
104
92
  >
105
93
  ${o(_)}
106
94
  ${a?o(b):b}
107
95
  ${o(h)}
108
96
  </nile-option>
109
- `}static renderVirtualizedGrid(o,i,r,n,l,a,d,p,c,$,v,b,u,m){const x=o.length>0?o[0].start:0,_=m?`repeat(${a}, ${m}px)`:`repeat(${a}, 1fr)`;return t`
97
+ `}static renderVirtualizedGrid(o,i,r,n,l,a,d,p,c,v,$,b,u,m){const x=o.length>0?o[0].start:0,_=m?`repeat(${a}, ${m}px)`:`repeat(${a}, 1fr)`;return t`
110
98
  <div
111
99
  part="select-options"
112
100
  class="combobox__options ${c?"loading":""}"
113
101
  >
114
102
  <div style="position:relative;height:${i}px;width:${m?"max-content":"100%"};min-width:100%;">
115
103
  <div style="position:absolute;top:0;left:0;width:${m?"max-content":"100%"};min-width:100%;transform:translateY(${x}px);">
116
- ${e(o,(t=>t.key),(o=>{const i=o.index*a,e=r.slice(i,i+a);return t`
104
+ ${s(o,(t=>t.key),(o=>{const i=o.index*a,s=r.slice(i,i+a);return t`
117
105
  <div class="combobox__grid-row" style="display:grid;grid-template-columns:${_};gap:4px;">
118
- ${e.map((t=>s.renderItem(t,n,l,d,p,$,v,b,u)))}
106
+ ${s.map((t=>e.renderItem(t,n,l,d,p,v,$,b,u)))}
119
107
  </div>
120
108
  `}))}
121
109
  </div>
122
110
  </div>
123
111
  </div>
124
- `}static renderHorizontalGrid(o,i,r,n,l,a,d,p,c,$,v,b,u,m){const x=o.length>0?o[0].start:0;return t`
112
+ `}static renderHorizontalGrid(o,i,r,n,l,a,d,p,c,v,$,b,u,m){const x=o.length>0?o[0].start:0;return t`
125
113
  <div
126
114
  part="select-options"
127
- class="combobox__options combobox__options--horizontal ${$?"loading":""}"
115
+ class="combobox__options combobox__options--horizontal ${v?"loading":""}"
128
116
  >
129
117
  <div style="position:relative;width:${i}px;height:${38*a}px;">
130
118
  <div style="position:absolute;top:0;left:0;height:100%;display:flex;transform:translateX(${x}px);">
131
- ${e(o,(t=>t.key),(o=>{const i=o.index*a,e=r.slice(i,i+a);return t`
119
+ ${s(o,(t=>t.key),(o=>{const i=o.index*a,s=r.slice(i,i+a);return t`
132
120
  <div class="combobox__grid-col" style="width:${d}px;flex-shrink:0;display:flex;flex-direction:column;">
133
- ${e.map((t=>s.renderItem(t,n,l,p,c,v,b,u,m)))}
121
+ ${s.map((t=>e.renderItem(t,n,l,p,c,$,b,u,m)))}
134
122
  </div>
135
123
  `}))}
136
124
  </div>
@@ -144,4 +132,4 @@ import{html as t}from"lit";import{unsafeHTML as o}from"lit/directives/unsafe-htm
144
132
  >
145
133
  + Add "${o}"
146
134
  </nile-option>
147
- `}static shouldUseVirtualizer(t,o=1){return o>1||t.length>=5}}export{s as C};
135
+ `}static shouldUseVirtualizer(t,o=1){return o>1||t.length>=5}}export{e as C};
package/dist/src/nile-combobox/nile-combobox.css.js CHANGED
@@ -348,20 +348,26 @@ export const styles = css `
348
348
  /* ── Listbox (dropdown) ── */
349
349
 
350
350
  .combobox__listbox {
351
- display: block;
351
+ display: flex;
352
+ flex-direction: column;
352
353
  position: relative;
353
354
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
354
355
  font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
355
356
  background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
356
357
  border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));
357
358
  border-radius: var(--nile-radius-sm, var(--ng-radius-md));
358
- padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));
359
- padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));
360
- overscroll-behavior: none;
361
- overflow-y: auto;
359
+ padding: 0;
362
360
  max-width: var(--auto-size-available-width);
363
361
  max-height: var(--auto-size-available-height);
364
362
  box-shadow: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);
363
+ overflow: hidden; /* Scrolling is handled by .combobox__options-scroll below */
364
+ box-sizing: border-box;
365
+ }
366
+
367
+ .combobox__options-scroll {
368
+ overflow-y: auto;
369
+ flex: 0 1 auto;
370
+ min-height: 0;
365
371
  }
366
372
 
367
373
  /* ── Options ── */
@@ -369,7 +375,11 @@ export const styles = css `
369
375
  .combobox__options {
370
376
  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
371
377
  color: rgb(133, 129, 129);
378
+ display: block;
379
+ position: relative;
372
380
  width: 100%;
381
+ padding-bottom: 0;
382
+ box-sizing: border-box;
373
383
  }
374
384
 
375
385
  .combobox__options.loading {
@@ -423,9 +433,6 @@ export const styles = css `
423
433
  /* ── Top actions (Select All + Selected/All filter toggle) ── */
424
434
 
425
435
  .combobox__top-actions {
426
- position: sticky;
427
- top: 0;
428
- z-index: 2;
429
436
  display: flex;
430
437
  flex-direction: row;
431
438
  align-items: center;
@@ -480,16 +487,15 @@ export const styles = css `
480
487
  /* ── Footer ── */
481
488
 
482
489
  .combobox__footer {
483
- position: sticky;
484
- bottom: 0;
490
+ flex-shrink: 0;
485
491
  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
486
492
  border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
487
493
  display: flex;
488
494
  flex-direction: row;
489
- align-items: flex-start;
490
- padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));
491
- gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
495
+ align-items: center;
492
496
  justify-content: space-between;
497
+ padding: var(--nile-spacing-md, 8px) var(--nile-spacing-lg, 12px);
498
+ margin-top: 0;
493
499
  }
494
500
 
495
501
  .combobox__footer.loading {
@@ -547,7 +553,7 @@ export const styles = css `
547
553
 
548
554
  /* ── Grid layout ── */
549
555
 
550
- :host([grid-columns]) .combobox__listbox {
556
+ :host([grid-columns]) .combobox__options-scroll {
551
557
  overflow-y: auto;
552
558
  }
553
559
 
@@ -567,8 +573,11 @@ export const styles = css `
567
573
  /* ── Bidirectional grid layout (vertical + horizontal scroll) ── */
568
574
 
569
575
  .combobox__listbox.combobox__listbox--bidirectional {
570
- overflow: auto;
571
576
  max-width: none;
577
+ }
578
+
579
+ .combobox__listbox--bidirectional .combobox__options-scroll {
580
+ overflow: auto;
572
581
  scrollbar-width: thin;
573
582
  scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary)) transparent;
574
583
  }
@@ -652,6 +661,8 @@ export const styles = css `
652
661
  * header (computed on scroll). */
653
662
  .combobox__group-header-slot {
654
663
  pointer-events: none;
664
+ z-index: 3;
665
+ background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
655
666
  }
656
667
  .combobox__group-header-slot .combobox__group-header {
657
668
  height: 100%;
@@ -663,6 +674,8 @@ export const styles = css `
663
674
  top: 0;
664
675
  z-index: 2;
665
676
  pointer-events: none;
677
+ height: 32px;
678
+ overflow: hidden;
666
679
  }
667
680
  .combobox__group-sticky-overlay .combobox__group-header {
668
681
  box-shadow: 0 1px 0 0 var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
package/dist/src/nile-combobox/nile-combobox.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-combobox.css.js","sourceRoot":"","sources":["../../../src/nile-combobox/nile-combobox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0sBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: block;\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none;\n }\n\n /* ── Form control ── */\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control--has-label .form-control__label {\n display: block;\n margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n }\n\n :host([disabled]) .form-control--has-label .form-control__label {\n user-select: none;\n -webkit-user-select: none;\n }\n\n /* ── Popup ── */\n\n .combobox-popup {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n }\n\n .combobox-popup::part(popup) {\n z-index: 9999;\n }\n\n .combobox-popup[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .combobox-popup[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n /* ── Trigger: outer row that never scrolls ── */\n\n .combobox__trigger {\n display: flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n position: relative;\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n letter-spacing: normal;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow, 150ms background-color;\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n outline: none;\n }\n\n .combobox__trigger:hover {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n }\n\n .combobox--open .combobox__trigger,\n .combobox--focused .combobox__trigger {\n border-color: var(--ng-colors-border-brand);\n box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .combobox--disabled .combobox__trigger {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n cursor: not-allowed;\n user-select: none;\n }\n\n .combobox--warning .combobox__trigger {\n border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n }\n\n .combobox--error .combobox__trigger {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n }\n\n .combobox--success .combobox__trigger {\n border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n }\n\n /* Size: small */\n .combobox--small .combobox__trigger {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n padding: var(--nile-spacing-md, var(--ng-spacing-sm)) var(--nile-spacing-md, var(--ng-spacing-md));\n min-height: var(--nile-height-32px, var(--ng-height-32px));\n }\n\n /* Size: medium */\n .combobox--medium .combobox__trigger {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n min-height: var(--nile-height-40px, var(--ng-height-40px));\n box-sizing: border-box;\n }\n\n /* Size: large */\n .combobox--large .combobox__trigger {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n padding: var(--nile-spacing-xl, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n min-height: var(--nile-height-48px, var(--ng-height-48px));\n }\n\n .combobox--pill .combobox__trigger {\n border-radius: var(--nile-radius-3xl, var(--ng-radius-3xl));\n }\n\n .combobox--filled .combobox__trigger {\n border: none;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .combobox--filled.combobox--open .combobox__trigger,\n .combobox--filled.combobox--focused .combobox__trigger {\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n /* ── Inner area: holds tags + input ── */\n\n .combobox__scroll-area {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 4px;\n overflow: hidden;\n }\n\n /* Single-line: horizontal scroll for overflowing tags */\n .combobox__scroll-area--single-line {\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary)) transparent;\n }\n\n .combobox__scroll-area--single-line::-webkit-scrollbar {\n height: 3px;\n }\n\n .combobox__scroll-area--single-line::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .combobox__scroll-area--single-line::-webkit-scrollbar-thumb {\n background: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary));\n border-radius: 3px;\n }\n\n .combobox__scroll-area--single-line::-webkit-scrollbar-thumb:hover {\n background: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n }\n\n /* Wrap: tags flow to multiple lines, trigger grows in height */\n .combobox__scroll-area--wrap {\n flex-wrap: wrap;\n overflow: visible;\n }\n\n /* ── Tags inside the scroll area ── */\n\n .combobox__scroll-area nile-tag {\n cursor: pointer;\n flex-shrink: 0;\n }\n\n .combobox--disabled .combobox__scroll-area nile-tag {\n cursor: not-allowed;\n }\n\n .combobox__tags-count {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n white-space: nowrap;\n flex-shrink: 0;\n }\n\n /* ── Input wrapper inside scroll area ── */\n\n .combobox__input-wrapper {\n flex: 1;\n min-width: 60px;\n display: flex;\n align-items: center;\n }\n\n .combobox__input {\n width: 100%;\n font: inherit;\n border: none;\n background: none;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n cursor: inherit;\n overflow: hidden;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: inherit;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n text-overflow: ellipsis;\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n }\n\n .combobox__input::placeholder {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n }\n\n .combobox__input:focus {\n outline: none;\n }\n\n .combobox--disabled .combobox__input {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n /* ── Hidden form value input ── */\n\n .combobox__value-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n opacity: 0;\n z-index: -1;\n }\n\n /* ── Action icons (clear, expand) ── */\n\n .combobox__actions {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n margin-inline-start: auto;\n }\n\n .combobox__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n transition: 150ms color;\n }\n\n .combobox__clear:hover {\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .combobox__clear:focus {\n outline: none;\n }\n\n .combobox__expand-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n transition: 250ms rotate ease;\n rotate: 0;\n }\n\n .combobox--open .combobox__expand-icon {\n rotate: -180deg;\n }\n\n /* ── Prefix / suffix ── */\n\n .combobox__prefix,\n .combobox__suffix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .combobox__prefix {\n margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n /* ── Listbox (dropdown) ── */\n\n .combobox__listbox {\n display: block;\n position: relative;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));\n padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));\n overscroll-behavior: none;\n overflow-y: auto;\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n box-shadow: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);\n }\n\n /* ── Options ── */\n\n .combobox__options {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: rgb(133, 129, 129);\n width: 100%;\n }\n\n .combobox__options.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .combobox__no-results {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n text-align: center;\n }\n\n .combobox__no-results-title {\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n color: var(--nile-colors-dark-700, var(--ng-colors-text-secondary-700));\n }\n\n .combobox__no-results-subtitle {\n margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n /* ── Options (both virtual and plain) ── */\n\n .combobox__options nile-option {\n width: 100%;\n display: block;\n }\n\n .combobox__options nile-option[selected] {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .combobox__options nile-option[selected]::part(base) {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n }\n\n .combobox__options-plain {\n display: flex;\n flex-direction: column;\n }\n\n .combobox__options-plain nile-option {\n flex-shrink: 0;\n }\n\n /* ── Top actions (Select All + Selected/All filter toggle) ── */\n\n .combobox__top-actions {\n position: sticky;\n top: 0;\n z-index: 2;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n user-select: none;\n }\n\n .combobox__top-actions--disabled {\n opacity: 0.6;\n pointer-events: none;\n }\n\n .combobox__select-all {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n cursor: pointer;\n flex: 1 1 auto;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n line-height: 14px;\n letter-spacing: 0.2px;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .combobox__show-toggle {\n display: inline-flex;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n border: none;\n background: none;\n padding: 0;\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n cursor: pointer;\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n line-height: 14px;\n letter-spacing: 0.2px;\n white-space: nowrap;\n }\n\n .combobox__show-toggle[disabled] {\n color: var(--nile-colors-primary-500, var(--ng-colors-fg-quaternary-400));\n cursor: not-allowed;\n }\n\n /* ── Footer ── */\n\n .combobox__footer {\n position: sticky;\n bottom: 0;\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n justify-content: space-between;\n }\n\n .combobox__footer.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .combobox__footer-clear {\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n letter-spacing: 0.2px;\n }\n\n .combobox__footer-clear:hover {\n text-decoration: underline;\n }\n\n /* ── Loader ── */\n\n .combobox__loader {\n width: 100%;\n text-align: center;\n display: block;\n }\n\n .combobox__loader--icon {\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n animation: combobox-spin 0.6s linear infinite;\n }\n\n .combobox__loader--center {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 75%;\n }\n\n @keyframes combobox-spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .combobox__add-option::part(base) {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n }\n\n /* ── Grid layout ── */\n\n :host([grid-columns]) .combobox__listbox {\n overflow-y: auto;\n }\n\n .combobox__grid-row {\n width: 100%;\n }\n\n .combobox__grid-row nile-option {\n min-width: 0;\n overflow: hidden;\n }\n\n .combobox__grid-row nile-option::part(base) {\n border-radius: var(--nile-radius-xs, var(--ng-radius-sm));\n }\n\n /* ── Bidirectional grid layout (vertical + horizontal scroll) ── */\n\n .combobox__listbox.combobox__listbox--bidirectional {\n overflow: auto;\n max-width: none;\n scrollbar-width: thin;\n scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary)) transparent;\n }\n\n .combobox__listbox--bidirectional .combobox__options {\n width: max-content;\n min-width: 100%;\n }\n\n .combobox__listbox--bidirectional .combobox__grid-row {\n width: max-content;\n min-width: 100%;\n }\n\n /* ── Horizontal grid layout ── */\n\n .combobox__listbox.combobox__listbox--horizontal {\n overflow-x: auto;\n overflow-y: hidden;\n max-height: none;\n max-width: none;\n width: 100%;\n scrollbar-width: thin;\n scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary)) transparent;\n }\n\n .combobox__listbox--horizontal::-webkit-scrollbar {\n height: 6px;\n }\n\n .combobox__listbox--horizontal::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .combobox__listbox--horizontal::-webkit-scrollbar-thumb {\n background: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary));\n border-radius: 3px;\n }\n\n .combobox__listbox--horizontal::-webkit-scrollbar-thumb:hover {\n background: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n }\n\n .combobox__options--horizontal {\n display: block;\n width: max-content;\n min-width: 100%;\n }\n\n .combobox__grid-col {\n border-right: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n }\n\n .combobox__grid-col:last-child {\n border-right: none;\n }\n\n .combobox__grid-col nile-option {\n width: 100%;\n display: block;\n }\n\n .combobox__grid-col nile-option::part(base) {\n border-radius: 0;\n }\n\n /* ── Group headers (data-driven grouping) ── */\n\n /* Plain (non-virtualized) listbox: sticky relative to the scroll container.\n * Activated only when the host has [sticky-group-header]. */\n :host([sticky-group-header]) .combobox__options-plain .combobox__group-header {\n position: sticky;\n top: calc(var(--group-depth, 0) * 28px);\n z-index: 1;\n }\n\n /* Virtualized listbox: each row is absolutely positioned by the virtualizer.\n * Sticky doesn't pin against the scroll container because the row wrapper's\n * transform creates a containing block. Instead we render a separate\n * overlay inside the listbox that mirrors the currently-active group\n * header (computed on scroll). */\n .combobox__group-header-slot {\n pointer-events: none;\n }\n .combobox__group-header-slot .combobox__group-header {\n height: 100%;\n box-sizing: border-box;\n }\n\n .combobox__group-sticky-overlay {\n position: sticky;\n top: 0;\n z-index: 2;\n pointer-events: none;\n }\n .combobox__group-sticky-overlay .combobox__group-header {\n box-shadow: 0 1px 0 0 var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));\n }\n\n .combobox__group-header {\n display: flex;\n align-items: center;\n gap: 6px;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n /* Match the listbox's natural inline padding so the header sits like a\n * section divider, edge-to-edge with options. Nested groups indent by\n * depth. Override with --combobox-group-header-indent if needed. */\n padding-block: 8px;\n padding-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding-inline-start: calc(var(--combobox-group-header-indent, var(--nile-spacing-lg, var(--ng-spacing-lg))) + var(--group-depth, 0) * 16px);\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n line-height: 1;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n border-bottom: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));\n pointer-events: none;\n user-select: none;\n }\n\n .combobox__group-label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .combobox__group-prefix {\n flex-shrink: 0;\n color: inherit;\n }\n\n /* ── Help / Error ── */\n\n .form-control__help-text {\n display: none;\n }\n\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-combobox.css.js","sourceRoot":"","sources":["../../../src/nile-combobox/nile-combobox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAutBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: block;\n box-sizing: border-box;\n -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n }\n\n :host *,\n :host *::before,\n :host *::after {\n box-sizing: inherit;\n }\n\n [hidden] {\n display: none;\n }\n\n /* ── Form control ── */\n\n .form-control .form-control__label {\n display: none;\n }\n\n .form-control--has-label .form-control__label {\n display: block;\n margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));\n color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-style: normal;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n }\n\n .form-control--has-label.form-control--medium .form-control__label {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n\n :host([required]) .form-control--has-label .form-control__label::after {\n content: '*';\n margin-inline-start: -2px;\n color: var(--nile-colors-red-700, var(--ng-colors-text-error-primary-600));\n }\n\n :host([disabled]) .form-control--has-label .form-control__label {\n user-select: none;\n -webkit-user-select: none;\n }\n\n /* ── Popup ── */\n\n .combobox-popup {\n flex: 1 1 auto;\n display: inline-flex;\n width: 100%;\n position: relative;\n vertical-align: middle;\n }\n\n .combobox-popup::part(popup) {\n z-index: 9999;\n }\n\n .combobox-popup[data-current-placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .combobox-popup[data-current-placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n /* ── Trigger: outer row that never scrolls ── */\n\n .combobox__trigger {\n display: flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n position: relative;\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n letter-spacing: normal;\n cursor: text;\n transition: 150ms color, 150ms border, 150ms box-shadow, 150ms background-color;\n background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n outline: none;\n }\n\n .combobox__trigger:hover {\n border-color: var(--nile-colors-dark-900, var(--ng-colors-border-neutral));\n }\n\n .combobox--open .combobox__trigger,\n .combobox--focused .combobox__trigger {\n border-color: var(--ng-colors-border-brand);\n box-shadow: 0 0 0 1px var(--ng-colors-border-brand) inset;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .combobox--disabled .combobox__trigger {\n background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n cursor: not-allowed;\n user-select: none;\n }\n\n .combobox--warning .combobox__trigger {\n border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));\n }\n\n .combobox--error .combobox__trigger {\n border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));\n }\n\n .combobox--success .combobox__trigger {\n border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));\n }\n\n /* Size: small */\n .combobox--small .combobox__trigger {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n padding: var(--nile-spacing-md, var(--ng-spacing-sm)) var(--nile-spacing-md, var(--ng-spacing-md));\n min-height: var(--nile-height-32px, var(--ng-height-32px));\n }\n\n /* Size: medium */\n .combobox--medium .combobox__trigger {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));\n min-height: var(--nile-height-40px, var(--ng-height-40px));\n box-sizing: border-box;\n }\n\n /* Size: large */\n .combobox--large .combobox__trigger {\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));\n padding: var(--nile-spacing-xl, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n min-height: var(--nile-height-48px, var(--ng-height-48px));\n }\n\n .combobox--pill .combobox__trigger {\n border-radius: var(--nile-radius-3xl, var(--ng-radius-3xl));\n }\n\n .combobox--filled .combobox__trigger {\n border: none;\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .combobox--filled.combobox--open .combobox__trigger,\n .combobox--filled.combobox--focused .combobox__trigger {\n outline: 3px solid rgba(0, 89, 255, 0.4);\n }\n\n /* ── Inner area: holds tags + input ── */\n\n .combobox__scroll-area {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 4px;\n overflow: hidden;\n }\n\n /* Single-line: horizontal scroll for overflowing tags */\n .combobox__scroll-area--single-line {\n flex-wrap: nowrap;\n overflow-x: auto;\n overflow-y: hidden;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: thin;\n scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary)) transparent;\n }\n\n .combobox__scroll-area--single-line::-webkit-scrollbar {\n height: 3px;\n }\n\n .combobox__scroll-area--single-line::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .combobox__scroll-area--single-line::-webkit-scrollbar-thumb {\n background: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary));\n border-radius: 3px;\n }\n\n .combobox__scroll-area--single-line::-webkit-scrollbar-thumb:hover {\n background: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n }\n\n /* Wrap: tags flow to multiple lines, trigger grows in height */\n .combobox__scroll-area--wrap {\n flex-wrap: wrap;\n overflow: visible;\n }\n\n /* ── Tags inside the scroll area ── */\n\n .combobox__scroll-area nile-tag {\n cursor: pointer;\n flex-shrink: 0;\n }\n\n .combobox--disabled .combobox__scroll-area nile-tag {\n cursor: not-allowed;\n }\n\n .combobox__tags-count {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n letter-spacing: 0.2px;\n white-space: nowrap;\n flex-shrink: 0;\n }\n\n /* ── Input wrapper inside scroll area ── */\n\n .combobox__input-wrapper {\n flex: 1;\n min-width: 60px;\n display: flex;\n align-items: center;\n }\n\n .combobox__input {\n width: 100%;\n font: inherit;\n border: none;\n background: none;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n cursor: inherit;\n overflow: hidden;\n padding: 0;\n margin: 0;\n -webkit-appearance: none;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: inherit;\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n text-overflow: ellipsis;\n line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n }\n\n .combobox__input::placeholder {\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));\n }\n\n .combobox__input:focus {\n outline: none;\n }\n\n .combobox--disabled .combobox__input {\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n pointer-events: none;\n }\n\n /* ── Hidden form value input ── */\n\n .combobox__value-input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n opacity: 0;\n z-index: -1;\n }\n\n /* ── Action icons (clear, expand) ── */\n\n .combobox__actions {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n gap: var(--nile-spacing-sm, var(--ng-spacing-sm));\n margin-inline-start: auto;\n }\n\n .combobox__clear {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n color: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n transition: 150ms color;\n }\n\n .combobox__clear:hover {\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .combobox__clear:focus {\n outline: none;\n }\n\n .combobox__expand-icon {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n transition: 250ms rotate ease;\n rotate: 0;\n }\n\n .combobox--open .combobox__expand-icon {\n rotate: -180deg;\n }\n\n /* ── Prefix / suffix ── */\n\n .combobox__prefix,\n .combobox__suffix {\n flex: 0;\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n .combobox__prefix {\n margin-inline-end: var(--nile-spacing-md, var(--ng-spacing-md));\n }\n\n /* ── Listbox (dropdown) ── */\n\n .combobox__listbox {\n display: flex;\n flex-direction: column;\n position: relative;\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));\n border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n padding: 0;\n max-width: var(--auto-size-available-width);\n max-height: var(--auto-size-available-height);\n box-shadow: 0px 2px 4px 0px rgba(119, 125, 130, 0.15);\n overflow: hidden; /* Scrolling is handled by .combobox__options-scroll below */\n box-sizing: border-box;\n }\n\n .combobox__options-scroll {\n overflow-y: auto;\n flex: 0 1 auto;\n min-height: 0;\n }\n\n /* ── Options ── */\n\n .combobox__options {\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: rgb(133, 129, 129);\n display: block;\n position: relative;\n width: 100%;\n padding-bottom: 0;\n box-sizing: border-box;\n }\n\n .combobox__options.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .combobox__no-results {\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n text-align: center;\n }\n\n .combobox__no-results-title {\n font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n color: var(--nile-colors-dark-700, var(--ng-colors-text-secondary-700));\n }\n\n .combobox__no-results-subtitle {\n margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n }\n\n /* ── Options (both virtual and plain) ── */\n\n .combobox__options nile-option {\n width: 100%;\n display: block;\n }\n\n .combobox__options nile-option[selected] {\n background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .combobox__options nile-option[selected]::part(base) {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n }\n\n .combobox__options-plain {\n display: flex;\n flex-direction: column;\n }\n\n .combobox__options-plain nile-option {\n flex-shrink: 0;\n }\n\n /* ── Top actions (Select All + Selected/All filter toggle) ── */\n\n .combobox__top-actions {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n padding: var(--nile-spacing-lg, var(--ng-spacing-lg));\n user-select: none;\n }\n\n .combobox__top-actions--disabled {\n opacity: 0.6;\n pointer-events: none;\n }\n\n .combobox__select-all {\n display: flex;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n cursor: pointer;\n flex: 1 1 auto;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n line-height: 14px;\n letter-spacing: 0.2px;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .combobox__show-toggle {\n display: inline-flex;\n align-items: center;\n gap: var(--nile-spacing-md, var(--ng-spacing-md));\n border: none;\n background: none;\n padding: 0;\n border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n cursor: pointer;\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n line-height: 14px;\n letter-spacing: 0.2px;\n white-space: nowrap;\n }\n\n .combobox__show-toggle[disabled] {\n color: var(--nile-colors-primary-500, var(--ng-colors-fg-quaternary-400));\n cursor: not-allowed;\n }\n\n /* ── Footer ── */\n\n .combobox__footer {\n flex-shrink: 0;\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n border-top: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n padding: var(--nile-spacing-md, 8px) var(--nile-spacing-lg, 12px);\n margin-top: 0;\n }\n\n .combobox__footer.loading {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .combobox__footer-clear {\n display: inline-flex;\n align-items: center;\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n border: none;\n background: none;\n padding: 0;\n cursor: pointer;\n font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n letter-spacing: 0.2px;\n }\n\n .combobox__footer-clear:hover {\n text-decoration: underline;\n }\n\n /* ── Loader ── */\n\n .combobox__loader {\n width: 100%;\n text-align: center;\n display: block;\n }\n\n .combobox__loader--icon {\n margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));\n animation: combobox-spin 0.6s linear infinite;\n }\n\n .combobox__loader--center {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 75%;\n }\n\n @keyframes combobox-spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n .combobox__add-option::part(base) {\n color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));\n }\n\n /* ── Grid layout ── */\n\n :host([grid-columns]) .combobox__options-scroll {\n overflow-y: auto;\n }\n\n .combobox__grid-row {\n width: 100%;\n }\n\n .combobox__grid-row nile-option {\n min-width: 0;\n overflow: hidden;\n }\n\n .combobox__grid-row nile-option::part(base) {\n border-radius: var(--nile-radius-xs, var(--ng-radius-sm));\n }\n\n /* ── Bidirectional grid layout (vertical + horizontal scroll) ── */\n\n .combobox__listbox.combobox__listbox--bidirectional {\n max-width: none;\n }\n\n .combobox__listbox--bidirectional .combobox__options-scroll {\n overflow: auto;\n scrollbar-width: thin;\n scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary)) transparent;\n }\n\n .combobox__listbox--bidirectional .combobox__options {\n width: max-content;\n min-width: 100%;\n }\n\n .combobox__listbox--bidirectional .combobox__grid-row {\n width: max-content;\n min-width: 100%;\n }\n\n /* ── Horizontal grid layout ── */\n\n .combobox__listbox.combobox__listbox--horizontal {\n overflow-x: auto;\n overflow-y: hidden;\n max-height: none;\n max-width: none;\n width: 100%;\n scrollbar-width: thin;\n scrollbar-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary)) transparent;\n }\n\n .combobox__listbox--horizontal::-webkit-scrollbar {\n height: 6px;\n }\n\n .combobox__listbox--horizontal::-webkit-scrollbar-track {\n background: transparent;\n }\n\n .combobox__listbox--horizontal::-webkit-scrollbar-thumb {\n background: var(--nile-colors-neutral-500, var(--ng-colors-bg-quaternary));\n border-radius: 3px;\n }\n\n .combobox__listbox--horizontal::-webkit-scrollbar-thumb:hover {\n background: var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400));\n }\n\n .combobox__options--horizontal {\n display: block;\n width: max-content;\n min-width: 100%;\n }\n\n .combobox__grid-col {\n border-right: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n }\n\n .combobox__grid-col:last-child {\n border-right: none;\n }\n\n .combobox__grid-col nile-option {\n width: 100%;\n display: block;\n }\n\n .combobox__grid-col nile-option::part(base) {\n border-radius: 0;\n }\n\n /* ── Group headers (data-driven grouping) ── */\n\n /* Plain (non-virtualized) listbox: sticky relative to the scroll container.\n * Activated only when the host has [sticky-group-header]. */\n :host([sticky-group-header]) .combobox__options-plain .combobox__group-header {\n position: sticky;\n top: calc(var(--group-depth, 0) * 28px);\n z-index: 1;\n }\n\n /* Virtualized listbox: each row is absolutely positioned by the virtualizer.\n * Sticky doesn't pin against the scroll container because the row wrapper's\n * transform creates a containing block. Instead we render a separate\n * overlay inside the listbox that mirrors the currently-active group\n * header (computed on scroll). */\n .combobox__group-header-slot {\n pointer-events: none;\n z-index: 3;\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n .combobox__group-header-slot .combobox__group-header {\n height: 100%;\n box-sizing: border-box;\n }\n\n .combobox__group-sticky-overlay {\n position: sticky;\n top: 0;\n z-index: 2;\n pointer-events: none;\n height: 32px;\n overflow: hidden;\n }\n .combobox__group-sticky-overlay .combobox__group-header {\n box-shadow: 0 1px 0 0 var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));\n }\n\n .combobox__group-header {\n display: flex;\n align-items: center;\n gap: 6px;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n /* Match the listbox's natural inline padding so the header sits like a\n * section divider, edge-to-edge with options. Nested groups indent by\n * depth. Override with --combobox-group-header-indent if needed. */\n padding-block: 8px;\n padding-inline-end: var(--nile-spacing-lg, var(--ng-spacing-lg));\n padding-inline-start: calc(var(--combobox-group-header-indent, var(--nile-spacing-lg, var(--ng-spacing-lg))) + var(--group-depth, 0) * 16px);\n font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));\n font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n line-height: 1;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n border-bottom: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));\n pointer-events: none;\n user-select: none;\n }\n\n .combobox__group-label {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .combobox__group-prefix {\n flex-shrink: 0;\n color: inherit;\n }\n\n /* ── Help / Error ── */\n\n .form-control__help-text {\n display: none;\n }\n\n .form-control--has-help-text .form-control__help-text {\n display: block;\n color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n }\n`;\n\nexport default [styles];\n"]}