@aquera/nile-elements 0.1.56 → 0.1.57-beta-1.1

package/package.json

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

package/rollup.config.js

@@ -18,9 +18,14 @@ export default [
   {
     input: Object.fromEntries(
       glob.sync('src/**/*.ts').map(file => [
-        path
-          .relative('src', file)
-          .slice(0, -path.extname(file).length),
+        // This removes `src/` as well as the file extension from each file, so e.g.
+        // src/nested/foo.js becomes nested/foo
+        path.relative(
+          'src',
+          file.slice(0, file.length - path.extname(file).length)
+        ),
+        // This expands the relative paths to absolute paths, so e.g.
+        // src/nested/foo becomes /project/src/nested/foo.js
         fileURLToPath(new URL(file, import.meta.url)),
       ])
     ),
@@ -56,7 +61,6 @@ export default [
         ],
       },
     ],
-    preserveEntrySignatures: false,
     onwarn(warning) {
       if (warning.code !== 'THIS_IS_UNDEFINED') {
         console.error(`(!) ${warning.message}`);
@@ -70,7 +74,6 @@ export default [
         'process.env.LIT_DEV_MODE': JSON.stringify('false'),
       }),
       resolve(),
-      commonjs(),
       terser({
         ecma: 2017,
         module: true,
@@ -84,26 +87,35 @@ export default [
       styles(),
       summary(),
     ],
+    preserveEntrySignatures: false,
   },
-  {
-    input: 'src/index.ts',
-   output: {
-    file: 'dist/index.js',      
-    format: 'es',
-    sourcemap: false,
-    inlineDynamicImports: true,
-  },
-
-    external: [], 
-    plugins: [
-      resolve(),
-      commonjs(),
-      typescript({
-        tsconfig: './tsconfig.json',
-        declaration: true,
-        declarationDir: 'dist/types',
-      }),
-      terser(),
-    ],
-  },
-];
+  // {
+  //   input: 'src/index.ts',
+  //   output: {
+  //     file: 'dist/index.iife.js',
+  //     format: 'iife',
+  //     name: 'NileElement'
+  //   },
+  //   plugins: [
+  //     typescript(),
+  //     replace({
+  //       'Reflect.decorate': 'undefined',
+  //       'process.env.NODE_ENV': JSON.stringify('production'),
+  //     }),
+  //     resolve(),
+  //     terser({
+  //       ecma: 2017,
+  //       module: true,
+  //       warnings: true,
+  //       mangle: {
+  //         properties: {
+  //           regex: /^__/,
+  //         },
+  //       },
+  //     }),
+  //     styles(),
+  //     summary(),
+  //     commonjs()
+  //   ],
+  // },
+];

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

