@esri/solutions-components 1.2.0-next.57 → 1.2.0-next.59

package/dist/components/solution-deployed-card-panel/customElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/solution-deployed-card-panel/solution-deployed-card-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 {\r\n  createEvent,\r\n  Fragment,\r\n  h,\r\n  LitElement,\r\n  property,\r\n  state,\r\n} from '@arcgis/lumina';\r\nimport {\r\n  useContextConsumer,\r\n} from '@arcgis/lumina/context';\r\nimport type {\r\n  JsxNode,\r\n} from '@arcgis/lumina';\r\nimport { styles } from './solution-deployed-card-panel.css';\r\nimport {\r\n  configContext,\r\n} from '../../utils/deployAppContexts';\r\nimport type {\r\n  DeployAppTab,\r\n  IDeployCard,\r\n  INavTab,\r\n  ISolutionInfoCard,\r\n  ITemplateInfo\r\n} from '../../utils/interfaces';\r\nimport type { ITemplateInfoGraph } from '../solution-item-diagram/utils/solutionGraph';\r\nimport {\r\n  findSolutionByTypeKeywordSolutionId,\r\n  findSolutionTitleByDeployCommonId,\r\n  getSolutionVersionFromTypekeyword,\r\n} from '../../utils/cardsHelpers';\r\nimport { prepareDataForSolutionDisplay } from '../solution-item-diagram/utils/prepareDataForSolutionDisplay';\r\nimport type { User } from '@arcgis/app-components';\r\nimport { getUserIsAdmin } from '../../utils/privilegeUtils';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'solution-deployed-card-panel': SolutionDeployedCardPanel;\r\n  }\r\n}\r\n\r\n// TODO\r\n// check new version\r\n// see if we handle showing this on deploy correctly\r\n\r\nexport class SolutionDeployedCardPanel 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, 'deployedCardSelected', this._deployedCardSelected);\r\n    this.listenOn(window, 'deployAppTabSelected', this._handleDeployAppTabSelected);\r\n    this.listenOn<CustomEvent>(window, 'deployProgressEnd', () => {\r\n      this._showSuccessAlert = true;\r\n    });\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  /** Reference to the card that opened this dialog */\r\n  @property() cardRef: any | undefined;\r\n\r\n  /** Digram license key to use view the diagram */\r\n  @property() diagramKey = '';\r\n\r\n  /** boolean: when true the dialog is open */\r\n  @property() open = false;\r\n\r\n  /** ITemplateInfo[]: Collection of template infos */\r\n  @property() templateInfos: ITemplateInfo[] = [];\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  State (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** boolean: When true the solutions templateInfos are being fetched and we should show a loader */\r\n  @state() _accordionLoading = false;\r\n\r\n  /** boolean: When true the configure titles dialog is open */\r\n  @state() _configureTitlesOpen = false;\r\n\r\n  /** boolean: When true the delete dialog is open */\r\n  @state() _deleteDialogOpen = false;\r\n\r\n  /** boolean: When true a new version of the current solution is available */\r\n  @state() _hasNewVersion = false;\r\n\r\n  /** Controls whether diagram dialog is shown. */\r\n  @state() _isDiagramOpen = false;\r\n\r\n  /** boolean: When updating solution name, this is flag to check name issues */\r\n  @state() _isNameConflict = false;\r\n\r\n  /** string: Invalid name error message */\r\n  @state() _invalidNameMessage = '';\r\n\r\n  /** boolean: when true the success alert will be shown when first rendered */\r\n  @state() _showSuccessAlert = false;\r\n\r\n  /** boolean: When true a failure alert will be shown based on the defined _failedType private prop */\r\n  @state() _showFailedAlert = false;\r\n\r\n  /** boolean: When true a loading indicator will be shown until the update call is complete */\r\n  @state() _showItemUpdateLoading = false;\r\n\r\n  /** The templates to send to the diagram for viewing. */\r\n  @state() _templateInfoGraph: ITemplateInfoGraph[] = [];\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-deployed-card-panel', blocking: true });\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Key details such as portalUrl, locale, etc from the current config */\r\n  private _configContextConsumer = useContextConsumer({\r\n    context: configContext,\r\n    subscribe: true,\r\n    callback: async (evt) => {\r\n      if (evt) {\r\n        this._isOrgAdmin = evt.authentication?.PortalUserSubset?.role === 'org_admin' || getUserIsAdmin(evt.authentication!);\r\n        this._user = evt.authentication?.Portal?.user;\r\n      }\r\n    }\r\n  });\r\n\r\n  /** Used to store if logged on user is an admin */\r\n  private _isOrgAdmin = false;\r\n\r\n  private _user: __esri.PortalUser | null | undefined;\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  /** Tab selected event */\r\n  navTabSelected = createEvent<INavTab>();\r\n\r\n  /** Emitted on demand when the sort type changes */\r\n  sortTypeChanged = createEvent<string>();\r\n\r\n  /**\r\n   * This event will be emitted when this dialog is closed.\r\n   * When the emitted value is true the solution has been updated and needs to be fetched again\r\n   */\r\n  solutionConfigureDialogClose = createEvent<boolean>();\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (lifecycle)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Renders the component. */\r\n  override render(): JsxNode {\r\n    return (\r\n      <calcite-shell class='position-relative background-color-2'>\r\n        <calcite-panel\r\n          class='padding-end-xxl panel-background-2 border-none'\r\n          slot='panel-bottom'\r\n        >\r\n          <div class='display-flex flex-direction-column overflow-hidden'>\r\n            <div class='background-color-2 padding-top-xxl'>\r\n              {this._getSolutionPanel()}\r\n            </div>\r\n            {this._getSolutionContents()}\r\n          </div>\r\n        </calcite-panel>\r\n        <calcite-shell-panel\r\n          class='panel-background-1'\r\n          slot='panel-end'\r\n        >\r\n          {this._getButtons()}\r\n          {this._getOwnerSection()}\r\n          <div class='bottom-border margin-start-end-xxl' />\r\n          {this._getSolutionVersionCard()}\r\n        </calcite-shell-panel>\r\n        {this._renderDiagramDialog()}\r\n        {this._getConfigureTitlesDialog()}\r\n        {this._getDeleteDialog()}\r\n        {this._getSuccessDeployAlert()}\r\n      </calcite-shell>\r\n    );\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Set the current card based on the event emitted from the solution-details-card */\r\n  private async _deployedCardSelected(\r\n    evt: CustomEvent\r\n  ): Promise<void> {\r\n    const deployedCard = evt.detail as IDeployCard;\r\n    this.card = deployedCard.card;\r\n    this.cardRef = deployedCard.cardRef;\r\n    this.templateInfos = [];\r\n\r\n    this._accordionLoading = true;\r\n    this.templateInfos = this.cardRef ? await this.cardRef.getTemplates() :\r\n      await prepareDataForSolutionDisplay(this.card.id, this._configContextConsumer.value!.userSession);\r\n    this._accordionLoading = false;\r\n\r\n    const sourceSolutionCard = findSolutionByTypeKeywordSolutionId(\r\n      this._configContextConsumer.value?.allCards || [],\r\n      this.card.deployCommonId\r\n    );\r\n\r\n    let hasNewVersion = false;\r\n    if (sourceSolutionCard) {\r\n      const sourceVersion = getSolutionVersionFromTypekeyword(sourceSolutionCard);\r\n      const deployedVersion = getSolutionVersionFromTypekeyword(this.card);\r\n      hasNewVersion = sourceVersion > deployedVersion;\r\n    }\r\n    this._hasNewVersion = hasNewVersion;\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    // TODO not sure if this is necessary\r\n    if (activeTab === 'deployed-card') {\r\n      this.sortTypeChanged.emit('');\r\n    }\r\n  }\r\n\r\n  /** Get the buttons section */\r\n  private _getButtons(): JsxNode {\r\n    const userName = this._configContextConsumer.value?.userSession?.username;\r\n    const canEditTitles = this.card?.owner === userName || this._isOrgAdmin;\r\n    const editTitlesTooltipClass = canEditTitles ? 'display-none' : '';\r\n    return (\r\n      <div class='display-flex flex-direction-column padding-xxl'>\r\n        <calcite-button\r\n          appearance='outline'\r\n          class='padding-bottom-lg'\r\n          iconStart='model'\r\n          kind='neutral'\r\n          onClick={this._openDiagram}\r\n        >\r\n          {this._translations.viewTheDiagram}\r\n        </calcite-button>\r\n        <calcite-button\r\n          appearance='outline'\r\n          class='padding-bottom-lg'\r\n          disabled={!canEditTitles}\r\n          iconStart='edit-attributes'\r\n          id='solution-configure-titles-button'\r\n          kind='neutral'\r\n          onClick={this._openConfigureTitlesDialog}\r\n        >\r\n          {this._translations.updateTitles}\r\n        </calcite-button>\r\n        <calcite-tooltip\r\n          class={editTitlesTooltipClass}\r\n          overlayPositioning='fixed'\r\n          reference-element='solution-configure-titles-button'\r\n        >\r\n          <span>\r\n            {this._translations.mustOwnSolution}\r\n          </span>\r\n        </calcite-tooltip>\r\n        <calcite-button\r\n          appearance='outline'\r\n          class='padding-bottom-lg'\r\n          iconStart='file-text'\r\n          kind='neutral'\r\n          onClick={this._viewDocumentation}\r\n        >\r\n          {this._translations.solutionDocumentation}\r\n        </calcite-button>\r\n        <calcite-button\r\n          appearance='outline'\r\n          class='padding-bottom-lg'\r\n          iconStart='launch'\r\n          kind='neutral'\r\n          onClick={this._openItemDetails}\r\n        >\r\n          {this._translations.itemDetails}\r\n        </calcite-button>\r\n        <calcite-button\r\n          appearance='outline'\r\n          class='padding-bottom-lg'\r\n          iconStart='trash'\r\n          kind='neutral'\r\n          onClick={this._deleteSolution}\r\n        >\r\n          {this._translations.deleteSolution}\r\n        </calcite-button>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /** Open the configure titles dialog */\r\n  private _openConfigureTitlesDialog(): void {\r\n    this._configureTitlesOpen = true;\r\n  }\r\n\r\n  /** Get the dialog that will allow users to change item titles */\r\n  private _getConfigureTitlesDialog(): JsxNode {\r\n    return this._configureTitlesOpen ? (\r\n      <solution-configure-titles\r\n        card={this.card}\r\n        onsolutionConfigureTitlesBeforeClose={() => {\r\n          this._configureTitlesOpen = false;\r\n        }}\r\n        onsolutionItemsTitlesChanged={async () => {\r\n          this.templateInfos = await this.cardRef.getTemplates();\r\n        }}\r\n        open={this._configureTitlesOpen}\r\n        templateInfos={this.templateInfos}\r\n      />\r\n    ) : (<></>);\r\n  }\r\n\r\n  /** View the solution diagram */\r\n  private _viewDocumentation(\r\n    evt: MouseEvent\r\n  ): void {\r\n    evt.stopPropagation();\r\n    window.open(this.card!.learnMoreUrl, '_blank');\r\n  }\r\n\r\n  /** Open a new window that will show the item details page for the solution */\r\n  private _openItemDetails(\r\n    evt: MouseEvent\r\n  ): void {\r\n    evt.stopPropagation();\r\n    window.open(this.card!.itemUrl, '_blank');\r\n  }\r\n\r\n  /** Get the owner section */\r\n  private _getOwnerSection(): JsxNode {\r\n    if(!this._configContextConsumer?.value) {\r\n      return;\r\n    }\r\n\r\n    return (\r\n      <div\r\n        class='display-flex padding-bottom-xxl margin-start-end-xxl flex-direction-column'\r\n      >\r\n        <div class='display-flex justify-between items-baseline'>\r\n          <calcite-label\r\n            class='font-weight-med label-override'\r\n            layout='inline'\r\n            scale='l'\r\n          >\r\n            {this._translations.aboutYourSolutionOwner}\r\n          </calcite-label>\r\n          <calcite-button\r\n            appearance='transparent'\r\n            kind='neutral'\r\n            icon-start='pencil'\r\n            onClick={() => { }}\r\n          >\r\n            {this._translations.editSolutionOwner}\r\n          </calcite-button>\r\n        </div>\r\n        <arcgis-user-popup\r\n          api={4}\r\n          appearance='outline'\r\n          baseUrl={this._configContextConsumer?.value?.authentication?.IsEnterprisePortal ?\r\n            this._configContextConsumer?.value?.orgUrl :\r\n            this._configContextConsumer?.value?.orgUrl + '/home/'}\r\n          class='padding-top-lg'\r\n          key={this.card?.owner}\r\n          portal={this._configContextConsumer?.value?.authentication?.Portal}\r\n          scale={'l'}\r\n          showAvatar\r\n          showName\r\n          showUsername\r\n          underline\r\n          user={this._user?.username === this.card?.owner ? this._user as User : undefined}\r\n          username={this.card?.owner}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Hide the current configure dialog and open the diagram dialog\r\n   * Leverage the logic that is already built into the card for opening of the diagram\r\n  */\r\n  private async _openDiagram(\r\n    evt: MouseEvent\r\n  ): Promise<void> {\r\n    evt.stopPropagation();\r\n    if (this.cardRef) {\r\n      this._templateInfoGraph = await this.cardRef.getTemplates(); // await this._processTemplates(this.card);\r\n      this._isDiagramOpen = true;\r\n    }\r\n  }\r\n\r\n  /** The card that will show details about the solution version  */\r\n  private _getSolutionVersionCard(): JsxNode {\r\n    const versionString = this._hasNewVersion ?\r\n      this._translations.newVersionAvailable : this._translations.youHaveTheLatestVersion;\r\n    return (\r\n      <div class='padding-xxl display-flex flex-direction-column'>\r\n        <calcite-label\r\n          class='font-weight-med label-override'\r\n          layout='inline'\r\n          scale='l'\r\n          slot='heading'\r\n        >\r\n          {this._translations.solutionVersion}\r\n        </calcite-label>\r\n        <div class='display-flex'>\r\n          <div class='display-flex flex-direction-row padding-top-lg align-items-center'>\r\n            <calcite-icon\r\n              class='icon-color'\r\n              icon={'clock-forward'}\r\n              scale='m' />\r\n            <div class='display-flex flex-direction-column padding-start-xxl'>\r\n              <span class='font-weight-bold font-color-1'>\r\n                {this.card?.deployVersion}\r\n              </span>\r\n              <span>\r\n                {versionString}\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        {\r\n          this._hasNewVersion ? (\r\n            <calcite-button\r\n              appearance='outline'\r\n              class='padding-top-lg'\r\n              kind='neutral'\r\n              onClick={this._openNewVersionSolution}\r\n              width='full'\r\n            >\r\n              {this._translations.viewNewVersion}\r\n            </calcite-button>\r\n          ) : (\r\n            <></>\r\n          )\r\n        }\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /** Open a new window that will show the item details page for the solution with the newer version */\r\n  private _openNewVersionSolution(evt: MouseEvent): void {\r\n    evt.stopPropagation();\r\n    const title = findSolutionTitleByDeployCommonId(\r\n      this._configContextConsumer.value!.allCards,\r\n      this.card!.deployCommonId\r\n    );\r\n    const url = window.location.href;\r\n    if (title) {\r\n      window.open(url.replace(/deployments\\/.+/, title), '_self');\r\n    }\r\n  }\r\n\r\n  /**\r\n   * The card that will allow you to edit the name, summary, or owner and\r\n   * optionally see the item details or delete the solution\r\n   */\r\n  private _getSolutionPanel(): JsxNode {\r\n    const thumbnailUrl = this.card?.thumbnailUrl.replace(/w=\\d+/, 'w=400');\r\n    const userSession = this._configContextConsumer.value?.userSession;\r\n    return (\r\n      <calcite-panel class='font-size-override panel-background-1'>\r\n        <div class='display-flex flex-direction-row'>\r\n          <div class='image-width margin-xl'>\r\n            <img\r\n              alt={this.card?.title}\r\n              src={thumbnailUrl ? `${thumbnailUrl}&token=${userSession?.token}` : ''}\r\n            />\r\n          </div>\r\n          <div class='display-flex flex-direction-column'>\r\n            <h1\r\n              class='title-font margin-block-start-end-0 padding-end-xxl padding-start-sm padding-top-xxl padding-bottom-xxl line-height-1'\r\n            >\r\n              {this.card?.title}\r\n            </h1>\r\n            <div class='display-flex flex-direction-column padding-bottom-xxl padding-start-sm'>\r\n              <div class='display-flex align-items-start padding-bottom-xxl'>\r\n                <calcite-label\r\n                  class='font-1 padding-end-xxl'\r\n                  scale='l'\r\n                >\r\n                  {this.card?.snippet}\r\n                </calcite-label>\r\n              </div>\r\n              <div class='display-flex'>\r\n                <div class='display-flex'>\r\n                  <calcite-label\r\n                    class='label-override icon-color'\r\n                    layout='inline'\r\n                  >\r\n                    <calcite-icon\r\n                      class='icon-color'\r\n                      icon='projects'\r\n                      scale='s'\r\n                    />\r\n                    {this._translations.aboutYourSolutionDeployedDate.replace('{{deployedDate}}', this.card?.created || '')}\r\n                  </calcite-label>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </calcite-panel>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * This node will display the number of items in the solution and a solution accordion\r\n   * that will provide access to each of the items in the solution.\r\n   * This node also supports the ability to change the titles of the items in the solution.\r\n   */\r\n  private _getSolutionContents(): JsxNode {\r\n    return (\r\n      <calcite-panel class='panel-background-1 padding-top-xxl'>\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          >\r\n            <div\r\n              class='margin-block-start-end-0 heading-font '\r\n              slot='content-start'\r\n            >\r\n              {this._translations.solutionsContentsAndCount.replace('{{numberOfSolutions}}', this.templateInfos.length.toString())}\r\n            </div>\r\n            <div class='overflow-auto'>\r\n              {this._accordionLoading ? (\r\n                <calcite-loader\r\n                  label={this._translations.loadingText}\r\n                  scale='m'\r\n                />\r\n              ) : (\r\n                <solution-item-accordion\r\n                  listSelectionMode='single'\r\n                  templateInfos={this.templateInfos}\r\n                  typeKeywords={this.card?.typeKeywords}\r\n                />\r\n              )}\r\n            </div>\r\n          </calcite-accordion-item>\r\n        </calcite-accordion>\r\n      </calcite-panel>\r\n    );\r\n  }\r\n\r\n  /** Get the dialog that will allow users to delete the solution */\r\n  private _getDeleteDialog(): JsxNode {\r\n    return this._deleteDialogOpen ? (\r\n      <solution-delete-dialog\r\n        card={this.card}\r\n        onsolutionDeleted={() => setTimeout(() => this.navTabSelected.emit({ tabType: 'deployments' }), 100)}\r\n        onsolutionDeleteDialogBeforeClose={() => {\r\n          this._deleteDialogOpen = false;\r\n        }}\r\n        open={this._deleteDialogOpen}\r\n      // templateInfos={this.templateInfos} could this speed things up...seems like these don't have to be fetched every time\r\n      />\r\n    ) : (<></>);\r\n  }\r\n\r\n  /** Get the alert that will display on successful deployment */\r\n  private _getSuccessDeployAlert(): JsxNode {\r\n    return <calcite-alert\r\n      autoClose\r\n      autoCloseDuration='fast'\r\n      icon='check-circle'\r\n      kind='success'\r\n      label={this._translations.deploySuccessAlert.replace('{{solutionTitle}}', this.card?.title ?? '')}\r\n      open={this._showSuccessAlert}\r\n      oncalciteAlertClose={() => { this._showSuccessAlert = false; }}\r\n    >\r\n      <div slot='title'>\r\n        {this._translations.deploySuccessAlert.replace('{{solutionTitle}}', this.card?.title ?? '')}\r\n      </div>\r\n    </calcite-alert>\r\n  }\r\n\r\n  /** Renders the dialog to show and view the solution diagram */\r\n  private _renderDiagramDialog(): JsxNode {\r\n    return this._isDiagramOpen ? (\r\n      <calcite-dialog\r\n        class='dialog-y-size dialog-x-size panel-bg-color'\r\n        heading={this._translations.diagramOfTheSolution.replace('{{solution}}', this.card?.title ?? '')}\r\n        id={this._translations.diagramOfTheSolution.replace('{{solution}}', this.card?.title ?? '')}\r\n        modal\r\n        open={this._isDiagramOpen}\r\n        oncalciteDialogClose={() => { this._isDiagramOpen = false }}\r\n        outsideCloseDisabled\r\n        scale='m'\r\n        width='l'\r\n      >\r\n        <solution-item-diagram\r\n          diagramKey={this.diagramKey !== '' ? this.diagramKey : this._configContextConsumer.value?.diagramKey ?? ''}\r\n          templateInfoGraph={this._templateInfoGraph}\r\n          typeKeywords={this.card?.typeKeywords}\r\n        />\r\n      </calcite-dialog>\r\n    ) : (<></>);\r\n  }\r\n\r\n  /**\r\n   * Hide the current configure dialog and open the delete dialog\r\n   * Leverage the logic that is already built into the card for opening of the delete\r\n  */\r\n  private async _deleteSolution(): Promise<void> {\r\n    this._deleteDialogOpen = true;\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEM,MAAO,kCAAkC,WAAU;AAAA,EAUvD,cAAA;AACE,UAAA;AAqBU,SAAA,aAAa;AAGb,SAAA,OAAO;AAGP,SAAA,gBAAiC,CAAA;AASpC,SAAA,oBAAoB;AAGpB,SAAA,uBAAuB;AAGvB,SAAA,oBAAoB;AAGpB,SAAA,iBAAiB;AAGjB,SAAA,iBAAiB;AAGjB,SAAA,kBAAkB;AAGlB,SAAA,sBAAsB;AAGtB,SAAA,oBAAoB;AAGpB,SAAA,mBAAmB;AAGnB,SAAA,yBAAyB;AAGzB,SAAA,qBAA2C,CAAA;AAM3C,SAAA,gBAAgB,OAA0B,EAAE,MAAM,gCAAgC,UAAU,MAAM;AAS3G,SAAQ,yBAAyB,mBAAmB;AAAA,MAClD,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU,OAAO,QAAO;AACtB,YAAI,KAAK;AACP,eAAK,cAAc,IAAI,gBAAgB,kBAAkB,SAAS,eAAe,eAAe,IAAI,cAAe;AACnH,eAAK,QAAQ,IAAI,gBAAgB,QAAQ;AAAA,QAC3C;AAAA,MACF;AAAA,IAAA,CACD;AAGD,SAAQ,cAAc;AAuBtB,SAAA,iBAAiB,YAAA;AAGjB,SAAA,kBAAkB,YAAA;AAMlB,SAAA,+BAA+B,YAAA;AA5H7B,SAAK,SAAsB,QAAQ,wBAAwB,KAAK,qBAAqB;AACrF,SAAK,SAAS,QAAQ,wBAAwB,KAAK,2BAA2B;AAC9E,SAAK,SAAsB,QAAQ,qBAAqB,MAAK;AAC3D,WAAK,oBAAoB;AAAA,IAC3B,CAAC;AAAA,EACH;AAAA;;;EATA,OAAA;AAAA,SAAgB,SAAS;AAAA,EAAA;AAAA,EAyIhB,SAAiB;AACxB,WAAO,2QAQI,KAAK,kBAAA,CAAmB,SAE1B,KAAK,qBAAA,CAAsB,wFAO7B,KAAK,YAAA,CAAa,GAClB,KAAK,kBAAkB,yDAEvB,KAAK,wBAAA,CAAyB,yBAEhC,KAAK,qBAAA,CAAsB,GAC3B,KAAK,0BAAA,CAA2B,GAChC,KAAK,iBAAA,CAAkB,GACvB,KAAK,wBAAwB;AAAA,EAGpC;AAAA,EASA,MAAc,sBACZ,KACc;AACd,UAAM,eAAe,IAAI;AACzB,SAAK,OAAO,aAAa;AACzB,SAAK,UAAU,aAAa;AAC5B,SAAK,gBAAgB,CAAA;AAErB,SAAK,oBAAoB;AACzB,SAAK,gBAAgB,KAAK,UAAU,MAAM,KAAK,QAAQ,aAAA,IACrD,MAAM,8BAA8B,KAAK,KAAK,IAAI,KAAK,uBAAuB,MAAO,WAAW;AAClG,SAAK,oBAAoB;AAEzB,UAAM,qBAAqB,oCACzB,KAAK,uBAAuB,OAAO,YAAY,IAC/C,KAAK,KAAK,cAAc;AAG1B,QAAI,gBAAgB;AACpB,QAAI,oBAAoB;AACtB,YAAM,gBAAgB,kCAAkC,kBAAkB;AAC1E,YAAM,kBAAkB,kCAAkC,KAAK,IAAI;AACnE,sBAAgB,gBAAgB;AAAA,IAClC;AACA,SAAK,iBAAiB;AAAA,EACxB;AAAA,EAGQ,4BACN,KACK;AACL,UAAM,YAA0B,IAAI;AAEpC,QAAI,cAAc,iBAAiB;AACjC,WAAK,gBAAgB,KAAK,EAAE;AAAA,IAC9B;AAAA,EACF;AAAA,EAGQ,cAAsB;AAC5B,UAAM,WAAW,KAAK,uBAAuB,OAAO,aAAa;AACjE,UAAM,gBAAgB,KAAK,MAAM,UAAU,YAAY,KAAK;AAC5D,UAAM,yBAAyB,gBAAgB,iBAAiB;AAChE,WAAO,qKAOQ,KAAK,YAAY,IAEzB,KAAK,cAAc,cAAc,2FAKxB,CAAC,aAAa,uFAIf,KAAK,0BAA0B,IAEvC,KAAK,cAAc,YAAY,2CAAA,aAGzB,sBAAsB,CAAA,uFAK1B,KAAK,cAAc,eAAe,kIAQ5B,KAAK,kBAAkB,IAE/B,KAAK,cAAc,qBAAqB,uHAOhC,KAAK,gBAAgB,IAE7B,KAAK,cAAc,WAAW,sHAOtB,KAAK,eAAe,IAE5B,KAAK,cAAc,cAAc;AAAA,EAI1C;AAAA,EAGQ,6BAAkC;AACxC,SAAK,uBAAuB;AAAA,EAC9B;AAAA,EAGQ,4BAAoC;AAC1C,WAAO,KAAK,uBAAuB,wCAEzB,KAAK,IAAI,wCACuB,MAAK;AACzC,WAAK,uBAAuB;AAAA,IAC9B,CAAC,gCAC6B,YAAW;AACvC,WAAK,gBAAgB,MAAM,KAAK,QAAQ,aAAA;AAAA,IAC1C,CAAC,UACK,KAAK,oBAAoB,mBAChB,KAAK,aAAa;EAGvC;AAAA,EAGQ,mBACN,KACK;AACL,QAAI,gBAAA;AACJ,WAAO,KAAK,KAAK,KAAM,cAAc,QAAQ;AAAA,EAC/C;AAAA,EAGQ,iBACN,KACK;AACL,QAAI,gBAAA;AACJ,WAAO,KAAK,KAAK,KAAM,SAAS,QAAQ;AAAA,EAC1C;AAAA,EAGQ,mBAA2B;AACjC,QAAG,CAAC,KAAK,wBAAwB,OAAO;AACtC;AAAA,IACF;AAEA,WAAO,oOAUE,KAAK,cAAc,sBAAsB,gGAMjC;IAAQ,CAAC,IAEjB,KAAK,cAAc,iBAAiB,0BAAA,MAUlC,KAAK,MAAM,mEAJP,KAAK,wBAAwB,OAAO,gBAAgB,qBAC3D,KAAK,wBAAwB,OAAO,SACpC,KAAK,wBAAwB,OAAO,SAAS,QAAQ,mCAG/C,KAAK,wBAAwB,OAAO,gBAAgB,MAAM,gEAM5D,KAAK,OAAO,aAAa,KAAK,MAAM,QAAQ,KAAK,QAAgB,MAAS,cACtE,KAAK,MAAM,KAAK,uBAAA,CAAA;AAAA,EAIlC;AAAA,EAMA,MAAc,aACZ,KACc;AACd,QAAI,gBAAA;AACJ,QAAI,KAAK,SAAS;AAChB,WAAK,qBAAqB,MAAM,KAAK,QAAQ,aAAA;AAC7C,WAAK,iBAAiB;AAAA,IACxB;AAAA,EACF;AAAA,EAGQ,0BAAkC;AACxC,UAAM,gBAAgB,KAAK,iBACzB,KAAK,cAAc,sBAAsB,KAAK,cAAc;AAC9D,uKAQO,KAAK,cAAc,eAAe,qTAU5B,KAAK,MAAM,aAAa,gBAGxB,aAAa,4BAMpB,KAAK,iBAAiB,qFAKT,KAAK,uBAAuB,eAGpC,KAAK,cAAc,cAAc,sBAElC,EAEH;AAAA,EAIT;AAAA,EAGQ,wBAAwB,KAAsB;AACpD,QAAI,gBAAA;AACJ,UAAM,QAAQ,kCACZ,KAAK,uBAAuB,MAAO,UACnC,KAAK,KAAM,cAAc;AAE3B,UAAM,MAAM,OAAO,SAAS;AAC5B,QAAI,OAAO;AACT,aAAO,KAAK,IAAI,QAAQ,mBAAmB,KAAK,GAAG,OAAO;AAAA,IAC5D;AAAA,EACF;AAAA,EAMQ,oBAA4B;AAClC,UAAM,eAAe,KAAK,MAAM,aAAa,QAAQ,SAAS,OAAO;AACrE,UAAM,cAAc,KAAK,uBAAuB,OAAO;AACvD,WAAO,6JAKQ,KAAK,MAAM,SAAK,OAAA,QAChB,eAAe,GAAG,YAAY,UAAU,aAAa,KAAK,KAAK,EAAE,4LAOrE,KAAK,MAAM,KAAK,iNAQZ,KAAK,MAAM,OAAO,kNAchB,KAAK,cAAc,8BAA8B,QAAQ,oBAAoB,KAAK,MAAM,WAAW,EAAE,CAAC;AAAA,EASzH;AAAA,EAOQ,uBAA+B;AACrC,WAAO,0RAgBI,KAAK,cAAc,0BAA0B,QAAQ,yBAAyB,KAAK,cAAc,OAAO,SAAA,CAAU,CAAC,oCAGnH,KAAK,kDAEK,KAAK,cAAc,WAAW,yGAMtB,KAAK,aAAa,kBACnB,KAAK,MAAM,YAAY,6BAExC;AAAA,EAMb;AAAA,EAGQ,mBAA2B;AACjC,WAAO,KAAK,oBAAoB,qCAEtB,KAAK,IAAI,qBACI,MAAM,WAAW,MAAM,KAAK,eAAe,KAAK,EAAE,SAAS,cAAA,CAAe,GAAG,GAAG,CAAC,qCACjE,MAAK;AACtC,WAAK,oBAAoB;AAAA,IAC3B,CAAC,UACK,KAAK,iBAAiB,+BAG5B;AAAA,EACN;AAAA,EAGQ,yBAAiC;AACvC,WAAA,gGAKS,KAAK,cAAc,mBAAmB,QAAQ,qBAAqB,KAAK,MAAM,SAAS,EAAE,CAAC,UAC3F,KAAK,iBAAiB,uBACP,MAAK;AAAG,WAAK,oBAAoB;AAAA,IAAO,CAAC,oBAG3D,KAAK,cAAc,mBAAmB,QAAQ,qBAAqB,KAAK,MAAM,SAAS,EAAE,CAAC;AAAA,EAGjG;AAAA,EAGQ,uBAA+B;AACrC,WAAO,KAAK,iBAAiB,mFAGhB,KAAK,cAAc,qBAAqB,QAAQ,gBAAgB,KAAK,MAAM,SAAS,EAAE,CAAC,OAC5F,KAAK,cAAc,qBAAqB,QAAQ,gBAAgB,KAAK,MAAM,SAAS,EAAE,KAAC,OAAA,gBAErF,KAAK,cAAc,wBACH,MAAK;AAAG,WAAK,iBAAiB;AAAA,IAAM,CAAC,8EAM7C,KAAK,eAAe,KAAK,KAAK,aAAa,KAAK,uBAAuB,OAAO,cAAc,EAAE,uBACvF,KAAK,kBAAkB,kBAC5B,KAAK,MAAM,YAAY,+CAGvC;AAAA,EACN;AAAA,EAMA,MAAc,kBAAgC;AAC5C,SAAK,oBAAoB;AAAA,EAC3B;AACD;;"}

