{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "flexa/social-icon",
  "version": "1.0.0",
  "title": "Social Icons",
  "category": "flexa",
  "description": "Linked row of social network icons — official brand artwork or custom light/dark tints per icon, with per-device size, gap, alignment and a hover motion.",
  "keywords": [
    "flexa",
    "social",
    "icon",
    "profile",
    "follow",
    "network"
  ],
  "textdomain": "flexa-block",
  "example": {
    "attributes": {
      "isExamplePreview": true
    },
    "viewportWidth": 500
  },
  "attributes": {
    "isExamplePreview": {
      "type": "boolean",
      "default": false
    },
    "blockId": {
      "type": "string"
    },
    "htmlTag": {
      "type": "string",
      "default": "div"
    },
    "items": {
      "type": "array",
      "default": [
        {
          "platform": "facebook",
          "link": {
            "url": "",
            "target": "",
            "rel": ""
          },
          "colorMode": "official",
          "color": {
            "light": "",
            "dark": ""
          }
        },
        {
          "platform": "x",
          "link": {
            "url": "",
            "target": "",
            "rel": ""
          },
          "colorMode": "official",
          "color": {
            "light": "",
            "dark": ""
          }
        },
        {
          "platform": "instagram",
          "link": {
            "url": "",
            "target": "",
            "rel": ""
          },
          "colorMode": "official",
          "color": {
            "light": "",
            "dark": ""
          }
        }
      ]
    },
    "iconSize": {
      "type": "object",
      "default": {
        "desktop": {},
        "tablet": {},
        "mobile": {}
      }
    },
    "gap": {
      "type": "object",
      "default": {
        "desktop": {},
        "tablet": {},
        "mobile": {}
      }
    },
    "alignment": {
      "type": "object",
      "default": {
        "desktop": "",
        "tablet": "",
        "mobile": ""
      }
    },
    "hoverEffect": {
      "type": "string",
      "default": "",
      "enum": [
        "",
        "grow",
        "shrink",
        "lift",
        "rotate"
      ]
    },
    "spacing": {
      "type": "object",
      "default": {
        "desktop": {},
        "tablet": {},
        "mobile": {}
      }
    },
    "background": {
      "type": "object",
      "default": {
        "type": "none",
        "color": {
          "light": "",
          "dark": ""
        },
        "gradient": {
          "light": "",
          "dark": ""
        }
      }
    },
    "border": {
      "type": "object",
      "default": {
        "desktop": {
          "style": "",
          "width": {
            "top": "",
            "right": "",
            "bottom": "",
            "left": "",
            "unit": "px"
          },
          "color": {
            "light": "",
            "dark": ""
          },
          "radius": {
            "topLeft": "",
            "topRight": "",
            "bottomRight": "",
            "bottomLeft": "",
            "unit": "px"
          }
        },
        "tablet": {},
        "mobile": {}
      }
    },
    "boxShadow": {
      "type": "object",
      "default": {
        "horizontal": "0",
        "vertical": "4",
        "blur": "12",
        "spread": "0",
        "color": {
          "light": "rgba(0,0,0,0.1)",
          "dark": ""
        },
        "inset": false,
        "enabled": false
      }
    },
    "responsiveVisibility": {
      "type": "object",
      "default": {
        "hideOnDesktop": false,
        "hideOnTablet": false,
        "hideOnMobile": false
      }
    },
    "animation": {
      "type": "object",
      "default": {
        "type": "none",
        "duration": "normal",
        "delay": ""
      }
    },
    "htmlAttributes": {
      "type": "object",
      "default": {
        "customAttributes": []
      }
    }
  },
  "supports": {
    "anchor": true,
    "className": true,
    "html": false,
    "align": false
  },
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "render": "file:./render.php"
}import { useState } from 'react';
import { __ } from '@wordpress/i18n';
import {
	Box,
	Typography,
	CircularProgress,
	FormControlLabel,
	Checkbox,
	Grid,
	Button,
	Stack,
} from '@elementor/ui';
import * as PropTypes from 'prop-types';
import { htmlDecodeTextContent } from 'elementor-pro-app/utils';
import { UpgradeTooltip } from './upgrade-tooltip';
const DEFAULT_VISIBLE_ITEMS_COUNT = 16;

