@limetech/lime-elements 40.1.1 → 40.2.1
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/CHANGELOG.md +17 -0
- package/dist/cjs/{3d-tilt-hover-effect-DI8kt0Y0.js → 3d-tilt-hover-effect-Da8Dh_JX.js} +50 -10
- package/dist/cjs/limel-button-group.cjs.entry.js +17 -6
- package/dist/cjs/limel-card.cjs.entry.js +6 -4
- package/dist/cjs/limel-info-tile.cjs.entry.js +9 -4
- package/dist/cjs/limel-shortcut.cjs.entry.js +8 -3
- package/dist/collection/components/button-group/button-group.css +13 -15
- package/dist/collection/components/button-group/button-group.js +18 -6
- package/dist/collection/components/card/card.js +5 -3
- package/dist/collection/components/info-tile/info-tile.js +8 -3
- package/dist/collection/components/shortcut/shortcut.js +7 -2
- package/dist/collection/util/3d-tilt-hover-effect.js +50 -10
- package/dist/esm/{3d-tilt-hover-effect-5eP2N9QI.js → 3d-tilt-hover-effect-CllX3RLB.js} +50 -10
- package/dist/esm/limel-button-group.entry.js +17 -6
- package/dist/esm/limel-card.entry.js +6 -4
- package/dist/esm/limel-info-tile.entry.js +9 -4
- package/dist/esm/limel-shortcut.entry.js +8 -3
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-0c47d262.entry.js +1 -0
- package/dist/lime-elements/p-25555311.entry.js +1 -0
- package/dist/lime-elements/p-CllX3RLB.js +1 -0
- package/dist/lime-elements/p-b03367f0.entry.js +1 -0
- package/dist/lime-elements/p-c0a03b7c.entry.js +1 -0
- package/dist/types/components/button/button.types.d.ts +10 -0
- package/dist/types/components/button-group/button-group.d.ts +5 -1
- package/dist/types/components/card/card.d.ts +1 -0
- package/dist/types/components/info-tile/info-tile.d.ts +2 -0
- package/dist/types/components/shortcut/shortcut.d.ts +2 -0
- package/dist/types/components.d.ts +6 -2
- package/dist/types/util/3d-tilt-hover-effect.d.ts +34 -4
- package/package.json +2 -2
- package/dist/lime-elements/p-51cb779f.entry.js +0 -1
- package/dist/lime-elements/p-5eP2N9QI.js +0 -1
- package/dist/lime-elements/p-7df111bb.entry.js +0 -1
- package/dist/lime-elements/p-92bbb643.entry.js +0 -1
- package/dist/lime-elements/p-ad4672b2.entry.js +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,20 @@
|
|
|
1
|
+
## [40.2.1](https://github.com/Lundalogik/lime-elements/compare/v40.2.0...v40.2.1) (2026-09-09)
|
|
2
|
+
|
|
3
|
+
### Bug Fixes
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
* **card:** remove the 3d tilt listener when the card is disconnected ([cbc77bb](https://github.com/Lundalogik/lime-elements/commit/cbc77bb3872e654a3621bf60cc6485b0c0793f74)), closes [#4282](https://github.com/Lundalogik/lime-elements/issues/4282)
|
|
7
|
+
* **info-tile:** remove the 3d tilt listener when the tile is disconnected ([3c984c1](https://github.com/Lundalogik/lime-elements/commit/3c984c15e55e8482ddbeab6c65fc849775b74caa)), closes [#4282](https://github.com/Lundalogik/lime-elements/issues/4282)
|
|
8
|
+
* **shortcut:** remove the 3d tilt listener when the shortcut is disconnected ([8e38b88](https://github.com/Lundalogik/lime-elements/commit/8e38b88270e0bb7ca387d453af78c54e909155a5)), closes [#4282](https://github.com/Lundalogik/lime-elements/issues/4282)
|
|
9
|
+
* stop the 3d tilt hover effect stranding a mousemove listener ([5165904](https://github.com/Lundalogik/lime-elements/commit/516590401e00995c8b1dec7bbe20018b4c57e1d5)), closes [#4282](https://github.com/Lundalogik/lime-elements/issues/4282)
|
|
10
|
+
|
|
11
|
+
## [40.2.0](https://github.com/Lundalogik/lime-elements/compare/v40.1.1...v40.2.0) (2026-09-07)
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
* **button-group:** support disabling individual buttons ([3fa1726](https://github.com/Lundalogik/lime-elements/commit/3fa1726c6ea8613ad53732d6fdc4ab1d786711d6))
|
|
17
|
+
|
|
1
18
|
## [40.1.1](https://github.com/Lundalogik/lime-elements/compare/v40.1.0...v40.1.1) (2026-09-07)
|
|
2
19
|
|
|
3
20
|
### Bug Fixes
|
|
@@ -52,7 +52,8 @@
|
|
|
52
52
|
* 3. **Initialize in your component**:
|
|
53
53
|
*
|
|
54
54
|
* Use `getMouseEventHandlers()` to attach the required mouse event listeners
|
|
55
|
-
* to the "interactive element" (`the-3d-element`)
|
|
55
|
+
* to the "interactive element" (`the-3d-element`), and call the `cleanup()` it
|
|
56
|
+
* returns when the component is disconnected. For example:
|
|
56
57
|
*
|
|
57
58
|
* ```tsx
|
|
58
59
|
* @Element()
|
|
@@ -60,16 +61,30 @@
|
|
|
60
61
|
*
|
|
61
62
|
* private handleMouseEnter: () => void;
|
|
62
63
|
* private handleMouseLeave: () => void;
|
|
64
|
+
* private cleanup3dHoverEffect?: () => void;
|
|
63
65
|
*
|
|
64
66
|
* public componentWillLoad() {
|
|
65
|
-
* const { handleMouseEnter, handleMouseLeave } =
|
|
66
|
-
*
|
|
67
|
-
*
|
|
67
|
+
* const { handleMouseEnter, handleMouseLeave, cleanup } =
|
|
68
|
+
* getMouseEventHandlers(
|
|
69
|
+
* this.host.querySelector<HTMLElement>('.the-3d-element'),
|
|
70
|
+
* );
|
|
68
71
|
* this.handleMouseEnter = handleMouseEnter;
|
|
69
72
|
* this.handleMouseLeave = handleMouseLeave;
|
|
73
|
+
* this.cleanup3dHoverEffect = cleanup;
|
|
74
|
+
* }
|
|
75
|
+
*
|
|
76
|
+
* public disconnectedCallback() {
|
|
77
|
+
* this.cleanup3dHoverEffect?.();
|
|
70
78
|
* }
|
|
71
79
|
* ```
|
|
72
80
|
*
|
|
81
|
+
* Call it optionally: `disconnectedCallback` can run before
|
|
82
|
+
* `componentWillLoad` has assigned the field.
|
|
83
|
+
*
|
|
84
|
+
* Skipping the `disconnectedCallback` leaks a `document` level `mousemove`
|
|
85
|
+
* listener every time the element is removed while it is being hovered, and
|
|
86
|
+
* leaves a moved element stuck at the angle it was last tilted to.
|
|
87
|
+
*
|
|
73
88
|
* 4. **Attach event handlers in your render method**:
|
|
74
89
|
*
|
|
75
90
|
* ```tsx
|
|
@@ -135,19 +150,44 @@ const tiltFollowingTheCursor = (the3dElementBounds, element) => (e) => {
|
|
|
135
150
|
};
|
|
136
151
|
const getMouseEventHandlers = (element) => {
|
|
137
152
|
let tiltCallback;
|
|
153
|
+
/**
|
|
154
|
+
* Stops following the cursor and returns the element to rest.
|
|
155
|
+
*
|
|
156
|
+
* Safe to call when tracking never started, and safe to call on an
|
|
157
|
+
* element that has already been detached.
|
|
158
|
+
*/
|
|
159
|
+
const stopTracking = () => {
|
|
160
|
+
document.removeEventListener('mousemove', tiltCallback);
|
|
161
|
+
element.style.removeProperty('--limel-3d-hover-effect-rotate3d');
|
|
162
|
+
element.style.removeProperty('--limel-3d-hover-effect-glow-position');
|
|
163
|
+
};
|
|
138
164
|
const handleMouseEnter = () => {
|
|
165
|
+
// A second `mouseenter` without an intervening `mouseleave` would
|
|
166
|
+
// otherwise strand the previous callback on `document` with nothing
|
|
167
|
+
// left holding a reference to remove it with.
|
|
168
|
+
stopTracking();
|
|
139
169
|
const bounds = element.getBoundingClientRect();
|
|
140
170
|
tiltCallback = tiltFollowingTheCursor(bounds, element);
|
|
141
171
|
document.addEventListener('mousemove', tiltCallback);
|
|
142
172
|
};
|
|
143
|
-
const handleMouseLeave = () => {
|
|
144
|
-
document.removeEventListener('mousemove', tiltCallback);
|
|
145
|
-
element.style.removeProperty('--limel-3d-hover-effect-rotate3d');
|
|
146
|
-
element.style.removeProperty('--limel-3d-hover-effect-glow-position');
|
|
147
|
-
};
|
|
148
173
|
return {
|
|
149
174
|
handleMouseEnter: handleMouseEnter,
|
|
150
|
-
handleMouseLeave:
|
|
175
|
+
handleMouseLeave: stopTracking,
|
|
176
|
+
/**
|
|
177
|
+
* The same teardown as `handleMouseLeave`, for the case where no
|
|
178
|
+
* `mouseleave` is coming.
|
|
179
|
+
*
|
|
180
|
+
* `mouseleave` never fires for an element that is removed from the
|
|
181
|
+
* DOM while the pointer is still over it, which in a single page
|
|
182
|
+
* application is the ordinary case: a click routes away from the
|
|
183
|
+
* view holding the element. It does not fire when the element is
|
|
184
|
+
* merely moved within the DOM either, and a move disconnects the
|
|
185
|
+
* component just like a removal does. Call this from
|
|
186
|
+
* `disconnectedCallback` so the listener does not outlive the
|
|
187
|
+
* element it tilts, and so a moved element does not stay stuck at
|
|
188
|
+
* the angle it was last tilted to.
|
|
189
|
+
*/
|
|
190
|
+
cleanup: stopTracking,
|
|
151
191
|
};
|
|
152
192
|
};
|
|
153
193
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var index = require('./index-DYg_7kkT.js');
|
|
4
4
|
var randomString = require('./random-string-BTzDB2ee.js');
|
|
5
5
|
|
|
6
|
-
const buttonGroupCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}:host(limel-button-group){display:flex;box-sizing:border-box;align-items:center;border-radius:3.75rem;background-color:var(--button-group-background-color, rgb(var(--contrast-400)));width:max-content;max-width:100%;flex-wrap:nowrap}:
|
|
6
|
+
const buttonGroupCss = () => `@charset "UTF-8";*,*:before,*:after{box-sizing:border-box}:host(limel-button-group){display:flex;box-sizing:border-box;align-items:center;border-radius:3.75rem;background-color:var(--button-group-background-color, rgb(var(--contrast-400)));width:max-content;max-width:100%;flex-wrap:nowrap}.button{color:var(--limel-theme-on-surface-color)}.button:not(:has(:disabled)){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}.button:not(:has(:disabled)):hover,.button:not(:has(:disabled)):focus,.button:not(:has(:disabled)):focus-visible{will-change:color, background-color, box-shadow, transform}.button:not(:has(:disabled)):hover,.button:not(:has(:disabled)):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.button:not(:has(:disabled)):hover{box-shadow:var(--button-shadow-hovered)}.button:not(:has(:disabled)):active{--limel-clickable-transform-timing-function:cubic-bezier( 0.83, -0.15, 0.49, 1.16 );transform:translate3d(0, 0.05rem, 0);background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset-pressed)}.button:not(:has(:disabled)):hover,.button:not(:has(:disabled)):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.button{position:relative;display:inline-grid;grid-auto-flow:column;align-items:center;max-width:100%;min-width:2rem;height:2rem;padding:0 0.0625rem;margin:0.125rem;border-radius:1rem;font-size:var(--limel-theme-default-font-size);user-select:none}.button:not(:last-child):after{content:"";display:block;height:1rem;width:0.125rem;border-radius:0.25rem;background-color:var(--button-group-text-color, rgb(var(--contrast-1200)));opacity:0.1;position:absolute;right:-0.1875rem;top:0;bottom:0;margin:auto}.button label{cursor:pointer;transition:color 0.2s ease;display:flex;align-items:center;flex:1;height:100%;min-width:0}.button label:has(>limel-badge) .button__label{padding-right:0.25rem}.button:has(:disabled) label{cursor:not-allowed;opacity:0.4}.button input[type=radio]{position:absolute;width:0;opacity:0}.button input[type=radio]:focus-visible+label:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:3.75rem;box-shadow:var(--shadow-depth-8-focused)}.button:focus-within{outline:none;color:var(--lime-primary-color, var(--limel-theme-primary-color))}.button:only-child .button__label{padding-left:0.75rem}.button:first-child .button__label{padding-left:0.75rem}.button.button--selected{background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset);color:var(--lime-primary-color, var(--limel-theme-primary-color))}.button.button--selected:not(:has(:disabled)):active{box-shadow:var(--button-shadow-inset-pressed)}.button__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--limel-theme-default-small-font-size);padding:0 0.75rem}.button__icon{border-radius:50%;vertical-align:middle}limel-badge{margin-right:0.25rem;pointer-events:none}.button:not(.button--selected){--badge-background-color:rgb(var(--contrast-200))}`;
|
|
7
7
|
|
|
8
8
|
const ButtonGroup = class {
|
|
9
9
|
constructor(hostRef) {
|
|
@@ -14,7 +14,10 @@ const ButtonGroup = class {
|
|
|
14
14
|
*/
|
|
15
15
|
this.value = [];
|
|
16
16
|
/**
|
|
17
|
-
* True if the button-group should be disabled
|
|
17
|
+
* True if the button-group should be disabled.
|
|
18
|
+
*
|
|
19
|
+
* Disables every button in the group, regardless of the `disabled` value
|
|
20
|
+
* of each individual button.
|
|
18
21
|
*/
|
|
19
22
|
this.disabled = false;
|
|
20
23
|
this.radioGroupName = randomString.createRandomString();
|
|
@@ -32,17 +35,18 @@ const ButtonGroup = class {
|
|
|
32
35
|
this.setSelectedButton();
|
|
33
36
|
}
|
|
34
37
|
render() {
|
|
35
|
-
return (index.h(index.Host, { key: '
|
|
38
|
+
return (index.h(index.Host, { key: '7823fd4593ee4eddb6d56ce55e7ff5eb1cc28397', role: "radiogroup" }, this.value.map(this.renderButton)));
|
|
36
39
|
}
|
|
37
40
|
renderButton(button) {
|
|
38
41
|
// Prefix with 'b' because html IDs cannot start with a digit,
|
|
39
42
|
// and we need to differentiate from the ID on the limel-icon. /Ads
|
|
40
43
|
const buttonId = `b${button.id}`;
|
|
44
|
+
const isDisabled = this.disabled || button.disabled;
|
|
41
45
|
const classes = {
|
|
42
46
|
button: true,
|
|
43
47
|
'button--selected': this.isButtonChecked(button),
|
|
44
48
|
};
|
|
45
|
-
return (index.h("div", { class: classes }, index.h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), disabled:
|
|
49
|
+
return (index.h("div", { class: classes }, index.h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), disabled: isDisabled, "aria-disabled": isDisabled ? 'true' : 'false', id: buttonId, onChange: this.onChange }), index.h("label", { htmlFor: buttonId }, this.renderContent(button), this.renderBadge(button))));
|
|
46
50
|
}
|
|
47
51
|
renderContent(button) {
|
|
48
52
|
if (button.icon) {
|
|
@@ -75,10 +79,17 @@ const ButtonGroup = class {
|
|
|
75
79
|
event.stopPropagation();
|
|
76
80
|
const target = event.target;
|
|
77
81
|
// The ID is prefixed with `b` in the HTML, remember? /Ads
|
|
78
|
-
|
|
82
|
+
const buttonId = target.id.slice(1);
|
|
79
83
|
const button = this.value.find((item) => {
|
|
80
|
-
return item.id ===
|
|
84
|
+
return item.id === buttonId;
|
|
81
85
|
});
|
|
86
|
+
// The `disabled` attribute on the input already stops the browser
|
|
87
|
+
// from getting here. This makes it hold even if the attribute is
|
|
88
|
+
// removed from the DOM, or a `change` event is dispatched by hand.
|
|
89
|
+
if (!button || this.disabled || button.disabled) {
|
|
90
|
+
return;
|
|
91
|
+
}
|
|
92
|
+
this.selectedButtonId = buttonId;
|
|
82
93
|
this.change.emit(button);
|
|
83
94
|
}
|
|
84
95
|
valueChanged() {
|
|
@@ -4,7 +4,7 @@ var index = require('./index-DYg_7kkT.js');
|
|
|
4
4
|
var image_template = require('./image.template-DZC6_5a4.js');
|
|
5
5
|
var isItem = require('./is-item-DMELyaao.js');
|
|
6
6
|
var getIconProps = require('./get-icon-props-CwpDdQDI.js');
|
|
7
|
-
var _3dTiltHoverEffect = require('./3d-tilt-hover-effect-
|
|
7
|
+
var _3dTiltHoverEffect = require('./3d-tilt-hover-effect-Da8Dh_JX.js');
|
|
8
8
|
|
|
9
9
|
const cardCss = () => `@charset "UTF-8";*{box-sizing:border-box;min-width:0;min-height:0}:host(limel-card){display:flex;border-radius:var(--card-border-radius, 0.95rem)}section{box-sizing:border-box;display:flex;gap:0.5rem;flex-direction:column}:host(limel-card[orientation=landscape]) section{flex-direction:row}section{width:100%;border-radius:var(--card-border-radius, 0.95rem);border:1px solid rgb(var(--contrast-500));padding:0.25rem;background-color:var(--card-background-color, rgb(var(--contrast-300)))}:host(limel-card[clickable]) section,:host(limel-card[show-3d-effect]) section{position:relative;transition-duration:0.8s;transition-property:transform, box-shadow, background-color;transition-timing-function:ease-out;transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg)}:host(limel-card[clickable]) section:focus,:host(limel-card[show-3d-effect]) section:focus{outline:none}:host(limel-card[clickable]) section:hover,:host(limel-card[clickable]) section:focus,:host(limel-card[clickable]) section:focus-visible,:host(limel-card[clickable]) section:focus-within,:host(limel-card[show-3d-effect]) section:hover,:host(limel-card[show-3d-effect]) section:focus,:host(limel-card[show-3d-effect]) section:focus-visible,:host(limel-card[show-3d-effect]) section:focus-within{will-change:background-color, box-shadow, transform}:host(limel-card[clickable]) section:hover,:host(limel-card[clickable]) section:focus,:host(limel-card[clickable]) section:focus-visible,:host(limel-card[clickable]) section:active,:host(limel-card[show-3d-effect]) section:hover,:host(limel-card[show-3d-effect]) section:focus,:host(limel-card[show-3d-effect]) section:focus-visible,:host(limel-card[show-3d-effect]) section:active{transition-duration:0.2s}:host(limel-card[clickable]) section:hover,:host(limel-card[clickable]) section:focus-visible,:host(limel-card[show-3d-effect]) section:hover,:host(limel-card[show-3d-effect]) section:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}:host(limel-card[clickable]) section:hover,:host(limel-card[show-3d-effect]) section:hover{transform:scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d))}:host(limel-card[clickable]) section:focus-visible,:host(limel-card[show-3d-effect]) section:focus-visible{outline:none;transform:scale3d(1.01, 1.01, 1.01)}:host(limel-card[clickable]) section:hover limel-3d-hover-effect-glow,:host(limel-card[show-3d-effect]) section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.5}@media (prefers-reduced-motion){:host(limel-card[clickable]) section:hover limel-3d-hover-effect-glow,:host(limel-card[show-3d-effect]) section:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.2}}:host(limel-card[clickable]) section{cursor:pointer;box-shadow:var(--button-shadow-normal)}:host(limel-card[clickable]) section:hover,:host(limel-card[clickable]) section:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}:host(limel-card[clickable]) section:active{transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);box-shadow:var(--button-shadow-pressed)}:host(limel-card[clickable]) section:focus-visible{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-hovered)}:host(limel-card[clickable]) section:focus-visible:active{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-pressed)}:host(limel-card[clickable]) section:hover{border-color:transparent;background-color:var(--card-background-color--hovered, var(--card-background-color, rgb(var(--contrast-200))))}.body{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem}.image-wrapper{flex-shrink:0;display:flex;align-items:center;justify-content:center}:host(limel-card[orientation=portrait]) .image-wrapper{width:100%}:host(limel-card[orientation=landscape]) .image-wrapper{flex-shrink:0;max-width:40%;height:100%}:host(limel-card[orientation=landscape]) .image-wrapper img{height:100%}img{transition:filter 0.6s ease;object-fit:cover;border-radius:calc(var(--card-border-radius, 0.95rem) / 1.4);min-width:0.5rem;min-height:0.5rem;max-width:100%;max-height:100%}:host(limel-card[show-3d-effect]) section:hover img,:host(limel-card[show-3d-effect]) section:focus-visible img{transition-duration:0.2s;filter:saturate(1.3)}.markdown-wrapper{position:relative;flex-grow:1;display:flex;flex-direction:column}.markdown-wrapper limel-markdown{overflow-y:auto;flex-grow:1;padding:0.5rem 0.75rem}.markdown-wrapper::before{top:0;background:radial-gradient(farthest-side at 50% 0%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0))}.markdown-wrapper::after{bottom:0;background:radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0))}.markdown-wrapper::before,.markdown-wrapper::after{content:"";pointer-events:none;position:absolute;right:0;left:0;height:0.75rem;opacity:0;transition:opacity 0.6s ease;background-repeat:no-repeat}.markdown-wrapper.can-scroll-up::before,.markdown-wrapper.can-scroll-down::after{opacity:1}header{flex-shrink:0;display:flex;justify-content:center;gap:0.5rem;padding:0.25rem 0.75rem}:host(limel-card[orientation=landscape]) header{padding-top:0.5rem}header:has(limel-icon){padding-left:0.25rem}header .headings{flex-grow:1;display:flex;flex-direction:column;gap:0.125rem}header .title{padding-right:1.25rem}header limel-icon{flex-shrink:0;width:2rem}header h1{font-size:1.125rem;font-weight:500;color:var(--card-heading-color, rgb(var(--contrast-1100)));letter-spacing:-0.03125rem}header h2{font-size:var(--limel-theme-default-font-size);font-weight:400;color:var(--card-subheading-color, rgb(var(--contrast-1000)))}header h1,header h2{word-break:break-word;hyphens:auto;-webkit-hyphens:auto;margin:0}limel-action-bar{flex-shrink:0;--action-bar-background-color:transparent;margin-left:auto}limel-3d-hover-effect-glow{border-radius:var(--card-border-radius, 0.95rem)}:host(limel-card[show-3d-effect]){isolation:isolate;transform-style:preserve-3d;perspective:1000px}@media (prefers-reduced-motion){:host(limel-card[show-3d-effect]){perspective:2000px}}:host(limel-card[selected]) section,:host(limel-card[selected]) section:hover,:host(limel-card[selected]) section:focus-visible,:host(limel-card[selected]) section:active{box-shadow:var(--shadow-focused-state)}`;
|
|
10
10
|
|
|
@@ -94,20 +94,22 @@ const Card = class {
|
|
|
94
94
|
};
|
|
95
95
|
}
|
|
96
96
|
componentWillLoad() {
|
|
97
|
-
const { handleMouseEnter, handleMouseLeave } = _3dTiltHoverEffect.getMouseEventHandlers(this.host);
|
|
97
|
+
const { handleMouseEnter, handleMouseLeave, cleanup } = _3dTiltHoverEffect.getMouseEventHandlers(this.host);
|
|
98
98
|
this.handleMouseEnter = handleMouseEnter;
|
|
99
99
|
this.handleMouseLeave = handleMouseLeave;
|
|
100
|
+
this.cleanup3dHoverEffect = cleanup;
|
|
100
101
|
}
|
|
101
102
|
disconnectedCallback() {
|
|
102
|
-
var _a, _b;
|
|
103
|
+
var _a, _b, _c;
|
|
103
104
|
(_a = this.markdownResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
104
105
|
(_b = this.markdownElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('scroll', this.checkIfScrollable);
|
|
106
|
+
(_c = this.cleanup3dHoverEffect) === null || _c === void 0 ? void 0 : _c.call(this);
|
|
105
107
|
}
|
|
106
108
|
componentDidLoad() {
|
|
107
109
|
this.setMarkdownElement(this.markdownElement);
|
|
108
110
|
}
|
|
109
111
|
render() {
|
|
110
|
-
return (index.h(index.Host, { key: '
|
|
112
|
+
return (index.h(index.Host, { key: '5714b1e5154ed8637c99f71d5a303dfc7ca51a51', onMouseEnter: this.show3dEffect ? this.handleMouseEnter : undefined, onMouseLeave: this.show3dEffect ? this.handleMouseLeave : undefined }, index.h("section", { key: 'f6592febd86d2869a86e7561e3c2136c7862ad17', tabindex: this.clickable ? 0 : undefined, role: this.clickable ? 'button' : undefined, "aria-pressed": this.clickable ? String(this.selected) : undefined, onKeyDown: this.clickable ? this.handleKeyDown : undefined }, this.renderImage(), index.h("div", { key: '2955544b5bb10cec45591189591b6c7c64d844e5', class: "body" }, this.renderHeader(), this.renderSlot(), this.renderValue(), this.renderActionBar()), this.show3dEffect && index.h("limel-3d-hover-effect-glow", { key: '62f1d894a1feceb89cd44963cdb8ae9ba201ff6c' }))));
|
|
111
113
|
}
|
|
112
114
|
renderImage() {
|
|
113
115
|
var _a;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DYg_7kkT.js');
|
|
4
|
-
var _3dTiltHoverEffect = require('./3d-tilt-hover-effect-
|
|
4
|
+
var _3dTiltHoverEffect = require('./3d-tilt-hover-effect-Da8Dh_JX.js');
|
|
5
5
|
var linkHelper = require('./link-helper-DwlfFJVL.js');
|
|
6
6
|
|
|
7
7
|
const infoTileCss = () => `@charset "UTF-8";:host(limel-info-tile){--badge-text-color:var( --info-tile-badge-text-color, rgb(var(--color-white)) );--badge-background-color:var( --info-tile-badge-background-color, rgb(var(--color-red-default)) );--circular-progress-text-color:var( --info-tile-progress-text-color, var(--info-tile-text-color) );--circular-progress-suffix-color:var(--info-tile-progress-suffix-color);--circular-progress-prefix-color:var(--info-tile-progress-prefix-color);--circular-progress-track-color:rgb(var(--contrast-800), 0.3);--circular-progress-fill-color:var(--info-tile-progress-fill-color);--circular-progress-background-color:var( --info-tile-progress-background-color, var(--info-tile-background-color) );--label-min-size:0.75rem;--label-preferred-size:6cqw;--label-max-size:1rem;--value-min-size:1rem;--value-preferred-size:20cqw;--value-max-size:4rem;--suffix-prefix-min-size:0.75rem;--suffix-prefix-preferred-size:8cqw;--suffix-prefix-max-size:1.5rem;--icon-min-size:2rem;--icon-preferred-size:60cqh;--icon-max-size:calc(100cqw - 0.5rem);container-type:size;position:relative;display:flex;width:100%;height:100%;transition:filter 0.4s ease, opacity 0.25s ease}:host(limel-info-tile) *{box-sizing:border-box}:host(limel-info-tile[reduced-presence]){filter:saturate(0.1);opacity:0.4}:host(limel-info-tile[reduced-presence]:hover),:host(limel-info-tile[reduced-presence]:focus-within){filter:none;opacity:1}:host(limel-info-tile[disabled]) a{opacity:0.4;cursor:not-allowed}a{all:unset;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;height:100%;width:100%;flex-grow:1;padding:0.25rem 1rem 0.5rem 1rem;border-radius:var(--info-tile-border-radius, 1rem);background-color:var(--info-tile-background-color, var(--lime-elevated-surface-background-color))}:host ::slotted([slot=primary]){width:100%;height:100%}.icon{z-index:1;position:absolute;top:0.5rem;right:0.75rem;padding:0.25rem;aspect-ratio:1/1;color:var(--info-tile-icon-color, rgb(var(--contrast-1000)));opacity:0.9;border-radius:0;height:clamp(var(--icon-min-size), var(--icon-preferred-size), var(--icon-max-size))}@supports not (container-type: size){.icon{width:max(10%, 3rem)}}:host(.has-primary-slot-content) .icon,a:has(limel-circular-progress) .icon{top:unset;bottom:0.5rem;--icon-min-size:1.5rem;--icon-preferred-size:20cqh}slot[name=primary]{display:block;aspect-ratio:1;width:min(var(--icon-preferred-size), var(--icon-max-size))}.progress,slot[name=primary]{position:absolute;top:0.75rem;right:0.75rem}.progress{--circular-progress-size:min( var(--icon-preferred-size), var(--icon-max-size) )}@supports not (container-type: size){.progress{--circular-progress-size:initial}}.label{z-index:1;color:var(--info-tile-text-color, rgb(var(--contrast-1100)));opacity:0.8;line-height:1.2;font-size:clamp(var(--label-min-size), var(--label-preferred-size), var(--label-max-size))}@supports not (container-type: size){.label{font-size:var(--limel-theme-default-font-size)}}.label{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}limel-badge{position:absolute;top:-0.25rem;right:-0.25rem}limel-linear-progress{--lime-primary-color:var(--info-tile-text-color);position:absolute;inset:auto 0 0 0}.value-group{position:relative;z-index:1;display:flex;flex-direction:column;color:var(--info-tile-text-color, rgb(var(--contrast-1100)))}.value-and-suffix,.label{text-shadow:0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)))}.value-and-suffix{display:flex}.prefix,.suffix{font-size:clamp(var(--suffix-prefix-min-size), var(--suffix-prefix-preferred-size), var(--suffix-prefix-max-size));opacity:0.7}@supports not (container-type: size){.prefix,.suffix{font-size:0.75rem}}.prefix{align-self:flex-start;line-height:normal;transform:translateY(40%)}.value{transition:opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);transform-origin:left;transform:translate3d(0, 0, 0) scale(1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:bold;line-height:normal;font-size:clamp(var(--value-min-size), var(--value-preferred-size), var(--value-max-size))}@supports not (container-type: size){.value{font-size:1.5rem}}:host(limel-info-tile[loading]) .value{opacity:0.3;transform:translate3d(0, 0, 0) scale(0.9)}.suffix{transform:translateY(10%)}@container (width < 8rem){.progress,slot[name=primary]{top:0.25rem;right:0.25rem}a{padding:0.375rem;gap:0.125rem}.icon{opacity:0.7;top:0.125rem;right:0.125rem;padding:0.125rem;--icon-preferred-size:18cqw;--icon-max-size:2rem}.value-group{gap:0.125rem}.value-and-suffix,.label{text-shadow:0 0 1rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100)))}.prefix,.suffix{--suffix-prefix-min-size:0.625rem;--suffix-prefix-preferred-size:6cqw;--suffix-prefix-max-size:0.75rem}}@container (width < 18.75rem){.progress,slot[name=primary]{top:0.5rem;right:0.5rem}.icon{top:0.25rem;right:0.5rem}:host(.has-primary-slot-content) .icon,a:has(limel-circular-progress) .icon{right:0.25rem;bottom:0.25rem}}@container (width < 40.5rem){.value.ch-1,.value.ch-2,.value.ch-3,.value.ch-4{--value-preferred-size:20cqw}.value.ch-5{--value-preferred-size:18cqw}.value.ch-6{--value-preferred-size:17cqw}.value.ch-7{--value-preferred-size:16cqw}.value.ch-8{--value-preferred-size:15cqw}.value.ch-9{--value-preferred-size:14cqw}.value{--value-preferred-size:13cqw}}@container (height > 8rem){a{padding-top:0.75rem;padding-bottom:1rem}}@container (height < 8rem) and (width > 8rem){.value{--value-preferred-size:32cqh !important}.suffix,.prefix{--suffix-prefix-preferred-size:16cqh !important}}@container (height > 18.75rem){.progress,slot[name=primary],.icon{position:relative;top:unset;right:unset}a{align-items:center;justify-content:center}.label{text-align:center}:host(.has-primary-slot-content) .icon,a:has(limel-circular-progress) .icon{position:absolute;top:0.5rem;right:0.5rem;--icon-max-size:3rem}}limel-3d-hover-effect-glow{border-radius:var(--info-tile-border-radius, 1rem)}:host(limel-info-tile){isolation:isolate;transform-style:preserve-3d;perspective:1000px}@media (prefers-reduced-motion){:host(limel-info-tile){perspective:2000px}}a{position:relative;transition-duration:0.8s;transition-property:transform, box-shadow, background-color;transition-timing-function:ease-out;transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg)}a:focus{outline:none}a:hover,a:focus,a:focus-visible,a:focus-within{will-change:background-color, box-shadow, transform}a:hover,a:focus,a:focus-visible,a:active{transition-duration:0.2s}a:hover,a:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}a:hover{transform:scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d))}a:focus-visible{outline:none;transform:scale3d(1.01, 1.01, 1.01)}a:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.5}@media (prefers-reduced-motion){a:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.2}}a.is-clickable{cursor:pointer;box-shadow:var(--button-shadow-normal)}a.is-clickable:hover,a.is-clickable:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}a.is-clickable:active{transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);box-shadow:var(--button-shadow-pressed)}a.is-clickable:focus-visible{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-hovered)}a.is-clickable:focus-visible:active{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-pressed)}`;
|
|
@@ -92,11 +92,16 @@ const InfoTile = class {
|
|
|
92
92
|
};
|
|
93
93
|
}
|
|
94
94
|
componentWillLoad() {
|
|
95
|
-
const { handleMouseEnter, handleMouseLeave } = _3dTiltHoverEffect.getMouseEventHandlers(this.host);
|
|
95
|
+
const { handleMouseEnter, handleMouseLeave, cleanup } = _3dTiltHoverEffect.getMouseEventHandlers(this.host);
|
|
96
96
|
this.handleMouseEnter = handleMouseEnter;
|
|
97
97
|
this.handleMouseLeave = handleMouseLeave;
|
|
98
|
+
this.cleanup3dHoverEffect = cleanup;
|
|
98
99
|
this.updateHasPrimarySlotContent();
|
|
99
100
|
}
|
|
101
|
+
disconnectedCallback() {
|
|
102
|
+
var _a;
|
|
103
|
+
(_a = this.cleanup3dHoverEffect) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
104
|
+
}
|
|
100
105
|
render() {
|
|
101
106
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
102
107
|
const extendedAriaLabel = this.checkProps(this === null || this === void 0 ? void 0 : this.prefix) +
|
|
@@ -111,9 +116,9 @@ const InfoTile = class {
|
|
|
111
116
|
this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
|
|
112
117
|
const link = this.disabled ? '#' : (_e = this.link) === null || _e === void 0 ? void 0 : _e.href;
|
|
113
118
|
const rel = linkHelper.getRel((_f = this.link) === null || _f === void 0 ? void 0 : _f.target, (_g = this.link) === null || _g === void 0 ? void 0 : _g.rel);
|
|
114
|
-
return (index.h(index.Host, { key: '
|
|
119
|
+
return (index.h(index.Host, { key: 'b3415c1b5881c6deb73d4ab9fe86d137037bc60e', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, index.h("a", { key: 'de292609a60d7bfe1eef9c4818bd76e59a4669ad', title: (_h = this.link) === null || _h === void 0 ? void 0 : _h.title, href: link, target: (_j = this.link) === null || _j === void 0 ? void 0 : _j.target, rel: rel, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
|
|
115
120
|
'is-clickable': !!((_k = this.link) === null || _k === void 0 ? void 0 : _k.href) && !this.disabled,
|
|
116
|
-
} }, this.renderIcon(), this.renderProgress(), index.h("slot", { key: '
|
|
121
|
+
} }, this.renderIcon(), this.renderProgress(), index.h("slot", { key: '5133aac5b5f86165009946bcfa498a6d7a93d0ac', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), index.h("div", { key: '53df85a8b3229b3cc25af42f998d4605810546ae', class: "value-group" }, this.renderPrefix(), index.h("div", { key: 'dcf7509dfcd104885036dd0e16c391e1a2e7ff07', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), index.h("limel-3d-hover-effect-glow", { key: '62ae587e9e96f39102f1a00211f3fe9825edea44' })), this.renderNotification()));
|
|
117
122
|
}
|
|
118
123
|
checkProps(propValue) {
|
|
119
124
|
return propValue ? propValue + ' ' : '';
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var index = require('./index-DYg_7kkT.js');
|
|
4
4
|
var linkHelper = require('./link-helper-DwlfFJVL.js');
|
|
5
|
-
var _3dTiltHoverEffect = require('./3d-tilt-hover-effect-
|
|
5
|
+
var _3dTiltHoverEffect = require('./3d-tilt-hover-effect-Da8Dh_JX.js');
|
|
6
6
|
|
|
7
7
|
const shortcutCss = () => `@charset "UTF-8";:host(limel-shortcut){--badge-text-color:var( --shortcut-badge-text-color, rgb(var(--color-white)) );--badge-background-color:var( --shortcut-badge-background-color, rgb(var(--color-red-default)) );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;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, var(--lime-elevated-surface-background-color))}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.25rem;right:0.125rem}limel-3d-hover-effect-glow{border-radius:var(--shortcut-border-radius, 1rem)}:host(limel-shortcut){isolation:isolate;transform-style:preserve-3d;perspective:1000px}@media (prefers-reduced-motion){:host(limel-shortcut){perspective:2000px}}a{position:relative;transition-duration:0.8s;transition-property:transform, box-shadow, background-color;transition-timing-function:ease-out;transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg)}a:focus{outline:none}a:hover,a:focus,a:focus-visible,a:focus-within{will-change:background-color, box-shadow, transform}a:hover,a:focus,a:focus-visible,a:active{transition-duration:0.2s}a:hover,a:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}a:hover{transform:scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d))}a:focus-visible{outline:none;transform:scale3d(1.01, 1.01, 1.01)}a:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.5}@media (prefers-reduced-motion){a:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.2}}a{cursor:pointer;box-shadow:var(--button-shadow-normal)}a:hover,a:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}a:active{transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);box-shadow:var(--button-shadow-pressed)}a:focus-visible{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-hovered)}a:focus-visible:active{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-pressed)}`;
|
|
8
8
|
|
|
@@ -41,14 +41,19 @@ const Shortcut = class {
|
|
|
41
41
|
};
|
|
42
42
|
}
|
|
43
43
|
componentWillLoad() {
|
|
44
|
-
const { handleMouseEnter, handleMouseLeave } = _3dTiltHoverEffect.getMouseEventHandlers(this.host);
|
|
44
|
+
const { handleMouseEnter, handleMouseLeave, cleanup } = _3dTiltHoverEffect.getMouseEventHandlers(this.host);
|
|
45
45
|
this.handleMouseEnter = handleMouseEnter;
|
|
46
46
|
this.handleMouseLeave = handleMouseLeave;
|
|
47
|
+
this.cleanup3dHoverEffect = cleanup;
|
|
48
|
+
}
|
|
49
|
+
disconnectedCallback() {
|
|
50
|
+
var _a;
|
|
51
|
+
(_a = this.cleanup3dHoverEffect) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
47
52
|
}
|
|
48
53
|
render() {
|
|
49
54
|
var _a, _b, _c, _d, _e;
|
|
50
55
|
const rel = linkHelper.getRel((_a = this.link) === null || _a === void 0 ? void 0 : _a.target, (_b = this.link) === null || _b === void 0 ? void 0 : _b.rel);
|
|
51
|
-
return (index.h(index.Host, { key: '
|
|
56
|
+
return (index.h(index.Host, { key: '5182738d7d2e8c2df2aa019631af021260b6b506', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, index.h("a", { key: 'ed8ae8d341aca2d64376c0b154b41b03d1d08073', "aria-disabled": this.disabled, href: (_c = this.link) === null || _c === void 0 ? void 0 : _c.href, target: (_d = this.link) === null || _d === void 0 ? void 0 : _d.target, rel: rel, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_e = this.link) === null || _e === void 0 ? void 0 : _e.title }, index.h("limel-icon", { key: '0bc411ed33a695dbd2dc25689895ed2fc10d15b7', name: this.icon }), index.h("limel-3d-hover-effect-glow", { key: 'e57726bde3911492fbab47219fd0b36db2d1a122' })), this.renderLabel(), this.renderNotification()));
|
|
52
57
|
}
|
|
53
58
|
get host() { return index.getElement(this); }
|
|
54
59
|
};
|
|
@@ -123,29 +123,27 @@
|
|
|
123
123
|
flex-wrap: nowrap;
|
|
124
124
|
}
|
|
125
125
|
|
|
126
|
-
:host([disabled]:not([disabled=false])) {
|
|
127
|
-
cursor: not-allowed;
|
|
128
|
-
opacity: 0.4;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
126
|
.button {
|
|
127
|
+
color: var(--limel-theme-on-surface-color);
|
|
128
|
+
}
|
|
129
|
+
.button:not(:has(:disabled)) {
|
|
132
130
|
transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
|
|
133
131
|
cursor: pointer;
|
|
134
132
|
color: var(--limel-theme-on-surface-color);
|
|
135
133
|
background-color: transparent;
|
|
136
134
|
}
|
|
137
|
-
.button:hover, .button:focus, .button:focus-visible {
|
|
135
|
+
.button:not(:has(:disabled)):hover, .button:not(:has(:disabled)):focus, .button:not(:has(:disabled)):focus-visible {
|
|
138
136
|
will-change: color, background-color, box-shadow, transform;
|
|
139
137
|
}
|
|
140
|
-
.button:hover, .button:focus-visible {
|
|
138
|
+
.button:not(:has(:disabled)):hover, .button:not(:has(:disabled)):focus-visible {
|
|
141
139
|
transform: translate3d(0, -0.04rem, 0);
|
|
142
140
|
color: var(--limel-theme-on-surface-color);
|
|
143
141
|
background-color: var(--lime-elevated-surface-background-color);
|
|
144
142
|
}
|
|
145
|
-
.button:hover {
|
|
143
|
+
.button:not(:has(:disabled)):hover {
|
|
146
144
|
box-shadow: var(--button-shadow-hovered);
|
|
147
145
|
}
|
|
148
|
-
.button:active {
|
|
146
|
+
.button:not(:has(:disabled)):active {
|
|
149
147
|
--limel-clickable-transform-timing-function: cubic-bezier(
|
|
150
148
|
0.83,
|
|
151
149
|
-0.15,
|
|
@@ -156,14 +154,10 @@
|
|
|
156
154
|
background-color: var(--limel-theme-surface-background-color);
|
|
157
155
|
box-shadow: var(--button-shadow-inset-pressed);
|
|
158
156
|
}
|
|
159
|
-
.button:hover, .button:active {
|
|
157
|
+
.button:not(:has(:disabled)):hover, .button:not(:has(:disabled)):active {
|
|
160
158
|
--limel-clickable-transition-speed: 0.2s;
|
|
161
159
|
--limel-clickable-transform-speed: 0.16s;
|
|
162
160
|
}
|
|
163
|
-
.button:has(input[disabled]):hover {
|
|
164
|
-
box-shadow: none;
|
|
165
|
-
transform: none;
|
|
166
|
-
}
|
|
167
161
|
.button {
|
|
168
162
|
position: relative;
|
|
169
163
|
display: inline-grid;
|
|
@@ -204,6 +198,10 @@
|
|
|
204
198
|
.button label:has(> limel-badge) .button__label {
|
|
205
199
|
padding-right: 0.25rem;
|
|
206
200
|
}
|
|
201
|
+
.button:has(:disabled) label {
|
|
202
|
+
cursor: not-allowed;
|
|
203
|
+
opacity: 0.4;
|
|
204
|
+
}
|
|
207
205
|
.button input[type=radio] {
|
|
208
206
|
position: absolute;
|
|
209
207
|
width: 0;
|
|
@@ -235,7 +233,7 @@
|
|
|
235
233
|
box-shadow: var(--button-shadow-inset);
|
|
236
234
|
color: var(--lime-primary-color, var(--limel-theme-primary-color));
|
|
237
235
|
}
|
|
238
|
-
.button.button--selected:active {
|
|
236
|
+
.button.button--selected:not(:has(:disabled)):active {
|
|
239
237
|
box-shadow: var(--button-shadow-inset-pressed);
|
|
240
238
|
}
|
|
241
239
|
|
|
@@ -34,6 +34,7 @@ import { createRandomString } from "../../util/random-string";
|
|
|
34
34
|
* @exampleComponent limel-example-button-group-basic
|
|
35
35
|
* @exampleComponent limel-example-button-group-mix
|
|
36
36
|
* @exampleComponent limel-example-button-group-badges
|
|
37
|
+
* @exampleComponent limel-example-button-group-disabled-item
|
|
37
38
|
* @exampleComponent limel-example-button-group-composite
|
|
38
39
|
*/
|
|
39
40
|
export class ButtonGroup {
|
|
@@ -43,7 +44,10 @@ export class ButtonGroup {
|
|
|
43
44
|
*/
|
|
44
45
|
this.value = [];
|
|
45
46
|
/**
|
|
46
|
-
* True if the button-group should be disabled
|
|
47
|
+
* True if the button-group should be disabled.
|
|
48
|
+
*
|
|
49
|
+
* Disables every button in the group, regardless of the `disabled` value
|
|
50
|
+
* of each individual button.
|
|
47
51
|
*/
|
|
48
52
|
this.disabled = false;
|
|
49
53
|
this.radioGroupName = createRandomString();
|
|
@@ -61,17 +65,18 @@ export class ButtonGroup {
|
|
|
61
65
|
this.setSelectedButton();
|
|
62
66
|
}
|
|
63
67
|
render() {
|
|
64
|
-
return (h(Host, { key: '
|
|
68
|
+
return (h(Host, { key: '7823fd4593ee4eddb6d56ce55e7ff5eb1cc28397', role: "radiogroup" }, this.value.map(this.renderButton)));
|
|
65
69
|
}
|
|
66
70
|
renderButton(button) {
|
|
67
71
|
// Prefix with 'b' because html IDs cannot start with a digit,
|
|
68
72
|
// and we need to differentiate from the ID on the limel-icon. /Ads
|
|
69
73
|
const buttonId = `b${button.id}`;
|
|
74
|
+
const isDisabled = this.disabled || button.disabled;
|
|
70
75
|
const classes = {
|
|
71
76
|
button: true,
|
|
72
77
|
'button--selected': this.isButtonChecked(button),
|
|
73
78
|
};
|
|
74
|
-
return (h("div", { class: classes }, h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), disabled:
|
|
79
|
+
return (h("div", { class: classes }, h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), disabled: isDisabled, "aria-disabled": isDisabled ? 'true' : 'false', id: buttonId, onChange: this.onChange }), h("label", { htmlFor: buttonId }, this.renderContent(button), this.renderBadge(button))));
|
|
75
80
|
}
|
|
76
81
|
renderContent(button) {
|
|
77
82
|
if (button.icon) {
|
|
@@ -104,10 +109,17 @@ export class ButtonGroup {
|
|
|
104
109
|
event.stopPropagation();
|
|
105
110
|
const target = event.target;
|
|
106
111
|
// The ID is prefixed with `b` in the HTML, remember? /Ads
|
|
107
|
-
|
|
112
|
+
const buttonId = target.id.slice(1);
|
|
108
113
|
const button = this.value.find((item) => {
|
|
109
|
-
return item.id ===
|
|
114
|
+
return item.id === buttonId;
|
|
110
115
|
});
|
|
116
|
+
// The `disabled` attribute on the input already stops the browser
|
|
117
|
+
// from getting here. This makes it hold even if the attribute is
|
|
118
|
+
// removed from the DOM, or a `change` event is dispatched by hand.
|
|
119
|
+
if (!button || this.disabled || button.disabled) {
|
|
120
|
+
return;
|
|
121
|
+
}
|
|
122
|
+
this.selectedButtonId = buttonId;
|
|
111
123
|
this.change.emit(button);
|
|
112
124
|
}
|
|
113
125
|
valueChanged() {
|
|
@@ -164,7 +176,7 @@ export class ButtonGroup {
|
|
|
164
176
|
"optional": false,
|
|
165
177
|
"docs": {
|
|
166
178
|
"tags": [],
|
|
167
|
-
"text": "True if the button-group should be disabled"
|
|
179
|
+
"text": "True if the button-group should be disabled.\n\nDisables every button in the group, regardless of the `disabled` value\nof each individual button."
|
|
168
180
|
},
|
|
169
181
|
"getter": false,
|
|
170
182
|
"setter": false,
|
|
@@ -103,20 +103,22 @@ export class Card {
|
|
|
103
103
|
};
|
|
104
104
|
}
|
|
105
105
|
componentWillLoad() {
|
|
106
|
-
const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(this.host);
|
|
106
|
+
const { handleMouseEnter, handleMouseLeave, cleanup } = getMouseEventHandlers(this.host);
|
|
107
107
|
this.handleMouseEnter = handleMouseEnter;
|
|
108
108
|
this.handleMouseLeave = handleMouseLeave;
|
|
109
|
+
this.cleanup3dHoverEffect = cleanup;
|
|
109
110
|
}
|
|
110
111
|
disconnectedCallback() {
|
|
111
|
-
var _a, _b;
|
|
112
|
+
var _a, _b, _c;
|
|
112
113
|
(_a = this.markdownResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
113
114
|
(_b = this.markdownElement) === null || _b === void 0 ? void 0 : _b.removeEventListener('scroll', this.checkIfScrollable);
|
|
115
|
+
(_c = this.cleanup3dHoverEffect) === null || _c === void 0 ? void 0 : _c.call(this);
|
|
114
116
|
}
|
|
115
117
|
componentDidLoad() {
|
|
116
118
|
this.setMarkdownElement(this.markdownElement);
|
|
117
119
|
}
|
|
118
120
|
render() {
|
|
119
|
-
return (h(Host, { key: '
|
|
121
|
+
return (h(Host, { key: '5714b1e5154ed8637c99f71d5a303dfc7ca51a51', onMouseEnter: this.show3dEffect ? this.handleMouseEnter : undefined, onMouseLeave: this.show3dEffect ? this.handleMouseLeave : undefined }, h("section", { key: 'f6592febd86d2869a86e7561e3c2136c7862ad17', tabindex: this.clickable ? 0 : undefined, role: this.clickable ? 'button' : undefined, "aria-pressed": this.clickable ? String(this.selected) : undefined, onKeyDown: this.clickable ? this.handleKeyDown : undefined }, this.renderImage(), h("div", { key: '2955544b5bb10cec45591189591b6c7c64d844e5', class: "body" }, this.renderHeader(), this.renderSlot(), this.renderValue(), this.renderActionBar()), this.show3dEffect && h("limel-3d-hover-effect-glow", { key: '62f1d894a1feceb89cd44963cdb8ae9ba201ff6c' }))));
|
|
120
122
|
}
|
|
121
123
|
renderImage() {
|
|
122
124
|
var _a;
|
|
@@ -103,11 +103,16 @@ export class InfoTile {
|
|
|
103
103
|
};
|
|
104
104
|
}
|
|
105
105
|
componentWillLoad() {
|
|
106
|
-
const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(this.host);
|
|
106
|
+
const { handleMouseEnter, handleMouseLeave, cleanup } = getMouseEventHandlers(this.host);
|
|
107
107
|
this.handleMouseEnter = handleMouseEnter;
|
|
108
108
|
this.handleMouseLeave = handleMouseLeave;
|
|
109
|
+
this.cleanup3dHoverEffect = cleanup;
|
|
109
110
|
this.updateHasPrimarySlotContent();
|
|
110
111
|
}
|
|
112
|
+
disconnectedCallback() {
|
|
113
|
+
var _a;
|
|
114
|
+
(_a = this.cleanup3dHoverEffect) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
115
|
+
}
|
|
111
116
|
render() {
|
|
112
117
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
113
118
|
const extendedAriaLabel = this.checkProps(this === null || this === void 0 ? void 0 : this.prefix) +
|
|
@@ -122,9 +127,9 @@ export class InfoTile {
|
|
|
122
127
|
this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
|
|
123
128
|
const link = this.disabled ? '#' : (_e = this.link) === null || _e === void 0 ? void 0 : _e.href;
|
|
124
129
|
const rel = getRel((_f = this.link) === null || _f === void 0 ? void 0 : _f.target, (_g = this.link) === null || _g === void 0 ? void 0 : _g.rel);
|
|
125
|
-
return (h(Host, { key: '
|
|
130
|
+
return (h(Host, { key: 'b3415c1b5881c6deb73d4ab9fe86d137037bc60e', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: 'de292609a60d7bfe1eef9c4818bd76e59a4669ad', title: (_h = this.link) === null || _h === void 0 ? void 0 : _h.title, href: link, target: (_j = this.link) === null || _j === void 0 ? void 0 : _j.target, rel: rel, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
|
|
126
131
|
'is-clickable': !!((_k = this.link) === null || _k === void 0 ? void 0 : _k.href) && !this.disabled,
|
|
127
|
-
} }, this.renderIcon(), this.renderProgress(), h("slot", { key: '
|
|
132
|
+
} }, this.renderIcon(), this.renderProgress(), h("slot", { key: '5133aac5b5f86165009946bcfa498a6d7a93d0ac', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: '53df85a8b3229b3cc25af42f998d4605810546ae', class: "value-group" }, this.renderPrefix(), h("div", { key: 'dcf7509dfcd104885036dd0e16c391e1a2e7ff07', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: '62ae587e9e96f39102f1a00211f3fe9825edea44' })), this.renderNotification()));
|
|
128
133
|
}
|
|
129
134
|
checkProps(propValue) {
|
|
130
135
|
return propValue ? propValue + ' ' : '';
|
|
@@ -49,14 +49,19 @@ export class Shortcut {
|
|
|
49
49
|
};
|
|
50
50
|
}
|
|
51
51
|
componentWillLoad() {
|
|
52
|
-
const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(this.host);
|
|
52
|
+
const { handleMouseEnter, handleMouseLeave, cleanup } = getMouseEventHandlers(this.host);
|
|
53
53
|
this.handleMouseEnter = handleMouseEnter;
|
|
54
54
|
this.handleMouseLeave = handleMouseLeave;
|
|
55
|
+
this.cleanup3dHoverEffect = cleanup;
|
|
56
|
+
}
|
|
57
|
+
disconnectedCallback() {
|
|
58
|
+
var _a;
|
|
59
|
+
(_a = this.cleanup3dHoverEffect) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
55
60
|
}
|
|
56
61
|
render() {
|
|
57
62
|
var _a, _b, _c, _d, _e;
|
|
58
63
|
const rel = getRel((_a = this.link) === null || _a === void 0 ? void 0 : _a.target, (_b = this.link) === null || _b === void 0 ? void 0 : _b.rel);
|
|
59
|
-
return (h(Host, { key: '
|
|
64
|
+
return (h(Host, { key: '5182738d7d2e8c2df2aa019631af021260b6b506', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: 'ed8ae8d341aca2d64376c0b154b41b03d1d08073', "aria-disabled": this.disabled, href: (_c = this.link) === null || _c === void 0 ? void 0 : _c.href, target: (_d = this.link) === null || _d === void 0 ? void 0 : _d.target, rel: rel, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_e = this.link) === null || _e === void 0 ? void 0 : _e.title }, h("limel-icon", { key: '0bc411ed33a695dbd2dc25689895ed2fc10d15b7', name: this.icon }), h("limel-3d-hover-effect-glow", { key: 'e57726bde3911492fbab47219fd0b36db2d1a122' })), this.renderLabel(), this.renderNotification()));
|
|
60
65
|
}
|
|
61
66
|
static get is() { return "limel-shortcut"; }
|
|
62
67
|
static get encapsulation() { return "shadow"; }
|