@esri/calcite-components 1.0.0-beta.95 → 1.0.0-beta.96

package/dist/collection/components/pagination/pagination.js

@@ -1,11 +1,10 @@
 /*!
  * 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-beta.95
+ * v1.0.0-beta.96
  */
-import { Component, Element, Event, h, Prop, Method, Fragment, State } from "@stencil/core";
-import { unwatchGlobalAttributes, watchGlobalAttributes } from "../../utils/globalAttributes";
-import { getLocale, localizeNumberString } from "../../utils/locale";
+import { h, Fragment } from "@stencil/core";
+import { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
 import { CSS, TEXT } from "./resources";
 const maxPagesDisplayed = 5;
 export class Pagination {
@@ -16,7 +15,7 @@ export class Pagination {
     //
     //--------------------------------------------------------------------------
     /**
-     * When true, number values are displayed with a group separator corresponding to the language and country format.
+     * When `true`, number values are displayed with a group separator corresponding to the language and country format.
      */
     this.groupSeparator = false;
     /** Specifies the number of items per page. */
@@ -44,7 +43,7 @@ export class Pagination {
     //  State
     //
     //--------------------------------------------------------------------------
-    this.globalAttributes = {};
+    this.effectiveLocale = "";
     this.previousClicked = () => {
       this.previousPage().then();
       this.emitUpdate();
@@ -59,10 +58,14 @@ export class Pagination {
      * @param value
      */
     this.determineGroupSeparator = (value) => {
-      const locale = getLocale(this);
+      numberStringFormatter.numberFormatOptions = {
+        locale: this.effectiveLocale,
+        numberingSystem: this.numberingSystem,
+        useGrouping: this.groupSeparator
+      };
       return this.groupSeparator
-        ? localizeNumberString(value.toString(), locale, this.groupSeparator, this.numberingSystem)
-        : value;
+        ? numberStringFormatter.localize(value.toString())
+        : value.toString();
     };
   }
   // --------------------------------------------------------------------------
@@ -71,10 +74,10 @@ export class Pagination {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    watchGlobalAttributes(this, ["lang"]);
+    connectLocalized(this);
   }
   disconnectedCallback() {
-    unwatchGlobalAttributes(this);
+    disconnectLocalized(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -178,271 +181,276 @@ export class Pagination {
     const { total, num, start } = this;
     const prevDisabled = num === 1 ? start <= num : start < num;
     const nextDisabled = num === 1 ? start + num > total : start + num > total;
-    return (h(Fragment, null,
-      h("button", { "aria-label": this.textLabelPrevious, class: {
-          [CSS.previous]: true,
-          [CSS.disabled]: prevDisabled
-        }, disabled: prevDisabled, onClick: this.previousClicked },
-        h("calcite-icon", { flipRtl: true, icon: "chevronLeft", scale: "s" })),
-      total > num ? this.renderPage(1) : null,
-      this.renderLeftEllipsis(),
-      this.renderPages(),
-      this.renderRightEllipsis(),
-      this.renderPage(this.getLastStart()),
-      h("button", { "aria-label": this.textLabelNext, class: {
-          [CSS.next]: true,
-          [CSS.disabled]: nextDisabled
-        }, disabled: nextDisabled, onClick: this.nextClicked },
-        h("calcite-icon", { flipRtl: true, icon: "chevronRight", scale: "s" }))));
+    return (h(Fragment, null, h("button", { "aria-label": this.textLabelPrevious, class: {
+        [CSS.previous]: true,
+        [CSS.disabled]: prevDisabled
+      }, disabled: prevDisabled, onClick: this.previousClicked }, h("calcite-icon", { flipRtl: true, icon: "chevronLeft", scale: "s" })), total > num ? this.renderPage(1) : null, this.renderLeftEllipsis(), this.renderPages(), this.renderRightEllipsis(), this.renderPage(this.getLastStart()), h("button", { "aria-label": this.textLabelNext, class: {
+        [CSS.next]: true,
+        [CSS.disabled]: nextDisabled
+      }, disabled: nextDisabled, onClick: this.nextClicked }, h("calcite-icon", { flipRtl: true, icon: "chevronRight", scale: "s" }))));
   }
   static get is() { return "calcite-pagination"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["pagination.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["pagination.css"]
-  }; }
-  static get properties() { return {
-    "groupSeparator": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, number values are displayed with a group separator corresponding to the language and country format."
-      },
-      "attribute": "group-separator",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "num": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the number of items per page."
-      },
-      "attribute": "num",
-      "reflect": true,
-      "defaultValue": "20"
-    },
-    "numberingSystem": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "mdn",
-            "text": "[numberingSystem](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/numberingSystem)"
-          }],
-        "text": "Specifies the Unicode numeral system used by the component for localization."
-      },
-      "attribute": "numbering-system",
-      "reflect": false
-    },
-    "start": {
-      "type": "number",
-      "mutable": true,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the starting item number."
-      },
-      "attribute": "start",
-      "reflect": true,
-      "defaultValue": "1"
-    },
-    "total": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the total number of items."
-      },
-      "attribute": "total",
-      "reflect": true,
-      "defaultValue": "0"
-    },
-    "textLabelNext": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["pagination.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pagination.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "groupSeparator": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, number values are displayed with a group separator corresponding to the language and country format."
+        },
+        "attribute": "group-separator",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Next\""
-          }],
-        "text": "Accessible name for the component's next button."
+      "num": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the number of items per page."
+        },
+        "attribute": "num",
+        "reflect": true,
+        "defaultValue": "20"
       },
