@limetech/lime-elements
Version:
75 lines • 2.64 kB
TypeScript
/**
* This is a private component, used to render a notched outline
* around all input elements that can have a floating label.
* Inspired by Material Design's styles for input fields.
* We use it in various components to unify styles and avoid
* repeating code.
*
* :::note
* The component has `shadow: false`. This is to improve performance,
* and ensure that its internal elements are considered as internal parts
* of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
* would be correctly associated with the input element's `id`, in the consumer component.
* :::
* @exampleComponent limel-example-notched-outline-basic
* @private
*/
export declare class NotchedOutline {
/**
* Set to `true` when the input element is required.
* This applies proper visual styles, such as inclusion of an asterisk
* beside the label.
*/
required: boolean;
/**
* Set to `true` when the input element is readonly.
* This applies proper visual styles, such as making the outline transparent.
*/
readonly: boolean;
/**
* Set to `true` to indicate that the current value of the input element is
* invalid. This applies proper visual styles, such as making the outlines red.
*/
invalid: boolean;
/**
* Set to `true` to indicate that the input element is
* disabled. This applies proper visual styles, such as making the outlines
* and the label transparent.
*/
disabled: boolean;
/**
* Label to display for the input element.
* :::important
* Note that the input element of the consumer component will be
* labeled by this label, using the `labelId` prop.
* :::
*/
label?: string;
/**
* The `id` of the input element which should be
* labeled by the provided label.
*/
labelId?: string;
/**
* Set to `true` when the user has entered a value for the input element,
* shrinking the label in size, and visually rendering it above the entered value.
*/
hasValue: boolean;
/**
* Set to `true` when the consumer element displays a leading icon.
* This applies proper visual styles, such as rendering the label
* correctly placed beside the leading icon.
*/
hasLeadingIcon: boolean;
/**
* Set to `true` when the consumer element needs to render the
* label above the input element, despite existence of a `value`.
* For example in the `text-editor` or `limel-select`,
* where the default layout requires a floating label.
*/
hasFloatingLabel: boolean;
render(): any;
private renderLabel;
private renderEmptyReadonlyValue;
}
//# sourceMappingURL=notched-outline.d.ts.map