@leavittsoftware/web 1.0.0 → 1.2.0
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/leavitt/api-service/api-service.js +5 -5
- package/leavitt/api-service/api-service.js.map +1 -1
- package/leavitt/api-service/odata-response.js +2 -2
- package/leavitt/api-service/odata-response.js.map +1 -1
- package/leavitt/company-select/company-select.js +10 -10
- package/leavitt/person-company-select/person-company-select.js +14 -14
- package/leavitt/person-group-select/person-group-select.js +18 -18
- package/leavitt/person-select/person-select.js +4 -4
- package/leavitt/profile-picture/profile-picture-menu.js +96 -96
- package/leavitt/profile-picture/profile-picture.js +64 -64
- package/leavitt/user-feedback/user-feedback.js +79 -79
- package/package.json +37 -36
- package/titanium/access-denied-page/access-denied-page.js +330 -330
- package/titanium/address-input/address-input.js +17 -17
- package/titanium/address-input/address-input.js.map +1 -1
- package/titanium/address-input/google-address-input.js +4 -4
- package/titanium/address-input/manual-address-dialog.js +127 -127
- package/titanium/card/card.js +117 -117
- package/titanium/chip-multi-select/chip-multi-select.js +38 -38
- package/titanium/data-table/data-table-header.js +95 -95
- package/titanium/data-table/data-table-item.js +163 -163
- package/titanium/data-table/data-table.js +313 -313
- package/titanium/data-table/data-table.js.map +1 -1
- package/titanium/data-table/filter-controller.js +5 -5
- package/titanium/data-table/filter-controller.js.map +1 -1
- package/titanium/data-table/page-control.js +75 -75
- package/titanium/data-table/page-control.js.map +1 -1
- package/titanium/date-range-selector/date-range-change-event.js.map +1 -1
- package/titanium/date-range-selector/date-range-selector.js +51 -51
- package/titanium/drawer/drawer.js +125 -125
- package/titanium/drawer/drawer.js.map +1 -1
- package/titanium/duration-input/human-interval.js +6 -6
- package/titanium/duration-input/human-interval.js.map +1 -1
- package/titanium/error-page/error-page.js +66 -66
- package/titanium/event-bus/event-bus.js +7 -7
- package/titanium/event-bus/event-bus.js.map +1 -1
- package/titanium/extendable-outlined-text-field/extendable-outlined-text-field.js +28 -28
- package/titanium/full-page-loading-indicator/full-page-loading-indicator.js +48 -48
- package/titanium/header/header.js +83 -83
- package/titanium/helpers/debouncer.js.map +1 -1
- package/titanium/helpers/dev-detection.js +1 -1
- package/titanium/helpers/dev-detection.js.map +1 -1
- package/titanium/helpers/media-query.js +1 -1
- package/titanium/helpers/media-query.js.map +1 -1
- package/titanium/helpers/search-token.js +2 -2
- package/titanium/helpers/search-token.js.map +1 -1
- package/titanium/icon-picker/icon-picker.js +4 -4
- package/titanium/search-input/search-input.js +117 -117
- package/titanium/show-hide/show-hide.js +54 -54
- package/titanium/show-hide/show-hide.js.map +1 -1
- package/titanium/single-select-base/single-select-base.js +93 -92
- package/titanium/single-select-base/single-select-base.js.map +1 -1
- package/titanium/smart-attachment-input/crop-and-save-image-dialog.js +115 -115
- package/titanium/smart-attachment-input/cropper-styles.js +307 -307
- package/titanium/smart-attachment-input/image-preview-dialog.js +29 -29
- package/titanium/smart-attachment-input/smart-attachment-input.js +81 -81
- package/titanium/snackbar/snackbar.js +133 -133
- package/titanium/styles/a.js +15 -15
- package/titanium/styles/data-row.js +43 -43
- package/titanium/styles/ellipsis.js +6 -6
- package/titanium/styles/h1.js +14 -14
- package/titanium/styles/h2.js +14 -14
- package/titanium/styles/h3.js +14 -14
- package/titanium/styles/h4.js +14 -14
- package/titanium/styles/h5.js +16 -16
- package/titanium/styles/p.js +14 -14
- package/titanium/toolbar/toolbar.js +45 -45
- package/titanium/types/pending-state-event.js.map +1 -1
- package/titanium/youtube-input/youtube-input.js +9 -9
- package/titanium/address-input/Address.js.map +0 -1
- package/titanium/address-input/types/address.js.map +0 -1
- package/titanium/address-input/types/autocomplete-prediction-suggestion.js.map +0 -1
- package/titanium/extendable-outlined-text-field/extensible-outlined-text-field.d.ts +0 -45
- package/titanium/extendable-outlined-text-field/extensible-outlined-text-field.js.map +0 -1
|
@@ -43,7 +43,7 @@ let TitaniumShowHideElement = class TitaniumShowHideElement extends LitElement {
|
|
|
43
43
|
// Look at the reserved space in the container and see how many items we can show without exceeding the collapse height.
|
|
44
44
|
// We then display the count of the remaining hidden items on the button
|
|
45
45
|
const items = this.itemsContainer.children?.[0]?.assignedElements();
|
|
46
|
-
this.hiddenItemCount = items.filter(o => !this.#isWithin(this.collapsedContainer, o)).length;
|
|
46
|
+
this.hiddenItemCount = items.filter((o) => !this.#isWithin(this.collapsedContainer, o)).length;
|
|
47
47
|
this.hasHiddenItems = !!this.hiddenItemCount;
|
|
48
48
|
});
|
|
49
49
|
resizeObserver.observe(this.itemsContainer);
|
|
@@ -57,62 +57,62 @@ let TitaniumShowHideElement = class TitaniumShowHideElement extends LitElement {
|
|
|
57
57
|
elementRect.right <= containerRect.right);
|
|
58
58
|
}
|
|
59
59
|
static { this.styles = [
|
|
60
|
-
css `
|
|
61
|
-
:host {
|
|
62
|
-
display: flex;
|
|
63
|
-
flex-direction: column;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
items-container,
|
|
67
|
-
collapsed-box {
|
|
68
|
-
display: block;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
:host([collapsed]) collapsed-box {
|
|
72
|
-
overflow: hidden;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
:host([collapsed][has-hidden-items]:not([disable-fade])) collapsed-box {
|
|
76
|
-
-webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
|
|
77
|
-
mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
items-container {
|
|
81
|
-
display: flex;
|
|
82
|
-
flex-direction: var(--titanium-show-hide-flex-direction, column);
|
|
83
|
-
flex-wrap: var(--titanium-show-hide-flex-wrap, wrap);
|
|
84
|
-
gap: var(--titanium-show-hide-gap, 8px);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
md-outlined-button {
|
|
88
|
-
max-width: 160px;
|
|
89
|
-
width: 100%;
|
|
90
|
-
margin-top: 12px;
|
|
91
|
-
align-self: center;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
[hidden] {
|
|
95
|
-
display: none;
|
|
96
|
-
}
|
|
60
|
+
css `
|
|
61
|
+
:host {
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: column;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
items-container,
|
|
67
|
+
collapsed-box {
|
|
68
|
+
display: block;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
:host([collapsed]) collapsed-box {
|
|
72
|
+
overflow: hidden;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
:host([collapsed][has-hidden-items]:not([disable-fade])) collapsed-box {
|
|
76
|
+
-webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
|
|
77
|
+
mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
items-container {
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-direction: var(--titanium-show-hide-flex-direction, column);
|
|
83
|
+
flex-wrap: var(--titanium-show-hide-flex-wrap, wrap);
|
|
84
|
+
gap: var(--titanium-show-hide-gap, 8px);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
md-outlined-button {
|
|
88
|
+
max-width: 160px;
|
|
89
|
+
width: 100%;
|
|
90
|
+
margin-top: 12px;
|
|
91
|
+
align-self: center;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
[hidden] {
|
|
95
|
+
display: none;
|
|
96
|
+
}
|
|
97
97
|
`,
|
|
98
98
|
]; }
|
|
99
99
|
render() {
|
|
100
|
-
return html `
|
|
101
|
-
<style>
|
|
102
|
-
:host([collapsed]) collapsed-box {
|
|
103
|
-
max-height: ${this.collapseHeight}px;
|
|
104
|
-
}
|
|
105
|
-
</style>
|
|
106
|
-
<collapsed-box>
|
|
107
|
-
<items-container part="items-container">
|
|
108
|
-
<slot></slot>
|
|
109
|
-
</items-container>
|
|
110
|
-
</collapsed-box>
|
|
111
|
-
<slot name="button" @click=${() => (this.collapsed = !this.collapsed)}>
|
|
112
|
-
<md-outlined-button part="button" ?hidden=${!this.hasHiddenItems}>
|
|
113
|
-
${this.collapsed ? `Show more (${this.hiddenItemCount})` : 'Show less'}</md-outlined-button
|
|
114
|
-
>
|
|
115
|
-
</slot>
|
|
100
|
+
return html `
|
|
101
|
+
<style>
|
|
102
|
+
:host([collapsed]) collapsed-box {
|
|
103
|
+
max-height: ${this.collapseHeight}px;
|
|
104
|
+
}
|
|
105
|
+
</style>
|
|
106
|
+
<collapsed-box>
|
|
107
|
+
<items-container part="items-container">
|
|
108
|
+
<slot></slot>
|
|
109
|
+
</items-container>
|
|
110
|
+
</collapsed-box>
|
|
111
|
+
<slot name="button" @click=${() => (this.collapsed = !this.collapsed)}>
|
|
112
|
+
<md-outlined-button part="button" ?hidden=${!this.hasHiddenItems}>
|
|
113
|
+
${this.collapsed ? `Show more (${this.hiddenItemCount})` : 'Show less'}</md-outlined-button
|
|
114
|
+
>
|
|
115
|
+
</slot>
|
|
116
116
|
`;
|
|
117
117
|
}
|
|
118
118
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"show-hide.js","sourceRoot":"","sources":["show-hide.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,sCAAsC,CAAC;AAE9C;;;;;;;;;;;;;GAaG;AAEY,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAAhD;;QACb;;;;WAIG;QACuD,mBAAc,GAAW,GAAG,CAAC;QAChB,gBAAW,GAAY,KAAK,CAAC;QAChC,cAAS,GAAY,IAAI,CAAC;QACT,mBAAc,GAAY,KAAK,CAAC;QACzF,oBAAe,GAAW,CAAC,CAAC;IAmG1D,CAAC;IA9FC,OAAO,CAAC,YAAkC;QACxC,IAAI,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YACjC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC;SACpD;QAED,IAAI,YAAY,CAAC,GAAG,CAAC,iBAAiB,CAAC,EAAE;YACvC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,2BAA2B,CAAC,CAAC,CAAC;SAC5D;IACH,CAAC;IAED,YAAY;QACV,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YAC7C,wHAAwH;YACxH,wEAAwE;YACxE,MAAM,KAAK,GAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAqB,EAAE,gBAAgB,EAAE,CAAC;YACzF,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"show-hide.js","sourceRoot":"","sources":["show-hide.ts"],"names":[],"mappings":"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"}
|
|
@@ -160,7 +160,7 @@ let TitaniumSingleSelectBase = class TitaniumSingleSelectBase extends LoadWhile(
|
|
|
160
160
|
* Runs checkValidity() method, and if it returns false, then it reports to the user that the input is invalid.
|
|
161
161
|
*/
|
|
162
162
|
reportValidity() {
|
|
163
|
-
|
|
163
|
+
const result = this.textfield?.reportValidity();
|
|
164
164
|
this.customReportValidity();
|
|
165
165
|
return result;
|
|
166
166
|
}
|
|
@@ -212,64 +212,65 @@ let TitaniumSingleSelectBase = class TitaniumSingleSelectBase extends LoadWhile(
|
|
|
212
212
|
}
|
|
213
213
|
}
|
|
214
214
|
static { this.styles = [
|
|
215
|
-
css `
|
|
216
|
-
:host {
|
|
217
|
-
display: block;
|
|
218
|
-
position: relative;
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
md-outlined-text-field {
|
|
222
|
-
width: 100%;
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
md-linear-progress {
|
|
226
|
-
margin: 0px 12px 4px 12px;
|
|
227
|
-
min-width: 276px;
|
|
228
|
-
width: calc(100% - 24px);
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
md-linear-progress[hide] {
|
|
232
|
-
visibility: hidden;
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
md-menu-item {
|
|
236
|
-
min-width: 300px;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
:host([shaped]) {
|
|
240
|
-
--md-outlined-text-field-container-shape: 28px;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
:host([shallow]) {
|
|
244
|
-
--md-outlined-text-field-container-shape: 12px;
|
|
245
|
-
}
|
|
246
|
-
|
|
247
|
-
img[leading] {
|
|
248
|
-
width: 24px;
|
|
249
|
-
height: 24px;
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
img[company-mark] {
|
|
253
|
-
width: 40px;
|
|
254
|
-
height: 40px;
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
[summary] {
|
|
258
|
-
padding: 0px 16px 4px 16px;
|
|
259
|
-
font-family: Roboto, Arial, sans-serif;
|
|
260
|
-
color: var(--app-light-text-color);
|
|
261
|
-
line-height: 18px;
|
|
262
|
-
font-size: 13px;
|
|
263
|
-
}
|
|
215
|
+
css `
|
|
216
|
+
:host {
|
|
217
|
+
display: block;
|
|
218
|
+
position: relative;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
md-outlined-text-field {
|
|
222
|
+
width: 100%;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
md-linear-progress {
|
|
226
|
+
margin: 0px 12px 4px 12px;
|
|
227
|
+
min-width: 276px;
|
|
228
|
+
width: calc(100% - 24px);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
md-linear-progress[hide] {
|
|
232
|
+
visibility: hidden;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
md-menu-item {
|
|
236
|
+
min-width: 300px;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
:host([shaped]) {
|
|
240
|
+
--md-outlined-text-field-container-shape: 28px;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
:host([shallow]) {
|
|
244
|
+
--md-outlined-text-field-container-shape: 12px;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
img[leading] {
|
|
248
|
+
width: 24px;
|
|
249
|
+
height: 24px;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
img[company-mark] {
|
|
253
|
+
width: 40px;
|
|
254
|
+
height: 40px;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
[summary] {
|
|
258
|
+
padding: 0px 16px 4px 16px;
|
|
259
|
+
font-family: Roboto, Arial, sans-serif;
|
|
260
|
+
color: var(--app-light-text-color);
|
|
261
|
+
line-height: 18px;
|
|
262
|
+
font-size: 13px;
|
|
263
|
+
}
|
|
264
264
|
`,
|
|
265
265
|
]; }
|
|
266
266
|
// Override to create custom menu items for type T
|
|
267
267
|
renderSuggestion(entity) {
|
|
268
|
-
return html `<md-menu-item .item=${entity} ?selected=${this.selected?.Id === entity.Id}>
|
|
269
|
-
<slot name="trailing-icon" slot="trailing-icon"></slot>
|
|
270
|
-
<span slot="headline">${entity.Id}</span>
|
|
268
|
+
return html `<md-menu-item .item=${entity} ?selected=${this.selected?.Id === entity.Id}>
|
|
269
|
+
<slot name="trailing-icon" slot="trailing-icon"></slot>
|
|
270
|
+
<span slot="headline">${entity.Id}</span>
|
|
271
271
|
</md-menu-item>`;
|
|
272
272
|
}
|
|
273
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
273
274
|
renderSelectedLeadingInputSlot(_entity) { }
|
|
274
275
|
renderTrailingInputSlot() {
|
|
275
276
|
return html `<slot name="trailing-icon" slot="trailing-icon"></slot>`;
|
|
@@ -281,25 +282,25 @@ let TitaniumSingleSelectBase = class TitaniumSingleSelectBase extends LoadWhile(
|
|
|
281
282
|
return html ``;
|
|
282
283
|
}
|
|
283
284
|
render() {
|
|
284
|
-
return html `
|
|
285
|
-
<md-outlined-text-field
|
|
286
|
-
id="menu-anchor"
|
|
287
|
-
aria-haspopup="true"
|
|
288
|
-
aria-controls="menu"
|
|
289
|
-
.disabled=${this.disabled}
|
|
290
|
-
.error=${this.error}
|
|
291
|
-
.errorText=${this.errorText}
|
|
292
|
-
.label=${this.label}
|
|
293
|
-
.required=${this.required}
|
|
294
|
-
.prefixText=${this.prefixText}
|
|
295
|
-
.suffixText=${this.suffixText}
|
|
296
|
-
.hasLeadingIcon=${this.hasLeadingIcon}
|
|
297
|
-
.hasTrailingIcon=${this.hasTrailingIcon}
|
|
298
|
-
.supportingText=${this.supportingText}
|
|
299
|
-
.textDirection=${this.textDirection}
|
|
300
|
-
.placeholder=${this.placeholder}
|
|
301
|
-
.value=${this.selected?.[this.pathToSelectedText] || this.searchTerm || ''}
|
|
302
|
-
default-focus="0"
|
|
285
|
+
return html `
|
|
286
|
+
<md-outlined-text-field
|
|
287
|
+
id="menu-anchor"
|
|
288
|
+
aria-haspopup="true"
|
|
289
|
+
aria-controls="menu"
|
|
290
|
+
.disabled=${this.disabled}
|
|
291
|
+
.error=${this.error}
|
|
292
|
+
.errorText=${this.errorText}
|
|
293
|
+
.label=${this.label}
|
|
294
|
+
.required=${this.required}
|
|
295
|
+
.prefixText=${this.prefixText}
|
|
296
|
+
.suffixText=${this.suffixText}
|
|
297
|
+
.hasLeadingIcon=${this.hasLeadingIcon}
|
|
298
|
+
.hasTrailingIcon=${this.hasTrailingIcon}
|
|
299
|
+
.supportingText=${this.supportingText}
|
|
300
|
+
.textDirection=${this.textDirection}
|
|
301
|
+
.placeholder=${this.placeholder}
|
|
302
|
+
.value=${this.selected?.[this.pathToSelectedText] || this.searchTerm || ''}
|
|
303
|
+
default-focus="0"
|
|
303
304
|
@keydown=${(e) => {
|
|
304
305
|
if (this.suggestions.length > 0 && (e.key == 'Enter' || e.key == 'ArrowDown' || e.key == 'ArrowUp')) {
|
|
305
306
|
e.stopPropagation();
|
|
@@ -310,8 +311,8 @@ let TitaniumSingleSelectBase = class TitaniumSingleSelectBase extends LoadWhile(
|
|
|
310
311
|
this.menu.close();
|
|
311
312
|
}
|
|
312
313
|
}
|
|
313
|
-
}}
|
|
314
|
-
@input=${async (e) => this.#onInput(e.target.value)}
|
|
314
|
+
}}
|
|
315
|
+
@input=${async (e) => this.#onInput(e.target.value)}
|
|
315
316
|
@focus=${() => {
|
|
316
317
|
if (this.selected) {
|
|
317
318
|
this.select();
|
|
@@ -321,29 +322,29 @@ let TitaniumSingleSelectBase = class TitaniumSingleSelectBase extends LoadWhile(
|
|
|
321
322
|
this.menu?.show();
|
|
322
323
|
}
|
|
323
324
|
}
|
|
324
|
-
}}
|
|
325
|
-
>
|
|
326
|
-
${this.selected ? this.renderSelectedLeadingInputSlot(this.selected) : this.renderLeadingInputSlot()} ${this.renderTrailingInputSlot()}
|
|
327
|
-
</md-outlined-text-field>
|
|
328
|
-
<md-menu
|
|
329
|
-
quick
|
|
330
|
-
id="menu"
|
|
331
|
-
anchor="menu-anchor"
|
|
332
|
-
anchor-corner="end-start"
|
|
333
|
-
default-focus="list-root"
|
|
334
|
-
skip-restore-focus
|
|
325
|
+
}}
|
|
326
|
+
>
|
|
327
|
+
${this.selected ? this.renderSelectedLeadingInputSlot(this.selected) : this.renderLeadingInputSlot()} ${this.renderTrailingInputSlot()}
|
|
328
|
+
</md-outlined-text-field>
|
|
329
|
+
<md-menu
|
|
330
|
+
quick
|
|
331
|
+
id="menu"
|
|
332
|
+
anchor="menu-anchor"
|
|
333
|
+
anchor-corner="end-start"
|
|
334
|
+
default-focus="list-root"
|
|
335
|
+
skip-restore-focus
|
|
335
336
|
@close-menu=${(e) => {
|
|
336
337
|
const selectedMenuItem = (e.detail.itemPath?.[0] ?? null);
|
|
337
338
|
this.setSelected(selectedMenuItem?.item);
|
|
338
|
-
}}
|
|
339
|
-
>
|
|
340
|
-
<md-linear-progress ?indeterminate=${this.isLoading} ?hide=${!this.isLoading}></md-linear-progress>
|
|
339
|
+
}}
|
|
340
|
+
>
|
|
341
|
+
<md-linear-progress ?indeterminate=${this.isLoading} ?hide=${!this.isLoading}></md-linear-progress>
|
|
341
342
|
${!!this.searchTerm && !this.isLoading
|
|
342
343
|
? html `<div summary>Showing ${this.suggestions.length} of ${this.count} result${this.count === 1 ? '' : 's'} for '${this.searchTerm}'</div>`
|
|
343
|
-
: ''}
|
|
344
|
-
${repeat(this.suggestions, (item) => item?.Id, (item) => this.renderSuggestion(item))}
|
|
345
|
-
</md-menu>
|
|
346
|
-
${this.renderTrailingSlot()}
|
|
344
|
+
: ''}
|
|
345
|
+
${repeat(this.suggestions, (item) => item?.Id, (item) => this.renderSuggestion(item))}
|
|
346
|
+
</md-menu>
|
|
347
|
+
${this.renderTrailingSlot()}
|
|
347
348
|
`;
|
|
348
349
|
}
|
|
349
350
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"single-select-base.js","sourceRoot":"","sources":["single-select-base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,wCAAwC,CAAC;AAChD,OAAO,yBAAyB,CAAC;AACjC,OAAO,6CAA6C,CAAC;AAErD,OAAO,yBAAyB,CAAC;AACjC,OAAO,8BAA8B,CAAC;AAMtC,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAIvD,IAAM,wBAAwB,GAA9B,MAAM,wBAA+C,SAAQ,SAAS,CAAC,UAAU,CAAC;IAAlF;;QAEc,gBAAW,GAAa,EAAE,CAAC;QAQT,+BAAgB,eAAe,CAAC;QAKhC,qCAAsB,qBAAqB,CAAC;QAK5C,kCAAqB,IAAI,CAAC;QAKzB,kCAAoB,KAAK,CAAC;QAQ1B,+BAAiB,KAAK,CAAC;QAOvB,kCAAoB,KAAK,CAAC;QAiC3B,4CAA6B,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"single-select-base.js","sourceRoot":"","sources":["single-select-base.ts"],"names":[],"mappings":"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"}
|
|
@@ -41,83 +41,83 @@ let CropAndSaveImageDialog = class CropAndSaveImageDialog extends LoadWhile(LitE
|
|
|
41
41
|
h1,
|
|
42
42
|
p,
|
|
43
43
|
cropperCSS,
|
|
44
|
-
css `
|
|
45
|
-
:host {
|
|
46
|
-
display: block;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
md-dialog {
|
|
50
|
-
max-width: calc(100vw - 24px);
|
|
51
|
-
max-height: calc(100vh - 24px);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
main {
|
|
55
|
-
display: flex;
|
|
56
|
-
position: relative;
|
|
57
|
-
align-self: center;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
loading-animation {
|
|
61
|
-
display: flex;
|
|
62
|
-
flex-direction: column;
|
|
63
|
-
place-content: center;
|
|
64
|
-
place-items: center;
|
|
65
|
-
width: 100%;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
loading-animation img {
|
|
69
|
-
height: 300px;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
section[crop] {
|
|
73
|
-
display: grid;
|
|
74
|
-
width: 100%;
|
|
75
|
-
grid: 'cropper buttons' / 1fr 58px;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
cropper-container {
|
|
79
|
-
grid-area: cropper;
|
|
80
|
-
|
|
81
|
-
display: block;
|
|
82
|
-
max-width: 800px;
|
|
83
|
-
max-height: 600px;
|
|
84
|
-
overflow: hidden;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
cropper-container img {
|
|
88
|
-
display: block;
|
|
89
|
-
/* This rule is very important, please don't ignore this */
|
|
90
|
-
max-width: 100%;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
crop-buttons {
|
|
94
|
-
grid-area: buttons;
|
|
95
|
-
|
|
96
|
-
display: grid;
|
|
97
|
-
align-content: start;
|
|
98
|
-
grid-auto-flow: row;
|
|
99
|
-
|
|
100
|
-
padding: 0 8px;
|
|
101
|
-
gap: 8px;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
@media (max-width: 600px) {
|
|
105
|
-
section[crop] {
|
|
106
|
-
grid:
|
|
107
|
-
'cropper'
|
|
108
|
-
'buttons';
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
crop-buttons {
|
|
112
|
-
justify-content: end;
|
|
113
|
-
grid-auto-flow: column;
|
|
114
|
-
padding: 8px 0;
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
[hidden] {
|
|
119
|
-
display: none !important;
|
|
120
|
-
}
|
|
44
|
+
css `
|
|
45
|
+
:host {
|
|
46
|
+
display: block;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
md-dialog {
|
|
50
|
+
max-width: calc(100vw - 24px);
|
|
51
|
+
max-height: calc(100vh - 24px);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
main {
|
|
55
|
+
display: flex;
|
|
56
|
+
position: relative;
|
|
57
|
+
align-self: center;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
loading-animation {
|
|
61
|
+
display: flex;
|
|
62
|
+
flex-direction: column;
|
|
63
|
+
place-content: center;
|
|
64
|
+
place-items: center;
|
|
65
|
+
width: 100%;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
loading-animation img {
|
|
69
|
+
height: 300px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
section[crop] {
|
|
73
|
+
display: grid;
|
|
74
|
+
width: 100%;
|
|
75
|
+
grid: 'cropper buttons' / 1fr 58px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
cropper-container {
|
|
79
|
+
grid-area: cropper;
|
|
80
|
+
|
|
81
|
+
display: block;
|
|
82
|
+
max-width: 800px;
|
|
83
|
+
max-height: 600px;
|
|
84
|
+
overflow: hidden;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
cropper-container img {
|
|
88
|
+
display: block;
|
|
89
|
+
/* This rule is very important, please don't ignore this */
|
|
90
|
+
max-width: 100%;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
crop-buttons {
|
|
94
|
+
grid-area: buttons;
|
|
95
|
+
|
|
96
|
+
display: grid;
|
|
97
|
+
align-content: start;
|
|
98
|
+
grid-auto-flow: row;
|
|
99
|
+
|
|
100
|
+
padding: 0 8px;
|
|
101
|
+
gap: 8px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
@media (max-width: 600px) {
|
|
105
|
+
section[crop] {
|
|
106
|
+
grid:
|
|
107
|
+
'cropper'
|
|
108
|
+
'buttons';
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
crop-buttons {
|
|
112
|
+
justify-content: end;
|
|
113
|
+
grid-auto-flow: column;
|
|
114
|
+
padding: 8px 0;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
[hidden] {
|
|
119
|
+
display: none !important;
|
|
120
|
+
}
|
|
121
121
|
`,
|
|
122
122
|
]; }
|
|
123
123
|
#saveCroppedImageFunc;
|
|
@@ -185,47 +185,47 @@ let CropAndSaveImageDialog = class CropAndSaveImageDialog extends LoadWhile(LitE
|
|
|
185
185
|
return await imagePromise;
|
|
186
186
|
}
|
|
187
187
|
render() {
|
|
188
|
-
return html `
|
|
189
|
-
<md-dialog
|
|
190
|
-
focus-trap
|
|
188
|
+
return html `
|
|
189
|
+
<md-dialog
|
|
190
|
+
focus-trap
|
|
191
191
|
@close=${(e) => {
|
|
192
192
|
if (e.target.returnValue === 'cancel' || e.target.returnValue === 'cropped') {
|
|
193
193
|
return this.#resolve(e.target.returnValue);
|
|
194
194
|
}
|
|
195
195
|
e.preventDefault();
|
|
196
|
-
}}
|
|
197
|
-
>
|
|
198
|
-
<div slot="headline">Crop and save image</div>
|
|
199
|
-
<main slot="content">
|
|
200
|
-
<loading-animation ?hidden=${!this.isLoading}>
|
|
201
|
-
<img src=${LoaderGif} />
|
|
202
|
-
<p>Uploading image...</p>
|
|
203
|
-
</loading-animation>
|
|
204
|
-
<section crop ?hidden=${this.isLoading}>
|
|
205
|
-
<cropper-container ?circle=${this.options.shape === 'circle'}>
|
|
206
|
-
<img />
|
|
207
|
-
</cropper-container>
|
|
208
|
-
<crop-buttons>
|
|
209
|
-
<md-icon-button label="Rotate right" title="Rotate right" @click=${() => this.#cropper?.rotate(90)}
|
|
210
|
-
><md-icon>rotate_right</md-icon></md-icon-button
|
|
211
|
-
>
|
|
212
|
-
<md-icon-button label="Rotate left" title="Rotate left" @click=${() => this.#cropper?.rotate(-90)}>
|
|
213
|
-
<md-icon>rotate_left</md-icon>
|
|
214
|
-
</md-icon-button>
|
|
215
|
-
</crop-buttons>
|
|
216
|
-
</section>
|
|
217
|
-
</main>
|
|
218
|
-
<div slot="actions">
|
|
219
|
-
<md-text-button
|
|
220
|
-
?disabled=${this.isLoading}
|
|
196
|
+
}}
|
|
197
|
+
>
|
|
198
|
+
<div slot="headline">Crop and save image</div>
|
|
199
|
+
<main slot="content">
|
|
200
|
+
<loading-animation ?hidden=${!this.isLoading}>
|
|
201
|
+
<img src=${LoaderGif} />
|
|
202
|
+
<p>Uploading image...</p>
|
|
203
|
+
</loading-animation>
|
|
204
|
+
<section crop ?hidden=${this.isLoading}>
|
|
205
|
+
<cropper-container ?circle=${this.options.shape === 'circle'}>
|
|
206
|
+
<img />
|
|
207
|
+
</cropper-container>
|
|
208
|
+
<crop-buttons>
|
|
209
|
+
<md-icon-button label="Rotate right" title="Rotate right" @click=${() => this.#cropper?.rotate(90)}
|
|
210
|
+
><md-icon>rotate_right</md-icon></md-icon-button
|
|
211
|
+
>
|
|
212
|
+
<md-icon-button label="Rotate left" title="Rotate left" @click=${() => this.#cropper?.rotate(-90)}>
|
|
213
|
+
<md-icon>rotate_left</md-icon>
|
|
214
|
+
</md-icon-button>
|
|
215
|
+
</crop-buttons>
|
|
216
|
+
</section>
|
|
217
|
+
</main>
|
|
218
|
+
<div slot="actions">
|
|
219
|
+
<md-text-button
|
|
220
|
+
?disabled=${this.isLoading}
|
|
221
221
|
@click=${() => {
|
|
222
222
|
this.reset();
|
|
223
223
|
this.dialog.close('cancel');
|
|
224
|
-
}}
|
|
225
|
-
>Cancel</md-text-button
|
|
226
|
-
>
|
|
227
|
-
<md-text-button
|
|
228
|
-
?disabled=${this.isLoading}
|
|
224
|
+
}}
|
|
225
|
+
>Cancel</md-text-button
|
|
226
|
+
>
|
|
227
|
+
<md-text-button
|
|
228
|
+
?disabled=${this.isLoading}
|
|
229
229
|
@click=${async () => {
|
|
230
230
|
this.isLoading = true;
|
|
231
231
|
await this.updateComplete;
|
|
@@ -243,11 +243,11 @@ let CropAndSaveImageDialog = class CropAndSaveImageDialog extends LoadWhile(LitE
|
|
|
243
243
|
await save;
|
|
244
244
|
this.isLoading = false;
|
|
245
245
|
this.dialog.close('cropped');
|
|
246
|
-
}}
|
|
247
|
-
>Save</md-text-button
|
|
248
|
-
>
|
|
249
|
-
</div>
|
|
250
|
-
</md-dialog>
|
|
246
|
+
}}
|
|
247
|
+
>Save</md-text-button
|
|
248
|
+
>
|
|
249
|
+
</div>
|
|
250
|
+
</md-dialog>
|
|
251
251
|
`;
|
|
252
252
|
}
|
|
253
253
|
};
|