@esri/solutions-components 0.8.2 → 0.8.3

package/dist/cjs/instant-apps-social-share.cjs.entry.js

@@ -0,0 +1,515 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b53bfd7c.js');
+const loadModules = require('./loadModules-a67b6702.js');
+const locale = require('./locale-28c7c569.js');
+require('./esri-loader-5b8fbfa4.js');
+require('./_commonjsHelpers-ed90c4ad.js');
+require('./languageUtil-43c3acdc.js');
+
+const instantAppsSocialShareCss = ":host{display:block;--instant-apps-social-share-action-width:initial;--instant-apps-social-share-width--s:200px;--instant-apps-social-share-width--m:280px;--instant-apps-social-share-width--l:320px;--instant-apps-social-share-width-horizontal--s:300px;--instant-apps-social-share-width-horizontal--m:380px;--instant-apps-social-share-width-horizontal--l:420px;--instant-apps-social-share-background-color:var(--calcite-color-foreground-1);--instant-apps-social-share-popover-button-background-color:transparent;--instant-apps-social-share-popover-button-icon-color:var(--calcite-ui-icon-color);--instant-apps-social-share-embed-border:1px solid $border;--instant-apps-social-share-embed-text-area-text:#468540}:host .instant-apps-social-share__popover-button{background-color:var(--instant-apps-social-share-popover-button-background-color)}:host .instant-apps-social-share__popover-button calcite-icon{color:var(--instant-apps-social-share-popover-button-icon-color)}:host .instant-apps-social-share__dialog,:host .instant-apps-social-share__dialog-embed{background-color:var(--instant-apps-social-share-background-color);border:var(--instant-apps-social-share-embed-border)}:host .instant-apps-social-share__dialog{box-sizing:border-box;height:auto;padding:10px 0;border-radius:5px}:host .instant-apps-social-share__options{margin:0;padding:1% 0 0 0;list-style-type:none}:host .instant-apps-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}:host .instant-apps-social-share__options li .instant-apps-social-share__icon,:host .instant-apps-social-share__options li .instant-apps-social-share__option-text{display:inline-block}:host .instant-apps-social-share__options li .instant-apps-social-share__icon{display:flex;align-items:center}:host .instant-apps-social-share__options li .instant-apps-social-share__option-text{width:85%;margin-left:10px;word-break:break-word}:host .instant-apps-social-share__options li .instant-apps-social-share__option-text--rtl{margin-left:0;margin-right:10px}:host .instant-apps-social-share__options li:hover{cursor:pointer;background-color:var(--calcite-color-foreground-2)}:host .instant-apps-social-share__options__x-logo--light path{fill:#000000}:host .instant-apps-social-share__options__x-logo--dark path{fill:#ffffff}:host .instant-apps-social-share__tip{box-sizing:border-box;padding:0 5% 1% 5%}:host .instant-apps-social-share__tip-header{display:flex;align-items:center;color:#007ac2;margin:8px 0 5px 0}:host .instant-apps-social-share__tip-header calcite-icon{margin-right:5px}:host .instant-apps-social-share__tip-content{line-height:17px;margin:0;padding-top:2%}:host .instant-apps-social-share__success{display:flex;flex-direction:column;padding:15px}:host .instant-apps-social-share__success-header{display:flex;align-items:center;font-weight:bold;margin-bottom:10px}:host .instant-apps-social-share__success-icon{display:flex;align-items:center;margin-right:5px}:host .instant-apps-social-share__success-icon calcite-icon{color:var(--calcite-color-status-success)}:host .instant-apps-social-share__success-message{line-height:16px}:host .instant-apps-social-share__embed{box-sizing:border-box;width:100%;padding:5%;margin-bottom:10px;border-top:1px solid #d3d3d3}:host .instant-apps-social-share__embed-header{display:flex;align-items:center;margin-bottom:5px}:host .instant-apps-social-share__embed-header calcite-icon{margin-right:5px}:host .instant-apps-social-share__embed-code-text-area{border:1px solid #d3d3d3}:host .instant-apps-social-share__embed-code-text-area textarea{box-sizing:border-box;padding:4%;border:none;resize:none;background:transparent;width:100%;font-family:var(--calcite-sans-family);color:var(--calcite-color-text-1)}:host .instant-apps-social-share__embed-code-text-area button{display:flex;align-items:center;text-align:start;width:100%;border:none;border-top:1px solid #d3d3d3;background-color:transparent;line-height:16px;font-weight:400;padding:3%;color:var(--calcite-color-text-1)}:host .instant-apps-social-share__embed-code-text-area button calcite-icon{color:#007ac2;margin-right:3px}:host .instant-apps-social-share__embed-code-text-area button:hover{cursor:pointer;background-color:var(--calcite-color-foreground-2);transition:background-color 0.15s ease-out 0s}:host .instant-apps-social-share__embed-text-area-text{font-weight:600;color:var(--instant-apps-social-share-embed-text-area-text)}:host .instant-apps-social-share__embed .instant-apps-social-share__text-area--rtl{text-align:left;direction:ltr}:host .instant-apps-social-share__embed-dimensions{display:flex;justify-content:space-between;margin-top:10px}:host .instant-apps-social-share__embed-dimensions-input{width:47%;box-sizing:border-box}:host .instant-apps-social-share__embed-dimensions-input input{border:1px solid #d3d3d3;width:100%;height:25px;font-family:var(--calcite-sans-family)}:host .instant-apps-social-share__layout--horizontal .instant-apps-social-share__options{display:flex;justify-content:space-around;margin-bottom:8%}:host .instant-apps-social-share__layout--horizontal .instant-apps-social-share__options li{flex-direction:column;padding:0}:host .instant-apps-social-share__layout--horizontal .instant-apps-social-share__options li .instant-apps-social-share__option-text{word-break:break-word;margin-left:0;margin-top:10px;text-align:center}:host .instant-apps-social-share__layout--horizontal .instant-apps-social-share__options li:hover{background-color:unset}:host .instant-apps-social-share__icon-container{display:flex;align-items:center}:host calcite-action{width:var(--instant-apps-social-share-action-width)}:host([scale=s]) .instant-apps-social-share__dialog{width:var(--instant-apps-social-share-width--s)}:host([scale=s]) .instant-apps-social-share__icon{width:16px;height:16px}:host([scale=s]) .instant-apps-social-share__option-text{font-size:var(--calcite-font-size--1)}:host([scale=s]) .instant-apps-social-share__dialog.instant-apps-social-share__layout--horizontal{width:var(--instant-apps-social-share-width-horizontal--s)}:host([scale=s]) .instant-apps-social-share__tip-header,:host([scale=s]) .instant-apps-social-share__tip-content,:host([scale=s]) .instant-apps-social-share__embed-header,:host([scale=s]) .instant-apps-social-share__embed-dimensions-input{font-size:var(--calcite-font-size--2)}:host([scale=m]) .instant-apps-social-share__dialog{width:var(--instant-apps-social-share-width--m)}:host([scale=m]) .instant-apps-social-share__icon{width:24px;height:24px}:host([scale=m]) .instant-apps-social-share__option-text{font-size:var(--calcite-font-size-0)}:host([scale=m]) .instant-apps-social-share__dialog.instant-apps-social-share__layout--horizontal{width:var(--instant-apps-social-share-width-horizontal--m)}:host([scale=m]) .instant-apps-social-share__tip-header,:host([scale=m]) .instant-apps-social-share__tip-content,:host([scale=m]) .instant-apps-social-share__embed-header,:host([scale=m]) .instant-apps-social-share__embed-dimensions-input{font-size:var(--calcite-font-size--1)}:host([scale=l]) .instant-apps-social-share__dialog{width:var(--instant-apps-social-share-width--l)}:host([scale=l]) .instant-apps-social-share__icon{width:32px;height:32px}:host([scale=l]) .instant-apps-social-share__option-text{font-size:var(--calcite-font-size-1)}:host([scale=l]) .instant-apps-social-share__dialog.instant-apps-social-share__layout--horizontal{width:var(--instant-apps-social-share-width-horizontal--l)}:host([scale=l]) .instant-apps-social-share__tip-header,:host([scale=l]) .instant-apps-social-share__tip-content,:host([scale=l]) .instant-apps-social-share__embed-header,:host([scale=l]) .instant-apps-social-share__embed-dimensions-input{font-size:var(--calcite-font-size-0)}";
+
+const base = 'instant-apps-social-share';
+const CALCITE_MODE_DARK = '.calcite-mode-dark';
+const CSS = {
+    base,
+    dialog: `${base}__dialog`,
+    dialogEmbed: `${base}__dialog-embed`,
+    dialogContent: `${base}__dialog-content`,
+    options: `${base}__options`,
+    tipContainer: `${base}__tip`,
+    tipHeader: `${base}__tip-header`,
+    tipContent: `${base}__tip-content`,
+    icon: `${base}__icon`,
+    iconContainer: `${base}__icon-container`,
+    optionText: `${base}__option-text`,
+    popoverButton: `${base}__popover-button`,
+    layout: {
+        vertical: `${base}__layout--vertical`,
+        horizontal: `${base}__layout--horizontal`,
+    },
+    xLogo: {
+        light: `${base}__x-logo--light`,
+        dark: `${base}__x-logo--dark`,
+    },
+    success: {
+        container: `${base}__success`,
+        header: `${base}__success-header`,
+        message: `${base}__success-message`,
+        icon: `${base}__success-icon`,
+    },
+    embed: {
+        container: `${base}__embed`,
+        header: `${base}__embed-header`,
+        embedCode: {
+            container: `${base}__embed-code`,
+            textArea: `${base}__embed-code-text-area`,
+            copyButton: `${base}__embed-code-copy-button`,
+        },
+        textAreaText: `${base}__embed-text-area-text`,
+        dimensions: {
+            container: `${base}__embed-dimensions`,
+            input: `${base}__embed-dimensions-input`,
+        },
+    },
+    rtl: {
+        optionText: `${base}__option-text--rtl`,
+        textArea: `${base}__text-area--rtl`,
+    },
+};
+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}',
+};
+const SHORTEN_API = 'https://arcg.is/prod/shorten';
+const MIN_WIDTH_HEIGHT_VALUE = '1';
+const InstantAppsSocialShare = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mode = 'popover';
+        this.shareUrl = window.location.href;
+        this.autoUpdateShareUrl = true;
+        this.shareText = '';
+        this.embed = false;
+        this.shareButtonColor = 'neutral';
+        this.shareButtonType = 'button';
+        this.shareButtonScale = undefined;
+        this.iframeInnerText = '';
+        this.popoverButtonIconScale = 'm';
+        this.view = undefined;
+        this.displayTipText = true;
+        this.shortenShareUrl = true;
+        this.socialMedia = true;
+        this.shareIconsLayout = 'vertical';
+        this.scale = 'm';
+        this.successMessage = '';
+        this.defaultUrlParams = null;
+        this.inlineSuccessPopoverPlacement = 'trailing';
+        this.messages = undefined;
+        this.opened = false;
+        this.copied = false;
+        this.inlineCopyLinkOpened = false;
+        this.inlineCopyEmbedOpened = false;
+        this.embedWidth = 400;
+        this.embedHeight = 600;
+    }
+    componentDidLoad() {
+        var _a, _b;
+        locale.getMessages(this);
+        this.setupAutoCloseListeners();
+        if (this.mode === 'popover') {
+            if (this.opened)
+                this.popoverRef.open = true;
+            this.popoverRef.addEventListener('calcitePopoverOpen', () => {
+                if (!this.shareListRef)
+                    return;
+                const firstNode = this.shareListRef.children[0];
+                firstNode.focus();
+            });
+            this.popoverRef.addEventListener('keydown', this.handlePopoverRefKeyDown.bind(this));
+        }
+        if (this.embed) {
+            (_a = this.embedWidthRef) === null || _a === void 0 ? void 0 : _a.addEventListener('change', this.updateDimensions.bind(this, 'width'));
+            (_b = this.embedHeightRef) === null || _b === void 0 ? void 0 : _b.addEventListener('change', this.updateDimensions.bind(this, 'height'));
+        }
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        document.documentElement.removeEventListener('click', this.autoCloseCallback.bind(this));
+        if (this.mode === 'popover') {
+            if (this.popoverRef != null) {
+                this.popoverRef.removeEventListener('click', this.stopPropagationCallback.bind(this));
+                this.popoverRef.removeEventListener('calcitePopoverClose', this.resetPopoverCopyState.bind(this));
+                this.popoverRef.removeEventListener('keydown', this.handlePopoverRefKeyDown.bind(this));
+            }
+        }
+        else {
+            (_a = this.embedWidthRef) === null || _a === void 0 ? void 0 : _a.removeEventListener('change', this.updateDimensions.bind(this));
+            (_b = this.embedHeightRef) === null || _b === void 0 ? void 0 : _b.removeEventListener('change', this.updateDimensions.bind(this));
+            (_c = this.dialogContentRef) === null || _c === void 0 ? void 0 : _c.removeEventListener('click', this.stopPropagationCallback.bind(this));
+        }
+    }
+    setupAutoCloseListeners() {
+        var _a, _b, _c;
+        document.documentElement.addEventListener('click', this.autoCloseCallback.bind(this));
+        if (this.mode === 'popover') {
+            (_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.stopPropagationCallback.bind(this));
+            (_b = this.popoverRef) === null || _b === void 0 ? void 0 : _b.addEventListener('calcitePopoverClose', this.resetPopoverCopyState.bind(this));
+        }
+        else {
+            (_c = this.dialogContentRef) === null || _c === void 0 ? void 0 : _c.addEventListener('click', this.stopPropagationCallback.bind(this));
+        }
+    }
+    handlePopoverRefKeyDown(e) {
+        var _a, _b;
+        if (e.code === 'Tab') {
+            if (!this.shareListRef)
+                return;
+            const node = e.target;
+            const firstFocusableEl = this.shareListRef.children[0];
+            const lastFocusableEl = this.shareListRef.children[((_a = this.shareListRef) === null || _a === void 0 ? void 0 : _a.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();
+            (_b = this.popoverButtonRef) === null || _b === void 0 ? void 0 : _b.setFocus();
+        }
+    }
+    autoCloseCallback() {
+        if (this.mode === 'popover') {
+            this.opened = false;
+            this.popoverRef.open = this.opened;
+        }
+        else {
+            if (this.copyLinkPopoverRef)
+                this.copyLinkPopoverRef.open = false;
+            this.inlineCopyLinkOpened = false;
+            if (this.copyEmbedPopoverRef)
+                this.copyEmbedPopoverRef.open = false;
+            this.inlineCopyEmbedOpened = false;
+        }
+    }
+    stopPropagationCallback(event) {
+        event.stopPropagation();
+    }
+    resetPopoverCopyState() {
+        var _a;
+        (_a = this.popoverButtonRef) === null || _a === void 0 ? void 0 : _a.setFocus();
+        setTimeout(() => {
+            this.copied = false;
+        }, 200);
+    }
+    updateDimensions(type) {
+        var _a, _b;
+        if (type === 'width') {
+            const value = (_a = this.embedWidthRef) === null || _a === void 0 ? void 0 : _a.value;
+            this.embedWidth = parseInt(value);
+        }
+        else {
+            const value = (_b = this.embedHeightRef) === null || _b === void 0 ? void 0 : _b.value;
+            this.embedHeight = parseInt(value);
+        }
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        const content = this.copied && this.mode === 'popover' ? (this.renderSuccess()) : (index.h("div", { class: CSS.dialogContent }, this.renderOptions(), this.displayTipText ? this.renderTip() : null, this.embed ? this.renderEmbed() : null));
+        const layoutClass = this.shareIconsLayout === 'vertical' ? ` ${CSS.layout.vertical}` : ` ${CSS.layout.horizontal}`;
+        const dialogContent = (index.h("div", { ref: el => (this.dialogContentRef = el), class: `${CSS.dialog}${layoutClass}` }, content));
+        return (index.h(index.Host, null, this.mode === 'popover'
+            ? [
+                index.h("calcite-popover", { ref: (el) => (this.popoverRef = el), label: (_b = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.share) === null || _b === void 0 ? void 0 : _b.label, referenceElement: "shareButton", placement: "bottom-start", scale: this.scale }, dialogContent),
+                this.renderButton(),
+            ]
+            : [
+                dialogContent,
+                index.h("calcite-popover", { ref: (el) => (this.copyLinkPopoverRef = el), label: (_d = (_c = this.messages) === null || _c === void 0 ? void 0 : _c.share) === null || _d === void 0 ? void 0 : _d.label, referenceElement: "copyToClipboard", placement: this.inlineSuccessPopoverPlacement, scale: this.scale }, this.renderSuccess()),
+                index.h("calcite-popover", { ref: (el) => (this.copyEmbedPopoverRef = el), label: (_f = (_e = this.messages) === null || _e === void 0 ? void 0 : _e.share) === null || _f === void 0 ? void 0 : _f.label, referenceElement: "copyEmbedToClipboard", placement: this.inlineSuccessPopoverPlacement, scale: this.scale }, this.renderEmbedSuccess()),
+            ]));
+    }
+    renderButton() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const scale = this.shareButtonScale != null ? this.shareButtonScale : this.scale;
+        return this.shareButtonType === 'button' ? (index.h("calcite-button", { ref: el => (this.popoverButtonRef = el), onClick: this.togglePopover.bind(this), id: "shareButton", class: CSS.popoverButton, kind: this.shareButtonColor, appearance: "transparent", label: (_b = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.share) === null || _b === void 0 ? void 0 : _b.label, title: (_d = (_c = this.messages) === null || _c === void 0 ? void 0 : _c.share) === null || _d === void 0 ? void 0 : _d.label, scale: scale }, index.h("div", { class: CSS.iconContainer }, index.h("calcite-icon", { icon: "share", scale: this.popoverButtonIconScale })))) : (index.h("calcite-action", { ref: el => (this.popoverButtonRef = el), onClick: this.togglePopover.bind(this), id: "shareButton", class: CSS.popoverButton, appearance: "transparent", label: (_f = (_e = this.messages) === null || _e === void 0 ? void 0 : _e.share) === null || _f === void 0 ? void 0 : _f.label, title: (_h = (_g = this.messages) === null || _g === void 0 ? void 0 : _g.share) === null || _h === void 0 ? void 0 : _h.label, scale: scale, text: "", alignment: "center" }, index.h("div", { class: CSS.iconContainer }, index.h("calcite-icon", { icon: "share", scale: this.popoverButtonIconScale }))));
+    }
+    renderSuccess() {
+        var _a;
+        const success = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.success;
+        return (index.h("div", { class: CSS.success.container }, index.h("span", { class: CSS.success.header }, index.h("span", { class: CSS.success.icon }, index.h("calcite-icon", { icon: "check-circle-f", scale: this.scale })), success === null || success === void 0 ? void 0 :
+            success.label), index.h("span", { class: CSS.success.message }, this.successMessage || (success === null || success === void 0 ? void 0 : success.url))));
+    }
+    renderEmbedSuccess() {
+        var _a;
+        const success = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.success;
+        return (index.h("div", { class: CSS.success.container }, index.h("span", { class: CSS.success.header }, index.h("span", { class: CSS.success.icon }, index.h("calcite-icon", { icon: "check-circle-f", scale: this.scale })), success === null || success === void 0 ? void 0 :
+            success.label), index.h("span", { class: CSS.success.message }, success === null || success === void 0 ? void 0 : success.embed)));
+    }
+    renderOptions() {
+        var _a, _b, _c, _d;
+        const options = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.options;
+        const optionText_RTL = document.dir === 'rtl' ? ` ${CSS.rtl.optionText}` : '';
+        return (index.h("ul", { ref: el => (this.shareListRef = el), class: CSS.options, role: "menu" }, index.h("li", { id: "copyToClipboard", onClick: this.handleShareItem.bind(this, 'link'), onKeyDown: this.handleOptionKeyDown('link'), role: "menuitem", tabindex: "0" }, index.h("span", { class: CSS.icon }, index.h("calcite-icon", { icon: "link", scale: this.scale })), index.h("span", { class: `${CSS.optionText}${optionText_RTL}` }, (_b = options === null || options === void 0 ? void 0 : options.link) === null || _b === void 0 ? void 0 : _b.label)), this.socialMedia
+            ? [
+                index.h("li", { onClick: this.handleShareItem.bind(this, 'facebook'), onKeyDown: this.handleOptionKeyDown('facebook'), role: "menuitem", tabindex: "0" }, index.h("span", { class: CSS.icon }, this.renderFacebookIcon()), index.h("span", { class: `${CSS.optionText}${optionText_RTL}` }, (_c = options === null || options === void 0 ? void 0 : options.facebook) === null || _c === void 0 ? void 0 : _c.label)),
+                index.h("li", { onClick: this.handleShareItem.bind(this, 'x'), onKeyDown: this.handleOptionKeyDown('x'), role: "menuitem", tabindex: "0" }, index.h("span", { class: CSS.icon }, this.renderXIcon()), index.h("span", { class: `${CSS.optionText}${optionText_RTL}` }, "X")),
+                index.h("li", { onClick: this.handleShareItem.bind(this, 'linkedIn'), onKeyDown: this.handleOptionKeyDown('linkedIn'), role: "menuitem", tabindex: "0" }, index.h("span", { class: CSS.icon }, this.renderLinkedInIcon()), index.h("span", { class: `${CSS.optionText}${optionText_RTL}` }, (_d = options === null || options === void 0 ? void 0 : options.linkedIn) === null || _d === void 0 ? void 0 : _d.label)),
+            ]
+            : null));
+    }
+    handleOptionKeyDown(type) {
+        return (e) => {
+            const keyCode = e.code;
+            const canActivate = keyCode === 'Space' || keyCode === 'Enter';
+            if (!canActivate)
+                return;
+            this.handleShareItem(type);
+        };
+    }
+    renderFacebookIcon() {
+        return (index.h("svg", { height: "100%", style: { 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" }, index.h("g", null, index.h("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: { fill: '#1877f2', fillRule: 'nonzero' } }), index.h("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: { fill: '#fff', fillRule: 'nonzero' } }))));
+    }
+    renderXIcon() {
+        const isCalciteModeDark = !!this.el.closest(CALCITE_MODE_DARK);
+        return (index.h("svg", { class: isCalciteModeDark ? CSS.xLogo.dark : CSS.xLogo.light, width: "1200", height: "1227", viewBox: "0 0 1200 1227", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("rect", { height: "400", style: { fill: 'none' }, width: "400", x: "56", y: "56" }), index.h("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: isCalciteModeDark ? 'white' : 'black' })));
+    }
+    renderLinkedInIcon() {
+        return (index.h("svg", { height: "100%", style: { 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" }, index.h("g", { id: "g5891" }, index.h("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: { fill: '#2867b2' } }), index.h("g", { id: "shapes" }, index.h("rect", { height: "257.962", id: "rect11", style: { fill: '#fff' }, width: "85.76", x: "61.053", y: "178.667" }), index.h("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: { fill: '#fff', fillRule: 'nonzero' } }), index.h("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: { fill: '#fff', fillRule: 'nonzero' } })))));
+    }
+    renderTip() {
+        var _a;
+        const info = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.info;
+        return (index.h("div", { class: CSS.tipContainer }, index.h("span", { class: CSS.tipHeader }, index.h("calcite-icon", { icon: "lightbulb", scale: this.scale }), index.h("span", null, info === null || info === void 0 ? void 0 : info.label)), index.h("p", { class: CSS.tipContent }, info === null || info === void 0 ? void 0 : info.tooltip)));
+    }
+    renderEmbed() {
+        var _a, _b, _c;
+        const embedMessages = (_a = this.messages) === null || _a === void 0 ? void 0 : _a.embed;
+        const textarea_RTL = document.dir === 'rtl' ? ` ${CSS.rtl.textArea}` : '';
+        return (index.h("div", { class: CSS.embed.container }, index.h("span", { class: CSS.embed.header }, index.h("calcite-icon", { icon: "code", scale: this.scale }), index.h("span", null, (_c = (_b = this.messages) === null || _b === void 0 ? void 0 : _b.embed) === null || _c === void 0 ? void 0 : _c.label)), index.h("div", { class: CSS.embed.embedCode.container }, index.h("div", { class: CSS.embed.embedCode.textArea }, index.h("textarea", { ref: el => (this.embedCodeRef = el), cols: 30, rows: 5, readonly: true, class: textarea_RTL, value: this.getEmbedCode() }), index.h("button", { id: "copyEmbedToClipboard", onClick: this.copyEmbedCode.bind(this), class: CSS.embed.embedCode.copyButton }, index.h("calcite-icon", { icon: "copy", scale: this.scale }), index.h("span", null, embedMessages === null || embedMessages === void 0 ? void 0 : embedMessages.copy))), index.h("span", { class: CSS.embed.textAreaText }, index.h("slot", { name: "text-area-text" })), index.h("div", { class: CSS.embed.dimensions.container }, index.h("label", { class: CSS.embed.dimensions.input }, index.h("span", null, embedMessages === null || embedMessages === void 0 ? void 0 : embedMessages.width), index.h("input", { ref: el => (this.embedWidthRef = el), type: "number", onKeyDown: e => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onChange: this.handleNumberInputOnChange('width'), value: this.embedWidth, min: "1" })), index.h("label", { class: CSS.embed.dimensions.input }, index.h("span", null, embedMessages === null || embedMessages === void 0 ? void 0 : embedMessages.height), index.h("input", { ref: el => (this.embedHeightRef = el), type: "number", onKeyDown: e => ['e', 'E', '+', '-'].includes(e.key) && e.preventDefault(), onChange: this.handleNumberInputOnChange('height'), value: this.embedHeight, min: "1" }))))));
+    }
+    handleNumberInputOnChange(type) {
+        const ref = (type === 'width' ? this.embedWidthRef : this.embedHeightRef);
+        const valType = type === 'width' ? 'embedWidth' : 'embedHeight';
+        return () => {
+            if (ref) {
+                const value = parseFloat(ref.value);
+                if (value <= 0) {
+                    this[valType] = parseInt(MIN_WIDTH_HEIGHT_VALUE);
+                    ref.value = MIN_WIDTH_HEIGHT_VALUE;
+                }
+            }
+        };
+    }
+    togglePopover(event) {
+        event.stopPropagation();
+        this.opened = !this.opened;
+        this.popoverRef.open = this.opened;
+    }
+    closePopover() {
+        this.opened = false;
+        this.popoverRef.open = this.opened;
+    }
+    async handleShareItem(type) {
+        var _a, _b, _c, _d;
+        this.shareUrl = await this.generateShareUrl();
+        let shortenedUrl = null;
+        // Detects Safari - If Safari, do not shorten URL due to Safari not allowing clipboard copy after network requests
+        const isChrome = (_b = (_a = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _a === void 0 ? void 0 : _a.includes('Chrome')) !== null && _b !== void 0 ? _b : false;
+        const isSafari = ((_d = (_c = navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) === null || _c === void 0 ? void 0 : _c.includes('Safari')) !== null && _d !== void 0 ? _d : 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(urlToUse);
+                if (this.embed) {
+                    this.copyEmbedPopoverRef.open = false;
+                    this.inlineCopyEmbedOpened = false;
+                }
+                if (this.mode === 'inline') {
+                    this.copyLinkPopoverRef.open = true;
+                    setTimeout(() => (this.copyLinkPopoverRef.open = false), 3000);
+                }
+                this.inlineCopyLinkOpened = true;
+                this.copied = true;
+                if (this.mode === 'popover')
+                    setTimeout(() => this.closePopover(), 2000);
+                return;
+            case 'facebook':
+            case 'x':
+            case 'linkedIn':
+                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' ? Object.assign(Object.assign({}, urlData), { text: this.shareText }) : urlData;
+                const [intl] = await loadModules.loadModules(['esri/intl']);
+                const url = intl.substitute(SOCIAL_URL_TEMPLATES[type], data);
+                if (this.mode === 'popover') {
+                    this.closePopover();
+                }
+                // With Safari, need to open new tab using the triggering event, so add shortened URL after opening.
+                // Safari truncates URL without this approach.
+                if (isSafari && socialWin) {
+                    socialWin.location = url;
+                    socialWin.focus();
+                }
+                else {
+                    window.open(encodeURI(url), '_blank');
+                }
+                return;
+        }
+    }
+    async shortenUrl(url) {
+        var _a, _b;
+        const [esriRequest] = await loadModules.loadModules(['esri/request']);
+        const request = await esriRequest(SHORTEN_API, {
+            query: {
+                longUrl: url,
+                f: 'json',
+            },
+        });
+        const shortUrl = (_b = (_a = request === null || request === void 0 ? void 0 : request.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.url;
+        if (shortUrl) {
+            return shortUrl.replace('http://', 'https://');
+        }
+    }
+    getEmbedCode() {
+        return `<iframe src="${this.shareUrl}" width="${this.embedWidth}" height="${this.embedHeight}" frameborder="0" style="border:0" allowfullscreen>${this.iframeInnerText}</iframe>`;
+    }
+    copyEmbedCode() {
+        navigator.clipboard.writeText(this.getEmbedCode());
+        this.copyLinkPopoverRef.open = false;
+        this.inlineCopyLinkOpened = false;
+        this.copyEmbedPopoverRef.open = true;
+        setTimeout(() => (this.copyEmbedPopoverRef.open = false), 3000);
+        this.inlineCopyEmbedOpened = true;
+    }
+    // VIEW LOGIC
+    async generateShareUrl() {
+        var _a;
+        if (this.autoUpdateShareUrl) {
+            // Update shareUrl--it may have changes since the component was loaded
+            this.shareUrl = window.location.href;
+        }
+        // If view is not ready
+        if (!this.view || !((_a = this.view) === null || _a === void 0 ? void 0 : _a.ready)) {
+            return this.shareUrl;
+        }
+        // Use x/y values and the spatial reference of the view to instantiate a geometry point
+        const { x, y } = this.view.center;
+        const { spatialReference } = this.view;
+        const [Point, SpatialReference] = await loadModules.loadModules(['esri/geometry/Point', 'esri/geometry/SpatialReference']);
+        const updatedSpatialReference = new SpatialReference(Object.assign({}, spatialReference.toJSON()));
+        const centerPoint = new Point({
+            x,
+            y,
+            spatialReference: updatedSpatialReference,
+        });
+        // Use pointToConvert to project point. Once projected, pass point to generate the share URL parameters
+        const point = await this.processPoint(centerPoint);
+        const { isWGS84, isWebMercator } = point.spatialReference;
+        const isNotProjected = isWGS84 || isWebMercator;
+        return this.generateShareUrlParams(point, isNotProjected);
+    }
+    async processPoint(point) {
+        const { isWGS84, isWebMercator } = point.spatialReference;
+        // If spatial reference is WGS84 or Web Mercator, use longitude/latitude values to generate the share URL parameters
+        if (isWGS84 || isWebMercator) {
+            return point;
+        }
+        const [SpatialReference, projection] = await loadModules.loadModules(['esri/geometry/SpatialReference', 'esri/geometry/projection']);
+        const outputSpatialReference = new SpatialReference({ wkid: 4326 });
+        try {
+            await projection.load();
+            const projectedPoint = projection.project(point, outputSpatialReference);
+            return Promise.resolve(projectedPoint);
+        }
+        catch (err) {
+            console.error('Failed to project point', err);
+            return Promise.reject(null);
+        }
+    }
+    generateShareUrlParams(point, isNotProjected) {
+        var _a, _b, _c, _d;
+        const { longitude, latitude, x, y } = point;
+        if (longitude === undefined || latitude === undefined) {
+            return this.shareUrl;
+        }
+        const roundedLon = this.roundValue(isNotProjected ? longitude : x);
+        const roundedLat = this.roundValue(isNotProjected ? latitude : y);
+        const { zoom } = this.view;
+        const roundedZoom = this.roundValue(zoom);
+        const graphic = (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.popup) === null || _b === void 0 ? void 0 : _b.selectedFeature;
+        const visible = (_d = (_c = this.view) === null || _c === void 0 ? void 0 : _c.popup) === null || _d === void 0 ? void 0 : _d.visible;
+        let layerId;
+        let oid;
+        if (graphic && visible) {
+            const featureLayer = graphic === null || graphic === void 0 ? void 0 : graphic.layer;
+            layerId = featureLayer.id;
+            oid = graphic.attributes[featureLayer.objectIdField];
+        }
+        const hiddenLayers = this.view.map.allLayers
+            .filter(layer => !layer.visible)
+            .toArray()
+            .map(featureLayer => featureLayer.id)
+            .toString()
+            .replaceAll(',', ';');
+        const { type } = this.view;
+        const { defaultUrlParams } = this;
+        const url = new URL(this.shareUrl);
+        const { searchParams } = url;
+        // Resets existing URL params
+        if (searchParams.get('center'))
+            searchParams.delete('center');
+        if (searchParams.get('level'))
+            searchParams.delete('level');
+        if (searchParams.get('selectedFeature'))
+            searchParams.delete('selectedFeature');
+        if (searchParams.get('hiddenLayers'))
+            searchParams.delete('hiddenLayers');
+        if (searchParams.get('viewpoint'))
+            searchParams.delete('viewpoint');
+        // Checks if view.type is 3D, if so, set 3D url parameters
+        if (type === '3d') {
+            // viewpoint=cam:{camera.position.longitude},{camera.position.latitude},{camera.position.z};{camera.heading},{camera.tilt}
+            const { camera } = this.view;
+            const { heading, position, tilt } = camera;
+            const { longitude, latitude, z } = position;
+            const viewpoint_Values = {
+                longitude: this.roundValue(longitude, 8),
+                latitude: this.roundValue(latitude, 8),
+                z: this.roundValue(z, 3),
+                heading: this.roundValue(heading, 3),
+                tilt: this.roundValue(tilt, 3),
+            };
+            const viewpointVal = `cam:${viewpoint_Values.longitude},${viewpoint_Values.latitude},${viewpoint_Values.z};${viewpoint_Values.heading},${viewpoint_Values.tilt}`;
+            if ((defaultUrlParams === null || defaultUrlParams === void 0 ? void 0 : defaultUrlParams.viewpoint) !== false)
+                url.searchParams.set('viewpoint', viewpointVal);
+            if (layerId && oid && (defaultUrlParams === null || defaultUrlParams === void 0 ? void 0 : defaultUrlParams.selectedFeature) !== false)
+                url.searchParams.set('selectedFeature', `${layerId};${oid}`);
+            if (hiddenLayers && (defaultUrlParams === null || defaultUrlParams === void 0 ? void 0 : defaultUrlParams.hiddenLayers) !== false)
+                url.searchParams.set('hiddenLayers', hiddenLayers);
+            url.search = decodeURIComponent(url.search);
+            return url.href;
+        }
+        // Otherwise, just return original url for 2D
+        if ((defaultUrlParams === null || defaultUrlParams === void 0 ? void 0 : defaultUrlParams.center) !== false)
+            url.searchParams.set('center', `${roundedLon};${roundedLat}`);
+        if ((defaultUrlParams === null || defaultUrlParams === void 0 ? void 0 : defaultUrlParams.level) !== false)
+            url.searchParams.set('level', `${roundedZoom}`);
+        if (layerId && oid && (defaultUrlParams === null || defaultUrlParams === void 0 ? void 0 : defaultUrlParams.selectedFeature) !== false)
+            url.searchParams.set('selectedFeature', `${layerId};${oid}`);
+        if (hiddenLayers && (defaultUrlParams === null || defaultUrlParams === void 0 ? void 0 : defaultUrlParams.hiddenLayers) !== false)
+            url.searchParams.set('hiddenLayers', hiddenLayers);
+        url.search = decodeURIComponent(url.search);
+        return url.href;
+    }
+    roundValue(val, decimalPoints = 4) {
+        return parseFloat(val.toFixed(decimalPoints));
+    }
+    get el() { return index.getElement(this); }
+};
+InstantAppsSocialShare.style = instantAppsSocialShareCss;
+
+exports.instant_apps_social_share = InstantAppsSocialShare;

package/dist/cjs/instant-apps-splash.cjs.entry.js

@@ -7,13 +7,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-105cf2b9.js');
+const index = require('./index-b53bfd7c.js');
 const index$1 = require('./index-f64944ad.js');
-const locale = require('./locale-3e33f44c.js');
-require('./loadModules-69fc5b98.js');
-require('./esri-loader-ce6c3d3d.js');
-require('./_commonjsHelpers-480c2e77.js');
-require('./languageUtil-9bd00bad.js');
+const locale = require('./locale-28c7c569.js');
+require('./loadModules-a67b6702.js');
+require('./esri-loader-5b8fbfa4.js');
+require('./_commonjsHelpers-ed90c4ad.js');
+require('./languageUtil-43c3acdc.js');
 
 /**
  * Creates new instance of @esri/arcgis-html-sanitizer
@@ -70,6 +70,11 @@ const InstantAppsSplash = class {
         this.primaryButtonText = '';
         this.open = true;
         this.closeButtonDisabled = false;
+        this.outsideCloseDisabled = false;
+        this.secondaryButton = false;
+        this.secondaryButtonText = undefined;
+        this.secondaryButtonIcon = undefined;
+        this.secondaryButtonCallback = undefined;
         this.messages = undefined;
     }
     sanitizeContent() {
@@ -92,7 +97,7 @@ const InstantAppsSplash = class {
         locale.getMessages(this);
     }
     render() {
-        return (index.h("calcite-modal", { onCalciteModalClose: this.close.bind(this), open: this.open, closeButtonDisabled: this.closeButtonDisabled }, this.renderHeader(), this.renderContent(), this.localStorageKey ? this.renderDontShowThisAgainCheckbox() : null, this.renderPrimaryButton()));
+        return (index.h("calcite-modal", { onCalciteModalClose: this.close.bind(this), open: this.open, closeButtonDisabled: this.closeButtonDisabled, outsideCloseDisabled: this.outsideCloseDisabled }, this.renderHeader(), this.renderContent(), this.localStorageKey ? this.renderDontShowThisAgainCheckbox() : null, this.renderPrimaryButton(), this.secondaryButton ? this.renderSecondaryButton() : null));
     }
     renderHeader() {
         const { titleText } = this;
@@ -100,7 +105,7 @@ const InstantAppsSplash = class {
     }
     renderContent() {
         const { content } = this;
-        return index.h("div", { slot: "content", innerHTML: content });
+        return (index.h("div", { slot: "content", innerHTML: content }, index.h("slot", { name: "custom-action" })));
     }
     renderDontShowThisAgainCheckbox() {
         const { localStorageKey, messages } = this;
@@ -112,6 +117,10 @@ const InstantAppsSplash = class {
         const { primaryButtonText } = this;
         return (index.h("calcite-button", { onClick: this.close.bind(this), slot: "primary" }, primaryButtonText ? primaryButtonText : 'Enter'));
     }
+    renderSecondaryButton() {
+        var _a;
+        return (index.h("calcite-button", { onClick: (_a = this.secondaryButtonCallback) === null || _a === void 0 ? void 0 : _a.bind(this), slot: "secondary", "icon-start": this.secondaryButtonIcon, appearance: "outline" }, this.secondaryButtonText));
+    }
     close() {
         this.open = false;
         this.splashClose.emit();