@maggioli-design-system/mds-paginator 3.5.0 → 3.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/dist/cjs/{index-b95e44b9.js → index-ec2d8ba2.js} +60 -23
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/mds-paginator.cjs.entry.js +47 -47
  4. package/dist/cjs/mds-paginator.cjs.js +2 -2
  5. package/dist/collection/collection-manifest.json +1 -1
  6. package/dist/collection/common/aria.js +18 -18
  7. package/dist/collection/common/keyboard-manager.js +38 -38
  8. package/dist/collection/common/unit.js +7 -7
  9. package/dist/collection/components/mds-paginator/mds-paginator.css +4 -0
  10. package/dist/collection/components/mds-paginator/mds-paginator.js +118 -118
  11. package/dist/collection/components/mds-paginator/test/mds-paginator.e2e.js +9 -7
  12. package/dist/collection/components/mds-paginator/test/mds-paginator.stories.js +13 -13
  13. package/dist/collection/dictionary/autocomplete.js +56 -56
  14. package/dist/collection/dictionary/button.js +19 -19
  15. package/dist/collection/dictionary/color.js +14 -14
  16. package/dist/collection/dictionary/floating-ui.js +14 -14
  17. package/dist/collection/dictionary/input.js +31 -15
  18. package/dist/collection/dictionary/loading.js +2 -2
  19. package/dist/collection/dictionary/typography.js +46 -46
  20. package/dist/collection/dictionary/variant.js +54 -54
  21. package/dist/collection/fixtures/cities.js +107 -107
  22. package/dist/components/mds-paginator.d.ts +2 -2
  23. package/dist/components/mds-paginator.js +63 -63
  24. package/dist/documentation.json +2 -2
  25. package/dist/esm/{index-4d6926fe.js → index-0becd821.js} +60 -23
  26. package/dist/esm/loader.js +2 -2
  27. package/dist/esm/mds-paginator.entry.js +47 -47
  28. package/dist/esm/mds-paginator.js +3 -3
  29. package/dist/esm-es5/index-0becd821.js +1 -0
  30. package/dist/esm-es5/loader.js +1 -1
  31. package/dist/esm-es5/mds-paginator.entry.js +1 -1
  32. package/dist/esm-es5/mds-paginator.js +1 -1
  33. package/dist/mds-paginator/mds-paginator.esm.js +1 -1
  34. package/dist/mds-paginator/mds-paginator.js +15 -15
  35. package/dist/mds-paginator/{p-fa98c4e8.system.js → p-307f11cd.system.js} +1 -1
  36. package/dist/mds-paginator/p-3e79a595.system.entry.js +1 -0
  37. package/dist/mds-paginator/p-6e98b0fc.js +2 -0
  38. package/dist/mds-paginator/p-b32f0ea9.entry.js +1 -0
  39. package/dist/mds-paginator/p-de5ca806.system.js +2 -0
  40. package/dist/stats.json +30 -30
  41. package/dist/types/common/keyboard-manager.d.ts +9 -9
  42. package/dist/types/components/mds-paginator/mds-paginator.d.ts +17 -17
  43. package/dist/types/components/mds-paginator/test/mds-paginator.stories.d.ts +16 -16
  44. package/dist/types/dictionary/input.d.ts +2 -1
  45. package/dist/types/interface/input-value.d.ts +1 -1
  46. package/dist/types/stencil-public-runtime.d.ts +8 -0
  47. package/documentation.json +14 -4
  48. package/package.json +4 -4
  49. package/src/components/mds-paginator/mds-paginator.css +3 -3
  50. package/src/components/mds-paginator/test/mds-paginator.e2e.ts +2 -0
  51. package/src/dictionary/input.ts +18 -0
  52. package/src/fixtures/icons.json +3 -0
  53. package/src/fixtures/iconsauce.json +3 -0
  54. package/www/build/mds-paginator.esm.js +1 -1
  55. package/www/build/mds-paginator.js +15 -15
  56. package/www/build/{p-fa98c4e8.system.js → p-307f11cd.system.js} +1 -1
  57. package/www/build/p-3e79a595.system.entry.js +1 -0
  58. package/www/build/p-6e98b0fc.js +2 -0
  59. package/www/build/p-b32f0ea9.entry.js +1 -0
  60. package/www/build/p-de5ca806.system.js +2 -0
  61. package/dist/esm-es5/index-4d6926fe.js +0 -1
  62. package/dist/mds-paginator/p-4214627d.js +0 -2
  63. package/dist/mds-paginator/p-c339f377.system.js +0 -2
  64. package/dist/mds-paginator/p-d6d7631c.system.entry.js +0 -1
  65. package/dist/mds-paginator/p-eea359c7.entry.js +0 -1
  66. package/www/build/p-4214627d.js +0 -2
  67. package/www/build/p-c339f377.system.js +0 -2
  68. package/www/build/p-d6d7631c.system.entry.js +0 -1
  69. package/www/build/p-eea359c7.entry.js +0 -1
