@loadsmart/miranda-wc/dist/components/labeled-value/labeled-value.d.ts

Miranda Web Components component library

import type { SpacingTokenWithNone } from '@loadsmart/miranda-tokens';
import { Component } from '../component';
import type { AlignItemsValue } from '../layout';
import type { JustifyContentValue } from '../layout/layout.types';
import type { TextProps } from '../text';
import '../layout/stack';
import '../layout/group';
import '../text';
import './labeled-value-label';
import './labeled-value-value';
export declare const defaultLabeledValueProps: {
    readonly gap: "spacing-2";
    readonly justify: "flex-start";
};
export interface LabeledValueProps {
    /**
     * If true, the label and value will be displayed in a row.
     */
    inline?: boolean;
    /**
     * Label of the component. If not provided, it will look for a slot with the name 'label'.
     */
    label?: string;
    /**
     * Value of the component. If not provided, it will look for a slot with the name 'value'.
     */
    value?: string;
    /**
     * Gap between the label and the value. It can be Spacing token name. Default is 'spacing-2'.
     */
    gap?: SpacingTokenWithNone;
    /**
     * Alignment of the component. Default is 'flex-start', but it changes to 'center' if `inline` is true.
     */
    align?: AlignItemsValue;
    /**
     * Justify content of the component. Default is 'flex-start'.
     */
    justify?: JustifyContentValue;
    /**
     * Fallback value for the value if the value is `null` or `undefined`. Default to '-'.
     */
    fallbackValue?: string;
    /**
     * Size of the label. Default is 'body-sm' when `inline` is `false`; Default is 'body-md' when `inline` is `true`.
     */
    labelVariant?: TextProps['variant'];
    /**
     * Color of the label. Default is 'text-tertiary'.
     */
    labelColor?: TextProps['color'];
    /**
     * Size of the value. Default is 'body-md'.
     */
    valueVariant?: TextProps['variant'];
    /**
     * Color of the value. Default is 'text-primary'.
     */
    valueColor?: TextProps['color'];
}
export declare class LabeledValue extends Component implements LabeledValueProps {
    static define(): void;
    constructor();
    static get properties(): {
        inline: {
            type: BooleanConstructor;
        };
        label: {
            type: StringConstructor;
        };
        value: {
            type: StringConstructor;
        };
        gap: {
            type: StringConstructor;
        };
        align: {
            type: StringConstructor;
        };
        justify: {
            type: StringConstructor;
        };
        fallbackValue: {
            type: StringConstructor;
            attribute: string;
        };
        labelVariant: {
            type: StringConstructor;
            attribute: string;
        };
        labelColor: {
            type: StringConstructor;
            attribute: string;
        };
        valueVariant: {
            type: StringConstructor;
            attribute: string;
        };
        valueColor: {
            type: StringConstructor;
            attribute: string;
        };
    };
    inline?: LabeledValueProps['inline'];
    label?: LabeledValueProps['label'];
    value?: LabeledValueProps['value'];
    gap: LabeledValueProps['gap'];
    align: LabeledValueProps['align'];
    justify: LabeledValueProps['justify'];
    fallbackValue: LabeledValueProps['fallbackValue'];
    labelVariant: LabeledValueProps['labelVariant'];
    labelColor: LabeledValueProps['labelColor'];
    valueVariant: LabeledValueProps['valueVariant'];
    valueColor: LabeledValueProps['valueColor'];
    private getFallback;
    private getLabel;
    private getValue;
    private getLabelVariant;
    private get wrapperAlign();
    private bodyTemplate;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'm-labeled-value': LabeledValue;
    }
}