'use strict';

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

const core = require('./core-7e2b0104.js');
const i18n_provider = require('./i18n.provider-b7733c9d.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{display:block;font-size:.875rem;font-family:var(--anj-font-family);font-weight:400;line-height:1.5;outline:none;background-color:inherit;color:var(--anj-text-medium);padding:0 1rem;-webkit-transition:height .4s ease;transition:height .4s ease}.sc-anj-tray-h, .sc-anj-tray-h:after, .sc-anj-tray-h:before{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}.sc-anj-tray-h:active, .sc-anj-tray-h .sc-anj-tray:active, .sc-anj-tray-h:focus, .sc-anj-tray-h .sc-anj-tray:focus{outline:none}.sc-anj-tray-h .anj-tray-header.sc-anj-tray{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-flow:row;flex-flow:row;padding-top:.5rem}.sc-anj-tray-h .anj-tray-header.sc-anj-tray > div.sc-anj-tray{display:-ms-flexbox;display:flex;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.sc-anj-tray-h .anj-tray-header.sc-anj-tray > div.sc-anj-tray:last-child{-ms-flex-pack:end;justify-content:flex-end}.sc-anj-tray-h .anj-tray-header.sc-anj-tray > div.anj-tray-toggle.sc-anj-tray{display:none}\@media (min-width:768px){.sc-anj-tray-h .anj-tray-header.sc-anj-tray{-ms-flex-flow:row wrap;flex-flow:row wrap}.sc-anj-tray-h .anj-tray-header.sc-anj-tray > div.sc-anj-tray{-ms-flex:0 0 33.333%;flex:0 0 33.333%;max-width:33.333%}.sc-anj-tray-h .anj-tray-header.sc-anj-tray > div.anj-tray-toggle.sc-anj-tray{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}}.sc-anj-tray-h .anj-tray-header.sc-anj-tray .anj-tray-toggle.sc-anj-tray anj-button.sc-anj-tray{left:50%;position:absolute;top:-.75rem}.sc-anj-tray-h .anj-tray-content.sc-anj-tray{display:-ms-flexbox;display:flex;overflow-x:auto;padding-bottom:.75rem;scroll-behavior:smooth}"; }
};
i18n_provider.Tunnel.injectProps(Tray, ['translator']);

const TrayGroup = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
    }
    render() {
        return [
            core.h("div", { class: "anj-tray-group-header" }, core.h("slot", { name: "label" })),
            core.h("div", { class: "anj-tray-items-wrapper" }, core.h("slot", null))
        ];
    }
    static get style() { return ".sc-anj-tray-group-h{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap}.sc-anj-tray-group-h:not(:first-child){border-left:1px solid var(--anj-neutral);margin-left:.8rem;padding-left:.8rem}.sc-anj-tray-group-h .anj-tray-group-header.sc-anj-tray-group{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.sc-anj-tray-group-h .anj-tray-items-wrapper.sc-anj-tray-group{display:-ms-flexbox;display:flex}"; }
};

const TrayItem = class {
    constructor(hostRef) {
        core.registerInstance(this, hostRef);
        /**
         * Is the item active
         */
        this.active = false;
        /**
         * Should the item just be outlined
         */
        this.outline = false;
        /**
         * Width setting
         */
        this.width = 'auto';
        this.anjTrayItemActive = core.createEvent(this, "anjTrayItemActive", 7);
    }
    onActiveChange() {
        if (this.active) {
            this.anjTrayItemActive.emit();
        }
    }
    render() {
        const itemStyle = {
            width: this.width
        };
        return core.h(core.Host, { tabindex: "-1", style: itemStyle }, core.h("button", { class: "anj-tray-item" }, core.h("slot", null)));
    }
    static get watchers() { return {
        "active": ["onActiveChange"]
    }; }
    static get style() { return ".sc-anj-tray-item-h{display:block;overflow:hidden}[outline].sc-anj-tray-item-h .anj-tray-item.sc-anj-tray-item{background-color:transparent;border:1px dashed var(--anj-border-dark);color:var(--anj-border-dark)}[active].sc-anj-tray-item-h .anj-tray-item.sc-anj-tray-item, [outline][active].sc-anj-tray-item-h{border-color:var(--anj-highlight)}[active].sc-anj-tray-item-h .anj-tray-item.sc-anj-tray-item{opacity:1}.sc-anj-tray-item-h:not([outline]) .anj-tray-item.sc-anj-tray-item{background-color:var(--anj-light);border-color:var(--anj-border);color:var(--anj-dark)!important}.sc-anj-tray-item-h:not(:last-child){margin-right:.5rem}.sc-anj-tray-item-h .anj-tray-item.sc-anj-tray-item{border:1px solid transparent;border-radius:0;height:100%;opacity:.6;padding:.5rem;text-align:left;-webkit-transition:border-color .2s ease,opacity .2s ease;transition:border-color .2s ease,opacity .2s ease;width:100%}.sc-anj-tray-item-h .anj-tray-item.sc-anj-tray-item:focus{-webkit-box-shadow:none;box-shadow:none;outline:none;opacity:1}.sc-anj-tray-item-s > anj-headline>*{color:var(--anj-dark)!important}"; }
};

exports.anj_tray = Tray;
exports.anj_tray_group = TrayGroup;
exports.anj_tray_item = TrayItem;
