@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
104 lines (103 loc) • 5.07 kB
TypeScript
/// <reference path="../../index.d.ts" />
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { Height, Layout, Position, Scale, Width } from "../interfaces.js";
import type { DisplayMode } from "./interfaces.js";
/**
* @cssproperty [--calcite-shell-panel-background-color] - Specifies the component's background color.
* @cssproperty [--calcite-shell-panel-border-color] - When `displayMode` is `"float-all"`, specifies the component's border color.
* @cssproperty [--calcite-shell-panel-corner-radius] - When `displayMode` is `"float-all"`, specifies the component's corner radius.
* @cssproperty [--calcite-shell-panel-height] - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float` or `float-all`, specifies the component's height.
* @cssproperty [--calcite-shell-panel-max-height] - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the component's maximum height.
* @cssproperty [--calcite-shell-panel-min-height] - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the component's minimum height.
* @cssproperty [--calcite-shell-panel-max-width] - Specifies the component's maximum width.
* @cssproperty [--calcite-shell-panel-resize-icon-color] - Specifies the resize handle's text color.
* @cssproperty [--calcite-shell-panel-shadow] - When `displayMode` is `"float-all"`, specifies the component's shadow.
* @cssproperty [--calcite-shell-panel-text-color] - Specifies the component's text color.
* @cssproperty [--calcite-shell-panel-width] - Specifies the component's width.
* @cssproperty [--calcite-shell-panel-z-index] - Specifies the component's z-index value.
* @slot - A slot for adding custom content.
* @slot [action-bar] - A slot for adding a `calcite-action-bar` to the component.
*/
export abstract class ShellPanel extends LitElement {
/**
* When `true`, hides the component's content area.
*
* @default false
*/
accessor collapsed: boolean;
/**
* Specifies the component's display mode, where:
*
* `"dock"` displays at full height adjacent to center content,
*
* `"overlay"` displays at full height on top of center content, and
*
* `"float"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content.
*
* `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content.
*
* `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content.
*
* @default "dock"
*/
accessor displayMode: DisplayMode;
/** Specifies the component's height. */
accessor height: Height;
/**
* When `layout` is `horizontal`, specifies the component's maximum height.
*
* @deprecated in v3.0.0, removal target v6.0.0 - Use the `height` property instead.
*/
accessor heightScale: Scale;
/**
* Specifies the component's direction.
*
* @deprecated in v4.0.0, removal target v6.0.0 - No longer necessary.
* @default "vertical"
*/
accessor layout: Extract<"horizontal" | "vertical", Layout>;
/** Overrides individual strings used by the component. */
accessor messageOverrides: { resize?: string; };
/**
* Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`).
*
* @deprecated in v4.0.0, removal target v6.0.0 - No longer necessary.
* @default "start"
*/
accessor position: Extract<"start" | "end", Position>;
/**
* When `true` and `displayMode` is `"dock"` or `"overlay"`, the component's content area is resizable.
*
* @default false
*/
accessor resizable: boolean;
/** Specifies the component's width. */
accessor width: Extract<Width, Scale>;
/**
* When `layout` is `vertical`, specifies the component's width.
*
* @deprecated in v3.0.0, removal target v6.0.0 - Use the `width` property instead.
* @default "m"
*/
accessor widthScale: Scale;
/**
* Updates the component's size by setting its inline and/or block dimensions.
*
* Use this method to programmatically override the components's width (inline) and/or height (block).
* Pass `null` to clear the override and revert to the default or CSS variable size.
*
* @param size
*/
updateSize(size: {
inline?: number | null;
block?: number | null;
}): Promise<void>;
/** Fires when the component's content area is collapsed. */
readonly calciteShellPanelCollapse: import("@arcgis/lumina").TargetedEvent<this, void>;
/** Fires when the component's content area is expanded. */
readonly calciteShellPanelExpand: import("@arcgis/lumina").TargetedEvent<this, void>;
readonly "@eventTypes": {
calciteShellPanelCollapse: ShellPanel["calciteShellPanelCollapse"]["detail"];
calciteShellPanelExpand: ShellPanel["calciteShellPanelExpand"]["detail"];
};
}