@claspo/templates 14.5.0-theme.13 → 15.0.0

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.
Files changed (15) hide show
  1. package/HttpDebugTemplateLoader.d.ts +1 -1
  2. package/HttpDebugTemplateLoader.js +1 -1
  3. package/HttpTemplateLoader.d.ts +1 -1
  4. package/PubSub.interface.d.ts +2 -2
  5. package/Template.interface.d.ts +11 -10
  6. package/TemplateDatasource.d.ts +2 -2
  7. package/TemplateMapper.js +1 -1
  8. package/data/strategies/width-based-strategy/width-first-algorithm/generateRandomValue.d.ts +1 -1
  9. package/dialog/ClDialogSliderComponent.d.ts +3 -3
  10. package/dialog/ClDialogSliderComponent.js +1 -1
  11. package/filter/TemplateFilterDatasource.d.ts +1 -1
  12. package/grid-preview/GridPreview.js +1 -1
  13. package/grid-preview/GridPreviewInit.interface.d.ts +5 -3
  14. package/helpers.d.ts +4 -16
  15. package/package.json +5 -5
package/HttpDebugTemplateLoader.d.ts CHANGED
@@ -2,7 +2,7 @@ import HttpAbortableLoader from '@claspo/common/HttpAbortableLoader';
2
2
  import TemplateBriefI from "./TemplateBrief.interface";
3
3
  export default class HttpDebugTemplateLoader extends HttpAbortableLoader {
4
4
  private list;
5
- constructor(url: string, headers?: object);
5
+ constructor(url: string, headers?: Record<string, string>);
6
6
  load(): Promise<TemplateBriefI[]>;
7
7
  static getDebugTemplateIds(): number[];
8
8
  }
package/HttpDebugTemplateLoader.js CHANGED
@@ -1 +1 @@
1
- import HttpAbortableLoader from"@claspo/common/HttpAbortableLoader";import HttpClient from"@claspo/common/network/HttpClient";export default class HttpDebugTemplateLoader extends HttpAbortableLoader{constructor(t,e={}){super(t,e,HttpClient),this.list=[]}async load(){return(await Promise.all(HttpDebugTemplateLoader.getDebugTemplateIds().map(t=>HttpClient.execute(`${this.url}/${t}`,"GET",null,null,this.abortController).then(t=>t.ok?t.json():null).catch(()=>null)))).filter(t=>null!==t)}static getDebugTemplateIds(){let t=[];try{const e=localStorage.getItem("clDebugTemplateIds");return e&&(t=e.split(",").map(t=>+t.trim()).filter(t=>!isNaN(t))),t}catch(e){return t}}}
1
+ import HttpAbortableLoader from"@claspo/common/HttpAbortableLoader";import HttpClient from"@claspo/common/network/HttpClient";export default class HttpDebugTemplateLoader extends HttpAbortableLoader{constructor(t,e={}){super(t,e,HttpClient),this.list=[]}async load(){return(await Promise.all(HttpDebugTemplateLoader.getDebugTemplateIds().map(t=>{var e;return HttpClient.execute(`${this.url}/${t}`,"GET",void 0,void 0,null===(e=this.abortController)||void 0===e?void 0:e.signal).then(t=>t.ok?t.json():null).catch(()=>null)}))).filter(t=>null!==t)}static getDebugTemplateIds(){let t=[];try{const e=localStorage.getItem("clDebugTemplateIds");return e&&(t=e.split(",").map(t=>+t.trim()).filter(t=>!isNaN(t))),t}catch(e){return t}}}
package/HttpTemplateLoader.d.ts CHANGED
@@ -2,6 +2,6 @@ import HttpAbortableLoader from '@claspo/common/HttpAbortableLoader';
2
2
  import TemplateBriefI from "./TemplateBrief.interface";
3
3
  export default class HttpTemplateLoader extends HttpAbortableLoader {
4
4
  private list;
5
- constructor(url: string, headers?: object);
5
+ constructor(url: string, headers?: Record<string, string>);
6
6
  load(): Promise<TemplateBriefI[]>;
7
7
  }
package/PubSub.interface.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export default interface PubSubI {
2
- publish: (eventName: string, payload: any) => {};
3
- subscribe: (eventName: string, subscription: (payload: any) => void) => number;
2
+ publish: (eventName: string, payload: unknown) => void;
3
+ subscribe: (eventName: string, subscription: (payload: unknown) => void) => number;
4
4
  unsubscribe: (subscriptionId: number) => void;
5
5
  }
