soil-material/dist/index.d.ts

UI / UX library from soil technologies

import * as lit from 'lit';
import { LitElement, CSSResultGroup } from 'lit';
import * as lit_html from 'lit-html';
import { StoryObj } from '@storybook/web-components';
import { PropertyValues } from '@lit/reactive-element';

declare abstract class SoilComponent extends LitElement {
    private static _styles;
    static get styles(): CSSResultGroup;
    static set styles(styles: CSSResultGroup);
}

interface SpinnerProps {
    busy: boolean;
    theme: SpinnerThemeTypes;
    size: SpinnerSize;
}
declare enum SpinnerThemeTypes {
    Primary = "primary",
    Accent = "accent",
    Secondary = "secondary"
}
declare enum SpinnerSize {
    Large = "large",
    Medium = "medium",
    Small = "small"
}

declare class SoilSpinner extends SoilComponent {
    busy: boolean;
    theme: SpinnerThemeTypes;
    size: SpinnerSize;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult;
}
declare global {
    interface HTMLElementTagNameMap {
        "soil-spinner": SoilSpinner;
    }
}

declare enum ButtonType {
    Submit = "submit",
    Reset = "reset",
    Button = "button"
}
declare enum ActionType {
    Executive = "executive",
    Leading = "leading",
    Cancel = "cancel",
    ExecutiveOutlined = "executive-outlined",
    LeadingOutlined = "leading-outlined",
    CancelOutlined = "cancel-outlined"
}

declare class SoilButton extends SoilComponent {
    label: string;
    actionType: ActionType;
    buttonType: ButtonType;
    busy: boolean;
    disabled: boolean;
    typeSpinnerThemeMap: Record<ActionType, string>;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult;
    handleClick(): void;
}
declare global {
    interface HTMLElementTagNameMap {
        "soil-button": SoilButton;
    }
}

declare enum LinkButtonTheme {
    Primary = "primary",
    Accent = "accent"
}

declare const Docs: StoryObj;

declare class SoilLinkButton extends SoilComponent {
    label: string;
    href: string;
    target: string;
    theme: LinkButtonTheme;
    disabled: boolean;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult;
    private handleDisabled;
}
declare global {
    interface HTMLElementTagNameMap {
        "soil-link-button": SoilLinkButton;
    }
}

declare class SoilIconButton extends SoilComponent {
    label: string;
    icon: string;
    disabled: boolean;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult;
}
declare global {
    interface HTMLElementTagNameMap {
        "soil-icon-button": SoilIconButton;
    }
}

declare class SoilTextButton extends SoilComponent {
    label: string;
    icon: string;
    disabled: boolean;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult;
}
declare global {
    interface HTMLElementTagNameMap {
        "soil-text-button": SoilTextButton;
    }
}

declare class SoilButtonContainer extends SoilComponent {
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult;
}
declare global {
    interface HTMLElementTagNameMap {
        "soil-button-container": SoilButtonContainer;
    }
}

declare class SoilLoaderContainer extends SoilComponent {
    busy: boolean;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult;
}
declare global {
    interface HTMLElementTagNameMap {
        "soil-loader-container": SoilLoaderContainer;
    }
}

declare class SoilSection extends SoilComponent {
    heading: string;
    lead: string;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult;
}

interface SectionProps {
    heading: string;
    lead: string;
}

declare class SoilWallpaperSection extends SoilComponent {
    heading: string;
    lead: string;
    img: string;
    invert: boolean;
    theme: string;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult;
}

interface WallpaperSectionProps {
    heading: string;
    lead: string;
    img: string;
    invert: boolean;
}
declare enum WallpaperSectionTheme {
    Primary = "primary",
    Accent = "accent",
    Secondary = "secondary"
}

declare class SoilResultCard extends SoilComponent {
    icon: string;
    lead: string;
    severity: string;
    result: string;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult;
}

interface ResultSectionProps {
    icon: string;
    lead: string;
    severity: SeverityTypes;
    result: string;
}
declare enum SeverityTypes {
    Profit = "profit",
    Balanced = "balanced",
    Deficit = "deficit"
}

declare class CustomPage extends SoilComponent {
    layout: string;
    toolbarVisible: boolean;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult;
}

declare class SoilCustomPageHeader extends SoilComponent {
    heading: string;
    lead: string;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult;
}

interface CustomPageProps {
    layout: CustomPageLayout;
}
interface CustomPageHeaderProps {
    heading: string;
    lead: string;
}
declare enum CustomPageLayout {
    GridFiftyFifty = "grid-50-50",
    GridSixtyForty = "grid-66-33",
    Unset = ""
}

declare class CustomPageBody extends SoilComponent {
    twoColumns: boolean;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult;
}

