@pega/cosmos-react-cs 2.1.3 → 2.1.6

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

@@ -1,9 +0,0 @@
-import { FunctionComponent } from 'react';
-interface StopWatchProps {
-    startTime: number | Date;
-    timeout?: number | Date;
-}
-export declare const StyledStopWatch: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("@pega/cosmos-react-core").OmitStrict<import("@pega/cosmos-react-core").TextProps, "variant"> & Required<Pick<import("@pega/cosmos-react-core").TextProps, "variant">>, never>;
-declare const StopWatch: FunctionComponent<StopWatchProps>;
-export default StopWatch;
-//# sourceMappingURL=StopWatch.d.ts.map

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

@@ -1 +0,0 @@
-{"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,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,qRAG3B,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,CAwBhD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/CallControlPanel/StopWatch.js

@@ -1,28 +0,0 @@
-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

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

@@ -1,5 +0,0 @@
-export { default } from './CallControlPanel';
-export { CallProps, CallControlPanelProps, UserAvailabilityStatusOption } from './CallControlPanel.types';
-export { default as CallControlPanelIcon } from './CallControlPanelIcon';
-export { default as CalleePicker } from './CalleePicker';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"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,EACL,SAAS,EACT,qBAAqB,EACrB,4BAA4B,EAC7B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/components/CallControlPanel/index.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAM7C,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export { default } from './CallControlPanel';\nexport {\n  CallProps,\n  CallControlPanelProps,\n  UserAvailabilityStatusOption\n} from './CallControlPanel.types';\nexport { default as CallControlPanelIcon } from './CallControlPanelIcon';\nexport { default as CalleePicker } from './CalleePicker';\n"]}

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

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

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

@@ -1,35 +0,0 @@
-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

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

@@ -1,16 +0,0 @@
-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

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

@@ -1,33 +0,0 @@
-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

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

@@ -1,33 +0,0 @@
-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

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

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

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

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

@@ -1,12 +0,0 @@
-import { FunctionComponent } from 'react';
-import { ForwardProps, NoChildrenProp } from '@pega/cosmos-react-core';
-export declare 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

@@ -1 +0,0 @@
-{"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,EAAQ,cAAc,EAAyB,MAAM,yBAAyB,CAAC;AAOpG,oBAAY,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,CAgJ3E,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/DialPad/DialPadKeyboard.js

@@ -1,87 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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, NoChildrenProp, 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 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  (\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

@@ -1,5 +0,0 @@
-/// <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

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

@@ -1,76 +0,0 @@
-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

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

@@ -1,6 +0,0 @@
-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

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