@omegagrid/dialog 0.10.0 → 0.10.2
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/package.json +2 -2
- package/dist/components/dialog.d.ts +0 -69
- package/dist/components/dialog.d.ts.map +0 -1
- package/dist/components/dialog.js +0 -399
- package/dist/components/dialog.js.map +0 -1
- package/dist/components/dialog.style.d.ts +0 -2
- package/dist/components/dialog.style.d.ts.map +0 -1
- package/dist/components/dialog.style.js +0 -77
- package/dist/components/dialog.style.js.map +0 -1
- package/dist/components/index.d.ts +0 -2
- package/dist/components/index.d.ts.map +0 -1
- package/dist/components/index.js +0 -2
- package/dist/components/index.js.map +0 -1
- package/dist/constants.d.ts +0 -48
- package/dist/constants.d.ts.map +0 -1
- package/dist/constants.js +0 -6
- package/dist/constants.js.map +0 -1
- package/dist/index.d.ts +0 -3
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js +0 -3
- package/dist/index.js.map +0 -1
- package/dist/types.d.ts +0 -30
- package/dist/types.d.ts.map +0 -1
- package/dist/types.js +0 -2
- package/dist/types.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omegagrid/dialog",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.2",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"description": "Dialog component",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@fortawesome/fontawesome-svg-core": "^7.0.1",
|
|
31
|
-
"@omegagrid/core": "^0.10.
|
|
31
|
+
"@omegagrid/core": "^0.10.2",
|
|
32
32
|
"lit": "^3.1.1",
|
|
33
33
|
"monaco-editor": "^0.52.2",
|
|
34
34
|
"ts-debounce": "^4.0.0",
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import { Layout, Overlay, Position, VerticalPosition } from '@omegagrid/core';
|
|
2
|
-
import { LitElement } from 'lit';
|
|
3
|
-
import { DialogAlert, DialogButton, DialogLocation, DialogOptions } from '../types';
|
|
4
|
-
export declare class DialogEvent extends Event {
|
|
5
|
-
readonly dialog: Dialog;
|
|
6
|
-
readonly button: DialogButton;
|
|
7
|
-
constructor(type: string, dialog: Dialog, button: DialogButton);
|
|
8
|
-
}
|
|
9
|
-
export declare class Dialog extends LitElement implements Layout {
|
|
10
|
-
static styles: import("lit").CSSResult[];
|
|
11
|
-
resizable: boolean;
|
|
12
|
-
closable: boolean;
|
|
13
|
-
maximizable: boolean;
|
|
14
|
-
scrollable: boolean;
|
|
15
|
-
disableButtons: boolean;
|
|
16
|
-
disableAutoclose: boolean;
|
|
17
|
-
buttonPosition: VerticalPosition;
|
|
18
|
-
alertPosition: VerticalPosition;
|
|
19
|
-
component: HTMLElement;
|
|
20
|
-
caption: string;
|
|
21
|
-
width: string | number;
|
|
22
|
-
height: string | number;
|
|
23
|
-
buttons: DialogButton[];
|
|
24
|
-
animation: number;
|
|
25
|
-
loaderVisible: boolean;
|
|
26
|
-
body: HTMLDivElement;
|
|
27
|
-
header: HTMLDivElement;
|
|
28
|
-
titleElm: HTMLDivElement;
|
|
29
|
-
loader: Overlay;
|
|
30
|
-
alerts: DialogAlert[];
|
|
31
|
-
private _parent;
|
|
32
|
-
private _animationRunning;
|
|
33
|
-
private _movingOffset;
|
|
34
|
-
private _elementOffset;
|
|
35
|
-
private _boundsBeforeMaximize;
|
|
36
|
-
get isMaximized(): boolean;
|
|
37
|
-
private _location;
|
|
38
|
-
set location(value: DialogLocation);
|
|
39
|
-
get location(): DialogLocation;
|
|
40
|
-
private _isOpen;
|
|
41
|
-
get isOpen(): boolean;
|
|
42
|
-
layout(): void;
|
|
43
|
-
_onKeyDown: (e: KeyboardEvent) => void;
|
|
44
|
-
maximize(): void;
|
|
45
|
-
toggleMaximize(): void;
|
|
46
|
-
constructor();
|
|
47
|
-
setOptions(options: DialogOptions): void;
|
|
48
|
-
getOptions(): DialogOptions;
|
|
49
|
-
firstUpdated(): void;
|
|
50
|
-
submit(): void;
|
|
51
|
-
addAlert(alert: DialogAlert): void;
|
|
52
|
-
clearAlerts(): void;
|
|
53
|
-
disconnectedCallback(): void;
|
|
54
|
-
clearEvents(): void;
|
|
55
|
-
_onParentMouseUp: () => void;
|
|
56
|
-
_onHeaderMouseDown: (e: MouseEvent) => void;
|
|
57
|
-
_onParentMouseMove: (e: MouseEvent) => void;
|
|
58
|
-
_onClick: (btn: DialogButton) => void;
|
|
59
|
-
showLoader(): void;
|
|
60
|
-
hideLoader(): void;
|
|
61
|
-
updated(props: Map<PropertyKey, unknown>): void;
|
|
62
|
-
render: () => import("lit-html").TemplateResult<1>;
|
|
63
|
-
calculatePosition(): Position;
|
|
64
|
-
positionDialog(location: DialogLocation): void;
|
|
65
|
-
animatePositionDialog(location: DialogLocation, seconds: number): void;
|
|
66
|
-
open(parent: HTMLElement, location?: DialogLocation): void;
|
|
67
|
-
close(dispatchEvent?: boolean): void;
|
|
68
|
-
}
|
|
69
|
-
//# sourceMappingURL=dialog.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/components/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,MAAM,EAAQ,OAAO,EAAE,QAAQ,EAAS,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAChG,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAsB,cAAc,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAWxG,qBAAa,WAAY,SAAQ,KAAK;aAIpB,MAAM,EAAE,MAAM;aACd,MAAM,EAAE,YAAY;gBAFpC,IAAI,EAAE,MAAM,EACI,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,YAAY;CAKrC;AAED,qBACa,MAAO,SAAQ,UAAW,YAAW,MAAM;IAEvD,MAAM,CAAC,MAAM,4BAAW;IAGxB,SAAS,UAAS;IAGlB,QAAQ,UAAS;IAGjB,WAAW,UAAS;IAGpB,UAAU,UAAS;IAGnB,cAAc,UAAS;IAGvB,gBAAgB,UAAS;IAGzB,cAAc,EAAE,gBAAgB,CAAY;IAG5C,aAAa,EAAE,gBAAgB,CAAS;IAGxC,SAAS,EAAE,WAAW,CAAC;IAGvB,OAAO,EAAE,MAAM,CAAC;IAGhB,KAAK,EAAE,MAAM,GAAC,MAAM,CAAC;IAGrB,MAAM,EAAE,MAAM,GAAC,MAAM,CAAC;IAGtB,OAAO,EAAE,YAAY,EAAE,CAAM;IAG7B,SAAS,SAAO;IAGhB,aAAa,UAAS;IAGtB,IAAI,EAAE,cAAc,CAAC;IAGrB,MAAM,EAAE,cAAc,CAAC;IAGvB,QAAQ,EAAE,cAAc,CAAC;IAGzB,MAAM,EAAE,OAAO,CAAC;IAGhB,MAAM,EAAE,WAAW,EAAE,CAAM;IAE3B,OAAO,CAAC,OAAO,CAAc;IAC7B,OAAO,CAAC,iBAAiB,CAAS;IAClC,OAAO,CAAC,aAAa,CAAqC;IAC1D,OAAO,CAAC,cAAc,CAAqC;IAC3D,OAAO,CAAC,qBAAqB,CAAc;IAE3C,IAAI,WAAW,YAAgD;IAE/D,OAAO,CAAC,SAAS,CAAiB;IAClC,IAAI,QAAQ,CAAC,KAAK,EAAE,cAAc,EAAgC;IAClE,IAAI,QAAQ,IADQ,cAAc,CAIjC;IAED,OAAO,CAAC,OAAO,CAAS;IACxB,IAAI,MAAM,YAA0B;IAEpC,MAAM;IAYN,UAAU,GAAI,GAAG,aAAa,UAS7B;IAED,QAAQ;IAWR,cAAc;;IAmBd,UAAU,CAAC,OAAO,EAAE,aAAa;IAKjC,UAAU,IAAI,aAAa;IAkB3B,YAAY;IAIZ,MAAM;IASN,QAAQ,CAAC,KAAK,EAAE,WAAW;IAM3B,WAAW;IAIX,oBAAoB;IAIpB,WAAW;IAKX,gBAAgB,aAEd;IAEF,kBAAkB,GAAI,GAAG,UAAU,UAKjC;IAEF,kBAAkB,GAAI,GAAG,UAAU,UAOjC;IAEF,QAAQ,GAAI,KAAK,YAAY,UAG5B;IAED,UAAU;IAKV,UAAU;IAKV,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAkBxC,MAAM,6CA6CL;IAED,iBAAiB,IAAI,QAAQ;IA0B7B,cAAc,CAAC,QAAQ,EAAE,cAAc;IAMvC,qBAAqB,CAAC,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM;IAsC/D,IAAI,CAAC,MAAM,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,cAAc;IAenD,KAAK,CAAC,aAAa,UAAO;CAM1B"}
|
|
@@ -1,399 +0,0 @@
|
|
|
1
|
-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
import { dom, utils } from '@omegagrid/core';
|
|
8
|
-
import { LitElement, html } from 'lit';
|
|
9
|
-
import { customElement, property, query, state } from 'lit/decorators.js';
|
|
10
|
-
import { map } from 'lit/directives/map.js';
|
|
11
|
-
import { style } from './dialog.style';
|
|
12
|
-
const DEFAULT_BUTTON_CONFIG = new Map([
|
|
13
|
-
['ok', { type: 'ok', text: 'OK', default: true }],
|
|
14
|
-
['cancel', { type: 'cancel', text: 'Cancel' }],
|
|
15
|
-
['yes', { type: 'yes', text: 'Yes' }],
|
|
16
|
-
['no', { type: 'no', text: 'No' }],
|
|
17
|
-
['close', { type: 'close', text: 'Close' }]
|
|
18
|
-
]);
|
|
19
|
-
export class DialogEvent extends Event {
|
|
20
|
-
constructor(type, dialog, button) {
|
|
21
|
-
super(`dialog.${type}`, { bubbles: true, composed: true, cancelable: true });
|
|
22
|
-
this.dialog = dialog;
|
|
23
|
-
this.button = button;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
let Dialog = class Dialog extends LitElement {
|
|
27
|
-
get isMaximized() { return this._boundsBeforeMaximize != null; }
|
|
28
|
-
set location(value) { this.positionDialog(value); }
|
|
29
|
-
get location() {
|
|
30
|
-
if (this._location == null)
|
|
31
|
-
this._location = { x: this.offsetLeft, y: this.offsetTop };
|
|
32
|
-
return this._location;
|
|
33
|
-
}
|
|
34
|
-
get isOpen() { return this._isOpen; }
|
|
35
|
-
layout() {
|
|
36
|
-
if (!this.component || !this.component.layout)
|
|
37
|
-
return;
|
|
38
|
-
this.component.layout({
|
|
39
|
-
parent: this,
|
|
40
|
-
elements: new Map([
|
|
41
|
-
['body', this.body],
|
|
42
|
-
['header', this.header],
|
|
43
|
-
['title', this.titleElm]
|
|
44
|
-
])
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
maximize() {
|
|
48
|
-
if (this._boundsBeforeMaximize)
|
|
49
|
-
return;
|
|
50
|
-
this._boundsBeforeMaximize = dom.getBounds(this);
|
|
51
|
-
dom.setBounds(this, {
|
|
52
|
-
x: 0,
|
|
53
|
-
y: 0,
|
|
54
|
-
w: this._parent.clientWidth,
|
|
55
|
-
h: this._parent.clientHeight
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
|
-
toggleMaximize() {
|
|
59
|
-
if (this._boundsBeforeMaximize) {
|
|
60
|
-
dom.setBounds(this, this._boundsBeforeMaximize);
|
|
61
|
-
this._boundsBeforeMaximize = null;
|
|
62
|
-
}
|
|
63
|
-
else {
|
|
64
|
-
this.maximize();
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
constructor() {
|
|
68
|
-
super();
|
|
69
|
-
this.resizable = false;
|
|
70
|
-
this.closable = false;
|
|
71
|
-
this.maximizable = false;
|
|
72
|
-
this.scrollable = false;
|
|
73
|
-
this.disableButtons = false;
|
|
74
|
-
this.disableAutoclose = false;
|
|
75
|
-
this.buttonPosition = 'bottom';
|
|
76
|
-
this.alertPosition = 'top';
|
|
77
|
-
this.buttons = [];
|
|
78
|
-
this.animation = 0.2;
|
|
79
|
-
this.loaderVisible = false;
|
|
80
|
-
this.alerts = [];
|
|
81
|
-
this._animationRunning = false;
|
|
82
|
-
this._movingOffset = null;
|
|
83
|
-
this._elementOffset = null;
|
|
84
|
-
this._boundsBeforeMaximize = null;
|
|
85
|
-
this._isOpen = false;
|
|
86
|
-
this._onKeyDown = (e) => {
|
|
87
|
-
switch (e.key) {
|
|
88
|
-
case 'Enter':
|
|
89
|
-
this.submit();
|
|
90
|
-
break;
|
|
91
|
-
case 'Escape':
|
|
92
|
-
if (this.closable)
|
|
93
|
-
this.close();
|
|
94
|
-
break;
|
|
95
|
-
}
|
|
96
|
-
};
|
|
97
|
-
this._onParentMouseUp = () => {
|
|
98
|
-
this.clearEvents();
|
|
99
|
-
};
|
|
100
|
-
this._onHeaderMouseDown = (e) => {
|
|
101
|
-
this._movingOffset = { left: e.clientX, top: e.clientY };
|
|
102
|
-
this._elementOffset = { left: this.offsetLeft, top: this.offsetTop };
|
|
103
|
-
this._parent.addEventListener('mouseup', this._onParentMouseUp);
|
|
104
|
-
this._parent.addEventListener('mousemove', this._onParentMouseMove);
|
|
105
|
-
};
|
|
106
|
-
this._onParentMouseMove = (e) => {
|
|
107
|
-
this._location = null;
|
|
108
|
-
dom.setPosition(this, {
|
|
109
|
-
l: this._elementOffset.left + e.clientX - this._movingOffset.left,
|
|
110
|
-
t: this._elementOffset.top + e.clientY - this._movingOffset.top,
|
|
111
|
-
});
|
|
112
|
-
this.dispatchEvent(new DialogEvent('move', this, null));
|
|
113
|
-
};
|
|
114
|
-
this._onClick = (btn) => {
|
|
115
|
-
const res = this.dispatchEvent(new DialogEvent('click', this, btn));
|
|
116
|
-
if (res && !this.disableAutoclose)
|
|
117
|
-
this.close();
|
|
118
|
-
};
|
|
119
|
-
this.render = () => {
|
|
120
|
-
const buttons = map(this.buttons, btn => html `
|
|
121
|
-
<og-button
|
|
122
|
-
.text="${DEFAULT_BUTTON_CONFIG.get(btn).text}"
|
|
123
|
-
@click="${() => this._onClick(btn)}"
|
|
124
|
-
?disabled="${this.disableButtons}"
|
|
125
|
-
?default="${DEFAULT_BUTTON_CONFIG.get(btn).default}">
|
|
126
|
-
</og-button>
|
|
127
|
-
`);
|
|
128
|
-
const alerts = map(this.alerts, alert => html `
|
|
129
|
-
<og-alert .text="${alert.text}" .type="${alert.type}" closable></og-alert>
|
|
130
|
-
`);
|
|
131
|
-
return html `
|
|
132
|
-
<div class="header" @mousedown="${this._onHeaderMouseDown}">
|
|
133
|
-
<div class="title">${this.caption ? html `${this.caption}` : html `<slot name="header"></slot>`}</div>
|
|
134
|
-
${this.maximizable ? html `<og-button color="transparent" icon="window-maximize" @click="${() => this.toggleMaximize()}"></og-button>` : ``}
|
|
135
|
-
${this.closable ? html `<og-close @click="${() => this.close()}"></og-close>` : ``}
|
|
136
|
-
</div>
|
|
137
|
-
|
|
138
|
-
${this.buttons.length > 0 && this.buttonPosition == 'top' ? html `<div class="buttons">${buttons}</div>` : ``}
|
|
139
|
-
|
|
140
|
-
${this.alerts.length > 0 && this.alertPosition == 'top' ? html `<div class="alerts">${alerts}</div>` : ``}
|
|
141
|
-
|
|
142
|
-
<div class="body">
|
|
143
|
-
${this.loaderVisible ? html `<og-overlay defaultLoader></og-overlay>` : ``}
|
|
144
|
-
|
|
145
|
-
${this.scrollable ? html `
|
|
146
|
-
<og-container>
|
|
147
|
-
${this.component
|
|
148
|
-
? html `<div slot="content">${this.component}</div>`
|
|
149
|
-
: html `<slot name="content" slot="content"></slot>`}
|
|
150
|
-
</og-container>
|
|
151
|
-
` : html `
|
|
152
|
-
${this.component
|
|
153
|
-
? html `<div slot="content" style="height: 100%">${this.component}</div>`
|
|
154
|
-
: html `<slot name="content"></slot>`}
|
|
155
|
-
`}
|
|
156
|
-
</div>
|
|
157
|
-
|
|
158
|
-
${this.alerts.length > 0 && this.alertPosition == 'bottom' ? html `<div class="alerts">${alerts}</div>` : ``}
|
|
159
|
-
|
|
160
|
-
${this.buttons.length > 0 && this.buttonPosition == 'bottom' ? html `<div class="buttons">${buttons}</div>` : ``}
|
|
161
|
-
`;
|
|
162
|
-
};
|
|
163
|
-
this.addEventListener('keydown', this._onKeyDown);
|
|
164
|
-
(new ResizeObserver(() => {
|
|
165
|
-
if (this._animationRunning)
|
|
166
|
-
return;
|
|
167
|
-
this.layout();
|
|
168
|
-
this.dispatchEvent(new DialogEvent('resize', this, null));
|
|
169
|
-
})).observe(this);
|
|
170
|
-
}
|
|
171
|
-
setOptions(options) {
|
|
172
|
-
Object.assign(this, options);
|
|
173
|
-
this.requestUpdate();
|
|
174
|
-
}
|
|
175
|
-
getOptions() {
|
|
176
|
-
const bounds = dom.getBounds(this);
|
|
177
|
-
return {
|
|
178
|
-
caption: this.caption,
|
|
179
|
-
buttons: this.buttons,
|
|
180
|
-
disableButtons: this.disableButtons,
|
|
181
|
-
disableAutoclose: this.disableAutoclose,
|
|
182
|
-
buttonPosition: this.buttonPosition,
|
|
183
|
-
alertPosition: this.alertPosition,
|
|
184
|
-
closable: this.closable,
|
|
185
|
-
resizable: this.resizable,
|
|
186
|
-
scrollable: this.scrollable,
|
|
187
|
-
width: bounds.w,
|
|
188
|
-
height: bounds.h,
|
|
189
|
-
location: { x: bounds.x, y: bounds.y }
|
|
190
|
-
};
|
|
191
|
-
}
|
|
192
|
-
firstUpdated() {
|
|
193
|
-
this.tabIndex = 0;
|
|
194
|
-
}
|
|
195
|
-
submit() {
|
|
196
|
-
for (const btn of this.buttons) {
|
|
197
|
-
if (DEFAULT_BUTTON_CONFIG.get(btn).default) {
|
|
198
|
-
this._onClick(btn);
|
|
199
|
-
break;
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
addAlert(alert) {
|
|
204
|
-
const alerts = [...this.alerts];
|
|
205
|
-
alerts.push(alert);
|
|
206
|
-
this.alerts = alerts;
|
|
207
|
-
}
|
|
208
|
-
clearAlerts() {
|
|
209
|
-
this.alerts = [];
|
|
210
|
-
}
|
|
211
|
-
disconnectedCallback() {
|
|
212
|
-
this.clearEvents();
|
|
213
|
-
}
|
|
214
|
-
clearEvents() {
|
|
215
|
-
this._parent.removeEventListener('mouseup', this._onParentMouseUp);
|
|
216
|
-
this._parent.removeEventListener('mousemove', this._onParentMouseMove);
|
|
217
|
-
}
|
|
218
|
-
showLoader() {
|
|
219
|
-
this.loaderVisible = true;
|
|
220
|
-
this.disableButtons = true;
|
|
221
|
-
}
|
|
222
|
-
hideLoader() {
|
|
223
|
-
this.loaderVisible = false;
|
|
224
|
-
this.disableButtons = false;
|
|
225
|
-
}
|
|
226
|
-
updated(props) {
|
|
227
|
-
if (this.loaderVisible && this.loader && this.body) {
|
|
228
|
-
this.loader.show(this.body);
|
|
229
|
-
}
|
|
230
|
-
if (props.has('width') && this.width) {
|
|
231
|
-
dom.setSize(this, { w: this.width });
|
|
232
|
-
}
|
|
233
|
-
if (props.has('height') && this.height) {
|
|
234
|
-
dom.setSize(this, { h: this.height });
|
|
235
|
-
}
|
|
236
|
-
if (props.has('component')) {
|
|
237
|
-
this.layout();
|
|
238
|
-
}
|
|
239
|
-
}
|
|
240
|
-
calculatePosition() {
|
|
241
|
-
const location = this.location;
|
|
242
|
-
const position = {};
|
|
243
|
-
if (location == 'center') {
|
|
244
|
-
position.l = this._parent.clientWidth / 2 - this.offsetWidth / 2;
|
|
245
|
-
position.t = this._parent.clientHeight / 2 - this.offsetHeight / 2;
|
|
246
|
-
}
|
|
247
|
-
else {
|
|
248
|
-
if (utils.isString(location.x)) {
|
|
249
|
-
if (location.x == 'left')
|
|
250
|
-
position.l = 0;
|
|
251
|
-
else if (location.x == 'right')
|
|
252
|
-
position.l = this._parent.clientWidth - this.offsetWidth;
|
|
253
|
-
else
|
|
254
|
-
position.l = this._parent.clientWidth / 2 - this.offsetWidth / 2;
|
|
255
|
-
}
|
|
256
|
-
else {
|
|
257
|
-
position.l = location.x;
|
|
258
|
-
}
|
|
259
|
-
if (utils.isString(location.y)) {
|
|
260
|
-
if (location.y == 'top')
|
|
261
|
-
position.t = 0;
|
|
262
|
-
else if (location.y == 'bottom')
|
|
263
|
-
position.t = this._parent.clientHeight - this.offsetHeight;
|
|
264
|
-
else
|
|
265
|
-
position.t = this._parent.clientHeight / 2 - this.offsetHeight / 2;
|
|
266
|
-
}
|
|
267
|
-
else {
|
|
268
|
-
position.t = location.y;
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
return position;
|
|
272
|
-
}
|
|
273
|
-
positionDialog(location) {
|
|
274
|
-
this._location = location;
|
|
275
|
-
if (!this._parent)
|
|
276
|
-
return;
|
|
277
|
-
dom.setPosition(this, this.calculatePosition());
|
|
278
|
-
}
|
|
279
|
-
animatePositionDialog(location, seconds) {
|
|
280
|
-
this._location = location;
|
|
281
|
-
this.style.visibility = 'hidden';
|
|
282
|
-
dom.showElement(this, this.scrollable || this.height ? 'flex' : 'block');
|
|
283
|
-
const position = this.calculatePosition();
|
|
284
|
-
const bounds = dom.getBounds(this);
|
|
285
|
-
this._animationRunning = true;
|
|
286
|
-
dom.setBounds(this, {
|
|
287
|
-
x: position.l + bounds.w / 2,
|
|
288
|
-
y: position.t + bounds.h / 2,
|
|
289
|
-
w: 0,
|
|
290
|
-
h: 0
|
|
291
|
-
});
|
|
292
|
-
setTimeout(() => {
|
|
293
|
-
this.style.visibility = 'visible';
|
|
294
|
-
this.style.transition = [
|
|
295
|
-
`top ${seconds}s ease-in-out`,
|
|
296
|
-
`left ${seconds}s ease-in-out`,
|
|
297
|
-
`width ${seconds}s ease-in-out`,
|
|
298
|
-
`height ${seconds}s ease-in-out`
|
|
299
|
-
].join(',');
|
|
300
|
-
setTimeout(() => dom.setBounds(this, {
|
|
301
|
-
x: position.l,
|
|
302
|
-
y: position.t,
|
|
303
|
-
w: bounds.w,
|
|
304
|
-
h: bounds.h
|
|
305
|
-
}), 0);
|
|
306
|
-
setTimeout(() => {
|
|
307
|
-
this.style.transition = '';
|
|
308
|
-
this._animationRunning = false;
|
|
309
|
-
}, seconds * 1000);
|
|
310
|
-
}, 1);
|
|
311
|
-
}
|
|
312
|
-
open(parent, location) {
|
|
313
|
-
this._parent = parent;
|
|
314
|
-
location = location || this.location || 'center';
|
|
315
|
-
(parent.shadowRoot ? parent.shadowRoot : parent).appendChild(this);
|
|
316
|
-
this.updateComplete.then(() => {
|
|
317
|
-
if (this.animation > 0) {
|
|
318
|
-
this.animatePositionDialog(location, this.animation);
|
|
319
|
-
}
|
|
320
|
-
else {
|
|
321
|
-
dom.showElement(this, this.scrollable || this.height ? 'flex' : 'block');
|
|
322
|
-
this.positionDialog(location);
|
|
323
|
-
}
|
|
324
|
-
});
|
|
325
|
-
this._isOpen = true;
|
|
326
|
-
}
|
|
327
|
-
close(dispatchEvent = true) {
|
|
328
|
-
dom.remove(this);
|
|
329
|
-
if (dispatchEvent)
|
|
330
|
-
this.dispatchEvent(new DialogEvent('close', this, null));
|
|
331
|
-
this._isOpen = false;
|
|
332
|
-
}
|
|
333
|
-
};
|
|
334
|
-
Dialog.styles = [style];
|
|
335
|
-
__decorate([
|
|
336
|
-
property({ type: Boolean, reflect: true })
|
|
337
|
-
], Dialog.prototype, "resizable", void 0);
|
|
338
|
-
__decorate([
|
|
339
|
-
property({ type: Boolean, reflect: true })
|
|
340
|
-
], Dialog.prototype, "closable", void 0);
|
|
341
|
-
__decorate([
|
|
342
|
-
property({ type: Boolean, reflect: true })
|
|
343
|
-
], Dialog.prototype, "maximizable", void 0);
|
|
344
|
-
__decorate([
|
|
345
|
-
property({ type: Boolean, reflect: true })
|
|
346
|
-
], Dialog.prototype, "scrollable", void 0);
|
|
347
|
-
__decorate([
|
|
348
|
-
property({ type: Boolean, reflect: true })
|
|
349
|
-
], Dialog.prototype, "disableButtons", void 0);
|
|
350
|
-
__decorate([
|
|
351
|
-
property({ type: Boolean, reflect: true })
|
|
352
|
-
], Dialog.prototype, "disableAutoclose", void 0);
|
|
353
|
-
__decorate([
|
|
354
|
-
property({ type: String, reflect: true })
|
|
355
|
-
], Dialog.prototype, "buttonPosition", void 0);
|
|
356
|
-
__decorate([
|
|
357
|
-
property({ type: String, reflect: true })
|
|
358
|
-
], Dialog.prototype, "alertPosition", void 0);
|
|
359
|
-
__decorate([
|
|
360
|
-
property({ type: Object })
|
|
361
|
-
], Dialog.prototype, "component", void 0);
|
|
362
|
-
__decorate([
|
|
363
|
-
property({ type: String })
|
|
364
|
-
], Dialog.prototype, "caption", void 0);
|
|
365
|
-
__decorate([
|
|
366
|
-
property({ type: String, reflect: true })
|
|
367
|
-
], Dialog.prototype, "width", void 0);
|
|
368
|
-
__decorate([
|
|
369
|
-
property({ type: String, reflect: true })
|
|
370
|
-
], Dialog.prototype, "height", void 0);
|
|
371
|
-
__decorate([
|
|
372
|
-
property({ type: Array })
|
|
373
|
-
], Dialog.prototype, "buttons", void 0);
|
|
374
|
-
__decorate([
|
|
375
|
-
property({ type: Number })
|
|
376
|
-
], Dialog.prototype, "animation", void 0);
|
|
377
|
-
__decorate([
|
|
378
|
-
state()
|
|
379
|
-
], Dialog.prototype, "loaderVisible", void 0);
|
|
380
|
-
__decorate([
|
|
381
|
-
query('.body')
|
|
382
|
-
], Dialog.prototype, "body", void 0);
|
|
383
|
-
__decorate([
|
|
384
|
-
query('.header')
|
|
385
|
-
], Dialog.prototype, "header", void 0);
|
|
386
|
-
__decorate([
|
|
387
|
-
query('.title')
|
|
388
|
-
], Dialog.prototype, "titleElm", void 0);
|
|
389
|
-
__decorate([
|
|
390
|
-
query('og-overlay')
|
|
391
|
-
], Dialog.prototype, "loader", void 0);
|
|
392
|
-
__decorate([
|
|
393
|
-
state()
|
|
394
|
-
], Dialog.prototype, "alerts", void 0);
|
|
395
|
-
Dialog = __decorate([
|
|
396
|
-
customElement('og-dialog')
|
|
397
|
-
], Dialog);
|
|
398
|
-
export { Dialog };
|
|
399
|
-
//# sourceMappingURL=dialog.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/components/dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { dom, Layout, Rect, Overlay, Position, utils, VerticalPosition } from '@omegagrid/core';\nimport { LitElement, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { DialogAlert, DialogButton, DialogButtonConfig, DialogLocation, DialogOptions } from '../types';\nimport { style } from './dialog.style';\n\nconst DEFAULT_BUTTON_CONFIG = new Map<DialogButton, DialogButtonConfig>([\n\t['ok', {type: 'ok', text: 'OK', default: true}],\n\t['cancel', {type: 'cancel', text: 'Cancel'}],\n\t['yes', {type: 'yes', text: 'Yes'}],\n\t['no', {type: 'no', text: 'No'}],\n\t['close', {type: 'close', text: 'Close'}]\n]);\n\nexport class DialogEvent extends Event {\n\t\n\tconstructor(\n\t\ttype: string,\n\t\tpublic readonly dialog: Dialog,\n\t\tpublic readonly button: DialogButton\n\t) {\n\t\tsuper(`dialog.${type}`, {bubbles: true, composed: true, cancelable: true});\n\t}\n\n}\n\n@customElement('og-dialog')\nexport class Dialog extends LitElement implements Layout {\n\n\tstatic styles = [style];\n\n\t@property({type: Boolean, reflect: true})\n\tresizable = false;\n\n\t@property({type: Boolean, reflect: true})\n\tclosable = false;\n\n\t@property({type: Boolean, reflect: true})\n\tmaximizable = false;\n\n\t@property({type: Boolean, reflect: true})\n\tscrollable = false;\n\n\t@property({type: Boolean, reflect: true})\n\tdisableButtons = false;\n\n\t@property({type: Boolean, reflect: true})\n\tdisableAutoclose = false;\n\n\t@property({type: String, reflect: true})\n\tbuttonPosition: VerticalPosition = 'bottom';\n\n\t@property({type: String, reflect: true})\n\talertPosition: VerticalPosition = 'top';\n\n\t@property({type: Object})\n\tcomponent: HTMLElement;\n\n\t@property({type: String})\n\tcaption: string;\n\n\t@property({type: String, reflect: true})\n\twidth: string|number;\n\n\t@property({type: String, reflect: true})\n\theight: string|number;\n\n\t@property({type: Array})\n\tbuttons: DialogButton[] = [];\n\n\t@property({type: Number})\n\tanimation = 0.2;\n\n\t@state()\n\tloaderVisible = false;\n\n\t@query('.body')\n\tbody: HTMLDivElement;\n\n\t@query('.header')\n\theader: HTMLDivElement;\n\n\t@query('.title')\n\ttitleElm: HTMLDivElement;\n\n\t@query('og-overlay')\n\tloader: Overlay;\n\n\t@state()\n\talerts: DialogAlert[] = [];\n\n\tprivate _parent: HTMLElement;\n\tprivate _animationRunning = false;\n\tprivate _movingOffset: {top: number, left: number} = null;\n\tprivate _elementOffset: {top: number, left: number} = null;\n\tprivate _boundsBeforeMaximize: Rect = null;\n\n\tget isMaximized() { return this._boundsBeforeMaximize != null }\n\t\n\tprivate _location: DialogLocation;\n\tset location(value: DialogLocation) { this.positionDialog(value) }\n\tget location() {\n\t\tif (this._location == null) this._location = {x: this.offsetLeft, y: this.offsetTop}\n\t\treturn this._location;\n\t}\n\n\tprivate _isOpen = false;\n\tget isOpen() { return this._isOpen }\n\t\n\tlayout() {\n\t\tif (!this.component || !(this.component as Layout).layout) return;\n\t\t(this.component as Layout).layout({\n\t\t\tparent: this,\n\t\t\telements: new Map<string, HTMLElement>([\n\t\t\t\t['body', this.body],\n\t\t\t\t['header', this.header],\n\t\t\t\t['title', this.titleElm]\n\t\t\t])\n\t\t});\n\t}\n\n\t_onKeyDown = (e: KeyboardEvent) => {\n\t\tswitch (e.key) {\n\t\t\tcase 'Enter':\n\t\t\t\tthis.submit();\n\t\t\t\tbreak;\n\t\t\tcase 'Escape':\n\t\t\t\tif (this.closable) this.close();\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\tmaximize() {\n\t\tif (this._boundsBeforeMaximize) return;\n\t\tthis._boundsBeforeMaximize = dom.getBounds(this);\n\t\tdom.setBounds(this, {\n\t\t\tx: 0,\n\t\t\ty: 0,\n\t\t\tw: this._parent.clientWidth,\n\t\t\th: this._parent.clientHeight\n\t\t});\n\t}\n\n\ttoggleMaximize() {\n\t\tif (this._boundsBeforeMaximize) {\n\t\t\tdom.setBounds(this, this._boundsBeforeMaximize);\n\t\t\tthis._boundsBeforeMaximize = null;\n\t\t} else {\n\t\t\tthis.maximize();\n\t\t}\n\t}\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('keydown', this._onKeyDown);\n\t\t(new ResizeObserver(() => {\n\t\t\tif (this._animationRunning) return;\n\t\t\tthis.layout();\n\t\t\tthis.dispatchEvent(new DialogEvent('resize', this, null));\n\t\t})).observe(this);\n\t}\n\n\tsetOptions(options: DialogOptions) {\n\t\tObject.assign(this, options);\n\t\tthis.requestUpdate();\n\t}\n\n\tgetOptions(): DialogOptions {\n\t\tconst bounds = dom.getBounds(this);\n\t\treturn {\n\t\t\tcaption: this.caption,\n\t\t\tbuttons: this.buttons,\n\t\t\tdisableButtons: this.disableButtons,\n\t\t\tdisableAutoclose: this.disableAutoclose,\n\t\t\tbuttonPosition: this.buttonPosition,\n\t\t\talertPosition: this.alertPosition,\n\t\t\tclosable: this.closable,\n\t\t\tresizable: this.resizable,\n\t\t\tscrollable: this.scrollable,\n\t\t\twidth: bounds.w,\n\t\t\theight: bounds.h,\n\t\t\tlocation: {x: bounds.x, y: bounds.y}\n\t\t};\n\t}\n\n\tfirstUpdated() {\n\t\tthis.tabIndex = 0;\n\t}\n\n\tsubmit() {\n\t\tfor (const btn of this.buttons) {\n\t\t\tif (DEFAULT_BUTTON_CONFIG.get(btn).default) {\n\t\t\t\tthis._onClick(btn);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\taddAlert(alert: DialogAlert) {\n\t\tconst alerts = [...this.alerts];\n\t\talerts.push(alert);\n\t\tthis.alerts = alerts;\n\t}\n\n\tclearAlerts() {\n\t\tthis.alerts = [];\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.clearEvents();\n\t}\n\n\tclearEvents() {\n\t\tthis._parent.removeEventListener('mouseup', this._onParentMouseUp);\n\t\tthis._parent.removeEventListener('mousemove', this._onParentMouseMove);\n\t}\n\n\t_onParentMouseUp = () => {\n\t\tthis.clearEvents();\n\t};\n\n\t_onHeaderMouseDown = (e: MouseEvent) => {\n\t\tthis._movingOffset = {left: e.clientX, top: e.clientY}; \n\t\tthis._elementOffset = {left: this.offsetLeft, top: this.offsetTop};\n\t\tthis._parent.addEventListener('mouseup', this._onParentMouseUp);\n\t\tthis._parent.addEventListener('mousemove', this._onParentMouseMove);\n\t};\n\n\t_onParentMouseMove = (e: MouseEvent) => {\n\t\tthis._location = null;\n\t\tdom.setPosition(this, {\n\t\t\tl: this._elementOffset.left + e.clientX - this._movingOffset.left,\n\t\t\tt: this._elementOffset.top + e.clientY - this._movingOffset.top, \n\t\t});\n\t\tthis.dispatchEvent(new DialogEvent('move', this, null));\n\t};\n\n\t_onClick = (btn: DialogButton) => {\n\t\tconst res = this.dispatchEvent(new DialogEvent('click', this, btn));\n\t\tif (res && !this.disableAutoclose) this.close();\n\t}\n\n\tshowLoader() {\n\t\tthis.loaderVisible = true;\n\t\tthis.disableButtons = true;\n\t}\n\n\thideLoader() {\n\t\tthis.loaderVisible = false;\n\t\tthis.disableButtons = false;\n\t}\n\n\tupdated(props: Map<PropertyKey, unknown>) {\n\t\tif (this.loaderVisible && this.loader && this.body) {\n\t\t\tthis.loader.show(this.body);\n\t\t}\n\n\t\tif (props.has('width') && this.width) {\n\t\t\tdom.setSize(this, {w: this.width});\n\t\t}\n\n\t\tif (props.has('height') && this.height) {\n\t\t\tdom.setSize(this, {h: this.height});\n\t\t}\n\n\t\tif (props.has('component')) {\n\t\t\tthis.layout();\n\t\t}\n\t}\n\n\trender = () => {\n\t\tconst buttons = map(this.buttons, btn => html`\n\t\t\t<og-button \n\t\t\t\t.text=\"${DEFAULT_BUTTON_CONFIG.get(btn).text}\"\n\t\t\t\t@click=\"${() => this._onClick(btn)}\"\n\t\t\t\t?disabled=\"${this.disableButtons}\"\n\t\t\t\t?default=\"${DEFAULT_BUTTON_CONFIG.get(btn).default}\">\n\t\t\t</og-button>\n\t\t`);\n\n\t\tconst alerts = map(this.alerts, alert => html`\n\t\t\t<og-alert .text=\"${alert.text}\" .type=\"${alert.type}\" closable></og-alert>\n\t\t`);\n\n\t\treturn html`\n\t\t\t<div class=\"header\" @mousedown=\"${this._onHeaderMouseDown}\">\n\t\t\t\t<div class=\"title\">${this.caption ? html`${this.caption}` : html`<slot name=\"header\"></slot>`}</div>\n\t\t\t\t${this.maximizable ? html`<og-button color=\"transparent\" icon=\"window-maximize\" @click=\"${() => this.toggleMaximize()}\"></og-button>` : ``}\n\t\t\t\t${this.closable ? html`<og-close @click=\"${() => this.close()}\"></og-close>` : ``}\n\t\t\t</div>\n\n\t\t\t${this.buttons.length > 0 && this.buttonPosition == 'top' ? html`<div class=\"buttons\">${buttons}</div>` : ``}\n\n\t\t\t${this.alerts.length > 0 && this.alertPosition == 'top' ? html`<div class=\"alerts\">${alerts}</div>` : ``}\n\n\t\t\t<div class=\"body\">\n\t\t\t\t${this.loaderVisible ? html`<og-overlay defaultLoader></og-overlay>` : ``}\n\n\t\t\t\t${this.scrollable ? html`\n\t\t\t\t\t<og-container>\n\t\t\t\t\t\t${this.component\n\t\t\t\t\t\t\t? html`<div slot=\"content\">${this.component}</div>`\n\t\t\t\t\t\t\t: html`<slot name=\"content\" slot=\"content\"></slot>`}\n\t\t\t\t\t</og-container>\n\t\t\t\t` : html`\n\t\t\t\t\t${this.component\n\t\t\t\t\t\t? html`<div slot=\"content\" style=\"height: 100%\">${this.component}</div>`\n\t\t\t\t\t\t: html`<slot name=\"content\"></slot>`}\n\t\t\t\t`}\n\t\t\t</div>\n\n\t\t\t${this.alerts.length > 0 && this.alertPosition == 'bottom' ? html`<div class=\"alerts\">${alerts}</div>` : ``}\n\n\t\t\t${this.buttons.length > 0 && this.buttonPosition == 'bottom' ? html`<div class=\"buttons\">${buttons}</div>` : ``}\n\t\t`;\n\t}\n\n\tcalculatePosition(): Position {\n\t\tconst location = this.location;\n\t\tconst position: Position = {};\n\t\tif (location == 'center') {\n\t\t\tposition.l = this._parent.clientWidth / 2 - this.offsetWidth / 2;\n\t\t\tposition.t = this._parent.clientHeight / 2 - this.offsetHeight / 2;\n\t\t} else {\n\t\t\tif (utils.isString(location.x)) {\n\t\t\t\tif (location.x == 'left') position.l = 0;\n\t\t\t\telse if (location.x == 'right') position.l = this._parent.clientWidth - this.offsetWidth;\n\t\t\t\telse position.l = this._parent.clientWidth / 2 - this.offsetWidth / 2;\n\t\t\t} else {\n\t\t\t\tposition.l = location.x as number;\n\t\t\t}\n\n\t\t\tif (utils.isString(location.y)) {\n\t\t\t\tif (location.y == 'top') position.t = 0;\n\t\t\t\telse if (location.y == 'bottom') position.t = this._parent.clientHeight - this.offsetHeight;\n\t\t\t\telse position.t = this._parent.clientHeight / 2 - this.offsetHeight / 2;\n\t\t\t} else {\n\t\t\t\tposition.t = location.y as number;\n\t\t\t}\n\t\t}\n\t\treturn position;\n\t}\n\n\tpositionDialog(location: DialogLocation) {\n\t\tthis._location = location;\n\t\tif (!this._parent) return;\n\t\tdom.setPosition(this, this.calculatePosition());\n\t}\n\n\tanimatePositionDialog(location: DialogLocation, seconds: number) {\n\t\tthis._location = location;\n\t\tthis.style.visibility = 'hidden';\n\t\tdom.showElement(this, this.scrollable || this.height ? 'flex' : 'block');\n\t\t\n\t\tconst position = this.calculatePosition();\n\t\tconst bounds = dom.getBounds(this);\n\t\tthis._animationRunning = true;\n\n\t\tdom.setBounds(this, {\n\t\t\tx: position.l + bounds.w / 2,\n\t\t\ty: position.t + bounds.h / 2,\n\t\t\tw: 0,\n\t\t\th: 0\n\t\t});\n\n\t\tsetTimeout(() => {\n\t\t\tthis.style.visibility = 'visible';\n\t\t\tthis.style.transition = [\n\t\t\t\t`top ${seconds}s ease-in-out`,\n\t\t\t\t`left ${seconds}s ease-in-out`, \n\t\t\t\t`width ${seconds}s ease-in-out`,\n\t\t\t\t`height ${seconds}s ease-in-out`\n\t\t\t].join(',');\n\n\t\t\tsetTimeout(() => dom.setBounds(this, {\n\t\t\t\tx: position.l,\n\t\t\t\ty: position.t,\n\t\t\t\tw: bounds.w,\n\t\t\t\th: bounds.h\n\t\t\t}), 0);\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.style.transition = '';\n\t\t\t\tthis._animationRunning = false;\n\t\t\t}, seconds * 1000);\n\t\t}, 1);\n\t}\n\t\n\topen(parent: HTMLElement, location?: DialogLocation) {\n\t\tthis._parent = parent;\n\t\tlocation = location || this.location || 'center';\n\t\t(parent.shadowRoot ? parent.shadowRoot : parent).appendChild(this);\n\t\tthis.updateComplete.then(() => {\n\t\t\tif (this.animation > 0) {\n\t\t\t\tthis.animatePositionDialog(location, this.animation);\n\t\t\t} else {\n\t\t\t\tdom.showElement(this, this.scrollable || this.height ? 'flex' : 'block');\n\t\t\t\tthis.positionDialog(location);\n\t\t\t}\n\t\t});\n\t\tthis._isOpen = true;\n\t}\n\n\tclose(dispatchEvent = true) {\n\t\tdom.remove(this);\n\t\tif (dispatchEvent) this.dispatchEvent(new DialogEvent('close', this, null));\n\t\tthis._isOpen = false;\n\t}\n\n}"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.style.d.ts","sourceRoot":"","sources":["../../src/components/dialog.style.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,yBAyEjB,CAAC"}
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
2
|
-
import constants from '../constants';
|
|
3
|
-
export const style = css `
|
|
4
|
-
* {
|
|
5
|
-
box-sizing: border-box;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
:host {
|
|
9
|
-
display: none;
|
|
10
|
-
flex-direction: column;
|
|
11
|
-
background: var(--og-dialog-background);
|
|
12
|
-
color: var(--og-dialog-color);
|
|
13
|
-
border: 1px solid var(--og-border-color);
|
|
14
|
-
font-size: var(--og-font-size);
|
|
15
|
-
font-family: var(--og-font-family);
|
|
16
|
-
width: 400px;
|
|
17
|
-
position: absolute;
|
|
18
|
-
overflow: hidden;
|
|
19
|
-
outline: none;
|
|
20
|
-
box-shadow: 8px 8px 4px -3px var(--og-dialog-shadow);
|
|
21
|
-
z-index: 500;
|
|
22
|
-
border-radius: var(--og-base-radius);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
:host([resizable]) {
|
|
26
|
-
resize: both;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.header {
|
|
30
|
-
display: flex;
|
|
31
|
-
flex: 0;
|
|
32
|
-
cursor: move;
|
|
33
|
-
align-items: center;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.title {
|
|
37
|
-
flex: 1;
|
|
38
|
-
line-height: ${constants.DIALOG_HEADER_HEIGHT}px;
|
|
39
|
-
padding-left: 10px;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.header og-close {
|
|
43
|
-
flex: 0 0 22px;
|
|
44
|
-
margin-right: 5px;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.header og-button {
|
|
48
|
-
flex: 0 0 30px;
|
|
49
|
-
margin-right: 5px;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.body {
|
|
53
|
-
position: relative;
|
|
54
|
-
flex: 1;
|
|
55
|
-
overflow: hidden;
|
|
56
|
-
border-top: 1px solid var(--og-border-color);
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
.body og-container {
|
|
60
|
-
height: 100%;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
.buttons {
|
|
64
|
-
display: flex;
|
|
65
|
-
flex-direction: row;
|
|
66
|
-
gap: 8px;
|
|
67
|
-
justify-content: flex-end;
|
|
68
|
-
padding: 8px;
|
|
69
|
-
border-top: 1px solid var(--og-border-color);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.buttons og-button {
|
|
73
|
-
min-width: 80px;
|
|
74
|
-
text-align: center;
|
|
75
|
-
}
|
|
76
|
-
`;
|
|
77
|
-
//# sourceMappingURL=dialog.style.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.style.js","sourceRoot":"","sources":["../../src/components/dialog.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAmCP,SAAS,CAAC,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsC9C,CAAC","sourcesContent":["import { css } from 'lit';\nimport constants from '../constants';\n\nexport const style = css`\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host {\n\t\tdisplay: none;\n\t\tflex-direction: column;\n\t\tbackground: var(--og-dialog-background);\n\t\tcolor: var(--og-dialog-color);\n\t\tborder: 1px solid var(--og-border-color);\n\t\tfont-size: var(--og-font-size);\n\t\tfont-family: var(--og-font-family);\n\t\twidth: 400px;\n\t\tposition: absolute;\n\t\toverflow: hidden;\n\t\toutline: none;\n\t\tbox-shadow: 8px 8px 4px -3px var(--og-dialog-shadow);\n\t\tz-index: 500;\n\t\tborder-radius: var(--og-base-radius);\n\t}\n\n\t:host([resizable]) {\n\t\tresize: both;\n\t}\n\n\t.header {\n\t\tdisplay: flex;\n\t\tflex: 0;\n\t\tcursor: move;\n\t\talign-items: center;\n\t}\n\n\t.title {\n\t\tflex: 1;\n\t\tline-height: ${constants.DIALOG_HEADER_HEIGHT}px;\n\t\tpadding-left: 10px;\n\t}\n\n\t.header og-close {\n\t\tflex: 0 0 22px;\n\t\tmargin-right: 5px;\n\t}\n\n\t.header og-button {\n\t\tflex: 0 0 30px;\n\t\tmargin-right: 5px;\n\t}\n\n\t.body {\n\t\tposition: relative;\n\t\tflex: 1;\n\t\toverflow: hidden;\n\t\tborder-top: 1px solid var(--og-border-color);\n\t}\n\n\t.body og-container {\n\t\theight: 100%;\n\t}\n\n\t.buttons {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 8px;\n\t\tjustify-content: flex-end;\n\t\tpadding: 8px;\n\t\tborder-top: 1px solid var(--og-border-color);\n\t}\n\n\t.buttons og-button {\n\t\tmin-width: 80px;\n\t\ttext-align: center;\n\t}\n`;"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
|
package/dist/components/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC","sourcesContent":["export * from './dialog';"]}
|
package/dist/constants.d.ts
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
declare const _default: {
|
|
2
|
-
PREFIX: string;
|
|
3
|
-
DEFAULT_ACCENT_COLOR: string;
|
|
4
|
-
DEFAULT_ACCENT_COLOR_2: import("color")<string | number | import("color")<string | number | import("color")<string | number | import("color")<string | number | import("color")<string | number | import("color")<string | number | import("color")<string | number | import("color")<string | number | import("color")<string | number | import("color")<string | number | import("color")<string | number | import("color")<string | number | any | ArrayLike<number> | {
|
|
5
|
-
[key: string]: any;
|
|
6
|
-
}> | ArrayLike<number> | {
|
|
7
|
-
[key: string]: any;
|
|
8
|
-
}> | ArrayLike<number> | {
|
|
9
|
-
[key: string]: any;
|
|
10
|
-
}> | ArrayLike<number> | {
|
|
11
|
-
[key: string]: any;
|
|
12
|
-
}> | ArrayLike<number> | {
|
|
13
|
-
[key: string]: any;
|
|
14
|
-
}> | ArrayLike<number> | {
|
|
15
|
-
[key: string]: any;
|
|
16
|
-
}> | ArrayLike<number> | {
|
|
17
|
-
[key: string]: any;
|
|
18
|
-
}> | ArrayLike<number> | {
|
|
19
|
-
[key: string]: any;
|
|
20
|
-
}> | ArrayLike<number> | {
|
|
21
|
-
[key: string]: any;
|
|
22
|
-
}> | ArrayLike<number> | {
|
|
23
|
-
[key: string]: any;
|
|
24
|
-
}> | ArrayLike<number> | {
|
|
25
|
-
[key: string]: any;
|
|
26
|
-
}> | ArrayLike<number> | {
|
|
27
|
-
[key: string]: any;
|
|
28
|
-
}>;
|
|
29
|
-
SIZER_SIZE: number;
|
|
30
|
-
SLIDER_SIZE: number;
|
|
31
|
-
SLIDER_MIN_LENGTH: number;
|
|
32
|
-
EXPANDER_SIZE: number;
|
|
33
|
-
LIST_ITEM_HEIGHT: number;
|
|
34
|
-
LIST_RENDERING_TRESHOLD: number;
|
|
35
|
-
LIST_AUTOSCROLL_TRESHOLD: number;
|
|
36
|
-
LIST_AUTOSCROLL_DELAY: number;
|
|
37
|
-
DEFAULT_TEXT_HIGHLIGHT_COLOR: string;
|
|
38
|
-
TOOLTIP_MARGIN: number;
|
|
39
|
-
MENU_ITEM_HEIGHT: number;
|
|
40
|
-
COLORPICKER_COLOR_SIZE: number;
|
|
41
|
-
DEFAULT_NUMBER_FORMAT: string;
|
|
42
|
-
BUTTON_HEIGHT: number;
|
|
43
|
-
FONT_SIZE: number;
|
|
44
|
-
FLOATING_WINDOW_MAX_WIDTH: number;
|
|
45
|
-
DIALOG_HEADER_HEIGHT: number;
|
|
46
|
-
};
|
|
47
|
-
export default _default;
|
|
48
|
-
//# sourceMappingURL=constants.d.ts.map
|
package/dist/constants.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,wBAGE"}
|
package/dist/constants.js
DELETED
package/dist/constants.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAE7D,eAAe;IACd,oBAAoB,EAAE,EAAE;IACxB,GAAG,aAAa;CAChB,CAAC","sourcesContent":["import { constants as coreConstants } from '@omegagrid/core';\n\nexport default {\n\tDIALOG_HEADER_HEIGHT: 32,\n\t...coreConstants\n};"]}
|
package/dist/index.d.ts
DELETED
package/dist/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
|
package/dist/index.js
DELETED
package/dist/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC","sourcesContent":["export * from './components';\nexport * from './types';"]}
|
package/dist/types.d.ts
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { AlertType, HorizontalPosition, VerticalPosition } from "@omegagrid/core";
|
|
2
|
-
export type DialogButton = 'ok' | 'cancel' | 'yes' | 'no' | 'close' | 'custom';
|
|
3
|
-
export type DialogButtonConfig = {
|
|
4
|
-
type: DialogButton;
|
|
5
|
-
text: string;
|
|
6
|
-
default?: boolean;
|
|
7
|
-
};
|
|
8
|
-
export type DialogAlert = {
|
|
9
|
-
text: string;
|
|
10
|
-
type: AlertType;
|
|
11
|
-
};
|
|
12
|
-
export type DialogLocation = {
|
|
13
|
-
x?: number | HorizontalPosition;
|
|
14
|
-
y?: number | VerticalPosition;
|
|
15
|
-
} | 'center';
|
|
16
|
-
export type DialogOptions = {
|
|
17
|
-
caption?: string;
|
|
18
|
-
buttons?: DialogButton[];
|
|
19
|
-
disableButtons?: boolean;
|
|
20
|
-
disableAutoclose?: boolean;
|
|
21
|
-
buttonPosition?: VerticalPosition;
|
|
22
|
-
alertPosition?: VerticalPosition;
|
|
23
|
-
closable?: boolean;
|
|
24
|
-
resizable?: boolean;
|
|
25
|
-
scrollable?: boolean;
|
|
26
|
-
width?: string | number;
|
|
27
|
-
height?: string | number;
|
|
28
|
-
location?: DialogLocation;
|
|
29
|
-
};
|
|
30
|
-
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAElF,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,OAAO,GAAG,QAAQ,CAAC;AAG/E,MAAM,MAAM,kBAAkB,GAAG;IAChC,IAAI,EAAE,YAAY,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,SAAS,CAAA;CACf,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC5B,CAAC,CAAC,EAAE,MAAM,GAAC,kBAAkB,CAAC;IAC9B,CAAC,CAAC,EAAE,MAAM,GAAC,gBAAgB,CAAC;CAC5B,GAAG,QAAQ,CAAC;AAEb,MAAM,MAAM,aAAa,GAAG;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAC,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAC,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,cAAc,CAAA;CACzB,CAAA"}
|
package/dist/types.js
DELETED
package/dist/types.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { AlertType, HorizontalPosition, VerticalPosition } from \"@omegagrid/core\";\n\nexport type DialogButton = 'ok' | 'cancel' | 'yes' | 'no' | 'close' | 'custom';\n// export type DialogLocation = 'top' | 'bottom';\n\nexport type DialogButtonConfig = {\n\ttype: DialogButton,\n\ttext: string,\n\tdefault?: boolean\n};\n\nexport type DialogAlert = {\n\ttext: string,\n\ttype: AlertType\n};\n\nexport type DialogLocation = {\n\tx?: number|HorizontalPosition,\n\ty?: number|VerticalPosition,\n} | 'center';\n\nexport type DialogOptions = {\n\tcaption?: string,\n\tbuttons?: DialogButton[],\n\tdisableButtons?: boolean,\n\tdisableAutoclose?: boolean,\n\tbuttonPosition?: VerticalPosition,\n\talertPosition?: VerticalPosition,\n\tclosable?: boolean,\n\tresizable?: boolean,\n\tscrollable?: boolean,\n\twidth?: string|number,\n\theight?: string|number,\n\tlocation?: DialogLocation\n}"]}
|