@arcgis/common-components 4.29.0-beta.4 → 4.29.0-beta.41

package/README.md

@@ -14,4 +14,4 @@ See use restrictions at <http://www.esri.com/legal/pdfs/mla_e204_e300/english>
 
 For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA
 
-email: contracts@esri.com
+email: contracts@esri.com

package/dist/arcgis-common-components/arcgis-common-components.esm.js

@@ -1 +1 @@
-import{p,b as a}from"./p-b0c98bba.js";export{s as setNonce}from"./p-b0c98bba.js";(()=>{const a=import.meta.url,r={};return""!==a&&(r.resourcesUrl=new URL(".",a).href),p(r)})().then((p=>a([["p-3768a3bb",[[0,"arcgis-api-key",{apiKey:[1,"api-key"]}]]],["p-84fccaad",[[0,"arcgis-identity",{identity:[1040],appId:[1,"app-id"],credential:[1040],expiration:[1026],locale:[1],usePopup:[4,"use-popup"],popupCallbackUrl:[1,"popup-callback-url"],portalUrl:[1,"portal-url"],preserveUrlHash:[4,"preserve-url-hash"],signIn:[64],signOut:[64]}]]]],p)));
+import{p,b as a}from"./p-2a7fe37a.js";export{s as setNonce}from"./p-2a7fe37a.js";(()=>{const a=import.meta.url,e={};return""!==a&&(e.resourcesUrl=new URL(".",a).href),p(e)})().then((p=>a([["p-a39b4556",[[0,"arcgis-api-key",{apiKey:[1,"api-key"]},null,{apiKey:["apiKeyWatcher"]}]]],["p-50b351b8",[[0,"arcgis-identity",{identity:[1040],appId:[1,"app-id"],credential:[1040],expiration:[1026],locale:[1],usePopup:[4,"use-popup"],popupCallbackUrl:[1,"popup-callback-url"],portalUrl:[1,"portal-url"],preserveUrlHash:[4,"preserve-url-hash"],signIn:[64],signOut:[64]},null,{appId:["appIdWatcher"]}]]]],p)));

package/dist/arcgis-common-components/p-2a7fe37a.js

