@esri/calcite-components 1.0.0-beta.74 → 1.0.0-beta.75

package/dist/types/components/calcite-list-item/calcite-list-item.d.ts

@@ -1,4 +1,5 @@
 import { VNode } from "../../stencil-public-runtime";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
  * @slot actions-start - A slot for adding actionable `calcite-action` elements before the content of the list item.
@@ -6,7 +7,7 @@ import { VNode } from "../../stencil-public-runtime";
  * @slot content-end - A slot for adding non-actionable elements after the label and description of the list item.
  * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the list item.
  */
-export declare class CalciteListItem {
+export declare class CalciteListItem implements ConditionalSlotComponent {
   /**
    * When true, prevents the content of the list item from user interaction.
    */
@@ -25,6 +26,8 @@ export declare class CalciteListItem {
   label: string;
   el: HTMLCalciteListItemElement;
   focusEl: HTMLButtonElement;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   renderActionsStart(): VNode;

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

@@ -1,6 +1,7 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { ModalBackgroundColor } from "./interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot header - a slot for adding a modal header
  * @slot content - a slot for adding modal content
@@ -8,7 +9,7 @@ import { ModalBackgroundColor } from "./interfaces";
  * @slot secondary - a slot for adding a secondary button
  * @slot back - a slot for adding a back button
  */
-export declare class CalciteModal {
+export declare class CalciteModal implements ConditionalSlotComponent {
   el: HTMLCalciteModalElement;
   /** Add the active attribute to open the modal */
   active: boolean;

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

@@ -1,6 +1,7 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale, Width } from "../interfaces";
 import { StatusColor } from "../calcite-alert/interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /** Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
  * notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.
  * They are optionally dismissible - useful for keeping track of whether or not a user has dismissed the notice. You can also choose not
@@ -12,7 +13,7 @@ import { StatusColor } from "../calcite-alert/interfaces";
  * @slot link - Optional action to take from the notice (undo, try again, link to page, etc.)
  * @slot actions-end - Allows adding a `calcite-action` at the end of the notice. It is recommended to use 2 or less actions.
  */
-export declare class CalciteNotice {
+export declare class CalciteNotice implements ConditionalSlotComponent {
   el: HTMLCalciteNoticeElement;
   /** Is the notice currently active or not */
   active: boolean;
@@ -32,6 +33,8 @@ export declare class CalciteNotice {
   /** specify the width of the notice, defaults to auto */
   width: Width;
   updateRequestedIcon(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
   render(): VNode;

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

@@ -1,6 +1,7 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Scale } from "../interfaces";
 import { HeadingLevel } from "../functional/CalciteHeading";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding custom content.
  * @slot header-actions-start - A slot for adding actions or content to the start side of the panel header.
@@ -11,7 +12,7 @@ import { HeadingLevel } from "../functional/CalciteHeading";
  * @slot footer-actions - A slot for adding buttons to the footer.
  * @slot footer - A slot for adding custom content to the footer.
  */
-export declare class CalcitePanel {
+export declare class CalcitePanel implements ConditionalSlotComponent {
   /**
    * Hides the panel.
    */
@@ -77,6 +78,8 @@ export declare class CalcitePanel {
   backButtonEl: HTMLCalciteActionElement;
   dismissButtonEl: HTMLCalciteActionElement;
   containerEl: HTMLElement;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   /**
    * Emitted when the close button has been clicked.
    */
@@ -108,11 +111,7 @@ export declare class CalcitePanel {
   renderHeaderActionsEnd(): VNode;
   renderMenu(): VNode;
   renderHeaderNode(): VNode;
-  /**
-   * Allows user to override the entire footer node.
-   */
-  renderFooterSlottedContent(): VNode;
-  renderFooterActions(): VNode;
+  renderFooterNode(): VNode;
   renderContent(): VNode;
   renderFab(): VNode;
   render(): VNode;

package/dist/types/components/calcite-pick-list-group/calcite-pick-list-group.d.ts

@@ -1,9 +1,10 @@
 import { VNode } from "../../stencil-public-runtime";
 import { HeadingLevel } from "../functional/CalciteHeading";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding `calcite-pick-list-item` elements.
  */
-export declare class CalcitePickListGroup {
+export declare class CalcitePickListGroup implements ConditionalSlotComponent {
   /**
    * The title used for all nested `calcite-pick-list` rows.
    *
@@ -14,5 +15,7 @@ export declare class CalcitePickListGroup {
    */
   headingLevel: HeadingLevel;
   el: HTMLCalcitePickListGroupElement;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   render(): VNode;
 }

package/dist/types/components/calcite-pick-list-item/calcite-pick-list-item.d.ts

@@ -1,10 +1,11 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ICON_TYPES } from "../calcite-pick-list/resources";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot actions-end - a slot for adding actions or content to the end side of the item.
  * @slot actions-start - a slot for adding actions or content to the start side of the item.
  */
-export declare class CalcitePickListItem {
+export declare class CalcitePickListItem implements ConditionalSlotComponent {
   /**
    * An optional description for this item.  This will appear below the label text.
    */
@@ -59,6 +60,8 @@ export declare class CalcitePickListItem {
   el: HTMLCalcitePickListItemElement;
   private focusEl;
   shiftPressed: boolean;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   /**
    * Emitted whenever the item is selected or unselected.
    */

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

@@ -1,4 +1,5 @@
 import { VNode } from "../../stencil-public-runtime";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding content to the shell. This content will appear between any leading and trailing panels added to the shell. (eg. a map)
  * @slot header - A slot for adding header content. This content will be positioned at the top of the shell.
@@ -7,12 +8,14 @@ import { VNode } from "../../stencil-public-runtime";
  * @slot contextual-panel - A slot for adding the trailing `calcite-shell-panel`.
  * @slot center-row - A slot for adding custom content in the center row.
  */
-export declare class CalciteShell {
+export declare class CalciteShell implements ConditionalSlotComponent {
   /**
    * Positions the center content behind any calcite-shell-panels.
    */
   contentBehind: boolean;
   el: HTMLCalciteShellElement;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   renderHeader(): VNode;
   renderContent(): VNode[];
   renderFooter(): VNode;

package/dist/types/components/calcite-shell-center-row/calcite-shell-center-row.d.ts

@@ -1,10 +1,11 @@
 import { VNode } from "../../stencil-public-runtime";
 import { Position, Scale } from "../interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding content to the shell panel.
  * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
  */
-export declare class CalciteShellCenterRow {
+export declare class CalciteShellCenterRow implements ConditionalSlotComponent {
   /**
    * This property makes the content area appear like a "floating" panel.
    */
@@ -18,5 +19,7 @@ export declare class CalciteShellCenterRow {
    */
   position: Position;
   el: HTMLCalciteShellCenterRowElement;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   render(): VNode;
 }

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

@@ -1,10 +1,11 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { Position, Scale } from "../interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding content to the shell panel.
  * @slot action-bar - A slot for adding a `calcite-action-bar` to the panel.
  */
-export declare class CalciteShellPanel {
+export declare class CalciteShellPanel implements ConditionalSlotComponent {
   /**
    * Hide the content panel.
    */
@@ -35,6 +36,7 @@ export declare class CalciteShellPanel {
    * This property makes the content area resizable if the calcite-shell-panel is not 'detached'.
    */
   resizable: boolean;
+  connectedCallback(): void;
   disconnectedCallback(): void;
   componentDidLoad(): void;
   el: HTMLCalciteShellPanelElement;

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

@@ -1,9 +1,10 @@
 import { VNode } from "../../stencil-public-runtime";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot content-start - A slot for adding non-actionable elements before the tile content.
  * @slot content-end - A slot for adding non-actionable elements after the tile content.
  */
-export declare class CalciteTile {
+export declare class CalciteTile implements ConditionalSlotComponent {
   el: HTMLCalciteTileElement;
   /** The active state of the tile. */
   active: boolean;
@@ -28,6 +29,8 @@ export declare class CalciteTile {
   href?: string;
   /** The icon that appears at the top of the tile. */
   icon?: string;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   renderTile(): VNode;
   render(): VNode;
 }

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

@@ -1,10 +1,11 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { HeadingLevel } from "../functional/CalciteHeading";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding text and a hyperlink.
  * @slot thumbnail - A slot for adding an HTML image element to the tip.
  */
-export declare class CalciteTip {
+export declare class CalciteTip implements ConditionalSlotComponent {
   /**
    * No longer displays the tip.
    */
@@ -30,6 +31,8 @@ export declare class CalciteTip {
    */
   intlClose?: string;
   el: HTMLCalciteTipElement;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   /**
    * Emitted when the component has been dismissed.
    */

package/dist/types/components/calcite-tree-item/calcite-tree-item.d.ts

@@ -2,11 +2,12 @@ import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { TreeItemSelectDetail } from "./interfaces";
 import { TreeSelectionMode } from "../calcite-tree/interfaces";
 import { Scale } from "../interfaces";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding content to the item.
  * @slot children - A slot for adding nested `calcite-tree` elements.
  */
-export declare class CalciteTreeItem {
+export declare class CalciteTreeItem implements ConditionalSlotComponent {
   el: HTMLCalciteTreeItemElement;
   /** Is the item currently selected */
   selected: boolean;
@@ -37,6 +38,7 @@ export declare class CalciteTreeItem {
   /** @internal Tree selection-mode (set on parent) */
   selectionMode: TreeSelectionMode;
   connectedCallback(): void;
+  disconnectedCallback(): void;
   componentWillRender(): void;
   componentDidLoad(): void;
   render(): VNode;

package/dist/types/components/calcite-value-list-item/calcite-value-list-item.d.ts

@@ -1,10 +1,11 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ICON_TYPES } from "../calcite-pick-list/resources";
+import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot actions-end - A slot for adding actions or content to the end side of the item.
  * @slot actions-start - A slot for adding actions or content to the start side of the item.
  */
-export declare class CalciteValueListItem {
+export declare class CalciteValueListItem implements ConditionalSlotComponent {
   /**
    * An optional description for this item. Will appear below the label text.
    */
@@ -53,6 +54,8 @@ export declare class CalciteValueListItem {
   el: HTMLCalciteValueListItemElement;
   pickListItem: HTMLCalcitePickListItemElement;
   guid: string;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   /**
    * Used to toggle the selection state. By default this won't trigger an event.
    * The first argument allows the value to be coerced, rather than swapping values.

package/dist/types/components.d.ts

@@ -818,6 +818,11 @@ export namespace Components {
           * Disable combobox input
          */
         "disabled": boolean;
+        /**
+          * string to override the English "Remove tag" text for when an item is selected.
+          * @default "Remove tag"
+         */
+        "intlRemoveTag": string;
         /**
           * Aria label for combobox (required)
          */
@@ -1331,10 +1336,6 @@ export namespace Components {
           * Array of tuples describing a single data point ([x, y]) These data points should be sorted by x-axis value
          */
         "data": DataSeries;
-        /**
-          * Width of graph in pixels
-         */
-        "height": number;
         /**
           * End of highlight color if highlighting range
          */
@@ -1351,10 +1352,6 @@ export namespace Components {
           * Lowest point of the range
          */
         "min": number;
-        /**
-          * Width of graph in pixels
-         */
-        "width": number;
     }
     interface CalciteHandle {
         "activated": boolean;
@@ -1828,6 +1825,10 @@ export namespace Components {
           * is the link disabled
          */
         "disabled": boolean;
+        /**
+          * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
+         */
+        "download": string | boolean;
         /**
           * optionally pass a href - used to determine if the component should render as a link or an anchor
          */
@@ -4890,6 +4891,11 @@ declare namespace LocalJSX {
           * Disable combobox input
          */
         "disabled"?: boolean;
+        /**
+          * string to override the English "Remove tag" text for when an item is selected.
+          * @default "Remove tag"
+         */
+        "intlRemoveTag"?: string;
         /**
           * Aria label for combobox (required)
          */
@@ -5428,10 +5434,6 @@ declare namespace LocalJSX {
           * Array of tuples describing a single data point ([x, y]) These data points should be sorted by x-axis value
          */
         "data"?: DataSeries;
-        /**
-          * Width of graph in pixels
-         */
-        "height"?: number;
         /**
           * End of highlight color if highlighting range
          */
@@ -5448,10 +5450,6 @@ declare namespace LocalJSX {
           * Lowest point of the range
          */
         "min": number;
-        /**
-          * Width of graph in pixels
-         */
-        "width"?: number;
     }
     interface CalciteHandle {
         /**
@@ -5517,6 +5515,14 @@ declare namespace LocalJSX {
           * specify whether the confirm button should display a loading state, defaults to false
          */
         "loading"?: boolean;
+        /**
+          * Emitted when the cancel button gets clicked.
+         */
+        "onCalciteInlineEditableEditCancel"?: (event: CustomEvent<void>) => void;
+        /**
+          * Emitted when the check button gets clicked.
+         */
+        "onCalciteInlineEditableEditConfirm"?: (event: CustomEvent<void>) => void;
         /**
           * specify the scale of the inline-editable component, defaults to the scale of the wrapped calcite-input or the scale of the closest wrapping component with a set scale
          */
@@ -5917,6 +5923,10 @@ declare namespace LocalJSX {
           * is the link disabled
          */
         "disabled"?: boolean;
+        /**
+          * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
+         */
+        "download"?: string | boolean;
         /**
           * optionally pass a href - used to determine if the component should render as a link or an anchor
          */

package/dist/types/preact.d.ts

@@ -147,9 +147,9 @@ declare module "preact/src/jsx" {
 
       "calcite-icon": JSX.CalciteIcon & JSXInternal.HTMLAttributes<HTMLCalciteIconElement>
 
-      "calcite-inline-editable": Omit<JSX.CalciteInlineEditable, "onCalciteInlineEditableEditingCancel" | "onCalciteInlineEditableChangesConfirm" | "onCalciteInlineEditableEnableEditingChange"> & JSXInternal.HTMLAttributes<HTMLCalciteInlineEditableElement> & {
-        "oncalciteInlineEditableEditingCancel"?: (event: CustomEvent<any>) => void;
-        "oncalciteInlineEditableChangesConfirm"?: (event: CustomEvent<any>) => void;
+      "calcite-inline-editable": Omit<JSX.CalciteInlineEditable, "onCalciteInlineEditableEditCancel" | "onCalciteInlineEditableEditConfirm" | "onCalciteInlineEditableEnableEditingChange"> & JSXInternal.HTMLAttributes<HTMLCalciteInlineEditableElement> & {
+        "oncalciteInlineEditableEditCancel"?: (event: CustomEvent<any>) => void;
+        "oncalciteInlineEditableEditConfirm"?: (event: CustomEvent<any>) => void;
         "oncalciteInlineEditableEnableEditingChange"?: (event: CustomEvent<any>) => void;
       }
 

package/dist/types/utils/dom.d.ts

@@ -39,6 +39,7 @@ export declare function focusElement(el: CalciteFocusableElement): Promise<void>
 interface GetSlottedOptions {
   all?: boolean;
   direct?: boolean;
+  matches?: string;
   selector?: string;
 }
 export declare function getSlotted<T extends Element = Element>(element: Element, slotName: string | string[] | (GetSlottedOptions & {

package/dist/types/utils/globalAttributes.d.ts

@@ -0,0 +1,35 @@
+declare type AttributeObject = {
+  [k: string]: any;
+};
+declare type AllowedGlobalAttribute = "lang";
+/**
+ * Watches global attributes of a component.
+ *
+ * Derived from: https://gist.github.com/willmartian/b4dd6b57d71dd0438fb9e7c6f4048578
+ */
+export interface GlobalAttrComponent {
+  /**
+   * The host element.
+   */
+  readonly el: HTMLElement;
+  /**
+   * The watched attributes object.
+   * Should be stateful.
+   * '@State() inheritedAttributes = {};'
+   */
+  globalAttributes: AttributeObject;
+}
+/**
+ * Helper to set up listening for changes to global attributes.
+ *
+ * render(): VNode {
+ *   const lang = this.inheritedAttributes['lang'] ?? 'en';
+ *   return <div>My lang is {lang}</div>;
+ * }
+ */
+export declare function watchGlobalAttributes(component: GlobalAttrComponent, attributeFilter: AllowedGlobalAttribute[]): void;
+/**
+ * Helper remove listening for changes to inherited attributes.
+ */
+export declare function unwatchGlobalAttributes(component: GlobalAttrComponent): void;
+export {};