@pega/cosmos-react-cs 5.0.0-dev.5.0 → 5.0.0-dev.6.0

package/lib/components/CallControlPanel/CallHandover/CallHandoverForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CallHandoverForm.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, Ref, useState, ChangeEvent, forwardRef, PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  registerIcon,\n  defaultThemeProp,\n  useI18n,\n  TextArea,\n  ComboBox,\n  Form,\n  Flex\n} from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport type { Contact } from '../ContactList';\nimport CalleePicker from '../ContactList/CalleePicker';\n\nimport type { TransferReasonOption, TransferData } from './CallHandover.types';\n\nregisterIcon(timesIcon);\n\nexport interface CallHandoverFormProps {\n  /**\n   * Callback fired on handover submission.\n   * @param data the transfer parameters.\n   */\n  onSubmit: (data: TransferData) => void;\n  /** Callback fired on clicking Cancel button. */\n  onCancel: () => void;\n  /** Current selected transfer reason */\n  defaultTransfer?: TransferReasonOption['id'];\n  /** Current selected interaction */\n  defaultInteraction?: TransferReasonOption['id'];\n  /** Transfer reason options. */\n  transferOptions: Readonly<TransferReasonOption[]>;\n  /** Interaction options. */\n  interactionOptions?: Readonly<TransferReasonOption[]>;\n  /** Reference to the root component. */\n  ref?: Ref<HTMLFormElement>;\n  /** Variant of component. */\n  variant?: 'call' | 'call+interaction';\n  /** Label of the submit button. */\n  submitButtonText: string;\n}\n\nexport const StyledCallHandoverForm = styled(Form)`\n  min-width: 50ch;\n\n  ${StyledTabPanel} {\n    height: 24rem;\n  }\n`;\n\nStyledCallHandoverForm.defaultProps = defaultThemeProp;\n\nconst CallHandoverForm: FunctionComponent<CallHandoverFormProps> = forwardRef(\n  function CallHandoverForm(\n    {\n      onCancel,\n      onSubmit,\n      transferOptions,\n      variant,\n      submitButtonText,\n      interactionOptions,\n      defaultTransfer,\n      defaultInteraction\n    }: PropsWithoutRef<CallHandoverFormProps>,\n    ref: CallHandoverFormProps['ref']\n  ) {\n    const t = useI18n();\n\n    const [selectedContact, setSelectedContact] = useState<Contact['phoneNumber']>();\n    const initialReason = transferOptions.find(reason => reason.id === defaultTransfer);\n    const initialInteraction = interactionOptions?.find(\n      interaction => interaction.id === defaultInteraction\n    );\n    const [selectedReason, setSelectedReason] = useState<TransferReasonOption | undefined>(\n      initialReason\n    );\n    const [selectedInteraction, setSelectedInteraction] = useState<\n      TransferReasonOption | undefined\n    >(initialInteraction);\n    const [comments, setComments] = useState('');\n\n    return (\n      <StyledCallHandoverForm\n        actions={\n          <>\n            <Button variant='secondary' onClick={onCancel}>\n              {t('cancel')}\n            </Button>\n            <Button\n              variant='primary'\n              disabled={!(selectedContact && (variant === 'call+interaction' ? comments : true))}\n              onClick={() => {\n                if (!selectedContact) return;\n                onSubmit({\n                  reason: selectedReason?.id,\n                  comments,\n                  interaction: variant === 'call+interaction',\n                  phoneNumber: selectedContact,\n                  transferredInteractionId: selectedInteraction?.id\n                });\n              }}\n            >\n              {submitButtonText}\n            </Button>\n          </>\n        }\n        ref={ref}\n      >\n        {variant === 'call+interaction' && (\n          <Flex container={{ direction: 'column', gap: 1 }}>\n            {interactionOptions && (\n              <ComboBox\n                label={t('call_panel_handover_interaction_label')}\n                selected={{\n                  items: selectedInteraction\n                    ? { id: selectedInteraction.id, text: selectedInteraction.label }\n                    : undefined\n                }}\n                menu={{\n                  items: interactionOptions.map(({ id, label }) => ({\n                    id,\n                    primary: label,\n                    selected: id === selectedInteraction?.id\n                  })),\n                  onItemClick: id =>\n                    setSelectedInteraction(interactionOptions.find(option => option.id === id))\n                }}\n              />\n            )}\n\n            <ComboBox\n              label={t('call_panel_handover_reason_label')}\n              selected={{\n                items: selectedReason\n                  ? { id: selectedReason.id, text: selectedReason.label }\n                  : undefined\n              }}\n              menu={{\n                items: transferOptions.map(({ id, label }) => ({\n                  id,\n                  primary: label,\n                  selected: id === selectedReason?.id\n                })),\n                onItemClick: id =>\n                  setSelectedReason(transferOptions.find(option => option.id === id))\n              }}\n            />\n\n            <TextArea\n              name='comments'\n              required\n              label={t('call_panel_handover_comments_label')}\n              displayCharCount\n              maxLength={300}\n              value={comments}\n              onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setComments(e.target.value)}\n            />\n          </Flex>\n        )}\n        <CalleePicker\n          selectedContact={selectedContact}\n          onSelection={setSelectedContact}\n          variant='select'\n        />\n      </StyledCallHandoverForm>\n    );\n  }\n);\n\nexport default CallHandoverForm;\n"]}
+{"version":3,"file":"CallHandoverForm.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/CallHandover/CallHandoverForm.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, forwardRef } from 'react';\nimport type { FunctionComponent, Ref, ChangeEvent, PropsWithoutRef } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  registerIcon,\n  defaultThemeProp,\n  useI18n,\n  TextArea,\n  ComboBox,\n  Form,\n  Flex\n} from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport type { Contact } from '../ContactList';\nimport CalleePicker from '../ContactList/CalleePicker';\n\nimport type { TransferReasonOption, TransferData } from './CallHandover.types';\n\nregisterIcon(timesIcon);\n\nexport interface CallHandoverFormProps {\n  /**\n   * Callback fired on handover submission.\n   * @param data the transfer parameters.\n   */\n  onSubmit: (data: TransferData) => void;\n  /** Callback fired on clicking Cancel button. */\n  onCancel: () => void;\n  /** Current selected transfer reason */\n  defaultTransfer?: TransferReasonOption['id'];\n  /** Current selected interaction */\n  defaultInteraction?: TransferReasonOption['id'];\n  /** Transfer reason options. */\n  transferOptions: Readonly<TransferReasonOption[]>;\n  /** Interaction options. */\n  interactionOptions?: Readonly<TransferReasonOption[]>;\n  /** Reference to the root component. */\n  ref?: Ref<HTMLFormElement>;\n  /** Variant of component. */\n  variant?: 'call' | 'call+interaction';\n  /** Label of the submit button. */\n  submitButtonText: string;\n}\n\nexport const StyledCallHandoverForm = styled(Form)`\n  min-width: 50ch;\n\n  ${StyledTabPanel} {\n    height: 24rem;\n  }\n`;\n\nStyledCallHandoverForm.defaultProps = defaultThemeProp;\n\nconst CallHandoverForm: FunctionComponent<CallHandoverFormProps> = forwardRef(\n  function CallHandoverForm(\n    {\n      onCancel,\n      onSubmit,\n      transferOptions,\n      variant,\n      submitButtonText,\n      interactionOptions,\n      defaultTransfer,\n      defaultInteraction\n    }: PropsWithoutRef<CallHandoverFormProps>,\n    ref: CallHandoverFormProps['ref']\n  ) {\n    const t = useI18n();\n\n    const [selectedContact, setSelectedContact] = useState<Contact['phoneNumber']>();\n    const initialReason = transferOptions.find(reason => reason.id === defaultTransfer);\n    const initialInteraction = interactionOptions?.find(\n      interaction => interaction.id === defaultInteraction\n    );\n    const [selectedReason, setSelectedReason] = useState<TransferReasonOption | undefined>(\n      initialReason\n    );\n    const [selectedInteraction, setSelectedInteraction] = useState<\n      TransferReasonOption | undefined\n    >(initialInteraction);\n    const [comments, setComments] = useState('');\n\n    return (\n      <StyledCallHandoverForm\n        actions={\n          <>\n            <Button variant='secondary' onClick={onCancel}>\n              {t('cancel')}\n            </Button>\n            <Button\n              variant='primary'\n              disabled={!(selectedContact && (variant === 'call+interaction' ? comments : true))}\n              onClick={() => {\n                if (!selectedContact) return;\n                onSubmit({\n                  reason: selectedReason?.id,\n                  comments,\n                  interaction: variant === 'call+interaction',\n                  phoneNumber: selectedContact,\n                  transferredInteractionId: selectedInteraction?.id\n                });\n              }}\n            >\n              {submitButtonText}\n            </Button>\n          </>\n        }\n        ref={ref}\n      >\n        {variant === 'call+interaction' && (\n          <Flex container={{ direction: 'column', gap: 1 }}>\n            {interactionOptions && (\n              <ComboBox\n                label={t('call_panel_handover_interaction_label')}\n                selected={{\n                  items: selectedInteraction\n                    ? { id: selectedInteraction.id, text: selectedInteraction.label }\n                    : undefined\n                }}\n                menu={{\n                  items: interactionOptions.map(({ id, label }) => ({\n                    id,\n                    primary: label,\n                    selected: id === selectedInteraction?.id\n                  })),\n                  onItemClick: id =>\n                    setSelectedInteraction(interactionOptions.find(option => option.id === id))\n                }}\n              />\n            )}\n\n            <ComboBox\n              label={t('call_panel_handover_reason_label')}\n              selected={{\n                items: selectedReason\n                  ? { id: selectedReason.id, text: selectedReason.label }\n                  : undefined\n              }}\n              menu={{\n                items: transferOptions.map(({ id, label }) => ({\n                  id,\n                  primary: label,\n                  selected: id === selectedReason?.id\n                })),\n                onItemClick: id =>\n                  setSelectedReason(transferOptions.find(option => option.id === id))\n              }}\n            />\n\n            <TextArea\n              name='comments'\n              required\n              label={t('call_panel_handover_comments_label')}\n              displayCharCount\n              maxLength={300}\n              value={comments}\n              onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setComments(e.target.value)}\n            />\n          </Flex>\n        )}\n        <CalleePicker\n          selectedContact={selectedContact}\n          onSelection={setSelectedContact}\n          variant='select'\n        />\n      </StyledCallHandoverForm>\n    );\n  }\n);\n\nexport default CallHandoverForm;\n"]}

package/lib/components/CallControlPanel/ContactList/CalleePicker.d.ts

@@ -1,5 +1,5 @@
-import { FunctionComponent, Ref } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
+import type { FunctionComponent, Ref } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
 export interface CalleePickerProps {
     /** Currently selected number. */
     selectedContact?: string;

package/lib/components/CallControlPanel/ContactList/CalleePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalleePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/CalleePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAGJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAIL,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAUjC,MAAM,WAAW,iBAAiB;IAChC,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,WAAW,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,2BAA2B;IAC3B,OAAO,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC7B,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAYD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAkErE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"CalleePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/CalleePicker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAU5D,MAAM,WAAW,iBAAiB;IAChC,iCAAiC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,WAAW,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,2BAA2B;IAC3B,OAAO,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC7B,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAYD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CAkErE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/CallControlPanel/ContactList/CalleePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalleePicker.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/CalleePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useContext,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  registerIcon,\n  TabPanel,\n  Tabs,\n  ForwardProps,\n  defaultThemeProp,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport DialPad from '../../DialPad/DialPad';\n\nimport ContactList, { ContactsContext } from './ContactList';\n\nregisterIcon(timesIcon);\n\nexport interface CalleePickerProps {\n  /** Currently selected number. */\n  selectedContact?: string;\n  /**\n   * Callback fired on new call made by the user.\n   * @param phoneNumber the number chosen.\n   */\n  onSelection: (phoneNumber: string) => void;\n  /** Variant of the list. */\n  variant: 'action' | 'select';\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledCalleePicker = styled.div(() => {\n  return css`\n    ${StyledTabPanel} {\n      height: 24rem;\n    }\n  `;\n});\n\nStyledCalleePicker.defaultProps = defaultThemeProp;\n\nconst CalleePicker: FunctionComponent<CalleePickerProps & ForwardProps> = forwardRef(\n  function CalleePicker(\n    { selectedContact, onSelection, variant }: PropsWithoutRef<CalleePickerProps>,\n    ref: CalleePickerProps['ref']\n  ) {\n    const t = useI18n();\n    const [currentTab, setCurrentTab] = useState('all');\n    const tabsRef = useRef<HTMLElement>(null);\n    const { contacts, onFavoriteToggle } = useContext(ContactsContext);\n    const favorites = contacts.filter(item => item.favorite);\n\n    const tabs = [\n      { id: 'all', name: t('call_panel_contacts_list_heading'), count: contacts.length },\n      {\n        id: 'favorites',\n        name: t('call_panel_contacts_favorites_heading'),\n        count: contacts.filter(item => item.favorite).length\n      },\n      { id: 'dial-pad', name: t('call_panel_contacts_dial_pad_heading') }\n    ];\n\n    const [phoneNumber, setPhoneNumber] = useState('');\n\n    const tabContent = (tabId: string) => {\n      if (tabId === 'dial-pad')\n        return (\n          <DialPad\n            mode='default'\n            {...(variant === 'action'\n              ? {\n                  value: phoneNumber,\n                  onChange: setPhoneNumber,\n                  onCallClick: () => onSelection(phoneNumber)\n                }\n              : {\n                  value: selectedContact ?? '',\n                  onChange: onSelection\n                })}\n          />\n        );\n      return (\n        <ContactList\n          contacts={(tabId === 'favorites' ? favorites : contacts).map(contact => ({\n            ...contact,\n            selected: contact.phoneNumber === selectedContact\n          }))}\n          onFavoriteToggle={onFavoriteToggle}\n          onItemClick={onSelection}\n          variant={variant}\n        />\n      );\n    };\n\n    return (\n      <StyledCalleePicker ref={ref}>\n        <Tabs\n          ref={tabsRef}\n          tabs={tabs}\n          type='horizontal'\n          onTabClick={setCurrentTab}\n          currentTabId={currentTab}\n        />\n        <TabPanel tabId={currentTab}>{tabContent(currentTab)}</TabPanel>\n      </StyledCalleePicker>\n    );\n  }\n);\n\nexport default CalleePicker;\n"]}
+{"version":3,"file":"CalleePicker.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/CalleePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useContext, forwardRef, useRef, useState } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { registerIcon, TabPanel, Tabs, defaultThemeProp, useI18n } from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport * as timesIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/times.icon';\n\nimport DialPad from '../../DialPad/DialPad';\n\nimport ContactList, { ContactsContext } from './ContactList';\n\nregisterIcon(timesIcon);\n\nexport interface CalleePickerProps {\n  /** Currently selected number. */\n  selectedContact?: string;\n  /**\n   * Callback fired on new call made by the user.\n   * @param phoneNumber the number chosen.\n   */\n  onSelection: (phoneNumber: string) => void;\n  /** Variant of the list. */\n  variant: 'action' | 'select';\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledCalleePicker = styled.div(() => {\n  return css`\n    ${StyledTabPanel} {\n      height: 24rem;\n    }\n  `;\n});\n\nStyledCalleePicker.defaultProps = defaultThemeProp;\n\nconst CalleePicker: FunctionComponent<CalleePickerProps & ForwardProps> = forwardRef(\n  function CalleePicker(\n    { selectedContact, onSelection, variant }: PropsWithoutRef<CalleePickerProps>,\n    ref: CalleePickerProps['ref']\n  ) {\n    const t = useI18n();\n    const [currentTab, setCurrentTab] = useState('all');\n    const tabsRef = useRef<HTMLElement>(null);\n    const { contacts, onFavoriteToggle } = useContext(ContactsContext);\n    const favorites = contacts.filter(item => item.favorite);\n\n    const tabs = [\n      { id: 'all', name: t('call_panel_contacts_list_heading'), count: contacts.length },\n      {\n        id: 'favorites',\n        name: t('call_panel_contacts_favorites_heading'),\n        count: contacts.filter(item => item.favorite).length\n      },\n      { id: 'dial-pad', name: t('call_panel_contacts_dial_pad_heading') }\n    ];\n\n    const [phoneNumber, setPhoneNumber] = useState('');\n\n    const tabContent = (tabId: string) => {\n      if (tabId === 'dial-pad')\n        return (\n          <DialPad\n            mode='default'\n            {...(variant === 'action'\n              ? {\n                  value: phoneNumber,\n                  onChange: setPhoneNumber,\n                  onCallClick: () => onSelection(phoneNumber)\n                }\n              : {\n                  value: selectedContact ?? '',\n                  onChange: onSelection\n                })}\n          />\n        );\n      return (\n        <ContactList\n          contacts={(tabId === 'favorites' ? favorites : contacts).map(contact => ({\n            ...contact,\n            selected: contact.phoneNumber === selectedContact\n          }))}\n          onFavoriteToggle={onFavoriteToggle}\n          onItemClick={onSelection}\n          variant={variant}\n        />\n      );\n    };\n\n    return (\n      <StyledCalleePicker ref={ref}>\n        <Tabs\n          ref={tabsRef}\n          tabs={tabs}\n          type='horizontal'\n          onTabClick={setCurrentTab}\n          currentTabId={currentTab}\n        />\n        <TabPanel tabId={currentTab}>{tabContent(currentTab)}</TabPanel>\n      </StyledCalleePicker>\n    );\n  }\n);\n\nexport default CalleePicker;\n"]}

