@warp-ds/elements 2.10.0-next.22 → 2.10.0-next.24

package/dist/packages/modal/modal.js

@@ -1,4 +1,4 @@
-var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var n=(e,o,r,t)=>{for(var a=t>1?void 0:t?x(o,r):o,s=e.length-1,l;s>=0;s--)(l=e[s])&&(a=(t?l(o,r,a):l(a))||a);return t&&a&&f(o,r,a),a};import{css as X,html as Z,LitElement as M}from"lit";import{property as b,query as p}from"lit/decorators.js";var d=[],c={documentElement:{},body:{}},k=Object.freeze({documentElement:{"scrollbar-gutter":"stable"},body:{overflow:"hidden",position:"relative",height:"100%"}}),g=e=>{e.touches.length>1||e.preventDefault?.()},y=e=>([o,r])=>{c[e][o]=document[e].style[o],document[e].style[o]=r},z=()=>Object.entries(k).forEach(([e,o])=>{Object.entries(o).forEach(y(e))}),E=e=>([o,r])=>{document[e].style[o]=c[e][o]},C=()=>Object.entries(c).forEach(([e,o])=>{Object.entries(o).forEach(E(e))}),Y=e=>e.scrollHeight-Math.abs(e.scrollTop)===e.clientHeight;function T(e){let o=-1,r=t=>{if(t.targetTouches.length!==1)return;let a=t.targetTouches[0].clientY-o;return e.scrollTop===0&&a>0||Y(e)&&a<0?g(t):(t.stopPropagation(),!0)};e.ontouchstart=t=>{t.targetTouches.length===1&&(o=t.targetTouches[0].clientY)},e.ontouchmove=r}function j(e){e.ontouchstart=null,e.ontouchmove=null}var h=e=>()=>document[e?"addEventListener":"removeEventListener"]("touchmove",g,{passive:!1}),L=h(!0),B=h();function v(e){if(!e)throw Error("Could not run setup, an element must be provided");d.some(o=>o===e)||(d.length||(z(),L()),T(e),d.push(e))}function m(){d.forEach(j),B(),C(),d=[]}import{css as S}from"lit";import{unsafeCSS as _}from"lit";var u=S`
+var x=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var n=(e,o,r,t)=>{for(var a=t>1?void 0:t?k(o,r):o,s=e.length-1,l;s>=0;s--)(l=e[s])&&(a=(t?l(o,r,a):l(a))||a);return t&&a&&x(o,r,a),a};import{html as M,LitElement as H}from"lit";import{property as b,query as p}from"lit/decorators.js";import{ifDefined as O}from"lit/directives/if-defined.js";var d=[],c={documentElement:{},body:{}},y=Object.freeze({documentElement:{"scrollbar-gutter":"stable"},body:{overflow:"hidden",position:"relative",height:"100%"}}),g=e=>{e.touches.length>1||e.preventDefault?.()},z=e=>([o,r])=>{c[e][o]=document[e].style[o],document[e].style[o]=r},E=()=>Object.entries(y).forEach(([e,o])=>{Object.entries(o).forEach(z(e))}),C=e=>([o,r])=>{document[e].style[o]=c[e][o]},_=()=>Object.entries(c).forEach(([e,o])=>{Object.entries(o).forEach(C(e))}),Y=e=>e.scrollHeight-Math.abs(e.scrollTop)===e.clientHeight;function T(e){let o=-1,r=t=>{if(t.targetTouches.length!==1)return;let a=t.targetTouches[0].clientY-o;return e.scrollTop===0&&a>0||Y(e)&&a<0?g(t):(t.stopPropagation(),!0)};e.ontouchstart=t=>{t.targetTouches.length===1&&(o=t.targetTouches[0].clientY)},e.ontouchmove=r}function j(e){e.ontouchstart=null,e.ontouchmove=null}var h=e=>()=>document[e?"addEventListener":"removeEventListener"]("touchmove",g,{passive:!1}),L=h(!0),B=h();function v(e){if(!e)throw Error("Could not run setup, an element must be provided");d.some(o=>o===e)||(d.length||(E(),L()),T(e),d.push(e))}function m(){d.forEach(j),B(),_(),d=[]}import{css as S}from"lit";import{unsafeCSS as X}from"lit";var u=S`
 	*,
 	:before,
 	:after {
@@ -271,7 +271,7 @@ var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var n=(e,o,r,t
 	svg {
 		pointer-events: none;
 	}
-`,P=_(`*, :before, :after {
+`,$=X(`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,137 +2437,184 @@ var f=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var n=(e,o,r,t
                     display: none
                 }
             }
-        `);var w=e=>class extends e{handleSlotChange(o){let r=o.target.assignedNodes({flatten:!0});for(let t of r.filter(a=>a.patchClose))t._close=()=>this.close()}};var i=class extends w(M){constructor(){super();this.show=!1;this.ignoreBackdropClicks=!1;this._isClosing=!1;this.interceptEscape=this.interceptEscape.bind(this),this.closeOnBackdropClick=this.closeOnBackdropClick.bind(this),this.eventPreventer=this.eventPreventer.bind(this),this.modifyBorderRadius=this.modifyBorderRadius.bind(this)}connectedCallback(){super.connectedCallback(),this.addEventListener("command",r=>{let t=r.command;t==="--show-modal"?this.open():(t==="--close"||t==="--confirm")&&this.close()})}async open(){this._isClosing=!1,this.dialogEl.classList.remove("close"),this.dialogEl.showModal(),this.handleListeners(),v(this.contentEl),await this.updateComplete,this.dispatchEvent(new CustomEvent("shown",{bubbles:!0,composed:!0}))}close(){this.dialogEl?.open&&(this._isClosing=!0,this.handleListeners("removeEventListener"),this.dialogEl.classList.add("close"),this.dialogEl.addEventListener("animationend",async r=>{r.animationName==="w-modal-out"&&this._isClosing&&(this.dialogEl.classList.remove("close"),this.dialogEl.close(),this._isClosing=!1,m(),this.show=!1,await this.updateComplete,this.dispatchEvent(new CustomEvent("hidden",{bubbles:!0,composed:!0})))},{once:!0}))}render(){return Z`
-			<dialog class="dialog-el">
-				<div class="dialog-inner-el">
+        `);import{css as Z}from"lit";var w=Z`
+	:host {
+		--_backdrop-bg: var(
+			--w-c-modal-backdrop-color,
+			light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.75))
+		);
+		--_background-color: var(--w-c-modal-bg, var(--w-s-color-background));
+		--_box-shadow: var(--w-c-modal-box-shadow, var(--w-shadow-l));
+		--_color: var(--w-c-modal-color, var(--w-s-color-text));
+		--_height: var(
+			--w-c-modal-height,
+			var(--w-modal-height) /* --w-modal-height kept for backwards compat */
+		);
+		--_max-height: var(
+			--w-c-modal-max-height,
+			var(--w-modal-max-height, 80%)
+				/* --w-modal-max-height kept for backwards compat */
+		);
+		--_min-height: var(
+			--w-c-modal-min-height,
+			var(--w-modal-min-heigh)
+				/* --w-modal-min-height kept for backwards compat */
+		);
+		--_translate-distance: var(
+			--w-c-modal-translate-distance,
+			var(--w-modal-translate-distance, 100%)
+				/* --w-modal-translate-distance kept for backwards compat */
+		);
+		--_width: var(
+			--w-c-modal-width,
+			var(--w-modal-width, 640px)
+				/* --w-modal-width kept for backwards compat */
+		);
+	}
+
+	[part="dialog"] {
+		background-color: transparent;
+		border-width: 0;
+		align-items: flex-end;
+		inset: 0rem;
+		height: unset;
+		max-height: unset;
+		max-width: unset;
+		width: unset;
+		margin: auto;
+		padding: 0rem;
+		backface-visibility: hidden;
+	}
+
+	[part="dialog"]::backdrop {
+		background: var(--_backdrop-bg);
+	}
+
+	[part="wrapper"] {
+		will-change: height;
+		border-radius: 8px;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		position: relative;
+		background-color: var(--_background-color);
+		color: var(--_color);
+		box-shadow: var(--_box-shadow);
+		height: var(--_height);
+		max-height: var(--_max-height);
+		min-height: var(--_min-height);
+		width: var(--_width);
+		backface-visibility: hidden;
+		padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
+		transition-property: all;
+		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+		transition-duration: 150ms;
+		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	[part="content"] {
+		display: block;
+		flex-shrink: 1;
+		flex-grow: 1;
+		overflow-x: hidden;
+		overflow-y: auto;
+		position: relative;
+		margin-bottom: 0rem;
+		padding-left: 1.6rem;
+		padding-right: 1.6rem;
+	}
+
+	@media (min-width: 480px) {
+		[part="dialog"] {
+			--w-c-modal-translate-distance: 50%;
+			place-content: center;
+			place-items: center;
+		}
+		[part="wrapper"] {
+			margin-left: 1.6rem;
+			margin-right: 1.6rem;
+			padding-bottom: 3.2rem;
+		}
+		[part="content"] {
+			padding-left: 3.2rem;
+			padding-right: 3.2rem;
+		}
+	}
+
+	@media (max-width: 479.9px) {
+		[part="wrapper"] {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+	}
+
+	[part="dialog"][open] {
+		animation: w-modal-in 0.3s ease-in-out forwards;
+		display: flex;
+		position: fixed;
+	}
+
+	[part="dialog"].close {
+		animation: w-modal-out 0.3s ease-in-out forwards;
+	}
+
+	[part="dialog"][open]::backdrop {
+		animation: backdrop-in 0.3s ease-in-out forwards;
+	}
+
+	[part="dialog"].close::backdrop {
+		animation: backdrop-out 0.3s ease-in-out forwards;
+	}
+
+	/* shouldn't need two (in/out) animations declared here, but reversing is being weird */
+	@keyframes w-modal-in {
+		from {
+			transform: translateY(var(--_translate-distance));
+			opacity: 0;
+		}
+		to {
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+
+	@keyframes w-modal-out {
+		from {
+			transform: translateY(0);
+			opacity: 1;
+		}
+		to {
+			transform: translateY(var(--_translate-distance));
+			opacity: 0;
+		}
+	}
+
+	@keyframes backdrop-in {
+		from {
+			background: transparent;
+		}
+		to {
+			background: var(--_backdrop-bg);
+		}
+	}
+
+	@keyframes backdrop-out {
+		from {
+			background: var(--_backdrop-bg);
+		}
+		to {
+			background: transparent;
+		}
+	}
+`;var f=e=>class extends e{handleSlotChange(o){let r=o.target.assignedNodes({flatten:!0});for(let t of r.filter(a=>a.patchClose))t._close=()=>this.close()}};var i=class extends f(H){constructor(){super();this.show=!1;this.ignoreBackdropClicks=!1;this._isClosing=!1;this.interceptEscape=this.interceptEscape.bind(this),this.closeOnBackdropClick=this.closeOnBackdropClick.bind(this),this.eventPreventer=this.eventPreventer.bind(this),this.modifyBorderRadius=this.modifyBorderRadius.bind(this)}connectedCallback(){super.connectedCallback(),this.addEventListener("command",r=>{let t=r.command;t==="--show-modal"?this.open():(t==="--close"||t==="--confirm")&&this.close()})}async open(){this._isClosing=!1,this.dialogEl.classList.remove("close"),this.dialogEl.showModal(),this.handleListeners(),v(this.contentEl),await this.updateComplete,this.dispatchEvent(new CustomEvent("shown",{bubbles:!0,composed:!0}))}close(){this.dialogEl?.open&&(this._isClosing=!0,this.handleListeners("removeEventListener"),this.dialogEl.classList.add("close"),this.dialogEl.addEventListener("animationend",async r=>{r.animationName==="w-modal-out"&&this._isClosing&&(this.dialogEl.classList.remove("close"),this.dialogEl.close(),this._isClosing=!1,m(),this.show=!1,await this.updateComplete,this.dispatchEvent(new CustomEvent("hidden",{bubbles:!0,composed:!0})))},{once:!0}))}updated(r){!r.has("show")||r.get("show")===void 0&&this.show===!1||this[this.show?"open":"close"]()}handleListeners(r="addEventListener"){document[r]("keydown",this.interceptEscape),this.ignoreBackdropClicks||this.dialogEl[r]("mousedown",this.closeOnBackdropClick),this.dialogEl[r]("close",this.eventPreventer),this.dialogEl[r]("cancel",this.eventPreventer),this.dialogInnerEl[r]("transitionend",this.modifyBorderRadius)}eventPreventer(r){r.preventDefault()}closeOnBackdropClick(r){this.dialogEl===r.target&&this.close()}interceptEscape(r){r.key==="Escape"&&(r.preventDefault(),this.close())}modifyBorderRadius(){this.dialogInnerEl.scrollHeight*1.02>innerHeight?this.dialogInnerEl.style.borderRadius="0px":this.dialogInnerEl.style.borderRadius=null}render(){return M`
+			<dialog part="dialog">
+				<div part="wrapper">
 					<slot name="header" @slotchange="${this.handleSlotChange}"></slot>
-					<div class="content-el" id=${this.contentId}>
+					<div part="content" id=${O(this.contentId)}>
 						<slot name="content" @slotchange="${this.handleSlotChange}"></slot>
 					</div>
 					<slot name="footer" @slotchange="${this.handleSlotChange}"></slot>
 				</div>
 			</dialog>
-		`}updated(r){!r.has("show")||r.get("show")===void 0&&this.show===!1||this[this.show?"open":"close"]()}handleListeners(r="addEventListener"){document[r]("keydown",this.interceptEscape),this.ignoreBackdropClicks||this.dialogEl[r]("mousedown",this.closeOnBackdropClick),this.dialogEl[r]("close",this.eventPreventer),this.dialogEl[r]("cancel",this.eventPreventer),this.dialogInnerEl[r]("transitionend",this.modifyBorderRadius)}eventPreventer(r){r.preventDefault()}closeOnBackdropClick(r){this.dialogEl===r.target&&this.close()}interceptEscape(r){r.key==="Escape"&&(r.preventDefault(),this.close())}modifyBorderRadius(){this.dialogInnerEl.scrollHeight*1.02>innerHeight?this.dialogInnerEl.style.borderRadius="0px":this.dialogInnerEl.style.borderRadius=null}};i.styles=[u,X`
-			.dialog-el {
-				--w-modal-translate-distance: 100%;
-				--w-modal-max-height: 80%;
-				--w-modal-width: 640px;
-				background-color: transparent;
-				border-width: 0;
-				align-items: flex-end;
-				inset: 0rem;
-				height: unset;
-				max-height: unset;
-				max-width: unset;
-				width: unset;
-				margin: auto;
-				padding: 0rem;
-				backface-visibility: hidden;
-			}
-			.dialog-inner-el {
-				will-change: height;
-				border-radius: 8px;
-				display: flex;
-				flex-direction: column;
-				overflow: hidden;
-				position: relative;
-				background-color: var(--w-s-color-background);
-				color: var(--w-s-color-text);
-				box-shadow: var(--w-shadow-m);
-				height: var(--w-modal-height);
-				max-height: var(--w-modal-max-height);
-				min-height: var(--w-modal-min-height);
-				width: var(--w-modal-width);
-				backface-visibility: hidden;
-				padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
-				transition-property: all;
-				transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-				transition-duration: 150ms;
-				transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-			}
-			.content-el {
-				display: block;
-				flex-shrink: 1;
-				flex-grow: 1;
-				overflow-x: hidden;
-				overflow-y: auto;
-				position: relative;
-				margin-bottom: 0rem;
-				padding-left: 1.6rem;
-				padding-right: 1.6rem;
-			}
-			@media (min-width: 480px) {
-				.dialog-el {
-					--w-modal-translate-distance: 50%;
-					place-content: center;
-					place-items: center;
-				}
-				.dialog-inner-el {
-					margin-left: 1.6rem;
-					margin-right: 1.6rem;
-					padding-bottom: 3.2rem;
-				}
-				.content-el {
-					padding-left: 3.2rem;
-					padding-right: 3.2rem;
-				}
-			}
-			@media (max-width: 479.9px) {
-				.dialog-inner-el {
-					border-bottom-left-radius: 0;
-					border-bottom-right-radius: 0;
-				}
-			}
-			.dialog-el[open] {
-				animation: w-modal-in 0.3s ease-in-out forwards;
-				display: flex;
-				position: fixed;
-			}
-			.dialog-el.close {
-				animation: w-modal-out 0.3s ease-in-out forwards;
-			}
-			.dialog-el[open]::backdrop {
-				animation: backdrop-in 0.3s ease-in-out forwards;
-			}
-			.dialog-el.close::backdrop {
-				animation: backdrop-out 0.3s ease-in-out forwards;
-			}
-			/* shouldn't need two (in/out) animations declared here, but reversing is being weird */
-			@keyframes w-modal-in {
-				from {
-					transform: translateY(var(--w-modal-translate-distance));
-					opacity: 0;
-				}
-				to {
-					transform: translateY(0);
-					opacity: 1;
-				}
-			}
-			@keyframes w-modal-out {
-				from {
-					transform: translateY(0);
-					opacity: 1;
-				}
-				to {
-					transform: translateY(var(--w-modal-translate-distance));
-					opacity: 0;
-				}
-			}
-			@keyframes backdrop-in {
-				from {
-					background: transparent;
-				}
-				to {
-					background: rgba(0, 0, 0, 0.25);
-				}
-			}
-			@keyframes backdrop-out {
-				from {
-					background: rgba(0, 0, 0, 0.25);
-				}
-				to {
-					background: transparent;
-				}
-			}
-		`],n([b({type:Boolean})],i.prototype,"show",2),n([b({type:String,attribute:"content-id"})],i.prototype,"contentId",2),n([b({type:Boolean,attribute:"ignore-backdrop-clicks"})],i.prototype,"ignoreBackdropClicks",2),n([p(".dialog-el")],i.prototype,"dialogEl",2),n([p(".dialog-inner-el")],i.prototype,"dialogInnerEl",2),n([p(".content-el")],i.prototype,"contentEl",2);var J=i;customElements.get("w-modal")||customElements.define("w-modal",i);export{J as ModalMain,i as WarpModal};
+		`}};i.styles=[u,w],n([b({type:Boolean})],i.prototype,"show",2),n([b({type:String,attribute:"content-id"})],i.prototype,"contentId",2),n([b({type:Boolean,attribute:"ignore-backdrop-clicks"})],i.prototype,"ignoreBackdropClicks",2),n([p('[part="dialog"]')],i.prototype,"dialogEl",2),n([p('[part="wrapper"]')],i.prototype,"dialogInnerEl",2),n([p('[part="content"]')],i.prototype,"contentEl",2);var re=i;customElements.get("w-modal")||customElements.define("w-modal",i);export{re as ModalMain,i as WarpModal};
 //# sourceMappingURL=modal.js.map