{"version":3,"file":"ToggleButton.cjs","names":["_react","_interopRequireDefault","require","_Button","_styledComponents","_Iconbutton","_styles","_jsxRuntime","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","IconButtonContentStyles","props","COLORS","generateToken","componentType","defaultVariant","theme","state","ToggleButton","exports","React","forwardRef","_ref","ref","id","active","onChange","disabled","defaultState","activeState","className","rest","_objectWithoutProperties2","isActive","setIsActive","useState","useEffect","cls","jsx","children","IconButton","variant","useTransparentBackground","shape","action","iconColor","color","icon","propTypes","_propTypes","bool","isRequired","func","node","string","_default"],"sources":["../../src/Toggles/ToggleButton.tsx"],"sourcesContent":["import React from 'react';\r\nimport { IconButton } from '../Button';\r\nimport styled from 'styled-components';\r\nimport { IconButtonContentStyles } from '../Button/Iconbutton';\r\nimport { COLORS } from '../styles';\r\n\r\nconst Wrapper = styled.div`\r\n  ${IconButtonContentStyles} {\r\n    transition: all 0.1s ease-in-out;\r\n  }\r\n\r\n  &.disabled,\r\n  &.active:not(.state-change) {\r\n    ${IconButtonContentStyles} {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &.active:not(.state-change) {\r\n    ${IconButtonContentStyles}:after {\r\n      content: '';\r\n      position: absolute;\r\n      left: 12px;\r\n      bottom: 1px;\r\n      background-color: ${props => COLORS.generateToken({componentType: 'border', defaultVariant: 'selected'}, props.theme)};\r\n      border-radius: 4px;\r\n      height: 4px;\r\n      width: 24px;\r\n    }\r\n  }\r\n\r\n  &.disabled:not(.state-change) {\r\n    ${IconButtonContentStyles}:after {\r\n      background: ${props => COLORS.generateToken({componentType:'icon',state:'disabled'}, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface ToggleButtonState {\r\n  icon: React.ReactNode;\r\n  color?: string;\r\n}\r\n\r\nexport interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'disabled' | 'onClick'> {\r\n  /** Required. Initial state of the toggle. */\r\n  active: boolean;\r\n  /** Optional. Handler to be called when toggle state changes. */\r\n  onChange?: (value: boolean) => void;\r\n  /** Optional. If set user can not interact with ToggleButton. */\r\n  disabled?: boolean;\r\n  /** Required. Icon and color of toggle in default state. */\r\n  defaultState: ToggleButtonState;\r\n  /** Optional. Icon and color of toggle in active state. If activeState is not provided then when state is changed component will show a small border under the button to highlight the state change. */\r\n  activeState?: ToggleButtonState;\r\n}\r\n\r\nexport const ToggleButton = React.forwardRef(({\r\n                                                id,\r\n                                                active,\r\n                                                onChange,\r\n                                                disabled,\r\n                                                defaultState,\r\n                                                activeState,\r\n                                                className,\r\n                                                ...rest\r\n                                              }: ToggleButtonProps, ref: React.Ref<HTMLButtonElement>) => {\r\n  const [isActive, setIsActive] = React.useState(false);\r\n\r\n  React.useEffect(() => setIsActive(active), [active]);\r\n\r\n  const cls = `${className || ''} ${isActive ? 'active' : ''} ${activeState ? 'state-change' : ''} ${disabled ? 'disabled' : ''}`;\r\n\r\n  return (\r\n    <Wrapper className={cls}>\r\n      <IconButton\r\n        variant={'secondary'}\r\n        ref={ref}\r\n        useTransparentBackground={true}\r\n        shape={'circular'}\r\n        action={() => {\r\n          setIsActive(!isActive);\r\n          if (onChange) {\r\n            onChange(!isActive);\r\n          }\r\n        }}\r\n        id={id}\r\n        iconColor={isActive ? activeState?.color ?? defaultState.color : defaultState.color}\r\n        disabled={disabled}\r\n        aria-pressed={isActive}\r\n        {...rest}>\r\n        {isActive ? activeState?.icon ?? defaultState.icon : defaultState.icon}\r\n      </IconButton>\r\n    </Wrapper>\r\n  );\r\n});\r\n\r\nexport default ToggleButton;\r\n"],"mappings":"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","ignoreList":[]}