@aquera/nile-elements 0.0.45 → 0.0.46

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.45",
+  "version": "0.0.46",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -104,4 +104,4 @@
       "prettier --write"
     ]
   }
-}
+}

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

@@ -169,6 +169,35 @@ export const styles = css`
     box-shadow: none;
   }
 
+  /* ghost  */
+  .button--standard.button--ghost{
+    background-color: var(--nile-colors-button-tertiary);
+    border-color: transparent;
+    color: var(--nile-colors-button-tertiary-text);
+  }
+
+  .button--standard.button--ghost:hover:not(.button--disabled) {
+    background-color: var(--nile-colors-button-tertiary-hover);
+    border-color: transparent;
+    color: var(--nile-colors-button-tertiary-text);
+  }
+
+  .button--standard.button--ghost:active:not(.button--disabled) {
+    background-color: var(--nile-colors-button-tertiary-pressed);
+    border-color:transparent;
+    color: var(--nile-colors-button-tertiary-text);
+  }
+
+  .button--standard.button--ghost.button--disabled,
+  .button--standard.button--ghost.button--disabled:hover,
+  .button--standard.button--ghost.button--disabled:active {
+    border-color:transparent;
+    background-color: var(--nile-colors-button-tertiary-disabled);
+    color: var(--nile-colors-button-tertiary-disabled-text);
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
   /* caution */
   .button--standard.button--caution {
     background-color: var(--nile-colors-button-caution);
@@ -233,6 +262,18 @@ export const styles = css`
         --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;
       }
 