@@ -49,6 +49,13 @@ const uniqueTime = (key, measureText) => {
49
49
  }
50
50
  };
51
51
  const HYDRATED_CSS = '{visibility:hidden}[hydrated]{visibility:inherit}';
52
+ /**
53
+ * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
54
+ *
55
+ * Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
56
+ * support as of Stencil v4.
57
+ */
58
+ const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
52
59
  /**
53
60
  * Default style mode id
54
61
  */
@@ -286,6 +293,10 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
286
293
  }
287
294
  styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
288
295
  }
296
+ // Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM
297
+ if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
298
+ styleElm.innerHTML += SLOT_FB_CSS;
299
+ }
289
300
  if (appliedStyles) {
290
301
  appliedStyles.add(scopeId);
291
302
  }
@@ -419,7 +430,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
419
430
  elm[memberName] = newValue;
420
431
  }
421
432
  }
422
- catch (e) { }
433
+ catch (e) {
434
+ /**
435
+ * in case someone tries to set a read-only property, e.g. "namespaceURI", we just ignore it
436
+ */
437
+ }
423
438
  }
424
439
  if (newValue == null || newValue === false) {
425
440
  if (newValue !== false || elm.getAttribute(memberName) === '') {
@@ -438,6 +453,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
438
453
  }
439
454
  };
440
455
  const parseClassListRegex = /\s/;
456
+ /**
457
+ * Parsed a string of classnames into an array
458
+ * @param value className string, e.g. "foo bar baz"
459
+ * @returns list of classes, e.g. ["foo", "bar", "baz"]
460
+ */
441
461
  const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
442
462
  const CAPTURE_EVENT_SUFFIX = 'Capture';
443
463
  const CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + '$');
@@ -1181,10 +1201,10 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
1181
1201
  */
