@esri/calcite-components 1.0.0-beta.79 → 1.0.0-beta.80

package/dist/types/components/button/button.d.ts

@@ -0,0 +1,80 @@
+import "form-request-submit-polyfill/form-request-submit-polyfill";
+import { VNode } from "../../stencil-public-runtime";
+import { ButtonAlignment, ButtonAppearance, ButtonColor } from "./interfaces";
+import { FlipContext, Scale, Width } from "../interfaces";
+import { LabelableComponent } from "../../utils/label";
+import { InteractiveComponent } from "../../utils/interactive";
+/** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */
+/** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */
+/** @slot - A slot for adding text. */
+export declare class Button implements LabelableComponent, InteractiveComponent {
+  el: HTMLCalciteButtonElement;
+  /** optionally specify alignment of button elements. */
+  alignment?: ButtonAlignment;
+  /** specify the appearance style of the button, defaults to solid. */
+  appearance: ButtonAppearance;
+  /** Applies to the aria-label attribute on the button or hyperlink */
+  label?: string;
+  /** specify the color of the button, defaults to blue */
+  color: ButtonColor;
+  /** is the button disabled  */
+  disabled: boolean;
+  /** optionally pass a href - used to determine if the component should render as a button or an anchor */
+  href?: string;
+  /** optionally pass an icon to display at the end of a button - accepts calcite ui icon names  */
+  iconEnd?: string;
+  /** flip the icon(s) in rtl */
+  iconFlipRtl?: FlipContext;
+  /** optionally pass an icon to display at the start of a button - accepts calcite ui icon names  */
+  iconStart?: string;
+  /** string to override English loading text
+   * @default "Loading"
+   */
+  intlLoading?: string;
+  /** optionally add a calcite-loader component to the button, disabling interaction.  */
+  loading: boolean;
+  /** The name attribute to apply to the button */
+  name?: string;
+  /** The rel attribute to apply to the hyperlink */
+  rel?: string;
+  /**
+   * The form ID to associate with the component
+   *
+   * @deprecated – this property is no longer needed if placed inside a form.
+   */
+  form?: string;
+  /** optionally add a round style to the button  */
+  round: boolean;
+  /** specify the scale of the button, defaults to m */
+  scale: Scale;
+  /** is the button a child of a calcite-split-button */
+  splitChild?: "primary" | "secondary" | false;
+  /** The target attribute to apply to the hyperlink */
+  target?: string;
+  /** The type attribute to apply to the button */
+  type?: string;
+  /** specify the width of the button, defaults to auto */
+  width: Width;
+  loadingChanged(newValue: boolean, oldValue: boolean): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  componentWillLoad(): void;
+  componentDidRender(): void;
+  render(): VNode;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  formEl: HTMLFormElement;
+  labelEl: HTMLCalciteLabelElement;
+  /** watches for changing text content **/
+  private mutationObserver;
+  /** the rendered child element */
+  private childEl?;
+  /** determine if there is slotted content for styling purposes */
+  private hasContent;
+  /** determine if loader present for styling purposes */
+  private hasLoader;
+  private updateHasContent;
+  private setupTextContentObserver;
+  onLabelClick(): void;
+  private handleClick;
+}

package/dist/types/components/card/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 Card 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/checkbox/checkbox.d.ts

@@ -0,0 +1,75 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+import { CheckableFormCompoment } from "../../utils/form";
+import { LabelableComponent } from "../../utils/label";
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class Checkbox implements LabelableComponent, CheckableFormCompoment, InteractiveComponent {
+  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: Checkbox["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;
+  componentDidRender(): void;
+  render(): VNode;
+}

package/dist/types/components/chip/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 Chip 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/color-picker/color-picker.d.ts

@@ -0,0 +1,232 @@
+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";
+import { InteractiveComponent } from "../../utils/interactive";
+export declare class ColorPicker implements InteractiveComponent {
+  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;
+  /**
+   * When true, disabled prevents user interaction.
+   */
+  disabled: boolean;
+  /**
+   * The format of the value property.
+   *
+   * When "auto", the format will be inferred from `value` when set.
+   * @default "auto"
+   */
+  format: Format;
+  handleFormatChange(format: ColorPicker["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/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 hueScopeNode;
+  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;
+  componentDidRender(): void;
+  render(): VNode;
+  private storeColorFieldScope;
+  private storeHueScope;
+  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/color-picker-hex-input/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 ColorPickerHexInput {
+  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/color-picker-swatch/color-picker-swatch.d.ts

@@ -0,0 +1,23 @@
+import { VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
+export declare class ColorPickerSwatch {
+  /**
+   * 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;
+}