/**
 * Copyright Aquera Inc 2023
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { __decorate } from "tslib";
import { html, } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styles } from './nile-inline-edit.css';
import NileElement from '../internal/nile-element';
import { getDisplayValue, updateSlottedElementValue, handleDocumentFocusIn, handleDocumentMouseDown, } from './nile-inline-edit-utils';
/**
 * Nile inline-edit component.
 *
 * @tag nile-inline-edit
 *
 */
let NileInlineEdit = class NileInlineEdit extends NileElement {
    constructor() {
        super(...arguments);
        /** Gives the label to the Inline Edit */
        this.label = '';
        /** Gives the Placeholder to the Inline Edit */
        this.placeholder = '';
        /** Open prop for displaying default slot in Inline Edit */
        this.open = false;
        /** Gives the Value to the Inline Edit */
        this.value = '';
        /** Maximum length for the placeholder value. Values longer than this will be truncated */
        this.maxPlaceholderLength = 25;
        /** Enables automatic closing when focus moves outside the component or when clicking outside */
        this.autoClose = false;
        /** Disables the inline edit, preventing it from being opened */
        this.disabled = false;
        this.handleDocumentFocusInWrapper = (event) => {
            const result = handleDocumentFocusIn(event, this, this.open);
            this.handleCloseResult(result);
        };
        this.handleDocumentMouseDownWrapper = (event) => {
            const result = handleDocumentMouseDown(event, this, this.open);
            this.handleCloseResult(result);
        };
        /* #endregion */
    }
    /**
     * The styles for nile-inline-edit
     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
     */
    static get styles() {
        return [styles];
    }
    /* #endregion */
    /* #region Methods */
    /**
     * Render method
     * @slot This is a slot test
     */
    handleCloseResult(result) {
        if (result.shouldClose) {
            if (result.newValue !== null) {
                this.value = result.newValue;
            }
            this.open = false;
        }
    }
    connectedCallback() {
        super.connectedCallback();
    }
    updated(changedProperties) {
        super.updated(changedProperties);
        if (changedProperties.has('open') && this.autoClose) {
            if (this.open) {
                updateSlottedElementValue(this.updateComplete, this.shadowRoot, this.value);
                document.addEventListener('focusin', this.handleDocumentFocusInWrapper, true);
                document.addEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);
            }
            else {
                document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);
                document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);
            }
        }
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        document.removeEventListener('focusin', this.handleDocumentFocusInWrapper, true);
        document.removeEventListener('mousedown', this.handleDocumentMouseDownWrapper, true);
    }
    handleClick() {
        if (this.disabled)
            return;
        this.open = true;
    }
    render() {
        // Use truncated value for display, or placeholder if empty
        const displayValue = this.autoClose ? getDisplayValue(this.value, this.maxPlaceholderLength) : this.value;
        const textInsideContainer = displayValue || this.placeholder;
        return html `
      <div class="inline__edit--label" part="label">${this.label}</div>
      ${this.open
            ? html ` <slot class="inline__edit--open--container" part="base"> </slot>`
            : html ` <div class="inline__edit--container" part="container" @click=${this.handleClick}>
            ${textInsideContainer}
          </div>`}
    `;
    }
};
__decorate([
    property({ type: String, reflect: true })
], NileInlineEdit.prototype, "label", void 0);
__decorate([
    property({ type: String, reflect: true })
], NileInlineEdit.prototype, "placeholder", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileInlineEdit.prototype, "open", void 0);
__decorate([
    property({ type: String, reflect: true })
], NileInlineEdit.prototype, "value", void 0);
__decorate([
    property({ type: Number, attribute: 'max-placeholder-length' })
], NileInlineEdit.prototype, "maxPlaceholderLength", void 0);
__decorate([
    property({ type: Boolean, attribute: 'auto-close' })
], NileInlineEdit.prototype, "autoClose", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileInlineEdit.prototype, "disabled", void 0);
NileInlineEdit = __decorate([
    customElement('nile-inline-edit')
], NileInlineEdit);
export { NileInlineEdit };
export default NileInlineEdit;
//# sourceMappingURL=nile-inline-edit.js.map