@esri/calcite-components 1.0.0-beta.72 → 1.0.0-beta.76

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

@@ -0,0 +1,46 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+/** Cards do not include a grid or bounding container
+ * - cards will expand to fit the width of their container
+ */
+/**
+ * @slot - A slot for adding subheader/description content.
+ * @slot thumbnail - A slot for adding a thumbnail to the card.
+ * @slot title - A slot for adding a card title.
+ * @slot subtitle - A slot for adding a card subtitle or short summary.
+ * @slot footer-leading - A slot for adding a leading footer.
+ * @slot footer-trailing - A slot for adding a trailing footer.
+ */
+export declare class CalciteCard implements ConditionalSlotComponent {
+  el: HTMLCalciteCardElement;
+  /**  When true, the cards content is waiting to be loaded. This state shows a busy indicator.*/
+  loading: boolean;
+  /** Indicates whether the card is selected. */
+  selected: boolean;
+  /** Indicates whether the card is selectable. */
+  selectable: boolean;
+  /** string to override English loading text
+   * @default "Loading"
+   */
+  intlLoading?: string;
+  /** string to override English select text for checkbox when selectable is true
+   * @default "Select"
+   */
+  intlSelect: string;
+  /** string to override English deselect text for checkbox when selectable is true
+   * @default "Deselect"
+   */
+  intlDeselect: string;
+  /** Fired when a selectable card is selected */
+  calciteCardSelect: EventEmitter;
+  connectedCallback(): void;
+  disonnectedCallback(): void;
+  render(): VNode;
+  private cardSelectClick;
+  private cardSelectKeyDown;
+  private selectCard;
+  private renderThumbnail;
+  private renderCheckbox;
+  private renderHeader;
+  private renderFooter;
+}

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

@@ -0,0 +1,73 @@
+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, CheckableFormCompoment {
+  el: HTMLCalciteCheckboxElement;
+  /** The checked state of the checkbox. */
+  checked: boolean;
+  /** True if the checkbox is disabled */
+  disabled: boolean;
+  /** The id attribute of the checkbox.  When omitted, a globally unique identifier is used. */
+  guid: string;
+  /**
+   * The hovered state of the checkbox.
+   * @internal
+   */
+  hovered: boolean;
+  /**
+   * True if the checkbox is initially indeterminate,
+   * which is independent from its checked state
+   * https://css-tricks.com/indeterminate-checkboxes/
+   * */
+  indeterminate: boolean;
+  /**
+   * The label of the checkbox input
+   * @internal
+   */
+  label?: string;
+  /** The name of the checkbox input */
+  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;
+  readonly checkedPath = "M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z";
+  readonly indeterminatePath = "M13 8v1H3V8z";
+  labelEl: HTMLCalciteLabelElement;
+  formEl: HTMLFormElement;
+  defaultValue: CalciteCheckbox["checked"];
+  toggleEl: HTMLDivElement;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  getPath: () => string;
+  toggle: () => void;
+  keyDownHandler: (event: KeyboardEvent) => void;
+  clickHandler: () => void;
+  /**
+   * Emitted when the checkbox is blurred
+   *
+   * @internal
+   */
+  calciteInternalCheckboxBlur: EventEmitter;
+  /** Emitted when the checkbox checked status changes */
+  calciteCheckboxChange: EventEmitter;
+  /**
+   * Emitted when the checkbox is focused
+   *
+   * @internal
+   */
+  calciteInternalCheckboxFocus: EventEmitter;
+  onToggleBlur: () => void;
+  onToggleFocus: () => void;
+  onLabelClick: () => void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): VNode;
+}

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

