@descope/web-components-ui 1.0.230 → 1.0.231

package/dist/cjs/index.cjs.js

@@ -4273,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({
@@ -4724,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({
@@ -8356,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();
@@ -8365,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 {
@@ -8406,6 +8436,24 @@ 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,
@@ -8693,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;
@@ -8706,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() {
@@ -8728,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