@esri/solutions-components 1.2.0-next.56 → 1.2.0-next.58

package/dist/components/solution-details-panel/customElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/solution-details-panel/solution-details-panel.tsx"],"sourcesContent":["/**\r\n * @license\r\n * Copyright 2025 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the 'License');\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n *    http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an 'AS IS' BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\nimport type T9nStrings from './assets/t9n/messages.en.json';\r\nimport { useT9n } from '../../controllers/useT9n';\r\nimport { createRef } from 'lit-html/directives/ref.js';\r\nimport {\r\n  createEvent,\r\n  Fragment,\r\n  LitElement,\r\n  h,\r\n  property,\r\n  state,\r\n} from '@arcgis/lumina';\r\nimport {\r\n  useContextConsumer,\r\n} from '@arcgis/lumina/context';\r\nimport {\r\n  configContext,\r\n} from '../../utils/deployAppContexts';\r\nimport type {\r\n  JsxNode,\r\n} from '@arcgis/lumina';\r\nimport { styles } from './solution-details-panel.css';\r\nimport {\r\n  getItemDataAsJson,\r\n  getItem,\r\n  getProp,\r\n  getPropWithDefault,\r\n  sanitizeHTML,\r\n  setCreateProp\r\n} from '@esri/solution-common';\r\nimport type {\r\n  IItem,\r\n  IItemTemplate,\r\n  ISolutionItemData,\r\n  IStringValuePair,\r\n} from '@esri/solution-common';\r\nimport { getRequiredSolutionPrivileges } from '../../utils/privilegeUtils'\r\nimport {\r\n  TELEMETRY_CATEGORY,\r\n  type DeployAppTab,\r\n  type IDeployProgressUpdate,\r\n  type IItemPreview,\r\n  type IItemProperties,\r\n  type IPrivilegeMessages,\r\n  type ISolutionInfoCard,\r\n  type IUserOption,\r\n  type IUserProp,\r\n} from '../../utils/interfaces';\r\nimport {\r\n  _findExistingItem\r\n} from '@esri/solution-deployer';\r\nimport {\r\n  getItemResourceUrl,\r\n  getItemUrl,\r\n} from '../../utils/common';\r\nimport {\r\n  getPrivilegeMessages\r\n} from '../../utils/privilegeUtils';\r\nimport {\r\n  SolutionDeployDialog\r\n} from '../solution-deploy-dialog/solution-deploy-dialog';\r\nimport {\r\n  SolutionSnapshotGallery\r\n} from '../solution-snapshot-gallery/solution-snapshot-gallery';\r\nimport {\r\n  SolutionDeployingDialog\r\n} from '../solution-deploying-dialog/solution-deploying-dialog';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'solution-details-panel': SolutionDetailsPanel;\r\n  }\r\n}\r\n\r\n// TODO this should be removed after initial dev cycle\r\n// https://devtopia.esri.com/WebGIS/solution-deployment-apps/issues/409\r\n\r\nexport class SolutionDetailsPanel extends LitElement {\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Overrides (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  static override styles = styles;\r\n\r\n  constructor() {\r\n    super();\r\n    this.listenOn<CustomEvent>(window, 'detailsCardSelected', this._detailsCardSelected);\r\n    this.listenOn<CustomEvent>(window, 'allCardsFetched', this._allCardsFetched);\r\n    this.listenOn(window, 'deployAppTabSelected', this._handleDeployAppTabSelected);\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Key details about the solution */\r\n  @property() card: ISolutionInfoCard | undefined;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  State (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** When true the 'Screenshots' show more button should be hidden. */\r\n  @state() _showScreenshotsShowMore = false;\r\n\r\n  /** When true the 'You may also like' show more button should be hidden. */\r\n  @state() _showYouMayAlsoLikeShowMore = false;\r\n\r\n  /** When true the screenshots row is expanded. */\r\n  @state() _isScreenshotsRowExpanded = false;\r\n\r\n  /** When true the 'You may also like' row is expanded. */\r\n  @state() _isYouMayAlsoLikeRowExpanded = false;\r\n\r\n  /** Key item properties */\r\n  @state() _itemProperties: IItemProperties | undefined;\r\n\r\n  /**\r\n   * Messages that will be displayed if the user is missing any privileges or\r\n   * licenses required to deploy the current solution.\r\n   */\r\n  @state() _missingPrivilegeMessages: IPrivilegeMessages | undefined;\r\n\r\n  /**\r\n   * The base height for the 'Screenshots' expandable subsection\r\n   * The height of cards displayed here is dependant upon the cards description.\r\n  */\r\n  @state() _screenshotsRowBaseHeight = 340;\r\n\r\n  /** The full list of templates for the current solution. */\r\n  @state() _templates: IItemTemplate[] = [];\r\n\r\n  /**\r\n   * Contains the translations for this component.\r\n   * All UI strings should be defined here.\r\n   */\r\n  @state() _translations = useT9n<typeof T9nStrings>({ name: 'solution-details-panel', blocking: true });\r\n\r\n  /**\r\n   * The base height for the 'You may also like' scrollable subsection\r\n   * The height of cards displayed here is dependant upon the cards description.\r\n  */\r\n  @state() _youMayAlsoLikeBaseHeight = 340;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** All cards for the current group defined in the appConfig */\r\n  private _allCards: ISolutionInfoCard[] = [];\r\n\r\n  /** Key details such as portalUrl, locale, user session, authentication, etc from the current config */\r\n  private _configContextConsumer = useContextConsumer({\r\n    context: configContext,\r\n    subscribe: true,\r\n  });\r\n\r\n  /** Easy access to telemetry session */\r\n  private get _telemetry() {\r\n    return this._configContextConsumer.value?.telemetrySession;\r\n  }\r\n\r\n  // TODO evaluate if this pattern is even used anymore\r\n  /** Configured learn more link */\r\n  private _configureLearnMore = '';\r\n\r\n  /** Enterprise ID Mapping for deployment */\r\n  private _customDeploymentMappings: IStringValuePair = {};\r\n\r\n  /** Reference element for the deploy dialog */\r\n  private _deployDialogRef = createRef<SolutionDeployDialog>();\r\n\r\n  /** Reference element for the deploy dialog */\r\n  private _deployingDialogRef = createRef<SolutionDeployingDialog>();\r\n\r\n  /** The overview row accordion */\r\n  private _overviewAccordionItemElement = createRef<HTMLCalciteAccordionItemElement>();\r\n\r\n  /** Reference element for the privilege popover */\r\n  private _privilegePopoverRef = createRef<HTMLCalcitePopoverElement>();\r\n\r\n  /** Required privileges for solution deployment. */\r\n  private _privileges: string[] = [];\r\n\r\n  /** RegEx pattern for evaluation of feature service url */\r\n  private _regexFsUrl: string = 'https?:\\\\/\\\\/.+FeatureServer\\\\b';\r\n\r\n  /** RegEx pattern for evaluation of item id */\r\n  private _regexID: string = '\\\\b[0-9A-F]{32}\\\\b';\r\n\r\n  /** The release notes row accordion */\r\n  private _releaseNotesAccordionItemElement = createRef<HTMLCalciteAccordionItemElement>();\r\n\r\n  /** The related resources row accordion */\r\n  private _relatedResourcesAccordionItemElement = createRef<HTMLCalciteAccordionItemElement>();\r\n\r\n  /** The resize observer used to help show/hide the 'Show more' buttons */\r\n  private _resizeObserver?: ResizeObserver;\r\n\r\n  /** The screenshots row accordion */\r\n  private _screenshotsAccordionItemElement = createRef<HTMLCalciteAccordionItemElement>();\r\n\r\n  /** Reference element for the screenshots dialog */\r\n  private _screenshotsDialogRef = createRef<SolutionSnapshotGallery>();\r\n\r\n  /** Scrollable subsection element that shows the solutions screenshots */\r\n  private _screenshotsElement = createRef<HTMLDivElement>();\r\n\r\n  /** The terms of use row accordion */\r\n  private _termsOfUseAccordionItemElement = createRef<HTMLCalciteAccordionItemElement>();\r\n\r\n  /** Key props for the user. */\r\n  private _userOptions: IUserOption[] = [];\r\n\r\n  /** The current users privileges */\r\n  private _userPrivileges: any;\r\n\r\n  /** The you may also like row accordion */\r\n  private _youMayAlsoLikeAccordionItemElement = createRef<HTMLCalciteAccordionItemElement>();\r\n\r\n  /** Scrollable subsection element that shows the you may also like cards */\r\n  private _youMayAlsoLikeElement = createRef<HTMLDivElement>();\r\n\r\n  /** Stored signInParam value from auth context */\r\n  private _signInParamValue: string | null = null;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Watch handlers\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Methods (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Emitted on demand when the templates have been fetched from the solution */\r\n  templatesFetched = createEvent<IItemTemplate[]>();\r\n\r\n  /** Emitted on demand when the item properties have been fetched */\r\n  itemPropertiesFetched = createEvent<IItemProperties>();\r\n\r\n  /** Emitted on demand when the sort type changes */\r\n  sortTypeChanged = createEvent<string>();\r\n\r\n  /** Emitted on demand when the auth token is updated */\r\n  tokenRefreshed = createEvent<string>();\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (lifecycle)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Invoked each time your component is added to the document's DOM. */\r\n  override async connectedCallback(): Promise<void> {\r\n    this.listenOn(window, 'calciteTabChange', this._cleanupPanel);\r\n    this.listenOn(window, 'detailsCardSelected', this._cleanupPanel);\r\n  }\r\n\r\n  /** Called once after the first updated() completes. */\r\n  loaded(): void {\r\n    // Capture signInParam from auth context if we haven't already\r\n    if (this._signInParamValue === null && this._configContextConsumer.value?.authentication?.SignInParam) {\r\n      this._signInParamValue = this._configContextConsumer.value!.authentication.SignInParam;\r\n    }\r\n\r\n    this._resizeObserver = new ResizeObserver(async () => {\r\n      this._onResize();\r\n    });\r\n    if (this._screenshotsElement.value) {\r\n      this._resizeObserver.observe(this._screenshotsElement.value);\r\n    }\r\n  }\r\n\r\n  /** Invoked when the component is removed from the document's DOM. */\r\n  override disconnectedCallback(): void {\r\n    this._resizeObserver?.disconnect();\r\n  }\r\n\r\n  /** Renders the component. */\r\n  override render(): JsxNode {\r\n    // TODO conditional rows should be handled here so we don't have trailing bottom borders\r\n    const rowClass = 'padding-bottom-1-5';\r\n    const relatedResources = this._getRelatedResources();\r\n    const youMayAlsoLikeCards = this._getYouMayAlsoLikeCards();\r\n    return (\r\n      <calcite-shell class='position-relative background-color-2'>\r\n        <calcite-panel\r\n          class='panel-background-2 border-none'\r\n          slot='panel-bottom'\r\n        >\r\n          <div\r\n            class='margin-top-875 padding-1-5 back-color-override-1 margin-bottom-1-5'\r\n            id='solution-details-row'\r\n          >\r\n            {this._getSolutionRow()}\r\n          </div>\r\n          <div class={rowClass}>\r\n            {this._getScreenshotsRow()}\r\n          </div>\r\n          <div class={rowClass}>\r\n            {this._getOverviewRow()}\r\n          </div>\r\n          <div class={rowClass}>\r\n            {this._getReleaseNotesRow()}\r\n          </div>\r\n          {\r\n            relatedResources.length > 0 ? (\r\n              <div class={rowClass}>\r\n                {this._getRelatedResourcesRow(relatedResources)}\r\n              </div>\r\n            ) : (<></>)\r\n          }\r\n          {\r\n            youMayAlsoLikeCards.length > 0 ? (\r\n              <div class={rowClass}>\r\n                {this._getYouMayAlsoLikeRow(youMayAlsoLikeCards)}\r\n              </div>\r\n            ) : (<></>)\r\n          }\r\n          <div class={rowClass}>\r\n            {this._getTermsOfUseRow()}\r\n          </div>\r\n          <solution-deploy-dialog\r\n            card={this.card}\r\n            ondeployFailed={this._closeDialogs}\r\n            ondeployProgressEnd={this._closeDialogs}\r\n            ondeployProgressStart={this._deployProgressStart}\r\n            ondeployProgressUpdated={this._deployProgessUpdated}\r\n            id='solutionDeployDialog'\r\n            ref={this._deployDialogRef}\r\n            userOptions={this._userOptions}\r\n          />\r\n          <solution-snapshot-gallery\r\n            card={this.card}\r\n            id='solutionSnapshotGallery'\r\n            itemProperties={this._itemProperties}\r\n            ref={this._screenshotsDialogRef}\r\n          />\r\n          <solution-deploying-dialog\r\n            card={this.card}\r\n            ref={this._deployingDialogRef}\r\n          />\r\n        </calcite-panel>\r\n      </calcite-shell>\r\n    );\r\n  }\r\n\r\n  /** Called after the update is completed and the DOM is updated. */\r\n  override updated() {\r\n    // you may also like base height is dependant upon the length of the text in the card\r\n    // in some cases the scroll height was not yet avalible here in updated without a delay\r\n    setTimeout(() => {\r\n      const youMayAlsoLikeCards = this._getYouMayAlsoLikeCards();\r\n      let height = 340;\r\n      for (let i = 0; i < youMayAlsoLikeCards.length; i++) {\r\n        const cNode = this.el.shadowRoot?.getElementById(`you-may-also-like-${i}`)\r\n        const cNodeHeight = cNode?.offsetHeight ? cNode.offsetHeight + 40 : 0;\r\n        if (cNodeHeight > height) {\r\n          height = cNodeHeight;\r\n        }\r\n      }\r\n\r\n      this._youMayAlsoLikeBaseHeight = height;\r\n      this._showYouMayAlsoLikeShowMore = (this._youMayAlsoLikeElement.value?.scrollHeight || 0) > this._youMayAlsoLikeBaseHeight;\r\n    }, 100);\r\n  }\r\n\r\n  /** Check URL parameters to automatically open deploy dialog when appropriate */\r\n  private _checkUrlParametersForAutoDeployment(): void {\r\n    // Use the stored signInParam value captured during loaded()\r\n    const signInParam = this._signInParamValue;\r\n\r\n    // Only process if we have signInParam=deploy\r\n    if (signInParam === 'deploy') {\r\n      // Check if user has missing privileges that would prevent deployment\r\n      const hasMissingPrivileges = this._missingPrivilegeMessages &&\r\n        (this._missingPrivilegeMessages.leadingMessages.length > 0 ||\r\n          this._missingPrivilegeMessages.bulletedMessages.length > 0 ||\r\n          this._missingPrivilegeMessages.trailingMessages.length > 0);\r\n\r\n      // Check if we have everything needed (signed in AND card available AND no missing privileges)\r\n      if (this._configContextConsumer.value?.authentication?.IsSignedIn && this.card && this._deployDialogRef.value && !hasMissingPrivileges) {\r\n        // Clear the stored value to prevent repeated auto deploy dialog\r\n        this._signInParamValue = null;\r\n\r\n        // Auto-open the deploy dialog\r\n        this._openDeploy();\r\n      }\r\n    }\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** The row that will show the current solution and actions associated with it. */\r\n  private _getSolutionRow(): JsxNode {\r\n    const thumbnailUrl = this.card?.thumbnailUrl.replace(/w=\\d+/, 'w=400');\r\n    const leadingMessages = this._missingPrivilegeMessages?.leadingMessages || [];\r\n    const hasLeading = leadingMessages.length > 0;\r\n    const bulletedMessages = this._missingPrivilegeMessages?.bulletedMessages || [];\r\n    const hasBulleted = bulletedMessages.length > 0;\r\n    const trailingMessages = this._missingPrivilegeMessages?.trailingMessages || [];\r\n    const hasTrailing = trailingMessages.length > 0;\r\n    return (\r\n      <div class='display-flex flex-direction-row'>\r\n        <div class='padding-end-1-75 image-width'>\r\n          <img\r\n            alt={this.card?.title}\r\n            src={thumbnailUrl}\r\n          />\r\n        </div>\r\n        <div class='display-flex flex-direction-row'>\r\n          {\r\n            this._getTextSection(\r\n              hasLeading,\r\n              hasBulleted,\r\n              hasTrailing,\r\n              leadingMessages,\r\n              bulletedMessages,\r\n              trailingMessages\r\n            )\r\n          }\r\n\r\n          {this._getButtons(\r\n            hasLeading || hasBulleted || hasTrailing,\r\n            this._configContextConsumer.value?.authentication?.IsEnterprisePortal\r\n          )\r\n          }\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /** Get the text information for the current solution */\r\n  private _getTextSection(\r\n    hasLeading: boolean,\r\n    hasBulleted: boolean,\r\n    hasTrailing: boolean,\r\n    leadingMessages: string[],\r\n    bulletedMessages: string[],\r\n    trailingMessages: string[]\r\n  ): JsxNode {\r\n    return (\r\n      <div class='display-flex flex-direction-column padding-end-1'>\r\n        <div class='display-flex flex-direction-row align-items-baseline'>\r\n          <h1 class='padding-top-xs title-font margin-top-0 margin-bottom-1-5 line-height-1'>\r\n            {this.card?.title}\r\n          </h1>\r\n          {this.card?.categories?.some((c) => c.includes('New Release')) && (\r\n            <calcite-chip\r\n              class='margin-bottom-1-5 margin-sides-0-5'\r\n              kind='brand'\r\n              label={this._translations.new}\r\n              scale='m'\r\n              icon='mega-phone'\r\n            >\r\n              {this._translations.new}\r\n            </calcite-chip>\r\n          )}\r\n        </div>\r\n        <calcite-label scale='l' class='font-1 padding-end-1'>\r\n          {this.card?.snippet}\r\n        </calcite-label>\r\n        {\r\n          hasLeading || hasBulleted || hasTrailing ? (\r\n            <div class='display-flex flex-direction-row padding-top-1'>\r\n              {\r\n                this._getMissingPrivilegesNotice(\r\n                  leadingMessages,\r\n                  bulletedMessages,\r\n                  trailingMessages\r\n                )\r\n              }\r\n            </div>\r\n          ) : (<></>)\r\n        }\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /** Get the buttons for this solution */\r\n  private _getButtons(\r\n    disabled: boolean,\r\n    isEnterprisePortal: boolean | undefined\r\n  ): JsxNode {\r\n    const demoUrl = this._itemProperties?.demoURL || '';\r\n    const demoClass = demoUrl ? '' : 'display-none';\r\n    return (\r\n      <div class='display-flex flex-direction-column button-width'>\r\n        <calcite-button\r\n          class='padding-bottom-1'\r\n          disabled={disabled}\r\n          icon-end='arrow-bold-right'\r\n          icon-flip-rtl='end'\r\n          onClick={() => this._openDeploy()}\r\n          scale='l'\r\n        >\r\n          {this._translations.deploy}\r\n        </calcite-button>\r\n        <calcite-button\r\n          appearance='outline-fill'\r\n          kind='neutral'\r\n          class={`padding-bottom-1 ${demoClass}`}\r\n          onClick={() => this._handleWatchDemoClick(demoUrl)}\r\n          scale='l'\r\n        >\r\n          {this._translations.watchDemo}\r\n        </calcite-button>\r\n        <calcite-button\r\n          appearance='outline-fill'\r\n          kind='neutral'\r\n          class='padding-bottom-1'\r\n          onClick={() => this._handleLearnMoreClick()}\r\n          scale='l'\r\n        >\r\n          {this._translations.learnMore}\r\n        </calcite-button>\r\n        {!isEnterprisePortal && (\r\n          <solution-social-share\r\n            buttonAppearance='outline-fill'\r\n            class='padding-bottom-1'\r\n            shareButtonKind='neutral'\r\n            shareButtonText={this._translations.share}\r\n            shareButtonScale='l'\r\n            solutionId={this.card?.id || ''}\r\n            solutionTitle={this.card?.title || ''}\r\n            solutionVersion={this.card?.deployVersion || ''}\r\n          />\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * The notice that will show if the user is missing any privileges or licenses\r\n   * required to deploy the current solution.\r\n   */\r\n  private _getMissingPrivilegesNotice(\r\n    leadingMessages: string[],\r\n    bulletedMessages: string[],\r\n    trailingMessages: string[]\r\n  ): JsxNode {\r\n    const referenceElement = 'solutions-missing-privileges-notice';\r\n    const heading = this._translations.missingPrivilegesPopup.missingLicensingOrPrivileges;\r\n    return (\r\n      <div>\r\n        <calcite-notice\r\n          class='margin-inline-unset'\r\n          kind='warning'\r\n          open\r\n        >\r\n          <div slot='message'>\r\n            {`${heading}`}\r\n          </div>\r\n          <calcite-action\r\n            appearance='solid'\r\n            icon='information'\r\n            id={referenceElement}\r\n            slot='actions-end'\r\n            text={heading}\r\n          />\r\n        </calcite-notice>\r\n        <calcite-popover\r\n          closable={true}\r\n          label={this._translations.missingPrivilegesPopup.missingPrivilegesListHeading}\r\n          overlayPositioning='fixed'\r\n          placement='bottom'\r\n          ref={this._privilegePopoverRef}\r\n          referenceElement={'solutions-missing-privileges-notice'}\r\n        >\r\n          <div class='padding-1 display-flex flex-direction-column'>\r\n            <span class='padding-bottom-1'>\r\n              {this._translations.missingPrivilegesPopup.missingPrivilegesListHeading}\r\n            </span>\r\n            {\r\n              // Leading messages\r\n              this._getSpanMessages(\r\n                leadingMessages,\r\n                'padding-bottom-1'\r\n              )\r\n            }\r\n            {\r\n              // Bulleted messages\r\n              this._getBulletedMessages(bulletedMessages)\r\n            }\r\n            {\r\n              // Trailing messages\r\n              this._getSpanMessages(\r\n                trailingMessages,\r\n                'padding-top-1'\r\n              )\r\n            }\r\n          </div>\r\n        </calcite-popover>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /** Get the messages as span items */\r\n  private _getSpanMessages(\r\n    messages: string[],\r\n    css: string\r\n  ): JsxNode | JsxNode[] {\r\n    return messages.length > 0 ? messages.map(message => {\r\n      return (\r\n        <span class={css}>\r\n          {message}\r\n        </span>\r\n      );\r\n    }) : (<></>)\r\n  }\r\n\r\n  /** Get the messages as an unordered list */\r\n  private _getBulletedMessages(\r\n    messages: string[]\r\n  ): JsxNode | JsxNode[] {\r\n    return messages.length > 0 ? (\r\n      <ul>\r\n        {\r\n          messages.map(p => {\r\n            return (\r\n              <li>\r\n                {p}\r\n              </li>\r\n            );\r\n          })\r\n        }\r\n      </ul>\r\n    ) : (<></>)\r\n  }\r\n\r\n  /** The row that will show screenshots of the information products associated with the current solution. */\r\n  private _getScreenshotsRow(): JsxNode {\r\n    const showText = this._isScreenshotsRowExpanded ? this._translations.showLess : this._translations.showMore;\r\n    const fabIcon = this._isScreenshotsRowExpanded ? 'arrow-up' : 'arrow-down';\r\n    const showMoreClass = this._showScreenshotsShowMore ? '' : 'display-none';\r\n    return (\r\n      <calcite-accordion\r\n        class='accordion-bg '\r\n        iconPosition='start'\r\n        scale='l'\r\n        appearance='transparent'\r\n      >\r\n        <calcite-accordion-item\r\n          class='item-padding'\r\n          expanded\r\n          ref={this._screenshotsAccordionItemElement}\r\n        >\r\n          <div\r\n            class='margin-block-start-end-0 heading-font'\r\n            slot='content-start'\r\n          >\r\n            {this._translations.screenshots}\r\n          </div>\r\n          <calcite-panel>\r\n            <div class='display-flex flex-direction-column back-color-override-1'>\r\n              <div\r\n                class='collapsible-div max-height-300'\r\n                id='screenshots-subsection'\r\n                ref={this._screenshotsElement}\r\n              >\r\n                {this._getScreenshots()}\r\n              </div>\r\n              <calcite-fab\r\n                appearance='outline-fill'\r\n                class={`align-self-center ${showMoreClass}`}\r\n                icon={fabIcon}\r\n                kind='neutral'\r\n                onClick={() => {\r\n                  this._screenshotsElement.value?.classList.toggle('expanded');\r\n                  this._isScreenshotsRowExpanded = this._screenshotsElement.value!.classList.contains('expanded');\r\n                }}\r\n                text={showText}\r\n                text-enabled\r\n              />\r\n            </div>\r\n          </calcite-panel>\r\n        </calcite-accordion-item>\r\n      </calcite-accordion>\r\n    );\r\n  }\r\n\r\n  /** Get all of the screen shot cards */\r\n  private _getScreenshots(): JsxNode {\r\n    const screenshots = this._itemProperties?.preview.filter(ss => ss.format === 'image') || [];\r\n    return (\r\n      <calcite-card-group\r\n        class='card-group'\r\n        label={this._translations.screenshots}\r\n      >\r\n        {\r\n          screenshots.reduce((prev, cur) => {\r\n            this.card?.id ? prev.push((\r\n              <calcite-card\r\n                class='cursor-pointer'\r\n                label={cur.alt}\r\n                onClick={() => this._openScreenshotGallery(cur)}\r\n              >\r\n                <div\r\n                  class='card-image-wrap'\r\n                  slot='thumbnail'\r\n                >\r\n                  <img\r\n                    alt={cur.alt}\r\n                    class='thumbnail card-image'\r\n                    slot='thumbnail'\r\n                    src={\r\n                      getItemResourceUrl(\r\n                        this.card.id || '',\r\n                        cur.name,\r\n                        this._configContextConsumer.value!.authentication!\r\n                      )\r\n                    }\r\n                  />\r\n                  <div class='hover-text'>\r\n                    {this._translations.openInGallery}\r\n                  </div>\r\n                </div>\r\n              </calcite-card>\r\n            )) : prev.push((<></>));\r\n            return prev;\r\n          }, [] as JsxNode[])\r\n        }\r\n      </calcite-card-group>\r\n    );\r\n  }\r\n\r\n  /** Open the screenshot gallery dialog */\r\n  private _openScreenshotGallery(\r\n    screenshot: IItemPreview\r\n  ): void {\r\n    this._telemetry?.logEvent({\r\n      category: TELEMETRY_CATEGORY.SOLUTION_DETAILS,\r\n      action: 'Screenshot Gallery',\r\n      dimensions: [\r\n        this.card?.title || '',\r\n        this.card?.id || '',\r\n        this.card?.deployVersion || ''\r\n      ]\r\n    });\r\n    const dialog = this._screenshotsDialogRef.value;\r\n    if (dialog) {\r\n      dialog.screenshot = screenshot;\r\n      dialog.open = true;\r\n    }\r\n  }\r\n\r\n  private _getOverviewRow(): JsxNode {\r\n    return (\r\n      <calcite-accordion\r\n        class='accordion-bg '\r\n        iconPosition='start'\r\n        scale='l'\r\n        appearance='transparent'\r\n      >\r\n        <calcite-accordion-item\r\n          class='item-padding'\r\n          expanded\r\n          ref={this._overviewAccordionItemElement}\r\n        >\r\n          <div\r\n            class='margin-block-start-end-0 heading-font'\r\n            slot='content-start'\r\n          >\r\n            {this._translations.solutionOverview}\r\n          </div>\r\n          {this._getDescriptionRow()}\r\n          {this._getInformationProductsRow()}\r\n        </calcite-accordion-item>\r\n      </calcite-accordion>\r\n    );\r\n  }\r\n\r\n  /** The row that will show the description for the current solution as well as links to\r\n   * how to configure and any associated data dictionary.\r\n   */\r\n  private _getDescriptionRow(): JsxNode {\r\n    return (\r\n      <div class='display-flex flex-direction-column'>\r\n        <p class='font-color-1 font-1 margin-top-0 line-height-xxl' innerHTML={this.card?.description} />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /** The row that will show a table that displays details about the solutions information products. */\r\n  private _getInformationProductsRow(): JsxNode {\r\n    return (\r\n      <div class='display-flex flex-direction-column padding-top-md font-1 line-height-xxl font-color-1'>\r\n        <span>\r\n          {this.card?.title ? this._translations.informationProductsSubText.replace('{{solutionTitle}}', this.card.title) : ''}\r\n        </span>\r\n        <calcite-table\r\n          bordered\r\n          caption=''\r\n          class='padding-top-1'\r\n        >\r\n          {this._getInformationTableHeaderRow()}\r\n          {this._getInformationTableRows()}\r\n        </calcite-table>\r\n        <p>\r\n          {this._translations.informationProductsFooterText}\r\n        </p>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /** Helper function to get the information tables header. */\r\n  private _getInformationTableHeaderRow(): JsxNode {\r\n    return (\r\n      <calcite-table-row slot='table-header'>\r\n        <calcite-table-header\r\n          heading={this._translations.item}\r\n        />\r\n        <calcite-table-header\r\n          heading={this._translations.description}\r\n        />\r\n        <calcite-table-header\r\n          heading={this._translations.minimumUserType}\r\n        />\r\n      </calcite-table-row>\r\n    );\r\n  }\r\n\r\n  /** Helper function to get the rows that show the details about the information products\r\n   * @param templates the templates for the solutions information products\r\n   * @returns JsxNode[] of table rows\r\n  */\r\n  private _getInformationTableRows(): JsxNode[] {\r\n    const infoProducts = this._itemProperties?.infoProducts || [];\r\n    return infoProducts.map(i => {\r\n      return (\r\n        <calcite-table-row>\r\n          <calcite-table-cell>\r\n            <p\r\n              class='table-cell'\r\n              innerHTML={sanitizeHTML(i.item)}\r\n            />\r\n          </calcite-table-cell>\r\n          <calcite-table-cell>\r\n            <p\r\n              class='table-cell'\r\n              innerHTML={sanitizeHTML(i.description)}\r\n            />\r\n          </calcite-table-cell>\r\n          <calcite-table-cell>\r\n            <p\r\n              class='table-cell'\r\n              innerHTML={sanitizeHTML(i.userType)}\r\n            />\r\n          </calcite-table-cell>\r\n        </calcite-table-row>\r\n      );\r\n    });\r\n  }\r\n\r\n  /** The row that will show a table of release notes for the current solution. */\r\n  private _getReleaseNotesRow(): JsxNode {\r\n    return (\r\n      <calcite-accordion\r\n        class='accordion-bg '\r\n        iconPosition='start'\r\n        scale='l'\r\n        appearance='transparent'\r\n      >\r\n        <calcite-accordion-item\r\n          class='item-padding'\r\n          expanded\r\n          ref={this._releaseNotesAccordionItemElement}\r\n        >\r\n          <div\r\n            class='margin-block-start-end-0 heading-font'\r\n            slot='content-start'\r\n          >\r\n            {this._translations.releaseNotes}\r\n          </div>\r\n          <div class='display-flex flex-direction-column'>\r\n            <calcite-table\r\n              bordered\r\n              caption=''\r\n            >\r\n              {this._getReleaseNotesTableHeaderRow()}\r\n              {this._getReleaseNotesTableRows()}\r\n            </calcite-table>\r\n          </div>\r\n        </calcite-accordion-item>\r\n      </calcite-accordion>\r\n    );\r\n  }\r\n\r\n  /** Helper function to get the tables header row. */\r\n  private _getReleaseNotesTableHeaderRow(): JsxNode {\r\n    return (\r\n      <calcite-table-row slot='table-header'>\r\n        <calcite-table-header\r\n          heading={this._translations.version}\r\n        />\r\n        <calcite-table-header\r\n          heading={this._translations.description}\r\n        />\r\n      </calcite-table-row>\r\n    );\r\n  }\r\n\r\n  /** Helper function to get the rows that show the release notes.\r\n   * @param releaseNotes the key details to display\r\n   * @returns JsxNode[] of table rows\r\n  */\r\n  private _getReleaseNotesTableRows(): JsxNode[] {\r\n    const releaseNotes = this._itemProperties?.releaseNotes || [];\r\n    return releaseNotes?.map(n => {\r\n      return (\r\n        <calcite-table-row>\r\n          <calcite-table-cell>\r\n            <p\r\n              class='table-cell'\r\n              innerHTML={sanitizeHTML(n.version)}\r\n            />\r\n          </calcite-table-cell>\r\n          <calcite-table-cell>\r\n            <p\r\n              class='table-cell'\r\n              innerHTML={sanitizeHTML(n.description)}\r\n            />\r\n          </calcite-table-cell>\r\n        </calcite-table-row>\r\n      );\r\n    });\r\n  }\r\n\r\n  /** The row that will show any related resource cards */\r\n  private _getRelatedResourcesRow(\r\n    relatedResources: any[]\r\n  ): JsxNode {\r\n    return (\r\n      <calcite-accordion\r\n        class='accordion-bg '\r\n        iconPosition='start'\r\n        scale='l'\r\n        appearance='transparent'\r\n      >\r\n        <calcite-accordion-item\r\n          class='item-padding'\r\n          expanded\r\n          ref={this._relatedResourcesAccordionItemElement}\r\n        >\r\n          <div\r\n            class='margin-block-start-end-0 heading-font'\r\n            slot='content-start'\r\n          >\r\n            {this._translations.relatedResources}\r\n          </div>\r\n          <div class='display-flex flex-direction-row'>\r\n            {\r\n              relatedResources.map(r => {\r\n                // TODO need to implement this first\r\n                console.log(r);\r\n                <solution-resource-card />\r\n              })\r\n            }\r\n          </div>\r\n        </calcite-accordion-item>\r\n      </calcite-accordion>\r\n    );\r\n  }\r\n\r\n  /** Helper function to fetch the related resources. */\r\n  private _getRelatedResources(): any[] {\r\n    return [];\r\n  }\r\n\r\n  /** The row that will show any additional solutions that may be of interest to users of the current solution. */\r\n  private _getYouMayAlsoLikeRow(\r\n    cards: ISolutionInfoCard[]\r\n  ): JsxNode {\r\n    const showMoreFabClass = this._showYouMayAlsoLikeShowMore ? '' : 'display-none';\r\n    const showText = this._isYouMayAlsoLikeRowExpanded ? this._translations.showLess : this._translations.showMore;\r\n    const fabIcon = this._isYouMayAlsoLikeRowExpanded ? 'arrow-up' : 'arrow-down';\r\n    const height = this._isYouMayAlsoLikeRowExpanded ? '' : { 'height': `${this._youMayAlsoLikeBaseHeight}px` };\r\n    return (\r\n      <calcite-accordion\r\n        class='accordion-bg '\r\n        iconPosition='start'\r\n        scale='l'\r\n        appearance='transparent'\r\n      >\r\n        <calcite-accordion-item\r\n          class='item-padding'\r\n          expanded\r\n          ref={this._youMayAlsoLikeAccordionItemElement}\r\n        >\r\n          <div\r\n            class='margin-block-start-end-0 heading-font'\r\n            slot='content-start'\r\n          >\r\n            {this._translations.youMayAlsoLike}\r\n          </div>\r\n          <div class='display-flex flex-direction-column'>\r\n            <div\r\n              class='collapsible-div'\r\n              id='you-may-also-like-subsection'\r\n              ref={this._youMayAlsoLikeElement}\r\n              style={height}\r\n            >\r\n              <div class='display-flex flex-direction-row'>\r\n                <calcite-card-group\r\n                  class='card-group'\r\n                  label={this._translations.youMayAlsoLike}\r\n                >\r\n                  {\r\n                    cards.map((card: ISolutionInfoCard, i: number) => {\r\n                      return (\r\n                        <solution-details-card\r\n                          id={`you-may-also-like-${i}`}\r\n                          card={card}\r\n                          class='padding-2px'\r\n                          source='you-may-also-like'\r\n                          referrerSolutionId={this.card?.id || ''}\r\n                          referrerSolutionTitle={this.card?.title || ''}\r\n                          referrerSolutionVersion={this.card?.deployVersion || ''}\r\n                        />\r\n                      );\r\n                    })\r\n                  }\r\n                </calcite-card-group>\r\n              </div>\r\n            </div>\r\n            <calcite-fab\r\n              appearance='outline-fill'\r\n              class={`align-self-center ${showMoreFabClass}`}\r\n              icon={fabIcon}\r\n              kind='inverse'\r\n              onClick={() => {\r\n                this._youMayAlsoLikeElement.value?.classList.toggle('expanded');\r\n                this._isYouMayAlsoLikeRowExpanded = this._youMayAlsoLikeElement.value!.classList.contains('expanded');\r\n              }}\r\n              text={showText}\r\n              text-enabled\r\n            />\r\n          </div>\r\n        </calcite-accordion-item>\r\n      </calcite-accordion>\r\n    );\r\n  }\r\n\r\n  /** Helper function to fetch the additional solutions of intrest. */\r\n  private _getYouMayAlsoLikeCards(): ISolutionInfoCard[] {\r\n    const relatedSolutions = this._itemProperties?.relatedSolutions || [];\r\n    return this._allCards.filter(c => relatedSolutions.indexOf(c.deployCommonId) > -1);\r\n  }\r\n\r\n  private _getTermsOfUseRow(): JsxNode {\r\n    return (\r\n      <calcite-accordion\r\n        class='accordion-bg '\r\n        iconPosition='start'\r\n        scale='l'\r\n        appearance='transparent'\r\n      >\r\n        <calcite-accordion-item\r\n          class='item-padding'\r\n          expanded\r\n          ref={this._termsOfUseAccordionItemElement}\r\n        >\r\n          <div\r\n            class='margin-block-start-end-0 heading-font'\r\n            slot='content-start'\r\n          >\r\n            {'Terms of Use'}\r\n          </div>\r\n          <div class='display-flex flex-direction-column'>\r\n            <p\r\n              class='font-color-1 font-1 margin-top-0 line-height-xxl'\r\n              innerHTML={this._translations.copyrightHeading}\r\n            />\r\n            <p\r\n              class='font-color-1 font-1 margin-top-0 line-height-xxl'\r\n              innerHTML={this._translations.apacheLicense}\r\n            />\r\n            <calcite-link\r\n              class='margin-top-0 line-height-xxl'\r\n              href={this._translations.apacheLicenseUrl}\r\n            >\r\n              {this._translations.apacheLicenseUrl}\r\n            </calcite-link>\r\n            <p\r\n              class='font-color-1 font-1 margin-top-1 line-height-xxl'\r\n              innerHTML={this._translations.asIsBasis}\r\n            />\r\n          </div>\r\n        </calcite-accordion-item>\r\n      </calcite-accordion>\r\n    );\r\n  }\r\n\r\n  /** Open the deploy dialog */\r\n  private _openDeploy(): void {\r\n    if (this._configContextConsumer.value!.authentication!.IsSignedIn) {\r\n      const dialog = this._deployDialogRef.value;\r\n      if (dialog) {\r\n        dialog.userOptions = this._userOptions;\r\n        dialog.open = true;\r\n      }\r\n    } else {\r\n      // Pass \"deploy\" as signInParamValue to add signInParam=deploy to the redirect URI\r\n      // This follows the parent app's convention for auto-deployment after sign-in\r\n      this._configContextConsumer.value!.authentication!.signIn(\"deploy\");\r\n    }\r\n  }\r\n\r\n  /** Open the url in a new tab */\r\n  private _openUrl(\r\n    url: string\r\n  ): void {\r\n    window.open(url, '_blank');\r\n  }\r\n\r\n  /** Log telemetry event when Watch Demo button is clicked */\r\n  private _handleWatchDemoClick(url: string): void {\r\n    this._telemetry?.logEvent({\r\n      category: TELEMETRY_CATEGORY.SOLUTION_DETAILS,\r\n      action: 'Watch Demo',\r\n      dimensions: [\r\n        this.card?.title || '',\r\n        this.card?.id || '',\r\n        this.card?.deployVersion || ''\r\n      ]\r\n    });\r\n    this._openUrl(url);\r\n  }\r\n\r\n  /** Log telemetry event when Learn More button is clicked */\r\n  private _handleLearnMoreClick(): void {\r\n    this._telemetry?.logEvent({\r\n      category: TELEMETRY_CATEGORY.SOLUTION_DETAILS,\r\n      action: 'Learn More',\r\n      dimensions: [\r\n        this.card?.title || '',\r\n        this.card?.id || '',\r\n        this.card?.deployVersion || ''\r\n      ]\r\n    });\r\n    this._openUrl(this.card?.learnMoreUrl || '');\r\n  }\r\n\r\n  /** Set the current card based on the event emitted from the solution-details-card */\r\n  private async _detailsCardSelected(\r\n    evt: CustomEvent\r\n  ): Promise<void> {\r\n    this.card = evt.detail;\r\n    this._onResize();\r\n    this._missingPrivilegeMessages = undefined;\r\n    await this._getItemData();\r\n    this._expandAccordions();\r\n  }\r\n\r\n  /** Expand all row accordions */\r\n  private _expandAccordions(): void {\r\n    if (this._overviewAccordionItemElement.value) {\r\n      this._overviewAccordionItemElement.value.expanded = true\r\n    };\r\n    if (this._releaseNotesAccordionItemElement.value) {\r\n      this._releaseNotesAccordionItemElement.value.expanded = true;\r\n    }\r\n    if (this._relatedResourcesAccordionItemElement.value) {\r\n      this._relatedResourcesAccordionItemElement.value.expanded = true;\r\n    }\r\n    if (this._screenshotsAccordionItemElement.value) {\r\n      this._screenshotsAccordionItemElement.value.expanded = true;\r\n    }\r\n    if (this._termsOfUseAccordionItemElement.value) {\r\n      this._termsOfUseAccordionItemElement.value.expanded = true;\r\n    }\r\n    if (this._youMayAlsoLikeAccordionItemElement.value) {\r\n      this._youMayAlsoLikeAccordionItemElement.value.expanded = true;\r\n    }\r\n  }\r\n\r\n  /** Get the item data for the current cards solution.\r\n   * This function will also check for required privliges based on the templates defined for this solution.\r\n   */\r\n  private async _getItemData(): Promise<void> {\r\n    const userSession = this._configContextConsumer.value!.userSession!;\r\n    const solutionData: ISolutionItemData = await getItemDataAsJson(\r\n      this.card!.id,\r\n      userSession\r\n    );\r\n\r\n    const item: IItem = await getItem(this.card!.id, userSession);\r\n    this._itemProperties = item.properties;\r\n    this.itemPropertiesFetched.emit(this._itemProperties!);\r\n\r\n    const privilegeList = getRequiredSolutionPrivileges(\r\n      solutionData,\r\n      this.card!.typeKeywords,\r\n      this._configContextConsumer.value!.authentication!\r\n    );\r\n\r\n    this._privileges = userSession.username ? privilegeList : [];\r\n    this._userPrivileges = this._configContextConsumer.value?.authentication ? \r\n      this._configContextConsumer.value!.authentication.PortalUserPrivileges : [];\r\n    const privilegesDiff = this._privileges.filter(p => !this._userPrivileges.includes(p));\r\n    this._missingPrivilegeMessages = getPrivilegeMessages(this._translations, privilegesDiff);\r\n\r\n    const userOptionsDef = solutionData.params ? this.formatParams(solutionData.params) : Promise.resolve([]);\r\n    void userOptionsDef.then(userOptions => {\r\n      this._userOptions = userOptions;\r\n    });\r\n\r\n    this._templates = solutionData.templates;\r\n    this.templatesFetched.emit(solutionData.templates);\r\n\r\n    // Check for auto-deployment now that privileges have been checked\r\n    this._checkUrlParametersForAutoDeployment();\r\n  }\r\n\r\n  /** Update the user option parameters based on any previously deployed items\r\n   *\r\n   * @param params IStringValuePair of current solution params\r\n   * @return IUserOption[]\r\n  */\r\n  private formatParams(\r\n    params: IStringValuePair\r\n  ): Promise<IUserOption[]> {\r\n    const userSession = this._configContextConsumer.value!.userSession!;\r\n    const userOptions: IUserOption[] = [];\r\n    const paramKeys: string[] = params ? Object.keys(params) : [];\r\n    const userOption: IUserOption = {\r\n      id: '',\r\n      props: [],\r\n      accordionDisplay: false\r\n    };\r\n    if (paramKeys.length > 0) {\r\n      const existingItemDefs: Array<Promise<any>> = [];\r\n      paramKeys.forEach(id => {\r\n        const p = params[id];\r\n        if (p.valueType && p.valueType.toLowerCase() === 'itemid') {\r\n          existingItemDefs.push(\r\n            this._findExistingItem(id, 'Feature Service', userSession.username || '')\r\n          );\r\n        }\r\n      });\r\n\r\n      return Promise.all(existingItemDefs).then(results => {\r\n        const idHash: any = {};\r\n        results.forEach(r => {\r\n          if (r.query && r.results && r.results.length > 0) {\r\n            const sourceId: string = r.query.split(' ')[0].replace('typekeywords:source-', '');\r\n            idHash[sourceId] = {\r\n              resultId: r.results[0].id,\r\n              response: r.results[0]\r\n            };\r\n          }\r\n        });\r\n\r\n        paramKeys.forEach(id => {\r\n          // custom item id params support an optional user defined learn more link\r\n          // this link will show as a part of a high level set of descriptive info\r\n          // and does not make sense to store with each individual param\r\n          if (id === 'serviceLearnMore') {\r\n            this._configureLearnMore = params[id];\r\n            alert(this._configureLearnMore)\r\n            delete (params[id]);\r\n            return;\r\n          }\r\n          // if the param contains enterpriseIDMapping cache here and pass back for deployment\r\n          // no need for this to pass through the elm side as it is not used for any aspects of the UI\r\n          if (params[id].enterpriseIDMapping) {\r\n            this._customDeploymentMappings[id] = params[id].enterpriseIDMapping;\r\n          }\r\n          userOption.id = id;\r\n          if (idHash[id]) {\r\n            params[id].existingItemId = idHash[id].resultId;\r\n            this.updateUserProp(params[id] as IUserProp, idHash[id].response as IStringValuePair);\r\n          }\r\n          this.updateOption(params[id] as IStringValuePair, userOption, id);\r\n        });\r\n        userOptions.push(userOption);\r\n\r\n        return Promise.resolve(userOptions);\r\n\r\n      }).catch(() => Promise.resolve([]));\r\n    } else {\r\n      return Promise.resolve([]);\r\n    }\r\n  }\r\n\r\n  /** Check for previously deployed items\r\n   *\r\n   * @param itemId string\r\n   * @param type string\r\n   * @param userName string\r\n   * @return a promise that will resolve with the existing items query response\r\n  */\r\n  private _findExistingItem(\r\n    itemId: string,\r\n    type: string,\r\n    userName: string\r\n  ): Promise<any> {\r\n    const userSession = this._configContextConsumer.value!.userSession!;\r\n    // the higher level function is based on the idea of starting with templates\r\n    // I may move this to a common function is solution.js\r\n    return _findExistingItem(\r\n      `typekeywords:source-${itemId} type:${type} owner:${userName}`,\r\n      userSession\r\n    );\r\n  }\r\n\r\n  /** Update the user props based on previously deployed items\r\n   *\r\n   * @param userProp IUserProp the current user prop toupdate\r\n   * @param response IStringValuePair key response details about any existing items\r\n   * @return boolean when true the prop has been updated successfully\r\n  */\r\n  private updateUserProp(\r\n    userProp: IUserProp,\r\n    response: IStringValuePair\r\n  ): boolean {\r\n    const isLayer: boolean = userProp.itemType?.toLowerCase() === 'feature service';\r\n\r\n    const responseTest = new RegExp(isLayer ? this._regexFsUrl : userProp.itemType!, 'iu');\r\n    const responseProp: string = getPropWithDefault(response, isLayer ? 'url' : 'type', '') || '';\r\n\r\n    const validProp: boolean = responseProp !== '' && responseTest.test(responseProp);\r\n    userProp.responseValue = validProp ? responseProp : '';\r\n    userProp.name = validProp ? getProp(response, 'name') || '' : '';\r\n    userProp.title = validProp ? getProp(response, 'title') || '' : '';\r\n    // update to make sure case matches..\r\n    userProp.itemType = validProp ? getProp(response, 'type') : userProp.itemType;\r\n    userProp.validId = validProp;\r\n    userProp.itemUrl = getItemUrl(response.id as string, this._configContextConsumer.value!.authentication!);\r\n    return validProp;\r\n  }\r\n\r\n  /** Update the user options based on previously deployed items\r\n   *\r\n   * @param v IStringValuePair key details about previously deployed items\r\n   * @param userOption IUserOption the current user option to update\r\n   * @param id string the current item id\r\n  */\r\n  private updateOption(\r\n    v: IStringValuePair,\r\n    userOption: IUserOption,\r\n    id: string\r\n  ): void {\r\n    const defValue: string = v.default || '';\r\n    const outType: string = typeof (defValue);\r\n    const defaultValue: string = defValue.toString();\r\n    this._setFeatureServiceProps(v);\r\n    const validation: any = this.getValidation(v, defaultValue);\r\n    userOption.props.push({\r\n      id,\r\n      outType,\r\n      prop: id,\r\n      itemType: v.itemType || '',\r\n      responseValue: v.responseValue || '',\r\n      label: v.label || '',\r\n      choices: v.choices || [],\r\n      valueType: v.valueType.toLowerCase(),\r\n      attributes: v.attributes || {},\r\n      value: v.existingItemId && v.valueType.toLowerCase() === 'itemid' ? v.existingItemId : defaultValue,\r\n      default: defaultValue,\r\n      srSearchText: defaultValue,\r\n      autoSelect: defaultValue !== '',\r\n      ...validation,\r\n      loading: false,\r\n      validId: true,\r\n      tooltip: v.tooltip || '',\r\n      name: v.name || '',\r\n      title: v.title || '',\r\n      itemUrl: v.itemUrl || ''\r\n    } as IUserProp);\r\n  }\r\n\r\n  /** Update the user options based on previously deployed items */\r\n  private _setFeatureServiceProps(\r\n    v: any\r\n  ): void {\r\n    if (v.valueType && v.valueType.toLowerCase() === 'itemid') {\r\n      setCreateProp(v, 'attributes.required', 'true');\r\n    }\r\n  }\r\n\r\n  /** Set the inital valid state when a value is required */\r\n  private getValidation(\r\n    v: IStringValuePair,\r\n    defaultValue: string\r\n  ): any {\r\n    let expression: string = '';\r\n    let message: string = getProp(v, 'validation.message') || '';\r\n    let valid: boolean = true;\r\n\r\n    if (getProp(v, 'attributes.required') === 'true') {\r\n      expression = getPropWithDefault(v, 'validation.expression', '\\\\S{1,}');\r\n      const regEx = new RegExp(expression);\r\n      valid = regEx.test(defaultValue);\r\n    }\r\n\r\n    // itemid validation options are defined by default\r\n    if (v.valueType && v.valueType.toLowerCase() === 'itemid') {\r\n      expression = this._regexID;\r\n      message = this._translations.configure.invalidID;\r\n    }\r\n\r\n    return {\r\n      valid,\r\n      validation: {\r\n        expression,\r\n        message\r\n      }\r\n    };\r\n  }\r\n\r\n  /** Update the all cards prop when the allCardsFetched event is fired. */\r\n  private _allCardsFetched(event: any): void {\r\n    this._allCards = event.detail;\r\n  }\r\n\r\n  /** Handle resize events to show/hide the 'Show more' buttons */\r\n  private _onResize(): void {\r\n    this._showYouMayAlsoLikeShowMore = (this._youMayAlsoLikeElement.value?.scrollHeight || 0) > this._youMayAlsoLikeBaseHeight;\r\n    this._showScreenshotsShowMore = (this._screenshotsElement.value?.scrollHeight || 0) > this._screenshotsRowBaseHeight + 2;\r\n  }\r\n\r\n  /** Called when the users switches tabs can be used to clear any temp work */\r\n  private _cleanupPanel(): void {\r\n    this.el.scrollIntoView(true);\r\n\r\n    this._isScreenshotsRowExpanded = false;\r\n    this._showScreenshotsShowMore = false;\r\n    this._screenshotsElement.value?.classList.remove('expanded');\r\n\r\n    this._isYouMayAlsoLikeRowExpanded = false;\r\n    this._showYouMayAlsoLikeShowMore = false;\r\n    this._youMayAlsoLikeElement.value?.classList.remove('expanded');\r\n\r\n    // close any open popovers\r\n    if (this._privilegePopoverRef.value?.open) {\r\n      this._privilegePopoverRef.value.open = false;\r\n    }\r\n\r\n    // expand all accordions for the next card that opens\r\n    this._expandAccordions();\r\n  }\r\n\r\n  /** Handle deploy progress start */\r\n  private _deployProgressStart(abortController: CustomEvent<AbortController>): void {\r\n    if (this._deployingDialogRef.value) {\r\n      this._deployingDialogRef.value.open = true;\r\n      this._deployingDialogRef.value.abortController = abortController.detail;\r\n    }\r\n    if (this._deployDialogRef.value) {\r\n      // The deploy code is still running from here so just hide it\r\n      this._deployDialogRef.value.classList.add('display-none');\r\n    }\r\n  }\r\n\r\n  /** Pass progress details to the deploying dialog */\r\n  private _deployProgessUpdated(\r\n    evt: CustomEvent\r\n  ): void {\r\n    const update: IDeployProgressUpdate = evt.detail;\r\n    this._deployingDialogRef.value!.deploymentProgress = update.progress;\r\n  }\r\n\r\n  /** Close the deploying and deploy dialogs */\r\n  private _closeDialogs(): void {\r\n    this._deployingDialogRef.value!.close();\r\n    this._deployDialogRef.value!.open = false;\r\n    this._deployDialogRef.value!.classList.remove('display-none');\r\n  }\r\n\r\n  /** When the tab changes we need to emit the sort type so app url params can be updated */\r\n  private _handleDeployAppTabSelected(\r\n    evt: CustomEvent\r\n  ): void {\r\n    const activeTab: DeployAppTab = evt.detail;\r\n    if (activeTab === 'details') {\r\n      this.sortTypeChanged.emit('');\r\n    }\r\n  }\r\n}\r\n"],"names":["ref$jsx","css"],"mappings":"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"}

package/dist/components/solution-item-accordion/customElement.js

@@ -1,11 +1,11 @@
-import { c } from "../../chunks/runtime.js";
-import { u as a } from "../../chunks/useT9n.js";
-import { css as d, html as n, nothing as p } from "lit";
-import { LitElement as h, createEvent as l } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.56 */
-const m = d`/** @license
+v1.2.0-next.58 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { css, html, nothing } from "lit";
+import { LitElement, createEvent } from "@arcgis/lumina";
+const styles = css`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -19,10 +19,78 @@ const m = d`/** @license
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */:host{display:block}.padding-start-1{padding-inline-start:1rem}.border-override{--calcite-accordion-border-color: var(--calcite-color-border-1) !important}.display-flex{display:flex}.align-center{align-items:center}.solution-list-item-label{color:var(--calcite-color-text-1);font-size:var(--calcite-font-size--1)}.solution-list-item-label,.solution-list-item-description{font-family:var(--calcite-font-family);font-weight:var(--calcite-font-weight-normal);overflow-wrap:break-word;word-break:break-word}.solution-list-item-description{font-size:var(--calcite-font-size--2);margin-block-start:.125rem;color:var(--calcite-color-text-3)}.solution-list-item-content{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;line-height:1.375}.underline{text-decoration:underline}div[slot=actions-end] calcite-action[icon=launch]{height:100%}div[slot=actions-end]{height:100%}`;
-class u extends h {
+ */
+
+:host {
+  display: block;
+}
+
+.padding-start-1 {
+  padding-inline-start: 1rem;
+}
+
+.border-override {
+  --calcite-accordion-border-color: var(--calcite-color-border-1) !important;
+}
+
+.display-flex {
+  display: flex;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.solution-list-item-label {
+  color: var(--calcite-color-text-1);
+  font-size: var(--calcite-font-size--1);
+}
+
+.solution-list-item-label,
+.solution-list-item-description {
+  font-family: var(--calcite-font-family);
+  font-weight: var(--calcite-font-weight-normal);
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.solution-list-item-description {
+  font-size: var(--calcite-font-size--2);
+  margin-block-start: 0.125rem;
+  color: var(--calcite-color-text-3);
+}
+
+.solution-list-item-content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  justify-content: center;
+  line-height: 1.375;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+div[slot="actions-end"] calcite-action[icon="launch"] {
+  height: 100%;
+}
+
+div[slot="actions-end"]{
+  height: 100%;
+}
+`;
+class SolutionItemAccordion extends LitElement {
   constructor() {
-    super(...arguments), this.itemRelationshipDependencies = [], this.linkType = "item", this.listSelectionMode = "none", this.templateInfos = [], this.typeKeywords = [], this._sortedTemplateInfos = [], this._translations = a({ name: "solution-item-accordion", blocking: !0 }), this._sortOrder = [
+    super(...arguments);
+    this.itemRelationshipDependencies = [];
+    this.linkType = "item";
+    this.listSelectionMode = "none";
+    this.templateInfos = [];
+    this.typeKeywords = [];
+    this._sortedTemplateInfos = [];
+    this._translations = useT9n({ name: "solution-item-accordion", blocking: true });
+    this._sortOrder = [
       "Hub Site Application",
       "Hub Page",
       "Web Experience",
@@ -55,43 +123,70 @@ class u extends h {
       "Report Template",
       "Rule Package",
       "Group"
-    ], this.solutionItemHover = l(), this.solutionItemSelect = l(), this.solutionTypeHover = l();
+    ];
+    this.solutionItemHover = createEvent();
+    this.solutionItemSelect = createEvent();
+    this.solutionTypeHover = createEvent();
   }
   static {
-    this.properties = { itemRelationshipDependencies: 0, linkType: 1, listSelectionMode: 1, templateInfos: 0, typeKeywords: 0, _sortedTemplateInfos: 16, _translations: 16 };
+    this.properties = { itemRelationshipDependencies: [0, {}, { attribute: false }], linkType: 1, listSelectionMode: 1, templateInfos: [0, {}, { attribute: false }], typeKeywords: [0, {}, { attribute: false }], _sortedTemplateInfos: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
   }
   static {
-    this.styles = m;
+    this.styles = styles;
   }
-  willUpdate(e) {
-    e.has("templateInfos") && (this.hasUpdated || this.templateInfos?.length > 0) && this.templateInfosWatchHandler();
+  willUpdate(changes) {
+    if (changes.has("templateInfos") && (this.hasUpdated || this.templateInfos?.length > 0)) {
+      void this.templateInfosWatchHandler();
+    }
   }
   async templateInfosWatchHandler() {
     this._sortedTemplateInfos = this._sortTemplates();
   }
   async collapseAll() {
-    this.el?.shadowRoot?.querySelectorAll("calcite-accordion-item")?.forEach((i) => {
-      i.expanded = !1;
+    const items = this.el?.shadowRoot?.querySelectorAll("calcite-accordion-item");
+    items?.forEach((item) => {
+      item.expanded = false;
     });
   }
   async deselectAll() {
-    (this.listSelectionMode === "single" || this.listSelectionMode === "single-persist") && this.el?.shadowRoot?.querySelectorAll("calcite-list-item")?.forEach((i) => {
-      i.selected && (i.selected = !1, (i.parentElement?.parentElement).expanded = !1);
-    });
+    if (this.listSelectionMode === "single" || this.listSelectionMode === "single-persist") {
+      const items = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
+      items?.forEach((item) => {
+        if (item.selected) {
+          item.selected = false;
+          (item.parentElement?.parentElement).expanded = false;
+        }
+      });
+    }
   }
-  async selectItem(e) {
-    (this.listSelectionMode === "single" || this.listSelectionMode === "single-persist") && this.el?.shadowRoot?.querySelectorAll("calcite-list-item")?.forEach((t) => {
-      t.id === e && (t.selected = !0, (t.parentElement?.parentElement).expanded = !0);
-    });
+  async selectItem(id) {
+    if (this.listSelectionMode === "single" || this.listSelectionMode === "single-persist") {
+      const items = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
+      items?.forEach((item) => {
+        if (item.id === id) {
+          item.selected = true;
+          (item.parentElement?.parentElement).expanded = true;
+        }
+      });
+    }
   }
   async selectFirstItem() {
-    const e = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
-    e?.length && (e[0].selected = !0, (e[0].parentElement?.parentElement).expanded = !0);
+    const items = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
+    if (items?.length) {
+      items[0].selected = true;
+      (items[0].parentElement?.parentElement).expanded = true;
+    }
   }
-  async selectItems(e) {
-    this.listSelectionMode === "multiple" && this.el?.shadowRoot?.querySelectorAll("calcite-list-item")?.forEach((t) => {
-      e.indexOf(t.id) > -1 && (t.selected = !0, (t.parentElement?.parentElement).expanded = !0);
-    });
+  async selectItems(ids) {
+    if (this.listSelectionMode === "multiple") {
+      const items = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
+      items?.forEach((item) => {
+        if (ids.indexOf(item.id) > -1) {
+          item.selected = true;
+          (item.parentElement?.parentElement).expanded = true;
+        }
+      });
+    }
   }
   async load() {
     this._sortedTemplateInfos = this._sortTemplates();
@@ -99,55 +194,98 @@ class u extends h {
   render() {
     return this._getAccordion();
   }
-  _deselectOthers(e) {
-    (this.listSelectionMode === "single" || this.listSelectionMode === "single-persist") && this.el?.shadowRoot?.querySelectorAll("calcite-list-item")?.forEach((t) => {
-      t.id !== e && (t.selected = !1);
-    });
+  _deselectOthers(id) {
+    if (this.listSelectionMode === "single" || this.listSelectionMode === "single-persist") {
+      const items = this.el?.shadowRoot?.querySelectorAll("calcite-list-item");
+      items?.forEach((item) => {
+        if (item.id !== id) {
+          item.selected = false;
+        }
+      });
+    }
   }
   _getAccordion() {
-    const e = [], i = this._sortedTemplateInfos.reduce((t, s) => {
-      const o = this._getTypeForDisplay(s.type, s.typeKeywords);
-      return e.indexOf(o) < 0 && (e.push(o), t.push(this._getAccordionItem(s))), t;
+    const types = [];
+    const accordion = this._sortedTemplateInfos.reduce((prev, cur) => {
+      const displayType = this._getTypeForDisplay(cur.type, cur.typeKeywords);
+      if (types.indexOf(displayType) < 0) {
+        types.push(displayType);
+        prev.push(this._getAccordionItem(cur));
+      }
+      return prev;
     }, []);
-    return n`<calcite-accordion class="border-override" selection-mode=single>${i}</calcite-accordion>`;
+    return html`<calcite-accordion class="border-override" selection-mode=single>${accordion}</calcite-accordion>`;
   }
-  _getAccordionItem(e) {
-    const i = this._getTypeForDisplay(e.type, e.typeKeywords), t = this._sortedTemplateInfos.filter((s) => this._getTypeForDisplay(s.type, s.typeKeywords) === i);
-    return n`<calcite-accordion-item .description=${`${i} (${t.length})`} @mouseenter=${() => this.solutionTypeHover.emit({ itemType: i, entering: !0 })} @mouseleave=${() => this.solutionTypeHover.emit({ itemType: i, entering: !1 })}><solution-item-icon class="padding-start-1 display-flex align-center" slot=actions-start .type=${e.type} .typeKeywords=${e.typeKeywords}></solution-item-icon>${this._getList(t)}</calcite-accordion-item>`;
+  _getAccordionItem(templateInfo) {
+    const _type = this._getTypeForDisplay(templateInfo.type, templateInfo.typeKeywords);
+    const templateInfos = this._sortedTemplateInfos.filter((t) => {
+      const tType = this._getTypeForDisplay(t.type, t.typeKeywords);
+      return tType === _type;
+    });
+    return html`<calcite-accordion-item .description=${`${_type} (${templateInfos.length})`} @mouseenter=${() => this.solutionTypeHover.emit({ itemType: _type, entering: true })} @mouseleave=${() => this.solutionTypeHover.emit({ itemType: _type, entering: false })}><solution-item-icon class="padding-start-1 display-flex align-center" slot=actions-start .type=${templateInfo.type} .typeKeywords=${templateInfo.typeKeywords}></solution-item-icon>${this._getList(templateInfos)}</calcite-accordion-item>`;
   }
-  _getList(e) {
-    const i = this._sortTemplatesByTitle(e);
-    return n`<calcite-list .label=${this._translations.solutionsTemplates} selection-appearance=border .selectionMode=${this.listSelectionMode}>${i.map((t) => this._getListItem(t))}</calcite-list>`;
+  _getList(templateInfos) {
+    const sortedTemplateInfos = this._sortTemplatesByTitle(templateInfos);
+    return html`<calcite-list .label=${this._translations.solutionsTemplates} selection-appearance=border .selectionMode=${this.listSelectionMode}>${sortedTemplateInfos.map((t) => this._getListItem(t))}</calcite-list>`;
   }
-  _getListItem(e) {
-    const i = this.typeKeywords.includes("Deployed") && e.url, t = this.linkType === "action";
-    return n`<calcite-list-item id=${e.id ?? p} @mouseenter=${() => this.solutionItemHover.emit({ itemId: e.id, entering: !0 })} @mouseleave=${() => this.solutionItemHover.emit({ itemId: e.id, entering: !1 })} @calciteListItemSelect=${() => {
-      this._deselectOthers(e.id), this.solutionItemSelect.emit({ itemId: e.id, selected: !0 }), i && !t && window.open(e.url, "_blank");
-    }} .value=${e.id}><div class="solution-list-item-content" slot=content><div class=${`solution-list-item-label ${i && !t ? "underline" : ""}`}>${e.title}</div><div class="solution-list-item-description">${e.snippet}</div></div>${this.itemRelationshipDependencies.length > 0 && this.itemRelationshipDependencies.some((s) => s === e.id) && n`<calcite-chip slot=actions-end icon=information scale=s .label=${this._translations?.itemDependency}>${this._translations?.itemDependency}</calcite-chip>` || ""}${i && t ? n`<div slot=actions-end><calcite-action appearance=solid icon=launch .id=${`${e.id}-launch`} @click=${() => window.open(e.url, "_blank")} text></calcite-action><calcite-tooltip overlay-positioning=fixed .referenceElement=${`${e.id}-launch`}><span>${this._translations?.openDetails}</span></calcite-tooltip></div>` : null}</calcite-list-item>`;
+  _getListItem(templateInfo) {
+    const isDeployed = this.typeKeywords.includes("Deployed") && templateInfo.url;
+    const isActionLink = this.linkType === "action";
+    return html`<calcite-list-item id=${templateInfo.id ?? nothing} @mouseenter=${() => this.solutionItemHover.emit({ itemId: templateInfo.id, entering: true })} @mouseleave=${() => this.solutionItemHover.emit({ itemId: templateInfo.id, entering: false })} @calciteListItemSelect=${() => {
+      this._deselectOthers(templateInfo.id);
+      this.solutionItemSelect.emit({ itemId: templateInfo.id, selected: true });
+      if (isDeployed && !isActionLink) {
+        window.open(templateInfo.url, "_blank");
+      }
+    }} .value=${templateInfo.id}><div class="solution-list-item-content" slot=content><div class=${`solution-list-item-label ${isDeployed && !isActionLink ? "underline" : ""}`}>${templateInfo.title}</div><div class="solution-list-item-description">${templateInfo.snippet}</div></div>${this.itemRelationshipDependencies.length > 0 && this.itemRelationshipDependencies.some((dependency) => dependency === templateInfo.id) && html`<calcite-chip slot=actions-end icon=information scale=s .label=${this._translations?.itemDependency}>${this._translations?.itemDependency}</calcite-chip>` || ""}${isDeployed && isActionLink ? html`<div slot=actions-end><calcite-action appearance=solid icon=launch .id=${`${templateInfo.id}-launch`} @click=${() => window.open(templateInfo.url, "_blank")} text></calcite-action><calcite-tooltip overlay-positioning=fixed .referenceElement=${`${templateInfo.id}-launch`}><span>${this._translations?.openDetails}</span></calcite-tooltip></div>` : null}</calcite-list-item>`;
   }
-  _sortTemplatesByTitle(e) {
-    return e.sort((i, t) => i.title < t.title ? -1 : i.title > t.title ? 1 : 0);
+  _sortTemplatesByTitle(templateInfos) {
+    return templateInfos.sort((a, b) => {
+      if (a.title < b.title) {
+        return -1;
+      }
+      if (a.title > b.title) {
+        return 1;
+      }
+      return 0;
+    });
   }
   _sortTemplates() {
-    return this.templateInfos.sort((e, i) => {
-      const t = this._getTypeForSort(e), s = this._getTypeForSort(i), o = this._sortOrder.indexOf(t), r = this._sortOrder.indexOf(s);
-      return o - r;
+    return this.templateInfos.sort((a, b) => {
+      const aType = this._getTypeForSort(a);
+      const bType = this._getTypeForSort(b);
+      const indexA = this._sortOrder.indexOf(aType);
+      const indexB = this._sortOrder.indexOf(bType);
+      return indexA - indexB;
     });
   }
-  _getTypeForSort(e) {
-    let i = this._getTypeForDisplay(e.type, e.typeKeywords);
-    return this._sortOrder.indexOf(i) < 0 && (i = "TypeNotFound"), i;
+  _getTypeForSort(templateInfo) {
+    let updatedType = this._getTypeForDisplay(templateInfo.type, templateInfo.typeKeywords);
+    if (this._sortOrder.indexOf(updatedType) < 0) {
+      updatedType = "TypeNotFound";
+    }
+    return updatedType;
   }
-  _getTypeForDisplay(e, i) {
-    let t = e;
-    if (e === "Feature Service") {
-      const s = i.indexOf("View Service") > -1, o = i.indexOf("Table") > -1;
-      t = s && o ? "Table (hosted, view)" : o ? "Table (hosted)" : s ? "Feature Layer (hosted, view)" : "Feature Layer (hosted)";
+  _getTypeForDisplay(type, typeKeywords) {
+    let _type = type;
+    if (type === "Feature Service") {
+      const isView = typeKeywords.indexOf("View Service") > -1;
+      const isTable = typeKeywords.indexOf("Table") > -1;
+      _type = isView && isTable ? "Table (hosted, view)" : isTable ? "Table (hosted)" : isView ? "Feature Layer (hosted, view)" : "Feature Layer (hosted)";
+    }
+    if (type === "Web Mapping Application") {
+      _type = typeKeywords.indexOf("configurableApp") > -1 ? "Instant App" : _type;
     }
-    return e === "Web Mapping Application" && (t = i.indexOf("configurableApp") > -1 ? "Instant App" : t), t = e === "Geoprocessing Service" ? "Tool" : t, t = e === "Feed" ? "Feed (hosted)" : t, t = e === "Real Time Analytic" ? "Real Time Analytic (hosted)" : t, t = e === "Big Data Analytic" ? "Big Data Analytic (hosted)" : t, t = e === "Vector Tile Service" ? "Tile Layer" : t, t;
+    _type = type === "Geoprocessing Service" ? "Tool" : _type;
+    _type = type === "Feed" ? "Feed (hosted)" : _type;
+    _type = type === "Real Time Analytic" ? "Real Time Analytic (hosted)" : _type;
+    _type = type === "Big Data Analytic" ? "Big Data Analytic (hosted)" : _type;
+    _type = type === "Vector Tile Service" ? "Tile Layer" : _type;
+    return _type;
   }
 }
-c("solution-item-accordion", u);
+customElement("solution-item-accordion", SolutionItemAccordion);
 export {
-  u as SolutionItemAccordion
+  SolutionItemAccordion
 };
+//# sourceMappingURL=customElement.js.map

package/dist/components/solution-item-accordion/customElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/solution-item-accordion/solution-item-accordion.tsx"],"sourcesContent":["/**\r\n * @license\r\n * Copyright 2025 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the 'License');\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n *    http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an 'AS IS' BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\nimport type T9nStrings from './assets/t9n/messages.en.json';\r\nimport type {\r\n  ISolutionItemHover,\r\n  ISolutionItemSelected,\r\n  ISolutionTypeHover,\r\n  ITemplateInfo\r\n} from '../../utils/interfaces';\r\nimport { useT9n } from '../../controllers/useT9n';\r\nimport type { PropertyValues } from 'lit';\r\nimport {\r\n  LitElement,\r\n  property,\r\n  createEvent,\r\n  Fragment,\r\n  h,\r\n  method,\r\n  state,\r\n} from '@arcgis/lumina';\r\nimport type {\r\n  JsxNode,\r\n  ToElement,\r\n} from '@arcgis/lumina';\r\nimport { styles } from './solution-item-accordion.css';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'solution-item-accordion': SolutionItemAccordion;\r\n  }\r\n}\r\n\r\n// TODO this should be removed after initial dev cycle\r\n// https://devtopia.esri.com/WebGIS/solution-deployment-apps/issues/431\r\n\r\nexport class SolutionItemAccordion extends LitElement {\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Overrides (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  static override styles = styles;\r\n\r\n  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */\r\n  override willUpdate(changes: PropertyValues<this>): void {\r\n    /* TODO: [MIGRATION] First time Lit calls willUpdate(), changes will include not just properties provided by the user, but also any default values your component set.\r\n    To account for this semantics change, the checks for (this.hasUpdated || value != defaultValue) was added in this method\r\n    Please refactor your code to reduce the need for this check.\r\n    Docs: https://qawebgis.esri.com/components/lumina/transition-from-stencil#watching-for-property-changes */\r\n\r\n    if (changes.has('templateInfos') && (this.hasUpdated || this.templateInfos?.length > 0)) {\r\n      void this.templateInfosWatchHandler();\r\n    }\r\n  }\r\n\r\n  override el!: ToElement<this> & { childElem?: HTMLElement };\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** string[]: List of items that have relationship dependencies outside of this solution */\r\n  @property() itemRelationshipDependencies: string[] = [];\r\n\r\n  /** 'action' | 'item': Specifies the type of link that will be used for deployed items.\r\n   *    'item' the items title will be underlined and clicking anywhere on the list item will open the items details page\r\n   *    'action' a action will be added to the end of the list item that will open the items details page\r\n   */\r\n  @property() linkType: 'action' | 'item' = 'item';\r\n\r\n  /**\r\n   * Specifies the selection mode of the item-type lists used in the component, where:\r\n   *   'multiple' allows any number of selections,\r\n   *   'single' allows only one selection,\r\n   *   'single-persist' allows one selection and prevents de-selection, and\r\n   *   'none' does not allow any selections (default)\r\n   */\r\n  @property() listSelectionMode: 'multiple' | 'single' | 'single-persist' | 'none' = 'none';\r\n\r\n  /** ITemplateInfo[]: Collection of template infos */\r\n  @property() templateInfos: ITemplateInfo[] = [];\r\n\r\n  /** string[]: Collection of the solutions typeKeywords */\r\n  @property() typeKeywords: string[] = [];\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  State (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** ITemplateInfo[]: Collection of sorted template infos */\r\n  @state() _sortedTemplateInfos: ITemplateInfo[] = [];\r\n\r\n  /**\r\n   * Contains the translations for this component.\r\n   * All UI strings should be defined here.\r\n   */\r\n  @state() _translations = useT9n<typeof T9nStrings>({ name: 'solution-item-accordion', blocking: true });\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** string[]: The order we should sort templates based on */\r\n  private _sortOrder = [\r\n    'Hub Site Application',\r\n    'Hub Page',\r\n    'Web Experience',\r\n    'Instant App',\r\n    'Web Mapping Application',\r\n    'Dashboard',\r\n    'StoryMap',\r\n    'Form',\r\n    'QuickCapture Project',\r\n    'Workflow',\r\n    'Big Data Analytic (hosted)',\r\n    'Real Time Analytic (hosted)',\r\n    'Feed (hosted)',\r\n    'Tool',\r\n    'Notebook',\r\n    'Data Pipeline',\r\n    'Project Package',\r\n    'Desktop Application Template',\r\n    'TypeNotFound',\r\n    'Web Map',\r\n    'Web Scene',\r\n    'Feature Layer (hosted, view)',\r\n    'Feature Layer (hosted)',\r\n    'Table (hosted, view)',\r\n    'Table (hosted)',\r\n    'Tile Layer',\r\n    'CSV',\r\n    'Microsoft Excel',\r\n    'Microsoft Word',\r\n    'Report Template',\r\n    'Rule Package',\r\n    'Group',\r\n  ];\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Watch handlers\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  private async templateInfosWatchHandler(): Promise<void> {\r\n    this._sortedTemplateInfos = this._sortTemplates();\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Methods (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Collapses all items in the accordion. */\r\n  @method()\r\n  async collapseAll(): Promise<void> {\r\n    const items = this.el?.shadowRoot?.querySelectorAll('calcite-accordion-item');\r\n    items?.forEach(item => {\r\n      item.expanded = false;\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Deselects all items in the accordion and closes the accordion item containing it.\r\n   * Only applies when selectionMode is 'single' or 'single-persist'.\r\n   */\r\n  @method()\r\n  async deselectAll(): Promise<void> {\r\n    if (this.listSelectionMode === 'single' || this.listSelectionMode === 'single-persist') {\r\n      const items = this.el?.shadowRoot?.querySelectorAll('calcite-list-item');\r\n      items?.forEach(item => {\r\n        if (item.selected) {\r\n          item.selected = false;\r\n          (item.parentElement?.parentElement as HTMLCalciteAccordionItemElement).expanded = false;\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Selects an item in the accordion and expands the accordion item containing it.\r\n   * Only applies when selectionMode is 'single' or 'single-persist'.\r\n   *\r\n   * @param id the id of the item to select\r\n   */\r\n  @method()\r\n  async selectItem(\r\n    id: string\r\n  ): Promise<void> {\r\n    if (this.listSelectionMode === 'single' || this.listSelectionMode === 'single-persist') {\r\n      const items = this.el?.shadowRoot?.querySelectorAll('calcite-list-item');\r\n      items?.forEach(item => {\r\n        if (item.id === id) {\r\n          item.selected = true;\r\n          (item.parentElement?.parentElement as HTMLCalciteAccordionItemElement).expanded = true;\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n\r\n  /**\r\n   * Selects the first item in the accordion and expands the accordion item containing it.\r\n   */\r\n  @method()\r\n  async selectFirstItem(): Promise<void> {\r\n    const items = this.el?.shadowRoot?.querySelectorAll('calcite-list-item');\r\n    if (items?.length) {\r\n      items[0].selected = true;\r\n      (items[0].parentElement?.parentElement as HTMLCalciteAccordionItemElement).expanded = true;\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Selects items in the accordion and expands the accordion item containing it.\r\n   * Only applies when selectionMode is 'multiple'.\r\n   *\r\n   * @param id the id of the item to select\r\n   */\r\n  @method()\r\n  async selectItems(\r\n    ids: string[]\r\n  ): Promise<void> {\r\n    if (this.listSelectionMode === 'multiple') {\r\n      const items = this.el?.shadowRoot?.querySelectorAll('calcite-list-item');\r\n      items?.forEach(item => {\r\n        if (ids.indexOf(item.id) > -1) {\r\n          item.selected = true;\r\n          (item.parentElement?.parentElement as HTMLCalciteAccordionItemElement).expanded = true;\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  solutionItemHover = createEvent<ISolutionItemHover>();\r\n\r\n  solutionItemSelect = createEvent<ISolutionItemSelected>();\r\n\r\n  solutionTypeHover = createEvent<ISolutionTypeHover>();\r\n\r\n  /** Called once just after the component is first connected to the DOM. */\r\n  async load(): Promise<void> {\r\n    this._sortedTemplateInfos = this._sortTemplates();\r\n  }\r\n\r\n  /** Renders the component. */\r\n  override render(): JsxNode {\r\n    return <>{this._getAccordion()}</>;\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Deselect all items in the accordion except the one with the provided id.\r\n   * Only applies when selectionMode is 'single' or 'single-persist'.\r\n   *\r\n   * @param id the id of the item to keep selected\r\n   * @private\r\n   */\r\n  private _deselectOthers(id: string): void {\r\n    if (this.listSelectionMode === 'single' || this.listSelectionMode === 'single-persist') {\r\n      const items = this.el?.shadowRoot?.querySelectorAll('calcite-list-item');\r\n      items?.forEach(item => {\r\n        if (item.id !== id) {\r\n          item.selected = false;\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Get the Accordion component\r\n   *\r\n   * @returns the Accordion component\r\n   * @private\r\n   */\r\n  private _getAccordion(): JsxNode {\r\n    const types: string[] = [];\r\n    const accordion = this._sortedTemplateInfos.reduce((prev, cur) => {\r\n      const displayType = this._getTypeForDisplay(cur.type, cur.typeKeywords);\r\n\r\n      if (types.indexOf(displayType) < 0) {\r\n        types.push(displayType);\r\n        prev.push(this._getAccordionItem(cur));\r\n      }\r\n      return prev;\r\n    }, [] as JsxNode[]);\r\n\r\n    return (\r\n      <calcite-accordion\r\n        class='border-override'\r\n        selectionMode='single'\r\n      >\r\n        {accordion}\r\n      </calcite-accordion>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Get the Accordion Item component with the appropriate icon and template type\r\n   * Only one accordion item per type.\r\n   *\r\n   * @param templateInfo the current templateInfo to handle\r\n   * @returns the Accordion Item component\r\n   * @private\r\n   */\r\n  private _getAccordionItem(templateInfo: ITemplateInfo): JsxNode {\r\n    const _type = this._getTypeForDisplay(templateInfo.type, templateInfo.typeKeywords);\r\n    const templateInfos = this._sortedTemplateInfos.filter(t => {\r\n      const tType = this._getTypeForDisplay(t.type, t.typeKeywords);\r\n      return tType === _type;\r\n    });\r\n    return (\r\n      <calcite-accordion-item\r\n        description={`${_type} (${templateInfos.length})`}\r\n        onMouseEnter={() => this.solutionTypeHover.emit({ itemType: _type, entering: true })}\r\n        onMouseLeave={() => this.solutionTypeHover.emit({ itemType: _type, entering: false })}\r\n      >\r\n        <solution-item-icon\r\n          class='padding-start-1 display-flex align-center'\r\n          slot='actions-start'\r\n          type={templateInfo.type}\r\n          typeKeywords={templateInfo.typeKeywords}\r\n        />\r\n        {this._getList(templateInfos)}\r\n      </calcite-accordion-item>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Get the list of template infos for the current type\r\n   *\r\n   * @param templateInfos filtered list of templateInfos for the current type\r\n   * @returns the List component\r\n   * @private\r\n   */\r\n  private _getList(templateInfos: ITemplateInfo[]): JsxNode {\r\n    const sortedTemplateInfos = this._sortTemplatesByTitle(templateInfos);\r\n    return (\r\n      <calcite-list\r\n        label={this._translations.solutionsTemplates}\r\n        selectionAppearance='border'\r\n        selectionMode={this.listSelectionMode}\r\n      >\r\n        {sortedTemplateInfos.map(t => this._getListItem(t))}\r\n      </calcite-list>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Get list item for the current type\r\n   *\r\n   * @param templateInfo the current templateInfo to handle\r\n   * @returns the List item component\r\n   * @private\r\n   */\r\n  private _getListItem(templateInfo: ITemplateInfo): JsxNode {\r\n    const isDeployed = this.typeKeywords.includes('Deployed') && templateInfo.url;\r\n    const isActionLink = this.linkType === 'action';\r\n    return (\r\n      <calcite-list-item\r\n        id={templateInfo.id}\r\n        onMouseEnter={() => this.solutionItemHover.emit({ itemId: templateInfo.id, entering: true })}\r\n        onMouseLeave={() => this.solutionItemHover.emit({ itemId: templateInfo.id, entering: false })}\r\n        oncalciteListItemSelect={() => {\r\n          this._deselectOthers(templateInfo.id);\r\n          this.solutionItemSelect.emit({ itemId: templateInfo.id, selected: true });\r\n          if (isDeployed && !isActionLink) {\r\n            window.open(templateInfo.url, '_blank');\r\n          }\r\n        }}\r\n        value={templateInfo.id}\r\n      >\r\n        <div\r\n          class='solution-list-item-content'\r\n          slot='content'\r\n        >\r\n          <div class={`solution-list-item-label ${isDeployed && !isActionLink ? 'underline' : ''}`}>\r\n            {templateInfo.title}\r\n          </div>\r\n          <div class='solution-list-item-description'>\r\n            {templateInfo.snippet}\r\n          </div>\r\n        </div>\r\n        {this.itemRelationshipDependencies.length > 0 &&\r\n          this.itemRelationshipDependencies.some((dependency) => dependency === templateInfo.id) &&\r\n          <calcite-chip\r\n            slot='actions-end'\r\n            icon='information'\r\n            scale='s'\r\n            label={this._translations?.itemDependency}\r\n          >\r\n            {this._translations?.itemDependency}\r\n          </calcite-chip>\r\n        }\r\n        {isDeployed && isActionLink ? (\r\n          <div slot='actions-end'>\r\n            <calcite-action\r\n              appearance='solid'\r\n              icon='launch'\r\n              id={`${templateInfo.id}-launch`}\r\n              onClick={() => window.open(templateInfo.url, '_blank')}\r\n              text=''\r\n            />\r\n            <calcite-tooltip\r\n              overlayPositioning='fixed'\r\n              referenceElement={`${templateInfo.id}-launch`}\r\n            >\r\n              <span>\r\n                {this._translations?.openDetails}\r\n              </span>\r\n            </calcite-tooltip>\r\n          </div>\r\n        ) : null}\r\n      </calcite-list-item>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Sort the templates based on the title\r\n   *\r\n   * @returns the sorted templates\r\n   * @private\r\n   */\r\n  private _sortTemplatesByTitle(templateInfos: ITemplateInfo[]): ITemplateInfo[] {\r\n    return templateInfos.sort((a, b) => {\r\n      if (a.title < b.title) {\r\n        return -1;\r\n      }\r\n      if (a.title > b.title) {\r\n        return 1;\r\n      }\r\n      return 0;\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Sort the templates based on the defined order in _sortOrder\r\n   *\r\n   * @returns the sorted templates\r\n   * @private\r\n   */\r\n  private _sortTemplates(): ITemplateInfo[] {\r\n    return this.templateInfos.sort((a, b) => {\r\n      const aType = this._getTypeForSort(a);\r\n      const bType = this._getTypeForSort(b);\r\n\r\n      const indexA = this._sortOrder.indexOf(aType);\r\n      const indexB = this._sortOrder.indexOf(bType);\r\n\r\n      return indexA - indexB;\r\n    });\r\n  }\r\n\r\n  /**\r\n   * This function will update the type value to match how we would like it sorted.\r\n   *\r\n   * @param templateInfo\r\n   * @returns the sorted templates\r\n   * @private\r\n   */\r\n  private _getTypeForSort(templateInfo: ITemplateInfo): string {\r\n    let updatedType = this._getTypeForDisplay(templateInfo.type, templateInfo.typeKeywords);\r\n\r\n    if (this._sortOrder.indexOf(updatedType) < 0) {\r\n      // If we encounter an item type that is not in the list\r\n      // put it between the 'Desktop Application Template' and 'Web Map' section\r\n      updatedType = 'TypeNotFound';\r\n    }\r\n\r\n    return updatedType;\r\n  }\r\n\r\n  /**\r\n   * This function will update the type value to match how we would like it displayed.\r\n   *\r\n   * @param type the current item type\r\n   * @param typeKeywords the type keywords for the current item\r\n   * @returns the updated type value\r\n   * @private\r\n   */\r\n  private _getTypeForDisplay(type: string, typeKeywords: string[]): string {\r\n    let _type = type;\r\n    if (type === 'Feature Service') {\r\n      const isView = typeKeywords.indexOf('View Service') > -1;\r\n      const isTable = typeKeywords.indexOf('Table') > -1;\r\n      _type = isView && isTable ? 'Table (hosted, view)' : isTable ?\r\n        'Table (hosted)' : isView ? 'Feature Layer (hosted, view)' : 'Feature Layer (hosted)';\r\n    }\r\n\r\n    if (type === 'Web Mapping Application') {\r\n      _type = typeKeywords.indexOf('configurableApp') > -1 ? 'Instant App' : _type;\r\n    }\r\n\r\n    _type = type === 'Geoprocessing Service' ? 'Tool' : _type;\r\n\r\n    _type = type === 'Feed' ? 'Feed (hosted)' : _type;\r\n\r\n    _type = type === 'Real Time Analytic' ? 'Real Time Analytic (hosted)' : _type;\r\n\r\n    _type = type === 'Big Data Analytic' ? 'Big Data Analytic (hosted)' : _type;\r\n\r\n    _type = type === 'Vector Tile Service' ? 'Tile Layer' : _type;\r\n\r\n    return _type;\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}