@warp-ds/elements 2.2.0-next.8 → 2.2.0

package/dist/packages/{dead-toggle/react.js → modal/modal-main.js}

@@ -1,4 +1,4 @@
-var F=Object.create;var y=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var ee=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty;var A=(e,r)=>()=>(r||e((r={exports:{}}).exports,r),r.exports);var te=(e,r,o,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of ee(r))!oe.call(e,a)&&a!==o&&y(e,a,{get:()=>r[a],enumerable:!(t=S(r,a))||t.enumerable});return e};var ae=(e,r,o)=>(o=e!=null?F(re(e)):{},te(r||!e||!e.__esModule?y(o,"default",{value:e,enumerable:!0}):o,e));var f=(e,r,o,t)=>{for(var a=t>1?void 0:t?S(r,o):r,c=e.length-1,n;c>=0;c--)(n=e[c])&&(a=(t?n(r,o,a):n(a))||a);return t&&a&&y(r,o,a),a};var q=A(i=>{"use strict";var z=Symbol.for("react.transitional.element"),ne=Symbol.for("react.portal"),ie=Symbol.for("react.fragment"),ce=Symbol.for("react.strict_mode"),se=Symbol.for("react.profiler"),de=Symbol.for("react.consumer"),le=Symbol.for("react.context"),be=Symbol.for("react.forward_ref"),ue=Symbol.for("react.suspense"),pe=Symbol.for("react.memo"),$=Symbol.for("react.lazy"),M=Symbol.iterator;function ge(e){return e===null||typeof e!="object"?null:(e=M&&e[M]||e["@@iterator"],typeof e=="function"?e:null)}var L={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},X=Object.assign,Z={};function m(e,r,o){this.props=e,this.context=r,this.refs=Z,this.updater=o||L}m.prototype.isReactComponent={};m.prototype.setState=function(e,r){if(typeof e!="object"&&typeof e!="function"&&e!=null)throw Error("takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,r,"setState")};m.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")};function I(){}I.prototype=m.prototype;function E(e,r,o){this.props=e,this.context=r,this.refs=Z,this.updater=o||L}var R=E.prototype=new I;R.constructor=E;X(R,m.prototype);R.isPureReactComponent=!0;var N=Array.isArray,d={H:null,A:null,T:null,S:null,V:null},U=Object.prototype.hasOwnProperty;function C(e,r,o,t,a,c){return o=c.ref,{$$typeof:z,type:e,key:r,ref:o!==void 0?o:null,props:c}}function ve(e,r){return C(e.type,r,void 0,void 0,void 0,e.props)}function T(e){return typeof e=="object"&&e!==null&&e.$$typeof===z}function he(e){var r={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,function(o){return r[o]})}var O=/\/+/g;function _(e,r){return typeof e=="object"&&e!==null&&e.key!=null?he(""+e.key):r.toString(36)}function H(){}function me(e){switch(e.status){case"fulfilled":return e.value;case"rejected":throw e.reason;default:switch(typeof e.status=="string"?e.then(H,H):(e.status="pending",e.then(function(r){e.status==="pending"&&(e.status="fulfilled",e.value=r)},function(r){e.status==="pending"&&(e.status="rejected",e.reason=r)})),e.status){case"fulfilled":return e.value;case"rejected":throw e.reason}}throw e}function h(e,r,o,t,a){var c=typeof e;(c==="undefined"||c==="boolean")&&(e=null);var n=!1;if(e===null)n=!0;else switch(c){case"bigint":case"string":case"number":n=!0;break;case"object":switch(e.$$typeof){case z:case ne:n=!0;break;case $:return n=e._init,h(n(e._payload),r,o,t,a)}}if(n)return a=a(e),n=t===""?"."+_(e,0):t,N(a)?(o="",n!=null&&(o=n.replace(O,"$&/")+"/"),h(a,r,o,"",function(u){return u})):a!=null&&(T(a)&&(a=ve(a,o+(a.key==null||e&&e.key===a.key?"":(""+a.key).replace(O,"$&/")+"/")+n)),r.push(a)),1;n=0;var l=t===""?".":t+":";if(N(e))for(var s=0;s<e.length;s++)t=e[s],c=l+_(t,s),n+=h(t,r,o,c,a);else if(s=ge(e),typeof s=="function")for(e=s.call(e),s=0;!(t=e.next()).done;)t=t.value,c=l+_(t,s++),n+=h(t,r,o,c,a);else if(c==="object"){if(typeof e.then=="function")return h(me(e),r,o,t,a);throw r=String(e),Error("Objects are not valid as a React child (found: "+(r==="[object Object]"?"object with keys {"+Object.keys(e).join(", ")+"}":r)+"). If you meant to render a collection of children, use an array instead.")}return n}function x(e,r,o){if(e==null)return e;var t=[],a=0;return h(e,t,"","",function(c){return r.call(o,c,a++)}),t}function fe(e){if(e._status===-1){var r=e._result;r=r(),r.then(function(o){(e._status===0||e._status===-1)&&(e._status=1,e._result=o)},function(o){(e._status===0||e._status===-1)&&(e._status=2,e._result=o)}),e._status===-1&&(e._status=0,e._result=r)}if(e._status===1)return e._result.default;throw e._result}var P=typeof reportError=="function"?reportError:function(e){if(typeof window=="object"&&typeof window.ErrorEvent=="function"){var r=new window.ErrorEvent("error",{bubbles:!0,cancelable:!0,message:typeof e=="object"&&e!==null&&typeof e.message=="string"?String(e.message):String(e),error:e});if(!window.dispatchEvent(r))return}else if(typeof process=="object"&&typeof process.emit=="function"){process.emit("uncaughtException",e);return}console.error(e)};function we(){}i.Children={map:x,forEach:function(e,r,o){x(e,function(){r.apply(this,arguments)},o)},count:function(e){var r=0;return x(e,function(){r++}),r},toArray:function(e){return x(e,function(r){return r})||[]},only:function(e){if(!T(e))throw Error("React.Children.only expected to receive a single React element child.");return e}};i.Component=m;i.Fragment=ie;i.Profiler=se;i.PureComponent=E;i.StrictMode=ce;i.Suspense=ue;i.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE=d;i.__COMPILER_RUNTIME={__proto__:null,c:function(e){return d.H.useMemoCache(e)}};i.cache=function(e){return function(){return e.apply(null,arguments)}};i.cloneElement=function(e,r,o){if(e==null)throw Error("The argument must be a React element, but you passed "+e+".");var t=X({},e.props),a=e.key,c=void 0;if(r!=null)for(n in r.ref!==void 0&&(c=void 0),r.key!==void 0&&(a=""+r.key),r)!U.call(r,n)||n==="key"||n==="__self"||n==="__source"||n==="ref"&&r.ref===void 0||(t[n]=r[n]);var n=arguments.length-2;if(n===1)t.children=o;else if(1<n){for(var l=Array(n),s=0;s<n;s++)l[s]=arguments[s+2];t.children=l}return C(e.type,a,void 0,void 0,c,t)};i.createContext=function(e){return e={$$typeof:le,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null},e.Provider=e,e.Consumer={$$typeof:de,_context:e},e};i.createElement=function(e,r,o){var t,a={},c=null;if(r!=null)for(t in r.key!==void 0&&(c=""+r.key),r)U.call(r,t)&&t!=="key"&&t!=="__self"&&t!=="__source"&&(a[t]=r[t]);var n=arguments.length-2;if(n===1)a.children=o;else if(1<n){for(var l=Array(n),s=0;s<n;s++)l[s]=arguments[s+2];a.children=l}if(e&&e.defaultProps)for(t in n=e.defaultProps,n)a[t]===void 0&&(a[t]=n[t]);return C(e,c,void 0,void 0,null,a)};i.createRef=function(){return{current:null}};i.forwardRef=function(e){return{$$typeof:be,render:e}};i.isValidElement=T;i.lazy=function(e){return{$$typeof:$,_payload:{_status:-1,_result:e},_init:fe}};i.memo=function(e,r){return{$$typeof:pe,type:e,compare:r===void 0?null:r}};i.startTransition=function(e){var r=d.T,o={};d.T=o;try{var t=e(),a=d.S;a!==null&&a(o,t),typeof t=="object"&&t!==null&&typeof t.then=="function"&&t.then(we,P)}catch(c){P(c)}finally{d.T=r}};i.unstable_useCacheRefresh=function(){return d.H.useCacheRefresh()};i.use=function(e){return d.H.use(e)};i.useActionState=function(e,r,o){return d.H.useActionState(e,r,o)};i.useCallback=function(e,r){return d.H.useCallback(e,r)};i.useContext=function(e){return d.H.useContext(e)};i.useDebugValue=function(){};i.useDeferredValue=function(e,r){return d.H.useDeferredValue(e,r)};i.useEffect=function(e,r,o){var t=d.H;if(typeof o=="function")throw Error("useEffect CRUD overload is not enabled in this build of React.");return t.useEffect(e,r)};i.useId=function(){return d.H.useId()};i.useImperativeHandle=function(e,r,o){return d.H.useImperativeHandle(e,r,o)};i.useInsertionEffect=function(e,r){return d.H.useInsertionEffect(e,r)};i.useLayoutEffect=function(e,r){return d.H.useLayoutEffect(e,r)};i.useMemo=function(e,r){return d.H.useMemo(e,r)};i.useOptimistic=function(e,r){return d.H.useOptimistic(e,r)};i.useReducer=function(e,r,o){return d.H.useReducer(e,r,o)};i.useRef=function(e){return d.H.useRef(e)};i.useState=function(e){return d.H.useState(e)};i.useSyncExternalStore=function(e,r,o){return d.H.useSyncExternalStore(e,r,o)};i.useTransition=function(){return d.H.useTransition()};i.version="19.1.1"});var B=A((Ce,D)=>{"use strict";D.exports=q()});var W=ae(B(),1);var xe=new Set(["children","localName","ref","style","className"]),G=new WeakMap,K=(e,r,o,t,a)=>{let c=a==null?void 0:a[r];c===void 0?(e[r]=o,o==null&&r in HTMLElement.prototype&&e.removeAttribute(r)):o!==t&&((n,l,s)=>{let u=G.get(n);u===void 0&&G.set(n,u=new Map);let p=u.get(l);s!==void 0?p===void 0?(u.set(l,p={handleEvent:s}),n.addEventListener(l,p)):p.handleEvent=s:p!==void 0&&(u.delete(l),n.removeEventListener(l,p))})(e,c,o)},j=({react:e,tagName:r,elementClass:o,events:t,displayName:a})=>{let c=new Set(Object.keys(t!=null?t:{})),n=e.forwardRef((l,s)=>{let u=e.useRef(new Map),p=e.useRef(null),w={},Y={};for(let[b,g]of Object.entries(l))xe.has(b)?w[b==="className"?"class":b]=g:c.has(b)||b in o.prototype?Y[b]=g:w[b]=g;return e.useLayoutEffect(()=>{if(p.current===null)return;let b=new Map;for(let g in Y)K(p.current,g,l[g],u.current.get(g),t),u.current.delete(g),b.set(g,l[g]);for(let[g,V]of u.current)K(p.current,g,void 0,V,t);u.current=b}),e.useLayoutEffect(()=>{var b;(b=p.current)==null||b.removeAttribute("defer-hydration")},[]),w.suppressHydrationWarning=!0,e.createElement(r,{...w,ref:e.useCallback(b=>{p.current=b,typeof s=="function"?s(b):s!==null&&(s.current=b)},[s])})});return n.displayName=a!=null?a:o.name,n};import{css as ke,html as ye,LitElement as _e}from"lit";import{property as k}from"lit/decorators.js";import{classMap as ze}from"lit/directives/class-map.js";import{css as Q}from"lit";var J=Q`
+var x=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var n=(e,r,a,o)=>{for(var t=o>1?void 0:o?k(r,a):r,l=e.length-1,s;l>=0;l--)(s=e[l])&&(t=(o?s(r,a,t):s(t))||t);return o&&t&&x(r,a,t),t};import{css as X,html as Z,LitElement as _}from"lit";import{property as b,query as p}from"lit/decorators.js";var d=[],c={documentElement:{},body:{}},y=Object.freeze({documentElement:{"scrollbar-gutter":"stable"},body:{overflow:"hidden",position:"relative",height:"100%"}}),g=e=>{var r;e.touches.length>1||((r=e.preventDefault)==null||r.call(e))},z=e=>([r,a])=>{c[e][r]=document[e].style[r],document[e].style[r]=a},E=()=>Object.entries(y).forEach(([e,r])=>{Object.entries(r).forEach(z(e))}),C=e=>([r,a])=>{document[e].style[r]=c[e][r]},Y=()=>Object.entries(c).forEach(([e,r])=>{Object.entries(r).forEach(C(e))}),T=e=>e.scrollHeight-Math.abs(e.scrollTop)===e.clientHeight;function j(e){let r=-1,a=o=>{if(o.targetTouches.length!==1)return;let t=o.targetTouches[0].clientY-r;return e.scrollTop===0&&t>0||T(e)&&t<0?g(o):(o.stopPropagation(),!0)};e.ontouchstart=o=>{o.targetTouches.length===1&&(r=o.targetTouches[0].clientY)},e.ontouchmove=a}function L(e){e.ontouchstart=null,e.ontouchmove=null}var h=e=>()=>document[e?"addEventListener":"removeEventListener"]("touchmove",g,{passive:!1}),B=h(!0),S=h();function v(e){if(!e)throw Error("Could not run setup, an element must be provided");d.some(r=>r===e)||(d.length||(E(),B()),j(e),d.push(e))}function m(){d.forEach(L),S(),Y(),d=[]}import{css as u}from"lit";var w=u`
   *,
   :before,
   :after {
@@ -271,7 +271,7 @@ var F=Object.create;var y=Object.defineProperty;var S=Object.getOwnPropertyDescr
   svg {
     pointer-events: none;
   }
-`,Ae=Q`*, :before, :after {
+`,R=u`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2437,71 +2437,136 @@ var F=Object.create;var y=Object.defineProperty;var S=Object.getOwnPropertyDescr
                     display: none
                 }
             }