@@ -0,0 +1,2 @@
+let e=!1;function t(e){var t,n,o;return null!==(o=null===(n=null===(t=e.head)||void 0===t?void 0:t.querySelector('meta[name="csp-nonce"]'))||void 0===n?void 0:n.getAttribute("content"))&&void 0!==o?o:void 0}const n=e=>g(e).$hostElement$,o=(e,t,o)=>{const i=n(e);return{emit:e=>s(i,t,{bubbles:!!(4&o),composed:!!(2&o),cancelable:!!(1&o),detail:e})}},s=(e,t,n)=>{const o=T.ce(t,n);return e.dispatchEvent(o),o},i=new WeakMap,c=e=>"sc-"+e.t,l=(e,t)=>{t&&!e.o&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.o=t)))},r=(e,t)=>{if(e.i|=16,!(4&e.i))return l(e,e.l),H((()=>a(e,t)));e.i|=512},a=(e,t)=>{const n=e.u;return u(void 0,(()=>d(e,n,t)))},u=(e,t)=>f(e)?e.then(t):t(),f=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,d=async(e,n,o)=>{var s;const l=e.$hostElement$,r=l["s-rc"];o&&(e=>{const n=e.m;((e,n)=>{var o;const s=c(n),l=P.get(s);if(e=11===e.nodeType?e:N,l)if("string"==typeof l){let n,c=i.get(e=e.head||e);if(c||i.set(e,c=new Set),!c.has(s)){{n=N.createElement("style"),n.innerHTML=l;const s=null!==(o=T.h)&&void 0!==o?o:t(N);null!=s&&n.setAttribute("nonce",s),e.insertBefore(n,e.querySelector("link"))}c&&c.add(s)}}else e.adoptedStyleSheets.includes(l)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,l])})(e.$hostElement$.getRootNode(),n)})(e);m(e,n),r&&(r.map((e=>e())),l["s-rc"]=void 0);{const t=null!==(s=l["s-p"])&&void 0!==s?s:[],n=()=>h(e);0===t.length?n():(Promise.all(t).then(n),e.i|=4,t.length=0)}},m=(e,t)=>{try{t=t.render&&t.render(),e.i&=-17,e.i|=2}catch(t){k(t,e.$hostElement$)}return null},h=e=>{const t=e.$hostElement$,n=e.l;64&e.i||(e.i|=64,y(t),e.v(t),n||v()),e.p(t),e.o&&(e.o(),e.o=void 0),512&e.i&&q((()=>r(e,!1))),e.i&=-517},v=()=>{y(N.documentElement),q((()=>s(E,"appload",{detail:{namespace:"arcgis-common-components"}})))},y=e=>e.setAttribute("hydrated",""),p=(e,t,n)=>{var o;if(t.$){e.watchers&&(t.S=e.watchers);const s=Object.entries(t.$),i=e.prototype;if(s.map((([e,[o]])=>{31&o||2&n&&32&o?Object.defineProperty(i,e,{get(){return((e,t)=>g(this).j.get(t))(0,e)},set(n){((e,t,n,o)=>{const s=g(e),i=s.$hostElement$,c=s.j.get(t),l=s.i,a=s.u;if(n=((e,t)=>null==e||(e=>"object"==(e=typeof e)||"function"===e)(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(n,o.$[t][0]),(!(8&l)||void 0===c)&&n!==c&&(!Number.isNaN(c)||!Number.isNaN(n))&&(s.j.set(t,n),a)){if(o.S&&128&l){const e=o.S[t];e&&e.map((e=>{try{a[e](n,c,t)}catch(e){k(e,i)}}))}2==(18&l)&&r(s,!1)}})(this,e,n,t)},configurable:!0,enumerable:!0}):1&n&&64&o&&Object.defineProperty(i,e,{value(...t){const n=g(this);return n.M.then((()=>n.u[e](...t)))}})})),1&n){const n=new Map;i.attributeChangedCallback=function(e,o,s){T.jmp((()=>{const c=n.get(e);if(this.hasOwnProperty(c))s=this[c],delete this[c];else{if(i.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==s)return;if(null==c){const n=g(this),i=null==n?void 0:n.i;if(!(8&i)&&128&i&&s!==o){const i=n.u,c=t.S[e];null==c||c.forEach((t=>{null!=i[t]&&i[t].call(i,s,o,e)}))}return}}this[c]=(null!==s||"boolean"!=typeof this[c])&&s}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!==(o=t.S)&&void 0!==o?o:{}),...s.filter((([e,t])=>15&t[0])).map((([e,t])=>{const o=t[1]||e;return n.set(o,e),o}))]))}}return e},b=e=>{((e,t)=>{if(e&&e[t])try{return e[t](void 0)}catch(e){k(e)}})(e,"connectedCallback")},w=(e,n={})=>{var o;const s=[],i=n.exclude||[],a=E.customElements,u=N.head,f=u.querySelector("meta[charset]"),d=N.createElement("style"),m=[];let h,y=!0;Object.assign(T,n),T.k=new URL(n.resourcesUrl||"./",N.baseURI).href,e.map((e=>{e[1].map((t=>{var n;const o={i:t[0],t:t[1],$:t[2],C:t[3]};o.$=t[2],o.S=null!==(n=t[4])&&void 0!==n?n:{};const u=o.t,f=class extends HTMLElement{constructor(e){super(e),M(e=this,o)}connectedCallback(){h&&(clearTimeout(h),h=null),y?m.push(this):T.jmp((()=>(e=>{if(0==(1&T.i)){const t=g(e),n=t.m,o=()=>{};if(1&t.i)(null==t?void 0:t.u)?b(t.u):(null==t?void 0:t.O)&&t.O.then((()=>b(t.u)));else{t.i|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){l(t,t.l=n);break}}n.$&&Object.entries(n.$).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let o;if(0==(32&t.i)){t.i|=32;{if(o=O(n),o.then){const e=()=>{};o=await o,e()}o.isProxied||(n.S=o.watchers,p(o,n,2),o.isProxied=!0);const e=()=>{};t.i|=8;try{new o(t)}catch(e){k(e)}t.i&=-9,t.i|=128,e(),b(t.u)}if(o.style){let e=o.style;const t=c(n);if(!P.has(t)){const o=()=>{};((e,t,n)=>{let o=P.get(e);A&&n?(o=o||new CSSStyleSheet,"string"==typeof o?o=t:o.replaceSync(t)):o=t,P.set(e,o)})(t,e,!!(1&n.i)),o()}}}const s=t.l,i=()=>r(t,!0);s&&s["s-rc"]?s["s-rc"].push(i):i()})(0,t,n)}o()}})(this)))}disconnectedCallback(){T.jmp((()=>(async()=>{if(0==(1&T.i)){const e=g(this);(null==e?void 0:e.u)||(null==e?void 0:e.O)&&e.O.then((()=>{}))}})()))}componentOnReady(){return g(this).O}};o.P=e[0],i.includes(u)||a.get(u)||(s.push(u),a.define(u,p(f,o,1)))}))}));{d.innerHTML=s+"{visibility:hidden}[hydrated]{visibility:inherit}",d.setAttribute("data-styles","");const e=null!==(o=T.h)&&void 0!==o?o:t(N);null!=e&&d.setAttribute("nonce",e),u.insertBefore(d,f?f.nextSibling:u.firstChild)}y=!1,m.length?m.map((e=>e.connectedCallback())):T.jmp((()=>h=setTimeout(v,30)))},$=e=>T.h=e,S=new WeakMap,g=e=>S.get(e),j=(e,t)=>S.set(t.u=e,t),M=(e,t)=>{const n={i:0,$hostElement$:e,m:t,j:new Map};return n.M=new Promise((e=>n.p=e)),n.O=new Promise((e=>n.v=e)),e["s-p"]=[],e["s-rc"]=[],S.set(e,n)},k=(e,t)=>(0,console.error)(e,t),C=new Map,O=e=>{const t=e.t.replace(/-/g,"_"),n=e.P,o=C.get(n);return o?o[t]:import(`./${n}.entry.js`).then((e=>(C.set(n,e),e[t])),k)
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/},P=new Map,E="undefined"!=typeof window?window:{},N=E.document||{head:{}},T={i:0,k:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,o)=>e.addEventListener(t,n,o),rel:(e,t,n,o)=>e.removeEventListener(t,n,o),ce:(e,t)=>new CustomEvent(e,t)},x=e=>Promise.resolve(e),A=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),F=[],L=[],R=(t,n)=>o=>{t.push(o),e||(e=!0,n&&4&T.i?q(W):T.raf(W))},U=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){k(e)}e.length=0},W=()=>{U(F),U(L),(e=F.length>0)&&T.raf(W)},q=e=>x().then(e),H=R(L,!0);export{w as b,o as c,n as g,x as p,j as r,$ as s}