1182
1202
  const proxyComponent = (Cstr, cmpMeta, flags) => {
1183
1203
  var _a;
1204
+ const prototype = Cstr.prototype;
1184
1205
  if (cmpMeta.$members$) {
1185
1206
  // It's better to have a const than two Object.entries()
1186
1207
  const members = Object.entries(cmpMeta.$members$);
1187
- const prototype = Cstr.prototype;
1188
1208
  members.map(([memberName, [memberFlags]]) => {
1189
1209
  if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
1190
1210
  ((flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
@@ -1207,6 +1227,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
1207
1227
  const attrNameToPropName = new Map();
1208
1228
  prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
1209
1229
  plt.jmp(() => {
1230
+ var _a;
1210
1231
  const propName = attrNameToPropName.get(attrName);
1211
1232
  // In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
1212
1233
  // in the case where an attribute was set inline.
@@ -1262,11 +1283,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
1262
1283
  // 1. The instance is ready
1263
1284
  // 2. The watchers are ready
1264
1285
  // 3. The value has changed
1265
- if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
1286
+ if (flags &&
1287
+ !(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
1266
1288
  flags & 128 /* HOST_FLAGS.isWatchReady */ &&
1267
1289
  newValue !== oldValue) {
1268
1290
  const instance = hostRef.$lazyInstance$ ;
1269
- const entry = cmpMeta.$watchers$[attrName];
1291
+ const entry = (_a = cmpMeta.$watchers$) === null || _a === void 0 ? void 0 : _a[attrName];
1270
1292
  entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
1271
1293
  if (instance[callbackName] != null) {
1272
1294
  instance[callbackName].call(instance, newValue, oldValue, attrName);
@@ -1288,10 +1310,11 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
1288
1310
  ...members
1289
1311
  .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
1290
1312
  .map(([propName, m]) => {
1313
+ var _a;
1291
1314
  const attrName = m[1] || propName;
1292
1315
  attrNameToPropName.set(attrName, propName);
1293
1316
  if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
1294
- cmpMeta.$attrsToReflect$.push([propName, attrName]);
1317
+ (_a = cmpMeta.$attrsToReflect$) === null || _a === void 0 ? void 0 : _a.push([propName, attrName]);
1295
1318
  }
1296
1319
  return attrName;
1297
1320
  }),
@@ -1449,12 +1472,13 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1449
1472
  const customElements = win.customElements;
1450
1473
  const head = doc.head;
1451
1474
  const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
1452
- const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
1475
+ const dataStyles = /*@__PURE__*/ doc.createElement('style');
1453
1476
  const deferredConnectedCallbacks = [];
1454
1477
  let appLoadFallback;
1455
1478
  let isBootstrapping = true;
1456
1479
  Object.assign(plt, options);
1457
1480
  plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
1481
+ let hasSlotRelocation = false;
1458
1482
  lazyBundles.map((lazyBundle) => {
1459
1483
  lazyBundle[1].map((compactMeta) => {
1460
1484
  const cmpMeta = {
@@ -1463,6 +1487,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1463
1487
  $members$: compactMeta[2],
1464
1488
  $listeners$: compactMeta[3],
1465
1489
  };
1490
+ // Check if we are using slots outside the shadow DOM in this component.
1491
+ // We'll use this information later to add styles for `slot-fb` elements
1492
+ if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
1493
+ hasSlotRelocation = true;
1494
+ }
1466
1495
  {
1467
1496
  cmpMeta.$members$ = compactMeta[2];
1468
1497
  }
@@ -1516,15 +1545,23 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1516
1545
  }
1517
1546
  });
1518
1547
  });
1548
+ // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
1549
+ if (hasSlotRelocation) {
1550
+ dataStyles.innerHTML += SLOT_FB_CSS;
1551
+ }
1552
+ // Add hydration styles
1519
1553
  {
1520
- visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
1521
- visibilityStyle.setAttribute('data-styles', '');
1554
+ dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
1555
+ }
1556
+ // If we have styles, add them to the DOM
1557
+ if (dataStyles.innerHTML.length) {
1558
+ dataStyles.setAttribute('data-styles', '');
1559
+ head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
1522
1560
  // Apply CSP nonce to the style tag if it exists
1523
1561
  const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
1524
1562
  if (nonce != null) {
1525
- visibilityStyle.setAttribute('nonce', nonce);
1563
+ dataStyles.setAttribute('nonce', nonce);
1526
1564
  }
1527
- head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
1528
1565
  }
1529
1566
  // Process deferred connectedCallbacks now all components have been registered
1530
1567
  isBootstrapping = false;
@@ -1602,19 +1639,19 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
1602
1639
  return module[exportName];
1603
1640
  }
1604
1641
 
1605
- if (!hmrVersionId || !BUILD.hotModuleReplacement) {
1606
- const processMod = importedModule => {
1607
- cmpModules.set(bundleId, importedModule);
1608
- return importedModule[exportName];
1609
- }
1610
- switch(bundleId) {
1611
-
1612
- case 'mds-paginator.cjs':
1613
- return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1614
- /* webpackMode: "lazy" */
1615
- './mds-paginator.cjs.entry.js')); }).then(processMod, consoleError);
1642
+ if (!hmrVersionId || !BUILD.hotModuleReplacement) {
1643
+ const processMod = importedModule => {
1644
+ cmpModules.set(bundleId, importedModule);
1645
+ return importedModule[exportName];
1646
+ }
1647
+ switch(bundleId) {
1648
+
1649
+ case 'mds-paginator.cjs':
1650
+ return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1651
+ /* webpackMode: "lazy" */
1652
+ './mds-paginator.cjs.entry.js')); }).then(processMod, consoleError);
1653
+ }
1616
1654
  }
1617
- }
1618
1655
  return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1619
1656
  /* @vite-ignore */
1620
1657
  /* webpackInclude: /\.entry\.js$/ */
@@ -1689,7 +1726,7 @@ const flush = () => {
1689
1726
  }
1690
1727
  }
1691
1728
  };
1692
- const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
1729
+ const nextTick = (cb) => promiseResolve().then(cb);
1693
1730
  const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
1694
1731
 
1695
1732
  exports.Host = Host;
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-b95e44b9.js');
5
+ const index = require('./index-ec2d8ba2.js');
6
6
 
