@getpara/core-components 0.1.0

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

@@ -0,0 +1,49 @@
+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;
+    render(): any;
+}

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

@@ -0,0 +1,43 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class CpslNavButton {
+    el: HTMLCpslNavButtonElement;
+    /**
+     * If the button is disabled.
+     * Default is: false.
+     */
+    disabled?: boolean;
+    /**
+     * Whether or not to use exact matching for the selected main route.
+     */
+    exactMainRouteMatch?: boolean;
+    /**
+     * Whether or not to use exact matching for the selected sub route.
+     */
+    exactSubRouteMatch?: boolean;
+    /**
+     * The route for the button.
+     */
+    route: string;
+    /**
+     * The id of the selected button.
+     */
+    subRoutes?: {
+        label: string;
+        value: string;
+    }[];
+    /**
+     * Path used to determine what button is selected
+     */
+    path?: string;
+    /**
+     * Called when the nav button is clicked.
+     */
+    cpslNavButtonClick: EventEmitter<string>;
+    private handleNavButtonClick;
+    /**
+     * Called when a nav button sub route is clicked.
+     */
+    cpslNavButtonSubRouteClick: EventEmitter<string>;
+    private handleSubRouteClick;
+    render(): any;
+}

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

@@ -0,0 +1,6 @@
+export declare class CpslNavButtonGroup {
+    el: HTMLCpslNavButtonGroupElement;
+    componentWillRender(): void;
+    private get otherSlots();
+    render(): any;
+}

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

@@ -0,0 +1,24 @@
+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;
+    render(): any;
+}

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

@@ -0,0 +1,29 @@
+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;
+    private handlePrevClick;
+    private handleNextClick;
+    private handlePageClick;
+    render(): any;
+}

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

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

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

@@ -0,0 +1,91 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class CpslPopover {
+    private triggerEl?;
+    private destroyTriggerInteraction?;
+    el: HTMLCpslPopoverElement;
+    open: boolean;
+    hasSetInitialPosition: boolean;
+    positionX?: number;
+    positionY?: number;
+    private startedInside;
+    private startedWhenMounted;
+    /**
+     * 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;
+    onOpenChange(): void;
+    componentDidLoad(): void;
+    private configureTriggerInteraction;
+    private setPosition;
+    private validateEventStart;
+    private handleClickOutside;
+    private present;
+    private close;
+    get containerEl(): HTMLElement;
+    render(): any;
+}

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

@@ -0,0 +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-progress-indicator/progress-indicator-interface.d.ts

@@ -0,0 +1,4 @@
+export interface Step {
+    active: boolean;
+    previous: boolean;
+}

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

@@ -0,0 +1,24 @@
+import { IconType } from '../../interface.js';
+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;
+    /**
+     * The name of the icon. If both `icon` and `src` are provided, `icon` will be used.
+     */
+    icon?: IconType;
+    componentDidLoad(): void;
+    private get imgEl();
+    render(): any;
+}

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

@@ -0,0 +1,13 @@
+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-row/cpsl-row.d.ts

@@ -0,0 +1,3 @@
+export declare class CpslRow {
+    render(): any;
+}

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

