@maggioli-design-system/mds-paginator 4.0.2 → 4.1.0

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 (43) hide show
  1. package/dist/cjs/mds-paginator.cjs.entry.js +1 -1
  2. package/dist/collection/common/floating-controller.js +3 -3
  3. package/dist/collection/common/slot.js +10 -1
  4. package/dist/collection/common/string.js +30 -0
  5. package/dist/collection/components/mds-paginator/mds-paginator.css +132 -4
  6. package/dist/collection/dictionary/keyboard.js +84 -0
  7. package/dist/collection/type/keyboard.js +1 -0
  8. package/dist/components/mds-paginator.js +1 -1
  9. package/dist/documentation.json +6 -1
  10. package/dist/esm/mds-paginator.entry.js +1 -1
  11. package/dist/esm-es5/mds-paginator.entry.js +1 -1
  12. package/dist/mds-paginator/mds-paginator.esm.js +1 -1
  13. package/dist/mds-paginator/p-5097fc88.entry.js +1 -0
  14. package/dist/mds-paginator/p-5cc4c623.system.entry.js +1 -0
  15. package/dist/mds-paginator/p-e9734aa5.system.js +1 -1
  16. package/dist/stats.json +28 -16
  17. package/dist/types/common/slot.d.ts +2 -1
  18. package/dist/types/common/string.d.ts +4 -0
  19. package/dist/types/dictionary/keyboard.d.ts +2 -0
  20. package/dist/types/type/keyboard.d.ts +12 -0
  21. package/documentation.json +26 -1
  22. package/package.json +3 -3
  23. package/readme.md +4 -3
  24. package/src/common/floating-controller.ts +6 -6
  25. package/src/common/slot.ts +11 -0
  26. package/src/common/string.ts +42 -0
  27. package/src/components/mds-paginator/css/mds-paginator-pref-animation.css +10 -2
  28. package/src/components/mds-paginator/mds-paginator.css +4 -1
  29. package/src/components/mds-paginator/readme.md +4 -3
  30. package/src/dictionary/keyboard.ts +87 -0
  31. package/src/fixtures/icons.json +18 -1
  32. package/src/meta/keyboard/keys.json +83 -0
  33. package/src/tailwind/components.css +11 -0
  34. package/src/tailwind/fouc.css +118 -0
  35. package/src/type/keyboard.ts +93 -0
  36. package/www/build/mds-paginator.esm.js +1 -1
  37. package/www/build/p-5097fc88.entry.js +1 -0
  38. package/www/build/p-5cc4c623.system.entry.js +1 -0
  39. package/www/build/p-e9734aa5.system.js +1 -1
  40. package/dist/mds-paginator/p-1a397fd4.system.entry.js +0 -1
  41. package/dist/mds-paginator/p-dc0daac5.entry.js +0 -1
  42. package/www/build/p-1a397fd4.system.entry.js +0 -1
  43. package/www/build/p-dc0daac5.entry.js +0 -1
package/dist/cjs/mds-paginator.cjs.entry.js CHANGED
@@ -8,7 +8,7 @@ const miBaselineArrowBack = `<svg xmlns="http://www.w3.org/2000/svg" width="24"
8
8
 
9
9
  const miBaselineArrowForward = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>`;
10
10
 
11
- const mdsPaginatorCss = "@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-paginator-background: Sets the background-color of the pages area and the item\n */\n\n:host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n\n gap: 0.25rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n}\n\n.pages {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n border-radius: 9999px;\n padding: 0.5rem;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: var(--mds-paginator-background);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-negative: 1;\n flex-shrink: 1;\n gap: 2px;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, box-shadow;\n transition-property: background-color, box-shadow, -webkit-box-shadow;\n }\n\n.pages::-webkit-scrollbar {\n display: none;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .pages {\n scroll-behavior: unset;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .pages {\n scroll-behavior: unset;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n\n }\n \n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n }\n\n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n@container style(--magma-pref-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n";
11
+ const mdsPaginatorCss = "@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-paginator-background: Sets the background-color of the pages area and the item\n * @prop --mds-paginator-scroll-behavior: Sets the scroll-behavior animation\n */\n\n:host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n --mds-paginator-scroll-behavior: smooth;\n gap: 0.25rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n}\n\n.pages {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n border-radius: 9999px;\n padding: 0.5rem;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: var(--mds-paginator-background);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-negative: 1;\n flex-shrink: 1;\n gap: 2px;\n overflow: auto;\n scroll-behavior: var(--mds-paginator-scroll-behavior);\n -webkit-transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, box-shadow;\n transition-property: background-color, box-shadow, -webkit-box-shadow;\n }\n\n.pages::-webkit-scrollbar {\n display: none;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-paginator-scroll-behavior: auto;\n }\n\n :host,\n .pages {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-paginator-scroll-behavior: auto;\n }\n\n :host,\n .pages {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n\n }\n \n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n }\n\n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n@container style(--magma-pref-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n";
12
12
  const MdsPaginatorStyle0 = mdsPaginatorCss;
13
13
 
