/* eslint-disable */ /* tslint:disable */ /** * This is an autogenerated file created by the Stencil compiler. * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime"; import { AnimationBuilder, CheckboxValueType, Color, ComboBoxValueType as ComboBoxValueType1, ComponentProps, ComponentRef, FormValidationValueType, FrameworkDelegate, LuChangeEvent as LuChangeEvent1, LUFormCheckboxGroupValue, LUFormGroupType, LUFormGroupValidationState, OverlayEventDetail, RadioChangeEventDetail, ScreenSizeUpdatedType, SelectOptionType, StyleEvent, TextInputChangeEvent, Validations, WrappingFormValidationType, } from "./interface"; import { ComboBoxConnectorSearchRequest, ComboBoxSearchRequest, ComboBoxSearchResults, ComboBoxValueType, LuChangeEvent, TabChangeEvent, } from "./types"; import { UpdateDataRequestType, } from "./types/form-validation-interface"; import { TextareaChangeEventDetail, } from "./types/text-area-interface"; export namespace Components { interface LuBackdrop { /** * If `true`, the backdrop will stop propagation on tap. */ "stopPropagation": boolean; /** * If `true`, the backdrop will can be clicked and will emit the `luBackdropTap` event. */ "tappable": boolean; /** * If `true`, the backdrop will be visible. */ "visible": boolean; } interface LuBreakpoints { "lg": number; "md": number; "sm": number; "xl": number; } interface LuButton { /** * The type of button. */ "buttonType": string; /** * The color to use from the Liberty color palette. Default options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`. */ "color"?: Color; /** * If `true`, the user cannot interact with the button. */ "disabled": boolean; /** * Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders. */ "expand"?: "full" | "block"; /** * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`. */ "fill"?: "clear" | "outline" | "solid" | "default"; /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ "href"?: string; /** * Sets the aria label on the button or link for screen reader purposes. */ "label"?: string; /** * Specifies relationship of current document to linked document. Only used when href prop is set. */ "rel"?: string; /** * The button shape. */ "shape"?: "round"; /** * The button size. */ "size"?: "small" | "default" | "large"; /** * If `true`, activates a button with a heavier font weight. */ "strong": boolean; /** * Specifies how to display link. Only used when href prop is set. */ "target"?: "_blank" | "_parent" | "_self" | "_top"; /** * The type of the button. */ "type": "submit" | "reset" | "button"; } interface LuCard { /** * The color to use from the Liberty color palette. Default options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`. */ "color"?: Color; } interface LuCardButtons { } interface LuCardContent { } interface LuCardFooter { /** * The color to use from the Liberty color palette. Default options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`. */ "color"?: Color; /** * If `true`, the card footer will be translucent. */ "translucent": boolean; } interface LuCardHeader { /** * The color to use from the Liberty color palette. Default options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`. */ "color"?: Color; /** * If `true`, the card header will be translucent. */ "translucent": boolean; } interface LuCardImage { /** * If image is not an icon this is used as the alternate text */ "altText": string; /** * If image is an icon this is used for the icon color */ "iconColor": string; /** * If image is an icon and their is not a src prop provided this will be used to set the icon */ "iconName": string; /** * if image is an icon then this will be used to set icon size. Please see lu-icon for details on the different sizes available */ "iconSize": string; /** * If set to true this component will attempt to display as an icon */ "isIcon": boolean; /** * src for image or icon */ "src": string; } interface LuCardTitle { /** * The color to use from the Liberty color palette. Default options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`. */ "color"?: Color; } interface LuCheckbox { /** * If `true`, the checkbox is selected. */ "checked": boolean; /** * The color to use from your application's color palette. Default options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`. For more information on colors, see [theming](/docs/theming/basics). */ "color"?: Color; /** * If `true`, the user cannot interact with the checkbox. */ "disabled": boolean; /** * prevents default events and exposes new checked event */ "isExternallyManaged": boolean; /** * passed dynamically from parent to give proper labeled by aria */ "labeledById": string; /** * The name of the control. */ "name": string; /** * The value of the toggle does not mean if it's checked or not, use the `checked` property for that. It's good to note here this is not a real input checkbox. The value is just an associated value you want with the checkbox */ "value": any; } interface LuCheckboxGroup { /** * Added to the arial labelled on the native input */ "ariaLabeledByAddition": string; /** * Direction of elements */ "direction": "down" | "across"; "hasFormGroup": boolean; /** * Used to add is-invalid attribute signifying invalidity */ "invalid": boolean; /** * The name of the control, which is submitted with the form data. */ "name": string; /** * Tells if a at least one checkbox is required to be checked */ "required": boolean; /** * this gives us a handle to set focus on the element */ "setFocus": () => Promise; /** * this is used by the form validation/ form group to reset Value without initiating a validity check * @param update */ "updateValue": (update: { name: string; checked: boolean; }[]) => Promise; /** * id set dynamically */ "useId": string; /** * Used to add is-valid attribute signifying validity */ "valid": boolean; /** * Value of contained checkboxes */ "value": CheckboxValueType[] | null; } interface LuCol { /** * The amount to offset the column, in terms of how many columns it should shift to the right of the total available. */ "offset"?: string; /** * The amount to offset the column for lg screens, in terms of how many columns it should shift to the right of the total available. */ "offsetLg"?: string; /** * The amount to offset the column for md screens, in terms of how many columns it should shift to the right of the total available. */ "offsetMd"?: string; /** * The amount to offset the column for sm screens, in terms of how many columns it should shift to the right of the total available. */ "offsetSm"?: string; /** * The amount to offset the column for xl screens, in terms of how many columns it should shift to the right of the total available. */ "offsetXl"?: string; /** * The amount to offset the column for xs screens, in terms of how many columns it should shift to the right of the total available. */ "offsetXs"?: string; /** * The amount to pull the column, in terms of how many columns it should shift to the left of the total available. */ "pull"?: string; /** * The amount to pull the column for lg screens, in terms of how many columns it should shift to the left of the total available. */ "pullLg"?: string; /** * The amount to pull the column for md screens, in terms of how many columns it should shift to the left of the total available. */ "pullMd"?: string; /** * The amount to pull the column for sm screens, in terms of how many columns it should shift to the left of the total available. */ "pullSm"?: string; /** * The amount to pull the column for xl screens, in terms of how many columns it should shift to the left of the total available. */ "pullXl"?: string; /** * The amount to pull the column for xs screens, in terms of how many columns it should shift to the left of the total available. */ "pullXs"?: string; /** * The amount to push the column, in terms of how many columns it should shift to the right of the total available. */ "push"?: string; /** * The amount to push the column for lg screens, in terms of how many columns it should shift to the right of the total available. */ "pushLg"?: string; /** * The amount to push the column for md screens, in terms of how many columns it should shift to the right of the total available. */ "pushMd"?: string; /** * The amount to push the column for sm screens, in terms of how many columns it should shift to the right of the total available. */ "pushSm"?: string; /** * The amount to push the column for xl screens, in terms of how many columns it should shift to the right of the total available. */ "pushXl"?: string; /** * The amount to push the column for xs screens, in terms of how many columns it should shift to the right of the total available. */ "pushXs"?: string; /** * The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. */ "size"?: string; /** * The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. */ "sizeLg"?: string; /** * The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. */ "sizeMd"?: string; /** * The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. */ "sizeSm"?: string; /** * The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. */ "sizeXl"?: string; /** * The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. */ "sizeXs"?: string; } interface LuComboBox { /** * Gives a hook to reset data/loading state when we receive an error */ "apiErrorCount": number; /** * Provides a way for users to specify the labeling elements. Pass the id's, separated by a space, to this prop. */ "ariaLabeledByAddition": string; /** * Search functionality enabled */ "autoSuggestEnabled": boolean; /** * The color to use from your application's color palette. */ "color"?: Color; /** * If `true`, the user cannot interact with the textarea. */ "disabled": boolean; /** * This specifies the combo box is for email. It helps the display of the selected box by allowing it to only show the before @ symbol part. */ "forEmail": boolean; "hasFormGroup": boolean; /** * Declares input as invalid */ "invalid": boolean; /** * Allows for multiple entries or selections - THIS COMPONENT ONLY SUPPORTS THIS RIGHT NOW. WE NEED A DESIGN FOR SINGLE SELECTION. */ "multipleSelections": boolean; /** * The name of the control, which is submitted with the form data. */ "name": string; "nativeInputsId": string; /** * Declares the purpose of the comboBox - needed if you plan on using the lu-combo-box-connector. The connector should have the same purpose. */ "purpose": string; /** * Notes that element is required */ "required": boolean; /** * Provided search results from requested input */ "searchResults": ComboBoxValueType[]; /** * this gives us a handle to set focus on the element */ "setFocus": () => Promise; /** * type defines how to validate the values as well as sets the type on the contained input text | email */ "type": "text" | "email"; /** * this is used by the form validation/ form group to reset Value without initiating a validity check * @param update */ "updateValue": (update: ComboBoxValueType[]) => Promise; /** * Declares input as validated */ "valid": boolean; /** * Keeps track of selected options */ "value": ComboBoxValueType[]; } interface LuComboBoxConnector { /** * This identifies the purpose of this connector */ "purpose": string; /** * Provided search results */ "searchResults": ComboBoxSearchResults[]; } interface LuComboBoxSelection { /** * Sets the input as editable or displays the closable box */ "isEditing": boolean; /** * @ and display that instead of name when it is not provided */ "isEmail": boolean; /** * Passed to bring significance to the component - name and value */ "selection": ComboBoxValueType; } interface LuDropdownListbox { "isExpanded": boolean; "label": string; "labelRef": string; "value": any; } interface LuFab { /** * If `true`, both the `lu-fab-button` and all `lu-fab-list` inside `lu-fab` will become active. That means `lu-fab-button` will become a `close` icon and `lu-fab-list` will become visible. */ "activated": boolean; /** * Close an active FAB list container */ "close": () => Promise; /** * If `true`, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot. */ "edge": boolean; /** * Where to align the fab horizontally in the viewport. */ "horizontal"?: "start" | "end" | "center"; /** * Where to align the fab vertically in the viewport. */ "vertical"?: "top" | "bottom" | "center"; } interface LuFabButton { /** * If `true`, the fab button will show a close icon. */ "activated": boolean; /** * The color to use from the Liberty color palette. Default options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`. */ "color"?: Color; /** * If `true`, the user cannot interact with the fab button. */ "disabled": boolean; /** * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. */ "href"?: string; /** * doesn't toggle on click */ "isExternallyManaged": boolean; /** * If `true`, the fab button will show selected state. */ "selected": boolean; /** * If `true`, the fab button will show when in a fab-list. */ "show": boolean; /** * The size of the button. Set this to `small` in order to have a mini fab. */ "size"?: "small"; /** * If true it will function as the main toggle button for the component. */ "toggleButton": boolean; /** * If `true`, the fab button will be translucent. */ "translucent": boolean; /** * The type of the button. */ "type": "submit" | "reset" | "button"; /** * Allows you to attach a value to the element */ "value"?: any; } interface LuFabList { /** * If `true`, the fab list will be show all fab buttons in the list. */ "activated": boolean; /** * The side the fab list will show on relative to the main fab button. */ "side": "start" | "end" | "top" | "bottom"; } interface LuFormGroup { /** * Clears error and error message when clear input is clicked */ "clearErrorStateOnClearInput": boolean; /** * Only used for advanced components where the input, select, etc is not slotted. If true, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`. */ "clearInput": boolean; /** * Only used for advanced components where the input, select, etc is not slotted. If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. */ "clearOnEdit"?: boolean; /** * The color to use from the Liberty color palette. Default options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`. */ "color"?: Color; /** * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ "cssClass"?: string | string[]; /** * Externally set error message */ "errorMessage": string; /** * if external validation is being used this property is used to override isValid state */ "externallyDeemedInvalid": boolean; /** * if external validation is being used this property is used to override isValid state */ "externallyDeemedValid": boolean; /** * This sets the htmlFor property for the internal lu-label component */ "forId": string; "getValidationValues": () => Promise; /** * sets helper text of lu-form-group */ "helperText": string; /** * tells component to stop its own validation and validate externally */ "isExternallyValidated": boolean; /** * tells if validation is made on submission */ "isValidatedOnSubmission": boolean; /** * sets the text of the label */ "labelText": string; /** * sets the update trigger - options */ "updateTrigger": "blur" | "change"; /** * update value while reseting error state */ "updateValue": (newValue: any) => Promise; /** * Provides option to use asterisk as required indicator */ "useAsteriskAsRequiredIndicator": boolean; /** * every element can have an id... but this one is set by the element it holds. When there are multiple selects or inputs each is named by itself so that it can have a corresponding for attribute on the label */ "useId": string; /** * starting validation method. */ "validate": () => Promise; } interface LuFormValidation { /** * forces validation on all components and return the validation object */ "forceValidation": () => Promise; /** * Shows form is invalid */ "isInvalid": boolean; /** * Shows form is valid */ "isValid": boolean; "primaryCompoundId": string; /** * This provides a way to update values of the form while preventing immediate re-validation Don't forget that you need the name and value for checkbox [{name: string, checked: boolean}] For selects pass the name for the option * @param updates */ "updateValues": (updates: UpdateDataRequestType[]) => Promise; "useId": string; /** * values of form */ "value": LUFormGroupValidationState[]; /** * You can pass an error message with a custom wrapping validation function that receives a validation state array */ "wrappingValidation": WrappingFormValidationType[]; } interface LuGdprConsent { "grantConsentCookie": () => Promise; "resetConsentCookie": () => Promise; "revokeConsentCookie": () => Promise; } interface LuGrid { /** * If `true`, the grid will have a fixed width based on the screen size. */ "fixed": boolean; } interface LuHeader { /** * The color to use from the Liberty color palette. Default options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`. */ "color"?: Color; /** * If true shows the preheader */ "preHeader": boolean; } interface LuIcon { /** * Specifies the label to use for accessibility. Defaults to the icon name. */ "ariaLabel"?: string; /** * @Deprecated Allows button role for the icon. Input is the only thing using this... until there is time to refactor lu-input please don't include anywhere else */ "buttonRole": boolean; /** * The color to use for the background of the item. */ "color"?: string; /** * Specifies whether the icon should horizontally flip when `dir` is `"rtl"`. */ "flipRtl"?: boolean; /** * The hex color of the icon. */ "hexColor"?: string; /** * A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property. */ "icon"?: string; /** * Specifies which icon to use on `ios` mode. */ "ios"?: string; /** * Specifies which icon to use on `md` mode. */ "md"?: string; /** * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. */ "mode"?: "ios" | "md"; /** * Specifies which icon to use from the built-in set of icons. */ "name"?: string; /** * The size of the icon. Available options are: `"small"` and `"large"`. */ "size"?: string; /** * Specifies the exact `src` of an SVG file to use. */ "src"?: string; } interface LuIconFinder { } interface LuImg { /** * This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded. */ "alt"?: string; /** * The image URL. This attribute is mandatory for the element. */ "src"?: string; } interface LuInput { /** * If the value of the type attribute is file, this attribute indicates the types of files that the server accepts. otherwise it's ignored. The value must be comma-separated unique “content type specifiers”: A case-insensitive file extension starting with the STOP character (U+002E). (e.g. .jpg, .png, .doc). A valid MIME type with no extensions. audio/* representing sound files. video/* representing video files. image/* representing image files. */ "accept"?: string; /** * used for combo box accessibility - defines the active option */ "ariaActiveDescendant": string; /** * used for autocomplete accessibility */ "ariaAutoComplete": "both" | "list"; /** * used for combo box accessibility - defines the listbox if there is one */ "ariaControls": string; /** * Provides a way for users to specify the labeling elements. Pass the id's, separated by a space, to this prop. */ "ariaLabeledByAddition": string; /** * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`. */ "autocapitalize": string; /** * This attribute indicates if the input can be automatically completed by the browser, usually by remembering previous values the user has entered. There are a lot of options... refer to docs. Defaults to "off" */ "autocomplete": string; /** * Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`. */ "autocorrect": string; /** * This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`. */ "autofocus": boolean; /** * If the value of the type attribute is file, this Boolean attribute indicates that capture of media directly from the device's sensors using a media capture mechanism is preferred, such as a webcam or microphone. */ "capture": string; /** * If the value of the type attribute is radio or checkbox, this Boolean attribute pre-checks the control before the user interacts with it. */ "checked": boolean; /** * If true, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`. */ "clearInput": boolean; /** * If true, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. */ "clearOnEdit"?: boolean; /** * The color to use from the Liberty color palette. Default options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`. */ "color"?: Color; /** * Set the amount of time, in milliseconds, to wait to trigger the `luChange` event after each keystroke. Default `0`. */ "debounce": number; /** * This Boolean attribute prevents the user from interacting with the input. In particular, the click event is not dispatched on disabled controls, and disabled controls aren't submitted with their form. */ "disabled": boolean; /** * The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a
element in the same document. If this attribute isn't used, the element is associated with its nearest ancestor element, if any. This attribute lets you to place elements anywhere within a document, not just as descendants of form elements. An input can be associated with at most one form. */ "form": string; "hasFormGroup": boolean; /** * A hint to browsers for which virtual keyboard to display. This attribute applies when the the type attribute is text, password, email, or url. Possible values: none: No virtual keyboard should be displayed. text: Text input in the user's locale. decimal: Fractional numeric input. numeric: Numeric input. tel: Telephone input, including asterisk and pound key. Prefer . search: A virtual keyboard optimized for search input. email: Email input. Prefer . url: URL input. Prefer . */ "inputmode": string; /** * Declares input as invalid */ "invalid": boolean; /** * Points to a of predefined options to suggest to the user. The value must be the id of a element in the same document. Browsers display only valid options for the input. This attribute is ignored when the type attribute is hidden, checkbox, radio, file, or a button type. */ "list": string; /** * The maximum (numeric or date-time) value for the input. Must not be less than its minimum (min attribute) value. */ "max": number | string; /** * If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code points) that the user can enter. For other control types, it is ignored. */ "maxLength": number; /** * The minimum (numeric or date-time) value for the input. Must not be less than its minimum (min attribute) value. */ "min": number | string; /** * If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in UTF-16 code points) that the user can enter. For other control types, it is ignored. */ "minLength": number; /** * This Boolean attribute indicates whether the user can enter more than one value. This attribute only applies when the type attribute is set to email or file. */ "multiple": boolean; /** * The name of the control, which is submitted with the form data. */ "name": string; /** * removes the border */ "noBorder": boolean; /** * A regular expression that the control's value is checked against. The pattern must match the entire value. Use the title attribute to describe the pattern to help the user. This attribute only applies when the value of the type attribute is text, search, tel, url, email, or password. The regular expression language is the same as the JavaScript RegExp algorithm, with the 'u' parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes. */ "pattern": string; /** * A hint to the user of what can be entered in the control, typically in the form of an example of the type of information that should be entered. The placeholder text must not contain carriage returns or line-feeds. */ "placeholder": string; /** * Prefix Icon. Select from Lu Icons list */ "prefixIcon": string; /** * Adds hover state that reflects a clickable prefix icon if true. Doesn't do anything if there is not an icon string passed */ "prefixIconClickable": boolean; /** * This Boolean attribute prevents the user from modifying the value of the input. It is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit). */ "readOnly": boolean; /** * This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The :optional and :required CSS pseudo-classes will be applied to the field as appropriate. */ "required": boolean; /** * this gives us a handle to set focus on the element */ "setFocus": () => Promise; /** * The initial size of the control. Starting in HTML5, this attribute applies only when the type attribute is set to text, search, tel, url, email, or password, otherwise it is ignored. The size must be an integer greater than zero. The default value is 20. */ "size": number; /** * Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked. */ "spellcheck": boolean; /** * Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum. */ "step": number | string; /** * Suffix Icon. Select from Lu Icons List. Does not show up if clearInput is set to true. */ "suffixIcon": string; /** * Adds hover state that reflects a clickable prefix icon if true. Doesn't do anything if there is not an icon string passed */ "suffixIconClickable": boolean; /** * The position of the element in the tabbing navigation order for the current document. */ "tabIndexWanted": number; /** * This specifies what type of input it is. button | checkbox | color | date | datetime-local | email | file | hidden | image | month | number | password radio | range | reset | search | submit | tel | text | time | url | week */ "type": "text" | "email" | "password"; /** * this is used by the form validation/ form group to reset Value without initiating a validity check * @param update */ "updateValue": (update: any) => Promise; /** * id set dynamically */ "useId": string; /** * Declares input as validated */ "valid": boolean; /** * The value of the input. */ "value": string; } interface LuLabel { /** * The color to use from the Liberty color palette. Default options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`. */ "color"?: Color; /** * Specifies error message if the property in invalid */ "errorMessage": string | null; /** * used as the for property on the label... connecting the label with the input */ "forId": string; /** * Specifies the helper text to display in the upper right corner (over-rides the required and optional text) */ "helperText": string | null; /** * Tells us that the input is invalid */ "invalid": boolean; /** * Label text */ "labelText": string; /** * Specifies that the input is optional in the right top corner */ "optional": boolean; /** * Specifies if input is required or not in the right corner */ "required": boolean; /** * Provides option to use asterisk as required indicator */ "useAsteriskAsRequiredIndicator": boolean; /** * ID of component. Dynamically set. */ "useId": string; } interface LuListboxOption { "role": string; "value": any; } interface LuModal { /** * Reference to the element which activated the modal */ "activator"?: HTMLElement; /** * If `true`, the modal will animate. */ "animated": boolean; /** * If `true`, the modal will be dismissed when the backdrop is clicked. */ "backdropDismiss": boolean; /** * The component to display inside of the modal. */ "component": ComponentRef; /** * The data to pass to the modal component. */ "componentProps"?: ComponentProps; /** * Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. */ "cssClass"?: string | string[]; /** * leaving this in so we can use it if we need to integrate with angular controllers */ "delegate"?: FrameworkDelegate; /** * Dismiss the modal overlay after it has been presented. * @param data Any data to emit in the dismiss events. * @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'. */ "dismiss": (data?: any, role?: string) => Promise; /** * Animation to use when the modal is presented. */ "enterAnimation"?: AnimationBuilder; /** * If this is set, focus this element first. */ "firstFocusableElement"?: HTMLElement; /** * If `true`, the keyboard will be automatically dismissed when the overlay is presented. */ "keyboardClose": boolean; /** * Animation to use when the modal is dismissed. */ "leaveAnimation"?: AnimationBuilder; /** * If set, gives a label to identify the modal for accessibility purposes. */ "modalLabel"?: string; /** * Returns a promise that resolves when the modal did dismiss. */ "onDidDismiss": () => Promise>; /** * Returns a promise that resolves when the modal will dismiss. */ "onWillDismiss": () => Promise>; /** * yep... overlay index */ "overlayIndex": number; /** * Present the modal overlay after it has been created. */ "present": () => Promise; /** * If `true`, a backdrop will be displayed behind the modal. */ "showBackdrop": boolean; } interface LuRadio { /** * Used by parent to prevent deselection */ "canDeselect": boolean; /** * If `true`, the radio is selected. */ "checked": boolean; /** * The color to use from the Liberty color palette. Default options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`. */ "color"?: Color; /** * If `true`, the user cannot interact with the radio. */ "disabled": boolean; /** * passed dynamically from parent to give proper labeled by aria */ "labeledById": string; /** * The name of the control, which is submitted with the form data. */ "name": string; /** * the value of the radio. */ "value"?: any | null; } interface LuRadioGroup { /** * If `true`, the radios can be deselected. */ "allowEmptySelection": boolean; /** * Provides a way for users to specify the labeling elements. Pass the id's, separated by a space, to this prop. */ "ariaLabeledByAddition": string; /** * Direction of elements */ "direction": "down" | "across"; "hasFormGroup": boolean; /** * Used to add is-invalid attribute signifying invalidity */ "invalid": boolean; /** * The name of the control, which is submitted with the form data. */ "name": string; /** * Tells if a value is required from the radio group */ "required": boolean; /** * this gives us a handle to set focus on the element */ "setFocus": () => Promise; /** * this is used by the form validation/ form group to reset Value without initiating a validity check * @param update */ "updateValue": (update: any) => Promise; /** * id set dynamically */ "useId": string; /** * Used to add is-valid attribute signifying validity */ "valid": boolean; /** * the value of the radio group. */ "value": any; } interface LuRow { } interface LuSelect { "ariaLabel": string; /** * Provides a way for users to specify the labeling elements. Pass the id's, separated by a space, to this prop. */ "ariaLabeledByAddition": string; /** * The color to use from the Liberty color palette. Default options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`. */ "color"?: Color; "disabled": boolean; "hasFormGroup": boolean; "helpText": string; /** * Declares input as invalid */ "invalid": boolean; "name": string; "options": SelectOptionType[]; "placeholder": string; /** * A value from field will be required when used in a lu-form-group */ "required": boolean; /** * value of the select */ "selectedValueName": any; /** * this gives us a handle to set focus on the element */ "setFocus": () => Promise; /** * Do you need a placeholder option */ "showPlaceholderOption": boolean; /** * this is used by the form validation/ form group to reset Value without initiating a validity check * @param update */ "updateValue": (update: any) => Promise; /** * id set dynamically */ "useId": string; /** * Declares input as validated */ "valid": boolean; "value": any; } interface LuSideMenu { /** * This method allows to collapse and open the sidebar. Note: This is different from hiding the sidebar completely. */ "collapsedHandler": () => Promise; /** * The color to use from the Liberty color palette. Default options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`. */ "color"?: Color; /** * Externally manage state */ "externallyManaged": boolean; /** * gives some box shadow */ "hasBoxShadow": boolean; /** * Tells if the side menu has been toggled closed */ "isCollapsed": boolean; /** * The attribute for making sure the sidebar is collapsible or not. Defaults to `"false"`. Toggle button doesn't show up if this isn't true */ "isCollapsible": boolean; /** * This method allows to set the sidebar to hidden. */ "isHidden": () => Promise; /** * The attribute for making sure the sidebar is dataIsVisible or not. Defaults to `"false"` */ "isVisible": boolean; /** * This method allows to set the sidebar to dataIsVisible. */ "makeVisible": () => Promise; } interface LuSkeletonText { /** * animate */ "shouldAnimate": boolean; /** * Width for the element to render at. */ "width": string; } interface LuSpinner { /** * The color to use from the Liberty color palette. Default options are: `'primary', 'primary_darkest', 'primary_darker', 'primary_dark', 'primary_light', 'primary_lighter', 'primary_lightest', 'neutral', 'neutral_darker', 'neutral_darkest', 'neutral_light', 'neutral_lighter', 'neutral_lightest', 'ruby', 'official', 'warning', 'error', 'success', 'success_light', 'mustard'`. */ "dataColor"?: Color; /** * Duration of the spinner animation in milliseconds. */ "dataDuration": number; /** * If `true`, the spinner will be visibly hidden but still within the DOM. */ "dataHidden": boolean; /** * Set an a11y message for screen readers when the loader appears. Defaults to 'Please wait while the next step loads.' */ "dataMessage": string; /** * If `true`, the spinner's animation will be paused. */ "dataPaused": boolean; /** * Size of the spinner as a multiple of its own dimensions (32px x 32px). */ "dataScale": number; } interface LuTab { /** * sets active state */ "active": boolean; /** * sets name value used in tabs component to show active tab (does that through the value property) */ "name": any; /** * This property is internally used show underline correctly. If false it uses this components css to show highlighted tab */ "noSlide": any; } interface LuTabs { /** * If fancyAnimation is true then the component needs to know when t */ "elementResized": () => Promise; /** * sets the aria label */ "label"?: string; /** * dont do cool animation, if set to false the component needs to know when it's size has changed through the elementResized method */ "noSlide": boolean; /** * value of the selected tab */ "value": string; } interface LuTextArea { /** * Provides a way for users to specify the labeling elements. Pass the id's, separated by a space, to this prop. */ "ariaLabeledByAddition": string; /** * If `true`, the element height will increase based on the value. */ "autoGrow": boolean; /** * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. */ "autocapitalize": string; /** * This Boolean attribute lets you specify that a form control should have input focus when the page loads. */ "autofocus": boolean; /** * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. */ "clearOnEdit": boolean; /** * The color to use from your application's color palette. */ "color"?: Color; /** * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. */ "cols"?: number; /** * Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. */ "debounce": number; /** * If `true`, the user cannot interact with the textarea. */ "disabled": boolean; /** * Returns the native `