@limetech/lime-elements 33.14.0-next.16 → 33.14.0-next.17
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/limel-config.cjs.entry.js +3 -0
- package/dist/cjs/limel-list_2.cjs.entry.js +4 -17
- package/dist/cjs/limel-menu-list.cjs.entry.js +6 -28
- package/dist/collection/components/config/config.js +3 -0
- package/dist/collection/components/list/list-renderer.js +4 -17
- package/dist/collection/components/menu-list/menu-list-renderer.js +3 -11
- package/dist/collection/components/menu-list/menu-list.css +0 -30
- package/dist/collection/components/menu-list/menu-list.js +3 -17
- package/dist/esm/limel-config.entry.js +3 -0
- package/dist/esm/limel-list_2.entry.js +4 -17
- package/dist/esm/limel-menu-list.entry.js +7 -29
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-e332bcf4.entry.js → p-31fecf5d.entry.js} +1 -1
- package/dist/lime-elements/p-8d1ab246.entry.js +1 -0
- package/dist/lime-elements/p-df55ee67.entry.js +82 -0
- package/dist/types/components/list/list-renderer.d.ts +5 -6
- package/dist/types/components/menu/menu.types.d.ts +0 -5
- package/dist/types/components/menu-list/menu-list-renderer-config.d.ts +0 -1
- package/dist/types/components/menu-list/menu-list-renderer.d.ts +3 -4
- package/package.json +1 -1
- package/dist/lime-elements/p-590ef65e.entry.js +0 -1
- package/dist/lime-elements/p-dcad1b31.entry.js +0 -82
|
@@ -13,7 +13,7 @@ export class ListRenderer {
|
|
|
13
13
|
* Returns `undefined` if no item should have the attribute set.
|
|
14
14
|
* See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility
|
|
15
15
|
*
|
|
16
|
-
* @param {Array<ListItem | ListSeparator
|
|
16
|
+
* @param {Array<ListItem | ListSeparator>} items the items of the list, including any `ListSeparator`:s
|
|
17
17
|
* @returns {number} the index as per the description
|
|
18
18
|
*/
|
|
19
19
|
this.getIndexForWhichToApplyTabIndex = (items) => {
|
|
@@ -40,7 +40,7 @@ export class ListRenderer {
|
|
|
40
40
|
/**
|
|
41
41
|
* Render a single list item
|
|
42
42
|
*
|
|
43
|
-
* @param {ListItem | ListSeparator
|
|
43
|
+
* @param {ListItem | ListSeparator} item the item to render
|
|
44
44
|
* @param {number} index the index the item had in the `items` array
|
|
45
45
|
* @returns {HTMLElement} the list item
|
|
46
46
|
*/
|
|
@@ -69,7 +69,7 @@ export class ListRenderer {
|
|
|
69
69
|
/**
|
|
70
70
|
* Render the text of the list item
|
|
71
71
|
*
|
|
72
|
-
* @param {ListItem
|
|
72
|
+
* @param {ListItem} item the list item
|
|
73
73
|
* @returns {HTMLElement | string} the text for the list item
|
|
74
74
|
*/
|
|
75
75
|
this.renderText = (item) => {
|
|
@@ -78,20 +78,10 @@ export class ListRenderer {
|
|
|
78
78
|
}
|
|
79
79
|
return (h("div", { class: "mdc-deprecated-list-item__text" },
|
|
80
80
|
h("div", { class: "mdc-deprecated-list-item__primary-command-text" },
|
|
81
|
-
h("div", { class: "mdc-deprecated-list-item__primary-text" }, item.text),
|
|
82
|
-
this.renderCommandText(item)),
|
|
81
|
+
h("div", { class: "mdc-deprecated-list-item__primary-text" }, item.text)),
|
|
83
82
|
h("div", { class: "mdc-deprecated-list-item__secondary-text" }, item.secondaryText)));
|
|
84
83
|
};
|
|
85
|
-
this.renderCommandText = (item) => {
|
|
86
|
-
if (!('commandText' in item)) {
|
|
87
|
-
return;
|
|
88
|
-
}
|
|
89
|
-
return (h("div", { class: "mdc-deprecated-list-item__command-text" }, item.commandText));
|
|
90
|
-
};
|
|
91
84
|
this.isSimpleItem = (item) => {
|
|
92
|
-
if ('commandText' in item) {
|
|
93
|
-
return false;
|
|
94
|
-
}
|
|
95
85
|
if ('secondaryText' in item) {
|
|
96
86
|
return false;
|
|
97
87
|
}
|
|
@@ -172,9 +162,6 @@ export class ListRenderer {
|
|
|
172
162
|
this.twoLines = items.some((item) => {
|
|
173
163
|
return 'secondaryText' in item && !!item.secondaryText;
|
|
174
164
|
});
|
|
175
|
-
this.commandKey = items.some((item) => {
|
|
176
|
-
return 'commandText' in item && !!item.commandText;
|
|
177
|
-
});
|
|
178
165
|
this.hasIcons = items.some((item) => {
|
|
179
166
|
return 'icon' in item && !!item.icon;
|
|
180
167
|
});
|
|
@@ -11,7 +11,7 @@ export class MenuListRenderer {
|
|
|
11
11
|
* Returns `undefined` if no item should have the attribute set.
|
|
12
12
|
* See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility
|
|
13
13
|
*
|
|
14
|
-
* @param {Array<
|
|
14
|
+
* @param {Array<MenuItem | ListSeparator>} items the items of the list, including any `ListSeparator`:s
|
|
15
15
|
* @returns {number} the index as per the description
|
|
16
16
|
*/
|
|
17
17
|
this.getIndexForWhichToApplyTabIndex = (items) => {
|
|
@@ -38,7 +38,7 @@ export class MenuListRenderer {
|
|
|
38
38
|
/**
|
|
39
39
|
* Render a single list item
|
|
40
40
|
*
|
|
41
|
-
* @param {
|
|
41
|
+
* @param {MenuItem | ListSeparator} item the item to render
|
|
42
42
|
* @param {number} index the index the item had in the `items` array
|
|
43
43
|
* @returns {HTMLElement} the list item
|
|
44
44
|
*/
|
|
@@ -58,8 +58,7 @@ export class MenuListRenderer {
|
|
|
58
58
|
return (h("li", Object.assign({ class: classNames, role: "menuitem", "aria-disabled": item.disabled ? 'true' : 'false', "aria-selected": item.selected ? 'true' : 'false', "data-index": index }, attributes),
|
|
59
59
|
item.icon ? this.renderIcon(this.config, item) : null,
|
|
60
60
|
this.renderText(item),
|
|
61
|
-
this.twoLines && this.avatarList ? this.renderDivider() : null
|
|
62
|
-
this.renderActionMenu(item.actions)));
|
|
61
|
+
this.twoLines && this.avatarList ? this.renderDivider() : null));
|
|
63
62
|
};
|
|
64
63
|
/**
|
|
65
64
|
* Render the text of the list item
|
|
@@ -121,13 +120,6 @@ export class MenuListRenderer {
|
|
|
121
120
|
}
|
|
122
121
|
return h("hr", { class: classes });
|
|
123
122
|
};
|
|
124
|
-
this.renderActionMenu = (actions) => {
|
|
125
|
-
if (!actions || actions.length === 0) {
|
|
126
|
-
return;
|
|
127
|
-
}
|
|
128
|
-
return (h("limel-menu", { class: "mdc-deprecated-list-item__meta", items: actions, openDirection: "left" },
|
|
129
|
-
h("limel-icon", { slot: "trigger", name: "menu_2", size: "small" })));
|
|
130
|
-
};
|
|
131
123
|
}
|
|
132
124
|
render(items, config = {}) {
|
|
133
125
|
items = items || [];
|
|
@@ -3364,34 +3364,4 @@ a.mdc-list-item {
|
|
|
3364
3364
|
:host(.has-grid-layout) .mdc-deprecated-list--avatar-list limel-icon {
|
|
3365
3365
|
margin-right: 0.25rem;
|
|
3366
3366
|
margin-left: -0.5rem;
|
|
3367
|
-
}
|
|
3368
|
-
|
|
3369
|
-
:host(.static-actions-list) {
|
|
3370
|
-
z-index: 1;
|
|
3371
|
-
background-color: var(--mdc-theme-surface);
|
|
3372
|
-
}
|
|
3373
|
-
|
|
3374
|
-
:host(.has-position-sticky) {
|
|
3375
|
-
position: sticky;
|
|
3376
|
-
box-shadow: 0 0 0.75rem 0.5rem var(--mdc-theme-surface);
|
|
3377
|
-
}
|
|
3378
|
-
|
|
3379
|
-
:host(.has-position-sticky.is-on-top) {
|
|
3380
|
-
top: 0;
|
|
3381
|
-
}
|
|
3382
|
-
|
|
3383
|
-
:host(.has-position-sticky.is-at-bottom) {
|
|
3384
|
-
bottom: 0;
|
|
3385
|
-
}
|
|
3386
|
-
|
|
3387
|
-
:host(.is-on-top) {
|
|
3388
|
-
border-bottom: 1px solid rgb(var(--contrast-400));
|
|
3389
|
-
margin-bottom: 0.5rem;
|
|
3390
|
-
padding-bottom: 0.25rem;
|
|
3391
|
-
}
|
|
3392
|
-
|
|
3393
|
-
:host(.is-at-bottom) {
|
|
3394
|
-
border-top: 1px solid rgb(var(--contrast-400));
|
|
3395
|
-
margin-top: 0.5rem;
|
|
3396
|
-
padding-top: 0.25rem;
|
|
3397
3367
|
}
|
|
@@ -2,7 +2,7 @@ import { MDCMenu } from '@material/menu';
|
|
|
2
2
|
import { MDCRipple } from '@material/ripple';
|
|
3
3
|
import { strings as listStrings } from '@material/list/constants';
|
|
4
4
|
import { strings as menuStrings } from '@material/menu/constants';
|
|
5
|
-
import { Component, Element, Event, h,
|
|
5
|
+
import { Component, Element, Event, h, Prop, Watch, } from '@stencil/core';
|
|
6
6
|
import { MenuListRenderer } from './menu-list-renderer';
|
|
7
7
|
const { ACTION_EVENT } = listStrings;
|
|
8
8
|
const { SELECTED_EVENT } = menuStrings;
|
|
@@ -70,11 +70,7 @@ export class MenuList {
|
|
|
70
70
|
this.change.emit(Object.assign(Object.assign({}, selectedItem), { selected: false }));
|
|
71
71
|
}
|
|
72
72
|
if (MenuItems[index] !== selectedItem) {
|
|
73
|
-
|
|
74
|
-
this.change.emit(Object.assign(Object.assign({}, MenuItems[index]), { selected: false }));
|
|
75
|
-
return;
|
|
76
|
-
}
|
|
77
|
-
this.change.emit(Object.assign(Object.assign({}, MenuItems[index]), { selected: true }));
|
|
73
|
+
this.change.emit(Object.assign(Object.assign({}, MenuItems[index]), { selected: false }));
|
|
78
74
|
}
|
|
79
75
|
};
|
|
80
76
|
this.isMenuItem = (item) => {
|
|
@@ -91,23 +87,13 @@ export class MenuList {
|
|
|
91
87
|
this.setup();
|
|
92
88
|
}
|
|
93
89
|
render() {
|
|
94
|
-
var _a;
|
|
95
90
|
this.config = {
|
|
96
91
|
badgeIcons: this.badgeIcons,
|
|
97
92
|
type: this.type,
|
|
98
93
|
iconSize: this.iconSize,
|
|
99
94
|
};
|
|
100
|
-
let maxLinesSecondaryText = +((_a = this.maxLinesSecondaryText) === null || _a === void 0 ? void 0 : _a.toFixed());
|
|
101
|
-
if (this.maxLinesSecondaryText < 1) {
|
|
102
|
-
maxLinesSecondaryText = 1;
|
|
103
|
-
}
|
|
104
95
|
const html = this.MenuListRenderer.render(this.items, this.config);
|
|
105
|
-
|
|
106
|
-
return h("div", { class: "mdc-menu mdc-menu-surface" }, html);
|
|
107
|
-
}
|
|
108
|
-
return (h(Host, { style: {
|
|
109
|
-
'--maxLinesSecondaryText': `${maxLinesSecondaryText}`,
|
|
110
|
-
} }, html));
|
|
96
|
+
return h("div", { class: "mdc-menu mdc-menu-surface" }, html);
|
|
111
97
|
}
|
|
112
98
|
handleType() {
|
|
113
99
|
this.setupListeners();
|
|
@@ -34,7 +34,7 @@ class ListRenderer {
|
|
|
34
34
|
* Returns `undefined` if no item should have the attribute set.
|
|
35
35
|
* See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility
|
|
36
36
|
*
|
|
37
|
-
* @param {Array<ListItem | ListSeparator
|
|
37
|
+
* @param {Array<ListItem | ListSeparator>} items the items of the list, including any `ListSeparator`:s
|
|
38
38
|
* @returns {number} the index as per the description
|
|
39
39
|
*/
|
|
40
40
|
this.getIndexForWhichToApplyTabIndex = (items) => {
|
|
@@ -59,7 +59,7 @@ class ListRenderer {
|
|
|
59
59
|
/**
|
|
60
60
|
* Render a single list item
|
|
61
61
|
*
|
|
62
|
-
* @param {ListItem | ListSeparator
|
|
62
|
+
* @param {ListItem | ListSeparator} item the item to render
|
|
63
63
|
* @param {number} index the index the item had in the `items` array
|
|
64
64
|
* @returns {HTMLElement} the list item
|
|
65
65
|
*/
|
|
@@ -88,7 +88,7 @@ class ListRenderer {
|
|
|
88
88
|
/**
|
|
89
89
|
* Render the text of the list item
|
|
90
90
|
*
|
|
91
|
-
* @param {ListItem
|
|
91
|
+
* @param {ListItem} item the list item
|
|
92
92
|
* @returns {HTMLElement | string} the text for the list item
|
|
93
93
|
*/
|
|
94
94
|
this.renderText = (item) => {
|
|
@@ -97,20 +97,10 @@ class ListRenderer {
|
|
|
97
97
|
}
|
|
98
98
|
return (h("div", { class: "mdc-deprecated-list-item__text" },
|
|
99
99
|
h("div", { class: "mdc-deprecated-list-item__primary-command-text" },
|
|
100
|
-
h("div", { class: "mdc-deprecated-list-item__primary-text" }, item.text),
|
|
101
|
-
this.renderCommandText(item)),
|
|
100
|
+
h("div", { class: "mdc-deprecated-list-item__primary-text" }, item.text)),
|
|
102
101
|
h("div", { class: "mdc-deprecated-list-item__secondary-text" }, item.secondaryText)));
|
|
103
102
|
};
|
|
104
|
-
this.renderCommandText = (item) => {
|
|
105
|
-
if (!('commandText' in item)) {
|
|
106
|
-
return;
|
|
107
|
-
}
|
|
108
|
-
return (h("div", { class: "mdc-deprecated-list-item__command-text" }, item.commandText));
|
|
109
|
-
};
|
|
110
103
|
this.isSimpleItem = (item) => {
|
|
111
|
-
if ('commandText' in item) {
|
|
112
|
-
return false;
|
|
113
|
-
}
|
|
114
104
|
if ('secondaryText' in item) {
|
|
115
105
|
return false;
|
|
116
106
|
}
|
|
@@ -191,9 +181,6 @@ class ListRenderer {
|
|
|
191
181
|
this.twoLines = items.some((item) => {
|
|
192
182
|
return 'secondaryText' in item && !!item.secondaryText;
|
|
193
183
|
});
|
|
194
|
-
this.commandKey = items.some((item) => {
|
|
195
|
-
return 'commandText' in item && !!item.commandText;
|
|
196
|
-
});
|
|
197
184
|
this.hasIcons = items.some((item) => {
|
|
198
185
|
return 'icon' in item && !!item.icon;
|
|
199
186
|
});
|