@seniorsistemas/angular-components 17.1.8 → 17.2.0

package/bundles/seniorsistemas-angular-components.umd.js

@@ -687,7 +687,7 @@
         };
         TooltipDirective.prototype.showTooltip = function () {
             if (this.componentRef !== null) {
-                this.componentRef.instance.visible = true;
+                this.componentRef.instance.visible = this.visible;
                 window.addEventListener('mousemove', this.boundOnWindowMouseMoveFunction);
             }
         };
@@ -4329,119 +4329,6 @@
         return EmptyStateModule;
     }());
 
-
-    (function (ValidateErrors) {
-        ValidateErrors["MAX_FILE_SIZE"] = "MAX_FILE_SIZE";
-        ValidateErrors["MAX_FILE_LIMIT"] = "MAX_FILE_LIMIT";
-        ValidateErrors["UNSUPPORTED_EXTENSION"] = "UNSUPPORTED_EXTENSION";
-    })(exports.ValidateErrors || (exports.ValidateErrors = {}));
-
-    var Breakpoints = {
-        SM_MIN: 0,
-        SM_MAX: 767,
-        MD_MIN: 768,
-        MD_MAX: 991,
-        LG_MIN: 992,
-        LG_MAX: 1199,
-        XL_MIN: 1200,
-        XL_MAX: Infinity,
-    };
-
-    var ExportUtils = /** @class */ (function () {
-        function ExportUtils() {
-            throw new Error("Classe não deve ser instanciada.");
-        }
-        ExportUtils.addClass = function (element, className) {
-            element.nativeElement.className = element.nativeElement.className + " " + className;
-        };
-        ExportUtils.removeClass = function (element, className) {
-            if (element.nativeElement.className.includes(className)) {
-                element.nativeElement.className = element.nativeElement.className.replace(className, "");
-            }
-        };
-        ExportUtils.exportCSV = function (columns, data, csvSeparator, documentName) {
-            var _this = this;
-            if (columns === void 0) { columns = []; }
-            if (data === void 0) { data = []; }
-            if (csvSeparator === void 0) { csvSeparator = ";"; }
-            if (documentName === void 0) { documentName = "download"; }
-            var csv = "\ufeff";
-            columns.filter(function (column) { return column.exportable && column.field; }).forEach(function (column, i) {
-                csv += "\"" + (column.header || column.field) + "\"";
-                if (i < columns.length - 1)
-                    csv += csvSeparator;
-            });
-            data.forEach(function (record) {
-                csv += "\n";
-                columns.filter(function (column) { return column.exportable && column.field; }).forEach(function (column, i) {
-                    var cellData;
-                    if (Array.isArray(column.field)) {
-                        var fieldValues = column.field.map(function (col) { return _this.resolveFieldData(record, col); });
-                        cellData = fieldValues
-                            .flat()
-                            .filter(function (value) { return value !== null && value !== undefined; })
-                            .join(column.separator);
-                    }
-                    else {
-                        cellData = _this.resolveFieldData(record, column.field);
-                    }
-                    if (cellData != null)
-                        cellData = String(cellData).replace(/"/g, "\"\"");
-                    else
-                        cellData = "";
-                    csv += "\"" + cellData + "\"";
-                    if (i < columns.length - 1)
-                        csv += csvSeparator;
-                });
-            });
-            var blob = new Blob([csv], {
-                type: "text/csv;charset=utf-8;",
-            });
-            if (window.navigator.msSaveOrOpenBlob)
-                navigator.msSaveOrOpenBlob(blob, documentName + ".csv");
-            else {
-                var link = document.createElement("a");
-                link.style.display = "none";
-                document.body.appendChild(link);
-                if (link.download !== undefined) {
-                    link.setAttribute("href", URL.createObjectURL(blob));
-                    link.setAttribute("download", documentName + ".csv");
-                    link.click();
-                }
-                else {
-                    csv = "data:text/csv;charset=utf-8," + csv;
-                    window.open(encodeURI(csv));
-                }
-                document.body.removeChild(link);
-            }
-        };
-        ExportUtils.resolveFieldData = function (data, field) {
-            if (data && field) {
-                if (this.isFunction(field))
-                    return field(data);
-                else if (field.indexOf(".") == -1)
-                    return data[field];
-                else {
-                    var fields = field.split(".");
-                    var value = data;
-                    for (var i = 0, len = fields.length; i < len; ++i) {
-                        if (value == null) {
-                            return null;
-                        }
-                        value = value[fields[i]];
-                    }
-                    return value;
-                }
-            }
-            else
-                return null;
-        };
-        ExportUtils.isFunction = function (obj) {
-            return !!(obj && obj.constructor && obj.call && obj.apply);
-        };
-        return ExportUtils;
-    }());
-
     /**
      * Formats a JSON response to a JS object
      * @param response The response to format
@@ -4703,12 +4590,140 @@
         return FileUploadService;
     }());
 
+    var Breakpoints = {
+        SM_MIN: 0,
+        SM_MAX: 767,
+        MD_MIN: 768,
+        MD_MAX: 991,
+        LG_MIN: 992,
+        LG_MAX: 1199,
+        XL_MIN: 1200,
+        XL_MAX: Infinity,
+    };
+
+    var ExportUtils = /** @class */ (function () {
+        function ExportUtils() {
+            throw new Error("Classe não deve ser instanciada.");
+        }
+        ExportUtils.addClass = function (element, className) {
+            element.nativeElement.className = element.nativeElement.className + " " + className;
+        };
+        ExportUtils.removeClass = function (element, className) {
+            if (element.nativeElement.className.includes(className)) {
+                element.nativeElement.className = element.nativeElement.className.replace(className, "");
+            }
+        };
+        ExportUtils.exportCSV = function (columns, data, csvSeparator, documentName) {
+            var _this = this;
+            if (columns === void 0) { columns = []; }
+            if (data === void 0) { data = []; }
+            if (csvSeparator === void 0) { csvSeparator = ";"; }
+            if (documentName === void 0) { documentName = "download"; }
+            var csv = "\ufeff";
+            columns.filter(function (column) { return column.exportable && column.field; }).forEach(function (column, i) {
+                csv += "\"" + (column.header || column.field) + "\"";
+                if (i < columns.length - 1)
+                    csv += csvSeparator;
+            });
+            data.forEach(function (record) {
+                csv += "\n";
+                columns.filter(function (column) { return column.exportable && column.field; }).forEach(function (column, i) {
+                    var cellData;
+                    if (Array.isArray(column.field)) {
+                        var fieldValues = column.field.map(function (col) { return _this.resolveFieldData(record, col); });
+                        cellData = fieldValues
+                            .flat()
+                            .filter(function (value) { return value !== null && value !== undefined; })
+                            .join(column.separator);
+                    }
+                    else {
+                        cellData = _this.resolveFieldData(record, column.field);
+                    }
+                    if (cellData != null)
+                        cellData = String(cellData).replace(/"/g, "\"\"");
+                    else
+                        cellData = "";
+                    csv += "\"" + cellData + "\"";
+                    if (i < columns.length - 1)
+                        csv += csvSeparator;
+                });
+            });
+            var blob = new Blob([csv], {
+                type: "text/csv;charset=utf-8;",
+            });
+            if (window.navigator.msSaveOrOpenBlob)
+                navigator.msSaveOrOpenBlob(blob, documentName + ".csv");
+            else {
+                var link = document.createElement("a");
+                link.style.display = "none";
+                document.body.appendChild(link);
+                if (link.download !== undefined) {
+                    link.setAttribute("href", URL.createObjectURL(blob));
+                    link.setAttribute("download", documentName + ".csv");
+                    link.click();
+                }
+                else {
+                    csv = "data:text/csv;charset=utf-8," + csv;
+                    window.open(encodeURI(csv));
+                }
+                document.body.removeChild(link);
+            }
+        };
+        ExportUtils.resolveFieldData = function (data, field) {
+            if (data && field) {
+                if (this.isFunction(field))
+                    return field(data);
+                else if (field.indexOf(".") == -1)
+                    return data[field];
+                else {
+                    var fields = field.split(".");
+                    var value = data;
+                    for (var i = 0, len = fields.length; i < len; ++i) {
+                        if (value == null) {
+                            return null;
+                        }
+                        value = value[fields[i]];
+                    }
+                    return value;
+                }
+            }
+            else
+                return null;
+        };
+        ExportUtils.isFunction = function (obj) {
+            return !!(obj && obj.constructor && obj.call && obj.apply);
+        };
+        return ExportUtils;
+    }());
+
+
+    (function (ValidateErrors) {
+        ValidateErrors["MAX_FILE_SIZE"] = "MAX_FILE_SIZE";
+        ValidateErrors["MAX_FILE_LIMIT"] = "MAX_FILE_LIMIT";
+        ValidateErrors["UNSUPPORTED_EXTENSION"] = "UNSUPPORTED_EXTENSION";
+    })(exports.ValidateErrors || (exports.ValidateErrors = {}));
+
+    var FileUploadPermissions;
+    (function (FileUploadPermissions) {
+        FileUploadPermissions["Add"] = "add";
+        FileUploadPermissions["Read"] = "read";
+        FileUploadPermissions["Remove"] = "remove";
+    })(FileUploadPermissions || (FileUploadPermissions = {}));
+    var ALL_PERMISSIONS = [
+        FileUploadPermissions.Add,
+        FileUploadPermissions.Read,
+        FileUploadPermissions.Remove,
+    ];
+
     var moment$3 = moment_;
     var FileUploadComponent = /** @class */ (function () {
         function FileUploadComponent(sanitizer, fileUploadService, translate) {
             this.sanitizer = sanitizer;
             this.fileUploadService = fileUploadService;
             this.translate = translate;
+            this.ADD_PERMISSION = FileUploadPermissions.Add;
+            this.READ_PERMISSION = FileUploadPermissions.Read;
+            this.REMOVE_PERMISSION = FileUploadPermissions.Remove;
             this.id = "s-file-upload-" + FileUploadComponent_1.nextId++;
             this.chooseLabel = "Anexar arquivos";
             this.removeLabel = "Remover";
@@ -4718,6 +4733,7 @@
             this.ariaLabelProgress = "Carregando arquivo";
             this.disabled = false;
             this.showFileUploadDate = false;
+            this.permissions = ALL_PERMISSIONS;
             this.uploadHandler = new core.EventEmitter();
             this.removeFile = new core.EventEmitter();
             this.cancelUpload = new core.EventEmitter();
@@ -4944,6 +4960,9 @@
         __decorate([
             core.Input()
         ], FileUploadComponent.prototype, "showFileUploadDate", void 0);
+        __decorate([
+            core.Input()
+        ], FileUploadComponent.prototype, "permissions", void 0);
         __decorate([
             core.Input()
         ], FileUploadComponent.prototype, "files", null);
@@ -4968,7 +4987,7 @@
         FileUploadComponent = FileUploadComponent_1 = __decorate([
             core.Component({
                 selector: "s-file-upload",
-                template: "<div\n    [id]=\"id\"\n    class=\"s-fileupload\">\n    <div class=\"s-fileupload-choose\">\n        <input\n            #inputUpload\n            [id]=\"id+'input-upload'\"\n            type=\"file\"\n            name=\"file\"\n            [accept]=\"accept\"\n            [multiple]=\"multiple\"\n            (change)=\"onFileSelect($event.dataTransfer\n                ? $event.dataTransfer.files\n                : $event.target.files)\">        \n        <s-button\n            [id]=\"id + 'upload-button'\"\n            [label]=\"chooseLabel\"\n            (onClick)=\"inputUpload.click()\"\n            priority=\"primary\"\n            [disabled]=\"disabled || !!formGroup?.disabled\"\n            [auxiliary]=\"false\">\n        </s-button>\n    </div>\n\n    <section\n        *ngIf=\"files.length\"    \n        [id]=\"id + 'fileupload-list'\"\n        class=\"s-fileupload-list\"\n        role=\"grid\">\n        <ng-container *ngFor=\"let file of files; let i = index\">\n            <div\n                class=\"s-fileupload-list-file\"\n                role=\"row\">\n                <div\n                    [id]=\"id + '-file-' + i + '-name'\"\n                    class=\"s-fileupload-list-file-name\"\n                    role=\"gridcell\">\n                    <ng-container *ngTemplateOutlet=\"file.savedFile || file.progress === 100\n                        ? descriptionUrl\n                        : description; context: {\n                            $implicit: file,\n                            index: i\n                        }\">\n                    </ng-container>\n                    <span *ngIf=\"modifiedDate\" class=\"s-fileupload-list-file-name-date\">{{ modifiedDate }}</span>\n                </div>\n                <div\n                    class=\"s-fileupload-list-file-status\"\n                    role=\"gridcell\">\n                    <p-progressBar\n                        *ngIf=\"file.isUploading && !isSmallDevice\"\n                        [style]=\"{ 'width': '250px', 'background-color': '#d8d8d8', 'border-radius': '0px', 'height': '14px'}\"\n                        [value]=\"file.progress\"\n                        [showValue]=\"false\"\n                        role=\"alert\"\n                        [attr.aria-label]=\"ariaLabelProgress\">\n                    </p-progressBar>\n                    <span\n                        *ngIf=\"file.isUploading && isSmallDevice\"    \n                        [id]=\"id + '-file-' + i + '-spin'\"\n                        class=\"fas fa-circle-notch fa-spin\"\n                        [attr.aria-label]=\"ariaLabelProgress\">\n                    </span>\n                    <span\n                        *ngIf=\"!file.isUploading && !file.error && file.progress === 100\"\n                        [id]=\"id + '-file-' + i + '-check'\"\n                        class=\"fas fa-check\"\n                        role=\"alert\"\n                        [attr.aria-label]=\"ariaLabelSuccess || successTooltip\"\n                        [pTooltip]=\"successTooltip\"\n                        tooltipPosition=\"top\"\n                        showDelay=\"500\"\n                        [appendTo]=\"'body'\">\n                    </span>\n                    <span\n                        *ngIf=\"file.error?.message\"    \n                        [id]=\"id + '-file-' + i + '-error'\"\n                        class=\"fas fa-times\"\n                        role=\"alert\"\n                        [pTooltip]=\"file.error?.message\"\n                        tooltipPosition=\"top\"\n                        showDelay=\"500\"\n                        [appendTo]=\"'body'\">\n                    </span>\n                </div>\n                <div\n                    class=\"s-fileupload-list-file-actions\"\n                    role=\"gridcell\">\n                    <a\n                        *ngIf=\"file.isUploading\"\n                        [id]=\"id + '-file-' + i + '-cancel'\"\n                        class=\"s-fileupload-list-file-actions-action\"\n                        (click)=\"onCancelUpload(i)\">\n                        {{cancelLabel}}\n                    </a>\n                    <a\n                        *ngIf=\"!file.isUploading && !(disabled || !!formGroup?.disabled)\"\n                        role=\"button\"\n                        tabindex=\"0\"\n                        [id]=\"id + '-file-' + i + '-remove'\"\n                        class=\"s-fileupload-list-file-actions-action\"\n                        (click)=\"onRemoveFile(file)\"\n                        [attr.aria-label]=\"ariaLabelRemove || removeLabel\">\n                        {{removeLabel}}\n                    </a>\n                </div>\n            </div>\n        </ng-container>\n    </section>\n</div>\n\n<ng-template\n    #descriptionUrl\n    let-file\n    let-i = index>\n    <a\n        [id]=\"id + '-file-' + i + '-name-link'\"\n        tabindex=\"0\"\n        (click)=\"onDowloadFile(i)\"\n        [attr.aria-label]=\"ariaLabelFileName || file.name\">{{file.name}}\n    </a>\n    <a\n        style=\"display: none;\"\n        [href]=\"file.objectURL\"\n        target=\"_blank\"\n        download\n        #anchor>\n    </a>\n</ng-template>\n\n<ng-template\n    #description\n    let-file>\n    <span\n        tabindex=\"0\"\n        [attr.aria-label]=\"ariaLabelFileName || file.name\">\n        {{file.name}}\n    </span>\n</ng-template>\n",
+                template: "<div\n    [id]=\"id\"\n    class=\"s-fileupload\">\n    <div class=\"s-fileupload-choose\">\n        <input\n            #inputUpload\n            [id]=\"id+'input-upload'\"\n            type=\"file\"\n            name=\"file\"\n            [accept]=\"accept\"\n            [multiple]=\"multiple\"\n            (change)=\"onFileSelect($event.dataTransfer\n                ? $event.dataTransfer.files\n                : $event.target.files)\">        \n        <s-button\n            *ngIf=\"permissions.includes(ADD_PERMISSION)\"\n            [id]=\"id + 'upload-button'\"\n            [label]=\"chooseLabel\"\n            (onClick)=\"inputUpload.click()\"\n            priority=\"primary\"\n            [disabled]=\"disabled || !!formGroup?.disabled\"\n            [auxiliary]=\"false\">\n        </s-button>\n    </div>\n\n    <section\n        *ngIf=\"files.length\"    \n        [id]=\"id + 'fileupload-list'\"\n        class=\"s-fileupload-list\"\n        role=\"grid\">\n        <ng-container *ngFor=\"let file of files; let i = index\">\n            <div\n                class=\"s-fileupload-list-file\"\n                role=\"row\">\n                <div\n                    [id]=\"id + '-file-' + i + '-name'\"\n                    class=\"s-fileupload-list-file-name\"\n                    role=\"gridcell\">\n                    <ng-container *ngTemplateOutlet=\"permissions.includes(READ_PERMISSION) && file.savedFile || file.progress === 100\n                        ? descriptionUrl\n                        : description; context: {\n                            $implicit: file,\n                            index: i\n                        }\">\n                    </ng-container>\n                    <span *ngIf=\"modifiedDate\" class=\"s-fileupload-list-file-name-date\">{{ modifiedDate }}</span>\n                </div>\n                <div\n                    class=\"s-fileupload-list-file-status\"\n                    role=\"gridcell\">\n                    <p-progressBar\n                        *ngIf=\"file.isUploading && !isSmallDevice\"\n                        [style]=\"{ 'width': '250px', 'background-color': '#d8d8d8', 'border-radius': '0px', 'height': '14px'}\"\n                        [value]=\"file.progress\"\n                        [showValue]=\"false\"\n                        role=\"alert\"\n                        [attr.aria-label]=\"ariaLabelProgress\">\n                    </p-progressBar>\n                    <span\n                        *ngIf=\"file.isUploading && isSmallDevice\"    \n                        [id]=\"id + '-file-' + i + '-spin'\"\n                        class=\"fas fa-circle-notch fa-spin\"\n                        [attr.aria-label]=\"ariaLabelProgress\">\n                    </span>\n                    <span\n                        *ngIf=\"!file.isUploading && !file.error && file.progress === 100\"\n                        [id]=\"id + '-file-' + i + '-check'\"\n                        class=\"fas fa-check\"\n                        role=\"alert\"\n                        [attr.aria-label]=\"ariaLabelSuccess || successTooltip\"\n                        [pTooltip]=\"successTooltip\"\n                        tooltipPosition=\"top\"\n                        showDelay=\"500\"\n                        [appendTo]=\"'body'\">\n                    </span>\n                    <span\n                        *ngIf=\"file.error?.message\"    \n                        [id]=\"id + '-file-' + i + '-error'\"\n                        class=\"fas fa-times\"\n                        role=\"alert\"\n                        [pTooltip]=\"file.error?.message\"\n                        tooltipPosition=\"top\"\n                        showDelay=\"500\"\n                        [appendTo]=\"'body'\">\n                    </span>\n                </div>\n                <div\n                    class=\"s-fileupload-list-file-actions\"\n                    role=\"gridcell\">\n                    <a\n                        *ngIf=\"file.isUploading\"\n                        [id]=\"id + '-file-' + i + '-cancel'\"\n                        class=\"s-fileupload-list-file-actions-action\"\n                        (click)=\"onCancelUpload(i)\">\n                        {{cancelLabel}}\n                    </a>\n                    <a\n                        *ngIf=\"permissions.includes(REMOVE_PERMISSION) && !file.isUploading && !(disabled || !!formGroup?.disabled)\"\n                        role=\"button\"\n                        tabindex=\"0\"\n                        [id]=\"id + '-file-' + i + '-remove'\"\n                        class=\"s-fileupload-list-file-actions-action\"\n                        (click)=\"onRemoveFile(file)\"\n                        [attr.aria-label]=\"ariaLabelRemove || removeLabel\">\n                        {{removeLabel}}\n                    </a>\n                </div>\n            </div>\n        </ng-container>\n    </section>\n</div>\n\n<ng-template\n    #descriptionUrl\n    let-file\n    let-i = index>\n    <a\n        [id]=\"id + '-file-' + i + '-name-link'\"\n        tabindex=\"0\"\n        (click)=\"onDowloadFile(i)\"\n        [attr.aria-label]=\"ariaLabelFileName || file.name\">{{file.name}}\n    </a>\n    <a\n        style=\"display: none;\"\n        [href]=\"file.objectURL\"\n        target=\"_blank\"\n        download\n        #anchor>\n    </a>\n</ng-template>\n\n<ng-template\n    #description\n    let-file>\n    <span\n        tabindex=\"0\"\n        [attr.aria-label]=\"ariaLabelFileName || file.name\">\n        {{file.name}}\n    </span>\n</ng-template>\n",
                 styles: [".s-fileupload .s-fileupload-choose{position:relative;margin:15px 0;width:-webkit-max-content;width:max-content}.s-fileupload input[type=file]{display:none}.s-fileupload-list{border:1px solid #ccc}.s-fileupload-list-file:not(:first-child){border-top:1px solid #ccc}.s-fileupload-list .s-fileupload-list-file{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between;padding:15px}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-name{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-item-align:center;align-self:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-name .s-fileupload-list-file-name-date{font-size:.75rem;color:#999}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-name>a{cursor:pointer;text-decoration:none}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-status{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.s-fileupload-list .s-fileupload-list-file .fas.fa-circle-notch{color:#d8d8d8;font-size:12px}.s-fileupload-list .s-fileupload-list-file .fas.fa-check{color:#0c9348;font-size:12px}.s-fileupload-list .s-fileupload-list-file .fas.fa-times{color:#c13018;font-size:12px}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions{margin-top:15px;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;width:100%}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action{text-decoration:none;color:#428bca}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action :focus,.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action :visited,.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions a.s-fileupload-list-file-actions-action:hover{text-decoration:none}@media (min-width:768px){.s-fileupload-list .s-fileupload-list-file{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-name{width:auto;-ms-flex-positive:2;flex-grow:2}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-status{margin:0 15px}.s-fileupload-list .s-fileupload-list-file .s-fileupload-list-file-actions{margin:0;width:auto}}"]
             })
         ], FileUploadComponent);
@@ -14310,6 +14329,739 @@
         return CodeEditorModule;
     }());
 
+    var TieredMenuEventService = /** @class */ (function () {
+        function TieredMenuEventService() {
+            this.incrementCurrentItemEvent = new core.EventEmitter();
+            this.decrementCurrentItemEvent = new core.EventEmitter();
+            this.closeAllMenusEvent = new core.EventEmitter();
+            this.selectItemEvent = new core.EventEmitter();
+            this.openItemMenuEvent = new core.EventEmitter();
+            this.closeItemMenuEvent = new core.EventEmitter();
+            this.createMenuEvent = new core.EventEmitter();
+        }
+        TieredMenuEventService.prototype.emitIncrementCurrentItemEvent = function () {
+            this.incrementCurrentItemEvent.emit();
+        };
+        TieredMenuEventService.prototype.emitDecrementCurrentItemEvent = function () {
+            this.decrementCurrentItemEvent.emit();
+        };
+        TieredMenuEventService.prototype.emitCloseAllMenusEvent = function () {
+            this.closeAllMenusEvent.emit();
+        };
+        TieredMenuEventService.prototype.emitSelectItemEvent = function (item) {
+            this.selectItemEvent.emit(item);
+        };
+        TieredMenuEventService.prototype.emitOpenItemMenuEvent = function (item) {
+            this.openItemMenuEvent.emit(item);
+        };
+        TieredMenuEventService.prototype.emitCloseItemMenuEvent = function (item) {
+            this.closeItemMenuEvent.emit(item);
+        };
+        TieredMenuEventService.prototype.emitCreateMenuEvent = function (item) {
+            this.createMenuEvent.emit(item);
+        };
+        TieredMenuEventService = __decorate([
+            core.Injectable()
+        ], TieredMenuEventService);
+        return TieredMenuEventService;
+    }());
+
+    var TieredMenuService = /** @class */ (function () {
+        function TieredMenuService() {
+        }
+        TieredMenuService.prototype.normalizeData = function (items, parent) {
+            var _this = this;
+            return items.map(function (i) {
+                if (i.submenu) {
+                    i.submenu = _this.normalizeData(i.submenu, i);
+                }
+                i.id = "id-" + Math.random().toString(36).substring(2, 9) + "-" + Date.now().toString(36);
+                i.parent = parent;
+                i.isOpen = false;
+                return i;
+            });
+        };
+        TieredMenuService.prototype.markAllItemsAsClosed = function (items) {
+            var _this = this;
+            return items.map(function (item) {
+                if (item.submenu) {
+                    item.submenu = _this.markAllItemsAsClosed(item.submenu);
+                }
+                item.isOpen = false;
+                return item;
+            });
+        };
+        TieredMenuService.prototype.searchTheHierarchy = function (item1, item2) {
+            var itemAux = item2;
+            while (itemAux) {
+                if (itemAux === item1) {
+                    return true;
+                }
+                itemAux = itemAux.parent;
+            }
+            return false;
+        };
+        TieredMenuService = __decorate([
+            core.Injectable()
+        ], TieredMenuService);
+        return TieredMenuService;
+    }());
+
+    var TieredMenuNestedComponent = /** @class */ (function () {
+        function TieredMenuNestedComponent(tieredMenuService, _tieredMenuEventService) {
+            this.tieredMenuService = tieredMenuService;
+            this._tieredMenuEventService = _tieredMenuEventService;
+            this.top = 0;
+            this.maxHeight = 0;
+            this._unsubscribe$ = new rxjs.Subject();
+        }
+        TieredMenuNestedComponent.prototype.ngOnInit = function () {
+            this.tieredMenuService.currentItems = this.items;
+            this._subscribeEvents();
+        };
+        TieredMenuNestedComponent.prototype.ngOnDestroy = function () {
+            this._unsubscribe$.next();
+            this._unsubscribe$.complete();
+        };
+        TieredMenuNestedComponent.prototype._incrementCurItem = function () {
+            if (!this.tieredMenuService.currentItem) {
+                this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
+                return;
+            }
+            var curIndex = this.tieredMenuService.currentItems.indexOf(this.tieredMenuService.currentItem) + 1;
+            if (curIndex < this.tieredMenuService.currentItems.length) {
+                this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[curIndex];
+            }
+            else {
+                this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
+            }
+            if (this.tieredMenuService.currentItem.divider) {
+                this._incrementCurItem();
+            }
+        };
+        TieredMenuNestedComponent.prototype._decrementCurItem = function () {
+            if (!this.tieredMenuService.currentItem) {
+                this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
+                return;
+            }
+            var curIndex = this.tieredMenuService.currentItems.indexOf(this.tieredMenuService.currentItem) - 1;
+            if (curIndex >= 0) {
+                this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[curIndex];
+            }
+            else {
+                this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[this.tieredMenuService.currentItems.length - 1];
+            }
+            if (this.tieredMenuService.currentItem.divider) {
+                this._decrementCurItem();
+            }
+        };
+        TieredMenuNestedComponent.prototype._closeItem = function (item) {
+            var _a;
+            var itemAux = this._lastOpenItem;
+            while (itemAux && itemAux != item) {
+                itemAux.isOpen = false;
+                itemAux = itemAux.parent;
+            }
+            item.isOpen = false;
+            this.tieredMenuService.currentItem = itemAux !== null && itemAux !== void 0 ? itemAux : this.tieredMenuService.items[0];
+            this.tieredMenuService.currentItems = ((_a = itemAux === null || itemAux === void 0 ? void 0 : itemAux.parent) === null || _a === void 0 ? void 0 : _a.submenu) || this.tieredMenuService.items;
+        };
+        TieredMenuNestedComponent.prototype._openItem = function (item) {
+            if (item === null || item === void 0 ? void 0 : item.submenu) {
+                item.isOpen = true;
+                this.tieredMenuService.currentItems = item.submenu;
+                // Only has focus if there has already been interaction.
+                if (this.tieredMenuService.currentItem) {
+                    this.tieredMenuService.currentItem = item.submenu[0];
+                }
+                this._lastOpenItem = item;
+            }
+        };
+        TieredMenuNestedComponent.prototype._subscribeEvents = function () {
+            var _this = this;
+            this._tieredMenuEventService.incrementCurrentItemEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function () {
+                _this._incrementCurItem();
+            });
+            this._tieredMenuEventService.decrementCurrentItemEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function () {
+                _this._decrementCurItem();
+            });
+            this._tieredMenuEventService.selectItemEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function (item) {
+                if (item.command) {
+                    item.command();
+                    // Close all menus after the item was selected.
+                    _this._tieredMenuEventService.emitCloseAllMenusEvent();
+                }
+            });
+            this._tieredMenuEventService.openItemMenuEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function (item) {
+                var _a, _b;
+                if (!_this.tieredMenuService.currentItems.includes(item)) {
+                    var itemAux = _this._lastOpenItem;
+                    while ((_a = itemAux === null || itemAux === void 0 ? void 0 : itemAux.parent) === null || _a === void 0 ? void 0 : _a.parent) {
+                        itemAux = itemAux.parent;
+                    }
+                    _this._tieredMenuEventService.emitCloseItemMenuEvent((_b = itemAux.parent) !== null && _b !== void 0 ? _b : itemAux);
+                }
+                _this._lastOpenItem = item;
+                _this._openItem(item);
+            });
+            this._tieredMenuEventService.closeItemMenuEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function (item) {
+                if (item) {
+                    _this._closeItem(item);
+                }
+            });
+        };
+        TieredMenuNestedComponent.ctorParameters = function () { return [
+            { type: TieredMenuService },
+            { type: TieredMenuEventService }
+        ]; };
+        TieredMenuNestedComponent = __decorate([
+            core.Component({
+                template: "<div\n    class=\"menu menu--nested\"\n    [ngStyle]=\"{\n        'top': top + 'px',\n        'max-height': maxHeight + 'px'\n    }\">\n    <ng-container *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: items }\"></ng-container>\n</div>\n\n<ng-template #itemsTemplate let-items>\n    <div *ngFor=\"let item of items\">\n        <s-tiered-menu-item\n            *ngIf=\"!item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            [closeOnClick]=\"true\">\n        </s-tiered-menu-item>\n\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n\n        <div *ngIf=\"item.submenu && item.isOpen\">\n            <div class=\"submenu\">\n                <ng-container *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: item.submenu }\"></ng-container>\n            </div>\n        </div>\n    </div>\n</ng-template>\n",
+                styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;min-width:176px;padding:4px 0;position:fixed;z-index:9999;overflow:auto}.menu--nested{width:90vw;margin:0 5vw}.menu .submenu{margin-left:24px}"]
+            })
+        ], TieredMenuNestedComponent);
+        return TieredMenuNestedComponent;
+    }());
+
+    var TieredMenuComponent = /** @class */ (function () {
+        function TieredMenuComponent(_appRef, _componentFactoryResolver, _injector, tieredMenuService, _tieredMenuEventService) {
+            this._appRef = _appRef;
+            this._componentFactoryResolver = _componentFactoryResolver;
+            this._injector = _injector;
+            this.tieredMenuService = tieredMenuService;
+            this._tieredMenuEventService = _tieredMenuEventService;
+            this.top = 0;
+            this.left = 0;
+            this.menuTriggerEvent = "hover";
+            this._componentRef = null;
+            this._unsubscribe$ = new rxjs.Subject();
+            this.destroyRequest = new core.EventEmitter();
+        }
+        TieredMenuComponent_1 = TieredMenuComponent;
+        TieredMenuComponent.prototype.ngOnInit = function () {
+            this.tieredMenuService.currentItems = this.items;
+            this._subscribeEvents();
+        };
+        TieredMenuComponent.prototype.ngOnDestroy = function () {
+            this._unsubscribe$.next();
+            this._unsubscribe$.complete();
+        };
+        TieredMenuComponent.prototype._incrementCurItem = function () {
+            if (!this.tieredMenuService.currentItem) {
+                this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
+                return;
+            }
+            else if (!this.items.includes(this.tieredMenuService.currentItem)) {
+                // Checking if it is the current menu.
+                return;
+            }
+            var currentIndex = this.tieredMenuService.currentItems.indexOf(this.tieredMenuService.currentItem) + 1;
+            if (currentIndex < this.tieredMenuService.currentItems.length) {
+                this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[currentIndex];
+            }
+            else {
+                this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
+            }
+            if (this.tieredMenuService.currentItem.divider) {
+                this._incrementCurItem();
+            }
+        };
+        TieredMenuComponent.prototype._decrementCurItem = function () {
+            if (!this.tieredMenuService.currentItem) {
+                this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
+                return;
+                // Checking if it is the current menu.
+            }
+            else if (!this.items.includes(this.tieredMenuService.currentItem)) {
+                return;
+            }
+            var curIndex = this.tieredMenuService.currentItems.indexOf(this.tieredMenuService.currentItem) - 1;
+            if (curIndex >= 0) {
+                this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[curIndex];
+            }
+            else {
+                this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[this.tieredMenuService.currentItems.length - 1];
+            }
+            if (this.tieredMenuService.currentItem.divider) {
+                this._decrementCurItem();
+            }
+        };
+        TieredMenuComponent.prototype._createMenu = function (items, position) {
+            var _this = this;
+            if (!this._componentRef && items) {
+                var componentFactory = this._componentFactoryResolver.resolveComponentFactory(TieredMenuComponent_1);
+                this._componentRef = componentFactory.create(this._injector);
+                this._appRef.attachView(this._componentRef.hostView);
+                var domElem = this._componentRef.hostView.rootNodes[0];
+                document.body.appendChild(domElem);
+                // Setting the menu items.
+                this._componentRef.instance.items = items;
+                // Subscribe menu events.
+                this._componentRef.instance.destroyRequest
+                    .pipe(operators.takeUntil(this._unsubscribe$))
+                    .subscribe(function (propagate) {
+                    _this._destroy(propagate);
+                });
+                this._menuDivElement = domElem.querySelector(".menu");
+                this._setMenuPosition(position);
+            }
+        };
+        TieredMenuComponent.prototype._destroy = function (propagate) {
+            if (propagate === void 0) { propagate = true; }
+            if (this._componentRef !== null) {
+                this._appRef.detachView(this._componentRef.hostView);
+                this._componentRef.destroy();
+                this._componentRef = null;
+                this._menuDivElement = null;
+            }
+            if (propagate) {
+                this.destroyRequest.emit();
+            }
+        };
+        TieredMenuComponent.prototype._setMenuPosition = function (position) {
+            var _a;
+            if (this._componentRef !== null) {
+                var top_1 = position.top, right = position.right, bottom = position.bottom, left = position.left;
+                // I need to calculate the height of the component because the internal elements have not been created yet.
+                var menuHeight = ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) * 40;
+                var menuWidth = this._menuDivElement.getBoundingClientRect().width;
+                var rightFreeSpace = document.body.clientWidth - right;
+                var bottomFreeSpace = document.body.clientHeight - bottom;
+                if (rightFreeSpace > menuWidth) {
+                    this._componentRef.instance.left = right;
+                }
+                else {
+                    this._componentRef.instance.left = left - menuWidth;
+                }
+                if (bottomFreeSpace <= menuHeight) {
+                    this._componentRef.instance.top = top_1 - menuHeight;
+                }
+                else {
+                    this._componentRef.instance.top = top_1;
+                }
+            }
+        };
+        TieredMenuComponent.prototype._subscribeEvents = function () {
+            var _this = this;
+            // Increment current item event.
+            this._tieredMenuEventService.incrementCurrentItemEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function () {
+                _this._incrementCurItem();
+            });
+            // Decrement current item event.
+            this._tieredMenuEventService.decrementCurrentItemEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function () {
+                _this._decrementCurItem();
+            });
+            // Select item event.
+            this._tieredMenuEventService.selectItemEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function (item) {
+                if (item.submenu) {
+                    _this._tieredMenuEventService.emitOpenItemMenuEvent(item);
+                }
+                else if (item.command) {
+                    _this._tieredMenuEventService.emitCloseAllMenusEvent();
+                    item.command();
+                }
+            });
+            // Close all menus event.
+            this._tieredMenuEventService.closeAllMenusEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function () {
+                _this._destroy();
+                _this.tieredMenuService.currentItem = null;
+                _this.tieredMenuService.currentItems = _this.tieredMenuService.items;
+            });
+            // Open item menu event.
+            this._tieredMenuEventService.openItemMenuEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function (item) {
+                item.isOpen = false;
+                if (_this.tieredMenuService.currentItem) {
+                    if (_this.tieredMenuService.currentItem.parent === item) {
+                        return;
+                    }
+                    if (!_this.tieredMenuService.searchTheHierarchy(_this.tieredMenuService.currentItem.parent, item)) {
+                        var itemAux = _this.tieredMenuService.currentItem;
+                        while (itemAux.parent !== item.parent) {
+                            _this._tieredMenuEventService.emitCloseItemMenuEvent(itemAux);
+                            itemAux = itemAux.parent;
+                        }
+                    }
+                }
+                if (item.submenu) {
+                    if (!item.isOpen) {
+                        var _a = document
+                            .querySelector("#" + item.id)
+                            .getBoundingClientRect(), top_2 = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
+                        var position = { top: top_2, right: right, left: left, bottom: bottom };
+                        if (_this.items.includes(item)) {
+                            _this._createMenu(item.submenu, position);
+                            _this.tieredMenuService.currentItems = item.submenu;
+                            _this.tieredMenuService.currentItem = item.submenu[0];
+                        }
+                    }
+                }
+            });
+            // Close item menu event.
+            this._tieredMenuEventService.closeItemMenuEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function (item) {
+                var _a, _b;
+                if (_this.items.includes(item)) {
+                    item.isOpen = false;
+                    _this.tieredMenuService.currentItems = ((_b = (_a = item === null || item === void 0 ? void 0 : item.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.submenu) || _this.tieredMenuService.items;
+                    _this.tieredMenuService.currentItem = item.parent;
+                    _this.destroyRequest.emit(false);
+                }
+            });
+        };
+        var TieredMenuComponent_1;
+        TieredMenuComponent.ctorParameters = function () { return [
+            { type: core.ApplicationRef },
+            { type: core.ComponentFactoryResolver },
+            { type: core.Injector },
+            { type: TieredMenuService },
+            { type: TieredMenuEventService }
+        ]; };
+        __decorate([
+            core.Output()
+        ], TieredMenuComponent.prototype, "destroyRequest", void 0);
+        TieredMenuComponent = TieredMenuComponent_1 = __decorate([
+            core.Component({
+                selector: "s-tiered-menu",
+                template: "<div class=\"menu\" [ngStyle]=\"{\n        'left': left + 'px',\n        'top': top + 'px'\n    }\">\n\n    <div *ngFor=\"let item of items\">\n        <s-tiered-menu-item\n            *ngIf=\"!item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            triggerEvent=\"hover\"\n            [closeOnClick]=\"false\">\n        </s-tiered-menu-item>\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n    </div>\n</div>",
+                styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;min-width:176px;padding:4px 0;position:fixed;z-index:9999}"]
+            })
+        ], TieredMenuComponent);
+        return TieredMenuComponent;
+    }());
+
+    var TieredMenuDirective = /** @class */ (function () {
+        function TieredMenuDirective(_elementRef, _appRef, _componentFactoryResolver, _injector, _tieredMenuEventService, _tieredMenuService) {
+            this._elementRef = _elementRef;
+            this._appRef = _appRef;
+            this._componentFactoryResolver = _componentFactoryResolver;
+            this._injector = _injector;
+            this._tieredMenuEventService = _tieredMenuEventService;
+            this._tieredMenuService = _tieredMenuService;
+            this._componentRef = null;
+            this._isNested = false;
+            this._isOpen = false;
+            this._unsubscribe$ = new rxjs.Subject();
+            this.alwaysOpen = false;
+            this.triggerEvent = "click";
+        }
+        TieredMenuDirective.prototype.ngOnInit = function () {
+            this._tieredMenuService.items = this._tieredMenuService.normalizeData(this.items);
+            this._tieredMenuService.currentItems = this._tieredMenuService.items;
+            this._tieredMenuService.currentItem = this._tieredMenuService.items[0];
+            this._subscribeEvents();
+        };
+        TieredMenuDirective.prototype.ngAfterViewInit = function () {
+            var _this = this;
+            // setTimeout to create the menu after creating the elements.
+            if (this.alwaysOpen) {
+                setTimeout(function () {
+                    _this._createMenu();
+                }, 0);
+            }
+        };
+        TieredMenuDirective.prototype.ngOnDestroy = function () {
+            this._unsubscribe$.next();
+            this._unsubscribe$.complete();
+            this._destroy();
+        };
+        TieredMenuDirective.prototype.onResize = function () {
+            if (!this.alwaysOpen) {
+                this._tieredMenuEventService.emitCloseAllMenusEvent();
+            }
+        };
+        TieredMenuDirective.prototype.onKeydownHandler = function (event) {
+            if (!this._isOpen)
+                return;
+            switch (event.key) {
+                case "Escape":
+                    this._tieredMenuEventService.emitCloseAllMenusEvent();
+                    break;
+                case " ":
+                case "Enter":
+                    this._tieredMenuEventService.emitSelectItemEvent(this._tieredMenuService.currentItem);
+                    break;
+                case "ArrowLeft":
+                    // When nested I need a reference to the current item's parent item, otherwise just the current item.
+                    this._tieredMenuEventService.emitCloseItemMenuEvent(this._isNested ? this._tieredMenuService.currentItem.parent : this._tieredMenuService.currentItem);
+                    break;
+                case "ArrowRight":
+                    this._tieredMenuEventService.emitOpenItemMenuEvent(this._tieredMenuService.currentItem);
+                    break;
+                case "ArrowUp":
+                    this._tieredMenuEventService.emitDecrementCurrentItemEvent();
+                    break;
+                case "ArrowDown":
+                    this._tieredMenuEventService.emitIncrementCurrentItemEvent();
+                    break;
+            }
+        };
+        TieredMenuDirective.prototype.onClick = function (event) {
+            if (this.triggerEvent === "click" && this.items && this.items && !this._isOpen) {
+                this._lastActiveElement = document.activeElement;
+                this._createMenu();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        TieredMenuDirective.prototype.onDocumentClick = function (event) {
+            // Closing menu when clicked outside.
+            var target = event.target;
+            var clickedInside = target.closest("s-tiered-menu-item") || target.closest("s-tiered-menu-divider");
+            if (!clickedInside) {
+                this._tieredMenuEventService.emitCloseAllMenusEvent();
+            }
+        };
+        TieredMenuDirective.prototype._createMenu = function () {
+            var _a;
+            if (!this._componentRef && this.items) {
+                (_a = this._lastActiveElement) === null || _a === void 0 ? void 0 : _a.blur();
+                this._isOpen = true;
+                this._isNested = document.body.clientWidth < 600;
+                this._isNested ? this._createNestedMenu() : this._createTieredMenu();
+            }
+        };
+        TieredMenuDirective.prototype._createTieredMenu = function () {
+            var _this = this;
+            if (!this._componentRef && this.items) {
+                var componentFactory = this._componentFactoryResolver.resolveComponentFactory(TieredMenuComponent);
+                this._componentRef = componentFactory.create(this._injector);
+                this._appRef.attachView(this._componentRef.hostView);
+                var domElem = this._componentRef.hostView.rootNodes[0];
+                document.body.appendChild(domElem);
+                this._setMenuComponentProperties();
+                this._componentRef.instance.destroyRequest
+                    .pipe(operators.takeUntil(this._unsubscribe$))
+                    .subscribe(function () {
+                    _this._destroy();
+                });
+                this._menuDivElement = domElem.querySelector(".menu");
+                this._setMenuPosition();
+            }
+        };
+        TieredMenuDirective.prototype._createNestedMenu = function () {
+            if (!this._componentRef && this.items) {
+                var componentFactory = this._componentFactoryResolver.resolveComponentFactory(TieredMenuNestedComponent);
+                this._componentRef = componentFactory.create(this._injector);
+                this._appRef.attachView(this._componentRef.hostView);
+                var domElem = this._componentRef.hostView.rootNodes[0];
+                document.body.appendChild(domElem);
+                this._setMenuComponentProperties();
+                this._menuDivElement = domElem.querySelector(".menu");
+                this._setMenuPosition();
+            }
+        };
+        TieredMenuDirective.prototype._destroy = function () {
+            var _a;
+            if (this._componentRef !== null && !this.alwaysOpen) {
+                this._isOpen = false;
+                window.clearTimeout(this._showTimeout);
+                this._appRef.detachView(this._componentRef.hostView);
+                this._componentRef.destroy();
+                this._componentRef = null;
+                this._menuDivElement = null;
+                (_a = this._lastActiveElement) === null || _a === void 0 ? void 0 : _a.focus();
+                this._tieredMenuService.currentItems = this._tieredMenuService.items;
+                this._tieredMenuService.currentItem = this._tieredMenuService.items[0];
+            }
+        };
+        TieredMenuDirective.prototype._setMenuPosition = function () {
+            if (this._componentRef !== null) {
+                var _a = this._elementRef.nativeElement.getBoundingClientRect(), right = _a.right, bottom = _a.bottom, left = _a.left;
+                var menuWidth = this._menuDivElement.getBoundingClientRect().width;
+                var rightFreeSpace = document.body.clientWidth - right;
+                var topPosition = bottom + 2;
+                this._componentRef.instance.top = topPosition;
+                if (!this._isNested) {
+                    if (rightFreeSpace > menuWidth) {
+                        this._componentRef.instance.left = left;
+                    }
+                    else {
+                        this._componentRef.instance.left = left - menuWidth;
+                    }
+                }
+                else {
+                    // setting the maximum menu size to ensure its content is always visible. 10px margin.
+                    this._componentRef.instance.maxHeight = window.innerHeight - topPosition - 10;
+                }
+            }
+        };
+        TieredMenuDirective.prototype._setMenuComponentProperties = function () {
+            if (this._componentRef != null) {
+                this._componentRef.instance.items = this.items;
+            }
+        };
+        TieredMenuDirective.prototype._subscribeEvents = function () {
+            var _this = this;
+            this._tieredMenuEventService.closeAllMenusEvent
+                .pipe(operators.takeUntil(this._unsubscribe$))
+                .subscribe(function () {
+                _this.items = _this._tieredMenuService.markAllItemsAsClosed(_this.items);
+                _this._destroy();
+            });
+        };
+        TieredMenuDirective.ctorParameters = function () { return [
+            { type: core.ElementRef },
+            { type: core.ApplicationRef },
+            { type: core.ComponentFactoryResolver },
+            { type: core.Injector },
+            { type: TieredMenuEventService },
+            { type: TieredMenuService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], TieredMenuDirective.prototype, "items", void 0);
+        __decorate([
+            core.Input()
+        ], TieredMenuDirective.prototype, "alwaysOpen", void 0);
+        __decorate([
+            core.Input()
+        ], TieredMenuDirective.prototype, "triggerEvent", void 0);
+        __decorate([
+            core.HostListener("window:resize")
+        ], TieredMenuDirective.prototype, "onResize", null);
+        __decorate([
+            core.HostListener("document:keydown", ["$event"])
+        ], TieredMenuDirective.prototype, "onKeydownHandler", null);
+        __decorate([
+            core.HostListener("click", ["$event"])
+        ], TieredMenuDirective.prototype, "onClick", null);
+        __decorate([
+            core.HostListener("document:click", ["$event"])
+        ], TieredMenuDirective.prototype, "onDocumentClick", null);
+        TieredMenuDirective = __decorate([
+            core.Directive({
+                selector: "[sTieredMenu]",
+            })
+        ], TieredMenuDirective);
+        return TieredMenuDirective;
+    }());
+
+    var TieredMenuItemComponent = /** @class */ (function () {
+        function TieredMenuItemComponent(_tieredMenuEventService) {
+            this._tieredMenuEventService = _tieredMenuEventService;
+            this.focused = false;
+            this.triggerEvent = "click";
+            this.closeOnClick = false;
+        }
+        TieredMenuItemComponent.prototype.onClick = function () {
+            if (this.item.submenu) {
+                if (!this.item.isOpen) {
+                    this._tieredMenuEventService.emitOpenItemMenuEvent(this.item);
+                }
+                else if (this.closeOnClick) {
+                    this._tieredMenuEventService.emitCloseItemMenuEvent(this.item);
+                }
+            }
+            else {
+                this._tieredMenuEventService.emitSelectItemEvent(this.item);
+            }
+        };
+        TieredMenuItemComponent.prototype.onMouseEnter = function () {
+            var _this = this;
+            if (this.triggerEvent === "hover" && !this.item.isOpen) {
+                this._showTimeout = window.setTimeout(function () {
+                    _this._tieredMenuEventService.emitOpenItemMenuEvent(_this.item);
+                }, 300);
+            }
+        };
+        TieredMenuItemComponent.prototype.onMouseLeave = function () {
+            window.clearTimeout(this._showTimeout);
+        };
+        TieredMenuItemComponent.ctorParameters = function () { return [
+            { type: TieredMenuEventService }
+        ]; };
+        __decorate([
+            core.Input()
+        ], TieredMenuItemComponent.prototype, "item", void 0);
+        __decorate([
+            core.Input()
+        ], TieredMenuItemComponent.prototype, "focused", void 0);
+        __decorate([
+            core.Input()
+        ], TieredMenuItemComponent.prototype, "triggerEvent", void 0);
+        __decorate([
+            core.Input()
+        ], TieredMenuItemComponent.prototype, "closeOnClick", void 0);
+        __decorate([
+            core.HostListener("click"),
+            core.HostListener("touchend")
+        ], TieredMenuItemComponent.prototype, "onClick", null);
+        __decorate([
+            core.HostListener("mouseenter")
+        ], TieredMenuItemComponent.prototype, "onMouseEnter", null);
+        __decorate([
+            core.HostListener("mouseleave")
+        ], TieredMenuItemComponent.prototype, "onMouseLeave", null);
+        TieredMenuItemComponent = __decorate([
+            core.Component({
+                selector: "s-tiered-menu-item",
+                template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused\n    }\">\n    <div class=\"tiered-menu-item-content\">\n        <span class=\"icon\" [ngClass]=\"item.iconClass\"></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    <span\n        *ngIf=\"item.submenu\"\n        class=\"submenu-icon\"\n        [ngClass]=\"{\n            'fas': true,\n            'fa-chevron-left': item.isOpen,\n            'fa-chevron-right': !item.isOpen\n        }\">\n    </span>\n</div>",
+                styles: [".tiered-menu-item{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:8px 16px;-webkit-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.tiered-menu-item .tiered-menu-item-content .label{margin:0 12px}.tiered-menu-item:hover{background-color:#e9e6e6}.tiered-menu-item--focused{background-color:#ccc!important}.tiered-menu-item--open{background-color:#e4e2e2}"]
+            })
+        ], TieredMenuItemComponent);
+        return TieredMenuItemComponent;
+    }());
+
+    var TieredMenuDividerComponent = /** @class */ (function () {
+        function TieredMenuDividerComponent() {
+        }
+        TieredMenuDividerComponent = __decorate([
+            core.Component({
+                selector: "s-tiered-menu-divider",
+                template: "<div class=\"divider\"></div>",
+                styles: [".divider{margin:2px 0;height:1px;background-color:#ccc}"]
+            })
+        ], TieredMenuDividerComponent);
+        return TieredMenuDividerComponent;
+    }());
+
+    var TieredMenuModule = /** @class */ (function () {
+        function TieredMenuModule() {
+        }
+        TieredMenuModule = __decorate([
+            core.NgModule({
+                imports: [
+                    common.CommonModule,
+                    platformBrowser.BrowserModule,
+                ],
+                declarations: [
+                    TieredMenuDirective,
+                    TieredMenuComponent,
+                    TieredMenuNestedComponent,
+                    TieredMenuItemComponent,
+                    TieredMenuDividerComponent,
+                ],
+                exports: [TieredMenuDirective],
+                providers: [
+                    TieredMenuEventService,
+                    TieredMenuService,
+                ],
+            })
+        ], TieredMenuModule);
+        return TieredMenuModule;
+    }());
+
     var WorkspaceSwitchComponent = /** @class */ (function () {
         function WorkspaceSwitchComponent(eRef) {
             this.eRef = eRef;
@@ -15085,6 +15837,8 @@
     exports.TextField = TextField;
     exports.ThumbnailComponent = ThumbnailComponent;
     exports.ThumbnailModule = ThumbnailModule;
+    exports.TieredMenuDirective = TieredMenuDirective;
+    exports.TieredMenuModule = TieredMenuModule;
     exports.TileComponent = TileComponent;
     exports.TileModule = TileModule;
     exports.TimelineComponent = TimelineComponent;
@@ -15131,6 +15885,12 @@
     exports.ɵcd = CodeEditorComponent;
     exports.ɵce = CoreFacade;
     exports.ɵcf = CodeMirror6Core;
+    exports.ɵcg = TieredMenuEventService;
+    exports.ɵch = TieredMenuService;
+    exports.ɵci = TieredMenuComponent;
+    exports.ɵcj = TieredMenuNestedComponent;
+    exports.ɵck = TieredMenuItemComponent;
+    exports.ɵcl = TieredMenuDividerComponent;
     exports.ɵd = LocalizedCurrencyImpurePipe;
     exports.ɵe = LocalizedBignumberPipe;
     exports.ɵf = LocalizedBignumberImpurePipe;