@everymatrix/helper-pagination 1.32.4 → 1.33.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-7c071a78.js');
+
+/*
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["helper-pagination.cjs",[[1,"helper-pagination",{"nextPage":[1537,"next-page"],"prevPage":[1537,"prev-page"],"offset":[1538],"limit":[1538],"total":[1538],"language":[1537],"clientStyling":[1537,"client-styling"],"clientStylingUrlContent":[1537,"client-styling-url-content"],"arrowsActive":[1540,"arrows-active"],"secondaryArrowsActive":[1540,"secondary-arrows-active"],"numberedNavActive":[1540,"numbered-nav-active"],"offsetInt":[32],"lastPage":[32],"previousPage":[32],"limitInt":[32],"totalInt":[32],"pagesArray":[32],"endInt":[32],"limitStylingAppends":[32]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "./components/helper-pagination/helper-pagination.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/helper-pagination/helper-pagination.css

@@ -0,0 +1,139 @@
+@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: 20px 0;
+  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: 14px;
+  }
+}
+@media screen and (max-width: 480px) {
+  button {
+    width: 70px;
+    font-size: 14px;
+  }
+
+  .paginationArea {
+    padding: 5px;
+  }
+}
+@media screen and (max-width: 320px) {
+  button {
+    width: 58px;
+    font-size: 12px;
+  }
+
+  .paginationArea {
+    padding: 5px;
+    gap: 5px;
+  }
+}
+/* fix for issue on hover/visited for mobile devices */
+@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;
+  }
+}

package/dist/collection/components/helper-pagination/helper-pagination.js

