@fluid-topics/ft-dialog 0.1.6 → 0.1.7

package/build/ft-dialog.light.js

@@ -0,0 +1,193 @@
+!function(t,i,e,o){
+/**
+     * @license
+     * Copyright 2017 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */
+var s;const n=globalThis.trustedTypes,r=n?n.createPolicy("lit-html",{createHTML:t=>t}):void 0,h=`lit$${(Math.random()+"").slice(9)}$`,l="?"+h,a=`<${l}>`,p=document,f=(t="")=>p.createComment(t),y=t=>null===t||"object"!=typeof t&&"function"!=typeof t,g=Array.isArray,d=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,c=/-->/g,u=/>/g,v=/>|[ 	\n\r](?:([^\s"'>=/]+)([ 	\n\r]*=[ 	\n\r]*(?:[^ 	\n\r"'`<>=]|("|')|))|$)/g,$=/'/g,m=/"/g,b=/^(?:script|style|textarea|title)$/i,x=(t=>(i,...e)=>({_$litType$:t,strings:i,values:e}))(1),w=Symbol.for("lit-noChange"),z=Symbol.for("lit-nothing"),_=new WeakMap,S=p.createTreeWalker(p,129,null,!1),k=(t,i)=>{const e=t.length-1,o=[];let s,n=2===i?"<svg>":"",l=d;for(let i=0;i<e;i++){const e=t[i];let r,p,f=-1,y=0;for(;y<e.length&&(l.lastIndex=y,p=l.exec(e),null!==p);)y=l.lastIndex,l===d?"!--"===p[1]?l=c:void 0!==p[1]?l=u:void 0!==p[2]?(b.test(p[2])&&(s=RegExp("</"+p[2],"g")),l=v):void 0!==p[3]&&(l=v):l===v?">"===p[0]?(l=null!=s?s:d,f=-1):void 0===p[1]?f=-2:(f=l.lastIndex-p[2].length,r=p[1],l=void 0===p[3]?v:'"'===p[3]?m:$):l===m||l===$?l=v:l===c||l===u?l=d:(l=v,s=void 0);const g=l===v&&t[i+1].startsWith("/>")?" ":"";n+=l===d?e+a:f>=0?(o.push(r),e.slice(0,f)+"$lit$"+e.slice(f)+h+g):e+h+(-2===f?(o.push(void 0),i):g)}const p=n+(t[e]||"<?>")+(2===i?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==r?r.createHTML(p):p,o]};class A{constructor({strings:t,_$litType$:i},e){let o;this.parts=[];let s=0,r=0;const a=t.length-1,p=this.parts,[y,g]=k(t,i);if(this.el=A.createElement(y,e),S.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes)}for(;null!==(o=S.nextNode())&&p.length<a;){if(1===o.nodeType){if(o.hasAttributes()){const t=[];for(const i of o.getAttributeNames())if(i.endsWith("$lit$")||i.startsWith(h)){const e=g[r++];if(t.push(i),void 0!==e){const t=o.getAttribute(e.toLowerCase()+"$lit$").split(h),i=/([.?@])?(.*)/.exec(e);p.push({type:1,index:s,name:i[2],strings:t,ctor:"."===i[1]?I:"?"===i[1]?j:"@"===i[1]?Z:C})}else p.push({type:6,index:s})}for(const i of t)o.removeAttribute(i)}if(b.test(o.tagName)){const t=o.textContent.split(h),i=t.length-1;if(i>0){o.textContent=n?n.emptyScript:"";for(let e=0;e<i;e++)o.append(t[e],f()),S.nextNode(),p.push({type:2,index:++s});o.append(t[i],f())}}}else if(8===o.nodeType)if(o.data===l)p.push({type:2,index:s});else{let t=-1;for(;-1!==(t=o.data.indexOf(h,t+1));)p.push({type:7,index:s}),t+=h.length-1}s++}}static createElement(t,i){const e=p.createElement("template");return e.innerHTML=t,e}}function E(t,i,e=t,o){var s,n,r,h;if(i===w)return i;let l=void 0!==o?null===(s=e._$Cl)||void 0===s?void 0:s[o]:e._$Cu;const a=y(i)?void 0:i._$litDirective$;return(null==l?void 0:l.constructor)!==a&&(null===(n=null==l?void 0:l._$AO)||void 0===n||n.call(l,!1),void 0===a?l=void 0:(l=new a(t),l._$AT(t,e,o)),void 0!==o?(null!==(r=(h=e)._$Cl)&&void 0!==r?r:h._$Cl=[])[o]=l:e._$Cu=l),void 0!==l&&(i=E(t,l._$AS(t,i.values),l,o)),i}class O{constructor(t,i){this.v=[],this._$AN=void 0,this._$AD=t,this._$AM=i}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}p(t){var i;const{el:{content:e},parts:o}=this._$AD,s=(null!==(i=null==t?void 0:t.creationScope)&&void 0!==i?i:p).importNode(e,!0);S.currentNode=s;let n=S.nextNode(),r=0,h=0,l=o[0];for(;void 0!==l;){if(r===l.index){let i;2===l.type?i=new N(n,n.nextSibling,this,t):1===l.type?i=new l.ctor(n,l.name,l.strings,this,t):6===l.type&&(i=new M(n,this,t)),this.v.push(i),l=o[++h]}r!==(null==l?void 0:l.index)&&(n=S.nextNode(),r++)}return s}m(t){let i=0;for(const e of this.v)void 0!==e&&(void 0!==e.strings?(e._$AI(t,e,i),i+=e.strings.length-2):e._$AI(t[i])),i++}}class N{constructor(t,i,e,o){var s;this.type=2,this._$AH=z,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=e,this.options=o,this._$Cg=null===(s=null==o?void 0:o.isConnected)||void 0===s||s}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==i?i:this._$Cg}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=E(this,t,i),y(t)?t===z||null==t||""===t?(this._$AH!==z&&this._$AR(),this._$AH=z):t!==this._$AH&&t!==w&&this.$(t):void 0!==t._$litType$?this.T(t):void 0!==t.nodeType?this.S(t):(t=>{var i;return g(t)||"function"==typeof(null===(i=t)||void 0===i?void 0:i[Symbol.iterator])})(t)?this.A(t):this.$(t)}M(t,i=this._$AB){return this._$AA.parentNode.insertBefore(t,i)}S(t){this._$AH!==t&&(this._$AR(),this._$AH=this.M(t))}$(t){this._$AH!==z&&y(this._$AH)?this._$AA.nextSibling.data=t:this.S(p.createTextNode(t)),this._$AH=t}T(t){var i;const{values:e,_$litType$:o}=t,s="number"==typeof o?this._$AC(t):(void 0===o.el&&(o.el=A.createElement(o.h,this.options)),o);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===s)this._$AH.m(e);else{const t=new O(s,this),i=t.p(this.options);t.m(e),this.S(i),this._$AH=t}}_$AC(t){let i=_.get(t.strings);return void 0===i&&_.set(t.strings,i=new A(t)),i}A(t){g(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let e,o=0;for(const s of t)o===i.length?i.push(e=new N(this.M(f()),this.M(f()),this,this.options)):e=i[o],e._$AI(s),o++;o<i.length&&(this._$AR(e&&e._$AB.nextSibling,o),i.length=o)}_$AR(t=this._$AA.nextSibling,i){var e;for(null===(e=this._$AP)||void 0===e||e.call(this,!1,!0,i);t&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i}}setConnected(t){var i;void 0===this._$AM&&(this._$Cg=t,null===(i=this._$AP)||void 0===i||i.call(this,t))}}class C{constructor(t,i,e,o,s){this.type=1,this._$AH=z,this._$AN=void 0,this.element=t,this.name=i,this._$AM=o,this.options=s,e.length>2||""!==e[0]||""!==e[1]?(this._$AH=Array(e.length-1).fill(new String),this.strings=e):this._$AH=z}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,e,o){const s=this.strings;let n=!1;if(void 0===s)t=E(this,t,i,0),n=!y(t)||t!==this._$AH&&t!==w,n&&(this._$AH=t);else{const o=t;let r,h;for(t=s[0],r=0;r<s.length-1;r++)h=E(this,o[e+r],i,r),h===w&&(h=this._$AH[r]),n||(n=!y(h)||h!==this._$AH[r]),h===z?t=z:t!==z&&(t+=(null!=h?h:"")+s[r+1]),this._$AH[r]=h}n&&!o&&this.k(t)}k(t){t===z?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class I extends C{constructor(){super(...arguments),this.type=3}k(t){this.element[this.name]=t===z?void 0:t}}const T=n?n.emptyScript:"";class j extends C{constructor(){super(...arguments),this.type=4}k(t){t&&t!==z?this.element.setAttribute(this.name,T):this.element.removeAttribute(this.name)}}class Z extends C{constructor(t,i,e,o,s){super(t,i,e,o,s),this.type=5}_$AI(t,i=this){var e;if((t=null!==(e=E(this,t,i,0))&&void 0!==e?e:z)===w)return;const o=this._$AH,s=t===z&&o!==z||t.capture!==o.capture||t.once!==o.once||t.passive!==o.passive,n=t!==z&&(o===z||s);s&&this.element.removeEventListener(this.name,this,o),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var i,e;"function"==typeof this._$AH?this._$AH.call(null!==(e=null===(i=this.options)||void 0===i?void 0:i.host)&&void 0!==e?e:this.element,t):this._$AH.handleEvent(t)}}class M{constructor(t,i,e){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=e}get _$AU(){return this._$AM._$AU}_$AI(t){E(this,t)}}const U=window.litHtmlPolyfillSupport;null==U||U(A,N),(null!==(s=globalThis.litHtmlVersions)&&void 0!==s?s:globalThis.litHtmlVersions=[]).push("2.1.3");
+/**
+     * @license
+     * Copyright 2020 Google LLC
+     * SPDX-License-Identifier: BSD-3-Clause
+     */
+const B=t=>({_$litStatic$:t}),R=new Map,W=(t=>(i,...e)=>{var o;const s=e.length;let n,r;const h=[],l=[];let a,p=0,f=!1;for(;p<s;){for(a=i[p];p<s&&void 0!==(r=e[p],n=null===(o=r)||void 0===o?void 0:o._$litStatic$);)a+=n+i[++p],f=!0;l.push(r),h.push(a),p++}if(p===s&&h.push(i[s]),f){const t=h.join("$$lit$$");void 0===(i=R.get(t))&&(h.raw=h,R.set(t,i=h)),e=l}return t(i,...e)})(x);var D,G=function(t,i,e,o){for(var s,n=arguments.length,r=n<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,h=t.length-1;h>=0;h--)(s=t[h])&&(r=(n<3?s(r):n>3?s(i,e,r):s(i,e))||r);return n>3&&r&&Object.defineProperty(i,e,r),r};!function(t){t.title="title",t.title_dense="title-dense",t.subtitle1="subtitle1",t.subtitle2="subtitle2",t.body1="body1",t.body2="body2",t.caption="caption",t.breadcrumb="breadcrumb",t.overline="overline",t.button="button"}(D||(D={}));const K=o.FtCssVariable.extend("--ft-typography-font-family",o.designSystemVariables.titleFont),H=o.FtCssVariable.extend("--ft-typography-font-family",o.designSystemVariables.contentFont),L={fontFamily:H,fontSize:o.FtCssVariable.create("--ft-typography-font-size","SIZE","16px"),fontWeight:o.FtCssVariable.create("--ft-typography-font-weight","UNKNOWN","normal"),letterSpacing:o.FtCssVariable.create("--ft-typography-letter-spacing","SIZE","0.496px"),lineHeight:o.FtCssVariable.create("--ft-typography-line-height","SIZE","24px"),textTransform:o.FtCssVariable.create("--ft-typography-text-transform","UNKNOWN","inherit")},F=o.FtCssVariable.extend("--ft-typography-title-font-family",K),q=o.FtCssVariable.extend("--ft-typography-title-font-size",L.fontSize,"20px"),J=o.FtCssVariable.extend("--ft-typography-title-font-weight",L.fontWeight,"normal"),P=o.FtCssVariable.extend("--ft-typography-title-letter-spacing",L.letterSpacing,"0.15px"),Q=o.FtCssVariable.extend("--ft-typography-title-line-height",L.lineHeight,"24px"),V=o.FtCssVariable.extend("--ft-typography-title-text-transform",L.textTransform,"inherit"),X=o.FtCssVariable.extend("--ft-typography-title-dense-font-family",K),Y=o.FtCssVariable.extend("--ft-typography-title-dense-font-size",L.fontSize,"14px"),tt=o.FtCssVariable.extend("--ft-typography-title-dense-font-weight",L.fontWeight,"normal"),it=o.FtCssVariable.extend("--ft-typography-title-dense-letter-spacing",L.letterSpacing,"0.105px"),et=o.FtCssVariable.extend("--ft-typography-title-dense-line-height",L.lineHeight,"24px"),ot=o.FtCssVariable.extend("--ft-typography-title-dense-text-transform",L.textTransform,"inherit"),st=o.FtCssVariable.extend("--ft-typography-subtitle1-font-family",H),nt=o.FtCssVariable.extend("--ft-typography-subtitle1-font-size",L.fontSize,"16px"),rt=o.FtCssVariable.extend("--ft-typography-subtitle1-font-weight",L.fontWeight,"600"),ht=o.FtCssVariable.extend("--ft-typography-subtitle1-letter-spacing",L.letterSpacing,"0.144px"),lt=o.FtCssVariable.extend("--ft-typography-subtitle1-line-height",L.lineHeight,"24px"),at=o.FtCssVariable.extend("--ft-typography-subtitle1-text-transform",L.textTransform,"inherit"),pt=o.FtCssVariable.extend("--ft-typography-subtitle2-font-family",H),ft=o.FtCssVariable.extend("--ft-typography-subtitle2-font-size",L.fontSize,"14px"),yt=o.FtCssVariable.extend("--ft-typography-subtitle2-font-weight",L.fontWeight,"normal"),gt=o.FtCssVariable.extend("--ft-typography-subtitle2-letter-spacing",L.letterSpacing,"0.098px"),dt=o.FtCssVariable.extend("--ft-typography-subtitle2-line-height",L.lineHeight,"24px"),ct=o.FtCssVariable.extend("--ft-typography-subtitle2-text-transform",L.textTransform,"inherit"),ut=o.FtCssVariable.extend("--ft-typography-body1-font-family",H),vt=o.FtCssVariable.extend("--ft-typography-body1-font-size",L.fontSize,"16px"),$t=o.FtCssVariable.extend("--ft-typography-body1-font-weight",L.fontWeight,"normal"),mt=o.FtCssVariable.extend("--ft-typography-body1-letter-spacing",L.letterSpacing,"0.496px"),bt=o.FtCssVariable.extend("--ft-typography-body1-line-height",L.lineHeight,"24px"),xt=o.FtCssVariable.extend("--ft-typography-body1-text-transform",L.textTransform,"inherit"),wt=o.FtCssVariable.extend("--ft-typography-body2-font-family",H),zt=o.FtCssVariable.extend("--ft-typography-body2-font-size",L.fontSize,"14px"),_t=o.FtCssVariable.extend("--ft-typography-body2-font-weight",L.fontWeight,"normal"),St=o.FtCssVariable.extend("--ft-typography-body2-letter-spacing",L.letterSpacing,"0.252px"),kt=o.FtCssVariable.extend("--ft-typography-body2-line-height",L.lineHeight,"20px"),At=o.FtCssVariable.extend("--ft-typography-body2-text-transform",L.textTransform,"inherit"),Et=o.FtCssVariable.extend("--ft-typography-caption-font-family",H),Ot=o.FtCssVariable.extend("--ft-typography-caption-font-size",L.fontSize,"12px"),Nt=o.FtCssVariable.extend("--ft-typography-caption-font-weight",L.fontWeight,"normal"),Ct=o.FtCssVariable.extend("--ft-typography-caption-letter-spacing",L.letterSpacing,"0.396px"),It=o.FtCssVariable.extend("--ft-typography-caption-line-height",L.lineHeight,"16px"),Tt=o.FtCssVariable.extend("--ft-typography-caption-text-transform",L.textTransform,"inherit"),jt=o.FtCssVariable.extend("--ft-typography-breadcrumb-font-family",H),Zt=o.FtCssVariable.extend("--ft-typography-breadcrumb-font-size",L.fontSize,"10px"),Mt=o.FtCssVariable.extend("--ft-typography-breadcrumb-font-weight",L.fontWeight,"normal"),Ut=o.FtCssVariable.extend("--ft-typography-breadcrumb-letter-spacing",L.letterSpacing,"0.33px"),Bt=o.FtCssVariable.extend("--ft-typography-breadcrumb-line-height",L.lineHeight,"16px"),Rt=o.FtCssVariable.extend("--ft-typography-breadcrumb-text-transform",L.textTransform,"inherit"),Wt=o.FtCssVariable.extend("--ft-typography-overline-font-family",H),Dt=o.FtCssVariable.extend("--ft-typography-overline-font-size",L.fontSize,"10px"),Gt=o.FtCssVariable.extend("--ft-typography-overline-font-weight",L.fontWeight,"normal"),Kt=o.FtCssVariable.extend("--ft-typography-overline-letter-spacing",L.letterSpacing,"1.5px"),Ht=o.FtCssVariable.extend("--ft-typography-overline-line-height",L.lineHeight,"16px"),Lt=o.FtCssVariable.extend("--ft-typography-overline-text-transform",L.textTransform,"uppercase"),Ft=o.FtCssVariable.extend("--ft-typography-button-font-family",H),qt=o.FtCssVariable.extend("--ft-typography-button-font-size",L.fontSize,"14px"),Jt=o.FtCssVariable.extend("--ft-typography-button-font-weight",L.fontWeight,"600"),Pt=o.FtCssVariable.extend("--ft-typography-button-letter-spacing",L.letterSpacing,"1.246px"),Qt=o.FtCssVariable.extend("--ft-typography-button-line-height",L.lineHeight,"16px"),Vt=o.FtCssVariable.extend("--ft-typography-button-text-transform",L.textTransform,"uppercase"),Xt=i.css`
+    .ft-typography--title {
+        font-family: ${F};
+        font-size: ${q};
+        font-weight: ${J};
+        letter-spacing: ${P};
+        line-height: ${Q};
+        text-transform: ${V};
+    }
+`,Yt=i.css`
+    .ft-typography--title-dense {
+        font-family: ${X};
+        font-size: ${Y};
+        font-weight: ${tt};
+        letter-spacing: ${it};
+        line-height: ${et};
+        text-transform: ${ot};
+    }
+`,ti=i.css`
+    .ft-typography--subtitle1 {
+        font-family: ${st};
+        font-size: ${nt};
+        font-weight: ${rt};
+        letter-spacing: ${ht};
+        line-height: ${lt};
+        text-transform: ${at};
+    }
+`,ii=i.css`
+    .ft-typography--subtitle2 {
+        font-family: ${pt};
+        font-size: ${ft};
+        font-weight: ${yt};
+        letter-spacing: ${gt};
+        line-height: ${dt};
+        text-transform: ${ct};
+    }
+
+`,ei=i.css`
+    .ft-typography--body1 {
+        font-family: ${ut};
+        font-size: ${vt};
+        font-weight: ${$t};
+        letter-spacing: ${mt};
+        line-height: ${bt};
+        text-transform: ${xt};
+    }
+`,oi=i.css`
+    .ft-typography--body2 {
+        font-family: ${wt};
+        font-size: ${zt};
+        font-weight: ${_t};
+        letter-spacing: ${St};
+        line-height: ${kt};
+        text-transform: ${At};
+    }
+`,si=i.css`
+    .ft-typography--caption {
+        font-family: ${Et};
+        font-size: ${Ot};
+        font-weight: ${Nt};
+        letter-spacing: ${Ct};
+        line-height: ${It};
+        text-transform: ${Tt};
+    }
+`,ni=i.css`
+    .ft-typography--breadcrumb {
+        font-family: ${jt};
+        font-size: ${Zt};
+        font-weight: ${Mt};
+        letter-spacing: ${Ut};
+        line-height: ${Bt};
+        text-transform: ${Rt};
+    }
+`,ri=i.css`
+    .ft-typography--overline {
+        font-family: ${Wt};
+        font-size: ${Dt};
+        font-weight: ${Gt};
+        letter-spacing: ${Kt};
+        line-height: ${Ht};
+        text-transform: ${Lt};
+    }
+`,hi=i.css`
+    .ft-typography--button {
+        font-family: ${Ft};
+        font-size: ${qt};
+        font-weight: ${Jt};
+        letter-spacing: ${Pt};
+        line-height: ${Qt};
+        text-transform: ${Vt};
+    }
+`;let li=class extends o.FtLitElement{constructor(){super(...arguments),this.variant=D.body1}getStyles(){return[Xt,Yt,ti,ii,ei,oi,si,ni,ri,hi]}getTemplate(){return this.element?W`
+                <${B(this.element)}
+                        class="ft-typography ft-typography--${this.variant}">
+                    <slot></slot>
+                </${B(this.element)}>
+            `:W`
+            <slot class="ft-typography ft-typography--${this.variant}"></slot>
+        `}};G([e.property()],li.prototype,"element",void 0),G([e.property()],li.prototype,"variant",void 0),li=G([o.customElement("ft-typography")],li);var ai=function(t,i,e,o){for(var s,n=arguments.length,r=n<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,e):o,h=t.length-1;h>=0;h--)(s=t[h])&&(r=(n<3?s(r):n>3?s(i,e,r):s(i,e))||r);return n>3&&r&&Object.defineProperty(i,e,r),r};const pi={zIndex:o.FtCssVariable.create("--ft-dialog-z-index","NUMBER","2"),overlayBackgroundColor:o.FtCssVariable.create("--ft-dialog-overlay-background-color","COLOR","rgba(0, 0, 0, 0.3)"),height:o.FtCssVariable.create("--ft-dialog-height","SIZE","unset"),width:o.FtCssVariable.create("--ft-dialog-width","SIZE","unset"),padding:o.FtCssVariable.create("--ft-dialog-padding","SIZE","24px"),colorSurface:o.FtCssVariable.external(o.designSystemVariables.colorSurface,"Design system"),borderRadiusS:o.FtCssVariable.external(o.designSystemVariables.borderRadiusS,"Design system"),elevation24:o.FtCssVariable.external(o.designSystemVariables.elevation24,"Design system")};let fi=class extends o.FtLitElement{constructor(){super(...arguments),this.opened=!1,this.closeOnEsc=!1,this.closeOnClickOutside=!1,this.heading=""}getStyles(){return i.css`
+            .ft-dialog {
+                position: fixed;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                z-index: ${pi.zIndex};
+
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+
+                margin: auto;
+            }
+
+            .ft-dialog_overlay {
+                position: fixed;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+
+                height: 100%;
+                width: 100%;
+
+                background-color: ${pi.overlayBackgroundColor};
+
+            }
+
+            .ft-dialog_wrapper {
+                position: fixed;
+                display: flex;
+                flex-direction: column;
+
+                width: ${pi.width};
+                height: ${pi.height};
+                max-width: 95vw;
+                max-height: 95vh;
+
+                padding: ${pi.padding};
+                background-color: ${pi.colorSurface};
+
+                border-radius: ${pi.borderRadiusS};
+                box-shadow: ${pi.elevation24};
+            }
+
+            .ft-dialog_content {
+                flex-grow: 2;
+                overflow: auto;
+            }
+
+            .ft-dialog_heading {
+                display: block;
+                margin-bottom: 12px;
+            }
+
+            .ft-dialog_buttons {
+                margin-top: 12px;
+            }
+
+            slot[name=buttons] {
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+            }
+        `}getTemplate(){return this.opened?i.html`
+            <div class="ft-dialog">
+                <div class="ft-dialog_overlay" @click="${()=>this.watchClickOutside()}"></div>
+                <div class="ft-dialog_wrapper">
+                    ${this.heading?i.html`
+                        <ft-typography class="ft-dialog_heading" variant="title">${this.heading}</ft-typography>
+                    `:null}
+                    <div class="ft-dialog_content">
+                        <slot></slot>
+                    </div>
+                    <div class="ft-dialog_buttons">
+                        <slot name="buttons"></slot>
+                    </div>
+                </div>
+            </div>
+        `:null}updated(t){if(t.has("opened")){const t=new CustomEvent("opened-changed",{detail:{opened:this.opened}});this.dispatchEvent(t)}}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.watchEscapeKey.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.watchEscapeKey.bind(this))}close(){this.opened=!1}open(){this.opened=!0}watchEscapeKey(t){"Escape"===t.key&&this.closeOnEsc&&this.close()}watchClickOutside(){this.closeOnClickOutside&&this.close()}};fi.elementDefinitions={"ft-typography":li},ai([e.property({type:Boolean,hasChanged:(t,i)=>!1===i&&!0===t||!0===i&&!1===t})],fi.prototype,"opened",void 0),ai([e.property({type:Boolean})],fi.prototype,"closeOnEsc",void 0),ai([e.property({type:Boolean})],fi.prototype,"closeOnClickOutside",void 0),ai([e.property({type:String})],fi.prototype,"heading",void 0),fi=ai([o.customElement("ft-dialog")],fi);var yi=fi;t.FtDialogCssVariables=pi,t.default=yi,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.wcUtils);

