feat(core): add latest lit directives, add focused-changed event

* feat: add missing Lit directives and types

* feat: add missing directive types

* feat: add focused-changed event

* refactor(core): move FocusedChangedEvent to types

packages/core/package.json

@@ -15,9 +15,13 @@
     "./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/live.js": "./lib/directives/live.js",
+    "./lib/directives/ref.js": "./lib/directives/ref.js",
     "./lib/directives/repeat.js": "./lib/directives/repeat.js",
     "./lib/directives/style-map.js": "./lib/directives/style-map.js",
+    "./lib/directives/template-content.js": "./lib/directives/template-content.js",
     "./lib/directives/unsafe-html.js": "./lib/directives/unsafe-html.js",
+    "./lib/directives/unsafe-svg.js": "./lib/directives/unsafe-svg.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",

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

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

packages/core/src/directives/live.ts

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

packages/core/src/directives/ref.ts

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

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

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

packages/core/src/directives/template-content.ts

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

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

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

packages/core/src/elements/BasicElement.ts

@@ -39,6 +39,8 @@ const getComputedStyleValue = (el: HTMLElement, key: string): string => {
 /**
  * Basic element base class.
  * Usually used for creating low-level elements.
+ *
+ * @fires focused-changed Fired when `focused` property changes
  */
 export abstract class BasicElement extends LitElement {
 

packages/core/src/elf.ts

@@ -38,9 +38,10 @@ export { WarningNotice } from './notices/WarningNotice.js';
 export { DeprecationNotice } from './notices/DeprecationNotice.js';
 
 /**
- * Export TapEvent
+ * Export events
  */
 export { TapEvent } from './events/TapEvent.js';
+export type { FocusedChangedEvent } from './types/events';
 
 /**
  * Export common interfaces

packages/core/src/registries/FocusRegistry.ts

@@ -1,4 +1,5 @@
 import type { BasicElement } from '../elements/BasicElement';
+import type { FocusedChangedEvent } from '../types/events';
 import { isBasicElement } from '../utils/helpers.js';
 
 const register = new Set<BasicElement>(); /* Track all active elements */
@@ -132,6 +133,21 @@ const shouldDelegateOnFocus = (target: HTMLElement | null): boolean => {
     && getActiveElement(true) === target;
 };
 
+/**
+ * Dispatch `focused-changed` event
+ * @param element Element to dispatch event for
+ * @param focused Focused state
+ * @returns {void}
+ */
+const dispatchFocusedChangedEvent = (element: HTMLElement, focused: boolean): void => {
+  const event: FocusedChangedEvent = new CustomEvent('focused-changed', {
+    detail: {
+      value: focused
+    }
+  });
+  element.dispatchEvent(event);
+};
+
 let syncAnimationFrame: number | null = null;
 /**
  * Set element `focused` state in asynchronous way
@@ -151,6 +167,7 @@ const updateFocusedState = (): void => {
       if (!focusedPath.includes(el)) {
         focusedMap.delete(el);
         el.removeAttribute('focused');
+        dispatchFocusedChangedEvent(el, false);
         el.requestUpdate(FocusedPropertyKey, true);
       }
     });
@@ -159,6 +176,7 @@ const updateFocusedState = (): void => {
       if (!focusedChanged || focusedMap.get(el) !== focused) {
         focusedMap.set(el, focused);
         el.setAttribute('focused', focused);
+        dispatchFocusedChangedEvent(el, true);
         focusedChanged && el.requestUpdate(FocusedPropertyKey, false);
       }
     });

packages/core/src/types/events.ts

@@ -0,0 +1,9 @@
+/**
+ * Dispatched when `focused` state changes
+ */
+export type FocusedChangedEvent = CustomEvent<{
+  /**
+   * `focused` value
+   */
+  value: boolean;
+}>;

packages/elements/src/events.ts

@@ -1,6 +1,7 @@
 import type {
   TapEvent,
-  ResizeEvent
+  ResizeEvent,
+  FocusedChangedEvent
 } from '@refinitiv-ui/core';
 
 /**
@@ -150,5 +151,6 @@ export {
   FromChangedEvent,
   ToChangedEvent,
   TapEvent,
-  ResizeEvent
+  ResizeEvent,
+  FocusedChangedEvent
 };