@vaadin/confirm-dialog 24.8.0-alpha8 → 25.0.0-alpha1

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.
Files changed (20) hide show
  1. package/README.md +0 -23
  2. package/package.json +12 -15
  3. package/src/vaadin-confirm-dialog-overlay.js +33 -26
  4. package/src/vaadin-confirm-dialog.d.ts +1 -2
  5. package/src/vaadin-confirm-dialog.js +30 -21
  6. package/web-types.json +2 -2
  7. package/web-types.lit.json +2 -2
  8. package/src/vaadin-lit-confirm-dialog-overlay.js +0 -122
  9. package/src/vaadin-lit-confirm-dialog.d.ts +0 -6
  10. package/src/vaadin-lit-confirm-dialog.js +0 -78
  11. package/theme/lumo/vaadin-lit-confirm-dialog.d.ts +0 -3
  12. package/theme/lumo/vaadin-lit-confirm-dialog.js +0 -3
  13. package/theme/material/vaadin-confirm-dialog-styles.d.ts +0 -1
  14. package/theme/material/vaadin-confirm-dialog-styles.js +0 -41
  15. package/theme/material/vaadin-confirm-dialog.d.ts +0 -3
  16. package/theme/material/vaadin-confirm-dialog.js +0 -3
  17. package/theme/material/vaadin-lit-confirm-dialog.d.ts +0 -3
  18. package/theme/material/vaadin-lit-confirm-dialog.js +0 -3
  19. package/vaadin-lit-confirm-dialog.d.ts +0 -1
  20. package/vaadin-lit-confirm-dialog.js +0 -2
package/README.md CHANGED
@@ -28,29 +28,6 @@ Once installed, import the component in your application:
28
28
  import '@vaadin/confirm-dialog';
