@aquera/nile-elements 0.0.120 → 0.0.122

package/src/nile-button/nile-button.css.ts

@@ -69,10 +69,6 @@ export const styles = css`
     pointer-events: none;
   }
 
-  .button__label::slotted(nile-icon) {
-    /* vertical-align: -2px; */
-  }
-
   /* Primary */
   .button--standard.button--primary {
     background-color: var(--nile-colors-button-primary);
@@ -350,92 +346,92 @@ export const styles = css`
   }
 
   /* Primary Variant - Nile Icon Fill */
-  .button--standard.button--primary ::slotted(nile-icon) {
+  .button--standard.button--primary ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
   }
   .button--standard.button--primary:hover:not(.button--disabled)
-    ::slotted(nile-icon),
+    ::slotted(nile-icon:not([color])),
   .button--standard.button--primary:active:not(.button--disabled)
-    ::slotted(nile-icon) {
+    ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-primary-text) !important;
   }
-  .button--standard.button--primary.button--disabled ::slotted(nile-icon) {
+  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-primary-disabled-text) !important;
   }
 
   /* Secondary Variant */
-  .button--standard.button--secondary ::slotted(nile-icon) {
+  .button--standard.button--secondary ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
   }
   .button--standard.button--secondary:hover:not(.button--disabled)
-    ::slotted(nile-icon),
+    ::slotted(nile-icon:not([color])),
   .button--standard.button--secondary:active:not(.button--disabled)
-    ::slotted(nile-icon) {
+    ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-secondary-text) !important;
   }
-  .button--standard.button--secondary.button--disabled ::slotted(nile-icon) {
+  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(
       --nile-colors-button-secondary-disabled-text
     ) !important;
   }
 
   /* Tertiary Variant */
-  .button--standard.button--tertiary ::slotted(nile-icon) {
+  .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
   }
   .button--standard.button--tertiary:hover:not(.button--disabled)
-    ::slotted(nile-icon),
+    ::slotted(nile-icon:not([color])),
   .button--standard.button--tertiary:active:not(.button--disabled)
-    ::slotted(nile-icon) {
+    ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
   }
-  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon) {
+  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(
       --nile-colors-button-tertiary-disabled-text
     ) !important;
   }
 
   /* Ghost Variant */
-  .button--standard.button--ghost ::slotted(nile-icon) {
+  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
   }
   .button--standard.button--ghost:hover:not(.button--disabled)
-    ::slotted(nile-icon),
+    ::slotted(nile-icon:not([color])),
   .button--standard.button--ghost:active:not(.button--disabled)
-    ::slotted(nile-icon) {
+    ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
   }
-  .button--standard.button--ghost ::slotted(nile-icon) {
+  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(
       --nile-colors-button-tertiary-disabled-text
     ) !important;
   }
 
   /* Caution Variant */
-  .button--standard.button--caution ::slotted(nile-icon) {
+  .button--standard.button--caution ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
   }
   .button--standard.button--caution:hover:not(.button--disabled)
-    ::slotted(nile-icon),
+    ::slotted(nile-icon:not([color])),
   .button--standard.button--caution:active:not(.button--disabled)
-    ::slotted(nile-icon) {
+    ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-caution-text) !important;
   }
-  .button--standard.button--caution.button--disabled ::slotted(nile-icon) {
+  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: var(--nile-colors-button-caution-disabled-text) !important;
   }
 
   /* destructive */
-  .button--standard.button--destructive ::slotted(nile-icon) {
+  .button--standard.button--destructive ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: #fff !important;
   }
   .button--standard.button--destructive:hover:not(.button--disabled)
-    ::slotted(nile-icon),
+    ::slotted(nile-icon:not([color])),
   .button--standard.button--caution:active:not(.button--disabled)
-    ::slotted(nile-icon) {
+    ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: #fff !important;
   }