7
7
  const defineCustomElements = (win, options) => {
8
8
  if (typeof window === 'undefined') return undefined;
@@ -2,56 +2,56 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-b95e44b9.js');
5
+ const index = require('./index-ec2d8ba2.js');
6
6
 
7
- const mdsPaginatorCss = "@tailwind components; .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{--mds-paginator-background:rgb(var(--tone-neutral-09));gap:0.25rem;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.pages{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none;margin-left:0.5rem;margin-right:0.5rem;border-radius:9999px;padding:0.5rem;-ms-flex-align:center;align-items:center;background-color:var(--mds-paginator-background);display:-ms-flexbox;display:flex;-ms-flex-negative:1;flex-shrink:1;gap:2px;overflow:auto;scroll-behavior:smooth}.pages::-webkit-scrollbar{display:none}";
7
+ const mdsPaginatorCss = "@tailwind components; .fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.text{font-size:1rem}.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{--mds-paginator-background:rgb(var(--tone-neutral-09));gap:0.25rem;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}.pages{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none;margin-left:0.5rem;margin-right:0.5rem;border-radius:9999px;padding:0.5rem;-ms-flex-align:center;align-items:center;background-color:var(--mds-paginator-background);display:-ms-flexbox;display:flex;-ms-flex-negative:1;flex-shrink:1;gap:2px;overflow:auto;scroll-behavior:smooth}.pages::-webkit-scrollbar{display:none}";
8
8
 
9
9
  const MdsPaginator = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- this.pageChangedEvent = index.createEvent(this, "mdsPaginatorChange", 7);
13
- this.scrollPage = () => {
14
- var _a;
15
- const elementIndex = this.currentPage - 2;
16
- const pagesElement = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pages');
17
- const pagesItems = pagesElement === null || pagesElement === void 0 ? void 0 : pagesElement.querySelectorAll('mds-paginator-item');
18
- if (!pagesElement || !pagesItems)
19
- return;
20
- if (elementIndex < 0) {
21
- pagesElement.scrollLeft = 0;
22
- return;
23
- }
24
- if (elementIndex > pagesItems.length - 1) {
25
- const pageItem = pagesItems[pagesItems.length - 1];
26
- pagesElement.scrollLeft = pageItem.offsetLeft - pagesElement.offsetLeft;
27
- return;
28
- }
29
- const pageItem = pagesItems[elementIndex];
30
- pagesElement.scrollLeft = pageItem.offsetLeft - pagesElement.offsetLeft - (pagesElement.offsetWidth / 2) + (pageItem.offsetWidth / 2);
31
- };
32
- this.goToPage = (selectedPage, caller) => {
33
- if (selectedPage < 1 || selectedPage > this.pages) {
34
- return;
35
- }
36
- this.currentPage = selectedPage;
37
- if (this.pages > 2) {
38
- this.scrollPage();
39
- }
40
- this.pageChangedEvent.emit({ page: this.currentPage, caller });
41
- };
42
- this.pages = 0;
43
- this.currentPage = 1;
44
- }
45
- componentDidLoad() {
46
- setTimeout(() => {
47
- this.goToPage(this.currentPage);
48
- }, 10);
49
- }
50
- render() {
51
- return (index.h(index.Host, null, index.h("mds-paginator-item", { icon: "mi/baseline/arrow-back", disabled: this.currentPage === 1, onClick: ev => this.goToPage(this.currentPage - 1, ev.target) }), this.pages > 0 && index.h("mds-paginator-item", { selected: this.currentPage === 1, onClick: ev => this.goToPage(1, ev.target) }, "1"), this.pages > 2 &&
52
- index.h("div", { class: "pages" }, Array.from(Array(this.pages - 2).keys()).map(i => index.h("mds-paginator-item", { key: i, selected: this.currentPage === i + 2, onClick: ev => this.goToPage(i + 2, ev.target) }, i + 2))), this.pages > 1 && index.h("mds-paginator-item", { selected: this.currentPage === this.pages, onClick: ev => this.goToPage(this.pages, ev.target) }, this.pages), index.h("mds-paginator-item", { icon: "mi/baseline/arrow-forward", disabled: this.currentPage === this.pages, onClick: ev => this.goToPage(this.currentPage + 1, ev.target) })));
53
- }
54
- get element() { return index.getElement(this); }
10
+ constructor(hostRef) {
11
+ index.registerInstance(this, hostRef);
12
+ this.pageChangedEvent = index.createEvent(this, "mdsPaginatorChange", 7);
13
+ this.scrollPage = () => {
14
+ var _a;
15
+ const elementIndex = this.currentPage - 2;
16
+ const pagesElement = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pages');
17
+ const pagesItems = pagesElement === null || pagesElement === void 0 ? void 0 : pagesElement.querySelectorAll('mds-paginator-item');
18
+ if (!pagesElement || !pagesItems)
19
+ return;
20
+ if (elementIndex < 0) {
21
+ pagesElement.scrollLeft = 0;
22
+ return;
23
+ }
24
+ if (elementIndex > pagesItems.length - 1) {
25
+ const pageItem = pagesItems[pagesItems.length - 1];
26
+ pagesElement.scrollLeft = pageItem.offsetLeft - pagesElement.offsetLeft;
27
+ return;
28
+ }
29
+ const pageItem = pagesItems[elementIndex];
30
+ pagesElement.scrollLeft = pageItem.offsetLeft - pagesElement.offsetLeft - (pagesElement.offsetWidth / 2) + (pageItem.offsetWidth / 2);
31
+ };
32
+ this.goToPage = (selectedPage, caller) => {
33
+ if (selectedPage < 1 || selectedPage > this.pages) {
34
+ return;
35
+ }
36
+ this.currentPage = selectedPage;
37
+ if (this.pages > 2) {
38
+ this.scrollPage();
39
+ }
40
+ this.pageChangedEvent.emit({ page: this.currentPage, caller });
41
+ };
42
+ this.pages = 0;
43
+ this.currentPage = 1;
44
+ }
45
+ componentDidLoad() {
46
+ setTimeout(() => {
47
+ this.goToPage(this.currentPage);
48
+ }, 10);
49
+ }
50
+ render() {
51
+ return (index.h(index.Host, null, index.h("mds-paginator-item", { icon: "mi/baseline/arrow-back", disabled: this.currentPage === 1, onClick: ev => this.goToPage(this.currentPage - 1, ev.target) }), this.pages > 0 && index.h("mds-paginator-item", { selected: this.currentPage === 1, onClick: ev => this.goToPage(1, ev.target) }, "1"), this.pages > 2 &&
52
+ index.h("div", { class: "pages" }, Array.from(Array(this.pages - 2).keys()).map(i => index.h("mds-paginator-item", { key: i, selected: this.currentPage === i + 2, onClick: ev => this.goToPage(i + 2, ev.target) }, i + 2))), this.pages > 1 && index.h("mds-paginator-item", { selected: this.currentPage === this.pages, onClick: ev => this.goToPage(this.pages, ev.target) }, this.pages), index.h("mds-paginator-item", { icon: "mi/baseline/arrow-forward", disabled: this.currentPage === this.pages, onClick: ev => this.goToPage(this.currentPage + 1, ev.target) })));
53
+ }
54
+ get element() { return index.getElement(this); }
55
55
  };
