@aquera/nile-elements 0.1.61-beta-1.0 → 0.1.61

package/dist/src/nile-empty-state/nile-empty-state.js

@@ -42,43 +42,43 @@ let NileEmptyState = class NileEmptyState extends NileElement {
      */
     render() {
         return html `
-		<div class="${classMap({
+		<div part="container" class="${classMap({
             'empty-state': true,
             'empty-state--sm': this.size == 'sm',
             'empty-state--md': this.size == 'md',
             'empty-state--lg': this.size == 'lg'
         })}">
-      <div class="${classMap({ 'empty-state__body': true })}">
+      <div  part="body" class="${classMap({ 'empty-state__body': true })}">
 
         ${this.variant == 'content' ? html `
-        <div class="empty-state__body--content">
+        <div part="content-image" class="empty-state__body--content">
           
-          <div src="" class="${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale': this.grayscale })}"></div>
+          <div part="image" src="" class="${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale': this.grayscale })}"></div>
           ${!this.icon ? nothing : html `
-          <div class="empty-state__img__icon">
+          <div part="icon-wrapper" class="empty-state__img__icon">
             <nile-icon name="${this.icon}" color="white" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}"></nile-icon>
           </div>`}
         </div>` : nothing}
 				
 			  ${this.variant == 'tonal' ? html `
-				<div class="empty-state__body--tonal">
+				<div part="tonal-body" class="empty-state__body--tonal">
 					<nile-icon name="${this.icon}" size="40"></nile-icon>
 				</div>` : nothing}
 
 			  ${this.variant == 'flat' ? html `
-				<div class="empty-state__body--flat">
+				<div part="flat-body" class="empty-state__body--flat">
 					<span class="nile-flat-type-icon">
 						<nile-icon name="${this.icon}" size="${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}" variant="secondary"></nile-icon>
 					</span>
 				</div>` : nothing}
       
-        <div class="empty__state__text-section">
-          <div class="empty-state__text">${this.text}</div>
-          <div class="empty-state__subtext">${this.subText}</div>
+        <div part="text-section" class="empty__state__text-section">
+          <div part="text" class="empty-state__text">${this.text}</div>
+          <div part="subtitle" class="empty-state__subtext">${this.subText}</div>
         </div>
 			</div>
 
-			<div class="empty-state-actions">
+			<div part="actions" class="empty-state-actions">
 				<slot></slot>
 			</div>
 		</div>

package/dist/src/nile-empty-state/nile-empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-empty-state.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkC,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAAW;IAAxC;;QAUO,SAAI,GAAuB,IAAI,CAAC;QAEhC,YAAO,GAGL,OAAO,CAAC;QAEV,SAAI,GAAW,OAAO,CAAC;QACT,cAAS,GAAY,KAAK,CAAC;QAEzC,SAAI,GAAW,aAAa,CAAC;QACP,YAAO,GAAW,SAAS,CAAC;QA4D9D,gBAAgB;IAClB,CAAC;IAhFC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAgBD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;gBACC,QAAQ,CAAC;YACnB,aAAa,EAAE,IAAI;YACnB,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;YACpC,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;YACpC,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;SACrC,CAAC;oBACc,QAAQ,CAAC,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC;;UAEjD,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;;+BAGX,QAAQ,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAE,+BAA+B,EAAC,IAAI,CAAC,SAAS,EAAG,CAAC;YAC5G,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;+BAER,IAAI,CAAC,IAAI,yBAAyB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;iBAE3G;eACK,CAAA,CAAC,CAAC,OACT;;OAED,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;wBAEb,IAAI,CAAC,IAAI;WACtB,CAAA,CAAC,CAAC,OACL;;OAED,IAAI,CAAC,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;;;yBAGX,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;;WAEtF,CAAA,CAAC,CAAC,OACL;;;2CAGmC,IAAI,CAAC,IAAI;8CACN,IAAI,CAAC,OAAO;;;;;;;;GAQvD,CAAC;IACF,CAAC;CAGF,CAAA;AAxEa;IAAX,QAAQ,EAAE;4CAAiC;AAEhC;IAAX,QAAQ,EAAE;+CAGW;AAEV;IAAX,QAAQ,EAAE;4CAAwB;AACT;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAC,OAAO,EAAC,CAAC;iDAA4B;AAEzC;IAAX,QAAQ,EAAE;4CAA8B;AACP;IAAjC,QAAQ,CAAC,EAAC,SAAS,EAAC,UAAU,EAAC,CAAC;+CAA6B;AArBnD,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAkF1B;;AAED,eAAe,cAAc,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, nothing, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-empty-state.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile empty-state component.\n *\n * @tag nile-empty-state\n *\n */\n@customElement('nile-empty-state')\nexport class NileEmptyState extends NileElement {\n\n  /**\n   * The styles for nile-empty-state\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property() size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property() variant:\n    | 'flat'\n    | 'content'\n    | 'tonal' = 'tonal';\n\n  @property() icon: string = 'error';\n  @property({type:Boolean}) grayscale: boolean = false;\n\n  @property() text: String = 'Empty State';\n  @property({attribute:'sub-text'}) subText: String = 'No Data';\n\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n\t\t<div class=\"${classMap({\n      'empty-state': true,\n      'empty-state--sm': this.size == 'sm',\n      'empty-state--md': this.size == 'md',\n      'empty-state--lg': this.size == 'lg'\n    })}\">\n      <div class=\"${classMap({ 'empty-state__body': true })}\">\n\n        ${this.variant == 'content' ? html`\n        <div class=\"empty-state__body--content\">\n          \n          <div src=\"\" class=\"${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale':this.grayscale  })}\"></div>\n          ${!this.icon ? nothing : html`\n          <div class=\"empty-state__img__icon\">\n            <nile-icon name=\"${this.icon}\" color=\"white\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\"></nile-icon>\n          </div>`\n          }\n        </div>`: nothing\n        }\n\t\t\t\t\n\t\t\t  ${this.variant == 'tonal' ? html`\n\t\t\t\t<div class=\"empty-state__body--tonal\">\n\t\t\t\t\t<nile-icon name=\"${this.icon}\" size=\"40\"></nile-icon>\n\t\t\t\t</div>`: nothing\n        }\n\n\t\t\t  ${this.variant == 'flat' ? html`\n\t\t\t\t<div class=\"empty-state__body--flat\">\n\t\t\t\t\t<span class=\"nile-flat-type-icon\">\n\t\t\t\t\t\t<nile-icon name=\"${this.icon}\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\" variant=\"secondary\"></nile-icon>\n\t\t\t\t\t</span>\n\t\t\t\t</div>`: nothing\n        }\n      \n        <div class=\"empty__state__text-section\">\n          <div class=\"empty-state__text\">${this.text}</div>\n          <div class=\"empty-state__subtext\">${this.subText}</div>\n        </div>\n\t\t\t</div>\n\n\t\t\t<div class=\"empty-state-actions\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t</div>\n\t\t`;\n  }\n\n  /* #endregion */\n}\n\nexport default NileEmptyState;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-empty-state': NileEmptyState;\n  }\n}"]}
+{"version":3,"file":"nile-empty-state.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkC,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAAW;IAAxC;;QAUO,SAAI,GAAuB,IAAI,CAAC;QAEhC,YAAO,GAGL,OAAO,CAAC;QAEV,SAAI,GAAW,OAAO,CAAC;QACT,cAAS,GAAY,KAAK,CAAC;QAEzC,SAAI,GAAW,aAAa,CAAC;QACP,YAAO,GAAW,SAAS,CAAC;QA4D9D,gBAAgB;IAClB,CAAC;IAhFC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAgBD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;iCACkB,QAAQ,CAAC;YACpC,aAAa,EAAE,IAAI;YACnB,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;YACpC,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;YACpC,iBAAiB,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI;SACrC,CAAC;iCAC2B,QAAQ,CAAC,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC;;UAE9D,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;;4CAGE,QAAQ,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAE,+BAA+B,EAAC,IAAI,CAAC,SAAS,EAAG,CAAC;YACzH,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;+BAER,IAAI,CAAC,IAAI,yBAAyB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;iBAE3G;eACK,CAAA,CAAC,CAAC,OACT;;OAED,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;;wBAEb,IAAI,CAAC,IAAI;WACtB,CAAA,CAAC,CAAC,OACL;;OAED,IAAI,CAAC,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;;;yBAGX,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;;WAEtF,CAAA,CAAC,CAAC,OACL;;;uDAG+C,IAAI,CAAC,IAAI;8DACF,IAAI,CAAC,OAAO;;;;;;;;GAQvE,CAAC;IACF,CAAC;CAGF,CAAA;AAxEa;IAAX,QAAQ,EAAE;4CAAiC;AAEhC;IAAX,QAAQ,EAAE;+CAGW;AAEV;IAAX,QAAQ,EAAE;4CAAwB;AACT;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAC,OAAO,EAAC,CAAC;iDAA4B;AAEzC;IAAX,QAAQ,EAAE;4CAA8B;AACP;IAAjC,QAAQ,CAAC,EAAC,SAAS,EAAC,UAAU,EAAC,CAAC;+CAA6B;AArBnD,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAkF1B;;AAED,eAAe,cAAc,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, nothing, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-empty-state.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile empty-state component.\n *\n * @tag nile-empty-state\n *\n */\n@customElement('nile-empty-state')\nexport class NileEmptyState extends NileElement {\n\n  /**\n   * The styles for nile-empty-state\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @property() size: 'sm' | 'md' | 'lg' = 'md';\n\n  @property() variant:\n    | 'flat'\n    | 'content'\n    | 'tonal' = 'tonal';\n\n  @property() icon: string = 'error';\n  @property({type:Boolean}) grayscale: boolean = false;\n\n  @property() text: String = 'Empty State';\n  @property({attribute:'sub-text'}) subText: String = 'No Data';\n\n\n  /* #endregion */\n\n  /* #region Methods */\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html`\n\t\t<div part=\"container\" class=\"${classMap({\n      'empty-state': true,\n      'empty-state--sm': this.size == 'sm',\n      'empty-state--md': this.size == 'md',\n      'empty-state--lg': this.size == 'lg'\n    })}\">\n      <div  part=\"body\" class=\"${classMap({ 'empty-state__body': true })}\">\n\n        ${this.variant == 'content' ? html`\n        <div part=\"content-image\" class=\"empty-state__body--content\">\n          \n          <div part=\"image\" src=\"\" class=\"${classMap({ 'empty-state__image': true, 'empty-state__image--grayscale':this.grayscale  })}\"></div>\n          ${!this.icon ? nothing : html`\n          <div part=\"icon-wrapper\" class=\"empty-state__img__icon\">\n            <nile-icon name=\"${this.icon}\" color=\"white\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\"></nile-icon>\n          </div>`\n          }\n        </div>`: nothing\n        }\n\t\t\t\t\n\t\t\t  ${this.variant == 'tonal' ? html`\n\t\t\t\t<div part=\"tonal-body\" class=\"empty-state__body--tonal\">\n\t\t\t\t\t<nile-icon name=\"${this.icon}\" size=\"40\"></nile-icon>\n\t\t\t\t</div>`: nothing\n        }\n\n\t\t\t  ${this.variant == 'flat' ? html`\n\t\t\t\t<div part=\"flat-body\" class=\"empty-state__body--flat\">\n\t\t\t\t\t<span class=\"nile-flat-type-icon\">\n\t\t\t\t\t\t<nile-icon name=\"${this.icon}\" size=\"${this.size == 'sm' ? 24 : this.size == 'md' ? 24 : 28}\" variant=\"secondary\"></nile-icon>\n\t\t\t\t\t</span>\n\t\t\t\t</div>`: nothing\n        }\n      \n        <div part=\"text-section\" class=\"empty__state__text-section\">\n          <div part=\"text\" class=\"empty-state__text\">${this.text}</div>\n          <div part=\"subtitle\" class=\"empty-state__subtext\">${this.subText}</div>\n        </div>\n\t\t\t</div>\n\n\t\t\t<div part=\"actions\" class=\"empty-state-actions\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t</div>\n\t\t`;\n  }\n\n  /* #endregion */\n}\n\nexport default NileEmptyState;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-empty-state': NileEmptyState;\n  }\n}"]}

