@playcanvas/web-components 0.6.0 → 0.7.0

package/dist/asset.d.ts

@@ -13,6 +13,14 @@ declare class AssetElement extends HTMLElement {
     asset: Asset | null;
     disconnectedCallback(): void;
     createAsset(): void;
+    /**
+     * Builds the `data` object for the asset from an optional inline `data` attribute (JSON) and,
+     * for sprites, from the convenience attributes (`atlas`, `frame-keys`, `pixels-per-unit`,
+     * `render-mode`). Returns `undefined` when there is no data to apply.
+     * @param type - The resolved asset type.
+     * @returns The asset data, or `undefined`.
+     */
+    private _buildData;
     destroyAsset(): void;
     /**
      * Sets whether the asset should be loaded lazily.

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

@@ -0,0 +1,184 @@
+import { ButtonComponent, Color, Vec4 } from 'playcanvas';
+import { ComponentElement } from './component';
+/**
+ * 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();
+    getInitialComponentData(): Record<string, any>;
+    /**
+     * Gets the underlying PlayCanvas button component.
+     * @returns The button component.
+     */
+    get component(): ButtonComponent | null;
+    /**
+     * 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` (0) or `sprite` (1).
+     * @param value - The transition mode.
+     */
+    set transitionMode(value: number);
+    /**
+     * Gets how the button reacts to being hovered/pressed.
+     * @returns The transition mode.
+     */
+    get transitionMode(): number;
+    /**
+     * 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, newValue: string): void;
+}
+export { ButtonComponentElement };

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

@@ -47,7 +47,7 @@ declare class CameraComponentElement extends ComponentElement {
         priority: number;
         rect: Vec4;
         scissorRect: Vec4;
-        toneMapping: 0 | 2 | 1 | 3 | 4 | 5 | 6 | undefined;
+        toneMapping: 0 | 3 | 1 | 2 | 4 | 5 | 6 | undefined;
     };
     get xrAvailable(): boolean | null | undefined;
     /**

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

@@ -12,32 +12,33 @@ declare class ElementComponentElement extends ComponentElement {
     private _anchor;
     private _asset;
     private _autoWidth;
+    private _autoHeight;
+    private _autoFitWidth;
+    private _autoFitHeight;
     private _color;
     private _enableMarkup;
     private _fontSize;
+    private _maxFontSize;
+    private _minFontSize;
+    private _height;
     private _lineHeight;
+    private _margin;
+    private _mask;
+    private _opacity;
     private _pivot;
+    private _pixelsPerUnit;
+    private _spriteAsset;
+    private _spriteFrame;
     private _text;
+    private _textureAsset;
     private _type;
+    private _useInput;
     private _width;
     private _wrapLines;
     /** @ignore */
     constructor();
     initComponent(): void;
-    getInitialComponentData(): {
-        anchor: Vec4;
-        autoWidth: boolean;
-        color: Color;
-        enableMarkup: boolean;
-        fontAsset: number;
-        fontSize: number;
-        lineHeight: number;
-        pivot: Vec2;
-        type: "text" | "image" | "group";
-        text: string;
-        width: number;
-        wrapLines: boolean;
-    };
+    getInitialComponentData(): Record<string, any>;
     /**
      * Gets the underlying PlayCanvas element component.
      * @returns The element component.
@@ -54,7 +55,7 @@ declare class ElementComponentElement extends ComponentElement {
      */
     get anchor(): Vec4;
     /**
-     * Sets the id of the `pc-asset` to use for the font.
+     * Sets the id of the `pc-asset` to use for the font (text elements).
      * @param value - The asset ID.
      */
     set asset(value: string);
@@ -64,7 +65,8 @@ declare class ElementComponentElement extends ComponentElement {
      */
     get asset(): string;
     /**
-     * Sets whether the element component should automatically adjust its width.
+     * Sets whether the element component should automatically adjust its width to the text content
+     * (text elements only).
      * @param value - Whether to automatically adjust the width.
      */
     set autoWidth(value: boolean);
@@ -73,6 +75,17 @@ declare class ElementComponentElement extends ComponentElement {
      * @returns Whether to automatically adjust the width.
      */
     get autoWidth(): boolean;
+    /**
+     * Sets whether the element component should automatically adjust its height to the text content
+     * (text elements only).
+     * @param value - Whether to automatically adjust the height.
+     */
+    set autoHeight(value: boolean);
+    /**
+     * Gets whether the element component should automatically adjust its height.
+     * @returns Whether to automatically adjust the height.
+     */
+    get autoHeight(): boolean;
     /**
      * Sets the color of the element component.
      * @param value - The color.
@@ -103,6 +116,16 @@ declare class ElementComponentElement extends ComponentElement {
      * @returns The font size.
      */
     get fontSize(): number;
+    /**
+     * Sets the height of the element component.
+     * @param value - The height.
+     */
+    set height(value: number);
+    /**
+     * Gets the height of the element component.
+     * @returns The height.
+     */
+    get height(): number;
     /**
      * Sets the line height of the element component.
      * @param value - The line height.
@@ -113,6 +136,37 @@ declare class ElementComponentElement extends ComponentElement {
      * @returns The line height.
      */
     get lineHeight(): number;
+    /**
+     * Sets the margin of the element component (used to inset the element from stretched anchors).
+     * @param value - The margin as a Vec4 (left, bottom, right, top).
+     */
+    set margin(value: Vec4 | null);
+    /**
+     * Gets the margin of the element component.
+     * @returns The margin.
+     */
+    get margin(): Vec4 | null;
+    /**
+     * Sets whether the element component is a mask, clipping its descendants to its bounds (image
+     * elements only).
+     * @param value - Whether the element is a mask.
+     */
+    set mask(value: boolean);
+    /**
+     * Gets whether the element component is a mask.
+     * @returns Whether the element is a mask.
+     */
+    get mask(): boolean;
+    /**
+     * Sets the opacity of the element component.
+     * @param value - The opacity (0 to 1).
+     */
+    set opacity(value: number);
+    /**
+     * Gets the opacity of the element component.
+     * @returns The opacity.
+     */
+    get opacity(): number;
     /**
      * Sets the pivot of the element component.
      * @param value - The pivot.
@@ -123,6 +177,36 @@ declare class ElementComponentElement extends ComponentElement {
      * @returns The pivot.
      */
     get pivot(): Vec2;
+    /**
+     * Sets the number of pixels per unit to use when rendering a sprite (image elements only).
+     * @param value - The pixels per unit.
+     */
+    set pixelsPerUnit(value: number | null);
+    /**
+     * Gets the number of pixels per unit used when rendering a sprite.
+     * @returns The pixels per unit.
+     */
+    get pixelsPerUnit(): number | null;
+    /**
+     * Sets the id of the `pc-asset` to use for the sprite (image elements only).
+     * @param value - The sprite asset ID.
+     */
+    set spriteAsset(value: string);
+    /**
+     * Gets the id of the `pc-asset` to use for the sprite.
+     * @returns The sprite asset ID.
+     */
+    get spriteAsset(): string;
+    /**
+     * Sets the frame of the sprite to render (image elements only).
+     * @param value - The sprite frame index.
+     */
+    set spriteFrame(value: number);
+    /**
+     * Gets the frame of the sprite to render.
+     * @returns The sprite frame index.
+     */
+    get spriteFrame(): number;
     /**
      * Sets the text of the element component.
      * @param value - The text.
@@ -133,6 +217,16 @@ declare class ElementComponentElement extends ComponentElement {
      * @returns The text.
      */
     get text(): string;
+    /**
+     * Sets the id of the `pc-asset` to use for the texture (image elements only).
+     * @param value - The texture asset ID.
+     */
+    set textureAsset(value: string);
+    /**
+     * Gets the id of the `pc-asset` to use for the texture.
+     * @returns The texture asset ID.
+     */
+    get textureAsset(): string;
     /**
      * Sets the type of the element component.
      * @param value - The type.
@@ -143,6 +237,16 @@ declare class ElementComponentElement extends ComponentElement {
      * @returns The type.
      */
     get type(): 'group' | 'image' | 'text';
+    /**
+     * Sets whether the element component accepts input events (required for buttons and scrolling).
+     * @param value - Whether the element accepts input.
+     */
+    set useInput(value: boolean);
+    /**
+     * Gets whether the element component accepts input events.
+     * @returns Whether the element accepts input.
+     */
+    get useInput(): boolean;
     /**
      * Sets the width of the element component.
      * @param value - The width.
@@ -163,6 +267,48 @@ declare class ElementComponentElement extends ComponentElement {
      * @returns Whether to wrap lines.
      */
     get wrapLines(): boolean;
+    /**
+     * Sets whether a text element should automatically reduce its font size (down to `min-font-size`)
+     * so the text fits within the element's width. Requires `auto-width` to be `false`.
+     * @param value - Whether to auto-fit the width.
+     */
+    set autoFitWidth(value: boolean);
+    /**
+     * Gets whether a text element automatically reduces its font size to fit its width.
+     * @returns Whether the width is auto-fit.
+     */
+    get autoFitWidth(): boolean;
+    /**
+     * Sets whether a text element should automatically reduce its font size (down to `min-font-size`)
+     * so the text fits within the element's height. Requires `auto-height` to be `false`.
+     * @param value - Whether to auto-fit the height.
+     */
+    set autoFitHeight(value: boolean);
+    /**
+     * Gets whether a text element automatically reduces its font size to fit its height.
+     * @returns Whether the height is auto-fit.
+     */
+    get autoFitHeight(): boolean;
+    /**
+     * Sets the smallest font size a text element may use when auto-fitting.
+     * @param value - The minimum font size.
+     */
+    set minFontSize(value: number);
+    /**
+     * Gets the smallest font size a text element may use when auto-fitting.
+     * @returns The minimum font size.
+     */
+    get minFontSize(): number;
+    /**
+     * Sets the largest font size a text element may use when auto-fitting.
+     * @param value - The maximum font size.
+     */
+    set maxFontSize(value: number);
+    /**
+     * Gets the largest font size a text element may use when auto-fitting.
+     * @returns The maximum font size.
+     */
+    get maxFontSize(): number;
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
 }

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

@@ -0,0 +1,110 @@
+import { LayoutChildComponent } from 'playcanvas';
+import { ComponentElement } from './component';
+/**
+ * The LayoutChildComponentElement interface provides properties and methods for manipulating
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-layoutchild/ | `<pc-layoutchild>`} elements.
+ * The LayoutChildComponentElement interface also inherits the properties and methods of the
+ * {@link HTMLElement} interface.
+ *
+ * @category Components
+ */
+declare class LayoutChildComponentElement extends ComponentElement {
+    private _minWidth;
+    private _minHeight;
+    private _maxWidth;
+    private _maxHeight;
+    private _fitWidthProportion;
+    private _fitHeightProportion;
+    private _excludeFromLayout;
+    /** @ignore */
+    constructor();
+    getInitialComponentData(): {
+        minWidth: number;
+        minHeight: number;
+        maxWidth: number | null;
+        maxHeight: number | null;
+        fitWidthProportion: number;
+        fitHeightProportion: number;
+        excludeFromLayout: boolean;
+    };
+    /**
+     * Gets the underlying PlayCanvas layout child component.
+     * @returns The layout child component.
+     */
+    get component(): LayoutChildComponent | null;
+    /**
+     * Sets the minimum width the element should be laid out with.
+     * @param value - The minimum width.
+     */
+    set minWidth(value: number);
+    /**
+     * Gets the minimum width the element should be laid out with.
+     * @returns The minimum width.
+     */
+    get minWidth(): number;
+    /**
+     * Sets the minimum height the element should be laid out with.
+     * @param value - The minimum height.
+     */
+    set minHeight(value: number);
+    /**
+     * Gets the minimum height the element should be laid out with.
+     * @returns The minimum height.
+     */
+    get minHeight(): number;
+    /**
+     * Sets the maximum width the element should be laid out with (or `null` for no limit).
+     * @param value - The maximum width.
+     */
+    set maxWidth(value: number | null);
+    /**
+     * Gets the maximum width the element should be laid out with.
+     * @returns The maximum width.
+     */
+    get maxWidth(): number | null;
+    /**
+     * Sets the maximum height the element should be laid out with (or `null` for no limit).
+     * @param value - The maximum height.
+     */
+    set maxHeight(value: number | null);
+    /**
+     * Gets the maximum height the element should be laid out with.
+     * @returns The maximum height.
+     */
+    get maxHeight(): number | null;
+    /**
+     * Sets the proportion of the container's spare width this element should take (when the layout
+     * group's `width-fitting` is set to stretch or shrink).
+     * @param value - The fit width proportion.
+     */
+    set fitWidthProportion(value: number);
+    /**
+     * Gets the proportion of the container's spare width this element should take.
+     * @returns The fit width proportion.
+     */
+    get fitWidthProportion(): number;
+    /**
+     * Sets the proportion of the container's spare height this element should take (when the layout
+     * group's `height-fitting` is set to stretch or shrink).
+     * @param value - The fit height proportion.
+     */
+    set fitHeightProportion(value: number);
+    /**
+     * Gets the proportion of the container's spare height this element should take.
+     * @returns The fit height proportion.
+     */
+    get fitHeightProportion(): number;
+    /**
+     * Sets whether the element should be excluded from the layout (and thus not take up space).
+     * @param value - Whether to exclude the element from layout.
+     */
+    set excludeFromLayout(value: boolean);
+    /**
+     * Gets whether the element is excluded from the layout.
+     * @returns Whether the element is excluded from layout.
+     */
+    get excludeFromLayout(): boolean;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
+}
+export { LayoutChildComponentElement };