declare class SoilAccordionListItem extends SoilComponent {
    label: string;
    subLabel: string;
    badgeValue: number;
    opened: boolean;
    badgeIcon: string;
    badgeColor: string;
    onItemClicked(): void;
    updated(): void;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult;
}

interface AccordionListItemProps {
    label?: string;
    subLabel?: string;
    badgeValue?: number;
}

interface AccordionListProps {
    heading: string;
    items: AccordionListItem[];
}
interface AccordionListItem {
    label?: string;
    subLabel?: string;
    badgeValue?: number;
}

declare class SoilAccordionListComponent extends SoilComponent {
    heading: string;
    items: AccordionListItem[];
    static styles: lit.CSSResult;
    render(): lit_html.TemplateResult<1>;
}

interface ActionListProps {
    heading: string;
    items: ActionItem[];
}
interface ActionItem {
    label?: string;
    subLabel?: string;
}

declare class SoilActionListComponent extends SoilComponent {
    heading: string;
    items: ActionItem[];
    static styles: lit.CSSResult;
    render(): lit_html.TemplateResult<1>;
}

declare class SoilActionListItemComponent extends SoilComponent {
    label: string;
    subLabel: string;
    static styles: lit.CSSResult;
    render(): lit_html.TemplateResult<1>;
    onItemClicked(): void;
}

interface ActionListItemProps {
    label?: string;
    subLabel?: string;
}

declare class SoilBulletList extends SoilComponent {
    heading: string;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult;
}
declare global {
    interface HTMLElementTagNameMap {
        "soil-bullet-list": SoilBulletList;
    }
}

interface BulletListItemProps {
    label: string;
    icon: string;
    theme: ListItemTheme;
}
declare enum ListItemTheme {
    Primary = "primary",
    Accent = "accent"
}

declare class SoilBulletListItem extends SoilComponent {
    label: string;
    theme: ListItemTheme;
    icon: string;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult;
}
declare global {
    interface HTMLElementTagNameMap {
        "soil-bullet-list-item": SoilBulletListItem;
    }
}

interface BulletListProps {
    heading: string;
}

interface DescriptiveListProps {
    heading: string;
    items: DescriptiveItem[];
}
interface DescriptiveItem {
    label?: string;
    subLabel?: string;
    value?: string;
    subValue?: string;
}

declare class SoilDescriptiveListComponent extends SoilComponent {
    heading: string;
    items: DescriptiveItem[];
    static styles: lit.CSSResult;
    render(): lit_html.TemplateResult<1>;
}

declare class SoilDescriptiveListItemComponent extends SoilComponent {
    label: string;
    subLabel: string;
    value: string;
    subValue: string;
    static styles: lit.CSSResult;
    render(): lit_html.TemplateResult<1>;
}

interface DescriptiveListItemProps {
    label?: string;
    subLabel?: string;
    value?: string;
    subValue?: string;
}

declare class SoilDescriptiveListSummaryComponent extends SoilComponent {
    label: string;
    value: string;
    static styles: lit.CSSResult;
    render(): lit_html.TemplateResult<1>;
}

interface DescriptiveListSummaryProps {
    label: string;
    value: string;
}

interface ListOption {
    label?: string;
    value?: string;
    selected?: boolean;
}
type ListOptions = ListOption[];
interface RadioOption {
    label?: string;
    value?: string;
    checked: boolean;
}
type SoilRadioOption = RadioOption[];

declare abstract class FormFieldErrorConnector extends SoilComponent {
    errors: {
        [key: string]: boolean;
    };
    priorityOrder: string[];
    updated(changedProperties: Map<string | number | symbol, unknown>): void;
    protected getHighestPriorityError(): string | null;
    protected updateSlottedErrors(): void;
}

declare class SoilSelectField extends FormFieldErrorConnector {
    label: string;
    placeholder: string;
    emptyOptionsText: string;
    value: string;
    options: ListOption[];
    private filter;
    private selectedIndex;
    private listbox;
    private button;
    private input;
    static styles: lit.CSSResult;
    render(): lit_html.TemplateResult<1>;
    private toggleMenu;
    private openMenu;
    private closeMenu;
    private handleBlur;
    private handleOutsideClick;
    private updateFilter;
    private get filteredOptions();
    private selectOption;
    private handleInputKeydown;
    private handleButtonKeydown;
    private handleArrowKeys;
    private navigateOptions;
    private scrollToOption;
    private isExpanded;
}
declare global {
    interface HTMLElementTagNameMap {
        "soil-select-field": SoilSelectField;
    }
}

declare class SoilCurrencyField extends FormFieldErrorConnector {
    label: string;
    placeholder: string;
    value: string;
    iterationValue: number;
    currencyCode: string;
    private input;
    formattedValue: string;
    static styles: lit.CSSResult;
    render(): lit_html.TemplateResult<1>;
    handleFocusOut(): void;
    handleMouseDown(event: MouseEvent): void;
    handleFocus(event: FocusEvent): void;
    handleBlur(): void;
    handleKeydown(event: KeyboardEvent): void;
    updateValue(newValue: number): void;
    onInput(event: Event): void;
    formatNumber(value: number | string): string;
    updated(changedProperties: Map<string | number | symbol, unknown>): void;
}

