igniteui-webcomponents 7.2.3 → 7.3.0-beta.0

package/components/validation-container/validation-container.d.ts

@@ -1,5 +1,5 @@
 import { LitElement, nothing, type TemplateResult } from 'lit';
-import { type IgcFormControl } from '../common/mixins/forms/types.js';
+import { type IgcFormControl } from '#internals/mixins/forms/types.js';
 /** Configuration for the validation container. */
 interface ValidationContainerConfig {
     /** The id attribute for the validation container. */
@@ -21,21 +21,48 @@ interface ValidationContainerConfig {
 export default class IgcValidationContainerComponent extends LitElement {
     static readonly tagName = "igc-validator";
     static styles: import("lit").CSSResult[];
-    protected readonly _themes: import("../../theming/theming-controller.js").ThemingController;
     static register(): void;
+    /**
+     * Creates a validation container for the given form control.
+     *
+     * The container will render validation messages based on the control's validity state
+     * and projected content, and reflect the control's `invalid` state.
+     */
     static create(host: IgcFormControl, config?: ValidationContainerConfig): TemplateResult;
     private readonly _abortHandle;
     private _target;
-    private _hasSlottedContent;
+    /**
+     * Whether the container is in an invalid state.
+     *
+     * This is reflected from the target's `invalid` property,
+     * and is used to determine whether to render the validation message slots.
+     */
     invalid: boolean;
+    /**
+     * The form control whose validity state is being rendered. The target's `invalid`
+     * property is reflected to the container, and its validity state is used to
+     * determine which validation message slots to render.
+     *
+     * @remarks The target must be set for the container to function, and should be
+     * set before the first update cycle for SSR compatibility. When using the
+     * `create` method, the target is set automatically.
+     */
     set target(value: IgcFormControl);
     get target(): IgcFormControl;
+    constructor();
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     /** @internal */
     handleEvent(event: Event): void;
-    protected _renderValidationMessage(slotName: string): TemplateResult;
-    protected _renderValidationSlots(validity: ValidityState, projected?: boolean): Generator<TemplateResult>;
-    protected _renderHelper(): TemplateResult | typeof nothing;
+    /**
+     * Collects the projection state of the container slots in a single DOM pass.
+     *
+     * @returns Whether every slot is empty and the set of non-empty validation
+     * slot names (i.e. excluding `helper-text`).
+     */
+    private _collectProjectedSlots;
+    protected _renderValidationMessage(slotName: string, projectedSlots: ReadonlySet<string>): TemplateResult;
+    protected _renderHelper(hasValidationProjection: boolean): TemplateResult | typeof nothing;
+    protected firstUpdated(): void;
     protected render(): TemplateResult;
 }
 declare global {

package/components/validation-container/validation-container.js

@@ -4,47 +4,45 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { cache } from 'lit/directives/cache.js';
+import { html, isServer, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { addThemingController } from '../../theming/theming-controller.js';
-import { createAbortHandle } from '../common/abort-handler.js';
-import { registerComponent } from '../common/definitions/register.js';
-import { InternalInvalidEvent, InternalResetEvent, } from '../common/mixins/forms/types.js';
-import { partMap } from '../common/part-map.js';
-import { isEmpty, toKebabCase } from '../common/util.js';
+import { createAbortHandle } from '#internals/abort-handler.js';
+import { registerComponent } from '#internals/definitions/register.js';
+import { InternalInvalidEvent, InternalResetEvent, } from '#internals/mixins/forms/types.js';
+import { partMap } from '#internals/part-map.js';
+import { isEmpty } from '#internals/utils/arrays.js';
+import { toKebabCase } from '#internals/utils/strings.js';
+import { addThemingController } from '#theming/theming-controller.js';
 import IgcIconComponent from '../icon/icon.js';
 import { all as inputThemes } from '../input/themes/themes.js';
 import { styles as shared } from './themes/shared/validator.common.css.js';
 import { styles } from './themes/validator.base.css.js';
-const VALIDATION_SLOTS_SELECTOR = 'slot:not([name="helper-text"])';
 const ALL_SLOTS_SELECTOR = 'slot';
 const QUERY_CONFIG = { flatten: true };
-function getValidationSlots(element) {
-    return element.renderRoot.querySelectorAll(VALIDATION_SLOTS_SELECTOR);
-}
-function hasProjection(element) {
-    const allSlots = element.renderRoot.querySelectorAll(ALL_SLOTS_SELECTOR);
-    return Array.from(allSlots).every((slot) => isEmpty(slot.assignedElements(QUERY_CONFIG)));
-}
-function hasProjectedValidation(element, slotName) {
-    const slots = Array.from(getValidationSlots(element));
-    if (slotName) {
-        return slots
-            .filter((slot) => slot.name === slotName)
-            .some((slot) => !isEmpty(slot.assignedElements(QUERY_CONFIG)));
+const VALIDITY_KEYS = [
+    'badInput',
+    'customError',
+    'patternMismatch',
+    'rangeOverflow',
+    'rangeUnderflow',
+    'stepMismatch',
+    'tooLong',
+    'tooShort',
+    'typeMismatch',
+    'valueMissing',
+];
+function* activeValidationSlots(validity) {
+    if (!validity.valid) {
+        yield 'invalid';
+    }
+    for (const key of VALIDITY_KEYS) {
+        if (validity[key]) {
+            yield toKebabCase(key);
+        }
     }
-    return slots.some((slot) => !isEmpty(slot.assignedElements(QUERY_CONFIG)));
 }
 export default class IgcValidationContainerComponent extends LitElement {
-    constructor() {
-        super(...arguments);
-        this._themes = addThemingController(this, inputThemes);
-        this._abortHandle = createAbortHandle();
-        this._hasSlottedContent = false;
-        this.invalid = false;
-    }
     static { this.tagName = 'igc-validator'; }
     static { this.styles = [styles, shared]; }
     static register() {
@@ -57,7 +55,11 @@ export default class IgcValidationContainerComponent extends LitElement {
         const helperText = config.hasHelperText
             ? html `<slot name="helper-text" slot="helper-text"></slot>`
             : nothing;
-        const validationSlots = IgcValidationContainerComponent.prototype._renderValidationSlots(host.validity, true);
+        const validationSlots = host.hasUpdated
+            ? Iterator.from(activeValidationSlots(host.validity))
+                .map((name) => html `<slot name=${name} slot=${name}></slot>`)
+                .toArray()
+            : nothing;
         return html `
       <igc-validator
         id=${ifDefined(config.id)}
@@ -84,6 +86,12 @@ export default class IgcValidationContainerComponent extends LitElement {
     get target() {
         return this._target;
     }
+    constructor() {
+        super();
+        this._abortHandle = createAbortHandle();
+        this.invalid = false;
+        addThemingController(this, inputThemes);
+    }
     createRenderRoot() {
         const root = super.createRenderRoot();
         root.addEventListener('slotchange', this);
@@ -97,18 +105,29 @@ export default class IgcValidationContainerComponent extends LitElement {
             case InternalResetEvent:
                 this.invalid = false;
                 break;
-            case 'slotchange': {
-                const newHasSlottedContent = hasProjectedValidation(this);
-                if (this._hasSlottedContent !== newHasSlottedContent) {
-                    this._hasSlottedContent = newHasSlottedContent;
-                }
-                break;
-            }
         }
         this.requestUpdate();
     }
-    _renderValidationMessage(slotName) {
-        const hasProjectedIcon = hasProjectedValidation(this, slotName);
+    _collectProjectedSlots() {
+        const validation = new Set();
+        if (isServer || !this.hasUpdated) {
+            return { isProjectionEmpty: false, validation };
+        }
+        const slots = Array.from(this.renderRoot.querySelectorAll(ALL_SLOTS_SELECTOR));
+        let isProjectionEmpty = true;
+        for (const slot of slots) {
+            if (isEmpty(slot.assignedElements(QUERY_CONFIG))) {
+                continue;
+            }
+            isProjectionEmpty = false;
+            if (slot.name && slot.name !== 'helper-text') {
+                validation.add(slot.name);
+            }
+        }
+        return { isProjectionEmpty, validation };
+    }
+    _renderValidationMessage(slotName, projectedSlots) {
+        const hasProjectedIcon = projectedSlots.has(slotName);
         const parts = { 'validation-message': true, empty: !hasProjectedIcon };
         const icon = hasProjectedIcon
             ? html `
@@ -119,45 +138,37 @@ export default class IgcValidationContainerComponent extends LitElement {
           ></igc-icon>
         `
             : nothing;
-        return html `
-      <div part=${partMap(parts)}>
-        ${icon}
-        <slot name=${slotName}></slot>
-      </div>
-    `;
-    }
-    *_renderValidationSlots(validity, projected = false) {
-        if (!validity.valid) {
-            yield projected
-                ? html `<slot name="invalid" slot="invalid"></slot>`
-                : this._renderValidationMessage('invalid');
-        }
-        for (const key in validity) {
-            if (key !== 'valid' && validity[key]) {
-                const name = toKebabCase(key);
-                yield projected
-                    ? html `<slot name=${name} slot=${name}></slot>`
-                    : this._renderValidationMessage(name);
-            }
-        }
+        return html `<div part=${partMap(parts)}>
+      ${icon}<slot name=${slotName}></slot>
+    </div>`;
     }
-    _renderHelper() {
-        return this.invalid && this._hasSlottedContent
+    _renderHelper(hasValidationProjection) {
+        return this.invalid && hasValidationProjection
             ? nothing
             : html `<slot name="helper-text"></slot>`;
     }
+    firstUpdated() {
+        if (this.invalid) {
+            queueMicrotask(() => this.requestUpdate());
+        }
+    }
     render() {
-        const slots = cache(this.invalid ? this._renderValidationSlots(this.target.validity) : nothing);
+        const { isProjectionEmpty, validation } = this._collectProjectedSlots();
+        const messages = this.hasUpdated && this.invalid
+            ? Iterator.from(activeValidationSlots(this.target.validity))
+                .map((name) => this._renderValidationMessage(name, validation))
+                .toArray()
+            : nothing;
         return html `
-      <div part=${partMap({ 'helper-text': true, empty: hasProjection(this) })}>
-        ${slots}${this._renderHelper()}
+      <div
+        part=${partMap({ 'helper-text': true, empty: isProjectionEmpty })}
+        aria-live="polite"
+      >
+        ${messages}${this._renderHelper(!isEmpty(validation))}
       </div>
     `;
     }
 }
-__decorate([
-    state()
-], IgcValidationContainerComponent.prototype, "_hasSlottedContent", void 0);
 __decorate([
     property({ type: Boolean })
 ], IgcValidationContainerComponent.prototype, "invalid", void 0);

package/components/validation-container/validation-container.js.map

@@ -1 +1 @@
-{"version":3,"file":"validation-container.js","sourceRoot":"","sources":["../../../src/components/validation-container/validation-container.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { cache } from 'lit/directives/cache.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport { createAbortHandle } from '../common/abort-handler.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport {\n  type IgcFormControl,\n  InternalInvalidEvent,\n  InternalResetEvent,\n} from '../common/mixins/forms/types.js';\nimport { partMap } from '../common/part-map.js';\nimport { isEmpty, toKebabCase } from '../common/util.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport { all as inputThemes } from '../input/themes/themes.js';\nimport { styles as shared } from './themes/shared/validator.common.css.js';\nimport { styles } from './themes/validator.base.css.js';\n\n/** Configuration for the validation container. */\ninterface ValidationContainerConfig {\n  /** The id attribute for the validation container. */\n  id?: string;\n  /** Project the validation container to the given slot inside the host shadow DOM. */\n  slot?: string;\n  /** Additional part(s) that should be bound to the validation container. */\n  part?: string;\n  /** Whether the validation container should expose a helper-text slot. */\n  hasHelperText?: boolean;\n}\n\nconst VALIDATION_SLOTS_SELECTOR = 'slot:not([name=\"helper-text\"])';\nconst ALL_SLOTS_SELECTOR = 'slot';\nconst QUERY_CONFIG: AssignedNodesOptions = { flatten: true };\n\nfunction getValidationSlots(\n  element: IgcValidationContainerComponent\n): NodeListOf<HTMLSlotElement> {\n  return element.renderRoot.querySelectorAll<HTMLSlotElement>(\n    VALIDATION_SLOTS_SELECTOR\n  );\n}\n\nfunction hasProjection(element: IgcValidationContainerComponent): boolean {\n  const allSlots =\n    element.renderRoot.querySelectorAll<HTMLSlotElement>(ALL_SLOTS_SELECTOR);\n  return Array.from(allSlots).every((slot) =>\n    isEmpty(slot.assignedElements(QUERY_CONFIG))\n  );\n}\n\nfunction hasProjectedValidation(\n  element: IgcValidationContainerComponent,\n  slotName?: string\n): boolean {\n  const slots = Array.from(getValidationSlots(element));\n\n  if (slotName) {\n    return slots\n      .filter((slot) => slot.name === slotName)\n      .some((slot) => !isEmpty(slot.assignedElements(QUERY_CONFIG)));\n  }\n\n  return slots.some((slot) => !isEmpty(slot.assignedElements(QUERY_CONFIG)));\n}\n\n/* blazorSuppress */\n/**\n * @element igc-validator\n *\n * @csspart helper-text - The base wrapper\n * @csspart validation-message - The validation error message container\n * @csspart validation-icon - The validation error icon\n */\nexport default class IgcValidationContainerComponent extends LitElement {\n  public static readonly tagName = 'igc-validator';\n  public static override styles = [styles, shared];\n\n  protected readonly _themes = addThemingController(this, inputThemes);\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcValidationContainerComponent, IgcIconComponent);\n  }\n\n  public static create(\n    host: IgcFormControl,\n    config: ValidationContainerConfig = {\n      id: 'helper-text',\n      hasHelperText: true,\n    }\n  ): TemplateResult {\n    const helperText = config.hasHelperText\n      ? html`<slot name=\"helper-text\" slot=\"helper-text\"></slot>`\n      : nothing;\n\n    const validationSlots =\n      IgcValidationContainerComponent.prototype._renderValidationSlots(\n        host.validity,\n        true\n      );\n\n    return html`\n      <igc-validator\n        id=${ifDefined(config.id)}\n        part=${ifDefined(config.part)}\n        slot=${ifDefined(config.slot)}\n        ?invalid=${host.invalid}\n        .target=${host}\n        exportparts=\"helper-text, validation-message, validation-icon\"\n      >\n        ${helperText}${validationSlots}\n      </igc-validator>\n    `;\n  }\n\n  private readonly _abortHandle = createAbortHandle();\n\n  private _target!: IgcFormControl;\n\n  @state()\n  private _hasSlottedContent = false;\n\n  @property({ type: Boolean })\n  public invalid = false;\n\n  @property({ attribute: false })\n  public set target(value: IgcFormControl) {\n    if (this._target === value) {\n      return;\n    }\n\n    this._abortHandle.abort();\n    const { signal } = this._abortHandle;\n\n    this._target = value;\n    this._target.addEventListener(InternalInvalidEvent, this, { signal });\n    this._target.addEventListener(InternalResetEvent, this, { signal });\n  }\n\n  public get target(): IgcFormControl {\n    return this._target;\n  }\n\n  protected override createRenderRoot(): HTMLElement | DocumentFragment {\n    const root = super.createRenderRoot();\n    root.addEventListener('slotchange', this);\n    return root;\n  }\n\n  /** @internal */\n  public handleEvent(event: Event): void {\n    switch (event.type) {\n      case InternalInvalidEvent:\n        this.invalid = true;\n        break;\n      case InternalResetEvent:\n        this.invalid = false;\n        break;\n      case 'slotchange': {\n        const newHasSlottedContent = hasProjectedValidation(this);\n        if (this._hasSlottedContent !== newHasSlottedContent) {\n          this._hasSlottedContent = newHasSlottedContent;\n        }\n        break;\n      }\n    }\n\n    this.requestUpdate();\n  }\n\n  protected _renderValidationMessage(slotName: string): TemplateResult {\n    const hasProjectedIcon = hasProjectedValidation(this, slotName);\n    const parts = { 'validation-message': true, empty: !hasProjectedIcon };\n    const icon = hasProjectedIcon\n      ? html`\n          <igc-icon\n            aria-hidden=\"true\"\n            name=\"error\"\n            part=\"validation-icon\"\n          ></igc-icon>\n        `\n      : nothing;\n\n    return html`\n      <div part=${partMap(parts)}>\n        ${icon}\n        <slot name=${slotName}></slot>\n      </div>\n    `;\n  }\n\n  protected *_renderValidationSlots(\n    validity: ValidityState,\n    projected = false\n  ): Generator<TemplateResult> {\n    if (!validity.valid) {\n      yield projected\n        ? html`<slot name=\"invalid\" slot=\"invalid\"></slot>`\n        : this._renderValidationMessage('invalid');\n    }\n\n    for (const key in validity) {\n      if (key !== 'valid' && validity[key as keyof ValidityState]) {\n        const name = toKebabCase(key);\n        yield projected\n          ? html`<slot name=${name} slot=${name}></slot>`\n          : this._renderValidationMessage(name);\n      }\n    }\n  }\n\n  protected _renderHelper(): TemplateResult | typeof nothing {\n    return this.invalid && this._hasSlottedContent\n      ? nothing\n      : html`<slot name=\"helper-text\"></slot>`;\n  }\n\n  protected override render(): TemplateResult {\n    const slots = cache(\n      this.invalid ? this._renderValidationSlots(this.target.validity) : nothing\n    );\n\n    return html`\n      <div part=${partMap({ 'helper-text': true, empty: hasProjection(this) })}>\n        ${slots}${this._renderHelper()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-validator': IgcValidationContainerComponent;\n  }\n}\n"]}
+{"version":3,"file":"validation-container.js","sourceRoot":"","sources":["../../../src/components/validation-container/validation-container.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAEL,oBAAoB,EACpB,kBAAkB,GACnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,gBAAgB,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,GAAG,IAAI,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,yCAAyC,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AAcxD,MAAM,kBAAkB,GAAG,MAAM,CAAC;AAClC,MAAM,YAAY,GAAyB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAM7D,MAAM,aAAa,GAA4C;IAC7D,UAAU;IACV,aAAa;IACb,iBAAiB;IACjB,eAAe;IACf,gBAAgB;IAChB,cAAc;IACd,SAAS;IACT,UAAU;IACV,cAAc;IACd,cAAc;CACf,CAAC;AAMF,QAAQ,CAAC,CAAC,qBAAqB,CAAC,QAAuB;IACrD,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;QACpB,MAAM,SAAS,CAAC;IAClB,CAAC;IAED,KAAK,MAAM,GAAG,IAAI,aAAa,EAAE,CAAC;QAChC,IAAI,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;YAClB,MAAM,WAAW,CAAC,GAAG,CAAC,CAAC;QACzB,CAAC;IACH,CAAC;AACH,CAAC;AAUD,MAAM,CAAC,OAAO,OAAO,+BAAgC,SAAQ,UAAU;aAC9C,YAAO,GAAG,eAAe,AAAlB,CAAmB;aAC1B,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAG1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,+BAA+B,EAAE,gBAAgB,CAAC,CAAC;IACvE,CAAC;IAQM,MAAM,CAAC,MAAM,CAClB,IAAoB,EACpB,SAAoC;QAClC,EAAE,EAAE,aAAa;QACjB,aAAa,EAAE,IAAI;KACpB;QAED,MAAM,UAAU,GAAG,MAAM,CAAC,aAAa;YACrC,CAAC,CAAC,IAAI,CAAA,qDAAqD;YAC3D,CAAC,CAAC,OAAO,CAAC;QAIZ,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU;YACrC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;iBAChD,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA,cAAc,IAAI,SAAS,IAAI,UAAU,CAAC;iBAC5D,OAAO,EAAE;YACd,CAAC,CAAC,OAAO,CAAC;QAEZ,OAAO,IAAI,CAAA;;aAEF,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;eAClB,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC;eACtB,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC;mBAClB,IAAI,CAAC,OAAO;kBACb,IAAI;;;UAGZ,UAAU,GAAG,eAAe;;KAEjC,CAAC;IACJ,CAAC;IAwBD,IAAW,MAAM,CAAC,KAAqB;QACrC,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC1B,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC;QAErC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,oBAAoB,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;QACtE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;IACtE,CAAC;IAED,IAAW,MAAM;QACf,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAxCO,iBAAY,GAAG,iBAAiB,EAAE,CAAC;QAU7C,YAAO,GAAG,KAAK,CAAC;QA+BrB,oBAAoB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IAC1C,CAAC;IAEkB,gBAAgB;QACjC,MAAM,IAAI,GAAG,KAAK,CAAC,gBAAgB,EAAE,CAAC;QACtC,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;QAC1C,OAAO,IAAI,CAAC;IACd,CAAC;IAGM,WAAW,CAAC,KAAY;QAC7B,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;YACnB,KAAK,oBAAoB;gBACvB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;gBACpB,MAAM;YACR,KAAK,kBAAkB;gBACrB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;gBACrB,MAAM;QACV,CAAC;QAED,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAQO,sBAAsB;QAI5B,MAAM,UAAU,GAAG,IAAI,GAAG,EAAU,CAAC;QAErC,IAAI,QAAQ,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACjC,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;QAClD,CAAC;QAED,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAkB,kBAAkB,CAAC,CACtE,CAAC;QACF,IAAI,iBAAiB,GAAG,IAAI,CAAC;QAE7B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACzB,IAAI,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC;gBACjD,SAAS;YACX,CAAC;YAED,iBAAiB,GAAG,KAAK,CAAC;YAC1B,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,KAAK,aAAa,EAAE,CAAC;gBAC7C,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC5B,CAAC;QACH,CAAC;QAED,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAC;IAC3C,CAAC;IAES,wBAAwB,CAChC,QAAgB,EAChB,cAAmC;QAEnC,MAAM,gBAAgB,GAAG,cAAc,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACtD,MAAM,KAAK,GAAG,EAAE,oBAAoB,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,gBAAgB,EAAE,CAAC;QACvE,MAAM,IAAI,GAAG,gBAAgB;YAC3B,CAAC,CAAC,IAAI,CAAA;;;;;;SAMH;YACH,CAAC,CAAC,OAAO,CAAC;QAEZ,OAAO,IAAI,CAAA,aAAa,OAAO,CAAC,KAAK,CAAC;QAClC,IAAI,cAAc,QAAQ;WACvB,CAAC;IACV,CAAC;IAES,aAAa,CACrB,uBAAgC;QAEhC,OAAO,IAAI,CAAC,OAAO,IAAI,uBAAuB;YAC5C,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA,kCAAkC,CAAC;IAC7C,CAAC;IAEkB,YAAY;QAM7B,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QAC7C,CAAC;IACH,CAAC;IAEkB,MAAM;QACvB,MAAM,EAAE,iBAAiB,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC;QACxE,MAAM,QAAQ,GACZ,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,OAAO;YAC7B,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;iBACvD,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,wBAAwB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;iBAC9D,OAAO,EAAE;YACd,CAAC,CAAC,OAAO,CAAC;QAEd,OAAO,IAAI,CAAA;;eAEA,OAAO,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC;;;UAG/D,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;;KAExD,CAAC;IACJ,CAAC;;AAlJM;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gEACL;AAYvB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6DAY9B","sourcesContent":["import { html, isServer, LitElement, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { createAbortHandle } from '#internals/abort-handler.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport {\n  type IgcFormControl,\n  InternalInvalidEvent,\n  InternalResetEvent,\n} from '#internals/mixins/forms/types.js';\nimport { partMap } from '#internals/part-map.js';\nimport { isEmpty } from '#internals/utils/arrays.js';\nimport { toKebabCase } from '#internals/utils/strings.js';\nimport { addThemingController } from '#theming/theming-controller.js';\nimport IgcIconComponent from '../icon/icon.js';\nimport { all as inputThemes } from '../input/themes/themes.js';\nimport { styles as shared } from './themes/shared/validator.common.css.js';\nimport { styles } from './themes/validator.base.css.js';\n\n/** Configuration for the validation container. */\ninterface ValidationContainerConfig {\n  /** The id attribute for the validation container. */\n  id?: string;\n  /** Project the validation container to the given slot inside the host shadow DOM. */\n  slot?: string;\n  /** Additional part(s) that should be bound to the validation container. */\n  part?: string;\n  /** Whether the validation container should expose a helper-text slot. */\n  hasHelperText?: boolean;\n}\n\nconst ALL_SLOTS_SELECTOR = 'slot';\nconst QUERY_CONFIG: AssignedNodesOptions = { flatten: true };\n\n/**\n * Validity flags rendered as validation message slots, in a stable order so the\n * generated slots are deterministic across browsers.\n */\nconst VALIDITY_KEYS: ReadonlyArray<keyof ValidityStateFlags> = [\n  'badInput',\n  'customError',\n  'patternMismatch',\n  'rangeOverflow',\n  'rangeUnderflow',\n  'stepMismatch',\n  'tooLong',\n  'tooShort',\n  'typeMismatch',\n  'valueMissing',\n];\n\n/**\n * Yields the active validation slot names for the given validity state, in a\n * stable order (`invalid` first, then each failing constraint).\n */\nfunction* activeValidationSlots(validity: ValidityState): Generator<string> {\n  if (!validity.valid) {\n    yield 'invalid';\n  }\n\n  for (const key of VALIDITY_KEYS) {\n    if (validity[key]) {\n      yield toKebabCase(key);\n    }\n  }\n}\n\n/* blazorSuppress */\n/**\n * @element igc-validator\n *\n * @csspart helper-text - The base wrapper\n * @csspart validation-message - The validation error message container\n * @csspart validation-icon - The validation error icon\n */\nexport default class IgcValidationContainerComponent extends LitElement {\n  public static readonly tagName = 'igc-validator';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(IgcValidationContainerComponent, IgcIconComponent);\n  }\n\n  /**\n   * Creates a validation container for the given form control.\n   *\n   * The container will render validation messages based on the control's validity state\n   * and projected content, and reflect the control's `invalid` state.\n   */\n  public static create(\n    host: IgcFormControl,\n    config: ValidationContainerConfig = {\n      id: 'helper-text',\n      hasHelperText: true,\n    }\n  ): TemplateResult {\n    const helperText = config.hasHelperText\n      ? html`<slot name=\"helper-text\" slot=\"helper-text\"></slot>`\n      : nothing;\n\n    // `hasUpdated` is false during SSR and the host's hydrating render, so both\n    // emit `nothing`. The real validation slots are projected post-hydration.\n    const validationSlots = host.hasUpdated\n      ? Iterator.from(activeValidationSlots(host.validity))\n          .map((name) => html`<slot name=${name} slot=${name}></slot>`)\n          .toArray()\n      : nothing;\n\n    return html`\n      <igc-validator\n        id=${ifDefined(config.id)}\n        part=${ifDefined(config.part)}\n        slot=${ifDefined(config.slot)}\n        ?invalid=${host.invalid}\n        .target=${host}\n        exportparts=\"helper-text, validation-message, validation-icon\"\n      >\n        ${helperText}${validationSlots}\n      </igc-validator>\n    `;\n  }\n\n  private readonly _abortHandle = createAbortHandle();\n  private _target!: IgcFormControl;\n\n  /**\n   * Whether the container is in an invalid state.\n   *\n   * This is reflected from the target's `invalid` property,\n   * and is used to determine whether to render the validation message slots.\n   */\n  @property({ type: Boolean })\n  public invalid = false;\n\n  /**\n   * The form control whose validity state is being rendered. The target's `invalid`\n   * property is reflected to the container, and its validity state is used to\n   * determine which validation message slots to render.\n   *\n   * @remarks The target must be set for the container to function, and should be\n   * set before the first update cycle for SSR compatibility. When using the\n   * `create` method, the target is set automatically.\n   */\n  @property({ attribute: false })\n  public set target(value: IgcFormControl) {\n    if (this._target === value) {\n      return;\n    }\n\n    this._abortHandle.abort();\n    const { signal } = this._abortHandle;\n\n    this._target = value;\n    this._target.addEventListener(InternalInvalidEvent, this, { signal });\n    this._target.addEventListener(InternalResetEvent, this, { signal });\n  }\n\n  public get target(): IgcFormControl {\n    return this._target;\n  }\n\n  constructor() {\n    super();\n    addThemingController(this, inputThemes);\n  }\n\n  protected override createRenderRoot(): HTMLElement | DocumentFragment {\n    const root = super.createRenderRoot();\n    root.addEventListener('slotchange', this);\n    return root;\n  }\n\n  /** @internal */\n  public handleEvent(event: Event): void {\n    switch (event.type) {\n      case InternalInvalidEvent:\n        this.invalid = true;\n        break;\n      case InternalResetEvent:\n        this.invalid = false;\n        break;\n    }\n\n    this.requestUpdate();\n  }\n\n  /**\n   * Collects the projection state of the container slots in a single DOM pass.\n   *\n   * @returns Whether every slot is empty and the set of non-empty validation\n   * slot names (i.e. excluding `helper-text`).\n   */\n  private _collectProjectedSlots(): {\n    isProjectionEmpty: boolean;\n    validation: Set<string>;\n  } {\n    const validation = new Set<string>();\n\n    if (isServer || !this.hasUpdated) {\n      return { isProjectionEmpty: false, validation };\n    }\n\n    const slots = Array.from(\n      this.renderRoot.querySelectorAll<HTMLSlotElement>(ALL_SLOTS_SELECTOR)\n    );\n    let isProjectionEmpty = true;\n\n    for (const slot of slots) {\n      if (isEmpty(slot.assignedElements(QUERY_CONFIG))) {\n        continue;\n      }\n\n      isProjectionEmpty = false;\n      if (slot.name && slot.name !== 'helper-text') {\n        validation.add(slot.name);\n      }\n    }\n\n    return { isProjectionEmpty, validation };\n  }\n\n  protected _renderValidationMessage(\n    slotName: string,\n    projectedSlots: ReadonlySet<string>\n  ): TemplateResult {\n    const hasProjectedIcon = projectedSlots.has(slotName);\n    const parts = { 'validation-message': true, empty: !hasProjectedIcon };\n    const icon = hasProjectedIcon\n      ? html`\n          <igc-icon\n            aria-hidden=\"true\"\n            name=\"error\"\n            part=\"validation-icon\"\n          ></igc-icon>\n        `\n      : nothing;\n\n    return html`<div part=${partMap(parts)}>\n      ${icon}<slot name=${slotName}></slot>\n    </div>`;\n  }\n\n  protected _renderHelper(\n    hasValidationProjection: boolean\n  ): TemplateResult | typeof nothing {\n    return this.invalid && hasValidationProjection\n      ? nothing\n      : html`<slot name=\"helper-text\"></slot>`;\n  }\n\n  protected override firstUpdated(): void {\n    // The first render is intentionally neutral to match the SSR output during\n    // hydration. Only reconcile when the field hydrated in an invalid state, and\n    // do it off the current update cycle so we don't schedule an update as a side\n    // effect of the one in progress, projecting the real validation messages now\n    // that `hasUpdated` is true.\n    if (this.invalid) {\n      queueMicrotask(() => this.requestUpdate());\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const { isProjectionEmpty, validation } = this._collectProjectedSlots();\n    const messages =\n      this.hasUpdated && this.invalid\n        ? Iterator.from(activeValidationSlots(this.target.validity))\n            .map((name) => this._renderValidationMessage(name, validation))\n            .toArray()\n        : nothing;\n\n    return html`\n      <div\n        part=${partMap({ 'helper-text': true, empty: isProjectionEmpty })}\n        aria-live=\"polite\"\n      >\n        ${messages}${this._renderHelper(!isEmpty(validation))}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-validator': IgcValidationContainerComponent;\n  }\n}\n"]}

package/components/virtualization/engine.d.ts

@@ -0,0 +1,92 @@
+import type { ScrollAlignment, VisibleRange } from './types.js';
+/**
+ * Pure scroll-math engine for a single axis of virtual scrolling. All size
+ * state is held in a Fenwick tree.
+ *
+ * ### Virtual vs DOM coordinates
+ *
+ * Browsers cap how far an element can be scrolled. When the summed item size
+ * exceeds that cap, the engine compresses the *virtual* space (`0…totalSize`)
+ * into the *DOM* space the browser can represent (`0…domSize`) by the factor
+ * `_virtualRatio`. Every offset crossing that boundary is scaled: incoming
+ * scroll positions are multiplied by the ratio, outgoing offsets divided by
+ * it. Item sizes render at their real px size and so are always virtual.
+ */
+export declare class VirtualScrollEngine {
+    private _maxBrowserSize;
+    /**
+     * The ratio `totalSize / maxBrowserSize` when `totalSize` exceeds the
+     * maximum DOM coordinate the browser supports; `1` otherwise.
+     * Used to map virtual scroll positions to DOM scroll positions.
+     */
+    private _virtualRatio;
+    /** Binary Indexed Tree for O(log N) size queries and updates. */
+    private _tree;
+    /**
+     * Called whenever item sizes or the item count change, e.g.
+     * `() => this.requestUpdate()`.
+     */
+    onSizeChange: (() => void) | null;
+    /** Total virtual size of all items in px. */
+    get totalSize(): number;
+    /** Total size in DOM space, clamped to the maximum browser size. */
+    get domSize(): number;
+    /** Probes the document for the maximum browser size and rescales. */
+    initMaxBrowserSize(doc: Document): void;
+    /**
+     * Grows or shrinks the internal sizes array to `length`. Measured sizes
+     * below `retainCount` are preserved; the rest is refilled with
+     * `estimatedSize` and marked unmeasured. Callers that only append can leave
+     * `retainCount` at its default; callers whose data changed identity at some
+     * index must pass it, so the stale measurements behind it are discarded.
+     */
+    resize(length: number, estimatedSize: number, retainCount?: number): void;
+    /** Records the measured DOM size for a single item. */
+    measureItem(index: number, size: number): void;
+    /**
+     * Applies a new estimated size to every item not yet measured in the DOM.
+     * Use this when `estimatedItemSize` changes but the item count doesn't, so
+     * `resize` would be a no-op.
+     */
+    updateEstimatedSize(estimatedSize: number): void;
+    /**
+     * Returns the DOM scroll offset in px that puts the item at `index` at the
+     * leading edge of the viewport.
+     */
+    getScrollOffsetForIndex(index: number): number;
+    /**
+     * The largest DOM scroll offset the host can reach for the given viewport
+     * size. Requesting anything beyond it silently does nothing, so offsets
+     * handed out to a caller that waits for the scroll to settle are clamped
+     * to it.
+     */
+    private _getMaxScrollOffset;
+    /**
+     * Returns the DOM scroll offset that positions the item at `index`
+     * according to `align` within a `viewportSize` px viewport, clamped to the
+     * reachable scroll range.
+     *
+     * The slack is computed in virtual space against the item's real size and
+     * converted to DOM space once, at the end: a DOM pixel is worth
+     * `_virtualRatio` virtual pixels, so mixing the two would scale the slack.
+     */
+    getAlignedScrollOffset(index: number, viewportSize: number, align: ScrollAlignment): number;
+    /**
+     * Whether the item at `index` needs no scrolling to be seen at the given DOM
+     * scroll position: either it sits entirely inside the viewport, or it is
+     * larger than the viewport and already covers it end to end. The latter
+     * mirrors native `scrollIntoView({ block: 'nearest' })`.
+     */
+    isIndexInView(index: number, scrollPosition: number, viewportSize: number): boolean;
+    /**
+     * Returns the visible + over-scanned item range for the given scroll state.
+     */
+    getVisibleRange(scrollPosition: number, viewportSize: number, overScan: number): VisibleRange;
+    /**
+     * Sum of the actual sizes of the items in [startIndex, endIndex]. Clamps the
+     * content translate offset so rendered items never overflow past `domSize`
+     * under coordinate compression.
+     */
+    getPhysicalRangeSize(startIndex: number, endIndex: number): number;
+    private _updateVirtualRatio;
+}

package/components/virtualization/engine.js

@@ -0,0 +1,217 @@
+import { clamp } from '#internals/utils/math.js';
+const _maxBrowserSizeCache = new WeakMap();
+function getMaxBrowserSizeProbePx(doc) {
+    const cached = _maxBrowserSizeCache.get(doc);
+    if (cached !== undefined) {
+        return cached;
+    }
+    const container = doc.body ?? doc.documentElement;
+    if (!container) {
+        return Number.POSITIVE_INFINITY;
+    }
+    const div = doc.createElement('div');
+    div.style.position = 'absolute';
+    div.style.top = `${Number.MAX_SAFE_INTEGER}px`;
+    div.style.width = '0';
+    div.style.height = '0';
+    div.style.visibility = 'hidden';
+    container.appendChild(div);
+    const scrollOffset = doc.documentElement?.scrollTop ?? 0;
+    const size = Math.abs(div.getBoundingClientRect().top) + scrollOffset;
+    container.removeChild(div);
+    _maxBrowserSizeCache.set(doc, size);
+    return size;
+}
+function clampIndex(index, length) {
+    return clamp(index, 0, length - 1);
+}
+function buildTree(tree, sizes) {
+    const length = sizes.length;
+    let total = 0;
+    for (let i = 1; i <= length; i++) {
+        tree[i] += sizes[i - 1];
+        total += sizes[i - 1];
+        const j = i + (i & -i);
+        if (j <= length) {
+            tree[j] += tree[i];
+        }
+    }
+    return total;
+}
+class SizeTree {
+    constructor(length, sizes, tree, total, measured) {
+        this.length = length;
+        this._sizes = sizes;
+        this._tree = tree;
+        this._total = total;
+        this._measured = measured;
+        this._topBit = length > 0 ? 1 << (31 - Math.clz32(length)) : 0;
+    }
+    static filled(length, fillSize) {
+        return SizeTree._build(new Float64Array(length).fill(fillSize), new Uint8Array(length));
+    }
+    static _build(sizes, measured) {
+        const tree = new Float64Array(sizes.length + 1);
+        const total = buildTree(tree, sizes);
+        return new SizeTree(sizes.length, sizes, tree, total, measured);
+    }
+    get totalSize() {
+        return this._total;
+    }
+    prefixSum(i) {
+        let sum = 0;
+        for (let j = i; j > 0; j -= j & -j) {
+            sum += this._tree[j];
+        }
+        return sum;
+    }
+    update(index, newSize) {
+        if (index < 0 || index >= this.length)
+            return false;
+        const old = this._sizes[index];
+        this._measured[index] = 1;
+        if (old === newSize)
+            return false;
+        const delta = newSize - old;
+        this._sizes[index] = newSize;
+        this._total += delta;
+        for (let i = index + 1; i <= this.length; i += i & -i) {
+            this._tree[i] += delta;
+        }
+        return true;
+    }
+    cloneResized(newLength, fillSize, retainCount = newLength) {
+        const sizes = new Float64Array(newLength).fill(fillSize);
+        const measured = new Uint8Array(newLength);
+        const retained = Math.max(0, Math.min(this.length, newLength, retainCount));
+        sizes.set(this._sizes.subarray(0, retained));
+        measured.set(this._measured.subarray(0, retained));
+        return SizeTree._build(sizes, measured);
+    }
+    applyEstimate(estimatedSize) {
+        let changed = false;
+        for (let i = 0; i < this.length; i++) {
+            if (!this._measured[i] && this._sizes[i] !== estimatedSize) {
+                this._sizes[i] = estimatedSize;
+                changed = true;
+            }
+        }
+        if (!changed)
+            return false;
+        this._tree.fill(0);
+        this._total = buildTree(this._tree, this._sizes);
+        return true;
+    }
+    findIndexAtOffset(offset) {
+        if (offset <= 0 || this.length === 0)
+            return 0;
+        let idx = 0;
+        let remaining = offset;
+        for (let bit = this._topBit; bit > 0; bit >>= 1) {
+            const next = idx + bit;
+            if (next <= this.length && this._tree[next] <= remaining) {
+                idx = next;
+                remaining -= this._tree[idx];
+            }
+        }
+        return Math.min(this.length - 1, idx);
+    }
+}
+export class VirtualScrollEngine {
+    constructor() {
+        this._maxBrowserSize = Number.POSITIVE_INFINITY;
+        this._virtualRatio = 1;
+        this._tree = null;
+        this.onSizeChange = null;
+    }
+    get totalSize() {
+        return this._tree?.totalSize ?? 0;
+    }
+    get domSize() {
+        return this._virtualRatio !== 1 ? this._maxBrowserSize : this.totalSize;
+    }
+    initMaxBrowserSize(doc) {
+        this._maxBrowserSize = getMaxBrowserSizeProbePx(doc);
+        this._updateVirtualRatio();
+    }
+    resize(length, estimatedSize, retainCount = length) {
+        if (this._tree?.length === length && retainCount >= length)
+            return;
+        this._tree = this._tree
+            ? this._tree.cloneResized(length, estimatedSize, retainCount)
+            : SizeTree.filled(length, estimatedSize);
+        this._updateVirtualRatio();
+        this.onSizeChange?.();
+    }
+    measureItem(index, size) {
+        if (!this._tree?.update(index, size))
+            return;
+        this._updateVirtualRatio();
+        this.onSizeChange?.();
+    }
+    updateEstimatedSize(estimatedSize) {
+        if (!this._tree?.applyEstimate(estimatedSize))
+            return;
+        this._updateVirtualRatio();
+        this.onSizeChange?.();
+    }
+    getScrollOffsetForIndex(index) {
+        if (!this._tree || index <= 0)
+            return 0;
+        const clamped = Math.min(index, this._tree.length);
+        return this._tree.prefixSum(clamped) / this._virtualRatio;
+    }
+    _getMaxScrollOffset(viewportSize) {
+        return Math.max(0, this.domSize - viewportSize);
+    }
+    getAlignedScrollOffset(index, viewportSize, align) {
+        if (!this._tree || this._tree.length === 0)
+            return 0;
+        const clamped = clampIndex(index, this._tree.length);
+        const itemStart = this._tree.prefixSum(clamped);
+        let offset = itemStart;
+        if (align !== 'start') {
+            const itemEnd = this._tree.prefixSum(clamped + 1);
+            const slack = viewportSize - Math.max(0, itemEnd - itemStart);
+            offset -= align === 'center' ? slack / 2 : slack;
+        }
+        return clamp(offset / this._virtualRatio, 0, this._getMaxScrollOffset(viewportSize));
+    }
+    isIndexInView(index, scrollPosition, viewportSize) {
+        if (!this._tree || this._tree.length === 0)
+            return false;
+        const clamped = clampIndex(index, this._tree.length);
+        const itemStart = this._tree.prefixSum(clamped);
+        const itemEnd = this._tree.prefixSum(clamped + 1);
+        const viewStart = Math.max(0, scrollPosition) * this._virtualRatio;
+        const viewEnd = viewStart + viewportSize;
+        const contained = itemStart >= viewStart && itemEnd <= viewEnd;
+        const spanning = itemStart <= viewStart && itemEnd >= viewEnd;
+        return contained || spanning;
+    }
+    getVisibleRange(scrollPosition, viewportSize, overScan) {
+        if (!this._tree || this._tree.length === 0 || viewportSize <= 0) {
+            return { startIndex: 0, endIndex: -1 };
+        }
+        const startOffset = Math.max(0, scrollPosition) * this._virtualRatio;
+        const first = this._tree.findIndexAtOffset(startOffset);
+        const last = this._tree.findIndexAtOffset(startOffset + viewportSize);
+        return {
+            startIndex: Math.max(0, first - overScan),
+            endIndex: Math.min(this._tree.length - 1, last + overScan),
+        };
+    }
+    getPhysicalRangeSize(startIndex, endIndex) {
+        if (!this._tree)
+            return 0;
+        const start = Math.max(0, startIndex);
+        const end = Math.min(Math.max(endIndex + 1, start), this._tree.length);
+        return this._tree.prefixSum(end) - this._tree.prefixSum(start);
+    }
+    _updateVirtualRatio() {
+        const totalSize = this._tree?.totalSize ?? 0;
+        this._virtualRatio =
+            totalSize <= this._maxBrowserSize ? 1 : totalSize / this._maxBrowserSize;
+    }
+}
+//# sourceMappingURL=engine.js.map