@universal-material/web 3.0.69 → 3.0.71
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/app-bar/top-app-bar.js +3 -2
- package/app-bar/top-app-bar.js.map +1 -1
- package/button/button-base.d.ts +1 -0
- package/button/button-base.d.ts.map +1 -1
- package/button/button-base.js +7 -18
- package/button/button-base.js.map +1 -1
- package/button/button-base.styles.d.ts +2 -0
- package/button/button-base.styles.d.ts.map +1 -0
- package/button/button-base.styles.js +16 -0
- package/button/button-base.styles.js.map +1 -0
- package/button/button-set.d.ts +1 -1
- package/button/button-set.d.ts.map +1 -1
- package/button/button-set.js +1 -1
- package/button/button-set.js.map +1 -1
- package/button/button-set.styles.d.ts.map +1 -1
- package/button/button-set.styles.js +0 -19
- package/button/button-set.styles.js.map +1 -1
- package/button/button.d.ts +2 -2
- package/button/button.d.ts.map +1 -1
- package/button/button.js +1 -1
- package/button/button.js.map +1 -1
- package/button/button.styles.d.ts.map +1 -1
- package/button/button.styles.js +0 -100
- package/button/button.styles.js.map +1 -1
- package/button/fab.d.ts +2 -2
- package/button/fab.d.ts.map +1 -1
- package/button/fab.js +1 -1
- package/button/fab.js.map +1 -1
- package/button/fab.styles.d.ts.map +1 -1
- package/button/fab.styles.js +0 -100
- package/button/fab.styles.js.map +1 -1
- package/button/icon-button.d.ts +2 -2
- package/button/icon-button.d.ts.map +1 -1
- package/button/icon-button.js +1 -1
- package/button/icon-button.js.map +1 -1
- package/button/icon-button.styles.d.ts.map +1 -1
- package/button/icon-button.styles.js +0 -100
- package/button/icon-button.styles.js.map +1 -1
- package/card/card-content.js +1 -1
- package/card/card-content.js.map +1 -1
- package/card/card-media.js +1 -1
- package/card/card-media.js.map +1 -1
- package/card/card.js +1 -1
- package/card/card.js.map +1 -1
- package/checkbox/checkbox.js +8 -20
- package/checkbox/checkbox.js.map +1 -1
- package/chip/chip-set.d.ts +1 -1
- package/chip/chip-set.d.ts.map +1 -1
- package/chip/chip-set.js +1 -1
- package/chip/chip-set.js.map +1 -1
- package/chip/chip-set.styles.d.ts.map +1 -1
- package/chip/chip-set.styles.js +0 -19
- package/chip/chip-set.styles.js.map +1 -1
- package/chip/chip.d.ts +1 -1
- package/chip/chip.d.ts.map +1 -1
- package/chip/chip.js +39 -54
- package/chip/chip.js.map +1 -1
- package/chip/chip.styles.d.ts.map +1 -1
- package/chip/chip.styles.js +0 -87
- package/chip/chip.styles.js.map +1 -1
- package/chip-field/chip-field.js +72 -86
- package/chip-field/chip-field.js.map +1 -1
- package/custom-elements.json +3207 -2538
- package/dialog/confirm-dialog-builder.js +6 -22
- package/dialog/confirm-dialog-builder.js.map +1 -1
- package/dialog/dialog-builder.js +4 -17
- package/dialog/dialog-builder.js.map +1 -1
- package/dialog/dialog.js +65 -80
- package/dialog/dialog.js.map +1 -1
- package/dialog/message-dialog-builder.js +3 -19
- package/dialog/message-dialog-builder.js.map +1 -1
- package/elevation/elevation.js +1 -1
- package/elevation/elevation.js.map +1 -1
- package/field/field-base.d.ts +2 -2
- package/field/field-base.d.ts.map +1 -1
- package/field/field-base.js +13 -16
- package/field/field-base.js.map +1 -1
- package/field/field-base.styles.js +1 -1
- package/field/field-base.styles.js.map +1 -1
- package/list/list-item.js +1 -1
- package/list/list-item.js.map +1 -1
- package/list/list.js +1 -1
- package/list/list.js.map +1 -1
- package/menu/menu-item.d.ts +12 -6
- package/menu/menu-item.d.ts.map +1 -1
- package/menu/menu-item.js +49 -31
- package/menu/menu-item.js.map +1 -1
- package/menu/menu-item.styles.d.ts.map +1 -1
- package/menu/menu-item.styles.js +15 -90
- package/menu/menu-item.styles.js.map +1 -1
- package/menu/menu.d.ts.map +1 -1
- package/menu/menu.js +129 -134
- package/menu/menu.js.map +1 -1
- package/navigation/drawer-item.d.ts +1 -1
- package/navigation/drawer-item.d.ts.map +1 -1
- package/navigation/drawer-item.js +4 -5
- package/navigation/drawer-item.js.map +1 -1
- package/navigation/drawer-item.styles.d.ts.map +1 -1
- package/navigation/drawer-item.styles.js +0 -87
- package/navigation/drawer-item.styles.js.map +1 -1
- package/navigation/drawer.js +4 -4
- package/navigation/drawer.js.map +1 -1
- package/navigation/side-navigation.js +8 -20
- package/navigation/side-navigation.js.map +1 -1
- package/package.json +18 -18
- package/progress/circular-progress.d.ts +1 -2
- package/progress/circular-progress.d.ts.map +1 -1
- package/progress/circular-progress.js +19 -27
- package/progress/circular-progress.js.map +1 -1
- package/progress/progress-bar.d.ts +1 -2
- package/progress/progress-bar.d.ts.map +1 -1
- package/progress/progress-bar.js +12 -20
- package/progress/progress-bar.js.map +1 -1
- package/radio/radio.js +53 -61
- package/radio/radio.js.map +1 -1
- package/ripple/ripple.js +3 -2
- package/ripple/ripple.js.map +1 -1
- package/select/extended-option.d.ts +5 -0
- package/select/extended-option.d.ts.map +1 -0
- package/select/extended-option.js +2 -0
- package/select/extended-option.js.map +1 -0
- package/select/extended-select.d.ts +6 -0
- package/select/extended-select.d.ts.map +1 -0
- package/select/extended-select.js +2 -0
- package/select/extended-select.js.map +1 -0
- package/select/option.d.ts +10 -0
- package/select/option.d.ts.map +1 -1
- package/select/option.js +84 -74
- package/select/option.js.map +1 -1
- package/select/option.styles.d.ts.map +1 -1
- package/select/option.styles.js +10 -0
- package/select/option.styles.js.map +1 -1
- package/select/select-navigation-controller.d.ts +10 -2
- package/select/select-navigation-controller.d.ts.map +1 -1
- package/select/select-navigation-controller.js +66 -3
- package/select/select-navigation-controller.js.map +1 -1
- package/select/select.d.ts +10 -4
- package/select/select.d.ts.map +1 -1
- package/select/select.js +179 -68
- package/select/select.js.map +1 -1
- package/select/select.styles.d.ts.map +1 -1
- package/select/select.styles.js +15 -6
- package/select/select.styles.js.map +1 -1
- package/shared/button-wrapper.d.ts +2 -0
- package/shared/button-wrapper.d.ts.map +1 -1
- package/shared/button-wrapper.js +18 -22
- package/shared/button-wrapper.js.map +1 -1
- package/shared/button-wrapper.styles.d.ts +2 -0
- package/shared/button-wrapper.styles.d.ts.map +1 -0
- package/shared/button-wrapper.styles.js +63 -0
- package/shared/button-wrapper.styles.js.map +1 -0
- package/shared/compare-text.d.ts +2 -0
- package/shared/compare-text.d.ts.map +1 -0
- package/shared/compare-text.js +5 -0
- package/shared/compare-text.js.map +1 -0
- package/shared/menu-field/menu-field-navigation-controller.d.ts +11 -4
- package/shared/menu-field/menu-field-navigation-controller.d.ts.map +1 -1
- package/shared/menu-field/menu-field-navigation-controller.js +56 -31
- package/shared/menu-field/menu-field-navigation-controller.js.map +1 -1
- package/shared/mixin-attribute-properties.d.ts.map +1 -1
- package/shared/normalize-text.d.ts +1 -1
- package/shared/normalize-text.d.ts.map +1 -1
- package/shared/normalize-text.js +1 -1
- package/shared/normalize-text.js.map +1 -1
- package/shared/selection-control/selection-control-list-item.d.ts.map +1 -1
- package/shared/selection-control/selection-control-list-item.js +7 -7
- package/shared/selection-control/selection-control-list-item.js.map +1 -1
- package/shared/selection-control/selection-control.js +16 -28
- package/shared/selection-control/selection-control.js.map +1 -1
- package/shared/sets/set-base.d.ts +2 -0
- package/shared/sets/set-base.d.ts.map +1 -1
- package/shared/sets/set-base.js +2 -0
- package/shared/sets/set-base.js.map +1 -1
- package/shared/sets/set-base.styles.d.ts +2 -0
- package/shared/sets/set-base.styles.d.ts.map +1 -0
- package/shared/sets/set-base.styles.js +22 -0
- package/shared/sets/set-base.styles.js.map +1 -0
- package/shared/text-field-base/text-field-base.js +6 -6
- package/shared/text-field-base/text-field-base.js.map +1 -1
- package/snackbar/snackbar.d.ts.map +1 -1
- package/snackbar/snackbar.js +13 -7
- package/snackbar/snackbar.js.map +1 -1
- package/switch/switch.js +4 -4
- package/switch/switch.js.map +1 -1
- package/text-field/text-field.d.ts +2 -0
- package/text-field/text-field.d.ts.map +1 -1
- package/text-field/text-field.js +22 -30
- package/text-field/text-field.js.map +1 -1
- package/typeahead/highlight.js +7 -24
- package/typeahead/highlight.js.map +1 -1
- package/typeahead/typeahead.d.ts +3 -0
- package/typeahead/typeahead.d.ts.map +1 -1
- package/typeahead/typeahead.js +184 -180
- package/typeahead/typeahead.js.map +1 -1
|
@@ -1,42 +1,26 @@
|
|
|
1
|
-
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
2
|
-
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
3
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
4
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
5
|
-
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
6
|
-
};
|
|
7
|
-
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
8
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
9
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
10
|
-
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
|
-
};
|
|
12
|
-
var _ConfirmDialogBuilder_confirmButtonDef, _ConfirmDialogBuilder_cancelButtonDef;
|
|
13
1
|
import { config } from '../config.js';
|
|
14
2
|
import { DialogBuilder } from './dialog-builder.js';
|
|
15
3
|
export class ConfirmDialogBuilder extends DialogBuilder {
|
|
16
|
-
constructor() {
|
|
17
|
-
super(...arguments);
|
|
18
|
-
_ConfirmDialogBuilder_confirmButtonDef.set(this, void 0);
|
|
19
|
-
_ConfirmDialogBuilder_cancelButtonDef.set(this, void 0);
|
|
20
|
-
}
|
|
21
4
|
static create(message) {
|
|
22
5
|
return new ConfirmDialogBuilder(message);
|
|
23
6
|
}
|
|
7
|
+
#confirmButtonDef;
|
|
8
|
+
#cancelButtonDef;
|
|
24
9
|
confirmButton(confirmButtonDef) {
|
|
25
|
-
|
|
10
|
+
this.#confirmButtonDef = confirmButtonDef;
|
|
26
11
|
return this;
|
|
27
12
|
}
|
|
28
13
|
cancelButton(cancelButtonDef) {
|
|
29
|
-
|
|
14
|
+
this.#cancelButtonDef = cancelButtonDef;
|
|
30
15
|
return this;
|
|
31
16
|
}
|
|
32
17
|
addButtons(dialog) {
|
|
33
|
-
this.addButton(dialog, { ...config.dialog.confirmDefaults.confirmButton, ...
|
|
34
|
-
this.addButton(dialog, { ...config.dialog.confirmDefaults.cancelButton, ...
|
|
18
|
+
this.addButton(dialog, { ...config.dialog.confirmDefaults.confirmButton, ...this.#confirmButtonDef }, () => dialog.close('ok'));
|
|
19
|
+
this.addButton(dialog, { ...config.dialog.confirmDefaults.cancelButton, ...this.#cancelButtonDef }, () => dialog.close('cancel'));
|
|
35
20
|
}
|
|
36
21
|
innerShow(dialog) {
|
|
37
22
|
super.innerShow(dialog);
|
|
38
23
|
return new Promise(resolve => dialog.addEventListener('closed', () => resolve(dialog.returnValue === 'ok')));
|
|
39
24
|
}
|
|
40
25
|
}
|
|
41
|
-
_ConfirmDialogBuilder_confirmButtonDef = new WeakMap(), _ConfirmDialogBuilder_cancelButtonDef = new WeakMap();
|
|
42
26
|
//# sourceMappingURL=confirm-dialog-builder.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"confirm-dialog-builder.js","sourceRoot":"","sources":["../../src/dialog/confirm-dialog-builder.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"confirm-dialog-builder.js","sourceRoot":"","sources":["../../src/dialog/confirm-dialog-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIpD,MAAM,OAAO,oBAAqB,SAAQ,aAAqD;IAC7F,MAAM,CAAC,MAAM,CAAC,OAAe;QAC3B,OAAO,IAAI,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED,iBAAiB,CAAmB;IACpC,gBAAgB,CAAmB;IAEnC,aAAa,CAAC,gBAAiC;QAC7C,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,CAAC;QAC1C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,YAAY,CAAC,eAAgC;QAC3C,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC;QACxC,OAAO,IAAI,CAAC;IACd,CAAC;IAEQ,UAAU,CAAC,MAAgB;QAElC,IAAI,CAAC,SAAS,CACZ,MAAM,EACN,EAAC,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,iBAAiB,EAAC,EAC3E,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QAE5B,IAAI,CAAC,SAAS,CACZ,MAAM,EACN,EAAC,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAC,EACzE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAClC,CAAC;IAEkB,SAAS,CAAC,MAAgB;QAC3C,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QAExB,OAAO,IAAI,OAAO,CAAU,OAAO,CAAC,EAAE,CACpC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,CAAA;IAClF,CAAC;CACF","sourcesContent":["import { config } from '../config.js';\nimport { DialogBuilder } from './dialog-builder.js';\nimport { DialogButtonDef } from './dialog-button-def.js';\nimport { UmDialog } from './dialog.js';\n\nexport class ConfirmDialogBuilder extends DialogBuilder<ConfirmDialogBuilder, Promise<boolean>> {\n static create(message: string): ConfirmDialogBuilder {\n return new ConfirmDialogBuilder(message);\n }\n\n #confirmButtonDef?: DialogButtonDef;\n #cancelButtonDef?: DialogButtonDef;\n\n confirmButton(confirmButtonDef: DialogButtonDef): ConfirmDialogBuilder {\n this.#confirmButtonDef = confirmButtonDef;\n return this;\n }\n\n cancelButton(cancelButtonDef: DialogButtonDef): ConfirmDialogBuilder {\n this.#cancelButtonDef = cancelButtonDef;\n return this;\n }\n\n override addButtons(dialog: UmDialog): void {\n\n this.addButton(\n dialog,\n {...config.dialog.confirmDefaults.confirmButton, ...this.#confirmButtonDef},\n () => dialog.close('ok'));\n\n this.addButton(\n dialog,\n {...config.dialog.confirmDefaults.cancelButton, ...this.#cancelButtonDef},\n () => dialog.close('cancel'));\n }\n\n protected override innerShow(dialog: UmDialog): Promise<boolean> {\n super.innerShow(dialog);\n\n return new Promise<boolean>(resolve =>\n dialog.addEventListener('closed', () => resolve(dialog.returnValue === 'ok')))\n }\n}\n"]}
|
package/dialog/dialog-builder.js
CHANGED
|
@@ -1,23 +1,11 @@
|
|
|
1
|
-
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
2
|
-
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
3
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
4
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
5
|
-
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
6
|
-
};
|
|
7
|
-
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
8
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
9
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
10
|
-
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
|
-
};
|
|
12
|
-
var _DialogBuilder_headline;
|
|
13
1
|
import './dialog.js';
|
|
14
2
|
export class DialogBuilder {
|
|
3
|
+
#headline;
|
|
15
4
|
constructor(message) {
|
|
16
5
|
this.message = message;
|
|
17
|
-
_DialogBuilder_headline.set(this, void 0);
|
|
18
6
|
}
|
|
19
7
|
headline(headline) {
|
|
20
|
-
|
|
8
|
+
this.#headline = headline;
|
|
21
9
|
return this;
|
|
22
10
|
}
|
|
23
11
|
show() {
|
|
@@ -34,12 +22,12 @@ export class DialogBuilder {
|
|
|
34
22
|
return;
|
|
35
23
|
}
|
|
36
24
|
addHeadline(dialog) {
|
|
37
|
-
if (!
|
|
25
|
+
if (!this.#headline) {
|
|
38
26
|
return;
|
|
39
27
|
}
|
|
40
28
|
const headlineElement = document.createElement('span');
|
|
41
29
|
headlineElement.slot = 'headline';
|
|
42
|
-
headlineElement.textContent =
|
|
30
|
+
headlineElement.textContent = this.#headline;
|
|
43
31
|
dialog.appendChild(headlineElement);
|
|
44
32
|
}
|
|
45
33
|
addButton(dialog, buttonDef, click) {
|
|
@@ -51,5 +39,4 @@ export class DialogBuilder {
|
|
|
51
39
|
dialog.appendChild(button);
|
|
52
40
|
}
|
|
53
41
|
}
|
|
54
|
-
_DialogBuilder_headline = new WeakMap();
|
|
55
42
|
//# sourceMappingURL=dialog-builder.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog-builder.js","sourceRoot":"","sources":["../../src/dialog/dialog-builder.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"dialog-builder.js","sourceRoot":"","sources":["../../src/dialog/dialog-builder.ts"],"names":[],"mappings":"AAGA,OAAO,aAAa,CAAC;AAErB,MAAM,OAAgB,aAAa;IACjC,SAAS,CAAU;IAEnB,YAA6B,OAAe;QAAf,YAAO,GAAP,OAAO,CAAQ;IAE5C,CAAC;IAED,QAAQ,CAAC,QAAgB;QACvB,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;QAC1B,OAAO,IAA2B,CAAC;IACrC,CAAC;IAED,IAAI;QACF,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAClD,MAAM,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;QAEhC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QACzB,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAExB,OAAgB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACzC,CAAC;IAES,SAAS,CAAC,MAAgB;QAClC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;QACzD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAClC,MAAM,CAAC,IAAI,EAAE,CAAC;QAEd,OAAO;IACT,CAAC;IAIO,WAAW,CAAC,MAAmB;QACrC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO;QACT,CAAC;QAED,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACvD,eAAe,CAAC,IAAI,GAAG,UAAU,CAAC;QAClC,eAAe,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;QAC7C,MAAM,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;IACtC,CAAC;IAES,SAAS,CAAC,MAAgB,EAAE,SAA0B,EAAE,KAAiB;QACjF,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QAClD,MAAM,CAAC,OAAO,GAAG,SAAS,CAAC,OAAQ,CAAC;QACpC,MAAM,CAAC,WAAW,GAAG,SAAS,CAAC,KAAM,CAAC;QACtC,MAAM,CAAC,IAAI,GAAG,SAAS,CAAC;QACxB,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QACxC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC;CACF","sourcesContent":["import { DialogButtonDef } from './dialog-button-def.js';\nimport { UmDialog } from './dialog.js';\n\nimport './dialog.js';\n\nexport abstract class DialogBuilder<TBuilder extends DialogBuilder<any, any>, TReturn> {\n #headline?: string;\n\n constructor(private readonly message: string) {\n\n }\n\n headline(headline: string): TBuilder {\n this.#headline = headline;\n return this as unknown as TBuilder;\n }\n\n show(): TReturn {\n const dialog = document.createElement('u-dialog');\n dialog.innerText = this.message;\n\n this.addHeadline(dialog);\n this.addButtons(dialog);\n\n return <TReturn>this.innerShow(dialog);\n }\n\n protected innerShow(dialog: UmDialog): TReturn | void {\n dialog.addEventListener('closed', () => dialog.remove());\n document.body.appendChild(dialog);\n dialog.show();\n\n return;\n }\n\n protected abstract addButtons(dialog: UmDialog): void;\n\n private addHeadline(dialog: HTMLElement) {\n if (!this.#headline) {\n return;\n }\n\n const headlineElement = document.createElement('span');\n headlineElement.slot = 'headline';\n headlineElement.textContent = this.#headline;\n dialog.appendChild(headlineElement);\n }\n\n protected addButton(dialog: UmDialog, buttonDef: DialogButtonDef, click: () => void) {\n const button = document.createElement('u-button');\n button.variant = buttonDef.variant!;\n button.textContent = buttonDef.label!;\n button.slot = 'actions';\n button.addEventListener('click', click);\n dialog.appendChild(button);\n }\n}\n"]}
|
package/dialog/dialog.js
CHANGED
|
@@ -4,18 +4,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
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
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
-
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
8
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
9
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
10
|
-
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
|
-
};
|
|
12
|
-
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
13
|
-
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
14
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
15
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
16
|
-
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
17
|
-
};
|
|
18
|
-
var _UmDialog_instances, _UmDialog_open, _UmDialog_contentResizeObserver, _UmDialog_handleSubmit, _UmDialog_handleCancel, _UmDialog_handleIconSlotChange, _UmDialog_handleHeadlineSlotChange, _UmDialog_handleScroll, _UmDialog_setScrollDividers, _UmDialog_setBottomScrollDivider, _UmDialog_setTopScrollDivider, _UmDialog_handleScrimClick;
|
|
19
7
|
import { html, LitElement } from 'lit';
|
|
20
8
|
import { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';
|
|
21
9
|
import { styles as baseStyles } from '../shared/base.styles.js';
|
|
@@ -28,9 +16,7 @@ const bottomDividerClass = 'bottom-divider';
|
|
|
28
16
|
let UmDialog = class UmDialog extends LitElement {
|
|
29
17
|
constructor() {
|
|
30
18
|
super(...arguments);
|
|
31
|
-
|
|
32
|
-
_UmDialog_open.set(this, false);
|
|
33
|
-
_UmDialog_contentResizeObserver.set(this, void 0);
|
|
19
|
+
this.#open = false;
|
|
34
20
|
/**
|
|
35
21
|
* Whether dialog has headline or not
|
|
36
22
|
*
|
|
@@ -43,20 +29,23 @@ let UmDialog = class UmDialog extends LitElement {
|
|
|
43
29
|
* _Note:_ Readonly
|
|
44
30
|
*/
|
|
45
31
|
this.hasIcon = false;
|
|
46
|
-
|
|
32
|
+
this.#handleCancel = (e) => {
|
|
47
33
|
e.preventDefault();
|
|
48
34
|
const cancelPrevented = !this.dispatchEvent(new Event('cancel', { cancelable: true }));
|
|
49
35
|
if (cancelPrevented) {
|
|
50
36
|
return;
|
|
51
37
|
}
|
|
52
38
|
this.close();
|
|
53
|
-
}
|
|
39
|
+
};
|
|
54
40
|
}
|
|
41
|
+
static { this.styles = [baseStyles, styles]; }
|
|
42
|
+
#open;
|
|
43
|
+
#contentResizeObserver;
|
|
55
44
|
get open() {
|
|
56
|
-
return
|
|
45
|
+
return this.#open;
|
|
57
46
|
}
|
|
58
47
|
set open(open) {
|
|
59
|
-
if (
|
|
48
|
+
if (this.#open === open) {
|
|
60
49
|
return;
|
|
61
50
|
}
|
|
62
51
|
if (!open) {
|
|
@@ -77,25 +66,25 @@ let UmDialog = class UmDialog extends LitElement {
|
|
|
77
66
|
render() {
|
|
78
67
|
return html `
|
|
79
68
|
<dialog>
|
|
80
|
-
<div class="scrim" @click=${
|
|
69
|
+
<div class="scrim" @click=${this.#handleScrimClick}></div>
|
|
81
70
|
<div class="container" part="container">
|
|
82
71
|
<u-elevation></u-elevation>
|
|
83
72
|
<div class="icon" part="icon">
|
|
84
73
|
<slot
|
|
85
74
|
name="icon"
|
|
86
|
-
@slotchange=${
|
|
75
|
+
@slotchange=${this.#handleIconSlotChange}>
|
|
87
76
|
</slot>
|
|
88
77
|
</div>
|
|
89
78
|
<div class="headline" part="headline">
|
|
90
79
|
<slot
|
|
91
80
|
name="headline"
|
|
92
|
-
@slotchange=${
|
|
81
|
+
@slotchange=${this.#handleHeadlineSlotChange}>
|
|
93
82
|
</slot>
|
|
94
83
|
</div>
|
|
95
84
|
<div
|
|
96
85
|
class="content"
|
|
97
86
|
part="content"
|
|
98
|
-
@scroll=${
|
|
87
|
+
@scroll=${this.#handleScroll}>
|
|
99
88
|
<slot></slot>
|
|
100
89
|
</div>
|
|
101
90
|
<div class="actions" part="actions">
|
|
@@ -106,24 +95,61 @@ let UmDialog = class UmDialog extends LitElement {
|
|
|
106
95
|
}
|
|
107
96
|
firstUpdated(changedProperties) {
|
|
108
97
|
super.firstUpdated(changedProperties);
|
|
109
|
-
this.dialog.addEventListener('cancel',
|
|
98
|
+
this.dialog.addEventListener('cancel', this.#handleCancel);
|
|
110
99
|
}
|
|
111
100
|
connectedCallback() {
|
|
112
101
|
super.connectedCallback();
|
|
113
|
-
this.addEventListener('submit',
|
|
102
|
+
this.addEventListener('submit', this.#handleSubmit);
|
|
114
103
|
setTimeout(() => {
|
|
115
|
-
|
|
116
|
-
|
|
104
|
+
this.#contentResizeObserver = new ResizeObserver(() => this.#setScrollDividers());
|
|
105
|
+
this.#contentResizeObserver.observe(this.content);
|
|
117
106
|
});
|
|
118
107
|
}
|
|
119
108
|
disconnectedCallback() {
|
|
120
109
|
super.disconnectedCallback();
|
|
121
|
-
this.removeEventListener('submit',
|
|
122
|
-
|
|
123
|
-
|
|
110
|
+
this.removeEventListener('submit', this.#handleSubmit);
|
|
111
|
+
this.#contentResizeObserver.disconnect();
|
|
112
|
+
this.#contentResizeObserver = null;
|
|
113
|
+
}
|
|
114
|
+
#handleSubmit(event) {
|
|
115
|
+
const form = event.target;
|
|
116
|
+
const { submitter } = event;
|
|
117
|
+
if (form.method !== 'dialog' || !submitter) {
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
this.close(submitter.getAttribute('value') ?? this.returnValue);
|
|
121
|
+
}
|
|
122
|
+
#handleCancel;
|
|
123
|
+
#handleIconSlotChange() {
|
|
124
|
+
this.hasIcon = this.assignedIcons.length > 0;
|
|
125
|
+
}
|
|
126
|
+
#handleHeadlineSlotChange() {
|
|
127
|
+
this.hasHeadline = this.assignedHeadlines.length > 0;
|
|
128
|
+
}
|
|
129
|
+
#handleScroll() {
|
|
130
|
+
this.#setScrollDividers();
|
|
131
|
+
}
|
|
132
|
+
#setScrollDividers() {
|
|
133
|
+
this.#setTopScrollDivider();
|
|
134
|
+
this.#setBottomScrollDivider();
|
|
135
|
+
}
|
|
136
|
+
#setBottomScrollDivider() {
|
|
137
|
+
const scrollBottom = this.content.scrollTop + this.content.offsetHeight;
|
|
138
|
+
if (scrollBottom >= this.content.scrollHeight) {
|
|
139
|
+
this.content.classList.remove(bottomDividerClass);
|
|
140
|
+
return;
|
|
141
|
+
}
|
|
142
|
+
this.content.classList.add(bottomDividerClass);
|
|
143
|
+
}
|
|
144
|
+
#setTopScrollDivider() {
|
|
145
|
+
if (this.content.scrollTop) {
|
|
146
|
+
this.content.classList.add(topDividerClass);
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
this.content.classList.remove(topDividerClass);
|
|
124
150
|
}
|
|
125
151
|
async show() {
|
|
126
|
-
|
|
152
|
+
this.#open = true;
|
|
127
153
|
this.setAttribute('open', '');
|
|
128
154
|
await this.updateComplete;
|
|
129
155
|
this.dialog.showModal();
|
|
@@ -132,7 +158,7 @@ let UmDialog = class UmDialog extends LitElement {
|
|
|
132
158
|
this.content.scrollTop = 0;
|
|
133
159
|
}
|
|
134
160
|
async close(returnValue = this.returnValue) {
|
|
135
|
-
|
|
161
|
+
this.#open = false;
|
|
136
162
|
this.removeAttribute('open');
|
|
137
163
|
await this.updateComplete;
|
|
138
164
|
if (!this.dialog.open || this.open) {
|
|
@@ -140,7 +166,7 @@ let UmDialog = class UmDialog extends LitElement {
|
|
|
140
166
|
}
|
|
141
167
|
const preventClose = !this.dispatchEvent(new Event('close', { cancelable: true }));
|
|
142
168
|
if (preventClose) {
|
|
143
|
-
|
|
169
|
+
this.#open = true;
|
|
144
170
|
return;
|
|
145
171
|
}
|
|
146
172
|
this.open = false;
|
|
@@ -153,55 +179,14 @@ let UmDialog = class UmDialog extends LitElement {
|
|
|
153
179
|
this.classList.add('closing');
|
|
154
180
|
await closed;
|
|
155
181
|
}
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
const form = event.target;
|
|
163
|
-
const { submitter } = event;
|
|
164
|
-
if (form.method !== 'dialog' || !submitter) {
|
|
165
|
-
return;
|
|
166
|
-
}
|
|
167
|
-
this.close(submitter.getAttribute('value') ?? this.returnValue);
|
|
168
|
-
};
|
|
169
|
-
_UmDialog_handleIconSlotChange = function _UmDialog_handleIconSlotChange() {
|
|
170
|
-
this.hasIcon = this.assignedIcons.length > 0;
|
|
171
|
-
};
|
|
172
|
-
_UmDialog_handleHeadlineSlotChange = function _UmDialog_handleHeadlineSlotChange() {
|
|
173
|
-
this.hasHeadline = this.assignedHeadlines.length > 0;
|
|
174
|
-
};
|
|
175
|
-
_UmDialog_handleScroll = function _UmDialog_handleScroll() {
|
|
176
|
-
__classPrivateFieldGet(this, _UmDialog_instances, "m", _UmDialog_setScrollDividers).call(this);
|
|
177
|
-
};
|
|
178
|
-
_UmDialog_setScrollDividers = function _UmDialog_setScrollDividers() {
|
|
179
|
-
__classPrivateFieldGet(this, _UmDialog_instances, "m", _UmDialog_setTopScrollDivider).call(this);
|
|
180
|
-
__classPrivateFieldGet(this, _UmDialog_instances, "m", _UmDialog_setBottomScrollDivider).call(this);
|
|
181
|
-
};
|
|
182
|
-
_UmDialog_setBottomScrollDivider = function _UmDialog_setBottomScrollDivider() {
|
|
183
|
-
const scrollBottom = this.content.scrollTop + this.content.offsetHeight;
|
|
184
|
-
if (scrollBottom >= this.content.scrollHeight) {
|
|
185
|
-
this.content.classList.remove(bottomDividerClass);
|
|
186
|
-
return;
|
|
187
|
-
}
|
|
188
|
-
this.content.classList.add(bottomDividerClass);
|
|
189
|
-
};
|
|
190
|
-
_UmDialog_setTopScrollDivider = function _UmDialog_setTopScrollDivider() {
|
|
191
|
-
if (this.content.scrollTop) {
|
|
192
|
-
this.content.classList.add(topDividerClass);
|
|
193
|
-
return;
|
|
194
|
-
}
|
|
195
|
-
this.content.classList.remove(topDividerClass);
|
|
196
|
-
};
|
|
197
|
-
_UmDialog_handleScrimClick = function _UmDialog_handleScrimClick() {
|
|
198
|
-
const cancelPrevented = !this.dispatchEvent(new Event('cancel', { cancelable: true }));
|
|
199
|
-
if (cancelPrevented) {
|
|
200
|
-
return;
|
|
182
|
+
#handleScrimClick() {
|
|
183
|
+
const cancelPrevented = !this.dispatchEvent(new Event('cancel', { cancelable: true }));
|
|
184
|
+
if (cancelPrevented) {
|
|
185
|
+
return;
|
|
186
|
+
}
|
|
187
|
+
this.close();
|
|
201
188
|
}
|
|
202
|
-
this.close();
|
|
203
189
|
};
|
|
204
|
-
UmDialog.styles = [baseStyles, styles];
|
|
205
190
|
__decorate([
|
|
206
191
|
property({ type: Boolean })
|
|
207
192
|
], UmDialog.prototype, "open", null);
|
package/dialog/dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './dialog.styles.js';\n\nimport { ConfirmDialogBuilder } from './confirm-dialog-builder.js';\nimport { MessageDialogBuilder } from './message-dialog-builder.js';\n\nimport '../elevation/elevation.js';\n\nconst topDividerClass = 'top-divider';\nconst bottomDividerClass = 'bottom-divider';\n\n@customElement('u-dialog')\nexport class UmDialog extends LitElement {\n static override styles = [baseStyles, styles];\n\n #open = false;\n #contentResizeObserver!: ResizeObserver | null;\n\n @property({type: Boolean})\n get open(): boolean {\n return this.#open;\n }\n set open(open: boolean) {\n if (this.#open === open) {\n return;\n }\n\n if (!open) {\n this.close();\n return;\n }\n\n this.show();\n }\n\n get returnValue() {\n return this.dialog.returnValue;\n }\n\n /**\n * Whether dialog has headline or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-headline', reflect: true}) hasHeadline = false;\n\n /**\n * Whether dialog has icon\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon = false;\n\n @query('dialog') dialog!: HTMLDialogElement;\n @query('.scrim') scrim!: HTMLElement;\n @query('.content') content!: HTMLElement;\n @query('.container') container!: HTMLElement;\n\n @queryAssignedElements({slot: 'headline', flatten: true})\n private readonly assignedHeadlines!: HTMLElement[];\n\n @queryAssignedElements({slot: 'icon', flatten: true})\n private readonly assignedIcons!: HTMLElement[];\n\n static message(message: string): MessageDialogBuilder {\n return MessageDialogBuilder.create(message);\n }\n\n static confirm(message: string): ConfirmDialogBuilder {\n return ConfirmDialogBuilder.create(message);\n }\n\n override render(): HTMLTemplateResult {\n return html`\n <dialog>\n <div class=\"scrim\" @click=${this.#handleScrimClick}></div>\n <div class=\"container\" part=\"container\">\n <u-elevation></u-elevation>\n <div class=\"icon\" part=\"icon\">\n <slot\n name=\"icon\"\n @slotchange=${this.#handleIconSlotChange}>\n </slot>\n </div>\n <div class=\"headline\" part=\"headline\">\n <slot\n name=\"headline\"\n @slotchange=${this.#handleHeadlineSlotChange}>\n </slot>\n </div>\n <div\n class=\"content\"\n part=\"content\"\n @scroll=${this.#handleScroll}>\n <slot></slot>\n </div>\n <div class=\"actions\" part=\"actions\">\n <slot name=\"actions\"></slot>\n </div>\n </div>\n </dialog>`;\n }\n\n override firstUpdated(changedProperties: PropertyValues) {\n super.firstUpdated(changedProperties);\n\n this.dialog.addEventListener('cancel', this.#handleCancel)\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('submit', this.#handleSubmit);\n\n setTimeout(() => {\n this.#contentResizeObserver = new ResizeObserver(() => this.#setScrollDividers())\n this.#contentResizeObserver.observe(this.content);\n });\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('submit', this.#handleSubmit);\n\n this.#contentResizeObserver!.disconnect();\n this.#contentResizeObserver = null;\n }\n\n #handleSubmit(event: SubmitEvent) {\n const form = event.target as HTMLFormElement;\n const {submitter} = event;\n\n if (form.method !== 'dialog' || !submitter) {\n return;\n }\n\n this.close(submitter.getAttribute('value') ?? this.returnValue);\n }\n\n #handleCancel = (e: Event) => {\n e.preventDefault();\n\n const cancelPrevented = !this.dispatchEvent(new Event('cancel', {cancelable: true}));\n\n if (cancelPrevented) {\n return;\n }\n\n this.close();\n }\n\n #handleIconSlotChange() {\n this.hasIcon = this.assignedIcons.length > 0;\n }\n\n #handleHeadlineSlotChange() {\n this.hasHeadline = this.assignedHeadlines.length > 0;\n }\n\n #handleScroll() {\n this.#setScrollDividers();\n }\n\n #setScrollDividers() {\n this.#setTopScrollDivider();\n this.#setBottomScrollDivider();\n }\n\n #setBottomScrollDivider() {\n const scrollBottom = this.content.scrollTop + this.content.offsetHeight;\n\n if (scrollBottom >= this.content.scrollHeight) {\n this.content.classList.remove(bottomDividerClass);\n return;\n }\n \n this.content.classList.add(bottomDividerClass);\n }\n\n #setTopScrollDivider() {\n if (this.content.scrollTop) {\n this.content.classList.add(topDividerClass);\n return;\n }\n \n this.content.classList.remove(topDividerClass);\n }\n\n async show() {\n this.#open = true;\n this.setAttribute('open', '');\n\n await this.updateComplete;\n this.dialog.showModal();\n const autoFocusElement = this.querySelector<HTMLElement>('[autofocus]');\n autoFocusElement?.focus();\n this.content.scrollTop = 0;\n }\n\n async close(returnValue: string = this.returnValue) {\n this.#open = false;\n this.removeAttribute('open');\n\n await this.updateComplete;\n\n if (!this.dialog.open || this.open) {\n return;\n }\n\n const preventClose = !this.dispatchEvent(new Event('close', {cancelable: true}));\n\n if (preventClose) {\n this.#open = true;\n return;\n }\n\n this.open = false;\n\n const closed = new Promise<void>(resolve =>\n this.container.addEventListener(\n 'animationend',\n () => {\n resolve();\n this.classList.remove('closing');\n this.dialog.close(returnValue);\n this.dispatchEvent(new Event('closed'));\n },\n {capture: true, once: true},\n )\n );\n\n this.classList.add('closing');\n await closed;\n }\n\n #handleScrimClick() {\n const cancelPrevented = !this.dispatchEvent(new Event('cancel', {cancelable: true}));\n\n if (cancelPrevented) {\n return;\n }\n\n this.close();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-dialog': UmDialog;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './dialog.styles.js';\n\nimport { ConfirmDialogBuilder } from './confirm-dialog-builder.js';\nimport { MessageDialogBuilder } from './message-dialog-builder.js';\n\nimport '../elevation/elevation.js';\n\nconst topDividerClass = 'top-divider';\nconst bottomDividerClass = 'bottom-divider';\n\n@customElement('u-dialog')\nexport class UmDialog extends LitElement {\n static override styles = [baseStyles, styles];\n\n #open = false;\n #contentResizeObserver!: ResizeObserver | null;\n\n @property({type: Boolean})\n get open(): boolean {\n return this.#open;\n }\n set open(open: boolean) {\n if (this.#open === open) {\n return;\n }\n\n if (!open) {\n this.close();\n return;\n }\n\n this.show();\n }\n\n get returnValue() {\n return this.dialog.returnValue;\n }\n\n /**\n * Whether dialog has headline or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-headline', reflect: true}) hasHeadline = false;\n\n /**\n * Whether dialog has icon\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon = false;\n\n @query('dialog') dialog!: HTMLDialogElement;\n @query('.scrim') scrim!: HTMLElement;\n @query('.content') content!: HTMLElement;\n @query('.container') container!: HTMLElement;\n\n @queryAssignedElements({slot: 'headline', flatten: true})\n private readonly assignedHeadlines!: HTMLElement[];\n\n @queryAssignedElements({slot: 'icon', flatten: true})\n private readonly assignedIcons!: HTMLElement[];\n\n static message(message: string): MessageDialogBuilder {\n return MessageDialogBuilder.create(message);\n }\n\n static confirm(message: string): ConfirmDialogBuilder {\n return ConfirmDialogBuilder.create(message);\n }\n\n override render(): HTMLTemplateResult {\n return html`\n <dialog>\n <div class=\"scrim\" @click=${this.#handleScrimClick}></div>\n <div class=\"container\" part=\"container\">\n <u-elevation></u-elevation>\n <div class=\"icon\" part=\"icon\">\n <slot\n name=\"icon\"\n @slotchange=${this.#handleIconSlotChange}>\n </slot>\n </div>\n <div class=\"headline\" part=\"headline\">\n <slot\n name=\"headline\"\n @slotchange=${this.#handleHeadlineSlotChange}>\n </slot>\n </div>\n <div\n class=\"content\"\n part=\"content\"\n @scroll=${this.#handleScroll}>\n <slot></slot>\n </div>\n <div class=\"actions\" part=\"actions\">\n <slot name=\"actions\"></slot>\n </div>\n </div>\n </dialog>`;\n }\n\n override firstUpdated(changedProperties: PropertyValues) {\n super.firstUpdated(changedProperties);\n\n this.dialog.addEventListener('cancel', this.#handleCancel)\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('submit', this.#handleSubmit);\n\n setTimeout(() => {\n this.#contentResizeObserver = new ResizeObserver(() => this.#setScrollDividers())\n this.#contentResizeObserver.observe(this.content);\n });\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('submit', this.#handleSubmit);\n\n this.#contentResizeObserver!.disconnect();\n this.#contentResizeObserver = null;\n }\n\n #handleSubmit(event: SubmitEvent) {\n const form = event.target as HTMLFormElement;\n const {submitter} = event;\n\n if (form.method !== 'dialog' || !submitter) {\n return;\n }\n\n this.close(submitter.getAttribute('value') ?? this.returnValue);\n }\n\n #handleCancel = (e: Event) => {\n e.preventDefault();\n\n const cancelPrevented = !this.dispatchEvent(new Event('cancel', {cancelable: true}));\n\n if (cancelPrevented) {\n return;\n }\n\n this.close();\n }\n\n #handleIconSlotChange() {\n this.hasIcon = this.assignedIcons.length > 0;\n }\n\n #handleHeadlineSlotChange() {\n this.hasHeadline = this.assignedHeadlines.length > 0;\n }\n\n #handleScroll() {\n this.#setScrollDividers();\n }\n\n #setScrollDividers() {\n this.#setTopScrollDivider();\n this.#setBottomScrollDivider();\n }\n\n #setBottomScrollDivider() {\n const scrollBottom = this.content.scrollTop + this.content.offsetHeight;\n\n if (scrollBottom >= this.content.scrollHeight) {\n this.content.classList.remove(bottomDividerClass);\n return;\n }\n \n this.content.classList.add(bottomDividerClass);\n }\n\n #setTopScrollDivider() {\n if (this.content.scrollTop) {\n this.content.classList.add(topDividerClass);\n return;\n }\n \n this.content.classList.remove(topDividerClass);\n }\n\n async show() {\n this.#open = true;\n this.setAttribute('open', '');\n\n await this.updateComplete;\n this.dialog.showModal();\n const autoFocusElement = this.querySelector<HTMLElement>('[autofocus]');\n autoFocusElement?.focus();\n this.content.scrollTop = 0;\n }\n\n async close(returnValue: string = this.returnValue) {\n this.#open = false;\n this.removeAttribute('open');\n\n await this.updateComplete;\n\n if (!this.dialog.open || this.open) {\n return;\n }\n\n const preventClose = !this.dispatchEvent(new Event('close', {cancelable: true}));\n\n if (preventClose) {\n this.#open = true;\n return;\n }\n\n this.open = false;\n\n const closed = new Promise<void>(resolve =>\n this.container.addEventListener(\n 'animationend',\n () => {\n resolve();\n this.classList.remove('closing');\n this.dialog.close(returnValue);\n this.dispatchEvent(new Event('closed'));\n },\n {capture: true, once: true},\n )\n );\n\n this.classList.add('closing');\n await closed;\n }\n\n #handleScrimClick() {\n const cancelPrevented = !this.dispatchEvent(new Event('cancel', {cancelable: true}));\n\n if (cancelPrevented) {\n return;\n }\n\n this.close();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-dialog': UmDialog;\n }\n}\n"]}
|
|
@@ -1,32 +1,16 @@
|
|
|
1
|
-
var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
|
|
2
|
-
if (kind === "m") throw new TypeError("Private method is not writable");
|
|
3
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
|
|
4
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
|
|
5
|
-
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
6
|
-
};
|
|
7
|
-
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
8
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
9
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
10
|
-
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
|
-
};
|
|
12
|
-
var _MessageDialogBuilder_acknowledgeButtonDef;
|
|
13
1
|
import { config } from '../config.js';
|
|
14
2
|
import { DialogBuilder } from './dialog-builder.js';
|
|
15
3
|
export class MessageDialogBuilder extends DialogBuilder {
|
|
16
|
-
constructor() {
|
|
17
|
-
super(...arguments);
|
|
18
|
-
_MessageDialogBuilder_acknowledgeButtonDef.set(this, void 0);
|
|
19
|
-
}
|
|
20
4
|
static create(message) {
|
|
21
5
|
return new MessageDialogBuilder(message);
|
|
22
6
|
}
|
|
7
|
+
#acknowledgeButtonDef;
|
|
23
8
|
acknowledgeButton(acknowledgeButtonDef) {
|
|
24
|
-
|
|
9
|
+
this.#acknowledgeButtonDef = acknowledgeButtonDef;
|
|
25
10
|
return this;
|
|
26
11
|
}
|
|
27
12
|
addButtons(dialog) {
|
|
28
|
-
this.addButton(dialog, { ...config.dialog.alertDefaults.acknowledgeButton, ...
|
|
13
|
+
this.addButton(dialog, { ...config.dialog.alertDefaults.acknowledgeButton, ...this.#acknowledgeButtonDef }, () => dialog.close());
|
|
29
14
|
}
|
|
30
15
|
}
|
|
31
|
-
_MessageDialogBuilder_acknowledgeButtonDef = new WeakMap();
|
|
32
16
|
//# sourceMappingURL=message-dialog-builder.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message-dialog-builder.js","sourceRoot":"","sources":["../../src/dialog/message-dialog-builder.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"message-dialog-builder.js","sourceRoot":"","sources":["../../src/dialog/message-dialog-builder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAIpD,MAAM,OAAO,oBAAqB,SAAQ,aAAyC;IACjF,MAAM,CAAC,MAAM,CAAC,OAAe;QAC3B,OAAO,IAAI,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAC3C,CAAC;IAED,qBAAqB,CAAmB;IAExC,iBAAiB,CAAC,oBAAqC;QACrD,IAAI,CAAC,qBAAqB,GAAG,oBAAoB,CAAC;QAClD,OAAO,IAAI,CAAC;IACd,CAAC;IAEQ,UAAU,CAAC,MAAgB;QAElC,IAAI,CAAC,SAAS,CACZ,MAAM,EACN,EAAC,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAC,EACjF,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IAC1B,CAAC;CACF","sourcesContent":["import { config } from '../config.js';\nimport { DialogBuilder } from './dialog-builder.js';\nimport { DialogButtonDef } from './dialog-button-def.js';\nimport { UmDialog } from './dialog.js';\n\nexport class MessageDialogBuilder extends DialogBuilder<MessageDialogBuilder, void> {\n static create(message: string): MessageDialogBuilder {\n return new MessageDialogBuilder(message);\n }\n\n #acknowledgeButtonDef?: DialogButtonDef;\n\n acknowledgeButton(acknowledgeButtonDef: DialogButtonDef): MessageDialogBuilder {\n this.#acknowledgeButtonDef = acknowledgeButtonDef;\n return this;\n }\n\n override addButtons(dialog: UmDialog): void {\n\n this.addButton(\n dialog,\n {...config.dialog.alertDefaults.acknowledgeButton, ...this.#acknowledgeButtonDef},\n () => dialog.close());\n }\n}\n"]}
|
package/elevation/elevation.js
CHANGED
|
@@ -8,12 +8,12 @@ import { LitElement } from 'lit';
|
|
|
8
8
|
import { customElement } from 'lit/decorators.js';
|
|
9
9
|
import { styles } from './elevation.styles.js';
|
|
10
10
|
let UmElevation = class UmElevation extends LitElement {
|
|
11
|
+
static { this.styles = styles; }
|
|
11
12
|
connectedCallback() {
|
|
12
13
|
super.connectedCallback();
|
|
13
14
|
this.ariaHidden = "true";
|
|
14
15
|
}
|
|
15
16
|
};
|
|
16
|
-
UmElevation.styles = styles;
|
|
17
17
|
UmElevation = __decorate([
|
|
18
18
|
customElement('u-elevation')
|
|
19
19
|
], UmElevation);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"elevation.js","sourceRoot":"","sources":["../../src/elevation/elevation.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAGxC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"elevation.js","sourceRoot":"","sources":["../../src/elevation/elevation.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAGxC,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;aACzB,WAAM,GAAG,MAAM,AAAT,CAAU;IAEvB,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC;IAC3B,CAAC;;AANU,WAAW;IADvB,aAAa,CAAC,aAAa,CAAC;GAChB,WAAW,CAOvB","sourcesContent":["import { LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { styles } from './elevation.styles.js';\n\n@customElement('u-elevation')\nexport class UmElevation extends LitElement {\n static override styles = styles;\n\n override connectedCallback() {\n super.connectedCallback();\n this.ariaHidden = \"true\";\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'u-elevation': UmElevation;\n }\n}\n"]}
|
package/field/field-base.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { Context, ContextProvider } from '@lit/context';
|
|
2
2
|
import { CSSResultGroup } from '@lit/reactive-element/css-tag';
|
|
3
|
-
import { LitElement } from 'lit';
|
|
4
|
-
import { TemplateResult } from 'lit-html';
|
|
3
|
+
import { TemplateResult, LitElement, nothing } from 'lit';
|
|
5
4
|
import { UmFieldDefaults } from './field-defaults.js';
|
|
6
5
|
export declare abstract class UmFieldBase extends LitElement {
|
|
7
6
|
#private;
|
|
@@ -50,5 +49,6 @@ export declare abstract class UmFieldBase extends LitElement {
|
|
|
50
49
|
private handleTrailingIconSlotChange;
|
|
51
50
|
private handleErrorTextSlotChange;
|
|
52
51
|
private setLabelWidthProperties;
|
|
52
|
+
protected renderDefaultTrailingIcon(): TemplateResult | typeof nothing;
|
|
53
53
|
}
|
|
54
54
|
//# sourceMappingURL=field-base.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field-base.d.ts","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,
|
|
1
|
+
{"version":3,"file":"field-base.d.ts","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,cAAc,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAOhE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,8BAAsB,WAAY,SAAQ,UAAU;;IAClD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAI9D,OAAO,CAAC,MAAM,CAA8B;IAEhC,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAY;IAEtD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IACE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB,KAAK,UAAS;IACd,QAAQ,UAAS;IACjB,OAAO,UAAS;IAE1D,MAAM,CAAC,WAAW,CAAC,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,GAAG,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IAO7H;;;;OAIG;IACsE,cAAc,UAAS;IAEhG;;;;OAIG;IACuE,eAAe,UAAS;IAElG;;;;OAIG;IACoE,YAAY,UAAS;IAG5F,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAGvD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiB;IAEnC,YAAY,EAAG,WAAW,CAAC;IACvB,SAAS,EAAG,WAAW,CAAC;IAE7C,OAAO,CAAC,iBAAiB,CAA+B;;cAOrC,MAAM,IAAI,cAAc;IAuC3C,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,cAAc;IAClD,SAAS,CAAC,kBAAkB,IAAI,cAAc;IAIrC,iBAAiB;IAOjB,oBAAoB;IAc7B,OAAO,CAAC,2BAA2B;IASnC,OAAO,CAAC,4BAA4B;IAIpC,OAAO,CAAC,yBAAyB;IAIjC,OAAO,CAAC,uBAAuB;IAe/B,SAAS,CAAC,yBAAyB,IAAI,cAAc,GAAG,OAAO,OAAO;CAGvE"}
|
package/field/field-base.js
CHANGED
|
@@ -4,19 +4,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
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
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
-
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
8
|
-
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
9
|
-
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
10
|
-
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
|
-
};
|
|
12
|
-
var _UmFieldBase_instances, _UmFieldBase_attach;
|
|
13
7
|
import { consume, ContextProvider } from '@lit/context';
|
|
14
|
-
import { html, LitElement } from 'lit';
|
|
8
|
+
import { html, LitElement, nothing } from 'lit';
|
|
15
9
|
import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
|
|
16
10
|
import { styles as baseStyles } from '../shared/base.styles.js';
|
|
17
11
|
import { styles } from './field-base.styles.js';
|
|
18
12
|
import { fieldDefaultsContext } from './field-defaults-context.js';
|
|
19
13
|
export class UmFieldBase extends LitElement {
|
|
14
|
+
static { this.styles = [baseStyles, styles]; }
|
|
20
15
|
static setDefaults(contextRoot, config) {
|
|
21
16
|
return new ContextProvider(contextRoot, {
|
|
22
17
|
context: fieldDefaultsContext,
|
|
@@ -25,7 +20,6 @@ export class UmFieldBase extends LitElement {
|
|
|
25
20
|
}
|
|
26
21
|
constructor() {
|
|
27
22
|
super();
|
|
28
|
-
_UmFieldBase_instances.add(this);
|
|
29
23
|
this.variant = 'filled';
|
|
30
24
|
this.empty = false;
|
|
31
25
|
this.disabled = false;
|
|
@@ -69,6 +63,7 @@ export class UmFieldBase extends LitElement {
|
|
|
69
63
|
class="icon trailing-icon"
|
|
70
64
|
name="trailing-icon"
|
|
71
65
|
@slotchange="${this.handleTrailingIconSlotChange}">
|
|
66
|
+
<span>${this.renderDefaultTrailingIcon()}</span>
|
|
72
67
|
</slot>
|
|
73
68
|
</div>
|
|
74
69
|
<div class="supporting-text" id="supporting-text">
|
|
@@ -94,13 +89,19 @@ export class UmFieldBase extends LitElement {
|
|
|
94
89
|
connectedCallback() {
|
|
95
90
|
super.connectedCallback();
|
|
96
91
|
this.hasLeadingIcon = !!this.assignedLeadingIcons.length;
|
|
97
|
-
|
|
92
|
+
this.#attach();
|
|
98
93
|
}
|
|
99
94
|
disconnectedCallback() {
|
|
100
95
|
super.disconnectedCallback();
|
|
101
96
|
this.labelSizeObserver.disconnect();
|
|
102
97
|
this.labelSizeObserver = null;
|
|
103
98
|
}
|
|
99
|
+
async #attach() {
|
|
100
|
+
await this.updateComplete;
|
|
101
|
+
this.labelSizeObserver = new ResizeObserver(() => this.setLabelWidthProperties());
|
|
102
|
+
this.labelSizeObserver.observe(this.labelElement);
|
|
103
|
+
this.setLabelWidthProperties();
|
|
104
|
+
}
|
|
104
105
|
handleLeadingIconSlotChange() {
|
|
105
106
|
this.labelElement.style.transition = 'none';
|
|
106
107
|
this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;
|
|
@@ -124,14 +125,10 @@ export class UmFieldBase extends LitElement {
|
|
|
124
125
|
}
|
|
125
126
|
this.container.classList.remove('no-label');
|
|
126
127
|
}
|
|
128
|
+
renderDefaultTrailingIcon() {
|
|
129
|
+
return nothing;
|
|
130
|
+
}
|
|
127
131
|
}
|
|
128
|
-
_UmFieldBase_instances = new WeakSet(), _UmFieldBase_attach = async function _UmFieldBase_attach() {
|
|
129
|
-
await this.updateComplete;
|
|
130
|
-
this.labelSizeObserver = new ResizeObserver(() => this.setLabelWidthProperties());
|
|
131
|
-
this.labelSizeObserver.observe(this.labelElement);
|
|
132
|
-
this.setLabelWidthProperties();
|
|
133
|
-
};
|
|
134
|
-
UmFieldBase.styles = [baseStyles, styles];
|
|
135
132
|
__decorate([
|
|
136
133
|
consume({ context: fieldDefaultsContext, subscribe: true }),
|
|
137
134
|
state()
|