@cntrl-site/components 1.0.17-3 → 1.0.17-4

package/dist/index.js

@@ -8644,7 +8644,7 @@ export function List({ settings, content, isEditor, isPreviewMode, isEditMode, a
   left: 20px;
   transform: translateY(-50%);
 }
-`}function _i(e,t,n,r,i,l,o,c){return{fontSettings:{fontFamily:e,fontWeight:(t==null?void 0:t.fontWeight)??400,fontStyle:(t==null?void 0:t.fontStyle)??"normal"},fontSize:n??.01,lineHeight:r,letterSpacing:i??0,wordSpacing:l??0,textAppearance:o,color:c??"#000000"}}function Ou({settings:e,content:t,isEditor:n,isPreviewMode:r,isEditMode:i,activeEvent:l}){const{prefix:o}=y.useScopedStyles(),c=i??!1,{wrapperWidth:s=1,cellMinHeight:p=0,dividerWidth:u=694e-6,dividerStyle:T="solid",entryHoverEffect:x="default",autoclose:f="off",icon:m,iconMaxWidth:g=.00833,iconPaddingRight:C=0,iconAnimation:w="rotate 45",questionColor:S="#000000",answerColor:v="#000000",dividerColor:M="#0000001F",iconColor:L="#000000",questionHoverColor:N="#666666",iconHoverColor:b="#666666",iconActiveColor:P="#000000",dividerHoverColor:B="#000000",questionFontFamily:$,questionFontSettings:E,questionFontSize:A,questionLineHeight:F,questionLetterSpacing:j,questionWordSpacing:te,questionTextAppearance:k,answerFontFamily:W,answerFontSettings:D,answerFontSize:H,answerLineHeight:I,answerLetterSpacing:K,answerWordSpacing:Q,answerTextAppearance:Z,questionPaddingLeft:R=0,questionPaddingTop:ne=0,questionPaddingBottom:h=0,answerPaddingLeft:ee=0,answerPaddingRight:ge=0,answerPaddingTop:le=0,answerPaddingBottom:be=0}=e,re=t??[],[ce,V]=d.useState(()=>new Set),U=!n||r;d.useEffect(()=>{V(new Set)},[f]);const G=pe=>y.scalingValue(pe,n??!1),se=Math.max(R,zt),ye=Math.max(ne,zt),Te=Math.max(h,zt),Se=Math.max(ee,zt),Le=Math.max(ge,zt),Ee=Math.max(le,zt),O=Math.max(be,zt),oe=Math.max(0,(s??1)-C-g),_=Math.max(0,(s??1)-ge),z=Math.max(0,(s??1)-ee),q=Math.max(C,zt),Y=Math.max(0,(s??1)-R-g),ae=d.useMemo(()=>ce.size===0?0:Math.min(...ce),[ce]),me=d.useCallback(pe=>ce.has(pe),[ce]),Fe=U&&x==="default"?`${o}-entry-hover-default`:"",he=m??"",ve=he!=="",We=w.replace(/^rotate /,""),ie=`${o}-icon-anim-${We}`,xe=yt(Ze(_i($,E,A,F,j,te,k,S),n)),Ae=yt(Ze(_i(W,D,H,I,K,Q,Z,v),n)),ke=Pi(A,F,`${o}-question`,`${o}-text-tight-leading`),Ve=Pi(H,I,`${o}-answer-text`,`${o}-text-tight-leading`),tt=Ei(A,F,o,n),ut=Ei(H,I,o,n),pt=y.buildColorVars(o,{questionColor:S,answerColor:v,dividerColor:M,iconColor:L,questionHoverColor:N,iconHoverColor:b,iconActiveColor:P,dividerHoverColor:B},Wu,Mu),xt=l&&l!=="default"?`${o}-state-${l}`:"",Et=d.useCallback(pe=>{U&&V(He=>{if(He.has(pe)){const Ue=new Set(He);return Ue.delete(pe),Ue}if(f==="on")return new Set([pe]);const Oe=new Set(He);return Oe.add(pe),Oe})},[U,f]),mt=d.useMemo(()=>Hu(o),[o]),_t={[`--${o}-divider-width`]:y.scalingValue(u,n??!1),[`--${o}-divider-style`]:T,[`--${o}-icon-max-width`]:y.scalingValue(g,n??!1),...p>0?{[`--${o}-question-min-height`]:y.scalingValue(p,n??!1)}:{}};return a.jsxs(a.Fragment,{children:[a.jsx("style",{dangerouslySetInnerHTML:{__html:mt}}),a.jsx("div",{style:pt,children:a.jsx("div",{className:`${o}-wrapper${n&&!r?` ${o}-editor`:""} ${Fe} ${xt}`.trim(),style:{width:y.scalingValue(s,n??!1),maxWidth:"100%",..._t},children:re.map((pe,He)=>{var At;const Oe=me(He),Ue=((At=pe.question)==null?void 0:At.trim())??"",Ct=pe.answer,Vt=((Ct==null?void 0:Ct.length)??0)>0,gt=c&&He===ae;return a.jsxs("div",{className:`${o}-item${Oe?` ${o}-item-open`:""}`.trim(),"data-faq-item":"",children:[a.jsxs("div",{className:`${o}-question-controls`,children:[gt&&a.jsxs(a.Fragment,{children:[a.jsx(jt,{"data-controls":"questionPaddingTop","data-controls-static-handle":"","data-controls-handle-left":"20","data-controls-axis":"y","data-controls-variant":"row-padding","data-controls-min":"0",className:`${o}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",top:0,left:0,width:"100%",height:G(ye),zIndex:2}}),a.jsx(jt,{"data-controls":"questionPaddingLeft","data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(oe),className:`${o}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:0,width:G(se),height:"100%",zIndex:2}}),a.jsx(jt,{"data-controls":"iconPaddingRight","data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(Y),className:`${o}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,right:0,width:G(q),height:"100%",zIndex:2}})]}),a.jsxs("button",{type:"button",className:`${o}-question-button`,"aria-expanded":Oe,style:{...xe,...tt,paddingLeft:G(R),paddingRight:G(C)},onClick:()=>Et(He),children:[ne>0&&a.jsx("span",{className:`${o}-padding-handle`,style:{height:G(ne)},"aria-hidden":"true"}),a.jsxs("span",{className:`${o}-question-row`,children:[a.jsx("span",{className:ke,children:Ue}),Vt&&(ve?a.jsx("span",{className:`${o}-icon ${o}-icon-custom ${ie}`,"aria-hidden":"true",children:a.jsx(Nt,{url:he,fill:L,hoverFill:b,className:`${o}-icon-image`})}):a.jsx("span",{className:`${o}-icon ${o}-icon-default ${ie}`,"aria-hidden":"true"}))]}),h>0&&a.jsx("span",{className:`${o}-padding-handle`,style:{height:G(h)},"aria-hidden":"true"})]}),gt&&a.jsx(jt,{"data-controls":"questionPaddingBottom","data-controls-static-handle":"","data-controls-handle-left":"20","data-controls-axis":"y","data-controls-variant":"row-padding","data-controls-min":"0",className:`${o}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",bottom:0,left:0,width:"100%",height:G(Te),zIndex:2}})]}),Vt&&Ct&&a.jsx("div",{className:`${o}-panel`,"aria-hidden":!Oe,children:a.jsx("div",{className:`${o}-panel-inner`,children:a.jsxs("div",{className:`${o}-answer-controls`,children:[gt&&a.jsxs(a.Fragment,{children:[a.jsx(jt,{"data-controls":"answerPaddingTop","data-controls-static-handle":"","data-controls-handle-left":"20","data-controls-axis":"y","data-controls-variant":"row-padding","data-controls-min":"0",className:`${o}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",top:0,left:0,width:"100%",height:G(Ee),zIndex:2}}),a.jsx(jt,{"data-controls":"answerPaddingLeft","data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(_),className:`${o}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:0,width:G(Se),height:"100%",zIndex:2}}),a.jsx(jt,{"data-controls":"answerPaddingRight","data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(z),className:`${o}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,right:0,width:G(Le),height:"100%",zIndex:2}})]}),le>0&&a.jsx("div",{className:`${o}-padding-handle`,style:{height:G(le)}}),a.jsx("div",{className:`${o}-answer`,style:{...Ae,...ut,paddingLeft:G(ee),paddingRight:G(ge)},children:a.jsx("div",{className:Ve,children:a.jsx(Sn,{content:Ct})})}),be>0&&a.jsx("div",{className:`${o}-padding-handle`,style:{height:G(be)}}),gt&&a.jsx(jt,{"data-controls":"answerPaddingBottom","data-controls-static-handle":"","data-controls-handle-left":"20","data-controls-axis":"y","data-controls-variant":"row-padding","data-controls-min":"0",className:`${o}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",bottom:0,left:0,width:"100%",height:G(O),zIndex:2}})]})})})]},He)})})})]})}const Bu=`import { useCallback, useEffect, useMemo, useState, type CSSProperties, type ComponentPropsWithoutRef } from 'react';
+`}function _i(e,t,n,r,i,l,o,c){return{fontSettings:{fontFamily:e,fontWeight:(t==null?void 0:t.fontWeight)??400,fontStyle:(t==null?void 0:t.fontStyle)??"normal"},fontSize:n??.01,lineHeight:r,letterSpacing:i??0,wordSpacing:l??0,textAppearance:o,color:c??"#000000"}}function Ou({settings:e,content:t,isEditor:n,isPreviewMode:r,isEditMode:i,activeEvent:l}){const{prefix:o}=y.useScopedStyles(),c=i??!1,{wrapperWidth:s=1,cellMinHeight:p=0,dividerWidth:u=694e-6,dividerStyle:T="solid",entryHoverEffect:x="default",autoclose:f="off",icon:m,iconMaxWidth:g=.00833,iconPaddingRight:C=0,iconAnimation:w="rotate 45",questionColor:S="#000000",answerColor:v="#000000",dividerColor:M="#0000001F",iconColor:L="#000000",questionHoverColor:N="#666666",iconHoverColor:b="#666666",iconActiveColor:P="#000000",dividerHoverColor:B="#000000",questionFontFamily:$,questionFontSettings:E,questionFontSize:A,questionLineHeight:F,questionLetterSpacing:j,questionWordSpacing:te,questionTextAppearance:k,answerFontFamily:W,answerFontSettings:D,answerFontSize:H,answerLineHeight:I,answerLetterSpacing:K,answerWordSpacing:Q,answerTextAppearance:Z,questionPaddingLeft:R=0,questionPaddingTop:ne=0,questionPaddingBottom:h=0,answerPaddingLeft:ee=0,answerPaddingRight:ge=0,answerPaddingTop:le=0,answerPaddingBottom:be=0}=e,re=t??[],[ce,V]=d.useState(()=>new Set),U=!n||r;d.useEffect(()=>{V(new Set)},[f]),d.useEffect(()=>{n&&!i&&!r&&V(new Set)},[n,i,r]);const G=pe=>y.scalingValue(pe,n??!1),se=Math.max(R,zt),ye=Math.max(ne,zt),Te=Math.max(h,zt),Se=Math.max(ee,zt),Le=Math.max(ge,zt),Ee=Math.max(le,zt),O=Math.max(be,zt),oe=Math.max(0,(s??1)-C-g),_=Math.max(0,(s??1)-ge),z=Math.max(0,(s??1)-ee),q=Math.max(C,zt),Y=Math.max(0,(s??1)-R-g);console.log("questionPaddingLeftMaxFraction",oe);const ae=d.useMemo(()=>ce.size===0?0:Math.min(...ce),[ce]),me=d.useCallback(pe=>ce.has(pe),[ce]),Fe=U&&x==="default"?`${o}-entry-hover-default`:"",he=m??"",ve=he!=="",We=w.replace(/^rotate /,""),ie=`${o}-icon-anim-${We}`,xe=yt(Ze(_i($,E,A,F,j,te,k,S),n)),Ae=yt(Ze(_i(W,D,H,I,K,Q,Z,v),n)),ke=Pi(A,F,`${o}-question`,`${o}-text-tight-leading`),Ve=Pi(H,I,`${o}-answer-text`,`${o}-text-tight-leading`),tt=Ei(A,F,o,n),ut=Ei(H,I,o,n),pt=y.buildColorVars(o,{questionColor:S,answerColor:v,dividerColor:M,iconColor:L,questionHoverColor:N,iconHoverColor:b,iconActiveColor:P,dividerHoverColor:B},Wu,Mu),xt=l&&l!=="default"?`${o}-state-${l}`:"",Et=d.useCallback(pe=>{U&&V(He=>{if(He.has(pe)){const Ue=new Set(He);return Ue.delete(pe),Ue}if(f==="on")return new Set([pe]);const Oe=new Set(He);return Oe.add(pe),Oe})},[U,f]),mt=d.useMemo(()=>Hu(o),[o]),_t={[`--${o}-divider-width`]:y.scalingValue(u,n??!1),[`--${o}-divider-style`]:T,[`--${o}-icon-max-width`]:y.scalingValue(g,n??!1),...p>0?{[`--${o}-question-min-height`]:y.scalingValue(p,n??!1)}:{}};return a.jsxs(a.Fragment,{children:[a.jsx("style",{dangerouslySetInnerHTML:{__html:mt}}),a.jsx("div",{style:pt,children:a.jsx("div",{className:`${o}-wrapper${n&&!r?` ${o}-editor`:""} ${Fe} ${xt}`.trim(),style:{width:y.scalingValue(s,n??!1),maxWidth:"100%",..._t},children:re.map((pe,He)=>{var At;const Oe=me(He),Ue=((At=pe.question)==null?void 0:At.trim())??"",Ct=pe.answer,Vt=((Ct==null?void 0:Ct.length)??0)>0,gt=c&&He===ae;return a.jsxs("div",{className:`${o}-item${Oe?` ${o}-item-open`:""}`.trim(),"data-faq-item":"",children:[a.jsxs("div",{className:`${o}-question-controls`,children:[gt&&a.jsxs(a.Fragment,{children:[a.jsx(jt,{"data-controls":"questionPaddingTop","data-controls-static-handle":"","data-controls-handle-left":"20","data-controls-axis":"y","data-controls-variant":"row-padding","data-controls-min":"0",className:`${o}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",top:0,left:0,width:"100%",height:G(ye),zIndex:2}}),a.jsx(jt,{"data-controls":"questionPaddingLeft","data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(oe),className:`${o}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:0,width:G(se),height:"100%",zIndex:2}}),a.jsx(jt,{"data-controls":"iconPaddingRight","data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(Y),className:`${o}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,right:0,width:G(q),height:"100%",zIndex:2}})]}),a.jsxs("button",{type:"button",className:`${o}-question-button`,"aria-expanded":Oe,style:{...xe,...tt,paddingLeft:G(R),paddingRight:G(C)},onClick:()=>Et(He),children:[ne>0&&a.jsx("span",{className:`${o}-padding-handle`,style:{height:G(ne)},"aria-hidden":"true"}),a.jsxs("span",{className:`${o}-question-row`,children:[a.jsx("span",{className:ke,children:Ue}),Vt&&(ve?a.jsx("span",{className:`${o}-icon ${o}-icon-custom ${ie}`,"aria-hidden":"true",children:a.jsx(Nt,{url:he,fill:L,hoverFill:b,className:`${o}-icon-image`})}):a.jsx("span",{className:`${o}-icon ${o}-icon-default ${ie}`,"aria-hidden":"true"}))]}),h>0&&a.jsx("span",{className:`${o}-padding-handle`,style:{height:G(h)},"aria-hidden":"true"})]}),gt&&a.jsx(jt,{"data-controls":"questionPaddingBottom","data-controls-static-handle":"","data-controls-handle-left":"20","data-controls-axis":"y","data-controls-variant":"row-padding","data-controls-min":"0",className:`${o}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",bottom:0,left:0,width:"100%",height:G(Te),zIndex:2}})]}),Vt&&Ct&&a.jsx("div",{className:`${o}-panel`,"aria-hidden":!Oe,children:a.jsx("div",{className:`${o}-panel-inner`,children:a.jsxs("div",{className:`${o}-answer-controls`,children:[gt&&a.jsxs(a.Fragment,{children:[a.jsx(jt,{"data-controls":"answerPaddingTop","data-controls-static-handle":"","data-controls-handle-left":"20","data-controls-axis":"y","data-controls-variant":"row-padding","data-controls-min":"0",className:`${o}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",top:0,left:0,width:"100%",height:G(Ee),zIndex:2}}),a.jsx(jt,{"data-controls":"answerPaddingLeft","data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-min":"0","data-controls-max-fraction":String(_),className:`${o}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,left:0,width:G(Se),height:"100%",zIndex:2}}),a.jsx(jt,{"data-controls":"answerPaddingRight","data-controls-static-handle":"","data-controls-axis":"x","data-controls-variant":"column-padding","data-controls-reverse":"","data-controls-min":"0","data-controls-max-fraction":String(z),className:`${o}-padding-control-handle`,hitPlacement:"center-x",areaStyle:{position:"absolute",top:0,right:0,width:G(Le),height:"100%",zIndex:2}})]}),le>0&&a.jsx("div",{className:`${o}-padding-handle`,style:{height:G(le)}}),a.jsx("div",{className:`${o}-answer`,style:{...Ae,...ut,paddingLeft:G(ee),paddingRight:G(ge)},children:a.jsx("div",{className:Ve,children:a.jsx(Sn,{content:Ct})})}),be>0&&a.jsx("div",{className:`${o}-padding-handle`,style:{height:G(be)}}),gt&&a.jsx(jt,{"data-controls":"answerPaddingBottom","data-controls-static-handle":"","data-controls-handle-left":"20","data-controls-axis":"y","data-controls-variant":"row-padding","data-controls-min":"0",className:`${o}-padding-control-handle`,hitPlacement:"left-y",areaStyle:{position:"absolute",bottom:0,left:0,width:"100%",height:G(O),zIndex:2}})]})})})]},He)})})})]})}const Bu=`import { useCallback, useEffect, useMemo, useState, type CSSProperties, type ComponentPropsWithoutRef } from 'react';
 import { CommonComponentProps } from '../props';
 import { buildColorVars, scalingValue, useScopedStyles } from '../utils/index';
 import { omitTextColors, TextStyles, textStylesToCss } from '../utils/textStylesToCss';
@@ -9084,6 +9084,12 @@ export function FAQ({ settings, content, isEditor, isPreviewMode, isEditMode, ac
   useEffect(() => {
     setOpenIndices(new Set());
   }, [autoclose]);
+
+  useEffect(() => {
+    if (isEditor && !isEditMode && !isPreviewMode) {
+      setOpenIndices(new Set());
+    }
+  }, [isEditor, isEditMode, isPreviewMode]);
   const scaled = (value: number) => scalingValue(value, isEditor ?? false);
   const questionPaddingLeftWidth = Math.max(questionPaddingLeft, PADDING_HANDLE_SIZE);
   const questionPaddingTopHeight = Math.max(questionPaddingTop, PADDING_HANDLE_SIZE);
@@ -9098,6 +9104,8 @@ export function FAQ({ settings, content, isEditor, isPreviewMode, isEditMode, ac
   const iconPaddingRightWidth = Math.max(iconPaddingRight, PADDING_HANDLE_SIZE);
   const iconPaddingRightMaxFraction = Math.max(0, (wrapperWidth ?? 1) - questionPaddingLeft - iconMaxWidth);
 
+  console.log('questionPaddingLeftMaxFraction', questionPaddingLeftMaxFraction);
+
   const controlsTargetIndex = useMemo(() => {
     if (openIndices.size === 0) {
       return 0;