-        `;var v=class extends _e{constructor(){super(...arguments);this.type="radio";this.checked=!1;this.indeterminate=!1;this.invalid=!1}get indeterminateMarker(){return!this.checked&&this.indeterminate?"\u2013":""}render(){let o=ze({checkbox:this.type==="checkbox",radio:this.type==="radio",checked:this.checked});return ye` <div class="${o}">${this.indeterminateMarker}</div> `}};v.styles=[J,ke`
-      div {
-        display: block;
-        border-width: 1px;
+        `;var f=e=>class extends e{handleSlotChange(r){let a=r.target.assignedNodes({flatten:!0});for(let o of a.filter(t=>t.patchClose))o._close=()=>this.close()}};var i=class extends f(_){constructor(){super(),this.interceptEscape=this.interceptEscape.bind(this),this.closeOnBackdropClick=this.closeOnBackdropClick.bind(this),this.eventPreventer=this.eventPreventer.bind(this),this.modifyBorderRadius=this.modifyBorderRadius.bind(this)}async open(){this.dialogEl.showModal(),this.handleListeners(),v(this.contentEl),await this.updateComplete,this.dispatchEvent(new CustomEvent("shown",{bubbles:!0,composed:!0}))}close(){this.handleListeners("removeEventListener"),this.dialogEl.classList.add("close"),this.dialogEl.addEventListener("animationend",async()=>{this.dialogEl.classList.remove("close"),this.dialogEl.close(),m(),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">
+          <slot name="header" @slotchange="${this.handleSlotChange}"></slot>
+          <div class="content-el" id=${this.contentId}>
+            <slot name="content" @slotchange="${this.handleSlotChange}"></slot>
+          </div>
+          <slot name="footer" @slotchange="${this.handleSlotChange}"></slot>
+        </div>
+      </dialog>
+    `}updated(r){r.has("show")&&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=[w,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);
+        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;
-        cursor: pointer;
-        appearance: none;
-        user-select: none;
-        flex-shrink: 0;
-        height: 2rem;
-        width: 2rem;
-        background-color: var(--w-s-color-background);
-        border-color: var(--w-s-color-border);
-        color: var(--w-s-color-icon-inverted);
-        font-weight: 700;
-        text-align: center;
-        line-height: var(--w-line-height-xs);
-        font-size: var(--w-font-size-m);
+        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;
+        }
       }