29
29
  ```
30
30
 
31
- ## Themes
32
-
33
- Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
34
- The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/confirm-dialog/vaadin-confirm-dialog.js) of the package uses the Lumo theme.
35
-
36
- To use the Material theme, import the component from the `theme/material` folder:
37
-
38
- ```js
39
- import '@vaadin/confirm-dialog/theme/material/vaadin-confirm-dialog.js';
40
- ```
41
-
42
- You can also import the Lumo version of the component explicitly:
43
-
44
- ```js
45
- import '@vaadin/confirm-dialog/theme/lumo/vaadin-confirm-dialog.js';
46
- ```
47
-
48
- Finally, you can import the un-themed component from the `src` folder to get a minimal starting point:
49
-
50
- ```js
51
- import '@vaadin/confirm-dialog/src/vaadin-confirm-dialog.js';
52
- ```
53
-
54
31
  ## Contributing
55
32
 
56
33
  Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/confirm-dialog",
3
- "version": "24.8.0-alpha8",
3
+ "version": "25.0.0-alpha1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -31,25 +31,22 @@
31
31
  "Vaadin",
32
32
  "vaadin-confirm-dialog",
33
33
  "web-components",
34
- "web-component",
35
- "polymer"
34
+ "web-component"
36
35
  ],
37
36
  "dependencies": {
38
37
  "@open-wc/dedupe-mixin": "^1.3.0",
39
- "@polymer/polymer": "^3.0.0",
40
- "@vaadin/button": "24.8.0-alpha8",
41
- "@vaadin/component-base": "24.8.0-alpha8",
42
- "@vaadin/dialog": "24.8.0-alpha8",
43
- "@vaadin/overlay": "24.8.0-alpha8",
44
- "@vaadin/vaadin-lumo-styles": "24.8.0-alpha8",
45
- "@vaadin/vaadin-material-styles": "24.8.0-alpha8",
46
- "@vaadin/vaadin-themable-mixin": "24.8.0-alpha8",
38
+ "@vaadin/button": "25.0.0-alpha1",
39
+ "@vaadin/component-base": "25.0.0-alpha1",
40
+ "@vaadin/dialog": "25.0.0-alpha1",
41
+ "@vaadin/overlay": "25.0.0-alpha1",
42
+ "@vaadin/vaadin-lumo-styles": "25.0.0-alpha1",
43
+ "@vaadin/vaadin-themable-mixin": "25.0.0-alpha1",
47
44
  "lit": "^3.0.0"
48
45
  },
49
46
  "devDependencies": {
50
- "@vaadin/a11y-base": "24.8.0-alpha8",
51
- "@vaadin/chai-plugins": "24.8.0-alpha8",
52
- "@vaadin/test-runner-commands": "24.8.0-alpha8",
47
+ "@vaadin/a11y-base": "25.0.0-alpha1",
48
+ "@vaadin/chai-plugins": "25.0.0-alpha1",
49
+ "@vaadin/test-runner-commands": "25.0.0-alpha1",
53
50
  "@vaadin/testing-helpers": "^1.1.0",
54
51
  "sinon": "^18.0.0"
55
52
  },
@@ -57,5 +54,5 @@
57
54
  "web-types.json",
58
55
  "web-types.lit.json"
59
56
  ],
60
- "gitHead": "d914bb8f669d7e3d1981feb8eac05688ab9870b4"
57
+ "gitHead": "b8c22a4a0c64156210d0daac96b43ae4e5526d49"
61
58
  }
package/src/vaadin-confirm-dialog-overlay.js CHANGED
@@ -3,23 +3,21 @@
3
3
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
6
+ import { css, html, LitElement } from 'lit';
7
+ import { ifDefined } from 'lit/directives/if-defined.js';
7
8
  import { defineCustomElement } from '@vaadin/component-base/src/define.js';
8
9
  import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
9
10
  import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
11
+ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
10
12
  import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js';
11
13
  import { dialogOverlay } from '@vaadin/dialog/src/vaadin-dialog-styles.js';
12
14
  import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
13
15
  import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
14
- import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
16
+ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
15
17
  import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
16
18
  import { ConfirmDialogBaseMixin } from './vaadin-confirm-dialog-base-mixin.js';
17
19
  import { confirmDialogOverlay } from './vaadin-confirm-dialog-overlay-styles.js';
18
20
 
19
- registerStyles('vaadin-confirm-dialog-overlay', [overlayStyles, dialogOverlay, confirmDialogOverlay], {
20
- moduleId: 'vaadin-confirm-dialog-overlay-styles',
21
- });
22
-
23
21
  /**
24
22
  * An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
25
23
  *
@@ -30,14 +28,19 @@ registerStyles('vaadin-confirm-dialog-overlay', [overlayStyles, dialogOverlay, c
30
28
  * @mixes ThemableMixin
31
29
  * @private
32
30
  */
33
- class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
31
+ class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
34
32
  static get is() {
35
33
  return 'vaadin-confirm-dialog-overlay';
36
34
  }
37
35
 
38
- static get template() {
36
+ static get styles() {
37
+ return [overlayStyles, dialogOverlay, confirmDialogOverlay];
38
+ }
39
+
40
+ /** @protected */
41
+ render() {
39
42
  return html`
40
- <div part="backdrop" id="backdrop" hidden$="[[!withBackdrop]]"></div>
43
+ <div part="backdrop" id="backdrop" ?hidden="${!this.withBackdrop}"></div>
41
44
  <div part="overlay" id="overlay" tabindex="0">
42
45
  <section id="resizerContainer" class="resizer-container">
43
46
  <header part="header"><slot name="header"></slot></header>
@@ -80,31 +83,35 @@ defineCustomElement(ConfirmDialogOverlay);
80
83
  * @private
81
84
  */
