/* 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.core';
import {
  AlertOpts,
} from './components/alert-controller/alert-opts';
import {
  Sort,
} from './components/datatable/sort';
import {
  DialogAction,
} from './components/dialog/dialog-action';
import {
  DialogOpts,
} from './components/dialog-controller/dialog-opts';
import {
  AnchorMargin,
} from './components/menu/anchor-margin';
import {
  SnackBarOptions,
} from './components/snackbar/SnackbarOptions';

export namespace Components {
  interface MaterialsAlertController {
    /**
    * Create a HTMLMaterialsDialogElement and returns it
    */
    'create': (opts: AlertOpts) => Promise<HTMLMaterialsDialogElement>;
  }
  interface MaterialsAutocomplete {
    /**
    * Function of autocompletion to pass to the element called during onInput of the text-field
    */
    'autocomplete': (search: string) => Promise<Map<string, string>>;
    /**
    * Apply low density on the element
    */
    'dense': boolean;
    /**
    * Label of the autocomplete
    */
    'label': string;
    /**
    * Limits the number of suggestions displayed in list
    */
    'maxSuggestions': number;
    /**
    * Adds an icon at the end of the text field
    */
    'trailingIcon': string;
    /**
    * Value of the autocomplete text-field composed by a label to be displayed in the text-field and a value that is a real value if no label given, label = value
    */
    'value': {label?: string, value: string};
  }
  interface MaterialsButton {
    /**
    * Render a block Material button (Full width)
    */
    'block': boolean;
    /**
    * The button color, it can be either : - a predifined value : 'primary', 'secondary', 'error'. - an hexa color code : #225566, #CCC. - a css named color : red, blue.
    */
    'color': 'primary' | 'secondary' | 'error' | string;
    /**
    * Render a dense Material button ()
    */
    'dense': boolean;
    /**
    * Disable the button
    */
    'disabled': boolean;
    /**
    * A material icon name
    */
    'icon'?: string;
    /**
    * Render an outlined Material button
    */
    'outlined': boolean;
    /**
    * Render a raised Material button
    */
    'raised': boolean;
    /**
    * The button type
    */
    'type': 'button' | 'submit' | 'reset';
    /**
    * Render an unelevated Material button
    */
    'unelevated': boolean;
  }
  interface MaterialsCard {
    /**
    * Set Card title
    */
    'cardTitle': string;
    /**
    * Set Card shadow elevation
    */
    'elevation': number;
    /**
    * Set Card height
    */
    'height': string;
    /**
    * Set Card max height
    */
    'maxHeight': string;
    /**
    * Function executed when click on card
    */
    'onAction': Function;
    /**
    * Set Card padding
    */
    'padding': number;
    /**
    * Set Card width
    */
    'width': string;
  }
  interface MaterialsCardAction {
    /**
    * Set true to render this action as a single action button taking up the entire width of the action row Use if you have only one card action
    */
    'fullBleed': false;
    /**
    * Use an icon for this action
    */
    'icon': string;
    /**
    * The action label. If an icon is provided, it will be render as a title
    */
    'label': string;
    /**
    * Function triggered after this action is pressed
    */
    'onAction': Function;
  }
  interface MaterialsCardContent {}
  interface MaterialsCheckbox {
    /**
    * If a label is provided, where should it be aligned ?
    */
    'alignLabel': 'left' | 'right';
    /**
    * Mark the checkbox as checked
    */
    'checked': boolean;
    /**
    * Color of the checkbox
    */
    'color': 'primary' | 'accent' | 'secondary' | 'danger' | string;
    /**
    * Mark the checkbox as disabled
    */
    'disabled': boolean;
    /**
    * Make the checkbox appear indeterminate
    */
    'indeterminate': boolean;
    /**
    * The checkbox label (Optionnal)
    */
    'label'?: string;
    /**
    * Checkbox name
    */
    'name': string;
    /**
    * The checkbox value
    */
    'value': string | number;
  }
  interface MaterialsChip {
    /**
    * The chip background color, it can be either : - a predifined value : 'primary', 'secondary'. - an hexa color code : #225566, #CCC. - a css named color : red, blue.
    */
    'color': 'primary' | 'secondary' | string;
    /**
    * The chip text color, it can be either : - a predifined value : 'primary', 'secondary'. - an hexa color code : #225566, #CCC. - a css named color : red, blue.
    */
    'inkColor': 'primary' | 'secondary' | string;
  }
  interface MaterialsDatatable {
    /**
    * Set the color scheme for the datatable
    */
    'color': 'primary' | 'secondary';
    /**
    * Apply low density on the element
    */
    'dense': boolean;
    /**
    * Apply odd style to the element
    */
    'oddEvenStyle': boolean;
  }
  interface MaterialsDatatableAction {
    /**
    * The datatable-action color, it can be either : - a predifined value : 'primary', 'secondary', 'error'. - an hexa color code : #225566, #CCC. - a css named color : red, blue.
    */
    'color': 'primary' | 'secondary' | 'error' | string;
    /**
    * Mark this datatable action as displayed
    */
    'display': boolean;
    /**
    * Render an icon (from material-icons library)
    */
    'icon': string;
    /**
    * The datatable action label
    */
    'label': string;
    /**
    * Trigger a press event
    */
    'press': (e: any) => Promise<void>;
  }
  interface MaterialsDatatableBody {}
  interface MaterialsDatatableBodyCell {
    'align': 'start' | 'end' | 'center';
    'width': string;
  }
  interface MaterialsDatatableBodyRow {
    'dense': boolean;
    'expendable': boolean;
    'expended': boolean;
    'selectable': boolean;
    'selected': boolean;
  }
  interface MaterialsDatatableFooter {
    'color': 'primary' | 'secondary';
  }
  interface MaterialsDatatableHeader {
    'color': 'primary' | 'secondary';
    'selectable': boolean;
    'selected': boolean;
  }
  interface MaterialsDatatableHeaderColumn {
    'align': 'start' | 'end' | 'center';
    'description': string;
    'label': string;
    'sortable': boolean;
    'sorted': boolean;
    'value': string;
    'width': string;
  }
  interface MaterialsDatatablePagination {
    'currentPage': number;
    'first': number;
    'last': number;
    'size': number;
    'total': number;
  }
  interface MaterialsDateField {
    /**
    * Provide a custom validation function to this time-field. In case of error, the promise should return a message with the error message to display
    */
    'customValidation': () => Promise<string>;
    /**
    * Display a datepicker when clicking on the date-field
    */
    'datepicker': boolean;
    /**
    * The datepicker has a month navigation bar
    */
    'datepickerMonthPicker': boolean;
    /**
    * The datepicker has a today button
    */
    'datepickerTodayPicker': boolean;
    /**
    * The datepicker has a year navigation bar
    */
    'datepickerYearPicker': boolean;
    /**
    * Styles the date field as a dense text field.
    */
    'dense': boolean;
    /**
    * Styles the date field as a disabled text field.
    */
    'disabled': boolean;
    /**
    * Styles the date field as a text field in focus.
    */
    'focused': boolean;
    'forceValidation': () => Promise<void>;
    /**
    * Styles the date field as a full width text field. Warning : do not use with outlined
    */
    'fullwidth': boolean;
    /**
    * Add an helper text to this date field
    */
    'helperText': string;
    'isValid': () => Promise<boolean>;
    /**
    * The date field label.
    */
    'label': string;
    /**
    * Add a leading icon to ths date field. You have to pass a material icon name
    */
    'leadingIcon': string;
    /**
    * Render an outlined date field
    */
    'outlined': boolean;
    /**
    * Set the helper text persistant (appears on focus otherwise)
    */
    'persistent': boolean;
    /**
    * Mark this date field as required
    */
    'required': boolean;
    /**
    * The date field value
    */
    'value': any;
    /**
    * The date field width
    */
    'width': number;
  }
  interface MaterialsDatepicker {
    /**
    * Used to highlight a time period such as : from Monday to Sunday
    */
    'dateRange': { start: Date, end: Date };
    /**
    * Used to display current selected date
    */
    'dateSelected': Date;
    /**
    * Display month picker on the element
    */
    'monthPicker': boolean;
    /**
    * Display button to empty value of the element
    */
    'nullable': boolean;
    /**
    * Display button for selecting today's date
    */
    'todayPicker': boolean;
    /**
    * Display year picker on the element
    */
    'yearPicker': boolean;
  }
  interface MaterialsDialog {
    /**
    * Display a button which execute accept action
    */
    'acceptButton': string;
    /**
    * A list of this dialog actions
    */
    'actions': DialogAction[];
    /**
    * The dialog body, it can be an HTMLElement or plain text
    */
    'body': string | HTMLElement;
    /**
    * Display a button which execute cancel action
    */
    'cancelButton': string;
    /**
    * CloseS the dialog
    */
    'close': () => Promise<void>;
    /**
    * Display a close button in the top right of the dialog
    */
    'closeButton': boolean;
    /**
    * Set the title of the dialog
    */
    'dialogTitle': string;
    /**
    * Display accept button as disabled
    */
    'disableAcceptButton': boolean;
    /**
    * Set the height of the dialog screen
    */
    'height': string;
    /**
    * Returns true if the dialog is open
    */
    'isOpen': () => Promise<boolean>;
    /**
    * @deprecated since 1.1.0 : not used
    */
    'items': string[];
    /**
    * Opens the dialog
    */
    'open': () => Promise<void>;
    /**
    * @deprecated since 1.1.0 : dialog scroll automatically
    */
    'scrollable': boolean;
    /**
    * @deprecated since 1.1.0 : use toggle() instead Open/Close dialog.
    */
    'show': () => Promise<void>;
    /**
    * Open/close dialog
    */
    'toggle': () => Promise<void>;
    /**
    * Set the witdth of the dialog screen
    */
    'width': string;
  }
  interface MaterialsDialogController {
    /**
    * Create a HTMLMaterialsDialogElement and returns it
    */
    'create': (opts: DialogOpts) => Promise<HTMLMaterialsDialogElement>;
  }
  interface MaterialsDrawer {
    /**
    * Close the drawer
    */
    'close': () => Promise<void>;
    /**
    * Apply dismissible style on the drawer
    */
    'dismissible': boolean;
    /**
    * Set the drawer as a modal
    */
    'modal': boolean;
    /**
    * Open the drawer
    */
    'open': () => Promise<void>;
    'renderHtml': () => Promise<any[]>;
    /**
    * Open/close the drawer
    */
    'toggle': () => Promise<void>;
  }
  interface MaterialsDrawerListItem {
    /**
    * Mark this drawer item as activated
    */
    'activated': boolean;
    /**
    * Render an icon (from material-icons library)
    */
    'icon': string;
    /**
    * The drawer item label
    */
    'label': string;
    /**
    * Trigger a press event
    */
    'press': (e: any) => Promise<void>;
    /**
    * render with a href="${targetUrl}"
    */
    'targetUrl': string;
  }
  interface MaterialsDrawerWithTopAppBar {
    'appBarDense': boolean;
    'appBarTitle': string;
    'appBarType': 'fixed' | 'prominent' | 'short' | 'short-closed' | 'standard';
    'drawerType': 'modal' | 'fullHeight' | 'below';
    'open': boolean;
  }
  interface MaterialsDropdown {
    'buttonType': string;
    'closeMenu': () => Promise<void>;
    'color': string;
    'icon': string;
    'iconHelper': string;
    'iconOnly': boolean;
    'isOpen': () => Promise<boolean>;
    'menuPosition': 'TOP_LEFT' | 'TOP_RIGHT' | 'BOTTOM_LEFT' | 'BOTTOM_RIGHT' | 'TOP_START' | 'TOP_END' | 'BOTTOM_START' | 'BOTTOM_END';
    'menuTitle': string;
    'openMenu': () => Promise<void>;
  }
  interface MaterialsExpansionPanel {
    'collapsed': boolean;
    'elevation': number;
    'noPadding': boolean;
    'type': 'accordion' | 'expandable' | 'popout';
  }
  interface MaterialsFab {
    /**
    * Optional, animates the FAB out of view.  When set to false, the FAB will return to view.
    */
    'hidden': boolean;
    /**
    * Optionnal, an icon name from the material icons set
    */
    'icon': string;
    /**
    * Optionnal, a text label  If provided, it will render as an extended FAB
    */
    'label': string;
    /**
    * Optional, specifies the FAB size
    */
    'size': 'medium' | 'small';
  }
  interface MaterialsFormField {
    'alignEnd': boolean;
    'label': string;
  }
  interface MaterialsHeadline {
    'level': '1' | '2' | '3' | '4' | '5' | '6';
  }
  interface MaterialsIcon {
    'color': string;
    'dark': boolean;
    'disabled': boolean;
    'light': boolean;
    'name': string;
    'size': number;
  }
  interface MaterialsIconButton {
    'dense': boolean;
    'disabled': boolean;
    'icon': string;
    'iconOff': string;
    'iconOn': string;
    'img': string;
    'imgOff': string;
    'label': string;
    'labelOff': string;
    'labelOn': string;
    'large': boolean;
    'pressed': boolean;
    'svg': boolean;
    'svgOff': string;
  }
  interface MaterialsLinearProgress {
    'backgroundColor': string;
    'close': () => Promise<void>;
    'indeterminate': boolean;
    'open': () => Promise<void>;
    'opened': boolean;
    'show': () => Promise<void>;
    'timeout': number;
  }
  interface MaterialsList {
    /**
    * Optional, styles the density of the list, making it appear more compact.
    */
    'dense': boolean;
    /**
    * Optional, if the list is selectable it can be a multiple selection
    */
    'multiple': boolean;
    /**
    * Optional, make a list selectable
    */
    'selectable': boolean;
    /**
    * @deprecated use dense instead
    */
    'size': HTMLMaterialsListItemElement["size"];
  }
  interface MaterialsListItem {
    /**
    * Mark this item as disabled.
    */
    'disabled': boolean;
    'divider': boolean;
    'itemEndStyle': any;
    'itemStartStyle': any;
    /**
    * Prefere le label au <slot /> pour beneficier du textWrap.
    */
    'label': any;
    'noPadding': boolean;
    'role': string;
    /**
    * make the item selectable
    */
    'selectable': boolean;
    /**
    * Mark this item as selected.
    */
    'selected': boolean;
    /**
    * override la height par defaut du composant list-item.
    */
    'size': 'medium' | 'small';
    /**
    * Coupe le text par defaut.
    */
    'textWrap': boolean;
  }
  interface MaterialsListItemCheckbox {
    'checked': boolean;
    'color': string;
    'disabled': boolean;
    'itemEndStyle': any;
    'itemStartStyle': any;
    'label': string;
    'noPadding': boolean;
    'size': HTMLMaterialsListItemElement["size"];
    /**
    * Coupe le text par defaut.
    */
    'textWrap': boolean;
    'value': string | number;
  }
  interface MaterialsMenu {
    'close': () => Promise<void>;
    'isOpen': () => Promise<boolean>;
    /**
    * Max-height of the menu
    */
    'maxHeight': number;
    /**
    * Override default CSS mdc-list padding-top & bottom.
    */
    'noPadding': boolean;
    'open': () => Promise<void>;
    'setAnchorMargin': (margin: AnchorMargin) => Promise<void>;
    'setPosition': (position: "TOP_LEFT" | "TOP_RIGHT" | "BOTTOM_LEFT" | "BOTTOM_RIGHT" | "TOP_START" | "TOP_END" | "BOTTOM_START" | "BOTTOM_END") => Promise<void>;
  }
  interface MaterialsMultipleSelect {
    /**
    * Apply low density on the textfield
    */
    'dense': boolean;
    /**
    * Title displayed in the dialog
    */
    'dialogTitle': string;
    /**
    * Label displayed for the multi-select
    */
    'label': string;
    /**
    * Display selectable elements on many columns according to the max number of elements per columns allowed
    */
    'maxElementsColumn': number;
    /**
    * Map of options selectable in the dialog
    */
    'options': Map<string, string>;
    /**
    * Adds an icon at the end of the text field
    */
    'trailingIcon': string;
    /**
    * list of selected elements
    */
    'value': string[];
  }
  interface MaterialsRadio {
    'alignEnd': boolean;
    'checked': boolean;
    'disabled': boolean;
    'label': string;
    'name': string;
    'noPadding': boolean;
    'required': boolean;
    'value': string | number | string[];
  }
  interface MaterialsRadioGroup {
    'label': string;
    'linebreak': boolean;
    'name': string;
    'value': any;
  }
  interface MaterialsSelect {
    'box': boolean;
    'customValidation': () => Promise<string>;
    'defaultEmpty': boolean;
    'dense': boolean;
    'disabled': boolean;
    'forceValidation': () => Promise<void>;
    'helperText': string;
    'isValid': () => Promise<boolean>;
    'label': string;
    'leadingIcon': string;
    'name': string;
    'options': Map<string | number, string>;
    'outlined': boolean;
    'required': boolean;
    'value': any;
    'width': string;
  }
  interface MaterialsSnackbar {
    'actionHandler'?: Function;
    'actionText'?: string;
    'dismissButton': boolean;
    'label': string;
    'leading': boolean;
    'stacked': boolean;
    'timeout': number;
  }
  interface MaterialsSnackbarController {
    'create': (options: SnackBarOptions) => Promise<void>;
    'pushToQueue': (snack: HTMLMaterialsSnackbarElement) => Promise<void>;
    'sliceQueue': () => Promise<void>;
  }
  interface MaterialsStep {
    'active': boolean;
    'adjustHeight': () => Promise<void>;
    'confirmationText': string;
    'editable': boolean;
    'index': number;
    'isLast': boolean;
    'noPadding': boolean;
    'optional': boolean;
    'showButtons': boolean;
    'status': 'valid' | 'invalid' | 'empty';
    'stepTitle': string;
    'summary': string;
  }
  interface MaterialsStepper {
    'activeStep': number;
    'adjustHeight': () => Promise<void>;
    'calcIndexes': () => Promise<void>;
    'inactiveSteps': number[];
    'nextStep': () => Promise<void>;
    'openStep': (index: number) => Promise<void>;
    'previousStep': () => Promise<void>;
    'showButtons': boolean;
  }
  interface MaterialsSubtitle {
    'level': '1' | '2';
  }
  interface MaterialsSwitch {
    'checked': boolean;
    'disabled': boolean;
    'label': string;
  }
  interface MaterialsTab {
    'active': boolean;
    'icon': string;
    'indicatorType': 'underline' | 'icon';
    'label': string;
    'minWidth': boolean;
    'renderHtml': () => Promise<any>;
  }
  interface MaterialsTabs {
    'activeTab': number;
    'color': 'background' | 'primary' | 'secondary' | 'surface';
    'indicatorType': 'underline' | 'icon';
    'shrinkTabs': boolean;
  }
  interface MaterialsTextArea {
    'cols': number;
    'disabled': boolean;
    'fullwidth': boolean;
    'label': string;
    'outlined': boolean;
    'required': boolean;
    'rows': number;
    'value': string;
  }
  interface MaterialsTextField {
    'customValidation': () => Promise<string>;
    'dense': boolean;
    'disabled': boolean;
    'focused': boolean;
    'forceValidation': () => Promise<void>;
    'fullwidth': boolean;
    'helperText': string;
    /**
    * Hide clear button (webkit + Edge, Moz not supported)
    */
    'hideNativeClear': boolean;
    'isValid': () => Promise<boolean>;
    'label': string;
    'leadingIcon': string;
    /**
    * Add a title to the leading icon
    */
    'leadingIconTitle': string;
    'maxlength': number;
    'name': string;
    'outlined': boolean;
    'overflow': boolean;
    'pattern': string;
    'persistent': boolean;
    'readonly': boolean;
    'required': boolean;
    'trailingIcon': string;
    /**
    * Add a title to the trailing icon
    */
    'trailingIconTitle': string;
    'type': string;
    'value': any;
    'width': number;
  }
  interface MaterialsTimeField {
    /**
    * Provide a custom validation function to this time-field. In case of error, the promise should return a message with the error message to display
    */
    'customValidation': () => Promise<string>;
    /**
    * Styles the date field as a dense text field.
    */
    'dense': boolean;
    /**
    * Styles the date field as a disabled text field.
    */
    'disabled': boolean;
    /**
    * Styles the date field as a text field in focus.
    */
    'focused': boolean;
    /**
    * Force the validation of thid time field (native validation + custom validation)
    */
    'forceValidation': () => Promise<void>;
    /**
    * Styles the date field as a full width text field. Warning : do not use with outlined
    */
    'fullwidth': boolean;
    /**
    * Add an helper text to this date field
    */
    'helperText': string;
    /**
    * Return the time-field current value validity
    */
    'isValid': () => Promise<boolean>;
    /**
    * The date field label.
    */
    'label': string;
    /**
    * Add a leading icon to ths date field. You have to pass a material icon name
    */
    'leadingIcon': string;
    /**
    * Render an outlined date field
    */
    'outlined': boolean;
    /**
    * Set the helper text persistant (appears on focus otherwise)
    */
    'persistent': boolean;
    /**
    * Mark this date field as required
    */
    'required': boolean;
    /**
    * Display a timepicker when clicking on the time-field
    */
    'timepicker': boolean;
    /**
    * The timepicker format
    */
    'timepickerFormat': '12h' | '24h';
    /**
    * The timepicker options interval (in minutes)
    */
    'timepickerStep': number;
    /**
    * The date field value
    */
    'value': any;
    /**
    * The date field width
    */
    'width': number;
  }
  interface MaterialsTimepicker {
    'clock24': boolean;
    'step': number;
    'timeSelected': string;
  }
  interface MaterialsTopAppBar {
    'barTitle': string;
    'dense': boolean;
    'fixed': boolean;
    'prominent': boolean;
    'short': boolean;
  }
  interface MaterialsTopAppBarAction {
    'actionTitle': string;
    'icon'?: string;
    'label': string;
  }
}

