feat: Lit@2 upgrade

packages/configurations/tsconfig.json

@@ -10,5 +10,7 @@
     "sourceMap": true,
     "declaration": true,
     "declarationMap": true,
+    "noEmitHelpers": true,
+    "importHelpers": true
   }
 }

packages/core/package.json

@@ -5,6 +5,29 @@
   "main": "./lib/elf.js",
   "module": "./lib/elf.js",
   "types": "./lib/elf.d.ts",
+  "exports": {
+    ".": {
+      "default": "./lib/elf.js"
+    },
+    "./lib/directives/async-append.js": "./lib/directives/async-append.js",
+    "./lib/directives/async-replace.js": "./lib/directives/async-replace.js",
+    "./lib/directives/cache.js": "./lib/directives/cache.js",
+    "./lib/directives/class-map.js": "./lib/directives/class-map.js",
+    "./lib/directives/guard.js": "./lib/directives/guard.js",
+    "./lib/directives/if-defined.js": "./lib/directives/if-defined.js",
+    "./lib/directives/repeat.js": "./lib/directives/repeat.js",
+    "./lib/directives/style-map.js": "./lib/directives/style-map.js",
+    "./lib/directives/unsafe-html.js": "./lib/directives/unsafe-html.js",
+    "./lib/directives/until.js": "./lib/directives/until.js",
+    "./lib/decorators/custom-element.js": "./lib/decorators/custom-element.js",
+    "./lib/decorators/event-options.js": "./lib/decorators/event-options.js",
+    "./lib/decorators/property.js": "./lib/decorators/property.js",
+    "./lib/decorators/query.js": "./lib/decorators/query.js",
+    "./lib/decorators/query-all.js": "./lib/decorators/query-all.js",
+    "./lib/decorators/query-assigned-nodes.js": "./lib/decorators/query-assigned-nodes.js",
+    "./lib/decorators/query-async.js": "./lib/decorators/query-async.js",
+    "./lib/decorators/state.js": "./lib/decorators/state.js"
+  },
   "repository": {
     "type": "git",
     "url": "[email protected]:elf/refinitiv-ui.git",
@@ -22,8 +45,8 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "lit-element": "^2.4.0",
-    "lit-html": "^1.3.0"
+    "lit": "^2.0.0",
+    "tslib": "^2.3.1"
   },
   "devDependencies": {
     "@refinitiv-ui/test-helpers": "^5.0.1"

packages/core/src/decorators/CustomElement.ts → packages/core/src/decorators/custom-element.ts

@@ -1,6 +1,6 @@
-import { ElementRegistry } from '../registries/ElementRegistry';
-import { ElementConstructor } from '../interfaces/ElementConstructor';
-import { CustomStyleRegistry } from '../registries/CustomStyleRegistry';
+import type { ElementConstructor } from '../interfaces/ElementConstructor';
+import { ElementRegistry } from '../registries/ElementRegistry.js';
+import { CustomStyleRegistry } from '../registries/CustomStyleRegistry.js';
 
 interface ElementOptions {
   /**
@@ -29,7 +29,7 @@ type DecoratorFunction = (target: ElementConstructor) => void;
  * @param options element registration options
  * @returns Element registration decorator
  */
-export const CustomElement = function (name: string, options: ElementOptions = defaultOptions): DecoratorFunction {
+export const customElement = function (name: string, options: ElementOptions = defaultOptions): DecoratorFunction {
   options = { ...defaultOptions, ...options };
   return (target: ElementConstructor): void => {
     ElementRegistry.define(name, target, {

packages/core/src/decorators/event-options.ts

@@ -0,0 +1 @@
+export { eventOptions } from 'lit/decorators/event-options.js';

packages/core/src/decorators/property.ts

@@ -0,0 +1 @@
+export { property } from 'lit/decorators/property.js';

packages/core/src/decorators/query-all.ts

@@ -0,0 +1 @@
+export { queryAll } from 'lit/decorators/query-all.js';

packages/core/src/decorators/query-assigned-nodes.ts

@@ -0,0 +1 @@
+export { queryAssignedNodes } from 'lit/decorators/query-assigned-nodes.js';

packages/core/src/decorators/query-async.ts

@@ -0,0 +1 @@
+export { queryAsync } from 'lit/decorators/query-async.js';

packages/core/src/decorators/query.ts

@@ -0,0 +1 @@
+export { query } from 'lit/decorators/query.js';

packages/core/src/decorators/state.ts

@@ -0,0 +1 @@
+export { state } from 'lit/decorators/state.js';

packages/core/src/directives/async-append.ts

@@ -0,0 +1 @@
+export { asyncAppend } from 'lit/directives/async-append.js';

packages/core/src/directives/async-replace.ts

@@ -0,0 +1 @@
+export { asyncReplace } from 'lit/directives/async-replace.js';

packages/core/src/directives/cache.ts

@@ -0,0 +1 @@
+export { cache } from 'lit/directives/cache.js';

packages/core/src/directives/class-map.ts

@@ -0,0 +1 @@
+export { classMap } from 'lit/directives/class-map.js';

packages/core/src/directives/guard.ts

@@ -0,0 +1 @@
+export { guard } from 'lit/directives/guard.js';

packages/core/src/directives/if-defined.ts

@@ -0,0 +1 @@
+export { ifDefined } from 'lit/directives/if-defined.js';

packages/core/src/directives/repeat.ts

@@ -0,0 +1 @@
+export { repeat } from 'lit/directives/repeat.js';

packages/core/src/directives/style-map.ts

@@ -0,0 +1 @@
+export { styleMap } from 'lit/directives/style-map.js';

packages/core/src/directives/unsafe-html.ts

@@ -0,0 +1 @@
+export { unsafeHTML } from 'lit/directives/unsafe-html.js';

packages/core/src/directives/until.ts

@@ -0,0 +1 @@
+export { until } from 'lit/directives/until.js';

packages/core/src/elements/BasicElement.ts

@@ -1,10 +1,12 @@
-import { LitElement, property } from 'lit-element';
-import { ElementRegistry } from '../registries/ElementRegistry';
-import { FocusRegistry } from '../registries/FocusRegistry';
-import { ShadyCSS } from '../utils/shadyStyles';
-import { FocusableHelper } from '../utils/focusableHelper';
-import { StyleInfo } from '../interfaces/StyleInfo';
-import { CSSValue } from '../types/base';
+import type { StyleInfo } from '../interfaces/StyleInfo';
+import type { CSSValue } from '../types/base';
+import { LitElement, unsafeCSS, CSSResultArray } from 'lit';
+import { property } from '../decorators/property.js';
+import { ElementRegistry } from '../registries/ElementRegistry.js';
+import { FocusRegistry } from '../registries/FocusRegistry.js';
+import { ShadyCSS } from '../utils/shadyStyles.js';
+import { FocusableHelper } from '../utils/focusableHelper.js';
+import { BasicElementSymbol } from '../utils/helpers.js';
 
 const CSS_VARIABLE_REGEXP = /^--\w/;
 const CSS_VARIABLE_REPLACE_REGEXP = /['"]([^'"]+?)['"]/g;
@@ -48,6 +50,23 @@ export abstract class BasicElement extends LitElement {
     ElementRegistry.create(this);
   }
 
+  /**
+   * Apply theme styles
+   * @param theme Theme CSS
+   * @returns {void}
+   */
+  public static applyThemeStyles (theme: string): void {
+    const baseStyles = this.styles;
+    const themeStyles = unsafeCSS(theme);
+    const styles = ([] as CSSResultArray).concat(baseStyles ? [baseStyles, themeStyles] : themeStyles);
+    Object.defineProperty(this, 'styles', {
+      get () {
+        return styles;
+      }
+    });
+    this.elementStyles = this.finalizeStyles(this.styles);
+  }
+
   /**
    * Set the default tabindex of element
    * null - for unset
@@ -204,6 +223,11 @@ export abstract class BasicElement extends LitElement {
     return FocusableHelper.getTabbableNodes(this);
   }
 
+  /**
+   * A symbol to check if an element is BasicElement
+   */
+  public static readonly [BasicElementSymbol] = BasicElementSymbol;
+
   /**
    * Placeholder for getting an element's version number
    * @returns version number

packages/core/src/elements/ControlElement.ts

@@ -1,7 +1,8 @@
-import { property, PropertyValues } from 'lit-element';
-import { BasicElement } from './BasicElement';
-import { WarningNotice } from '../notices/WarningNotice';
-import { ControlProperties as IControlProperties } from '../interfaces/ControlProperties';
+import type { ControlProperties as IControlProperties } from '../interfaces/ControlProperties';
+import type { PropertyValues } from 'lit';
+import { property } from '../decorators/property.js';
+import { BasicElement } from './BasicElement.js';
+import { WarningNotice } from '../notices/WarningNotice.js';
 
 /**
  * Control element base class.
@@ -44,7 +45,7 @@ export abstract class ControlElement extends BasicElement implements IControlPro
     }
     if (oldValue !== value) {
       this._value = value;
-      void this.requestUpdate('value', oldValue);
+      this.requestUpdate('value', oldValue);
     }
   }
 

packages/core/src/elements/ResponsiveElement.ts

@@ -1,4 +1,4 @@
-import { BasicElement } from './BasicElement';
+import { BasicElement } from './BasicElement.js';
 import { ResizeObserver, ResizeObserverEntry } from '@juggle/resize-observer';
 
 export type ElementSize = {

packages/core/src/elf.ts

@@ -1,55 +1,24 @@
-/**
- * Export all from lit-element
- * Named export is done to avoid ambiguity with same name re-export of:
- * - LitElement
- * - customElement
- * Add re-exported modules if something is missing.
- */
 export {
-  CSSResult,
-  PropertyValues,
-  ReactiveElement,
-  SVGTemplateResult,
-  TemplateResult,
-  UpdatingElement,
-  css,
-  eventOptions,
   html,
-  internalProperty,
-  notEqual,
-  property,
-  query,
-  queryAll,
-  queryAsync,
-  queryAssignedNodes,
-  state,
   svg,
-  supportsAdoptingStyleSheets,
-  unsafeCSS
-} from 'lit-element';
+  css
+} from 'lit';
 
-/**
- * Export directives from lit-html
- * todo: asyncAppend/Replace breaks build
- */
-// export { asyncAppend } from 'lit-html/directives/async-append';
-// export { asyncReplace } from 'lit-html/directives/async-replace';
-export { cache } from 'lit-html/directives/cache';
-export { classMap } from 'lit-html/directives/class-map';
-export { guard } from 'lit-html/directives/guard';
-export { ifDefined } from 'lit-html/directives/if-defined';
-export { repeat } from 'lit-html/directives/repeat';
-export { styleMap } from 'lit-html/directives/style-map';
-export { unsafeHTML } from 'lit-html/directives/unsafe-html';
-export { until } from 'lit-html/directives/until';
+export type {
+  TemplateResult,
+  SVGTemplateResult,
+  CSSResult,
+  PropertyValues,
+  ReactiveElement
+} from 'lit';
 
 /**
  * Export element base classes
  */
-import { BasicElement } from './elements/BasicElement';
+import { BasicElement } from './elements/BasicElement.js';
 export { BasicElement };
-export { ControlElement } from './elements/ControlElement';
-export { ResponsiveElement, ElementSize, ResizeEvent } from './elements/ResponsiveElement';
+export { ControlElement } from './elements/ControlElement.js';
+export { ResponsiveElement, ElementSize, ResizeEvent } from './elements/ResponsiveElement.js';
 export class LitElement extends BasicElement {
   constructor () {
     /* eslint-disable-next-line no-console */
@@ -63,45 +32,36 @@ export class LitElement extends BasicElement {
  * These can be used to show warning messages in the console.
  * For example, when deprecated features are used in elements.
  */
-export { WarningNotice } from './notices/WarningNotice';
-export { DeprecationNotice } from './notices/DeprecationNotice';
-
-/**
- * Export Custom Element decorator
- * Use this to register elements into the registry.
- * Overrides customElement decorator from lit-element export.
- * @override
- */
-import { CustomElement as customElement } from './decorators/CustomElement';
-export { customElement }; // We have to do this due to some transpilation issue (es-dev-server --> IE)
+export { WarningNotice } from './notices/WarningNotice.js';
+export { DeprecationNotice } from './notices/DeprecationNotice.js';
 
 /**
  * Export TapEvent
  */
-export { TapEvent } from './events/TapEvent';
+export { TapEvent } from './events/TapEvent.js';
 
 /**
  * Export common interfaces
  */
-export { MultiValue } from './interfaces/MultiValue';
-export { StyleMap } from './interfaces/StyleMap';
-export { StyleInfo } from './interfaces/StyleInfo';
+export type { MultiValue } from './interfaces/MultiValue';
+export type { StyleMap } from './interfaces/StyleMap';
+export type { StyleInfo } from './interfaces/StyleInfo';
 
 /**
  * Export useful utils
  */
-export { FocusableHelper } from './utils/focusableHelper';
-export { matches } from './utils/matches';
+export { FocusableHelper } from './utils/focusableHelper.js';
+export { matches } from './utils/matches.js';
 
 /**
  * Export focused key.
  * Used to observe `focused` attribute changes
  */
-export { FocusedPropertyKey } from './registries/FocusRegistry';
+export { FocusedPropertyKey } from './registries/FocusRegistry.js';
 
-import { CustomStyleRegistry } from './registries/CustomStyleRegistry';
-import { NativeStyleRegistry } from './registries/NativeStyleRegistry';
-import { global } from './utils/global';
+import { CustomStyleRegistry } from './registries/CustomStyleRegistry.js';
+import { NativeStyleRegistry } from './registries/NativeStyleRegistry.js';
+import { global } from './utils/global.js';
 
 global.elf = global.Elf = global.ELF = {
   customStyles: CustomStyleRegistry,

packages/core/src/errors/DuplicateElementError.ts

@@ -1,4 +1,4 @@
-import { GenericError } from './GenericError';
+import { GenericError } from './GenericError.js';
 
 const generateMessage = (name: string): string =>
 /* eslint-disable-next-line indent */

packages/core/src/errors/DuplicateStyleError.ts

@@ -1,4 +1,4 @@
-import { GenericError } from './GenericError';
+import { GenericError } from './GenericError.js';
 
 const generateMessage = (name: string): string =>
 /* eslint-disable-next-line indent */

packages/core/src/events/TapEvent.ts

@@ -1,5 +1,5 @@
-import { global } from '../utils/global';
-import { matches } from '../utils/matches';
+import { global } from '../utils/global.js';
+import { matches } from '../utils/matches.js';
 
 const isIE = (/Trident/g).test(navigator.userAgent);
 

packages/core/src/interfaces/ELF.ts

@@ -1,5 +1,5 @@
-import { CustomStyleRegistry } from '../registries/CustomStyleRegistry';
-import { NativeStyleRegistry } from '../registries/NativeStyleRegistry';
+import type { CustomStyleRegistry } from '../registries/CustomStyleRegistry';
+import type { NativeStyleRegistry } from '../registries/NativeStyleRegistry';
 
 export interface ELF {
   version: string;

packages/core/src/interfaces/ElementConstructor.ts

@@ -1,4 +1,4 @@
-import { BasicElement } from '../elements/BasicElement';
+import type { BasicElement } from '../elements/BasicElement';
 export type ElementConstructor = typeof BasicElement & {
   new (): BasicElement;
 }

packages/core/src/interfaces/StyleInfo.ts

@@ -1,4 +1,4 @@
-import { CSSValue } from '../types/base';
+import type { CSSValue } from '../types/base';
 
 /**
  * Used to add and remove CSS properties

packages/core/src/interfaces/StyleMap.ts

@@ -1,4 +1,4 @@
-import { CSSValue } from '../types/base';
+import type { CSSValue } from '../types/base';
 
 /**
  * Used to declare CSS property value map

packages/core/src/notices/DeprecationNotice.ts

@@ -1,4 +1,4 @@
-import { WarningNotice } from './WarningNotice';
+import { WarningNotice } from './WarningNotice.js';
 
 /**
  * **Deprecation Notice**\

packages/core/src/notices/WarningNotice.ts

@@ -1,4 +1,4 @@
-import { Notice } from './Notice';
+import { Notice } from './Notice.js';
 
 /**
  * **Warning Notice**\

packages/core/src/registries/CustomStyleRegistry.ts

@@ -1,5 +1,5 @@
-import { DuplicateStyleError } from '../errors/DuplicateStyleError';
-import { ready } from '../utils/elementReady';
+import { DuplicateStyleError } from '../errors/DuplicateStyleError.js';
+import { ready } from '../utils/elementReady.js';
 const register = new Map<string, string>();
 
 /**