@pega/cosmos-react-cs 2.0.0-dev.2.0 → 2.0.0-dev.21.1

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 = startTime instanceof Date ? startTime.getUTCMilliseconds() : startTime;
+    const timeoutMillis = timeout instanceof Date ? timeout.getUTCMilliseconds() : 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)}`] }, void 0));
+});
+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;AAOzC,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,SAAS,YAAY,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IACtF,MAAM,aAAa,GAAG,OAAO,YAAY,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;IAEvF,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,YAClD,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  startTime: number | Date;\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 = startTime instanceof Date ? startTime.getUTCMilliseconds() : startTime;\n    const timeoutMillis = timeout instanceof Date ? timeout.getUTCMilliseconds() : 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,4 @@
+export { default } from './CallControlPanel';
+export { CallControlPanelProps } from './CallControlPanel.types';
+export { default as CallControlPanelIcon } from './CallControlPanelIcon';
+//# 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,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/components/CallControlPanel/index.js

@@ -0,0 +1,3 @@
+export { default } from './CallControlPanel';
+export { default as CallControlPanelIcon } from './CallControlPanelIcon';
+//# 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":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { default } from './CallControlPanel';\nexport { CallControlPanelProps } from './CallControlPanel.types';\nexport { default as CallControlPanelIcon } from './CallControlPanelIcon';\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[] | undefined) => {
+    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,uCAEnB;IACD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CA6B1B,CAAC"}

package/lib/components/CallControlPanel/utils.js

@@ -0,0 +1,35 @@
+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
+        };
+    }
+    // eslint-disable-next-line no-restricted-syntax
+    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,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"]}

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

@@ -0,0 +1,16 @@
+import { FunctionComponent, Ref } from 'react';
+import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
+import { DialPadKeyboardProps } from './DialPadKeyboard';
+export interface DialPadProps extends NoChildrenProp {
+    /** Callback fired on call button click */
+    onCallButtonClick?: (phoneNumber: string) => void;
+    /** On keypad button press callback */
+    onDialButtonClick?: (charCode: number) => 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,EAGL,iBAAiB,EAEjB,GAAG,EAGJ,MAAM,OAAO,CAAC;AAGf,OAAO,EACL,YAAY,EAQZ,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAwB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,WAAW,YAAa,SAAQ,cAAc;IAClD,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,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,CA+C3D,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/DialPad/DialPad.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useState } 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(({ onCallButtonClick, onDialButtonClick: onDialButtonClickProp, mode }, ref) => {
+    const t = useI18n();
+    const [number, setNumber] = useState('');
+    const onDialButtonClick = useCallback((charCode) => {
+        setNumber((prevNumber) => {
+            if (charCode === 127)
+                return prevNumber.slice(0, -1);
+            return prevNumber + String.fromCharCode(charCode);
+        });
+        onDialButtonClickProp?.(charCode);
+    }, [onDialButtonClickProp]);
+    return (_jsxs(StyledDialPad, { ref: ref, children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'center', itemGap: 1 }, children: [_jsx(Input, { value: number, onChange: (e) => setNumber(e.target.value), "aria-label": t('dial_pad_phone_number_input_label'), readOnly: mode === 'DTMF' }, void 0), mode !== 'DTMF' && (_jsx(Button, { variant: 'primary', onClick: () => onCallButtonClick?.(number), "aria-label": t('dial_pad_call_button_label', [number]), disabled: number.length === 0, children: t('dial_pad_call_button_label') }, void 0))] }, void 0), _jsx(DialPadKeyboard, { onDialButtonClick: onDialButtonClick, mode: mode }, void 0)] }, void 0));
+});
+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,EAEL,UAAU,EAIV,WAAW,EACX,QAAQ,EACT,MAAM,OAAO,CAAC;AACf,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;AAa1E,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,CACxE,CACE,EACE,iBAAiB,EACjB,iBAAiB,EAAE,qBAAqB,EACxC,IAAI,EAC0B,EAChC,GAAwB,EACxB,EAAE;IACF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEzC,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,QAAgB,EAAE,EAAE;QACnB,SAAS,CAAC,CAAC,UAAkB,EAAE,EAAE;YAC/B,IAAI,QAAQ,KAAK,GAAG;gBAAE,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;YACrD,OAAO,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACpD,CAAC,CAAC,CAAC;QACH,qBAAqB,EAAE,CAAC,QAAQ,CAAC,CAAC;IACpC,CAAC,EACD,CAAC,qBAAqB,CAAC,CACxB,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,MAAM,EACb,QAAQ,EAAE,CAAC,CAAgC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,gBAC7D,CAAC,CAAC,mCAAmC,CAAC,EAClD,QAAQ,EAAE,IAAI,KAAK,MAAM,WACzB,EACD,IAAI,KAAK,MAAM,IAAI,CAClB,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,EAAE,CAAC,MAAM,CAAC,gBAC9B,CAAC,CAAC,4BAA4B,EAAE,CAAC,MAAM,CAAC,CAAC,EACrD,QAAQ,EAAE,MAAM,CAAC,MAAM,KAAK,CAAC,YAE5B,CAAC,CAAC,4BAA4B,CAAC,WACzB,CACV,YACI,EACP,KAAC,eAAe,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,WAAI,YACvD,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  FunctionComponent,\n  PropsWithoutRef,\n  Ref,\n  useCallback,\n  useState\n} 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  /** Callback fired on call button click */\n  onCallButtonClick?: (phoneNumber: string) => void;\n  /** On keypad button press callback */\n  onDialButtonClick?: (charCode: number) => 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(\n  (\n    {\n      onCallButtonClick,\n      onDialButtonClick: onDialButtonClickProp,\n      mode\n    }: PropsWithoutRef<DialPadProps>,\n    ref: Ref<HTMLDivElement>\n  ) => {\n    const t = useI18n();\n    const [number, setNumber] = useState('');\n\n    const onDialButtonClick = useCallback(\n      (charCode: number) => {\n        setNumber((prevNumber: string) => {\n          if (charCode === 127) return prevNumber.slice(0, -1);\n          return prevNumber + String.fromCharCode(charCode);\n        });\n        onDialButtonClickProp?.(charCode);\n      },\n      [onDialButtonClickProp]\n    );\n\n    return (\n      <StyledDialPad ref={ref}>\n        <Flex container={{ alignItems: 'center', justify: 'center', itemGap: 1 }}>\n          <Input\n            value={number}\n            onChange={(e: ChangeEvent<HTMLInputElement>) => setNumber(e.target.value)}\n            aria-label={t('dial_pad_phone_number_input_label')}\n            readOnly={mode === 'DTMF'}\n          />\n          {mode !== 'DTMF' && (\n            <Button\n              variant='primary'\n              onClick={() => onCallButtonClick?.(number)}\n              aria-label={t('dial_pad_call_button_label', [number])}\n              disabled={number.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);\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 declare type KeyDownNavigateOptions = {
+    [key: string]: (previousId: number) => number;
+};
+export declare type KeyDownDialButtonOptions = {
+    [key: string]: DialButton;
+};
+export declare 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,oBAAY,sBAAsB,GAAG;IACnC,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C,CAAC;AAEF,oBAAY,wBAAwB,GAAG;IACrC,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC;CAC3B,CAAC;AAEF,oBAAY,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/DialPadKeyboard.d.ts

@@ -0,0 +1,12 @@
+import { FunctionComponent } from 'react';
+import { ForwardProps } from '@pega/cosmos-react-core';
+export declare type DialPadKeyboardMode = 'default' | 'DTMF';
+export interface DialPadKeyboardProps {
+    /** 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,EAAE,YAAY,EAA+B,MAAM,yBAAyB,CAAC;AAOpF,oBAAY,mBAAmB,GAAG,SAAS,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,oBAAoB;IACnC,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,CAgJ3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/DialPad/DialPadKeyboard.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useCallback } from 'react';
+import { Icon, useI18n, useLongPress } from '@pega/cosmos-react-core';
+import { StyledDialButton, StyledDialPadKeyboard, StyledSpecial } from './DialPadKeyboard.styles';
+import { dtmfGraph, defaultGraph, defaultButtonGrid, dtmfButtonGrid } from './KeyboardNavigation';
+import { getDialButtonIndex, isNavigationEvent } from './utils';
+const DialPadKeyboard = forwardRef(({ 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, { role: 'gridcell', tabIndex: -1, ref: dialButton.ref, value: dialButton.keyCode, ...zeroButtonLongPress, children: [dialButton.sign && _jsx("span", { children: dialButton.sign }, void 0), dialButton.alt && _jsx("span", { children: dialButton.alt }, void 0)] }, dialButton.keyCode)) : (_jsxs(StyledDialButton, { 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 }, void 0), dialButton.alt && _jsx("span", { children: dialButton.alt }, void 0), dialButton.special && _jsx(StyledSpecial, { children: dialButton.special }, void 0), dialButton.icon && _jsx(Icon, { name: dialButton.icon }, void 0)] }, dialButton.keyCode))) }, `row-${index}`));
+            }
+            return undefined;
+        }) }, void 0));
+});
+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 { ForwardProps, Icon, useI18n, useLongPress } from '@pega/cosmos-react-core';\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\nexport type DialPadKeyboardMode = 'default' | 'DTMF';\n\nexport interface DialPadKeyboardProps {\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  (\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                      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                      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").GridProps & 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,mOAYjC,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"}

package/lib/components/DialPad/KeyboardNavigation.js

@@ -0,0 +1,156 @@
+const baseGraph = [
+    {
+        sign: '1',
+        keyCode: 49,
+        ref: undefined,
+        right: 1,
+        down: 3
+    },
+    {
+        sign: '2',
+        alt: 'ABC',
+        keyCode: 50,
+        ref: undefined,
+        right: 2,
+        down: 4,
+        left: 0
+    },
+    {
+        sign: '3',
+        alt: 'DEF',
+        keyCode: 51,
+        ref: undefined,
+        down: 5,
+        left: 1
+    },
+    {
+        sign: '4',
+        alt: 'GHI',
+        keyCode: 52,
+        ref: undefined,
+        up: 0,
+        right: 4,
+        down: 6
+    },
+    {
+        sign: '5',
+        alt: 'JKL',
+        keyCode: 53,
+        ref: undefined,
+        up: 1,
+        right: 5,
+        down: 7,
+        left: 3
+    },
+    {
+        sign: '6',
+        alt: 'MNO',
+        keyCode: 54,
+        ref: undefined,
+        up: 2,
+        down: 8,
+        left: 4
+    },
+    {
+        sign: '7',
+        alt: 'PQRS',
+        keyCode: 55,
+        ref: undefined,
+        up: 3,
+        right: 7,
+        down: 9
+    },
+    {
+        sign: '8',
+        alt: 'TUV',
+        keyCode: 56,
+        ref: undefined,
+        up: 4,
+        right: 8,
+        down: 10,
+        left: 6
+    },
+    {
+        sign: '9',
+        alt: 'WXYZ',
+        keyCode: 57,
+        ref: undefined,
+        up: 5,
+        down: 11,
+        left: 7
+    },
+    {
+        special: '*',
+        keyCode: 42,
+        ref: undefined,
+        up: 6,
+        right: 10,
+        down: 12
+    }
+];
+export const dtmfGraph = baseGraph.concat([
+    {
+        sign: '0',
+        alt: '+',
+        keyCode: 48,
+        altKeyCode: 43,
+        ref: undefined,
+        up: 7,
+        right: 11,
+        left: 9
+    },
+    {
+        special: '#',
+        keyCode: 35,
+        ref: undefined,
+        up: 8,
+        left: 10
+    },
+    {
+        icon: 'backspace',
+        keyCode: 127,
+        ref: undefined,
+        up: 10
+    }
+]);
+export const defaultGraph = baseGraph.concat([
+    {
+        sign: '0',
+        alt: '+',
+        keyCode: 48,
+        altKeyCode: 43,
+        ref: undefined,
+        up: 7,
+        right: 11,
+        down: 12,
+        left: 9
+    },
+    {
+        special: '#',
+        keyCode: 35,
+        ref: undefined,
+        up: 8,
+        down: 12,
+        left: 10
+    },
+    {
+        icon: 'backspace',
+        keyCode: 127,
+        ref: undefined,
+        up: 10
+    }
+]);
+export const defaultButtonGrid = [
+    [defaultGraph[0], defaultGraph[1], defaultGraph[2]],
+    [defaultGraph[3], defaultGraph[4], defaultGraph[5]],
+    [defaultGraph[6], defaultGraph[7], defaultGraph[8]],
+    [defaultGraph[9], defaultGraph[10], defaultGraph[11]],
+    [defaultGraph[12]]
+];
+export const dtmfButtonGrid = [
+    [dtmfGraph[0], dtmfGraph[1], dtmfGraph[2]],
+    [dtmfGraph[3], dtmfGraph[4], dtmfGraph[5]],
+    [dtmfGraph[6], dtmfGraph[7], dtmfGraph[8]],
+    [dtmfGraph[9], dtmfGraph[10], dtmfGraph[11]]
+];
+//# sourceMappingURL=KeyboardNavigation.js.map