var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './core-15e24a78.js';
import { T as Tunnel } from './i18n.provider-7cafb88f.js';
var Translations;
(function (Translations) {
    Translations["EXPAND_TRAY"] = "Expand Tray";
    Translations["COLLAPSE_TRAY"] = "Collapse Tray";
})(Translations || (Translations = {}));
var Tray = /** @class */ (function () {
    function class_1(hostRef) {
        registerInstance(this, hostRef);
        this.collapsed = false;
        this.collapsible = false;
        this.anjTrayDidLoad = createEvent(this, "anjTrayDidLoad", 7);
        this.anjTrayCollapse = createEvent(this, "anjTrayCollapse", 7);
    }
    class_1.prototype.componentDidLoad = function () {
        this.anjTrayDidLoad.emit();
    };
    class_1.prototype.onItemActive = function (_a) {
        var target = _a.target;
        var el = target;
        var 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;
        }
    };
    // Swallow the mouse up/down events so that this stupid thing works in modals https://git.zias.io/ui-foundation/anjuna/issues/804
    class_1.prototype.swallowEvent = function (e) {
        e.stopPropagation();
    };
    class_1.prototype.toggle = function () {
        return __awaiter(this, void 0, void 0, function () {
            var targetHeight;
            return __generator(this, function (_a) {
                this.element.style.height = this.element.offsetHeight + "px";
                this.collapsed = !this.collapsed;
                targetHeight = this.collapsed ? this.headerEl.offsetHeight : this.headerEl.offsetHeight + this.contentEl.offsetHeight;
                this.anjTrayCollapse.emit(targetHeight);
                this.element.style.height = targetHeight + "px";
                return [2 /*return*/];
            });
        });
    };
    class_1.prototype.render = function () {
        var _this = this;
        var label = this.collapsed ? this.translator(Translations.COLLAPSE_TRAY) : this.translator(Translations.EXPAND_TRAY);
        var 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 [
            h("div", { class: "anj-tray-header", ref: function (el) { return _this.headerEl = el; } }, h("div", null, h("slot", { name: "header-left" })), h("div", { class: "anj-tray-toggle" }, this.collapsible ?
                h("anj-button", { context: "free", onClick: function () { return _this.toggle(); }, "aria-label": label }, h("svg", { slot: "icon-only", xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 48 48" }, h("path", { d: path }))) : undefined), h("div", null, h("slot", { name: "header-right" }))),
            h("div", { class: "anj-tray-content", ref: function (el) { return _this.contentEl = el; } }, h("slot", null))
        ];
    };
    Object.defineProperty(class_1.prototype, "element", {
        get: function () { return getElement(this); },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(class_1, "style", {
        get: function () { 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}"; },
        enumerable: true,
        configurable: true
    });
    return class_1;
}());
Tunnel.injectProps(Tray, ['translator']);
var TrayGroup = /** @class */ (function () {
    function TrayGroup(hostRef) {
        registerInstance(this, hostRef);
    }
    TrayGroup.prototype.render = function () {
        return [
            h("div", { class: "anj-tray-group-header" }, h("slot", { name: "label" })),
            h("div", { class: "anj-tray-items-wrapper" }, h("slot", null))
        ];
    };
    Object.defineProperty(TrayGroup, "style", {
        get: function () { 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}"; },
        enumerable: true,
        configurable: true
    });
    return TrayGroup;
}());
var TrayItem = /** @class */ (function () {
    function TrayItem(hostRef) {
        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 = createEvent(this, "anjTrayItemActive", 7);
    }
    TrayItem.prototype.onActiveChange = function () {
        if (this.active) {
            this.anjTrayItemActive.emit();
        }
    };
    TrayItem.prototype.render = function () {
        var itemStyle = {
            width: this.width
        };
        return h(Host, { tabindex: "-1", style: itemStyle }, h("button", { class: "anj-tray-item" }, h("slot", null)));
    };
    Object.defineProperty(TrayItem, "watchers", {
        get: function () {
            return {
                "active": ["onActiveChange"]
            };
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TrayItem, "style", {
        get: function () { 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}"; },
        enumerable: true,
        configurable: true
    });
    return TrayItem;
}());
export { Tray as anj_tray, TrayGroup as anj_tray_group, TrayItem as anj_tray_item };
