@social-mail/social-mail-client 1.2.18 → 1.2.19

package/dist/web/AppIndex.pack.min.js

@@ -2395,34 +2395,61 @@ and limitations under the License.
         margin-left: 20px;
     }
 
-`.installGlobal("[data-html-editor-element=toolbar]")}}}));AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/toolbars/EditorToolbar");System.register(["@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/core/XNode","./EditorToolbar","../commands/EditorCommand"],(function(_export,_context){"use strict";var Bind,XNode,EditorToolbar,EditorCommand;function UndoRedoToolbar(){return XNode.create(EditorToolbar,{"data-element":"undo"},XNode.create("i",{"event-click":EditorCommand.onClick((editor=>{editor.redoList.insert(editor.redoList.length,editor.htmlDocument.documentElement.innerHTML);editor.htmlDocument.documentElement.innerHTML=editor.undoList.removeAt(editor.undoList.length-1)})),title:"Undo","data-disabled":Bind.oneWay((editor=>editor.undoList.length===0)),class:"fas fa-undo"}),XNode.create("i",{"event-click":EditorCommand.onClick((editor=>{editor.undoList.insert(editor.undoList.length,editor.htmlDocument.documentElement.innerHTML);editor.htmlDocument.documentElement.innerHTML=editor.redoList.removeAt(editor.redoList.length-1)})),title:"Redo","data-disabled":Bind.oneWay((editor=>editor.redoList.length===0)),class:"fas fa-redo"}))}_export("default",UndoRedoToolbar);return{setters:[function(_webAtomsCoreDistCoreBind){Bind=_webAtomsCoreDistCoreBind.default},function(_webAtomsCoreDistCoreXNode){XNode=_webAtomsCoreDistCoreXNode.default},function(_EditorToolbar){EditorToolbar=_EditorToolbar.default},function(_commandsEditorCommand){EditorCommand=_commandsEditorCommand.EditorCommand}],execute:function(){}}}));AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/toolbars/UndoRedoToolbar");System.register(["@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/web/controls/AtomControl","@web-atoms/core/dist/style/styled"],(function(_export,_context){"use strict";var XNode,AtomControl,styled;function Block({className,title,text,rotate,src,factory}){return()=>{const onClick=e=>{const editor=AtomControl.from(e.target);const element=editor.buildXNode(factory());editor.insertElement(element)};const onDragStart=e=>{const editor=AtomControl.from(e.target);const ne=editor.buildXNode(factory());e.dataTransfer.setDragImage(ne,0,0);e.dataTransfer.setData("text/html",ne.outerHTML)};if(src){return XNode.create("img",{"data-html-editor-element":"block",class:className,title,src,draggable:true,text,"event-click":onClick,"event-dragstart":onDragStart})}return XNode.create("i",{"data-html-editor-element":"block",class:className,title,draggable:true,text,"style-rotate":rotate?"90deg":void 0,"event-click":onClick,"event-dragstart":onDragStart})}}_export("Block",Block);return{setters:[function(_webAtomsCoreDistCoreXNode){XNode=_webAtomsCoreDistCoreXNode.default},function(_webAtomsCoreDistWebControlsAtomControl){AtomControl=_webAtomsCoreDistWebControlsAtomControl.AtomControl},function(_webAtomsCoreDistStyleStyled){styled=_webAtomsCoreDistStyleStyled.default}],execute:function(){styled.css`
+`.installGlobal("[data-html-editor-element=toolbar]")}}}));AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/toolbars/EditorToolbar");System.register(["@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/core/XNode","./EditorToolbar"],(function(_export,_context){"use strict";var Bind,XNode,EditorToolbar;function UndoRedoToolbar(){return XNode.create(EditorToolbar,{"data-element":"undo"},XNode.create("i",{"data-click-event":"undo",title:"Undo","data-disabled":Bind.oneWay((editor=>editor.undoList.length===0)),class:"fas fa-undo"}),XNode.create("i",{"data-click-event":"redo",title:"Redo","data-disabled":Bind.oneWay((editor=>editor.redoList.length===0)),class:"fas fa-redo"}))}_export("default",UndoRedoToolbar);return{setters:[function(_webAtomsCoreDistCoreBind){Bind=_webAtomsCoreDistCoreBind.default},function(_webAtomsCoreDistCoreXNode){XNode=_webAtomsCoreDistCoreXNode.default},function(_EditorToolbar){EditorToolbar=_EditorToolbar.default}],execute:function(){}}}));AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/toolbars/UndoRedoToolbar");System.register(["@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/web/controls/AtomControl","@web-atoms/core/dist/style/styled"],(function(_export,_context){"use strict";var XNode,AtomControl,styled;function Block({className,title,text,rotate,src,factory}){return()=>{const onClick=e=>{const editor=AtomControl.from(e.target);const element=editor.buildXNode(factory());editor.insertElement(element)};const onDragStart=e=>{const editor=AtomControl.from(e.target);const ne=editor.buildXNode(factory());e.dataTransfer.setDragImage(ne,0,0);e.dataTransfer.setData("text/html",ne.outerHTML)};if(src){return XNode.create("img",{"data-html-editor-element":"block",class:className,title,src,draggable:true,text,"event-click":onClick,"event-dragstart":onDragStart})}return XNode.create("i",{"data-html-editor-element":"block",class:className,title,draggable:true,text,"style-rotate":rotate?"90deg":void 0,"event-click":onClick,"event-dragstart":onDragStart})}}_export("Block",Block);return{setters:[function(_webAtomsCoreDistCoreXNode){XNode=_webAtomsCoreDistCoreXNode.default},function(_webAtomsCoreDistWebControlsAtomControl){AtomControl=_webAtomsCoreDistWebControlsAtomControl.AtomControl},function(_webAtomsCoreDistStyleStyled){styled=_webAtomsCoreDistStyleStyled.default}],execute:function(){styled.css`
         padding: 5px;
         cursor: pointer;
         &:hover {
             background-color: #00800080;
         }
