@maggioli-design-system/mds-paginator 1.0.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-970ace02.js');
+
+/*
+ Stencil Client Patch Esm v2.17.0 | 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([["mds-paginator.cjs",[[1,"mds-paginator",{"pages":[2],"currentPage":[1538,"current-page"]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/mds-paginator.cjs.entry.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-970ace02.js');
+
+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 = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.pageChangedEvent = index.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 (index.h(index.Host, null, index.h("mds-paginator-item", { icon: "mi/baseline/arrow-back", disabled: this.currentPage === 1, onClick: () => this.goToPage(this.currentPage - 1) }), this.pages > 0 && index.h("mds-paginator-item", { active: this.currentPage === 1, onClick: () => this.goToPage(1) }, "1"), this.pages > 2 &&
+      index.h("div", { class: "pages" }, Array.from(Array(this.pages - 2).keys()).map(i => index.h("mds-paginator-item", { key: i, active: this.currentPage === i + 2, onClick: () => this.goToPage(i + 2) }, i + 2))), this.pages && index.h("mds-paginator-item", { active: this.currentPage === this.pages, onClick: () => this.goToPage(this.pages) }, this.pages), index.h("mds-paginator-item", { icon: "mi/baseline/arrow-forward", disabled: this.currentPage === this.pages, onClick: () => this.goToPage(this.currentPage + 1) })));
+  }
+  get element() { return index.getElement(this); }
+};
+MdsPaginator.style = mdsPaginatorCss;
+
+exports.mds_paginator = MdsPaginator;

package/dist/cjs/mds-paginator.cjs.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-970ace02.js');
+
+/*
+ Stencil Client Patch Browser v2.17.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-paginator.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["mds-paginator.cjs",[[1,"mds-paginator",{"pages":[2],"currentPage":[1538,"current-page"]}]]]], options);
+});

package/dist/collection/collection-manifest.json

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

package/dist/collection/components/mds-paginator/mds-paginator.css

@@ -0,0 +1,73 @@
+.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);
+
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+/*
+* @prop --background: Sets the background-color of the pages area and the item
+*/
+
+:host {
+
+  --background: rgb(var(--tone-neutral-09));
+
+  display: flex;
+
+  align-items: center;
+
+  gap: 0.25rem;
+}
+
+.pages {
+
+  margin-left: 0.5rem;
+
+  margin-right: 0.5rem;
+
+  display: flex;
+
+  flex-shrink: 1;
+
+  align-items: center;
+
+  overflow: auto;
+
+  scroll-behavior: smooth;
+
+  border-radius: 9999px;
+
+  padding: 0.5rem;
+
+  background-color: var(--background);
+  gap: 2px;
+
+  /* scroll-snap-type: x mandatory; */
+}
+
+:host () .pages {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.pages::-webkit-scrollbar {
+  display: none;
+}

package/dist/collection/components/mds-paginator/mds-paginator.js

@@ -0,0 +1,114 @@
+import { Component, Element, Event, Host, h, Prop } from '@stencil/core';
+export class MdsPaginator {
+  constructor() {
+    /**
+     * 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) })));
+  }
+  static get is() { return "mds-paginator"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["mds-paginator.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["mds-paginator.css"]
+  }; }
+  static get properties() { return {
+    "pages": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "0",
+        "resolved": "0",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the number of total pages to be handled"
+      },
+      "attribute": "pages",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "currentPage": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the current page selected in the paginator"
+      },
+      "attribute": "current-page",
+      "reflect": true,
+      "defaultValue": "1"
+    }
+  }; }
+  static get events() { return [{
+      "method": "pageChangedEvent",
+      "name": "pageChangedEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits when a page is changed"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "element"; }
+}

package/dist/collection/components/mds-paginator/test/mds-paginator.stories.js

@@ -0,0 +1,26 @@
+import { h } from '@stencil/core';
+import { lokiDisabled } from '@test/loki-disabled';
+export default {
+  title: 'UI / Paginator',
+  argTypes: {
+    pages: {
+      type: { name: 'number', required: false },
+      description: 'Specifies the number of total pages to be handled',
+    },
+    'current-page': {
+      type: { name: 'number', required: false },
+      description: 'Specifies the current page selected in the paginator',
+    },
+  },
+};
+const Template = args => h("mds-paginator", Object.assign({}, args));
+export const Default = Template.bind({});
+Default.args = {
+  pages: 32,
+};
+export const currentPage = Template.bind({});
+currentPage.args = {
+  'current-page': 16,
+  pages: 32,
+};
+currentPage.story = lokiDisabled;

package/dist/collection/dictionary/autocomplete.js

@@ -0,0 +1,59 @@
+const autoCompleteDictionary = [
+  'additional-name',
+  'address',
+  'address-level1',
+  'address-level2',
+  'address-level3',
+  'address-level4',
+  'address-line1',
+  'address-line2',
+  'address-line3',
+  'bday',
+  'bday-day',
+  'bday-month',
+  'bday-year',
+  'cc-additional-name',
+  'cc-csc',
+  'cc-exp',
+  'cc-exp-month',
+  'cc-exp-year',
+  'cc-family-name',
+  'cc-family-name',
+  'cc-given-name',
+  'cc-name',
+  'cc-number',
+  'cc-type',
+  'country',
+  'country-name',
+  'current-password',
+  'email',
+  'family-name',
+  'given-name',
+  'honorific-prefix',
+  'honorific-suffix',
+  'impp',
+  'language',
+  'name',
+  'new-password',
+  'nickname',
+  'off',
+  'on',
+  'one-time-code',
+  'organization',
+  'organization-title',
+  'photo',
+  'postal-code',
+  'sex',
+  'street-address',
+  'tel',
+  'tel-area-code',
+  'tel-country-code',
+  'tel-extension',
+  'tel-local',
+  'tel-national',
+  'transaction-amount',
+  'transaction-currency',
+  'url',
+  'username',
+];
+export { autoCompleteDictionary, };

package/dist/collection/dictionary/button.js

@@ -0,0 +1,26 @@
+const buttonVariantDictionary = [
+  'dark',
+  'error',
+  'info',
+  'light',
+  'primary',
+  'success',
+  'warning',
+];
+const buttonToneVariantDictionary = [
+  'strong',
+  'weak',
+  'ghost',
+  'quiet',
+];
+const buttonSizeDictionary = [
+  'sm',
+  'md',
+  'lg',
+  'xl',
+];
+const buttonIconPositionDictionary = [
+  'left',
+  'right',
+];
+export { buttonSizeDictionary, buttonToneVariantDictionary, buttonVariantDictionary, buttonIconPositionDictionary, };

package/dist/collection/dictionary/color.js

@@ -0,0 +1,19 @@
+const colorLabelDictionary = [
+  'amaranth',
+  'aqua',
+  'blue',
+  'green',
+  'lime',
+  'orange',
+  'orchid',
+  'sky',
+  'violet',
+  'yellow',
+];
+const colorStatusDictionary = [
+  'error',
+  'info',
+  'success',
+  'warning',
+];
+export { colorLabelDictionary, colorStatusDictionary, };

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

@@ -0,0 +1,19 @@
+const floatingUIPlacementDictionary = [
+  'bottom',
+  'bottom-end',
+  'bottom-start',
+  'left',
+  'left-end',
+  'left-start',
+  'right',
+  'right-end',
+  'right-start',
+  'top',
+  'top-end',
+  'top-start',
+];
+const floatingUIStrategyDictionary = [
+  'absolute',
+  'fixed',
+];
+export { floatingUIPlacementDictionary, floatingUIStrategyDictionary, };

package/dist/collection/dictionary/icon.js

@@ -0,0 +1,3 @@
+import jsonIconsDictionary from '../fixtures/icons.json';
+const iconsDictionary = jsonIconsDictionary;
+export { iconsDictionary, };

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

@@ -0,0 +1,13 @@
+const inputTextTypeDictionary = [
+  'date',
+  'email',
+  'number',
+  'password',
+  'search',
+  'tel',
+  'text',
+  'textarea',
+  'time',
+  'url',
+];
+export { inputTextTypeDictionary, };

package/dist/collection/dictionary/loading.js

@@ -0,0 +1,5 @@
+const loadingDictionary = [
+  'eager',
+  'lazy',
+];
+export { loadingDictionary, };

package/dist/collection/dictionary/typography.js

@@ -0,0 +1,59 @@
+const typographyDictionary = [
+  'action',
+  'caption',
+  'code',
+  'detail',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'hack',
+  'label',
+  'option',
+  'paragraph',
+  'tip',
+];
+const typographyVariationsDictionary = [
+  'title',
+  'info',
+  'read',
+  'mono',
+];
+const typographyMonoDictionary = [
+  'code',
+  'hack',
+];
+const typographyTitleDictionary = [
+  'action',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+];
+const typographyInfoDictionary = [
+  'caption',
+  'detail',
+  'label',
+  'option',
+  'paragraph',
+  'tip',
+];
+const typographyReadDictionary = [
+  'caption',
+  'detail',
+  'paragraph',
+];
+const typographySmallerDictionary = [
+  'option',
+  'tip',
+];
+const typographyTooltipDictionary = [
+  'caption',
+  'detail',
+  'tip',
+];
+export { typographyDictionary, typographyVariationsDictionary, typographyMonoDictionary, typographyTitleDictionary, typographyInfoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTooltipDictionary, };

package/dist/collection/dictionary/variant.js

@@ -0,0 +1,65 @@
+const themeVariantDictionary = [
+  'dark',
+  'error',
+  'info',
+  'light',
+  'primary',
+  'success',
+  'warning',
+];
+const themeLuminanceVariantDictionary = [
+  'dark',
+  'light',
+];
+const themeStatusVariantDictionary = [
+  'error',
+  'info',
+  'success',
+  'warning',
+];
+const themeFullVariantDictionary = [
+  'amaranth',
+  'aqua',
+  'blue',
+  'dark',
+  'error',
+  'green',
+  'info',
+  'light',
+  'lime',
+  'orange',
+  'orchid',
+  'sky',
+  'success',
+  'violet',
+  'warning',
+  'yellow',
+];
+const themeLabelVariantDictionary = [
+  'amaranth',
+  'aqua',
+  'blue',
+  'green',
+  'lime',
+  'orange',
+  'orchid',
+  'sky',
+  'violet',
+  'yellow',
+];
+const toneVariantDictionary = [
+  'strong',
+  'weak',
+  'ghost',
+  'quiet',
+];
+const toneSimpleVariantDictionary = [
+  'strong',
+  'weak',
+  'quiet',
+];
+const toneMinimalVariantDictionary = [
+  'strong',
+  'weak',
+];
+export { themeFullVariantDictionary, themeLabelVariantDictionary, themeLuminanceVariantDictionary, themeStatusVariantDictionary, themeVariantDictionary, toneMinimalVariantDictionary, toneSimpleVariantDictionary, toneVariantDictionary, };