package/dist/arcgis-common-components/{p-84fccaad.entry.js → p-50b351b8.entry.js}

@@ -1 +1 @@
-import{r as t,c as i,g as s}from"./p-b0c98bba.js";import{a as h,n as a,b as e}from"./p-9625972e.js";const r=class{constructor(s){t(this,s),this.identityReady=i(this,"identityReady",7),this.credentialCreate=i(this,"credentialCreate",7),this.dialogCreate=i(this,"dialogCreate",7),this.identity=void 0,this.appId=void 0,this.credential=void 0,this.expiration=void 0,this.locale=void 0,this.usePopup=!1,this.popupCallbackUrl=void 0,this.portalUrl=void 0,this.preserveUrlHash=!1}appIdWatcher(t,i){i!==t&&this._registerOAuth()}async signIn(){if(!this.credential)try{this.credential=await this._checkCurrentStatus()}catch(t){this.credential=await this._fetchCredential()}return this.credential}async signOut(){if(!this.credential)try{this.identity.destroyCredentials()}catch(t){this.credential=void 0}this.credential=void 0}async connectedCallback(){this.appId&&await this._registerOAuth(),this._proxyEvents(),await this._addWatchers(),this.identityReady.emit({identity:this.identity,ready:!0})}async _addWatchers(){const{watch:t}=await h();t((()=>this._info.expiration),(t=>this.expiration=t),{initial:!0})}_checkCurrentStatus(){return this.identity.checkSignInStatus(`${this._info.portalUrl}/sharing`)}async _createOAuthInfo(){const t={};void 0!==this.appId&&(t.appId=this.appId),void 0!==this.locale&&(t.locale=this.locale),void 0!==this.popupCallbackUrl&&(t.popupCallbackUrl=this.popupCallbackUrl),void 0!==this.preserveUrlHash&&(t.preserveUrlHash=this.preserveUrlHash),void 0!==this.usePopup&&(t.popup=this.usePopup),void 0!==this.portalUrl&&(t.portalUrl=this.portalUrl);const i=await a(t);return this._info=i,i}async _fetchCredential(){return await this.identity.getCredential(`${this._info?.portalUrl}/sharing`,{error:null,oAuthPopupConfirmation:!1,token:null})}async _registerOAuth(){this.identity=await e();const t=await this._createOAuthInfo();this.identity.registerOAuthInfos([t])}_proxyEvents(){this.identity.on("credential-create",(t=>this.credentialCreate.emit(t))),this.identity.on("dialog-create",(t=>this.dialogCreate.emit(t)))}get el(){return s(this)}static get watchers(){return{appId:["appIdWatcher"]}}};r.style=":host{display:none}arcgis-identity{display:none}";export{r as arcgis_identity}
+import{r as t,c as i,g as s}from"./p-2a7fe37a.js";import{a as h,n as a,b as e}from"./p-b4629d3e.js";const r=class{constructor(s){t(this,s),this.identityReady=i(this,"identityReady",7),this.credentialCreate=i(this,"credentialCreate",7),this.dialogCreate=i(this,"dialogCreate",7),this.identity=void 0,this.appId=void 0,this.credential=void 0,this.expiration=void 0,this.locale=void 0,this.usePopup=!1,this.popupCallbackUrl=void 0,this.portalUrl=void 0,this.preserveUrlHash=!1}appIdWatcher(t,i){i!==t&&this._registerOAuth()}async signIn(){if(!this.credential)try{this.credential=await this._checkCurrentStatus()}catch(t){this.credential=await this._fetchCredential()}return this.credential}async signOut(){if(!this.credential)try{this.identity.destroyCredentials()}catch(t){this.credential=void 0}this.credential=void 0}async connectedCallback(){this.appId&&await this._registerOAuth(),this._proxyEvents(),await this._addWatchers(),this.identityReady.emit({identity:this.identity,ready:!0})}async _addWatchers(){const{watch:t}=await h();t((()=>this._info.expiration),(t=>this.expiration=t),{initial:!0})}_checkCurrentStatus(){return this.identity.checkSignInStatus(`${this._info.portalUrl}/sharing`)}async _createOAuthInfo(){const t={};void 0!==this.appId&&(t.appId=this.appId),void 0!==this.locale&&(t.locale=this.locale),void 0!==this.popupCallbackUrl&&(t.popupCallbackUrl=this.popupCallbackUrl),void 0!==this.preserveUrlHash&&(t.preserveUrlHash=this.preserveUrlHash),void 0!==this.usePopup&&(t.popup=this.usePopup),void 0!==this.portalUrl&&(t.portalUrl=this.portalUrl);const i=await a(t);return this._info=i,i}async _fetchCredential(){return await this.identity.getCredential(`${this._info?.portalUrl}/sharing`,{error:null,oAuthPopupConfirmation:!1,token:null})}async _registerOAuth(){this.identity=await e();const t=await this._createOAuthInfo();this.identity.registerOAuthInfos([t])}_proxyEvents(){this.identity.on("credential-create",(t=>this.credentialCreate.emit(t))),this.identity.on("dialog-create",(t=>this.dialogCreate.emit(t)))}get el(){return s(this)}static get watchers(){return{appId:["appIdWatcher"]}}};r.style=":host{display:none}arcgis-identity{display:none}";export{r as arcgis_identity}

