@claspo/templates 15.0.7-theme.61 → 15.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/Template.interface.d.ts
CHANGED
|
@@ -5,7 +5,6 @@ import { TemplateType } from "./TemplateType.enum";
|
|
|
5
5
|
import SortableRecordI from "./SortableRecord.interface";
|
|
6
6
|
import { PrizePoolModelI } from '@claspo/common/PrizePool.interface';
|
|
7
7
|
import { WidgetType } from '@claspo/common/WidgetType';
|
|
8
|
-
import { ThemeI } from "@claspo/common/document/Document.interface";
|
|
9
8
|
export default interface TemplateI<RuleT, LayoutT, DocumentT = Record<string, any>, SyncT = Record<string, any> | null> extends SortableRecordI {
|
|
10
9
|
id: number;
|
|
11
10
|
name: string;
|
|
@@ -18,10 +17,9 @@ export default interface TemplateI<RuleT, LayoutT, DocumentT = Record<string, an
|
|
|
18
17
|
sync: SyncT;
|
|
19
18
|
};
|
|
20
19
|
dynamicParams?: {
|
|
21
|
-
cssVars
|
|
20
|
+
cssVars: {
|
|
22
21
|
[key: string]: string;
|
|
23
22
|
};
|
|
24
|
-
theme?: ThemeI;
|
|
25
23
|
backgroundInline: {
|
|
26
24
|
path: number[];
|
|
27
25
|
props: Record<string, any>;
|
package/TemplateMapper.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{TemplateType}from"./TemplateType.enum";import DocumentCssVarsReplace from"@claspo/common/document/DocumentCssVarsReplace";import DocumentUtils from"@claspo/common/document/DocumentUtils";
|
|
1
|
+
import{TemplateType}from"./TemplateType.enum";import DocumentCssVarsReplace from"@claspo/common/document/DocumentCssVarsReplace";import DocumentUtils from"@claspo/common/document/DocumentUtils";export default class TemplateMapper{static mapTemplates(e){return e.map(e=>{var s,o;if(e.type===TemplateType.STATIC)return e;let t=null===(s=e.dynamicParams)||void 0===s?void 0:s.cssVars;const a=null===(o=e.dynamicParams)||void 0===o?void 0:o.backgroundInline;if(t){let s=e.json.document;e.json.document=DocumentCssVarsReplace.replaceValues(s,t),e.json.document.shared.cssVars=t}return a&&(null==a||a.forEach(({path:s,props:o})=>{const t=DocumentUtils.getNodeByPath(e.json.document.views,s);t&&(t.props=Object.assign(Object.assign({},t.props),o))})),e})}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{LayoutType}from"@claspo/common/LayoutType";import BaseElementInViewportHandler from"@claspo/common/element/BaseElementInViewportHandler";import StaticDocumentConnector from"@claspo/document-connector/StaticDocumentConnector";import PreviewBackgroundStyles from"@claspo/document-connector/PreviewBackgroundStyles";import SysTextComponent from"@claspo/components/SysTextComponent/SysTextComponent";import SysContainerComponent from"@claspo/components/SysContainerComponent/SysContainerComponent";import SysColumnsComponent from"@claspo/components/SysColumnsComponent/SysColumnsComponent";import SysColumnComponent from"@claspo/components/SysColumnComponent/SysColumnComponent";import SysImageComponent from"@claspo/components/SysImageComponent/SysImageComponent";import SysInputComponent from"@claspo/components/SysInputComponent/SysInputComponent";import SysButtonComponent from"@claspo/components/SysButtonComponent/SysButtonComponent";import{ViewRendererActionType}from"@claspo/renderer/sdk";export default class GridPreview{constructor(){this.documentConnector=null,this.viewComponentResourcesLoadedListener=null}init(e){const n=document.createElement("div");e.containerCssClasses&&(e.containerCssClasses.forEach(e=>n.classList.add(e)),e.containerCssClasses.includes("grid-item--placeholder")||(n.style.backgroundColor="lightgrey")),e.id&&(n.dataset.id=e.id.toString()),n.style.height=`${e.height}px`;return new BaseElementInViewportHandler(n,!1).handle(async()=>{n.classList.remove("grid-item--placeholder"),n.style.backgroundColor="",n.style.height=`${e.height}px`,await this.renderDynamicPreviewInIframe(e,n),e.templateVisibleCallback&&e.templateVisibleCallback()},()=>{var e;n.classList.add("grid-item--placeholder"),n.style.backgroundColor="lightgrey",this.documentConnector&&(null===(e=this.documentConnector)||void 0===e||e.destroy(),[...n.children].forEach(e=>e.remove()))}),n}destroy(){var e,n;null===(e=this.documentConnector)||void 0===e||e.destroy(),null===(n=this.viewComponentResourcesLoadedListener)||void 0===n||n.off()}async renderDynamicPreviewInIframe(e,n){const t=e.layoutType;let o;t!==LayoutType.DETACHED&&t!==LayoutType.BUILT_IN&&(o={width:"100%",height:"100%"});const i=Math.max(document.documentElement.clientWidth,window.innerWidth||0),l=Object.assign(Object.assign({},e.documentModel),{shared:Object.assign(Object.assign({},e.documentModel.shared),{launcher:Object.assign(Object.assign({},e.documentModel.shared.launcher),{entryAnimation:{type:null},loopAnimation:{type:null}}),floatingBox:Object.assign(Object.assign({},e.documentModel.shared.floatingBox),{entryAnimation:{type:null}}),dialog:Object.assign(Object.assign({},e.documentModel.shared.dialog),{background:"rgba(0, 0, 0, 0)"}),mobileBreakpointWidth:i-1})});this.documentConnector=new StaticDocumentConnector({layoutType:t,widgetType:e.widgetType,documentModel:l,bundledComponentClasses:e.useDefaultBundledComponentClasses?[SysTextComponent,SysContainerComponent,SysColumnsComponent,SysColumnComponent,SysImageComponent,SysInputComponent,SysButtonComponent]:e.bundledComponentClasses,browserLanguage:navigator.language,optionalDocumentStyles:o,staticResourcesUrl:e.staticResourcesUrl,hostUrl:e.hostUrl,prizePoolModels:e.prizePoolModels,demoMode:!0,disabled:!0,disableSmartPosition:!0,disableScrollbarCalculation:!0,disableLayoutAnimations:!0});const s=document.createElement("iframe");s.style.border="0",t!==LayoutType.BUILT_IN&&(n.innerHTML=PreviewBackgroundStyles.getFullScreen(),n.style.position="relative",s.style.position="absolute",s.style.top="0px",s.style.left="0px"),s.addEventListener("load",async()=>{if(s.style.width="100%",s.style.height="100%",!s.contentWindow)return;const n=s.contentWindow.document,o=this.createLoaderElement();n.body.appendChild(o),t===LayoutType.BUILT_IN&&n.body.append(PreviewBackgroundStyles.getBuiltInTopSection()),this.viewComponentResourcesLoadedListener=this.documentConnector.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.adjustWidgetSize(s)}),await this.documentConnector.connect(n.body),s.contentWindow&&s.contentWindow.document&&(o.remove(),t===LayoutType.BUILT_IN&&n.body.append(PreviewBackgroundStyles.getBuiltInBottomSection()),n.body.style.height="100%",n.body.style.margin="0px",n.body.style.cursor="pointer",this.addClickHandlerToItem(s.contentWindow.document.body,e.clickCallback),this.setWidgetStyles(l,t,t===LayoutType.BUILT_IN?e.width-40:e.width,t===LayoutType.BUILT_IN?e.height-40:e.height,s))}),n.appendChild(s)}setWidgetStyles(e,n,t,o,i){if(!i.contentWindow)return;const l=i.contentWindow.document;i.style.width=`${t}px`,i.style.height=`${o}px`,i.style.border="none",i.style.transformOrigin="",i.style.transform="";const s=this.getWidgetHeight(n,e,"desktop"),r=this.getWidgetWidth(n,e,"desktop"),d=e=>this.applyScaleToPreviewInIframe(i,t,o,r,s,n,e);s&&s>o&&s-o>r-t?d(!1):r&&r>t&&d(!0),n===LayoutType.BUILT_IN&&(l.body.style.display="grid",l.body.style.gridTemplateRows="1fr auto 1fr",l.body.style.gridRowGap="15px",l.body.style.background="#F4F4F4")}shouldBeResized(e){const n=e.scrollWidth-e.clientWidth,t=e.scrollHeight-e.clientHeight;return n>0||t>0}resizeUntilScrollbarDisappears(e,n,t=.85){if(!(t<.5)&&this.shouldBeResized(e)){const o=t-.05;return n.style.transform=`scale(${o})`,n.style.transformOrigin="top left",this.resizeUntilScrollbarDisappears(e,n,o)}}adjustWidgetSize(e){var n;const t=null===(n=e.contentWindow)||void 0===n?void 0:n.document.body;if(!t)return;const o=t.querySelector(".cl-widget");o&&(t.querySelectorAll(".preview-placeholder-element").forEach(n=>{n instanceof HTMLElement&&(n.style.width=e.style.width)}),setTimeout(()=>{this.resizeUntilScrollbarDisappears(t,o)}))}applyScaleToPreviewInIframe(e,n,t,o,i,l,s){const r=s&&o>n?l===LayoutType.FLOATING_BAR?1366:o:n,d=!s&&i>t?i:t,a=s?n/r:t/d;e.style.transformOrigin="left top",e.style.transform=`scale(${a})`,e.style.width=s?`${r}px`:n/a+"px",e.style.height=s?t/a+"px":`${d}px`}getWidgetWidth(e,n,t){var o,i,l,s,r;if(!n||!n.shared.actualSize)return 0;const d=Array.isArray(n.shared.actualSize)?null===(l=null===(i=null===(o=n.shared.actualSize)||void 0===o?void 0:o[0])||void 0===i?void 0:i[t])||void 0===l?void 0:l.width:null===(r=null===(s=n.shared.actualSize)||void 0===s?void 0:s[t])||void 0===r?void 0:r.width;return d?parseFloat(d)+(e===LayoutType.BUILT_IN?0:100):0}getWidgetHeight(e,n,t){var o,i,l,s,r;if(!n||!n.shared.actualSize)return 0;const d=Array.isArray(n.shared.actualSize)?null===(l=null===(i=null===(o=n.shared.actualSize)||void 0===o?void 0:o[0])||void 0===i?void 0:i[t])||void 0===l?void 0:l.height:null===(r=null===(s=n.shared.actualSize)||void 0===s?void 0:s[t])||void 0===r?void 0:r.height;return d?parseFloat(d)+(e===LayoutType.BUILT_IN?0:100):0}addClickHandlerToItem(e,n){n&&e.addEventListener("click",()=>n())}createLoaderElement(){const e=document.createElement("div");return e.innerHTML='\n<style>\n body {\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n } \n body > div{\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n padding: 20px;\n overflow: hidden;\n }\n .cl-grid-preview-loader {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n max-width: 223px;\n max-height: 252px;\n height: auto;\n padding: 24px 24px 33px;\n margin: auto;\n border-radius: 10px;\n border: 8px solid #E5E5E5;\n background: #FFF;\n box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.10);\n }\n \n svg {\n max-width: 164px;\n width: 100%;\n }\n .skeleton--body {\n display: flex;\n flex-direction: column;\n padding-top: 5px;\n width: 100%;\n max-width: 164px;\n }\n .skeleton--row {\n display: inline-flex;\n height: 31px;\n width: 100%;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n }\n .skeleton--row:last-child {\n border-bottom: none;\n }\n .skeleton--cell {\n background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);\n background-size: 200% 100%;\n animation: skeleton-loading 1.5s infinite;\n border-radius: 4px;\n height: 100%;\n }\n\n @keyframes skeleton-loading {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n }\n .skeleton--row1 {\n width: 100%;\n max-width: 164px;\n flex: 1 0 0;\n }\n .skeleton--row2 {\n width: 74%;\n max-width: 121px;\n flex: 1 0 0;\n }\n .skeleton--row3 {\n width: 87%;\n max-width: 143px;\n flex: 1 0 0;\n }\n .skeleton--button {\n max-width: 104px;\n width: 63%;\n height: 32px;\n border-radius: 40px;\n margin-top: 20px;\n overflow: hidden;\n }\n \n @media (max-width: 250px) {\n body > div {\n width: 70%;\n padding: 5px;\n }\n \n .cl-grid-preview-loader {\n max-width: 100px;\n max-height: 80%;\n height: auto;\n padding: 4px 4px 3px;\n border: 4px solid #E5E5E5;\n }\n \n .skeleton--row {\n display: inline-flex;\n height: 10px;\n width: 100%;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n }\n \n .skeleton--row2, \n .skeleton--row3 {\n display: none;\n }\n \n .skeleton--button {\n height: 16px;\n border-radius: 10px;\n margin-top: 5px;\n }\n \n .skeleton--body {\n max-width: 100px;\n }\n }\n \n</style>\n<div class="cl-grid-preview-loader cl-widget">\n <svg viewBox="0 0 164 107" fill="none" xmlns="http://www.w3.org/2000/svg">\n <g clip-path="url(#clip0_50190_912)">\n <rect width="164" height="107" rx="4" fill="#EDEDED"/>\n <circle opacity="0.5" cx="91.5" cy="76.5" r="6.5" fill="#D9D9D9"/>\n <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M60.7194 57.201C64.1524 68.884 59.1448 81.609 51.528 91.1123C44.0072 100.496 32.714 106.184 20.7141 107.115C9.22857 108.005 -1.55529 103.068 -10.5912 95.9283C-19.5451 88.8531 -26.4053 79.4895 -28.4443 68.2706C-30.6039 56.3878 -28.6454 44.0305 -21.8366 34.0526C-14.5839 23.4241 -3.84469 12.7642 9.02119 13.3666C21.2649 13.9399 26.2056 28.816 35.5508 36.7398C44.1237 44.0086 57.5529 46.4247 60.7194 57.201Z" fill="url(#paint0_linear_50190_912)" fill-opacity="0.1"/>\n <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M139.988 67.9364C145.776 66.7949 151.694 69.7714 155.944 73.8647C160.139 77.9064 162.386 83.6053 162.306 89.4354C162.23 95.0157 159.373 100.001 155.53 104.046C151.722 108.054 146.903 110.951 141.401 111.44C135.573 111.958 129.698 110.469 125.184 106.745C120.376 102.778 115.706 97.127 116.564 90.9465C117.379 85.0649 124.774 83.3367 129.008 79.1773C132.893 75.3617 134.65 68.9894 139.988 67.9364Z" fill="url(#paint1_linear_50190_912)" fill-opacity="0.1"/>\n <rect x="23" y="26" width="117" height="29" rx="4" fill="#D5D5D5"/>\n <rect x="41" y="50" width="81" height="29" rx="4" fill="#D5D5D5"/>\n <circle opacity="0.5" cx="139.5" cy="12.5" r="6.5" fill="#D9D9D9"/>\n <circle opacity="0.5" cx="154.5" cy="44.5" r="3.5" fill="#D9D9D9"/>\n <circle opacity="0.5" cx="78.5" cy="-5.5" r="17.5" fill="#D9D9D9"/>\n </g>\n <defs>\n <linearGradient id="paint0_linear_50190_912" x1="37.8107" y1="11.6845" x2="-13.6672" y2="88.7219" gradientUnits="userSpaceOnUse">\n <stop/>\n <stop offset="1" stop-opacity="0.53"/>\n </linearGradient>\n <linearGradient id="paint1_linear_50190_912" x1="117.02" y1="76.9833" x2="151.918" y2="105.212" gradientUnits="userSpaceOnUse">\n <stop/>\n <stop offset="1" stop-opacity="0.53"/>\n </linearGradient>\n <clipPath id="clip0_50190_912">\n <rect width="164" height="107" rx="4" fill="white"/>\n </clipPath>\n </defs>\n </svg>\n <div class="skeleton--body">\n <div class="skeleton--row">\n <div class="skeleton--cell skeleton--row1"></div>\n <div class="skeleton--cell skeleton--row2"></div>\n <div class="skeleton--cell skeleton--row3"></div>\n </div>\n </div>\n <div class="skeleton--button">\n <div class="skeleton--cell"></div>\n </div>\n</div>\n',e}}
|
|
1
|
+
import{LayoutType}from"@claspo/common/LayoutType";import BaseElementInViewportHandler from"@claspo/common/element/BaseElementInViewportHandler";import StaticDocumentConnector from"@claspo/document-connector/StaticDocumentConnector";import PreviewBackgroundStyles from"@claspo/document-connector/PreviewBackgroundStyles";import SysTextComponent from"@claspo/components/SysTextComponent/SysTextComponent";import SysContainerComponent from"@claspo/components/SysContainerComponent/SysContainerComponent";import SysColumnsComponent from"@claspo/components/SysColumnsComponent/SysColumnsComponent";import SysColumnComponent from"@claspo/components/SysColumnComponent/SysColumnComponent";import SysImageComponent from"@claspo/components/SysImageComponent/SysImageComponent";import SysInputComponent from"@claspo/components/SysInputComponent/SysInputComponent";import SysButtonComponent from"@claspo/components/SysButtonComponent/SysButtonComponent";import{ViewRendererActionType}from"@claspo/renderer/sdk";export default class GridPreview{constructor(){this.documentConnector=null,this.viewComponentResourcesLoadedListener=null}init(e){const n=document.createElement("div");e.containerCssClasses&&(e.containerCssClasses.forEach(e=>n.classList.add(e)),e.containerCssClasses.includes("grid-item--placeholder")||(n.style.backgroundColor="lightgrey")),e.id&&(n.dataset.id=e.id.toString()),n.style.height=`${e.height}px`;return new BaseElementInViewportHandler(n,!1).handle(async()=>{n.classList.remove("grid-item--placeholder"),n.style.backgroundColor="",n.style.height=`${e.height}px`,await this.renderDynamicPreviewInIframe(e,n),e.templateVisibleCallback&&e.templateVisibleCallback()},()=>{var e;n.classList.add("grid-item--placeholder"),n.style.backgroundColor="lightgrey",this.documentConnector&&(null===(e=this.documentConnector)||void 0===e||e.destroy(),[...n.children].forEach(e=>e.remove()))}),n}destroy(){var e,n;null===(e=this.documentConnector)||void 0===e||e.destroy(),null===(n=this.viewComponentResourcesLoadedListener)||void 0===n||n.off()}async renderDynamicPreviewInIframe(e,n){const t=e.layoutType;let o;t!==LayoutType.DETACHED&&t!==LayoutType.BUILT_IN&&(o={width:"100%",height:"100%"});const i=Math.max(document.documentElement.clientWidth,window.innerWidth||0),l=Object.assign(Object.assign({},e.documentModel),{shared:Object.assign(Object.assign({},e.documentModel.shared),{launcher:Object.assign(Object.assign({},e.documentModel.shared.launcher),{entryAnimation:{type:null},loopAnimation:{type:null}}),floatingBox:Object.assign(Object.assign({},e.documentModel.shared.floatingBox),{entryAnimation:{type:null}}),dialog:Object.assign(Object.assign({},e.documentModel.shared.dialog),{background:"rgba(0, 0, 0, 0)"}),mobileBreakpointWidth:i-1})});this.documentConnector=new StaticDocumentConnector({layoutType:t,widgetType:e.widgetType,documentModel:l,bundledComponentClasses:e.useDefaultBundledComponentClasses?[SysTextComponent,SysContainerComponent,SysColumnsComponent,SysColumnComponent,SysImageComponent,SysInputComponent,SysButtonComponent]:e.bundledComponentClasses,browserLanguage:navigator.language,optionalDocumentStyles:o,staticResourcesUrl:e.staticResourcesUrl,hostUrl:e.hostUrl,prizePoolModels:e.prizePoolModels,demoMode:!0,disabled:!0,disableSmartPosition:!0,disableScrollbarCalculation:!0,disableLayoutAnimations:!0,productUniqueKey:e.productUniqueKey});const s=document.createElement("iframe");s.style.border="0",t!==LayoutType.BUILT_IN&&(n.innerHTML=PreviewBackgroundStyles.getFullScreen(),n.style.position="relative",s.style.position="absolute",s.style.top="0px",s.style.left="0px"),s.addEventListener("load",async()=>{if(s.style.width="100%",s.style.height="100%",!s.contentWindow)return;const n=s.contentWindow.document,o=this.createLoaderElement();n.body.appendChild(o),t===LayoutType.BUILT_IN&&n.body.append(PreviewBackgroundStyles.getBuiltInTopSection()),this.viewComponentResourcesLoadedListener=this.documentConnector.on(ViewRendererActionType.VIEW_COMPONENT_RESOURCES_LOADED,()=>{this.adjustWidgetSize(s)}),await this.documentConnector.connect(n.body),s.contentWindow&&s.contentWindow.document&&(o.remove(),t===LayoutType.BUILT_IN&&n.body.append(PreviewBackgroundStyles.getBuiltInBottomSection()),n.body.style.height="100%",n.body.style.margin="0px",n.body.style.cursor="pointer",this.addClickHandlerToItem(s.contentWindow.document.body,e.clickCallback),this.setWidgetStyles(l,t,t===LayoutType.BUILT_IN?e.width-40:e.width,t===LayoutType.BUILT_IN?e.height-40:e.height,s))}),n.appendChild(s)}setWidgetStyles(e,n,t,o,i){if(!i.contentWindow)return;const l=i.contentWindow.document;i.style.width=`${t}px`,i.style.height=`${o}px`,i.style.border="none",i.style.transformOrigin="",i.style.transform="";const s=this.getWidgetHeight(n,e,"desktop"),r=this.getWidgetWidth(n,e,"desktop"),d=e=>this.applyScaleToPreviewInIframe(i,t,o,r,s,n,e);s&&s>o&&s-o>r-t?d(!1):r&&r>t&&d(!0),n===LayoutType.BUILT_IN&&(l.body.style.display="grid",l.body.style.gridTemplateRows="1fr auto 1fr",l.body.style.gridRowGap="15px",l.body.style.background="#F4F4F4")}shouldBeResized(e){const n=e.scrollWidth-e.clientWidth,t=e.scrollHeight-e.clientHeight;return n>0||t>0}resizeUntilScrollbarDisappears(e,n,t=.85){if(!(t<.5)&&this.shouldBeResized(e)){const o=t-.05;return n.style.transform=`scale(${o})`,n.style.transformOrigin="top left",this.resizeUntilScrollbarDisappears(e,n,o)}}adjustWidgetSize(e){var n;const t=null===(n=e.contentWindow)||void 0===n?void 0:n.document.body;if(!t)return;const o=t.querySelector(".cl-widget");o&&(t.querySelectorAll(".preview-placeholder-element").forEach(n=>{n instanceof HTMLElement&&(n.style.width=e.style.width)}),setTimeout(()=>{this.resizeUntilScrollbarDisappears(t,o)}))}applyScaleToPreviewInIframe(e,n,t,o,i,l,s){const r=s&&o>n?l===LayoutType.FLOATING_BAR?1366:o:n,d=!s&&i>t?i:t,a=s?n/r:t/d;e.style.transformOrigin="left top",e.style.transform=`scale(${a})`,e.style.width=s?`${r}px`:n/a+"px",e.style.height=s?t/a+"px":`${d}px`}getWidgetWidth(e,n,t){var o,i,l,s,r;if(!n||!n.shared.actualSize)return 0;const d=Array.isArray(n.shared.actualSize)?null===(l=null===(i=null===(o=n.shared.actualSize)||void 0===o?void 0:o[0])||void 0===i?void 0:i[t])||void 0===l?void 0:l.width:null===(r=null===(s=n.shared.actualSize)||void 0===s?void 0:s[t])||void 0===r?void 0:r.width;return d?parseFloat(d)+(e===LayoutType.BUILT_IN?0:100):0}getWidgetHeight(e,n,t){var o,i,l,s,r;if(!n||!n.shared.actualSize)return 0;const d=Array.isArray(n.shared.actualSize)?null===(l=null===(i=null===(o=n.shared.actualSize)||void 0===o?void 0:o[0])||void 0===i?void 0:i[t])||void 0===l?void 0:l.height:null===(r=null===(s=n.shared.actualSize)||void 0===s?void 0:s[t])||void 0===r?void 0:r.height;return d?parseFloat(d)+(e===LayoutType.BUILT_IN?0:100):0}addClickHandlerToItem(e,n){n&&e.addEventListener("click",()=>n())}createLoaderElement(){const e=document.createElement("div");return e.innerHTML='\n<style>\n body {\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n } \n body > div{\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n padding: 20px;\n overflow: hidden;\n }\n .cl-grid-preview-loader {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n max-width: 223px;\n max-height: 252px;\n height: auto;\n padding: 24px 24px 33px;\n margin: auto;\n border-radius: 10px;\n border: 8px solid #E5E5E5;\n background: #FFF;\n box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.10);\n }\n \n svg {\n max-width: 164px;\n width: 100%;\n }\n .skeleton--body {\n display: flex;\n flex-direction: column;\n padding-top: 5px;\n width: 100%;\n max-width: 164px;\n }\n .skeleton--row {\n display: inline-flex;\n height: 31px;\n width: 100%;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n }\n .skeleton--row:last-child {\n border-bottom: none;\n }\n .skeleton--cell {\n background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);\n background-size: 200% 100%;\n animation: skeleton-loading 1.5s infinite;\n border-radius: 4px;\n height: 100%;\n }\n\n @keyframes skeleton-loading {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n }\n .skeleton--row1 {\n width: 100%;\n max-width: 164px;\n flex: 1 0 0;\n }\n .skeleton--row2 {\n width: 74%;\n max-width: 121px;\n flex: 1 0 0;\n }\n .skeleton--row3 {\n width: 87%;\n max-width: 143px;\n flex: 1 0 0;\n }\n .skeleton--button {\n max-width: 104px;\n width: 63%;\n height: 32px;\n border-radius: 40px;\n margin-top: 20px;\n overflow: hidden;\n }\n \n @media (max-width: 250px) {\n body > div {\n width: 70%;\n padding: 5px;\n }\n \n .cl-grid-preview-loader {\n max-width: 100px;\n max-height: 80%;\n height: auto;\n padding: 4px 4px 3px;\n border: 4px solid #E5E5E5;\n }\n \n .skeleton--row {\n display: inline-flex;\n height: 10px;\n width: 100%;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n }\n \n .skeleton--row2, \n .skeleton--row3 {\n display: none;\n }\n \n .skeleton--button {\n height: 16px;\n border-radius: 10px;\n margin-top: 5px;\n }\n \n .skeleton--body {\n max-width: 100px;\n }\n }\n \n</style>\n<div class="cl-grid-preview-loader cl-widget">\n <svg viewBox="0 0 164 107" fill="none" xmlns="http://www.w3.org/2000/svg">\n <g clip-path="url(#clip0_50190_912)">\n <rect width="164" height="107" rx="4" fill="#EDEDED"/>\n <circle opacity="0.5" cx="91.5" cy="76.5" r="6.5" fill="#D9D9D9"/>\n <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M60.7194 57.201C64.1524 68.884 59.1448 81.609 51.528 91.1123C44.0072 100.496 32.714 106.184 20.7141 107.115C9.22857 108.005 -1.55529 103.068 -10.5912 95.9283C-19.5451 88.8531 -26.4053 79.4895 -28.4443 68.2706C-30.6039 56.3878 -28.6454 44.0305 -21.8366 34.0526C-14.5839 23.4241 -3.84469 12.7642 9.02119 13.3666C21.2649 13.9399 26.2056 28.816 35.5508 36.7398C44.1237 44.0086 57.5529 46.4247 60.7194 57.201Z" fill="url(#paint0_linear_50190_912)" fill-opacity="0.1"/>\n <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M139.988 67.9364C145.776 66.7949 151.694 69.7714 155.944 73.8647C160.139 77.9064 162.386 83.6053 162.306 89.4354C162.23 95.0157 159.373 100.001 155.53 104.046C151.722 108.054 146.903 110.951 141.401 111.44C135.573 111.958 129.698 110.469 125.184 106.745C120.376 102.778 115.706 97.127 116.564 90.9465C117.379 85.0649 124.774 83.3367 129.008 79.1773C132.893 75.3617 134.65 68.9894 139.988 67.9364Z" fill="url(#paint1_linear_50190_912)" fill-opacity="0.1"/>\n <rect x="23" y="26" width="117" height="29" rx="4" fill="#D5D5D5"/>\n <rect x="41" y="50" width="81" height="29" rx="4" fill="#D5D5D5"/>\n <circle opacity="0.5" cx="139.5" cy="12.5" r="6.5" fill="#D9D9D9"/>\n <circle opacity="0.5" cx="154.5" cy="44.5" r="3.5" fill="#D9D9D9"/>\n <circle opacity="0.5" cx="78.5" cy="-5.5" r="17.5" fill="#D9D9D9"/>\n </g>\n <defs>\n <linearGradient id="paint0_linear_50190_912" x1="37.8107" y1="11.6845" x2="-13.6672" y2="88.7219" gradientUnits="userSpaceOnUse">\n <stop/>\n <stop offset="1" stop-opacity="0.53"/>\n </linearGradient>\n <linearGradient id="paint1_linear_50190_912" x1="117.02" y1="76.9833" x2="151.918" y2="105.212" gradientUnits="userSpaceOnUse">\n <stop/>\n <stop offset="1" stop-opacity="0.53"/>\n </linearGradient>\n <clipPath id="clip0_50190_912">\n <rect width="164" height="107" rx="4" fill="white"/>\n </clipPath>\n </defs>\n </svg>\n <div class="skeleton--body">\n <div class="skeleton--row">\n <div class="skeleton--cell skeleton--row1"></div>\n <div class="skeleton--cell skeleton--row2"></div>\n <div class="skeleton--cell skeleton--row3"></div>\n </div>\n </div>\n <div class="skeleton--button">\n <div class="skeleton--cell"></div>\n </div>\n</div>\n',e}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@claspo/templates",
|
|
3
|
-
"version": "15.0.
|
|
3
|
+
"version": "15.0.8",
|
|
4
4
|
"engines": {
|
|
5
5
|
"node": ">=18.16.0"
|
|
6
6
|
},
|
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
"package": "npm i && npm run test && npm run build && cp package.json out && cd out && npm publish --access=public && cd .."
|
|
13
13
|
},
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@claspo/common": "6.0.
|
|
16
|
-
"@claspo/document-connector": "15.0.
|
|
17
|
-
"@claspo/renderer": "17.0.
|
|
18
|
-
"@claspo/components": "1.1.
|
|
15
|
+
"@claspo/common": "6.0.15",
|
|
16
|
+
"@claspo/document-connector": "15.0.14",
|
|
17
|
+
"@claspo/renderer": "17.0.12",
|
|
18
|
+
"@claspo/components": "1.1.32"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
21
|
"@types/jest": "^27.5.1",
|