package/dist/src/nile-option/nile-option.d.ts

@@ -36,7 +36,6 @@ export declare class NileOption extends NileElement {
     private cachedTextLabel;
     defaultSlot: HTMLSlotElement;
     current: boolean;
-    selected: boolean;
     hasHover: boolean;
     hidden: boolean;
     isMultipleSelect: boolean;
@@ -49,6 +48,8 @@ export declare class NileOption extends NileElement {
     showCheckbox: boolean;
     /** Draws the option in a disabled state, preventing selection. */
     disabled: boolean;
+    /** Indicates whether the option is selected. */
+    selected: boolean;
     connectedCallback(): void;
     checkIfMultipleSelect(): void;
     protected updated(_changedProperties: PropertyValues): void;

package/dist/src/nile-option/nile-option.js

@@ -39,7 +39,6 @@ let NileOption = class NileOption extends NileElement {
     constructor() {
         super(...arguments);
         this.current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
-        this.selected = false; // the option is selected and has aria-selected="true"
         this.hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
         this.hidden = false; // the option is hidden
         this.isMultipleSelect = false;
@@ -52,16 +51,20 @@ let NileOption = class NileOption extends NileElement {
         this.showCheckbox = false;
         /** Draws the option in a disabled state, preventing selection. */
         this.disabled = false;
+        /** Indicates whether the option is selected. */
+        this.selected = false;
     }
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('role', 'option');
         this.setAttribute('aria-selected', 'false');
+        // Find the closest parent 'nile-select' or 'nile-virtual-select' element
+        const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');
         this.checkIfMultipleSelect();
     }
     checkIfMultipleSelect() {
         // Find the closest parent 'nile-select' element
-        const parentSelect = this.closest('nile-select');
+        const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');
         // Check if the parent has the 'multiple' attribute
         if (parentSelect && parentSelect.hasAttribute('multiple')) {
             // let multipleValue = parentSelect.getAttribute('multiple');
@@ -167,9 +170,6 @@ __decorate([
 __decorate([
     state()
 ], NileOption.prototype, "current", void 0);
-__decorate([
-    state()
-], NileOption.prototype, "selected", void 0);
 __decorate([
     state()
 ], NileOption.prototype, "hasHover", void 0);
@@ -188,6 +188,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileOption.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileOption.prototype, "selected", void 0);
 __decorate([
     watch('disabled')
 ], NileOption.prototype, "handleDisabledChange", null);

package/dist/src/nile-option/nile-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-option.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, CSSResultArray, TemplateResult } from 'lit';\nimport { styles } from './nile-option.css';\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport NileElement from '../internal/nile-element';\nimport '../nile-checkbox';\n\n/**\n * Nile icon component.\n *\n * @tag nile-option\n *\n */\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @status stable\n *\n * @dependency nile-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\n\n@customElement('nile-option')\nexport class NileOption extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private cachedTextLabel: string;\n\n  @query('.option__label') defaultSlot: HTMLSlotElement;\n\n  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n  @state() selected = false; // the option is selected and has aria-selected=\"true\"\n  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n  @state() hidden = false; // the option is hidden\n  @state() isMultipleSelect = false;\n\n  /**\n   * The option's value. When selected, the containing form control will receive this value. The value must be unique\n   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n   * multiple values.\n   */\n  @property({ reflect: true }) value = '';\n\n  @property({ type: Boolean }) showCheckbox: boolean = false;\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n    this.setAttribute('aria-selected', 'false');\n\n    this.checkIfMultipleSelect();\n  }\n\n  checkIfMultipleSelect() {\n    // Find the closest parent 'nile-select' element\n    const parentSelect = this.closest('nile-select');\n\n    // Check if the parent has the 'multiple' attribute\n    if (parentSelect && parentSelect.hasAttribute('multiple')) {\n      // let multipleValue = parentSelect.getAttribute('multiple');\n      if(parentSelect.hasAttribute('multiple') && parentSelect.getAttribute('multiple') === '') {\n        this.isMultipleSelect = true;\n      } else if (parentSelect.getAttribute('multiple') === 'true') {\n        this.isMultipleSelect = true;\n      } else {\n        this.isMultipleSelect = false;\n      }\n    }\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    this.checkIfMultipleSelect();\n  }\n\n  private handleDefaultSlotChange() {\n    const textLabel = this.getTextLabel();\n\n    // Ignore the first time the label is set\n    if (typeof this.cachedTextLabel === 'undefined') {\n      this.cachedTextLabel = textLabel;\n      return;\n    }\n\n    // When the label changes, emit a slotchange event so parent controls see it\n    if (textLabel !== this.cachedTextLabel) {\n      this.cachedTextLabel = textLabel;\n      this.emit('slotchange');\n    }\n  }\n\n  private handleMouseEnter() {\n    this.hasHover = true;\n  }\n\n  private handleMouseLeave() {\n    this.hasHover = false;\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('selected')\n  handleSelectedChange() {\n    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n  }\n\n  @watch('value')\n  handleValueChange() {\n    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n    // instead of requiring them to cast the value to a string.\n    if (typeof this.value !== 'string') {\n      this.value = String(this.value);\n    }\n\n    // if (this.value.includes(' ')) {\n    //   console.error(\n    //     `Option values cannot include a space. All spaces have been replaced with underscores.`,\n    //     this\n    //   );\n    //   this.value = this.value.replace(/ /g, '_');\n    // }\n  }\n\n  /** Returns a plain text label based on the option's content. */\n  getTextLabel() {\n    // Search for a label element inside the component\n    const labelElement = this.querySelector('label');\n\n    // If a label element is found, return its text content\n    if (labelElement) {\n      return labelElement.textContent?.trim() ?? '';\n    }\n\n    // If no label element is found, return the existing behavior\n    return (this.textContent ?? '').trim();\n  }\n\n  render() {\n    return html`\n      ${!this.hidden\n        ? html` <div\n            part=\"base\"\n            class=${classMap({\n              option: true,\n              'option--single-select': !this.isMultipleSelect,\n              'option--current': this.selected && !this.isMultipleSelect,\n              'option--disabled': this.disabled,\n              'option--selected': this.selected && !this.isMultipleSelect,\n              'option--hover': this.hasHover,\n            })}\n            @mouseenter=${this.handleMouseEnter}\n            @mouseleave=${this.handleMouseLeave}\n          >\n\n          ${this.isMultipleSelect ? html`<nile-checkbox class=\"option--checkbox\" .checked=${this.selected}></nile-checkbox>` : ''}\n\n            <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n            <slot\n              part=\"label\"\n              class=\"option__label\"\n              @slotchange=${this.handleDefaultSlotChange}\n            ></slot>\n            <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n          </div>`\n        : ''}\n    `;\n  }\n}\n\nexport default NileOption;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-option': NileOption;\n  }\n}\n"]}
+{"version":3,"file":"nile-option.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, CSSResultArray, TemplateResult } from 'lit';\nimport { styles } from './nile-option.css';\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport NileElement from '../internal/nile-element';\nimport '../nile-checkbox';\n\n/**\n * Nile icon component.\n *\n * @tag nile-option\n *\n */\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @status stable\n *\n * @dependency nile-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\n\n@customElement('nile-option')\nexport class NileOption extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private cachedTextLabel: string;\n\n  @query('.option__label') defaultSlot: HTMLSlotElement;\n\n  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n  @state() hidden = false; // the option is hidden\n  @state() isMultipleSelect = false;\n\n  /**\n   * The option's value. When selected, the containing form control will receive this value. The value must be unique\n   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n   * multiple values.\n   */\n  @property({ reflect: true }) value = '';\n\n  @property({ type: Boolean }) showCheckbox: boolean = false;\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Indicates whether the option is selected. */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n    this.setAttribute('aria-selected', 'false');\n\n    // Find the closest parent 'nile-select' or 'nile-virtual-select' element\n    const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');\n    this.checkIfMultipleSelect();\n  }\n\n  checkIfMultipleSelect() {\n    // Find the closest parent 'nile-select' element\n    const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');\n\n    // Check if the parent has the 'multiple' attribute\n    if (parentSelect && parentSelect.hasAttribute('multiple')) {\n      // let multipleValue = parentSelect.getAttribute('multiple');\n      if(parentSelect.hasAttribute('multiple') && parentSelect.getAttribute('multiple') === '') {\n        this.isMultipleSelect = true;\n      } else if (parentSelect.getAttribute('multiple') === 'true') {\n        this.isMultipleSelect = true;\n      } else {\n        this.isMultipleSelect = false;\n      }\n    }\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    this.checkIfMultipleSelect();\n  }\n\n  private handleDefaultSlotChange() {\n    const textLabel = this.getTextLabel();\n\n    // Ignore the first time the label is set\n    if (typeof this.cachedTextLabel === 'undefined') {\n      this.cachedTextLabel = textLabel;\n      return;\n    }\n\n    // When the label changes, emit a slotchange event so parent controls see it\n    if (textLabel !== this.cachedTextLabel) {\n      this.cachedTextLabel = textLabel;\n      this.emit('slotchange');\n    }\n  }\n\n  private handleMouseEnter() {\n    this.hasHover = true;\n  }\n\n  private handleMouseLeave() {\n    this.hasHover = false;\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('selected')\n  handleSelectedChange() {\n    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n  }\n\n  @watch('value')\n  handleValueChange() {\n    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n    // instead of requiring them to cast the value to a string.\n    if (typeof this.value !== 'string') {\n      this.value = String(this.value);\n    }\n\n    // if (this.value.includes(' ')) {\n    //   console.error(\n    //     `Option values cannot include a space. All spaces have been replaced with underscores.`,\n    //     this\n    //   );\n    //   this.value = this.value.replace(/ /g, '_');\n    // }\n  }\n\n  /** Returns a plain text label based on the option's content. */\n  getTextLabel() {\n    // Search for a label element inside the component\n    const labelElement = this.querySelector('label');\n\n    // If a label element is found, return its text content\n    if (labelElement) {\n      return labelElement.textContent?.trim() ?? '';\n    }\n\n    // If no label element is found, return the existing behavior\n    return (this.textContent ?? '').trim();\n  }\n\n  render() {\n    return html`\n      ${!this.hidden\n        ? html` <div\n            part=\"base\"\n            class=${classMap({\n              option: true,\n              'option--single-select': !this.isMultipleSelect,\n              'option--current': this.selected && !this.isMultipleSelect,\n              'option--disabled': this.disabled,\n              'option--selected': this.selected && !this.isMultipleSelect,\n              'option--hover': this.hasHover,\n            })}\n            @mouseenter=${this.handleMouseEnter}\n            @mouseleave=${this.handleMouseLeave}\n          >\n\n          ${this.isMultipleSelect ? html`<nile-checkbox class=\"option--checkbox\" .checked=${this.selected}></nile-checkbox>` : ''}\n\n            <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n            <slot\n              part=\"label\"\n              class=\"option__label\"\n              @slotchange=${this.handleDefaultSlotChange}\n            ></slot>\n            <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n          </div>`\n        : ''}\n    `;\n  }\n}\n\nexport default NileOption;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-option': NileOption;\n  }\n}\n"]}

package/dist/src/nile-select/nile-select.d.ts

@@ -12,6 +12,8 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
 import type { NileFormControl } from '../internal/nile-element';
 import type NileOption from '../nile-option/nile-option';
 import type NilePopup from '../nile-popup/nile-popup';
+import type { RenderItemConfig } from '../nile-virtual-select/types.js';
+import '../nile-virtual-select/nile-virtual-select';
 /**
  * Nile icon component.
  *
@@ -26,6 +28,7 @@ import type NilePopup from '../nile-popup/nile-popup';
  * @dependency nile-icon
  * @dependency nile-popup
  * @dependency nile-tag
+ * @dependency nile-virtual-select
  *
  * @slot - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
@@ -64,7 +67,8 @@ import type NilePopup from '../nile-popup/nile-popup';
  */
 export declare class NileSelect extends NileElement implements NileFormControl {
     static styles: CSSResultGroup;
-    private readonly formControlController;
+    private formControlController;
+    private virtualScrollHelper;
     private readonly hasSlotController;
     private typeToSelectString;
     private typeToSelectTimeout;
@@ -151,10 +155,15 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     oldMaxOptionsVisible: number;
     showNoResults: boolean;
     noResultsMessage: string;
+    /** Enhanced configuration for rendering items with support for display text, value, and search text */
+    renderItemConfig?: RenderItemConfig;
+    data: any;
+    enableVirtualScroll: boolean;
     /** Gets the validity state object */
     get validity(): ValidityState;
     /** Gets the validation message */
     get validationMessage(): string;
+    constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     private options;
@@ -224,7 +233,7 @@ export declare class NileSelect extends NileElement implements NileFormControl {
     onInputChange(event: Event): void;
     calculateWidthOfSelectTagsDiv(): number | undefined;
     calculateTotalWidthOfTags(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): any;
     nileInput(value: any): void;
     nileChange(value: any): void;
 }

package/dist/src/nile-select/nile-select.js

@@ -24,6 +24,8 @@ import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import '../nile-virtual-select/nile-virtual-select';
+import { VirtualScrollHelper } from './virtual-scroll-helper';
 /**
  * Nile icon component.
  *
@@ -38,6 +40,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
  * @dependency nile-icon
  * @dependency nile-popup
  * @dependency nile-tag
+ * @dependency nile-virtual-select
  *
  * @slot - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
@@ -75,12 +78,16 @@ import { ifDefined } from 'lit/directives/if-defined.js';
  * @csspart expand-icon - The container that wraps the expand icon.
  */
 let NileSelect = class NileSelect extends NileElement {
+    /** Gets the validity state object */
+    get validity() {
+        return this.valueInput?.validity;
+    }
+    /** Gets the validation message */
+    get validationMessage() {
+        return this.valueInput?.validationMessage;
+    }
     constructor() {
-        super(...arguments);
-        // protected override BUBBLES=false;
-        this.formControlController = new FormControlController(this, {
-            assumeInteractionOn: ['nile-blur', 'nile-input'],
-        });
+        super();
         this.hasSlotController = new HasSlotController(this, 'help-text', 'label');
         this.typeToSelectString = '';
         this.hasFocus = false;
@@ -160,18 +167,18 @@ let NileSelect = class NileSelect extends NileElement {
         this.oldMaxOptionsVisible = 1;
         this.showNoResults = false;
         this.noResultsMessage = 'No results found';
+        this.data = [];
+        this.enableVirtualScroll = false;
         this.options = [];
     }
-    /** Gets the validity state object */
-    get validity() {
-        return this.valueInput?.validity;
-    }
-    /** Gets the validation message */
-    get validationMessage() {
-        return this.valueInput?.validationMessage;
-    }
     connectedCallback() {
         super.connectedCallback();
+        if (!this.enableVirtualScroll) {
+            this.formControlController = new FormControlController(this, {
+                assumeInteractionOn: ['nile-blur', 'nile-input'],
+            });
+        }
+        this.virtualScrollHelper = new VirtualScrollHelper(this);
         this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
         this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
         this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
@@ -595,7 +602,7 @@ let NileSelect = class NileSelect extends NileElement {
         }
         // Update validity
         this.updateComplete.then(() => {
-            this.formControlController.updateValidity();
+            this.formControlController?.updateValidity();
         });
         this.calculateTotalWidthOfTags();
     }
@@ -637,8 +644,8 @@ let NileSelect = class NileSelect extends NileElement {
         return filteredOptions;
     }
     handleInvalid(event) {
-        this.formControlController.setValidity(false);
-        this.formControlController.emitInvalidEvent(event);
+        this.formControlController?.setValidity(false);
+        this.formControlController?.emitInvalidEvent(event);
     }
     handleDisabledChange() {
         // Close the listbox when the control is disabled
@@ -720,7 +727,7 @@ let NileSelect = class NileSelect extends NileElement {
     }
     /** Gets the associated form, if one exists. */
     getForm() {
-        return this.formControlController.getForm();
+        return this.formControlController?.getForm() || null;
     }
     /** Checks for validity and shows the browser's validation message if the control is invalid. */
     reportValidity() {
@@ -729,7 +736,7 @@ let NileSelect = class NileSelect extends NileElement {
     /** Sets a custom validation message. Pass an empty string to restore validity. */
     setCustomValidity(message) {
         this.valueInput.setCustomValidity(message);
-        this.formControlController.updateValidity();
+        this.formControlController?.updateValidity();
     }
     /** Sets focus on the control. */
     focus(options) {
@@ -788,6 +795,9 @@ let NileSelect = class NileSelect extends NileElement {
         }, 1);
     }
     render() {
+        if (this.enableVirtualScroll) {
+            return this.virtualScrollHelper.renderVirtualizedContent();
+        }
         const hasLabelSlot = this.hasSlotController.test('label');
         const hasHelpTextSlot = this.hasSlotController.test('help-text');
         const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');
@@ -1261,6 +1271,15 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NileSelect.prototype, "noResultsMessage", void 0);
+__decorate([
+    property({ attribute: false })
+], NileSelect.prototype, "renderItemConfig", void 0);
+__decorate([
+    property({ type: Array })
+], NileSelect.prototype, "data", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileSelect.prototype, "enableVirtualScroll", void 0);
 __decorate([
     watch('disabled', { waitUntilFirstUpdate: true })
 ], NileSelect.prototype, "handleDisabledChange", null);