declare global {


  interface HTMLMaterialsAlertControllerElement extends Components.MaterialsAlertController, HTMLStencilElement {}
  var HTMLMaterialsAlertControllerElement: {
    prototype: HTMLMaterialsAlertControllerElement;
    new (): HTMLMaterialsAlertControllerElement;
  };

  interface HTMLMaterialsAutocompleteElement extends Components.MaterialsAutocomplete, HTMLStencilElement {}
  var HTMLMaterialsAutocompleteElement: {
    prototype: HTMLMaterialsAutocompleteElement;
    new (): HTMLMaterialsAutocompleteElement;
  };

  interface HTMLMaterialsButtonElement extends Components.MaterialsButton, HTMLStencilElement {}
  var HTMLMaterialsButtonElement: {
    prototype: HTMLMaterialsButtonElement;
    new (): HTMLMaterialsButtonElement;
  };

  interface HTMLMaterialsCardElement extends Components.MaterialsCard, HTMLStencilElement {}
  var HTMLMaterialsCardElement: {
    prototype: HTMLMaterialsCardElement;
    new (): HTMLMaterialsCardElement;
  };

  interface HTMLMaterialsCardActionElement extends Components.MaterialsCardAction, HTMLStencilElement {}
  var HTMLMaterialsCardActionElement: {
    prototype: HTMLMaterialsCardActionElement;
    new (): HTMLMaterialsCardActionElement;
  };

  interface HTMLMaterialsCardContentElement extends Components.MaterialsCardContent, HTMLStencilElement {}
  var HTMLMaterialsCardContentElement: {
    prototype: HTMLMaterialsCardContentElement;
    new (): HTMLMaterialsCardContentElement;
  };

  interface HTMLMaterialsCheckboxElement extends Components.MaterialsCheckbox, HTMLStencilElement {}
  var HTMLMaterialsCheckboxElement: {
    prototype: HTMLMaterialsCheckboxElement;
    new (): HTMLMaterialsCheckboxElement;
  };

  interface HTMLMaterialsChipElement extends Components.MaterialsChip, HTMLStencilElement {}
  var HTMLMaterialsChipElement: {
    prototype: HTMLMaterialsChipElement;
    new (): HTMLMaterialsChipElement;
  };

  interface HTMLMaterialsDatatableElement extends Components.MaterialsDatatable, HTMLStencilElement {}
  var HTMLMaterialsDatatableElement: {
    prototype: HTMLMaterialsDatatableElement;
    new (): HTMLMaterialsDatatableElement;
  };

  interface HTMLMaterialsDatatableActionElement extends Components.MaterialsDatatableAction, HTMLStencilElement {}
  var HTMLMaterialsDatatableActionElement: {
    prototype: HTMLMaterialsDatatableActionElement;
    new (): HTMLMaterialsDatatableActionElement;
  };

  interface HTMLMaterialsDatatableBodyElement extends Components.MaterialsDatatableBody, HTMLStencilElement {}
  var HTMLMaterialsDatatableBodyElement: {
    prototype: HTMLMaterialsDatatableBodyElement;
    new (): HTMLMaterialsDatatableBodyElement;
  };

  interface HTMLMaterialsDatatableBodyCellElement extends Components.MaterialsDatatableBodyCell, HTMLStencilElement {}
  var HTMLMaterialsDatatableBodyCellElement: {
    prototype: HTMLMaterialsDatatableBodyCellElement;
    new (): HTMLMaterialsDatatableBodyCellElement;
  };

  interface HTMLMaterialsDatatableBodyRowElement extends Components.MaterialsDatatableBodyRow, HTMLStencilElement {}
  var HTMLMaterialsDatatableBodyRowElement: {
    prototype: HTMLMaterialsDatatableBodyRowElement;
    new (): HTMLMaterialsDatatableBodyRowElement;
  };

  interface HTMLMaterialsDatatableFooterElement extends Components.MaterialsDatatableFooter, HTMLStencilElement {}
  var HTMLMaterialsDatatableFooterElement: {
    prototype: HTMLMaterialsDatatableFooterElement;
    new (): HTMLMaterialsDatatableFooterElement;
  };

  interface HTMLMaterialsDatatableHeaderElement extends Components.MaterialsDatatableHeader, HTMLStencilElement {}
  var HTMLMaterialsDatatableHeaderElement: {
    prototype: HTMLMaterialsDatatableHeaderElement;
    new (): HTMLMaterialsDatatableHeaderElement;
  };

  interface HTMLMaterialsDatatableHeaderColumnElement extends Components.MaterialsDatatableHeaderColumn, HTMLStencilElement {}
  var HTMLMaterialsDatatableHeaderColumnElement: {
    prototype: HTMLMaterialsDatatableHeaderColumnElement;
    new (): HTMLMaterialsDatatableHeaderColumnElement;
  };

  interface HTMLMaterialsDatatablePaginationElement extends Components.MaterialsDatatablePagination, HTMLStencilElement {}
  var HTMLMaterialsDatatablePaginationElement: {
    prototype: HTMLMaterialsDatatablePaginationElement;
    new (): HTMLMaterialsDatatablePaginationElement;
  };

  interface HTMLMaterialsDateFieldElement extends Components.MaterialsDateField, HTMLStencilElement {}
  var HTMLMaterialsDateFieldElement: {
    prototype: HTMLMaterialsDateFieldElement;
    new (): HTMLMaterialsDateFieldElement;
  };

  interface HTMLMaterialsDatepickerElement extends Components.MaterialsDatepicker, HTMLStencilElement {}
  var HTMLMaterialsDatepickerElement: {
    prototype: HTMLMaterialsDatepickerElement;
    new (): HTMLMaterialsDatepickerElement;
  };

  interface HTMLMaterialsDialogElement extends Components.MaterialsDialog, HTMLStencilElement {}
  var HTMLMaterialsDialogElement: {
    prototype: HTMLMaterialsDialogElement;
    new (): HTMLMaterialsDialogElement;
  };

  interface HTMLMaterialsDialogControllerElement extends Components.MaterialsDialogController, HTMLStencilElement {}
  var HTMLMaterialsDialogControllerElement: {
    prototype: HTMLMaterialsDialogControllerElement;
    new (): HTMLMaterialsDialogControllerElement;
  };

  interface HTMLMaterialsDrawerElement extends Components.MaterialsDrawer, HTMLStencilElement {}
  var HTMLMaterialsDrawerElement: {
    prototype: HTMLMaterialsDrawerElement;
    new (): HTMLMaterialsDrawerElement;
  };

  interface HTMLMaterialsDrawerListItemElement extends Components.MaterialsDrawerListItem, HTMLStencilElement {}
  var HTMLMaterialsDrawerListItemElement: {
    prototype: HTMLMaterialsDrawerListItemElement;
    new (): HTMLMaterialsDrawerListItemElement;
  };

  interface HTMLMaterialsDrawerWithTopAppBarElement extends Components.MaterialsDrawerWithTopAppBar, HTMLStencilElement {}
  var HTMLMaterialsDrawerWithTopAppBarElement: {
    prototype: HTMLMaterialsDrawerWithTopAppBarElement;
    new (): HTMLMaterialsDrawerWithTopAppBarElement;
  };

  interface HTMLMaterialsDropdownElement extends Components.MaterialsDropdown, HTMLStencilElement {}
  var HTMLMaterialsDropdownElement: {
    prototype: HTMLMaterialsDropdownElement;
    new (): HTMLMaterialsDropdownElement;
  };

  interface HTMLMaterialsExpansionPanelElement extends Components.MaterialsExpansionPanel, HTMLStencilElement {}
  var HTMLMaterialsExpansionPanelElement: {
    prototype: HTMLMaterialsExpansionPanelElement;
    new (): HTMLMaterialsExpansionPanelElement;
  };

  interface HTMLMaterialsFabElement extends Components.MaterialsFab, HTMLStencilElement {}
  var HTMLMaterialsFabElement: {
    prototype: HTMLMaterialsFabElement;
    new (): HTMLMaterialsFabElement;
  };

  interface HTMLMaterialsFormFieldElement extends Components.MaterialsFormField, HTMLStencilElement {}
  var HTMLMaterialsFormFieldElement: {
    prototype: HTMLMaterialsFormFieldElement;
    new (): HTMLMaterialsFormFieldElement;
  };

  interface HTMLMaterialsHeadlineElement extends Components.MaterialsHeadline, HTMLStencilElement {}
  var HTMLMaterialsHeadlineElement: {
    prototype: HTMLMaterialsHeadlineElement;
    new (): HTMLMaterialsHeadlineElement;
  };

  interface HTMLMaterialsIconElement extends Components.MaterialsIcon, HTMLStencilElement {}
  var HTMLMaterialsIconElement: {
    prototype: HTMLMaterialsIconElement;
    new (): HTMLMaterialsIconElement;
  };

  interface HTMLMaterialsIconButtonElement extends Components.MaterialsIconButton, HTMLStencilElement {}
  var HTMLMaterialsIconButtonElement: {
    prototype: HTMLMaterialsIconButtonElement;
    new (): HTMLMaterialsIconButtonElement;
  };

  interface HTMLMaterialsLinearProgressElement extends Components.MaterialsLinearProgress, HTMLStencilElement {}
  var HTMLMaterialsLinearProgressElement: {
    prototype: HTMLMaterialsLinearProgressElement;
    new (): HTMLMaterialsLinearProgressElement;
  };

  interface HTMLMaterialsListElement extends Components.MaterialsList, HTMLStencilElement {}
  var HTMLMaterialsListElement: {
    prototype: HTMLMaterialsListElement;
    new (): HTMLMaterialsListElement;
  };

  interface HTMLMaterialsListItemElement extends Components.MaterialsListItem, HTMLStencilElement {}
  var HTMLMaterialsListItemElement: {
    prototype: HTMLMaterialsListItemElement;
    new (): HTMLMaterialsListItemElement;
  };

  interface HTMLMaterialsListItemCheckboxElement extends Components.MaterialsListItemCheckbox, HTMLStencilElement {}
  var HTMLMaterialsListItemCheckboxElement: {
    prototype: HTMLMaterialsListItemCheckboxElement;
    new (): HTMLMaterialsListItemCheckboxElement;
  };

  interface HTMLMaterialsMenuElement extends Components.MaterialsMenu, HTMLStencilElement {}
  var HTMLMaterialsMenuElement: {
    prototype: HTMLMaterialsMenuElement;
    new (): HTMLMaterialsMenuElement;
  };

  interface HTMLMaterialsMultipleSelectElement extends Components.MaterialsMultipleSelect, HTMLStencilElement {}
  var HTMLMaterialsMultipleSelectElement: {
    prototype: HTMLMaterialsMultipleSelectElement;
    new (): HTMLMaterialsMultipleSelectElement;
  };

  interface HTMLMaterialsRadioElement extends Components.MaterialsRadio, HTMLStencilElement {}
  var HTMLMaterialsRadioElement: {
    prototype: HTMLMaterialsRadioElement;
    new (): HTMLMaterialsRadioElement;
  };

  interface HTMLMaterialsRadioGroupElement extends Components.MaterialsRadioGroup, HTMLStencilElement {}
  var HTMLMaterialsRadioGroupElement: {
    prototype: HTMLMaterialsRadioGroupElement;
    new (): HTMLMaterialsRadioGroupElement;
  };

  interface HTMLMaterialsSelectElement extends Components.MaterialsSelect, HTMLStencilElement {}
  var HTMLMaterialsSelectElement: {
    prototype: HTMLMaterialsSelectElement;
    new (): HTMLMaterialsSelectElement;
  };

  interface HTMLMaterialsSnackbarElement extends Components.MaterialsSnackbar, HTMLStencilElement {}
  var HTMLMaterialsSnackbarElement: {
    prototype: HTMLMaterialsSnackbarElement;
    new (): HTMLMaterialsSnackbarElement;
  };

  interface HTMLMaterialsSnackbarControllerElement extends Components.MaterialsSnackbarController, HTMLStencilElement {}
  var HTMLMaterialsSnackbarControllerElement: {
    prototype: HTMLMaterialsSnackbarControllerElement;
    new (): HTMLMaterialsSnackbarControllerElement;
  };

  interface HTMLMaterialsStepElement extends Components.MaterialsStep, HTMLStencilElement {}
  var HTMLMaterialsStepElement: {
    prototype: HTMLMaterialsStepElement;
    new (): HTMLMaterialsStepElement;
  };

  interface HTMLMaterialsStepperElement extends Components.MaterialsStepper, HTMLStencilElement {}
  var HTMLMaterialsStepperElement: {
    prototype: HTMLMaterialsStepperElement;
    new (): HTMLMaterialsStepperElement;
  };

  interface HTMLMaterialsSubtitleElement extends Components.MaterialsSubtitle, HTMLStencilElement {}
  var HTMLMaterialsSubtitleElement: {
    prototype: HTMLMaterialsSubtitleElement;
    new (): HTMLMaterialsSubtitleElement;
  };

  interface HTMLMaterialsSwitchElement extends Components.MaterialsSwitch, HTMLStencilElement {}
  var HTMLMaterialsSwitchElement: {
    prototype: HTMLMaterialsSwitchElement;
    new (): HTMLMaterialsSwitchElement;
  };

  interface HTMLMaterialsTabElement extends Components.MaterialsTab, HTMLStencilElement {}
  var HTMLMaterialsTabElement: {
    prototype: HTMLMaterialsTabElement;
    new (): HTMLMaterialsTabElement;
  };

  interface HTMLMaterialsTabsElement extends Components.MaterialsTabs, HTMLStencilElement {}
  var HTMLMaterialsTabsElement: {
    prototype: HTMLMaterialsTabsElement;
    new (): HTMLMaterialsTabsElement;
  };

  interface HTMLMaterialsTextAreaElement extends Components.MaterialsTextArea, HTMLStencilElement {}
  var HTMLMaterialsTextAreaElement: {
    prototype: HTMLMaterialsTextAreaElement;
    new (): HTMLMaterialsTextAreaElement;
  };

  interface HTMLMaterialsTextFieldElement extends Components.MaterialsTextField, HTMLStencilElement {}
  var HTMLMaterialsTextFieldElement: {
    prototype: HTMLMaterialsTextFieldElement;
    new (): HTMLMaterialsTextFieldElement;
  };

  interface HTMLMaterialsTimeFieldElement extends Components.MaterialsTimeField, HTMLStencilElement {}
  var HTMLMaterialsTimeFieldElement: {
    prototype: HTMLMaterialsTimeFieldElement;
    new (): HTMLMaterialsTimeFieldElement;
  };

  interface HTMLMaterialsTimepickerElement extends Components.MaterialsTimepicker, HTMLStencilElement {}
  var HTMLMaterialsTimepickerElement: {
    prototype: HTMLMaterialsTimepickerElement;
    new (): HTMLMaterialsTimepickerElement;
  };

  interface HTMLMaterialsTopAppBarElement extends Components.MaterialsTopAppBar, HTMLStencilElement {}
  var HTMLMaterialsTopAppBarElement: {
    prototype: HTMLMaterialsTopAppBarElement;
    new (): HTMLMaterialsTopAppBarElement;
  };

  interface HTMLMaterialsTopAppBarActionElement extends Components.MaterialsTopAppBarAction, HTMLStencilElement {}
  var HTMLMaterialsTopAppBarActionElement: {
    prototype: HTMLMaterialsTopAppBarActionElement;
    new (): HTMLMaterialsTopAppBarActionElement;
  };
  interface HTMLElementTagNameMap {
    'materials-alert-controller': HTMLMaterialsAlertControllerElement;
    'materials-autocomplete': HTMLMaterialsAutocompleteElement;
    'materials-button': HTMLMaterialsButtonElement;
    'materials-card': HTMLMaterialsCardElement;
    'materials-card-action': HTMLMaterialsCardActionElement;
    'materials-card-content': HTMLMaterialsCardContentElement;
    'materials-checkbox': HTMLMaterialsCheckboxElement;
    'materials-chip': HTMLMaterialsChipElement;
    'materials-datatable': HTMLMaterialsDatatableElement;
    'materials-datatable-action': HTMLMaterialsDatatableActionElement;
    'materials-datatable-body': HTMLMaterialsDatatableBodyElement;
    'materials-datatable-body-cell': HTMLMaterialsDatatableBodyCellElement;
    'materials-datatable-body-row': HTMLMaterialsDatatableBodyRowElement;
    'materials-datatable-footer': HTMLMaterialsDatatableFooterElement;
    'materials-datatable-header': HTMLMaterialsDatatableHeaderElement;
    'materials-datatable-header-column': HTMLMaterialsDatatableHeaderColumnElement;
    'materials-datatable-pagination': HTMLMaterialsDatatablePaginationElement;
    'materials-date-field': HTMLMaterialsDateFieldElement;
    'materials-datepicker': HTMLMaterialsDatepickerElement;
    'materials-dialog': HTMLMaterialsDialogElement;
    'materials-dialog-controller': HTMLMaterialsDialogControllerElement;
    'materials-drawer': HTMLMaterialsDrawerElement;
    'materials-drawer-list-item': HTMLMaterialsDrawerListItemElement;
    'materials-drawer-with-top-app-bar': HTMLMaterialsDrawerWithTopAppBarElement;
    'materials-dropdown': HTMLMaterialsDropdownElement;
    'materials-expansion-panel': HTMLMaterialsExpansionPanelElement;
    'materials-fab': HTMLMaterialsFabElement;
    'materials-form-field': HTMLMaterialsFormFieldElement;
    'materials-headline': HTMLMaterialsHeadlineElement;
    'materials-icon': HTMLMaterialsIconElement;
    'materials-icon-button': HTMLMaterialsIconButtonElement;
    'materials-linear-progress': HTMLMaterialsLinearProgressElement;
    'materials-list': HTMLMaterialsListElement;
    'materials-list-item': HTMLMaterialsListItemElement;
    'materials-list-item-checkbox': HTMLMaterialsListItemCheckboxElement;
    'materials-menu': HTMLMaterialsMenuElement;
    'materials-multiple-select': HTMLMaterialsMultipleSelectElement;
    'materials-radio': HTMLMaterialsRadioElement;
    'materials-radio-group': HTMLMaterialsRadioGroupElement;
    'materials-select': HTMLMaterialsSelectElement;
    'materials-snackbar': HTMLMaterialsSnackbarElement;
    'materials-snackbar-controller': HTMLMaterialsSnackbarControllerElement;
    'materials-step': HTMLMaterialsStepElement;
    'materials-stepper': HTMLMaterialsStepperElement;
    'materials-subtitle': HTMLMaterialsSubtitleElement;
    'materials-switch': HTMLMaterialsSwitchElement;
    'materials-tab': HTMLMaterialsTabElement;
    'materials-tabs': HTMLMaterialsTabsElement;
    'materials-text-area': HTMLMaterialsTextAreaElement;
    'materials-text-field': HTMLMaterialsTextFieldElement;
    'materials-time-field': HTMLMaterialsTimeFieldElement;
    'materials-timepicker': HTMLMaterialsTimepickerElement;
    'materials-top-app-bar': HTMLMaterialsTopAppBarElement;
    'materials-top-app-bar-action': HTMLMaterialsTopAppBarActionElement;
  }
}

