@playcanvas/web-components 0.12.0 → 0.13.0

package/dist/colors.d.cts

@@ -0,0 +1 @@
+export declare const CSS_COLORS: Record<string, string>;

package/dist/components/button-component.d.cts

@@ -0,0 +1,186 @@
+import type { ButtonComponent } from 'playcanvas';
+import { Color, Vec4 } from 'playcanvas';
+import { ComponentElement } from './component.cjs';
+/**
+ * The ButtonComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-button/ | `<pc-button>`} elements.
+ * The ButtonComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * @category Components
+ */
+declare class ButtonComponentElement extends ComponentElement {
+    private _active;
+    private _image;
+    private _hitPadding;
+    private _transitionMode;
+    private _hoverTint;
+    private _pressedTint;
+    private _inactiveTint;
+    private _fadeDuration;
+    private _hoverSpriteAsset;
+    private _hoverSpriteFrame;
+    private _pressedSpriteAsset;
+    private _pressedSpriteFrame;
+    private _inactiveSpriteAsset;
+    private _inactiveSpriteFrame;
+    /** @ignore */
+    constructor();
+    protected getInitialComponentData(): Record<string, any>;
+    /**
+     * Gets the underlying PlayCanvas button component.
+     * @returns The button component.
+     */
+    get component(): ButtonComponent;
+    /**
+     * Sets whether the button is active and responds to input.
+     * @param value - Whether the button is active.
+     */
+    set active(value: boolean);
+    /**
+     * Gets whether the button is active.
+     * @returns Whether the button is active.
+     */
+    get active(): boolean;
+    /**
+     * Sets the reference (CSS selector, element id or entity name) to the `<pc-entity>` whose image
+     * element is used for visual transitions. Defaults to the button's own entity.
+     * @param value - The image entity reference.
+     */
+    set image(value: string);
+    /**
+     * Gets the reference to the `<pc-entity>` whose image element is used for visual transitions.
+     * @returns The image entity reference.
+     */
+    get image(): string;
+    /**
+     * Sets the padding used to expand the button's hit area, as a Vec4 (left, bottom, right, top).
+     * @param value - The hit padding.
+     */
+    set hitPadding(value: Vec4);
+    /**
+     * Gets the padding used to expand the button's hit area.
+     * @returns The hit padding.
+     */
+    get hitPadding(): Vec4;
+    /**
+     * Sets how the button reacts to being hovered/pressed. Can be `tint` or `sprite`. Defaults to
+     * `tint`.
+     * @param value - The transition mode.
+     */
+    set transitionMode(value: 'tint' | 'sprite');
+    /**
+     * Gets how the button reacts to being hovered/pressed.
+     * @returns The transition mode.
+     */
+    get transitionMode(): "tint" | "sprite";
+    /**
+     * Sets the tint color applied to the image entity when the button is hovered (tint transition
+     * mode).
+     * @param value - The hover tint.
+     */
+    set hoverTint(value: Color);
+    /**
+     * Gets the hover tint color.
+     * @returns The hover tint.
+     */
+    get hoverTint(): Color;
+    /**
+     * Sets the tint color applied to the image entity when the button is pressed (tint transition
+     * mode).
+     * @param value - The pressed tint.
+     */
+    set pressedTint(value: Color);
+    /**
+     * Gets the pressed tint color.
+     * @returns The pressed tint.
+     */
+    get pressedTint(): Color;
+    /**
+     * Sets the tint color applied to the image entity when the button is inactive (tint transition
+     * mode).
+     * @param value - The inactive tint.
+     */
+    set inactiveTint(value: Color);
+    /**
+     * Gets the inactive tint color.
+     * @returns The inactive tint.
+     */
+    get inactiveTint(): Color;
+    /**
+     * Sets the duration (in milliseconds) over which tint transitions are applied.
+     * @param value - The fade duration.
+     */
+    set fadeDuration(value: number);
+    /**
+     * Gets the duration over which tint transitions are applied.
+     * @returns The fade duration.
+     */
+    get fadeDuration(): number;
+    /**
+     * Sets the id of the `pc-asset` sprite shown when the button is hovered (sprite transition
+     * mode).
+     * @param value - The hover sprite asset id.
+     */
+    set hoverSpriteAsset(value: string);
+    /**
+     * Gets the id of the `pc-asset` sprite shown when the button is hovered.
+     * @returns The hover sprite asset id.
+     */
+    get hoverSpriteAsset(): string;
+    /**
+     * Sets the frame of the hover sprite to show.
+     * @param value - The hover sprite frame.
+     */
+    set hoverSpriteFrame(value: number);
+    /**
+     * Gets the frame of the hover sprite to show.
+     * @returns The hover sprite frame.
+     */
+    get hoverSpriteFrame(): number;
+    /**
+     * Sets the id of the `pc-asset` sprite shown when the button is pressed (sprite transition
+     * mode).
+     * @param value - The pressed sprite asset id.
+     */
+    set pressedSpriteAsset(value: string);
+    /**
+     * Gets the id of the `pc-asset` sprite shown when the button is pressed.
+     * @returns The pressed sprite asset id.
+     */
+    get pressedSpriteAsset(): string;
+    /**
+     * Sets the frame of the pressed sprite to show.
+     * @param value - The pressed sprite frame.
+     */
+    set pressedSpriteFrame(value: number);
+    /**
+     * Gets the frame of the pressed sprite to show.
+     * @returns The pressed sprite frame.
+     */
+    get pressedSpriteFrame(): number;
+    /**
+     * Sets the id of the `pc-asset` sprite shown when the button is inactive (sprite transition
+     * mode).
+     * @param value - The inactive sprite asset id.
+     */
+    set inactiveSpriteAsset(value: string);
+    /**
+     * Gets the id of the `pc-asset` sprite shown when the button is inactive.
+     * @returns The inactive sprite asset id.
+     */
+    get inactiveSpriteAsset(): string;
+    /**
+     * Sets the frame of the inactive sprite to show.
+     * @param value - The inactive sprite frame.
+     */
+    set inactiveSpriteFrame(value: number);
+    /**
+     * Gets the frame of the inactive sprite to show.
+     * @returns The inactive sprite frame.
+     */
+    get inactiveSpriteFrame(): number;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+}
+export { ButtonComponentElement };