package/Template.interface.d.ts CHANGED
@@ -4,28 +4,29 @@ import TemplateLauncherItemI from "./TemplateLauncherItem.interface";
4
4
  import { TemplateType } from "./TemplateType.enum";
5
5
  import SortableRecordI from "./SortableRecord.interface";
6
6
  import { WidgetType } from './WidgetType.enum';
7
- export default interface TemplateI<ruleType, layoutType, documentType = any, syncType = any> extends SortableRecordI {
7
+ import { PrizePoolModelI } from '@claspo/common/PrizePool.interface';
8
+ export default interface TemplateI<RuleT, LayoutT, DocumentT = Record<string, any>, SyncT = Record<string, any> | null> extends SortableRecordI {
8
9
  id: number;
9
10
  name: string;
10
11
  publishStatus: TemplatePublishStatus;
11
- rules: ruleType;
12
+ rules: RuleT;
12
13
  widgetType: WidgetType;
13
14
  type: TemplateType;
14
15
  json: {
15
- document: documentType;
16
- sync: syncType;
16
+ document: DocumentT;
17
+ sync: SyncT;
17
18
  };
18
19
  dynamicParams?: {
20
+ cssVars: {
21
+ [key: string]: string;
22
+ };
19
23
  backgroundInline: {
20
24
  path: number[];
21
- props: object;
25
+ props: Record<string, any>;
22
26
  }[];
23
- theme: {
24
- schema: Record<string, string>;
25
- };
26
27
  };
27
28
  launchers: TemplateLauncherItemI[];
28
- layouts: layoutType[];
29
+ layouts: LayoutT[];
29
30
  useCases: string[];
30
31
  industry: string[];
31
32
  themes: string[];
@@ -33,6 +34,6 @@ export default interface TemplateI<ruleType, layoutType, documentType = any, syn
33
34
  imagePreviews: string[];
34
35
  createdDate?: string;
35
36
  updatedDate?: string;
36
- prizePools?: any[];
37
+ prizePools?: PrizePoolModelI[];
37
38
  size?: TemplateSizeI;
38
39
  }
package/TemplateDatasource.d.ts CHANGED
@@ -31,8 +31,8 @@ export default class TemplateDatasource extends TemplateDatasource_base implemen
31
31
  onNext(cb: (payload: DataFetched) => void): Subscription;
32
32
  getItems(): TemplateBriefI[];
33
33
  getRawItems(): TemplateBriefI[];
34
- publish(eventName: string, payload: any): void;
35
- subscribe(eventName: EVENTS, subscription: (payload: any) => void): Subscription;
34
+ publish(eventName: string, payload: DataFetched): void;
35
+ subscribe(eventName: EVENTS, subscription: (payload: DataFetched) => void): Subscription;
36
36
  destroy(): void;
37
37
  findByIdRawItems(id: number): TemplateBriefI | undefined;
38
38
  private computeData;
package/TemplateMapper.js CHANGED
@@ -1 +1 @@
1
- import{TemplateType}from"./TemplateType.enum";import DocumentUtils from"@claspo/common/document/DocumentUtils";export default class TemplateMapper{static mapTemplates(e){return e.map(e=>{var t,o;if(e.type===TemplateType.STATIC)return e;if(null===(t=e.dynamicParams)||void 0===t?void 0:t.theme){const t=e.json.document;let o=JSON.stringify(t);const a=e.dynamicParams.theme.schema;Object.keys(a).forEach(e=>{let t=a[e],n=`var(--cl-schema-${e})`;o=o.split(t).join(n)}),e.json.document=JSON.parse(o),e.json.document.shared||(e.json.document.shared={}),e.json.document.shared.theme=e.dynamicParams.theme}const a=null===(o=e.dynamicParams)||void 0===o?void 0:o.backgroundInline;return a&&(null==a||a.forEach(({path:t,props:o})=>{const a=DocumentUtils.getNodeByPath(e.json.document.views,t);a.props=Object.assign(Object.assign({},a.props),o)})),e})}}
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})}}
package/data/strategies/width-based-strategy/width-first-algorithm/generateRandomValue.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const generateRandomValue: (min: any, max: any) => any;
1
+ declare const generateRandomValue: (min: number, max: number) => number;
2
2
  export default generateRandomValue;
