@pega/cosmos-react-cs 4.0.0-dev.13.0 → 4.0.0-dev.14.1

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useState, forwardRef } from 'react';
 import styled from 'styled-components';
 import { Button, registerIcon, defaultThemeProp, useI18n, TextArea, ComboBox, Form, Flex } from '@pega/cosmos-react-core';
 import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
@@ -14,7 +14,7 @@ export const StyledCallHandoverForm = styled(Form) `
   }
 `;
 StyledCallHandoverForm.defaultProps = defaultThemeProp;
-const CallHandoverForm = ({ onCancel, onSubmit, transferOptions, variant, submitButtonText, interactionOptions, defaultTransfer, defaultInteraction }) => {
+const CallHandoverForm = forwardRef(({ onCancel, onSubmit, transferOptions, variant, submitButtonText, interactionOptions, defaultTransfer, defaultInteraction }, ref) => {
     const t = useI18n();
     const [selectedContact, setSelectedContact] = useState();
     const initialReason = transferOptions.find(reason => reason.id === defaultTransfer);
@@ -32,7 +32,7 @@ const CallHandoverForm = ({ onCancel, onSubmit, transferOptions, variant, submit
                             phoneNumber: selectedContact,
                             transferredInteractionId: selectedInteraction?.id
                         });
-                    }, children: submitButtonText })] }), children: [variant === 'call+interaction' && (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [interactionOptions && (_jsx(ComboBox, { label: t('call_panel_handover_interaction_label'), selected: {
+                    }, children: submitButtonText })] }), ref: ref, children: [variant === 'call+interaction' && (_jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [interactionOptions && (_jsx(ComboBox, { label: t('call_panel_handover_interaction_label'), selected: {
                             items: selectedInteraction
                                 ? { id: selectedInteraction.id, text: selectedInteraction.label }
                                 : undefined
@@ -55,6 +55,6 @@ const CallHandoverForm = ({ onCancel, onSubmit, transferOptions, variant, submit
                             })),
                             onItemClick: id => setSelectedReason(transferOptions.find(option => option.id === id))
                         } }), _jsx(TextArea, { name: 'comments', required: true, label: t('call_panel_handover_comments_label'), displayCharCount: true, maxLength: 300, value: comments, onChange: (e) => setComments(e.target.value) })] })), _jsx(CalleePicker, { selectedContact: selectedContact, onSelection: setSelectedContact, variant: 'select' })] }));
