@oracle/oraclejet-preact 14.0.0

package/cjs/UNSAFE_PrefixSuffix.js

@@ -0,0 +1,54 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('preact/jsx-runtime');
+require("identity-obj-proxy");
+require('./utils/UNSAFE_classNames.js');
+var classNames = require('./classNames-825d80d7.js');
+
+function PrefixSuffix({
+  hasEndContent,
+  hasInsideLabel,
+  hasStartContent,
+  id,
+  isDisabled,
+  isFocused,
+  text,
+  variant
+}) {
+  const prefixSuffixStyles = {
+    base: "_1mkzr4l",
+    isFocused: "tquikd",
+    isDisabled: "gznfk",
+    insideLabel: "_1odo2ci",
+    prefixHasStartContent: "pjrfi9",
+    suffixHasEndContent: "_1xbp55f",
+    prefixInlineStart: "_1r6quhn",
+    suffixInlineStart: "_121ykfr"
+  }; // We want the input to have padding on itself. This gives the user more space to click on to set focus to the input.
+  // The prefix/suffix need padding between itself and either the 'edge' or the 'startContent'/'endContent'.
+  // So the logic is:
+  // if no startContent and we have a prefix, add --text-to-edge-padding to the prefix
+  // if no endContent and we have a suffix, add --text-to-edge-padding to the suffix
+  // if startContent and we have a prefix, add text-field-icon-to-text-padding
+  // if endContent and we have a suffix, add text-field-icon-to-text-padding
+  // **-- text-to-edge-padding**prefix (input has padding for prefix/input)input(input has padding for suffix/input)suffix**--text-to-edge-padding**
+  // -- (this should be in startContent)startContent **icon-to-text-padding**prefix (input has padding for prefix/input)input(input has padding for suffix/input) suffix **--text-to-edge-padding**
+  // -- **icon-to-text-padding**prefix (input has padding for prefix/input)input(input has padding for suffix/input) suffix**--icon-to-text-padding**(this should be in endContent)endContent
+
+  const prefixSuffixClasses = classNames.classNames([prefixSuffixStyles.base, variant === 'suffix' && hasEndContent && prefixSuffixStyles.suffixHasEndContent, hasInsideLabel && prefixSuffixStyles.insideLabel, variant === 'prefix' && hasStartContent && prefixSuffixStyles.prefixHasStartContent, isFocused && prefixSuffixStyles.isFocused, isDisabled && prefixSuffixStyles.isDisabled, variant === 'prefix' && !hasStartContent && prefixSuffixStyles.prefixInlineStart, variant === 'suffix' && !hasEndContent && prefixSuffixStyles.suffixInlineStart]);
+  return jsxRuntime.jsx("div", Object.assign({
+    class: prefixSuffixClasses,
+    id: id
+  }, {
+    children: jsxRuntime.jsx("span", {
+      children: text
+    })
+  }));
+}
+
+exports.PrefixSuffix = PrefixSuffix;
+/*  */
+//# sourceMappingURL=UNSAFE_PrefixSuffix.js.map

