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

package/dist/collection/components/action/action.css

@@ -69,7 +69,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
-    --calcite-internal-duration-factor: 0.01;
+    --calcite-internal-duration-factor: 0;
   }
 }
 /**
@@ -88,6 +88,7 @@
 
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-z-index: 600;
 }
 
 :host([hidden]) {
@@ -225,13 +226,13 @@
   justify-content: flex-end;
 }
 
-:host([alignment=center]) .button .text-container--visible, 
+:host([alignment=center]) .button .text-container--visible,
 :host([alignment=end]) .button .text-container--visible {
   flex: 0 1 auto;
 }
 
-:host([scale=s][compact]) .button, 
-:host([scale=m][compact]) .button, 
+:host([scale=s][compact]) .button,
+:host([scale=m][compact]) .button,
 :host([scale=l][compact]) .button {
   padding-inline: 0px;
 }
@@ -248,9 +249,9 @@
   inline-size: 100%;
 }
 
-:host([active]) .button, 
-:host([active]) .button:hover, 
-:host([active]) .button:focus, 
+:host([active]) .button,
+:host([active]) .button:hover,
+:host([active]) .button:focus,
 :host([active][loading]) .button {
   background-color: var(--calcite-ui-foreground-3);
   fill: var(--calcite-ui-text-1);
@@ -261,7 +262,6 @@
   background-color: var(--calcite-ui-foreground-1);
 }
 
-:host([appearance=clear]) .button, 
 :host([appearance=transparent]) .button {
   background-color: transparent;
   transition-property: box-shadow;
@@ -269,39 +269,32 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-:host([appearance=clear]) .button:hover, 
-:host([appearance=clear]) .button:focus, 
-:host([appearance=transparent]) .button:hover, 
+:host([appearance=transparent]) .button:hover,
 :host([appearance=transparent]) .button:focus {
   background-color: transparent;
   box-shadow: 0 0 0 2px var(--calcite-ui-border-1) inset;
 }
 
-:host([active][appearance=clear]) .button, 
-:host([active][appearance=clear]) .button:hover, 
-:host([active][appearance=clear]) .button:focus, 
-:host([active][appearance=transparent]) .button, 
-:host([active][appearance=transparent]) .button:hover, 
+:host([active][appearance=transparent]) .button,
+:host([active][appearance=transparent]) .button:hover,
 :host([active][appearance=transparent]) .button:focus {
   background-color: var(--calcite-ui-foreground-3);
   fill: var(--calcite-ui-text-1);
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=clear][loading]) .button, 
-:host([appearance=clear][disabled]) .button, 
-:host([appearance=transparent][loading]) .button, 
+:host([appearance=transparent][loading]) .button,
 :host([appearance=transparent][disabled]) .button {
   background-color: transparent;
 }
 
-:host([loading]) .button, 
-:host([loading]) .button:hover, 
+:host([loading]) .button,
+:host([loading]) .button:hover,
 :host([loading]) .button:focus {
   background-color: var(--calcite-ui-foreground-1);
 }
-:host([loading]) .button .text-container, 
-:host([loading]) .button:hover .text-container, 
+:host([loading]) .button .text-container,
+:host([loading]) .button:hover .text-container,
 :host([loading]) .button:focus .text-container {
   opacity: var(--calcite-ui-opacity-disabled);
 }
@@ -311,16 +304,16 @@
   margin-inline-end: 0px;
 }
 
-:host([disabled]) .button, 
-:host([disabled]) .button:hover, 
+:host([disabled]) .button,
+:host([disabled]) .button:hover,
 :host([disabled]) .button:focus {
   cursor: default;
   background-color: var(--calcite-ui-foreground-1);
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
-:host([disabled][active]) .button, 
-:host([disabled][active]) .button:hover, 
+:host([disabled][active]) .button,
+:host([disabled][active]) .button:hover,
 :host([disabled][active]) .button:focus {
   background-color: var(--calcite-ui-foreground-3);
   opacity: var(--calcite-ui-opacity-disabled);
@@ -360,4 +353,16 @@
 
 :host([indicator][active]) .button::after {
   border-color: var(--calcite-ui-foreground-3);
+}
+
+.indicator-text {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
 }

package/dist/collection/components/action/action.js

@@ -1,60 +1,26 @@
 /*!
  * 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 { Host, h, forceUpdate } from "@stencil/core";
-import { CSS, TEXT, SLOTS } from "./resources";
+import { Host, h, forceUpdate, Build } from "@stencil/core";
+import { CSS, SLOTS } from "./resources";
+import { guid } from "../../utils/guid";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
 import { toAriaBoolean } from "../../utils/dom";
+import { connectLocalized, disconnectLocalized } from "../../utils/locale";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
+import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../../utils/loadable";
 /**
  * @slot - A slot for adding a `calcite-icon`.
  */
 export class Action {
   constructor() {
-    // --------------------------------------------------------------------------
-    //
-    //  Properties
-    //
-    // --------------------------------------------------------------------------
-    /**
-     * When `true`, the component is highlighted.
-     */
-    this.active = false;
-    /** Specifies the appearance of the component. */
-    this.appearance = "solid";
-    /**
-     * When `true`, the side padding of the component is reduced. Compact mode is used internally by components, e.g. `calcite-block-section`.
-     */
-    this.compact = false;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     */
-    this.disabled = false;
-    /**
-     * When `true`, indicates unread changes.
-     */
-    this.indicator = false;
-    /**
-     * Specifies the text label to display while loading.
-     *
-     * @default "Loading"
-     */
-    this.intlLoading = TEXT.loading;
-    /**
-     * When `true`, a busy indicator is displayed.
-     */
-    this.loading = false;
-    /**
-     * Specifies the size of the component.
-     */
-    this.scale = "m";
-    /**
-     * Indicates whether the text is displayed.
-     */
-    this.textEnabled = false;
     this.mutationObserver = createObserver("mutation", () => forceUpdate(this));
+    this.guid = `calcite-action-${guid()}`;
+    this.indicatorId = `${this.guid}-indicator`;
+    this.buttonId = `${this.guid}-button`;
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -65,17 +31,35 @@ export class Action {
         .assignedElements({
         flatten: true
       })
-        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
+        .filter((el) => el?.matches("calcite-tooltip"));
       const tooltip = tooltips[0];
       if (tooltip) {
         tooltip.referenceElement = this.buttonEl;
       }
     };
-    this.calciteActionClickHandler = () => {
-      if (!this.disabled) {
-        this.calciteActionClick.emit();
-      }
-    };
+    this.active = false;
+    this.alignment = undefined;
+    this.appearance = "solid";
+    this.compact = false;
+    this.disabled = false;
+    this.icon = undefined;
+    this.iconFlipRtl = false;
+    this.indicator = false;
+    this.label = undefined;
+    this.loading = false;
+    this.scale = "m";
+    this.text = undefined;
+    this.textEnabled = false;
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.effectiveLocale = "";
+    this.defaultMessages = undefined;
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
   }
   // --------------------------------------------------------------------------
   //
@@ -83,12 +67,23 @@ export class Action {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    connectLocalized(this);
+    connectMessages(this);
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
+  }
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+    if (Build.isBrowser) {
+      await setUpMessages(this);
+    }
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    disconnectLocalized(this);
+    disconnectMessages(this);
+    this.mutationObserver?.disconnect();
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -100,8 +95,8 @@ export class Action {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
-    (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
+    await componentLoaded(this);
+    this.buttonEl?.focus();
   }
   // --------------------------------------------------------------------------
   //
@@ -116,15 +111,18 @@ export class Action {
     };
     return text ? (h("div", { class: textContainerClasses, key: "text-container" }, text)) : null;
   }
+  renderIndicatorText() {
+    const { indicator, messages, indicatorId, buttonId } = this;
+    return (h("div", { "aria-labelledby": buttonId, "aria-live": "polite", class: CSS.indicatorText, id: indicatorId, role: "region" }, indicator ? messages.indicator : null));
+  }
   renderIconContainer() {
-    var _a;
-    const { loading, icon, scale, el, intlLoading } = this;
+    const { loading, icon, scale, el, iconFlipRtl } = this;
     const iconScale = scale === "l" ? "m" : "s";
     const loaderScale = scale === "l" ? "l" : "m";
-    const calciteLoaderNode = loading ? (h("calcite-loader", { active: true, inline: true, label: intlLoading, scale: loaderScale })) : null;
-    const calciteIconNode = icon ? h("calcite-icon", { icon: icon, scale: iconScale }) : null;
+    const calciteLoaderNode = loading ? (h("calcite-loader", { inline: true, label: this.messages.loading, scale: loaderScale })) : null;
+    const calciteIconNode = icon ? (h("calcite-icon", { flipRtl: iconFlipRtl, icon: icon, scale: iconScale })) : null;
     const iconNode = calciteLoaderNode || calciteIconNode;
-    const hasIconToDisplay = iconNode || ((_a = el.children) === null || _a === void 0 ? void 0 : _a.length);
+    const hasIconToDisplay = iconNode || el.children?.length;
     const slotContainerNode = (h("div", { class: {
         [CSS.slotContainer]: true,
         [CSS.slotContainerHidden]: loading
@@ -132,14 +130,14 @@ export class Action {
     return hasIconToDisplay ? (h("div", { "aria-hidden": "true", class: CSS.iconContainer, key: "icon-container" }, iconNode, slotContainerNode)) : null;
   }
   render() {
-    const { compact, disabled, loading, textEnabled, label, text } = this;
-    const ariaLabel = label || text;
+    const { active, compact, disabled, loading, textEnabled, label, text, indicator, indicatorId, buttonId, messages } = this;
+    const ariaLabel = `${label || text}${indicator ? ` (${messages.indicator})` : ""}`;
     const buttonClasses = {
       [CSS.button]: true,
       [CSS.buttonTextVisible]: textEnabled,
       [CSS.buttonCompact]: compact
     };
-    return (h(Host, { onClick: this.calciteActionClickHandler }, h("button", { "aria-busy": toAriaBoolean(loading), "aria-disabled": toAriaBoolean(disabled), "aria-label": ariaLabel, class: buttonClasses, disabled: disabled, ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer()), h("slot", { name: SLOTS.tooltip, onSlotchange: this.handleTooltipSlotChange })));
+    return (h(Host, null, h("button", { "aria-busy": toAriaBoolean(loading), "aria-controls": indicator ? indicatorId : null, "aria-disabled": toAriaBoolean(disabled), "aria-label": ariaLabel, "aria-pressed": toAriaBoolean(active), class: buttonClasses, disabled: disabled, id: buttonId, ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer()), h("slot", { name: SLOTS.tooltip, onSlotchange: this.handleTooltipSlotChange }), this.renderIndicatorText()));
   }
   static get is() { return "calcite-action"; }
   static get encapsulation() { return "shadow"; }
@@ -153,6 +151,7 @@ export class Action {
       "$": ["action.css"]
     };
   }
+  static get assetsDirs() { return ["assets"]; }
   static get properties() {
     return {
       "active": {
@@ -187,7 +186,7 @@ export class Action {
           }
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Specifies the horizontal alignment of button elements with text content."
@@ -199,8 +198,8 @@ export class Action {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "Extract<\"solid\" | \"clear\", Appearance>",
-          "resolved": "\"clear\" | \"solid\"",
+          "original": "Extract<\"solid\" | \"transparent\", Appearance>",
+          "resolved": "\"solid\" | \"transparent\"",
           "references": {
             "Extract": {
               "location": "global"
@@ -266,7 +265,7 @@ export class Action {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Specifies an icon to display."
@@ -274,7 +273,7 @@ export class Action {
         "attribute": "icon",
         "reflect": false
       },
-      "indicator": {
+      "iconFlipRtl": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -286,32 +285,29 @@ export class Action {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "When `true`, indicates unread changes."
+          "text": "When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
         },
-        "attribute": "indicator",
+        "attribute": "icon-flip-rtl",
         "reflect": true,
         "defaultValue": "false"
       },
-      "intlLoading": {
-        "type": "string",
+      "indicator": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"Loading\""
-            }],
-          "text": "Specifies the text label to display while loading."
+          "tags": [],
+          "text": "When `true`, displays a visual indicator."
         },
-        "attribute": "intl-loading",
-        "reflect": false,
-        "defaultValue": "TEXT.loading"
+        "attribute": "indicator",
+        "reflect": true,
+        "defaultValue": "false"
       },
       "label": {
         "type": "string",
@@ -322,7 +318,7 @@ export class Action {
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": "Specifies the label of the component. If no label is provided, the label inherits what's provided for the `text` prop."
@@ -405,29 +401,60 @@ export class Action {
         "attribute": "text-enabled",
         "reflect": true,
         "defaultValue": "false"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "calciteActionClick",
-        "name": "calciteActionClick",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
+      },
+      "messages": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "ActionMessages",
+          "resolved": "{ loading: string; indicator: string; }",
+          "references": {
+            "ActionMessages": {
+              "location": "import",
+              "path": "./assets/action/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
         "docs": {
           "tags": [{
-              "name": "deprecated",
-              "text": "use `onClick` instead."
+              "name": "internal",
+              "text": undefined
             }],
-          "text": "Emits when the component has been clicked."
-        },
+          "text": "Made into a prop for testing purposes only"
+        }
+      },
+      "messageOverrides": {
+        "type": "unknown",
+        "mutable": true,
         "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
+          "original": "Partial<ActionMessages>",
+          "resolved": "{ loading?: string; indicator?: string; }",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "ActionMessages": {
+              "location": "import",
+              "path": "./assets/action/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this property to override individual strings used by the component."
         }
-      }];
+      }
+    };
+  }
+  static get states() {
+    return {
+      "effectiveLocale": {},
+      "defaultMessages": {}
+    };
   }
   static get methods() {
     return {
@@ -450,4 +477,13 @@ export class Action {
     };
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "messageOverrides",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "effectiveLocale",
+        "methodName": "effectiveLocaleChange"
+      }];
+  }
 }

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

@@ -0,0 +1,4 @@
+export type ActionMessages = {
+  loading: string;
+  indicator: string;
+};

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

@@ -0,0 +1,4 @@
+{
+  "loading": "Loading",
+  "indicator": "Indicator present"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "تحميل"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Зареждане"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Učitavanje u tijeku"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "S'està carregant..."
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Načítání"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Indlæser"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Wird geladen"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Φόρτωση"
+}

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

@@ -0,0 +1,4 @@
+{
+  "loading": "Loading",
+  "indicator": "Indicator present"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Cargando"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Laadimine"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Ladataan"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Chargement"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "טוען"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Učitavanje u tijeku"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Betöltés"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Memuat"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Caricamento in corso"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "読み込んでいます"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "불러오는 중"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Kraunama"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Ielādē"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Bezig met laden"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Laster inn"
+}

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

@@ -0,0 +1,3 @@
+{
+  "loading": "Wczytywanie"
+}