@aquera/nile-elements 1.5.3 → 1.5.5

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/vscode-html-custom-data.json

@@ -1286,6 +1286,42 @@
         }
       ]
     },
+    {
+      "name": "nile-detail",
+      "description": "Attributes:\n\n  * `open` {`boolean`} - \n\n  * `heading` {`string`} - \n\n  * `description` {`string`} - \n\n  * `expandIconPlacement` {`\"left\" | \"right\"`} - \n\n  * `disabled` {`boolean`} - \n\nProperties:\n\n  * `styles` - \n\n  * `detail` {`HTMLDetailsElement`} - \n\n  * `header` {`HTMLElement`} - \n\n  * `body` {`HTMLElement`} - \n\n  * `open` {`boolean`} - \n\n  * `heading` {`string`} - \n\n  * `description` {`string`} - \n\n  * `expandIconPlacement` {`\"left\" | \"right\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `_detailOpen` {`boolean`} - \n\n  * `_summaryLabel` {`string`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "`open` {`boolean`} - \n\nProperty: open\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "heading",
+          "description": "`heading` {`string`} - \n\nProperty: heading\n\nDefault: "
+        },
+        {
+          "name": "description",
+          "description": "`description` {`string`} - \n\nProperty: description\n\nDefault: "
+        },
+        {
+          "name": "expandIconPlacement",
+          "description": "`expandIconPlacement` {`\"left\" | \"right\"`} - \n\nProperty: expandIconPlacement\n\nDefault: right",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "`disabled` {`boolean`} - \n\nProperty: disabled\n\nDefault: false",
+          "valueSet": "v"
+        }
+      ]
+    },
     {
       "name": "nile-dialog",
       "description": "Nile icon component.\n\nAttributes:\n\n  * `open` {`boolean`} - Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.\n\n  * `label` {`string`} - The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n\n  * `sublabel` {`string`} - \n\n  * `noHeader` {`boolean`} - Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.\n\n  * `preventOverlayClose` {`boolean`} - \n\nProperties:\n\n  * `styles` - \n\n  * `hasSlotController` - \n\n  * `modal` - \n\n  * `originalTrigger` {`HTMLElement | null`} - \n\n  * `dialog` {`HTMLElement`} - \n\n  * `panel` {`HTMLElement`} - \n\n  * `overlay` {`HTMLElement`} - \n\n  * `open` {`boolean`} - Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.\n\n  * `label` {`string`} - The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.\n\n  * `sublabel` {`string`} - \n\n  * `noHeader` {`boolean`} - Disables the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.\n\n  * `preventOverlayClose` {`boolean`} - \n\n  * `drawerStyle` {`string`} - Added to resolve conflicts between Angular Material's mat-drawer components.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
@@ -2447,7 +2483,7 @@
     },
     {
       "name": "nile-inline-sidebar-item",
-      "description": "Nile inline sidebar item.\n\nEvents:\n\n  * `nile-select` {} - Emitted when the item is clicked (not disabled).\ndetail: { item: this, href?: string }\n\n  * `nile-click` {`CustomEvent<{ item: this; href: string | undefined; text: string; }>`} - \n\nSlots:\n\n  * ` ` {} - Default slot for the item text or content.\n\nAttributes:\n\n  * `tooltip` {`boolean`} - \n\n  * `active` {`boolean`} - Marks the item as active (selected).\n\n  * `disabled` {`boolean`} - Marks the item as disabled (non-interactive).\n\n  * `href` {`string | undefined`} - Optional URL to navigate to when the item is clicked.\n\nProperties:\n\n  * `tooltip` {`boolean`} - \n\n  * `active` {`boolean`} - Marks the item as active (selected).\n\n  * `disabled` {`boolean`} - Marks the item as disabled (non-interactive).\n\n  * `href` {`string | undefined`} - Optional URL to navigate to when the item is clicked.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile inline sidebar item.\n\nEvents:\n\n  * `nile-select` {} - Emitted when the item is clicked (not disabled).\ndetail: { item: this, href?: string }\n\n  * `nile-click` {`CustomEvent<{ item: this; href: string | undefined; text: string; }>`} - \n\nSlots:\n\n  * ` ` {} - Default slot for the item text or content.\n\nAttributes:\n\n  * `tooltip` {`boolean`} - \n\n  * `active` {`boolean`} - Marks the item as active (selected).\n\n  * `disabled` {`boolean`} - Marks the item as disabled (non-interactive).\n\n  * `href` {`string | undefined`} - Optional URL to navigate to when the item is clicked.\n\nProperties:\n\n  * `tooltip` {`boolean`} - \n\n  * `_handleHostKeyDown` - \n\n  * `active` {`boolean`} - Marks the item as active (selected).\n\n  * `disabled` {`boolean`} - Marks the item as disabled (non-interactive).\n\n  * `href` {`string | undefined`} - Optional URL to navigate to when the item is clicked.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "tooltip",
@@ -2481,7 +2517,7 @@
     },
     {
       "name": "nile-inline-sidebar",
-      "description": "Nile inline sidebar component.\n\nEvents:\n\n  * `nile-change` {`CustomEvent<{ selectedItem: HTMLElement; index: number; }>`} - \n\n  * `nile-toggle` {`CustomEvent<{ collapsed: boolean; }>`} - \n\n  * `nile-click` {`CustomEvent<{ item: HTMLElement; href: any; text: string; }>`} - \n\nAttributes:\n\n  * `collapsed` {`boolean`} - \n\n  * `fixed` {`boolean`} - \n\n  * `showTooltip` {`boolean`} - \n\nProperties:\n\n  * `collapsed` {`boolean`} - \n\n  * `fixed` {`boolean`} - \n\n  * `showTooltip` {`boolean`} - \n\n  * `activeIndex` {`number`} - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `mutationObserver` {`MutationObserver | undefined`} - \n\n  * `sidebarItems` {`HTMLElement[]`} - \n\n  * `handleItemSelect` - \n\n  * `menuItemsTemplate` {`UncompiledTemplateResult<1>[] | null`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile inline sidebar component.\n\nEvents:\n\n  * `nile-change` {`CustomEvent<{ selectedItem: HTMLElement; index: number; }>`} - \n\n  * `nile-toggle` {`CustomEvent<{ collapsed: boolean; }>`} - \n\n  * `nile-click` {`CustomEvent<{ item: HTMLElement; href: any; text: string; }>`} - \n\nAttributes:\n\n  * `collapsed` {`boolean`} - \n\n  * `fixed` {`boolean`} - \n\n  * `showTooltip` {`boolean`} - \n\n  * `placement` {`\"left\" | \"right\"`} - The side on which the sidebar is placed.\n\nProperties:\n\n  * `collapsed` {`boolean`} - \n\n  * `fixed` {`boolean`} - \n\n  * `showTooltip` {`boolean`} - \n\n  * `placement` {`\"left\" | \"right\"`} - The side on which the sidebar is placed.\n\n  * `activeIndex` {`number`} - \n\n  * `defaultSlot` {`HTMLSlotElement`} - \n\n  * `mutationObserver` {`MutationObserver | undefined`} - \n\n  * `sidebarItems` {`HTMLElement[]`} - \n\n  * `focusableItems` {`HTMLElement[]`} - \n\n  * `handleKeyDown` - \n\n  * `handleItemSelect` - \n\n  * `menuItemsTemplate` {`UncompiledTemplateResult<1>[] | null`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "collapsed",
@@ -2498,6 +2534,18 @@
           "description": "`showTooltip` {`boolean`} - \n\nProperty: showTooltip\n\nDefault: false",
           "valueSet": "v"
         },
