@leavittsoftware/web 5.14.3 → 5.15.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/app/app-logo.d.ts +12 -0
- package/leavitt/app/app-logo.js +129 -0
- package/leavitt/app/app-logo.js.map +1 -0
- package/leavitt/app/app-main-content-container.d.ts +9 -0
- package/leavitt/app/app-main-content-container.js +59 -0
- package/leavitt/app/app-main-content-container.js.map +1 -0
- package/leavitt/app/app-navigation-footer.d.ts +18 -0
- package/leavitt/app/app-navigation-footer.js +142 -0
- package/leavitt/app/app-navigation-footer.js.map +1 -0
- package/leavitt/app/app-navigation-header.d.ts +20 -0
- package/leavitt/app/app-navigation-header.js +221 -0
- package/leavitt/app/app-navigation-header.js.map +1 -0
- package/leavitt/app/app-width-limiter.d.ts +7 -0
- package/leavitt/app/app-width-limiter.js +37 -0
- package/leavitt/app/app-width-limiter.js.map +1 -0
- package/leavitt/app/contexts/main-menu-position-context.d.ts +4 -0
- package/leavitt/app/contexts/main-menu-position-context.js +3 -0
- package/leavitt/app/contexts/main-menu-position-context.js.map +1 -0
- package/package.json +3 -2
- package/titanium/circle-loading-indicator/circle-loading-indicator.d.ts +19 -0
- package/titanium/circle-loading-indicator/circle-loading-indicator.js +119 -0
- package/titanium/circle-loading-indicator/circle-loading-indicator.js.map +1 -0
- package/titanium/data-table/data-table-action-bar.d.ts +11 -0
- package/titanium/data-table/data-table-action-bar.js +214 -0
- package/titanium/data-table/data-table-action-bar.js.map +1 -0
- package/titanium/data-table/data-table-core.d.ts +420 -0
- package/titanium/data-table/data-table-core.js +503 -0
- package/titanium/data-table/data-table-core.js.map +1 -0
- package/titanium/drawer/drawer.js +2 -2
- package/titanium/helpers/find-scrollable-parent.d.ts +2 -0
- package/titanium/helpers/find-scrollable-parent.js +28 -0
- package/titanium/helpers/find-scrollable-parent.js.map +1 -0
- package/titanium/search-input/filled-search-input.d.ts +15 -0
- package/titanium/search-input/filled-search-input.js +111 -0
- package/titanium/search-input/filled-search-input.js.map +1 -0
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { LitElement, css, html } from 'lit';
|
|
3
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
+
let LeavittAppWidthLimiter = class LeavittAppWidthLimiter extends LitElement {
|
|
5
|
+
#maxWidth_accessor_storage = '640px';
|
|
6
|
+
get maxWidth() { return this.#maxWidth_accessor_storage; }
|
|
7
|
+
set maxWidth(value) { this.#maxWidth_accessor_storage = value; }
|
|
8
|
+
static { this.styles = [
|
|
9
|
+
css `
|
|
10
|
+
:host {
|
|
11
|
+
display: grid;
|
|
12
|
+
padding: 12px 16px 0 16px;
|
|
13
|
+
width: 100%;
|
|
14
|
+
justify-self: center;
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
}
|
|
17
|
+
`,
|
|
18
|
+
]; }
|
|
19
|
+
render() {
|
|
20
|
+
return html `
|
|
21
|
+
<style>
|
|
22
|
+
:host {
|
|
23
|
+
max-width: ${this.maxWidth};
|
|
24
|
+
}
|
|
25
|
+
</style>
|
|
26
|
+
<slot></slot>
|
|
27
|
+
`;
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
__decorate([
|
|
31
|
+
property({ type: String, attribute: 'max-width' })
|
|
32
|
+
], LeavittAppWidthLimiter.prototype, "maxWidth", null);
|
|
33
|
+
LeavittAppWidthLimiter = __decorate([
|
|
34
|
+
customElement('leavitt-app-width-limiter')
|
|
35
|
+
], LeavittAppWidthLimiter);
|
|
36
|
+
export { LeavittAppWidthLimiter };
|
|
37
|
+
//# sourceMappingURL=app-width-limiter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"app-width-limiter.js","sourceRoot":"","sources":["app-width-limiter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAGrD,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;IACS,6BAAmB,OAAO,CAAC;IAA3B,IAAA,QAAQ,8CAAmB;IAA3B,IAAA,QAAQ,oDAAmB;aAEjF,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;KAQF;KACF,AAVY,CAUX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;uBAGQ,IAAI,CAAC,QAAQ;;;;KAI/B,CAAC;IACJ,CAAC;;AAvB4D;IAA5D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;sDAAqC;AAD7E,sBAAsB;IADlC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,sBAAsB,CAyBlC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"main-menu-position-context.js","sourceRoot":"","sources":["main-menu-position-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,CAAC,MAAM,uBAAuB,GAAG,aAAa,CAAS,yBAAyB,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leavittsoftware/web",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.15.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "",
|
|
6
6
|
"files": [
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@googlemaps/js-api-loader": "*",
|
|
19
19
|
"@leavittsoftware/lg-core-typescript": "*",
|
|
20
|
+
"@lit/context": "^1.1.6",
|
|
20
21
|
"@material/web": "*",
|
|
21
22
|
"@types/google.maps": "*",
|
|
22
23
|
"bowser": "^2.12.0",
|
|
@@ -40,5 +41,5 @@
|
|
|
40
41
|
"url": "https://github.com/LeavittSoftware/titanium-elements/issues"
|
|
41
42
|
},
|
|
42
43
|
"homepage": "https://github.com/LeavittSoftware/titanium-elements/#readme",
|
|
43
|
-
"gitHead": "
|
|
44
|
+
"gitHead": "de1c0a86b3b02dc1d9094521c207128d85d64714"
|
|
44
45
|
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
import '@material/web/progress/circular-progress';
|
|
3
|
+
/**
|
|
4
|
+
* A simple circle with loading indicator that uses promise driven pending-state-events
|
|
5
|
+
*
|
|
6
|
+
* @element titanium-circle-loading-indicator
|
|
7
|
+
*
|
|
8
|
+
*
|
|
9
|
+
*/
|
|
10
|
+
export declare class TitaniumCircleLoadingIndicator extends LitElement {
|
|
11
|
+
#private;
|
|
12
|
+
accessor pendingStateElement: Element | null;
|
|
13
|
+
private accessor open;
|
|
14
|
+
private accessor closed;
|
|
15
|
+
firstUpdated(): void;
|
|
16
|
+
static styles: import("lit").CSSResult;
|
|
17
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=circle-loading-indicator.d.ts.map
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { css, html, LitElement } from 'lit';
|
|
3
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
+
import '@material/web/progress/circular-progress';
|
|
5
|
+
import { PendingStateEvent } from '@leavittsoftware/web/titanium/types/pending-state-event';
|
|
6
|
+
/**
|
|
7
|
+
* A simple circle with loading indicator that uses promise driven pending-state-events
|
|
8
|
+
*
|
|
9
|
+
* @element titanium-circle-loading-indicator
|
|
10
|
+
*
|
|
11
|
+
*
|
|
12
|
+
*/
|
|
13
|
+
let TitaniumCircleLoadingIndicator = class TitaniumCircleLoadingIndicator extends LitElement {
|
|
14
|
+
#pendingStateElement_accessor_storage;
|
|
15
|
+
get pendingStateElement() { return this.#pendingStateElement_accessor_storage; }
|
|
16
|
+
set pendingStateElement(value) { this.#pendingStateElement_accessor_storage = value; }
|
|
17
|
+
#open_accessor_storage;
|
|
18
|
+
get open() { return this.#open_accessor_storage; }
|
|
19
|
+
set open(value) { this.#open_accessor_storage = value; }
|
|
20
|
+
#closed_accessor_storage;
|
|
21
|
+
get closed() { return this.#closed_accessor_storage; }
|
|
22
|
+
set closed(value) { this.#closed_accessor_storage = value; }
|
|
23
|
+
#openDelayTimer;
|
|
24
|
+
#closeDelayTimer;
|
|
25
|
+
//Promises faster than this do not cause the scrim to open at all
|
|
26
|
+
//Prevents flicker for fast promises
|
|
27
|
+
#openDelay = 75;
|
|
28
|
+
// min time scrim has to remain open
|
|
29
|
+
#minTimeOpen = 400;
|
|
30
|
+
#timeOpen;
|
|
31
|
+
#openCount = 0;
|
|
32
|
+
firstUpdated() {
|
|
33
|
+
const element = this.pendingStateElement ?? this;
|
|
34
|
+
element.addEventListener(PendingStateEvent.eventType, async (e) => {
|
|
35
|
+
e.stopPropagation();
|
|
36
|
+
this.#open();
|
|
37
|
+
this.#openCount++;
|
|
38
|
+
try {
|
|
39
|
+
await e.detail.promise;
|
|
40
|
+
}
|
|
41
|
+
finally {
|
|
42
|
+
this.#openCount--;
|
|
43
|
+
if (this.#openCount === 0) {
|
|
44
|
+
this.#close();
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
#open() {
|
|
50
|
+
window.clearTimeout(this.#openDelayTimer);
|
|
51
|
+
//If re-opened while close timer is running, prevent the close
|
|
52
|
+
window.clearTimeout(this.#closeDelayTimer);
|
|
53
|
+
this.#openDelayTimer = window.setTimeout(() => {
|
|
54
|
+
this.#timeOpen = performance.now();
|
|
55
|
+
// add the inert attribute to the parent element
|
|
56
|
+
this.parentElement?.setAttribute('inert', '');
|
|
57
|
+
this.open = true;
|
|
58
|
+
this.closed = false;
|
|
59
|
+
}, this.#openDelay);
|
|
60
|
+
}
|
|
61
|
+
#close() {
|
|
62
|
+
window.clearTimeout(this.#openDelayTimer);
|
|
63
|
+
const totalTimeOpened = performance.now() - this.#timeOpen;
|
|
64
|
+
const closeDelay = Math.max(this.#minTimeOpen - totalTimeOpened, 0);
|
|
65
|
+
this.#closeDelayTimer = window.setTimeout(() => {
|
|
66
|
+
this.open = false;
|
|
67
|
+
this.closed = true;
|
|
68
|
+
this.parentElement?.removeAttribute('inert');
|
|
69
|
+
}, closeDelay);
|
|
70
|
+
}
|
|
71
|
+
static { this.styles = css `
|
|
72
|
+
:host {
|
|
73
|
+
display: none;
|
|
74
|
+
opacity: 0;
|
|
75
|
+
|
|
76
|
+
position: absolute;
|
|
77
|
+
inset: 0;
|
|
78
|
+
|
|
79
|
+
z-index: 1000;
|
|
80
|
+
background-color: rgb(from var(--md-sys-color-scrim, #000) r g b / 0.52);
|
|
81
|
+
backdrop-filter: blur(2px);
|
|
82
|
+
|
|
83
|
+
transition:
|
|
84
|
+
display 0.2s ease,
|
|
85
|
+
opacity 0.2s ease;
|
|
86
|
+
transition-behavior: allow-discrete;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
:host([open]) {
|
|
90
|
+
display: grid;
|
|
91
|
+
opacity: 1;
|
|
92
|
+
|
|
93
|
+
@starting-style {
|
|
94
|
+
opacity: 0;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
md-circular-progress {
|
|
99
|
+
place-self: center;
|
|
100
|
+
}
|
|
101
|
+
`; }
|
|
102
|
+
render() {
|
|
103
|
+
return html ` <md-circular-progress ?indeterminate=${this.open} ?hide=${!this.open}></md-circular-progress>`;
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
__decorate([
|
|
107
|
+
property({ type: Object })
|
|
108
|
+
], TitaniumCircleLoadingIndicator.prototype, "pendingStateElement", null);
|
|
109
|
+
__decorate([
|
|
110
|
+
property({ type: Boolean, reflect: true })
|
|
111
|
+
], TitaniumCircleLoadingIndicator.prototype, "open", null);
|
|
112
|
+
__decorate([
|
|
113
|
+
property({ type: Boolean, reflect: true })
|
|
114
|
+
], TitaniumCircleLoadingIndicator.prototype, "closed", null);
|
|
115
|
+
TitaniumCircleLoadingIndicator = __decorate([
|
|
116
|
+
customElement('titanium-circle-loading-indicator')
|
|
117
|
+
], TitaniumCircleLoadingIndicator);
|
|
118
|
+
export { TitaniumCircleLoadingIndicator };
|
|
119
|
+
//# sourceMappingURL=circle-loading-indicator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"circle-loading-indicator.js","sourceRoot":"","sources":["circle-loading-indicator.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
+
export declare class TitaniumDataTableActionBar<T extends object> extends LitElement {
|
|
3
|
+
accessor selected: Array<Partial<T>>;
|
|
4
|
+
private accessor hasSelected;
|
|
5
|
+
private accessor hasAddButton;
|
|
6
|
+
private accessor addButtonElements;
|
|
7
|
+
updated(changedProps: PropertyValues<this>): void;
|
|
8
|
+
static styles: import("lit").CSSResult[];
|
|
9
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
10
|
+
}
|
|
11
|
+
//# sourceMappingURL=data-table-action-bar.d.ts.map
|
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { ellipsis } from '@leavittsoftware/web/titanium/styles/ellipsis';
|
|
3
|
+
import { h2 } from '@leavittsoftware/web/titanium/styles/h2';
|
|
4
|
+
import { LitElement, css, html } from 'lit';
|
|
5
|
+
import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
|
|
6
|
+
let TitaniumDataTableActionBar = class TitaniumDataTableActionBar extends LitElement {
|
|
7
|
+
#selected_accessor_storage = [];
|
|
8
|
+
get selected() { return this.#selected_accessor_storage; }
|
|
9
|
+
set selected(value) { this.#selected_accessor_storage = value; }
|
|
10
|
+
#hasSelected_accessor_storage = false;
|
|
11
|
+
get hasSelected() { return this.#hasSelected_accessor_storage; }
|
|
12
|
+
set hasSelected(value) { this.#hasSelected_accessor_storage = value; }
|
|
13
|
+
#hasAddButton_accessor_storage;
|
|
14
|
+
get hasAddButton() { return this.#hasAddButton_accessor_storage; }
|
|
15
|
+
set hasAddButton(value) { this.#hasAddButton_accessor_storage = value; }
|
|
16
|
+
#addButtonElements_accessor_storage;
|
|
17
|
+
get addButtonElements() { return this.#addButtonElements_accessor_storage; }
|
|
18
|
+
set addButtonElements(value) { this.#addButtonElements_accessor_storage = value; }
|
|
19
|
+
updated(changedProps) {
|
|
20
|
+
if (changedProps.has('selected')) {
|
|
21
|
+
this.hasSelected = this.selected.length > 0;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
static { this.styles = [
|
|
25
|
+
h2,
|
|
26
|
+
ellipsis,
|
|
27
|
+
css `
|
|
28
|
+
:host {
|
|
29
|
+
display: grid;
|
|
30
|
+
margin: 12px 0;
|
|
31
|
+
padding: 0 16px;
|
|
32
|
+
background-color: var(--md-sys-color-surface-container-lowest);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
main {
|
|
36
|
+
display: grid;
|
|
37
|
+
grid: 'filters add-button' / 1fr auto;
|
|
38
|
+
|
|
39
|
+
opacity: 1;
|
|
40
|
+
transition-behavior: allow-discrete;
|
|
41
|
+
animation: fade-in-down 0.25s ease;
|
|
42
|
+
|
|
43
|
+
div[add-button] {
|
|
44
|
+
grid-area: add-button;
|
|
45
|
+
align-self: end;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
div[filters] {
|
|
49
|
+
grid-area: filters;
|
|
50
|
+
align-self: end;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
:host([has-search][has-add-button]) div[add-button] {
|
|
55
|
+
margin: 0 0 0 12px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
selected-action-veil {
|
|
59
|
+
display: none;
|
|
60
|
+
grid: 'text buttons' / minmax(40px, 1fr) auto;
|
|
61
|
+
min-height: 40px;
|
|
62
|
+
align-items: end;
|
|
63
|
+
|
|
64
|
+
background-color: inherit;
|
|
65
|
+
opacity: 0;
|
|
66
|
+
|
|
67
|
+
animation: fade-in-up 0.25s ease;
|
|
68
|
+
transition-behavior: allow-discrete;
|
|
69
|
+
|
|
70
|
+
margin: 0;
|
|
71
|
+
|
|
72
|
+
action-container {
|
|
73
|
+
grid-area: buttons;
|
|
74
|
+
display: flex;
|
|
75
|
+
flex-direction: row;
|
|
76
|
+
flex-wrap: wrap;
|
|
77
|
+
gap: 6px;
|
|
78
|
+
align-items: center;
|
|
79
|
+
justify-content: flex-end;
|
|
80
|
+
|
|
81
|
+
::slotted(md-filled-button) {
|
|
82
|
+
--md-filled-button-container-height: 32px;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@starting-style {
|
|
88
|
+
selected-action-veil[style*='display: grid'] {
|
|
89
|
+
opacity: 0;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
main[style*='display: grid'] {
|
|
93
|
+
opacity: 1;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
:host([has-selected]) selected-action-veil {
|
|
98
|
+
display: grid;
|
|
99
|
+
opacity: 1;
|
|
100
|
+
animation: fade-in-up 0.25s ease;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
:host([has-selected]) main {
|
|
104
|
+
animation: fade-out-down 0.25s ease;
|
|
105
|
+
opacity: 0;
|
|
106
|
+
height: 0;
|
|
107
|
+
display: none;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
@media (max-width: 920px) {
|
|
111
|
+
h2 {
|
|
112
|
+
font-size: 14px;
|
|
113
|
+
line-height: 16px;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
@media (max-width: 500px) {
|
|
118
|
+
main {
|
|
119
|
+
grid:
|
|
120
|
+
'filters'
|
|
121
|
+
'add-button';
|
|
122
|
+
gap: 12px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
selected-action-veil {
|
|
126
|
+
grid:
|
|
127
|
+
'text'
|
|
128
|
+
'buttons';
|
|
129
|
+
|
|
130
|
+
gap: 4px;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
div[add-button] {
|
|
134
|
+
justify-self: end;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
@keyframes fade-out-down {
|
|
139
|
+
0% {
|
|
140
|
+
opacity: 1;
|
|
141
|
+
transform: translateY(0);
|
|
142
|
+
}
|
|
143
|
+
100% {
|
|
144
|
+
opacity: 0;
|
|
145
|
+
transform: translateY(-20px);
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
@keyframes fade-in-down {
|
|
150
|
+
0% {
|
|
151
|
+
opacity: 0;
|
|
152
|
+
transform: translateY(-20px);
|
|
153
|
+
}
|
|
154
|
+
100% {
|
|
155
|
+
opacity: 1;
|
|
156
|
+
transform: translateY(0);
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
@keyframes fade-out-up {
|
|
161
|
+
0% {
|
|
162
|
+
opacity: 1;
|
|
163
|
+
transform: translateY(0);
|
|
164
|
+
}
|
|
165
|
+
100% {
|
|
166
|
+
opacity: 0;
|
|
167
|
+
transform: translateY(20px);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
@keyframes fade-in-up {
|
|
172
|
+
0% {
|
|
173
|
+
opacity: 0;
|
|
174
|
+
transform: translateY(20px);
|
|
175
|
+
}
|
|
176
|
+
100% {
|
|
177
|
+
opacity: 1;
|
|
178
|
+
transform: translateY(0);
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
`,
|
|
182
|
+
]; }
|
|
183
|
+
render() {
|
|
184
|
+
return html `
|
|
185
|
+
<main part="main">
|
|
186
|
+
<div add-button part="add-button-container">
|
|
187
|
+
<slot name="add-button" @slotchange=${() => (this.hasAddButton = this.addButtonElements.length > 0)}></slot>
|
|
188
|
+
</div>
|
|
189
|
+
<div filters part="filters-container"><slot name="filters"></slot></div>
|
|
190
|
+
</main>
|
|
191
|
+
<selected-action-veil part="selected-action-veil">
|
|
192
|
+
<h2 ellipsis part="selected-action-title">${this.selected.length} selected</h2>
|
|
193
|
+
<action-container part="action-container"><slot name="selected-actions"></slot></action-container>
|
|
194
|
+
</selected-action-veil>
|
|
195
|
+
`;
|
|
196
|
+
}
|
|
197
|
+
};
|
|
198
|
+
__decorate([
|
|
199
|
+
property({ type: Array })
|
|
200
|
+
], TitaniumDataTableActionBar.prototype, "selected", null);
|
|
201
|
+
__decorate([
|
|
202
|
+
property({ type: Boolean, reflect: true, attribute: 'has-selected' })
|
|
203
|
+
], TitaniumDataTableActionBar.prototype, "hasSelected", null);
|
|
204
|
+
__decorate([
|
|
205
|
+
property({ type: Boolean, reflect: true, attribute: 'has-add-button' })
|
|
206
|
+
], TitaniumDataTableActionBar.prototype, "hasAddButton", null);
|
|
207
|
+
__decorate([
|
|
208
|
+
queryAssignedElements({ slot: 'add-button' })
|
|
209
|
+
], TitaniumDataTableActionBar.prototype, "addButtonElements", null);
|
|
210
|
+
TitaniumDataTableActionBar = __decorate([
|
|
211
|
+
customElement('titanium-data-table-action-bar')
|
|
212
|
+
], TitaniumDataTableActionBar);
|
|
213
|
+
export { TitaniumDataTableActionBar };
|
|
214
|
+
//# sourceMappingURL=data-table-action-bar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"data-table-action-bar.js","sourceRoot":"","sources":["data-table-action-bar.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AACzE,OAAO,EAAE,EAAE,EAAE,MAAM,yCAAyC,CAAC;AAE7D,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAG5E,IAAM,0BAA0B,GAAhC,MAAM,0BAA6C,SAAQ,UAAU;IACtC,6BAA8B,EAAE,CAAC;IAAjC,IAAA,QAAQ,8CAAyB;IAAjC,IAAA,QAAQ,oDAAyB;IAEmB,gCAAuB,KAAK,CAAC;IAA7B,IAAA,WAAW,iDAAkB;IAA7B,IAAA,WAAW,uDAAkB;IAC3B,+BAAsB;IAAtB,IAAA,YAAY,kDAAU;IAAtB,IAAA,YAAY,wDAAU;IAEhD,oCAA8B;IAA9B,IAAA,iBAAiB,uDAAa;IAA9B,IAAA,iBAAiB,6DAAa;IAE9F,OAAO,CAAC,YAAkC;QACxC,IAAI,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YACjC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;aAEM,WAAM,GAAG;QACd,EAAE;QACF,QAAQ;QACR,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0JF;KACF,AA9JY,CA8JX;IAEF,MAAM;QACJ,OAAO,IAAI,CAAA;;;gDAGiC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC;;;;;oDAKzD,IAAI,CAAC,QAAQ,CAAC,MAAM;;;KAGnE,CAAC;IACJ,CAAC;;AA1LmC;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;0DAA2C;AAEmB;IAAvF,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;6DAA+C;AAC3B;IAAzF,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;8DAAwC;AAEhD;IAA/D,qBAAqB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;mEAAgD;AANnF,0BAA0B;IADtC,aAAa,CAAC,gCAAgC,CAAC;GACnC,0BAA0B,CA4LtC"}
|