package/dist/components/button-component.d.ts

@@ -1,6 +1,6 @@
 import type { ButtonComponent } from 'playcanvas';
 import { Color, Vec4 } from 'playcanvas';
-import { ComponentElement } from './component';
+import { ComponentElement } from './component.js';
 /**
  * The ButtonComponentElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-button/ | `<pc-button>`} elements.

package/dist/components/camera-component.d.cts

@@ -0,0 +1,253 @@
+import type { CameraComponent } from 'playcanvas';
+import { Color, Vec4 } from 'playcanvas';
+import { ComponentElement } from './component.cjs';
+/**
+ * The CameraComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-camera/ | `<pc-camera>`} elements.
+ * The CameraComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * @category Components
+ */
+declare class CameraComponentElement extends ComponentElement {
+    private _clearColor;
+    private _clearColorBuffer;
+    private _clearDepthBuffer;
+    private _clearStencilBuffer;
+    private _cullFaces;
+    private _farClip;
+    private _flipFaces;
+    private _fov;
+    private _frustumCulling;
+    private _gamma;
+    private _horizontalFov;
+    private _nearClip;
+    private _projection;
+    private _orthoHeight;
+    private _priority;
+    private _rect;
+    private _scissorRect;
+    private _tonemap;
+    /** @ignore */
+    constructor();
+    protected getInitialComponentData(): {
+        clearColor: Color;
+        clearColorBuffer: boolean;
+        clearDepthBuffer: boolean;
+        clearStencilBuffer: boolean;
+        cullFaces: boolean;
+        farClip: number;
+        flipFaces: boolean;
+        fov: number;
+        frustumCulling: boolean;
+        gammaCorrection: 0 | 1;
+        horizontalFov: boolean;
+        nearClip: number;
+        projection: number;
+        orthoHeight: number;
+        priority: number;
+        rect: Vec4;
+        scissorRect: Vec4;
+        toneMapping: number;
+    };
+    get xrAvailable(): boolean | null;
+    /**
+     * Starts the camera in XR mode.
+     * @param type - The type of XR mode to start.
+     * @param space - The space to start the camera in.
+     */
+    startXr(type: 'immersive-ar' | 'immersive-vr', space: 'bounded-floor' | 'local' | 'local-floor' | 'unbounded' | 'viewer'): void;
+    /**
+     * Ends the camera's XR mode.
+     */
+    endXr(): void;
+    /**
+     * Gets the underlying PlayCanvas camera component.
+     * @returns The camera component.
+     */
+    get component(): CameraComponent;
+    /**
+     * Sets the clear color of the camera.
+     * @param value - The clear color.
+     */
+    set clearColor(value: Color);
+    /**
+     * Gets the clear color of the camera.
+     * @returns The clear color.
+     */
+    get clearColor(): Color;
+    /**
+     * Sets the clear color buffer of the camera.
+     * @param value - The clear color buffer.
+     */
+    set clearColorBuffer(value: boolean);
+    /**
+     * Gets the clear color buffer of the camera.
+     * @returns The clear color buffer.
+     */
+    get clearColorBuffer(): boolean;
+    /**
+     * Sets the clear depth buffer of the camera.
+     * @param value - The clear depth buffer.
+     */
+    set clearDepthBuffer(value: boolean);
+    /**
+     * Gets the clear depth buffer of the camera.
+     * @returns The clear depth buffer.
+     */
+    get clearDepthBuffer(): boolean;
+    /**
+     * Sets the clear stencil buffer of the camera.
+     * @param value - The clear stencil buffer.
+     */
+    set clearStencilBuffer(value: boolean);
+    /**
+     * Gets the clear stencil buffer of the camera.
+     * @returns The clear stencil buffer.
+     */
+    get clearStencilBuffer(): boolean;
+    /**
+     * Sets the cull faces of the camera.
+     * @param value - The cull faces.
+     */
+    set cullFaces(value: boolean);
+    /**
+     * Gets the cull faces of the camera.
+     * @returns The cull faces.
+     */
+    get cullFaces(): boolean;
+    /**
+     * Sets the far clip distance of the camera.
+     * @param value - The far clip distance.
+     */
+    set farClip(value: number);
+    /**
+     * Gets the far clip distance of the camera.
+     * @returns The far clip distance.
+     */
+    get farClip(): number;
+    /**
+     * Sets the flip faces of the camera.
+     * @param value - The flip faces.
+     */
+    set flipFaces(value: boolean);
+    /**
+     * Gets the flip faces of the camera.
+     * @returns The flip faces.
+     */
+    get flipFaces(): boolean;
+    /**
+     * Sets the field of view of the camera.
+     * @param value - The field of view.
+     */
+    set fov(value: number);
+    /**
+     * Gets the field of view of the camera.
+     * @returns The field of view.
+     */
+    get fov(): number;
+    /**
+     * Sets the frustum culling of the camera.
+     * @param value - The frustum culling.
+     */
+    set frustumCulling(value: boolean);
+    /**
+     * Gets the frustum culling of the camera.
+     * @returns The frustum culling.
+     */
+    get frustumCulling(): boolean;
+    /**
+     * Sets the gamma correction of the camera.
+     * @param value - The gamma correction.
+     */
+    set gamma(value: 'linear' | 'srgb');
+    /**
+     * Gets the gamma correction of the camera.
+     * @returns The gamma correction.
+     */
+    get gamma(): 'linear' | 'srgb';
+    /**
+     * Sets whether the camera's field of view (fov) is horizontal or vertical. Defaults to false
+     * (meaning it is vertical be default).
+     * @param value - Whether the camera's field of view is horizontal.
+     */
+    set horizontalFov(value: boolean);
+    /**
+     * Gets whether the camera's field of view (fov) is horizontal or vertical.
+     * @returns Whether the camera's field of view is horizontal.
+     */
+    get horizontalFov(): boolean;
+    /**
+     * Sets the near clip distance of the camera.
+     * @param value - The near clip distance.
+     */
+    set nearClip(value: number);
+    /**
+     * Gets the near clip distance of the camera.
+     * @returns The near clip distance.
+     */
+    get nearClip(): number;
+    /**
+     * Sets the orthographic height of the camera.
+     * @param value - The orthographic height.
+     */
+    set orthoHeight(value: number);
+    /**
+     * Gets the orthographic height of the camera.
+     * @returns The orthographic height.
+     */
+    get orthoHeight(): number;
+    /**
+     * Sets the priority of the camera.
+     * @param value - The priority.
+     */
+    set priority(value: number);
+    /**
+     * Gets the priority of the camera.
+     * @returns The priority.
+     */
+    get priority(): number;
+    /**
+     * Sets the projection of the camera. Use `orthoHeight` to size an orthographic projection.
+     * @param value - The projection ('perspective' or 'orthographic').
+     */
+    set projection(value: 'perspective' | 'orthographic');
+    /**
+     * Gets the projection of the camera.
+     * @returns The projection.
+     */
+    get projection(): "perspective" | "orthographic";
+    /**
+     * Sets the rect of the camera.
+     * @param value - The rect.
+     */
+    set rect(value: Vec4);
+    /**
+     * Gets the rect of the camera.
+     * @returns The rect.
+     */
+    get rect(): Vec4;
+    /**
+     * Sets the scissor rect of the camera.
+     * @param value - The scissor rect.
+     */
+    set scissorRect(value: Vec4);
+    /**
+     * Gets the scissor rect of the camera.
+     * @returns The scissor rect.
+     */
+    get scissorRect(): Vec4;
+    /**
+     * Sets the tone mapping of the camera.
+     * @param value - The tone mapping.
+     */
+    set tonemap(value: 'none' | 'linear' | 'filmic' | 'hejl' | 'aces' | 'aces2' | 'neutral');
+    /**
+     * Gets the tone mapping of the camera.
+     * @returns The tone mapping.
+     */
+    get tonemap(): 'none' | 'linear' | 'filmic' | 'hejl' | 'aces' | 'aces2' | 'neutral';
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+}
+export { CameraComponentElement };

