@esri/calcite-components 1.0.0-next.688 → 1.0.0-next.689

package/dist/collection/components/rating/rating.css

@@ -133,23 +133,24 @@
 }
 
 .fieldset {
-  margin: 0px;
+  margin: 0;
   display: flex;
-  border-width: 0px;
-  padding: 0px;
+  border-width: 0;
+  padding: 0;
+  align-items: center;
+  gap: var(--calcite-rating-spacing-unit);
 }
 
 .wrapper {
   display: inline-block;
-  margin-inline-end: var(--calcite-rating-spacing-unit);
 }
 
 .star {
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   position: relative;
   display: flex;
+  flex-direction: column;
   cursor: pointer;
-  outline-color: transparent;
-  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   color: var(--calcite-ui-border-input);
 }
 
@@ -164,18 +165,16 @@
 }
 
 .hovered,
-.selected,
-:host([read-only]) .average,
-:host([read-only]) .fraction {
+.selected {
   color: var(--calcite-ui-brand);
 }
 
-:host .fraction {
-  pointer-events: none;
+.fraction {
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   position: absolute;
-  inset-block-start: 0px;
+  pointer-events: none;
+  inset-block-start: 0;
   overflow: hidden;
-  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   inset-inline-start: 0;
 }
 
@@ -185,7 +184,7 @@ calcite-chip {
 }
 
 .number--average {
-  font-weight: var(--calcite-font-weight-bold);
+  font-weight: bold;
 }
 
 .number--count {

package/dist/collection/components/rating/rating.js

@@ -1,46 +1,119 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.688
+ * v1.0.0-next.689
  */
-import { Fragment, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { connectLabel, disconnectLabel } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
 import { updateHostInteraction } from "../../utils/interactive";
-import { isActivationKey } from "../../utils/key";
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
 import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../../utils/loadable";
+import { StarIcon } from "./function/star";
 export class Rating {
   constructor() {
-    this.onKeyboardPressed = (event) => {
-      if (!this.required && isActivationKey(event.key)) {
-        event.preventDefault();
-        this.updateValue(0);
-      }
+    this.handleRatingPointerOver = () => {
+      this.isKeyboardInteraction = false;
+    };
+    this.handleRatingPointerOut = () => {
+      this.isKeyboardInteraction = true;
+      this.hoverValue = null;
+      this.focusValue = null;
+      this.hasFocus = false;
     };
-    this.onFocusChange = (selectedRatingValue) => {
+    this.handleRatingFocusIn = () => {
+      const selectedInput = this.value > 0 ? this.value - 1 : 0;
+      const focusInput = this.inputRefs[selectedInput];
+      const focusValue = Number(focusInput.value);
+      focusInput.select();
+      this.focusValue = focusValue;
+      this.hoverValue = focusValue;
       this.hasFocus = true;
-      if (!this.required && this.focusValue === selectedRatingValue) {
-        this.updateValue(0);
+    };
+    this.handleRatingFocusLeave = () => {
+      this.focusValue = null;
+      this.hoverValue = null;
+      this.hasFocus = false;
+    };
+    this.handleHostKeyDown = () => {
+      this.isKeyboardInteraction = true;
+    };
+    this.handleInputKeyDown = (event) => {
+      const target = event.currentTarget;
+      const inputVal = Number(target.value);
+      const key = event.key;
+      const numberKey = key == " " ? undefined : Number(key);
+      this.emit = true;
+      if (isNaN(numberKey)) {
+        switch (key) {
+          case "Enter":
+          case " ":
+            this.value = !this.required && this.value === inputVal ? 0 : inputVal;
+            break;
+          case "ArrowLeft":
+            this.value = inputVal - 1;
+            break;
+          case "ArrowRight":
+            this.value = inputVal + 1;
+            break;
+          case "Tab":
+            if (this.hasFocus) {
+              this.hasFocus = false;
+              this.focusValue = null;
+              this.hoverValue = null;
+            }
+          default:
+            break;
+        }
       }
       else {
-        this.focusValue = selectedRatingValue;
+        if (!this.required && numberKey >= 0 && numberKey <= this.max) {
+          this.value = numberKey;
+        }
+        else if (this.required && numberKey > 0 && numberKey <= this.max) {
+          this.value = numberKey;
+        }
       }
     };
+    this.handleInputChange = (event) => {
+      if (this.isKeyboardInteraction === true) {
+        const inputVal = Number(event.target["value"]);
+        this.focusValue = inputVal;
+        this.hoverValue = inputVal;
+        this.value = inputVal;
+      }
+    };
+    this.handleLabelPointerOver = (event) => {
+      const target = event.currentTarget;
+      const newPointerValue = Number(target.firstChild["value"] || 0);
+      this.hoverValue = newPointerValue;
+      this.focusValue = null;
+    };
+    this.handleLabelPointerDown = (event) => {
+      const target = event.currentTarget;
+      const inputVal = Number(target.firstChild["value"] || 0);
+      this.focusValue = null;
+      this.hoverValue = null;
+      this.emit = true;
+      this.value = !this.required && this.value === inputVal ? 0 : inputVal;
+    };
+    this.emit = false;
     this.guid = `calcite-ratings-${guid()}`;
-    this.scale = "m";
-    this.value = 0;
-    this.readOnly = false;
-    this.disabled = false;
-    this.showChip = false;
-    this.count = undefined;
+    this.isKeyboardInteraction = true;
+    this.max = 5;
     this.average = undefined;
-    this.name = undefined;
+    this.count = undefined;
+    this.disabled = false;
     this.messages = undefined;
     this.messageOverrides = undefined;
+    this.name = undefined;
+    this.readOnly = false;
     this.required = false;
+    this.scale = "m";
+    this.showChip = false;
+    this.value = 0;
     this.effectiveLocale = "";
     this.defaultMessages = undefined;
     this.hoverValue = undefined;
@@ -50,6 +123,17 @@ export class Rating {
   onMessagesChange() {
     /* wired up by t9n util */
   }
+  handleValueUpdate(newValue) {
+    this.hoverValue = newValue;
+    this.focusValue = newValue;
+    if (this.emit) {
+      this.calciteRatingChange.emit();
+    }
+    this.emit = false;
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -64,6 +148,41 @@ export class Rating {
   async componentWillLoad() {
     await setUpMessages(this);
     setUpLoadableComponent(this);
+    this.inputRefs = Array(this.max);
+  }
+  componentWillRender() {
+    this.starsMap = Array.from({ length: this.max }, (_, i) => {
+      const value = i + 1;
+      const average = !this.focusValue &&
+        !this.hoverValue &&
+        this.average &&
+        !this.value &&
+        value <= this.average;
+      const checked = value === this.value;
+      const focused = this.isKeyboardInteraction && this.hasFocus && this.focusValue === value;
+      const fraction = this.average && this.average + 1 - value;
+      const hovered = value <= this.hoverValue;
+      const id = `${this.guid}-${value}`;
+      const partial = !this.focusValue &&
+        !this.hoverValue &&
+        !this.value &&
+        !hovered &&
+        fraction > 0 &&
+        fraction < 1;
+      const selected = this.value >= value;
+      return {
+        average,
+        checked,
+        focused,
+        fraction,
+        hovered,
+        id,
+        idx: i,
+        partial,
+        selected,
+        value
+      };
+    });
   }
   componentDidLoad() {
     setComponentLoaded(this);
@@ -77,37 +196,21 @@ export class Rating {
   componentDidRender() {
     updateHostInteraction(this);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  blurHandler() {
-    this.hasFocus = false;
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Render Methods
-  //
-  // --------------------------------------------------------------------------
-  renderStars() {
-    return [1, 2, 3, 4, 5].map((i) => {
-      const selected = this.value >= i;
-      const average = this.average && !this.value && i <= this.average;
-      const hovered = i <= this.hoverValue;
-      const fraction = this.average && this.average + 1 - i;
-      const partial = !this.value && !hovered && fraction > 0 && fraction < 1;
-      const focused = this.hasFocus && this.focusValue === i;
-      return (h("span", { class: { wrapper: true } }, h("label", { class: { star: true, focused, selected, average, hovered, partial }, htmlFor: `${this.guid}-${i}`, onPointerOver: () => {
-          this.hoverValue = i;
-        } }, h("calcite-icon", { "aria-hidden": "true", class: "icon", icon: selected || average || this.readOnly ? "star-f" : "star", scale: this.scale }), partial && (h("div", { class: "fraction", style: { width: `${fraction * 100}%` } }, h("calcite-icon", { icon: "star-f", scale: this.scale }))), h("span", { class: "visually-hidden" }, this.messages.stars.replace("${num}", `${i}`))), h("input", { checked: i === this.value, class: "visually-hidden", disabled: this.disabled || this.readOnly, id: `${this.guid}-${i}`, name: this.guid, onChange: () => this.updateValue(i), onClick: (event) => 
-        // click is fired from the component's label, so we treat this as an internal event
-        event.stopPropagation(), onFocus: () => this.onFocusChange(i), onKeyDown: this.onKeyboardPressed, ref: (el) => (i === 1 || i === this.value) && (this.inputFocusRef = el), type: "radio", value: i })));
-    });
-  }
   render() {
-    const { disabled, messages, showChip, scale, count, average } = this;
-    return (h(Fragment, null, h("fieldset", { class: "fieldset", disabled: disabled, onBlur: () => (this.hoverValue = null), onPointerLeave: () => (this.hoverValue = null), onTouchEnd: () => (this.hoverValue = null) }, h("legend", { class: "visually-hidden" }, messages.rating), this.renderStars()), (count || average) && showChip ? (h("calcite-chip", { scale: scale, value: count?.toString() }, !!average && h("span", { class: "number--average" }, average.toString()), !!count && h("span", { class: "number--count" }, "(", count?.toString(), ")"))) : null, h(HiddenFormInputSlot, { component: this })));
+    return (h(Host, { onBlur: this.handleRatingFocusLeave, onFocus: this.handleRatingFocusIn, onKeyDown: this.handleHostKeyDown, onPointerOut: this.handleRatingPointerOut, onPointerOver: this.handleRatingPointerOver }, h("span", { class: "wrapper" }, h("fieldset", { class: "fieldset", disabled: this.disabled }, h("legend", { class: "visually-hidden" }, this.messages.rating), this.starsMap.map(({ average, checked, focused, fraction, hovered, id, idx, partial, selected, value }) => {
+      return (h("label", { class: {
+          star: true,
+          focused,
+          selected,
+          hovered,
+          average,
+          partial
+        }, htmlFor: id, onPointerDown: this.handleLabelPointerDown, onPointerOver: this.handleLabelPointerOver }, h("input", { checked: checked, class: "visually-hidden", disabled: this.disabled || this.readOnly, id: id, name: this.guid, onChange: this.handleInputChange, onKeyDown: this.handleInputKeyDown, ref: (el) => {
+          this.inputRefs[idx] = el;
+          return ((value === 1 || value === this.value) &&
+            (this.inputFocusRef = el));
+        }, type: "radio", value: value }), h(StarIcon, { full: selected || average, scale: this.scale }), partial && (h("div", { class: "fraction", style: { width: `${fraction * 100}%` } }, h(StarIcon, { full: true, partial: true, scale: this.scale }))), h("span", { class: "visually-hidden" }, this.messages.stars.replace("${num}", `${value}`))));
+    }), (this.count || this.average) && this.showChip ? (h("calcite-chip", { scale: this.scale, value: this.count?.toString() }, !!this.average && h("span", { class: "number--average" }, this.average.toString()), !!this.count && h("span", { class: "number--count" }, "(", this.count?.toString(), ")"))) : null), h(HiddenFormInputSlot, { component: this }))));
   }
   //--------------------------------------------------------------------------
   //
@@ -117,10 +220,6 @@ export class Rating {
   onLabelClick() {
     this.setFocus();
   }
-  updateValue(value) {
-    this.value = value;
-    this.calciteRatingChange.emit();
-  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -131,9 +230,6 @@ export class Rating {
     await componentLoaded(this);
     this.inputFocusRef?.focus();
   }
-  effectiveLocaleChange() {
-    updateMessages(this, this.effectiveLocale);
-  }
   static get is() { return "calcite-rating"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -149,32 +245,9 @@ export class Rating {
   static get assetsDirs() { return ["assets"]; }
   static get properties() {
     return {
-      "scale": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Scale",
-          "resolved": "\"l\" | \"m\" | \"s\"",
-          "references": {
-            "Scale": {
-              "location": "import",
-              "path": "../interfaces"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Specifies the size of the component."
-        },
-        "attribute": "scale",
-        "reflect": true,
-        "defaultValue": "\"m\""
-      },
-      "value": {
+      "average": {
         "type": "number",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "number",
           "resolved": "number",
@@ -184,29 +257,27 @@ export class Rating {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The component's value."
+          "text": "Specifies a cumulative average from previous ratings to display."
         },
-        "attribute": "value",
-        "reflect": true,
-        "defaultValue": "0"
+        "attribute": "average",
+        "reflect": true
       },
-      "readOnly": {
-        "type": "boolean",
+      "count": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When `true`, the component's value can be read, but cannot be modified."
+          "text": "Specifies the number of previous ratings to display."
         },
-        "attribute": "read-only",
-        "reflect": true,
-        "defaultValue": "false"
+        "attribute": "count",
+        "reflect": true
       },
       "disabled": {
         "type": "boolean",
@@ -226,87 +297,94 @@ export class Rating {
         "reflect": true,
         "defaultValue": "false"
       },
-      "showChip": {
-        "type": "boolean",
-        "mutable": false,
+      "messages": {
+        "type": "unknown",
+        "mutable": true,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "Messages",
+          "resolved": "{ rating: string; stars: string; }",
+          "references": {
+            "Messages": {
+              "location": "import",
+              "path": "./assets/rating/t9n"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [],
-          "text": "When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`."
-        },
-        "attribute": "show-chip",
-        "reflect": true,
-        "defaultValue": "false"
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Made into a prop for testing purposes only"
+        }
       },
-      "count": {
-        "type": "number",
-        "mutable": false,
+      "messageOverrides": {
+        "type": "unknown",
+        "mutable": true,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
+          "original": "Partial<Messages>",
+          "resolved": "{ rating?: string; stars?: string; }",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "Messages": {
+              "location": "import",
+              "path": "./assets/rating/t9n"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specifies the number of previous ratings to display."
-        },
-        "attribute": "count",
-        "reflect": true
+          "text": "Use this property to override individual strings used by the component."
+        }
       },
-      "average": {
-        "type": "number",
+      "name": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specifies a cumulative average from previous ratings to display."
+          "text": "Specifies the name of the component on form submission."
         },
-        "attribute": "average",
+        "attribute": "name",
         "reflect": true
       },
-      "name": {
-        "type": "string",
+      "readOnly": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specifies the name of the component on form submission."
+          "text": "When `true`, the component's value can be read, but cannot be modified."
         },
-        "attribute": "name",
-        "reflect": true
+        "attribute": "read-only",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "messages": {
-        "type": "unknown",
-        "mutable": true,
+      "required": {
+        "type": "boolean",
+        "mutable": false,
         "complexType": {
-          "original": "Messages",
-          "resolved": "{ rating: string; stars: string; }",
-          "references": {
-            "Messages": {
-              "location": "import",
-              "path": "./assets/rating/t9n"
-            }
-          }
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         },
         "required": false,
         "optional": false,
@@ -315,22 +393,22 @@ export class Rating {
               "name": "internal",
               "text": undefined
             }],
-          "text": "Made into a prop for testing purposes only"
-        }
+          "text": "When `true`, the component must have a value in order for the form to submit."
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "messageOverrides": {
-        "type": "unknown",
-        "mutable": true,
+      "scale": {
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "Partial<Messages>",
-          "resolved": "{ rating?: string; stars?: string; }",
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
           "references": {
-            "Partial": {
-              "location": "global"
-            },
-            "Messages": {
+            "Scale": {
               "location": "import",
-              "path": "./assets/rating/t9n"
+              "path": "../interfaces"
             }
           }
         },
@@ -338,10 +416,13 @@ export class Rating {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Use this property to override individual strings used by the component."
-        }
+          "text": "Specifies the size of the component."
+        },
+        "attribute": "scale",
+        "reflect": true,
+        "defaultValue": "\"m\""
       },
-      "required": {
+      "showChip": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -352,15 +433,30 @@ export class Rating {
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": "When `true`, the component must have a value in order for the form to submit."
+          "tags": [],
+          "text": "When `true`, and if available, displays the `average` and/or `count` data summary in a `calcite-chip`."
         },
-        "attribute": "required",
+        "attribute": "show-chip",
         "reflect": true,
         "defaultValue": "false"
+      },
+      "value": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The component's value."
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "0"
       }
     };
   }
@@ -416,18 +512,12 @@ export class Rating {
     return [{
         "propName": "messageOverrides",
         "methodName": "onMessagesChange"
+      }, {
+        "propName": "value",
+        "methodName": "handleValueUpdate"
       }, {
         "propName": "effectiveLocale",
         "methodName": "effectiveLocaleChange"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "blur",
-        "method": "blurHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
 }

package/dist/collection/components/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.688
+ * v1.0.0-next.689
  */
 export var KindIcons;
 (function (KindIcons) {

package/dist/collection/components/scrim/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.688
+ * v1.0.0-next.689
  */
 export const CSS = {
   scrim: "scrim",