@@ -0,0 +1,40 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { ChipColor } from "./interfaces";
+import { Appearance, Scale } from "../interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
+/**
+ * @slot - A slot for adding text.
+ * @slot image - A slot for adding an image.
+ */
+export declare class CalciteChip implements ConditionalSlotComponent {
+  /** specify the appearance style of the button, defaults to solid. */
+  appearance: Extract<"solid" | "clear", Appearance>;
+  /** specify the color of the button, defaults to blue */
+  color: ChipColor;
+  /** Optionally show a button the user can click to dismiss the chip */
+  dismissible: boolean;
+  /** Aria label for the "x" button
+   * @default "Close"
+   */
+  dismissLabel?: string;
+  /** optionally pass an icon to display - accepts Calcite UI icon names  */
+  icon?: string;
+  /** flip the icon in rtl */
+  iconFlipRtl: boolean;
+  /** specify the scale of the chip, defaults to m */
+  scale: Scale;
+  /** The assigned value for the chip */
+  value: any;
+  el: HTMLCalciteChipElement;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  /** Emitted when the dismiss button is clicked */
+  calciteChipDismiss: EventEmitter;
+  closeClickHandler: (event: MouseEvent) => void;
+  private closeButton;
+  private guid;
+  renderChipImage(): VNode;
+  render(): VNode;
+}

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