package/lib/components/CallControlPanel/ContactList/ContactList.d.ts

@@ -1,5 +1,5 @@
-import { FunctionComponent } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
 import type { Contact, ContactListProps } from './ContactList.types';
 export declare const ContactsContext: import("react").Context<{
     contacts: Contact[];

package/lib/components/CallControlPanel/ContactList/ContactList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactList.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/ContactList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAKlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAGL,YAAY,EAkBb,MAAM,yBAAyB,CAAC;AASjC,OAAO,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAqB,MAAM,qBAAqB,CAAC;AAiExF,eAAO,MAAM,eAAe;cAChB,OAAO,EAAE;sBACD,gBAAgB,CAAC,kBAAkB,CAAC;EAItD,CAAC;AAgDH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAoFnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ContactList.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/ContactList.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAsB5E,OAAO,KAAK,EAAE,YAAY,EAAsC,MAAM,yBAAyB,CAAC;AAQhG,OAAO,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAqB,MAAM,qBAAqB,CAAC;AAiExF,eAAO,MAAM,eAAe;cAChB,OAAO,EAAE;sBACD,gBAAgB,CAAC,kBAAkB,CAAC;EAItD,CAAC;AAgDH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAoFnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/CallControlPanel/ContactList/ContactList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactList.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/ContactList.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EACb,UAAU,EAIV,WAAW,EACX,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,MAAM,EACN,gBAAgB,EAEhB,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,wBAAwB,EACxB,aAAa,EACb,eAAe,EACf,SAAS,EACT,kBAAkB,EAClB,UAAU,EACV,WAAW,EAGX,WAAW,EACX,iBAAiB,EACjB,WAAW,EACZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,EAAE,oBAAoB,EAAE,MAAM,8DAA8D,CAAC;AACpG,OAAO,cAEN,MAAM,8DAA8D,CAAC;AAItE,YAAY,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;AAEtC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE;IACvE,OAAO,GAAG,CAAA;;;;4BAIgB,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,OAAO;;QAE5D,UAAU,MAAM,iBAAiB;;;;;;;;;MASnC,oBAAoB;;;8BAGI,IAAI,CAAC,OAAO;gBAC1B,UAAU,CAAC,MAAM,CAAC,MAAM;;;;UAI9B,WAAW;;;;;;;;;qBASA,UAAU,CAAC,MAAM,CAAC,MAAM;;;yCAGJ,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;;;MAI9D,iBAAiB;UACb,aAAa,OAAO,eAAe;;uBAEtB,IAAI,CAAC,aAAa,CAAC,CAAC,MAAM;;;;MAI3C,wBAAwB;eACf,IAAI,CAAC,OAAO,CAAC,WAAW;;;;;kBAKrB,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM;;;GAG7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,iBAAiB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAElD,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAGzC;IACD,QAAQ,EAAE,EAAE;IACZ,gBAAgB,EAAE,GAAG,EAAE,GAAE,CAAC;CAC3B,CAAC,CAAC;AAEH,MAAM,qBAAqB,GAAG,CAAC,EAC7B,EAAE,EACF,OAAO,EACP,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EAC4B,EAAE,EAAE;IACxC,OAAO,CACL,uBACE,KAAC,WAAW,IACV,IAAI,QACJ,OAAO,EAAC,MAAM,EACd,KAAK,EACH,KAAC,WAAW,IAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,GAAI,EAEvF,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,GAAG,EAAE,UAAU,GACrB,IAVK,EAAE,CAWN,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,SAAS,EACT,OAAO,EACP,SAAS,EACsD,EAAE,EAAE;IACnE,OAAO,CACL,uBACE,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,YAC9B,KAAC,WAAW,IACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACpC,GACa,GACd,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,WAAW,GAAuD,UAAU,CAChF,SAAS,WAAW,CAClB,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,OAAO,EAAqC,EAC9F,GAA4B;IAE5B,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjD,MAAM,YAAY,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAE7C,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,KAAa,EAAE,EAAE;QACnD,aAAa,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,WAAW,CAChC,CAAC,WAAmB,EAAE,QAAiB,EAAE,EAAE,CAAC,CAC1C,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;YACzB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QAC1C,CAAC,gBAEC,QAAQ;YACN,CAAC,CAAC,CAAC,CAAC,sCAAsC,CAAC;YAC3C,CAAC,CAAC,CAAC,CAAC,2CAA2C,CAAC,YAGpD,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,GAAI,GACzC,CACV,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,IAAyB,EAAE,EAAE;QAC/C,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACrB,MAAM,UAAU,GAAG;gBACjB,EAAE,EAAE,IAAI,CAAC,WAAW;gBACpB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,SAAS,EAAE,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,IAAI,CAAC,SAAS,GAAQ;gBAC5D,SAAS,EAAE;oBACT,KAAK,EAAE,oCAAoC;oBAC3C,IAAI,EAAE,yCAAyC;iBAChD;aACF,CAAC;YACF,OAAO,OAAO,KAAK,QAAQ;gBACzB,CAAC,CAAC;oBACE,GAAG,UAAU;oBACb,EAAE,EAAE,qBAAqB;oBACzB,OAAO,EAAE,IAAI,CAAC,QAAQ;oBACtB,QAAQ,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC;iBAC9C;gBACH,CAAC,CAAC;oBACE,GAAG,UAAU;oBACb,EAAE,EAAE,mBAAmB;oBACvB,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC;oBACvD,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC;iBAC7C,CAAC;QACR,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,SAAS,CAAC,YAAY,EAAE,EAAE,QAAQ,EAAE,2BAA2B,EAAE,CAAC,CAAC;IAEnE,OAAO,CACL,KAAC,OAAO,IACN,EAAE,EAAE,iBAAiB,EACrB,GAAG,EAAE,YAAY,EACjB,KAAK,EACH,UAAU;YACR,CAAC,CAAC,UAAU,CACR,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;gBACnD,OAAO,CACL,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;oBACxD,SAAS,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;oBAC1D,WAAW,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC,CAC7D,CAAC;YACJ,CAAC,CAAC,CACH;YACH,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,EAEvB,gBAAgB,EAAE,EAAE,cAAc,EAAE,GACpC,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n  createContext,\n  forwardRef,\n  FunctionComponent,\n  MouseEvent,\n  PropsWithoutRef,\n  useCallback,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  defaultThemeProp,\n  ForwardProps,\n  Icon,\n  registerIcon,\n  Text,\n  useI18n,\n  ViewAll,\n  StyledSummaryItemActions,\n  StyledPrimary,\n  StyledSecondary,\n  useArrows,\n  useConsolidatedRef,\n  StyledCard,\n  RadioButton,\n  RadioButtonProps,\n  SummaryItemProps,\n  SummaryItem,\n  StyledSummaryItem,\n  StyledLabel\n} from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport * as starIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star.icon';\nimport * as starSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star-solid.icon';\nimport { StyledRadioCheckCard } from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';\nimport BareRoleButton, {\n  BareRoleButtonProps\n} from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport type { Contact, ContactListProps, SelectableContact } from './ContactList.types';\n\nregisterIcon(starIcon, starSolidIcon);\n\nconst StyledContactList = styled.div(({ theme: { base, components } }) => {\n  return css`\n    height: 100%;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 0 calc(0.5 * ${base.spacing}) calc(0.5 * ${base.spacing});\n\n    > ${StyledCard} > ${StyledCardContent} {\n      padding: 0;\n      gap: 0;\n    }\n\n    ul {\n      list-style: none;\n    }\n\n    ${StyledRadioCheckCard} {\n      background-color: transparent;\n      border: 0;\n      padding: 0 calc(0.5 * ${base.spacing});\n      height: ${components.button.height};\n      align-items: center;\n      border-radius: 0;\n\n      > ${StyledLabel} {\n        max-width: 100%;\n        width: 100%;\n        margin: 0;\n      }\n    }\n\n    li {\n      padding: 0;\n      height: calc(${components.button.height} + 0.125rem);\n\n      :not(:last-child) {\n        border-bottom: 0.0625rem solid ${base.palette['border-line']};\n      }\n    }\n\n    ${StyledSummaryItem} {\n      > ${StyledPrimary}, > ${StyledSecondary} {\n        align-self: center;\n        font-weight: ${base['font-weight'].normal};\n      }\n    }\n\n    ${StyledSummaryItemActions} {\n      color: ${base.palette.interactive};\n    }\n\n    @media (pointer: 'coarse') {\n      li {\n        height: ${components.button.touch.height};\n      }\n    }\n  `;\n});\n\nStyledContactList.defaultProps = defaultThemeProp;\n\nexport const ContactsContext = createContext<{\n  contacts: Contact[];\n  onFavoriteToggle: ContactListProps['onFavoriteToggle'];\n}>({\n  contacts: [],\n  onFavoriteToggle: () => {}\n});\n\nconst SelectableContactItem = ({\n  id,\n  primary,\n  secondary,\n  checked,\n  container,\n  onChange\n}: SummaryItemProps & RadioButtonProps) => {\n  return (\n    <li key={id}>\n      <RadioButton\n        card\n        variant='card'\n        label={\n          <SummaryItem id={id} primary={primary} secondary={secondary} container={container} />\n        }\n        checked={checked}\n        onChange={onChange}\n        name={`${id}-contact`}\n      />\n    </li>\n  );\n};\n\nconst CallableContactItem = ({\n  visual,\n  primary,\n  secondary,\n  onClick,\n  container\n}: SummaryItemProps & { onClick: BareRoleButtonProps['onClick'] }) => {\n  return (\n    <li>\n      <BareRoleButton onClick={onClick}>\n        <SummaryItem\n          visual={visual}\n          primary={primary}\n          secondary={secondary}\n          container={container}\n          actions={<Icon name='phone-solid' />}\n        />\n      </BareRoleButton>\n    </li>\n  );\n};\n\nconst ContactList: FunctionComponent<ContactListProps & ForwardProps> = forwardRef(\n  function ContactList(\n    { contacts: items, onItemClick, onFavoriteToggle, variant }: PropsWithoutRef<ContactListProps>,\n    ref: ContactListProps['ref']\n  ) {\n    const t = useI18n();\n    const [searchText, setSearchText] = useState('');\n    const containerRef = useConsolidatedRef(ref);\n\n    const onSearchChange = useCallback((value: string) => {\n      setSearchText(value.trim());\n    }, []);\n\n    const favoriteButton = useCallback(\n      (phoneNumber: string, favorite: boolean) => (\n        <Button\n          variant='simple'\n          icon\n          onClick={(e: MouseEvent) => {\n            e.stopPropagation();\n            onFavoriteToggle(phoneNumber, favorite);\n          }}\n          aria-label={\n            favorite\n              ? t('call_panel_contacts_add_to_favorites')\n              : t('call_panel_contacts_remove_from_favorites')\n          }\n        >\n          <Icon name={favorite ? 'star-solid' : 'star'} />\n        </Button>\n      ),\n      [onFavoriteToggle]\n    );\n\n    const createList = (list: SelectableContact[]) => {\n      return list.map(item => {\n        const commonOpts = {\n          id: item.phoneNumber,\n          primary: item.primary,\n          secondary: <Text variant='secondary'>{item.secondary}</Text>,\n          container: {\n            areas: '\"visual primary secondary actions\"',\n            cols: 'auto minmax(0, 2fr) minmax(0, 2fr) auto'\n          }\n        };\n        return variant === 'select'\n          ? {\n              ...commonOpts,\n              as: SelectableContactItem,\n              checked: item.selected,\n              onChange: () => onItemClick(item.phoneNumber)\n            }\n          : {\n              ...commonOpts,\n              as: CallableContactItem,\n              visual: favoriteButton(item.phoneNumber, item.favorite),\n              onClick: () => onItemClick(item.phoneNumber)\n            };\n      });\n    };\n\n    useArrows(containerRef, { selector: ':scope ul [role=\"button\"]' });\n\n    return (\n      <ViewAll\n        as={StyledContactList}\n        ref={containerRef}\n        items={\n          searchText\n            ? createList(\n                items.filter(({ phoneNumber, primary, secondary }) => {\n                  return (\n                    primary.toLowerCase().includes(searchText.toLowerCase()) ||\n                    secondary.toLowerCase().includes(searchText.toLowerCase()) ||\n                    phoneNumber.toLowerCase().includes(searchText.toLowerCase())\n                  );\n                })\n              )\n            : createList(items)\n        }\n        searchInputProps={{ onSearchChange }}\n      />\n    );\n  }\n);\n\nexport default ContactList;\n"]}
+{"version":3,"file":"ContactList.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/ContactList.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createContext, forwardRef, useCallback, useState } from 'react';\nimport type { FunctionComponent, MouseEvent, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  defaultThemeProp,\n  Icon,\n  registerIcon,\n  Text,\n  useI18n,\n  ViewAll,\n  StyledSummaryItemActions,\n  StyledPrimary,\n  StyledSecondary,\n  useArrows,\n  useConsolidatedRef,\n  StyledCard,\n  RadioButton,\n  SummaryItem,\n  StyledSummaryItem,\n  StyledLabel\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, RadioButtonProps, SummaryItemProps } from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport * as starIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star.icon';\nimport * as starSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/star-solid.icon';\nimport { StyledRadioCheckCard } from '@pega/cosmos-react-core/lib/components/RadioCheck/RadioCheck';\nimport BareRoleButton from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\nimport type { BareRoleButtonProps } from '@pega/cosmos-react-core/lib/components/Button/BareRoleButton';\n\nimport type { Contact, ContactListProps, SelectableContact } from './ContactList.types';\n\nregisterIcon(starIcon, starSolidIcon);\n\nconst StyledContactList = styled.div(({ theme: { base, components } }) => {\n  return css`\n    height: 100%;\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: 0 calc(0.5 * ${base.spacing}) calc(0.5 * ${base.spacing});\n\n    > ${StyledCard} > ${StyledCardContent} {\n      padding: 0;\n      gap: 0;\n    }\n\n    ul {\n      list-style: none;\n    }\n\n    ${StyledRadioCheckCard} {\n      background-color: transparent;\n      border: 0;\n      padding: 0 calc(0.5 * ${base.spacing});\n      height: ${components.button.height};\n      align-items: center;\n      border-radius: 0;\n\n      > ${StyledLabel} {\n        max-width: 100%;\n        width: 100%;\n        margin: 0;\n      }\n    }\n\n    li {\n      padding: 0;\n      height: calc(${components.button.height} + 0.125rem);\n\n      :not(:last-child) {\n        border-bottom: 0.0625rem solid ${base.palette['border-line']};\n      }\n    }\n\n    ${StyledSummaryItem} {\n      > ${StyledPrimary}, > ${StyledSecondary} {\n        align-self: center;\n        font-weight: ${base['font-weight'].normal};\n      }\n    }\n\n    ${StyledSummaryItemActions} {\n      color: ${base.palette.interactive};\n    }\n\n    @media (pointer: 'coarse') {\n      li {\n        height: ${components.button.touch.height};\n      }\n    }\n  `;\n});\n\nStyledContactList.defaultProps = defaultThemeProp;\n\nexport const ContactsContext = createContext<{\n  contacts: Contact[];\n  onFavoriteToggle: ContactListProps['onFavoriteToggle'];\n}>({\n  contacts: [],\n  onFavoriteToggle: () => {}\n});\n\nconst SelectableContactItem = ({\n  id,\n  primary,\n  secondary,\n  checked,\n  container,\n  onChange\n}: SummaryItemProps & RadioButtonProps) => {\n  return (\n    <li key={id}>\n      <RadioButton\n        card\n        variant='card'\n        label={\n          <SummaryItem id={id} primary={primary} secondary={secondary} container={container} />\n        }\n        checked={checked}\n        onChange={onChange}\n        name={`${id}-contact`}\n      />\n    </li>\n  );\n};\n\nconst CallableContactItem = ({\n  visual,\n  primary,\n  secondary,\n  onClick,\n  container\n}: SummaryItemProps & { onClick: BareRoleButtonProps['onClick'] }) => {\n  return (\n    <li>\n      <BareRoleButton onClick={onClick}>\n        <SummaryItem\n          visual={visual}\n          primary={primary}\n          secondary={secondary}\n          container={container}\n          actions={<Icon name='phone-solid' />}\n        />\n      </BareRoleButton>\n    </li>\n  );\n};\n\nconst ContactList: FunctionComponent<ContactListProps & ForwardProps> = forwardRef(\n  function ContactList(\n    { contacts: items, onItemClick, onFavoriteToggle, variant }: PropsWithoutRef<ContactListProps>,\n    ref: ContactListProps['ref']\n  ) {\n    const t = useI18n();\n    const [searchText, setSearchText] = useState('');\n    const containerRef = useConsolidatedRef(ref);\n\n    const onSearchChange = useCallback((value: string) => {\n      setSearchText(value.trim());\n    }, []);\n\n    const favoriteButton = useCallback(\n      (phoneNumber: string, favorite: boolean) => (\n        <Button\n          variant='simple'\n          icon\n          onClick={(e: MouseEvent) => {\n            e.stopPropagation();\n            onFavoriteToggle(phoneNumber, favorite);\n          }}\n          aria-label={\n            favorite\n              ? t('call_panel_contacts_add_to_favorites')\n              : t('call_panel_contacts_remove_from_favorites')\n          }\n        >\n          <Icon name={favorite ? 'star-solid' : 'star'} />\n        </Button>\n      ),\n      [onFavoriteToggle]\n    );\n\n    const createList = (list: SelectableContact[]) => {\n      return list.map(item => {\n        const commonOpts = {\n          id: item.phoneNumber,\n          primary: item.primary,\n          secondary: <Text variant='secondary'>{item.secondary}</Text>,\n          container: {\n            areas: '\"visual primary secondary actions\"',\n            cols: 'auto minmax(0, 2fr) minmax(0, 2fr) auto'\n          }\n        };\n        return variant === 'select'\n          ? {\n              ...commonOpts,\n              as: SelectableContactItem,\n              checked: item.selected,\n              onChange: () => onItemClick(item.phoneNumber)\n            }\n          : {\n              ...commonOpts,\n              as: CallableContactItem,\n              visual: favoriteButton(item.phoneNumber, item.favorite),\n              onClick: () => onItemClick(item.phoneNumber)\n            };\n      });\n    };\n\n    useArrows(containerRef, { selector: ':scope ul [role=\"button\"]' });\n\n    return (\n      <ViewAll\n        as={StyledContactList}\n        ref={containerRef}\n        items={\n          searchText\n            ? createList(\n                items.filter(({ phoneNumber, primary, secondary }) => {\n                  return (\n                    primary.toLowerCase().includes(searchText.toLowerCase()) ||\n                    secondary.toLowerCase().includes(searchText.toLowerCase()) ||\n                    phoneNumber.toLowerCase().includes(searchText.toLowerCase())\n                  );\n                })\n              )\n            : createList(items)\n        }\n        searchInputProps={{ onSearchChange }}\n      />\n    );\n  }\n);\n\nexport default ContactList;\n"]}

