@esri/solutions-components 0.8.67 → 0.9.0

package/dist/solutions-components/calcite-inline-editable.entry.js

@@ -1,253 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { r as registerInstance, e as createEvent, h, g as getElement } from './index-0eecd45f.js';
-import { g as getSlotted } from './dom-1f06a111.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-179483f5.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-c34ec0cf.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-5f2ac40f.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-1b4d548e.js';
-import { c as createObserver } from './observers-81ed4977.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-2df2d559.js';
-import './guid-f05d01d5.js';
-import './resources-be0262db.js';
-import './browser-920df963.js';
-import './component-960ddabf.js';
-import './key-15222297.js';
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
- */
-const CSS = {
-    wrapper: "wrapper",
-    confirmChangesButton: "confirm-changes-button",
-    cancelEditingButton: "cancel-editing-button",
-    inputWrapper: "input-wrapper",
-    cancelEditingButtonWrapper: "cancel-editing-button-wrapper",
-    enableEditingButton: "enable-editing-button",
-    controlsWrapper: "controls-wrapper",
-};
-
-const inlineEditableCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block}:host([scale=s]) .controls-wrapper{block-size:1.5rem}:host([scale=m]) .controls-wrapper{block-size:2rem}:host([scale=l]) .controls-wrapper{block-size:2.75rem}:host(:not([editing-enabled]):not([disabled])) .wrapper:hover{background-color:var(--calcite-color-foreground-2)}.wrapper{box-sizing:border-box;display:flex;justify-content:space-between;background-color:var(--calcite-color-foreground-1);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}.wrapper .input-wrapper{flex:1 1 0%}.controls-wrapper{display:flex}:host([disabled]) .cancel-editing-button-wrapper{border-color:var(--calcite-color-border-2)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
-
-const InlineEditable = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.calciteInlineEditableEditCancel = createEvent(this, "calciteInlineEditableEditCancel", 6);
-        this.calciteInlineEditableEditConfirm = createEvent(this, "calciteInlineEditableEditConfirm", 6);
-        this.calciteInternalInlineEditableEnableEditingChange = createEvent(this, "calciteInternalInlineEditableEnableEditingChange", 6);
-        this.mutationObserver = createObserver("mutation", () => this.mutationObserverCallback());
-        this.enableEditing = () => {
-            var _a, _b;
-            this.valuePriorToEditing = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value;
-            this.editingEnabled = true;
-            (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.setFocus();
-            this.calciteInternalInlineEditableEnableEditingChange.emit();
-        };
-        this.disableEditing = () => {
-            this.editingEnabled = false;
-        };
-        this.cancelEditing = () => {
-            if (this.inputElement) {
-                this.inputElement.value = this.valuePriorToEditing;
-            }
-            this.disableEditing();
-            this.enableEditingButton.setFocus();
-            if (!this.editingEnabled && !!this.shouldEmitCancel) {
-                this.calciteInlineEditableEditCancel.emit();
-            }
-        };
-        this.escapeKeyHandler = async (event) => {
-            var _a;
-            if (event.defaultPrevented) {
-                return;
-            }
-            if (event.key === "Escape") {
-                event.preventDefault();
-                this.cancelEditing();
-            }
-            if (event.key === "Tab" && this.shouldShowControls) {
-                if (!event.shiftKey && event.target === this.inputElement) {
-                    event.preventDefault();
-                    this.cancelEditingButton.setFocus();
-                }
-                if (!!event.shiftKey && event.target === this.cancelEditingButton) {
-                    event.preventDefault();
-                    (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus();
-                }
-            }
-        };
-        this.cancelEditingHandler = async (event) => {
-            event.preventDefault();
-            this.cancelEditing();
-        };
-        this.enableEditingHandler = async (event) => {
-            if (this.disabled ||
-                event.target === this.cancelEditingButton ||
-                event.target === this.confirmEditingButton) {
-                return;
-            }
-            event.preventDefault();
-            if (!this.editingEnabled) {
-                this.enableEditing();
-            }
-        };
-        this.confirmChangesHandler = async (event) => {
-            event.preventDefault();
-            this.calciteInlineEditableEditConfirm.emit();
-            try {
-                if (this.afterConfirm) {
-                    this.loading = true;
-                    await this.afterConfirm();
-                    this.disableEditing();
-                    this.enableEditingButton.setFocus();
-                }
-            }
-            catch (error) {
-            }
-            finally {
-                this.loading = false;
-            }
-        };
-        this.disabled = false;
-        this.editingEnabled = false;
-        this.loading = false;
-        this.controls = false;
-        this.scale = undefined;
-        this.afterConfirm = undefined;
-        this.messages = undefined;
-        this.messageOverrides = undefined;
-        this.defaultMessages = undefined;
-        this.effectiveLocale = undefined;
-    }
-    disabledWatcher(disabled) {
-        if (this.inputElement) {
-            this.inputElement.disabled = disabled;
-        }
-    }
-    editingEnabledWatcher(newValue, oldValue) {
-        if (this.inputElement) {
-            this.inputElement.editingEnabled = newValue;
-        }
-        if (!newValue && !!oldValue) {
-            this.shouldEmitCancel = true;
-        }
-    }
-    onMessagesChange() {
-        /* wired up by t9n util */
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    //--------------------------------------------------------------------------
-    connectedCallback() {
-        var _a;
-        connectInteractive(this);
-        connectLabel(this);
-        connectLocalized(this);
-        connectMessages(this);
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
-        this.mutationObserverCallback();
-    }
-    async componentWillLoad() {
-        setUpLoadableComponent(this);
-        await setUpMessages(this);
-    }
-    componentDidLoad() {
-        setComponentLoaded(this);
-    }
-    disconnectedCallback() {
-        var _a;
-        disconnectInteractive(this);
-        disconnectLabel(this);
-        disconnectLocalized(this);
-        disconnectMessages(this);
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    componentDidRender() {
-        updateHostInteraction(this);
-    }
-    render() {
-        return (h(InteractiveContainer, { key: '13a425b04bd57b14d4d1a7705f79f3e1f86c2e5a', disabled: this.disabled }, h("div", { key: '29b3c35c384d6044bcfc4f94d9a153dde2842656', class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, h("div", { key: '1cf670abd3361519ee80465efd198d2217b4a1e2', class: CSS.inputWrapper }, h("slot", { key: '86d343f2dbd9bdd4803b8552696530751945da69' })), h("div", { key: '87e0fe412f9a4e39f2d427601ae84f29f33249cc', class: CSS.controlsWrapper }, h("calcite-button", { key: '34badede2abdc00c0df6dee0fc9e618ac8876199', appearance: "transparent", class: CSS.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, scale: this.scale, style: {
-                opacity: this.editingEnabled ? "0" : "1",
-                width: this.editingEnabled ? "0" : "inherit",
-            }, type: "button",
-            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: (el) => (this.enableEditingButton = el) }), this.shouldShowControls && [
-            h("div", { key: 'a4f0cf191697a1aacd5cfd3719a8b4988dc8d8ff', class: CSS.cancelEditingButtonWrapper }, h("calcite-button", { key: 'faaf29c7289c3d9846a4714fd60392552ec29a4e', appearance: "transparent", class: CSS.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, scale: this.scale, type: "button",
-                // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-                ref: (el) => (this.cancelEditingButton = el) })),
-            h("calcite-button", { key: '0ba95994502e4e9e409a25d60512fc28f04e2c18', appearance: "solid", class: CSS.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, scale: this.scale, type: "button",
-                // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-                ref: (el) => (this.confirmEditingButton = el) }),
-        ]))));
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Event Listeners
-    //
-    //--------------------------------------------------------------------------
-    blurHandler() {
-        if (!this.controls) {
-            this.disableEditing();
-        }
-    }
-    effectiveLocaleChange() {
-        updateMessages(this, this.effectiveLocale);
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    //--------------------------------------------------------------------------
-    /** Sets focus on the component. */
-    async setFocus() {
-        var _a;
-        await componentFocusable(this);
-        (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    mutationObserverCallback() {
-        var _a;
-        this.updateSlottedInput();
-        this.scale = this.scale || ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.scale);
-    }
-    onLabelClick() {
-        this.setFocus();
-    }
-    updateSlottedInput() {
-        const inputElement = getSlotted(this.el, {
-            matches: "calcite-input",
-        });
-        this.inputElement = inputElement;
-        if (!inputElement) {
-            return;
-        }
-        this.inputElement.disabled = this.disabled;
-        this.inputElement.label = this.inputElement.label || getLabelText(this);
-    }
-    get shouldShowControls() {
-        return this.editingEnabled && this.controls;
-    }
-    static get delegatesFocus() { return true; }
-    static get assetsDirs() { return ["assets"]; }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "disabled": ["disabledWatcher"],
-        "editingEnabled": ["editingEnabledWatcher"],
-        "messageOverrides": ["onMessagesChange"],
-        "effectiveLocale": ["effectiveLocaleChange"]
-    }; }
-};
-InlineEditable.style = inlineEditableCss;
-
-export { InlineEditable as calcite_inline_editable };