@aquera/nile-elements 1.5.4 → 1.5.6

package/src/nile-pagination/nile-pagination.ts

@@ -57,12 +57,13 @@ export class NilePagination extends NileElement {
   }}})
  pageSizeOptions: number[] = [10, 25, 50, 100];
 
-  @property({ type: String })variant: 'fluid' | 'compact' = 'fluid';
-  @property({ type: Boolean }) disabled = false;
+  @property({ type: String })variant: 'fluid' | 'compact' | 'mini' = 'fluid';
+  @property({ type: Boolean, reflect: true }) disabled = false;
   @property({ type: Boolean }) showTitle = true;
 
   @state() private _pageSizeOpen = false;
   @state() private _pageOpen = false;
+  @state() private _miniPageOpen = false;
   @query('.page-size-dropdown') private _pageSizeDropdown!: HTMLElement;
 
   firstUpdated() {
@@ -278,6 +279,87 @@ private renderCompactRangeText(): TemplateResult {
     `;
   }
 
+  private renderMiniPrevButton(): TemplateResult {
+    return html`
+      <li>
+        <nile-button
+          variant="tertiary"
+          ?disabled=${this.currentPage === 1 || this.disabled}
+          @click=${() => this.goToPage(this.currentPage - 1)}
+          class="mini-prev-button"
+        >
+          <nile-icon name="var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="12"></nile-icon>
+        </nile-button>
+      </li>
+    `;
+  }
+
+  private renderMiniNextButton(): TemplateResult {
+    return html`
+      <li>
+        <nile-button
+          variant="tertiary"
+          ?disabled=${this.currentPage === this.totalPages || this.disabled}
+          @click=${() => this.goToPage(this.currentPage + 1)}
+          class="mini-next-button"
+        >
+          <nile-icon name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="12"></nile-icon>
+        </nile-button>
+      </li>
+    `;
+  }
+
+  private renderMini(): TemplateResult {
+    return html`
+      <div part="wrapper" class="pagination-wrapper mini">
+        <span part="mini-showing-label" class="mini-showing-label">Showing</span>
+        <nile-dropdown
+          part="mini-page-dropdown"
+          class="mini-page-dropdown"
+          ?disabled=${this.disabled}
+          @nile-show=${() => (this._miniPageOpen = true)}
+          @nile-after-hide=${() => (this._miniPageOpen = false)}
+        >
+          <nile-button
+            slot="trigger"
+            variant="tertiary"
+            class="mini-page-btn ${this._miniPageOpen ? 'open' : ''}"
+            ?disabled=${this.disabled}
+          >
+            ${this.currentPage}
+            <nile-icon
+              name="var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))"
+              size="12"
+              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+              class="chevron"
+            ></nile-icon>
+          </nile-button>
+          <nile-menu>
+            <div class="mini-scroll-wrapper">
+              ${Array.from({ length: this.totalPages }, (_, i) => i + 1).map(
+                p => html`
+                  <nile-menu-item
+                    ?disabled=${this.disabled}
+                    @click=${() => this.goToPage(p)}
+                  >
+                    ${p}
+                  </nile-menu-item>
+                `
+              )}
+            </div>
+          </nile-menu>
+        </nile-dropdown>
+        <span part="mini-of-label" class="mini-of-label">of ${this.totalPages}</span>
+        <nav aria-label="Pagination" part="mini-nav" class="mini-nav">
+          <ul part="mini-page-list" class="pagination mini-pagination">
+            ${this.renderMiniPrevButton()}
+            ${this.renderMiniNextButton()}
+          </ul>
+        </nav>
+      </div>
+    `;
+  }
+
   private renderPageList(): TemplateResult {
     if (this.variant === 'compact') {
       return html`
@@ -339,6 +421,9 @@ private renderCompactRangeText(): TemplateResult {
   }
 
  public render(): TemplateResult {
+  if (this.variant === 'mini') {
+    return this.renderMini();
+  }
   return html`
     <div part="wrapper" class="pagination-wrapper ${this.variant}">
       <div part="pager-container" class="pager-container">

package/src/nile-qr-code/index.ts

@@ -0,0 +1 @@
+export { NileQrCode } from './nile-qr-code';