/// <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`, `float-content`, or `overlay`, 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 v5.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 v5.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 component'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"];
  };
}