package/lib/components/CallControlPanel/ContactList/ContactList.types.d.ts

@@ -1,4 +1,4 @@
-import { Ref } from 'react';
+import type { Ref } from 'react';
 export interface Contact {
     /** Contact phone number */
     phoneNumber: string;

package/lib/components/CallControlPanel/ContactList/ContactList.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContactList.types.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/ContactList.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE5B,MAAM,WAAW,OAAO;IACtB,2BAA2B;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,OAAO;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAC9B;;;OAGG;IACH,WAAW,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,kEAAkE;IAClE,gBAAgB,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACpE,2BAA2B;IAC3B,OAAO,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC7B,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}
+{"version":3,"file":"ContactList.types.d.ts","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/ContactList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,WAAW,OAAO;IACtB,2BAA2B;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAkB,SAAQ,OAAO;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,QAAQ,EAAE,iBAAiB,EAAE,CAAC;IAC9B;;;OAGG;IACH,WAAW,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,kEAAkE;IAClE,gBAAgB,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACpE,2BAA2B;IAC3B,OAAO,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC7B,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B"}

package/lib/components/CallControlPanel/ContactList/ContactList.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactList.types.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/ContactList.types.ts"],"names":[],"mappings":"","sourcesContent":["import { Ref } from 'react';\n\nexport interface Contact {\n  /** Contact phone number */\n  phoneNumber: string;\n  /** Contact name */\n  primary: string;\n  /** Additional contact information */\n  secondary: string;\n  /** Determines if contact is favorite */\n  favorite: boolean;\n}\n\nexport interface SelectableContact extends Contact {\n  selected?: boolean;\n}\n\nexport interface ContactListProps {\n  /** An array of contacts objects. */\n  contacts: SelectableContact[];\n  /**\n   * The click handler for the items.\n   * @param phoneNumber the number chosen.\n   */\n  onItemClick: (phoneNumber: string) => void;\n  /** Callback fired on adding/removing contact to/from favorites */\n  onFavoriteToggle: (phoneNumber: string, favorites: boolean) => void;\n  /** Variant of the list. */\n  variant: 'action' | 'select';\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}
+{"version":3,"file":"ContactList.types.js","sourceRoot":"","sources":["../../../../src/components/CallControlPanel/ContactList/ContactList.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Ref } from 'react';\n\nexport interface Contact {\n  /** Contact phone number */\n  phoneNumber: string;\n  /** Contact name */\n  primary: string;\n  /** Additional contact information */\n  secondary: string;\n  /** Determines if contact is favorite */\n  favorite: boolean;\n}\n\nexport interface SelectableContact extends Contact {\n  selected?: boolean;\n}\n\nexport interface ContactListProps {\n  /** An array of contacts objects. */\n  contacts: SelectableContact[];\n  /**\n   * The click handler for the items.\n   * @param phoneNumber the number chosen.\n   */\n  onItemClick: (phoneNumber: string) => void;\n  /** Callback fired on adding/removing contact to/from favorites */\n  onFavoriteToggle: (phoneNumber: string, favorites: boolean) => void;\n  /** Variant of the list. */\n  variant: 'action' | 'select';\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n"]}

package/lib/components/CallControlPanel/ExternalCTI.d.ts

