@esri/calcite-components 1.0.0-beta.97 → 1.0.0-beta.99

package/dist/collection/components/alert/alert.js

@@ -1,68 +1,30 @@
 /*!
  * 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.97
+ * v1.0.0-beta.99
  */
 import { h, Host } from "@stencil/core";
-import { getSlotted, setRequestedIcon, toAriaBoolean } from "../../utils/dom";
-import { DURATIONS, SLOTS, TEXT } from "./resources";
-import { StatusIcons } from "./interfaces";
+import { getSlotted, setRequestedIcon, toAriaBoolean, slotChangeHasAssignedElement } from "../../utils/dom";
+import { CSS, DURATIONS, SLOTS } from "./resources";
+import { KindIcons } from "../resources";
 import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
 import { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
+import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../../utils/loadable";
 /**
  * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
  * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.
  */
 /**
- * @slot title - A slot for optionally adding a title to the component.
+ * @slot title - A slot for adding a title to the component.
  * @slot message - A slot for adding main text to the component.
- * @slot link - A slot for optionally adding an action to take from the alert (undo, try again, link to page, etc.)
+ * @slot link - A slot for adding a `calcite-action` to take from the component such as: "undo", "try again", "link to page", etc.
+ * @slot actions-end - A slot for adding actions to the end of the component. It is recommended to use two or fewer actions.
  */
 export class Alert {
   constructor() {
-    //--------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    //---------------------------------------------------------------------------
-    /**
-     * When `true`, displays and positions the component.
-     *
-     * @deprecated use `open` instead.
-     */
-    this.active = false;
-    /** When `true`, displays and positions the component. */
-    this.open = false;
-    /** When `true`, the component closes automatically (recommended for passive, non-blocking alerts). */
-    this.autoDismiss = false;
-    /** Specifies the duration before the component automatically closes (only use with `autoDismiss`). */
-    this.autoDismissDuration = this.autoDismiss ? "medium" : null;
-    /** Specifies the color for the component (will apply to top border and icon). */
-    this.color = "blue";
-    /**
-     * Specifies the text label for the close button.
-     *
-     * @default "Close"
-     */
-    this.intlClose = TEXT.intlClose;
-    /** Specifies the placement of the component */
-    this.placement = "bottom";
-    /** Specifies the size of the component. */
-    this.scale = "m";
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
-    this.effectiveLocale = "";
-    /** the list of queued alerts */
-    this.queue = [];
-    /** the count of queued alerts */
-    this.queueLength = 0;
-    /** is the alert queued */
-    this.queued = false;
-    this.autoDismissTimeoutId = null;
-    this.trackTimer = Date.now();
+    this.autoCloseTimeoutId = null;
+    this.remainingPausedTimeout = 0;
     this.openTransitionProp = "opacity";
     //--------------------------------------------------------------------------
     //
@@ -75,35 +37,63 @@ export class Alert {
     };
     /** close and emit calciteInternalAlertSync event with the updated queue payload */
     this.closeAlert = () => {
-      this.autoDismissTimeoutId = null;
+      this.autoCloseTimeoutId = null;
       this.queued = false;
       this.open = false;
       this.queue = this.queue.filter((el) => el !== this.el);
       this.determineActiveAlert();
       this.calciteInternalAlertSync.emit({ queue: this.queue });
     };
+    this.actionsEndSlotChangeHandler = (event) => {
+      this.hasEndActions = slotChangeHasAssignedElement(event);
+    };
+    this.handleMouseOver = () => {
+      window.clearTimeout(this.autoCloseTimeoutId);
+      this.remainingPausedTimeout = DURATIONS[this.autoCloseDuration] - Date.now() - this.trackTimer;
+    };
+    this.handleMouseLeave = () => {
+      this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), this.remainingPausedTimeout);
+    };
+    this.open = false;
+    this.autoClose = false;
+    this.autoCloseDuration = this.autoClose ? "medium" : null;
+    this.kind = "brand";
+    this.icon = undefined;
+    this.iconFlipRtl = false;
+    this.label = undefined;
+    this.numberingSystem = undefined;
+    this.placement = "bottom";
+    this.scale = "m";
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.slottedInShell = undefined;
+    this.effectiveLocale = "";
+    this.defaultMessages = undefined;
+    this.hasEndActions = false;
+    this.queue = [];
+    this.queueLength = 0;
+    this.queued = false;
+    this.requestedIcon = undefined;
   }