-      :host([type='checkbox']) div {
-        border-radius: 2px;
+      @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;
       }
-      :host([type='checkbox'][checked]) div,
-      :host([type='checkbox'][indeterminate]) div {
-        background-color: var(--w-s-color-background-primary);
-        border-color: var(--w-s-color-border-primary);
+      .dialog-el.close {
+        animation: w-modal-out 0.3s ease-in-out forwards;
       }
-      :host([type='checkbox'][checked]) div {
-        background-image: var(--w-icon-toggle-checked);
+      .dialog-el[open]::backdrop {
+        animation: backdrop-in 0.3s ease-in-out forwards;
       }
-      :host([type='radio']) div {
-        border-radius: 50%;
+      .dialog-el.close::backdrop {
+        animation: backdrop-out 0.3s ease-in-out forwards;
       }
-      :host([type='radio'][checked]) div {
-        border-color: var(--w-s-color-border-selected);
-        border-width: 0.6rem;
+      /* 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;
+        }
       }
-      :host([invalid]) div {
-        border-color: var(--w-s-color-border-negative) !important;
+      @keyframes w-modal-out {
+        from {
+          transform: translateY(0);
+          opacity: 1;
+        }
+        to {
+          transform: translateY(var(--w-modal-translate-distance));
+          opacity: 0;
+        }
       }
-      :host([type='checkbox'][invalid][checked]) div,
-      :host([type='checkbox'][invalid][indeterminate]) div {
-        background-color: var(--w-s-color-background-negative);
+      @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;
+        }
       }
-    `],f([k({type:String})],v.prototype,"type",2),f([k({type:Boolean,reflect:!0})],v.prototype,"checked",2),f([k({type:Boolean,reflect:!0})],v.prototype,"indeterminate",2),f([k({type:Boolean,reflect:!0})],v.prototype,"invalid",2);customElements.get("w-dead-toggle")||customElements.define("w-dead-toggle",v);var Ue=j({tagName:"w-dead-toggle",elementClass:v,react:W.default});export{Ue as DeadToggle};
-/*! Bundled license information:
-
-react/cjs/react.production.js:
-  (**
-   * @license React
-   * react.production.js
-   *
-   * Copyright (c) Meta Platforms, Inc. and affiliates.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   *)
-
-@lit/react/create-component.js:
-  (**
-   * @license
-   * Copyright 2018 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-*/
-//# sourceMappingURL=react.js.map
+    `],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);customElements.get("w-modal")||customElements.define("w-modal",i);export{i as ModalMain};
+//# sourceMappingURL=modal-main.js.map