@@ -0,0 +1,224 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import Color from "color";
+import { ColorAppearance, ColorMode, ColorValue, InternalColor } from "./interfaces";
+import { Scale } from "../interfaces";
+import { Format } from "./utils";
+export declare class CalciteColorPicker {
+  el: HTMLCalciteColorPickerElement;
+  /**
+   * When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component.
+   *
+   * When true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty.
+   */
+  allowEmpty: boolean;
+  /** specify the appearance - default (containing border), or minimal (no containing border) */
+  appearance: ColorAppearance;
+  /**
+   * Internal prop for advanced use-cases.
+   *
+   * @internal
+   */
+  color: InternalColor | null;
+  handleColorChange(color: Color | null, oldColor: Color | null): void;
+  /**
+   * The format of the value property.
+   *
+   * When "auto", the format will be inferred from `value` when set.
+   * @default "auto"
+   */
+  format: Format;
+  handleFormatChange(format: CalciteColorPicker["format"]): void;
+  /** When true, hides the hex input */
+  hideHex: boolean;
+  /** When true, hides the RGB/HSV channel inputs */
+  hideChannels: boolean;
+  /** When true, hides the saved colors section */
+  hideSaved: boolean;
+  /** Label used for the blue channel
+   * @default "B"
+   */
+  intlB: string;
+  /** Label used for the blue channel description
+   * @default "Blue"
+   */
+  intlBlue: string;
+  /** Label used for the delete color button.
+   * @default "Delete color"
+   */
+  intlDeleteColor: string;
+  /** Label used for the green channel
+   * @default "G"
+   */
+  intlG: string;
+  /** Label used for the green channel description
+   * @default "Green"
+   */
+  intlGreen: string;
+  /** Label used for the hue channel
+   * @default "H"
+   */
+  intlH: string;
+  /** Label used for the HSV mode
+   * @default "HSV"
+   */
+  intlHsv: string;
+  /** Label used for the hex input
+   * @default "Hex"
+   */
+  intlHex: string;
+  /** Label used for the hue channel description
+   * @default "Hue"
+   */
+  intlHue: string;
+  /**
+   * Label used for the hex input when there is no color selected.
+   * @default "No color"
+   */
+  intlNoColor: string;
+  /** Label used for the red channel
+   * @default "R"
+   */
+  intlR: string;
+  /** Label used for the red channel description
+   * @default "Red"
+   */
+  intlRed: string;
+  /** Label used for the RGB mode
+   * @default "RGB"
+   */
+  intlRgb: string;
+  /** Label used for the saturation channel
+   * @default "S"
+   */
+  intlS: string;
+  /** Label used for the saturation channel description
+   * @default "Saturation"
+   */
+  intlSaturation: string;
+  /** Label used for the save color button.
+   * @default "Save color"
+   */
+  intlSaveColor: string;
+  /** Label used for the saved colors section
+   * @default "Saved"
+   */
+  intlSaved: string;
+  /** Label used for the value channel
+   * @default "V"
+   */
+  intlV: string;
+  /** Label used for the
+   * @default "Value"
+   */
+  intlValue: string;
+  /**
+   * The scale of the color picker.
+   */
+  scale: Scale;
+  handleScaleChange(scale?: Scale): void;
+  /**
+   * Storage ID for colors.
+   */
+  storageId: string;
+  /**
+   * The color value.
+   *
+   * This value can be either a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color|CSS string}
+   * a RGB, HSL or HSV object.
+   *
+   * The type will be preserved as the color is updated.
+   * @default "#007ac2"
+   * @see [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-color-picker/interfaces.ts#L10)
+   */
+  value: ColorValue | null;
+  handleValueChange(value: ColorValue | null, oldValue: ColorValue | null): void;
+  private get baseColorFieldColor();
+  private activeColorFieldAndSliderRect;
+  private colorFieldAndSliderHovered;
+  private fieldAndSliderRenderingContext;
+  private colorFieldScopeNode;
+  private hueThumbState;
+  private internalColorUpdateContext;
+  private previousColor;
+  private mode;
+  private shiftKeyChannelAdjustment;
+  private sliderThumbState;
+  colorFieldAndSliderInteractive: boolean;
+  channelMode: ColorMode;
+  channels: [number, number, number];
+  dimensions: {
+    slider: {
+      height: number;
+      width: number;
+    };
+    colorField: {
+      height: number;
+      width: number;
+    };
+    thumb: {
+      radius: number;
+    };
+  };
+  savedColors: string[];
+  colorFieldScopeTop: number;
+  colorFieldScopeLeft: number;
+  scopeOrientation: "vertical" | "horizontal";
+  hueScopeLeft: number;
+  hueScopeTop: number;
+  /**
+   * Fires when the color value has changed.
+   */
+  calciteColorPickerChange: EventEmitter;
+  /**
+   * Fires as the color value changes.
+   *
+   * This is similar to the change event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved.
+   */
+  calciteColorPickerInput: EventEmitter;
+  private handleTabActivate;
+  private handleColorFieldScopeKeyDown;
+  private handleHueScopeKeyDown;
+  private handleHexInputChange;
+  private handleSavedColorSelect;
+  private handleChannelInput;
+  protected handleChannelKeyUpOrDown(event: KeyboardEvent): void;
+  private handleChannelChange;
+  private handleSavedColorKeyDown;
+  private handleColorFieldAndSliderMouseLeave;
+  private handleColorFieldAndSliderMouseDown;
+  private globalMouseUpHandler;
+  private globalMouseMoveHandler;
+  private handleColorFieldAndSliderMouseEnterOrMove;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  componentWillLoad(): void;
+  disconnectedCallback(): void;
+  render(): VNode;
+  private storeColorFieldScope;
+  private renderChannelsTabTitle;
+  private renderChannelsTab;
+  private renderChannel;
+  private showIncompatibleColorWarning;
+  private setMode;
+  private captureHueSliderColor;
+  private getCanvasRegion;
+  private internalColorSet;
+  private toValue;
+  private getSliderCapSpacing;
+  private updateDimensions;
+  private deleteColor;
+  private saveColor;
+  private drawColorFieldAndSlider;
+  private drawColorField;
+  private setCanvasContextSize;
+  private captureColorFieldColor;
+  private initColorFieldAndSlider;
+  private containsPoint;
+  private drawActiveColorFieldColor;
+  private drawThumb;
+  private drawActiveHueSliderColor;
+  private drawHueSlider;
+  private updateColorFromChannels;
+  private updateChannelsFromColor;
+  private toChannels;
+}

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