package/build/ft-dialog.min.js

@@ -37,7 +37,21 @@ const et=(t,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e
      * @license
      * Copyright 2021 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
-     */class at extends(function(t){return class extends t{createRenderRoot(){const t=this.constructor,{registry:e,elementDefinitions:i,shadowRootOptions:o}=t;i&&!e&&(t.registry=new CustomElementRegistry,Object.entries(i).forEach((([e,i])=>t.registry.define(e,i))));const n=this.renderOptions.creationScope=this.attachShadow({...o,customElements:t.registry});return a(n,this.constructor.elementStyles),n}}}(Y)){constructor(){super(),this.constructorName=this.constructor.name,this.proto=this.constructor.prototype}getStyles(){return[]}getTemplate(){return null}render(){let t=this.getStyles();return Array.isArray(t)||(t=[t]),L`${t.map((t=>L`<style>${t}</style>`))} ${this.getTemplate()}`}adoptedCallback(){Object.getPrototypeOf(this)!==this.constructorName&&Object.setPrototypeOf(this,this.proto)}updated(t){super.updated(t),setTimeout((()=>this.contentAvailableCallback(t)),0)}contentAvailableCallback(t){}}var lt,ht;s`.ft-no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}`,navigator.vendor&&navigator.vendor.match(/apple/i)||(null===(ht=null===(lt=window.safari)||void 0===lt?void 0:lt.pushNotification)||void 0===ht||ht.toString());
+     */class at extends(function(t){return class extends t{createRenderRoot(){const t=this.constructor,{registry:e,elementDefinitions:i,shadowRootOptions:o}=t;i&&!e&&(t.registry=new CustomElementRegistry,Object.entries(i).forEach((([e,i])=>t.registry.define(e,i))));const n=this.renderOptions.creationScope=this.attachShadow({...o,customElements:t.registry});return a(n,this.constructor.elementStyles),n}}}(Y)){constructor(){super(),this.constructorName=this.constructor.name,this.proto=this.constructor.prototype}getStyles(){return[]}getTemplate(){return null}render(){let t=this.getStyles();return Array.isArray(t)||(t=[t]),L`
+            ${t.map((t=>L`
+                <style>${t}</style>
+            `))}
+            ${this.getTemplate()}
+        `}adoptedCallback(){Object.getPrototypeOf(this)!==this.constructorName&&Object.setPrototypeOf(this,this.proto)}updated(t){super.updated(t),setTimeout((()=>this.contentAvailableCallback(t)),0)}contentAvailableCallback(t){}}var lt,ht;s`
+    .ft-no-text-select {
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+`,navigator.vendor&&navigator.vendor.match(/apple/i)||(null===(ht=null===(lt=window.safari)||void 0===lt?void 0:lt.pushNotification)||void 0===ht||ht.toString());
 /**
      * @license
      * Copyright 2020 Google LLC
@@ -141,4 +155,86 @@ const ct=t=>({_$litStatic$:t}),pt=new Map,ft=(t=>(e,...i)=>{var o;const n=i.leng
                 </${ct(this.element)}>
             `:ft`
             <slot class="ft-typography ft-typography--${this.variant}"></slot>
-        `}};dt([it()],Le.prototype,"element",void 0),dt([it()],Le.prototype,"variant",void 0),Le=dt([nt("ft-typography")],Le);var Te=function(t,e,i,o){for(var n,r=arguments.length,s=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,a=t.length-1;a>=0;a--)(n=t[a])&&(s=(r<3?n(s):r>3?n(e,i,s):n(e,i))||s);return r>3&&s&&Object.defineProperty(e,i,s),s};const _e={zIndex:rt.create("--ft-dialog-z-index","NUMBER","2"),overlayBackgroundColor:rt.create("--ft-dialog-overlay-background-color","COLOR","rgba(0, 0, 0, 0.3)"),height:rt.create("--ft-dialog-height","SIZE","unset"),width:rt.create("--ft-dialog-width","SIZE","unset"),padding:rt.create("--ft-dialog-padding","SIZE","24px"),colorSurface:rt.external(st.colorSurface,"Design system"),borderRadiusS:rt.external(st.borderRadiusS,"Design system"),elevation24:rt.external(st.elevation24,"Design system")};let Ae=class extends at{constructor(){super(...arguments),this.opened=!1,this.closeOnEsc=!1,this.closeOnClickOutside=!1,this.heading=""}getStyles(){return s`.ft-dialog{position:fixed;top:0;right:0;bottom:0;left:0;z-index:${_e.zIndex};display:flex;flex-direction:column;justify-content:center;align-items:center;margin:auto}.ft-dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0;height:100%;width:100%;background-color:${_e.overlayBackgroundColor}}.ft-dialog_wrapper{position:fixed;display:flex;flex-direction:column;width:${_e.width};height:${_e.height};max-width:95vw;max-height:95vh;padding:${_e.padding};background-color:${_e.colorSurface};border-radius:${_e.borderRadiusS};box-shadow:${_e.elevation24}}.ft-dialog_content{flex-grow:2;overflow:auto}.ft-dialog_heading{display:block;margin-bottom:12px}.ft-dialog_buttons{margin-top:12px}slot[name=buttons]{display:flex;align-items:center;justify-content:flex-end}`}getTemplate(){return this.opened?L`<div class="ft-dialog"><div class="ft-dialog_overlay" @click="${()=>this.watchClickOutside()}"></div><div class="ft-dialog_wrapper">${this.heading?L`<ft-typography class="ft-dialog_heading" variant="title">${this.heading}</ft-typography>`:null}<div class="ft-dialog_content"><slot></slot></div><div class="ft-dialog_buttons"><slot name="buttons"></slot></div></div></div>`:null}updated(t){if(t.has("opened")){const t=new CustomEvent("opened-changed",{detail:{opened:this.opened}});this.dispatchEvent(t)}}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.watchEscapeKey.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.watchEscapeKey.bind(this))}close(){this.opened=!1}open(){this.opened=!0}watchEscapeKey(t){"Escape"===t.key&&this.closeOnEsc&&this.close()}watchClickOutside(){this.closeOnClickOutside&&this.close()}};Ae.elementDefinitions={"ft-typography":Le},Te([it({type:Boolean,hasChanged:(t,e)=>!1===e&&!0===t||!0===e&&!1===t})],Ae.prototype,"opened",void 0),Te([it({type:Boolean})],Ae.prototype,"closeOnEsc",void 0),Te([it({type:Boolean})],Ae.prototype,"closeOnClickOutside",void 0),Te([it({type:String})],Ae.prototype,"heading",void 0),Ae=Te([nt("ft-dialog")],Ae);var ze=Ae;t.FtDialogCssVariables=_e,t.default=ze,Object.defineProperty(t,"t",{value:!0})}({});
+        `}};dt([it()],Le.prototype,"element",void 0),dt([it()],Le.prototype,"variant",void 0),Le=dt([nt("ft-typography")],Le);var Te=function(t,e,i,o){for(var n,r=arguments.length,s=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,a=t.length-1;a>=0;a--)(n=t[a])&&(s=(r<3?n(s):r>3?n(e,i,s):n(e,i))||s);return r>3&&s&&Object.defineProperty(e,i,s),s};const _e={zIndex:rt.create("--ft-dialog-z-index","NUMBER","2"),overlayBackgroundColor:rt.create("--ft-dialog-overlay-background-color","COLOR","rgba(0, 0, 0, 0.3)"),height:rt.create("--ft-dialog-height","SIZE","unset"),width:rt.create("--ft-dialog-width","SIZE","unset"),padding:rt.create("--ft-dialog-padding","SIZE","24px"),colorSurface:rt.external(st.colorSurface,"Design system"),borderRadiusS:rt.external(st.borderRadiusS,"Design system"),elevation24:rt.external(st.elevation24,"Design system")};let Ae=class extends at{constructor(){super(...arguments),this.opened=!1,this.closeOnEsc=!1,this.closeOnClickOutside=!1,this.heading=""}getStyles(){return s`
+            .ft-dialog {
+                position: fixed;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+                z-index: ${_e.zIndex};
+
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+
+                margin: auto;
+            }
+
+            .ft-dialog_overlay {
+                position: fixed;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 0;
+
+                height: 100%;
+                width: 100%;
+
+                background-color: ${_e.overlayBackgroundColor};
+
+            }
+
+            .ft-dialog_wrapper {
+                position: fixed;
+                display: flex;
+                flex-direction: column;
+
+                width: ${_e.width};
+                height: ${_e.height};
+                max-width: 95vw;
+                max-height: 95vh;
+
+                padding: ${_e.padding};
+                background-color: ${_e.colorSurface};
+
+                border-radius: ${_e.borderRadiusS};
+                box-shadow: ${_e.elevation24};
+            }
+
+            .ft-dialog_content {
+                flex-grow: 2;
+                overflow: auto;
+            }
+
+            .ft-dialog_heading {
+                display: block;
+                margin-bottom: 12px;
+            }
+
+            .ft-dialog_buttons {
+                margin-top: 12px;
+            }
+
+            slot[name=buttons] {
+                display: flex;
+                align-items: center;
+                justify-content: flex-end;
+            }
+        `}getTemplate(){return this.opened?L`
+            <div class="ft-dialog">
+                <div class="ft-dialog_overlay" @click="${()=>this.watchClickOutside()}"></div>
+                <div class="ft-dialog_wrapper">
+                    ${this.heading?L`
+                        <ft-typography class="ft-dialog_heading" variant="title">${this.heading}</ft-typography>
+                    `:null}
+                    <div class="ft-dialog_content">
+                        <slot></slot>
+                    </div>
+                    <div class="ft-dialog_buttons">
+                        <slot name="buttons"></slot>
+                    </div>
+                </div>
+            </div>
+        `:null}updated(t){if(t.has("opened")){const t=new CustomEvent("opened-changed",{detail:{opened:this.opened}});this.dispatchEvent(t)}}connectedCallback(){super.connectedCallback(),document.addEventListener("keydown",this.watchEscapeKey.bind(this))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.watchEscapeKey.bind(this))}close(){this.opened=!1}open(){this.opened=!0}watchEscapeKey(t){"Escape"===t.key&&this.closeOnEsc&&this.close()}watchClickOutside(){this.closeOnClickOutside&&this.close()}};Ae.elementDefinitions={"ft-typography":Le},Te([it({type:Boolean,hasChanged:(t,e)=>!1===e&&!0===t||!0===e&&!1===t})],Ae.prototype,"opened",void 0),Te([it({type:Boolean})],Ae.prototype,"closeOnEsc",void 0),Te([it({type:Boolean})],Ae.prototype,"closeOnClickOutside",void 0),Te([it({type:String})],Ae.prototype,"heading",void 0),Ae=Te([nt("ft-dialog")],Ae);var ze=Ae;t.FtDialogCssVariables=_e,t.default=ze,Object.defineProperty(t,"t",{value:!0})}({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-dialog",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "A simple dialog component",
   "keywords": [
     "Lit"
@@ -19,8 +19,8 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-wc-utils": "^0.1.6",
+    "@fluid-topics/ft-wc-utils": "^0.1.7",
     "lit": "^2.0.2"
   },
-  "gitHead": "c441937eb1375dc40ff477dec50b917f2adf3b38"
+  "gitHead": "78397cca67971191c46739cfb6c87481aaa65745"
 }