@@ -1,7 +1,7 @@
-import { FunctionComponent, Ref } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
-import { type AttachInteractionProps } from './AttachInteractionDialog';
-import { FloatingPanelProps } from './FloatingPanel';
+import type { FunctionComponent, Ref } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
+import type { AttachInteractionProps } from './AttachInteractionDialog';
+import type { FloatingPanelProps } from './FloatingPanel';
 export interface ExternalCTIProps {
     /** The heading rendered. */
     heading: string;

package/lib/components/CallControlPanel/ExternalCTI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalCTI.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAEjB,GAAG,EAEJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAAqC,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE1F,OAAgC,EAAE,KAAK,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACjG,OAAsB,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEpE,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,oCAAoC;IACpC,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,kCAAkC;IAClC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;CACjD;AAgCD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAwDnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ExternalCTI.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAIpF,OAAO,KAAK,EAAmB,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG7E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAExE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,oCAAoC;IACpC,IAAI,CAAC,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,kCAAkC;IAClC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAC1B,uCAAuC;IACvC,sBAAsB,CAAC,EAAE,sBAAsB,CAAC;CACjD;AAgCD,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CAwDnE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/CallControlPanel/ExternalCTI.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalCTI.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":";AAAA,OAAO,EAEL,UAAU,EAIV,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAiC,MAAM,yBAAyB,CAAC;AAE1F,OAAO,uBAAwD,MAAM,2BAA2B,CAAC;AACjG,OAAO,aAAqC,MAAM,iBAAiB,CAAC;AAoBpE,MAAM,sBAAsB,GAAyB,MAAM,CAAC,aAAa,CAAC,CACxE,CAAC,EACC,KAAK,EAAE,EACL,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;;mCAKqB,YAAY;iCACd,YAAY;;KAExC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,WAAW,GAAuD,UAAU,CAChF,SAAS,WAAW,CAClB,EACE,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,IAAI,EACd,IAAI,EACJ,sBAAsB,EACY,EACpC,GAA4B;IAE5B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAmC,IAAI,CAAC,CAAC;IAEzF,OAAO,CACL,MAAC,sBAAsB,IACrB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EACL,sBAAsB;YACpB,CAAC,CAAC;gBACE;oBACE,EAAE,EAAE,iBAAiB;oBACrB,IAAI,EAAE,sBAAsB,CAAC,OAAO;oBACpC,IAAI,EAAE,YAAY;oBAClB,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;wBACjB,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;oBACnC,CAAC;iBACF;aACF;YACH,CAAC,CAAC,SAAS,aAGf,KAAC,kBAAkB,IACjB,KAAK,EACH,IAAI;oBACF,CAAC,CAAE;wBACC,uBAAuB,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI;wBAC1C,wBAAwB,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;qBAC3B;oBACrB,CAAC,CAAC,SAAS,EAEf,GAAG,EAAE,GAAG,GACR,EACD,sBAAsB,IAAI,YAAY,IAAI,CACzC,KAAC,uBAAuB,OAClB,sBAAsB,EAC1B,KAAK,EAAE,GAAG,EAAE;oBACV,eAAe,CAAC,IAAI,CAAC,CAAC;gBACxB,CAAC,EACD,MAAM,EAAE,YAAY,GACpB,CACH,IACsB,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, FormDialogProps, ForwardProps } from '@pega/cosmos-react-core';\n\nimport AttachInteractionDialog, { type AttachInteractionProps } from './AttachInteractionDialog';\nimport FloatingPanel, { FloatingPanelProps } from './FloatingPanel';\n\nexport interface ExternalCTIProps {\n  /** The heading rendered. */\n  heading: string;\n  /** If true, the component will be draggable. */\n  draggable?: boolean;\n  /** If true, the component will be visible. */\n  visible?: FloatingPanelProps['visible'];\n  /** Container element size in px. */\n  size?: {\n    width: number;\n    height: number;\n  };\n  /** Reference to the container. */\n  ref?: Ref<HTMLDivElement>;\n  /** Attach intraction popup options. */\n  attachInteractionProps?: AttachInteractionProps;\n}\n\nconst StyledExternalCTIPanel: typeof FloatingPanel = styled(FloatingPanel)(\n  ({\n    theme: {\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    }\n  }) => {\n    return css`\n      width: auto;\n      iframe {\n        border: transparent;\n        display: block;\n        border-end-start-radius: ${borderRadius};\n        border-end-end-radius: ${borderRadius};\n      }\n    `;\n  }\n);\n\nStyledExternalCTIPanel.defaultProps = defaultThemeProp;\n\nconst StyledCTIContainer = styled.div`\n  width: var(--cti-container-width, auto);\n  height: var(--cti-container-height, auto);\n  overflow-y: auto;\n`;\n\nStyledCTIContainer.defaultProps = defaultThemeProp;\n\nconst ExternalCTI: FunctionComponent<ExternalCTIProps & ForwardProps> = forwardRef(\n  function ExternalCTI(\n    {\n      heading,\n      draggable = false,\n      visible = true,\n      size,\n      attachInteractionProps\n    }: PropsWithoutRef<ExternalCTIProps>,\n    ref: ExternalCTIProps['ref']\n  ) {\n    const [dialogTarget, setDialogTarget] = useState<FormDialogProps['target'] | null>(null);\n\n    return (\n      <StyledExternalCTIPanel\n        heading={heading}\n        draggable={draggable}\n        visible={visible}\n        actions={\n          attachInteractionProps\n            ? [\n                {\n                  id: 'add-interaction',\n                  text: attachInteractionProps.heading,\n                  icon: 'paper-clip',\n                  onClick: (id, e) => {\n                    setDialogTarget(e.currentTarget);\n                  }\n                }\n              ]\n            : undefined\n        }\n      >\n        <StyledCTIContainer\n          style={\n            size\n              ? ({\n                  '--cti-container-width': `${size.width}px`,\n                  '--cti-container-height': `${size.height}px`\n                } as CSSProperties)\n              : undefined\n          }\n          ref={ref}\n        />\n        {attachInteractionProps && dialogTarget && (\n          <AttachInteractionDialog\n            {...attachInteractionProps}\n            close={() => {\n              setDialogTarget(null);\n            }}\n            target={dialogTarget}\n          />\n        )}\n      </StyledExternalCTIPanel>\n    );\n  }\n);\n\nexport default ExternalCTI;\n"]}
+{"version":3,"file":"ExternalCTI.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/ExternalCTI.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAG3D,OAAO,uBAAuB,MAAM,2BAA2B,CAAC;AAEhE,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAqB5C,MAAM,sBAAsB,GAAyB,MAAM,CAAC,aAAa,CAAC,CACxE,CAAC,EACC,KAAK,EAAE,EACL,UAAU,EAAE,EACV,IAAI,EAAE,EAAE,eAAe,EAAE,YAAY,EAAE,EACxC,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;;;mCAKqB,YAAY;iCACd,YAAY;;KAExC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,WAAW,GAAuD,UAAU,CAChF,SAAS,WAAW,CAClB,EACE,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,IAAI,EACd,IAAI,EACJ,sBAAsB,EACY,EACpC,GAA4B;IAE5B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAmC,IAAI,CAAC,CAAC;IAEzF,OAAO,CACL,MAAC,sBAAsB,IACrB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EACL,sBAAsB;YACpB,CAAC,CAAC;gBACE;oBACE,EAAE,EAAE,iBAAiB;oBACrB,IAAI,EAAE,sBAAsB,CAAC,OAAO;oBACpC,IAAI,EAAE,YAAY;oBAClB,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE;wBACjB,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;oBACnC,CAAC;iBACF;aACF;YACH,CAAC,CAAC,SAAS,aAGf,KAAC,kBAAkB,IACjB,KAAK,EACH,IAAI;oBACF,CAAC,CAAE;wBACC,uBAAuB,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI;wBAC1C,wBAAwB,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI;qBAC3B;oBACrB,CAAC,CAAC,SAAS,EAEf,GAAG,EAAE,GAAG,GACR,EACD,sBAAsB,IAAI,YAAY,IAAI,CACzC,KAAC,uBAAuB,OAClB,sBAAsB,EAC1B,KAAK,EAAE,GAAG,EAAE;oBACV,eAAe,CAAC,IAAI,CAAC,CAAC;gBACxB,CAAC,EACD,MAAM,EAAE,YAAY,GACpB,CACH,IACsB,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef, useState } from 'react';\nimport type { CSSProperties, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\nimport type { FormDialogProps, ForwardProps } from '@pega/cosmos-react-core';\n\nimport AttachInteractionDialog from './AttachInteractionDialog';\nimport type { AttachInteractionProps } from './AttachInteractionDialog';\nimport FloatingPanel from './FloatingPanel';\nimport type { FloatingPanelProps } from './FloatingPanel';\n\nexport interface ExternalCTIProps {\n  /** The heading rendered. */\n  heading: string;\n  /** If true, the component will be draggable. */\n  draggable?: boolean;\n  /** If true, the component will be visible. */\n  visible?: FloatingPanelProps['visible'];\n  /** Container element size in px. */\n  size?: {\n    width: number;\n    height: number;\n  };\n  /** Reference to the container. */\n  ref?: Ref<HTMLDivElement>;\n  /** Attach intraction popup options. */\n  attachInteractionProps?: AttachInteractionProps;\n}\n\nconst StyledExternalCTIPanel: typeof FloatingPanel = styled(FloatingPanel)(\n  ({\n    theme: {\n      components: {\n        card: { 'border-radius': borderRadius }\n      }\n    }\n  }) => {\n    return css`\n      width: auto;\n      iframe {\n        border: transparent;\n        display: block;\n        border-end-start-radius: ${borderRadius};\n        border-end-end-radius: ${borderRadius};\n      }\n    `;\n  }\n);\n\nStyledExternalCTIPanel.defaultProps = defaultThemeProp;\n\nconst StyledCTIContainer = styled.div`\n  width: var(--cti-container-width, auto);\n  height: var(--cti-container-height, auto);\n  overflow-y: auto;\n`;\n\nStyledCTIContainer.defaultProps = defaultThemeProp;\n\nconst ExternalCTI: FunctionComponent<ExternalCTIProps & ForwardProps> = forwardRef(\n  function ExternalCTI(\n    {\n      heading,\n      draggable = false,\n      visible = true,\n      size,\n      attachInteractionProps\n    }: PropsWithoutRef<ExternalCTIProps>,\n    ref: ExternalCTIProps['ref']\n  ) {\n    const [dialogTarget, setDialogTarget] = useState<FormDialogProps['target'] | null>(null);\n\n    return (\n      <StyledExternalCTIPanel\n        heading={heading}\n        draggable={draggable}\n        visible={visible}\n        actions={\n          attachInteractionProps\n            ? [\n                {\n                  id: 'add-interaction',\n                  text: attachInteractionProps.heading,\n                  icon: 'paper-clip',\n                  onClick: (id, e) => {\n                    setDialogTarget(e.currentTarget);\n                  }\n                }\n              ]\n            : undefined\n        }\n      >\n        <StyledCTIContainer\n          style={\n            size\n              ? ({\n                  '--cti-container-width': `${size.width}px`,\n                  '--cti-container-height': `${size.height}px`\n                } as CSSProperties)\n              : undefined\n          }\n          ref={ref}\n        />\n        {attachInteractionProps && dialogTarget && (\n          <AttachInteractionDialog\n            {...attachInteractionProps}\n            close={() => {\n              setDialogTarget(null);\n            }}\n            target={dialogTarget}\n          />\n        )}\n      </StyledExternalCTIPanel>\n    );\n  }\n);\n\nexport default ExternalCTI;\n"]}

package/lib/components/CallControlPanel/FloatingPanel.d.ts