@@ -0,0 +1,51 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import Color from "color";
+import { Scale } from "../interfaces";
+export declare class CalciteColorPickerHexInput {
+  el: HTMLCalciteColorPickerHexInputElement;
+  connectedCallback(): void;
+  /**
+   * When false, empty color (null) will be allowed as a value. Otherwise, a color value is always enforced by the component.
+   *
+   * When true, clearing the input and blurring will restore the last valid color set. When false, it will set it to empty.
+   */
+  allowEmpty: boolean;
+  /**
+   * Label used for the hex input.
+   * @default "Hex"
+   */
+  intlHex: string;
+  /**
+   * Label used for the hex input when there is no color selected.
+   * @default "No color"
+   */
+  intlNoColor: string;
+  /**
+   * The component's scale.
+   */
+  scale: Scale;
+  /**
+   * The hex value.
+   */
+  value: string;
+  handleValueChange(value: string, oldValue: string): void;
+  /**
+   * Emitted when the hex value changes.
+   */
+  calciteColorPickerHexInputChange: EventEmitter;
+  private onCalciteInputBlur;
+  private onInputChange;
+  protected onInputKeyDown(event: KeyboardEvent): void;
+  private inputNode;
+  /**
+   * The last valid/selected color. Used as a fallback if an invalid hex code is entered.
+   */
+  internalColor: Color | null;
+  private previousNonNullValue;
+  render(): VNode;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  private storeInputRef;
+  private formatForInternalInput;
+  private nudgeRGBChannels;
+}

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

