'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const core = require('./core-b7b9d752.js');
const i18n_provider = require('./i18n.provider-5632e5ed.js');

var Translations;
(function (Translations) {
    Translations["EXPAND_TRAY"] = "Expand Tray";
    Translations["COLLAPSE_TRAY"] = "Collapse Tray";
})(Translations || (Translations = {}));
const Tray = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        this.collapsed = false;
        this.collapsible = false;
        this.anjTrayDidLoad = core.createEvent(this, "anjTrayDidLoad", 7);
        this.anjTrayCollapse = core.createEvent(this, "anjTrayCollapse", 7);
    }
    componentDidLoad() {
        this.anjTrayDidLoad.emit();
    }
    onItemActive({ target }) {
        const el = target;
        const elOffset = el.offsetWidth + el.offsetLeft;
        if (elOffset > this.contentEl.scrollLeft + this.contentEl.offsetWidth) {
            this.contentEl.scrollLeft = elOffset - this.contentEl.offsetWidth;
        }
        else if (elOffset < this.contentEl.scrollLeft + this.contentEl.offsetWidth) {
            this.contentEl.scrollLeft = this.contentEl.scrollLeft - el.offsetWidth > -1 ? this.contentEl.scrollLeft - el.offsetWidth : 0;
        }
    }
    async toggle() {
        this.element.style.height = `${this.element.offsetHeight}px`;
        this.collapsed = !this.collapsed;
        const targetHeight = this.collapsed ? this.headerEl.offsetHeight : this.headerEl.offsetHeight + this.contentEl.offsetHeight;
        this.anjTrayCollapse.emit(targetHeight);
        this.element.style.height = `${targetHeight}px`;
    }
    render() {
        const label = this.collapsed ? this.translator(Translations.COLLAPSE_TRAY) : this.translator(Translations.EXPAND_TRAY);
        const path = this.collapsed
            ? 'M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z'
            : 'M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z';
        return [
            core.h("div", { class: "anj-tray-header", ref: el => this.headerEl = el }, core.h("div", null, core.h("slot", { name: "header-left" })), core.h("div", { class: "anj-tray-toggle" }, this.collapsible ?
                core.h("anj-button", { context: "free", onClick: () => this.toggle(), "aria-label": label }, core.h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 48 48" }, core.h("path", { d: path }))) : undefined), core.h("div", null, core.h("slot", { name: "header-right" }))),
            core.h("div", { class: "anj-tray-content", ref: el => this.contentEl = el }, core.h("slot", null))
        ];
    }
    get element() { return core.getElement(this); }
    static get style() { return ".sc-anj-tray-h {\n  display: block;\n  font-size: 0.875rem;\n  font-family: var(--anj-font-family);\n  font-weight: normal;\n  line-height: 1.5;\n  outline: none;\n  background-color: inherit;\n  color: var(--anj-text-medium);\n  padding: 0 1rem;\n  -webkit-transition: height 0.4s ease;\n  transition: height 0.4s ease;\n}\n.sc-anj-tray-h, .sc-anj-tray-h::before, .sc-anj-tray-h::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\n.sc-anj-tray-h:focus, .sc-anj-tray-h:active, .sc-anj-tray-h *.sc-anj-tray:focus, .sc-anj-tray-h *.sc-anj-tray:active {\n  outline: none;\n}\n.sc-anj-tray-h .anj-tray-header.sc-anj-tray {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 1;\n  flex: 1;\n  -ms-flex-flow: row;\n  flex-flow: row;\n  padding-top: 0.5rem;\n}\n.sc-anj-tray-h .anj-tray-header.sc-anj-tray > div.sc-anj-tray {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex: 0 0 50%;\n  flex: 0 0 50%;\n  max-width: 50%;\n}\n.sc-anj-tray-h .anj-tray-header.sc-anj-tray > div.sc-anj-tray:last-child {\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n}\n.sc-anj-tray-h .anj-tray-header.sc-anj-tray > div.anj-tray-toggle.sc-anj-tray {\n  display: none;\n}\n\@media (min-width: 768px) {\n  .sc-anj-tray-h .anj-tray-header.sc-anj-tray {\n    -ms-flex-flow: row wrap;\n    flex-flow: row wrap;\n  }\n  .sc-anj-tray-h .anj-tray-header.sc-anj-tray > div.sc-anj-tray {\n    -ms-flex: 0 0 33.333%;\n    flex: 0 0 33.333%;\n    max-width: 33.333%;\n  }\n  .sc-anj-tray-h .anj-tray-header.sc-anj-tray > div.anj-tray-toggle.sc-anj-tray {\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-pack: center;\n    justify-content: center;\n  }\n}\n.sc-anj-tray-h .anj-tray-header.sc-anj-tray .anj-tray-toggle.sc-anj-tray anj-button.sc-anj-tray {\n  left: 50%;\n  position: absolute;\n  top: -0.75rem;\n}\n.sc-anj-tray-h .anj-tray-content.sc-anj-tray {\n  display: -ms-flexbox;\n  display: flex;\n  overflow-x: auto;\n  padding-bottom: 0.75rem;\n  scroll-behavior: smooth;\n}"; }
};
i18n_provider.Tunnel.injectProps(Tray, ['translator']);

exports.anj_tray = Tray;
