@descope/web-components-ui 1.0.247 → 1.0.248

package/dist/index.esm.js

@@ -11,6 +11,7 @@ import '@vaadin/grid';
 import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
 import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
 import '@vaadin/multi-select-combo-box';
+import '@vaadin/dialog';
 import merge from 'lodash.merge';
 import set from 'lodash.set';
 import Color from 'color';
@@ -7965,6 +7966,111 @@ const BadgeClass = compose(
 
 customElements.define(componentName$3, BadgeClass);
 
+const componentName$2 = getComponentName('modal');
+
+const customMixin = (superclass) =>
+  class ModalMixinClass extends superclass {
+    get opened() {
+      return this.getAttribute('opened') === 'true';
+    }
+
+    handleOpened() {
+      forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });
+      if (this.opened) {
+        this.style.display = '';
+      } else {
+        this.style.display = 'none';
+      }
+    }
+
+    init() {
+      super.init?.();
+      this.style.display = 'none';
+
+      // vaadin-dialog might not be loaded in time
+      // in order to make sure it's loaded before this block is running
+      // we are wrapping it with setTimeout
+      setTimeout(() => {
+        // we want to sync descope-modal content through vaadin-dialog into the overlay
+        // so we are adding a slot to the overlay, which allows us to forward the content from
+        // vaadin-dialog to vaadin-dialog-overlay
+        this.baseElement.shadowRoot
+          .querySelector('vaadin-dialog-overlay')
+          .appendChild(document.createElement('slot'));
+
+        this.#overrideOverlaySettings();
+
+        // we need to always open the modal in `opened=false`
+        // to prevent it from rendering outside the dialog
+        // first, we have to run `overrideOverlaySettings` to setup
+        // the component.
+        this.handleOpened();
+      });
+    }
+
+    // the default vaadin behavior is to attach the overlay to the body when opened
+    // we do not want that because it's difficult to style the overlay in this way
+    // so we override it to open inside the shadow DOM
+    #overrideOverlaySettings() {
+      const overlay = this.baseElement.shadowRoot.querySelector('vaadin-dialog-overlay');
+
+      overlay._attachOverlay = () => {
+        overlay.bringToFront();
+        this.baseElement.setAttribute('style', 'display:flex!important;');
+      };
+      overlay._detachOverlay = () => {
+        this.baseElement.style.display = 'none';
+      };
+      overlay._enterModalState = () => {};
+
+      overlay.close = () => false;
+    }
+  };
+
+const ModalClass = compose(
+  createStyleMixin({
+    mappings: {
+      overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },
+      overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },
+      overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },
+    },
+  }),
+  portalMixin({
+    name: 'overlay',
+    selector: '',
+    mappings: {
+      hostDisplay: {
+        selector: () => ':host(.descope-modal)',
+        property: 'display',
+        important: true,
+      },
+      backgroundColor: [
+        { selector: () => '::part(content)', property: 'background-color' },
+        { selector: () => '::part(overlay)', property: 'background-color' },
+      ],
+      width: { selector: () => '::part(overlay)', property: 'width' },
+      shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
+    },
+    forward: {
+      include: false,
+      attributes: ['opened'],
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: [''],
+    wrappedEleName: 'vaadin-dialog',
+    style: () => ``,
+    excludeAttrsSync: ['tabindex', 'opened'],
+    componentName: componentName$2,
+  })
+);
+
+customElements.define(componentName$2, ModalClass);
+
 const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
 
 const transformTheme = (theme, path, getTransformation) => {
@@ -8416,7 +8522,7 @@ var button$1 = /*#__PURE__*/Object.freeze({
   vars: vars$w
 });
 
-const componentName$2 = getComponentName('input-wrapper');
+const componentName$1 = getComponentName('input-wrapper');
 const globalRefs$h = getThemeRefs(globals);
 
 const [theme$1, refs, vars$v] = createHelperVars(
@@ -8485,7 +8591,7 @@ const [theme$1, refs, vars$v] = createHelperVars(
       backgroundColor: globalRefs$h.colors.surface.main,
     },
   },
-  componentName$2
+  componentName$1
 );
 
 var inputWrapper = /*#__PURE__*/Object.freeze({
@@ -9528,109 +9634,6 @@ var buttonMultiSelectionGroup$1 = /*#__PURE__*/Object.freeze({
   vars: vars$6
 });
 
-const componentName$1 = getComponentName('modal');
-
-const customMixin = (superclass) =>
-  class ModalMixinClass extends superclass {
-    get opened() {
-      return this.getAttribute('opened') === 'true';
-    }
-
-    handleOpened() {
-      forwardAttrs(this, this.baseElement, { includeAttrs: ['opened'] });
-      if (this.opened) {
-        this.style.display = '';
-      } else {
-        this.style.display = 'none';
-      }
-    }
-
-    init() {
-      super.init?.();
-      this.style.display = 'none';
-
-      // vaadin-dialog might not be loaded in time
-      // in order to make sure it's loaded before this block is running
-      // we are wrapping it with setTimeout
-      setTimeout(() => {
-        // we want to sync descope-modal content through vaadin-dialog into the overlay
-        // so we are adding a slot to the overlay, which allows us to forward the content from
-        // vaadin-dialog to vaadin-dialog-overlay
-        this.baseElement.shadowRoot
-          .querySelector('vaadin-dialog-overlay')
-          .appendChild(document.createElement('slot'));
-
-        this.#overrideOverlaySettings();
-
-        // we need to always open the modal in `opened=false`
-        // to prevent it from rendering outside the dialog
-        // first, we have to run `overrideOverlaySettings` to setup
-        // the component.
-        this.handleOpened();
-      });
-    }
-
-    // the default vaadin behavior is to attach the overlay to the body when opened
-    // we do not want that because it's difficult to style the overlay in this way
-    // so we override it to open inside the shadow DOM
-    #overrideOverlaySettings() {
-      const overlay = this.baseElement.shadowRoot.querySelector('vaadin-dialog-overlay');
-
-      overlay._attachOverlay = () => {
-        overlay.bringToFront();
-        this.baseElement.setAttribute('style', 'display:flex!important;');
-      };
-      overlay._detachOverlay = () => {
-        this.baseElement.style.display = 'none';
-      };
-      overlay._enterModalState = () => {};
-
-      overlay.close = () => false;
-    }
-  };
-
-const ModalClass = compose(
-  createStyleMixin({
-    mappings: {
-      overlayBackgroundColor: { property: () => ModalClass.cssVarList.overlay.backgroundColor },
-      overlayShadow: { property: () => ModalClass.cssVarList.overlay.shadow },
-      overlayWidth: { property: () => ModalClass.cssVarList.overlay.width },
-    },
-  }),
-  portalMixin({
-    name: 'overlay',
-    selector: '',
-    mappings: {
-      hostDisplay: {
-        selector: () => ':host(.descope-modal)',
-        property: 'display',
-        important: true,
-      },
-      backgroundColor: [
-        { selector: () => '::part(content)', property: 'background-color' },
-        { selector: () => '::part(overlay)', property: 'background-color' },
-      ],
-      width: { selector: () => '::part(overlay)', property: 'width' },
-      shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
-    },
-    forward: {
-      include: false,
-      attributes: ['opened'],
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin,
-  customMixin
-)(
-  createProxy({
-    slots: [''],
-    wrappedEleName: 'vaadin-dialog',
-    style: () => ``,
-    excludeAttrsSync: ['tabindex', 'opened'],
-    componentName: componentName$1,
-  })
-);
-
 const globalRefs$4 = getThemeRefs(globals);
 
 const compVars = ModalClass.cssVarList;
@@ -10031,5 +10034,5 @@ const vars = Object.keys(components).reduce(
 const defaultTheme = { globals, components: theme };
 const themeVars = { globals: vars$x, components: vars };
 
-export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, MultiSelectComboBoxClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
+export { BadgeClass, ButtonClass, ButtonMultiSelectionGroupClass, ButtonSelectionGroupClass, CheckboxClass, ContainerClass, DividerClass, EmailFieldClass, GridClass, ImageClass, LinkClass, LoaderLinearClass, LoaderRadialClass, LogoClass, ModalClass, MultiSelectComboBoxClass, NewPasswordClass, NumberFieldClass, PasscodeClass, PasswordClass, PhoneFieldClass, PhoneFieldInputBoxClass, RecaptchaClass, SwitchToggleClass, TextAreaClass, TextClass, TextFieldClass, TotpImageClass, UploadFileClass, componentsThemeManager, createComponentsTheme, defaultTheme, genColor, globalsThemeToStyle, themeToStyle, themeVars };
 //# sourceMappingURL=index.esm.js.map