package/dist/components/solution-deploying-dialog/customElement.js

@@ -1,13 +1,13 @@
-import { c as l } from "../../chunks/runtime.js";
-import { css as n, html as t } from "lit";
-import { keyed as c } from "lit/directives/keyed.js";
-import { u as r } from "../../chunks/useT9n.js";
-import { LitElement as h, createEvent as u } from "@arcgis/lumina";
-import { createRef as i, ref as a } from "lit-html/directives/ref.js";
 /*! 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.57 */
-const d = n`/** @license
+v1.2.0-next.59 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html } from "lit";
+import { keyed } from "lit/directives/keyed.js";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { LitElement, createEvent } from "@arcgis/lumina";
+import { createRef, ref } from "lit-html/directives/ref.js";
+const styles = css`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -21,115 +21,171 @@ const d = n`/** @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.
- */.panel-bg-white{--calcite-panel-background-color: var(--calcite-color-foreground-1)}`;
-class g extends h {
+ */
+
+.panel-bg-white {
+  --calcite-panel-background-color: var(--calcite-color-foreground-1);
+}`;
+class SolutionDeployingDialog extends LitElement {
   constructor() {
-    super(), this.deploymentProgress = 0, this.open = !1, this._isInCancelConfirmation = !1, this._showCancelConfirmation = !1, this._showIsCancelling = !1, this._translations = r({ name: "solution-deploying-dialog", blocking: !0 }), this._carouselKey = 0, this._deployingDialogRef = i(), this._carouselRef = i(), this._carouselMessages = [], this._confirmUnload = !1, this.deployingDialogOpened = u(), this.listenOn(window, "beforeunload", (e) => {
-      (this._confirmUnload || this._showIsCancelling) && (e.preventDefault(), e.returnValue = !0);
+    super();
+    this.deploymentProgress = 0;
+    this.open = false;
+    this._isInCancelConfirmation = false;
+    this._showCancelConfirmation = false;
+    this._showIsCancelling = false;
+    this._translations = useT9n({ name: "solution-deploying-dialog", blocking: true });
+    this._carouselKey = 0;
+    this._deployingDialogRef = createRef();
+    this._carouselRef = createRef();
+    this._carouselMessages = [];
+    this._confirmUnload = false;
+    this.deployingDialogOpened = createEvent();
+    this.listenOn(window, "beforeunload", (evt) => {
+      if (this._confirmUnload || this._showIsCancelling) {
+        evt.preventDefault();
+        evt.returnValue = true;
+      }
     });
   }
   static {
-    this.properties = { abortController: 0, card: 0, deploymentProgress: 9, open: 5, _isInCancelConfirmation: 16, _showCancelConfirmation: 16, _showIsCancelling: 16, _translations: 16, _carouselKey: 16 };
+    this.properties = { abortController: [0, {}, { attribute: false }], card: [0, {}, { attribute: false }], deploymentProgress: [9, {}, { type: Number }], open: [5, {}, { type: Boolean }], _isInCancelConfirmation: [16, {}, { state: true }], _showCancelConfirmation: [16, {}, { state: true }], _showIsCancelling: [16, {}, { state: true }], _translations: [16, {}, { state: true }], _carouselKey: [16, {}, { state: true }] };
   }
   static {
-    this.styles = d;
+    this.styles = styles;
   }
   close() {
-    this._showCancelConfirmation = !1, this._showIsCancelling = !1;
-    const e = this._deployingDialogRef.value;
-    e && (e.open = !1), this.open = !1;
+    this._showCancelConfirmation = false;
+    this._showIsCancelling = false;
+    const dialog = this._deployingDialogRef.value;
+    if (dialog) {
+      dialog.open = false;
+    }
+    this.open = false;
   }
   confirmCancel() {
-    const e = this._deployingDialogRef.value;
-    e && (e.open = !0, e.closeDisabled = !0, this._isInCancelConfirmation = !0, this._showIsCancelling = !1), this._showCancelConfirmation = !0;
+    const dialog = this._deployingDialogRef.value;
+    if (dialog) {
+      dialog.open = true;
+      dialog.closeDisabled = true;
+      this._isInCancelConfirmation = true;
+      this._showIsCancelling = false;
+    }
+    this._showCancelConfirmation = true;
   }
   cancelDeployment() {
-    this._isInCancelConfirmation && this.abortController && (this.abortController.abort(), this._showIsCancelling = !0, this._showCancelConfirmation = !1);
+    if (this._isInCancelConfirmation) {
+      if (this.abortController) {
+        this.abortController.abort();
+        this._showIsCancelling = true;
+        this._showCancelConfirmation = false;
+      }
+    }
   }
   async load() {
   }
   render() {
-    return t`<calcite-dialog close-disabled .heading=${this._translations.title.replace("{{solution}}", this.card?.title ?? "")} modal width=m .open=${this.open} @calciteDialogBeforeClose=${(e) => {
-      e.preventDefault(), this._confirmUnload = !1;
-    }} @calciteDialogOpen=${() => this._onDialogOpen()} outside-close-disabled ${a(this._deployingDialogRef)}>${this._showCancelConfirmation ? this.renderCancelModal() : this._showIsCancelling ? this.renderCancellingModal() : t`<calcite-panel class="panel-bg-white"><calcite-loader .label=${this._translations.deploymentInProgress} scale=l .text=${this._translations.deploymentInProgress} type=determinate-value .value=${this.deploymentProgress}></calcite-loader><div style="height: 120px; display: flex; align-items: center;">${c(this._carouselKey, t`<calcite-carousel autoplay=paused autoplay-duration=8000 .label=${this._translations.newsAndFeatures} arrow-type=inline ${a(this._carouselRef)}>${this.renderCarouselItems()}</calcite-carousel>`)}</div><calcite-button appearance=outline @click=${this.confirmCancel} slot=footer-end>${this._translations.cancel}</calcite-button></calcite-panel>`}</calcite-dialog>`;
+    return html`<calcite-dialog close-disabled .heading=${this._translations.title.replace("{{solution}}", this.card?.title ?? "")} modal width=m .open=${this.open} @calciteDialogBeforeClose=${(event) => {
+      event.preventDefault();
+      this._confirmUnload = false;
+    }} @calciteDialogOpen=${() => this._onDialogOpen()} outside-close-disabled ${ref(this._deployingDialogRef)}>${this._showCancelConfirmation ? this.renderCancelModal() : this._showIsCancelling ? this.renderCancellingModal() : html`<calcite-panel class="panel-bg-white"><calcite-loader .label=${this._translations.deploymentInProgress} scale=l .text=${this._translations.deploymentInProgress} type=determinate-value .value=${this.deploymentProgress}></calcite-loader><div style="height: 120px; display: flex; align-items: center;">${keyed(this._carouselKey, html`<calcite-carousel autoplay=paused autoplay-duration=8000 .label=${this._translations.newsAndFeatures} arrow-type=inline ${ref(this._carouselRef)}>${this.renderCarouselItems()}</calcite-carousel>`)}</div><calcite-button appearance=outline @click=${this.confirmCancel} slot=footer-end>${this._translations.cancel}</calcite-button></calcite-panel>`}</calcite-dialog>`;
   }
   renderCarouselItems() {
-    const e = [];
-    return this._carouselMessages.forEach((s, o) => {
-      e.push(t`<calcite-carousel-item .label=${`carousel-item-${o}`}><calcite-label layout=inline>${s.icon && t`<calcite-icon .icon=${s.icon} class="padding-end-0-5"></calcite-icon>` || ""}<span .innerHTML=${this._processCarouselMessage(s) ?? ""}></span></calcite-label></calcite-carousel-item>`);
-    }), e;
+    const items = [];
+    this._carouselMessages.forEach((carouselMessage, index) => {
+      items.push(html`<calcite-carousel-item .label=${`carousel-item-${index}`}><calcite-label layout=inline>${carouselMessage.icon && html`<calcite-icon .icon=${carouselMessage.icon} class="padding-end-0-5"></calcite-icon>` || ""}<span .innerHTML=${this._processCarouselMessage(carouselMessage) ?? ""}></span></calcite-label></calcite-carousel-item>`);
+    });
+    return items;
   }
   _getCarouselMessages() {
-    const e = this._translations.carousel, s = [
+    const carousel = this._translations.carousel;
+    const messages = [
       {
-        message: e.stockMessage1,
+        message: carousel.stockMessage1,
         icon: "mega-phone",
         url: "https://doc.arcgis.com/en/arcgis-solutions/latest/get-started/what-s-new-in-arcgis-solutions.htm"
       },
       {
-        message: e.stockMessage2,
+        message: carousel.stockMessage2,
         icon: "question",
         url: this.card?.learnMoreUrl
       },
       {
-        message: e.stockMessage3,
+        message: carousel.stockMessage3,
         icon: "model",
         url: void 0
       },
       {
-        message: e.stockMessage4,
+        message: carousel.stockMessage4,
         icon: "trash",
         url: void 0
       },
       {
-        message: e.stockMessage5,
+        message: carousel.stockMessage5,
         icon: "lightbulb",
         url: void 0
       },
       {
-        message: e.stockMessage6,
+        message: carousel.stockMessage6,
         icon: "information",
         url: void 0
       },
       {
-        message: e.stockMessage7,
+        message: carousel.stockMessage7,
         icon: "speech-bubbles",
         url: void 0
       },
       {
-        message: e.stockMessage8,
+        message: carousel.stockMessage8,
         icon: "information",
         url: "https://doc.arcgis.com/en/arcgis-solutions/latest/get-started/releases-and-versions.htm"
       },
       {
-        message: e.stockMessage9,
+        message: carousel.stockMessage9,
         icon: "lightbulb",
         url: "https://doc.arcgis.com/en/arcgis-solutions/latest/get-started/upgrading-an-arcgis-solution.htm"
       }
     ];
-    return s.sort(() => Math.random() - 0.5), s;
+    messages.sort(() => Math.random() - 0.5);
+    return messages;
   }
-  _processCarouselMessage(e) {
-    let s = e.message || "";
-    return s.includes("{{url}}") && e.url && (s = s.replace("{{url}}", e.url)), s;
+  _processCarouselMessage(carouselMessage) {
+    let processedMessage = carouselMessage.message || "";
+    if (processedMessage.includes("{{url}}") && carouselMessage.url) {
+      processedMessage = processedMessage.replace("{{url}}", carouselMessage.url);
+    }
+    return processedMessage;
   }
   renderCancelModal() {
-    return t`<calcite-panel class="panel-bg-white">${this._translations.deploymentCancelMessage}<calcite-button kind=brand @click=${() => {
-      const e = this._deployingDialogRef.value;
-      e && (e.closeDisabled = !1), this._isInCancelConfirmation = !1, this._showCancelConfirmation = !1;
+    return html`<calcite-panel class="panel-bg-white">${this._translations.deploymentCancelMessage}<calcite-button kind=brand @click=${() => {
+      const dialog = this._deployingDialogRef.value;
+      if (dialog) {
+        dialog.closeDisabled = false;
+      }
+      this._isInCancelConfirmation = false;
+      this._showCancelConfirmation = false;
     }} slot=footer-end>${this._translations.continueDeployment}</calcite-button><calcite-button appearance=outline @click=${this.cancelDeployment} slot=footer-end>${this._translations.cancelDeploymentButton}</calcite-button></calcite-panel>`;
   }
   renderCancellingModal() {
-    return t`<calcite-panel class="panel-bg-white"><calcite-loader .label=${this._translations.cancelCurrentDeployment} .text=${this._translations.cancelCurrentDeployment}></calcite-loader></calcite-panel>`;
+    return html`<calcite-panel class="panel-bg-white"><calcite-loader .label=${this._translations.cancelCurrentDeployment} .text=${this._translations.cancelCurrentDeployment}></calcite-loader></calcite-panel>`;
   }
   _onDialogOpen() {
-    this._confirmUnload = !0, this._carouselKey++, this._translations.carousel && (this._carouselMessages = this._getCarouselMessages()), this.deployingDialogOpened.emit(), setTimeout(() => {
-      const e = this._carouselRef.value;
-      e && e.play();
+    this._confirmUnload = true;
+    this._carouselKey++;
+    if (this._translations.carousel) {
+      this._carouselMessages = this._getCarouselMessages();
+    }
+    this.deployingDialogOpened.emit();
+    setTimeout(() => {
+      const carousel = this._carouselRef.value;
+      if (carousel) {
+        carousel.play();
+      }
     }, 100);
   }
 }
-l("solution-deploying-dialog", g);
+customElement("solution-deploying-dialog", SolutionDeployingDialog);
 export {
-  g as SolutionDeployingDialog
+  SolutionDeployingDialog
 };
+//# sourceMappingURL=customElement.js.map

package/dist/components/solution-deploying-dialog/customElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/solution-deploying-dialog/solution-deploying-dialog.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 {\r\n  createEvent,\r\n  LitElement,\r\n  h,\r\n  method,\r\n  property,\r\n  state,\r\n} from '@arcgis/lumina';\r\nimport type {\r\n  JsxNode,\r\n} from '@arcgis/lumina';\r\nimport { styles } from './solution-deploying-dialog.css';\r\nimport type {\r\n  ISolutionInfoCard,\r\n  IDeployingCarouselMessage\r\n} from '../../utils/interfaces';\r\nimport { createRef } from 'lit-html/directives/ref.js';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'solution-deploying-dialog': SolutionDeployingDialog;\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/424\r\n\r\nexport class SolutionDeployingDialog 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(window, 'beforeunload', (evt) => {\r\n      if (this._confirmUnload || this._showIsCancelling) {\r\n        evt.preventDefault();\r\n\r\n        // Included for legacy support\r\n        evt.returnValue = true;\r\n      }\r\n    });\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Abort controller to stop the deploying. Actual cancel callback is in solution-details */\r\n  @property() abortController: AbortController | undefined;\r\n\r\n  /** Key details about the solution */\r\n  @property() card: ISolutionInfoCard | undefined;\r\n\r\n  /** Percentage of completion for solution deployment */\r\n  @property() deploymentProgress = 0;\r\n\r\n  /** When true the dialog will be shown */\r\n  @property() open = false;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  State (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Control to show confirmation or to close dialog */\r\n  @state() _isInCancelConfirmation = false;\r\n\r\n  /** Control to show prompt asking to confirm the cancellation. */\r\n  @state() _showCancelConfirmation = false;\r\n\r\n  /** Control to show the cancelling loader. */\r\n  @state() _showIsCancelling = false;\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-deploying-dialog', blocking: true });\r\n\r\n  /** Force carousel recreation by updating this key when dialog opens */\r\n  @state() _carouselKey = 0;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** HTMLElement: The container div for the basemap gallery widget */\r\n  private _deployingDialogRef = createRef<HTMLCalciteDialogElement>();\r\n\r\n  /** Reference to the carousel element */\r\n  private _carouselRef = createRef<HTMLCalciteCarouselElement>();\r\n\r\n  /** Carousel messages initialized when dialog opens */\r\n  private _carouselMessages: IDeployingCarouselMessage[] = [];\r\n\r\n  /** When true the user will be asked to confirm unloading of the page */\r\n  private _confirmUnload = false;\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  /** Closes the dialog */\r\n  @method()\r\n  public close(): void {\r\n    this._showCancelConfirmation = false;\r\n    this._showIsCancelling = false;\r\n    const dialog = this._deployingDialogRef.value;\r\n    if (dialog) {\r\n      dialog.open = false;\r\n    }\r\n    this.open = false;\r\n  }\r\n\r\n  /** Confirm cancel the deployment */\r\n  @method()\r\n  public confirmCancel(): void {\r\n    const dialog = this._deployingDialogRef.value;\r\n    if (dialog) {\r\n      dialog.open = true;\r\n      dialog.closeDisabled = true;\r\n      this._isInCancelConfirmation = true;\r\n      this._showIsCancelling = false;\r\n    }\r\n    this._showCancelConfirmation = true;\r\n  }\r\n\r\n  /** Cancel the current deployment */\r\n  @method()\r\n  public cancelDeployment(): void {\r\n    if (this._isInCancelConfirmation) {\r\n      if (this.abortController) {\r\n        this.abortController.abort();\r\n        this._showIsCancelling = true;\r\n        this._showCancelConfirmation = false;\r\n      }\r\n    }\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Emitted when the deploying dialog opens */\r\n  deployingDialogOpened = createEvent<void>();\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (lifecycle)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Called once just after the component is first connected to the DOM.\r\n   *\r\n   * @returns Promise when complete\r\n   */\r\n  async load(): Promise<void> {\r\n    //TODO: query for carousel news items.\r\n  }\r\n\r\n  /** Renders the component. */\r\n  override render(): JsxNode {\r\n    return (\r\n      <calcite-dialog\r\n        closeDisabled\r\n        heading={this._translations.title.replace('{{solution}}', this.card?.title ?? '')}\r\n        modal\r\n        width='m'\r\n        open={this.open}\r\n        oncalciteDialogBeforeClose={(event) => {\r\n          event.preventDefault();\r\n          this._confirmUnload = false;\r\n          //event.stopPropagation();\r\n          //this.confirmCancel(); // This was causing the cancel dialog to show on next open after normal close\r\n        }}\r\n        oncalciteDialogOpen={() => this._onDialogOpen()}\r\n        outsideCloseDisabled\r\n        ref={this._deployingDialogRef}\r\n      >\r\n        {this._showCancelConfirmation ?\r\n          this.renderCancelModal()\r\n          :\r\n          this._showIsCancelling ?\r\n            this.renderCancellingModal()\r\n            :\r\n            (\r\n              <calcite-panel\r\n                class='panel-bg-white'\r\n              >\r\n                <calcite-loader\r\n                  label={this._translations.deploymentInProgress}\r\n                  scale='l'\r\n                  text={this._translations.deploymentInProgress}\r\n                  type='determinate-value'\r\n                  value={this.deploymentProgress}>\r\n                </calcite-loader>\r\n\r\n                <div style='height: 120px; display: flex; align-items: center;'>\r\n                  <calcite-carousel\r\n                    key={this._carouselKey}\r\n                    autoplay='paused'\r\n                    autoplay-duration='8000'\r\n                    label={this._translations.newsAndFeatures}\r\n                    arrow-type='inline'\r\n                    ref={this._carouselRef}\r\n                  >\r\n                    {this.renderCarouselItems()}\r\n                  </calcite-carousel>\r\n                </div>\r\n\r\n                <calcite-button\r\n                  appearance='outline'\r\n                  onClick={this.confirmCancel}\r\n                  slot='footer-end'\r\n                >\r\n                  {this._translations.cancel}\r\n                </calcite-button>\r\n              </calcite-panel>\r\n            )\r\n        }\r\n      </calcite-dialog>\r\n    );\r\n  }\r\n\r\n  /** Renders the messages carousel */\r\n  private renderCarouselItems(): JsxNode[] {\r\n    const items: JsxNode[] = [];\r\n\r\n    this._carouselMessages.forEach((carouselMessage, index) => {\r\n      items.push(\r\n        <calcite-carousel-item label={`carousel-item-${index}`}>\r\n          <calcite-label layout='inline'>\r\n            {carouselMessage.icon && <calcite-icon icon={carouselMessage.icon} class='padding-end-0-5' />}\r\n            <span innerHTML={this._processCarouselMessage(carouselMessage)} />\r\n          </calcite-label>\r\n        </calcite-carousel-item>\r\n      );\r\n    });\r\n\r\n    return items;\r\n  }\r\n\r\n  /** Get statically defined carousel messages */\r\n  private _getCarouselMessages(): IDeployingCarouselMessage[] {\r\n    const carousel = this._translations.carousel as Record<string, string>;\r\n\r\n    const messages: IDeployingCarouselMessage[] = [\r\n      {\r\n        message: carousel.stockMessage1,\r\n        icon: 'mega-phone',\r\n        url: 'https://doc.arcgis.com/en/arcgis-solutions/latest/get-started/what-s-new-in-arcgis-solutions.htm'\r\n      },\r\n      {\r\n        message: carousel.stockMessage2,\r\n        icon: 'question',\r\n        url: this.card?.learnMoreUrl\r\n      },\r\n      {\r\n        message: carousel.stockMessage3,\r\n        icon: 'model',\r\n        url: undefined\r\n      },\r\n      {\r\n        message: carousel.stockMessage4,\r\n        icon: 'trash',\r\n        url: undefined\r\n      },\r\n      {\r\n        message: carousel.stockMessage5,\r\n        icon: 'lightbulb',\r\n        url: undefined\r\n      },\r\n      {\r\n        message: carousel.stockMessage6,\r\n        icon: 'information',\r\n        url: undefined\r\n      },\r\n      {\r\n        message: carousel.stockMessage7,\r\n        icon: 'speech-bubbles',\r\n        url: undefined\r\n      },\r\n      {\r\n        message: carousel.stockMessage8,\r\n        icon: 'information',\r\n        url: 'https://doc.arcgis.com/en/arcgis-solutions/latest/get-started/releases-and-versions.htm'\r\n      },\r\n      {\r\n        message: carousel.stockMessage9,\r\n        icon: 'lightbulb',\r\n        url: 'https://doc.arcgis.com/en/arcgis-solutions/latest/get-started/upgrading-an-arcgis-solution.htm'\r\n      }\r\n    ];\r\n\r\n    // Randomize the order of messages list\r\n    messages.sort(() => Math.random() - 0.5);\r\n\r\n    return messages;\r\n  }\r\n\r\n  /** Process carousel message by substituting {{link}} placeholders */\r\n  private _processCarouselMessage(\r\n    carouselMessage: IDeployingCarouselMessage\r\n  ): string {\r\n    let processedMessage = carouselMessage.message || '';\r\n\r\n    // Replace {{url}} placeholder with actual URL if provided\r\n    if (processedMessage.includes('{{url}}') && carouselMessage.url) {\r\n      processedMessage = processedMessage.replace('{{url}}', carouselMessage.url);\r\n    }\r\n\r\n    return processedMessage;\r\n  }\r\n\r\n  /** Confirm if the deployment should be cancelled */\r\n  private renderCancelModal(): JsxNode {\r\n    return (\r\n      <calcite-panel\r\n        class='panel-bg-white'\r\n      >\r\n        {this._translations.deploymentCancelMessage}\r\n        <calcite-button\r\n          kind='brand'\r\n          onClick={() => {\r\n            const dialog = this._deployingDialogRef.value;\r\n            if (dialog) {\r\n              dialog.closeDisabled = false;\r\n            }\r\n            this._isInCancelConfirmation = false;\r\n            this._showCancelConfirmation = false;\r\n          }}\r\n          slot='footer-end'\r\n        >\r\n          {this._translations.continueDeployment}\r\n        </calcite-button>\r\n        <calcite-button\r\n          appearance='outline'\r\n          onClick={this.cancelDeployment}\r\n          slot='footer-end'\r\n        >\r\n          {this._translations.cancelDeploymentButton}\r\n        </calcite-button>\r\n      </calcite-panel>\r\n    )\r\n  }\r\n\r\n  /** shows the cancelling process. User cannot close this panel.\r\n   * It will close automatically on the error handler in solution-details-panel.\r\n   */\r\n  private renderCancellingModal(): JsxNode {\r\n    return (\r\n      <calcite-panel\r\n        class='panel-bg-white'\r\n      >\r\n        <calcite-loader\r\n          label={this._translations.cancelCurrentDeployment}\r\n          text={this._translations.cancelCurrentDeployment}\r\n        />\r\n      </calcite-panel>\r\n    )\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Handle dialog open event */\r\n  private _onDialogOpen(): void {\r\n    // confirm with the user if they would like to allow the page to unload\r\n    this._confirmUnload = true;\r\n\r\n    // Force carousel recreation by updating the key\r\n    this._carouselKey++;\r\n\r\n    // Initialize carousel messages when dialog opens\r\n    if (this._translations.carousel) {\r\n      this._carouselMessages = this._getCarouselMessages();\r\n    }\r\n\r\n    // Emit custom event\r\n    this.deployingDialogOpened.emit();\r\n\r\n    setTimeout(() => {\r\n      const carousel = this._carouselRef.value;\r\n      if (carousel) {\r\n        carousel.play();\r\n      }\r\n    }, 100);\r\n\r\n  }\r\n\r\n}\r\n"],"names":["ref$jsx"],"mappings":"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"}

package/dist/components/solution-details-card/customElement.js

@@ -1,15 +1,15 @@
-import { c as a } from "../../chunks/runtime.js";
-import { css as c, html as r } from "lit";
-import { u as l } from "../../chunks/useT9n.js";
-import { LitElement as n, createEvent as d, nothing as s, safeClassMap as h } from "@arcgis/lumina";
-import { useContextConsumer as p } from "@arcgis/lumina/context";
-import { c as m } from "../../chunks/deployAppContexts.js";
-import { T as u } from "../../chunks/interfaces.js";
-import { b as f } from "../../chunks/cardsHelpers.js";
 /*! 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.57 */
-const g = c`/** @license
+v1.2.0-next.59 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html } from "lit";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { LitElement, createEvent, nothing, safeClassMap } from "@arcgis/lumina";
+import { useContextConsumer } from "@arcgis/lumina/context";
+import { c as configContext } from "../../chunks/deployAppContexts.js";
+import { T as TELEMETRY_CATEGORY } from "../../chunks/interfaces.js";
+import { b as convertTitleToUrlForm } from "../../chunks/cardsHelpers.js";
+const styles = css`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -23,32 +23,168 @@ const g = c`/** @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.
- */calcite-card{height:100%;padding-bottom:2px}@media(max-width:400px){calcite-card{width:100%}}calcite-card:hover img{-webkit-filter:brightness(20%);filter:brightness(20%);-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease}calcite-card:hover .hover-text{opacity:1;color:#fff}calcite-card:hover{outline:2px solid var(--calcite-ui-brand);box-sizing:border-box;cursor:pointer}.chip-status{--calcite-chip-icon-color: var(--calcite-ui-brand);cursor:pointer}.chip-deployed{--calcite-chip-icon-color: var(--calcite-color-status-success)}.hover-text{transition:.5s ease;opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:row;align-items:center;height:100%;font-size:1.2rem}.font-color-text-2{--calcite-label-text-color: var(--calcite-color-text-2)}.font-line-height{line-height:1.4}.font-size-size--1{font-size:var(--calcite-font-size--1)}.header-line-height{--calcite-label-margin-bottom: 0;margin-top:.5rem;margin-bottom:.7rem}.info-icon{--calcite-icon-color: var(--calcite-color-text-inverse);padding-inline-end:.3rem}.card-image-wrap{flex:0 0 auto}.card-image-wrap{width:100%;position:relative;margin-bottom:0;-webkit-box-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.card-image{width:100%;display:block}video,img{max-width:100%;height:auto}img{overflow-clip-margin:content-box;overflow:clip}a{text-decoration:none;color:inherit;outline:0;padding:0;margin:0;display:inherit;height:100%}`;
-class b extends n {
+ */
+
+calcite-card {
+  height: 100%;
+  padding-bottom: 2px;
+}
+
+/* @media (max-width: 600px) {
+  calcite-card {
+    width: calc(100% / 2 - .5rem);
+  }
+} */
+
+@media (max-width: 400px) {
+  calcite-card {
+    width: 100%;
+  }
+}
+
+calcite-card:hover img {
+  /* TODO check in dark mode */
+  -webkit-filter: brightness(20%);
+  filter: brightness(20%);
+  -webkit-transition: all 1s ease;
+  -moz-transition: all 1s ease;
+  -o-transition: all 1s ease;
+  -ms-transition: all 1s ease;
+  transition: all 1s ease;
+}
+
+calcite-card:hover .hover-text {
+  opacity: 1;
+  color: #ffffff;
+}
+
+calcite-card:hover {
+  outline: 2px solid var(--calcite-ui-brand);
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.chip-status {
+  --calcite-chip-icon-color: var(--calcite-ui-brand);
+  cursor: pointer;
+}
+
+.chip-deployed {
+  --calcite-chip-icon-color: var(--calcite-color-status-success);
+}
+
+.hover-text {
+  transition: .5s ease;
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 100%;
+  font-size: 1.2rem;
+}
+
+.font-color-text-2 {
+  --calcite-label-text-color: var(--calcite-color-text-2);
+}
+
+.font-line-height {
+  line-height: 1.4;
+}
+
+.font-size-size--1 {
+  font-size: var(--calcite-font-size--1);
+}
+
+.header-line-height {
+  --calcite-label-margin-bottom: 0;
+  margin-top: 0.5rem;
+  margin-bottom: 0.7rem;
+}
+
+.info-icon {
+  /* TODO check in dark mode...likely just want to set this to #FFFFFF */
+  --calcite-icon-color: var(--calcite-color-text-inverse);
+  padding-inline-end: .3rem;
+}
+
+.card-image-wrap {
+  flex: 0 0 auto;
+}
+
+.card-image-wrap {
+  width: 100%;
+  position: relative;
+  margin-bottom: 0;
+  -webkit-box-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
+}
+
+.card-image {
+  width: 100%;
+  display: block;
+}
+
+video,
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+img {
+  overflow-clip-margin: content-box;
+  overflow: clip;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+  outline: 0;
+  padding: 0;
+  margin: 0;
+  display: inherit;
+  height: 100%;
+}`;
+class SolutionDetailsCard extends LitElement {
   constructor() {
-    super(...arguments), this.referrerSolutionId = "", this.referrerSolutionTitle = "", this.referrerSolutionVersion = "", this.source = "all-solutions", this._translations = l({ name: "solution-details-card", blocking: !0 }), this._configContextConsumer = p({
-      context: m,
-      subscribe: !0
-    }), this.detailsCardSelected = d();
+    super(...arguments);
+    this.referrerSolutionId = "";
+    this.referrerSolutionTitle = "";
+    this.referrerSolutionVersion = "";
+    this.source = "all-solutions";
+    this._translations = useT9n({ name: "solution-details-card", blocking: true });
+    this._configContextConsumer = useContextConsumer({
+      context: configContext,
+      subscribe: true
+    });
+    this.detailsCardSelected = createEvent();
   }
   static {
-    this.properties = { card: 0, referrerSolutionId: 1, referrerSolutionTitle: 1, referrerSolutionVersion: 1, source: 1, _translations: 16 };
+    this.properties = { card: [0, {}, { attribute: false }], referrerSolutionId: 1, referrerSolutionTitle: 1, referrerSolutionVersion: 1, source: 1, _translations: [16, {}, { state: true }] };
   }
   static {
-    this.styles = g;
+    this.styles = styles;
   }
   get _telemetry() {
     return this._configContextConsumer.value?.telemetrySession;
   }
   render() {
-    const e = f(this.card.title);
-    return r`<a href=${e ?? s} @click=${this._anchorClick} .title=${`${this.card.title} - ${this._translations.arcgisSolutions}`}>${this._renderCard()}</a>`;
+    const href = convertTitleToUrlForm(this.card.title);
+    return html`<a href=${href ?? nothing} @click=${this._anchorClick} .title=${`${this.card.title} - ${this._translations.arcgisSolutions}`}>${this._renderCard()}</a>`;
   }
-  _anchorClick(e) {
-    e.preventDefault();
+  _anchorClick(evt) {
+    evt.preventDefault();
   }
   _cardSelected() {
-    const e = this.source === "you-may-also-like", i = e ? "Related Solution" : "View", t = e ? [
+    const isRelatedSolution = this.source === "you-may-also-like";
+    const action = isRelatedSolution ? "Related Solution" : "View";
+    const dimensions = isRelatedSolution ? [
       this.referrerSolutionTitle,
       this.referrerSolutionId,
       this.referrerSolutionVersion,
@@ -61,17 +197,22 @@ class b extends n {
       this.card?.deployVersion || ""
     ];
     this._telemetry?.logEvent({
-      category: u.SOLUTION_DETAILS,
-      action: i,
-      dimensions: t
-    }), this.detailsCardSelected.emit(this.card);
+      category: TELEMETRY_CATEGORY.SOLUTION_DETAILS,
+      action,
+      dimensions
+    });
+    this.detailsCardSelected.emit(this.card);
   }
   _renderCard() {
-    const e = this.card, i = e.chip === "new" || e.chip === "updated" ? "chip-status" : this.card.chip === "deployed" ? "chip-deployed" : "", t = "solution-details-card-chip", o = e.chip === "new" ? this._translations.newSolution : e.chip === "updated" ? this._translations.updated : this._translations.deployed;
-    return r`<calcite-card .label=${e.snippet} @click=${this._cardSelected}><div class="card-image-wrap" slot=thumbnail><img alt=${e.title ?? s} class="thumbnail card-image" src=${e.thumbnailUrl ?? s}><div class="hover-text">${this._translations.viewDetails}</div></div><calcite-label slot=heading class="header-line-height" scale=l>${e.title}</calcite-label><p slot=description class="font-color-text-2 font-line-height font-size-size--1">${e.snippet}</p>${e.chip !== "none" ? r`<div slot=footer-end><calcite-chip class=${h(i)} .icon=${e.chip === "updated" || e.chip === "new" ? "mega-phone" : "check-circle"} id=${t} .label=${o} .value=${o} scale=s></calcite-chip><calcite-tooltip .referenceElement=${t}><span>${o}</span></calcite-tooltip></div>` : void 0}<div slot=footer-start></div></calcite-card>`;
+    const card = this.card;
+    const chipClass = card.chip === "new" || card.chip === "updated" ? "chip-status" : this.card.chip === "deployed" ? "chip-deployed" : "";
+    const chipId = "solution-details-card-chip";
+    const chipTooltip = card.chip === "new" ? this._translations.newSolution : card.chip === "updated" ? this._translations.updated : this._translations.deployed;
+    return html`<calcite-card .label=${card.snippet} @click=${this._cardSelected}><div class="card-image-wrap" slot=thumbnail><img alt=${card.title ?? nothing} class="thumbnail card-image" src=${card.thumbnailUrl ?? nothing}><div class="hover-text">${this._translations.viewDetails}</div></div><calcite-label slot=heading class="header-line-height" scale=l>${card.title}</calcite-label><p slot=description class="font-color-text-2 font-line-height font-size-size--1">${card.snippet}</p>${card.chip !== "none" ? html`<div slot=footer-end><calcite-chip class=${safeClassMap(chipClass)} .icon=${card.chip === "updated" || card.chip === "new" ? "mega-phone" : "check-circle"} id=${chipId} .label=${chipTooltip} .value=${chipTooltip} scale=s></calcite-chip><calcite-tooltip .referenceElement=${chipId}><span>${chipTooltip}</span></calcite-tooltip></div>` : void 0}<div slot=footer-start></div></calcite-card>`;
   }
 }
-a("solution-details-card", b);
+customElement("solution-details-card", SolutionDetailsCard);
 export {
-  b as SolutionDetailsCard
+  SolutionDetailsCard
 };
+//# sourceMappingURL=customElement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/solution-details-card/solution-details-card.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 {\r\n  createEvent,\r\n  LitElement,\r\n  h,\r\n  property,\r\n  state,\r\n} from '@arcgis/lumina';\r\nimport type {\r\n  JsxNode,\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 { styles } from './solution-details-card.css';\r\nimport type {\r\n  ISolutionInfoCard,\r\n} from '../../utils/interfaces';\r\nimport {\r\n  TELEMETRY_CATEGORY,\r\n} from '../../utils/interfaces';\r\nimport {\r\n  convertTitleToUrlForm\r\n} from '../../utils/cardsHelpers';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'solution-details-card': SolutionDetailsCard;\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/432\r\n\r\nexport class SolutionDetailsCard 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  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** The solutions card */\r\n  @property() card: ISolutionInfoCard | undefined;\r\n\r\n  /** Referrer solution ID for telemetry tracking (used when card is in 'you-may-also-like') */\r\n  @property() referrerSolutionId = '';\r\n\r\n  /** Referrer solution title for telemetry tracking (used when card is in 'you-may-also-like') */\r\n  @property() referrerSolutionTitle = '';\r\n\r\n  /** Referrer solution version for telemetry tracking (used when card is in 'you-may-also-like') */\r\n  @property() referrerSolutionVersion = '';\r\n\r\n  /** Source context for telemetry tracking (e.g., 'all-solutions', 'you-may-also-like') */\r\n  @property() source = 'all-solutions';\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  State (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\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-card', blocking: true });\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\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  //--------------------------------------------------------------------------\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 details card is selected. */\r\n  detailsCardSelected = createEvent<ISolutionInfoCard>();\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (lifecycle)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Renders the component. */\r\n  override render(): JsxNode {\r\n    const href = convertTitleToUrlForm(this.card!.title);\r\n    return (\r\n      <a\r\n        href={href}\r\n        onClick={this._anchorClick}\r\n        title={`${this.card!.title} - ${this._translations.arcgisSolutions}`}\r\n      >\r\n        {this._renderCard()}\r\n      </a>\r\n    );\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Anchor is used for page crawling and we don't actually want this to control page navigation as it would cause full page load */\r\n  private _anchorClick(\r\n    evt: PointerEvent\r\n  ): void {\r\n    evt.preventDefault();\r\n  }\r\n\r\n  /** Handle card selection */\r\n  private _cardSelected(): void {\r\n    const isRelatedSolution = this.source === 'you-may-also-like';\r\n    const action = isRelatedSolution ? 'Related Solution' : 'View';\r\n    const dimensions = isRelatedSolution ? [\r\n      this.referrerSolutionTitle,\r\n      this.referrerSolutionId,\r\n      this.referrerSolutionVersion,\r\n      this.card?.title || '',\r\n      this.card?.id || '',\r\n      this.card?.deployVersion || ''\r\n    ] : [\r\n      this.card?.title || '',\r\n      this.card?.id || '',\r\n      this.card?.deployVersion || ''\r\n    ];\r\n\r\n    this._telemetry?.logEvent({\r\n      category: TELEMETRY_CATEGORY.SOLUTION_DETAILS,\r\n      action,\r\n      dimensions\r\n    });\r\n    this.detailsCardSelected.emit(this.card!);\r\n  }\r\n\r\n  /** Render the solutions card */\r\n  private _renderCard(): JsxNode {\r\n    const card = this.card!;\r\n    const chipClass = card.chip === 'new' || card.chip === 'updated' ? 'chip-status' :\r\n      this.card!.chip === 'deployed' ? 'chip-deployed' : '';\r\n    const chipId = 'solution-details-card-chip';\r\n    const chipTooltip = card.chip === 'new' ? this._translations.newSolution : card.chip === 'updated' ? this._translations.updated : this._translations.deployed;\r\n    return (\r\n      <calcite-card\r\n        label={card.snippet}\r\n        onClick={this._cardSelected}\r\n      >\r\n        <div class='card-image-wrap' slot='thumbnail'>\r\n          <img\r\n            alt={card.title}\r\n            class='thumbnail card-image'\r\n            src={card.thumbnailUrl}\r\n          />\r\n          <div class='hover-text'>\r\n            {this._translations.viewDetails}\r\n          </div>\r\n        </div>\r\n        <calcite-label slot='heading' class='header-line-height' scale='l'>\r\n          {card.title}\r\n        </calcite-label>\r\n        <p slot='description' class='font-color-text-2 font-line-height font-size-size--1'>\r\n          {card.snippet}\r\n        </p>\r\n        {card.chip !== 'none' ? (\r\n          <div slot='footer-end'>\r\n            <calcite-chip\r\n              class={chipClass}\r\n              icon={card.chip === 'updated' || card.chip === 'new' ? 'mega-phone' : 'check-circle'}\r\n              id={chipId}\r\n              label={chipTooltip}\r\n              value={chipTooltip}\r\n              scale='s'\r\n            />\r\n            <calcite-tooltip referenceElement={chipId}>\r\n              <span>\r\n                {chipTooltip}\r\n              </span>\r\n            </calcite-tooltip>\r\n          </div>\r\n        ) : undefined\r\n        }\r\n        <div slot='footer-start' />\r\n      </calcite-card>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDM,MAAO,4BAA4B,WAAU;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA;AAoBQ,SAAA,qBAAqB;AAGrB,SAAA,wBAAwB;AAGxB,SAAA,0BAA0B;AAG1B,SAAA,SAAS;AAYZ,SAAA,gBAAgB,OAA0B,EAAE,MAAM,yBAAyB,UAAU,MAAM;AASpG,SAAQ,yBAAyB,mBAAmB;AAAA,MAClD,SAAS;AAAA,MACT,WAAW;AAAA,IAAA,CACZ;AA0BD,SAAA,sBAAsB,YAAA;AAAA;;;;EAvEtB,OAAA;AAAA,SAAgB,SAAS;AAAA,EAAA;AAAA,EAgDzB,IAAY,aAAU;AACpB,WAAO,KAAK,uBAAuB,OAAO;AAAA,EAC5C;AAAA,EA8BS,SAAiB;AACxB,UAAM,OAAO,sBAAsB,KAAK,KAAM,KAAK;AACnD,WAAO,eAEG,QAAI,OAAA,WACD,KAAK,YAAY,WACnB,GAAG,KAAK,KAAM,KAAK,MAAM,KAAK,cAAc,eAAe,EAAE,IAEnE,KAAK,aAAa;AAAA,EAGzB;AAAA,EASQ,aACN,KACK;AACL,QAAI,eAAA;AAAA,EACN;AAAA,EAGQ,gBAAqB;AAC3B,UAAM,oBAAoB,KAAK,WAAW;AAC1C,UAAM,SAAS,oBAAoB,qBAAqB;AACxD,UAAM,aAAa,oBAAoB;AAAA,MACrC,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK,MAAM,SAAS;AAAA,MACpB,KAAK,MAAM,MAAM;AAAA,MACjB,KAAK,MAAM,iBAAiB;AAAA,IAAA,IAC1B;AAAA,MACF,KAAK,MAAM,SAAS;AAAA,MACpB,KAAK,MAAM,MAAM;AAAA,MACjB,KAAK,MAAM,iBAAiB;AAAA,IAAA;AAG9B,SAAK,YAAY,SAAS;AAAA,MACxB,UAAU,mBAAmB;AAAA,MAC7B;AAAA,MACA;AAAA,IAAA,CACD;AACD,SAAK,oBAAoB,KAAK,KAAK,IAAK;AAAA,EAC1C;AAAA,EAGQ,cAAsB;AAC5B,UAAM,OAAO,KAAK;AAClB,UAAM,YAAY,KAAK,SAAS,SAAS,KAAK,SAAS,YAAY,gBACjE,KAAK,KAAM,SAAS,aAAa,kBAAkB;AACrD,UAAM,SAAS;AACf,UAAM,cAAc,KAAK,SAAS,QAAQ,KAAK,cAAc,cAAc,KAAK,SAAS,YAAY,KAAK,cAAc,UAAU,KAAK,cAAc;AACrJ,uCAEW,KAAK,OAAO,WACV,KAAK,aAAa,yDAIlB,KAAK,SAAK,OAAA,qCAEV,KAAK,gBAAY,OAAA,4BAGrB,KAAK,cAAc,WAAW,8EAIhC,KAAK,KAAK,oGAGV,KAAK,OAAO,OAEd,KAAK,SAAS,SAAS,gDAAA,aAGX,SAAS,CAAA,UACV,KAAK,SAAS,aAAa,KAAK,SAAS,QAAQ,eAAe,cAAc,OAChF,MAAM,WACH,WAAW,WACX,WAAW,8DAGe,MAAM,UAEpC,WAAW,oCAIhB,MAAS;AAAA,EAKnB;AACD;;"}