"use strict";(self.webpackChunkcoblocks=self.webpackChunkcoblocks||[]).push([[203],{4203:function(t,e,o){o.r(e),o.d(e,{default:function(){return L}});var n=o(7462),i=o(9307),l=o(5161),a=o.n(l),s=o(4184),c=o.n(s),r=o(9035),m=o(3601),d=o(5377),b=o(5697),g=o.n(b),p=o(5736),u=o(5609);const _=[{name:(0,p.__)("None","coblocks"),size:0,slug:"no"},{name:(0,p.__)("Small","coblocks"),size:14,slug:"small"},{name:(0,p.__)("Medium","coblocks"),size:24,slug:"medium"},{name:(0,p.__)("Large","coblocks"),size:34,slug:"large"},{name:(0,p.__)("Huge","coblocks"),size:60,slug:"huge"}];class k extends i.Component{constructor(){super(...arguments),this.getSelectValuesFromUtilitySizes=this.getSelectValuesFromUtilitySizes.bind(this),this.getCurrentSelectValue=this.getCurrentSelectValue.bind(this),this.setCurrentSelectValue=this.setCurrentSelectValue.bind(this),this.onChangeValue=this.onChangeValue.bind(this),this.getSelectOptions=this.getSelectOptions.bind(this)}getSelectValuesFromUtilitySizes(t,e){let o;if("string"==typeof e)return o=t.find((t=>t.slug===e)),o?o.slug:"custom"}getCurrentSelectValue(t){const{paddingSize:e,marginSize:o}=this.props;switch(t){case"margin":return o;case"padding":return e}}setCurrentSelectValue(t){const{type:e,setAttributes:o}=this.props;switch(e){case"margin":o({marginSize:t});break;case"padding":o({paddingSize:t})}}onChangeValue(t){const e=_.find((e=>e.slug===t));e&&this.setCurrentSelectValue(this.getSelectValuesFromUtilitySizes(_,e.slug))}getSelectOptions(t){return[...t.map((t=>({label:t.name,value:t.slug})))]}render(){const{type:t}=this.props;return(0,i.createElement)(i.Fragment,null,(0,i.createElement)(u.SelectControl,{className:"components-font-size-picker__select",hideLabelFromVision:!0,label:`Choose ${t} preset`,onChange:this.onChangeValue,options:this.getSelectOptions(_),value:this.getCurrentSelectValue(t)}))}}k.propTypes={marginSize:g().number,paddingSize:g().number,setAttributes:g().func,type:g().string};var h=o(7635),v=o(9818),y=o(4333);const T=["Top","Right","Bottom","Left"],f={margin:{bottom:(0,p.__)("Margin bottom","coblocks"),left:(0,p.__)("Margin left","coblocks"),right:(0,p.__)("Margin right","coblocks"),top:(0,p.__)("Margin top","coblocks")},padding:{bottom:(0,p.__)("Padding bottom","coblocks"),left:(0,p.__)("Padding left","coblocks"),right:(0,p.__)("Padding right","coblocks"),top:(0,p.__)("Padding top","coblocks")}},S=t=>{const{attributes:e,clientId:o,dimensionSize:n,help:l,instanceId:s,label:r=(0,p.__)("Margin","coblocks"),setAttributes:m,type:d="margin",unit:b}=t,{coblocks:g,marginSize:_,paddingSize:y,saveCoBlocksMeta:S}=e,{updateBlockAttributes:$}=(0,v.useDispatch)("core/block-editor"),B=(t,e)=>void 0!==t?`${t}${e}`:null,M=(t,e)=>{if(void 0!==t)return`${e}: ${t} !important`},C=()=>{const e=wp.data.select("core/editor").getEditedPostAttribute("meta"),i=wp.data.select("core/block-editor").getBlock(o);let l={};if(void 0!==g&&void 0!==g.id){const o=t.name.split("/").join("-")+"-"+g.id,a=i.attributes.paddingUnit,s=i.attributes.marginUnit,c={paddingBottom:B(i.attributes.paddingBottom,a),paddingBottomMobile:B(i.attributes.paddingBottomMobile,a),paddingBottomTablet:B(i.attributes.paddingBottomTablet,a),paddingLeft:B(i.attributes.paddingLeft,a),paddingLeftMobile:B(i.attributes.paddingLeftMobile,a),paddingLeftTablet:B(i.attributes.paddingLeftTablet,a),paddingRight:B(i.attributes.paddingRight,a),paddingRightMobile:B(i.attributes.paddingRightMobile,a),paddingRightTablet:B(i.attributes.paddingRightTablet,a),paddingTop:B(i.attributes.paddingTop,a),paddingTopMobile:B(i.attributes.paddingTopMobile,a),paddingTopTablet:B(i.attributes.paddingTopTablet,a)},r={marginBottom:B(i.attributes.marginBottom,s),marginBottomMobile:B(i.attributes.marginBottomMobile,s),marginBottomTablet:B(i.attributes.marginBottomTablet,s),marginLeft:B(i.attributes.marginLeft,s),marginLeftMobile:B(i.attributes.marginLeftMobile,s),marginLeftTablet:B(i.attributes.marginLeftTablet,s),marginRight:B(i.attributes.marginRight,s),marginRightMobile:B(i.attributes.marginRightMobile,s),marginRightTablet:B(i.attributes.marginRightTablet,s),marginTop:B(i.attributes.marginTop,s),marginTopMobile:B(i.attributes.marginTopMobile,s),marginTopTablet:B(i.attributes.marginTopTablet,s)};l=void 0===e||void 0===e._coblocks_dimensions||void 0!==e._coblocks_dimensions&&""===e._coblocks_dimensions?{}:JSON.parse(e._coblocks_dimensions),void 0===l[o]?(l[o]={},l[o][d]={}):void 0===l[o][d]&&(l[o][d]={}),l[o][d]="advanced"===n?"padding"===d?c:r:{},wp.data.dispatch("core/editor").editPost({meta:{_coblocks_dimensions:JSON.stringify(l)}});const m=document.head||document.getElementsByTagName("head")[0],b=document.createElement("style");b.type="text/css";const p=`\n\t\t\t\t@media only screen and (max-width: 768px) {\n\t\t\t\t\t.${o} > div {\n\t\t\t\t\t\t${M(c.paddingTopTablet,"padding-top")}\n\t\t\t\t\t\t${M(c.paddingRightTablet,"padding-right")}\n\t\t\t\t\t\t${M(c.paddingBottomTablet,"padding-bottom")}\n\t\t\t\t\t\t${M(c.paddingLeftTablet,"padding-left")}\n\t\t\t\t\t\t${M(r.marginTopTablet,"margin-top")}\n\t\t\t\t\t\t${M(r.marginRightTablet,"margin-right")}\n\t\t\t\t\t\t${M(r.marginBottomTablet,"margin-bottom")}\n\t\t\t\t\t\t${M(r.marginLeftTablet,"margin-left")}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t@media only screen and (max-width: 514px) {\n\t\t\t\t\t.${o} > div {\n\t\t\t\t\t\t${M(c.paddingTopMobile,"padding-top")}\n\t\t\t\t\t\t${M(c.paddingRightMobile,"padding-right")}\n\t\t\t\t\t\t${M(c.paddingBottomMobile,"padding-bottom")}\n\t\t\t\t\t\t${M(c.paddingLeftMobile,"padding-left")}\n\t\t\t\t\t\t${M(r.marginTopMobile,"margin-top")}\n\t\t\t\t\t\t${M(r.marginRightMobile,"margin-right")}\n\t\t\t\t\t\t${M(r.marginBottomMobile,"margin-bottom")}\n\t\t\t\t\t\t${M(r.marginLeftMobile,"margin-left")}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t`;b.styleSheet?b.styleSheet.cssText=p:b.appendChild(document.createTextNode(p)),m.appendChild(b)}};S&&(C(),$(o,{saveCoBlocksMeta:!1}));const E=(e,o)=>{["coblocks/hero"].includes(t.name)&&"no"===e&&(o<0?(e="huge",o=60):o=-1),"padding"===d&&m({paddingSyncUnits:!0}),m({[`${d}Size`]:e}),o&&m({[`${d}Top`]:o=o<0?"":o,[`${d}Right`]:0,[`${d}Bottom`]:o,[`${d}Left`]:0,[`${d}Unit`]:"px"}),C()},L=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";const o=[t["valueTop"+e],t["valueRight"+e],t["valueBottom"+e],t["valueLeft"+e]],n=Math.max.apply(null,o);m({[`${d}SyncUnits${e}`]:!t[`syncUnits${e}`],[`${d}Top${e}`]:n,[`${d}Right${e}`]:n,[`${d}Bottom${e}`]:n,[`${d}Left${e}`]:n}),C()},R=c()("components-base-control","components-coblocks-dimensions-control",{}),N=`inspector-coblocks-dimensions-control-${s}`,z=(e,o)=>{const n=""===e.target.value?void 0:Number(e.target.value);let i="";void 0!==e.target.getAttribute("data-device-type")&&void 0!==e.target.getAttribute("data-device-type")&&(i=e.target.getAttribute("data-device-type")),t["syncUnits"+i]?((t,e)=>{m({[`${d}Top${e}`]:t,[`${d}Right${e}`]:t,[`${d}Bottom${e}`]:t,[`${d}Left${e}`]:t}),C()})(n,i):((t,e,o)=>{m({[`${d}${o}${e}`]:t}),C()})(n,i,o)},U=[{
/* translators: a unit of size (px) for css markup */
name:(0,p.__)("Pixel","coblocks"),unitValue:"px"},{
/* translators: a unit of size (em) for css markup */
name:(0,p.__)("Em","coblocks"),unitValue:"em"},{
/* translators: a unit of size (vw) for css markup */
name:(0,p.__)("Viewport width","coblocks"),unitValue:"vw"},{
/* translators: a unit of size (vh) for css markup */
name:(0,p.__)("Viewport height","coblocks"),unitValue:"vh"},{
/* translators: a unit of size for css markup */
name:(0,p.__)("Percentage","coblocks"),unitValue:"%"}];return(0,i.createElement)(i.Fragment,null,(0,i.createElement)("div",{className:R},"advanced"===n?(0,i.createElement)(i.Fragment,null,(0,i.createElement)("div",{className:"components-coblocks-dimensions-control__header"},r&&(0,i.createElement)("p",{className:"components-coblocks-dimensions-control__label"},r),(0,i.createElement)("div",{className:"components-coblocks-dimensions-control__actions"},(0,i.createElement)(u.ButtonGroup,{"aria-label":(0,p.__)("Select Units","coblocks"),className:"components-coblocks-dimensions-control__units"},a()(U,(t=>{let{unitValue:e,name:o}=t;return(0,i.createElement)(u.Tooltip,{key:`coblocks-dimensions-control-unit-tooltip-${o}`,text:(0,p.sprintf)(
/* translators: %s: values associated with CSS syntax, 'Pixel', 'Em', 'Percentage' */
(0,p.__)("%s units","coblocks"),o)},(0,i.createElement)(u.Button,{"aria-label":(0,p.sprintf)(
/* translators: %s: values associated with CSS syntax, 'Pixel', 'Em', 'Percentage' */
(0,p.__)("%s units","coblocks"),o),"aria-pressed":b===e,className:"components-coblocks-dimensions-control__units--"+o,isPrimary:b===e,isSecondary:b!==e,isSmall:!0,key:e,onClick:()=>(m({[`${d}Unit`]:e}),void C())},e))}))),(0,i.createElement)(u.Button,{"aria-label":(0,p.sprintf)(
/* translators: %s: a texual label  */
(0,p.__)("Turn off advanced %s settings","coblocks"),r.toLowerCase()),isSecondary:!0,isSmall:!0,onClick:()=>E("no",-1),type:"button"},(0,p.__)("Reset","coblocks")))),(0,i.createElement)(u.TabPanel,{activeClass:"is-active",className:"components-coblocks-dimensions-control__mobile-controls",initialTabName:"default",onSelect:t=>{let e="desktop";switch(t){case"desktop":e="tablet";break;case"tablet":e="mobile";break;case"mobile":e="desktop"}const o=document.getElementsByClassName(`components-coblocks-dimensions-control__mobile-controls-item--${d}`);for(let t=0;t<o.length;t++)o[t].style.display="none";"default"===t?document.getElementsByClassName(`components-coblocks-dimensions-control__mobile-controls-item-${d}--tablet`)[0].click():document.getElementsByClassName(`components-coblocks-dimensions-control__mobile-controls-item-${d}--${e}`)[0].style.display="block"},tabs:[{className:`components-coblocks-dimensions-control__mobile-controls-item components-coblocks-dimensions-control__mobile-controls-item--${d} components-button is-button is-default is-secondary components-coblocks-dimensions-control__mobile-controls-item--default components-coblocks-dimensions-control__mobile-controls-item-${d}--default`,name:"default",title:h.ugZ},{className:`components-coblocks-dimensions-control__mobile-controls-item components-coblocks-dimensions-control__mobile-controls-item--${d} components-button is-button is-default is-secondary components-coblocks-dimensions-control__mobile-controls-item--desktop components-coblocks-dimensions-control__mobile-controls-item-${d}--desktop`,name:"desktop",title:h.ugZ},{className:`components-coblocks-dimensions-control__mobile-controls-item components-coblocks-dimensions-control__mobile-controls-item--${d} components-button is-button is-default is-secondary components-coblocks-dimensions-control__mobile-controls-item--tablet components-coblocks-dimensions-control__mobile-controls-item-${d}--tablet`,name:"tablet",title:h.v_G},{className:`components-coblocks-dimensions-control__mobile-controls-item components-coblocks-dimensions-control__mobile-controls-item--${d} components-button is-button is-default is-secondary components-coblocks-dimensions-control__mobile-controls-item--mobile components-coblocks-dimensions-control__mobile-controls-item-${d}--mobile`,name:"mobile",title:h.pY8}]},(e=>{return function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";const o=t[`syncUnits${e}`];return(0,i.createElement)(i.Fragment,null,(0,i.createElement)("div",{className:"components-coblocks-dimensions-control__inputs"},T.map((o=>(0,i.createElement)("input",{"aria-describedby":l?N+"__help":void 0,"aria-label":f[d][o.toLowerCase()],className:"components-coblocks-dimensions-control__number","data-device-type":e,key:`coblocks-dimensions-control-number-${e}-${o}`,min:"padding"===d?0:void 0,onChange:t=>z(t,o),type:"number",value:t[`value${o}${e}`]}))),(0,i.createElement)(u.Tooltip,{text:o?(0,p.__)("Unsync","coblocks"):(0,p.__)("Sync","coblocks")},(0,i.createElement)(u.Button,{"aria-label":(0,p.__)("Sync units","coblocks"),"aria-pressed":!!o,className:"components-coblocks-dimensions-control_sync","data-device-type":e,isPrimary:!!o,isSecondary:!o,isSmall:!0,onClick:()=>L(e)},h.bnu))))}(["default","desktop"].includes(e.name)?"":(o=e.name)&&o[0].toUpperCase()+o.slice(1)||"");var o})),(0,i.createElement)("div",{className:"components-coblocks-dimensions-control__input-labels"},(0,i.createElement)("span",{className:"components-coblocks-dimensions-control__number-label"},(0,p.__)("Top","coblocks")),(0,i.createElement)("span",{className:"components-coblocks-dimensions-control__number-label"},(0,p.__)("Right","coblocks")),(0,i.createElement)("span",{className:"components-coblocks-dimensions-control__number-label"},(0,p.__)("Bottom","coblocks")),(0,i.createElement)("span",{className:"components-coblocks-dimensions-control__number-label"},(0,p.__)("Left","coblocks")),(0,i.createElement)("span",{className:"components-coblocks-dimensions-control__number-label-blank"}))):(0,i.createElement)(u.BaseControl,{help:l,id:"textarea-1",label:r},(0,i.createElement)("div",{className:"components-font-size-picker__controls"},(0,i.createElement)(k,{marginSize:_,paddingSize:y,setAttributes:m,type:d}),(0,i.createElement)(u.Button,{"aria-label":(0,p.sprintf)(
/* translators: %s: a texual label */
(0,p.__)("Advanced %s settings","coblocks"),r.toLowerCase()),isPrimary:"advanced"===n,isSecondary:!0,isSmall:!0,onClick:()=>E("advanced",""),type:"button"},(0,p.__)("Advanced","coblocks"))))))};S.propTypes={attributes:g().number,clientId:g().number,dimensionSize:g().number,help:g().bool,instanceId:g().number,label:g().string,name:g().string,setAttributes:g().func,type:g().string,unit:g().number};var $=(0,y.withInstanceId)(S),B=o(9338),M=o(2175);const{getComputedStyle:C}=window,E=(0,u.withFallbackStyles)(((t,e)=>{const{backgroundColor:o}=e.attributes,n=t.querySelector('[contenteditable="true"]'),i=n?C(n):null;return{fallbackBackgroundColor:o||!i?void 0:i.backgroundColor}}));var L=(0,y.compose)([m.Z,E])((t=>{const{attributes:e,backgroundColor:o,clientId:l,setAttributes:s,setBackgroundColor:m,setTextColor:b,textColor:g,updateBlockAttributes:_,getBlocksByClientId:k}=t,{columns:h,layout:v,marginBottom:y,marginLeft:T,marginRight:f,marginSize:S,marginTop:C,marginBottomTablet:E,marginLeftTablet:L,marginRightTablet:R,marginTopTablet:N,marginBottomMobile:z,marginLeftMobile:U,marginRightMobile:V,marginTopMobile:w,marginSyncUnits:x,marginSyncUnitsTablet:P,marginSyncUnitsMobile:A,marginUnit:F,paddingBottom:I,paddingLeft:O,paddingRight:Z,paddingSize:G,paddingTop:J,paddingBottomTablet:j,paddingLeftTablet:q,paddingRightTablet:D,paddingTopTablet:H,paddingBottomMobile:K,paddingLeftMobile:Y,paddingRightMobile:Q,paddingTopMobile:W,paddingSyncUnits:X,paddingSyncUnitsTablet:tt,paddingSyncUnitsMobile:et,paddingUnit:ot,hasMarginControl:nt}=e;let it=1;h&&(it=parseInt(h.toString().split("-")));const lt=t=>{const e=t.toString().split("-"),o=k(l);s({layout:t}),void 0!==o[0].innerBlocks&&a()(o[0].innerBlocks,((t,o)=>_(t.clientId,{width:e[o]})))};return(0,i.createElement)(i.Fragment,null,h&&it>=1&&(0,i.createElement)(i.Fragment,null,v&&(0,i.createElement)(i.Fragment,null,it>1&&(0,i.createElement)(u.PanelBody,{title:(0,p.__)("Styles","coblocks"),initialOpen:!1},(0,i.createElement)("div",{className:c()("block-editor-block-styles","coblocks-editor-block-styles")},a()(r.sL[it],(t=>{let{name:e,key:o,icon:n}=t;return(0,i.createElement)("div",{key:`style-${e}`,className:c()("block-editor-block-styles__item",{"is-active":v===o}),onClick:()=>lt(o),onKeyPress:()=>lt(o),role:"button",tabIndex:"0","aria-label":e},(0,i.createElement)("div",{className:"block-editor-block-styles__item-preview"},n))})))),v&&(0,i.createElement)(i.Fragment,null,(0,i.createElement)(u.PanelBody,{title:(0,p.__)("Row settings","coblocks")},it>=2&&(0,i.createElement)(B.Z,t),(0,i.createElement)($,(0,n.Z)({},t,{type:"padding",label:(0,p.__)("Padding","coblocks"),help:(0,p.__)("Space inside of the container.","coblocks"),valueTop:J,valueRight:Z,valueBottom:I,valueLeft:O,valueTopTablet:H,valueRightTablet:D,valueBottomTablet:j,valueLeftTablet:q,valueTopMobile:W,valueRightMobile:Q,valueBottomMobile:K,valueLeftMobile:Y,unit:ot,syncUnits:X,syncUnitsTablet:tt,syncUnitsMobile:et,dimensionSize:G})),nt&&(0,i.createElement)($,(0,n.Z)({},t,{type:"margin",label:(0,p.__)("Margin","coblocks"),help:(0,p.__)("Space around the container.","coblocks"),valueTop:C,valueRight:f,valueBottom:y,valueLeft:T,valueTopTablet:N,valueRightTablet:R,valueBottomTablet:E,valueLeftTablet:L,valueTopMobile:w,valueRightMobile:V,valueBottomMobile:z,valueLeftMobile:U,unit:F,syncUnits:x,syncUnitsTablet:P,syncUnitsMobile:A,dimensionSize:S}))),(0,i.createElement)(M.PanelColorSettings,{title:(0,p.__)("Color settings","coblocks"),initialOpen:!1,colorSettings:[{value:o.color,onChange:t=>{m(t),G&&"no"!==G||s({paddingSize:"medium"}),t||s({paddingSize:"no"})},label:(0,p.__)("Background color","coblocks")},{value:g.color,onChange:b,label:(0,p.__)("Text color","coblocks")}]}),(0,i.createElement)(d.OT,(0,n.Z)({},t,{hasOverlay:!0}))))))}))}}]);