@@ -1,5 +1,5 @@
-import { FunctionComponent, ReactNode, Ref } from 'react';
-import { ForwardProps, Action, IconName } from '@pega/cosmos-react-core';
+import type { FunctionComponent, ReactNode, Ref } from 'react';
+import type { ForwardProps, Action, IconName } from '@pega/cosmos-react-core';
 export interface FloatingPanelActionProps extends ForwardProps {
     /** A string to uniquely identify this Action within the onClick handler. */
     id: Action['id'];

package/lib/components/CallControlPanel/FloatingPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/FloatingPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,iBAAiB,EAGjB,SAAS,EACT,GAAG,EAKJ,MAAM,OAAO,CAAC;AAGf,OAAO,EAQL,YAAY,EAGZ,MAAM,EACN,QAAQ,EAIT,MAAM,yBAAyB,CAAC;AAYjC,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,4EAA4E;IAC5E,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IACjB,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,4CAA4C;IAC5C,IAAI,EAAE,QAAQ,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,yCAAyC;IACzC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,kBAAkB;IACjC,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACrC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB;iBACjB,OAAO;;;SAsCpB,CAAC;AAIH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA8EvE,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"FloatingPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/FloatingPanel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,iBAAiB,EAGjB,SAAS,EACT,GAAG,EAEJ,MAAM,OAAO,CAAC;AAiBf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAY9E,MAAM,WAAW,wBAAyB,SAAQ,YAAY;IAC5D,4EAA4E;IAC5E,EAAE,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;IACjB,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IACrB,4CAA4C;IAC5C,IAAI,EAAE,QAAQ,CAAC;IACf,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC9B,yCAAyC;IACzC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,kBAAkB;IACjC,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACrC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,mBAAmB;iBACjB,OAAO;;;SAsCpB,CAAC;AAIH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CA8EvE,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/CallControlPanel/FloatingPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/FloatingPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  FunctionComponent,\n  MouseEvent,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  RefObject,\n  useLayoutEffect,\n  useRef,\n  useState\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  CardHeader,\n  Button,\n  useI18n,\n  Icon,\n  registerIcon,\n  Flex,\n  Text,\n  ForwardProps,\n  useConsolidatedRef,\n  useDraggable,\n  Action,\n  IconName,\n  defaultThemeProp,\n  StyledButton,\n  StyledCard\n} from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headset.icon';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\n\nregisterIcon(caretDownIcon, headsetIcon);\n\nconst resetPopoverToDefaultPosition = (containerRef: RefObject<HTMLDivElement>): void => {\n  if (containerRef && containerRef.current)\n    containerRef.current.style.transform = 'translate(0px, 0px)';\n};\n\nexport interface FloatingPanelActionProps extends ForwardProps {\n  /** A string to uniquely identify this Action within the onClick handler. */\n  id: Action['id'];\n  /** The text content of the Action. */\n  text: Action['text'];\n  /** Name of the icon from the cosmos set. */\n  icon: IconName;\n  /** Determines if the Action will be disabled. */\n  disabled?: Action['disabled'];\n  /** Called when the Action is clicked. */\n  onClick: NonNullable<Action['onClick']>;\n}\n\nexport interface FloatingPanelProps {\n  /** The heading rendered. */\n  heading: string;\n  /** Content of the panel */\n  children: ReactNode;\n  /** Action button to be rendered in header */\n  actions?: FloatingPanelActionProps[];\n  /** If true, the component will be draggable */\n  draggable?: boolean;\n  /** If true, the panel is visible. */\n  visible?: boolean;\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledFloatingPanel = styled(StyledCard)<{\n  isCollapsed: boolean;\n  isDraggable?: boolean;\n  isVisible?: boolean;\n}>(({ theme, isCollapsed, isDraggable, isVisible = true }) => {\n  return css`\n    max-height: calc(100% - 2rem);\n    position: fixed;\n    z-index: calc(${theme.base['z-index'].backdrop} - 1);\n    width: 25rem;\n    right: calc(2 * ${theme.base.spacing});\n    bottom: calc(2 * ${theme.base.spacing});\n    box-shadow: ${theme.base.shadow.high};\n\n    ${!isVisible &&\n    css`\n      display: none;\n    `}\n\n    ${isCollapsed &&\n    css`\n      transform: translateY(\n        calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing}))\n      ) !important;\n    `}\n\n    ${StyledCardHeader} {\n      ${!isCollapsed &&\n      isDraggable &&\n      css`\n        cursor: all-scroll;\n      `}\n    }\n    ${StyledCardHeader} ${StyledButton}:last-child {\n      transition: transform calc(2 * ${theme.base.animation.speed})\n        ${theme.base.animation.timing.ease};\n      transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n    }\n  `;\n});\n\nStyledFloatingPanel.defaultProps = defaultThemeProp;\n\nconst FloatingPanel: FunctionComponent<FloatingPanelProps & ForwardProps> = forwardRef(\n  function FloatingPanel(\n    {\n      heading,\n      actions = [],\n      draggable,\n      children,\n      visible = true,\n      ...restProps\n    }: PropsWithoutRef<FloatingPanelProps>,\n    ref: FloatingPanelProps['ref']\n  ) {\n    const t = useI18n();\n    const [collapsed, setCollapsed] = useState(false);\n    const containerRef = useConsolidatedRef(ref);\n    const dragRef = useRef<HTMLDivElement>(null);\n    useDraggable(containerRef, dragRef, !collapsed && draggable);\n\n    const [headerHeight, setHeaderHeight] = useState(0);\n\n    useLayoutEffect(() => {\n      if (containerRef.current) {\n        setHeaderHeight(containerRef.current.querySelector('header')?.offsetHeight || 0);\n      }\n    }, [collapsed]);\n\n    return (\n      <StyledFloatingPanel\n        {...restProps}\n        ref={containerRef}\n        isCollapsed={collapsed}\n        isDraggable={draggable}\n        isVisible={visible}\n        data-app-region\n        style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n      >\n        <CardHeader\n          ref={dragRef}\n          actions={\n            <>\n              {actions.map(({ id, icon, text, onClick, ...restAction }) => (\n                <Button\n                  {...restAction}\n                  icon\n                  variant='simple'\n                  key={id}\n                  label={text}\n                  onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                    onClick?.(id, e);\n                  }}\n                >\n                  <Icon name={icon} />\n                </Button>\n              ))}\n              <Button\n                icon\n                variant='simple'\n                key='expand-collapse'\n                label={t(collapsed ? 'call_panel_expand' : 'call_panel_collapse')}\n                onClick={() => {\n                  resetPopoverToDefaultPosition(containerRef);\n                  setCollapsed(state => !state);\n                }}\n              >\n                <Icon name='caret-down' />\n              </Button>\n            </>\n          }\n        >\n          <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n            <Icon name='headset' />\n            <Text variant='h3'>{heading}</Text>\n          </Flex>\n        </CardHeader>\n        {children}\n      </StyledFloatingPanel>\n    );\n  }\n);\n\nexport default FloatingPanel;\n"]}
+{"version":3,"file":"FloatingPanel.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/FloatingPanel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useLayoutEffect, useRef, useState } from 'react';\nimport type {\n  CSSProperties,\n  FunctionComponent,\n  MouseEvent,\n  PropsWithoutRef,\n  ReactNode,\n  Ref,\n  RefObject\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  CardHeader,\n  Button,\n  useI18n,\n  Icon,\n  registerIcon,\n  Flex,\n  Text,\n  useConsolidatedRef,\n  useDraggable,\n  defaultThemeProp,\n  StyledButton,\n  StyledCard\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, Action, IconName } from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headset.icon';\nimport { StyledCardHeader } from '@pega/cosmos-react-core/lib/components/Card/CardHeader';\n\nregisterIcon(caretDownIcon, headsetIcon);\n\nconst resetPopoverToDefaultPosition = (containerRef: RefObject<HTMLDivElement>): void => {\n  if (containerRef && containerRef.current)\n    containerRef.current.style.transform = 'translate(0px, 0px)';\n};\n\nexport interface FloatingPanelActionProps extends ForwardProps {\n  /** A string to uniquely identify this Action within the onClick handler. */\n  id: Action['id'];\n  /** The text content of the Action. */\n  text: Action['text'];\n  /** Name of the icon from the cosmos set. */\n  icon: IconName;\n  /** Determines if the Action will be disabled. */\n  disabled?: Action['disabled'];\n  /** Called when the Action is clicked. */\n  onClick: NonNullable<Action['onClick']>;\n}\n\nexport interface FloatingPanelProps {\n  /** The heading rendered. */\n  heading: string;\n  /** Content of the panel */\n  children: ReactNode;\n  /** Action button to be rendered in header */\n  actions?: FloatingPanelActionProps[];\n  /** If true, the component will be draggable */\n  draggable?: boolean;\n  /** If true, the panel is visible. */\n  visible?: boolean;\n  /** Reference to the root component. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledFloatingPanel = styled(StyledCard)<{\n  isCollapsed: boolean;\n  isDraggable?: boolean;\n  isVisible?: boolean;\n}>(({ theme, isCollapsed, isDraggable, isVisible = true }) => {\n  return css`\n    max-height: calc(100% - 2rem);\n    position: fixed;\n    z-index: calc(${theme.base['z-index'].backdrop} - 1);\n    width: 25rem;\n    right: calc(2 * ${theme.base.spacing});\n    bottom: calc(2 * ${theme.base.spacing});\n    box-shadow: ${theme.base.shadow.high};\n\n    ${!isVisible &&\n    css`\n      display: none;\n    `}\n\n    ${isCollapsed &&\n    css`\n      transform: translateY(\n        calc(100% - var(--headerHeight) + calc(2 * ${theme.base.spacing}))\n      ) !important;\n    `}\n\n    ${StyledCardHeader} {\n      ${!isCollapsed &&\n      isDraggable &&\n      css`\n        cursor: all-scroll;\n      `}\n    }\n    ${StyledCardHeader} ${StyledButton}:last-child {\n      transition: transform calc(2 * ${theme.base.animation.speed})\n        ${theme.base.animation.timing.ease};\n      transform: ${isCollapsed ? 'rotate(-180deg)' : 'rotate(0)'};\n    }\n  `;\n});\n\nStyledFloatingPanel.defaultProps = defaultThemeProp;\n\nconst FloatingPanel: FunctionComponent<FloatingPanelProps & ForwardProps> = forwardRef(\n  function FloatingPanel(\n    {\n      heading,\n      actions = [],\n      draggable,\n      children,\n      visible = true,\n      ...restProps\n    }: PropsWithoutRef<FloatingPanelProps>,\n    ref: FloatingPanelProps['ref']\n  ) {\n    const t = useI18n();\n    const [collapsed, setCollapsed] = useState(false);\n    const containerRef = useConsolidatedRef(ref);\n    const dragRef = useRef<HTMLDivElement>(null);\n    useDraggable(containerRef, dragRef, !collapsed && draggable);\n\n    const [headerHeight, setHeaderHeight] = useState(0);\n\n    useLayoutEffect(() => {\n      if (containerRef.current) {\n        setHeaderHeight(containerRef.current.querySelector('header')?.offsetHeight || 0);\n      }\n    }, [collapsed]);\n\n    return (\n      <StyledFloatingPanel\n        {...restProps}\n        ref={containerRef}\n        isCollapsed={collapsed}\n        isDraggable={draggable}\n        isVisible={visible}\n        data-app-region\n        style={{ '--headerHeight': `${headerHeight}px` } as CSSProperties}\n      >\n        <CardHeader\n          ref={dragRef}\n          actions={\n            <>\n              {actions.map(({ id, icon, text, onClick, ...restAction }) => (\n                <Button\n                  {...restAction}\n                  icon\n                  variant='simple'\n                  key={id}\n                  label={text}\n                  onClick={(e: MouseEvent<HTMLButtonElement>) => {\n                    onClick?.(id, e);\n                  }}\n                >\n                  <Icon name={icon} />\n                </Button>\n              ))}\n              <Button\n                icon\n                variant='simple'\n                key='expand-collapse'\n                label={t(collapsed ? 'call_panel_expand' : 'call_panel_collapse')}\n                onClick={() => {\n                  resetPopoverToDefaultPosition(containerRef);\n                  setCollapsed(state => !state);\n                }}\n              >\n                <Icon name='caret-down' />\n              </Button>\n            </>\n          }\n        >\n          <Flex container={{ alignItems: 'center', itemGap: 1 }}>\n            <Icon name='headset' />\n            <Text variant='h3'>{heading}</Text>\n          </Flex>\n        </CardHeader>\n        {children}\n      </StyledFloatingPanel>\n    );\n  }\n);\n\nexport default FloatingPanel;\n"]}

package/lib/components/CallControlPanel/IncomingCall.d.ts

@@ -1,5 +1,5 @@
-import { FunctionComponent } from 'react';
-import { ForwardProps } from '@pega/cosmos-react-core';
+import type { FunctionComponent } from 'react';
+import type { ForwardProps } from '@pega/cosmos-react-core';
 import type { IncomingCallProps } from './CallControlPanel.types';
 declare const IncomingCall: FunctionComponent<IncomingCallProps & ForwardProps>;
 export default IncomingCall;

package/lib/components/CallControlPanel/IncomingCall.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IncomingCall.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/IncomingCall.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAGL,YAAY,EAKb,MAAM,yBAAyB,CAAC;AAWjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAalE,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA6BrE,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"IncomingCall.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/IncomingCall.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAW5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAalE,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,GAAG,YAAY,CA6BrE,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/CallControlPanel/IncomingCall.js.map

@@ -1 +1 @@
-{"version":3,"file":"IncomingCall.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/IncomingCall.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,MAAM,EACN,IAAI,EAEJ,YAAY,EACZ,WAAW,EACX,IAAI,EACJ,OAAO,EACR,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,WAAW,MAAM,iEAAiE,CAAC;AAC/F,OAAO,KAAK,YAAY,MAAM,kEAAkE,CAAC;AACjG,OAAO,KAAK,eAAe,MAAM,sEAAsE,CAAC;AACxG,OAAO,KAAK,YAAY,MAAM,mEAAmE,CAAC;AAClG,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AACrG,OAAO,KAAK,mBAAmB,MAAM,0EAA0E,CAAC;AAChH,OAAO,KAAK,iBAAiB,MAAM,wEAAwE,CAAC;AAC5G,OAAO,KAAK,oBAAoB,MAAM,2EAA2E,CAAC;AAElH,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAGpE,YAAY,CACV,WAAW,EACX,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,oBAAoB,CACrB,CAAC;AAEF,MAAM,YAAY,GAAwD,CAAC,EACzE,EAAE,EAAE,MAAM,EACV,WAAW,EACX,YAAY,EACqB,EAAE,EAAE;IACrC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,uBAAuB,cACtB,KAAC,WAAW,IACV,gBAAgB,EAAC,UAAU,EAC3B,OAAO,EAAE,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,CAAC,CAAC,0BAA0B,CAAC,GAAQ,EACzE,SAAS,EACP,8BACE,MAAC,IAAI,IAAC,OAAO,EAAC,SAAS,aAAE,WAAW,CAAC,IAAI,SAAS,EAAC,GAAG,EACrD,WAAW,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,WAAW,CAAC,IAAI,GAAQ,IACvE,EAGL,OAAO,EACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,YACjC,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,YAC5D,CAAC,CAAC,wBAAwB,CAAC,GACrB,GACJ,IANJ,WAAW,CAAC,EAAE,CAQnB,GACsB,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FunctionComponent } from 'react';\n\nimport {\n  Button,\n  Flex,\n  ForwardProps,\n  registerIcon,\n  SummaryItem,\n  Text,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport * as arrowUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-up.icon';\nimport * as micSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-solid.icon';\nimport * as micOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-off-solid.icon';\nimport * as playSoldIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/play-solid.icon';\nimport * as pauseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pause-solid.icon';\nimport * as phoneSplitSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-split-solid.icon';\nimport * as phoneOutSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-out-solid.icon';\nimport * as phoneHangupSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-hangup-solid.icon';\n\nimport { StyledIncomingContainer } from './CallControlPanel.styles';\nimport type { IncomingCallProps } from './CallControlPanel.types';\n\nregisterIcon(\n  arrowUpIcon,\n  micSolidIcon,\n  micOffSolidIcon,\n  playSoldIcon,\n  pauseSolidIcon,\n  phoneSplitSolidIcon,\n  phoneOutSolidIcon,\n  phoneHangupSolidIcon\n);\n\nconst IncomingCall: FunctionComponent<IncomingCallProps & ForwardProps> = ({\n  id: callId,\n  participant,\n  onAcceptCall\n}: IncomingCallProps & ForwardProps) => {\n  const t = useI18n();\n\n  return (\n    <StyledIncomingContainer>\n      <SummaryItem\n        overflowStrategy='ellipsis'\n        primary={<Text variant='secondary'>{t('call_panel_incoming_call')}</Text>}\n        secondary={\n          <>\n            <Text variant='primary'>{participant.name} </Text>{' '}\n            {participant.info && <Text variant='secondary'>{participant.info}</Text>}\n          </>\n        }\n        key={participant.id}\n        actions={\n          <Flex container={{ wrap: 'nowrap' }}>\n            <Button variant='primary' onClick={() => onAcceptCall?.(callId)}>\n              {t('call_panel_answer_call')}\n            </Button>\n          </Flex>\n        }\n      />\n    </StyledIncomingContainer>\n  );\n};\n\nexport default IncomingCall;\n"]}
+{"version":3,"file":"IncomingCall.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/IncomingCall.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAEjG,OAAO,KAAK,WAAW,MAAM,iEAAiE,CAAC;AAC/F,OAAO,KAAK,YAAY,MAAM,kEAAkE,CAAC;AACjG,OAAO,KAAK,eAAe,MAAM,sEAAsE,CAAC;AACxG,OAAO,KAAK,YAAY,MAAM,mEAAmE,CAAC;AAClG,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AACrG,OAAO,KAAK,mBAAmB,MAAM,0EAA0E,CAAC;AAChH,OAAO,KAAK,iBAAiB,MAAM,wEAAwE,CAAC;AAC5G,OAAO,KAAK,oBAAoB,MAAM,2EAA2E,CAAC;AAElH,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAGpE,YAAY,CACV,WAAW,EACX,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,oBAAoB,CACrB,CAAC;AAEF,MAAM,YAAY,GAAwD,CAAC,EACzE,EAAE,EAAE,MAAM,EACV,WAAW,EACX,YAAY,EACqB,EAAE,EAAE;IACrC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,uBAAuB,cACtB,KAAC,WAAW,IACV,gBAAgB,EAAC,UAAU,EAC3B,OAAO,EAAE,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,CAAC,CAAC,0BAA0B,CAAC,GAAQ,EACzE,SAAS,EACP,8BACE,MAAC,IAAI,IAAC,OAAO,EAAC,SAAS,aAAE,WAAW,CAAC,IAAI,SAAS,EAAC,GAAG,EACrD,WAAW,CAAC,IAAI,IAAI,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,WAAW,CAAC,IAAI,GAAQ,IACvE,EAGL,OAAO,EACL,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,YACjC,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,MAAM,CAAC,YAC5D,CAAC,CAAC,wBAAwB,CAAC,GACrB,GACJ,IANJ,WAAW,CAAC,EAAE,CAQnB,GACsB,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import type { FunctionComponent } from 'react';\n\nimport { Button, Flex, registerIcon, SummaryItem, Text, useI18n } from '@pega/cosmos-react-core';\nimport type { ForwardProps } from '@pega/cosmos-react-core';\nimport * as arrowUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-up.icon';\nimport * as micSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-solid.icon';\nimport * as micOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-off-solid.icon';\nimport * as playSoldIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/play-solid.icon';\nimport * as pauseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pause-solid.icon';\nimport * as phoneSplitSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-split-solid.icon';\nimport * as phoneOutSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-out-solid.icon';\nimport * as phoneHangupSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-hangup-solid.icon';\n\nimport { StyledIncomingContainer } from './CallControlPanel.styles';\nimport type { IncomingCallProps } from './CallControlPanel.types';\n\nregisterIcon(\n  arrowUpIcon,\n  micSolidIcon,\n  micOffSolidIcon,\n  playSoldIcon,\n  pauseSolidIcon,\n  phoneSplitSolidIcon,\n  phoneOutSolidIcon,\n  phoneHangupSolidIcon\n);\n\nconst IncomingCall: FunctionComponent<IncomingCallProps & ForwardProps> = ({\n  id: callId,\n  participant,\n  onAcceptCall\n}: IncomingCallProps & ForwardProps) => {\n  const t = useI18n();\n\n  return (\n    <StyledIncomingContainer>\n      <SummaryItem\n        overflowStrategy='ellipsis'\n        primary={<Text variant='secondary'>{t('call_panel_incoming_call')}</Text>}\n        secondary={\n          <>\n            <Text variant='primary'>{participant.name} </Text>{' '}\n            {participant.info && <Text variant='secondary'>{participant.info}</Text>}\n          </>\n        }\n        key={participant.id}\n        actions={\n          <Flex container={{ wrap: 'nowrap' }}>\n            <Button variant='primary' onClick={() => onAcceptCall?.(callId)}>\n              {t('call_panel_answer_call')}\n            </Button>\n          </Flex>\n        }\n      />\n    </StyledIncomingContainer>\n  );\n};\n\nexport default IncomingCall;\n"]}

