@trycourier/courier-ui-toast 1.0.2 → 1.0.4

package/dist/index.js

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@trycourier/courier-ui-core"),require("@trycourier/courier-js")):"function"==typeof define&&define.amd?define(["exports","@trycourier/courier-ui-core","@trycourier/courier-js"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).CourierUIToast={},e.CourierUICore,e.CourierJS)}(this,(function(e,t,s){"use strict";var i=Object.defineProperty,o=(e,t,s)=>((e,t,s)=>t in e?i(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s)(e,"symbol"!=typeof t?t+"":t,s);const n={item:{backgroundColor:t.CourierColors.white[500],hoverBackgroundColor:t.CourierColors.gray[200],activeBackgroundColor:t.CourierColors.gray[500],shadow:`0px 4px 8px -2px ${t.CourierColors.black[50020]}`,border:`1px solid ${t.CourierColors.gray[500]}`,borderRadius:"8px",title:{size:"11pt",weight:"400",color:t.CourierColors.black[500]},body:{size:"11pt",weight:"400",color:t.CourierColors.gray[600]},icon:{color:t.CourierColors.black[500],svg:t.CourierIconSVGs.inbox},dismissIcon:{color:t.CourierColors.black[500],svg:t.CourierIconSVGs.remove},autoDismissBarColor:t.CourierColors.blue[400],actions:{backgroundColor:"transparent",hoverBackgroundColor:t.CourierColors.gray[200],activeBackgroundColor:t.CourierColors.gray[500],border:`1px solid ${t.CourierColors.gray[500]}`,borderRadius:"4px",shadow:"0px 1px 2px 0px rgba(0, 0, 0, 0.06)",font:{color:t.CourierColors.black[500],size:"14px"}}}},r={item:{backgroundColor:t.CourierColors.black[500],hoverBackgroundColor:t.CourierColors.gray[400],activeBackgroundColor:t.CourierColors.gray[600],shadow:`0px 4px 8px -2px ${t.CourierColors.gray[400]}`,border:`1px solid ${t.CourierColors.black[500]}`,borderRadius:"8px",title:{size:"11pt",weight:"400",color:t.CourierColors.white[500]},body:{size:"11pt",weight:"400",color:t.CourierColors.gray[500]},icon:{color:t.CourierColors.white[500],svg:t.CourierIconSVGs.inbox},dismissIcon:{color:t.CourierColors.white[500],svg:t.CourierIconSVGs.remove},autoDismissBarColor:t.CourierColors.blue[400],actions:{backgroundColor:t.CourierColors.black[400],hoverBackgroundColor:t.CourierColors.white[50010],activeBackgroundColor:t.CourierColors.white[50020],border:`1px solid ${t.CourierColors.gray[400]}`,borderRadius:"4px",shadow:`0px 1px 2px 0px ${t.CourierColors.white[50010]}`,font:{color:t.CourierColors.white[500],size:"14px"}}}},a=(e,t)=>{var s,i,o,a,l,d,h,c;const u="light"===e?n:r;return{item:{...u.item,...t.item,title:{...null==(s=u.item)?void 0:s.title,...null==(i=t.item)?void 0:i.title},body:{...null==(o=u.item)?void 0:o.body,...null==(a=t.item)?void 0:a.body},icon:{...null==(l=u.item)?void 0:l.icon,...null==(d=t.item)?void 0:d.icon},dismissIcon:{...null==(h=u.item)?void 0:h.dismissIcon,...null==(c=t.item)?void 0:c.dismissIcon}}}};class l extends t.CourierThemeManager{constructor(e){super(e),o(this,"THEME_CHANGE_EVENT","courier_toast_theme_change")}getDefaultLightTheme(){return n}getDefaultDarkTheme(){return r}mergeTheme(e,t){return a(e,t)}subscribe(e){return{...super.subscribe(e),manager:this}}}const d=class e extends t.CourierBaseElement{constructor(e){super(),o(this,"_themeManager"),o(this,"_themeSubscription"),o(this,"_message"),o(this,"_customToastItemContent"),o(this,"_autoDismiss"),o(this,"_autoDismissTimeoutMs"),o(this,"_onItemDismissedCallback",null),o(this,"_onToastItemClickCallback",null),o(this,"_onToastItemActionClickCallback",null),this._message=e.message,this._autoDismiss=e.autoDismiss,this._autoDismissTimeoutMs=e.autoDismissTimeoutMs,this._themeManager=e.themeManager,this._themeSubscription=this._themeManager.subscribe((e=>{this.render()}))}onItemDismissed(e){this._onItemDismissedCallback=e}onToastItemClick(e){this._onToastItemClickCallback=e,this.render()}onToastItemActionClick(e){this._onToastItemActionClickCallback=e,this.render()}setToastItemContent(e){this._customToastItemContent=e}dismiss(t=e.dismissAnimationTimeoutMs){this.classList.add("dismissing"),setTimeout((()=>{this.remove(),this._onItemDismissedCallback&&this._onItemDismissedCallback({message:this._message})}),t)}onComponentMounted(){this.render()}onComponentUnmounted(){this._themeSubscription.unsubscribe()}get theme(){return this._themeManager.getTheme()}static get id(){return"courier-toast-item"}static get observedAttributes(){return[]}render(){for(var e,s,i,o;this.firstChild;)this.removeChild(this.firstChild);this.removeEventListener("click",this.onClick);const n=document.createElement("div");if(n.classList.add("overflow-hidden-container"),this.appendChild(n),this._autoDismiss){const e=document.createElement("div");e.classList.add("auto-dismiss"),n.append(e)}this._customToastItemContent?n.appendChild(this._customToastItemContent({message:this._message,autoDismiss:this._autoDismiss,autoDismissTimeoutMs:this._autoDismissTimeoutMs})):n.appendChild(this.createDefaultContent()),this._onToastItemClickCallback&&this.classList.add("clickable"),this.addEventListener("click",this.onClick);const r=new t.CourierIcon(null==(s=null==(e=this.theme.item)?void 0:e.dismissIcon)?void 0:s.color,null==(o=null==(i=this.theme.item)?void 0:i.dismissIcon)?void 0:o.svg);r.classList.add("dismiss"),r.addEventListener("click",(e=>{e.stopPropagation(),this.remove(),this._onItemDismissedCallback&&this._onItemDismissedCallback({message:this._message})})),this.appendChild(r)}createDefaultContent(){var e,s,i,o,n;const r=document.createElement("div");r.classList.add("content"),this.append(r);const a=new t.CourierIcon(null==(s=null==(e=this.theme.item)?void 0:e.icon)?void 0:s.color,null==(o=null==(i=this.theme.item)?void 0:i.icon)?void 0:o.svg);a.classList.add("icon"),r.appendChild(a);const l=document.createElement("div");l.classList.add("text-content"),r.appendChild(l);const d=document.createElement("p");d.classList.add("title"),d.textContent=this._message.title??"",l.appendChild(d);const h=document.createElement("p");if(h.classList.add("body"),h.textContent=this._message.preview??this._message.body??"",l.appendChild(h),this.messageHasActions){const e=document.createElement("div");e.classList.add("actions-container"),l.appendChild(e),null==(n=this._message.actions)||n.forEach((t=>{const s=this.createActionButton(t);e.appendChild(s)}))}return r}get messageHasActions(){return this._message.actions&&this._message.actions.length>0}createActionButton(e){var s,i,o,n,r;const a=null==(s=this._themeManager.getTheme().item)?void 0:s.actions;return new t.CourierButton({mode:this._themeManager.mode,text:e.content,variant:"secondary",backgroundColor:null==a?void 0:a.backgroundColor,hoverBackgroundColor:null==a?void 0:a.hoverBackgroundColor,activeBackgroundColor:null==a?void 0:a.activeBackgroundColor,border:null==a?void 0:a.border,borderRadius:null==a?void 0:a.borderRadius,shadow:null==a?void 0:a.shadow,fontFamily:null==(i=null==a?void 0:a.font)?void 0:i.family,fontSize:null==(o=null==a?void 0:a.font)?void 0:o.size,fontWeight:null==(n=null==a?void 0:a.font)?void 0:n.weight,textColor:null==(r=null==a?void 0:a.font)?void 0:r.color,onClick:()=>{this._onToastItemActionClickCallback&&this._onToastItemActionClickCallback({message:this._message,action:e})}})}onClick(e){e.stopPropagation(),this._onToastItemClickCallback&&this._onToastItemClickCallback({message:this._message})}};o(d,"dismissAnimationTimeoutMs",300);let h=d;t.registerElement(h);const c=class e{constructor(){o(this,"_dataset",[]),o(this,"_datastoreListeners",[]),o(this,"_removeMessageEventListener")}static get shared(){return e.instance||(e.instance=new e),e.instance}addDatastoreListener(e){this._datastoreListeners.push(e)}removeDatastoreListener(e){this._datastoreListeners=this._datastoreListeners.filter((t=>t!==e))}async listenForMessages(){var e,t,i,o,n,r,a;try{const a=null==(e=s.Courier.shared.client)?void 0:e.inbox.socket;if(!a)return void(null==(i=null==(t=s.Courier.shared.client)?void 0:t.options.logger)||i.info("CourierInbox socket not available"));if(this._removeMessageEventListener&&this._removeMessageEventListener(),this._removeMessageEventListener=a.addMessageEventListener((e=>{if(e.event===s.InboxMessageEvent.NewMessage){const t=e.data;this.addMessage(t)}})),a.isConnecting||a.isOpen)return void(null==(r=null==(o=s.Courier.shared.client)?void 0:o.options.logger)||r.info(`Inbox socket already connecting or open for client ID: [${null==(n=s.Courier.shared.client)?void 0:n.options.connectionId}]`));await a.connect()}catch(l){null==(a=s.Courier.shared.client)||a.options.logger.error("Error listening for messages:",l),this._datastoreListeners.forEach((e=>{var t,s;null==(s=(t=e.events).onError)||s.call(t,l)}))}}toastIndexOfMessage(e){const t=this._dataset.findIndex((t=>t.messageId===e.messageId));return t<0?t:this._dataset.length-t-1}addMessage(e){this._dataset.push(e),this._datastoreListeners.forEach((t=>{t.events.onMessageAdd&&t.events.onMessageAdd(e)}))}removeMessage(e){const t=this._dataset.findIndex((t=>t.messageId===e.messageId));t<0||(this._dataset.splice(t,1),this._datastoreListeners.forEach((t=>{t.events.onMessageRemove&&t.events.onMessageRemove(e)})))}};o(c,"instance");let u=c;class m{constructor(e){this.events=e}remove(){u.shared.removeDatastoreListener(this)}}const g=class e extends t.CourierBaseElement{constructor(e){super(),o(this,"_themeManager"),o(this,"_themeSubscription"),o(this,"_toastStyle"),o(this,"_authListener"),o(this,"_datastoreListener"),o(this,"_autoDismiss",!1),o(this,"_autoDismissTimeoutMs",5e3),o(this,"_dismissButtonOption","auto"),o(this,"_customToastItem"),o(this,"_customToastItemContent"),o(this,"_onItemClick"),o(this,"_onItemActionClick"),o(this,"_defaultLayoutProps",{position:"fixed",width:"380px",top:"30px",right:"30px",zIndex:999}),this._themeManager=(null==e?void 0:e.themeManager)??new l(n),this._themeSubscription=this._themeManager.subscribe((e=>{this.refreshStyles()})),this._datastoreListener=new m({onMessageAdd:this.datastoreAddMessageListener.bind(this),onMessageRemove:this.datastoreRemoveMessageListener.bind(this)})}onToastItemClick(e){this._onItemClick=e}onToastItemActionClick(e){this._onItemActionClick=e}enableAutoDismiss(){this._autoDismiss=!0}disableAutoDismiss(){this._autoDismiss=!1}setAutoDismissTimeoutMs(e){this._autoDismissTimeoutMs=e}setLightTheme(e){this._themeManager.setLightTheme(e)}setDarkTheme(e){this._themeManager.setDarkTheme(e)}setDismissButton(e){this._dismissButtonOption=e,this.refreshStyles()}setMode(e){this._themeManager.setMode(e)}setToastItem(e){this._customToastItem=e}setToastItemContent(e){this._customToastItemContent=e}dismissToastForMessage(e){this.childNodes.forEach((t=>{t.dataset.courierMessageId===e.messageId&&(t instanceof h?t.dismiss():t.remove())}))}onComponentMounted(){this._toastStyle=t.injectGlobalStyle(e.id,this.getStyles(this.theme)),u.shared.addDatastoreListener(this._datastoreListener),s.Courier.shared.addAuthenticationListener(this.authChangedCallback.bind(this)),u.shared.listenForMessages()}onComponentUnmounted(){var e,t;this._datastoreListener.remove(),null==(e=this._authListener)||e.remove(),null==(t=this._toastStyle)||t.remove(),this._themeManager.cleanup(),this._themeSubscription.unsubscribe()}attributeChangedCallback(t,s,i){switch(t){case"auto-dismiss":"false"===i?this.disableAutoDismiss():this.enableAutoDismiss();break;case"auto-dismiss-timeout-ms":this.setAutoDismissTimeoutMs(parseInt(i,10));break;case"dismiss-button":i&&e.isDismissButtonOption(i)?this.setDismissButton(i):this.setDismissButton("auto");break;case"light-theme":i&&this.setLightTheme(JSON.parse(i));break;case"dark-theme":i&&this.setDarkTheme(JSON.parse(i));break;case"mode":this._themeManager.setMode(i)}}get theme(){return this._themeManager.getTheme()}refreshStyles(){this._toastStyle&&(this._toastStyle.textContent=this.getStyles(this.theme))}authChangedCallback(){this.removeAllItems(),u.shared.listenForMessages()}removeAllItems(){for(;this.firstChild;)this.removeChild(this.firstChild)}addToastItem(e){const t=this.createToastItem(e);return t.dataset.courierMessageId=e.messageId,this.appendChild(t),this.resizeContainerToHeight(this.topStackItemHeight),t}createToastItem(e){return this._customToastItem?this.createCustomToastItem(e):this.createDefaultToastItem(e)}createDefaultToastItem(e){const t=new h({message:e,autoDismiss:this._autoDismiss,autoDismissTimeoutMs:this._autoDismissTimeoutMs,themeManager:this._themeManager});return t.onItemDismissed((e=>{this.resizeContainerToHeight(this.topStackItemHeight)})),this._customToastItemContent&&t.setToastItemContent(this._customToastItemContent),this._onItemClick&&t.onToastItemClick(this._onItemClick),this._onItemActionClick&&t.onToastItemActionClick(this._onItemActionClick),this._autoDismiss&&setTimeout(t.dismiss.bind(t),this._autoDismissTimeoutMs),t}createCustomToastItem(e){if(!this._customToastItem)throw Error("Attempted to create customToastItem, but none is set");const t=this._customToastItem({message:e,autoDismiss:this._autoDismiss,autoDismissTimeoutMs:this._autoDismissTimeoutMs});return this._autoDismiss&&setTimeout((()=>{this.removeChild(t)}),this._autoDismissTimeoutMs),t.addEventListener("click",(()=>{this._onItemClick&&this._onItemClick({message:e})})),t}datastoreAddMessageListener(e){this.addToastItem(e)}datastoreRemoveMessageListener(e){this.dismissToastForMessage(e)}getStyles(t){var s,i,o,n,r,a;const l=t.item;return[`\n      ${e.id} {\n        position: ${this._defaultLayoutProps.position};\n        z-index: ${this._defaultLayoutProps.zIndex};\n        top: ${this._defaultLayoutProps.top};\n        right: ${this._defaultLayoutProps.right};\n        width: ${this._defaultLayoutProps.width};\n      }\n    `,`\n      ${h.id}:last-child {\n        top: 0;\n        right: 0;\n      }\n\n      ${h.id}:nth-last-child(2) {\n        top: 12px;\n        bottom: -12px;\n        --scale: 0.95\n      }\n\n      ${h.id}:nth-last-child(3) {\n        top: 24px;\n        bottom: -24px;\n        --scale: 0.9;\n      }\n\n      ${h.id}:nth-last-child(n+4) {\n        top: 24px;\n        bottom: -24px;\n        --scale: 0.9;\n        visibility: hidden;\n      }\n\n      ${h.id}:nth-last-child(n+2) > .overflow-hidden-container {\n        opacity: 0;\n      }\n    `,`\n      ${h.id} {\n        position: absolute;\n        box-sizing: border-box;\n        width: 100%;\n        background-color: ${null==l?void 0:l.backgroundColor};\n        box-shadow: ${null==l?void 0:l.shadow};\n        border: ${null==l?void 0:l.border};\n        border-radius: ${null==l?void 0:l.borderRadius};\n        transition: 0.2s ease-in-out;\n        cursor: default;\n\n        opacity: 0;\n        transform: translate(0, -10px) scaleX(var(--scale, 1));\n        animation: show 0.3s ease-in-out forwards;\n      }\n\n      ${h.id} > .overflow-hidden-container {\n        height: 100%;\n        width: 100%;\n        border-radius: ${null==l?void 0:l.borderRadius};\n        overflow: hidden;\n      }\n\n      ${h.id}.dismissing {\n        animation: hide 0.3s ease-in-out forwards;\n      }\n\n      @keyframes show {\n        0% {\n          opacity: 0;\n        }\n\n        100% {\n          opacity: 1;\n          transform: scaleX(var(--scale, 1));\n        }\n      }\n\n      @keyframes hide {\n        0% {\n          opacity: 1;\n          transform: scaleX(var(--scale, 1));\n        }\n\n        100% {\n          opacity: 0;\n          transform: scaleX(var(--scale, 1));\n        }\n      }\n\n      ${h.id}.clickable:last-child {\n        cursor: pointer;\n      }\n\n      ${h.id}.clickable:last-child:hover {\n        background-color: ${null==l?void 0:l.hoverBackgroundColor};\n      }\n\n      ${h.id}.clickable:last-child:active {\n        background-color: ${null==l?void 0:l.activeBackgroundColor};\n      }\n\n      ${h.id}.clickable:nth-last-child(n+2) {\n        pointer-events: none;\n      }\n    `,`\n      ${h.id} > .dismiss {\n        position: absolute;\n        visibility: hidden;\n        opacity: 0%;\n        top: -10px;\n        right: -10px;\n        background-color: ${null==l?void 0:l.backgroundColor};\n        border: ${null==l?void 0:l.border};\n        padding: 3px;\n        border-radius: 50%;\n        font-size: 12pt;\n        box-shadow: ${null==l?void 0:l.shadow};\n        cursor: pointer;\n        transition: 0.2s ease-in-out;\n      }\n\n      ${h.id} > .dismiss:hover {\n        background-color: ${null==l?void 0:l.hoverBackgroundColor};\n      }\n\n      ${h.id} > .dismiss:active {\n        background-color: ${null==l?void 0:l.activeBackgroundColor};\n      }\n\n      ${h.id}:last-child${this.showDismissOnHover?":hover":""} > .dismiss {\n        visibility: ${this.showDismiss?"visible":"hidden"};\n        opacity: 100%;\n        transition: 0.2s ease-in-out;\n      }\n    `,`\n      ${h.id} > .overflow-hidden-container > .auto-dismiss {\n        width: 100%;\n        height: 5px;\n        background-color: ${null==l?void 0:l.autoDismissBarColor};\n        animation: auto-dismiss ${this._autoDismissTimeoutMs}ms ease-in-out forwards;\n      }\n\n      @keyframes auto-dismiss {\n        100% {\n          width: 0px;\n        }\n      }\n    `,`\n      ${h.id} > .overflow-hidden-container > .content {\n        display: flex;\n        gap: 12px;\n        align-items: center;\n        align-self: stretch;\n        box-sizing: border-box;\n        padding: 12px;\n      }\n\n      ${h.id} > .overflow-hidden-container > .content > .text-content {\n      }\n\n      ${h.id} > .overflow-hidden-container > .content > .icon {\n      }\n\n      ${h.id} > .overflow-hidden-container > .content > .text-content > .title {\n        margin: 0;\n        font-weight: ${null==(s=null==l?void 0:l.title)?void 0:s.weight};\n        font-size: ${null==(i=null==l?void 0:l.title)?void 0:i.size};\n        color: ${null==(o=null==l?void 0:l.title)?void 0:o.color};\n      }\n\n      ${h.id} > .overflow-hidden-container > .content > .text-content > .body {\n        margin: 8px 0 0 0;\n        font-weight: ${null==(n=null==l?void 0:l.body)?void 0:n.weight};\n        font-size: ${null==(r=null==l?void 0:l.body)?void 0:r.size};\n        line-height: 150%;\n        color: ${null==(a=null==l?void 0:l.body)?void 0:a.color};\n      }\n    `,`\n      ${h.id} > .overflow-hidden-container > .content > .text-content > .actions-container {\n        display: flex;\n        gap: 8px;\n        margin-top: 12px;\n      }\n    `].join("")}get topStackItemHeight(){if(this.lastChild){return`${this.lastChild.getBoundingClientRect().height}px`}return"0px"}resizeContainerToHeight(e){this.style.height=e}get showDismissOnHover(){return!(!this._autoDismiss||"auto"!==this._dismissButtonOption)||"hover"===this._dismissButtonOption}get showDismiss(){return"hidden"!==this._dismissButtonOption}static get id(){return"courier-toast"}static isDismissButtonOption(e){return["visible","hidden","hover","auto"].includes(e)}};o(g,"observedAttributes",["auto-dismiss","auto-dismiss-timeout-ms","dismiss-button","light-theme","dark-theme","mode"]);let C=g;t.registerElement(C);s.Courier.shared.courierUserAgentName="courier-ui-toast",s.Courier.shared.courierUserAgentVersion="1.0.2",Object.defineProperty(e,"Courier",{enumerable:!0,get:()=>s.Courier}),e.CourierToast=C,e.CourierToastDatastore=u,e.CourierToastDatastoreEvents=class{onMessageAdd(e){}onMessageRemove(e){}onError(e){}},e.CourierToastDatastoreListener=m,e.CourierToastItem=h,e.CourierToastThemeManager=l,e.defaultDarkTheme=r,e.defaultLightTheme=n,e.mergeTheme=a,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@trycourier/courier-ui-core"),require("@trycourier/courier-js")):"function"==typeof define&&define.amd?define(["exports","@trycourier/courier-ui-core","@trycourier/courier-js"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).CourierUIToast={},e.CourierUICore,e.CourierJS)}(this,(function(e,t,s){"use strict";var i=Object.defineProperty,o=(e,t,s)=>((e,t,s)=>t in e?i(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s)(e,"symbol"!=typeof t?t+"":t,s);const n={item:{backgroundColor:t.CourierColors.white[500],hoverBackgroundColor:t.CourierColors.gray[200],activeBackgroundColor:t.CourierColors.gray[500],shadow:`0px 4px 8px -2px ${t.CourierColors.black[50020]}`,border:`1px solid ${t.CourierColors.gray[500]}`,borderRadius:"8px",title:{size:"11pt",weight:"400",color:t.CourierColors.black[500]},body:{size:"11pt",weight:"400",color:t.CourierColors.gray[600]},icon:{color:t.CourierColors.black[500],svg:t.CourierIconSVGs.inbox},dismissIcon:{color:t.CourierColors.black[500],svg:t.CourierIconSVGs.remove},autoDismissBarColor:t.CourierColors.blue[400],actions:{backgroundColor:"transparent",hoverBackgroundColor:t.CourierColors.gray[200],activeBackgroundColor:t.CourierColors.gray[500],border:`1px solid ${t.CourierColors.gray[500]}`,borderRadius:"4px",shadow:"0px 1px 2px 0px rgba(0, 0, 0, 0.06)",font:{color:t.CourierColors.black[500],size:"14px"}}}},r={item:{backgroundColor:t.CourierColors.black[500],hoverBackgroundColor:t.CourierColors.gray[400],activeBackgroundColor:t.CourierColors.gray[600],shadow:`0px 4px 8px -2px ${t.CourierColors.gray[400]}`,border:`1px solid ${t.CourierColors.black[500]}`,borderRadius:"8px",title:{size:"11pt",weight:"400",color:t.CourierColors.white[500]},body:{size:"11pt",weight:"400",color:t.CourierColors.gray[500]},icon:{color:t.CourierColors.white[500],svg:t.CourierIconSVGs.inbox},dismissIcon:{color:t.CourierColors.white[500],svg:t.CourierIconSVGs.remove},autoDismissBarColor:t.CourierColors.blue[400],actions:{backgroundColor:t.CourierColors.black[400],hoverBackgroundColor:t.CourierColors.white[50010],activeBackgroundColor:t.CourierColors.white[50020],border:`1px solid ${t.CourierColors.gray[400]}`,borderRadius:"4px",shadow:`0px 1px 2px 0px ${t.CourierColors.white[50010]}`,font:{color:t.CourierColors.white[500],size:"14px"}}}},a=(e,t)=>{var s,i,o,a,l,d,h,c;const u="light"===e?n:r;return{item:{...u.item,...t.item,title:{...null==(s=u.item)?void 0:s.title,...null==(i=t.item)?void 0:i.title},body:{...null==(o=u.item)?void 0:o.body,...null==(a=t.item)?void 0:a.body},icon:{...null==(l=u.item)?void 0:l.icon,...null==(d=t.item)?void 0:d.icon},dismissIcon:{...null==(h=u.item)?void 0:h.dismissIcon,...null==(c=t.item)?void 0:c.dismissIcon}}}};class l extends t.CourierThemeManager{constructor(e){super(e),o(this,"THEME_CHANGE_EVENT","courier_toast_theme_change")}getDefaultLightTheme(){return n}getDefaultDarkTheme(){return r}mergeTheme(e,t){return a(e,t)}subscribe(e){return{...super.subscribe(e),manager:this}}}const d=class e extends t.CourierBaseElement{constructor(e){super(),o(this,"_themeManager"),o(this,"_themeSubscription"),o(this,"_message"),o(this,"_customToastItemContent"),o(this,"_autoDismiss"),o(this,"_autoDismissTimeoutMs"),o(this,"_onItemDismissedCallback",null),o(this,"_onToastItemClickCallback",null),o(this,"_onToastItemActionClickCallback",null),this._message=e.message,this._autoDismiss=e.autoDismiss,this._autoDismissTimeoutMs=e.autoDismissTimeoutMs,this._themeManager=e.themeManager,this._themeSubscription=this._themeManager.subscribe((e=>{this.render()}))}onItemDismissed(e){this._onItemDismissedCallback=e}onToastItemClick(e){this._onToastItemClickCallback=e,this.render()}onToastItemActionClick(e){this._onToastItemActionClickCallback=e,this.render()}setToastItemContent(e){this._customToastItemContent=e}dismiss(t=e.dismissAnimationTimeoutMs){this.classList.add("dismissing"),setTimeout((()=>{this.remove(),this._onItemDismissedCallback&&this._onItemDismissedCallback({message:this._message})}),t)}onComponentMounted(){this.render()}onComponentUnmounted(){this._themeSubscription.unsubscribe()}get theme(){return this._themeManager.getTheme()}static get id(){return"courier-toast-item"}static get observedAttributes(){return[]}render(){for(var e,s,i,o;this.firstChild;)this.removeChild(this.firstChild);this.removeEventListener("click",this.onClick);const n=document.createElement("div");if(n.classList.add("overflow-hidden-container"),this.appendChild(n),this._autoDismiss){const e=document.createElement("div");e.classList.add("auto-dismiss"),n.append(e)}this._customToastItemContent?n.appendChild(this._customToastItemContent({message:this._message,autoDismiss:this._autoDismiss,autoDismissTimeoutMs:this._autoDismissTimeoutMs})):n.appendChild(this.createDefaultContent()),this._onToastItemClickCallback&&this.classList.add("clickable"),this.addEventListener("click",this.onClick);const r=new t.CourierIcon(null==(s=null==(e=this.theme.item)?void 0:e.dismissIcon)?void 0:s.color,null==(o=null==(i=this.theme.item)?void 0:i.dismissIcon)?void 0:o.svg);r.classList.add("dismiss"),r.addEventListener("click",(e=>{e.stopPropagation(),this.remove(),this._onItemDismissedCallback&&this._onItemDismissedCallback({message:this._message})})),this.appendChild(r)}createDefaultContent(){var e,s,i,o,n;const r=document.createElement("div");r.classList.add("content"),this.append(r);const a=new t.CourierIcon(null==(s=null==(e=this.theme.item)?void 0:e.icon)?void 0:s.color,null==(o=null==(i=this.theme.item)?void 0:i.icon)?void 0:o.svg);a.classList.add("icon"),r.appendChild(a);const l=document.createElement("div");l.classList.add("text-content"),r.appendChild(l);const d=document.createElement("p");d.classList.add("title"),d.textContent=this._message.title??"",l.appendChild(d);const h=document.createElement("p");if(h.classList.add("body"),h.textContent=this._message.preview??this._message.body??"",l.appendChild(h),this.messageHasActions){const e=document.createElement("div");e.classList.add("actions-container"),l.appendChild(e),null==(n=this._message.actions)||n.forEach((t=>{const s=this.createActionButton(t);e.appendChild(s)}))}return r}get messageHasActions(){return this._message.actions&&this._message.actions.length>0}createActionButton(e){var s,i,o,n,r;const a=null==(s=this._themeManager.getTheme().item)?void 0:s.actions;return new t.CourierButton({mode:this._themeManager.mode,text:e.content,variant:"secondary",backgroundColor:null==a?void 0:a.backgroundColor,hoverBackgroundColor:null==a?void 0:a.hoverBackgroundColor,activeBackgroundColor:null==a?void 0:a.activeBackgroundColor,border:null==a?void 0:a.border,borderRadius:null==a?void 0:a.borderRadius,shadow:null==a?void 0:a.shadow,fontFamily:null==(i=null==a?void 0:a.font)?void 0:i.family,fontSize:null==(o=null==a?void 0:a.font)?void 0:o.size,fontWeight:null==(n=null==a?void 0:a.font)?void 0:n.weight,textColor:null==(r=null==a?void 0:a.font)?void 0:r.color,onClick:()=>{this._onToastItemActionClickCallback&&this._onToastItemActionClickCallback({message:this._message,action:e})}})}onClick(e){e.stopPropagation(),this._onToastItemClickCallback&&this._onToastItemClickCallback({message:this._message})}};o(d,"dismissAnimationTimeoutMs",300);let h=d;t.registerElement(h);const c=class e{constructor(){o(this,"_dataset",[]),o(this,"_datastoreListeners",[]),o(this,"_removeMessageEventListener")}static get shared(){return e.instance||(e.instance=new e),e.instance}addDatastoreListener(e){this._datastoreListeners.push(e)}removeDatastoreListener(e){this._datastoreListeners=this._datastoreListeners.filter((t=>t!==e))}async listenForMessages(){var e,t,i,o,n,r,a;try{const a=null==(e=s.Courier.shared.client)?void 0:e.inbox.socket;if(!a)return void(null==(i=null==(t=s.Courier.shared.client)?void 0:t.options.logger)||i.info("CourierInbox socket not available"));if(this._removeMessageEventListener&&this._removeMessageEventListener(),this._removeMessageEventListener=a.addMessageEventListener((e=>{if(e.event===s.InboxMessageEvent.NewMessage){const t=e.data;this.addMessage(t)}})),a.isConnecting||a.isOpen)return void(null==(r=null==(o=s.Courier.shared.client)?void 0:o.options.logger)||r.info(`Inbox socket already connecting or open for client ID: [${null==(n=s.Courier.shared.client)?void 0:n.options.connectionId}]`));await a.connect()}catch(l){null==(a=s.Courier.shared.client)||a.options.logger.error("Error listening for messages:",l),this._datastoreListeners.forEach((e=>{var t,s;null==(s=(t=e.events).onError)||s.call(t,l)}))}}toastIndexOfMessage(e){const t=this._dataset.findIndex((t=>t.messageId===e.messageId));return t<0?t:this._dataset.length-t-1}addMessage(e){this._dataset.push(e),this._datastoreListeners.forEach((t=>{t.events.onMessageAdd&&t.events.onMessageAdd(e)}))}removeMessage(e){const t=this._dataset.findIndex((t=>t.messageId===e.messageId));t<0||(this._dataset.splice(t,1),this._datastoreListeners.forEach((t=>{t.events.onMessageRemove&&t.events.onMessageRemove(e)})))}};o(c,"instance");let u=c;class m{constructor(e){this.events=e}remove(){u.shared.removeDatastoreListener(this)}}const g=class e extends t.CourierBaseElement{constructor(e){super(),o(this,"_themeManager"),o(this,"_themeSubscription"),o(this,"_toastStyle"),o(this,"_authListener"),o(this,"_datastoreListener"),o(this,"_autoDismiss",!1),o(this,"_autoDismissTimeoutMs",5e3),o(this,"_dismissButtonOption","auto"),o(this,"_customToastItem"),o(this,"_customToastItemContent"),o(this,"_onItemClick"),o(this,"_onItemActionClick"),o(this,"_defaultLayoutProps",{position:"fixed",width:"380px",top:"30px",right:"30px",zIndex:999}),this._themeManager=(null==e?void 0:e.themeManager)??new l(n),this._themeSubscription=this._themeManager.subscribe((e=>{this.refreshStyles()})),this._datastoreListener=new m({onMessageAdd:this.datastoreAddMessageListener.bind(this),onMessageRemove:this.datastoreRemoveMessageListener.bind(this)})}onToastItemClick(e){this._onItemClick=e}onToastItemActionClick(e){this._onItemActionClick=e}enableAutoDismiss(){this._autoDismiss=!0}disableAutoDismiss(){this._autoDismiss=!1}setAutoDismissTimeoutMs(e){this._autoDismissTimeoutMs=e}setLightTheme(e){this._themeManager.setLightTheme(e)}setDarkTheme(e){this._themeManager.setDarkTheme(e)}setDismissButton(e){this._dismissButtonOption=e,this.refreshStyles()}setMode(e){this._themeManager.setMode(e)}setToastItem(e){this._customToastItem=e}setToastItemContent(e){this._customToastItemContent=e}dismissToastForMessage(e){this.childNodes.forEach((t=>{t.dataset.courierMessageId===e.messageId&&(t instanceof h?t.dismiss():t.remove())}))}onComponentMounted(){this._toastStyle=t.injectGlobalStyle(e.id,this.getStyles(this.theme)),u.shared.addDatastoreListener(this._datastoreListener),s.Courier.shared.addAuthenticationListener(this.authChangedCallback.bind(this)),u.shared.listenForMessages()}onComponentUnmounted(){var e,t;this._datastoreListener.remove(),null==(e=this._authListener)||e.remove(),null==(t=this._toastStyle)||t.remove(),this._themeManager.cleanup(),this._themeSubscription.unsubscribe()}attributeChangedCallback(t,s,i){switch(t){case"auto-dismiss":"false"===i?this.disableAutoDismiss():this.enableAutoDismiss();break;case"auto-dismiss-timeout-ms":this.setAutoDismissTimeoutMs(parseInt(i,10));break;case"dismiss-button":i&&e.isDismissButtonOption(i)?this.setDismissButton(i):this.setDismissButton("auto");break;case"light-theme":i&&this.setLightTheme(JSON.parse(i));break;case"dark-theme":i&&this.setDarkTheme(JSON.parse(i));break;case"mode":this._themeManager.setMode(i)}}get theme(){return this._themeManager.getTheme()}refreshStyles(){this._toastStyle&&(this._toastStyle.textContent=this.getStyles(this.theme))}authChangedCallback(){this.removeAllItems(),u.shared.listenForMessages()}removeAllItems(){for(;this.firstChild;)this.removeChild(this.firstChild)}addToastItem(e){const t=this.createToastItem(e);return t.dataset.courierMessageId=e.messageId,this.appendChild(t),this.resizeContainerToHeight(this.topStackItemHeight),t}createToastItem(e){return this._customToastItem?this.createCustomToastItem(e):this.createDefaultToastItem(e)}createDefaultToastItem(e){const t=new h({message:e,autoDismiss:this._autoDismiss,autoDismissTimeoutMs:this._autoDismissTimeoutMs,themeManager:this._themeManager});return t.onItemDismissed((e=>{this.resizeContainerToHeight(this.topStackItemHeight)})),this._customToastItemContent&&t.setToastItemContent(this._customToastItemContent),this._onItemClick&&t.onToastItemClick(this._onItemClick),this._onItemActionClick&&t.onToastItemActionClick(this._onItemActionClick),this._autoDismiss&&setTimeout(t.dismiss.bind(t),this._autoDismissTimeoutMs),t}createCustomToastItem(e){if(!this._customToastItem)throw Error("Attempted to create customToastItem, but none is set");const t=this._customToastItem({message:e,autoDismiss:this._autoDismiss,autoDismissTimeoutMs:this._autoDismissTimeoutMs});return this._autoDismiss&&setTimeout((()=>{this.removeChild(t)}),this._autoDismissTimeoutMs),t.addEventListener("click",(()=>{this._onItemClick&&this._onItemClick({message:e})})),t}datastoreAddMessageListener(e){this.addToastItem(e)}datastoreRemoveMessageListener(e){this.dismissToastForMessage(e)}getStyles(t){var s,i,o,n,r,a;const l=t.item;return[`\n      ${e.id} {\n        position: ${this._defaultLayoutProps.position};\n        z-index: ${this._defaultLayoutProps.zIndex};\n        top: ${this._defaultLayoutProps.top};\n        right: ${this._defaultLayoutProps.right};\n        width: ${this._defaultLayoutProps.width};\n      }\n    `,`\n      ${h.id}:last-child {\n        top: 0;\n        right: 0;\n      }\n\n      ${h.id}:nth-last-child(2) {\n        top: 12px;\n        bottom: -12px;\n        --scale: 0.95\n      }\n\n      ${h.id}:nth-last-child(3) {\n        top: 24px;\n        bottom: -24px;\n        --scale: 0.9;\n      }\n\n      ${h.id}:nth-last-child(n+4) {\n        top: 24px;\n        bottom: -24px;\n        --scale: 0.9;\n        visibility: hidden;\n      }\n\n      ${h.id}:nth-last-child(n+2) > .overflow-hidden-container {\n        opacity: 0;\n      }\n    `,`\n      ${h.id} {\n        position: absolute;\n        box-sizing: border-box;\n        width: 100%;\n        background-color: ${null==l?void 0:l.backgroundColor};\n        box-shadow: ${null==l?void 0:l.shadow};\n        border: ${null==l?void 0:l.border};\n        border-radius: ${null==l?void 0:l.borderRadius};\n        transition: 0.2s ease-in-out;\n        cursor: default;\n\n        opacity: 0;\n        transform: translate(0, -10px) scaleX(var(--scale, 1));\n        animation: show 0.3s ease-in-out forwards;\n      }\n\n      ${h.id} > .overflow-hidden-container {\n        height: 100%;\n        width: 100%;\n        border-radius: ${null==l?void 0:l.borderRadius};\n        overflow: hidden;\n      }\n\n      ${h.id}.dismissing {\n        animation: hide 0.3s ease-in-out forwards;\n      }\n\n      @keyframes show {\n        0% {\n          opacity: 0;\n        }\n\n        100% {\n          opacity: 1;\n          transform: scaleX(var(--scale, 1));\n        }\n      }\n\n      @keyframes hide {\n        0% {\n          opacity: 1;\n          transform: scaleX(var(--scale, 1));\n        }\n\n        100% {\n          opacity: 0;\n          transform: scaleX(var(--scale, 1));\n        }\n      }\n\n      ${h.id}.clickable:last-child {\n        cursor: pointer;\n      }\n\n      ${h.id}.clickable:last-child:hover {\n        background-color: ${null==l?void 0:l.hoverBackgroundColor};\n      }\n\n      ${h.id}.clickable:last-child:active {\n        background-color: ${null==l?void 0:l.activeBackgroundColor};\n      }\n\n      ${h.id}.clickable:nth-last-child(n+2) {\n        pointer-events: none;\n      }\n    `,`\n      ${h.id} > .dismiss {\n        position: absolute;\n        visibility: hidden;\n        opacity: 0%;\n        top: -10px;\n        right: -10px;\n        background-color: ${null==l?void 0:l.backgroundColor};\n        border: ${null==l?void 0:l.border};\n        padding: 3px;\n        border-radius: 50%;\n        font-size: 12pt;\n        box-shadow: ${null==l?void 0:l.shadow};\n        cursor: pointer;\n        transition: 0.2s ease-in-out;\n      }\n\n      ${h.id} > .dismiss:hover {\n        background-color: ${null==l?void 0:l.hoverBackgroundColor};\n      }\n\n      ${h.id} > .dismiss:active {\n        background-color: ${null==l?void 0:l.activeBackgroundColor};\n      }\n\n      ${h.id}:last-child${this.showDismissOnHover?":hover":""} > .dismiss {\n        visibility: ${this.showDismiss?"visible":"hidden"};\n        opacity: 100%;\n        transition: 0.2s ease-in-out;\n      }\n    `,`\n      ${h.id} > .overflow-hidden-container > .auto-dismiss {\n        width: 100%;\n        height: 5px;\n        background-color: ${null==l?void 0:l.autoDismissBarColor};\n        animation: auto-dismiss ${this._autoDismissTimeoutMs}ms ease-in-out forwards;\n      }\n\n      @keyframes auto-dismiss {\n        100% {\n          width: 0px;\n        }\n      }\n    `,`\n      ${h.id} > .overflow-hidden-container > .content {\n        display: flex;\n        gap: 12px;\n        align-items: center;\n        align-self: stretch;\n        box-sizing: border-box;\n        padding: 12px;\n      }\n\n      ${h.id} > .overflow-hidden-container > .content > .text-content {\n      }\n\n      ${h.id} > .overflow-hidden-container > .content > .icon {\n      }\n\n      ${h.id} > .overflow-hidden-container > .content > .text-content > .title {\n        margin: 0;\n        font-weight: ${null==(s=null==l?void 0:l.title)?void 0:s.weight};\n        font-size: ${null==(i=null==l?void 0:l.title)?void 0:i.size};\n        color: ${null==(o=null==l?void 0:l.title)?void 0:o.color};\n      }\n\n      ${h.id} > .overflow-hidden-container > .content > .text-content > .body {\n        margin: 8px 0 0 0;\n        font-weight: ${null==(n=null==l?void 0:l.body)?void 0:n.weight};\n        font-size: ${null==(r=null==l?void 0:l.body)?void 0:r.size};\n        line-height: 150%;\n        color: ${null==(a=null==l?void 0:l.body)?void 0:a.color};\n      }\n    `,`\n      ${h.id} > .overflow-hidden-container > .content > .text-content > .actions-container {\n        display: flex;\n        gap: 8px;\n        margin-top: 12px;\n      }\n    `].join("")}get topStackItemHeight(){if(this.lastChild){return`${this.lastChild.getBoundingClientRect().height}px`}return"0px"}resizeContainerToHeight(e){this.style.height=e}get showDismissOnHover(){return!(!this._autoDismiss||"auto"!==this._dismissButtonOption)||"hover"===this._dismissButtonOption}get showDismiss(){return"hidden"!==this._dismissButtonOption}static get id(){return"courier-toast"}static isDismissButtonOption(e){return["visible","hidden","hover","auto"].includes(e)}};o(g,"observedAttributes",["auto-dismiss","auto-dismiss-timeout-ms","dismiss-button","light-theme","dark-theme","mode"]);let C=g;t.registerElement(C);s.Courier.shared.courierUserAgentName="courier-ui-toast",s.Courier.shared.courierUserAgentVersion="1.0.4",Object.defineProperty(e,"Courier",{enumerable:!0,get:()=>s.Courier}),e.CourierToast=C,e.CourierToastDatastore=u,e.CourierToastDatastoreEvents=class{onMessageAdd(e){}onMessageRemove(e){}onError(e){}},e.CourierToastDatastoreListener=m,e.CourierToastItem=h,e.CourierToastThemeManager=l,e.defaultDarkTheme=r,e.defaultLightTheme=n,e.mergeTheme=a,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
 //# sourceMappingURL=index.js.map

package/dist/index.mjs

@@ -1069,7 +1069,7 @@ class CourierToastDatastoreEvents {
   }
 }
 Courier.shared.courierUserAgentName = "courier-ui-toast";
-Courier.shared.courierUserAgentVersion = "1.0.2";
+Courier.shared.courierUserAgentVersion = "1.0.4";
 export {
   Courier2 as Courier,
   CourierToast,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycourier/courier-ui-toast",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Toast components for the Courier web UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -31,7 +31,7 @@
     "dist"
   ],
   "dependencies": {
-    "@trycourier/courier-js": "2.1.1",
+    "@trycourier/courier-js": "2.1.3",
     "@trycourier/courier-ui-core": "1.0.14"
   },
   "devDependencies": {