-    `.installGlobal("[data-html-editor-element=block]")}}}));AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/Block");System.register(["@web-atoms/core/dist/core/XNode","./Block"],(function(_export,_context){"use strict";var XNode,Block,WrapGrid;return{setters:[function(_webAtomsCoreDistCoreXNode){XNode=_webAtomsCoreDistCoreXNode.default},function(_Block){Block=_Block.Block}],execute:function(){_export("WrapGrid",WrapGrid=Block({className:"fa-duotone fa-grid-horizontal fa-rotate-90",title:"Wrap Grid",factory:()=>XNode.create("div",{"styler-layout":"wrap-list"})}))}}}));AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/WrapGrid");System.register(["tslib","@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/web/controls/AtomControl","@web-atoms/web-controls/dist/basic/Expander","@web-atoms/web-controls/dist/basic/Select","@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/style/styled"],(function(_export,_context){"use strict";var __rest,XNode,AtomControl,Expander,Select,Bind,styled,BindEditor,BindStyleValue,BindStyleCustom;function PropertyEditor(_a,...nodes){var _b;var{label=void 0,custom=void 0}=_a,a=__rest(_a,["label","custom"]);if(!label&&nodes.length===1){return nodes[0]}for(const iterator of nodes){((_b=iterator.attributes)!==null&&_b!==void 0?_b:iterator.attributes={})["data-element"]="editor"}return XNode.create("div",Object.assign({"data-element":"property-editor"},a),label&&XNode.create("label",{"data-font-size":"small"},label),...nodes,custom)}function ExpanderPropertyEditor(_a,...nodes){var{isExpanded=false,label}=_a,a=__rest(_a,["isExpanded","label"]);const child=nodes.length>1?XNode.create("div",{"data-layout":"vertical-flex-stretch-items"},...nodes):nodes[0];return XNode.create(Expander,Object.assign({isExpanded},a),label&&XNode.create("label",null,label),child)}function DropDownProperty(_a){var{label,property}=_a,a=__rest(_a,["label","property"]);return XNode.create(PropertyEditor,Object.assign({label,custom:XNode.create("input",Object.assign({type:"text","data-element":"custom"},BindStyleCustom(property.key)))},a),XNode.create(Select,Object.assign({},BindStyleValue(property.key),{"data-flex":"stretch-full",valuePath:v=>v.value,items:[{label:"-",value:""},...property.values.map((pair=>pair.toPair()))]})))}function NumberProperty(_a){var{label,property}=_a,a=__rest(_a,["label","property"]);return XNode.create(PropertyEditor,Object.assign({label},a),XNode.create("input",Object.assign({},BindStyleValue(property.key),{"data-flex":"stretch-full",type:"tel"})))}_export({ExpanderPropertyEditor,DropDownProperty,NumberProperty});return{setters:[function(_tslib){__rest=_tslib.__rest},function(_webAtomsCoreDistCoreXNode){XNode=_webAtomsCoreDistCoreXNode.default},function(_webAtomsCoreDistWebControlsAtomControl){AtomControl=_webAtomsCoreDistWebControlsAtomControl.AtomControl},function(_webAtomsWebControlsDistBasicExpander){Expander=_webAtomsWebControlsDistBasicExpander.default},function(_webAtomsWebControlsDistBasicSelect){Select=_webAtomsWebControlsDistBasicSelect.default},function(_webAtomsCoreDistCoreBind){Bind=_webAtomsCoreDistCoreBind.default},function(_webAtomsCoreDistStyleStyled){styled=_webAtomsCoreDistStyleStyled.default}],execute:function(){_export("BindEditor",BindEditor=Bind.forControl());_export("BindStyleValue",BindStyleValue=AtomControl.registerProperty("data-style-property","value",((c,e,v)=>{const editor=c;const pv=editor.selection.style(v);c.render(XNode.create("div",{value:Bind.sourceTwoWays(pv,(s=>s.source.value))}),e,c)})));_export("BindStyleCustom",BindStyleCustom=AtomControl.registerProperty("data-style-property","value",((c,e,v)=>{const editor=c;const pv=editor.selection.style(v);c.render(XNode.create("div",{"style-display":Bind.source(pv,(s=>s.source.value==="custom")),value:Bind.sourceTwoWays(pv,(s=>s.source.custom))}),e,c)})));styled.css`
+    `.installGlobal("[data-html-editor-element=block]")}}}));AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/Block");System.register(["@web-atoms/core/dist/core/XNode","./Block"],(function(_export,_context){"use strict";var XNode,Block,WrapGrid;return{setters:[function(_webAtomsCoreDistCoreXNode){XNode=_webAtomsCoreDistCoreXNode.default},function(_Block){Block=_Block.Block}],execute:function(){_export("WrapGrid",WrapGrid=Block({className:"fa-duotone fa-grid-horizontal fa-rotate-90",title:"Wrap Grid",factory:()=>XNode.create("div",{"styler-layout":"wrap-list"})}))}}}));AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/blocks/WrapGrid");System.register(["tslib","@web-atoms/core/dist/core/XNode","@web-atoms/core/dist/web/controls/AtomControl","@web-atoms/web-controls/dist/basic/Expander","@web-atoms/web-controls/dist/basic/Select","@web-atoms/core/dist/core/Bind","@web-atoms/core/dist/style/styled"],(function(_export,_context){"use strict";var __rest,XNode,AtomControl,Expander,Select,Bind,styled,BindEditor,BindStyleValue,BindStyleCustom;function PropertyEditor(_a,...nodes){var _b;var{label=void 0,custom=void 0}=_a,a=__rest(_a,["label","custom"]);if(!label&&nodes.length===1){return nodes[0]}for(const iterator of nodes){((_b=iterator.attributes)!==null&&_b!==void 0?_b:iterator.attributes={})["data-element"]="editor"}return XNode.create("div",Object.assign({"data-element":"property-editor"},a),label&&XNode.create("label",{"data-font-size":"small"},label),...nodes,custom)}function ExpanderPropertyEditor(_a,...nodes){var{isExpanded=false,label}=_a,a=__rest(_a,["isExpanded","label"]);const child=nodes.length>1?XNode.create("div",{"data-layout":"vertical-flex-stretch-items"},...nodes):nodes[0];return XNode.create(Expander,Object.assign({"data-element":"expander-property-editor",isExpanded},a),label&&XNode.create("label",null,label),child)}function DropDownProperty(_a){var{label,property}=_a,a=__rest(_a,["label","property"]);return XNode.create(PropertyEditor,Object.assign({label,custom:XNode.create("input",Object.assign({type:"text","data-element":"custom"},BindStyleCustom(property.key)))},a),XNode.create(Select,Object.assign({},BindStyleValue(property.key),{"data-flex":"stretch-full",valuePath:v=>v.value,items:[{label:"-",value:""},...property.values.map((pair=>pair.toPair()))]})))}function NumberProperty(_a){var{label,property}=_a,a=__rest(_a,["label","property"]);return XNode.create(PropertyEditor,Object.assign({label},a),XNode.create("input",Object.assign({},BindStyleValue(property.key),{"data-flex":"stretch-full",type:"tel"})))}_export({ExpanderPropertyEditor,DropDownProperty,NumberProperty});return{setters:[function(_tslib){__rest=_tslib.__rest},function(_webAtomsCoreDistCoreXNode){XNode=_webAtomsCoreDistCoreXNode.default},function(_webAtomsCoreDistWebControlsAtomControl){AtomControl=_webAtomsCoreDistWebControlsAtomControl.AtomControl},function(_webAtomsWebControlsDistBasicExpander){Expander=_webAtomsWebControlsDistBasicExpander.default},function(_webAtomsWebControlsDistBasicSelect){Select=_webAtomsWebControlsDistBasicSelect.default},function(_webAtomsCoreDistCoreBind){Bind=_webAtomsCoreDistCoreBind.default},function(_webAtomsCoreDistStyleStyled){styled=_webAtomsCoreDistStyleStyled.default}],execute:function(){_export("BindEditor",BindEditor=Bind.forControl());_export("BindStyleValue",BindStyleValue=AtomControl.registerProperty("data-style-property","value",((c,e,v)=>{const editor=c;const pv=editor.selection.style(v);c.render(XNode.create("div",{value:Bind.sourceTwoWays(pv,(s=>s.source.value))}),e,c)})));_export("BindStyleCustom",BindStyleCustom=AtomControl.registerProperty("data-style-property","value",((c,e,v)=>{const editor=c;const pv=editor.selection.style(v);c.render(XNode.create("div",{"style-display":Bind.source(pv,(s=>s.source.value==="custom")),value:Bind.sourceTwoWays(pv,(s=>s.source.custom))}),e,c)})));styled.css`
 
     display: grid;
