@aquera/nile-elements 0.1.50-beta-1.0 → 0.1.50-beta-1.3

package/dist/nile-pagination/nile-pagination.css.esm.js

@@ -1,4 +1,4 @@
-import{css as i}from"lit";const n=i`
+import{css as a}from"lit";const n=a`
   :host {
   }
 
@@ -6,14 +6,10 @@ import{css as i}from"lit";const n=i`
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg);
-  }
-
-  .pagination-wrapper.v2 {
-    justify-content: flex-start;
-    gap: var(--nile-spacing-spacing-lg);
+    padding: var(--nile-spacing-spacing-md) var(--nile-spacing-spacing-lg) ;
   }
 
+ 
   .pagination-wrapper.v2 .pager-container {
     flex-direction: row;
     align-items: center;
@@ -29,12 +25,79 @@ import{css as i}from"lit";const n=i`
     font-weight: var(--nile-font-weight-regular);
   }
 
+ 
+  .pagination-wrapper.compact {
+    min-width: 324px;
+    justify-content: space-between;
+  }
+
+
+
+.pagination-wrapper.compact .range-text {
+  margin-right: var(--nile-spacing-spacing-md);
+  white-space: nowrap;
+}
+
+
+.pagination-wrapper.compact .pager-container {
+  gap: var(--nile-spacing-spacing-md);
+}
+
+
+  .pagination-wrapper.compact .pager-container {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-spacing-md);
+  }
+
+  .pagination-wrapper.compact .page-size-dropdown ::part(base) {
+    min-width: 32px;
+    height: 32px;
+    padding: 0 6px;
+  }
+
+  .pagination-wrapper.compact .page-size-dropdown .chevron {
+    transition: transform 0.2s;
+  }
+  .pagination-wrapper.compact .page-size-dropdown .open .chevron {
+    transform: rotate(180deg);
+  }
+
+  .pagination-wrapper.compact ul.pagination:not(.compact-pagination) {
+    display: none;
+  }
+
+  .compact-pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-spacing-xs);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .page-dropdown .current-page-btn {
+    padding: 2px;
+    font-size: var(--nile-font-size-small);
+  }
+
+  nile-button.current-page-btn::part(base){
+    min-width: 51px;
+  }
+
+  nile-button.current-page-btn::part(base):active {
+  min-width: 51px;
+}
+
   .pager-container {
     display: flex;
     align-items: center;
     gap: var(--nile-spacing-spacing-3xl);
   }
 