declare namespace LocalJSX {
  interface MaterialsAlertController extends JSXBase.HTMLAttributes<HTMLMaterialsAlertControllerElement> {}
  interface MaterialsAutocomplete extends JSXBase.HTMLAttributes<HTMLMaterialsAutocompleteElement> {
    /**
    * Function of autocompletion to pass to the element called during onInput of the text-field
    */
    'autocomplete'?: (search: string) => Promise<Map<string, string>>;
    /**
    * Apply low density on the element
    */
    'dense'?: boolean;
    /**
    * Label of the autocomplete
    */
    'label'?: string;
    /**
    * Limits the number of suggestions displayed in list
    */
    'maxSuggestions'?: number;
    /**
    * Change event emitted when value is selected
    */
    'onChange'?: (event: CustomEvent<{label?: string, value: string}>) => void;
    /**
    * Adds an icon at the end of the text field
    */
    'trailingIcon'?: string;
    /**
    * Value of the autocomplete text-field composed by a label to be displayed in the text-field and a value that is a real value if no label given, label = value
    */
    'value'?: {label?: string, value: string};
  }
  interface MaterialsButton extends JSXBase.HTMLAttributes<HTMLMaterialsButtonElement> {
    /**
    * Render a block Material button (Full width)
    */
    'block'?: boolean;
    /**
    * The button color, it can be either : - a predifined value : 'primary', 'secondary', 'error'. - an hexa color code : #225566, #CCC. - a css named color : red, blue.
    */
    'color'?: 'primary' | 'secondary' | 'error' | string;
    /**
    * Render a dense Material button ()
    */
    'dense'?: boolean;
    /**
    * Disable the button
    */
    'disabled'?: boolean;
    /**
    * A material icon name
    */
    'icon'?: string;
    /**
    * Render an outlined Material button
    */
    'outlined'?: boolean;
    /**
    * Render a raised Material button
    */
    'raised'?: boolean;
    /**
    * The button type
    */
    'type'?: 'button' | 'submit' | 'reset';
    /**
    * Render an unelevated Material button
    */
    'unelevated'?: boolean;
  }
  interface MaterialsCard extends JSXBase.HTMLAttributes<HTMLMaterialsCardElement> {
    /**
    * Set Card title
    */
    'cardTitle'?: string;
    /**
    * Set Card shadow elevation
    */
    'elevation'?: number;
    /**
    * Set Card height
    */
    'height'?: string;
    /**
    * Set Card max height
    */
    'maxHeight'?: string;
    /**
    * Function executed when click on card
    */
    'onAction'?: Function;
    /**
    * Set Card padding
    */
    'padding'?: number;
    /**
    * Set Card width
    */
    'width'?: string;
  }
  interface MaterialsCardAction extends JSXBase.HTMLAttributes<HTMLMaterialsCardActionElement> {
    /**
    * Set true to render this action as a single action button taking up the entire width of the action row Use if you have only one card action
    */
    'fullBleed'?: false;
    /**
    * Use an icon for this action
    */
    'icon'?: string;
    /**
    * The action label. If an icon is provided, it will be render as a title
    */
    'label'?: string;
    /**
    * Function triggered after this action is pressed
    */
    'onAction'?: Function;
  }
  interface MaterialsCardContent extends JSXBase.HTMLAttributes<HTMLMaterialsCardContentElement> {}
  interface MaterialsCheckbox extends JSXBase.HTMLAttributes<HTMLMaterialsCheckboxElement> {
    /**
    * If a label is provided, where should it be aligned ?
    */
    'alignLabel'?: 'left' | 'right';
    /**
    * Mark the checkbox as checked
    */
    'checked'?: boolean;
    /**
    * Color of the checkbox
    */
    'color'?: 'primary' | 'accent' | 'secondary' | 'danger' | string;
    /**
    * Mark the checkbox as disabled
    */
    'disabled'?: boolean;
    /**
    * Make the checkbox appear indeterminate
    */
    'indeterminate'?: boolean;
    /**
    * The checkbox label (Optionnal)
    */
    'label'?: string;
    /**
    * Checkbox name
    */
    'name'?: string;
    /**
    * Change event emitted when checkbox value changes
    */
    'onChange'?: (event: CustomEvent<any>) => void;
    /**
    * The checkbox value
    */
    'value'?: string | number;
  }
  interface MaterialsChip extends JSXBase.HTMLAttributes<HTMLMaterialsChipElement> {
    /**
    * The chip background color, it can be either : - a predifined value : 'primary', 'secondary'. - an hexa color code : #225566, #CCC. - a css named color : red, blue.
    */
    'color'?: 'primary' | 'secondary' | string;
    /**
    * The chip text color, it can be either : - a predifined value : 'primary', 'secondary'. - an hexa color code : #225566, #CCC. - a css named color : red, blue.
    */
    'inkColor'?: 'primary' | 'secondary' | string;
  }
  interface MaterialsDatatable extends JSXBase.HTMLAttributes<HTMLMaterialsDatatableElement> {
    /**
    * Set the color scheme for the datatable
    */
    'color'?: 'primary' | 'secondary';
    /**
    * Apply low density on the element
    */
    'dense'?: boolean;
    /**
    * Apply odd style to the element
    */
    'oddEvenStyle'?: boolean;
    /**
    * Emitted when datatable is sorted
    */
    'onSort'?: (event: CustomEvent<Sort>) => void;
  }
  interface MaterialsDatatableAction extends JSXBase.HTMLAttributes<HTMLMaterialsDatatableActionElement> {
    /**
    * The datatable-action color, it can be either : - a predifined value : 'primary', 'secondary', 'error'. - an hexa color code : #225566, #CCC. - a css named color : red, blue.
    */
    'color'?: 'primary' | 'secondary' | 'error' | string;
    /**
    * Mark this datatable action as displayed
    */
    'display'?: boolean;
    /**
    * Render an icon (from material-icons library)
    */
    'icon'?: string;
    /**
    * The datatable action label
    */
    'label': string;
    /**
    * Emitted when it get pressed
    */
    'onPress'?: (event: CustomEvent<any>) => void;
  }
  interface MaterialsDatatableBody extends JSXBase.HTMLAttributes<HTMLMaterialsDatatableBodyElement> {}
  interface MaterialsDatatableBodyCell extends JSXBase.HTMLAttributes<HTMLMaterialsDatatableBodyCellElement> {
    'align'?: 'start' | 'end' | 'center';
    'width'?: string;
  }
  interface MaterialsDatatableBodyRow extends JSXBase.HTMLAttributes<HTMLMaterialsDatatableBodyRowElement> {
    'dense'?: boolean;
    'expendable'?: boolean;
    'expended'?: boolean;
    'onExpand'?: (event: CustomEvent<boolean>) => void;
    'onSelectRow'?: (event: CustomEvent<boolean>) => void;
    'selectable'?: boolean;
    'selected'?: boolean;
  }
  interface MaterialsDatatableFooter extends JSXBase.HTMLAttributes<HTMLMaterialsDatatableFooterElement> {
    'color'?: 'primary' | 'secondary';
  }
  interface MaterialsDatatableHeader extends JSXBase.HTMLAttributes<HTMLMaterialsDatatableHeaderElement> {
    'color'?: 'primary' | 'secondary';
    'onSelectAll'?: (event: CustomEvent<boolean>) => void;
    'selectable'?: boolean;
    'selected'?: boolean;
  }
  interface MaterialsDatatableHeaderColumn extends JSXBase.HTMLAttributes<HTMLMaterialsDatatableHeaderColumnElement> {
    'align'?: 'start' | 'end' | 'center';
    'description'?: string;
    'label'?: string;
    'onSort'?: (event: CustomEvent<Sort>) => void;
    'sortable'?: boolean;
    'sorted'?: boolean;
    'value'?: string;
    'width'?: string;
  }
  interface MaterialsDatatablePagination extends JSXBase.HTMLAttributes<HTMLMaterialsDatatablePaginationElement> {
    'currentPage'?: number;
    'first'?: number;
    'last'?: number;
    'onNextPage'?: (event: CustomEvent<any>) => void;
    'onPreviousPage'?: (event: CustomEvent<any>) => void;
    'size'?: number;
    'total'?: number;
  }
  interface MaterialsDateField extends JSXBase.HTMLAttributes<HTMLMaterialsDateFieldElement> {
    /**
    * Provide a custom validation function to this time-field. In case of error, the promise should return a message with the error message to display
    */
    'customValidation'?: () => Promise<string>;
    /**
    * Display a datepicker when clicking on the date-field
    */
    'datepicker'?: boolean;
    /**
    * The datepicker has a month navigation bar
    */
    'datepickerMonthPicker'?: boolean;
    /**
    * The datepicker has a today button
    */
    'datepickerTodayPicker'?: boolean;
    /**
    * The datepicker has a year navigation bar
    */
    'datepickerYearPicker'?: boolean;
    /**
    * Styles the date field as a dense text field.
    */
    'dense'?: boolean;
    /**
    * Styles the date field as a disabled text field.
    */
    'disabled'?: boolean;
    /**
    * Styles the date field as a text field in focus.
    */
    'focused'?: boolean;
    /**
    * Styles the date field as a full width text field. Warning : do not use with outlined
    */
    'fullwidth'?: boolean;
    /**
    * Add an helper text to this date field
    */
    'helperText'?: string;
    /**
    * The date field label.
    */
    'label'?: string;
    /**
    * Add a leading icon to ths date field. You have to pass a material icon name
    */
    'leadingIcon'?: string;
    /**
    * Emitted when the input text change
    */
    'onInput'?: (event: CustomEvent<any>) => void;
    /**
    * Render an outlined date field
    */
    'outlined'?: boolean;
    /**
    * Set the helper text persistant (appears on focus otherwise)
    */
    'persistent'?: boolean;
    /**
    * Mark this date field as required
    */
    'required'?: boolean;
    /**
    * The date field value
    */
    'value'?: any;
    /**
    * The date field width
    */
    'width'?: number;
  }
  interface MaterialsDatepicker extends JSXBase.HTMLAttributes<HTMLMaterialsDatepickerElement> {
    /**
    * Used to highlight a time period such as : from Monday to Sunday
    */
    'dateRange'?: { start: Date, end: Date };
    /**
    * Used to display current selected date
    */
    'dateSelected'?: Date;
    /**
    * Display month picker on the element
    */
    'monthPicker'?: boolean;
    /**
    * Display button to empty value of the element
    */
    'nullable'?: boolean;
    /**
    * Event emitted when new date is selected
    */
    'onDateSelectedUpdate'?: (event: CustomEvent<Date>) => void;
    /**
    * Display button for selecting today's date
    */
    'todayPicker'?: boolean;
    /**
    * Display year picker on the element
    */
    'yearPicker'?: boolean;
  }
  interface MaterialsDialog extends JSXBase.HTMLAttributes<HTMLMaterialsDialogElement> {
    /**
    * Display a button which execute accept action
    */
    'acceptButton'?: string;
    /**
    * A list of this dialog actions
    */
    'actions'?: DialogAction[];
    /**
    * The dialog body, it can be an HTMLElement or plain text
    */
    'body'?: string | HTMLElement;
    /**
    * Display a button which execute cancel action
    */
    'cancelButton'?: string;
    /**
    * Display a close button in the top right of the dialog
    */
    'closeButton'?: boolean;
    /**
    * Set the title of the dialog
    */
    'dialogTitle'?: string;
    /**
    * Display accept button as disabled
    */
    'disableAcceptButton'?: boolean;
    /**
    * Set the height of the dialog screen
    */
    'height'?: string;
    /**
    * @deprecated since 1.1.0 : not used
    */
    'items'?: string[];
    /**
    * Event emitted when acceptButton is clicked
    */
    'onAccept'?: (event: CustomEvent<any>) => void;
    /**
    * Event emitted when cancelButton is clicked
    */
    'onCancel'?: (event: CustomEvent<any>) => void;
    /**
    * @deprecated since 1.1.0 : dialog scroll automatically
    */
    'scrollable'?: boolean;
    /**
    * Set the witdth of the dialog screen
    */
    'width'?: string;
  }
  interface MaterialsDialogController extends JSXBase.HTMLAttributes<HTMLMaterialsDialogControllerElement> {}
  interface MaterialsDrawer extends JSXBase.HTMLAttributes<HTMLMaterialsDrawerElement> {
    /**
    * Apply dismissible style on the drawer
    */
    'dismissible'?: boolean;
    /**
    * Set the drawer as a modal
    */
    'modal'?: boolean;
  }
  interface MaterialsDrawerListItem extends JSXBase.HTMLAttributes<HTMLMaterialsDrawerListItemElement> {
    /**
    * Mark this drawer item as activated
    */
    'activated'?: boolean;
    /**
    * Render an icon (from material-icons library)
    */
    'icon'?: string;
    /**
    * The drawer item label
    */
    'label': string;
    /**
    * Emitted when it get pressed
    */
    'onPress'?: (event: CustomEvent<any>) => void;
    /**
    * render with a href="${targetUrl}"
    */
    'targetUrl'?: string;
  }
  interface MaterialsDrawerWithTopAppBar extends JSXBase.HTMLAttributes<HTMLMaterialsDrawerWithTopAppBarElement> {
    'appBarDense'?: boolean;
    'appBarTitle'?: string;
    'appBarType'?: 'fixed' | 'prominent' | 'short' | 'short-closed' | 'standard';
    'drawerType'?: 'modal' | 'fullHeight' | 'below';
    'open'?: boolean;
  }
  interface MaterialsDropdown extends JSXBase.HTMLAttributes<HTMLMaterialsDropdownElement> {
    'buttonType'?: string;
    'color'?: string;
    'icon'?: string;
    'iconHelper'?: string;
    'iconOnly'?: boolean;
    'menuPosition'?: 'TOP_LEFT' | 'TOP_RIGHT' | 'BOTTOM_LEFT' | 'BOTTOM_RIGHT' | 'TOP_START' | 'TOP_END' | 'BOTTOM_START' | 'BOTTOM_END';
    'menuTitle'?: string;
  }
  interface MaterialsExpansionPanel extends JSXBase.HTMLAttributes<HTMLMaterialsExpansionPanelElement> {
    'collapsed'?: boolean;
    'elevation'?: number;
    'noPadding'?: boolean;
    'type'?: 'accordion' | 'expandable' | 'popout';
  }
  interface MaterialsFab extends JSXBase.HTMLAttributes<HTMLMaterialsFabElement> {
    /**
    * Optional, animates the FAB out of view.  When set to false, the FAB will return to view.
    */
    'hidden'?: boolean;
    /**
    * Optionnal, an icon name from the material icons set
    */
    'icon'?: string;
    /**
    * Optionnal, a text label  If provided, it will render as an extended FAB
    */
    'label'?: string;
    /**
    * Optional, specifies the FAB size
    */
    'size'?: 'medium' | 'small';
  }
  interface MaterialsFormField extends JSXBase.HTMLAttributes<HTMLMaterialsFormFieldElement> {
    'alignEnd'?: boolean;
    'label'?: string;
  }
  interface MaterialsHeadline extends JSXBase.HTMLAttributes<HTMLMaterialsHeadlineElement> {
    'level'?: '1' | '2' | '3' | '4' | '5' | '6';
  }
  interface MaterialsIcon extends JSXBase.HTMLAttributes<HTMLMaterialsIconElement> {
    'color'?: string;
    'dark'?: boolean;
    'disabled'?: boolean;
    'light'?: boolean;
    'name'?: string;
    'size'?: number;
  }
  interface MaterialsIconButton extends JSXBase.HTMLAttributes<HTMLMaterialsIconButtonElement> {
    'dense'?: boolean;
    'disabled'?: boolean;
    'icon'?: string;
    'iconOff'?: string;
    'iconOn'?: string;
    'img'?: string;
    'imgOff'?: string;
    'label'?: string;
    'labelOff'?: string;
    'labelOn'?: string;
    'large'?: boolean;
    'pressed'?: boolean;
    'svg'?: boolean;
    'svgOff'?: string;
  }
  interface MaterialsLinearProgress extends JSXBase.HTMLAttributes<HTMLMaterialsLinearProgressElement> {
    'backgroundColor'?: string;
    'indeterminate'?: boolean;
    'opened'?: boolean;
    'timeout'?: number;
  }
  interface MaterialsList extends JSXBase.HTMLAttributes<HTMLMaterialsListElement> {
    /**
    * Optional, styles the density of the list, making it appear more compact.
    */
    'dense'?: boolean;
    /**
    * Optional, if the list is selectable it can be a multiple selection
    */
    'multiple'?: boolean;
    /**
    * Optional, make a list selectable
    */
    'selectable'?: boolean;
    /**
    * @deprecated use dense instead
    */
    'size'?: HTMLMaterialsListItemElement["size"];
  }
  interface MaterialsListItem extends JSXBase.HTMLAttributes<HTMLMaterialsListItemElement> {
    /**
    * Mark this item as disabled.
    */
    'disabled'?: boolean;
    'divider'?: boolean;
    'itemEndStyle'?: any;
    'itemStartStyle'?: any;
    /**
    * Prefere le label au <slot /> pour beneficier du textWrap.
    */
    'label'?: any;
    'noPadding'?: boolean;
    /**
    * click of list-item handler
    */
    'onItemSelected'?: (event: CustomEvent<void>) => void;
    'role'?: string;
    /**
    * make the item selectable
    */
    'selectable'?: boolean;
    /**
    * Mark this item as selected.
    */
    'selected'?: boolean;
    /**
    * override la height par defaut du composant list-item.
    */
    'size'?: 'medium' | 'small';
    /**
    * Coupe le text par defaut.
    */
    'textWrap'?: boolean;
  }
  interface MaterialsListItemCheckbox extends JSXBase.HTMLAttributes<HTMLMaterialsListItemCheckboxElement> {
    'checked'?: boolean;
    'color'?: string;
    'disabled'?: boolean;
    'itemEndStyle'?: any;
    'itemStartStyle'?: any;
    'label'?: string;
    'noPadding'?: boolean;
    'onChange'?: (event: CustomEvent<any>) => void;
    'size'?: HTMLMaterialsListItemElement["size"];
    /**
    * Coupe le text par defaut.
    */
    'textWrap'?: boolean;
    'value'?: string | number;
  }
  interface MaterialsMenu extends JSXBase.HTMLAttributes<HTMLMaterialsMenuElement> {
    /**
    * Max-height of the menu
    */
    'maxHeight'?: number;
    /**
    * Override default CSS mdc-list padding-top & bottom.
    */
    'noPadding'?: boolean;
  }
  interface MaterialsMultipleSelect extends JSXBase.HTMLAttributes<HTMLMaterialsMultipleSelectElement> {
    /**
    * Apply low density on the textfield
    */
    'dense'?: boolean;
    /**
    * Title displayed in the dialog
    */
    'dialogTitle'?: string;
    /**
    * Label displayed for the multi-select
    */
    'label'?: string;
    /**
    * Display selectable elements on many columns according to the max number of elements per columns allowed
    */
    'maxElementsColumn'?: number;
    /**
    * Event dispatched when multi-select value changes
    */
    'onChange'?: (event: CustomEvent<any>) => void;
    /**
    * Map of options selectable in the dialog
    */
    'options'?: Map<string, string>;
    /**
    * Adds an icon at the end of the text field
    */
    'trailingIcon'?: string;
    /**
    * list of selected elements
    */
    'value'?: string[];
  }
  interface MaterialsRadio extends JSXBase.HTMLAttributes<HTMLMaterialsRadioElement> {
    'alignEnd'?: boolean;
    'checked'?: boolean;
    'disabled'?: boolean;
    'label'?: string;
    'name'?: string;
    'noPadding'?: boolean;
    'onChange'?: (event: CustomEvent<any>) => void;
    'required'?: boolean;
    'value'?: string | number | string[];
  }
  interface MaterialsRadioGroup extends JSXBase.HTMLAttributes<HTMLMaterialsRadioGroupElement> {
    'label'?: string;
    'linebreak'?: boolean;
    'name'?: string;
    'onChange'?: (event: CustomEvent<any>) => void;
    'value'?: any;
  }
  interface MaterialsSelect extends JSXBase.HTMLAttributes<HTMLMaterialsSelectElement> {
    'box'?: boolean;
    'customValidation'?: () => Promise<string>;
    'defaultEmpty'?: boolean;
    'dense'?: boolean;
    'disabled'?: boolean;
    'helperText'?: string;
    'label'?: string;
    'leadingIcon'?: string;
    'name'?: string;
    'onChange'?: (event: CustomEvent<any>) => void;
    'onSelect'?: (event: CustomEvent<any>) => void;
    'options'?: Map<string | number, string>;
    'outlined'?: boolean;
    'required'?: boolean;
    'value'?: any;
    'width'?: string;
  }
  interface MaterialsSnackbar extends JSXBase.HTMLAttributes<HTMLMaterialsSnackbarElement> {
    'actionHandler'?: Function;
    'actionText'?: string;
    'dismissButton'?: boolean;
    'label'?: string;
    'leading'?: boolean;
    'onClose'?: (event: CustomEvent<any>) => void;
    'stacked'?: boolean;
    'timeout'?: number;
  }
  interface MaterialsSnackbarController extends JSXBase.HTMLAttributes<HTMLMaterialsSnackbarControllerElement> {}
  interface MaterialsStep extends JSXBase.HTMLAttributes<HTMLMaterialsStepElement> {
    'active'?: boolean;
    'confirmationText'?: string;
    'editable'?: boolean;
    'index'?: number;
    'isLast'?: boolean;
    'noPadding'?: boolean;
    'onPreviousStep'?: (event: CustomEvent<any>) => void;
    'onStepClick'?: (event: CustomEvent<any>) => void;
    'onSubmitStep'?: (event: CustomEvent<any>) => void;
    'onSubmitStepper'?: (event: CustomEvent<any>) => void;
    'optional'?: boolean;
    'showButtons'?: boolean;
    'status'?: 'valid' | 'invalid' | 'empty';
    'stepTitle'?: string;
    'summary'?: string;
  }
  interface MaterialsStepper extends JSXBase.HTMLAttributes<HTMLMaterialsStepperElement> {
    'activeStep'?: number;
    'inactiveSteps'?: number[];
    'showButtons'?: boolean;
  }
  interface MaterialsSubtitle extends JSXBase.HTMLAttributes<HTMLMaterialsSubtitleElement> {
    'level'?: '1' | '2';
  }
  interface MaterialsSwitch extends JSXBase.HTMLAttributes<HTMLMaterialsSwitchElement> {
    'checked'?: boolean;
    'disabled'?: boolean;
    'label'?: string;
    'onChange'?: (event: CustomEvent<any>) => void;
  }
  interface MaterialsTab extends JSXBase.HTMLAttributes<HTMLMaterialsTabElement> {
    'active'?: boolean;
    'icon'?: string;
    'indicatorType'?: 'underline' | 'icon';
    'label'?: string;
    'minWidth'?: boolean;
  }
  interface MaterialsTabs extends JSXBase.HTMLAttributes<HTMLMaterialsTabsElement> {
    'activeTab'?: number;
    'color'?: 'background' | 'primary' | 'secondary' | 'surface';
    'indicatorType'?: 'underline' | 'icon';
    'onTabChange'?: (event: CustomEvent<number>) => void;
    'shrinkTabs'?: boolean;
  }
  interface MaterialsTextArea extends JSXBase.HTMLAttributes<HTMLMaterialsTextAreaElement> {
    'cols'?: number;
    'disabled'?: boolean;
    'fullwidth'?: boolean;
    'label'?: string;
    'onChange'?: (event: CustomEvent<any>) => void;
    'onInput'?: (event: CustomEvent<any>) => void;
    'outlined'?: boolean;
    'required'?: boolean;
    'rows'?: number;
    'value'?: string;
  }
  interface MaterialsTextField extends JSXBase.HTMLAttributes<HTMLMaterialsTextFieldElement> {
    'customValidation'?: () => Promise<string>;
    'dense'?: boolean;
    'disabled'?: boolean;
    'focused'?: boolean;
    'fullwidth'?: boolean;
    'helperText'?: string;
    /**
    * Hide clear button (webkit + Edge, Moz not supported)
    */
    'hideNativeClear'?: boolean;
    'label'?: string;
    'leadingIcon'?: string;
    /**
    * Add a title to the leading icon
    */
    'leadingIconTitle'?: string;
    'maxlength'?: number;
    'name'?: string;
    'onChange'?: (event: CustomEvent<any>) => void;
    'onInput'?: (event: CustomEvent<any>) => void;
    /**
    * Emitted when a leading icon is pressed
    */
    'onLeadingIconPress'?: (event: CustomEvent<any>) => void;
    /**
    * Emitted when a trailing icon is pressed
    */
    'onTrailingIconPress'?: (event: CustomEvent<any>) => void;
    'outlined'?: boolean;
    'overflow'?: boolean;
    'pattern'?: string;
    'persistent'?: boolean;
    'readonly'?: boolean;
    'required'?: boolean;
    'trailingIcon'?: string;
    /**
    * Add a title to the trailing icon
    */
    'trailingIconTitle'?: string;
    'type'?: string;
    'value'?: any;
    'width'?: number;
  }
  interface MaterialsTimeField extends JSXBase.HTMLAttributes<HTMLMaterialsTimeFieldElement> {
    /**
    * Provide a custom validation function to this time-field. In case of error, the promise should return a message with the error message to display
    */
    'customValidation'?: () => Promise<string>;
    /**
    * Styles the date field as a dense text field.
    */
    'dense'?: boolean;
    /**
    * Styles the date field as a disabled text field.
    */
    'disabled'?: boolean;
    /**
    * Styles the date field as a text field in focus.
    */
    'focused'?: boolean;
    /**
    * Styles the date field as a full width text field. Warning : do not use with outlined
    */
    'fullwidth'?: boolean;
    /**
    * Add an helper text to this date field
    */
    'helperText'?: string;
    /**
    * The date field label.
    */
    'label'?: string;
    /**
    * Add a leading icon to ths date field. You have to pass a material icon name
    */
    'leadingIcon'?: string;
    /**
    * Emitted when the input text change
    */
    'onInput'?: (event: CustomEvent<any>) => void;
    /**
    * Render an outlined date field
    */
    'outlined'?: boolean;
    /**
    * Set the helper text persistant (appears on focus otherwise)
    */
    'persistent'?: boolean;
    /**
    * Mark this date field as required
    */
    'required'?: boolean;
    /**
    * Display a timepicker when clicking on the time-field
    */
    'timepicker'?: boolean;
    /**
    * The timepicker format
    */
    'timepickerFormat'?: '12h' | '24h';
    /**
    * The timepicker options interval (in minutes)
    */
    'timepickerStep'?: number;
    /**
    * The date field value
    */
    'value'?: any;
    /**
    * The date field width
    */
    'width'?: number;
  }
  interface MaterialsTimepicker extends JSXBase.HTMLAttributes<HTMLMaterialsTimepickerElement> {
    'clock24'?: boolean;
    'onTimeSelectedChange'?: (event: CustomEvent<string>) => void;
    'step'?: number;
    'timeSelected'?: string;
  }
  interface MaterialsTopAppBar extends JSXBase.HTMLAttributes<HTMLMaterialsTopAppBarElement> {
    'barTitle'?: string;
    'dense'?: boolean;
    'fixed'?: boolean;
    'onToggleMenu'?: (event: CustomEvent<void>) => void;
    'prominent'?: boolean;
    'short'?: boolean;
  }
  interface MaterialsTopAppBarAction extends JSXBase.HTMLAttributes<HTMLMaterialsTopAppBarActionElement> {
    'actionTitle'?: string;
    'icon'?: string;
    'label'?: string;
  }