56
56
  MdsPaginator.style = mdsPaginatorCss;
57
57
 
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-b95e44b9.js');
5
+ const index = require('./index-ec2d8ba2.js');
6
6
 
7
7
  /*
8
- Stencil Client Patch Browser v4.7.1 | MIT Licensed | https://stenciljs.com
8
+ Stencil Client Patch Browser v4.8.0 | MIT Licensed | https://stenciljs.com
9
9
  */
10
10
  const patchBrowser = () => {
11
11
  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));
@@ -4,7 +4,7 @@
4
4
  ],
5
5
  "compiler": {
6
6
  "name": "@stencil/core",
7
- "version": "4.7.1",
7
+ "version": "4.8.0",
8
8
  "typescriptVersion": "5.2.2"
9
9
  },
10
10
  "collections": [],
@@ -1,29 +1,29 @@
1
1
  const hash = (s) => {
2
- let i, h;
3
- for (i = 0, h = 0; i < s.length; i++) {
4
- h = Math.imul(31, h) + s.charCodeAt(i) | 0;
5
- }
6
- return h.toString();
2
+ let i, h;
3
+ for (i = 0, h = 0; i < s.length; i++) {
4
+ h = Math.imul(31, h) + s.charCodeAt(i) | 0;
5
+ }
6
+ return h.toString();
7
7
  };
8
8
  const randomInt = (max) => Math.floor(Math.random() * max);
