blablablocks-tabs-block/build/tab/index.js

(()=>{"use strict";const e=window.wp.blocks;function t(e){var s,a,l="";if("string"==typeof e||"number"==typeof e)l+=e;else if("object"==typeof e)if(Array.isArray(e)){var n=e.length;for(s=0;s<n;s++)e[s]&&(a=t(e[s]))&&(l&&(l+=" "),l+=a)}else for(a in e)e[a]&&(l&&(l+=" "),l+=a);return l}const s=function(){for(var e,s,a=0,l="",n=arguments.length;a<n;a++)(e=arguments[a])&&(s=t(e))&&(l&&(l+=" "),l+=s);return l},a=window.wp.i18n,l=window.wp.data,n=window.wp.element,o=window.wp.blockEditor,r=window.wp.components,c=(window.React,(e,t)=>{const s=(0,o.__experimentalUseBorderProps)(e),a=t?.();return{...s,style:{...s.style,..."number"==typeof a&&{borderRadius:`${a}px`}}}});function i(e,t){return{style:{...c(!e?.tabBorder?.onActive||t?{style:e?.tabBorder}:{style:{}},(()=>e?.tabBorder?.border?.radius)).style}}}const b=window.ReactJSXRuntime,{Fill:d,Slot:u}=(0,r.createSlotFill)(Symbol("BlaBlaBlocksTabsList")),h=({children:e,tabsClientId:t})=>(0,b.jsx)(d,{name:`BlaBlaBlocksTabsList-${t}`,children:e}),p=({tabsClientId:e,attributes:t})=>{const{className:a,style:l}=function(e){const t=(0,o.__experimentalGetSpacingClassesAndStyles)(e),s=(0,o.__experimentalGetColorClassesAndStyles)(e),a=c(e,(()=>e.style?.border?.radius)),l="horizontal"===e.orientation?(()=>{switch(e.justification){case"right":return{margin:"0 0 0 auto"};case"center":return{margin:"0 auto"};default:return{margin:"0 0 auto"}}})():{},n="vertical"===e.orientation?{minWidth:`${e.width||50}%`}:{};return{className:[t.classes,a.className,s.className].filter(Boolean).join(" "),style:{...t.style,...a.style,...s.style,...l,...n}}}(t);return(0,b.jsx)(u,{name:`BlaBlaBlocksTabsList-${e}`,bubblesVirtually:!0,as:"div",role:"tablist",className:s(a,"blablablocks-tabs-buttons"),style:l})},k=(r.SVG,r.Path,(0,b.jsx)(r.SVG,{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,b.jsx)(r.Path,{fillRule:"evenodd",clipRule:"evenodd",d:"M5.5498 10.3501V6.3501H9.8498V10.3501H11.3498V6.1001C11.3498 5.40974 10.7902 4.8501 10.0998 4.8501H5.2998C4.60945 4.8501 4.0498 5.40974 4.0498 6.1001V10.3501H5.5498ZM20 12.6001H4V14.1001L20 14.1001V12.6001ZM14 17.1001H4V18.6001H14V17.1001Z"})}));r.SVG,r.Path;const x=({selectedCategory:e,setSelectedCategory:t,searchTerm:s,setSearchTerm:o})=>{const{patternCategories:c,blockPatterns:i,error:d}=(0,l.useSelect)((e=>{try{const t=e("core");return{patternCategories:t.getBlockPatternCategories()||[],blockPatterns:t.getBlockPatterns()||[],error:null}}catch(e){return{patternCategories:[],blockPatterns:[],error:e}}}),[]),u=(0,n.useMemo)((()=>c.filter((e=>i.some((t=>Array.isArray(t.categories)&&t.categories.includes(e.name)))))),[c,i]);return d?(0,b.jsx)("div",{className:"bbb-tabs-patterns-sidebar--error",children:(0,a.__)("Failed to load block patterns.","blablablocks-tabs-block")}):c.length||i.length?(0,b.jsxs)("div",{className:"bbb-tabs-patterns-sidebar",children:[(0,b.jsx)(r.SearchControl,{__nextHasNoMarginBottom:!0,value:s,placeholder:(0,a.__)("Search","blablablocks-tabs-block"),onChange:o}),!s&&(0,b.jsxs)("div",{className:"bbb-tabs-patterns-sidebar__list",children:[(0,b.jsxs)(r.Button,{__next40pxDefaultSize:!0,isPressed:null===e,onClick:()=>t(null),style:{display:"flex",justifyContent:"space-between",width:"100%",textAlign:"left"},children:[(0,a.__)("All","blablablocks-tabs-block"),(0,b.jsx)("span",{className:"bbb-tabs-patterns-sidebar__count",children:i.length})]}),u.map((({name:s,label:a})=>{const l=i.filter((e=>Array.isArray(e.categories)&&e.categories.includes(s))).length||0;return(0,b.jsxs)(r.Button,{__next40pxDefaultSize:!0,isPressed:e===s,onClick:()=>t(s),style:{display:"flex",justifyContent:"space-between",width:"100%",textAlign:"left"},children:[a,(0,b.jsx)("span",{className:"bbb-tabs-patterns-sidebar__count",children:l})]},s)}))]})]}):(0,b.jsx)("div",{className:"bbb-tabs-patterns-sidebar--loading",children:(0,a.__)("Loading…","blablablocks-tabs-block")})},m=({selectedCategory:e,searchTerm:t,onSelect:s})=>{const[c,i]=(0,n.useState)(1),[d,u]=(0,n.useState)(!0),[h,p]=(0,n.useState)(null),{patterns:k,hasResolved:x}=(0,l.useSelect)((e=>{try{const t=e("core");return{patterns:t.getBlockPatterns(),hasResolved:t.hasFinishedResolution("getBlockPatterns")}}catch(e){return{patterns:[],hasResolved:!0,error:e}}}),[e]);(0,n.useEffect)((()=>{i(1)}),[t,e]),(0,n.useEffect)((()=>{if(u(!0),!x)return;const e=setTimeout((()=>u(!1)),300);return()=>clearTimeout(e)}),[k,t,x]);const m=(0,n.useMemo)((()=>k&&Array.isArray(k)?k.filter((s=>{if(!s)return!1;const a=!e||s.categories&&s.categories.includes(e),l=s.title&&s.title.toLowerCase().includes((t||"").toLowerCase());return a&&l})):[]),[k,e,t]),g=Math.max(1,Math.ceil((m?.length||0)/20));(0,n.useEffect)((()=>{c>g&&i(g)}),[g,c]);const _=(0,n.useMemo)((()=>m.slice(20*(c-1),20*c)),[m,c]),j=e=>{i((t=>{const s=t+e;return Math.max(1,Math.min(s,g))}))};return h?(0,b.jsx)(r.Notice,{status:"error",isDismissible:!1,children:h}):(0,b.jsx)("div",{className:"bbb-tabs-patterns-grid",children:d?(0,b.jsx)("div",{className:"bbb-tabs-patterns-loading",children:(0,b.jsx)(r.Spinner,{})}):(0,b.jsxs)(b.Fragment,{children:[t&&(()=>{const e=m.length,t=(0,a.sprintf)(/* translators: %d: Number of patterns found. */ /* translators: %d: Number of patterns found. */
(0,a._n)("%d pattern found","%d patterns found",e,"blablablocks-tabs-block"),e);
/* translators: %d: Number of patterns found. */return(0,b.jsx)(r.__experimentalHeading,{className:"tabs-patterns-no-results",style:{paddingBottom:"32px"},children:t})})(),m?.length>0&&(0,b.jsx)(r.__experimentalGrid,{gap:8,columns:[1,2,3],align:"start",className:"bbb-tabs-patterns-grid-content",children:_.map((e=>(0,b.jsx)(r.Button,{className:"bbb-tabs-patterns-item",onClick:()=>(e=>{if(e&&"function"==typeof s)try{s(e)}catch(e){p((0,a.__)("Failed to select pattern. Please try again.","blablablocks-tabs-block"))}})(e),children:(0,b.jsxs)(r.__experimentalVStack,{alignment:"top",align:"left",style:{width:"100%",height:"100%"},children:[e.content?(0,b.jsx)(o.BlockPreview,{blocks:wp.blocks.parse(e.content),viewportWidth:800}):(0,b.jsx)("div",{className:"bbb-tabs-patterns-preview-error",children:(0,a.__)("Preview not available","blablablocks-tabs-block")}),(0,b.jsx)(r.__experimentalText,{align:"left",size:12,children:e.title||(0,a.__)("Untitled pattern","blablablocks-tabs-block")})]})},e.name||`pattern-${e.id||Math.random()}`)))}),m.length>0&&g>1&&(0,b.jsxs)("div",{className:"bbb-tabs-patterns-pagination",children:[(0,b.jsx)(r.Button,{disabled:1===c,onClick:()=>j(-1),className:"tabs-patterns-pagination-prev",children:(0,a.__)("Previous","blablablocks-tabs-block")}),(0,b.jsx)("span",{className:"tabs-patterns-pagination-status",children:`${c} / ${g}`}),(0,b.jsx)(r.Button,{disabled:c===g,onClick:()=>j(1),className:"tabs-patterns-pagination-next",children:(0,a.__)("Next","blablablocks-tabs-block")})]})]})})},g=function({clientId:t}){const{replaceInnerBlocks:s}=(0,l.useDispatch)(o.store),c=(0,o.useBlockProps)({className:"bbb-tab-placeholder"}),[i,d]=(0,n.useState)(null),[u,h]=(0,n.useState)(!1),[p,g]=(0,n.useState)(null),[_,j]=(0,n.useState)(""),[y,f]=(0,n.useState)(null),v=(0,n.useCallback)((()=>{try{const a=[["core/paragraph"]],l=(0,e.createBlocksFromInnerBlocksTemplate)(a);s(t,l,!0),d("blank")}catch(e){f((0,a.__)("Failed to create blank tab. Please try again.","blablablocks-tabs-block"))}}),[t,s]),S=(0,n.useCallback)((l=>{if(l&&l.content)try{const a=(0,e.parse)(l.content);if(!a||0===a.length)throw new Error("No valid blocks found in pattern");s(t,a,!0),h(!1),d("pattern")}catch(e){f((0,a.__)("Failed to apply pattern. Please try another one.","blablablocks-tabs-block"))}else f((0,a.__)("Invalid pattern selected. Please choose another pattern.","blablablocks-tabs-block"))}),[t,s]);return(0,b.jsxs)("div",{...c,children:[y&&(0,b.jsx)(r.Notice,{status:"error",isDismissible:!0,onRemove:()=>{f(null)},children:y}),!i&&(0,b.jsxs)(r.Placeholder,{icon:k,instructions:(0,a.__)("Choose a pattern or start blank.","blablablocks-tabs-block"),label:(0,a.__)("Tab","blablablocks-tabs-block"),children:[(0,b.jsx)(r.Button,{variant:"primary",onClick:()=>{h(!0),f(null)},children:(0,a.__)("Choose","blablablocks-tabs-block")}),(0,b.jsx)(r.Button,{variant:"secondary",onClick:v,children:(0,a.__)("Start blank","blablablocks-tabs-block")})]}),u&&(0,b.jsx)(r.Modal,{title:(0,a.__)("Patterns","blablablocks-tabs-block"),isFullScreen:!0,onRequestClose:()=>{h(!1)},children:(0,b.jsxs)("div",{className:"bbb-tabs-patterns-container",children:[(0,b.jsx)(x,{selectedCategory:p,setSelectedCategory:g,setSearchTerm:j,searchTerm:_}),(0,b.jsx)(m,{selectedCategory:p,searchTerm:_,onSelect:S,onError:f})]})})]})},_=function({attributes:e,setAttributes:t,isOpen:s,setOpen:l,svgCode:o,setSvgCode:c}){const[i,d]=(0,n.useState)(!1),[u,h]=(0,n.useState)(""),p=()=>l(!1),k=e=>{if(!e)return h(""),!1;const t=e.trim();if(!t)return!1;const s=t.match(/<svg[\s\S]*?>[\s\S]*?<\/svg>/gi);return s&&0!==s.length?s.join("").trim()!==t?(h((0,a.__)("Only SVG code is allowed. Remove any extra text outside <svg> tags.","blablablocks-tabs-block")),!1):(h(""),!0):(h((0,a.__)("Invalid SVG code. Please provide valid SVG(s).","blablablocks-tabs-block")),!1)};return(0,n.useEffect)((()=>{if(s){const t=o||e.tabIcon||"";d(k(t))}}),[s]),s?(0,b.jsx)(r.Modal,{className:"bbb-custom-icon-modal",title:e.tabIcon?(0,a.__)("Edit Custom Icon","blablablocks-tabs-block"):(0,a.__)("Add Custom Icon","blablablocks-tabs-block"),size:"large",onRequestClose:p,children:(0,b.jsxs)(r.__experimentalGrid,{align:"stretch",templateColumns:"auto 300px",gap:5,style:{height:"100%"},children:[(0,b.jsx)(r.TextareaControl,{__nextHasNoMarginBottom:!0,className:"bbb-icon-textarea",hideLabelFromVision:!0,placeholder:"Paste your svg code here",value:o||e.tabIcon,onChange:e=>{c(e),d(k(e))}}),(0,b.jsxs)(r.__experimentalVStack,{spacing:5,justify:"space-between",style:{height:"100%"},children:[(0,b.jsxs)(r.__experimentalVStack,{spacing:5,children:[(0,b.jsx)(r.Card,{style:{height:"200px"},isRounded:!1,children:i?(0,b.jsx)("div",{className:"bbb-icon-preview",dangerouslySetInnerHTML:{__html:o||e.tabIcon}}):(0,b.jsx)("div",{className:"bbb-icon-preview",children:(0,a.__)("SVG Preview","blablablocks-tabs-block")})}),u&&(0,b.jsx)(r.Notice,{status:"error",isDismissible:!1,children:u})]}),(0,b.jsx)(r.__experimentalHStack,{justify:"flex-end",children:(0,b.jsx)(r.Button,{variant:"primary",onClick:()=>{i&&(t({tabIcon:o}),p())},disabled:!i,children:(0,a.__)("Insert custom icon","blablablocks-tabs-block")})})]})]})}):null},j=window.wp.primitives,y=(0,b.jsx)(j.SVG,{viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:(0,b.jsx)(j.Path,{d:"M20.8 10.7l-4.3-4.3-1.1 1.1 4.3 4.3c.1.1.1.3 0 .4l-4.3 4.3 1.1 1.1 4.3-4.3c.7-.8.7-1.9 0-2.6zM4.2 11.8l4.3-4.3-1-1-4.3 4.3c-.7.7-.7 1.8 0 2.5l4.3 4.3 1.1-1.1-4.3-4.3c-.2-.1-.2-.3-.1-.4z"})}),f=(0,b.jsx)(j.SVG,{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",children:(0,b.jsx)(j.Path,{d:"M7 11.5h10V13H7z"})}),v=function({attributes:e,setAttributes:t,setOpen:s,setSvgCode:l}){return(0,b.jsx)(r.ToolbarGroup,{children:(0,b.jsx)(r.ToolbarDropdownMenu,{controls:[{icon:y,title:e.tabIcon?(0,a.__)("Edit custom SVG icon","blablablocks-tabs-block"):(0,a.__)("Add custom SVG icon","blablablocks-tabs-block"),onClick:()=>s(!0)},{icon:f,title:(0,a.__)("Reset icon","blablablocks-tabs-block"),onClick:()=>{t({tabIcon:""}),l("")},isDisabled:!e.tabIcon}],text:e.tabIcon?(0,a.__)("Replace icon","blablablocks-tabs-block"):(0,a.__)("Add Icon","blablablocks-tabs-block"),icon:""})})},S=function({attributes:e,setAttributes:t}){const[s,a]=(0,n.useState)(!1),[l,o]=(0,n.useState)("");return(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(v,{attributes:e,setAttributes:t,setOpen:a,setSvgCode:o}),(0,b.jsx)(_,{attributes:e,setAttributes:t,isOpen:s,setOpen:a,setSvgCode:o,svgCode:l})]})},C=JSON.parse('{"UU":"blablablocks/tab"}');(0,e.registerBlockType)(C.UU,{icon:k,edit:function({clientId:e,isSelected:t,attributes:c,setAttributes:d}){const{updateBlockAttributes:u,selectBlock:k}=(0,l.useDispatch)(o.store),{hasChildBlocks:x,tabsClientId:m,hasTabSelected:_,isDefaultTab:j,blockIndex:y,isTabsClientSelected:f,forceDisplay:v,hasInnerBlocksSelected:C,lastSelectedTabClientId:w,parentAttrs:B}=(0,l.useSelect)((t=>{const{getBlockOrder:s,getBlockIndex:a,getBlockRootClientId:l,getBlockAttributes:n,hasSelectedInnerBlock:o,isBlockSelected:r,getMultiSelectedBlocksEndClientId:c}=t("core/block-editor"),i=l(e),b=n(i),d=o(i,!0),u=o(e,!0),h=a(e),p=s(i).length,k=b?.activeTab,x="number"==typeof k&&k>=0&&k<p?k===h:0===h,m=r(i);return{blockIndex:h,tabsClientId:i,hasChildBlocks:s(e).length>0,hasInnerBlocksSelected:u,isTabsClientSelected:m,isDefaultTab:x,forceDisplay:x&&m,hasTabSelected:d,lastSelectedTabClientId:c(),parentAttrs:b}}),[e]),I=(0,n.useMemo)((()=>!!(t||C||v)||!(!j||f||t||_)||!(!_||w!==e)),[e,t,C,j,v,f,_,w]),N=(0,o.getTypographyClassesAndStyles)(B),T=(0,o.useBlockProps)({className:s("blablablocks-tab","blablablocks-tab-container","blablablocks-tabs__"+B.orientation,"blablablocks-tabs__"+B.verticalPosition,"blablablocks-tabs-icon__"+B.iconPosition)}),P=(0,o.useInnerBlocksProps)({className:"blablablocks-tab-content","aria-labelledby":`tab-${c.tabId}`,id:`tab-${c.tabId}`,role:"tabpanel",tabIndex:I?0:-1});return(0,n.useEffect)((()=>{c.tabId!==e&&d({tabId:e})}),[e,c.tabId]),(0,b.jsxs)(b.Fragment,{children:[(0,b.jsxs)("div",{...T,children:[(0,b.jsx)(h,{tabsClientId:m,children:(0,b.jsxs)("div",{id:c.tabId,className:s("blablablock-tab-btn",{"is-bbb-active-tab":I}),role:"tab",tabIndex:0,"aria-selected":I,"aria-controls":c.tabId,onClick:()=>k(e),onKeyDown:t=>{if("Enter"===t.key||" "===t.key){if(t.target.closest(".tab-button-text"))return;t.preventDefault(),k(e)}},...i(B,I),children:[c.tabIcon&&(0,b.jsx)("span",{className:"bbb-tab-icon",dangerouslySetInnerHTML:{__html:c.tabIcon}}),(0,b.jsx)(o.RichText,{tagName:"span",className:s("tab-button-text",N.className),withoutInteractiveFormatting:!0,value:c.tabname,placeholder:(0,a.__)("Add Tab Label…"),onChange:e=>d({tabname:e}),style:N.style})]})}),I&&(0,b.jsxs)(b.Fragment,{children:[(0,b.jsx)(p,{tabsClientId:m,attributes:B},y),x?(0,b.jsx)("div",{...P}):(0,b.jsx)(g,{clientId:e})]})]}),(0,b.jsx)(o.InspectorControls,{children:(0,b.jsx)(r.PanelBody,{title:(0,a.__)("Settings","blablablocks-tabs-block"),initialOpen:!0,children:(0,b.jsx)(r.ToggleControl,{label:(0,a.__)("Set as default tab","blablablocks-tabs-block"),help:(0,a.__)("This tab will be active when the page first loads.","blablablocks-tabs-block"),checked:j,onChange:e=>(e=>{u(m,{activeTab:e?y:0})})(e)})})}),(0,b.jsx)(o.BlockControls,{children:(0,b.jsx)(S,{attributes:c,setAttributes:d})})]})},save:function(){return(0,b.jsx)(o.InnerBlocks.Content,{})}})})();