  interface IntrinsicElements {
    'materials-alert-controller': MaterialsAlertController;
    'materials-autocomplete': MaterialsAutocomplete;
    'materials-button': MaterialsButton;
    'materials-card': MaterialsCard;
    'materials-card-action': MaterialsCardAction;
    'materials-card-content': MaterialsCardContent;
    'materials-checkbox': MaterialsCheckbox;
    'materials-chip': MaterialsChip;
    'materials-datatable': MaterialsDatatable;
    'materials-datatable-action': MaterialsDatatableAction;
    'materials-datatable-body': MaterialsDatatableBody;
    'materials-datatable-body-cell': MaterialsDatatableBodyCell;
    'materials-datatable-body-row': MaterialsDatatableBodyRow;
    'materials-datatable-footer': MaterialsDatatableFooter;
    'materials-datatable-header': MaterialsDatatableHeader;
    'materials-datatable-header-column': MaterialsDatatableHeaderColumn;
    'materials-datatable-pagination': MaterialsDatatablePagination;
    'materials-date-field': MaterialsDateField;
    'materials-datepicker': MaterialsDatepicker;
    'materials-dialog': MaterialsDialog;
    'materials-dialog-controller': MaterialsDialogController;
    'materials-drawer': MaterialsDrawer;
    'materials-drawer-list-item': MaterialsDrawerListItem;
    'materials-drawer-with-top-app-bar': MaterialsDrawerWithTopAppBar;
    'materials-dropdown': MaterialsDropdown;
    'materials-expansion-panel': MaterialsExpansionPanel;
    'materials-fab': MaterialsFab;
    'materials-form-field': MaterialsFormField;
    'materials-headline': MaterialsHeadline;
    'materials-icon': MaterialsIcon;
    'materials-icon-button': MaterialsIconButton;
    'materials-linear-progress': MaterialsLinearProgress;
    'materials-list': MaterialsList;
    'materials-list-item': MaterialsListItem;
    'materials-list-item-checkbox': MaterialsListItemCheckbox;
    'materials-menu': MaterialsMenu;
    'materials-multiple-select': MaterialsMultipleSelect;
    'materials-radio': MaterialsRadio;
    'materials-radio-group': MaterialsRadioGroup;
    'materials-select': MaterialsSelect;
    'materials-snackbar': MaterialsSnackbar;
    'materials-snackbar-controller': MaterialsSnackbarController;
    'materials-step': MaterialsStep;
    'materials-stepper': MaterialsStepper;
    'materials-subtitle': MaterialsSubtitle;
    'materials-switch': MaterialsSwitch;
    'materials-tab': MaterialsTab;
    'materials-tabs': MaterialsTabs;
    'materials-text-area': MaterialsTextArea;
    'materials-text-field': MaterialsTextField;
    'materials-time-field': MaterialsTimeField;
    'materials-timepicker': MaterialsTimepicker;
    'materials-top-app-bar': MaterialsTopAppBar;
    'materials-top-app-bar-action': MaterialsTopAppBarAction;
  }
}

export { LocalJSX as JSX };


declare module "@stencil/core" {
  export namespace JSX {
    interface IntrinsicElements extends LocalJSX.IntrinsicElements {}
  }
}