package/dialog/ClDialogSliderComponent.d.ts CHANGED
@@ -28,8 +28,8 @@ declare class ClDialogSliderComponent extends HTMLElement implements ClDialogSli
28
28
  close(): void;
29
29
  attributeChangedCallback(): void;
30
30
  disconnectedCallback(): void;
31
- _upgradeProperty(prop: any): void;
32
- keyboardListenerCallback(event: any): void;
33
- _dispatchEvent(eventType: any): void;
31
+ _upgradeProperty(prop: string): void;
32
+ keyboardListenerCallback(event: KeyboardEvent): void;
33
+ _dispatchEvent(eventType: string): void;
34
34
  }
35
35
  export default ClDialogSliderComponent;
package/dialog/ClDialogSliderComponent.js CHANGED
@@ -1 +1 @@
1
- var SliderEvents;!function(e){e.getPrev="getPrev",e.getNext="getNext"}(SliderEvents||(SliderEvents={}));class ClDialogSliderComponent extends HTMLElement{static get observedAttributes(){return[]}constructor(){var e,n,l,i;super();const t=this.attachShadow({mode:"open"}),o=document.createElement("div");o.insertAdjacentHTML("beforeend",ClDialogSliderComponent.template),t.appendChild(o),this.dialogContainerElement=t.querySelector(ClDialogSliderComponent.dialogSelector),this.dialogLeftArrowElement=t.querySelector(ClDialogSliderComponent.dialogLeftArrowSelector),this.dialogRightArrowElement=t.querySelector(ClDialogSliderComponent.dialogRightArrowSelector),this.dialogCloseIconElement=t.querySelector(ClDialogSliderComponent.dialogCloseIconSelector),this.currentOverflowValue=document.body.style.overflow,null===(e=this.dialogCloseIconElement)||void 0===e||e.addEventListener("click",()=>{this.close()}),null===(n=this.dialogLeftArrowElement)||void 0===n||n.addEventListener("click",()=>{this._dispatchEvent(SliderEvents.getPrev)}),null===(l=this.dialogRightArrowElement)||void 0===l||l.addEventListener("click",()=>{this._dispatchEvent(SliderEvents.getNext)}),null===(i=this.dialogContainerElement)||void 0===i||i.addEventListener("click",e=>{e.target===this.dialogContainerElement&&this.close()}),this._boundEscapeListener=this.keyboardListenerCallback.bind(this)}get disabledLeft(){var e;return null===(e=this.dialogLeftArrowElement)||void 0===e?void 0:e.hasAttribute("disabled")}set disabledLeft(e){var n,l;e?null===(n=this.dialogLeftArrowElement)||void 0===n||n.setAttribute("disabled",""):null===(l=this.dialogLeftArrowElement)||void 0===l||l.removeAttribute("disabled")}get disabledRight(){var e;return null===(e=this.dialogRightArrowElement)||void 0===e?void 0:e.hasAttribute("disabled")}set disabledRight(e){var n,l;e?null===(n=this.dialogRightArrowElement)||void 0===n||n.setAttribute("disabled",""):null===(l=this.dialogRightArrowElement)||void 0===l||l.removeAttribute("disabled")}get hideCloseBtn(){var e;return null===(e=this.dialogCloseIconElement)||void 0===e?void 0:e.classList.contains("cl-dialog-slider-close-icon--hidden")}set hideCloseBtn(e){var n,l;e?null===(n=this.dialogCloseIconElement)||void 0===n||n.classList.add("cl-dialog-slider-close-icon--hidden"):null===(l=this.dialogCloseIconElement)||void 0===l||l.classList.remove("cl-dialog-slider-close-icon--hidden")}open(){var e;document.body.style.overflow="hidden",this.setAttribute("open","true"),null===(e=this.dialogContainerElement)||void 0===e||e.classList.add("cl-dialog-slider-open");const n=this.querySelector("a,button,input");null==n||n.focus(),window.addEventListener("keyup",this._boundEscapeListener)}close(){var e;document.body.style.overflow=this.currentOverflowValue,this.removeAttribute("open"),null===(e=this.dialogContainerElement)||void 0===e||e.classList.remove("cl-dialog-slider-open"),this._dispatchEvent("closed"),window.removeEventListener("keyup",this._boundEscapeListener)}attributeChangedCallback(){}disconnectedCallback(){window.removeEventListener("keyup",this._boundEscapeListener)}_upgradeProperty(e){if(this.hasOwnProperty(e)){let n=this[e];delete this[e],this[e]=n}}keyboardListenerCallback(e){"Escape"===e.key?this.close():"ArrowLeft"===e.key?this._dispatchEvent(SliderEvents.getPrev):"ArrowRight"===e.key&&this._dispatchEvent(SliderEvents.getNext)}_dispatchEvent(e){this.dispatchEvent(new CustomEvent(e,{detail:{},bubbles:!0,composed:!0}))}}ClDialogSliderComponent.dialogSelector=".cl-dialog-slider",ClDialogSliderComponent.dialogContentSelector=".cl-dialog-slider-content",ClDialogSliderComponent.dialogCloseIconSelector=".cl-dialog-slider-close-icon",ClDialogSliderComponent.dialogLeftArrowSelector=".cl-dialog-slider-arrow-left",ClDialogSliderComponent.dialogRightArrowSelector=".cl-dialog-slider-arrow-right",ClDialogSliderComponent.template='\n<div class="cl-dialog-slider">\n <style>\n .cl-dialog-slider {\n z-index: -1;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n width: 0;\n height: 0;\n display: none;\n justify-content: center;\n align-items: center;\n background: rgba(0, 0, 0, 0.7);\n }\n\n .cl-dialog-slider-open {\n display: flex;\n width: 100%;\n height: 100%;\n z-index: 998;\n }\n\n .cl-dialog-slider-inner-content {\n position: relative;\n max-width: 100vw;\n background: #fff;\n }\n\n .cl-dialog-slider-close-icon {\n position: absolute;\n top: 30px;\n right: 50px;\n font-size: 9px;\n color: #000;\n opacity: .75;\n cursor: pointer;\n z-index: 99;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 44px;\n width: 44px;\n border-radius: 50%;\n }\n\n .cl-dialog-slider-close-icon:hover {\n opacity: 1;\n background-color: #e6e6e6;\n }\n\n .cl-dialog-slider-close-icon--hidden {\n display: none;\n }\n\n .cl-dialog-slider [cl-type="VIEW"] {\n max-height: calc(100vh - 170px);\n overflow-y: auto;\n overflow-x: hidden;\n }\n\n .cl-dialog-slider-arrow {\n display:flex;\n align-items:center;\n justify-content: center;\n height: 50px;\n width: 50px;\n border-radius: 25px;\n background: #FFFFFF;\n border: 2px solid #F3492C;\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.07);\n position: absolute;\n top: 325px;\n z-index: 999999999;\n cursor: pointer;\n }\n\n button.cl-dialog-slider-arrow[disabled] {\n border: 2px solid #e2dede;\n }\n button.cl-dialog-slider-arrow[disabled] svg path {\n fill: #e2dede;\n }\n\n .cl-dialog-slider-arrow:hover {\n background: #e6e6e6;\n }\n\n .cl-dialog-slider-arrow-left {\n left: 20px;\n }\n\n .cl-dialog-slider-arrow-right {\n right: 20px;\n }\n\n .cl-no-scroll {\n overflow: hidden;\n }\n </style>\n <button class="cl-dialog-slider-arrow cl-dialog-slider-arrow-left" disabled>\n <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M9 12L8.05719 11.0572L7.11438 12L8.05719 12.9428L9 12ZM14.0572 5.05719L8.05719 11.0572L9.94281 12.9428L15.9428 6.94281L14.0572 5.05719ZM8.05719 12.9428L14.0572 18.9428L15.9428 17.0572L9.94281 11.0572L8.05719 12.9428Z" fill="#5F5F5F"/>\n </svg>\n </button>\n\n\n <div class="cl-dialog-slider-inner-content">\n <div class="cl-dialog-slider-close-icon">\n <div class="cl-dialog-slider-close-icon-content"></div>\n <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M18 6L6 18M6 6L18 18" stroke="#2C2C2C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n </svg>\n </div>\n\n <div class="cl-dialog-slider-content">\n <slot></slot>\n</div>\n </div>\n\n <button class="cl-dialog-slider-arrow cl-dialog-slider-arrow-right">\n <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M15 12L15.9428 11.0572L16.8856 12L15.9428 12.9428L15 12ZM9.94281 5.05719L15.9428 11.0572L14.0572 12.9428L8.05719 6.94281L9.94281 5.05719ZM15.9428 12.9428L9.94281 18.9428L8.05719 17.0572L14.0572 11.0572L15.9428 12.9428Z" fill="#5F5F5F"/>\n </svg>\n </button>\n</div>\n',customElements.get("cl-dialog-slider")||customElements.define("cl-dialog-slider",ClDialogSliderComponent);export default ClDialogSliderComponent;
1
+ var SliderEvents;!function(e){e.getPrev="getPrev",e.getNext="getNext"}(SliderEvents||(SliderEvents={}));class ClDialogSliderComponent extends HTMLElement{static get observedAttributes(){return[]}constructor(){var e,n,l,i;super(),this._dynamicData=null;const t=this.attachShadow({mode:"open"}),o=document.createElement("div");o.insertAdjacentHTML("beforeend",ClDialogSliderComponent.template),t.appendChild(o),this.dialogContainerElement=t.querySelector(ClDialogSliderComponent.dialogSelector),this.dialogLeftArrowElement=t.querySelector(ClDialogSliderComponent.dialogLeftArrowSelector),this.dialogRightArrowElement=t.querySelector(ClDialogSliderComponent.dialogRightArrowSelector),this.dialogCloseIconElement=t.querySelector(ClDialogSliderComponent.dialogCloseIconSelector),this.currentOverflowValue=document.body.style.overflow,null===(e=this.dialogCloseIconElement)||void 0===e||e.addEventListener("click",()=>{this.close()}),null===(n=this.dialogLeftArrowElement)||void 0===n||n.addEventListener("click",()=>{this._dispatchEvent(SliderEvents.getPrev)}),null===(l=this.dialogRightArrowElement)||void 0===l||l.addEventListener("click",()=>{this._dispatchEvent(SliderEvents.getNext)}),null===(i=this.dialogContainerElement)||void 0===i||i.addEventListener("click",e=>{e.target===this.dialogContainerElement&&this.close()}),this._boundEscapeListener=this.keyboardListenerCallback.bind(this)}get disabledLeft(){var e;return null===(e=this.dialogLeftArrowElement)||void 0===e?void 0:e.hasAttribute("disabled")}set disabledLeft(e){var n,l;e?null===(n=this.dialogLeftArrowElement)||void 0===n||n.setAttribute("disabled",""):null===(l=this.dialogLeftArrowElement)||void 0===l||l.removeAttribute("disabled")}get disabledRight(){var e;return null===(e=this.dialogRightArrowElement)||void 0===e?void 0:e.hasAttribute("disabled")}set disabledRight(e){var n,l;e?null===(n=this.dialogRightArrowElement)||void 0===n||n.setAttribute("disabled",""):null===(l=this.dialogRightArrowElement)||void 0===l||l.removeAttribute("disabled")}get hideCloseBtn(){var e;return null===(e=this.dialogCloseIconElement)||void 0===e?void 0:e.classList.contains("cl-dialog-slider-close-icon--hidden")}set hideCloseBtn(e){var n,l;e?null===(n=this.dialogCloseIconElement)||void 0===n||n.classList.add("cl-dialog-slider-close-icon--hidden"):null===(l=this.dialogCloseIconElement)||void 0===l||l.classList.remove("cl-dialog-slider-close-icon--hidden")}open(){var e;document.body.style.overflow="hidden",this.setAttribute("open","true"),null===(e=this.dialogContainerElement)||void 0===e||e.classList.add("cl-dialog-slider-open");const n=this.querySelector("a,button,input");null==n||n.focus(),window.addEventListener("keyup",this._boundEscapeListener)}close(){var e;document.body.style.overflow=this.currentOverflowValue,this.removeAttribute("open"),null===(e=this.dialogContainerElement)||void 0===e||e.classList.remove("cl-dialog-slider-open"),this._dispatchEvent("closed"),window.removeEventListener("keyup",this._boundEscapeListener)}attributeChangedCallback(){}disconnectedCallback(){window.removeEventListener("keyup",this._boundEscapeListener)}_upgradeProperty(e){if(this.hasOwnProperty(e)){let n=this[e];delete this[e],this[e]=n}}keyboardListenerCallback(e){"Escape"===e.key?this.close():"ArrowLeft"===e.key?this._dispatchEvent(SliderEvents.getPrev):"ArrowRight"===e.key&&this._dispatchEvent(SliderEvents.getNext)}_dispatchEvent(e){this.dispatchEvent(new CustomEvent(e,{detail:{},bubbles:!0,composed:!0}))}}ClDialogSliderComponent.dialogSelector=".cl-dialog-slider",ClDialogSliderComponent.dialogContentSelector=".cl-dialog-slider-content",ClDialogSliderComponent.dialogCloseIconSelector=".cl-dialog-slider-close-icon",ClDialogSliderComponent.dialogLeftArrowSelector=".cl-dialog-slider-arrow-left",ClDialogSliderComponent.dialogRightArrowSelector=".cl-dialog-slider-arrow-right",ClDialogSliderComponent.template='\n<div class="cl-dialog-slider">\n <style>\n .cl-dialog-slider {\n z-index: -1;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n width: 0;\n height: 0;\n display: none;\n justify-content: center;\n align-items: center;\n background: rgba(0, 0, 0, 0.7);\n }\n\n .cl-dialog-slider-open {\n display: flex;\n width: 100%;\n height: 100%;\n z-index: 998;\n }\n\n .cl-dialog-slider-inner-content {\n position: relative;\n max-width: 100vw;\n background: #fff;\n }\n\n .cl-dialog-slider-close-icon {\n position: absolute;\n top: 30px;\n right: 50px;\n font-size: 9px;\n color: #000;\n opacity: .75;\n cursor: pointer;\n z-index: 99;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 44px;\n width: 44px;\n border-radius: 50%;\n }\n\n .cl-dialog-slider-close-icon:hover {\n opacity: 1;\n background-color: #e6e6e6;\n }\n\n .cl-dialog-slider-close-icon--hidden {\n display: none;\n }\n\n .cl-dialog-slider [cl-type="VIEW"] {\n max-height: calc(100vh - 170px);\n overflow-y: auto;\n overflow-x: hidden;\n }\n\n .cl-dialog-slider-arrow {\n display:flex;\n align-items:center;\n justify-content: center;\n height: 50px;\n width: 50px;\n border-radius: 25px;\n background: #FFFFFF;\n border: 2px solid #F3492C;\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(0, 0, 0, 0.07);\n position: absolute;\n top: 325px;\n z-index: 999999999;\n cursor: pointer;\n }\n\n button.cl-dialog-slider-arrow[disabled] {\n border: 2px solid #e2dede;\n }\n button.cl-dialog-slider-arrow[disabled] svg path {\n fill: #e2dede;\n }\n\n .cl-dialog-slider-arrow:hover {\n background: #e6e6e6;\n }\n\n .cl-dialog-slider-arrow-left {\n left: 20px;\n }\n\n .cl-dialog-slider-arrow-right {\n right: 20px;\n }\n\n .cl-no-scroll {\n overflow: hidden;\n }\n </style>\n <button class="cl-dialog-slider-arrow cl-dialog-slider-arrow-left" disabled>\n <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M9 12L8.05719 11.0572L7.11438 12L8.05719 12.9428L9 12ZM14.0572 5.05719L8.05719 11.0572L9.94281 12.9428L15.9428 6.94281L14.0572 5.05719ZM8.05719 12.9428L14.0572 18.9428L15.9428 17.0572L9.94281 11.0572L8.05719 12.9428Z" fill="#5F5F5F"/>\n </svg>\n </button>\n\n\n <div class="cl-dialog-slider-inner-content">\n <div class="cl-dialog-slider-close-icon">\n <div class="cl-dialog-slider-close-icon-content"></div>\n <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M18 6L6 18M6 6L18 18" stroke="#2C2C2C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>\n </svg>\n </div>\n\n <div class="cl-dialog-slider-content">\n <slot></slot>\n</div>\n </div>\n\n <button class="cl-dialog-slider-arrow cl-dialog-slider-arrow-right">\n <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M15 12L15.9428 11.0572L16.8856 12L15.9428 12.9428L15 12ZM9.94281 5.05719L15.9428 11.0572L14.0572 12.9428L8.05719 6.94281L9.94281 5.05719ZM15.9428 12.9428L9.94281 18.9428L8.05719 17.0572L14.0572 11.0572L15.9428 12.9428Z" fill="#5F5F5F"/>\n </svg>\n </button>\n</div>\n',customElements.get("cl-dialog-slider")||customElements.define("cl-dialog-slider",ClDialogSliderComponent);export default ClDialogSliderComponent;
package/filter/TemplateFilterDatasource.d.ts CHANGED
@@ -7,7 +7,7 @@ export default class TemplateFilterDatasource implements TemplateFilterDatasourc
7
7
  private filterLoader;
