@limetech/lime-elements 33.14.0-next.11 → 33.14.0-next.15
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/component-f7ef9087.js +2365 -0
- package/dist/cjs/lime-elements.cjs.js +1 -1
- package/dist/cjs/limel-list_2.cjs.entry.js +497 -0
- package/dist/cjs/limel-menu-list.cjs.entry.js +885 -0
- package/dist/cjs/limel-menu.cjs.entry.js +4 -4
- package/dist/cjs/limel-portal.cjs.entry.js +1935 -0
- package/dist/cjs/limel-tooltip-content.cjs.entry.js +5 -2
- package/dist/cjs/limel-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/header/header.js +0 -1
- package/dist/collection/components/list/list-renderer.js +161 -163
- package/dist/collection/components/list/list.css +0 -10
- package/dist/collection/components/list/list.js +77 -125
- package/dist/collection/components/menu/menu.js +9 -9
- package/dist/collection/components/menu-list/menu-list-renderer-config.js +1 -0
- package/dist/collection/components/menu-list/menu-list-renderer.js +158 -0
- package/dist/collection/components/menu-list/menu-list.css +3397 -0
- package/dist/collection/components/menu-list/menu-list.js +288 -0
- package/dist/collection/components/menu-list/menu-list.types.js +1 -0
- package/dist/collection/components/menu-surface/menu-surface.js +84 -87
- package/dist/collection/components/popover/popover.js +0 -1
- package/dist/collection/components/tooltip/tooltip-content.css +25 -13
- package/dist/collection/components/tooltip/tooltip-content.js +4 -3
- package/dist/collection/components/tooltip/tooltip.css +0 -6
- package/dist/collection/components/tooltip/tooltip.js +31 -5
- package/dist/esm/component-2eb4e07b.js +2357 -0
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/limel-list_2.entry.js +492 -0
- package/dist/esm/limel-menu-list.entry.js +881 -0
- package/dist/esm/limel-menu.entry.js +4 -4
- package/dist/esm/limel-portal.entry.js +1931 -0
- package/dist/esm/limel-tooltip-content.entry.js +5 -2
- package/dist/esm/limel-tooltip.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-31299106.js +126 -0
- package/dist/lime-elements/p-6ea02589.entry.js +82 -0
- package/dist/lime-elements/{p-b0b18dfc.entry.js → p-8e4e13b3.entry.js} +1 -1
- package/dist/lime-elements/p-aeada929.entry.js +1 -0
- package/dist/lime-elements/{p-63e4f918.entry.js → p-cd5e3858.entry.js} +1 -1
- package/dist/lime-elements/p-d3aefa5f.entry.js +1 -0
- package/dist/lime-elements/p-f8c33335.entry.js +1 -0
- package/dist/types/components/header/header.d.ts +0 -1
- package/dist/types/components/list/list-item.types.d.ts +2 -1
- package/dist/types/components/list/list-renderer-config.d.ts +0 -1
- package/dist/types/components/list/list-renderer.d.ts +0 -1
- package/dist/types/components/list/list.d.ts +0 -7
- package/dist/types/components/list/list.types.d.ts +1 -1
- package/dist/types/components/menu/menu.d.ts +2 -3
- package/dist/types/components/menu/menu.types.d.ts +35 -3
- package/dist/types/components/menu-list/menu-list-renderer-config.d.ts +8 -0
- package/dist/types/components/menu-list/menu-list-renderer.d.ts +49 -0
- package/dist/types/components/menu-list/menu-list.d.ts +59 -0
- package/dist/types/components/menu-list/menu-list.types.d.ts +6 -0
- package/dist/types/components/menu-surface/menu-surface.d.ts +0 -1
- package/dist/types/components/popover/popover.d.ts +0 -1
- package/dist/types/components/tooltip/tooltip-content.d.ts +1 -1
- package/dist/types/components/tooltip/tooltip.d.ts +31 -5
- package/dist/types/components.d.ts +66 -5
- package/dist/types/interface.d.ts +1 -0
- package/package.json +2 -1
- package/dist/cjs/limel-list_3.cjs.entry.js +0 -5418
- package/dist/esm/limel-list_3.entry.js +0 -5412
- package/dist/lime-elements/p-a6a7dd00.entry.js +0 -1
- package/dist/lime-elements/p-e078c459.entry.js +0 -177
|
@@ -4,14 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-153dc912.js');
|
|
6
6
|
|
|
7
|
-
const tooltipContentCss = "
|
|
7
|
+
const tooltipContentCss = ":host{animation:display-tooltip 0.2s ease;display:flex;flex-direction:row;border-radius:0.25rem;padding:0.25rem 0.5rem;font-size:0.875rem;background-color:rgb(var(--contrast-1300));box-shadow:var(--shadow-depth-16)}.label{color:rgb(var(--contrast-200))}.helper-label{color:rgb(var(--contrast-800));padding:0 0 0 1rem}.helper-label:empty{display:none}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";
|
|
8
8
|
|
|
9
9
|
const TooltipContent = class {
|
|
10
10
|
constructor(hostRef) {
|
|
11
11
|
index.registerInstance(this, hostRef);
|
|
12
12
|
}
|
|
13
13
|
render() {
|
|
14
|
-
return
|
|
14
|
+
return [
|
|
15
|
+
index.h("div", { class: "label" }, this.label),
|
|
16
|
+
index.h("div", { class: "helper-label" }, this.helperLabel),
|
|
17
|
+
];
|
|
15
18
|
}
|
|
16
19
|
};
|
|
17
20
|
TooltipContent.style = tooltipContentCss;
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-153dc912.js');
|
|
6
6
|
const randomString = require('./random-string-4c3b7f1c.js');
|
|
7
7
|
|
|
8
|
-
const tooltipCss = ".trigger-anchor{
|
|
8
|
+
const tooltipCss = ".trigger-anchor{position:relative}";
|
|
9
9
|
|
|
10
10
|
const Tooltip = class {
|
|
11
11
|
constructor(hostRef) {
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -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([["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"displayFullList":[4,"display-full-list"],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select.cjs",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu.cjs",[[1,"limel-menu",{"label":[513],"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"fixed":[4]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[1],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-popover.cjs",[[1,"limel-popover",{"open":[4]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"]}]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"checked":[516],"required":[516],"modified":[32]}]]],["limel-circular-progress.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["limel-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config.cjs",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container.cjs",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form.cjs",[[1,"limel-form",{"schema":[16],"value":[16],"propsFactory":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-linear-progress.cjs",[[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-slider.cjs",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-
|
|
17
|
+
return index.bootstrapLazy([["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"displayFullList":[4,"display-full-list"],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formattedValue":[32],"internalFormat":[32],"showPortal":[32]}]]],["limel-button-group.cjs",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["limel-select.cjs",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-menu.cjs",[[1,"limel-menu",{"label":[513],"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"fixed":[4]}]]],["limel-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[1],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-popover.cjs",[[1,"limel-popover",{"open":[4]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"]}]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"checked":[516],"required":[516],"modified":[32]}]]],["limel-circular-progress.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["limel-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["limel-config.cjs",[[1,"limel-config",{"config":[16]}]]],["limel-flex-container.cjs",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["limel-form.cjs",[[1,"limel-form",{"schema":[16],"value":[16],"propsFactory":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-linear-progress.cjs",[[1,"limel-linear-progress",{"value":[2],"indeterminate":[4]}]]],["limel-slider.cjs",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-tooltip.cjs",[[1,"limel-tooltip",{"label":[513],"helperLabel":[513,"helper-label"],"elementId":[513,"element-id"],"open":[32]}]]],["limel-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["limel-progress-flow-item.cjs",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4]}]]],["limel-menu-list.cjs",[[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover-surface.cjs",[[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-flatpickr-adapter_2.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"isFocused":[32],"isModified":[32],"showCompletions":[32]}],[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"disabled":[516],"readonly":[516],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}]]],["limel-tooltip-content.cjs",[[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516],"relayout":[64]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[514]}]]],["limel-portal.cjs",[[1,"limel-portal",{"openDirection":[1,"open-direction"],"position":[1],"containerId":[1,"container-id"],"containerStyle":[16],"parent":[16],"inheritParentWidth":[4,"inherit-parent-width"],"visible":[4]}]]],["limel-list_2.cjs",[[1,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
"./components/linear-progress/linear-progress.js",
|
|
25
25
|
"./components/list/list.js",
|
|
26
26
|
"./components/menu/menu.js",
|
|
27
|
+
"./components/menu-list/menu-list.js",
|
|
27
28
|
"./components/menu-surface/menu-surface.js",
|
|
28
29
|
"./components/picker/picker.js",
|
|
29
30
|
"./components/popover/popover.js",
|
|
@@ -43,7 +43,6 @@ import { Component, h, Prop } from '@stencil/core';
|
|
|
43
43
|
* @exampleComponent limel-example-header-responsive
|
|
44
44
|
* @exampleComponent limel-example-header-narrow
|
|
45
45
|
* @slot - Content (actions) to be put inside the far right surface of the header
|
|
46
|
-
* @private
|
|
47
46
|
*/
|
|
48
47
|
export class Header {
|
|
49
48
|
render() {
|
|
@@ -7,8 +7,164 @@ export class ListRenderer {
|
|
|
7
7
|
isOpen: true,
|
|
8
8
|
badgeIcons: false,
|
|
9
9
|
};
|
|
10
|
-
|
|
11
|
-
|
|
10
|
+
/**
|
|
11
|
+
* Determine which ListItem should have the `tab-index` attribute set,
|
|
12
|
+
* and return the index at which that ListItem is located in `items`.
|
|
13
|
+
* Returns `undefined` if no item should have the attribute set.
|
|
14
|
+
* See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility
|
|
15
|
+
*
|
|
16
|
+
* @param {Array<ListItem | ListSeparator | MenuItems>} items the items of the list, including any `ListSeparator`:s
|
|
17
|
+
* @returns {number} the index as per the description
|
|
18
|
+
*/
|
|
19
|
+
this.getIndexForWhichToApplyTabIndex = (items) => {
|
|
20
|
+
let result;
|
|
21
|
+
for (let i = 0, max = items.length; i < max; i += 1) {
|
|
22
|
+
if ('separator' in items[i]) {
|
|
23
|
+
// Ignore ListSeparator
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
const item = items[i];
|
|
27
|
+
if (item.selected) {
|
|
28
|
+
result = i;
|
|
29
|
+
break;
|
|
30
|
+
}
|
|
31
|
+
if (result === undefined && !item.disabled) {
|
|
32
|
+
result = i;
|
|
33
|
+
// Do NOT break, as any later item with
|
|
34
|
+
// `selected=true` should get the tab-index instead!
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
return result;
|
|
39
|
+
};
|
|
40
|
+
/**
|
|
41
|
+
* Render a single list item
|
|
42
|
+
*
|
|
43
|
+
* @param {ListItem | ListSeparator | MenuItems} item the item to render
|
|
44
|
+
* @param {number} index the index the item had in the `items` array
|
|
45
|
+
* @returns {HTMLElement} the list item
|
|
46
|
+
*/
|
|
47
|
+
this.renderListItem = (item, index) => {
|
|
48
|
+
if ('separator' in item) {
|
|
49
|
+
return h("li", { class: "mdc-deprecated-list-divider", role: "separator" });
|
|
50
|
+
}
|
|
51
|
+
if (['radio', 'checkbox'].includes(this.config.type)) {
|
|
52
|
+
return this.renderVariantListItem(this.config, item, index);
|
|
53
|
+
}
|
|
54
|
+
const classNames = {
|
|
55
|
+
'mdc-deprecated-list-item': true,
|
|
56
|
+
'mdc-deprecated-list-item--disabled': item.disabled,
|
|
57
|
+
'mdc-deprecated-list-item--selected': item.selected,
|
|
58
|
+
};
|
|
59
|
+
const attributes = {};
|
|
60
|
+
if (index === this.applyTabIndexToItemAtIndex) {
|
|
61
|
+
attributes.tabindex = '0';
|
|
62
|
+
}
|
|
63
|
+
return (h("li", Object.assign({ class: classNames, "aria-disabled": item.disabled ? 'true' : 'false', "aria-selected": item.selected ? 'true' : 'false', "data-index": index }, attributes),
|
|
64
|
+
item.icon ? this.renderIcon(this.config, item) : null,
|
|
65
|
+
this.renderText(item),
|
|
66
|
+
this.twoLines && this.avatarList ? this.renderDivider() : null,
|
|
67
|
+
this.renderActionMenu(item.actions)));
|
|
68
|
+
};
|
|
69
|
+
/**
|
|
70
|
+
* Render the text of the list item
|
|
71
|
+
*
|
|
72
|
+
* @param {ListItem | MenuItem} item the list item
|
|
73
|
+
* @returns {HTMLElement | string} the text for the list item
|
|
74
|
+
*/
|
|
75
|
+
this.renderText = (item) => {
|
|
76
|
+
if (this.isSimpleItem(item)) {
|
|
77
|
+
return (h("span", { class: "mdc-deprecated-list-item__text" }, item.text));
|
|
78
|
+
}
|
|
79
|
+
return (h("div", { class: "mdc-deprecated-list-item__text" },
|
|
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)),
|
|
83
|
+
h("div", { class: "mdc-deprecated-list-item__secondary-text" }, item.secondaryText)));
|
|
84
|
+
};
|
|
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
|
+
this.isSimpleItem = (item) => {
|
|
92
|
+
if ('commandText' in item) {
|
|
93
|
+
return false;
|
|
94
|
+
}
|
|
95
|
+
if ('secondaryText' in item) {
|
|
96
|
+
return false;
|
|
97
|
+
}
|
|
98
|
+
return true;
|
|
99
|
+
};
|
|
100
|
+
/**
|
|
101
|
+
* Render an icon for a list item
|
|
102
|
+
*
|
|
103
|
+
* @param {ListRendererConfig} config the config object, passed on from the `renderListItem` function
|
|
104
|
+
* @param {ListItem} item the list item
|
|
105
|
+
* @returns {HTMLElement} the icon element
|
|
106
|
+
*/
|
|
107
|
+
this.renderIcon = (config, item) => {
|
|
108
|
+
const style = {};
|
|
109
|
+
if (item.iconColor) {
|
|
110
|
+
if (config.badgeIcons) {
|
|
111
|
+
style['--icon-background-color'] = item.iconColor;
|
|
112
|
+
}
|
|
113
|
+
else {
|
|
114
|
+
style.color = item.iconColor;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
return (h("limel-icon", { badge: config.badgeIcons, class: "mdc-deprecated-list-item__graphic", name: item.icon, style: style, size: config.iconSize }));
|
|
118
|
+
};
|
|
119
|
+
this.renderDivider = () => {
|
|
120
|
+
const classes = {
|
|
121
|
+
'mdc-deprecated-list-divider': true,
|
|
122
|
+
'mdc-deprecated-list-divider--inset': true,
|
|
123
|
+
};
|
|
124
|
+
if (this.config.iconSize) {
|
|
125
|
+
classes[this.config.iconSize] = true;
|
|
126
|
+
}
|
|
127
|
+
return h("hr", { class: classes });
|
|
128
|
+
};
|
|
129
|
+
this.renderActionMenu = (actions) => {
|
|
130
|
+
if (!actions || actions.length === 0) {
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
return (h("limel-menu", { class: "mdc-deprecated-list-item__meta", items: actions, openDirection: "left" },
|
|
134
|
+
h("limel-icon", { slot: "trigger", name: "menu_2", size: "small" })));
|
|
135
|
+
};
|
|
136
|
+
this.renderVariantListItem = (config, item, index) => {
|
|
137
|
+
let itemTemplate;
|
|
138
|
+
if (config.type === 'radio') {
|
|
139
|
+
itemTemplate = (h(RadioButtonTemplate, { id: `c_${index}`, checked: item.selected, disabled: item.disabled }));
|
|
140
|
+
}
|
|
141
|
+
else if (config.type === 'checkbox') {
|
|
142
|
+
itemTemplate = (h(CheckboxTemplate, { id: `c_${index}`, checked: item.selected, disabled: item.disabled }));
|
|
143
|
+
}
|
|
144
|
+
const classNames = {
|
|
145
|
+
'mdc-deprecated-list-item': true,
|
|
146
|
+
'mdc-deprecated-list-item--disabled': item.disabled,
|
|
147
|
+
'mdc-deprecated-list-item__text': !item.secondaryText,
|
|
148
|
+
};
|
|
149
|
+
const attributes = {};
|
|
150
|
+
if (index === this.applyTabIndexToItemAtIndex) {
|
|
151
|
+
attributes.tabindex = '0';
|
|
152
|
+
}
|
|
153
|
+
return (h("li", Object.assign({ class: classNames, role: config.type, "aria-checked": item.selected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', "data-index": index }, attributes), this.renderVariantListItemContent(config, item, itemTemplate)));
|
|
154
|
+
};
|
|
155
|
+
this.renderVariantListItemContent = (config, item, itemTemplate) => {
|
|
156
|
+
if (this.hasIcons) {
|
|
157
|
+
return [
|
|
158
|
+
item.icon ? this.renderIcon(config, item) : null,
|
|
159
|
+
this.renderText(item),
|
|
160
|
+
h("div", { class: "mdc-deprecated-list-item__meta" }, itemTemplate),
|
|
161
|
+
];
|
|
162
|
+
}
|
|
163
|
+
return [
|
|
164
|
+
h("div", { class: "mdc-deprecated-list-item__graphic" }, itemTemplate),
|
|
165
|
+
this.renderText(item),
|
|
166
|
+
];
|
|
167
|
+
};
|
|
12
168
|
}
|
|
13
169
|
render(items, config = {}) {
|
|
14
170
|
items = items || [];
|
|
@@ -23,7 +179,7 @@ export class ListRenderer {
|
|
|
23
179
|
return 'icon' in item && !!item.icon;
|
|
24
180
|
});
|
|
25
181
|
this.avatarList = this.config.badgeIcons && this.hasIcons;
|
|
26
|
-
const selectableListTypes = ['selectable', 'radio', 'checkbox'
|
|
182
|
+
const selectableListTypes = ['selectable', 'radio', 'checkbox'];
|
|
27
183
|
let role;
|
|
28
184
|
switch (this.config.type) {
|
|
29
185
|
case 'checkbox':
|
|
@@ -33,7 +189,7 @@ export class ListRenderer {
|
|
|
33
189
|
role = 'radiogroup';
|
|
34
190
|
break;
|
|
35
191
|
default:
|
|
36
|
-
role =
|
|
192
|
+
role = 'listbox';
|
|
37
193
|
}
|
|
38
194
|
this.applyTabIndexToItemAtIndex =
|
|
39
195
|
this.getIndexForWhichToApplyTabIndex(items);
|
|
@@ -46,164 +202,6 @@ export class ListRenderer {
|
|
|
46
202
|
this.commandKey &&
|
|
47
203
|
['small', 'x-small'].includes(this.config.iconSize),
|
|
48
204
|
};
|
|
49
|
-
return (h("ul", { class: classNames,
|
|
50
|
-
}
|
|
51
|
-
/**
|
|
52
|
-
* Determine which ListItem should have the `tab-index` attribute set,
|
|
53
|
-
* and return the index at which that ListItem is located in `items`.
|
|
54
|
-
* Returns `undefined` if no item should have the attribute set.
|
|
55
|
-
* See https://github.com/material-components/material-components-web/tree/e66a43a75fef4f9179e24856649518e15e279a04/packages/mdc-list#accessibility
|
|
56
|
-
*
|
|
57
|
-
* @param {Array<ListItem | ListSeparator | MenuItems>} items the items of the list, including any `ListSeparator`:s
|
|
58
|
-
* @returns {number} the index as per the description
|
|
59
|
-
*/
|
|
60
|
-
getIndexForWhichToApplyTabIndex(items) {
|
|
61
|
-
let result;
|
|
62
|
-
for (let i = 0, max = items.length; i < max; i += 1) {
|
|
63
|
-
if ('separator' in items[i]) {
|
|
64
|
-
// Ignore ListSeparator
|
|
65
|
-
}
|
|
66
|
-
else {
|
|
67
|
-
const item = items[i];
|
|
68
|
-
if (item.selected) {
|
|
69
|
-
result = i;
|
|
70
|
-
break;
|
|
71
|
-
}
|
|
72
|
-
if (result === undefined && !item.disabled) {
|
|
73
|
-
result = i;
|
|
74
|
-
// Do NOT break, as any later item with
|
|
75
|
-
// `selected=true` should get the tab-index instead!
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
return result;
|
|
80
|
-
}
|
|
81
|
-
/**
|
|
82
|
-
* Render a single list item
|
|
83
|
-
*
|
|
84
|
-
* @param {ListItem | ListSeparator | MenuItems} item the item to render
|
|
85
|
-
* @param {number} index the index the item had in the `items` array
|
|
86
|
-
* @returns {HTMLElement} the list item
|
|
87
|
-
*/
|
|
88
|
-
renderListItem(item, index) {
|
|
89
|
-
if ('separator' in item) {
|
|
90
|
-
return h("li", { class: "mdc-deprecated-list-divider", role: "separator" });
|
|
91
|
-
}
|
|
92
|
-
if (['radio', 'checkbox'].includes(this.config.type)) {
|
|
93
|
-
return this.renderVariantListItem(this.config, item, index);
|
|
94
|
-
}
|
|
95
|
-
const classNames = {
|
|
96
|
-
'mdc-deprecated-list-item': true,
|
|
97
|
-
'mdc-deprecated-list-item--disabled': item.disabled,
|
|
98
|
-
'mdc-deprecated-list-item--selected': item.selected,
|
|
99
|
-
};
|
|
100
|
-
const attributes = {};
|
|
101
|
-
if (index === this.applyTabIndexToItemAtIndex) {
|
|
102
|
-
attributes.tabindex = '0';
|
|
103
|
-
}
|
|
104
|
-
return (h("li", Object.assign({ class: classNames, role: this.config.type === 'menu' ? 'menuitem' : '', "aria-disabled": item.disabled ? 'true' : 'false', "aria-selected": item.selected ? 'true' : 'false', "data-index": index }, attributes),
|
|
105
|
-
item.icon ? this.renderIcon(this.config, item) : null,
|
|
106
|
-
this.renderText(item),
|
|
107
|
-
this.twoLines && this.avatarList ? this.renderDivider() : null,
|
|
108
|
-
this.renderActionMenu(item.actions)));
|
|
109
|
-
}
|
|
110
|
-
/**
|
|
111
|
-
* Render the text of the list item
|
|
112
|
-
*
|
|
113
|
-
* @param {ListItem | MenuItem} item the list item
|
|
114
|
-
* @returns {HTMLElement | string} the text for the list item
|
|
115
|
-
*/
|
|
116
|
-
renderText(item) {
|
|
117
|
-
if (this.isSimpleItem(item)) {
|
|
118
|
-
return (h("span", { class: "mdc-deprecated-list-item__text" }, item.text));
|
|
119
|
-
}
|
|
120
|
-
return (h("div", { class: "mdc-deprecated-list-item__text" },
|
|
121
|
-
h("div", { class: "mdc-deprecated-list-item__primary-command-text" },
|
|
122
|
-
h("div", { class: "mdc-deprecated-list-item__primary-text" }, item.text),
|
|
123
|
-
this.renderCommandText(item)),
|
|
124
|
-
h("div", { class: "mdc-deprecated-list-item__secondary-text" }, item.secondaryText)));
|
|
125
|
-
}
|
|
126
|
-
renderCommandText(item) {
|
|
127
|
-
if (!('commandText' in item)) {
|
|
128
|
-
return;
|
|
129
|
-
}
|
|
130
|
-
return (h("div", { class: "mdc-deprecated-list-item__command-text" }, item.commandText));
|
|
131
|
-
}
|
|
132
|
-
isSimpleItem(item) {
|
|
133
|
-
if ('commandText' in item) {
|
|
134
|
-
return false;
|
|
135
|
-
}
|
|
136
|
-
if ('secondaryText' in item) {
|
|
137
|
-
return false;
|
|
138
|
-
}
|
|
139
|
-
return true;
|
|
140
|
-
}
|
|
141
|
-
/**
|
|
142
|
-
* Render an icon for a list item
|
|
143
|
-
*
|
|
144
|
-
* @param {ListRendererConfig} config the config object, passed on from the `renderListItem` function
|
|
145
|
-
* @param {ListItem} item the list item
|
|
146
|
-
* @returns {HTMLElement} the icon element
|
|
147
|
-
*/
|
|
148
|
-
renderIcon(config, item) {
|
|
149
|
-
const style = {};
|
|
150
|
-
if (item.iconColor) {
|
|
151
|
-
if (config.badgeIcons) {
|
|
152
|
-
style['--icon-background-color'] = item.iconColor;
|
|
153
|
-
}
|
|
154
|
-
else {
|
|
155
|
-
style.color = item.iconColor;
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
return (h("limel-icon", { badge: config.badgeIcons, class: "mdc-deprecated-list-item__graphic", name: item.icon, style: style, size: config.iconSize }));
|
|
159
|
-
}
|
|
160
|
-
renderDivider() {
|
|
161
|
-
const classes = {
|
|
162
|
-
'mdc-deprecated-list-divider': true,
|
|
163
|
-
'mdc-deprecated-list-divider--inset': true,
|
|
164
|
-
};
|
|
165
|
-
if (this.config.iconSize) {
|
|
166
|
-
classes[this.config.iconSize] = true;
|
|
167
|
-
}
|
|
168
|
-
return h("hr", { class: classes });
|
|
169
|
-
}
|
|
170
|
-
renderActionMenu(actions) {
|
|
171
|
-
if (!actions || actions.length === 0) {
|
|
172
|
-
return;
|
|
173
|
-
}
|
|
174
|
-
return (h("limel-menu", { class: "mdc-deprecated-list-item__meta", items: actions, openDirection: "left" },
|
|
175
|
-
h("limel-icon", { slot: "trigger", name: "menu_2", size: "small" })));
|
|
176
|
-
}
|
|
177
|
-
renderVariantListItem(config, item, index) {
|
|
178
|
-
let itemTemplate;
|
|
179
|
-
if (config.type === 'radio') {
|
|
180
|
-
itemTemplate = (h(RadioButtonTemplate, { id: `c_${index}`, checked: item.selected, disabled: item.disabled }));
|
|
181
|
-
}
|
|
182
|
-
else if (config.type === 'checkbox') {
|
|
183
|
-
itemTemplate = (h(CheckboxTemplate, { id: `c_${index}`, checked: item.selected, disabled: item.disabled }));
|
|
184
|
-
}
|
|
185
|
-
const classNames = {
|
|
186
|
-
'mdc-deprecated-list-item': true,
|
|
187
|
-
'mdc-deprecated-list-item--disabled': item.disabled,
|
|
188
|
-
'mdc-deprecated-list-item__text': !item.secondaryText,
|
|
189
|
-
};
|
|
190
|
-
const attributes = {};
|
|
191
|
-
if (index === this.applyTabIndexToItemAtIndex) {
|
|
192
|
-
attributes.tabindex = '0';
|
|
193
|
-
}
|
|
194
|
-
return (h("li", Object.assign({ class: classNames, role: config.type, "aria-checked": item.selected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : 'false', "data-index": index }, attributes), this.renderVariantListItemContent(config, item, itemTemplate)));
|
|
195
|
-
}
|
|
196
|
-
renderVariantListItemContent(config, item, itemTemplate) {
|
|
197
|
-
if (this.hasIcons) {
|
|
198
|
-
return [
|
|
199
|
-
item.icon ? this.renderIcon(config, item) : null,
|
|
200
|
-
this.renderText(item),
|
|
201
|
-
h("div", { class: "mdc-deprecated-list-item__meta" }, itemTemplate),
|
|
202
|
-
];
|
|
203
|
-
}
|
|
204
|
-
return [
|
|
205
|
-
h("div", { class: "mdc-deprecated-list-item__graphic" }, itemTemplate),
|
|
206
|
-
this.renderText(item),
|
|
207
|
-
];
|
|
205
|
+
return (h("ul", { class: classNames, role: role, "aria-orientation": "vertical" }, items.map(this.renderListItem)));
|
|
208
206
|
}
|
|
209
207
|
}
|
|
@@ -3052,10 +3052,6 @@ a.mdc-list-item {
|
|
|
3052
3052
|
pointer-events: none;
|
|
3053
3053
|
}
|
|
3054
3054
|
|
|
3055
|
-
.mdc-menu {
|
|
3056
|
-
max-height: 70vh;
|
|
3057
|
-
}
|
|
3058
|
-
|
|
3059
3055
|
.mdc-deprecated-list {
|
|
3060
3056
|
--mdc-theme-text-icon-on-background: var(
|
|
3061
3057
|
--icon-color,
|
|
@@ -3123,12 +3119,6 @@ a.mdc-list-item {
|
|
|
3123
3119
|
.mdc-deprecated-list.mdc-deprecated-list--avatar-list .mdc-deprecated-list-item:last-child hr.mdc-deprecated-list-divider {
|
|
3124
3120
|
display: none;
|
|
3125
3121
|
}
|
|
3126
|
-
.mdc-deprecated-list .mdc-deprecated-list-item[role=menuitem] {
|
|
3127
|
-
font-size: 0.8125rem;
|
|
3128
|
-
}
|
|
3129
|
-
.mdc-deprecated-list .mdc-deprecated-list-item[role=menuitem] .mdc-deprecated-list-item__graphic {
|
|
3130
|
-
margin-right: 0.875rem;
|
|
3131
|
-
}
|
|
3132
3122
|
.mdc-deprecated-list.mdc-deprecated-list--two-line .mdc-deprecated-list-item__text {
|
|
3133
3123
|
padding: 0.5rem 0;
|
|
3134
3124
|
}
|