+        /* Ghost Variant */
+      .button--standard.button--ghost ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+      }
+      .button--standard.button--ghost:hover:not(.button--disabled) ::slotted(nile-icon),
+      .button--standard.button--ghost:active:not(.button--disabled) ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-tertiary-text) !important;
+      }
+      .button--standard.button--ghost ::slotted(nile-icon) {
+        --nile-svg-fill: var(--nile-colors-button-tertiary-disabled-text) !important;
+      }
+
       /* Caution Variant */
       .button--standard.button--caution ::slotted(nile-icon) {
         --nile-svg-fill: var(--nile-colors-button-caution-text) !important;

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

@@ -62,7 +62,7 @@ export class NileButton extends NileElement implements NileFormControl {
   @property() title = ''; // make reactive to pass through
 
   /** The button's theme variant. */
-  @property({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' | 'caution'  = 'primary';
+  @property({ reflect: true }) variant: 'primary' | 'secondary' | 'tertiary' | 'caution'|'ghost'  = 'primary';
 
   /** The button's size. */
   @property({ reflect: true }) size:  'medium' = 'medium';
@@ -292,6 +292,7 @@ export class NileButton extends NileElement implements NileFormControl {
           'button--secondary': this.variant === 'secondary',
           'button--tertiary': this.variant === 'tertiary',
           'button--caution': this.variant === 'caution',
+          'button--ghost': this.variant === 'ghost',
           'button--medium': this.size === 'medium',
           'button--caret': this.caret,
           'button--circle': this.circle,

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

@@ -174,6 +174,9 @@ export const styles = css`
     margin-top: 6px;
     padding: 0 16px;
     width: 290px;
+    display:flex;
+    flex-wrap:wrap;
+    gap:8px;
   }
 
   .calender-input--relative {
@@ -186,11 +189,11 @@ export const styles = css`
     justify-content: space-between;
     gap: 8px;
     margin-top: 12px;
-    width: 125px;
+    width:auto;
   }
 
   .manual-input {
-    width: 100%;
+    width:125px;
   }
 
   .manual-input-label {
@@ -341,6 +344,11 @@ export const styles = css`
   .months-values {
     gap: 16px;
   }
+
+  .not-allowed {
+    pointer-events: none;
+    color:var(--nile-colors-dark-500);
+  }
 `;
 
 export default [styles];

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

@@ -12,7 +12,7 @@ import {
   CSSResultArray,
   TemplateResult,
 } from 'lit-element';
-import { customElement } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import { styles } from './nile-calendar.css';
 import { animateTo, stopAnimations } from '../internal/animate';
 import { classMap } from 'lit/directives/class-map.js';
@@ -43,7 +43,7 @@ import { TIMEZONES } from './timezones';
 @customElement('nile-calendar')
 export class NileCalendar extends NileElement {
   /**
-   * The styles for NileCalendar
+* The styles for NileCalendar
    * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
    */
   public static get styles(): CSSResultArray {
@@ -60,6 +60,9 @@ export class NileCalendar extends NileElement {
 
   @property({ type: Object }) value: any;
 
+  @property({ type: Object, attribute: 'allowed-dates' })
+  allowedDates: any = {};
+
   @property({ type: Object }) rangeValue: any;
 
   @property({ type: String, attribute: 'value' }) valueAttribute:
@@ -85,6 +88,62 @@ export class NileCalendar extends NileElement {
 
   @property({ type: String }) selectedTimeZone: string = 'local';
 
+  @state() validAllowedDates = true;
+
+  firstUpdated() {
+    const allowedDatesAttribute = this.getAttribute('allowed-dates');
+    
+    if (allowedDatesAttribute !== null ) {
+      try {
+        this.allowedDates = JSON.parse(allowedDatesAttribute);
+      } catch (error) {
+        console.error('Error parsing allowed-dates attribute:', error);
+      }
+    }
+    else
+    {
+      this.validAllowedDates=false;
+    }
+  }
+
+  @watch('allowedDates')
+  checkValidAllowedDate() {
+    if (Object.keys(this.allowedDates).length ==0) {
+      this.validAllowedDates = false;
+      return;
+    }
+    const startDate = new Date(
+      Date.UTC(
+        this.allowedDates?.startDate?.slice(0, 4),
+        this.allowedDates?.startDate?.slice(5, 7) - 1,
+        this.allowedDates?.startDate?.slice(8, 10)
+      )
+    );
+    const endDate = new Date(
+      Date.UTC(
+        this.allowedDates?.endDate?.slice(0, 4),
+        this.allowedDates?.endDate?.slice(5, 7) - 1,
+        this.allowedDates?.endDate?.slice(8, 10)
+      )
+    );
+
+    if (startDate > endDate) {
+      console.error('StartDate must be greater than endDate');
+      this.validAllowedDates=false;
+    }
+    else
+    {
+      this.validAllowedDates=true;
+    }
+  }
+
+  @property({ type: Boolean,attribute:'hide-time-input' }) hideTimeInput: Boolean = false;
+
+
+  @property({ type: Array, attribute: 'hide-duration-fields' })
+  hideDurationFields: String[] = [];
+  @property({ type: Boolean , attribute: 'hide-time-zone' }) hideTimeZone: Boolean = false;
+
   @watch('value')
   valueChanged() {
     if (this.range && this.value) {
@@ -186,7 +245,7 @@ export class NileCalendar extends NileElement {
         this.currentYear = this.value.getFullYear();
       }
     }
-    this.emit('nile-init');
+        this.emit('nile-init');
   }
 
   disconnectedCallback() {
@@ -298,6 +357,30 @@ export class NileCalendar extends NileElement {
     );
   }
 
+  isAllowedDate(day: number, month: number, year: number) {
+    if (!this.validAllowedDates) {
+      return true;
+    }
+    const dateToCheck = new Date(Date.UTC(year, month, day));
+    const startDate = new Date(
+      Date.UTC(
+        this.allowedDates?.startDate?.slice(0, 4),
+        this.allowedDates?.startDate?.slice(5, 7) - 1,
+        this.allowedDates?.startDate?.slice(8, 10)
+      )
+    );
+    const endDate = new Date(
+      Date.UTC(
+        this.allowedDates?.endDate?.slice(0, 4),
+        this.allowedDates?.endDate?.slice(5, 7) - 1,
+        this.allowedDates?.endDate?.slice(8, 10)
+      )
+    );
+    endDate.setUTCHours(23, 59, 59, 999);
+    const isWithinRange = dateToCheck >= startDate && dateToCheck <= endDate;
+    return isWithinRange;
+  }
+
   private renderMonth(
     year: number,
     month: number,
@@ -375,8 +458,8 @@ export class NileCalendar extends NileElement {
           </nile-icon>
           <span
             >${new Date(year, month).toLocaleString('default', {
-      month: 'long',
-    })}
+              month: 'long',
+            })}
             ${year}</span
           >
           <nile-icon
@@ -399,31 +482,33 @@ export class NileCalendar extends NileElement {
         </div>
         <div class="days">
           ${allDays.map((day, index) => {
-      const isCurrentMonth =
-        index >= fillerDaysBefore.length &&
-        index < fillerDaysBefore.length + daysArray.length;
-      return html` <div
-              class="day ${isSelectedDate(
-        day,
-        month,
-        year,
-        isCurrentMonth
-      )} ${isInRange(day, month, year, isCurrentMonth)
-        ? 'in-range'
-        : ''} ${!isCurrentMonth ? 'filler' : ''}
+            const isCurrentMonth =
+              index >= fillerDaysBefore.length &&
+              index < fillerDaysBefore.length + daysArray.length;
+            return html` <div
+              class="day
+              ${this.isAllowedDate(day, month, year) ? '' : 'not-allowed'}
+              ${isSelectedDate(day, month, year, isCurrentMonth)} ${isInRange(
+                day,
+                month,
+                year,
+                isCurrentMonth
+              )} ${isInRange(day, month, year, isCurrentMonth)
+                ? 'in-range'
+                : ''} ${!isCurrentMonth ? 'filler' : ''}
                 ${this.isCurrentDate(day, month, year) && isCurrentMonth
-          ? 'current-date'
-          : ''}
+                ? 'current-date'
+                : ''}
                 "
               @click="${() => {
-          if (isCurrentMonth) {
-            this.selectDate(day, month, year);
-          }
-        }}"
+                if (isCurrentMonth) {
+                  this.selectDate(day, month, year);
+                }
+              }}"
             >
               ${day}
             </div>`;
-    })}
+          })}
         </div>
       </div>
     `;
@@ -594,8 +679,8 @@ export class NileCalendar extends NileElement {
           <div
             class="time-value ${this.selectedUnit === unit &&
             this.selectedValue === value
-            ? 'time-value--selected'
-            : ''}"
+              ? 'time-value--selected'
+              : ''}"
             @click=${(e: any) => this.handleTimeValueClick(unit, value, e)}
           >
             ${value}
@@ -632,7 +717,6 @@ export class NileCalendar extends NileElement {
    */
   render(): TemplateResult {
     const timeZones: string[] = TIMEZONES;
-
     const daysArray = this.getDaysArray(this.currentYear, this.currentMonth);
     const nextMonth = (this.currentMonth + 1) % 12;
     const nextYear =
@@ -643,8 +727,8 @@ export class NileCalendar extends NileElement {
       <div
         class="base ${this.range ? 'base__range' : ''} ${this.type ===
         'relative'
-        ? 'base__relative'
-        : ''}"
+          ? 'base__relative'
+          : ''}"
       >
         <div class="calendar-config ${!this.range ? 'hidden' : ''}">
           <div class="calendar-switcher">
@@ -655,7 +739,7 @@ export class NileCalendar extends NileElement {
           </div>
         </div>
 
-        <div class="calendar-timezone ${!this.range ? 'hidden' : ''}">
+        <div class="calendar-timezone ${!this.range || this.hideTimeZone ? 'hidden' : ''}">
           <nile-select
             hoist
             value=${this.selectedTimeZone}
@@ -671,43 +755,63 @@ export class NileCalendar extends NileElement {
         >
           <div class="calendar-container ${this.range ? 'with-margin' : ''}">
             ${this.renderMonth(
-          this.currentYear,
-          this.currentMonth,
-          this.getDaysArray(this.currentYear, this.currentMonth)
-        )}
+              this.currentYear,
+              this.currentMonth,
+              this.getDaysArray(this.currentYear, this.currentMonth)
+            )}
           </div>
         </div>
 
         <div class="unit-container ${this.type !== 'relative' ? 'hidden' : ''}">
-          <div class="time-unit-group">
+          <div
+            class="time-unit-group ${this.hideDurationFields?.includes('minutes')
+              ? 'hidden'
+              : ''} "
+          >
             <div class="time-unit-name"><span>Minutes</span></div>
             <div class="time-unit-value minute-values">
               ${this.renderTimeValues('minutes', [1, 5, 15, 30, 45])}
             </div>
           </div>
 
-          <div class="time-unit-group">
+          <div
+            class="time-unit-group ${this.hideDurationFields?.includes('hours')
+              ? 'hidden'
+              : ''}"
+          >
             <div class="time-unit-name"><span>Hours</span></div>
             <div class="time-unit-value hours-values">
               ${this.renderTimeValues('hours', [1, 2, 3, 6, 8, 12])}
             </div>
           </div>
 
-          <div class="time-unit-group">
+          <div
+            class="time-unit-group ${this.hideDurationFields?.includes('days')
+              ? 'hidden'
+              : ''}"
+          >
             <div class="time-unit-name"><span>Days</span></div>
             <div class="time-unit-value">
               ${this.renderTimeValues('days', [1, 2, 3, 4, 5, 6])}
             </div>
           </div>
 
-          <div class="time-unit-group">
+          <div
+            class="time-unit-group ${this.hideDurationFields?.includes('weeks')
+              ? 'hidden'
+              : ''}"
+          >
             <div class="time-unit-name"><span>Weeks</span></div>
             <div class="time-unit-value weeks-values ">
               ${this.renderTimeValues('weeks', [1, 2, 4, 6])}
             </div>
           </div>
 
-          <div class="time-unit-group">
+          <div
+            class="time-unit-group ${this.hideDurationFields?.includes('months')
+              ? 'hidden'
+              : ''}"
+          >
             <div class="time-unit-name"><span>Months:</span></div>
             <div class="time-unit-value months-values ">
               ${this.renderTimeValues('months', [3, 6, 12, 15])}
@@ -716,71 +820,93 @@ export class NileCalendar extends NileElement {
         </div>
 
         ${this.range && this.type === 'relative'
-        ? html`
+          ? html`
           <div class="calender-input calender-input--relative">
             <div class="unit-input-container">
-              <nile-input class="manual-input duration-input" label="Duration"  value="${this.selectedValue
-          }"
+              <nile-input class="manual-input duration-input" label="Duration"  value="${
+                this.selectedValue
+              }"
               @nile-input="${this.handleDurationChange}"
               placeholder="Enter Value" ></nile-input>
-              <nile-select class="manual-input  time-input"  label="Unit of time" style="margin-top:3px" value="${this.selectedUnit
-          }"
+              <nile-select class="manual-input  time-input"  label="Unit of time" style="margin-top:3px" value="${
+                this.selectedUnit
+              }"
               @nile-change="${this.handleUnitChange}"
               >
