@oracle/oraclejet-preact 14.0.10 → 14.1.1

package/cjs/UNSAFE_MeterCircle/__tests__/MeterCircle.spec.js

@@ -0,0 +1,813 @@
+/* @oracle/oraclejet-preact: 14.1.1 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('@testing-library/preact');
+var chai = require('chai');
+var MeterCircle = require('../../MeterCircle-a572b681.js');
+var utils_UNSAFE_matchTranslationBundle = require('../../utils/UNSAFE_matchTranslationBundle.js');
+var UNSAFE_Environment = require('../../UNSAFE_Environment.js');
+var userEvent = require('@testing-library/user-event');
+require('../../utils/PRIVATE_clientHints.js');
+var clientHints = require('../../clientHints-5c8adda8.js');
+require('../../tslib.es6-337905dc.js');
+require('../../hooks/UNSAFE_useUser.js');
+require('preact/hooks');
+require('preact');
+require('../../UNSAFE_Layer.js');
+require('preact/compat');
+require("identity-obj-proxy");
+require('../../utils/UNSAFE_mergeProps.js');
+require('../../utils/UNSAFE_classNames.js');
+require('../../classNames-28108b7d.js');
+require('../../PRIVATE_Meter.js');
+require('../../utils/PRIVATE_meterUtils.js');
+require('../../utils/UNSAFE_dvtCommonUtils.js');
+require('../../hooks/PRIVATE_useDvtMeterEvents.js');
+require('../../hooks/UNSAFE_useTooltip.js');
+require('../../hooks/UNSAFE_useId.js');
+require('../../UNSAFE_Floating.js');
+require('../../Floating-939d2a3b.js');
+require('../../index-81333995.js');
+require('../../utils/PRIVATE_floatingUtils.js');
+require('../../utils/PRIVATE_refUtils.js');
+require('../../hooks/UNSAFE_useOutsideClick.js');
+require('../../utils/UNSAFE_arrayUtils.js');
+require('../../hooks/UNSAFE_useHover.js');
+require('../../hooks/UNSAFE_useToggle.js');
+require('../../hooks/UNSAFE_useFocus.js');
+require('../../hooks/UNSAFE_useTouch.js');
+require('../../hooks/UNSAFE_useAnimation.js');
+require('../../useAnimation-4166b248.js');
+require('../../hooks/UNSAFE_useTabbableMode.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var userEvent__default = /*#__PURE__*/_interopDefaultLegacy(userEvent);
+
+function __variableDynamicImportRuntime1__(path) {
+  switch (path) {
+    case '../../resources/nls/ar/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ar/bundle.js'); });
+    case '../../resources/nls/ar-XB/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ar-XB/bundle.js'); });
+    case '../../resources/nls/bg/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/bg/bundle.js'); });
+    case '../../resources/nls/bs/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/bs/bundle.js'); });
+    case '../../resources/nls/bs-Cyrl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/bs-Cyrl/bundle.js'); });
+    case '../../resources/nls/cs/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/cs/bundle.js'); });
+    case '../../resources/nls/da/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/da/bundle.js'); });
+    case '../../resources/nls/de/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/de/bundle.js'); });
+    case '../../resources/nls/el/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/el/bundle.js'); });
+    case '../../resources/nls/en/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/en/bundle.js'); });
+    case '../../resources/nls/en-XA/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/en-XA/bundle.js'); });
+    case '../../resources/nls/en-XC/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/en-XC/bundle.js'); });
+    case '../../resources/nls/es/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/es/bundle.js'); });
+    case '../../resources/nls/et/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/et/bundle.js'); });
+    case '../../resources/nls/fi/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/fi/bundle.js'); });
+    case '../../resources/nls/fr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/fr/bundle.js'); });
+    case '../../resources/nls/fr-CA/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/fr-CA/bundle.js'); });
+    case '../../resources/nls/he/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/he/bundle.js'); });
+    case '../../resources/nls/hr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/hr/bundle.js'); });
+    case '../../resources/nls/hu/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/hu/bundle.js'); });
+    case '../../resources/nls/is/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/is/bundle.js'); });
+    case '../../resources/nls/it/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/it/bundle.js'); });
+    case '../../resources/nls/ja/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ja/bundle.js'); });
+    case '../../resources/nls/ko/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ko/bundle.js'); });
+    case '../../resources/nls/lt/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/lt/bundle.js'); });
+    case '../../resources/nls/lv/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/lv/bundle.js'); });
+    case '../../resources/nls/ms/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ms/bundle.js'); });
+    case '../../resources/nls/nl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/nl/bundle.js'); });
+    case '../../resources/nls/no/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/no/bundle.js'); });
+    case '../../resources/nls/pl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/pl/bundle.js'); });
+    case '../../resources/nls/pt/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/pt/bundle.js'); });
+    case '../../resources/nls/pt-PT/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/pt-PT/bundle.js'); });
+    case '../../resources/nls/ro/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ro/bundle.js'); });
+    case '../../resources/nls/ru/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ru/bundle.js'); });
+    case '../../resources/nls/sk/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sk/bundle.js'); });
+    case '../../resources/nls/sl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sl/bundle.js'); });
+    case '../../resources/nls/sr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sr/bundle.js'); });
+    case '../../resources/nls/sr-Latn/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sr-Latn/bundle.js'); });
+    case '../../resources/nls/sv/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sv/bundle.js'); });
+    case '../../resources/nls/th/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/th/bundle.js'); });
+    case '../../resources/nls/tr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/tr/bundle.js'); });
+    case '../../resources/nls/uk/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/uk/bundle.js'); });
+    case '../../resources/nls/vi/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/vi/bundle.js'); });
+    case '../../resources/nls/zh-Hans/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/zh-Hans/bundle.js'); });
+    case '../../resources/nls/zh-Hant/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/zh-Hant/bundle.js'); });
+    default: return new Promise(function(resolve, reject) {
+      (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
+        reject.bind(null, new Error("Unknown variable dynamic import: " + path))
+      );
+    })
+   }
+ }
+
+function __variableDynamicImportRuntime0__(path) {
+  switch (path) {
+    case '../../resources/nls/ar/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ar/bundle.js'); });
+    case '../../resources/nls/ar-XB/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ar-XB/bundle.js'); });
+    case '../../resources/nls/bg/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/bg/bundle.js'); });
+    case '../../resources/nls/bs/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/bs/bundle.js'); });
+    case '../../resources/nls/bs-Cyrl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/bs-Cyrl/bundle.js'); });
+    case '../../resources/nls/cs/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/cs/bundle.js'); });
+    case '../../resources/nls/da/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/da/bundle.js'); });
+    case '../../resources/nls/de/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/de/bundle.js'); });
+    case '../../resources/nls/el/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/el/bundle.js'); });
+    case '../../resources/nls/en/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/en/bundle.js'); });
+    case '../../resources/nls/en-XA/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/en-XA/bundle.js'); });
+    case '../../resources/nls/en-XC/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/en-XC/bundle.js'); });
+    case '../../resources/nls/es/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/es/bundle.js'); });
+    case '../../resources/nls/et/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/et/bundle.js'); });
+    case '../../resources/nls/fi/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/fi/bundle.js'); });
+    case '../../resources/nls/fr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/fr/bundle.js'); });
+    case '../../resources/nls/fr-CA/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/fr-CA/bundle.js'); });
+    case '../../resources/nls/he/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/he/bundle.js'); });
+    case '../../resources/nls/hr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/hr/bundle.js'); });
+    case '../../resources/nls/hu/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/hu/bundle.js'); });
+    case '../../resources/nls/is/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/is/bundle.js'); });
+    case '../../resources/nls/it/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/it/bundle.js'); });
+    case '../../resources/nls/ja/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ja/bundle.js'); });
+    case '../../resources/nls/ko/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ko/bundle.js'); });
+    case '../../resources/nls/lt/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/lt/bundle.js'); });
+    case '../../resources/nls/lv/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/lv/bundle.js'); });
+    case '../../resources/nls/ms/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ms/bundle.js'); });
+    case '../../resources/nls/nl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/nl/bundle.js'); });
+    case '../../resources/nls/no/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/no/bundle.js'); });
+    case '../../resources/nls/pl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/pl/bundle.js'); });
+    case '../../resources/nls/pt/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/pt/bundle.js'); });
+    case '../../resources/nls/pt-PT/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/pt-PT/bundle.js'); });
+    case '../../resources/nls/ro/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ro/bundle.js'); });
+    case '../../resources/nls/ru/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/ru/bundle.js'); });
+    case '../../resources/nls/sk/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sk/bundle.js'); });
+    case '../../resources/nls/sl/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sl/bundle.js'); });
+    case '../../resources/nls/sr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sr/bundle.js'); });
+    case '../../resources/nls/sr-Latn/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sr-Latn/bundle.js'); });
+    case '../../resources/nls/sv/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/sv/bundle.js'); });
+    case '../../resources/nls/th/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/th/bundle.js'); });
+    case '../../resources/nls/tr/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/tr/bundle.js'); });
+    case '../../resources/nls/uk/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/uk/bundle.js'); });
+    case '../../resources/nls/vi/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/vi/bundle.js'); });
+    case '../../resources/nls/zh-Hans/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/zh-Hans/bundle.js'); });
+    case '../../resources/nls/zh-Hant/bundle.ts': return Promise.resolve().then(function () { return require('../../resources/nls/zh-Hant/bundle.js'); });
+    default: return new Promise(function(resolve, reject) {
+      (typeof queueMicrotask === 'function' ? queueMicrotask : setTimeout)(
+        reject.bind(null, new Error("Unknown variable dynamic import: " + path))
+      );
+    })
+   }
+ }
+const DATATIP_TEST_TIMEOUT = 3000;
+const DATATIP_TEXT = 'datatip_text';
+describe('Test MeterCircle component', () => {
+    it('render', async function () {
+        const locale = utils_UNSAFE_matchTranslationBundle.matchTranslationBundle(['en'], new Set(['en-US', 'en']));
+        const { default: translations } = await __variableDynamicImportRuntime0__(`../../resources/nls/${locale}/bundle.ts`);
+        const env = {
+            translations: { '@oracle/oraclejet-preact': translations }
+        };
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, min: 0, max: 100, accessibleLabel: "ariaText" }) })));
+        const initials = await content.getAllByLabelText('ariaText');
+        chai.expect(initials).not.null;
+    });
+    it('applies Linaria CSS classes', async () => {
+        const locale = utils_UNSAFE_matchTranslationBundle.matchTranslationBundle(['en'], new Set(['en-US', 'en']));
+        const { default: translations } = await __variableDynamicImportRuntime1__(`../../resources/nls/${locale}/bundle.ts`);
+        const env = {
+            translations: { '@oracle/oraclejet-preact': translations }
+        };
+        const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, min: 0, max: 100 }) })));
+        const firstElement = content.container.firstElementChild;
+        // @ts-ignore
+        const classList = firstElement.classList;
+        chai.expect(classList.length).equals(1);
+    });
+});
+describe('Test Meter Circle ARIA props', () => {
+    it('Test default aria properties of Meter Circle', async function () {
+        const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20 }));
+        const firstElement = content.container.firstElementChild;
+        chai.expect(firstElement.getAttribute('aria-valuemax')).equals('100');
+        chai.expect(firstElement.getAttribute('aria-valuenow')).equals('20');
+        chai.expect(firstElement.getAttribute('aria-valuemin')).equals('0');
+        chai.expect(firstElement.getAttribute('aria-valuetext')).equals('20 ');
+        chai.expect(firstElement.getAttribute('aria-describedby')).not.null;
+        chai.expect(firstElement.getAttribute('aria-labelledby')).null;
+        chai.expect(firstElement.getAttribute('aria-label')).null;
+    });
+    it('Test value, role, min and max property of Meter Circle', async function () {
+        const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 100, max: 150, min: 50 }));
+        const firstElement = content.container.firstElementChild;
+        chai.expect(firstElement.getAttribute('role')).equals('slider');
+        chai.expect(firstElement.getAttribute('aria-valuemax')).equals('150');
+        chai.expect(firstElement.getAttribute('aria-valuenow')).equals('100');
+        chai.expect(firstElement.getAttribute('aria-valuemin')).equals('50');
+        chai.expect(firstElement.getAttribute('aria-valuetext')).equals('100 ');
+    });
+    it('Test accessiblelabel property of Meter Circle', async function () {
+        const testAccessibleLabel = 'TEST-ACCESSIBLE-LABEL';
+        const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, accessibleLabel: testAccessibleLabel }));
+        const firstElement = content.container.firstElementChild;
+        chai.expect(firstElement.getAttribute('aria-label')).equals(testAccessibleLabel);
+    });
+    it('Test describedBy attribute of Meter Circle', async function () {
+        const testAriaDescribedBy = 'TEST ARIA-DESCRIBED-BY';
+        const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, ariaDescribedBy: testAriaDescribedBy }));
+        const firstElement = content.container.firstElementChild;
+        const meterDescribedBy = firstElement.getAttribute('aria-describedby');
+        const describedByIds = meterDescribedBy === null || meterDescribedBy === void 0 ? void 0 : meterDescribedBy.split(' ');
+        chai.expect(describedByIds === null || describedByIds === void 0 ? void 0 : describedByIds.length).equals(3); // including aria describedby for default datatip
+        chai.expect(describedByIds ? describedByIds[0] : '').equals('TEST');
+        chai.expect(describedByIds ? describedByIds[1] : '').equals('ARIA-DESCRIBED-BY');
+    });
+    it('Test labelledby attribute of Meter Circle', async function () {
+        const testAriaLabeledBy = 'TEST ARIA-LABELLED-BY';
+        const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, ariaLabelledBy: testAriaLabeledBy }));
+        const firstElement = content.container.firstElementChild;
+        chai.expect(firstElement.getAttribute('aria-labelledby')).equals(testAriaLabeledBy);
+    });
+});
+describe('Test "Size" property of Meter Circle ', () => {
+    if (typeof jest === 'undefined') {
+        it('Test default size', async function () {
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 5 }));
+            const firstElement = content.container.firstElementChild;
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('height'), 'Default size is correct').to.be.equal('196px');
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('width'), 'Default size is correct').to.be.equal('196px');
+        });
+        it('Test "size = large"', async function () {
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 5, size: "lg" }));
+            const firstElement = content.container.firstElementChild;
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('height'), 'Large size is correct').to.be.equal('196px');
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('width'), 'Large size is correct').to.be.equal('196px');
+        });
+        it('Test "size = medium"', async function () {
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, size: "md" }));
+            const firstElement = content.container.firstElementChild;
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('height'), 'Medium size is correct').to.be.equal('96px');
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('width'), 'Medium size is correct').to.be.equal('96px');
+        });
+        it('Test "size = small"', async function () {
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, size: "sm" }));
+            const firstElement = content.container.firstElementChild;
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('height'), 'Small size is correct').to.be.equal('56px');
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('height'), 'Small size is correct').to.be.equal('56px');
+        });
+    }
+});
+describe('Test "Track"  attribute of Meter Circle ', () => {
+    if (typeof jest === 'undefined') {
+        it('Test default track of Meter Circle', async function () {
+            var _a, _b;
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20 }));
+            const firstElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.firstElementChild;
+            chai.expect(firstElement.style.backgroundColor).equals('');
+        });
+        it('Test Track not present in Meter Circle when isTrackRendered is set to false', async function () {
+            var _a, _b;
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, isTrackRendered: false, trackColor: "red" }));
+            const firstElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.firstElementChild;
+            chai.expect(firstElement.style.borderColor).equals('transparent');
+        });
+        it('Test isTrackRendered and traclColor attribute with value as true in Meter Circle', async function () {
+            var _a, _b;
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, isTrackRendered: true, trackColor: 'red' }));
+            const firstElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.firstElementChild;
+            chai.expect(firstElement.style.borderColor).equals('red');
+        });
+    }
+});
+describe('Test "indicatorSize" and indicatorColor attribute of Meter Circle ', () => {
+    if (typeof jest === 'undefined') {
+        it('Test default indicatorSize of Meter Circle', async function () {
+            var _a, _b;
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20 }));
+            const firstElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[1];
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('height'), 'height').to.be.equal('196px');
+        });
+        it('Test indicatorSize of Meter Circle', async function () {
+            var _a, _b;
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, indicatorSize: 0.5 }));
+            const firstElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[1];
+            chai.expect(firstElement.style.height).contains('0.5');
+        });
+        it('Test default indicatorColor of Meter Circle', async function () {
+            var _a, _b;
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20 }));
+            const firstElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[1];
+            chai.expect(firstElement.style.borderColor).equals('');
+        });
+        it('Test indicatorColor of Meter Circle', async function () {
+            var _a, _b;
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, indicatorColor: 'red' }));
+            const firstElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[1];
+            chai.expect(firstElement.style.borderColor).equals('red');
+        });
+    }
+});
+describe('Test angleExtent,startAngle, center content, innerBound and OuterBound property of Meter Circle ', () => {
+    if (typeof jest === 'undefined') {
+        it('Test for Right Half semi Meter Circle ', async function () {
+            var _a, _b;
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 12, angleExtent: 180 }));
+            const firstElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.firstElementChild;
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('height'), 'Height of semi circle').to.be.equal('196px');
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('width'), 'Width of semi circle').to.be.equal('98px');
+        });
+        it('Test for Top Half semi Meter Circle ', async function () {
+            var _a;
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 12, angleExtent: 180, startAngle: 180 }));
+            const firstElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('height'), 'Height of semi circle').to.be.equal('98px');
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('width'), 'Width of semi circle').to.be.equal('196px');
+        });
+        it('Test for Bottom Half semi Meter Circle ', async function () {
+            var _a;
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 12, angleExtent: 180, startAngle: 0 }));
+            const firstElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('height'), 'Height of semi circle').to.be.equal('98px');
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('width'), 'Width of semi circle').to.be.equal('196px');
+        });
+        it('Test for Left Half semi Meter Circle ', async function () {
+            var _a;
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 12, angleExtent: 180, startAngle: 270 }));
+            const firstElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('height'), 'Height of semi circle').to.be.equal('196px');
+            chai.expect(window.getComputedStyle(firstElement).getPropertyValue('width'), 'Width of semi circle').to.be.equal('98px');
+        });
+        it('Test Center content', async function () {
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, Object.assign({ value: 20 }, { children: () => {
+                    return jsxRuntime.jsx("div", { children: "Sales in USD" });
+                } })));
+            const centerText = await content.findByText('Sales in USD');
+            chai.expect(centerText).not.null;
+        });
+        it('Test inner and outer bounds', async function () {
+            var _a, _b;
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, Object.assign({ value: 20 }, { children: (context) => {
+                    return (jsxRuntime.jsx("div", Object.assign({ id: "centerContentDiv", "data-iBx": context.innerBounds.x, "data-iBy": context.innerBounds.y, "data-oBx": context.outerBounds.x, "data-oBy": context.outerBounds.y }, { children: jsxRuntime.jsx("div", { children: "Sales in USD" }) })));
+                } })));
+            const centerContent = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[2].firstChild;
+            chai.expect(Number(centerContent.dataset['ibx'])).closeTo(37, 1);
+            chai.expect(Number(centerContent.dataset['iby'])).closeTo(37, 1);
+            chai.expect(centerContent.dataset['obx']).equals('12');
+            chai.expect(centerContent.dataset['oby']).equals('12');
+        });
+    }
+});
+if (typeof jest === 'undefined') {
+    describe('Test to check the rendering of reference lines', () => {
+        it('Multiple Reference Line to check reference line color value', async () => {
+            var _a, _b, _c, _d;
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 10, referenceLines: [
+                    {
+                        value: 40,
+                        color: '#3A6E96'
+                    },
+                    {
+                        value: 50,
+                        color: '#3A6E96'
+                    },
+                    {
+                        value: 70,
+                        color: 'red'
+                    },
+                    {
+                        value: 60
+                    }
+                ] }));
+            const innerElement4 = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[4];
+            chai.expect(innerElement4.style.backgroundColor).equals('red');
+            const innerElement5 = (_d = (_c = content.container.firstElementChild) === null || _c === void 0 ? void 0 : _c.firstElementChild) === null || _d === void 0 ? void 0 : _d.childNodes[5];
+            chai.expect(innerElement5.style.backgroundColor).equals('var(--oj-c-PRIVATE-DO-NOT-USE-dvt-reference-object-line-color)');
+            chai.expect(innerElement5.style.borderBottom).equals('1px solid var(--oj-c-PRIVATE-DO-NOT-USE-dvt-contrast-line-color)');
+        });
+        it('Multiple Reference Line to check reference line color enums', async () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 10, referenceLines: [
+                    {
+                        value: 40,
+                        color: 'danger'
+                    },
+                    {
+                        value: 50,
+                        color: 'warning'
+                    },
+                    {
+                        value: 70,
+                        color: 'success'
+                    },
+                    {
+                        value: 60
+                    }
+                ] }));
+            const innerElement2 = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[2];
+            chai.expect(innerElement2.style.backgroundColor).equals('var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-danger)');
+            const innerElement3 = (_d = (_c = content.container.firstElementChild) === null || _c === void 0 ? void 0 : _c.firstElementChild) === null || _d === void 0 ? void 0 : _d.childNodes[3];
+            chai.expect(innerElement3.style.backgroundColor).equals('var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-warning)');
+            const innerElement4 = (_f = (_e = content.container.firstElementChild) === null || _e === void 0 ? void 0 : _e.firstElementChild) === null || _f === void 0 ? void 0 : _f.childNodes[4];
+            chai.expect(innerElement4.style.backgroundColor).equals('var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-success)');
+            const innerElement5 = (_h = (_g = content.container.firstElementChild) === null || _g === void 0 ? void 0 : _g.firstElementChild) === null || _h === void 0 ? void 0 : _h.childNodes[5];
+            chai.expect(innerElement5.style.backgroundColor).equals('var(--oj-c-PRIVATE-DO-NOT-USE-dvt-reference-object-line-color)');
+            chai.expect(innerElement5.style.borderBottom).equals('1px solid var(--oj-c-PRIVATE-DO-NOT-USE-dvt-contrast-line-color)');
+        });
+        it('Reference Line', async () => {
+            var _a, _b;
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 10, referenceLines: [
+                    {
+                        value: 40,
+                        color: '#3A6E96'
+                    }
+                ] }));
+            const innerElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[1];
+            chai.expect(innerElement.classList.length).equals(3);
+        });
+    });
+    describe('Test Threshold attribute of Meter Circle ', () => {
+        it('Test threshold color enums in Meter Circle when thresholdDisplay is set to all', async function () {
+            var _a, _b, _c, _d, _e, _f;
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, thresholdDisplay: "all", thresholds: [
+                    {
+                        max: 33,
+                        color: 'danger'
+                    },
+                    {
+                        max: 65,
+                        color: 'warning'
+                    },
+                    {
+                        max: 100,
+                        color: 'success'
+                    }
+                ] }));
+            const firstElementSecondChild = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[1];
+            chai.expect(firstElementSecondChild.style.borderColor).equals('var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-danger)');
+            const firstElementThirdChild = (_d = (_c = content.container.firstElementChild) === null || _c === void 0 ? void 0 : _c.firstElementChild) === null || _d === void 0 ? void 0 : _d.childNodes[2];
+            chai.expect(firstElementThirdChild.style.borderColor).equals('var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-warning)');
+            const firstElementFourthChild = (_f = (_e = content.container.firstElementChild) === null || _e === void 0 ? void 0 : _e.firstElementChild) === null || _f === void 0 ? void 0 : _f.childNodes[3];
+            chai.expect(firstElementFourthChild.style.borderColor).equals('var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-success)');
+        });
+        it('Test threshold color enums in Meter Circle when thresholdDisplay is set to track', async function () {
+            var _a, _b;
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, thresholdDisplay: "track", thresholds: [
+                    {
+                        max: 33,
+                        color: 'danger'
+                    },
+                    {
+                        max: 65,
+                        color: 'warning'
+                    },
+                    {
+                        max: 100,
+                        color: 'success'
+                    }
+                ] }));
+            const firstElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[0];
+            chai.expect(firstElement.style.borderColor).equals('var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-danger)');
+        });
+        it('Test threshold color enums in Meter Circle when thresholdDisplay is set to indicator', async function () {
+            var _a, _b;
+            const content = preact.render(jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, thresholdDisplay: "indicator", thresholds: [
+                    {
+                        max: 33,
+                        color: 'danger'
+                    },
+                    {
+                        max: 65,
+                        color: 'warning'
+                    },
+                    {
+                        max: 100,
+                        color: 'success'
+                    }
+                ] }));
+            const firstElement = (_b = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.childNodes[1];
+            chai.expect(firstElement.style.borderColor).equals('var(--oj-c-PRIVATE-DO-NOT-USE-dvt-threshold-danger)');
+        });
+    });
+}
+describe('Mouse Interaction', () => {
+    const clientHints$1 = clientHints.getClientHints();
+    if (typeof jest === 'undefined' && clientHints$1.browser === 'chrome') {
+        mocha.timeout(DATATIP_TEST_TIMEOUT);
+        it('check default datatip correctly triggered with mouse interaction', async () => {
+            var _a;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 30 }) }));
+            const MeterCircleElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            userEvent__default["default"].hover(MeterCircleElement);
+            await preact.waitFor(() => checkDatatipText('30'), {
+                timeout: DATATIP_TEST_TIMEOUT
+            });
+        }, DATATIP_TEST_TIMEOUT);
+        it('check datatip correctly triggered with mouse interaction', async () => {
+            var _a;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 30, datatip: DATATIP_TEXT }) }));
+            const MeterCircleElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            userEvent__default["default"].hover(MeterCircleElement);
+            await preact.waitFor(() => checkDatatipText(DATATIP_TEXT), {
+                timeout: DATATIP_TEST_TIMEOUT
+            });
+        }, DATATIP_TEST_TIMEOUT);
+        it('check datatip when set to null, correctly triggered with mouse interaction', async () => {
+            var _a;
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 30, datatip: null }) }));
+            const MeterCircleElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            userEvent__default["default"].hover(MeterCircleElement);
+            await preact.waitFor(() => {
+                const targetElements = document.querySelectorAll('[role="tooltip"]');
+                chai.expect(targetElements.length).equals(0);
+            }, {
+                timeout: DATATIP_TEST_TIMEOUT
+            });
+        });
+        it('check onCommit event is correctly triggered with mouse interaction', async () => {
+            var _a;
+            const clickListenerObj = { clicked: false };
+            const handleOnCommit = (detail) => {
+                if (detail.value != null)
+                    clickListenerObj.clicked = true;
+            };
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, onCommit: handleOnCommit }) }));
+            const MeterCircleElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            preact.fireEvent.pointerUp(MeterCircleElement);
+            await preact.waitFor(() => chai.expect(clickListenerObj.clicked).equals(true));
+        });
+        // it('check onInput event is correctly triggered with mouse interaction', async () => {
+        //   const clickListenerObj = { clicked: false };
+        //   const handleOnInput = (detail: any) => {
+        //     if (detail.value != null) clickListenerObj.clicked = true;
+        //   };
+        //   const content = render(
+        //     <RootEnvironmentProvider>
+        //       <MeterCircle value={20} onInput={handleOnInput} />
+        //     </RootEnvironmentProvider>
+        //   );
+        //   const MeterCircleElement = content.container.firstElementChild
+        //     ?.firstElementChild as HTMLElement;
+        //   fireEvent.pointerDown(MeterCircleElement);
+        //   await waitFor(() => expect(clickListenerObj.clicked).equals(true));
+        // });
+    }
+});
+describe('Mouse Interaction in RTL mode', () => {
+    const clientHints$1 = clientHints.getClientHints();
+    if (typeof jest === 'undefined' && clientHints$1.browser === 'chrome') {
+        mocha.timeout(DATATIP_TEST_TIMEOUT);
+        it('check default datatip correctly triggered with mouse interaction', async () => {
+            var _a;
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 30 }) })));
+            const MeterCircleElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            userEvent__default["default"].hover(MeterCircleElement);
+            await preact.waitFor(() => checkDatatipText('30'), {
+                timeout: DATATIP_TEST_TIMEOUT
+            });
+        }, DATATIP_TEST_TIMEOUT);
+        it('check datatip correctly triggered with mouse interaction', async () => {
+            var _a;
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 30, datatip: DATATIP_TEXT }) })));
+            const MeterCircleElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            userEvent__default["default"].hover(MeterCircleElement);
+            await preact.waitFor(() => checkDatatipText(DATATIP_TEXT), {
+                timeout: DATATIP_TEST_TIMEOUT
+            });
+        }, DATATIP_TEST_TIMEOUT);
+        it('check datatip when set to null, correctly triggered with mouse interaction', async () => {
+            var _a;
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 30, datatip: null }) })));
+            const MeterCircleElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            userEvent__default["default"].hover(MeterCircleElement);
+            await preact.waitFor(() => {
+                const targetElements = document.querySelectorAll('[role="tooltip"]');
+                chai.expect(targetElements.length).equals(0);
+            }, {
+                timeout: DATATIP_TEST_TIMEOUT
+            });
+        });
+        it('check onCommit event is correctly triggered with mouse interaction', async () => {
+            var _a;
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            const clickListenerObj = { clicked: false };
+            const handleOnCommit = (detail) => {
+                if (detail.value != null)
+                    clickListenerObj.clicked = true;
+            };
+            const content = preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, onCommit: handleOnCommit }) })));
+            const MeterCircleElement = (_a = content.container.firstElementChild) === null || _a === void 0 ? void 0 : _a.firstElementChild;
+            preact.fireEvent.pointerUp(MeterCircleElement);
+            await preact.waitFor(() => chai.expect(clickListenerObj.clicked).equals(true));
+        });
+        // it('check onInput event is correctly triggered with mouse interaction', async () => {
+        //   const env: Partial<RootEnvironment> = {
+        //     user: { direction: 'rtl' }
+        //   };
+        //   const clickListenerObj = { clicked: false };
+        //   const handleOnInput = (detail: any) => {
+        //     if (detail.value != null) clickListenerObj.clicked = true;
+        //   };
+        //   const content = render(
+        //     <RootEnvironmentProvider environment={env}>
+        //       <MeterCircle value={20} onInput={handleOnInput} />
+        //     </RootEnvironmentProvider>
+        //   );
+        //   const MeterCircleElement = content.container.firstElementChild
+        //     ?.firstElementChild as HTMLElement;
+        //   fireEvent.pointerDown(MeterCircleElement);
+        //   await waitFor(() => expect(clickListenerObj.clicked).equals(true));
+        // });
+    }
+});
+describe('Keyboard Interaction', () => {
+    const clientHints$1 = clientHints.getClientHints();
+    if (typeof jest === 'undefined' && clientHints$1.browser === 'chrome') {
+        mocha.timeout(DATATIP_TEST_TIMEOUT);
+        it('check default datatip correctly triggered with keyboard interaction', async () => {
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 30 }) }));
+            userEvent__default["default"].tab();
+            await preact.waitFor(() => checkDatatipText('30'), {
+                timeout: DATATIP_TEST_TIMEOUT
+            });
+        }, DATATIP_TEST_TIMEOUT);
+        it('check datatip correctly triggered with keyboard interaction', async () => {
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 30, datatip: DATATIP_TEXT }) }));
+            userEvent__default["default"].tab();
+            await preact.waitFor(() => checkDatatipText(DATATIP_TEXT), {
+                timeout: DATATIP_TEST_TIMEOUT
+            });
+        }, DATATIP_TEST_TIMEOUT);
+        it('check onInput event is correctly triggered with keyboard interaction', async () => {
+            const calledListenerObj = { called: false };
+            const handleOnInput = (detail) => {
+                if (detail.value != null)
+                    calledListenerObj.called = true;
+            };
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, onInput: handleOnInput }) }));
+            userEvent__default["default"].tab();
+            await preact.waitFor(() => chai.expect(calledListenerObj.called).equals(true));
+        });
+        it('check onInput is correctly triggered with HOME key by keyboard interaction ', async () => {
+            let inputValue = 2;
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: inputValue, onInput: (detail) => {
+                        inputValue = detail.value;
+                    } }) }));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[HOME]');
+            await preact.waitFor(() => chai.expect(inputValue).equals(0));
+        });
+        it('check onInput is correctly triggered with END key by keyboard interaction ', async () => {
+            let inputValue = 2;
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: inputValue, onInput: (detail) => {
+                        inputValue = detail.value;
+                    } }) }));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[END]');
+            await preact.waitFor(() => chai.expect(inputValue).equals(100));
+        });
+        it('check onCommit event is correctly triggered with keyboard interaction', async () => {
+            const calledListenerObj = { called: false };
+            const handleOnCommit = (detail) => {
+                if (detail.value != null)
+                    calledListenerObj.called = true;
+            };
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, onCommit: handleOnCommit }) }));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[ENTER]');
+            await preact.waitFor(() => chai.expect(calledListenerObj.called).equals(true));
+        });
+        it('check step is correctly triggered using down arrow key with keyboard interaction', async () => {
+            let inputValue = 2;
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { step: 0.5, value: inputValue, onInput: (detail) => {
+                        inputValue = detail.value;
+                    } }) }));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[ARROWDOWN]');
+            await preact.waitFor(() => chai.expect(inputValue).equals(1.5));
+        });
+        it('check step is correctly triggered using right arrow key with keyboard interaction', async () => {
+            let inputValue = 2;
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { step: 0.5, value: inputValue, onInput: (detail) => {
+                        inputValue = detail.value;
+                    } }) }));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[ARROWRIGHT]');
+            await preact.waitFor(() => chai.expect(inputValue).equals(2.5));
+        });
+        it('check step is correctly triggered using up arrow key with keyboard interaction', async () => {
+            let inputValue = 2;
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { step: 0.5, value: inputValue, onInput: (detail) => {
+                        inputValue = detail.value;
+                    } }) }));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[ARROWUP]');
+            await preact.waitFor(() => chai.expect(inputValue).equals(2.5));
+        });
+        it('check step is correctly triggered using left arrow key with keyboard interaction', async () => {
+            let inputValue = 2;
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { step: 0.5, value: inputValue, onInput: (detail) => {
+                        inputValue = detail.value;
+                    } }) }));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[ARROWLEFT]');
+            await preact.waitFor(() => chai.expect(inputValue).equals(1.5));
+        });
+    }
+});
+describe('Keyboard Interaction in RTL mode', () => {
+    const clientHints$1 = clientHints.getClientHints();
+    if (typeof jest === 'undefined' && clientHints$1.browser === 'chrome') {
+        mocha.timeout(DATATIP_TEST_TIMEOUT);
+        it('check default datatip correctly triggered with keyboard interaction', async () => {
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 30 }) })));
+            userEvent__default["default"].tab();
+            await preact.waitFor(() => checkDatatipText('30'), {
+                timeout: DATATIP_TEST_TIMEOUT
+            });
+        }, DATATIP_TEST_TIMEOUT);
+        it('check datatip correctly triggered with keyboard interaction', async () => {
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 30, datatip: DATATIP_TEXT }) })));
+            userEvent__default["default"].tab();
+            await preact.waitFor(() => checkDatatipText(DATATIP_TEXT), {
+                timeout: DATATIP_TEST_TIMEOUT
+            });
+        }, DATATIP_TEST_TIMEOUT);
+        it('check onInput event is correctly triggered with keyboard interaction', async () => {
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            const calledListenerObj = { called: false };
+            const handleOnInput = (detail) => {
+                if (detail.value != null)
+                    calledListenerObj.called = true;
+            };
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, onInput: handleOnInput }) })));
+            userEvent__default["default"].tab();
+            await preact.waitFor(() => chai.expect(calledListenerObj.called).equals(true));
+        });
+        it('check onInput is correctly triggered with HOME key by keyboard interaction ', async () => {
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            let inputValue = 2;
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: inputValue, onInput: (detail) => {
+                        inputValue = detail.value;
+                    } }) })));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[HOME]');
+            await preact.waitFor(() => chai.expect(inputValue).equals(0));
+        });
+        it('check onInput is correctly triggered with END key by keyboard interaction ', async () => {
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            let inputValue = 2;
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: inputValue, onInput: (detail) => {
+                        inputValue = detail.value;
+                    } }) })));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[END]');
+            await preact.waitFor(() => chai.expect(inputValue).equals(100));
+        });
+        it('check onCommit event is correctly triggered with keyboard interaction', async () => {
+            const env = {
+                user: { direction: 'rtl' }
+            };
+            const calledListenerObj = { called: false };
+            const handleOnCommit = (detail) => {
+                if (detail.value != null)
+                    calledListenerObj.called = true;
+            };
+            preact.render(jsxRuntime.jsx(UNSAFE_Environment.RootEnvironmentProvider, Object.assign({ environment: env }, { children: jsxRuntime.jsx(MeterCircle.MeterCircle, { value: 20, onCommit: handleOnCommit }) })));
+            userEvent__default["default"].tab();
+            userEvent__default["default"].keyboard('[ENTER]');
+            await preact.waitFor(() => chai.expect(calledListenerObj.called).equals(true));
+        });
+    }
+});
+const checkDatatipText = (content) => {
+    var _a;
+    const targetElements = document.querySelectorAll('[role="tooltip"]');
+    const targetElementItem = targetElements.item(0);
+    const tooltipContainer = targetElementItem === null || targetElementItem === void 0 ? void 0 : targetElementItem.firstElementChild;
+    chai.expect(tooltipContainer === null || tooltipContainer === void 0 ? void 0 : tooltipContainer.style.opacity).not.equals('');
+    chai.expect(tooltipContainer === null || tooltipContainer === void 0 ? void 0 : tooltipContainer.style.opacity).not.equals('0');
+    chai.expect(tooltipContainer === null || tooltipContainer === void 0 ? void 0 : tooltipContainer.style.maxHeight).not.equals('');
+    chai.expect(tooltipContainer === null || tooltipContainer === void 0 ? void 0 : tooltipContainer.style.maxHeight).not.equals('0');
+    const innerHTML = (_a = tooltipContainer === null || tooltipContainer === void 0 ? void 0 : tooltipContainer.firstElementChild) === null || _a === void 0 ? void 0 : _a.innerHTML;
+    chai.expect(innerHTML).equals(content);
+};
+/*  */
+//# sourceMappingURL=MeterCircle.spec.js.map