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

package/dist/components/solution-snapshot-gallery/customElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/solution-snapshot-gallery/solution-snapshot-gallery.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  Fragment,\r\n  LitElement,\r\n  property,\r\n  h,\r\n  state,\r\n} from '@arcgis/lumina';\r\nimport {\r\n  useContextConsumer,\r\n} from '@arcgis/lumina/context';\r\nimport type {\r\n  IItemPreview,\r\n  IItemProperties,\r\n  ISolutionInfoCard,\r\n} from '../../utils/interfaces';\r\nimport {\r\n  getItemResourceUrl,\r\n} from '../../utils/common';\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-snapshot-gallery.css';\r\nimport { Auth } from '../../utils/Auth';\r\nimport { createRef } from 'lit-html/directives/ref.js';\r\nimport type { PropertyValues } from 'lit';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'solution-snapshot-gallery': SolutionSnapshotGallery;\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/438\r\n\r\nexport class SolutionSnapshotGallery 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  override willUpdate(changes: PropertyValues<this>): void {\r\n    if (changes.has('screenshot') && this.screenshot) {\r\n      this._displayText = this.screenshot.alt;\r\n    }\r\n\r\n    if (changes.has('itemProperties') && this.itemProperties) {\r\n      this._screenshots = this.itemProperties.preview.filter(ss => ss.format === 'image');\r\n      this._screenshotNames = this._screenshots.map(s => s.name);\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  /** The current screenshot to display the large image for */\r\n  @property() screenshot: IItemPreview | undefined;\r\n\r\n  /** Key item properties */\r\n  @property() itemProperties: IItemProperties | undefined;\r\n\r\n  /** boolean: when true the dialog is open */\r\n  @property() open = false;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  State (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** List of the screenshots */\r\n  @state() _screenshots: IItemPreview[] = [];\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-snapshot-gallery', 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  /** The text that will display next to the pagination control */\r\n  private _displayText = '';\r\n\r\n  /** HTMLElement: The container div for the basemap gallery widget */\r\n  private _paginationControl = createRef<HTMLCalcitePaginationElement>();\r\n\r\n  /** List of the screenshot names  */\r\n  private _screenshotNames: string[] = [];\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  //--------------------------------------------------------------------------\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-dialog\r\n        class='footer-override'\r\n        heading={this.card?.title}\r\n        modal\r\n        oncalciteDialogClose={() => this.open = false}\r\n        open={this.open}\r\n        outside-close-disabled\r\n        width='l'\r\n      >\r\n        {this._getScreenshotView()}\r\n        {this._getFooter()}\r\n      </calcite-dialog>\r\n    );\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Get the display for the large screenshot image */\r\n  private _getScreenshotView(): JsxNode {\r\n    return this.screenshot ? (\r\n      <div class='display-flex justify-content-center'>\r\n        {this._getImage(this.screenshot)}\r\n      </div>\r\n    ) : (<></>);\r\n  }\r\n\r\n  /** Get the pagination control and screenshot cards */\r\n  private _getFooter(): JsxNode {\r\n    const index = this._screenshotNames.indexOf(this.screenshot?.name || '');\r\n    const isDarkMode = document.body.classList.contains('calcite-mode-dark');\r\n    const themeCss = isDarkMode ? 'calcite-mode-dark' : '';\r\n    return (\r\n      <div class='footer' slot='footer'>\r\n        <div class={`display-flex align-items-center padding-start-1 padding-top-1-2 background-black ${themeCss}`}>\r\n          <calcite-label layout='inline'>\r\n            <calcite-pagination\r\n              class='padding-end-1'\r\n              oncalcitePaginationChange={this._changeScreenshot}\r\n              page-size='1'\r\n              ref={this._paginationControl}\r\n              start-item={index + 1}\r\n              total-items={this._screenshots.length}\r\n            />\r\n            {this._displayText}\r\n          </calcite-label>\r\n        </div>\r\n        {this._getCards()}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /** Handle pagination change event */\r\n  private _changeScreenshot(): void {\r\n    this.screenshot = this._screenshots[this._paginationControl.value!.startItem - 1];\r\n  }\r\n\r\n  /** Get all of the screen shot cards */\r\n  private _getCards(): JsxNode {\r\n    return (\r\n      <calcite-card-group\r\n        class='card-group padding-1'\r\n        label={this._translations.seeSolutionScreenshots}\r\n        selectionMode='single'\r\n      >\r\n        {\r\n          this._screenshots.map(ss => {\r\n            return (\r\n              <calcite-card\r\n                class='footer-card'\r\n                label={ss.alt}\r\n                onClick={() => this._showScreenshot(ss)}\r\n                selected={ss.name === this.screenshot?.name}\r\n              >\r\n                {this._getImage(ss, 'thumbnail')}\r\n              </calcite-card>\r\n            )\r\n          })\r\n        }\r\n      </calcite-card-group>\r\n    );\r\n  }\r\n\r\n  /** Get an image for the screenshot */\r\n  private _getImage(\r\n    screenshot: IItemPreview,\r\n    slot?: string\r\n  ): JsxNode {\r\n    return (\r\n      <img\r\n        alt={screenshot.alt}\r\n        slot={slot}\r\n        src={\r\n          this._getSource(\r\n            this._configContextConsumer.value!.authentication,\r\n            this.card?.id || '',\r\n            screenshot.name\r\n          )\r\n        }\r\n      />\r\n    );\r\n  }\r\n\r\n  /** Set the currently selected screenshot for large display */\r\n  private _showScreenshot(\r\n    itemPreview: IItemPreview\r\n  ): void {\r\n    this.screenshot = itemPreview;\r\n  }\r\n\r\n  /** Get the source url for the screenshot */\r\n  private _getSource(\r\n    auth: Auth | undefined,\r\n    id: string,\r\n    name: string\r\n  ): string {\r\n    return auth ? getItemResourceUrl(id || '', name, auth) : '';\r\n  }\r\n}\r\n"],"names":["ref$jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDM,MAAO,gCAAgC,WAAU;AAAA,EAAjD,cAAA;AAAA,UAAA,GAAA,SAAA;AAqCQ,SAAA,OAAO;AASV,SAAA,eAA+B,CAAA;AAM/B,SAAA,gBAAgB,OAA0B,EAAE,MAAM,6BAA6B,UAAU,MAAM;AASxG,SAAQ,yBAAyB,mBAAmB;AAAA,MAClD,SAAS;AAAA,MACT,WAAW;AAAA,IAAA,CACZ;AAGD,SAAQ,eAAe;AAGvB,SAAQ,qBAAqB,UAAA;AAG7B,SAAQ,mBAA6B,CAAA;AAAA;;;;EAjErC,OAAA;AAAA,SAAgB,SAAS;AAAA,EAAA;AAAA,EAEhB,WAAW,SAAoC;AACtD,QAAI,QAAQ,IAAI,YAAY,KAAK,KAAK,YAAY;AAChD,WAAK,eAAe,KAAK,WAAW;AAAA,IACtC;AAEA,QAAI,QAAQ,IAAI,gBAAgB,KAAK,KAAK,gBAAgB;AACxD,WAAK,eAAe,KAAK,eAAe,QAAQ,OAAO,CAAA,OAAM,GAAG,WAAW,OAAO;AAClF,WAAK,mBAAmB,KAAK,aAAa,IAAI,CAAA,MAAK,EAAE,IAAI;AAAA,IAC3D;AAAA,EACF;AAAA,EAiFS,SAAiB;AACxB,WAAO,wDAGM,KAAK,MAAM,KAAK,8BAEH,MAAM,KAAK,OAAO,KAAK,UACvC,KAAK,IAAI,mCAId,KAAK,mBAAA,CAAoB,GACzB,KAAK,YAAY;AAAA,EAGxB;AAAA,EASQ,qBAA6B;AACnC,WAAO,KAAK,aAAa,wDAEpB,KAAK,UAAU,KAAK,UAAU,CAAC;EAGtC;AAAA,EAGQ,aAAqB;AAC3B,UAAM,QAAQ,KAAK,iBAAiB,QAAQ,KAAK,YAAY,QAAQ,EAAE;AACvE,UAAM,aAAa,SAAS,KAAK,UAAU,SAAS,mBAAmB;AACvE,UAAM,WAAW,aAAa,sBAAsB;AACpD,WAAO,kDAES,oFAAoF,QAAQ,EAAE,oGAIzE,KAAK,iBAAiB,2BAGrC,QAAQ,CAAC,gBACR,KAAK,aAAa,UAAM,OAAA,IAAAA,IAFhC,KAAK,kBAAkB,0BAI7B,KAAK,YAAY,yBAGrB,KAAK,UAAA,CAAW;AAAA,EAGvB;AAAA,EAGQ,oBAAyB;AAC/B,SAAK,aAAa,KAAK,aAAa,KAAK,mBAAmB,MAAO,YAAY,CAAC;AAAA,EAClF;AAAA,EAGQ,YAAoB;AAC1B,WAAO,+DAGI,KAAK,cAAc,sBAAsB,0BAI9C,KAAK,aAAa,IAAI,CAAA,OAAK;AACzB,aAAO,gDAGI,GAAG,GAAG,WACJ,MAAM,KAAK,gBAAgB,EAAE,CAAC,cAC7B,GAAG,SAAS,KAAK,YAAY,IAAI,IAE1C,KAAK,UAAU,IAAI,WAAW,CAAC;AAAA,IAGtC,CAAC,CAAC;AAAA,EAIV;AAAA,EAGQ,UACN,YACA,MACQ;AACR,WAAO,gBAEE,WAAW,uBACV,QAAI,OAAA,QAER,KAAK,WACH,KAAK,uBAAuB,MAAO,gBACnC,KAAK,MAAM,MAAM,IACjB,WAAW,IAAI;EAKzB;AAAA,EAGQ,gBACN,aACK;AACL,SAAK,aAAa;AAAA,EACpB;AAAA,EAGQ,WACN,MACA,IACA,MACO;AACP,WAAO,OAAO,mBAAmB,MAAM,IAAI,MAAM,IAAI,IAAI;AAAA,EAC3D;AACD;;"}