@nuralyui/select 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle.js +45 -22
- package/package.json +1 -1
- package/react.js +1 -1
- package/react.js.map +1 -1
- package/select.component.d.ts +30 -10
- package/select.component.js +69 -23
- package/select.component.js.map +1 -1
- package/select.style.js +26 -6
- package/select.style.js.map +1 -1
package/bundle.js
CHANGED
|
@@ -14,19 +14,19 @@ const t=window,e=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"
|
|
|
14
14
|
* Copyright 2017 Google LLC
|
|
15
15
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
16
16
|
*/
|
|
17
|
-
var f;y[v]=!0,y.elementProperties=new Map,y.elementStyles=[],y.shadowRootOptions={mode:"open"},null==h||h({ReactiveElement:y}),(null!==(n=l.reactiveElementVersions)&&void 0!==n?n:l.reactiveElementVersions=[]).push("1.6.3");const g=window,m=g.trustedTypes,b=m?m.createPolicy("lit-html",{createHTML:t=>t}):void 0,w="$lit$",x=`lit$${(Math.random()+"").slice(9)}$`,$="?"+x,E=`<${$}>`,S=document,O=()=>S.createComment(""),A=t=>null===t||"object"!=typeof t&&"function"!=typeof t,k=Array.isArray,
|
|
17
|
+
var f;y[v]=!0,y.elementProperties=new Map,y.elementStyles=[],y.shadowRootOptions={mode:"open"},null==h||h({ReactiveElement:y}),(null!==(n=l.reactiveElementVersions)&&void 0!==n?n:l.reactiveElementVersions=[]).push("1.6.3");const g=window,m=g.trustedTypes,b=m?m.createPolicy("lit-html",{createHTML:t=>t}):void 0,w="$lit$",x=`lit$${(Math.random()+"").slice(9)}$`,$="?"+x,E=`<${$}>`,S=document,O=()=>S.createComment(""),A=t=>null===t||"object"!=typeof t&&"function"!=typeof t,k=Array.isArray,z="[ \t\n\f\r]",C=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_=/-->/g,T=/>/g,N=RegExp(`>|${z}(?:([^\\s"'>=/]+)(${z}*=${z}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),D=/'/g,I=/"/g,R=/^(?:script|style|textarea|title)$/i,U=Symbol.for("lit-noChange"),P=Symbol.for("lit-nothing"),L=new WeakMap,F=S.createTreeWalker(S,129,null,!1);function M(t,e){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==b?b.createHTML(e):e}class B{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let o=0,r=0;const n=t.length-1,l=this.parts,[a,c]=((t,e)=>{const i=t.length-1,s=[];let o,r=2===e?"<svg>":"",n=C;for(let e=0;e<i;e++){const i=t[e];let l,a,c=-1,h=0;for(;h<i.length&&(n.lastIndex=h,a=n.exec(i),null!==a);)h=n.lastIndex,n===C?"!--"===a[1]?n=_:void 0!==a[1]?n=T:void 0!==a[2]?(R.test(a[2])&&(o=RegExp("</"+a[2],"g")),n=N):void 0!==a[3]&&(n=N):n===N?">"===a[0]?(n=null!=o?o:C,c=-1):void 0===a[1]?c=-2:(c=n.lastIndex-a[2].length,l=a[1],n=void 0===a[3]?N:'"'===a[3]?I:D):n===I||n===D?n=N:n===_||n===T?n=C:(n=N,o=void 0);const d=n===N&&t[e+1].startsWith("/>")?" ":"";r+=n===C?i+E:c>=0?(s.push(l),i.slice(0,c)+w+i.slice(c)+x+d):i+x+(-2===c?(s.push(void 0),e):d)}return[M(t,r+(t[i]||"<?>")+(2===e?"</svg>":"")),s]})(t,e);if(this.el=B.createElement(a,i),F.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(s=F.nextNode())&&l.length<n;){if(1===s.nodeType){if(s.hasAttributes()){const t=[];for(const e of s.getAttributeNames())if(e.endsWith(w)||e.startsWith(x)){const i=c[r++];if(t.push(e),void 0!==i){const t=s.getAttribute(i.toLowerCase()+w).split(x),e=/([.?@])?(.*)/.exec(i);l.push({type:1,index:o,name:e[2],strings:t,ctor:"."===e[1]?G:"?"===e[1]?q:"@"===e[1]?Y:W})}else l.push({type:6,index:o})}for(const e of t)s.removeAttribute(e)}if(R.test(s.tagName)){const t=s.textContent.split(x),e=t.length-1;if(e>0){s.textContent=m?m.emptyScript:"";for(let i=0;i<e;i++)s.append(t[i],O()),F.nextNode(),l.push({type:2,index:++o});s.append(t[e],O())}}}else if(8===s.nodeType)if(s.data===$)l.push({type:2,index:o});else{let t=-1;for(;-1!==(t=s.data.indexOf(x,t+1));)l.push({type:7,index:o}),t+=x.length-1}o++}}static createElement(t,e){const i=S.createElement("template");return i.innerHTML=t,i}}function j(t,e,i=t,s){var o,r,n,l;if(e===U)return e;let a=void 0!==s?null===(o=i._$Co)||void 0===o?void 0:o[s]:i._$Cl;const c=A(e)?void 0:e._$litDirective$;return(null==a?void 0:a.constructor)!==c&&(null===(r=null==a?void 0:a._$AO)||void 0===r||r.call(a,!1),void 0===c?a=void 0:(a=new c(t),a._$AT(t,i,s)),void 0!==s?(null!==(n=(l=i)._$Co)&&void 0!==n?n:l._$Co=[])[s]=a:i._$Cl=a),void 0!==a&&(e=j(t,a._$AS(t,e.values),a,s)),e}class V{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var e;const{el:{content:i},parts:s}=this._$AD,o=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:S).importNode(i,!0);F.currentNode=o;let r=F.nextNode(),n=0,l=0,a=s[0];for(;void 0!==a;){if(n===a.index){let e;2===a.type?e=new H(r,r.nextSibling,this,t):1===a.type?e=new a.ctor(r,a.name,a.strings,this,t):6===a.type&&(e=new Z(r,this,t)),this._$AV.push(e),a=s[++l]}n!==(null==a?void 0:a.index)&&(r=F.nextNode(),n++)}return F.currentNode=S,o}v(t){let e=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class H{constructor(t,e,i,s){var o;this.type=2,this._$AH=P,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=s,this._$Cp=null===(o=null==s?void 0:s.isConnected)||void 0===o||o}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$Cp}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===(null==t?void 0:t.nodeType)&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=j(this,t,e),A(t)?t===P||null==t||""===t?(this._$AH!==P&&this._$AR(),this._$AH=P):t!==this._$AH&&t!==U&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):(t=>k(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.T(t):this._(t)}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t))}_(t){this._$AH!==P&&A(this._$AH)?this._$AA.nextSibling.data=t:this.$(S.createTextNode(t)),this._$AH=t}g(t){var e;const{values:i,_$litType$:s}=t,o="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=B.createElement(M(s.h,s.h[0]),this.options)),s);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===o)this._$AH.v(i);else{const t=new V(o,this),e=t.u(this.options);t.v(i),this.$(e),this._$AH=t}}_$AC(t){let e=L.get(t.strings);return void 0===e&&L.set(t.strings,e=new B(t)),e}T(t){k(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,s=0;for(const o of t)s===e.length?e.push(i=new H(this.k(O()),this.k(O()),this,this.options)):i=e[s],i._$AI(o),s++;s<e.length&&(this._$AR(i&&i._$AB.nextSibling,s),e.length=s)}_$AR(t=this._$AA.nextSibling,e){var i;for(null===(i=this._$AP)||void 0===i||i.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$Cp=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class W{constructor(t,e,i,s,o){this.type=1,this._$AH=P,this._$AN=void 0,this.element=t,this.name=e,this._$AM=s,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=P}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,i,s){const o=this.strings;let r=!1;if(void 0===o)t=j(this,t,e,0),r=!A(t)||t!==this._$AH&&t!==U,r&&(this._$AH=t);else{const s=t;let n,l;for(t=o[0],n=0;n<o.length-1;n++)l=j(this,s[i+n],e,n),l===U&&(l=this._$AH[n]),r||(r=!A(l)||l!==this._$AH[n]),l===P?t=P:t!==P&&(t+=(null!=l?l:"")+o[n+1]),this._$AH[n]=l}r&&!s&&this.j(t)}j(t){t===P?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class G extends W{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===P?void 0:t}}const K=m?m.emptyScript:"";class q extends W{constructor(){super(...arguments),this.type=4}j(t){t&&t!==P?this.element.setAttribute(this.name,K):this.element.removeAttribute(this.name)}}class Y extends W{constructor(t,e,i,s,o){super(t,e,i,s,o),this.type=5}_$AI(t,e=this){var i;if((t=null!==(i=j(this,t,e,0))&&void 0!==i?i:P)===U)return;const s=this._$AH,o=t===P&&s!==P||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,r=t!==P&&(s===P||o);o&&this.element.removeEventListener(this.name,this,s),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,i;"function"==typeof this._$AH?this._$AH.call(null!==(i=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==i?i:this.element,t):this._$AH.handleEvent(t)}}class Z{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){j(this,t)}}const Q=g.litHtmlPolyfillSupport;
|
|
18
18
|
/**
|
|
19
19
|
* @license
|
|
20
20
|
* Copyright 2017 Google LLC
|
|
21
21
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
22
22
|
*/
|
|
23
|
-
var X;null==Q||Q(
|
|
23
|
+
var X;null==Q||Q(B,H),(null!==(f=g.litHtmlVersions)&&void 0!==f?f:g.litHtmlVersions=[]).push("2.8.0");const J=window,tt=J.trustedTypes,et=tt?tt.createPolicy("lit-html",{createHTML:t=>t}):void 0,it="$lit$",st=`lit$${(Math.random()+"").slice(9)}$`,ot="?"+st,rt=`<${ot}>`,nt=document,lt=()=>nt.createComment(""),at=t=>null===t||"object"!=typeof t&&"function"!=typeof t,ct=Array.isArray,ht="[ \t\n\f\r]",dt=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,ut=/-->/g,pt=/>/g,vt=RegExp(`>|${ht}(?:([^\\s"'>=/]+)(${ht}*=${ht}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),yt=/'/g,ft=/"/g,gt=/^(?:script|style|textarea|title)$/i,mt=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),bt=Symbol.for("lit-noChange"),wt=Symbol.for("lit-nothing"),xt=new WeakMap,$t=nt.createTreeWalker(nt,129,null,!1);function Et(t,e){if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==et?et.createHTML(e):e}const St=(t,e)=>{const i=t.length-1,s=[];let o,r=2===e?"<svg>":"",n=dt;for(let e=0;e<i;e++){const i=t[e];let l,a,c=-1,h=0;for(;h<i.length&&(n.lastIndex=h,a=n.exec(i),null!==a);)h=n.lastIndex,n===dt?"!--"===a[1]?n=ut:void 0!==a[1]?n=pt:void 0!==a[2]?(gt.test(a[2])&&(o=RegExp("</"+a[2],"g")),n=vt):void 0!==a[3]&&(n=vt):n===vt?">"===a[0]?(n=null!=o?o:dt,c=-1):void 0===a[1]?c=-2:(c=n.lastIndex-a[2].length,l=a[1],n=void 0===a[3]?vt:'"'===a[3]?ft:yt):n===ft||n===yt?n=vt:n===ut||n===pt?n=dt:(n=vt,o=void 0);const d=n===vt&&t[e+1].startsWith("/>")?" ":"";r+=n===dt?i+rt:c>=0?(s.push(l),i.slice(0,c)+it+i.slice(c)+st+d):i+st+(-2===c?(s.push(void 0),e):d)}return[Et(t,r+(t[i]||"<?>")+(2===e?"</svg>":"")),s]};class Ot{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let o=0,r=0;const n=t.length-1,l=this.parts,[a,c]=St(t,e);if(this.el=Ot.createElement(a,i),$t.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(s=$t.nextNode())&&l.length<n;){if(1===s.nodeType){if(s.hasAttributes()){const t=[];for(const e of s.getAttributeNames())if(e.endsWith(it)||e.startsWith(st)){const i=c[r++];if(t.push(e),void 0!==i){const t=s.getAttribute(i.toLowerCase()+it).split(st),e=/([.?@])?(.*)/.exec(i);l.push({type:1,index:o,name:e[2],strings:t,ctor:"."===e[1]?_t:"?"===e[1]?Nt:"@"===e[1]?Dt:Ct})}else l.push({type:6,index:o})}for(const e of t)s.removeAttribute(e)}if(gt.test(s.tagName)){const t=s.textContent.split(st),e=t.length-1;if(e>0){s.textContent=tt?tt.emptyScript:"";for(let i=0;i<e;i++)s.append(t[i],lt()),$t.nextNode(),l.push({type:2,index:++o});s.append(t[e],lt())}}}else if(8===s.nodeType)if(s.data===ot)l.push({type:2,index:o});else{let t=-1;for(;-1!==(t=s.data.indexOf(st,t+1));)l.push({type:7,index:o}),t+=st.length-1}o++}}static createElement(t,e){const i=nt.createElement("template");return i.innerHTML=t,i}}function At(t,e,i=t,s){var o,r,n,l;if(e===bt)return e;let a=void 0!==s?null===(o=i._$Co)||void 0===o?void 0:o[s]:i._$Cl;const c=at(e)?void 0:e._$litDirective$;return(null==a?void 0:a.constructor)!==c&&(null===(r=null==a?void 0:a._$AO)||void 0===r||r.call(a,!1),void 0===c?a=void 0:(a=new c(t),a._$AT(t,i,s)),void 0!==s?(null!==(n=(l=i)._$Co)&&void 0!==n?n:l._$Co=[])[s]=a:i._$Cl=a),void 0!==a&&(e=At(t,a._$AS(t,e.values),a,s)),e}class kt{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){var e;const{el:{content:i},parts:s}=this._$AD,o=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:nt).importNode(i,!0);$t.currentNode=o;let r=$t.nextNode(),n=0,l=0,a=s[0];for(;void 0!==a;){if(n===a.index){let e;2===a.type?e=new zt(r,r.nextSibling,this,t):1===a.type?e=new a.ctor(r,a.name,a.strings,this,t):6===a.type&&(e=new It(r,this,t)),this._$AV.push(e),a=s[++l]}n!==(null==a?void 0:a.index)&&(r=$t.nextNode(),n++)}return $t.currentNode=nt,o}v(t){let e=0;for(const i of this._$AV)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class zt{constructor(t,e,i,s){var o;this.type=2,this._$AH=wt,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=s,this._$Cp=null===(o=null==s?void 0:s.isConnected)||void 0===o||o}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$Cp}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===(null==t?void 0:t.nodeType)&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=At(this,t,e),at(t)?t===wt||null==t||""===t?(this._$AH!==wt&&this._$AR(),this._$AH=wt):t!==this._$AH&&t!==bt&&this._(t):void 0!==t._$litType$?this.g(t):void 0!==t.nodeType?this.$(t):(t=>ct(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]))(t)?this.T(t):this._(t)}k(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}$(t){this._$AH!==t&&(this._$AR(),this._$AH=this.k(t))}_(t){this._$AH!==wt&&at(this._$AH)?this._$AA.nextSibling.data=t:this.$(nt.createTextNode(t)),this._$AH=t}g(t){var e;const{values:i,_$litType$:s}=t,o="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=Ot.createElement(Et(s.h,s.h[0]),this.options)),s);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===o)this._$AH.v(i);else{const t=new kt(o,this),e=t.u(this.options);t.v(i),this.$(e),this._$AH=t}}_$AC(t){let e=xt.get(t.strings);return void 0===e&&xt.set(t.strings,e=new Ot(t)),e}T(t){ct(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,s=0;for(const o of t)s===e.length?e.push(i=new zt(this.k(lt()),this.k(lt()),this,this.options)):i=e[s],i._$AI(o),s++;s<e.length&&(this._$AR(i&&i._$AB.nextSibling,s),e.length=s)}_$AR(t=this._$AA.nextSibling,e){var i;for(null===(i=this._$AP)||void 0===i||i.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$Cp=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class Ct{constructor(t,e,i,s,o){this.type=1,this._$AH=wt,this._$AN=void 0,this.element=t,this.name=e,this._$AM=s,this.options=o,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=wt}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,i,s){const o=this.strings;let r=!1;if(void 0===o)t=At(this,t,e,0),r=!at(t)||t!==this._$AH&&t!==bt,r&&(this._$AH=t);else{const s=t;let n,l;for(t=o[0],n=0;n<o.length-1;n++)l=At(this,s[i+n],e,n),l===bt&&(l=this._$AH[n]),r||(r=!at(l)||l!==this._$AH[n]),l===wt?t=wt:t!==wt&&(t+=(null!=l?l:"")+o[n+1]),this._$AH[n]=l}r&&!s&&this.j(t)}j(t){t===wt?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class _t extends Ct{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===wt?void 0:t}}const Tt=tt?tt.emptyScript:"";class Nt extends Ct{constructor(){super(...arguments),this.type=4}j(t){t&&t!==wt?this.element.setAttribute(this.name,Tt):this.element.removeAttribute(this.name)}}class Dt extends Ct{constructor(t,e,i,s,o){super(t,e,i,s,o),this.type=5}_$AI(t,e=this){var i;if((t=null!==(i=At(this,t,e,0))&&void 0!==i?i:wt)===bt)return;const s=this._$AH,o=t===wt&&s!==wt||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,r=t!==wt&&(s===wt||o);o&&this.element.removeEventListener(this.name,this,s),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,i;"function"==typeof this._$AH?this._$AH.call(null!==(i=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==i?i:this.element,t):this._$AH.handleEvent(t)}}class It{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){At(this,t)}}const Rt=J.litHtmlPolyfillSupport;null==Rt||Rt(Ot,zt),(null!==(X=J.litHtmlVersions)&&void 0!==X?X:J.litHtmlVersions=[]).push("2.8.0");
|
|
24
24
|
/**
|
|
25
25
|
* @license
|
|
26
26
|
* Copyright 2017 Google LLC
|
|
27
27
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
28
28
|
*/
|
|
29
|
-
var Pt
|
|
29
|
+
var Ut,Pt;class Lt extends y{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var t,e;const i=super.createRenderRoot();return null!==(t=(e=this.renderOptions).renderBefore)&&void 0!==t||(e.renderBefore=i.firstChild),i}update(t){const e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=((t,e,i)=>{var s,o;const r=null!==(s=null==i?void 0:i.renderBefore)&&void 0!==s?s:e;let n=r._$litPart$;if(void 0===n){const t=null!==(o=null==i?void 0:i.renderBefore)&&void 0!==o?o:null;r._$litPart$=n=new zt(e.insertBefore(lt(),t),t,void 0,null!=i?i:{})}return n._$AI(t),n})(e,this.renderRoot,this.renderOptions)}connectedCallback(){var t;super.connectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!0)}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this._$Do)||void 0===t||t.setConnected(!1)}render(){return bt}}Lt.finalized=!0,Lt._$litElement$=!0,null===(Ut=globalThis.litElementHydrateSupport)||void 0===Ut||Ut.call(globalThis,{LitElement:Lt});const Ft=globalThis.litElementPolyfillSupport;null==Ft||Ft({LitElement:Lt}),(null!==(Pt=globalThis.litElementVersions)&&void 0!==Pt?Pt:globalThis.litElementVersions=[]).push("3.3.3");
|
|
30
30
|
/**
|
|
31
31
|
* @license
|
|
32
32
|
* Copyright 2017 Google LLC
|
|
@@ -37,7 +37,7 @@ const Mt=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e
|
|
|
37
37
|
* @license
|
|
38
38
|
* Copyright 2017 Google LLC
|
|
39
39
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
40
|
-
*/function
|
|
40
|
+
*/function Bt(t){return(e,i)=>void 0!==i?((t,e,i)=>{e.constructor.createProperty(i,t)})(t,e,i):Mt(t,e)
|
|
41
41
|
/**
|
|
42
42
|
* @license
|
|
43
43
|
* Copyright 2017 Google LLC
|
|
@@ -53,10 +53,9 @@ function jt(t,e){return(({finisher:t,descriptor:e})=>(i,s)=>{var o;if(void 0===s
|
|
|
53
53
|
* @license
|
|
54
54
|
* Copyright 2021 Google LLC
|
|
55
55
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
56
|
-
*/var
|
|
56
|
+
*/var Vt;null===(Vt=window.HTMLSlotElement)||void 0===Vt||Vt.prototype.assignedElements;const Ht=((t,...e)=>{const s=1===t.length?t[0]:e.reduce(((e,i,s)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+t[s+1]),t[0]);return new o(s,t,i)})`
|
|
57
57
|
:host {
|
|
58
58
|
/* Layout and sizing */
|
|
59
|
-
--nuraly-select-local-width: 300px;
|
|
60
59
|
--nuraly-select-local-min-height: 40px;
|
|
61
60
|
--nuraly-select-local-padding-top: 8px;
|
|
62
61
|
--nuraly-select-local-padding-bottom: 8px;
|
|
@@ -69,6 +68,7 @@ function jt(t,e){return(({finisher:t,descriptor:e})=>(i,s)=>{var o;if(void 0===s
|
|
|
69
68
|
/* Dropdown settings */
|
|
70
69
|
--nuraly-select-local-dropdown-z-index: 9999;
|
|
71
70
|
--nuraly-select-local-dropdown-max-height: 200px;
|
|
71
|
+
--nuraly-select-local-dropdown-width: max-content; /* Default to auto-size to content */
|
|
72
72
|
--nuraly-select-local-placeholder-font-size: 14px;
|
|
73
73
|
--nuraly-select-local-option-font-size: 14px;
|
|
74
74
|
|
|
@@ -115,12 +115,13 @@ function jt(t,e){return(({finisher:t,descriptor:e})=>(i,s)=>{var o;if(void 0===s
|
|
|
115
115
|
|
|
116
116
|
/* Size variants */
|
|
117
117
|
:host([size='small']) .wrapper {
|
|
118
|
-
|
|
118
|
+
height: var(--nuraly-select-small-height, 24px);
|
|
119
|
+
min-height: var(--nuraly-select-small-height, 24px);
|
|
119
120
|
font-size: var(--nuraly-select-small-font-size, var(--nuraly-select-local-small-font-size));
|
|
120
121
|
}
|
|
121
122
|
|
|
122
123
|
:host([size='small']) .select-trigger {
|
|
123
|
-
padding: var(--nuraly-select-small-padding,
|
|
124
|
+
padding: var(--nuraly-select-small-padding, 2px 8px);
|
|
124
125
|
padding-right: calc(var(--nuraly-select-icon-size, 16px) + 20px);
|
|
125
126
|
}
|
|
126
127
|
|
|
@@ -168,6 +169,15 @@ function jt(t,e){return(({finisher:t,descriptor:e})=>(i,s)=>{var o;if(void 0===s
|
|
|
168
169
|
flex: 1;
|
|
169
170
|
}
|
|
170
171
|
|
|
172
|
+
/* Block (full width) */
|
|
173
|
+
:host([block]) {
|
|
174
|
+
width: 100%;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
:host([block]) .wrapper {
|
|
178
|
+
width: 100%;
|
|
179
|
+
}
|
|
180
|
+
|
|
171
181
|
/* Show dropdown */
|
|
172
182
|
:host([show]) .options {
|
|
173
183
|
display: flex !important;
|
|
@@ -176,7 +186,7 @@ function jt(t,e){return(({finisher:t,descriptor:e})=>(i,s)=>{var o;if(void 0===s
|
|
|
176
186
|
/* Main wrapper container */
|
|
177
187
|
.wrapper {
|
|
178
188
|
position: relative;
|
|
179
|
-
width: var(--nuraly-select-width,
|
|
189
|
+
width: var(--nuraly-select-width, fit-content);
|
|
180
190
|
background-color: var(--nuraly-select-background-color, #ffffff);
|
|
181
191
|
border: var(--nuraly-select-border-width, var(--nuraly-select-local-border-width)) solid
|
|
182
192
|
var(--nuraly-select-border-color, #d9d9d9);
|
|
@@ -187,6 +197,9 @@ function jt(t,e){return(({finisher:t,descriptor:e})=>(i,s)=>{var o;if(void 0===s
|
|
|
187
197
|
outline: none;
|
|
188
198
|
margin: var(--nuraly-select-wrapper-margin, 0);
|
|
189
199
|
min-height: var(--nuraly-select-min-height, var(--nuraly-select-local-min-height));
|
|
200
|
+
box-sizing: border-box;
|
|
201
|
+
display: flex;
|
|
202
|
+
align-items: center;
|
|
190
203
|
/* Ensure dropdown can overflow the wrapper */
|
|
191
204
|
overflow: visible;
|
|
192
205
|
}
|
|
@@ -219,9 +232,11 @@ function jt(t,e){return(({finisher:t,descriptor:e})=>(i,s)=>{var o;if(void 0===s
|
|
|
219
232
|
font-size: inherit;
|
|
220
233
|
line-height: inherit;
|
|
221
234
|
word-break: break-word;
|
|
222
|
-
|
|
235
|
+
flex: 1;
|
|
236
|
+
min-height: 0;
|
|
223
237
|
flex-wrap: wrap;
|
|
224
238
|
gap: var(--nuraly-select-tag-margin, var(--nuraly-select-local-tag-margin));
|
|
239
|
+
box-sizing: border-box;
|
|
225
240
|
}
|
|
226
241
|
|
|
227
242
|
.select-trigger:empty:before {
|
|
@@ -321,7 +336,12 @@ function jt(t,e){return(({finisher:t,descriptor:e})=>(i,s)=>{var o;if(void 0===s
|
|
|
321
336
|
animation: dropdown-enter var(--nuraly-select-dropdown-animation-duration, 0.15s) ease-out;
|
|
322
337
|
/* Ensure proper containment and exact wrapper width */
|
|
323
338
|
box-sizing: border-box;
|
|
324
|
-
width
|
|
339
|
+
/* Allow overriding width via either of these custom props */
|
|
340
|
+
width: var(
|
|
341
|
+
--nuraly-select-dropdown-width,
|
|
342
|
+
var(--select-dropdown-width, var(--nuraly-select-local-dropdown-width))
|
|
343
|
+
);
|
|
344
|
+
min-width: 100%; /* Ensure dropdown is at least as wide as the wrapper */
|
|
325
345
|
/* Create new stacking context to prevent layering issues */
|
|
326
346
|
isolation: isolate;
|
|
327
347
|
/* Ensure solid background to prevent visual bleed-through */
|
|
@@ -574,12 +594,12 @@ function jt(t,e){return(({finisher:t,descriptor:e})=>(i,s)=>{var o;if(void 0===s
|
|
|
574
594
|
* @license
|
|
575
595
|
* Copyright 2018 Google LLC
|
|
576
596
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
577
|
-
*/const Yt=Kt(class extends qt{constructor(t){var e;if(super(t),t.type!==Gt||"class"!==t.name||(null===(e=t.strings)||void 0===e?void 0:e.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((e=>t[e])).join(" ")+" "}update(t,[e]){var i,s;if(void 0===this.it){this.it=new Set,void 0!==t.strings&&(this.nt=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in e)e[t]&&!(null===(i=this.nt)||void 0===i?void 0:i.has(t))&&this.it.add(t);return this.render(e)}const o=t.element.classList;this.it.forEach((t=>{t in e||(o.remove(t),this.it.delete(t))}));for(const t in e){const i=!!e[t];i===this.it.has(t)||(null===(s=this.nt)||void 0===s?void 0:s.has(t))||(i?(o.add(t),this.it.add(t)):(o.remove(t),this.it.delete(t)))}return
|
|
597
|
+
*/const Yt=Kt(class extends qt{constructor(t){var e;if(super(t),t.type!==Gt||"class"!==t.name||(null===(e=t.strings)||void 0===e?void 0:e.length)>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return" "+Object.keys(t).filter((e=>t[e])).join(" ")+" "}update(t,[e]){var i,s;if(void 0===this.it){this.it=new Set,void 0!==t.strings&&(this.nt=new Set(t.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in e)e[t]&&!(null===(i=this.nt)||void 0===i?void 0:i.has(t))&&this.it.add(t);return this.render(e)}const o=t.element.classList;this.it.forEach((t=>{t in e||(o.remove(t),this.it.delete(t))}));for(const t in e){const i=!!e[t];i===this.it.has(t)||(null===(s=this.nt)||void 0===s?void 0:s.has(t))||(i?(o.add(t),this.it.add(t)):(o.remove(t),this.it.delete(t)))}return U}}),Zt="important",Qt=" !"+Zt,Xt=Kt(class extends qt{constructor(t){var e;if(super(t),t.type!==Gt||"style"!==t.name||(null===(e=t.strings)||void 0===e?void 0:e.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce(((e,i)=>{const s=t[i];return null==s?e:e+`${i=i.includes("-")?i:i.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`}),"")}update(t,[e]){const{style:i}=t.element;if(void 0===this.ht){this.ht=new Set;for(const t in e)this.ht.add(t);return this.render(e)}this.ht.forEach((t=>{null==e[t]&&(this.ht.delete(t),t.includes("-")?i.removeProperty(t):i[t]="")}));for(const t in e){const s=e[t];if(null!=s){this.ht.add(t);const e="string"==typeof s&&s.endsWith(Qt);t.includes("-")||e?i.setProperty(t,e?s.slice(0,-11):s,e?Zt:""):i[t]=s}}return U}}),Jt=t=>class extends t{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var t,e,i;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(e=this.designSystemObserver)||void 0===e||e.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,e;const i=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(e=window.matchMedia)||void 0===e?void 0:e.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const e=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===e?e:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver((()=>{this.requestUpdate()})),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver((()=>{this.requestUpdate()})),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},te=()=>{var t;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(t=process.env)||void 0===t?void 0:t.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},ee=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(te())for(const t of this.requiredComponents)if(!this.isComponentAvailable(t))throw new Error(`Required component "${t}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${t}';`)}validateDependenciesWithHandler(t){if(!te())return!0;let e=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){e=!1;const s=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(i,s):console.error(s.message)}return e}isComponentAvailable(t){return!!customElements.get(t)}getMissingDependencies(){return this.requiredComponents.filter((t=>!this.isComponentAvailable(t)))}areDependenciesAvailable(){return this.requiredComponents.every((t=>this.isComponentAvailable(t)))}addRequiredComponent(t){this.requiredComponents.includes(t)||this.requiredComponents.push(t)}removeRequiredComponent(t){const e=this.requiredComponents.indexOf(t);e>-1&&this.requiredComponents.splice(e,1)}},ie=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var i;const s=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,s)}dispatchInputEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,originalEvent:e.originalEvent},e);this.dispatchCustomEvent(t,i)}dispatchFocusEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,focused:e.focused,cursorPosition:e.cursorPosition,selectedText:e.selectedText},e);this.dispatchCustomEvent(t,i)}dispatchValidationEvent(t,e){var i;const s=Object.assign({target:e.target||this,value:e.value,isValid:null!==(i=e.isValid)&&void 0!==i&&i,error:e.error},e);this.dispatchCustomEvent(t,s)}dispatchActionEvent(t,e){const i=Object.assign({target:e.target||this,action:e.action,previousValue:e.previousValue,newValue:e.newValue},e);this.dispatchCustomEvent(t,i)}isReadonlyKeyAllowed(t){if(t.ctrlKey||t.metaKey){return["KeyA","KeyC"].includes(t.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return"Enter"===t.key||" "===t.key}};
|
|
578
598
|
/**
|
|
579
599
|
* @license
|
|
580
600
|
* Copyright 2018 Google LLC
|
|
581
601
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
582
|
-
*/var se,oe,re,ne,le,ae,ce,he,de;!function(t){t.Default="default",t.Inline="inline",t.Button="button",t.Slot="slot"}(se||(se={})),function(t){t.Default="default",t.Warning="warning",t.Error="error",t.Success="success"}(oe||(oe={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(re||(re={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(ne||(ne={})),function(t){t.Horizontal="horizontal",t.Vertical="vertical"}(le||(le={})),function(t){t.Default="default",t.Solid="solid",t.Outline="outline",t.Borderless="borderless"}(ae||(ae={})),function(t){t.Bottom="bottom",t.Top="top",t.Auto="auto"}(ce||(ce={})),function(t){t.None="none",t.StartsWith="starts-with",t.Contains="contains",t.Fuzzy="fuzzy"}(he||(he={}));class ue{constructor(t){this._host=t,this._host.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}handleError(t,e){console.error(`[SelectController:${this.constructor.name}] Error in ${e}:`,t),this._host.dispatchEvent(new CustomEvent("nr-select-error",{detail:{error:t.message,context:e,controller:this.constructor.name},bubbles:!0,composed:!0}))}requestUpdate(){try{this._host.requestUpdate()}catch(t){this.handleError(t,"requestUpdate")}}dispatchEvent(t){try{return this._host.dispatchEvent(t)}catch(t){return this.handleError(t,"dispatchEvent"),!1}}}class pe extends ue{constructor(){super(...arguments),this._selectedOptions=[],this._initialized=!1}getSelectedOptions(){return[...this._selectedOptions]}getSelectedOption(){return this._selectedOptions[0]}selectOption(t){try{if(this.isOptionDisabled(t))return;const e=this.host.multiple,i=this.getCurrentValue();e?this.isOptionSelected(t)||(this._selectedOptions=[...this._selectedOptions,t],this.updateHostValue(),this.dispatchChangeEvent(i)):(this.isOptionSelected(t)?this._selectedOptions=[]:this._selectedOptions=[t],this.updateHostValue(),this.dispatchChangeEvent(i)),this.requestUpdate()}catch(t){this.handleError(t,"selectOption")}}unselectOption(t){try{if(this.isOptionSelected(t)){const e=this.getCurrentValue();this._selectedOptions=this._selectedOptions.filter((e=>e.value!==t.value)),this.updateHostValue(),this.dispatchChangeEvent(e),this.requestUpdate()}}catch(t){this.handleError(t,"unselectOption")}}clearSelection(){try{if(this._selectedOptions.length>0){const t=this.getCurrentValue();this._selectedOptions=[],this.updateHostValue(),this.dispatchChangeEvent(t),this.requestUpdate()}}catch(t){this.handleError(t,"clearSelection")}}isOptionSelected(t){return this._selectedOptions.some((e=>e.value===t.value))}isOptionDisabled(t){return Boolean(t.disabled)||this.host.disabled}toggleOption(t){this.isOptionSelected(t)?this.unselectOption(t):this.selectOption(t)}initializeFromDefaultValue(){try{if(this._initialized)return;const t=this.host.defaultValue;if(!t||0===t.length)return;const e=Array.isArray(t)?t:[t],i=this.host.options.filter((t=>e.includes(t.value)));i.length>0&&(this._selectedOptions=this.host.multiple?i:[i[0]],this.requestUpdate()),this._initialized=!0}catch(t){this.handleError(t,"initializeFromDefaultValue")}}updateHostValue(){var t;const e=this.host.multiple?this._selectedOptions.map((t=>t.value)):(null===(t=this._selectedOptions[0])||void 0===t?void 0:t.value)||"",i=this.host.value;let s=!1;if(this.host.multiple){const t=Array.isArray(i)?i:[],o=Array.isArray(e)?e:[];s=t.length===o.length&&t.every(((t,e)=>t===o[e]))}else s=i===e;s||(this.host.value=e)}getCurrentValue(){var t;return this.host.multiple?this._selectedOptions.map((t=>t.value)):(null===(t=this._selectedOptions[0])||void 0===t?void 0:t.value)||""}dispatchChangeEvent(t){const e={value:this.getCurrentValue(),selectedOptions:this.getSelectedOptions(),previousValue:t};this.dispatchEvent(new CustomEvent("nr-change",{detail:e,bubbles:!0,composed:!0}))}hostUpdated(){this.syncWithHostOptions()}syncWithHostOptions(){try{this._selectedOptions=this._selectedOptions.filter((t=>this.host.options.some((e=>e.value===t.value)))),this._selectedOptions=this._selectedOptions.map((t=>this.host.options.find((e=>e.value===t.value))||t)),this.updateHostValue()}catch(t){this.handleError(t,"syncWithHostOptions")}}}class ve extends ue{constructor(t,e,i){super(t),this.selectionController=e,this.dropdownController=i,this._focusedIndex=-1,this._hasKeyboardNavigated=!1}handleKeyDown(t){try{const e=this.isSearchInputFocused();switch(t.key){case"ArrowDown":t.preventDefault(),this.dropdownController.isOpen?this.navigateNext():this.openDropdown();break;case"ArrowUp":t.preventDefault(),this.dropdownController.isOpen?this.navigatePrevious():this.openDropdown();break;case"Enter":this.dropdownController.isOpen?e&&this._focusedIndex>=0?(t.preventDefault(),this.selectFocused()):e||(t.preventDefault(),this.selectFocused()):(t.preventDefault(),this.openDropdown());break;case" ":e||(t.preventDefault(),this.dropdownController.isOpen?this.selectFocused():this.openDropdown());break;case"Escape":t.preventDefault(),this.closeDropdown();break;case"Tab":this.closeDropdown();break;case"Home":this.dropdownController.isOpen&&(t.preventDefault(),this.setFocusedIndex(0));break;case"End":this.dropdownController.isOpen&&(t.preventDefault(),this.setFocusedIndex(this.host.options.length-1));break;default:1===t.key.length&&/[a-zA-Z0-9]/.test(t.key)&&this.handleAlphanumericKey(t.key.toLowerCase())}}catch(t){this.handleError(t,"handleKeyDown")}}navigateNext(){try{const t=this.getNavigableOptions();if(0===t.length)return;if(this.isSearchInputFocused()&&(this._focusedIndex<0||!this._hasKeyboardNavigated))return this._hasKeyboardNavigated=!0,void this.setFocusedIndex(0);let e=this._focusedIndex+1;e>=t.length&&(e=0),this.setFocusedIndex(e)}catch(t){this.handleError(t,"navigateNext")}}navigatePrevious(){try{const t=this.getNavigableOptions();if(0===t.length)return;if(this.isSearchInputFocused()&&(this._focusedIndex<0||!this._hasKeyboardNavigated))return this._hasKeyboardNavigated=!0,void this.setFocusedIndex(t.length-1);let e=this._focusedIndex-1;e<0&&(e=t.length-1),this.setFocusedIndex(e)}catch(t){this.handleError(t,"navigatePrevious")}}selectFocused(){try{const t=this.getNavigableOptions()[this._focusedIndex];t&&!this.selectionController.isOptionDisabled(t)&&(this.selectionController.selectOption(t),this.host.multiple||this.closeDropdown())}catch(t){this.handleError(t,"selectFocused")}}openDropdown(){try{this.dropdownController.open(),this._hasKeyboardNavigated=!1,this._focusedIndex=-1}catch(t){this.handleError(t,"openDropdown")}}closeDropdown(){try{this.dropdownController.close(),this._focusedIndex=-1,this._hasKeyboardNavigated=!1}catch(t){this.handleError(t,"closeDropdown")}}setFocusedIndex(t){try{const e=this.getNavigableOptions();t>=0&&t<e.length&&(this._focusedIndex=t,this.dispatchFocusEvent(e[t],t),this.requestUpdate(),this.scrollToFocusedOption(t))}catch(t){this.handleError(t,"setFocusedIndex")}}scrollToFocusedOption(t){var e;try{const i=null===(e=this.host.shadowRoot)||void 0===e?void 0:e.querySelector(".options");if(!i)return;setTimeout((()=>{const e=i.querySelector(".option.focused");if(e)e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"});else{const e=40,s=i.clientHeight,o=i.scrollTop,r=t*e,n=r+e,l=o+s;r<o?i.scrollTo({top:r,behavior:"smooth"}):n>l&&i.scrollTo({top:n-s,behavior:"smooth"})}}),10)}catch(t){console.warn("Failed to scroll to focused option:",t)}}get focusedIndex(){return this._focusedIndex}get focusedOption(){return this.getNavigableOptions()[this._focusedIndex]}handleAlphanumericKey(t){try{const e=this.getNavigableOptions(),i=this._focusedIndex+1;for(let s=0;s<e.length;s++){const o=(i+s)%e.length;if(e[o].label.toLowerCase().startsWith(t)){this.setFocusedIndex(o),this.dropdownController.isOpen||this.openDropdown();break}}}catch(t){this.handleError(t,"handleAlphanumericKey")}}getNavigableOptions(){const t=this.host;if(!t.options||!Array.isArray(t.options))return[];let e=t.options;return t.searchable&&t.searchQuery&&"function"==typeof t.getFilteredOptions&&(e=t.getFilteredOptions()),e.filter((t=>!t.disabled))}dispatchFocusEvent(t,e){const i={focusedOption:t,focusedIndex:e};this.dispatchEvent(new CustomEvent("nr-select-focus",{detail:i,bubbles:!0,composed:!0}))}isSearchInputFocused(){var t;try{const e=this.host;if(!e.searchable)return!1;const i=null===(t=e.shadowRoot)||void 0===t?void 0:t.querySelector(".search-input");return!!i&&(document.activeElement===i||i.shadowRoot&&i.shadowRoot.querySelector("input")===i.shadowRoot.activeElement||i.contains(document.activeElement))}catch(t){return!1}}hostUpdated(){this.dropdownController.isOpen||-1===this._focusedIndex||(this._focusedIndex=-1)}}class ye extends ue{constructor(){super(...arguments),this._isOpen=!1,this._position={top:0,left:0,width:0,placement:"bottom"},this._dropdownElement=null,this._triggerElement=null,this.handleResize=()=>{this._isOpen&&this.calculatePosition()},this.handleScroll=()=>{var t;if(this._isOpen&&this._triggerElement){const e=this._triggerElement.getBoundingClientRect(),i=(null===(t=window.visualViewport)||void 0===t?void 0:t.height)||window.innerHeight;(e.bottom<0||e.top>i)&&this.close()}}}get isOpen(){return this._isOpen}get position(){return Object.assign({},this._position)}open(){try{this._isOpen||(this._isOpen=!0,this.host.show=!0,this.requestUpdate(),this.findElements(),setTimeout((()=>{this.calculatePosition()}),10),this.host&&"function"==typeof this.host.setupEventListeners&&setTimeout((()=>{this.host.setupEventListeners()}),50),this.focusSearchInput(),this.dispatchEvent(new CustomEvent("nr-dropdown-open",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"open")}}close(){try{this._isOpen&&(this._isOpen=!1,this.host.show=!1,this.resetPosition(),this.requestUpdate(),this.host&&"function"==typeof this.host.removeEventListeners&&this.host.removeEventListeners(),this.dispatchEvent(new CustomEvent("nr-dropdown-close",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"close")}}toggle(){this._isOpen?this.close():this.open()}focusSearchInput(){try{const t=this.host;t&&t.searchable&&setTimeout((()=>{var e;const i=null===(e=t.shadowRoot)||void 0===e?void 0:e.querySelector(".search-input");i&&"function"==typeof i.focus&&i.focus()}),100)}catch(t){console.warn("Failed to focus search input:",t)}}calculatePosition(){var t;try{if(this._dropdownElement&&this._triggerElement||this.findElements(),!this._dropdownElement||!this._triggerElement)return;const e=this._triggerElement.getBoundingClientRect(),i=((null===(t=window.visualViewport)||void 0===t?void 0:t.height)||window.innerHeight)-e.bottom,s=e.top,o=200,r=this.determineOptimalPlacement(o,s,i);this._position={left:0,width:0,placement:r,top:0},this.applyPosition()}catch(t){this.handleError(t,"calculatePosition")}}resetPosition(){try{if(this._dropdownElement){this._dropdownElement.style.removeProperty("position"),this._dropdownElement.style.removeProperty("top"),this._dropdownElement.style.removeProperty("left"),this._dropdownElement.style.removeProperty("width");this.host.maxHeight||this._dropdownElement.style.removeProperty("max-height"),this._dropdownElement.style.removeProperty("min-height"),this._dropdownElement.style.removeProperty("height"),this._dropdownElement.style.removeProperty("overflow-y"),this._dropdownElement.style.removeProperty("transform"),this._dropdownElement.style.removeProperty("display"),this._dropdownElement.style.removeProperty("opacity"),this._dropdownElement.style.removeProperty("visibility"),this._dropdownElement.style.removeProperty("z-index"),this._dropdownElement.classList.remove("placement-top","placement-bottom")}}catch(t){this.handleError(t,"resetPosition")}}setElements(t,e){this._dropdownElement=t,this._triggerElement=e}findElements(){try{const t=this._host;if(t.optionsElement&&t.wrapper)return this._dropdownElement=t.optionsElement,void(this._triggerElement=t.wrapper);t.shadowRoot&&(this._dropdownElement=t.shadowRoot.querySelector(".options"),this._triggerElement=t.shadowRoot.querySelector(".wrapper"))}catch(t){this.handleError(t,"findElements")}}determineOptimalPlacement(t,e,i){return i>=t?"bottom":e>=t||e>i?"top":"bottom"}applyPosition(){var t;try{if(!this._dropdownElement||!this._triggerElement)return;const e=this.host.maxHeight,{placement:i}=this._position,s=this._triggerElement.getBoundingClientRect(),o=s.width;this._dropdownElement.style.position="absolute",this._dropdownElement.style.left="0",this._dropdownElement.style.right="auto",this._dropdownElement.style.width=`${o}px`,this._dropdownElement.style.zIndex="1000",this._dropdownElement.style.height="auto",e||(this._dropdownElement.style.maxHeight="none"),this._dropdownElement.style.minHeight="auto","bottom"===i?(this._dropdownElement.style.top="100%",this._dropdownElement.style.bottom="auto"):(this._dropdownElement.style.top="auto",this._dropdownElement.style.bottom="100%");const r=this._dropdownElement.scrollHeight,n=(null===(t=window.visualViewport)||void 0===t?void 0:t.height)||window.innerHeight;let l;l="bottom"===i?n-s.bottom-10:s.top-10,e?(this._dropdownElement.style.maxHeight=e,this._dropdownElement.style.overflowY="auto"):r>l?(this._dropdownElement.style.maxHeight=`${l}px`,this._dropdownElement.style.overflowY="auto"):(this._dropdownElement.style.maxHeight=`${r}px`,this._dropdownElement.style.overflowY="auto"),this._dropdownElement.classList.remove("placement-top","placement-bottom"),this._dropdownElement.classList.add(`placement-${i}`)}catch(t){this.handleError(t,"applyPosition")}}getAvailableSpace(){var t,e;if(!this._triggerElement)return{above:0,below:0,left:0,right:0};const i=this._triggerElement.getBoundingClientRect(),s=(null===(t=window.visualViewport)||void 0===t?void 0:t.height)||window.innerHeight,o=(null===(e=window.visualViewport)||void 0===e?void 0:e.width)||window.innerWidth;return{above:i.top,below:s-i.bottom,left:i.left,right:o-i.right}}hostConnected(){window.addEventListener("resize",this.handleResize),window.addEventListener("scroll",this.handleScroll,!0)}hostDisconnected(){window.removeEventListener("resize",this.handleResize),window.removeEventListener("scroll",this.handleScroll,!0)}}class fe extends ue{constructor(){super(...arguments),this._focusedIndex=-1,this._hasFocus=!1}get focusedIndex(){return this._focusedIndex}getFocusedOption(){if(this._focusedIndex>=0&&this._focusedIndex<this.host.options.length)return this.host.options[this._focusedIndex]}get hasFocus(){return this._hasFocus}setFocusedOption(t){try{t>=0&&t<this.host.options.length&&(this._focusedIndex=t,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-focus-change",{detail:{focusedIndex:t,focusedOption:this.getFocusedOption()},bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"setFocusedOption")}}focus(){var t;try{const e=null===(t=this._host.shadowRoot)||void 0===t?void 0:t.querySelector(".wrapper");e&&(e.focus(),this._hasFocus=!0,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-focus",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"focus")}}blur(){var t;try{const e=null===(t=this._host.shadowRoot)||void 0===t?void 0:t.querySelector(".wrapper");e&&e.blur(),this._hasFocus=!1,this._focusedIndex=-1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-blur",{bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"blur")}}focusNext(){try{const t=this.getNextFocusableIndex(this._focusedIndex);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusNext")}}focusPrevious(){try{const t=this.getPreviousFocusableIndex(this._focusedIndex);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusPrevious")}}focusFirst(){try{const t=this.getNextFocusableIndex(-1);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusFirst")}}focusLast(){try{const t=this.getPreviousFocusableIndex(this.host.options.length);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusLast")}}clearFocus(){this._focusedIndex=-1,this._hasFocus=!1,this.requestUpdate()}handleFocus(){this._hasFocus=!0,this.requestUpdate()}handleBlur(){this._hasFocus=!1,this._focusedIndex=-1,this.requestUpdate()}getNextFocusableIndex(t){const e=this.host.options;for(let i=t+1;i<e.length;i++)if(!e[i].disabled)return i;for(let i=0;i<=t;i++)if(!e[i].disabled)return i;return-1}getPreviousFocusableIndex(t){const e=this.host.options;for(let i=t-1;i>=0;i--)if(!e[i].disabled)return i;for(let i=e.length-1;i>=t;i--)if(!e[i].disabled)return i;return-1}findOptionIndex(t){return this.host.options.findIndex((e=>e.value===t))}focusOptionByValue(t){const e=this.findOptionIndex(t);-1!==e&&this.setFocusedOption(e)}}!function(t){t.Valid="valid",t.Invalid="invalid",t.Pending="pending",t.Pristine="pristine"}(de||(de={}));class ge extends ue{constructor(t,e){super(t),this.selectionController=e,this._isValid=!0,this._validationMessage="",this._validationState=de.Pristine}get isValid(){return this._isValid}get validationMessage(){return this._validationMessage}get validationState(){return this._validationState}validate(){try{this._validationState=de.Pending;const t=this.selectionController.getSelectedOptions().length>0;return this.host.required&&!t?(this.setValidationResult(!1,"This field is required",de.Invalid),!1):(this.setValidationResult(!0,"",de.Valid),!0)}catch(t){return this.handleError(t,"validate"),this.setValidationResult(!1,"Validation error occurred",de.Invalid),!1}}reset(){try{this._isValid=!0,this._validationMessage="",this._validationState=de.Pristine,this.requestUpdate(),this.dispatchValidationEvent()}catch(t){this.handleError(t,"reset")}}getFormData(){var t;try{const e=this._host,i=e.name||e.getAttribute("name")||"select",s=this.selectionController.getSelectedOptions();return this.host.multiple?{[i]:s.map((t=>t.value))}:{[i]:(null===(t=s[0])||void 0===t?void 0:t.value)||""}}catch(t){return this.handleError(t,"getFormData"),{}}}checkValidity(){return this.validate()}reportValidity(){var t;const e=this.validate();if(!e){const e=null===(t=this._host.shadowRoot)||void 0===t?void 0:t.querySelector(".wrapper");e&&e.focus()}return e}setCustomValidity(t){try{t?this.setValidationResult(!1,t,de.Invalid):this.validate()}catch(t){this.handleError(t,"setCustomValidity")}}validateOnChange(){this._validationState!==de.Pristine&&this.validate()}validateOnBlur(){this._validationState===de.Pristine&&(this._validationState=de.Pending),this.validate()}setValidationResult(t,e,i){const s=this._isValid!==t||this._validationMessage!==e||this._validationState!==i;this._isValid=t,this._validationMessage=e,this._validationState=i,s&&(this.requestUpdate(),this.dispatchValidationEvent())}dispatchValidationEvent(){const t={isValid:this._isValid,validationMessage:this._validationMessage,validationState:this._validationState};this.dispatchEvent(new CustomEvent("nr-validation",{detail:t,bubbles:!0,composed:!0}))}hostUpdated(){this.validateOnChange()}getValidationClasses(){return{valid:this._isValid&&this._validationState===de.Valid,invalid:!this._isValid&&this._validationState===de.Invalid,pending:this._validationState===de.Pending,pristine:this._validationState===de.Pristine}}getAriaAttributes(){const t={};return this.host.required&&(t["aria-required"]="true"),this._isValid||(t["aria-invalid"]="true",this._validationMessage&&(t["aria-describedby"]="validation-message")),t}}class me extends ue{constructor(){super(...arguments),this._searchQuery="",this.handleSearchInput=t=>{this.setSearchQuery(t.detail.value||"")},this.handleSearchClear=()=>{this.clearSearch()},this.handleSearchKeyDown=t=>{if(["ArrowDown","ArrowUp","Enter","Home","End"].includes(t.key)){const e=this.host.keyboardController;e&&e.handleKeyDown(t)}else t.stopPropagation(),"Escape"===t.key&&(this.host.closeDropdown(),this.host.focus())}}get searchQuery(){return this._searchQuery}get hasSearch(){return""!==this._searchQuery.trim()}setSearchQuery(t){this._searchQuery=t,this.host.searchQuery=t,this.host.requestUpdate()}search(t){this.setSearchQuery(t)}clearSearch(){this.setSearchQuery("")}getFilteredOptions(t){if(!this.host.searchable||!this._searchQuery.trim())return t;const e=this._searchQuery.toLowerCase().trim();return t.filter((t=>t.label.toLowerCase().includes(e)||t.value.toLowerCase().includes(e)||t.description&&t.description.toLowerCase().includes(e)))}renderSearchInput(){return this.host.searchable?mt`
|
|
602
|
+
*/var se,oe,re,ne,le,ae,ce,he,de;!function(t){t.Default="default",t.Inline="inline",t.Button="button",t.Slot="slot"}(se||(se={})),function(t){t.Default="default",t.Warning="warning",t.Error="error",t.Success="success"}(oe||(oe={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(re||(re={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(ne||(ne={})),function(t){t.Horizontal="horizontal",t.Vertical="vertical"}(le||(le={})),function(t){t.Default="default",t.Solid="solid",t.Outline="outline",t.Borderless="borderless"}(ae||(ae={})),function(t){t.Bottom="bottom",t.Top="top",t.Auto="auto"}(ce||(ce={})),function(t){t.None="none",t.StartsWith="starts-with",t.Contains="contains",t.Fuzzy="fuzzy"}(he||(he={}));class ue{constructor(t){this._host=t,this._host.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}handleError(t,e){console.error(`[SelectController:${this.constructor.name}] Error in ${e}:`,t),this._host.dispatchEvent(new CustomEvent("nr-select-error",{detail:{error:t.message,context:e,controller:this.constructor.name},bubbles:!0,composed:!0}))}requestUpdate(){try{this._host.requestUpdate()}catch(t){this.handleError(t,"requestUpdate")}}dispatchEvent(t){try{return this._host.dispatchEvent(t)}catch(t){return this.handleError(t,"dispatchEvent"),!1}}}class pe extends ue{constructor(){super(...arguments),this._selectedOptions=[],this._initialized=!1}getSelectedOptions(){return[...this._selectedOptions]}getSelectedOption(){return this._selectedOptions[0]}selectOption(t){try{if(this.isOptionDisabled(t))return;const e=this.host.multiple,i=this.getCurrentValue();e?this.isOptionSelected(t)||(this._selectedOptions=[...this._selectedOptions,t],this.updateHostValue(),this.dispatchChangeEvent(i)):(this.isOptionSelected(t)?this._selectedOptions=[]:this._selectedOptions=[t],this.updateHostValue(),this.dispatchChangeEvent(i)),this.requestUpdate()}catch(t){this.handleError(t,"selectOption")}}unselectOption(t){try{if(this.isOptionSelected(t)){const e=this.getCurrentValue();this._selectedOptions=this._selectedOptions.filter((e=>e.value!==t.value)),this.updateHostValue(),this.dispatchChangeEvent(e),this.requestUpdate()}}catch(t){this.handleError(t,"unselectOption")}}clearSelection(){try{if(this._selectedOptions.length>0){const t=this.getCurrentValue();this._selectedOptions=[],this.updateHostValue(),this.dispatchChangeEvent(t),this.requestUpdate()}}catch(t){this.handleError(t,"clearSelection")}}isOptionSelected(t){return this._selectedOptions.some((e=>e.value===t.value))}isOptionDisabled(t){return Boolean(t.disabled)||this.host.disabled}toggleOption(t){this.isOptionSelected(t)?this.unselectOption(t):this.selectOption(t)}initializeFromValue(){try{if(this._initialized)return;const t=this.host.value;if(!t||Array.isArray(t)&&0===t.length)return;const e=Array.isArray(t)?t:[t],i=this.host.options.filter((t=>e.includes(t.value)));i.length>0&&(this._selectedOptions=this.host.multiple?i:[i[0]],this.requestUpdate()),this._initialized=!0}catch(t){this.handleError(t,"initializeFromValue")}}updateHostValue(){var t;const e=this.host.multiple?this._selectedOptions.map((t=>t.value)):(null===(t=this._selectedOptions[0])||void 0===t?void 0:t.value)||"",i=this.host.value;let s=!1;if(this.host.multiple){const t=Array.isArray(i)?i:[],o=Array.isArray(e)?e:[];s=t.length===o.length&&t.every(((t,e)=>t===o[e]))}else s=i===e;s||(this.host.value=e)}getCurrentValue(){var t;return this.host.multiple?this._selectedOptions.map((t=>t.value)):(null===(t=this._selectedOptions[0])||void 0===t?void 0:t.value)||""}dispatchChangeEvent(t){const e={value:this.getCurrentValue(),selectedOptions:this.getSelectedOptions(),previousValue:t};this.dispatchEvent(new CustomEvent("nr-change",{detail:e,bubbles:!0,composed:!0}))}hostUpdated(){this.syncWithHostOptions()}syncWithHostOptions(){try{this._selectedOptions=this._selectedOptions.filter((t=>this.host.options.some((e=>e.value===t.value)))),this._selectedOptions=this._selectedOptions.map((t=>this.host.options.find((e=>e.value===t.value))||t)),this.updateHostValue()}catch(t){this.handleError(t,"syncWithHostOptions")}}}class ve extends ue{constructor(t,e,i){super(t),this.selectionController=e,this.dropdownController=i,this._focusedIndex=-1,this._hasKeyboardNavigated=!1}handleKeyDown(t){try{const e=this.isSearchInputFocused();switch(t.key){case"ArrowDown":t.preventDefault(),this.dropdownController.isOpen?this.navigateNext():this.openDropdown();break;case"ArrowUp":t.preventDefault(),this.dropdownController.isOpen?this.navigatePrevious():this.openDropdown();break;case"Enter":this.dropdownController.isOpen?e&&this._focusedIndex>=0?(t.preventDefault(),this.selectFocused()):e||(t.preventDefault(),this.selectFocused()):(t.preventDefault(),this.openDropdown());break;case" ":e||(t.preventDefault(),this.dropdownController.isOpen?this.selectFocused():this.openDropdown());break;case"Escape":t.preventDefault(),this.closeDropdown();break;case"Tab":this.closeDropdown();break;case"Home":this.dropdownController.isOpen&&(t.preventDefault(),this.setFocusedIndex(0));break;case"End":this.dropdownController.isOpen&&(t.preventDefault(),this.setFocusedIndex(this.host.options.length-1));break;default:1===t.key.length&&/[a-zA-Z0-9]/.test(t.key)&&this.handleAlphanumericKey(t.key.toLowerCase())}}catch(t){this.handleError(t,"handleKeyDown")}}navigateNext(){try{const t=this.getNavigableOptions();if(0===t.length)return;if(this.isSearchInputFocused()&&(this._focusedIndex<0||!this._hasKeyboardNavigated))return this._hasKeyboardNavigated=!0,void this.setFocusedIndex(0);let e=this._focusedIndex+1;e>=t.length&&(e=0),this.setFocusedIndex(e)}catch(t){this.handleError(t,"navigateNext")}}navigatePrevious(){try{const t=this.getNavigableOptions();if(0===t.length)return;if(this.isSearchInputFocused()&&(this._focusedIndex<0||!this._hasKeyboardNavigated))return this._hasKeyboardNavigated=!0,void this.setFocusedIndex(t.length-1);let e=this._focusedIndex-1;e<0&&(e=t.length-1),this.setFocusedIndex(e)}catch(t){this.handleError(t,"navigatePrevious")}}selectFocused(){try{const t=this.getNavigableOptions()[this._focusedIndex];t&&!this.selectionController.isOptionDisabled(t)&&(this.selectionController.selectOption(t),this.host.multiple||this.closeDropdown())}catch(t){this.handleError(t,"selectFocused")}}openDropdown(){try{this.dropdownController.open(),this._hasKeyboardNavigated=!1,this._focusedIndex=-1}catch(t){this.handleError(t,"openDropdown")}}closeDropdown(){try{this.dropdownController.close(),this._focusedIndex=-1,this._hasKeyboardNavigated=!1}catch(t){this.handleError(t,"closeDropdown")}}setFocusedIndex(t){try{const e=this.getNavigableOptions();t>=0&&t<e.length&&(this._focusedIndex=t,this.dispatchFocusEvent(e[t],t),this.requestUpdate(),this.scrollToFocusedOption(t))}catch(t){this.handleError(t,"setFocusedIndex")}}scrollToFocusedOption(t){var e;try{const i=null===(e=this.host.shadowRoot)||void 0===e?void 0:e.querySelector(".options");if(!i)return;setTimeout((()=>{const e=i.querySelector(".option.focused");if(e)e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"});else{const e=40,s=i.clientHeight,o=i.scrollTop,r=t*e,n=r+e,l=o+s;r<o?i.scrollTo({top:r,behavior:"smooth"}):n>l&&i.scrollTo({top:n-s,behavior:"smooth"})}}),10)}catch(t){console.warn("Failed to scroll to focused option:",t)}}get focusedIndex(){return this._focusedIndex}get focusedOption(){return this.getNavigableOptions()[this._focusedIndex]}handleAlphanumericKey(t){try{const e=this.getNavigableOptions(),i=this._focusedIndex+1;for(let s=0;s<e.length;s++){const o=(i+s)%e.length;if(e[o].label.toLowerCase().startsWith(t)){this.setFocusedIndex(o),this.dropdownController.isOpen||this.openDropdown();break}}}catch(t){this.handleError(t,"handleAlphanumericKey")}}getNavigableOptions(){const t=this.host;if(!t.options||!Array.isArray(t.options))return[];let e=t.options;return t.searchable&&t.searchQuery&&"function"==typeof t.getFilteredOptions&&(e=t.getFilteredOptions()),e.filter((t=>!t.disabled))}dispatchFocusEvent(t,e){const i={focusedOption:t,focusedIndex:e};this.dispatchEvent(new CustomEvent("nr-select-focus",{detail:i,bubbles:!0,composed:!0}))}isSearchInputFocused(){var t;try{const e=this.host;if(!e.searchable)return!1;const i=null===(t=e.shadowRoot)||void 0===t?void 0:t.querySelector(".search-input");return!!i&&(document.activeElement===i||i.shadowRoot&&i.shadowRoot.querySelector("input")===i.shadowRoot.activeElement||i.contains(document.activeElement))}catch(t){return!1}}hostUpdated(){this.dropdownController.isOpen||-1===this._focusedIndex||(this._focusedIndex=-1)}}class ye extends ue{constructor(){super(...arguments),this._isOpen=!1,this._position={top:0,left:0,width:0,placement:"bottom"},this._dropdownElement=null,this._triggerElement=null,this.handleResize=()=>{this._isOpen&&this.calculatePosition()},this.handleScroll=()=>{var t;if(this._isOpen&&this._triggerElement){const e=this._triggerElement.getBoundingClientRect(),i=(null===(t=window.visualViewport)||void 0===t?void 0:t.height)||window.innerHeight;(e.bottom<0||e.top>i)&&this.close()}}}get isOpen(){return this._isOpen}get position(){return Object.assign({},this._position)}open(){try{this._isOpen||(this._isOpen=!0,this.host.show=!0,this.requestUpdate(),this.findElements(),setTimeout((()=>{this.calculatePosition()}),10),this.host&&"function"==typeof this.host.setupEventListeners&&setTimeout((()=>{this.host.setupEventListeners()}),50),this.focusSearchInput(),this.dispatchEvent(new CustomEvent("nr-dropdown-open",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"open")}}close(){try{this._isOpen&&(this._isOpen=!1,this.host.show=!1,this.resetPosition(),this.requestUpdate(),this.host&&"function"==typeof this.host.removeEventListeners&&this.host.removeEventListeners(),this.dispatchEvent(new CustomEvent("nr-dropdown-close",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"close")}}toggle(){this._isOpen?this.close():this.open()}focusSearchInput(){try{const t=this.host;t&&t.searchable&&setTimeout((()=>{var e;const i=null===(e=t.shadowRoot)||void 0===e?void 0:e.querySelector(".search-input");i&&"function"==typeof i.focus&&i.focus()}),100)}catch(t){console.warn("Failed to focus search input:",t)}}calculatePosition(){var t;try{if(this._dropdownElement&&this._triggerElement||this.findElements(),!this._dropdownElement||!this._triggerElement)return;const e=this._triggerElement.getBoundingClientRect(),i=((null===(t=window.visualViewport)||void 0===t?void 0:t.height)||window.innerHeight)-e.bottom,s=e.top,o=200,r=this.determineOptimalPlacement(o,s,i);this._position={left:0,width:0,placement:r,top:0},this.applyPosition()}catch(t){this.handleError(t,"calculatePosition")}}resetPosition(){try{if(this._dropdownElement){this._dropdownElement.style.removeProperty("position"),this._dropdownElement.style.removeProperty("top"),this._dropdownElement.style.removeProperty("left"),this._dropdownElement.style.removeProperty("width"),this._dropdownElement.style.removeProperty("min-width");this.host.maxHeight||this._dropdownElement.style.removeProperty("max-height"),this._dropdownElement.style.removeProperty("min-height"),this._dropdownElement.style.removeProperty("height"),this._dropdownElement.style.removeProperty("overflow-y"),this._dropdownElement.style.removeProperty("transform"),this._dropdownElement.style.removeProperty("display"),this._dropdownElement.style.removeProperty("opacity"),this._dropdownElement.style.removeProperty("visibility"),this._dropdownElement.style.removeProperty("z-index"),this._dropdownElement.classList.remove("placement-top","placement-bottom")}}catch(t){this.handleError(t,"resetPosition")}}setElements(t,e){this._dropdownElement=t,this._triggerElement=e}findElements(){try{const t=this._host;if(t.optionsElement&&t.wrapper)return this._dropdownElement=t.optionsElement,void(this._triggerElement=t.wrapper);t.shadowRoot&&(this._dropdownElement=t.shadowRoot.querySelector(".options"),this._triggerElement=t.shadowRoot.querySelector(".wrapper"))}catch(t){this.handleError(t,"findElements")}}determineOptimalPlacement(t,e,i){return i>=t?"bottom":e>=t||e>i?"top":"bottom"}applyPosition(){var t;try{if(!this._dropdownElement||!this._triggerElement)return;const e=this.host.maxHeight,{placement:i}=this._position,s=this._triggerElement.getBoundingClientRect(),o=s.width;this._dropdownElement.style.position="absolute",this._dropdownElement.style.left="0",this._dropdownElement.style.right="auto",this._dropdownElement.style.minWidth=`${o}px`,this._dropdownElement.style.removeProperty("width"),this._dropdownElement.style.zIndex="1000",this._dropdownElement.style.height="auto",e||(this._dropdownElement.style.maxHeight="none"),this._dropdownElement.style.minHeight="auto","bottom"===i?(this._dropdownElement.style.top="100%",this._dropdownElement.style.bottom="auto"):(this._dropdownElement.style.top="auto",this._dropdownElement.style.bottom="100%");const r=this._dropdownElement.scrollHeight,n=(null===(t=window.visualViewport)||void 0===t?void 0:t.height)||window.innerHeight;let l;l="bottom"===i?n-s.bottom-10:s.top-10,e?(this._dropdownElement.style.maxHeight=e,this._dropdownElement.style.overflowY="auto"):r>l?(this._dropdownElement.style.maxHeight=`${l}px`,this._dropdownElement.style.overflowY="auto"):(this._dropdownElement.style.maxHeight=`${r}px`,this._dropdownElement.style.overflowY="auto"),this._dropdownElement.classList.remove("placement-top","placement-bottom"),this._dropdownElement.classList.add(`placement-${i}`)}catch(t){this.handleError(t,"applyPosition")}}getAvailableSpace(){var t,e;if(!this._triggerElement)return{above:0,below:0,left:0,right:0};const i=this._triggerElement.getBoundingClientRect(),s=(null===(t=window.visualViewport)||void 0===t?void 0:t.height)||window.innerHeight,o=(null===(e=window.visualViewport)||void 0===e?void 0:e.width)||window.innerWidth;return{above:i.top,below:s-i.bottom,left:i.left,right:o-i.right}}hostConnected(){window.addEventListener("resize",this.handleResize),window.addEventListener("scroll",this.handleScroll,!0)}hostDisconnected(){window.removeEventListener("resize",this.handleResize),window.removeEventListener("scroll",this.handleScroll,!0)}}class fe extends ue{constructor(){super(...arguments),this._focusedIndex=-1,this._hasFocus=!1}get focusedIndex(){return this._focusedIndex}getFocusedOption(){if(this._focusedIndex>=0&&this._focusedIndex<this.host.options.length)return this.host.options[this._focusedIndex]}get hasFocus(){return this._hasFocus}setFocusedOption(t){try{t>=0&&t<this.host.options.length&&(this._focusedIndex=t,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-focus-change",{detail:{focusedIndex:t,focusedOption:this.getFocusedOption()},bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"setFocusedOption")}}focus(){var t;try{const e=null===(t=this._host.shadowRoot)||void 0===t?void 0:t.querySelector(".wrapper");e&&(e.focus(),this._hasFocus=!0,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-focus",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"focus")}}blur(){var t;try{const e=null===(t=this._host.shadowRoot)||void 0===t?void 0:t.querySelector(".wrapper");e&&e.blur(),this._hasFocus=!1,this._focusedIndex=-1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-blur",{bubbles:!0,composed:!0}))}catch(t){this.handleError(t,"blur")}}focusNext(){try{const t=this.getNextFocusableIndex(this._focusedIndex);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusNext")}}focusPrevious(){try{const t=this.getPreviousFocusableIndex(this._focusedIndex);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusPrevious")}}focusFirst(){try{const t=this.getNextFocusableIndex(-1);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusFirst")}}focusLast(){try{const t=this.getPreviousFocusableIndex(this.host.options.length);-1!==t&&this.setFocusedOption(t)}catch(t){this.handleError(t,"focusLast")}}clearFocus(){this._focusedIndex=-1,this._hasFocus=!1,this.requestUpdate()}handleFocus(){this._hasFocus=!0,this.requestUpdate()}handleBlur(){this._hasFocus=!1,this._focusedIndex=-1,this.requestUpdate()}getNextFocusableIndex(t){const e=this.host.options;for(let i=t+1;i<e.length;i++)if(!e[i].disabled)return i;for(let i=0;i<=t;i++)if(!e[i].disabled)return i;return-1}getPreviousFocusableIndex(t){const e=this.host.options;for(let i=t-1;i>=0;i--)if(!e[i].disabled)return i;for(let i=e.length-1;i>=t;i--)if(!e[i].disabled)return i;return-1}findOptionIndex(t){return this.host.options.findIndex((e=>e.value===t))}focusOptionByValue(t){const e=this.findOptionIndex(t);-1!==e&&this.setFocusedOption(e)}}!function(t){t.Valid="valid",t.Invalid="invalid",t.Pending="pending",t.Pristine="pristine"}(de||(de={}));class ge extends ue{constructor(t,e){super(t),this.selectionController=e,this._isValid=!0,this._validationMessage="",this._validationState=de.Pristine}get isValid(){return this._isValid}get validationMessage(){return this._validationMessage}get validationState(){return this._validationState}validate(){try{this._validationState=de.Pending;const t=this.selectionController.getSelectedOptions().length>0;return this.host.required&&!t?(this.setValidationResult(!1,"This field is required",de.Invalid),!1):(this.setValidationResult(!0,"",de.Valid),!0)}catch(t){return this.handleError(t,"validate"),this.setValidationResult(!1,"Validation error occurred",de.Invalid),!1}}reset(){try{this._isValid=!0,this._validationMessage="",this._validationState=de.Pristine,this.requestUpdate(),this.dispatchValidationEvent()}catch(t){this.handleError(t,"reset")}}getFormData(){var t;try{const e=this._host,i=e.name||e.getAttribute("name")||"select",s=this.selectionController.getSelectedOptions();return this.host.multiple?{[i]:s.map((t=>t.value))}:{[i]:(null===(t=s[0])||void 0===t?void 0:t.value)||""}}catch(t){return this.handleError(t,"getFormData"),{}}}checkValidity(){return this.validate()}reportValidity(){var t;const e=this.validate();if(!e){const e=null===(t=this._host.shadowRoot)||void 0===t?void 0:t.querySelector(".wrapper");e&&e.focus()}return e}setCustomValidity(t){try{t?this.setValidationResult(!1,t,de.Invalid):this.validate()}catch(t){this.handleError(t,"setCustomValidity")}}validateOnChange(){this._validationState!==de.Pristine&&this.validate()}validateOnBlur(){this._validationState===de.Pristine&&(this._validationState=de.Pending),this.validate()}setValidationResult(t,e,i){const s=this._isValid!==t||this._validationMessage!==e||this._validationState!==i;this._isValid=t,this._validationMessage=e,this._validationState=i,s&&(this.requestUpdate(),this.dispatchValidationEvent())}dispatchValidationEvent(){const t={isValid:this._isValid,validationMessage:this._validationMessage,validationState:this._validationState};this.dispatchEvent(new CustomEvent("nr-validation",{detail:t,bubbles:!0,composed:!0}))}hostUpdated(){this.validateOnChange()}getValidationClasses(){return{valid:this._isValid&&this._validationState===de.Valid,invalid:!this._isValid&&this._validationState===de.Invalid,pending:this._validationState===de.Pending,pristine:this._validationState===de.Pristine}}getAriaAttributes(){const t={};return this.host.required&&(t["aria-required"]="true"),this._isValid||(t["aria-invalid"]="true",this._validationMessage&&(t["aria-describedby"]="validation-message")),t}}class me extends ue{constructor(){super(...arguments),this._searchQuery="",this.handleSearchInput=t=>{this.setSearchQuery(t.detail.value||"")},this.handleSearchClear=()=>{this.clearSearch()},this.handleSearchKeyDown=t=>{if(["ArrowDown","ArrowUp","Enter","Home","End"].includes(t.key)){const e=this.host.keyboardController;e&&e.handleKeyDown(t)}else t.stopPropagation(),"Escape"===t.key&&(this.host.closeDropdown(),this.host.focus())}}get searchQuery(){return this._searchQuery}get hasSearch(){return""!==this._searchQuery.trim()}setSearchQuery(t){this._searchQuery=t,this.host.searchQuery=t,this.host.requestUpdate()}search(t){this.setSearchQuery(t)}clearSearch(){this.setSearchQuery("")}getFilteredOptions(t){if(!this.host.searchable||!this._searchQuery.trim())return t;const e=this._searchQuery.toLowerCase().trim();return t.filter((t=>t.label.toLowerCase().includes(e)||t.value.toLowerCase().includes(e)||t.description&&t.description.toLowerCase().includes(e)))}renderSearchInput(){return this.host.searchable?mt`
|
|
583
603
|
<div class="search-container">
|
|
584
604
|
<nr-input
|
|
585
605
|
type="text"
|
|
@@ -611,12 +631,12 @@ function jt(t,e){return(({finisher:t,descriptor:e})=>(i,s)=>{var o;if(void 0===s
|
|
|
611
631
|
<span class="no-options-text">No results found for "${this._searchQuery}"</span>
|
|
612
632
|
</div>
|
|
613
633
|
</div>
|
|
614
|
-
`}hasNoResults(t){return this.host.searchable&&""!==this._searchQuery.trim()&&0===this.getFilteredOptions(t).length}getCurrentQuery(){return this.host.searchQuery||this._searchQuery}hostUpdated(){super.hostUpdated(),this.host.searchQuery!==this._searchQuery&&(this._searchQuery=this.host.searchQuery)}hostConnected(){super.hostConnected(),this._searchQuery=""}}class be extends ue{constructor(){super(...arguments),this.handleTriggerClick=t=>{this.host.disabled||(t.preventDefault(),t.stopPropagation(),this.host.toggleDropdown())},this.handleOptionClick=(t,e)=>{t.stopPropagation(),e.disabled||(this.host.
|
|
634
|
+
`}hasNoResults(t){return this.host.searchable&&""!==this._searchQuery.trim()&&0===this.getFilteredOptions(t).length}getCurrentQuery(){return this.host.searchQuery||this._searchQuery}hostUpdated(){super.hostUpdated(),this.host.searchQuery!==this._searchQuery&&(this._searchQuery=this.host.searchQuery)}hostConnected(){super.hostConnected(),this._searchQuery=""}}class be extends ue{constructor(){super(...arguments),this.handleTriggerClick=t=>{this.host.disabled||(t.preventDefault(),t.stopPropagation(),this.host.toggleDropdown())},this.handleOptionClick=(t,e)=>{t.stopPropagation(),e.disabled||(this.host.multiple?this.host.toggleOption(e):(this.host.selectOption(e),this.host.closeDropdown()))},this.handleTagRemove=(t,e)=>{t.stopPropagation(),this.host.unselectOption(e)},this.handleClearAll=t=>{t.stopPropagation(),this.host.clearSelection()},this.handleKeyDown=t=>{const e=this.host.keyboardController;e&&e.handleKeyDown(t)},this.handleFocus=()=>{const t=this.host.focusController;t&&t.handleFocus()},this.handleBlur=()=>{const t=this.host.focusController;t&&t.handleBlur()},this.handleWindowClick=t=>{const e=t.target;this.host.contains(e)||this.host.closeDropdown()}}setupEventListeners(){window.addEventListener("click",this.handleWindowClick)}removeEventListeners(){window.removeEventListener("click",this.handleWindowClick)}hostDisconnected(){super.hostDisconnected(),this.removeEventListeners()}}
|
|
615
635
|
/**
|
|
616
636
|
* @license
|
|
617
637
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
618
638
|
* SPDX-License-Identifier: MIT
|
|
619
|
-
*/var we=function(t,e,i,s){for(var o,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,l=t.length-1;l>=0;l--)(o=t[l])&&(n=(r<3?o(n):r>3?o(e,i,n):o(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let xe=class extends((t=>ee(Jt(ie(t))))(Lt)){constructor(){super(...arguments),this.requiredComponents=["nr-input","nr-icon"],this.options=[],this.
|
|
639
|
+
*/var we=function(t,e,i,s){for(var o,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,l=t.length-1;l>=0;l--)(o=t[l])&&(n=(r<3?o(n):r>3?o(e,i,n):o(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let xe=class extends((t=>ee(Jt(ie(t))))(Lt)){constructor(){super(...arguments),this.requiredComponents=["nr-input","nr-icon"],this.options=[],this.placeholder="Select an option",this.disabled=!1,this.type=se.Default,this.multiple=!1,this.show=!1,this.status=oe.Default,this.size=re.Medium,this.required=!1,this.name="",this.value="",this.noOptionsMessage="No options available",this.noOptionsIcon="circle-info",this.searchable=!1,this.clearable=!1,this.searchPlaceholder="Search options...",this.searchQuery="",this.useCustomSelectedDisplay=!1,this.maxHeight="",this.block=!1,this.selectionController=new pe(this),this.dropdownController=new ye(this),this.keyboardController=new ve(this,this.selectionController,this.dropdownController),this.focusController=new fe(this),this.validationController=new ge(this,this.selectionController),this.searchController=new me(this),this.eventController=new be(this),this.handleTriggerClick=t=>{this.eventController.handleTriggerClick(t)},this.handleOptionClick=(t,e)=>{this.eventController.handleOptionClick(t,e)},this.handleTagRemove=(t,e)=>{this.eventController.handleTagRemove(t,e)},this.handleClearAll=t=>{this.eventController.handleClearAll(t)},this.handleKeyDown=t=>{this.eventController.handleKeyDown(t)},this.handleFocus=()=>{this.eventController.handleFocus()},this.handleBlur=()=>{this.eventController.handleBlur()}}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}willUpdate(t){super.willUpdate(t),(t.has("options")||t.has("value"))&&this.options.length>0&&this.value&&(Array.isArray(this.value)?this.value.length>0:""!==this.value)&&(this.selectionController._initialized=!1,this.selectionController.initializeFromValue())}firstUpdated(t){super.firstUpdated(t),this.optionsElement&&this.wrapper?this.dropdownController.setElements(this.optionsElement,this.wrapper):setTimeout((()=>{this.optionsElement&&this.wrapper&&this.dropdownController.setElements(this.optionsElement,this.wrapper)}),100),this.value&&(Array.isArray(this.value)?this.value.length>0:""!==this.value)&&this.selectionController.initializeFromValue()}get selectedOptions(){return this.selectionController.getSelectedOptions()}get selectedOption(){return this.selectionController.getSelectedOption()}selectOption(t){this.selectionController.selectOption(t)}unselectOption(t){this.selectionController.unselectOption(t)}toggleOption(t){this.selectionController.toggleOption(t)}clearSelection(){this.selectionController.clearSelection()}isOptionSelected(t){return this.selectionController.isOptionSelected(t)}toggleDropdown(){this.dropdownController.toggle()}openDropdown(){this.dropdownController.open()}closeDropdown(){this.dropdownController.close()}focus(){this.focusController.focus()}blur(){this.focusController.blur()}validate(){return this.validationController.validate()}checkValidity(){return this.validationController.checkValidity()}reportValidity(){return this.validationController.reportValidity()}setCustomValidity(t){this.validationController.setCustomValidity(t)}searchOptions(t){this.searchController.search(t)}clearSearch(){this.searchController.clearSearch()}getSearchFilteredOptions(){return this.searchController.getFilteredOptions(this.options)}getCurrentSearchQuery(){return this.searchController.searchQuery}getSelectedOptions(){return this.selectedOptions}setupGlobalEventListeners(){this.eventController.setupEventListeners()}removeGlobalEventListeners(){this.eventController.removeEventListeners()}getFilteredOptions(){return this.searchController.getFilteredOptions(this.options)}setupEventListeners(){this.eventController.setupEventListeners()}removeEventListeners(){this.eventController.removeEventListeners()}render(){return mt`${((t,e,i)=>{for(const i of e)if(i[0]===t)return(0,i[1])();return null==i?void 0:i()})(this.type,[[se.Default,()=>this.renderDefault()],[se.Inline,()=>this.renderInline()],[se.Button,()=>this.renderButton()],[se.Slot,()=>this.renderSlot()]])}`}renderDefault(){const t=this.selectedOptions,e=this.validationController.getValidationClasses();return mt`
|
|
620
640
|
<slot name="label"></slot>
|
|
621
641
|
<div
|
|
622
642
|
class="${Yt(Object.assign({wrapper:!0},e))}"
|
|
@@ -642,6 +662,7 @@ function jt(t,e){return(({finisher:t,descriptor:e})=>(i,s)=>{var o;if(void 0===s
|
|
|
642
662
|
${this.renderClearButton(t)}
|
|
643
663
|
<nr-icon
|
|
644
664
|
name="angle-down"
|
|
665
|
+
size="${this.size}"
|
|
645
666
|
class="arrow-icon"
|
|
646
667
|
aria-hidden="true"
|
|
647
668
|
></nr-icon>
|
|
@@ -694,19 +715,21 @@ function jt(t,e){return(({finisher:t,descriptor:e})=>(i,s)=>{var o;if(void 0===s
|
|
|
694
715
|
${this.searchable?this.renderSearchInput():wt}
|
|
695
716
|
${this.renderSelectOptions()}
|
|
696
717
|
</div>
|
|
697
|
-
`}renderSelectedContent(t){return 0===t.length?mt`<span class="placeholder" aria-hidden="true">${this.placeholder}</span>`:this.multiple?Wt(t,(t=>mt`
|
|
718
|
+
`}renderSelectedContent(t){return 0===t.length?mt`<span class="placeholder" aria-hidden="true">${this.placeholder}</span>`:this.multiple?this.useCustomSelectedDisplay?mt`<slot name="selected-display" .selectedOptions=${t}></slot>`:Wt(t,(t=>mt`
|
|
698
719
|
<span class="tag">
|
|
699
720
|
<span class="tag-label">${t.label}</span>
|
|
700
721
|
<nr-icon
|
|
701
722
|
name="remove"
|
|
723
|
+
size="${this.size}"
|
|
702
724
|
class="tag-close"
|
|
703
725
|
@click=${e=>this.handleTagRemove(e,t)}
|
|
704
726
|
aria-label="Remove ${t.label}"
|
|
705
727
|
></nr-icon>
|
|
706
728
|
</span>
|
|
707
|
-
`)):mt`${t[0].label}`}renderStatusIcon(){switch(this.status){case oe.Warning:return mt`<nr-icon name="warning" class="status-icon warning"></nr-icon>`;case oe.Error:return mt`<nr-icon name="exclamation-circle" class="status-icon error"></nr-icon>`;case oe.Success:return mt`<nr-icon name="check-circle" class="status-icon success"></nr-icon>`;default:return wt}}renderClearButton(t){return!this.clearable||0===t.length||this.disabled?wt:mt`
|
|
729
|
+
`)):mt`${t[0].label}`}renderStatusIcon(){switch(this.status){case oe.Warning:return mt`<nr-icon name="warning" size="${this.size}" class="status-icon warning"></nr-icon>`;case oe.Error:return mt`<nr-icon name="exclamation-circle" size="${this.size}" class="status-icon error"></nr-icon>`;case oe.Success:return mt`<nr-icon name="check-circle" size="${this.size}" class="status-icon success"></nr-icon>`;default:return wt}}renderClearButton(t){return!this.clearable||0===t.length||this.disabled?wt:mt`
|
|
708
730
|
<nr-icon
|
|
709
731
|
name="remove"
|
|
732
|
+
size="${this.size}"
|
|
710
733
|
class="clear-icon"
|
|
711
734
|
@click=${this.handleClearAll}
|
|
712
735
|
aria-label="Clear selection"
|
|
@@ -735,18 +758,18 @@ function jt(t,e){return(({finisher:t,descriptor:e})=>(i,s)=>{var o;if(void 0===s
|
|
|
735
758
|
title="${t.title||""}"
|
|
736
759
|
>
|
|
737
760
|
<div class="option-content">
|
|
738
|
-
${t.icon?mt`<nr-icon name="${t.icon}" class="option-icon"></nr-icon>`:wt}
|
|
761
|
+
${t.icon?mt`<nr-icon name="${t.icon}" size="${this.size}" class="option-icon"></nr-icon>`:wt}
|
|
739
762
|
<div class="option-text">
|
|
740
763
|
${t.htmlContent?mt`<div .innerHTML=${t.htmlContent}></div>`:t.label}
|
|
741
764
|
${t.description?mt`<div class="option-description">${t.description}</div>`:wt}
|
|
742
765
|
</div>
|
|
743
766
|
</div>
|
|
744
767
|
|
|
745
|
-
${i?mt`<nr-icon name="check" class="check-icon" aria-hidden="true"></nr-icon>`:wt}
|
|
768
|
+
${i?mt`<nr-icon name="check" size="${this.size}" class="check-icon" aria-hidden="true"></nr-icon>`:wt}
|
|
746
769
|
|
|
747
770
|
${t.state&&t.message?mt`
|
|
748
771
|
<div class="option-message ${t.state}">
|
|
749
|
-
<nr-icon name="${"error"===t.state?"exclamation-circle":"warning"}"></nr-icon>
|
|
772
|
+
<nr-icon name="${"error"===t.state?"exclamation-circle":"warning"}" size="${this.size}"></nr-icon>
|
|
750
773
|
<span>${t.message}</span>
|
|
751
774
|
</div>
|
|
752
775
|
`:wt}
|
|
@@ -755,10 +778,10 @@ function jt(t,e){return(({finisher:t,descriptor:e})=>(i,s)=>{var o;if(void 0===s
|
|
|
755
778
|
<div class="validation-message ${this.status}" id="validation-message">
|
|
756
779
|
${t}
|
|
757
780
|
</div>
|
|
758
|
-
`:wt}};xe.styles=Ht,we([
|
|
781
|
+
`:wt}};xe.styles=Ht,we([Bt({type:Array})],xe.prototype,"options",void 0),we([Bt({type:String})],xe.prototype,"placeholder",void 0),we([Bt({type:Boolean,reflect:!0})],xe.prototype,"disabled",void 0),we([Bt({type:String,reflect:!0})],xe.prototype,"type",void 0),we([Bt({type:Boolean,attribute:"multiple"})],xe.prototype,"multiple",void 0),we([Bt({type:Boolean,reflect:!0})],xe.prototype,"show",void 0),we([Bt({type:String,reflect:!0})],xe.prototype,"status",void 0),we([Bt({type:String,reflect:!0})],xe.prototype,"size",void 0),we([Bt({type:Boolean,reflect:!0})],xe.prototype,"required",void 0),we([Bt({type:String})],xe.prototype,"name",void 0),we([Bt()],xe.prototype,"value",void 0),we([Bt({type:String,attribute:"no-options-message"})],xe.prototype,"noOptionsMessage",void 0),we([Bt({type:String,attribute:"no-options-icon"})],xe.prototype,"noOptionsIcon",void 0),we([Bt({type:Boolean,reflect:!0})],xe.prototype,"searchable",void 0),we([Bt({type:Boolean,reflect:!0})],xe.prototype,"clearable",void 0),we([Bt({type:String,attribute:"search-placeholder"})],xe.prototype,"searchPlaceholder",void 0),we([Bt({type:String})],xe.prototype,"searchQuery",void 0),we([Bt({type:Boolean,attribute:"use-custom-selected-display"})],xe.prototype,"useCustomSelectedDisplay",void 0),we([Bt({type:String,attribute:"max-height"})],xe.prototype,"maxHeight",void 0),we([Bt({type:Boolean,reflect:!0})],xe.prototype,"block",void 0),we([jt(".options")],xe.prototype,"optionsElement",void 0),we([jt(".wrapper")],xe.prototype,"wrapper",void 0),we([jt(".search-input")],xe.prototype,"searchInput",void 0),xe=we([(t=>e=>"function"==typeof e?((t,e)=>(customElements.define(t,e),e))(t,e):((t,e)=>{const{kind:i,elements:s}=e;return{kind:i,elements:s,finisher(e){customElements.define(t,e)}}})(t,e))("nr-select")],xe);
|
|
759
782
|
/**
|
|
760
783
|
* @license
|
|
761
784
|
* Copyright 2023 Nuraly, Laabidi Aymen
|
|
762
785
|
* SPDX-License-Identifier: MIT
|
|
763
786
|
*/
|
|
764
|
-
const $e={CHANGE:"nr-change",FOCUS:"nr-focus",BLUR:"nr-blur",DROPDOWN_OPEN:"nr-dropdown-open",DROPDOWN_CLOSE:"nr-dropdown-close",VALIDATION:"nr-validation",ERROR:"nr-select-error"},Ee={WRAPPER:"wrapper",SELECT:"select",TRIGGER:"select-trigger",OPTIONS:"options",OPTION:"option",SELECTED:"selected",FOCUSED:"focused",DISABLED:"disabled",TAG:"tag",TAG_LABEL:"tag-label",TAG_CLOSE:"tag-close",ICONS_CONTAINER:"icons-container",ARROW_ICON:"arrow-icon",CLEAR_ICON:"clear-icon",STATUS_ICON:"status-icon",CHECK_ICON:"check-icon",VALIDATION_MESSAGE:"validation-message",PLACEHOLDER:"placeholder",NO_OPTIONS:"no-options",NO_OPTIONS_CONTENT:"no-options-content",NO_OPTIONS_ICON:"no-options-icon",NO_OPTIONS_TEXT:"no-options-text",SEARCH_CONTAINER:"search-container",SEARCH_INPUT:"search-input",SEARCH_ICON:"search-icon",SEARCH_CLEAR:"search-clear"},Se={COMBOBOX:"combobox",LISTBOX:"listbox",OPTION:"option",EXPANDED:"aria-expanded",HASPOPUP:"aria-haspopup",MULTISELECTABLE:"aria-multiselectable",SELECTED:"aria-selected",DISABLED:"aria-disabled",REQUIRED:"aria-required",INVALID:"aria-invalid",DESCRIBEDBY:"aria-describedby",LABELLEDBY:"aria-labelledby"},Oe={PLACEHOLDER:"Select an option",MAX_HEIGHT:"200px",DROPDOWN_OFFSET:4,TAG_MAX_WIDTH:"150px",TRANSITION_DURATION:200,DEBOUNCE_DELAY:300},Ae={ENTER:"Enter",SPACE:" ",ESCAPE:"Escape",ARROW_DOWN:"ArrowDown",ARROW_UP:"ArrowUp",HOME:"Home",END:"End",TAB:"Tab"},ke="",
|
|
787
|
+
const $e={CHANGE:"nr-change",FOCUS:"nr-focus",BLUR:"nr-blur",DROPDOWN_OPEN:"nr-dropdown-open",DROPDOWN_CLOSE:"nr-dropdown-close",VALIDATION:"nr-validation",ERROR:"nr-select-error"},Ee={WRAPPER:"wrapper",SELECT:"select",TRIGGER:"select-trigger",OPTIONS:"options",OPTION:"option",SELECTED:"selected",FOCUSED:"focused",DISABLED:"disabled",TAG:"tag",TAG_LABEL:"tag-label",TAG_CLOSE:"tag-close",ICONS_CONTAINER:"icons-container",ARROW_ICON:"arrow-icon",CLEAR_ICON:"clear-icon",STATUS_ICON:"status-icon",CHECK_ICON:"check-icon",VALIDATION_MESSAGE:"validation-message",PLACEHOLDER:"placeholder",NO_OPTIONS:"no-options",NO_OPTIONS_CONTENT:"no-options-content",NO_OPTIONS_ICON:"no-options-icon",NO_OPTIONS_TEXT:"no-options-text",SEARCH_CONTAINER:"search-container",SEARCH_INPUT:"search-input",SEARCH_ICON:"search-icon",SEARCH_CLEAR:"search-clear"},Se={COMBOBOX:"combobox",LISTBOX:"listbox",OPTION:"option",EXPANDED:"aria-expanded",HASPOPUP:"aria-haspopup",MULTISELECTABLE:"aria-multiselectable",SELECTED:"aria-selected",DISABLED:"aria-disabled",REQUIRED:"aria-required",INVALID:"aria-invalid",DESCRIBEDBY:"aria-describedby",LABELLEDBY:"aria-labelledby"},Oe={PLACEHOLDER:"Select an option",MAX_HEIGHT:"200px",DROPDOWN_OFFSET:4,TAG_MAX_WIDTH:"150px",TRANSITION_DURATION:200,DEBOUNCE_DELAY:300},Ae={ENTER:"Enter",SPACE:" ",ESCAPE:"Escape",ARROW_DOWN:"ArrowDown",ARROW_UP:"ArrowUp",HOME:"Home",END:"End",TAB:"Tab"},ke="",ze=", ";export{ue as BaseSelectController,ce as DropdownPlacement,ke as EMPTY_STRING,xe as HySelectComponent,ze as MULTIPLE_OPTIONS_SEPARATOR,ne as OptionSize,Se as SELECT_ARIA,Ee as SELECT_CLASSES,Oe as SELECT_DEFAULTS,$e as SELECT_EVENTS,Ae as SELECT_KEYS,he as SearchMode,le as SelectDirection,ye as SelectDropdownController,be as SelectEventController,fe as SelectFocusController,ve as SelectKeyboardController,me as SelectSearchController,pe as SelectSelectionController,re as SelectSize,oe as SelectStatus,se as SelectType,ge as SelectValidationController,ae as SelectVariant};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nuralyui/select",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"description": "A comprehensive select component with advanced features including multi-selection, keyboard navigation, validation, and accessibility support.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
package/react.js
CHANGED
|
@@ -6,7 +6,7 @@ import { HySelectComponent } from './select.component.js';
|
|
|
6
6
|
* Provides React-compatible props and event handling
|
|
7
7
|
*/
|
|
8
8
|
export const HySelect = createComponent({
|
|
9
|
-
tagName: '
|
|
9
|
+
tagName: 'nr-select',
|
|
10
10
|
elementClass: HySelectComponent,
|
|
11
11
|
react: React,
|
|
12
12
|
events: {
|
package/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/select/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,iBAAiB;IAC/B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,kBAAkB;QAClB,QAAQ,EAAE,QAAQ;QAClB,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,MAAM;QAEd,yBAAyB;QACzB,cAAc,EAAE,eAAe;QAC/B,eAAe,EAAE,gBAAgB;QACjC,YAAY,EAAE,YAAY;QAC1B,aAAa,EAAE,cAAc;QAC7B,aAAa,EAAE,cAAc;KAC9B;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { HySelectComponent } from './select.component.js';\n\n/**\n * React wrapper for the HySelectComponent\n * Provides React-compatible props and event handling\n */\nexport const HySelect = createComponent({\n tagName: '
|
|
1
|
+
{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/select/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,iBAAiB;IAC/B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,kBAAkB;QAClB,QAAQ,EAAE,QAAQ;QAClB,SAAS,EAAE,SAAS;QACpB,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,MAAM;QAEd,yBAAyB;QACzB,cAAc,EAAE,eAAe;QAC/B,eAAe,EAAE,gBAAgB;QACjC,YAAY,EAAE,YAAY;QAC1B,aAAa,EAAE,cAAc;QAC7B,aAAa,EAAE,cAAc;KAC9B;CACF,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { HySelectComponent } from './select.component.js';\n\n/**\n * React wrapper for the HySelectComponent\n * Provides React-compatible props and event handling\n */\nexport const HySelect = createComponent({\n tagName: 'nr-select',\n elementClass: HySelectComponent,\n react: React,\n events: {\n // Standard events\n onChange: 'change',\n onChanged: 'changed', // Legacy event for backward compatibility\n onFocus: 'focus',\n onBlur: 'blur',\n \n // Select-specific events\n onDropdownOpen: 'dropdown-open',\n onDropdownClose: 'dropdown-close',\n onValidation: 'validation',\n onSelectError: 'select-error',\n onSelectFocus: 'select-focus',\n },\n});\n\n// Export type for React props\nexport type HySelectProps = React.ComponentProps<typeof HySelect>;"]}
|
package/select.component.d.ts
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import { LitElement } from 'lit';
|
|
7
7
|
import { SelectOption, SelectType, SelectSize, SelectStatus } from './select.types.js';
|
|
8
8
|
import { SelectHost } from './interfaces/index.js';
|
|
9
|
-
declare const HySelectComponent_base: (new (...args: any[]) => import("
|
|
9
|
+
declare const HySelectComponent_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
|
|
10
10
|
/**
|
|
11
11
|
* Advanced select component with multiple selection modes, validation, and accessibility features.
|
|
12
12
|
*
|
|
@@ -16,25 +16,28 @@ declare const HySelectComponent_base: (new (...args: any[]) => import("../../sha
|
|
|
16
16
|
* @example
|
|
17
17
|
* ```html
|
|
18
18
|
* <!-- Basic select -->
|
|
19
|
-
* <
|
|
19
|
+
* <nr-select placeholder="Choose an option">
|
|
20
20
|
* <option value="1">Option 1</option>
|
|
21
21
|
* <option value="2">Option 2</option>
|
|
22
|
-
* </
|
|
22
|
+
* </nr-select>
|
|
23
23
|
*
|
|
24
24
|
* <!-- Multiple selection -->
|
|
25
|
-
* <
|
|
25
|
+
* <nr-select multiple placeholder="Choose multiple options"></nr-select>
|
|
26
26
|
*
|
|
27
27
|
* <!-- With validation -->
|
|
28
|
-
* <
|
|
28
|
+
* <nr-select required status="error"></nr-select>
|
|
29
29
|
*
|
|
30
30
|
* <!-- Button style -->
|
|
31
|
-
* <
|
|
31
|
+
* <nr-select type="button"></nr-select>
|
|
32
32
|
*
|
|
33
33
|
* <!-- With search functionality -->
|
|
34
|
-
* <
|
|
34
|
+
* <nr-select searchable search-placeholder="Search options..."></nr-select>
|
|
35
35
|
*
|
|
36
36
|
* <!-- With clear button -->
|
|
37
|
-
* <
|
|
37
|
+
* <nr-select clearable></nr-select>
|
|
38
|
+
*
|
|
39
|
+
* <!-- Full width block select -->
|
|
40
|
+
* <nr-select block></nr-select>
|
|
38
41
|
* ```
|
|
39
42
|
*
|
|
40
43
|
* @fires nr-change - Selection changed
|
|
@@ -47,6 +50,7 @@ declare const HySelectComponent_base: (new (...args: any[]) => import("../../sha
|
|
|
47
50
|
* @slot label - Select label content
|
|
48
51
|
* @slot helper-text - Helper text below select
|
|
49
52
|
* @slot trigger - Custom trigger content (slot type only)
|
|
53
|
+
* @slot selected-display - Custom display for selected values (multi-select only, when use-custom-selected-display is true)
|
|
50
54
|
*
|
|
51
55
|
* @cssproperty --select-border-color - Border color
|
|
52
56
|
* @cssproperty --select-background - Background color
|
|
@@ -67,8 +71,6 @@ export declare class HySelectComponent extends HySelectComponent_base implements
|
|
|
67
71
|
requiredComponents: string[];
|
|
68
72
|
/** Array of options to display in the select dropdown */
|
|
69
73
|
options: SelectOption[];
|
|
70
|
-
/** Default selected values (for initialization) */
|
|
71
|
-
defaultValue: string[];
|
|
72
74
|
/** Placeholder text shown when no option is selected */
|
|
73
75
|
placeholder: string;
|
|
74
76
|
/** Disables the select component */
|
|
@@ -101,8 +103,12 @@ export declare class HySelectComponent extends HySelectComponent_base implements
|
|
|
101
103
|
searchPlaceholder: string;
|
|
102
104
|
/** Current search query */
|
|
103
105
|
searchQuery: string;
|
|
106
|
+
/** Enable custom selected display slot */
|
|
107
|
+
useCustomSelectedDisplay: boolean;
|
|
104
108
|
/** Maximum height of the options dropdown */
|
|
105
109
|
maxHeight: string;
|
|
110
|
+
/** Makes select full width */
|
|
111
|
+
block: boolean;
|
|
106
112
|
/** Options dropdown container element */
|
|
107
113
|
optionsElement: HTMLElement;
|
|
108
114
|
/** Main wrapper element */
|
|
@@ -131,6 +137,10 @@ export declare class HySelectComponent extends HySelectComponent_base implements
|
|
|
131
137
|
* Component disconnected from DOM - cleanup event listeners
|
|
132
138
|
*/
|
|
133
139
|
disconnectedCallback(): void;
|
|
140
|
+
/**
|
|
141
|
+
* Called before update to handle property changes
|
|
142
|
+
*/
|
|
143
|
+
willUpdate(changedProperties: Map<string, any>): void;
|
|
134
144
|
/**
|
|
135
145
|
* First render complete - setup controllers and initialize state
|
|
136
146
|
*/
|
|
@@ -155,6 +165,11 @@ export declare class HySelectComponent extends HySelectComponent_base implements
|
|
|
155
165
|
* @param option - The option to unselect
|
|
156
166
|
*/
|
|
157
167
|
unselectOption(option: SelectOption): void;
|
|
168
|
+
/**
|
|
169
|
+
* Toggles an option's selection state
|
|
170
|
+
* @param option - The option to toggle
|
|
171
|
+
*/
|
|
172
|
+
toggleOption(option: SelectOption): void;
|
|
158
173
|
/**
|
|
159
174
|
* Clears all current selections
|
|
160
175
|
*/
|
|
@@ -224,6 +239,11 @@ export declare class HySelectComponent extends HySelectComponent_base implements
|
|
|
224
239
|
* @returns Current search query string
|
|
225
240
|
*/
|
|
226
241
|
getCurrentSearchQuery(): string;
|
|
242
|
+
/**
|
|
243
|
+
* Gets the currently selected options
|
|
244
|
+
* @returns Array of selected option objects
|
|
245
|
+
*/
|
|
246
|
+
getSelectedOptions(): SelectOption[];
|
|
227
247
|
/**
|
|
228
248
|
* Manually trigger setup of global event listeners
|
|
229
249
|
*/
|
package/select.component.js
CHANGED
|
@@ -16,7 +16,7 @@ import { map } from 'lit/directives/map.js';
|
|
|
16
16
|
import { choose } from 'lit/directives/choose.js';
|
|
17
17
|
import { classMap } from 'lit/directives/class-map.js';
|
|
18
18
|
import { styleMap } from 'lit/directives/style-map.js';
|
|
19
|
-
import { NuralyUIBaseMixin } from '
|
|
19
|
+
import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
|
|
20
20
|
// Import types
|
|
21
21
|
import { SelectType, SelectSize, SelectStatus } from './select.types.js';
|
|
22
22
|
// Import controllers
|
|
@@ -30,25 +30,28 @@ import { SelectSelectionController, SelectKeyboardController, SelectDropdownCont
|
|
|
30
30
|
* @example
|
|
31
31
|
* ```html
|
|
32
32
|
* <!-- Basic select -->
|
|
33
|
-
* <
|
|
33
|
+
* <nr-select placeholder="Choose an option">
|
|
34
34
|
* <option value="1">Option 1</option>
|
|
35
35
|
* <option value="2">Option 2</option>
|
|
36
|
-
* </
|
|
36
|
+
* </nr-select>
|
|
37
37
|
*
|
|
38
38
|
* <!-- Multiple selection -->
|
|
39
|
-
* <
|
|
39
|
+
* <nr-select multiple placeholder="Choose multiple options"></nr-select>
|
|
40
40
|
*
|
|
41
41
|
* <!-- With validation -->
|
|
42
|
-
* <
|
|
42
|
+
* <nr-select required status="error"></nr-select>
|
|
43
43
|
*
|
|
44
44
|
* <!-- Button style -->
|
|
45
|
-
* <
|
|
45
|
+
* <nr-select type="button"></nr-select>
|
|
46
46
|
*
|
|
47
47
|
* <!-- With search functionality -->
|
|
48
|
-
* <
|
|
48
|
+
* <nr-select searchable search-placeholder="Search options..."></nr-select>
|
|
49
49
|
*
|
|
50
50
|
* <!-- With clear button -->
|
|
51
|
-
* <
|
|
51
|
+
* <nr-select clearable></nr-select>
|
|
52
|
+
*
|
|
53
|
+
* <!-- Full width block select -->
|
|
54
|
+
* <nr-select block></nr-select>
|
|
52
55
|
* ```
|
|
53
56
|
*
|
|
54
57
|
* @fires nr-change - Selection changed
|
|
@@ -61,6 +64,7 @@ import { SelectSelectionController, SelectKeyboardController, SelectDropdownCont
|
|
|
61
64
|
* @slot label - Select label content
|
|
62
65
|
* @slot helper-text - Helper text below select
|
|
63
66
|
* @slot trigger - Custom trigger content (slot type only)
|
|
67
|
+
* @slot selected-display - Custom display for selected values (multi-select only, when use-custom-selected-display is true)
|
|
64
68
|
*
|
|
65
69
|
* @cssproperty --select-border-color - Border color
|
|
66
70
|
* @cssproperty --select-background - Background color
|
|
@@ -82,8 +86,6 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
82
86
|
this.requiredComponents = ["nr-input", "nr-icon"];
|
|
83
87
|
/** Array of options to display in the select dropdown */
|
|
84
88
|
this.options = [];
|
|
85
|
-
/** Default selected values (for initialization) */
|
|
86
|
-
this.defaultValue = [];
|
|
87
89
|
/** Placeholder text shown when no option is selected */
|
|
88
90
|
this.placeholder = 'Select an option';
|
|
89
91
|
/** Disables the select component */
|
|
@@ -116,8 +118,12 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
116
118
|
this.searchPlaceholder = 'Search options...';
|
|
117
119
|
/** Current search query */
|
|
118
120
|
this.searchQuery = '';
|
|
121
|
+
/** Enable custom selected display slot */
|
|
122
|
+
this.useCustomSelectedDisplay = false;
|
|
119
123
|
/** Maximum height of the options dropdown */
|
|
120
124
|
this.maxHeight = '';
|
|
125
|
+
/** Makes select full width */
|
|
126
|
+
this.block = false;
|
|
121
127
|
/** Handles option selection logic */
|
|
122
128
|
this.selectionController = new SelectSelectionController(this);
|
|
123
129
|
/** Manages dropdown visibility and positioning */
|
|
@@ -187,6 +193,21 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
187
193
|
disconnectedCallback() {
|
|
188
194
|
super.disconnectedCallback();
|
|
189
195
|
}
|
|
196
|
+
/**
|
|
197
|
+
* Called before update to handle property changes
|
|
198
|
+
*/
|
|
199
|
+
willUpdate(changedProperties) {
|
|
200
|
+
super.willUpdate(changedProperties);
|
|
201
|
+
// If options or value changed, reinitialize selection
|
|
202
|
+
if ((changedProperties.has('options') || changedProperties.has('value')) &&
|
|
203
|
+
this.options.length > 0 &&
|
|
204
|
+
this.value &&
|
|
205
|
+
(Array.isArray(this.value) ? this.value.length > 0 : this.value !== '')) {
|
|
206
|
+
// Reset initialization flag to allow reinit
|
|
207
|
+
this.selectionController._initialized = false;
|
|
208
|
+
this.selectionController.initializeFromValue();
|
|
209
|
+
}
|
|
210
|
+
}
|
|
190
211
|
/**
|
|
191
212
|
* First render complete - setup controllers and initialize state
|
|
192
213
|
*/
|
|
@@ -205,8 +226,8 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
205
226
|
}, 100);
|
|
206
227
|
}
|
|
207
228
|
// Apply default selection if specified
|
|
208
|
-
if (this.
|
|
209
|
-
this.selectionController.
|
|
229
|
+
if (this.value && (Array.isArray(this.value) ? this.value.length > 0 : this.value !== '')) {
|
|
230
|
+
this.selectionController.initializeFromValue();
|
|
210
231
|
}
|
|
211
232
|
}
|
|
212
233
|
// === Public API Methods ===
|
|
@@ -238,6 +259,13 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
238
259
|
unselectOption(option) {
|
|
239
260
|
this.selectionController.unselectOption(option);
|
|
240
261
|
}
|
|
262
|
+
/**
|
|
263
|
+
* Toggles an option's selection state
|
|
264
|
+
* @param option - The option to toggle
|
|
265
|
+
*/
|
|
266
|
+
toggleOption(option) {
|
|
267
|
+
this.selectionController.toggleOption(option);
|
|
268
|
+
}
|
|
241
269
|
/**
|
|
242
270
|
* Clears all current selections
|
|
243
271
|
*/
|
|
@@ -337,6 +365,13 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
337
365
|
getCurrentSearchQuery() {
|
|
338
366
|
return this.searchController.searchQuery;
|
|
339
367
|
}
|
|
368
|
+
/**
|
|
369
|
+
* Gets the currently selected options
|
|
370
|
+
* @returns Array of selected option objects
|
|
371
|
+
*/
|
|
372
|
+
getSelectedOptions() {
|
|
373
|
+
return this.selectedOptions;
|
|
374
|
+
}
|
|
340
375
|
/**
|
|
341
376
|
* Manually trigger setup of global event listeners
|
|
342
377
|
*/
|
|
@@ -411,6 +446,7 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
411
446
|
${this.renderClearButton(selectedOptions)}
|
|
412
447
|
<nr-icon
|
|
413
448
|
name="angle-down"
|
|
449
|
+
size="${this.size}"
|
|
414
450
|
class="arrow-icon"
|
|
415
451
|
aria-hidden="true"
|
|
416
452
|
></nr-icon>
|
|
@@ -492,11 +528,17 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
492
528
|
return html `<span class="placeholder" aria-hidden="true">${this.placeholder}</span>`;
|
|
493
529
|
}
|
|
494
530
|
if (this.multiple) {
|
|
531
|
+
// Check if custom display slot should be used
|
|
532
|
+
if (this.useCustomSelectedDisplay) {
|
|
533
|
+
return html `<slot name="selected-display" .selectedOptions=${selectedOptions}></slot>`;
|
|
534
|
+
}
|
|
535
|
+
// Default behavior: render tags
|
|
495
536
|
return map(selectedOptions, (option) => html `
|
|
496
537
|
<span class="tag">
|
|
497
538
|
<span class="tag-label">${option.label}</span>
|
|
498
539
|
<nr-icon
|
|
499
540
|
name="remove"
|
|
541
|
+
size="${this.size}"
|
|
500
542
|
class="tag-close"
|
|
501
543
|
@click=${(e) => this.handleTagRemove(e, option)}
|
|
502
544
|
aria-label="Remove ${option.label}"
|
|
@@ -514,11 +556,11 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
514
556
|
renderStatusIcon() {
|
|
515
557
|
switch (this.status) {
|
|
516
558
|
case SelectStatus.Warning:
|
|
517
|
-
return html `<nr-icon name="warning" class="status-icon warning"></nr-icon>`;
|
|
559
|
+
return html `<nr-icon name="warning" size="${this.size}" class="status-icon warning"></nr-icon>`;
|
|
518
560
|
case SelectStatus.Error:
|
|
519
|
-
return html `<nr-icon name="exclamation-circle" class="status-icon error"></nr-icon>`;
|
|
561
|
+
return html `<nr-icon name="exclamation-circle" size="${this.size}" class="status-icon error"></nr-icon>`;
|
|
520
562
|
case SelectStatus.Success:
|
|
521
|
-
return html `<nr-icon name="check-circle" class="status-icon success"></nr-icon>`;
|
|
563
|
+
return html `<nr-icon name="check-circle" size="${this.size}" class="status-icon success"></nr-icon>`;
|
|
522
564
|
default:
|
|
523
565
|
return nothing;
|
|
524
566
|
}
|
|
@@ -533,6 +575,7 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
533
575
|
return html `
|
|
534
576
|
<nr-icon
|
|
535
577
|
name="remove"
|
|
578
|
+
size="${this.size}"
|
|
536
579
|
class="clear-icon"
|
|
537
580
|
@click=${this.handleClearAll}
|
|
538
581
|
aria-label="Clear selection"
|
|
@@ -586,18 +629,18 @@ let HySelectComponent = class HySelectComponent extends NuralyUIBaseMixin(LitEle
|
|
|
586
629
|
title="${option.title || ''}"
|
|
587
630
|
>
|
|
588
631
|
<div class="option-content">
|
|
589
|
-
${option.icon ? html `<nr-icon name="${option.icon}" class="option-icon"></nr-icon>` : nothing}
|
|
632
|
+
${option.icon ? html `<nr-icon name="${option.icon}" size="${this.size}" class="option-icon"></nr-icon>` : nothing}
|
|
590
633
|
<div class="option-text">
|
|
591
634
|
${option.htmlContent ? html `<div .innerHTML=${option.htmlContent}></div>` : option.label}
|
|
592
635
|
${option.description ? html `<div class="option-description">${option.description}</div>` : nothing}
|
|
593
636
|
</div>
|
|
594
637
|
</div>
|
|
595
638
|
|
|
596
|
-
${isSelected ? html `<nr-icon name="check" class="check-icon" aria-hidden="true"></nr-icon>` : nothing}
|
|
639
|
+
${isSelected ? html `<nr-icon name="check" size="${this.size}" class="check-icon" aria-hidden="true"></nr-icon>` : nothing}
|
|
597
640
|
|
|
598
641
|
${option.state && option.message ? html `
|
|
599
642
|
<div class="option-message ${option.state}">
|
|
600
|
-
<nr-icon name="${option.state === 'error' ? 'exclamation-circle' : 'warning'}"></nr-icon>
|
|
643
|
+
<nr-icon name="${option.state === 'error' ? 'exclamation-circle' : 'warning'}" size="${this.size}"></nr-icon>
|
|
601
644
|
<span>${option.message}</span>
|
|
602
645
|
</div>
|
|
603
646
|
` : nothing}
|
|
@@ -629,9 +672,6 @@ HySelectComponent.styles = styles;
|
|
|
629
672
|
__decorate([
|
|
630
673
|
property({ type: Array })
|
|
631
674
|
], HySelectComponent.prototype, "options", void 0);
|
|
632
|
-
__decorate([
|
|
633
|
-
property({ type: Array, attribute: 'default-value' })
|
|
634
|
-
], HySelectComponent.prototype, "defaultValue", void 0);
|
|
635
675
|
__decorate([
|
|
636
676
|
property({ type: String })
|
|
637
677
|
], HySelectComponent.prototype, "placeholder", void 0);
|
|
@@ -660,7 +700,7 @@ __decorate([
|
|
|
660
700
|
property({ type: String })
|
|
661
701
|
], HySelectComponent.prototype, "name", void 0);
|
|
662
702
|
__decorate([
|
|
663
|
-
property(
|
|
703
|
+
property()
|
|
664
704
|
], HySelectComponent.prototype, "value", void 0);
|
|
665
705
|
__decorate([
|
|
666
706
|
property({ type: String, attribute: 'no-options-message' })
|
|
@@ -680,9 +720,15 @@ __decorate([
|
|
|
680
720
|
__decorate([
|
|
681
721
|
property({ type: String })
|
|
682
722
|
], HySelectComponent.prototype, "searchQuery", void 0);
|
|
723
|
+
__decorate([
|
|
724
|
+
property({ type: Boolean, attribute: 'use-custom-selected-display' })
|
|
725
|
+
], HySelectComponent.prototype, "useCustomSelectedDisplay", void 0);
|
|
683
726
|
__decorate([
|
|
684
727
|
property({ type: String, attribute: 'max-height' })
|
|
685
728
|
], HySelectComponent.prototype, "maxHeight", void 0);
|
|
729
|
+
__decorate([
|
|
730
|
+
property({ type: Boolean, reflect: true })
|
|
731
|
+
], HySelectComponent.prototype, "block", void 0);
|
|
686
732
|
__decorate([
|
|
687
733
|
query('.options')
|
|
688
734
|
], HySelectComponent.prototype, "optionsElement", void 0);
|
|
@@ -693,7 +739,7 @@ __decorate([
|
|
|
693
739
|
query('.search-input')
|
|
694
740
|
], HySelectComponent.prototype, "searchInput", void 0);
|
|
695
741
|
HySelectComponent = __decorate([
|
|
696
|
-
customElement('
|
|
742
|
+
customElement('nr-select')
|
|
697
743
|
], HySelectComponent);
|
|
698
744
|
export { HySelectComponent };
|
|
699
745
|
//# sourceMappingURL=select.component.js.map
|
package/select.component.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.component.js","sourceRoot":"","sources":["../../../src/components/select/select.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { styles } from './select.style.js';\nimport { map } from 'lit/directives/map.js';\nimport { choose } from 'lit/directives/choose.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\n\n// Import types\nimport {\n SelectOption,\n SelectType,\n SelectSize,\n SelectStatus\n} from './select.types.js';\n\n// Import controllers\nimport {\n SelectSelectionController,\n SelectKeyboardController,\n SelectDropdownController,\n SelectFocusController,\n SelectValidationController,\n SelectSearchController,\n SelectEventController\n} from './controllers/index.js';\n\n// Import interfaces\nimport { SelectHost } from './interfaces/index.js';\n\n/**\n * Advanced select component with multiple selection modes, validation, and accessibility features.\n * \n * Supports single and multiple selection, custom rendering, validation states, keyboard navigation,\n * and various display types including default, inline, button, and slot-based configurations.\n * \n * @example\n * ```html\n * <!-- Basic select -->\n * <hy-select placeholder=\"Choose an option\">\n * <option value=\"1\">Option 1</option>\n * <option value=\"2\">Option 2</option>\n * </hy-select>\n * \n * <!-- Multiple selection -->\n * <hy-select multiple placeholder=\"Choose multiple options\"></hy-select>\n * \n * <!-- With validation -->\n * <hy-select required status=\"error\"></hy-select>\n * \n * <!-- Button style -->\n * <hy-select type=\"button\"></hy-select>\n * \n * <!-- With search functionality -->\n * <hy-select searchable search-placeholder=\"Search options...\"></hy-select>\n * \n * <!-- With clear button -->\n * <hy-select clearable></hy-select>\n * ```\n * \n * @fires nr-change - Selection changed\n * @fires nr-focus - Component focused \n * @fires nr-blur - Component blurred\n * @fires nr-dropdown-open - Dropdown opened\n * @fires nr-dropdown-close - Dropdown closed\n * @fires nr-validation - Validation state changed\n * \n * @slot label - Select label content\n * @slot helper-text - Helper text below select\n * @slot trigger - Custom trigger content (slot type only)\n * \n * @cssproperty --select-border-color - Border color\n * @cssproperty --select-background - Background color\n * @cssproperty --select-text-color - Text color\n * @cssproperty --select-focus-color - Focus indicator color\n * @cssproperty --select-dropdown-shadow - Dropdown shadow\n * @cssproperty --select-dropdown-max-height - Maximum height of dropdown\n * @cssproperty --select-no-options-color - No options message text color\n * @cssproperty --select-no-options-icon-color - No options icon color\n * @cssproperty --select-no-options-padding - Padding for no options message\n * @cssproperty --select-no-options-gap - Gap between icon and text\n * @cssproperty --select-search-border - Search input border\n * @cssproperty --select-search-background - Search input background\n * @cssproperty --select-search-padding - Search input padding\n */\n@customElement('hy-select')\nexport class HySelectComponent extends NuralyUIBaseMixin(LitElement) implements SelectHost {\n static override styles = styles;\n \n override requiredComponents = [ \"nr-input\", \"nr-icon\" ];\n\n /** Array of options to display in the select dropdown */\n @property({ type: Array }) \n options: SelectOption[] = [];\n \n /** Default selected values (for initialization) */\n @property({ type: Array, attribute: 'default-value' }) \n defaultValue: string[] = [];\n \n /** Placeholder text shown when no option is selected */\n @property({ type: String }) \n placeholder: string = 'Select an option';\n \n /** Disables the select component */\n @property({ type: Boolean, reflect: true }) \n disabled: boolean = false;\n \n /** Select display type (default, inline, button, slot) */\n @property({ type: String, reflect: true }) \n type: SelectType = SelectType.Default;\n \n /** Enables multiple option selection */\n @property({ type: Boolean, attribute: 'multiple' }) \n multiple: boolean = false;\n \n /** Controls dropdown visibility */\n @property({ type: Boolean, reflect: true }) \n show: boolean = false;\n \n /** Validation status (default, warning, error, success) */\n @property({ type: String, reflect: true }) \n status: SelectStatus = SelectStatus.Default;\n \n /** Select size (small, medium, large) */\n @property({ type: String, reflect: true }) \n size: SelectSize = SelectSize.Medium;\n \n /** Makes the select required for form validation */\n @property({ type: Boolean, reflect: true }) \n required: boolean = false;\n \n /** Form field name */\n @property({ type: String }) \n name: string = '';\n \n /** Current selected value(s) */\n @property({ type: String }) \n value: string | string[] = '';\n \n /** Message to display when no options are available */\n @property({ type: String, attribute: 'no-options-message' })\n noOptionsMessage: string = 'No options available';\n \n /** Icon to display with the no options message */\n @property({ type: String, attribute: 'no-options-icon' })\n noOptionsIcon: string = 'circle-info';\n \n /** Enable search/filter functionality */\n @property({ type: Boolean, reflect: true })\n searchable: boolean = false;\n \n /** Enable clear button to clear all selections */\n @property({ type: Boolean, reflect: true })\n clearable: boolean = false;\n \n /** Placeholder text for the search input */\n @property({ type: String, attribute: 'search-placeholder' })\n searchPlaceholder: string = 'Search options...';\n \n /** Current search query */\n @property({ type: String })\n searchQuery: string = '';\n\n /** Maximum height of the options dropdown */\n @property({ type: String, attribute: 'max-height' })\n maxHeight: string = '';\n\n /** Options dropdown container element */\n @query('.options') \n optionsElement!: HTMLElement;\n \n /** Main wrapper element */\n @query('.wrapper') \n wrapper!: HTMLElement;\n \n /** Search input element */\n @query('.search-input')\n searchInput?: HTMLInputElement;\n\n /** Handles option selection logic */\n private selectionController = new SelectSelectionController(this);\n \n /** Manages dropdown visibility and positioning */\n private dropdownController = new SelectDropdownController(this);\n \n /** Handles keyboard navigation */\n private keyboardController = new SelectKeyboardController(this, this.selectionController, this.dropdownController);\n \n /** Manages focus states */\n private focusController = new SelectFocusController(this);\n \n /** Handles validation logic */\n private validationController = new SelectValidationController(this, this.selectionController);\n \n /** Handles search/filter functionality */\n private searchController = new SelectSearchController(this);\n \n /** Handles all event management */\n private eventController = new SelectEventController(this);\n\n /**\n * Component connected to DOM - initialize base functionality\n */\n override connectedCallback(): void {\n super.connectedCallback();\n }\n\n /**\n * Component disconnected from DOM - cleanup event listeners\n */\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n\n /**\n * First render complete - setup controllers and initialize state\n */\n override firstUpdated(changedProperties: any): void {\n super.firstUpdated(changedProperties);\n \n // Configure dropdown controller with DOM element references\n if (this.optionsElement && this.wrapper) {\n this.dropdownController.setElements(this.optionsElement, this.wrapper);\n } else {\n // Retry element setup if DOM isn't ready yet\n setTimeout(() => {\n if (this.optionsElement && this.wrapper) {\n this.dropdownController.setElements(this.optionsElement, this.wrapper);\n }\n }, 100);\n }\n\n // Apply default selection if specified\n if (this.defaultValue.length > 0) {\n this.selectionController.initializeFromDefaultValue();\n }\n }\n\n // === Public API Methods ===\n\n /**\n * Gets the currently selected options\n * @returns Array of selected options\n */\n get selectedOptions(): SelectOption[] {\n return this.selectionController.getSelectedOptions();\n }\n\n /**\n * Gets the first selected option (for single selection mode)\n * @returns Selected option or undefined if none selected\n */\n get selectedOption(): SelectOption | undefined {\n return this.selectionController.getSelectedOption();\n }\n\n /**\n * Selects an option programmatically\n * @param option - The option to select\n */\n selectOption(option: SelectOption): void {\n this.selectionController.selectOption(option);\n }\n\n /**\n * Unselects an option programmatically\n * @param option - The option to unselect\n */\n unselectOption(option: SelectOption): void {\n this.selectionController.unselectOption(option);\n }\n\n /**\n * Clears all current selections\n */\n clearSelection(): void {\n this.selectionController.clearSelection();\n }\n\n /**\n * Checks if a specific option is currently selected\n * @param option - The option to check\n * @returns True if the option is selected\n */\n isOptionSelected(option: SelectOption): boolean {\n return this.selectionController.isOptionSelected(option);\n }\n\n /**\n * Toggles the dropdown visibility\n */\n toggleDropdown(): void {\n this.dropdownController.toggle();\n }\n\n /**\n * Opens the dropdown programmatically\n */\n openDropdown(): void {\n this.dropdownController.open();\n }\n\n /**\n * Closes the dropdown programmatically\n */\n closeDropdown(): void {\n this.dropdownController.close();\n }\n\n /**\n * Focuses the select component\n */\n override focus(): void {\n this.focusController.focus();\n }\n\n /**\n * Removes focus from the select component\n */\n override blur(): void {\n this.focusController.blur();\n }\n\n /**\n * Validates the current selection according to component rules\n * @returns True if valid, false otherwise\n */\n validate(): boolean {\n return this.validationController.validate();\n }\n\n /**\n * Checks if the current selection is valid without showing validation UI\n * @returns True if valid, false otherwise\n */\n checkValidity(): boolean {\n return this.validationController.checkValidity();\n }\n\n /**\n * Reports the current validation state and shows validation UI if invalid\n * @returns True if valid, false otherwise\n */\n reportValidity(): boolean {\n return this.validationController.reportValidity();\n }\n\n /**\n * Sets a custom validation message\n * @param message - Custom validation message (empty string to clear)\n */\n setCustomValidity(message: string): void {\n this.validationController.setCustomValidity(message);\n }\n\n /**\n * Searches for options with the given query\n * @param query - Search query string\n */\n searchOptions(query: string): void {\n this.searchController.search(query);\n }\n\n /**\n * Clears the current search query\n */\n clearSearch(): void {\n this.searchController.clearSearch();\n }\n\n /**\n * Gets the filtered options based on current search\n * @returns Array of filtered options\n */\n getSearchFilteredOptions(): SelectOption[] {\n return this.searchController.getFilteredOptions(this.options);\n }\n\n /**\n * Gets the current search query\n * @returns Current search query string\n */\n getCurrentSearchQuery(): string {\n return this.searchController.searchQuery;\n }\n\n /**\n * Manually trigger setup of global event listeners\n */\n setupGlobalEventListeners(): void {\n this.eventController.setupEventListeners();\n }\n\n /**\n * Manually trigger removal of global event listeners\n */\n removeGlobalEventListeners(): void {\n this.eventController.removeEventListeners();\n }\n\n \n /**\n * Handles clicks on the select trigger element\n */\n private handleTriggerClick = (event: Event): void => {\n this.eventController.handleTriggerClick(event);\n };\n\n /**\n * Handles clicks on individual options\n */\n private handleOptionClick = (event: Event, option: SelectOption): void => {\n this.eventController.handleOptionClick(event, option);\n };\n\n /**\n * Handles removal of selected tags in multiple selection mode\n */\n private handleTagRemove = (event: Event, option: SelectOption): void => {\n this.eventController.handleTagRemove(event, option);\n };\n\n /**\n * Handles the clear all selections button\n */\n private handleClearAll = (event: Event): void => {\n this.eventController.handleClearAll(event);\n };\n\n /**\n * Handles keyboard navigation and interactions\n */\n private handleKeyDown = (event: KeyboardEvent): void => {\n this.eventController.handleKeyDown(event);\n };\n\n /**\n * Handles focus events\n */\n private handleFocus = (): void => {\n this.eventController.handleFocus();\n };\n\n /**\n * Handles blur events\n */\n private handleBlur = (): void => {\n this.eventController.handleBlur();\n };\n\n /**\n * Filters options based on search query\n */\n private getFilteredOptions(): SelectOption[] {\n return this.searchController.getFilteredOptions(this.options);\n };\n\n /**\n * Sets up global event listeners (called when dropdown opens)\n */\n public setupEventListeners(): void {\n this.eventController.setupEventListeners();\n }\n\n /**\n * Removes global event listeners (called on disconnect or dropdown close)\n */\n public removeEventListeners(): void {\n this.eventController.removeEventListeners();\n }\n \n /**\n * Main render method that delegates to specific type renderers\n */\n protected override render() {\n return html`${choose(this.type, [\n [SelectType.Default, () => this.renderDefault()],\n [SelectType.Inline, () => this.renderInline()],\n [SelectType.Button, () => this.renderButton()],\n [SelectType.Slot, () => this.renderSlot()],\n ])}`;\n }\n /**\n * Renders the default select appearance with full features\n */\n private renderDefault() {\n const selectedOptions = this.selectedOptions;\n const validationClasses = this.validationController.getValidationClasses();\n \n return html`\n <slot name=\"label\"></slot>\n <div \n class=\"${classMap({\n 'wrapper': true,\n ...validationClasses\n })}\"\n data-theme=\"${this.currentTheme}\"\n tabindex=\"0\"\n role=\"combobox\"\n aria-expanded=\"${this.show}\"\n aria-haspopup=\"listbox\"\n aria-labelledby=\"select-label\"\n\n @click=${this.handleTriggerClick}\n @keydown=${this.handleKeyDown}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n >\n <div class=\"select\">\n <div class=\"select-trigger\">\n ${this.renderSelectedContent(selectedOptions)}\n </div>\n \n <div class=\"icons-container\">\n ${this.renderStatusIcon()}\n ${this.renderClearButton(selectedOptions)}\n <nr-icon \n name=\"angle-down\" \n class=\"arrow-icon\"\n aria-hidden=\"true\"\n ></nr-icon>\n </div>\n \n <div \n class=\"options\"\n role=\"listbox\"\n aria-multiselectable=\"${this.multiple}\"\n style=${this.maxHeight ? styleMap({ 'max-height': this.maxHeight }) : nothing}\n >\n ${this.searchable ? this.renderSearchInput() : nothing}\n ${this.renderSelectOptions()}\n </div>\n </div>\n </div>\n \n ${this.renderValidationMessage()}\n <slot name=\"helper-text\"></slot>\n `;\n }\n\n /**\n * Renders inline select with integrated label and helper text\n */\n private renderInline() {\n return html`\n <slot name=\"label\"></slot>\n ${this.renderDefault()}\n <slot name=\"helper-text\"></slot>\n `;\n }\n\n /**\n * Renders select as a button-style component\n */\n private renderButton() {\n const selectedOptions = this.selectedOptions;\n return html`\n <button\n class=\"select-button\"\n ?disabled=${this.disabled}\n @click=${this.handleTriggerClick}\n @keydown=${this.handleKeyDown}\n >\n ${selectedOptions.length > 0 ? selectedOptions[0].label : this.placeholder}\n <nr-icon name=\"angle-down\" class=\"arrow-icon\"></nr-icon>\n </button>\n \n <div \n class=\"options\" \n role=\"listbox\"\n style=${this.maxHeight ? styleMap({ 'max-height': this.maxHeight }) : nothing}\n >\n ${this.searchable ? this.renderSearchInput() : nothing}\n ${this.renderSelectOptions()}\n </div>\n `;\n }\n\n /**\n * Renders select with custom trigger content via slots\n */\n private renderSlot() {\n return html`\n <slot name=\"trigger\" @click=${this.handleTriggerClick}></slot>\n <div \n class=\"options\" \n role=\"listbox\"\n style=${this.maxHeight ? styleMap({ 'max-height': this.maxHeight }) : nothing}\n >\n ${this.searchable ? this.renderSearchInput() : nothing}\n ${this.renderSelectOptions()}\n </div>\n `;\n }\n\n /**\n * Renders the selected content in the trigger area\n */\n private renderSelectedContent(selectedOptions: SelectOption[]) {\n if (selectedOptions.length === 0) {\n return html`<span class=\"placeholder\" aria-hidden=\"true\">${this.placeholder}</span>`;\n }\n\n if (this.multiple) {\n return map(selectedOptions, (option) => html`\n <span class=\"tag\">\n <span class=\"tag-label\">${option.label}</span>\n <nr-icon \n name=\"remove\"\n class=\"tag-close\"\n @click=${(e: Event) => this.handleTagRemove(e, option)}\n aria-label=\"Remove ${option.label}\"\n ></nr-icon>\n </span>\n `);\n } else {\n return html`${selectedOptions[0].label}`;\n }\n }\n\n /**\n * Renders status/validation icons based on current status\n */\n private renderStatusIcon() {\n switch (this.status) {\n case SelectStatus.Warning:\n return html`<nr-icon name=\"warning\" class=\"status-icon warning\"></nr-icon>`;\n case SelectStatus.Error:\n return html`<nr-icon name=\"exclamation-circle\" class=\"status-icon error\"></nr-icon>`;\n case SelectStatus.Success:\n return html`<nr-icon name=\"check-circle\" class=\"status-icon success\"></nr-icon>`;\n default:\n return nothing;\n }\n }\n\n /**\n * Renders the clear all selections button when applicable\n */\n private renderClearButton(selectedOptions: SelectOption[]) {\n if (!this.clearable || selectedOptions.length === 0 || this.disabled) {\n return nothing;\n }\n\n return html`\n <nr-icon\n name=\"remove\"\n class=\"clear-icon\"\n @click=${this.handleClearAll}\n aria-label=\"Clear selection\"\n tabindex=\"-1\"\n ></nr-icon>\n `;\n }\n\n /**\n * Renders all available options in the dropdown\n */\n private renderSelectOptions() {\n const filteredOptions = this.getFilteredOptions();\n \n // Show \"no options\" message when no options are available (original array empty)\n if (!this.options || this.options.length === 0) {\n return html`\n <div class=\"no-options\" role=\"option\" aria-disabled=\"true\">\n <div class=\"no-options-content\">\n <nr-icon \n name=\"${this.noOptionsIcon}\" \n class=\"no-options-icon\"\n aria-hidden=\"true\">\n </nr-icon>\n <span class=\"no-options-text\">${this.noOptionsMessage}</span>\n </div>\n </div>\n `;\n }\n \n // Show \"no results\" message when search returns no results\n if (this.searchController.hasNoResults(this.options)) {\n return this.searchController.renderNoResults();\n }\n \n // Cache the focused option to avoid multiple controller accesses\n const focusedOption = this.keyboardController.focusedOption;\n \n return map(filteredOptions, (option) => {\n const isSelected = this.isOptionSelected(option);\n const isFocused = focusedOption && focusedOption.value === option.value;\n \n return html`\n <div\n class=\"${classMap({\n 'option': true,\n 'selected': isSelected,\n 'focused': isFocused,\n 'disabled': Boolean(option.disabled)\n })}\"\n role=\"option\"\n aria-selected=\"${isSelected}\"\n aria-disabled=\"${Boolean(option.disabled)}\"\n data-value=\"${option.value}\"\n @click=${(e: Event) => this.handleOptionClick(e, option)}\n style=${styleMap(option.style ? { style: option.style } : {})}\n title=\"${option.title || ''}\"\n >\n <div class=\"option-content\">\n ${option.icon ? html`<nr-icon name=\"${option.icon}\" class=\"option-icon\"></nr-icon>` : nothing}\n <div class=\"option-text\">\n ${option.htmlContent ? html`<div .innerHTML=${option.htmlContent}></div>` : option.label}\n ${option.description ? html`<div class=\"option-description\">${option.description}</div>` : nothing}\n </div>\n </div>\n \n ${isSelected ? html`<nr-icon name=\"check\" class=\"check-icon\" aria-hidden=\"true\"></nr-icon>` : nothing}\n \n ${option.state && option.message ? html`\n <div class=\"option-message ${option.state}\">\n <nr-icon name=\"${option.state === 'error' ? 'exclamation-circle' : 'warning'}\"></nr-icon>\n <span>${option.message}</span>\n </div>\n ` : nothing}\n </div>\n `;\n });\n }\n\n /**\n * Renders the search input when searchable is enabled\n */\n private renderSearchInput() {\n return this.searchController.renderSearchInput();\n }\n\n /**\n * Renders validation message when present\n */\n private renderValidationMessage() {\n const validationMessage = this.validationController.validationMessage;\n if (!validationMessage) return nothing;\n\n return html`\n <div class=\"validation-message ${this.status}\" id=\"validation-message\">\n ${validationMessage}\n </div>\n `;\n }\n}"]}
|
|
1
|
+
{"version":3,"file":"select.component.js","sourceRoot":"","sources":["../../../src/components/select/select.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { styles } from './select.style.js';\nimport { map } from 'lit/directives/map.js';\nimport { choose } from 'lit/directives/choose.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\n\n// Import types\nimport {\n SelectOption,\n SelectType,\n SelectSize,\n SelectStatus\n} from './select.types.js';\n\n// Import controllers\nimport {\n SelectSelectionController,\n SelectKeyboardController,\n SelectDropdownController,\n SelectFocusController,\n SelectValidationController,\n SelectSearchController,\n SelectEventController\n} from './controllers/index.js';\n\n// Import interfaces\nimport { SelectHost } from './interfaces/index.js';\n\n/**\n * Advanced select component with multiple selection modes, validation, and accessibility features.\n * \n * Supports single and multiple selection, custom rendering, validation states, keyboard navigation,\n * and various display types including default, inline, button, and slot-based configurations.\n * \n * @example\n * ```html\n * <!-- Basic select -->\n * <nr-select placeholder=\"Choose an option\">\n * <option value=\"1\">Option 1</option>\n * <option value=\"2\">Option 2</option>\n * </nr-select>\n * \n * <!-- Multiple selection -->\n * <nr-select multiple placeholder=\"Choose multiple options\"></nr-select>\n * \n * <!-- With validation -->\n * <nr-select required status=\"error\"></nr-select>\n * \n * <!-- Button style -->\n * <nr-select type=\"button\"></nr-select>\n * \n * <!-- With search functionality -->\n * <nr-select searchable search-placeholder=\"Search options...\"></nr-select>\n * \n * <!-- With clear button -->\n * <nr-select clearable></nr-select>\n * \n * <!-- Full width block select -->\n * <nr-select block></nr-select>\n * ```\n * \n * @fires nr-change - Selection changed\n * @fires nr-focus - Component focused \n * @fires nr-blur - Component blurred\n * @fires nr-dropdown-open - Dropdown opened\n * @fires nr-dropdown-close - Dropdown closed\n * @fires nr-validation - Validation state changed\n * \n * @slot label - Select label content\n * @slot helper-text - Helper text below select\n * @slot trigger - Custom trigger content (slot type only)\n * @slot selected-display - Custom display for selected values (multi-select only, when use-custom-selected-display is true)\n * \n * @cssproperty --select-border-color - Border color\n * @cssproperty --select-background - Background color\n * @cssproperty --select-text-color - Text color\n * @cssproperty --select-focus-color - Focus indicator color\n * @cssproperty --select-dropdown-shadow - Dropdown shadow\n * @cssproperty --select-dropdown-max-height - Maximum height of dropdown\n * @cssproperty --select-no-options-color - No options message text color\n * @cssproperty --select-no-options-icon-color - No options icon color\n * @cssproperty --select-no-options-padding - Padding for no options message\n * @cssproperty --select-no-options-gap - Gap between icon and text\n * @cssproperty --select-search-border - Search input border\n * @cssproperty --select-search-background - Search input background\n * @cssproperty --select-search-padding - Search input padding\n */\n@customElement('nr-select')\nexport class HySelectComponent extends NuralyUIBaseMixin(LitElement) implements SelectHost {\n static override styles = styles;\n \n override requiredComponents = [ \"nr-input\", \"nr-icon\" ];\n\n /** Array of options to display in the select dropdown */\n @property({ type: Array }) \n options: SelectOption[] = [];\n \n /** Placeholder text shown when no option is selected */\n @property({ type: String }) \n placeholder: string = 'Select an option';\n \n /** Disables the select component */\n @property({ type: Boolean, reflect: true }) \n disabled: boolean = false;\n \n /** Select display type (default, inline, button, slot) */\n @property({ type: String, reflect: true }) \n type: SelectType = SelectType.Default;\n \n /** Enables multiple option selection */\n @property({ type: Boolean, attribute: 'multiple' }) \n multiple: boolean = false;\n \n /** Controls dropdown visibility */\n @property({ type: Boolean, reflect: true }) \n show: boolean = false;\n \n /** Validation status (default, warning, error, success) */\n @property({ type: String, reflect: true }) \n status: SelectStatus = SelectStatus.Default;\n \n /** Select size (small, medium, large) */\n @property({ type: String, reflect: true }) \n size: SelectSize = SelectSize.Medium;\n \n /** Makes the select required for form validation */\n @property({ type: Boolean, reflect: true }) \n required: boolean = false;\n \n /** Form field name */\n @property({ type: String }) \n name: string = '';\n \n /** Current selected value(s) */\n @property() \n value: string | string[] = '';\n \n /** Message to display when no options are available */\n @property({ type: String, attribute: 'no-options-message' })\n noOptionsMessage: string = 'No options available';\n \n /** Icon to display with the no options message */\n @property({ type: String, attribute: 'no-options-icon' })\n noOptionsIcon: string = 'circle-info';\n \n /** Enable search/filter functionality */\n @property({ type: Boolean, reflect: true })\n searchable: boolean = false;\n \n /** Enable clear button to clear all selections */\n @property({ type: Boolean, reflect: true })\n clearable: boolean = false;\n \n /** Placeholder text for the search input */\n @property({ type: String, attribute: 'search-placeholder' })\n searchPlaceholder: string = 'Search options...';\n \n /** Current search query */\n @property({ type: String })\n searchQuery: string = '';\n\n /** Enable custom selected display slot */\n @property({ type: Boolean, attribute: 'use-custom-selected-display' })\n useCustomSelectedDisplay: boolean = false;\n\n /** Maximum height of the options dropdown */\n @property({ type: String, attribute: 'max-height' })\n maxHeight: string = '';\n\n /** Makes select full width */\n @property({ type: Boolean, reflect: true })\n block: boolean = false;\n\n /** Options dropdown container element */\n @query('.options') \n optionsElement!: HTMLElement;\n \n /** Main wrapper element */\n @query('.wrapper') \n wrapper!: HTMLElement;\n \n /** Search input element */\n @query('.search-input')\n searchInput?: HTMLInputElement;\n\n /** Handles option selection logic */\n private selectionController = new SelectSelectionController(this);\n \n /** Manages dropdown visibility and positioning */\n private dropdownController = new SelectDropdownController(this);\n \n /** Handles keyboard navigation */\n private keyboardController = new SelectKeyboardController(this, this.selectionController, this.dropdownController);\n \n /** Manages focus states */\n private focusController = new SelectFocusController(this);\n \n /** Handles validation logic */\n private validationController = new SelectValidationController(this, this.selectionController);\n \n /** Handles search/filter functionality */\n private searchController = new SelectSearchController(this);\n \n /** Handles all event management */\n private eventController = new SelectEventController(this);\n\n /**\n * Component connected to DOM - initialize base functionality\n */\n override connectedCallback(): void {\n super.connectedCallback();\n }\n\n /**\n * Component disconnected from DOM - cleanup event listeners\n */\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n }\n\n /**\n * Called before update to handle property changes\n */\n override willUpdate(changedProperties: Map<string, any>): void {\n super.willUpdate(changedProperties);\n \n // If options or value changed, reinitialize selection\n if ((changedProperties.has('options') || changedProperties.has('value')) && \n this.options.length > 0 && \n this.value && \n (Array.isArray(this.value) ? this.value.length > 0 : this.value !== '')) {\n // Reset initialization flag to allow reinit\n (this.selectionController as any)._initialized = false;\n this.selectionController.initializeFromValue();\n }\n }\n\n /**\n * First render complete - setup controllers and initialize state\n */\n override firstUpdated(changedProperties: any): void {\n super.firstUpdated(changedProperties);\n \n // Configure dropdown controller with DOM element references\n if (this.optionsElement && this.wrapper) {\n this.dropdownController.setElements(this.optionsElement, this.wrapper);\n } else {\n // Retry element setup if DOM isn't ready yet\n setTimeout(() => {\n if (this.optionsElement && this.wrapper) {\n this.dropdownController.setElements(this.optionsElement, this.wrapper);\n }\n }, 100);\n }\n\n // Apply default selection if specified\n if (this.value && (Array.isArray(this.value) ? this.value.length > 0 : this.value !== '')) {\n this.selectionController.initializeFromValue();\n }\n }\n\n // === Public API Methods ===\n\n /**\n * Gets the currently selected options\n * @returns Array of selected options\n */\n get selectedOptions(): SelectOption[] {\n return this.selectionController.getSelectedOptions();\n }\n\n /**\n * Gets the first selected option (for single selection mode)\n * @returns Selected option or undefined if none selected\n */\n get selectedOption(): SelectOption | undefined {\n return this.selectionController.getSelectedOption();\n }\n\n /**\n * Selects an option programmatically\n * @param option - The option to select\n */\n selectOption(option: SelectOption): void {\n this.selectionController.selectOption(option);\n }\n\n /**\n * Unselects an option programmatically\n * @param option - The option to unselect\n */\n unselectOption(option: SelectOption): void {\n this.selectionController.unselectOption(option);\n }\n\n /**\n * Toggles an option's selection state\n * @param option - The option to toggle\n */\n toggleOption(option: SelectOption): void {\n this.selectionController.toggleOption(option);\n }\n\n /**\n * Clears all current selections\n */\n clearSelection(): void {\n this.selectionController.clearSelection();\n }\n\n /**\n * Checks if a specific option is currently selected\n * @param option - The option to check\n * @returns True if the option is selected\n */\n isOptionSelected(option: SelectOption): boolean {\n return this.selectionController.isOptionSelected(option);\n }\n\n /**\n * Toggles the dropdown visibility\n */\n toggleDropdown(): void {\n this.dropdownController.toggle();\n }\n\n /**\n * Opens the dropdown programmatically\n */\n openDropdown(): void {\n this.dropdownController.open();\n }\n\n /**\n * Closes the dropdown programmatically\n */\n closeDropdown(): void {\n this.dropdownController.close();\n }\n\n /**\n * Focuses the select component\n */\n override focus(): void {\n this.focusController.focus();\n }\n\n /**\n * Removes focus from the select component\n */\n override blur(): void {\n this.focusController.blur();\n }\n\n /**\n * Validates the current selection according to component rules\n * @returns True if valid, false otherwise\n */\n validate(): boolean {\n return this.validationController.validate();\n }\n\n /**\n * Checks if the current selection is valid without showing validation UI\n * @returns True if valid, false otherwise\n */\n checkValidity(): boolean {\n return this.validationController.checkValidity();\n }\n\n /**\n * Reports the current validation state and shows validation UI if invalid\n * @returns True if valid, false otherwise\n */\n reportValidity(): boolean {\n return this.validationController.reportValidity();\n }\n\n /**\n * Sets a custom validation message\n * @param message - Custom validation message (empty string to clear)\n */\n setCustomValidity(message: string): void {\n this.validationController.setCustomValidity(message);\n }\n\n /**\n * Searches for options with the given query\n * @param query - Search query string\n */\n searchOptions(query: string): void {\n this.searchController.search(query);\n }\n\n /**\n * Clears the current search query\n */\n clearSearch(): void {\n this.searchController.clearSearch();\n }\n\n /**\n * Gets the filtered options based on current search\n * @returns Array of filtered options\n */\n getSearchFilteredOptions(): SelectOption[] {\n return this.searchController.getFilteredOptions(this.options);\n }\n\n /**\n * Gets the current search query\n * @returns Current search query string\n */\n getCurrentSearchQuery(): string {\n return this.searchController.searchQuery;\n }\n\n /**\n * Gets the currently selected options\n * @returns Array of selected option objects\n */\n getSelectedOptions(): SelectOption[] {\n return this.selectedOptions;\n }\n\n /**\n * Manually trigger setup of global event listeners\n */\n setupGlobalEventListeners(): void {\n this.eventController.setupEventListeners();\n }\n\n /**\n * Manually trigger removal of global event listeners\n */\n removeGlobalEventListeners(): void {\n this.eventController.removeEventListeners();\n }\n\n \n /**\n * Handles clicks on the select trigger element\n */\n private handleTriggerClick = (event: Event): void => {\n this.eventController.handleTriggerClick(event);\n };\n\n /**\n * Handles clicks on individual options\n */\n private handleOptionClick = (event: Event, option: SelectOption): void => {\n this.eventController.handleOptionClick(event, option);\n };\n\n /**\n * Handles removal of selected tags in multiple selection mode\n */\n private handleTagRemove = (event: Event, option: SelectOption): void => {\n this.eventController.handleTagRemove(event, option);\n };\n\n /**\n * Handles the clear all selections button\n */\n private handleClearAll = (event: Event): void => {\n this.eventController.handleClearAll(event);\n };\n\n /**\n * Handles keyboard navigation and interactions\n */\n private handleKeyDown = (event: KeyboardEvent): void => {\n this.eventController.handleKeyDown(event);\n };\n\n /**\n * Handles focus events\n */\n private handleFocus = (): void => {\n this.eventController.handleFocus();\n };\n\n /**\n * Handles blur events\n */\n private handleBlur = (): void => {\n this.eventController.handleBlur();\n };\n\n /**\n * Filters options based on search query\n */\n private getFilteredOptions(): SelectOption[] {\n return this.searchController.getFilteredOptions(this.options);\n };\n\n /**\n * Sets up global event listeners (called when dropdown opens)\n */\n public setupEventListeners(): void {\n this.eventController.setupEventListeners();\n }\n\n /**\n * Removes global event listeners (called on disconnect or dropdown close)\n */\n public removeEventListeners(): void {\n this.eventController.removeEventListeners();\n }\n \n /**\n * Main render method that delegates to specific type renderers\n */\n protected override render() {\n return html`${choose(this.type, [\n [SelectType.Default, () => this.renderDefault()],\n [SelectType.Inline, () => this.renderInline()],\n [SelectType.Button, () => this.renderButton()],\n [SelectType.Slot, () => this.renderSlot()],\n ])}`;\n }\n /**\n * Renders the default select appearance with full features\n */\n private renderDefault() {\n const selectedOptions = this.selectedOptions;\n const validationClasses = this.validationController.getValidationClasses();\n \n return html`\n <slot name=\"label\"></slot>\n <div \n class=\"${classMap({\n 'wrapper': true,\n ...validationClasses\n })}\"\n data-theme=\"${this.currentTheme}\"\n tabindex=\"0\"\n role=\"combobox\"\n aria-expanded=\"${this.show}\"\n aria-haspopup=\"listbox\"\n aria-labelledby=\"select-label\"\n\n @click=${this.handleTriggerClick}\n @keydown=${this.handleKeyDown}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n >\n <div class=\"select\">\n <div class=\"select-trigger\">\n ${this.renderSelectedContent(selectedOptions)}\n </div>\n \n <div class=\"icons-container\">\n ${this.renderStatusIcon()}\n ${this.renderClearButton(selectedOptions)}\n <nr-icon \n name=\"angle-down\" \n size=\"${this.size}\"\n class=\"arrow-icon\"\n aria-hidden=\"true\"\n ></nr-icon>\n </div>\n \n <div \n class=\"options\"\n role=\"listbox\"\n aria-multiselectable=\"${this.multiple}\"\n style=${this.maxHeight ? styleMap({ 'max-height': this.maxHeight }) : nothing}\n >\n ${this.searchable ? this.renderSearchInput() : nothing}\n ${this.renderSelectOptions()}\n </div>\n </div>\n </div>\n \n ${this.renderValidationMessage()}\n <slot name=\"helper-text\"></slot>\n `;\n }\n\n /**\n * Renders inline select with integrated label and helper text\n */\n private renderInline() {\n return html`\n <slot name=\"label\"></slot>\n ${this.renderDefault()}\n <slot name=\"helper-text\"></slot>\n `;\n }\n\n /**\n * Renders select as a button-style component\n */\n private renderButton() {\n const selectedOptions = this.selectedOptions;\n return html`\n <button\n class=\"select-button\"\n ?disabled=${this.disabled}\n @click=${this.handleTriggerClick}\n @keydown=${this.handleKeyDown}\n >\n ${selectedOptions.length > 0 ? selectedOptions[0].label : this.placeholder}\n <nr-icon name=\"angle-down\" class=\"arrow-icon\"></nr-icon>\n </button>\n \n <div \n class=\"options\" \n role=\"listbox\"\n style=${this.maxHeight ? styleMap({ 'max-height': this.maxHeight }) : nothing}\n >\n ${this.searchable ? this.renderSearchInput() : nothing}\n ${this.renderSelectOptions()}\n </div>\n `;\n }\n\n /**\n * Renders select with custom trigger content via slots\n */\n private renderSlot() {\n return html`\n <slot name=\"trigger\" @click=${this.handleTriggerClick}></slot>\n <div \n class=\"options\" \n role=\"listbox\"\n style=${this.maxHeight ? styleMap({ 'max-height': this.maxHeight }) : nothing}\n >\n ${this.searchable ? this.renderSearchInput() : nothing}\n ${this.renderSelectOptions()}\n </div>\n `;\n }\n\n /**\n * Renders the selected content in the trigger area\n */\n private renderSelectedContent(selectedOptions: SelectOption[]) {\n if (selectedOptions.length === 0) {\n return html`<span class=\"placeholder\" aria-hidden=\"true\">${this.placeholder}</span>`;\n }\n\n if (this.multiple) {\n // Check if custom display slot should be used\n if (this.useCustomSelectedDisplay) {\n return html`<slot name=\"selected-display\" .selectedOptions=${selectedOptions}></slot>`;\n }\n \n // Default behavior: render tags\n return map(selectedOptions, (option) => html`\n <span class=\"tag\">\n <span class=\"tag-label\">${option.label}</span>\n <nr-icon \n name=\"remove\"\n size=\"${this.size}\"\n class=\"tag-close\"\n @click=${(e: Event) => this.handleTagRemove(e, option)}\n aria-label=\"Remove ${option.label}\"\n ></nr-icon>\n </span>\n `);\n } else {\n return html`${selectedOptions[0].label}`;\n }\n }\n\n /**\n * Renders status/validation icons based on current status\n */\n private renderStatusIcon() {\n switch (this.status) {\n case SelectStatus.Warning:\n return html`<nr-icon name=\"warning\" size=\"${this.size}\" class=\"status-icon warning\"></nr-icon>`;\n case SelectStatus.Error:\n return html`<nr-icon name=\"exclamation-circle\" size=\"${this.size}\" class=\"status-icon error\"></nr-icon>`;\n case SelectStatus.Success:\n return html`<nr-icon name=\"check-circle\" size=\"${this.size}\" class=\"status-icon success\"></nr-icon>`;\n default:\n return nothing;\n }\n }\n\n /**\n * Renders the clear all selections button when applicable\n */\n private renderClearButton(selectedOptions: SelectOption[]) {\n if (!this.clearable || selectedOptions.length === 0 || this.disabled) {\n return nothing;\n }\n\n return html`\n <nr-icon\n name=\"remove\"\n size=\"${this.size}\"\n class=\"clear-icon\"\n @click=${this.handleClearAll}\n aria-label=\"Clear selection\"\n tabindex=\"-1\"\n ></nr-icon>\n `;\n }\n\n /**\n * Renders all available options in the dropdown\n */\n private renderSelectOptions() {\n const filteredOptions = this.getFilteredOptions();\n \n // Show \"no options\" message when no options are available (original array empty)\n if (!this.options || this.options.length === 0) {\n return html`\n <div class=\"no-options\" role=\"option\" aria-disabled=\"true\">\n <div class=\"no-options-content\">\n <nr-icon \n name=\"${this.noOptionsIcon}\" \n class=\"no-options-icon\"\n aria-hidden=\"true\">\n </nr-icon>\n <span class=\"no-options-text\">${this.noOptionsMessage}</span>\n </div>\n </div>\n `;\n }\n \n // Show \"no results\" message when search returns no results\n if (this.searchController.hasNoResults(this.options)) {\n return this.searchController.renderNoResults();\n }\n \n // Cache the focused option to avoid multiple controller accesses\n const focusedOption = this.keyboardController.focusedOption;\n \n return map(filteredOptions, (option) => {\n const isSelected = this.isOptionSelected(option);\n const isFocused = focusedOption && focusedOption.value === option.value;\n \n return html`\n <div\n class=\"${classMap({\n 'option': true,\n 'selected': isSelected,\n 'focused': isFocused,\n 'disabled': Boolean(option.disabled)\n })}\"\n role=\"option\"\n aria-selected=\"${isSelected}\"\n aria-disabled=\"${Boolean(option.disabled)}\"\n data-value=\"${option.value}\"\n @click=${(e: Event) => this.handleOptionClick(e, option)}\n style=${styleMap(option.style ? { style: option.style } : {})}\n title=\"${option.title || ''}\"\n >\n <div class=\"option-content\">\n ${option.icon ? html`<nr-icon name=\"${option.icon}\" size=\"${this.size}\" class=\"option-icon\"></nr-icon>` : nothing}\n <div class=\"option-text\">\n ${option.htmlContent ? html`<div .innerHTML=${option.htmlContent}></div>` : option.label}\n ${option.description ? html`<div class=\"option-description\">${option.description}</div>` : nothing}\n </div>\n </div>\n \n ${isSelected ? html`<nr-icon name=\"check\" size=\"${this.size}\" class=\"check-icon\" aria-hidden=\"true\"></nr-icon>` : nothing}\n \n ${option.state && option.message ? html`\n <div class=\"option-message ${option.state}\">\n <nr-icon name=\"${option.state === 'error' ? 'exclamation-circle' : 'warning'}\" size=\"${this.size}\"></nr-icon>\n <span>${option.message}</span>\n </div>\n ` : nothing}\n </div>\n `;\n });\n }\n\n /**\n * Renders the search input when searchable is enabled\n */\n private renderSearchInput() {\n return this.searchController.renderSearchInput();\n }\n\n /**\n * Renders validation message when present\n */\n private renderValidationMessage() {\n const validationMessage = this.validationController.validationMessage;\n if (!validationMessage) return nothing;\n\n return html`\n <div class=\"validation-message ${this.status}\" id=\"validation-message\">\n ${validationMessage}\n </div>\n `;\n }\n}"]}
|
package/select.style.js
CHANGED
|
@@ -2,7 +2,6 @@ import { css } from 'lit';
|
|
|
2
2
|
export const styles = css `
|
|
3
3
|
:host {
|
|
4
4
|
/* Layout and sizing */
|
|
5
|
-
--nuraly-select-local-width: 300px;
|
|
6
5
|
--nuraly-select-local-min-height: 40px;
|
|
7
6
|
--nuraly-select-local-padding-top: 8px;
|
|
8
7
|
--nuraly-select-local-padding-bottom: 8px;
|
|
@@ -15,6 +14,7 @@ export const styles = css `
|
|
|
15
14
|
/* Dropdown settings */
|
|
16
15
|
--nuraly-select-local-dropdown-z-index: 9999;
|
|
17
16
|
--nuraly-select-local-dropdown-max-height: 200px;
|
|
17
|
+
--nuraly-select-local-dropdown-width: max-content; /* Default to auto-size to content */
|
|
18
18
|
--nuraly-select-local-placeholder-font-size: 14px;
|
|
19
19
|
--nuraly-select-local-option-font-size: 14px;
|
|
20
20
|
|
|
@@ -61,12 +61,13 @@ export const styles = css `
|
|
|
61
61
|
|
|
62
62
|
/* Size variants */
|
|
63
63
|
:host([size='small']) .wrapper {
|
|
64
|
-
|
|
64
|
+
height: var(--nuraly-select-small-height, 24px);
|
|
65
|
+
min-height: var(--nuraly-select-small-height, 24px);
|
|
65
66
|
font-size: var(--nuraly-select-small-font-size, var(--nuraly-select-local-small-font-size));
|
|
66
67
|
}
|
|
67
68
|
|
|
68
69
|
:host([size='small']) .select-trigger {
|
|
69
|
-
padding: var(--nuraly-select-small-padding,
|
|
70
|
+
padding: var(--nuraly-select-small-padding, 2px 8px);
|
|
70
71
|
padding-right: calc(var(--nuraly-select-icon-size, 16px) + 20px);
|
|
71
72
|
}
|
|
72
73
|
|
|
@@ -114,6 +115,15 @@ export const styles = css `
|
|
|
114
115
|
flex: 1;
|
|
115
116
|
}
|
|
116
117
|
|
|
118
|
+
/* Block (full width) */
|
|
119
|
+
:host([block]) {
|
|
120
|
+
width: 100%;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
:host([block]) .wrapper {
|
|
124
|
+
width: 100%;
|
|
125
|
+
}
|
|
126
|
+
|
|
117
127
|
/* Show dropdown */
|
|
118
128
|
:host([show]) .options {
|
|
119
129
|
display: flex !important;
|
|
@@ -122,7 +132,7 @@ export const styles = css `
|
|
|
122
132
|
/* Main wrapper container */
|
|
123
133
|
.wrapper {
|
|
124
134
|
position: relative;
|
|
125
|
-
width: var(--nuraly-select-width,
|
|
135
|
+
width: var(--nuraly-select-width, fit-content);
|
|
126
136
|
background-color: var(--nuraly-select-background-color, #ffffff);
|
|
127
137
|
border: var(--nuraly-select-border-width, var(--nuraly-select-local-border-width)) solid
|
|
128
138
|
var(--nuraly-select-border-color, #d9d9d9);
|
|
@@ -133,6 +143,9 @@ export const styles = css `
|
|
|
133
143
|
outline: none;
|
|
134
144
|
margin: var(--nuraly-select-wrapper-margin, 0);
|
|
135
145
|
min-height: var(--nuraly-select-min-height, var(--nuraly-select-local-min-height));
|
|
146
|
+
box-sizing: border-box;
|
|
147
|
+
display: flex;
|
|
148
|
+
align-items: center;
|
|
136
149
|
/* Ensure dropdown can overflow the wrapper */
|
|
137
150
|
overflow: visible;
|
|
138
151
|
}
|
|
@@ -165,9 +178,11 @@ export const styles = css `
|
|
|
165
178
|
font-size: inherit;
|
|
166
179
|
line-height: inherit;
|
|
167
180
|
word-break: break-word;
|
|
168
|
-
|
|
181
|
+
flex: 1;
|
|
182
|
+
min-height: 0;
|
|
169
183
|
flex-wrap: wrap;
|
|
170
184
|
gap: var(--nuraly-select-tag-margin, var(--nuraly-select-local-tag-margin));
|
|
185
|
+
box-sizing: border-box;
|
|
171
186
|
}
|
|
172
187
|
|
|
173
188
|
.select-trigger:empty:before {
|
|
@@ -267,7 +282,12 @@ export const styles = css `
|
|
|
267
282
|
animation: dropdown-enter var(--nuraly-select-dropdown-animation-duration, 0.15s) ease-out;
|
|
268
283
|
/* Ensure proper containment and exact wrapper width */
|
|
269
284
|
box-sizing: border-box;
|
|
270
|
-
width
|
|
285
|
+
/* Allow overriding width via either of these custom props */
|
|
286
|
+
width: var(
|
|
287
|
+
--nuraly-select-dropdown-width,
|
|
288
|
+
var(--select-dropdown-width, var(--nuraly-select-local-dropdown-width))
|
|
289
|
+
);
|
|
290
|
+
min-width: 100%; /* Ensure dropdown is at least as wide as the wrapper */
|
|
271
291
|
/* Create new stacking context to prevent layering issues */
|
|
272
292
|
isolation: isolate;
|
|
273
293
|
/* Ensure solid background to prevent visual bleed-through */
|
package/select.style.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.style.js","sourceRoot":"","sources":["../../../src/components/select/select.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqfxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n /* Layout and sizing */\n --nuraly-select-local-width: 300px;\n --nuraly-select-local-min-height: 40px;\n --nuraly-select-local-padding-top: 8px;\n --nuraly-select-local-padding-bottom: 8px;\n --nuraly-select-local-padding-left: 12px;\n --nuraly-select-local-padding-right: 12px;\n --nuraly-select-local-wrapper-margin: 0;\n --nuraly-select-local-border-radius: 6px;\n --nuraly-select-local-border-width: 1px;\n \n /* Dropdown settings */\n --nuraly-select-local-dropdown-z-index: 9999;\n --nuraly-select-local-dropdown-max-height: 200px;\n --nuraly-select-local-placeholder-font-size: 14px;\n --nuraly-select-local-option-font-size: 14px;\n \n /* Sizes */\n --nuraly-select-local-medium-height: 40px;\n --nuraly-select-local-medium-font-size: 14px;\n --nuraly-select-local-medium-padding: 8px 12px;\n --nuraly-select-local-small-font-size: 12px;\n \n /* Animation and transitions */\n --nuraly-select-local-dropdown-animation-duration: 0.15s;\n \n /* Multi-select specific */\n --nuraly-select-local-tag-border-radius: 4px;\n --nuraly-select-local-tag-padding: 2px 6px;\n --nuraly-select-local-tag-margin: 2px;\n \n /* Validation message */\n --nuraly-select-local-message-font-size: 12px;\n --nuraly-select-local-message-margin-top: 4px;\n }\n\n :host {\n width: fit-content;\n display: block;\n font-family: var(--nuraly-select-font-family, Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif);\n font-size: var(--nuraly-select-font-size, 14px);\n line-height: var(--nuraly-select-line-height, 1.5);\n margin: var(--nuraly-select-margin, var(--nuraly-select-local-wrapper-margin));\n }\n\n /* Host attribute selectors for configuration */\n :host([disabled]) {\n opacity: var(--nuraly-select-disabled-opacity, 0.5);\n pointer-events: none;\n }\n\n :host([disabled]) .wrapper {\n background-color: var(--nuraly-select-disabled-background, #f9fafb);\n border-color: var(--nuraly-select-disabled-border-color, #d9d9d9);\n color: var(--nuraly-select-disabled-text-color, #8c8c8c);\n cursor: not-allowed;\n }\n\n /* Size variants */\n :host([size='small']) .wrapper {\n min-height: var(--nuraly-select-small-height, 32px);\n font-size: var(--nuraly-select-small-font-size, var(--nuraly-select-local-small-font-size));\n }\n\n :host([size='small']) .select-trigger {\n padding: var(--nuraly-select-small-padding, 4px 8px);\n padding-right: calc(var(--nuraly-select-icon-size, 16px) + 20px);\n }\n\n :host([size='medium']) .wrapper {\n min-height: var(--nuraly-select-medium-height, var(--nuraly-select-local-medium-height));\n font-size: var(--nuraly-select-medium-font-size, var(--nuraly-select-local-medium-font-size));\n }\n\n :host([size='medium']) .select-trigger {\n padding: var(--nuraly-select-medium-padding, var(--nuraly-select-local-medium-padding));\n padding-right: calc(var(--nuraly-select-icon-size, 16px) + 20px);\n }\n\n :host([size='large']) .wrapper {\n min-height: var(--nuraly-select-large-height, 48px);\n font-size: var(--nuraly-select-large-font-size, 16px);\n }\n\n :host([size='large']) .select-trigger {\n padding: var(--nuraly-select-large-padding, 12px 16px);\n padding-right: calc(var(--nuraly-select-icon-size, 16px) + 20px);\n }\n\n /* Status variants */\n :host([status='error']) .wrapper {\n border-color: var(--nuraly-select-error-border-color, #ef4444);\n }\n\n :host([status='warning']) .wrapper {\n border-color: var(--nuraly-select-warning-border-color, #f59e0b);\n }\n\n :host([status='success']) .wrapper {\n border-color: var(--nuraly-select-success-border-color, #10b981);\n }\n\n /* Type variants */\n :host([type='inline']) {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n :host([type='inline']) .wrapper {\n flex: 1;\n }\n\n /* Show dropdown */\n :host([show]) .options {\n display: flex !important;\n }\n\n /* Main wrapper container */\n .wrapper {\n position: relative;\n width: var(--nuraly-select-width, var(--nuraly-select-local-width));\n background-color: var(--nuraly-select-background-color, #ffffff);\n border: var(--nuraly-select-border-width, var(--nuraly-select-local-border-width)) solid \n var(--nuraly-select-border-color, #d9d9d9);\n border-radius: var(--nuraly-select-border-radius, var(--nuraly-select-local-border-radius));\n transition: all var(--nuraly-select-transition-duration, 0.2s) \n var(--nuraly-select-transition-timing, ease-in-out);\n cursor: pointer;\n outline: none;\n margin: var(--nuraly-select-wrapper-margin, 0);\n min-height: var(--nuraly-select-min-height, var(--nuraly-select-local-min-height));\n /* Ensure dropdown can overflow the wrapper */\n overflow: visible;\n }\n\n .wrapper:hover:not(:disabled) {\n border-color: var(--nuraly-select-border-hover, #7c3aed);\n }\n\n .wrapper:focus,\n .wrapper:focus-within {\n border-color: var(--nuraly-select-border-focus, #7c3aed);\n box-shadow: 0 0 0 2px var(--nuraly-select-focus-outline, rgba(124, 58, 237, 0.2));\n }\n\n /* Select container */\n .select {\n display: flex;\n flex-direction: column;\n }\n\n /* Select trigger (main display area) */\n .select-trigger {\n display: flex;\n align-items: center;\n padding: var(--nuraly-select-padding-top, var(--nuraly-select-local-padding-top)) \n calc(var(--nuraly-select-icon-size, 16px) + 20px) \n var(--nuraly-select-padding-bottom, var(--nuraly-select-local-padding-bottom)) \n var(--nuraly-select-padding-left, var(--nuraly-select-local-padding-left));\n color: var(--nuraly-select-text-color, #262626);\n font-size: inherit;\n line-height: inherit;\n word-break: break-word;\n min-height: inherit;\n flex-wrap: wrap;\n gap: var(--nuraly-select-tag-margin, var(--nuraly-select-local-tag-margin));\n }\n\n .select-trigger:empty:before {\n content: attr(data-placeholder);\n color: var(--nuraly-select-placeholder-color, #8c8c8c);\n font-size: var(--nuraly-select-placeholder-font-size, var(--nuraly-select-local-placeholder-font-size));\n }\n\n /* Multi-select tags */\n .tag {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n background-color: var(--nuraly-select-tag-background, var(--nuraly-select-local-tag-background));\n color: var(--nuraly-select-tag-color, var(--nuraly-select-local-tag-color));\n padding: var(--nuraly-select-tag-padding, var(--nuraly-select-local-tag-padding));\n border-radius: var(--nuraly-select-tag-border-radius, var(--nuraly-select-local-tag-border-radius));\n font-size: calc(var(--nuraly-select-font-size, var(--nuraly-select-local-font-size)) - 1px);\n max-width: 100%;\n }\n\n .tag-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .tag-close {\n color: var(--nuraly-select-tag-close-color, var(--nuraly-select-local-tag-close-color));\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n height: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n border-radius: 50%;\n transition: color var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));\n }\n\n .tag-close:hover {\n color: var(--nuraly-select-tag-close-hover-color, var(--nuraly-select-local-tag-close-hover-color));\n }\n\n /* Icons container */\n .icons-container {\n position: absolute;\n top: 50%;\n right: 12px;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n gap: 4px;\n pointer-events: none;\n }\n\n .icons-container nr-icon {\n --nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n --nuraly-icon-color: var(--nuraly-select-icon-color, var(--nuraly-select-local-icon-color));\n pointer-events: auto;\n cursor: pointer;\n transition: color var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));\n }\n\n .icons-container nr-icon:hover {\n --nuraly-icon-color: var(--nuraly-select-icon-hover-color, var(--nuraly-select-local-icon-hover-color));\n }\n\n .arrow-icon {\n --nuraly-icon-width: var(--nuraly-select-arrow-icon-size, var(--nuraly-select-local-arrow-icon-size));\n transition: transform var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));\n pointer-events: none !important;\n }\n\n :host([show]) .arrow-icon {\n transform: rotate(180deg);\n }\n\n /* Dropdown options */\n .options {\n /* Default positioning - will be overridden by controller when opened */\n position: absolute;\n top: 100%;\n margin-top: 1px;\n left: 0;\n right: 0;\n background-color: var(--nuraly-select-dropdown-background, #ffffff);\n border: var(--nuraly-select-dropdown-border-width, var(--nuraly-select-border-width, 1px)) solid \n var(--nuraly-select-dropdown-border-color, #d9d9d9);\n border-radius: var(--nuraly-select-dropdown-border-radius, var(--nuraly-select-border-radius, 6px));\n box-shadow: var(--nuraly-select-dropdown-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08));\n z-index: var(--nuraly-select-dropdown-z-index, 9999);\n max-height: var(--nuraly-select-dropdown-max-height, 200px);\n overflow-y: auto;\n overflow-x: hidden;\n display: none;\n flex-direction: column;\n animation: dropdown-enter var(--nuraly-select-dropdown-animation-duration, 0.15s) ease-out;\n /* Ensure proper containment and exact wrapper width */\n box-sizing: border-box;\n width: 100%;\n /* Create new stacking context to prevent layering issues */\n isolation: isolate;\n /* Ensure solid background to prevent visual bleed-through */\n backdrop-filter: none;\n -webkit-backdrop-filter: none;\n /* Force above other elements */\n transform: translateZ(0);\n }\n\n .options.placement-top {\n top: auto;\n bottom: 100%;\n margin-bottom: 1px;\n margin-top: 0;\n animation: dropdown-enter-top var(--nuraly-select-dropdown-animation-duration, var(--nuraly-select-local-dropdown-animation-duration)) ease-out;\n }\n\n @keyframes dropdown-enter {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes dropdown-enter-top {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n /* Search container - sticky at top of dropdown */\n .search-container {\n position: sticky;\n top: 0;\n z-index: 10;\n background-color: var(--nuraly-select-dropdown-background, #ffffff);\n border-bottom: var(--nuraly-select-border-width, 1px) solid \n var(--nuraly-select-dropdown-border-color, #d9d9d9);\n padding: 8px;\n margin: 0;\n /* Ensure it stays above options during scroll */\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n /* Ensure proper stacking and smooth scrolling */\n will-change: transform;\n transform: translateZ(0);\n }\n\n /* Search input styling */\n .search-container .search-input {\n width: 100%;\n --nuraly-input-border-radius: var(--nuraly-select-border-radius, var(--nuraly-select-local-border-radius));\n --nuraly-input-background-color: var(--nuraly-select-background-color, var(--nuraly-select-local-background-color));\n --nuraly-input-border-color: var(--nuraly-select-border-color, var(--nuraly-select-local-border-color));\n --nuraly-input-text-color: var(--nuraly-select-text-color, var(--nuraly-select-local-text-color));\n --nuraly-input-placeholder-color: var(--nuraly-select-placeholder-color, var(--nuraly-select-local-placeholder-color));\n }\n\n /* Search icon in the search input */\n .search-container .search-icon {\n --nuraly-icon-color: var(--nuraly-select-icon-color, var(--nuraly-select-local-icon-color));\n }\n\n /* Options list container - ensure proper scroll behavior with sticky search */\n .options:has(.search-container) {\n /* Add small padding-top when search is present to ensure proper separation */\n padding-top: 0;\n }\n\n /* Option items */\n .option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: var(--nuraly-select-option-padding, 8px 12px);\n min-height: var(--nuraly-select-option-min-height, auto);\n color: var(--nuraly-select-option-text-color, var(--nuraly-select-text-color, #262626));\n font-size: var(--nuraly-select-option-font-size, 14px);\n cursor: pointer;\n transition: background-color var(--nuraly-select-transition-duration, 0.2s);\n position: relative;\n }\n\n /* First option after search container should have no extra margin */\n .search-container + .option {\n margin-top: 0;\n }\n\n .option:hover {\n background-color: var(--nuraly-select-option-hover-background, #f5f5f5);\n }\n\n .option.selected {\n background-color: var(--nuraly-select-option-selected-background, #e0e0e0);\n color: var(--nuraly-select-option-selected-color, #7c3aed);\n }\n\n .option.focused {\n background-color: var(--nuraly-select-option-hover-background, #f5f5f5);\n outline: 2px solid var(--nuraly-select-border-focus, #7c3aed);\n outline-offset: -2px;\n }\n\n .option.disabled {\n opacity: var(--nuraly-select-disabled-opacity, var(--nuraly-select-local-disabled-opacity));\n cursor: not-allowed;\n }\n\n .option-content {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .option-icon {\n --nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n --nuraly-icon-color: currentColor;\n }\n\n .option-text {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .option-description {\n font-size: calc(var(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size)) - 1px);\n opacity: 0.7;\n margin-top: 2px;\n }\n\n .check-icon {\n --nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n --nuraly-icon-color: var(--nuraly-select-option-selected-color, var(--nuraly-select-local-option-selected-color));\n }\n\n .no-options {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--select-no-options-padding, 24px 16px);\n color: var(--select-no-options-color, #8c8c8c);\n font-size: var(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size));\n cursor: default;\n user-select: none;\n }\n\n .no-options-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--select-no-options-gap, 8px);\n text-align: center;\n }\n\n .no-options-icon {\n --nuraly-icon-width: 24px;\n --nuraly-icon-color: var(--select-no-options-icon-color, #d9d9d9);\n opacity: 0.8;\n }\n\n .no-options-text {\n font-size: var(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size));\n color: var(--select-no-options-color, #8c8c8c);\n line-height: 1.4;\n }\n\n /* Validation message */\n .validation-message {\n display: block;\n margin-top: var(--nuraly-select-message-margin-top, var(--nuraly-select-local-message-margin-top));\n font-size: var(--nuraly-select-message-font-size, var(--nuraly-select-local-message-font-size));\n color: var(--nuraly-select-error-message-color, var(--nuraly-select-local-error-message-color));\n }\n\n .validation-message.warning {\n color: var(--nuraly-select-warning-message-color, var(--nuraly-select-local-warning-message-color));\n }\n\n .validation-message.success {\n color: var(--nuraly-select-success-message-color, var(--nuraly-select-local-success-message-color));\n }\n\n /* Slotted content styles */\n ::slotted([slot='label']) {\n display: block;\n margin-bottom: 4px;\n font-weight: 500;\n color: var(--nuraly-select-text-color, var(--nuraly-select-local-text-color));\n }\n\n ::slotted([slot='helper-text']) {\n display: block;\n margin-top: var(--nuraly-select-message-margin-top, var(--nuraly-select-local-message-margin-top));\n font-size: var(--nuraly-select-message-font-size, var(--nuraly-select-local-message-font-size));\n color: var(--nuraly-select-placeholder-color, var(--nuraly-select-local-placeholder-color));\n }\n\n /* Accessibility improvements */\n @media (prefers-reduced-motion: reduce) {\n .options,\n .wrapper,\n .tag-close,\n .arrow-icon,\n .option {\n transition: none;\n animation: none;\n }\n }\n\n /* High contrast mode support */\n @media (prefers-contrast: high) {\n .wrapper {\n border-width: 2px;\n }\n \n .wrapper:focus,\n .wrapper:focus-within {\n outline: 3px solid;\n }\n }\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"select.style.js","sourceRoot":"","sources":["../../../src/components/select/select.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAygBxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n /* Layout and sizing */\n --nuraly-select-local-min-height: 40px;\n --nuraly-select-local-padding-top: 8px;\n --nuraly-select-local-padding-bottom: 8px;\n --nuraly-select-local-padding-left: 12px;\n --nuraly-select-local-padding-right: 12px;\n --nuraly-select-local-wrapper-margin: 0;\n --nuraly-select-local-border-radius: 6px;\n --nuraly-select-local-border-width: 1px;\n \n /* Dropdown settings */\n --nuraly-select-local-dropdown-z-index: 9999;\n --nuraly-select-local-dropdown-max-height: 200px;\n --nuraly-select-local-dropdown-width: max-content; /* Default to auto-size to content */\n --nuraly-select-local-placeholder-font-size: 14px;\n --nuraly-select-local-option-font-size: 14px;\n \n /* Sizes */\n --nuraly-select-local-medium-height: 40px;\n --nuraly-select-local-medium-font-size: 14px;\n --nuraly-select-local-medium-padding: 8px 12px;\n --nuraly-select-local-small-font-size: 12px;\n \n /* Animation and transitions */\n --nuraly-select-local-dropdown-animation-duration: 0.15s;\n \n /* Multi-select specific */\n --nuraly-select-local-tag-border-radius: 4px;\n --nuraly-select-local-tag-padding: 2px 6px;\n --nuraly-select-local-tag-margin: 2px;\n \n /* Validation message */\n --nuraly-select-local-message-font-size: 12px;\n --nuraly-select-local-message-margin-top: 4px;\n }\n\n :host {\n width: fit-content;\n display: block;\n font-family: var(--nuraly-select-font-family, Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, Ubuntu, Cantarell, \"Noto Sans\", sans-serif);\n font-size: var(--nuraly-select-font-size, 14px);\n line-height: var(--nuraly-select-line-height, 1.5);\n margin: var(--nuraly-select-margin, var(--nuraly-select-local-wrapper-margin));\n }\n\n /* Host attribute selectors for configuration */\n :host([disabled]) {\n opacity: var(--nuraly-select-disabled-opacity, 0.5);\n pointer-events: none;\n }\n\n :host([disabled]) .wrapper {\n background-color: var(--nuraly-select-disabled-background, #f9fafb);\n border-color: var(--nuraly-select-disabled-border-color, #d9d9d9);\n color: var(--nuraly-select-disabled-text-color, #8c8c8c);\n cursor: not-allowed;\n }\n\n /* Size variants */\n :host([size='small']) .wrapper {\n height: var(--nuraly-select-small-height, 24px);\n min-height: var(--nuraly-select-small-height, 24px);\n font-size: var(--nuraly-select-small-font-size, var(--nuraly-select-local-small-font-size));\n }\n\n :host([size='small']) .select-trigger {\n padding: var(--nuraly-select-small-padding, 2px 8px);\n padding-right: calc(var(--nuraly-select-icon-size, 16px) + 20px);\n }\n\n :host([size='medium']) .wrapper {\n min-height: var(--nuraly-select-medium-height, var(--nuraly-select-local-medium-height));\n font-size: var(--nuraly-select-medium-font-size, var(--nuraly-select-local-medium-font-size));\n }\n\n :host([size='medium']) .select-trigger {\n padding: var(--nuraly-select-medium-padding, var(--nuraly-select-local-medium-padding));\n padding-right: calc(var(--nuraly-select-icon-size, 16px) + 20px);\n }\n\n :host([size='large']) .wrapper {\n min-height: var(--nuraly-select-large-height, 48px);\n font-size: var(--nuraly-select-large-font-size, 16px);\n }\n\n :host([size='large']) .select-trigger {\n padding: var(--nuraly-select-large-padding, 12px 16px);\n padding-right: calc(var(--nuraly-select-icon-size, 16px) + 20px);\n }\n\n /* Status variants */\n :host([status='error']) .wrapper {\n border-color: var(--nuraly-select-error-border-color, #ef4444);\n }\n\n :host([status='warning']) .wrapper {\n border-color: var(--nuraly-select-warning-border-color, #f59e0b);\n }\n\n :host([status='success']) .wrapper {\n border-color: var(--nuraly-select-success-border-color, #10b981);\n }\n\n /* Type variants */\n :host([type='inline']) {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n :host([type='inline']) .wrapper {\n flex: 1;\n }\n\n /* Block (full width) */\n :host([block]) {\n width: 100%;\n }\n\n :host([block]) .wrapper {\n width: 100%;\n }\n\n /* Show dropdown */\n :host([show]) .options {\n display: flex !important;\n }\n\n /* Main wrapper container */\n .wrapper {\n position: relative;\n width: var(--nuraly-select-width, fit-content);\n background-color: var(--nuraly-select-background-color, #ffffff);\n border: var(--nuraly-select-border-width, var(--nuraly-select-local-border-width)) solid \n var(--nuraly-select-border-color, #d9d9d9);\n border-radius: var(--nuraly-select-border-radius, var(--nuraly-select-local-border-radius));\n transition: all var(--nuraly-select-transition-duration, 0.2s) \n var(--nuraly-select-transition-timing, ease-in-out);\n cursor: pointer;\n outline: none;\n margin: var(--nuraly-select-wrapper-margin, 0);\n min-height: var(--nuraly-select-min-height, var(--nuraly-select-local-min-height));\n box-sizing: border-box;\n display: flex;\n align-items: center;\n /* Ensure dropdown can overflow the wrapper */\n overflow: visible;\n }\n\n .wrapper:hover:not(:disabled) {\n border-color: var(--nuraly-select-border-hover, #7c3aed);\n }\n\n .wrapper:focus,\n .wrapper:focus-within {\n border-color: var(--nuraly-select-border-focus, #7c3aed);\n box-shadow: 0 0 0 2px var(--nuraly-select-focus-outline, rgba(124, 58, 237, 0.2));\n }\n\n /* Select container */\n .select {\n display: flex;\n flex-direction: column;\n }\n\n /* Select trigger (main display area) */\n .select-trigger {\n display: flex;\n align-items: center;\n padding: var(--nuraly-select-padding-top, var(--nuraly-select-local-padding-top)) \n calc(var(--nuraly-select-icon-size, 16px) + 20px) \n var(--nuraly-select-padding-bottom, var(--nuraly-select-local-padding-bottom)) \n var(--nuraly-select-padding-left, var(--nuraly-select-local-padding-left));\n color: var(--nuraly-select-text-color, #262626);\n font-size: inherit;\n line-height: inherit;\n word-break: break-word;\n flex: 1;\n min-height: 0;\n flex-wrap: wrap;\n gap: var(--nuraly-select-tag-margin, var(--nuraly-select-local-tag-margin));\n box-sizing: border-box;\n }\n\n .select-trigger:empty:before {\n content: attr(data-placeholder);\n color: var(--nuraly-select-placeholder-color, #8c8c8c);\n font-size: var(--nuraly-select-placeholder-font-size, var(--nuraly-select-local-placeholder-font-size));\n }\n\n /* Multi-select tags */\n .tag {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n background-color: var(--nuraly-select-tag-background, var(--nuraly-select-local-tag-background));\n color: var(--nuraly-select-tag-color, var(--nuraly-select-local-tag-color));\n padding: var(--nuraly-select-tag-padding, var(--nuraly-select-local-tag-padding));\n border-radius: var(--nuraly-select-tag-border-radius, var(--nuraly-select-local-tag-border-radius));\n font-size: calc(var(--nuraly-select-font-size, var(--nuraly-select-local-font-size)) - 1px);\n max-width: 100%;\n }\n\n .tag-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .tag-close {\n color: var(--nuraly-select-tag-close-color, var(--nuraly-select-local-tag-close-color));\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n height: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n border-radius: 50%;\n transition: color var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));\n }\n\n .tag-close:hover {\n color: var(--nuraly-select-tag-close-hover-color, var(--nuraly-select-local-tag-close-hover-color));\n }\n\n /* Icons container */\n .icons-container {\n position: absolute;\n top: 50%;\n right: 12px;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n gap: 4px;\n pointer-events: none;\n }\n\n .icons-container nr-icon {\n --nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n --nuraly-icon-color: var(--nuraly-select-icon-color, var(--nuraly-select-local-icon-color));\n pointer-events: auto;\n cursor: pointer;\n transition: color var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));\n }\n\n .icons-container nr-icon:hover {\n --nuraly-icon-color: var(--nuraly-select-icon-hover-color, var(--nuraly-select-local-icon-hover-color));\n }\n\n .arrow-icon {\n --nuraly-icon-width: var(--nuraly-select-arrow-icon-size, var(--nuraly-select-local-arrow-icon-size));\n transition: transform var(--nuraly-select-transition-duration, var(--nuraly-select-local-transition-duration));\n pointer-events: none !important;\n }\n\n :host([show]) .arrow-icon {\n transform: rotate(180deg);\n }\n\n /* Dropdown options */\n .options {\n /* Default positioning - will be overridden by controller when opened */\n position: absolute;\n top: 100%;\n margin-top: 1px;\n left: 0;\n right: 0;\n background-color: var(--nuraly-select-dropdown-background, #ffffff);\n border: var(--nuraly-select-dropdown-border-width, var(--nuraly-select-border-width, 1px)) solid \n var(--nuraly-select-dropdown-border-color, #d9d9d9);\n border-radius: var(--nuraly-select-dropdown-border-radius, var(--nuraly-select-border-radius, 6px));\n box-shadow: var(--nuraly-select-dropdown-shadow, 0 6px 16px 0 rgba(0, 0, 0, 0.08));\n z-index: var(--nuraly-select-dropdown-z-index, 9999);\n max-height: var(--nuraly-select-dropdown-max-height, 200px);\n overflow-y: auto;\n overflow-x: hidden;\n display: none;\n flex-direction: column;\n animation: dropdown-enter var(--nuraly-select-dropdown-animation-duration, 0.15s) ease-out;\n /* Ensure proper containment and exact wrapper width */\n box-sizing: border-box;\n /* Allow overriding width via either of these custom props */\n width: var(\n --nuraly-select-dropdown-width,\n var(--select-dropdown-width, var(--nuraly-select-local-dropdown-width))\n );\n min-width: 100%; /* Ensure dropdown is at least as wide as the wrapper */\n /* Create new stacking context to prevent layering issues */\n isolation: isolate;\n /* Ensure solid background to prevent visual bleed-through */\n backdrop-filter: none;\n -webkit-backdrop-filter: none;\n /* Force above other elements */\n transform: translateZ(0);\n }\n\n .options.placement-top {\n top: auto;\n bottom: 100%;\n margin-bottom: 1px;\n margin-top: 0;\n animation: dropdown-enter-top var(--nuraly-select-dropdown-animation-duration, var(--nuraly-select-local-dropdown-animation-duration)) ease-out;\n }\n\n @keyframes dropdown-enter {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes dropdown-enter-top {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n /* Search container - sticky at top of dropdown */\n .search-container {\n position: sticky;\n top: 0;\n z-index: 10;\n background-color: var(--nuraly-select-dropdown-background, #ffffff);\n border-bottom: var(--nuraly-select-border-width, 1px) solid \n var(--nuraly-select-dropdown-border-color, #d9d9d9);\n padding: 8px;\n margin: 0;\n /* Ensure it stays above options during scroll */\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n /* Ensure proper stacking and smooth scrolling */\n will-change: transform;\n transform: translateZ(0);\n }\n\n /* Search input styling */\n .search-container .search-input {\n width: 100%;\n --nuraly-input-border-radius: var(--nuraly-select-border-radius, var(--nuraly-select-local-border-radius));\n --nuraly-input-background-color: var(--nuraly-select-background-color, var(--nuraly-select-local-background-color));\n --nuraly-input-border-color: var(--nuraly-select-border-color, var(--nuraly-select-local-border-color));\n --nuraly-input-text-color: var(--nuraly-select-text-color, var(--nuraly-select-local-text-color));\n --nuraly-input-placeholder-color: var(--nuraly-select-placeholder-color, var(--nuraly-select-local-placeholder-color));\n }\n\n /* Search icon in the search input */\n .search-container .search-icon {\n --nuraly-icon-color: var(--nuraly-select-icon-color, var(--nuraly-select-local-icon-color));\n }\n\n /* Options list container - ensure proper scroll behavior with sticky search */\n .options:has(.search-container) {\n /* Add small padding-top when search is present to ensure proper separation */\n padding-top: 0;\n }\n\n /* Option items */\n .option {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: var(--nuraly-select-option-padding, 8px 12px);\n min-height: var(--nuraly-select-option-min-height, auto);\n color: var(--nuraly-select-option-text-color, var(--nuraly-select-text-color, #262626));\n font-size: var(--nuraly-select-option-font-size, 14px);\n cursor: pointer;\n transition: background-color var(--nuraly-select-transition-duration, 0.2s);\n position: relative;\n }\n\n /* First option after search container should have no extra margin */\n .search-container + .option {\n margin-top: 0;\n }\n\n .option:hover {\n background-color: var(--nuraly-select-option-hover-background, #f5f5f5);\n }\n\n .option.selected {\n background-color: var(--nuraly-select-option-selected-background, #e0e0e0);\n color: var(--nuraly-select-option-selected-color, #7c3aed);\n }\n\n .option.focused {\n background-color: var(--nuraly-select-option-hover-background, #f5f5f5);\n outline: 2px solid var(--nuraly-select-border-focus, #7c3aed);\n outline-offset: -2px;\n }\n\n .option.disabled {\n opacity: var(--nuraly-select-disabled-opacity, var(--nuraly-select-local-disabled-opacity));\n cursor: not-allowed;\n }\n\n .option-content {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .option-icon {\n --nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n --nuraly-icon-color: currentColor;\n }\n\n .option-text {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .option-description {\n font-size: calc(var(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size)) - 1px);\n opacity: 0.7;\n margin-top: 2px;\n }\n\n .check-icon {\n --nuraly-icon-width: var(--nuraly-select-icon-size, var(--nuraly-select-local-icon-size));\n --nuraly-icon-color: var(--nuraly-select-option-selected-color, var(--nuraly-select-local-option-selected-color));\n }\n\n .no-options {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--select-no-options-padding, 24px 16px);\n color: var(--select-no-options-color, #8c8c8c);\n font-size: var(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size));\n cursor: default;\n user-select: none;\n }\n\n .no-options-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--select-no-options-gap, 8px);\n text-align: center;\n }\n\n .no-options-icon {\n --nuraly-icon-width: 24px;\n --nuraly-icon-color: var(--select-no-options-icon-color, #d9d9d9);\n opacity: 0.8;\n }\n\n .no-options-text {\n font-size: var(--nuraly-select-option-font-size, var(--nuraly-select-local-option-font-size));\n color: var(--select-no-options-color, #8c8c8c);\n line-height: 1.4;\n }\n\n /* Validation message */\n .validation-message {\n display: block;\n margin-top: var(--nuraly-select-message-margin-top, var(--nuraly-select-local-message-margin-top));\n font-size: var(--nuraly-select-message-font-size, var(--nuraly-select-local-message-font-size));\n color: var(--nuraly-select-error-message-color, var(--nuraly-select-local-error-message-color));\n }\n\n .validation-message.warning {\n color: var(--nuraly-select-warning-message-color, var(--nuraly-select-local-warning-message-color));\n }\n\n .validation-message.success {\n color: var(--nuraly-select-success-message-color, var(--nuraly-select-local-success-message-color));\n }\n\n /* Slotted content styles */\n ::slotted([slot='label']) {\n display: block;\n margin-bottom: 4px;\n font-weight: 500;\n color: var(--nuraly-select-text-color, var(--nuraly-select-local-text-color));\n }\n\n ::slotted([slot='helper-text']) {\n display: block;\n margin-top: var(--nuraly-select-message-margin-top, var(--nuraly-select-local-message-margin-top));\n font-size: var(--nuraly-select-message-font-size, var(--nuraly-select-local-message-font-size));\n color: var(--nuraly-select-placeholder-color, var(--nuraly-select-local-placeholder-color));\n }\n\n /* Accessibility improvements */\n @media (prefers-reduced-motion: reduce) {\n .options,\n .wrapper,\n .tag-close,\n .arrow-icon,\n .option {\n transition: none;\n animation: none;\n }\n }\n\n /* High contrast mode support */\n @media (prefers-contrast: high) {\n .wrapper {\n border-width: 2px;\n }\n \n .wrapper:focus,\n .wrapper:focus-within {\n outline: 3px solid;\n }\n }\n`;\n"]}
|