@@ -0,0 +1,23 @@
+import { VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+export declare class CalciteColorPickerSwatch {
+  /**
+   * Used to display whether the swatch is active or not.
+   */
+  active: boolean;
+  /**
+   * The color value.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+   */
+  color: string;
+  handleColorChange(color: string): void;
+  /**
+   * The component scale.
+   */
+  scale: Scale;
+  el: HTMLCalciteColorPickerSwatchElement;
+  private internalColor;
+  componentWillLoad(): void;
+  render(): VNode;
+}

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

@@ -0,0 +1,181 @@
+/// <reference types="lodash" />
+import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
+import { OverlayPositioning } from "../../utils/popper";
+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;
+}
+/**
+ * @slot - A slot for adding `calcite-combobox-item`s.
+ */
+export declare class CalciteCombobox implements LabelableComponent, FormComponent {
+  el: HTMLCalciteComboboxElement;
+  /** Opens or closes the combobox */
+  active: boolean;
+  activeHandler(newValue: boolean, oldValue: boolean): void;
+  /** Disable combobox input */
+  disabled: boolean;
+  /** Aria label for combobox (required) */
+  label: string;
+  /** Placeholder text for input */
+  placeholder?: string;
+  /** 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)
+   * - ancestors: like multi, but show ancestors of selected items as selected, only deepest children shown in chips
+   */
+  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;
+  /** string to override the English "Remove tag" text for when an item is selected.
+   * @default "Remove tag"
+   */
+  intlRemoveTag: string;
+  documentClickHandler(event: Event): void;
+  calciteComboboxItemChangeHandler(event: CustomEvent<HTMLCalciteComboboxItemElement>): void;
+  /** Updates the position of the component. */
+  reposition(): Promise<void>;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  /**
+   * Called when the selected items set changes
+   * @deprecated use calciteComboboxChange instead
+   */
+  calciteLookupChange: EventEmitter<HTMLCalciteComboboxItemElement[]>;
+  /**
+   * Called when the selected item(s) changes.
+   */
+  calciteComboboxChange: EventEmitter<{
+    selectedItems: HTMLCalciteComboboxItemElement[];
+  }>;
+  /** Called when the user has entered text to filter the options list */
+  calciteComboboxFilterChange: EventEmitter<{
+    visibleItems: HTMLCalciteComboboxItemElement[];
+    text: string;
+  }>;
+  /** Called when a selected item in the combobox is dismissed via its chip **/
+  calciteComboboxChipDismiss: EventEmitter;
+  /**
+   * Fired when the combobox is opened
+   * @internal
+   */
+  calciteComboboxOpen: EventEmitter;
+  /**
+   *  Fired when the combobox is closed
+   * @internal
+   */
+  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;
+  activeItemIndex: number;
+  activeChipIndex: number;
+  activeDescendant: string;
+  text: string;
+  open: boolean;
+  /** specifies the item wrapper height; it is updated when maxItems is > 0  **/
+  maxScrollerHeight: number;
+  /** when search text is cleared, reset active to  */
+  textHandler(): void;
+  textInput: HTMLInputElement;
+  data: ItemData[];
+  mutationObserver: MutationObserver;
+  private guid;
+  private inputHeight;
+  private popper;
+  private menuEl;
+  private referenceEl;
+  private listContainerEl;
+  private ignoreSelectedEventsFlag;
+  private activeTransitionProp;
+  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: (event: MouseEvent) => void;
+  setInactiveIfNotContained: (event: Event) => void;
+  setMenuEl: (el: HTMLDivElement) => void;
+  setListContainerEl: (el: HTMLDivElement) => void;
+  setReferenceEl: (el: HTMLDivElement) => void;
+  getModifiers(): Partial<StrictModifiers>[];
+  createPopper(): void;
+  destroyPopper(): void;
+  private getMaxScrollerHeight;
+  private calculateSingleItemHeight;
+  inputHandler: (event: Event) => void;
+  getCombinedItems(): ComboboxChildElement[];
+  filterItems: import("lodash").DebouncedFunc<(text: string) => void>;
+  internalCalciteLookupChangeEvent: () => void;
+  emitCalciteLookupChange: import("lodash").DebouncedFunc<() => void>;
+  internalComboboxChangeEvent: () => void;
+  emitComboboxChange: import("lodash").DebouncedFunc<() => void>;
+  toggleSelection(item: HTMLCalciteComboboxItemElement, value?: boolean): void;
+  updateAncestors(item: HTMLCalciteComboboxItemElement): void;
+  getVisibleItems(): HTMLCalciteComboboxItemElement[];
+  getSelectedItems(): HTMLCalciteComboboxItemElement[];
+  updateItems: () => void;
+  getData(): ItemData[];
+  getNeedsIcon(): boolean;
+  resetText(): void;
+  getItems(): HTMLCalciteComboboxItemElement[];
+  getGroupItems(): HTMLCalciteComboboxItemGroupElement[];
+  addCustomChip(value: string, focus?: boolean): void;
+  removeActiveChip(): void;
+  removeLastChip(): void;
+  previousChip(): void;
+  nextChip(): void;
+  focusChip(): void;
+  shiftActiveItemIndex(delta: number): void;
+  updateActiveItemIndex(index: number): void;
+  isMulti(): boolean;
+  comboboxFocusHandler: () => void;
+  comboboxBlurHandler: (event: FocusEvent) => void;
+  renderChips(): VNode[];
+  renderInput(): VNode;
+  renderListBoxOptions(): VNode[];
+  renderPopperContainer(): VNode;
+  renderIconStart(): VNode;
+  renderIconEnd(): VNode;
+  render(): VNode;
+}
+export {};

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

@@ -0,0 +1,6 @@
+export interface listItem {
+  label: string;
+  value: string;
+}
+export declare type ComboboxSelectionMode = "single" | "multi" | "ancestors";
+export declare type ComboboxChildElement = HTMLCalciteComboboxItemElement | HTMLCalciteComboboxItemGroupElement;

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

@@ -2,3 +2,6 @@ export declare const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export declare const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
 export declare const ComboboxChildSelector: string;
 export declare const ComboboxDefaultPlacement = "bottom-leading";
+export declare const TEXT: {
+  removeTag: string;
+};

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

@@ -0,0 +1,6 @@
+import { ComboboxChildElement } from "./interfaces";
+export declare function getAncestors(element: HTMLElement): ComboboxChildElement[];
+export declare function getItemAncestors(item: HTMLCalciteComboboxItemElement): HTMLCalciteComboboxItemElement[];
+export declare function getItemChildren(item: HTMLCalciteComboboxItemElement): HTMLCalciteComboboxItemElement[];
+export declare function hasActiveChildren(node: HTMLCalciteComboboxItemElement): boolean;
+export declare function getDepth(element: HTMLElement): number;