/* 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 { BalCardStepOption } from "./components/bal-card-step/bal-card-step.type";
import { BalDateCallback } from "./components/bal-datepicker/bal-datepicker.type";
import { FileUploadRejectedFile } from "./components/bal-file-upload/bal-file-upload.type";
import { BalOptionValue } from "./components/bal-select-option/bal-select-option.type";
import { BalTabOption } from "./components/bal-tabs/bal-tab.type";
export namespace Components {
    interface BalAccordion {
        /**
          * Close the accordion
         */
        "close": () => Promise<void>;
        /**
          * Bal-Icon of the close trigger button
         */
        "closeIcon": string;
        /**
          * Label of the close trigger button
         */
        "closeLabel": string;
        /**
          * Controls if the accordion is collapsed or not
         */
        "isActive": boolean;
        /**
          * Open the accordion
         */
        "open": () => Promise<void>;
        /**
          * Bal-Icon of the open trigger button
         */
        "openIcon": string;
        /**
          * Label of the open trigger button
         */
        "openLabel": string;
        /**
          * Triggers the accordion
         */
        "toggle": () => Promise<void>;
        /**
          * Type defines the theme of the accordion toggle
         */
        "type": 'is-primary' | 'is-info';
    }
    interface BalButton {
        /**
          * If `true` the bottom corners get rounded
         */
        "bottomRounded": boolean;
        /**
          * If `true` the button is dense
         */
        "dense": boolean;
        /**
          * If `true` the button is disabled
         */
        "disabled": boolean;
        /**
          * If `true` the button has a full width
         */
        "expanded": boolean;
        /**
          * Name of the left button icon
         */
        "icon": string;
        /**
          * Name of the right button icon
         */
        "iconRight": string;
        /**
          * If `true` the button is inverted
         */
        "inverted": boolean;
        /**
          * If `true` the button has a active theme
         */
        "isActive": boolean;
        /**
          * If `true` the width of the buttons is limited
         */
        "isSquare": boolean;
        /**
          * If `true` the button has a light color
         */
        "light": boolean;
        /**
          * If `true` the label is hidden and a loading spinner is shown instead.
         */
        "loading": boolean;
        /**
          * If `true` the button is outlined
         */
        "outlined": boolean;
        /**
          * Size of the button
         */
        "size": 'is-small' | '';
        /**
          * The theme type of the button. Given by bulma our css framework.
         */
        "type": 'is-primary' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger' | 'is-link';
    }
    interface BalCard {
        /**
          * If `true` a light blue border is added to the card.
         */
        "border": boolean;
        /**
          * If `true` the card loses its shadow.
         */
        "flat": boolean;
        /**
          * If `true` the card background color becomes blue.
         */
        "inverted": boolean;
        /**
          * If `true` the card loses its border radius.
         */
        "square": boolean;
        /**
          * If `true` the card has a limited width on desktop.
         */
        "teaser": boolean;
    }
    interface BalCardActions {
        /**
          * If `true` the buttons start form right to left.
         */
        "right": boolean;
    }
    interface BalCardButton {
        /**
          * Name of the icon like `edit`.
         */
        "icon": string;
    }
    interface BalCardContent {
        /**
          * If `true` the card text color becomes white.
         */
        "inverted": boolean;
    }
    interface BalCardHeading {
    }
    interface BalCardStep {
        /**
          * Tell's if the step is active and the content is visible.
         */
        "active": boolean;
        /**
          * If `true` the step is disabled.
         */
        "disabled": boolean;
        /**
          * If `true` the step is done.
         */
        "done": boolean;
        /**
          * Options of the step like label, value etc.
         */
        "getOptions": () => Promise<BalCardStepOption>;
        /**
          * If `true` the step is hidden in the steps navigation.
         */
        "hidden": boolean;
        /**
          * Label for the step.
         */
        "label": string;
        /**
          * Sets the step active.
         */
        "setActive": (active: boolean) => Promise<void>;
        /**
          * This is the key of the step.
         */
        "value": string;
    }
    interface BalCardSteps {
        /**
          * Label for back button
         */
        "backLabel": string;
        /**
          * If `true` the steps navigation has back button.
         */
        "hasBack": boolean;
        /**
          * If `true` the steps navigation is hidden.
         */
        "hidden": boolean;
        /**
          * If `true` a the style is ready for a dark background.
         */
        "inverted": boolean;
        /**
          * If `true` the navigation is handled by the component
         */
        "navigation": boolean;
        /**
          * Go to tab with the given value
         */
        "select": (step: BalCardStepOption) => Promise<void>;
        /**
          * Hides the navigation circles and adds the step label instead
         */
        "showLabel": boolean;
        "sync": () => Promise<void>;
    }
    interface BalCardSubtitle {
        /**
          * If `true` the card text color becomes white.
         */
        "inverted": boolean;
    }
    interface BalCardTitle {
        /**
          * If `true` the card text color becomes white.
         */
        "inverted": boolean;
    }
    interface BalCheckbox {
        /**
          * The tabindex of the control.
         */
        "balTabindex": number;
        /**
          * If `true`, the checkbox is selected.
         */
        "checked": boolean;
        /**
          * If `true`, the user cannot interact with the checkbox.
         */
        "disabled": boolean;
        /**
          * If `true`, the control works on dark background.
         */
        "inverted": boolean;
        /**
          * The label of the control.
         */
        "label": string;
        /**
          * The name of the control, which is submitted with the form data.
         */
        "name": string;
        /**
          * Sets the focus on the checkbox input element.
         */
        "setFocus": () => Promise<void>;
        /**
          * The value of the control.
         */
        "value": string;
    }
    interface BalData {
        /**
          * If `true` a bottom border is added to the data-item.
         */
        "border": boolean;
        /**
          * If `true` the data list is horizontal instead of vertical.
         */
        "horizontal": boolean;
    }
    interface BalDataItem {
        /**
          * If `true` the item gets a lighter font color.
         */
        "disabled": boolean;
    }
    interface BalDataLabel {
        /**
          * If `true` an asterix is added after the label.
         */
        "required": boolean;
    }
    interface BalDataValue {
    }
    interface BalDatepicker {
        /**
          * The tabindex of the control.
         */
        "balTabindex": number;
        /**
          * Closes the datepicker dropdown after selection
         */
        "closeOnSelect": boolean;
        /**
          * If `true` the component is diabled.
         */
        "disabled": boolean;
        /**
          * If `true` the component uses the whole width.
         */
        "expanded": boolean;
        /**
          * Callback to determine which date in the datepicker should be selectable.
         */
        "filter": BalDateCallback;
        /**
          * Set this to `true` when the component is placed on a dark background.
         */
        "inverted": boolean;
        /**
          * If `true` the component uses the whole width.
         */
        "locale": 'en' | 'de' | 'fr' | 'it';
        /**
          * Latest date available for selection
         */
        "maxDate": Date;
        /**
          * Latest year available for selection
         */
        "maxYearProp": number | undefined;
        /**
          * Earliest date available for selection
         */
        "minDate": Date;
        /**
          * Earliest year available for selection
         */
        "minYearProp": number | undefined;
        /**
          * Defines the placeholder of the input element.
         */
        "placeholder": string;
        /**
          * If `true` the use can only select a date.
         */
        "readonly": boolean;
        /**
          * Selects an option
         */
        "select": (date: Date) => Promise<void>;
        /**
          * If `true` the datepicker only open on click of the icon
         */
        "triggerIcon": boolean;
        /**
          * Selected option value.
         */
        "value": Date;
    }
    interface BalDropdown {
        /**
          * Closes the dropdown menu.
         */
        "close": () => Promise<void>;
        /**
          * If `true` the field spans over the whole width.
         */
        "expanded": boolean;
        /**
          * Returns the `HTMLDivElement` of the content element
         */
        "getContentElement": () => Promise<HTMLDivElement>;
        /**
          * Returns the `HTMLDivElement` of the menu element
         */
        "getMenuElement": () => Promise<HTMLDivElement>;
        /**
          * If `true` the dropdown content is open.
         */
        "isActive": boolean;
        /**
          * Open the dropdown menu.
         */
        "open": () => Promise<void>;
        /**
          * Limit the height of the dropdown content. Pass the amount of pixel.
         */
        "scrollable": number;
        /**
          * Open or closes the dropdown.
         */
        "toggle": () => Promise<void>;
    }
    interface BalField {
        /**
          * If `true` the field loses opacity
         */
        "disabled": boolean;
        /**
          * If `true` the component takes the whole width
         */
        "expanded": boolean;
        /**
          * Baloise icon for the left side of the input
         */
        "iconLeft": string;
        /**
          * Baloise icon for the right side of the input
         */
        "iconRight": string;
        /**
          * If `true` the field can be used on blue background.
         */
        "inverted": boolean;
        /**
          * Text of the inputs label
         */
        "label": string;
        /**
          * If `true` a loading spinner is visible at the end of the input
         */
        "loading": boolean;
        /**
          * If `true` a asterix (*) is added to the label text
         */
        "required": boolean;
        /**
          * Validation message text
         */
        "validationMessage": string;
    }
    interface BalFileUpload {
        /**
          * Accepted MIME-Types like `image/png,image/jpeg`.
         */
        "accept": string;
        /**
          * If `true` the button is disabled
         */
        "disabled": boolean;
        /**
          * Label of the drop area.
         */
        "label": string;
        /**
          * Allowed max bundle size in bytes.
         */
        "maxBundleSize": number;
        /**
          * Allowed max file size in bytes.
         */
        "maxFileSize": number;
        /**
          * Allowed number of files in the bundle.
         */
        "maxFiles": number;
        /**
          * If `true` multiple file upload is possible.
         */
        "multiple": boolean;
    }
    interface BalHint {
        /**
          * Closes the hint box.
         */
        "close": () => Promise<void>;
        /**
          * Text for the close button.
         */
        "closeLabel": string;
        /**
          * If `true`, the user cannot interact with the input.
         */
        "disabled": boolean;
        /**
          * Opens the hint box.
         */
        "open": () => Promise<void>;
        /**
          * Toggles the hint box.
         */
        "toggle": () => Promise<void>;
    }
    interface BalHintText {
    }
    interface BalHintTitle {
    }
    interface BalIcon {
        /**
          * Defines the color of the icon.
         */
        "color": | 'danger'
    | 'warning'
    | 'primary'
    | 'blue'
    | 'success'
    | 'grey'
    | 'white'
    | 'black'
    | 'blue-line'
    | 'blue-light-line'
    | '';
        /**
          * If `true` the icon can be positioned ot the left side of another component
         */
        "isLeft": boolean;
        /**
          * If `true` the icon can be positioned ot the right side of another component
         */
        "isRight": boolean;
        /**
          * The name of the icon without the bal-icon prefix.
         */
        "name": string;
        /**
          * If `true` the icon rotates like for a loading spinner
         */
        "rotate": boolean;
        /**
          * Defines the size of the icon.
         */
        "size": 'small' | 'medium' | 'large' | '';
        /**
          * If `true` the icon is rotated 180deg
         */
        "turn": boolean;
    }
    interface BalInput {
        /**
          * The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.
         */
        "autoComplete": boolean;
        /**
          * The tabindex of the control.
         */
        "balTabindex": number;
        /**
          * If `true` the input gets a clickable cursor style
         */
        "clickable": boolean;
        /**
          * If `true` the input is disabled
         */
        "disabled": boolean;
        /**
          * If `true` this component can be placed on dark background
         */
        "inverted": boolean;
        /**
          * Defines the max length of the value.
         */
        "maxLength": number | undefined;
        /**
          * Defines the min length of the value.
         */
        "minLength": number | undefined;
        /**
          * The name of the control, which is submitted with the form data.
         */
        "name": string;
        /**
          * If `true` on mobile device the number keypad is active
         */
        "numberKeyboard": boolean;
        /**
          * If `true` the input only allows numbers
         */
        "onlyNumbers": boolean;
        /**
          * Placeholder of the input
         */
        "placeholder": string;
        /**
          * If `true` the input is readonly
         */
        "readonly": boolean;
        /**
          * Sets the focus on the input element.
         */
        "setFocus": () => Promise<void>;
        /**
          * Defines the type of the input (text, number, email ...).
         */
        "type": string;
        /**
          * The value of the control.
         */
        "value": string;
    }
    interface BalList {
        /**
          * If `true` each list item has a bottom border
         */
        "border": boolean;
        /**
          * If `true` the list item can be hovered
         */
        "disabled": boolean;
        /**
          * If `true` the list can be used on a dark backround
         */
        "inverted": boolean;
    }
    interface BalListItem {
        /**
          * If `true` the list item can be hovered
         */
        "disabled": boolean;
        /**
          * If `true` the list item has a selected theme
         */
        "selected": boolean;
    }
    interface BalListItemContent {
    }
    interface BalListItemIcon {
        /**
          * If `true` the icon is on the right side of the list item. Default is the left side.
         */
        "right": boolean;
    }
    interface BalListItemSubtitle {
    }
    interface BalListItemTitle {
    }
    interface BalModal {
        /**
          * Marks this modal as card-style modal, i.e. having visual lines separating head, body, and foot.
         */
        "card": boolean;
        "close": () => Promise<void>;
        "open": () => Promise<void>;
    }
    interface BalModalActions {
    }
    interface BalNavbar {
        /**
          * It `true` the navbar has a white background
         */
        "light": boolean;
        /**
          * Defines the link on the logo.
         */
        "logoHref": string;
    }
    interface BalNotification {
        /**
          * Defines the color of the element
         */
        "type": '' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
    }
    interface BalPagination {
        /**
          * Disables component
         */
        "disabled": boolean;
        /**
          * Go to the next page
         */
        "next": () => Promise<void>;
        /**
          * Specify the max visible pages before and after the selected page
         */
        "pageRange": number;
        /**
          * Go to the prvious page
         */
        "previous": () => Promise<void>;
        /**
          * The total amount of pages
         */
        "totalPages": number;
        /**
          * Current selected page
         */
        "value": number;
    }
    interface BalRadio {
        /**
          * The tabindex of the control.
         */
        "balTabindex": number;
        /**
          * If `true`, the radio is selected.
         */
        "checked": boolean;
        /**
          * If `true`, the user cannot interact with the checkbox.
         */
        "disabled": boolean;
        /**
          * Defines the layout of the radio button
         */
        "interface": 'radio' | 'select-button';
        /**
          * If `true`, the control works on dark background.
         */
        "inverted": boolean;
        /**
          * The label of the control.
         */
        "label": string;
        /**
          * The name of the control, which is submitted with the form data.
         */
        "name": string;
        /**
          * Sets the focus on the input element.
         */
        "setFocus": () => Promise<void>;
        /**
          * The value of the control.
         */
        "value": string;
    }
    interface BalRadioGroup {
        /**
          * Defines the layout of the radio button
         */
        "interface": 'radio' | 'select-button';
        /**
          * If `true` the component can be used on dark background
         */
        "inverted": boolean;
        /**
          * The value of the control.
         */
        "value": string;
    }
    interface BalSelect {
        /**
          * The tabindex of the control.
         */
        "balTabindex": number;
        /**
          * Sets the value to null and resets the value of the input.
         */
        "clear": () => Promise<void>;
        /**
          * Closes the dropdown
         */
        "close": () => Promise<void>;
        /**
          * If `true` the component is diabled.
         */
        "disabled": boolean;
        /**
          * If `true` the component uses the whole width.
         */
        "expanded": boolean;
        /**
          * Defines the placeholder of the input filter element.
         */
        "filterPlaceholder": string;
        /**
          * Set this to `true` when the component is placed on a dark background.
         */
        "inverted": boolean;
        /**
          * If `true` the component shows a loading spinner and sets the input to readonly.
         */
        "loading": boolean;
        /**
          * If `true` multiple option can be selected
         */
        "multiple": boolean;
        /**
          * If `true` the filtering of the options is done outside of the component.
         */
        "noFilter": boolean;
        /**
          * Opens the dropdown
         */
        "open": () => Promise<void>;
        /**
          * Defines the placeholder of the input element.
         */
        "placeholder": string;
        /**
          * Defines the height of the dropdown list.
         */
        "scrollable": number;
        /**
          * Selects an option
         */
        "select": (option: BalOptionValue<any>) => Promise<void>;
        /**
          * Sets the focus on the input element
         */
        "setFocus": () => Promise<void>;
        /**
          * *Internal* - Used to update option changes
         */
        "sync": () => Promise<void>;
        /**
          * If `true` the user can search by typing into the input field.
         */
        "typeahead": boolean;
        /**
          * Selected option value.
         */
        "value": string[];
    }
    interface BalSelectOption {
        /**
          * If `true` the option has a checkbox
         */
        "checkbox": boolean;
        /**
          * If `true` the option is focused
         */
        "focused": boolean;
        "getOption": () => Promise<BalOptionValue<any>>;
        /**
          * If `true` the option is hidden
         */
        "hidden": boolean;
        /**
          * Baloise icon as a prefix
         */
        "icon": string;
        /**
          * Label will be shown in the input element when it got selected
         */
        "label": string;
        /**
          * If `true` the option is selected
         */
        "selected": boolean;
        /**
          * The value of the dropdown item. This value will be returned by the parent <bal-dropdown> element.
         */
        "value": string;
    }
    interface BalSpinner {
        /**
          * If `true` the component can be used on dark background
         */
        "inverted": boolean;
        /**
          * If `true` the component is smaller
         */
        "small": boolean;
    }
    interface BalTabItem {
        /**
          * Tell's if the tab is active and the content is visible.
         */
        "active": boolean;
        /**
          * If `true` a small red bubble is added to the tab.
         */
        "bubble": boolean;
        /**
          * If `true` the tab is disabled.
         */
        "disabled": boolean;
        /**
          * If `true` the step is marked as done.
         */
        "done": boolean;
        /**
          * If `true` the step is marked as failed.
         */
        "failed": boolean;
        /**
          * Options of the tab like label, value etc.
         */
        "getOptions": () => Promise<BalTabOption>;
        /**
          * Label for the tab.
         */
        "label": string;
        /**
          * Sets the tab active.
         */
        "setActive": (active: boolean) => Promise<void>;
        /**
          * This is the key of the tab.
         */
        "value": string;
    }
    interface BalTabs {
        /**
          * If `true` a acation button is added to the right
         */
        "action": boolean;
        /**
          * Label for the action button
         */
        "actionLabel": string;
        /**
          * If `true` the padding gets reduced.
         */
        "dense": boolean;
        /**
          * If `true` the field expands over the whole width.
         */
        "expanded": boolean;
        /**
          * Defines the layout of the tabs.
         */
        "interface": 'tabs' | 'steps';
        /**
          * If you want the rounded tab style.
         */
        "rounded": boolean;
        /**
          * Go to tab with the given value
         */
        "select": (tab: BalTabOption) => Promise<void>;
        /**
          * *Internal* Rerenders the tabs with their given settings
         */
        "sync": () => Promise<void>;
    }
    interface BalTag {
        /**
          * The theme type of the tag. Given by bulma our css framework.
         */
        "type": 'is-primary' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger' | '';
    }
    interface BalText {
    }
    interface BalTimeinput {
        /**
          * If `true` the button is disabled
         */
        "disabled": boolean;
        /**
          * If `true` the timeinput can be used on blue background.
         */
        "inverted": boolean;
        /**
          * Latest date available for selection
         */
        "maxTime": string;
        /**
          * Earliest date available for selection
         */
        "minTime": string;
        /**
          * The value of the datepicker with the format `hh:mm`.
         */
        "value": string;
    }
    interface BalToast {
        /**
          * Closes this toast
         */
        "close": () => Promise<void>;
        /**
          * Closes the toast after the given duration in ms
         */
        "closeIn": (duration: number) => Promise<void>;
        /**
          * The theme type of the toast. Given by bulma our css framework.
         */
        "type": 'is-primary' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
    }
}
declare global {
    interface HTMLBalAccordionElement extends Components.BalAccordion, HTMLStencilElement {
    }
    var HTMLBalAccordionElement: {
        prototype: HTMLBalAccordionElement;
        new (): HTMLBalAccordionElement;
    };
    interface HTMLBalButtonElement extends Components.BalButton, HTMLStencilElement {
    }
    var HTMLBalButtonElement: {
        prototype: HTMLBalButtonElement;
        new (): HTMLBalButtonElement;
    };
    interface HTMLBalCardElement extends Components.BalCard, HTMLStencilElement {
    }
    var HTMLBalCardElement: {
        prototype: HTMLBalCardElement;
        new (): HTMLBalCardElement;
    };
    interface HTMLBalCardActionsElement extends Components.BalCardActions, HTMLStencilElement {
    }
    var HTMLBalCardActionsElement: {
        prototype: HTMLBalCardActionsElement;
        new (): HTMLBalCardActionsElement;
    };
    interface HTMLBalCardButtonElement extends Components.BalCardButton, HTMLStencilElement {
    }
    var HTMLBalCardButtonElement: {
        prototype: HTMLBalCardButtonElement;
        new (): HTMLBalCardButtonElement;
    };
    interface HTMLBalCardContentElement extends Components.BalCardContent, HTMLStencilElement {
    }
    var HTMLBalCardContentElement: {
        prototype: HTMLBalCardContentElement;
        new (): HTMLBalCardContentElement;
    };
    interface HTMLBalCardHeadingElement extends Components.BalCardHeading, HTMLStencilElement {
    }
    var HTMLBalCardHeadingElement: {
        prototype: HTMLBalCardHeadingElement;
        new (): HTMLBalCardHeadingElement;
    };
    interface HTMLBalCardStepElement extends Components.BalCardStep, HTMLStencilElement {
    }
    var HTMLBalCardStepElement: {
        prototype: HTMLBalCardStepElement;
        new (): HTMLBalCardStepElement;
    };
    interface HTMLBalCardStepsElement extends Components.BalCardSteps, HTMLStencilElement {
    }
    var HTMLBalCardStepsElement: {
        prototype: HTMLBalCardStepsElement;
        new (): HTMLBalCardStepsElement;
    };
    interface HTMLBalCardSubtitleElement extends Components.BalCardSubtitle, HTMLStencilElement {
    }
    var HTMLBalCardSubtitleElement: {
        prototype: HTMLBalCardSubtitleElement;
        new (): HTMLBalCardSubtitleElement;
    };
    interface HTMLBalCardTitleElement extends Components.BalCardTitle, HTMLStencilElement {
    }
    var HTMLBalCardTitleElement: {
        prototype: HTMLBalCardTitleElement;
        new (): HTMLBalCardTitleElement;
    };
    interface HTMLBalCheckboxElement extends Components.BalCheckbox, HTMLStencilElement {
    }
    var HTMLBalCheckboxElement: {
        prototype: HTMLBalCheckboxElement;
        new (): HTMLBalCheckboxElement;
    };
    interface HTMLBalDataElement extends Components.BalData, HTMLStencilElement {
    }
    var HTMLBalDataElement: {
        prototype: HTMLBalDataElement;
        new (): HTMLBalDataElement;
    };
    interface HTMLBalDataItemElement extends Components.BalDataItem, HTMLStencilElement {
    }
    var HTMLBalDataItemElement: {
        prototype: HTMLBalDataItemElement;
        new (): HTMLBalDataItemElement;
    };
    interface HTMLBalDataLabelElement extends Components.BalDataLabel, HTMLStencilElement {
    }
    var HTMLBalDataLabelElement: {
        prototype: HTMLBalDataLabelElement;
        new (): HTMLBalDataLabelElement;
    };
    interface HTMLBalDataValueElement extends Components.BalDataValue, HTMLStencilElement {
    }
    var HTMLBalDataValueElement: {
        prototype: HTMLBalDataValueElement;
        new (): HTMLBalDataValueElement;
    };
    interface HTMLBalDatepickerElement extends Components.BalDatepicker, HTMLStencilElement {
    }
    var HTMLBalDatepickerElement: {
        prototype: HTMLBalDatepickerElement;
        new (): HTMLBalDatepickerElement;
    };
    interface HTMLBalDropdownElement extends Components.BalDropdown, HTMLStencilElement {
    }
    var HTMLBalDropdownElement: {
        prototype: HTMLBalDropdownElement;
        new (): HTMLBalDropdownElement;
    };
    interface HTMLBalFieldElement extends Components.BalField, HTMLStencilElement {
    }
    var HTMLBalFieldElement: {
        prototype: HTMLBalFieldElement;
        new (): HTMLBalFieldElement;
    };
    interface HTMLBalFileUploadElement extends Components.BalFileUpload, HTMLStencilElement {
    }
    var HTMLBalFileUploadElement: {
        prototype: HTMLBalFileUploadElement;
        new (): HTMLBalFileUploadElement;
    };
    interface HTMLBalHintElement extends Components.BalHint, HTMLStencilElement {
    }
    var HTMLBalHintElement: {
        prototype: HTMLBalHintElement;
        new (): HTMLBalHintElement;
    };
    interface HTMLBalHintTextElement extends Components.BalHintText, HTMLStencilElement {
    }
    var HTMLBalHintTextElement: {
        prototype: HTMLBalHintTextElement;
        new (): HTMLBalHintTextElement;
    };
    interface HTMLBalHintTitleElement extends Components.BalHintTitle, HTMLStencilElement {
    }
    var HTMLBalHintTitleElement: {
        prototype: HTMLBalHintTitleElement;
        new (): HTMLBalHintTitleElement;
    };
    interface HTMLBalIconElement extends Components.BalIcon, HTMLStencilElement {
    }
    var HTMLBalIconElement: {
        prototype: HTMLBalIconElement;
        new (): HTMLBalIconElement;
    };
    interface HTMLBalInputElement extends Components.BalInput, HTMLStencilElement {
    }
    var HTMLBalInputElement: {
        prototype: HTMLBalInputElement;
        new (): HTMLBalInputElement;
    };
    interface HTMLBalListElement extends Components.BalList, HTMLStencilElement {
    }
    var HTMLBalListElement: {
        prototype: HTMLBalListElement;
        new (): HTMLBalListElement;
    };
    interface HTMLBalListItemElement extends Components.BalListItem, HTMLStencilElement {
    }
    var HTMLBalListItemElement: {
        prototype: HTMLBalListItemElement;
        new (): HTMLBalListItemElement;
    };
    interface HTMLBalListItemContentElement extends Components.BalListItemContent, HTMLStencilElement {
    }
    var HTMLBalListItemContentElement: {
        prototype: HTMLBalListItemContentElement;
        new (): HTMLBalListItemContentElement;
    };
    interface HTMLBalListItemIconElement extends Components.BalListItemIcon, HTMLStencilElement {
    }
    var HTMLBalListItemIconElement: {
        prototype: HTMLBalListItemIconElement;
        new (): HTMLBalListItemIconElement;
    };
    interface HTMLBalListItemSubtitleElement extends Components.BalListItemSubtitle, HTMLStencilElement {
    }
    var HTMLBalListItemSubtitleElement: {
        prototype: HTMLBalListItemSubtitleElement;
        new (): HTMLBalListItemSubtitleElement;
    };
    interface HTMLBalListItemTitleElement extends Components.BalListItemTitle, HTMLStencilElement {
    }
    var HTMLBalListItemTitleElement: {
        prototype: HTMLBalListItemTitleElement;
        new (): HTMLBalListItemTitleElement;
    };
    interface HTMLBalModalElement extends Components.BalModal, HTMLStencilElement {
    }
    var HTMLBalModalElement: {
        prototype: HTMLBalModalElement;
        new (): HTMLBalModalElement;
    };
    interface HTMLBalModalActionsElement extends Components.BalModalActions, HTMLStencilElement {
    }
    var HTMLBalModalActionsElement: {
        prototype: HTMLBalModalActionsElement;
        new (): HTMLBalModalActionsElement;
    };
    interface HTMLBalNavbarElement extends Components.BalNavbar, HTMLStencilElement {
    }
    var HTMLBalNavbarElement: {
        prototype: HTMLBalNavbarElement;
        new (): HTMLBalNavbarElement;
    };
    interface HTMLBalNotificationElement extends Components.BalNotification, HTMLStencilElement {
    }
    var HTMLBalNotificationElement: {
        prototype: HTMLBalNotificationElement;
        new (): HTMLBalNotificationElement;
    };
    interface HTMLBalPaginationElement extends Components.BalPagination, HTMLStencilElement {
    }
    var HTMLBalPaginationElement: {
        prototype: HTMLBalPaginationElement;
        new (): HTMLBalPaginationElement;
    };
    interface HTMLBalRadioElement extends Components.BalRadio, HTMLStencilElement {
    }
    var HTMLBalRadioElement: {
        prototype: HTMLBalRadioElement;
        new (): HTMLBalRadioElement;
    };
    interface HTMLBalRadioGroupElement extends Components.BalRadioGroup, HTMLStencilElement {
    }
    var HTMLBalRadioGroupElement: {
        prototype: HTMLBalRadioGroupElement;
        new (): HTMLBalRadioGroupElement;
    };
    interface HTMLBalSelectElement extends Components.BalSelect, HTMLStencilElement {
    }
    var HTMLBalSelectElement: {
        prototype: HTMLBalSelectElement;
        new (): HTMLBalSelectElement;
    };
    interface HTMLBalSelectOptionElement extends Components.BalSelectOption, HTMLStencilElement {
    }
    var HTMLBalSelectOptionElement: {
        prototype: HTMLBalSelectOptionElement;
        new (): HTMLBalSelectOptionElement;
    };
    interface HTMLBalSpinnerElement extends Components.BalSpinner, HTMLStencilElement {
    }
    var HTMLBalSpinnerElement: {
        prototype: HTMLBalSpinnerElement;
        new (): HTMLBalSpinnerElement;
    };
    interface HTMLBalTabItemElement extends Components.BalTabItem, HTMLStencilElement {
    }
    var HTMLBalTabItemElement: {
        prototype: HTMLBalTabItemElement;
        new (): HTMLBalTabItemElement;
    };
    interface HTMLBalTabsElement extends Components.BalTabs, HTMLStencilElement {
    }
    var HTMLBalTabsElement: {
        prototype: HTMLBalTabsElement;
        new (): HTMLBalTabsElement;
    };
    interface HTMLBalTagElement extends Components.BalTag, HTMLStencilElement {
    }
    var HTMLBalTagElement: {
        prototype: HTMLBalTagElement;
        new (): HTMLBalTagElement;
    };
    interface HTMLBalTextElement extends Components.BalText, HTMLStencilElement {
    }
    var HTMLBalTextElement: {
        prototype: HTMLBalTextElement;
        new (): HTMLBalTextElement;
    };
    interface HTMLBalTimeinputElement extends Components.BalTimeinput, HTMLStencilElement {
    }
    var HTMLBalTimeinputElement: {
        prototype: HTMLBalTimeinputElement;
        new (): HTMLBalTimeinputElement;
    };
    interface HTMLBalToastElement extends Components.BalToast, HTMLStencilElement {
    }
    var HTMLBalToastElement: {
        prototype: HTMLBalToastElement;
        new (): HTMLBalToastElement;
    };
    interface HTMLElementTagNameMap {
        "bal-accordion": HTMLBalAccordionElement;
        "bal-button": HTMLBalButtonElement;
        "bal-card": HTMLBalCardElement;
        "bal-card-actions": HTMLBalCardActionsElement;
        "bal-card-button": HTMLBalCardButtonElement;
        "bal-card-content": HTMLBalCardContentElement;
        "bal-card-heading": HTMLBalCardHeadingElement;
        "bal-card-step": HTMLBalCardStepElement;
        "bal-card-steps": HTMLBalCardStepsElement;
        "bal-card-subtitle": HTMLBalCardSubtitleElement;
        "bal-card-title": HTMLBalCardTitleElement;
        "bal-checkbox": HTMLBalCheckboxElement;
        "bal-data": HTMLBalDataElement;
        "bal-data-item": HTMLBalDataItemElement;
        "bal-data-label": HTMLBalDataLabelElement;
        "bal-data-value": HTMLBalDataValueElement;
        "bal-datepicker": HTMLBalDatepickerElement;
        "bal-dropdown": HTMLBalDropdownElement;
        "bal-field": HTMLBalFieldElement;
        "bal-file-upload": HTMLBalFileUploadElement;
        "bal-hint": HTMLBalHintElement;
        "bal-hint-text": HTMLBalHintTextElement;
        "bal-hint-title": HTMLBalHintTitleElement;
        "bal-icon": HTMLBalIconElement;
        "bal-input": HTMLBalInputElement;
        "bal-list": HTMLBalListElement;
        "bal-list-item": HTMLBalListItemElement;
        "bal-list-item-content": HTMLBalListItemContentElement;
        "bal-list-item-icon": HTMLBalListItemIconElement;
        "bal-list-item-subtitle": HTMLBalListItemSubtitleElement;
        "bal-list-item-title": HTMLBalListItemTitleElement;
        "bal-modal": HTMLBalModalElement;
        "bal-modal-actions": HTMLBalModalActionsElement;
        "bal-navbar": HTMLBalNavbarElement;
        "bal-notification": HTMLBalNotificationElement;
        "bal-pagination": HTMLBalPaginationElement;
        "bal-radio": HTMLBalRadioElement;
        "bal-radio-group": HTMLBalRadioGroupElement;
        "bal-select": HTMLBalSelectElement;
        "bal-select-option": HTMLBalSelectOptionElement;
        "bal-spinner": HTMLBalSpinnerElement;
        "bal-tab-item": HTMLBalTabItemElement;
        "bal-tabs": HTMLBalTabsElement;
        "bal-tag": HTMLBalTagElement;
        "bal-text": HTMLBalTextElement;
        "bal-timeinput": HTMLBalTimeinputElement;
        "bal-toast": HTMLBalToastElement;
    }
}
declare namespace LocalJSX {
    interface BalAccordion {
        /**
          * Bal-Icon of the close trigger button
         */
        "closeIcon"?: string;
        /**
          * Label of the close trigger button
         */
        "closeLabel"?: string;
        /**
          * Controls if the accordion is collapsed or not
         */
        "isActive"?: boolean;
        /**
          * Emmited when the accordion has changed
         */
        "onBalCollapse"?: (event: CustomEvent<boolean>) => void;
        /**
          * Bal-Icon of the open trigger button
         */
        "openIcon"?: string;
        /**
          * Label of the open trigger button
         */
        "openLabel"?: string;
        /**
          * Type defines the theme of the accordion toggle
         */
        "type"?: 'is-primary' | 'is-info';
    }
    interface BalButton {
        /**
          * If `true` the bottom corners get rounded
         */
        "bottomRounded"?: boolean;
        /**
          * If `true` the button is dense
         */
        "dense"?: boolean;
        /**
          * If `true` the button is disabled
         */
        "disabled"?: boolean;
        /**
          * If `true` the button has a full width
         */
        "expanded"?: boolean;
        /**
          * Name of the left button icon
         */
        "icon"?: string;
        /**
          * Name of the right button icon
         */
        "iconRight"?: string;
        /**
          * If `true` the button is inverted
         */
        "inverted"?: boolean;
        /**
          * If `true` the button has a active theme
         */
        "isActive"?: boolean;
        /**
          * If `true` the width of the buttons is limited
         */
        "isSquare"?: boolean;
        /**
          * If `true` the button has a light color
         */
        "light"?: boolean;
        /**
          * If `true` the label is hidden and a loading spinner is shown instead.
         */
        "loading"?: boolean;
        /**
          * If `true` the button is outlined
         */
        "outlined"?: boolean;
        /**
          * Size of the button
         */
        "size"?: 'is-small' | '';
        /**
          * The theme type of the button. Given by bulma our css framework.
         */
        "type"?: 'is-primary' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger' | 'is-link';
    }
    interface BalCard {
        /**
          * If `true` a light blue border is added to the card.
         */
        "border"?: boolean;
        /**
          * If `true` the card loses its shadow.
         */
        "flat"?: boolean;
        /**
          * If `true` the card background color becomes blue.
         */
        "inverted"?: boolean;
        /**
          * If `true` the card loses its border radius.
         */
        "square"?: boolean;
        /**
          * If `true` the card has a limited width on desktop.
         */
        "teaser"?: boolean;
    }
    interface BalCardActions {
        /**
          * If `true` the buttons start form right to left.
         */
        "right"?: boolean;
    }
    interface BalCardButton {
        /**
          * Name of the icon like `edit`.
         */
        "icon"?: string;
    }
    interface BalCardContent {
        /**
          * If `true` the card text color becomes white.
         */
        "inverted"?: boolean;
    }
    interface BalCardHeading {
    }
    interface BalCardStep {
        /**
          * Tell's if the step is active and the content is visible.
         */
        "active"?: boolean;
        /**
          * If `true` the step is disabled.
         */
        "disabled"?: boolean;
        /**
          * If `true` the step is done.
         */
        "done"?: boolean;
        /**
          * If `true` the step is hidden in the steps navigation.
         */
        "hidden"?: boolean;
        /**
          * Label for the step.
         */
        "label"?: string;
        /**
          * This is the key of the step.
         */
        "value"?: string;
    }
    interface BalCardSteps {
        /**
          * Label for back button
         */
        "backLabel"?: string;
        /**
          * If `true` the steps navigation has back button.
         */
        "hasBack"?: boolean;
        /**
          * If `true` the steps navigation is hidden.
         */
        "hidden"?: boolean;
        /**
          * If `true` a the style is ready for a dark background.
         */
        "inverted"?: boolean;
        /**
          * If `true` the navigation is handled by the component
         */
        "navigation"?: boolean;
        /**
          * Emitted when the back button is clicked.
         */
        "onBalBackClick"?: (event: CustomEvent<void>) => void;
        /**
          * Emitted when the changes has finished.
         */
        "onBalCardStepChange"?: (event: CustomEvent<BalCardStepOption>) => void;
        /**
          * Emitted when the step circle is clicked.
         */
        "onBalCardStepClick"?: (event: CustomEvent<BalCardStepOption>) => void;
        /**
          * Hides the navigation circles and adds the step label instead
         */
        "showLabel"?: boolean;
    }
    interface BalCardSubtitle {
        /**
          * If `true` the card text color becomes white.
         */
        "inverted"?: boolean;
    }
    interface BalCardTitle {
        /**
          * If `true` the card text color becomes white.
         */
        "inverted"?: boolean;
    }
    interface BalCheckbox {
        /**
          * The tabindex of the control.
         */
        "balTabindex"?: number;
        /**
          * If `true`, the checkbox is selected.
         */
        "checked"?: boolean;
        /**
          * If `true`, the user cannot interact with the checkbox.
         */
        "disabled"?: boolean;
        /**
          * If `true`, the control works on dark background.
         */
        "inverted"?: boolean;
        /**
          * The label of the control.
         */
        "label"?: string;
        /**
          * The name of the control, which is submitted with the form data.
         */
        "name"?: string;
        /**
          * Emitted when the toggle loses focus.
         */
        "onBalBlur"?: (event: CustomEvent<void>) => void;
        /**
          * Emitted when the checked property has changed.
         */
        "onBalChange"?: (event: CustomEvent<boolean>) => void;
        /**
          * Emitted when the toggle has focus.
         */
        "onBalFocus"?: (event: CustomEvent<void>) => void;
        /**
          * The value of the control.
         */
        "value"?: string;
    }
    interface BalData {
        /**
          * If `true` a bottom border is added to the data-item.
         */
        "border"?: boolean;
        /**
          * If `true` the data list is horizontal instead of vertical.
         */
        "horizontal"?: boolean;
    }
    interface BalDataItem {
        /**
          * If `true` the item gets a lighter font color.
         */
        "disabled"?: boolean;
    }
    interface BalDataLabel {
        /**
          * If `true` an asterix is added after the label.
         */
        "required"?: boolean;
    }
    interface BalDataValue {
    }
    interface BalDatepicker {
        /**
          * The tabindex of the control.
         */
        "balTabindex"?: number;
        /**
          * Closes the datepicker dropdown after selection
         */
        "closeOnSelect"?: boolean;
        /**
          * If `true` the component is diabled.
         */
        "disabled"?: boolean;
        /**
          * If `true` the component uses the whole width.
         */
        "expanded"?: boolean;
        /**
          * Callback to determine which date in the datepicker should be selectable.
         */
        "filter"?: BalDateCallback;
        /**
          * Set this to `true` when the component is placed on a dark background.
         */
        "inverted"?: boolean;
        /**
          * If `true` the component uses the whole width.
         */
        "locale"?: 'en' | 'de' | 'fr' | 'it';
        /**
          * Latest date available for selection
         */
        "maxDate"?: Date;
        /**
          * Latest year available for selection
         */
        "maxYearProp"?: number | undefined;
        /**
          * Earliest date available for selection
         */
        "minDate"?: Date;
        /**
          * Earliest year available for selection
         */
        "minYearProp"?: number | undefined;
        /**
          * Emitted when the input loses focus.
         */
        "onBalBlur"?: (event: CustomEvent<FocusEvent>) => void;
        /**
          * Emitted when a option got selected.
         */
        "onBalChange"?: (event: CustomEvent<any>) => void;
        /**
          * Emitted when the input has focus.
         */
        "onBalFocus"?: (event: CustomEvent<FocusEvent>) => void;
        /**
          * Emitted when a keyboard input occurred.
         */
        "onBalInput"?: (event: CustomEvent<string>) => void;
        /**
          * Defines the placeholder of the input element.
         */
        "placeholder"?: string;
        /**
          * If `true` the use can only select a date.
         */
        "readonly"?: boolean;
        /**
          * If `true` the datepicker only open on click of the icon
         */
        "triggerIcon"?: boolean;
        /**
          * Selected option value.
         */
        "value"?: Date;
    }
    interface BalDropdown {
        /**
          * If `true` the field spans over the whole width.
         */
        "expanded"?: boolean;
        /**
          * If `true` the dropdown content is open.
         */
        "isActive"?: boolean;
        /**
          * Listen when the dropdown opens or closes. Returns the current `isActive` value.
         */
        "onBalCollapse"?: (event: CustomEvent<boolean>) => void;
        /**
          * Internal
         */
        "onBalDropdownPrepare"?: (event: CustomEvent<string>) => void;
        /**
          * Limit the height of the dropdown content. Pass the amount of pixel.
         */
        "scrollable"?: number;
    }
    interface BalField {
        /**
          * If `true` the field loses opacity
         */
        "disabled"?: boolean;
        /**
          * If `true` the component takes the whole width
         */
        "expanded"?: boolean;
        /**
          * Baloise icon for the left side of the input
         */
        "iconLeft"?: string;
        /**
          * Baloise icon for the right side of the input
         */
        "iconRight"?: string;
        /**
          * If `true` the field can be used on blue background.
         */
        "inverted"?: boolean;
        /**
          * Text of the inputs label
         */
        "label"?: string;
        /**
          * If `true` a loading spinner is visible at the end of the input
         */
        "loading"?: boolean;
        /**
          * If `true` a asterix (*) is added to the label text
         */
        "required"?: boolean;
        /**
          * Validation message text
         */
        "validationMessage"?: string;
    }
    interface BalFileUpload {
        /**
          * Accepted MIME-Types like `image/png,image/jpeg`.
         */
        "accept"?: string;
        /**
          * If `true` the button is disabled
         */
        "disabled"?: boolean;
        /**
          * Label of the drop area.
         */
        "label"?: string;
        /**
          * Allowed max bundle size in bytes.
         */
        "maxBundleSize"?: number;
        /**
          * Allowed max file size in bytes.
         */
        "maxFileSize"?: number;
        /**
          * Allowed number of files in the bundle.
         */
        "maxFiles"?: number;
        /**
          * If `true` multiple file upload is possible.
         */
        "multiple"?: boolean;
        /**
          * Triggers when a file is added or removed.
         */
        "onBalChange"?: (event: CustomEvent<File[]>) => void;
        /**
          * Triggers when a file is rejected due to not allowed MIME-Type and so on.
         */
        "onBalRejectedFile"?: (event: CustomEvent<FileUploadRejectedFile>) => void;
    }
    interface BalHint {
        /**
          * Text for the close button.
         */
        "closeLabel"?: string;
        /**
          * If `true`, the user cannot interact with the input.
         */
        "disabled"?: boolean;
    }
    interface BalHintText {
    }
    interface BalHintTitle {
    }
    interface BalIcon {
        /**
          * Defines the color of the icon.
         */
        "color"?: | 'danger'
    | 'warning'
    | 'primary'
    | 'blue'
    | 'success'
    | 'grey'
    | 'white'
    | 'black'
    | 'blue-line'
    | 'blue-light-line'
    | '';
        /**
          * If `true` the icon can be positioned ot the left side of another component
         */
        "isLeft"?: boolean;
        /**
          * If `true` the icon can be positioned ot the right side of another component
         */
        "isRight"?: boolean;
        /**
          * The name of the icon without the bal-icon prefix.
         */
        "name"?: string;
        /**
          * If `true` the icon rotates like for a loading spinner
         */
        "rotate"?: boolean;
        /**
          * Defines the size of the icon.
         */
        "size"?: 'small' | 'medium' | 'large' | '';
        /**
          * If `true` the icon is rotated 180deg
         */
        "turn"?: boolean;
    }
    interface BalInput {
        /**
          * The autocomplete attribute specifies whether or not an input field should have autocomplete enabled.
         */
        "autoComplete"?: boolean;
        /**
          * The tabindex of the control.
         */
        "balTabindex"?: number;
        /**
          * If `true` the input gets a clickable cursor style
         */
        "clickable"?: boolean;
        /**
          * If `true` the input is disabled
         */
        "disabled"?: boolean;
        /**
          * If `true` this component can be placed on dark background
         */
        "inverted"?: boolean;
        /**
          * Defines the max length of the value.
         */
        "maxLength"?: number | undefined;
        /**
          * Defines the min length of the value.
         */
        "minLength"?: number | undefined;
        /**
          * The name of the control, which is submitted with the form data.
         */
        "name"?: string;
        /**
          * If `true` on mobile device the number keypad is active
         */
        "numberKeyboard"?: boolean;
        /**
          * Emitted when a keyboard input occurred.
         */
        "onBalBlur"?: (event: CustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the input has clicked.
         */
        "onBalClick"?: (event: CustomEvent<MouseEvent>) => void;
        /**
          * Emitted when the input has focus.
         */
        "onBalFocus"?: (event: CustomEvent<FocusEvent>) => void;
        /**
          * Emitted when a keyboard input occurred.
         */
        "onBalInput"?: (event: CustomEvent<string>) => void;
        /**
          * Emitted when a keyboard key has pressed.
         */
        "onBalKeyPress"?: (event: CustomEvent<KeyboardEvent>) => void;
        /**
          * If `true` the input only allows numbers
         */
        "onlyNumbers"?: boolean;
        /**
          * Placeholder of the input
         */
        "placeholder"?: string;
        /**
          * If `true` the input is readonly
         */
        "readonly"?: boolean;
        /**
          * Defines the type of the input (text, number, email ...).
         */
        "type"?: string;
        /**
          * The value of the control.
         */
        "value"?: string;
    }
    interface BalList {
        /**
          * If `true` each list item has a bottom border
         */
        "border"?: boolean;
        /**
          * If `true` the list item can be hovered
         */
        "disabled"?: boolean;
        /**
          * If `true` the list can be used on a dark backround
         */
        "inverted"?: boolean;
    }
    interface BalListItem {
        /**
          * If `true` the list item can be hovered
         */
        "disabled"?: boolean;
        /**
          * If `true` the list item has a selected theme
         */
        "selected"?: boolean;
    }
    interface BalListItemContent {
    }
    interface BalListItemIcon {
        /**
          * If `true` the icon is on the right side of the list item. Default is the left side.
         */
        "right"?: boolean;
    }
    interface BalListItemSubtitle {
    }
    interface BalListItemTitle {
    }
    interface BalModal {
        /**
          * Marks this modal as card-style modal, i.e. having visual lines separating head, body, and foot.
         */
        "card"?: boolean;
    }
    interface BalModalActions {
    }
    interface BalNavbar {
        /**
          * It `true` the navbar has a white background
         */
        "light"?: boolean;
        /**
          * Defines the link on the logo.
         */
        "logoHref"?: string;
    }
    interface BalNotification {
        /**
          * Defines the color of the element
         */
        "type"?: '' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
    }
    interface BalPagination {
        /**
          * Disables component
         */
        "disabled"?: boolean;
        /**
          * Triggers when a page change happens
         */
        "onBalChange"?: (event: CustomEvent<number>) => void;
        /**
          * Specify the max visible pages before and after the selected page
         */
        "pageRange"?: number;
        /**
          * The total amount of pages
         */
        "totalPages"?: number;
        /**
          * Current selected page
         */
        "value"?: number;
    }
    interface BalRadio {
        /**
          * The tabindex of the control.
         */
        "balTabindex"?: number;
        /**
          * If `true`, the radio is selected.
         */
        "checked"?: boolean;
        /**
          * If `true`, the user cannot interact with the checkbox.
         */
        "disabled"?: boolean;
        /**
          * Defines the layout of the radio button
         */
        "interface"?: 'radio' | 'select-button';
        /**
          * If `true`, the control works on dark background.
         */
        "inverted"?: boolean;
        /**
          * The label of the control.
         */
        "label"?: string;
        /**
          * The name of the control, which is submitted with the form data.
         */
        "name"?: string;
        /**
          * Emitted when the toggle loses focus.
         */
        "onBalBlur"?: (event: CustomEvent<void>) => void;
        /**
          * Emitted when the toggle has focus.
         */
        "onBalFocus"?: (event: CustomEvent<void>) => void;
        /**
          * The value of the control.
         */
        "value"?: string;
    }
    interface BalRadioGroup {
        /**
          * Defines the layout of the radio button
         */
        "interface"?: 'radio' | 'select-button';
        /**
          * If `true` the component can be used on dark background
         */
        "inverted"?: boolean;
        /**
          * Emitted when the checked property has changed.
         */
        "onBalChange"?: (event: CustomEvent<string>) => void;
        /**
          * The value of the control.
         */
        "value"?: string;
    }
    interface BalSelect {
        /**
          * The tabindex of the control.
         */
        "balTabindex"?: number;
        /**
          * If `true` the component is diabled.
         */
        "disabled"?: boolean;
        /**
          * If `true` the component uses the whole width.
         */
        "expanded"?: boolean;
        /**
          * Defines the placeholder of the input filter element.
         */
        "filterPlaceholder"?: string;
        /**
          * Set this to `true` when the component is placed on a dark background.
         */
        "inverted"?: boolean;
        /**
          * If `true` the component shows a loading spinner and sets the input to readonly.
         */
        "loading"?: boolean;
        /**
          * If `true` multiple option can be selected
         */
        "multiple"?: boolean;
        /**
          * If `true` the filtering of the options is done outside of the component.
         */
        "noFilter"?: boolean;
        /**
          * Emitted when the input loses focus.
         */
        "onBalBlur"?: (event: CustomEvent<FocusEvent>) => void;
        /**
          * Emitted when the user cancels the input.
         */
        "onBalCancel"?: (event: CustomEvent<KeyboardEvent>) => void;
        /**
          * Emitted when a option got selected.
         */
        "onBalChange"?: (event: CustomEvent<string[]>) => void;
        /**
          * Emitted when the input got clicked.
         */
        "onBalClick"?: (event: CustomEvent<MouseEvent>) => void;
        /**
          * Emitted when the input has focus.
         */
        "onBalFocus"?: (event: CustomEvent<FocusEvent>) => void;
        /**
          * Emitted when a keyboard input occurred.
         */
        "onBalInput"?: (event: CustomEvent<string>) => void;
        /**
          * Emitted when the input has focus and key from the keyboard go hit.
         */
        "onBalKeyPress"?: (event: CustomEvent<KeyboardEvent>) => void;
        /**
          * Defines the placeholder of the input element.
         */
        "placeholder"?: string;
        /**
          * Defines the height of the dropdown list.
         */
        "scrollable"?: number;
        /**
          * If `true` the user can search by typing into the input field.
         */
        "typeahead"?: boolean;
        /**
          * Selected option value.
         */
        "value"?: string[];
    }
    interface BalSelectOption {
        /**
          * If `true` the option has a checkbox
         */
        "checkbox"?: boolean;
        /**
          * If `true` the option is focused
         */
        "focused"?: boolean;
        /**
          * If `true` the option is hidden
         */
        "hidden"?: boolean;
        /**
          * Baloise icon as a prefix
         */
        "icon"?: string;
        /**
          * Label will be shown in the input element when it got selected
         */
        "label"?: string;
        /**
          * If `true` the option is selected
         */
        "selected"?: boolean;
        /**
          * The value of the dropdown item. This value will be returned by the parent <bal-dropdown> element.
         */
        "value"?: string;
    }
    interface BalSpinner {
        /**
          * If `true` the component can be used on dark background
         */
        "inverted"?: boolean;
        /**
          * If `true` the component is smaller
         */
        "small"?: boolean;
    }
    interface BalTabItem {
        /**
          * Tell's if the tab is active and the content is visible.
         */
        "active"?: boolean;
        /**
          * If `true` a small red bubble is added to the tab.
         */
        "bubble"?: boolean;
        /**
          * If `true` the tab is disabled.
         */
        "disabled"?: boolean;
        /**
          * If `true` the step is marked as done.
         */
        "done"?: boolean;
        /**
          * If `true` the step is marked as failed.
         */
        "failed"?: boolean;
        /**
          * Label for the tab.
         */
        "label"?: string;
        /**
          * This is the key of the tab.
         */
        "value"?: string;
    }
    interface BalTabs {
        /**
          * If `true` a acation button is added to the right
         */
        "action"?: boolean;
        /**
          * Label for the action button
         */
        "actionLabel"?: string;
        /**
          * If `true` the padding gets reduced.
         */
        "dense"?: boolean;
        /**
          * If `true` the field expands over the whole width.
         */
        "expanded"?: boolean;
        /**
          * Defines the layout of the tabs.
         */
        "interface"?: 'tabs' | 'steps';
        /**
          * Emitted when the action button has clicked
         */
        "onBalActionClick"?: (event: CustomEvent<MouseEvent>) => void;
        /**
          * Emitted when the changes has finished.
         */
        "onBalTabChange"?: (event: CustomEvent<BalTabOption>) => void;
        /**
          * If you want the rounded tab style.
         */
        "rounded"?: boolean;
    }
    interface BalTag {
        /**
          * The theme type of the tag. Given by bulma our css framework.
         */
        "type"?: 'is-primary' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger' | '';
    }
    interface BalText {
    }
    interface BalTimeinput {
        /**
          * If `true` the button is disabled
         */
        "disabled"?: boolean;
        /**
          * If `true` the timeinput can be used on blue background.
         */
        "inverted"?: boolean;
        /**
          * Latest date available for selection
         */
        "maxTime"?: string;
        /**
          * Earliest date available for selection
         */
        "minTime"?: string;
        /**
          * Emitted when either the hour or minute input field loses focus.
         */
        "onBalBlur"?: (event: CustomEvent<void>) => void;
        /**
          * Emitted when either the hour or the minute input has changed. It will not be triggert if either hour or time input has never been set (i.e. "--" is selected).
         */
        "onBalChange"?: (event: CustomEvent<string>) => void;
        /**
          * The value of the datepicker with the format `hh:mm`.
         */
        "value"?: string;
    }
    interface BalToast {
        /**
          * The theme type of the toast. Given by bulma our css framework.
         */
        "type"?: 'is-primary' | 'is-info' | 'is-success' | 'is-warning' | 'is-danger';
    }
    interface IntrinsicElements {
        "bal-accordion": BalAccordion;
        "bal-button": BalButton;
        "bal-card": BalCard;
        "bal-card-actions": BalCardActions;
        "bal-card-button": BalCardButton;
        "bal-card-content": BalCardContent;
        "bal-card-heading": BalCardHeading;
        "bal-card-step": BalCardStep;
        "bal-card-steps": BalCardSteps;
        "bal-card-subtitle": BalCardSubtitle;
        "bal-card-title": BalCardTitle;
        "bal-checkbox": BalCheckbox;
        "bal-data": BalData;
        "bal-data-item": BalDataItem;
        "bal-data-label": BalDataLabel;
        "bal-data-value": BalDataValue;
        "bal-datepicker": BalDatepicker;
        "bal-dropdown": BalDropdown;
        "bal-field": BalField;
        "bal-file-upload": BalFileUpload;
        "bal-hint": BalHint;
        "bal-hint-text": BalHintText;
        "bal-hint-title": BalHintTitle;
        "bal-icon": BalIcon;
        "bal-input": BalInput;
        "bal-list": BalList;
        "bal-list-item": BalListItem;
        "bal-list-item-content": BalListItemContent;
        "bal-list-item-icon": BalListItemIcon;
        "bal-list-item-subtitle": BalListItemSubtitle;
        "bal-list-item-title": BalListItemTitle;
        "bal-modal": BalModal;
        "bal-modal-actions": BalModalActions;
        "bal-navbar": BalNavbar;
        "bal-notification": BalNotification;
        "bal-pagination": BalPagination;
        "bal-radio": BalRadio;
        "bal-radio-group": BalRadioGroup;
        "bal-select": BalSelect;
        "bal-select-option": BalSelectOption;
        "bal-spinner": BalSpinner;
        "bal-tab-item": BalTabItem;
        "bal-tabs": BalTabs;
        "bal-tag": BalTag;
        "bal-text": BalText;
        "bal-timeinput": BalTimeinput;
        "bal-toast": BalToast;
    }
}
export { LocalJSX as JSX };
declare module "@stencil/core" {
    export namespace JSX {
        interface IntrinsicElements {
            "bal-accordion": LocalJSX.BalAccordion & JSXBase.HTMLAttributes<HTMLBalAccordionElement>;
            "bal-button": LocalJSX.BalButton & JSXBase.HTMLAttributes<HTMLBalButtonElement>;
            "bal-card": LocalJSX.BalCard & JSXBase.HTMLAttributes<HTMLBalCardElement>;
            "bal-card-actions": LocalJSX.BalCardActions & JSXBase.HTMLAttributes<HTMLBalCardActionsElement>;
            "bal-card-button": LocalJSX.BalCardButton & JSXBase.HTMLAttributes<HTMLBalCardButtonElement>;
            "bal-card-content": LocalJSX.BalCardContent & JSXBase.HTMLAttributes<HTMLBalCardContentElement>;
            "bal-card-heading": LocalJSX.BalCardHeading & JSXBase.HTMLAttributes<HTMLBalCardHeadingElement>;
            "bal-card-step": LocalJSX.BalCardStep & JSXBase.HTMLAttributes<HTMLBalCardStepElement>;
            "bal-card-steps": LocalJSX.BalCardSteps & JSXBase.HTMLAttributes<HTMLBalCardStepsElement>;
            "bal-card-subtitle": LocalJSX.BalCardSubtitle & JSXBase.HTMLAttributes<HTMLBalCardSubtitleElement>;
            "bal-card-title": LocalJSX.BalCardTitle & JSXBase.HTMLAttributes<HTMLBalCardTitleElement>;
            "bal-checkbox": LocalJSX.BalCheckbox & JSXBase.HTMLAttributes<HTMLBalCheckboxElement>;
            "bal-data": LocalJSX.BalData & JSXBase.HTMLAttributes<HTMLBalDataElement>;
            "bal-data-item": LocalJSX.BalDataItem & JSXBase.HTMLAttributes<HTMLBalDataItemElement>;
            "bal-data-label": LocalJSX.BalDataLabel & JSXBase.HTMLAttributes<HTMLBalDataLabelElement>;
            "bal-data-value": LocalJSX.BalDataValue & JSXBase.HTMLAttributes<HTMLBalDataValueElement>;
            "bal-datepicker": LocalJSX.BalDatepicker & JSXBase.HTMLAttributes<HTMLBalDatepickerElement>;
            "bal-dropdown": LocalJSX.BalDropdown & JSXBase.HTMLAttributes<HTMLBalDropdownElement>;
            "bal-field": LocalJSX.BalField & JSXBase.HTMLAttributes<HTMLBalFieldElement>;
            "bal-file-upload": LocalJSX.BalFileUpload & JSXBase.HTMLAttributes<HTMLBalFileUploadElement>;
            "bal-hint": LocalJSX.BalHint & JSXBase.HTMLAttributes<HTMLBalHintElement>;
            "bal-hint-text": LocalJSX.BalHintText & JSXBase.HTMLAttributes<HTMLBalHintTextElement>;
            "bal-hint-title": LocalJSX.BalHintTitle & JSXBase.HTMLAttributes<HTMLBalHintTitleElement>;
            "bal-icon": LocalJSX.BalIcon & JSXBase.HTMLAttributes<HTMLBalIconElement>;
            "bal-input": LocalJSX.BalInput & JSXBase.HTMLAttributes<HTMLBalInputElement>;
            "bal-list": LocalJSX.BalList & JSXBase.HTMLAttributes<HTMLBalListElement>;
            "bal-list-item": LocalJSX.BalListItem & JSXBase.HTMLAttributes<HTMLBalListItemElement>;
            "bal-list-item-content": LocalJSX.BalListItemContent & JSXBase.HTMLAttributes<HTMLBalListItemContentElement>;
            "bal-list-item-icon": LocalJSX.BalListItemIcon & JSXBase.HTMLAttributes<HTMLBalListItemIconElement>;
            "bal-list-item-subtitle": LocalJSX.BalListItemSubtitle & JSXBase.HTMLAttributes<HTMLBalListItemSubtitleElement>;
            "bal-list-item-title": LocalJSX.BalListItemTitle & JSXBase.HTMLAttributes<HTMLBalListItemTitleElement>;
            "bal-modal": LocalJSX.BalModal & JSXBase.HTMLAttributes<HTMLBalModalElement>;
            "bal-modal-actions": LocalJSX.BalModalActions & JSXBase.HTMLAttributes<HTMLBalModalActionsElement>;
            "bal-navbar": LocalJSX.BalNavbar & JSXBase.HTMLAttributes<HTMLBalNavbarElement>;
            "bal-notification": LocalJSX.BalNotification & JSXBase.HTMLAttributes<HTMLBalNotificationElement>;
            "bal-pagination": LocalJSX.BalPagination & JSXBase.HTMLAttributes<HTMLBalPaginationElement>;
            "bal-radio": LocalJSX.BalRadio & JSXBase.HTMLAttributes<HTMLBalRadioElement>;
            "bal-radio-group": LocalJSX.BalRadioGroup & JSXBase.HTMLAttributes<HTMLBalRadioGroupElement>;
            "bal-select": LocalJSX.BalSelect & JSXBase.HTMLAttributes<HTMLBalSelectElement>;
            "bal-select-option": LocalJSX.BalSelectOption & JSXBase.HTMLAttributes<HTMLBalSelectOptionElement>;
            "bal-spinner": LocalJSX.BalSpinner & JSXBase.HTMLAttributes<HTMLBalSpinnerElement>;
            "bal-tab-item": LocalJSX.BalTabItem & JSXBase.HTMLAttributes<HTMLBalTabItemElement>;
            "bal-tabs": LocalJSX.BalTabs & JSXBase.HTMLAttributes<HTMLBalTabsElement>;
            "bal-tag": LocalJSX.BalTag & JSXBase.HTMLAttributes<HTMLBalTagElement>;
            "bal-text": LocalJSX.BalText & JSXBase.HTMLAttributes<HTMLBalTextElement>;
            "bal-timeinput": LocalJSX.BalTimeinput & JSXBase.HTMLAttributes<HTMLBalTimeinputElement>;
            "bal-toast": LocalJSX.BalToast & JSXBase.HTMLAttributes<HTMLBalToastElement>;
        }
    }
}
