@vaadin/confirm-dialog 24.8.4 → 25.0.0-alpha10

package/src/vaadin-lit-confirm-dialog-overlay.js

@@ -1,122 +0,0 @@
-/**
- * @license
- * Copyright (c) 2018 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css, html, LitElement } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { DialogBaseMixin } from '@vaadin/dialog/src/vaadin-dialog-base-mixin.js';
-import { dialogOverlay } from '@vaadin/dialog/src/vaadin-dialog-styles.js';
-import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import { ConfirmDialogBaseMixin } from './vaadin-confirm-dialog-base-mixin.js';
-import { confirmDialogOverlay } from './vaadin-confirm-dialog-overlay-styles.js';
-
-/**
- * An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
- *
- * @customElement
- * @extends HTMLElement
- * @mixes DirMixin
- * @mixes OverlayMixin
- * @mixes ThemableMixin
- * @private
- */
-class ConfirmDialogOverlay extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-confirm-dialog-overlay';
-  }
-
-  static get styles() {
-    return [overlayStyles, dialogOverlay, confirmDialogOverlay];
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <div part="backdrop" id="backdrop" ?hidden="${!this.withBackdrop}"></div>
-      <div part="overlay" id="overlay" tabindex="0">
-        <section id="resizerContainer" class="resizer-container">
-          <header part="header"><slot name="header"></slot></header>
-          <div part="content" id="content">
-            <div part="message"><slot></slot></div>
-          </div>
-          <footer part="footer" role="toolbar">
-            <div part="cancel-button">
-              <slot name="cancel-button"></slot>
-            </div>
-            <div part="reject-button">
-              <slot name="reject-button"></slot>
-            </div>
-            <div part="confirm-button">
-              <slot name="confirm-button"></slot>
-            </div>
-          </footer>
-        </section>
-      </div>
-    `;
-  }
-
-  /**
-   * @protected
-   * @override
-   */
-  ready() {
-    super.ready();
-
-    // ConfirmDialog has header and footer but does not use renderers
-    this.setAttribute('has-header', '');
-    this.setAttribute('has-footer', '');
-  }
-}
-
-defineCustomElement(ConfirmDialogOverlay);
-
-/**
- * An element used internally by `<vaadin-confirm-dialog>`. Not intended to be used separately.
- * @private
- */
-class ConfirmDialogDialog extends ConfirmDialogBaseMixin(
-  DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))),
-) {
-  static get is() {
-    return 'vaadin-confirm-dialog-dialog';
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: none;
-      }
-    `;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <vaadin-confirm-dialog-overlay
-        id="overlay"
-        .owner="${this}"
-        .opened="${this.opened}"
-        @opened-changed="${this._onOverlayOpened}"
-        @mousedown="${this._bringOverlayToFront}"
-        @touchstart="${this._bringOverlayToFront}"
-        theme="${ifDefined(this._theme)}"
-        .modeless="${this.modeless}"
-        .withBackdrop="${!this.modeless}"
-        ?resizable="${this.resizable}"
-        aria-label="${this.ariaLabel}"
-        restore-focus-on-close
-        focus-trap
-      ></vaadin-confirm-dialog-overlay>
-    `;
-  }
-}
-
-defineCustomElement(ConfirmDialogDialog);

package/src/vaadin-lit-confirm-dialog.js

@@ -1,78 +0,0 @@
-/**
- * @license
- * Copyright (c) 2018 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import '@vaadin/button/src/vaadin-lit-button.js';
-import './vaadin-lit-confirm-dialog-overlay.js';
-import { css, html, LitElement } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import { ConfirmDialogMixin } from './vaadin-confirm-dialog-mixin.js';
-
-/**
- * LitElement based version of `<vaadin-confirm-dialog>` web component.
- *
- * ## Disclaimer
- *
- * This component is an experiment and not yet a part of Vaadin platform.
- * There is no ETA regarding specific Vaadin version where it'll land.
- * Feel free to try this code in your apps as per Apache 2.0 license.
- *
- * @extends HTMLElement
- * @mixes ConfirmDialogMixin
- * @mixes ElementMixin
- * @mixes ThemePropertyMixin
- */
-class ConfirmDialog extends ConfirmDialogMixin(ElementMixin(ThemePropertyMixin(PolylitMixin(LitElement)))) {
-  static get is() {
-    return 'vaadin-confirm-dialog';
-  }
-
-  static get styles() {
-    return css`
-      :host,
-      [hidden] {
-        display: none !important;
-      }
-    `;
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <vaadin-confirm-dialog-dialog
-        id="dialog"
-        .opened="${this.opened}"
-        .overlayClass="${this.overlayClass}"
-        aria-label="${this.header || 'confirmation'}"
-        theme="${ifDefined(this._theme)}"
-        no-close-on-outside-click
-        .noCloseOnEsc="${this.noCloseOnEsc}"
-        .contentHeight="${this._contentHeight}"
-        .contentWidth="${this._contentWidth}"
-        @opened-changed="${this._onOpenedChanged}"
-      ></vaadin-confirm-dialog-dialog>
-
-      <div hidden>
-        <slot name="header"></slot>
-        <slot></slot>
-        <slot name="cancel-button"></slot>
-        <slot name="reject-button"></slot>
-        <slot name="confirm-button"></slot>
-      </div>
-    `;
-  }
-
-  /** @private */
-  _onOpenedChanged(event) {
-    this.opened = event.detail.value;
-  }
-}
-
-defineCustomElement(ConfirmDialog);
-
-export { ConfirmDialog };

