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

package/package.json

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

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

@@ -82,10 +82,7 @@ export const styles = css`
     box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
-  .ellipsis-dropdown nile-menu-item {
-    padding: var(--nile-spacing-spacing-sm) var(--nile-spacing-spacing-lg);
-    text-align: center;
-  }
+ 
 
   .page-size-menu {
     max-height: 144px;
@@ -107,9 +104,24 @@ export const styles = css`
     font-weight: var(--nile-font-weight-regular);
   }
 
-  .nile-button::part(base) {
-    min-width: 32px;
-  }
+  nile-button::part(base) {
+      min-width: 32px;
+  height: 32px;
+  padding: 0px 6px}
+
+ nile-button.down::part(base){
+  min-width: 62px;
+
+ }
+.page-size-dropdown .chevron {
+  transition: transform 0.2s;
+}
+.page-size-dropdown .open .chevron {
+  transform: rotate(180deg);
+}
+
+
+
 `;
 
 export default [styles];

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { styles } from './nile-pagination.css';
 import NileElement from '../internal/nile-element';
 import {
@@ -24,11 +24,24 @@ export class NilePagination extends NileElement {
   @property({ type: Number }) totalItems = 0;
   @property({ type: Number }) pageSize = 50;
   @property({ type: Number }) currentPage = 1;
-  @property({ type: String }) variant: 'v1' | 'v2' = 'v1';
+  @property({ type: String }) variant: 'fluid' | 'compact' = 'fluid';
   @property({ type: Boolean }) disabled = false;
   @property({ type: Boolean }) showTitle = true;
   @property({ type: Array }) pageSizeOptions: number[] = [10, 25, 50, 100];
 
+ 
+  @state() private _pageSizeOpen = false;
+  @query('.page-size-dropdown') private _pageSizeDropdown!: HTMLElement;
+
+  firstUpdated() {
+    this._pageSizeDropdown.addEventListener('nile-show', () => {
+      this._pageSizeOpen = true;
+    });
+    this._pageSizeDropdown.addEventListener('nile-after-hide', () => {
+      this._pageSizeOpen = false;
+    });
+  }
+
   private get totalPages(): number {
     return calculateTotalPages(this.totalItems, this.pageSize);
   }
@@ -54,23 +67,26 @@ export class NilePagination extends NileElement {
   }
 
   private renderPageSizeSelect(): TemplateResult | null {
-    if (this.variant !== 'v1') return null;
+    if (this.variant !== 'fluid') return null;
     return html`
       <div class="page-size-select">
         <nile-dropdown class="page-size-dropdown" ?disabled=${this.disabled}>
-          <nile-button slot="trigger" variant="tertiary" ?disabled=${this.disabled}>
+          <nile-button slot="trigger" variant="tertiary" class="down ${this._pageSizeOpen ? 'open' : ''}"
+            ?disabled=${this.disabled}
+          >
             ${this.pageSize}
             <nile-icon name="chevrondown" size="14" class="chevron"></nile-icon>
           </nile-button>
           <nile-menu class="page-size-menu">
-            ${this.pageSizeOptions.map(size => html`
-              <nile-menu-item
-                ?disabled=${this.disabled}
-                @click=${() => this.onPageSizeSelect(size)}
-              >
-                ${size}
-              </nile-menu-item>
-            `)}
+            ${this.pageSizeOptions.map(
+              size => html`
+                <nile-menu-item
+                  ?disabled=${this.disabled}
+                  @click=${() => this.onPageSizeSelect(size)}
+                >
+                  ${size}
+                </nile-menu-item>`
+            )}
           </nile-menu>
         </nile-dropdown>
         <span class="page-size-label">Items per page</span>
@@ -107,12 +123,16 @@ export class NilePagination extends NileElement {
     `;
   }
 
-  private renderPageItem(item: number | string, idx: number, items: (number | string)[]): TemplateResult {
+  private renderPageItem(
+    item: number | string,
+    idx: number,
+    items: (number | string)[]
+  ): TemplateResult {
     if (item === '…') {
       return html`
         <li>
           <nile-dropdown class="ellipsis-dropdown" ?disabled=${this.disabled}>
-            <nile-button slot="trigger" variant="ghost" class="ellipsis-button" ?disabled=${this.disabled}>
+            <nile-button slot="trigger" variant="ghost" ?disabled=${this.disabled}>
               …
             </nile-button>
             <nile-menu>
@@ -122,14 +142,15 @@ export class NilePagination extends NileElement {
                   items,
                   this.currentPage,
                   idx < items.indexOf(this.currentPage) ? 'left' : 'right'
-                ).map(page => html`
-                  <nile-menu-item
-                    ?disabled=${this.disabled}
-                    @click=${() => this.goToPage(page)}
-                  >
-                    ${page}
-                  </nile-menu-item>
-                `)}
+                ).map(
+                  page => html`
+                    <nile-menu-item
+                      ?disabled=${this.disabled}
+                      @click=${() => this.goToPage(page)}
+                    >
+                      ${page}
+                    </nile-menu-item>`
+                )}
               </div>
             </nile-menu>
           </nile-dropdown>

package/vscode-html-custom-data.json

@@ -2341,7 +2341,7 @@
     },
     {
       "name": "nile-pagination",
-      "description": "Attributes:\n\n  * `totalItems` {`number`} - \n\n  * `pageSize` {`number`} - \n\n  * `currentPage` {`number`} - \n\n  * `variant` {`\"v1\" | \"v2\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `showTitle` {`boolean`} - \n\n  * `pageSizeOptions` {`number[]`} - \n\nProperties:\n\n  * `totalItems` {`number`} - \n\n  * `pageSize` {`number`} - \n\n  * `currentPage` {`number`} - \n\n  * `variant` {`\"v1\" | \"v2\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `showTitle` {`boolean`} - \n\n  * `pageSizeOptions` {`number[]`} - \n\n  * `totalPages` {`number`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Attributes:\n\n  * `totalItems` {`number`} - \n\n  * `pageSize` {`number`} - \n\n  * `currentPage` {`number`} - \n\n  * `variant` {`\"fluid\" | \"compact\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `showTitle` {`boolean`} - \n\n  * `pageSizeOptions` {`number[]`} - \n\nProperties:\n\n  * `totalItems` {`number`} - \n\n  * `pageSize` {`number`} - \n\n  * `currentPage` {`number`} - \n\n  * `variant` {`\"fluid\" | \"compact\"`} - \n\n  * `disabled` {`boolean`} - \n\n  * `showTitle` {`boolean`} - \n\n  * `pageSizeOptions` {`number[]`} - \n\n  * `_pageSizeOpen` {`boolean`} - \n\n  * `_pageSizeDropdown` {`HTMLElement`} - \n\n  * `totalPages` {`number`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "totalItems",
@@ -2357,13 +2357,13 @@
         },
         {
           "name": "variant",
-          "description": "`variant` {`\"v1\" | \"v2\"`} - \n\nProperty: variant\n\nDefault: v1",
+          "description": "`variant` {`\"fluid\" | \"compact\"`} - \n\nProperty: variant\n\nDefault: fluid",
           "values": [
             {
-              "name": "v1"
+              "name": "fluid"
             },
             {
-              "name": "v2"
+              "name": "compact"
             }
           ]
         },