@claromentis/design-system/dist/types/components.d.ts

Claromentis Design System Component Library

/* 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 { ButtonColor, ButtonType, InsigniaFillType, InsigniaShapeType, Orientation, Position, Size, ValueType } from "./interfaces";
export namespace Components {
    interface ClaBadge {
        /**
          * The background colour of the badge (optional)
         */
        "colour": string;
        /**
          * The bootstrap styling of the badge i.e. badge badge-primary badge-pill etc
         */
        "styleclass": string;
    }
    interface ClaBanner {
        /**
          * The banner position i.e top or bottom
         */
        "position"?: Position;
    }
    /**
     * The Button component.
     */
    interface ClaButton {
        /**
          * Whether to use the block style variant of the button.  This makes the button full width within its container.
         */
        "block": false;
        /**
          * The button color.
         */
        "color"?: ButtonColor;
        /**
          * Whether the button is disabled.
         */
        "disabled": boolean;
        /**
          * The button name.
         */
        "name"?: string;
        /**
          * Whether to use the outline style variant of the button.  This removes the background from the button when it's not hovered.
         */
        "outline": boolean;
        /**
          * The button size.
         */
        "size"?: Size;
        /**
          * The button type.
         */
        "type": ButtonType;
        /**
          * The button value.
         */
        "value"?: any;
    }
    interface ClaCard {
        /**
          * Card link - attached to card title and media slot
         */
        "href": string;
        /**
          * Status border - if the card has a status border you can set the colour here e.g. "#000";
         */
        "statusborder": string;
        /**
          * Style Class - adds class to the card for styling and rounded corners
         */
        "styleclass": string;
    }
    interface ClaCardFigure {
    }
    interface ClaCardFooter {
    }
    interface ClaCardHeader {
    }
    interface ClaCardImage {
        /**
          * The image alternative text.
         */
        "alt": string;
        /**
          * Image URL
         */
        "img": string;
    }
    interface ClaCardMedia {
        /**
          * The placeholder background colour The default uses Claromentis' product theme primary colour variable in the first instance If the component is used in a project without this variable it will default to white.
         */
        "bgcolor": string;
        /**
          * Height of card-media panel i.e. 100px/10vh/5rem etc - if no height is applied the standard height is 165px, set to auto when using the preserveaspect attribute on cla-card-image
         */
        "height": string;
        /**
          * The placeholder icon colour The default uses Claromentis' product theme primary colour contrast variable in the first instance If the component is used in a project without this variable it will default to 'var(--gray-900)'.
         */
        "iconcolor": string;
        /**
          * Placeholder icon - this can be either a Glyphicon or an Ionicon  In the case of glyphicons us the 'glyphicons-...' class  In the case of the Ionicon use the name attribut of the icon e.g 'hourglass-outline'  This prop is not compatible with preserveaspect
         */
        "placeholder": string;
        /**
          * Set as 'true' to preserve the aspect ratio of the uploaded image
         */
        "preserveaspect": boolean;
        /**
          * Additional styling classes if needed;
         */
        "styleclass": string;
    }
    interface ClaCheckbox {
        /**
          * Whether to use the block style variant of the checkbox.
         */
        "block": false;
        /**
          * Is it Checked ?
         */
        "checked": boolean;
        /**
          * Whether the checkbox is disabled.
         */
        "disabled": boolean;
        /**
          * Whether to use the inverted variant of the checkbox.
         */
        "inverted": false;
        /**
          * Whether to use the large variant of the checkbox.
         */
        "large": false;
        /**
          * The checkbox ID & name
         */
        "name": string;
        /**
          * The checkbox value
         */
        "value": 0;
    }
    interface ClaIcon {
        /**
          * The color of the icon, this will inherit the current text color if not chosen.
         */
        "fill": string;
        /**
          * The computed Id of the icon you're adding i.e glyphicons-basic-75-cup
         */
        "iconid": string;
        "status": string;
    }
    interface ClaInsignia {
        /**
          * The insignia colour.
         */
        "colour": string;
        /**
          * The insignia shape: 'hexagon', '' or ''. Default: 'hexagon'
         */
        "shape": InsigniaShapeType;
        /**
          * The insignia fill option: 'fill', 'outline' or 'empty'. Default: 'hexagon'
         */
        "type": InsigniaFillType;
        /**
          * The insignia width.
         */
        "width": string;
    }
    interface ClaInsigniaImage {
        /**
          * The image alternative text.
         */
        "alt": string;
        /**
          * The image source.
         */
        "source": string;
    }
    interface ClaItem {
        "orientate": Orientation;
    }
    interface ClaLabel {
        /**
          * If 'true', the label is hidden
         */
        "hidden": boolean;
    }
    interface ClaMenu {
        /**
          * If 'true' the menu will close when an item is selected
         */
        "closeOnSelect"?: boolean;
    }
    interface ClaNav {
        /**
          * Whether to display nav items vertically or horizontally.
         */
        "inline": boolean;
    }
    interface ClaNavItem {
        /**
          * Whether nav tabs is active.
         */
        "active": false;
        /**
          * nav tab href link .
         */
        "href": any;
        /**
          * nav tab name & id - fills the 'data-name' and 'id' attributes of the `<li>`
         */
        "name": any;
        /**
          * Whether to display nav items as link or titles in block mode (this attribute will not work in the list is in inline mode)
         */
        "navtitle": false;
        /**
          * The nav tab size.
         */
        "size"?: Size;
    }
    interface ClaPicker {
        /**
          * if 'block="true"', 'block' or 'block="block"' (i.e. true) the picker will display as a block (`<cla-item>` orientate property must be set to 'vertical')
         */
        "block": boolean;
        /**
          * If `true`, the picker is selected.
         */
        "checked": boolean;
        /**
          * If `true`, the user cannot interact with the picker.
         */
        "disabled": boolean;
        /**
          * If 'true', the picker will show the input (checkbox if multiselectable, radio if not)
         */
        "displayinput": boolean;
        /**
          * cla-icon id e.g. glyphicons-basic-158-thumbnails-small
         */
        "iconid": string;
        /**
          * SVG image code
         */
        "image": string;
        /**
          * The element name submitted to the form
         */
        "name": string;
        /**
          * The picker item text.
         */
        "pickerLabelText": string;
        /**
          * If 'true', the picker label text will be shown
         */
        "showlabeltext": boolean;
        /**
          * Select input value
         */
        "value"?: any | null;
    }
    interface ClaPickerGroup {
        /**
          * Can more than one picker option be selected?
         */
        "multiselectable": boolean;
    }
    interface ClaPopover {
    }
    interface ClaProgress {
        /**
          * The colour of the progress bar - this colour must be represented as a HEX, RGB or HSL code in order for the contrasting to be computed
         */
        "barcolour": string;
        /**
          * The current value. if no minium and maximum are specified the value is out of 100
         */
        "current": number;
        /**
          * The progress bar height
         */
        "height": string;
        /**
          * If 'true' the remaining progress bar is shown
         */
        "hideremainingprogress": boolean;
        /**
          * The maximum value
         */
        "maximum": number;
        /**
          * The minimum value.
         */
        "minimum": number;
        /**
          * percentage of Progress completed
         */
        "percentageComplete": number;
        /**
          * percentage of Progress remaining
         */
        "percentageRemaining": number;
        /**
          * If 'true' the progress text is shown
         */
        "showprogresstext": boolean;
        /**
          * If 'true' the remaining progress text is shown
         */
        "showremainingtext": boolean;
        /**
          * If 'true' the progress unit is shown
         */
        "showunit": boolean;
        /**
          * Show value as percentage or unit
         */
        "showvalueas": ValueType;
        /**
          * The progress unit
         */
        "unit": string;
        /**
          * The progress bar width (in px)
         */
        "width": string;
    }
    interface ClaProgressCircle {
        /**
          * Using the customtext attribute you can add text in place of the percentage number
         */
        "customtext": string;
        /**
          * Whether to use the inverted variant of the progress circle.
         */
        "inverted": false;
        /**
          * The percentage of completion of the progress circle - this automatically created from the percentage number
         */
        "percentage"?: number;
        /**
          * The primary color which affects the percentage bar color and the percentage text color
         */
        "primarycolor": string;
        /**
          * The size of the progress circle - defaults to 90px but can set to any size in px, em, rems.
         */
        "size": string;
    }
    interface ClaRadio {
        /**
          * Whether to use the block style variant of the radio.
         */
        "block": false;
        /**
          * Is it Checked ?
         */
        "checked": boolean;
        /**
          * Whether the radio is disabled.
         */
        "disabled": boolean;
        /**
          * Whether to use the inverted variant of the radio.
         */
        "inverted": false;
        /**
          * Whether to use the large variant of the radio.
         */
        "large": false;
        /**
          * The radio ID & name
         */
        "name": string;
        /**
          * The radio value
         */
        "value"?: any;
    }
    interface ClaStatusIndicator {
        /**
          * Whether to use the badgestyle variant of the indicator - puts padding and a border around the indicator.
         */
        "badgestyle": false;
        /**
          * The color of the status indicator - this colour must be represented as a HEX, RGB or HSL code in order for the contrasting to be computed
         */
        "color": string;
        /**
          * Whether to use the inverted variant of the status indicator.
         */
        "inverted": false;
        /**
          * Whether to use the left to right or right to left mode in text status indicators
         */
        "rtl": false;
        /**
          * The shape of the status indicator - can be square or circle
         */
        "shape": string;
        /**
          * The size of the status indicator - can be x-small, small, defaut or large
         */
        "size": string;
        /**
          * This allows a singlur letter to be put inside the status indicator
         */
        "statusletter": string;
    }
    interface ClaStructuredList {
        /**
          * Whether to use the inverted variant of the structured list.
         */
        "inverted": false;
        /**
          * Whether to use the left to right or right to left mode in text structured list
         */
        "rtl": false;
        /**
          * Whether to use the sortable variant of the structured list - adds a dragging icon on the side.
         */
        "sortable": false;
    }
    interface ClaToggleSwitch {
        /**
          * Whether to use the block style variant of the toggle.
         */
        "block": false;
        /**
          * Is it Checked ?
         */
        "checked": boolean;
        /**
          * Whether the toggle is disabled.
         */
        "disabled": boolean;
        /**
          * Whether to use the inverted variant of the toggle.
         */
        "inverted": false;
        /**
          * Whether to use the large variant of the toggle.
         */
        "large": false;
        /**
          * The toggle ID & name
         */
        "name": string;
        /**
          * Off/disabled text for inside toggle switch - must be the same length or shorter than the on/enable text
         */
        "offtext": string;
        /**
          * On/Enabled text for inside toggle switch
         */
        "ontext": string;
        /**
          * The toggle value
         */
        "value": 0;
    }
    interface ClaUserList {
        /**
          * the link for the + number button, this can be configured to take you to a list of users
         */
        "href": string;
        /**
          * the number of additional users not displayed in the list
         */
        "plusnumber": number;
        /**
          * Allows styling to be applied to the user-list
         */
        "styleclass": string;
        /**
          * The text title of the user list (this displays at the top)
         */
        "title": string;
    }
    interface ClaUserListItem {
        "href": string;
        "img": string;
    }
    interface ClaWrappedButtons {
        /**
          * Left/Primary button styling class - use bootstrap btn classes to style the button
         */
        "primarybuttonclass": string;
        /**
          * Left/Primary button href - links to page
         */
        "primarybuttonhref": string;
        /**
          * Left/Primary button text
         */
        "primarybuttontext": string;
        /**
          * Right/Secondary button styling class - use bootstrap btn classes to style the button
         */
        "secondarybuttonclass": string;
        /**
          * Right/Secondary button href - links to page
         */
        "secondarybuttonhref": string;
        /**
          * Right/Secondary button text
         */
        "secondarybuttontext": string;
        /**
          * Button wrapper styling
         */
        "styleclass": string;
    }
}
export interface ClaCardImageCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLClaCardImageElement;
}
export interface ClaCheckboxCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLClaCheckboxElement;
}
export interface ClaMenuCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLClaMenuElement;
}
export interface ClaNavItemCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLClaNavItemElement;
}
export interface ClaPickerCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLClaPickerElement;
}
export interface ClaPopoverCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLClaPopoverElement;
}
export interface ClaRadioCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLClaRadioElement;
}
export interface ClaToggleSwitchCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLClaToggleSwitchElement;
}
declare global {
    interface HTMLClaBadgeElement extends Components.ClaBadge, HTMLStencilElement {
    }
    var HTMLClaBadgeElement: {
        prototype: HTMLClaBadgeElement;
        new (): HTMLClaBadgeElement;
    };
    interface HTMLClaBannerElement extends Components.ClaBanner, HTMLStencilElement {
    }
    var HTMLClaBannerElement: {
        prototype: HTMLClaBannerElement;
        new (): HTMLClaBannerElement;
    };
    /**
     * The Button component.
     */
    interface HTMLClaButtonElement extends Components.ClaButton, HTMLStencilElement {
    }
    var HTMLClaButtonElement: {
        prototype: HTMLClaButtonElement;
        new (): HTMLClaButtonElement;
    };
    interface HTMLClaCardElement extends Components.ClaCard, HTMLStencilElement {
    }
    var HTMLClaCardElement: {
        prototype: HTMLClaCardElement;
        new (): HTMLClaCardElement;
    };
    interface HTMLClaCardFigureElement extends Components.ClaCardFigure, HTMLStencilElement {
    }
    var HTMLClaCardFigureElement: {
        prototype: HTMLClaCardFigureElement;
        new (): HTMLClaCardFigureElement;
    };
    interface HTMLClaCardFooterElement extends Components.ClaCardFooter, HTMLStencilElement {
    }
    var HTMLClaCardFooterElement: {
        prototype: HTMLClaCardFooterElement;
        new (): HTMLClaCardFooterElement;
    };
    interface HTMLClaCardHeaderElement extends Components.ClaCardHeader, HTMLStencilElement {
    }
    var HTMLClaCardHeaderElement: {
        prototype: HTMLClaCardHeaderElement;
        new (): HTMLClaCardHeaderElement;
    };
    interface HTMLClaCardImageElement extends Components.ClaCardImage, HTMLStencilElement {
    }
    var HTMLClaCardImageElement: {
        prototype: HTMLClaCardImageElement;
        new (): HTMLClaCardImageElement;
    };
    interface HTMLClaCardMediaElement extends Components.ClaCardMedia, HTMLStencilElement {
    }
    var HTMLClaCardMediaElement: {
        prototype: HTMLClaCardMediaElement;
        new (): HTMLClaCardMediaElement;
    };
    interface HTMLClaCheckboxElement extends Components.ClaCheckbox, HTMLStencilElement {
    }
    var HTMLClaCheckboxElement: {
        prototype: HTMLClaCheckboxElement;
        new (): HTMLClaCheckboxElement;
    };
    interface HTMLClaIconElement extends Components.ClaIcon, HTMLStencilElement {
    }
    var HTMLClaIconElement: {
        prototype: HTMLClaIconElement;
        new (): HTMLClaIconElement;
    };
    interface HTMLClaInsigniaElement extends Components.ClaInsignia, HTMLStencilElement {
    }
    var HTMLClaInsigniaElement: {
        prototype: HTMLClaInsigniaElement;
        new (): HTMLClaInsigniaElement;
    };
    interface HTMLClaInsigniaImageElement extends Components.ClaInsigniaImage, HTMLStencilElement {
    }
    var HTMLClaInsigniaImageElement: {
        prototype: HTMLClaInsigniaImageElement;
        new (): HTMLClaInsigniaImageElement;
    };
    interface HTMLClaItemElement extends Components.ClaItem, HTMLStencilElement {
    }
    var HTMLClaItemElement: {
        prototype: HTMLClaItemElement;
        new (): HTMLClaItemElement;
    };
    interface HTMLClaLabelElement extends Components.ClaLabel, HTMLStencilElement {
    }
    var HTMLClaLabelElement: {
        prototype: HTMLClaLabelElement;
        new (): HTMLClaLabelElement;
    };
    interface HTMLClaMenuElement extends Components.ClaMenu, HTMLStencilElement {
    }
    var HTMLClaMenuElement: {
        prototype: HTMLClaMenuElement;
        new (): HTMLClaMenuElement;
    };
    interface HTMLClaNavElement extends Components.ClaNav, HTMLStencilElement {
    }
    var HTMLClaNavElement: {
        prototype: HTMLClaNavElement;
        new (): HTMLClaNavElement;
    };
    interface HTMLClaNavItemElement extends Components.ClaNavItem, HTMLStencilElement {
    }
    var HTMLClaNavItemElement: {
        prototype: HTMLClaNavItemElement;
        new (): HTMLClaNavItemElement;
    };
    interface HTMLClaPickerElement extends Components.ClaPicker, HTMLStencilElement {
    }
    var HTMLClaPickerElement: {
        prototype: HTMLClaPickerElement;
        new (): HTMLClaPickerElement;
    };
    interface HTMLClaPickerGroupElement extends Components.ClaPickerGroup, HTMLStencilElement {
    }
    var HTMLClaPickerGroupElement: {
        prototype: HTMLClaPickerGroupElement;
        new (): HTMLClaPickerGroupElement;
    };
    interface HTMLClaPopoverElement extends Components.ClaPopover, HTMLStencilElement {
    }
    var HTMLClaPopoverElement: {
        prototype: HTMLClaPopoverElement;
        new (): HTMLClaPopoverElement;
    };
    interface HTMLClaProgressElement extends Components.ClaProgress, HTMLStencilElement {
    }
    var HTMLClaProgressElement: {
        prototype: HTMLClaProgressElement;
        new (): HTMLClaProgressElement;
    };
    interface HTMLClaProgressCircleElement extends Components.ClaProgressCircle, HTMLStencilElement {
    }
    var HTMLClaProgressCircleElement: {
        prototype: HTMLClaProgressCircleElement;
        new (): HTMLClaProgressCircleElement;
    };
    interface HTMLClaRadioElement extends Components.ClaRadio, HTMLStencilElement {
    }
    var HTMLClaRadioElement: {
        prototype: HTMLClaRadioElement;
        new (): HTMLClaRadioElement;
    };
    interface HTMLClaStatusIndicatorElement extends Components.ClaStatusIndicator, HTMLStencilElement {
    }
    var HTMLClaStatusIndicatorElement: {
        prototype: HTMLClaStatusIndicatorElement;
        new (): HTMLClaStatusIndicatorElement;
    };
    interface HTMLClaStructuredListElement extends Components.ClaStructuredList, HTMLStencilElement {
    }
    var HTMLClaStructuredListElement: {
        prototype: HTMLClaStructuredListElement;
        new (): HTMLClaStructuredListElement;
    };
    interface HTMLClaToggleSwitchElement extends Components.ClaToggleSwitch, HTMLStencilElement {
    }
    var HTMLClaToggleSwitchElement: {
        prototype: HTMLClaToggleSwitchElement;
        new (): HTMLClaToggleSwitchElement;
    };
    interface HTMLClaUserListElement extends Components.ClaUserList, HTMLStencilElement {
    }
    var HTMLClaUserListElement: {
        prototype: HTMLClaUserListElement;
        new (): HTMLClaUserListElement;
    };
    interface HTMLClaUserListItemElement extends Components.ClaUserListItem, HTMLStencilElement {
    }
    var HTMLClaUserListItemElement: {
        prototype: HTMLClaUserListItemElement;
        new (): HTMLClaUserListItemElement;
    };
    interface HTMLClaWrappedButtonsElement extends Components.ClaWrappedButtons, HTMLStencilElement {
    }
    var HTMLClaWrappedButtonsElement: {
        prototype: HTMLClaWrappedButtonsElement;
        new (): HTMLClaWrappedButtonsElement;
    };
    interface HTMLElementTagNameMap {
        "cla-badge": HTMLClaBadgeElement;
        "cla-banner": HTMLClaBannerElement;
        "cla-button": HTMLClaButtonElement;
        "cla-card": HTMLClaCardElement;
        "cla-card-figure": HTMLClaCardFigureElement;
        "cla-card-footer": HTMLClaCardFooterElement;
        "cla-card-header": HTMLClaCardHeaderElement;
        "cla-card-image": HTMLClaCardImageElement;
        "cla-card-media": HTMLClaCardMediaElement;
        "cla-checkbox": HTMLClaCheckboxElement;
        "cla-icon": HTMLClaIconElement;
        "cla-insignia": HTMLClaInsigniaElement;
        "cla-insignia-image": HTMLClaInsigniaImageElement;
        "cla-item": HTMLClaItemElement;
        "cla-label": HTMLClaLabelElement;
        "cla-menu": HTMLClaMenuElement;
        "cla-nav": HTMLClaNavElement;
        "cla-nav-item": HTMLClaNavItemElement;
        "cla-picker": HTMLClaPickerElement;
        "cla-picker-group": HTMLClaPickerGroupElement;
        "cla-popover": HTMLClaPopoverElement;
        "cla-progress": HTMLClaProgressElement;
        "cla-progress-circle": HTMLClaProgressCircleElement;
        "cla-radio": HTMLClaRadioElement;
        "cla-status-indicator": HTMLClaStatusIndicatorElement;
        "cla-structured-list": HTMLClaStructuredListElement;
        "cla-toggle-switch": HTMLClaToggleSwitchElement;
        "cla-user-list": HTMLClaUserListElement;
        "cla-user-list-item": HTMLClaUserListItemElement;
        "cla-wrapped-buttons": HTMLClaWrappedButtonsElement;
    }
}
declare namespace LocalJSX {
    interface ClaBadge {
        /**
          * The background colour of the badge (optional)
         */
        "colour"?: string;
        /**
          * The bootstrap styling of the badge i.e. badge badge-primary badge-pill etc
         */
        "styleclass"?: string;
    }
    interface ClaBanner {
        /**
          * The banner position i.e top or bottom
         */
        "position"?: Position;
    }
    /**
     * The Button component.
     */
    interface ClaButton {
        /**
          * Whether to use the block style variant of the button.  This makes the button full width within its container.
         */
        "block"?: false;
        /**
          * The button color.
         */
        "color"?: ButtonColor;
        /**
          * Whether the button is disabled.
         */
        "disabled"?: boolean;
        /**
          * The button name.
         */
        "name"?: string;
        /**
          * Whether to use the outline style variant of the button.  This removes the background from the button when it's not hovered.
         */
        "outline"?: boolean;
        /**
          * The button size.
         */
        "size"?: Size;
        /**
          * The button type.
         */
        "type"?: ButtonType;
        /**
          * The button value.
         */
        "value"?: any;
    }
    interface ClaCard {
        /**
          * Card link - attached to card title and media slot
         */
        "href"?: string;
        /**
          * Status border - if the card has a status border you can set the colour here e.g. "#000";
         */
        "statusborder"?: string;
        /**
          * Style Class - adds class to the card for styling and rounded corners
         */
        "styleclass"?: string;
    }
    interface ClaCardFigure {
    }
    interface ClaCardFooter {
    }
    interface ClaCardHeader {
    }
    interface ClaCardImage {
        /**
          * The image alternative text.
         */
        "alt": string;
        /**
          * Image URL
         */
        "img"?: string;
        /**
          * Emitted when nav item loads.
         */
        "onClaImgDidLoad"?: (event: ClaCardImageCustomEvent<any>) => void;
    }
    interface ClaCardMedia {
        /**
          * The placeholder background colour The default uses Claromentis' product theme primary colour variable in the first instance If the component is used in a project without this variable it will default to white.
         */
        "bgcolor"?: string;
        /**
          * Height of card-media panel i.e. 100px/10vh/5rem etc - if no height is applied the standard height is 165px, set to auto when using the preserveaspect attribute on cla-card-image
         */
        "height"?: string;
        /**
          * The placeholder icon colour The default uses Claromentis' product theme primary colour contrast variable in the first instance If the component is used in a project without this variable it will default to 'var(--gray-900)'.
         */
        "iconcolor"?: string;
        /**
          * Placeholder icon - this can be either a Glyphicon or an Ionicon  In the case of glyphicons us the 'glyphicons-...' class  In the case of the Ionicon use the name attribut of the icon e.g 'hourglass-outline'  This prop is not compatible with preserveaspect
         */
        "placeholder"?: string;
        /**
          * Set as 'true' to preserve the aspect ratio of the uploaded image
         */
        "preserveaspect"?: boolean;
        /**
          * Additional styling classes if needed;
         */
        "styleclass"?: string;
    }
    interface ClaCheckbox {
        /**
          * Whether to use the block style variant of the checkbox.
         */
        "block"?: false;
        /**
          * Is it Checked ?
         */
        "checked"?: boolean;
        /**
          * Whether the checkbox is disabled.
         */
        "disabled"?: boolean;
        /**
          * Whether to use the inverted variant of the checkbox.
         */
        "inverted"?: false;
        /**
          * Whether to use the large variant of the checkbox.
         */
        "large"?: false;
        /**
          * The checkbox ID & name
         */
        "name"?: string;
        /**
          * Emitted when the checkbox is selected.
         */
        "onSelected"?: (event: ClaCheckboxCustomEvent<any>) => void;
        /**
          * Emitted when the checkbox is unselected.
         */
        "onUnselected"?: (event: ClaCheckboxCustomEvent<any>) => void;
        /**
          * The checkbox value
         */
        "value"?: 0;
    }
    interface ClaIcon {
        /**
          * The color of the icon, this will inherit the current text color if not chosen.
         */
        "fill"?: string;
        /**
          * The computed Id of the icon you're adding i.e glyphicons-basic-75-cup
         */
        "iconid"?: string;
        "status"?: string;
    }
    interface ClaInsignia {
        /**
          * The insignia colour.
         */
        "colour"?: string;
        /**
          * The insignia shape: 'hexagon', '' or ''. Default: 'hexagon'
         */
        "shape"?: InsigniaShapeType;
        /**
          * The insignia fill option: 'fill', 'outline' or 'empty'. Default: 'hexagon'
         */
        "type"?: InsigniaFillType;
        /**
          * The insignia width.
         */
        "width"?: string;
    }
    interface ClaInsigniaImage {
        /**
          * The image alternative text.
         */
        "alt": string;
        /**
          * The image source.
         */
        "source"?: string;
    }
    interface ClaItem {
        "orientate"?: Orientation;
    }
    interface ClaLabel {
        /**
          * If 'true', the label is hidden
         */
        "hidden"?: boolean;
    }
    interface ClaMenu {
        /**
          * If 'true' the menu will close when an item is selected
         */
        "closeOnSelect"?: boolean;
        /**
          * Emitted when the menu is toggled.
         */
        "onToggleEvent"?: (event: ClaMenuCustomEvent<any>) => void;
    }
    interface ClaNav {
        /**
          * Whether to display nav items vertically or horizontally.
         */
        "inline"?: boolean;
    }
    interface ClaNavItem {
        /**
          * Whether nav tabs is active.
         */
        "active"?: false;
        /**
          * nav tab href link .
         */
        "href"?: any;
        /**
          * nav tab name & id - fills the 'data-name' and 'id' attributes of the `<li>`
         */
        "name"?: any;
        /**
          * Whether to display nav items as link or titles in block mode (this attribute will not work in the list is in inline mode)
         */
        "navtitle"?: false;
        /**
          * Emitted when nav item loads.
         */
        "onClaNavItemDidLoad"?: (event: ClaNavItemCustomEvent<any>) => void;
        /**
          * The nav tab size.
         */
        "size"?: Size;
    }
    interface ClaPicker {
        /**
          * if 'block="true"', 'block' or 'block="block"' (i.e. true) the picker will display as a block (`<cla-item>` orientate property must be set to 'vertical')
         */
        "block"?: boolean;
        /**
          * If `true`, the picker is selected.
         */
        "checked"?: boolean;
        /**
          * If `true`, the user cannot interact with the picker.
         */
        "disabled"?: boolean;
        /**
          * If 'true', the picker will show the input (checkbox if multiselectable, radio if not)
         */
        "displayinput"?: boolean;
        /**
          * cla-icon id e.g. glyphicons-basic-158-thumbnails-small
         */
        "iconid"?: string;
        /**
          * SVG image code
         */
        "image"?: string;
        /**
          * The element name submitted to the form
         */
        "name"?: string;
        /**
          * Emitted when the picker loses focus.
         */
        "onClaPickerBlur"?: (event: ClaPickerCustomEvent<void>) => void;
        /**
          * Emitted when the selected picker is clicked.
         */
        "onClaPickerDeselect"?: (event: ClaPickerCustomEvent<any>) => void;
        /**
          * Emitted when the picker loads.
         */
        "onClaPickerDidLoad"?: (event: ClaPickerCustomEvent<any>) => void;
        /**
          * Emitted when the picker has focus.
         */
        "onClaPickerFocus"?: (event: ClaPickerCustomEvent<void>) => void;
        /**
          * Emitted when the picker is clicked.
         */
        "onClaPickerSelect"?: (event: ClaPickerCustomEvent<any>) => void;
        /**
          * The picker item text.
         */
        "pickerLabelText"?: string;
        /**
          * If 'true', the picker label text will be shown
         */
        "showlabeltext"?: boolean;
        /**
          * Select input value
         */
        "value"?: any | null;
    }
    interface ClaPickerGroup {
        /**
          * Can more than one picker option be selected?
         */
        "multiselectable"?: boolean;
    }
    interface ClaPopover {
        /**
          * Emitted when the menu is toggled.
         */
        "onToggleEvent"?: (event: ClaPopoverCustomEvent<any>) => void;
    }
    interface ClaProgress {
        /**
          * The colour of the progress bar - this colour must be represented as a HEX, RGB or HSL code in order for the contrasting to be computed
         */
        "barcolour"?: string;
        /**
          * The current value. if no minium and maximum are specified the value is out of 100
         */
        "current"?: number;
        /**
          * The progress bar height
         */
        "height"?: string;
        /**
          * If 'true' the remaining progress bar is shown
         */
        "hideremainingprogress"?: boolean;
        /**
          * The maximum value
         */
        "maximum"?: number;
        /**
          * The minimum value.
         */
        "minimum"?: number;
        /**
          * percentage of Progress completed
         */
        "percentageComplete"?: number;
        /**
          * percentage of Progress remaining
         */
        "percentageRemaining"?: number;
        /**
          * If 'true' the progress text is shown
         */
        "showprogresstext"?: boolean;
        /**
          * If 'true' the remaining progress text is shown
         */
        "showremainingtext"?: boolean;
        /**
          * If 'true' the progress unit is shown
         */
        "showunit"?: boolean;
        /**
          * Show value as percentage or unit
         */
        "showvalueas"?: ValueType;
        /**
          * The progress unit
         */
        "unit"?: string;
        /**
          * The progress bar width (in px)
         */
        "width"?: string;
    }
    interface ClaProgressCircle {
        /**
          * Using the customtext attribute you can add text in place of the percentage number
         */
        "customtext"?: string;
        /**
          * Whether to use the inverted variant of the progress circle.
         */
        "inverted"?: false;
        /**
          * The percentage of completion of the progress circle - this automatically created from the percentage number
         */
        "percentage"?: number;
        /**
          * The primary color which affects the percentage bar color and the percentage text color
         */
        "primarycolor"?: string;
        /**
          * The size of the progress circle - defaults to 90px but can set to any size in px, em, rems.
         */
        "size"?: string;
    }
    interface ClaRadio {
        /**
          * Whether to use the block style variant of the radio.
         */
        "block"?: false;
        /**
          * Is it Checked ?
         */
        "checked"?: boolean;
        /**
          * Whether the radio is disabled.
         */
        "disabled"?: boolean;
        /**
          * Whether to use the inverted variant of the radio.
         */
        "inverted"?: false;
        /**
          * Whether to use the large variant of the radio.
         */
        "large"?: false;
        /**
          * The radio ID & name
         */
        "name"?: string;
        /**
          * Emitted when the radio is selected.
         */
        "onSelected"?: (event: ClaRadioCustomEvent<any>) => void;
        /**
          * Emitted when the radio is unselected.
         */
        "onUnselected"?: (event: ClaRadioCustomEvent<any>) => void;
        /**
          * The radio value
         */
        "value"?: any;
    }
    interface ClaStatusIndicator {
        /**
          * Whether to use the badgestyle variant of the indicator - puts padding and a border around the indicator.
         */
        "badgestyle"?: false;
        /**
          * The color of the status indicator - this colour must be represented as a HEX, RGB or HSL code in order for the contrasting to be computed
         */
        "color"?: string;
        /**
          * Whether to use the inverted variant of the status indicator.
         */
        "inverted"?: false;
        /**
          * Whether to use the left to right or right to left mode in text status indicators
         */
        "rtl"?: false;
        /**
          * The shape of the status indicator - can be square or circle
         */
        "shape"?: string;
        /**
          * The size of the status indicator - can be x-small, small, defaut or large
         */
        "size"?: string;
        /**
          * This allows a singlur letter to be put inside the status indicator
         */
        "statusletter"?: string;
    }
    interface ClaStructuredList {
        /**
          * Whether to use the inverted variant of the structured list.
         */
        "inverted"?: false;
        /**
          * Whether to use the left to right or right to left mode in text structured list
         */
        "rtl"?: false;
        /**
          * Whether to use the sortable variant of the structured list - adds a dragging icon on the side.
         */
        "sortable"?: false;
    }
    interface ClaToggleSwitch {
        /**
          * Whether to use the block style variant of the toggle.
         */
        "block"?: false;
        /**
          * Is it Checked ?
         */
        "checked"?: boolean;
        /**
          * Whether the toggle is disabled.
         */
        "disabled"?: boolean;
        /**
          * Whether to use the inverted variant of the toggle.
         */
        "inverted"?: false;
        /**
          * Whether to use the large variant of the toggle.
         */
        "large"?: false;
        /**
          * The toggle ID & name
         */
        "name"?: string;
        /**
          * Off/disabled text for inside toggle switch - must be the same length or shorter than the on/enable text
         */
        "offtext"?: string;
        /**
          * Emitted when the toggle is selected.
         */
        "onSelected"?: (event: ClaToggleSwitchCustomEvent<any>) => void;
        /**
          * Emitted when the toggle is unselected.
         */
        "onUnselected"?: (event: ClaToggleSwitchCustomEvent<any>) => void;
        /**
          * On/Enabled text for inside toggle switch
         */
        "ontext"?: string;
        /**
          * The toggle value
         */
        "value"?: 0;
    }
    interface ClaUserList {
        /**
          * the link for the + number button, this can be configured to take you to a list of users
         */
        "href"?: string;
        /**
          * the number of additional users not displayed in the list
         */
        "plusnumber"?: number;
        /**
          * Allows styling to be applied to the user-list
         */
        "styleclass"?: string;
        /**
          * The text title of the user list (this displays at the top)
         */
        "title"?: string;
    }
    interface ClaUserListItem {
        "href"?: string;
        "img"?: string;
    }
    interface ClaWrappedButtons {
        /**
          * Left/Primary button styling class - use bootstrap btn classes to style the button
         */
        "primarybuttonclass"?: string;
        /**
          * Left/Primary button href - links to page
         */
        "primarybuttonhref"?: string;
        /**
          * Left/Primary button text
         */
        "primarybuttontext"?: string;
        /**
          * Right/Secondary button styling class - use bootstrap btn classes to style the button
         */
        "secondarybuttonclass"?: string;
        /**
          * Right/Secondary button href - links to page
         */
        "secondarybuttonhref"?: string;
        /**
          * Right/Secondary button text
         */
        "secondarybuttontext"?: string;
        /**
          * Button wrapper styling
         */
        "styleclass"?: string;
    }
    interface IntrinsicElements {
        "cla-badge": ClaBadge;
        "cla-banner": ClaBanner;
        "cla-button": ClaButton;
        "cla-card": ClaCard;
        "cla-card-figure": ClaCardFigure;
        "cla-card-footer": ClaCardFooter;
        "cla-card-header": ClaCardHeader;
        "cla-card-image": ClaCardImage;
        "cla-card-media": ClaCardMedia;
        "cla-checkbox": ClaCheckbox;
        "cla-icon": ClaIcon;
        "cla-insignia": ClaInsignia;
        "cla-insignia-image": ClaInsigniaImage;
        "cla-item": ClaItem;
        "cla-label": ClaLabel;
        "cla-menu": ClaMenu;
        "cla-nav": ClaNav;
        "cla-nav-item": ClaNavItem;
        "cla-picker": ClaPicker;
        "cla-picker-group": ClaPickerGroup;
        "cla-popover": ClaPopover;
        "cla-progress": ClaProgress;
        "cla-progress-circle": ClaProgressCircle;
        "cla-radio": ClaRadio;
        "cla-status-indicator": ClaStatusIndicator;
        "cla-structured-list": ClaStructuredList;
        "cla-toggle-switch": ClaToggleSwitch;
        "cla-user-list": ClaUserList;
        "cla-user-list-item": ClaUserListItem;
        "cla-wrapped-buttons": ClaWrappedButtons;
    }
}
export { LocalJSX as JSX };
declare module "@stencil/core" {
    export namespace JSX {
        interface IntrinsicElements {
            "cla-badge": LocalJSX.ClaBadge & JSXBase.HTMLAttributes<HTMLClaBadgeElement>;
            "cla-banner": LocalJSX.ClaBanner & JSXBase.HTMLAttributes<HTMLClaBannerElement>;
            /**
             * The Button component.
             */
            "cla-button": LocalJSX.ClaButton & JSXBase.HTMLAttributes<HTMLClaButtonElement>;
            "cla-card": LocalJSX.ClaCard & JSXBase.HTMLAttributes<HTMLClaCardElement>;
            "cla-card-figure": LocalJSX.ClaCardFigure & JSXBase.HTMLAttributes<HTMLClaCardFigureElement>;
            "cla-card-footer": LocalJSX.ClaCardFooter & JSXBase.HTMLAttributes<HTMLClaCardFooterElement>;
            "cla-card-header": LocalJSX.ClaCardHeader & JSXBase.HTMLAttributes<HTMLClaCardHeaderElement>;
            "cla-card-image": LocalJSX.ClaCardImage & JSXBase.HTMLAttributes<HTMLClaCardImageElement>;
            "cla-card-media": LocalJSX.ClaCardMedia & JSXBase.HTMLAttributes<HTMLClaCardMediaElement>;
            "cla-checkbox": LocalJSX.ClaCheckbox & JSXBase.HTMLAttributes<HTMLClaCheckboxElement>;
            "cla-icon": LocalJSX.ClaIcon & JSXBase.HTMLAttributes<HTMLClaIconElement>;
            "cla-insignia": LocalJSX.ClaInsignia & JSXBase.HTMLAttributes<HTMLClaInsigniaElement>;
            "cla-insignia-image": LocalJSX.ClaInsigniaImage & JSXBase.HTMLAttributes<HTMLClaInsigniaImageElement>;
            "cla-item": LocalJSX.ClaItem & JSXBase.HTMLAttributes<HTMLClaItemElement>;
            "cla-label": LocalJSX.ClaLabel & JSXBase.HTMLAttributes<HTMLClaLabelElement>;
            "cla-menu": LocalJSX.ClaMenu & JSXBase.HTMLAttributes<HTMLClaMenuElement>;
            "cla-nav": LocalJSX.ClaNav & JSXBase.HTMLAttributes<HTMLClaNavElement>;
            "cla-nav-item": LocalJSX.ClaNavItem & JSXBase.HTMLAttributes<HTMLClaNavItemElement>;
            "cla-picker": LocalJSX.ClaPicker & JSXBase.HTMLAttributes<HTMLClaPickerElement>;
            "cla-picker-group": LocalJSX.ClaPickerGroup & JSXBase.HTMLAttributes<HTMLClaPickerGroupElement>;
            "cla-popover": LocalJSX.ClaPopover & JSXBase.HTMLAttributes<HTMLClaPopoverElement>;
            "cla-progress": LocalJSX.ClaProgress & JSXBase.HTMLAttributes<HTMLClaProgressElement>;
            "cla-progress-circle": LocalJSX.ClaProgressCircle & JSXBase.HTMLAttributes<HTMLClaProgressCircleElement>;
            "cla-radio": LocalJSX.ClaRadio & JSXBase.HTMLAttributes<HTMLClaRadioElement>;
            "cla-status-indicator": LocalJSX.ClaStatusIndicator & JSXBase.HTMLAttributes<HTMLClaStatusIndicatorElement>;
            "cla-structured-list": LocalJSX.ClaStructuredList & JSXBase.HTMLAttributes<HTMLClaStructuredListElement>;
            "cla-toggle-switch": LocalJSX.ClaToggleSwitch & JSXBase.HTMLAttributes<HTMLClaToggleSwitchElement>;
            "cla-user-list": LocalJSX.ClaUserList & JSXBase.HTMLAttributes<HTMLClaUserListElement>;
            "cla-user-list-item": LocalJSX.ClaUserListItem & JSXBase.HTMLAttributes<HTMLClaUserListItemElement>;
            "cla-wrapped-buttons": LocalJSX.ClaWrappedButtons & JSXBase.HTMLAttributes<HTMLClaWrappedButtonsElement>;
        }
    }
}