@descope/web-components-ui 1.0.229 → 1.0.231

package/dist/umd/descope-notification-descope-notification-card-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[7401],{5400:(e,t,o)=>{o.r(t),o.d(t,{NotificationCardClass:()=>p}),o(6542);var r=o(2061),n=o(4567),a=o(1e3);const d=(0,n.iY)("notification-card"),p=(0,r.qC)((0,a.yk)({mappings:{hostMinWidth:{selector:()=>"::part(content)",property:"min-width"},fontFamily:{},fontSize:{},backgroundColor:{selector:()=>"::part(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"},borderRadius:[{selector:()=>"::part(content)",property:"border-radius"},{selector:()=>"::part(overlay)",property:"border-radius"}],verticalPadding:[{selector:()=>"::part(content)",property:"padding-top"},{selector:()=>"::part(content)",property:"padding-bottom"}],horizontalPadding:[{selector:()=>"::part(content)",property:"padding-right"},{selector:()=>"::part(content)",property:"padding-left"}]}}),(e=>class extends e{close(){this.baseElement.addEventListener("animationend",(()=>{this.remove(),this.dispatchEvent(new Event("card-closed"))})),this.setAttribute("opened","false")}}))((0,a.DM)({slots:[""],wrappedEleName:"vaadin-notification-card",style:()=>"\n    vaadin-notification-card {\n      box-shadow: none;\n    }\n    ::part(overlay) {\n      box-shadow: none;\n      background: none;\n    }\n    ",excludeAttrsSync:["tabindex"],componentName:d}));customElements.define(d,p)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[7401],{5400:(e,t,n)=>{n.r(t),n.d(t,{NotificationCardClass:()=>c}),n(6542);var o=n(2061),r=n(4567),i=n(1e3);const s=(0,r.iY)("notification-card"),a={content:()=>"vaadin-notification-card::part(content)",overlay:()=>"vaadin-notification-card::part(overlay)"},c=(0,o.qC)((0,i.yk)({mappings:{hostMinWidth:{selector:a.content,property:"min-width"},fontFamily:{},fontSize:{},backgroundColor:{selector:a.content},textColor:{property:"color"},boxShadow:{},borderWidth:{selector:a.content,property:"border-width"},borderColor:{selector:a.content,property:"border-color"},borderStyle:{selector:a.content,property:"border-style"},borderRadius:[{selector:a.content,property:"border-radius"},{selector:a.overlay,property:"border-radius"}],verticalPadding:[{selector:a.content,property:"padding-top"},{selector:a.content,property:"padding-bottom"}],horizontalPadding:[{selector:a.content,property:"padding-right"},{selector:a.content,property:"padding-left"}]}}),(e=>class extends e{close(){this.baseElement.addEventListener("animationend",(()=>{this.remove(),this.dispatchEvent(new Event("card-closed"))})),this.setAttribute("opened","false")}constructor(){super(),this.baseElement.innerHTML='\n      <div part="root">\n        <div part="content">\n          <slot></slot>\n        </div>\n        <div part="close">\n          <slot name="close"></slot>\n        </div>\n      </div>\n      ',this.closeEle=this.shadowRoot.querySelector('[part="close"]')}init(){super.init?.(),this.closeEle.onclick=()=>{this.close()}}}))((0,i.DM)({slots:[],wrappedEleName:"vaadin-notification-card",style:()=>'\n    vaadin-notification-card {\n      box-shadow: none;\n    }\n    ::part(overlay) {\n      box-shadow: none;\n      background: none;\n    }\n\n    [part="close"] {\n      cursor: pointer;\n      display: flex;\n    }\n\n    [part="content"] {\n      display: flex;\n      align-items: center;\n      flex-grow: 1;\n    }\n\n    [part="root"] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      width: 100%;\n    }\n    ',excludeAttrsSync:["tabindex"],componentName:s}));customElements.define(s,c)}}]);

