@spectric/ui 0.0.21 → 0.0.22

package/src/components/pagination/pagination.ts

@@ -1,146 +1,200 @@
-import { html, LitElement, PropertyValues } from 'lit';
+import { html, LitElement, PropertyValues } from "lit";
 import "../Button";
-import { customElement, property, query, } from 'lit/decorators.js';
-import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
-export const PaginationElementTag = "spectric-pagination"
-import "./pagination.css"
-import { ButtonSizesTypes } from '../Button';
-export type { PaginationProps, PaginationChangeProps, PaginationEvents }
+import { customElement, property, query } from "lit/decorators.js";
+import {
+  HTMLElementTagWithEvents,
+  ReactElementWithPropsAndEvents,
+} from "../types";
+export const PaginationElementTag = "spectric-pagination";
+import "./pagination.css";
+import { ButtonSizesTypes } from "../Button";
+import { ARROW_LEFT, ARROW_RIGHT } from "../symbols";
+export type { PaginationProps, PaginationChangeProps, PaginationEvents };
 
 interface PaginationChangeProps {
-    page?: number;
-    pageSize?: number;
+  page?: number;
+  pageSize?: number;
 }
 
 interface PaginationProps extends PaginationChangeProps {
-    size?: ButtonSizesTypes
-    totalItems?: number
-    pageSizeOptions?: number[]
+  size?: ButtonSizesTypes;
+  totalItems?: number;
+  pageSizeOptions?: number[];
 }
 
