@limetech/lime-elements 36.4.0-next.2 → 36.4.0-next.4
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/lime-elements.cjs.js +1 -1
- package/dist/cjs/limel-action-bar-item_2.cjs.entry.js +97 -0
- package/dist/cjs/limel-action-bar.cjs.entry.js +106 -0
- package/dist/cjs/limel-flatpickr-adapter.cjs.entry.js +5 -1
- package/dist/cjs/limel-list_2.cjs.entry.js +1 -1
- package/dist/cjs/{limel-menu-list.cjs.entry.js → limel-menu_2.cjs.entry.js} +122 -1
- package/dist/cjs/{limel-popover_4.cjs.entry.js → limel-popover_2.cjs.entry.js} +0 -97
- package/dist/cjs/limel-tooltip_2.cjs.entry.js +104 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +3 -0
- package/dist/collection/components/action-bar/action-bar-item/action-bar-item.css +129 -0
- package/dist/collection/components/action-bar/action-bar-item/action-bar-item.js +144 -0
- package/dist/collection/components/action-bar/action-bar-item/action-bar-overflow-menu.js +106 -0
- package/dist/collection/components/action-bar/action-bar.css +50 -0
- package/dist/collection/components/action-bar/action-bar.js +244 -0
- package/dist/collection/components/action-bar/action-bar.types.js +1 -0
- package/dist/collection/components/action-bar/isItem.js +3 -0
- package/dist/collection/components/list/list.css +2 -1
- package/dist/collection/components/menu-list/menu-list.css +2 -1
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/limel-action-bar-item_2.entry.js +92 -0
- package/dist/esm/limel-action-bar.entry.js +102 -0
- package/dist/esm/limel-flatpickr-adapter.entry.js +5 -1
- package/dist/esm/limel-list_2.entry.js +1 -1
- package/dist/esm/{limel-menu-list.entry.js → limel-menu_2.entry.js} +123 -3
- package/dist/esm/{limel-popover_4.entry.js → limel-popover_2.entry.js} +1 -96
- package/dist/esm/limel-tooltip_2.entry.js +99 -0
- package/dist/esm/loader.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-3cdc210b.entry.js +1 -0
- package/dist/lime-elements/p-7112ebf8.entry.js +1 -0
- package/dist/lime-elements/{p-20059fcf.entry.js → p-a030e9ab.entry.js} +6 -5
- package/dist/lime-elements/p-b526ebd4.entry.js +1 -0
- package/dist/lime-elements/p-c823809f.entry.js +1 -0
- package/dist/lime-elements/{p-4e5865a7.entry.js → p-da4d1bc1.entry.js} +1 -1
- package/dist/lime-elements/{p-d034bbcf.entry.js → p-f1d963ec.entry.js} +1 -1
- package/dist/types/components/action-bar/action-bar-item/action-bar-item.d.ts +33 -0
- package/dist/types/components/action-bar/action-bar-item/action-bar-overflow-menu.d.ts +25 -0
- package/dist/types/components/action-bar/action-bar.d.ts +79 -0
- package/dist/types/components/action-bar/action-bar.types.d.ts +8 -0
- package/dist/types/components/action-bar/isItem.d.ts +3 -0
- package/dist/types/components.d.ts +143 -16
- package/dist/types/interface.d.ts +1 -0
- package/package.json +13 -14
- package/dist/cjs/limel-menu.cjs.entry.js +0 -127
- package/dist/esm/limel-menu.entry.js +0 -123
- package/dist/lime-elements/p-50dbd665.entry.js +0 -1
- package/dist/lime-elements/p-d16b27b9.entry.js +0 -1
|
@@ -15,5 +15,5 @@ const patchBrowser = () => {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(options => {
|
|
18
|
-
return index.bootstrapLazy([["limel-color-picker.cjs",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-dock.cjs",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-split-button.cjs",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"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-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-info-tile.cjs",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[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"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-shortcut.cjs",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout.cjs",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["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-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"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],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-
|
|
18
|
+
return index.bootstrapLazy([["limel-color-picker.cjs",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"readonly":[516],"isOpen":[32]}]]],["limel-action-bar.cjs",[[1,"limel-action-bar",{"actions":[16],"accessibleLabel":[513,"accessible-label"],"layout":[513],"openDirection":[513,"open-direction"],"overflowCutoff":[32]}]]],["limel-dock.cjs",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["limel-picker.cjs",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"value":[16],"searcher":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["limel-split-button.cjs",[[1,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"items":[16]}]]],["limel-date-picker.cjs",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"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-file.cjs",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"accept":[513],"language":[1],"isDraggingOverDropZone":[32]}]]],["limel-info-tile.cjs",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16]}]]],["limel-snackbar.cjs",[[1,"limel-snackbar",{"message":[1],"timeout":[2],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"show":[64]}]]],["limel-tab-panel.cjs",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["limel-table.cjs",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[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"],"aggregates":[16],"selectable":[4],"selection":[16]}]]],["limel-collapsible-section.cjs",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"actions":[16]}]]],["limel-dialog.cjs",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["limel-progress-flow.cjs",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["limel-shortcut.cjs",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["limel-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["limel-callout.cjs",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["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-code-editor.cjs",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"fold":[4],"lint":[4],"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],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["limel-grid.cjs",[[1,"limel-grid"]]],["limel-switch.cjs",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"value":[516],"fieldId":[32]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["limel-dock-button.cjs",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["limel-color-picker-palette.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[520]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[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-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["limel-action-bar-item_2.cjs",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"]}]]],["limel-chip-set.cjs",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"inputType":[513,"input-type"],"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-button.cjs",[[1,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["limel-circular-progress_2.cjs",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}],[1,"limel-linear-progress",{"value":[2],"indeterminate":[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]}]]],["limel-input-field.cjs",[[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"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]}]]],["limel-icon-button.cjs",[[1,"limel-icon-button",{"icon":[513],"elevated":[516],"label":[513],"disabled":[516]}]]],["limel-spinner.cjs",[[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}]]],["limel-menu_2.cjs",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}],[1,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}]]],["limel-popover_2.cjs",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]],["limel-helper-line.cjs",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["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-tooltip_2.cjs",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]]], options);
|
|
19
19
|
});
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-287e25e0.js');
|
|
6
|
+
const randomString = require('./random-string-4c3b7f1c.js');
|
|
7
|
+
|
|
8
|
+
const actionBarItemCss = "limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover{color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed);transform:translate3d(0, 0.05rem, 0)}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}limel-tooltip{position:absolute;bottom:0;left:0;right:0}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}";
|
|
9
|
+
|
|
10
|
+
const ActionBarButton = class {
|
|
11
|
+
constructor(hostRef) {
|
|
12
|
+
index.registerInstance(this, hostRef);
|
|
13
|
+
this.select = index.createEvent(this, "select", 7);
|
|
14
|
+
this.handleClick = (event) => {
|
|
15
|
+
event.stopPropagation();
|
|
16
|
+
this.select.emit(this.item);
|
|
17
|
+
};
|
|
18
|
+
this.item = undefined;
|
|
19
|
+
this.isVisible = true;
|
|
20
|
+
this.tooltipId = randomString.createRandomString();
|
|
21
|
+
}
|
|
22
|
+
render() {
|
|
23
|
+
if (!this.isItem(this.item) && this.item.separator) {
|
|
24
|
+
return index.h("div", { role: "separator" });
|
|
25
|
+
}
|
|
26
|
+
return (index.h("button", { id: this.tooltipId, type: "button", onClick: this.handleClick, disabled: this.isDisabled() }, this.renderIcon(), this.renderLabel(), this.renderTooltip()));
|
|
27
|
+
}
|
|
28
|
+
isItem(item) {
|
|
29
|
+
return !('separator' in item);
|
|
30
|
+
}
|
|
31
|
+
isDisabled() {
|
|
32
|
+
if (this.isItem(this.item) && this.item.disabled) {
|
|
33
|
+
return true;
|
|
34
|
+
}
|
|
35
|
+
if (!this.isVisible) {
|
|
36
|
+
return true;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
renderIcon() {
|
|
40
|
+
if (this.isItem(this.item) && !this.item.icon) {
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
if ('icon' in this.item) {
|
|
44
|
+
return (index.h("limel-icon", { name: this.item.icon, style: {
|
|
45
|
+
'--action-bar-item-icon-color': `${this.item.iconColor}`,
|
|
46
|
+
} }));
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
renderLabel() {
|
|
50
|
+
if (!this.isItem(this.item) || this.item.iconOnly) {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
return index.h("span", { class: "text" }, this.item.text);
|
|
54
|
+
}
|
|
55
|
+
renderTooltip() {
|
|
56
|
+
if (!this.isItem(this.item)) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
if (this.item.text) {
|
|
60
|
+
return (index.h("limel-tooltip", { elementId: this.tooltipId, label: this.item.text, helperLabel: this.item.commandText }));
|
|
61
|
+
}
|
|
62
|
+
if (this.item.commandText) {
|
|
63
|
+
return (index.h("limel-tooltip", { elementId: this.tooltipId, label: this.item.commandText }));
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
ActionBarButton.style = actionBarItemCss;
|
|
68
|
+
|
|
69
|
+
const ActionBarOverflowMenu = class {
|
|
70
|
+
constructor(hostRef) {
|
|
71
|
+
index.registerInstance(this, hostRef);
|
|
72
|
+
this.select = index.createEvent(this, "select", 7);
|
|
73
|
+
this.countOverflowedItems = () => {
|
|
74
|
+
return `+${this.numberOfMenuItems}`;
|
|
75
|
+
};
|
|
76
|
+
this.handleSelect = (event) => {
|
|
77
|
+
event.stopPropagation();
|
|
78
|
+
this.select.emit(event.detail);
|
|
79
|
+
};
|
|
80
|
+
this.items = undefined;
|
|
81
|
+
this.openDirection = 'bottom-end';
|
|
82
|
+
}
|
|
83
|
+
render() {
|
|
84
|
+
return [
|
|
85
|
+
index.h("limel-menu", { openDirection: this.openDirection, items: this.items, onSelect: this.handleSelect }, index.h("button", { slot: "trigger" }, this.countOverflowedItems())),
|
|
86
|
+
];
|
|
87
|
+
}
|
|
88
|
+
get numberOfMenuItems() {
|
|
89
|
+
return this.items.filter((item) => this.isMenuItem(item)).length;
|
|
90
|
+
}
|
|
91
|
+
isMenuItem(item) {
|
|
92
|
+
return !('separator' in item);
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
exports.limel_action_bar_item = ActionBarButton;
|
|
97
|
+
exports.limel_action_bar_overflow_menu = ActionBarOverflowMenu;
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
const index = require('./index-287e25e0.js');
|
|
6
|
+
|
|
7
|
+
function isItem(item) {
|
|
8
|
+
return !('separator' in item);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const actionBarCss = ":host(limel-action-bar){--action-bar-item-height:2rem;--limel-action-bar-item-text-color:var(\n --action-bar-item-text-color,\n rgb(var(--contrast-1100))\n );box-sizing:border-box;display:inline-flex;align-items:center;padding:0.125rem 0.25rem;max-width:100%;border-radius:var(--action-bar-border-radius);background-color:var(--action-bar-background-color, rgb(var(--contrast-100)))}:host(limel-action-bar),.items{gap:0.25rem}@media (pointer: coarse){:host(limel-action-bar),.items{gap:0.5rem}}.items{display:inline-flex;max-width:100%;min-width:0}:host(limel-action-bar.is-full-width){width:100%}:host(limel-action-bar.is-floating){--action-bar-border-radius:100vw;padding-right:0.125rem;padding-left:0.125rem;max-width:calc(100% - 2rem);box-shadow:var(--shadow-depth-16)}";
|
|
12
|
+
|
|
13
|
+
const ActionBar = class {
|
|
14
|
+
constructor(hostRef) {
|
|
15
|
+
index.registerInstance(this, hostRef);
|
|
16
|
+
this.itemSelected = index.createEvent(this, "itemSelected", 7);
|
|
17
|
+
this.firstRender = true;
|
|
18
|
+
this.actionBarItems = [];
|
|
19
|
+
this.renderActionBarItem = (item, index$1) => {
|
|
20
|
+
return (index.h("limel-action-bar-item", { item: item, onSelect: this.handleSelect, isVisible: this.isVisible(index$1) }));
|
|
21
|
+
};
|
|
22
|
+
this.renderOverflowMenu = (items) => {
|
|
23
|
+
if (!(this.actions.length - this.overflowCutoff)) {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
return (index.h("limel-action-bar-overflow-menu", { openDirection: this.openDirection, items: items, onSelect: this.handleSelect }));
|
|
27
|
+
};
|
|
28
|
+
this.handleSelect = (event) => {
|
|
29
|
+
event.stopPropagation();
|
|
30
|
+
if (isItem(event.detail)) {
|
|
31
|
+
this.itemSelected.emit(event.detail);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
this.handleIntersection = (entries) => {
|
|
35
|
+
const intersectingItems = entries.filter((entry) => entry.isIntersecting);
|
|
36
|
+
const notIntersectingItems = entries.filter((entry) => !entry.isIntersecting);
|
|
37
|
+
if (this.firstRender) {
|
|
38
|
+
this.overflowCutoff = intersectingItems.length;
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
this.overflowCutoff =
|
|
42
|
+
this.overflowCutoff +
|
|
43
|
+
intersectingItems.length -
|
|
44
|
+
notIntersectingItems.length;
|
|
45
|
+
}
|
|
46
|
+
this.firstRender = false;
|
|
47
|
+
};
|
|
48
|
+
this.actions = [];
|
|
49
|
+
this.accessibleLabel = undefined;
|
|
50
|
+
this.layout = undefined;
|
|
51
|
+
this.openDirection = undefined;
|
|
52
|
+
this.overflowCutoff = this.actions.length;
|
|
53
|
+
}
|
|
54
|
+
render() {
|
|
55
|
+
let overflowActions = [];
|
|
56
|
+
if (this.actions.length) {
|
|
57
|
+
overflowActions = this.actions.slice(this.overflowCutoff);
|
|
58
|
+
}
|
|
59
|
+
return (index.h(index.Host, { "aria-label": this.accessibleLabel, class: {
|
|
60
|
+
'is-full-width': this.layout === 'fullWidth',
|
|
61
|
+
'is-floating': this.layout === 'floating',
|
|
62
|
+
} }, index.h("div", { class: "items" }, this.actions.map(this.renderActionBarItem)), this.renderOverflowMenu(overflowActions)));
|
|
63
|
+
}
|
|
64
|
+
componentDidRender() {
|
|
65
|
+
var _a;
|
|
66
|
+
if (this.haveItemsChanged()) {
|
|
67
|
+
(_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
68
|
+
this.createIntersectionObserver();
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
disconnectedCallback() {
|
|
72
|
+
var _a;
|
|
73
|
+
(_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
74
|
+
this.actionBarItems = [];
|
|
75
|
+
}
|
|
76
|
+
isVisible(index) {
|
|
77
|
+
return index < this.overflowCutoff;
|
|
78
|
+
}
|
|
79
|
+
createIntersectionObserver() {
|
|
80
|
+
const options = {
|
|
81
|
+
root: this.host.shadowRoot.querySelector('.items'),
|
|
82
|
+
rootMargin: '0px',
|
|
83
|
+
threshold: 1.0,
|
|
84
|
+
};
|
|
85
|
+
this.actionBarItems = [];
|
|
86
|
+
this.intersectionObserver = new IntersectionObserver(this.handleIntersection, options);
|
|
87
|
+
this.host.shadowRoot
|
|
88
|
+
.querySelectorAll('limel-action-bar-item')
|
|
89
|
+
.forEach((actionBarItem) => {
|
|
90
|
+
this.observe(actionBarItem);
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
observe(actionBarItem) {
|
|
94
|
+
this.intersectionObserver.observe(actionBarItem);
|
|
95
|
+
this.actionBarItems.push(actionBarItem);
|
|
96
|
+
}
|
|
97
|
+
haveItemsChanged() {
|
|
98
|
+
const someItemRemoved = this.actionBarItems.some((actionBarItem) => !this.host.shadowRoot.contains(actionBarItem));
|
|
99
|
+
const someItemAdded = Array.from(this.host.shadowRoot.querySelectorAll('limel-action-bar-item')).some((actionBarItem) => !this.actionBarItems.includes(actionBarItem));
|
|
100
|
+
return someItemRemoved || someItemAdded;
|
|
101
|
+
}
|
|
102
|
+
get host() { return index.getElement(this); }
|
|
103
|
+
};
|
|
104
|
+
ActionBar.style = actionBarCss;
|
|
105
|
+
|
|
106
|
+
exports.limel_action_bar = ActionBar;
|
|
@@ -6912,7 +6912,11 @@ function style(node, value) {
|
|
|
6912
6912
|
node.setAttribute("style", value);
|
|
6913
6913
|
} else if (isObject(value)) {
|
|
6914
6914
|
forEach(value, (val, key) => {
|
|
6915
|
-
if (
|
|
6915
|
+
if (key.indexOf("-") === 0) {
|
|
6916
|
+
// CSS custom properties (variables) start with `-` (e.g. `--my-variable`)
|
|
6917
|
+
// and must be assigned via `setProperty`.
|
|
6918
|
+
node.style.setProperty(key, val);
|
|
6919
|
+
} else if (isNumber(val) && isUnitlessNumber[key] !== 0) {
|
|
6916
6920
|
node.style[key] = val + "px";
|
|
6917
6921
|
} else {
|
|
6918
6922
|
node.style[key] = val;
|