export function ListSettingSection( {
	items,
	title,
	loading,
	settings,
	onSettingChange,
	settingKey,
	disabled = false,
	tooltip = false,
} ) {
	const [ showMore, setShowMore ] = useState( false );

	return (
		<Box key={ settingKey } sx={ { mb: 3, border: 1, borderRadius: 1, borderColor: 'action.focus', p: 2.5 } }>
			<Stack spacing={ 2 } >
				<Typography variant="h6" >
					{ title }
				</Typography>
				<Grid container spacing={ 1 } alignItems="start" >
					{ loading
						? <Grid item xs={ 12 } sx={ { p: 1, alignItems: 'center', textAlign: 'center' } } >
							<CircularProgress size={ 30 } />
						</Grid>
						: <>
							<Grid key={ 'all' } item xs={ 12 } sx={ { py: 1, px: 0 } } >
								<UpgradeTooltip disabled={ disabled && settings.length === items.length } tooltip={ tooltip }>
									<Box sx={ {
										pointerEvents: 'auto',
										...( settings.length === items.length && disabled && { cursor: 'pointer' } ),
									} }>
										<FormControlLabel
											control={
												<Checkbox
													color="info"
													checked={ settings.length === items.length }
													indeterminate={ settings.length > 0 && ( settings.length !== items.length ) }
													onChange={ ( e, checked ) => {
														if ( checked ) {
															onSettingChange( items.map( ( { value } ) => value ), true );
														} else {
															onSettingChange( [], true );
														}
													} }
													sx={ { p: 0 } }
													disabled={ disabled }
												/>
											}
											sx={ {
												gap: 1,
												...( settings.length === items.length && disabled && { cursor: 'pointer' } ),
											} }
											slotProps={ {
												typography: {
													sx: {
														fontWeight: 500,
														...( settings.length === items.length && disabled && { cursor: 'pointer' } ),
													},
												},
											} }
											label={ `${ __( 'All', 'elementor-pro' ) } ${ title.toLowerCase() }` }
										/>
									</Box>
								</UpgradeTooltip>
							</Grid>
							{ ( showMore ? items : items.slice( 0, DEFAULT_VISIBLE_ITEMS_COUNT ) ).map( ( item ) => {
								return (
									<Grid key={ item.value } item xs={ 3 } sx={ { py: 1, px: 0 } } >
										<UpgradeTooltip disabled={ disabled && settings.includes( item.value ) } tooltip={ tooltip }>
											<Box sx={ {
												pointerEvents: 'auto',
												...( settings.includes( item.value ) && disabled && { cursor: 'pointer' } ),
											} }>
												<FormControlLabel
													control={
														<Checkbox
															color="info"
															checked={ settings.includes( item.value ) }
															onChange={ ( e, checked ) => {
																if ( checked ) {
																	onSettingChange( [ ...settings, item.value ] );
																} else {
																	onSettingChange( settings.filter( ( setting ) => setting !== item.value ) );
																}
															} }
															sx={ {
																p: 0,
																...( settings.includes( item.value ) && disabled && { cursor: 'pointer' } ),
															} }
															disabled={ disabled }
														/>
													}
													sx={ {
														maxWidth: '100%',
														gap: 1,
														...( settings.includes( item.value ) && disabled && { cursor: 'pointer' } ),
													} }
													slotProps={ {
														typography: {
															sx: {
																fontWeight: 400,
																maxWidth: '100%',
																overflow: 'hidden',
																textOverflow: 'ellipsis',
																whiteSpace: 'nowrap',
																...( settings.includes( item.value ) && disabled && { cursor: 'pointer' } ),
															},
														},
													} }
													label={ htmlDecodeTextContent( item.label ) }
												/>
											</Box>
										</UpgradeTooltip>
									</Grid>
								);
							} ) }
						</>
					}
				</Grid>
			</Stack>

			{ items.length > DEFAULT_VISIBLE_ITEMS_COUNT && (
				<Button
					variant="text"
					color="info"
					onClick={ () => setShowMore( ! showMore ) }
				>
					{ showMore ? __( 'Show less', 'elementor' ) : __( 'Show more', 'elementor' ) }
				</Button>
			) }
		</Box>
	);
}

ListSettingSection.propTypes = {
	title: PropTypes.string.isRequired,
	children: PropTypes.node,
	loading: PropTypes.bool,
	disabled: PropTypes.bool,
	checked: PropTypes.bool,
	settingKey: PropTypes.string,
	onSettingChange: PropTypes.func.isRequired,
	tooltip: PropTypes.bool,
	items: PropTypes.arrayOf(
		PropTypes.shape( {
			label: PropTypes.string.isRequired,
			value: PropTypes.oneOfType( [ PropTypes.string, PropTypes.number ] ),
		} ),
	),
	settings: PropTypes.arrayOf( PropTypes.oneOfType( [ PropTypes.string, PropTypes.number ] ) ),
};
/*! elementor-pro - v3.33.0 - 10-11-2025 */
"use strict";(self.webpackChunkelementor_pro=self.webpackChunkelementor_pro||[]).push([[635],{7193:(e,l)=>{Object.defineProperty(l,"__esModule",{value:!0}),l.default=void 0;class codeHighlightHandler extends elementorModules.frontend.handlers.Base{onInit(...e){super.onInit(...e),Prism.highlightAllUnder(this.$element[0],!1)}onElementChange(){Prism.highlightAllUnder(this.$element[0],!1)}}l.default=codeHighlightHandler}}]);<article id="post-" class="">
		<div class="entry-content">
					</div>
</article>