package/lib/components/CallControlPanel/StopWatch.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import type { FunctionComponent } from 'react';
 interface StopWatchProps {
     /** Defines the Date or Epoch time as a starting point of the stop watch. */
     startTime: number | Date;

package/lib/components/CallControlPanel/StopWatch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StopWatch.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/StopWatch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAiC,MAAM,OAAO,CAAC;AAOzE,UAAU,cAAc;IACtB,4EAA4E;IAC5E,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,sSAG3B,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,CAwBhD,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"StopWatch.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/StopWatch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAO/C,UAAU,cAAc;IACtB,4EAA4E;IAC5E,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,sSAG3B,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,CAwBhD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/CallControlPanel/StopWatch.js.map

@@ -1 +1 @@
-{"version":3,"file":"StopWatch.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/StopWatch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AASzC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;;CAGhD,CAAC;AAEF,MAAM,SAAS,GAAsC,IAAI,CACvD,CAAC,EAAE,SAAS,EAAE,OAAO,EAAkB,EAAE,EAAE;IACzC,MAAM,QAAQ,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACjC,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAEtC,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;YAC7B,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACpB,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,CAAC;gBAClD,IAAI,aAAa;oBAAE,OAAO,IAAI,MAAM,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC;gBACpE,QAAQ,CAAC,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC;aACxC;QACH,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;IAE/B,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,eAAe,EAAE,GAAG,EAAE,QAAQ,aACrC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,EACnC,aAAa,IAAI,MAAM,cAAc,CAAC,aAAa,CAAC,EAAE,IAClD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { FunctionComponent, memo, useRef, useLayoutEffect } from 'react';\nimport styled from 'styled-components';\n\nimport { StyledText, Text } from '@pega/cosmos-react-core';\n\nimport { formatDuration } from './utils';\n\ninterface StopWatchProps {\n  /** Defines the Date or Epoch time as a starting point of the stop watch. */\n  startTime: number | Date;\n  /** Defines the Date or Epoch time of the timeout. */\n  timeout?: number | Date;\n}\n\nexport const StyledStopWatch = styled(StyledText)`\n  min-width: 8ch;\n  text-align: end;\n`;\n\nconst StopWatch: FunctionComponent<StopWatchProps> = memo(\n  ({ startTime, timeout }: StopWatchProps) => {\n    const clockRef = useRef<HTMLSpanElement>(null);\n    const millis = Number(startTime);\n    const timeoutMillis = Number(timeout);\n\n    useLayoutEffect(() => {\n      const timer = setInterval(() => {\n        if (clockRef.current) {\n          let content = formatDuration(Date.now() - millis);\n          if (timeoutMillis) content += ` / ${formatDuration(timeoutMillis)}`;\n          clockRef.current.textContent = content;\n        }\n      }, 1000);\n      return () => clearInterval(timer);\n    }, [startTime, timeoutMillis]);\n\n    return (\n      <Text as={StyledStopWatch} ref={clockRef}>\n        {formatDuration(Date.now() - millis)}\n        {timeoutMillis && ` / ${formatDuration(timeoutMillis)}`}\n      </Text>\n    );\n  }\n);\n\nexport default StopWatch;\n"]}
+{"version":3,"file":"StopWatch.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/StopWatch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AASzC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;;CAGhD,CAAC;AAEF,MAAM,SAAS,GAAsC,IAAI,CACvD,CAAC,EAAE,SAAS,EAAE,OAAO,EAAkB,EAAE,EAAE;IACzC,MAAM,QAAQ,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACjC,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAEtC,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;YAC7B,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACpB,IAAI,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,CAAC;gBAClD,IAAI,aAAa;oBAAE,OAAO,IAAI,MAAM,cAAc,CAAC,aAAa,CAAC,EAAE,CAAC;gBACpE,QAAQ,CAAC,OAAO,CAAC,WAAW,GAAG,OAAO,CAAC;aACxC;QACH,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC,EAAE,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;IAE/B,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,eAAe,EAAE,GAAG,EAAE,QAAQ,aACrC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC,EACnC,aAAa,IAAI,MAAM,cAAc,CAAC,aAAa,CAAC,EAAE,IAClD,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { memo, useRef, useLayoutEffect } from 'react';\nimport type { FunctionComponent } from 'react';\nimport styled from 'styled-components';\n\nimport { StyledText, Text } from '@pega/cosmos-react-core';\n\nimport { formatDuration } from './utils';\n\ninterface StopWatchProps {\n  /** Defines the Date or Epoch time as a starting point of the stop watch. */\n  startTime: number | Date;\n  /** Defines the Date or Epoch time of the timeout. */\n  timeout?: number | Date;\n}\n\nexport const StyledStopWatch = styled(StyledText)`\n  min-width: 8ch;\n  text-align: end;\n`;\n\nconst StopWatch: FunctionComponent<StopWatchProps> = memo(\n  ({ startTime, timeout }: StopWatchProps) => {\n    const clockRef = useRef<HTMLSpanElement>(null);\n    const millis = Number(startTime);\n    const timeoutMillis = Number(timeout);\n\n    useLayoutEffect(() => {\n      const timer = setInterval(() => {\n        if (clockRef.current) {\n          let content = formatDuration(Date.now() - millis);\n          if (timeoutMillis) content += ` / ${formatDuration(timeoutMillis)}`;\n          clockRef.current.textContent = content;\n        }\n      }, 1000);\n      return () => clearInterval(timer);\n    }, [startTime, timeoutMillis]);\n\n    return (\n      <Text as={StyledStopWatch} ref={clockRef}>\n        {formatDuration(Date.now() - millis)}\n        {timeoutMillis && ` / ${formatDuration(timeoutMillis)}`}\n      </Text>\n    );\n  }\n);\n\nexport default StopWatch;\n"]}

package/lib/components/DialPad/DialPad.d.ts

