import { PropertyValueMap } from "lit"; import { FRoot } from "../../mixins/components/f-root/f-root"; export type FDivBorderWidth = "small" | "medium" | "large"; export type FDivBorderStyle = "solid" | "dashed" | "dotted"; export type FDivBorderColor = "default" | "secondary" | "subtle"; export type FDivBorderPosition = "bottom" | "top" | "left" | "right" | "around"; export type FDivPadding = "x-large" | "large" | "medium" | "small" | "x-small" | "none"; export type FDivBorderProp = FDivBorderWidth | `${FDivBorderWidth} ${FDivBorderStyle}` | `${FDivBorderWidth} ${FDivBorderStyle} ${FDivBorderColor}` | `${FDivBorderWidth} ${FDivBorderStyle} ${FDivBorderColor} ${FDivBorderPosition}`; export type FDivPaddingProp = FDivPadding | `${FDivPadding} ${FDivPadding}` | `${FDivPadding} ${FDivPadding} ${FDivPadding} ${FDivPadding}`; export type FDivWidthProp = "fill-container" | "hug-content" | `${number}px` | `${number}%` | `${number}vw`; export type FDivHeightProp = "fill-container" | "hug-content" | `${number}px` | `${number}%` | `${number}vh`; export type FDivMaxWidthProp = `${number}px` | `${number}%` | `${number}vw`; export type FDivMaxHeightProp = `${number}px` | `${number}%` | `${number}vh`; export type FDivStateProp = "subtle" | "default" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "primary" | "transparent" | "inherit" | `custom, ${string}`; /** * @summary F-div is used as a container for HTML elements. */ export declare class FDiv extends FRoot { /** * css loaded from scss file */ static styles: import("lit").CSSResult[]; /** * @attribute local state for managing custom fill. */ fill: string; /** * @attribute Variants are various representations of a f-div. */ variant?: "block" | "curved" | "round"; /** * @attribute Direction will decide whether these elements needs to be displayed in vertical or horizontal manner. */ direction?: "row" | "column"; /** * @attribute state property defines the background color of a f-div. It can take only surface colors defined in the library. */ state?: FDivStateProp; /** * @attribute Border property enables a border for f-div. You can combine border properties to achieve a desired result. */ border?: FDivBorderProp; /** * @attribute Gap defines the space between the items of a f-div */ gap?: "auto" | "x-large" | "large" | "medium" | "small" | "x-small" | "none"; /** * @attribute Padding defines extra space across the elements inside a f-div. */ padding?: FDivPaddingProp; /** * @attribute Align property places the elements of a layout in particular positions with respect to the f-div. */ align?: "top-left" | "top-center" | "top-right" | "middle-left" | "middle-center" | "middle-right" | "bottom-left" | "bottom-center" | "bottom-right"; /** * @attribute width of `f-div` */ width?: FDivWidthProp; /** * @attribute height of `f-div` */ height?: FDivHeightProp; /** * @attribute width of `f-div` */ maxWidth?: FDivWidthProp; /** * @attribute height of `f-div` */ maxHeight?: FDivHeightProp; /** * @attribute The disabled attribute can be set to keep a user from clicking on the f-icon. */ disabled?: boolean; /** * @attribute display loader */ loading?: "skeleton" | "loader"; /** * @attribute is clickable */ clickable?: boolean; /** * @attribute is highlighted */ highlight?: boolean; /** * @attribute Overflow property defines the behavior of the overflowing elements inside a f-div */ overflow?: "wrap" | "scroll" | "hidden" | "visible"; /** * @attribute Sets the f-div to a selected state. Select between border, background, or notch based on your use case. */ selected?: "none" | "background" | "border" | "notch-right" | "notch-left"; /** * @attribute Sticky property defines a f-div’s position based on the scroll position of the container */ sticky?: "none" | "top" | "bottom" | "left" | "right"; /** * Applying border related style, based on value */ applyBorder(): void; /** * Applying padding related style, based on value */ applyPadding(): void; /** * Applying height,width related style, based on value */ applySize(): void; checkHighlight(): void; disconnectedCallback(): void; render(): import("lit-html").TemplateResult<1>; protected updated(changedProperties: PropertyValueMap | Map): void; } /** * Required for typescript */ declare global { export interface HTMLElementTagNameMap { "f-div": FDiv; } }