@maggioli-design-system/mds-paginator 4.0.1 → 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.
- package/dist/cjs/{index-30bc2eba.js → index-463b21cc.js} +160 -65
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/mds-paginator.cjs.entry.js +10 -4
- package/dist/cjs/mds-paginator.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/common/floating-controller.js +180 -0
- package/dist/collection/common/slot.js +28 -0
- package/dist/collection/common/string.js +30 -0
- package/dist/collection/components/mds-paginator/mds-paginator.css +132 -4
- package/dist/collection/components/mds-paginator/mds-paginator.js +12 -2
- package/dist/collection/dictionary/animation.js +5 -0
- package/dist/collection/dictionary/file-extensions.js +6 -59
- package/dist/collection/dictionary/keyboard.js +84 -0
- package/dist/collection/dictionary/tree.js +13 -0
- package/dist/collection/fixtures/filenames.js +62 -1
- package/dist/collection/type/animation.js +1 -0
- package/dist/collection/type/keyboard.js +1 -0
- package/dist/collection/type/tree.js +1 -0
- package/dist/collection/type/variant-file-format.js +5 -0
- package/dist/components/mds-paginator.js +9 -3
- package/dist/documentation.d.ts +8 -0
- package/dist/documentation.json +13 -4
- package/dist/esm/{index-bb799122.js → index-f3d0e7ab.js} +160 -65
- package/dist/esm/loader.js +2 -2
- package/dist/esm/mds-paginator.entry.js +10 -4
- package/dist/esm/mds-paginator.js +3 -3
- package/dist/esm-es5/index-f3d0e7ab.js +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mds-paginator.entry.js +1 -1
- package/dist/esm-es5/mds-paginator.js +1 -1
- package/dist/mds-paginator/mds-paginator.esm.js +1 -1
- package/dist/mds-paginator/mds-paginator.js +1 -1
- package/dist/mds-paginator/p-4399f910.system.js +2 -0
- package/dist/mds-paginator/p-5097fc88.entry.js +1 -0
- package/dist/mds-paginator/p-5cc4c623.system.entry.js +1 -0
- package/dist/mds-paginator/p-d5ae5457.js +2 -0
- package/dist/mds-paginator/p-e9734aa5.system.js +1 -0
- package/dist/stats.json +72 -36
- package/dist/types/common/floating-controller.d.ts +46 -0
- package/dist/types/common/slot.d.ts +4 -0
- package/dist/types/common/string.d.ts +4 -0
- package/dist/types/dictionary/animation.d.ts +2 -0
- package/dist/types/dictionary/keyboard.d.ts +2 -0
- package/dist/types/dictionary/tree.d.ts +4 -0
- package/dist/types/fixtures/filenames.d.ts +62 -1
- package/dist/types/type/animation.d.ts +1 -0
- package/dist/types/type/file-types.d.ts +1 -1
- package/dist/types/type/keyboard.d.ts +12 -0
- package/dist/types/type/tree.d.ts +3 -0
- package/dist/types/type/variant-file-format.d.ts +1 -1
- package/documentation.json +74 -15
- package/package.json +4 -4
- package/readme.md +4 -3
- package/src/common/floating-controller.ts +263 -0
- package/src/common/slot.ts +35 -0
- package/src/common/string.ts +42 -0
- package/src/components/mds-paginator/css/mds-paginator-pref-animation.css +10 -2
- package/src/components/mds-paginator/mds-paginator.css +4 -1
- package/src/components/mds-paginator/readme.md +4 -3
- package/src/dictionary/animation.ts +8 -0
- package/src/dictionary/file-extensions.ts +6 -60
- package/src/dictionary/keyboard.ts +87 -0
- package/src/dictionary/tree.ts +21 -0
- package/src/fixtures/filenames.ts +63 -0
- package/src/fixtures/icons.json +39 -1
- package/src/fixtures/iconsauce.json +6 -0
- package/src/meta/file-format/locale.el.json +26 -21
- package/src/meta/file-format/locale.en.json +26 -21
- package/src/meta/file-format/locale.es.json +26 -21
- package/src/meta/file-format/locale.it.json +26 -21
- package/src/meta/keyboard/keys.json +83 -0
- package/src/tailwind/components.css +11 -0
- package/src/tailwind/fouc.css +118 -0
- package/src/type/animation.ts +3 -0
- package/src/type/file-types.ts +6 -0
- package/src/type/keyboard.ts +93 -0
- package/src/type/tree.ts +12 -0
- package/src/type/variant-file-format.ts +6 -0
- package/www/build/mds-paginator.esm.js +1 -1
- package/www/build/mds-paginator.js +1 -1
- package/www/build/p-4399f910.system.js +2 -0
- package/www/build/p-5097fc88.entry.js +1 -0
- package/www/build/p-5cc4c623.system.entry.js +1 -0
- package/www/build/p-d5ae5457.js +2 -0
- package/www/build/p-e9734aa5.system.js +1 -0
- package/dist/esm-es5/index-bb799122.js +0 -1
- package/dist/mds-paginator/p-04d97497.system.js +0 -2
- package/dist/mds-paginator/p-76c74f59.js +0 -2
- package/dist/mds-paginator/p-ad4d8236.system.js +0 -1
- package/dist/mds-paginator/p-bcb4edeb.system.entry.js +0 -1
- package/dist/mds-paginator/p-e01b6aef.entry.js +0 -1
- package/www/build/p-04d97497.system.js +0 -2
- package/www/build/p-76c74f59.js +0 -2
- package/www/build/p-ad4d8236.system.js +0 -1
- package/www/build/p-bcb4edeb.system.entry.js +0 -1
- package/www/build/p-e01b6aef.entry.js +0 -1
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import { arrow, autoPlacement, autoUpdate, computePosition, flip, offset, shift, } from "@floating-ui/dom";
|
|
2
|
+
import { cssDurationToMilliseconds } from "./unit";
|
|
3
|
+
import { setAttributeIfEmpty } from "./aria";
|
|
4
|
+
export class FloatingController {
|
|
5
|
+
constructor(host, arrowEl) {
|
|
6
|
+
this.arrowInset = (middleware, arrowPosition) => {
|
|
7
|
+
const { arrow } = middleware;
|
|
8
|
+
const inset = { bottom: '', left: '', right: '', top: '' };
|
|
9
|
+
if (arrow === undefined) {
|
|
10
|
+
return {};
|
|
11
|
+
}
|
|
12
|
+
switch (arrowPosition) {
|
|
13
|
+
case 'bottom':
|
|
14
|
+
inset.left = arrow.x !== null ? `${arrow.x}px` : '';
|
|
15
|
+
inset.top = '100%';
|
|
16
|
+
break;
|
|
17
|
+
case 'left':
|
|
18
|
+
inset.right = '100%';
|
|
19
|
+
inset.top = arrow.y !== null ? `${arrow.y}px` : '';
|
|
20
|
+
break;
|
|
21
|
+
case 'right':
|
|
22
|
+
inset.left = '100%';
|
|
23
|
+
inset.top = arrow.y !== null ? `${arrow.y}px` : '';
|
|
24
|
+
break;
|
|
25
|
+
case 'top':
|
|
26
|
+
inset.left = arrow.x !== null ? `${arrow.x}px` : '';
|
|
27
|
+
inset.top = '';
|
|
28
|
+
break;
|
|
29
|
+
default:
|
|
30
|
+
break;
|
|
31
|
+
}
|
|
32
|
+
return inset;
|
|
33
|
+
};
|
|
34
|
+
this.arrowTransform = (arrowPosition) => {
|
|
35
|
+
let transformProps = this._host.arrow && this._host.visible ? 'scale(1)' : 'scale(0)';
|
|
36
|
+
switch (arrowPosition) {
|
|
37
|
+
case 'bottom':
|
|
38
|
+
transformProps = `rotate(180deg) ${transformProps} translate(0, -100%)`;
|
|
39
|
+
break;
|
|
40
|
+
case 'left':
|
|
41
|
+
transformProps = `rotate(-90deg) ${transformProps} translate(50%, -50%)`;
|
|
42
|
+
break;
|
|
43
|
+
case 'right':
|
|
44
|
+
transformProps = `rotate(90deg) ${transformProps} translate(-50%, -50%)`;
|
|
45
|
+
break;
|
|
46
|
+
case 'top':
|
|
47
|
+
transformProps = `rotate(0deg) ${transformProps} translate(0, 0)`;
|
|
48
|
+
break;
|
|
49
|
+
default:
|
|
50
|
+
break;
|
|
51
|
+
}
|
|
52
|
+
return { transform: transformProps };
|
|
53
|
+
};
|
|
54
|
+
this.arrowTransformOrigin = (arrowPosition) => {
|
|
55
|
+
switch (arrowPosition) {
|
|
56
|
+
case 'bottom':
|
|
57
|
+
return { transformOrigin: 'center top' };
|
|
58
|
+
case 'left':
|
|
59
|
+
return { transformOrigin: 'right center' };
|
|
60
|
+
case 'right':
|
|
61
|
+
return { transformOrigin: 'left center' };
|
|
62
|
+
case 'top':
|
|
63
|
+
return { transformOrigin: 'center bottom' };
|
|
64
|
+
default:
|
|
65
|
+
return { transformOrigin: 'center top' };
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
this.calculatePosition = () => {
|
|
69
|
+
if (!this._caller)
|
|
70
|
+
return;
|
|
71
|
+
const middleware = new Array();
|
|
72
|
+
const config = {};
|
|
73
|
+
if (this._host.shiftPadding) {
|
|
74
|
+
config.padding = this._host.shiftPadding;
|
|
75
|
+
}
|
|
76
|
+
if (this._host.autoPlacement) {
|
|
77
|
+
middleware.push(autoPlacement());
|
|
78
|
+
}
|
|
79
|
+
if (this._host.offset) {
|
|
80
|
+
middleware.push(offset(this._host.offset));
|
|
81
|
+
}
|
|
82
|
+
if (!this._host.autoPlacement && this._host.flip) {
|
|
83
|
+
middleware.push(flip(config));
|
|
84
|
+
}
|
|
85
|
+
if (this._host.shift) {
|
|
86
|
+
middleware.push(shift(config));
|
|
87
|
+
}
|
|
88
|
+
if (this.arrowEl && this._host.arrow) {
|
|
89
|
+
middleware.push(arrow({
|
|
90
|
+
element: this.arrowEl,
|
|
91
|
+
padding: this._host.arrowPadding,
|
|
92
|
+
}));
|
|
93
|
+
}
|
|
94
|
+
computePosition(this._caller, this._host, {
|
|
95
|
+
middleware,
|
|
96
|
+
placement: this._host.placement,
|
|
97
|
+
strategy: this._host.strategy,
|
|
98
|
+
}).then(({ x, y, placement, middlewareData }) => {
|
|
99
|
+
Object.assign(this._host.style, {
|
|
100
|
+
left: `${x}px`,
|
|
101
|
+
top: `${y}px`,
|
|
102
|
+
});
|
|
103
|
+
const arrowStyle = {};
|
|
104
|
+
const arrowPosition = {
|
|
105
|
+
top: 'bottom',
|
|
106
|
+
right: 'left',
|
|
107
|
+
bottom: 'top',
|
|
108
|
+
left: 'right',
|
|
109
|
+
}[placement.split('-')[0]];
|
|
110
|
+
if (arrowPosition && this.arrowEl) {
|
|
111
|
+
Object.assign(arrowStyle, this.arrowTransform(arrowPosition));
|
|
112
|
+
Object.assign(arrowStyle, this.arrowInset(middlewareData, arrowPosition));
|
|
113
|
+
Object.assign(arrowStyle, this.arrowTransformOrigin(arrowPosition));
|
|
114
|
+
Object.assign(this.arrowEl.style, arrowStyle);
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
};
|
|
118
|
+
this._host = host;
|
|
119
|
+
this.arrowEl = arrowEl;
|
|
120
|
+
}
|
|
121
|
+
updateCaller(target) {
|
|
122
|
+
var _a, _b, _c;
|
|
123
|
+
// search caller in document or rootNode of host (if target is in shadowDOM)
|
|
124
|
+
const caller = (_c = (_b = (_a = this._host.parentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(target)) !== null && _c !== void 0 ? _c : this._host.getRootNode().querySelector(target);
|
|
125
|
+
if (!caller) {
|
|
126
|
+
throw Error(`Target not found: ${target}`);
|
|
127
|
+
}
|
|
128
|
+
this._caller = caller;
|
|
129
|
+
setAttributeIfEmpty(this._caller, 'aria-haspopup', 'true');
|
|
130
|
+
setAttributeIfEmpty(this._caller, 'aria-controls', target);
|
|
131
|
+
setAttributeIfEmpty(this._host, 'role', 'menu');
|
|
132
|
+
setAttributeIfEmpty(this._host, 'aria-labelledby', target);
|
|
133
|
+
return caller;
|
|
134
|
+
}
|
|
135
|
+
updatePosition() {
|
|
136
|
+
if (this.cleanupAutoUpdate)
|
|
137
|
+
this.cleanupAutoUpdate();
|
|
138
|
+
this.cleanupAutoUpdate = autoUpdate(this._caller, this._host, this.calculatePosition);
|
|
139
|
+
}
|
|
140
|
+
dismiss() {
|
|
141
|
+
this.cleanupAutoUpdate();
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
export class Backdrop {
|
|
145
|
+
constructor(backdropId) {
|
|
146
|
+
this.defaultBackdropId = 'magma-backdrop';
|
|
147
|
+
this.backdropBackgroundVisible = 'rgba(var(--magma-backdrop-color, 0 0 0) / var(--magma-backdrop-opacity, 0.1))';
|
|
148
|
+
this.backdropBackgroundHidden = 'rgba(var(--magma-backdrop-color, 0 0 0) / 0)';
|
|
149
|
+
this.backdropId = backdropId !== null && backdropId !== void 0 ? backdropId : this.defaultBackdropId;
|
|
150
|
+
this.cssBackdropZIndex = `var(--${this.backdropId}-z-index, 4000)`;
|
|
151
|
+
this.cssBackdropDuration = `var(--${this.backdropId}-animation-duration, 300ms)`;
|
|
152
|
+
}
|
|
153
|
+
attachBackdrop() {
|
|
154
|
+
if (!this.backdropEl) {
|
|
155
|
+
this.backdropEl = document.createElement('div');
|
|
156
|
+
this.backdropEl.className = this.backdropId;
|
|
157
|
+
this.backdropEl.style.inset = '0';
|
|
158
|
+
this.backdropEl.style.pointerEvents = 'none';
|
|
159
|
+
this.backdropEl.style.position = 'fixed';
|
|
160
|
+
this.backdropEl.style.transition = `background-color ${this.cssBackdropDuration} ease-out`;
|
|
161
|
+
this.backdropEl.style.zIndex = this.cssBackdropZIndex;
|
|
162
|
+
}
|
|
163
|
+
this.backdropEl.style.backgroundColor = this.backdropBackgroundHidden;
|
|
164
|
+
document.body.appendChild(this.backdropEl);
|
|
165
|
+
clearTimeout(this.backdropTimer);
|
|
166
|
+
this.backdropTimer = setTimeout(() => {
|
|
167
|
+
this.backdropEl.style.backgroundColor = this.backdropBackgroundVisible;
|
|
168
|
+
}, 1);
|
|
169
|
+
}
|
|
170
|
+
detachBackdrop() {
|
|
171
|
+
if (!this.backdropEl) {
|
|
172
|
+
return;
|
|
173
|
+
}
|
|
174
|
+
this.backdropEl.style.backgroundColor = 'transparent';
|
|
175
|
+
clearTimeout(this.backdropTimer);
|
|
176
|
+
this.backdropTimer = setTimeout(() => {
|
|
177
|
+
this.backdropEl.remove();
|
|
178
|
+
}, cssDurationToMilliseconds(this.cssBackdropDuration));
|
|
179
|
+
}
|
|
180
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
const hasSlottedElements = (el, name) => {
|
|
2
|
+
var _a;
|
|
3
|
+
const query = name ? `slot[name="${name}"]` : 'slot:not([name])';
|
|
4
|
+
const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(query);
|
|
5
|
+
if (slot) {
|
|
6
|
+
return slot.assignedElements({ flatten: true }).length > 0;
|
|
7
|
+
}
|
|
8
|
+
return false;
|
|
9
|
+
};
|
|
10
|
+
const hasSlottedNodes = (el, name) => {
|
|
11
|
+
var _a;
|
|
12
|
+
const query = name ? `slot[name="${name}"]` : 'slot:not([name])';
|
|
13
|
+
const slot = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(query);
|
|
14
|
+
if (slot) {
|
|
15
|
+
return slot.assignedNodes().length > 0;
|
|
16
|
+
}
|
|
17
|
+
return false;
|
|
18
|
+
};
|
|
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, };
|
|
@@ -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, };
|
|
@@ -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:
|
|
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
|
+
|
|
@@ -3,6 +3,14 @@ import miBaselineArrowBack from "@icon/mi/baseline/arrow-back.svg";
|
|
|
3
3
|
import miBaselineArrowForward from "@icon/mi/baseline/arrow-forward.svg";
|
|
4
4
|
export class MdsPaginator {
|
|
5
5
|
constructor() {
|
|
6
|
+
/**
|
|
7
|
+
* Specifies the number of total pages to be handled
|
|
8
|
+
*/
|
|
9
|
+
this.pages = 0;
|
|
10
|
+
/**
|
|
11
|
+
* Specifies the current page selected in the paginator
|
|
12
|
+
*/
|
|
13
|
+
this.currentPage = 1;
|
|
6
14
|
this.scrollPage = (index) => {
|
|
7
15
|
var _a;
|
|
8
16
|
const elementIndex = index;
|
|
@@ -42,8 +50,6 @@ export class MdsPaginator {
|
|
|
42
50
|
}
|
|
43
51
|
this.pageChangedEvent.emit({ page: this.currentPage, caller });
|
|
44
52
|
};
|
|
45
|
-
this.pages = 0;
|
|
46
|
-
this.currentPage = 1;
|
|
47
53
|
}
|
|
48
54
|
componentDidLoad() {
|
|
49
55
|
setTimeout(() => {
|
|
@@ -82,6 +88,8 @@ export class MdsPaginator {
|
|
|
82
88
|
"tags": [],
|
|
83
89
|
"text": "Specifies the number of total pages to be handled"
|
|
84
90
|
},
|
|
91
|
+
"getter": false,
|
|
92
|
+
"setter": false,
|
|
85
93
|
"attribute": "pages",
|
|
86
94
|
"reflect": false,
|
|
87
95
|
"defaultValue": "0"
|
|
@@ -100,6 +108,8 @@ export class MdsPaginator {
|
|
|
100
108
|
"tags": [],
|
|
101
109
|
"text": "Specifies the current page selected in the paginator"
|
|
102
110
|
},
|
|
111
|
+
"getter": false,
|
|
112
|
+
"setter": false,
|
|
103
113
|
"attribute": "current-page",
|
|
104
114
|
"reflect": true,
|
|
105
115
|
"defaultValue": "1"
|
|
@@ -14,8 +14,8 @@ const fileExtensionsDictionary = {
|
|
|
14
14
|
exe: { format: 'executable', description: 'fileEXE' },
|
|
15
15
|
flac: { format: 'audio', description: 'uncompressedAudio' },
|
|
16
16
|
gif: { format: 'image', description: 'compressedImage', preview: true },
|
|
17
|
-
htm: { format: 'markup', description: 'documentWeb' },
|
|
18
17
|
heic: { format: 'image', description: 'imageHEFF' },
|
|
18
|
+
htm: { format: 'markup', description: 'documentWeb' },
|
|
19
19
|
html: { format: 'markup', description: 'documentWeb' },
|
|
20
20
|
jpe: { format: 'image', description: 'compressedImage', preview: true },
|
|
21
21
|
jpeg: { format: 'image', description: 'compressedImage', preview: true },
|
|
@@ -32,9 +32,12 @@ const fileExtensionsDictionary = {
|
|
|
32
32
|
mpg4: { format: 'video', description: 'videoSD' },
|
|
33
33
|
mpg: { format: 'video', description: 'videoSD' },
|
|
34
34
|
mpga: { format: 'audio', description: 'compressedAudio' },
|
|
35
|
+
odf: { format: 'document', description: 'openDocumentFormat' },
|
|
35
36
|
odp: { format: 'slide', description: 'slideLO' },
|
|
36
37
|
ods: { format: 'spreadsheet', description: 'spreadsheetLO' },
|
|
37
38
|
odt: { format: 'text', description: 'documentLO' },
|
|
39
|
+
ole: { format: 'document', description: 'objectLinkingAndEmbedding' },
|
|
40
|
+
p7m: { format: 'certificate', description: 'documentDigitalSingnature' },
|
|
38
41
|
pdf: { format: 'document', description: 'documentAdobe' },
|
|
39
42
|
php: { format: 'code', description: 'filePHP' },
|
|
40
43
|
png: { format: 'image', description: 'imagePNG', preview: true },
|
|
@@ -47,6 +50,7 @@ const fileExtensionsDictionary = {
|
|
|
47
50
|
tar: { format: 'archive', description: 'uncompressedArchive' },
|
|
48
51
|
tiff: { format: 'image', description: 'imageTIFF' },
|
|
49
52
|
ts: { format: 'code', description: 'fileTS' },
|
|
53
|
+
tsd: { format: 'certificate', description: 'certificateTSD' },
|
|
50
54
|
tsx: { format: 'code', description: 'fileTSX' },
|
|
51
55
|
txt: { format: 'text', description: 'documentTXT' },
|
|
52
56
|
wav: { format: 'audio', description: 'uncompressedAudio' },
|
|
@@ -54,66 +58,9 @@ const fileExtensionsDictionary = {
|
|
|
54
58
|
xar: { format: 'archive', description: 'compressedArchive' },
|
|
55
59
|
xls: { format: 'spreadsheet', description: 'spreadsheetMS' },
|
|
56
60
|
xlsx: { format: 'spreadsheet', description: 'spreadsheetMS' },
|
|
61
|
+
xml: { format: 'markup', description: 'extensibleMarkupLanguage' },
|
|
57
62
|
zip: { format: 'archive', description: 'compressedArchive' },
|
|
58
63
|
};
|
|
59
|
-
// const fileExtensionsDictionary: FileExtenstion = {
|
|
60
|
-
// '7z': { format: 'archive', description: 'Archivio compresso' },
|
|
61
|
-
// ace: { format: 'archive', description: 'Archivio compresso' },
|
|
62
|
-
// ai: { format: 'vector', description: 'Vettoriale Adobe Illustrator' },
|
|
63
|
-
// dart: { format: 'code', description: 'Dart' },
|
|
64
|
-
// db: { format: 'data', description: 'File di database' },
|
|
65
|
-
// default: { format: 'attachment', description: 'Formato sconosciuto' },
|
|
66
|
-
// dmg: { format: 'executable', description: 'Apple Disk Image' },
|
|
67
|
-
// doc: { format: 'text', description: 'Documento Microsoft Word' },
|
|
68
|
-
// docm: { format: 'text', description: 'Documento Microsoft Word' },
|
|
69
|
-
// docx: { format: 'text', description: 'Documento Microsoft Word Compresso' },
|
|
70
|
-
// eml: { format: 'email', description: 'E-mail di posta elettronica' },
|
|
71
|
-
// eps: { format: 'vector', description: 'Vettoriale Corel Draw' },
|
|
72
|
-
// exe: { format: 'executable', description: 'File eseguibile Windows' },
|
|
73
|
-
// flac: { format: 'audio', description: 'Audio non compresso' },
|
|
74
|
-
// gif: { format: 'image', description: 'Immagine compressa', preview: true },
|
|
75
|
-
// htm: { format: 'markup', description: 'Pagina web' },
|
|
76
|
-
// heic: { format: 'image', description: 'High Efficiency Image File Format' },
|
|
77
|
-
// html: { format: 'markup', description: 'Pagina web' },
|
|
78
|
-
// jpe: { format: 'image', description: 'Immagine compressa', preview: true },
|
|
79
|
-
// jpeg: { format: 'image', description: 'Immagine compressa', preview: true },
|
|
80
|
-
// jpg: { format: 'image', description: 'Immagine compressa', preview: true },
|
|
81
|
-
// js: { format: 'code', description: 'JavaScript' },
|
|
82
|
-
// json: { format: 'data', description: 'JavaScript Object Notation' },
|
|
83
|
-
// jsx: { format: 'code', description: 'JavaScript' },
|
|
84
|
-
// m2v: { format: 'video', description: 'Filmato SD' },
|
|
85
|
-
// mp2: { format: 'audio', description: 'Audio compresso' },
|
|
86
|
-
// mp3: { format: 'audio', description: 'Audio compresso' },
|
|
87
|
-
// mp4: { format: 'video', description: 'Filmato HD' },
|
|
88
|
-
// mp4v: { format: 'video', description: 'Filmato HD' },
|
|
89
|
-
// mpeg: { format: 'video', description: 'Filmato SD' },
|
|
90
|
-
// mpg4: { format: 'video', description: 'Filmato SD' },
|
|
91
|
-
// mpg: { format: 'video', description: 'Filmato SD' },
|
|
92
|
-
// mpga: { format: 'audio', description: 'Audio compresso' },
|
|
93
|
-
// odp: { format: 'slide', description: 'Slide di presentazione LibreOffice' },
|
|
94
|
-
// ods: { format: 'spreadsheet', description: 'Foglio di calcolo LibreOffice' },
|
|
95
|
-
// odt: { format: 'text', description: 'File di testo LibreOffice' },
|
|
96
|
-
// pdf: { format: 'document', description: 'Documento Adobe' },
|
|
97
|
-
// php: { format: 'code', description: 'Hypertext Preprocessor' },
|
|
98
|
-
// png: { format: 'image', description: 'Immagine Portable Network Graphics', preview: true },
|
|
99
|
-
// ppt: { format: 'slide', description: 'Slide di presentazione PowerPoint' },
|
|
100
|
-
// rar: { format: 'archive', description: 'Archivio compresso' },
|
|
101
|
-
// rtf: { format: 'text', description: 'Documento di testo Rich Text Format' },
|
|
102
|
-
// sass: { format: 'code', description: 'Syntactically Awesome StyleSheets' },
|
|
103
|
-
// shtml: { format: 'markup', description: 'Pagina web' },
|
|
104
|
-
// svg: { format: 'vector', description: 'Scalable Vector Graphics', preview: true },
|
|
105
|
-
// tar: { format: 'archive', description: 'Archivio non compresso' },
|
|
106
|
-
// tiff: { format: 'image', description: 'Tag Image File Format' },
|
|
107
|
-
// ts: { format: 'code', description: 'TypeScript' },
|
|
108
|
-
// tsx: { format: 'code', description: 'TypeScript Extended Syntax' },
|
|
109
|
-
// txt: { format: 'text', description: 'Documento di testo non formattato' },
|
|
110
|
-
// wav: { format: 'audio', description: 'Audio non compresso' },
|
|
111
|
-
// webp: { format: 'image', description: 'Immagine Web Picture', preview: true },
|
|
112
|
-
// xar: { format: 'archive', description: 'Archivio compresso' },
|
|
113
|
-
// xls: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
|
|
114
|
-
// xlsx: { format: 'spreadsheet', description: 'Foglio di calcolo Office' },
|
|
115
|
-
// zip: { format: 'archive', description: 'Archivio compresso' },
|
|
116
|
-
// }
|
|
117
64
|
const genericMimeToExt = new Map([
|
|
118
65
|
['image', ['.png', '.jpg', '.jpeg', '.tiff', '.webp', '.jpe', '.gif', '.heic']],
|
|
119
66
|
['audio', ['.mp2', '.mp3', '.mpga', '.wav', '.flac']],
|
|
@@ -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, };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
const treeActionsDictionary = [
|
|
2
|
+
'auto',
|
|
3
|
+
'visible',
|
|
4
|
+
];
|
|
5
|
+
const treeAppearanceDictionary = [
|
|
6
|
+
'depth',
|
|
7
|
+
'none',
|
|
8
|
+
];
|
|
9
|
+
const treeIconDictionary = [
|
|
10
|
+
'folder',
|
|
11
|
+
'chevron',
|
|
12
|
+
];
|
|
13
|
+
export { treeActionsDictionary, treeAppearanceDictionary, treeIconDictionary, };
|