@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.
Files changed (66) hide show
  1. package/dist/cjs/component-f7ef9087.js +2365 -0
  2. package/dist/cjs/lime-elements.cjs.js +1 -1
  3. package/dist/cjs/limel-list_2.cjs.entry.js +497 -0
  4. package/dist/cjs/limel-menu-list.cjs.entry.js +885 -0
  5. package/dist/cjs/limel-menu.cjs.entry.js +4 -4
  6. package/dist/cjs/limel-portal.cjs.entry.js +1935 -0
  7. package/dist/cjs/limel-tooltip-content.cjs.entry.js +5 -2
  8. package/dist/cjs/limel-tooltip.cjs.entry.js +1 -1
  9. package/dist/cjs/loader.cjs.js +1 -1
  10. package/dist/collection/collection-manifest.json +1 -0
  11. package/dist/collection/components/header/header.js +0 -1
  12. package/dist/collection/components/list/list-renderer.js +161 -163
  13. package/dist/collection/components/list/list.css +0 -10
  14. package/dist/collection/components/list/list.js +77 -125
  15. package/dist/collection/components/menu/menu.js +9 -9
  16. package/dist/collection/components/menu-list/menu-list-renderer-config.js +1 -0
  17. package/dist/collection/components/menu-list/menu-list-renderer.js +158 -0
  18. package/dist/collection/components/menu-list/menu-list.css +3397 -0
  19. package/dist/collection/components/menu-list/menu-list.js +288 -0
  20. package/dist/collection/components/menu-list/menu-list.types.js +1 -0
  21. package/dist/collection/components/menu-surface/menu-surface.js +84 -87
  22. package/dist/collection/components/popover/popover.js +0 -1
  23. package/dist/collection/components/tooltip/tooltip-content.css +25 -13
  24. package/dist/collection/components/tooltip/tooltip-content.js +4 -3
  25. package/dist/collection/components/tooltip/tooltip.css +0 -6
  26. package/dist/collection/components/tooltip/tooltip.js +31 -5
  27. package/dist/esm/component-2eb4e07b.js +2357 -0
  28. package/dist/esm/lime-elements.js +1 -1
  29. package/dist/esm/limel-list_2.entry.js +492 -0
  30. package/dist/esm/limel-menu-list.entry.js +881 -0
  31. package/dist/esm/limel-menu.entry.js +4 -4
  32. package/dist/esm/limel-portal.entry.js +1931 -0
  33. package/dist/esm/limel-tooltip-content.entry.js +5 -2
  34. package/dist/esm/limel-tooltip.entry.js +1 -1
  35. package/dist/esm/loader.js +1 -1
  36. package/dist/lime-elements/lime-elements.esm.js +1 -1
  37. package/dist/lime-elements/p-31299106.js +126 -0
  38. package/dist/lime-elements/p-6ea02589.entry.js +82 -0
  39. package/dist/lime-elements/{p-b0b18dfc.entry.js → p-8e4e13b3.entry.js} +1 -1
  40. package/dist/lime-elements/p-aeada929.entry.js +1 -0
  41. package/dist/lime-elements/{p-63e4f918.entry.js → p-cd5e3858.entry.js} +1 -1
  42. package/dist/lime-elements/p-d3aefa5f.entry.js +1 -0
  43. package/dist/lime-elements/p-f8c33335.entry.js +1 -0
  44. package/dist/types/components/header/header.d.ts +0 -1
  45. package/dist/types/components/list/list-item.types.d.ts +2 -1
  46. package/dist/types/components/list/list-renderer-config.d.ts +0 -1
  47. package/dist/types/components/list/list-renderer.d.ts +0 -1
  48. package/dist/types/components/list/list.d.ts +0 -7
  49. package/dist/types/components/list/list.types.d.ts +1 -1
  50. package/dist/types/components/menu/menu.d.ts +2 -3
  51. package/dist/types/components/menu/menu.types.d.ts +35 -3
  52. package/dist/types/components/menu-list/menu-list-renderer-config.d.ts +8 -0
  53. package/dist/types/components/menu-list/menu-list-renderer.d.ts +49 -0
  54. package/dist/types/components/menu-list/menu-list.d.ts +59 -0
  55. package/dist/types/components/menu-list/menu-list.types.d.ts +6 -0
  56. package/dist/types/components/menu-surface/menu-surface.d.ts +0 -1
  57. package/dist/types/components/popover/popover.d.ts +0 -1
  58. package/dist/types/components/tooltip/tooltip-content.d.ts +1 -1
  59. package/dist/types/components/tooltip/tooltip.d.ts +31 -5
  60. package/dist/types/components.d.ts +66 -5
  61. package/dist/types/interface.d.ts +1 -0
  62. package/package.json +2 -1
  63. package/dist/cjs/limel-list_3.cjs.entry.js +0 -5418
  64. package/dist/esm/limel-list_3.entry.js +0 -5412
  65. package/dist/lime-elements/p-a6a7dd00.entry.js +0 -1
  66. 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 = ".tooltip-content{display:flex;flex-direction:row;color:rgb(var(--color-gray-default));border-radius:0.5rem;width:auto;display:flex;padding:0.75rem;transition:opacity 150ms ease-out;margin-top:0.3rem;background-color:rgb(var(--color-gray-darker))}.tooltip-content .tooltip{color:rgb(var(--color-gray-lighter))}.tooltip-content .helperLabel{padding:0 0 0 1rem}.tooltip-content .helperLabel:empty{display:none}";
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 (index.h("div", { class: "tooltip-content" }, index.h("div", { class: "tooltip" }, this.label), index.h("div", { class: "helperLabel" }, this.helperLabel)));
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{display:inline-block;position:relative}.tooltip-container{color:#f1f1f1;background-color:#232324}";
8
+ const tooltipCss = ".trigger-anchor{position:relative}";
9
9
 
10
10
  const Tooltip = class {
11
11
  constructor(hostRef) {
@@ -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-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516],"relayout":[64]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[514]}]]],["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-popover-surface.cjs",[[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-list_3.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]}],[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-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-spinner.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]]], options);
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
- this.renderListItem = this.renderListItem.bind(this);
11
- this.renderDivider = this.renderDivider.bind(this);
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', 'menu'];
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 = this.config.type === 'menu' ? 'menu' : 'listbox';
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, "aria-hidden": (this.config.type === 'menu').toString(), role: role, "aria-orientation": "vertical" }, items.map(this.renderListItem)));
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
  }