@limetech/lime-elements 36.3.0-next.39 → 36.3.0-next.40
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/limel-collapsible-section.cjs.entry.js +3 -12
- package/dist/collection/components/collapsible-section/collapsible-section.css +79 -55
- package/dist/collection/components/collapsible-section/collapsible-section.js +2 -11
- package/dist/esm/{keycodes-9f971b46.js → keycodes-44c01beb.js} +1 -1
- package/dist/esm/limel-chip-set.entry.js +1 -1
- package/dist/esm/limel-collapsible-section.entry.js +3 -12
- package/dist/esm/limel-input-field.entry.js +1 -1
- package/dist/esm/limel-list_2.entry.js +1 -1
- package/dist/esm/limel-picker.entry.js +1 -1
- package/dist/esm/limel-popover_4.entry.js +1 -1
- package/dist/esm/limel-select.entry.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/{p-2c7b0e49.entry.js → p-157e0417.entry.js} +1 -1
- package/dist/lime-elements/{p-029360c8.entry.js → p-50dbd665.entry.js} +1 -1
- package/dist/lime-elements/{p-cad7cda1.entry.js → p-58e9df30.entry.js} +1 -1
- package/dist/lime-elements/{p-19d56e34.entry.js → p-b1ae3d1f.entry.js} +1 -1
- package/dist/lime-elements/{p-25013385.entry.js → p-d0084a70.entry.js} +1 -1
- package/dist/lime-elements/{p-216ffe20.js → p-d7801e00.js} +1 -1
- package/dist/lime-elements/{p-f90c8fb2.entry.js → p-da536426.entry.js} +1 -1
- package/dist/lime-elements/p-f11e7ce1.entry.js +1 -0
- package/dist/types/components/collapsible-section/collapsible-section.d.ts +0 -1
- package/package.json +5 -5
- package/dist/lime-elements/p-5393213b.entry.js +0 -1
|
@@ -4,9 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-287e25e0.js');
|
|
6
6
|
const dispatchResizeEvent = require('./dispatch-resize-event-4462d78f.js');
|
|
7
|
-
const keycodes = require('./keycodes-3949f425.js');
|
|
8
7
|
|
|
9
|
-
const collapsibleSectionCss = ":host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}:host{--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}:host([disabled]){pointer-events:none}.
|
|
8
|
+
const collapsibleSectionCss = ":host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}:host(limel-collapsible-section){--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}:host([disabled]){pointer-events:none}.open-close-toggle{all:unset;position:absolute;inset:0;width:100%;transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;z-index:-1;background-color:var(--closed-header-background-color, rgb(var(--contrast-200)));border-radius:var(--border-radius-of-header)}.open-close-toggle:focus{outline:none}.open-close-toggle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}section.open .open-close-toggle{background-color:var(--open-header-background-color, rgb(var(--contrast-100)));border-radius:var(--border-radius-of-header) var(--border-radius-of-header) 0 0}section.open .open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.title,.divider-line,.expand-icon{pointer-events:none}header{isolation:isolate;position:relative;align-items:center;display:flex;justify-content:space-between;padding-left:0.625rem;padding-right:0.625rem;height:3rem}.title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-headline2-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline2-line-height, 0.875rem);font-weight:300;font-weight:var(--mdc-typography-headline2-font-weight, 300);letter-spacing:-0.0083333333em;letter-spacing:var(--mdc-typography-headline2-letter-spacing, -0.0083333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline2-text-transform, inherit);color:var(--mdc-theme-on-surface);justify-self:flex-start;padding-right:0.75rem;user-select:none;padding-right:0.5rem;height:auto;max-height:3rem;line-height:1.2rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:0.0625rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));margin-right:0.5rem;opacity:0}section.open .divider-line{opacity:0.16}.actions{justify-self:flex-end;flex-shrink:0}@keyframes fade-in-body{0%{opacity:0}100%{opacity:1}}.body{animation:fade-in-body 0.3s ease-in forwards;background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);margin-bottom:1.5rem;border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header);display:none;opacity:0}section.open .body{display:block}.body:before,.body:after{content:\" \";display:table}.body:after{clear:both}.expand-icon{position:relative;height:1.875rem;margin:0 1rem 0 0.5rem;width:0.75rem;flex-shrink:0}.line{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;border-radius:1rem;height:0.125rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:first-of-type,.line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}.line:first-of-type{transform:rotate3d(0, 0, 1, 90deg)}.line:last-of-type{transform:rotate3d(0, 0, 1, -90deg)}.line:nth-of-type(2),.line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}section.open .line:first-of-type,section.open .line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}section.open .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:nth-of-type(2),section.open .line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}.open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -0.5rem, 0);opacity:0.4}.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 0.5rem, 0);opacity:0.4}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}";
|
|
10
9
|
|
|
11
10
|
const CollapsibleSection = class {
|
|
12
11
|
constructor(hostRef) {
|
|
@@ -17,14 +16,6 @@ const CollapsibleSection = class {
|
|
|
17
16
|
this.onClick = () => {
|
|
18
17
|
this.handleInteraction();
|
|
19
18
|
};
|
|
20
|
-
this.handleKeyDown = (event) => {
|
|
21
|
-
const isEnter = event.key === keycodes.ENTER || event.keyCode === keycodes.ENTER_KEY_CODE;
|
|
22
|
-
if (isEnter) {
|
|
23
|
-
event.stopPropagation();
|
|
24
|
-
event.preventDefault();
|
|
25
|
-
this.handleInteraction();
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
19
|
this.handleInteraction = () => {
|
|
29
20
|
this.isOpen = !this.isOpen;
|
|
30
21
|
if (this.isOpen) {
|
|
@@ -40,7 +31,7 @@ const CollapsibleSection = class {
|
|
|
40
31
|
if (!this.actions) {
|
|
41
32
|
return;
|
|
42
33
|
}
|
|
43
|
-
return (index.h("div", { class: "
|
|
34
|
+
return (index.h("div", { class: "actions" }, this.actions.map(this.renderActionButton)));
|
|
44
35
|
};
|
|
45
36
|
this.renderActionButton = (action) => {
|
|
46
37
|
return (index.h("limel-icon-button", { icon: action.icon, label: action.label, disabled: action.disabled, onClick: this.handleActionClick(action) }));
|
|
@@ -54,7 +45,7 @@ const CollapsibleSection = class {
|
|
|
54
45
|
this.actions = undefined;
|
|
55
46
|
}
|
|
56
47
|
render() {
|
|
57
|
-
return (index.h("section", { class: `${this.isOpen ? 'open' : ''}` }, index.h("header", { class: "
|
|
48
|
+
return (index.h("section", { class: `${this.isOpen ? 'open' : ''}` }, index.h("header", null, index.h("button", { class: "open-close-toggle", onClick: this.onClick }), index.h("div", { class: "expand-icon" }, index.h("div", { class: "line" }), index.h("div", { class: "line" }), index.h("div", { class: "line" }), index.h("div", { class: "line" })), index.h("h2", { class: "title mdc-typography mdc-typography--headline2" }, this.header), index.h("div", { class: "divider-line" }), this.renderActions()), index.h("div", { class: "body" }, index.h("slot", null))));
|
|
58
49
|
}
|
|
59
50
|
};
|
|
60
51
|
CollapsibleSection.style = collapsibleSectionCss;
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
* @prop --body-background-color: background color for body
|
|
80
80
|
* @prop --body-padding: space around content of the body
|
|
81
81
|
*/
|
|
82
|
-
:host {
|
|
82
|
+
:host(limel-collapsible-section) {
|
|
83
83
|
--border-radius-of-header: 0.75rem;
|
|
84
84
|
display: block;
|
|
85
85
|
}
|
|
@@ -92,37 +92,53 @@
|
|
|
92
92
|
pointer-events: none;
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
-
.
|
|
95
|
+
.open-close-toggle {
|
|
96
|
+
all: unset;
|
|
97
|
+
position: absolute;
|
|
98
|
+
inset: 0;
|
|
99
|
+
width: 100%;
|
|
96
100
|
transition: background-color 0.4s ease, border-radius 0.1s ease;
|
|
97
101
|
cursor: pointer;
|
|
98
|
-
|
|
99
|
-
display: flex;
|
|
100
|
-
justify-content: space-between;
|
|
101
|
-
padding-left: 0.625rem;
|
|
102
|
-
padding-right: 0.625rem;
|
|
103
|
-
height: 3.75rem;
|
|
102
|
+
z-index: -1;
|
|
104
103
|
background-color: var(--closed-header-background-color, rgb(var(--contrast-200)));
|
|
105
104
|
border-radius: var(--border-radius-of-header);
|
|
106
105
|
}
|
|
107
|
-
.
|
|
106
|
+
.open-close-toggle:focus {
|
|
108
107
|
outline: none;
|
|
109
108
|
}
|
|
110
|
-
.
|
|
109
|
+
.open-close-toggle:focus-visible {
|
|
111
110
|
outline: none;
|
|
112
111
|
box-shadow: var(--shadow-depth-8-focused);
|
|
113
112
|
}
|
|
114
|
-
|
|
113
|
+
.open-close-toggle:hover {
|
|
114
|
+
background-color: var(--open-header-background-color, rgb(var(--contrast-300)));
|
|
115
|
+
}
|
|
116
|
+
section.open .open-close-toggle {
|
|
115
117
|
background-color: var(--open-header-background-color, rgb(var(--contrast-100)));
|
|
116
118
|
border-radius: var(--border-radius-of-header) var(--border-radius-of-header) 0 0;
|
|
117
119
|
}
|
|
118
|
-
section.open .
|
|
120
|
+
section.open .open-close-toggle:hover {
|
|
119
121
|
background-color: var(--open-header-background-color, rgb(var(--contrast-300)));
|
|
120
122
|
}
|
|
121
|
-
|
|
122
|
-
|
|
123
|
+
|
|
124
|
+
.title,
|
|
125
|
+
.divider-line,
|
|
126
|
+
.expand-icon {
|
|
127
|
+
pointer-events: none;
|
|
123
128
|
}
|
|
124
129
|
|
|
125
|
-
|
|
130
|
+
header {
|
|
131
|
+
isolation: isolate;
|
|
132
|
+
position: relative;
|
|
133
|
+
align-items: center;
|
|
134
|
+
display: flex;
|
|
135
|
+
justify-content: space-between;
|
|
136
|
+
padding-left: 0.625rem;
|
|
137
|
+
padding-right: 0.625rem;
|
|
138
|
+
height: 3rem;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.title {
|
|
126
142
|
-moz-osx-font-smoothing: grayscale;
|
|
127
143
|
-webkit-font-smoothing: antialiased;
|
|
128
144
|
font-family: Roboto, sans-serif;
|
|
@@ -161,7 +177,7 @@ section.open .section__header:hover {
|
|
|
161
177
|
overflow: hidden;
|
|
162
178
|
}
|
|
163
179
|
|
|
164
|
-
.
|
|
180
|
+
.divider-line {
|
|
165
181
|
transition: opacity 0.3s ease 0.3s;
|
|
166
182
|
flex-grow: 1;
|
|
167
183
|
height: 0.125rem;
|
|
@@ -170,16 +186,16 @@ section.open .section__header:hover {
|
|
|
170
186
|
margin-right: 0.5rem;
|
|
171
187
|
opacity: 0;
|
|
172
188
|
}
|
|
173
|
-
section.open .
|
|
189
|
+
section.open .divider-line {
|
|
174
190
|
opacity: 0.16;
|
|
175
191
|
}
|
|
176
192
|
|
|
177
|
-
.
|
|
193
|
+
.actions {
|
|
178
194
|
justify-self: flex-end;
|
|
179
195
|
flex-shrink: 0;
|
|
180
196
|
}
|
|
181
197
|
|
|
182
|
-
@keyframes fade-in-
|
|
198
|
+
@keyframes fade-in-body {
|
|
183
199
|
0% {
|
|
184
200
|
opacity: 0;
|
|
185
201
|
}
|
|
@@ -187,8 +203,8 @@ section.open .section__header__divider-line {
|
|
|
187
203
|
opacity: 1;
|
|
188
204
|
}
|
|
189
205
|
}
|
|
190
|
-
.
|
|
191
|
-
animation: fade-in-
|
|
206
|
+
.body {
|
|
207
|
+
animation: fade-in-body 0.3s ease-in forwards;
|
|
192
208
|
background-color: var(--body-background-color, var(--contrast-100));
|
|
193
209
|
padding-left: var(--body-padding, 1.25rem);
|
|
194
210
|
padding-right: var(--body-padding, 1.25rem);
|
|
@@ -197,14 +213,14 @@ section.open .section__header__divider-line {
|
|
|
197
213
|
display: none;
|
|
198
214
|
opacity: 0;
|
|
199
215
|
}
|
|
200
|
-
section.open .
|
|
216
|
+
section.open .body {
|
|
201
217
|
display: block;
|
|
202
218
|
}
|
|
203
|
-
.
|
|
219
|
+
.body:before, .body:after {
|
|
204
220
|
content: " ";
|
|
205
221
|
display: table;
|
|
206
222
|
}
|
|
207
|
-
.
|
|
223
|
+
.body:after {
|
|
208
224
|
clear: both;
|
|
209
225
|
}
|
|
210
226
|
|
|
@@ -214,7 +230,7 @@ section.open .section__body {
|
|
|
214
230
|
* Nothing in this file may output any CSS
|
|
215
231
|
* without being explicitly called by outside code.
|
|
216
232
|
*/
|
|
217
|
-
.
|
|
233
|
+
.expand-icon {
|
|
218
234
|
position: relative;
|
|
219
235
|
height: 1.875rem;
|
|
220
236
|
margin: 0 1rem 0 0.5rem;
|
|
@@ -222,7 +238,7 @@ section.open .section__body {
|
|
|
222
238
|
flex-shrink: 0;
|
|
223
239
|
}
|
|
224
240
|
|
|
225
|
-
.
|
|
241
|
+
.line {
|
|
226
242
|
position: absolute;
|
|
227
243
|
top: 0;
|
|
228
244
|
right: 0;
|
|
@@ -234,63 +250,71 @@ section.open .section__body {
|
|
|
234
250
|
height: 0.125rem;
|
|
235
251
|
background-color: var(--header-stroke-color, rgb(var(--contrast-900)));
|
|
236
252
|
}
|
|
237
|
-
.
|
|
253
|
+
.line:first-of-type, .line:last-of-type {
|
|
238
254
|
transition: opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s;
|
|
239
255
|
}
|
|
240
|
-
.
|
|
256
|
+
.line:first-of-type {
|
|
241
257
|
transform: rotate3d(0, 0, 1, 90deg);
|
|
242
258
|
}
|
|
243
|
-
.
|
|
259
|
+
.line:last-of-type {
|
|
244
260
|
transform: rotate3d(0, 0, 1, -90deg);
|
|
245
261
|
}
|
|
246
|
-
.
|
|
262
|
+
.line:nth-of-type(2), .line:nth-of-type(3) {
|
|
247
263
|
transition: opacity 0.2s ease, transform 0.18s ease;
|
|
248
264
|
}
|
|
265
|
+
section.open .line:first-of-type, section.open .line:last-of-type {
|
|
266
|
+
transition: opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s;
|
|
267
|
+
}
|
|
268
|
+
section.open .line:first-of-type {
|
|
269
|
+
transform: rotate3d(0, 0, 1, 0deg);
|
|
270
|
+
}
|
|
271
|
+
section.open .line:last-of-type {
|
|
272
|
+
transform: rotate3d(0, 0, 1, 0deg);
|
|
273
|
+
}
|
|
274
|
+
section.open .line:nth-of-type(2), section.open .line:nth-of-type(3) {
|
|
275
|
+
transition: opacity 1s ease, transform 0.4s ease;
|
|
276
|
+
}
|
|
277
|
+
section.open .line:nth-of-type(2) {
|
|
278
|
+
transform: translate3d(0, -1rem, 0);
|
|
279
|
+
opacity: 0;
|
|
280
|
+
}
|
|
281
|
+
section.open .line:nth-of-type(3) {
|
|
282
|
+
transform: translate3d(0, 1rem, 0);
|
|
283
|
+
opacity: 0;
|
|
284
|
+
}
|
|
249
285
|
|
|
250
|
-
.
|
|
286
|
+
.open-close-toggle:hover + .expand-icon .line:first-of-type {
|
|
251
287
|
transform: rotate3d(0, 0, 1, 0deg);
|
|
252
288
|
}
|
|
253
|
-
.
|
|
289
|
+
.open-close-toggle:hover + .expand-icon .line:last-of-type {
|
|
254
290
|
transform: rotate3d(0, 0, 1, 0deg);
|
|
255
291
|
}
|
|
256
|
-
.
|
|
292
|
+
.open-close-toggle:hover + .expand-icon .line:nth-of-type(2), .open-close-toggle:hover + .expand-icon .line:nth-of-type(3) {
|
|
257
293
|
transition: opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s;
|
|
258
294
|
}
|
|
259
|
-
.
|
|
295
|
+
.open-close-toggle:hover + .expand-icon .line:nth-of-type(2) {
|
|
260
296
|
transform: translate3d(0, -0.5rem, 0);
|
|
261
297
|
opacity: 0.4;
|
|
262
298
|
}
|
|
263
|
-
.
|
|
299
|
+
.open-close-toggle:hover + .expand-icon .line:nth-of-type(3) {
|
|
264
300
|
transform: translate3d(0, 0.5rem, 0);
|
|
265
301
|
opacity: 0.4;
|
|
266
302
|
}
|
|
267
303
|
|
|
268
|
-
section.open .
|
|
269
|
-
transition: opacity 0.2s ease 0.
|
|
270
|
-
}
|
|
271
|
-
section.open .section__header .expand-icon__line:first-of-type {
|
|
272
|
-
transform: rotate3d(0, 0, 1, 0deg);
|
|
304
|
+
section.open .open-close-toggle:hover + .expand-icon .line:first-of-type, section.open .open-close-toggle:hover + .expand-icon .line:last-of-type {
|
|
305
|
+
transition: opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s;
|
|
273
306
|
}
|
|
274
|
-
section.open .
|
|
275
|
-
transform: rotate3d(0, 0, 1,
|
|
307
|
+
section.open .open-close-toggle:hover + .expand-icon .line:first-of-type {
|
|
308
|
+
transform: rotate3d(0, 0, 1, 45deg);
|
|
276
309
|
}
|
|
277
|
-
section.open .
|
|
278
|
-
|
|
310
|
+
section.open .open-close-toggle:hover + .expand-icon .line:last-of-type {
|
|
311
|
+
transform: rotate3d(0, 0, 1, -45deg);
|
|
279
312
|
}
|
|
280
|
-
section.open .
|
|
313
|
+
section.open .open-close-toggle:hover + .expand-icon .line:nth-of-type(2) {
|
|
281
314
|
transform: translate3d(0, -1rem, 0);
|
|
282
315
|
opacity: 0;
|
|
283
316
|
}
|
|
284
|
-
section.open .
|
|
317
|
+
section.open .open-close-toggle:hover + .expand-icon .line:nth-of-type(3) {
|
|
285
318
|
transform: translate3d(0, 1rem, 0);
|
|
286
319
|
opacity: 0;
|
|
287
|
-
}
|
|
288
|
-
section.open .section__header:hover .expand-icon__line:first-of-type, section.open .section__header:hover .expand-icon__line:last-of-type {
|
|
289
|
-
transition: opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s;
|
|
290
|
-
}
|
|
291
|
-
section.open .section__header:hover .expand-icon__line:first-of-type {
|
|
292
|
-
transform: rotate3d(0, 0, 1, 45deg);
|
|
293
|
-
}
|
|
294
|
-
section.open .section__header:hover .expand-icon__line:last-of-type {
|
|
295
|
-
transform: rotate3d(0, 0, 1, -45deg);
|
|
296
320
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { h } from '@stencil/core';
|
|
2
2
|
import { dispatchResizeEvent } from '../../util/dispatch-resize-event';
|
|
3
|
-
import { ENTER, ENTER_KEY_CODE } from '../../util/keycodes';
|
|
4
3
|
/**
|
|
5
4
|
* @slot - Content to put inside the collapsible section
|
|
6
5
|
* @exampleComponent limel-example-collapsible-section
|
|
@@ -14,14 +13,6 @@ export class CollapsibleSection {
|
|
|
14
13
|
this.onClick = () => {
|
|
15
14
|
this.handleInteraction();
|
|
16
15
|
};
|
|
17
|
-
this.handleKeyDown = (event) => {
|
|
18
|
-
const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;
|
|
19
|
-
if (isEnter) {
|
|
20
|
-
event.stopPropagation();
|
|
21
|
-
event.preventDefault();
|
|
22
|
-
this.handleInteraction();
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
16
|
this.handleInteraction = () => {
|
|
26
17
|
this.isOpen = !this.isOpen;
|
|
27
18
|
if (this.isOpen) {
|
|
@@ -37,7 +28,7 @@ export class CollapsibleSection {
|
|
|
37
28
|
if (!this.actions) {
|
|
38
29
|
return;
|
|
39
30
|
}
|
|
40
|
-
return (h("div", { class: "
|
|
31
|
+
return (h("div", { class: "actions" }, this.actions.map(this.renderActionButton)));
|
|
41
32
|
};
|
|
42
33
|
this.renderActionButton = (action) => {
|
|
43
34
|
return (h("limel-icon-button", { icon: action.icon, label: action.label, disabled: action.disabled, onClick: this.handleActionClick(action) }));
|
|
@@ -51,7 +42,7 @@ export class CollapsibleSection {
|
|
|
51
42
|
this.actions = undefined;
|
|
52
43
|
}
|
|
53
44
|
render() {
|
|
54
|
-
return (h("section", { class: `${this.isOpen ? 'open' : ''}` }, h("header", { class: "
|
|
45
|
+
return (h("section", { class: `${this.isOpen ? 'open' : ''}` }, h("header", null, h("button", { class: "open-close-toggle", onClick: this.onClick }), h("div", { class: "expand-icon" }, h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" })), h("h2", { class: "title mdc-typography mdc-typography--headline2" }, this.header), h("div", { class: "divider-line" }), this.renderActions()), h("div", { class: "body" }, h("slot", null))));
|
|
55
46
|
}
|
|
56
47
|
static get is() { return "limel-collapsible-section"; }
|
|
57
48
|
static get encapsulation() { return "shadow"; }
|
|
@@ -19,4 +19,4 @@ const ARROW_DOWN = 'ArrowDown';
|
|
|
19
19
|
const ARROW_LEFT = 'ArrowLeft';
|
|
20
20
|
const ARROW_RIGHT = 'ArrowRight';
|
|
21
21
|
|
|
22
|
-
export { ARROW_UP as A, BACKSPACE as B, DELETE as D,
|
|
22
|
+
export { ARROW_UP as A, BACKSPACE as B, DELETE as D, ESCAPE as E, SPACE as S, TAB as T, ENTER as a, TAB_KEY_CODE as b, ESCAPE_KEY_CODE as c, ENTER_KEY_CODE as d, ARROW_UP_KEY_CODE as e, ARROW_DOWN as f, ARROW_DOWN_KEY_CODE as g, SPACE_KEY_CODE as h, ARROW_LEFT as i, ARROW_LEFT_KEY_CODE as j, ARROW_RIGHT as k, ARROW_RIGHT_KEY_CODE as l, DELETE_KEY_CODE as m, BACKSPACE_KEY_CODE as n };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-cdfd351d.js';
|
|
2
|
-
import { i as ARROW_LEFT, j as ARROW_LEFT_KEY_CODE, k as ARROW_RIGHT, l as ARROW_RIGHT_KEY_CODE,
|
|
2
|
+
import { i as ARROW_LEFT, j as ARROW_LEFT_KEY_CODE, k as ARROW_RIGHT, l as ARROW_RIGHT_KEY_CODE, a as ENTER, d as ENTER_KEY_CODE, D as DELETE, m as DELETE_KEY_CODE, B as BACKSPACE, n as BACKSPACE_KEY_CODE, E as ESCAPE, c as ESCAPE_KEY_CODE } from './keycodes-44c01beb.js';
|
|
3
3
|
import { t as translate } from './translations-f88bb584.js';
|
|
4
4
|
import { g as getHref, a as getTarget } from './link-helper-b08fe56c.js';
|
|
5
5
|
import { M as MDCTextField } from './component-288691f3.js';
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h } from './index-cdfd351d.js';
|
|
2
2
|
import { d as dispatchResizeEvent } from './dispatch-resize-event-cd1d230c.js';
|
|
3
|
-
import { E as ENTER, a as ENTER_KEY_CODE } from './keycodes-9f971b46.js';
|
|
4
3
|
|
|
5
|
-
const collapsibleSectionCss = ":host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}:host{--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}:host([disabled]){pointer-events:none}.
|
|
4
|
+
const collapsibleSectionCss = ":host{--mdc-theme-primary:var(\n --lime-primary-color,\n rgb(var(--color-teal-default))\n );--mdc-theme-secondary:var(\n --lime-secondary-color,\n rgb(var(--contrast-1100))\n );--mdc-theme-on-primary:var(\n --lime-on-primary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-secondary:var(\n --lime-on-secondary-color,\n rgb(var(--contrast-100))\n );--mdc-theme-text-disabled-on-background:var(\n --lime-text-disabled-on-background-color,\n rgba(var(--contrast-1700), 0.38)\n );--mdc-theme-text-primary-on-background:var(\n --lime-text-primary-on-background-color,\n rgba(var(--contrast-1700), 0.87)\n );--mdc-theme-text-secondary-on-background:var(\n --lime-text-secondary-on-background-color,\n rgba(var(--contrast-1700), 0.54)\n );--mdc-theme-error:var(\n --lime-error-background-color,\n rgb(var(--color-red-dark))\n );--lime-error-text-color:rgb(var(--color-red-darker));--mdc-theme-surface:var(\n --lime-surface-background-color,\n rgb(var(--contrast-100))\n );--mdc-theme-on-surface:var(\n --lime-on-surface-color,\n rgb(var(--contrast-1500))\n )}:host(limel-collapsible-section){--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}:host([disabled]){pointer-events:none}.open-close-toggle{all:unset;position:absolute;inset:0;width:100%;transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;z-index:-1;background-color:var(--closed-header-background-color, rgb(var(--contrast-200)));border-radius:var(--border-radius-of-header)}.open-close-toggle:focus{outline:none}.open-close-toggle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}section.open .open-close-toggle{background-color:var(--open-header-background-color, rgb(var(--contrast-100)));border-radius:var(--border-radius-of-header) var(--border-radius-of-header) 0 0}section.open .open-close-toggle:hover{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.title,.divider-line,.expand-icon{pointer-events:none}header{isolation:isolate;position:relative;align-items:center;display:flex;justify-content:space-between;padding-left:0.625rem;padding-right:0.625rem;height:3rem}.title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:Roboto, sans-serif;font-family:var(--mdc-typography-headline2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));font-size:1rem;font-size:var(--mdc-typography-headline2-font-size, 1rem);line-height:0.875rem;line-height:var(--mdc-typography-headline2-line-height, 0.875rem);font-weight:300;font-weight:var(--mdc-typography-headline2-font-weight, 300);letter-spacing:-0.0083333333em;letter-spacing:var(--mdc-typography-headline2-letter-spacing, -0.0083333333em);text-decoration:inherit;text-decoration:var(--mdc-typography-headline2-text-decoration, inherit);text-transform:inherit;text-transform:var(--mdc-typography-headline2-text-transform, inherit);color:var(--mdc-theme-on-surface);justify-self:flex-start;padding-right:0.75rem;user-select:none;padding-right:0.5rem;height:auto;max-height:3rem;line-height:1.2rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:0.0625rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));margin-right:0.5rem;opacity:0}section.open .divider-line{opacity:0.16}.actions{justify-self:flex-end;flex-shrink:0}@keyframes fade-in-body{0%{opacity:0}100%{opacity:1}}.body{animation:fade-in-body 0.3s ease-in forwards;background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);margin-bottom:1.5rem;border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header);display:none;opacity:0}section.open .body{display:block}.body:before,.body:after{content:\" \";display:table}.body:after{clear:both}.expand-icon{position:relative;height:1.875rem;margin:0 1rem 0 0.5rem;width:0.75rem;flex-shrink:0}.line{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:100%;border-radius:1rem;height:0.125rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:first-of-type,.line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}.line:first-of-type{transform:rotate3d(0, 0, 1, 90deg)}.line:last-of-type{transform:rotate3d(0, 0, 1, -90deg)}.line:nth-of-type(2),.line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}section.open .line:first-of-type,section.open .line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s}section.open .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:nth-of-type(2),section.open .line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}.open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -0.5rem, 0);opacity:0.4}.open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 0.5rem, 0);opacity:0.4}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .open-close-toggle:hover+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(2){transform:translate3d(0, -1rem, 0);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(3){transform:translate3d(0, 1rem, 0);opacity:0}";
|
|
6
5
|
|
|
7
6
|
const CollapsibleSection = class {
|
|
8
7
|
constructor(hostRef) {
|
|
@@ -13,14 +12,6 @@ const CollapsibleSection = class {
|
|
|
13
12
|
this.onClick = () => {
|
|
14
13
|
this.handleInteraction();
|
|
15
14
|
};
|
|
16
|
-
this.handleKeyDown = (event) => {
|
|
17
|
-
const isEnter = event.key === ENTER || event.keyCode === ENTER_KEY_CODE;
|
|
18
|
-
if (isEnter) {
|
|
19
|
-
event.stopPropagation();
|
|
20
|
-
event.preventDefault();
|
|
21
|
-
this.handleInteraction();
|
|
22
|
-
}
|
|
23
|
-
};
|
|
24
15
|
this.handleInteraction = () => {
|
|
25
16
|
this.isOpen = !this.isOpen;
|
|
26
17
|
if (this.isOpen) {
|
|
@@ -36,7 +27,7 @@ const CollapsibleSection = class {
|
|
|
36
27
|
if (!this.actions) {
|
|
37
28
|
return;
|
|
38
29
|
}
|
|
39
|
-
return (h("div", { class: "
|
|
30
|
+
return (h("div", { class: "actions" }, this.actions.map(this.renderActionButton)));
|
|
40
31
|
};
|
|
41
32
|
this.renderActionButton = (action) => {
|
|
42
33
|
return (h("limel-icon-button", { icon: action.icon, label: action.label, disabled: action.disabled, onClick: this.handleActionClick(action) }));
|
|
@@ -50,7 +41,7 @@ const CollapsibleSection = class {
|
|
|
50
41
|
this.actions = undefined;
|
|
51
42
|
}
|
|
52
43
|
render() {
|
|
53
|
-
return (h("section", { class: `${this.isOpen ? 'open' : ''}` }, h("header", { class: "
|
|
44
|
+
return (h("section", { class: `${this.isOpen ? 'open' : ''}` }, h("header", null, h("button", { class: "open-close-toggle", onClick: this.onClick }), h("div", { class: "expand-icon" }, h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" }), h("div", { class: "line" })), h("h2", { class: "title mdc-typography mdc-typography--headline2" }, this.header), h("div", { class: "divider-line" }), this.renderActions()), h("div", { class: "body" }, h("slot", null))));
|
|
54
45
|
}
|
|
55
46
|
};
|
|
56
47
|
CollapsibleSection.style = collapsibleSectionCss;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-cdfd351d.js';
|
|
2
|
-
import {
|
|
2
|
+
import { b as TAB_KEY_CODE, T as TAB, A as ARROW_UP, e as ARROW_UP_KEY_CODE, f as ARROW_DOWN, g as ARROW_DOWN_KEY_CODE, E as ESCAPE, a as ENTER, c as ESCAPE_KEY_CODE, d as ENTER_KEY_CODE, S as SPACE, h as SPACE_KEY_CODE } from './keycodes-44c01beb.js';
|
|
3
3
|
import { g as getHref, a as getTarget } from './link-helper-b08fe56c.js';
|
|
4
4
|
import { c as createRandomString } from './random-string-2246b81e.js';
|
|
5
5
|
import { M as MDCTextField } from './component-288691f3.js';
|
|
@@ -2,7 +2,7 @@ import { h, r as registerInstance, c as createEvent, g as getElement, H as Host
|
|
|
2
2
|
import { d as MDCList, s as strings, b as MDCMenuSurface, C as Corner } from './component-fffa3419.js';
|
|
3
3
|
import { C as CheckboxTemplate } from './checkbox.template-fc7fcd06.js';
|
|
4
4
|
import { i as isDescendant } from './dom-0f79cbe7.js';
|
|
5
|
-
import {
|
|
5
|
+
import { E as ESCAPE, c as ESCAPE_KEY_CODE, T as TAB, b as TAB_KEY_CODE } from './keycodes-44c01beb.js';
|
|
6
6
|
import './component-410aad5a.js';
|
|
7
7
|
import './ponyfill-30263d5e.js';
|
|
8
8
|
import './keyboard-4b9e12e3.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-cdfd351d.js';
|
|
2
2
|
import { i as isDescendant } from './dom-0f79cbe7.js';
|
|
3
|
-
import { T as TAB,
|
|
3
|
+
import { T as TAB, E as ESCAPE, a as ENTER, b as TAB_KEY_CODE, c as ESCAPE_KEY_CODE, d as ENTER_KEY_CODE, A as ARROW_UP, e as ARROW_UP_KEY_CODE, f as ARROW_DOWN, g as ARROW_DOWN_KEY_CODE } from './keycodes-44c01beb.js';
|
|
4
4
|
import { c as createRandomString } from './random-string-2246b81e.js';
|
|
5
5
|
|
|
6
6
|
/* global setTimeout, clearTimeout */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, g as getElement } from './index-cdfd351d.js';
|
|
2
2
|
import { c as createRandomString } from './random-string-2246b81e.js';
|
|
3
|
-
import {
|
|
3
|
+
import { E as ESCAPE } from './keycodes-44c01beb.js';
|
|
4
4
|
import { z as zipObject } from './zipObject-2bb1968e.js';
|
|
5
5
|
import './_assignValue-fb2bf80a.js';
|
|
6
6
|
import './_defineProperty-2105cb48.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { h, r as registerInstance, c as createEvent, g as getElement } from './index-cdfd351d.js';
|
|
2
2
|
import { b as isMobileDevice } from './device-39db3b5f.js';
|
|
3
|
-
import {
|
|
3
|
+
import { a as ENTER, d as ENTER_KEY_CODE, S as SPACE, h as SPACE_KEY_CODE } from './keycodes-44c01beb.js';
|
|
4
4
|
import { i as isMultiple } from './multiple-254f4b61.js';
|
|
5
5
|
import { c as createRandomString } from './random-string-2246b81e.js';
|
|
6
6
|
import { a as MDCFloatingLabel } from './component-19eb6e2b.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-d4e788e1.js";(()=>{const l=import.meta.url,i={};return""!==l&&(i.resourcesUrl=new URL(".",l).href),e(i)})().then((e=>l([["p-edbd8d62",[[1,"limel-color-picker",{value:[513],label:[513],helperText:[513,"helper-text"],tooltipLabel:[513,"tooltip-label"],required:[516],readonly:[516],isOpen:[32]}]]],["p-d87e2f26",[[1,"limel-dock",{dockItems:[16],dockFooterItems:[16],accessibleLabel:[513,"accessible-label"],expanded:[516],allowResize:[516,"allow-resize"],mobileBreakPoint:[514,"mobile-break-point"],useMobileLayout:[32]}]]],["p-46a76d55",[[1,"limel-split-button",{label:[513],primary:[516],icon:[513],disabled:[516],items:[16]}]]],["p-
|
|
1
|
+
import{p as e,b as l}from"./p-d4e788e1.js";(()=>{const l=import.meta.url,i={};return""!==l&&(i.resourcesUrl=new URL(".",l).href),e(i)})().then((e=>l([["p-edbd8d62",[[1,"limel-color-picker",{value:[513],label:[513],helperText:[513,"helper-text"],tooltipLabel:[513,"tooltip-label"],required:[516],readonly:[516],isOpen:[32]}]]],["p-d87e2f26",[[1,"limel-dock",{dockItems:[16],dockFooterItems:[16],accessibleLabel:[513,"accessible-label"],expanded:[516],allowResize:[516,"allow-resize"],mobileBreakPoint:[514,"mobile-break-point"],useMobileLayout:[32]}]]],["p-46a76d55",[[1,"limel-split-button",{label:[513],primary:[516],icon:[513],disabled:[516],items:[16]}]]],["p-58e9df30",[[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]}]]],["p-b40f37d7",[[1,"limel-date-picker",{disabled:[516],readonly:[516],invalid:[516],label:[513],placeholder:[513],helperText:[513,"helper-text"],required:[516],value:[16],type:[513],format:[513],language:[513],formatter:[16],formattedValue:[32],internalFormat:[32],showPortal:[32]}]]],["p-4a62273c",[[1,"limel-button-group",{value:[16],disabled:[516],selectedButtonId:[32]}]]],["p-eda87f8c",[[1,"limel-info-tile",{value:[520],icon:[1],label:[513],prefix:[513],suffix:[513],disabled:[516],badge:[520],loading:[516],link:[16],progress:[16]}]]],["p-157e0417",[[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]}]]],["p-a88f2922",[[1,"limel-snackbar",{message:[1],timeout:[2],actionText:[1,"action-text"],dismissible:[4],multiline:[4],language:[1],show:[64]}]]],["p-3fda3473",[[1,"limel-tab-panel",{tabs:[1040]}]]],["p-4eeabc1f",[[1,"limel-file",{value:[16],label:[513],required:[516],disabled:[516],readonly:[516],accept:[513],language:[1],isDraggingOverDropZone:[32]}]]],["p-f11e7ce1",[[1,"limel-collapsible-section",{isOpen:[1540,"is-open"],header:[513],actions:[16]}]]],["p-cc3529bb",[[1,"limel-dialog",{heading:[1],fullscreen:[516],open:[1540],closingActions:[16]}]]],["p-35a6ab13",[[1,"limel-progress-flow",{flowItems:[16],disabled:[4],readonly:[4]}]]],["p-4fcd3337",[[1,"limel-shortcut",{icon:[513],label:[513],disabled:[516],badge:[520],link:[16]}]]],["p-7d7d19de",[[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]}]]],["p-bf3d6097",[[1,"limel-banner",{message:[513],icon:[513],isOpen:[32],open:[64],close:[64]}]]],["p-c47cb4c3",[[1,"limel-callout",{heading:[513],icon:[513],type:[513],language:[1]}]]],["p-b80de0ea",[[1,"limel-code-editor",{value:[1],language:[1],readonly:[4],lineNumbers:[4,"line-numbers"],fold:[4],lint:[4],colorScheme:[1,"color-scheme"],random:[32]}]]],["p-6c38b505",[[1,"limel-config",{config:[16]}]]],["p-5338663b",[[1,"limel-flex-container",{direction:[513],justify:[513],align:[513],reverse:[516]}]]],["p-dcf88b3e",[[1,"limel-form",{schema:[16],value:[16],disabled:[4],propsFactory:[16],transformErrors:[16],errors:[16]}]]],["p-82cd7bb6",[[1,"limel-grid"]]],["p-8c4e3b46",[[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]}]]],["p-c6e913a4",[[1,"limel-switch",{label:[513],disabled:[516],readonly:[516],value:[516],fieldId:[32]}]]],["p-2f9918a3",[[0,"limel-dock-button",{item:[16],expanded:[516],useMobileLayout:[516,"use-mobile-layout"],isOpen:[32]}]]],["p-f979c0f2",[[1,"limel-color-picker-palette",{value:[513],label:[513],helperText:[513,"helper-text"],required:[516]}]]],["p-73613abb",[[1,"limel-menu-list",{items:[16],badgeIcons:[4,"badge-icons"],iconSize:[1,"icon-size"],type:[1],maxLinesSecondaryText:[2,"max-lines-secondary-text"]}]]],["p-d16b27b9",[[1,"limel-menu",{items:[16],disabled:[516],openDirection:[513,"open-direction"],open:[1540],badgeIcons:[516,"badge-icons"],gridLayout:[516,"grid-layout"]}]]],["p-123f5fbb",[[1,"limel-icon-button",{icon:[513],elevated:[516],label:[513],disabled:[516]}]]],["p-55c8cb64",[[1,"limel-tab-bar",{tabs:[1040],canScrollLeft:[32],canScrollRight:[32]},[[9,"resize","handleWindowResize"]]]]],["p-95cefb5f",[[1,"limel-header",{icon:[1],heading:[1],subheading:[1],supportingText:[1,"supporting-text"]}]]],["p-cfaa685f",[[0,"limel-progress-flow-item",{item:[16],disabled:[4],readonly:[4]}]]],["p-eed2a202",[[1,"limel-checkbox",{disabled:[516],readonly:[516],label:[513],helperText:[513,"helper-text"],checked:[516],indeterminate:[516],required:[516],modified:[32]}]]],["p-e69231c2",[[1,"limel-flatpickr-adapter",{value:[16],type:[1],format:[1],isOpen:[4,"is-open"],inputElement:[16],language:[1],formatter:[16]}]]],["p-10e259de",[[1,"limel-spinner",{size:[513],limeBranded:[4,"lime-branded"]}]]],["p-9336fd7f",[[1,"limel-button",{label:[513],primary:[516],outlined:[516],icon:[513],disabled:[516],loading:[516],loadingFailed:[516,"loading-failed"],justLoaded:[32]}]]],["p-2fd478df",[[1,"limel-badge",{label:[520]}]]],["p-b1ae3d1f",[[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]}]]],["p-05d88196",[[1,"limel-circular-progress",{value:[2],maxValue:[2,"max-value"],prefix:[513],suffix:[1],displayPercentageColors:[4,"display-percentage-colors"],size:[513]}],[1,"limel-linear-progress",{value:[2],indeterminate:[4]}]]],["p-3be2dfc7",[[1,"limel-portal",{openDirection:[1,"open-direction"],position:[1],containerId:[1,"container-id"],containerStyle:[16],parent:[16],inheritParentWidth:[4,"inherit-parent-width"],visible:[4]}]]],["p-d0084a70",[[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]}]]],["p-75d01713",[[1,"limel-icon",{size:[513],name:[513],badge:[516]}]]],["p-da536426",[[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]}]]],["p-50dbd665",[[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]}]]]],e)));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{h as e,r as t,c,g as l}from"./p-d4e788e1.js";import{b as i}from"./p-cc9ebbef.js";import{
|
|
1
|
+
import{h as e,r as t,c,g as l}from"./p-d4e788e1.js";import{b as i}from"./p-cc9ebbef.js";import{a as d,d as o,S as n,h as r}from"./p-d7801e00.js";import{i as a}from"./p-af8d4fe7.js";import{c as s}from"./p-6c094f3f.js";import{a as m}from"./p-d0a7de87.js";import{M as p,a as h}from"./p-48d4ef20.js";import"./p-0b1af919.js";import"./p-dcc97cc2.js";
|
|
2
2
|
/*! *****************************************************************************
|
|
3
3
|
Copyright (c) Microsoft Corporation.
|
|
4
4
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,c as e,h as o,g as i}from"./p-d4e788e1.js";import{c as s}from"./p-6c094f3f.js";import{
|
|
1
|
+
import{r as t,c as e,h as o,g as i}from"./p-d4e788e1.js";import{c as s}from"./p-6c094f3f.js";import{E as r}from"./p-d7801e00.js";import{z as l}from"./p-7cda574b.js";import"./p-b28128d2.js";import"./p-5fdb83c9.js";import"./p-4c3358cb.js";import"./p-eda23c05.js";import"./p-c93050d6.js";function a(t,e){var o;if(t.contains(e)||(null===(o=t.shadowRoot)||void 0===o?void 0:o.contains(e)))return!0;const i=function(t){const e=t.closest(".limel-portal--container");return e?e.portalSource:t.getRootNode().host}(e);return!!i&&a(t,i)}const n=class{constructor(o){t(this,o),this.close=e(this,"close",7),this.handleGlobalKeyPress=t=>{t.key===r&&(t.stopPropagation(),t.preventDefault(),this.close.emit())},this.open=!1,this.openDirection=void 0,this.portalId=s(),this.globalClickListener=this.globalClickListener.bind(this)}watchOpen(){this.setupGlobalHandlers()}componentWillLoad(){this.setupGlobalHandlers()}setupGlobalHandlers(){this.open?(document.addEventListener("click",this.globalClickListener,{capture:!0}),document.addEventListener("keyup",this.handleGlobalKeyPress)):(document.removeEventListener("click",this.globalClickListener),document.removeEventListener("keyup",this.handleGlobalKeyPress))}render(){const t=this.getCssProperties(),e=getComputedStyle(this.host).getPropertyValue("--popover-z-index");return o("div",{class:"trigger-anchor"},o("slot",{name:"trigger"}),o("limel-portal",{visible:this.open,containerId:this.portalId,containerStyle:{"z-index":e},openDirection:this.openDirection},o("limel-popover-surface",{contentCollection:this.host.children,style:t})))}globalClickListener(t){const e=a(this.host,t.target);this.open&&!e&&(t.stopPropagation(),t.preventDefault(),this.close.emit())}getCssProperties(){const t=["--popover-surface-width","--popover-body-background-color","--popover-border-radius"],e=getComputedStyle(this.host),o=t.map((t=>e.getPropertyValue(t)));return l(t,o)}get host(){return i(this)}static get watchers(){return{open:["watchOpen"]}}};n.style=".trigger-anchor{display:inline-block;position:relative}";const c=class{constructor(e){t(this,e),this.contentCollection=void 0}componentDidLoad(){this.appendElement()}render(){return o("div",{class:"limel-popover-surface",tabindex:"0"})}appendElement(){const t=this.host.shadowRoot.querySelector(".limel-popover-surface");Array.from(this.contentCollection).forEach((e=>{"trigger"!==e.slot&&t.appendChild(e)}))}get host(){return i(this)}};c.style=':host(limel-popover-surface){isolation:isolate}.limel-popover-surface{position:relative;display:flex;flex-direction:column;width:var(--popover-surface-width, auto);max-height:calc(100vh - 2rem);max-width:calc(100vw - 2rem);margin:0 0.25rem;border-radius:var(--popover-border-radius, 0.75rem);box-shadow:var(--shadow-depth-16);backdrop-filter:blur(0.3125rem);-webkit-backdrop-filter:blur(0.3125rem)}.limel-popover-surface:after{transition:opacity 0.4s ease;pointer-events:none;content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0.75;border-radius:var(--popover-border-radius, 0.75rem);background-color:var(--popover-body-background-color, var(--lime-elevated-surface-background-color))}.limel-popover-surface:focus{outline:none}.limel-popover-surface:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.limel-popover-surface:focus:after,.limel-popover-surface:focus-within:after{opacity:1}';const h=class{constructor(e){t(this,e),this.showTooltip=()=>{this.showTooltipTimeoutHandle=window.setTimeout((()=>{this.open=!0}),500)},this.hideTooltip=()=>{clearTimeout(this.showTooltipTimeoutHandle),this.open=!1},this.elementId=void 0,this.label=void 0,this.helperLabel=void 0,this.maxlength=50,this.open=void 0,this.portalId=s(),this.tooltipId=s()}connectedCallback(){this.setOwnerAriaLabel(),this.addListeners()}disconnectedCallback(){this.removeListeners()}render(){const t=getComputedStyle(this.host).getPropertyValue("--tooltip-z-index");return o("div",{class:"trigger-anchor"},o("limel-portal",{openDirection:"bottom-start",visible:this.open,containerId:this.portalId,containerStyle:{"z-index":t,"pointer-events":"none"}},o("limel-tooltip-content",{label:this.label,helperLabel:this.helperLabel,maxlength:this.maxlength,role:"tooltip","aria-hidden":!this.open,id:this.tooltipId})))}setOwnerAriaLabel(){const t=this.getOwnerElement();null==t||t.setAttribute("aria-describedby",this.tooltipId)}addListeners(){const t=this.getOwnerElement();null==t||t.addEventListener("mouseover",this.showTooltip),null==t||t.addEventListener("mouseout",this.hideTooltip),null==t||t.addEventListener("click",this.hideTooltip)}removeListeners(){const t=this.getOwnerElement();null==t||t.removeEventListener("mouseover",this.showTooltip),null==t||t.removeEventListener("mouseout",this.hideTooltip),null==t||t.removeEventListener("click",this.hideTooltip)}getOwnerElement(){let t=this.host;do{t=t.parentNode}while(t&&t.nodeType!==Node.DOCUMENT_FRAGMENT_NODE&&t.nodeType!==Node.DOCUMENT_NODE);return null==t?void 0:t.getElementById(this.elementId)}get host(){return i(this)}};h.style=".trigger-anchor{position:relative}";const p=class{constructor(e){t(this,e),this.label=void 0,this.helperLabel=void 0,this.maxlength=void 0}render(){let t=!1;this.helperLabel&&this.maxlength&&(t=this.label.length+this.helperLabel.length>this.maxlength);const e={};return this.maxlength&&(e.style={"--tooltip-max-width-of-text":`${this.maxlength}ch`}),[o("text",Object.assign({class:{"has-column-layout":t}},e),o("div",{class:"label"},this.label),o("div",{class:"helper-label"},this.helperLabel))]}};p.style=":host{animation:display-tooltip 0.2s ease;display:flex;border-radius:0.25rem;padding:0.25rem 0.5rem;background-color:rgb(var(--contrast-1300));box-shadow:var(--shadow-depth-16)}text{font-size:0.875rem;line-height:1.25;display:flex;column-gap:1rem}text.has-column-layout{display:table-cell;width:fit-content;max-width:min(var(--tooltip-max-width-of-text), 80vw)}text.has-column-layout .label{padding-bottom:0.5rem}text.has-column-layout .helper-label{padding-bottom:0.25rem}.label{color:rgb(var(--contrast-200))}.helper-label{color:rgb(var(--contrast-800))}.helper-label:empty{display:none}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";export{n as limel_popover,c as limel_popover_surface,h as limel_tooltip,p as limel_tooltip_content}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{r as t,c as i,h as s,g as e}from"./p-d4e788e1.js";import{i as n}from"./p-0534b23b.js";import{T as h,
|
|
1
|
+
import{r as t,c as i,h as s,g as e}from"./p-d4e788e1.js";import{i as n}from"./p-0534b23b.js";import{T as h,E as r,a as o,b as l,c as a,d as c,A as u,e as d,f as p,g as m}from"./p-d7801e00.js";import{c as f}from"./p-6c094f3f.js";function v(t){return"function"==typeof t?t():t}function y(){var t={};return t.promise=new Promise((function(i,s){t.resolve=i,t.reject=s})),t}function g(t){var i=null,s=null,e=new Promise((function(t,e){i=t,s=e}));return t&&t.then((function(t){i&&i(t)}),(function(t){s&&s(t)})),{promise:e,resolve:function(t){i&&i(t)},reject:function(t){s&&s(t)},cancel:function(){i=null,s=null}}}
|
|
2
2
|
/*! *****************************************************************************
|
|
3
3
|
Copyright (c) Microsoft Corporation. All rights reserved.
|
|
4
4
|
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,g as d}from"./p-d4e788e1.js";import{i as c,j as n,k as l,l as o,
|
|
1
|
+
import{r as t,c as e,h as i,g as d}from"./p-d4e788e1.js";import{i as c,j as n,k as l,l as o,a as r,d as a,D as m,m as f,B as s,n as p,E as h,c as x}from"./p-d7801e00.js";import{t as u}from"./p-b59e4287.js";import{g,a as b}from"./p-2f71d4d4.js";import{M as _}from"./p-1c284626.js";import{i as v}from"./p-ade76f1d.js";import{M as y,a as w}from"./p-48d4ef20.js";import{M as k,b as z}from"./p-cbc43682.js";import{n as C,i as E,K as I}from"./p-6e219bb4.js";import"./p-dcc97cc2.js";import"./p-d0a7de87.js";import"./p-eda23c05.js";import"./p-c93050d6.js";import"./p-4c3358cb.js";import"./p-0b1af919.js";import"./p-858c6b82.js";import"./p-9acf7b5d.js";
|
|
2
2
|
/*! *****************************************************************************
|
|
3
3
|
Copyright (c) Microsoft Corporation.
|
|
4
4
|
|