package/dist/components/camera-component.d.ts

@@ -1,6 +1,6 @@
 import type { CameraComponent } from 'playcanvas';
 import { Color, Vec4 } from 'playcanvas';
-import { ComponentElement } from './component';
+import { ComponentElement } from './component.js';
 /**
  * The CameraComponentElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-camera/ | `<pc-camera>`} elements.

package/dist/components/collision-component.d.cts

@@ -0,0 +1,73 @@
+import type { CollisionComponent } from 'playcanvas';
+import { Quat, Vec3 } from 'playcanvas';
+import { ComponentElement } from './component.cjs';
+/**
+ * The CollisionComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-collision/ | `<pc-collision>`} elements.
+ * The CollisionComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * For `type="mesh"`, the collision geometry defaults to the host entity's own render component
+ * (its render asset) — a collider matching the visible mesh, which is what a mesh collider on a
+ * glTF node means. The default resolves each time the component applies, so a `pc-node` that
+ * retargets or rebinds picks up the new node's geometry. An entity with no asset-backed render
+ * component warns, and the collider has no shape.
+ *
+ * @category Components
+ */
+declare class CollisionComponentElement extends ComponentElement {
+    private _angularOffset;
+    private _axis;
+    private _convexHull;
+    private _halfExtents;
+    private _height;
+    private _linearOffset;
+    private _radius;
+    private _type;
+    /** @ignore */
+    constructor();
+    protected getInitialComponentData(): {
+        axis: number;
+        angularOffset: Quat;
+        convexHull: boolean;
+        halfExtents: Vec3;
+        height: number;
+        linearOffset: Vec3;
+        radius: number;
+        type: "box" | "capsule" | "compound" | "cone" | "cylinder" | "mesh" | "sphere";
+    };
+    protected initComponent(): void;
+    /**
+     * Defaults a mesh collider's geometry to the host entity's own render component. The
+     * engine's mesh collider only works with explicitly supplied geometry, and the element has
+     * no attribute to supply it - so the host's visible geometry, the meaning a mesh collider
+     * on a glTF node carries, fills the gap. Runs on every application (so a rebound `pc-node`
+     * recomputes it) and on a runtime switch to `type="mesh"`; an explicitly assigned
+     * `renderAsset` is never overwritten.
+     */
+    private _applyMeshGeometryDefault;
+    /**
+     * Gets the underlying PlayCanvas collision component.
+     * @returns The collision component.
+     */
+    get component(): CollisionComponent;
+    set angularOffset(value: Quat);
+    get angularOffset(): Quat;
+    set axis(value: number);
+    get axis(): number;
+    set convexHull(value: boolean);
+    get convexHull(): boolean;
+    set halfExtents(value: Vec3);
+    get halfExtents(): Vec3;
+    set height(value: number);
+    get height(): number;
+    set linearOffset(value: Vec3);
+    get linearOffset(): Vec3;
+    set radius(value: number);
+    get radius(): number;
+    set type(value: 'box' | 'capsule' | 'compound' | 'cone' | 'cylinder' | 'mesh' | 'sphere');
+    get type(): "box" | "capsule" | "compound" | "cone" | "cylinder" | "mesh" | "sphere";
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+}
+export { CollisionComponentElement };

