@usecapsule/core-components 1.0.0

package/dist/types/components.d.ts

@@ -0,0 +1,1094 @@
+/* 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 { AutocompleteTypes, IconType, TextFieldTypes } from "./interface";
+import { CodeChangeEventDetail } from "./components/cpsl-code-input/code-change-interface";
+import { InputChangeEventDetail, InputInputEventDetail } from "./components/cpsl-input/input-interface";
+import { TabClickEventDetail } from "./components/cpsl-tab/tab-interface";
+import { TabsChangedEventDetail } from "./components/cpsl-tabs/tabs-interface";
+export { AutocompleteTypes, IconType, TextFieldTypes } from "./interface";
+export { CodeChangeEventDetail } from "./components/cpsl-code-input/code-change-interface";
+export { InputChangeEventDetail, InputInputEventDetail } from "./components/cpsl-input/input-interface";
+export { TabClickEventDetail } from "./components/cpsl-tab/tab-interface";
+export { TabsChangedEventDetail } from "./components/cpsl-tabs/tabs-interface";
+export namespace Components {
+    interface CpslAlert {
+        /**
+          * The name of the icon to show.
+         */
+        "icon"?: IconType;
+        /**
+          * The type of alert. Options are: `"error"` Default is: `"error"`.
+         */
+        "type"?: 'error';
+    }
+    interface CpslButton {
+        /**
+          * If the button is disabled. Default is: false.
+         */
+        "disabled"?: boolean;
+        /**
+          * The variant of button. Options are: `"primary"`, `"secondary", `"icon". Default is: `"primary"`.
+         */
+        "variant"?: 'primary' | 'secondary' | 'icon';
+    }
+    interface CpslCodeInput {
+        /**
+          * Value of the code.
+         */
+        "code": string;
+        /**
+          * Error text to show below the input. If this is provided the input will enter an error state.
+         */
+        "errorText"?: string;
+        /**
+          * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+         */
+        "helperText"?: string;
+        /**
+          * Length of the code.
+         */
+        "length": number;
+        /**
+          * Type of characters to accept in the code. Defaults to number.
+         */
+        "type"?: 'number' | 'string';
+    }
+    interface CpslCol {
+        /**
+          * The amount to offset the column, in terms of how many columns it should shift to the end 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 end 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 end 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 end 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 end 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 end of the total available.
+         */
+        "offsetXs"?: string;
+        /**
+          * The amount to pull the column, in terms of how many columns it should shift to the start 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 start 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 start 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 start 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 start 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 start of the total available.
+         */
+        "pullXs"?: string;
+        /**
+          * The amount to push the column, in terms of how many columns it should shift to the end 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 end 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 end 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 end 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 end 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 end 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 CpslDivider {
+    }
+    interface CpslGrid {
+        /**
+          * If `true`, the grid will have a fixed width based on the screen size.
+         */
+        "fixed": boolean;
+    }
+    interface CpslIcon {
+        /**
+          * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
+         */
+        "icon"?: IconType;
+        /**
+          * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.
+         */
+        "src"?: string;
+    }
+    interface CpslInfoBox {
+    }
+    interface CpslInput {
+        /**
+          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        "autocapitalize": string;
+        /**
+          * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        "autocomplete": AutocompleteTypes;
+        /**
+          * Whether auto correction should be enabled when the user is entering/editing the text value.
+         */
+        "autocorrect": 'on' | 'off';
+        /**
+          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load.
+         */
+        "autofocus": boolean;
+        /**
+          * If `true`, the user cannot interact with the input.
+         */
+        "disabled": boolean;
+        /**
+          * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
+         */
+        "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        /**
+          * Error text to show below the input. If this is provided the input will enter an error state.
+         */
+        "errorText"?: string;
+        /**
+          * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+         */
+        "helperText"?: string;
+        /**
+          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
+         */
+        "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * The label for the input.
+         */
+        "label"?: string;
+        /**
+          * The maximum value, which must not be less than its minimum (min attribute) value.
+         */
+        "max"?: string | number;
+        /**
+          * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.
+         */
+        "maxlength"?: number;
+        /**
+          * The minimum value, which must not be greater than its maximum (max attribute) value.
+         */
+        "min"?: string | number;
+        /**
+          * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.
+         */
+        "minlength"?: number;
+        /**
+          * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored.
+         */
+        "multiple"?: boolean;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name": string;
+        /**
+          * Whether to disable auto disabling of the slotted components.
+         */
+        "noAutoDisable": boolean;
+        /**
+          * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, or `"password"`, otherwise it is ignored. When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.
+         */
+        "pattern"?: string;
+        /**
+          * Instructional text that shows before the input has a value. This property applies only when the `type` property is set to `"email"`, `"number"`, `"password"`, `"search"`, `"tel"`, `"text"`, or `"url"`, otherwise it is ignored.
+         */
+        "placeholder"?: string;
+        /**
+          * If `true`, the user cannot modify the value.
+         */
+        "readonly": boolean;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required": boolean;
+        /**
+          * If `true`, the element will have its spelling and grammar checked.
+         */
+        "spellcheck": boolean;
+        /**
+          * The name of the icon at the start of the input. If both `startIcon` and `startIconSrc` are provided, `startIcon` will be used.
+         */
+        "startIcon"?: IconType;
+        /**
+          * The external source of the icon at the start of the input. If both `startIcon` and `startIconSrc` are provided, `startIcon` will be used.
+         */
+        "startIconSrc"?: string;
+        /**
+          * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.
+         */
+        "step"?: string;
+        /**
+          * The type of control to display. The default type is `text`.
+         */
+        "type": TextFieldTypes;
+        /**
+          * The value of the controlled input.
+         */
+        "value"?: string;
+    }
+    interface CpslModal {
+        /**
+          * Whether or not to show `footerExpandedFooter` and `footerExpandedHeader` slots.
+         */
+        "footerExpanded": boolean;
+        /**
+          * Duration in seconds of the footer expansion animation. Default is .5.
+         */
+        "transitionDuration": number;
+    }
+    interface CpslOverlay {
+        /**
+          * Whether or not to show the overlay.
+         */
+        "open": boolean;
+        /**
+          * Duration in seconds of the fade in/out animation. Default is .5.
+         */
+        "transitionDuration": number;
+    }
+    interface CpslPill {
+        /**
+          * Text of the pill.
+         */
+        "text": string;
+    }
+    interface CpslProgressIndicator {
+        /**
+          * Current zero based step.
+         */
+        "step": number;
+        /**
+          * Total number of steps.
+         */
+        "totalSteps": number;
+    }
+    interface CpslQrCode {
+        /**
+          * Source for the center image of the QR code.
+         */
+        "imageSrc"?: string;
+        /**
+          * Size of the QR code in pixels. Default is 250.
+         */
+        "size"?: number;
+        /**
+          * URL for the QR code to link to.
+         */
+        "url": string;
+    }
+    interface CpslRow {
+    }
+    interface CpslSlideButton {
+        /**
+          * The name of the ending icon to show.
+         */
+        "endIcon": IconType;
+        /**
+          * The ending text.
+         */
+        "endText": string;
+        /**
+          * The name of the starting icon to show.
+         */
+        "startIcon": IconType;
+        /**
+          * The starting text.
+         */
+        "startText": string;
+    }
+    interface CpslSpinner {
+        /**
+          * Size of the spinner in pixels. Default is 50.
+         */
+        "size"?: number;
+        /**
+          * Rotation speed of the spinner in seconds. Default is 1.
+         */
+        "speed"?: number;
+    }
+    interface CpslTab {
+        /**
+          * The selected tab component
+         */
+        "selected": boolean;
+        /**
+          * A tab id must be provided for each `cpsl-tab`. It's used internally to reference the selected tab or by the router to switch between them.
+         */
+        "tab": string;
+    }
+    interface CpslTabs {
+        /**
+          * Whether or not the tabs take the full width of their container.
+         */
+        "fullWidth"?: boolean;
+        /**
+          * The selected tab component
+         */
+        "selectedTab"?: string;
+    }
+    interface CpslText {
+    }
+    interface CpslTileButton {
+        /**
+          * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
+         */
+        "icon"?: IconType;
+        /**
+          * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.
+         */
+        "src"?: string;
+    }
+}
+export interface CpslCodeInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslCodeInputElement;
+}
+export interface CpslInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslInputElement;
+}
+export interface CpslSlideButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslSlideButtonElement;
+}
+export interface CpslTabCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslTabElement;
+}
+export interface CpslTabsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCpslTabsElement;
+}
+declare global {
+    interface HTMLCpslAlertElement extends Components.CpslAlert, HTMLStencilElement {
+    }
+    var HTMLCpslAlertElement: {
+        prototype: HTMLCpslAlertElement;
+        new (): HTMLCpslAlertElement;
+    };
+    interface HTMLCpslButtonElement extends Components.CpslButton, HTMLStencilElement {
+    }
+    var HTMLCpslButtonElement: {
+        prototype: HTMLCpslButtonElement;
+        new (): HTMLCpslButtonElement;
+    };
+    interface HTMLCpslCodeInputElementEventMap {
+        "cpslInput": CodeChangeEventDetail;
+    }
+    interface HTMLCpslCodeInputElement extends Components.CpslCodeInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslCodeInputElementEventMap>(type: K, listener: (this: HTMLCpslCodeInputElement, ev: CpslCodeInputCustomEvent<HTMLCpslCodeInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCpslCodeInputElementEventMap>(type: K, listener: (this: HTMLCpslCodeInputElement, ev: CpslCodeInputCustomEvent<HTMLCpslCodeInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLCpslCodeInputElement: {
+        prototype: HTMLCpslCodeInputElement;
+        new (): HTMLCpslCodeInputElement;
+    };
+    interface HTMLCpslColElement extends Components.CpslCol, HTMLStencilElement {
+    }
+    var HTMLCpslColElement: {
+        prototype: HTMLCpslColElement;
+        new (): HTMLCpslColElement;
+    };
+    interface HTMLCpslDividerElement extends Components.CpslDivider, HTMLStencilElement {
+    }
+    var HTMLCpslDividerElement: {
+        prototype: HTMLCpslDividerElement;
+        new (): HTMLCpslDividerElement;
+    };
+    interface HTMLCpslGridElement extends Components.CpslGrid, HTMLStencilElement {
+    }
+    var HTMLCpslGridElement: {
+        prototype: HTMLCpslGridElement;
+        new (): HTMLCpslGridElement;
+    };
+    interface HTMLCpslIconElement extends Components.CpslIcon, HTMLStencilElement {
+    }
+    var HTMLCpslIconElement: {
+        prototype: HTMLCpslIconElement;
+        new (): HTMLCpslIconElement;
+    };
+    interface HTMLCpslInfoBoxElement extends Components.CpslInfoBox, HTMLStencilElement {
+    }
+    var HTMLCpslInfoBoxElement: {
+        prototype: HTMLCpslInfoBoxElement;
+        new (): HTMLCpslInfoBoxElement;
+    };
+    interface HTMLCpslInputElementEventMap {
+        "cpslInput": InputInputEventDetail;
+        "cpslChange": InputChangeEventDetail;
+        "cpslBlur": FocusEvent;
+        "cpslFocus": FocusEvent;
+    }
+    interface HTMLCpslInputElement extends Components.CpslInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslInputElementEventMap>(type: K, listener: (this: HTMLCpslInputElement, ev: CpslInputCustomEvent<HTMLCpslInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCpslInputElementEventMap>(type: K, listener: (this: HTMLCpslInputElement, ev: CpslInputCustomEvent<HTMLCpslInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLCpslInputElement: {
+        prototype: HTMLCpslInputElement;
+        new (): HTMLCpslInputElement;
+    };
+    interface HTMLCpslModalElement extends Components.CpslModal, HTMLStencilElement {
+    }
+    var HTMLCpslModalElement: {
+        prototype: HTMLCpslModalElement;
+        new (): HTMLCpslModalElement;
+    };
+    interface HTMLCpslOverlayElement extends Components.CpslOverlay, HTMLStencilElement {
+    }
+    var HTMLCpslOverlayElement: {
+        prototype: HTMLCpslOverlayElement;
+        new (): HTMLCpslOverlayElement;
+    };
+    interface HTMLCpslPillElement extends Components.CpslPill, HTMLStencilElement {
+    }
+    var HTMLCpslPillElement: {
+        prototype: HTMLCpslPillElement;
+        new (): HTMLCpslPillElement;
+    };
+    interface HTMLCpslProgressIndicatorElement extends Components.CpslProgressIndicator, HTMLStencilElement {
+    }
+    var HTMLCpslProgressIndicatorElement: {
+        prototype: HTMLCpslProgressIndicatorElement;
+        new (): HTMLCpslProgressIndicatorElement;
+    };
+    interface HTMLCpslQrCodeElement extends Components.CpslQrCode, HTMLStencilElement {
+    }
+    var HTMLCpslQrCodeElement: {
+        prototype: HTMLCpslQrCodeElement;
+        new (): HTMLCpslQrCodeElement;
+    };
+    interface HTMLCpslRowElement extends Components.CpslRow, HTMLStencilElement {
+    }
+    var HTMLCpslRowElement: {
+        prototype: HTMLCpslRowElement;
+        new (): HTMLCpslRowElement;
+    };
+    interface HTMLCpslSlideButtonElementEventMap {
+        "cpslComplete": boolean;
+    }
+    interface HTMLCpslSlideButtonElement extends Components.CpslSlideButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslSlideButtonElementEventMap>(type: K, listener: (this: HTMLCpslSlideButtonElement, ev: CpslSlideButtonCustomEvent<HTMLCpslSlideButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCpslSlideButtonElementEventMap>(type: K, listener: (this: HTMLCpslSlideButtonElement, ev: CpslSlideButtonCustomEvent<HTMLCpslSlideButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLCpslSlideButtonElement: {
+        prototype: HTMLCpslSlideButtonElement;
+        new (): HTMLCpslSlideButtonElement;
+    };
+    interface HTMLCpslSpinnerElement extends Components.CpslSpinner, HTMLStencilElement {
+    }
+    var HTMLCpslSpinnerElement: {
+        prototype: HTMLCpslSpinnerElement;
+        new (): HTMLCpslSpinnerElement;
+    };
+    interface HTMLCpslTabElementEventMap {
+        "cpslTabButtonClick": TabClickEventDetail;
+    }
+    interface HTMLCpslTabElement extends Components.CpslTab, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslTabElementEventMap>(type: K, listener: (this: HTMLCpslTabElement, ev: CpslTabCustomEvent<HTMLCpslTabElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCpslTabElementEventMap>(type: K, listener: (this: HTMLCpslTabElement, ev: CpslTabCustomEvent<HTMLCpslTabElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLCpslTabElement: {
+        prototype: HTMLCpslTabElement;
+        new (): HTMLCpslTabElement;
+    };
+    interface HTMLCpslTabsElementEventMap {
+        "cpslTabsChanged": TabsChangedEventDetail;
+        "cpslTabsInit": TabsChangedEventDetail;
+    }
+    interface HTMLCpslTabsElement extends Components.CpslTabs, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCpslTabsElementEventMap>(type: K, listener: (this: HTMLCpslTabsElement, ev: CpslTabsCustomEvent<HTMLCpslTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCpslTabsElementEventMap>(type: K, listener: (this: HTMLCpslTabsElement, ev: CpslTabsCustomEvent<HTMLCpslTabsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLCpslTabsElement: {
+        prototype: HTMLCpslTabsElement;
+        new (): HTMLCpslTabsElement;
+    };
+    interface HTMLCpslTextElement extends Components.CpslText, HTMLStencilElement {
+    }
+    var HTMLCpslTextElement: {
+        prototype: HTMLCpslTextElement;
+        new (): HTMLCpslTextElement;
+    };
+    interface HTMLCpslTileButtonElement extends Components.CpslTileButton, HTMLStencilElement {
+    }
+    var HTMLCpslTileButtonElement: {
+        prototype: HTMLCpslTileButtonElement;
+        new (): HTMLCpslTileButtonElement;
+    };
+    interface HTMLElementTagNameMap {
+        "cpsl-alert": HTMLCpslAlertElement;
+        "cpsl-button": HTMLCpslButtonElement;
+        "cpsl-code-input": HTMLCpslCodeInputElement;
+        "cpsl-col": HTMLCpslColElement;
+        "cpsl-divider": HTMLCpslDividerElement;
+        "cpsl-grid": HTMLCpslGridElement;
+        "cpsl-icon": HTMLCpslIconElement;
+        "cpsl-info-box": HTMLCpslInfoBoxElement;
+        "cpsl-input": HTMLCpslInputElement;
+        "cpsl-modal": HTMLCpslModalElement;
+        "cpsl-overlay": HTMLCpslOverlayElement;
+        "cpsl-pill": HTMLCpslPillElement;
+        "cpsl-progress-indicator": HTMLCpslProgressIndicatorElement;
+        "cpsl-qr-code": HTMLCpslQrCodeElement;
+        "cpsl-row": HTMLCpslRowElement;
+        "cpsl-slide-button": HTMLCpslSlideButtonElement;
+        "cpsl-spinner": HTMLCpslSpinnerElement;
+        "cpsl-tab": HTMLCpslTabElement;
+        "cpsl-tabs": HTMLCpslTabsElement;
+        "cpsl-text": HTMLCpslTextElement;
+        "cpsl-tile-button": HTMLCpslTileButtonElement;
+    }
+}
+declare namespace LocalJSX {
+    interface CpslAlert {
+        /**
+          * The name of the icon to show.
+         */
+        "icon"?: IconType;
+        /**
+          * The type of alert. Options are: `"error"` Default is: `"error"`.
+         */
+        "type"?: 'error';
+    }
+    interface CpslButton {
+        /**
+          * If the button is disabled. Default is: false.
+         */
+        "disabled"?: boolean;
+        /**
+          * The variant of button. Options are: `"primary"`, `"secondary", `"icon". Default is: `"primary"`.
+         */
+        "variant"?: 'primary' | 'secondary' | 'icon';
+    }
+    interface CpslCodeInput {
+        /**
+          * Value of the code.
+         */
+        "code"?: string;
+        /**
+          * Error text to show below the input. If this is provided the input will enter an error state.
+         */
+        "errorText"?: string;
+        /**
+          * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+         */
+        "helperText"?: string;
+        /**
+          * Length of the code.
+         */
+        "length"?: number;
+        /**
+          * The `cpslInput` event is fired each time the user modifies the input's value.
+         */
+        "onCpslInput"?: (event: CpslCodeInputCustomEvent<CodeChangeEventDetail>) => void;
+        /**
+          * Type of characters to accept in the code. Defaults to number.
+         */
+        "type"?: 'number' | 'string';
+    }
+    interface CpslCol {
+        /**
+          * The amount to offset the column, in terms of how many columns it should shift to the end 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 end 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 end 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 end 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 end 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 end of the total available.
+         */
+        "offsetXs"?: string;
+        /**
+          * The amount to pull the column, in terms of how many columns it should shift to the start 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 start 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 start 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 start 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 start 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 start of the total available.
+         */
+        "pullXs"?: string;
+        /**
+          * The amount to push the column, in terms of how many columns it should shift to the end 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 end 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 end 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 end 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 end 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 end 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 CpslDivider {
+    }
+    interface CpslGrid {
+        /**
+          * If `true`, the grid will have a fixed width based on the screen size.
+         */
+        "fixed"?: boolean;
+    }
+    interface CpslIcon {
+        /**
+          * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
+         */
+        "icon"?: IconType;
+        /**
+          * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.
+         */
+        "src"?: string;
+    }
+    interface CpslInfoBox {
+    }
+    interface CpslInput {
+        /**
+          * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        "autocapitalize"?: string;
+        /**
+          * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        "autocomplete"?: AutocompleteTypes;
+        /**
+          * Whether auto correction should be enabled when the user is entering/editing the text value.
+         */
+        "autocorrect"?: 'on' | 'off';
+        /**
+          * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.  This may not be sufficient for the element to be focused on page load.
+         */
+        "autofocus"?: boolean;
+        /**
+          * If `true`, the user cannot interact with the input.
+         */
+        "disabled"?: boolean;
+        /**
+          * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
+         */
+        "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        /**
+          * Error text to show below the input. If this is provided the input will enter an error state.
+         */
+        "errorText"?: string;
+        /**
+          * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+         */
+        "helperText"?: string;
+        /**
+          * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
+         */
+        "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * The label for the input.
+         */
+        "label"?: string;
+        /**
+          * The maximum value, which must not be less than its minimum (min attribute) value.
+         */
+        "max"?: string | number;
+        /**
+          * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter.
+         */
+        "maxlength"?: number;
+        /**
+          * The minimum value, which must not be greater than its maximum (max attribute) value.
+         */
+        "min"?: string | number;
+        /**
+          * If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter.
+         */
+        "minlength"?: number;
+        /**
+          * If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"`, otherwise it is ignored.
+         */
+        "multiple"?: boolean;
+        /**
+          * The name of the control, which is submitted with the form data.
+         */
+        "name"?: string;
+        /**
+          * Whether to disable auto disabling of the slotted components.
+         */
+        "noAutoDisable"?: boolean;
+        /**
+          * Emitted when the input loses focus.
+         */
+        "onCpslBlur"?: (event: CpslInputCustomEvent<FocusEvent>) => void;
+        /**
+          * The `cpslChange` event is fired when the user modifies the input's value. Unlike the `cpslInput` event, the `cpslChange` event is only fired when changes are committed, not as the user types.  Depending on the way the users interacts with the element, the `cpslChange` event fires at a different moment: - When the element loses focus after its value has changed: for elements where the user's interaction is typing.
+         */
+        "onCpslChange"?: (event: CpslInputCustomEvent<InputChangeEventDetail>) => void;
+        /**
+          * Emitted when the input has focus.
+         */
+        "onCpslFocus"?: (event: CpslInputCustomEvent<FocusEvent>) => void;
+        /**
+          * The `cpslInput` event is fired each time the user modifies the input's value. Unlike the `cpslChange` event, the `cpslInput` event is fired for each alteration to the input's value. This typically happens for each keystroke as the user types.  For elements that accept text input (`type=text`, `type=tel`, etc.), the interface is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others, the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If the input is cleared on edit, the type is `null`.
+         */
+        "onCpslInput"?: (event: CpslInputCustomEvent<InputInputEventDetail>) => void;
+        /**
+          * A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, or `"password"`, otherwise it is ignored. When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information.
+         */
+        "pattern"?: string;
+        /**
+          * Instructional text that shows before the input has a value. This property applies only when the `type` property is set to `"email"`, `"number"`, `"password"`, `"search"`, `"tel"`, `"text"`, or `"url"`, otherwise it is ignored.
+         */
+        "placeholder"?: string;
+        /**
+          * If `true`, the user cannot modify the value.
+         */
+        "readonly"?: boolean;
+        /**
+          * If `true`, the user must fill in a value before submitting a form.
+         */
+        "required"?: boolean;
+        /**
+          * If `true`, the element will have its spelling and grammar checked.
+         */
+        "spellcheck"?: boolean;
+        /**
+          * The name of the icon at the start of the input. If both `startIcon` and `startIconSrc` are provided, `startIcon` will be used.
+         */
+        "startIcon"?: IconType;
+        /**
+          * The external source of the icon at the start of the input. If both `startIcon` and `startIconSrc` are provided, `startIcon` will be used.
+         */
+        "startIconSrc"?: string;
+        /**
+          * Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number.
+         */
+        "step"?: string;
+        /**
+          * The type of control to display. The default type is `text`.
+         */
+        "type"?: TextFieldTypes;
+        /**
+          * The value of the controlled input.
+         */
+        "value"?: string;
+    }
+    interface CpslModal {
+        /**
+          * Whether or not to show `footerExpandedFooter` and `footerExpandedHeader` slots.
+         */
+        "footerExpanded"?: boolean;
+        /**
+          * Duration in seconds of the footer expansion animation. Default is .5.
+         */
+        "transitionDuration"?: number;
+    }
+    interface CpslOverlay {
+        /**
+          * Whether or not to show the overlay.
+         */
+        "open"?: boolean;
+        /**
+          * Duration in seconds of the fade in/out animation. Default is .5.
+         */
+        "transitionDuration"?: number;
+    }
+    interface CpslPill {
+        /**
+          * Text of the pill.
+         */
+        "text"?: string;
+    }
+    interface CpslProgressIndicator {
+        /**
+          * Current zero based step.
+         */
+        "step"?: number;
+        /**
+          * Total number of steps.
+         */
+        "totalSteps"?: number;
+    }
+    interface CpslQrCode {
+        /**
+          * Source for the center image of the QR code.
+         */
+        "imageSrc"?: string;
+        /**
+          * Size of the QR code in pixels. Default is 250.
+         */
+        "size"?: number;
+        /**
+          * URL for the QR code to link to.
+         */
+        "url"?: string;
+    }
+    interface CpslRow {
+    }
+    interface CpslSlideButton {
+        /**
+          * The name of the ending icon to show.
+         */
+        "endIcon"?: IconType;
+        /**
+          * The ending text.
+         */
+        "endText"?: string;
+        /**
+          * The `cpslComplete` event is fired when the slider is at the end.
+         */
+        "onCpslComplete"?: (event: CpslSlideButtonCustomEvent<boolean>) => void;
+        /**
+          * The name of the starting icon to show.
+         */
+        "startIcon"?: IconType;
+        /**
+          * The starting text.
+         */
+        "startText"?: string;
+    }
+    interface CpslSpinner {
+        /**
+          * Size of the spinner in pixels. Default is 50.
+         */
+        "size"?: number;
+        /**
+          * Rotation speed of the spinner in seconds. Default is 1.
+         */
+        "speed"?: number;
+    }
+    interface CpslTab {
+        /**
+          * The selected tab component
+         */
+        "selected"?: boolean;
+        /**
+          * A tab id must be provided for each `cpsl-tab`. It's used internally to reference the selected tab or by the router to switch between them.
+         */
+        "tab"?: string;
+    }
+    interface CpslTabs {
+        /**
+          * Whether or not the tabs take the full width of their container.
+         */
+        "fullWidth"?: boolean;
+        /**
+          * Emitted when a tab is changed
+         */
+        "onCpslTabsChanged"?: (event: CpslTabsCustomEvent<TabsChangedEventDetail>) => void;
+        /**
+          * The selected tab component
+         */
+        "selectedTab"?: string;
+    }
+    interface CpslText {
+    }
+    interface CpslTileButton {
+        /**
+          * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
+         */
+        "icon"?: IconType;
+        /**
+          * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.
+         */
+        "src"?: string;
+    }
+    interface IntrinsicElements {
+        "cpsl-alert": CpslAlert;
+        "cpsl-button": CpslButton;
+        "cpsl-code-input": CpslCodeInput;
+        "cpsl-col": CpslCol;
+        "cpsl-divider": CpslDivider;
+        "cpsl-grid": CpslGrid;
+        "cpsl-icon": CpslIcon;
+        "cpsl-info-box": CpslInfoBox;
+        "cpsl-input": CpslInput;
+        "cpsl-modal": CpslModal;
+        "cpsl-overlay": CpslOverlay;
+        "cpsl-pill": CpslPill;
+        "cpsl-progress-indicator": CpslProgressIndicator;
+        "cpsl-qr-code": CpslQrCode;
+        "cpsl-row": CpslRow;
+        "cpsl-slide-button": CpslSlideButton;
+        "cpsl-spinner": CpslSpinner;
+        "cpsl-tab": CpslTab;
+        "cpsl-tabs": CpslTabs;
+        "cpsl-text": CpslText;
+        "cpsl-tile-button": CpslTileButton;
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "cpsl-alert": LocalJSX.CpslAlert & JSXBase.HTMLAttributes<HTMLCpslAlertElement>;
+            "cpsl-button": LocalJSX.CpslButton & JSXBase.HTMLAttributes<HTMLCpslButtonElement>;
+            "cpsl-code-input": LocalJSX.CpslCodeInput & JSXBase.HTMLAttributes<HTMLCpslCodeInputElement>;
+            "cpsl-col": LocalJSX.CpslCol & JSXBase.HTMLAttributes<HTMLCpslColElement>;
+            "cpsl-divider": LocalJSX.CpslDivider & JSXBase.HTMLAttributes<HTMLCpslDividerElement>;
+            "cpsl-grid": LocalJSX.CpslGrid & JSXBase.HTMLAttributes<HTMLCpslGridElement>;
+            "cpsl-icon": LocalJSX.CpslIcon & JSXBase.HTMLAttributes<HTMLCpslIconElement>;
+            "cpsl-info-box": LocalJSX.CpslInfoBox & JSXBase.HTMLAttributes<HTMLCpslInfoBoxElement>;
+            "cpsl-input": LocalJSX.CpslInput & JSXBase.HTMLAttributes<HTMLCpslInputElement>;
+            "cpsl-modal": LocalJSX.CpslModal & JSXBase.HTMLAttributes<HTMLCpslModalElement>;
+            "cpsl-overlay": LocalJSX.CpslOverlay & JSXBase.HTMLAttributes<HTMLCpslOverlayElement>;
+            "cpsl-pill": LocalJSX.CpslPill & JSXBase.HTMLAttributes<HTMLCpslPillElement>;
+            "cpsl-progress-indicator": LocalJSX.CpslProgressIndicator & JSXBase.HTMLAttributes<HTMLCpslProgressIndicatorElement>;
+            "cpsl-qr-code": LocalJSX.CpslQrCode & JSXBase.HTMLAttributes<HTMLCpslQrCodeElement>;
+            "cpsl-row": LocalJSX.CpslRow & JSXBase.HTMLAttributes<HTMLCpslRowElement>;
+            "cpsl-slide-button": LocalJSX.CpslSlideButton & JSXBase.HTMLAttributes<HTMLCpslSlideButtonElement>;
+            "cpsl-spinner": LocalJSX.CpslSpinner & JSXBase.HTMLAttributes<HTMLCpslSpinnerElement>;
+            "cpsl-tab": LocalJSX.CpslTab & JSXBase.HTMLAttributes<HTMLCpslTabElement>;
+            "cpsl-tabs": LocalJSX.CpslTabs & JSXBase.HTMLAttributes<HTMLCpslTabsElement>;
+            "cpsl-text": LocalJSX.CpslText & JSXBase.HTMLAttributes<HTMLCpslTextElement>;
+            "cpsl-tile-button": LocalJSX.CpslTileButton & JSXBase.HTMLAttributes<HTMLCpslTileButtonElement>;
+        }
+    }
+}