import { FC, WebCellProps, WebCell, WebField } from "web-cell"; import { JsxChildren, VNode, JsxProps } from "dom-renderer"; import { Defer } from "iterable-observer"; import { TimeData } from "web-utility"; type Subtle = `${T}${'' | '-subtle'}`; export enum Status { primary = "primary", secondary = "secondary", tertiary = "tertiary", success = "success", info = "info", warning = "warning", danger = "danger" } export enum Theme { light = "light", dark = "dark" } export type BasicColor = 'body' | 'black' | 'white'; export type TextColor = BasicColor | Exclude | keyof typeof Theme; export type BackgroundColor = Subtle | `body-${'emphasis' | 'secondary' | 'tertiary'}` | BasicColor | 'transparent'; export type Size = 'sm' | 'md' | 'lg' | 'xl' | 'xxl'; export type PositionY = 'top' | 'bottom'; export interface RatioProps extends WebCellProps { aspectRatio?: number | '1x1' | '4x3' | '16x9' | '21x9'; } export const Ratio: FC; export interface ContainerProps extends WebCellProps { fluid?: boolean | Size; } export const Container: FC; export type RowProps = Partial> & WebCellProps; export const Row: FC; export type ColProps = RowProps; export const Col: FC; export type EdgePosition = 'top' | 'bottom' | 'left' | 'right'; export type TouchHandler = (edge: EdgePosition) => any; export interface ScrollBoundaryProps extends WebCellProps, Partial> { onTouch: TouchHandler; } export const ScrollBoundary: FC; export interface CollapseProps extends WebCellProps { dimension?: 'width' | 'height'; in?: boolean; } export const Collapse: FC; export type FormGroupProps = WebCellProps; export const FormGroup: FC; export type FormLabelProps = WebCellProps; export const FormLabel: FC; export interface FloatingLabelProps extends FormLabelProps { label: string; } export const FloatingLabel: FC; export interface InputGroupProps extends WebCellProps { size?: 'sm' | 'lg'; } export const InputGroup: FC; export const InputGroupText: FC>; export type FormControlTag = 'input' | 'textarea' | 'select'; export type FormControlProps = WebCellProps & Omit & { as?: T; htmlSize?: number; size?: 'sm' | 'lg'; plaintext?: boolean; }; export const FormControl: ({ as: Tag, className, htmlSize, size, plaintext, ...props }: FormControlProps) => VNode; export interface FormCheckProps extends WebCellProps { type: 'radio' | 'checkbox' | 'switch'; inline?: boolean; reverse?: boolean; label?: JsxChildren; } export const FormCheck: FC; export type FormFieldProps = FormGroupProps & FormLabelProps & FormControlProps & { label?: string; labelFloat?: boolean; }; export const FormField: ({ className, label, labelFloat, ...props }: FormFieldProps) => VNode; export interface BadgeProps extends WebCellProps { bg?: TextColor; text?: TextColor; pill?: boolean; } export const Badge: FC; export interface IconProps extends WebCellProps { name: string; color?: TextColor; size?: number; } export const Icon: FC; export interface BGIconProps extends IconProps { type?: 'square' | 'circle'; } export const BGIcon: FC; export interface FAIconProps extends Omit { group?: 'solid' | 'brands' | 'regular' | 'light' | 'duotone'; size?: 'xs' | 'sm' | 'lg' | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; fixedWidth?: boolean; color?: TextColor; inverse?: boolean; border?: boolean; rotate?: 90 | 180 | 270; flip?: 'horizontal' | 'vertical' | 'both'; animation?: 'spin' | 'pulse'; pull?: 'left' | 'right'; stack?: 1 | 2; listItem?: boolean; } export const FAIcon: FC; export interface FABGIconProps extends FAIconProps { type: 'square' | 'circle'; } export const FABGIcon: FC; export interface ProgressBarProps extends WebCellProps, Partial> { striped?: boolean; animated?: boolean; variant?: keyof typeof Status; label?: boolean | ((now: number) => JsxChildren); } export const ProgressBar: FC; export interface ButtonProps extends WebCellProps, Omit, 'type'>, Pick, 'size'> { variant?: TextColor | `outline-${TextColor}` | 'link'; active?: boolean; } export const Button: FC; export function isButton(node: JsxChildren): node is VNode; export type IconButtonProps = IconProps & Omit; export const IconButton: FC; export const CloseButton: FC>; export interface ToggleButtonProps extends WebCellProps, Pick { type: Exclude; } export const ToggleButton: FC; export const OffcanvasTitle: FC>; export interface OffcanvasHeaderProps extends WebCellProps { closeButton?: boolean; onHide?: () => any; } export const OffcanvasHeader: FC; export const OffcanvasBody: FC>; export interface OffcanvasProps extends Omit { backdrop?: boolean | 'static'; show?: boolean; } export const Offcanvas: FC; export interface OffcanvasBoxProps extends OffcanvasProps, OffcanvasHeaderProps { titleId?: string; } export const OffcanvasBox: FC; export class SplitView extends HTMLElement { connectedCallback(): void; toggleDrag({ type, target, pointerId }: PointerEvent): void; watchLine(element: HTMLElement): Promise; render(): VNode; } export interface ListGroupProps extends WebCellProps { variant?: 'flush'; numbered?: boolean; horizontal?: true | Size; } export const ListGroup: FC; export interface ListGroupItemProps extends WebCellProps, Partial> { variant?: keyof typeof Status | keyof typeof Theme; } export const ListGroupItem: FC; export interface TableProps extends WebCellProps { variant?: TextColor; size?: 'sm'; responsive?: boolean | Size; striped?: boolean | 'columns'; hover?: boolean; bordered?: boolean; borderless?: boolean; caption?: 'top'; } export const Table: FC; export interface JumbotronProps extends Omit, Record<'title' | 'description', JsxChildren> { bg?: BackgroundColor; rounded?: 0 | 1 | 2 | 3 | 4 | 5; } export const Jumbotron: FC; export type ImageProps = WebCellProps & Partial>; export const Image: FC; export interface CardProps extends WebCellProps { bg?: TextColor; text?: TextColor | 'white' | 'muted'; border?: TextColor; body?: boolean; } export const Card: FC; export const CardHeader: FC>; export const CardBody: FC>; export const CardFooter: FC>; export const CardTitle: FC>; export interface CardImgProps extends ImageProps { variant?: PositionY; } export const CardImg: FC; export interface MediaObjectProps extends WebCellProps { listItem?: boolean; title: string; image: JsxChildren; imageRow?: 'start' | 'center' | 'end'; imageColumn?: 'start' | 'end'; } export const MediaObject: FC; export const AccordionItem: FC>; export const AccordionHeader: FC>; export const AccordionBody: FC; export interface AccordionProps { flush?: boolean; alwaysOpen?: boolean; } export interface Accordion extends WebCell { } export class Accordion extends HTMLElement implements WebCell { accessor flush: boolean; accessor alwaysOpen: boolean; connectedCallback(): void; handleFlush(flush: boolean): void; handleClick(_: any, { nextElementSibling: currentCollapse }: HTMLHeadingElement): void; render(): VNode; } export const Dropdown: FC>; export const DropdownToggle: FC; export const DropdownMenu: FC; export const DropdownItem: FC>; export interface DropdownButtonProps extends WebCellProps, ButtonProps { boxClass?: string; buttonClass?: string; caption: JsxChildren; } export class DropdownButton extends HTMLElement { props: DropdownButtonProps; accessor boxClass: string; accessor buttonClass: string; accessor variant: ButtonProps['variant']; accessor size: ButtonProps['size']; accessor caption: JsxChildren; accessor disabled: boolean; accessor show: boolean; renderContent(): VNode; render(): VNode; } export type NavbarBrandProps = JsxProps; export const NavbarBrand: FC; export type NavbarToggleProps = JsxProps; export const NavbarToggle: FC; export interface NavbarProps extends WebCellProps { variant?: 'light' | 'dark'; bg?: BackgroundColor; expand?: boolean | Size; fixed?: PositionY; sticky?: PositionY; } export const Navbar: FC; export interface OffcanvasNavbarProps extends OffcanvasBoxProps, NavbarProps, ContainerProps { brand?: JsxChildren; } export interface OffcanvasNavbar extends WebCell { } export class OffcanvasNavbar extends HTMLElement implements WebCell { props: OffcanvasNavbarProps; accessor variant: OffcanvasNavbarProps['variant']; accessor bg: OffcanvasNavbarProps['bg']; accessor expand: OffcanvasNavbarProps['expand']; accessor fixed: OffcanvasNavbarProps['fixed']; accessor sticky: OffcanvasNavbarProps['sticky']; accessor fluid: ContainerProps['fluid']; accessor title: string; titleId: string; accessor brand: OffcanvasNavbarProps['brand']; offcanvasId: string; accessor open: boolean; accessor closeButton: boolean; connectedCallback(): void; disconnectedCallback(): void; close: (event?: KeyboardEvent | MouseEvent) => void; handleLink: (this: Node, event: Event) => any; renderContent(): VNode; render(): VNode; } export interface NavLinkProps extends WebCellProps { active?: boolean; } export const NavLink: FC; export interface NavDropdownProps extends Omit, Pick { title: JsxChildren; } export const NavDropdown: FC; export interface NavProps extends WebCellProps { variant?: 'pills' | 'underline' | 'tabs'; fill?: boolean; justify?: boolean; } export interface Nav extends WebCell { } export class Nav extends HTMLElement implements WebCell { accessor variant: 'pills' | 'underline' | 'tabs' | undefined; accessor fill: boolean; accessor justify: boolean; protected updateClass({ variant, fill, justify }?: this): void; connectedCallback(): void; render(): VNode; } export interface TabProps { caption: JsxChildren; } export interface Tab extends WebCell { } export class Tab extends HTMLElement implements WebCell { caption: JsxChildren; connectedCallback(): void; } export interface Tabs extends WebCell { } export class Tabs extends HTMLElement implements WebCell { accessor tabMeta: TabProps[]; accessor currentIndex: number; mountedCallback(): void; handleTabClick(event: MouseEvent, { dataset: { index } }: HTMLAnchorElement): void; turnPaneTo(index: number): void; renderContent(): VNode; render(): VNode; } export interface ButtonGroupProps extends WebCellProps { vertical?: boolean; size?: 'sm' | 'lg'; } export const ButtonGroup: FC; export type ButtonToolbarProps = WebCellProps; export const ButtonToolbar: FC; export interface RangeInputProps extends WebCellProps { icon?: JsxChildren | ((itemValue: number) => JsxChildren); } export interface RangeInput extends WebField { } export class RangeInput extends HTMLElement implements WebField { accessor type: string; accessor min: number | undefined; accessor max: number | undefined; accessor step: number; accessor icon: RangeInputProps['icon'] | undefined; connectedCallback(): void; handleChange: ({ currentTarget }: Event) => void; renderItem(index: number): VNode; render(): VNode; } export interface SpinnerProps extends WebCellProps { variant?: TextColor; size?: 'sm'; animation?: 'border' | 'grow'; } export const Spinner: FC; export interface SpinnerBoxProps extends SpinnerProps { cover?: boolean; } export const SpinnerBox: FC; export interface AlertProps extends WebCellProps { variant?: TextColor; title?: string; dismissible?: boolean; show?: boolean; onClose?: (event: MouseEvent) => any; } export const Alert: FC; export type AlertLinkProps = WebCellProps; export const AlertLink: FC; export const Tooltip: FC; export interface TooltipBoxProps extends WebCellProps { content: JsxChildren; } export interface TooltipBox extends WebCell { } export class TooltipBox extends HTMLElement implements WebCell { props: TooltipBoxProps; content: JsxChildren; accessor show: boolean; connectedCallback(): void; disconnectedCallback(): void; handleToggle: () => boolean; render(): VNode; } export class DialogClose extends Error { constructor(message?: string); } export interface DialogProps { defer?: Defer; } export class Dialog { accessor defer: Defer | undefined; Component: FC; constructor(Factory: FC>); open(): Promise; } export interface ModalProps extends WebCellProps { backdrop?: 'static' | boolean; size?: 'sm' | 'lg' | 'xl'; fullscreen?: true | `${Size}-down`; centered?: boolean; scrollable?: boolean; animation?: boolean; show?: boolean; } export const Modal: FC; export interface ModalHeaderProps extends WebCellProps { closeButton?: boolean; } export const ModalHeader: FC; export type ModalTitleProps = WebCellProps; export const ModalTitle: FC; export type ModalBodyProps = WebCellProps; export const ModalBody: FC; export type ModalFooterProps = WebCellProps; export const ModalFooter: FC; export interface ImagePreview extends WebCell { } export class ImagePreview extends HTMLElement implements WebCell { accessor src: string; accessor loading: ImageProps['loading']; accessor fluid: boolean; accessor rounded: boolean; accessor roundedCircle: boolean; accessor thumbnail: boolean; accessor downloading: boolean; accessor loadedPath: string; accessor viewing: boolean; connectedCallback(): void; load(path: string): Promise; render(): VNode; } export type FilePreviewProps = ImageProps & WebCellProps & WebCellProps & WebCellProps & { type?: HTMLInputElement['accept']; path: string; }; export const FileTypeMap: { stream: string; compressed: string; msword: string; document: string; powerpoint: string; presentation: string; excel: string; sheet: string; }; export const FilePreview: FC; export interface FilePickerProps extends WebCellProps { onChange?: (event: CustomEvent<{ value: string; file?: File; }>) => any; } export interface FilePicker extends WebField { } export class FilePicker extends HTMLElement implements WebField { accessor accept: HTMLInputElement['accept']; accessor multiple: boolean; accessor file: File | undefined; get fileType(): string; connectedCallback(): void; handleAdd: ({ currentTarget }: Event) => void; handleClear: (event: MouseEvent) => void; renderInput(): VNode; renderContent(): VNode; render(): VNode; } export abstract class FileModel { accessor files: string[]; clear(): void; /** * Override this method for Network calling, * then call `super.upload(fileURL)` to update `this.files` array. */ upload(file: string | Blob): Promise; /** * Override this method for Network calling, * then call `super.delete(fileURL)` to update `this.files` array. */ delete(file: string): Promise; move(sourceIndex: number, targetIndex: number): void; } export interface WebFileFieldProps extends Omit, 'defaultValue' | 'value'> { defaultValue?: string | string[]; value?: string | string[]; } export interface FileUploaderProps extends WebFileFieldProps { store: FileModel; } export interface WebFileField extends Pick, Omit, 'defaultValue' | 'value' | 'props'> { props: FileUploaderProps; } export interface FileUploader extends WebFileField { } export class FileUploader extends HTMLElement implements WebFileField { accessor accept: HTMLInputElement['accept']; accessor multiple: boolean; accessor store: FileModel; accessor pickIndex: number | undefined; mountedCallback(): void; updateFiles(value: this['value']): void; emitFiles(files?: FileModel['files']): void; handleAdd: () => Promise; handleDrop: (index: number) => (event: DragEvent) => void; handleChange: (oldURI?: string) => FilePickerProps["onChange"]; renderContent(): VNode; render(): VNode; } export interface CodeBlockProps extends WebCellProps { name?: string; value: string; language: string; theme?: string; } export interface CodeBlock extends WebCell { } export class CodeBlock extends HTMLElement implements WebCell { accessor name: string; accessor value: string; accessor language: string; accessor theme: string; get markup(): string; get dataURI(): string; connectedCallback(): void; render(): VNode; } export interface CarouselItemProps extends WebCellProps { interval?: number; } export const CarouselItem: FC; export const CarouselCaption: FC>; interface ItemMeta { caption?: string; } export interface CarouselProps { interval?: number; } export interface Carousel extends WebCell { } export class Carousel extends HTMLElement implements WebCell { accessor interval: number | undefined; accessor itemMeta: ItemMeta[]; accessor currentIndex: number; connectedCallback(): void; disconnectedCallback(): void; mountedCallback(): void; turnByOffset(delta: number): void; handleButtonClick(_: MouseEvent, { dataset }: HTMLButtonElement): void; handleButtonPress({ key }: KeyboardEvent, { dataset }: HTMLButtonElement): void; handleIndicatorsButtonClick(_: MouseEvent, { dataset }: HTMLButtonElement): void; handleIndicatorsButtonPress({ key }: KeyboardEvent, { dataset }: HTMLButtonElement): void; handleActiveItem(currentIndex: number): void; renderContent(): VNode; render(): VNode; } export type BreadcrumbProps = WebCellProps; export const BreadCrumb: FC; export interface BreadcrumbItemProps extends WebCellProps { active?: boolean; } export const BreadcrumbItem: FC; export interface PaginationProps extends WebCellProps { size?: 'sm' | 'lg'; } export const Pagination: FC; export interface PaginationItemProps extends WebCellProps { href?: string; active?: boolean; disabled?: boolean; } export const PaginationItem: FC; export type PageMeta = Record<'pageSize' | 'pageIndex', number>; export interface PagerProps extends PageMeta { pageCount: number; onChange?: (meta: PageMeta) => any; } export const Pager: FC; export interface StepProps extends WebCellProps { icon?: JsxChildren; active?: boolean; disabled?: boolean; } export function Step({ active, disabled, icon, children: defaultSlot, ...rest }: StepProps): VNode; export function isStep(node: JsxChildren): node is VNode; export interface StepperProps extends WebCellProps { } export function Stepper({ className, children, ...rest }: StepperProps): VNode; interface TimeUnit { scale: number; label: string; } interface TimeSection { value: number; label: string; } export interface CountDownProps { endTime?: string | Date | number; } export interface CountDown extends WebCell { } export class CountDown extends HTMLElement implements WebCell { accessor endTime: CountDownProps['endTime']; accessor rest: number; accessor units: TimeUnit[]; get timeSections(): TimeSection[]; tick: () => void; mountedCallback(): void; disconnectedCallback(): void; render(): VNode; } export interface DateData { date: TimeData; content: JsxChildren; link?: string; } export interface MonthCalendarProps extends Omit, Pick { locale?: Navigator['language']; value?: DateData[]; onSelect?: (event: CustomEvent) => any; onChange?: (event: CustomEvent) => any; } export interface MonthCalendar extends WebCell { } export class MonthCalendar extends HTMLElement implements WebCell { accessor variant: MonthCalendarProps['variant']; accessor locale: Navigator['language']; accessor value: DateData[]; get weekFormatter(): Intl.DateTimeFormat; accessor currentDate: Date; get dateGrid(): Date[][]; changeMonth(delta: number): void; renderDate: (date: Date) => VNode; render(): VNode; } //# sourceMappingURL=index.d.ts.map