@everymatrix/helper-pagination 0.1.24 → 1.0.69

package/dist/components/helper-pagination.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface HelperPagination extends Components.HelperPagination, HTMLElement {}
-export const HelperPagination: {
-  prototype: HelperPagination;
-  new (): HelperPagination;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/helper-pagination.js

@@ -1,262 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-
-/**
- * @name isMobile
- * @description A method that returns if the browser used to access the app is from a mobile device or not
- * @param {String} userAgent window.navigator.userAgent
- * @returns {Boolean} true or false
- */
-const isMobile = (userAgent) => {
-  return !!(userAgent.toLowerCase().match(/android/i) ||
-    userAgent.toLowerCase().match(/blackberry|bb/i) ||
-    userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
-    userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
-};
-
-const DEFAULT_LANGUAGE = 'en';
-const SUPPORTED_LANGUAGES = ['ro', 'en'];
-const TRANSLATIONS = {
-  en: {
-    firstPage: 'First',
-    previousPage: 'Previous',
-    nextPage: 'Next',
-    lastPage: 'Last'
-  },
-  ro: {
-    firstPage: 'Prima',
-    previousPage: 'Anterior',
-    nextPage: 'Urmatoarea',
-    lastPage: 'Ultima'
-  },
-  fr: {
-    firstPage: 'First',
-    previousPage: 'Previous',
-    nextPage: 'Next',
-    lastPage: 'Last'
-  },
-  ar: {
-    firstPage: 'First',
-    previousPage: 'Previous',
-    nextPage: 'Next',
-    lastPage: 'Last'
-  }
-};
-const translate = (key, customLang) => {
-  const lang = customLang;
-  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
-};
-
-const helperPaginationCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}#PaginationContainer{width:100%;margin-top:20px;display:inline-flex;justify-content:space-between;align-items:center}.LeftItems button:not(:first-child),.RightItems button:not(:last-child){margin:0 10px}.LeftItems button,.RightItems button{padding:0;background-color:#009993;border-color:#009993}.PaginationArea{display:inline-flex;gap:10px;list-style:none}.PaginationArea li{margin:0;padding:0}.PaginationArea li button{width:24px;height:24px;display:flex;border:0;padding:0;justify-content:center;align-items:center;background-color:transparent;color:#000;cursor:pointer;pointer-events:all}.PaginationItem.ActiveItem button{background:#009993;border-color:#009993;color:#fff}.PaginationItem.ActiveItem button:disabled{pointer-events:none;cursor:not-allowed}.PaginationItem button:hover,.PaginationItem button:active{background:#009993;border-color:#009993;color:#fff;opacity:0.8}button{width:100px;height:32px;border:1px solid #524e52;border-radius:5px;background:#524e52;color:#fff;font-size:14px;font:inherit;cursor:pointer;transition:all 0.1s linear;text-transform:uppercase;text-align:center;letter-spacing:0}button:hover,button:active{background:#004D4A;border-color:#004D4A}button:disabled{background-color:#ccc;border-color:#ccc;color:#fff;cursor:not-allowed}@media screen and (max-width: 720px){button{width:90px;font-size:12px}}@media screen and (max-width: 480px){button{width:70px;font-size:10px}.paginationArea{padding:5px}}@media screen and (max-width: 320px){button{width:58px;font-size:10px}.paginationArea{padding:5px;gap:5px}}@media (hover: none){.paginationItem button:hover{background:inherit;border-color:inherit;color:inherit;opacity:1}.paginationItem.activeItem button:hover{background:#009993;border-color:#009993;color:#fff}}";
-
-const HelperPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.hpPageChange = createEvent(this, "hpPageChange", 7);
-    /**
-     * First page boolean value - determines if the page is disabled or active
-     */
-    this.firstPage = false;
-    /**
-     * Previous page boolean value - determines if the page is disabled or active
-     */
-    this.previousPage = false;
-    /**
-     * The received offset
-     */
-    this.offset = 0;
-    /**
-     * The received limit for the number of pages
-     */
-    this.limit = 1;
-    /**
-     * The received total number of pages
-     */
-    this.total = 1;
-    /**
-     * Language
-     */
-    this.language = 'en';
-    /**
-   * Client custom styling via string
-   */
-    this.clientStyling = '';
-    /**
-     * Client custom styling via url content
-     */
-    this.clientStylingUrlContent = '';
-    /**
-     * In component working variable for the array of pages
-     */
-    this.pagesArray = [];
-    /**
-     * In component working variable for last page
-     */
-    this.endInt = 0;
-    this.userAgent = window.navigator.userAgent;
-    this.currentPage = 1;
-    this.limitStylingAppends = false;
-    /**
-     * Navigation logic
-     */
-    this.navigateTo = (navigationPage) => {
-      switch (navigationPage) {
-        case 'firstPage':
-          this.offsetInt = 0;
-          break;
-        case 'lastPage':
-          this.offsetInt = this.endInt * this.limitInt;
-          break;
-        case 'previousPage':
-          this.offsetInt -= 10;
-          break;
-        case 'nextPage':
-          this.offsetInt += 10;
-          break;
-        case 'fivePagesBack':
-          this.offsetInt -= 30;
-          this.offsetInt = this.offsetInt < 0 ? 0 : this.offsetInt;
-          break;
-        case 'fivePagesForward':
-          this.offsetInt += 30;
-          this.offsetInt = this.offsetInt / 10 >= this.endInt ? this.endInt * 10 : this.offsetInt;
-          break;
-      }
-      this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
-    };
-    /**
-     * Handle navigation from here
-     */
-    this.paginationNavigation = (pageNumber, index) => {
-      if (!isNaN(pageNumber)) {
-        if (pageNumber === 1) {
-          this.offsetInt = pageNumber - 1;
-        }
-        else {
-          this.offsetInt = (pageNumber - 1) * 10;
-        }
-      }
-      else {
-        if (index === 0 && this.currentPage <= 4) {
-          this.navigateTo('firstPage');
-        }
-        else if (index === 0 && this.currentPage > 4) {
-          this.navigateTo('fivePagesBack');
-        }
-        else if (index === 4 && this.endInt - this.currentPage >= 2) {
-          this.navigateTo('fivePagesForward');
-        }
-      }
-      this.currentPage = this.offsetInt;
-      this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
-    };
-    this.setClientStyling = () => {
-      let sheet = document.createElement('style');
-      sheet.innerHTML = this.clientStyling;
-      this.stylingContainer.prepend(sheet);
-    };
-    this.setClientStylingURL = () => {
-      let cssFile = document.createElement('style');
-      setTimeout(() => {
-        cssFile.innerHTML = this.clientStylingUrlContent;
-        this.stylingContainer.prepend(cssFile);
-      }, 1);
-    };
-  }
-  componentWillRender() {
-    this.offsetInt = this.offset;
-    this.currentPage = this.offsetInt / this.limitInt + 1;
-    this.limitInt = this.limit;
-    this.totalInt = this.total;
-    this.endInt = (Math.ceil(this.totalInt / this.limitInt) - 1);
-    this.lastPage = (this.offsetInt >= this.endInt * this.limitInt) ? false : true;
-    /**
-     * Construct numbered navigation area based on current page position
-     */
-    if (this.currentPage === 1 || this.currentPage === 2) {
-      this.pagesArray = Array.from({ length: 4 }, (_, i) => i + 1);
-      this.pagesArray.push('...');
-    }
-    else if (this.currentPage >= 3 && ((this.endInt - this.currentPage) >= 2)) {
-      this.pagesArray = Array.from({ length: 3 }, (_, i) => this.currentPage + i - 1);
-      this.pagesArray.push('...');
-      this.pagesArray.unshift('...');
-    }
-    else if ((this.endInt - this.currentPage) < 3) {
-      this.pagesArray = Array.from({ length: 4 }, (_, i) => this.endInt - 2 + i);
-      this.pagesArray.unshift('...');
-    }
-  }
-  componentDidRender() {
-    // start custom styling area
-    if (!this.limitStylingAppends && this.stylingContainer) {
-      if (this.clientStyling)
-        this.setClientStyling();
-      if (this.clientStylingUrlContent)
-        this.setClientStylingURL();
-      this.limitStylingAppends = true;
-    }
-    // end custom styling area
-  }
-  render() {
-    /**
-     * Center navigation area
-     */
-    let navigationArea = h("ul", { class: "PaginationArea" }, this.pagesArray.map((item, index) => {
-      return (h("li", { class: 'PaginationItem' + (item === this.currentPage ? ' ActiveItem' : ' ') + ' ' + (isMobile(this.userAgent) ? 'MobileButtons' : '') }, h("button", { disabled: item === this.currentPage ? true : false, onClick: this.paginationNavigation.bind(this, item, index) }, h("span", null, item))));
-    }));
-    /**
-     * Left navigation area
-     */
-    let buttonsLeftSide = h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage, onClick: this.navigateTo.bind(this, 'firstPage') }, translate('firstPage', this.language)), h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
-    if (isMobile(this.userAgent)) {
-      buttonsLeftSide =
-        h("div", { class: "LeftItems" }, h("button", { disabled: !this.previousPage ? true : false, onClick: this.navigateTo.bind(this, 'previousPage') }, translate('previousPage', this.language)));
-    }
-    /**
-     * Right navigation area
-     */
-    let buttonsRightSide = h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)), h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'lastPage') }, translate('lastPage', this.language)));
-    if (isMobile(this.userAgent)) {
-      buttonsRightSide =
-        h("div", { class: "RightItems" }, h("button", { disabled: !this.lastPage ? true : false, onClick: this.navigateTo.bind(this, 'nextPage') }, translate('nextPage', this.language)));
-    }
-    return (h("div", { id: "PaginationContainer" }, buttonsLeftSide, navigationArea, buttonsRightSide));
-  }
-  static get style() { return helperPaginationCss; }
-}, [1, "helper-pagination", {
-    "firstPage": [1540, "first-page"],
-    "previousPage": [1540, "previous-page"],
-    "offset": [1538],
-    "limit": [1538],
-    "total": [1538],
-    "language": [1],
-    "clientStyling": [1, "client-styling"],
-    "clientStylingUrlContent": [1, "client-styling-url-content"],
-    "offsetInt": [32],
-    "lastPage": [32],
-    "limitInt": [32],
-    "totalInt": [32],
-    "pagesArray": [32],
-    "endInt": [32],
-    "limitStylingAppends": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["helper-pagination"];
-  components.forEach(tagName => { switch (tagName) {
-    case "helper-pagination":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, HelperPagination$1);
-      }
-      break;
-  } });
-}
-
-const HelperPagination = HelperPagination$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { HelperPagination, defineCustomElement };

package/dist/components/index.d.ts

@@ -1,26 +0,0 @@
-/* HelperPagination custom elements */
-
-import type { Components, JSX } from "../types/components";
-
-/**
- * Used to manually set the base path where assets can be found.
- * If the script is used as "module", it's recommended to use "import.meta.url",
- * such as "setAssetPath(import.meta.url)". Other options include
- * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
- * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
- * But do note that this configuration depends on how your script is bundled, or lack of
- * bundling, and where your assets can be loaded from. Additionally custom bundling
- * will have to ensure the static assets are copied to its build directory.
- */
-export declare const setAssetPath: (path: string) => void;
-
-export interface SetPlatformOptions {
-  raf?: (c: FrameRequestCallback) => number;
-  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
-  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
-}
-export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
-
-export type { Components, JSX };
-
-export * from '../types';

package/dist/components/index.js

@@ -1 +0,0 @@
-export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';