-    grid-template-columns: auto 1fr;
-    grid-template-rows: auto auto;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    justify-items: stretch;
+    align-items: center;
     column-gap: 5px;
+    max-width: 200px;
+    & > * {
+        width: 100%;
+    }
     & > label {
         grid-row: 1;
         grid-column: 1;
     }
 
     & > [data-element=editor] {
-        grid-row: 1;
-        grid-column: 2;
+        grid-row: 2;
+        grid-column: 1;
     }
 
     & > [data-element=custom] {
-        grid-row: 2;
-        grid-column: 1 / span 2;
+        grid-row: 3;
+        grid-column: 1;
     }
 
-    `.installGlobal("[data-element=property-editor]")}}}));AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/properties/controls/PropertyEditor");System.register(["@web-atoms/core/dist/style/styled","@web-atoms/core/dist/core/AtomBinder"],(function(_export,_context){"use strict";var styled,AtomBinder,StylerVariable,StylerPropertyOption,StylerProperty,camelToSnakeCase,prepareVariables,stylerVars,sizeVarList,colorVarList,pair,createSet,createVarSet;_export({StylerVariable:void 0,StylerPropertyOption:void 0,StylerProperty:void 0});return{setters:[function(_webAtomsCoreDistStyleStyled){styled=_webAtomsCoreDistStyleStyled.default},function(_webAtomsCoreDistCoreAtomBinder){AtomBinder=_webAtomsCoreDistCoreAtomBinder.AtomBinder}],execute:function(){camelToSnakeCase=str=>str.replace(/[A-Z]/g,(letter=>`-${letter.toLowerCase()}`));prepareVariables=a=>{const r={};for(const key in a){if(Object.prototype.hasOwnProperty.call(a,key)){const value=a[key];const name=camelToSnakeCase(key);r[key]={name,value,toString(){return`var(--${name}, ${value})`}}}}return r};_export("stylerVars",stylerVars=prepareVariables({sizeTiny:"2px",sizeSmall:"5px",sizeSmaller:"7px",sizeDefault:"10px",sizeLarger:"15px",sizeLarge:"20px",relSizeXS:"20rem",relSizeSmall:"24rem",relSizeMedium:"28rem",relSizeLarge:"32rem",relSizeXL:"36rem",relSize2XL:"42rem",relSize3XL:"48rem",relSize4XL:"56rem",relSize5XL:"64rem",relSize6XL:"72rem",relSize7XL:"80rem",relSizeFull:"100%",relSizeProse:"65ch",defaultColor:"canvas",defaultTextColor:"canvastext",borderColor:"lightgray",headerColor:"#0571ff30",headerTextColor:"",accentColor:"blue",accentTextColor:"white",noteColor:"#ffffe0",noteTextColor:"",warningColor:"#FFC107",warningTextColor:"darkgray",selectionColor:"highlight",selectionTextColor:"highlightText",hoverColor:"#A0A0A010",hoverTextColor:"CanvasText",stopColor:"red",stopTextColor:"white",goColor:"green",goTextColor:"white",acceptColor:"blue",acceptTextColor:"white",rejectColor:"red",rejectTextColor:"white",fontSizeSmall:"0.8125em",commandBgColor:"#F0F0F0",menuBgColor:"#808080",menuColor:"#F0F0F0",linkColor:"blue",primaryBackground:"#b372dd50",primaryColor:"gray",primaryAccent:"#6145a9c9",primaryAccentText:"white",primarySurface:"#FFFFFFA0",primarySurfaceText:"gray",secondaryBackground:"#00808050",secondaryColor:"gray",secondaryAccent:"blue",secondaryAccentText:"white",secondarySurface:"#00A0A080",secondarySurfaceText:"gray",tertiaryBackground:"#7b4fc596",tertiaryColor:"gray",tertiaryAccent:"blue",tertiaryAccentText:"white",tertiarySurface:"#0000A080",tertiarySurfaceText:"gray"}));_export("sizeVarList",sizeVarList=[stylerVars.sizeTiny,stylerVars.sizeSmall,stylerVars.sizeSmaller,stylerVars.sizeDefault,stylerVars.sizeLarger,stylerVars.sizeLarge,stylerVars.relSizeXS,stylerVars.relSizeSmall,stylerVars.relSizeMedium,stylerVars.relSizeLarge,stylerVars.relSizeXL,stylerVars.relSize2XL,stylerVars.relSize3XL,stylerVars.relSize4XL,stylerVars.relSize5XL,stylerVars.relSize6XL,stylerVars.relSize7XL,stylerVars.relSizeFull,stylerVars.relSizeProse]);_export("colorVarList",colorVarList=[stylerVars.defaultColor,stylerVars.defaultTextColor,stylerVars.accentColor,stylerVars.accentTextColor,stylerVars.acceptColor,stylerVars.accentTextColor,stylerVars.borderColor,stylerVars.goColor,stylerVars.goTextColor,stylerVars.headerColor,stylerVars.headerTextColor,stylerVars.hoverColor,stylerVars.hoverTextColor,stylerVars.linkColor,stylerVars.noteColor,stylerVars.noteTextColor,stylerVars.rejectColor,stylerVars.rejectTextColor,stylerVars.selectionColor,stylerVars.selectionTextColor,stylerVars.stopColor,stylerVars.stopTextColor,stylerVars.warningColor,stylerVars.warningTextColor]);_export("StylerVariable",StylerVariable=class StylerVariable{get currentValue(){if(this._currentValue){return this._currentValue}const{document}=this;if(document){return document.defaultView.getComputedStyle(document.body).getPropertyValue(this.propertyName)}return""}set currentValue(v){const{onChange}=this;this._currentValue=v;onChange===null||onChange===void 0?void 0:onChange(this.propertyName,v);AtomBinder.refreshValue(this,"currentValue")}constructor(name,value,document,onChange,propertyName=`--${name}`){this.name=name;this.value=value;this.document=document;this.onChange=onChange;this.propertyName=propertyName}toString(){return`--${this.name}: ${this.value};`}});_export("StylerPropertyOption",StylerPropertyOption=class StylerPropertyOption{constructor(name,value,description){this.name=name;this.description=description;this.value=value.toString()}toString(){return this.value.split("\n").join("\n\t")}toPair(){const description=this.description;const label=description?`${this.name} (${description})`:this.name;const value=this.name;return{label,value}}});_export("StylerProperty",StylerProperty=class StylerProperty{static create(key,styles){return new StylerProperty(key,styles)}constructor(key,values){this.key=key;this.values=[];for(const k in values){if(Object.prototype.hasOwnProperty.call(values,k)){const element=values[k];this.values.push(new StylerPropertyOption(k,element.expand(`[${this.key}=${k}]`),element.description))}}}toString(){return this.values.join("\n")}});_export("pair",pair=(name,value)=>(!value?(value=name,name=name.replace(" ","-")):name,{name,value}));_export("createSet",createSet=(name,values,appendGlobals=false,addCustom=false)=>{const r={};if(addCustom){r.custom=styled.css`${name}: var(--styler-${name});`}if(appendGlobals){values.push(...["inherit","initial","revert","revert-layer","unset"])}for(const iterator of values){if(typeof iterator==="string"){r[iterator]=styled.css`\t${name}: ${iterator};`;continue}r[iterator.name]=styled.css`\t${name}: ${iterator.value};`}return r});_export("createVarSet",createVarSet=(name,values,addCustom=true)=>{const r={};if(addCustom){r.custom=styled.css`${name}: var(--styler-${name});`}for(const iterator of values){r[iterator.name]=styled.css`\t${name}: var(--${iterator.name});`.withDescription(iterator.value)}return r})}}}));AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/Styler");System.register(["@web-atoms/core/dist/style/styled","../Styler"],(function(_export,_context){"use strict";var styled,StylerProperty,colorVarList,createVarSet,sizeVarList,stylerBorder;return{setters:[function(_webAtomsCoreDistStyleStyled){styled=_webAtomsCoreDistStyleStyled.default},function(_Styler){StylerProperty=_Styler.StylerProperty;colorVarList=_Styler.colorVarList;createVarSet=_Styler.createVarSet;sizeVarList=_Styler.sizeVarList}],execute:function(){_export("stylerBorder",stylerBorder={stylerBorder:new StylerProperty("styler-border",{none:styled.css`
+    & select {
+        outline: none;
+        border: none;
+        background-color: #e7e7e775;
+        border-radius: 9999px;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
+    `.installGlobal("[data-element=property-editor]");styled.css`
+    
+        & select {
+            outline: none;
+            border: none;
+            background-color: #e7e7e775;
+            border-radius: 9999px;
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+
+
+    `.installGlobal("[data-element=expander-property-editor]")}}}));AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/properties/controls/PropertyEditor");System.register(["@web-atoms/core/dist/style/styled","@web-atoms/core/dist/core/AtomBinder"],(function(_export,_context){"use strict";var styled,AtomBinder,StylerVariable,StylerPropertyOption,StylerProperty,camelToSnakeCase,prepareVariables,stylerVars,sizeVarList,colorVarList,pair,createSet,createVarSet;_export({StylerVariable:void 0,StylerPropertyOption:void 0,StylerProperty:void 0});return{setters:[function(_webAtomsCoreDistStyleStyled){styled=_webAtomsCoreDistStyleStyled.default},function(_webAtomsCoreDistCoreAtomBinder){AtomBinder=_webAtomsCoreDistCoreAtomBinder.AtomBinder}],execute:function(){camelToSnakeCase=str=>str.replace(/[A-Z]/g,(letter=>`-${letter.toLowerCase()}`));prepareVariables=a=>{const r={};for(const key in a){if(Object.prototype.hasOwnProperty.call(a,key)){const value=a[key];const name=camelToSnakeCase(key);r[key]={name,value,toString(){return`var(--${name}, ${value})`}}}}return r};_export("stylerVars",stylerVars=prepareVariables({sizeTiny:"2px",sizeSmall:"5px",sizeSmaller:"7px",sizeDefault:"10px",sizeLarger:"15px",sizeLarge:"20px",relSizeXS:"20rem",relSizeSmall:"24rem",relSizeMedium:"28rem",relSizeLarge:"32rem",relSizeXL:"36rem",relSize2XL:"42rem",relSize3XL:"48rem",relSize4XL:"56rem",relSize5XL:"64rem",relSize6XL:"72rem",relSize7XL:"80rem",relSizeFull:"100%",relSizeProse:"65ch",defaultColor:"canvas",defaultTextColor:"canvastext",borderColor:"lightgray",headerColor:"#0571ff30",headerTextColor:"",accentColor:"blue",accentTextColor:"white",noteColor:"#ffffe0",noteTextColor:"",warningColor:"#FFC107",warningTextColor:"darkgray",selectionColor:"highlight",selectionTextColor:"highlightText",hoverColor:"#A0A0A010",hoverTextColor:"CanvasText",stopColor:"red",stopTextColor:"white",goColor:"green",goTextColor:"white",acceptColor:"blue",acceptTextColor:"white",rejectColor:"red",rejectTextColor:"white",fontSizeSmall:"0.8125em",commandBgColor:"#F0F0F0",menuBgColor:"#808080",menuColor:"#F0F0F0",linkColor:"blue",primaryBackground:"#b372dd50",primaryColor:"gray",primaryAccent:"#6145a9c9",primaryAccentText:"white",primarySurface:"#FFFFFFA0",primarySurfaceText:"gray",secondaryBackground:"#00808050",secondaryColor:"gray",secondaryAccent:"#318984a8",secondaryAccentText:"white",secondarySurface:"#FFFFFFA0",secondarySurfaceText:"gray",tertiaryBackground:"#cfa55c87",tertiaryColor:"gray",tertiaryAccent:"#e17b42cf",tertiaryAccentText:"white",tertiarySurface:"#FFFFFFA0",tertiarySurfaceText:"gray"}));_export("sizeVarList",sizeVarList=[stylerVars.sizeTiny,stylerVars.sizeSmall,stylerVars.sizeSmaller,stylerVars.sizeDefault,stylerVars.sizeLarger,stylerVars.sizeLarge,stylerVars.relSizeXS,stylerVars.relSizeSmall,stylerVars.relSizeMedium,stylerVars.relSizeLarge,stylerVars.relSizeXL,stylerVars.relSize2XL,stylerVars.relSize3XL,stylerVars.relSize4XL,stylerVars.relSize5XL,stylerVars.relSize6XL,stylerVars.relSize7XL,stylerVars.relSizeFull,stylerVars.relSizeProse]);_export("colorVarList",colorVarList=[stylerVars.defaultColor,stylerVars.defaultTextColor,stylerVars.accentColor,stylerVars.accentTextColor,stylerVars.acceptColor,stylerVars.accentTextColor,stylerVars.borderColor,stylerVars.goColor,stylerVars.goTextColor,stylerVars.headerColor,stylerVars.headerTextColor,stylerVars.hoverColor,stylerVars.hoverTextColor,stylerVars.linkColor,stylerVars.noteColor,stylerVars.noteTextColor,stylerVars.rejectColor,stylerVars.rejectTextColor,stylerVars.selectionColor,stylerVars.selectionTextColor,stylerVars.stopColor,stylerVars.stopTextColor,stylerVars.warningColor,stylerVars.warningTextColor]);_export("StylerVariable",StylerVariable=class StylerVariable{get currentValue(){if(this._currentValue){return this._currentValue}const{document}=this;if(document){return document.defaultView.getComputedStyle(document.body).getPropertyValue(this.propertyName)}return""}set currentValue(v){const{onChange}=this;this._currentValue=v;onChange===null||onChange===void 0?void 0:onChange(this.propertyName,v);AtomBinder.refreshValue(this,"currentValue")}constructor(name,value,document,onChange,propertyName=`--${name}`){this.name=name;this.value=value;this.document=document;this.onChange=onChange;this.propertyName=propertyName}toString(){return`--${this.name}: ${this.value};`}});_export("StylerPropertyOption",StylerPropertyOption=class StylerPropertyOption{constructor(name,value,description){this.name=name;this.description=description;this.value=value.toString()}toString(){return this.value.split("\n").join("\n\t")}toPair(){const description=this.description;const label=description?`${this.name} (${description})`:this.name;const value=this.name;return{label,value}}});_export("StylerProperty",StylerProperty=class StylerProperty{static create(key,styles){return new StylerProperty(key,styles)}constructor(key,values){this.key=key;this.values=[];for(const k in values){if(Object.prototype.hasOwnProperty.call(values,k)){const element=values[k];this.values.push(new StylerPropertyOption(k,element.expand(`[${this.key}=${k}]`),element.description))}}}toString(){return this.values.join("\n")}});_export("pair",pair=(name,value)=>(!value?(value=name,name=name.replace(" ","-")):name,{name,value}));_export("createSet",createSet=(name,values,appendGlobals=false,addCustom=false)=>{const r={};if(addCustom){r.custom=styled.css`${name}: var(--styler-${name});`}if(appendGlobals){values.push(...["inherit","initial","revert","revert-layer","unset"])}for(const iterator of values){if(typeof iterator==="string"){r[iterator]=styled.css`\t${name}: ${iterator};`;continue}r[iterator.name]=styled.css`\t${name}: ${iterator.value};`}return r});_export("createVarSet",createVarSet=(name,values,addCustom=true)=>{const r={};if(addCustom){r.custom=styled.css`${name}: var(--styler-${name});`}for(const iterator of values){r[iterator.name]=styled.css`\t${name}: var(--${iterator.name});`.withDescription(iterator.value)}return r})}}}));AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/styler/Styler");System.register(["@web-atoms/core/dist/style/styled","../Styler"],(function(_export,_context){"use strict";var styled,StylerProperty,colorVarList,createVarSet,sizeVarList,stylerBorder;return{setters:[function(_webAtomsCoreDistStyleStyled){styled=_webAtomsCoreDistStyleStyled.default},function(_Styler){StylerProperty=_Styler.StylerProperty;colorVarList=_Styler.colorVarList;createVarSet=_Styler.createVarSet;sizeVarList=_Styler.sizeVarList}],execute:function(){_export("stylerBorder",stylerBorder={stylerBorder:new StylerProperty("styler-border",{none:styled.css`
                 border: none !important;
             `,lightgray:styled.css`
                 border: solid 1px lightgray;
@@ -3041,6 +3068,7 @@ and limitations under the License.
             grid-column: 3;
             border-left: solid 1px lightgray;
             border-radius: 0;
+            overflow: auto;
         }
 
         & > [data-element=editor] {
@@ -3122,7 +3150,7 @@ and limitations under the License.
                 z-index: 50;
             }
         }
-    `.installGlobal("[data-html-page-editor=html-page-editor]");desktopWidth=992;tabletWidth=768;mobileWidth=480;_export("default",HtmlPageEditor=class HtmlPageEditor extends AtomControl{get htmlPage(){var _a,_b;return(_b=(_a=this.htmlDocument)===null||_a===void 0?void 0:_a.documentElement)===null||_b===void 0?void 0:_b.outerHTML}set htmlPage(v){if(!this.element){return}if(!this.ready){setTimeout((()=>{this.htmlPage=v}),100);return}void this.ready.then((()=>{if(!this.htmlDocument){return}this.htmlDocument.open();this.htmlDocument.write(v);this.htmlDocument.addEventListener("click",(e=>{const target=e.target;const previous=this.selection.element;if(previous===null||previous===void 0?void 0:previous.isContentEditable){let start=target;while(start){if(previous===target){return}start=start.parentElement}previous.removeAttribute("contentEditable");this.commit()}e.preventDefault();this.setSelection(target)}));this.htmlDocument.addEventListener("dblclick",(e=>{const target=e.target;e.preventDefault();const element=target.nodeType===Node.ELEMENT_NODE?target:target.parentElement;element.setAttribute("contentEditable","true");this.setSelection(element);if(element.tagName==="IMG"){this.changeImage().catch(console.error)}}));this.htmlDocument.addEventListener("scroll",(e=>{this.hover.update();this.selection.update()}),{passive:true});this.htmlDocument.addEventListener("pointerover",(e=>{let target=e.target;target=target.nodeType===Node.ELEMENT_NODE&&target.tagName?target:target.parentElement;if(this.hover.element===target){return}this.hover.update(target)}),{capture:true});InstallDragDropHelper(this);this.htmlDocument.close();setTimeout((()=>{this.app.runAsync((()=>__awaiter(this,void 0,void 0,(function*(){yield this.setStylerSheet();this.loadVariables()}))))}),10)}))}constructor(app,e){super(app,e);this.selection=new SelectedElement(this);this.undoList=[];this.redoList=[];this.pageVariables=[];this.hover=new SelectedElement(this);this.dropTarget=new SelectedElement(this);this.maxWidth=desktopWidth;this.ready=this.init()}init(){return __awaiter(this,void 0,void 0,(function*(){this.render(XNode.create("div",{"data-html-page-editor":"html-page-editor"},XNode.create("div",{"data-element":"top"},XNode.create(EditorToolbar,{"data-element":"max-width","event-click":()=>this.deferUpdate()},XNode.create("i",{"data-selected":Bind.oneWay((()=>this.maxWidth===desktopWidth)),"event-click":()=>this.maxWidth=desktopWidth,class:"fas fa-desktop"}),XNode.create("i",{"data-selected":Bind.oneWay((()=>this.maxWidth===tabletWidth)),"event-click":()=>this.maxWidth=tabletWidth,class:"fas fa-tablet-screen"}),XNode.create("i",{"data-selected":Bind.oneWay((()=>this.maxWidth===mobileWidth)),"event-click":()=>this.maxWidth=mobileWidth,class:"fas fa-mobile-screen"})),XNode.create(UndoRedoToolbar,null),XNode.create(EditorToolbar,null,XNode.create(CodeCommand,null))),XNode.create(EditorToolbar,{"data-element":"left"},XNode.create(TextBox,null),XNode.create(Image,null),XNode.create(WrapGrid,null),XNode.create(VerticalImageBox,null),XNode.create(ImageBox,null),XNode.create(RightImageBox,null),XNode.create(Card,null),XNode.create(ImageCard,null),XNode.create(RowBox,null),XNode.create(ColumnBox,null),XNode.create(Columns2,null),XNode.create(Columns3,null),XNode.create(List,null)),XNode.create("div",{"data-element":"editor","style-max-width":Bind.oneWay((()=>this.maxWidth>768?"":this.maxWidth+"px"))},XNode.create("div",{"data-element":"resizer"}),XNode.create("div",{"data-element":"drop-target","style-display":Bind.oneWay((()=>this.dropTarget.element?"":"none")),"style-position":"absolute","style-left":Bind.oneWay((()=>this.dropTarget.left)),"style-top":Bind.oneWay((()=>this.dropTarget.top)),"style-width":Bind.oneWay((()=>this.dropTarget.width)),"style-height":Bind.oneWay((()=>this.dropTarget.height))}),XNode.create("div",{"data-element":"selection","style-left":Bind.oneWay((()=>this.selection.left)),"style-top":Bind.oneWay((()=>this.selection.top)),"style-width":Bind.oneWay((()=>this.selection.width)),"style-height":Bind.oneWay((()=>this.selection.height))},XNode.create("div",null,XNode.create("i",{class:"fa-regular fa-arrow-up","event-click":()=>{if(this.selection.element.parentElement!==this.htmlDocument.body){this.selection.update(this.selection.element.parentElement)}}}),XNode.create("i",{"event-click":()=>{this.selection.element.draggable=true},class:"fa-solid fa-up-down-left-right","data-click-event":"start-drag"}),XNode.create("i",{"style-display":Bind.oneWay((()=>this.selection.isImage)),"data-click-event":"change-image",title:"Change Image (Double Click)",class:"fa-solid fa-arrows-rotate-reverse"}),XNode.create("i",{title:"Duplicate","data-click-event":"copy-element",class:"fas fa-copy"}),XNode.create("i",{title:"Delete","data-click-event":"delete-element",class:"fas fa-trash-can"}))),XNode.create("div",{"data-element":"hover","style-left":Bind.oneWay((()=>this.hover.left)),"style-top":Bind.oneWay((()=>this.hover.top)),"style-width":Bind.oneWay((()=>this.hover.width)),"style-height":Bind.oneWay((()=>this.hover.height))},XNode.create("label",{text:Bind.oneWay((()=>this.hover.name))})),XNode.create("div",{"data-element":"content-frame"},XNode.create("iframe",{"data-element":"content-editor"}))),XNode.create("div",{"data-element":"right"},XNode.create(Properties,null))));this.contentEditor=this.element.querySelector(`[data-element="content-editor"]`);while(!this.htmlDocument){this.htmlDocument=this.contentEditor.contentDocument;yield sleep(100)}}))}buildXNode(node){const build=n=>{const e=this.htmlDocument.createElement(n.name);if(n.attributes){for(const key in n.attributes){if(Object.prototype.hasOwnProperty.call(n.attributes,key)){const element=n.attributes[key];e.setAttribute(key,element)}}}if(n.children){for(const iterator of n.children){e.appendChild(build(iterator))}}return e};return build(node)}deleteElement(){var _a;return __awaiter(this,void 0,void 0,(function*(){const current=this.selection.element;let previous=(_a=current.previousElementSibling)!==null&&_a!==void 0?_a:current.parentElement;current.remove();this.commit();if(!previous.textContent){previous=previous.previousElementSibling.lastElementChild}this.setSelection(previous);yield sleep(100);this.selection.update()}))}copyElement(){const current=this.selection.element;const copy=current.cloneNode(true);current.insertAdjacentElement("afterend",copy);this.commit()}changeImage(){return __awaiter(this,void 0,void 0,(function*(){return this.insertImage(prompt("Image Src",""))}))}insertImage(src,style){return __awaiter(this,void 0,void 0,(function*(){let img;if(this.selection.isImage){img=this.selection.element}else{img=this.htmlDocument.createElement("img");this.selection.element.appendChild(img)}img.src=src;img.onload=()=>{this.selection.update();img.onload=null};if(style){for(const key in style){if(Object.prototype.hasOwnProperty.call(style,key)){const element=style[key];img.style[key]=element}}}this.commit()}))}insertElement(e,parent=this.selection.element){parent.appendChild(e);if(!e.id){e.id="sm-"+Date.now().toString()}setTimeout((()=>{this.setSelection(e);this.commit()}),100)}deferUpdate(){var _a,_b;return __awaiter(this,void 0,void 0,(function*(){yield sleep(100);(_a=this.hover)===null||_a===void 0?void 0:_a.update();(_b=this.selection)===null||_b===void 0?void 0:_b.update()}))}setSelection(element,commit=true){var _a;const old=(_a=this.selection)===null||_a===void 0?void 0:_a.element;if(old){old.draggable=false}this.selection.update(element);if(commit){this.commit()}}commit(){this.redoList.clear();const lastHtml=this.lastHtml;const clone=this.htmlDocument.documentElement.cloneNode(true);const all=clone.querySelectorAll("*");for(let index=0;index<all.length;index++){const element=all[index];element.removeAttribute("draggable")}const currentHtml=clone.innerHTML;if(!lastHtml){this.lastHtml=currentHtml;return}if(lastHtml===currentHtml){return}this.undoList.add(this.lastHtml);this.lastHtml=currentHtml;this.element.dispatchEvent(new CustomEvent("htmlPageChanged",{detail:currentHtml,bubbles:true}));AtomBinder.refreshValue(this,"htmlPage");setTimeout((()=>{this.selection.update();this.hover.update()}),100)}setStylerSheet(){return __awaiter(this,void 0,void 0,(function*(){const document=this.htmlDocument;let style=document.querySelector(`[styler-style-sheet]`);if(!style){style=document.createElement("style");style.setAttribute("styler-style-sheet","inline");document.head.appendChild(style)}style.textContent=StylerSet.instance.toString()}))}loadVariables(){const onChange=()=>{const document=this.htmlDocument;let style=document.querySelector("[styler-style-variables]");if(!style){style=document.createElement("style");style.setAttribute("styler-style-variables","override");document.head.appendChild(style)}style.textContent=`:root {\n                ${this.pageVariables.map((x=>`${x.propertyName}: ${x.currentValue};`)).join("\n\t")}\n            }`};this.pageVariables=StylerSet.instance.vars.map((x=>new StylerVariable(x.name,x.value,this.htmlDocument,onChange)))}});__decorate([Action({onEvent:"delete-element"}),__metadata("design:type",Function),__metadata("design:paramtypes",[]),__metadata("design:returntype",Promise)],HtmlPageEditor.prototype,"deleteElement",null);__decorate([Action({onEvent:"copy-element",blockMultipleExecution:false}),__metadata("design:type",Function),__metadata("design:paramtypes",[]),__metadata("design:returntype",void 0)],HtmlPageEditor.prototype,"copyElement",null);__decorate([Action({onEvent:"change-image"}),__metadata("design:type",Function),__metadata("design:paramtypes",[]),__metadata("design:returntype",Promise)],HtmlPageEditor.prototype,"changeImage",null)}}}));AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/editor/HtmlPageEditor");System.register(["tslib","@web-atoms/core/dist/style/styled","@web-atoms/core/dist/web/controls/AtomControl"],(function(_export,_context){"use strict";var __asyncValues,__awaiter,styled,AtomControl,supportsFileSystemAccessAPI,supportsWebkitGetAsEntry,dragEnter,dragOver,dragLeave,eventDrop,FilesDragDrop;return{setters:[function(_tslib){__asyncValues=_tslib.__asyncValues;__awaiter=_tslib.__awaiter},function(_webAtomsCoreDistStyleStyled){styled=_webAtomsCoreDistStyleStyled.default},function(_webAtomsCoreDistWebControlsAtomControl){AtomControl=_webAtomsCoreDistWebControlsAtomControl.AtomControl}],execute:function(){supportsFileSystemAccessAPI="getAsFileSystemHandle"in DataTransferItem.prototype;supportsWebkitGetAsEntry="webkitGetAsEntry"in DataTransferItem.prototype;styled.css`
+    `.installGlobal("[data-html-page-editor=html-page-editor]");desktopWidth=992;tabletWidth=768;mobileWidth=480;_export("default",HtmlPageEditor=class HtmlPageEditor extends AtomControl{get htmlPage(){var _a,_b;return(_b=(_a=this.htmlDocument)===null||_a===void 0?void 0:_a.documentElement)===null||_b===void 0?void 0:_b.outerHTML}set htmlPage(v){if(!this.element){return}if(!this.ready){setTimeout((()=>{this.htmlPage=v}),100);return}void this.ready.then((()=>{if(!this.htmlDocument){return}this.htmlDocument.open();this.htmlDocument.write(v);this.htmlDocument.addEventListener("click",(e=>{const target=e.target;const previous=this.selection.element;if(previous===null||previous===void 0?void 0:previous.isContentEditable){let start=target;while(start){if(previous===target){return}start=start.parentElement}previous.removeAttribute("contentEditable");this.commit()}e.preventDefault();this.setSelection(target)}));this.htmlDocument.addEventListener("dblclick",(e=>{const target=e.target;e.preventDefault();const element=target.nodeType===Node.ELEMENT_NODE?target:target.parentElement;element.setAttribute("contentEditable","true");this.setSelection(element);if(element.tagName==="IMG"){this.changeImage().catch(console.error)}}));this.htmlDocument.addEventListener("scroll",(e=>{this.hover.update();this.selection.update()}),{passive:true});this.htmlDocument.addEventListener("pointerover",(e=>{let target=e.target;target=target.nodeType===Node.ELEMENT_NODE&&target.tagName?target:target.parentElement;if(this.hover.element===target){return}this.hover.update(target)}),{capture:true});this.htmlDocument.addEventListener("keydown",(e=>{if(e.ctrlKey||e.metaKey){switch(e.key){case"s":this.contentEditor.dispatchEvent(new CustomEvent("savePage",{bubbles:true}));e.preventDefault();break;case"z":this.contentEditor.dispatchEvent(new CustomEvent("undo",{bubbles:true}));e.preventDefault();break;case"y":this.contentEditor.dispatchEvent(new CustomEvent("redo",{bubbles:true}));e.preventDefault();break}}}));InstallDragDropHelper(this);this.htmlDocument.close();setTimeout((()=>{this.app.runAsync((()=>__awaiter(this,void 0,void 0,(function*(){yield this.setStylerSheet();this.loadVariables()}))))}),10)}))}constructor(app,e){super(app,e);this.selection=new SelectedElement(this);this.undoList=[];this.redoList=[];this.pageVariables=[];this.hover=new SelectedElement(this);this.dropTarget=new SelectedElement(this);this.maxWidth=desktopWidth;this.ready=this.init()}init(){return __awaiter(this,void 0,void 0,(function*(){this.render(XNode.create("div",{"data-html-page-editor":"html-page-editor"},XNode.create("div",{"data-element":"top"},XNode.create(EditorToolbar,{"data-element":"max-width","event-click":()=>this.deferUpdate()},XNode.create("i",{"data-selected":Bind.oneWay((()=>this.maxWidth===desktopWidth)),"event-click":()=>this.maxWidth=desktopWidth,class:"fas fa-desktop"}),XNode.create("i",{"data-selected":Bind.oneWay((()=>this.maxWidth===tabletWidth)),"event-click":()=>this.maxWidth=tabletWidth,class:"fas fa-tablet-screen"}),XNode.create("i",{"data-selected":Bind.oneWay((()=>this.maxWidth===mobileWidth)),"event-click":()=>this.maxWidth=mobileWidth,class:"fas fa-mobile-screen"})),XNode.create(UndoRedoToolbar,null),XNode.create(EditorToolbar,null,XNode.create(CodeCommand,null))),XNode.create(EditorToolbar,{"data-element":"left"},XNode.create(TextBox,null),XNode.create(Image,null),XNode.create(WrapGrid,null),XNode.create(VerticalImageBox,null),XNode.create(ImageBox,null),XNode.create(RightImageBox,null),XNode.create(Card,null),XNode.create(ImageCard,null),XNode.create(RowBox,null),XNode.create(ColumnBox,null),XNode.create(Columns2,null),XNode.create(Columns3,null),XNode.create(List,null)),XNode.create("div",{"data-element":"editor","style-max-width":Bind.oneWay((()=>this.maxWidth>768?"":this.maxWidth+"px"))},XNode.create("div",{"data-element":"resizer"}),XNode.create("div",{"data-element":"drop-target","style-display":Bind.oneWay((()=>this.dropTarget.element?"":"none")),"style-position":"absolute","style-left":Bind.oneWay((()=>this.dropTarget.left)),"style-top":Bind.oneWay((()=>this.dropTarget.top)),"style-width":Bind.oneWay((()=>this.dropTarget.width)),"style-height":Bind.oneWay((()=>this.dropTarget.height))}),XNode.create("div",{"data-element":"selection","style-left":Bind.oneWay((()=>this.selection.left)),"style-top":Bind.oneWay((()=>this.selection.top)),"style-width":Bind.oneWay((()=>this.selection.width)),"style-height":Bind.oneWay((()=>this.selection.height))},XNode.create("div",null,XNode.create("i",{class:"fa-regular fa-arrow-up","event-click":()=>{if(this.selection.element.parentElement!==this.htmlDocument.body){this.selection.update(this.selection.element.parentElement)}}}),XNode.create("i",{"event-click":()=>{this.selection.element.draggable=true},class:"fa-solid fa-up-down-left-right","data-click-event":"start-drag"}),XNode.create("i",{"style-display":Bind.oneWay((()=>this.selection.isImage)),"data-click-event":"change-image",title:"Change Image (Double Click)",class:"fa-solid fa-arrows-rotate-reverse"}),XNode.create("i",{title:"Duplicate","data-click-event":"copy-element",class:"fas fa-copy"}),XNode.create("i",{title:"Delete","data-click-event":"delete-element",class:"fas fa-trash-can"}))),XNode.create("div",{"data-element":"hover","style-left":Bind.oneWay((()=>this.hover.left)),"style-top":Bind.oneWay((()=>this.hover.top)),"style-width":Bind.oneWay((()=>this.hover.width)),"style-height":Bind.oneWay((()=>this.hover.height))},XNode.create("label",{text:Bind.oneWay((()=>this.hover.name))})),XNode.create("div",{"data-element":"content-frame"},XNode.create("iframe",{"data-element":"content-editor"}))),XNode.create("div",{"data-element":"right"},XNode.create(Properties,null))));this.contentEditor=this.element.querySelector(`[data-element="content-editor"]`);while(!this.htmlDocument){this.htmlDocument=this.contentEditor.contentDocument;yield sleep(100)}}))}buildXNode(node){const build=n=>{const e=this.htmlDocument.createElement(n.name);if(n.attributes){for(const key in n.attributes){if(Object.prototype.hasOwnProperty.call(n.attributes,key)){const element=n.attributes[key];e.setAttribute(key,element)}}}if(n.children){for(const iterator of n.children){e.appendChild(build(iterator))}}return e};return build(node)}deleteElement(){var _a;return __awaiter(this,void 0,void 0,(function*(){const current=this.selection.element;let previous=(_a=current.previousElementSibling)!==null&&_a!==void 0?_a:current.parentElement;current.remove();this.commit();if(!previous.textContent){previous=previous.previousElementSibling.lastElementChild}this.setSelection(previous);yield sleep(100);this.selection.update()}))}copyElement(){const current=this.selection.element;const copy=current.cloneNode(true);current.insertAdjacentElement("afterend",copy);this.commit()}changeImage(){return __awaiter(this,void 0,void 0,(function*(){return this.insertImage(prompt("Image Src",""))}))}onKeyUp(d,ke){if(ke.ctrlKey){switch(ke.key){case"z":ke.preventDefault();this.undo();break;case"y":ke.preventDefault();this.redo();break}}}insertImage(src,style){return __awaiter(this,void 0,void 0,(function*(){let img;if(this.selection.isImage){img=this.selection.element}else{img=this.htmlDocument.createElement("img");this.selection.element.appendChild(img)}img.src=src;img.onload=()=>{this.selection.update();img.onload=null};if(style){for(const key in style){if(Object.prototype.hasOwnProperty.call(style,key)){const element=style[key];img.style[key]=element}}}this.commit()}))}insertElement(e,parent=this.selection.element){parent.appendChild(e);if(!e.id){e.id="sm-"+Date.now().toString()}setTimeout((()=>{this.setSelection(e);this.commit()}),100)}deferUpdate(){var _a,_b;return __awaiter(this,void 0,void 0,(function*(){yield sleep(100);(_a=this.hover)===null||_a===void 0?void 0:_a.update();(_b=this.selection)===null||_b===void 0?void 0:_b.update()}))}setSelection(element,commit=true){var _a;const old=(_a=this.selection)===null||_a===void 0?void 0:_a.element;if(old){old.draggable=false}this.selection.update(element);if(commit){this.commit()}}commit(){this.redoList.clear();const lastHtml=this.lastHtml;const clone=this.htmlDocument.documentElement.cloneNode(true);const all=clone.querySelectorAll("*");for(let index=0;index<all.length;index++){const element=all[index];element.removeAttribute("draggable")}const currentHtml=clone.innerHTML;if(!lastHtml){this.lastHtml=currentHtml;return}if(lastHtml===currentHtml){return}this.undoList.add(this.lastHtml);this.lastHtml=currentHtml;this.element.dispatchEvent(new CustomEvent("htmlPageChanged",{detail:currentHtml,bubbles:true}));AtomBinder.refreshValue(this,"htmlPage");setTimeout((()=>{this.selection.update();this.hover.update()}),100)}undo(){this.redoList.insert(this.redoList.length,this.htmlDocument.documentElement.innerHTML);this.htmlDocument.documentElement.innerHTML=this.undoList.removeAt(this.undoList.length-1)}redo(){this.undoList.insert(this.undoList.length,this.htmlDocument.documentElement.innerHTML);this.htmlDocument.documentElement.innerHTML=this.redoList.removeAt(this.redoList.length-1)}setStylerSheet(){return __awaiter(this,void 0,void 0,(function*(){const document=this.htmlDocument;let style=document.querySelector(`[styler-style-sheet]`);if(!style){style=document.createElement("style");style.setAttribute("styler-style-sheet","inline");document.head.appendChild(style)}style.textContent=StylerSet.instance.toString()}))}loadVariables(){const onChange=()=>{const document=this.htmlDocument;let style=document.querySelector("[styler-style-variables]");if(!style){style=document.createElement("style");style.setAttribute("styler-style-variables","override");document.head.appendChild(style)}style.textContent=`:root {\n                ${this.pageVariables.map((x=>`${x.propertyName}: ${x.currentValue};`)).join("\n\t")}\n            }`};this.pageVariables=StylerSet.instance.vars.map((x=>new StylerVariable(x.name,x.value,this.htmlDocument,onChange)))}});__decorate([Action({onEvent:"delete-element"}),__metadata("design:type",Function),__metadata("design:paramtypes",[]),__metadata("design:returntype",Promise)],HtmlPageEditor.prototype,"deleteElement",null);__decorate([Action({onEvent:"copy-element",blockMultipleExecution:false}),__metadata("design:type",Function),__metadata("design:paramtypes",[]),__metadata("design:returntype",void 0)],HtmlPageEditor.prototype,"copyElement",null);__decorate([Action({onEvent:"change-image"}),__metadata("design:type",Function),__metadata("design:paramtypes",[]),__metadata("design:returntype",Promise)],HtmlPageEditor.prototype,"changeImage",null);__decorate([Action({onEvent:"keyup"}),__metadata("design:type",Function),__metadata("design:paramtypes",[Object,KeyboardEvent]),__metadata("design:returntype",void 0)],HtmlPageEditor.prototype,"onKeyUp",null);__decorate([Action({onEvent:"undo"}),__metadata("design:type",Function),__metadata("design:paramtypes",[]),__metadata("design:returntype",void 0)],HtmlPageEditor.prototype,"undo",null);__decorate([Action({onEvent:"redo"}),__metadata("design:type",Function),__metadata("design:paramtypes",[]),__metadata("design:returntype",void 0)],HtmlPageEditor.prototype,"redo",null)}}}));AmdLoader.instance.setup("@social-mail/social-mail-client/dist/site-editor/editor/HtmlPageEditor");System.register(["tslib","@web-atoms/core/dist/style/styled","@web-atoms/core/dist/web/controls/AtomControl"],(function(_export,_context){"use strict";var __asyncValues,__awaiter,styled,AtomControl,supportsFileSystemAccessAPI,supportsWebkitGetAsEntry,dragEnter,dragOver,dragLeave,eventDrop,FilesDragDrop;return{setters:[function(_tslib){__asyncValues=_tslib.__asyncValues;__awaiter=_tslib.__awaiter},function(_webAtomsCoreDistStyleStyled){styled=_webAtomsCoreDistStyleStyled.default},function(_webAtomsCoreDistWebControlsAtomControl){AtomControl=_webAtomsCoreDistWebControlsAtomControl.AtomControl}],execute:function(){supportsFileSystemAccessAPI="getAsFileSystemHandle"in DataTransferItem.prototype;supportsWebkitGetAsEntry="webkitGetAsEntry"in DataTransferItem.prototype;styled.css`
 
         &[data-drop-enabled] {
             outline: solid 5px green;