@sellmate/design-system 1.29.0 → 1.31.0

package/dist/design-system/{p-5a257ed9.entry.js → p-4a117dd6.entry.js}

@@ -1 +1 @@
-import{r as t,a as s,h as o}from"./p-Dz490Ukt.js";import{u as i,r as e,s as n,i as a,a as d}from"./p-DRVnqiWc.js";let l=0;const r=class{constructor(s){t(this,s)}get el(){return s(this)}autoRemove=!1;entries=[];layerRefs=new Map;async open(t,s){const o="modal-"+ ++l,i=this.createConfirmModal(o,t);return this.attachModalEventListeners(o,i),this.mountEntry({id:o,modalEl:i,modalRef:s,persistent:!!t.persistent,closing:!1,backdropVisible:!1}),o}async openLoading(t,s){const o="modal-"+ ++l,i=this.createLoadingModal(o,t);return this.attachLoadingModalEventListeners(o,i),this.mountEntry({id:o,modalEl:i,modalRef:s,persistent:!!t.persistent,closing:!1,backdropVisible:!1}),o}async createCustom(t,s,o){const i="modal-"+ ++l;return t.setAttribute("data-modal-id",i),t.classList.add("sd-modal-container__modal"),this.attachModalEventListeners(i,t),this.mountEntry({id:i,modalEl:t,modalRef:o,persistent:!!s.persistent,closing:!1,backdropVisible:!1}),i}componentDidRender(){if(Array.isArray(this.entries))for(const t of this.entries){if(t.closing||t.modalEl.isConnected)continue;const s=this.layerRefs.get(t.id);if(!s)continue;const{id:o,modalEl:i}=t;s.appendChild(i),this.waitForModalReady(i).then((()=>{requestAnimationFrame((()=>{const t=this.entries.find((t=>t.id===o));t&&!t.closing&&i.isConnected&&(this.entries=this.entries.map((t=>t.id===o?{...t,backdropVisible:!0}:t)),i.classList.add("sd-modal-container__modal--visible"),this.focusInitialElement(i))}))}))}}disconnectedCallback(){for(const t of this.entries??[])t.dismissTimerId&&clearTimeout(t.dismissTimerId),i(t.id)}async dismissById(t,s){this.entries.find((s=>s.id===t))&&this.requestDismiss(t,s)}async update(t,s){const o=this.entries.find((s=>s.id===t&&!s.closing));o&&("sd-loading-modal"!==o.modalEl.tagName.toLowerCase()?this.applyProps(o.modalEl,s):this.applyLoadingProps(o.modalEl,s))}mountEntry(t){const s="undefined"!=typeof document?document.activeElement:null;this.entries=[...this.entries??[],{...t,previousActiveElement:s}],e({id:t.id,persistent:t.persistent,requestClose:()=>this.dispatchClose(t.id),shake:()=>this.shakeModal(t.modalEl),setZIndex:t=>{this.el.style.setProperty("--sd-modal-container-z-index",String(t))}})}attachModalEventListeners(t,s){s.addEventListener("sdOk",(()=>{const s=this.entries.find((s=>s.id===t));s?.modalRef._hasSubmit?.()?s.modalRef._triggerSubmit?.():this.requestDismiss(t,"confirm")})),s.addEventListener("sdCancel",(()=>this.requestDismiss(t,"cancel"))),s.addEventListener("sdClose",(()=>this.requestDismiss(t,"close")))}attachLoadingModalEventListeners(t,s){s.addEventListener("sdClick",(()=>{const s=this.entries.find((s=>s.id===t));s?.modalRef._triggerClick?.()}))}dispatchClose(t){const s=this.entries.find((s=>s.id===t));s?.modalEl.dispatchEvent(new CustomEvent("sdClose"))}requestDismiss(t,s){const o=this.entries.find((s=>s.id===t));if(!o||o.closing)return;o.modalEl.classList.remove("sd-modal-container__modal--visible");const i=setTimeout((()=>{this.finalizeDismiss(t)}),350);n(t,!1),this.entries=(this.entries??[]).map((s=>s.id===t?{...s,closing:!0,dismissTimerId:i,backdropVisible:!1}:s)),"confirm"===s?o.modalRef._triggerOk():"cancel"===s?o.modalRef._triggerCancel():"close"===s&&o.modalRef._triggerClose()}finalizeDismiss(t){const s=this.entries.find((s=>s.id===t));s&&(s.dismissTimerId&&clearTimeout(s.dismissTimerId),s.modalEl.remove(),i(t),this.restoreFocus(s.previousActiveElement),s.modalRef._triggerDismissed(),this.layerRefs.delete(t),this.entries=(this.entries??[]).filter((s=>s.id!==t)),this.autoRemove&&0===this.entries.length&&this.el.remove())}createConfirmModal(t,s){const o=document.createElement("sd-confirm-modal");return o.setAttribute("data-modal-id",t),o.classList.add("sd-modal-container__modal"),this.applyProps(o,s),o}createLoadingModal(t,s){const o=document.createElement("sd-loading-modal");return o.setAttribute("data-modal-id",t),o.classList.add("sd-modal-container__modal"),this.applyLoadingProps(o,s),o}applyLoadingProps(t,s){this.hasOwnProp(s,"state")&&this.setAttr(t,"state",s.state),this.hasOwnProp(s,"message")&&(Array.isArray(s.message)?t.message=s.message:this.setAttr(t,"message",s.message)),this.hasOwnProp(s,"useButton")&&(s.useButton?t.setAttribute("use-button",""):t.removeAttribute("use-button")),this.hasOwnProp(s,"buttonLabel")&&this.setAttr(t,"button-label",s.buttonLabel),this.hasOwnProp(s,"width")&&this.setAttr(t,"width",null!=s.width?String(s.width):void 0),this.hasOwnProp(s,"height")&&this.setAttr(t,"height",null!=s.height?String(s.height):void 0),this.hasOwnProp(s,"progress")&&(t.progress=s.progress)}applyProps(t,s){this.hasOwnProp(s,"type")&&this.setAttr(t,"type",s.type),this.hasOwnProp(s,"title")&&this.setAttr(t,"modal-title",s.title),this.hasOwnProp(s,"titleClass")&&this.setAttr(t,"title-class",s.titleClass),this.hasOwnProp(s,"mainButtonLabel")&&this.setAttr(t,"main-button-label",s.mainButtonLabel),this.hasOwnProp(s,"mainButtonName")&&this.setAttr(t,"main-button-name",s.mainButtonName),this.hasOwnProp(s,"subButtonLabel")&&this.setAttr(t,"sub-button-label",s.subButtonLabel),this.hasOwnProp(s,"tagPreset")&&this.setAttr(t,"tag-preset",s.tagPreset),this.hasOwnProp(s,"tagLabel")&&this.setAttr(t,"tag-label",s.tagLabel),this.hasOwnProp(s,"slotLabel")&&this.setAttr(t,"slot-label",s.slotLabel),this.hasOwnProp(s,"topMessage")&&(t.topMessage=s.topMessage??[]),this.hasOwnProp(s,"bottomMessage")&&(t.bottomMessage=s.bottomMessage??[]),this.hasOwnProp(s,"tagContents")&&this.setSlotContent(t,"tag",s.tagContents),this.hasOwnProp(s,"optionContents")&&this.setSlotContent(t,"option",s.optionContents)}setSlotContent(t,s,o){Array.from(t.children).forEach((t=>{t.getAttribute("slot")===s&&t.remove()})),o&&(o.setAttribute("slot",s),t.appendChild(o))}handleBackdropClick(t){a(t)&&d(t)}focusInitialElement(t){const s=this.getInitialFocusTarget(t);s?.focus()}getInitialFocusTarget(t){const s=t.querySelector("[autofocus]");if(s)return s;const o=t.querySelector([".sd-confirm-modal__button sd-button:last-of-type button",".sd-action-modal__footer > sd-button button",".sd-loading-modal__button sd-button button"].join(","));if(o)return o;const i=Array.from(t.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')),e=i.find((t=>!t.closest(".sd-action-modal__close, .sd-confirm-modal__close-button")));return i.length>0?e??i[0]:(t.hasAttribute("tabindex")||t.setAttribute("tabindex","-1"),t)}restoreFocus(t){t&&"function"==typeof t.focus&&t.isConnected&&t.focus()}shakeModal(t){const s="sd-modal-container__modal--shake";t.classList.remove(s),t.addEventListener("animationend",(()=>t.classList.remove(s)),{once:!0}),requestAnimationFrame((()=>{t.classList.add(s)}))}waitForModalReady(t){const s=t.componentOnReady;return"function"==typeof s?s.call(t).then((()=>{})):new Promise((t=>{requestAnimationFrame((()=>{requestAnimationFrame((()=>t()))}))}))}hasOwnProp(t,s){return Object.prototype.hasOwnProperty.call(t,s)}setAttr(t,s,o){null!=o&&t.setAttribute(s,o)}render(){return 0===(this.entries?.length??0)?null:o("div",{class:"sd-modal-container"},this.entries.map(((t,s)=>o("div",{key:t.id,class:"sd-modal-container__layer",style:{zIndex:String(s+1)},"data-modal-id":t.id,ref:s=>{s&&this.layerRefs.set(t.id,s)}},o("div",{class:{"sd-modal-container__backdrop":!0,"sd-modal-container__backdrop--visible":t.backdropVisible},onClick:()=>this.handleBackdropClick(t.id)})))))}};r.style="sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 997);pointer-events:none}sd-modal-container .sd-modal-container__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1;pointer-events:auto}sd-modal-container .sd-modal-container__modal{position:relative;z-index:1;opacity:0;transform:scale(0);pointer-events:auto;transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}";export{r as sd_modal_container}
+import{r as t,a as s,h as o}from"./p-C599jhDs.js";import{u as i,r as e,s as n,i as a,a as d}from"./p-DRVnqiWc.js";let l=0;const r=class{constructor(s){t(this,s)}get el(){return s(this)}autoRemove=!1;entries=[];layerRefs=new Map;async open(t,s){const o="modal-"+ ++l,i=this.createConfirmModal(o,t);return this.attachModalEventListeners(o,i),this.mountEntry({id:o,modalEl:i,modalRef:s,persistent:!!t.persistent,closing:!1,backdropVisible:!1}),o}async openLoading(t,s){const o="modal-"+ ++l,i=this.createLoadingModal(o,t);return this.attachLoadingModalEventListeners(o,i),this.mountEntry({id:o,modalEl:i,modalRef:s,persistent:!!t.persistent,closing:!1,backdropVisible:!1}),o}async createCustom(t,s,o){const i="modal-"+ ++l;return t.setAttribute("data-modal-id",i),t.classList.add("sd-modal-container__modal"),this.attachModalEventListeners(i,t),this.mountEntry({id:i,modalEl:t,modalRef:o,persistent:!!s.persistent,closing:!1,backdropVisible:!1}),i}componentDidRender(){if(Array.isArray(this.entries))for(const t of this.entries){if(t.closing||t.modalEl.isConnected)continue;const s=this.layerRefs.get(t.id);if(!s)continue;const{id:o,modalEl:i}=t;s.appendChild(i),this.waitForModalReady(i).then((()=>{requestAnimationFrame((()=>{const t=this.entries.find((t=>t.id===o));t&&!t.closing&&i.isConnected&&(this.entries=this.entries.map((t=>t.id===o?{...t,backdropVisible:!0}:t)),i.classList.add("sd-modal-container__modal--visible"),this.focusInitialElement(i))}))}))}}disconnectedCallback(){for(const t of this.entries??[])t.dismissTimerId&&clearTimeout(t.dismissTimerId),i(t.id)}async dismissById(t,s){this.entries.find((s=>s.id===t))&&this.requestDismiss(t,s)}async update(t,s){const o=this.entries.find((s=>s.id===t&&!s.closing));o&&("sd-loading-modal"!==o.modalEl.tagName.toLowerCase()?this.applyProps(o.modalEl,s):this.applyLoadingProps(o.modalEl,s))}mountEntry(t){const s="undefined"!=typeof document?document.activeElement:null;this.entries=[...this.entries??[],{...t,previousActiveElement:s}],e({id:t.id,persistent:t.persistent,requestClose:()=>this.dispatchClose(t.id),shake:()=>this.shakeModal(t.modalEl),setZIndex:t=>{this.el.style.setProperty("--sd-modal-container-z-index",String(t))}})}attachModalEventListeners(t,s){s.addEventListener("sdOk",(()=>{const s=this.entries.find((s=>s.id===t));s?.modalRef._hasSubmit?.()?s.modalRef._triggerSubmit?.():this.requestDismiss(t,"confirm")})),s.addEventListener("sdCancel",(()=>this.requestDismiss(t,"cancel"))),s.addEventListener("sdClose",(()=>this.requestDismiss(t,"close")))}attachLoadingModalEventListeners(t,s){s.addEventListener("sdClick",(()=>{const s=this.entries.find((s=>s.id===t));s?.modalRef._triggerClick?.()}))}dispatchClose(t){const s=this.entries.find((s=>s.id===t));s?.modalEl.dispatchEvent(new CustomEvent("sdClose"))}requestDismiss(t,s){const o=this.entries.find((s=>s.id===t));if(!o||o.closing)return;o.modalEl.classList.remove("sd-modal-container__modal--visible");const i=setTimeout((()=>{this.finalizeDismiss(t)}),350);n(t,!1),this.entries=(this.entries??[]).map((s=>s.id===t?{...s,closing:!0,dismissTimerId:i,backdropVisible:!1}:s)),"confirm"===s?o.modalRef._triggerOk():"cancel"===s?o.modalRef._triggerCancel():"close"===s&&o.modalRef._triggerClose()}finalizeDismiss(t){const s=this.entries.find((s=>s.id===t));s&&(s.dismissTimerId&&clearTimeout(s.dismissTimerId),s.modalEl.remove(),i(t),this.restoreFocus(s.previousActiveElement),s.modalRef._triggerDismissed(),this.layerRefs.delete(t),this.entries=(this.entries??[]).filter((s=>s.id!==t)),this.autoRemove&&0===this.entries.length&&this.el.remove())}createConfirmModal(t,s){const o=document.createElement("sd-confirm-modal");return o.setAttribute("data-modal-id",t),o.classList.add("sd-modal-container__modal"),this.applyProps(o,s),o}createLoadingModal(t,s){const o=document.createElement("sd-loading-modal");return o.setAttribute("data-modal-id",t),o.classList.add("sd-modal-container__modal"),this.applyLoadingProps(o,s),o}applyLoadingProps(t,s){this.hasOwnProp(s,"state")&&this.setAttr(t,"state",s.state),this.hasOwnProp(s,"message")&&(Array.isArray(s.message)?t.message=s.message:this.setAttr(t,"message",s.message)),this.hasOwnProp(s,"useButton")&&(s.useButton?t.setAttribute("use-button",""):t.removeAttribute("use-button")),this.hasOwnProp(s,"buttonLabel")&&this.setAttr(t,"button-label",s.buttonLabel),this.hasOwnProp(s,"width")&&this.setAttr(t,"width",null!=s.width?String(s.width):void 0),this.hasOwnProp(s,"height")&&this.setAttr(t,"height",null!=s.height?String(s.height):void 0),this.hasOwnProp(s,"progress")&&(t.progress=s.progress)}applyProps(t,s){this.hasOwnProp(s,"type")&&this.setAttr(t,"type",s.type),this.hasOwnProp(s,"title")&&this.setAttr(t,"modal-title",s.title),this.hasOwnProp(s,"titleClass")&&this.setAttr(t,"title-class",s.titleClass),this.hasOwnProp(s,"mainButtonLabel")&&this.setAttr(t,"main-button-label",s.mainButtonLabel),this.hasOwnProp(s,"mainButtonName")&&this.setAttr(t,"main-button-name",s.mainButtonName),this.hasOwnProp(s,"subButtonLabel")&&this.setAttr(t,"sub-button-label",s.subButtonLabel),this.hasOwnProp(s,"tagPreset")&&this.setAttr(t,"tag-preset",s.tagPreset),this.hasOwnProp(s,"tagLabel")&&this.setAttr(t,"tag-label",s.tagLabel),this.hasOwnProp(s,"slotLabel")&&this.setAttr(t,"slot-label",s.slotLabel),this.hasOwnProp(s,"topMessage")&&(t.topMessage=s.topMessage??[]),this.hasOwnProp(s,"bottomMessage")&&(t.bottomMessage=s.bottomMessage??[]),this.hasOwnProp(s,"tagContents")&&this.setSlotContent(t,"tag",s.tagContents),this.hasOwnProp(s,"optionContents")&&this.setSlotContent(t,"option",s.optionContents)}setSlotContent(t,s,o){Array.from(t.children).forEach((t=>{t.getAttribute("slot")===s&&t.remove()})),o&&(o.setAttribute("slot",s),t.appendChild(o))}handleBackdropClick(t){a(t)&&d(t)}focusInitialElement(t){const s=this.getInitialFocusTarget(t);s?.focus()}getInitialFocusTarget(t){const s=t.querySelector("[autofocus]");if(s)return s;const o=t.querySelector([".sd-confirm-modal__button sd-button:last-of-type button",".sd-action-modal__footer > sd-button button",".sd-loading-modal__button sd-button button"].join(","));if(o)return o;const i=Array.from(t.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')),e=i.find((t=>!t.closest(".sd-action-modal__close, .sd-confirm-modal__close-button")));return i.length>0?e??i[0]:(t.hasAttribute("tabindex")||t.setAttribute("tabindex","-1"),t)}restoreFocus(t){t&&"function"==typeof t.focus&&t.isConnected&&t.focus()}shakeModal(t){const s="sd-modal-container__modal--shake";t.classList.remove(s),t.addEventListener("animationend",(()=>t.classList.remove(s)),{once:!0}),requestAnimationFrame((()=>{t.classList.add(s)}))}waitForModalReady(t){const s=t.componentOnReady;return"function"==typeof s?s.call(t).then((()=>{})):new Promise((t=>{requestAnimationFrame((()=>{requestAnimationFrame((()=>t()))}))}))}hasOwnProp(t,s){return Object.prototype.hasOwnProperty.call(t,s)}setAttr(t,s,o){null!=o&&t.setAttribute(s,o)}render(){return 0===(this.entries?.length??0)?null:o("div",{class:"sd-modal-container"},this.entries.map(((t,s)=>o("div",{key:t.id,class:"sd-modal-container__layer",style:{zIndex:String(s+1)},"data-modal-id":t.id,ref:s=>{s&&this.layerRefs.set(t.id,s)}},o("div",{class:{"sd-modal-container__backdrop":!0,"sd-modal-container__backdrop--visible":t.backdropVisible},onClick:()=>this.handleBackdropClick(t.id)})))))}};r.style="sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 997);pointer-events:none}sd-modal-container .sd-modal-container__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1;pointer-events:auto}sd-modal-container .sd-modal-container__modal{position:relative;z-index:1;opacity:0;transform:scale(0);pointer-events:auto;transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}";export{r as sd_modal_container}