8
8
  private filterGroups;
9
9
  private initialFilters;
10
- constructor(initialFilters?: any);
10
+ constructor(initialFilters?: FilterGroupI[]);
11
11
  get(items?: TemplateBriefI[]): Promise<FilterResponseI>;
12
12
  getAllFilterGroups(): Promise<FilterResponseI>;
13
13
  getAllFilterGroupsSync(): FilterResponseI;
package/grid-preview/GridPreview.js CHANGED
@@ -1 +1 @@
1
- import LayoutType from"@claspo/common/form/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}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,config:{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()=>{s.style.width="100%",s.style.height="100%";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){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"),a=e=>this.applyScaleToPreviewInIframe(i,t,o,r,s,n,e);s&&s>o&&s-o>r-t?a(!1):r&&r>t&&a(!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,a=!s&&i>t?i:t,d=s?n/r:t/a;e.style.transformOrigin="left top",e.style.transform=`scale(${d})`,e.style.width=s?`${r}px`:n/d+"px",e.style.height=s?t/d+"px":`${a}px`}getWidgetWidth(e,n,t){var o,i,l,s,r;if(!n||!n.shared.actualSize)return 0;const a=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 a?parseFloat(a)+(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 a=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 a?parseFloat(a)+(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/form/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}}
package/grid-preview/GridPreviewInit.interface.d.ts CHANGED
@@ -1,16 +1,18 @@
1
+ import { ClDocumentI } from '@claspo/common/document/Document.interface';
2
+ import { PrizePoolModelI } from '@claspo/common/PrizePool.interface';
1
3
  export interface GridPreviewInitParamsI {
2
4
  layoutType: string;
3
5
  widgetType: string;
4
- documentModel: any;
6
+ documentModel: ClDocumentI;
5
7
  width: number;
6
8
  height: number;
7
9
  staticResourcesUrl: string;
8
10
  hostUrl?: string;
9
- prizePoolModels?: any[];
11
+ prizePoolModels?: PrizePoolModelI[];
10
12
  id?: number;
11
13
  clickCallback?: () => void;
12
14
  containerCssClasses?: string[];
13
15
  templateVisibleCallback?: () => void;
14
16
  bundledComponentClasses?: any[];
15
- useDefaultBundledComponentClasses?: any[];
17
+ useDefaultBundledComponentClasses?: boolean;
16
18
  }
package/helpers.d.ts CHANGED
@@ -1,19 +1,7 @@
1
1
  import TemplateBriefI from './TemplateBrief.interface';
2
2
  import { SizeModelI } from './data/strategies/width-based-strategy/width-first-algorithm/sizeModelI';
3
- declare const createModel: (id: any, widthPx: any, heightPx: any) => SizeModelI;
4
- declare function createSizeModel(id: any, widthPx: any, heightPx: any, heightPercent: any): SizeModelI;
5
- declare function createTemplateBrief(id: number, width: any, height: any, fallbackWeight: number): TemplateBriefI;
6
- declare function createDocumentModelShell(): {
7
- shared: {
8
- textClasses: {
9
- className: {
10
- color: string;
11
- };
12
- };
13
- };
14
- views: {
15
- path: number[];
16
- props: {};
17
- }[];
18
- };
3
+ declare const createModel: (id: number, widthPx: number, heightPx: number) => SizeModelI;
4
+ declare function createSizeModel(id: number, widthPx: number, heightPx: number, heightPercent: number): SizeModelI;
5
+ declare function createTemplateBrief(id: number, width: string | number | null, height: string | number | null, fallbackWeight: number): TemplateBriefI;
6
+ declare function createDocumentModelShell(): Record<string, any>;
19
7
  export { createModel, createSizeModel, createTemplateBrief, createDocumentModelShell };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@claspo/templates",
3
- "version": "14.5.0-theme.13",
3
+ "version": "15.0.0",
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": "5.2.1-theme.13",
16
- "@claspo/document-connector": "14.7.0-theme.13",
17
- "@claspo/renderer": "16.7.0-theme.13",
18
- "@claspo/components": "1.2.0-theme.13"
15
+ "@claspo/common": "6.0.0",
16
+ "@claspo/document-connector": "15.0.0",
17
+ "@claspo/renderer": "17.0.0",
18
+ "@claspo/components": "1.1.17"
19
19
  },
20
20
  "devDependencies": {
21
21
  "@types/jest": "^27.5.1",