@@ -0,0 +1,443 @@
+import { Component, h, Event, Prop, State } from '@stencil/core';
+import { isMobile } from "../../utils/utils";
+import { translate } from '../../utils/locale.utils';
+export class HelperPagination {
+  constructor() {
+    /**
+     * Next page string value - determines if the next page is disabled or active
+     */
+    this.nextPage = '';
+    /**
+     * Previous page string value - determines if the previous page is disabled or active
+     */
+    this.prevPage = '';
+    /**
+     * 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 = '';
+    /**
+     * Component working variable for last page
+     */
+    this.lastPage = false;
+    /**
+     * Component working variable for prvious page
+     */
+    this.previousPage = false;
+    /**
+     * 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 -= this.limitInt;
+          break;
+        case 'nextPage':
+          this.offsetInt += this.limitInt;
+          break;
+        case 'fivePagesBack':
+          this.offsetInt -= this.limitInt * 5;
+          this.offsetInt = this.offsetInt <= 0 ? 0 : this.offsetInt;
+          break;
+        case 'fivePagesForward':
+          this.offsetInt += this.limitInt * 5;
+          this.offsetInt = this.offsetInt / this.limitInt >= this.endInt ? this.endInt * this.limitInt : this.offsetInt;
+          break;
+      }
+      this.previousPage = !this.offsetInt ? false : true;
+      this.hpPageChange.emit({ offset: this.offsetInt, limit: this.limitInt, total: this.totalInt });
+    };
+    /**
+     * Handle navigation from here
+     */
+    this.paginationNavigation = (pageNumber, index) => {
+      this.previousPage = true;
+      if (!isNaN(pageNumber)) {
+        if (pageNumber === 1) {
+          this.offsetInt = pageNumber - 1;
+          this.previousPage = false;
+        }
+        else {
+          this.offsetInt = (pageNumber - 1) * this.limitInt;
+        }
+      }
+      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.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.limitInt = this.limit;
+    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 buttonSecondaryLeftSide = h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'firstPage') },
+      h("span", { class: "NavigationButton" }, translate('firstPage', this.language)),
+      h("span", { class: "NavigationIcon" }));
+    let buttonsLeftSide = h("div", { class: "LeftItems" },
+      this.secondaryArrowsActive && buttonSecondaryLeftSide,
+      h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') },
+        h("span", { class: "NavigationButton" }, translate('previousPage', this.language)),
+        h("span", { class: "NavigationIcon" })));
+    if (isMobile(this.userAgent)) {
+      buttonsLeftSide =
+        h("div", { class: "LeftItems" },
+          h("button", { disabled: this.prevPage ? false : true, onClick: this.navigateTo.bind(this, 'previousPage') },
+            h("span", { class: "NavigationButton" }, translate('previousPage', this.language)),
+            h("span", { class: "NavigationIcon" })));
+    }
+    /**
+     * Right navigation area
+     */
+    let buttonSecondaryRightSide = h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'lastPage') },
+      h("span", { class: "NavigationButton" }, translate('lastPage', this.language)),
+      h("span", { class: "NavigationIcon" }));
+    let buttonsRightSide = h("div", { class: "RightItems" },
+      h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') },
+        h("span", { class: "NavigationButton" }, translate('nextPage', this.language)),
+        h("span", { class: "NavigationIcon" })),
+      this.secondaryArrowsActive && buttonSecondaryRightSide);
+    if (isMobile(this.userAgent)) {
+      buttonsRightSide =
+        h("div", { class: "RightItems" },
+          h("button", { disabled: this.nextPage ? false : true, onClick: this.navigateTo.bind(this, 'nextPage') },
+            h("span", { class: "NavigationButton" }, translate('nextPage', this.language)),
+            h("span", { class: "NavigationIcon" })));
+    }
+    return (h("div", { id: "PaginationContainer", ref: el => this.stylingContainer = el },
+      this.arrowsActive && buttonsLeftSide,
+      this.numberedNavActive && navigationArea,
+      this.arrowsActive && buttonsRightSide));
+  }
+  static get is() { return "helper-pagination"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["helper-pagination.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["helper-pagination.css"]
+  }; }
+  static get properties() { return {
+    "nextPage": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Next page string value - determines if the next page is disabled or active"
+      },
+      "attribute": "next-page",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "prevPage": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Previous page string value - determines if the previous page is disabled or active"
+      },
+      "attribute": "prev-page",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "offset": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The received offset"
+      },
+      "attribute": "offset",
+      "reflect": true,
+      "defaultValue": "0"
+    },
+    "limit": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The received limit for the number of pages"
+      },
+      "attribute": "limit",
+      "reflect": true,
+      "defaultValue": "1"
+    },
+    "total": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The received total number of pages"
+      },
+      "attribute": "total",
+      "reflect": true,
+      "defaultValue": "1"
+    },
+    "language": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Language"
+      },
+      "attribute": "language",
+      "reflect": true,
+      "defaultValue": "'en'"
+    },
+    "clientStyling": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via string"
+      },
+      "attribute": "client-styling",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "clientStylingUrlContent": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via url content"
+      },
+      "attribute": "client-styling-url-content",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "arrowsActive": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Customize pagination: Activate pagination arrows"
+      },
+      "attribute": "arrows-active",
+      "reflect": true
+    },
+    "secondaryArrowsActive": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Customize pagination: Activate pagination secondary arrows"
+      },
+      "attribute": "secondary-arrows-active",
+      "reflect": true
+    },
+    "numberedNavActive": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Customize pagination: Activate pagination numbered navigation"
+      },
+      "attribute": "numbered-nav-active",
+      "reflect": true
+    }
+  }; }
+  static get states() { return {
+    "offsetInt": {},
+    "lastPage": {},
+    "previousPage": {},
+    "limitInt": {},
+    "totalInt": {},
+    "pagesArray": {},
+    "endInt": {},
+    "limitStylingAppends": {}
+  }; }
+  static get events() { return [{
+      "method": "hpPageChange",
+      "name": "hpPageChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event that handles the navigation, updating the offset, limit and total values"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/utils/locale.utils.js

@@ -0,0 +1,44 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'hu', 'hr'];
+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'
+  },
+  hu: {
+    firstPage: 'First',
+    previousPage: 'Previous',
+    nextPage: 'Következő',
+    lastPage: 'Last'
+  },
+  hr: {
+    firstPage: 'Prva',
+    previousPage: 'Prethodna',
+    nextPage: 'Slijedeća',
+    lastPage: 'Zadnja'
+  }
+};
+export const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,15 @@
+export function format(first, middle, last) {
+  return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
+}
+/**
+ * @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
+ */
+export 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));
+};

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

@@ -0,0 +1,11 @@
+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;