@esri/calcite-components 1.0.0-next.678 → 1.0.0-next.679

package/dist/cjs/calcite-flow-item.cjs.entry.js

@@ -1,19 +1,23 @@
 /*!
  * 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.678
+ * v1.0.0-next.679
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-58849f83.js');
-const dom = require('./dom-5c929b62.js');
-const resources = require('./resources-daacfbf0.js');
-const interactive = require('./interactive-e0095568.js');
-const loadable = require('./loadable-7929ed41.js');
-require('./resources-7df48fc6.js');
-require('./guid-ddfe8762.js');
+const index = require('./index-8758b88f.js');
+const dom = require('./dom-7155cb03.js');
+const resources = require('./resources-2b9e8dfe.js');
+const interactive = require('./interactive-60c2fc0a.js');
+const locale = require('./locale-8b87a2fe.js');
+const t9n = require('./t9n-3cb110cf.js');
+const loadable = require('./loadable-b9b1bd28.js');
+require('./resources-c39f2198.js');
+require('./guid-92d3ff00.js');
+require('./key-b75091ee.js');
+require('./observers-4b68f005.js');
 
 const CSS = {
   backButton: "back-button"
@@ -22,9 +26,6 @@ const ICONS = {
   backLeft: "chevron-left",
   backRight: "chevron-right"
 };
-const TEXT = {
-  back: "Back"
-};
 const SLOTS = {
   headerActionsStart: "header-actions-start",
   headerActionsEnd: "header-actions-end",
@@ -65,9 +66,6 @@ const FlowItem = class {
     this.setContainerRef = (node) => {
       this.containerEl = node;
     };
-    this.getBackLabel = () => {
-      return this.intlBack || TEXT.back;
-    };
     this.closable = false;
     this.closed = false;
     this.beforeBack = undefined;
@@ -81,24 +79,43 @@ const FlowItem = class {
     this.intlOptions = undefined;
     this.loading = false;
     this.menuOpen = false;
+    this.messageOverrides = undefined;
+    this.messages = undefined;
     this.showBackButton = false;
     this.widthScale = undefined;
     this.backButtonEl = undefined;
+    this.defaultMessages = undefined;
+    this.effectiveLocale = "";
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
   }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  componentWillLoad() {
+  connectedCallback() {
+    locale.connectLocalized(this);
+    t9n.connectMessages(this);
+  }
+  async componentWillLoad() {
+    await t9n.setUpMessages(this);
     loadable.setUpLoadableComponent(this);
   }
   componentDidRender() {
     interactive.updateHostInteraction(this);
   }
+  disconnectedCallback() {
+    locale.disconnectLocalized(this);
+    t9n.disconnectMessages(this);
+  }
   componentDidLoad() {
     loadable.setComponentLoaded(this);
   }
+  effectiveLocaleChange() {
+    t9n.updateMessages(this, this.effectiveLocale);
+  }
   // --------------------------------------------------------------------------
   //
   //  Methods
@@ -138,17 +155,25 @@ const FlowItem = class {
   renderBackButton() {
     const { el } = this;
     const rtl = dom.getElementDir(el) === "rtl";
-    const { showBackButton, backButtonClick } = this;
-    const label = this.getBackLabel();
+    const { showBackButton, backButtonClick, messages } = this;
+    const label = messages.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;
     return showBackButton ? (index.h("calcite-action", { "aria-label": label, class: CSS.backButton, icon: icon, key: "flow-back-button", onClick: backButtonClick, ref: this.setBackRef, scale: "s", slot: "header-actions-start", text: label })) : null;
   }
   render() {
-    const { closable, closed, description, disabled, heading, headingLevel, heightScale, intlClose, intlOptions, loading, menuOpen, widthScale, backButtonEl } = this;
-    const label = this.getBackLabel();
-    return (index.h(index.Host, null, index.h("calcite-panel", { closable: closable, closed: closed, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, heightScale: heightScale, intlClose: intlClose, intlOptions: intlOptions, loading: loading, menuOpen: menuOpen, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, ref: this.setContainerRef, widthScale: widthScale }, this.renderBackButton(), index.h("slot", { name: SLOTS.headerActionsStart, slot: resources.SLOTS.headerActionsStart }), index.h("slot", { name: SLOTS.headerActionsEnd, slot: resources.SLOTS.headerActionsEnd }), index.h("slot", { name: SLOTS.headerContent, slot: resources.SLOTS.headerContent }), index.h("slot", { name: SLOTS.headerMenuActions, slot: resources.SLOTS.headerMenuActions }), index.h("slot", { name: SLOTS.fab, slot: resources.SLOTS.fab }), index.h("slot", { name: SLOTS.footerActions, slot: resources.SLOTS.footerActions }), index.h("slot", { name: SLOTS.footer, slot: resources.SLOTS.footer }), index.h("slot", null)), backButtonEl ? (index.h("calcite-tooltip", { label: label, overlayPositioning: "fixed", placement: "top", referenceElement: backButtonEl }, label)) : null));
+    const { closable, closed, description, disabled, heading, headingLevel, heightScale, loading, menuOpen, messages, widthScale, backButtonEl } = this;
+    const label = messages.back;
+    return (index.h(index.Host, null, index.h("calcite-panel", { closable: closable, closed: closed, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, heightScale: heightScale, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, ref: this.setContainerRef, widthScale: widthScale }, this.renderBackButton(), index.h("slot", { name: SLOTS.headerActionsStart, slot: resources.SLOTS.headerActionsStart }), index.h("slot", { name: SLOTS.headerActionsEnd, slot: resources.SLOTS.headerActionsEnd }), index.h("slot", { name: SLOTS.headerContent, slot: resources.SLOTS.headerContent }), index.h("slot", { name: SLOTS.headerMenuActions, slot: resources.SLOTS.headerMenuActions }), index.h("slot", { name: SLOTS.fab, slot: resources.SLOTS.fab }), index.h("slot", { name: SLOTS.footerActions, slot: resources.SLOTS.footerActions }), index.h("slot", { name: SLOTS.footer, slot: resources.SLOTS.footer }), index.h("slot", null)), backButtonEl ? (index.h("calcite-tooltip", { label: label, overlayPositioning: "fixed", placement: "top", referenceElement: backButtonEl }, label)) : null));
   }
+  static get assetsDirs() { return ["assets"]; }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "intlBack": ["onMessagesChange"],
+    "intlClose": ["onMessagesChange"],
+    "intlOptions": ["onMessagesChange"],
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
+  }; }
 };
 FlowItem.style = flowItemCss;
 

package/dist/cjs/calcite-flow.cjs.entry.js

@@ -1,14 +1,14 @@
 /*!
  * 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.678
+ * v1.0.0-next.679
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-58849f83.js');
-const observers = require('./observers-9524d251.js');
+const index = require('./index-8758b88f.js');
+const observers = require('./observers-4b68f005.js');
 
 const CSS = {
   frame: "frame",

package/dist/cjs/calcite-graph_2.cjs.entry.js

@@ -1,24 +1,24 @@
 /*!
  * 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.678
+ * v1.0.0-next.679
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-58849f83.js');
-const guid = require('./guid-ddfe8762.js');
-const observers = require('./observers-9524d251.js');
-const dom = require('./dom-5c929b62.js');
-const math = require('./math-b4875d23.js');
-const label = require('./label-e02d1b7a.js');
-const form = require('./form-f1f6fa64.js');
-const interactive = require('./interactive-e0095568.js');
-const key = require('./key-d629f690.js');
-const locale = require('./locale-ce4edb57.js');
-const loadable = require('./loadable-7929ed41.js');
-require('./resources-7df48fc6.js');
+const index = require('./index-8758b88f.js');
+const guid = require('./guid-92d3ff00.js');
+const observers = require('./observers-4b68f005.js');
+const dom = require('./dom-7155cb03.js');
+const math = require('./math-cbe92eea.js');
+const label = require('./label-70bbf976.js');
+const form = require('./form-b8acc674.js');
+const interactive = require('./interactive-60c2fc0a.js');
+const key = require('./key-b75091ee.js');
+const locale = require('./locale-8b87a2fe.js');
+const loadable = require('./loadable-b9b1bd28.js');
+require('./resources-c39f2198.js');
 
 /**
  * Calculate slope of the tangents

package/dist/cjs/calcite-handle.cjs.entry.js

@@ -1,17 +1,17 @@
 /*!
  * 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.678
+ * v1.0.0-next.679
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-58849f83.js');
-const dom = require('./dom-5c929b62.js');
-const loadable = require('./loadable-7929ed41.js');
-require('./resources-7df48fc6.js');
-require('./guid-ddfe8762.js');
+const index = require('./index-8758b88f.js');
+const dom = require('./dom-7155cb03.js');
+const loadable = require('./loadable-b9b1bd28.js');
+require('./resources-c39f2198.js');
+require('./guid-92d3ff00.js');
 
 const CSS = {
   handle: "handle",

package/dist/cjs/calcite-icon.cjs.entry.js

@@ -1,17 +1,17 @@
 /*!
  * 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.678
+ * v1.0.0-next.679
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-58849f83.js');
-const dom = require('./dom-5c929b62.js');
-const observers = require('./observers-9524d251.js');
-require('./resources-7df48fc6.js');
-require('./guid-ddfe8762.js');
+const index = require('./index-8758b88f.js');
+const dom = require('./dom-7155cb03.js');
+const observers = require('./observers-4b68f005.js');
+require('./resources-c39f2198.js');
+require('./guid-92d3ff00.js');
 
 const CSS = {
   icon: "icon",

package/dist/cjs/calcite-inline-editable.cjs.entry.js

@@ -1,20 +1,23 @@
 /*!
  * 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.678
+ * v1.0.0-next.679
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-58849f83.js');
-const dom = require('./dom-5c929b62.js');
-const label = require('./label-e02d1b7a.js');
-const observers = require('./observers-9524d251.js');
-const interactive = require('./interactive-e0095568.js');
-const loadable = require('./loadable-7929ed41.js');
-require('./resources-7df48fc6.js');
-require('./guid-ddfe8762.js');
+const index = require('./index-8758b88f.js');
+const dom = require('./dom-7155cb03.js');
+const label = require('./label-70bbf976.js');
+const observers = require('./observers-4b68f005.js');
+const interactive = require('./interactive-60c2fc0a.js');
+const locale = require('./locale-8b87a2fe.js');
+const t9n = require('./t9n-3cb110cf.js');
+const loadable = require('./loadable-b9b1bd28.js');
+require('./resources-c39f2198.js');
+require('./guid-92d3ff00.js');
+require('./key-b75091ee.js');
 
 const CSS = {
   wrapper: "wrapper",
@@ -25,11 +28,6 @@ const CSS = {
   enableEditingButton: "enable-editing-button",
   controlsWrapper: "controls-wrapper"
 };
-const TEXT = {
-  intlEnablingEditing: "Click to edit",
-  intlCancelEditing: "Cancel",
-  intlConfirmChanges: "Save"
-};
 
 const inlineEditableCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:600}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:block}:host([scale=s]) .controls-wrapper{block-size:1.5rem}:host([scale=m]) .controls-wrapper{block-size:2rem}:host([scale=l]) .controls-wrapper{block-size:2.75rem}:host(:not([editing-enabled]):not([disabled])) .wrapper:hover{background-color:var(--calcite-ui-foreground-2)}.wrapper{box-sizing:border-box;display:flex;justify-content:space-between;background-color:var(--calcite-ui-foreground-1);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.wrapper .input-wrapper{flex:1 1 0%}.controls-wrapper{display:flex}:host([disabled]) .cancel-editing-button-wrapper{border-color:var(--calcite-ui-border-2)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}";
 
@@ -114,11 +112,15 @@ const InlineEditable = class {
     this.editingEnabled = false;
     this.loading = false;
     this.controls = false;
-    this.intlEnableEditing = TEXT.intlEnablingEditing;
-    this.intlCancelEditing = TEXT.intlCancelEditing;
-    this.intlConfirmChanges = TEXT.intlConfirmChanges;
+    this.intlEnableEditing = undefined;
+    this.intlCancelEditing = undefined;
+    this.intlConfirmChanges = undefined;
     this.scale = undefined;
     this.afterConfirm = undefined;
+    this.messages = undefined;
+    this.messageOverrides = undefined;
+    this.defaultMessages = undefined;
+    this.effectiveLocale = undefined;
   }
   disabledWatcher(disabled) {
     if (this.inputElement) {
@@ -133,6 +135,9 @@ const InlineEditable = class {
       this.shouldEmitCancel = true;
     }
   }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -140,29 +145,34 @@ const InlineEditable = class {
   //--------------------------------------------------------------------------
   connectedCallback() {
     label.connectLabel(this);
+    locale.connectLocalized(this);
+    t9n.connectMessages(this);
     this.mutationObserver?.observe(this.el, { childList: true });
     this.mutationObserverCallback();
   }
-  componentWillLoad() {
+  async componentWillLoad() {
     loadable.setUpLoadableComponent(this);
+    await t9n.setUpMessages(this);
   }
   componentDidLoad() {
     loadable.setComponentLoaded(this);
   }
   disconnectedCallback() {
     label.disconnectLabel(this);
+    locale.disconnectLocalized(this);
+    t9n.disconnectMessages(this);
     this.mutationObserver?.disconnect();
   }
   componentDidRender() {
     interactive.updateHostInteraction(this);
   }
   render() {
-    return (index.h("div", { class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, index.h("div", { class: CSS.inputWrapper }, index.h("slot", null)), index.h("div", { class: CSS.controlsWrapper }, index.h("calcite-button", { appearance: "transparent", class: CSS.enableEditingButton, color: "neutral", disabled: this.disabled, iconStart: "pencil", label: this.intlEnableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
+    return (index.h("div", { class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, index.h("div", { class: CSS.inputWrapper }, index.h("slot", null)), index.h("div", { class: CSS.controlsWrapper }, index.h("calcite-button", { appearance: "transparent", class: CSS.enableEditingButton, color: "neutral", disabled: this.disabled, iconStart: "pencil", label: this.messages.enableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
         opacity: this.editingEnabled ? "0" : "1",
         width: this.editingEnabled ? "0" : "inherit"
       }, type: "button" }), this.shouldShowControls && [
-      index.h("div", { class: CSS.cancelEditingButtonWrapper }, index.h("calcite-button", { appearance: "transparent", class: CSS.cancelEditingButton, color: "neutral", disabled: this.disabled, iconStart: "x", label: this.intlCancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale, type: "button" })),
-      index.h("calcite-button", { appearance: "solid", class: CSS.confirmChangesButton, color: "blue", disabled: this.disabled, iconStart: "check", label: this.intlConfirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, ref: (el) => (this.confirmEditingButton = el), scale: this.scale, type: "button" })
+      index.h("div", { class: CSS.cancelEditingButtonWrapper }, index.h("calcite-button", { appearance: "transparent", class: CSS.cancelEditingButton, color: "neutral", disabled: this.disabled, iconStart: "x", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale, type: "button" })),
+      index.h("calcite-button", { appearance: "solid", class: CSS.confirmChangesButton, color: "blue", disabled: this.disabled, iconStart: "check", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, ref: (el) => (this.confirmEditingButton = el), scale: this.scale, type: "button" })
     ])));
   }
   //--------------------------------------------------------------------------
@@ -175,6 +185,9 @@ const InlineEditable = class {
       this.disableEditing();
     }
   }
+  effectiveLocaleChange() {
+    t9n.updateMessages(this, this.effectiveLocale);
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -216,10 +229,16 @@ const InlineEditable = class {
   get shouldShowControls() {
     return this.editingEnabled && this.controls;
   }
+  static get assetsDirs() { return ["assets"]; }
   get el() { return index.getElement(this); }
   static get watchers() { return {
     "disabled": ["disabledWatcher"],
-    "editingEnabled": ["editingEnabledWatcher"]
+    "editingEnabled": ["editingEnabledWatcher"],
+    "intlCancelEditing": ["onMessagesChange"],
+    "intlConfirmChanges": ["onMessagesChange"],
+    "intlEnableEditing": ["onMessagesChange"],
+    "messageOverrides": ["onMessagesChange"],
+    "effectiveLocale": ["effectiveLocaleChange"]
   }; }
 };
 InlineEditable.style = inlineEditableCss;