package/dist/components/collision-component.d.ts

@@ -1,6 +1,6 @@
 import type { CollisionComponent } from 'playcanvas';
 import { Quat, Vec3 } from 'playcanvas';
-import { ComponentElement } from './component';
+import { ComponentElement } from './component.js';
 /**
  * The CollisionComponentElement interface provides properties and methods for manipulating
  * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-collision/ | `<pc-collision>`} elements.

package/dist/components/component.d.cts

@@ -0,0 +1,82 @@
+import type { Component } from 'playcanvas';
+import { AsyncElement } from '../async-element.cjs';
+/**
+ * Represents a component in the PlayCanvas engine.
+ *
+ * @category Components
+ */
+declare class ComponentElement extends AsyncElement {
+    private _componentName;
+    private _enabled;
+    private _component;
+    private _appElement;
+    /**
+     * The element hosting this component, held so the host's readiness cycles can be observed
+     * even after `closestEntity` would no longer resolve (during teardown).
+     */
+    private _hostElement;
+    /**
+     * The listener re-applying this component when the host's readiness cycles. Held for
+     * removal on disconnect.
+     */
+    private _hostReadyListener;
+    /**
+     * Incremented on every connect and disconnect. connectedCallback captures the value on entry
+     * and abandons itself wherever it resumes from an await if the value has moved on — so a
+     * callback whose element was removed cannot act on a torn-down tree, and one whose element
+     * was removed and re-inserted (which runs a callback of its own) cannot add the component a
+     * second time.
+     */
+    private _connectionGeneration;
+    /**
+     * Creates a new ComponentElement instance.
+     *
+     * @param componentName - The name of the component.
+     * @ignore
+     */
+    constructor(componentName: string);
+    /**
+     * Returns the data the component is created with. Overridden by subclasses to supply the
+     * initial values of their cached properties.
+     *
+     * @returns The initial component data.
+     */
+    protected getInitialComponentData(): {};
+    /**
+     * Creates the component on the host's current entity, removing it first from a previous
+     * entity that is still alive (a retargeted `<pc-node>` moves its decorations with it). When
+     * the entity already has a component of this type — a glTF node arriving with its authored
+     * `render` component, say — warns and leaves `component` null. The element-level warning is
+     * load-bearing: the engine's own duplicate-addComponent warning is Debug-stripped from
+     * production builds, which would otherwise leave a silent null.
+     */
+    private _applyComponent;
+    private _addComponent;
+    /**
+     * Configures the newly added component. Overridden by subclasses whose setup goes beyond
+     * the initial data — child-element handling, asset resolution and the like.
+     */
+    protected initComponent(): void;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    /**
+     * The PlayCanvas component instance. `null` until the element is ready, and also for an
+     * element that is not a descendant of a `<pc-entity>` — await {@link whenReady} or the
+     * element's `ready()` promise before accessing it.
+     * @returns The component instance, or `null`.
+     */
+    get component(): Component | null;
+    /**
+     * Sets the enabled state of the component.
+     * @param value - The enabled state of the component.
+     */
+    set enabled(value: boolean);
+    /**
+     * Gets the enabled state of the component.
+     * @returns The enabled state of the component.
+     */
+    get enabled(): boolean;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
+}
+export { ComponentElement };

package/dist/components/component.d.ts

@@ -1,5 +1,5 @@
 import type { Component } from 'playcanvas';
-import { AsyncElement } from '../async-element';
+import { AsyncElement } from '../async-element.js';
 /**
  * Represents a component in the PlayCanvas engine.
  *