@esri/solutions-components 5.1.0-next.7 → 5.1.0-next.71

package/dist/components/solution-social-share/customElement.js

@@ -1,164 +1,516 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as f } from "../../chunks/runtime.js";
-import { css as v, html as e, svg as p } from "lit";
-import { u as g } from "../../chunks/useT9n.js";
-import { LitElement as m, nothing as h, safeStyleMap as l } from "@arcgis/lumina";
-import { useContextConsumer as b } from "@arcgis/lumina/context";
-import { A as x, T as w, L as y } from "../../chunks/interfaces.js";
-import { createRef as n, ref as r } from "lit-html/directives/ref.js";
-import * as $ from "@arcgis/core/intl";
-import k from "@arcgis/core/request";
-const R = v`:host{display:block;--solutions-social-share-action-width: initial;--solutions-social-share-width--s: 200px;--solutions-social-share-width--m: 280px;--solutions-social-share-width--l: 320px;--solutions-social-share-width-horizontal--s: 300px;--solutions-social-share-width-horizontal--m: 380px;--solutions-social-share-width-horizontal--l: 420px;--solutions-social-share-background-color: var(--calcite-color-foreground-1);--solutions-social-share-popover-button-background-color: transparent;--solutions-social-share-popover-button-icon-color: var(--calcite-ui-icon-color);--solutions-social-share-border: 1px solid var(--calcite-color-border-1);position:relative;display:flex;block-size:100%;flex:1 1 auto;flex-flow:column;align-items:stretch}.solutions-social-share__popover-button{background-color:var(--solutions-social-share-popover-button-background-color);--calcite-color-focus: initial}.solutions-social-share__popover-button calcite-icon{color:var(--solutions-social-share-popover-button-icon-color)}.solutions-social-share__dialog{background-color:var(--solutions-social-share-background-color);border:var(--solutions-social-share-border);box-sizing:border-box;height:auto;padding:10px 0;border-radius:5px;color:var(--calcite-color-text-1)}.solutions-social-share__options{margin:0;padding:1% 0 0;list-style-type:none}.solutions-social-share__options li{box-sizing:border-box;display:flex;align-items:center;width:100%;padding:5%;transition:background-color .15s ease-out 0s}.solutions-social-share__options li .solutions-social-share__icon,.solutions-social-share__options li .solutions-social-share__option-text{display:inline-block}.solutions-social-share__options li .solutions-social-share__icon{display:flex;align-items:center}.solutions-social-share__options li .solutions-social-share__option-text{width:85%;margin-left:10px;word-break:break-word}.solutions-social-share__options li .solutions-social-share__option-text--rtl{margin-left:0;margin-right:10px}.solutions-social-share__options li:hover{cursor:pointer;background-color:var(--calcite-color-foreground-2)}.solutions-social-share__options li:focus{outline:2px solid var(--calcite-color-brand);outline-offset:-2px}.solutions-social-share__x-logo{color:var(--calcite-color-text-1)}.solutions-social-share__success{display:flex;flex-direction:column;padding:15px}.solutions-social-share__success-header{display:flex;align-items:center;font-weight:700;margin-bottom:10px}.solutions-social-share__success-icon{display:flex;align-items:center;margin-right:5px}.solutions-social-share__success-icon calcite-icon{color:var(--calcite-color-status-success)}.solutions-social-share__success-message{line-height:16px}.solutions-social-share__layout--horizontal .solutions-social-share__options{display:flex;justify-content:space-around;margin-bottom:8%}.solutions-social-share__layout--horizontal .solutions-social-share__options li{flex-direction:column;padding:0}.solutions-social-share__layout--horizontal .solutions-social-share__options li .solutions-social-share__option-text{word-break:break-word;margin-left:0;margin-top:10px;text-align:center}.solutions-social-share__layout--horizontal .solutions-social-share__options li:hover{background-color:unset}.solutions-social-share__icon-container{display:flex;align-items:center}calcite-action{width:var(--solutions-social-share-action-width)}:host([scale=s]) .solutions-social-share__dialog{width:var(--solutions-social-share-width--s)}:host([scale=s]) .solutions-social-share__icon{width:16px;height:16px}:host([scale=s]) .solutions-social-share__option-text{font-size:var(--calcite-font-size--1)}:host([scale=s]) .solutions-social-share__dialog.solutions-social-share__layout--horizontal{width:var(--solutions-social-share-width-horizontal--s)}:host([scale=m]) .solutions-social-share__dialog{width:var(--solutions-social-share-width--m)}:host([scale=m]) .solutions-social-share__icon{width:24px;height:24px}:host([scale=m]) .solutions-social-share__option-text{font-size:var(--calcite-font-size-0)}:host([scale=m]) .solutions-social-share__dialog.solutions-social-share__layout--horizontal{width:var(--solutions-social-share-width-horizontal--m)}:host([scale=l]) .solutions-social-share__dialog{width:var(--solutions-social-share-width--l)}:host([scale=l]) .solutions-social-share__icon{width:32px;height:32px}:host([scale=l]) .solutions-social-share__option-text{font-size:var(--calcite-font-size-1)}:host([scale=l]) .solutions-social-share__dialog.solutions-social-share__layout--horizontal{width:var(--solutions-social-share-width-horizontal--l)}`, L = ".calcite-mode-dark", S = {
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html, svg } from "lit";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { LitElement, nothing, safeStyleMap } from "@arcgis/lumina";
+import { useContextConsumer } from "@arcgis/lumina/context";
+import { c as configContext } from "../../chunks/deployAppContexts.js";
+import { T as TELEMETRY_CATEGORY, M as toTitleCase } from "../../chunks/helpers.js";
+import { createRef, ref } from "lit-html/directives/ref.js";
+import * as intl from "@arcgis/core/intl";
+import esriRequest from "@arcgis/core/request";
+const styles = css`/** @license
+ * Copyright 2025 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * 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;
+  /**
+  * @prop --solutions-social-share-action-width: Width of action button
+  * @prop --solutions-social-share-width--s: Width of component when scale is set to \`s\`
+  * @prop --solutions-social-share-width--m: Width of component when scale is set to \`m\`
+  * @prop --solutions-social-share-width--l: Width of component when scale is set to \`l\`
+  * @prop --solutions-social-share-width-horizontal--s: Width of component when \`share-icons-layout\` is set to \`horizontal\` and scale is set to 's'
+  * @prop --solutions-social-share-width-horizontal--m: Width of component when \`share-icons-layout\` is set to \`horizontal\` and scale is set to 'm'
+  * @prop --solutions-social-share-width-horizontal--l: Width of component when \`share-icons-layout\` is set to \`horizontal\` and scale is set to 'l'
+  */
+  --solutions-social-share-action-width: initial;
+  --solutions-social-share-width--s: 200px;
+  --solutions-social-share-width--m: 280px;
+  --solutions-social-share-width--l: 320px;
+  --solutions-social-share-width-horizontal--s: 300px;
+  --solutions-social-share-width-horizontal--m: 380px;
+  --solutions-social-share-width-horizontal--l: 420px;
+  --solutions-social-share-background-color: var(--calcite-color-surface-2);
+  --solutions-social-share-popover-button-background-color: transparent;
+  --solutions-social-share-popover-button-icon-color: var(--calcite-ui-icon-color);
+  --solutions-social-share-border: 1px solid var(--calcite-color-border-1);
+  position: relative;
+  display: flex;
+  block-size: 100%;
+  flex: 1 1 auto;
+  flex-flow: column;
+  align-items: stretch;
+}
+
+.solutions-social-share__popover-button {
+  background-color: var(--solutions-social-share-popover-button-background-color);
+  --calcite-color-focus: initial;
+}
+
+.solutions-social-share__popover-button calcite-icon {
+  color: var(--solutions-social-share-popover-button-icon-color);
+}
+
+.solutions-social-share__dialog {
+  background-color: var(--solutions-social-share-background-color);
+  border: var(--solutions-social-share-border);
+  box-sizing: border-box;
+  height: auto;
+  padding: 10px 0;
+  border-radius: 5px;
+  color: var(--calcite-color-text-1);
+}
+
+.solutions-social-share__options {
+  margin: 0;
+  padding: 1% 0 0 0;
+  list-style-type: none;
+}
+
+.solutions-social-share__options li {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 5%;
+  transition: background-color 0.15s ease-out 0s;
+}
+
+.solutions-social-share__options li .solutions-social-share__icon,
+.solutions-social-share__options li .solutions-social-share__option-text {
+  display: inline-block;
+}
+
+.solutions-social-share__options li .solutions-social-share__icon {
+  display: flex;
+  align-items: center;
+}
+
+.solutions-social-share__options li .solutions-social-share__option-text {
+  width: 85%;
+  margin-left: 10px;
+  word-break: break-word;
+}
+
+.solutions-social-share__options li .solutions-social-share__option-text--rtl {
+  margin-left: 0;
+  margin-right: 10px;
+}
+
+.solutions-social-share__options li:hover {
+  cursor: pointer;
+  background-color: var(--calcite-color-surface-3);
+}
+
+.solutions-social-share__options li:focus {
+  outline: 2px solid var(--calcite-color-brand);
+  outline-offset: -2px;
+}
+
+.solutions-social-share__x-logo {
+  color: var(--calcite-color-text-1);
+}
+
+.solutions-social-share__success {
+  display: flex;
+  flex-direction: column;
+  padding: 15px;
+}
+
+.solutions-social-share__success-header {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.solutions-social-share__success-icon {
+  display: flex;
+  align-items: center;
+  margin-right: 5px;
+}
+
+.solutions-social-share__success-icon calcite-icon {
+  color: var(--calcite-color-status-success);
+}
+
+.solutions-social-share__success-message {
+  line-height: 16px;
+}
+
+.solutions-social-share__layout--horizontal .solutions-social-share__options {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 8%;
+}
+
+.solutions-social-share__layout--horizontal .solutions-social-share__options li {
+  flex-direction: column;
+  padding: 0;
+}
+
+.solutions-social-share__layout--horizontal .solutions-social-share__options li .solutions-social-share__option-text {
+  word-break: break-word;
+  margin-left: 0;
+  margin-top: 10px;
+  text-align: center;
+}
+
+.solutions-social-share__layout--horizontal .solutions-social-share__options li:hover {
+  background-color: unset;
+}
+
+.solutions-social-share__icon-container {
+  display: flex;
+  align-items: center;
+}
+
+calcite-action {
+  width: var(--solutions-social-share-action-width);
+}
+
+:host([scale=s]) .solutions-social-share__dialog {
+  width: var(--solutions-social-share-width--s);
+}
+
+:host([scale=s]) .solutions-social-share__icon {
+  width: 16px;
+  height: 16px;
+}
+
+:host([scale=s]) .solutions-social-share__option-text {
+  font-size: var(--calcite-font-size--1);
+}
+
+:host([scale=s]) .solutions-social-share__dialog.solutions-social-share__layout--horizontal {
+  width: var(--solutions-social-share-width-horizontal--s);
+}
+
+:host([scale=m]) .solutions-social-share__dialog {
+  width: var(--solutions-social-share-width--m);
+}
+
+:host([scale=m]) .solutions-social-share__icon {
+  width: 24px;
+  height: 24px;
+}
+
+:host([scale=m]) .solutions-social-share__option-text {
+  font-size: var(--calcite-font-size-0);
+}
+
+:host([scale=m]) .solutions-social-share__dialog.solutions-social-share__layout--horizontal {
+  width: var(--solutions-social-share-width-horizontal--m);
+}
+
+:host([scale=l]) .solutions-social-share__dialog {
+  width: var(--solutions-social-share-width--l);
+}
+
+:host([scale=l]) .solutions-social-share__icon {
+  width: 32px;
+  height: 32px;
+}
+
+:host([scale=l]) .solutions-social-share__option-text {
+  font-size: var(--calcite-font-size-1);
+}
+
+:host([scale=l]) .solutions-social-share__dialog.solutions-social-share__layout--horizontal {
+  width: var(--solutions-social-share-width-horizontal--l);
+}`;
+const CALCITE_MODE_DARK = ".calcite-mode-dark";
+const SOCIAL_URL_TEMPLATES = {
   facebook: "https://www.facebook.com/sharer/sharer.php?u={url}",
   x: "https://x.com/intent/post?url={url}",
   linkedIn: "https://www.linkedin.com/sharing/share-offsite/?url={url}",
   bluesky: "https://bsky.app/intent/compose?text={url}"
-}, C = "https://arcg.is/prod/shorten";
-class P extends m {
+};
+const SHORTEN_API = "https://arcg.is/prod/shorten";
+class SolutionSocialShare extends LitElement {
   constructor() {
-    super(...arguments), this.actionApperance = "transparent", this.autoUpdateShareUrl = !0, this.buttonAppearance = "transparent", this.inlineSuccessPopoverPlacement = "trailing", this.mode = "popover", this.popoverButtonIconScale = "m", this.popoverPositioning = "absolute", this.removePopoverOffset = !1, this.scale = "s", this.shareButtonKind = "neutral", this.shareButtonScale = "m", this.shareButtonText = "", this.shareButtonType = "button", this.shareIconsLayout = "vertical", this.shareText = "", this.shareUrl = window.location.href, this.shortenShareUrl = !0, this.socialMedia = !0, this.solutionId = "", this.solutionTitle = "", this.solutionVersion = "", this.successMessage = "", this._copied = !1, this._inlineCopyLinkOpened = !1, this._opened = !1, this._translations = g({ name: "solution-social-share", blocking: !0 }), this._configContextConsumer = b({
-      context: x,
-      subscribe: !0
-    }), this._copyLinkPopoverRef = n(), this._dialogContentRef = n(), this._popoverActionRef = n(), this._popoverButtonRef = n(), this._popoverRef = n(), this._shareListRef = n();
+    super(...arguments);
+    this.actionApperance = "transparent";
+    this.autoUpdateShareUrl = true;
+    this.buttonAppearance = "transparent";
+    this.inlineSuccessPopoverPlacement = "trailing";
+    this.mode = "popover";
+    this.popoverButtonIconScale = "m";
+    this.popoverPositioning = "absolute";
+    this.removePopoverOffset = false;
+    this.scale = "s";
+    this.shareButtonKind = "neutral";
+    this.shareButtonScale = "m";
+    this.shareButtonText = "";
+    this.shareButtonType = "button";
+    this.shareIconsLayout = "vertical";
+    this.shareText = "";
+    this.shareUrl = window.location.href;
+    this.shortenShareUrl = true;
+    this.socialMedia = true;
+    this.solutionId = "";
+    this.solutionTitle = "";
+    this.solutionVersion = "";
+    this.successMessage = "";
+    this._copied = false;
+    this._inlineCopyLinkOpened = false;
+    this._opened = false;
+    this._translations = useT9n({ name: "solution-social-share", blocking: true });
+    this._configContextConsumer = useContextConsumer({
+      context: configContext,
+      subscribe: true
+    });
+    this._copyLinkPopoverRef = createRef();
+    this._dialogContentRef = createRef();
+    this._popoverActionRef = createRef();
+    this._popoverButtonRef = createRef();
+    this._popoverRef = createRef();
+    this._shareListRef = createRef();
   }
   static {
-    this.properties = { actionApperance: 1, autoUpdateShareUrl: 5, buttonAppearance: 1, inlineSuccessPopoverPlacement: 3, mode: 3, popoverButtonIconScale: 3, popoverPositioning: 3, removePopoverOffset: 7, scale: 3, shareButtonKind: 3, shareButtonScale: 3, shareButtonText: 1, shareButtonType: 3, shareIconsLayout: 3, shareText: 3, shareUrl: 1, shortenShareUrl: 7, socialMedia: 7, solutionId: 1, solutionTitle: 1, solutionVersion: 1, successMessage: 3, _copied: 16, _inlineCopyLinkOpened: 16, _opened: 16, _translations: 16 };
+    this.properties = { actionApperance: 1, autoUpdateShareUrl: [5, {}, { type: Boolean }], buttonAppearance: 1, inlineSuccessPopoverPlacement: [3, {}, { reflect: true }], mode: [3, {}, { reflect: true }], popoverButtonIconScale: [3, {}, { reflect: true }], popoverPositioning: [3, {}, { reflect: true }], removePopoverOffset: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], shareButtonKind: [3, {}, { reflect: true }], shareButtonScale: [3, {}, { reflect: true }], shareButtonText: 1, shareButtonType: [3, {}, { reflect: true }], shareIconsLayout: [3, {}, { reflect: true }], shareText: [3, {}, { reflect: true }], shareUrl: 1, shortenShareUrl: [7, {}, { reflect: true, type: Boolean }], socialMedia: [7, {}, { reflect: true, type: Boolean }], solutionId: 1, solutionTitle: 1, solutionVersion: 1, successMessage: [3, {}, { reflect: true }], _copied: [16, {}, { state: true }], _inlineCopyLinkOpened: [16, {}, { state: true }], _opened: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
   }
   static {
-    this.styles = R;
+    this.styles = styles;
   }
   get _telemetry() {
     return this._configContextConsumer.value?.telemetrySession;
   }
   loaded() {
-    this._setupAutoCloseListeners(), this.mode === "popover" && this._popoverRef.value && (this._opened && (this._popoverRef.value.open = !0), this.listenOn(this._popoverRef.value, "calcitePopoverOpen", () => {
-      if (!this._shareListRef.value)
-        return;
-      this._shareListRef.value.children[0].focus();
-    }), this.listenOn(this._popoverRef.value, "keydown", this._handlePopoverRefKeyDown));
+    this._setupAutoCloseListeners();
+    if (this.mode === "popover" && this._popoverRef.value) {
+      if (this._opened) {
+        this._popoverRef.value.open = true;
+      }
+      this.listenOn(this._popoverRef.value, "calcitePopoverOpen", () => {
+        if (!this._shareListRef.value) {
+          return;
+        }
+        const firstNode = this._shareListRef.value.children[0];
+        firstNode.focus();
+      });
+      this.listenOn(this._popoverRef.value, "keydown", this._handlePopoverRefKeyDown);
+    }
   }
   render() {
-    const o = this._copied && this.mode === "popover" ? this._renderSuccess() : e`<div class=solutions-social-share__dialog-content>${this._renderOptions()}</div>`, s = this.shareIconsLayout === "vertical" ? " solutions-social-share__layout--vertical" : " solutions-social-share__layout--horizontal", t = ` calcite-mode-${this.el.closest(L) ? "dark" : "light"}`, i = e`<div class=${`solutions-social-share__dialog${s}${t}`} ${r(this._dialogContentRef)}>${o}</div>`, a = this.removePopoverOffset ? 0 : 6;
+    const content = this._copied && this.mode === "popover" ? this._renderSuccess() : html`<div class=solutions-social-share__dialog-content>${this._renderOptions()}</div>`;
+    const layoutClass = this.shareIconsLayout === "vertical" ? ` ${"solutions-social-share__layout--vertical"}` : ` ${"solutions-social-share__layout--horizontal"}`;
+    const mode = ` calcite-mode-${!!this.el.closest(CALCITE_MODE_DARK) ? "dark" : "light"}`;
+    const dialogContent = html`<div class=${`${"solutions-social-share__dialog"}${layoutClass}${mode}`} ${ref(this._dialogContentRef)}>${content}</div>`;
+    const defaultOffset = 6;
+    const offsetDistance = this.removePopoverOffset ? 0 : defaultOffset;
     return this.mode === "popover" ? [
-      e`<calcite-popover .label=${this._translations.share?.label ?? ""} reference-element=shareButton placement=bottom-start .scale=${this.scale} overlay-positioning=${this.popoverPositioning ?? h} offset-distance=${a ?? h} pointer-disabled=${this.removePopoverOffset ?? h} ${r(this._popoverRef)}>${i}</calcite-popover>`,
+      html`<calcite-popover .label=${this._translations.share?.label ?? ""} reference-element=shareButton placement=bottom-start .scale=${this.scale} overlay-positioning=${this.popoverPositioning ?? nothing} offset-distance=${offsetDistance ?? nothing} pointer-disabled=${this.removePopoverOffset ?? nothing} ${ref(this._popoverRef)}>${dialogContent}</calcite-popover>`,
       this._renderButton()
     ] : [
-      i,
-      e`<calcite-popover .label=${this._translations.share?.label ?? ""} reference-element=copyToClipboard .placement=${this.inlineSuccessPopoverPlacement} .scale=${this.scale} overlay-positioning=fixed ${r(this._copyLinkPopoverRef)}>${this._renderSuccess()}</calcite-popover>`
+      dialogContent,
+      html`<calcite-popover .label=${this._translations.share?.label ?? ""} reference-element=copyToClipboard .placement=${this.inlineSuccessPopoverPlacement} .scale=${this.scale} overlay-positioning=fixed ${ref(this._copyLinkPopoverRef)}>${this._renderSuccess()}</calcite-popover>`
     ];
   }
   _setupAutoCloseListeners() {
-    this.listenOn(document.documentElement, "click", this._autoCloseCallback), this.mode === "popover" && this._popoverRef.value ? (this.listenOn(this._popoverRef.value, "click", this._stopPropagationCallback), this.listenOn(this._popoverRef.value, "calcitePopoverClose", this._resetPopoverCopyState)) : this._dialogContentRef.value && this.listenOn(this._dialogContentRef.value, "click", this._stopPropagationCallback);
+    this.listenOn(document.documentElement, "click", this._autoCloseCallback);
+    if (this.mode === "popover" && this._popoverRef.value) {
+      this.listenOn(this._popoverRef.value, "click", this._stopPropagationCallback);
+      this.listenOn(this._popoverRef.value, "calcitePopoverClose", this._resetPopoverCopyState);
+    } else {
+      if (this._dialogContentRef.value) {
+        this.listenOn(this._dialogContentRef.value, "click", this._stopPropagationCallback);
+      }
+    }
   }
-  _handlePopoverRefKeyDown(o) {
-    if (o.code === "Tab") {
-      if (!this._shareListRef.value)
+  _handlePopoverRefKeyDown(e) {
+    if (e.code === "Tab") {
+      if (!this._shareListRef.value) {
         return;
-      const s = o.target, t = this._shareListRef.value.children[0], i = this._shareListRef.value.children[this._shareListRef.value.children.length - 1];
-      o.shiftKey && s === t ? (o.preventDefault(), i.focus()) : !o.shiftKey && s === i && (o.preventDefault(), t.focus());
-    } else o.code === "Escape" && (this._closePopover(), this.shareButtonType === "button" ? this._popoverButtonRef.value?.setFocus() : this._popoverActionRef.value?.setFocus());
+      }
+      const node = e.target;
+      const firstFocusableEl = this._shareListRef.value.children[0];
+      const lastFocusableEl = this._shareListRef.value.children[this._shareListRef.value.children.length - 1];
+      if (e.shiftKey && node === firstFocusableEl) {
+        e.preventDefault();
+        lastFocusableEl.focus();
+      } else if (!e.shiftKey && node === lastFocusableEl) {
+        e.preventDefault();
+        firstFocusableEl.focus();
+      }
+    } else if (e.code === "Escape") {
+      this._closePopover();
+      if (this.shareButtonType === "button") {
+        this._popoverButtonRef.value?.setFocus();
+      } else {
+        this._popoverActionRef.value?.setFocus();
+      }
+    }
   }
   _autoCloseCallback() {
-    this.mode === "popover" ? (this._opened = !1, this._popoverRef.value.open = this._opened) : (this._copyLinkPopoverRef.value && (this._copyLinkPopoverRef.value.open = !1), this._inlineCopyLinkOpened = !1);
+    if (this.mode === "popover") {
+      this._opened = false;
+      this._popoverRef.value.open = this._opened;
+    } else {
+      if (this._copyLinkPopoverRef.value) {
+        this._copyLinkPopoverRef.value.open = false;
+      }
+      this._inlineCopyLinkOpened = false;
+    }
   }
-  _stopPropagationCallback(o) {
-    o.stopPropagation();
+  _stopPropagationCallback(event) {
+    event.stopPropagation();
   }
   _resetPopoverCopyState() {
-    this.shareButtonType === "button" ? this._popoverButtonRef.value?.setFocus() : this._popoverActionRef.value?.setFocus(), setTimeout(() => {
-      this._copied = !1;
+    if (this.shareButtonType === "button") {
+      this._popoverButtonRef.value?.setFocus();
+    } else {
+      this._popoverActionRef.value?.setFocus();
+    }
+    setTimeout(() => {
+      this._copied = false;
     }, 200);
   }
   _renderButton() {
-    const o = this.shareButtonScale != null ? this.shareButtonScale : this.scale;
-    return this.shareButtonType === "button" ? e`<calcite-button .appearance=${this.buttonAppearance} class=solutions-social-share__popover-button id=shareButton .kind=${this.shareButtonKind} .label=${this._translations.share?.label} @click=${this._togglePopover.bind(this)} .scale=${o} title=${this._translations.share?.label ?? h} ${r(this._popoverButtonRef)}>${this.shareButtonText}</calcite-button>` : e`<calcite-action alignment=center .appearance=${this.actionApperance} class=solutions-social-share__popover-button id=shareButton .label=${this._translations.share?.label} @click=${this._togglePopover.bind(this)} .scale=${o} text title=${this._translations.share?.label ?? h} ${r(this._popoverActionRef)}><div class=solutions-social-share__icon-container><calcite-icon icon=share .scale=${this.popoverButtonIconScale}></calcite-icon></div></calcite-action>`;
+    const scale = this.shareButtonScale != null ? this.shareButtonScale : this.scale;
+    return this.shareButtonType === "button" ? html`<calcite-button .appearance=${this.buttonAppearance} class=solutions-social-share__popover-button id=shareButton .kind=${this.shareButtonKind} .label=${this._translations.share?.label} @click=${this._togglePopover.bind(this)} .scale=${scale} title=${this._translations.share?.label ?? nothing} ${ref(this._popoverButtonRef)}>${this.shareButtonText}</calcite-button>` : html`<calcite-action alignment=center .appearance=${this.actionApperance} class=solutions-social-share__popover-button id=shareButton .label=${this._translations.share?.label} @click=${this._togglePopover.bind(this)} .scale=${scale} text title=${this._translations.share?.label ?? nothing} ${ref(this._popoverActionRef)}><div class=solutions-social-share__icon-container><calcite-icon icon=share .scale=${this.popoverButtonIconScale}></calcite-icon></div></calcite-action>`;
   }
   _renderSuccess() {
-    const o = this._translations.success;
-    return e`<div class=solutions-social-share__success><span class=solutions-social-share__success-header><span class=solutions-social-share__success-icon><calcite-icon icon=check-circle-f .scale=${this.scale}></calcite-icon></span>${o?.label}</span><span class=solutions-social-share__success-message>${this.successMessage || o?.url}</span></div>`;
+    const success = this._translations.success;
+    return html`<div class=solutions-social-share__success><span class=solutions-social-share__success-header><span class=solutions-social-share__success-icon><calcite-icon icon=check-circle-f .scale=${this.scale}></calcite-icon></span>${success?.label}</span><span class=solutions-social-share__success-message>${this.successMessage || success?.url}</span></div>`;
   }
   _renderOptions() {
-    const o = this._translations.options, s = document.dir === "rtl" ? " solutions-social-share__option-text--rtl" : "";
-    return e`<ul class=solutions-social-share__options role=menu ${r(this._shareListRef)}><li id=copyToClipboard @click=${this._handleShareItem.bind(this, "link")} @keydown=${this._handleOptionKeyDown("link")} role=menuitem tabindex=0><span class=solutions-social-share__icon><calcite-icon icon=link .scale=${this.scale}></calcite-icon></span><span class=${`solutions-social-share__option-text${s}`}>${o?.link?.label}</span></li>${this.socialMedia ? [
-      e`<li @click=${this._handleShareItem.bind(this, "facebook")} @keydown=${this._handleOptionKeyDown("facebook")} role=menuitem tabindex=0><span class=solutions-social-share__icon>${this._renderFacebookIcon()}</span><span class=${`solutions-social-share__option-text${s}`}>${o?.facebook?.label}</span></li>`,
-      e`<li @click=${this._handleShareItem.bind(this, "x")} @keydown=${this._handleOptionKeyDown("x")} role=menuitem tabindex=0><span class=solutions-social-share__icon>${this._renderXIcon()}</span><span class=${`solutions-social-share__option-text${s}`}>\r\n                X</span></li>`,
-      e`<li @click=${this._handleShareItem.bind(this, "linkedIn")} @keydown=${this._handleOptionKeyDown("linkedIn")} role=menuitem tabindex=0><span class=solutions-social-share__icon>${this._renderLinkedInIcon()}</span><span class=${`solutions-social-share__option-text${s}`}>${o?.linkedIn?.label}</span></li>`,
-      e`<li @click=${this._handleShareItem.bind(this, "bluesky")} @keydown=${this._handleOptionKeyDown("bluesky")} role=menuitem tabindex=0><span class=solutions-social-share__icon>${this._renderBlueSkyIcon()}</span><span class=${`solutions-social-share__option-text${s}`}>${o?.blueSky?.label}</span></li>`
+    const options = this._translations.options;
+    const optionText_RTL = document.dir === "rtl" ? ` ${"solutions-social-share__option-text--rtl"}` : "";
+    return html`<ul class=solutions-social-share__options role=menu ${ref(this._shareListRef)}><li id=copyToClipboard @click=${this._handleShareItem.bind(this, "link")} @keydown=${this._handleOptionKeyDown("link")} role=menuitem tabindex=0><span class=solutions-social-share__icon><calcite-icon icon=link .scale=${this.scale}></calcite-icon></span><span class=${`${"solutions-social-share__option-text"}${optionText_RTL}`}>${options?.link?.label}</span></li>${this.socialMedia ? [
+      html`<li @click=${this._handleShareItem.bind(this, "facebook")} @keydown=${this._handleOptionKeyDown("facebook")} role=menuitem tabindex=0><span class=solutions-social-share__icon>${this._renderFacebookIcon()}</span><span class=${`${"solutions-social-share__option-text"}${optionText_RTL}`}>${options?.facebook?.label}</span></li>`,
+      html`<li @click=${this._handleShareItem.bind(this, "x")} @keydown=${this._handleOptionKeyDown("x")} role=menuitem tabindex=0><span class=solutions-social-share__icon>${this._renderXIcon()}</span><span class=${`${"solutions-social-share__option-text"}${optionText_RTL}`}>\r\n                X</span></li>`,
+      html`<li @click=${this._handleShareItem.bind(this, "linkedIn")} @keydown=${this._handleOptionKeyDown("linkedIn")} role=menuitem tabindex=0><span class=solutions-social-share__icon>${this._renderLinkedInIcon()}</span><span class=${`${"solutions-social-share__option-text"}${optionText_RTL}`}>${options?.linkedIn?.label}</span></li>`,
+      html`<li @click=${this._handleShareItem.bind(this, "bluesky")} @keydown=${this._handleOptionKeyDown("bluesky")} role=menuitem tabindex=0><span class=solutions-social-share__icon>${this._renderBlueSkyIcon()}</span><span class=${`${"solutions-social-share__option-text"}${optionText_RTL}`}>${options?.blueSky?.label}</span></li>`
     ] : null}</ul>`;
   }
-  _handleOptionKeyDown(o) {
-    return (s) => {
-      const t = s.code;
-      (t === "Space" || t === "Enter" || t === "NumpadEnter") && this._handleShareItem(o);
+  _handleOptionKeyDown(type) {
+    return (e) => {
+      const keyCode = e.code;
+      const canActivate = keyCode === "Space" || keyCode === "Enter" || keyCode === "NumpadEnter";
+      if (!canActivate) {
+        return;
+      }
+      this._handleShareItem(type);
     };
   }
   _renderFacebookIcon() {
-    return e`<svg height=100% style=${l({ fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" })} version=1.1 viewBox="0 0 512 512" width=100% xmlns=http://www.w3.org/2000/svg>${p`<g><path d="M512,256c0,-141.385 -114.615,-256 -256,-256c-141.385,0 -256,114.615 -256,256c0,127.777 93.616,233.685 216,252.89l0,-178.89l-65,0l0,-74l65,0l0,-56.4c0,-64.16 38.219,-99.6 96.695,-99.6c28.009,0 57.305,5 57.305,5l0,63l-32.281,0c-31.801,0 -41.719,19.733 -41.719,39.978l0,48.022l71,0l-11.35,74l-59.65,0l0,178.89c122.385,-19.205 216,-125.113 216,-252.89Z" style=${l({ fill: "#1877f2", fillRule: "nonzero" })} /><path d="M355.65,330l11.35,-74l-71,0l0,-48.022c0,-20.245 9.917,-39.978 41.719,-39.978l32.281,0l0,-63c0,0 -29.297,-5 -57.305,-5c-58.476,0 -96.695,35.44 -96.695,99.6l0,56.4l-65,0l0,74l65,0l0,178.89c13.033,2.045 26.392,3.11 40,3.11c13.608,0 26.966,-1.065 40,-3.11l0,-178.89l59.65,0Z" style=${l({ fill: "#fff", fillRule: "nonzero" })} /></g>`}</svg>`;
+    return html`<svg height=100% style=${safeStyleMap({ fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" })} version=1.1 viewBox="0 0 512 512" width=100% xmlns=http://www.w3.org/2000/svg>${svg`<g><path d="M512,256c0,-141.385 -114.615,-256 -256,-256c-141.385,0 -256,114.615 -256,256c0,127.777 93.616,233.685 216,252.89l0,-178.89l-65,0l0,-74l65,0l0,-56.4c0,-64.16 38.219,-99.6 96.695,-99.6c28.009,0 57.305,5 57.305,5l0,63l-32.281,0c-31.801,0 -41.719,19.733 -41.719,39.978l0,48.022l71,0l-11.35,74l-59.65,0l0,178.89c122.385,-19.205 216,-125.113 216,-252.89Z" style=${safeStyleMap({ fill: "#1877f2", fillRule: "nonzero" })} /><path d="M355.65,330l11.35,-74l-71,0l0,-48.022c0,-20.245 9.917,-39.978 41.719,-39.978l32.281,0l0,-63c0,0 -29.297,-5 -57.305,-5c-58.476,0 -96.695,35.44 -96.695,99.6l0,56.4l-65,0l0,74l65,0l0,178.89c13.033,2.045 26.392,3.11 40,3.11c13.608,0 26.966,-1.065 40,-3.11l0,-178.89l59.65,0Z" style=${safeStyleMap({ fill: "#fff", fillRule: "nonzero" })} /></g>`}</svg>`;
   }
   _renderXIcon() {
-    return e`<svg height=100% width=100% class="solutions-social-share__x-logo" viewBox="0 0 1200 1227" fill=none xmlns=http://www.w3.org/2000/svg>${p`<rect height=400 style=${l({ fill: "none" })} width=400 x=56 y=56 /><path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill=currentColor />`}</svg>`;
+    return html`<svg height=100% width=100% class="solutions-social-share__x-logo" viewBox="0 0 1200 1227" fill=none xmlns=http://www.w3.org/2000/svg>${svg`<rect height=400 style=${safeStyleMap({ fill: "none" })} width=400 x=56 y=56 /><path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill=currentColor />`}</svg>`;
   }
   _renderBlueSkyIcon() {
-    return e`<svg height=100% width=100% fill=#0f85fe xmlns=http://www.w3.org/2000/svg viewBox="0 0 512 512">${p`<path d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z" />`}</svg>`;
+    return html`<svg height=100% width=100% fill=#0f85fe xmlns=http://www.w3.org/2000/svg viewBox="0 0 512 512">${svg`<path d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z" />`}</svg>`;
   }
   _renderLinkedInIcon() {
-    return e`<svg height=100% style=${l({ fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" })} version=1.1 viewBox="0 0 512 512" width=100% xmlns=http://www.w3.org/2000/svg>${p`<g id=g5891><path d="M512,64c0,-35.323 -28.677,-64 -64,-64l-384,0c-35.323,0 -64,28.677 -64,64l0,384c0,35.323 28.677,64 64,64l384,0c35.323,0 64,-28.677 64,-64l0,-384Z" id=background style=${l({ fill: "#2867b2" })} /><g id=shapes><rect height=257.962 id=rect11 style=${l({ fill: "#fff" })} width=85.76 x=61.053 y=178.667 /><path d="M104.512,54.28c-29.341,0 -48.512,19.29 -48.512,44.573c0,24.752 18.588,44.574 47.377,44.574l0.554,0c29.903,0 48.516,-19.822 48.516,-44.574c-0.555,-25.283 -18.611,-44.573 -47.935,-44.573Z" id=path13-0 style=${l({ fill: "#fff", fillRule: "nonzero" })} /><path d="M357.278,172.601c-45.49,0 -65.866,25.017 -77.276,42.589l0,-36.523l-85.738,0c1.137,24.197 0,257.961 0,257.961l85.737,0l0,-144.064c0,-7.711 0.554,-15.42 2.827,-20.931c6.188,-15.4 20.305,-31.352 43.993,-31.352c31.012,0 43.436,23.664 43.436,58.327l0,138.02l85.741,0l0,-147.93c0,-79.237 -42.305,-116.097 -98.72,-116.097Z" id=path15 style=${l({ fill: "#fff", fillRule: "nonzero" })} /></g></g>`}</svg>`;
+    return html`<svg height=100% style=${safeStyleMap({ fillRule: "evenodd", clipRule: "evenodd", strokeLinejoin: "round", strokeMiterlimit: "2" })} version=1.1 viewBox="0 0 512 512" width=100% xmlns=http://www.w3.org/2000/svg>${svg`<g id=g5891><path d="M512,64c0,-35.323 -28.677,-64 -64,-64l-384,0c-35.323,0 -64,28.677 -64,64l0,384c0,35.323 28.677,64 64,64l384,0c35.323,0 64,-28.677 64,-64l0,-384Z" id=background style=${safeStyleMap({ fill: "#2867b2" })} /><g id=shapes><rect height=257.962 id=rect11 style=${safeStyleMap({ fill: "#fff" })} width=85.76 x=61.053 y=178.667 /><path d="M104.512,54.28c-29.341,0 -48.512,19.29 -48.512,44.573c0,24.752 18.588,44.574 47.377,44.574l0.554,0c29.903,0 48.516,-19.822 48.516,-44.574c-0.555,-25.283 -18.611,-44.573 -47.935,-44.573Z" id=path13-0 style=${safeStyleMap({ fill: "#fff", fillRule: "nonzero" })} /><path d="M357.278,172.601c-45.49,0 -65.866,25.017 -77.276,42.589l0,-36.523l-85.738,0c1.137,24.197 0,257.961 0,257.961l85.737,0l0,-144.064c0,-7.711 0.554,-15.42 2.827,-20.931c6.188,-15.4 20.305,-31.352 43.993,-31.352c31.012,0 43.436,23.664 43.436,58.327l0,138.02l85.741,0l0,-147.93c0,-79.237 -42.305,-116.097 -98.72,-116.097Z" id=path15 style=${safeStyleMap({ fill: "#fff", fillRule: "nonzero" })} /></g></g>`}</svg>`;
   }
-  _togglePopover(o) {
-    o.stopPropagation(), this._opened = !this._opened, this._popoverRef.value.open = this._opened;
+  _togglePopover(event) {
+    event.stopPropagation();
+    this._opened = !this._opened;
+    this._popoverRef.value.open = this._opened;
   }
   _closePopover() {
-    this._opened = !1, this._popoverRef.value.open = this._opened;
+    this._opened = false;
+    this._popoverRef.value.open = this._opened;
   }
-  async _handleShareItem(o) {
+  async _handleShareItem(type) {
     this._telemetry?.logEvent({
-      category: w.SOLUTION_DETAILS,
+      category: TELEMETRY_CATEGORY.SOLUTION_DETAILS,
       action: "Share",
       dimensions: [
         this.solutionTitle,
         this.solutionId,
         this.solutionVersion,
-        y(o)
+        toTitleCase(type)
       ]
-    }), this.shareUrl = await this._generateShareUrl();
-    let s = null;
-    const t = navigator?.userAgent?.includes("Chrome") ?? !1, i = (navigator?.userAgent?.includes("Safari") ?? !1) && !t;
-    !i && this.shortenShareUrl && (s = await this._shortenUrl(this.shareUrl));
-    let c = s || this.shareUrl;
-    switch (o) {
+    });
+    this.shareUrl = await this._generateShareUrl();
+    let shortenedUrl = null;
+    const isChrome = navigator?.userAgent?.includes("Chrome") ?? false;
+    const isSafari = (navigator?.userAgent?.includes("Safari") ?? false) && !isChrome;
+    if (!isSafari && this.shortenShareUrl) {
+      shortenedUrl = await this._shortenUrl(this.shareUrl);
+    }
+    let urlToUse = shortenedUrl ? shortenedUrl : this.shareUrl;
+    switch (type) {
       case "link":
-        navigator.clipboard.writeText(c), this.mode === "inline" && (this._copyLinkPopoverRef.value.open = !0, setTimeout(() => this._copyLinkPopoverRef.value.open = !1, 3e3)), this._inlineCopyLinkOpened = !0, this._copied = !0, this.mode === "popover" && setTimeout(() => this._closePopover(), 2e3);
+        navigator.clipboard.writeText(urlToUse);
+        if (this.mode === "inline") {
+          this._copyLinkPopoverRef.value.open = true;
+          setTimeout(() => this._copyLinkPopoverRef.value.open = false, 3e3);
+        }
+        this._inlineCopyLinkOpened = true;
+        this._copied = true;
+        if (this.mode === "popover") {
+          setTimeout(() => this._closePopover(), 2e3);
+        }
         return;
       case "facebook":
       case "bluesky":
       case "x":
       case "linkedIn":
         {
-          let a;
-          i && (a = window.open("", "_blank"), this.shortenShareUrl && (c = await this._shortenUrl(this.shareUrl) || c));
-          const u = {
-            url: encodeURI(c)
-          }, _ = o === "x" ? { ...u, text: this.shareText } : u, d = $.substitute(S[o], _);
-          this.mode === "popover" && this._closePopover(), i && a ? (a.location = d, a.focus()) : window.open(encodeURI(d), "_blank");
+          let socialWin;
+          if (isSafari) {
+            socialWin = window.open("", "_blank");
+            if (this.shortenShareUrl) {
+              urlToUse = await this._shortenUrl(this.shareUrl) || urlToUse;
+            }
+          }
+          const urlData = {
+            url: encodeURI(urlToUse)
+          };
+          const data = type === "x" ? { ...urlData, text: this.shareText } : urlData;
+          const url = intl.substitute(SOCIAL_URL_TEMPLATES[type], data);
+          if (this.mode === "popover") {
+            this._closePopover();
+          }
+          if (isSafari && socialWin) {
+            socialWin.location = url;
+            socialWin.focus();
+          } else {
+            window.open(encodeURI(url), "_blank");
+          }
         }
         return;
     }
   }
-  async _shortenUrl(o) {
-    const t = (await k(C, {
+  async _shortenUrl(url) {
+    const _request = await esriRequest(SHORTEN_API, {
       query: {
-        longUrl: o,
+        longUrl: url,
         f: "json"
       }
-    }))?.data?.data?.url;
-    if (t)
-      return t.replace("http://", "https://");
+    });
+    const shortUrl = _request?.data?.data?.url;
+    if (shortUrl) {
+      return shortUrl.replace("http://", "https://");
+    } else {
+      return;
+    }
   }
   _generateShareUrl() {
-    return this.autoUpdateShareUrl && (this.shareUrl = window.location.href), this.shareUrl;
+    if (this.autoUpdateShareUrl) {
+      this.shareUrl = window.location.href;
+    }
+    return this.shareUrl;
   }
 }
-f("solution-social-share", P);
+customElement("solution-social-share", SolutionSocialShare);
 export {
-  P as SolutionSocialShare
+  SolutionSocialShare
 };