@esri/solutions-components 0.8.22 → 0.8.24

package/dist/components/instant-apps-header2.js

@@ -12,7 +12,7 @@ import { d as defineCustomElement$3 } from './button.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './loader.js';
 
-const instantAppsHeaderCss = ":host{--instant-apps-header-height:auto;--instant-apps-header-min-height:50px;--instant-apps-header-title-text-link-decoration:underline;--instant-apps-header-height--logo-scale--s:55px;--instant-apps-header-logo-width--logo-scale--s:35px;--instant-apps-header-logo-height--logo-scale--s:35px;--instant-apps-header-height--logo-scale--m:70px;--instant-apps-header-logo-width--logo-scale--m:50px;--instant-apps-header-logo-height--logo-scale--m:50px;--instant-apps-header-height--logo-scale--l:80px;--instant-apps-header-logo-width--logo-scale--l:60px;--instant-apps-header-logo-height--logo-scale--l:60px;width:100%}:host .image.image_resized img{width:100%}:host .instant-apps-header--standard{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--instant-apps-header-height);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);font-family:var(--calcite-sans-family);min-height:var(--instant-apps-header-min-height)}:host .instant-apps-header--standard .instant-apps-header__header-container{display:flex;align-items:center;width:100%;height:inherit}:host .instant-apps-header--standard .instant-apps-header__header-container slot{display:flex;height:inherit}:host .instant-apps-header--standard .instant-apps-header__header-container ::slotted(*){display:flex;min-height:var(--instant-apps-header-min-height);height:var(--instant-apps-header-height)}:host .instant-apps-header--standard .instant-apps-header__header-container ::slotted(*) calcite-button{height:100%}:host .instant-apps-header--standard .instant-apps-header__header-content{box-sizing:border-box;display:flex;align-items:center;width:100%;min-width:0;height:inherit;padding:5px 10px}:host .instant-apps-header--standard .instant-apps-header__header-content a{display:flex;align-items:center;-webkit-text-decoration:var(--instant-apps-header-title-text-link-decoration);text-decoration:var(--instant-apps-header-title-text-link-decoration)}:host .instant-apps-header--standard .instant-apps-header__header-content a img{padding-right:0}:host .instant-apps-header--standard .instant-apps-header__header-content img{margin:10px}:host .instant-apps-header--standard .instant-apps-header__header-content h1{margin:0;font-size:1.25rem;color:var(--calcite-color-text-1);font-weight:430;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .instant-apps-header--standard .instant-apps-header__header-content #infoButton{margin-inline-start:10px}:host .instant-apps-header--standard .instant-apps-header__header-content--center{justify-content:center}:host .instant-apps-header--standard .instant-apps-header__header-content--right{justify-content:end}:host .instant-apps-header__logo-height--s{height:var(--instant-apps-header-height--logo-scale--s)}:host .instant-apps-header__logo-height--s .instant-apps-header__header-content h1{font-size:1.125rem}:host .instant-apps-header__logo-scale--s{width:var(--instant-apps-header-logo-width--logo-scale--s);height:var(--instant-apps-header-logo-height--logo-scale--s)}:host .instant-apps-header__logo-height--m{height:var(--instant-apps-header-height--logo-scale--m)}:host .instant-apps-header__logo-scale--m{width:var(--instant-apps-header-logo-width--logo-scale--m);height:var(--instant-apps-header-logo-height--logo-scale--m)}:host .instant-apps-header__logo-height--l{height:var(--instant-apps-header-height--logo-scale--l)}:host .instant-apps-header__logo-height--l .instant-apps-header__header-content h1{font-size:1.375rem}:host .instant-apps-header__logo-scale--l{width:var(--instant-apps-header-logo-width--logo-scale--l);height:var(--instant-apps-header-logo-height--logo-scale--l)}:host .instant-apps-header__logo-height--s,:host .instant-apps-header__logo-height--m,:host .instant-apps-header__logo-height--l{padding-right:10px}:host .instant-apps-header--rtl.instant-apps-header__logo-height--s,:host .instant-apps-header--rtl.instant-apps-header__logo-height--m,:host .instant-apps-header--rtl.instant-apps-header__logo-height--l{padding-right:0;padding-left:10px}";
+const instantAppsHeaderCss = ":host{--instant-apps-header-height:auto;--instant-apps-header-min-height:50px;--instant-apps-header-title-text-link-decoration:underline;--instant-apps-header-height--logo-scale--s:55px;--instant-apps-header-logo-width--logo-scale--s:35px;--instant-apps-header-logo-height--logo-scale--s:35px;--instant-apps-header-height--logo-scale--m:70px;--instant-apps-header-logo-width--logo-scale--m:50px;--instant-apps-header-logo-height--logo-scale--m:50px;--instant-apps-header-height--logo-scale--l:80px;--instant-apps-header-logo-width--logo-scale--l:60px;--instant-apps-header-logo-height--logo-scale--l:60px;width:100%}:host .image.image_resized img{width:100%}:host .instant-apps-header--standard{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--instant-apps-header-height);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);font-family:var(--calcite-sans-family);min-height:var(--instant-apps-header-min-height)}:host .instant-apps-header--standard .instant-apps-header__header-container{display:flex;align-items:center;width:100%;height:inherit}:host .instant-apps-header--standard .instant-apps-header__header-container slot{display:flex;height:inherit}:host .instant-apps-header--standard .instant-apps-header__header-container ::slotted(*){display:flex;min-height:var(--instant-apps-header-min-height);height:var(--instant-apps-header-height)}:host .instant-apps-header--standard .instant-apps-header__header-container ::slotted(*) calcite-button{height:100%}:host .instant-apps-header--standard .instant-apps-header__header-content{box-sizing:border-box;display:flex;align-items:center;width:100%;min-width:0;height:inherit;padding:5px 10px}:host .instant-apps-header--standard .instant-apps-header__header-content a{display:flex;align-items:center;-webkit-text-decoration:var(--instant-apps-header-title-text-link-decoration);text-decoration:var(--instant-apps-header-title-text-link-decoration)}:host .instant-apps-header--standard .instant-apps-header__header-content a img{padding-right:0}:host .instant-apps-header--standard .instant-apps-header__header-content img{margin:10px}:host .instant-apps-header--standard .instant-apps-header__header-content h1{margin:0;font-size:1.25rem;color:var(--calcite-color-text-1);font-weight:430;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .instant-apps-header--standard .instant-apps-header__header-content #infoButton{margin-inline-start:10px}:host .instant-apps-header--standard .instant-apps-header__header-content--center{justify-content:center}:host .instant-apps-header--standard .instant-apps-header__header-content--right{justify-content:end}:host .instant-apps-header__logo-height--s{height:var(--instant-apps-header-height--logo-scale--s)}:host .instant-apps-header__logo-height--s .instant-apps-header__header-content h1{font-size:1.125rem}:host .instant-apps-header__logo-scale--s{width:var(--instant-apps-header-logo-width--logo-scale--s);height:var(--instant-apps-header-logo-height--logo-scale--s)}:host .instant-apps-header__logo-height--m{height:var(--instant-apps-header-height--logo-scale--m)}:host .instant-apps-header__logo-scale--m{width:var(--instant-apps-header-logo-width--logo-scale--m);height:var(--instant-apps-header-logo-height--logo-scale--m)}:host .instant-apps-header__logo-height--l{height:var(--instant-apps-header-height--logo-scale--l)}:host .instant-apps-header__logo-height--l .instant-apps-header__header-content h1{font-size:1.375rem}:host .instant-apps-header__logo-scale--l{width:var(--instant-apps-header-logo-width--logo-scale--l);height:var(--instant-apps-header-logo-height--logo-scale--l)}:host .instant-apps-header__actions-end-container{display:flex}:host .instant-apps-header__sign-in-container{height:inherit;display:flex;align-items:center}:host .instant-apps-header__sign-in-container calcite-dropdown,:host .instant-apps-header__sign-in-container calcite-navigation-user{height:100%}:host .instant-apps-header__sign-in-container calcite-button{margin:0 10px}:host .instant-apps-header__sign-in-container calcite-dropdown-group{min-width:140px}";
 const InstantAppsHeaderStyle0 = instantAppsHeaderCss;
 
 const CSS = {
@@ -23,6 +23,7 @@ const CSS = {
     logoScale: 'instant-apps-header__logo-scale--',
     logoHeight: 'instant-apps-header__logo-height--',
     standardHeight: 'instant-apps-header__standard-height',
+    actionsEndContainer: 'instant-apps-header__actions-end-container',
     alignment: {
         center: 'instant-apps-header__header-content--center',
         right: 'instant-apps-header__header-content--right',
@@ -86,7 +87,7 @@ const InstantAppsHeader = /*@__PURE__*/ proxyCustomElement(class InstantAppsHead
         const title = this.renderTitle();
         const headerContentClass = this.headerAlignment === 'right' || this.headerAlignment === 'center' ? CSS.headerContent.concat(' ', CSS.alignment[this.headerAlignment]) : CSS.headerContent;
         const fontFamily = getFontFamily(this.fontFamily);
-        return (h(Host, null, this.customHeaderHtml ? ([h("style", null, this.customHeaderCss), h("div", { id: "customHeader", innerHTML: this.customHeaderHtml })]) : (h("header", { class: `${CSS.base}${this.dir === 'rtl' ? ` ${CSS.flipRtl}` : ''}${this.logoImage && !hasEmptyLogo ? ` ${CSS.logoHeight}${this.logoScale}` : ` ${CSS.standardHeight}`}`, style: { backgroundColor: this.backgroundColor, fontFamily } }, h("div", { class: CSS.headerContainer }, h("span", { class: headerContentClass }, logo, title, this.infoButton ? (h("calcite-button", { style: { '--calcite-color-text-1': this.textColor }, id: "infoButton", alignment: "start", appearance: "transparent", kind: "neutral", "icon-start": "information-f", scale: "s", label: this.infoTitleText, title: this.infoTitleText, onClick: this.toggleInfo.bind(this) })) : null), h("slot", { name: "actions-end" }))))));
+        return (h(Host, null, this.customHeaderHtml ? ([h("style", null, this.customHeaderCss), h("div", { id: "customHeader", innerHTML: this.customHeaderHtml })]) : (h("header", { class: `${CSS.base}${this.dir === 'rtl' ? ` ${CSS.flipRtl}` : ''}${this.logoImage && !hasEmptyLogo ? ` ${CSS.logoHeight}${this.logoScale}` : ` ${CSS.standardHeight}`}`, style: { backgroundColor: this.backgroundColor, fontFamily } }, h("div", { class: CSS.headerContainer }, h("span", { class: headerContentClass }, logo, title, this.infoButton ? (h("calcite-button", { style: { '--calcite-color-text-1': this.textColor }, id: "infoButton", alignment: "start", appearance: "transparent", kind: "neutral", "icon-start": "information-f", scale: "s", label: this.infoTitleText, title: this.infoTitleText, onClick: this.toggleInfo.bind(this) })) : null), h("div", { class: CSS.actionsEndContainer }, h("slot", { name: "actions-end" })))))));
     }
     renderLogo(hasEmptyLogo) {
         return hasEmptyLogo ? ('') : this.logoImage && this.logoLink ? (h("a", { href: `${this.logoLink}`, target: "_blank" }, h("img", { class: `${CSS.logoScale}${this.logoScale}`, src: `${this.logoImage}`, alt: `${this.logoImageAltText}` }))) : this.logoImage ? (h("img", { class: `${CSS.logoScale}${this.logoScale}`, src: `${this.logoImage}`, alt: this.logoImageAltText })) : ('');

package/dist/components/instant-apps-interactive-legend-classic2.js

@@ -4,10 +4,10 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { h, proxyCustomElement, HTMLElement, forceUpdate } from '@stencil/core/internal/client';
-import { s as store, i as interactiveLegendState } from './store.js';
-import { a as commonjsGlobal } from './esri-loader.js';
+import { i as interactiveLegendState, s as store } from './store.js';
+import { c as commonjsGlobal } from './esri-loader.js';
 import { l as loadModules } from './loadModules2.js';
-import { h as handleFilterChange, a as generateData, g as getTheme, v as validateInteractivity, b as getParentLegendElementInfoData, c as getCategoryData, d as checkNoneSelected, e as handleFeatureCount, f as createInteractiveLegendDataForLayer, u as updateStore, i as handleFilter, j as getIntLegendLayerData } from './helpers.js';
+import { h as handleFilterChange, g as getTheme, v as validateInteractivity, a as getParentLegendElementInfoData, b as getCategoryData, c as checkNoneSelected, d as handleFeatureCount, e as generateData, f as createInteractiveLegendDataForLayer, u as updateStore, i as handleFilter, j as getIntLegendLayerData } from './helpers.js';
 import { d as defineCustomElement$c } from './action.js';
 import { d as defineCustomElement$b } from './button.js';
 import { d as defineCustomElement$a } from './icon.js';
@@ -1199,7 +1199,7 @@ const InstantAppsInteractiveLegendClassic = /*@__PURE__*/ proxyCustomElement(cla
     async initLegend() {
         try {
             await this.reactiveUtils.whenOnce(() => { var _a; return (_a = this.legendvm) === null || _a === void 0 ? void 0 : _a.view; });
-            this.legendvm.view.when(async () => {
+            const initLegendCallback = async () => {
                 var _a, _b, _c, _d;
                 try {
                     // Initial data setup
@@ -1232,7 +1232,9 @@ const InstantAppsInteractiveLegendClassic = /*@__PURE__*/ proxyCustomElement(cla
                     console.error(err);
                     this.isLoading = false;
                 }
-            });
+            };
+            this.legendvm.view.when(initLegendCallback);
+            this.legendvm.view.map.layers.on('after-changes', initLegendCallback);
         }
         catch (_a) {
             this.isLoading = false;
@@ -1531,7 +1533,7 @@ const InstantAppsInteractiveLegendClassic = /*@__PURE__*/ proxyCustomElement(cla
     }
     setupWatchersAndListeners() {
         // Refreshes interactive legend data on active layer info update
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         const featureLayers = (_d = (_c = (_b = (_a = this.legendvm) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.allLayers) === null || _d === void 0 ? void 0 : _d.filter(layer => (layer === null || layer === void 0 ? void 0 : layer.type) === 'feature');
         featureLayers.forEach(async (fLayer) => {
             var _a, _b, _c, _d;
@@ -1577,6 +1579,11 @@ const InstantAppsInteractiveLegendClassic = /*@__PURE__*/ proxyCustomElement(cla
                 forceUpdate(this.el);
             }));
         }));
+        (_g = this.handles) === null || _g === void 0 ? void 0 : _g.add(this.reactiveUtils.on(() => { var _a, _b, _c; return (_c = (_b = (_a = this.legendvm) === null || _a === void 0 ? void 0 : _a.view) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.layers; }, 'after-changes', async () => {
+            const data = await handleFeatureCount(this.legendvm, interactiveLegendState.data);
+            store.set('data', Object.assign(Object.assign({}, interactiveLegendState.data), data));
+            this.calculatingFeatureCount = false;
+        }));
     }
     async createDataForLayer(fLayer) {
         var _a, _b;

package/dist/components/instant-apps-interactive-legend-legend-element-caption2.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { q as checkNestedUniqueSymbolLegendElement, n as checkRelationshipRamp, b as getParentLegendElementInfoData, z as zoomTo, j as getIntLegendLayerData, s as showAllNestedUniqueSymbol, u as updateStore, r as showAll } from './helpers.js';
+import { q as checkNestedUniqueSymbolLegendElement, n as checkRelationshipRamp, a as getParentLegendElementInfoData, z as zoomTo, j as getIntLegendLayerData, s as showAllNestedUniqueSymbol, u as updateStore, r as showAll } from './helpers.js';
 import { i as interactiveLegendState, s as store } from './store.js';
 import { d as defineCustomElement$5 } from './action.js';
 import { d as defineCustomElement$4 } from './button.js';
@@ -43,7 +43,7 @@ const InstantAppsInteractiveLegendLegendElementCaption = /*@__PURE__*/ proxyCust
         const isNestedUniqueSymbols = checkNestedUniqueSymbolLegendElement(this.activeLayerInfo);
         const isRelationship = checkRelationshipRamp(this.activeLayerInfo);
         const { expanded } = this;
-        return isNestedUniqueSymbols && !this.titleText ? null : (h("div", { class: CSS.layerCaption }, h("calcite-action", { onClick: this.toggleExpanded(), icon: expanded === false ? 'chevron-up' : 'chevron-down', appearance: "transparent", text: expanded === false ? (_a = this.messages) === null || _a === void 0 ? void 0 : _a.expand : (_b = this.messages) === null || _b === void 0 ? void 0 : _b.collapse, label: expanded === false ? (_c = this.messages) === null || _c === void 0 ? void 0 : _c.expand : (_d = this.messages) === null || _d === void 0 ? void 0 : _d.collapse, scale: "s" }), this.isInteractive || isRelationship ? this.renderLegendElementCaptionControls() : null, this.titleText ? h("span", { class: CSS.layerCaptionText }, this.titleText) : null));
+        return isNestedUniqueSymbols && !this.titleText ? null : (h("div", { class: CSS.layerCaption }, h("calcite-action", { onClick: this.toggleExpanded(), icon: expanded === false ? 'chevron-up' : 'chevron-down', appearance: "transparent", text: expanded === false ? (_a = this.messages) === null || _a === void 0 ? void 0 : _a.expand : (_b = this.messages) === null || _b === void 0 ? void 0 : _b.collapse, label: expanded === false ? (_c = this.messages) === null || _c === void 0 ? void 0 : _c.expand : (_d = this.messages) === null || _d === void 0 ? void 0 : _d.collapse, scale: "s" }), this.isInteractive || isRelationship ? this.renderLegendElementCaptionControls() : null, this.titleText ? h("span", { class: CSS.layerCaptionText, title: this.titleText }, this.titleText) : null));
     }
     renderLegendElementCaptionControls() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;

package/dist/components/instant-apps-landing-page.js

@@ -5,9 +5,15 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getFontFamily } from './styles.js';
-import { d as defineCustomElement$4 } from './button.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './loader.js';
+import { d as defineCustomElement$a } from './avatar.js';
+import { d as defineCustomElement$9 } from './button.js';
+import { d as defineCustomElement$8 } from './dropdown.js';
+import { d as defineCustomElement$7 } from './dropdown-group.js';
+import { d as defineCustomElement$6 } from './dropdown-item.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './loader.js';
+import { d as defineCustomElement$3 } from './navigation-user.js';
+import { d as defineCustomElement$2 } from './instant-apps-sign-in2.js';
 
 var AlignmentPositions;
 (function (AlignmentPositions) {
@@ -22,7 +28,7 @@ var AlignmentPositions;
   AlignmentPositions["BottomRight"] = "bottom-right";
 })(AlignmentPositions || (AlignmentPositions = {}));
 
-const instantAppsLandingPageCss = ":host{--instant-apps-landing-page-background-color:var(--calcite-color-brand);--instant-apps-landing-page-text-color:var(--calcite-color-text-inverse);--instant-apps-landing-page-entry-button-color:var(--calcite-color-brand);--instant-apps-landing-page-title-text-font-size:var(--calcite-font-size-6);--instant-apps-landing-page-subtitle-text-font-size:var(--calcite-font-size-3);--instant-apps-landing-page-description-text-font-size:var(--calcite-font-size-0);--instant-apps-landing-page-icon-image-scale--s:100px;--instant-apps-landing-page-icon-image-scale--m:250px;--instant-apps-landing-page-icon-image-scale--l:500px;--instant-apps-landing-page-entry-button-margin:0}:host .instant-apps-landing-page{box-sizing:border-box;position:absolute;top:0;left:0;z-index:9000;display:flex;flex-direction:column;width:100%;height:100%;padding:2.5%;transition:top 0.5s ease-in-out;background-color:var(--instant-apps-landing-page-background-color);color:var(--instant-apps-landing-page-text-color)}:host .instant-apps-landing-page__title-text{color:var(--instant-apps-landing-page-text-color);font-size:var(--instant-apps-landing-page-title-text-font-size);margin:0}:host .instant-apps-landing-page__subtitle-text{font-weight:var(--calcite-font-weight-medium);font-size:var(--instant-apps-landing-page-subtitle-text-font-size);text-align:center}:host .instant-apps-landing-page__description-text{font-size:var(--instant-apps-landing-page-description-text-font-size);width:50%;min-width:250px}:host .instant-apps-landing-page__title-text,:host .instant-apps-landing-page__subtitle-text{text-shadow:0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1)}:host .instant-apps-landing-page__icon-image{margin-bottom:5px;max-width:50%}:host .instant-apps-landing-page__icon-image-scale--s{width:100px}:host .instant-apps-landing-page__icon-image-scale--m{width:250px}:host .instant-apps-landing-page__icon-image-scale--l{width:500px}:host .instant-apps-landing-page__button-container{display:flex}:host .instant-apps-landing-page__button-container .instant-apps-landing-page__entry-button{margin:var(--instant-apps-landing-page-entry-button-margin)}:host .instant-apps-landing-page__entry-button{--calcite-color-brand:var(--instant-apps-landing-page-entry-button-color);--calcite-color-brand-hover:var(--instant-apps-landing-page-entry-button-color);--calcite-color-brand-press:var(--instant-apps-landing-page-entry-button-color)}:host .instant-apps-landing-page__remove-transition{transition:none}:host .instant-apps-landing-page--closed-no-transition{display:none}:host .instant-apps-landing-page--closed{top:-100%}:host .instant-apps-landing-page__alignment--top-center{justify-content:flex-start;align-items:center}:host .instant-apps-landing-page__alignment--top-center .instant-apps-landing-page__content-container{display:flex;flex-direction:column;align-items:center;justify-content:center}:host .instant-apps-landing-page__alignment--top-center .instant-apps-landing-page__description-text{text-align:center}:host .instant-apps-landing-page__alignment--center{justify-content:center;align-items:center}:host .instant-apps-landing-page__alignment--center .instant-apps-landing-page__content-container{display:flex;flex-direction:column;align-items:center}:host .instant-apps-landing-page__alignment--center .instant-apps-landing-page__description-text{text-align:center}:host .instant-apps-landing-page__alignment--bottom-center{justify-content:flex-end;align-items:center}:host .instant-apps-landing-page__alignment--bottom-center .instant-apps-landing-page__content-container{display:flex;flex-direction:column;align-items:center}:host .instant-apps-landing-page__alignment--bottom-center .instant-apps-landing-page__description-text{text-align:center}:host .instant-apps-landing-page__alignment--top-left{justify-content:flex-start;align-items:flex-start}:host .instant-apps-landing-page__alignment--top-left .instant-apps-landing-page__description-text{text-align:left}:host .instant-apps-landing-page__alignment--center-left{justify-content:center;align-items:flex-start}:host .instant-apps-landing-page__alignment--center-left .instant-apps-landing-page__description-text{text-align:left}:host .instant-apps-landing-page__alignment--bottom-left{justify-content:flex-end;align-items:flex-start}:host .instant-apps-landing-page__alignment--bottom-left .instant-apps-landing-page__description-text{text-align:left}:host .instant-apps-landing-page__alignment--top-right{justify-content:flex-start;align-items:flex-end}:host .instant-apps-landing-page__alignment--top-right .instant-apps-landing-page__content-container{display:flex;flex-direction:column;align-items:flex-end}:host .instant-apps-landing-page__alignment--top-right .instant-apps-landing-page__description-text{text-align:right}:host .instant-apps-landing-page__alignment--center-right{justify-content:center;align-items:flex-end}:host .instant-apps-landing-page__alignment--center-right .instant-apps-landing-page__content-container{display:flex;flex-direction:column;align-items:flex-end}:host .instant-apps-landing-page__alignment--center-right .instant-apps-landing-page__description-text{text-align:right}:host .instant-apps-landing-page__alignment--bottom-right{justify-content:flex-end;align-items:flex-end}:host .instant-apps-landing-page__alignment--bottom-right .instant-apps-landing-page__content-container{display:flex;flex-direction:column;align-items:flex-end}:host .instant-apps-landing-page__alignment--bottom-right .instant-apps-landing-page__description-text{text-align:right}@media only screen and (max-width: 768px){:host .instant-apps-landing-page__icon-image{max-width:70%;margin-bottom:20px}:host .instant-apps-landing-page__description-text{width:80%}:host .instant-apps-landing-page__title-text{font-size:var(--calcite-font-size-3)}:host .instant-apps-landing-page__subtitle-text{font-size:var(--calcite-font-size-0)}:host .instant-apps-landing-page__content-container{display:flex;flex-direction:column;align-items:center;margin-top:auto}:host .instant-apps-landing-page__button-container{display:flex;flex-direction:column;width:100%;margin-top:auto}:host .instant-apps-landing-page__button-container .instant-apps-landing-page__entry-button{width:100%;margin-right:unset;margin-bottom:10px}}@media only screen and (max-width: 896px) and (orientation: landscape){:host .instant-apps-landing-page__icon-image{max-width:25%}}";
+const instantAppsLandingPageCss = ":host{--instant-apps-landing-page-background-color:var(--calcite-color-brand);--instant-apps-landing-page-text-color:var(--calcite-color-text-inverse);--instant-apps-landing-page-entry-button-color:var(--calcite-color-brand);--instant-apps-landing-page-title-text-font-size:var(--calcite-font-size-6);--instant-apps-landing-page-subtitle-text-font-size:var(--calcite-font-size-3);--instant-apps-landing-page-description-text-font-size:var(--calcite-font-size-0);--instant-apps-landing-page-icon-image-scale--s:100px;--instant-apps-landing-page-icon-image-scale--m:250px;--instant-apps-landing-page-icon-image-scale--l:500px;--instant-apps-landing-page-entry-button-margin:0}:host .instant-apps-landing-page{box-sizing:border-box;position:absolute;top:0;left:0;z-index:9000;display:flex;flex-direction:column;width:100%;height:100%;padding:2.5%;transition:top 0.5s ease-in-out;background-color:var(--instant-apps-landing-page-background-color);color:var(--instant-apps-landing-page-text-color)}:host .instant-apps-landing-page__title-text{color:var(--instant-apps-landing-page-text-color);font-size:var(--instant-apps-landing-page-title-text-font-size);margin:0}:host .instant-apps-landing-page__subtitle-text{font-weight:var(--calcite-font-weight-medium);font-size:var(--instant-apps-landing-page-subtitle-text-font-size);text-align:center}:host .instant-apps-landing-page__description-text{font-size:var(--instant-apps-landing-page-description-text-font-size);width:50%;min-width:250px}:host .instant-apps-landing-page__title-text,:host .instant-apps-landing-page__subtitle-text{text-shadow:0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1)}:host .instant-apps-landing-page__icon-image{margin-bottom:5px;max-width:50%}:host .instant-apps-landing-page__icon-image-scale--s{width:100px}:host .instant-apps-landing-page__icon-image-scale--m{width:250px}:host .instant-apps-landing-page__icon-image-scale--l{width:500px}:host .instant-apps-landing-page__button-container{display:flex}:host .instant-apps-landing-page__button-container .instant-apps-landing-page__entry-button{margin:var(--instant-apps-landing-page-entry-button-margin)}:host .instant-apps-landing-page__entry-button{--calcite-color-brand:var(--instant-apps-landing-page-entry-button-color);--calcite-color-brand-hover:var(--instant-apps-landing-page-entry-button-color);--calcite-color-brand-press:var(--instant-apps-landing-page-entry-button-color)}:host .instant-apps-landing-page instant-apps-sign-in{height:100%;width:100%;display:flex;align-items:center;justify-content:center}:host .instant-apps-landing-page__remove-transition{transition:none}:host .instant-apps-landing-page__remove-padding{padding:0}:host .instant-apps-landing-page--closed-no-transition{display:none}:host .instant-apps-landing-page--closed{top:-100%}:host .instant-apps-landing-page__alignment--top-center{justify-content:flex-start;align-items:center}:host .instant-apps-landing-page__alignment--top-center .instant-apps-landing-page__content-container{display:flex;flex-direction:column;align-items:center;justify-content:center}:host .instant-apps-landing-page__alignment--top-center .instant-apps-landing-page__description-text{text-align:center}:host .instant-apps-landing-page__alignment--center{justify-content:center;align-items:center}:host .instant-apps-landing-page__alignment--center .instant-apps-landing-page__content-container{display:flex;flex-direction:column;align-items:center}:host .instant-apps-landing-page__alignment--center .instant-apps-landing-page__description-text{text-align:center}:host .instant-apps-landing-page__alignment--bottom-center{justify-content:flex-end;align-items:center}:host .instant-apps-landing-page__alignment--bottom-center .instant-apps-landing-page__content-container{display:flex;flex-direction:column;align-items:center}:host .instant-apps-landing-page__alignment--bottom-center .instant-apps-landing-page__description-text{text-align:center}:host .instant-apps-landing-page__alignment--top-left{justify-content:flex-start;align-items:flex-start}:host .instant-apps-landing-page__alignment--top-left .instant-apps-landing-page__description-text{text-align:left}:host .instant-apps-landing-page__alignment--center-left{justify-content:center;align-items:flex-start}:host .instant-apps-landing-page__alignment--center-left .instant-apps-landing-page__description-text{text-align:left}:host .instant-apps-landing-page__alignment--bottom-left{justify-content:flex-end;align-items:flex-start}:host .instant-apps-landing-page__alignment--bottom-left .instant-apps-landing-page__description-text{text-align:left}:host .instant-apps-landing-page__alignment--top-right{justify-content:flex-start;align-items:flex-end}:host .instant-apps-landing-page__alignment--top-right .instant-apps-landing-page__content-container{display:flex;flex-direction:column;align-items:flex-end}:host .instant-apps-landing-page__alignment--top-right .instant-apps-landing-page__description-text{text-align:right}:host .instant-apps-landing-page__alignment--center-right{justify-content:center;align-items:flex-end}:host .instant-apps-landing-page__alignment--center-right .instant-apps-landing-page__content-container{display:flex;flex-direction:column;align-items:flex-end}:host .instant-apps-landing-page__alignment--center-right .instant-apps-landing-page__description-text{text-align:right}:host .instant-apps-landing-page__alignment--bottom-right{justify-content:flex-end;align-items:flex-end}:host .instant-apps-landing-page__alignment--bottom-right .instant-apps-landing-page__content-container{display:flex;flex-direction:column;align-items:flex-end}:host .instant-apps-landing-page__alignment--bottom-right .instant-apps-landing-page__description-text{text-align:right}.instant-apps-landing-page__sign-in{width:100%;height:100%}.instant-apps-landing-page__sign-in--overlay{background:rgba(0, 0, 0, 0.6)}@media only screen and (max-width: 768px){:host .instant-apps-landing-page__icon-image{max-width:70%;margin-bottom:20px}:host .instant-apps-landing-page__description-text{width:80%}:host .instant-apps-landing-page__title-text{font-size:var(--calcite-font-size-3)}:host .instant-apps-landing-page__subtitle-text{font-size:var(--calcite-font-size-0)}:host .instant-apps-landing-page__content-container{display:flex;flex-direction:column;align-items:center;margin-top:auto}:host .instant-apps-landing-page__button-container{display:flex;flex-direction:column;width:100%;margin-top:auto}:host .instant-apps-landing-page__button-container .instant-apps-landing-page__entry-button{width:100%;margin-right:unset;margin-bottom:10px}}@media only screen and (max-width: 896px) and (orientation: landscape){:host .instant-apps-landing-page__icon-image{max-width:25%}}";
 const InstantAppsLandingPageStyle0 = instantAppsLandingPageCss;
 
 const CSS = {
@@ -34,10 +40,13 @@ const CSS = {
     closedNoTransition: 'instant-apps-landing-page--closed-no-transition',
     iconImage: 'instant-apps-landing-page__icon-image',
     removeTransition: 'instant-apps-landing-page__remove-transition',
+    removePadding: 'instant-apps-landing-page__remove-padding',
     alignment: 'instant-apps-landing-page__alignment--',
     entryButton: 'instant-apps-landing-page__entry-button',
     contentContainer: 'instant-apps-landing-page__content-container',
     buttonContainer: 'instant-apps-landing-page__button-container',
+    signIn: 'instant-apps-landing-page__sign-in',
+    signInOverlay: 'instant-apps-landing-page__sign-in--overlay',
     iconImageScale: {
         s: ' instant-apps-landing-page__icon-image-scale--s',
         m: ' instant-apps-landing-page__icon-image-scale--m',
@@ -64,6 +73,9 @@ const InstantAppsLandingPage$1 = /*@__PURE__*/ proxyCustomElement(class InstantA
         this.open = true;
         this.entryButtonScale = 'l';
         this.fontFamily = 'var(--calcite-sans-family);';
+        this.enableSignIn = undefined;
+        this.portal = undefined;
+        this.oauthappid = undefined;
     }
     emitToggleEvent() {
         if (this.open) {
@@ -73,19 +85,34 @@ const InstantAppsLandingPage$1 = /*@__PURE__*/ proxyCustomElement(class InstantA
             this.landingPageClose.emit();
         }
     }
+    componentWillLoad() {
+        if (this.enableSignIn) {
+            const signInTime = localStorage.getItem('signing-in') ? new Date(Number(localStorage.getItem('signing-in'))) : null;
+            if (signInTime != null) {
+                const minuteLimit = 2;
+                if ((Date.now() - signInTime.getTime()) / (60 * 1000) < minuteLimit) {
+                    this.open = false;
+                }
+                localStorage.removeItem('signing-in');
+            }
+        }
+    }
     render() {
-        return h(Host, null, this.renderLandingPageContent());
+        const content = this.enableSignIn ? this.renderLandingPageSignIn() : this.renderLandingPageContent();
+        return h(Host, null, content);
     }
     renderLandingPageContent() {
         const closed = !this.open ? (this.disableTransition ? ` ${CSS.closedNoTransition}` : ` ${CSS.closed}`) : '';
         const alignmentClass = this.getAlignmentClass();
         const removeTransition = this.disableTransition ? ` ${CSS.removeTransition}` : '';
-        const fontFamily = getFontFamily(this.fontFamily);
-        const style = {
-            fontFamily,
-        };
-        return (h("div", { style: this.backgroundImageSrc
-                ? Object.assign(Object.assign({}, style), { backgroundSize: 'cover', backgroundImage: `url("${this.backgroundImageSrc}")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center' }) : style, class: `${CSS.BASE}${alignmentClass}${closed}${removeTransition}` }, h("div", { class: CSS.contentContainer }, this.renderIconImage(), this.renderTitleText(), this.renderSubtitleText(), this.renderDescriptionText()), h("div", { class: CSS.buttonContainer }, this.renderEntryButton(), h("slot", { name: "secondary-action" }))));
+        const style = this.getContentStyle();
+        return (h("div", { style: style, class: `${CSS.BASE}${alignmentClass}${closed}${removeTransition}` }, h("div", { class: CSS.contentContainer }, this.renderIconImage(), this.renderTitleText(), this.renderSubtitleText(), this.renderDescriptionText()), h("div", { class: CSS.buttonContainer }, this.renderEntryButton(), h("slot", { name: "secondary-action" }))));
+    }
+    renderLandingPageSignIn() {
+        const closed = !this.open ? (this.disableTransition ? ` ${CSS.closedNoTransition}` : ` ${CSS.closed}`) : '';
+        const style = this.getContentStyle();
+        const signInClass = this.backgroundImageSrc ? `${CSS.signIn} ${CSS.signInOverlay}` : CSS.signIn;
+        return (h("div", { style: style, class: `${CSS.BASE}${closed} ${CSS.removePadding}` }, h("div", { class: signInClass }, h("instant-apps-sign-in", { type: "landingPage", landingPage: true, portal: this.portal, oauthappid: this.oauthappid, titleText: this.titleText, subtitleText: this.subtitleText, descriptionText: this.descriptionText, closeLandingPage: this.closeLandingPage.bind(this) }))));
     }
     renderIconImage() {
         return this.iconImage ? h("img", { class: `${CSS.iconImage}${this.getIconImageScale()}`, src: this.iconImage, alt: this.iconImageAltText }) : null;
@@ -100,7 +127,10 @@ const InstantAppsLandingPage$1 = /*@__PURE__*/ proxyCustomElement(class InstantA
         return h("p", { class: CSS.descriptionText }, this.descriptionText);
     }
     renderEntryButton() {
-        return (h("calcite-button", { class: CSS.entryButton, onClick: () => (this.open = false), scale: this.entryButtonScale, appearance: "outline-fill" }, this.entryButtonText ? this.entryButtonText : 'Enter'));
+        return (h("calcite-button", { class: CSS.entryButton, onClick: this.closeLandingPage.bind(this), scale: this.entryButtonScale, appearance: "outline-fill" }, this.entryButtonText ? this.entryButtonText : 'Enter'));
+    }
+    closeLandingPage() {
+        this.open = false;
     }
     getAlignmentClass() {
         return ` ${CSS.alignment}${this.alignment}`;
@@ -110,6 +140,18 @@ const InstantAppsLandingPage$1 = /*@__PURE__*/ proxyCustomElement(class InstantA
         const { s, m, l } = CSS.iconImageScale;
         return iconImageScale === 'l' ? l : iconImageScale === 's' ? s : m;
     }
+    getContentStyle() {
+        const fontFamily = getFontFamily(this.fontFamily);
+        return this.backgroundImageSrc
+            ? {
+                fontFamily,
+                backgroundSize: 'cover',
+                backgroundImage: `url("${this.backgroundImageSrc}")`,
+                backgroundRepeat: 'no-repeat',
+                backgroundPosition: 'center',
+            }
+            : { fontFamily };
+    }
     get el() { return this; }
     static get watchers() { return {
         "open": ["emitToggleEvent"]
@@ -128,7 +170,10 @@ const InstantAppsLandingPage$1 = /*@__PURE__*/ proxyCustomElement(class InstantA
         "backgroundImageSrc": [1, "background-image-src"],
         "open": [1028],
         "entryButtonScale": [1, "entry-button-scale"],
-        "fontFamily": [513, "font-family"]
+        "fontFamily": [513, "font-family"],
+        "enableSignIn": [4, "enable-sign-in"],
+        "portal": [16],
+        "oauthappid": [1]
     }, undefined, {
         "open": ["emitToggleEvent"]
     }]);
@@ -136,24 +181,54 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["instant-apps-landing-page", "calcite-button", "calcite-icon", "calcite-loader"];
+    const components = ["instant-apps-landing-page", "calcite-avatar", "calcite-button", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-icon", "calcite-loader", "calcite-navigation-user", "instant-apps-sign-in"];
     components.forEach(tagName => { switch (tagName) {
         case "instant-apps-landing-page":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, InstantAppsLandingPage$1);
             }
             break;
+        case "calcite-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
         case "calcite-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$9();
+            }
+            break;
+        case "calcite-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "calcite-dropdown-group":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "calcite-dropdown-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
             }
             break;
         case "calcite-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$5();
             }
             break;
         case "calcite-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "calcite-navigation-user":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "instant-apps-sign-in":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/instant-apps-language-translator2.js

@@ -45,7 +45,9 @@ async function getPortalItemResource(portalItem) {
   if (!portalItem)
     return null;
   const [PortalItemResource] = await loadModules(['esri/portal/PortalItemResource']);
-  const existingResourcesRes = await portalItem.fetchResources();
+  const existingResourcesRes = await portalItem.fetchResources({
+    num: 100,
+  });
   const path = `t9n/${portalItem === null || portalItem === void 0 ? void 0 : portalItem.id}.json`;
   const resource = new PortalItemResource({ path, portalItem });
   const existingResourceArr = existingResourcesRes.resources.filter(resourceItem => resourceItem.resource.path === path);

package/dist/components/instant-apps-sign-in.js

@@ -0,0 +1,11 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { I as InstantAppsSignIn$1, d as defineCustomElement$1 } from './instant-apps-sign-in2.js';
+
+const InstantAppsSignIn = InstantAppsSignIn$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { InstantAppsSignIn, defineCustomElement };

package/dist/components/instant-apps-sign-in2.js

@@ -0,0 +1,243 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { l as loadModules } from './loadModules2.js';
+import { g as getMessages } from './locale3.js';
+import { d as defineCustomElement$8 } from './avatar.js';
+import { d as defineCustomElement$7 } from './button.js';
+import { d as defineCustomElement$6 } from './dropdown.js';
+import { d as defineCustomElement$5 } from './dropdown-group.js';
+import { d as defineCustomElement$4 } from './dropdown-item.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './loader.js';
+import { d as defineCustomElement$1 } from './navigation-user.js';
+
+const instantAppsSignInCss = ":host{display:block;box-shadow:none !important}:host .instant-apps-sign-in__container{height:inherit;display:flex;align-items:center}:host .instant-apps-sign-in__container calcite-dropdown,:host .instant-apps-sign-in__container calcite-navigation-user{height:100%}:host .instant-apps-sign-in__container .instant-apps-sign-in__sign-in-btn{margin:10px}:host .instant-apps-sign-in__container calcite-dropdown[scale=m] calcite-dropdown-group{min-width:140px}:host .instant-apps-sign-in__container calcite-dropdown[scale=s] calcite-dropdown-group{min-width:100px}:host .instant-apps-sign-in__container calcite-dropdown-item{--calcite-color-text-1:#d83020;--calcite-color-text-3:#d83020}:host .instant-apps-sign-in__container button{height:32px;width:32px;padding:0;box-sizing:border-box;display:flex;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;appearance:none;-moz-appearance:none;-webkit-appearance:none;-webkit-text-decoration-line:none;text-decoration-line:none;transition:color var(--calcite-animation-timing) ease-in-out, background-color var(--calcite-animation-timing) ease-in-out, box-shadow var(--calcite-animation-timing) ease-in-out, outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;border:none;border-radius:50%;background:#000}:host .instant-apps-sign-in__container button:hover calcite-avatar{opacity:0.7;transition:0.3s}:host .instant-apps-sign-in__landing-page{display:flex;flex-direction:column;justify-content:center;padding:40px;width:50%;min-height:30%;background:rgba(255, 255, 255, 0.8);color:#151515;text-align:center}:host .instant-apps-sign-in__landing-page h1{font-size:22px;margin:10px 0}:host .instant-apps-sign-in__landing-page h2{font-size:16px;margin:0 0 10px}:host .instant-apps-sign-in__landing-page p{font-size:16px;margin:0}:host .instant-apps-sign-in__landing-page-btns{display:flex;justify-content:space-between;margin-top:40px}:host .instant-apps-sign-in__landing-page-btns calcite-button{width:calc(50% - 5px);--calcite-color-brand:var(--instant-apps-landing-page-entry-button-color);--calcite-color-brand-hover:var(--instant-apps-landing-page-entry-button-color);--calcite-color-brand-press:var(--instant-apps-landing-page-entry-button-color)}:host .instant-apps-sign-in__landing-page-btns calcite-button:hover{filter:contrast(0.8)}@media screen and (max-width: 767px){:host .instant-apps-sign-in__landing-page-btns{flex-direction:column;width:100%;align-items:center;height:76px}:host .instant-apps-sign-in__landing-page-btns calcite-button{width:100%}}";
+const InstantAppsSignInStyle0 = instantAppsSignInCss;
+
+const CSS = {
+    base: 'instant-apps-sign-in__container',
+    landing: 'instant-apps-sign-in__landing-page',
+    landingBtn: 'instant-apps-sign-in__landing-page-btns',
+    SignInBtn: 'instant-apps-sign-in__sign-in-btn',
+};
+const InstantAppsSignIn = /*@__PURE__*/ proxyCustomElement(class InstantAppsSignIn extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.type = 'navigation';
+        this.portal = undefined;
+        this.oauthappid = undefined;
+        this.openInPopup = undefined;
+        this.landingPage = undefined;
+        this.isSignedIn = undefined;
+        this.user = undefined;
+        this.titleText = undefined;
+        this.subtitleText = undefined;
+        this.descriptionText = undefined;
+        this.closeLandingPage = undefined;
+        this.ready = false;
+        this.messages = undefined;
+    }
+    async watchPortal() {
+        await this.initSignIn();
+    }
+    async watchOauthappid() {
+        await this.initSignIn();
+    }
+    async componentWillLoad() {
+        getMessages(this);
+        await this.initSignIn();
+    }
+    render() {
+        const signIn = this.ready ? this.renderContent() : null;
+        return h(Host, null, signIn);
+    }
+    renderContent() {
+        return this.type === 'landingPage' ? this.renderLandingPageSignIn() : this.renderSignInContainer();
+    }
+    renderSignInContainer() {
+        return h("div", { class: CSS.base }, this.isSignedIn ? this.renderSignInDropdown() : this.renderSignInButton());
+    }
+    renderSignInDropdown() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const dropdownScale = this.type === 'navigation' ? 'm' : 's';
+        return (h("calcite-dropdown", { placement: "bottom-end", scale: dropdownScale }, this.type === 'navigation' ? (h("calcite-navigation-user", { slot: "trigger", thumbnail: (_a = this.user) === null || _a === void 0 ? void 0 : _a.thumbnailUrl, "full-name": (_b = this.user) === null || _b === void 0 ? void 0 : _b.fullName, username: (_c = this.user) === null || _c === void 0 ? void 0 : _c.username, textDisabled: true })) : (h("button", { slot: "trigger" }, h("calcite-avatar", { thumbnail: (_d = this.user) === null || _d === void 0 ? void 0 : _d.thumbnailUrl, "full-name": (_e = this.user) === null || _e === void 0 ? void 0 : _e.fullName, username: (_f = this.user) === null || _f === void 0 ? void 0 : _f.username }))), h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { onClick: this.signOut.bind(this) }, (_g = this.messages) === null || _g === void 0 ? void 0 : _g.signOut))));
+    }
+    renderSignInButton() {
+        var _a;
+        const appearance = this.type === 'navigation' ? 'transparent' : 'brand';
+        const className = this.type === 'navigation' ? CSS.SignInBtn : '';
+        return (h("calcite-button", { class: className, onClick: this.signIn.bind(this), scale: "s", "icon-start": "sign-in", appearance: appearance }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.signIn));
+    }
+    renderLandingPageSignIn() {
+        var _a, _b;
+        return (h("div", { class: CSS.landing }, h("h1", null, this.titleText), h("h2", null, this.subtitleText), h("p", null, this.descriptionText), h("div", { class: CSS.landingBtn }, h("calcite-button", { onClick: this.landingPageSignIn.bind(this) }, (_a = this.messages) === null || _a === void 0 ? void 0 : _a.signIn), h("calcite-button", { onClick: this.guestOnClick.bind(this), appearance: "outline" }, (_b = this.messages) === null || _b === void 0 ? void 0 : _b.continueAsGuest))));
+    }
+    async initSignIn() {
+        if (this.portal == null || this.oauthappid == null)
+            return;
+        const [OAuthInfo, esriId, reactiveUtils] = await loadModules(['esri/identity/OAuthInfo', 'esri/identity/IdentityManager', 'esri/core/reactiveUtils']);
+        this.idManager = esriId;
+        this.info = new OAuthInfo({
+            appId: this.oauthappid,
+            portalUrl: this.portal.url,
+            flowType: 'authorization-code',
+            popup: this.openInPopup,
+        });
+        this.idManager.registerOAuthInfos([this.info]);
+        this.isSignedIn = await this.checkSignInStatus();
+        this.ready = true;
+        this.watchCredential();
+        reactiveUtils
+            .whenOnce(() => this.portal.user)
+            .then(() => {
+            this.user = this.portal.user;
+            this.ready = true;
+        });
+    }
+    signIn() {
+        if (this.landingPage) {
+            this.setSignInLocalStorage();
+        }
+        this.idManager
+            .getCredential(this.info.portalUrl + '/sharing', {
+            oAuthPopupConfirmation: false,
+        })
+            .then(async () => {
+            await this.checkSignInStatus();
+        });
+    }
+    signOut() {
+        this.idManager.destroyCredentials();
+        this.portal.authMode = 'anonymous';
+        localStorage.removeItem('_AGO_SESSION_');
+        this.isSignedIn = false;
+        this.portal.credential = null;
+    }
+    landingPageSignIn() {
+        if (!this.isSignedIn) {
+            this.setSignInLocalStorage();
+            this.signIn();
+        }
+        else if (this.closeLandingPage != null) {
+            this.closeLandingPage();
+        }
+    }
+    guestOnClick() {
+        this.signOut();
+        if (this.closeLandingPage != null) {
+            this.closeLandingPage();
+        }
+    }
+    checkSignInStatus() {
+        return new Promise(resolve => {
+            this.idManager
+                .checkSignInStatus(this.info.portalUrl + '/sharing')
+                .then(async (credential) => {
+                this.portal.credential = credential;
+                resolve(true);
+            })
+                .catch(() => {
+                this.portal.credential = null;
+                resolve(false);
+            });
+        });
+    }
+    watchCredential() {
+        this.portal.addHandles(this.portal.watch('credential', credential => {
+            this.isSignedIn = credential != null;
+        }));
+    }
+    setSignInLocalStorage() {
+        const date = new Date();
+        localStorage.setItem('signing-in', date.getTime().toString());
+        // remove from local storage if page doens't immediately redirect to sign in
+        setTimeout(() => {
+            localStorage.removeItem('signing-in');
+        }, 2000);
+    }
+    get el() { return this; }
+    static get watchers() { return {
+        "portal": ["watchPortal"],
+        "oauthappid": ["watchOauthappid"]
+    }; }
+    static get style() { return InstantAppsSignInStyle0; }
+}, [1, "instant-apps-sign-in", {
+        "type": [1],
+        "portal": [16],
+        "oauthappid": [1],
+        "openInPopup": [4, "open-in-popup"],
+        "landingPage": [4, "landing-page"],
+        "titleText": [1, "title-text"],
+        "subtitleText": [1, "subtitle-text"],
+        "descriptionText": [1, "description-text"],
+        "closeLandingPage": [16],
+        "isSignedIn": [32],
+        "user": [32],
+        "ready": [32],
+        "messages": [32]
+    }, undefined, {
+        "portal": ["watchPortal"],
+        "oauthappid": ["watchOauthappid"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["instant-apps-sign-in", "calcite-avatar", "calcite-button", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-icon", "calcite-loader", "calcite-navigation-user"];
+    components.forEach(tagName => { switch (tagName) {
+        case "instant-apps-sign-in":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, InstantAppsSignIn);
+            }
+            break;
+        case "calcite-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "calcite-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "calcite-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "calcite-dropdown-group":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "calcite-dropdown-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "calcite-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "calcite-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "calcite-navigation-user":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { InstantAppsSignIn as I, defineCustomElement as d };