@limetech/lime-elements 36.1.0-next.12 → 36.1.0-next.14

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 (35) hide show
  1. package/dist/cjs/lime-elements.cjs.js +1 -1
  2. package/dist/cjs/{limel-button.cjs.entry.js → limel-button_2.cjs.entry.js} +132 -1
  3. package/dist/cjs/limel-form.cjs.entry.js +319 -318
  4. package/dist/cjs/limel-portal.cjs.entry.js +60 -49
  5. package/dist/cjs/limel-shortcut.cjs.entry.js +74 -0
  6. package/dist/cjs/limel-split-button.cjs.entry.js +34 -0
  7. package/dist/cjs/loader.cjs.js +1 -1
  8. package/dist/collection/collection-manifest.json +2 -0
  9. package/dist/collection/components/button/button.css +4 -1
  10. package/dist/collection/components/shortcut/shortcut.css +91 -0
  11. package/dist/collection/components/shortcut/shortcut.js +211 -0
  12. package/dist/collection/components/split-button/split-button.css +75 -0
  13. package/dist/collection/components/split-button/split-button.js +170 -0
  14. package/dist/esm/lime-elements.js +1 -1
  15. package/dist/esm/{limel-button.entry.js → limel-button_2.entry.js} +133 -3
  16. package/dist/esm/limel-form.entry.js +319 -318
  17. package/dist/esm/limel-portal.entry.js +60 -49
  18. package/dist/esm/limel-shortcut.entry.js +70 -0
  19. package/dist/esm/limel-split-button.entry.js +30 -0
  20. package/dist/esm/loader.js +1 -1
  21. package/dist/lime-elements/lime-elements.esm.js +1 -1
  22. package/dist/lime-elements/{p-3f388717.entry.js → p-6eb07bc3.entry.js} +3 -3
  23. package/dist/lime-elements/p-7c035e6e.entry.js +1 -0
  24. package/dist/lime-elements/p-abce6779.entry.js +1 -0
  25. package/dist/lime-elements/p-b913df89.entry.js +1 -0
  26. package/dist/lime-elements/p-b985362c.entry.js +1 -0
  27. package/dist/types/components/shortcut/shortcut.d.ts +57 -0
  28. package/dist/types/components/split-button/split-button.d.ts +45 -0
  29. package/dist/types/components.d.ts +126 -0
  30. package/package.json +6 -6
  31. package/dist/cjs/limel-menu.cjs.entry.js +0 -137
  32. package/dist/esm/limel-menu.entry.js +0 -133
  33. package/dist/lime-elements/p-2fc4f4ff.entry.js +0 -1
  34. package/dist/lime-elements/p-93cd2268.entry.js +0 -1
  35. package/dist/lime-elements/p-c59cbd68.entry.js +0 -1
@@ -164,38 +164,57 @@ var max = Math.max;
164
164
  var min = Math.min;
165
165
  var round = Math.round;
166
166
 