-
 /**
  * Pagination Element
  */
 @customElement(PaginationElementTag)
 export class PaginationElement extends LitElement implements PaginationProps {
-    @property({ type: Number, reflect: true })
-    page: number = 1;
+  @property({ type: Number, reflect: true })
+  page: number = 1;
 
-    @property({ type: Number, reflect: true })
-    pageSize: number = 10;
+  @property({ type: Number, reflect: true })
+  pageSize: number = 10;
 
-    @property({ type: Number, reflect: true })
-    totalItems?: number;
+  @property({ type: Number, reflect: true })
+  totalItems?: number;
 
-    @property({ type: Array })
-    pageSizeOptions = [10, 20, 50, 100, 1000];
+  @property({ type: Array })
+  pageSizeOptions = [10, 20, 50, 100, 1000];
 
-    @query("select")
-    select?: HTMLSelectElement
-    /**
-     * Size of the pagination buttons
-     */
-    @property({ type: String, reflect: true })
-    size: ButtonSizesTypes = "xsmall"
-    protected createRenderRoot(): HTMLElement | DocumentFragment {
-        return this
-    }
-    protected update(_changedProperties: PropertyValues): void {
-        if (_changedProperties.has("pageSize") && !this.pageSizeOptions.includes(this.pageSize)) {
-            this.pageSizeOptions = [...this.pageSizeOptions, this.pageSize].sort((a, b) => a - b)
-            /**
-             * If an option isn't present in the select options list it cannot update its value until after the option is present.
-             * We requests an animation frame to make sure we the value was set correctly after the option is added. We update it if the value is incorrect
-             */
-            requestAnimationFrame(() => {
-                if (this.select && this.select.value !== String(this.pageSize)) {
-                    this.select.value = String(this.pageSize)
-                }
-            })
+  @query("select")
+  select?: HTMLSelectElement;
+  /**
+   * Size of the pagination buttons
+   */
+  @property({ type: String, reflect: true })
+  size: ButtonSizesTypes = "xsmall";
+  protected createRenderRoot(): HTMLElement | DocumentFragment {
+    return this;
+  }
+  protected update(_changedProperties: PropertyValues): void {
+    if (
+      _changedProperties.has("pageSize") &&
+      !this.pageSizeOptions.includes(this.pageSize)
+    ) {
+      this.pageSizeOptions = [...this.pageSizeOptions, this.pageSize].sort(
+        (a, b) => a - b
+      );
+      /**
+       * If an option isn't present in the select options list it cannot update its value until after the option is present.
+       * We requests an animation frame to make sure we the value was set correctly after the option is added. We update it if the value is incorrect
+       */
+      requestAnimationFrame(() => {
+        if (this.select && this.select.value !== String(this.pageSize)) {
+          this.select.value = String(this.pageSize);
         }
-        super.update(_changedProperties)
-    }
-    private _handlePageUp = () => {
-        this.page += 1
-        this._emitChange()
-    }
-    private _handlePageDown = () => {
-        this.page -= 1
-        this._emitChange()
+      });
     }
-    private _handleSizeChange = (e: any) => {
-        e.stopPropagation()
-        e.preventDefault()
-        let value = parseInt(e.target.value)
-        this.pageSize = value
-        this._emitChange()
+    super.update(_changedProperties);
+  }
+  private _handlePageUp = () => {
+    this.page += 1;
+    this._emitChange();
+  };
+  private _handlePageDown = () => {
+    this.page -= 1;
+    this._emitChange();
+  };
+  private _handleSizeChange = (e: any) => {
+    e.stopPropagation();
+    e.preventDefault();
+    let value = parseInt(e.target.value);
+    this.pageSize = value;
+    this._emitChange();
+  };
+  private _emitChange = () => {
+    let { page, pageSize } = this;
+    this.dispatchEvent(
+      new CustomEvent<PaginationChangeProps>("change", {
+        detail: { page, pageSize },
+      })
+    );
+  };
+  protected render(): unknown {
+    let nextPage = this.page * this.pageSize;
+    let nextPageDisabled = true;
+
+    if (this.totalItems && nextPage < this.totalItems) {
+      nextPageDisabled = false;
     }
-    private _emitChange = () => {
-        let { page, pageSize } = this
-        this.dispatchEvent(new CustomEvent<PaginationChangeProps>("change", { detail: { page, pageSize } }))
+    let pageText = "";
+    if (this.totalItems) {
+      pageText = `${this.page} of ${Math.ceil(
+        this.totalItems / this.pageSize
+      )}`;
     }
-    protected render(): unknown {
-        let nextPage = (this.page) * this.pageSize
-        let nextPageDisabled = true
-
-        if (this.totalItems && nextPage < this.totalItems) {
-            nextPageDisabled = false
-        }
-        let pageText = ""
-        if (this.totalItems) {
-            pageText = `${this.page} of ${Math.ceil(this.totalItems / this.pageSize)}`
-        }
-        return html`
-        <div class="spectric-pagination-container">
+    return html`
+      <div class="spectric-pagination-container">
+        <div>
+          <!-- TODO/FIXME Make a select component and use it for cross browser styling-->
+          <select
+            @change=${this._handleSizeChange}
+            .value=${String(this.pageSize)}
+          >
+            ${this.pageSizeOptions.map(
+              (size) =>
+                html`<option
+                  .value=${String(size)}
+                  class=${String(size) === String(this.pageSize)
+                    ? "selected"
+                    : ""}
+                >
+                  ${size}
+                </option>`
+            )}
+          </select>
+        </div>
+        ${this.totalItems
+          ? html`
+              <div class="spectric-pagination-text">
+                ${`Items ${(this.page - 1) * this.pageSize}-${Math.min(
+                  this.page * this.pageSize,
+                  this.totalItems
+                )} of ${this.totalItems}`}
+              </div>
+              <div class="spectric-pagination-container">
+                <div>${pageText}</div>
                 <div>
-                    <!-- TODO/FIXME Make a select component and use it for cross browser styling-->
-                    <select @change=${this._handleSizeChange} .value=${String(this.pageSize)}>
-                        ${this.pageSizeOptions.map(size => html`<option .value=${String(size)} class=${String(size) === String(this.pageSize) ? "selected" : ""}>${size}</option>`)}
-                    </select>
-                </div>
-                ${this.totalItems ? html`
-                    <div class="spectric-pagination-text">${`Items ${(this.page - 1) * this.pageSize}-${Math.min(this.page * this.pageSize, this.totalItems)} of ${this.totalItems}`}</div>
-                <div class="spectric-pagination-container">
-                    <div>
-                    ${pageText}
-                    </div>
-                    <div>
-                    <spectric-button size=${this.size} ?disabled=${this.page === 1} @click=${this._handlePageDown} icon>🠈</spectric-button>
-                    <spectric-button size=${this.size} ?disabled=${nextPageDisabled} @click=${this._handlePageUp} icon>🠊</spectric-button>
-                    </div>
+                  <spectric-button
+                    size=${this.size}
+                    ?disabled=${this.page === 1}
+                    @click=${this._handlePageDown}
+                    icon
+                    >${ARROW_LEFT}</spectric-button
+                  >
+                  <spectric-button
+                    size=${this.size}
+                    ?disabled=${nextPageDisabled}
+                    @click=${this._handlePageUp}
+                    icon
+                    >${ARROW_RIGHT}</spectric-button
+                  >
                 </div>
-                `: null}
-        </div>
-        `;
-    }
+              </div>
+            `
+          : null}
+      </div>
+    `;
+  }
 }
 
 interface PaginationEvents {
-    'change': (event: CustomEvent<PaginationChangeProps>) => void;
+  change: (event: CustomEvent<PaginationChangeProps>) => void;
 }
 
 declare global {
-    interface HTMLElementTagNameMap {
-        [PaginationElementTag]: HTMLElementTagWithEvents<PaginationElement, PaginationEvents>
-
+  interface HTMLElementTagNameMap {
+    [PaginationElementTag]: HTMLElementTagWithEvents<
+      PaginationElement,
+      PaginationEvents
+    >;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * @see {@link PaginationElement}
+       */
+      [PaginationElementTag]: ReactElementWithPropsAndEvents<
+        PaginationElement,
+        PaginationProps,
+        PaginationEvents
+      >;
     }
+  }
+  namespace React {
     namespace JSX {
-        interface IntrinsicElements {
-            /**
-             * @see {@link PaginationElement}
-             */
-            [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>;
-        }
-    }
-    namespace React {
-        namespace JSX {
-            interface IntrinsicElements {
-                /**
-                 * @see {@link PaginationElement}
-                 */
-                [PaginationElementTag]: ReactElementWithPropsAndEvents<PaginationElement, PaginationProps, PaginationEvents>
-            }
-        }
+      interface IntrinsicElements {
+        /**
+         * @see {@link PaginationElement}
+         */
+        [PaginationElementTag]: ReactElementWithPropsAndEvents<
+          PaginationElement,
+          PaginationProps,
+          PaginationEvents
+        >;
+      }
     }
+  }
 }