+        {
+          "name": "placement",
+          "description": "`placement` {`\"left\" | \"right\"`} - The side on which the sidebar is placed.\n\nProperty: placement\n\nDefault: left",
+          "values": [
+            {
+              "name": "left"
+            },
+            {
+              "name": "right"
+            }
+          ]
+        },
         {
           "name": "onnile-change",
           "description": "`nile-change` {`CustomEvent<{ selectedItem: HTMLElement; index: number; }>`} - "
@@ -3308,7 +3356,7 @@
     },
     {
       "name": "nile-pagination",
-      "description": "Attributes:\n\n  * `totalitems` {`number`} - \n\n  * `currentpage` {`number`} - \n\n  * `pagesize` {`number`} - \n\n  * `pagesizeoptions` {`number[]`} - \n\n  * `variant` {`\"fluid\" | \"compact\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `showTitle` {`boolean`} - \n\nProperties:\n\n  * `totalItems` {`number`} - \n\n  * `currentPage` {`number`} - \n\n  * `pageSize` {`number`} - \n\n  * `pageSizeOptions` {`number[]`} - \n\n  * `variant` {`\"fluid\" | \"compact\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `showTitle` {`boolean`} - \n\n  * `_pageSizeOpen` {`boolean`} - \n\n  * `_pageOpen` {`boolean`} - \n\n  * `_pageSizeDropdown` {`HTMLElement`} - \n\n  * `totalPages` {`number`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Attributes:\n\n  * `totalitems` {`number`} - \n\n  * `currentpage` {`number`} - \n\n  * `pagesize` {`number`} - \n\n  * `pagesizeoptions` {`number[]`} - \n\n  * `variant` {`\"fluid\" | \"compact\" | \"mini\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `showTitle` {`boolean`} - \n\nProperties:\n\n  * `totalItems` {`number`} - \n\n  * `currentPage` {`number`} - \n\n  * `pageSize` {`number`} - \n\n  * `pageSizeOptions` {`number[]`} - \n\n  * `variant` {`\"fluid\" | \"compact\" | \"mini\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `showTitle` {`boolean`} - \n\n  * `_pageSizeOpen` {`boolean`} - \n\n  * `_pageOpen` {`boolean`} - \n\n  * `_miniPageOpen` {`boolean`} - \n\n  * `_pageSizeDropdown` {`HTMLElement`} - \n\n  * `totalPages` {`number`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "totalitems",
@@ -3328,13 +3376,16 @@
         },
         {
           "name": "variant",
-          "description": "`variant` {`\"fluid\" | \"compact\"`} - \n\nProperty: variant\n\nDefault: fluid",
+          "description": "`variant` {`\"fluid\" | \"compact\" | \"mini\"`} - \n\nProperty: variant\n\nDefault: fluid",
           "values": [
             {
               "name": "fluid"
             },
             {
               "name": "compact"
+            },
+            {
+              "name": "mini"
             }
           ]
         },