package/cjs/UNSAFE_PrefixSuffix.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_PrefixSuffix.js","sources":["../../src/UNSAFE_PrefixSuffix/PrefixSuffix.tsx"],"sourcesContent":["import { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\n\ntype Props = {\n  hasEndContent?: boolean;\n  hasInsideLabel?: boolean;\n  hasStartContent?: boolean;\n  id: string;\n  isDisabled?: boolean;\n  isFocused?: boolean;\n  text: string;\n  variant: 'prefix' | 'suffix';\n};\n\nexport function PrefixSuffix({\n  hasEndContent,\n  hasInsideLabel,\n  hasStartContent,\n  id,\n  isDisabled,\n  isFocused,\n  text,\n  variant\n}: Props) {\n  const prefixSuffixStyles = {\n    base: cssProps`${{\n      display: 'flex',\n      alignItems: 'center',\n      whiteSpace: 'nowrap',\n      boxSizing: 'border-box',\n      fontFamily: 'inherit',\n      lineHeight: 'inherit',\n      fontWeight: 'inherit',\n      fontSize: '100%',\n      border: '0',\n      backgroundColor: 'transparent',\n      color: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-color)'\n    }}`,\n    isFocused: cssProps`${{\n      opacity: '.45'\n    }}`,\n    isDisabled: cssProps`${{\n      color: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-color-disabled)'\n    }}`,\n    insideLabel: cssProps`${{\n      minHeight: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-height)',\n      paddingTop: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-inside-edge-padding-top)'\n    }}`,\n    prefixHasStartContent: cssProps`${{\n      paddingInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-icon-to-text-padding)'\n    }}`,\n\n    suffixHasEndContent: cssProps`${{\n      paddingInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-icon-to-text-padding)'\n    }}`,\n    prefixInlineStart: cssProps`${{\n      paddingInlineStart: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding)'\n    }}`,\n    suffixInlineStart: cssProps`${{\n      paddingInlineEnd: 'var(--oj-c-PRIVATE-DO-NOT-USE-text-field-text-to-edge-padding)'\n    }}`\n  };\n\n  // We want the input to have padding on itself. This gives the user more space to click on to set focus to the input.\n  // The prefix/suffix need padding between itself and either the 'edge' or the 'startContent'/'endContent'.\n  // So the logic is:\n  // if no startContent and we have a prefix, add --text-to-edge-padding to the prefix\n  // if no endContent and we have a suffix, add --text-to-edge-padding to the suffix\n  // if startContent and we have a prefix, add text-field-icon-to-text-padding\n  // if endContent and we have a suffix, add text-field-icon-to-text-padding\n  // **-- text-to-edge-padding**prefix (input has padding for prefix/input)input(input has padding for suffix/input)suffix**--text-to-edge-padding**\n  // -- (this should be in startContent)startContent **icon-to-text-padding**prefix (input has padding for prefix/input)input(input has padding for suffix/input) suffix **--text-to-edge-padding**\n  // -- **icon-to-text-padding**prefix (input has padding for prefix/input)input(input has padding for suffix/input) suffix**--icon-to-text-padding**(this should be in endContent)endContent\n  const prefixSuffixClasses = classNames([\n    prefixSuffixStyles.base,\n    variant === 'suffix' && hasEndContent && prefixSuffixStyles.suffixHasEndContent,\n    hasInsideLabel && prefixSuffixStyles.insideLabel,\n    variant === 'prefix' && hasStartContent && prefixSuffixStyles.prefixHasStartContent,\n    isFocused && prefixSuffixStyles.isFocused,\n    isDisabled && prefixSuffixStyles.isDisabled,\n    variant === 'prefix' && !hasStartContent && prefixSuffixStyles.prefixInlineStart,\n    variant === 'suffix' && !hasEndContent && prefixSuffixStyles.suffixInlineStart\n  ]);\n\n  return (\n    <div class={prefixSuffixClasses} id={id}>\n      <span>{text}</span>\n    </div>\n  );\n}\n"],"names":["PrefixSuffix","hasEndContent","hasInsideLabel","hasStartContent","id","isDisabled","isFocused","text","variant","prefixSuffixStyles","base","suffixHasEndContent","prefixHasStartContent","_jsx","Object","assign","class","prefixSuffixClasses","children"],"mappings":";;;;;;;;;;AAcA,SAAAA,YAAA,CAAA;EAAAC,aAAA;EAAAC,cAAA;EAAAC,eAAA;EAAAC,EAAA;EAAAC,UAAA;EAAAC,SAAA;EAAAC,IAAA;AAAAC,EAAAA,OAAAA;AAAA,CAAA,EAAA;AAUE,EAAA,MAAAC,kBAAA,GAAA;UAAA,UAAA;eAAA,QAAA;gBAAA,OAAA;iBAAA,UAAA;2BAAA,QAAA;yBAAA,UAAA;uBAAA,UAAA;;AAAA,GAAA,CAVF;;;;;;;;;;;qDA4DIA,kBAAA,CAAAC,MACAF,OAAA,KAAA,QAAA,IAAAP,aAAA,IAAAQ,kBAAA,CAAAE,uEAEAH,OAAA,KAAA,QAAA,IAAAL,eAAA,IAAAM,kBAAA,CAAAG;AAOF,EAAA,OAAAC,cAAA,CAAA,KAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAAAC,IAAAA,KAAA,EAAAC,mBAAA;AAAAb,IAAAA,EAAA,EAAAA,EAAAA;AAAA,GAAA,EAAA;AAAAc,IAAAA,QAAA,EAAAL,cAAA,CAAA,MAAA,EAAA;AAAAK,MAAAA,QAAA,EAAAX,IAAAA;KAAA,CAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAKF;;;;;;;"}

package/cjs/UNSAFE_ProgressBar.js

@@ -0,0 +1,103 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('./tslib.es6-d7adde1f.js');
+var jsxRuntime = require('preact/jsx-runtime');
+require('./utils/UNSAFE_classNames.js');
+require("identity-obj-proxy");
+var hooks_UNSAFE_useUser = require('./hooks/UNSAFE_useUser.js');
+var hooks_UNSAFE_useTranslationBundle = require('./hooks/UNSAFE_useTranslationBundle.js');
+var PRIVATE_Meter = require('./PRIVATE_Meter.js');
+var classNames = require('./classNames-825d80d7.js');
+require('preact/hooks');
+require('./UNSAFE_Environment.js');
+require('preact');
+require('./UNSAFE_Layer.js');
+require('preact/compat');
+
+/**
+ * A progress bar allows the user to visualize the progression of an extended computer operation.
+ */
+
+function ProgressBar(_a) {
+  var {
+    value,
+    max
+  } = _a,
+      otherProps = tslib_es6.__rest(_a, ["value", "max"]);
+
+  return value === 'indeterminate' ? jsxRuntime.jsx(IndeterminateProgressBar, Object.assign({}, otherProps)) : jsxRuntime.jsx(DeterminateProgressBar, Object.assign({
+    value: value,
+    max: max
+  }, otherProps));
+}
+
+const IndeterminateProgressBar = ({
+  accessibleLabel,
+  id,
+  width,
+  edge = 'none'
+}) => {
+  const {
+    direction
+  } = hooks_UNSAFE_useUser.useUser();
+  const classes = classNames.classNames([styles.value, styles.indeterminate, styles[direction]]);
+  const baseClasses = classNames.classNames([styles.base, edge === 'none' && styles.standalone]);
+  const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+  const ariaProps = {
+    'aria-valuetext': accessibleLabel || translations.progressIndeterminate(),
+    role: 'progressbar'
+  };
+  return jsxRuntime.jsx(PRIVATE_Meter.BarTrack, Object.assign({
+    id: id,
+    ariaProps: ariaProps,
+    class: baseClasses,
+    length: width
+  }, {
+    children: jsxRuntime.jsx(PRIVATE_Meter.BarValue, {
+      class: classes
+    })
+  }));
+};
+
+const DeterminateProgressBar = ({
+  value = 0,
+  max = 100,
+  id,
+  width,
+  edge = 'none'
+}) => {
+  const percentage = `${Math.min(Math.max(0, value / max), 1) * 100}%`;
+  const baseClasses = classNames.classNames([styles.base, edge === 'none' && styles.standalone]);
+  const ariaProps = {};
+  ariaProps['aria-valuemin'] = value != null ? '0' : undefined;
+  ariaProps['aria-valuemax'] = value != null ? `${max}` : undefined;
+  ariaProps['aria-valuenow'] = value != null ? `${value}` : undefined;
+  ariaProps['role'] = 'progressbar';
+  return jsxRuntime.jsx(PRIVATE_Meter.BarTrack, Object.assign({
+    ariaProps: ariaProps,
+    id: id,
+    length: width,
+    class: baseClasses
+  }, {
+    children: jsxRuntime.jsx(PRIVATE_Meter.BarValue, {
+      class: styles.value,
+      length: percentage
+    })
+  }));
+};
+
+const styles = {
+  base: "_1bvlskh",
+  value: "e0vg3c",
+  indeterminate: "fdd9so",
+  standalone: "_1kw0ioz",
+  rtl: "_1v2uuaj",
+  ltr: "_1joglar"
+};
+
+exports.ProgressBar = ProgressBar;
+/*  */
+//# sourceMappingURL=UNSAFE_ProgressBar.js.map

package/cjs/UNSAFE_ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_ProgressBar.js","sources":["../../src/UNSAFE_ProgressBar/ProgressBar.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentProps } from 'preact';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { useUser } from '../hooks/UNSAFE_useUser';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport type { BundleType } from '../resources/nls/bundle';\nimport { BarTrack, BarValue } from '../PRIVATE_Meter';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\ntype ariaPropsType = ComponentProps<typeof BarTrack>['ariaProps'];\n\ntype IntrinsicProps = Pick<\n  HTMLAttributesSignalExcluded<HTMLDivElement>,\n  'id' | 'class' | 'children'\n>;\n\ntype Props = {\n  /**\n   * Specifies the id of the progress bar.  If the progress bar is being used to describe the loading process of a particular region\n   * of the page, then the aria-describedby attribute of the region must point to the id of the ProgressBar\n   */\n  id?: IntrinsicProps['id'];\n  /**\n   * The value of the progress bar.  If the value is 'indeterminate', an indeterminate progress bar will be shown.\n   */\n  value?: 'indeterminate' | number;\n\n  /**\n   * Whether the progress bar is positioned at the top edge of a container or not.\n   * If set to 'top', the curved borders will be removed.\n   */\n  edge?: 'none' | 'top';\n\n  /**\n   * The maximum value of the progress bar.\n   */\n  max?: number;\n  /**\n   * The width of the progress bar.  This will use the CSS lengths styling.\n   */\n  // TODO: use the dimensions work the Jeanne is doing JET-49961\n  width?: string;\n\n  /**\n   * A label to be used for accessibility purposes when value is set to 'indeterminate'.\n   */\n  accessibleLabel?: string;\n};\n/**\n * A progress bar allows the user to visualize the progression of an extended computer operation.\n */\nexport function ProgressBar({ value, max, ...otherProps }: Props) {\n  return value === 'indeterminate' ? (\n    <IndeterminateProgressBar {...otherProps} />\n  ) : (\n    <DeterminateProgressBar value={value} max={max} {...otherProps} />\n  );\n}\n\ntype IndeterminateProps = Omit<Props, 'value' | 'max'>;\n\nconst IndeterminateProgressBar = ({\n  accessibleLabel,\n  id,\n  width,\n  edge = 'none'\n}: IndeterminateProps) => {\n  const { direction } = useUser();\n  const classes = classNames([styles.value, styles.indeterminate, styles[direction]]);\n  const baseClasses = classNames([styles.base, edge === 'none' && styles.standalone]);\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const ariaProps: ariaPropsType = {\n    'aria-valuetext': accessibleLabel || translations.progressIndeterminate(),\n    role: 'progressbar'\n  };\n  return (\n    <BarTrack id={id} ariaProps={ariaProps} class={baseClasses} length={width}>\n      <BarValue class={classes} />\n    </BarTrack>\n  );\n};\n\ntype DeterminateProps = Omit<Props, 'accessibleLabel'> & {\n  value?: number;\n};\n\nconst DeterminateProgressBar = ({\n  value = 0,\n  max = 100,\n  id,\n  width,\n  edge = 'none'\n}: DeterminateProps) => {\n  const percentage = `${Math.min(Math.max(0, value / max), 1) * 100}%`;\n  const baseClasses = classNames([styles.base, edge === 'none' && styles.standalone]);\n  const ariaProps: ariaPropsType = {};\n  ariaProps['aria-valuemin'] = value != null ? '0' : undefined;\n  ariaProps['aria-valuemax'] = value != null ? `${max}` : undefined;\n  ariaProps['aria-valuenow'] = value != null ? `${value}` : undefined;\n  ariaProps['role'] = 'progressbar';\n  return (\n    <BarTrack ariaProps={ariaProps} id={id} length={width} class={baseClasses}>\n      <BarValue class={styles.value} length={percentage} />\n    </BarTrack>\n  );\n};\n\nconst styles = {\n  base: cssProps`${{\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-progress-bar-height)',\n    position: 'relative',\n    boxSizing: 'border-box',\n    overflowX: 'hidden',\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-track-bg-color)'\n  }}`,\n  value: cssProps`${{\n    margin: '0',\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-value-bg-color)',\n    height: '100%',\n    boxSizing: 'border-box'\n  }}`,\n  indeterminate: cssProps`${{\n    width: '25%',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-progress-bar-height)',\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-value-bg-color)',\n    position: 'relative',\n    animationDuration: '2s',\n    animationTimingFunction: 'linear',\n    animationIterationCount: 'infinite'\n  }}`,\n  standalone: cssProps`${{\n    borderRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-progress-bar-border-radius)'\n  }}`,\n  rtl: cssProps`${{\n    animationName: 'var(--oj-c-PRIVATE-DO-NOT-USE-private-progress-bar-indeterminate-animation-rtl)'\n  }}`,\n  ltr: cssProps`${{\n    animationName: 'var(--oj-c-PRIVATE-DO-NOT-USE-private-progress-bar-indeterminate-animation)'\n  }}`\n};\n"],"names":["ProgressBar","_a","value","_jsx","IndeterminateProgressBar","Object","assign","otherProps","DeterminateProgressBar","max","accessibleLabel","id","width","edge","direction","useUser","classes","classNames","styles","indeterminate","baseClasses","base","standalone","translations","useTranslationBundle","ariaProps","progressIndeterminate","role","BarTrack","class","length","children","BarValue","undefined","percentage"],"mappings":"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"}

package/cjs/UNSAFE_ProgressCircle.js

@@ -0,0 +1,98 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_es6 = require('./tslib.es6-d7adde1f.js');
+var jsxRuntime = require('preact/jsx-runtime');
+require('./utils/UNSAFE_classNames.js');
+require("identity-obj-proxy");
+var PRIVATE_Meter = require('./PRIVATE_Meter.js');
+var utils_PRIVATE_meterUtils = require('./utils/PRIVATE_meterUtils.js');
+var hooks_UNSAFE_useTranslationBundle = require('./hooks/UNSAFE_useTranslationBundle.js');
+var classNames = require('./classNames-825d80d7.js');
+require('preact/compat');
+require('preact/hooks');
+require('./UNSAFE_Environment.js');
+require('preact');
+require('./UNSAFE_Layer.js');
+
+/**
+ * A progress circle allows the user to visualize the progression of an extended computer operation.
+ */
+
+function ProgressCircle(_a) {
+  var {
+    value,
+    max
+  } = _a,
+      otherProps = tslib_es6.__rest(_a, ["value", "max"]);
+
+  return value === 'indeterminate' ? jsxRuntime.jsx(IndeterminateProgressCircle, Object.assign({}, otherProps)) : jsxRuntime.jsx(DeterminateProgressCircle, Object.assign({
+    value: value,
+    max: max
+  }, otherProps));
+}
+
+const IndeterminateProgressCircle = ({
+  accessibleLabel,
+  id,
+  size = 'md'
+}) => {
+  const baseClasses = classNames.classNames([styles.base, `oj-c-progress-circle-${size}`, styles.indeterminateOuter]);
+  const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+  const ariaProps = {
+    'aria-valuetext': accessibleLabel || translations.progressIndeterminate(),
+    role: 'progressbar'
+  };
+  return jsxRuntime.jsx(PRIVATE_Meter.CircleWrapper, Object.assign({
+    id: id,
+    ariaProps: ariaProps,
+    class: baseClasses
+  }, {
+    children: jsxRuntime.jsx(PRIVATE_Meter.CircleInner, {
+      class: styles.indeterminateInner
+    })
+  }));
+};
+
+const DeterminateProgressCircle = ({
+  value = 0,
+  max = 100,
+  id,
+  size = 'md'
+}) => {
+  const percentage = Math.min(Math.max(0, value / max), 1);
+  const baseClasses = classNames.classNames([styles.base, `oj-c-progress-circle-${size}`]);
+  const clipPath = utils_PRIVATE_meterUtils.getClipPath(90, percentage * 360, false, 'full');
+  const ariaProps = {};
+  ariaProps['aria-valuemin'] = value != null ? '0' : undefined;
+  ariaProps['aria-valuemax'] = value != null ? `${max}` : undefined;
+  ariaProps['aria-valuenow'] = value != null ? `${value}` : undefined;
+  ariaProps['role'] = 'progressbar';
+  return jsxRuntime.jsxs(PRIVATE_Meter.CircleWrapper, Object.assign({
+    id: id,
+    ariaProps: ariaProps,
+    class: baseClasses
+  }, {
+    children: [jsxRuntime.jsx(PRIVATE_Meter.CircleInner, {
+      class: classNames.classNames([styles.determinateInner, styles.track])
+    }), jsxRuntime.jsx(PRIVATE_Meter.CircleInner, {
+      class: classNames.classNames([styles.determinateInner, styles.value]),
+      clipPath: clipPath
+    })]
+  }));
+};
+
+const styles = {
+  base: "o1dybu",
+  indeterminateOuter: "_1im0ka0",
+  indeterminateInner: "wc019n",
+  determinateInner: "if0tev",
+  track: "_1d6frer",
+  value: "s150pk"
+};
+
+exports.ProgressCircle = ProgressCircle;
+/*  */
+//# sourceMappingURL=UNSAFE_ProgressCircle.js.map

package/cjs/UNSAFE_ProgressCircle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_ProgressCircle.js","sources":["../../src/UNSAFE_ProgressCircle/ProgressCircle.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentProps } from 'preact';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { CircleWrapper, CircleInner } from '../PRIVATE_Meter';\nimport { getClipPath } from '../utils/PRIVATE_meterUtils';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport type { BundleType } from '../resources/nls/bundle';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\ntype ariaPropsType = ComponentProps<typeof CircleWrapper>['ariaProps'];\ntype IntrinsicProps = Pick<\n  HTMLAttributesSignalExcluded<HTMLDivElement>,\n  'id' | 'class' | 'children'\n>;\n\ntype Props = IntrinsicProps & {\n  /**\n   * Specifies the id of the progress circle.  If the progress circle is being used to describe the loading process of a particular region\n   * of the page, then the aria-describedby attribute of the region must point to the id of the ProgressCircle\n   */\n  id?: IntrinsicProps['id'];\n  /**\n   * The value of the progress circle.  If the value is 'indeterminate', an indeterminate progress circle will be shown.\n   */\n  value?: 'indeterminate' | number;\n\n  /**\n   * The maximum value of the progress circle.\n   */\n  max?: number;\n  /**\n   * The size of the progress circle.\n   */\n  size?: 'sm' | 'md' | 'lg';\n\n  /**\n   * A label to be used for accessibility purposes when value is set to 'indeterminate'.\n   */\n  accessibleLabel?: string;\n};\n/**\n * A progress circle allows the user to visualize the progression of an extended computer operation.\n */\nexport function ProgressCircle({ value, max, ...otherProps }: Props) {\n  return value === 'indeterminate' ? (\n    <IndeterminateProgressCircle {...otherProps}></IndeterminateProgressCircle>\n  ) : (\n    <DeterminateProgressCircle value={value} max={max} {...otherProps}></DeterminateProgressCircle>\n  );\n}\n\ntype IndeterminateProps = Omit<Props, 'value' | 'max'>;\n\nconst IndeterminateProgressCircle = ({ accessibleLabel, id, size = 'md' }: IndeterminateProps) => {\n  const baseClasses = classNames([\n    styles.base,\n    `oj-c-progress-circle-${size}`,\n    styles.indeterminateOuter\n  ]);\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const ariaProps: ariaPropsType = {\n    'aria-valuetext': accessibleLabel || translations.progressIndeterminate(),\n    role: 'progressbar'\n  };\n  return (\n    <CircleWrapper id={id} ariaProps={ariaProps} class={baseClasses}>\n      <CircleInner class={styles.indeterminateInner} />\n    </CircleWrapper>\n  );\n};\n\ntype DeterminateProps = Omit<Props, 'accessibleLabel'> & {\n  value?: number;\n};\n\nconst DeterminateProgressCircle = ({ value = 0, max = 100, id, size = 'md' }: DeterminateProps) => {\n  const percentage = Math.min(Math.max(0, value / max), 1);\n  const baseClasses = classNames([styles.base, `oj-c-progress-circle-${size}`]);\n  const clipPath = getClipPath(90, percentage * 360, false, 'full');\n\n  const ariaProps: ariaPropsType = {};\n  ariaProps['aria-valuemin'] = value != null ? '0' : undefined;\n  ariaProps['aria-valuemax'] = value != null ? `${max}` : undefined;\n  ariaProps['aria-valuenow'] = value != null ? `${value}` : undefined;\n  ariaProps['role'] = 'progressbar';\n  return (\n    <CircleWrapper id={id} ariaProps={ariaProps} class={baseClasses}>\n      <CircleInner class={classNames([styles.determinateInner, styles.track])} />\n      <CircleInner\n        class={classNames([styles.determinateInner, styles.value])}\n        clipPath={clipPath}\n      />\n    </CircleWrapper>\n  );\n};\n\nconst styles = {\n  base: cssProps`${{\n    position: 'relative',\n    overflowX: 'hidden',\n    overflowY: 'hidden',\n    display: 'inline-block',\n    maxWidth: '100%',\n    maxHeight: '100%',\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-progress-circle-size)',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-progress-circle-size)'\n  }}`,\n  indeterminateOuter: cssProps`${{\n    animationName: 'var(--oj-c-PRIVATE-DO-NOT-USE-private-progress-circle-rotation-animation)',\n    animationDuration: '1s',\n    animationTimingFunction: 'linear',\n    animationIterationCount: 'infinite'\n  }}`,\n  indeterminateInner: cssProps`${{\n    borderWidth: 'var(--oj-c-PRIVATE-DO-NOT-USE-progress-circle-track-width)',\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-value-bg-color)',\n    borderStyle: 'solid',\n    width: '100%',\n    height: '100%',\n    boxSizing: 'border-box',\n    borderRadius: '50%',\n    animationName: 'var(--oj-c-PRIVATE-DO-NOT-USE-private-progress-circle-length-animation)',\n    animationDuration: '1.5s',\n    animationTimingFunction: 'linear',\n    animationIterationCount: 'infinite',\n    animationDirection: 'alternate',\n    position: 'absolute'\n  }}`,\n  determinateInner: cssProps`${{\n    borderWidth: 'var(--oj-c-PRIVATE-DO-NOT-USE-progress-circle-track-width)',\n    width: '100%',\n    height: '100%',\n    boxSizing: 'border-box',\n    borderRadius: '50%',\n    position: 'absolute',\n    borderStyle: 'solid'\n  }}`,\n  track: cssProps`${{\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-track-bg-color)'\n  }}`,\n  value: cssProps`${{\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-value-bg-color)'\n  }}`\n};\n"],"names":["ProgressCircle","_a","value","_jsx","IndeterminateProgressCircle","Object","assign","otherProps","DeterminateProgressCircle","max","accessibleLabel","id","size","styles","base","indeterminateOuter","translations","useTranslationBundle","ariaProps","progressIndeterminate","role","percentage","Math","min","baseClasses","classNames","clipPath","getClipPath","undefined"],"mappings":";;;;;;;;;;;;;;;;;;;AA+CA;;AAEG;;AACH,SAAAA,cAAA,CAAAC,EAAA,EAAA;;;;;;;EACE,OAAAC,KAAA,KAAA,eAAA,GAAAC,cAAA,CAAAC,2BAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA,EAAA,EAAAC,UAAA,CAAA,CAAA,GAAAJ,cAAA,CAAAK,yBAAA,EAAAH,MAAA,CAAAC,MAAA,CAAA;AAAAJ,IAAAA,KAAA,EAAAA,KAAA;AAAAO,IAAAA,GAAA,EAAAA,GAAAA;GAAA,EAAAF,UAAA,CAAA,CAAA,CAAA;AAKF,CAAA;;AAIA,MAAAH,2BAAA,GAAA,CAAA;EAAAM,eAAA;EAAAC,EAAA;AAAAC,EAAAA,IAAA,GAAA,IAAA;AAAA,CAAA,KAAA;6CAEIC,MAAA,CAAAC,MACA,CAAA,qBAAA,EAAAF,IAAA,IACAC,MAAA,CAAAE;AAEF,EAAA,MAAAC,YAAA,GAAAC,sDAAA,CAAA,0BAAA,CAAA,CAAA;AACA,EAAA,MAAAC,SAAA,GAAA;AACE,IAAA,gBAAA,EAAAR,eAAA,IAAAM,YAAA,CAAAG,qBAAA,EADF;AAEEC,IAAAA,IAAA,EAAA,aAAA;GAFF,CAAA;;;;;;;;;;AASF,CAhBA,CAAA;;AAsBA,MAAAZ,yBAAA,GAAA,CAAA;AAAAN,EAAAA,KAAA,GAAA,CAAA;AAAAO,EAAAA,GAAA,GAAA,GAAA;EAAAE,EAAA;AAAAC,EAAAA,IAAA,GAAA,IAAA;AAAA,CAAA,KAAA;AACE,EAAA,MAAAS,UAAA,GAAAC,IAAA,CAAAC,GAAA,CAAAD,IAAA,CAAAb,GAAA,CAAA,CAAA,EAAAP,KAAA,GAAAO,GAAA,CAAA,EAAA,CAAA,CAAA,CAAA;AACA,EAAA,MAAAe,WAAA,GAAAC,qBAAA,CAAA,CAAAZ,MAAA,CAAAC,IAAA,EAAA,CAAA,qBAAA,EAAAF,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AACA,EAAA,MAAAc,QAAA,GAAAC,oCAAA,CAAA,EAAA,EAAAN,UAAA,GAAA,GAAA,EAAA,KAAA,EAAA,MAAA,CAAA,CAAA;;EAGAH,SAAA,CAAA,eAAA,CAAA,GAAAhB,KAAA,IAAA,IAAA,GAAA,GAAA,GAAA0B,SAAA,CAAA;AACAV,EAAAA,SAAA,CAAA,eAAA,CAAA,GAAAhB,KAAA,IAAA,IAAA,GAAA,CAAAO,EAAAA,GAAA,CAAA,CAAA,GAAAmB,SAAA,CAAA;AACAV,EAAAA,SAAA,CAAA,eAAA,CAAA,GAAAhB,KAAA,IAAA,IAAA,GAAA,CAAAA,EAAAA,KAAA,CAAA,CAAA,GAAA0B,SAAA,CAAA;AACAV,EAAAA,SAAA,CAAA,MAAA,CAAA,GAAA,aAAA,CAAA;;;;;;;;;;;;;AAUF,CAnBA,CAAA;;AAqBA,MAAAL,MAAA,GAAA;QAAA,QAAA;sBAAA,UAAA;sBAAA,QAAA;oBAAA,QAAA;SAAA,UAAA;;AAAA,CAAA;;;;;;;"}