@descope/web-components-ui 1.0.229 → 1.0.231

package/dist/cjs/index.cjs.js

@@ -3,7 +3,6 @@
 var merge = require('lodash.merge');
 var set = require('lodash.set');
 var Color = require('color');
-require('@vaadin/notification');
 
 const DESCOPE_PREFIX = 'descope';
 const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
@@ -4274,14 +4273,14 @@ class RawLink extends createBaseClass({ componentName: componentName$m, baseSele
   }
 }
 
-const selectors$1 = {
+const selectors$2 = {
   host: { selector: () => ':host' },
   anchor: {},
   wrapper: { selector: () => ':host > div' },
   text: { selector: () => TextClass.componentName },
 };
 
-const { anchor, text: text$1, host: host$a, wrapper: wrapper$1 } = selectors$1;
+const { anchor, text: text$1, host: host$a, wrapper: wrapper$1 } = selectors$2;
 
 const LinkClass = compose(
   createStyleMixin({
@@ -4725,12 +4724,12 @@ class RawLoaderLinear extends createBaseClass({ componentName: componentName$i,
   }
 }
 
-const selectors = {
+const selectors$1 = {
   after: { selector: '::after' },
   host: { selector: () => ':host' },
 };
 
-const { after, host: host$7 } = selectors;
+const { after, host: host$7 } = selectors$1;
 
 const LoaderLinearClass = compose(
   createStyleMixin({
@@ -8357,7 +8356,7 @@ const notificationCardMixin = (superclass) =>
       // if animation is not applied to the element, the node will not be removed
       // from the DOM. We should avoid that. So, if in any case we allow
       // customizing the animation - we should check if animation is applied
-      // and if it's not applied - remove the elemnt from the DOM and dispatch
+      // and if it's not applied - remove the element from the DOM and dispatch
       // `card-closed` event.
       this.baseElement.addEventListener('animationend', () => {
         this.remove();
@@ -8366,38 +8365,68 @@ const notificationCardMixin = (superclass) =>
 
       this.setAttribute('opened', 'false');
     }
+
+    constructor() {
+      super();
+
+      this.baseElement.innerHTML = `
+      <div part="root">
+        <div part="content">
+          <slot></slot>
+        </div>
+        <div part="close">
+          <slot name="close"></slot>
+        </div>
+      </div>
+      `;
+
+      this.closeEle = this.shadowRoot.querySelector('[part="close"]');
+    }
+
+    init() {
+      super.init?.();
+
+      this.closeEle.onclick = () => {
+        this.close();
+      };
+    }
   };
 
+const selectors = {
+  content: () => 'vaadin-notification-card::part(content)',
+  overlay: () => 'vaadin-notification-card::part(overlay)',
+};
+
 const NotificationCardClass = compose(
   createStyleMixin({
     mappings: {
-      hostMinWidth: { selector: () => '::part(content)', property: 'min-width' },
+      hostMinWidth: { selector: selectors.content, property: 'min-width' },
       fontFamily: {},
       fontSize: {},
-      backgroundColor: { selector: () => '::part(content)' },
+      backgroundColor: { selector: selectors.content },
       textColor: { property: 'color' },
       boxShadow: {},
-      borderWidth: { selector: () => '::part(content)', property: 'border-width' },
-      borderColor: { selector: () => '::part(content)', property: 'border-color' },
-      borderStyle: { selector: () => '::part(content)', property: 'border-style' },
+      borderWidth: { selector: selectors.content, property: 'border-width' },
+      borderColor: { selector: selectors.content, property: 'border-color' },
+      borderStyle: { selector: selectors.content, property: 'border-style' },
       borderRadius: [
-        { selector: () => '::part(content)', property: 'border-radius' },
-        { selector: () => '::part(overlay)', property: 'border-radius' },
+        { selector: selectors.content, property: 'border-radius' },
+        { selector: selectors.overlay, property: 'border-radius' },
       ],
       verticalPadding: [
-        { selector: () => '::part(content)', property: 'padding-top' },
-        { selector: () => '::part(content)', property: 'padding-bottom' },
+        { selector: selectors.content, property: 'padding-top' },
+        { selector: selectors.content, property: 'padding-bottom' },
       ],
       horizontalPadding: [
-        { selector: () => '::part(content)', property: 'padding-right' },
-        { selector: () => '::part(content)', property: 'padding-left' },
+        { selector: selectors.content, property: 'padding-right' },
+        { selector: selectors.content, property: 'padding-left' },
       ],
     },
   }),
   notificationCardMixin
 )(
   createProxy({
-    slots: [''],
+    slots: [],
     wrappedEleName: 'vaadin-notification-card',
     style: () => `
     vaadin-notification-card {
@@ -8407,14 +8436,30 @@ const NotificationCardClass = compose(
       box-shadow: none;
       background: none;
     }
+
+    [part="close"] {
+      cursor: pointer;
+      display: flex;
+    }
+
+    [part="content"] {
+      display: flex;
+      align-items: center;
+      flex-grow: 1;
+    }
+
+    [part="root"] {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
     `,
     excludeAttrsSync: ['tabindex'],
     componentName: componentName$2,
   })
 );
 
-customElements.define(componentName$2, NotificationCardClass);
-
 const globalRefs = getThemeRefs(globals);
 const vars$1 = NotificationCardClass.cssVarList;
 
@@ -8429,10 +8474,7 @@ const notification = {
   [vars$1.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
   [vars$1.verticalPadding]: '0.45em',
   [vars$1.horizontalPadding]: '1em',
-  [vars$1.verticalMargin]: '1em',
-  [vars$1.horizontalMargin]: '1em',
   [vars$1.borderRadius]: globalRefs.radius.md,
-  [vars$1.contentSpacing]: '0.5em',
 
   _bordered: {
     [vars$1.borderWidth]: globalRefs.border.sm,
@@ -8699,7 +8741,7 @@ const NotificationMixin = (superclass) =>
           if (!NotificationMixinClass._container.isConnected) {
             // Then, we're adding the container to the parentNode, which is the desired location
             // for us on the DOM
-            that.parentNode.appendChild(NotificationMixinClass._container);
+            setTimeout(() => that.parentNode.appendChild(NotificationMixinClass._container));
           }
 
           return NotificationMixinClass._container;
@@ -8712,13 +8754,12 @@ const NotificationMixin = (superclass) =>
         },
       });
 
-      // we want to replace the card with vaadin's notification card, so the notification removal process
-      // will work properly.
-      const origAnimatedRemoveNotificationCard = this.baseElement._animatedRemoveNotificationCard;
-      this.baseElement._animatedRemoveNotificationCard = () => {
-        this.#card = this.#card.shadowRoot.querySelector('vaadin-notification-card');
-        origAnimatedRemoveNotificationCard.call(this.baseElement);
-      };
+      // we want to replace the card with vaadin's remove notification so it will not throw
+      this.baseElement._removeNotificationCard = this.close.bind(this);
+    }
+
+    close() {
+      this.#card.close();
     }
 
     init() {
@@ -8734,8 +8775,9 @@ const NotificationMixin = (superclass) =>
       };
     }
 
+    // eslint-disable-next-line class-methods-use-this
     get isContainerEmpty() {
-      return !this.baseElement._container.children.length;
+      return !NotificationMixinClass._container.children.length;
     }
 
     // eslint-disable-next-line class-methods-use-this
@@ -8754,21 +8796,6 @@ const NotificationMixin = (superclass) =>
       this.#card = document.createElement('descope-notification-card');
       this.#card.addEventListener('card-closed', this.removeNotification.bind(this));
     }
-
-    // animatedRemoveNotificationCard() {
-    //   const vaadinCard = this.baseElement._card.shadowRoot.querySelector('vaadin-notification-card');
-    //   vaadinCard.setAttribute('closing', '');
-    //   const name = getComputedStyle(vaadinCard).getPropertyValue('animation-name');
-    //   if (name && name !== 'none') {
-    //     const listener = () => {
-    //       this._removeNotificationCard();
-    //       vaadinCard.removeEventListener('animationend', listener);
-    //     };
-    //     vaadinCard.addEventListener('animationend', listener);
-    //   } else {
-    //     this._removeNotificationCard();
-    //   }
-    // }
   };
 
 const NotificationClass = compose(