14
14
  const MdsPaginator = class {
package/dist/collection/common/floating-controller.js CHANGED
@@ -143,12 +143,12 @@ export class FloatingController {
143
143
  }
144
144
  export class Backdrop {
145
145
  constructor(backdropId) {
146
- this.defaultBackdropId = 'mds-backdrop';
146
+ this.defaultBackdropId = 'magma-backdrop';
147
147
  this.backdropBackgroundVisible = 'rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))';
148
148
  this.backdropBackgroundHidden = 'rgba(var(--magma-backdrop-color, 0 0 0) / 0)';
149
149
  this.backdropId = backdropId !== null && backdropId !== void 0 ? backdropId : this.defaultBackdropId;
150
- this.cssBackdropZIndex = `var(--${this.backdropId}-z-index)`;
151
- this.cssBackdropDuration = `var(--${this.backdropId}-duration)`;
150
+ this.cssBackdropZIndex = `var(--${this.backdropId}-z-index, 4000)`;
151
+ this.cssBackdropDuration = `var(--${this.backdropId}-animation-duration, 300ms)`;
152
152
  }
153
153
  attachBackdrop() {
154
154
  if (!this.backdropEl) {
package/dist/collection/common/slot.js CHANGED
@@ -16,4 +16,13 @@ const hasSlottedNodes = (el, name) => {
16
16
  }
17
17
  return false;
18
18
  };
19
- export { hasSlottedElements, hasSlottedNodes, };
19
+ const hasSlotted = (el, name) => {
20
+ var _a;
21
+ const query = name ? `slot[name="${name}"]` : 'slot:not([name])';
22
+ const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(query);
23
+ if (slot) {
24
+ return slot.assignedNodes().length > 0 || slot.assignedElements().length > 0;
25
+ }
26
+ return false;
27
+ };
28
+ export { hasSlottedElements, hasSlottedNodes, hasSlotted, };
package/dist/collection/common/string.js ADDED
@@ -0,0 +1,30 @@
1
+ const levenshteinDistance = (a, b) => {
2
+ const dp = Array.from({ length: a.length + 1 }, (_, i) =>
3
+ // eslint-disable-next-line no-nested-ternary
4
+ Array.from({ length: b.length + 1 }, (_, j) => (i === 0 ? j : j === 0 ? i : 0)));
5
+ for (let i = 1; i <= a.length; i++) {
6
+ for (let j = 1; j <= b.length; j++) {
7
+ if (a[i - 1] === b[j - 1]) {
8
+ dp[i][j] = dp[i - 1][j - 1];
9
+ }
10
+ else {
11
+ dp[i][j] = 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
12
+ }
13
+ }
14
+ }
15
+ return dp[a.length][b.length];
16
+ };
17
+ const closest = (input, validCodes) => {
18
+ let [closest] = validCodes;
19
+ let minDistance = levenshteinDistance(input, closest);
20
+ for (const code of validCodes) {
21
+ const distance = levenshteinDistance(input, code);
22
+ if (distance < minDistance) {
23
+ minDistance = distance;
24
+ closest = code;
25
+ }
26
+ }
27
+ return closest;
28
+ };
29
+ const firstLetterUppercase = (str) => str.charAt(0).toUpperCase() + str.slice(1);
30
+ export { closest, firstLetterUppercase, levenshteinDistance, };
package/dist/collection/components/mds-paginator/mds-paginator.css CHANGED
@@ -3,12 +3,13 @@
3
3
 
4
4
  /**
5
5
  * @prop --mds-paginator-background: Sets the background-color of the pages area and the item
6
+ * @prop --mds-paginator-scroll-behavior: Sets the scroll-behavior animation
6
7
  */
7
8
 
8
9
  :host {
9
10
 
10
11
  --mds-paginator-background: rgb(var(--tone-neutral-09));
11
-
12
+ --mds-paginator-scroll-behavior: smooth;
12
13
  gap: 0.25rem;
13
14
 
14
15
  align-items: center;
@@ -32,7 +33,7 @@
32
33
  flex-shrink: 1;
33
34
  gap: 2px;
34
35
  overflow: auto;
35
- scroll-behavior: smooth;
36
+ scroll-behavior: var(--mds-paginator-scroll-behavior);
36
37
  transition-property: background-color, box-shadow;
37
38
  }
38
39
 
@@ -43,9 +44,13 @@
43
44
  @tailwind utilities;
44
45
 
45
46
  @container style(--magma-pref-animation: reduce) {
47
+ :host {
48
+
49
+ --mds-paginator-scroll-behavior: auto;
50
+ }
51
+
46
52
  :host,
47
53
  .pages {
48
- scroll-behavior: unset;
49
54
  transition-duration: 0s;
50
55
  }
51
56
  }
@@ -53,9 +58,13 @@
53
58
  @container style(--magma-pref-animation: system) {
54
59
 
55
60
  @media (prefers-reduced-motion) {
61
+ :host {
62
+
63
+ --mds-paginator-scroll-behavior: auto;
64
+ }
65
+
56
66
  :host,
57
67
  .pages {
58
- scroll-behavior: unset;
59
68
  transition-duration: 0s;
60
69
  }
61
70
  }
@@ -138,3 +147,122 @@
138
147
  }
139
148
  }
140
149
 
150
+ :host(:not(:is([hydrated], .hydrated))) {
151
+ animation-duration: 0s;
152
+ border-color: transparent;
153
+ box-shadow: 0 0 0 transparent;
154
+ opacity: 0;
155
+ outline-color: transparent;
156
+ transition-delay: 0s;
157
+ transition-duration: 0s;
158
+ visibility: hidden;
159
+ }
160
+
161
+ /* TODO refact(stencil): Uses only used selector from parent shadowDOM component */
162
+
163
+ mds-accordion:not(:is([hydrated], .hydrated)),
164
+ mds-accordion-item:not(:is([hydrated], .hydrated)),
165
+ mds-accordion-timer:not(:is([hydrated], .hydrated)),
166
+ mds-accordion-timer-item:not(:is([hydrated], .hydrated)),
167
+ mds-author:not(:is([hydrated], .hydrated)),
168
+ mds-avatar:not(:is([hydrated], .hydrated)),
169
+ mds-badge:not(:is([hydrated], .hydrated)),
170
+ mds-banner:not(:is([hydrated], .hydrated)),
171
+ mds-benchmark-bar:not(:is([hydrated], .hydrated)),
172
+ mds-bibliography:not(:is([hydrated], .hydrated)),
173
+ mds-breadcrumb:not(:is([hydrated], .hydrated)),
174
+ mds-breadcrumb-item:not(:is([hydrated], .hydrated)),
175
+ mds-button:not(:is([hydrated], .hydrated)),
176
+ mds-card:not(:is([hydrated], .hydrated)),
177
+ mds-card-content:not(:is([hydrated], .hydrated)),
178
+ mds-card-footer:not(:is([hydrated], .hydrated)),
179
+ mds-card-header:not(:is([hydrated], .hydrated)),
180
+ mds-card-media:not(:is([hydrated], .hydrated)),
181
+ mds-chip:not(:is([hydrated], .hydrated)),
182
+ mds-details:not(:is([hydrated], .hydrated)),
183
+ mds-dropdown:not(:is([hydrated], .hydrated)),
184
+ mds-entity:not(:is([hydrated], .hydrated)),
185
+ mds-file:not(:is([hydrated], .hydrated)),
186
+ mds-file-preview:not(:is([hydrated], .hydrated)),
187
+ mds-filter:not(:is([hydrated], .hydrated)),
188
+ mds-filter-item:not(:is([hydrated], .hydrated)),
189
+ mds-header:not(:is([hydrated], .hydrated)),
190
+ mds-header-bar:not(:is([hydrated], .hydrated)),
191
+ mds-help:not(:is([hydrated], .hydrated)),
192
+ mds-horizontal-scroll:not(:is([hydrated], .hydrated)),
193
+ mds-hr:not(:is([hydrated], .hydrated)),
194
+ mds-icon:not(:is([hydrated], .hydrated)),
195
+ mds-img:not(:is([hydrated], .hydrated)),
196
+ mds-input:not(:is([hydrated], .hydrated)),
197
+ mds-input-field:not(:is([hydrated], .hydrated)),
198
+ mds-input-range:not(:is([hydrated], .hydrated)),
199
+ mds-input-select:not(:is([hydrated], .hydrated)),
200
+ mds-input-switch:not(:is([hydrated], .hydrated)),
201
+ mds-input-tip:not(:is([hydrated], .hydrated)),
202
+ mds-input-tip-item:not(:is([hydrated], .hydrated)),
203
+ mds-input-upload:not(:is([hydrated], .hydrated)),
204
+ mds-keyboard:not(:is([hydrated], .hydrated)),
205
+ mds-keyboard-key:not(:is([hydrated], .hydrated)),
206
+ mds-kpi:not(:is([hydrated], .hydrated)),
207
+ mds-kpi-item:not(:is([hydrated], .hydrated)),
208
+ mds-label:not(:is([hydrated], .hydrated)),
209
+ mds-list:not(:is([hydrated], .hydrated)),
210
+ mds-list-item:not(:is([hydrated], .hydrated)),
211
+ mds-modal:not(:is([hydrated], .hydrated)),
212
+ mds-note:not(:is([hydrated], .hydrated)),
213
+ mds-notification:not(:is([hydrated], .hydrated)),
214
+ mds-paginator:not(:is([hydrated], .hydrated)),
215
+ mds-paginator-item:not(:is([hydrated], .hydrated)),
216
+ mds-pref:not(:is([hydrated], .hydrated)),
217
+ mds-pref-animation:not(:is([hydrated], .hydrated)),
218
+ mds-pref-consumption:not(:is([hydrated], .hydrated)),
219
+ mds-pref-contrast:not(:is([hydrated], .hydrated)),
220
+ mds-pref-language:not(:is([hydrated], .hydrated)),
221
+ mds-pref-language-item:not(:is([hydrated], .hydrated)),
222
+ mds-pref-theme:not(:is([hydrated], .hydrated)),
223
+ mds-price-table:not(:is([hydrated], .hydrated)),
224
+ mds-price-table-features:not(:is([hydrated], .hydrated)),
225
+ mds-price-table-features-cell:not(:is([hydrated], .hydrated)),
226
+ mds-price-table-features-row:not(:is([hydrated], .hydrated)),
227
+ mds-price-table-header:not(:is([hydrated], .hydrated)),
228
+ mds-price-table-list:not(:is([hydrated], .hydrated)),
229
+ mds-price-table-list-item:not(:is([hydrated], .hydrated)),
230
+ mds-progress:not(:is([hydrated], .hydrated)),
231
+ mds-push-notification:not(:is([hydrated], .hydrated)),
232
+ mds-push-notifications:not(:is([hydrated], .hydrated)),
233
+ mds-quote:not(:is([hydrated], .hydrated)),
234
+ mds-separator:not(:is([hydrated], .hydrated)),
235
+ mds-spinner:not(:is([hydrated], .hydrated)),
236
+ mds-stepper-bar:not(:is([hydrated], .hydrated)),
237
+ mds-stepper-bar-item:not(:is([hydrated], .hydrated)),
238
+ mds-tab:not(:is([hydrated], .hydrated)),
239
+ mds-tab-bar:not(:is([hydrated], .hydrated)),
240
+ mds-tab-bar-item:not(:is([hydrated], .hydrated)),
241
+ mds-tab-item:not(:is([hydrated], .hydrated)),
242
+ mds-table:not(:is([hydrated], .hydrated)),
243
+ mds-table-body:not(:is([hydrated], .hydrated)),
244
+ mds-table-cell:not(:is([hydrated], .hydrated)),
245
+ mds-table-footer:not(:is([hydrated], .hydrated)),
246
+ mds-table-header:not(:is([hydrated], .hydrated)),
247
+ mds-table-header-cell:not(:is([hydrated], .hydrated)),
248
+ mds-table-row:not(:is([hydrated], .hydrated)),
249
+ mds-text:not(:is([hydrated], .hydrated)),
250
+ mds-toast:not(:is([hydrated], .hydrated)),
251
+ mds-tooltip:not(:is([hydrated], .hydrated)),
252
+ mds-tree:not(:is([hydrated], .hydrated)),
253
+ mds-tree-item:not(:is([hydrated], .hydrated)),
254
+ mds-url-view:not(:is([hydrated], .hydrated)),
255
+ mds-usage:not(:is([hydrated], .hydrated)),
256
+ mds-video-wall:not(:is([hydrated], .hydrated)),
257
+ mds-zero:not(:is([hydrated], .hydrated))
258
+ {
259
+ animation-duration: 0s;
260
+ border-color: transparent;
261
+ box-shadow: 0 0 0 transparent;
262
+ opacity: 0;
263
+ outline-color: transparent;
264
+ transition-delay: 0s;
265
+ transition-duration: 0s;
266
+ visibility: hidden;
267
+ }
268
+
package/dist/collection/dictionary/keyboard.js ADDED
@@ -0,0 +1,84 @@
1
+ const keyboardKeyNameDictionary = [
2
+ '0',
3
+ '1',
4
+ '2',
5
+ '3',
6
+ '4',
7
+ '5',
8
+ '6',
9
+ '7',
10
+ '8',
11
+ '9',
12
+ 'a',
13
+ 'alt',
14
+ 'altleft',
15
+ 'altright',
16
+ 'arrowdown',
17
+ 'arrowleft',
18
+ 'arrowright',
19
+ 'arrowup',
20
+ 'b',
21
+ 'backspace',
22
+ 'c',
23
+ 'capslock',
24
+ 'command',
25
+ 'commandleft',
26
+ 'commandright',
27
+ 'control',
28
+ 'controlleft',
29
+ 'controlright',
30
+ 'd',
31
+ 'delete',
32
+ 'e',
33
+ 'end',
34
+ 'enter',
35
+ 'escape',
36
+ 'f',
37
+ 'f1',
38
+ 'f10',
39
+ 'f11',
40
+ 'f12',
41
+ 'f2',
42
+ 'f3',
43
+ 'f4',
44
+ 'f5',
45
+ 'f6',
46
+ 'f7',
47
+ 'f8',
48
+ 'f9',
49
+ 'g',
50
+ 'h',
51
+ 'home',
52
+ 'i',
53
+ 'j',
54
+ 'k',
55
+ 'l',
56
+ 'm',
57
+ 'n',
58
+ 'o',
59
+ 'option',
60
+ 'optionleft',
61
+ 'optionright',
62
+ 'p',
63
+ 'pagedown',
64
+ 'pageup',
65
+ 'q',
66
+ 'r',
67
+ 's',
68
+ 'shift',
69
+ 'shiftleft',
70
+ 'shiftright',
71
+ 'space',
72
+ 't',
73
+ 'tab',
74
+ 'u',
75
+ 'v',
76
+ 'w',
77
+ 'windows',
78
+ 'windowsleft',
79
+ 'windowsright',
80
+ 'x',
81
+ 'y',
82
+ 'z',
83
+ ];
84
+ export { keyboardKeyNameDictionary, };
package/dist/collection/type/keyboard.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/components/mds-paginator.js CHANGED
@@ -4,7 +4,7 @@ const miBaselineArrowBack = `<svg xmlns="http://www.w3.org/2000/svg" width="24"
4
4
 
5
5
  const miBaselineArrowForward = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>`;
6
6
 
7
- const mdsPaginatorCss = "@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-paginator-background: Sets the background-color of the pages area and the item\n */\n\n:host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n\n gap: 0.25rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n}\n\n.pages {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n border-radius: 9999px;\n padding: 0.5rem;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: var(--mds-paginator-background);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-negative: 1;\n flex-shrink: 1;\n gap: 2px;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, box-shadow;\n transition-property: background-color, box-shadow, -webkit-box-shadow;\n }\n\n.pages::-webkit-scrollbar {\n display: none;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .pages {\n scroll-behavior: unset;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .pages {\n scroll-behavior: unset;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n\n }\n \n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n }\n\n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n@container style(--magma-pref-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n";
7
+ const mdsPaginatorCss = "@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-paginator-background: Sets the background-color of the pages area and the item\n * @prop --mds-paginator-scroll-behavior: Sets the scroll-behavior animation\n */\n\n:host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n --mds-paginator-scroll-behavior: smooth;\n gap: 0.25rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n}\n\n.pages {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n border-radius: 9999px;\n padding: 0.5rem;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: var(--mds-paginator-background);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-negative: 1;\n flex-shrink: 1;\n gap: 2px;\n overflow: auto;\n scroll-behavior: var(--mds-paginator-scroll-behavior);\n -webkit-transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, box-shadow;\n transition-property: background-color, box-shadow, -webkit-box-shadow;\n }\n\n.pages::-webkit-scrollbar {\n display: none;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-paginator-scroll-behavior: auto;\n }\n\n :host,\n .pages {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-paginator-scroll-behavior: auto;\n }\n\n :host,\n .pages {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n\n }\n \n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n }\n\n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n@container style(--magma-pref-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n";
8
8
  const MdsPaginatorStyle0 = mdsPaginatorCss;
9
9
 
10
10
  const MdsPaginator$1 = /*@__PURE__*/ proxyCustomElement(class MdsPaginator extends HTMLElement {
package/dist/documentation.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2025-02-06T09:03:58",
2
+ "timestamp": "2025-02-25T14:26:34",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.25.1",
@@ -92,6 +92,11 @@
92
92
  "name": "--mds-paginator-background",
93
93
  "annotation": "prop",
94
94
  "docs": "Sets the background-color of the pages area and the item"
95
+ },
96
+ {
97
+ "name": "--mds-paginator-scroll-behavior",
98
+ "annotation": "prop",
99
+ "docs": "Sets the scroll-behavior animation"
95
100
  }
96
101
  ],
97
102
  "slots": [],
package/dist/esm/mds-paginator.entry.js CHANGED
@@ -4,7 +4,7 @@ const miBaselineArrowBack = `<svg xmlns="http://www.w3.org/2000/svg" width="24"
4
4
 
5
5
  const miBaselineArrowForward = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>`;
6
6
 
7
- const mdsPaginatorCss = "@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-paginator-background: Sets the background-color of the pages area and the item\n */\n\n:host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n\n gap: 0.25rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n}\n\n.pages {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n border-radius: 9999px;\n padding: 0.5rem;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: var(--mds-paginator-background);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-negative: 1;\n flex-shrink: 1;\n gap: 2px;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, box-shadow;\n transition-property: background-color, box-shadow, -webkit-box-shadow;\n }\n\n.pages::-webkit-scrollbar {\n display: none;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .pages {\n scroll-behavior: unset;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .pages {\n scroll-behavior: unset;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n\n }\n \n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n }\n\n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n@container style(--magma-pref-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n";
7
+ const mdsPaginatorCss = "@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-paginator-background: Sets the background-color of the pages area and the item\n * @prop --mds-paginator-scroll-behavior: Sets the scroll-behavior animation\n */\n\n:host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n --mds-paginator-scroll-behavior: smooth;\n gap: 0.25rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n}\n\n.pages {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n border-radius: 9999px;\n padding: 0.5rem;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: var(--mds-paginator-background);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-negative: 1;\n flex-shrink: 1;\n gap: 2px;\n overflow: auto;\n scroll-behavior: var(--mds-paginator-scroll-behavior);\n -webkit-transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, box-shadow;\n transition-property: background-color, box-shadow, -webkit-box-shadow;\n }\n\n.pages::-webkit-scrollbar {\n display: none;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-paginator-scroll-behavior: auto;\n }\n\n :host,\n .pages {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-paginator-scroll-behavior: auto;\n }\n\n :host,\n .pages {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n\n }\n \n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n }\n\n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n@container style(--magma-pref-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n";
8
8
  const MdsPaginatorStyle0 = mdsPaginatorCss;
9
9
 
10
10
  const MdsPaginator = class {
package/dist/esm-es5/mds-paginator.entry.js CHANGED
@@ -1 +1 @@
1
- import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-f3d0e7ab.js";var miBaselineArrowBack='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8l8 8l1.41-1.41L7.83 13H20v-2z"/></svg>';var miBaselineArrowForward='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>';var mdsPaginatorCss="@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-paginator-background: Sets the background-color of the pages area and the item\n */\n\n:host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n\n gap: 0.25rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n}\n\n.pages {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n border-radius: 9999px;\n padding: 0.5rem;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: var(--mds-paginator-background);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-negative: 1;\n flex-shrink: 1;\n gap: 2px;\n overflow: auto;\n scroll-behavior: smooth;\n -webkit-transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, box-shadow;\n transition-property: background-color, box-shadow, -webkit-box-shadow;\n }\n\n.pages::-webkit-scrollbar {\n display: none;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host,\n .pages {\n scroll-behavior: unset;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host,\n .pages {\n scroll-behavior: unset;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n\n }\n \n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n }\n\n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n@container style(--magma-pref-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n";var MdsPaginatorStyle0=mdsPaginatorCss;var MdsPaginator=function(){function n(n){var t=this;registerInstance(this,n);this.pageChangedEvent=createEvent(this,"mdsPaginatorChange",7);this.pages=0;this.currentPage=1;this.scrollPage=function(n){var e;var a=n;var r=(e=t.element.shadowRoot)===null||e===void 0?void 0:e.querySelector(".pages");var i=r===null||r===void 0?void 0:r.querySelectorAll("mds-paginator-item");if(!r||!i)return;if(a<0){r.scrollLeft=0;return}if(a>i.length-1){var o=i[i.length-1];r.scrollLeft=o.offsetLeft-r.offsetLeft;return}var s=i[a];r.scrollLeft=s.offsetLeft-r.offsetLeft-r.offsetWidth/2+s.offsetWidth/2};this.focus=function(n){var e;var a=(e=t.element.shadowRoot)===null||e===void 0?void 0:e.querySelector(".pages");var r=a===null||a===void 0?void 0:a.querySelectorAll("mds-paginator-item");if(r&&n.target){var i=Array.from(r);var o=i.indexOf(n.target);t.scrollPage(o)}};this.goToPage=function(n,e){if(n<1||n>t.pages){return}t.currentPage=n;if(t.pages>2){t.scrollPage(t.currentPage-2)}t.pageChangedEvent.emit({page:t.currentPage,caller:e})}}n.prototype.componentDidLoad=function(){var n=this;setTimeout((function(){n.goToPage(n.currentPage)}),10)};n.prototype.render=function(){var n=this;return h(Host,{key:"75d9f42aad179850676dd09a6a431f0826e567f5"},h("mds-paginator-item",{key:"07983227fc834b1a22cc0286202f548dcc51432c",class:"item-icon",icon:miBaselineArrowBack,disabled:this.currentPage===1,onClick:function(t){return n.goToPage(n.currentPage-1,t.target)}}),this.pages>0&&h("mds-paginator-item",{key:"0c4ee75a41b1cb09c003454cd47667b97e8adaeb",class:"item-first",selected:this.currentPage===1,onClick:function(t){return n.goToPage(1,t.target)}},"1"),this.pages>2&&h("div",{key:"739fd7852575fab05571f2397a8763bbb7474d7b",class:"pages"},Array.from(Array(this.pages-2).keys()).map((function(t){return h("mds-paginator-item",{key:t,class:"item",selected:n.currentPage===t+2,onClick:function(e){return n.goToPage(t+2,e.target)},onFocus:n.focus},t+2)}))),this.pages>1&&h("mds-paginator-item",{key:"2eb83e4e32bbc3c04fc1ac936cd1416478521005",class:"item-last",selected:this.currentPage===this.pages,onClick:function(t){return n.goToPage(n.pages,t.target)}},this.pages),h("mds-paginator-item",{key:"44923ede2579a66ffa369805419e502fe2c9a06a",class:"item-icon",icon:miBaselineArrowForward,disabled:this.currentPage===this.pages,onClick:function(t){return n.goToPage(n.currentPage+1,t.target)}}))};Object.defineProperty(n.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return n}();MdsPaginator.style=MdsPaginatorStyle0;export{MdsPaginator as mds_paginator};
1
+ import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-f3d0e7ab.js";var miBaselineArrowBack='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8l8 8l1.41-1.41L7.83 13H20v-2z"/></svg>';var miBaselineArrowForward='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>';var mdsPaginatorCss="@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-paginator-background: Sets the background-color of the pages area and the item\n * @prop --mds-paginator-scroll-behavior: Sets the scroll-behavior animation\n */\n\n:host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n --mds-paginator-scroll-behavior: smooth;\n gap: 0.25rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n}\n\n.pages {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n border-radius: 9999px;\n padding: 0.5rem;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: var(--mds-paginator-background);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-negative: 1;\n flex-shrink: 1;\n gap: 2px;\n overflow: auto;\n scroll-behavior: var(--mds-paginator-scroll-behavior);\n -webkit-transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, box-shadow;\n transition-property: background-color, box-shadow, -webkit-box-shadow;\n }\n\n.pages::-webkit-scrollbar {\n display: none;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-paginator-scroll-behavior: auto;\n }\n\n :host,\n .pages {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-paginator-scroll-behavior: auto;\n }\n\n :host,\n .pages {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n\n }\n \n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n }\n\n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n@container style(--magma-pref-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n";var MdsPaginatorStyle0=mdsPaginatorCss;var MdsPaginator=function(){function t(t){var n=this;registerInstance(this,t);this.pageChangedEvent=createEvent(this,"mdsPaginatorChange",7);this.pages=0;this.currentPage=1;this.scrollPage=function(t){var d;var e=t;var a=(d=n.element.shadowRoot)===null||d===void 0?void 0:d.querySelector(".pages");var r=a===null||a===void 0?void 0:a.querySelectorAll("mds-paginator-item");if(!a||!r)return;if(e<0){a.scrollLeft=0;return}if(e>r.length-1){var i=r[r.length-1];a.scrollLeft=i.offsetLeft-a.offsetLeft;return}var s=r[e];a.scrollLeft=s.offsetLeft-a.offsetLeft-a.offsetWidth/2+s.offsetWidth/2};this.focus=function(t){var d;var e=(d=n.element.shadowRoot)===null||d===void 0?void 0:d.querySelector(".pages");var a=e===null||e===void 0?void 0:e.querySelectorAll("mds-paginator-item");if(a&&t.target){var r=Array.from(a);var i=r.indexOf(t.target);n.scrollPage(i)}};this.goToPage=function(t,d){if(t<1||t>n.pages){return}n.currentPage=t;if(n.pages>2){n.scrollPage(n.currentPage-2)}n.pageChangedEvent.emit({page:n.currentPage,caller:d})}}t.prototype.componentDidLoad=function(){var t=this;setTimeout((function(){t.goToPage(t.currentPage)}),10)};t.prototype.render=function(){var t=this;return h(Host,{key:"75d9f42aad179850676dd09a6a431f0826e567f5"},h("mds-paginator-item",{key:"07983227fc834b1a22cc0286202f548dcc51432c",class:"item-icon",icon:miBaselineArrowBack,disabled:this.currentPage===1,onClick:function(n){return t.goToPage(t.currentPage-1,n.target)}}),this.pages>0&&h("mds-paginator-item",{key:"0c4ee75a41b1cb09c003454cd47667b97e8adaeb",class:"item-first",selected:this.currentPage===1,onClick:function(n){return t.goToPage(1,n.target)}},"1"),this.pages>2&&h("div",{key:"739fd7852575fab05571f2397a8763bbb7474d7b",class:"pages"},Array.from(Array(this.pages-2).keys()).map((function(n){return h("mds-paginator-item",{key:n,class:"item",selected:t.currentPage===n+2,onClick:function(d){return t.goToPage(n+2,d.target)},onFocus:t.focus},n+2)}))),this.pages>1&&h("mds-paginator-item",{key:"2eb83e4e32bbc3c04fc1ac936cd1416478521005",class:"item-last",selected:this.currentPage===this.pages,onClick:function(n){return t.goToPage(t.pages,n.target)}},this.pages),h("mds-paginator-item",{key:"44923ede2579a66ffa369805419e502fe2c9a06a",class:"item-icon",icon:miBaselineArrowForward,disabled:this.currentPage===this.pages,onClick:function(n){return t.goToPage(t.currentPage+1,n.target)}}))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();MdsPaginator.style=MdsPaginatorStyle0;export{MdsPaginator as mds_paginator};
package/dist/mds-paginator/mds-paginator.esm.js CHANGED
@@ -1 +1 @@
1
- import{p as a,b as e}from"./p-d5ae5457.js";export{s as setNonce}from"./p-d5ae5457.js";import{g as r}from"./p-e1255160.js";(()=>{const e=import.meta.url,r={};return""!==e&&(r.resourcesUrl=new URL(".",e).href),a(r)})().then((async a=>(await r(),e([["p-dc0daac5",[[1,"mds-paginator",{pages:[2],currentPage:[1538,"current-page"]}]]]],a))));
1
+ import{p as a,b as e}from"./p-d5ae5457.js";export{s as setNonce}from"./p-d5ae5457.js";import{g as r}from"./p-e1255160.js";(()=>{const e=import.meta.url,r={};return""!==e&&(r.resourcesUrl=new URL(".",e).href),a(r)})().then((async a=>(await r(),e([["p-5097fc88",[[1,"mds-paginator",{pages:[2],currentPage:[1538,"current-page"]}]]]],a))));
package/dist/mds-paginator/p-5097fc88.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as t,c as n,h as d,H as e,g as a}from"./p-d5ae5457.js";const r=class{constructor(d){t(this,d),this.pageChangedEvent=n(this,"mdsPaginatorChange",7),this.pages=0,this.currentPage=1,this.scrollPage=t=>{var n;const d=t,e=null===(n=this.element.shadowRoot)||void 0===n?void 0:n.querySelector(".pages"),a=null==e?void 0:e.querySelectorAll("mds-paginator-item");if(!e||!a)return;if(d<0)return void(e.scrollLeft=0);if(d>a.length-1)return void(e.scrollLeft=a[a.length-1].offsetLeft-e.offsetLeft);const r=a[d];e.scrollLeft=r.offsetLeft-e.offsetLeft-e.offsetWidth/2+r.offsetWidth/2},this.focus=t=>{var n;const d=null===(n=this.element.shadowRoot)||void 0===n?void 0:n.querySelector(".pages"),e=null==d?void 0:d.querySelectorAll("mds-paginator-item");if(e&&t.target){const n=Array.from(e).indexOf(t.target);this.scrollPage(n)}},this.goToPage=(t,n)=>{t<1||t>this.pages||(this.currentPage=t,this.pages>2&&this.scrollPage(this.currentPage-2),this.pageChangedEvent.emit({page:this.currentPage,caller:n}))}}componentDidLoad(){setTimeout((()=>{this.goToPage(this.currentPage)}),10)}render(){return d(e,{key:"75d9f42aad179850676dd09a6a431f0826e567f5"},d("mds-paginator-item",{key:"07983227fc834b1a22cc0286202f548dcc51432c",class:"item-icon",icon:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8l8 8l1.41-1.41L7.83 13H20v-2z"/></svg>',disabled:1===this.currentPage,onClick:t=>this.goToPage(this.currentPage-1,t.target)}),this.pages>0&&d("mds-paginator-item",{key:"0c4ee75a41b1cb09c003454cd47667b97e8adaeb",class:"item-first",selected:1===this.currentPage,onClick:t=>this.goToPage(1,t.target)},"1"),this.pages>2&&d("div",{key:"739fd7852575fab05571f2397a8763bbb7474d7b",class:"pages"},Array.from(Array(this.pages-2).keys()).map((t=>d("mds-paginator-item",{key:t,class:"item",selected:this.currentPage===t+2,onClick:n=>this.goToPage(t+2,n.target),onFocus:this.focus},t+2)))),this.pages>1&&d("mds-paginator-item",{key:"2eb83e4e32bbc3c04fc1ac936cd1416478521005",class:"item-last",selected:this.currentPage===this.pages,onClick:t=>this.goToPage(this.pages,t.target)},this.pages),d("mds-paginator-item",{key:"44923ede2579a66ffa369805419e502fe2c9a06a",class:"item-icon",icon:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>',disabled:this.currentPage===this.pages,onClick:t=>this.goToPage(this.currentPage+1,t.target)}))}get element(){return a(this)}};r.style="@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-paginator-background: Sets the background-color of the pages area and the item\n * @prop --mds-paginator-scroll-behavior: Sets the scroll-behavior animation\n */\n\n:host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n --mds-paginator-scroll-behavior: smooth;\n gap: 0.25rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n}\n\n.pages {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n border-radius: 9999px;\n padding: 0.5rem;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: var(--mds-paginator-background);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-negative: 1;\n flex-shrink: 1;\n gap: 2px;\n overflow: auto;\n scroll-behavior: var(--mds-paginator-scroll-behavior);\n -webkit-transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, box-shadow;\n transition-property: background-color, box-shadow, -webkit-box-shadow;\n }\n\n.pages::-webkit-scrollbar {\n display: none;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-paginator-scroll-behavior: auto;\n }\n\n :host,\n .pages {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-paginator-scroll-behavior: auto;\n }\n\n :host,\n .pages {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n\n }\n \n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n }\n\n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n@container style(--magma-pref-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n";export{r as mds_paginator}
package/dist/mds-paginator/p-5cc4c623.system.entry.js ADDED
@@ -0,0 +1 @@
1
+ System.register(["./p-4399f910.system.js"],(function(t){"use strict";var n,d,e,a,r;return{setters:[function(t){n=t.r;d=t.c;e=t.h;a=t.H;r=t.g}],execute:function(){var i='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8l8 8l1.41-1.41L7.83 13H20v-2z"/></svg>';var s='<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>';var o="@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-paginator-background: Sets the background-color of the pages area and the item\n * @prop --mds-paginator-scroll-behavior: Sets the scroll-behavior animation\n */\n\n:host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n --mds-paginator-scroll-behavior: smooth;\n gap: 0.25rem;\n\n -ms-flex-align: center;\n\n align-items: center;\n display: -ms-flexbox;\n display: flex;\n}\n\n.pages {\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: none;\n scrollbar-width: none;\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n border-radius: 9999px;\n padding: 0.5rem;\n -webkit-transition-duration: 200ms;\n transition-duration: 200ms;\n -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n -ms-flex-align: center;\n\n align-items: center;\n background-color: var(--mds-paginator-background);\n display: -ms-flexbox;\n display: flex;\n -ms-flex-negative: 1;\n flex-shrink: 1;\n gap: 2px;\n overflow: auto;\n scroll-behavior: var(--mds-paginator-scroll-behavior);\n -webkit-transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, -webkit-box-shadow;\n transition-property: background-color, box-shadow;\n transition-property: background-color, box-shadow, -webkit-box-shadow;\n }\n\n.pages::-webkit-scrollbar {\n display: none;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n :host {\n\n --mds-paginator-scroll-behavior: auto;\n }\n\n :host,\n .pages {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n}\n\n@container style(--magma-pref-animation: system) {\n\n @media (prefers-reduced-motion) {\n :host {\n\n --mds-paginator-scroll-behavior: auto;\n }\n\n :host,\n .pages {\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n }\n }\n}\n\n\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n\n }\n \n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-theme: system) {\n\n @media (prefers-color-scheme: dark) {\n :host {\n\n --mds-paginator-background: rgb(var(--tone-neutral-09));\n }\n\n .pages {\n -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n@container style(--magma-pref-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n @media (prefers-contrast: more) {\n .pages {\n -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n\n .item {\n\n --mds-paginator-item-background-hover: rgb(var(--tone-neutral));\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: none;\n }\n\n .item-first,\n .item-last,\n .item-icon {\n\n --mds-paginator-item-shadow-disabled: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow-hover: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n --mds-paginator-item-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3) inset;\n }\n }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n -webkit-animation-duration: 0s;\n animation-duration: 0s;\n border-color: transparent;\n -webkit-box-shadow: 0 0 0 transparent;\n box-shadow: 0 0 0 transparent;\n opacity: 0;\n outline-color: transparent;\n -webkit-transition-delay: 0s;\n transition-delay: 0s;\n -webkit-transition-duration: 0s;\n transition-duration: 0s;\n visibility: hidden;\n}\n\n";var h=o;var m=t("mds_paginator",function(){function t(t){var e=this;n(this,t);this.pageChangedEvent=d(this,"mdsPaginatorChange",7);this.pages=0;this.currentPage=1;this.scrollPage=function(t){var n;var d=t;var a=(n=e.element.shadowRoot)===null||n===void 0?void 0:n.querySelector(".pages");var r=a===null||a===void 0?void 0:a.querySelectorAll("mds-paginator-item");if(!a||!r)return;if(d<0){a.scrollLeft=0;return}if(d>r.length-1){var i=r[r.length-1];a.scrollLeft=i.offsetLeft-a.offsetLeft;return}var s=r[d];a.scrollLeft=s.offsetLeft-a.offsetLeft-a.offsetWidth/2+s.offsetWidth/2};this.focus=function(t){var n;var d=(n=e.element.shadowRoot)===null||n===void 0?void 0:n.querySelector(".pages");var a=d===null||d===void 0?void 0:d.querySelectorAll("mds-paginator-item");if(a&&t.target){var r=Array.from(a);var i=r.indexOf(t.target);e.scrollPage(i)}};this.goToPage=function(t,n){if(t<1||t>e.pages){return}e.currentPage=t;if(e.pages>2){e.scrollPage(e.currentPage-2)}e.pageChangedEvent.emit({page:e.currentPage,caller:n})}}t.prototype.componentDidLoad=function(){var t=this;setTimeout((function(){t.goToPage(t.currentPage)}),10)};t.prototype.render=function(){var t=this;return e(a,{key:"75d9f42aad179850676dd09a6a431f0826e567f5"},e("mds-paginator-item",{key:"07983227fc834b1a22cc0286202f548dcc51432c",class:"item-icon",icon:i,disabled:this.currentPage===1,onClick:function(n){return t.goToPage(t.currentPage-1,n.target)}}),this.pages>0&&e("mds-paginator-item",{key:"0c4ee75a41b1cb09c003454cd47667b97e8adaeb",class:"item-first",selected:this.currentPage===1,onClick:function(n){return t.goToPage(1,n.target)}},"1"),this.pages>2&&e("div",{key:"739fd7852575fab05571f2397a8763bbb7474d7b",class:"pages"},Array.from(Array(this.pages-2).keys()).map((function(n){return e("mds-paginator-item",{key:n,class:"item",selected:t.currentPage===n+2,onClick:function(d){return t.goToPage(n+2,d.target)},onFocus:t.focus},n+2)}))),this.pages>1&&e("mds-paginator-item",{key:"2eb83e4e32bbc3c04fc1ac936cd1416478521005",class:"item-last",selected:this.currentPage===this.pages,onClick:function(n){return t.goToPage(t.pages,n.target)}},this.pages),e("mds-paginator-item",{key:"44923ede2579a66ffa369805419e502fe2c9a06a",class:"item-icon",icon:s,disabled:this.currentPage===this.pages,onClick:function(n){return t.goToPage(t.currentPage+1,n.target)}}))};Object.defineProperty(t.prototype,"element",{get:function(){return r(this)},enumerable:false,configurable:true});return t}());m.style=h}}}));
package/dist/mds-paginator/p-e9734aa5.system.js CHANGED
@@ -1 +1 @@
1
- var __awaiter=this&&this.__awaiter||function(n,t,e,r){function i(n){return n instanceof e?n:new e((function(t){t(n)}))}return new(e||(e=Promise))((function(e,u){function c(n){try{a(r.next(n))}catch(n){u(n)}}function o(n){try{a(r["throw"](n))}catch(n){u(n)}}function a(n){n.done?e(n.value):i(n.value).then(c,o)}a((r=r.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var e={label:0,sent:function(){if(u[0]&1)throw u[1];return u[1]},trys:[],ops:[]},r,i,u,c;return c={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(c[Symbol.iterator]=function(){return this}),c;function o(n){return function(t){return a([n,t])}}function a(o){if(r)throw new TypeError("Generator is already executing.");while(c&&(c=0,o[0]&&(e=0)),e)try{if(r=1,i&&(u=o[0]&2?i["return"]:o[0]?i["throw"]||((u=i["return"])&&u.call(i),0):i.next)&&!(u=u.call(i,o[1])).done)return u;if(i=0,u)o=[o[0]&2,u.value];switch(o[0]){case 0:case 1:u=o;break;case 4:e.label++;return{value:o[1],done:false};case 5:e.label++;i=o[1];o=[0];continue;case 7:o=e.ops.pop();e.trys.pop();continue;default:if(!(u=e.trys,u=u.length>0&&u[u.length-1])&&(o[0]===6||o[0]===2)){e=0;continue}if(o[0]===3&&(!u||o[1]>u[0]&&o[1]<u[3])){e.label=o[1];break}if(o[0]===6&&e.label<u[1]){e.label=u[1];u=o;break}if(u&&e.label<u[2]){e.label=u[2];e.ops.push(o);break}if(u[2])e.ops.pop();e.trys.pop();continue}o=t.call(n,e)}catch(n){o=[6,n];i=0}finally{r=u=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./p-4399f910.system.js","./p-56ba5cbf.system.js"],(function(n,t){"use strict";var e,r,i;return{setters:[function(t){e=t.p;r=t.b;n("setNonce",t.s)},function(n){i=n.g}],execute:function(){var n=this;var u=function(){var n=t.meta.url;var r={};if(n!==""){r.resourcesUrl=new URL(".",n).href}return e(r)};u().then((function(t){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,i()];case 1:n.sent();return[2,r([["p-1a397fd4.system",[[1,"mds-paginator",{pages:[2],currentPage:[1538,"current-page"]}]]]],t)]}}))}))}))}}}));
1
+ var __awaiter=this&&this.__awaiter||function(n,t,e,r){function i(n){return n instanceof e?n:new e((function(t){t(n)}))}return new(e||(e=Promise))((function(e,c){function u(n){try{a(r.next(n))}catch(n){c(n)}}function o(n){try{a(r["throw"](n))}catch(n){c(n)}}function a(n){n.done?e(n.value):i(n.value).then(u,o)}a((r=r.apply(n,t||[])).next())}))};var __generator=this&&this.__generator||function(n,t){var e={label:0,sent:function(){if(c[0]&1)throw c[1];return c[1]},trys:[],ops:[]},r,i,c,u;return u={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(u[Symbol.iterator]=function(){return this}),u;function o(n){return function(t){return a([n,t])}}function a(o){if(r)throw new TypeError("Generator is already executing.");while(u&&(u=0,o[0]&&(e=0)),e)try{if(r=1,i&&(c=o[0]&2?i["return"]:o[0]?i["throw"]||((c=i["return"])&&c.call(i),0):i.next)&&!(c=c.call(i,o[1])).done)return c;if(i=0,c)o=[o[0]&2,c.value];switch(o[0]){case 0:case 1:c=o;break;case 4:e.label++;return{value:o[1],done:false};case 5:e.label++;i=o[1];o=[0];continue;case 7:o=e.ops.pop();e.trys.pop();continue;default:if(!(c=e.trys,c=c.length>0&&c[c.length-1])&&(o[0]===6||o[0]===2)){e=0;continue}if(o[0]===3&&(!c||o[1]>c[0]&&o[1]<c[3])){e.label=o[1];break}if(o[0]===6&&e.label<c[1]){e.label=c[1];c=o;break}if(c&&e.label<c[2]){e.label=c[2];e.ops.push(o);break}if(c[2])e.ops.pop();e.trys.pop();continue}o=t.call(n,e)}catch(n){o=[6,n];i=0}finally{r=c=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./p-4399f910.system.js","./p-56ba5cbf.system.js"],(function(n,t){"use strict";var e,r,i;return{setters:[function(t){e=t.p;r=t.b;n("setNonce",t.s)},function(n){i=n.g}],execute:function(){var n=this;var c=function(){var n=t.meta.url;var r={};if(n!==""){r.resourcesUrl=new URL(".",n).href}return e(r)};c().then((function(t){return __awaiter(n,void 0,void 0,(function(){return __generator(this,(function(n){switch(n.label){case 0:return[4,i()];case 1:n.sent();return[2,r([["p-5cc4c623.system",[[1,"mds-paginator",{pages:[2],currentPage:[1538,"current-page"]}]]]],t)]}}))}))}))}}}));