package/dist/arcgis-common-components/p-a39b4556.entry.js

@@ -0,0 +1 @@
+import{r as a,c as s,g as t}from"./p-2a7fe37a.js";import{i}from"./p-b4629d3e.js";const e=class{constructor(t){a(this,t),this.apiKeyReady=s(this,"apiKeyReady",7),this.apiKey=void 0}apiKeyWatcher(a){this._setApiKey(a)}async connectedCallback(){this.apiKey&&await this._setApiKey(this.apiKey)}async _setApiKey(a){(await i()).apiKey=a,this.apiKeyReady.emit(!0)}get el(){return t(this)}static get watchers(){return{apiKey:["apiKeyWatcher"]}}};e.style=":host{display:none}arcgis-api-key{display:none}";export{e as arcgis_api_key}

package/dist/cjs/arcgis-api-key.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e8c59179.js');
-const index$1 = require('./index-f1a937af.js');
+const index = require('./index-693a0aa8.js');
+const index$1 = require('./index-f93ca465.js');
 
-const arcgisApiKeyCss = ":host{display:none}arcgis-api-key{display:none}";
+const apiKeyCss = ":host{display:none}arcgis-api-key{display:none}";
 
 const ArcgisApiKey = class {
   constructor(hostRef) {
@@ -46,6 +46,6 @@ const ArcgisApiKey = class {
     "apiKey": ["apiKeyWatcher"]
   }; }
 };
-ArcgisApiKey.style = arcgisApiKeyCss;
+ArcgisApiKey.style = apiKeyCss;
 
 exports.arcgis_api_key = ArcgisApiKey;

package/dist/cjs/arcgis-common-components.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e8c59179.js');
+const index = require('./index-693a0aa8.js');
 
 /*
- Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.7.1 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('arcgis-common-components.cjs.js', document.baseURI).href));
@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["arcgis-api-key.cjs",[[0,"arcgis-api-key",{"apiKey":[1,"api-key"]}]]],["arcgis-identity.cjs",[[0,"arcgis-identity",{"identity":[1040],"appId":[1,"app-id"],"credential":[1040],"expiration":[1026],"locale":[1],"usePopup":[4,"use-popup"],"popupCallbackUrl":[1,"popup-callback-url"],"portalUrl":[1,"portal-url"],"preserveUrlHash":[4,"preserve-url-hash"],"signIn":[64],"signOut":[64]}]]]], options);
+  return index.bootstrapLazy([["arcgis-api-key.cjs",[[0,"arcgis-api-key",{"apiKey":[1,"api-key"]},null,{"apiKey":["apiKeyWatcher"]}]]],["arcgis-identity.cjs",[[0,"arcgis-identity",{"identity":[1040],"appId":[1,"app-id"],"credential":[1040],"expiration":[1026],"locale":[1],"usePopup":[4,"use-popup"],"popupCallbackUrl":[1,"popup-callback-url"],"portalUrl":[1,"portal-url"],"preserveUrlHash":[4,"preserve-url-hash"],"signIn":[64],"signOut":[64]},null,{"appId":["appIdWatcher"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/arcgis-identity.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e8c59179.js');
-const index$1 = require('./index-f1a937af.js');
+const index = require('./index-693a0aa8.js');
+const index$1 = require('./index-f93ca465.js');
 
-const arcgisIdentityCss = ":host{display:none}arcgis-identity{display:none}";
+const identityCss = ":host{display:none}arcgis-identity{display:none}";
 
 const ArcgisIdentity = class {
   constructor(hostRef) {
@@ -134,6 +134,6 @@ const ArcgisIdentity = class {
     "appId": ["appIdWatcher"]
   }; }
 };
-ArcgisIdentity.style = arcgisIdentityCss;
+ArcgisIdentity.style = identityCss;
 
 exports.arcgis_identity = ArcgisIdentity;

package/dist/cjs/{index-e8c59179.js → index-693a0aa8.js}

@@ -46,6 +46,13 @@ const uniqueTime = (key, measureText) => {
     }
 };
 const HYDRATED_CSS = '{visibility:hidden}[hydrated]{visibility:inherit}';
+/**
+ * Check whether a value is a 'complex type', defined here as an object or a
+ * function.
+ *
+ * @param o the value to check
+ * @returns whether it's a complex type or not
+ */
 const isComplexType = (o) => {
     // https://jsperf.com/typeof-fn-object/5
     o = typeof o;
@@ -153,9 +160,9 @@ const registerStyle = (scopeId, cssText, allowCS) => {
     }
     styles.set(scopeId, style);
 };