@@ -1,6 +1,6 @@
-import { FunctionComponent, Ref } from 'react';
-import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
-import { DialPadKeyboardProps } from './DialPadKeyboard';
+import type { FunctionComponent, Ref } from 'react';
+import type { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { DialPadKeyboardProps } from './DialPadKeyboard';
 export interface DialPadProps extends NoChildrenProp {
     /** Entered number. */
     value: string;

package/lib/components/DialPad/DialPad.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialPad.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2B,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAGzF,OAAO,EACL,YAAY,EAQZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,oCAAoC;IACpC,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;IACnC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAiBD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAoC1D,CAAC;AAEH,eAAe,OAAO,CAAC"}
+{"version":3,"file":"DialPad.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAYlF,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAG5E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,oCAAoC;IACpC,IAAI,EAAE,oBAAoB,CAAC,MAAM,CAAC,CAAC;IACnC,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAiBD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,GAAG,YAAY,CAoC1D,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/lib/components/DialPad/DialPad.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialPad.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,UAAU,EAA2C,MAAM,OAAO,CAAC;AACzF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAEL,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,UAAU,EACV,UAAU,EAEX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,eAAyC,MAAM,mBAAmB,CAAC;AAe1E,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;MACN,UAAU;uBACO,IAAI,CAAC,OAAO;iBAClB,IAAI,CAAC,OAAO;;;MAGvB,UAAU,IAAI,UAAU;eACf,IAAI,CAAC,OAAO,CAAC,WAAW;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CAAC,SAAS,OAAO,CACzF,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAiC,EACrE,GAAwB;IAExB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,MAAM,QAAQ,GAAG,QAAQ,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAC/F,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,aACrB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,aACtE,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC7C,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBAC3B,CAAC,gBACW,CAAC,CAAC,mCAAmC,CAAC,EAClD,QAAQ,EAAE,IAAI,KAAK,MAAM,GACzB,EACD,IAAI,KAAK,MAAM,IAAI,WAAW,IAAI,CACjC,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,WAAW,gBACR,CAAC,CAAC,4BAA4B,EAAE,CAAC,KAAK,CAAC,CAAC,EACpD,QAAQ,EAAE,KAAK,CAAC,MAAM,KAAK,CAAC,YAE3B,CAAC,CAAC,4BAA4B,CAAC,GACzB,CACV,IACI,EACP,KAAC,eAAe,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,GAAI,IACvD,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,OAAO,CAAC","sourcesContent":["import { ChangeEvent, forwardRef, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  ForwardProps,\n  defaultThemeProp,\n  Input,\n  Button,\n  useI18n,\n  Flex,\n  StyledIcon,\n  StyledFlex,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport DialPadKeyboard, { DialPadKeyboardProps } from './DialPadKeyboard';\n\nexport interface DialPadProps extends NoChildrenProp {\n  /** Entered number. */\n  value: string;\n  /** Callback fired when user types in the input or clicks on dialpad. */\n  onChange: (value: string) => void;\n  /** Callback fired when user clicks call button. */\n  onCallClick?: () => void;\n  /** Keypad mode, regular or DTMF. */\n  mode: DialPadKeyboardProps['mode'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledDialPad = styled.div(({ theme: { base } }) => {\n  return css`\n    ${StyledFlex} {\n      margin: 0 auto ${base.spacing} auto;\n      padding: ${base.spacing} 0;\n    }\n\n    ${StyledFlex} ${StyledIcon} {\n      color: ${base.palette.interactive};\n    }\n  `;\n});\n\nStyledDialPad.defaultProps = defaultThemeProp;\n\nconst DialPad: FunctionComponent<DialPadProps & ForwardProps> = forwardRef(function DialPad(\n  { value, onCallClick, onChange, mode }: PropsWithoutRef<DialPadProps>,\n  ref: Ref<HTMLDivElement>\n) {\n  const t = useI18n();\n\n  const onDialButtonClick = (charCode: number) => {\n    const newValue = charCode === 127 ? value.slice(0, -1) : value + String.fromCharCode(charCode);\n    onChange(newValue);\n  };\n\n  return (\n    <StyledDialPad ref={ref}>\n      <Flex container={{ alignItems: 'center', justify: 'center', itemGap: 1 }}>\n        <Input\n          value={value}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => {\n            onChange(e.target.value);\n          }}\n          aria-label={t('dial_pad_phone_number_input_label')}\n          readOnly={mode === 'DTMF'}\n        />\n        {mode !== 'DTMF' && onCallClick && (\n          <Button\n            variant='primary'\n            onClick={onCallClick}\n            aria-label={t('dial_pad_call_button_label', [value])}\n            disabled={value.length === 0}\n          >\n            {t('dial_pad_call_button_label')}\n          </Button>\n        )}\n      </Flex>\n      <DialPadKeyboard onDialButtonClick={onDialButtonClick} mode={mode} />\n    </StyledDialPad>\n  );\n});\n\nexport default DialPad;\n"]}
+{"version":3,"file":"DialPad.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,gBAAgB,EAChB,KAAK,EACL,MAAM,EACN,OAAO,EACP,IAAI,EACJ,UAAU,EACV,UAAU,EACX,MAAM,yBAAyB,CAAC;AAGjC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAgBhD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;MACN,UAAU;uBACO,IAAI,CAAC,OAAO;iBAClB,IAAI,CAAC,OAAO;;;MAGvB,UAAU,IAAI,UAAU;eACf,IAAI,CAAC,OAAO,CAAC,WAAW;;GAEpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,OAAO,GAAmD,UAAU,CAAC,SAAS,OAAO,CACzF,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAiC,EACrE,GAAwB;IAExB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,MAAM,iBAAiB,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC7C,MAAM,QAAQ,GAAG,QAAQ,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAC/F,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,aAAa,IAAC,GAAG,EAAE,GAAG,aACrB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,aACtE,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE;4BAC7C,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;wBAC3B,CAAC,gBACW,CAAC,CAAC,mCAAmC,CAAC,EAClD,QAAQ,EAAE,IAAI,KAAK,MAAM,GACzB,EACD,IAAI,KAAK,MAAM,IAAI,WAAW,IAAI,CACjC,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,WAAW,gBACR,CAAC,CAAC,4BAA4B,EAAE,CAAC,KAAK,CAAC,CAAC,EACpD,QAAQ,EAAE,KAAK,CAAC,MAAM,KAAK,CAAC,YAE3B,CAAC,CAAC,4BAA4B,CAAC,GACzB,CACV,IACI,EACP,KAAC,eAAe,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,GAAI,IACvD,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,OAAO,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { ChangeEvent, FunctionComponent, PropsWithoutRef, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  Input,\n  Button,\n  useI18n,\n  Flex,\n  StyledIcon,\n  StyledFlex\n} from '@pega/cosmos-react-core';\nimport type { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';\n\nimport DialPadKeyboard from './DialPadKeyboard';\nimport type { DialPadKeyboardProps } from './DialPadKeyboard';\n\nexport interface DialPadProps extends NoChildrenProp {\n  /** Entered number. */\n  value: string;\n  /** Callback fired when user types in the input or clicks on dialpad. */\n  onChange: (value: string) => void;\n  /** Callback fired when user clicks call button. */\n  onCallClick?: () => void;\n  /** Keypad mode, regular or DTMF. */\n  mode: DialPadKeyboardProps['mode'];\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledDialPad = styled.div(({ theme: { base } }) => {\n  return css`\n    ${StyledFlex} {\n      margin: 0 auto ${base.spacing} auto;\n      padding: ${base.spacing} 0;\n    }\n\n    ${StyledFlex} ${StyledIcon} {\n      color: ${base.palette.interactive};\n    }\n  `;\n});\n\nStyledDialPad.defaultProps = defaultThemeProp;\n\nconst DialPad: FunctionComponent<DialPadProps & ForwardProps> = forwardRef(function DialPad(\n  { value, onCallClick, onChange, mode }: PropsWithoutRef<DialPadProps>,\n  ref: Ref<HTMLDivElement>\n) {\n  const t = useI18n();\n\n  const onDialButtonClick = (charCode: number) => {\n    const newValue = charCode === 127 ? value.slice(0, -1) : value + String.fromCharCode(charCode);\n    onChange(newValue);\n  };\n\n  return (\n    <StyledDialPad ref={ref}>\n      <Flex container={{ alignItems: 'center', justify: 'center', itemGap: 1 }}>\n        <Input\n          value={value}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => {\n            onChange(e.target.value);\n          }}\n          aria-label={t('dial_pad_phone_number_input_label')}\n          readOnly={mode === 'DTMF'}\n        />\n        {mode !== 'DTMF' && onCallClick && (\n          <Button\n            variant='primary'\n            onClick={onCallClick}\n            aria-label={t('dial_pad_call_button_label', [value])}\n            disabled={value.length === 0}\n          >\n            {t('dial_pad_call_button_label')}\n          </Button>\n        )}\n      </Flex>\n      <DialPadKeyboard onDialButtonClick={onDialButtonClick} mode={mode} />\n    </StyledDialPad>\n  );\n});\n\nexport default DialPad;\n"]}

package/lib/components/DialPad/DialPad.types.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import type { RefObject } from 'react';
 export interface DialButton {
     id: number;
     digit?: number;

package/lib/components/DialPad/DialPad.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialPad.types.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,UAAU,EAAE,CAAC;CAC3B;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEzE,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,KAAK,CAAC;IACX,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;CACf"}
+{"version":3,"file":"DialPad.types.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,UAAU,EAAE,CAAC;CAC3B;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEzE,MAAM,WAAW,sBAAsB;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,KAAK,CAAC;IACX,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,KAAK,CAAC;CACf"}

package/lib/components/DialPad/DialPad.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialPad.types.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.types.ts"],"names":[],"mappings":"","sourcesContent":["import { RefObject } from 'react';\n\nexport interface DialButton {\n  id: number;\n  digit?: number;\n  subdigit?: string;\n  special?: string;\n  icon?: string;\n}\n\nexport interface DialButtonRow {\n  rowId: number;\n  dialButtons: DialButton[];\n}\n\nexport type KeyDownNavigateOptions = {\n  [key: string]: (previousId: number) => number;\n};\n\nexport type KeyDownDialButtonOptions = {\n  [key: string]: DialButton;\n};\n\nexport type Index = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\nexport interface NavigationGraphElement {\n  sign?: string;\n  alt?: string;\n  special?: string;\n  keyCode: number;\n  altKeyCode?: number;\n  ref?: RefObject<HTMLButtonElement>;\n  icon?: string;\n  up?: Index;\n  left?: Index;\n  down?: Index;\n  right?: Index;\n}\n"]}
+{"version":3,"file":"DialPad.types.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPad.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { RefObject } from 'react';\n\nexport interface DialButton {\n  id: number;\n  digit?: number;\n  subdigit?: string;\n  special?: string;\n  icon?: string;\n}\n\nexport interface DialButtonRow {\n  rowId: number;\n  dialButtons: DialButton[];\n}\n\nexport type KeyDownNavigateOptions = {\n  [key: string]: (previousId: number) => number;\n};\n\nexport type KeyDownDialButtonOptions = {\n  [key: string]: DialButton;\n};\n\nexport type Index = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\nexport interface NavigationGraphElement {\n  sign?: string;\n  alt?: string;\n  special?: string;\n  keyCode: number;\n  altKeyCode?: number;\n  ref?: RefObject<HTMLButtonElement>;\n  icon?: string;\n  up?: Index;\n  left?: Index;\n  down?: Index;\n  right?: Index;\n}\n"]}

package/lib/components/DialPad/DialPadDialog.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import type { FunctionComponent } from 'react';
 interface DialPadDialogProps {
     target: HTMLElement | null;
     onClose: () => void;

package/lib/components/DialPad/DialPadDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialPadDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAmBvE,UAAU,kBAAkB;IAC1B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAgExD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"DialPadDialog.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAmB/C,UAAU,kBAAkB;IAC1B,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,CAgExD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/DialPad/DialPadDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialPadDialog.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvE,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAa,EACb,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,OAAO,EACP,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,OAAO,MAAM,WAAW,CAAC;AAQhC,MAAM,aAAa,GAA0C,CAAC,EAC5D,MAAM,EACN,OAAO,EAAE,WAAW,EACpB,iBAAiB,EACE,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,WAAW,EAAE,CAAC;QACd,MAAM,EAAE,KAAK,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;IAClD,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAC/B,YAAY,CAAC,UAAU,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,OAAO,IACN,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,UAAU,EACf,SAAS,EAAC,SAAS,EACnB,SAAS,EAAE;YACT;gBACE,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,IAAI;gBACb,OAAO,EAAE;oBACP,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC;iBACpD;aACF;SACF,EACD,OAAO,EAAE,CAAC,CAAC,8BAA8B,CAAC,YAE1C,MAAC,IAAI,eACH,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,YAGX,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,8BAA8B,CAAC,GAAQ,GAClD,EACb,KAAC,WAAW,cACV,KAAC,OAAO,IACN,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,SAAS,CAAC,EAAE;4BACpB,cAAc,CAAC,SAAS,CAAC,CAAC;4BAC1B,iFAAiF;4BACjF,gEAAgE;4BAChE,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;wBAChE,CAAC,EACD,IAAI,EAAC,MAAM,GACX,GACU,IACT,GACC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FunctionComponent, useRef, useEffect, useState } from 'react';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  getFocusables,\n  Icon,\n  Popover,\n  Text,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport DialPad from './DialPad';\n\ninterface DialPadDialogProps {\n  target: HTMLElement | null;\n  onClose: () => void;\n  onDialButtonClick: (charCode: number) => void;\n}\n\nconst DialPadDialog: FunctionComponent<DialPadDialogProps> = ({\n  target,\n  onClose: onCloseProp,\n  onDialButtonClick\n}: DialPadDialogProps) => {\n  const t = useI18n();\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  const onClose = () => {\n    onCloseProp();\n    target?.focus();\n  };\n\n  useOuterEvent('mousedown', [popoverRef], onClose);\n  useEscape(onClose, popoverRef);\n  useFocusTrap(popoverRef);\n\n  useEffect(() => {\n    getFocusables(popoverRef)[0]?.focus();\n  }, []);\n\n  const [phoneNumber, setPhoneNumber] = useState('');\n\n  return (\n    <Popover\n      target={target}\n      ref={popoverRef}\n      placement='top-end'\n      modifiers={[\n        {\n          name: 'flip',\n          enabled: true,\n          options: {\n            fallbackPlacements: ['bottom-end', 'left', 'right']\n          }\n        }\n      ]}\n      heading={t('call_panel_send_dtmf_heading')}\n    >\n      <Card>\n        <CardHeader\n          actions={\n            <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n              <Icon name='times' />\n            </Button>\n          }\n        >\n          <Text variant='h3'>{t('call_panel_send_dtmf_heading')}</Text>\n        </CardHeader>\n        <CardContent>\n          <DialPad\n            value={phoneNumber}\n            onChange={inputText => {\n              setPhoneNumber(inputText);\n              // In DTMF mode only dialpad can be used for input without possibility to delete,\n              // so always last character can be send to the parent component.\n              onDialButtonClick(inputText.charCodeAt(inputText.length - 1));\n            }}\n            mode='DTMF'\n          />\n        </CardContent>\n      </Card>\n    </Popover>\n  );\n};\n\nexport default DialPadDialog;\n"]}
+{"version":3,"file":"DialPadDialog.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGpD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,UAAU,EACV,aAAa,EACb,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,OAAO,EACP,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,OAAO,MAAM,WAAW,CAAC;AAQhC,MAAM,aAAa,GAA0C,CAAC,EAC5D,MAAM,EACN,OAAO,EAAE,WAAW,EACpB,iBAAiB,EACE,EAAE,EAAE;IACvB,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,WAAW,EAAE,CAAC;QACd,MAAM,EAAE,KAAK,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,aAAa,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;IAClD,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAC/B,YAAY,CAAC,UAAU,CAAC,CAAC;IAEzB,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,OAAO,IACN,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,UAAU,EACf,SAAS,EAAC,SAAS,EACnB,SAAS,EAAE;YACT;gBACE,IAAI,EAAE,MAAM;gBACZ,OAAO,EAAE,IAAI;gBACb,OAAO,EAAE;oBACP,kBAAkB,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,OAAO,CAAC;iBACpD;aACF;SACF,EACD,OAAO,EAAE,CAAC,CAAC,8BAA8B,CAAC,YAE1C,MAAC,IAAI,eACH,KAAC,UAAU,IACT,OAAO,EACL,KAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAC,QAAQ,gBAAa,CAAC,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,OAAO,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACd,YAGX,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,YAAE,CAAC,CAAC,8BAA8B,CAAC,GAAQ,GAClD,EACb,KAAC,WAAW,cACV,KAAC,OAAO,IACN,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,SAAS,CAAC,EAAE;4BACpB,cAAc,CAAC,SAAS,CAAC,CAAC;4BAC1B,iFAAiF;4BACjF,gEAAgE;4BAChE,iBAAiB,CAAC,SAAS,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;wBAChE,CAAC,EACD,IAAI,EAAC,MAAM,GACX,GACU,IACT,GACC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useRef, useEffect, useState } from 'react';\nimport type { FunctionComponent } from 'react';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  getFocusables,\n  Icon,\n  Popover,\n  Text,\n  useEscape,\n  useFocusTrap,\n  useI18n,\n  useOuterEvent\n} from '@pega/cosmos-react-core';\n\nimport DialPad from './DialPad';\n\ninterface DialPadDialogProps {\n  target: HTMLElement | null;\n  onClose: () => void;\n  onDialButtonClick: (charCode: number) => void;\n}\n\nconst DialPadDialog: FunctionComponent<DialPadDialogProps> = ({\n  target,\n  onClose: onCloseProp,\n  onDialButtonClick\n}: DialPadDialogProps) => {\n  const t = useI18n();\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  const onClose = () => {\n    onCloseProp();\n    target?.focus();\n  };\n\n  useOuterEvent('mousedown', [popoverRef], onClose);\n  useEscape(onClose, popoverRef);\n  useFocusTrap(popoverRef);\n\n  useEffect(() => {\n    getFocusables(popoverRef)[0]?.focus();\n  }, []);\n\n  const [phoneNumber, setPhoneNumber] = useState('');\n\n  return (\n    <Popover\n      target={target}\n      ref={popoverRef}\n      placement='top-end'\n      modifiers={[\n        {\n          name: 'flip',\n          enabled: true,\n          options: {\n            fallbackPlacements: ['bottom-end', 'left', 'right']\n          }\n        }\n      ]}\n      heading={t('call_panel_send_dtmf_heading')}\n    >\n      <Card>\n        <CardHeader\n          actions={\n            <Button icon variant='simple' aria-label={t('close')} onClick={onClose}>\n              <Icon name='times' />\n            </Button>\n          }\n        >\n          <Text variant='h3'>{t('call_panel_send_dtmf_heading')}</Text>\n        </CardHeader>\n        <CardContent>\n          <DialPad\n            value={phoneNumber}\n            onChange={inputText => {\n              setPhoneNumber(inputText);\n              // In DTMF mode only dialpad can be used for input without possibility to delete,\n              // so always last character can be send to the parent component.\n              onDialButtonClick(inputText.charCodeAt(inputText.length - 1));\n            }}\n            mode='DTMF'\n          />\n        </CardContent>\n      </Card>\n    </Popover>\n  );\n};\n\nexport default DialPadDialog;\n"]}

package/lib/components/DialPad/DialPadKeyboard.d.ts