-};
+});
 export default CallHandoverForm;
 //# sourceMappingURL=CallHandoverForm.js.map

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 } 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<HTMLDivElement>;\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> = ({\n  onCancel,\n  onSubmit,\n  transferOptions,\n  variant,\n  submitButtonText,\n  interactionOptions,\n  defaultTransfer,\n  defaultInteraction\n}: CallHandoverFormProps) => {\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<TransferReasonOption | undefined>(\n    initialInteraction\n  );\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    >\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 => 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\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 { 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  (\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/ContactList.types.d.ts

@@ -2,7 +2,7 @@ import { Ref } from 'react';
 export interface Contact {
     /** Contact phone number */
     phoneNumber: string;
-    /** Contact name  */
+    /** Contact name */
     primary: string;
     /** Additional contact information */
     secondary: 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,oBAAoB;IACpB,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,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"}

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 { 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

@@ -16,9 +16,7 @@ export interface ExternalCTIProps {
     };
     /** Reference to the container. */
     ref?: Ref<HTMLDivElement>;
-    /**
-     * Attach intraction popup options.
-     */
+    /** Attach intraction popup options. */
     attachInteractionProps?: AttachInteractionProps;
 }
 declare const ExternalCTI: FunctionComponent<ExternalCTIProps & ForwardProps>;

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;;OAEG;IACH,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":"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"}

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;AAsBpE,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,CACE,EACE,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,IAAI,EACd,IAAI,EACJ,sBAAsB,EACY,EACpC,GAA4B,EAC5B,EAAE;IACF,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  /**\n   * Attach intraction popup options.\n   */\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  (\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,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,CACE,EACE,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,IAAI,EACd,IAAI,EACJ,sBAAsB,EACY,EACpC,GAA4B,EAC5B,EAAE;IACF,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  (\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/StopWatch.d.ts

@@ -1,6 +1,8 @@
 import { FunctionComponent } from 'react';
 interface StopWatchProps {
+    /** Defines the Date or Epoch time as a starting point of the stop watch. */
     startTime: number | Date;
+    /** Defines the Date or Epoch time of the timeout. */
     timeout?: number | Date;
 }
 export declare const StyledStopWatch: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("@pega/cosmos-react-core").OmitStrict<import("@pega/cosmos-react-core").TextProps, "variant"> & Required<Pick<import("@pega/cosmos-react-core").TextProps, "variant">>, never>;

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;IAEtB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,qRAG3B,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":"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,qRAG3B,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,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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,WAAY,MAAM,KAAG,MAG/C,CAAC;AAEF,eAAO,MAAM,YAAY,iBACT,MAAM,cACR,MAAM,EAAE,KACnB;IACD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CA6B1B,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,WAAY,MAAM,KAAG,MAG/C,CAAC;AAEF,eAAO,MAAM,YAAY,iBACT,MAAM,cACR,MAAM,EAAE,KACnB;IACD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CA4B1B,CAAC"}

package/lib/components/CallControlPanel/utils.js

@@ -13,7 +13,6 @@ export const calculateSla = (callDuration, slaConfig) => {
             currentSlaLevel: undefined
         };
     }
-    // eslint-disable-next-line no-restricted-syntax
     for (const { prev: prevSlaTimeout = 0, current: slaTimeoutInSeconds } of triple(slaConfig)) {
         const slaInMillis = slaTimeoutInSeconds * 1000;
         if (callDuration < slaInMillis) {

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAU,EAAE;IACvD,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC1C,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;AACrF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,YAAoB,EACpB,SAAoB,EAKpB,EAAE;IACF,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,IAAI,cAAc,GAAG,CAAC,CAAC;IACvB,IAAI,CAAC,SAAS,EAAE;QACd,OAAO;YACL,UAAU,EAAE,SAAS;YACrB,WAAW,EAAE,SAAS;YACtB,eAAe,EAAE,SAAS;SAC3B,CAAC;KACH;IACD,gDAAgD;IAChD,KAAK,MAAM,EAAE,IAAI,EAAE,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE;QAC1F,MAAM,WAAW,GAAG,mBAAmB,GAAG,IAAI,CAAC;QAC/C,IAAI,YAAY,GAAG,WAAW,EAAE;YAC9B,OAAO;gBACL,UAAU,EAAE,WAAW;gBACvB,WAAW,EAAE,mBAAmB,GAAG,cAAc;gBACjD,eAAe,EAAE,QAAQ;aAC1B,CAAC;SACH;QACD,QAAQ,IAAI,CAAC,CAAC;QACd,cAAc,GAAG,WAAW,CAAC;KAC9B;IACD,OAAO;QACL,UAAU,EAAE,cAAc;QAC1B,WAAW,EAAE,CAAC;QACd,eAAe,EAAE,QAAQ;KAC1B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { triple } from '@pega/cosmos-react-core';\n\nexport const formatDuration = (millis: number): string => {\n  const seconds = Math.round(millis / 1000);\n  return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, '0')}`;\n};\n\nexport const calculateSla = (\n  callDuration: number,\n  slaConfig?: number[]\n): {\n  slaTimeout?: number;\n  slaDuration?: number;\n  currentSlaLevel?: number;\n} => {\n  let slaLevel = 0;\n  let lastSlaTimeout = 0;\n  if (!slaConfig) {\n    return {\n      slaTimeout: undefined,\n      slaDuration: undefined,\n      currentSlaLevel: undefined\n    };\n  }\n  // eslint-disable-next-line no-restricted-syntax\n  for (const { prev: prevSlaTimeout = 0, current: slaTimeoutInSeconds } of triple(slaConfig)) {\n    const slaInMillis = slaTimeoutInSeconds * 1000;\n    if (callDuration < slaInMillis) {\n      return {\n        slaTimeout: slaInMillis,\n        slaDuration: slaTimeoutInSeconds - prevSlaTimeout,\n        currentSlaLevel: slaLevel\n      };\n    }\n    slaLevel += 1;\n    lastSlaTimeout = slaInMillis;\n  }\n  return {\n    slaTimeout: lastSlaTimeout,\n    slaDuration: 0,\n    currentSlaLevel: slaLevel\n  };\n};\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAU,EAAE;IACvD,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC1C,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC;AACrF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,YAAoB,EACpB,SAAoB,EAKpB,EAAE;IACF,IAAI,QAAQ,GAAG,CAAC,CAAC;IACjB,IAAI,cAAc,GAAG,CAAC,CAAC;IACvB,IAAI,CAAC,SAAS,EAAE;QACd,OAAO;YACL,UAAU,EAAE,SAAS;YACrB,WAAW,EAAE,SAAS;YACtB,eAAe,EAAE,SAAS;SAC3B,CAAC;KACH;IACD,KAAK,MAAM,EAAE,IAAI,EAAE,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE;QAC1F,MAAM,WAAW,GAAG,mBAAmB,GAAG,IAAI,CAAC;QAC/C,IAAI,YAAY,GAAG,WAAW,EAAE;YAC9B,OAAO;gBACL,UAAU,EAAE,WAAW;gBACvB,WAAW,EAAE,mBAAmB,GAAG,cAAc;gBACjD,eAAe,EAAE,QAAQ;aAC1B,CAAC;SACH;QACD,QAAQ,IAAI,CAAC,CAAC;QACd,cAAc,GAAG,WAAW,CAAC;KAC9B;IACD,OAAO;QACL,UAAU,EAAE,cAAc;QAC1B,WAAW,EAAE,CAAC;QACd,eAAe,EAAE,QAAQ;KAC1B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { triple } from '@pega/cosmos-react-core';\n\nexport const formatDuration = (millis: number): string => {\n  const seconds = Math.round(millis / 1000);\n  return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, '0')}`;\n};\n\nexport const calculateSla = (\n  callDuration: number,\n  slaConfig?: number[]\n): {\n  slaTimeout?: number;\n  slaDuration?: number;\n  currentSlaLevel?: number;\n} => {\n  let slaLevel = 0;\n  let lastSlaTimeout = 0;\n  if (!slaConfig) {\n    return {\n      slaTimeout: undefined,\n      slaDuration: undefined,\n      currentSlaLevel: undefined\n    };\n  }\n  for (const { prev: prevSlaTimeout = 0, current: slaTimeoutInSeconds } of triple(slaConfig)) {\n    const slaInMillis = slaTimeoutInSeconds * 1000;\n    if (callDuration < slaInMillis) {\n      return {\n        slaTimeout: slaInMillis,\n        slaDuration: slaTimeoutInSeconds - prevSlaTimeout,\n        currentSlaLevel: slaLevel\n      };\n    }\n    slaLevel += 1;\n    lastSlaTimeout = slaInMillis;\n  }\n  return {\n    slaTimeout: lastSlaTimeout,\n    slaDuration: 0,\n    currentSlaLevel: slaLevel\n  };\n};\n"]}

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,CA+DxD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"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"}

package/lib/components/DialPad/DialPadDialog.js

@@ -19,6 +19,7 @@ const DialPadDialog = ({ target, onClose: onCloseProp, onDialButtonClick }) => {
     return (_jsx(Popover, { target: target, ref: popoverRef, placement: 'top-end', modifiers: [
             {
                 name: 'flip',
+                enabled: true,
                 options: {
                     fallbackPlacements: ['bottom-end', 'left', 'right']
                 }

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;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          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,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"]}

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

@@ -1 +1 @@
-{"version":3,"file":"KeyboardNavigation.js","sourceRoot":"","sources":["../../../src/components/DialPad/KeyboardNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["// cSpell:words PQRS WXYZ\nimport { NavigationGraphElement } from './DialPad.types';\n\nconst baseGraph: NavigationGraphElement[] = [\n  {\n    sign: '1',\n    keyCode: 49,\n    ref: undefined,\n    right: 1,\n    down: 3\n  },\n  {\n    sign: '2',\n    alt: 'ABC',\n    keyCode: 50,\n    ref: undefined,\n    right: 2,\n    down: 4,\n    left: 0\n  },\n  {\n    sign: '3',\n    alt: 'DEF',\n    keyCode: 51,\n    ref: undefined,\n    down: 5,\n    left: 1\n  },\n  {\n    sign: '4',\n    alt: 'GHI',\n    keyCode: 52,\n    ref: undefined,\n    up: 0,\n    right: 4,\n    down: 6\n  },\n  {\n    sign: '5',\n    alt: 'JKL',\n    keyCode: 53,\n    ref: undefined,\n    up: 1,\n    right: 5,\n    down: 7,\n    left: 3\n  },\n  {\n    sign: '6',\n    alt: 'MNO',\n    keyCode: 54,\n    ref: undefined,\n    up: 2,\n    down: 8,\n    left: 4\n  },\n  {\n    sign: '7',\n    alt: 'PQRS',\n    keyCode: 55,\n    ref: undefined,\n    up: 3,\n    right: 7,\n    down: 9\n  },\n  {\n    sign: '8',\n    alt: 'TUV',\n    keyCode: 56,\n    ref: undefined,\n    up: 4,\n    right: 8,\n    down: 10,\n    left: 6\n  },\n  {\n    sign: '9',\n    alt: 'WXYZ',\n    keyCode: 57,\n    ref: undefined,\n    up: 5,\n    down: 11,\n    left: 7\n  },\n  {\n    special: '*',\n    keyCode: 42,\n    ref: undefined,\n    up: 6,\n    right: 10,\n    down: 12\n  }\n];\n\nexport const dtmfGraph = baseGraph.concat([\n  {\n    sign: '0',\n    alt: '+',\n    keyCode: 48,\n    altKeyCode: 43,\n    ref: undefined,\n    up: 7,\n    right: 11,\n    left: 9\n  },\n  {\n    special: '#',\n    keyCode: 35,\n    ref: undefined,\n    up: 8,\n    left: 10\n  },\n  {\n    icon: 'backspace',\n    keyCode: 127,\n    ref: undefined,\n    up: 10\n  }\n]);\n\nexport const defaultGraph = baseGraph.concat([\n  {\n    sign: '0',\n    alt: '+',\n    keyCode: 48,\n    altKeyCode: 43,\n    ref: undefined,\n    up: 7,\n    right: 11,\n    down: 12,\n    left: 9\n  },\n  {\n    special: '#',\n    keyCode: 35,\n    ref: undefined,\n    up: 8,\n    down: 12,\n    left: 10\n  },\n  {\n    icon: 'backspace',\n    keyCode: 127,\n    ref: undefined,\n    up: 10\n  }\n]);\n\nexport const defaultButtonGrid = [\n  [defaultGraph[0], defaultGraph[1], defaultGraph[2]],\n  [defaultGraph[3], defaultGraph[4], defaultGraph[5]],\n  [defaultGraph[6], defaultGraph[7], defaultGraph[8]],\n  [defaultGraph[9], defaultGraph[10], defaultGraph[11]],\n  [defaultGraph[12]]\n];\n\nexport const dtmfButtonGrid = [\n  [dtmfGraph[0], dtmfGraph[1], dtmfGraph[2]],\n  [dtmfGraph[3], dtmfGraph[4], dtmfGraph[5]],\n  [dtmfGraph[6], dtmfGraph[7], dtmfGraph[8]],\n  [dtmfGraph[9], dtmfGraph[10], dtmfGraph[11]]\n];\n"]}
+{"version":3,"file":"KeyboardNavigation.js","sourceRoot":"","sources":["../../../src/components/DialPad/KeyboardNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["// cspell:words PQRS WXYZ\nimport { NavigationGraphElement } from './DialPad.types';\n\nconst baseGraph: NavigationGraphElement[] = [\n  {\n    sign: '1',\n    keyCode: 49,\n    ref: undefined,\n    right: 1,\n    down: 3\n  },\n  {\n    sign: '2',\n    alt: 'ABC',\n    keyCode: 50,\n    ref: undefined,\n    right: 2,\n    down: 4,\n    left: 0\n  },\n  {\n    sign: '3',\n    alt: 'DEF',\n    keyCode: 51,\n    ref: undefined,\n    down: 5,\n    left: 1\n  },\n  {\n    sign: '4',\n    alt: 'GHI',\n    keyCode: 52,\n    ref: undefined,\n    up: 0,\n    right: 4,\n    down: 6\n  },\n  {\n    sign: '5',\n    alt: 'JKL',\n    keyCode: 53,\n    ref: undefined,\n    up: 1,\n    right: 5,\n    down: 7,\n    left: 3\n  },\n  {\n    sign: '6',\n    alt: 'MNO',\n    keyCode: 54,\n    ref: undefined,\n    up: 2,\n    down: 8,\n    left: 4\n  },\n  {\n    sign: '7',\n    alt: 'PQRS',\n    keyCode: 55,\n    ref: undefined,\n    up: 3,\n    right: 7,\n    down: 9\n  },\n  {\n    sign: '8',\n    alt: 'TUV',\n    keyCode: 56,\n    ref: undefined,\n    up: 4,\n    right: 8,\n    down: 10,\n    left: 6\n  },\n  {\n    sign: '9',\n    alt: 'WXYZ',\n    keyCode: 57,\n    ref: undefined,\n    up: 5,\n    down: 11,\n    left: 7\n  },\n  {\n    special: '*',\n    keyCode: 42,\n    ref: undefined,\n    up: 6,\n    right: 10,\n    down: 12\n  }\n];\n\nexport const dtmfGraph = baseGraph.concat([\n  {\n    sign: '0',\n    alt: '+',\n    keyCode: 48,\n    altKeyCode: 43,\n    ref: undefined,\n    up: 7,\n    right: 11,\n    left: 9\n  },\n  {\n    special: '#',\n    keyCode: 35,\n    ref: undefined,\n    up: 8,\n    left: 10\n  },\n  {\n    icon: 'backspace',\n    keyCode: 127,\n    ref: undefined,\n    up: 10\n  }\n]);\n\nexport const defaultGraph = baseGraph.concat([\n  {\n    sign: '0',\n    alt: '+',\n    keyCode: 48,\n    altKeyCode: 43,\n    ref: undefined,\n    up: 7,\n    right: 11,\n    down: 12,\n    left: 9\n  },\n  {\n    special: '#',\n    keyCode: 35,\n    ref: undefined,\n    up: 8,\n    down: 12,\n    left: 10\n  },\n  {\n    icon: 'backspace',\n    keyCode: 127,\n    ref: undefined,\n    up: 10\n  }\n]);\n\nexport const defaultButtonGrid = [\n  [defaultGraph[0], defaultGraph[1], defaultGraph[2]],\n  [defaultGraph[3], defaultGraph[4], defaultGraph[5]],\n  [defaultGraph[6], defaultGraph[7], defaultGraph[8]],\n  [defaultGraph[9], defaultGraph[10], defaultGraph[11]],\n  [defaultGraph[12]]\n];\n\nexport const dtmfButtonGrid = [\n  [dtmfGraph[0], dtmfGraph[1], dtmfGraph[2]],\n  [dtmfGraph[3], dtmfGraph[4], dtmfGraph[5]],\n  [dtmfGraph[6], dtmfGraph[7], dtmfGraph[8]],\n  [dtmfGraph[9], dtmfGraph[10], dtmfGraph[11]]\n];\n"]}

package/lib/components/InteractionNotification/AcceptButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AcceptButton.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/AcceptButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAQ,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAGxF,OAAO,EAOL,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,0CAA0C;IAC1C,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,oDAAoD;IACpD,OAAO,EAAE,iBAAiB,CAAC;CAC5B;AAUD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAoDtD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"AcceptButton.d.ts","sourceRoot":"","sources":["../../../src/components/InteractionNotification/AcceptButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAQ,iBAAiB,EAAuB,MAAM,OAAO,CAAC;AAGxF,OAAO,EAOL,cAAc,EACf,MAAM,yBAAyB,CAAC;AAIjC,MAAM,WAAW,iBAAkB,SAAQ,cAAc;IACvD,0CAA0C;IAC1C,SAAS,EAAE,IAAI,GAAG,MAAM,CAAC;IACzB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,oDAAoD;IACpD,OAAO,EAAE,iBAAiB,CAAC;CAC5B;AAUD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAkDtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/InteractionNotification/AcceptButton.js

@@ -27,11 +27,9 @@ const AcceptButton = memo(({ startTime, timeout, onTimerEnd, onClick }) => {
         }
         return () => clearTimeout(timeoutId);
     }, 
-    /*
-     * Omitting onTimerEnd as an effect trigger on purpose.
-     * An unstable function definition in the prop causes the effect to run more than necessary.
-     * The proper definition will be captured and used with any changes to msRemaining.
-     */
+    // Omitting onTimerEnd as an effect trigger on purpose.
+    // An unstable function definition in the prop causes the effect to run more than necessary.
+    // The proper definition will be captured and used with any changes to msRemaining.
     [msRemaining]);
     const timer = msRemaining > 0 ? formatDuration(msRemaining) : '0:00';
     return (_jsxs(_Fragment, { children: [_jsxs(StyledAcceptButton, { variant: 'primary', "aria-describedby": descriptionId, onClick: onClick, children: [t('accept'), _jsx(Text, { "aria-hidden": 'true', children: timer })] }), _jsx(VisuallyHiddenText, { "aria-hidden": 'true', id: descriptionId, children: msRemaining > 0

package/lib/components/InteractionNotification/AcceptButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"AcceptButton.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/AcceptButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,IAAI,EAAqB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,OAAO,EACP,IAAI,EACJ,kBAAkB,EAClB,MAAM,EACN,MAAM,EACN,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAa3D,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CACvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;WACT,KAAK,CAAC,IAAI,CAAC,OAAO;GAC1B,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAAyC,IAAI,CAC7D,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAqB,EAAE,EAAE;IACjE,MAAM,SAAS,GAAG,OAAO,GAAG,IAAI,CAAC;IACjC,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,MAAM,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IAClC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAE3E,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAExD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAE/B,SAAS,CACP,GAAG,EAAE;QACH,IAAI,SAAiB,CAAC;QAEtB,IAAI,WAAW,GAAG,CAAC,EAAE;YACnB,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACjC,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;YACvC,CAAC,EAAE,IAAI,CAAC,CAAC;SACV;aAAM;YACL,UAAU,EAAE,EAAE,CAAC;SAChB;QAED,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACvC,CAAC;IACD;;;;OAIG;IACH,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,KAAK,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAErE,OAAO,CACL,8BACE,MAAC,kBAAkB,IAAC,OAAO,EAAC,SAAS,sBAAmB,aAAa,EAAE,OAAO,EAAE,OAAO,aACpF,CAAC,CAAC,QAAQ,CAAC,EACZ,KAAC,IAAI,mBAAa,MAAM,YAAE,KAAK,GAAQ,IACpB,EACrB,KAAC,kBAAkB,mBAAa,MAAM,EAAC,EAAE,EAAE,aAAa,YACrD,WAAW,GAAG,CAAC;oBACd,CAAC,CAAC,CAAC,CAAC,4BAA4B,EAAE,CAAC,gBAAgB,CAAC,EAAE;wBAClD,KAAK,EAAE,gBAAgB;qBACxB,CAAC;oBACJ,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,GACd,IACpB,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FunctionComponent, memo, MouseEventHandler, useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useI18n,\n  Text,\n  VisuallyHiddenText,\n  useUID,\n  Button,\n  defaultThemeProp,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport { formatDuration } from '../CallControlPanel/utils';\n\nexport interface AcceptButtonProps extends NoChildrenProp {\n  /** Start time of incoming Interaction. */\n  startTime: Date | number;\n  /** The time the user has to accept the call in seconds. */\n  timeout: number;\n  /** Callback invoked when timeout ends. */\n  onTimerEnd?: () => void;\n  /** Callback invoked when user clicks the button. */\n  onClick: MouseEventHandler;\n}\n\nconst StyledAcceptButton = styled(Button)(\n  ({ theme }) => css`\n    gap: ${theme.base.spacing};\n  `\n);\n\nStyledAcceptButton.defaultProps = defaultThemeProp;\n\nconst AcceptButton: FunctionComponent<AcceptButtonProps> = memo(\n  ({ startTime, timeout, onTimerEnd, onClick }: AcceptButtonProps) => {\n    const timeoutMs = timeout * 1000;\n    const start = Number(startTime);\n    const endTime = start + timeoutMs;\n    const [msRemaining, setMsRemaining] = useState(() => endTime - Date.now());\n\n    const secondsRemaining = Math.round(msRemaining / 1000);\n\n    const t = useI18n();\n    const descriptionId = useUID();\n\n    useEffect(\n      () => {\n        let timeoutId: number;\n\n        if (msRemaining > 0) {\n          timeoutId = window.setTimeout(() => {\n            setMsRemaining(endTime - Date.now());\n          }, 1000);\n        } else {\n          onTimerEnd?.();\n        }\n\n        return () => clearTimeout(timeoutId);\n      },\n      /*\n       * Omitting onTimerEnd as an effect trigger on purpose.\n       * An unstable function definition in the prop causes the effect to run more than necessary.\n       * The proper definition will be captured and used with any changes to msRemaining.\n       */\n      [msRemaining]\n    );\n\n    const timer = msRemaining > 0 ? formatDuration(msRemaining) : '0:00';\n\n    return (\n      <>\n        <StyledAcceptButton variant='primary' aria-describedby={descriptionId} onClick={onClick}>\n          {t('accept')}\n          <Text aria-hidden='true'>{timer}</Text>\n        </StyledAcceptButton>\n        <VisuallyHiddenText aria-hidden='true' id={descriptionId}>\n          {msRemaining > 0\n            ? t('interaction_time_remaining', [secondsRemaining], {\n                count: secondsRemaining\n              })\n            : t('interaction_time_expired')}\n        </VisuallyHiddenText>\n      </>\n    );\n  }\n);\n\nexport default AcceptButton;\n"]}
+{"version":3,"file":"AcceptButton.js","sourceRoot":"","sources":["../../../src/components/InteractionNotification/AcceptButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,IAAI,EAAqB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,OAAO,EACP,IAAI,EACJ,kBAAkB,EAClB,MAAM,EACN,MAAM,EACN,gBAAgB,EAEjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAa3D,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,CACvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;WACT,KAAK,CAAC,IAAI,CAAC,OAAO;GAC1B,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,YAAY,GAAyC,IAAI,CAC7D,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAqB,EAAE,EAAE;IACjE,MAAM,SAAS,GAAG,OAAO,GAAG,IAAI,CAAC;IACjC,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,MAAM,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IAClC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAE3E,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAExD,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,aAAa,GAAG,MAAM,EAAE,CAAC;IAE/B,SAAS,CACP,GAAG,EAAE;QACH,IAAI,SAAiB,CAAC;QAEtB,IAAI,WAAW,GAAG,CAAC,EAAE;YACnB,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACjC,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;YACvC,CAAC,EAAE,IAAI,CAAC,CAAC;SACV;aAAM;YACL,UAAU,EAAE,EAAE,CAAC;SAChB;QAED,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACvC,CAAC;IACD,uDAAuD;IACvD,4FAA4F;IAC5F,mFAAmF;IACnF,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,MAAM,KAAK,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAErE,OAAO,CACL,8BACE,MAAC,kBAAkB,IAAC,OAAO,EAAC,SAAS,sBAAmB,aAAa,EAAE,OAAO,EAAE,OAAO,aACpF,CAAC,CAAC,QAAQ,CAAC,EACZ,KAAC,IAAI,mBAAa,MAAM,YAAE,KAAK,GAAQ,IACpB,EACrB,KAAC,kBAAkB,mBAAa,MAAM,EAAC,EAAE,EAAE,aAAa,YACrD,WAAW,GAAG,CAAC;oBACd,CAAC,CAAC,CAAC,CAAC,4BAA4B,EAAE,CAAC,gBAAgB,CAAC,EAAE;wBAClD,KAAK,EAAE,gBAAgB;qBACxB,CAAC;oBACJ,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,GACd,IACpB,CACJ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { FunctionComponent, memo, MouseEventHandler, useEffect, useState } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  useI18n,\n  Text,\n  VisuallyHiddenText,\n  useUID,\n  Button,\n  defaultThemeProp,\n  NoChildrenProp\n} from '@pega/cosmos-react-core';\n\nimport { formatDuration } from '../CallControlPanel/utils';\n\nexport interface AcceptButtonProps extends NoChildrenProp {\n  /** Start time of incoming Interaction. */\n  startTime: Date | number;\n  /** The time the user has to accept the call in seconds. */\n  timeout: number;\n  /** Callback invoked when timeout ends. */\n  onTimerEnd?: () => void;\n  /** Callback invoked when user clicks the button. */\n  onClick: MouseEventHandler;\n}\n\nconst StyledAcceptButton = styled(Button)(\n  ({ theme }) => css`\n    gap: ${theme.base.spacing};\n  `\n);\n\nStyledAcceptButton.defaultProps = defaultThemeProp;\n\nconst AcceptButton: FunctionComponent<AcceptButtonProps> = memo(\n  ({ startTime, timeout, onTimerEnd, onClick }: AcceptButtonProps) => {\n    const timeoutMs = timeout * 1000;\n    const start = Number(startTime);\n    const endTime = start + timeoutMs;\n    const [msRemaining, setMsRemaining] = useState(() => endTime - Date.now());\n\n    const secondsRemaining = Math.round(msRemaining / 1000);\n\n    const t = useI18n();\n    const descriptionId = useUID();\n\n    useEffect(\n      () => {\n        let timeoutId: number;\n\n        if (msRemaining > 0) {\n          timeoutId = window.setTimeout(() => {\n            setMsRemaining(endTime - Date.now());\n          }, 1000);\n        } else {\n          onTimerEnd?.();\n        }\n\n        return () => clearTimeout(timeoutId);\n      },\n      // Omitting onTimerEnd as an effect trigger on purpose.\n      // An unstable function definition in the prop causes the effect to run more than necessary.\n      // The proper definition will be captured and used with any changes to msRemaining.\n      [msRemaining]\n    );\n\n    const timer = msRemaining > 0 ? formatDuration(msRemaining) : '0:00';\n\n    return (\n      <>\n        <StyledAcceptButton variant='primary' aria-describedby={descriptionId} onClick={onClick}>\n          {t('accept')}\n          <Text aria-hidden='true'>{timer}</Text>\n        </StyledAcceptButton>\n        <VisuallyHiddenText aria-hidden='true' id={descriptionId}>\n          {msRemaining > 0\n            ? t('interaction_time_remaining', [secondsRemaining], {\n                count: secondsRemaining\n              })\n            : t('interaction_time_expired')}\n        </VisuallyHiddenText>\n      </>\n    );\n  }\n);\n\nexport default AcceptButton;\n"]}

package/lib/components/TaskManager/Picker/Picker.d.ts

@@ -1,13 +1,9 @@
 import { FunctionComponent } from 'react';
 import { ForwardProps } from '@pega/cosmos-react-core';
 import { PickerProps } from './Picker.types';
-export declare const StyledPickerHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAddTasks: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledSelectedTasks: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledSummaryItem: import("styled-components").StyledComponent<FunctionComponent<import("@pega/cosmos-react-core").SummaryItemProps & ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledPickerFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledDDList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledPicker: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledDragHandle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 declare const Picker: FunctionComponent<PickerProps & ForwardProps>;
 export default Picker;

package/lib/components/TaskManager/Picker/Picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAmBb,MAAM,yBAAyB,CAAC;AAQjC,OAAO,EAA8B,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AAG5F,eAAO,MAAM,kBAAkB,yGAK7B,CAAC;AAGH,eAAO,MAAM,cAAc,yGAO1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,yGAU9B,CAAC;AAGH,eAAO,MAAM,iBAAiB,wLAO5B,CAAC;AAGH,eAAO,MAAM,kBAAkB,yGAK7B,CAAC;AAGH,eAAO,MAAM,YAAY,wGAMvB,CAAC;AAIH,eAAO,MAAM,YAAY,yGAExB,CAAC;AAEF,eAAO,MAAM,gBAAgB,yGAK5B,CAAC;AAkEF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CAuSzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Picker.d.ts","sourceRoot":"","sources":["../../../../src/components/TaskManager/Picker/Picker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAGf,OAAO,EAKL,YAAY,EAmBb,MAAM,yBAAyB,CAAC;AAcjC,OAAO,EAA8B,WAAW,EAAqB,MAAM,gBAAgB,CAAC;AAI5F,eAAO,MAAM,mBAAmB,yGAS9B,CAAC;AAIH,eAAO,MAAM,iBAAiB,wLAO5B,CAAC;AAIH,eAAO,MAAM,YAAY,wGAKvB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAK5B,CAAC;AAiGF,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,GAAG,YAAY,CA6SzD,CAAC;AAEF,eAAe,MAAM,CAAC"}