@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.
- package/dist/cjs/lime-elements.cjs.js +1 -1
- package/dist/cjs/{limel-button.cjs.entry.js → limel-button_2.cjs.entry.js} +132 -1
- package/dist/cjs/limel-form.cjs.entry.js +319 -318
- package/dist/cjs/limel-portal.cjs.entry.js +60 -49
- package/dist/cjs/limel-shortcut.cjs.entry.js +74 -0
- package/dist/cjs/limel-split-button.cjs.entry.js +34 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/button/button.css +4 -1
- package/dist/collection/components/shortcut/shortcut.css +91 -0
- package/dist/collection/components/shortcut/shortcut.js +211 -0
- package/dist/collection/components/split-button/split-button.css +75 -0
- package/dist/collection/components/split-button/split-button.js +170 -0
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/{limel-button.entry.js → limel-button_2.entry.js} +133 -3
- package/dist/esm/limel-form.entry.js +319 -318
- package/dist/esm/limel-portal.entry.js +60 -49
- package/dist/esm/limel-shortcut.entry.js +70 -0
- package/dist/esm/limel-split-button.entry.js +30 -0
- package/dist/esm/loader.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-3f388717.entry.js → p-6eb07bc3.entry.js} +3 -3
- package/dist/lime-elements/p-7c035e6e.entry.js +1 -0
- package/dist/lime-elements/p-abce6779.entry.js +1 -0
- package/dist/lime-elements/p-b913df89.entry.js +1 -0
- package/dist/lime-elements/p-b985362c.entry.js +1 -0
- package/dist/types/components/shortcut/shortcut.d.ts +57 -0
- package/dist/types/components/split-button/split-button.d.ts +45 -0
- package/dist/types/components.d.ts +126 -0
- package/package.json +6 -6
- package/dist/cjs/limel-menu.cjs.entry.js +0 -137
- package/dist/esm/limel-menu.entry.js +0 -133
- package/dist/lime-elements/p-2fc4f4ff.entry.js +0 -1
- package/dist/lime-elements/p-93cd2268.entry.js +0 -1
- 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
|
|
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
|
-
|
|
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)
|
|
177
|
-
|
|
178
|
-
|
|
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:
|
|
192
|
-
height:
|
|
193
|
-
top:
|
|
194
|
-
right:
|
|
195
|
-
bottom:
|
|
196
|
-
left:
|
|
197
|
-
x:
|
|
198
|
-
y:
|
|
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 =
|
|
294
|
-
var isIE =
|
|
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;
|
|
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;
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
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;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["limel-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-
|
|
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
|
|
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
|
+
}
|