@descope/web-components-ui 1.0.230 → 1.0.231

package/dist/index.esm.js

@@ -1918,12 +1918,12 @@ class RawLoaderLinear extends createBaseClass({ componentName: componentName$y,
   }
 }
 
-const selectors$1 = {
+const selectors$2 = {
   after: { selector: '::after' },
   host: { selector: () => ':host' },
 };
 
-const { after: after$1, host: host$d } = selectors$1;
+const { after: after$1, host: host$d } = selectors$2;
 
 const LoaderLinearClass = compose(
   createStyleMixin({
@@ -2353,14 +2353,14 @@ class RawLink extends createBaseClass({ componentName: componentName$s, baseSele
   }
 }
 
-const selectors = {
+const selectors$1 = {
   host: { selector: () => ':host' },
   anchor: {},
   wrapper: { selector: () => ':host > div' },
   text: { selector: () => TextClass.componentName },
 };
 
-const { anchor, text: text$2, host: host$a, wrapper: wrapper$1 } = selectors;
+const { anchor, text: text$2, host: host$a, wrapper: wrapper$1 } = selectors$1;
 
 const LinkClass = compose(
   createStyleMixin({
@@ -8690,7 +8690,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();
@@ -8699,38 +8699,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 {
@@ -8740,6 +8770,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,