-                <nile-option value="minutes"> Minutes </nile-option>
-                <nile-option value="hours"> Hours </nile-option>
-                <nile-option value="days"> Days </nile-option>
-                <nile-option value="weeks"> Weeks </nile-option>
-                <nile-option value="months"> Months </nile-option>
+                <nile-option value="minutes" class="${
+                  this.hideDurationFields?.includes('minutes') ? 'hidden' : ''
+                }"> Minutes </nile-option>
+                <nile-option value="hours" class="${
+                  this.hideDurationFields?.includes('hours') ? 'hidden' : ''
+                }"> Hours </nile-option>
+                <nile-option value="days" class="${
+                  this.hideDurationFields?.includes('days') ? 'hidden' : ''
+                }"> Days </nile-option>
+                <nile-option value="weeks" class="${
+                  this.hideDurationFields?.includes('weeks') ? 'hidden' : ''
+                }"> Weeks </nile-option>
+                <nile-option value="months" class="${
+                  this.hideDurationFields?.includes('months') ? 'hidden' : ''
+                }"> Months </nile-option>
               </nile-select>
 
             </div>
 
           <div class="button-container--relative">
-            <nile-button class="apply-button" variant="primary"  ?disabled="${!this.startDate || !this.endDate
-          }"  @click="${this.confimRange}"> Apply</nile-button>
+            <nile-button class="apply-button" variant="primary"  ?disabled="${
+              !this.startDate || !this.endDate
+            }"  @click="${this.confimRange}"> Apply</nile-button>
             </div>
 
 
         </div>
         </div>
         `
-        : ''}
+          : ''}
         ${this.range && this.type === 'absolute'
-        ? html`
+          ? html`
           <div class="calender-input">
-            <span class="manual-input-label">From </span>
-            <div class="from">
-              <nile-input class="manual-input" value="${this.formatDate(
-          this.startDate
-        )}" placeholder="DD/MM/YYYY" @nile-change="${this.handleStartDateInput
-          }"></nile-input>
-              <nile-input class="manual-input" value="${this.formatTime(
-            this.startDate
-          )}" placeholder="HH:MM:SS" @nile-change="${this.handleStartTimeInput
-          }"> </nile-input>
-
+            <div>
+                  <span class="manual-input-label">From </span>
+                  <div class="from">
+                        <nile-input class="manual-input" value="${this.formatDate(
+                          this.startDate
+                        )}" placeholder="DD/MM/YYYY" @nile-change="${
+                        this.handleStartDateInput
+                      }"></nile-input>
+                        <nile-input class="manual-input  ${this.hideTimeInput ? 'hidden':''}" value="${this.formatTime(
+                          this.startDate
+                        )}" placeholder="HH:MM:SS" @nile-change="${
+                        this.handleStartTimeInput
+                      }"> </nile-input>
+                  </div>
             </div>
-<br>
-            <span class="manual-input-label">To </span>
-            <div class="from">
-            <nile-input class="manual-input" value="${this.formatDate(
-            this.endDate
-          )}" placeholder="DD/MM/YYYY" @nile-change="${this.handleEndDateInput
-          }"></nile-input>
-            <nile-input class="manual-input" value="${this.formatTime(
-            this.endDate
-          )}" placeholder="HH:MM:SS" @nile-change="${this.handleEndTimeInput
-          }"> </nile-input>
-          </div>
+              
+            <div> 
+                  <span class="manual-input-label">To </span>
+                  <div class="from">
+                      <nile-input class="manual-input" value="${this.formatDate(
+                        this.endDate
+                      )}" placeholder="DD/MM/YYYY" @nile-change="${
+                        this.handleEndDateInput
+                      }"></nile-input>
+                      <nile-input class="manual-input  ${this.hideTimeInput ? 'hidden':''} " value="${this.formatTime(
+                        this.endDate
+                      )}" placeholder="HH:MM:SS" @nile-change="${
+                        this.handleEndTimeInput
+                      }"> </nile-input>
+                  </div>
+            </div>
+            
         </div>
         <div class="button-container">
-            <nile-button class="apply-button"  ?disabled="${!this.startDate || !this.endDate
-          }"  @click="${this.confimRange}"> Apply</nile-button>
+            <nile-button class="apply-button"  ?disabled="${
+              !this.startDate || !this.endDate
+            }"  @click="${this.confimRange}"> Apply</nile-button>
             </div>
         </div>
         `