interface Requirement {
    label: string;
    regex: RegExp;
}

declare class SoilTextField extends FormFieldErrorConnector {
    label: string;
    placeholder: string;
    value: string;
    isSensitive: boolean;
    requirements: Requirement[];
    isVisibilityToggled: boolean;
    _displayValue: string;
    _progressColor: string;
    _progressPercentage: number;
    _showTooltip: boolean;
    _numberOfFulfilledRequirements: number;
    private input;
    fulfilledRequirements(value: string): number;
    static styles: lit.CSSResult;
    render(): lit_html.TemplateResult<1>;
    showRequirements(): void;
    hideRequirements(): void;
    toggleVisibility(): void;
    handleFocusOut(): void;
    handleMouseDown(event: MouseEvent): void;
    handleFocus(event: FocusEvent): void;
    handleBlur(): void;
    onInput(event: Event): void;
    updated(changedProperties: Map<string | number | symbol, unknown>): void;
}

declare class SoilFormFieldError extends SoilComponent {
    error: string;
    message: string;
    errors: {
        [key: string]: boolean;
    };
    updated(changedProperties: PropertyValues): void;
    static styles: lit.CSSResult;
    render(): lit_html.TemplateResult<1>;
}

declare class SoilFormFieldHelp extends SoilComponent {
    heading: string;
    sidePanelOpen: boolean;
    panelId: string;
    sidePanel: HTMLElement;
    closeButtonIndex: string;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    toggleSidePanel(): void;
    openSidePanel(): void;
    closeSidePanel(event: Event): void;
    private focusCloseButton;
    stopPropagation(event: Event): void;
    closePanelIfNeeded(): void;
    private handleOutsideClick;
    static styles: lit.CSSResult;
    render(): lit_html.TemplateResult<1>;
    handleKeyDown(event: KeyboardEvent): void;
}

declare class SoilCheckbox extends FormFieldErrorConnector {
    label: string;
    value: boolean;
    disabled: boolean;
    input: HTMLInputElement;
    static styles: lit.CSSResult;
    render(): lit_html.TemplateResult<1>;
    private handleBlur;
    private handleButtonKeydown;
    private toggleCheckBox;
    preventInput(event: Event): void;
    updated(changedProperties: Map<string | number | symbol, unknown>): void;
    updateDisabledState(): void;
}

declare class SoilSliderField extends LitElement {
    label: string;
    value: number;
    max: number;
    min: number;
    unitType: string;
    formattedValue: string;
    slider: HTMLInputElement;
    static styles: lit.CSSResult;
    render(): lit_html.TemplateResult<1>;
    private handleInput;
    private formatValue;
    formatCurrency(result: number): string;
}
declare global {
    interface HTMLElementTagNameMap {
        "soil-slider-field": SoilSliderField;
    }
}

declare class SoilRadioGroup extends FormFieldErrorConnector {
    label: string;
    name: string;
    options: RadioOption[];
    static styles: lit.CSSResult;
    render(): lit_html.TemplateResult<1>;
    optionsTemplate(): lit_html.TemplateResult<1>[];
    handleSelection(event: Event): void;
}

declare class SoilAccordionItem extends SoilComponent {
    heading: string;
    opened: boolean;
    toggleAccordion(): void;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult;
}

interface AccordionItemProps {
    heading?: string;
}

declare class SoilAppFrame extends SoilComponent {
    _opened: boolean;
    connectedCallback(): void;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult[];
    private toggle;
    private closeMenu;
    private updateTabindex;
}

declare class AppContainerSpacer extends SoilComponent {
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult[];
}

declare class SoilHeader extends SoilComponent {
    _open: boolean;
    private _manualToggle;
    connectedCallback(): void;
    protected firstUpdated(): void;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult[];
    private updateMenuState;
    private toggleSidenav;
    private dispatchToggleEvent;
}

declare class SoilSidenav extends SoilComponent {
    _open: boolean;
    render(): lit_html.TemplateResult<1>;
    connectedCallback(): void;
    static styles: lit.CSSResult[];
    private closeMenu;
    private toggle;
}

interface MenuItem {
    id: number;
    label: string;
    href: string;
    canShow?: boolean;
    locked?: boolean;
    icon?: string;
    children?: MenuItem[];
}
interface SidenavItemProps {
    /** Array of menu items for the sidenav */
    items: Array<{
        /** Unique identifier for the menu item */
        id: number;
        /** Display label for the menu item */
        label: string;
        /** URL to navigate to when the item is clicked */
        href: string;
        /** Determines if the item is locked */
        locked: boolean;
        /** Icon associated with the menu item */
        icon: string;
        /** Optional array of child menu items */
        children?: Array<SidenavItemProps["items"]>;
    }>;
}

