@api-client/ui 0.5.20 → 0.5.21
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/build/src/md/dialog/internals/Dialog.d.ts +13 -35
- package/build/src/md/dialog/internals/Dialog.d.ts.map +1 -1
- package/build/src/md/dialog/internals/Dialog.js +32 -146
- package/build/src/md/dialog/internals/Dialog.js.map +1 -1
- package/package.json +1 -1
- package/src/md/dialog/internals/Dialog.ts +20 -120
- package/build/src/events/SyntheticSubmitEvent.d.ts +0 -9
- package/build/src/events/SyntheticSubmitEvent.d.ts.map +0 -1
- package/build/src/events/SyntheticSubmitEvent.js +0 -22
- package/build/src/events/SyntheticSubmitEvent.js.map +0 -1
- package/src/events/SyntheticSubmitEvent.ts +0 -27
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type PropertyValues, type TemplateResult } from 'lit';
|
|
2
2
|
import { UiElement } from '../../UiElement.js';
|
|
3
3
|
import type { TypedEvents } from '../../../core/types.js';
|
|
4
|
+
import type { ButtonType } from '../../button/internals/button.js';
|
|
4
5
|
import '../../button/ui-button.js';
|
|
5
6
|
export interface UiDialogClosingReason {
|
|
6
7
|
/**
|
|
@@ -31,8 +32,8 @@ export type RenderFunction = () => TemplateResult;
|
|
|
31
32
|
* closing reason detail.
|
|
32
33
|
*
|
|
33
34
|
* ```javascript
|
|
34
|
-
* <ui-button color="text" value="dismiss">Cancel</ui-button>
|
|
35
|
-
* <ui-button color="text" value="confirm">Take action</ui-button>
|
|
35
|
+
* <ui-button slot="button" color="text" value="dismiss">Cancel</ui-button>
|
|
36
|
+
* <ui-button slot="button" color="text" value="confirm">Take action</ui-button>
|
|
36
37
|
* ```
|
|
37
38
|
*
|
|
38
39
|
* ```javascript
|
|
@@ -109,25 +110,6 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
|
|
|
109
110
|
* @attribute
|
|
110
111
|
*/
|
|
111
112
|
accessor destructive: boolean;
|
|
112
|
-
/**
|
|
113
|
-
* Part of the imperative access to the element.
|
|
114
|
-
* When set, it wraps the content in a `<form>` element.
|
|
115
|
-
* When this is enabled the following will happen:
|
|
116
|
-
* - The `confirm` button will get `type="submit"`
|
|
117
|
-
* - The form `method` attribute is set to `dialog`
|
|
118
|
-
* - The form `id` attribute is set to a random string. You can get it from the `formId` getter.
|
|
119
|
-
* - The dialog will dispatch the same `submit` event as the form.
|
|
120
|
-
* - When the `submit` event dispatched by the dialog gets cancelled, then:
|
|
121
|
-
* - The original submit event also gets cancelled.
|
|
122
|
-
* - The default confirm action is not invoked
|
|
123
|
-
* - The dialog stays opened
|
|
124
|
-
* - When the submit event is not cancelled, then:
|
|
125
|
-
* - The default confirm action is invoked.
|
|
126
|
-
* - The dialog is closed.
|
|
127
|
-
*
|
|
128
|
-
* @deprecated Wrap the content in a `<form>` element instead.
|
|
129
|
-
*/
|
|
130
|
-
accessor useForm: boolean | undefined;
|
|
131
113
|
/**
|
|
132
114
|
* Only when `confirmLabel` is set.
|
|
133
115
|
* Defines the value associated with the button's name when it's submitted with the form data.
|
|
@@ -135,6 +117,14 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
|
|
|
135
117
|
* @attribute
|
|
136
118
|
*/
|
|
137
119
|
accessor confirmValue: string | undefined;
|
|
120
|
+
/**
|
|
121
|
+
* The type of the confirm button.
|
|
122
|
+
* This is used to set the button's `type` attribute.
|
|
123
|
+
* If not set, the default is `button`.
|
|
124
|
+
* If set to `submit`, the dialog will trigger the form submission on the parent form.
|
|
125
|
+
* @attribute
|
|
126
|
+
*/
|
|
127
|
+
accessor confirmType: ButtonType | undefined;
|
|
138
128
|
/**
|
|
139
129
|
* When the dialog is wrapped in a form, set this to `true` to close the dialog
|
|
140
130
|
* when the form is submitted.
|
|
@@ -142,6 +132,7 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
|
|
|
142
132
|
* Note that the dialog doesn't perform any validation of the form. It only closes
|
|
143
133
|
* when the form is submitted, regardless of the application logic. The `submit` event
|
|
144
134
|
* is dispatched by the dialog when the form is valid.
|
|
135
|
+
* @attribute
|
|
145
136
|
*/
|
|
146
137
|
accessor submitClose: boolean | undefined;
|
|
147
138
|
/**
|
|
@@ -159,22 +150,9 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
|
|
|
159
150
|
* This is passed to the close event.
|
|
160
151
|
*/
|
|
161
152
|
dialogValue?: unknown;
|
|
162
|
-
/**
|
|
163
|
-
* @deprecated Use `useForm` instead.
|
|
164
|
-
*/
|
|
165
|
-
get formId(): string | undefined;
|
|
166
153
|
constructor();
|
|
167
|
-
/**
|
|
168
|
-
* Allows to inject a template into the internals of the element.
|
|
169
|
-
* This is helpful when working with imperative dialogs.
|
|
170
|
-
* @param content The content to inject into the body.
|
|
171
|
-
* @deprecated This will be removed in the future. To use forms, wrap the content in a `<form>` element.
|
|
172
|
-
*/
|
|
173
|
-
inject(content?: TemplateResult | RenderFunction, styles?: CSSResultOrNative[]): void;
|
|
174
154
|
connectedCallback(): void;
|
|
175
155
|
disconnectedCallback(): void;
|
|
176
|
-
protected firstUpdated(): void;
|
|
177
|
-
willUpdate(cp: PropertyValues<this>): void;
|
|
178
156
|
protected handleFormSubmit(): void;
|
|
179
157
|
handleClick(e: MouseEvent): void;
|
|
180
158
|
handleKeyDown(e: KeyboardEvent): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
import { __esDecorate, __runInitializers
|
|
2
|
-
import { html, nothing
|
|
1
|
+
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
+
import { html, nothing } from 'lit';
|
|
3
3
|
import { property, query, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js';
|
|
4
4
|
import { classMap } from 'lit/directives/class-map.js';
|
|
5
5
|
import { UiElement } from '../../UiElement.js';
|
|
6
6
|
import { isDisabled, setDisabled } from '../../../lib/disabled.js';
|
|
7
|
-
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
8
|
-
import { SyntheticSubmitEvent } from '../../../events/SyntheticSubmitEvent.js';
|
|
9
7
|
import '../../button/ui-button.js';
|
|
10
8
|
import { bound } from '../../../decorators/bound.js';
|
|
11
9
|
let UiDialog = (() => {
|
|
@@ -27,12 +25,12 @@ let UiDialog = (() => {
|
|
|
27
25
|
let _destructive_decorators;
|
|
28
26
|
let _destructive_initializers = [];
|
|
29
27
|
let _destructive_extraInitializers = [];
|
|
30
|
-
let _useForm_decorators;
|
|
31
|
-
let _useForm_initializers = [];
|
|
32
|
-
let _useForm_extraInitializers = [];
|
|
33
28
|
let _confirmValue_decorators;
|
|
34
29
|
let _confirmValue_initializers = [];
|
|
35
30
|
let _confirmValue_extraInitializers = [];
|
|
31
|
+
let _confirmType_decorators;
|
|
32
|
+
let _confirmType_initializers = [];
|
|
33
|
+
let _confirmType_extraInitializers = [];
|
|
36
34
|
let _submitClose_decorators;
|
|
37
35
|
let _submitClose_initializers = [];
|
|
38
36
|
let _submitClose_extraInitializers = [];
|
|
@@ -57,10 +55,6 @@ let UiDialog = (() => {
|
|
|
57
55
|
let _buttons_decorators;
|
|
58
56
|
let _buttons_initializers = [];
|
|
59
57
|
let _buttons_extraInitializers = [];
|
|
60
|
-
let _private_inject_decorators;
|
|
61
|
-
let _private_inject_initializers = [];
|
|
62
|
-
let _private_inject_extraInitializers = [];
|
|
63
|
-
let _private_inject_descriptor;
|
|
64
58
|
let _handleFormSubmit_decorators;
|
|
65
59
|
return class UiDialog extends _classSuper {
|
|
66
60
|
static {
|
|
@@ -71,8 +65,8 @@ let UiDialog = (() => {
|
|
|
71
65
|
_dismissLabel_decorators = [property({ type: String })];
|
|
72
66
|
_confirmLabel_decorators = [property({ type: String })];
|
|
73
67
|
_destructive_decorators = [property({ type: Boolean })];
|
|
74
|
-
_useForm_decorators = [property({ type: Boolean })];
|
|
75
68
|
_confirmValue_decorators = [property({ type: String })];
|
|
69
|
+
_confirmType_decorators = [property({ type: String })];
|
|
76
70
|
_submitClose_decorators = [property({ type: Boolean })];
|
|
77
71
|
_dialog_decorators = [query('dialog')];
|
|
78
72
|
_hasIcon_decorators = [state()];
|
|
@@ -81,7 +75,6 @@ let UiDialog = (() => {
|
|
|
81
75
|
_icons_decorators = [queryAssignedElements({ flatten: true, slot: 'icon' })];
|
|
82
76
|
_titles_decorators = [queryAssignedNodes({ flatten: true, slot: 'title' })];
|
|
83
77
|
_buttons_decorators = [queryAssignedElements({ flatten: true, slot: 'button' })];
|
|
84
|
-
_private_inject_decorators = [state()];
|
|
85
78
|
_handleFormSubmit_decorators = [bound];
|
|
86
79
|
__esDecorate(this, null, _set_disabled_decorators, { kind: "setter", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
87
80
|
__esDecorate(this, null, _modal_decorators, { kind: "accessor", name: "modal", static: false, private: false, access: { has: obj => "modal" in obj, get: obj => obj.modal, set: (obj, value) => { obj.modal = value; } }, metadata: _metadata }, _modal_initializers, _modal_extraInitializers);
|
|
@@ -89,8 +82,8 @@ let UiDialog = (() => {
|
|
|
89
82
|
__esDecorate(this, null, _dismissLabel_decorators, { kind: "accessor", name: "dismissLabel", static: false, private: false, access: { has: obj => "dismissLabel" in obj, get: obj => obj.dismissLabel, set: (obj, value) => { obj.dismissLabel = value; } }, metadata: _metadata }, _dismissLabel_initializers, _dismissLabel_extraInitializers);
|
|
90
83
|
__esDecorate(this, null, _confirmLabel_decorators, { kind: "accessor", name: "confirmLabel", static: false, private: false, access: { has: obj => "confirmLabel" in obj, get: obj => obj.confirmLabel, set: (obj, value) => { obj.confirmLabel = value; } }, metadata: _metadata }, _confirmLabel_initializers, _confirmLabel_extraInitializers);
|
|
91
84
|
__esDecorate(this, null, _destructive_decorators, { kind: "accessor", name: "destructive", static: false, private: false, access: { has: obj => "destructive" in obj, get: obj => obj.destructive, set: (obj, value) => { obj.destructive = value; } }, metadata: _metadata }, _destructive_initializers, _destructive_extraInitializers);
|
|
92
|
-
__esDecorate(this, null, _useForm_decorators, { kind: "accessor", name: "useForm", static: false, private: false, access: { has: obj => "useForm" in obj, get: obj => obj.useForm, set: (obj, value) => { obj.useForm = value; } }, metadata: _metadata }, _useForm_initializers, _useForm_extraInitializers);
|
|
93
85
|
__esDecorate(this, null, _confirmValue_decorators, { kind: "accessor", name: "confirmValue", static: false, private: false, access: { has: obj => "confirmValue" in obj, get: obj => obj.confirmValue, set: (obj, value) => { obj.confirmValue = value; } }, metadata: _metadata }, _confirmValue_initializers, _confirmValue_extraInitializers);
|
|
86
|
+
__esDecorate(this, null, _confirmType_decorators, { kind: "accessor", name: "confirmType", static: false, private: false, access: { has: obj => "confirmType" in obj, get: obj => obj.confirmType, set: (obj, value) => { obj.confirmType = value; } }, metadata: _metadata }, _confirmType_initializers, _confirmType_extraInitializers);
|
|
94
87
|
__esDecorate(this, null, _submitClose_decorators, { kind: "accessor", name: "submitClose", static: false, private: false, access: { has: obj => "submitClose" in obj, get: obj => obj.submitClose, set: (obj, value) => { obj.submitClose = value; } }, metadata: _metadata }, _submitClose_initializers, _submitClose_extraInitializers);
|
|
95
88
|
__esDecorate(this, null, _dialog_decorators, { kind: "accessor", name: "dialog", static: false, private: false, access: { has: obj => "dialog" in obj, get: obj => obj.dialog, set: (obj, value) => { obj.dialog = value; } }, metadata: _metadata }, _dialog_initializers, _dialog_extraInitializers);
|
|
96
89
|
__esDecorate(this, null, _hasIcon_decorators, { kind: "accessor", name: "hasIcon", static: false, private: false, access: { has: obj => "hasIcon" in obj, get: obj => obj.hasIcon, set: (obj, value) => { obj.hasIcon = value; } }, metadata: _metadata }, _hasIcon_initializers, _hasIcon_extraInitializers);
|
|
@@ -99,7 +92,6 @@ let UiDialog = (() => {
|
|
|
99
92
|
__esDecorate(this, null, _icons_decorators, { kind: "accessor", name: "icons", static: false, private: false, access: { has: obj => "icons" in obj, get: obj => obj.icons, set: (obj, value) => { obj.icons = value; } }, metadata: _metadata }, _icons_initializers, _icons_extraInitializers);
|
|
100
93
|
__esDecorate(this, null, _titles_decorators, { kind: "accessor", name: "titles", static: false, private: false, access: { has: obj => "titles" in obj, get: obj => obj.titles, set: (obj, value) => { obj.titles = value; } }, metadata: _metadata }, _titles_initializers, _titles_extraInitializers);
|
|
101
94
|
__esDecorate(this, null, _buttons_decorators, { kind: "accessor", name: "buttons", static: false, private: false, access: { has: obj => "buttons" in obj, get: obj => obj.buttons, set: (obj, value) => { obj.buttons = value; } }, metadata: _metadata }, _buttons_initializers, _buttons_extraInitializers);
|
|
102
|
-
__esDecorate(this, _private_inject_descriptor = { get: __setFunctionName(function () { return this.#inject_accessor_storage; }, "#inject", "get"), set: __setFunctionName(function (value) { this.#inject_accessor_storage = value; }, "#inject", "set") }, _private_inject_decorators, { kind: "accessor", name: "#inject", static: false, private: true, access: { has: obj => #inject in obj, get: obj => obj.#inject, set: (obj, value) => { obj.#inject = value; } }, metadata: _metadata }, _private_inject_initializers, _private_inject_extraInitializers);
|
|
103
95
|
__esDecorate(this, null, _handleFormSubmit_decorators, { kind: "method", name: "handleFormSubmit", static: false, private: false, access: { has: obj => "handleFormSubmit" in obj, get: obj => obj.handleFormSubmit }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
104
96
|
if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
105
97
|
}
|
|
@@ -163,22 +155,10 @@ let UiDialog = (() => {
|
|
|
163
155
|
set confirmLabel(value) { this.#confirmLabel_accessor_storage = value; }
|
|
164
156
|
#destructive_accessor_storage = (__runInitializers(this, _confirmLabel_extraInitializers), __runInitializers(this, _destructive_initializers, false
|
|
165
157
|
/**
|
|
166
|
-
*
|
|
167
|
-
*
|
|
168
|
-
*
|
|
169
|
-
*
|
|
170
|
-
* - The form `method` attribute is set to `dialog`
|
|
171
|
-
* - The form `id` attribute is set to a random string. You can get it from the `formId` getter.
|
|
172
|
-
* - The dialog will dispatch the same `submit` event as the form.
|
|
173
|
-
* - When the `submit` event dispatched by the dialog gets cancelled, then:
|
|
174
|
-
* - The original submit event also gets cancelled.
|
|
175
|
-
* - The default confirm action is not invoked
|
|
176
|
-
* - The dialog stays opened
|
|
177
|
-
* - When the submit event is not cancelled, then:
|
|
178
|
-
* - The default confirm action is invoked.
|
|
179
|
-
* - The dialog is closed.
|
|
180
|
-
*
|
|
181
|
-
* @deprecated Wrap the content in a `<form>` element instead.
|
|
158
|
+
* Only when `confirmLabel` is set.
|
|
159
|
+
* Defines the value associated with the button's name when it's submitted with the form data.
|
|
160
|
+
* @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value}
|
|
161
|
+
* @attribute
|
|
182
162
|
*/
|
|
183
163
|
));
|
|
184
164
|
/**
|
|
@@ -188,28 +168,7 @@ let UiDialog = (() => {
|
|
|
188
168
|
*/
|
|
189
169
|
get destructive() { return this.#destructive_accessor_storage; }
|
|
190
170
|
set destructive(value) { this.#destructive_accessor_storage = value; }
|
|
191
|
-
#
|
|
192
|
-
/**
|
|
193
|
-
* Part of the imperative access to the element.
|
|
194
|
-
* When set, it wraps the content in a `<form>` element.
|
|
195
|
-
* When this is enabled the following will happen:
|
|
196
|
-
* - The `confirm` button will get `type="submit"`
|
|
197
|
-
* - The form `method` attribute is set to `dialog`
|
|
198
|
-
* - The form `id` attribute is set to a random string. You can get it from the `formId` getter.
|
|
199
|
-
* - The dialog will dispatch the same `submit` event as the form.
|
|
200
|
-
* - When the `submit` event dispatched by the dialog gets cancelled, then:
|
|
201
|
-
* - The original submit event also gets cancelled.
|
|
202
|
-
* - The default confirm action is not invoked
|
|
203
|
-
* - The dialog stays opened
|
|
204
|
-
* - When the submit event is not cancelled, then:
|
|
205
|
-
* - The default confirm action is invoked.
|
|
206
|
-
* - The dialog is closed.
|
|
207
|
-
*
|
|
208
|
-
* @deprecated Wrap the content in a `<form>` element instead.
|
|
209
|
-
*/
|
|
210
|
-
get useForm() { return this.#useForm_accessor_storage; }
|
|
211
|
-
set useForm(value) { this.#useForm_accessor_storage = value; }
|
|
212
|
-
#confirmValue_accessor_storage = (__runInitializers(this, _useForm_extraInitializers), __runInitializers(this, _confirmValue_initializers, void 0));
|
|
171
|
+
#confirmValue_accessor_storage = (__runInitializers(this, _destructive_extraInitializers), __runInitializers(this, _confirmValue_initializers, void 0));
|
|
213
172
|
/**
|
|
214
173
|
* Only when `confirmLabel` is set.
|
|
215
174
|
* Defines the value associated with the button's name when it's submitted with the form data.
|
|
@@ -218,7 +177,17 @@ let UiDialog = (() => {
|
|
|
218
177
|
*/
|
|
219
178
|
get confirmValue() { return this.#confirmValue_accessor_storage; }
|
|
220
179
|
set confirmValue(value) { this.#confirmValue_accessor_storage = value; }
|
|
221
|
-
#
|
|
180
|
+
#confirmType_accessor_storage = (__runInitializers(this, _confirmValue_extraInitializers), __runInitializers(this, _confirmType_initializers, void 0));
|
|
181
|
+
/**
|
|
182
|
+
* The type of the confirm button.
|
|
183
|
+
* This is used to set the button's `type` attribute.
|
|
184
|
+
* If not set, the default is `button`.
|
|
185
|
+
* If set to `submit`, the dialog will trigger the form submission on the parent form.
|
|
186
|
+
* @attribute
|
|
187
|
+
*/
|
|
188
|
+
get confirmType() { return this.#confirmType_accessor_storage; }
|
|
189
|
+
set confirmType(value) { this.#confirmType_accessor_storage = value; }
|
|
190
|
+
#submitClose_accessor_storage = (__runInitializers(this, _confirmType_extraInitializers), __runInitializers(this, _submitClose_initializers, void 0));
|
|
222
191
|
/**
|
|
223
192
|
* When the dialog is wrapped in a form, set this to `true` to close the dialog
|
|
224
193
|
* when the form is submitted.
|
|
@@ -226,6 +195,7 @@ let UiDialog = (() => {
|
|
|
226
195
|
* Note that the dialog doesn't perform any validation of the form. It only closes
|
|
227
196
|
* when the form is submitted, regardless of the application logic. The `submit` event
|
|
228
197
|
* is dispatched by the dialog when the form is valid.
|
|
198
|
+
* @attribute
|
|
229
199
|
*/
|
|
230
200
|
get submitClose() { return this.#submitClose_accessor_storage; }
|
|
231
201
|
set submitClose(value) { this.#submitClose_accessor_storage = value; }
|
|
@@ -258,23 +228,6 @@ let UiDialog = (() => {
|
|
|
258
228
|
* This is passed to the close event.
|
|
259
229
|
*/
|
|
260
230
|
dialogValue = __runInitializers(this, _buttons_extraInitializers);
|
|
261
|
-
#formId;
|
|
262
|
-
/**
|
|
263
|
-
* @deprecated Use `useForm` instead.
|
|
264
|
-
*/
|
|
265
|
-
get formId() {
|
|
266
|
-
return this.#formId;
|
|
267
|
-
}
|
|
268
|
-
#inject_accessor_storage = __runInitializers(this, _private_inject_initializers, void 0);
|
|
269
|
-
/**
|
|
270
|
-
* @deprecated This will be removed in the future.
|
|
271
|
-
*/
|
|
272
|
-
get #inject() { return _private_inject_descriptor.get.call(this); }
|
|
273
|
-
set #inject(value) { return _private_inject_descriptor.set.call(this, value); }
|
|
274
|
-
/**
|
|
275
|
-
* @deprecated This will be removed in the future.
|
|
276
|
-
*/
|
|
277
|
-
#pendingStyles = __runInitializers(this, _private_inject_extraInitializers);
|
|
278
231
|
/**
|
|
279
232
|
* A reference to the parent form element.
|
|
280
233
|
* When a form is found, the dialog will hook into the form's submit event
|
|
@@ -288,29 +241,6 @@ let UiDialog = (() => {
|
|
|
288
241
|
this.addEventListener('click', this.handleClick);
|
|
289
242
|
this.addEventListener('keydown', this.handleKeyDown);
|
|
290
243
|
}
|
|
291
|
-
/**
|
|
292
|
-
* Allows to inject a template into the internals of the element.
|
|
293
|
-
* This is helpful when working with imperative dialogs.
|
|
294
|
-
* @param content The content to inject into the body.
|
|
295
|
-
* @deprecated This will be removed in the future. To use forms, wrap the content in a `<form>` element.
|
|
296
|
-
*/
|
|
297
|
-
inject(content, styles) {
|
|
298
|
-
this.#inject = content;
|
|
299
|
-
if (styles) {
|
|
300
|
-
if (this.shadowRoot) {
|
|
301
|
-
adoptStyles(this.shadowRoot, styles);
|
|
302
|
-
}
|
|
303
|
-
else {
|
|
304
|
-
if (!this.#pendingStyles) {
|
|
305
|
-
this.#pendingStyles = [];
|
|
306
|
-
}
|
|
307
|
-
this.#pendingStyles.push(...styles);
|
|
308
|
-
}
|
|
309
|
-
}
|
|
310
|
-
if (this.shadowRoot && styles) {
|
|
311
|
-
adoptStyles(this.shadowRoot, styles);
|
|
312
|
-
}
|
|
313
|
-
}
|
|
314
244
|
connectedCallback() {
|
|
315
245
|
super.connectedCallback();
|
|
316
246
|
this.#form = this.closest('form');
|
|
@@ -325,20 +255,6 @@ let UiDialog = (() => {
|
|
|
325
255
|
this.#form = null;
|
|
326
256
|
}
|
|
327
257
|
}
|
|
328
|
-
firstUpdated() {
|
|
329
|
-
const styles = this.#pendingStyles;
|
|
330
|
-
if (styles) {
|
|
331
|
-
const root = this.shadowRoot;
|
|
332
|
-
const all = [...root.adoptedStyleSheets, ...styles];
|
|
333
|
-
adoptStyles(this.shadowRoot, all);
|
|
334
|
-
}
|
|
335
|
-
}
|
|
336
|
-
willUpdate(cp) {
|
|
337
|
-
if (cp.has('useForm') && this.useForm && !this.#formId) {
|
|
338
|
-
const r = (Math.random() + 1).toString(36).substring(7);
|
|
339
|
-
this.#formId = `form-${r}`;
|
|
340
|
-
}
|
|
341
|
-
}
|
|
342
258
|
handleFormSubmit() {
|
|
343
259
|
if (this.submitClose) {
|
|
344
260
|
this.handleInteraction('confirm');
|
|
@@ -461,45 +377,20 @@ let UiDialog = (() => {
|
|
|
461
377
|
this.handleInteraction('dismiss');
|
|
462
378
|
}
|
|
463
379
|
handleConfirm() {
|
|
464
|
-
|
|
465
|
-
this.handleInteraction('confirm');
|
|
466
|
-
}
|
|
467
|
-
}
|
|
468
|
-
#handleSubmit(event) {
|
|
469
|
-
const form = event.target;
|
|
470
|
-
const copy = new SyntheticSubmitEvent(event.type, form, {
|
|
471
|
-
submitter: event.submitter,
|
|
472
|
-
cancelable: true,
|
|
473
|
-
bubbles: false,
|
|
474
|
-
composed: false,
|
|
475
|
-
});
|
|
476
|
-
const dispatched = this.dispatchEvent(copy);
|
|
477
|
-
if (dispatched) {
|
|
478
|
-
this.handleInteraction('confirm');
|
|
479
|
-
}
|
|
480
|
-
else {
|
|
481
|
-
event.preventDefault();
|
|
482
|
-
}
|
|
380
|
+
this.handleInteraction('confirm');
|
|
483
381
|
}
|
|
484
382
|
render() {
|
|
485
|
-
const {
|
|
383
|
+
const { modal } = this;
|
|
486
384
|
const dialogClass = modal ? 'modal' : 'non-modal';
|
|
487
385
|
return html `
|
|
488
386
|
<dialog @close="${this.handleDialogClose}" part="dialog" class="${dialogClass}">
|
|
489
|
-
<div class="container">${
|
|
387
|
+
<div class="container">${this.renderContent()}</div>
|
|
490
388
|
</dialog>
|
|
491
389
|
`;
|
|
492
390
|
}
|
|
493
391
|
renderContent() {
|
|
494
392
|
return [this.renderIcon(), this.renderTitle(), this.renderBody(), this.renderButtons()];
|
|
495
393
|
}
|
|
496
|
-
#renderFormContent() {
|
|
497
|
-
return html `
|
|
498
|
-
<form id="${ifDefined(this.formId)}" method="dialog" @submit="${this.#handleSubmit}" part="form">
|
|
499
|
-
${this.renderContent()}
|
|
500
|
-
</form>
|
|
501
|
-
`;
|
|
502
|
-
}
|
|
503
394
|
renderIcon() {
|
|
504
395
|
const classes = {
|
|
505
396
|
'icon': true,
|
|
@@ -524,12 +415,7 @@ let UiDialog = (() => {
|
|
|
524
415
|
`;
|
|
525
416
|
}
|
|
526
417
|
renderBody() {
|
|
527
|
-
|
|
528
|
-
if (typeof content === 'function') {
|
|
529
|
-
content = content();
|
|
530
|
-
}
|
|
531
|
-
const injected = content || nothing;
|
|
532
|
-
return html ` <div class="content" part="body"><slot></slot>${injected}</div> `;
|
|
418
|
+
return html ` <div class="content" part="body"><slot></slot></div> `;
|
|
533
419
|
}
|
|
534
420
|
renderButtons() {
|
|
535
421
|
const classes = {
|
|
@@ -560,11 +446,11 @@ let UiDialog = (() => {
|
|
|
560
446
|
`;
|
|
561
447
|
}
|
|
562
448
|
#renderConfirmButton() {
|
|
563
|
-
const { confirmLabel, confirmValue = 'confirm',
|
|
449
|
+
const { confirmLabel, confirmValue = 'confirm', destructive } = this;
|
|
564
450
|
if (!confirmLabel) {
|
|
565
451
|
return nothing;
|
|
566
452
|
}
|
|
567
|
-
const type =
|
|
453
|
+
const type = this.confirmType ?? 'button';
|
|
568
454
|
const buttonClass = destructive ? 'internal-button destructive' : 'internal-button';
|
|
569
455
|
return html `
|
|
570
456
|
<ui-button
|
|
@@ -592,8 +478,8 @@ let UiDialog = (() => {
|
|
|
592
478
|
* closing reason detail.
|
|
593
479
|
*
|
|
594
480
|
* ```javascript
|
|
595
|
-
* <ui-button color="text" value="dismiss">Cancel</ui-button>
|
|
596
|
-
* <ui-button color="text" value="confirm">Take action</ui-button>
|
|
481
|
+
* <ui-button slot="button" color="text" value="dismiss">Cancel</ui-button>
|
|
482
|
+
* <ui-button slot="button" color="text" value="confirm">Take action</ui-button>
|
|
597
483
|
* ```
|
|
598
484
|
*
|
|
599
485
|
* ```javascript
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { type CSSResultOrNative, html, nothing, type PropertyValues, type TemplateResult, adoptStyles } from 'lit'\nimport { property, query, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js'\nimport { type ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../UiElement.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport type UiButton from '../../button/internals/button.js'\nimport type { TypedEvents } from '../../../core/types.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { SyntheticSubmitEvent } from '../../../events/SyntheticSubmitEvent.js'\nimport '../../button/ui-button.js'\nimport { bound } from '../../../decorators/bound.js'\n\nexport interface UiDialogClosingReason {\n /**\n * Whether the dialog was cancelled by either activating the `dismiss` button\n * or by pressing escape.\n */\n cancelled: boolean\n /**\n * This is used in cases when the dialog has more complex purpose.\n * This is the value expected from the dialog.\n */\n value?: unknown\n}\n\ninterface DialogEventMap {\n closing: CustomEvent<UiDialogClosingReason>\n close: CustomEvent<UiDialogClosingReason>\n}\n\nexport type RenderFunction = () => TemplateResult\n\n/**\n * Styled dialog using a native `<dialog>` element under the hood.\n * Note, since native dialog renders in the top layer it is not necessary\n * to place the dialog in the `<body>`.\n *\n * **Using Buttons**\n *\n * The dialog automatically recognizes buttons with values `confirm` and `dismiss`\n * to close the dialog and dispatch the `close` event. The event has additional\n * closing reason detail.\n *\n * ```javascript\n * <ui-button color=\"text\" value=\"dismiss\">Cancel</ui-button>\n * <ui-button color=\"text\" value=\"confirm\">Take action</ui-button>\n * ```\n *\n * ```javascript\n * <button value=\"dismiss\">Cancel</button>\n * <button value=\"confirm\">Take action</button>\n * ```\n *\n * The detail object of the `close` event has the following properties:\n * - cancelled - Whether the dialog was cancelled by either activating the `dismiss` button or by pressing escape.\n *\n * The `close` event is only dispatched when the user interact with the dialog. Imperative control of the\n * dialog won't trigger the close button.\n *\n * ** Full example**\n *\n * ```javascript\n * <ui-dialog modal>\n * <ui-icon slot=\"icon\" icon=\"delete\"></ui-icon>\n *\n * <span slot=\"title\">Delete photos?</span>\n * <p>This action will permanently remove the selected pictures from your account.</p>\n *\n * <ui-button color=\"text\" slot=\"button\" value=\"dismiss\" type=\"text\">Cancel</ui-button>\n * <ui-button color=\"text\" slot=\"button\" value=\"confirm\" type=\"text\">Confirm</ui-button>\n * </ui-dialog>\n * ```\n *\n * @slot - The slot for the content of the dialog.\n * @slot icon - The slot to place the dialog icon\n * @slot title - The slot to place the dialog title. Do not put elements here, just the text.\n * @slot button - The slot to place the dialog buttons. Use the `confirm` or `dismiss`\n * buttons to automatically close the dialog.\n * @fires closing - A cancelable, non-bubbling event with the `UiDialogClosingReason` as the detail,\n * dispatched before the dialog closes. If prevented, the dialog will not close.\n * @fires close - A non-bubbling, non-cancellable event with the `UiDialogClosingReason` as the detail.\n */\nexport default class UiDialog extends UiElement implements TypedEvents<DialogEventMap> {\n get disabled(): boolean {\n return isDisabled(this)\n }\n\n /**\n * When set, the button is a disabled state.\n * @attribute\n */\n @property({ reflect: true, type: Boolean })\n set disabled(value: boolean) {\n const old = isDisabled(this)\n setDisabled(this, value)\n this.requestUpdate('disabled', old)\n }\n\n /**\n * Opens the dialog as modal when toggling dialog's open state.\n *\n * Setting this value after the dialog was opened has no effect.\n *\n * @attribute\n */\n @property({ type: Boolean }) accessor modal = false\n\n /**\n * Toggles visibility of the dialog.\n * Note, the dialog is opened asynchronously after the update is performed.\n * @attribute\n */\n @property({ type: Boolean }) accessor open = false\n\n /**\n * Imperative access to create a dismiss button.\n * When set this will render a dismiss button at the end of the buttons line, before the `confirmLabel` button.\n * @attribute\n */\n @property({ type: String }) accessor dismissLabel: string | undefined\n\n /**\n * Imperative access to create a confirm button.\n * When set this will render a confirm button at the end of the buttons line, after the `dismissLabel` button.\n * @attribute\n */\n @property({ type: String }) accessor confirmLabel: string | undefined\n\n /**\n * When true, styles the confirm button with error colors to indicate\n * a destructive action (e.g., delete, remove, etc.).\n * @attribute\n */\n @property({ type: Boolean }) accessor destructive = false\n\n /**\n * Part of the imperative access to the element.\n * When set, it wraps the content in a `<form>` element.\n * When this is enabled the following will happen:\n * - The `confirm` button will get `type=\"submit\"`\n * - The form `method` attribute is set to `dialog`\n * - The form `id` attribute is set to a random string. You can get it from the `formId` getter.\n * - The dialog will dispatch the same `submit` event as the form.\n * - When the `submit` event dispatched by the dialog gets cancelled, then:\n * - The original submit event also gets cancelled.\n * - The default confirm action is not invoked\n * - The dialog stays opened\n * - When the submit event is not cancelled, then:\n * - The default confirm action is invoked.\n * - The dialog is closed.\n *\n * @deprecated Wrap the content in a `<form>` element instead.\n */\n @property({ type: Boolean }) accessor useForm: boolean | undefined\n\n /**\n * Only when `confirmLabel` is set.\n * Defines the value associated with the button's name when it's submitted with the form data.\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value}\n * @attribute\n */\n @property({ type: String }) accessor confirmValue: string | undefined\n /**\n * When the dialog is wrapped in a form, set this to `true` to close the dialog\n * when the form is submitted.\n *\n * Note that the dialog doesn't perform any validation of the form. It only closes\n * when the form is submitted, regardless of the application logic. The `submit` event\n * is dispatched by the dialog when the form is valid.\n */\n @property({ type: Boolean }) accessor submitClose: boolean | undefined\n\n /**\n * A reference to the underlying dialog element.\n */\n @query('dialog') accessor dialog!: HTMLDialogElement\n\n @state() protected accessor hasIcon = false\n\n @state() protected accessor hasTitle = false\n\n @state() protected accessor hasButton = false\n\n @queryAssignedElements({ flatten: true, slot: 'icon' }) protected accessor icons!: HTMLElement[]\n\n @queryAssignedNodes({ flatten: true, slot: 'title' }) protected accessor titles!: HTMLElement[]\n\n @queryAssignedElements({ flatten: true, slot: 'button' }) protected accessor buttons!: HTMLElement[]\n\n /**\n * To be set by a child class when closing the dialog.\n * This is passed to the close event.\n */\n dialogValue?: unknown\n\n #formId?: string\n\n /**\n * @deprecated Use `useForm` instead.\n */\n get formId(): string | undefined {\n return this.#formId\n }\n\n /**\n * @deprecated This will be removed in the future.\n */\n @state() accessor #inject: TemplateResult | RenderFunction | undefined\n\n /**\n * @deprecated This will be removed in the future.\n */\n #pendingStyles?: CSSResultOrNative[]\n\n /**\n * A reference to the parent form element.\n * When a form is found, the dialog will hook into the form's submit event\n * and close the dialog when the form is submitted.\n * Since the `submit` event is dispatched when the form is valid,\n * we can use this to close the dialog and not worry about the form validation.\n */\n #form: HTMLFormElement | null = null\n\n constructor() {\n super()\n\n this.addEventListener('click', this.handleClick)\n this.addEventListener('keydown', this.handleKeyDown)\n }\n\n /**\n * Allows to inject a template into the internals of the element.\n * This is helpful when working with imperative dialogs.\n * @param content The content to inject into the body.\n * @deprecated This will be removed in the future. To use forms, wrap the content in a `<form>` element.\n */\n inject(content?: TemplateResult | RenderFunction, styles?: CSSResultOrNative[]): void {\n this.#inject = content\n if (styles) {\n if (this.shadowRoot) {\n adoptStyles(this.shadowRoot, styles)\n } else {\n if (!this.#pendingStyles) {\n this.#pendingStyles = []\n }\n this.#pendingStyles.push(...styles)\n }\n }\n if (this.shadowRoot && styles) {\n adoptStyles(this.shadowRoot, styles)\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n this.#form = this.closest('form')\n if (this.#form) {\n this.#form.addEventListener('submit', this.handleFormSubmit)\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback()\n if (this.#form) {\n this.#form.removeEventListener('submit', this.handleFormSubmit)\n this.#form = null\n }\n }\n\n protected override firstUpdated(): void {\n const styles = this.#pendingStyles\n if (styles) {\n const root = this.shadowRoot as ShadowRoot\n const all = [...root.adoptedStyleSheets, ...styles]\n adoptStyles(this.shadowRoot as ShadowRoot, all)\n }\n }\n\n override willUpdate(cp: PropertyValues<this>): void {\n if (cp.has('useForm') && this.useForm && !this.#formId) {\n const r = (Math.random() + 1).toString(36).substring(7)\n this.#formId = `form-${r}`\n }\n }\n\n @bound\n protected handleFormSubmit(): void {\n if (this.submitClose) {\n this.handleInteraction('confirm')\n }\n }\n\n override handleClick(e: MouseEvent): void {\n super.handleClick(e)\n const path = e.composedPath()\n const { buttons } = this\n const button = path.find((i) => buttons.includes(i as HTMLElement)) as HTMLButtonElement | UiButton | undefined\n if (!button) {\n return\n }\n if (button.type === 'submit') {\n // Adds support for forms.\n // When a form's submit button is clicked we yield the flow control to the form.\n // This way the form can handle the submit event.\n return\n }\n const { value = '' } = button\n this.handleInteraction(value as 'dismiss' | 'confirm')\n }\n\n override handleKeyDown(e: KeyboardEvent): void {\n super.handleKeyDown(e)\n if (e.defaultPrevented) {\n return\n }\n if (e.key === 'Escape') {\n this.handleInteraction('dismiss')\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has('open')) {\n this.#controlVisibility()\n }\n super.updated(changedProperties)\n }\n\n #controlVisibility(): void {\n const { dialog, modal, open } = this\n if (!dialog) {\n return\n }\n if (open) {\n if (modal) {\n dialog.showModal()\n } else {\n dialog.show()\n }\n } else {\n dialog.close()\n }\n }\n\n #handleSlotChange(): void {\n const { icons, titles, buttons } = this\n this.hasIcon = !!icons && !!icons.length\n this.hasTitle = !!titles && !!titles.length\n this.hasButton = !!buttons && !!buttons.length\n }\n\n protected handleInteraction(value: 'dismiss' | 'confirm'): void {\n if (!['dismiss', 'confirm'].includes(value)) {\n return\n }\n\n const detail: UiDialogClosingReason = {\n cancelled: value === 'dismiss',\n }\n if (this.dialogValue !== undefined) {\n detail.value = this.dialogValue\n }\n\n // Dispatch cancelable closing event first\n const closingEvent = new CustomEvent<UiDialogClosingReason>('closing', {\n cancelable: true,\n composed: false,\n bubbles: false,\n detail,\n })\n const canClose = this.dispatchEvent(closingEvent)\n\n // Only proceed with closing if the event wasn't canceled\n if (!canClose) {\n return\n }\n\n this.open = false\n this.dispatchEvent(\n new CustomEvent<UiDialogClosingReason>('close', {\n composed: true,\n detail,\n })\n )\n }\n\n protected handleDialogClose(): void {\n if (!this.open) {\n return\n }\n\n const detail: UiDialogClosingReason = {\n cancelled: true,\n }\n if (this.dialogValue !== undefined) {\n detail.value = this.dialogValue\n }\n\n // Dispatch cancelable closing event first\n const closingEvent = new CustomEvent<UiDialogClosingReason>('closing', {\n cancelable: true,\n composed: false,\n bubbles: false,\n detail,\n })\n const canClose = this.dispatchEvent(closingEvent)\n\n // Only proceed with closing if the event wasn't canceled\n if (!canClose) {\n // If closing was prevented, reopen the dialog\n this.dialog.showModal()\n return\n }\n\n this.open = false\n this.dispatchEvent(\n new CustomEvent<UiDialogClosingReason>('close', {\n composed: true,\n detail,\n })\n )\n }\n\n protected handleDismiss(): void {\n this.handleInteraction('dismiss')\n }\n\n protected handleConfirm(): void {\n if (!this.useForm) {\n this.handleInteraction('confirm')\n }\n }\n\n #handleSubmit(event: SubmitEvent): void {\n const form = event.target as HTMLFormElement\n const copy = new SyntheticSubmitEvent(event.type, form, {\n submitter: event.submitter,\n cancelable: true,\n bubbles: false,\n composed: false,\n })\n const dispatched = this.dispatchEvent(copy)\n if (dispatched) {\n this.handleInteraction('confirm')\n } else {\n event.preventDefault()\n }\n }\n\n override render(): TemplateResult {\n const { useForm, modal } = this\n const dialogClass = modal ? 'modal' : 'non-modal'\n return html`\n <dialog @close=\"${this.handleDialogClose}\" part=\"dialog\" class=\"${dialogClass}\">\n <div class=\"container\">${useForm ? this.#renderFormContent() : this.renderContent()}</div>\n </dialog>\n `\n }\n\n protected renderContent(): TemplateResult[] | TemplateResult {\n return [this.renderIcon(), this.renderTitle(), this.renderBody(), this.renderButtons()]\n }\n\n #renderFormContent(): TemplateResult {\n return html`\n <form id=\"${ifDefined(this.formId)}\" method=\"dialog\" @submit=\"${this.#handleSubmit}\" part=\"form\">\n ${this.renderContent()}\n </form>\n `\n }\n\n protected renderIcon(): TemplateResult {\n const classes: ClassInfo = {\n 'icon': true,\n 'with-icon': this.hasIcon,\n 'destructive': this.destructive,\n }\n return html`\n <div class=\"${classMap(classes)}\" part=\"icon\">\n <slot name=\"icon\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n </div>\n `\n }\n\n protected renderTitle(): TemplateResult {\n const classes: ClassInfo = {\n 'title': true,\n 'with-title': this.hasTitle,\n }\n return html`\n <div class=\"${classMap(classes)}\" part=\"title\">\n <slot name=\"title\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n </div>\n `\n }\n\n protected renderBody(): TemplateResult {\n let content = this.#inject\n if (typeof content === 'function') {\n content = content()\n }\n const injected = content || nothing\n return html` <div class=\"content\" part=\"body\"><slot></slot>${injected}</div> `\n }\n\n protected renderButtons(): TemplateResult {\n const classes: ClassInfo = {\n 'buttons': true,\n 'with-buttons': this.hasButton || !!this.confirmLabel || !!this.dismissLabel,\n }\n return html`\n <div class=\"${classMap(classes)}\" part=\"button\">\n <slot name=\"button\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n ${this.#renderDismissButton()} ${this.#renderConfirmButton()}\n </div>\n `\n }\n\n #renderDismissButton(): TemplateResult | typeof nothing {\n const { dismissLabel } = this\n if (!dismissLabel) {\n return nothing\n }\n return html`\n <ui-button\n color=\"text\"\n value=\"dismiss\"\n class=\"internal-button\"\n @click=\"${this.handleDismiss}\"\n part=\"negative-action\"\n >${dismissLabel}</ui-button\n >\n `\n }\n\n #renderConfirmButton(): TemplateResult | typeof nothing {\n const { confirmLabel, confirmValue = 'confirm', useForm, destructive } = this\n if (!confirmLabel) {\n return nothing\n }\n const type = useForm ? 'submit' : 'button'\n const buttonClass = destructive ? 'internal-button destructive' : 'internal-button'\n return html`\n <ui-button\n color=\"text\"\n type=\"${type}\"\n value=\"${confirmValue}\"\n class=\"${buttonClass}\"\n @click=\"${this.handleConfirm}\"\n part=\"positive-action\"\n >${confirmLabel}</ui-button\n >\n `\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, type PropertyValues, type TemplateResult } from 'lit'\nimport { property, query, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js'\nimport { type ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../UiElement.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport type UiButton from '../../button/internals/button.js'\nimport type { TypedEvents } from '../../../core/types.js'\nimport type { ButtonType } from '../../button/internals/button.js'\nimport '../../button/ui-button.js'\nimport { bound } from '../../../decorators/bound.js'\n\nexport interface UiDialogClosingReason {\n /**\n * Whether the dialog was cancelled by either activating the `dismiss` button\n * or by pressing escape.\n */\n cancelled: boolean\n /**\n * This is used in cases when the dialog has more complex purpose.\n * This is the value expected from the dialog.\n */\n value?: unknown\n}\n\ninterface DialogEventMap {\n closing: CustomEvent<UiDialogClosingReason>\n close: CustomEvent<UiDialogClosingReason>\n}\n\nexport type RenderFunction = () => TemplateResult\n\n/**\n * Styled dialog using a native `<dialog>` element under the hood.\n * Note, since native dialog renders in the top layer it is not necessary\n * to place the dialog in the `<body>`.\n *\n * **Using Buttons**\n *\n * The dialog automatically recognizes buttons with values `confirm` and `dismiss`\n * to close the dialog and dispatch the `close` event. The event has additional\n * closing reason detail.\n *\n * ```javascript\n * <ui-button slot=\"button\" color=\"text\" value=\"dismiss\">Cancel</ui-button>\n * <ui-button slot=\"button\" color=\"text\" value=\"confirm\">Take action</ui-button>\n * ```\n *\n * ```javascript\n * <button value=\"dismiss\">Cancel</button>\n * <button value=\"confirm\">Take action</button>\n * ```\n *\n * The detail object of the `close` event has the following properties:\n * - cancelled - Whether the dialog was cancelled by either activating the `dismiss` button or by pressing escape.\n *\n * The `close` event is only dispatched when the user interact with the dialog. Imperative control of the\n * dialog won't trigger the close button.\n *\n * ** Full example**\n *\n * ```javascript\n * <ui-dialog modal>\n * <ui-icon slot=\"icon\" icon=\"delete\"></ui-icon>\n *\n * <span slot=\"title\">Delete photos?</span>\n * <p>This action will permanently remove the selected pictures from your account.</p>\n *\n * <ui-button color=\"text\" slot=\"button\" value=\"dismiss\" type=\"text\">Cancel</ui-button>\n * <ui-button color=\"text\" slot=\"button\" value=\"confirm\" type=\"text\">Confirm</ui-button>\n * </ui-dialog>\n * ```\n *\n * @slot - The slot for the content of the dialog.\n * @slot icon - The slot to place the dialog icon\n * @slot title - The slot to place the dialog title. Do not put elements here, just the text.\n * @slot button - The slot to place the dialog buttons. Use the `confirm` or `dismiss`\n * buttons to automatically close the dialog.\n * @fires closing - A cancelable, non-bubbling event with the `UiDialogClosingReason` as the detail,\n * dispatched before the dialog closes. If prevented, the dialog will not close.\n * @fires close - A non-bubbling, non-cancellable event with the `UiDialogClosingReason` as the detail.\n */\nexport default class UiDialog extends UiElement implements TypedEvents<DialogEventMap> {\n get disabled(): boolean {\n return isDisabled(this)\n }\n\n /**\n * When set, the button is a disabled state.\n * @attribute\n */\n @property({ reflect: true, type: Boolean })\n set disabled(value: boolean) {\n const old = isDisabled(this)\n setDisabled(this, value)\n this.requestUpdate('disabled', old)\n }\n\n /**\n * Opens the dialog as modal when toggling dialog's open state.\n *\n * Setting this value after the dialog was opened has no effect.\n *\n * @attribute\n */\n @property({ type: Boolean }) accessor modal = false\n\n /**\n * Toggles visibility of the dialog.\n * Note, the dialog is opened asynchronously after the update is performed.\n * @attribute\n */\n @property({ type: Boolean }) accessor open = false\n\n /**\n * Imperative access to create a dismiss button.\n * When set this will render a dismiss button at the end of the buttons line, before the `confirmLabel` button.\n * @attribute\n */\n @property({ type: String }) accessor dismissLabel: string | undefined\n\n /**\n * Imperative access to create a confirm button.\n * When set this will render a confirm button at the end of the buttons line, after the `dismissLabel` button.\n * @attribute\n */\n @property({ type: String }) accessor confirmLabel: string | undefined\n\n /**\n * When true, styles the confirm button with error colors to indicate\n * a destructive action (e.g., delete, remove, etc.).\n * @attribute\n */\n @property({ type: Boolean }) accessor destructive = false\n\n /**\n * Only when `confirmLabel` is set.\n * Defines the value associated with the button's name when it's submitted with the form data.\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value}\n * @attribute\n */\n @property({ type: String }) accessor confirmValue: string | undefined\n\n /**\n * The type of the confirm button.\n * This is used to set the button's `type` attribute.\n * If not set, the default is `button`.\n * If set to `submit`, the dialog will trigger the form submission on the parent form.\n * @attribute\n */\n @property({ type: String }) accessor confirmType: ButtonType | undefined\n /**\n * When the dialog is wrapped in a form, set this to `true` to close the dialog\n * when the form is submitted.\n *\n * Note that the dialog doesn't perform any validation of the form. It only closes\n * when the form is submitted, regardless of the application logic. The `submit` event\n * is dispatched by the dialog when the form is valid.\n * @attribute\n */\n @property({ type: Boolean }) accessor submitClose: boolean | undefined\n\n /**\n * A reference to the underlying dialog element.\n */\n @query('dialog') accessor dialog!: HTMLDialogElement\n\n @state() protected accessor hasIcon = false\n\n @state() protected accessor hasTitle = false\n\n @state() protected accessor hasButton = false\n\n @queryAssignedElements({ flatten: true, slot: 'icon' }) protected accessor icons!: HTMLElement[]\n\n @queryAssignedNodes({ flatten: true, slot: 'title' }) protected accessor titles!: HTMLElement[]\n\n @queryAssignedElements({ flatten: true, slot: 'button' }) protected accessor buttons!: HTMLElement[]\n\n /**\n * To be set by a child class when closing the dialog.\n * This is passed to the close event.\n */\n dialogValue?: unknown\n\n /**\n * A reference to the parent form element.\n * When a form is found, the dialog will hook into the form's submit event\n * and close the dialog when the form is submitted.\n * Since the `submit` event is dispatched when the form is valid,\n * we can use this to close the dialog and not worry about the form validation.\n */\n #form: HTMLFormElement | null = null\n\n constructor() {\n super()\n\n this.addEventListener('click', this.handleClick)\n this.addEventListener('keydown', this.handleKeyDown)\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n this.#form = this.closest('form')\n if (this.#form) {\n this.#form.addEventListener('submit', this.handleFormSubmit)\n }\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback()\n if (this.#form) {\n this.#form.removeEventListener('submit', this.handleFormSubmit)\n this.#form = null\n }\n }\n\n @bound\n protected handleFormSubmit(): void {\n if (this.submitClose) {\n this.handleInteraction('confirm')\n }\n }\n\n override handleClick(e: MouseEvent): void {\n super.handleClick(e)\n const path = e.composedPath()\n const { buttons } = this\n const button = path.find((i) => buttons.includes(i as HTMLElement)) as HTMLButtonElement | UiButton | undefined\n if (!button) {\n return\n }\n if (button.type === 'submit') {\n // Adds support for forms.\n // When a form's submit button is clicked we yield the flow control to the form.\n // This way the form can handle the submit event.\n return\n }\n const { value = '' } = button\n this.handleInteraction(value as 'dismiss' | 'confirm')\n }\n\n override handleKeyDown(e: KeyboardEvent): void {\n super.handleKeyDown(e)\n if (e.defaultPrevented) {\n return\n }\n if (e.key === 'Escape') {\n this.handleInteraction('dismiss')\n }\n }\n\n override updated(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has('open')) {\n this.#controlVisibility()\n }\n super.updated(changedProperties)\n }\n\n #controlVisibility(): void {\n const { dialog, modal, open } = this\n if (!dialog) {\n return\n }\n if (open) {\n if (modal) {\n dialog.showModal()\n } else {\n dialog.show()\n }\n } else {\n dialog.close()\n }\n }\n\n #handleSlotChange(): void {\n const { icons, titles, buttons } = this\n this.hasIcon = !!icons && !!icons.length\n this.hasTitle = !!titles && !!titles.length\n this.hasButton = !!buttons && !!buttons.length\n }\n\n protected handleInteraction(value: 'dismiss' | 'confirm'): void {\n if (!['dismiss', 'confirm'].includes(value)) {\n return\n }\n\n const detail: UiDialogClosingReason = {\n cancelled: value === 'dismiss',\n }\n if (this.dialogValue !== undefined) {\n detail.value = this.dialogValue\n }\n\n // Dispatch cancelable closing event first\n const closingEvent = new CustomEvent<UiDialogClosingReason>('closing', {\n cancelable: true,\n composed: false,\n bubbles: false,\n detail,\n })\n const canClose = this.dispatchEvent(closingEvent)\n\n // Only proceed with closing if the event wasn't canceled\n if (!canClose) {\n return\n }\n\n this.open = false\n this.dispatchEvent(\n new CustomEvent<UiDialogClosingReason>('close', {\n composed: true,\n detail,\n })\n )\n }\n\n protected handleDialogClose(): void {\n if (!this.open) {\n return\n }\n\n const detail: UiDialogClosingReason = {\n cancelled: true,\n }\n if (this.dialogValue !== undefined) {\n detail.value = this.dialogValue\n }\n\n // Dispatch cancelable closing event first\n const closingEvent = new CustomEvent<UiDialogClosingReason>('closing', {\n cancelable: true,\n composed: false,\n bubbles: false,\n detail,\n })\n const canClose = this.dispatchEvent(closingEvent)\n\n // Only proceed with closing if the event wasn't canceled\n if (!canClose) {\n // If closing was prevented, reopen the dialog\n this.dialog.showModal()\n return\n }\n\n this.open = false\n this.dispatchEvent(\n new CustomEvent<UiDialogClosingReason>('close', {\n composed: true,\n detail,\n })\n )\n }\n\n protected handleDismiss(): void {\n this.handleInteraction('dismiss')\n }\n\n protected handleConfirm(): void {\n this.handleInteraction('confirm')\n }\n\n override render(): TemplateResult {\n const { modal } = this\n const dialogClass = modal ? 'modal' : 'non-modal'\n return html`\n <dialog @close=\"${this.handleDialogClose}\" part=\"dialog\" class=\"${dialogClass}\">\n <div class=\"container\">${this.renderContent()}</div>\n </dialog>\n `\n }\n\n protected renderContent(): TemplateResult[] | TemplateResult {\n return [this.renderIcon(), this.renderTitle(), this.renderBody(), this.renderButtons()]\n }\n\n protected renderIcon(): TemplateResult {\n const classes: ClassInfo = {\n 'icon': true,\n 'with-icon': this.hasIcon,\n 'destructive': this.destructive,\n }\n return html`\n <div class=\"${classMap(classes)}\" part=\"icon\">\n <slot name=\"icon\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n </div>\n `\n }\n\n protected renderTitle(): TemplateResult {\n const classes: ClassInfo = {\n 'title': true,\n 'with-title': this.hasTitle,\n }\n return html`\n <div class=\"${classMap(classes)}\" part=\"title\">\n <slot name=\"title\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n </div>\n `\n }\n\n protected renderBody(): TemplateResult {\n return html` <div class=\"content\" part=\"body\"><slot></slot></div> `\n }\n\n protected renderButtons(): TemplateResult {\n const classes: ClassInfo = {\n 'buttons': true,\n 'with-buttons': this.hasButton || !!this.confirmLabel || !!this.dismissLabel,\n }\n return html`\n <div class=\"${classMap(classes)}\" part=\"button\">\n <slot name=\"button\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n ${this.#renderDismissButton()} ${this.#renderConfirmButton()}\n </div>\n `\n }\n\n #renderDismissButton(): TemplateResult | typeof nothing {\n const { dismissLabel } = this\n if (!dismissLabel) {\n return nothing\n }\n return html`\n <ui-button\n color=\"text\"\n value=\"dismiss\"\n class=\"internal-button\"\n @click=\"${this.handleDismiss}\"\n part=\"negative-action\"\n >${dismissLabel}</ui-button\n >\n `\n }\n\n #renderConfirmButton(): TemplateResult | typeof nothing {\n const { confirmLabel, confirmValue = 'confirm', destructive } = this\n if (!confirmLabel) {\n return nothing\n }\n const type = this.confirmType ?? 'button'\n const buttonClass = destructive ? 'internal-button destructive' : 'internal-button'\n return html`\n <ui-button\n color=\"text\"\n type=\"${type}\"\n value=\"${confirmValue}\"\n class=\"${buttonClass}\"\n @click=\"${this.handleConfirm}\"\n part=\"positive-action\"\n >${confirmLabel}</ui-button\n >\n `\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { html, nothing, type PropertyValues, type TemplateResult } from 'lit'
|
|
2
2
|
import { property, query, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js'
|
|
3
3
|
import { type ClassInfo, classMap } from 'lit/directives/class-map.js'
|
|
4
4
|
import { UiElement } from '../../UiElement.js'
|
|
5
5
|
import { isDisabled, setDisabled } from '../../../lib/disabled.js'
|
|
6
6
|
import type UiButton from '../../button/internals/button.js'
|
|
7
7
|
import type { TypedEvents } from '../../../core/types.js'
|
|
8
|
-
import {
|
|
9
|
-
import { SyntheticSubmitEvent } from '../../../events/SyntheticSubmitEvent.js'
|
|
8
|
+
import type { ButtonType } from '../../button/internals/button.js'
|
|
10
9
|
import '../../button/ui-button.js'
|
|
11
10
|
import { bound } from '../../../decorators/bound.js'
|
|
12
11
|
|
|
@@ -42,8 +41,8 @@ export type RenderFunction = () => TemplateResult
|
|
|
42
41
|
* closing reason detail.
|
|
43
42
|
*
|
|
44
43
|
* ```javascript
|
|
45
|
-
* <ui-button color="text" value="dismiss">Cancel</ui-button>
|
|
46
|
-
* <ui-button color="text" value="confirm">Take action</ui-button>
|
|
44
|
+
* <ui-button slot="button" color="text" value="dismiss">Cancel</ui-button>
|
|
45
|
+
* <ui-button slot="button" color="text" value="confirm">Take action</ui-button>
|
|
47
46
|
* ```
|
|
48
47
|
*
|
|
49
48
|
* ```javascript
|
|
@@ -133,26 +132,6 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
|
|
|
133
132
|
*/
|
|
134
133
|
@property({ type: Boolean }) accessor destructive = false
|
|
135
134
|
|
|
136
|
-
/**
|
|
137
|
-
* Part of the imperative access to the element.
|
|
138
|
-
* When set, it wraps the content in a `<form>` element.
|
|
139
|
-
* When this is enabled the following will happen:
|
|
140
|
-
* - The `confirm` button will get `type="submit"`
|
|
141
|
-
* - The form `method` attribute is set to `dialog`
|
|
142
|
-
* - The form `id` attribute is set to a random string. You can get it from the `formId` getter.
|
|
143
|
-
* - The dialog will dispatch the same `submit` event as the form.
|
|
144
|
-
* - When the `submit` event dispatched by the dialog gets cancelled, then:
|
|
145
|
-
* - The original submit event also gets cancelled.
|
|
146
|
-
* - The default confirm action is not invoked
|
|
147
|
-
* - The dialog stays opened
|
|
148
|
-
* - When the submit event is not cancelled, then:
|
|
149
|
-
* - The default confirm action is invoked.
|
|
150
|
-
* - The dialog is closed.
|
|
151
|
-
*
|
|
152
|
-
* @deprecated Wrap the content in a `<form>` element instead.
|
|
153
|
-
*/
|
|
154
|
-
@property({ type: Boolean }) accessor useForm: boolean | undefined
|
|
155
|
-
|
|
156
135
|
/**
|
|
157
136
|
* Only when `confirmLabel` is set.
|
|
158
137
|
* Defines the value associated with the button's name when it's submitted with the form data.
|
|
@@ -160,6 +139,15 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
|
|
|
160
139
|
* @attribute
|
|
161
140
|
*/
|
|
162
141
|
@property({ type: String }) accessor confirmValue: string | undefined
|
|
142
|
+
|
|
143
|
+
/**
|
|
144
|
+
* The type of the confirm button.
|
|
145
|
+
* This is used to set the button's `type` attribute.
|
|
146
|
+
* If not set, the default is `button`.
|
|
147
|
+
* If set to `submit`, the dialog will trigger the form submission on the parent form.
|
|
148
|
+
* @attribute
|
|
149
|
+
*/
|
|
150
|
+
@property({ type: String }) accessor confirmType: ButtonType | undefined
|
|
163
151
|
/**
|
|
164
152
|
* When the dialog is wrapped in a form, set this to `true` to close the dialog
|
|
165
153
|
* when the form is submitted.
|
|
@@ -167,6 +155,7 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
|
|
|
167
155
|
* Note that the dialog doesn't perform any validation of the form. It only closes
|
|
168
156
|
* when the form is submitted, regardless of the application logic. The `submit` event
|
|
169
157
|
* is dispatched by the dialog when the form is valid.
|
|
158
|
+
* @attribute
|
|
170
159
|
*/
|
|
171
160
|
@property({ type: Boolean }) accessor submitClose: boolean | undefined
|
|
172
161
|
|
|
@@ -193,25 +182,6 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
|
|
|
193
182
|
*/
|
|
194
183
|
dialogValue?: unknown
|
|
195
184
|
|
|
196
|
-
#formId?: string
|
|
197
|
-
|
|
198
|
-
/**
|
|
199
|
-
* @deprecated Use `useForm` instead.
|
|
200
|
-
*/
|
|
201
|
-
get formId(): string | undefined {
|
|
202
|
-
return this.#formId
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
/**
|
|
206
|
-
* @deprecated This will be removed in the future.
|
|
207
|
-
*/
|
|
208
|
-
@state() accessor #inject: TemplateResult | RenderFunction | undefined
|
|
209
|
-
|
|
210
|
-
/**
|
|
211
|
-
* @deprecated This will be removed in the future.
|
|
212
|
-
*/
|
|
213
|
-
#pendingStyles?: CSSResultOrNative[]
|
|
214
|
-
|
|
215
185
|
/**
|
|
216
186
|
* A reference to the parent form element.
|
|
217
187
|
* When a form is found, the dialog will hook into the form's submit event
|
|
@@ -228,29 +198,6 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
|
|
|
228
198
|
this.addEventListener('keydown', this.handleKeyDown)
|
|
229
199
|
}
|
|
230
200
|
|
|
231
|
-
/**
|
|
232
|
-
* Allows to inject a template into the internals of the element.
|
|
233
|
-
* This is helpful when working with imperative dialogs.
|
|
234
|
-
* @param content The content to inject into the body.
|
|
235
|
-
* @deprecated This will be removed in the future. To use forms, wrap the content in a `<form>` element.
|
|
236
|
-
*/
|
|
237
|
-
inject(content?: TemplateResult | RenderFunction, styles?: CSSResultOrNative[]): void {
|
|
238
|
-
this.#inject = content
|
|
239
|
-
if (styles) {
|
|
240
|
-
if (this.shadowRoot) {
|
|
241
|
-
adoptStyles(this.shadowRoot, styles)
|
|
242
|
-
} else {
|
|
243
|
-
if (!this.#pendingStyles) {
|
|
244
|
-
this.#pendingStyles = []
|
|
245
|
-
}
|
|
246
|
-
this.#pendingStyles.push(...styles)
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
if (this.shadowRoot && styles) {
|
|
250
|
-
adoptStyles(this.shadowRoot, styles)
|
|
251
|
-
}
|
|
252
|
-
}
|
|
253
|
-
|
|
254
201
|
override connectedCallback(): void {
|
|
255
202
|
super.connectedCallback()
|
|
256
203
|
this.#form = this.closest('form')
|
|
@@ -267,22 +214,6 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
|
|
|
267
214
|
}
|
|
268
215
|
}
|
|
269
216
|
|
|
270
|
-
protected override firstUpdated(): void {
|
|
271
|
-
const styles = this.#pendingStyles
|
|
272
|
-
if (styles) {
|
|
273
|
-
const root = this.shadowRoot as ShadowRoot
|
|
274
|
-
const all = [...root.adoptedStyleSheets, ...styles]
|
|
275
|
-
adoptStyles(this.shadowRoot as ShadowRoot, all)
|
|
276
|
-
}
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
override willUpdate(cp: PropertyValues<this>): void {
|
|
280
|
-
if (cp.has('useForm') && this.useForm && !this.#formId) {
|
|
281
|
-
const r = (Math.random() + 1).toString(36).substring(7)
|
|
282
|
-
this.#formId = `form-${r}`
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
|
|
286
217
|
@bound
|
|
287
218
|
protected handleFormSubmit(): void {
|
|
288
219
|
if (this.submitClose) {
|
|
@@ -425,33 +356,15 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
|
|
|
425
356
|
}
|
|
426
357
|
|
|
427
358
|
protected handleConfirm(): void {
|
|
428
|
-
|
|
429
|
-
this.handleInteraction('confirm')
|
|
430
|
-
}
|
|
431
|
-
}
|
|
432
|
-
|
|
433
|
-
#handleSubmit(event: SubmitEvent): void {
|
|
434
|
-
const form = event.target as HTMLFormElement
|
|
435
|
-
const copy = new SyntheticSubmitEvent(event.type, form, {
|
|
436
|
-
submitter: event.submitter,
|
|
437
|
-
cancelable: true,
|
|
438
|
-
bubbles: false,
|
|
439
|
-
composed: false,
|
|
440
|
-
})
|
|
441
|
-
const dispatched = this.dispatchEvent(copy)
|
|
442
|
-
if (dispatched) {
|
|
443
|
-
this.handleInteraction('confirm')
|
|
444
|
-
} else {
|
|
445
|
-
event.preventDefault()
|
|
446
|
-
}
|
|
359
|
+
this.handleInteraction('confirm')
|
|
447
360
|
}
|
|
448
361
|
|
|
449
362
|
override render(): TemplateResult {
|
|
450
|
-
const {
|
|
363
|
+
const { modal } = this
|
|
451
364
|
const dialogClass = modal ? 'modal' : 'non-modal'
|
|
452
365
|
return html`
|
|
453
366
|
<dialog @close="${this.handleDialogClose}" part="dialog" class="${dialogClass}">
|
|
454
|
-
<div class="container">${
|
|
367
|
+
<div class="container">${this.renderContent()}</div>
|
|
455
368
|
</dialog>
|
|
456
369
|
`
|
|
457
370
|
}
|
|
@@ -460,14 +373,6 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
|
|
|
460
373
|
return [this.renderIcon(), this.renderTitle(), this.renderBody(), this.renderButtons()]
|
|
461
374
|
}
|
|
462
375
|
|
|
463
|
-
#renderFormContent(): TemplateResult {
|
|
464
|
-
return html`
|
|
465
|
-
<form id="${ifDefined(this.formId)}" method="dialog" @submit="${this.#handleSubmit}" part="form">
|
|
466
|
-
${this.renderContent()}
|
|
467
|
-
</form>
|
|
468
|
-
`
|
|
469
|
-
}
|
|
470
|
-
|
|
471
376
|
protected renderIcon(): TemplateResult {
|
|
472
377
|
const classes: ClassInfo = {
|
|
473
378
|
'icon': true,
|
|
@@ -494,12 +399,7 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
|
|
|
494
399
|
}
|
|
495
400
|
|
|
496
401
|
protected renderBody(): TemplateResult {
|
|
497
|
-
|
|
498
|
-
if (typeof content === 'function') {
|
|
499
|
-
content = content()
|
|
500
|
-
}
|
|
501
|
-
const injected = content || nothing
|
|
502
|
-
return html` <div class="content" part="body"><slot></slot>${injected}</div> `
|
|
402
|
+
return html` <div class="content" part="body"><slot></slot></div> `
|
|
503
403
|
}
|
|
504
404
|
|
|
505
405
|
protected renderButtons(): TemplateResult {
|
|
@@ -533,11 +433,11 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
|
|
|
533
433
|
}
|
|
534
434
|
|
|
535
435
|
#renderConfirmButton(): TemplateResult | typeof nothing {
|
|
536
|
-
const { confirmLabel, confirmValue = 'confirm',
|
|
436
|
+
const { confirmLabel, confirmValue = 'confirm', destructive } = this
|
|
537
437
|
if (!confirmLabel) {
|
|
538
438
|
return nothing
|
|
539
439
|
}
|
|
540
|
-
const type =
|
|
440
|
+
const type = this.confirmType ?? 'button'
|
|
541
441
|
const buttonClass = destructive ? 'internal-button destructive' : 'internal-button'
|
|
542
442
|
return html`
|
|
543
443
|
<ui-button
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export declare class SyntheticSubmitEvent extends Event {
|
|
2
|
-
#private;
|
|
3
|
-
constructor(type: string, form: HTMLFormElement, eventInitDict?: SubmitEventInit);
|
|
4
|
-
get form(): HTMLFormElement;
|
|
5
|
-
get submitter(): HTMLElement | null | undefined;
|
|
6
|
-
get target(): HTMLFormElement;
|
|
7
|
-
get currentTarget(): HTMLFormElement;
|
|
8
|
-
}
|
|
9
|
-
//# sourceMappingURL=SyntheticSubmitEvent.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SyntheticSubmitEvent.d.ts","sourceRoot":"","sources":["../../../src/events/SyntheticSubmitEvent.ts"],"names":[],"mappings":"AAAA,qBAAa,oBAAqB,SAAQ,KAAK;;gBAKjC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,eAAe,EAAE,aAAa,CAAC,EAAE,eAAe;IAMhF,IAAI,IAAI,IAAI,eAAe,CAE1B;IAED,IAAI,SAAS,IAAI,WAAW,GAAG,IAAI,GAAG,SAAS,CAE9C;IAED,IAAa,MAAM,IAAI,eAAe,CAErC;IAED,IAAa,aAAa,IAAI,eAAe,CAE5C;CACF"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
export class SyntheticSubmitEvent extends Event {
|
|
2
|
-
#form;
|
|
3
|
-
#submitter;
|
|
4
|
-
constructor(type, form, eventInitDict) {
|
|
5
|
-
super(type, eventInitDict);
|
|
6
|
-
this.#form = form;
|
|
7
|
-
this.#submitter = eventInitDict?.submitter;
|
|
8
|
-
}
|
|
9
|
-
get form() {
|
|
10
|
-
return this.#form;
|
|
11
|
-
}
|
|
12
|
-
get submitter() {
|
|
13
|
-
return this.#submitter;
|
|
14
|
-
}
|
|
15
|
-
get target() {
|
|
16
|
-
return this.#form;
|
|
17
|
-
}
|
|
18
|
-
get currentTarget() {
|
|
19
|
-
return this.#form;
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
//# sourceMappingURL=SyntheticSubmitEvent.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SyntheticSubmitEvent.js","sourceRoot":"","sources":["../../../src/events/SyntheticSubmitEvent.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,oBAAqB,SAAQ,KAAK;IAC7C,KAAK,CAAiB;IAEtB,UAAU,CAAqB;IAE/B,YAAY,IAAY,EAAE,IAAqB,EAAE,aAA+B;QAC9E,KAAK,CAAC,IAAI,EAAE,aAAa,CAAC,CAAA;QAC1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;QACjB,IAAI,CAAC,UAAU,GAAG,aAAa,EAAE,SAAS,CAAA;IAC5C,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,KAAK,CAAA;IACnB,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,UAAU,CAAA;IACxB,CAAC;IAED,IAAa,MAAM;QACjB,OAAO,IAAI,CAAC,KAAK,CAAA;IACnB,CAAC;IAED,IAAa,aAAa;QACxB,OAAO,IAAI,CAAC,KAAK,CAAA;IACnB,CAAC;CACF","sourcesContent":["export class SyntheticSubmitEvent extends Event {\n #form: HTMLFormElement\n\n #submitter?: HTMLElement | null\n\n constructor(type: string, form: HTMLFormElement, eventInitDict?: SubmitEventInit) {\n super(type, eventInitDict)\n this.#form = form\n this.#submitter = eventInitDict?.submitter\n }\n\n get form(): HTMLFormElement {\n return this.#form\n }\n\n get submitter(): HTMLElement | null | undefined {\n return this.#submitter\n }\n\n override get target(): HTMLFormElement {\n return this.#form\n }\n\n override get currentTarget(): HTMLFormElement {\n return this.#form\n }\n}\n"]}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
export class SyntheticSubmitEvent extends Event {
|
|
2
|
-
#form: HTMLFormElement
|
|
3
|
-
|
|
4
|
-
#submitter?: HTMLElement | null
|
|
5
|
-
|
|
6
|
-
constructor(type: string, form: HTMLFormElement, eventInitDict?: SubmitEventInit) {
|
|
7
|
-
super(type, eventInitDict)
|
|
8
|
-
this.#form = form
|
|
9
|
-
this.#submitter = eventInitDict?.submitter
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
get form(): HTMLFormElement {
|
|
13
|
-
return this.#form
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
get submitter(): HTMLElement | null | undefined {
|
|
17
|
-
return this.#submitter
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
override get target(): HTMLFormElement {
|
|
21
|
-
return this.#form
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
override get currentTarget(): HTMLFormElement {
|
|
25
|
-
return this.#form
|
|
26
|
-
}
|
|
27
|
-
}
|