@@ -17,7 +17,7 @@ export const styles = css`
   .base {
     background-color: white;
     border-radius: 8px;
-    width: 300px;
+    width: 288px;
     box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);
     box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100);
   }
@@ -66,7 +66,7 @@ export const styles = css`
   .day_date ,.day_name{
 		font-family: var( --nile-font-family-serif);
 		font-style: normal;
-		font-size: 14px;
+		font-size: 12px;
 		line-height: 20px;
 		text-align: center;
 
@@ -87,7 +87,7 @@ export const styles = css`
   }
 
 	.current__date__dot{
-		background-color:white;
+		background-color:var(--nile-colors-primary-600);
 		position:absolute;
 		border-radius:50%;
 		height:5px;
@@ -113,7 +113,7 @@ export const styles = css`
   .selected-date {
     color: white;
     border-radius: 4px;
-    background: var(--nile-colors-primary-600);
+    background: var(--nile-colors-blue-400);
   }
 
   .selected-date:hover {
@@ -124,27 +124,30 @@ export const styles = css`
   .range-start,
   .range-end {
     border-radius: 4px;
-    background: var(--nile-colors-primary-600);
-    color: white;
+    background: var(--nile-colors-blue-400);
+    color: var(--nile-colors-dark-900);
   }
 
   .selected-date:hover,
   .range-start:hover,
   .range-end:hover,
   .day_date.in-range:hover {
-    background: var(--nile-colors-primary-700);
+    background: var(--nile-colors-blue-500);
   }
 
   .range-start.in-range {
-    background: var(--nile-colors-primary-600);
+    background: var(--nile-colors-blue-400);
     border-radius: 4px 0 0 4px;
-    color: white;
+    color: var(--nile-colors-dark-900);
   }
 
   .range-end {
-    background: var(--nile-colors-primary-600);
+    background: var(--nile-colors-blue-400);
     border-radius: 0 4px 4px 0;
-    color: white;
+    color: var(--nile-colors-dark-900);
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.2px;
   }
 
   .range-middle {
@@ -160,13 +163,13 @@ export const styles = css`
   }
 
   .day_date.in-range:not(.range-start,.range-end, .selected-date) {
-    background: var(--nile-colors-neutral-400);
+    background: var(--nile-colors-neutral-100);
   }
 
   .selected-date {
-    color: white;
     border-radius: 4px;
-    background: var(--nile-colors-primary-600);
+    background: var(--nile-colors-blue-400);
+    color: var(--nile-colors-dark-900);
   }
 
   .not-allowed{
@@ -229,14 +232,17 @@ export const styles = css`
   }
 
   .unit-container{
-    display:grid;
-    grid-template-columns: auto auto;
-    row-gap:var(--nile-spacing-spacing-2xl);
-    column-gap: var(--nile-spacing-spacing-sm);
-    padding: 16px;
-    padding-bottom: 0;
+ display: flex;
+  flex-direction: column;
+  gap: 24px;
   }
-  
+ 
+ 
+
+
+
+
+
   .duration-name{
     display:flex;
     align-items:center;
@@ -254,6 +260,7 @@ export const styles = css`
     font-style: normal;
     font-weight: 400;
     line-height: 20px;
+    gap: 6px;
   }
 
   .duration__value{
@@ -263,19 +270,23 @@ export const styles = css`
     height: 34px;
     cursor: pointer;
     border-radius: 4px;
+    border: 1px solid var(--nile-colors-neutral-500);
   }
 
   .duration__value:hover{
-    background: var(--nile-colors-neutral-100);
+    background: var(--nile-colors-neutral-400);
   }
 
   .duration__value--selected{
-    background-color:var(--nile-colors-primary-600);
-    color: white;
+    background-color:var(--nile-colors-blue-400);
+    color: black;
+    font-weight: 500;
+    border: 1px solid transparent;
   }
 
   .duration__value--selected:hover{
-    background:var(--nile-colors-primary-700);
+    background:var(--nile-colors-blue-500);
+    font-weight: 500;
   }
 
   nile-input::part(input)::-webkit-inner-spin-button,
@@ -298,6 +309,121 @@ export const styles = css`
   .duration-input,.time-input,.manual-input {
     width: 125px;
   }
+
+
+nile-dropdown[open] > span[slot="trigger"] .calendar-header__caret {
+  transform: rotate(180deg);
+}
+
+
+.calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 14px;
+  letter-spacing: 0.2px;
+  font-feature-settings: 'liga' off, 'clig' off;
+}
+
+.calendar-header__center {
+  display: flex;
+  align-items: center;
+  gap: 6px; 
+}
+
+.calendar-header__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1;
+  background: transparent;
+  color: var(--nile-colors-dark-900);
+}
+
+.calendar-header__caret {
+  width: 1em;
+  height: 1em;
+  transition: transform 0.2s ease;
+  transform-origin: center;
+}
+
+ .calendar-menu {
+  max-height: 194px;
+  overflow-y: auto;
+  width: 66px;
+  background: red;
+ }
+
+ 
+
+ .month-scroll-wrapper {
+    max-height: 196px;
+    overflow-y: auto;
+    width: 60px;
+  }
+
+  .month-dropdown nile-menu {
+    overflow-y: auto;
+    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
+  }
+
+
+  .year-scroll-wrapper {
+    max-height: 196px;
+    overflow-y: auto;
+    width: 60px;
+  }
+
+  .year-dropdown nile-menu {
+    overflow-y: auto;
+    padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-none);
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
+  }
+
+  .month-dropdown nile-menu-item::part(base) {
+    padding: 0px 12px;
+   }
+   .year-dropdown nile-menu-item::part(base) {
+    padding: 0px 12px;
+   }
+nile-menu-item[selected]{
+  background: var(--nile-colors-primary-100);
+}
+
+nile-menu-item[selected]::part(base):hover {
+  background: var(--nile-colors-primary-100);
+  border-radius: 0px;
+}
+
+
+nile-icon[disabled] {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.units-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  padding: 16px;
+  width: auto;
+}
+
+ 
+  
+.duration-name {
+  font-weight: 600;
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+ 
+
+   
 `;
 
 export default [styles];

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

@@ -76,6 +76,11 @@ export class NileCalendar extends NileElement {
 
   @state() allowedDatesLocal: NileCalendarDateRange | any = null;
 
+  @property({ type: Number }) startYear?: number;
+  @property({ type: Number }) endYear?: number;
+  
+
+
   connectedCallback() {
     super.connectedCallback();
     this.initializeValue();
@@ -107,6 +112,34 @@ export class NileCalendar extends NileElement {
     }
   }
 
+  private get monthNames() {
+    return Array.from({ length: 12 }, (_, i) =>
+      new Date(0, i).toLocaleString('default', { month: 'short' })
+    );
+  }
+
+  private get yearOptions(): number[] {
+    const fallbackStart = 2000;
+    const fallbackEnd = 2050;
+  
+    const start = this.startYear ?? fallbackStart;
+    const end = this.endYear ?? fallbackEnd;
+  
+    if (start > end) return [];
+  
+    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+  }
+  
+  private onMonthSelected(monthIndex: number) {
+    this.currentMonth = monthIndex;
+    this.emit('nile-month-change', { month: monthIndex });
+  }
+
+  private onYearSelected(year: number) {
+    this.currentYear = year;
+    this.emit('nile-year-change', { year });
+  }
+
   @watch('allowedDates')
   checkValidAllowedDate() {
     let newDateRange: NileCalendarDateRange | null;
@@ -131,6 +164,23 @@ export class NileCalendar extends NileElement {
       this.allowedDatesLocal=newDateRange;
     }
   }
+ 
+  
+  private isPrevDisabled(): boolean {
+    return (
+      this.currentMonth === 0 &&
+      this.startYear !== undefined &&
+      this.currentYear <= this.startYear
+    );
+  }
+  
+  private isNextDisabled(): boolean {
+    return (
+      this.currentMonth === 11 &&
+      this.endYear !== undefined &&
+      this.currentYear >= this.endYear
+    );
+  }
   
 
   /**
@@ -143,12 +193,13 @@ export class NileCalendar extends NileElement {
           base:true,
           base__range:this.range,
         })}
+        part="calendar-root"
       >
         <div class=${classMap({
           "calendar-config":true,
           "hidden": !this.range || (this.range && this.hideTypes)
-        })}>
-          <div class="calendar-switcher">
+        })} part="calendar-config">
+          <div class="calendar-switcher" part="calendar-switcher">
             <nile-tab-group centered @nile-tab-show="${this.onTypeChange}" value="${this.type}">
               <nile-tab slot="nav" panel="absolute">Absolute</nile-tab>
               <nile-tab slot="nav" panel="relative">Relative</nile-tab>
@@ -160,7 +211,7 @@ export class NileCalendar extends NileElement {
         ${this.type == 'absolute' ? this.renderAbsoluteCalendar():''}
 
         ${!this.range?'':html`
-        <div class="button-container">
+        <div class="button-container" part="calendar-footer">
           ${this.allowClear?
             html`
             <nile-button 
@@ -168,7 +219,7 @@ export class NileCalendar extends NileElement {
             variant="secondary"
             ?disabled="${ !this.startDate || !this.endDate }"
             @click="${this.clearDate}"
-            > Clear</nile-button>`:nothing
+            > Reset</nile-button>`:nothing
           }
           <nile-button 
           class="apply-button"  
@@ -186,8 +237,8 @@ export class NileCalendar extends NileElement {
    */
   renderAbsoluteCalendar(){
     return html`
-    <div class="calendar-wrapper">
-      <div class="calendar-container">
+    <div class="calendar-wrapper" part="calendar-wrapper">
+      <div class="calendar-container" part="calendar-container">
         ${this.renderMonth(
           this.currentYear,
           this.currentMonth,
@@ -227,38 +278,49 @@ export class NileCalendar extends NileElement {
     <div class="units-wrapper">
       <div class="unit-container">
         ${this.hideDurationFields?.includes('minutes')?'':html`
+        <div class="unit-group">
         <div class="duration-name">Minutes</div>
         <div class="duration-units">
           ${this.renderTimeValues('minutes', [1, 5, 15, 30, 45])}
         </div>
+        </div>
         `}
 
         ${this.hideDurationFields?.includes('hours')?'':html`
+        <div class="unit-group">
         <div class="duration-name">Hours</div>
         <div class="duration-units">
           ${this.renderTimeValues('hours', [1, 2, 3, 6, 8, 12])}
         </div>
+        </div>
         `}
         
         ${this.hideDurationFields?.includes('days')?'':html`
+        <div class="unit-group">
         <div class="duration-name">Days</div>
         <div class="duration-units">
           ${this.renderTimeValues('days', [1, 2, 3, 4, 5, 6])}
         </div>
+        </div>
         `}
         
         ${this.hideDurationFields?.includes('weeks')?'':html`
+        <div class="unit-group">
         <div class="duration-name">Weeks</div>
         <div class="duration-units">
           ${this.renderTimeValues('weeks', [1, 2, 4, 6])}
         </div>
+        </div>
+        
         `}
         
         ${this.hideDurationFields?.includes('months')?'':html`
+        <div class="unit-group">
         <div class="duration-name">Months</div>
         <div class="duration-units">
           ${this.renderTimeValues('months', [3, 6, 12, 15])}
         </div>
+        </div>
         `}
       </div>
     </div>
@@ -392,25 +454,86 @@ export class NileCalendar extends NileElement {
       );
     };
 
+    
     return html`
       <div class="calendar">
-        <div class="calendar-header">
+        <div class="calendar-header" part="calendar-header">
           <nile-icon
             class="calendar-header__month-navigation"
             name="arrowleft"
+            ?disabled="${this.isPrevDisabled()}"
             color="black"
             @click="${this.prevMonth}"
           >
           </nile-icon>
-          <span
-            >${new Date(year, month).toLocaleString('default', {
-              month: 'long',
-            })}
-            ${year}</span
-          >
+          
+       <!-- MONTH DROPDOWN -->
+       <div class="calendar-header__center">
+       <nile-dropdown class="month-dropdown">
+        <span
+          slot="trigger"
+          class="calendar-header__trigger month-trigger"
+          role="button"
+          tabindex="0"
+          @keydown.enter="${(e: KeyboardEvent) =>
+            (e.currentTarget as HTMLElement).click()}"
+        >
+          ${new Date(year, month).toLocaleString('default', {
+            month: 'long',
+          })}
+          <nile-icon name="arrowdropdown"  color="black" class="calendar-header__caret"></nile-icon>
+        </span>
+        <nile-menu >
+  <div class="month-scroll-wrapper">
+  ${this.monthNames.map((m, idx) => html`
+  <nile-menu-item
+    class="month-menu-item"
+    ?selected="${idx === month}"
+    id="${idx === month ? 'selected-month-item' : ''}"
+    @click="${() => this.onMonthSelected(idx)}"
+  >
+    ${m}
+  </nile-menu-item>
+`)}
+  </div>
+</nile-menu>
+      </nile-dropdown>
+
+      <!-- YEAR DROPDOWN -->
+      <nile-dropdown class="year-dropdown" >
+        <span
+          slot="trigger"
+          class="calendar-header__trigger"
+          role="button"
+          tabindex="0"
+          @keydown.enter="${(e: KeyboardEvent) =>
+            (e.currentTarget as HTMLElement).click()}"
+        >
+          ${year}
+          <nile-icon name="arrowdropdown" color="black" class="calendar-header__caret"></nile-icon>
+        </span>
+        <nile-menu>
+        <div class="year-scroll-wrapper">
+          ${this.yearOptions.map(
+            y => html`
+              <nile-menu-item
+                class="year-menu-item"
+                ?selected="${y === year}"
+                @click="${() => this.onYearSelected(y)}"
+              >
+                ${y}
+
+              </nile-menu-item>
+            `
+          )}
+          </div>
+        </nile-menu>
+      </nile-dropdown>
+      </div>
           <nile-icon
             class="calendar-header__month-navigation"
             name="arrowright"
+            ?disabled="${this.isNextDisabled()}"
             color="black"
             @click="${this.nextMonth}"
           >
@@ -440,12 +563,13 @@ export class NileCalendar extends NileElement {
             
             return html` 
             <div
+            part="calendar-day"
               class=${classMap(classMapObj)}
               @click="${() => { if (isCurrentMonth) this.selectDate(day, month, year)}}"
             >
               <span style="position:relative;">
                 ${day}
-                ${isCurrentDate(day, month, year) && isCurrentMonth?html`<div class="current__date__dot"></div>`:nothing}
+                ${isCurrentDate(day, month, year) && isCurrentMonth?html`<div class="current__date__dot" part="current-date-dot"></div>`:nothing}
               </span>
             </div>`;
           })}
@@ -686,21 +810,26 @@ export class NileCalendar extends NileElement {
 
   private nextMonth(): void {
     if (this.currentMonth === 11) {
+      const newYear = this.currentYear + 1;
+      if (this.endYear !== undefined && newYear > this.endYear) return;
       this.currentMonth = 0;
-      this.currentYear++;
+      this.currentYear = newYear;
     } else {
       this.currentMonth++;
     }
   }
-
+  
   private prevMonth(): void {
     if (this.currentMonth === 0) {
+      const newYear = this.currentYear - 1;
+      if (this.startYear !== undefined && newYear < this.startYear) return;
       this.currentMonth = 11;
-      this.currentYear--;
+      this.currentYear = newYear;
     } else {
       this.currentMonth--;
     }
   }
+  
 
   private confimRange() {
     if (!(this.startDate && this.endDate)) return;

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

@@ -165,7 +165,6 @@ export class NileChip extends NileElement {
         </label>
 
         <div
-          part='base' 
           class=${classMap({
             'nile-chip': true,
             'nile-chip--warning': this.warning,