167
- function getBoundingClientRect(element, includeScale) {
167
+ function getUAString() {
168
+ var uaData = navigator.userAgentData;
169
+
170
+ if (uaData != null && uaData.brands) {
171
+ return uaData.brands.map(function (item) {
172
+ return item.brand + "/" + item.version;
173
+ }).join(' ');
174
+ }
175
+
176
+ return navigator.userAgent;
177
+ }
178
+
179
+ function isLayoutViewport() {
180
+ return !/^((?!chrome|android).)*safari/i.test(getUAString());
181
+ }
182
+
183
+ function getBoundingClientRect(element, includeScale, isFixedStrategy) {
168
184
  if (includeScale === void 0) {
169
185
  includeScale = false;
170
186
  }
171
187
 
172
- var rect = element.getBoundingClientRect();
188
+ if (isFixedStrategy === void 0) {
189
+ isFixedStrategy = false;
190
+ }
191
+
192
+ var clientRect = element.getBoundingClientRect();
173
193
  var scaleX = 1;
174
194
  var scaleY = 1;
175
195
 
176
- if (isHTMLElement(element) && includeScale) {
177
- var offsetHeight = element.offsetHeight;
178
- var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
179
- // Fallback to 1 in case both values are `0`
180
-
181
- if (offsetWidth > 0) {
182
- scaleX = round(rect.width) / offsetWidth || 1;
183
- }
184
-
185
- if (offsetHeight > 0) {
186
- scaleY = round(rect.height) / offsetHeight || 1;
187
- }
196
+ if (includeScale && isHTMLElement(element)) {
197
+ scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
198
+ scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
188
199
  }
189
200
 
201
+ var _ref = isElement(element) ? getWindow(element) : window,
202
+ visualViewport = _ref.visualViewport;
203
+
204
+ var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
205
+ var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
206
+ var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
207
+ var width = clientRect.width / scaleX;
208
+ var height = clientRect.height / scaleY;
190
209
  return {
191
- width: rect.width / scaleX,
192
- height: rect.height / scaleY,
193
- top: rect.top / scaleY,
194
- right: rect.right / scaleX,
195
- bottom: rect.bottom / scaleY,
196
- left: rect.left / scaleX,
197
- x: rect.left / scaleX,
198
- y: rect.top / scaleY
210
+ width: width,
211
+ height: height,
212
+ top: y,
213
+ right: x + width,
214
+ bottom: y + height,
215
+ left: x,
216
+ x: x,
217
+ y: y
199
218
  };
200
219
  }
201
220
 
@@ -290,8 +309,8 @@ function getTrueOffsetParent(element) {
290
309
 
291
310
 
292
311
  function getContainingBlock(element) {
293
- var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;
294
- var isIE = navigator.userAgent.indexOf('Trident') !== -1;
312
+ var isFirefox = /firefox/i.test(getUAString());
313
+ var isIE = /Trident/i.test(getUAString());
295
314
 
296
315
  if (isIE && isHTMLElement(element)) {
297
316
  // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
@@ -712,31 +731,21 @@ function getWindowScrollBarX(element) {
712
731
  return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
713
732
  }
714
733
 
715
- function getViewportRect(element) {
734
+ function getViewportRect(element, strategy) {
716
735
  var win = getWindow(element);
717
736
  var html = getDocumentElement(element);
718
737
  var visualViewport = win.visualViewport;
719
738
  var width = html.clientWidth;
720
739
  var height = html.clientHeight;
721
740
  var x = 0;
722
- var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper
723
- // can be obscured underneath it.
724
- // Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even
725
- // if it isn't open, so if this isn't available, the popper will be detected
726
- // to overflow the bottom of the screen too early.
741
+ var y = 0;
727
742
 
728
743
  if (visualViewport) {
729
744
  width = visualViewport.width;
730
- height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently)
731
- // In Chrome, it returns a value very close to 0 (+/-) but contains rounding
732
- // errors due to floating point numbers, so we need to check precision.
733
- // Safari returns a number <= 0, usually < -1 when pinch-zoomed
734
- // Feature detection fails in mobile emulation mode in Chrome.
735
- // Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) <
736
- // 0.001
737
- // Fallback here: "Not Safari" userAgent
738
-
739
- if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
745
+ height = visualViewport.height;
746
+ var layoutViewport = isLayoutViewport();
747
+
748
+ if (layoutViewport || !layoutViewport && strategy === 'fixed') {
740
749
  x = visualViewport.offsetLeft;
741
750
  y = visualViewport.offsetTop;
742
751
  }
@@ -830,8 +839,8 @@ function rectToClientRect(rect) {
830
839
  });
831
840
  }
832
841
 
833
- function getInnerBoundingClientRect(element) {
834
- var rect = getBoundingClientRect(element);
842
+ function getInnerBoundingClientRect(element, strategy) {
843
+ var rect = getBoundingClientRect(element, false, strategy === 'fixed');
835
844
  rect.top = rect.top + element.clientTop;
836
845
  rect.left = rect.left + element.clientLeft;
837
846
  rect.bottom = rect.top + element.clientHeight;
@@ -843,8 +852,8 @@ function getInnerBoundingClientRect(element) {
843
852
  return rect;
844
853
  }
845
854
 
846
- function getClientRectFromMixedType(element, clippingParent) {
847
- return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
855
+ function getClientRectFromMixedType(element, clippingParent, strategy) {
856
+ return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
848
857
  } // A "clipping parent" is an overflowable container with the characteristic of
849
858
  // clipping (or hiding) overflowing elements with a position different from
850
859
  // `initial`
@@ -867,18 +876,18 @@ function getClippingParents(element) {
867
876
  // clipping parents
868
877
 
869
878
 
870
- function getClippingRect(element, boundary, rootBoundary) {
879
+ function getClippingRect(element, boundary, rootBoundary, strategy) {
871
880
  var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
872
881
  var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
873
882
  var firstClippingParent = clippingParents[0];
874
883
  var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
875
- var rect = getClientRectFromMixedType(element, clippingParent);
884
+ var rect = getClientRectFromMixedType(element, clippingParent, strategy);
876
885
  accRect.top = max(rect.top, accRect.top);
877
886
  accRect.right = min(rect.right, accRect.right);
878
887
  accRect.bottom = min(rect.bottom, accRect.bottom);
879
888
  accRect.left = max(rect.left, accRect.left);
880
889
  return accRect;
881
- }, getClientRectFromMixedType(element, firstClippingParent));
890
+ }, getClientRectFromMixedType(element, firstClippingParent, strategy));
882
891
  clippingRect.width = clippingRect.right - clippingRect.left;
883
892
  clippingRect.height = clippingRect.bottom - clippingRect.top;
884
893
  clippingRect.x = clippingRect.left;
@@ -959,6 +968,8 @@ function detectOverflow(state, options) {
959
968
  var _options = options,
960
969
  _options$placement = _options.placement,
961
970
  placement = _options$placement === void 0 ? state.placement : _options$placement,
971
+ _options$strategy = _options.strategy,
972
+ strategy = _options$strategy === void 0 ? state.strategy : _options$strategy,
962
973
  _options$boundary = _options.boundary,
963
974
  boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
964
975
  _options$rootBoundary = _options.rootBoundary,
@@ -973,7 +984,7 @@ function detectOverflow(state, options) {
973
984
  var altContext = elementContext === popper ? reference : popper;
974
985
  var popperRect = state.rects.popper;
975
986
  var element = state.elements[altBoundary ? altContext : elementContext];
976
- var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
987
+ var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
977
988
  var referenceClientRect = getBoundingClientRect(state.elements.reference);
978
989
  var popperOffsets = computeOffsets({
979
990
  reference: referenceClientRect,
@@ -1487,7 +1498,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
1487
1498
  var isOffsetParentAnElement = isHTMLElement(offsetParent);
1488
1499
  var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
1489
1500
  var documentElement = getDocumentElement(offsetParent);
1490
- var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
1501
+ var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed);
1491
1502
  var scroll = {
1492
1503
  scrollLeft: 0,
1493
1504
  scrollTop: 0
@@ -0,0 +1,74 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const index = require('./index-2a28697b.js');
6
+
7
+ const shortcutCss = ":host(limel-shortcut){--badge-text-color:var(\n --shortcut-badge-text-color,\n rgb(var(--color-white))\n );--badge-background-color:var(\n --shortcut-badge-background-color,\n rgb(var(--color-red-default))\n );position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:0.0625rem}:host(limel-shortcut) *{box-sizing:border-box}:host(limel-shortcut[disabled]) a{opacity:0.5;box-shadow:unset;cursor:not-allowed}a{all:unset;transition:background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;box-shadow:var(--button-shadow-normal);cursor:pointer;text-align:center;height:calc(100% - 1rem);width:calc(100% - 1rem);padding:0.5rem;border-radius:var(--shortcut-border-radius, 1rem);background-color:var(--shortcut-background-color, rgb(var(--contrast-100)))}a:hover{box-shadow:var(--button-shadow-hovered)}a:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}a:focus{outline:none}a:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-icon{display:flex;height:100%;width:100%;justify-content:center;color:var(--shortcut-icon-color, rgb(var(--contrast-1000)));border-radius:var(--shortcut-border-radius, 1rem)}span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;color:var(--shortcut-label-color, rgb(var(--contrast-1100)));font-size:0.75rem;text-align:center}limel-badge{position:absolute;top:-0.5rem;right:0}";
8
+
9
+ const Shortcut = class {
10
+ constructor(hostRef) {
11
+ index.registerInstance(this, hostRef);
12
+ /**
13
+ * The text to show below the shortcut. Long label will be truncated.
14
+ */
15
+ this.label = null;
16
+ /**
17
+ * The `title` tag of the hyperlink, which can be used to
18
+ * provide additional information about the link.
19
+ * It improves accessibility both for sighted users
20
+ * and users with assistive technologies.
21
+ */
22
+ this.linkTitle = null;
23
+ /**
24
+ * Set to `true` if shortcut is disabled.
25
+ */
26
+ this.disabled = false;
27
+ /**
28
+ * The url that the shortcut leads to.
29
+ */
30
+ this.href = null;
31
+ /**
32
+ * Where to load the linked URL, as the name for a browsing context:
33
+ * - `_self`: in the current browsing context. (Default)
34
+ * - `_blank`: in a new tab.
35
+ * - `_parent`: in the parent browsing context of the current one.
36
+ * If no parent, behaves as `_self`.
37
+ * - `_top`: the topmost browsing context (the "highest" context
38
+ * that's an ancestor of the current one). If no ancestors, behaves as `_self`.
39
+ */
40
+ this.target = '_self';
41
+ this.renderLabel = () => {
42
+ if (this.label) {
43
+ return index.h("span", { "aria-hidden": "true" }, this.label);
44
+ }
45
+ };
46
+ this.getAreaLabel = () => {
47
+ if (this.label && this.linkTitle) {
48
+ return this.label + '. ' + this.linkTitle;
49
+ }
50
+ if (this.label) {
51
+ return this.label;
52
+ }
53
+ if (this.linkTitle) {
54
+ return this.linkTitle;
55
+ }
56
+ return undefined;
57
+ };
58
+ this.renderNotification = () => {
59
+ if (this.badge) {
60
+ return index.h("limel-badge", { label: this.badge });
61
+ }
62
+ };
63
+ }
64
+ render() {
65
+ return [
66
+ index.h("a", { "aria-disabled": this.disabled, href: this.href, target: this.target, tabindex: "0", "aria-label": this.getAreaLabel(), title: this.linkTitle }, index.h("limel-icon", { name: this.icon })),
67
+ this.renderLabel(),
68
+ this.renderNotification(),
69
+ ];
70
+ }
71
+ };
72
+ Shortcut.style = shortcutCss;
73
+
74
+ exports.limel_shortcut = Shortcut;
@@ -0,0 +1,34 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const index = require('./index-2a28697b.js');
6
+
7
+ const splitButtonCss = ":host(limel-split-button){--button-padding-right:2rem;display:inline-flex;isolation:isolate}:host(limel-split-button) *{box-sizing:border-box}limel-menu{display:flex;justify-content:flex-end;position:relative;z-index:1;padding:0.125rem;margin-left:calc(var(--button-padding-right) * -1);width:var(--button-padding-right)}limel-menu:before{transition:background-color 0.5s ease;content:\"\";position:absolute;inset:0.375rem auto 0.375rem 0.6875rem;width:1px;background-color:currentColor;opacity:0.2}limel-menu:not([disabled]){color:var(--mdc-theme-primary, rgb(var(--color-teal-default)))}limel-menu:not([disabled]).primary{color:var(--mdc-theme-on-primary, rgb(var(--color-white)))}limel-menu[disabled]{color:rgba(var(--contrast-1600), 0.37)}limel-menu:hover:before,limel-menu:focus-within:before{background-color:transparent}.menu-trigger{all:unset;text-align:center;font-weight:bold;border-radius:0.125rem;height:100%;width:1rem}.menu-trigger:not(:disabled){transition:background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer}.menu-trigger:not(:disabled):hover{box-shadow:var(--button-shadow-hovered)}.menu-trigger:not(:disabled):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.menu-trigger:not(:disabled):focus{outline:none}.menu-trigger:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.menu-trigger:not(:disabled):focus-visible,.menu-trigger:not(:disabled):hover{background-color:rgb(var(--color-white), 0.1)}";
8
+
9
+ const SplitButton = class {
10
+ constructor(hostRef) {
11
+ index.registerInstance(this, hostRef);
12
+ this.select = index.createEvent(this, "select", 7);
13
+ /**
14
+ * Set to `true` to make the button primary.
15
+ */
16
+ this.primary = false;
17
+ /**
18
+ * Set to `true` to disable the button.
19
+ */
20
+ this.disabled = false;
21
+ /**
22
+ * A list of items and separators to show in the menu.
23
+ */
24
+ this.items = [];
25
+ }
26
+ render() {
27
+ return (index.h(index.Host, null, index.h("limel-button", { label: this.label, primary: this.primary, icon: this.icon, disabled: this.disabled }), index.h("limel-menu", { class: {
28
+ primary: this.primary,
29
+ }, disabled: this.disabled, items: this.items, openDirection: "bottom" }, index.h("button", { class: "menu-trigger", slot: "trigger", disabled: this.disabled }, "\u22EE"))));
30
+ }
31
+ };
32
+ SplitButton.style = splitButtonCss;
33
+
34
+ exports.limel_split_button = SplitButton;
@@ -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-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-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],"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",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"]}]]],["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-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-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-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["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"],"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-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-dock-button.cjs",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["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-color-picker-palette.cjs",[[1,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"required":[516]}]]],["limel-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["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-checkbox.cjs",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"modified":[32]}]]],["limel-flatpickr-adapter.cjs",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1]}]]],["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-badge.cjs",[[1,"limel-badge",{"label":[520]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["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-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-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]}]]],["limel-popover_4.cjs",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-popover-surface",{"contentCollection":[16]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]]], options);
17
+ 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],"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-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],"linkTitle":[513,"link-title"],"disabled":[516],"href":[513],"target":[513],"badge":[520]}]]],["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-tab-bar.cjs",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["limel-header.cjs",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"]}]]],["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-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-banner.cjs",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["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"],"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-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-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]}]]],["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-button_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-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["limel-badge.cjs",[[1,"limel-badge",{"label":[520]}]]],["limel-icon.cjs",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["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-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-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-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-popover_4.cjs",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"open":[32]}],[1,"limel-popover-surface",{"contentCollection":[16]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}]]]], options);
18
18
  });