-  activeHandler(value) {
-    this.open = value;
-  }
-  openHandler(value) {
+  openHandler() {
     if (this.open && !this.queued) {
       this.calciteInternalAlertRegister.emit();
-      this.active = value;
     }
     if (!this.open) {
       this.queue = this.queue.filter((el) => el !== this.el);
       this.calciteInternalAlertSync.emit({ queue: this.queue });
-      this.active = false;
     }
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   updateRequestedIcon() {
-    this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
+    this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
   }
   updateDuration() {
-    if (this.autoDismiss && this.autoDismissTimeoutId) {
-      window.clearTimeout(this.autoDismissTimeoutId);
-      this.autoDismissTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration] - (Date.now() - this.trackTimer));
+    if (this.autoClose && this.autoCloseTimeoutId) {
+      window.clearTimeout(this.autoCloseTimeoutId);
+      this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoCloseDuration] - (Date.now() - this.trackTimer));
     }
   }
   //--------------------------------------------------------------------------
@@ -113,24 +103,33 @@ export class Alert {
   //--------------------------------------------------------------------------
   connectedCallback() {
     connectLocalized(this);
-    const open = this.open || this.active;
+    connectMessages(this);
+    const open = this.open;
     if (open && !this.queued) {
-      this.activeHandler(open);
-      this.openHandler(open);
+      this.openHandler();
       this.calciteInternalAlertRegister.emit();
     }
     connectOpenCloseComponent(this);
   }
-  componentWillLoad() {
-    this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+    this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
+    await setUpMessages(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
   }
   disconnectedCallback() {
-    window.clearTimeout(this.autoDismissTimeoutId);
+    window.clearTimeout(this.autoCloseTimeoutId);
+    window.clearTimeout(this.queueTimeout);
     disconnectOpenCloseComponent(this);
     disconnectLocalized(this);
+    disconnectMessages(this);
+    this.slottedInShell = false;
   }
   render() {
-    const closeButton = (h("button", { "aria-label": this.intlClose, class: "alert-close", onClick: this.closeAlert, ref: (el) => (this.closeButton = el), type: "button" }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
+    const { hasEndActions } = this;
+    const closeButton = (h("button", { "aria-label": this.messages.close, class: "alert-close", onClick: this.closeAlert, ref: (el) => (this.closeButton = el), type: "button" }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
     numberStringFormatter.numberFormatOptions = {
       locale: this.effectiveLocale,
       numberingSystem: this.numberingSystem,
@@ -139,14 +138,16 @@ export class Alert {
     const queueNumber = this.queueLength > 2 ? this.queueLength - 1 : 1;
     const queueText = numberStringFormatter.numberFormatter.format(queueNumber);
     const queueCount = (h("div", { class: `${this.queueLength > 1 ? "active " : ""}alert-queue-count` }, h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
-    const { active, autoDismiss, label, placement, queued, requestedIcon } = this;
-    const role = autoDismiss ? "alert" : "alertdialog";
-    const hidden = !active;
+    const { open, autoClose, label, placement, queued, requestedIcon, iconFlipRtl } = this;
+    const role = autoClose ? "alert" : "alertdialog";
+    const hidden = !open;
+    const slotNode = (h("slot", { key: "actionsEndSlot", name: SLOTS.actionsEnd, onSlotchange: this.actionsEndSlotChangeHandler }));
     return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, h("div", { class: {
         container: true,
         queued,
-        [placement]: true
-      }, ref: this.setTransitionEl }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? h("div", { class: "alert-dismiss-progress" }) : null)));
+        [placement]: true,
+        [CSS.slottedInShell]: this.slottedInShell
+      }, onPointerOut: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseLeave : null, onPointerOver: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null, ref: this.setTransitionEl }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { flipRtl: iconFlipRtl, icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), h("div", { class: CSS.actionsEnd, hidden: !hasEndActions }, slotNode), this.queueLength > 1 ? queueCount : null, closeButton, open && !queued && autoClose ? h("div", { class: "alert-dismiss-progress" }) : null)));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -173,6 +174,7 @@ export class Alert {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    await componentLoaded(this);
     const alertLinkEl = getSlotted(this.el, { selector: "calcite-link" });
     if (!this.closeButton && !alertLinkEl) {
       return;
@@ -184,14 +186,16 @@ export class Alert {
       this.closeButton.focus();
     }
   }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
   /** determine which alert is active */
   determineActiveAlert() {
-    var _a;
-    if (((_a = this.queue) === null || _a === void 0 ? void 0 : _a[0]) === this.el) {
+    if (this.queue?.[0] === this.el) {
       this.openAlert();
-      if (this.autoDismiss && !this.autoDismissTimeoutId) {
+      if (this.autoClose && !this.autoCloseTimeoutId) {
         this.trackTimer = Date.now();
-        this.autoDismissTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration]);
+        this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoCloseDuration]);
       }
     }
     else {
@@ -227,29 +231,9 @@ export class Alert {
       "$": ["alert.css"]
     };
   }
+  static get assetsDirs() { return ["assets"]; }
   static get properties() {
     return {
-      "active": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "use `open` instead."
-            }],
-          "text": "When `true`, displays and positions the component."
-        },
-        "attribute": "active",
-        "reflect": true,
-        "defaultValue": "false"
-      },
       "open": {
         "type": "boolean",
         "mutable": true,
@@ -268,7 +252,7 @@ export class Alert {
         "reflect": true,
         "defaultValue": "false"
       },
-      "autoDismiss": {
+      "autoClose": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -282,11 +266,11 @@ export class Alert {
           "tags": [],
           "text": "When `true`, the component closes automatically (recommended for passive, non-blocking alerts)."
         },
-        "attribute": "auto-dismiss",
+        "attribute": "auto-close",
         "reflect": true,
         "defaultValue": "false"
       },
-      "autoDismissDuration": {
+      "autoCloseDuration": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -303,22 +287,22 @@ export class Alert {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specifies the duration before the component automatically closes (only use with `autoDismiss`)."
+          "text": "Specifies the duration before the component automatically closes (only use with `autoClose`)."
         },
-        "attribute": "auto-dismiss-duration",
+        "attribute": "auto-close-duration",
         "reflect": true,
-        "defaultValue": "this.autoDismiss ? \"medium\" : null"
+        "defaultValue": "this.autoClose ? \"medium\" : null"
       },
-      "color": {
+      "kind": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "StatusColor",
-          "resolved": "\"blue\" | \"green\" | \"red\" | \"yellow\"",
+          "original": "Kind",
+          "resolved": "\"brand\" | \"danger\" | \"info\" | \"inverse\" | \"neutral\" | \"success\" | \"warning\"",
           "references": {
-            "StatusColor": {
+            "Kind": {
               "location": "import",
-              "path": "./interfaces"
+              "path": "../interfaces"
             }
           }
         },
@@ -326,11 +310,11 @@ export class Alert {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specifies the color for the component (will apply to top border and icon)."
+          "text": "Specifies the kind of the component (will apply to top border and icon)."
         },
-        "attribute": "color",
+        "attribute": "kind",
         "reflect": true,
-        "defaultValue": "\"blue\""
+        "defaultValue": "\"brand\""
       },
       "icon": {
         "type": "any",
@@ -349,26 +333,23 @@ export class Alert {
         "attribute": "icon",
         "reflect": true
       },
-      "intlClose": {
-        "type": "string",
+      "iconFlipRtl": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"Close\""
-            }],
-          "text": "Specifies the text label for the close button."
+          "tags": [],
+          "text": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
         },
-        "attribute": "intl-close",
-        "reflect": false,
-        "defaultValue": "TEXT.intlClose"
+        "attribute": "icon-flip-rtl",
+        "reflect": true,
+        "defaultValue": "false"
       },
       "label": {
         "type": "string",
@@ -401,7 +382,7 @@ export class Alert {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Specifies the Unicode numeral system used by the component for localization."
@@ -413,12 +394,12 @@ export class Alert {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "AlertPlacement",
+          "original": "MenuPlacement",
           "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"top\" | \"top-end\" | \"top-start\"",
           "references": {
-            "AlertPlacement": {
+            "MenuPlacement": {
               "location": "import",
-              "path": "./interfaces"
+              "path": "../../utils/floating-ui"
             }
           }
         },
@@ -454,12 +435,80 @@ export class Alert {
         "attribute": "scale",
         "reflect": true,
         "defaultValue": "\"m\""
+      },
+      "messages": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "AlertMessages",
+          "resolved": "{ close: string; }",
+          "references": {
+            "AlertMessages": {
+              "location": "import",
+              "path": "./assets/alert/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Made into a prop for testing purposes only"
+        }
+      },
+      "messageOverrides": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Partial<AlertMessages>",
+          "resolved": "{ close?: string; }",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "AlertMessages": {
+              "location": "import",
+              "path": "./assets/alert/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this property to override individual strings used by the component."
+        }
+      },
+      "slottedInShell": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "This internal property, managed by a containing calcite-shell, is used\nto inform the component if special configuration or styles are needed"
+        },
+        "attribute": "slotted-in-shell",
+        "reflect": false
       }
     };
   }
   static get states() {
     return {
       "effectiveLocale": {},
+      "defaultMessages": {},
+      "hasEndActions": {},
       "queue": {},
       "queueLength": {},
       "queued": {},
@@ -596,20 +645,23 @@ export class Alert {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "active",
-        "methodName": "activeHandler"
-      }, {
         "propName": "open",
         "methodName": "openHandler"
+      }, {
+        "propName": "messageOverrides",
+        "methodName": "onMessagesChange"
       }, {
         "propName": "icon",
         "methodName": "updateRequestedIcon"
       }, {
-        "propName": "color",
+        "propName": "kind",
         "methodName": "updateRequestedIcon"
       }, {
-        "propName": "autoDismissDuration",
+        "propName": "autoCloseDuration",
         "methodName": "updateDuration"
+      }, {
+        "propName": "effectiveLocale",
+        "methodName": "effectiveLocaleChange"
       }];
   }
   static get listeners() {

package/dist/collection/components/alert/assets/alert/t9n/index.d.ts

@@ -0,0 +1,3 @@
+export type AlertMessages = {
+  close: string;
+};

package/dist/collection/components/alert/assets/alert/t9n/messages.json

@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_ar.json

@@ -0,0 +1,3 @@
+{
+  "close": "إغلاق"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_bg.json

@@ -0,0 +1,3 @@
+{
+  "close": "Затваряне"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_bs.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zatvori"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_ca.json

@@ -0,0 +1,3 @@
+{
+  "close": "Tanca"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_cs.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zavřít"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_da.json

@@ -0,0 +1,3 @@
+{
+  "close": "Luk"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_de.json

@@ -0,0 +1,3 @@
+{
+  "close": "Schließen"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_el.json

@@ -0,0 +1,3 @@
+{
+  "close": "Κλείσιμο"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_en.json

@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_es.json

@@ -0,0 +1,3 @@
+{
+  "close": "Cerrar"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_et.json

@@ -0,0 +1,3 @@
+{
+  "close": "Sule"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_fi.json

@@ -0,0 +1,3 @@
+{
+  "close": "Sulje"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_fr.json

@@ -0,0 +1,3 @@
+{
+  "close": "Fermer"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_he.json

@@ -0,0 +1,3 @@
+{
+  "close": "סגירה"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_hr.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zatvori"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_hu.json

@@ -0,0 +1,3 @@
+{
+  "close": "Bezárás"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_id.json

@@ -0,0 +1,3 @@
+{
+  "close": "Tutup"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_it.json

@@ -0,0 +1,3 @@
+{
+  "close": "Chiudi"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_ja.json

@@ -0,0 +1,3 @@
+{
+  "close": "閉じる"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_ko.json

@@ -0,0 +1,3 @@
+{
+  "close": "닫기"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_lt.json

@@ -0,0 +1,3 @@
+{
+  "close": "Uždaryti"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_lv.json

@@ -0,0 +1,3 @@
+{
+  "close": "Aizvērt"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_nl.json

@@ -0,0 +1,3 @@
+{
+  "close": "Sluiten"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_no.json

@@ -0,0 +1,3 @@
+{
+  "close": "Lukk"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_pl.json

@@ -0,0 +1,3 @@
+{
+  "close": "Zamknij"
+}

package/dist/collection/components/alert/assets/alert/t9n/messages_pt-BR.json

@@ -0,0 +1,3 @@
+{
+  "close": "Fechar"
+}