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

package/lib/components/CallControlPanel/IncomingCall.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Flex, registerIcon, SummaryItem, Text, useI18n } from '@pega/cosmos-react-core';
+import * as arrowUpIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/arrow-up.icon';
+import * as micSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-solid.icon';
+import * as micOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/mic-off-solid.icon';
+import * as playSoldIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/play-solid.icon';
+import * as pauseSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pause-solid.icon';
+import * as phoneSplitSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-split-solid.icon';
+import * as phoneOutSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-out-solid.icon';
+import * as phoneHangupSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/phone-hangup-solid.icon';
+import { StyledIncomingContainer } from './CallControlPanel.styles';
+registerIcon(arrowUpIcon, micSolidIcon, micOffSolidIcon, playSoldIcon, pauseSolidIcon, phoneSplitSolidIcon, phoneOutSolidIcon, phoneHangupSolidIcon);
+const IncomingCall = ({ id: callId, participant, onAcceptCall }) => {
+    const t = useI18n();
+    return (_jsx(StyledIncomingContainer, { children: _jsx(SummaryItem, { overflowStrategy: 'ellipsis', primary: _jsx(Text, { variant: 'secondary', children: t('call_panel_incoming_call') }), secondary: _jsxs(_Fragment, { children: [_jsxs(Text, { variant: 'primary', children: [participant.name, " "] }), ' ', participant.info && _jsx(Text, { variant: 'secondary', children: participant.info })] }), actions: _jsx(Flex, { container: { wrap: 'nowrap' }, children: _jsx(Button, { variant: 'primary', onClick: () => onAcceptCall?.(callId), children: t('call_panel_answer_call') }) }) }, participant.id) }));
+};
+export default IncomingCall;
+//# sourceMappingURL=IncomingCall.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,11 @@
+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, Pick<import("@pega/cosmos-react-core").TextProps, "children" | "ref" | "as" | "status" | "className" | "forwardedAs"> & Required<Pick<import("@pega/cosmos-react-core").TextProps, "variant">>, never>;
+declare const StopWatch: FunctionComponent<StopWatchProps>;
+export default StopWatch;
+//# sourceMappingURL=StopWatch.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/CallControlPanel/StopWatch.js

@@ -0,0 +1,28 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useRef, useLayoutEffect } from 'react';
+import styled from 'styled-components';
+import { StyledText, Text } from '@pega/cosmos-react-core';
+import { formatDuration } from './utils';
+export const StyledStopWatch = styled(StyledText) `
+  min-width: 8ch;
+  text-align: end;
+`;
+const StopWatch = memo(({ startTime, timeout }) => {
+    const clockRef = useRef(null);
+    const millis = Number(startTime);
+    const timeoutMillis = Number(timeout);
+    useLayoutEffect(() => {
+        const timer = setInterval(() => {
+            if (clockRef.current) {
+                let content = formatDuration(Date.now() - millis);
+                if (timeoutMillis)
+                    content += ` / ${formatDuration(timeoutMillis)}`;
+                clockRef.current.textContent = content;
+            }
+        }, 1000);
+        return () => clearInterval(timer);
+    }, [startTime, timeoutMillis]);
+    return (_jsxs(Text, { as: StyledStopWatch, ref: clockRef, children: [formatDuration(Date.now() - millis), timeoutMillis && ` / ${formatDuration(timeoutMillis)}`] }));
+});
+export default StopWatch;
+//# sourceMappingURL=StopWatch.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,5 @@
+export type { CallProps, IncomingCallProps, CallParticipant, CallControlPanelProps, UserAvailabilityStatusOption } from './CallControlPanel.types';
+export { default as ExternalCTI } from './ExternalCTI';
+export { default } from './CallControlPanel';
+export type { TransferData } from './CallHandover/CallHandover.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,SAAS,EACT,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,4BAA4B,EAC7B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,YAAY,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC"}

package/lib/components/CallControlPanel/index.js

@@ -0,0 +1,3 @@
+export { default as ExternalCTI } from './ExternalCTI';
+export { default } from './CallControlPanel';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export type {\n  CallProps,\n  IncomingCallProps,\n  CallParticipant,\n  CallControlPanelProps,\n  UserAvailabilityStatusOption\n} from './CallControlPanel.types';\nexport { default as ExternalCTI } from './ExternalCTI';\nexport { default } from './CallControlPanel';\nexport type { TransferData } from './CallHandover/CallHandover.types';\n"]}

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

