@aquera/nile-elements 0.0.120 → 0.0.121

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.120",
+  "version": "0.0.121",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/rollup.config.js

@@ -71,6 +71,7 @@ export default [
       replace({
         'Reflect.decorate': 'undefined',
         'process.env.NODE_ENV': JSON.stringify('production'),
+        'process.env.LIT_DEV_MODE': JSON.stringify('false'),
       }),
       resolve(),
       terser({

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-calendar/nile-calendar.ts

@@ -91,8 +91,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 +105,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 +134,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
@@ -291,7 +274,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 +480,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 +568,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) {
@@ -599,6 +581,7 @@ export class NileCalendar extends NileElement {
   }
 
   handleUnitChange(event: any) {
+    event.stopPropagation()
     this.selectedUnit = event.detail.value;
     if (this.selectedUnit && this.selectedValue) {
       this.handleTimeValueClick(this.selectedUnit, this.selectedValue, event);
@@ -646,6 +629,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 +647,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;

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

@@ -71,8 +71,14 @@ describe('nile-input', () => {
     el.value = '123';
     el.reportValidity();
     await el.updateComplete;
-    expect(el.validationMessage).to.equal('Please match the format requested.');
+  
+    const validMessages = [
+      'Please match the requested format.',
+      'Please match the format requested.'
+    ];
+    expect(validMessages).to.include(el.validationMessage);
   });
+  
 
   it('should emit events on blur', async () => {
     const el = await fixture<NileInput>(html`<nile-input></nile-input>`);

package/src/nile-popover/nile-popover.ts

@@ -57,6 +57,8 @@ export class NilePopover extends NileElement {
   /** The distance in pixels from which to offset the popover away from its target. */
   @property({ type: Number }) distance = 18;
 
+  @property({ type: Boolean, reflect: true }) preventOverlayClose = false;
+
   @property({ type: Boolean, attribute: 'arrow' }) arrow = true;
 
   /** Gives the title to the popover */
@@ -155,7 +157,7 @@ export class NilePopover extends NileElement {
   };
 
   private handleDocumentClick = () => {
-    if (this.isShow) {
+    if (this.isShow && !this.preventOverlayClose) {
       this.isShow = false;
     }
   };

package/web-test-runner.config.mjs

@@ -29,7 +29,12 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
 
   /** Browsers to run tests on */
   browsers: [
-    puppeteerLauncher({ launchOptions: { headless: true } }),
+    puppeteerLauncher({
+      launchOptions: {
+        headless: true,
+        args: ['--no-sandbox', '--disable-setuid-sandbox'],
+      },
+    }),
   ],
 
   /** Test framework configuration */