igniteui-webcomponents 7.3.2 → 7.4.1

package/internals/directives/pointer-operation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pointer-operation.js","sourceRoot":"","sources":["../../../src/internals/directives/pointer-operation.ts"],"names":[],"mappings":"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","sourcesContent":["import { noChange } from 'lit';\nimport {\n  AsyncDirective,\n  type DirectiveParameters,\n  type ElementPart,\n  type PartInfo,\n  PartType,\n} from 'lit/async-directive.js';\nimport { createAbortHandle } from '../abort-handler.js';\nimport { escapeKey, isKey } from '../controllers/keys.js';\nimport { getDefaultLayer } from '../utils/dom.js';\nimport { preventDefault } from '../utils/events.js';\nimport { resolveValue } from '../utils/types.js';\n\n/**\n * How an operation applies its result. `immediate` changes the target while\n * the pointer moves. `deferred` changes a ghost, and the target keeps its\n * state until the operation ends.\n */\nexport type PointerOperationMode = 'immediate' | 'deferred';\n\n/** Builds the ghost element from the initial rectangle. */\nexport type GhostFactory = (initial: DOMRect) => HTMLElement;\n\n/** The options that the pointer directives have in common. */\nexport interface PointerOperationOptions {\n  /** Whether the directive starts operations. Defaults to `true`. */\n  enabled?: boolean;\n  /** The mode of the operation. Each directive has its own default. */\n  mode?: PointerOperationMode;\n  /** The operation target. Defaults to the element with the directive. */\n  target?: HTMLElement | (() => HTMLElement | null | undefined);\n  ghostFactory?: GhostFactory;\n  /** The ghost container. Defaults to the document body. */\n  layer?: () => HTMLElement;\n}\n\n/** The traits that a directive fixes, and that its options cannot change. */\nexport type PointerOperationConfig = {\n  /** The name of the directive, used in the wrong-part-type error. */\n  name: string;\n  ghostAttribute: string;\n  defaultMode: PointerOperationMode;\n  /** The ghost that the directive builds without a factory. */\n  defaultGhost: GhostFactory;\n};\n\n/** The state that each operation keeps, whatever the directive. */\nexport type PointerOperationState = {\n  pointerId: number;\n  /** The ghost element in deferred mode. */\n  ghost: HTMLElement | null;\n};\n\n/**\n * The parts that the drag and the resize directives share.\n *\n * @remarks\n * The base class keeps the abort handles, the ghost, the pointer capture and\n * the life-cycle. A subclass adds its own geometry and start events.\n */\nexport abstract class PointerOperationDirective<\n  TOptions extends PointerOperationOptions,\n  TState extends PointerOperationState,\n> extends AsyncDirective {\n  /** Aborts the listeners that wait for an operation to start. */\n  protected readonly _triggerAbort = createAbortHandle();\n  /** Aborts the listeners that run for the duration of an operation. */\n  protected readonly _operationAbort = createAbortHandle();\n\n  protected readonly _config: PointerOperationConfig;\n\n  protected _options = {} as TOptions;\n  protected _host?: HTMLElement;\n  protected _operation: TState | null = null;\n\n  /** The element that holds the pointer capture of the running operation. */\n  private _captureElement?: HTMLElement;\n\n  constructor(partInfo: PartInfo, config: PointerOperationConfig) {\n    super(partInfo);\n\n    if (partInfo.type !== PartType.ELEMENT) {\n      throw new Error(\n        `The \\`${config.name}\\` directive can only be used on elements.`\n      );\n    }\n\n    this._config = config;\n  }\n\n  protected get _enabled(): boolean {\n    return this._options.enabled ?? true;\n  }\n\n  protected get _isDeferred(): boolean {\n    return (this._options.mode ?? this._config.defaultMode) === 'deferred';\n  }\n\n  //#region Subclass contract\n\n  protected abstract _attachTriggerListeners(): void;\n\n  /** Reports the cancellation and restores the target element. */\n  protected abstract _cancelOperation(): void;\n\n  //#endregion\n\n  //#region Shared internals\n\n  /** Prevents the native interactions that would compete with the directive. */\n  protected readonly _preventNativeBehavior = (event: Event): void => {\n    if (this._enabled) {\n      event.preventDefault();\n    }\n  };\n\n  protected readonly _handleKeydown = (event: KeyboardEvent): void => {\n    if (!this._operation || !isKey(event, escapeKey)) {\n      return;\n    }\n\n    this._cancelOperation();\n    this._dispose();\n  };\n\n  protected _resolveTarget(): HTMLElement | null {\n    return resolveValue(this._options.target) ?? this._host ?? null;\n  }\n\n  protected _resolveLayer(): HTMLElement {\n    return this._options.layer?.() ?? getDefaultLayer();\n  }\n\n  protected _createGhost(initial: DOMRect): HTMLElement {\n    const ghost = (this._options.ghostFactory ?? this._config.defaultGhost)(\n      initial\n    );\n\n    ghost.setAttribute(this._config.ghostAttribute, '');\n    this._resolveLayer().append(ghost);\n    return ghost;\n  }\n\n  /** Captures the pointer on `element` and adds the operation listeners. */\n  protected _startOperationListeners(\n    element: HTMLElement,\n    pointerId: number,\n    onMove: (event: PointerEvent) => void,\n    onEnd: (event: PointerEvent) => void\n  ): void {\n    const { signal } = this._operationAbort;\n\n    this._captureElement = element;\n    element.setPointerCapture(pointerId);\n    element.addEventListener('pointermove', onMove, { signal });\n    element.addEventListener('lostpointercapture', onEnd, { signal });\n    element.addEventListener('contextmenu', preventDefault, { signal });\n    globalThis.addEventListener('keydown', this._handleKeydown, { signal });\n  }\n\n  /** Stops the operation and removes the ghost and the listeners. */\n  protected _dispose(): void {\n    this._operationAbort.abort();\n\n    if (!this._operation) {\n      return;\n    }\n\n    const { pointerId, ghost } = this._operation;\n    const element = this._captureElement;\n\n    if (element?.hasPointerCapture(pointerId)) {\n      element.releasePointerCapture(pointerId);\n    }\n\n    ghost?.remove();\n    this._captureElement = undefined;\n    this._operation = null;\n  }\n\n  //#endregion\n\n  //#region Directive life-cycle\n\n  protected override reconnected(): void {\n    this._attachTriggerListeners();\n  }\n\n  protected override disconnected(): void {\n    this._dispose();\n    this._triggerAbort.abort();\n  }\n\n  public override update(\n    part: ElementPart,\n    [options]: DirectiveParameters<this>\n  ) {\n    if (this.isConnected) {\n      this._host = part.element as HTMLElement;\n      this._options = (options ?? {}) as TOptions;\n      this._attachTriggerListeners();\n    }\n    return noChange;\n  }\n\n  public render(_options?: TOptions) {\n    return noChange;\n  }\n\n  //#endregion\n}\n"]}

package/internals/directives/resize.d.ts

@@ -1,25 +1,24 @@
-import { AsyncDirective, type DirectiveParameters, type ElementPart, type PartInfo } from 'lit/async-directive.js';
-export type ResizeMode = 'immediate' | 'deferred';
+import { type PartInfo } from 'lit/async-directive.js';
+import { type PointerOperationOptions, PointerOperationDirective, type PointerOperationState } from './pointer-operation.js';
 export type ResizeDirection = 'horizontal' | 'vertical' | 'both';
-export type ResizeGhostFactory = (initial: DOMRect) => HTMLElement;
 export type ResizeCallback = (params: ResizeCallbackParams) => unknown;
 export type ResizeCancelCallback = (state: ResizeState) => unknown;
 export type ResizeState = {
     /** The dimensions of the resize target at the start of the operation. */
     initial: DOMRect;
-    /** The current dimensions of the resize target. Mutable from within the callbacks. */
+    /** The current dimensions. The callbacks can change this rectangle. */
     current: DOMRect;
-    /** Difference between the current and initial width. */
+    /** The difference between the current and the initial width. */
     deltaX: number;
-    /** Difference between the current and initial height. */
+    /** The difference between the current and the initial height. */
     deltaY: number;
     /** The ghost element when in deferred mode. */
     ghost: HTMLElement | null;
-    /** The element the directive is attached to. */
+    /** The element that carries the directive. */
     trigger: HTMLElement | null;
     /**
-     * When assigned from within the `end` callback, it is invoked instead of the default
-     * behavior of applying the final dimensions to the resize target.
+     * An optional commit function that the `end` callback sets. It runs in
+     * place of the default, which applies the final dimensions to the target.
      */
     commit?: () => unknown;
 };
@@ -27,83 +26,56 @@ export type ResizeCallbackParams = {
     event: PointerEvent;
     state: ResizeState;
 };
-/** Options for the resizable directive. */
-export interface ResizableOptions {
-    /** Whether the directive will listen for and initiate resize operations. Defaults to `true`. */
-    enabled?: boolean;
-    /**
-     * The mode of the resize operation.
-     *
-     * In `immediate` mode the target element is resized in place as the pointer moves.
-     * In `deferred` mode a ghost element is created and resized instead, with the final
-     * dimensions applied to the target when the operation completes.
-     */
-    mode?: ResizeMode;
+/**
+ * Options for the resizable directive. See {@link PointerOperationOptions}
+ * for the shared ones. The mode defaults to `immediate`, which resizes the
+ * target while the pointer moves.
+ */
+export interface ResizableOptions extends PointerOperationOptions {
     /** The direction in which the element can be resized. Defaults to `both`. */
     direction?: ResizeDirection;
-    /**
-     * The element being resized. Defaults to the element the directive is applied to.
-     *
-     * Accepts either an element or a function returning one, resolved at the start
-     * of each resize operation.
-     */
-    target?: HTMLElement | (() => HTMLElement | null | undefined);
-    /** Factory function for the ghost element in deferred mode. */
-    ghostFactory?: ResizeGhostFactory;
-    /** The container in which the deferred ghost element is rendered. Defaults to the document body. */
-    layer?: () => HTMLElement;
-    /** The minimum width of the resizable element in pixels. */
+    /** The size bounds of the resizable element, in pixels. */
     minWidth?: number;
-    /** The maximum width of the resizable element in pixels. */
     maxWidth?: number;
-    /** The minimum height of the resizable element in pixels. */
     minHeight?: number;
-    /** The maximum height of the resizable element in pixels. */
     maxHeight?: number;
-    /** Whether to maintain the initial aspect ratio of the resizable element. */
+    /** Whether the element keeps its initial aspect ratio during a resize. */
     maintainAspectRatio?: boolean;
-    /** Called when a resize operation starts. Return `false` to abort the operation. */
+    /** Runs when a resize starts. A `false` return aborts the operation. */
     start?: ResizeCallback;
-    /** Called on each pointer move during a resize operation. May mutate `state.current`. */
+    /** Runs on each pointer move. The callback can change `state.current`. */
     resize?: ResizeCallback;
-    /** Called when a resize operation completes. May assign `state.commit`. */
+    /** Runs when a resize completes. The callback can set `state.commit`. */
     end?: ResizeCallback;
-    /** Called when a resize operation is cancelled with the Escape key. */
+    /** Runs when the Escape key cancels a resize operation. */
     cancel?: ResizeCancelCallback;
 }
-declare class ResizableDirective extends AsyncDirective {
-    private readonly _triggerAbort;
-    private readonly _resizeAbort;
-    private _options;
-    private _host?;
-    private _operation;
+type ResizeOperation = PointerOperationState & {
+    target: HTMLElement;
+    initial: DOMRect;
+    current: DOMRect;
+    /** The inline size styles of the target, restored on an immediate cancel. */
+    targetStyles: {
+        width: string;
+        height: string;
+    };
+};
+declare class ResizableDirective extends PointerOperationDirective<ResizableOptions, ResizeOperation> {
     constructor(partInfo: PartInfo);
-    private get _enabled();
-    private get _isDeferred();
+    protected _cancelOperation(): void;
     private readonly _handlePointerDown;
     private readonly _handlePointerMove;
     private readonly _handlePointerEnd;
-    private readonly _handleKeydown;
-    /** Prevents native touch interactions from interfering with an enabled directive. */
-    private readonly _preventNativeBehavior;
-    private _addTriggerListeners;
-    private _resolveTarget;
-    private _createGhost;
+    protected _attachTriggerListeners(): void;
     private _createState;
     private _createParams;
     private _updateDimensions;
-    /** Applies the current dimensions of the operation as inline styles to the given element. */
+    /** Applies the current dimensions to `element` as inline styles. */
     private _applyDimensions;
-    /** Stops the current resize operation, cleaning up the ghost element and event listeners. */
-    private _dispose;
-    protected reconnected(): void;
-    protected disconnected(): void;
-    update(part: ElementPart, [options]: DirectiveParameters<this>): symbol;
-    render(_options?: ResizableOptions): symbol;
 }
 /**
- * A directive that makes an element a trigger for resizing a target element,
- * either in place or through a deferred ghost element.
+ * A directive that makes an element a resize trigger. It resizes the target
+ * in place, or through a deferred ghost element.
  */
 export declare const resizable: (_options?: ResizableOptions | undefined) => import("lit-html/directive.js").DirectiveResult<typeof ResizableDirective>;
 export {};

package/internals/directives/resize.js

@@ -1,9 +1,6 @@
-import { noChange } from 'lit';
-import { AsyncDirective, directive, PartType, } from 'lit/async-directive.js';
-import { createAbortHandle } from '../abort-handler.js';
-import { escapeKey, isKey } from '../controllers/key-bindings.js';
-import { getDefaultLayer, setStyles } from '../utils/dom.js';
-import { preventDefault } from '../utils/events.js';
+import { directive } from 'lit/async-directive.js';
+import { setStyles } from '../utils/dom.js';
+import { PointerOperationDirective, } from './pointer-operation.js';
 function createDefaultGhost({ x, y, width, height }) {
     const element = document.createElement('div');
     const { scrollX, scrollY } = window;
@@ -19,13 +16,14 @@ function createDefaultGhost({ x, y, width, height }) {
     });
     return element;
 }
-class ResizableDirective extends AsyncDirective {
+class ResizableDirective extends PointerOperationDirective {
     constructor(partInfo) {
-        super(partInfo);
-        this._triggerAbort = createAbortHandle();
-        this._resizeAbort = createAbortHandle();
-        this._options = {};
-        this._operation = null;
+        super(partInfo, {
+            name: 'resizable',
+            ghostAttribute: 'data-resize-ghost',
+            defaultMode: 'immediate',
+            defaultGhost: createDefaultGhost,
+        });
         this._handlePointerDown = (event) => {
             if (!this._enabled || event.button !== 0 || this._operation) {
                 return;
@@ -39,7 +37,7 @@ class ResizableDirective extends AsyncDirective {
                 pointerId: event.pointerId,
                 target,
                 initial,
-                current: structuredClone(initial),
+                current: DOMRect.fromRect(initial),
                 ghost: this._isDeferred ? this._createGhost(initial) : null,
                 targetStyles: { width: target.style.width, height: target.style.height },
             };
@@ -47,15 +45,7 @@ class ResizableDirective extends AsyncDirective {
                 this._dispose();
                 return;
             }
-            const host = this._host;
-            const { signal } = this._resizeAbort;
-            host.setPointerCapture(event.pointerId);
-            host.addEventListener('pointermove', this._handlePointerMove, { signal });
-            host.addEventListener('lostpointercapture', this._handlePointerEnd, {
-                signal,
-            });
-            host.addEventListener('contextmenu', preventDefault, { signal });
-            globalThis.addEventListener('keydown', this._handleKeydown, { signal });
+            this._startOperationListeners(this._host, event.pointerId, this._handlePointerMove, this._handlePointerEnd);
         };
         this._handlePointerMove = (event) => {
             if (!this._operation) {
@@ -82,32 +72,14 @@ class ResizableDirective extends AsyncDirective {
             }
             this._dispose();
         };
-        this._handleKeydown = (event) => {
-            if (!this._operation || !isKey(event, escapeKey)) {
-                return;
-            }
-            this._options.cancel?.(this._createState());
-            if (!this._isDeferred) {
-                setStyles(this._operation.target, this._operation.targetStyles);
-            }
-            this._dispose();
-        };
-        this._preventNativeBehavior = (event) => {
-            if (this._enabled) {
-                event.preventDefault();
-            }
-        };
-        if (partInfo.type !== PartType.ELEMENT) {
-            throw new Error('The `resizable` directive can only be used on elements.');
-        }
-    }
-    get _enabled() {
-        return this._options.enabled ?? true;
     }
-    get _isDeferred() {
-        return this._options.mode === 'deferred';
+    _cancelOperation() {
+        this._options.cancel?.(this._createState());
+        if (!this._isDeferred) {
+            setStyles(this._operation.target, this._operation.targetStyles);
+        }
     }
-    _addTriggerListeners() {
+    _attachTriggerListeners() {
         if (!this._host) {
             return;
         }
@@ -120,16 +92,6 @@ class ResizableDirective extends AsyncDirective {
             signal,
         });
     }
-    _resolveTarget() {
-        const { target } = this._options;
-        return ((typeof target === 'function' ? target() : target) ?? this._host ?? null);
-    }
-    _createGhost(initial) {
-        const ghost = this._options.ghostFactory?.(initial) ?? createDefaultGhost(initial);
-        ghost.setAttribute('data-resize-ghost', '');
-        (this._options.layer?.() ?? getDefaultLayer()).append(ghost);
-        return ghost;
-    }
     _createState() {
         const { initial, current, ghost } = this._operation;
         return {
@@ -180,35 +142,6 @@ class ResizableDirective extends AsyncDirective {
             });
         }
     }
-    _dispose() {
-        this._resizeAbort.abort();
-        if (this._operation) {
-            const { pointerId, ghost } = this._operation;
-            if (this._host?.hasPointerCapture(pointerId)) {
-                this._host.releasePointerCapture(pointerId);
-            }
-            ghost?.remove();
-            this._operation = null;
-        }
-    }
-    reconnected() {
-        this._addTriggerListeners();
-    }
-    disconnected() {
-        this._dispose();
-        this._triggerAbort.abort();
-    }
-    update(part, [options]) {
-        if (this.isConnected) {
-            this._host = part.element;
-            this._options = options ?? {};
-            this._addTriggerListeners();
-        }
-        return noChange;
-    }
-    render(_options) {
-        return noChange;
-    }
 }
 export const resizable = directive(ResizableDirective);
 //# sourceMappingURL=resize.js.map

package/internals/directives/resize.js.map

@@ -1 +1 @@
-{"version":3,"file":"resize.js","sourceRoot":"","sources":["../../../src/internals/directives/resize.ts"],"names":[],"mappings":"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","sourcesContent":["import { noChange } from 'lit';\nimport {\n  AsyncDirective,\n  directive,\n  type DirectiveParameters,\n  type ElementPart,\n  type PartInfo,\n  PartType,\n} from 'lit/async-directive.js';\nimport { createAbortHandle } from '../abort-handler.js';\nimport { escapeKey, isKey } from '../controllers/key-bindings.js';\nimport { getDefaultLayer, setStyles } from '../utils/dom.js';\nimport { preventDefault } from '../utils/events.js';\n\nexport type ResizeMode = 'immediate' | 'deferred';\nexport type ResizeDirection = 'horizontal' | 'vertical' | 'both';\nexport type ResizeGhostFactory = (initial: DOMRect) => HTMLElement;\nexport type ResizeCallback = (params: ResizeCallbackParams) => unknown;\nexport type ResizeCancelCallback = (state: ResizeState) => unknown;\n\nexport type ResizeState = {\n  /** The dimensions of the resize target at the start of the operation. */\n  initial: DOMRect;\n  /** The current dimensions of the resize target. Mutable from within the callbacks. */\n  current: DOMRect;\n  /** Difference between the current and initial width. */\n  deltaX: number;\n  /** Difference between the current and initial height. */\n  deltaY: number;\n  /** The ghost element when in deferred mode. */\n  ghost: HTMLElement | null;\n  /** The element the directive is attached to. */\n  trigger: HTMLElement | null;\n  /**\n   * When assigned from within the `end` callback, it is invoked instead of the default\n   * behavior of applying the final dimensions to the resize target.\n   */\n  commit?: () => unknown;\n};\n\nexport type ResizeCallbackParams = {\n  event: PointerEvent;\n  state: ResizeState;\n};\n\n/** Options for the resizable directive. */\nexport interface ResizableOptions {\n  /** Whether the directive will listen for and initiate resize operations. Defaults to `true`. */\n  enabled?: boolean;\n  /**\n   * The mode of the resize operation.\n   *\n   * In `immediate` mode the target element is resized in place as the pointer moves.\n   * In `deferred` mode a ghost element is created and resized instead, with the final\n   * dimensions applied to the target when the operation completes.\n   */\n  mode?: ResizeMode;\n  /** The direction in which the element can be resized. Defaults to `both`. */\n  direction?: ResizeDirection;\n  /**\n   * The element being resized. Defaults to the element the directive is applied to.\n   *\n   * Accepts either an element or a function returning one, resolved at the start\n   * of each resize operation.\n   */\n  target?: HTMLElement | (() => HTMLElement | null | undefined);\n  /** Factory function for the ghost element in deferred mode. */\n  ghostFactory?: ResizeGhostFactory;\n  /** The container in which the deferred ghost element is rendered. Defaults to the document body. */\n  layer?: () => HTMLElement;\n  /** The minimum width of the resizable element in pixels. */\n  minWidth?: number;\n  /** The maximum width of the resizable element in pixels. */\n  maxWidth?: number;\n  /** The minimum height of the resizable element in pixels. */\n  minHeight?: number;\n  /** The maximum height of the resizable element in pixels. */\n  maxHeight?: number;\n  /** Whether to maintain the initial aspect ratio of the resizable element. */\n  maintainAspectRatio?: boolean;\n  /** Called when a resize operation starts. Return `false` to abort the operation. */\n  start?: ResizeCallback;\n  /** Called on each pointer move during a resize operation. May mutate `state.current`. */\n  resize?: ResizeCallback;\n  /** Called when a resize operation completes. May assign `state.commit`. */\n  end?: ResizeCallback;\n  /** Called when a resize operation is cancelled with the Escape key. */\n  cancel?: ResizeCancelCallback;\n}\n\ntype ResizeOperation = {\n  pointerId: number;\n  target: HTMLElement;\n  initial: DOMRect;\n  current: DOMRect;\n  ghost: HTMLElement | null;\n  /** Inline size styles of the target before the operation, restored on cancel. */\n  targetStyles: { width: string; height: string };\n};\n\nfunction createDefaultGhost({ x, y, width, height }: DOMRect): HTMLElement {\n  const element = document.createElement('div');\n  const { scrollX, scrollY } = window;\n\n  setStyles(element, {\n    position: 'absolute',\n    top: `${y + scrollY}px`,\n    left: `${x + scrollX}px`,\n    zIndex: '1000',\n    background: 'pink',\n    opacity: '0.85',\n    width: `${width}px`,\n    height: `${height}px`,\n  });\n\n  return element;\n}\n\nclass ResizableDirective extends AsyncDirective {\n  private readonly _triggerAbort = createAbortHandle();\n  private readonly _resizeAbort = createAbortHandle();\n\n  private _options: ResizableOptions = {};\n  private _host?: HTMLElement;\n  private _operation: ResizeOperation | null = null;\n\n  constructor(partInfo: PartInfo) {\n    super(partInfo);\n\n    if (partInfo.type !== PartType.ELEMENT) {\n      throw new Error(\n        'The `resizable` directive can only be used on elements.'\n      );\n    }\n  }\n\n  private get _enabled(): boolean {\n    return this._options.enabled ?? true;\n  }\n\n  private get _isDeferred(): boolean {\n    return this._options.mode === 'deferred';\n  }\n\n  // #region Event handlers\n\n  private readonly _handlePointerDown = (event: PointerEvent): void => {\n    if (!this._enabled || event.button !== 0 || this._operation) {\n      return;\n    }\n\n    const target = this._resolveTarget();\n    if (!target) {\n      return;\n    }\n\n    const initial = target.getBoundingClientRect();\n\n    this._operation = {\n      pointerId: event.pointerId,\n      target,\n      initial,\n      current: structuredClone(initial),\n      ghost: this._isDeferred ? this._createGhost(initial) : null,\n      targetStyles: { width: target.style.width, height: target.style.height },\n    };\n\n    if (this._options.start?.(this._createParams(event)) === false) {\n      this._dispose();\n      return;\n    }\n\n    const host = this._host!;\n    const { signal } = this._resizeAbort;\n\n    host.setPointerCapture(event.pointerId);\n    host.addEventListener('pointermove', this._handlePointerMove, { signal });\n    host.addEventListener('lostpointercapture', this._handlePointerEnd, {\n      signal,\n    });\n    host.addEventListener('contextmenu', preventDefault, { signal });\n    globalThis.addEventListener('keydown', this._handleKeydown, { signal });\n  };\n\n  private readonly _handlePointerMove = (event: PointerEvent): void => {\n    if (!this._operation) {\n      return;\n    }\n\n    this._updateDimensions(event);\n\n    const params = this._createParams(event);\n    this._options.resize?.(params);\n    this._operation.current = params.state.current;\n\n    this._applyDimensions(\n      this._isDeferred ? this._operation.ghost : this._operation.target\n    );\n  };\n\n  private readonly _handlePointerEnd = (event: PointerEvent): void => {\n    if (!this._operation) {\n      return;\n    }\n\n    const params = this._createParams(event);\n    this._options.end?.(params);\n    this._operation.current = params.state.current;\n\n    if (params.state.commit) {\n      params.state.commit();\n    } else {\n      this._applyDimensions(this._operation.target);\n    }\n\n    this._dispose();\n  };\n\n  private readonly _handleKeydown = (event: KeyboardEvent): void => {\n    if (!this._operation || !isKey(event, escapeKey)) {\n      return;\n    }\n\n    this._options.cancel?.(this._createState());\n\n    if (!this._isDeferred) {\n      setStyles(this._operation.target, this._operation.targetStyles);\n    }\n\n    this._dispose();\n  };\n\n  // #endregion\n\n  // #region Internal API\n\n  /** Prevents native touch interactions from interfering with an enabled directive. */\n  private readonly _preventNativeBehavior = (event: Event): void => {\n    if (this._enabled) {\n      event.preventDefault();\n    }\n  };\n\n  private _addTriggerListeners(): void {\n    if (!this._host) {\n      return;\n    }\n\n    const { signal } = this._triggerAbort;\n\n    this._host.addEventListener('pointerdown', this._handlePointerDown, {\n      signal,\n    });\n    this._host.addEventListener('touchstart', this._preventNativeBehavior, {\n      passive: false,\n      signal,\n    });\n  }\n\n  private _resolveTarget(): HTMLElement | null {\n    const { target } = this._options;\n    return (\n      (typeof target === 'function' ? target() : target) ?? this._host ?? null\n    );\n  }\n\n  private _createGhost(initial: DOMRect): HTMLElement {\n    const ghost =\n      this._options.ghostFactory?.(initial) ?? createDefaultGhost(initial);\n\n    ghost.setAttribute('data-resize-ghost', '');\n    (this._options.layer?.() ?? getDefaultLayer()).append(ghost);\n    return ghost;\n  }\n\n  private _createState(): ResizeState {\n    const { initial, current, ghost } = this._operation!;\n\n    return {\n      initial,\n      current,\n      deltaX: current.width - initial.width,\n      deltaY: current.height - initial.height,\n      ghost,\n      trigger: this._host ?? null,\n    };\n  }\n\n  private _createParams(event: PointerEvent): ResizeCallbackParams {\n    return { event, state: this._createState() };\n  }\n\n  private _updateDimensions({ clientX, clientY }: PointerEvent): void {\n    const { initial, current } = this._operation!;\n    const {\n      direction = 'both',\n      maintainAspectRatio,\n      minWidth,\n      maxWidth,\n      minHeight,\n      maxHeight,\n    } = this._options;\n\n    const horizontal = direction !== 'vertical';\n    const vertical = direction !== 'horizontal';\n\n    let width = horizontal ? clientX - initial.x : initial.width;\n    let height = vertical ? clientY - initial.y : initial.height;\n\n    if (maintainAspectRatio) {\n      const ratio = initial.width / initial.height;\n\n      if (horizontal) {\n        height = width / ratio;\n      } else {\n        width = height * ratio;\n      }\n    }\n\n    if (minWidth != null) width = Math.max(width, minWidth);\n    if (maxWidth != null) width = Math.min(width, maxWidth);\n    if (minHeight != null) height = Math.max(height, minHeight);\n    if (maxHeight != null) height = Math.min(height, maxHeight);\n\n    current.width = width;\n    current.height = height;\n  }\n\n  /** Applies the current dimensions of the operation as inline styles to the given element. */\n  private _applyDimensions(element: HTMLElement | null): void {\n    if (element) {\n      const { current } = this._operation!;\n      setStyles(element, {\n        width: `${current.width}px`,\n        height: `${current.height}px`,\n      });\n    }\n  }\n\n  /** Stops the current resize operation, cleaning up the ghost element and event listeners. */\n  private _dispose(): void {\n    this._resizeAbort.abort();\n\n    if (this._operation) {\n      const { pointerId, ghost } = this._operation;\n\n      if (this._host?.hasPointerCapture(pointerId)) {\n        this._host.releasePointerCapture(pointerId);\n      }\n\n      ghost?.remove();\n      this._operation = null;\n    }\n  }\n\n  // #endregion\n\n  protected override reconnected(): void {\n    this._addTriggerListeners();\n  }\n\n  protected override disconnected(): void {\n    this._dispose();\n    this._triggerAbort.abort();\n  }\n\n  public override update(\n    part: ElementPart,\n    [options]: DirectiveParameters<this>\n  ) {\n    if (this.isConnected) {\n      this._host = part.element as HTMLElement;\n      this._options = options ?? {};\n      this._addTriggerListeners();\n    }\n    return noChange;\n  }\n\n  public render(_options?: ResizableOptions) {\n    return noChange;\n  }\n}\n\n/**\n * A directive that makes an element a trigger for resizing a target element,\n * either in place or through a deferred ghost element.\n */\nexport const resizable = directive(ResizableDirective);\n"]}
+{"version":3,"file":"resize.js","sourceRoot":"","sources":["../../../src/internals/directives/resize.ts"],"names":[],"mappings":"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","sourcesContent":["import { directive, type PartInfo } from 'lit/async-directive.js';\nimport { setStyles } from '../utils/dom.js';\nimport {\n  type PointerOperationOptions,\n  PointerOperationDirective,\n  type PointerOperationState,\n} from './pointer-operation.js';\n\nexport type ResizeDirection = 'horizontal' | 'vertical' | 'both';\nexport type ResizeCallback = (params: ResizeCallbackParams) => unknown;\nexport type ResizeCancelCallback = (state: ResizeState) => unknown;\n\nexport type ResizeState = {\n  /** The dimensions of the resize target at the start of the operation. */\n  initial: DOMRect;\n  /** The current dimensions. The callbacks can change this rectangle. */\n  current: DOMRect;\n  /** The difference between the current and the initial width. */\n  deltaX: number;\n  /** The difference between the current and the initial height. */\n  deltaY: number;\n  /** The ghost element when in deferred mode. */\n  ghost: HTMLElement | null;\n  /** The element that carries the directive. */\n  trigger: HTMLElement | null;\n  /**\n   * An optional commit function that the `end` callback sets. It runs in\n   * place of the default, which applies the final dimensions to the target.\n   */\n  commit?: () => unknown;\n};\n\nexport type ResizeCallbackParams = {\n  event: PointerEvent;\n  state: ResizeState;\n};\n\n/**\n * Options for the resizable directive. See {@link PointerOperationOptions}\n * for the shared ones. The mode defaults to `immediate`, which resizes the\n * target while the pointer moves.\n */\nexport interface ResizableOptions extends PointerOperationOptions {\n  /** The direction in which the element can be resized. Defaults to `both`. */\n  direction?: ResizeDirection;\n  /** The size bounds of the resizable element, in pixels. */\n  minWidth?: number;\n  maxWidth?: number;\n  minHeight?: number;\n  maxHeight?: number;\n  /** Whether the element keeps its initial aspect ratio during a resize. */\n  maintainAspectRatio?: boolean;\n  /** Runs when a resize starts. A `false` return aborts the operation. */\n  start?: ResizeCallback;\n  /** Runs on each pointer move. The callback can change `state.current`. */\n  resize?: ResizeCallback;\n  /** Runs when a resize completes. The callback can set `state.commit`. */\n  end?: ResizeCallback;\n  /** Runs when the Escape key cancels a resize operation. */\n  cancel?: ResizeCancelCallback;\n}\n\ntype ResizeOperation = PointerOperationState & {\n  target: HTMLElement;\n  initial: DOMRect;\n  current: DOMRect;\n  /** The inline size styles of the target, restored on an immediate cancel. */\n  targetStyles: { width: string; height: string };\n};\n\nfunction createDefaultGhost({ x, y, width, height }: DOMRect): HTMLElement {\n  const element = document.createElement('div');\n  const { scrollX, scrollY } = window;\n\n  setStyles(element, {\n    position: 'absolute',\n    top: `${y + scrollY}px`,\n    left: `${x + scrollX}px`,\n    zIndex: '1000',\n    background: 'pink',\n    opacity: '0.85',\n    width: `${width}px`,\n    height: `${height}px`,\n  });\n\n  return element;\n}\n\nclass ResizableDirective extends PointerOperationDirective<\n  ResizableOptions,\n  ResizeOperation\n> {\n  constructor(partInfo: PartInfo) {\n    super(partInfo, {\n      name: 'resizable',\n      ghostAttribute: 'data-resize-ghost',\n      defaultMode: 'immediate',\n      defaultGhost: createDefaultGhost,\n    });\n  }\n\n  protected override _cancelOperation(): void {\n    this._options.cancel?.(this._createState());\n\n    if (!this._isDeferred) {\n      setStyles(this._operation!.target, this._operation!.targetStyles);\n    }\n  }\n\n  // #region Event handlers\n\n  private readonly _handlePointerDown = (event: PointerEvent): void => {\n    if (!this._enabled || event.button !== 0 || this._operation) {\n      return;\n    }\n\n    const target = this._resolveTarget();\n    if (!target) {\n      return;\n    }\n\n    const initial = target.getBoundingClientRect();\n\n    this._operation = {\n      pointerId: event.pointerId,\n      target,\n      initial,\n      current: DOMRect.fromRect(initial),\n      ghost: this._isDeferred ? this._createGhost(initial) : null,\n      targetStyles: { width: target.style.width, height: target.style.height },\n    };\n\n    if (this._options.start?.(this._createParams(event)) === false) {\n      this._dispose();\n      return;\n    }\n\n    this._startOperationListeners(\n      this._host!,\n      event.pointerId,\n      this._handlePointerMove,\n      this._handlePointerEnd\n    );\n  };\n\n  private readonly _handlePointerMove = (event: PointerEvent): void => {\n    if (!this._operation) {\n      return;\n    }\n\n    this._updateDimensions(event);\n\n    const params = this._createParams(event);\n    this._options.resize?.(params);\n    this._operation.current = params.state.current;\n\n    this._applyDimensions(\n      this._isDeferred ? this._operation.ghost : this._operation.target\n    );\n  };\n\n  private readonly _handlePointerEnd = (event: PointerEvent): void => {\n    if (!this._operation) {\n      return;\n    }\n\n    const params = this._createParams(event);\n    this._options.end?.(params);\n    this._operation.current = params.state.current;\n\n    if (params.state.commit) {\n      params.state.commit();\n    } else {\n      this._applyDimensions(this._operation.target);\n    }\n\n    this._dispose();\n  };\n\n  // #endregion\n\n  // #region Internal API\n\n  protected override _attachTriggerListeners(): void {\n    if (!this._host) {\n      return;\n    }\n\n    const { signal } = this._triggerAbort;\n\n    this._host.addEventListener('pointerdown', this._handlePointerDown, {\n      signal,\n    });\n    this._host.addEventListener('touchstart', this._preventNativeBehavior, {\n      passive: false,\n      signal,\n    });\n  }\n\n  private _createState(): ResizeState {\n    const { initial, current, ghost } = this._operation!;\n\n    return {\n      initial,\n      current,\n      deltaX: current.width - initial.width,\n      deltaY: current.height - initial.height,\n      ghost,\n      trigger: this._host ?? null,\n    };\n  }\n\n  private _createParams(event: PointerEvent): ResizeCallbackParams {\n    return { event, state: this._createState() };\n  }\n\n  private _updateDimensions({ clientX, clientY }: PointerEvent): void {\n    const { initial, current } = this._operation!;\n    const {\n      direction = 'both',\n      maintainAspectRatio,\n      minWidth,\n      maxWidth,\n      minHeight,\n      maxHeight,\n    } = this._options;\n\n    const horizontal = direction !== 'vertical';\n    const vertical = direction !== 'horizontal';\n\n    let width = horizontal ? clientX - initial.x : initial.width;\n    let height = vertical ? clientY - initial.y : initial.height;\n\n    if (maintainAspectRatio) {\n      const ratio = initial.width / initial.height;\n\n      if (horizontal) {\n        height = width / ratio;\n      } else {\n        width = height * ratio;\n      }\n    }\n\n    if (minWidth != null) width = Math.max(width, minWidth);\n    if (maxWidth != null) width = Math.min(width, maxWidth);\n    if (minHeight != null) height = Math.max(height, minHeight);\n    if (maxHeight != null) height = Math.min(height, maxHeight);\n\n    current.width = width;\n    current.height = height;\n  }\n\n  /** Applies the current dimensions to `element` as inline styles. */\n  private _applyDimensions(element: HTMLElement | null): void {\n    if (element) {\n      const { current } = this._operation!;\n      setStyles(element, {\n        width: `${current.width}px`,\n        height: `${current.height}px`,\n      });\n    }\n  }\n\n  // #endregion\n}\n\n/**\n * A directive that makes an element a resize trigger. It resizes the target\n * in place, or through a deferred ghost element.\n */\nexport const resizable = directive(ResizableDirective);\n"]}

package/internals/i18n/EN/calendar.resources.d.ts

@@ -1,4 +1,7 @@
-/** @deprecated since 7.2.0. Please use the newly provided ICalendarResourceStrings interface or set global resource strings using `registerI18n` method. */
+/**
+ * @deprecated since 7.2.0. Use the newly provided `ICalendarResourceStrings`
+ * interface, or set global resource strings with the `registerI18n` method.
+ */
 export interface IgcCalendarResourceStrings {
     selectMonth?: string;
     selectYear?: string;
@@ -15,5 +18,8 @@ export interface IgcCalendarResourceStrings {
     nextYears?: string;
     weekLabel?: string;
 }
-/** @deprecated since 7.2.0. Please use the newly provided resources from the igniteui-i18n-resources package. */
+/**
+ * @deprecated since 7.2.0. Use the newly provided resources from the
+ * igniteui-i18n-resources package.
+ */
 export declare const IgcCalendarResourceStringEN: IgcCalendarResourceStrings;

package/internals/i18n/EN/calendar.resources.js

@@ -1,7 +1,7 @@
 import { CalendarResourceStringsEN } from 'igniteui-i18n-core';
-import { convertToIgcResource } from '../utils.js';
+import { calendarResourcesMap, convertToIgcResource } from '../utils.js';
 export const IgcCalendarResourceStringEN = {
-    ...convertToIgcResource(CalendarResourceStringsEN, 'calendar'),
+    ...convertToIgcResource(CalendarResourceStringsEN, calendarResourcesMap),
     weekLabel: 'Wk',
 };
 //# sourceMappingURL=calendar.resources.js.map

package/internals/i18n/EN/calendar.resources.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.resources.js","sourceRoot":"","sources":["../../../../src/internals/i18n/EN/calendar.resources.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAyBnD,MAAM,CAAC,MAAM,2BAA2B,GAA+B;IACrE,GAAG,oBAAoB,CAAC,yBAAyB,EAAE,UAAU,CAAC;IAC9D,SAAS,EAAE,IAAI;CAChB,CAAC","sourcesContent":["import { CalendarResourceStringsEN } from 'igniteui-i18n-core';\nimport { convertToIgcResource } from '../utils.js';\n\n/* blazorSuppress */\n/** @deprecated since 7.2.0. Please use the newly provided ICalendarResourceStrings interface or set global resource strings using `registerI18n` method. */\nexport interface IgcCalendarResourceStrings {\n  selectMonth?: string;\n  selectYear?: string;\n  selectDate?: string;\n  selectRange?: string;\n  selectedDate?: string;\n  startDate?: string;\n  endDate?: string;\n  previousMonth?: string;\n  nextMonth?: string;\n  previousYear?: string;\n  nextYear?: string;\n  previousYears?: string;\n  nextYears?: string;\n  weekLabel?: string;\n}\n\n// Because weekLabel should be retrieved from the i18n formatter, but previously was present in resources.\n// Manually add it for now, as part of the default EN. When updating make sure to switch in source\n// the week start to be retrieved using a formatter instead of locale.\n/** @deprecated since 7.2.0. Please use the newly provided resources from the igniteui-i18n-resources package. */\nexport const IgcCalendarResourceStringEN: IgcCalendarResourceStrings = {\n  ...convertToIgcResource(CalendarResourceStringsEN, 'calendar'),\n  weekLabel: 'Wk',\n};\n"]}
+{"version":3,"file":"calendar.resources.js","sourceRoot":"","sources":["../../../../src/internals/i18n/EN/calendar.resources.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AA+BzE,MAAM,CAAC,MAAM,2BAA2B,GAA+B;IACrE,GAAG,oBAAoB,CAAC,yBAAyB,EAAE,oBAAoB,CAAC;IACxE,SAAS,EAAE,IAAI;CAChB,CAAC","sourcesContent":["import { CalendarResourceStringsEN } from 'igniteui-i18n-core';\nimport { calendarResourcesMap, convertToIgcResource } from '../utils.js';\n\n/* blazorSuppress */\n/**\n * @deprecated since 7.2.0. Use the newly provided `ICalendarResourceStrings`\n * interface, or set global resource strings with the `registerI18n` method.\n */\nexport interface IgcCalendarResourceStrings {\n  selectMonth?: string;\n  selectYear?: string;\n  selectDate?: string;\n  selectRange?: string;\n  selectedDate?: string;\n  startDate?: string;\n  endDate?: string;\n  previousMonth?: string;\n  nextMonth?: string;\n  previousYear?: string;\n  nextYear?: string;\n  previousYears?: string;\n  nextYears?: string;\n  weekLabel?: string;\n}\n\n// The i18n formatter gives `weekLabel`, but an earlier version kept it in\n// the resources, so it stays in the default EN strings. A future change must\n// read the week start from the formatter, not from the locale.\n/**\n * @deprecated since 7.2.0. Use the newly provided resources from the\n * igniteui-i18n-resources package.\n */\nexport const IgcCalendarResourceStringEN: IgcCalendarResourceStrings = {\n  ...convertToIgcResource(CalendarResourceStringsEN, calendarResourcesMap),\n  weekLabel: 'Wk',\n};\n"]}

package/internals/i18n/EN/chat.resources.d.ts

@@ -1,4 +1,7 @@
-/** @deprecated since 7.2.0. Please use the newly provided `IChatResourceStrings` interfaces from or set global resource strings using `registerI18n` method. */
+/**
+ * @deprecated since 7.2.0. Use the newly provided `IChatResourceStrings`
+ * interface, or set global resource strings with the `registerI18n` method.
+ */
 export interface IgcChatResourceStrings {
     suggestionsHeader?: string;
     reactionCopy?: string;
@@ -9,5 +12,8 @@ export interface IgcChatResourceStrings {
     attachmentsListLabel?: string;
     messageCopied?: string;
 }
-/** @deprecated since 7.2.0. Please use the newly provided resources from the igniteui-i18n-resources package. */
+/**
+ * @deprecated since 7.2.0. Use the newly provided resources from the
+ * igniteui-i18n-resources package.
+ */
 export declare const IgcChatResourceStringEN: IgcChatResourceStrings;

package/internals/i18n/EN/chat.resources.js

@@ -1,11 +1,4 @@
-export const IgcChatResourceStringEN = {
-    suggestionsHeader: 'Suggestions',
-    reactionCopy: 'Copy',
-    reactionLike: 'Like',
-    reactionDislike: 'Dislike',
-    reactionRegenerate: 'Regenerate',
-    attachmentLabel: 'Attachment',
-    attachmentsListLabel: 'Attachments',
-    messageCopied: 'Message copied to clipboard',
-};
+import { ChatResourceStringsEN } from 'igniteui-i18n-core';
+import { chatResourcesMap, convertToIgcResource } from '../utils.js';
+export const IgcChatResourceStringEN = convertToIgcResource(ChatResourceStringsEN, chatResourcesMap);
 //# sourceMappingURL=chat.resources.js.map

package/internals/i18n/EN/chat.resources.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat.resources.js","sourceRoot":"","sources":["../../../../src/internals/i18n/EN/chat.resources.ts"],"names":[],"mappings":"AAcA,MAAM,CAAC,MAAM,uBAAuB,GAA2B;IAC7D,iBAAiB,EAAE,aAAa;IAChC,YAAY,EAAE,MAAM;IACpB,YAAY,EAAE,MAAM;IACpB,eAAe,EAAE,SAAS;IAC1B,kBAAkB,EAAE,YAAY;IAChC,eAAe,EAAE,YAAY;IAC7B,oBAAoB,EAAE,aAAa;IACnC,aAAa,EAAE,6BAA6B;CAC7C,CAAC","sourcesContent":["/* blazorSuppress */\n/** @deprecated since 7.2.0. Please use the newly provided `IChatResourceStrings` interfaces from or set global resource strings using `registerI18n` method. */\nexport interface IgcChatResourceStrings {\n  suggestionsHeader?: string;\n  reactionCopy?: string;\n  reactionLike?: string;\n  reactionDislike?: string;\n  reactionRegenerate?: string;\n  attachmentLabel?: string;\n  attachmentsListLabel?: string;\n  messageCopied?: string;\n}\n\n/** @deprecated since 7.2.0. Please use the newly provided resources from the igniteui-i18n-resources package. */\nexport const IgcChatResourceStringEN: IgcChatResourceStrings = {\n  suggestionsHeader: 'Suggestions',\n  reactionCopy: 'Copy',\n  reactionLike: 'Like',\n  reactionDislike: 'Dislike',\n  reactionRegenerate: 'Regenerate',\n  attachmentLabel: 'Attachment',\n  attachmentsListLabel: 'Attachments',\n  messageCopied: 'Message copied to clipboard',\n};\n"]}
+{"version":3,"file":"chat.resources.js","sourceRoot":"","sources":["../../../../src/internals/i18n/EN/chat.resources.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAsBrE,MAAM,CAAC,MAAM,uBAAuB,GAClC,oBAAoB,CAAC,qBAAqB,EAAE,gBAAgB,CAAC,CAAC","sourcesContent":["import { ChatResourceStringsEN } from 'igniteui-i18n-core';\nimport { chatResourcesMap, convertToIgcResource } from '../utils.js';\n\n/* blazorSuppress */\n/**\n * @deprecated since 7.2.0. Use the newly provided `IChatResourceStrings`\n * interface, or set global resource strings with the `registerI18n` method.\n */\nexport interface IgcChatResourceStrings {\n  suggestionsHeader?: string;\n  reactionCopy?: string;\n  reactionLike?: string;\n  reactionDislike?: string;\n  reactionRegenerate?: string;\n  attachmentLabel?: string;\n  attachmentsListLabel?: string;\n  messageCopied?: string;\n}\n\n/**\n * @deprecated since 7.2.0. Use the newly provided resources from the\n * igniteui-i18n-resources package.\n */\nexport const IgcChatResourceStringEN: IgcChatResourceStrings =\n  convertToIgcResource(ChatResourceStringsEN, chatResourcesMap);\n"]}

package/internals/i18n/EN/date-picker.resources.d.ts

@@ -1,8 +1,10 @@
-import { type IgcCalendarResourceStrings } from './calendar.resources.js';
-/** @deprecated since 7.2.0. Please use the newly provided `IDatePickerResourceStrings` and `ICalendarResourceStrings` interfaces or set global resource strings using `registerI18n` method. */
+import type { IgcCalendarResourceStrings } from './calendar.resources.js';
+/**
+ * @deprecated since 7.2.0. Use the newly provided
+ * `IDatePickerResourceStrings` and `ICalendarResourceStrings` interfaces, or
+ * set global resource strings with the `registerI18n` method.
+ */
 export interface IgcDatePickerResourceStrings extends IgcCalendarResourceStrings {
     changeDate: string;
     chooseDate: string;
 }
-/** @deprecated since 7.2.0. Please use the newly provided resources from the igniteui-i18n-resources package. */
-export declare const IgcDatePickerResourceStringsEN: IgcDatePickerResourceStrings;

package/internals/i18n/EN/date-picker.resources.js

@@ -1,8 +1,2 @@
-import { DatePickerResourceStringsEN } from 'igniteui-i18n-core';
-import { convertToIgcResource } from '../utils.js';
-import { IgcCalendarResourceStringEN, } from './calendar.resources.js';
-export const IgcDatePickerResourceStringsEN = {
-    ...convertToIgcResource(DatePickerResourceStringsEN, 'date-picker'),
-    ...IgcCalendarResourceStringEN,
-};
+export {};
 //# sourceMappingURL=date-picker.resources.js.map

package/internals/i18n/EN/date-picker.resources.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.resources.js","sourceRoot":"","sources":["../../../../src/internals/i18n/EN/date-picker.resources.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EACL,2BAA2B,GAE5B,MAAM,yBAAyB,CAAC;AAUjC,MAAM,CAAC,MAAM,8BAA8B,GAAiC;IAC1E,GAAG,oBAAoB,CAAC,2BAA2B,EAAE,aAAa,CAAC;IACnE,GAAG,2BAA2B;CAC/B,CAAC","sourcesContent":["import { DatePickerResourceStringsEN } from 'igniteui-i18n-core';\nimport { convertToIgcResource } from '../utils.js';\nimport {\n  IgcCalendarResourceStringEN,\n  type IgcCalendarResourceStrings,\n} from './calendar.resources.js';\n\n/* blazorSuppress */\n/** @deprecated since 7.2.0. Please use the newly provided `IDatePickerResourceStrings` and `ICalendarResourceStrings` interfaces or set global resource strings using `registerI18n` method. */\nexport interface IgcDatePickerResourceStrings extends IgcCalendarResourceStrings {\n  changeDate: string;\n  chooseDate: string;\n}\n\n/** @deprecated since 7.2.0. Please use the newly provided resources from the igniteui-i18n-resources package. */\nexport const IgcDatePickerResourceStringsEN: IgcDatePickerResourceStrings = {\n  ...convertToIgcResource(DatePickerResourceStringsEN, 'date-picker'),\n  ...IgcCalendarResourceStringEN,\n};\n"]}
+{"version":3,"file":"date-picker.resources.js","sourceRoot":"","sources":["../../../../src/internals/i18n/EN/date-picker.resources.ts"],"names":[],"mappings":"","sourcesContent":["import type { IgcCalendarResourceStrings } from './calendar.resources.js';\n\n/* blazorSuppress */\n/**\n * @deprecated since 7.2.0. Use the newly provided\n * `IDatePickerResourceStrings` and `ICalendarResourceStrings` interfaces, or\n * set global resource strings with the `registerI18n` method.\n */\nexport interface IgcDatePickerResourceStrings extends IgcCalendarResourceStrings {\n  changeDate: string;\n  chooseDate: string;\n}\n"]}

package/internals/i18n/EN/date-range-picker.resources.d.ts

@@ -1,5 +1,9 @@
 import { type IgcCalendarResourceStrings } from './calendar.resources.js';
-/** @deprecated since 7.2.0. Please use the newly provided `ICalendarResourceStrings` and `IDateRangePickerResourceStrings` interfaces or set global resource strings using `registerI18n` method. */
+/**
+ * @deprecated since 7.2.0. Use the newly provided
+ * `ICalendarResourceStrings` and `IDateRangePickerResourceStrings`
+ * interfaces, or set global resource strings with the `registerI18n` method.
+ */
 export interface IgcDateRangePickerResourceStrings extends IgcCalendarResourceStrings {
     separator?: string;
     done?: string;
@@ -9,5 +13,8 @@ export interface IgcDateRangePickerResourceStrings extends IgcCalendarResourceSt
     currentMonth?: string;
     yearToDate?: string;
 }
-/** @deprecated since 7.2.0. Please use the newly provided resources from the igniteui-i18n-resources package. */
+/**
+ * @deprecated since 7.2.0. Use the newly provided resources from the
+ * igniteui-i18n-resources package.
+ */
 export declare const IgcDateRangePickerResourceStringsEN: IgcDateRangePickerResourceStrings;

package/internals/i18n/EN/date-range-picker.resources.js

@@ -1,8 +1,8 @@
 import { DateRangePickerResourceStringsEN } from 'igniteui-i18n-core';
-import { convertToIgcResource } from '../utils.js';
+import { convertToIgcResource, dateRangePickerResourcesMap } from '../utils.js';
 import { IgcCalendarResourceStringEN, } from './calendar.resources.js';
 export const IgcDateRangePickerResourceStringsEN = {
-    ...convertToIgcResource(DateRangePickerResourceStringsEN, 'date-range-picker'),
+    ...convertToIgcResource(DateRangePickerResourceStringsEN, dateRangePickerResourcesMap),
     ...IgcCalendarResourceStringEN,
 };
 //# sourceMappingURL=date-range-picker.resources.js.map

package/internals/i18n/EN/date-range-picker.resources.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-range-picker.resources.js","sourceRoot":"","sources":["../../../../src/internals/i18n/EN/date-range-picker.resources.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gCAAgC,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EACL,2BAA2B,GAE5B,MAAM,yBAAyB,CAAC;AAejC,MAAM,CAAC,MAAM,mCAAmC,GAC9C;IACE,GAAG,oBAAoB,CACrB,gCAAgC,EAChC,mBAAmB,CACpB;IACD,GAAG,2BAA2B;CAC/B,CAAC","sourcesContent":["import { DateRangePickerResourceStringsEN } from 'igniteui-i18n-core';\nimport { convertToIgcResource } from '../utils.js';\nimport {\n  IgcCalendarResourceStringEN,\n  type IgcCalendarResourceStrings,\n} from './calendar.resources.js';\n\n/* blazorSuppress */\n/** @deprecated since 7.2.0. Please use the newly provided `ICalendarResourceStrings` and `IDateRangePickerResourceStrings` interfaces or set global resource strings using `registerI18n` method. */\nexport interface IgcDateRangePickerResourceStrings extends IgcCalendarResourceStrings {\n  separator?: string;\n  done?: string;\n  cancel?: string;\n  last7Days?: string;\n  last30Days?: string;\n  currentMonth?: string;\n  yearToDate?: string;\n}\n\n/** @deprecated since 7.2.0. Please use the newly provided resources from the igniteui-i18n-resources package. */\nexport const IgcDateRangePickerResourceStringsEN: IgcDateRangePickerResourceStrings =\n  {\n    ...convertToIgcResource(\n      DateRangePickerResourceStringsEN,\n      'date-range-picker'\n    ),\n    ...IgcCalendarResourceStringEN,\n  };\n"]}
+{"version":3,"file":"date-range-picker.resources.js","sourceRoot":"","sources":["../../../../src/internals/i18n/EN/date-range-picker.resources.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gCAAgC,EAAE,MAAM,oBAAoB,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAC;AAChF,OAAO,EACL,2BAA2B,GAE5B,MAAM,yBAAyB,CAAC;AAsBjC,MAAM,CAAC,MAAM,mCAAmC,GAC9C;IACE,GAAG,oBAAoB,CACrB,gCAAgC,EAChC,2BAA2B,CAC5B;IACD,GAAG,2BAA2B;CAC/B,CAAC","sourcesContent":["import { DateRangePickerResourceStringsEN } from 'igniteui-i18n-core';\nimport { convertToIgcResource, dateRangePickerResourcesMap } from '../utils.js';\nimport {\n  IgcCalendarResourceStringEN,\n  type IgcCalendarResourceStrings,\n} from './calendar.resources.js';\n\n/* blazorSuppress */\n/**\n * @deprecated since 7.2.0. Use the newly provided\n * `ICalendarResourceStrings` and `IDateRangePickerResourceStrings`\n * interfaces, or set global resource strings with the `registerI18n` method.\n */\nexport interface IgcDateRangePickerResourceStrings extends IgcCalendarResourceStrings {\n  separator?: string;\n  done?: string;\n  cancel?: string;\n  last7Days?: string;\n  last30Days?: string;\n  currentMonth?: string;\n  yearToDate?: string;\n}\n\n/**\n * @deprecated since 7.2.0. Use the newly provided resources from the\n * igniteui-i18n-resources package.\n */\nexport const IgcDateRangePickerResourceStringsEN: IgcDateRangePickerResourceStrings =\n  {\n    ...convertToIgcResource(\n      DateRangePickerResourceStringsEN,\n      dateRangePickerResourcesMap\n    ),\n    ...IgcCalendarResourceStringEN,\n  };\n"]}