@esri/solutions-components 0.10.35 → 0.10.37

package/dist/cjs/{index.es-a242cb45.js → index.es-8336efed.js}

@@ -6,14 +6,14 @@
 'use strict';
 
 const _commonjsHelpers = require('./_commonjsHelpers-baf43783.js');
-const downloadUtils = require('./downloadUtils-20637f89.js');
+const downloadUtils = require('./downloadUtils-76bc7e30.js');
 require('./index-4b68e4b4.js');
 require('./locale-339b55f0.js');
 require('./esri-loader-08dc41bd.js');
 require('./mapViewUtils-18c46b84.js');
 require('./interfaces-09c4c40e.js');
-require('./solution-resource-40e70253.js');
 require('./index-f052f656.js');
+require('./solution-resource-40e70253.js');
 require('./restHelpersGet-5c2245a3.js');
 
 var check = function (it) {

package/dist/cjs/instant-apps-app-guide.cjs.entry.js

@@ -17,16 +17,19 @@ require('./languageUtil-a3e1eafd.js');
 class AppGuideViewModel {
     constructor() {
         this.pages = [];
+        this.headerText = '';
+        this.pages = [];
     }
-    addPage(page) {
-        this.pages = [...this.pages, page];
+    setPages(pages) {
+        this.pages = pages;
+        this.setDefaultHeaderText();
     }
-    removePage(page) {
-        this.pages = this.pages.filter(p => p !== page);
+    setDefaultHeaderText() {
+        this.headerText = !!this.pages.length ? this.pages[0].title : '';
     }
 }
 
-const instantAppsAppGuideCss = ":host{--instant-apps-app-guide-width:300px;--instant-apps-app-guide-height:400px;--instant-apps-app-guide-list-item-bubble-size:22px;width:var(--instant-apps-app-guide-width);height:var(--instant-apps-app-guide-height);display:block}:host calcite-panel{max-width:var(--instant-apps-app-guide-width);max-height:var(--instant-apps-app-guide-height);display:flex}:host calcite-carousel{flex:1;overflow:scroll;height:-moz-fit-content;height:fit-content;background-color:var(--calcite-color-foreground-1)}:host [slot=header-content]{display:flex;gap:var(--calcite-spacing-sm);padding-inline-start:0.25rem}:host .content-heading{font-weight:var(--calcite-font-weight-bold);display:flex;gap:var(--calcite-spacing-sm);line-height:var(--calcite-font-line-height-fixed-lg)}:host calcite-carousel-item{flex-grow:1;display:flex;flex-direction:column}:host .instant-apps-app-guide__content-wrapper{padding-block-start:0.5rem;padding-inline:0.5rem;flex-shrink:1;flex-grow:0}:host calcite-icon{--calcite-ui-icon-color:var(--calcite-color-brand)}:host .instant-apps-app-guide__content-list{counter-set:item-counter;margin-inline:0;padding-inline-start:var(--calcite-spacing-xxxl);padding-inline-end:var(--calcite-spacing-lg);position:relative}:host .instant-apps-app-guide__content-list .instant-apps-app-guide__content-list--item{counter-increment:item-counter;margin-block-start:var(--calcite-spacing-lg);display:flex;align-items:flex-start}:host .instant-apps-app-guide__content-list .instant-apps-app-guide__content-list--item::before{content:counter(item-counter);background-color:var(--calcite-color-text-2);color:var(--calcite-color-text-inverse);line-height:var(--calcite-font-line-height-fixed-xl);width:var(--instant-apps-app-guide-list-item-bubble-size);left:0;border-radius:var(--calcite-corner-radius-pill);display:flex;justify-content:center;font-size:var(--calcite-font-size-sm);position:absolute;max-height:var(--instant-apps-app-guide-list-item-bubble-size)}:host .instant-apps-app-guide__content-list .instant-apps-app-guide__content-list--item::marker{color:var(--calcite-color-transparent)}";
+const instantAppsAppGuideCss = ":host{--instant-apps-app-guide-width:300px;--instant-apps-app-guide-height:400px;--instant-apps-app-guide-list-item-bubble-size:22px;width:var(--instant-apps-app-guide-width);height:var(--instant-apps-app-guide-height);display:block}:host calcite-panel{max-width:var(--instant-apps-app-guide-width);max-height:var(--instant-apps-app-guide-height);display:flex}:host calcite-carousel{flex:1;overflow:scroll;height:-moz-fit-content;height:fit-content;background-color:var(--calcite-color-foreground-1)}:host [slot=header-content]{display:flex;gap:var(--calcite-spacing-sm);padding-inline-start:0.25rem;font-weight:var(--calcite-font-weight-bold)}:host calcite-carousel-item{flex-grow:1;display:flex;flex-direction:column}:host .instant-apps-app-guide__content-wrapper{padding-block-start:0.5rem;padding-inline:0.5rem;flex-shrink:1;flex-grow:0}:host calcite-icon{--calcite-ui-icon-color:var(--calcite-color-brand)}:host .instant-apps-app-guide__content-list{counter-set:item-counter;margin-inline:0;padding-inline-start:var(--calcite-spacing-xxxl);padding-inline-end:var(--calcite-spacing-lg);position:relative}:host .instant-apps-app-guide__content-list .instant-apps-app-guide__content-list--item{counter-increment:item-counter;margin-block-start:var(--calcite-spacing-lg);display:flex;align-items:flex-start}:host .instant-apps-app-guide__content-list .instant-apps-app-guide__content-list--item::before{content:counter(item-counter);background-color:var(--calcite-color-text-2);color:var(--calcite-color-text-inverse);line-height:var(--calcite-font-line-height-fixed-xl);width:var(--instant-apps-app-guide-list-item-bubble-size);left:0;border-radius:var(--calcite-corner-radius-pill);display:flex;justify-content:center;font-size:var(--calcite-font-size-sm);position:absolute;max-height:var(--instant-apps-app-guide-list-item-bubble-size)}:host .instant-apps-app-guide__content-list .instant-apps-app-guide__content-list--item::marker{color:var(--calcite-color-transparent)}";
 const InstantAppsAppGuideStyle0 = instantAppsAppGuideCss;
 
 const CSS = {
@@ -37,6 +40,9 @@ const CSS = {
 const InstantAppsAppGuide = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Private Variables
+         */
         this._viewModel = new AppGuideViewModel();
         this.header = true;
         this.data = undefined;
@@ -44,19 +50,25 @@ const InstantAppsAppGuide = class {
         this.headerText = undefined;
     }
     watchPropHandler(newValue) {
-        this._viewModel.pages = newValue;
-        this._updateHeaderText();
+        this._setContent(newValue);
+    }
+    watchStateHandler(newValue) {
+        this._viewModel.headerText = newValue;
     }
-    connectedCallback() {
-        var _a, _b, _c, _d;
-        this._viewModel.pages = (this === null || this === void 0 ? void 0 : this.data) || [];
-        this.headerText = (_c = (_b = (_a = this === null || this === void 0 ? void 0 : this.data) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : (_d = this === null || this === void 0 ? void 0 : this.messages) === null || _d === void 0 ? void 0 : _d.headerText;
+    componentWillLoad() {
+        this._setContent(this === null || this === void 0 ? void 0 : this.data);
     }
     componentDidLoad() {
         locale.getMessages(this);
     }
     render() {
-        return (index.h(index.Host, { key: '3c6bf465e2543e62f8e991a22a4f8b8420556285' }, index.h("calcite-panel", { key: '15a145d4f930de4325716dcd8b73fdcbbe5fa31e', scale: "s" }, this._renderAppGuideHeader(), index.h("calcite-carousel", { key: '8f962b828f76b8a68f19b71fb79d3f4c93420e38', onCalciteCarouselChange: () => this._updateHeaderText(), ref: el => this._carouselRef = el, "arrow-type": this._getArrowType() }, this._renderAppGuidePages(this._viewModel.pages)))));
+        const pages = this._renderAppGuidePages(this._viewModel.pages);
+        const header = this._renderAppGuideHeader();
+        return (index.h(index.Host, { key: 'a6969274bbb9e917869c4c09910ef04b2d40c49a' }, index.h("calcite-panel", { key: 'f203f430978eed0db5aa0058ae53bd811ba0fdfe', scale: "s" }, header, index.h("calcite-carousel", { key: 'afd572b169f27b03616e568b9146cb2e52f04cae', onCalciteCarouselChange: () => this._updateHeaderText(), ref: el => this._carouselRef = el, "arrow-type": this._getArrowType() }, pages))));
+    }
+    _setContent(content) {
+        this._viewModel.setPages(content);
+        this.headerText = this._viewModel.headerText;
     }
     _updateHeaderText() {
         var _a;
@@ -98,7 +110,8 @@ const InstantAppsAppGuide = class {
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "data": ["watchPropHandler"]
+        "data": ["watchPropHandler"],
+        "headerText": ["watchStateHandler"]
     }; }
 };
 InstantAppsAppGuide.style = InstantAppsAppGuideStyle0;