declare class SoilSidenavItems extends SoilComponent {
    items: Array<MenuItem>;
    private openItemId;
    private currentUrl;
    connectedCallback(): void;
    protected firstUpdated(): void;
    render(): lit_html.TemplateResult<1>;
    private renderItem;
    private renderChildren;
    private handleItemClick;
    private dispatchNavigation;
    private toggleSubMenu;
    private isActive;
    static styles: lit.CSSResult[];
}

declare const smallMinWidthScreen: lit.CSSResult;
declare const mediumMinWidthScreen: lit.CSSResult;
declare const largeMinWidthScreen: lit.CSSResult;

declare enum LANGUAGE {
    SV = "sv",
    EN = "en"
}

declare class LanguagePicker extends SoilComponent {
    selectedLanguage: LANGUAGE;
    menu: HTMLUListElement;
    connectedCallback(): void;
    disconnectedCallback(): void;
    render(): lit_html.TemplateResult<1>;
    static styles: lit.CSSResult;
    toggleMenu: () => void;
    closeMenu: () => void;
    handleLanguageChange(event: Event, language: LANGUAGE): void;
    private handleOutsideClick;
}

declare enum JumboTronSeverity {
    Success = "success",
    Leading = "leading",
    Faulty = "faulty"
}

declare class InfoBlockComponent extends SoilComponent {
    heading: string;
    lead: string;
    result: string;
    severity: string;
    iconMap: Record<JumboTronSeverity, string>;
    static styles: lit.CSSResult;
    render(): lit_html.TemplateResult<1>;
}

declare class SoilTable extends LitElement {
    data: Array<Record<string, boolean | string | number | undefined>>;
    columns: Array<{
        heading: string;
        key: string;
    }>;
    emptyMessage: string;
    render(): lit_html.TemplateResult<1>;
    renderEmptyState(): lit_html.TemplateResult<1>;
    handleRowClick(item: Record<string, boolean | string | number | undefined>): void;
    static styles: lit.CSSResult;
}
declare global {
    interface HTMLElementTagNameMap {
        "soil-table": SoilTable;
    }
}

declare class SoilSidePanel extends SoilComponent {
    heading: string;
    open: boolean;
    panelId: string;
    sidePanel: HTMLElement;
    closeButtonIndex: string;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    closeSidePanel(event: Event): void;
    private focusCloseButton;
    stopPropagation(event: Event): void;
    closePanelIfNeeded(): void;
    private handleOutsideClick;
    static styles: lit.CSSResult;
    render(): lit_html.TemplateResult<1>;
    handleKeyDown(event: KeyboardEvent): void;
}

declare enum Breakpoints {
    LargeScreen = 1400,
    MediumScreen = 992,
    SmallScreen = 600
}

export { type AccordionItemProps, type AccordionListItem, type AccordionListItemProps, type AccordionListProps, type ActionItem, type ActionListItemProps, type ActionListProps, AppContainerSpacer, Breakpoints, type BulletListItemProps, type BulletListProps, CustomPage, CustomPageBody, type CustomPageHeaderProps, CustomPageLayout, type CustomPageProps, type DescriptiveItem, type DescriptiveListItemProps, type DescriptiveListProps, type DescriptiveListSummaryProps, Docs, InfoBlockComponent, LANGUAGE, LanguagePicker, ListItemTheme, type ListOption, type ListOptions, type MenuItem, type RadioOption, type ResultSectionProps, type SectionProps, SeverityTypes, type SidenavItemProps, SoilAccordionItem, SoilAccordionListComponent, SoilAccordionListItem, SoilActionListComponent, SoilActionListItemComponent, SoilAppFrame, SoilBulletList, SoilBulletListItem, SoilButton, SoilButtonContainer, SoilCheckbox, SoilCurrencyField, SoilCustomPageHeader, SoilDescriptiveListComponent, SoilDescriptiveListItemComponent, SoilDescriptiveListSummaryComponent, SoilFormFieldError, SoilFormFieldHelp, SoilHeader, SoilIconButton, SoilLinkButton, SoilLoaderContainer, SoilRadioGroup, type SoilRadioOption, SoilResultCard, SoilSection, SoilSelectField, SoilSidePanel, SoilSidenav, SoilSidenavItems, SoilSliderField, SoilSpinner, SoilTable, SoilTextButton, SoilTextField, SoilWallpaperSection, type SpinnerProps, SpinnerSize, SpinnerThemeTypes, type WallpaperSectionProps, WallpaperSectionTheme, largeMinWidthScreen, mediumMinWidthScreen, smallMinWidthScreen };