-const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
+const addStyle = (styleContainerNode, cmpMeta, mode) => {
     var _a;
-    let scopeId = getScopeId(cmpMeta);
+    const scopeId = getScopeId(cmpMeta);
     const style = styles.get(scopeId);
     // if an element is NOT connected then getRootNode() will return the wrong root node
     // so the fallback is to always use the document for the root node in those cases
@@ -170,10 +177,8 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
             }
             if (!appliedStyles.has(scopeId)) {
                 {
-                    {
-                        styleElm = doc.createElement('style');
-                        styleElm.innerHTML = style;
-                    }
+                    styleElm = doc.createElement('style');
+                    styleElm.innerHTML = style;
                     // Apply CSP nonce to the style tag if it exists
                     const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
                     if (nonce != null) {
@@ -220,15 +225,76 @@ const scheduleUpdate = (hostRef, isInitialLoad) => {
     const dispatch = () => dispatchHooks(hostRef, isInitialLoad);
     return writeTask(dispatch) ;
 };
+/**
+ * Dispatch initial-render and update lifecycle hooks, enqueuing calls to
+ * component lifecycle methods like `componentWillLoad` as well as
+ * {@link updateComponent}, which will kick off the virtual DOM re-render.
+ *
+ * @param hostRef a reference to a host DOM node
+ * @param isInitialLoad whether we're on the initial load or not
+ * @returns an empty Promise which is used to enqueue a series of operations for
+ * the component
+ */
 const dispatchHooks = (hostRef, isInitialLoad) => {
     const endSchedule = createTime('scheduleUpdate', hostRef.$cmpMeta$.$tagName$);
     const instance = hostRef.$lazyInstance$ ;
-    let promise;
+    // We're going to use this variable together with `enqueue` to implement a
+    // little promise-based queue. We start out with it `undefined`. When we add
+    // the first function to the queue we'll set this variable to be that
+    // function's return value. When we attempt to add subsequent values to the
+    // queue we'll check that value and, if it was a `Promise`, we'll then chain
+    // the new function off of that `Promise` using `.then()`. This will give our
+    // queue two nice properties:
+    //
+    // 1. If all functions added to the queue are synchronous they'll be called
+    //    synchronously right away.
+    // 2. If all functions added to the queue are asynchronous they'll all be
+    //    called in order after `dispatchHooks` exits.
+    let maybePromise;
     endSchedule();
-    return then(promise, () => updateComponent(hostRef, instance, isInitialLoad));
+    return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad));
 };
+/**
+ * This function uses a Promise to implement a simple first-in, first-out queue
+ * of functions to be called.
+ *
+ * The queue is ordered on the basis of the first argument. If it's
+ * `undefined`, then nothing is on the queue yet, so the provided function can
+ * be called synchronously (although note that this function may return a
+ * `Promise`). The idea is that then the return value of that enqueueing
+ * operation is kept around, so that if it was a `Promise` then subsequent
+ * functions can be enqueued by calling this function again with that `Promise`
+ * as the first argument.
+ *
+ * @param maybePromise either a `Promise` which should resolve before the next function is called or an 'empty' sentinel
+ * @param fn a function to enqueue
+ * @returns either a `Promise` or the return value of the provided function
+ */
+const enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn) : fn();
+/**
+ * Check that a value is a `Promise`. To check, we first see if the value is an
+ * instance of the `Promise` global. In a few circumstances, in particular if
+ * the global has been overwritten, this is could be misleading, so we also do
+ * a little 'duck typing' check to see if the `.then` property of the value is
+ * defined and a function.
+ *
+ * @param maybePromise it might be a promise!
+ * @returns whether it is or not
+ */
+const isPromisey = (maybePromise) => maybePromise instanceof Promise ||
+    (maybePromise && maybePromise.then && typeof maybePromise.then === 'function');
+/**
+ * Update a component given reference to its host elements and so on.
+ *
+ * @param hostRef an object containing references to the element's host node,
+ * VDom nodes, and other metadata
+ * @param instance a reference to the underlying host element where it will be
+ * rendered
+ * @param isInitialLoad whether or not this function is being called as part of
+ * the first render cycle
+ */
 const updateComponent = async (hostRef, instance, isInitialLoad) => {
-    // updateComponent
+    var _a;
     const elm = hostRef.$hostElement$;
     const endUpdate = createTime('update', hostRef.$cmpMeta$.$tagName$);
     const rc = elm['s-rc'];
@@ -250,7 +316,7 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
     endRender();
     endUpdate();
     {
-        const childrenPromises = elm['s-p'];
+        const childrenPromises = (_a = elm['s-p']) !== null && _a !== void 0 ? _a : [];
         const postUpdate = () => postUpdateComponent(hostRef);
         if (childrenPromises.length === 0) {
             postUpdate();
@@ -262,8 +328,24 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
         }
     }
 };