@@ -1,5 +1,5 @@
-import { FunctionComponent } from 'react';
-import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import type { FunctionComponent } from 'react';
+import type { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
 export type DialPadKeyboardMode = 'default' | 'DTMF';
 export interface DialPadKeyboardProps extends NoChildrenProp {
     /** Callback fired on dial button click */

package/lib/components/DialPad/DialPadKeyboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialPadKeyboard.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadKeyboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,YAAY,EAEZ,cAAc,EAIf,MAAM,yBAAyB,CAAC;AAUjC,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D,0CAA0C;IAC1C,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,6BAA6B;IAC7B,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAkJ3E,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DialPadKeyboard.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadKeyboard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAuC,MAAM,OAAO,CAAC;AAGpF,OAAO,KAAK,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAU5E,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,oBAAqB,SAAQ,cAAc;IAC1D,0CAA0C;IAC1C,iBAAiB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,6BAA6B;IAC7B,IAAI,CAAC,EAAE,mBAAmB,CAAC;CAC5B;AAED,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,oBAAoB,GAAG,YAAY,CAkJ3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/DialPad/DialPadKeyboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialPadKeyboard.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadKeyboard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  KeyboardEvent,\n  forwardRef,\n  useRef,\n  useCallback\n} from 'react';\n\nimport {\n  ForwardProps,\n  Icon,\n  NoChildrenProp,\n  registerIcon,\n  useI18n,\n  useLongPress\n} from '@pega/cosmos-react-core';\nimport * as backspaceIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/backspace.icon';\n\nimport { StyledDialButton, StyledDialPadKeyboard, StyledSpecial } from './DialPadKeyboard.styles';\nimport { dtmfGraph, defaultGraph, defaultButtonGrid, dtmfButtonGrid } from './KeyboardNavigation';\nimport { Index, NavigationGraphElement } from './DialPad.types';\nimport { getDialButtonIndex, isNavigationEvent } from './utils';\n\nregisterIcon(backspaceIcon);\n\nexport type DialPadKeyboardMode = 'default' | 'DTMF';\n\nexport interface DialPadKeyboardProps extends NoChildrenProp {\n  /** Callback fired on dial button click */\n  onDialButtonClick: (charCode: number) => void;\n  /** Dial Pad Keyboard mode */\n  mode?: DialPadKeyboardMode;\n}\n\nconst DialPadKeyboard: FunctionComponent<DialPadKeyboardProps & ForwardProps> = forwardRef(\n  function DialPadKeyboard(\n    { onDialButtonClick, mode = 'default' }: PropsWithoutRef<DialPadKeyboardProps>,\n    ref: Ref<HTMLElement>\n  ) {\n    const buttonNavGraph = mode === 'DTMF' ? dtmfGraph : defaultGraph;\n    const buttonGrid = mode === 'DTMF' ? dtmfButtonGrid : defaultButtonGrid;\n\n    const t = useI18n();\n    const zeroButtonLongPress = useLongPress<HTMLButtonElement>(\n      () => onDialButtonClick(buttonNavGraph[10].altKeyCode || 43),\n      () => onDialButtonClick(buttonNavGraph[10].keyCode)\n    );\n    // This is not a violation of the rules, as the array length is constant and order the always the same.\n    buttonNavGraph.forEach(element => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      element.ref = useRef<HTMLButtonElement>(null);\n    });\n\n    const handleDialButtonEvent = (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n      e.preventDefault();\n      e.stopPropagation();\n      const buttonEl = buttonNavGraph[index];\n      if (!buttonEl || (mode === 'DTMF' && index === 12)) return;\n      buttonEl.ref?.current?.focus();\n      onDialButtonClick(buttonEl.keyCode);\n    };\n\n    const handlePlusDialButton = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      const buttonEl = buttonNavGraph[10];\n      if (!buttonEl || !buttonEl.altKeyCode) return;\n      buttonEl.ref?.current?.focus();\n      onDialButtonClick(buttonEl.altKeyCode);\n    };\n\n    const handleEnterEvent = useCallback(\n      (e: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          onDialButtonClick(Number((e.target as HTMLButtonElement).value));\n        }\n      },\n      [onDialButtonClick]\n    );\n\n    const findButtonInGraph = (e: React.KeyboardEvent<HTMLElement>) => {\n      return buttonNavGraph.find(\n        el => el.keyCode === Number((e.target as HTMLButtonElement).value)\n      );\n    };\n\n    const getTargetIndexOnNavigationEvent = (\n      btnEl: NavigationGraphElement,\n      e: React.KeyboardEvent<HTMLButtonElement>\n    ): Index | undefined => {\n      return {\n        ArrowUp: btnEl.up,\n        ArrowLeft: btnEl.left,\n        ArrowDown: btnEl.down,\n        ArrowRight: btnEl.right\n      }[e.key];\n    };\n\n    const handleNavigationEvent = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      const btnEl = findButtonInGraph(e);\n      if (!btnEl) return;\n      const targetIndex = getTargetIndexOnNavigationEvent(btnEl, e);\n      if (targetIndex !== undefined) buttonNavGraph[targetIndex].ref?.current?.focus();\n    };\n\n    const handleKeyboardNavigation = useCallback(\n      (e: KeyboardEvent<HTMLButtonElement>) => {\n        const index = getDialButtonIndex(e);\n        if (index !== -1) {\n          handleDialButtonEvent(e, index);\n        } else if (e.key === '+') {\n          handlePlusDialButton(e);\n        } else if (isNavigationEvent(e)) {\n          handleNavigationEvent(e);\n        }\n      },\n      [onDialButtonClick]\n    );\n\n    return (\n      <StyledDialPadKeyboard\n        ref={ref}\n        onKeyDown={handleKeyboardNavigation}\n        dir='ltr'\n        role='grid'\n        aria-label={t('dial_pad_keyboard')}\n        container={{\n          cols: '1fr',\n          rowGap: 1,\n          justifyItems: 'center'\n        }}\n      >\n        {buttonGrid.map((row: NavigationGraphElement[], index: number) => {\n          if (mode === 'default' || (mode === 'DTMF' && index < 4)) {\n            return (\n              // eslint-disable-next-line react/no-array-index-key\n              <div role='row' key={`row-${index}`}>\n                {row.map((dialButton: NavigationGraphElement) =>\n                  dialButton.alt === '+' ? (\n                    <StyledDialButton\n                      key={dialButton.keyCode}\n                      type='button'\n                      role='gridcell'\n                      tabIndex={-1}\n                      ref={dialButton.ref}\n                      value={dialButton.keyCode}\n                      {...zeroButtonLongPress}\n                    >\n                      {dialButton.sign && <span>{dialButton.sign}</span>}\n                      {dialButton.alt && <span>{dialButton.alt}</span>}\n                    </StyledDialButton>\n                  ) : (\n                    <StyledDialButton\n                      key={dialButton.keyCode}\n                      type='button'\n                      role='gridcell'\n                      onClick={() => onDialButtonClick(dialButton.keyCode)}\n                      onKeyDown={handleEnterEvent}\n                      tabIndex={dialButton.sign === '1' ? 0 : -1}\n                      aria-label={dialButton.icon ? dialButton.icon : undefined}\n                      ref={dialButton.ref}\n                      value={dialButton.keyCode}\n                    >\n                      {dialButton.sign && <span>{dialButton.sign}</span>}\n                      {dialButton.alt && <span>{dialButton.alt}</span>}\n                      {dialButton.special && <StyledSpecial>{dialButton.special}</StyledSpecial>}\n                      {dialButton.icon && <Icon name={dialButton.icon} />}\n                    </StyledDialButton>\n                  )\n                )}\n              </div>\n            );\n          }\n          return undefined;\n        })}\n      </StyledDialPadKeyboard>\n    );\n  }\n);\n\nexport default DialPadKeyboard;\n"]}
+{"version":3,"file":"DialPadKeyboard.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadKeyboard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useCallback } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref, KeyboardEvent } from 'react';\n\nimport { Icon, registerIcon, useI18n, useLongPress } from '@pega/cosmos-react-core';\nimport type { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';\nimport * as backspaceIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/backspace.icon';\n\nimport { StyledDialButton, StyledDialPadKeyboard, StyledSpecial } from './DialPadKeyboard.styles';\nimport { dtmfGraph, defaultGraph, defaultButtonGrid, dtmfButtonGrid } from './KeyboardNavigation';\nimport type { Index, NavigationGraphElement } from './DialPad.types';\nimport { getDialButtonIndex, isNavigationEvent } from './utils';\n\nregisterIcon(backspaceIcon);\n\nexport type DialPadKeyboardMode = 'default' | 'DTMF';\n\nexport interface DialPadKeyboardProps extends NoChildrenProp {\n  /** Callback fired on dial button click */\n  onDialButtonClick: (charCode: number) => void;\n  /** Dial Pad Keyboard mode */\n  mode?: DialPadKeyboardMode;\n}\n\nconst DialPadKeyboard: FunctionComponent<DialPadKeyboardProps & ForwardProps> = forwardRef(\n  function DialPadKeyboard(\n    { onDialButtonClick, mode = 'default' }: PropsWithoutRef<DialPadKeyboardProps>,\n    ref: Ref<HTMLElement>\n  ) {\n    const buttonNavGraph = mode === 'DTMF' ? dtmfGraph : defaultGraph;\n    const buttonGrid = mode === 'DTMF' ? dtmfButtonGrid : defaultButtonGrid;\n\n    const t = useI18n();\n    const zeroButtonLongPress = useLongPress<HTMLButtonElement>(\n      () => onDialButtonClick(buttonNavGraph[10].altKeyCode || 43),\n      () => onDialButtonClick(buttonNavGraph[10].keyCode)\n    );\n    // This is not a violation of the rules, as the array length is constant and order the always the same.\n    buttonNavGraph.forEach(element => {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      element.ref = useRef<HTMLButtonElement>(null);\n    });\n\n    const handleDialButtonEvent = (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n      e.preventDefault();\n      e.stopPropagation();\n      const buttonEl = buttonNavGraph[index];\n      if (!buttonEl || (mode === 'DTMF' && index === 12)) return;\n      buttonEl.ref?.current?.focus();\n      onDialButtonClick(buttonEl.keyCode);\n    };\n\n    const handlePlusDialButton = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      e.stopPropagation();\n      const buttonEl = buttonNavGraph[10];\n      if (!buttonEl || !buttonEl.altKeyCode) return;\n      buttonEl.ref?.current?.focus();\n      onDialButtonClick(buttonEl.altKeyCode);\n    };\n\n    const handleEnterEvent = useCallback(\n      (e: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          onDialButtonClick(Number((e.target as HTMLButtonElement).value));\n        }\n      },\n      [onDialButtonClick]\n    );\n\n    const findButtonInGraph = (e: React.KeyboardEvent<HTMLElement>) => {\n      return buttonNavGraph.find(\n        el => el.keyCode === Number((e.target as HTMLButtonElement).value)\n      );\n    };\n\n    const getTargetIndexOnNavigationEvent = (\n      btnEl: NavigationGraphElement,\n      e: React.KeyboardEvent<HTMLButtonElement>\n    ): Index | undefined => {\n      return {\n        ArrowUp: btnEl.up,\n        ArrowLeft: btnEl.left,\n        ArrowDown: btnEl.down,\n        ArrowRight: btnEl.right\n      }[e.key];\n    };\n\n    const handleNavigationEvent = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      e.preventDefault();\n      const btnEl = findButtonInGraph(e);\n      if (!btnEl) return;\n      const targetIndex = getTargetIndexOnNavigationEvent(btnEl, e);\n      if (targetIndex !== undefined) buttonNavGraph[targetIndex].ref?.current?.focus();\n    };\n\n    const handleKeyboardNavigation = useCallback(\n      (e: KeyboardEvent<HTMLButtonElement>) => {\n        const index = getDialButtonIndex(e);\n        if (index !== -1) {\n          handleDialButtonEvent(e, index);\n        } else if (e.key === '+') {\n          handlePlusDialButton(e);\n        } else if (isNavigationEvent(e)) {\n          handleNavigationEvent(e);\n        }\n      },\n      [onDialButtonClick]\n    );\n\n    return (\n      <StyledDialPadKeyboard\n        ref={ref}\n        onKeyDown={handleKeyboardNavigation}\n        dir='ltr'\n        role='grid'\n        aria-label={t('dial_pad_keyboard')}\n        container={{\n          cols: '1fr',\n          rowGap: 1,\n          justifyItems: 'center'\n        }}\n      >\n        {buttonGrid.map((row: NavigationGraphElement[], index: number) => {\n          if (mode === 'default' || (mode === 'DTMF' && index < 4)) {\n            return (\n              // eslint-disable-next-line react/no-array-index-key\n              <div role='row' key={`row-${index}`}>\n                {row.map((dialButton: NavigationGraphElement) =>\n                  dialButton.alt === '+' ? (\n                    <StyledDialButton\n                      key={dialButton.keyCode}\n                      type='button'\n                      role='gridcell'\n                      tabIndex={-1}\n                      ref={dialButton.ref}\n                      value={dialButton.keyCode}\n                      {...zeroButtonLongPress}\n                    >\n                      {dialButton.sign && <span>{dialButton.sign}</span>}\n                      {dialButton.alt && <span>{dialButton.alt}</span>}\n                    </StyledDialButton>\n                  ) : (\n                    <StyledDialButton\n                      key={dialButton.keyCode}\n                      type='button'\n                      role='gridcell'\n                      onClick={() => onDialButtonClick(dialButton.keyCode)}\n                      onKeyDown={handleEnterEvent}\n                      tabIndex={dialButton.sign === '1' ? 0 : -1}\n                      aria-label={dialButton.icon ? dialButton.icon : undefined}\n                      ref={dialButton.ref}\n                      value={dialButton.keyCode}\n                    >\n                      {dialButton.sign && <span>{dialButton.sign}</span>}\n                      {dialButton.alt && <span>{dialButton.alt}</span>}\n                      {dialButton.special && <StyledSpecial>{dialButton.special}</StyledSpecial>}\n                      {dialButton.icon && <Icon name={dialButton.icon} />}\n                    </StyledDialButton>\n                  )\n                )}\n              </div>\n            );\n          }\n          return undefined;\n        })}\n      </StyledDialPadKeyboard>\n    );\n  }\n);\n\nexport default DialPadKeyboard;\n"]}