{
  "name": "toggle-button",
  "version": "20.0.2",
  "jetVersion": "^20.0.2",
  "pack": "oj-c",
  "type": "composite",
  "dependencyScope": "runtime",
  "license": "https://opensource.org/licenses/UPL",
  "implements": [
    "CToggleButtonElement"
  ],
  "description": "Toggle Buttons allow users to switch between states when clicked or tapped.",
  "displayName": "Toggle Button",
  "help": "oj-c.ToggleButton.html",
  "main": "oj-c/toggle-button",
  "extension": {
    "catalog": {
      "category": "Controls"
    },
    "vbdt": {
      "module": "oj-c/toggle-button"
    },
    "oracle": {
      "icon": "oj-ux-ico-button",
      "uxSpecs": [
        "Toggle%20Button"
      ]
    },
    "webelement": {
      "package": "@oracle/oraclejet-core-pack",
      "version": "20.0.2",
      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet/cpwdtsdoc/classes/ToggleButtonWebElement.html",
      "export": "findToggleButton",
      "main": "@oracle/oraclejet-core-pack/webdriver"
    }
  },
  "propertyLayout": [
    {
      "propertyGroup": "common",
      "items": [
        "label",
        "tooltip",
        "display",
        "chroming",
        "size",
        "width",
        "disabled"
      ]
    }
  ],
  "since": "17.0.0",
  "status": [
    {
      "type": "supersedes",
      "since": "17.0.0",
      "value": [
        "oj-buttonset-many"
      ]
    }
  ],
  "requirements": [
    {
      "type": "anyOf",
      "label": "accessibility",
      "properties": [
        "label"
      ]
    },
    {
      "type": "not",
      "label": "accessibility",
      "properties": [
        "aria-label"
      ]
    }
  ],
  "properties": {
    "label": {
      "type": "string",
      "description": "Text to show in the button.",
      "help": "#label",
      "required": true,
      "translatable": true
    },
    "value": {
      "type": "boolean",
      "description": "Specifies if the toggle button is selected",
      "help": "#value",
      "translatable": true,
      "writeback": true,
      "value": false
    },
    "tooltip": {
      "type": "string",
      "description": "Text to show in the tooltip. This overrides the default tooltip that renders the label when in icon mode.",
      "help": "#tooltip",
      "translatable": true
    },
    "disabled": {
      "type": "boolean",
      "description": "Specifies that the button element should be disabled.",
      "help": "#disabled",
      "value": false
    },
    "width": {
      "type": "number|string",
      "description": "Specifies that the button style width",
      "help": "#width"
    },
    "display": {
      "type": "string",
      "description": "Display just the label, the icons, or all. Label is used as tooltip and should be set in all cases.",
      "help": "#display",
      "propertyEditorValues": {
        "all": {
          "description": "Display both the label and icons.",
          "displayName": "All"
        },
        "icons": {
          "description": "Display only the icons.",
          "displayName": "Icons"
        },
        "label": {
          "description": "Display only the text label.",
          "displayName": "label"
        }
      },
      "enumValues": [
        "all",
        "label",
        "icons"
      ],
      "value": "all"
    },
    "size": {
      "type": "string",
      "description": "Size of button",
      "help": "#size",
      "propertyEditorValues": {
        "sm": {
          "description": "Display a small button.",
          "displayName": "Small"
        },
        "md": {
          "description": "Display a default size button.",
          "displayName": "Medium"
        },
        "lg": {
          "description": "Display a large button.",
          "displayName": "Large"
        }
      },
      "enumValues": [
        "sm",
        "md",
        "lg"
      ],
      "value": "md"
    },
    "chroming": {
      "type": "string",
      "description": "Indicates in what states the button has variants in background and border.",
      "help": "#chroming",
      "propertyEditorValues": {
        "borderless": {
          "description": "Borderless buttons are a less prominent variation.",
          "displayName": "Borderless"
        },
        "outlined": {
          "description": "Outlined buttons are a more prominent variation.",
          "displayName": "Outlined"
        }
      },
      "enumValues": [
        "borderless",
        "outlined"
      ],
      "binding": {
        "consume": {
          "name": "containerChroming"
        }
      },
      "value": "outlined"
    }
  },
  "slots": {
    "startIcon": {
      "description": "The startIcon slot is the button's start icon. The oj-c-toggle-button element accepts DOM nodes as children with the startIcon slot.",
      "help": "#startIcon"
    },
    "endIcon": {
      "description": "The endIcon slot is the button's end icon. The oj-c-toggle-button element accepts DOM nodes as children with the endIcon slot.",
      "help": "#endIcon"
    }
  },
  "methods": {
    "focus": {
      "return": "void"
    },
    "blur": {
      "return": "void"
    },
    "click": {
      "return": "void"
    },
    "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"
    }
  }
}