/* 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"; export namespace Components { interface Ku4Carousel { /** * Will start this carousel in auto scroll mode */ "auto": boolean; /** * Delay in millisecond between slide changes when running in auto */ "delay": number; /** * Display the next ku4-carousel-slide */ "next": () => Promise; /** * Prevents touch swiping */ "noSwipe": boolean; /** * Pause auto slide change */ "pause": () => Promise; /** * Start auto slide change */ "play": () => Promise; /** * Display the previous ku4-carousel-slide */ "previous": () => Promise; /** * Slide to the slide number specified. * @param slide - Slide number or slide name to slide to. */ "slideTo": (slide: any) => Promise; /** * Sets the distance, in pixels, a touch must travel before activating a swipe. */ "swipeTolerance": number; } interface Ku4CarouselControls { /** * Controls for carousel having id of value */ "for": string; } interface Ku4CarouselSlide { /** * Set this slide to active. */ "activate": () => Promise; /** * Set this slide to inactive. */ "deactivate": () => Promise; /** * Name of slide. The value of this property can be used as the value of the "slide" attribute of a ku4-carousel-control to target this slide as the active slide for the target ku4-carousel-control */ "name": any; /** * Move this slide in to view. * @param direction - Direction to move. */ "slideIn": (direction: 'prev' | 'next') => Promise; /** * Move this slide out of view. * @param direction - Direction to move. */ "slideOut": (direction: 'prev' | 'next') => Promise; } interface Ku4Col { /** * Order of column at large (optional). */ "orderLg": 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Order of column at medium (optional). */ "orderMd": 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Order of column at small (optional). */ "orderSm": 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Order of column at extra-small (optional). */ "orderXs": 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Number of columns to span left and right at large (optional). */ "spanLg": 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Number of columns to span left and right at medium (optional). */ "spanMd": 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Number of columns to span left and right at extra-small (optional). */ "spanSm": 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Number of columns to span left and right at extra-small (optional). */ "spanXs": 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Start position of column at large (optional). */ "startLg": 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Start position of column at medium (optional). */ "startMd": 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Start position of column at small (optional). */ "startSm": 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Start position of column at extra-small (optional). */ "startXs": 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; } interface Ku4Drawer { /** * Pin drawer to bottom */ "bottom": boolean; /** * Pin drawer to left */ "left": boolean; /** * Display drawer */ "open": boolean; /** * Pin drawer to right */ "right": boolean; /** * Open size of this drawer (any valid CSS width or height value) */ "size": string; /** * Toggle drawer */ "toggle": () => Promise; /** * Pin drawer to top */ "top": boolean; } interface Ku4Feature { /** * Will display when true. This takes precedence over any passed policy. (optional) */ "on": boolean; /** * A function or method that returns a boolean. A return value of true will turn on the this feature. (optional) */ "policy": string; } interface Ku4FocusTrap { /** * Activate focus trap * @param element - Element to return focus to when trap is deactivated. */ "activate": (element?: any) => Promise; /** * Focus trap will be active when true. */ "active": boolean; /** * Deactivate focus trap. */ "deactivate": () => Promise; /** * A querySelector of elements to explicitly exclude. This can be useful for greedy accessibility apis and screen reader fallover. Pass a comma delimited string of multiple selectors to target multiple exclusions. */ "exclude": string; /** * A querySelector of shadow elements to explicitly exclude. This can be useful for greedy accessibility apis and screen reader fallover. Pass a comma delimited string of multiple selectors to target multiple exclusions. Pass selectors that starts with the target components host lightDom element E.g. `'ku4-carousel .next, ku4-carousel .prev'` will explicitly exclude the target ku4-carousel next and previous buttons from being navigable by greedy accessibility tools, i.e. VoiceOver. */ "excludeShadow": string; /** * A querySelector of elements to include in the trap that are not children of this focus trap. This can be useful for specific situations such as modal overlays. */ "include": string; /** * A querySelector of element to initially focus */ "initial": string; /** * A querySelector of element to return focus to */ "return": string; } interface Ku4Form { /** * Focuses the first invalid ku4-validation */ "focusFirstInvalid": () => Promise; /** * Set to true to display as invalid */ "invalid": boolean; /** * A string of the name of the field to invalidate * @param name */ "invalidate": (name: any) => Promise; /** * Returns a list of the names of all of the fields associated with this form. */ "listFieldNames": () => Promise; /** * Reads data from the associated form */ "read": () => Promise; "valid": boolean; /** * Validates this form. This method is automatically called internally on submit of the form only allowing a successful submit if the form is valid. */ "validate": () => Promise; /** * Writes data to the associated form * @param data - Data to write * @param silent - String to mask* */ "write": (data: any, silent?: boolean) => Promise; } interface Ku4Grid { /** * Number of columns to render at large (optional). */ "columnsLg"?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Number of columns to render at medium (optional). */ "columnsMd"?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Number of columns to render at small (optional). */ "columnsSm"?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Number of columns to render at extra-small (optional). */ "columnsXs"?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Number of columns to offset at large (optional). */ "offsetLeftLg"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset left at medium (optional). */ "offsetLeftMd"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset left at small (optional). */ "offsetLeftSm"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset left at extra-small (optional). */ "offsetLeftXs"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset left and right at large (optional). */ "offsetLg"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset left and right at medium (optional). */ "offsetMd"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset right (optional). */ "offsetRight"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset right at large (optional). */ "offsetRightLg"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset right at medium (optional). */ "offsetRightMd"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset right at small (optional). */ "offsetRightSm"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset at extra-small (optional). */ "offsetRightXs"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset left and right at small (optional). */ "offsetSm"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset left and right at extra-small (optional). */ "offsetXs"?: 0 | 1 | 2 | 3 | 4 | 5; } interface Ku4Label { /** * The value of the id attribute of the input that this is the label for. */ "for": string; /** * Optional Label value. This value is driven by the input placeholder attribute by default. */ "value": string; } interface Ku4Mask { /** * A regex of characters to ban from entry. A user will not be able to input any character in this set of characters. E.g. ban="[()-]" will not allow a user to input (, ), or - into the target input. */ "ban": string; /** * Mask Character */ "char": string; /** * Mask for input having id of value */ "for": string; /** * Hide mask */ "hidden": boolean; /** * A test pattern for the mask to allow or disallow characters at targeted points in the input. The pattern is a character separated value of regular expressions where the first character denotes the character separator at each subsequent value is a regular expression for the character at that indicated index. E.g. `pattern=",[345],,,[^abc]"` would mean that "," is the separator and that the first character must be a 3, 4, or 5, and the fourth character cannot be an a, b or c. */ "pattern": string; /** * Mask template */ "template": string; } interface Ku4Modal { /** * Dismiss modal */ "dismiss": () => Promise; /** * DEPRECATED - Misspelled use `dismissible` Will not dismiss by clicking and touching outside when false; */ "dismissable": boolean; /** * Will not dismiss by clicking and touching outside when false; */ "dismissible": boolean; /** * Display modal */ "display": () => Promise; /** * An optional querySelector of an associated ku4-focus-trap that should be activated when this ku4-modal is display and deactivated when this ku4-modal is didDismiss. */ "focusTrap": string; /** * Visible when true */ "visible": boolean; } interface Ku4Panel { /** * Close panel */ "close": () => Promise; /** * Set true to display panel */ "open": boolean; /** * Toggle panel state */ "toggle": () => Promise; } interface Ku4Preview { /** * Alt text */ "alt": string; /** * An alternate fallback src for when src does not load. Useful when this component is used e.g. as a profile image */ "altSrc": string; /** * Force a 'portrait' or 'landscape' capture orientation. This is unlikely necessary, but useful for those who want to implement specific custom capture orientation logic. (optional) */ "capture": 'portrait' | 'landscape'; /** * Preview for input having id of value */ "for": string; /** * EXIF orientation. This will override any set capture value. (optional) */ "orientation": 1 | 6 | 8; /** * Read data out of this preview */ "read": () => Promise; /** * Maximum display x resolution (optional). This will have no effect on the uploaded file only on preview display. It can be very useful to set maximum display resolutions to significantly increase load times for large files. */ "resolutionX": number; /** * Maximum display y resolution (optional). This will have no effect on the uploaded file only on preview display. It can be very useful to set maximum display resolutions to significantly increase load times for large files. */ "resolutionY": number; /** * The default image src */ "src": string; /** * Indicates load status of target asset (readonly) */ "status": 'loading' | 'loaded' | 'error'; } interface Ku4Tab { /** * Connect this tab to a panel * @param panel - The target ku4-tab-panel HTMLElement */ "connect": (panel: any) => Promise; /** * Unset this tab as selected */ "deselect": () => Promise; /** * Set this tab as selected. */ "select": () => Promise; /** * Active when true */ "selected": boolean; } interface Ku4TabList { /** * Open a ku4-tab in this ku4-tab-list. * @param tab - ku4-tab target to open. */ "open": (tab: any) => Promise; } interface Ku4TabPanel { /** * Connect this panel to a tab. * @param tab - Tab to connect to this panel */ "connect": (tab: any) => Promise; /** * Unset this panel as selected. */ "deselect": () => Promise; /** * Set this panel as selected. */ "select": () => Promise; /** * Set true to display panel */ "selected": boolean; } interface Ku4Table { /** * The member to stack on at small views. */ "stackSm": 'column' | 'row' | ''; /** * The member to stack on at extra-small views. */ "stackXs": 'column' | 'row' | ''; } interface Ku4Tooltip { /** * Pin tooltip to bottom of target element */ "bottom": boolean; /** * Prevents tooltip show/hide behavior. Instead, tooltip will always show. This is useful for custom style development and debugging. */ "debug": boolean; /** * Query selector of element(s) to tie to this tooltip. */ "element": string; /** * Hide tool tip. */ "hide": () => Promise; /** * Pin tooltip to left of target element */ "left": boolean; /** * Pin tooltip to right of target element */ "right": boolean; /** * Show tooltip on target element. * @param element - Element to show tooltip on */ "show": (element: any) => Promise; /** * Pin tooltip to top of target element */ "top": boolean; } interface Ku4Validation { /** * Boolean value describing is the target field should be checked or unchecked */ "checked": boolean; /** * Disables validation when true causing validation to always be valid. */ "disabled": boolean; /** * querySelector for an element whose value this value should match. This is excellent for creating confirmation type validations, e.g. email confirmations or password confirmations. See the Preview in the ku4-form Docs and "Show code" for some examples of using this attribute. */ "element": string; /** * Any RegExp flags that you want to include in your pattern. Multiple patterns can be passed delimited by a `space` character. e.g. using the pattern1 pattern2 pattern3 example from the `pattern` property, you could pass "gimsuy gim gi". If you wanted to pass flags only for patterns 1 and 3 you will just skip flags for pattern2 by typing nothing and instead typing another "space" e.g. "gimsuy gi". If you wanted to skip flags for pattern1 you could start flags with a "space" e.g. " gim gi". */ "flags": string; /** * The value of the id attribute of the field that this is the validation for. A comma delimited list of id attribute values can also be passed for fields that should be validated together. */ "for": string; /** * Visibly hides the validation. Useful when wanting to support 503 WCAG validation while allowing different visual decisions. */ "hidden": boolean; /** * Set to true to display as invalid */ "invalid": boolean; /** * A reference to a named function or a function body that define a validation criteria and return `true` when the defined validation criteria are satisfied. The function will be called with two arguments: `value`, `values`, that will contain the current "value" of the target field, and the current "values" of the entire form as an object whose keys are the names of each fields and whose values are the value of each of these fields having name "key". Example (html): method="return value === 'valid' && values.key === 'valid'", or function validate(value, values) { return value === 'valid' && values.key === 'valid'; } method="validate(value, values)". Example (Vue3): .method="validate" */ "method": string; /** * Validation RegExp pattern that the target field must match to be considered valid. Multiple patterns can be passed delimited by a `space` character. e.g. pattern1 pattern2 pattern3 etc. If your target field is optional you can accomplish this with your pattern using "(^$)|(YOUR-PATTERN)". This says that the field must be empty (^$) OR (YOUR-PATTERN). */ "pattern": string; /** * Call to explicitly validate this validation. This method is called internally on change and blur of the input internally. There is no default need to call this method. */ "validate": () => Promise; /** * Comma delimited string of valid values. This attribute is great if your validation rules require some very specific set of valid values. An example may be if you have a select field where you would like to show all possible values but some you still want to be invalid. */ "values": string; } } export interface Ku4CarouselCustomEvent extends CustomEvent { detail: T; target: HTMLKu4CarouselElement; } export interface Ku4FormCustomEvent extends CustomEvent { detail: T; target: HTMLKu4FormElement; } export interface Ku4ModalCustomEvent extends CustomEvent { detail: T; target: HTMLKu4ModalElement; } export interface Ku4TabCustomEvent extends CustomEvent { detail: T; target: HTMLKu4TabElement; } export interface Ku4ValidationCustomEvent extends CustomEvent { detail: T; target: HTMLKu4ValidationElement; } declare global { interface HTMLKu4CarouselElement extends Components.Ku4Carousel, HTMLStencilElement { } var HTMLKu4CarouselElement: { prototype: HTMLKu4CarouselElement; new (): HTMLKu4CarouselElement; }; interface HTMLKu4CarouselControlsElement extends Components.Ku4CarouselControls, HTMLStencilElement { } var HTMLKu4CarouselControlsElement: { prototype: HTMLKu4CarouselControlsElement; new (): HTMLKu4CarouselControlsElement; }; interface HTMLKu4CarouselSlideElement extends Components.Ku4CarouselSlide, HTMLStencilElement { } var HTMLKu4CarouselSlideElement: { prototype: HTMLKu4CarouselSlideElement; new (): HTMLKu4CarouselSlideElement; }; interface HTMLKu4ColElement extends Components.Ku4Col, HTMLStencilElement { } var HTMLKu4ColElement: { prototype: HTMLKu4ColElement; new (): HTMLKu4ColElement; }; interface HTMLKu4DrawerElement extends Components.Ku4Drawer, HTMLStencilElement { } var HTMLKu4DrawerElement: { prototype: HTMLKu4DrawerElement; new (): HTMLKu4DrawerElement; }; interface HTMLKu4FeatureElement extends Components.Ku4Feature, HTMLStencilElement { } var HTMLKu4FeatureElement: { prototype: HTMLKu4FeatureElement; new (): HTMLKu4FeatureElement; }; interface HTMLKu4FocusTrapElement extends Components.Ku4FocusTrap, HTMLStencilElement { } var HTMLKu4FocusTrapElement: { prototype: HTMLKu4FocusTrapElement; new (): HTMLKu4FocusTrapElement; }; interface HTMLKu4FormElement extends Components.Ku4Form, HTMLStencilElement { } var HTMLKu4FormElement: { prototype: HTMLKu4FormElement; new (): HTMLKu4FormElement; }; interface HTMLKu4GridElement extends Components.Ku4Grid, HTMLStencilElement { } var HTMLKu4GridElement: { prototype: HTMLKu4GridElement; new (): HTMLKu4GridElement; }; interface HTMLKu4LabelElement extends Components.Ku4Label, HTMLStencilElement { } var HTMLKu4LabelElement: { prototype: HTMLKu4LabelElement; new (): HTMLKu4LabelElement; }; interface HTMLKu4MaskElement extends Components.Ku4Mask, HTMLStencilElement { } var HTMLKu4MaskElement: { prototype: HTMLKu4MaskElement; new (): HTMLKu4MaskElement; }; interface HTMLKu4ModalElement extends Components.Ku4Modal, HTMLStencilElement { } var HTMLKu4ModalElement: { prototype: HTMLKu4ModalElement; new (): HTMLKu4ModalElement; }; interface HTMLKu4PanelElement extends Components.Ku4Panel, HTMLStencilElement { } var HTMLKu4PanelElement: { prototype: HTMLKu4PanelElement; new (): HTMLKu4PanelElement; }; interface HTMLKu4PreviewElement extends Components.Ku4Preview, HTMLStencilElement { } var HTMLKu4PreviewElement: { prototype: HTMLKu4PreviewElement; new (): HTMLKu4PreviewElement; }; interface HTMLKu4TabElement extends Components.Ku4Tab, HTMLStencilElement { } var HTMLKu4TabElement: { prototype: HTMLKu4TabElement; new (): HTMLKu4TabElement; }; interface HTMLKu4TabListElement extends Components.Ku4TabList, HTMLStencilElement { } var HTMLKu4TabListElement: { prototype: HTMLKu4TabListElement; new (): HTMLKu4TabListElement; }; interface HTMLKu4TabPanelElement extends Components.Ku4TabPanel, HTMLStencilElement { } var HTMLKu4TabPanelElement: { prototype: HTMLKu4TabPanelElement; new (): HTMLKu4TabPanelElement; }; interface HTMLKu4TableElement extends Components.Ku4Table, HTMLStencilElement { } var HTMLKu4TableElement: { prototype: HTMLKu4TableElement; new (): HTMLKu4TableElement; }; interface HTMLKu4TooltipElement extends Components.Ku4Tooltip, HTMLStencilElement { } var HTMLKu4TooltipElement: { prototype: HTMLKu4TooltipElement; new (): HTMLKu4TooltipElement; }; interface HTMLKu4ValidationElement extends Components.Ku4Validation, HTMLStencilElement { } var HTMLKu4ValidationElement: { prototype: HTMLKu4ValidationElement; new (): HTMLKu4ValidationElement; }; interface HTMLElementTagNameMap { "ku4-carousel": HTMLKu4CarouselElement; "ku4-carousel-controls": HTMLKu4CarouselControlsElement; "ku4-carousel-slide": HTMLKu4CarouselSlideElement; "ku4-col": HTMLKu4ColElement; "ku4-drawer": HTMLKu4DrawerElement; "ku4-feature": HTMLKu4FeatureElement; "ku4-focus-trap": HTMLKu4FocusTrapElement; "ku4-form": HTMLKu4FormElement; "ku4-grid": HTMLKu4GridElement; "ku4-label": HTMLKu4LabelElement; "ku4-mask": HTMLKu4MaskElement; "ku4-modal": HTMLKu4ModalElement; "ku4-panel": HTMLKu4PanelElement; "ku4-preview": HTMLKu4PreviewElement; "ku4-tab": HTMLKu4TabElement; "ku4-tab-list": HTMLKu4TabListElement; "ku4-tab-panel": HTMLKu4TabPanelElement; "ku4-table": HTMLKu4TableElement; "ku4-tooltip": HTMLKu4TooltipElement; "ku4-validation": HTMLKu4ValidationElement; } } declare namespace LocalJSX { interface Ku4Carousel { /** * Will start this carousel in auto scroll mode */ "auto"?: boolean; /** * Delay in millisecond between slide changes when running in auto */ "delay"?: number; /** * Prevents touch swiping */ "noSwipe"?: boolean; /** * Event fired when slide changes */ "onSlide"?: (event: Ku4CarouselCustomEvent) => void; /** * Sets the distance, in pixels, a touch must travel before activating a swipe. */ "swipeTolerance"?: number; } interface Ku4CarouselControls { /** * Controls for carousel having id of value */ "for"?: string; } interface Ku4CarouselSlide { /** * Name of slide. The value of this property can be used as the value of the "slide" attribute of a ku4-carousel-control to target this slide as the active slide for the target ku4-carousel-control */ "name"?: any; } interface Ku4Col { /** * Order of column at large (optional). */ "orderLg"?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Order of column at medium (optional). */ "orderMd"?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Order of column at small (optional). */ "orderSm"?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Order of column at extra-small (optional). */ "orderXs"?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Number of columns to span left and right at large (optional). */ "spanLg"?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Number of columns to span left and right at medium (optional). */ "spanMd"?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Number of columns to span left and right at extra-small (optional). */ "spanSm"?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Number of columns to span left and right at extra-small (optional). */ "spanXs"?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Start position of column at large (optional). */ "startLg"?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Start position of column at medium (optional). */ "startMd"?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Start position of column at small (optional). */ "startSm"?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Start position of column at extra-small (optional). */ "startXs"?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; } interface Ku4Drawer { /** * Pin drawer to bottom */ "bottom"?: boolean; /** * Pin drawer to left */ "left"?: boolean; /** * Display drawer */ "open"?: boolean; /** * Pin drawer to right */ "right"?: boolean; /** * Open size of this drawer (any valid CSS width or height value) */ "size"?: string; /** * Pin drawer to top */ "top"?: boolean; } interface Ku4Feature { /** * Will display when true. This takes precedence over any passed policy. (optional) */ "on"?: boolean; /** * A function or method that returns a boolean. A return value of true will turn on the this feature. (optional) */ "policy"?: string; } interface Ku4FocusTrap { /** * Focus trap will be active when true. */ "active"?: boolean; /** * A querySelector of elements to explicitly exclude. This can be useful for greedy accessibility apis and screen reader fallover. Pass a comma delimited string of multiple selectors to target multiple exclusions. */ "exclude"?: string; /** * A querySelector of shadow elements to explicitly exclude. This can be useful for greedy accessibility apis and screen reader fallover. Pass a comma delimited string of multiple selectors to target multiple exclusions. Pass selectors that starts with the target components host lightDom element E.g. `'ku4-carousel .next, ku4-carousel .prev'` will explicitly exclude the target ku4-carousel next and previous buttons from being navigable by greedy accessibility tools, i.e. VoiceOver. */ "excludeShadow"?: string; /** * A querySelector of elements to include in the trap that are not children of this focus trap. This can be useful for specific situations such as modal overlays. */ "include"?: string; /** * A querySelector of element to initially focus */ "initial"?: string; /** * A querySelector of element to return focus to */ "return"?: string; } interface Ku4Form { /** * Set to true to display as invalid */ "invalid"?: boolean; /** * Event fired when this form validates. */ "onValidate"?: (event: Ku4FormCustomEvent) => void; "valid"?: boolean; } interface Ku4Grid { /** * Number of columns to render at large (optional). */ "columnsLg"?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Number of columns to render at medium (optional). */ "columnsMd"?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Number of columns to render at small (optional). */ "columnsSm"?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Number of columns to render at extra-small (optional). */ "columnsXs"?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16; /** * Number of columns to offset at large (optional). */ "offsetLeftLg"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset left at medium (optional). */ "offsetLeftMd"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset left at small (optional). */ "offsetLeftSm"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset left at extra-small (optional). */ "offsetLeftXs"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset left and right at large (optional). */ "offsetLg"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset left and right at medium (optional). */ "offsetMd"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset right (optional). */ "offsetRight"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset right at large (optional). */ "offsetRightLg"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset right at medium (optional). */ "offsetRightMd"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset right at small (optional). */ "offsetRightSm"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset at extra-small (optional). */ "offsetRightXs"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset left and right at small (optional). */ "offsetSm"?: 0 | 1 | 2 | 3 | 4 | 5; /** * Number of columns to offset left and right at extra-small (optional). */ "offsetXs"?: 0 | 1 | 2 | 3 | 4 | 5; } interface Ku4Label { /** * The value of the id attribute of the input that this is the label for. */ "for"?: string; /** * Optional Label value. This value is driven by the input placeholder attribute by default. */ "value"?: string; } interface Ku4Mask { /** * A regex of characters to ban from entry. A user will not be able to input any character in this set of characters. E.g. ban="[()-]" will not allow a user to input (, ), or - into the target input. */ "ban"?: string; /** * Mask Character */ "char"?: string; /** * Mask for input having id of value */ "for"?: string; /** * Hide mask */ "hidden"?: boolean; /** * A test pattern for the mask to allow or disallow characters at targeted points in the input. The pattern is a character separated value of regular expressions where the first character denotes the character separator at each subsequent value is a regular expression for the character at that indicated index. E.g. `pattern=",[345],,,[^abc]"` would mean that "," is the separator and that the first character must be a 3, 4, or 5, and the fourth character cannot be an a, b or c. */ "pattern"?: string; /** * Mask template */ "template"?: string; } interface Ku4Modal { /** * DEPRECATED - Misspelled use `dismissible` Will not dismiss by clicking and touching outside when false; */ "dismissable"?: boolean; /** * Will not dismiss by clicking and touching outside when false; */ "dismissible"?: boolean; /** * An optional querySelector of an associated ku4-focus-trap that should be activated when this ku4-modal is display and deactivated when this ku4-modal is didDismiss. */ "focusTrap"?: string; /** * Event fired when modal is dismissed */ "onDismiss"?: (event: Ku4ModalCustomEvent) => void; /** * Event fired when modal is displayed */ "onDisplay"?: (event: Ku4ModalCustomEvent) => void; /** * Visible when true */ "visible"?: boolean; } interface Ku4Panel { /** * Set true to display panel */ "open"?: boolean; } interface Ku4Preview { /** * Alt text */ "alt"?: string; /** * An alternate fallback src for when src does not load. Useful when this component is used e.g. as a profile image */ "altSrc"?: string; /** * Force a 'portrait' or 'landscape' capture orientation. This is unlikely necessary, but useful for those who want to implement specific custom capture orientation logic. (optional) */ "capture"?: 'portrait' | 'landscape'; /** * Preview for input having id of value */ "for"?: string; /** * EXIF orientation. This will override any set capture value. (optional) */ "orientation"?: 1 | 6 | 8; /** * Maximum display x resolution (optional). This will have no effect on the uploaded file only on preview display. It can be very useful to set maximum display resolutions to significantly increase load times for large files. */ "resolutionX"?: number; /** * Maximum display y resolution (optional). This will have no effect on the uploaded file only on preview display. It can be very useful to set maximum display resolutions to significantly increase load times for large files. */ "resolutionY"?: number; /** * The default image src */ "src"?: string; /** * Indicates load status of target asset (readonly) */ "status"?: 'loading' | 'loaded' | 'error'; } interface Ku4Tab { /** * Event fired when this tab is clicked. */ "onKu4TabClick"?: (event: Ku4TabCustomEvent) => void; /** * Event fired when this tab is keyup. */ "onKu4TabKeyup"?: (event: Ku4TabCustomEvent) => void; /** * Active when true */ "selected"?: boolean; } interface Ku4TabList { } interface Ku4TabPanel { /** * Set true to display panel */ "selected"?: boolean; } interface Ku4Table { /** * The member to stack on at small views. */ "stackSm"?: 'column' | 'row' | ''; /** * The member to stack on at extra-small views. */ "stackXs"?: 'column' | 'row' | ''; } interface Ku4Tooltip { /** * Pin tooltip to bottom of target element */ "bottom"?: boolean; /** * Prevents tooltip show/hide behavior. Instead, tooltip will always show. This is useful for custom style development and debugging. */ "debug"?: boolean; /** * Query selector of element(s) to tie to this tooltip. */ "element"?: string; /** * Pin tooltip to left of target element */ "left"?: boolean; /** * Pin tooltip to right of target element */ "right"?: boolean; /** * Pin tooltip to top of target element */ "top"?: boolean; } interface Ku4Validation { /** * Boolean value describing is the target field should be checked or unchecked */ "checked"?: boolean; /** * Disables validation when true causing validation to always be valid. */ "disabled"?: boolean; /** * querySelector for an element whose value this value should match. This is excellent for creating confirmation type validations, e.g. email confirmations or password confirmations. See the Preview in the ku4-form Docs and "Show code" for some examples of using this attribute. */ "element"?: string; /** * Any RegExp flags that you want to include in your pattern. Multiple patterns can be passed delimited by a `space` character. e.g. using the pattern1 pattern2 pattern3 example from the `pattern` property, you could pass "gimsuy gim gi". If you wanted to pass flags only for patterns 1 and 3 you will just skip flags for pattern2 by typing nothing and instead typing another "space" e.g. "gimsuy gi". If you wanted to skip flags for pattern1 you could start flags with a "space" e.g. " gim gi". */ "flags"?: string; /** * The value of the id attribute of the field that this is the validation for. A comma delimited list of id attribute values can also be passed for fields that should be validated together. */ "for"?: string; /** * Visibly hides the validation. Useful when wanting to support 503 WCAG validation while allowing different visual decisions. */ "hidden"?: boolean; /** * Set to true to display as invalid */ "invalid"?: boolean; /** * A reference to a named function or a function body that define a validation criteria and return `true` when the defined validation criteria are satisfied. The function will be called with two arguments: `value`, `values`, that will contain the current "value" of the target field, and the current "values" of the entire form as an object whose keys are the names of each fields and whose values are the value of each of these fields having name "key". Example (html): method="return value === 'valid' && values.key === 'valid'", or function validate(value, values) { return value === 'valid' && values.key === 'valid'; } method="validate(value, values)". Example (Vue3): .method="validate" */ "method"?: string; /** * Event fired when this validation changes from invalid to valid. */ "onValidate"?: (event: Ku4ValidationCustomEvent) => void; /** * Validation RegExp pattern that the target field must match to be considered valid. Multiple patterns can be passed delimited by a `space` character. e.g. pattern1 pattern2 pattern3 etc. If your target field is optional you can accomplish this with your pattern using "(^$)|(YOUR-PATTERN)". This says that the field must be empty (^$) OR (YOUR-PATTERN). */ "pattern"?: string; /** * Comma delimited string of valid values. This attribute is great if your validation rules require some very specific set of valid values. An example may be if you have a select field where you would like to show all possible values but some you still want to be invalid. */ "values"?: string; } interface IntrinsicElements { "ku4-carousel": Ku4Carousel; "ku4-carousel-controls": Ku4CarouselControls; "ku4-carousel-slide": Ku4CarouselSlide; "ku4-col": Ku4Col; "ku4-drawer": Ku4Drawer; "ku4-feature": Ku4Feature; "ku4-focus-trap": Ku4FocusTrap; "ku4-form": Ku4Form; "ku4-grid": Ku4Grid; "ku4-label": Ku4Label; "ku4-mask": Ku4Mask; "ku4-modal": Ku4Modal; "ku4-panel": Ku4Panel; "ku4-preview": Ku4Preview; "ku4-tab": Ku4Tab; "ku4-tab-list": Ku4TabList; "ku4-tab-panel": Ku4TabPanel; "ku4-table": Ku4Table; "ku4-tooltip": Ku4Tooltip; "ku4-validation": Ku4Validation; } } export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { "ku4-carousel": LocalJSX.Ku4Carousel & JSXBase.HTMLAttributes; "ku4-carousel-controls": LocalJSX.Ku4CarouselControls & JSXBase.HTMLAttributes; "ku4-carousel-slide": LocalJSX.Ku4CarouselSlide & JSXBase.HTMLAttributes; "ku4-col": LocalJSX.Ku4Col & JSXBase.HTMLAttributes; "ku4-drawer": LocalJSX.Ku4Drawer & JSXBase.HTMLAttributes; "ku4-feature": LocalJSX.Ku4Feature & JSXBase.HTMLAttributes; "ku4-focus-trap": LocalJSX.Ku4FocusTrap & JSXBase.HTMLAttributes; "ku4-form": LocalJSX.Ku4Form & JSXBase.HTMLAttributes; "ku4-grid": LocalJSX.Ku4Grid & JSXBase.HTMLAttributes; "ku4-label": LocalJSX.Ku4Label & JSXBase.HTMLAttributes; "ku4-mask": LocalJSX.Ku4Mask & JSXBase.HTMLAttributes; "ku4-modal": LocalJSX.Ku4Modal & JSXBase.HTMLAttributes; "ku4-panel": LocalJSX.Ku4Panel & JSXBase.HTMLAttributes; "ku4-preview": LocalJSX.Ku4Preview & JSXBase.HTMLAttributes; "ku4-tab": LocalJSX.Ku4Tab & JSXBase.HTMLAttributes; "ku4-tab-list": LocalJSX.Ku4TabList & JSXBase.HTMLAttributes; "ku4-tab-panel": LocalJSX.Ku4TabPanel & JSXBase.HTMLAttributes; "ku4-table": LocalJSX.Ku4Table & JSXBase.HTMLAttributes; "ku4-tooltip": LocalJSX.Ku4Tooltip & JSXBase.HTMLAttributes; "ku4-validation": LocalJSX.Ku4Validation & JSXBase.HTMLAttributes; } } }