@esri/calcite-components 1.0.0-beta.68 → 1.0.0-beta.71

package/dist/types/components/calcite-alert/calcite-alert.d.ts

@@ -32,9 +32,11 @@ export declare class CalciteAlert {
   /** specify the scale of the button, defaults to m */
   scale: Scale;
   updateRequestedIcon(): void;
+  updateDuration(): void;
   connectedCallback(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
+  disconnectedCallback(): void;
   render(): VNode;
   /** Fired when an alert is closed */
   calciteAlertClose: EventEmitter;
@@ -66,8 +68,9 @@ export declare class CalciteAlert {
   private closeButton?;
   /** the slotted alert link child element  */
   private alertLinkEl?;
-  private autoDismissTimeout;
+  private autoDismissTimeoutId;
   private queueTimeout;
+  private trackTimer;
   /** the computed icon to render */
   requestedIcon?: string;
   /** determine which alert is active */

package/dist/types/components/calcite-checkbox/calcite-checkbox.d.ts

@@ -1,14 +1,13 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
+import { CheckableFormCompoment } from "../../utils/form";
 import { LabelableComponent } from "../../utils/label";
-export declare class CalciteCheckbox implements LabelableComponent {
+export declare class CalciteCheckbox implements LabelableComponent, CheckableFormCompoment {
   el: HTMLCalciteCheckboxElement;
   /** The checked state of the checkbox. */
   checked: boolean;
-  checkedWatcher(newChecked: boolean): void;
   /** True if the checkbox is disabled */
   disabled: boolean;
-  disabledChanged(disabled: boolean): void;
   /** The id attribute of the checkbox.  When omitted, a globally unique identifier is used. */
   guid: string;
   /**
@@ -28,24 +27,29 @@ export declare class CalciteCheckbox implements LabelableComponent {
    */
   label?: string;
   /** The name of the checkbox input */
-  name?: string;
-  nameChanged(newName: string): void;
+  name: any;
+  /**
+   * When true, makes the component required for form-submission.
+   *
+   * @internal
+   */
+  required: boolean;
   /** specify the scale of the checkbox, defaults to m */
   scale: Scale;
   /** The value of the checkbox input */
-  value?: any;
-  private readonly checkedPath;
-  private readonly indeterminatePath;
-  private initialChecked;
-  private input;
+  value: any;
+  readonly checkedPath = "M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z";
+  readonly indeterminatePath = "M13 8v1H3V8z";
   labelEl: HTMLCalciteLabelElement;
-  /** The focused state of the checkbox. */
-  focused: boolean;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteCheckbox["checked"];
+  toggleEl: HTMLDivElement;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
-  private getPath;
-  private toggle;
-  private clickHandler;
+  getPath: () => string;
+  toggle: () => void;
+  keyDownHandler: (event: KeyboardEvent) => void;
+  clickHandler: () => void;
   /**
    * Emitted when the checkbox is blurred
    *
@@ -60,15 +64,10 @@ export declare class CalciteCheckbox implements LabelableComponent {
    * @internal
    */
   calciteInternalCheckboxFocus: EventEmitter;
-  mouseenter(): void;
-  mouseleave(): void;
-  private formResetHandler;
-  private onInputBlur;
-  private onInputFocus;
-  onLabelClick(): void;
+  onToggleBlur: () => void;
+  onToggleFocus: () => void;
+  onLabelClick: () => void;
   connectedCallback(): void;
-  componentDidLoad(): void;
   disconnectedCallback(): void;
-  private renderHiddenCheckboxInput;
   render(): VNode;
 }

package/dist/types/components/calcite-color-picker/calcite-color-picker.d.ts

@@ -134,11 +134,11 @@ export declare class CalciteColorPicker {
   handleValueChange(value: ColorValue | null, oldValue: ColorValue | null): void;
   private get baseColorFieldColor();
   private activeColorFieldAndSliderRect;
-  private colorUpdateLocked;
   private colorFieldAndSliderHovered;
   private fieldAndSliderRenderingContext;
   private colorFieldScopeNode;
   private hueThumbState;
+  private internalColorUpdateContext;
   private previousColor;
   private mode;
   private shiftKeyChannelAdjustment;
@@ -192,7 +192,6 @@ export declare class CalciteColorPicker {
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   componentWillLoad(): void;
-  connectedCallback(): void;
   disconnectedCallback(): void;
   render(): VNode;
   private storeColorFieldScope;

package/dist/types/components/calcite-combobox/calcite-combobox.d.ts

@@ -5,6 +5,7 @@ import { StrictModifiers } from "@popperjs/core";
 import { Scale } from "../interfaces";
 import { ComboboxSelectionMode, ComboboxChildElement } from "./interfaces";
 import { LabelableComponent } from "../../utils/label";
+import { FormComponent } from "../../utils/form";
 interface ItemData {
   label: string;
   value: string;
@@ -12,7 +13,7 @@ interface ItemData {
 /**
  * @slot - A slot for adding `calcite-combobox-item`s.
  */
-export declare class CalciteCombobox implements LabelableComponent {
+export declare class CalciteCombobox implements LabelableComponent, FormComponent {
   el: HTMLCalciteComboboxElement;
   /** Opens or closes the combobox */
   active: boolean;
@@ -26,10 +27,18 @@ export declare class CalciteCombobox implements LabelableComponent {
   /** Specify the maximum number of combobox items (including nested children) to display before showing the scroller */
   maxItems: number;
   maxItemsHandler(): void;
+  /** The name of the switch input */
+  name: string;
   /** Allow entry of custom values which are not in the original set of items */
   allowCustomValues: boolean;
   /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
   overlayPositioning: OverlayPositioning;
+  /**
+   * When true, makes the component required for form-submission.
+   *
+   * @internal
+   */
+  required: boolean;
   /** specify the selection mode
    * - multi: allow any number of selected items (default)
    * - single: only one selection)
@@ -38,6 +47,9 @@ export declare class CalciteCombobox implements LabelableComponent {
   selectionMode: ComboboxSelectionMode;
   /** Specify the scale of the combobox, defaults to m */
   scale: Scale;
+  /** The value(s) of the selectedItem(s) */
+  value: string | string[];
+  valueHandler(value: string | string[]): void;
   documentClickHandler(event: Event): void;
   calciteComboboxItemChangeHandler(event: CustomEvent<HTMLCalciteComboboxItemElement>): void;
   /** Updates the position of the component. */
@@ -74,12 +86,17 @@ export declare class CalciteCombobox implements LabelableComponent {
   calciteComboboxClose: EventEmitter;
   connectedCallback(): void;
   componentWillLoad(): void;
+  componentDidLoad(): void;
   componentDidRender(): void;
   disconnectedCallback(): void;
+  internalValueChangeFlag: boolean;
   labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteCombobox["value"];
   items: HTMLCalciteComboboxItemElement[];
   groupItems: HTMLCalciteComboboxItemGroupElement[];
   selectedItems: HTMLCalciteComboboxItemElement[];
+  selectedItemsHandler(): void;
   visibleItems: HTMLCalciteComboboxItemElement[];
   needsIcon: boolean;
   hideList: boolean;
@@ -103,14 +120,15 @@ export declare class CalciteCombobox implements LabelableComponent {
   private listContainerEl;
   private ignoreSelectedEventsFlag;
   private activeTransitionProp;
-  onLabelClick(): void;
+  getValue: () => string | string[];
+  onLabelClick: () => void;
   keydownHandler: (event: KeyboardEvent) => void;
   private toggleCloseEnd;
   private toggleOpenEnd;
   transitionEnd: (event: TransitionEvent) => void;
   setMaxScrollerHeight: () => void;
   calciteChipDismissHandler: (event: CustomEvent<HTMLCalciteChipElement>, comboboxItem: HTMLCalciteComboboxItemElement) => void;
-  setFocusClick: () => void;
+  setFocusClick: (event: MouseEvent) => void;
   setInactiveIfNotContained: (event: Event) => void;
   setMenuEl: (el: HTMLDivElement) => void;
   setListContainerEl: (el: HTMLDivElement) => void;

package/dist/types/components/calcite-date-picker/calcite-date-picker.d.ts

@@ -6,17 +6,23 @@ export declare class CalciteDatePicker {
   /** Active range */
   activeRange?: "start" | "end";
   /** Selected date */
-  value?: string;
+  value?: string | string[];
   /**
    * Number at which section headings should start for this component.
    */
   headingLevel: HeadingLevel;
   /** Selected date as full date object*/
-  valueAsDate?: Date;
-  handleValueAsDate(date: Date): void;
-  /** Selected start date as full date object*/
+  valueAsDate?: Date | Date[];
+  handleValueAsDate(date: Date | Date[]): void;
+  /**
+   * Selected start date as full date object
+   * @deprecated use valueAsDate instead
+   */
   startAsDate?: Date;
-  /** Selected end date as full date object*/
+  /**
+   * Selected end date as full date object
+   * @deprecated use valueAsDate instead
+   */
   endAsDate?: Date;
   /** Earliest allowed date as full date object */
   minAsDate?: Date;
@@ -41,9 +47,15 @@ export declare class CalciteDatePicker {
   scale: "s" | "m" | "l";
   /** Range mode activation */
   range: boolean;
-  /** Selected start date */
+  /**
+   * Selected start date
+   * @deprecated use value instead
+   */
   start?: string;
-  /** Selected end date */
+  /**
+   * Selected end date
+   * @deprecated use value instead
+   */
   end?: string;
   /** Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */
   proximitySelectionDisabled: boolean;
@@ -75,7 +87,7 @@ export declare class CalciteDatePicker {
   private hoverRange;
   private mostRecentRangeValue?;
   keyUpHandler: (e: KeyboardEvent) => void;
-  valueWatcher(value: string): void;
+  valueHandler(value: string | string[]): void;
   startWatcher(start: string): void;
   endWatcher(end: string): void;
   private loadLocaleData;

package/dist/types/components/calcite-filter/calcite-filter.d.ts

@@ -4,12 +4,29 @@ export declare class CalciteFilter {
   /**
    * The input data. The filter uses this as the starting point, and returns items
    * that contain the string entered in the input, using a partial match and recursive search.
+   *
+   * @deprecated use `items` instead.
    */
   data: object[];
+  watchDataHandler(value: object[]): void;
+  /**
+   * The items to filter through. The filter uses this as the starting point, and returns items
+   * that contain the string entered in the input, using a partial match and recursive search.
+   *
+   * This property is required.
+   */
+  items: object[];
+  watchItemsHandler(): void;
   /**
    * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
    */
   disabled: boolean;
+  /**
+   * The resulting items after filtering.
+   *
+   * @readonly
+   */
+  filteredItems: CalciteFilter["items"];
   /**
    * A text label that will appear on the clear button.
    */
@@ -22,9 +39,14 @@ export declare class CalciteFilter {
    * Placeholder text for the input element's placeholder attribute
    */
   placeholder?: string;
+  /**
+   * Filter value.
+   */
+  value?: string;
+  valueHandler(value: string): void;
   el: HTMLCalciteFilterElement;
-  empty: boolean;
   textInput: HTMLCalciteInputElement;
+  connectedCallback(): void;
   /**
    * This event fires when the filter text changes.
    */
@@ -35,5 +57,6 @@ export declare class CalciteFilter {
   inputHandler: (event: CustomEvent) => void;
   keyDownHandler: ({ key }: KeyboardEvent) => void;
   clear: () => void;
+  updateFiltered(filtered: any[]): void;
   render(): VNode;
 }

package/dist/types/components/calcite-graph/calcite-graph.d.ts

@@ -20,6 +20,10 @@ export declare class CalciteGraph {
   highlightMin: number;
   /** End of highlight color if highlighting range */
   highlightMax: number;
+  /** Lowest point of the range */
+  min: number;
+  /** Highest point of the range */
+  max: number;
   render(): VNode;
   private graphId;
 }

package/dist/types/components/calcite-inline-editable/calcite-inline-editable.d.ts

@@ -11,6 +11,7 @@ export declare class CalciteInlineEditable implements LabelableComponent {
   disabledWatcher(disabled: boolean): void;
   /** specify whether the wrapped input element is editable, defaults to false */
   editingEnabled: boolean;
+  editingEnabledWatcher(newValue: boolean, oldValue: boolean): void;
   /** specify whether the confirm button should display a loading state, defaults to false */
   loading: boolean;
   /** specify whether save/cancel controls should be displayed when editingEnabled is true, defaults to false */
@@ -31,10 +32,9 @@ export declare class CalciteInlineEditable implements LabelableComponent {
   scale?: Scale;
   /** when controls, specify a callback to be executed prior to disabling editing. when provided, loading state will be handled automatically. */
   afterConfirm?: () => Promise<void>;
-  componentWillLoad(): void;
-  componentDidLoad(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentWillLoad(): void;
   render(): VNode;
   /**
    * @internal
@@ -49,19 +49,18 @@ export declare class CalciteInlineEditable implements LabelableComponent {
    */
   calciteInlineEditableEnableEditingChange: EventEmitter;
   blurHandler(): void;
-  onLabelClick(): void;
   private inputElement;
-  private htmlInput;
   private valuePriorToEditing;
+  private shouldEmitCancel;
   private enableEditingButton;
-  private editingCancelTransitionProp;
+  private cancelEditingButton;
   labelEl: HTMLCalciteLabelElement;
   setFocus(): Promise<void>;
+  onLabelClick(): void;
   transitionEnd: (event: TransitionEvent) => void;
   private get shouldShowControls();
   private enableEditing;
   private disableEditing;
-  private cancelEditingEnd;
   private cancelEditing;
   private escapeKeyHandler;
   private cancelEditingHandler;

package/dist/types/components/calcite-input/calcite-input.d.ts

@@ -3,10 +3,12 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { InputPlacement } from "./interfaces";
 import { Position } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
+import { FormComponent } from "../../utils/form";
+declare type NumberNudgeDirection = "up" | "down";
 /**
  * @slot action - A slot for positioning a button next to an input
  */
-export declare class CalciteInput implements LabelableComponent {
+export declare class CalciteInput implements LabelableComponent, FormComponent {
   el: HTMLCalciteInputElement;
   /** specify the alignment of the value of the input */
   alignment: Position;
@@ -21,6 +23,8 @@ export declare class CalciteInput implements LabelableComponent {
   disabledWatcher(): void;
   /** for number values, displays the locale's group separator */
   groupSeparator: boolean;
+  /** when true, the component will not be visible */
+  hidden: boolean;
   /** when used as a boolean set to true, show a default recommended icon for certain
    * input types (tel, password, email, date, time, search). You can also pass a
    * calcite-ui-icon name to this prop to display a requested icon for any input type */
@@ -61,7 +65,7 @@ export declare class CalciteInput implements LabelableComponent {
   /** Minimum length of the text input */
   minLength?: number;
   /** The name of the input */
-  name?: string;
+  name: string;
   /** specify the placement of the number buttons */
   numberButtonType?: InputPlacement;
   /** explicitly whitelist placeholder attribute */
@@ -80,6 +84,8 @@ export declare class CalciteInput implements LabelableComponent {
   step?: number | "any";
   /** optionally add suffix  **/
   suffixText?: string;
+  /** @internal adds inline styles for text input when slotted in calcite-inline-editable */
+  editingEnabled: boolean;
   /**
    * specify the input type
    *
@@ -87,19 +93,19 @@ export declare class CalciteInput implements LabelableComponent {
    */
   type: "color" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "number" | "password" | "search" | "tel" | "text" | "textarea" | "time" | "url" | "week";
   /** input value */
-  value?: string;
+  value: string;
   valueWatcher(newValue: string): void;
   updateRequestedIcon(): void;
   labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteInput["value"];
+  inlineEditableEl: HTMLCalciteInlineEditableElement;
   /** keep track of the rendered child type */
   private childEl?;
   /** keep track of the rendered child type */
   private childElType?;
   /** number text input element for locale */
   private childNumberEl?;
-  /** keep track of the initial value */
-  private defaultValue;
-  private form;
   get isClearable(): boolean;
   get isTextarea(): boolean;
   private minString?;
@@ -109,6 +115,7 @@ export declare class CalciteInput implements LabelableComponent {
   private requestedIcon?;
   /** determine if there is a slotted action for styling purposes */
   private slottedActionEl?;
+  private nudgeNumberValueIntervalId;
   localizedValue: string;
   connectedCallback(): void;
   disconnectedCallback(): void;
@@ -129,13 +136,13 @@ export declare class CalciteInput implements LabelableComponent {
   calciteInputInput: EventEmitter;
   /**
    * This event fires each time a new value is typed and committed.
-   * @internal
    */
-  calciteInputChange: EventEmitter;
-  keyDownHandler(event: KeyboardEvent): void;
+  calciteInputChange: EventEmitter<void>;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
+  keyDownHandler: (event: KeyboardEvent) => void;
   onLabelClick(): void;
+  incrementOrDecrementNumberValue(direction: NumberNudgeDirection, inputMax: number | null, inputMin: number | null, nativeEvent: KeyboardEvent | MouseEvent): void;
   private clearInputValue;
   private inputBlurHandler;
   private inputFocusHandler;
@@ -144,12 +151,16 @@ export declare class CalciteInput implements LabelableComponent {
   private inputNumberInputHandler;
   private inputNumberKeyDownHandler;
   private nudgeNumberValue;
-  private numberButtonClickHandler;
-  private reset;
+  private numberButtonMouseUpAndMouseOutHandler;
+  private numberButtonMouseDownHandler;
+  onFormReset(): void;
+  syncHiddenFormInput(input: HTMLInputElement): void;
   private setChildElRef;
   private setChildNumberElRef;
   private setDisabledAction;
   private setLocalizedValue;
   private setValue;
+  private inputKeyUpHandler;
   render(): VNode;
 }
+export {};

package/dist/types/components/calcite-input/resources.d.ts

@@ -1,6 +1,8 @@
 export declare const CSS: {
   loader: string;
   clearButton: string;
+  editingEnabled: string;
+  inlineChild: string;
   inputIcon: string;
   prefix: string;
   suffix: string;

package/dist/types/components/calcite-input-date-picker/calcite-input-date-picker.d.ts

@@ -1,22 +1,34 @@
 import { VNode, EventEmitter } from "../../stencil-public-runtime";
 import { HeadingLevel } from "../functional/CalciteHeading";
 import { LabelableComponent } from "../../utils/label";
+import { FormComponent } from "../../utils/form";
 import { OverlayPositioning } from "../../utils/popper";
 import { StrictModifiers } from "@popperjs/core";
 import { DateRangeChange } from "../calcite-date-picker/interfaces";
-export declare class CalciteInputDatePicker implements LabelableComponent {
+export declare class CalciteInputDatePicker implements LabelableComponent, FormComponent {
   el: HTMLCalciteInputDatePickerElement;
+  /**
+   * When false, the component won't be interactive.
+   */
+  disabled: boolean;
   /** Selected date */
-  value?: string;
+  value: string | string[];
+  valueHandler(value: string | string[]): void;
   /**
    * Number at which section headings should start for this component.
    */
   headingLevel: HeadingLevel;
   /** Selected date as full date object*/
-  valueAsDate?: Date;
-  /** Selected start date as full date object*/
+  valueAsDate?: Date | Date[];
+  /**
+   * Selected start date as full date object
+   * @deprecated use valueAsDate instead
+   */
   startAsDate?: Date;
-  /** Selected end date as full date object*/
+  /**
+   * Selected end date as full date object
+   * @deprecated use valueAsDate instead
+   */
   endAsDate?: Date;
   /** Earliest allowed date as full date object */
   minAsDate?: Date;
@@ -29,6 +41,10 @@ export declare class CalciteInputDatePicker implements LabelableComponent {
   /** Expand or collapse when calendar does not have input */
   active: boolean;
   activeHandler(): void;
+  /**
+   * The picker's name. Gets submitted with the form.
+   */
+  name: string;
   /** Localized string for "previous month" (used for aria label)
    * @default "Previous month"
    */
@@ -43,9 +59,21 @@ export declare class CalciteInputDatePicker implements LabelableComponent {
   scale: "s" | "m" | "l";
   /** Range mode activation */
   range: boolean;
-  /** Selected start date */
+  /**
+   * When true, makes the component required for form-submission.
+   *
+   * @internal
+   */
+  required: boolean;
+  /**
+   * Selected start date
+   * @deprecated use value instead
+   */
   start?: string;
-  /** Selected end date */
+  /**
+   * Selected end date
+   * @deprecated use value instead
+   */
   end?: string;
   /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
   overlayPositioning: OverlayPositioning;
@@ -80,6 +108,8 @@ export declare class CalciteInputDatePicker implements LabelableComponent {
   disconnectedCallback(): void;
   render(): VNode;
   labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteInputDatePicker["value"];
   focusedInput: "start" | "end";
   private localeData;
   private startInput;
@@ -107,7 +137,6 @@ export declare class CalciteInputDatePicker implements LabelableComponent {
   getModifiers(): Partial<StrictModifiers>[];
   createPopper(): void;
   destroyPopper(): void;
-  valueWatcher(value: string): void;
   startWatcher(start: string): void;
   endWatcher(end: string): void;
   private loadLocaleData;

package/dist/types/components/calcite-input-time-picker/calcite-input-time-picker.d.ts

@@ -2,7 +2,8 @@ import { VNode, EventEmitter } from "../../stencil-public-runtime";
 import { HourDisplayFormat } from "../../utils/time";
 import { Scale } from "../interfaces";
 import { LabelableComponent } from "../../utils/label";
-export declare class CalciteInputTimePicker implements LabelableComponent {
+import { FormComponent } from "../../utils/form";
+export declare class CalciteInputTimePicker implements LabelableComponent, FormComponent {
   el: HTMLCalciteInputTimePickerElement;
   /** The active state of the time input */
   active: boolean;
@@ -35,15 +36,23 @@ export declare class CalciteInputTimePicker implements LabelableComponent {
   /** aria-label for the second up button */
   intlSecondUp?: string;
   /** The name of the time input */
-  name?: string;
+  name: string;
+  /**
+   * When true, makes the component required for form-submission.
+   *
+   * @internal
+   */
+  required: boolean;
   /** The scale (size) of the time input */
   scale: Scale;
-  /** number that specifies the granularity that the value must adhere to */
+  /** number (seconds) that specifies the granularity that the value must adhere to */
   step: number;
   /** The selected time (always 24-hour format)*/
   value: string;
   valueWatcher(newValue: string): void;
   labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteInputTimePicker["value"];
   private calciteInputEl;
   /** whether the value of the input was changed as a result of user typing or not */
   private internalValueChange;

package/dist/types/components/calcite-modal/calcite-modal.d.ts

@@ -55,9 +55,9 @@ export declare class CalciteModal {
   titleId: string;
   private activeTransitionProp;
   handleEscape(e: KeyboardEvent): void;
-  /** Fired when the modal begins the open animation */
+  /** Fired when the modal finishes the open animation */
   calciteModalOpen: EventEmitter;
-  /** Fired when the modal begins the close animation */
+  /** Fired when the modal finishes the close animation */
   calciteModalClose: EventEmitter;
   /**
    * Focus first interactive element

package/dist/types/components/calcite-panel/resources.d.ts

@@ -8,7 +8,9 @@ export declare const CSS: {
   headerActions: string;
   headerActionsEnd: string;
   headerActionsStart: string;
+  contentWrapper: string;
   contentContainer: string;
+  contentHeight: string;
   fabContainer: string;
   footer: string;
   menuContainer: string;