@zentto/studio 0.1.0 → 0.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/dist/fields/zs-confirm-dialog.d.ts +62 -0
- package/dist/fields/zs-confirm-dialog.d.ts.map +1 -0
- package/dist/fields/zs-confirm-dialog.js +234 -0
- package/dist/fields/zs-confirm-dialog.js.map +1 -0
- package/dist/fields/zs-modal.d.ts +39 -0
- package/dist/fields/zs-modal.d.ts.map +1 -0
- package/dist/fields/zs-modal.js +352 -0
- package/dist/fields/zs-modal.js.map +1 -0
- package/dist/fields/zs-toast.d.ts +40 -0
- package/dist/fields/zs-toast.d.ts.map +1 -0
- package/dist/fields/zs-toast.js +218 -0
- package/dist/fields/zs-toast.js.map +1 -0
- package/dist/zentto-studio-app.d.ts +2 -1
- package/dist/zentto-studio-app.d.ts.map +1 -1
- package/dist/zentto-studio-app.js +27 -5
- package/dist/zentto-studio-app.js.map +1 -1
- package/dist/zentto-studio-renderer.d.ts +8 -0
- package/dist/zentto-studio-renderer.d.ts.map +1 -1
- package/dist/zentto-studio-renderer.js +10 -1
- package/dist/zentto-studio-renderer.js.map +1 -1
- package/package.json +5 -2
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
type DialogType = 'confirm' | 'alert' | 'prompt' | 'delete' | 'decision';
|
|
3
|
+
interface DialogButton {
|
|
4
|
+
label: string;
|
|
5
|
+
variant?: 'primary' | 'secondary' | 'danger' | 'success' | 'ghost';
|
|
6
|
+
value?: string;
|
|
7
|
+
icon?: string;
|
|
8
|
+
}
|
|
9
|
+
interface DialogOptions {
|
|
10
|
+
type?: DialogType;
|
|
11
|
+
title: string;
|
|
12
|
+
message?: string;
|
|
13
|
+
icon?: string;
|
|
14
|
+
variant?: 'default' | 'danger' | 'success' | 'warning' | 'info';
|
|
15
|
+
okText?: string;
|
|
16
|
+
cancelText?: string;
|
|
17
|
+
inputLabel?: string;
|
|
18
|
+
inputPlaceholder?: string;
|
|
19
|
+
inputDefault?: string;
|
|
20
|
+
confirmWord?: string;
|
|
21
|
+
buttons?: DialogButton[];
|
|
22
|
+
size?: 'sm' | 'md' | 'lg';
|
|
23
|
+
}
|
|
24
|
+
export declare class ZsConfirmDialog extends LitElement {
|
|
25
|
+
static styles: import("lit").CSSResult[];
|
|
26
|
+
private isOpen;
|
|
27
|
+
private options;
|
|
28
|
+
private inputValue;
|
|
29
|
+
private confirmValue;
|
|
30
|
+
private resolvePromise;
|
|
31
|
+
/**
|
|
32
|
+
* Show a confirm dialog. Returns true/false.
|
|
33
|
+
*/
|
|
34
|
+
showConfirm(opts: DialogOptions): Promise<boolean>;
|
|
35
|
+
/**
|
|
36
|
+
* Show an alert dialog. Returns true when dismissed.
|
|
37
|
+
*/
|
|
38
|
+
showAlert(opts: DialogOptions): Promise<boolean>;
|
|
39
|
+
/**
|
|
40
|
+
* Show a prompt dialog. Returns input value or null.
|
|
41
|
+
*/
|
|
42
|
+
showPrompt(opts: DialogOptions): Promise<string | null>;
|
|
43
|
+
/**
|
|
44
|
+
* Show a delete confirmation. Returns true/false.
|
|
45
|
+
*/
|
|
46
|
+
showDelete(opts: DialogOptions): Promise<boolean>;
|
|
47
|
+
/**
|
|
48
|
+
* Show a decision dialog. Returns the button value.
|
|
49
|
+
*/
|
|
50
|
+
showDecision(opts: DialogOptions): Promise<string | null>;
|
|
51
|
+
private showDialog;
|
|
52
|
+
private resolve;
|
|
53
|
+
private get canDelete();
|
|
54
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
55
|
+
}
|
|
56
|
+
declare global {
|
|
57
|
+
interface HTMLElementTagNameMap {
|
|
58
|
+
'zs-confirm-dialog': ZsConfirmDialog;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
export {};
|
|
62
|
+
//# sourceMappingURL=zs-confirm-dialog.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"zs-confirm-dialog.d.ts","sourceRoot":"","sources":["../../src/fields/zs-confirm-dialog.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,KAAK,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEzE,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IAEzB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED,qBACa,eAAgB,SAAQ,UAAU;IAC7C,MAAM,CAAC,MAAM,4BA2EV;IAEM,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,OAAO,CAAgC;IAC/C,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,YAAY,CAAM;IACnC,OAAO,CAAC,cAAc,CAA2D;IAEjF;;OAEG;IACG,WAAW,CAAC,IAAI,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IAIxD;;OAEG;IACG,SAAS,CAAC,IAAI,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IAItD;;OAEG;IACG,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;IAI7D;;OAEG;IACG,UAAU,CAAC,IAAI,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IAUvD;;OAEG;IACG,YAAY,CAAC,IAAI,EAAE,aAAa,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;IAI/D,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,OAAO;IAMf,OAAO,KAAK,SAAS,GAGpB;IAED,MAAM;CA+DP;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,mBAAmB,EAAE,eAAe,CAAC;KAAE;CAAE"}
|
|
@@ -0,0 +1,234 @@
|
|
|
1
|
+
// @zentto/studio — Pre-built confirm/alert/prompt dialogs
|
|
2
|
+
// Imperative API: ZsConfirmDialog.confirm({ title, message })
|
|
3
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
4
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
5
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
6
|
+
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;
|
|
7
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
8
|
+
};
|
|
9
|
+
import { LitElement, html, css } from 'lit';
|
|
10
|
+
import { customElement, state } from 'lit/decorators.js';
|
|
11
|
+
import { studioTokens } from '../styles/tokens.js';
|
|
12
|
+
let ZsConfirmDialog = class ZsConfirmDialog extends LitElement {
|
|
13
|
+
constructor() {
|
|
14
|
+
super(...arguments);
|
|
15
|
+
this.isOpen = false;
|
|
16
|
+
this.options = { title: '' };
|
|
17
|
+
this.inputValue = '';
|
|
18
|
+
this.confirmValue = '';
|
|
19
|
+
this.resolvePromise = null;
|
|
20
|
+
}
|
|
21
|
+
static { this.styles = [studioTokens, css `
|
|
22
|
+
:host { display: contents; }
|
|
23
|
+
.backdrop {
|
|
24
|
+
position: fixed; inset: 0; z-index: 9999;
|
|
25
|
+
background: rgba(0,0,0,0.5); backdrop-filter: blur(3px);
|
|
26
|
+
display: flex; align-items: center; justify-content: center;
|
|
27
|
+
opacity: 0; pointer-events: none; transition: opacity 200ms;
|
|
28
|
+
}
|
|
29
|
+
.backdrop--open { opacity: 1; pointer-events: auto; }
|
|
30
|
+
.dialog {
|
|
31
|
+
background: var(--zs-bg, #fff); border-radius: 16px;
|
|
32
|
+
box-shadow: 0 24px 64px rgba(0,0,0,0.2);
|
|
33
|
+
padding: 28px; max-width: 440px; width: 90%;
|
|
34
|
+
transform: scale(0.9); transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
35
|
+
text-align: center;
|
|
36
|
+
}
|
|
37
|
+
.dialog--lg { max-width: 560px; }
|
|
38
|
+
.backdrop--open .dialog { transform: scale(1); }
|
|
39
|
+
.icon { font-size: 48px; margin-bottom: 16px; }
|
|
40
|
+
.icon-circle {
|
|
41
|
+
width: 72px; height: 72px; border-radius: 50%;
|
|
42
|
+
display: flex; align-items: center; justify-content: center;
|
|
43
|
+
margin: 0 auto 16px; font-size: 32px;
|
|
44
|
+
}
|
|
45
|
+
.icon-circle--danger { background: #fde8e8; }
|
|
46
|
+
.icon-circle--success { background: #d4edda; }
|
|
47
|
+
.icon-circle--warning { background: #fff3cd; }
|
|
48
|
+
.icon-circle--info { background: #d1ecf1; }
|
|
49
|
+
.icon-circle--default { background: var(--zs-bg-secondary); }
|
|
50
|
+
.title {
|
|
51
|
+
font-size: 20px; font-weight: 700; color: var(--zs-text, #212529);
|
|
52
|
+
margin: 0 0 8px;
|
|
53
|
+
}
|
|
54
|
+
.message {
|
|
55
|
+
font-size: 14px; color: var(--zs-text-secondary, #6c757d);
|
|
56
|
+
line-height: 1.6; margin: 0 0 20px;
|
|
57
|
+
}
|
|
58
|
+
.input-group { margin-bottom: 20px; text-align: left; }
|
|
59
|
+
.input-label { font-size: 13px; font-weight: 500; color: var(--zs-text); margin-bottom: 6px; display: block; }
|
|
60
|
+
.input {
|
|
61
|
+
width: 100%; padding: 10px 14px; border: 1px solid var(--zs-border);
|
|
62
|
+
border-radius: 8px; font-size: 14px; font-family: var(--zs-font-family);
|
|
63
|
+
outline: none; box-sizing: border-box; transition: border-color 150ms;
|
|
64
|
+
}
|
|
65
|
+
.input:focus { border-color: var(--zs-primary); box-shadow: 0 0 0 3px var(--zs-primary-light); }
|
|
66
|
+
.input--error { border-color: #e74c3c; }
|
|
67
|
+
.hint { font-size: 12px; color: var(--zs-text-muted); margin-top: 6px; }
|
|
68
|
+
.buttons { display: flex; gap: 10px; justify-content: center; }
|
|
69
|
+
.buttons--decision { flex-direction: column; }
|
|
70
|
+
.btn {
|
|
71
|
+
padding: 10px 24px; border-radius: 8px; flex: 1;
|
|
72
|
+
font-family: var(--zs-font-family); font-size: 14px; font-weight: 500;
|
|
73
|
+
cursor: pointer; border: 1px solid transparent; transition: all 150ms;
|
|
74
|
+
}
|
|
75
|
+
.btn--primary { background: var(--zs-primary, #e67e22); color: white; }
|
|
76
|
+
.btn--primary:hover { filter: brightness(0.9); }
|
|
77
|
+
.btn--secondary { background: var(--zs-bg); color: var(--zs-text); border-color: var(--zs-border); }
|
|
78
|
+
.btn--secondary:hover { background: var(--zs-bg-hover); }
|
|
79
|
+
.btn--danger { background: #e74c3c; color: white; }
|
|
80
|
+
.btn--danger:hover { background: #c0392b; }
|
|
81
|
+
.btn--success { background: #27ae60; color: white; }
|
|
82
|
+
.btn--ghost { background: none; color: var(--zs-text-secondary); }
|
|
83
|
+
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
84
|
+
.btn-icon { margin-right: 6px; }
|
|
85
|
+
|
|
86
|
+
.decision-btn {
|
|
87
|
+
display: flex; align-items: center; gap: 12px;
|
|
88
|
+
padding: 14px 20px; border-radius: 10px;
|
|
89
|
+
border: 1px solid var(--zs-border); background: var(--zs-bg);
|
|
90
|
+
cursor: pointer; transition: all 150ms; text-align: left;
|
|
91
|
+
font-family: var(--zs-font-family); font-size: 14px;
|
|
92
|
+
}
|
|
93
|
+
.decision-btn:hover { border-color: var(--zs-primary); background: var(--zs-primary-light); }
|
|
94
|
+
.decision-btn-icon { font-size: 20px; }
|
|
95
|
+
.decision-btn-label { font-weight: 500; color: var(--zs-text); }
|
|
96
|
+
`]; }
|
|
97
|
+
/**
|
|
98
|
+
* Show a confirm dialog. Returns true/false.
|
|
99
|
+
*/
|
|
100
|
+
async showConfirm(opts) {
|
|
101
|
+
return (await this.showDialog({ ...opts, type: 'confirm' }));
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Show an alert dialog. Returns true when dismissed.
|
|
105
|
+
*/
|
|
106
|
+
async showAlert(opts) {
|
|
107
|
+
return (await this.showDialog({ ...opts, type: 'alert' }));
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* Show a prompt dialog. Returns input value or null.
|
|
111
|
+
*/
|
|
112
|
+
async showPrompt(opts) {
|
|
113
|
+
return (await this.showDialog({ ...opts, type: 'prompt' }));
|
|
114
|
+
}
|
|
115
|
+
/**
|
|
116
|
+
* Show a delete confirmation. Returns true/false.
|
|
117
|
+
*/
|
|
118
|
+
async showDelete(opts) {
|
|
119
|
+
return (await this.showDialog({
|
|
120
|
+
...opts,
|
|
121
|
+
type: 'delete',
|
|
122
|
+
variant: 'danger',
|
|
123
|
+
icon: opts.icon ?? '🗑️',
|
|
124
|
+
okText: opts.okText ?? 'Eliminar',
|
|
125
|
+
}));
|
|
126
|
+
}
|
|
127
|
+
/**
|
|
128
|
+
* Show a decision dialog. Returns the button value.
|
|
129
|
+
*/
|
|
130
|
+
async showDecision(opts) {
|
|
131
|
+
return (await this.showDialog({ ...opts, type: 'decision' }));
|
|
132
|
+
}
|
|
133
|
+
showDialog(opts) {
|
|
134
|
+
return new Promise((resolve) => {
|
|
135
|
+
this.options = opts;
|
|
136
|
+
this.inputValue = opts.inputDefault ?? '';
|
|
137
|
+
this.confirmValue = '';
|
|
138
|
+
this.resolvePromise = resolve;
|
|
139
|
+
this.isOpen = true;
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
resolve(value) {
|
|
143
|
+
this.isOpen = false;
|
|
144
|
+
this.resolvePromise?.(value);
|
|
145
|
+
this.resolvePromise = null;
|
|
146
|
+
}
|
|
147
|
+
get canDelete() {
|
|
148
|
+
if (!this.options.confirmWord)
|
|
149
|
+
return true;
|
|
150
|
+
return this.confirmValue === this.options.confirmWord;
|
|
151
|
+
}
|
|
152
|
+
render() {
|
|
153
|
+
const opts = this.options;
|
|
154
|
+
const variant = opts.variant ?? 'default';
|
|
155
|
+
const type = opts.type ?? 'confirm';
|
|
156
|
+
return html `
|
|
157
|
+
<div class="backdrop ${this.isOpen ? 'backdrop--open' : ''}">
|
|
158
|
+
<div class="dialog ${opts.size === 'lg' ? 'dialog--lg' : ''}">
|
|
159
|
+
<div class="icon-circle icon-circle--${variant}">
|
|
160
|
+
${opts.icon ?? { danger: '⚠️', success: '✅', warning: '⚡', info: 'ℹ️', default: '💬' }[variant]}
|
|
161
|
+
</div>
|
|
162
|
+
<h3 class="title">${opts.title}</h3>
|
|
163
|
+
${opts.message ? html `<p class="message">${opts.message}</p>` : ''}
|
|
164
|
+
|
|
165
|
+
${type === 'prompt' ? html `
|
|
166
|
+
<div class="input-group">
|
|
167
|
+
${opts.inputLabel ? html `<label class="input-label">${opts.inputLabel}</label>` : ''}
|
|
168
|
+
<input class="input" .value="${this.inputValue}" placeholder="${opts.inputPlaceholder ?? ''}"
|
|
169
|
+
@input="${(e) => { this.inputValue = e.target.value; }}"
|
|
170
|
+
@keydown="${(e) => { if (e.key === 'Enter')
|
|
171
|
+
this.resolve(this.inputValue); }}"
|
|
172
|
+
/>
|
|
173
|
+
</div>
|
|
174
|
+
` : ''}
|
|
175
|
+
|
|
176
|
+
${type === 'delete' && opts.confirmWord ? html `
|
|
177
|
+
<div class="input-group">
|
|
178
|
+
<label class="input-label">Escribe <strong>${opts.confirmWord}</strong> para confirmar:</label>
|
|
179
|
+
<input class="input ${this.confirmValue && !this.canDelete ? 'input--error' : ''}"
|
|
180
|
+
.value="${this.confirmValue}"
|
|
181
|
+
placeholder="${opts.confirmWord}"
|
|
182
|
+
@input="${(e) => { this.confirmValue = e.target.value; }}"
|
|
183
|
+
/>
|
|
184
|
+
</div>
|
|
185
|
+
` : ''}
|
|
186
|
+
|
|
187
|
+
${type === 'decision' && opts.buttons ? html `
|
|
188
|
+
<div class="buttons buttons--decision">
|
|
189
|
+
${opts.buttons.map(btn => html `
|
|
190
|
+
<button class="decision-btn" @click="${() => this.resolve(btn.value ?? btn.label)}">
|
|
191
|
+
${btn.icon ? html `<span class="decision-btn-icon">${btn.icon}</span>` : ''}
|
|
192
|
+
<span class="decision-btn-label">${btn.label}</span>
|
|
193
|
+
</button>
|
|
194
|
+
`)}
|
|
195
|
+
<button class="btn btn--ghost" style="margin-top:4px;" @click="${() => this.resolve(null)}">${opts.cancelText ?? 'Cancelar'}</button>
|
|
196
|
+
</div>
|
|
197
|
+
` : html `
|
|
198
|
+
<div class="buttons">
|
|
199
|
+
${type !== 'alert' ? html `
|
|
200
|
+
<button class="btn btn--secondary" @click="${() => this.resolve(type === 'prompt' ? null : false)}">${opts.cancelText ?? 'Cancelar'}</button>
|
|
201
|
+
` : ''}
|
|
202
|
+
<button class="btn btn--${type === 'delete' ? 'danger' : 'primary'}"
|
|
203
|
+
?disabled="${type === 'delete' && !this.canDelete}"
|
|
204
|
+
@click="${() => {
|
|
205
|
+
if (type === 'prompt')
|
|
206
|
+
this.resolve(this.inputValue);
|
|
207
|
+
else
|
|
208
|
+
this.resolve(true);
|
|
209
|
+
}}"
|
|
210
|
+
>${opts.okText ?? (type === 'alert' ? 'Entendido' : 'Aceptar')}</button>
|
|
211
|
+
</div>
|
|
212
|
+
`}
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
`;
|
|
216
|
+
}
|
|
217
|
+
};
|
|
218
|
+
__decorate([
|
|
219
|
+
state()
|
|
220
|
+
], ZsConfirmDialog.prototype, "isOpen", void 0);
|
|
221
|
+
__decorate([
|
|
222
|
+
state()
|
|
223
|
+
], ZsConfirmDialog.prototype, "options", void 0);
|
|
224
|
+
__decorate([
|
|
225
|
+
state()
|
|
226
|
+
], ZsConfirmDialog.prototype, "inputValue", void 0);
|
|
227
|
+
__decorate([
|
|
228
|
+
state()
|
|
229
|
+
], ZsConfirmDialog.prototype, "confirmValue", void 0);
|
|
230
|
+
ZsConfirmDialog = __decorate([
|
|
231
|
+
customElement('zs-confirm-dialog')
|
|
232
|
+
], ZsConfirmDialog);
|
|
233
|
+
export { ZsConfirmDialog };
|
|
234
|
+
//# sourceMappingURL=zs-confirm-dialog.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"zs-confirm-dialog.js","sourceRoot":"","sources":["../../src/fields/zs-confirm-dialog.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen' | 'side-right' | 'side-left';
|
|
3
|
+
export type ModalVariant = 'default' | 'danger' | 'success' | 'warning' | 'info';
|
|
4
|
+
export declare class ZsModal extends LitElement {
|
|
5
|
+
static styles: import("lit").CSSResult[];
|
|
6
|
+
open: boolean;
|
|
7
|
+
title: string;
|
|
8
|
+
subtitle: string;
|
|
9
|
+
icon: string;
|
|
10
|
+
size: ModalSize;
|
|
11
|
+
variant: ModalVariant;
|
|
12
|
+
closable: boolean;
|
|
13
|
+
closeOnBackdrop: boolean;
|
|
14
|
+
hideFooter: boolean;
|
|
15
|
+
hideHeader: boolean;
|
|
16
|
+
confirmText: string;
|
|
17
|
+
cancelText: string;
|
|
18
|
+
okText: string;
|
|
19
|
+
okVariant: 'primary' | 'danger' | 'success';
|
|
20
|
+
loading: boolean;
|
|
21
|
+
confirmInput: string;
|
|
22
|
+
private confirmInputValue;
|
|
23
|
+
private get canConfirm();
|
|
24
|
+
private handleBackdropClick;
|
|
25
|
+
private handleKeydown;
|
|
26
|
+
connectedCallback(): void;
|
|
27
|
+
disconnectedCallback(): void;
|
|
28
|
+
close(reason?: 'close' | 'backdrop' | 'escape' | 'cancel' | 'ok'): void;
|
|
29
|
+
confirm(): void;
|
|
30
|
+
cancel(): void;
|
|
31
|
+
private getVariantIcon;
|
|
32
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
33
|
+
}
|
|
34
|
+
declare global {
|
|
35
|
+
interface HTMLElementTagNameMap {
|
|
36
|
+
'zs-modal': ZsModal;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
//# sourceMappingURL=zs-modal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"zs-modal.d.ts","sourceRoot":"","sources":["../../src/fields/zs-modal.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,YAAY,GAAG,YAAY,GAAG,WAAW,CAAC;AAC9F,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAEjF,qBACa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,MAAM,4BAwJV;IAEyC,IAAI,UAAS;IAC7C,KAAK,SAAM;IACX,QAAQ,SAAM;IACd,IAAI,SAAM;IACV,IAAI,EAAE,SAAS,CAAQ;IACvB,OAAO,EAAE,YAAY,CAAa;IACjB,QAAQ,UAAQ;IAChB,eAAe,UAAQ;IACvB,UAAU,UAAS;IACnB,UAAU,UAAS;IAGpC,WAAW,SAAM;IACjB,UAAU,SAAc;IACxB,MAAM,SAAa;IACnB,SAAS,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAa;IACvC,OAAO,UAAS;IAGjC,YAAY,SAAM;IACrB,OAAO,CAAC,iBAAiB,CAAM;IAExC,OAAO,KAAK,UAAU,GAGrB;IAED,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,aAAa,CAEnB;IAEF,iBAAiB;IAKjB,oBAAoB;IAKpB,KAAK,CAAC,MAAM,GAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,IAAc;IASzE,OAAO;IASP,MAAM;IAQN,OAAO,CAAC,cAAc;IAYtB,MAAM;CAkDP;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,UAAU,EAAE,OAAO,CAAC;KAAE;CAAE"}
|