-        : ''}
+          : ''}
       </div>
     `;
   }
@@ -792,4 +918,4 @@ declare global {
   interface HTMLElementTagNameMap {
     'nile-calendar': NileCalendar;
   }
-}
+}

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

@@ -35,24 +35,38 @@ export class NileDatePicker extends NileElement {
 
   @property({ type: Boolean }) range = false;
 
+  @property({ type: Boolean, attribute: 'hide-time-input' }) hideTimeInput =
+    false;
+
+  @property({ type: Boolean ,attribute: 'hide-time-zone' }) hideTimeZone = false;
+
   @property() value: any;
+  @property({ type: Array, attribute: 'hide-duration-fields' })
+  hideDurationFields: any = [];
 
-  @query('nile-dropdown') dropdown: NileDropdown;
+  @property({ attribute: 'allowed-dates' })
+  allowedDates: any ;
 
+  @query('nile-dropdown') dropdown: NileDropdown;
 
   /**
    * Render method
    * @slot This is a slot test
    */
   render(): TemplateResult {
+    
     return html`
       <nile-dropdown .hoist="${true}" distance="6">
-        <slot
-        slot="trigger"
-        part="trigger"
-        name="trigger"
-      ></slot>
-      <nile-calendar value="${this.value}" .range="${this.range}" @nile-changed="${this.handleChanged}"></nile-calendar>
+        <slot slot="trigger" part="trigger" name="trigger"></slot>
+        <nile-calendar
+          value="${this.value}"
+          .range="${this.range}"
+          @nile-changed="${this.handleChanged}"
+          allowed-dates="${this.allowedDates}"
+          .hideTimeInput="${this.hideTimeInput}"
+          .hideDurationFields="${this.hideDurationFields}"
+          .hideTimeZone="${this.hideTimeZone}"
+        ></nile-calendar>
       </nile-dropdown>
     `;
   }

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

@@ -65,6 +65,16 @@ export class NilePopover extends LitElement {
     | 'center'
     | 'anchor' = 'anchor';
 
+
+  /**
+   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+   * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
+   */
+  @property({ type: Boolean }) hoist = false;
+
+  @property({ type: Boolean }) flip = false;
+
+
   /* #endregion */
 
   /* #region Methods */
@@ -86,6 +96,13 @@ export class NilePopover extends LitElement {
 
   private handleClick = () => {
     this.isShow = !this.isShow;
+    const allPopovers = document.querySelectorAll('nile-popover');
+    
+    allPopovers.forEach(popover => {
+      if (popover !== this) {
+        popover.isShow=false;
+      }
+    });
   };
 
   private handleDocumentClick = () => {
@@ -103,8 +120,9 @@ export class NilePopover extends LitElement {
         placement="${this.placement}"
         @click=${(e: Event) => e.stopPropagation()}
         arrowPlacement="${this.arrowPlacement}"
-        flip
+        .flip="${this.flip}"
         shift
+        strategy=${this.hoist ? 'fixed' : 'absolute'}
       >
         <slot
           slot="anchor"
@@ -118,7 +136,7 @@ export class NilePopover extends LitElement {
               class="popover__box"
             >
               <slot name="title" class="popover__title">${this.title}</slot>
-              <slot></slot>
+              <slot part="base"></slot>
               <slot name="action" class="popover__action"> </slot>
             </div>`
           : html``}