-const callRender = (hostRef, instance, elm) => {
+/**
+ * Handle making the call to the VDom renderer with the proper context given
+ * various build variables
+ *
+ * @param hostRef an object containing references to the element's host node,
+ * VDom nodes, and other metadata
+ * @param instance a reference to the underlying host element where it will be
+ * rendered
+ * @param elm the Host element for the component
+ * @param isInitialLoad whether or not this function is being called as part of
+ * @returns an empty promise
+ */
+const callRender = (hostRef, instance, elm, isInitialLoad) => {
     try {
+        /**
+         * minification optimization: `allRenderFn` is `true` if all components have a `render`
+         * method, so we can call the method immediately. If not, check before calling it.
+         */
         instance = instance.render && instance.render();
         {
             hostRef.$flags$ &= ~16 /* HOST_FLAGS.isQueuedForUpdate */;
@@ -326,6 +408,16 @@ const appDidLoad = (who) => {
     }
     nextTick(() => emitEvent(win, 'appload', { detail: { namespace: NAMESPACE } }));
 };
+/**
+ * Allows to safely call a method, e.g. `componentDidLoad`, on an instance,
+ * e.g. custom element node. If a build figures out that e.g. no component
+ * has a `componentDidLoad` method, the instance method gets removed from the
+ * output bundle and this function returns `undefined`.
+ * @param instance any object that may or may not contain methods
+ * @param method method name
+ * @param arg single arbitrary argument
+ * @returns result of method call if it exists, otherwise `undefined`
+ */
 const safeCall = (instance, method, arg) => {
     if (instance && instance[method]) {
         try {
@@ -337,9 +429,6 @@ const safeCall = (instance, method, arg) => {
     }
     return undefined;
 };
-const then = (promise, thenFn) => {
-    return promise && promise.then ? promise.then(thenFn) : thenFn();
-};
 const addHydratedFlag = (elm) => elm.setAttribute('hydrated', '')
         ;
 const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
@@ -396,6 +485,7 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
  * @returns a reference to the same constructor passed in (but now mutated)
  */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
+    var _a;
     if (cmpMeta.$members$) {
         if (Cstr.watchers) {
             cmpMeta.$watchers$ = Cstr.watchers;
@@ -433,7 +523,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
         });
         if ((flags & 1 /* PROXY_FLAGS.isElementConstructor */)) {
             const attrNameToPropName = new Map();
-            prototype.attributeChangedCallback = function (attrName, _oldValue, newValue) {
+            prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
                 plt.jmp(() => {
                     const propName = attrNameToPropName.get(attrName);
                     //  In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
@@ -456,12 +546,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                     //      customElements.define('my-component', MyComponent);
                     //    </script>
                     //  ```
-                    //  In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
+                    //  In this case if we do not un-shadow here and use the value of the shadowing property, attributeChangedCallback
                     //  will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
                     //  to the value that was set inline i.e. "some-value" from above example. When
-                    //  the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
+                    //  the connectedCallback attempts to un-shadow it will use "some-value" as the initial value rather than "another-value"
                     //
-                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
+                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/un-shadowed
                     //  by connectedCallback as this attributeChangedCallback will not fire.
                     //
                     //  https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
@@ -481,28 +571,67 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                         // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.
                         return;
                     }
+                    else if (propName == null) {
+                        // At this point we should know this is not a "member", so we can treat it like watching an attribute
+                        // on a vanilla web component
+                        const hostRef = getHostRef(this);
+                        const flags = hostRef === null || hostRef === void 0 ? void 0 : hostRef.$flags$;
+                        // We only want to trigger the callback(s) if:
+                        // 1. The instance is ready
+                        // 2. The watchers are ready
+                        // 3. The value has changed
+                        if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
+                            flags & 128 /* HOST_FLAGS.isWatchReady */ &&
+                            newValue !== oldValue) {
+                            const instance = hostRef.$lazyInstance$ ;
+                            const entry = cmpMeta.$watchers$[attrName];
+                            entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
+                                if (instance[callbackName] != null) {
+                                    instance[callbackName].call(instance, newValue, oldValue, attrName);
+                                }
+                            });
+                        }
+                        return;
+                    }
                     this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;
                 });
             };
-            // create an array of attributes to observe
-            // and also create a map of html attribute name to js property name
-            Cstr.observedAttributes = members
-                .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */) // filter to only keep props that should match attributes
-                .map(([propName, m]) => {
-                const attrName = m[1] || propName;
-                attrNameToPropName.set(attrName, propName);
-                return attrName;
-            });
+            // Create an array of attributes to observe
+            // This list in comprised of all strings used within a `@Watch()` decorator
+            // on a component as well as any Stencil-specific "members" (`@Prop()`s and `@State()`s).
+            // As such, there is no way to guarantee type-safety here that a user hasn't entered
+            // an invalid attribute.
+            Cstr.observedAttributes = Array.from(new Set([
+                ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}),
+                ...members
+                    .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
+                    .map(([propName, m]) => {
+                    const attrName = m[1] || propName;
+                    attrNameToPropName.set(attrName, propName);
+                    return attrName;
+                }),
+            ]));
         }
     }
     return Cstr;
 };
