{
  "name": "form-layout",
  "version": "20.0.2",
  "jetVersion": "^20.0.2",
  "pack": "oj-c",
  "type": "composite",
  "dependencyScope": "runtime",
  "license": "https://opensource.org/licenses/UPL",
  "implements": [
    "CFormLayoutElement"
  ],
  "displayName": "Form Layout",
  "description": "A form layout manages the layout of labels and fields in a form.",
  "help": "oj-c.FormLayout.html",
  "main": "oj-c/form-layout",
  "status": [
    {
      "type": "candidate",
      "since": "17.0.0"
    }
  ],
  "extension": {
    "catalog": {
      "category": "Forms"
    },
    "vbdt": {
      "module": "oj-c/form-layout",
      "defaultColumns": 6,
      "minColumns": 2
    },
    "oracle": {
      "icon": "oj-ux-ico-form-layout",
      "uxSpecs": [
        "form-layout"
      ]
    },
    "webelement": {
      "package": "@oracle/oraclejet-core-pack",
      "version": "20.0.2",
      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet/cpwdtsdoc/classes/FormLayoutWebElement.html",
      "export": "findFormLayout",
      "main": "@oracle/oraclejet-core-pack/webdriver"
    }
  },
  "propertyLayout": [
    {
      "propertyGroup": "common",
      "items": [
        "columns",
        "columnSpan",
        "direction",
        "labelEdge",
        "labelStartWidth",
        "labelWrapping",
        "maxColumns",
        "readonly",
        "userAssistanceDensity"
      ]
    }
  ],
  "requirements": [
    {
      "type": "anyOf",
      "label": "accessibility",
      "slots": [
        ""
      ]
    }
  ],
  "since": "16.0.0",
  "slots": {
    "": {
      "description": "The default slot is the content of the form layout. The oj-c-form-layout element expects core pack form component children for the default slot.",
      "displayName": "default",
      "help": "#Default"
    }
  },
  "properties": {
    "columns": {
      "type": "number",
      "description": "Specifies how many columns should be displayed (fixed). If positive, overrides maxColumns.",
      "displayName": "Columns",
      "help": "#columns",
      "value": 0
    },
    "columnSpan": {
      "type": "number",
      "description": "Specifies how many columns this component should span when this it is a child of a form layout.",
      "displayName": "Column Span",
      "help": "#columnSpan",
      "value": 1
    },
    "direction": {
      "type": "string",
      "description": "Specifies the layout direction of the form layout children.",
      "displayName": "Direction",
      "help": "#direction",
      "propertyEditorValues": {
        "column": {
          "description": "Components are laid out in columns.",
          "displayName": "Column"
        },
        "row": {
          "description": "Components are laid out in rows.",
          "displayName": "Row"
        }
      },
      "enumValues": [
        "row",
        "column"
      ],
      "value": "row"
    },
    "fullWidth": {
      "type": "boolean",
      "description": "Indicates if the form layout will use 100% of the container's width.",
      "displayName": "Full Width",
      "help": "#fullWidth",
      "value": false
    },
    "labelEdge": {
      "type": "string",
      "description": "Specifies how the child form components should position their labels.",
      "displayName": "Label Edge",
      "help": "#labelEdge",
      "propertyEditorValues": {
        "inside": {
          "description": "The label floats over the input element, but moves up on focus or when the component has a value (default, if unspecified).",
          "displayName": "Inside"
        },
        "start": {
          "description": "The label will be placed before the start of the component.",
          "displayName": "Start"
        },
        "top": {
          "description": "The label will be placed on top of the component.",
          "displayName": "Top"
        }
      },
      "enumValues": [
        "start",
        "top",
        "inside"
      ],
      "binding": {
        "consume": {
          "name": "containerLabelEdge"
        },
        "provide": [
          {
            "name": "containerLabelEdge"
          },
          {
            "name": "labelEdge"
          }
        ]
      }
    },
    "labelStartWidth": {
      "type": "number|string",
      "description": "The width of the label when labelEdge is 'start'.",
      "displayName": "Label Start Width",
      "help": "#labelStartWidth",
      "binding": {
        "consume": {
          "name": "labelWidth"
        },
        "provide": [
          {
            "name": "labelStartWidth"
          },
          {
            "name": "labelWidth"
          }
        ]
      }
    },
    "labelWrapping": {
      "type": "string",
      "status": [
        {
          "type": "deprecated",
          "since": "18.0.0",
          "description": "Label truncation for 'start' and 'top' aligned labels is no longer recommended by the Redwood Design System. The default for labelWrapping was 'wrap' and that is now the only suggested pattern by UX design for 'start' and 'top' aligned labels. 'inside' aligned labels are always truncated per UX design and are not affected by this property's value."
        }
      ],
      "description": "Should the labels wrap or truncate when there is not enough available space.",
      "displayName": "Label Wrapping",
      "help": "#labelWrapping",
      "propertyEditorValues": {
        "truncate": {
          "description": "Label will truncate if needed.",
          "displayName": "Truncate"
        },
        "wrap": {
          "description": "Label will wrap if needed.",
          "displayName": "Wrap"
        }
      },
      "enumValues": [
        "truncate",
        "wrap"
      ],
      "binding": {
        "consume": {
          "name": "labelWrapping"
        },
        "provide": [
          {
            "name": "labelWrapping"
          }
        ]
      }
    },
    "maxColumns": {
      "type": "number",
      "description": "Specifies how many columns should be displayed (responsive). This prop is ignored if columns has a positive value.",
      "displayName": "Max Columns",
      "help": "#maxColumns",
      "value": 1
    },
    "readonly": {
      "type": "boolean",
      "description": "Whether the child components should be rendered as readonly.",
      "displayName": "Readonly",
      "help": "#readonly",
      "binding": {
        "consume": {
          "name": "containerReadonly"
        },
        "provide": [
          {
            "name": "containerReadonly",
            "default": false
          },
          {
            "name": "readonly"
          }
        ]
      }
    },
    "userAssistanceDensity": {
      "type": "string",
      "description": "Specifies the density of the children form component's user assistance presentation.",
      "displayName": "User Assistance Density",
      "help": "#userAssistanceDensity",
      "propertyEditorValues": {
        "reflow": {
          "description": "Messages, help, hints, and required are all shown inline under the field with no reserved space.",
          "displayName": "Reflow"
        },
        "efficient": {
          "description": "Messages, help, hints, and required are all shown inline under the field with reserved space.",
          "displayName": "Efficient"
        },
        "compact": {
          "description": "Messages, help, hints, and required will not be shown inline; they will show in a mode that keeps the screen more compact, like a popup for the messages, and a required icon to indicate Required.",
          "displayName": "Compact"
        }
      },
      "enumValues": [
        "compact",
        "reflow",
        "efficient"
      ],
      "binding": {
        "consume": {
          "name": "containerUserAssistanceDensity"
        },
        "provide": [
          {
            "name": "containerUserAssistanceDensity",
            "default": "efficient"
          },
          {
            "name": "userAssistanceDensity",
            "default": "efficient"
          }
        ]
      }
    }
  },
  "methods": {
    "setProperty": {
      "description": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.",
      "help": "#setProperty",
      "params": [
        {
          "name": "property",
          "description": "The property name to set. Supports dot notation for subproperty access.",
          "type": "string"
        },
        {
          "name": "value",
          "description": "The new value to set the property to.",
          "type": "any"
        }
      ],
      "return": "void"
    },
    "getProperty": {
      "description": "Retrieves the value of a property or a subproperty.",
      "help": "#getProperty",
      "params": [
        {
          "name": "property",
          "description": "The property name to get. Supports dot notation for subproperty access.",
          "type": "string"
        }
      ],
      "return": "any"
    },
    "setProperties": {
      "description": "Performs a batch set of properties.",
      "help": "#setProperties",
      "params": [
        {
          "name": "properties",
          "description": "An object containing the property and value pairs to set.",
          "type": "object"
        }
      ],
      "return": "void"
    }
  }
}