-  .button--standard.button--destructive.button--disabled ::slotted(nile-icon) {
+  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {
     --nile-svg-fill: #fff !important;
   }
 

package/src/nile-button/nile-button.ts

@@ -38,8 +38,6 @@ import NileElement from '../internal/nile-element';
 export class NileButton extends NileElement implements NileFormControl {
   static styles: CSSResultGroup = styles;
 
-  protected override BUBBLES: boolean=false;
-
   private readonly formControlController = new FormControlController(this, {
     form: input => {
       // Buttons support a form attribute that points to an arbitrary form, so if this attribute is set we need to query

package/src/nile-button-toggle/nile-button-toggle.ts

@@ -27,8 +27,6 @@ export class NileButtonToggle extends NileElement {
 		return [styles];
 	}
 
-  protected override COMPOSED: boolean=false;
-
   @property({ type: Boolean, reflect: true })
   active = false;
 

package/src/nile-button-toggle-group/nile-button-toggle-group.ts

@@ -26,8 +26,6 @@ export class NileButtonToggleGroup extends NileElement {
     return [styles];
   }
 
-  protected override BUBBLES: boolean=false;
-
   @queryAll('nile-button-toggle') private toggles!: NodeListOf<NileButtonToggle>;
 
   @query('slot:not([name])') private defaultSlot!: HTMLSlotElement;

package/src/nile-calendar/nile-calendar.test.ts

@@ -21,10 +21,10 @@ function wait(ms:number=50000) {
 }
 
 describe('NileCalendar', () => {
-  // it('renders correctly with default properties', async () => {
-  //   const el = await fixture<NileCalendar>(html`<nile-calendar></nile-calendar>`);
-  //   expect(el).shadowDom.to.equalSnapshot();
-  // });
+  it('renders correctly with default properties', async () => {
+    const el = await fixture<NileCalendar>(html`<nile-calendar></nile-calendar>`);
+    expect(el).shadowDom.to.equalSnapshot();
+  });
   
   it('should render correctly', async () => {
     const el = await fixture<NileCalendar>(html`<nile-calendar></nile-calendar>`);
@@ -306,7 +306,7 @@ describe('NileCalendar', () => {
     const durationInput = el.shadowRoot?.querySelector<NileInput>('nile-input.duration-input');
     
     if (durationInput) {
-      durationInput.dispatchEvent(new CustomEvent('nile-input',{detail:{value:'5'}}));// Set duration to 5 (e.g., 5 hours)
+      durationInput.dispatchEvent(new CustomEvent('nile-change',{detail:{value:'5'}}));// Set duration to 5 (e.g., 5 hours)
     }
 
     await elementUpdated(el); // Wait for the DOM to update after the input
@@ -338,5 +338,64 @@ describe('NileCalendar', () => {
     // Check if the emitted endDate is approximately now
     expect(endDate.getTime()).to.be.closeTo(now.getTime(), 1000); // The end date should be roughly now
   });
+
+  it('should allow deselection of date on clicking again on selected date', async () => {
+    const el = await fixture<NileCalendar>(html`
+      <nile-calendar showManualInput doubleClickUnselect></nile-calendar>
+    `);
+    await elementUpdated(el);
+    
+    // Get the current date element in the calendar
+    const currentDateElement = el.shadowRoot?.querySelector('div.days_container div.current__date__dot')?.parentElement?.parentElement;
+  
+    // Simulate a click on the current date after a brief timeout
+    setTimeout(() => currentDateElement?.click());
+  
+    // Wait for the 'nile-change' event to be emitted
+    const { detail: { value } } = await oneEvent(el, 'nile-change');
+  
+    // Update the element after the event
+    await elementUpdated(el);
+  
+    // Assertions
+    expect(value).to.exist;
+    expect(currentDateElement?.className).to.include('selected-date');
+
+    // Simulate a click on the current date after a brief timeout
+    currentDateElement?.click()
+    await elementUpdated(el);
+    
+    expect(currentDateElement?.className).to.not.include('selected-date');
+  })
+
+  it('should allow deselection of range on clicking on clear button', async () => {
+    const el = await fixture<NileCalendar>(html`
+      <nile-calendar range allowClear></nile-calendar>
+    `);
+    await elementUpdated(el);
+  
+    // Get day elements from the calendar, selecting two dates for range selection
+    const days = el.shadowRoot?.querySelectorAll('.days_container .day_date:not(.filler)') || [];
+    const firstDay = days[4] as HTMLElement;  // Choose the 5th day of the month
+    const lastDay = days[9] as HTMLElement;  // Choose the 10th day of the month
+
+    // Simulate click events for selecting the range (start and end date)
+    firstDay.click();
+    await elementUpdated(el); // Wait for updates after selection
+    lastDay.click();
+    await elementUpdated(el); // Wait for updates after range selection
+
+    // Ensure both dates are correctly selected in the DOM
+    expect(firstDay.classList.contains('range-start')).to.be.true;
+    expect(lastDay.classList.contains('range-end')).to.be.true;
+
+    // Find and click the "Apply" button to confirm the range
+    const clearButton = el.shadowRoot?.querySelector<NileButton>('.clear-button');
+    clearButton?.click()
+    await elementUpdated(el); // Wait for updates after range selection
+    
+    expect(firstDay.classList.contains('range-start')).to.be.false;
+    expect(lastDay.classList.contains('range-end')).to.be.false;
+  })
 });
 

package/src/nile-calendar/nile-calendar.ts

@@ -37,7 +37,6 @@ export class NileCalendar extends NileElement {
     return [styles];
   }
 
-  protected override BUBBLES: boolean=false;
 
 
   @property({ type: String, attribute: 'value' }) valueAttribute: | string | null = null;
@@ -91,8 +90,13 @@ export class NileCalendar extends NileElement {
 
   protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
     super.updated(changedProperties);
-
     if (changedProperties.has('valueAttribute')) {
+      if(!this.valueAttribute){
+        this.value=null;
+        this.startDate=null;
+        this.endDate=null;
+        this.isSelectingStart=true;
+      }
       const date = new Date(this.valueAttribute || '');
       if (!isNaN(date.getTime())) {
         const offset = date.getTimezoneOffset();
@@ -100,15 +104,8 @@ export class NileCalendar extends NileElement {
         this.currentMonth = this.value.getMonth();
         this.currentYear = this.value.getFullYear();
       }
-    }
-  }
-
-  attributeChangedCallback(name: string, _old: string | null, newValue: string | null): void {
-    if (name === 'value') {
-      this.valueAttribute = newValue;
       this.initializeValue();
-    } 
-    super.attributeChangedCallback(name, _old, newValue);
+    }
   }
 
   @watch('allowedDates')
@@ -136,21 +133,6 @@ export class NileCalendar extends NileElement {
     }
   }
   
-  @watch('value')
-  valueChanged() {
-    if (this.range && this.value) {
-      this.value = null;
-      return;
-    }
-
-    if (this.value && !isNaN(this.value.getTime())) {
-      const offset = this.value.getTimezoneOffset();
-      const localDate = new Date(this.value.getTime() - offset * 60 * 1000);
-      if (!isNaN(localDate.getTime())) {
-        this.valueAttribute = localDate.toISOString().split('T')[0];
-      }
-    }
-  }
 
   /**
    * Render method
@@ -183,7 +165,7 @@ export class NileCalendar extends NileElement {
           ${this.allowClear?
             html`
             <nile-button 
-            class="apply-button"
+            class="clear-button"
             variant="secondary"
             ?disabled="${ !this.startDate || !this.endDate }"
             @click="${this.clearDate}"
@@ -291,7 +273,7 @@ export class NileCalendar extends NileElement {
         inputmode="numeric"
         type="number"
         value="${this.selectedValue}" 
-        @nile-input="${this.handleDurationChange}"
+        @nile-change="${this.handleDurationChange}"
         placeholder="Enter Value"
         ></nile-input>
 
@@ -497,11 +479,9 @@ export class NileCalendar extends NileElement {
       this.valueAttribute='';
       this.startDate=null;
       this.endDate=null;
-      this.emitChangedData(null)
     }
     else{
       this.value=null;
-      this.emitChangedData({value:null})
     }
     this.emit('nile-clear')
   }
@@ -587,6 +567,7 @@ export class NileCalendar extends NileElement {
    * Function to handle relative date selection
    */
   handleDurationChange(event: CustomEvent) {
+    event.stopPropagation()
     event.detail.value = event.detail.value.replace(/e/gi, "");
     const duration=Number(event.detail.value);
     if(!duration) {
@@ -598,7 +579,8 @@ export class NileCalendar extends NileElement {
     }
   }
 
-  handleUnitChange(event: any) {
+  handleUnitChange(event: CustomEvent) {
+    event.stopPropagation()
     this.selectedUnit = event.detail.value;
     if (this.selectedUnit && this.selectedValue) {
       this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
@@ -646,6 +628,7 @@ export class NileCalendar extends NileElement {
    * Function to handle start time selecion
    */
   private handleStartTimeInput(event: CustomEvent): void {
+    event.stopPropagation()
     if (!this.startDate) {
       this.startDate = null;
       return;
@@ -663,6 +646,7 @@ export class NileCalendar extends NileElement {
    * Function to handle end time selecion
    */
   private handleEndTimeInput(event: CustomEvent): void {
+    event.stopPropagation()
     if (!this.endDate) {
       this.endDate = null;
       return;
@@ -693,63 +677,6 @@ export class NileCalendar extends NileElement {
     return regex.test(input);
   }
 
-  private handleStartDateInput(event: CustomEvent): void {
-    const date = this.parseDate(event.detail.value);
-    if (!this.isValidDateInput(date)) {
-      this.startDate = null;
-    }
-    if (date && (!this.endDate || date <= this.endDate)) {
-      this.startDate = date;
-    } else {
-      this.startDate = null;
-      this.endDate = null;
-    }
-  }
-
-  private handleEndDateInput(event: CustomEvent): void {
-    const date = this.parseDate(event.detail.value);
-    if (!this.isValidDateInput(date)) {
-      this.endDate = null;
-    }
-    if (date && (!this.startDate || date >= this.startDate)) {
-      this.endDate = date;
-    } else {
-      this.endDate = null;
-    }
-  }
-  
-  private isValidDateInput(input: any): boolean {
-    const regex = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/;
-    return regex.test(input);
-  }
-
-  private parseDate(dateString: string): Date | null {
-    const [day, month, year] = dateString.split('/').map(Number);
-    const date = new Date(year, month - 1, day);
-    return !isNaN(date.getTime()) ? date : null;
-  }
-
-  private formatDateRange(value: {
-    startDate: Date | null;
-    endDate: Date | null;
-  }): string {
-    if (!value) {
-      return value;
-    }
-    if (!value.startDate || !value.endDate) return '';
-    return `${this.formatDate(value.startDate)} - ${this.formatDate(
-      value.endDate
-    )}`;
-  }
-
-  private formatDate(date: Date | null): string {
-    if (!date) return '';
-    const day = String(date.getDate()).padStart(2, '0');
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const year = date.getFullYear();
-    return `${day}/${month}/${year}`;
-  }
-
   private formatTime(date: Date | null): string {
     if (!date) return '';
     const hours = String(date.getHours()).padStart(2, '0');
@@ -784,15 +711,6 @@ export class NileCalendar extends NileElement {
     });
   }
 
-  convertTZ(date: Date, tzString: any) {
-    return new Date(
-      (typeof date === 'string' ? new Date(date) : date).toLocaleString(
-        'en-US',
-        { timeZone: tzString }
-      )
-    );
-  }
-
   onTypeChange(event: CustomEvent) {
     this.type = event.detail.value;
     this.emit('nile-type-change', { value: this.type })

package/src/nile-card/nile-card.ts

@@ -29,8 +29,6 @@ import { CSSResultGroup } from 'lit';
 export class NileCard extends NileElements {
   static styles: CSSResultGroup = styles;
 
-  protected override BUBBLES: boolean=false;
-
   private readonly hasSlotController = new HasSlotController(this, 'footer');
 
   render() {

package/src/nile-checkbox/nile-checkbox.ts

@@ -59,8 +59,6 @@ export class NileCheckbox extends NileElement {
   }
  
   static styles: CSSResultGroup = styles;
-
-  protected override BUBBLES: boolean=false;
  
   @query('input[type="checkbox"]') input: HTMLInputElement;
  

package/src/nile-chip/nile-chip.ts

@@ -28,8 +28,6 @@ export class NileChip extends NileElement {
   public static get styles(): CSSResultArray {
     return [styles];
   }
-  
-  protected override BUBBLES: boolean=false;
 
   private readonly hasSlotController = new HasSlotController(
     this,
@@ -261,10 +259,6 @@ export class NileChip extends NileElement {
           )}
           <div class="nile-chip__auto-complete">
             <nile-auto-complete
-              @nile-show="${(e:CustomEvent)=>this.emit('nile-show')}"
-              @nile-after-show="${(e:CustomEvent)=>this.emit('nile-after-show')}"
-              @nile-hide="${(e:CustomEvent)=>this.emit('nile-hide')}"
-              @nile-after-hide="${(e:CustomEvent)=>this.emit('nile-after-hide')}"
               .allMenuItems=${this.filteredAutoCompleteOptions}
               .value=${this.inputValue}
               ?isDropdownOpen=${this.isDropdownOpen}

package/src/nile-code-editor/nile-code-editor.ts

@@ -48,8 +48,6 @@ const TIME_OUT_DURATION=200;
  */
 @customElement('nile-code-editor')
 export class NileCodeEditor extends NileElement {
-
-  protected override BUBBLES: boolean=false;
   
   @query('.code-mirror') codeEditor: HTMLInputElement;
 

package/src/nile-content-editor/nile-content-editor.ts

@@ -31,8 +31,6 @@ export class NileContentEditor extends NileElement {
  * @event nile-change - Emitted when the control's value changes.  
  */
 
-  protected override BUBBLES: boolean=false;
-
   @property() value: string = '';
 
   @property() options: Array<any>;

package/src/nile-date-picker/nile-date-picker.ts

@@ -33,8 +33,6 @@ export class NileDatePicker extends NileElement {
     return [styles];
   }
 
-  protected override BUBBLES: boolean=false;
-
   @property({ type: Boolean }) range = false;
 
   @property({ type: Boolean }) hideTypes = false;
@@ -66,27 +64,20 @@ export class NileDatePicker extends NileElement {
    */
   render(): TemplateResult {
     return html`
-      <nile-dropdown 
-        .open="${this.open}" 
-        part="dd-base" 
-        .hoist="${true}" 
-        distance="6" 
-        exportparts="base"
-        @nile-show="${(e:CustomEvent)=>this.emit('nile-show')}"
-        @nile-after-show="${(e:CustomEvent)=>this.emit('nile-after-show')}"
-        @nile-hide="${(e:CustomEvent)=>this.emit('nile-hide')}"
-        @nile-after-hide="${(e:CustomEvent)=>this.emit('nile-after-hide')}"
-      >
+      <nile-dropdown .open="${this.open}" part="dd-base" .hoist="${true}" distance="6" exportparts="base">
         <slot slot="trigger" part="trigger" name="trigger"></slot>
         <nile-calendar
           .hideTypes="${this.hideTypes}"
         	.type="${this.type}"
           value="${this.value}"
           .range="${this.range}"
-          @nile-clear="${(e:CustomEvent)=>this.emit('nile-clear')}"
+          @nile-init="${(e:CustomEvent)=>e.stopPropagation()}"
+          @nile-destroy="${(e:CustomEvent)=>e.stopPropagation()}"
+          @nile-changed="${(e:CustomEvent)=>e.stopPropagation()}"
           @nile-change="${this.handleChanged}"
-          @nile-type-change="${(e:CustomEvent)=>this.emit('nile-type-change',e.detail)}"
           .allowedDates="${this.allowedDates}"
+          @nile-type-change="${(e:CustomEvent)=>{e.stopPropagation();this.emit('nile-type-change',e.detail)}}"
+          @nile-clear="${(e:CustomEvent)=>{e.stopPropagation();this.emit('nile-clear')}}"
           .hideDurationFields="${this.hideDurationFields}"
           .showManualInputs="${this.showManualInputs}"
           .doubleClickUnselect="${this.doubleClickUnselect}"
@@ -97,6 +88,7 @@ export class NileDatePicker extends NileElement {
   }
 
   handleChanged(event: CustomEvent) {
+    event.stopPropagation()
     this.emit('nile-changed', event.detail);
     this.emit('nile-change', event.detail);
     if (this.dropdown) {

package/src/nile-dialog/nile-dialog.ts

@@ -32,8 +32,6 @@ import NileElement from '../internal/nile-element';
 export class NileDialog extends NileElement {
   static styles: CSSResultGroup = styles;
 
-  protected override BUBBLES: boolean=false;
-  
   private readonly hasSlotController = new HasSlotController(this, 'footer','sublabel','label');
   private modal: Modal;
   private originalTrigger: HTMLElement | null;

package/src/nile-drawer/nile-drawer.ts

@@ -81,8 +81,6 @@ export class NileDrawer extends NileElement {
 
 	static styles: CSSResultGroup = styles;
 
-  protected override BUBBLES: boolean=false;
-
   private readonly hasSlotController = new HasSlotController(this, 'footer');
   private modal: Modal;
   private originalTrigger: HTMLElement | null;

package/src/nile-empty-state/nile-empty-state.ts

@@ -28,8 +28,6 @@ export class NileEmptyState extends NileElement {
     return [styles];
   }
 
-  protected override BUBBLES: boolean=false;
-
   @property() size: 'sm' | 'md' | 'lg' = 'md';
 
   @property() variant: