Modifica di un file

<title>Modifica di un file</title>
Modificare il file: <i>\res\x5engine.elements.js</i><br><form method=post action="edit.asp?action=save&dir=\res&file=x5engine.elements.js"><textarea name='content' style='width: 700px;' rows=20 cols=70>(function () {
  'use strict';

  /**
   * @license
   * Copyright 2019 Google LLC
   * SPDX-License-Identifier: BSD-3-Clause
   */
  const t=window,i=t.ShadowRoot&amp;&amp;(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&amp;&amp;&quot;adoptedStyleSheets&quot;in Document.prototype&amp;&amp;&quot;replace&quot;in CSSStyleSheet.prototype,s=Symbol(),e=new WeakMap;class n{constructor(t,i,e){if(this._$cssResult$=!0,e!==s)throw Error(&quot;CSSResult is not constructable. Use `unsafeCSS` or `css` instead.&quot;);this.cssText=t,this.t=i;}get styleSheet(){let t=this.i;const s=this.t;if(i&amp;&amp;void 0===t){const i=void 0!==s&amp;&amp;1===s.length;i&amp;&amp;(t=e.get(s)),void 0===t&amp;&amp;((this.i=t=new CSSStyleSheet).replaceSync(this.cssText),i&amp;&amp;e.set(s,t));}return t}toString(){return this.cssText}}const o=t=&gt;new n(&quot;string&quot;==typeof t?t:t+&quot;&quot;,void 0,s),l=(s,e)=&gt;{i?s.adoptedStyleSheets=e.map((t=&gt;t instanceof CSSStyleSheet?t:t.styleSheet)):e.forEach((i=&gt;{const e=document.createElement(&quot;style&quot;),n=t.litNonce;void 0!==n&amp;&amp;e.setAttribute(&quot;nonce&quot;,n),e.textContent=i.cssText,s.appendChild(e);}));},h=i?t=&gt;t:t=&gt;t instanceof CSSStyleSheet?(t=&gt;{let i=&quot;&quot;;for(const s of t.cssRules)i+=s.cssText;return o(i)})(t):t
  /**
   * @license
   * Copyright 2017 Google LLC
   * SPDX-License-Identifier: BSD-3-Clause
   */;var u;const c=window,d=c.trustedTypes,a=d?d.emptyScript:&quot;&quot;,v=c.reactiveElementPolyfillSupport,f={toAttribute(t,i){switch(i){case Boolean:t=t?a:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,i){let s=t;switch(i){case Boolean:s=null!==t;break;case Number:s=null===t?null:Number(t);break;case Object:case Array:try{s=JSON.parse(t);}catch(t){s=null;}}return s}},p=(t,i)=&gt;i!==t&amp;&amp;(i==i||t==t),y={attribute:!0,type:String,converter:f,reflect:!1,hasChanged:p},b=&quot;finalized&quot;;class m extends HTMLElement{constructor(){super(),this.o=new Map,this.isUpdatePending=!1,this.hasUpdated=!1,this.l=null,this.u();}static addInitializer(t){var i;this.finalize(),(null!==(i=this.v)&amp;&amp;void 0!==i?i:this.v=[]).push(t);}static get observedAttributes(){this.finalize();const t=[];return this.elementProperties.forEach(((i,s)=&gt;{const e=this.p(s,i);void 0!==e&amp;&amp;(this.m.set(e,s),t.push(e));})),t}static createProperty(t,i=y){if(i.state&amp;&amp;(i.attribute=!1),this.finalize(),this.elementProperties.set(t,i),!i.noAccessor&amp;&amp;!this.prototype.hasOwnProperty(t)){const s=&quot;symbol&quot;==typeof t?Symbol():&quot;__&quot;+t,e=this.getPropertyDescriptor(t,s,i);void 0!==e&amp;&amp;Object.defineProperty(this.prototype,t,e);}}static getPropertyDescriptor(t,i,s){return {get(){return this[i]},set(e){const n=this[t];this[i]=e,this.requestUpdate(t,n,s);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)||y}static finalize(){if(this.hasOwnProperty(b))return !1;this[b]=!0;const t=Object.getPrototypeOf(this);if(t.finalize(),void 0!==t.v&amp;&amp;(this.v=[...t.v]),this.elementProperties=new Map(t.elementProperties),this.m=new Map,this.hasOwnProperty(&quot;properties&quot;)){const t=this.properties,i=[...Object.getOwnPropertyNames(t),...Object.getOwnPropertySymbols(t)];for(const s of i)this.createProperty(s,t[s]);}return this.elementStyles=this.finalizeStyles(this.styles),!0}static finalizeStyles(t){const i=[];if(Array.isArray(t)){const s=new Set(t.flat(1/0).reverse());for(const t of s)i.unshift(h(t));}else void 0!==t&amp;&amp;i.push(h(t));return i}static p(t,i){const s=i.attribute;return !1===s?void 0:&quot;string&quot;==typeof s?s:&quot;string&quot;==typeof t?t.toLowerCase():void 0}u(){var t;this._=new Promise((t=&gt;this.enableUpdating=t)),this._$AL=new Map,this.g(),this.requestUpdate(),null===(t=this.constructor.v)||void 0===t||t.forEach((t=&gt;t(this)));}addController(t){var i,s;(null!==(i=this.S)&amp;&amp;void 0!==i?i:this.S=[]).push(t),void 0!==this.renderRoot&amp;&amp;this.isConnected&amp;&amp;(null===(s=t.hostConnected)||void 0===s||s.call(t));}removeController(t){var i;null===(i=this.S)||void 0===i||i.splice(this.S.indexOf(t)&gt;&gt;&gt;0,1);}g(){this.constructor.elementProperties.forEach(((t,i)=&gt;{this.hasOwnProperty(i)&amp;&amp;(this.o.set(i,this[i]),delete this[i]);}));}createRenderRoot(){var t;const i=null!==(t=this.shadowRoot)&amp;&amp;void 0!==t?t:this.attachShadow(this.constructor.shadowRootOptions);return l(i,this.constructor.elementStyles),i}connectedCallback(){var t;void 0===this.renderRoot&amp;&amp;(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),null===(t=this.S)||void 0===t||t.forEach((t=&gt;{var i;return null===(i=t.hostConnected)||void 0===i?void 0:i.call(t)}));}enableUpdating(t){}disconnectedCallback(){var t;null===(t=this.S)||void 0===t||t.forEach((t=&gt;{var i;return null===(i=t.hostDisconnected)||void 0===i?void 0:i.call(t)}));}attributeChangedCallback(t,i,s){this._$AK(t,s);}$(t,i,s=y){var e;const n=this.constructor.p(t,s);if(void 0!==n&amp;&amp;!0===s.reflect){const o=(void 0!==(null===(e=s.converter)||void 0===e?void 0:e.toAttribute)?s.converter:f).toAttribute(i,s.type);this.l=t,null==o?this.removeAttribute(n):this.setAttribute(n,o),this.l=null;}}_$AK(t,i){var s;const e=this.constructor,n=e.m.get(t);if(void 0!==n&amp;&amp;this.l!==n){const t=e.getPropertyOptions(n),o=&quot;function&quot;==typeof t.converter?{fromAttribute:t.converter}:void 0!==(null===(s=t.converter)||void 0===s?void 0:s.fromAttribute)?t.converter:f;this.l=n,this[n]=o.fromAttribute(i,t.type),this.l=null;}}requestUpdate(t,i,s){let e=!0;void 0!==t&amp;&amp;(((s=s||this.constructor.getPropertyOptions(t)).hasChanged||p)(this[t],i)?(this._$AL.has(t)||this._$AL.set(t,i),!0===s.reflect&amp;&amp;this.l!==t&amp;&amp;(void 0===this.C&amp;&amp;(this.C=new Map),this.C.set(t,s))):e=!1),!this.isUpdatePending&amp;&amp;e&amp;&amp;(this._=this.T());}async T(){this.isUpdatePending=!0;try{await this._;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&amp;&amp;await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var t;if(!this.isUpdatePending)return;this.hasUpdated,this.o&amp;&amp;(this.o.forEach(((t,i)=&gt;this[i]=t)),this.o=void 0);let i=!1;const s=this._$AL;try{i=this.shouldUpdate(s),i?(this.willUpdate(s),null===(t=this.S)||void 0===t||t.forEach((t=&gt;{var i;return null===(i=t.hostUpdate)||void 0===i?void 0:i.call(t)})),this.update(s)):this.P();}catch(t){throw i=!1,this.P(),t}i&amp;&amp;this._$AE(s);}willUpdate(t){}_$AE(t){var i;null===(i=this.S)||void 0===i||i.forEach((t=&gt;{var i;return null===(i=t.hostUpdated)||void 0===i?void 0:i.call(t)})),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}P(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._}shouldUpdate(t){return !0}update(t){void 0!==this.C&amp;&amp;(this.C.forEach(((t,i)=&gt;this.$(i,this[i],t))),this.C=void 0),this.P();}updated(t){}firstUpdated(t){}}
  /**
   * @license
   * Copyright 2017 Google LLC
   * SPDX-License-Identifier: BSD-3-Clause
   */
  var g;m[b]=!0,m.elementProperties=new Map,m.elementStyles=[],m.shadowRootOptions={mode:&quot;open&quot;},null==v||v({ReactiveElement:m}),(null!==(u=c.reactiveElementVersions)&amp;&amp;void 0!==u?u:c.reactiveElementVersions=[]).push(&quot;1.6.3&quot;);const w=window,_=w.trustedTypes,$=_?_.createPolicy(&quot;lit-html&quot;,{createHTML:t=&gt;t}):void 0,S=&quot;$lit$&quot;,T=`lit$${(Math.random()+&quot;&quot;).slice(9)}$`,x=&quot;?&quot;+T,E=`&lt;${x}&gt;`,C=document,A=()=&gt;C.createComment(&quot;&quot;),k=t=&gt;null===t||&quot;object&quot;!=typeof t&amp;&amp;&quot;function&quot;!=typeof t,M=Array.isArray,P=t=&gt;M(t)||&quot;function&quot;==typeof(null==t?void 0:t[Symbol.iterator]),U=&quot;[ \t\n\f\r]&quot;,V=/&lt;(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^&gt;\s]*)|(\/?$))/g,R=/--&gt;/g,N=/&gt;/g,O=RegExp(`&gt;|${U}(?:([^\\s&quot;'&gt;=/]+)(${U}*=${U}*(?:[^ \t\n\f\r&quot;'\`&lt;&gt;=]|(&quot;|')|))|$)`,&quot;g&quot;),L=/'/g,j=/&quot;/g,z=/^(?:script|style|textarea|title)$/i,H=t=&gt;(i,...s)=&gt;({_$litType$:t,strings:i,values:s}),I=H(1),D=Symbol.for(&quot;lit-noChange&quot;),W=Symbol.for(&quot;lit-nothing&quot;),Z=new WeakMap,q=C.createTreeWalker(C,129,null,!1);function F(t,i){if(!Array.isArray(t)||!t.hasOwnProperty(&quot;raw&quot;))throw Error(&quot;invalid template strings array&quot;);return void 0!==$?$.createHTML(i):i}const G=(t,i)=&gt;{const s=t.length-1,e=[];let n,o=2===i?&quot;&lt;svg&gt;&quot;:&quot;&quot;,r=V;for(let i=0;i&lt;s;i++){const s=t[i];let l,h,u=-1,c=0;for(;c&lt;s.length&amp;&amp;(r.lastIndex=c,h=r.exec(s),null!==h);)c=r.lastIndex,r===V?&quot;!--&quot;===h[1]?r=R:void 0!==h[1]?r=N:void 0!==h[2]?(z.test(h[2])&amp;&amp;(n=RegExp(&quot;&lt;/&quot;+h[2],&quot;g&quot;)),r=O):void 0!==h[3]&amp;&amp;(r=O):r===O?&quot;&gt;&quot;===h[0]?(r=null!=n?n:V,u=-1):void 0===h[1]?u=-2:(u=r.lastIndex-h[2].length,l=h[1],r=void 0===h[3]?O:'&quot;'===h[3]?j:L):r===j||r===L?r=O:r===R||r===N?r=V:(r=O,n=void 0);const d=r===O&amp;&amp;t[i+1].startsWith(&quot;/&gt;&quot;)?&quot; &quot;:&quot;&quot;;o+=r===V?s+E:u&gt;=0?(e.push(l),s.slice(0,u)+S+s.slice(u)+T+d):s+T+(-2===u?(e.push(void 0),i):d);}return [F(t,o+(t[s]||&quot;&lt;?&gt;&quot;)+(2===i?&quot;&lt;/svg&gt;&quot;:&quot;&quot;)),e]};class J{constructor({strings:t,_$litType$:i},s){let e;this.parts=[];let n=0,o=0;const r=t.length-1,l=this.parts,[h,u]=G(t,i);if(this.el=J.createElement(h,s),q.currentNode=this.el.content,2===i){const t=this.el.content,i=t.firstChild;i.remove(),t.append(...i.childNodes);}for(;null!==(e=q.nextNode())&amp;&amp;l.length&lt;r;){if(1===e.nodeType){if(e.hasAttributes()){const t=[];for(const i of e.getAttributeNames())if(i.endsWith(S)||i.startsWith(T)){const s=u[o++];if(t.push(i),void 0!==s){const t=e.getAttribute(s.toLowerCase()+S).split(T),i=/([.?@])?(.*)/.exec(s);l.push({type:1,index:n,name:i[2],strings:t,ctor:&quot;.&quot;===i[1]?tt:&quot;?&quot;===i[1]?st:&quot;@&quot;===i[1]?et:X});}else l.push({type:6,index:n});}for(const i of t)e.removeAttribute(i);}if(z.test(e.tagName)){const t=e.textContent.split(T),i=t.length-1;if(i&gt;0){e.textContent=_?_.emptyScript:&quot;&quot;;for(let s=0;s&lt;i;s++)e.append(t[s],A()),q.nextNode(),l.push({type:2,index:++n});e.append(t[i],A());}}}else if(8===e.nodeType)if(e.data===x)l.push({type:2,index:n});else {let t=-1;for(;-1!==(t=e.data.indexOf(T,t+1));)l.push({type:7,index:n}),t+=T.length-1;}n++;}}static createElement(t,i){const s=C.createElement(&quot;template&quot;);return s.innerHTML=t,s}}function K(t,i,s=t,e){var n,o,r,l;if(i===D)return i;let h=void 0!==e?null===(n=s.A)||void 0===n?void 0:n[e]:s.k;const u=k(i)?void 0:i._$litDirective$;return (null==h?void 0:h.constructor)!==u&amp;&amp;(null===(o=null==h?void 0:h._$AO)||void 0===o||o.call(h,!1),void 0===u?h=void 0:(h=new u(t),h._$AT(t,s,e)),void 0!==e?(null!==(r=(l=s).A)&amp;&amp;void 0!==r?r:l.A=[])[e]=h:s.k=h),void 0!==h&amp;&amp;(i=K(t,h._$AS(t,i.values),h,e)),i}class Y{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}M(t){var i;const{el:{content:s},parts:e}=this._$AD,n=(null!==(i=null==t?void 0:t.creationScope)&amp;&amp;void 0!==i?i:C).importNode(s,!0);q.currentNode=n;let o=q.nextNode(),r=0,l=0,h=e[0];for(;void 0!==h;){if(r===h.index){let i;2===h.type?i=new Q(o,o.nextSibling,this,t):1===h.type?i=new h.ctor(o,h.name,h.strings,this,t):6===h.type&amp;&amp;(i=new nt(o,this,t)),this._$AV.push(i),h=e[++l];}r!==(null==h?void 0:h.index)&amp;&amp;(o=q.nextNode(),r++);}return q.currentNode=C,n}U(t){let i=0;for(const s of this._$AV)void 0!==s&amp;&amp;(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class Q{constructor(t,i,s,e){var n;this.type=2,this._$AH=W,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this.N=null===(n=null==e?void 0:e.isConnected)||void 0===n||n;}get _$AU(){var t,i;return null!==(i=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&amp;&amp;void 0!==i?i:this.N}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&amp;&amp;11===(null==t?void 0:t.nodeType)&amp;&amp;(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=K(this,t,i),k(t)?t===W||null==t||&quot;&quot;===t?(this._$AH!==W&amp;&amp;this._$AR(),this._$AH=W):t!==this._$AH&amp;&amp;t!==D&amp;&amp;this.R(t):void 0!==t._$litType$?this.O(t):void 0!==t.nodeType?this.V(t):P(t)?this.j(t):this.R(t);}L(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}V(t){this._$AH!==t&amp;&amp;(this._$AR(),this._$AH=this.L(t));}R(t){this._$AH!==W&amp;&amp;k(this._$AH)?this._$AA.nextSibling.data=t:this.V(C.createTextNode(t)),this._$AH=t;}O(t){var i;const{values:s,_$litType$:e}=t,n=&quot;number&quot;==typeof e?this._$AC(t):(void 0===e.el&amp;&amp;(e.el=J.createElement(F(e.h,e.h[0]),this.options)),e);if((null===(i=this._$AH)||void 0===i?void 0:i._$AD)===n)this._$AH.U(s);else {const t=new Y(n,this),i=t.M(this.options);t.U(s),this.V(i),this._$AH=t;}}_$AC(t){let i=Z.get(t.strings);return void 0===i&amp;&amp;Z.set(t.strings,i=new J(t)),i}j(t){M(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const n of t)e===i.length?i.push(s=new Q(this.L(A()),this.L(A()),this,this.options)):s=i[e],s._$AI(n),e++;e&lt;i.length&amp;&amp;(this._$AR(s&amp;&amp;s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,i){var s;for(null===(s=this._$AP)||void 0===s||s.call(this,!1,!0,i);t&amp;&amp;t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){var i;void 0===this._$AM&amp;&amp;(this.N=t,null===(i=this._$AP)||void 0===i||i.call(this,t));}}class X{constructor(t,i,s,e,n){this.type=1,this._$AH=W,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=n,s.length&gt;2||&quot;&quot;!==s[0]||&quot;&quot;!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=W;}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,i=this,s,e){const n=this.strings;let o=!1;if(void 0===n)t=K(this,t,i,0),o=!k(t)||t!==this._$AH&amp;&amp;t!==D,o&amp;&amp;(this._$AH=t);else {const e=t;let r,l;for(t=n[0],r=0;r&lt;n.length-1;r++)l=K(this,e[s+r],i,r),l===D&amp;&amp;(l=this._$AH[r]),o||(o=!k(l)||l!==this._$AH[r]),l===W?t=W:t!==W&amp;&amp;(t+=(null!=l?l:&quot;&quot;)+n[r+1]),this._$AH[r]=l;}o&amp;&amp;!e&amp;&amp;this.I(t);}I(t){t===W?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:&quot;&quot;);}}class tt extends X{constructor(){super(...arguments),this.type=3;}I(t){this.element[this.name]=t===W?void 0:t;}}const it=_?_.emptyScript:&quot;&quot;;class st extends X{constructor(){super(...arguments),this.type=4;}I(t){t&amp;&amp;t!==W?this.element.setAttribute(this.name,it):this.element.removeAttribute(this.name);}}class et extends X{constructor(t,i,s,e,n){super(t,i,s,e,n),this.type=5;}_$AI(t,i=this){var s;if((t=null!==(s=K(this,t,i,0))&amp;&amp;void 0!==s?s:W)===D)return;const e=this._$AH,n=t===W&amp;&amp;e!==W||t.capture!==e.capture||t.once!==e.once||t.passive!==e.passive,o=t!==W&amp;&amp;(e===W||n);n&amp;&amp;this.element.removeEventListener(this.name,this,e),o&amp;&amp;this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){var i,s;&quot;function&quot;==typeof this._$AH?this._$AH.call(null!==(s=null===(i=this.options)||void 0===i?void 0:i.host)&amp;&amp;void 0!==s?s:this.element,t):this._$AH.handleEvent(t);}}class nt{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){K(this,t);}}const rt=w.litHtmlPolyfillSupport;null==rt||rt(J,Q),(null!==(g=w.litHtmlVersions)&amp;&amp;void 0!==g?g:w.litHtmlVersions=[]).push(&quot;2.8.0&quot;);const lt=(t,i,s)=&gt;{var e,n;const o=null!==(e=null==s?void 0:s.renderBefore)&amp;&amp;void 0!==e?e:i;let r=o._$litPart$;if(void 0===r){const t=null!==(n=null==s?void 0:s.renderBefore)&amp;&amp;void 0!==n?n:null;o._$litPart$=r=new Q(i.insertBefore(A(),t),t,void 0,null!=s?s:{});}return r._$AI(t),r};
  /**
   * @license
   * Copyright 2017 Google LLC
   * SPDX-License-Identifier: BSD-3-Clause
   */var ht,ut;class dt extends m{constructor(){super(...arguments),this.renderOptions={host:this},this.st=void 0;}createRenderRoot(){var t,i;const s=super.createRenderRoot();return null!==(t=(i=this.renderOptions).renderBefore)&amp;&amp;void 0!==t||(i.renderBefore=s.firstChild),s}update(t){const i=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this.st=lt(i,this.renderRoot,this.renderOptions);}connectedCallback(){var t;super.connectedCallback(),null===(t=this.st)||void 0===t||t.setConnected(!0);}disconnectedCallback(){var t;super.disconnectedCallback(),null===(t=this.st)||void 0===t||t.setConnected(!1);}render(){return D}}dt.finalized=!0,dt._$litElement$=!0,null===(ht=globalThis.litElementHydrateSupport)||void 0===ht||ht.call(globalThis,{LitElement:dt});const at=globalThis.litElementPolyfillSupport;null==at||at({LitElement:dt});(null!==(ut=globalThis.litElementVersions)&amp;&amp;void 0!==ut?ut:globalThis.litElementVersions=[]).push(&quot;3.3.3&quot;);
  /**
   * @license
   * Copyright 2021 Google LLC
   * SPDX-License-Identifier: BSD-3-Clause
   */
  window.litDisableBundleWarning||console.warn(&quot;Lit has been loaded from a bundle that combines all core features into a single file. To reduce transfer size and parsing cost, consider using the `lit` npm package directly in your project.&quot;);

  class Card extends dt {

    static properties = {

      contentLayout: {}, 
      // Possible values of contentLayout:
      // &quot;horizontal-cover-left&quot;
      // &quot;horizontal-cover-right&quot;
      // &quot;vertical-cover-top&quot;
      // &quot;vertical-title-top&quot;
      // &quot;cover-as-background&quot;

      contentDimension: {}, 
      // Possible values of contentDimension:
      // Larghezza in pixel del contenuto, un numero, es:
      // contentdimension=&quot;300&quot;

      fixedHeight: {},
      // Possible values of fixedHeight:
      // true
      // false

      breakpoint: {},
      // Possible values of breakpoint:
      // Same syntax as the &quot;sizes&quot; attribute of the &quot;img&quot; tag
      // Ex:
      // breakpoint=&quot;(max-width: 600px) 480px, 
      //   800px&quot;

      layoutVerticalMediaQueryStart: {}
      // Media query to be applied to vertical layout CSS rules: if the user set the layout vertical, this media query is empty (those rules are always applied);
      // if the user instead set the layout horizontal, this media query contains the screen size ranges for which the cards must be shown vertical due to lack of space
    };



    constructor() {
      super();
    }


    
    breakpointToMediaQuery () {

      if ( !this.breakpoint || this.breakpoint.trim().length &lt;= 0 ) {
        return &quot;&quot;;
      }

      let brp = this.breakpoint;

      let result = &quot;&quot;;

      let brpParts = brp.split( ',' );
      for ( let i = 0 ; i &lt; brpParts.length; i++ ) {
        let part = brpParts[i].trim();
        if ( part.indexOf( ')' ) &gt; -1 ) {
          let subparts = part.split( ')' );

          let mediaquery = &quot;&quot;;
          mediaquery += &quot;@media screen and &quot; + subparts[0] + &quot;) { \n&quot;;
          mediaquery += &quot;:host { \n&quot;;
          mediaquery += &quot;max-width:&quot; + subparts[1] + &quot;; \n&quot;;
          mediaquery += &quot;} \n&quot;;
          mediaquery += &quot;} \n&quot;;

          result = result + mediaquery;

        } else {

          let cssrule = &quot;&quot;;
          cssrule += &quot;:host { \n&quot;;
          cssrule += &quot;max-width:&quot; + part + &quot;; \n&quot;;
          cssrule += &quot;} \n&quot;;

          result = cssrule + result;

        }
      }

      return result;

    }



    render() {   

      let contentdimensionStyle = &quot;&quot;;
      if ( !!this.contentDimension ) {
        contentdimensionStyle = &quot;slot[name=contents]::slotted(*) { max-width: &quot;+this.contentDimension+&quot;px; }&quot;;
      }

      let breakpointStyle = this.breakpointToMediaQuery ();
      
      let generalStyle = `
      :host { 
        display: grid; 
        position: relative; 
        top: 0px; 
        left: 0px; 
        overflow: hidden; 
      }

      :host slot[name=cover]::slotted(*) {
        justify-items: center;
        align-items: center;
      } 
      :host slot[name=title]::slotted(*) {
        justify-items: center;
        align-items: center;
      } 
      :host slot[name=contents]::slotted(*) {
        justify-items: center;
        align-items: center;
      }`;
           
      if ( this.contentLayout == &quot;horizontal-cover-left&quot; ) {
        generalStyle = generalStyle +
          `:host slot[name=cover]::slotted(*) { 
          grid-column:1/2; 
          grid-row:1/3; 
        }
        :host slot[name=title]::slotted(*) { 
          grid-column:2/3; 
          grid-row:1/2; 
        }
        :host slot[name=contents]::slotted(*) { 
          grid-column:2/3; 
          grid-row:2/3; 
        }`;
      } else if ( this.contentLayout == &quot;horizontal-cover-right&quot; ) {
        generalStyle = generalStyle +
          `:host slot[name=cover]::slotted(*) { 
          grid-column:2/3; 
          grid-row:1/3; 
        }
        :host slot[name=title]::slotted(*) { 
          grid-column:1/2; 
          grid-row:1/2; 
        }
        :host slot[name=contents]::slotted(*) { 
          grid-column:1/2; 
          grid-row:2/3; 
        }`;
      } else if ( this.contentLayout == &quot;vertical-title-top&quot; ) {
        generalStyle = generalStyle +
          `:host slot[name=cover]::slotted(*) { 
          grid-column:1/2; 
          grid-row:2/3; 
        }
        :host slot[name=title]::slotted(*) { 
          grid-column:1/2; 
          grid-row:1/2; 
        }
        :host slot[name=contents]::slotted(*) { 
          grid-column:1/2; 
          grid-row:3/4; 
        }`;
      } else if ( this.contentLayout == &quot;cover-as-background&quot; ) {
        generalStyle = generalStyle +
          `:host { 
          min-height: 0; 
          min-width: 0; 
          justify-items: center; 
          align-items:end; 
        }
        :host slot[name=cover]::slotted(*) { 
          grid-column:1/2; 
          grid-row:1/2; ` +
            (this.fixedHeight ? `` : `height:100%; `) + 
          `} ` + 
          `:host .wrapper-title-contents { 
          grid-column:1/2; 
          grid-row:1/2; 
          width: 100%; ` + 
          `}
      `;
      }
  	
      if ( this.contentLayout == &quot;vertical-cover-top&quot; || (this.layoutVerticalMediaQueryStart &amp;&amp; (this.contentLayout == &quot;horizontal-cover-left&quot; || this.contentLayout == &quot;horizontal-cover-right&quot;)) ) {
        if ( this.contentLayout == &quot;horizontal-cover-left&quot; || this.contentLayout == &quot;horizontal-cover-right&quot; )
          generalStyle = generalStyle + &quot;\n&quot; + this.layoutVerticalMediaQueryStart;

        generalStyle = generalStyle + `
        :host slot[name=cover]::slotted(*) { 
          grid-column:1/2; 
          grid-row:1/2; 
        }
        :host slot[name=title]::slotted(*) { 
          grid-column:1/2; 
          grid-row:2/3; 
        }
        :host slot[name=contents]::slotted(*) { 
          grid-column:1/2; 
          grid-row:3/4; 
        }
        `;

        if ( this.contentLayout == &quot;horizontal-cover-left&quot; || this.contentLayout == &quot;horizontal-cover-right&quot; )
          generalStyle = generalStyle + &quot;}&quot;;
      }

      if ( this.contentLayout == &quot;cover-as-background&quot; ) {

        return I`
        &lt;style&gt;
          ${generalStyle}
          ${contentdimensionStyle}
          ${breakpointStyle}
        &lt;/style&gt;
      
        &lt;slot name=&quot;cover&quot; &gt;&lt;/slot&gt;
        &lt;slot name=&quot;cockades&quot; &gt;&lt;/slot&gt;
        &lt;div class=&quot;wrapper-title-contents&quot; &gt;
          &lt;slot name=&quot;title&quot; &gt;&lt;/slot&gt;
          &lt;slot name=&quot;contents&quot; &gt;&lt;/slot&gt;
        &lt;/div&gt;
      `;

      } else {

        return I`
        &lt;style&gt;
          ${generalStyle}
          ${contentdimensionStyle}
          ${breakpointStyle}
        &lt;/style&gt;
 
        &lt;slot name=&quot;cover&quot; &gt;&lt;/slot&gt;
        &lt;slot name=&quot;cockades&quot; &gt;&lt;/slot&gt;
        &lt;slot name=&quot;title&quot; &gt;&lt;/slot&gt;
        &lt;slot name=&quot;contents&quot; &gt;&lt;/slot&gt;
      `;
      }
    }
  }

  class CardLayout extends dt {

    static properties = {

      cardArrangement: {}, 
      // Possible values of cardArrangement:
      // &quot;same-height&quot;
      // &quot;changing-height&quot;
      // &quot;masonry&quot;
      // &quot;slideshow&quot;

      cardHeight: {},
      // Possible values of cardHeight:
      // Fixed height of cards in pixels, specified by the user if cardarrangement=&quot;same-height&quot; or &quot;slideshow&quot;
      // ex: cardheight=&quot;280&quot;
      // Needed if cardarrangement=&quot;same-height&quot; or &quot;slideshow&quot;
      // Ignored otherwise

      cardsPerRow: {},
      // Possible values of cardsPerRow:
      // Number of cards in each row, a positive integer
      // Ex: cardsperrow=&quot;3&quot;
      // Can also be provided the same way as the 'breakpoint' attribute for the card:
      // cardsperrow=&quot;(max-width: 600px) 2, 
      //   3&quot;
      // meaning to use 2 cards per row within the 600px breakpoint, 3 cards per row otherwise.
      // This attribute is needed if 
      // cardarrangement=&quot;same-height&quot; or &quot;changing-height&quot; (default on 1 if missing)
      // It is ignored otherwise

      layoutHorizontalMediaQueryStart: {}
      // Media query to be applied to horizontal layout CSS rules: this media query contains the screen size ranges for which an horizontal card
      // must be shown vertical due to lack of space
    };



    constructor() {
      super();
    }


    
    breakpointToMediaQuery () {

      if ( !this.cardsPerRow || this.cardsPerRow.trim().length &lt;= 0 ) {
        return &quot;&quot;;
      }

      let brp = this.cardsPerRow;

      let result = &quot;&quot;;

      let brpParts = brp.split( ',' );
      for ( let i = 0 ; i &lt; brpParts.length; i++ ) {
        let part = brpParts[i].trim();
        if ( part.indexOf( ')' ) &gt; -1 ) {
          let subparts = part.split( ')' );

          let mediaquery = &quot;&quot;;
          if ( this.cardArrangement == &quot;masonry&quot; ) {
            mediaquery += &quot;@media &quot; + subparts[0] + &quot;) { \n&quot;;
            mediaquery += &quot;  .dw { \n&quot;;
            mediaquery += &quot;  -webkit-column-count: &quot;+subparts[1]+&quot;; \n&quot;;
            mediaquery += &quot;     -moz-column-count: &quot;+subparts[1]+&quot;; \n&quot;;
            mediaquery += &quot;          column-count: &quot;+subparts[1]+&quot;; \n&quot;;
            mediaquery += &quot;  } \n&quot;;
            mediaquery += &quot;} \n&quot;;
          } else {
            mediaquery += &quot;@media screen and &quot; + subparts[0] + &quot;) { \n&quot;;
            if ( this.cardArrangement == &quot;changing-height&quot; ) {
              mediaquery += &quot;:host([cardarrangement=changing-height]) { \n&quot;;
            } else {
              mediaquery += &quot;:host([cardarrangement=same-height]) { \n&quot;;
            }
            mediaquery += &quot;grid-template-columns: &quot; + this.gridTemplateColumns( subparts[1] ) + &quot;; \n&quot;;
            mediaquery += &quot;} \n&quot;;
            mediaquery += &quot;} \n&quot;;
          }
          result = result + mediaquery;

        } else {

          let cssrule = &quot;&quot;;
          if ( this.cardArrangement == &quot;masonry&quot; ) {
            cssrule += &quot;.dw { \n&quot;;
            cssrule += &quot;  -webkit-column-count: &quot;+part+&quot;; \n&quot;;
            cssrule += &quot;     -moz-column-count: &quot;+part+&quot;; \n&quot;;
            cssrule += &quot;          column-count: &quot;+part+&quot;; \n&quot;;
            cssrule += &quot;} \n&quot;;
          } else {
            if ( this.cardArrangement == &quot;changing-height&quot; ) {
              cssrule += &quot;:host([cardarrangement=changing-height]) { \n&quot;;
            } else {
              cssrule += &quot;:host([cardarrangement=same-height]) { \n&quot;;
            }
            cssrule += &quot;grid-template-columns: &quot; + this.gridTemplateColumns( part ) + &quot;; \n&quot;;
            cssrule += &quot;} \n&quot;;
          }
          result = cssrule + result;

        }
      }

      return result;

    }



    gridTemplateColumns ( numCols ) {

      let gridTemplateColumnsValue = &quot;1fr&quot;;
      for ( let i = 1 ; i &lt; numCols ; i++ ) {
        gridTemplateColumnsValue += &quot; 1fr&quot;;
      }

      return gridTemplateColumnsValue;

    }



    numColumns () {

      if ( !this.cardsPerRow || this.cardsPerRow.trim().length &lt;= 0 ) {
        return null;
      }

      let brp = this.cardsPerRow;
      let brpParts = brp.split( ',' );
      for ( let i = 0 ; i &lt; brpParts.length; i++ ) {
        let part = brpParts[i].trim();
        if ( ! ( part.indexOf( ')' ) &gt; -1 ) ) {

          return part;

        }
      }

      return null;

    }



    render() {

      let mq = &quot;&quot;;
      if ( this.cardArrangement == &quot;same-height&quot; || this.cardArrangement == &quot;changing-height&quot; ) {
        mq = this.breakpointToMediaQuery();
      }

      let mobileBPMaxWidth = 479.9;
      if ( this.breakpoint ) {
        let brpParts = this.breakpoint.split( ',' ), part;
        if ( brpParts.length &gt;= 2 ) {
          part = brpParts[brpParts.length - 2].trim();
          if ( part.indexOf( ')' ) &gt; -1 )
            part = part.split( ')' )[0].replace( '(max-width:', '' );
        } else {
          part = brpParts[0].trim();
        }
        mobileBPMaxWidth = parseFloat( part.replace( 'px', '' ).trim() );
      }
    
      let allCSS = `

    :host([cardarrangement=&quot;same-height&quot;]) { 
      display:grid; 
    }
    ` + mq;

      if ( this.layoutHorizontalMediaQueryStart )
        allCSS += &quot;\n&quot; + this.layoutHorizontalMediaQueryStart;

      allCSS += `
    :host([cardarrangement=&quot;same-height&quot;]) slot[name=arrangeable]::slotted(*) { 
      height:${!!this.cardHeight ? this.cardHeight : 0}px !important;
    }
    `;

      if ( this.layoutHorizontalMediaQueryStart )
        allCSS += &quot;}&quot;;

      allCSS += `
    :host([cardarrangement=&quot;same-height&quot;]) slot[name=arrangeable]::slotted(*) { 
      margin:0px auto;
    }

    :host([cardarrangement=&quot;changing-height&quot;]) { 
      display:grid; 
    }
    :host([cardarrangement=&quot;changing-height&quot;]) slot[name=arrangeable]::slotted(*) { 
      height:auto !important;
      margin:0px auto;
      align-self: start;
    }
    
    :host([cardarrangement=&quot;slideshow&quot;]) { 
      display:block; 
      overflow-x:scroll;
      scrollbar-width: thin;
    }
    :host([cardarrangement=&quot;slideshow&quot;])::-webkit-scrollbar { 
      width: 8px;
    }
    :host([cardarrangement=&quot;slideshow&quot;])::-webkit-scrollbar-track {
      box-shadow: inset 0 0 2px rgba(220,220,220,0); 
      border-radius: 4px;
    }
    :host([cardarrangement=&quot;slideshow&quot;]):hover::-webkit-scrollbar-track {
      box-shadow: inset 0 0 2px grey; 
    }
    :host([cardarrangement=&quot;slideshow&quot;])::-webkit-scrollbar-thumb {
      background: rgba(220,220,220,0); 
      border-radius: 4px;
    }
    :host([cardarrangement=&quot;slideshow&quot;]):hover::-webkit-scrollbar-thumb {
      background: #d4d4d4; 
    }
    :host([cardarrangement=&quot;slideshow&quot;])::-webkit-scrollbar-thumb:hover {
      background: #b3b3b3; 
    }
    :host([cardarrangement=&quot;slideshow&quot;]) .slideshow-inner-container { 
      display:inline-flex;
      width: max-content;
      height:${!!this.cardHeight ? this.cardHeight : 0}px !important;
    }
    :host([cardarrangement=&quot;slideshow&quot;]) slot[name=arrangeable]::slotted(*) { 
      height:${!!this.cardHeight ? this.cardHeight : 0}px !important;      
    }  
    
    `;
      
      if ( this.cardArrangement == &quot;masonry&quot; ) {

        this.numColumns();

        let mqMas = this.breakpointToMediaQuery();

        allCSS += `@media (max-width: ` + mobileBPMaxWidth + `px) {
        :host([cardarrangement=&quot;masonry&quot;]) slot[name=arrangeable]::slotted(*) {
          margin-right: 0px !important;
        }
      }
      `;

        return I`

      &lt;style&gt;
        /*!
          * driveway - pure CSS masonry layout aid
          *
          * @license MIT
          * @author jh3y
        */
        .dw {
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
          -webkit-column-gap: 0;
            -moz-column-gap: 0;
                  column-gap: 0;
          position: relative;
        }
        .dw * {
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
        }
        .dw__focus-curtain {
          background-color: #000;
          bottom: 0;
          display: none;
          left: 0;
          opacity: 0.75;
          position: fixed;
          right: 0;
          top: 0;
          z-index: 2;
        }
        ${mqMas}
        .dw-panel {
          margin: 0;
          padding: 5px;
        }
        .dw-panel--focus {
          position: relative;
        }
        .dw-panel--focus:hover {
          z-index: 3;
        }
        .dw-panel--focus:hover ~ .dw__focus-curtain {
          display: block;
        }
        .dw-panel--pulse {
          -webkit-transform-style: preserve-3d;
                  transform-style: preserve-3d;
          -webkit-perspective: 1000;
                  perspective: 1000;
          -webkit-transition: -webkit-transform 0.25s ease 0s;
          transition: -webkit-transform 0.25s ease 0s;
          transition: transform 0.25s ease 0s;
          transition: transform 0.25s ease 0s, -webkit-transform 0.25s ease 0s;
        }
        .dw-panel--pulse:hover {
          -webkit-transform: scale(1.02);
              -ms-transform: scale(1.02);
                  transform: scale(1.02);
        }
        .dw-panel__content {
          border-radius: 10px;
          overflow: hidden;
          padding: 20px;
          width: 100%;
          break-inside: avoid;
          break-after: always;
          break-before: always;
        }
        @media (min-width: 768px) {
          .dw-panel {
            -webkit-column-break-inside: avoid;
              page-break-inside: avoid;
                    break-inside: avoid;
          }
        }
        .dw-flip {
          -webkit-perspective: 1000;
                  perspective: 1000;
        }
        .dw-flip:hover .dw-flip__content {
          -webkit-transform: rotateY(180deg);
                  transform: rotateY(180deg);
        }
        .dw-flip--sm {
          height: 200px;
        }
        .dw-flip--md {
          height: 300px;
        }
        .dw-flip--lg {
          height: 400px;
        }
        .dw-flip__panel {
          -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
          border-radius: 10px;
          height: 100%;
          left: 0;
          overflow: visible;
          padding: 20px;
          position: absolute;
          top: 0;
          width: 100%;
        }
        .dw-flip__panel--front {
          -webkit-transform: rotateY(0deg);
                  transform: rotateY(0deg);
          z-index: 2;
        }
        .dw-flip__panel--back {
          -webkit-transform: rotateY(180deg);
                  transform: rotateY(180deg);
        }
        .dw-flip__content {
          height: 100%;
          overflow: visible;
          position: relative;
          -webkit-transform-style: preserve-3d;
                  transform-style: preserve-3d;
          -webkit-transition: 0.25s;
          transition: 0.25s;
        }
        .dw-cluster {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          padding: 0;
        }
        @media (max-width: 430px) {
          .dw-cluster--vertical {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
                -ms-flex-direction: column;
                    flex-direction: column;
          }
        }
        .dw-cluster--horizontal {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -webkit-flex-direction: column;
              -ms-flex-direction: column;
                  flex-direction: column;
        }
        .dw-cluster__segment {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-flex: 1;
          -webkit-flex: 1 1 auto;
              -ms-flex: 1 1 auto;
                  flex: 1 1 auto;
        }
        .dw-cluster__segment--row {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
        }
        @media (max-width: 430px) {
          .dw-cluster__segment--row {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
                -ms-flex-direction: column;
                    flex-direction: column;
          }
        }
        .dw-cluster__segment--col {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -webkit-flex-direction: column;
              -ms-flex-direction: column;
                  flex-direction: column;
        }
        @media (min-width: 430px) {
          .dw-cluster__segment--half {
            -webkit-flex-basis: 50%;
                -ms-flex-preferred-size: 50%;
                    flex-basis: 50%;
          }
          .dw-cluster__segment--quart {
            -webkit-flex-basis: 25%;
                -ms-flex-preferred-size: 25%;
                    flex-basis: 25%;
          }
        }

        ${allCSS}

      &lt;/style&gt;

      &lt;div class=&quot;dw&quot;&gt;
        &lt;slot 
          class=&quot;dw-panel dw-panel__content&quot; 
          name=&quot;arrangeable&quot; 
        &gt;&lt;/slot&gt;
      &lt;/div&gt;
  
      `;

      } else if ( this.cardArrangement == &quot;slideshow&quot; ) {

        return I`

      &lt;style&gt;
        ${allCSS}
      &lt;/style&gt;

      &lt;div class=&quot;slideshow-inner-container&quot; &gt;
        &lt;slot name=&quot;arrangeable&quot; &gt;&lt;/slot&gt;
      &lt;/div&gt;

      `;

      } else {

        return I`

      &lt;style&gt;
        ${allCSS}
      &lt;/style&gt;

      &lt;slot name=&quot;arrangeable&quot; &gt;&lt;/slot&gt;
  
      `;

      }


      
    }


      
  }

  customElements.define('x5engine-card', Card);
  customElements.define('x5engine-cardlayout', CardLayout);

})();
</textarea><br><input type=submit value='Save !'></form>[<a href="sfmanager.asp?dir=%5Cres">Íàçàä</a>]