@esri/solutions-components 0.10.48 → 0.11.0

package/dist/cjs/calcite-modal_4.cjs.entry.js

@@ -0,0 +1,972 @@
+/*!
+ * 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-3bae5121.js');
+const conditionalSlot = require('./conditionalSlot-130cce71.js');
+const dom = require('./dom-e11b7daf.js');
+const focusTrapComponent = require('./focusTrapComponent-a7cfa6da.js');
+const loadable = require('./loadable-19ab5827.js');
+const observers = require('./observers-902ebe13.js');
+const openCloseComponent = require('./openCloseComponent-039ee139.js');
+const locale = require('./locale-80aff4b9.js');
+const t9n = require('./t9n-0195f685.js');
+const component = require('./component-65f2fe4b.js');
+const logger = require('./logger-780b61e8.js');
+const utils = require('./utils-7eb34f90.js');
+require('./guid-d99f21fe.js');
+require('./resources-6c04ccee.js');
+require('./config-c999f8fc.js');
+require('./browser-717f77af.js');
+require('./key-cdfc85aa.js');
+require('./locale-3a817e03.js');
+require('./loadModules-df8b13ca.js');
+require('./esri-loader-08dc41bd.js');
+require('./_commonjsHelpers-baf43783.js');
+require('./languageUtil-a3e1eafd.js');
+require('./index-1ab17699.js');
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+ * v2.13.2
+ */
+const CSS$2 = {
+    modal: "modal",
+    title: "title",
+    header: "header",
+    footer: "footer",
+    scrim: "scrim",
+    back: "back",
+    close: "close",
+    secondary: "secondary",
+    primary: "primary",
+    container: "container",
+    containerOpen: "container--open",
+    containerEmbedded: "container--embedded",
+    content: "content",
+    contentNoFooter: "content--no-footer",
+    contentBottom: "content-bottom",
+    contentTop: "content-top",
+    // these classes help apply the animation in phases to only set transform on open/close
+    // this helps avoid a positioning issue for any floating-ui-owning children
+    openingIdle: "modal--opening-idle",
+    openingActive: "modal--opening-active",
+    closingIdle: "modal--closing-idle",
+    closingActive: "modal--closing-active",
+};
+const ICONS = {
+    close: "x",
+};
+const SLOTS = {
+    content: "content",
+    contentBottom: "content-bottom",
+    contentTop: "content-top",
+    header: "header",
+    back: "back",
+    secondary: "secondary",
+    primary: "primary",
+};
+
+const modalCss = ":host{--calcite-modal-scrim-background:rgba(0, 0, 0, 0.85);position:absolute;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;opacity:0;visibility:hidden !important;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);--calcite-modal-scrim-background-internal:rgba(0, 0, 0, 0.85)}.content-top[hidden],.content-bottom[hidden]{display:none}.container{position:fixed;inset:0px;z-index:var(--calcite-z-index-overlay);display:flex;align-items:center;justify-content:center;overflow-y:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden !important;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88)}:host([scale=s]){--calcite-modal-padding-internal:0.75rem;--calcite-modal-padding-large-internal:1rem;--calcite-modal-title-text-internal:var(--calcite-font-size-1);--calcite-modal-content-text-internal:var(--calcite-font-size--1)}:host([scale=m]){--calcite-modal-padding-internal:1rem;--calcite-modal-padding-large-internal:1.25rem;--calcite-modal-title-text-internal:var(--calcite-font-size-2);--calcite-modal-content-text-internal:var(--calcite-font-size-0)}:host([scale=l]){--calcite-modal-padding-internal:1.25rem;--calcite-modal-padding-large-internal:1.5rem;--calcite-modal-title-text-internal:var(--calcite-font-size-3);--calcite-modal-content-text-internal:var(--calcite-font-size-1)}.scrim{--calcite-scrim-background:var(--calcite-modal-scrim-background, var(--calcite-color-transparent-scrim));position:fixed;inset:0px;display:flex;overflow-y:hidden}.modal{pointer-events:none;z-index:var(--calcite-z-index-modal);float:none;margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;overflow:hidden;border-radius:0.25rem;background-color:var(--calcite-color-foreground-1);opacity:0;--tw-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);--tw-shadow-colored:0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-overflow-scrolling:touch;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);--calcite-modal-hidden-position:translate3d(0, 20px, 0);--calcite-modal-shown-position:translate3d(0, 0, 0)}.modal--opening-idle{transform:var(--calcite-modal-hidden-position)}.modal--opening-active{transform:var(--calcite-modal-shown-position)}.modal--closing-idle{transform:var(--calcite-modal-shown-position)}.modal--closing-active{transform:var(--calcite-modal-hidden-position)}:host([opened]){opacity:1;visibility:visible !important;transition-delay:0ms}.container--open{opacity:1;visibility:visible !important;transition-delay:0ms}.container--open .modal{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition-delay:0ms}.header{z-index:var(--calcite-z-index-header);display:flex;min-inline-size:0px;max-inline-size:100%;border-start-start-radius:0.25rem;border-start-end-radius:0.25rem;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto}.close{order:2;margin:0px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-internal);flex:0 0 auto}.close calcite-icon{pointer-events:none;vertical-align:-2px}.close:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}.close:hover,.close:focus,.close:active{background-color:var(--calcite-color-foreground-2);color:var(--calcite-color-text-1)}.title{order:1;display:flex;min-inline-size:0px;align-items:center;flex:1 1 auto;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-large-internal)}slot[name=header]::slotted(*),*::slotted([slot=header]){margin:0px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-1);font-size:var(--calcite-modal-title-text-internal)}.content{position:relative;box-sizing:border-box;display:block;block-size:100%;overflow:auto;padding:0px;background-color:var(--calcite-modal-content-background, var(--calcite-color-foreground-1));max-block-size:100%;padding:var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal))}.content-top,.content-bottom{z-index:var(--calcite-z-index-header);display:flex;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto;padding:var(--calcite-modal-padding-internal)}.content-top{min-inline-size:0px;max-inline-size:100%;border-block-end-width:1px}.content-bottom{margin-block-start:auto;box-sizing:border-box;inline-size:100%;justify-content:space-between;border-block-start-width:1px}.content-top:not(.header~.content-top){border-start-start-radius:0.25rem;border-start-end-radius:0.25rem}.content-bottom:not(.content-bottom~.footer),.content--no-footer{border-end-end-radius:0.25rem;border-end-start-radius:0.25rem}slot[name=content]::slotted(*),*::slotted([slot=content]){font-size:var(--calcite-modal-context-text-internal)}.footer{z-index:var(--calcite-z-index-header);margin-block-start:auto;box-sizing:border-box;display:flex;inline-size:100%;justify-content:space-between;border-end-end-radius:0.25rem;border-end-start-radius:0.25rem;border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1);flex:0 0 auto;padding-block:var(--calcite-modal-padding-internal);padding-inline:var(--calcite-modal-padding-large-internal)}.footer--hide-back .back,.footer--hide-secondary .secondary{display:none}.back{display:block;margin-inline-end:auto}.secondary{margin-inline:0.25rem;display:block}slot[name=primary]{display:block}:host([width=small]) .modal{inline-size:auto}:host([width-scale=s]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 32rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 35rem){:host([width-scale=s]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=s]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=s][docked]) .container{align-items:flex-end}}:host([width-scale=m]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 48rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 51rem){:host([width-scale=m]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=m]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=m][docked]) .container{align-items:flex-end}}:host([width-scale=l]) .modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 94rem);block-size:var(--calcite-modal-height, auto)}@media screen and (max-width: 97rem){:host([width-scale=l]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%}:host([width-scale=l]) .content{flex:1 1 auto;max-block-size:unset}:host([width-scale=l][docked]) .container{align-items:flex-end}}:host([fullscreen]) .modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px;--calcite-modal-hidden-position:translate3D(0, 20px, 0) scale(0.95);--calcite-modal-shown-position:translate3D(0, 0, 0) scale(1)}:host([fullscreen]) .content{max-block-size:100%;flex:1 1 auto}:host([opened][fullscreen]) .header,:host([opened][fullscreen]) .footer,:host([opened][fullscreen]) .content-top,:host([opened][fullscreen]) .content-bottom{border-radius:0}:host([docked]) .modal{block-size:var(--calcite-modal-height, auto)}:host([docked]) .content{block-size:auto;flex:1 1 auto}:host([kind=brand]) .modal{border-color:var(--calcite-color-brand)}:host([kind=danger]) .modal{border-color:var(--calcite-color-status-danger)}:host([kind=info]) .modal{border-color:var(--calcite-color-status-info)}:host([kind=success]) .modal{border-color:var(--calcite-color-status-success)}:host([kind=warning]) .modal{border-color:var(--calcite-color-status-warning)}:host([kind=brand]) .modal,:host([kind=danger]) .modal,:host([kind=info]) .modal,:host([kind=success]) .modal,:host([kind=warning]) .modal{border-width:0px;border-block-start-width:4px;border-style:solid}:host([kind=brand]) .header,:host([kind=brand]) .content-top,:host([kind=danger]) .header,:host([kind=danger]) .content-top,:host([kind=info]) .header,:host([kind=info]) .content-top,:host([kind=success]) .header,:host([kind=success]) .content-top,:host([kind=warning]) .header,:host([kind=warning]) .content-top{border-radius:0.25rem;border-end-end-radius:0px;border-end-start-radius:0px}@media screen and (max-width: 860px){* slot[name=header]::slotted(content-top),* content-top::slotted([slot=header]){font-size:var(--calcite-font-size-1)}.footer,.content-bottom{position:sticky;inset-block-end:0px}}@media screen and (max-width: 480px){.footer,.content-bottom{flex-direction:column}.back,.secondary{margin:0px;margin-block-end:0.25rem}}.container--embedded{position:absolute;pointer-events:auto}.container--embedded calcite-scrim{position:absolute}:host([hidden]){display:none}[hidden]{display:none}";
+const CalciteModalStyle0 = modalCss;
+
+let totalOpenModals = 0;
+let initialDocumentOverflowStyle = "";
+logger.logger.deprecated("component", {
+    name: "modal",
+    removalVersion: 4,
+    suggested: "dialog",
+});
+const Modal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.calciteModalBeforeClose = index.createEvent(this, "calciteModalBeforeClose", 6);
+        this.calciteModalClose = index.createEvent(this, "calciteModalClose", 6);
+        this.calciteModalBeforeOpen = index.createEvent(this, "calciteModalBeforeOpen", 6);
+        this.calciteModalOpen = index.createEvent(this, "calciteModalOpen", 6);
+        //--------------------------------------------------------------------------
+        //
+        //  Private Properties/ State
+        //
+        //--------------------------------------------------------------------------
+        this.ignoreOpenChange = false;
+        this.mutationObserver = observers.createObserver("mutation", () => this.handleMutationObserver());
+        this.cssVarObserver = observers.createObserver("mutation", () => {
+            this.updateSizeCssVars();
+        });
+        this.openTransitionProp = "opacity";
+        //--------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        //--------------------------------------------------------------------------
+        this.setTransitionEl = (el) => {
+            this.transitionEl = el;
+        };
+        this.openEnd = () => {
+            this.setFocus();
+            this.el.removeEventListener("calciteModalOpen", this.openEnd);
+        };
+        this.handleCloseClick = () => {
+            this.open = false;
+        };
+        this.handleOutsideClose = () => {
+            if (this.outsideCloseDisabled) {
+                return;
+            }
+            this.open = false;
+        };
+        this.closeModal = async () => {
+            if (this.beforeClose) {
+                try {
+                    await this.beforeClose(this.el);
+                }
+                catch (_error) {
+                    // close prevented
+                    requestAnimationFrame(() => {
+                        this.ignoreOpenChange = true;
+                        this.open = true;
+                        this.ignoreOpenChange = false;
+                    });
+                    return;
+                }
+            }
+            totalOpenModals--;
+            this.opened = false;
+            this.removeOverflowHiddenClass();
+        };
+        this.handleMutationObserver = () => {
+            this.updateFooterVisibility();
+            this.updateFocusTrapElements();
+        };
+        this.updateFooterVisibility = () => {
+            this.hasFooter = !!dom.getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]);
+        };
+        this.updateSizeCssVars = () => {
+            this.cssWidth = getComputedStyle(this.el).getPropertyValue("--calcite-modal-width");
+            this.cssHeight = getComputedStyle(this.el).getPropertyValue("--calcite-modal-height");
+        };
+        this.contentTopSlotChangeHandler = (event) => {
+            this.hasContentTop = dom.slotChangeHasAssignedElement(event);
+        };
+        this.contentBottomSlotChangeHandler = (event) => {
+            this.hasContentBottom = dom.slotChangeHasAssignedElement(event);
+        };
+        this.open = false;
+        this.opened = false;
+        this.beforeClose = undefined;
+        this.closeButtonDisabled = false;
+        this.focusTrapDisabled = false;
+        this.outsideCloseDisabled = false;
+        this.docked = undefined;
+        this.embedded = false;
+        this.escapeDisabled = false;
+        this.scale = "m";
+        this.widthScale = "m";
+        this.fullscreen = undefined;
+        this.kind = undefined;
+        this.messages = undefined;
+        this.messageOverrides = undefined;
+        this.cssWidth = undefined;
+        this.cssHeight = undefined;
+        this.hasFooter = true;
+        this.hasContentTop = false;
+        this.hasContentBottom = false;
+        this.effectiveLocale = undefined;
+        this.defaultMessages = undefined;
+    }
+    handleFocusTrapDisabled(focusTrapDisabled) {
+        if (!this.open) {
+            return;
+        }
+        focusTrapDisabled ? focusTrapComponent.deactivateFocusTrap(this) : focusTrapComponent.activateFocusTrap(this);
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    //--------------------------------------------------------------------------
+    async componentWillLoad() {
+        await t9n.setUpMessages(this);
+        loadable.setUpLoadableComponent(this);
+        // when modal initially renders, if active was set we need to open as watcher doesn't fire
+        if (this.open) {
+            this.openModal();
+        }
+    }
+    componentDidLoad() {
+        loadable.setComponentLoaded(this);
+    }
+    connectedCallback() {
+        this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
+        this.cssVarObserver?.observe(this.el, { attributeFilter: ["style"] });
+        this.updateSizeCssVars();
+        this.updateFooterVisibility();
+        conditionalSlot.connectConditionalSlotComponent(this);
+        locale.connectLocalized(this);
+        t9n.connectMessages(this);
+        focusTrapComponent.connectFocusTrap(this);
+    }
+    disconnectedCallback() {
+        this.removeOverflowHiddenClass();
+        this.mutationObserver?.disconnect();
+        this.cssVarObserver?.disconnect();
+        conditionalSlot.disconnectConditionalSlotComponent(this);
+        focusTrapComponent.deactivateFocusTrap(this);
+        locale.disconnectLocalized(this);
+        t9n.disconnectMessages(this);
+        this.embedded = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f92cd77f4a5ad4a245ca50fe2b2bfcf9966d4ca8', "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" }, index.h("div", { key: 'a9d348a67842162f1bc17ec8422c07963aed412d', class: {
+                [CSS$2.container]: true,
+                [CSS$2.containerOpen]: this.opened,
+                [CSS$2.containerEmbedded]: this.embedded,
+            } }, index.h("calcite-scrim", { key: '7dc3bc9220fc375522a6d390b633f9573bfa6c67', class: CSS$2.scrim, onClick: this.handleOutsideClose }), this.renderStyle(), index.h("div", { key: '40782ba2b6d3f086c884ace3529110e873009504', class: {
+                [CSS$2.modal]: true,
+            }, ref: this.setTransitionEl }, index.h("div", { key: 'ea3a72ab0a0e5abae6e766d0b7b2cfce54667e86', class: CSS$2.header }, this.renderCloseButton(), index.h("header", { key: 'abe5c28d11fc6241cd6ac40adef4d94529eb9d5c', class: CSS$2.title }, index.h("slot", { key: '3d1d6ed6c0249472a00fba4128a861e6a6eae4dd', name: CSS$2.header }))), this.renderContentTop(), index.h("div", { key: '0e65dfbd175e490586518d1a4c34b9eb1dde1f01', class: {
+                [CSS$2.content]: true,
+                [CSS$2.contentNoFooter]: !this.hasFooter,
+            }, ref: (el) => (this.modalContent = el) }, index.h("slot", { key: 'd5f3b08e61e8e47f64fd13bc6eb7f7ed6a07b7c8', name: SLOTS.content })), this.renderContentBottom(), this.renderFooter()))));
+    }
+    renderFooter() {
+        return this.hasFooter ? (index.h("div", { class: CSS$2.footer, key: "footer" }, index.h("span", { class: CSS$2.back }, index.h("slot", { name: SLOTS.back })), index.h("span", { class: CSS$2.secondary }, index.h("slot", { name: SLOTS.secondary })), index.h("span", { class: CSS$2.primary }, index.h("slot", { name: SLOTS.primary })))) : null;
+    }
+    renderContentTop() {
+        return (index.h("div", { class: CSS$2.contentTop, hidden: !this.hasContentTop }, index.h("slot", { name: SLOTS.contentTop, onSlotchange: this.contentTopSlotChangeHandler })));
+    }
+    renderContentBottom() {
+        return (index.h("div", { class: CSS$2.contentBottom, hidden: !this.hasContentBottom }, index.h("slot", { name: SLOTS.contentBottom, onSlotchange: this.contentBottomSlotChangeHandler })));
+    }
+    renderCloseButton() {
+        return !this.closeButtonDisabled ? (index.h("button", { "aria-label": this.messages.close, class: CSS$2.close, key: "button", onClick: this.handleCloseClick, ref: (el) => (this.closeButtonEl = el), title: this.messages.close }, index.h("calcite-icon", { icon: ICONS.close, scale: component.getIconScale(this.scale) }))) : null;
+    }
+    renderStyle() {
+        if (!this.fullscreen && (this.cssWidth || this.cssHeight)) {
+            return (index.h("style", null, `.${CSS$2.container} {
+              ${this.docked && this.cssWidth ? `align-items: center !important;` : ""}
+            }
+            .${CSS$2.modal} {
+              block-size: ${this.cssHeight ? this.cssHeight : "auto"} !important;
+              ${this.cssWidth ? `inline-size: ${this.cssWidth} !important;` : ""}
+              ${this.cssWidth ? `max-inline-size: ${this.cssWidth} !important;` : ""}
+              ${this.docked ? `border-radius: var(--calcite-border-radius) !important;` : ""}
+            }
+            @media screen and (max-width: ${this.cssWidth}) {
+              .${CSS$2.container} {
+                ${this.docked ? `align-items: flex-end !important;` : ""}
+              }
+              .${CSS$2.modal} {
+                max-block-size: 100% !important;
+                inline-size: 100% !important;
+                max-inline-size: 100% !important;
+                min-inline-size: 100% !important;
+                margin: 0 !important;
+                ${!this.docked ? `block-size: 100% !important;` : ""}
+                ${!this.docked ? `border-radius: 0 !important;` : ""}
+                ${this.docked
+                ? `border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0 !important;`
+                : ""}
+              }
+            }
+          `));
+        }
+    }
+    effectiveLocaleChange() {
+        t9n.updateMessages(this, this.effectiveLocale);
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    handleEscape(event) {
+        if (this.open && !this.escapeDisabled && event.key === "Escape" && !event.defaultPrevented) {
+            this.open = false;
+            event.preventDefault();
+        }
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Public Methods
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Sets focus on the component's "close" button (the first focusable item).
+     *
+     */
+    async setFocus() {
+        await loadable.componentFocusable(this);
+        dom.focusFirstTabbable(this.el);
+    }
+    /**
+     * Updates the element(s) that are used within the focus-trap of the component.
+     */
+    async updateFocusTrapElements() {
+        focusTrapComponent.updateFocusTrapElements(this);
+    }
+    /**
+     * Sets the scroll top of the component's content.
+     *
+     * @param top
+     * @param left
+     */
+    async scrollContent(top = 0, left = 0) {
+        if (this.modalContent) {
+            if (this.modalContent.scrollTo) {
+                this.modalContent.scrollTo({ top, left, behavior: "smooth" });
+            }
+            else {
+                this.modalContent.scrollTop = top;
+                this.modalContent.scrollLeft = left;
+            }
+        }
+    }
+    onBeforeOpen() {
+        this.transitionEl.classList.add(CSS$2.openingActive);
+        this.calciteModalBeforeOpen.emit();
+    }
+    onOpen() {
+        this.transitionEl.classList.remove(CSS$2.openingIdle, CSS$2.openingActive);
+        this.calciteModalOpen.emit();
+        focusTrapComponent.activateFocusTrap(this);
+    }
+    onBeforeClose() {
+        this.transitionEl.classList.add(CSS$2.closingActive);
+        this.calciteModalBeforeClose.emit();
+    }
+    onClose() {
+        this.transitionEl.classList.remove(CSS$2.closingIdle, CSS$2.closingActive);
+        this.calciteModalClose.emit();
+        focusTrapComponent.deactivateFocusTrap(this);
+    }
+    toggleModal(value) {
+        if (this.ignoreOpenChange) {
+            return;
+        }
+        if (value) {
+            this.openModal();
+        }
+        else {
+            this.closeModal();
+        }
+    }
+    handleOpenedChange(value) {
+        const idleClass = value ? CSS$2.openingIdle : CSS$2.closingIdle;
+        this.transitionEl.classList.add(idleClass);
+        openCloseComponent.onToggleOpenCloseComponent(this);
+    }
+    async openModal() {
+        await component.componentOnReady(this.el);
+        this.el.addEventListener("calciteModalOpen", this.openEnd);
+        this.opened = true;
+        const titleEl = dom.getSlotted(this.el, SLOTS.header);
+        const contentEl = dom.getSlotted(this.el, SLOTS.content);
+        this.titleId = dom.ensureId(titleEl);
+        this.contentId = dom.ensureId(contentEl);
+        if (!this.embedded) {
+            if (totalOpenModals === 0) {
+                initialDocumentOverflowStyle = document.documentElement.style.overflow;
+            }
+            totalOpenModals++;
+            // use an inline style instead of a utility class to avoid global class declarations.
+            document.documentElement.style.setProperty("overflow", "hidden");
+        }
+    }
+    removeOverflowHiddenClass() {
+        document.documentElement.style.setProperty("overflow", initialDocumentOverflowStyle);
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "focusTrapDisabled": ["handleFocusTrapDisabled"],
+        "messageOverrides": ["onMessagesChange"],
+        "effectiveLocale": ["effectiveLocaleChange"],
+        "open": ["toggleModal"],
+        "opened": ["handleOpenedChange"]
+    }; }
+};
+Modal.style = CalciteModalStyle0;
+
+const styles = `
+  .ck.ck-reset.ck-editor.ck-rounded-corners {
+    margin-top: 10px !important;
+    margin-left: 55px !important;
+  }
+  .ck-editor__editable {
+    height: 70px !important;
+    font-size: 0.875rem !important;
+    line-height: 	1.375 !important;
+    color: var(--calcite-color-text-1) !important;
+  }
+
+  .ck.ck-editor__editable_inline>:first-child,
+  .ck.ck-editor__editable_inline>:last-child {
+    --ck-spacing-large: 0.5rem !important;
+  }
+
+  .ck.ck-balloon-panel.ck-powered-by-balloon {
+    --ck-z-modal: 700;
+    z-index: 700;
+  }
+
+  .calcite-mode-dark .ck-editor__editable {
+    color: var(--calcite-color-text-inverse) !important;
+  }
+`;
+
+const instantAppsCkeditorWrapperCss = ":host{display:block}";
+const InstantAppsCkeditorWrapperStyle0 = instantAppsCkeditorWrapperCss;
+
+const CKEDITOR_STYLES_ID = 'instant-apps-components__ckeditor-wrapper';
+const InstantAppsCkeditorWrapper = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isFocused = index.createEvent(this, "isFocused", 7);
+        this.dataChanged = index.createEvent(this, "dataChanged", 7);
+        this.value = undefined;
+        this.editorInstance = undefined;
+        this.config = undefined;
+    }
+    updateValue() {
+        if (this.value)
+            this.editorInstance.setData(this.value);
+    }
+    async componentDidLoad() {
+        this.init();
+    }
+    componentDidUpdate() {
+        this.editorInstance.setData(this.value);
+    }
+    render() {
+        return (index.h(index.Host, { key: '26f62d5413e21916b77253476cf48f69682861d5' }, index.h("div", { key: '45a9d7b859a21e49c81afdaa3bdd5074f1428cd5' })));
+    }
+    init() {
+        this.applyStyles();
+        this.initEditor();
+    }
+    applyStyles() {
+        const exists = !!document.getElementById(CKEDITOR_STYLES_ID);
+        if (exists)
+            return;
+        const style = document.createElement('style');
+        style.id = CKEDITOR_STYLES_ID;
+        style.innerHTML = styles;
+        document.head.prepend(style);
+    }
+    async initEditor() {
+        const editor = await this.createEditor();
+        if (editor) {
+            this.editorInstance = editor;
+            if (this.value || this.value === '') {
+                editor.setData(this.value);
+            }
+            editor.editing.view.document.on('change:isFocused', this.getEditorFocusedCallback(editor));
+        }
+    }
+    async createEditor() {
+        try {
+            let editor;
+            if (this.config) {
+                editor = await ClassicEditor.create(this.el, this.config);
+            }
+            else {
+                editor = await ClassicEditor.create(this.el);
+            }
+            this.editorInstance = editor;
+            return Promise.resolve(editor);
+        }
+        catch (err) {
+            console.error(err);
+            return Promise.reject(null);
+        }
+    }
+    getEditorFocusedCallback(editor) {
+        return (_event, _name, _isFocused) => {
+            if (!_isFocused) {
+                const editorData = editor.getData();
+                if (this.value !== editorData) {
+                    this.value = editorData;
+                    this.dataChanged.emit(editorData);
+                }
+            }
+            else {
+                this.isFocused.emit();
+            }
+        };
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["updateValue"]
+    }; }
+};
+InstantAppsCkeditorWrapper.style = InstantAppsCkeditorWrapperStyle0;
+
+const instantAppsLanguageTranslatorItemCss = ".sc-instant-apps-language-translator-item-h{display:block}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item.sc-instant-apps-language-translator-item{display:flex}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item{padding:10px;border-bottom:1px solid var(--calcite-color-border-1);background-color:var(--calcite-color-foreground-2);width:49%}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item .instant-apps-language-translator-item__top-row.sc-instant-apps-language-translator-item{display:flex;align-items:center;justify-content:space-between}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item .instant-apps-language-translator-item__label-container.sc-instant-apps-language-translator-item{display:flex;align-items:center}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item .instant-apps-language-translator-item__label.sc-instant-apps-language-translator-item{display:inline-block;margin-left:10px;font-size:14px;font-weight:var(--calcite-font-weight-medium)}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item calcite-input.sc-instant-apps-language-translator-item{margin-top:10px;margin-left:55px}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section--last-item.sc-instant-apps-language-translator-item{border-bottom:none}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section--selected.sc-instant-apps-language-translator-item{background-color:#f1faff}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item:first-child{margin-right:1%}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__ui-location-popover-content.sc-instant-apps-language-translator-item{display:inline-block;padding:10px;max-width:400px}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__ui-location-items.sc-instant-apps-language-translator-item{display:flex}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__ui-location-item.sc-instant-apps-language-translator-item{display:flex;align-items:center;font-weight:var(--calcite-font-weight-medium);font-size:14px}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__tip.sc-instant-apps-language-translator-item{display:inline-block;font-size:14px;line-height:22px}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__info-icon.sc-instant-apps-language-translator-item{color:var(--calcite-color-brand)}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__info-button.sc-instant-apps-language-translator-item{border:0;background-color:transparent;cursor:pointer}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__nested-input.sc-instant-apps-language-translator-item{margin-left:60px;margin-top:8px}.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__nested-input.sc-instant-apps-language-translator-item calcite-input.sc-instant-apps-language-translator-item{margin-left:30px}.calcite-mode-dark.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section--selected.sc-instant-apps-language-translator-item{background-color:#f1faff;background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}.calcite-mode-dark.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section--selected.sc-instant-apps-language-translator-item calcite-action.sc-instant-apps-language-translator-item{--calcite-ui-icon-color:var(--calcite-color-text-inverse)}.calcite-mode-dark.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section--selected.sc-instant-apps-language-translator-item calcite-icon.sc-instant-apps-language-translator-item{color:var(--calcite-color-text-inverse)}.instant-apps-language-translator--last-item.sc-instant-apps-language-translator-item-h .instant-apps-language-translator-item__section.sc-instant-apps-language-translator-item{border-bottom:none}";
+const InstantAppsLanguageTranslatorItemStyle0 = instantAppsLanguageTranslatorItemCss;
+
+const BASE$1 = 'instant-apps-language-translator-item';
+const CSS$1 = {
+    section: `${BASE$1}__section`,
+    selected: `${BASE$1}__section--selected`,
+    collapsed: `${BASE$1}__section--collapsed`,
+    topRow: `${BASE$1}__top-row`,
+    labelContainer: `${BASE$1}__label-container`,
+    label: `${BASE$1}__label`,
+    uiLocationPopoverContent: `${BASE$1}__ui-location-popover-content`,
+    uiLocationItems: `${BASE$1}__ui-location-items`,
+    uiLocationItem: `${BASE$1}__ui-location-item`,
+    infoIcon: `${BASE$1}__info-icon`,
+    infoButton: `${BASE$1}__info-button`,
+    tip: `${BASE$1}__tip`,
+    nestedInput: `${BASE$1}__nested-input`,
+};
+const InstantAppsLanguageTranslatorItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.translatorItemDataUpdated = index.createEvent(this, "translatorItemDataUpdated", 7);
+        this.userInputs = {};
+        this.translatedInputs = {};
+        this.fieldName = undefined;
+        this.translatedLanguageLabels = undefined;
+        this.setting = undefined;
+        this.userLocaleInputOnChangeCallback = undefined;
+        this.translatedLocaleInputOnChangeCallback = undefined;
+    }
+    get isTextEditor() {
+        return this.setting.type === utils.ESettingType.TextEditor;
+    }
+    get calciteMode() {
+        return utils.isCalciteModeDark() ? utils.ECalciteMode.Dark : utils.ECalciteMode.Light;
+    }
+    get hasNestedContent() {
+        var _a;
+        return !!((_a = this.setting) === null || _a === void 0 ? void 0 : _a.content);
+    }
+    get tipID() {
+        return `${this.fieldName}goTo`;
+    }
+    componentDidLoad() {
+        if (this.isTextEditor) {
+            utils.store.onChange('uiData', () => this.handleEditorCollapse());
+        }
+    }
+    render() {
+        var _a;
+        if ('content' in this.setting && ((_a = this.setting.content) === null || _a === void 0 ? void 0 : _a.every(contentItem => { var _a; return ((_a = contentItem === null || contentItem === void 0 ? void 0 : contentItem.content) === null || _a === void 0 ? void 0 : _a.length) === 0; }))) {
+            return index.h(index.Fragment, null);
+        }
+        else {
+            return (index.h(index.Host, { class: this.calciteMode }, this.renderBase(), this.renderPopover()));
+        }
+    }
+    renderBase() {
+        return (index.h("div", { class: BASE$1 }, this.renderUserLocaleSection(), this.renderTranslatedLanguageSection()));
+    }
+    renderPopover() {
+        const tip = this.getTip();
+        return (index.h("calcite-popover", { referenceElement: this.tipID, label: "", "auto-close": "true", placement: "trailing", closable: true }, index.h("span", { class: CSS$1.uiLocationPopoverContent }, index.h("span", { class: CSS$1.uiLocationItems }, this.getUILocation()), tip ? index.h("span", { class: CSS$1.tip }, tip) : null)));
+    }
+    renderUserLocaleSection() {
+        const uiDataItem = this.getUIDataItem();
+        const userLocaleData = uiDataItem === null || uiDataItem === void 0 ? void 0 : uiDataItem.userLocaleData;
+        const isSelected = uiDataItem === null || uiDataItem === void 0 ? void 0 : uiDataItem.selected;
+        const selected = isSelected ? ` ${CSS$1.selected}` : '';
+        const label = userLocaleData === null || userLocaleData === void 0 ? void 0 : userLocaleData.label;
+        const value = userLocaleData === null || userLocaleData === void 0 ? void 0 : userLocaleData.value;
+        const uid = this.setting.id;
+        return (index.h("div", { class: `${CSS$1.section}${selected}` }, this.renderItemHeader(utils.EInputType.User, label, uid), this.handleInputRender(utils.EInputType.User, value, uid)));
+    }
+    renderTranslatedLanguageSection() {
+        var _a, _b;
+        const uiDataItem = this.getUIDataItem();
+        const uid = this.setting.id;
+        const locale = utils.store.get('currentLanguage');
+        const data = utils.store.get('portalItemResourceT9n');
+        const label = (_a = this.translatedLanguageLabels) === null || _a === void 0 ? void 0 : _a[this.fieldName];
+        const value = (_b = data === null || data === void 0 ? void 0 : data[locale]) === null || _b === void 0 ? void 0 : _b[uid];
+        const selected = (uiDataItem === null || uiDataItem === void 0 ? void 0 : uiDataItem.selected) ? ` ${CSS$1.selected}` : '';
+        return (index.h("div", { class: `${CSS$1.section}${selected}` }, this.renderItemHeader(utils.EInputType.Translation, label, uid), this.handleInputRender(utils.EInputType.Translation, value, uid)));
+    }
+    handleInputRender(type, value, uid) {
+        const uiDataItem = this.getUIDataItem();
+        const isExpanded = uiDataItem === null || uiDataItem === void 0 ? void 0 : uiDataItem.expanded;
+        return isExpanded ? (this.hasNestedContent ? this.renderNestedInputs(type) : this.renderInput(type, value, uid)) : null;
+    }
+    renderNestedInputs(inputType, contentItem) {
+        const settingToRender = contentItem !== null && contentItem !== void 0 ? contentItem : this.setting;
+        const { content } = settingToRender;
+        return content === null || content === void 0 ? void 0 : content.map(contentItem => (contentItem.hasOwnProperty('content') ? this.renderNestedInputs(inputType, contentItem) : this.renderNestedInput(inputType, contentItem)));
+    }
+    renderNestedInput(inputType, contentItem) {
+        var _a;
+        const locale = utils.store.get('currentLanguage');
+        const data = utils.store.get('portalItemResourceT9n');
+        const uid = contentItem === null || contentItem === void 0 ? void 0 : contentItem.id;
+        const localeData = data === null || data === void 0 ? void 0 : data[locale];
+        const translatedValue = localeData === null || localeData === void 0 ? void 0 : localeData[uid];
+        const { label, value, id } = contentItem;
+        const inputLabel = inputType === utils.EInputType.Translation ? (_a = this.translatedLanguageLabels) === null || _a === void 0 ? void 0 : _a[id] : label;
+        const isUser = inputType === utils.EInputType.User;
+        const inputValue = isUser ? value : translatedValue;
+        return (index.h("div", { class: CSS$1.nestedInput }, this.renderItemHeader(inputType, inputLabel, uid, contentItem), this.renderInput(inputType, inputValue, uid, contentItem)));
+    }
+    renderItemHeader(type, label, uid, contentItem) {
+        const doesNotHaveNestedContent = !this.hasNestedContent;
+        const isNestedItem = !!contentItem;
+        const showCopyButton = doesNotHaveNestedContent || isNestedItem;
+        return (index.h("div", { class: CSS$1.topRow }, this.renderItemHeaderLabel(type, label, contentItem), showCopyButton ? this.renderCopyButton(type, uid) : null));
+    }
+    renderItemHeaderLabel(type, label, contentItem) {
+        const isUserSectionWithNoNestedContent = type === utils.EInputType.User && !contentItem;
+        return (index.h("div", { class: CSS$1.labelContainer }, !contentItem ? this.renderExpandCollapseButton() : null, index.h("calcite-icon", { icon: this.getIcon(contentItem), scale: "s" }), index.h("span", { class: CSS$1.label }, label), isUserSectionWithNoNestedContent ? this.renderInfoButton() : null));
+    }
+    renderExpandCollapseButton() {
+        const uiDataItem = this.getUIDataItem();
+        const isExpanded = uiDataItem === null || uiDataItem === void 0 ? void 0 : uiDataItem.expanded;
+        const icon = isExpanded ? utils.EIcons.Expanded : utils.EIcons.Collapsed;
+        return index.h("calcite-action", { onClick: this.handleExpand.bind(this, uiDataItem), icon: icon, scale: "s", appearance: "transparent", text: "" });
+    }
+    renderInfoButton() {
+        return (index.h("button", { id: this.tipID, class: CSS$1.infoButton }, index.h("calcite-icon", { class: CSS$1.infoIcon, icon: utils.EIcons.Popover, scale: "s" })));
+    }
+    renderCopyButton(type, uid) {
+        return index.h("calcite-action", { class: this.calciteMode, onClick: this.copySelection.bind(this, type, uid), slot: "action", icon: utils.EIcons.Copy, appearance: "transparent", text: "" });
+    }
+    renderInput(type, value, uid, contentItem) {
+        const setting = contentItem !== null && contentItem !== void 0 ? contentItem : this.setting;
+        const isNotRichText = setting.type === 'string' || setting.type === 'textarea';
+        return isNotRichText
+            ? type === utils.EInputType.User
+                ? this.renderUserLocaleInput(value, uid)
+                : this.renderTranslatedLanguageInput(value, uid)
+            : this.renderTextEditor(value, type, uid);
+    }
+    renderUserLocaleInput(value, uid) {
+        return (index.h("calcite-input", { ref: (node) => (this.userInputs[uid] = node), key: uid, id: uid, class: utils.ECalciteMode.Light, "data-field-name": this.fieldName, value: value, onFocus: this.handleSelection, onCalciteInputChange: this.handleUserInputChange.bind(this) }));
+    }
+    renderTranslatedLanguageInput(value, uid) {
+        return (index.h("calcite-input", { ref: (node) => (this.translatedInputs[uid] = node), key: uid, id: uid, class: utils.ECalciteMode.Light, "data-field-name": this.fieldName, value: value, onFocus: this.handleSelection, onCalciteInputChange: this.handleTranslatedInputChange.bind(this) }));
+    }
+    renderTextEditor(value, type, uid) {
+        const config = { toolbar: [] };
+        return (index.h("instant-apps-ckeditor-wrapper", { id: uid, ref: this.setEditor.bind(this, type), onDataChanged: this.handleTextEditorDataChange.bind(this, type), onIsFocused: this.handleSelection, value: value !== null && value !== void 0 ? value : '', "data-field-name": this.fieldName, config: config }));
+    }
+    getUIDataItem() {
+        if (!utils.languageTranslatorState.uiData)
+            return;
+        return utils.languageTranslatorState.uiData.get(this.fieldName);
+    }
+    updateT9nStore(fieldName, value) {
+        const currentLanguage = utils.store.get('currentLanguage');
+        const dataToWrite = { [fieldName]: value };
+        const updatedData = utils.getT9nData(currentLanguage, dataToWrite);
+        utils.store.set('portalItemResourceT9n', updatedData);
+    }
+    handleExpand() {
+        const uiDataItem = this.getUIDataItem();
+        uiDataItem.expanded = !uiDataItem.expanded;
+        const uiData = new Map(utils.languageTranslatorState.uiData);
+        uiData.set(this.fieldName, uiDataItem);
+        utils.store.set('uiData', uiData);
+    }
+    handleEditorCollapse() {
+        var _a, _b;
+        const uiData = utils.store.get('uiData');
+        const localeSettingItem = uiData === null || uiData === void 0 ? void 0 : uiData.get(this.fieldName);
+        const isExpanded = localeSettingItem === null || localeSettingItem === void 0 ? void 0 : localeSettingItem.expanded;
+        if (!isExpanded && ((_a = this.userEditorWrapper) === null || _a === void 0 ? void 0 : _a.editorInstance) && ((_b = this.translatedEditorWrapper) === null || _b === void 0 ? void 0 : _b.editorInstance)) {
+            const { userEditorWrapper, translatedEditorWrapper } = this;
+            const userEditorData = userEditorWrapper.editorInstance.getData();
+            userEditorWrapper.value = userEditorData;
+            const translatedEditorData = translatedEditorWrapper.editorInstance.getData();
+            translatedEditorWrapper.value = translatedEditorData;
+            userEditorWrapper.editorInstance.destroy();
+            translatedEditorWrapper.editorInstance.destroy();
+        }
+    }
+    handleSelection(event) {
+        const uiData = new Map(utils.languageTranslatorState.uiData);
+        const uiDataKeys = utils.getUIDataKeys();
+        uiDataKeys.forEach(key => {
+            const setting = uiData === null || uiData === void 0 ? void 0 : uiData.get(key);
+            setting.selected = false;
+        });
+        uiDataKeys.forEach(key => {
+            const node = event === null || event === void 0 ? void 0 : event.target;
+            const fieldName = node === null || node === void 0 ? void 0 : node.getAttribute('data-field-name');
+            if (key === fieldName) {
+                const setting = uiData === null || uiData === void 0 ? void 0 : uiData.get(key);
+                setting.selected = true;
+            }
+        });
+        utils.store.set('uiData', uiData);
+    }
+    getUILocation() {
+        const uiDataItem = this.getUIDataItem();
+        const { uiLocation, userLocaleData } = uiDataItem;
+        const { section, subsection } = uiLocation;
+        const breadCrumbLabels = [section.label, subsection.label, userLocaleData.label].filter(uiLocationStr => !!uiLocationStr);
+        return breadCrumbLabels.map((breadCrumbLabel, breadCrumbLabelIndex) => (index.h("span", { class: CSS$1.uiLocationItem }, index.h("span", null, breadCrumbLabel), breadCrumbLabelIndex !== breadCrumbLabels.length - 1 ? index.h("calcite-icon", { icon: "chevron-right", scale: "s" }) : null)));
+    }
+    getTip() {
+        const uiDataItem = this.getUIDataItem();
+        const { tip } = uiDataItem;
+        return tip;
+    }
+    copySelection(type, uid) {
+        if (this.setting.type === utils.ESettingType.TextEditor) {
+            this.copyTextEditorContent(type);
+        }
+        else {
+            this.copyCalciteInputContent(uid, type);
+        }
+    }
+    copyTextEditorContent(type) {
+        var _a, _b;
+        const editor = type === utils.EInputType.User ? (_a = this.userEditorWrapper) === null || _a === void 0 ? void 0 : _a.editorInstance : (_b = this.translatedEditorWrapper) === null || _b === void 0 ? void 0 : _b.editorInstance;
+        const duration = 50;
+        setTimeout(() => {
+            this.selectContent(editor);
+            setTimeout(() => this.selectContent(editor), duration);
+        }, duration);
+        this.copyContent(editor);
+    }
+    selectContent(editor) {
+        editor.editing.view.focus();
+        const { model } = editor;
+        const doc = model.document;
+        const range = model.createRangeIn(doc.getRoot());
+        model.change(writer => writer.setSelection(range));
+    }
+    copyContent(editor) {
+        const data = editor.getData();
+        const tempElement = document.createElement('div');
+        tempElement.contentEditable = 'true';
+        tempElement.innerHTML = data;
+        document.body.appendChild(tempElement);
+        const tempRange = document.createRange();
+        tempRange.selectNodeContents(tempElement);
+        const selection = window.getSelection();
+        selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
+        selection === null || selection === void 0 ? void 0 : selection.addRange(tempRange);
+        document.execCommand('copy');
+        document.body.removeChild(tempElement);
+    }
+    copyCalciteInputContent(uid, inputType) {
+        const input = inputType === utils.EInputType.User ? this.userInputs[uid] : this.translatedInputs[uid];
+        if (input) {
+            input.selectText();
+            const value = input.value;
+            navigator.clipboard.writeText(value);
+        }
+    }
+    setEditor(type, node) {
+        if (type === utils.EInputType.User) {
+            this.userEditorWrapper = node;
+        }
+        else {
+            this.translatedEditorWrapper = node;
+        }
+    }
+    // INPUT DATA HANDLING
+    // User locale input data handling
+    async handleUserInputChange(e) {
+        utils.store.set('saving', true);
+        try {
+            const node = e.target;
+            const uid = node.id;
+            const value = node.value;
+            const uiDataItem = this.getUIDataItem();
+            uiDataItem.userLocaleData.value = value;
+            await this.userLocaleInputOnChangeCallback(uid, value);
+            utils.store.set('saving', false);
+        }
+        catch (_a) {
+            utils.store.set('saving', false);
+        }
+    }
+    async handleUserTextEditorChange(e) {
+        utils.store.set('saving', true);
+        try {
+            const value = e.detail;
+            const node = e.target;
+            const uid = node.id;
+            const uiDataItem = this.getUIDataItem();
+            uiDataItem.userLocaleData.value = value;
+            await this.userLocaleInputOnChangeCallback(uid, value);
+            utils.store.set('saving', false);
+        }
+        catch (_a) {
+            utils.store.set('saving', false);
+        }
+    }
+    // Translated locale input data handling
+    async handleTranslatedInputChange(e) {
+        utils.store.set('saving', true);
+        try {
+            const composedPath = e.composedPath();
+            const node = composedPath[0];
+            const uid = node.id;
+            this.updateT9nStore(uid, node.value);
+            const { locale, resource } = this.getTranslatedLocaleCallbackData();
+            const value = e.target.value;
+            await this.translatedLocaleInputOnChangeCallback(uid, value, locale, resource);
+            setTimeout(() => utils.store.set('saving', false), 1500);
+            this.translatorItemDataUpdated.emit();
+        }
+        catch (err) {
+            console.error('Error writing to portal item resource: ', err);
+            utils.store.set('saving', false);
+        }
+    }
+    async handleTranslatedTextEditorChange(e) {
+        utils.store.set('saving', true);
+        try {
+            const node = e.target;
+            const uid = node.id;
+            this.updateT9nStore(uid, e.detail);
+            const { locale, resource } = this.getTranslatedLocaleCallbackData();
+            const value = e.detail;
+            await this.translatedLocaleInputOnChangeCallback(uid, value, locale, resource);
+            setTimeout(() => utils.store.set('saving', false), 1500);
+            this.translatorItemDataUpdated.emit();
+        }
+        catch (err) {
+            console.error('Error writing to portal item resource: ', err);
+            utils.store.set('saving', false);
+        }
+    }
+    handleTextEditorDataChange(type, e) {
+        if (type === utils.EInputType.User) {
+            this.handleUserTextEditorChange(e);
+        }
+        else {
+            this.handleTranslatedTextEditorChange(e);
+        }
+    }
+    getTranslatedLocaleCallbackData() {
+        const locale = utils.store.get('currentLanguage');
+        const resource = utils.store.get('portalItemResource');
+        return { locale, resource };
+    }
+    getIcon(setting) {
+        const settingToUse = setting !== null && setting !== void 0 ? setting : this.setting;
+        switch (settingToUse.stringType) {
+            case 'title':
+                return utils.EIcons.Title;
+            case 'subtitle':
+                return utils.EIcons.Subtitle;
+            case 'text':
+                return utils.EIcons.Text;
+            case 'button':
+                return utils.EIcons.Button;
+            case 'string':
+                return utils.EIcons.String;
+            default:
+                return utils.EIcons.SettingIndicator;
+        }
+    }
+};
+InstantAppsLanguageTranslatorItem.style = InstantAppsLanguageTranslatorItemStyle0;
+
+const instantAppsLanguageTranslatorSearchCss = ".sc-instant-apps-language-translator-search-h{display:block;position:relative}.sc-instant-apps-language-translator-search-h .instant-apps-language-translator-search__input.sc-instant-apps-language-translator-search{width:235.5px}.sc-instant-apps-language-translator-search-h .instant-apps-language-translator-search__suggestion-list.sc-instant-apps-language-translator-search{position:absolute;margin:0;padding:0;width:100%;max-height:30vh;overflow:auto;border-left:none;background-color:var(--calcite-color-foreground-1);border:1px solid #c0c0c0;z-index:702}.sc-instant-apps-language-translator-search-h .instant-apps-language-translator-search__suggestion-list-item.sc-instant-apps-language-translator-search:first-child{border:none}.sc-instant-apps-language-translator-search-h .instant-apps-language-translator-search__suggestion-list-item.sc-instant-apps-language-translator-search{margin-top:0;padding:0.8em 1em;border-top:solid 1px rgba(110, 110, 110, 0.3);display:flex;flex-direction:column;cursor:pointer;word-break:break-word}.sc-instant-apps-language-translator-search-h .instant-apps-language-translator-search__suggestion-list-item.sc-instant-apps-language-translator-search:hover{background-color:var(--calcite-color-foreground-2)}";
+const InstantAppsLanguageTranslatorSearchStyle0 = instantAppsLanguageTranslatorSearchCss;
+
+const BASE = 'instant-apps-language-translator-search';
+const CSS = {
+    base: BASE,
+    input: `${BASE}__input`,
+    suggestionList: `${BASE}__suggestion-list`,
+    suggestionListItem: `${BASE}__suggestion-list-item`,
+};
+const InstantAppsLanguageTranslatorSearch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.suggestionSelected = index.createEvent(this, "suggestionSelected", 7);
+        this.t9nPlaceholder = undefined;
+        this.results = [];
+    }
+    render() {
+        return (index.h(index.Host, { key: '80febf289e2bbfcf09636c84b5a5a83e80f377c0' }, this.renderSearchInput(), this.renderSuggestions()));
+    }
+    renderSearchInput() {
+        return (index.h("calcite-input", { ref: (node) => (this.searchInput = node), class: CSS.input, onCalciteInputInput: this.handleSearch.bind(this), type: "search", placeholder: this.t9nPlaceholder, icon: "search" }));
+    }
+    renderSuggestions() {
+        return this.results.length > 0 ? this.renderSuggestionList() : null;
+    }
+    renderSuggestionList() {
+        return index.h("ul", { class: CSS.suggestionList }, this.results.map(result => this.renderSuggestionListItem(result)));
+    }
+    renderSuggestionListItem(result) {
+        return (index.h("li", { onClick: this.selectSuggestion.bind(this), class: CSS.suggestionListItem, "data-field-name": result.fieldName }, result.userLocaleData.label));
+    }
+    handleSearch(e) {
+        var _a, _b;
+        const node = e.target;
+        const userInput = (_b = (_a = node.value) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.trim();
+        const uiData = utils.store.get('uiData');
+        const settingKeys = utils.getUIDataKeys();
+        const portalItemResrouceT9n = utils.store.get('portalItemResourceT9n');
+        const currentLanguage = utils.store.get('currentLanguage');
+        const translatedData = portalItemResrouceT9n[currentLanguage];
+        const possibleResultKeys = this.getSettingDataItems(settingKeys);
+        const matchedResults = possibleResultKeys.filter(this.matchedResultsCallback(uiData, translatedData, userInput, currentLanguage));
+        this.results = [
+            ...matchedResults.map(matchedKey => {
+                const result = Object.assign({ fieldName: matchedKey }, uiData.get(matchedKey));
+                return result;
+            }),
+        ];
+    }
+    matchedResultsCallback(uiData, translatedData, userInput, currentLanguage) {
+        return (key) => {
+            var _a;
+            const setting = uiData.get(key);
+            const { label } = setting.userLocaleData;
+            const { value } = setting.userLocaleData;
+            const translatedLanguageLabels = uiData.get('translatedLanguageLabels');
+            const translatedLanguageLabel = (_a = translatedLanguageLabels === null || translatedLanguageLabels === void 0 ? void 0 : translatedLanguageLabels[currentLanguage]) === null || _a === void 0 ? void 0 : _a[key];
+            const translatedLanguageValue = translatedData === null || translatedData === void 0 ? void 0 : translatedData[key];
+            const labelMatch = this.testUserInput(label, userInput);
+            const valueMatch = this.testUserInput(value, userInput);
+            const translatedLanguageLabelMatch = this.testUserInput(translatedLanguageLabel, userInput);
+            const translatedLanguageValueMatch = this.testUserInput(translatedLanguageValue, userInput);
+            const isMatch = labelMatch || valueMatch || translatedLanguageLabelMatch || translatedLanguageValueMatch;
+            return isMatch;
+        };
+    }
+    getSettingDataItems(settingKeys) {
+        return settingKeys.filter(key => key !== 'locales' && key !== 'translatedLanguageLabels');
+    }
+    testUserInput(testValue, userInput) {
+        var _a;
+        return !!(testValue === null || testValue === void 0 ? void 0 : testValue.trim()) && !!(userInput === null || userInput === void 0 ? void 0 : userInput.trim()) && ((_a = testValue === null || testValue === void 0 ? void 0 : testValue.toLowerCase()) === null || _a === void 0 ? void 0 : _a.search(userInput)) !== -1;
+    }
+    selectSuggestion(e) {
+        const node = e.target;
+        const fieldName = node.getAttribute('data-field-name');
+        this.suggestionSelected.emit(fieldName);
+        this.resetSearchInput();
+    }
+    resetSearchInput() {
+        this.searchInput.value = '';
+        this.results = [];
+    }
+};
+InstantAppsLanguageTranslatorSearch.style = InstantAppsLanguageTranslatorSearchStyle0;
+
+exports.calcite_modal = Modal;
+exports.instant_apps_ckeditor_wrapper = InstantAppsCkeditorWrapper;
+exports.instant_apps_language_translator_item = InstantAppsLanguageTranslatorItem;
+exports.instant_apps_language_translator_search = InstantAppsLanguageTranslatorSearch;