@@ -0,0 +1,7 @@
+export declare const formatDuration: (millis: number) => string;
+export declare const calculateSla: (callDuration: number, slaConfig?: number[]) => {
+    slaTimeout?: number;
+    slaDuration?: number;
+    currentSlaLevel?: number;
+};
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +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;CA4B1B,CAAC"}

package/lib/components/CallControlPanel/utils.js

@@ -0,0 +1,34 @@
+import { triple } from '@pega/cosmos-react-core';
+export const formatDuration = (millis) => {
+    const seconds = Math.round(millis / 1000);
+    return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, '0')}`;
+};
+export const calculateSla = (callDuration, slaConfig) => {
+    let slaLevel = 0;
+    let lastSlaTimeout = 0;
+    if (!slaConfig) {
+        return {
+            slaTimeout: undefined,
+            slaDuration: undefined,
+            currentSlaLevel: undefined
+        };
+    }
+    for (const { prev: prevSlaTimeout = 0, current: slaTimeoutInSeconds } of triple(slaConfig)) {
+        const slaInMillis = slaTimeoutInSeconds * 1000;
+        if (callDuration < slaInMillis) {
+            return {
+                slaTimeout: slaInMillis,
+                slaDuration: slaTimeoutInSeconds - prevSlaTimeout,
+                currentSlaLevel: slaLevel
+            };
+        }
+        slaLevel += 1;
+        lastSlaTimeout = slaInMillis;
+    }
+    return {
+        slaTimeout: lastSlaTimeout,
+        slaDuration: 0,
+        currentSlaLevel: slaLevel
+    };
+};
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +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,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/DialPad.d.ts

@@ -0,0 +1,18 @@
+import { FunctionComponent, Ref } from 'react';
+import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { DialPadKeyboardProps } from './DialPadKeyboard';
+export interface DialPadProps extends NoChildrenProp {
+    /** Entered number. */
+    value: string;
+    /** Callback fired when user types in the input or clicks on dialpad. */
+    onChange: (value: string) => void;
+    /** Callback fired when user clicks call button. */
+    onCallClick?: () => void;
+    /** Keypad mode, regular or DTMF. */
+    mode: DialPadKeyboardProps['mode'];
+    /** Ref for the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}
+declare const DialPad: FunctionComponent<DialPadProps & ForwardProps>;
+export default DialPad;
+//# sourceMappingURL=DialPad.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/DialPad/DialPad.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, Input, Button, useI18n, Flex, StyledIcon, StyledFlex } from '@pega/cosmos-react-core';
+import DialPadKeyboard from './DialPadKeyboard';
+const StyledDialPad = styled.div(({ theme: { base } }) => {
+    return css `
+    ${StyledFlex} {
+      margin: 0 auto ${base.spacing} auto;
+      padding: ${base.spacing} 0;
+    }
+
+    ${StyledFlex} ${StyledIcon} {
+      color: ${base.palette.interactive};
+    }
+  `;
+});
+StyledDialPad.defaultProps = defaultThemeProp;
+const DialPad = forwardRef(function DialPad({ value, onCallClick, onChange, mode }, ref) {
+    const t = useI18n();
+    const onDialButtonClick = (charCode) => {
+        const newValue = charCode === 127 ? value.slice(0, -1) : value + String.fromCharCode(charCode);
+        onChange(newValue);
+    };
+    return (_jsxs(StyledDialPad, { ref: ref, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'center', itemGap: 1 }, children: [_jsx(Input, { value: value, onChange: (e) => {
+                            onChange(e.target.value);
+                        }, "aria-label": t('dial_pad_phone_number_input_label'), readOnly: mode === 'DTMF' }), mode !== 'DTMF' && onCallClick && (_jsx(Button, { variant: 'primary', onClick: onCallClick, "aria-label": t('dial_pad_call_button_label', [value]), disabled: value.length === 0, children: t('dial_pad_call_button_label') }))] }), _jsx(DialPadKeyboard, { onDialButtonClick: onDialButtonClick, mode: mode })] }));
+});
+export default DialPad;
+//# sourceMappingURL=DialPad.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,33 @@
+import { RefObject } from 'react';
+export interface DialButton {
+    id: number;
+    digit?: number;
+    subdigit?: string;
+    special?: string;
+    icon?: string;
+}
+export interface DialButtonRow {
+    rowId: number;
+    dialButtons: DialButton[];
+}
+export type KeyDownNavigateOptions = {
+    [key: string]: (previousId: number) => number;
+};
+export type KeyDownDialButtonOptions = {
+    [key: string]: DialButton;
+};
+export type Index = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export interface NavigationGraphElement {
+    sign?: string;
+    alt?: string;
+    special?: string;
+    keyCode: number;
+    altKeyCode?: number;
+    ref?: RefObject<HTMLButtonElement>;
+    icon?: string;
+    up?: Index;
+    left?: Index;
+    down?: Index;
+    right?: Index;
+}
+//# sourceMappingURL=DialPad.types.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DialPad.types.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,9 @@
+import { FunctionComponent } from 'react';
+interface DialPadDialogProps {
+    target: HTMLElement | null;
+    onClose: () => void;
+    onDialButtonClick: (charCode: number) => void;
+}
+declare const DialPadDialog: FunctionComponent<DialPadDialogProps>;
+export default DialPadDialog;
+//# sourceMappingURL=DialPadDialog.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/DialPad/DialPadDialog.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState } from 'react';
+import { Button, Card, CardContent, CardHeader, getFocusables, Icon, Popover, Text, useEscape, useFocusTrap, useI18n, useOuterEvent } from '@pega/cosmos-react-core';
+import DialPad from './DialPad';
+const DialPadDialog = ({ target, onClose: onCloseProp, onDialButtonClick }) => {
+    const t = useI18n();
+    const popoverRef = useRef(null);
+    const onClose = () => {
+        onCloseProp();
+        target?.focus();
+    };
+    useOuterEvent('mousedown', [popoverRef], onClose);
+    useEscape(onClose, popoverRef);
+    useFocusTrap(popoverRef);
+    useEffect(() => {
+        getFocusables(popoverRef)[0]?.focus();
+    }, []);
+    const [phoneNumber, setPhoneNumber] = useState('');
+    return (_jsx(Popover, { target: target, ref: popoverRef, placement: 'top-end', modifiers: [
+            {
+                name: 'flip',
+                enabled: true,
+                options: {
+                    fallbackPlacements: ['bottom-end', 'left', 'right']
+                }
+            }
+        ], heading: t('call_panel_send_dtmf_heading'), children: _jsxs(Card, { children: [_jsx(CardHeader, { actions: _jsx(Button, { icon: true, variant: 'simple', "aria-label": t('close'), onClick: onClose, children: _jsx(Icon, { name: 'times' }) }), children: _jsx(Text, { variant: 'h3', children: t('call_panel_send_dtmf_heading') }) }), _jsx(CardContent, { children: _jsx(DialPad, { value: phoneNumber, onChange: inputText => {
+                            setPhoneNumber(inputText);
+                            // In DTMF mode only dialpad can be used for input without possibility to delete,
+                            // so always last character can be send to the parent component.
+                            onDialButtonClick(inputText.charCodeAt(inputText.length - 1));
+                        }, mode: 'DTMF' }) })] }) }));
+};
+export default DialPadDialog;
+//# sourceMappingURL=DialPadDialog.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,12 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+export type DialPadKeyboardMode = 'default' | 'DTMF';
+export interface DialPadKeyboardProps extends NoChildrenProp {
+    /** Callback fired on dial button click */
+    onDialButtonClick: (charCode: number) => void;
+    /** Dial Pad Keyboard mode */
+    mode?: DialPadKeyboardMode;
+}
+declare const DialPadKeyboard: FunctionComponent<DialPadKeyboardProps & ForwardProps>;
+export default DialPadKeyboard;
+//# sourceMappingURL=DialPadKeyboard.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/DialPad/DialPadKeyboard.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useCallback } from 'react';
+import { Icon, registerIcon, useI18n, useLongPress } from '@pega/cosmos-react-core';
+import * as backspaceIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/backspace.icon';
+import { StyledDialButton, StyledDialPadKeyboard, StyledSpecial } from './DialPadKeyboard.styles';
+import { dtmfGraph, defaultGraph, defaultButtonGrid, dtmfButtonGrid } from './KeyboardNavigation';
+import { getDialButtonIndex, isNavigationEvent } from './utils';
+registerIcon(backspaceIcon);
+const DialPadKeyboard = forwardRef(function DialPadKeyboard({ onDialButtonClick, mode = 'default' }, ref) {
+    const buttonNavGraph = mode === 'DTMF' ? dtmfGraph : defaultGraph;
+    const buttonGrid = mode === 'DTMF' ? dtmfButtonGrid : defaultButtonGrid;
+    const t = useI18n();
+    const zeroButtonLongPress = useLongPress(() => onDialButtonClick(buttonNavGraph[10].altKeyCode || 43), () => onDialButtonClick(buttonNavGraph[10].keyCode));
+    // This is not a violation of the rules, as the array length is constant and order the always the same.
+    buttonNavGraph.forEach(element => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        element.ref = useRef(null);
+    });
+    const handleDialButtonEvent = (e, index) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const buttonEl = buttonNavGraph[index];
+        if (!buttonEl || (mode === 'DTMF' && index === 12))
+            return;
+        buttonEl.ref?.current?.focus();
+        onDialButtonClick(buttonEl.keyCode);
+    };
+    const handlePlusDialButton = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const buttonEl = buttonNavGraph[10];
+        if (!buttonEl || !buttonEl.altKeyCode)
+            return;
+        buttonEl.ref?.current?.focus();
+        onDialButtonClick(buttonEl.altKeyCode);
+    };
+    const handleEnterEvent = useCallback((e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            onDialButtonClick(Number(e.target.value));
+        }
+    }, [onDialButtonClick]);
+    const findButtonInGraph = (e) => {
+        return buttonNavGraph.find(el => el.keyCode === Number(e.target.value));
+    };
+    const getTargetIndexOnNavigationEvent = (btnEl, e) => {
+        return {
+            ArrowUp: btnEl.up,
+            ArrowLeft: btnEl.left,
+            ArrowDown: btnEl.down,
+            ArrowRight: btnEl.right
+        }[e.key];
+    };
+    const handleNavigationEvent = (e) => {
+        e.preventDefault();
+        const btnEl = findButtonInGraph(e);
+        if (!btnEl)
+            return;
+        const targetIndex = getTargetIndexOnNavigationEvent(btnEl, e);
+        if (targetIndex !== undefined)
+            buttonNavGraph[targetIndex].ref?.current?.focus();
+    };
+    const handleKeyboardNavigation = useCallback((e) => {
+        const index = getDialButtonIndex(e);
+        if (index !== -1) {
+            handleDialButtonEvent(e, index);
+        }
+        else if (e.key === '+') {
+            handlePlusDialButton(e);
+        }
+        else if (isNavigationEvent(e)) {
+            handleNavigationEvent(e);
+        }
+    }, [onDialButtonClick]);
+    return (_jsx(StyledDialPadKeyboard, { ref: ref, onKeyDown: handleKeyboardNavigation, dir: 'ltr', role: 'grid', "aria-label": t('dial_pad_keyboard'), container: {
+            cols: '1fr',
+            rowGap: 1,
+            justifyItems: 'center'
+        }, children: buttonGrid.map((row, index) => {
+            if (mode === 'default' || (mode === 'DTMF' && index < 4)) {
+                return (
+                // eslint-disable-next-line react/no-array-index-key
+                _jsx("div", { role: 'row', children: row.map((dialButton) => dialButton.alt === '+' ? (_jsxs(StyledDialButton, { type: 'button', role: 'gridcell', tabIndex: -1, ref: dialButton.ref, value: dialButton.keyCode, ...zeroButtonLongPress, children: [dialButton.sign && _jsx("span", { children: dialButton.sign }), dialButton.alt && _jsx("span", { children: dialButton.alt })] }, dialButton.keyCode)) : (_jsxs(StyledDialButton, { type: 'button', role: 'gridcell', onClick: () => onDialButtonClick(dialButton.keyCode), onKeyDown: handleEnterEvent, tabIndex: dialButton.sign === '1' ? 0 : -1, "aria-label": dialButton.icon ? dialButton.icon : undefined, ref: dialButton.ref, value: dialButton.keyCode, children: [dialButton.sign && _jsx("span", { children: dialButton.sign }), dialButton.alt && _jsx("span", { children: dialButton.alt }), dialButton.special && _jsx(StyledSpecial, { children: dialButton.special }), dialButton.icon && _jsx(Icon, { name: dialButton.icon })] }, dialButton.keyCode))) }, `row-${index}`));
+            }
+            return undefined;
+        }) }));
+});
+export default DialPadKeyboard;
+//# sourceMappingURL=DialPadKeyboard.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const StyledDialPadKeyboard: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core/lib/components/Grid/Grid.types").default & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledSpecial: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDialButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=DialPadKeyboard.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialPadKeyboard.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadKeyboard.styles.ts"],"names":[],"mappings":";AAWA,eAAO,MAAM,qBAAqB,gQAYjC,CAAC;AAIF,eAAO,MAAM,aAAa,0GAAgB,CAAC;AAE3C,eAAO,MAAM,gBAAgB,4GAqE5B,CAAC"}

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

@@ -0,0 +1,76 @@
+import { mix, readableColor } from 'polished';
+import styled, { css } from 'styled-components';
+import { calculateFontSize, defaultThemeProp, Grid, StyledIcon, tryCatch } from '@pega/cosmos-react-core';
+export const StyledDialPadKeyboard = styled(Grid)(({ theme: { base: { spacing } } }) => {
+    return css `
+      max-width: calc(25 * ${spacing});
+      margin: auto;
+      padding: ${spacing};
+    `;
+});
+StyledDialPadKeyboard.defaultProps = defaultThemeProp;
+export const StyledSpecial = styled.span ``;
+export const StyledDialButton = styled.button(({ theme: { base, components: { button, input } } }) => {
+    const secondaryHoverColor = tryCatch(() => mix(0.85, button['secondary-color'], button.color));
+    const fontSize = calculateFontSize(base['font-size'], base['font-scale']);
+    const color = tryCatch(() => readableColor(button['secondary-color']));
+    return css `
+      background: transparent;
+      width: calc(7 * ${base.spacing});
+      height: calc(7 * ${base.spacing});
+      cursor: pointer;
+      color: ${color};
+      border: 0.0625rem solid ${input['border-color']};
+      border-radius: calc(${base['border-radius']} * ${button['border-radius']});
+      position: relative;
+      outline: none;
+      margin-inline-end: ${base.spacing};
+
+      &:last-child {
+        grid-column-end: 3;
+        margin-inline-end: 0;
+      }
+
+      &:hover {
+        background-color: ${secondaryHoverColor};
+        border-color: ${base.palette.dark};
+        text-decoration: none;
+      }
+
+      &:not([disabled]):focus,
+      &:enabled:focus {
+        box-shadow: 0 0 0.5rem ${base.palette.interactive};
+      }
+
+      ${StyledIcon} {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+
+      span {
+        font-size: ${fontSize.l};
+        transform: translateY(-125%);
+        line-height: 1;
+        position: absolute;
+        left: 0;
+        right: 0;
+      }
+
+      span,
+      ${StyledIcon} {
+        color: ${color};
+      }
+
+      span + span {
+        font-size: ${fontSize.xxs};
+        transform: translateY(-30%);
+      }
+
+      ${StyledSpecial} {
+        font-size: ${fontSize.l};
+        transform: translateY(-50%);
+      }
+    `;
+});
+StyledDialButton.defaultProps = defaultThemeProp;
+//# sourceMappingURL=DialPadKeyboard.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialPadKeyboard.styles.js","sourceRoot":"","sources":["../../../src/components/DialPad/DialPadKeyboard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACL,iBAAiB,EACjB,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAEjC,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAC/C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;6BACe,OAAO;;iBAEnB,OAAO;KACnB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAE3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAC3C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EACJ,UAAU,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,EAC9B,EACF,EAAE,EAAE;IACH,MAAM,mBAAmB,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/F,MAAM,QAAQ,GAAG,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAC1E,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAEvE,OAAO,GAAG,CAAA;;wBAEU,IAAI,CAAC,OAAO;yBACX,IAAI,CAAC,OAAO;;eAEtB,KAAK;gCACY,KAAK,CAAC,cAAc,CAAC;4BACzB,IAAI,CAAC,eAAe,CAAC,MAAM,MAAM,CAAC,eAAe,CAAC;;;2BAGnD,IAAI,CAAC,OAAO;;;;;;;;4BAQX,mBAAmB;wBACvB,IAAI,CAAC,OAAO,CAAC,IAAI;;;;;;iCAMR,IAAI,CAAC,OAAO,CAAC,WAAW;;;QAGjD,UAAU;;;;;;qBAMG,QAAQ,CAAC,CAAC;;;;;;;;;QASvB,UAAU;iBACD,KAAK;;;;qBAID,QAAQ,CAAC,GAAG;;;;QAIzB,aAAa;qBACA,QAAQ,CAAC,CAAC;;;KAG1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import { mix, readableColor } from 'polished';\nimport styled, { css } from 'styled-components';\n\nimport {\n  calculateFontSize,\n  defaultThemeProp,\n  Grid,\n  StyledIcon,\n  tryCatch\n} from '@pega/cosmos-react-core';\n\nexport const StyledDialPadKeyboard = styled(Grid)(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      max-width: calc(25 * ${spacing});\n      margin: auto;\n      padding: ${spacing};\n    `;\n  }\n);\n\nStyledDialPadKeyboard.defaultProps = defaultThemeProp;\n\nexport const StyledSpecial = styled.span``;\n\nexport const StyledDialButton = styled.button(\n  ({\n    theme: {\n      base,\n      components: { button, input }\n    }\n  }) => {\n    const secondaryHoverColor = tryCatch(() => mix(0.85, button['secondary-color'], button.color));\n    const fontSize = calculateFontSize(base['font-size'], base['font-scale']);\n    const color = tryCatch(() => readableColor(button['secondary-color']));\n\n    return css`\n      background: transparent;\n      width: calc(7 * ${base.spacing});\n      height: calc(7 * ${base.spacing});\n      cursor: pointer;\n      color: ${color};\n      border: 0.0625rem solid ${input['border-color']};\n      border-radius: calc(${base['border-radius']} * ${button['border-radius']});\n      position: relative;\n      outline: none;\n      margin-inline-end: ${base.spacing};\n\n      &:last-child {\n        grid-column-end: 3;\n        margin-inline-end: 0;\n      }\n\n      &:hover {\n        background-color: ${secondaryHoverColor};\n        border-color: ${base.palette.dark};\n        text-decoration: none;\n      }\n\n      &:not([disabled]):focus,\n      &:enabled:focus {\n        box-shadow: 0 0 0.5rem ${base.palette.interactive};\n      }\n\n      ${StyledIcon} {\n        width: 1.5rem;\n        height: 1.5rem;\n      }\n\n      span {\n        font-size: ${fontSize.l};\n        transform: translateY(-125%);\n        line-height: 1;\n        position: absolute;\n        left: 0;\n        right: 0;\n      }\n\n      span,\n      ${StyledIcon} {\n        color: ${color};\n      }\n\n      span + span {\n        font-size: ${fontSize.xxs};\n        transform: translateY(-30%);\n      }\n\n      ${StyledSpecial} {\n        font-size: ${fontSize.l};\n        transform: translateY(-50%);\n      }\n    `;\n  }\n);\n\nStyledDialButton.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,6 @@
+import { NavigationGraphElement } from './DialPad.types';
+export declare const dtmfGraph: NavigationGraphElement[];
+export declare const defaultGraph: NavigationGraphElement[];
+export declare const defaultButtonGrid: NavigationGraphElement[][];
+export declare const dtmfButtonGrid: NavigationGraphElement[][];
+//# sourceMappingURL=KeyboardNavigation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/DialPad/KeyboardNavigation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AA6FzD,eAAO,MAAM,SAAS,0BAwBpB,CAAC;AAEH,eAAO,MAAM,YAAY,0BA0BvB,CAAC;AAEH,eAAO,MAAM,iBAAiB,4BAM7B,CAAC;AAEF,eAAO,MAAM,cAAc,4BAK1B,CAAC"}