@maggioli-design-system/mds-paginator-item 2.1.1 → 2.2.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-3ffc30c3.js → index-969219be.js} +2 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/mds-paginator-item.cjs.entry.js +59 -4
- package/dist/cjs/mds-paginator-item.cjs.js +2 -2
- package/dist/collection/common/keyboard-manager.js +40 -0
- package/dist/collection/components/mds-paginator-item/mds-paginator-item.css +37 -25
- package/dist/collection/components/mds-paginator-item/mds-paginator-item.js +19 -3
- package/dist/collection/dictionary/typography.js +5 -1
- package/dist/components/mds-paginator-item.js +59 -4
- package/dist/esm/{index-d196ebae.js → index-43abfe8a.js} +2 -1
- package/dist/esm/loader.js +3 -3
- package/dist/esm/mds-paginator-item.entry.js +59 -4
- package/dist/esm/mds-paginator-item.js +3 -3
- package/dist/esm-es5/index-43abfe8a.js +2 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/mds-paginator-item.entry.js +1 -1
- package/dist/esm-es5/mds-paginator-item.js +1 -1
- package/dist/mds-paginator-item/mds-paginator-item.esm.js +1 -1
- package/dist/mds-paginator-item/mds-paginator-item.js +1 -1
- package/dist/mds-paginator-item/p-043d636e.system.js +1 -0
- package/dist/mds-paginator-item/p-545e4388.system.js +2 -0
- package/dist/mds-paginator-item/p-632f225a.system.entry.js +1 -0
- package/dist/mds-paginator-item/p-6f0a5176.entry.js +1 -0
- package/dist/mds-paginator-item/p-cd35cb31.js +2 -0
- package/dist/stats.json +39 -36
- package/dist/types/common/keyboard-manager.d.ts +11 -0
- package/dist/types/dictionary/typography.d.ts +2 -1
- package/dist/types/types/typography.d.ts +1 -0
- package/package.json +3 -3
- package/src/common/keyboard-manager.ts +46 -0
- package/src/components/mds-paginator-item/mds-paginator-item.css +16 -3
- package/src/components/mds-paginator-item/mds-paginator-item.tsx +25 -8
- package/src/dictionary/typography.ts +9 -3
- package/src/fixtures/icons.json +1 -0
- package/src/tailwind/components.css +1 -0
- package/src/types/typography.ts +4 -0
- package/www/build/mds-paginator-item.esm.js +1 -1
- package/www/build/mds-paginator-item.js +1 -1
- package/www/build/p-043d636e.system.js +1 -0
- package/www/build/p-545e4388.system.js +2 -0
- package/www/build/p-632f225a.system.entry.js +1 -0
- package/www/build/p-6f0a5176.entry.js +1 -0
- package/www/build/p-cd35cb31.js +2 -0
- package/dist/esm-es5/index-d196ebae.js +0 -2
- package/dist/mds-paginator-item/p-308f54f9.entry.js +0 -1
- package/dist/mds-paginator-item/p-3174ae8b.js +0 -2
- package/dist/mds-paginator-item/p-711f7cb4.system.js +0 -1
- package/dist/mds-paginator-item/p-8a518aac.system.entry.js +0 -1
- package/dist/mds-paginator-item/p-bad78d87.system.js +0 -2
- package/dist/types/components/mds-paginator-item/mds-paginator-item.d.ts +0 -15
- package/www/build/p-308f54f9.entry.js +0 -1
- package/www/build/p-3174ae8b.js +0 -2
- package/www/build/p-711f7cb4.system.js +0 -1
- package/www/build/p-8a518aac.system.entry.js +0 -1
- package/www/build/p-bad78d87.system.js +0 -2
|
@@ -205,6 +205,7 @@ const parsePropertyValue = (propValue, propType) => {
|
|
|
205
205
|
// so no need to change to a different type
|
|
206
206
|
return propValue;
|
|
207
207
|
};
|
|
208
|
+
const getElement = (ref) => (getHostRef(ref).$hostElement$ );
|
|
208
209
|
/**
|
|
209
210
|
* Helper function to create & dispatch a custom Event on a provided target
|
|
210
211
|
* @param elm the target of the Event
|
|
@@ -1345,6 +1346,7 @@ const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
|
|
|
1345
1346
|
|
|
1346
1347
|
exports.Host = Host;
|
|
1347
1348
|
exports.bootstrapLazy = bootstrapLazy;
|
|
1349
|
+
exports.getElement = getElement;
|
|
1348
1350
|
exports.h = h;
|
|
1349
1351
|
exports.promiseResolve = promiseResolve;
|
|
1350
1352
|
exports.registerInstance = registerInstance;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-969219be.js');
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
8
|
Stencil Client Patch Esm v2.22.2 | MIT Licensed | https://stenciljs.com
|
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["mds-paginator-item.cjs",[[1,"mds-paginator-item",{"icon":[
|
|
17
|
+
return index.bootstrapLazy([["mds-paginator-item.cjs",[[1,"mds-paginator-item",{"icon":[513],"active":[516],"disabled":[516]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -2,24 +2,79 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-969219be.js');
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
class KeyboardManager {
|
|
8
|
+
constructor() {
|
|
9
|
+
this.elements = [];
|
|
10
|
+
this.handleClickBehaviorDispatchEvent = (event) => {
|
|
11
|
+
if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
|
|
12
|
+
event.target.click();
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
this.handleEscapeBehaviorDispatchEvent = (event) => {
|
|
16
|
+
if (event.code === 'Escape' && this.escapeCallback) {
|
|
17
|
+
this.escapeCallback();
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
this.addElement = (el, name = 'element') => {
|
|
21
|
+
this.elements[name] = el;
|
|
22
|
+
};
|
|
23
|
+
this.attachClickBehavior = (name = 'element') => {
|
|
24
|
+
if (this.elements[name]) {
|
|
25
|
+
this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
this.detachClickBehavior = (name = 'element') => {
|
|
29
|
+
if (this.elements[name]) {
|
|
30
|
+
this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
this.attachEscapeBehavior = (callBack) => {
|
|
34
|
+
this.escapeCallback = callBack;
|
|
35
|
+
if (typeof window !== undefined) {
|
|
36
|
+
window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
this.detachEscapeBehavior = () => {
|
|
40
|
+
this.escapeCallback = null;
|
|
41
|
+
if (typeof window !== undefined) {
|
|
42
|
+
window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
}
|
|
8
47
|
|
|
9
|
-
const mdsPaginatorItemCss = ".fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08));--mds-paginator-item-background-selected:rgb(var(--brand-maggioli-03));--mds-paginator-item-background:
|
|
48
|
+
const mdsPaginatorItemCss = "@tailwind components; .fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08));--mds-paginator-item-background-selected:rgb(var(--brand-maggioli-03));--mds-paginator-item-background:transparent;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02));--mds-paginator-item-color-selected:rgb(var(--tone-neutral));--mds-paginator-item-color:rgb(var(--tone-neutral-02));--mds-paginator-item-radius:200px;--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:0 0 1px 1px rgba(0, 0, 0, 0.06), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--mds-paginator-item-shadow:none;--mds-paginator-item-size:2.25rem;outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-left:0.75rem;padding-right:0.75rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);background-color:var(--mds-paginator-item-background);border-radius:var(--mds-paginator-item-radius);-webkit-box-shadow:var(--mds-paginator-item-shadow);box-shadow:var(--mds-paginator-item-shadow);color:var(--mds-paginator-item-color);height:var(--mds-paginator-item-size);min-width:var(--mds-paginator-item-size);-webkit-transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, box-shadow, color, outline, outline-offset;transition-property:background-color, box-shadow, color, outline, outline-offset, -webkit-box-shadow}:host(:focus-visible){--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}:host(:hover){background-color:var(--mds-paginator-item-background-hover);-webkit-box-shadow:var(--mds-paginator-item-shadow-hover);box-shadow:var(--mds-paginator-item-shadow-hover);color:var(--mds-paginator-item-color-hover);fill:var(--mds-paginator-item-color-hover)}:host([icon]){padding:0px}:host([active]){pointer-events:none;background-color:var(--mds-paginator-item-background-selected);-webkit-box-shadow:var(--mds-paginator-item-shadow-selected);box-shadow:var(--mds-paginator-item-shadow-selected);color:var(--mds-paginator-item-color-selected);fill:var(--mds-paginator-item-color-selected)}:host([disabled]){pointer-events:none;background-color:var(--mds-paginator-item-background-disabled);-webkit-box-shadow:var(--mds-paginator-item-shadow-disabled);box-shadow:var(--mds-paginator-item-shadow-disabled);color:var(--mds-paginator-item-color-disabled);fill:var(--mds-paginator-item-color-disabled)}.icon{padding-left:0px;padding-right:0px}";
|
|
10
49
|
|
|
11
50
|
const MdsPaginatorItem = class {
|
|
12
51
|
constructor(hostRef) {
|
|
13
52
|
index.registerInstance(this, hostRef);
|
|
53
|
+
this.km = new KeyboardManager();
|
|
54
|
+
this.componentDidLoad = () => {
|
|
55
|
+
this.km.addElement(this.host);
|
|
56
|
+
this.km.attachClickBehavior();
|
|
57
|
+
};
|
|
58
|
+
this.componentDidUpdate = () => {
|
|
59
|
+
if (!this.disabled && !this.active) {
|
|
60
|
+
this.km.attachClickBehavior();
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
this.km.detachClickBehavior();
|
|
64
|
+
};
|
|
65
|
+
this.disconnectedCallback = () => {
|
|
66
|
+
this.km.detachClickBehavior();
|
|
67
|
+
};
|
|
14
68
|
this.icon = undefined;
|
|
15
69
|
this.active = undefined;
|
|
16
70
|
this.disabled = undefined;
|
|
17
71
|
}
|
|
18
72
|
render() {
|
|
19
|
-
return (index.h(index.Host, {
|
|
73
|
+
return (index.h(index.Host, { tabindex: "0" }, this.icon !== undefined
|
|
20
74
|
? index.h("mds-icon", { name: this.icon })
|
|
21
75
|
: index.h("mds-text", { class: "text", typography: "detail" }, index.h("slot", null))));
|
|
22
76
|
}
|
|
77
|
+
get host() { return index.getElement(this); }
|
|
23
78
|
};
|
|
24
79
|
MdsPaginatorItem.style = mdsPaginatorItemCss;
|
|
25
80
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-969219be.js');
|
|
6
6
|
|
|
7
7
|
/*
|
|
8
8
|
Stencil Client Patch Browser v2.22.2 | MIT Licensed | https://stenciljs.com
|
|
@@ -17,7 +17,7 @@ const patchBrowser = () => {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(options => {
|
|
20
|
-
return index.bootstrapLazy([["mds-paginator-item.cjs",[[1,"mds-paginator-item",{"icon":[
|
|
20
|
+
return index.bootstrapLazy([["mds-paginator-item.cjs",[[1,"mds-paginator-item",{"icon":[513],"active":[516],"disabled":[516]}]]]], options);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
exports.setNonce = index.setNonce;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
export class KeyboardManager {
|
|
2
|
+
constructor() {
|
|
3
|
+
this.elements = [];
|
|
4
|
+
this.handleClickBehaviorDispatchEvent = (event) => {
|
|
5
|
+
if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
|
|
6
|
+
event.target.click();
|
|
7
|
+
}
|
|
8
|
+
};
|
|
9
|
+
this.handleEscapeBehaviorDispatchEvent = (event) => {
|
|
10
|
+
if (event.code === 'Escape' && this.escapeCallback) {
|
|
11
|
+
this.escapeCallback();
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
this.addElement = (el, name = 'element') => {
|
|
15
|
+
this.elements[name] = el;
|
|
16
|
+
};
|
|
17
|
+
this.attachClickBehavior = (name = 'element') => {
|
|
18
|
+
if (this.elements[name]) {
|
|
19
|
+
this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
this.detachClickBehavior = (name = 'element') => {
|
|
23
|
+
if (this.elements[name]) {
|
|
24
|
+
this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
this.attachEscapeBehavior = (callBack) => {
|
|
28
|
+
this.escapeCallback = callBack;
|
|
29
|
+
if (typeof window !== undefined) {
|
|
30
|
+
window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
this.detachEscapeBehavior = () => {
|
|
34
|
+
this.escapeCallback = null;
|
|
35
|
+
if (typeof window !== undefined) {
|
|
36
|
+
window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -1,19 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
@tailwind components;
|
|
2
|
+
.fixed{
|
|
2
3
|
|
|
3
4
|
position: fixed;
|
|
4
5
|
}
|
|
5
|
-
|
|
6
|
-
.absolute {
|
|
6
|
+
.absolute{
|
|
7
7
|
|
|
8
8
|
position: absolute;
|
|
9
9
|
}
|
|
10
|
-
|
|
11
|
-
.border {
|
|
10
|
+
.border{
|
|
12
11
|
|
|
13
12
|
border-width: 1px;
|
|
14
13
|
}
|
|
15
|
-
|
|
16
|
-
.shadow {
|
|
14
|
+
.shadow{
|
|
17
15
|
|
|
18
16
|
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
19
17
|
|
|
@@ -44,7 +42,7 @@
|
|
|
44
42
|
--mds-paginator-item-background-disabled: rgb(var(--tone-neutral-09));
|
|
45
43
|
--mds-paginator-item-background-hover: rgb(var(--tone-neutral-08));
|
|
46
44
|
--mds-paginator-item-background-selected: rgb(var(--brand-maggioli-03));
|
|
47
|
-
--mds-paginator-item-background:
|
|
45
|
+
--mds-paginator-item-background: transparent;
|
|
48
46
|
--mds-paginator-item-color-disabled: rgb(var(--tone-neutral-06));
|
|
49
47
|
--mds-paginator-item-color-hover: rgb(var(--tone-neutral-02));
|
|
50
48
|
--mds-paginator-item-color-selected: rgb(var(--tone-neutral));
|
|
@@ -55,20 +53,23 @@
|
|
|
55
53
|
--mds-paginator-item-shadow-selected: 0 0 1px 1px rgba(0, 0, 0, 0.06), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
56
54
|
--mds-paginator-item-shadow: none;
|
|
57
55
|
--mds-paginator-item-size: 2.25rem;
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
56
|
+
|
|
57
|
+
outline-offset: var(--magma-outline-blur-offset);
|
|
58
|
+
outline: var(--magma-outline-blur);
|
|
59
|
+
transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;
|
|
60
|
+
box-sizing: border-box;
|
|
61
|
+
display: inline-flex;
|
|
62
|
+
flex-shrink: 0;
|
|
63
|
+
cursor: pointer;
|
|
64
|
+
-webkit-user-select: none;
|
|
65
|
+
-moz-user-select: none;
|
|
66
|
+
user-select: none;
|
|
67
|
+
align-items: center;
|
|
68
|
+
justify-content: center;
|
|
69
|
+
padding-left: 0.75rem;
|
|
70
|
+
padding-right: 0.75rem;
|
|
71
|
+
transition-duration: 200ms;
|
|
72
|
+
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
72
73
|
|
|
73
74
|
background-color: var(--mds-paginator-item-background);
|
|
74
75
|
border-radius: var(--mds-paginator-item-radius);
|
|
@@ -76,8 +77,14 @@
|
|
|
76
77
|
color: var(--mds-paginator-item-color);
|
|
77
78
|
height: var(--mds-paginator-item-size);
|
|
78
79
|
min-width: var(--mds-paginator-item-size);
|
|
80
|
+
transition-property: background-color, box-shadow, color, outline, outline-offset;
|
|
79
81
|
}
|
|
80
82
|
|
|
83
|
+
:host( :focus-visible ) {
|
|
84
|
+
--magma-outline-blur-offset: var(--magma-outline-focus-offset);
|
|
85
|
+
--magma-outline-blur: var(--magma-outline-focus);
|
|
86
|
+
}
|
|
87
|
+
|
|
81
88
|
:host( :hover ) {
|
|
82
89
|
background-color: var(--mds-paginator-item-background-hover);
|
|
83
90
|
box-shadow: var(--mds-paginator-item-shadow-hover);
|
|
@@ -85,7 +92,12 @@
|
|
|
85
92
|
fill: var(--mds-paginator-item-color-hover);
|
|
86
93
|
}
|
|
87
94
|
|
|
88
|
-
:host ( [
|
|
95
|
+
:host ( [icon]){
|
|
96
|
+
|
|
97
|
+
padding: 0px;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
:host ( [active]){
|
|
89
101
|
|
|
90
102
|
pointer-events: none;
|
|
91
103
|
|
|
@@ -95,7 +107,7 @@
|
|
|
95
107
|
fill: var(--mds-paginator-item-color-selected);
|
|
96
108
|
}
|
|
97
109
|
|
|
98
|
-
:host ( [disabled])
|
|
110
|
+
:host ( [disabled]){
|
|
99
111
|
|
|
100
112
|
pointer-events: none;
|
|
101
113
|
|
|
@@ -105,7 +117,7 @@
|
|
|
105
117
|
fill: var(--mds-paginator-item-color-disabled);
|
|
106
118
|
}
|
|
107
119
|
|
|
108
|
-
.icon
|
|
120
|
+
.icon{
|
|
109
121
|
|
|
110
122
|
padding-left: 0px;
|
|
111
123
|
|
|
@@ -1,13 +1,28 @@
|
|
|
1
1
|
import { Host, h } from '@stencil/core';
|
|
2
|
-
import
|
|
2
|
+
import { KeyboardManager } from '@common/keyboard-manager';
|
|
3
3
|
export class MdsPaginatorItem {
|
|
4
4
|
constructor() {
|
|
5
|
+
this.km = new KeyboardManager();
|
|
6
|
+
this.componentDidLoad = () => {
|
|
7
|
+
this.km.addElement(this.host);
|
|
8
|
+
this.km.attachClickBehavior();
|
|
9
|
+
};
|
|
10
|
+
this.componentDidUpdate = () => {
|
|
11
|
+
if (!this.disabled && !this.active) {
|
|
12
|
+
this.km.attachClickBehavior();
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
this.km.detachClickBehavior();
|
|
16
|
+
};
|
|
17
|
+
this.disconnectedCallback = () => {
|
|
18
|
+
this.km.detachClickBehavior();
|
|
19
|
+
};
|
|
5
20
|
this.icon = undefined;
|
|
6
21
|
this.active = undefined;
|
|
7
22
|
this.disabled = undefined;
|
|
8
23
|
}
|
|
9
24
|
render() {
|
|
10
|
-
return (h(Host, {
|
|
25
|
+
return (h(Host, { tabindex: "0" }, this.icon !== undefined
|
|
11
26
|
? h("mds-icon", { name: this.icon })
|
|
12
27
|
: h("mds-text", { class: "text", typography: "detail" }, h("slot", null))));
|
|
13
28
|
}
|
|
@@ -40,7 +55,7 @@ export class MdsPaginatorItem {
|
|
|
40
55
|
"text": "Specifies the icon used inside the paginator item"
|
|
41
56
|
},
|
|
42
57
|
"attribute": "icon",
|
|
43
|
-
"reflect":
|
|
58
|
+
"reflect": true
|
|
44
59
|
},
|
|
45
60
|
"active": {
|
|
46
61
|
"type": "boolean",
|
|
@@ -78,4 +93,5 @@ export class MdsPaginatorItem {
|
|
|
78
93
|
}
|
|
79
94
|
};
|
|
80
95
|
}
|
|
96
|
+
static get elementRef() { return "host"; }
|
|
81
97
|
}
|
|
@@ -21,6 +21,10 @@ const typographyVariationsDictionary = [
|
|
|
21
21
|
'read',
|
|
22
22
|
'code',
|
|
23
23
|
];
|
|
24
|
+
const typographyReadingVariationsDictionary = [
|
|
25
|
+
'info',
|
|
26
|
+
'read',
|
|
27
|
+
];
|
|
24
28
|
const typographyMonoDictionary = [
|
|
25
29
|
'snippet',
|
|
26
30
|
'hack',
|
|
@@ -56,4 +60,4 @@ const typographyTooltipDictionary = [
|
|
|
56
60
|
'detail',
|
|
57
61
|
'tip',
|
|
58
62
|
];
|
|
59
|
-
export { typographyDictionary,
|
|
63
|
+
export { typographyDictionary, typographyInfoDictionary, typographyReadingVariationsDictionary, typographyMonoDictionary, typographyReadDictionary, typographySmallerDictionary, typographyTitleDictionary, typographyTooltipDictionary, typographyVariationsDictionary, };
|
|
@@ -1,26 +1,81 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
class KeyboardManager {
|
|
4
|
+
constructor() {
|
|
5
|
+
this.elements = [];
|
|
6
|
+
this.handleClickBehaviorDispatchEvent = (event) => {
|
|
7
|
+
if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
|
|
8
|
+
event.target.click();
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
this.handleEscapeBehaviorDispatchEvent = (event) => {
|
|
12
|
+
if (event.code === 'Escape' && this.escapeCallback) {
|
|
13
|
+
this.escapeCallback();
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
this.addElement = (el, name = 'element') => {
|
|
17
|
+
this.elements[name] = el;
|
|
18
|
+
};
|
|
19
|
+
this.attachClickBehavior = (name = 'element') => {
|
|
20
|
+
if (this.elements[name]) {
|
|
21
|
+
this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
this.detachClickBehavior = (name = 'element') => {
|
|
25
|
+
if (this.elements[name]) {
|
|
26
|
+
this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
this.attachEscapeBehavior = (callBack) => {
|
|
30
|
+
this.escapeCallback = callBack;
|
|
31
|
+
if (typeof window !== undefined) {
|
|
32
|
+
window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
this.detachEscapeBehavior = () => {
|
|
36
|
+
this.escapeCallback = null;
|
|
37
|
+
if (typeof window !== undefined) {
|
|
38
|
+
window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
}
|
|
4
43
|
|
|
5
|
-
const mdsPaginatorItemCss = ".fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08));--mds-paginator-item-background-selected:rgb(var(--brand-maggioli-03));--mds-paginator-item-background:
|
|
44
|
+
const mdsPaginatorItemCss = "@tailwind components; .fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08));--mds-paginator-item-background-selected:rgb(var(--brand-maggioli-03));--mds-paginator-item-background:transparent;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02));--mds-paginator-item-color-selected:rgb(var(--tone-neutral));--mds-paginator-item-color:rgb(var(--tone-neutral-02));--mds-paginator-item-radius:200px;--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:0 0 1px 1px rgba(0, 0, 0, 0.06), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--mds-paginator-item-shadow:none;--mds-paginator-item-size:2.25rem;outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-left:0.75rem;padding-right:0.75rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);background-color:var(--mds-paginator-item-background);border-radius:var(--mds-paginator-item-radius);-webkit-box-shadow:var(--mds-paginator-item-shadow);box-shadow:var(--mds-paginator-item-shadow);color:var(--mds-paginator-item-color);height:var(--mds-paginator-item-size);min-width:var(--mds-paginator-item-size);-webkit-transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, box-shadow, color, outline, outline-offset;transition-property:background-color, box-shadow, color, outline, outline-offset, -webkit-box-shadow}:host(:focus-visible){--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}:host(:hover){background-color:var(--mds-paginator-item-background-hover);-webkit-box-shadow:var(--mds-paginator-item-shadow-hover);box-shadow:var(--mds-paginator-item-shadow-hover);color:var(--mds-paginator-item-color-hover);fill:var(--mds-paginator-item-color-hover)}:host([icon]){padding:0px}:host([active]){pointer-events:none;background-color:var(--mds-paginator-item-background-selected);-webkit-box-shadow:var(--mds-paginator-item-shadow-selected);box-shadow:var(--mds-paginator-item-shadow-selected);color:var(--mds-paginator-item-color-selected);fill:var(--mds-paginator-item-color-selected)}:host([disabled]){pointer-events:none;background-color:var(--mds-paginator-item-background-disabled);-webkit-box-shadow:var(--mds-paginator-item-shadow-disabled);box-shadow:var(--mds-paginator-item-shadow-disabled);color:var(--mds-paginator-item-color-disabled);fill:var(--mds-paginator-item-color-disabled)}.icon{padding-left:0px;padding-right:0px}";
|
|
6
45
|
|
|
7
46
|
const MdsPaginatorItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
8
47
|
constructor() {
|
|
9
48
|
super();
|
|
10
49
|
this.__registerHost();
|
|
11
50
|
this.__attachShadow();
|
|
51
|
+
this.km = new KeyboardManager();
|
|
52
|
+
this.componentDidLoad = () => {
|
|
53
|
+
this.km.addElement(this.host);
|
|
54
|
+
this.km.attachClickBehavior();
|
|
55
|
+
};
|
|
56
|
+
this.componentDidUpdate = () => {
|
|
57
|
+
if (!this.disabled && !this.active) {
|
|
58
|
+
this.km.attachClickBehavior();
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
this.km.detachClickBehavior();
|
|
62
|
+
};
|
|
63
|
+
this.disconnectedCallback = () => {
|
|
64
|
+
this.km.detachClickBehavior();
|
|
65
|
+
};
|
|
12
66
|
this.icon = undefined;
|
|
13
67
|
this.active = undefined;
|
|
14
68
|
this.disabled = undefined;
|
|
15
69
|
}
|
|
16
70
|
render() {
|
|
17
|
-
return (h(Host, {
|
|
71
|
+
return (h(Host, { tabindex: "0" }, this.icon !== undefined
|
|
18
72
|
? h("mds-icon", { name: this.icon })
|
|
19
73
|
: h("mds-text", { class: "text", typography: "detail" }, h("slot", null))));
|
|
20
74
|
}
|
|
75
|
+
get host() { return this; }
|
|
21
76
|
static get style() { return mdsPaginatorItemCss; }
|
|
22
77
|
}, [1, "mds-paginator-item", {
|
|
23
|
-
"icon": [
|
|
78
|
+
"icon": [513],
|
|
24
79
|
"active": [516],
|
|
25
80
|
"disabled": [516]
|
|
26
81
|
}]);
|
|
@@ -183,6 +183,7 @@ const parsePropertyValue = (propValue, propType) => {
|
|
|
183
183
|
// so no need to change to a different type
|
|
184
184
|
return propValue;
|
|
185
185
|
};
|
|
186
|
+
const getElement = (ref) => (getHostRef(ref).$hostElement$ );
|
|
186
187
|
/**
|
|
187
188
|
* Helper function to create & dispatch a custom Event on a provided target
|
|
188
189
|
* @param elm the target of the Event
|
|
@@ -1321,4 +1322,4 @@ const flush = () => {
|
|
|
1321
1322
|
const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
|
|
1322
1323
|
const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
|
|
1323
1324
|
|
|
1324
|
-
export { Host as H, bootstrapLazy as b, h, promiseResolve as p, registerInstance as r, setNonce as s };
|
|
1325
|
+
export { Host as H, bootstrapLazy as b, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
|
package/dist/esm/loader.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
|
2
|
-
export { s as setNonce } from './index-
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-43abfe8a.js';
|
|
2
|
+
export { s as setNonce } from './index-43abfe8a.js';
|
|
3
3
|
|
|
4
4
|
/*
|
|
5
5
|
Stencil Client Patch Esm v2.22.2 | MIT Licensed | https://stenciljs.com
|
|
@@ -11,7 +11,7 @@ const patchEsm = () => {
|
|
|
11
11
|
const defineCustomElements = (win, options) => {
|
|
12
12
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
13
13
|
return patchEsm().then(() => {
|
|
14
|
-
return bootstrapLazy([["mds-paginator-item",[[1,"mds-paginator-item",{"icon":[
|
|
14
|
+
return bootstrapLazy([["mds-paginator-item",[[1,"mds-paginator-item",{"icon":[513],"active":[516],"disabled":[516]}]]]], options);
|
|
15
15
|
});
|
|
16
16
|
};
|
|
17
17
|
|
|
@@ -1,21 +1,76 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-
|
|
1
|
+
import { r as registerInstance, h, H as Host, g as getElement } from './index-43abfe8a.js';
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
class KeyboardManager {
|
|
4
|
+
constructor() {
|
|
5
|
+
this.elements = [];
|
|
6
|
+
this.handleClickBehaviorDispatchEvent = (event) => {
|
|
7
|
+
if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
|
|
8
|
+
event.target.click();
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
this.handleEscapeBehaviorDispatchEvent = (event) => {
|
|
12
|
+
if (event.code === 'Escape' && this.escapeCallback) {
|
|
13
|
+
this.escapeCallback();
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
this.addElement = (el, name = 'element') => {
|
|
17
|
+
this.elements[name] = el;
|
|
18
|
+
};
|
|
19
|
+
this.attachClickBehavior = (name = 'element') => {
|
|
20
|
+
if (this.elements[name]) {
|
|
21
|
+
this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
this.detachClickBehavior = (name = 'element') => {
|
|
25
|
+
if (this.elements[name]) {
|
|
26
|
+
this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
this.attachEscapeBehavior = (callBack) => {
|
|
30
|
+
this.escapeCallback = callBack;
|
|
31
|
+
if (typeof window !== undefined) {
|
|
32
|
+
window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
this.detachEscapeBehavior = () => {
|
|
36
|
+
this.escapeCallback = null;
|
|
37
|
+
if (typeof window !== undefined) {
|
|
38
|
+
window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
}
|
|
4
43
|
|
|
5
|
-
const mdsPaginatorItemCss = ".fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08));--mds-paginator-item-background-selected:rgb(var(--brand-maggioli-03));--mds-paginator-item-background:
|
|
44
|
+
const mdsPaginatorItemCss = "@tailwind components; .fixed{position:fixed}.absolute{position:absolute}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08));--mds-paginator-item-background-selected:rgb(var(--brand-maggioli-03));--mds-paginator-item-background:transparent;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02));--mds-paginator-item-color-selected:rgb(var(--tone-neutral));--mds-paginator-item-color:rgb(var(--tone-neutral-02));--mds-paginator-item-radius:200px;--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:0 0 1px 1px rgba(0, 0, 0, 0.06), 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--mds-paginator-item-shadow:none;--mds-paginator-item-size:2.25rem;outline-offset:var(--magma-outline-blur-offset);outline:var(--magma-outline-blur);-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-left:0.75rem;padding-right:0.75rem;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-timing-function:cubic-bezier(0, 0, 0.2, 1);background-color:var(--mds-paginator-item-background);border-radius:var(--mds-paginator-item-radius);-webkit-box-shadow:var(--mds-paginator-item-shadow);box-shadow:var(--mds-paginator-item-shadow);color:var(--mds-paginator-item-color);height:var(--mds-paginator-item-size);min-width:var(--mds-paginator-item-size);-webkit-transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, color, outline, outline-offset, -webkit-box-shadow;transition-property:background-color, box-shadow, color, outline, outline-offset;transition-property:background-color, box-shadow, color, outline, outline-offset, -webkit-box-shadow}:host(:focus-visible){--magma-outline-blur-offset:var(--magma-outline-focus-offset);--magma-outline-blur:var(--magma-outline-focus)}:host(:hover){background-color:var(--mds-paginator-item-background-hover);-webkit-box-shadow:var(--mds-paginator-item-shadow-hover);box-shadow:var(--mds-paginator-item-shadow-hover);color:var(--mds-paginator-item-color-hover);fill:var(--mds-paginator-item-color-hover)}:host([icon]){padding:0px}:host([active]){pointer-events:none;background-color:var(--mds-paginator-item-background-selected);-webkit-box-shadow:var(--mds-paginator-item-shadow-selected);box-shadow:var(--mds-paginator-item-shadow-selected);color:var(--mds-paginator-item-color-selected);fill:var(--mds-paginator-item-color-selected)}:host([disabled]){pointer-events:none;background-color:var(--mds-paginator-item-background-disabled);-webkit-box-shadow:var(--mds-paginator-item-shadow-disabled);box-shadow:var(--mds-paginator-item-shadow-disabled);color:var(--mds-paginator-item-color-disabled);fill:var(--mds-paginator-item-color-disabled)}.icon{padding-left:0px;padding-right:0px}";
|
|
6
45
|
|
|
7
46
|
const MdsPaginatorItem = class {
|
|
8
47
|
constructor(hostRef) {
|
|
9
48
|
registerInstance(this, hostRef);
|
|
49
|
+
this.km = new KeyboardManager();
|
|
50
|
+
this.componentDidLoad = () => {
|
|
51
|
+
this.km.addElement(this.host);
|
|
52
|
+
this.km.attachClickBehavior();
|
|
53
|
+
};
|
|
54
|
+
this.componentDidUpdate = () => {
|
|
55
|
+
if (!this.disabled && !this.active) {
|
|
56
|
+
this.km.attachClickBehavior();
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
this.km.detachClickBehavior();
|
|
60
|
+
};
|
|
61
|
+
this.disconnectedCallback = () => {
|
|
62
|
+
this.km.detachClickBehavior();
|
|
63
|
+
};
|
|
10
64
|
this.icon = undefined;
|
|
11
65
|
this.active = undefined;
|
|
12
66
|
this.disabled = undefined;
|
|
13
67
|
}
|
|
14
68
|
render() {
|
|
15
|
-
return (h(Host, {
|
|
69
|
+
return (h(Host, { tabindex: "0" }, this.icon !== undefined
|
|
16
70
|
? h("mds-icon", { name: this.icon })
|
|
17
71
|
: h("mds-text", { class: "text", typography: "detail" }, h("slot", null))));
|
|
18
72
|
}
|
|
73
|
+
get host() { return getElement(this); }
|
|
19
74
|
};
|
|
20
75
|
MdsPaginatorItem.style = mdsPaginatorItemCss;
|
|
21
76
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { p as promiseResolve, b as bootstrapLazy } from './index-
|
|
2
|
-
export { s as setNonce } from './index-
|
|
1
|
+
import { p as promiseResolve, b as bootstrapLazy } from './index-43abfe8a.js';
|
|
2
|
+
export { s as setNonce } from './index-43abfe8a.js';
|
|
3
3
|
|
|
4
4
|
/*
|
|
5
5
|
Stencil Client Patch Browser v2.22.2 | MIT Licensed | https://stenciljs.com
|
|
@@ -14,5 +14,5 @@ const patchBrowser = () => {
|
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
patchBrowser().then(options => {
|
|
17
|
-
return bootstrapLazy([["mds-paginator-item",[[1,"mds-paginator-item",{"icon":[
|
|
17
|
+
return bootstrapLazy([["mds-paginator-item",[[1,"mds-paginator-item",{"icon":[513],"active":[516],"disabled":[516]}]]]], options);
|
|
18
18
|
});
|