package/dist/umd/descope-notification-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9655],{1845:(e,t,n)=>{n.r(t),n.d(t,{NotificationClass:()=>s}),n(6542);var i=n(4567);const a=window.customElements.get("vaadin-notification-container");if(!a)throw new Error("could not get vaadin-notification-container class");customElements.define((0,i.iY)("notification-container"),class extends a{}),n(5400);var o=n(2061),c=n(1e3);const r=(0,i.iY)("notification"),s=(0,o.qC)(c.e4,c.Ae,c._A,(e=>class t extends e{#e;constructor(){super();const e=this;Object.defineProperty(this.baseElement,"_container",{get:()=>(t._container||(t._container=document.createElement("descope-notification-container"),document.body.appendChild(t._container)),t._container.isConnected||e.parentNode.appendChild(t._container),t._container)}),Object.defineProperty(this.baseElement,"_card",{get:()=>e.#e});const n=this.baseElement._animatedRemoveNotificationCard;this.baseElement._animatedRemoveNotificationCard=()=>{this.#e=this.#e.shadowRoot.querySelector("vaadin-notification-card"),n.call(this.baseElement)}}init(){super.init?.(),this.createCard(),(0,i.oP)(this,this.#e),(0,i.tg)(this.#e,this,{includeAttrs:["opened"]}),this.baseElement.renderer=e=>{Array.from(this.childNodes).forEach((t=>e.appendChild(t)))}}get isContainerEmpty(){return!this.baseElement._container.children.length}removeContainer(){t._container.remove()}removeNotification(){this.remove(),this.isContainerEmpty&&this.removeContainer()}createCard(){this.#e=document.createElement("descope-notification-card"),this.#e.addEventListener("card-closed",this.removeNotification.bind(this))}}))((0,c.DM)({wrappedEleName:"vaadin-notification",excludeAttrsSync:["tabindex"],componentName:r}));customElements.define(r,s)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9655],{1845:(e,t,n)=>{n.r(t),n.d(t,{NotificationClass:()=>s}),n(6542);var i=n(4567);const o=window.customElements.get("vaadin-notification-container");if(!o)throw new Error("could not get vaadin-notification-container class");customElements.define((0,i.iY)("notification-container"),class extends o{}),n(5400);var a=n(2061),c=n(1e3);const r=(0,i.iY)("notification"),s=(0,a.qC)(c.e4,c.Ae,c._A,(e=>class t extends e{#e;constructor(){super();const e=this;Object.defineProperty(this.baseElement,"_container",{get:()=>(t._container||(t._container=document.createElement("descope-notification-container"),document.body.appendChild(t._container)),t._container.isConnected||setTimeout((()=>e.parentNode.appendChild(t._container))),t._container)}),Object.defineProperty(this.baseElement,"_card",{get:()=>e.#e}),this.baseElement._removeNotificationCard=this.close.bind(this)}close(){this.#e.close()}init(){super.init?.(),this.createCard(),(0,i.oP)(this,this.#e),(0,i.tg)(this.#e,this,{includeAttrs:["opened"]}),this.baseElement.renderer=e=>{Array.from(this.childNodes).forEach((t=>e.appendChild(t)))}}get isContainerEmpty(){return!t._container.children.length}removeContainer(){t._container.remove()}removeNotification(){this.remove(),this.isContainerEmpty&&this.removeContainer()}createCard(){this.#e=document.createElement("descope-notification-card"),this.#e.addEventListener("card-closed",this.removeNotification.bind(this))}}))((0,c.DM)({wrappedEleName:"vaadin-notification",excludeAttrsSync:["tabindex"],componentName:r}));customElements.define(r,s)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.229",
+  "version": "1.0.231",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/descope-notification/NotificationClass.js

@@ -33,7 +33,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;
@@ -46,13 +46,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() {
@@ -68,8 +67,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
@@ -88,21 +88,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();
-    //   }
-    // }
   };
 
 export const NotificationClass = compose(

package/src/components/descope-notification/descope-notification-card/NotificationCardClass.js

@@ -10,7 +10,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();
@@ -19,38 +19,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)',
+};
+
 export 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 {
@@ -60,6 +90,24 @@ export 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,

package/src/theme/components/notificationCard.js

@@ -1,6 +1,6 @@
 import globals from '../globals';
 import { getThemeRefs } from '../../helpers/themeHelpers';
-import { NotificationCardClass } from '../../components/descope-notification/descope-notification-card';
+import { NotificationCardClass } from '../../components/descope-notification/descope-notification-card/NotificationCardClass';
 
 const globalRefs = getThemeRefs(globals);
 const vars = NotificationCardClass.cssVarList;
@@ -16,10 +16,7 @@ const notification = {
   [vars.boxShadow]: `${globalRefs.shadow.wide.xl} ${shadowColor}, ${globalRefs.shadow.narrow.xl} ${shadowColor}`,
   [vars.verticalPadding]: '0.45em',
   [vars.horizontalPadding]: '1em',
-  [vars.verticalMargin]: '1em',
-  [vars.horizontalMargin]: '1em',
   [vars.borderRadius]: globalRefs.radius.md,
-  [vars.contentSpacing]: '0.5em',
 
   _bordered: {
     [vars.borderWidth]: globalRefs.border.sm,