@maggioli-design-system/mds-paginator 1.0.0

package/dist/collection/fixtures/cities.js

@@ -0,0 +1,110 @@
+const citiesDictionary = [
+  'Agrigento',
+  'Alessandria',
+  'Ancona',
+  'Aosta',
+  'Arezzo',
+  'Ascoli Piceno',
+  'Asti',
+  'Avellino',
+  'Bari',
+  'Barletta-Andria-Trani',
+  'Belluno',
+  'Benevento',
+  'Bergamo',
+  'Biella',
+  'Bologna',
+  'Bolzano',
+  'Brescia',
+  'Brindisi',
+  'Cagliari',
+  'Caltanissetta',
+  'Campobasso',
+  'Caserta',
+  'Catania',
+  'Catanzaro',
+  'Chieti',
+  'Como',
+  'Cosenza',
+  'Cremona',
+  'Crotone',
+  'Cuneo',
+  'Enna',
+  'Fermo',
+  'Ferrara',
+  'Firenze',
+  'Foggia',
+  'Forlì-Cesena',
+  'Frosinone',
+  'Genova',
+  'Gorizia',
+  'Grosseto',
+  'Imperia',
+  'Isernia',
+  'La Spezia',
+  'L\'Aquila',
+  'Latina',
+  'Lecce',
+  'Lecco',
+  'Livorno',
+  'Lodi',
+  'Lucca',
+  'Macerata',
+  'Mantova',
+  'Massa-Carrara',
+  'Matera',
+  'Messina',
+  'Milano',
+  'Modena',
+  'Monza e della Brianza',
+  'Napoli',
+  'Novara',
+  'Nuoro',
+  'Oristano',
+  'Padova',
+  'Palermo',
+  'Parma',
+  'Pavia',
+  'Perugia',
+  'Pesaro e Urbino',
+  'Pescara',
+  'Piacenza',
+  'Pisa',
+  'Pistoia',
+  'Pordenone',
+  'Potenza',
+  'Prato',
+  'Ragusa',
+  'Ravenna',
+  'Reggio Calabria',
+  'Reggio Emilia',
+  'Rieti',
+  'Rimini',
+  'Roma',
+  'Rovigo',
+  'Salerno',
+  'Sassari',
+  'Savona',
+  'Siena',
+  'Siracusa',
+  'Sondrio',
+  'Sud Sardegna',
+  'Taranto',
+  'Teramo',
+  'Terni',
+  'Torino',
+  'Trapani',
+  'Trento',
+  'Treviso',
+  'Trieste',
+  'Udine',
+  'Varese',
+  'Venezia',
+  'Verbano-Cusio-Ossola',
+  'Vercelli',
+  'Verona',
+  'Vibo Valentia',
+  'Vicenza',
+  'Viterbo',
+];
+export { citiesDictionary, };

package/dist/collection/interface/input-value.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/autocomplete.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/button.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/floating-ui.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/form-rel.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/input-text-type.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/input-value-type.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/loading.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/typography.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/types/variant.js

@@ -0,0 +1 @@
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1,22 @@
+/* MdsPaginator custom elements */
+export { MdsPaginator as MdsPaginator } from '../types/components/mds-paginator/mds-paginator';
+
+/**
+ * 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 * from '../types/components';

package/dist/components/index.js

@@ -0,0 +1,2 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { MdsPaginator, defineCustomElement as defineCustomElementMdsPaginator } from './mds-paginator.js';

package/dist/components/mds-paginator.d.ts

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

package/dist/components/mds-paginator.js

@@ -0,0 +1,76 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const mdsPaginatorCss = ".fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--background:rgb(var(--tone-neutral-09));display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.25rem}.pages{margin-left:0.5rem;margin-right:0.5rem;display:-ms-flexbox;display:flex;-ms-flex-negative:1;flex-shrink:1;-ms-flex-align:center;align-items:center;overflow:auto;scroll-behavior:smooth;border-radius:9999px;padding:0.5rem;background-color:var(--background);gap:2px;}:host() .pages{-ms-overflow-style:none;scrollbar-width:none}.pages::-webkit-scrollbar{display:none}";
+
+const MdsPaginator$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.pageChangedEvent = createEvent(this, "pageChangedEvent", 7);
+    /**
+     * Specifies the number of total pages to be handled
+     */
+    this.pages = 0;
+    /**
+     * Specifies the current page selected in the paginator
+     */
+    this.currentPage = 1;
+    this.scrollPage = () => {
+      const elementIndex = this.currentPage - 2;
+      const pagesElement = this.element.shadowRoot.querySelector('.pages');
+      const pagesItems = pagesElement.querySelectorAll('mds-paginator-item');
+      if (elementIndex < 0) {
+        pagesElement.scrollLeft = 0;
+        return;
+      }
+      if (elementIndex > pagesItems.length - 1) {
+        const pageItem = pagesItems[pagesItems.length - 1];
+        pagesElement.scrollLeft = pageItem.offsetLeft - pagesElement.offsetLeft;
+        return;
+      }
+      const pageItem = pagesItems[elementIndex];
+      pagesElement.scrollLeft = pageItem.offsetLeft - pagesElement.offsetLeft - (pagesElement.offsetWidth / 2) + (pageItem.offsetWidth / 2);
+    };
+    this.goToPage = (selectedPage) => {
+      if (selectedPage < 1 || selectedPage > this.pages) {
+        return;
+      }
+      this.currentPage = selectedPage;
+      this.scrollPage();
+      this.pageChangedEvent.emit(this.currentPage);
+    };
+  }
+  componentDidLoad() {
+    setTimeout(() => {
+      this.goToPage(this.currentPage);
+    }, 10);
+  }
+  render() {
+    return (h(Host, null, h("mds-paginator-item", { icon: "mi/baseline/arrow-back", disabled: this.currentPage === 1, onClick: () => this.goToPage(this.currentPage - 1) }), this.pages > 0 && h("mds-paginator-item", { active: this.currentPage === 1, onClick: () => this.goToPage(1) }, "1"), this.pages > 2 &&
+      h("div", { class: "pages" }, Array.from(Array(this.pages - 2).keys()).map(i => h("mds-paginator-item", { key: i, active: this.currentPage === i + 2, onClick: () => this.goToPage(i + 2) }, i + 2))), this.pages && h("mds-paginator-item", { active: this.currentPage === this.pages, onClick: () => this.goToPage(this.pages) }, this.pages), h("mds-paginator-item", { icon: "mi/baseline/arrow-forward", disabled: this.currentPage === this.pages, onClick: () => this.goToPage(this.currentPage + 1) })));
+  }
+  get element() { return this; }
+  static get style() { return mdsPaginatorCss; }
+}, [1, "mds-paginator", {
+    "pages": [2],
+    "currentPage": [1538, "current-page"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["mds-paginator"];
+  components.forEach(tagName => { switch (tagName) {
+    case "mds-paginator":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MdsPaginator$1);
+      }
+      break;
+  } });
+}
+
+const MdsPaginator = MdsPaginator$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MdsPaginator, defineCustomElement };