82
85
  class ConfirmDialogDialog extends ConfirmDialogBaseMixin(
83
- DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolymerElement))),
86
+ DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))),
84
87
  ) {
85
88
  static get is() {
86
89
  return 'vaadin-confirm-dialog-dialog';
87
90
  }
88
91
 
89
- static get template() {
90
- return html`
91
- <style>
92
- :host {
93
- display: none;
94
- }
95
- </style>
92
+ static get styles() {
93
+ return css`
94
+ :host {
95
+ display: none;
96
+ }
97
+ `;
98
+ }
96
99
 
100
+ /** @protected */
101
+ render() {
102
+ return html`
97
103
  <vaadin-confirm-dialog-overlay
98
104
  id="overlay"
99
- opened="[[opened]]"
100
- on-opened-changed="_onOverlayOpened"
101
- on-mousedown="_bringOverlayToFront"
102
- on-touchstart="_bringOverlayToFront"
103
- theme$="[[_theme]]"
104
- modeless="[[modeless]]"
105
- with-backdrop="[[!modeless]]"
106
- resizable$="[[resizable]]"
107
- aria-label$="[[ariaLabel]]"
105
+ .owner="${this}"
106
+ .opened="${this.opened}"
107
+ @opened-changed="${this._onOverlayOpened}"
108
+ @mousedown="${this._bringOverlayToFront}"
109
+ @touchstart="${this._bringOverlayToFront}"
110
+ theme="${ifDefined(this._theme)}"
111
+ .modeless="${this.modeless}"
112
+ .withBackdrop="${!this.modeless}"
113
+ ?resizable="${this.resizable}"
114
+ aria-label="${this.ariaLabel}"
108
115
  restore-focus-on-close
109
116
  focus-trap
110
117
  ></vaadin-confirm-dialog-overlay>
package/src/vaadin-confirm-dialog.d.ts CHANGED
@@ -3,7 +3,6 @@
3
3
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
4
4
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
5
  */
6
- import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
7
6
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
8
7
  import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
9
8
  import { type ConfirmDialogEventMap, ConfirmDialogMixin } from './vaadin-confirm-dialog-mixin.js';
@@ -59,7 +58,7 @@ export * from './vaadin-confirm-dialog-mixin.js';
59
58
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
60
59
  * @fires {CustomEvent} closed - Fired when the confirm dialog is closed.
61
60
  */
62
- declare class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(ControllerMixin(HTMLElement)))) {
61
+ declare class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(HTMLElement))) {
63
62
  addEventListener<K extends keyof ConfirmDialogEventMap>(
64
63
  type: K,
65
64
  listener: (this: ConfirmDialog, ev: ConfirmDialogEventMap[K]) => void,
package/src/vaadin-confirm-dialog.js CHANGED
@@ -5,10 +5,11 @@
5
5
  */
6
6
  import '@vaadin/button/src/vaadin-button.js';
7
7
  import './vaadin-confirm-dialog-overlay.js';
8
- import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
9
- import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
8
+ import { css, html, LitElement } from 'lit';
9
+ import { ifDefined } from 'lit/directives/if-defined.js';
10
10
  import { defineCustomElement } from '@vaadin/component-base/src/define.js';
11
11
  import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
12
+ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
12
13
  import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
13
14
  import { ConfirmDialogMixin } from './vaadin-confirm-dialog-mixin.js';
14
15
 
@@ -64,30 +65,37 @@ import { ConfirmDialogMixin } from './vaadin-confirm-dialog-mixin.js';
64
65
  * @customElement
65
66
  * @extends HTMLElement
66
67
  * @mixes ConfirmDialogMixin
67
- * @mixes ControllerMixin
68
68
  * @mixes ElementMixin
69
69
  * @mixes ThemePropertyMixin
70
70
  */
71
- class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(ControllerMixin(PolymerElement)))) {
72
- static get template() {
73
- return html`
74
- <style>
75
- :host,
76
- [hidden] {
77
- display: none !important;
78
- }
79
- </style>
71
+ class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(PolylitMixin(LitElement)))) {
72
+ static get is() {
73
+ return 'vaadin-confirm-dialog';
74
+ }
75
+
76
+ static get styles() {
77
+ return css`
78
+ :host,
79
+ [hidden] {
80
+ display: none !important;
81
+ }
82
+ `;
83
+ }
80
84
 
85
+ /** @protected */
86
+ render() {
87
+ return html`
81
88
  <vaadin-confirm-dialog-dialog
82
89
  id="dialog"
83
- opened="{{opened}}"
84
- overlay-class="[[overlayClass]]"
85
- aria-label="[[_getAriaLabel(header)]]"
86
- theme$="[[_theme]]"
90
+ .opened="${this.opened}"
91
+ .overlayClass="${this.overlayClass}"
92
+ aria-label="${this.header || 'confirmation'}"
93
+ theme="${ifDefined(this._theme)}"
87
94
  no-close-on-outside-click
88
- no-close-on-esc="[[noCloseOnEsc]]"
89
- content-height="[[_contentHeight]]"
90
- content-width="[[_contentWidth]]"
95
+ .noCloseOnEsc="${this.noCloseOnEsc}"
96
+ .contentHeight="${this._contentHeight}"
97
+ .contentWidth="${this._contentWidth}"
98
+ @opened-changed="${this._onOpenedChanged}"
91
99
  ></vaadin-confirm-dialog-dialog>
92
100
 
93
101
  <div hidden>
@@ -100,8 +108,9 @@ class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(C
100
108
  `;
101
109
  }
102
110
 
103
- static get is() {
104
- return 'vaadin-confirm-dialog';
111
+ /** @private */
112
+ _onOpenedChanged(event) {
113
+ this.opened = event.detail.value;
105
114
  }
106
115
 
107
116
  /**
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/confirm-dialog",
4
- "version": "24.8.0-alpha8",
4
+ "version": "25.0.0-alpha1",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-confirm-dialog",
11
- "description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha8/#/elements/vaadin-overlay) for the overlay styling documentation.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for theming:\n\nPart name | Description\n-----------------|-------------------------------------------\n`header` | The header element wrapper\n`message` | The message element wrapper\n`footer` | The footer element that wraps the buttons\n`cancel-button` | The \"Cancel\" button wrapper\n`confirm-button` | The \"Confirm\" button wrapper\n`reject-button` | The \"Reject\" button wrapper\n\nUse `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.\nAlso, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the\n`<vaadin-confirm-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Custom content\n\nThe following slots are available for providing custom content:\n\nSlot name | Description\n------------------|---------------------------\n`header` | Slot for header element\n`cancel-button` | Slot for \"Cancel\" button\n`confirm-button` | Slot for \"Confirm\" button\n`reject-button` | Slot for \"Reject\" button",
11
+ "description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-overlay) for the overlay styling documentation.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for theming:\n\nPart name | Description\n-----------------|-------------------------------------------\n`header` | The header element wrapper\n`message` | The message element wrapper\n`footer` | The footer element that wraps the buttons\n`cancel-button` | The \"Cancel\" button wrapper\n`confirm-button` | The \"Confirm\" button wrapper\n`reject-button` | The \"Reject\" button wrapper\n\nUse `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.\nAlso, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the\n`<vaadin-confirm-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Custom content\n\nThe following slots are available for providing custom content:\n\nSlot name | Description\n------------------|---------------------------\n`header` | Slot for header element\n`cancel-button` | Slot for \"Cancel\" button\n`confirm-button` | Slot for \"Confirm\" button\n`reject-button` | Slot for \"Reject\" button",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "accessible-description-ref",
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/confirm-dialog",
4
- "version": "24.8.0-alpha8",
4
+ "version": "25.0.0-alpha1",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,7 +16,7 @@
16
16
  "elements": [
17
17
  {
18
18
  "name": "vaadin-confirm-dialog",
19
- "description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.8.0-alpha8/#/elements/vaadin-overlay) for the overlay styling documentation.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for theming:\n\nPart name | Description\n-----------------|-------------------------------------------\n`header` | The header element wrapper\n`message` | The message element wrapper\n`footer` | The footer element that wraps the buttons\n`cancel-button` | The \"Cancel\" button wrapper\n`confirm-button` | The \"Confirm\" button wrapper\n`reject-button` | The \"Reject\" button wrapper\n\nUse `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.\nAlso, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the\n`<vaadin-confirm-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Custom content\n\nThe following slots are available for providing custom content:\n\nSlot name | Description\n------------------|---------------------------\n`header` | Slot for header element\n`cancel-button` | Slot for \"Cancel\" button\n`confirm-button` | Slot for \"Confirm\" button\n`reject-button` | Slot for \"Reject\" button",
19
+ "description": "`<vaadin-confirm-dialog>` is a Web Component for showing alerts and asking for user confirmation.\n\n```\n<vaadin-confirm-dialog cancel-button-visible>\n There are unsaved changes. Do you really want to leave?\n</vaadin-confirm-dialog>\n```\n\n### Styling\n\nThe `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`\ncomponent and use its shadow parts for styling.\nSee [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-overlay) for the overlay styling documentation.\n\nIn addition to `<vaadin-overlay>` parts, the following parts are available for theming:\n\nPart name | Description\n-----------------|-------------------------------------------\n`header` | The header element wrapper\n`message` | The message element wrapper\n`footer` | The footer element that wraps the buttons\n`cancel-button` | The \"Cancel\" button wrapper\n`confirm-button` | The \"Confirm\" button wrapper\n`reject-button` | The \"Reject\" button wrapper\n\nUse `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.\nAlso, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the\n`<vaadin-confirm-dialog-overlay>` component.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Custom content\n\nThe following slots are available for providing custom content:\n\nSlot name | Description\n------------------|---------------------------\n`header` | Slot for header element\n`cancel-button` | Slot for \"Cancel\" button\n`confirm-button` | Slot for \"Confirm\" button\n`reject-button` | Slot for \"Reject\" button",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
package/src/vaadin-lit-confirm-dialog-overlay.js DELETED
@@ -1,122 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2018 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import { css, html, LitElement } from 'lit';
7
- import { ifDefined } from 'lit/directives/if-defined.js';
8
- import { defineCustomElement } from '@vaadin/component-base/src/define.js';
9
- import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
10
- import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
11
- import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
12
- import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js';
13
- import { dialogOverlay } from '@vaadin/dialog/src/vaadin-dialog-styles.js';
14
- import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
15
- import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
16
- import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
17
- import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
18
- import { ConfirmDialogBaseMixin } from './vaadin-confirm-dialog-base-mixin.js';
19
- import { confirmDialogOverlay } from './vaadin-confirm-dialog-overlay-styles.js';
20
-
21
- /**
22
- * An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
23
- *
24
- * @customElement
25
- * @extends HTMLElement
26
- * @mixes DirMixin
27
- * @mixes OverlayMixin
28
- * @mixes ThemableMixin
29
- * @private
30
- */
31
- class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
32
- static get is() {
33
- return 'vaadin-confirm-dialog-overlay';
34
- }
35
-
36
- static get styles() {
37
- return [overlayStyles, dialogOverlay, confirmDialogOverlay];
38
- }
39
-
40
- /** @protected */
41
- render() {
42
- return html`
43
- <div part="backdrop" id="backdrop" ?hidden="${!this.withBackdrop}"></div>
44
- <div part="overlay" id="overlay" tabindex="0">
45
- <section id="resizerContainer" class="resizer-container">
46
- <header part="header"><slot name="header"></slot></header>
47
- <div part="content" id="content">
48
- <div part="message"><slot></slot></div>
49
- </div>
50
- <footer part="footer" role="toolbar">
51
- <div part="cancel-button">
52
- <slot name="cancel-button"></slot>
53
- </div>
54
- <div part="reject-button">
55
- <slot name="reject-button"></slot>
56
- </div>
57
- <div part="confirm-button">
58
- <slot name="confirm-button"></slot>
59
- </div>
60
- </footer>
61
- </section>
62
- </div>
63
- `;
64
- }
65
-
66
- /**
67
- * @protected
68
- * @override
69
- */
70
- ready() {
71
- super.ready();
72
-
73
- // ConfirmDialog has header and footer but does not use renderers
74
- this.setAttribute('has-header', '');
75
- this.setAttribute('has-footer', '');
76
- }
77
- }
78
-
79
- defineCustomElement(ConfirmDialogOverlay);
80
-
81
- /**
82
- * An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
83
- * @private
84
- */
85
- class ConfirmDialogDialog extends ConfirmDialogBaseMixin(
86
- DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))),
87
- ) {
88
- static get is() {
89
- return 'vaadin-confirm-dialog-dialog';
90
- }
91
-
92
- static get styles() {
93
- return css`
94
- :host {
95
- display: none;
96
- }
97
- `;
98
- }
99
-
100
- /** @protected */
101
- render() {
102
- return html`
103
- <vaadin-confirm-dialog-overlay
104
- id="overlay"
105
- .owner="${this}"
106
- .opened="${this.opened}"
107
- @opened-changed="${this._onOverlayOpened}"
108
- @mousedown="${this._bringOverlayToFront}"
109
- @touchstart="${this._bringOverlayToFront}"
110
- theme="${ifDefined(this._theme)}"
111
- .modeless="${this.modeless}"
112
- .withBackdrop="${!this.modeless}"
113
- ?resizable="${this.resizable}"
114
- aria-label="${this.ariaLabel}"
115
- restore-focus-on-close
116
- focus-trap
117
- ></vaadin-confirm-dialog-overlay>
118
- `;
119
- }
120
- }
121
-
122
- defineCustomElement(ConfirmDialogDialog);
package/src/vaadin-lit-confirm-dialog.d.ts DELETED
@@ -1,6 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2018 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- export * from './vaadin-confirm-dialog.js';
package/src/vaadin-lit-confirm-dialog.js DELETED
@@ -1,78 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2018 - 2025 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import '@vaadin/button/src/vaadin-lit-button.js';
7
- import './vaadin-lit-confirm-dialog-overlay.js';
8
- import { css, html, LitElement } from 'lit';
9
- import { ifDefined } from 'lit/directives/if-defined.js';
10
- import { defineCustomElement } from '@vaadin/component-base/src/define.js';
11
- import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
12
- import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
13
- import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
14
- import { ConfirmDialogMixin } from './vaadin-confirm-dialog-mixin.js';
15
-
16
- /**
17
- * LitElement based version of `<vaadin-confirm-dialog>` web component.
18
- *
19
- * ## Disclaimer
20
- *
21
- * This component is an experiment and not yet a part of Vaadin platform.
22
- * There is no ETA regarding specific Vaadin version where it'll land.
23
- * Feel free to try this code in your apps as per Apache 2.0 license.
24
- *
25
- * @extends HTMLElement
26
- * @mixes ConfirmDialogMixin
27
- * @mixes ElementMixin
28
- * @mixes ThemePropertyMixin
29
- */
30
- class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(PolylitMixin(LitElement)))) {
31
- static get is() {
32
- return 'vaadin-confirm-dialog';
33
- }
34
-
35
- static get styles() {
36
- return css`
37
- :host,
38
- [hidden] {
39
- display: none !important;
40
- }
41
- `;
42
- }
43
-
44
- /** @protected */
45
- render() {
46
- return html`
47
- <vaadin-confirm-dialog-dialog
48
- id="dialog"
49
- .opened="${this.opened}"
50
- .overlayClass="${this.overlayClass}"
51
- aria-label="${this.header || 'confirmation'}"
52
- theme="${ifDefined(this._theme)}"
53
- no-close-on-outside-click
54
- .noCloseOnEsc="${this.noCloseOnEsc}"
55
- .contentHeight="${this._contentHeight}"
56
- .contentWidth="${this._contentWidth}"
57
- @opened-changed="${this._onOpenedChanged}"
58
- ></vaadin-confirm-dialog-dialog>
59
-
60
- <div hidden>
61
- <slot name="header"></slot>
62
- <slot></slot>
63
- <slot name="cancel-button"></slot>
64
- <slot name="reject-button"></slot>
65
- <slot name="confirm-button"></slot>
66
- </div>
67
- `;
68
- }
69
-
70
- /** @private */
71
- _onOpenedChanged(event) {
72
- this.opened = event.detail.value;
73
- }
74
- }
75
-
76
- defineCustomElement(ConfirmDialog);
77
-
78
- export { ConfirmDialog };
package/theme/lumo/vaadin-lit-confirm-dialog.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import '@vaadin/button/theme/lumo/vaadin-lit-button.js';
2
- import './vaadin-confirm-dialog-styles.js';
3
- import '../../src/vaadin-lit-confirm-dialog.js';
package/theme/lumo/vaadin-lit-confirm-dialog.js DELETED
@@ -1,3 +0,0 @@
1
- import '@vaadin/button/theme/lumo/vaadin-lit-button.js';
2
- import './vaadin-confirm-dialog-styles.js';
3
- import '../../src/vaadin-lit-confirm-dialog.js';
package/theme/material/vaadin-confirm-dialog-styles.d.ts DELETED
@@ -1 +0,0 @@
1
- export {};
package/theme/material/vaadin-confirm-dialog-styles.js DELETED
@@ -1,41 +0,0 @@
1
- import { dialogOverlay } from '@vaadin/dialog/theme/material/vaadin-dialog-styles.js';
2
- import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
3
- import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
4
-
5
- registerStyles(
6
- 'vaadin-confirm-dialog-overlay',
7
- [
8
- overlay,
9
- dialogOverlay,
10
- css`
11
- [part='overlay'] {
12
- max-width: 100%;
13
- min-width: 0;
14
- }
15
-
16
- [part='content'] {
17
- min-width: 0;
18
- }
19
-
20
- [part='header'] ::slotted(h3) {
21
- margin-top: 0 !important;
22
- margin-bottom: 0 !important;
23
- margin-inline-start: 8px;
24
- }
25
-
26
- [part='message'] {
27
- width: 25em;
28
- max-width: 100%;
29
- margin-inline-end: 24px;
30
- }
31
-
32
- @media (max-width: 360px) {
33
- [part='footer'] {
34
- flex-direction: column-reverse;
35
- align-items: flex-end;
36
- }
37
- }
38
- `,
39
- ],
40
- { moduleId: 'material-confirm-dialog-overlay' },
41
- );
package/theme/material/vaadin-confirm-dialog.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import '@vaadin/button/theme/material/vaadin-button.js';
2
- import './vaadin-confirm-dialog-styles.js';
3
- import '../../src/vaadin-confirm-dialog.js';
package/theme/material/vaadin-confirm-dialog.js DELETED
@@ -1,3 +0,0 @@
1
- import '@vaadin/button/theme/material/vaadin-button.js';
2
- import './vaadin-confirm-dialog-styles.js';
3
- import '../../src/vaadin-confirm-dialog.js';
package/theme/material/vaadin-lit-confirm-dialog.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import '@vaadin/button/theme/material/vaadin-lit-button.js';
2
- import './vaadin-confirm-dialog-styles.js';
3
- import '../../src/vaadin-lit-confirm-dialog.js';
package/theme/material/vaadin-lit-confirm-dialog.js DELETED
@@ -1,3 +0,0 @@
1
- import '@vaadin/button/theme/material/vaadin-lit-button.js';
2
- import './vaadin-confirm-dialog-styles.js';
3
- import '../../src/vaadin-lit-confirm-dialog.js';
package/vaadin-lit-confirm-dialog.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './src/vaadin-confirm-dialog.js';
package/vaadin-lit-confirm-dialog.js DELETED
@@ -1,2 +0,0 @@
1
- import './theme/lumo/vaadin-lit-confirm-dialog.js';
2
- export * from './src/vaadin-lit-confirm-dialog.js';