@@ -0,0 +1,136 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconType } from '../../interface.js';
+export declare class CpslSelect {
+    el: HTMLCpslSelectElement;
+    private popoverEl;
+    private inputId;
+    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[]) => 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 name of the icon to use for the end icon.
+     * Default: `chevronUp`
+     */
+    icon?: IconType;
+    /**
+     * The label for the input.
+     */
+    label?: string;
+    /**
+     * If `true`, the user can select more than one value.
+     */
+    multiple?: boolean;
+    /**
+     * Whether or not to show the rotation animation for the end icon.
+     */
+    noIconAnimation?: boolean;
+    /**
+     * 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 | 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;
+    /**
+     * The color of the selected item or placeholder text.
+     * Options are: `"primary"`, `"secondary", `"tertiary", `"subtle", `"inverted", `"error".
+     * Default is: `"primary"`.
+     */
+    selectedItemColor?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'inverted' | 'error' | 'contrast';
+    /**
+     * The variant of the selected item or placeholder text.
+     * Options are: `"body2XS"`, `"bodyXS", `"bodyS", `"bodyM", `"bodyL", `"bodyXL", `"headingXS", `"headingS", `"headingM", `"headingL", `"headingXL", `"heading2XL".
+     * Default is: `"bodyM"`.
+     */
+    selectedItemVariant?: 'body2XS' | 'bodyXS' | 'bodyS' | 'bodyM' | 'bodyL' | 'bodyXL' | 'headingXS' | 'headingS' | 'headingM' | 'headingL' | 'headingXL' | 'heading2XL';
+    /**
+     * The weight of the selected item or placeholder text.
+     * Options are: `"regular"`, `"medium", `"semiBold", `"bold".
+     * Default is: `"regular"`.
+     */
+    selectedItemWeight?: 'regular' | 'medium' | 'semiBold' | 'bold';
+    /**
+     * 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;
+    onPopoverOpen(): void;
+    onPopoverClose(): void;
+    componentDidLoad(): void;
+    private onBlur;
+    private onFocus;
+    private handleEnterPress;
+    private selectItem;
+    private handleClickOutside;
+    private handleClick;
+    render(): any;
+}

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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,38 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconType } from '../../interface.js';
+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;
+    private get sliderContainerEl();
+    private get startTextEl();
+    private get endTextEl();
+    private get endBackgroundEl();
+    private get startIconEl();
+    private get endIconEl();
+    render(): any;
+}

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

@@ -0,0 +1,23 @@
+export declare class CpslSpinner {
+    /**
+     * Variant of the spinner
+     * Default is 'default'.
+     */
+    variant?: 'default' | 'inactive' | 'error';
+    /**
+     * Size of the spinner in pixels.
+     * Default is 50.
+     */
+    size?: number;
+    /**
+     * Width of the spinner arc in pixels.
+     * Default is 6.5.
+     */
+    barWidth?: 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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { TabClickEventDetail, TabSizeChangeEventDetail } from './tab-interface.js';
+import { TabsChangedEventDetail } from '../cpsl-tabs/tabs-interface.js';
+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>;
+    /**
+     * Emitted when tab size changes
+     * @internal
+     */
+    cpslTabButtonSizeChange: EventEmitter<TabSizeChangeEventDetail>;
+    onTabsChanged(ev: CustomEvent<TabsChangedEventDetail>): void;
+    onTabsInit(ev: CustomEvent<TabsChangedEventDetail>): void;
+    componentDidLoad(): void;
+    private setSelected;
+    private onTabClicked;
+    render(): any;
+}

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

@@ -0,0 +1,7 @@
+export interface TabClickEventDetail {
+    tab: string;
+    selected: boolean;
+}
+export interface TabSizeChangeEventDetail {
+    tab: string;
+}

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

@@ -0,0 +1,14 @@
+export declare class CpslTable {
+    el: HTMLCpslTableElement;
+    hasHorizontalScroll: boolean;
+    hasVerticalScroll: boolean;
+    componentDidLoad(): void;
+    private resizeOb;
+    private get containerHeaderEl();
+    private get containerFooterEl();
+    private get contentContainerEl();
+    private get headerEl();
+    private get containerSlotEl();
+    private get footerEl();
+    render(): any;
+}

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

@@ -0,0 +1,33 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { TabSizeChangeEventDetail } from '../cpsl-tab/tab-interface.js';
+import { TabsChangedEventDetail } from './tabs-interface.js';
+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;
+    onTabSizeChange(ev: CustomEvent<TabSizeChangeEventDetail>): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private get tabs();
+    private onTabClicked;
+    render(): any;
+}

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

@@ -0,0 +1,9 @@
+export interface TabsCustomEvent extends CustomEvent {
+    detail: {
+        tab: string;
+    };
+    target: HTMLCpslTabsElement;
+}
+export interface TabsChangedEventDetail {
+    tab?: string;
+}

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

@@ -0,0 +1,22 @@
+export declare class CpslText {
+    /**
+     * 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 getContent;
+    render(): any;
+}