@limetech/lime-elements/dist/types/components/dynamic-label/dynamic-label.d.ts

Lime Elements

import { Label, LabelValue } from './label.types';
/**
 * This components displays a different label depending on the current given
 * value. A label can consist of a text and an optional icon. If no matching
 * label is found among the given `labels`, the `defaultLabel` will be displayed.
 *
 * One use case of the component is to enhance the visualization of a `boolean`
 * field like a checkbox or switch in a `readonly` state.
 *
 * The reason we offer this component is that the default styling
 * of the Checkbox or Toggle switch in the `readonly` state may not always
 * provide the best way of _visualizing information_, potentially leading to
 * confusion and negatively affecting the end-users' experience.
 *
 * @exampleComponent limel-example-dynamic-label-basic
 * @exampleComponent limel-example-dynamic-label-readonly-boolean
 */
export declare class DynamicLabel {
    /**
     * The current value of the component which is used to match with the given
     * `labels` to determine what label to display.
     *
     * If not matching label is found, the `defaultLabel` is displayed.
     */
    value: LabelValue;
    /**
     * The label to display when no matching value is found in the `labels`
     * array. This is a fallback label that ensures there's always a label
     * displayed for the component.
     */
    defaultLabel: Omit<Label, 'value'>;
    /**
     * A list of available labels. Each label has a corresponding value that
     * will be matched with the current `value` of the component to determine
     * what label to display.
     */
    labels: Label[];
    render(): any[];
    private renderIcon;
    private renderLabel;
}
//# sourceMappingURL=dynamic-label.d.ts.map