package/theme/lumo/vaadin-lit-confirm-dialog.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/button/theme/lumo/vaadin-lit-button.js';
-import './vaadin-confirm-dialog-styles.js';
-import '../../src/vaadin-lit-confirm-dialog.js';

package/theme/lumo/vaadin-lit-confirm-dialog.js

@@ -1,3 +0,0 @@
-import '@vaadin/button/theme/lumo/vaadin-lit-button.js';
-import './vaadin-confirm-dialog-styles.js';
-import '../../src/vaadin-lit-confirm-dialog.js';

package/theme/material/vaadin-confirm-dialog-styles.d.ts

@@ -1 +0,0 @@
-export {};

package/theme/material/vaadin-confirm-dialog-styles.js

@@ -1,41 +0,0 @@
-import { dialogOverlay } from '@vaadin/dialog/theme/material/vaadin-dialog-styles.js';
-import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-confirm-dialog-overlay',
-  [
-    overlay,
-    dialogOverlay,
-    css`
-      [part='overlay'] {
-        max-width: 100%;
-        min-width: 0;
-      }
-
-      [part='content'] {
-        min-width: 0;
-      }
-
-      [part='header'] ::slotted(h3) {
-        margin-top: 0 !important;
-        margin-bottom: 0 !important;
-        margin-inline-start: 8px;
-      }
-
-      [part='message'] {
-        width: 25em;
-        max-width: 100%;
-        margin-inline-end: 24px;
-      }
-
-      @media (max-width: 360px) {
-        [part='footer'] {
-          flex-direction: column-reverse;
-          align-items: flex-end;
-        }
-      }
-    `,
-  ],
-  { moduleId: 'material-confirm-dialog-overlay' },
-);

package/theme/material/vaadin-confirm-dialog.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/button/theme/material/vaadin-button.js';
-import './vaadin-confirm-dialog-styles.js';
-import '../../src/vaadin-confirm-dialog.js';

package/theme/material/vaadin-confirm-dialog.js

@@ -1,3 +0,0 @@
-import '@vaadin/button/theme/material/vaadin-button.js';
-import './vaadin-confirm-dialog-styles.js';
-import '../../src/vaadin-confirm-dialog.js';

package/theme/material/vaadin-lit-confirm-dialog.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/button/theme/material/vaadin-lit-button.js';
-import './vaadin-confirm-dialog-styles.js';
-import '../../src/vaadin-lit-confirm-dialog.js';

package/theme/material/vaadin-lit-confirm-dialog.js

@@ -1,3 +0,0 @@
-import '@vaadin/button/theme/material/vaadin-lit-button.js';
-import './vaadin-confirm-dialog-styles.js';
-import '../../src/vaadin-lit-confirm-dialog.js';

package/vaadin-lit-confirm-dialog.d.ts

@@ -1 +0,0 @@
-export * from './src/vaadin-confirm-dialog.js';

package/vaadin-lit-confirm-dialog.js

@@ -1,2 +0,0 @@
-import './theme/lumo/vaadin-lit-confirm-dialog.js';
-export * from './src/vaadin-lit-confirm-dialog.js';