@esri/calcite-components 1.0.0-next.281 → 1.0.0-next.285

package/dist/collection/components/calcite-tile/calcite-tile.js

@@ -1,6 +1,19 @@
-import { Component, Fragment, h, Prop } from "@stencil/core";
+import { Component, Element, Fragment, h, Prop } from "@stencil/core";
+import { SLOTS } from "./resources";
+import { getSlotted } from "../../utils/dom";
+/**
+ * @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 class CalciteTile {
   constructor() {
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** The active state of the tile. */
+    this.active = false;
     /**
      * When true, prevents interaction.
      */
@@ -9,7 +22,7 @@ export class CalciteTile {
     this.embed = false;
     /**
      * The focused state of the tile.
-     * @private
+     * @internal
      */
     this.focused = false;
     /** The hidden state of the tile. */
@@ -21,18 +34,25 @@ export class CalciteTile {
   //
   // --------------------------------------------------------------------------
   renderTile() {
-    const isLargeVisual = this.heading && this.icon && !this.description;
+    const { icon, el, heading, description } = this;
+    const isLargeVisual = heading && icon && !description;
     const iconStyle = isLargeVisual
       ? {
         height: "64px",
         width: "64px"
       }
       : undefined;
-    return (h("div", { class: { "large-visual": isLargeVisual, tile: true } },
-      this.icon && (h("div", { class: "icon" },
-        h("calcite-icon", { icon: this.icon, scale: "l", style: iconStyle }))),
-      this.heading && h("div", { class: "heading" }, this.heading),
-      this.description && h("div", { class: "description" }, this.description)));
+    return (h("div", { class: { container: true, "large-visual": isLargeVisual } },
+      icon && (h("div", { class: "icon" },
+        h("calcite-icon", { icon: icon, scale: "l", style: iconStyle }))),
+      h("div", { class: "content-container" },
+        getSlotted(el, SLOTS.contentStart) ? (h("div", { class: "content-slot-container" },
+          h("slot", { name: SLOTS.contentStart }))) : null,
+        h("div", { class: "content" },
+          heading && h("div", { class: "heading" }, heading),
+          description && h("div", { class: "description" }, description)),
+        getSlotted(el, SLOTS.contentEnd) ? (h("div", { class: "content-slot-container" },
+          h("slot", { name: SLOTS.contentEnd }))) : null)));
   }
   render() {
     return (h(Fragment, null, this.href ? (h("calcite-link", { disabled: this.disabled, href: this.href }, this.renderTile())) : (this.renderTile())));
@@ -55,13 +75,14 @@ export class CalciteTile {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The active state of the tile."
       },
       "attribute": "active",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     },
     "description": {
       "type": "string",
@@ -129,7 +150,7 @@ export class CalciteTile {
       "docs": {
         "tags": [{
             "text": undefined,
-            "name": "private"
+            "name": "internal"
           }],
         "text": "The focused state of the tile."
       },
@@ -207,4 +228,5 @@ export class CalciteTile {
       "reflect": true
     }
   }; }
+  static get elementRef() { return "el"; }
 }

package/dist/collection/components/calcite-tile/resources.js

@@ -0,0 +1,4 @@
+export const SLOTS = {
+  contentStart: "content-start",
+  contentEnd: "content-end"
+};

package/dist/collection/components/calcite-tile-select/calcite-tile-select.js

@@ -1,7 +1,10 @@
-import { Component, Element, h, Prop, Listen, Watch, State, Method } from "@stencil/core";
+import { Component, Element, Event, h, Prop, Listen, Watch, State, Method } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { guid } from "../../utils/guid";
+/**
+ * @slot - A slot for adding custom content.
+ */
 export class CalciteTileSelect {
   constructor() {
     //--------------------------------------------------------------------------
@@ -45,6 +48,7 @@ export class CalciteTileSelect {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     this.input.setFocus();
   }
@@ -53,30 +57,42 @@ export class CalciteTileSelect {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  calciteCheckboxChangeEvent(event) {
+  checkboxChangeHandler(event) {
     const checkbox = event.target;
     if (checkbox === this.input) {
       this.checked = checkbox.checked;
     }
+    event.stopPropagation();
+    this.calciteTileSelectChange.emit();
   }
-  calciteCheckboxFocusedChangeEvent(event) {
+  checkboxFocusHandler(event) {
     const checkbox = event.target;
     if (checkbox === this.input) {
       this.focused = event.detail;
     }
+    event.stopPropagation();
   }
-  calciteRadioButtonCheckedChangeEvent(event) {
+  radioButtonChangeHandler(event) {
     const radioButton = event.target;
     if (radioButton === this.input) {
       this.checked = radioButton.checked;
     }
     event.stopPropagation();
+    this.calciteTileSelectChange.emit();
   }
-  calciteRadioButtonFocusedChangeEvent(event) {
+  radioButtonCheckedChangeHandler(event) {
+    const radioButton = event.target;
+    if (radioButton === this.input) {
+      this.checked = radioButton.checked;
+    }
+    event.stopPropagation();
+  }
+  radioButtonFocusHandler(event) {
     const radioButton = event.target;
     if (radioButton === this.input) {
       this.focused = radioButton.focused;
     }
+    event.stopPropagation();
   }
   click(event) {
     const target = event.target;
@@ -384,6 +400,22 @@ export class CalciteTileSelect {
   static get states() { return {
     "focused": {}
   }; }
+  static get events() { return [{
+      "method": "calciteTileSelectChange",
+      "name": "calciteTileSelectChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits a custom change event.  For checkboxes, it emits when the checkbox is checked or unchecked.  For radios it only emits when it is checked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
   static get methods() { return {
     "setFocus": {
       "complexType": {
@@ -397,7 +429,7 @@ export class CalciteTileSelect {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }
@@ -412,25 +444,31 @@ export class CalciteTileSelect {
     }]; }
   static get listeners() { return [{
       "name": "calciteCheckboxChange",
-      "method": "calciteCheckboxChangeEvent",
+      "method": "checkboxChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "calciteInternalCheckboxFocus",
+      "method": "checkboxFocusHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteCheckboxFocusedChange",
-      "method": "calciteCheckboxFocusedChangeEvent",
+      "name": "calciteRadioButtonChange",
+      "method": "radioButtonChangeHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteRadioButtonCheckedChange",
-      "method": "calciteRadioButtonCheckedChangeEvent",
+      "name": "calciteInternalRadioButtonCheckedChange",
+      "method": "radioButtonCheckedChangeHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteRadioButtonFocusedChange",
-      "method": "calciteRadioButtonFocusedChangeEvent",
+      "name": "calciteInternalRadioButtonFocus",
+      "method": "radioButtonFocusHandler",
       "target": undefined,
       "capture": false,
       "passive": false

package/dist/collection/components/calcite-tile-select-group/calcite-tile-select-group.js

@@ -1,4 +1,7 @@
 import { Component, h, Prop } from "@stencil/core";
+/**
+ * @slot - A slot for adding `calcite-tile-select`s.
+ */
 export class CalciteTileSelectGroup {
   constructor() {
     //--------------------------------------------------------------------------

package/dist/collection/components/calcite-time-picker/calcite-time-picker.js

@@ -96,12 +96,7 @@ export class CalciteTimePicker {
       let newValue;
       if (isValidNumber(this[key])) {
         const valueAsNumber = parseInt(this[key]);
-        if (valueAsNumber === 0) {
-          newValue = 59;
-        }
-        else {
-          newValue = valueAsNumber - 1;
-        }
+        newValue = valueAsNumber === 0 ? 59 : valueAsNumber - 1;
       }
       else {
         newValue = 59;
@@ -130,12 +125,10 @@ export class CalciteTimePicker {
         if (isValidNumber(this.hour)) {
           switch (this.hourDisplayFormat) {
             case "12":
-              if (this.hour === "01" && keyAsNumber >= 0 && keyAsNumber <= 2) {
-                newHour = `1${keyAsNumber}`;
-              }
-              else {
-                newHour = keyAsNumber;
-              }
+              newHour =
+                this.hour === "01" && keyAsNumber >= 0 && keyAsNumber <= 2
+                  ? `1${keyAsNumber}`
+                  : keyAsNumber;
               break;
             case "24":
               if (this.hour === "01") {
@@ -255,12 +248,10 @@ export class CalciteTimePicker {
         let newMinute;
         if (isValidNumber(this.minute) && this.minute.startsWith("0")) {
           const minuteAsNumber = parseInt(this.minute);
-          if (minuteAsNumber > maxTenthForMinuteAndSecond) {
-            newMinute = keyAsNumber;
-          }
-          else {
-            newMinute = `${minuteAsNumber}${keyAsNumber}`;
-          }
+          newMinute =
+            minuteAsNumber > maxTenthForMinuteAndSecond
+              ? keyAsNumber
+              : `${minuteAsNumber}${keyAsNumber}`;
         }
         else {
           newMinute = keyAsNumber;
@@ -305,12 +296,10 @@ export class CalciteTimePicker {
         let newSecond;
         if (isValidNumber(this.second) && this.second.startsWith("0")) {
           const secondAsNumber = parseInt(this.second);
-          if (secondAsNumber > maxTenthForMinuteAndSecond) {
-            newSecond = keyAsNumber;
-          }
-          else {
-            newSecond = `${secondAsNumber}${keyAsNumber}`;
-          }
+          newSecond =
+            secondAsNumber > maxTenthForMinuteAndSecond
+              ? keyAsNumber
+              : `${secondAsNumber}${keyAsNumber}`;
         }
         else {
           newSecond = keyAsNumber;
@@ -463,6 +452,7 @@ export class CalciteTimePicker {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus(target) {
     var _a;
     (_a = this[`${target || "hour"}El`]) === null || _a === void 0 ? void 0 : _a.focus();
@@ -1063,7 +1053,7 @@ export class CalciteTimePicker {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

package/dist/collection/components/calcite-tip/calcite-tip.css

@@ -76,18 +76,6 @@
 * Currently only used in Checkbox.
 */
 
-:host {
-  /* Base ":host" styles for the component */
-  box-sizing: border-box;
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
-  font-size: var(--calcite-font-size--1);
-}
-
-:host * {
-  box-sizing: border-box;
-}
-
 :root {
   --calcite-popper-transition: 150ms ease-in-out;
 }
@@ -104,10 +92,20 @@
   border-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-2);
+  box-sizing: border-box;
+  background-color: var(--calcite-ui-foreground-1);
+  color: var(--calcite-ui-text-2);
+  font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
+}
+
+:host * {
+  box-sizing: border-box;
 }
 
 .container {
   padding: 1rem;
+  width: 100%;
 }
 
 :host([dismissed]),
@@ -127,38 +125,41 @@
   margin: 0;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  align-content: space-between;
   color: var(--calcite-ui-text-2);
-  fill: var(--calcite-ui-text-2);
+  fill: ;
 }
 
 .heading {
-  padding: 0;
-  margin: 0;
   font-weight: var(--calcite-font-weight-medium);
-  line-height: 1.5;
+  margin: 0;
+  padding: 0;
 }
 
 .header .heading {
-  flex: 1 0 auto;
-  padding: var(--calcite-spacing-half) var(--calcite-spacing-half);
+  flex: 1 1 auto;
+  padding: 0.5rem;
 }
 
 h1.heading {
   font-size: var(--calcite-font-size-2);
+  line-height: 1.5rem;
 }
 
 h2.heading {
   font-size: var(--calcite-font-size-1);
+  line-height: 1.5rem;
 }
 
 h3.heading {
   font-size: var(--calcite-font-size-0);
+  line-height: 1.25rem;
 }
 
 h4.heading,
 h5.heading {
   font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
 }
 
 .header {
@@ -166,7 +167,7 @@ h5.heading {
 }
 
 .header .heading {
-  color: var(--calcite-ui-text-2);
+  color: var(--calcite-ui-text-1);
   padding: 0;
 }
 

package/dist/collection/components/calcite-tip/calcite-tip.js

@@ -3,6 +3,7 @@ import { CSS, ICONS, SLOTS, TEXT, HEADING_LEVEL } from "./resources";
 import { getSlotted } from "../../utils/dom";
 import { CalciteHeading, constrainHeadingLevel } from "../functional/CalciteHeading";
 /**
+ * @slot - A slot for adding text and a hyperlink.
  * @slot thumbnail - A slot for adding an HTML image element to the tip.
  */
 export class CalciteTip {
@@ -20,6 +21,10 @@ export class CalciteTip {
      * Indicates whether the tip can be dismissed.
      */
     this.nonDismissible = false;
+    /**
+     * The selected state of the tip if it is being used inside a `calcite-tip-manager`.
+     */
+    this.selected = false;
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -163,13 +168,14 @@ export class CalciteTip {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The selected state of the tip if it is being used inside a `calcite-tip-manager`."
       },
       "attribute": "selected",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     },
     "intlClose": {
       "type": "string",

package/dist/collection/components/calcite-tip-group/calcite-tip-group.css

@@ -76,18 +76,6 @@
 * Currently only used in Checkbox.
 */
 
-:host {
-  /* Base ":host" styles for the component */
-  box-sizing: border-box;
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
-  font-size: var(--calcite-font-size--1);
-}
-
-:host * {
-  box-sizing: border-box;
-}
-
 :root {
   --calcite-popper-transition: 150ms ease-in-out;
 }
@@ -98,9 +86,23 @@
 
 :host {
   display: block;
+  box-sizing: border-box;
+  background-color: var(--calcite-ui-foreground-1);
+  color: var(--calcite-ui-text-2);
+  font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
 }
 
 ::slotted(calcite-tip) {
   border-style: none;
-  max-width: 34rem;
+  margin: 0;
+}
+
+:host-context(calcite-tip-manager) {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+:host-context(calcite-tip-manager) ::slotted(calcite-tip) {
+  padding: 1rem;
 }

package/dist/collection/components/calcite-tip-group/calcite-tip-group.js

@@ -1,4 +1,7 @@
 import { Component, Prop, h } from "@stencil/core";
+/**
+ * @slot - A slot for adding `calcite-tip`s.
+ */
 export class CalciteTipGroup {
   render() {
     return h("slot", null);

package/dist/collection/components/calcite-tip-manager/calcite-tip-manager.css

@@ -76,18 +76,6 @@
 * Currently only used in Checkbox.
 */
 
-:host {
-  /* Base ":host" styles for the component */
-  box-sizing: border-box;
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
-  font-size: var(--calcite-font-size--1);
-}
-
-:host * {
-  box-sizing: border-box;
-}
-
 :root {
   --calcite-popper-transition: 150ms ease-in-out;
 }
@@ -107,8 +95,16 @@
 
 :host {
   display: block;
-  --calcite-tip-manager-height: 18vh;
-  --calcite-tip-max-width: 540px;
+  box-sizing: border-box;
+  background-color: var(--calcite-ui-foreground-1);
+  color: var(--calcite-ui-text-2);
+  font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
+  --calcite-tip-manager-height: 19vh;
+}
+
+:host * {
+  box-sizing: border-box;
 }
 
 :host([closed]) {
@@ -121,52 +117,65 @@
   margin: 0;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  align-content: space-between;
   color: var(--calcite-ui-text-2);
-  fill: var(--calcite-ui-text-2);
+  fill: ;
 }
 
 .heading {
-  padding: 0;
-  margin: 0;
   font-weight: var(--calcite-font-weight-medium);
-  line-height: 1.5;
+  margin: 0;
+  padding: 0;
 }
 
 .header .heading {
-  flex: 1 0 auto;
-  padding: var(--calcite-spacing-half) var(--calcite-spacing-half);
+  flex: 1 1 auto;
+  padding: 0.5rem;
 }
 
 h1.heading {
   font-size: var(--calcite-font-size-2);
+  line-height: 1.5rem;
 }
 
 h2.heading {
   font-size: var(--calcite-font-size-1);
+  line-height: 1.5rem;
 }
 
 h3.heading {
   font-size: var(--calcite-font-size-0);
+  line-height: 1.25rem;
 }
 
 h4.heading,
 h5.heading {
   font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
 }
 
-.header .heading {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+.header {
+  border-width: 0;
+  border-bottom-width: 1px;
+  border-style: solid;
+  border-color: var(--calcite-ui-border-3);
+  padding-left: 1rem;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.header h2.heading {
+  font-weight: var(--calcite-font-weight-bold);
+  color: var(--calcite-ui-text-1);
+  font-size: var(--calcite-font-size-1);
+  line-height: 1.5rem;
+  padding: 0;
 }
 
 .container {
   overflow: hidden;
   position: relative;
-  padding-top: 0.5rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  padding-bottom: 0;
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
@@ -179,7 +188,7 @@ h5.heading {
 }
 
 .tip-container {
-  margin-top: 0.25rem;
+  margin-top: 0;
   overflow: auto;
   display: flex;
   justify-content: center;
@@ -187,9 +196,9 @@ h5.heading {
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
+  margin-top: 1px;
   animation-name: none;
   animation-duration: 150ms;
-  animation-timing-function: cubic-bezier(0.215, 0.44, 0.42, 0.88);
   height: var(--calcite-tip-manager-height);
 }
 
@@ -200,6 +209,7 @@ h5.heading {
 
 ::slotted(calcite-tip) {
   border-style: none;
+  padding: 0.75rem;
   max-width: var(--calcite-tip-max-width);
 }
 
@@ -217,8 +227,8 @@ h5.heading {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.5rem;
   padding-left: 0;
   padding-right: 0;
 }
@@ -232,6 +242,15 @@ h5.heading {
   margin-right: 0.5rem;
 }
 
+/* RTL */
+
+:host-context([dir=rtl]) .header.header {
+  padding-right: 1rem;
+  padding-left: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 /* @keyframes*/
 
 @keyframes tip-advance {