@aquera/nile-elements 0.1.57-beta-1.6 → 0.1.57-beta-1.7

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

@@ -12,7 +12,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { html } from 'lit';
 import { watch } from '../internal/watch';
-import type { CSSResultGroup } from 'lit';
+import type { CSSResultGroup, PropertyValues } from 'lit';
 import NileElement from '../internal/nile-element';
 import '../nile-checkbox';
 
@@ -61,6 +61,8 @@ export class NileOption extends NileElement {
    */
   @property({ reflect: true }) value = '';
 
+  @property({ type: Boolean }) showCheckbox: boolean = false;
+
   /** Draws the option in a disabled state, preventing selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
@@ -84,6 +86,12 @@ export class NileOption extends NileElement {
     }
   }
 
+  protected updated(_changedProperties: PropertyValues): void {
+    if(_changedProperties.has('showCheckbox')) {
+      this.isMultipleSelect = this.showCheckbox;
+    }
+  }
+
   private handleDefaultSlotChange() {
     const textLabel = this.getTextLabel();
 

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

@@ -29,7 +29,7 @@ import { scrollIntoView } from '../internal/scroll';
 import { waitForEvent } from '../internal/event';
 import { watch } from '../internal/watch';
 import NileElement from '../internal/nile-element';
-import type { CSSResultGroup } from 'lit';
+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';
@@ -258,6 +258,19 @@ export class NileSelect extends NileElement implements NileFormControl {
     this.emit('nile-destroy');
   }
 
+  protected updated(_changedProperties: PropertyValues): void {
+    if(_changedProperties.has('multiple')) {
+      this.setCheckBoxInOption(this.multiple);
+    }
+  }
+
+  setCheckBoxInOption(checked: boolean): void {
+    const options = this.getAllOptions();
+    options.forEach((option: NileOption) => {
+      option.showCheckbox = checked;
+    })
+  }
+
   private addOpenListeners() {
     document.addEventListener('focusin', this.handleDocumentFocusIn);
     document.addEventListener('keydown', this.handleDocumentKeyDown);