-const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) => {
+/**
+ * Initialize a Stencil component given a reference to its host element, its
+ * runtime bookkeeping data structure, runtime metadata about the component,
+ * and (optionally) an HMR version ID.
+ *
+ * @param elm a host element
+ * @param hostRef the element's runtime bookkeeping object
+ * @param cmpMeta runtime metadata for the Stencil component
+ * @param hmrVersionId an (optional) HMR version ID
+ */
+const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
+    let Cstr;
     // initializeComponent
     if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {
+        // Let the runtime know that the component has been initialized
+        hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
         {
-            // we haven't initialized this element yet
-            hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;
             // lazy loaded components
             // request the component's implementation to be
             // wired up with the host element
@@ -621,14 +750,25 @@ const connectedCallback = (elm) => {
         }
         else {
             // fire off connectedCallback() on component instance
-            fireConnectedCallback(hostRef.$lazyInstance$);
+            if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) {
+                fireConnectedCallback(hostRef.$lazyInstance$);
+            }
+            else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
+                hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$));
+            }
         }
         endConnected();
     }
 };
-const disconnectedCallback = (elm) => {
+const disconnectInstance = (instance) => {
+};
+const disconnectedCallback = async (elm) => {
     if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {
-        getHostRef(elm);
+        const hostRef = getHostRef(elm);
+        if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) ;
+        else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {
+            hostRef.$onReadyPromise$.then(() => disconnectInstance());
+        }
     }
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {
@@ -647,6 +787,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
     lazyBundles.map((lazyBundle) => {
         lazyBundle[1].map((compactMeta) => {
+            var _a;
             const cmpMeta = {
                 $flags$: compactMeta[0],
                 $tagName$: compactMeta[1],
@@ -657,7 +798,7 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
                 cmpMeta.$members$ = compactMeta[2];
             }
             {
-                cmpMeta.$watchers$ = {};
+                cmpMeta.$watchers$ = (_a = compactMeta[4]) !== null && _a !== void 0 ? _a : {};
             }
             const tagName = cmpMeta.$tagName$;
             const HostElement = class extends HTMLElement {
@@ -725,13 +866,40 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
  * @returns void
  */
 const setNonce = (nonce) => (plt.$nonce$ = nonce);
+/**
+ * A WeakMap mapping runtime component references to their corresponding host reference
+ * instances.
+ */
 const hostRefs = /*@__PURE__*/ new WeakMap();
+/**
+ * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}
+ *
+ * @param ref the runtime ref of interest
+ * @returns the Host reference (if found) or undefined
+ */
 const getHostRef = (ref) => hostRefs.get(ref);
+/**
+ * Register a lazy instance with the {@link hostRefs} object so it's
+ * corresponding {@link d.HostRef} can be retrieved later.
+ *
+ * @param lazyInstance the lazy instance of interest
+ * @param hostRef that instances `HostRef` object
+ * @returns a reference to the host ref WeakMap
+ */
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
-const registerHost = (elm, cmpMeta) => {
+/**
+ * Register a host element for a Stencil component, setting up various metadata
+ * and callbacks based on {@link BUILD} flags as well as the component's runtime
+ * metadata.
+ *
+ * @param hostElement the host element to register
+ * @param cmpMeta runtime metadata for that component
+ * @returns a reference to the host ref WeakMap
+ */
+const registerHost = (hostElement, cmpMeta) => {
     const hostRef = {
         $flags$: 0,
-        $hostElement$: elm,
+        $hostElement$: hostElement,
         $cmpMeta$: cmpMeta,
         $instanceValues$: new Map(),
     };
@@ -740,10 +908,10 @@ const registerHost = (elm, cmpMeta) => {
     }
     {
         hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));
-        elm['s-p'] = [];
-        elm['s-rc'] = [];
+        hostElement['s-p'] = [];
+        hostElement['s-rc'] = [];
     }
-    return hostRefs.set(elm, hostRef);
+    return hostRefs.set(hostElement, hostRef);
 };
 const consoleError = (e, el) => (0, console.error)(e, el);
 const cmpModules = /*@__PURE__*/ new Map();

package/dist/cjs/loader.cjs.js

@@ -2,20 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e8c59179.js');
-
-/*
- Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
- */
-const patchEsm = () => {
-    return index.promiseResolve();
-};
+const index = require('./index-693a0aa8.js');
 
 const defineCustomElements = (win, options) => {
-  if (typeof window === 'undefined') return Promise.resolve();
-  return patchEsm().then(() => {
-  return index.bootstrapLazy([["arcgis-api-key.cjs",[[0,"arcgis-api-key",{"apiKey":[1,"api-key"]}]]],["arcgis-identity.cjs",[[0,"arcgis-identity",{"identity":[1040],"appId":[1,"app-id"],"credential":[1040],"expiration":[1026],"locale":[1],"usePopup":[4,"use-popup"],"popupCallbackUrl":[1,"popup-callback-url"],"portalUrl":[1,"portal-url"],"preserveUrlHash":[4,"preserve-url-hash"],"signIn":[64],"signOut":[64]}]]]], options);
-  });
+  if (typeof window === 'undefined') return undefined;
+  return index.bootstrapLazy([["arcgis-api-key.cjs",[[0,"arcgis-api-key",{"apiKey":[1,"api-key"]},null,{"apiKey":["apiKeyWatcher"]}]]],["arcgis-identity.cjs",[[0,"arcgis-identity",{"identity":[1040],"appId":[1,"app-id"],"credential":[1040],"expiration":[1026],"locale":[1],"usePopup":[4,"use-popup"],"popupCallbackUrl":[1,"popup-callback-url"],"portalUrl":[1,"portal-url"],"preserveUrlHash":[4,"preserve-url-hash"],"signIn":[64],"signOut":[64]},null,{"appId":["appIdWatcher"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/components/arcgis-api-key.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import { i as importConfig } from './index2.js';
 
-const arcgisApiKeyCss = ":host{display:none}arcgis-api-key{display:none}";
+const apiKeyCss = ":host{display:none}arcgis-api-key{display:none}";
 
-const ArcgisApiKey$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const ArcgisApiKey$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisApiKey extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -42,9 +42,11 @@ const ArcgisApiKey$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   static get watchers() { return {
     "apiKey": ["apiKeyWatcher"]
   }; }
-  static get style() { return arcgisApiKeyCss; }
+  static get style() { return apiKeyCss; }
 }, [0, "arcgis-api-key", {
     "apiKey": [1, "api-key"]
+  }, undefined, {
+    "apiKey": ["apiKeyWatcher"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/arcgis-identity.js

@@ -1,9 +1,9 @@
 import { proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import { a as importCoreReactiveUtils, n as newIdentityOAuthInfo, b as importIdentityIdentityManager } from './index2.js';
 
-const arcgisIdentityCss = ":host{display:none}arcgis-identity{display:none}";
+const identityCss = ":host{display:none}arcgis-identity{display:none}";
 
-const ArcgisIdentity$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+const ArcgisIdentity$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisIdentity extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
@@ -130,7 +130,7 @@ const ArcgisIdentity$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   static get watchers() { return {
     "appId": ["appIdWatcher"]
   }; }
-  static get style() { return arcgisIdentityCss; }
+  static get style() { return identityCss; }
 }, [0, "arcgis-identity", {
     "identity": [1040],
     "appId": [1, "app-id"],
@@ -143,6 +143,8 @@ const ArcgisIdentity$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     "preserveUrlHash": [4, "preserve-url-hash"],
     "signIn": [64],
     "signOut": [64]
+  }, undefined, {
+    "appId": ["appIdWatcher"]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/index.d.ts

@@ -1,6 +1,8 @@
-/* ArcgisCommonComponents custom elements */
-export { ArcgisApiKey as ArcgisApiKey } from '../types/components/arcgis-api-key/arcgis-api-key';
-export { ArcgisIdentity as ArcgisIdentity } from '../types/components/arcgis-identity/arcgis-identity';
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
 
 /**
  * Used to manually set the base path where assets can be found.
@@ -29,4 +31,3 @@ export interface SetPlatformOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
-export * from '../types';

package/dist/components/index.js

@@ -1,3 +1 @@
-export { setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
-export { ArcgisApiKey, defineCustomElement as defineCustomElementArcgisApiKey } from './arcgis-api-key.js';
-export { ArcgisIdentity, defineCustomElement as defineCustomElementArcgisIdentity } from './arcgis-identity.js';
+export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';

package/dist/esm/arcgis-api-key.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, g as getElement } from './index-1f7e8e45.js';
-import { i as importConfig } from './index-71b437b1.js';
+import { r as registerInstance, c as createEvent, g as getElement } from './index-00709df9.js';
+import { i as importConfig } from './index-6dce2d84.js';
 
-const arcgisApiKeyCss = ":host{display:none}arcgis-api-key{display:none}";
+const apiKeyCss = ":host{display:none}arcgis-api-key{display:none}";
 
 const ArcgisApiKey = class {
   constructor(hostRef) {
@@ -42,6 +42,6 @@ const ArcgisApiKey = class {
     "apiKey": ["apiKeyWatcher"]
   }; }
 };
-ArcgisApiKey.style = arcgisApiKeyCss;
+ArcgisApiKey.style = apiKeyCss;
 
 export { ArcgisApiKey as arcgis_api_key };