19
19
  };
20
20
 
@@ -37,9 +37,11 @@
37
37
  "./components/progress-flow/progress-flow.js",
38
38
  "./components/progress-flow/progress-flow-item/progress-flow-item.js",
39
39
  "./components/select/select.js",
40
+ "./components/shortcut/shortcut.js",
40
41
  "./components/slider/slider.js",
41
42
  "./components/snackbar/snackbar.js",
42
43
  "./components/spinner/spinner.js",
44
+ "./components/split-button/split-button.js",
43
45
  "./components/switch/switch.js",
44
46
  "./components/tab-bar/tab-bar.js",
45
47
  "./components/tab-panel/tab-panel.js",
@@ -807,7 +807,10 @@ button:focus-visible {
807
807
  }
808
808
  button.mdc-button {
809
809
  min-width: 2.25rem;
810
- padding: 0 0.75rem;
810
+ padding-top: 0;
811
+ padding-right: var(--button-padding-right, 0.75rem);
812
+ padding-bottom: 0;
813
+ padding-left: var(--button-padding-left, 0.75rem);
811
814
  height: 100%;
812
815
  min-height: 2.25rem;
813
816
  width: 100%;
@@ -0,0 +1,91 @@
1
+ /*
2
+ * This file is imported into every component!
3
+ *
4
+ * Nothing in this file may output any CSS
5
+ * without being explicitly called by outside code.
6
+ */
7
+ /**
8
+ * @prop --shortcut-border-radius: defines the radius of corners of the shortcut. Defaults to `1rem`
9
+ * @prop --shortcut-icon-color: defines the fill color of the shortcut icon. Defaults to `--contrast-1000`
10
+ * @prop --shortcut-label-color: defines the color of the shortcut label. Defaults to `--contrast-1100`
11
+ * @prop --shortcut-background-color: defines the backgrounds color of the shortcut icon. Defaults to `--contrast-100`
12
+ * @prop --shortcut-badge-text-color: Text color of the notification badge. Defaults to `--color-white`
13
+ * @prop --shortcut-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`
14
+ */
15
+ :host(limel-shortcut) {
16
+ --badge-text-color: var(
17
+ --shortcut-badge-text-color,
18
+ rgb(var(--color-white))
19
+ );
20
+ --badge-background-color: var(
21
+ --shortcut-badge-background-color,
22
+ rgb(var(--color-red-default))
23
+ );
24
+ position: relative;
25
+ display: flex;
26
+ flex-direction: column;
27
+ align-items: center;
28
+ justify-content: center;
29
+ row-gap: 0.0625rem;
30
+ }
31
+ :host(limel-shortcut) * {
32
+ box-sizing: border-box;
33
+ }
34
+
35
+ :host(limel-shortcut[disabled]) a {
36
+ opacity: 0.5;
37
+ box-shadow: unset;
38
+ cursor: not-allowed;
39
+ }
40
+
41
+ a {
42
+ all: unset;
43
+ transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
44
+ box-shadow: var(--button-shadow-normal);
45
+ cursor: pointer;
46
+ text-align: center;
47
+ height: calc(100% - 1rem);
48
+ width: calc(100% - 1rem);
49
+ padding: 0.5rem;
50
+ border-radius: var(--shortcut-border-radius, 1rem);
51
+ background-color: var(--shortcut-background-color, rgb(var(--contrast-100)));
52
+ }
53
+ a:hover {
54
+ box-shadow: var(--button-shadow-hovered);
55
+ }
56
+ a:active {
57
+ box-shadow: var(--button-shadow-pressed);
58
+ transform: translate3d(0, 0.08rem, 0);
59
+ }
60
+ a:focus {
61
+ outline: none;
62
+ }
63
+ a:focus-visible {
64
+ outline: none;
65
+ box-shadow: var(--shadow-depth-8-focused);
66
+ }
67
+
68
+ limel-icon {
69
+ display: flex;
70
+ height: 100%;
71
+ width: 100%;
72
+ justify-content: center;
73
+ color: var(--shortcut-icon-color, rgb(var(--contrast-1000)));
74
+ border-radius: var(--shortcut-border-radius, 1rem);
75
+ }
76
+
77
+ span {
78
+ overflow: hidden;
79
+ white-space: nowrap;
80
+ text-overflow: ellipsis;
81
+ width: 100%;
82
+ color: var(--shortcut-label-color, rgb(var(--contrast-1100)));
83
+ font-size: 0.75rem;
84
+ text-align: center;
85
+ }
86
+
87
+ limel-badge {
88
+ position: absolute;
89
+ top: -0.5rem;
90
+ right: 0;
91
+ }