9
9
  const unslugName = (name) => {
10
- var _a, _b, _c;
11
- return (_c = (_b = (_a = name.split('/')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()) === null || _b === void 0 ? void 0 : _b.replace(/-/g, ' ')) !== null && _c !== void 0 ? _c : name;
10
+ var _a, _b, _c;
11
+ return (_c = (_b = (_a = name.split('/')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()) === null || _b === void 0 ? void 0 : _b.replace(/-/g, ' ')) !== null && _c !== void 0 ? _c : name;
12
12
  };
13
13
  const setAttributeIfEmpty = (element, attribute, value) => {
14
- var _a;
15
- if (element.hasAttribute(attribute)) {
16
- return (_a = element.getAttribute(attribute)) !== null && _a !== void 0 ? _a : '';
17
- }
18
- element.setAttribute(attribute, value);
19
- return value;
14
+ var _a;
15
+ if (element.hasAttribute(attribute)) {
16
+ return (_a = element.getAttribute(attribute)) !== null && _a !== void 0 ? _a : '';
17
+ }
18
+ element.setAttribute(attribute, value);
19
+ return value;
20
20
  };
21
21
  const hashValue = (value) => `${value}-${hash(value)}`;
22
22
  const hashRandomValue = (value) => {
23
- const randomValue = randomInt(1000000);
24
- if (value) {
25
- return `${value}-${hash(randomValue.toString())}`;
26
- }
27
- return hash(randomValue.toString());
23
+ const randomValue = randomInt(1000000);
24
+ if (value) {
25
+ return `${value}-${hash(randomValue.toString())}`;
26
+ }
27
+ return hash(randomValue.toString());
28
28
  };
29
29
  export { unslugName, setAttributeIfEmpty, hashRandomValue, hashValue, };
@@ -1,40 +1,40 @@
1
1
  export class KeyboardManager {
2
- constructor() {
3
- this.elements = [];
4
- this.handleClickBehaviorDispatchEvent = (event) => {
5
- if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
6
- event.target.click();
7
- }
8
- };
9
- this.handleEscapeBehaviorDispatchEvent = (event) => {
10
- if (event.code === 'Escape' && this.escapeCallback) {
11
- this.escapeCallback();
12
- }
13
- };
14
- this.addElement = (el, name = 'element') => {
15
- this.elements[name] = el;
16
- };
17
- this.attachClickBehavior = (name = 'element') => {
18
- if (this.elements[name]) {
19
- this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
20
- }
21
- };
22
- this.detachClickBehavior = (name = 'element') => {
23
- if (this.elements[name]) {
24
- this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
25
- }
26
- };
27
- this.attachEscapeBehavior = (callBack) => {
28
- this.escapeCallback = callBack;
29
- if (window !== undefined) {
30
- window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
31
- }
32
- };
33
- this.detachEscapeBehavior = () => {
34
- this.escapeCallback = () => { return; };
35
- if (window !== undefined) {
36
- window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
37
- }
38
- };
39
- }
2
+ constructor() {
3
+ this.elements = [];
4
+ this.handleClickBehaviorDispatchEvent = (event) => {
5
+ if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
6
+ event.target.click();
7
+ }
8
+ };
9
+ this.handleEscapeBehaviorDispatchEvent = (event) => {
10
+ if (event.code === 'Escape' && this.escapeCallback) {
11
+ this.escapeCallback();
12
+ }
13
+ };
14
+ this.addElement = (el, name = 'element') => {
15
+ this.elements[name] = el;
16
+ };
17
+ this.attachClickBehavior = (name = 'element') => {
18
+ if (this.elements[name]) {
19
+ this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
20
+ }
21
+ };
22
+ this.detachClickBehavior = (name = 'element') => {
23
+ if (this.elements[name]) {
24
+ this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
25
+ }
26
+ };
27
+ this.attachEscapeBehavior = (callBack) => {
28
+ this.escapeCallback = callBack;
29
+ if (window !== undefined) {
30
+ window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
31
+ }
32
+ };
33
+ this.detachEscapeBehavior = () => {
34
+ this.escapeCallback = () => { return; };
35
+ if (window !== undefined) {
36
+ window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
37
+ }
38
+ };
39
+ }
40
40
  }
@@ -1,10 +1,10 @@
1
1
  const cssDurationToMilliseconds = (duration, defaultValue = 1000) => {
2
- if (duration.includes('s')) {
3
- return Number(duration.replace('s', '')) * 1000;
4
- }
5
- if (duration.includes('ms')) {
6
- return Number(duration.replace('s', ''));
7
- }
8
- return defaultValue;
2
+ if (duration.includes('s')) {
3
+ return Number(duration.replace('s', '')) * 1000;
4
+ }
5
+ if (duration.includes('ms')) {
6
+ return Number(duration.replace('s', ''));
7
+ }
8
+ return defaultValue;
9
9
  };
10
10
  export { cssDurationToMilliseconds, };
@@ -11,6 +11,10 @@
11
11
 
12
12
  border-width: 1px;
13
13
  }
14
+ .text{
15
+
16
+ font-size: 1rem;
17
+ }
14
18
  .shadow{
15
19
 
16
20
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);