+.pagination-wrapper.compact .pager-container {
+  gap: var(--nile-spacing-xxs) !important;
+}
+
   .range-text {
     font-size: var(--nile-font-size-small);
     color: var(--nile-colors-dark-900);
@@ -63,63 +126,113 @@ import{css as i}from"lit";const n=i`
     overflow-y: auto;
     width: 66px;
   }
+    .down-scroll-wrapper {
+    max-height: 150px;
+    overflow-y: auto;
+    width: 60px;
+  }
 
-  .ellipsis-dropdown nile-menu {
+
+    .compact-scroll-wrapper {
+    max-height: 160px;
+    overflow-y: auto;
+    width: 60px;
+  }
+  .compact-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);
+  }
+  
+    .page-size-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);
   }
 
- 
+      .compact-scroll-wrapper1 {
+    max-height: 164px;
+    overflow-y: auto;
+    width: 60px;
+  }
 
-  .page-size-menu {
-    max-height: 144px;
+  .compact-dropdown1 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);
+  }
+  
+    .compact-dropdown1 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);
   }
 
-  ul.pagination li:first-child {
-    margin-right: var(--nile-spacing-spacing-xs);
+
+  .ellipsis-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);
   }
-  ul.pagination li:last-child {
-    margin-left: var(--nile-spacing-spacing-md);
+
+  .page-size-menu {
+    max-height: 144px;
+    overflow-y: auto;
   }
 
+.pagination-wrapper.fluid ul.pagination li:first-child {
+  margin-right: var(--nile-spacing-spacing-xs);
+}
+.pagination-wrapper.fluid ul.pagination li:last-child {
+  margin-left: var(--nile-spacing-spacing-md);
+}
+
+
   .page-size-label {
     font-size: var(--nile-type-scale-3);
     color: var(--nile-colors-dark-500);
     margin-left: var(--nile-spacing-spacing-md);
     font-feature-settings: 'liga' off, 'clig' off;
-    font-weight: var(--nile-font-weight-regular);
+    font-weight: var(--nile-font-weight-regular); 
   }
 
   nile-button::part(base) {
-      min-width: 32px;
-  height: 32px;
-  padding: 0px 6px;
-  box-shadow: none;
-}
+    min-width: 32px;
+    height: 32px;
+    padding: 0px 6px;
+    box-shadow: none;
+  }
 
   nile-button::part(base):active {
-  min-width: 32px;
-  height: 32px;
-  padding: 0px 6px;
-  box-shadow: none;
-  border:none;
-}
- 
- nile-button.down::part(base){
-  min-width: 62px;
-
- }
-.page-size-dropdown .chevron {
-  transition: transform 0.2s;
-}
-.page-size-dropdown .open .chevron {
-  transform: rotate(180deg);
-}
-
+    min-width: 32px;
+    height: 32px;
+    padding: 0px 6px;
+    box-shadow: none;
+    border: none;
+  }
 
+  nile-button.down::part(base) {
+    min-width: 62px;
+  }
 
+  nile-button.compactbtn:part(base){
+    background-color: red;
+  }
+  .page-size-dropdown .chevron {
+    transition: transform 0.2s;
+  }
+  .page-size-dropdown .open .chevron {
+    transform: rotate(180deg);
+  }
+ 
+  .pagination-wrapper.compact .compact-dropdown .chevron,
+  .pagination-wrapper.compact .compact-dropdown1 .chevron {
+    transition: transform 0.2s;
+  }
+  .pagination-wrapper.compact .compact-dropdown .down.open .chevron,
+  .pagination-wrapper.compact .compact-dropdown1 .current-page-btn.open .chevron {
+    transform: rotate(180deg);
+  }
 
 
 `;export{n as s};

package/dist/nile-pagination/nile-pagination.esm.js

@@ -1,27 +1,74 @@
-import{__decorate as i}from"tslib";import{html as t}from"lit";import{property as e,state as s,query as n,customElement as r}from"lit/decorators.js";import{s as a}from"./nile-pagination.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";import{c as o,g as h,a as d,b as c}from"./nile-pagination-utils.esm.js";let u=class extends l{constructor(){super(...arguments),this.totalItems=0,this.currentPage=1,this.pageSize=50,this.pageSizeOptions=[10,25,50,100],this.variant="fluid",this.disabled=!1,this.showTitle=!0,this._pageSizeOpen=!1}static get styles(){return[a]}firstUpdated(){this._pageSizeDropdown.addEventListener("nile-show",(()=>{this._pageSizeOpen=!0})),this._pageSizeDropdown.addEventListener("nile-after-hide",(()=>{this._pageSizeOpen=!1}))}get totalPages(){return Math.max(1,o(this.totalItems,this.pageSize))}goToPage(i){this.disabled||(this.currentPage=i,this.emit("nile-change",{page:this.currentPage,pageSize:this.pageSize}))}onPageSizeSelect(i){this.disabled||this.pageSize===i||(this.pageSize=i,this.currentPage=1,this.emit("nile-change",{page:1,pageSize:i}))}renderRangeText(){return 0===this.totalItems?t`<div class="range-text">Showing 0 of 0</div>`:t`<div class="range-text">
-      ${h(this.totalItems,this.pageSize,this.currentPage)}
-    </div>`}renderPageSizeSelect(){return"fluid"!==this.variant?null:t`
+import{__decorate as i}from"tslib";import{html as e}from"lit";import{property as t,state as n,query as s,customElement as r}from"lit/decorators.js";import{s as a}from"./nile-pagination.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";import{c as o,g as h,a as d,b as c}from"./nile-pagination-utils.esm.js";let p=class extends l{constructor(){super(...arguments),this.totalItems=0,this.currentPage=1,this.pageSize=50,this.pageSizeOptions=[10,25,50,100],this.variant="fluid",this.disabled=!1,this.showTitle=!0,this._pageSizeOpen=!1,this._pageOpen=!1}static get styles(){return[a]}firstUpdated(){this._pageSizeDropdown&&(this._pageSizeDropdown.addEventListener("nile-show",(()=>{this._pageSizeOpen=!0})),this._pageSizeDropdown.addEventListener("nile-after-hide",(()=>{this._pageSizeOpen=!1})))}get totalPages(){return Math.max(1,o(this.totalItems,this.pageSize))}goToPage(i){if(this.disabled)return;const e=this.currentPage;this.currentPage=i,this.emit("nile-change",{page:i,previousPage:e,pageSize:this.pageSize})}onPageSizeSelect(i){if(this.disabled||this.pageSize===i)return;const e=this.currentPage;this.pageSize=i,this.currentPage=1,this.emit("nile-change",{page:1,previousPage:e,pageSize:i})}renderCompactRangeText(){const i=h(this.totalItems,this.pageSize,this.currentPage).replace(/^Showing\s*/,"");return e`<div class="range-text">${i}</div>`}renderRangeText(){return 0===this.totalItems?e`<div class="range-text">Showing 0 of 0</div>`:e`
+      <div part="range-text" class="range-text">
+        ${h(this.totalItems,this.pageSize,this.currentPage)}
+      </div>
+    `}renderPageSizeSelect(){return"fluid"!==this.variant?null:e`
       <div class="page-size-select">
         <nile-dropdown class="page-size-dropdown" ?disabled=${this.disabled}>
-          <nile-button slot="trigger" variant="tertiary" class="down ${this._pageSizeOpen?"open":""}"
+          <nile-button
+            slot="trigger"
+            variant="tertiary"
+            class="down ${this._pageSizeOpen?"open":""}"
             ?disabled=${this.disabled}
           >
             ${this.pageSize}
-            <nile-icon name="chevrondown" size="14" color="var(--nile-colors-dark-500)" class="chevron"></nile-icon>
+            <nile-icon
+              name="chevrondown"
+              size="14"
+              color="var(--nile-colors-dark-500)"
+              class="chevron"
+            ></nile-icon>
           </nile-button>
-          <nile-menu class="page-size-menu">
-            ${this.pageSizeOptions.map((i=>t`
+          <nile-menu>
+            <div class="down-scroll-wrapper">
+              ${this.pageSizeOptions.map((i=>e`
+                  <nile-menu-item
+                    ?disabled=${this.disabled}
+                    @click=${()=>this.onPageSizeSelect(i)}
+                  >
+                    ${i}
+                  </nile-menu-item>
+                `))}
+            </div>
+          </nile-menu>
+        </nile-dropdown>
+        <span part="pagesize-label" class="page-size-label">Items per page</span>
+      </div>
+    `}renderCompactPageSize(){return e`
+      <nile-dropdown
+        class="compact-dropdown"
+        ?disabled=${this.disabled}
+        @nile-show=${()=>this._pageSizeOpen=!0}
+        @nile-after-hide=${()=>this._pageSizeOpen=!1}
+      >
+        <nile-button
+          slot="trigger"
+          variant="tertiary"
+          class="down ${this._pageSizeOpen?"open":""}"
+          ?disabled=${this.disabled}
+        >
+          ${this.pageSize}
+          <nile-icon
+            name="chevrondown"
+            size="14"
+            color="var(--nile-colors-dark-500)"
+            class="chevron"
+          ></nile-icon>
+        </nile-button>
+        <nile-menu>
+          <div class="compact-scroll-wrapper">
+            ${this.pageSizeOptions.map((i=>e`
                 <nile-menu-item
                   ?disabled=${this.disabled}
                   @click=${()=>this.onPageSizeSelect(i)}
                 >
                   ${i}
-                </nile-menu-item>`))}
-          </nile-menu>
-        </nile-dropdown>
-        <span class="page-size-label">Items per page</span>
-      </div>
-    `}renderPrevButton(){return t`
+                </nile-menu-item>
+              `))}
+          </div>
+        </nile-menu>
+      </nile-dropdown>
+    `}renderPrevButton(){return e`
       <li>
         <nile-button
           variant="tertiary"
@@ -31,7 +78,7 @@ import{__decorate as i}from"tslib";import{html as t}from"lit";import{property as
           <nile-icon name="arrowleft" size="14"></nile-icon>
         </nile-button>
       </li>
-    `}renderNextButton(){return t`
+    `}renderNextButton(){return e`
       <li>
         <nile-button
           variant="tertiary"
@@ -41,7 +88,7 @@ import{__decorate as i}from"tslib";import{html as t}from"lit";import{property as
           <nile-icon name="arrowright" size="14"></nile-icon>
         </nile-button>
       </li>
-    `}renderPageItem(i,e,s){return"…"===i?t`
+    `}renderPageItem(i,t,n){return"…"===i?e`
         <li>
           <nile-dropdown class="ellipsis-dropdown" ?disabled=${this.disabled}>
             <nile-button slot="trigger" variant="ghost" ?disabled=${this.disabled}>
@@ -49,18 +96,19 @@ import{__decorate as i}from"tslib";import{html as t}from"lit";import{property as
             </nile-button>
             <nile-menu>
               <div class="ellipsis-scroll-wrapper">
-                ${d(this.totalPages,s,this.currentPage,e<s.indexOf(this.currentPage)?"left":"right").map((i=>t`
+                ${d(this.totalPages,n,this.currentPage,t<n.indexOf(this.currentPage)?"left":"right").map((i=>e`
                     <nile-menu-item
                       ?disabled=${this.disabled}
                       @click=${()=>this.goToPage(i)}
                     >
                       ${i}
-                    </nile-menu-item>`))}
+                    </nile-menu-item>
+                  `))}
               </div>
             </nile-menu>
           </nile-dropdown>
         </li>
-      `:t`
+      `:e`
       <li>
         <nile-button
           variant=${i===this.currentPage?"primary":"ghost"}
@@ -70,20 +118,61 @@ import{__decorate as i}from"tslib";import{html as t}from"lit";import{property as
           ${i}
         </nile-button>
       </li>
-    `}renderPageList(){const i=c(this.totalPages,this.currentPage);return t`
+    `}renderPageList(){if("compact"===this.variant)return e`
+        <nav aria-label="Pagination">
+          <ul class="pagination compact-pagination">
+            ${this.renderPrevButton()}
+            <li>
+              <nile-dropdown
+                class="compact-dropdown1"
+                ?disabled=${this.disabled}
+                @nile-show=${()=>this._pageOpen=!0}
+                @nile-after-hide=${()=>this._pageOpen=!1}
+              >
+                <nile-button
+                  slot="trigger"
+                  variant="tertiary"
+                  class="current-page-btn ${this._pageOpen?"open":""}"
+                  ?disabled=${this.disabled}
+                >
+                  ${this.currentPage}
+                  <nile-icon
+                    name="chevrondown"
+                    size="14"
+                    class="chevron"
+                  ></nile-icon>
+                </nile-button>
+                <nile-menu>
+                  <div class="compact-scroll-wrapper1">
+                    ${Array.from({length:this.totalPages},((i,e)=>e+1)).map((i=>e`
+                        <nile-menu-item
+                          ?disabled=${this.disabled}
+                          @click=${()=>this.goToPage(i)}
+                        >
+                          ${i}
+                        </nile-menu-item>
+                      `))}
+                  </div>
+                </nile-menu>
+              </nile-dropdown>
+            </li>
+            ${this.renderNextButton()}
+          </ul>
+        </nav>
+      `;const i=c(this.totalPages,this.currentPage);return e`
       <nav aria-label="Pagination">
-        <ul class="pagination">
+        <ul part="page-list" class="pagination">
           ${this.renderPrevButton()}
-          ${i.map(((t,e)=>this.renderPageItem(t,e,i)))}
+          ${i.map(((e,t)=>this.renderPageItem(e,t,i)))}
           ${this.renderNextButton()}
         </ul>
       </nav>
-    `}render(){return t`
-      <div class="pagination-wrapper ${this.variant}">
-        <div class="pager-container">
-          ${this.showTitle?this.renderRangeText():null}
-          ${this.renderPageSizeSelect()}
-        </div>
-        ${this.renderPageList()}
+    `}render(){return e`
+    <div part="wrapper" class="pagination-wrapper ${this.variant}">
+      <div part="pager-container" class="pager-container">
+        ${"fluid"===this.variant&&this.showTitle?this.renderRangeText():"compact"===this.variant?this.renderCompactRangeText():null}
+        ${"fluid"===this.variant?this.renderPageSizeSelect():this.renderCompactPageSize()}
       </div>
-    `}};i([e({attribute:"totalitems",reflect:!0,converter:{fromAttribute:i=>{const t=Number(i);return Number.isFinite(t)&&t>=0?Math.floor(t):0}}})],u.prototype,"totalItems",void 0),i([e({attribute:"currentpage",reflect:!0,converter:{fromAttribute:i=>{const t=Number(i);return Number.isFinite(t)&&t>=1?Math.floor(t):1}}})],u.prototype,"currentPage",void 0),i([e({attribute:"pagesize",reflect:!0,converter:{fromAttribute:i=>{const t=Number(i);return Number.isFinite(t)&&t>=1?Math.floor(t):50}}})],u.prototype,"pageSize",void 0),i([e({attribute:"pagesizeoptions",reflect:!1,converter:{fromAttribute:i=>{try{const t=JSON.parse(i);if(Array.isArray(t)&&t.every((i=>"number"==typeof i)))return t}catch{}return[10,25,50,100]}}})],u.prototype,"pageSizeOptions",void 0),i([e({type:String})],u.prototype,"variant",void 0),i([e({type:Boolean})],u.prototype,"disabled",void 0),i([e({type:Boolean})],u.prototype,"showTitle",void 0),i([s()],u.prototype,"_pageSizeOpen",void 0),i([n(".page-size-dropdown")],u.prototype,"_pageSizeDropdown",void 0),u=i([r("nile-pagination")],u);export{u as N};
+      ${this.renderPageList()}
+    </div>
+  `}};i([t({attribute:"totalitems",reflect:!0,converter:{fromAttribute:i=>{const e=Number(i);return Number.isFinite(e)&&e>=0?Math.floor(e):0}}})],p.prototype,"totalItems",void 0),i([t({attribute:"currentpage",reflect:!0,converter:{fromAttribute:i=>{const e=Number(i);return Number.isFinite(e)&&e>=1?Math.floor(e):1}}})],p.prototype,"currentPage",void 0),i([t({attribute:"pagesize",reflect:!0,converter:{fromAttribute:i=>{const e=Number(i);return Number.isFinite(e)&&e>=1?Math.floor(e):50}}})],p.prototype,"pageSize",void 0),i([t({attribute:"pagesizeoptions",reflect:!1,converter:{fromAttribute:i=>{try{const e=JSON.parse(i);if(Array.isArray(e)&&e.every((i=>"number"==typeof i)))return e}catch{}return[10,25,50,100]}}})],p.prototype,"pageSizeOptions",void 0),i([t({type:String})],p.prototype,"variant",void 0),i([t({type:Boolean})],p.prototype,"disabled",void 0),i([t({type:Boolean})],p.prototype,"showTitle",void 0),i([n()],p.prototype,"_pageSizeOpen",void 0),i([n()],p.prototype,"_pageOpen",void 0),i([s(".page-size-dropdown")],p.prototype,"_pageSizeDropdown",void 0),p=i([r("nile-pagination")],p);export{p as N};

package/dist/nile-popover/index.cjs.js

@@ -1,2 +1,2 @@
-System.register(["./nile-popover.cjs.js","tslib","lit/decorators.js","./nile-popover.css.cjs.js","lit","../internal/nile-element.cjs.js","../internal/watch.cjs.js"],function(_export,_context){"use strict";return{setters:[function(_nilePopoverCjsJs){_export("NilePopover",_nilePopoverCjsJs.N);},function(_tslib){},function(_litDecoratorsJs){},function(_nilePopoverCssCjsJs){},function(_lit){},function(_internalNileElementCjsJs){},function(_internalWatchCjsJs){}],execute:function execute(){}};});
+System.register(["./nile-popover.cjs.js","tslib","../lit-html-9b3af046.cjs.js","lit/decorators.js","./nile-popover.css.cjs.js","lit","../internal/nile-element.cjs.js","../internal/watch.cjs.js"],function(_export,_context){"use strict";return{setters:[function(_nilePopoverCjsJs){_export("NilePopover",_nilePopoverCjsJs.N);},function(_tslib){},function(_litHtml001CjsJs){},function(_litDecoratorsJs){},function(_nilePopoverCssCjsJs){},function(_lit){},function(_internalNileElementCjsJs){},function(_internalWatchCjsJs){}],execute:function execute(){}};});
 //# sourceMappingURL=index.cjs.js.map

package/dist/nile-popover/index.esm.js

@@ -1 +1 @@
-export{N as NilePopover}from"./nile-popover.esm.js";import"tslib";import"lit/decorators.js";import"./nile-popover.css.esm.js";import"lit";import"../internal/nile-element.esm.js";import"../internal/watch.esm.js";
+export{N as NilePopover}from"./nile-popover.esm.js";import"tslib";import"../lit-html-39a6718c.esm.js";import"lit/decorators.js";import"./nile-popover.css.esm.js";import"lit";import"../internal/nile-element.esm.js";import"../internal/watch.esm.js";