@gem-sdk/components 17.0.0-dev.130 → 17.0.0-dev.132

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.
@@ -1,33 +1,33 @@
1
- "use strict";var e=require("@gem-sdk/system"),t=require("@gem-sdk/core"),o=require("./helpers.js");exports.getStyle=(s,r="liquid")=>{let{uid:i,vertical:n,showArrow:a,gapToEachSize:l,left:p,arrowBackgroundColor:d,arrowButtonSize:g,rootId:m,arrowBorder:c,arrowCorner:S,arrowCustomColor:y,arrowIconSize:C,arrowShadow:$}=s,b=t.makeStyle({bg:t.getSingleColorVariable(d)}),h=t.makeStyle({c:t.getSingleColorVariable(y)}),v=t.getResponsiveStyleShadowWithoutState($,"box-shadow",$),k=o.getResponsiveSetting(c||{}),R=o.getResponsiveSetting(S||{}),u=t.getPaddingGlobalSize(g),w=o.getResponsiveSetting(C||{}),x=o.getResponsiveSetting(a||{}),q=t.makeStyle({v:"hidden"}),f=o.getResponsiveWidth(g),z=o.getResponsiveHeight(g),B=t.makeStyleResponsive("w",w,"px"),A=t.makeStyleResponsive("h",w,"px"),P=t.makeStyleResponsive("d",o.getArrowDisplayStyle(x)),V=t.makeStyle(o.getArrowPositionStyle({vertical:n,arrowType:x,gapToEachSize:l??"",left:!!p})),W={...b,...P,...V,...f,...z,...u,...v,..."liquid"===r?q:{}},j={...h,...B,...A},D="react"===r?e.createStyleReact(W):e.createStyle(W),E="react"===r?e.createStyleReact(j):e.createStyle(j),G=`button${m?"."+m:""}.gp-carousel-arrow-${i}`,H=`
2
- ${G} {
3
- ${t.composeCornerCss(R.desktop)}
1
+ "use strict";var e=require("@gem-sdk/system"),o=require("@gem-sdk/core"),t=require("./helpers.js");exports.getStyle=(s,r="liquid")=>{let{uid:a,vertical:i,showArrow:l,gapToEachSize:n,left:p,arrowBackgroundColor:g,arrowButtonSize:c,rootId:d,arrowBorder:m,arrowCorner:S,arrowCustomColor:$,arrowIconSize:y,arrowShadow:C}=s,b=o.makeStyle({bg:o.getSingleColorVariable(g)}),h=o.makeStyle({c:o.getSingleColorVariable($)}),u=o.getResponsiveStyleShadowWithoutState(C,"box-shadow",C),w=t.getResponsiveSetting(m||{}),v=t.getResponsiveSetting(S||{}),k=o.getPaddingGlobalSize(c),R=t.getResponsiveSetting(y||{}),x=t.getResponsiveSetting(l||{}),q=o.makeStyle({v:"hidden"}),f=t.getResponsiveWidth(c),z=t.getResponsiveHeight(c),B=o.makeStyleResponsive("w",R,"px"),A=o.makeStyleResponsive("h",R,"px"),P=o.makeStyleResponsive("d",t.getArrowDisplayStyle(x)),V=o.makeStyle(t.getArrowPositionStyle({vertical:i,arrowType:x,gapToEachSize:n??"",left:!!p})),W={...b,...P,...V,...f,...z,...k,...u,..."liquid"===r?q:{}},j={...h,...B,...A},D="react"===r?e.createStyleReact(W):e.createStyle(W),E="react"===r?e.createStyleReact(j):e.createStyle(j),G=`
2
+ ${d?"."+d:""}.gp-carousel-arrow-${a} {
3
+ ${o.composeCornerCss(v.desktop)}
4
4
  }
5
- ${G}::before {
5
+ ${d?"."+d:""}.gp-carousel-arrow-${a}::before {
6
6
  content: '';
7
7
  height: 100%;
8
8
  width: 100%;
9
9
  position: absolute;
10
10
  pointer-events: none;
11
11
  z-index: 10;
12
- ${t.composeBorderCss(k.desktop)}
13
- ${t.composeCornerCss(R.desktop)}
12
+ ${o.composeBorderCss(w.desktop)}
13
+ ${o.composeCornerCss(v.desktop)}
14
14
  }
15
15
  @media only screen and (max-width: 1024px) and (min-width: 768px) {
16
- ${G} {
17
- ${t.composeCornerCss(R.tablet)}
16
+ ${d?"."+d:""}.gp-carousel-arrow-${a} {
17
+ ${o.composeCornerCss(v.tablet)}
18
18
  }
19
- ${G}::before {
20
- ${t.composeBorderCss(k.tablet)}
21
- ${t.composeCornerCss(R.tablet)}
19
+ ${d?"."+d:""}.gp-carousel-arrow-${a}::before {
20
+ ${o.composeBorderCss(w.tablet)}
21
+ ${o.composeCornerCss(v.tablet)}
22
22
  }
23
23
  }
24
24
  @media only screen and (max-width: 768px) {
25
- ${G} {
26
- ${t.composeCornerCss(R.mobile)}
25
+ ${d?"."+d:""}.gp-carousel-arrow-${a} {
26
+ ${o.composeCornerCss(v.mobile)}
27
27
  }
28
- ${G}::before {
29
- ${t.composeBorderCss(k.mobile)}
30
- ${t.composeCornerCss(R.mobile)}
28
+ ${d?"."+d:""}.gp-carousel-arrow-${a}::before {
29
+ ${o.composeBorderCss(w.mobile)}
30
+ ${o.composeCornerCss(v.mobile)}
31
31
  }
32
32
  }
33
- `;return{buttonStyle:D,buttonContentStyle:E,innerBorderCss:H}};
33
+ `;return{buttonStyle:D,buttonContentStyle:E,innerBorderCss:G}};
@@ -1,11 +1,4 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("react");const s=["SCRIPT"],l=["EMBED","IMG","INPUT","PICTURE","VIDEO"];exports.default=(p,n)=>{let a=e.useEditorMode(),{editorData:i}=p||{},{customLabel:o}=n||{},r=t.useCallback((e,t,s)=>`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("react");const r=/<(embed|img|input|picture|video)/i;exports.default=(i,o)=>{let l=e.useEditorMode(),{editorData:n}=i||{},{customLabel:s}=o||{},p=`
2
2
  <p class="gp-text-center gp-text-sm gp-py-4 gp-leading-6 gp-text-light-500 gp-flex gp-flex-col gp-gap-[4px]">
3
- <span>${o||"Custom Code"}</span>
4
- ${e||t||s?'<span class="gp-text-[#676767] gp-text-12 gp-leading-5">Publish the page to see the content.</span>':""}
5
- </p>`,[o]),c=(e,t)=>{let p=document.createElement("div");p.innerHTML=e;let n=p.childNodes,a=!1,i=!0;if(n.length>0){n.forEach(e=>{s.includes(e?.tagName)&&(a=!0,e?.remove())});let e=p.childNodes;e.forEach(e=>{if(l.includes(e?.tagName))i=!1;else if(e?.nodeName!=="#comment"){let t=e?.textContent?.trim();t&&(i=!1)}})}return i&&(i=!p?.textContent?.trim()),t&&(a=!0),{empty:i,hasScript:a}},g=t.useMemo(()=>{if("edit"===a){let{empty:e,hasScript:t}=c(i?.html||"",i?.javascript||"");if(t)return`
6
- <div class="gp-py-4 gp-font-[sans-serif] gp-flex gp-flex-col gp-gap-[4px]" >
7
- <p class="gp-text-center gp-text-sm gp-leading-[21px] gp-text-[#676767] ">
8
- Publish the page to see the content.
9
- </p>
10
- </div>
11
- `;if(e)return r(i?.css||"",i?.javascript||"",i?.html||"")}return i?.html?.trim()},[a,i?.html,i?.javascript,i?.css,r]);return{mode:a,htmlPlainText:g,handleDoubleClickCustomCode:e=>{if(2===e.detail){let e=new CustomEvent("editor:toolbar:open-custom-code",{bubbles:!0});window.dispatchEvent(e)}}}};
3
+ <span>${s||"Custom Code"}</span>
4
+ </p>`,u=e=>r.test(e),d=e=>{let t=u(e);if(t)return!1;let r=document.createElement("div");return r.innerHTML=e,!r?.textContent?.trim()},c=t.useMemo(()=>{if("edit"===l){let e=d(n?.html||"");if(e)return p}return n?.html?.trim()},[l,n?.html,n?.javascript,n?.css]);return{mode:l,htmlPlainText:c,handleDoubleClickCustomCode:e=>{if(2===e.detail){let e=new CustomEvent("editor:toolbar:open-custom-code",{bubbles:!0});window.dispatchEvent(e)}}}};
@@ -1,33 +1,33 @@
1
- import{createStyleReact as e,createStyle as t}from"@gem-sdk/system";import{makeStyle as o,getSingleColorVariable as i,getResponsiveStyleShadowWithoutState as r,getPaddingGlobalSize as d,makeStyleResponsive as n,composeCornerCss as a,composeBorderCss as l}from"@gem-sdk/core";import{getResponsiveWidth as m,getResponsiveHeight as p,getArrowDisplayStyle as $,getArrowPositionStyle as s,getResponsiveSetting as b}from"./helpers.js";let h=(h,x="liquid")=>{let{uid:c,vertical:f,showArrow:g,gapToEachSize:w,left:u,arrowBackgroundColor:k,arrowButtonSize:y,rootId:q,arrowBorder:v,arrowCorner:z,arrowCustomColor:S,arrowIconSize:j,arrowShadow:E}=h,T=o({bg:i(k)}),A=o({c:i(S)}),B=r(E,"box-shadow",E),C=b(v||{}),D=b(z||{}),F=d(y),G=b(j||{}),H=b(g||{}),I=o({v:"hidden"}),J=m(y),K=p(y),L=n("w",G,"px"),M=n("h",G,"px"),N=n("d",$(H)),O=o(s({vertical:f,arrowType:H,gapToEachSize:w??"",left:!!u})),P={...T,...N,...O,...J,...K,...F,...B,..."liquid"===x?I:{}},Q={...A,...L,...M},R="react"===x?e(P):t(P),U="react"===x?e(Q):t(Q),V=`button${q?"."+q:""}.gp-carousel-arrow-${c}`,W=`
2
- ${V} {
3
- ${a(D.desktop)}
1
+ import{createStyleReact as e,createStyle as o}from"@gem-sdk/system";import{makeStyle as r,getSingleColorVariable as t,getResponsiveStyleShadowWithoutState as a,getPaddingGlobalSize as i,makeStyleResponsive as l,composeCornerCss as p,composeBorderCss as d}from"@gem-sdk/core";import{getResponsiveWidth as s,getResponsiveHeight as $,getArrowDisplayStyle as n,getArrowPositionStyle as m,getResponsiveSetting as c}from"./helpers.js";let b=(b,g="liquid")=>{let{uid:w,vertical:h,showArrow:u,gapToEachSize:x,left:f,arrowBackgroundColor:k,arrowButtonSize:y,rootId:q,arrowBorder:v,arrowCorner:z,arrowCustomColor:S,arrowIconSize:j,arrowShadow:E}=b,T=r({bg:t(k)}),A=r({c:t(S)}),B=a(E,"box-shadow",E),C=c(v||{}),D=c(z||{}),F=i(y),G=c(j||{}),H=c(u||{}),I=r({v:"hidden"}),J=s(y),K=$(y),L=l("w",G,"px"),M=l("h",G,"px"),N=l("d",n(H)),O=r(m({vertical:h,arrowType:H,gapToEachSize:x??"",left:!!f})),P={...T,...N,...O,...J,...K,...F,...B,..."liquid"===g?I:{}},Q={...A,...L,...M},R="react"===g?e(P):o(P),U="react"===g?e(Q):o(Q),V=`
2
+ ${q?"."+q:""}.gp-carousel-arrow-${w} {
3
+ ${p(D.desktop)}
4
4
  }
5
- ${V}::before {
5
+ ${q?"."+q:""}.gp-carousel-arrow-${w}::before {
6
6
  content: '';
7
7
  height: 100%;
8
8
  width: 100%;
9
9
  position: absolute;
10
10
  pointer-events: none;
11
11
  z-index: 10;
12
- ${l(C.desktop)}
13
- ${a(D.desktop)}
12
+ ${d(C.desktop)}
13
+ ${p(D.desktop)}
14
14
  }
15
15
  @media only screen and (max-width: 1024px) and (min-width: 768px) {
16
- ${V} {
17
- ${a(D.tablet)}
16
+ ${q?"."+q:""}.gp-carousel-arrow-${w} {
17
+ ${p(D.tablet)}
18
18
  }
19
- ${V}::before {
20
- ${l(C.tablet)}
21
- ${a(D.tablet)}
19
+ ${q?"."+q:""}.gp-carousel-arrow-${w}::before {
20
+ ${d(C.tablet)}
21
+ ${p(D.tablet)}
22
22
  }
23
23
  }
24
24
  @media only screen and (max-width: 768px) {
25
- ${V} {
26
- ${a(D.mobile)}
25
+ ${q?"."+q:""}.gp-carousel-arrow-${w} {
26
+ ${p(D.mobile)}
27
27
  }
28
- ${V}::before {
29
- ${l(C.mobile)}
30
- ${a(D.mobile)}
28
+ ${q?"."+q:""}.gp-carousel-arrow-${w}::before {
29
+ ${d(C.mobile)}
30
+ ${p(D.mobile)}
31
31
  }
32
32
  }
33
- `;return{buttonStyle:R,buttonContentStyle:U,innerBorderCss:W}};export{h as getStyle};
33
+ `;return{buttonStyle:R,buttonContentStyle:U,innerBorderCss:V}};export{b as getStyle};
@@ -1,11 +1,4 @@
1
- import{useEditorMode as e}from"@gem-sdk/core";import{useCallback as t,useMemo as p}from"react";let l=["SCRIPT"],s=["EMBED","IMG","INPUT","PICTURE","VIDEO"],n=(n,a)=>{let o=e(),{editorData:i}=n||{},{customLabel:r}=a||{},g=t((e,t,p)=>`
1
+ import{useEditorMode as e}from"@gem-sdk/core";import{useMemo as t}from"react";let r=/<(embed|img|input|picture|video)/i,i=(i,o)=>{let l=e(),{editorData:p}=i||{},{customLabel:n}=o||{},m=`
2
2
  <p class="gp-text-center gp-text-sm gp-py-4 gp-leading-6 gp-text-light-500 gp-flex gp-flex-col gp-gap-[4px]">
3
- <span>${r||"Custom Code"}</span>
4
- ${e||t||p?'<span class="gp-text-[#676767] gp-text-12 gp-leading-5">Publish the page to see the content.</span>':""}
5
- </p>`,[r]),c=(e,t)=>{let p=document.createElement("div");p.innerHTML=e;let n=p.childNodes,a=!1,o=!0;if(n.length>0){n.forEach(e=>{l.includes(e?.tagName)&&(a=!0,e?.remove())});let e=p.childNodes;e.forEach(e=>{if(s.includes(e?.tagName))o=!1;else if(e?.nodeName!=="#comment"){let t=e?.textContent?.trim();t&&(o=!1)}})}return o&&(o=!p?.textContent?.trim()),t&&(a=!0),{empty:o,hasScript:a}},d=p(()=>{if("edit"===o){let{empty:e,hasScript:t}=c(i?.html||"",i?.javascript||"");if(t)return`
6
- <div class="gp-py-4 gp-font-[sans-serif] gp-flex gp-flex-col gp-gap-[4px]" >
7
- <p class="gp-text-center gp-text-sm gp-leading-[21px] gp-text-[#676767] ">
8
- Publish the page to see the content.
9
- </p>
10
- </div>
11
- `;if(e)return g(i?.css||"",i?.javascript||"",i?.html||"")}return i?.html?.trim()},[o,i?.html,i?.javascript,i?.css,g]);return{mode:o,htmlPlainText:d,handleDoubleClickCustomCode:e=>{if(2===e.detail){let e=new CustomEvent("editor:toolbar:open-custom-code",{bubbles:!0});window.dispatchEvent(e)}}}};export{n as default};
3
+ <span>${n||"Custom Code"}</span>
4
+ </p>`,s=e=>r.test(e),d=e=>{let t=s(e);if(t)return!1;let r=document.createElement("div");return r.innerHTML=e,!r?.textContent?.trim()},u=t(()=>{if("edit"===l){let e=d(p?.html||"");if(e)return m}return p?.html?.trim()},[l,p?.html,p?.javascript,p?.css]);return{mode:l,htmlPlainText:u,handleDoubleClickCustomCode:e=>{if(2===e.detail){let e=new CustomEvent("editor:toolbar:open-custom-code",{bubbles:!0});window.dispatchEvent(e)}}}};export{i as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "17.0.0-dev.130",
3
+ "version": "17.0.0-dev.132",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",