style: add files extensions to internal import paths

Refinitiv · Jun 23, 2022 · 7514710 · 7514710
1 parent 3458218
commit 7514710
Show file tree

Hide file tree

Showing 32 changed files with 42 additions and 165 deletions.
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -43,14 +43,14 @@ export { DeprecationNotice } from './notices/DeprecationNotice.js';
  * Export events
  */
 export { TapEvent } from './events/TapEvent.js';
-export type { FocusedChangedEvent } from './types/events';
+export type { FocusedChangedEvent } from './types/events.js';
 
 /**
  * Export common interfaces
  */
-export type { MultiValue } from './interfaces/MultiValue';
-export type { StyleMap } from './interfaces/StyleMap';
-export type { StyleInfo } from './interfaces/StyleInfo';
+export type { MultiValue } from './interfaces/MultiValue.js';
+export type { StyleMap } from './interfaces/StyleMap.js';
+export type { StyleInfo } from './interfaces/StyleInfo.js';
 
 /**
  * Export useful utils

diff --git a/packages/elements/src/autosuggest/helpers/renderer.ts b/packages/elements/src/autosuggest/helpers/renderer.ts
@@ -1,6 +1,6 @@
 import { uuid } from '@refinitiv-ui/utils/uuid.js';
 import { updateElementContent } from './utils.js';
-import { AutosuggestQuery, AutosuggestRenderer, Suggestion, AutosuggestItem } from './types';
+import { AutosuggestQuery, AutosuggestRenderer, Suggestion, AutosuggestItem } from './types.js';
 
 /**
  * Build item element from data object

diff --git a/packages/elements/src/autosuggest/helpers/utils.ts b/packages/elements/src/autosuggest/helpers/utils.ts
@@ -1,5 +1,5 @@
 import type { Item } from '../../item';
-import { AutosuggestHighlightable, AutosuggestItem } from './types';
+import { AutosuggestHighlightable, AutosuggestItem } from './types.js';
 
 /**
  * Check whether item can be highlighted

diff --git a/packages/elements/src/autosuggest/index.ts b/packages/elements/src/autosuggest/index.ts
@@ -19,7 +19,7 @@ import {
   TranslateDirective,
   TranslatePropertyKey
 } from '@refinitiv-ui/translate';
-import { TapEvent } from '../events';
+import { TapEvent } from '../events.js';
 import type {
   AutosuggestTargetElement,
   AutosuggestHighlightable,
@@ -55,7 +55,7 @@ export type {
   SuggestionsClearRequestedEvent,
   SuggestionsQueryEvent,
   SuggestionsChangedEvent
-} from './helpers/types';
+} from './helpers/types.js';
 export { updateElementContent } from './helpers/utils.js';
 export {
   itemHighlightable,

diff --git a/packages/elements/src/calendar/index.ts b/packages/elements/src/calendar/index.ts
@@ -80,7 +80,7 @@ import {
   DateButtonElement,
   NavigationDirection,
   WeekdayName
-} from './types';
+} from './types.js';
 import type { TapEvent } from '../events';
 import type { Button } from '../button';
 import './locales.js';

diff --git a/packages/elements/src/combo-box/index.ts b/packages/elements/src/combo-box/index.ts
@@ -22,8 +22,8 @@ import { CollectionComposer, DataItem } from '@refinitiv-ui/utils/collection.js'
 import { AnimationTaskRunner, TimeoutTaskRunner } from '@refinitiv-ui/utils/async.js';
 import { registerOverflowTooltip } from '../tooltip/index.js';
 import { isElementOverflown } from '@refinitiv-ui/utils/element.js';
-import { ItemData } from '../item';
-import { ComboBoxData, ComboBoxFilter } from './helpers/types';
+import { ItemData } from '../item/index.js';
+import { ComboBoxData, ComboBoxFilter } from './helpers/types.js';
 import type { List } from '../list/index.js';
 import { ComboBoxRenderer } from './helpers/renderer.js';
 import { defaultFilter } from './helpers/filter.js';

diff --git a/packages/elements/src/datetime-field/index.ts b/packages/elements/src/datetime-field/index.ts
@@ -30,7 +30,7 @@ import {
   NavigationKeys,
   DateTimeFormatPart,
   InputSelection
-} from './types';
+} from './types.js';
 import { TextField } from '../text-field/index.js';
 import {
   getSelectedPartIndex,

diff --git a/packages/elements/src/datetime-field/utils.ts b/packages/elements/src/datetime-field/utils.ts
@@ -1,4 +1,4 @@
-import { DateTimeFormatPart, DateTimeFormatPartTypes, InputSelection } from './types';
+import { DateTimeFormatPart, DateTimeFormatPartTypes, InputSelection } from './types.js';
 import { Direction } from './constants.js';
 
 const IterablePartTypes: DateTimeFormatPartTypes[] = ['year', 'day', 'month', 'hour', 'minute', 'second', 'weekday', 'dayPeriod', 'fractionalSecond'];

diff --git a/packages/elements/src/heatmap/helpers/text.ts b/packages/elements/src/heatmap/helpers/text.ts
@@ -1,4 +1,4 @@
-import type { HeatmapCell } from './types';
+import type { HeatmapCell } from './types.js';
 
 const MIN_FONT_SIZE = 10;
 const MAX_FONT_SIZE = 16;

diff --git a/packages/elements/src/heatmap/index.ts b/packages/elements/src/heatmap/index.ts
@@ -25,7 +25,7 @@ import { getResponsiveFontSize, getMaximumTextWidth, MIN_FONT_SIZE } from './hel
 const MAX_CELL_WIDTH_RATIO = 0.85;
 const DEFAULT_CANVAS_RATIO = 0.75; // ratio — 4:3
 
-export type { HeatmapCell, HeatmapXAxis, HeatmapYAxis, HeatmapConfig, HeatmapTooltipCallback, HeatmapRenderCallback, HeatmapCustomisableProperties } from './helpers/types';
+export type { HeatmapCell, HeatmapXAxis, HeatmapYAxis, HeatmapConfig, HeatmapTooltipCallback, HeatmapRenderCallback, HeatmapCustomisableProperties } from './helpers/types.js';
 
 /**
  * A graphical representation of data where the individual

diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
@@ -1,3 +1,3 @@
 export { VERSION } from './version.js';
-export * from './events';
+export * from './events.js';
 export * from '@refinitiv-ui/core';
diff --git a/packages/elements/src/item/index.ts b/packages/elements/src/item/index.ts
@@ -14,7 +14,7 @@ import type { ItemType } from './helpers/types';
 import '../icon/index.js';
 import '../checkbox/index.js';
 
-export * from './helpers/types';
+export * from './helpers/types.js';
 
 const isAllWhitespaceTextNode = (node: Node): boolean =>
   node.nodeType === document.TEXT_NODE

diff --git a/packages/elements/src/number-field/__demo__/index.html b/packages/elements/src/number-field/__demo__/index.html
@@ -16,96 +16,8 @@
       import '@refinitiv-ui/elements/number-field';
       import '@refinitiv-ui/demo-block';
     </script>
-    <demo-block layout="normal" header="Default" tags="default">
-      <p><ef-number-field placeholder="Default" no-spinner></ef-number-field></p>
-      <p><ef-number-field placeholder="Disabled" disabled></ef-number-field></p>
-      <p><ef-number-field placeholder="Read Only" readonly></ef-number-field></p>
-    </demo-block>
-
-    <demo-block layout="normal" header="Number Field vs Native" tags="native,number,input" id="inputVsNative">
-      <div>A playground to compare native number input and number-field</div>
-      <div style="display: flex;">
-        <div>
-          <p><label for="inputVsNativeNative">Native Input: </label><input type="number" placeholder="Native Input" id="inputVsNativeNative"></p>
-          <p><label for="inputVsNativeInput">Number Field: </label><ef-number-field type="number" placeholder="Number Field" id="inputVsNativeInput"></ef-number-field></p>
-        </div>
-        <div>
-          <p><label for="inputVsNativeStep">Step: </label><input id="inputVsNativeStep" type="number"></p>
-          <p><label for="inputVsNativeMin">Min: </label><input id="inputVsNativeMin" type="number"></p>
-          <p><label for="inputVsNativeMax">Max: </label><input id="inputVsNativeMax" type="number"></p>
-          <p><label for="inputVsNativeValue">Value Attribute: </label><input id="inputVsNativeValue" type="number"></p>
-        </div>
-      </div>
-      <script>
-        (function () {
-          const inputVsNativeNative = document.getElementById('inputVsNativeNative');
-          const inputVsNativeInput = document.getElementById('inputVsNativeInput');
-          document.getElementById('inputVsNativeStep').addEventListener('change', (event) => {
-            inputVsNativeNative.step = inputVsNativeInput.step = event.target.value;
-          });
-          document.getElementById('inputVsNativeMin').addEventListener('change', (event) => {
-            inputVsNativeNative.min = inputVsNativeInput.min = event.target.value;
-          });
-          document.getElementById('inputVsNativeMax').addEventListener('change', (event) => {
-            inputVsNativeNative.max = inputVsNativeInput.max = event.target.value;
-          });
-          document.getElementById('inputVsNativeValue').addEventListener('change', (event) => {
-            const value = event.target.value;
-            if (!value) {
-              inputVsNativeNative.removeAttribute('value');
-              inputVsNativeInput.removeAttribute('value');
-            }
-            else {
-              inputVsNativeNative.setAttribute('value', value);
-              inputVsNativeInput.setAttribute('value', value);
-            }
-          });
-        })();
-      </script>
-    </demo-block>
-
-    <demo-block layout="normal" header="Text alignment" tags="appearances">
-      <p>text-align: center</p>
-      <p><ef-number-field style="padding: 0; width:24px; text-align: center;" value="20" no-spinner></ef-number-field></p>
-      <p>text-align: right without spinner</p>
-      <p><ef-number-field style="width:60px; text-align: right;" value="40" no-spinner></ef-number-field></p>
-      <p>text-align: right</p>
-      <p><ef-number-field style="width:84px; text-align: right;" value="30"></ef-number-field></p>
-    </demo-block>
-
-    <demo-block layout="normal" header="Transparent" tags="appearances">
-      <p><ef-number-field placeholder="Default" transparent></ef-number-field></p>
-      <p><ef-number-field placeholder="Disabled" transparent disabled></ef-number-field></p>
-      <p><ef-number-field placeholder="Read Only" transparent readonly></ef-number-field></p>
-    </demo-block>
-
-    <demo-block layout="normal" header="Error" tags="appearances">
-      <p><ef-number-field placeholder="Default" error></ef-number-field></p>
-      <p><ef-number-field placeholder="Disabled" disabled error></ef-number-field></p>
-      <p><ef-number-field placeholder="Read Only" readonly error></ef-number-field></p>
-    </demo-block>
-
-    <demo-block layout="normal" header="Warning" tags="appearances">
-      <p><ef-number-field placeholder="Default" warning></ef-number-field></p>
-      <p><ef-number-field placeholder="Disabled" disabled warning></ef-number-field></p>
-      <p><ef-number-field placeholder="Read Only" readonly warning></ef-number-field></p>
-    </demo-block>
-
-    <demo-block layout="normal" header="Step" tags="validation">
-      <p><ef-number-field placeholder="Default Step" min="-100" step="10" max="100"></ef-number-field></p>
-      <p><ef-number-field placeholder="Step = 2" min="1" step="2" max="8"></ef-number-field></p>
-      <p><ef-number-field placeholder="Step = 0.01" min="-1" step="0.01" max="1"></ef-number-field></p>
-      <p><ef-number-field placeholder="Step = 0.001" min="-1" step="0.001" max="1"></ef-number-field></p>
-    </demo-block>
-
-    <demo-block layout="normal" header="Min & Max" tags="validation">
-      <p><ef-number-field placeholder="Min = 0, Max = 10" min="0" max="10"></ef-number-field></p>
-      <p><ef-number-field placeholder="Min = -1, Max = 2.5" min="-1" max="2.5"></ef-number-field></p>
-      <p><ef-number-field placeholder="Min = -10, Max = 10" min="-10" max="10"></ef-number-field></p>
-    </demo-block>
-
     <demo-block layout="normal" header="Value change event" tags="event">
-      <ef-number-field id="value-changed" placeholder="Value change event"></ef-number-field>
+      <ef-number-field id="value-changed" max="100000000000" step="0.000000001" placeholder="Value change event"></ef-number-field>
       <p> Value: <code id="value-text"></code></p>
       <script>
         var element = document.getElementById('value-changed');
@@ -116,40 +28,5 @@
         });
       </script>
     </demo-block>
-
-    <demo-block layout="normal" header="Error change event" tags="event">
-      <ef-number-field id="error-changed" min="0" max="10" placeholder="Error change event"></ef-number-field>
-      <p> Error: <code id="error"></code></p>
-      <script>
-        var element = document.getElementById('error-changed');
-        var errorChangedText = document.getElementById('error');
-
-        element.addEventListener('error-changed', function (e) {
-          errorChangedText.innerHTML = e.detail.value;
-        });
-      </script>
-    </demo-block>
-
-    <demo-block layout="normal" header="Focus/Blur/Select" tags="event">
-      <ef-number-field class="focusblur" placeholder="Focus/Blur"></ef-number-field>
-      <p>
-        <button onClick="focusblur.focus();">Focus</button>
-        <button onClick="focusblur.blur();">Blur</button>
-        <button onClick="focusblur.select();">Select</button>
-      </p>
-      <p class="focusblurevent"></p>
-      <script>
-        let focusblur = document.querySelector('.focusblur');
-        let focusblurevent = document.querySelector('.focusblurevent');
-
-        focusblur.addEventListener('blur', function () {
-          focusblurevent.innerHTML = '`blur` event triggered';
-        }, false);
-
-        focusblur.addEventListener('focus', function () {
-          focusblurevent.innerHTML = '`focus` event triggered';
-        }, false);
-      </script>
-    </demo-block>
   </body>
 </html>
diff --git a/packages/elements/src/overlay-menu/index.ts b/packages/elements/src/overlay-menu/index.ts
@@ -20,7 +20,7 @@ import '../item/index.js';
 import { Item, ItemData } from '../item/index.js';
 import { Overlay, OverlayPosition, OverlayPositionTarget } from '../overlay/index.js';
 import { applyLock } from '../overlay/managers/interaction-lock-manager.js';
-import { OverlayMenuData, Navigation } from './helpers/types';
+import { OverlayMenuData, Navigation } from './helpers/types.js';
 import { OpenedMenusManager } from './managers/menu-manager.js';
 
 export type { OverlayMenuData };

diff --git a/packages/elements/src/overlay/index.ts b/packages/elements/src/overlay/index.ts
@@ -2,7 +2,7 @@ export type {
   Position as OverlayPosition,
   PositionTarget as OverlayPositionTarget,
   TransitionStyle as OverlayTransitionStyle
-} from './helpers/types';
+} from './helpers/types.js';
 
 export {
   Overlay

diff --git a/packages/elements/src/time-picker/index.ts b/packages/elements/src/time-picker/index.ts
@@ -12,7 +12,7 @@ import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
 import { state } from '@refinitiv-ui/core/decorators/state.js';
 import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { ValueChangedEvent, FocusedChangedEvent } from '../events';
+import { ValueChangedEvent, FocusedChangedEvent } from '../events.js';
 import { VERSION } from '../version.js';
 import {
   isValidTime,

diff --git a/packages/elements/src/tree/index.ts b/packages/elements/src/tree/index.ts
@@ -1,4 +1,4 @@
 export * from './elements/tree.js';
 export * from './elements/tree-item.js';
 export { TreeRenderer } from './helpers/renderer.js';
-export type { TreeData, TreeDataItem } from './helpers/types';
+export type { TreeData, TreeDataItem } from './helpers/types.js';
diff --git a/packages/i18n/src/index.ts b/packages/i18n/src/index.ts
@@ -5,7 +5,7 @@ export type {
   UnicodeExtensions,
   MessageFormats,
   MessageOptions
-} from './types';
+} from './types.js';
 
 export {
   LangObserverCallback,

diff --git a/packages/phrasebook/src/index.ts b/packages/phrasebook/src/index.ts
@@ -1,6 +1,6 @@
 export type {
   Translations
-} from './types';
+} from './types.js';
 
 export {
   Phrasebook,

diff --git a/packages/phrasebook/src/locale/de/color-dialog.ts b/packages/phrasebook/src/locale/de/color-dialog.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/color-dialog.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import dialogTranslations from './dialog';
+import dialogTranslations from './dialog.js';
 
 const translations = {
   ...dialogTranslations,

diff --git a/packages/phrasebook/src/locale/de/tree-select.ts b/packages/phrasebook/src/locale/de/tree-select.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/tree-select.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import comboboxTranslations from './combo-box';
+import comboboxTranslations from './combo-box.js';
 
 const translations = {
   ...comboboxTranslations,

diff --git a/packages/phrasebook/src/locale/en/color-dialog.ts b/packages/phrasebook/src/locale/en/color-dialog.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/color-dialog.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import dialogTranslations from './dialog';
+import dialogTranslations from './dialog.js';
 
 const translations = {
   ...dialogTranslations,

diff --git a/packages/phrasebook/src/locale/en/tree-select.ts b/packages/phrasebook/src/locale/en/tree-select.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/tree-select.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import comboboxTranslations from './combo-box';
+import comboboxTranslations from './combo-box.js';
 
 const translations = {
   ...comboboxTranslations,

diff --git a/packages/phrasebook/src/locale/ja/color-dialog.ts b/packages/phrasebook/src/locale/ja/color-dialog.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/color-dialog.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import dialogTranslations from './dialog';
+import dialogTranslations from './dialog.js';
 
 const translations = {
   ...dialogTranslations,

diff --git a/packages/phrasebook/src/locale/ja/tree-select.ts b/packages/phrasebook/src/locale/ja/tree-select.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/tree-select.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import comboboxTranslations from './combo-box';
+import comboboxTranslations from './combo-box.js';
 
 const translations = {
   ...comboboxTranslations,

diff --git a/packages/phrasebook/src/locale/zh-hant/color-dialog.ts b/packages/phrasebook/src/locale/zh-hant/color-dialog.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/color-dialog.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import dialogTranslations from './dialog';
+import dialogTranslations from './dialog.js';
 
 const translations = {
   ...dialogTranslations,

diff --git a/packages/phrasebook/src/locale/zh-hant/tree-select.ts b/packages/phrasebook/src/locale/zh-hant/tree-select.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/tree-select.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import comboboxTranslations from './combo-box';
+import comboboxTranslations from './combo-box.js';
 
 const translations = {
   ...comboboxTranslations,

diff --git a/packages/phrasebook/src/locale/zh/color-dialog.ts b/packages/phrasebook/src/locale/zh/color-dialog.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/color-dialog.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import dialogTranslations from './dialog';
+import dialogTranslations from './dialog.js';
 
 const translations = {
   ...dialogTranslations,

diff --git a/packages/phrasebook/src/locale/zh/tree-select.ts b/packages/phrasebook/src/locale/zh/tree-select.ts
@@ -1,7 +1,7 @@
 // Component docs https://elf.int.refinitiv.com/elements/tree-select.html
 import { Phrasebook } from '../../translation.js';
 import './shared.js';
-import comboboxTranslations from './combo-box';
+import comboboxTranslations from './combo-box.js';
 
 const translations = {
   ...comboboxTranslations,