@usecapsule/core-components 3.2.0-dev.1 → 3.3.0-dev.0

package/dist/types/components/cpsl-modal-v2/cpsl-modal-v2.d.ts

@@ -1,15 +1,47 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class CpslModalV2 {
     el: HTMLCpslModalV2Element;
+    /**
+     * Duration in seconds of the modal entering.
+     * Default is .15.
+     */
     enterTransitionDuration?: number;
+    /**
+     * Duration in seconds of the modal exiting.
+     * Default is .15.
+     */
     exitTransitionDuration?: number;
+    /**
+     * Whether or not to show the modal with a box shadow.
+     */
     elevated: boolean;
+    /**
+     * Whether or not to show the overlay.
+     */
     noOverlay: boolean;
+    /**
+     * Whether or not to show the modal.
+     */
     open: boolean;
+    /**
+     * Override z-index.
+     */
     zIndexOverride?: number;
+    /**
+     * Emitted when enter animation starts.
+     */
     cpslModalEntering: EventEmitter<null>;
+    /**
+     * Emitted when enter animation finishes.
+     */
     cpslModalEntered: EventEmitter<null>;
+    /**
+     * Emitted when exit animation starts.
+     */
     cpslModalExiting: EventEmitter<null>;
+    /**
+     * Emitted when exit animation finishes.
+     */
     cpslModalExited: EventEmitter<null>;
     toggleHeight(): void;
     componentDidLoad(): void;

package/dist/types/components/cpsl-nav-button-group/cpsl-nav-button-group.d.ts

@@ -1,5 +1,8 @@
 export declare class CpslNavButtonGroup {
     el: HTMLCpslNavButtonGroupElement;
+    /**
+     * The id of the selected button.
+     */
     selectedId?: string;
     selectItem(): void;
     componentWillRender(): void;

package/dist/types/components/cpsl-overlay/cpsl-overlay.d.ts

@@ -1,8 +1,22 @@
 export declare class CpslOverlay {
     el: HTMLCpslOverlayElement;
+    /**
+     * Duration in seconds of the fade out animation.
+     * Default is .5.
+     */
     enterTransitionDuration?: number;
+    /**
+     * Duration in seconds of the fade out animation.
+     * Default is .5.
+     */
     exitTransitionDuration?: number;
+    /**
+     * Whether or not to show the overlay.
+     */
     open: boolean;
+    /**
+     * Override z-index.
+     */
     zIndexOverride?: number;
     toggleHeight(): void;
     componentDidLoad(): void;

package/dist/types/components/cpsl-pagination/cpsl-pagination.d.ts

@@ -1,9 +1,24 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class CpslPagination {
     currentPage: number;
+    /**
+     * The initial page to select.
+     * Default is 0.
+     */
     initialPage?: number;
+    /**
+     * The total number of pages.
+     */
     totalPages: number;
+    /**
+     * The number of pages visible to select.
+     * Default is 5.
+     * Min is 5.
+     */
     visiblePages?: number;
+    /**
+     * Emitted when exit animation finishes.
+     */
     cpslPaginationChanged: EventEmitter<number>;
     watchChange(): void;
     componentWillLoad(): void;

package/dist/types/components/cpsl-pill/cpsl-pill.d.ts

@@ -1,4 +1,7 @@
 export declare class CpslPill {
+    /**
+     * Text of the pill.
+     */
     text: string;
     render(): any;
 }

package/dist/types/components/cpsl-popover/cpsl-popover.d.ts

@@ -7,19 +7,72 @@ export declare class CpslPopover {
     private triggerClicked;
     positionX?: number;
     positionY?: number;
+    /**
+     * ID for the element that the popover anchors to.
+     */
     anchorEl?: HTMLElement;
+    /**
+     * Vertical anchor origin.
+     * Options are: `"left"`, `"center"`, `"right"`.
+     * Default is: `"left"`.
+     */
     anchorOriginHorizontal?: 'left' | 'center' | 'right';
+    /**
+     * Vertical anchor origin.
+     * Options are: `"top"`, `"center"`, `"bottom"`.
+     * Default is: `"bottom"`.
+     */
     anchorOriginVertical?: 'top' | 'center' | 'bottom';
+    /**
+     * If `true` the container will use the width of the content, else it will be set to the width of the trigger.
+     * Default is `true`
+     */
     autoWidth?: boolean;
+    /**
+     * Whether or not to disable to popover.
+     */
     disabled: boolean;
+    /**
+     * Used internally to prevent select from blurring unintentionally.
+     */
     preventBlur: boolean;
+    /**
+     * Vertical transformation origin.
+     * Options are: `"left"`, `"center"`, `"right"`.
+     * Default is: `"left"`.
+     */
     transformOriginHorizontal?: 'left' | 'center' | 'right';
+    /**
+     * Vertical transformation origin.
+     * Options are: `"top"`, `"center"`, `"bottom"`.
+     * Default is: `"bottom"`.
+     */
     transformOriginVertical?: 'top' | 'center' | 'bottom';
+    /**
+     * Which trigger causes the popover to open.
+     * Options are: `"click"`, `"hover"`.
+     * Default is: `"click"`.
+     */
     triggerAction: 'click' | 'hover';
+    /**
+     * ID for the element that triggers the popover to open.
+     */
     trigger: string;
+    /**
+     * Padding from edge of window for the popover container.
+     */
     windowPadding?: number;
+    /**
+     * Emitted when the popover opens.
+     */
     cpslOpen: EventEmitter<void>;
+    /**
+     * Emitted when the popover closes.
+     */
     cpslClose: EventEmitter<void>;
+    /**
+     * Call to close the popover manually.
+     */
     closePopover(): Promise<void>;
     onTriggerChange(): void;
     onAnchorChange(): void;

package/dist/types/components/cpsl-progress-indicator/cpsl-progress-indicator.d.ts

@@ -1,5 +1,11 @@
 export declare class CpslProgressIndicator {
+    /**
+     * Total number of steps.
+     */
     totalSteps: number;
+    /**
+     * Current zero based step.
+     */
     step: number;
     render(): any;
 }

package/dist/types/components/cpsl-qr-code/cpsl-qr-code.d.ts

@@ -1,8 +1,19 @@
 export declare class CpslQrCode {
     el: HTMLCpslQrCodeElement;
+    /**
+     * URL for the QR code to link to.
+     */
     url: string;
+    /**
+     * Source for the center image of the QR code.
+     */
     imageSrc?: string;
+    /**
+     * Size of the QR code in pixels.
+     * Default is 250.
+     */
     size?: number;
     componentDidLoad(): void;
+    private get imgEl();
     render(): any;
 }

package/dist/types/components/cpsl-radio/cpsl-radio.d.ts

@@ -1,6 +1,12 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class CpslRadio {
+    /**
+     * Whether or not the radio is checked.
+     */
     checked: boolean;
+    /**
+     * Emitted when the radio state changes.
+     */
     cpslRadioChanged: EventEmitter<boolean>;
     private handleRadioClick;
     render(): any;

package/dist/types/components/cpsl-select/cpsl-select.d.ts

@@ -3,25 +3,91 @@ export declare class CpslSelect {
     el: HTMLCpslSelectElement;
     private popoverEl;
     private inputId;
-    anchorEl: HTMLDivElement;
+    anchorEl: HTMLElement;
     hasFocus: boolean;
     popoverOpen: boolean;
     hasSelectedItem: boolean;
+    /**
+     * ID of element to anchor popover to.
+     */
+    anchorElId?: string;
+    /**
+     * If `true` the popover container will use the width of the content, else it will be set to the width of the trigger.
+     * Default is `false`
+     */
+    autoWidth?: boolean;
+    /**
+     * If `true`, the user cannot interact with the input.
+     */
     disabled: boolean;
+    /**
+     * Set the max height of the dropdown.
+     */
     dropdownMaxHeight?: number;
+    /**
+     * Error text to show below the input. If this is provided the input will enter an error state.
+     */
     errorText?: string;
+    /**
+     * Format value for display when selected.
+     */
     formatValue?: (value: string) => string;
+    /**
+     * Helper text to show below the input. If `"errorText"` is provided that will take precedence.
+     */
     helperText?: string;
+    /**
+     * ID of the element, must be unique for the popover trigger.
+     */
     id: string;
+    /**
+     * The label for the input.
+     */
     label?: string;
+    /**
+     * Placeholder to display if `selectedValue` is empty.
+     */
     placeholder?: string;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
     required: boolean;
+    /**
+     * Value of the selected item.
+     */
     selectedValue?: string;
+    /**
+     * Will show the formatted selected item (passed in the `selected-item` slot) in the select rather than the item value.
+     */
     showFormattedSelectedItem?: boolean;
+    /**
+     * If `true`, the label will display an "optional" tag.
+     */
     showOptionalLabel: boolean;
+    /**
+     * If `true`, the dropdown will contain a search field.
+     */
+    showSearch: boolean;
+    /**
+     * Placeholder for the search field.
+     */
+    searchPlaceholder?: string;
+    /**
+     * Emitted when the input loses focus.
+     */
     cpslBlur: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when the input has focus.
+     */
     cpslFocus: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when the value changes.
+     */
     cpslSelectValueChange: EventEmitter<string>;
+    /**
+     * Emitted when the search value changes.
+     */
+    cpslSearchChange: EventEmitter<string>;
     onValueChange(): void;
     handleValueChange(): void;
     selectItemClickHandler(event: CustomEvent<string>): void;

package/dist/types/components/cpsl-select-item/cpsl-select-item.d.ts

@@ -1,7 +1,17 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class CpslSelectItem {
+    /**
+     * Whether the item is selected or not.
+     */
     selected?: boolean;
+    /**
+     * Value of the item.
+     */
     value: string;
+    /**
+     * Called when item is clicked.
+     * @internal
+     */
     cpslSelectItemClick: EventEmitter<string>;
     private handleItemClick;
     render(): any;

package/dist/types/components/cpsl-slide-button/cpsl-slide-button.d.ts

@@ -2,11 +2,29 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { IconType } from '../../interface';
 export declare class CpslSlideButton {
     el: HTMLCpslSlideButtonElement;
+    /**
+     * Whether or not the component is disabled. If true, the component will display the `startText`.
+     */
     disabled: boolean;
+    /**
+     * 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;
+    /**
+     * The `cpslComplete` event is fired when the slider is at the end.
+     */
     cpslComplete: EventEmitter<boolean>;
     componentDidLoad(): void;
     private dragElement;

package/dist/types/components/cpsl-spinner/cpsl-spinner.d.ts

@@ -1,5 +1,13 @@
 export declare class CpslSpinner {
+    /**
+     * Size of the spinner in pixels.
+     * Default is 50.
+     */
     size?: number;
+    /**
+     * Rotation speed of the spinner in seconds.
+     * Default is 1.
+     */
     speed?: number;
     render(): any;
 }

package/dist/types/components/cpsl-switch/cpsl-switch.d.ts

@@ -1,6 +1,12 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class CpslSwitch {
+    /**
+     * Whether or not the switch is checked.
+     */
     checked: boolean;
+    /**
+     * Emitted when the switch state changes.
+     */
     cpslSwitchChanged: EventEmitter<boolean>;
     private handleSwitchClick;
     render(): any;

package/dist/types/components/cpsl-tab/cpsl-tab.d.ts

@@ -3,8 +3,19 @@ import { TabClickEventDetail } from './tab-interface';
 import { TabsChangedEventDetail } from '../cpsl-tabs/tabs-interface';
 export declare class CpslTab {
     el: HTMLCpslTabElement;
+    /**
+     * 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;
+    /**
+     * Emitted when tabs are clicked
+     * @internal
+     */
     cpslTabButtonClick: EventEmitter<TabClickEventDetail>;
     onTabsChanged(ev: CustomEvent<TabsChangedEventDetail>): void;
     onTabsInit(ev: CustomEvent<TabsChangedEventDetail>): void;

package/dist/types/components/cpsl-tabs/cpsl-tabs.d.ts

@@ -4,9 +4,22 @@ export declare class CpslTabs {
     el: HTMLCpslTabsElement;
     selectedTabRect?: DOMRect;
     loaded: boolean;
+    /**
+     * Whether or not the tabs take the full width of their container.
+     */
     fullWidth?: boolean;
+    /**
+     * The selected tab component
+     */
     selectedTab?: string;
+    /**
+     * Emitted when a tab is changed
+     */
     cpslTabsChanged: EventEmitter<TabsChangedEventDetail>;
+    /**
+     * Emitted when tabs are initialized
+     * @internal
+     */
     cpslTabsInit: EventEmitter<TabsChangedEventDetail>;
     updateSlider(): void;
     updateTab(newValue?: string, oldValue?: string): void;

package/dist/types/components/cpsl-text/cpsl-text.d.ts

@@ -1,6 +1,21 @@
 export declare class CpslText {
-    color?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error';
+    /**
+     * The color of text.
+     * Options are: `"primary"`, `"secondary", `"tertiary", `"subtle", `"inverted", `"error".
+     * Default is: `"primary"`.
+     */
+    color?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error' | 'contrast';
+    /**
+     * The variant of text.
+     * Options are: `"body2XS"`, `"bodyXS", `"bodyS", `"bodyM", `"bodyL", `"bodyXL", `"headingXS", `"headingS", `"headingM", `"headingL", `"headingXL", `"heading2XL".
+     * Default is: `"bodyM"`.
+     */
     variant?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL';
+    /**
+     * The weight of text.
+     * Options are: `"regular"`, `"medium", `"semiBold", `"bold".
+     * Default is: `"regular"`.
+     */
     weight?: 'regular' | 'medium' | 'semiBold' | 'bold';
     private get Content();
     render(): any;

package/dist/types/components/cpsl-tile-button/cpsl-tile-button.d.ts

@@ -1,6 +1,12 @@
 import { IconType } from '../../interface';
 export declare class CpslTileButton {
+    /**
+     * The external source of the icon. If both `icon` and `src` are provided, `icon` will be used.
+     */
     src?: string;
+    /**
+     * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
+     */
     icon?: IconType;
     render(): any;
 }