"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/block-editor/src/layouts/constrained.js
var constrained_exports = {};
__export(constrained_exports, {
  default: () => constrained_default
});
module.exports = __toCommonJS(constrained_exports);
var import_components = require("@wordpress/components");
var import_i18n = require("@wordpress/i18n");
var import_icons = require("@wordpress/icons");
var import_style_engine = require("@wordpress/style-engine");
var import_use_settings = require("../components/use-settings/index.cjs");
var import_utils = require("./utils.cjs");
var import_gap = require("../hooks/gap.cjs");
var import_components2 = require("../components/index.cjs");
var import_utils2 = require("../hooks/utils.cjs");
var import_definitions = require("./definitions.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
var constrained_default = {
  name: "constrained",
  label: (0, import_i18n.__)("Constrained"),
  inspectorControls: function DefaultLayoutInspectorControls({
    layout,
    onChange,
    layoutBlockSupport = {},
    resetLayout = {},
    clientId
  }) {
    const { wideSize, contentSize, justifyContent = "center" } = layout;
    const {
      allowJustification = true,
      allowCustomContentAndWideSize = true
    } = layoutBlockSupport;
    const onJustificationChange = (value) => {
      onChange({
        ...layout,
        justifyContent: value
      });
    };
    const justificationOptions = [
      {
        value: "left",
        icon: import_icons.justifyLeft,
        label: (0, import_i18n.__)("Justify items left")
      },
      {
        value: "center",
        icon: import_icons.justifyCenter,
        label: (0, import_i18n.__)("Justify items center")
      },
      {
        value: "right",
        icon: import_icons.justifyRight,
        label: (0, import_i18n.__)("Justify items right")
      }
    ];
    const [availableUnits] = (0, import_use_settings.useSettings)("spacing.units");
    const units = (0, import_components.__experimentalUseCustomUnits)({
      availableUnits: availableUnits || ["%", "px", "em", "rem", "vw"]
    });
    const hasLayoutValue = (key, defaultValue) => (layout?.[key] ?? defaultValue) !== (resetLayout?.[key] ?? defaultValue);
    const resetContentSize = () => onChange(
      (0, import_utils2.cleanEmptyObject)({
        ...layout,
        contentSize: resetLayout?.contentSize
      })
    );
    const resetWideSize = () => onChange(
      (0, import_utils2.cleanEmptyObject)({
        ...layout,
        wideSize: resetLayout?.wideSize
      })
    );
    const resetJustification = () => onChange(
      (0, import_utils2.cleanEmptyObject)({
        ...layout,
        justifyContent: resetLayout?.justifyContent
      })
    );
    const hasContentSizeValue = () => hasLayoutValue("contentSize");
    const hasWideSizeValue = () => hasLayoutValue("wideSize");
    const hasJustificationValue = () => hasLayoutValue("justifyContent", "center");
    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
      allowCustomContentAndWideSize && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
          import_components.__experimentalToolsPanelItem,
          {
            label: (0, import_i18n.__)("Content width"),
            hasValue: hasContentSizeValue,
            onDeselect: resetContentSize,
            panelId: clientId,
            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
              import_components.__experimentalUnitControl,
              {
                __next40pxDefaultSize: true,
                label: (0, import_i18n.__)("Content width"),
                labelPosition: "top",
                value: contentSize || wideSize || "",
                onChange: (nextWidth) => {
                  nextWidth = 0 > parseFloat(nextWidth) ? "0" : nextWidth;
                  onChange(
                    (0, import_utils2.cleanEmptyObject)({
                      ...layout,
                      contentSize: nextWidth !== "" ? nextWidth : void 0
                    })
                  );
                },
                units,
                prefix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalInputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: import_icons.alignNone }) })
              }
            )
          }
        ),
        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
          import_components.__experimentalToolsPanelItem,
          {
            label: (0, import_i18n.__)("Wide width"),
            hasValue: hasWideSizeValue,
            onDeselect: resetWideSize,
            panelId: clientId,
            children: [
              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                import_components.__experimentalUnitControl,
                {
                  __next40pxDefaultSize: true,
                  label: (0, import_i18n.__)("Wide width"),
                  labelPosition: "top",
                  value: wideSize || contentSize || "",
                  onChange: (nextWidth) => {
                    nextWidth = 0 > parseFloat(nextWidth) ? "0" : nextWidth;
                    onChange(
                      (0, import_utils2.cleanEmptyObject)({
                        ...layout,
                        wideSize: nextWidth !== "" ? nextWidth : void 0
                      })
                    );
                  },
                  units,
                  prefix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalInputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: import_icons.stretchWide }) })
                }
              ),
              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "block-editor-hooks__layout-constrained-helptext", children: (0, import_i18n.__)(
                "Customize the width for all elements that are assigned to the center or wide columns."
              ) })
            ]
          }
        )
      ] }),
      allowJustification && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        import_components.__experimentalToolsPanelItem,
        {
          label: (0, import_i18n.__)("Justification"),
          hasValue: hasJustificationValue,
          onDeselect: resetJustification,
          panelId: clientId,
          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            import_components.__experimentalToggleGroupControl,
            {
              __next40pxDefaultSize: true,
              label: (0, import_i18n.__)("Justification"),
              value: justifyContent,
              onChange: onJustificationChange,
              children: justificationOptions.map(
                ({ value, icon, label }) => {
                  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                    import_components.__experimentalToggleGroupControlOptionIcon,
                    {
                      value,
                      icon,
                      label
                    },
                    value
                  );
                }
              )
            }
          )
        }
      )
    ] });
  },
  toolBarControls: function DefaultLayoutToolbarControls({
    layout = {},
    onChange,
    layoutBlockSupport
  }) {
    const { allowJustification = true } = layoutBlockSupport;
    if (!allowJustification) {
      return null;
    }
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components2.BlockControls, { group: "block", __experimentalShareWithChildBlocks: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      DefaultLayoutJustifyContentControl,
      {
        layout,
        onChange
      }
    ) });
  },
  getLayoutStyle: function getLayoutStyle({
    selector,
    layout = {},
    viewportOverrides,
    style,
    blockName,
    hasBlockGapSupport,
    layoutDefinitions = import_definitions.LAYOUT_DEFINITIONS
  }) {
    const hasViewportOverrides = viewportOverrides !== void 0;
    const effectiveLayout = hasViewportOverrides ? { ...layout, ...viewportOverrides } : layout;
    const hasViewportOverride = (key) => Object.hasOwn(viewportOverrides || {}, key);
    const { contentSize, wideSize, justifyContent } = effectiveLayout;
    const blockGapStyleValue = (0, import_gap.getGapCSSValue)(style?.spacing?.blockGap);
    const hasBlockGapOverride = !hasViewportOverrides || Object.hasOwn(style?.spacing || {}, "blockGap");
    const hasBlockSpacingOverride = !hasViewportOverrides || Object.hasOwn(style?.spacing || {}, "padding");
    let blockGapValue = "";
    if (!(0, import_utils2.shouldSkipSerialization)(blockName, "spacing", "blockGap")) {
      if (blockGapStyleValue?.top) {
        blockGapValue = (0, import_gap.getGapCSSValue)(blockGapStyleValue?.top);
      } else if (typeof blockGapStyleValue === "string") {
        blockGapValue = (0, import_gap.getGapCSSValue)(blockGapStyleValue);
      }
    }
    const marginLeft = justifyContent === "left" ? "0 !important" : "auto !important";
    const marginRight = justifyContent === "right" ? "0 !important" : "auto !important";
    const hasJustificationOverride = hasViewportOverrides && hasViewportOverride("justifyContent");
    const shouldOutputConstrainedSizes = !hasViewportOverrides || hasViewportOverride("contentSize") || hasViewportOverride("wideSize");
    const constrainedSizeDeclarations = [
      `max-width: ${contentSize ?? wideSize}`
    ];
    if (!hasViewportOverrides || hasJustificationOverride) {
      constrainedSizeDeclarations.push(
        `margin-left: ${marginLeft}`,
        `margin-right: ${marginRight}`
      );
    }
    let output = shouldOutputConstrainedSizes && (!!contentSize || !!wideSize) ? `
						${(0, import_utils.appendSelectors)(
      selector,
      "> :where(:not(.alignleft):not(.alignright):not(.alignfull))"
    )} {
						${constrainedSizeDeclarations.join("; ")};
					}
					${(0, import_utils.appendSelectors)(selector, "> .alignwide")}  {
						max-width: ${wideSize ?? contentSize};
					}
					${(0, import_utils.appendSelectors)(selector, "> .alignfull")} {
						max-width: none;
					}
					` : "";
    if (hasJustificationOverride && !shouldOutputConstrainedSizes) {
      output += `${(0, import_utils.appendSelectors)(
        selector,
        "> :where(:not(.alignleft):not(.alignright):not(.alignfull))"
      )}
				{ margin-left: ${marginLeft}; margin-right: ${marginRight}; }`;
    } else if (!hasViewportOverrides) {
      if (justifyContent === "left") {
        output += `${(0, import_utils.appendSelectors)(
          selector,
          "> :where(:not(.alignleft):not(.alignright):not(.alignfull))"
        )}
			{ margin-left: ${marginLeft}; }`;
      } else if (justifyContent === "right") {
        output += `${(0, import_utils.appendSelectors)(
          selector,
          "> :where(:not(.alignleft):not(.alignright):not(.alignfull))"
        )}
			{ margin-right: ${marginRight}; }`;
      }
    }
    if (hasBlockSpacingOverride && style?.spacing?.padding) {
      const paddingValues = (0, import_style_engine.getCSSRules)(style);
      paddingValues.forEach((rule) => {
        if (rule.key === "paddingRight") {
          const paddingRightValue = rule.value === "0" ? "0px" : rule.value;
          output += `
					${(0, import_utils.appendSelectors)(selector, "> .alignfull")} {
						margin-right: calc(${paddingRightValue} * -1);
					}
					`;
        } else if (rule.key === "paddingLeft") {
          const paddingLeftValue = rule.value === "0" ? "0px" : rule.value;
          output += `
					${(0, import_utils.appendSelectors)(selector, "> .alignfull")} {
						margin-left: calc(${paddingLeftValue} * -1);
					}
					`;
        }
      });
    }
    if (hasBlockGapSupport && hasBlockGapOverride && blockGapValue) {
      output += (0, import_utils.getBlockGapCSS)(
        selector,
        layoutDefinitions,
        "constrained",
        blockGapValue
      );
    }
    return output;
  },
  getOrientation() {
    return "vertical";
  },
  getAlignments(layout) {
    const alignmentInfo = (0, import_utils.getAlignmentsInfo)(layout);
    if (layout.alignments !== void 0) {
      if (!layout.alignments.includes("none")) {
        layout.alignments.unshift("none");
      }
      return layout.alignments.map((alignment) => ({
        name: alignment,
        info: alignmentInfo[alignment]
      }));
    }
    const { contentSize, wideSize } = layout;
    const alignments = [
      { name: "left" },
      { name: "center" },
      { name: "right" }
    ];
    if (contentSize) {
      alignments.unshift({ name: "full" });
    }
    if (wideSize) {
      alignments.unshift({ name: "wide", info: alignmentInfo.wide });
    }
    alignments.unshift({ name: "none", info: alignmentInfo.none });
    return alignments;
  }
};
var POPOVER_PROPS = {
  placement: "bottom-start"
};
function DefaultLayoutJustifyContentControl({ layout, onChange }) {
  const { justifyContent = "center" } = layout;
  const onJustificationChange = (value) => {
    onChange({
      ...layout,
      justifyContent: value
    });
  };
  const allowedControls = ["left", "center", "right"];
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
    import_components2.JustifyContentControl,
    {
      allowedControls,
      value: justifyContent,
      onChange: onJustificationChange,
      popoverProps: POPOVER_PROPS
    }
  );
}
//# sourceMappingURL=constrained.cjs.map