-      "attribute": "text-label-next",
-      "reflect": false,
-      "defaultValue": "TEXT.nextLabel"
-    },
-    "textLabelPrevious": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "numberingSystem": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "NumberingSystem",
+          "resolved": "\"arab\" | \"arabext\" | \"bali\" | \"beng\" | \"deva\" | \"fullwide\" | \"gujr\" | \"guru\" | \"hanidec\" | \"khmr\" | \"knda\" | \"laoo\" | \"latn\" | \"limb\" | \"mlym\" | \"mong\" | \"mymr\" | \"orya\" | \"tamldec\" | \"telu\" | \"thai\" | \"tibt\"",
+          "references": {
+            "NumberingSystem": {
+              "location": "import",
+              "path": "../../utils/locale"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the Unicode numeral system used by the component for localization."
+        },
+        "attribute": "numbering-system",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Previous\""
-          }],
-        "text": "Accessible name for the component's previous button."
+      "start": {
+        "type": "number",
+        "mutable": true,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the starting item number."
+        },
+        "attribute": "start",
+        "reflect": true,
+        "defaultValue": "1"
       },
-      "attribute": "text-label-previous",
-      "reflect": false,
-      "defaultValue": "TEXT.previousLabel"
-    },
-    "scale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Scale",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {
-          "Scale": {
-            "location": "import",
-            "path": "../interfaces"
-          }
-        }
+      "total": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the total number of items."
+        },
+        "attribute": "total",
+        "reflect": true,
+        "defaultValue": "0"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies the size of the component."
+      "textLabelNext": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Next\""
+            }],
+          "text": "Accessible name for the component's next button."
+        },
+        "attribute": "text-label-next",
+        "reflect": false,
+        "defaultValue": "TEXT.nextLabel"
       },
-      "attribute": "scale",
-      "reflect": true,
-      "defaultValue": "\"m\""
-    }
-  }; }
-  static get states() { return {
-    "globalAttributes": {}
-  }; }
-  static get events() { return [{
-      "method": "calcitePaginationUpdate",
-      "name": "calcitePaginationUpdate",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "use calcitePaginationChange instead"
-          }],
-        "text": "Emits when the selected page changes."
+      "textLabelPrevious": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Previous\""
+            }],
+          "text": "Accessible name for the component's previous button."
+        },
+        "attribute": "text-label-previous",
+        "reflect": false,
+        "defaultValue": "TEXT.previousLabel"
       },
-      "complexType": {
-        "original": "PaginationDetail",
-        "resolved": "PaginationDetail",
-        "references": {
-          "PaginationDetail": {
-            "location": "local"
+      "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\""
       }
-    }, {
-      "method": "calcitePaginationChange",
-      "name": "calcitePaginationChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "see",
-            "text": "[PaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/pagination/pagination.tsx#L23)"
-          }],
-        "text": "Emits when the selected page changes."
-      },
-      "complexType": {
-        "original": "PaginationDetail",
-        "resolved": "PaginationDetail",
-        "references": {
-          "PaginationDetail": {
-            "location": "local"
+    };
+  }
+  static get states() {
+    return {
+      "effectiveLocale": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calcitePaginationUpdate",
+        "name": "calcitePaginationUpdate",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "use calcitePaginationChange instead"
+            }],
+          "text": "Emits when the selected page changes."
+        },
+        "complexType": {
+          "original": "PaginationDetail",
+          "resolved": "PaginationDetail",
+          "references": {
+            "PaginationDetail": {
+              "location": "local"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "nextPage": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
+      }, {
+        "method": "calcitePaginationChange",
+        "name": "calcitePaginationChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "see",
+              "text": "[PaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/pagination/pagination.tsx#L23)"
+            }],
+          "text": "Emits when the selected page changes."
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Go to the next page of results.",
-        "tags": []
-      }
-    },
-    "previousPage": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+        "complexType": {
+          "original": "PaginationDetail",
+          "resolved": "PaginationDetail",
+          "references": {
+            "PaginationDetail": {
+              "location": "local"
+            }
           }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "nextPage": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "return": "Promise<void>"
+        "docs": {
+          "text": "Go to the next page of results.",
+          "tags": []
+        }
       },
-      "docs": {
-        "text": "Go to the previous page of results.",
-        "tags": []
+      "previousPage": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Go to the previous page of results.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/pagination/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-beta.95
+ * v1.0.0-beta.96
  */
 export const CSS = {
   page: "page",

package/dist/collection/components/panel/panel.css

@@ -296,12 +296,12 @@
 .fab-container {
   position: sticky;
   inset-block-end: 0px;
-  inset-inline: 0px;
   z-index: 300;
   margin-block: 0px;
   margin-inline: auto;
   display: block;
   padding: 0.5rem;
+  inset-inline: 0;
   inline-size: -moz-fit-content;
   inline-size: fit-content;
 }