@seniorsistemas/angular-components 17.27.1-feature-sds-110-8be5f7f5 → 17.27.1-feature-sds-110-1bb20c20

package/fesm2022/seniorsistemas-angular-components-thumbnails.mjs

@@ -25,10 +25,10 @@ class ThumbnailItemVideoComponent {
             this.videoPlayer.nativeElement.currentTime = 0;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThumbnailItemVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ThumbnailItemVideoComponent, selector: "s-thumbnail-item-video", inputs: { imageUrl: "imageUrl", videoUrl: "videoUrl" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<div class=\"thumbnail-item-video\" [ngClass]=\"{ 'thumbnail-item-video--playable': videoUrl }\">\n    <div\n        class=\"thumbnail-image\"\n        [ngStyle]=\"{'backgroundImage': 'url(' + imageUrl + ')'}\">\n    </div>\n    <div class=\"play-overlay\">\n        <i class=\"icon fas fa-play\"></i>\n        <span class=\"label\">{{ \"platform.angular_components.watch\" | translate }}</span>\n    </div>\n    <video\n        *ngIf=\"videoUrl\"\n        #videoPlayer\n        class=\"thumbnail-video-preview\"\n        [src]=\"videoUrl\"\n        [loop]=\"true\"\n        [muted]=\"true\"\n        preload=\"none\">\n    </video>\n</div>\n", styles: [".thumbnail-item-video{cursor:pointer;height:100px;overflow:hidden;position:relative;width:100px}.thumbnail-item-video .thumbnail-image{background-repeat:no-repeat;background-size:cover;height:100%;width:100%}.thumbnail-item-video .thumbnail-video-preview{height:100%;left:0;width:100%;object-fit:cover;opacity:0;position:absolute;top:0;transition:opacity .3s ease-in-out}.thumbnail-item-video:hover .thumbnail-video-preview{opacity:1}.thumbnail-item-video .play-overlay{align-items:center;color:#fff;display:flex;flex-direction:column;gap:8px;justify-content:center;left:50%;opacity:1;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .3s ease-in-out;width:100%;z-index:10}.thumbnail-item-video .play-overlay .icon{color:#fff;font-size:24px}.thumbnail-item-video .play-overlay .label{overflow:hidden;padding:0 8px;text-overflow:ellipsis;width:100%}.thumbnail-item-video--playable:hover .play-overlay{opacity:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailItemVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ThumbnailItemVideoComponent, selector: "s-thumbnail-item-video", inputs: { imageUrl: "imageUrl", videoUrl: "videoUrl" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<div class=\"thumbnail-item-video\" [ngClass]=\"{ 'thumbnail-item-video--playable': videoUrl }\">\n    <div\n        class=\"thumbnail-image\"\n        [ngStyle]=\"{'backgroundImage': 'url(' + imageUrl + ')'}\">\n    </div>\n    <div class=\"play-overlay\">\n        <i class=\"icon fas fa-play\"></i>\n        <span class=\"label\">{{ \"platform.angular_components.watch\" | translate }}</span>\n    </div>\n    <video\n        *ngIf=\"videoUrl\"\n        #videoPlayer\n        class=\"thumbnail-video-preview\"\n        [src]=\"videoUrl\"\n        [loop]=\"true\"\n        [muted]=\"true\"\n        preload=\"none\">\n    </video>\n</div>\n", styles: [".thumbnail-item-video{cursor:pointer;height:100px;overflow:hidden;position:relative;width:100px}.thumbnail-item-video .thumbnail-image{background-repeat:no-repeat;background-size:cover;height:100%;width:100%}.thumbnail-item-video .thumbnail-video-preview{height:100%;left:0;width:100%;object-fit:cover;opacity:0;position:absolute;top:0;transition:opacity .3s ease-in-out}.thumbnail-item-video:hover .thumbnail-video-preview{opacity:1}.thumbnail-item-video .play-overlay{align-items:center;color:#fff;display:flex;flex-direction:column;gap:8px;justify-content:center;left:50%;opacity:1;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .3s ease-in-out;width:100%;z-index:10}.thumbnail-item-video .play-overlay .icon{color:#fff;font-size:24px}.thumbnail-item-video .play-overlay .label{overflow:hidden;padding:0 8px;text-overflow:ellipsis;width:100%}.thumbnail-item-video--playable:hover .play-overlay{opacity:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThumbnailItemVideoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailItemVideoComponent, decorators: [{
             type: Component,
             args: [{ selector: "s-thumbnail-item-video", template: "<div class=\"thumbnail-item-video\" [ngClass]=\"{ 'thumbnail-item-video--playable': videoUrl }\">\n    <div\n        class=\"thumbnail-image\"\n        [ngStyle]=\"{'backgroundImage': 'url(' + imageUrl + ')'}\">\n    </div>\n    <div class=\"play-overlay\">\n        <i class=\"icon fas fa-play\"></i>\n        <span class=\"label\">{{ \"platform.angular_components.watch\" | translate }}</span>\n    </div>\n    <video\n        *ngIf=\"videoUrl\"\n        #videoPlayer\n        class=\"thumbnail-video-preview\"\n        [src]=\"videoUrl\"\n        [loop]=\"true\"\n        [muted]=\"true\"\n        preload=\"none\">\n    </video>\n</div>\n", styles: [".thumbnail-item-video{cursor:pointer;height:100px;overflow:hidden;position:relative;width:100px}.thumbnail-item-video .thumbnail-image{background-repeat:no-repeat;background-size:cover;height:100%;width:100%}.thumbnail-item-video .thumbnail-video-preview{height:100%;left:0;width:100%;object-fit:cover;opacity:0;position:absolute;top:0;transition:opacity .3s ease-in-out}.thumbnail-item-video:hover .thumbnail-video-preview{opacity:1}.thumbnail-item-video .play-overlay{align-items:center;color:#fff;display:flex;flex-direction:column;gap:8px;justify-content:center;left:50%;opacity:1;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .3s ease-in-out;width:100%;z-index:10}.thumbnail-item-video .play-overlay .icon{color:#fff;font-size:24px}.thumbnail-item-video .play-overlay .label{overflow:hidden;padding:0 8px;text-overflow:ellipsis;width:100%}.thumbnail-item-video--playable:hover .play-overlay{opacity:0}\n"] }]
         }], propDecorators: { imageUrl: [{
@@ -50,10 +50,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class ThumbnailItemImageComponent {
     imageUrl = '';
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThumbnailItemImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ThumbnailItemImageComponent, selector: "s-thumbnail-item-image", inputs: { imageUrl: "imageUrl" }, ngImport: i0, template: "<div class=\"thumbnail-item-image\">\n    <div\n        *ngIf=\"imageUrl; else noImage\"\n        class=\"thumbnail-image\"\n        [ngStyle]=\"{ backgroundImage: 'url(' + imageUrl + ')' }\">\n    </div>\n\n    <ng-template #noImage>\n        <div class=\"content\">\n            <i class=\"icon fas fa-image\"></i>\n            <span class=\"label\">{{ \"platform.angular_components.view\" | translate }}</span>\n        </div>\n    </ng-template>\n</div>\n", styles: [".thumbnail-item-image{align-items:center;display:flex;height:100px;justify-content:center;width:100px}.thumbnail-item-image .thumbnail-image{background-repeat:no-repeat;background-size:cover;height:100%;width:100%}.thumbnail-item-image .content{align-items:center;color:#fff;display:flex;flex-direction:column;font-family:Open Sans,sans-serif;justify-content:center;width:100%}.thumbnail-item-image .content .icon{font-size:24px}.thumbnail-item-image .content .label{font-size:12px;overflow:hidden;padding:0 8px;text-overflow:ellipsis;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailItemImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ThumbnailItemImageComponent, selector: "s-thumbnail-item-image", inputs: { imageUrl: "imageUrl" }, ngImport: i0, template: "<div class=\"thumbnail-item-image\">\n    <div\n        *ngIf=\"imageUrl; else noImage\"\n        class=\"thumbnail-image\"\n        [ngStyle]=\"{ backgroundImage: 'url(' + imageUrl + ')' }\">\n    </div>\n\n    <ng-template #noImage>\n        <div class=\"content\">\n            <i class=\"icon fas fa-image\"></i>\n            <span class=\"label\">{{ \"platform.angular_components.view\" | translate }}</span>\n        </div>\n    </ng-template>\n</div>\n", styles: [".thumbnail-item-image{align-items:center;display:flex;height:100px;justify-content:center;width:100px}.thumbnail-item-image .thumbnail-image{background-repeat:no-repeat;background-size:cover;height:100%;width:100%}.thumbnail-item-image .content{align-items:center;color:#fff;display:flex;flex-direction:column;font-family:Open Sans,sans-serif;justify-content:center;width:100%}.thumbnail-item-image .content .icon{font-size:24px}.thumbnail-item-image .content .label{font-size:12px;overflow:hidden;padding:0 8px;text-overflow:ellipsis;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThumbnailItemImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailItemImageComponent, decorators: [{
             type: Component,
             args: [{ selector: "s-thumbnail-item-image", template: "<div class=\"thumbnail-item-image\">\n    <div\n        *ngIf=\"imageUrl; else noImage\"\n        class=\"thumbnail-image\"\n        [ngStyle]=\"{ backgroundImage: 'url(' + imageUrl + ')' }\">\n    </div>\n\n    <ng-template #noImage>\n        <div class=\"content\">\n            <i class=\"icon fas fa-image\"></i>\n            <span class=\"label\">{{ \"platform.angular_components.view\" | translate }}</span>\n        </div>\n    </ng-template>\n</div>\n", styles: [".thumbnail-item-image{align-items:center;display:flex;height:100px;justify-content:center;width:100px}.thumbnail-item-image .thumbnail-image{background-repeat:no-repeat;background-size:cover;height:100%;width:100%}.thumbnail-item-image .content{align-items:center;color:#fff;display:flex;flex-direction:column;font-family:Open Sans,sans-serif;justify-content:center;width:100%}.thumbnail-item-image .content .icon{font-size:24px}.thumbnail-item-image .content .label{font-size:12px;overflow:hidden;padding:0 8px;text-overflow:ellipsis;width:100%}\n"] }]
         }], propDecorators: { imageUrl: [{
@@ -95,10 +95,10 @@ class ThumbnailItemComponent {
             throw new Error("itemData is required");
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThumbnailItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ThumbnailItemComponent, selector: "s-thumbnail-item", inputs: { itemData: "itemData", isCheckable: "isCheckable", isChecked: "isChecked", combineCheckboxEvent: "combineCheckboxEvent" }, outputs: { checked: "checked", opened: "opened" }, ngImport: i0, template: "<button\n    *ngIf=\"itemData\"\n    class=\"thumbnail-item\"\n    (click)=\"onClick()\"\n>\n    <div class=\"thumbnail-item-content\">\n        <div class=\"content\">\n            <ng-container *ngIf=\"itemData.type === 'video'\">\n                <s-thumbnail-item-video\n                    [imageUrl]=\"itemData.imageUrl ? itemData.imageUrl : ''\"\n                    [videoUrl]=\"itemData.videoUrl ? itemData.videoUrl : ''\"\n                >\n                </s-thumbnail-item-video>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'image'\">\n                <s-thumbnail-item-image\n                    [imageUrl]=\"itemData.imageUrl ? itemData.imageUrl : ''\"\n                ></s-thumbnail-item-image>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'audio'\">\n                <i class=\"icon fas fa-volume-down\"></i>\n                <span class=\"label\">{{ 'platform.angular_components.listen' | translate }}</span>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'file'\">\n                <i class=\"icon fas fa-file-alt\"></i>\n                <span class=\"label\">{{ 'platform.angular_components.view' | translate }}</span>\n            </ng-container>\n        </div>\n        <form\n            *ngIf=\"isCheckable\"\n            [formGroup]=\"checkboxFormGroup\"\n            class=\"checkbox\"\n        >\n            <s-checkbox-list\n                [data]=\"{ label: '' }\"\n                formControlName=\"checkbox\"\n                (click)=\"checkboxClick($event)\"\n            ></s-checkbox-list>\n        </form>\n    </div>\n    <span class=\"file-name-label\">{{ itemData.fileName }}</span>\n</button>\n", styles: [".thumbnail-item{align-items:center;background:transparent;border:none;cursor:pointer;display:inline-flex;flex-direction:column;justify-content:center;overflow:hidden;width:100px}.thumbnail-item-content{align-items:center;background-image:linear-gradient(to top right,#5288b6,#00c89a);border-radius:8px;display:flex;flex-direction:column;height:100px;justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:100%;overflow:hidden}.thumbnail-item-content .checkbox{position:absolute;right:8px;top:8px}.thumbnail-item-content .content{align-items:center;color:#fff;display:flex;flex-direction:column;gap:4px;overflow:hidden;width:100%}.thumbnail-item-content .content .icon{font-size:24px}.thumbnail-item-content .content .label{font-size:12px;width:100%;padding:0 8px;overflow:hidden;text-overflow:ellipsis}.thumbnail-item:hover{transform:scale(1.05);transition:all .2s ease-in-out}.thumbnail-item .file-name-label{color:#525966;font-family:Open Sans,sans-serif;font-size:12px;overflow:hidden;text-align:center;text-overflow:ellipsis;text-wrap:nowrap;-webkit-user-select:none;user-select:none;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.CheckboxListComponent, selector: "s-checkbox-list", inputs: ["data"] }, { kind: "component", type: ThumbnailItemVideoComponent, selector: "s-thumbnail-item-video", inputs: ["imageUrl", "videoUrl"] }, { kind: "component", type: ThumbnailItemImageComponent, selector: "s-thumbnail-item-image", inputs: ["imageUrl"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ThumbnailItemComponent, selector: "s-thumbnail-item", inputs: { itemData: "itemData", isCheckable: "isCheckable", isChecked: "isChecked", combineCheckboxEvent: "combineCheckboxEvent" }, outputs: { checked: "checked", opened: "opened" }, ngImport: i0, template: "<button\n    *ngIf=\"itemData\"\n    class=\"thumbnail-item\"\n    (click)=\"onClick()\"\n>\n    <div class=\"thumbnail-item-content\">\n        <div class=\"content\">\n            <ng-container *ngIf=\"itemData.type === 'video'\">\n                <s-thumbnail-item-video\n                    [imageUrl]=\"itemData.imageUrl ? itemData.imageUrl : ''\"\n                    [videoUrl]=\"itemData.videoUrl ? itemData.videoUrl : ''\"\n                >\n                </s-thumbnail-item-video>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'image'\">\n                <s-thumbnail-item-image\n                    [imageUrl]=\"itemData.imageUrl ? itemData.imageUrl : ''\"\n                ></s-thumbnail-item-image>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'audio'\">\n                <i class=\"icon fas fa-volume-down\"></i>\n                <span class=\"label\">{{ 'platform.angular_components.listen' | translate }}</span>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'file'\">\n                <i class=\"icon fas fa-file-alt\"></i>\n                <span class=\"label\">{{ 'platform.angular_components.view' | translate }}</span>\n            </ng-container>\n        </div>\n        <form\n            *ngIf=\"isCheckable\"\n            [formGroup]=\"checkboxFormGroup\"\n            class=\"checkbox\"\n        >\n            <s-checkbox-list\n                [data]=\"{ label: '' }\"\n                formControlName=\"checkbox\"\n                (click)=\"checkboxClick($event)\"\n            ></s-checkbox-list>\n        </form>\n    </div>\n    <span class=\"file-name-label\">{{ itemData.fileName }}</span>\n</button>\n", styles: [".thumbnail-item{align-items:center;background:transparent;border:none;cursor:pointer;display:inline-flex;flex-direction:column;justify-content:center;overflow:hidden;width:100px}.thumbnail-item-content{align-items:center;background-image:linear-gradient(to top right,#5288b6,#00c89a);border-radius:8px;display:flex;flex-direction:column;height:100px;justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:100%;overflow:hidden}.thumbnail-item-content .checkbox{position:absolute;right:8px;top:8px}.thumbnail-item-content .content{align-items:center;color:#fff;display:flex;flex-direction:column;gap:4px;overflow:hidden;width:100%}.thumbnail-item-content .content .icon{font-size:24px}.thumbnail-item-content .content .label{font-size:12px;width:100%;padding:0 8px;overflow:hidden;text-overflow:ellipsis}.thumbnail-item:hover{transform:scale(1.05);transition:all .2s ease-in-out}.thumbnail-item .file-name-label{color:#525966;font-family:Open Sans,sans-serif;font-size:12px;overflow:hidden;text-align:center;text-overflow:ellipsis;text-wrap:nowrap;-webkit-user-select:none;user-select:none;width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.CheckboxListComponent, selector: "s-checkbox-list", inputs: ["data"] }, { kind: "component", type: ThumbnailItemVideoComponent, selector: "s-thumbnail-item-video", inputs: ["imageUrl", "videoUrl"] }, { kind: "component", type: ThumbnailItemImageComponent, selector: "s-thumbnail-item-image", inputs: ["imageUrl"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThumbnailItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailItemComponent, decorators: [{
             type: Component,
             args: [{ selector: "s-thumbnail-item", template: "<button\n    *ngIf=\"itemData\"\n    class=\"thumbnail-item\"\n    (click)=\"onClick()\"\n>\n    <div class=\"thumbnail-item-content\">\n        <div class=\"content\">\n            <ng-container *ngIf=\"itemData.type === 'video'\">\n                <s-thumbnail-item-video\n                    [imageUrl]=\"itemData.imageUrl ? itemData.imageUrl : ''\"\n                    [videoUrl]=\"itemData.videoUrl ? itemData.videoUrl : ''\"\n                >\n                </s-thumbnail-item-video>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'image'\">\n                <s-thumbnail-item-image\n                    [imageUrl]=\"itemData.imageUrl ? itemData.imageUrl : ''\"\n                ></s-thumbnail-item-image>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'audio'\">\n                <i class=\"icon fas fa-volume-down\"></i>\n                <span class=\"label\">{{ 'platform.angular_components.listen' | translate }}</span>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'file'\">\n                <i class=\"icon fas fa-file-alt\"></i>\n                <span class=\"label\">{{ 'platform.angular_components.view' | translate }}</span>\n            </ng-container>\n        </div>\n        <form\n            *ngIf=\"isCheckable\"\n            [formGroup]=\"checkboxFormGroup\"\n            class=\"checkbox\"\n        >\n            <s-checkbox-list\n                [data]=\"{ label: '' }\"\n                formControlName=\"checkbox\"\n                (click)=\"checkboxClick($event)\"\n            ></s-checkbox-list>\n        </form>\n    </div>\n    <span class=\"file-name-label\">{{ itemData.fileName }}</span>\n</button>\n", styles: [".thumbnail-item{align-items:center;background:transparent;border:none;cursor:pointer;display:inline-flex;flex-direction:column;justify-content:center;overflow:hidden;width:100px}.thumbnail-item-content{align-items:center;background-image:linear-gradient(to top right,#5288b6,#00c89a);border-radius:8px;display:flex;flex-direction:column;height:100px;justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:100%;overflow:hidden}.thumbnail-item-content .checkbox{position:absolute;right:8px;top:8px}.thumbnail-item-content .content{align-items:center;color:#fff;display:flex;flex-direction:column;gap:4px;overflow:hidden;width:100%}.thumbnail-item-content .content .icon{font-size:24px}.thumbnail-item-content .content .label{font-size:12px;width:100%;padding:0 8px;overflow:hidden;text-overflow:ellipsis}.thumbnail-item:hover{transform:scale(1.05);transition:all .2s ease-in-out}.thumbnail-item .file-name-label{color:#525966;font-family:Open Sans,sans-serif;font-size:12px;overflow:hidden;text-align:center;text-overflow:ellipsis;text-wrap:nowrap;-webkit-user-select:none;user-select:none;width:100%}\n"] }]
         }], propDecorators: { itemData: [{
@@ -140,10 +140,10 @@ class ThumbnailsComponent {
     isSelected(item) {
         return this._selection.some((i) => i.id === item.id);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThumbnailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ThumbnailsComponent, selector: "s-thumbnails", inputs: { items: "items", selectable: "selectable", combineCheckboxEvent: "combineCheckboxEvent", selection: "selection" }, outputs: { selectionChange: "selectionChange", itemOpened: "itemOpened" }, ngImport: i0, template: "<div class=\"thumbnails\">\n    @for(item of items; track $index) {\n        <s-thumbnail-item\n            [combineCheckboxEvent]=\"combineCheckboxEvent\"\n            [itemData]=\"item\"\n            [isCheckable]=\"selectable\"\n            [isChecked]=\"isSelected(item)\"\n            (checked)=\"onItemSelected($event)\"\n            (opened)=\"onItemOpened($event)\">\n        </s-thumbnail-item>\n    }\n</div>\n", styles: [".thumbnails{display:flex;flex-wrap:wrap;gap:12px}\n"], dependencies: [{ kind: "component", type: ThumbnailItemComponent, selector: "s-thumbnail-item", inputs: ["itemData", "isCheckable", "isChecked", "combineCheckboxEvent"], outputs: ["checked", "opened"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ThumbnailsComponent, selector: "s-thumbnails", inputs: { items: "items", selectable: "selectable", combineCheckboxEvent: "combineCheckboxEvent", selection: "selection" }, outputs: { selectionChange: "selectionChange", itemOpened: "itemOpened" }, ngImport: i0, template: "<div class=\"thumbnails\">\n    @for(item of items; track $index) {\n        <s-thumbnail-item\n            [combineCheckboxEvent]=\"combineCheckboxEvent\"\n            [itemData]=\"item\"\n            [isCheckable]=\"selectable\"\n            [isChecked]=\"isSelected(item)\"\n            (checked)=\"onItemSelected($event)\"\n            (opened)=\"onItemOpened($event)\">\n        </s-thumbnail-item>\n    }\n</div>\n", styles: [".thumbnails{display:flex;flex-wrap:wrap;gap:12px}\n"], dependencies: [{ kind: "component", type: ThumbnailItemComponent, selector: "s-thumbnail-item", inputs: ["itemData", "isCheckable", "isChecked", "combineCheckboxEvent"], outputs: ["checked", "opened"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThumbnailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailsComponent, decorators: [{
             type: Component,
             args: [{ selector: "s-thumbnails", template: "<div class=\"thumbnails\">\n    @for(item of items; track $index) {\n        <s-thumbnail-item\n            [combineCheckboxEvent]=\"combineCheckboxEvent\"\n            [itemData]=\"item\"\n            [isCheckable]=\"selectable\"\n            [isChecked]=\"isSelected(item)\"\n            (checked)=\"onItemSelected($event)\"\n            (opened)=\"onItemOpened($event)\">\n        </s-thumbnail-item>\n    }\n</div>\n", styles: [".thumbnails{display:flex;flex-wrap:wrap;gap:12px}\n"] }]
         }], propDecorators: { items: [{
@@ -161,11 +161,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class ThumbnailsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThumbnailsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ThumbnailsModule, declarations: [ThumbnailsComponent, ThumbnailItemComponent, ThumbnailItemVideoComponent, ThumbnailItemImageComponent], imports: [CommonModule, ReactiveFormsModule, TranslateModule, CheckboxListModule], exports: [ThumbnailsComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThumbnailsModule, imports: [CommonModule, ReactiveFormsModule, TranslateModule, CheckboxListModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailsModule, declarations: [ThumbnailsComponent, ThumbnailItemComponent, ThumbnailItemVideoComponent, ThumbnailItemImageComponent], imports: [CommonModule, ReactiveFormsModule, TranslateModule, CheckboxListModule], exports: [ThumbnailsComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailsModule, imports: [CommonModule, ReactiveFormsModule, TranslateModule, CheckboxListModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ThumbnailsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, ReactiveFormsModule, TranslateModule, CheckboxListModule],

package/fesm2022/seniorsistemas-angular-components-tiered-menu.mjs

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Component, Input, HostListener, Output, Directive, NgModule } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { disableScroll, enableScroll } from '@seniorsistemas/angular-components/utils';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
@@ -50,29 +51,22 @@ class TieredMenuService {
     _generateId() {
         return `id-${Math.random().toString(36).substring(2, 9)}-${Math.random().toString(36).substring(2, 9)}-${Math.random().toString(36).substring(2, 9)}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuService, decorators: [{
             type: Injectable
         }] });
 
 class TieredMenuGlobalService {
     lastInstance;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuGlobalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuGlobalService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuGlobalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuGlobalService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuGlobalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuGlobalService, decorators: [{
             type: Injectable
         }] });
 
-const enableScroll = () => {
-    document.body.style.overflow = "auto";
-};
-const disabledScroll = () => {
-    document.body.style.overflow = "hidden";
-};
-
 class TieredMenuEventService {
     incrementCurrentItemEvent = new EventEmitter();
     decrementCurrentItemEvent = new EventEmitter();
@@ -81,10 +75,10 @@ class TieredMenuEventService {
     openItemMenuEvent = new EventEmitter();
     closeItemMenuEvent = new EventEmitter();
     createMenuEvent = new EventEmitter();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuEventService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuEventService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuEventService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuEventService, decorators: [{
             type: Injectable
         }] });
 
@@ -126,10 +120,10 @@ class TieredMenuItemComponent {
     onMouseLeave() {
         window.clearTimeout(this._showTimeout);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuItemComponent, deps: [{ token: TieredMenuEventService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: { item: "item", focused: "focused", highlight: "highlight", triggerEvent: "triggerEvent", closeOnClick: "closeOnClick" }, host: { listeners: { "click": "onClick()", "touchend": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    [attr.data-key]=\"item.dataKey\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused,\n        'tiered-menu-item--disabled': item.disabled,\n    }\"\n>\n    <div class=\"tiered-menu-item-content\">\n        <span\n            class=\"icon\"\n            [ngClass]=\"item.iconClass\"\n        ></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    @if (item.submenu) {\n        <span\n            class=\"submenu-icon fas\"\n            [class.fa-chevron-left]=\"item.isOpen\"\n            [class.fa-chevron-right]=\"!item.isOpen\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tiered-menu-item{align-items:center;display:flex;justify-content:space-between;padding:8px 16px;-webkit-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}.tiered-menu-item--disabled{opacity:50%;cursor:default}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuItemComponent, deps: [{ token: TieredMenuEventService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: { item: "item", focused: "focused", highlight: "highlight", triggerEvent: "triggerEvent", closeOnClick: "closeOnClick" }, host: { listeners: { "click": "onClick()", "touchend": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    [attr.data-key]=\"item.dataKey\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused,\n        'tiered-menu-item--disabled': item.disabled,\n    }\"\n>\n    <div class=\"tiered-menu-item-content\">\n        <span\n            class=\"icon\"\n            [ngClass]=\"item.iconClass\"\n        ></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    @if (item.submenu) {\n        <span\n            class=\"submenu-icon fas\"\n            [class.fa-chevron-left]=\"item.isOpen\"\n            [class.fa-chevron-right]=\"!item.isOpen\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tiered-menu-item{align-items:center;display:flex;justify-content:space-between;padding:8px 16px;-webkit-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}.tiered-menu-item--disabled{opacity:50%;cursor:default}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 's-tiered-menu-item', template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    [attr.data-key]=\"item.dataKey\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused,\n        'tiered-menu-item--disabled': item.disabled,\n    }\"\n>\n    <div class=\"tiered-menu-item-content\">\n        <span\n            class=\"icon\"\n            [ngClass]=\"item.iconClass\"\n        ></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    @if (item.submenu) {\n        <span\n            class=\"submenu-icon fas\"\n            [class.fa-chevron-left]=\"item.isOpen\"\n            [class.fa-chevron-right]=\"!item.isOpen\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tiered-menu-item{align-items:center;display:flex;justify-content:space-between;padding:8px 16px;-webkit-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}.tiered-menu-item--disabled{opacity:50%;cursor:default}\n"] }]
         }], ctorParameters: () => [{ type: TieredMenuEventService }], propDecorators: { item: [{
@@ -158,10 +152,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class TieredMenuDividerComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TieredMenuDividerComponent, selector: "s-tiered-menu-divider", ngImport: i0, template: "<div class=\"divider\"></div>\n", styles: [".divider{margin:2px 0;height:1px;background-color:#ccc}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TieredMenuDividerComponent, selector: "s-tiered-menu-divider", ngImport: i0, template: "<div class=\"divider\"></div>\n", styles: [".divider{margin:2px 0;height:1px;background-color:#ccc}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuDividerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuDividerComponent, decorators: [{
             type: Component,
             args: [{ selector: 's-tiered-menu-divider', template: "<div class=\"divider\"></div>\n", styles: [".divider{margin:2px 0;height:1px;background-color:#ccc}\n"] }]
         }] });
@@ -182,8 +176,7 @@ class TieredMenuNestedComponent {
     onDocumentClick(event) {
         // Closing menu when clicked outside.
         const target = event.target;
-        const clickedInside = target.closest('s-tiered-menu-item') ||
-            target.closest('s-tiered-menu-divider');
+        const clickedInside = target.closest('s-tiered-menu-item') || target.closest('s-tiered-menu-divider');
         if (!clickedInside) {
             this._tieredMenuEventService.closeAllMenusEvent.emit();
         }
@@ -219,7 +212,7 @@ class TieredMenuNestedComponent {
     ngOnInit() {
         this.tieredMenuService.currentItems = this.items;
         this._subscribeEvents();
-        disabledScroll();
+        disableScroll();
     }
     ngOnDestroy() {
         this._unsubscribe$.next();
@@ -228,18 +221,15 @@ class TieredMenuNestedComponent {
     }
     _incrementCurItem() {
         if (!this.tieredMenuService.currentItem) {
-            this.tieredMenuService.currentItem =
-                this.tieredMenuService.currentItems[0];
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
             return;
         }
         const curIndex = this.tieredMenuService.currentItems.indexOf(this.tieredMenuService.currentItem) + 1;
         if (curIndex < this.tieredMenuService.currentItems.length) {
-            this.tieredMenuService.currentItem =
-                this.tieredMenuService.currentItems[curIndex];
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[curIndex];
         }
         else {
-            this.tieredMenuService.currentItem =
-                this.tieredMenuService.currentItems[0];
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
         }
         if (this.tieredMenuService.currentItem.divider) {
             this._incrementCurItem();
@@ -247,14 +237,12 @@ class TieredMenuNestedComponent {
     }
     _decrementCurItem() {
         if (!this.tieredMenuService.currentItem) {
-            this.tieredMenuService.currentItem =
-                this.tieredMenuService.currentItems[0];
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
             return;
         }
         const curIndex = this.tieredMenuService.currentItems.indexOf(this.tieredMenuService.currentItem) - 1;
         if (curIndex >= 0) {
-            this.tieredMenuService.currentItem =
-                this.tieredMenuService.currentItems[curIndex];
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[curIndex];
         }
         else {
             this.tieredMenuService.currentItem =
@@ -271,10 +259,8 @@ class TieredMenuNestedComponent {
             itemAux = itemAux.parent;
         }
         item.isOpen = false;
-        this.tieredMenuService.currentItem =
-            itemAux ?? this.tieredMenuService.items[0];
-        this.tieredMenuService.currentItems =
-            itemAux?.parent?.submenu || this.tieredMenuService.items;
+        this.tieredMenuService.currentItem = itemAux ?? this.tieredMenuService.items[0];
+        this.tieredMenuService.currentItems = itemAux?.parent?.submenu || this.tieredMenuService.items;
     }
     _openItem(item) {
         if (item?.submenu) {
@@ -288,14 +274,10 @@ class TieredMenuNestedComponent {
         }
     }
     _subscribeEvents() {
-        this._tieredMenuEventService.incrementCurrentItemEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(() => {
+        this._tieredMenuEventService.incrementCurrentItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
             this._incrementCurItem();
         });
-        this._tieredMenuEventService.decrementCurrentItemEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(() => {
+        this._tieredMenuEventService.decrementCurrentItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
             this._decrementCurItem();
         });
         this._tieredMenuEventService.selectItemEvent
@@ -330,10 +312,10 @@ class TieredMenuNestedComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuNestedComponent, deps: [{ token: TieredMenuService }, { token: TieredMenuEventService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TieredMenuNestedComponent, selector: "ng-component", host: { listeners: { "window:resize": "onResize()", "document:click": "onDocumentClick($event)", "document:keydown": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div\n    class=\"menu menu--nested\"\n    [ngStyle]=\"{\n        top: top + 'px',\n        left: left + 'px',\n    }\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: items }\"\n    ></ng-container>\n</div>\n\n<ng-template\n    #itemsTemplate\n    let-items\n>\n    @for (item of items; track item.id) {\n        <div>\n            @if (item.visible && !item.divider) {\n                <s-tiered-menu-item\n                    [item]=\"item\"\n                    [focused]=\"item === tieredMenuService.currentItem\"\n                    [closeOnClick]=\"true\"\n                >\n                </s-tiered-menu-item>\n            }\n            @if (item.divider) {\n                <s-tiered-menu-divider></s-tiered-menu-divider>\n            }\n            @if (item.submenu && item.isOpen) {\n                <div>\n                    <div class=\"submenu\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                itemsTemplate;\n                                context: { $implicit: item.submenu }\n                            \"\n                        ></ng-container>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;min-width:176px;padding:4px 0;position:absolute;z-index:9999;overflow:auto;width:calc(100vw - 8px)}.menu .submenu{margin-left:24px}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: ["item", "focused", "highlight", "triggerEvent", "closeOnClick"] }, { kind: "component", type: TieredMenuDividerComponent, selector: "s-tiered-menu-divider" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuNestedComponent, deps: [{ token: TieredMenuService }, { token: TieredMenuEventService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuNestedComponent, selector: "ng-component", host: { listeners: { "window:resize": "onResize()", "document:click": "onDocumentClick($event)", "document:keydown": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div\n    class=\"menu menu--nested\"\n    [ngStyle]=\"{\n        top: top + 'px',\n        left: left + 'px',\n    }\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: items }\"\n    ></ng-container>\n</div>\n\n<ng-template\n    #itemsTemplate\n    let-items\n>\n    @for (item of items; track item.id) {\n        <div>\n            @if (item.visible && !item.divider) {\n                <s-tiered-menu-item\n                    [item]=\"item\"\n                    [focused]=\"item === tieredMenuService.currentItem\"\n                    [closeOnClick]=\"true\"\n                >\n                </s-tiered-menu-item>\n            }\n            @if (item.divider) {\n                <s-tiered-menu-divider></s-tiered-menu-divider>\n            }\n            @if (item.submenu && item.isOpen) {\n                <div>\n                    <div class=\"submenu\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                itemsTemplate;\n                                context: { $implicit: item.submenu }\n                            \"\n                        ></ng-container>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;min-width:176px;padding:4px 0;position:absolute;z-index:9999;overflow:auto;width:calc(100vw - 8px)}.menu .submenu{margin-left:24px}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: ["item", "focused", "highlight", "triggerEvent", "closeOnClick"] }, { kind: "component", type: TieredMenuDividerComponent, selector: "s-tiered-menu-divider" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuNestedComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuNestedComponent, decorators: [{
             type: Component,
             args: [{ template: "<div\n    class=\"menu menu--nested\"\n    [ngStyle]=\"{\n        top: top + 'px',\n        left: left + 'px',\n    }\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: items }\"\n    ></ng-container>\n</div>\n\n<ng-template\n    #itemsTemplate\n    let-items\n>\n    @for (item of items; track item.id) {\n        <div>\n            @if (item.visible && !item.divider) {\n                <s-tiered-menu-item\n                    [item]=\"item\"\n                    [focused]=\"item === tieredMenuService.currentItem\"\n                    [closeOnClick]=\"true\"\n                >\n                </s-tiered-menu-item>\n            }\n            @if (item.divider) {\n                <s-tiered-menu-divider></s-tiered-menu-divider>\n            }\n            @if (item.submenu && item.isOpen) {\n                <div>\n                    <div class=\"submenu\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                itemsTemplate;\n                                context: { $implicit: item.submenu }\n                            \"\n                        ></ng-container>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;min-width:176px;padding:4px 0;position:absolute;z-index:9999;overflow:auto;width:calc(100vw - 8px)}.menu .submenu{margin-left:24px}\n"] }]
         }], ctorParameters: () => [{ type: TieredMenuService }, { type: TieredMenuEventService }], propDecorators: { onResize: [{
@@ -376,8 +358,7 @@ class TieredMenuComponent {
     onDocumentClick(event) {
         // Closing menu when clicked outside.
         const target = event.target;
-        const clickedInside = target.closest('s-tiered-menu-item') ||
-            target.closest('s-tiered-menu-divider');
+        const clickedInside = target.closest('s-tiered-menu-item') || target.closest('s-tiered-menu-divider');
         if (!clickedInside) {
             this._tieredMenuEventService.closeAllMenusEvent.emit();
         }
@@ -429,7 +410,7 @@ class TieredMenuComponent {
     ngOnInit() {
         this.tieredMenuService.currentItems = this.items;
         this._subscribeEvents();
-        disabledScroll();
+        disableScroll();
     }
     ngOnDestroy() {
         this._unsubscribe$.next();
@@ -437,8 +418,7 @@ class TieredMenuComponent {
     }
     _incrementCurItem() {
         if (!this.tieredMenuService.currentItem) {
-            this.tieredMenuService.currentItem =
-                this.tieredMenuService.currentItems[0];
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
             return;
         }
         else if (!this.items.includes(this.tieredMenuService.currentItem)) {
@@ -447,12 +427,10 @@ class TieredMenuComponent {
         }
         const currentIndex = this.tieredMenuService.currentItems.indexOf(this.tieredMenuService.currentItem) + 1;
         if (currentIndex < this.tieredMenuService.currentItems.length) {
-            this.tieredMenuService.currentItem =
-                this.tieredMenuService.currentItems[currentIndex];
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[currentIndex];
         }
         else {
-            this.tieredMenuService.currentItem =
-                this.tieredMenuService.currentItems[0];
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
         }
         if (this.tieredMenuService.currentItem.divider) {
             this._incrementCurItem();
@@ -460,8 +438,7 @@ class TieredMenuComponent {
     }
     _decrementCurItem() {
         if (!this.tieredMenuService.currentItem) {
-            this.tieredMenuService.currentItem =
-                this.tieredMenuService.currentItems[0];
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[0];
             return;
             // Checking if it is the current menu.
         }
@@ -470,8 +447,7 @@ class TieredMenuComponent {
         }
         const curIndex = this.tieredMenuService.currentItems.indexOf(this.tieredMenuService.currentItem) - 1;
         if (curIndex >= 0) {
-            this.tieredMenuService.currentItem =
-                this.tieredMenuService.currentItems[curIndex];
+            this.tieredMenuService.currentItem = this.tieredMenuService.currentItems[curIndex];
         }
         else {
             this.tieredMenuService.currentItem =
@@ -522,10 +498,7 @@ class TieredMenuComponent {
                 return item.divider ? count + 1 : count;
             }, 0);
             // I need to calculate the height of the component because the internal elements have not been created yet.
-            const menuHeight = itemsCount * ITEM_HEIGHT +
-                dividersCount * DIVIDER_HEIGHT +
-                PADDING +
-                8;
+            const menuHeight = itemsCount * ITEM_HEIGHT + dividersCount * DIVIDER_HEIGHT + PADDING + 8;
             const menuWidth = this._menuDivElement?.getBoundingClientRect().width ?? 0;
             const rightFreeSpace = window.innerWidth - right;
             const bottomFreeSpace = window.innerHeight - bottom;
@@ -545,15 +518,11 @@ class TieredMenuComponent {
     }
     _subscribeEvents() {
         // Increment current item event.
-        this._tieredMenuEventService.incrementCurrentItemEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(() => {
+        this._tieredMenuEventService.incrementCurrentItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
             this._incrementCurItem();
         });
         // Decrement current item event.
-        this._tieredMenuEventService.decrementCurrentItemEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(() => {
+        this._tieredMenuEventService.decrementCurrentItemEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
             this._decrementCurItem();
         });
         // Select item event.
@@ -571,13 +540,10 @@ class TieredMenuComponent {
             }
         });
         // Close all menus event.
-        this._tieredMenuEventService.closeAllMenusEvent
-            .pipe(takeUntil(this._unsubscribe$))
-            .subscribe(() => {
+        this._tieredMenuEventService.closeAllMenusEvent.pipe(takeUntil(this._unsubscribe$)).subscribe(() => {
             this._destroy();
             this.tieredMenuService.currentItem = null;
-            this.tieredMenuService.currentItems =
-                this.tieredMenuService.items;
+            this.tieredMenuService.currentItems = this.tieredMenuService.items;
             this.tieredMenuService.markAllItemsAsClosed(this.tieredMenuService.items);
             enableScroll();
         });
@@ -606,9 +572,7 @@ class TieredMenuComponent {
                     }
                 }
             }
-            if (item?.submenu &&
-                !item?.isOpen &&
-                this.items.includes(item)) {
+            if (item?.submenu && !item?.isOpen && this.items.includes(item)) {
                 const itemEl = document.querySelector(`#${item.id}`);
                 if (!itemEl)
                     return;
@@ -633,18 +597,16 @@ class TieredMenuComponent {
                 else {
                     enableScroll();
                 }
-                this.tieredMenuService.currentItems =
-                    item?.parent?.parent?.submenu ||
-                        this.tieredMenuService.items;
+                this.tieredMenuService.currentItems = item?.parent?.parent?.submenu || this.tieredMenuService.items;
                 this.tieredMenuService.currentItem = item.parent;
                 this.destroyRequest.emit(false);
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuComponent, deps: [{ token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: TieredMenuService }, { token: TieredMenuEventService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TieredMenuComponent, selector: "s-tiered-menu", outputs: { destroyRequest: "destroyRequest" }, host: { listeners: { "window:resize": "onResize()", "document:click": "onDocumentClick($event)", "document:keydown": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div\n    class=\"menu\"\n    [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.visible && !item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            [highlight]=\"item.isOpen\"\n            triggerEvent=\"hover\"\n            [closeOnClick]=\"false\"\n        >\n        </s-tiered-menu-item>\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n    </div> -->\n    @for(item of items; track $index) {\n        @if(item.visible && !item.divider) {\n            <s-tiered-menu-item\n                [item]=\"item\"\n                [focused]=\"item === tieredMenuService.currentItem\"\n                [highlight]=\"item.isOpen\"\n                triggerEvent=\"hover\"\n                [closeOnClick]=\"false\"/>\n        }\n        @if (item.divider) {\n            <s-tiered-menu-divider/>\n        }\n    }\n</div>\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;max-height:100vh;min-width:176px;padding:4px 0;overflow-y:auto;position:absolute;z-index:9999}\n"], dependencies: [{ kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: ["item", "focused", "highlight", "triggerEvent", "closeOnClick"] }, { kind: "component", type: TieredMenuDividerComponent, selector: "s-tiered-menu-divider" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuComponent, deps: [{ token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: TieredMenuService }, { token: TieredMenuEventService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuComponent, selector: "s-tiered-menu", outputs: { destroyRequest: "destroyRequest" }, host: { listeners: { "window:resize": "onResize()", "document:click": "onDocumentClick($event)", "document:keydown": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div\n    class=\"menu\"\n    [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.visible && !item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            [highlight]=\"item.isOpen\"\n            triggerEvent=\"hover\"\n            [closeOnClick]=\"false\"\n        >\n        </s-tiered-menu-item>\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n    </div> -->\n    @for(item of items; track $index) {\n        @if(item.visible && !item.divider) {\n            <s-tiered-menu-item\n                [item]=\"item\"\n                [focused]=\"item === tieredMenuService.currentItem\"\n                [highlight]=\"item.isOpen\"\n                triggerEvent=\"hover\"\n                [closeOnClick]=\"false\"/>\n        }\n        @if (item.divider) {\n            <s-tiered-menu-divider/>\n        }\n    }\n</div>\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;max-height:100vh;min-width:176px;padding:4px 0;overflow-y:auto;position:absolute;z-index:9999}\n"], dependencies: [{ kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: ["item", "focused", "highlight", "triggerEvent", "closeOnClick"] }, { kind: "component", type: TieredMenuDividerComponent, selector: "s-tiered-menu-divider" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 's-tiered-menu', template: "<div\n    class=\"menu\"\n    [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.visible && !item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            [highlight]=\"item.isOpen\"\n            triggerEvent=\"hover\"\n            [closeOnClick]=\"false\"\n        >\n        </s-tiered-menu-item>\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n    </div> -->\n    @for(item of items; track $index) {\n        @if(item.visible && !item.divider) {\n            <s-tiered-menu-item\n                [item]=\"item\"\n                [focused]=\"item === tieredMenuService.currentItem\"\n                [highlight]=\"item.isOpen\"\n                triggerEvent=\"hover\"\n                [closeOnClick]=\"false\"/>\n        }\n        @if (item.divider) {\n            <s-tiered-menu-divider/>\n        }\n    }\n</div>\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;max-height:100vh;min-width:176px;padding:4px 0;overflow-y:auto;position:absolute;z-index:9999}\n"] }]
         }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: TieredMenuService }, { type: TieredMenuEventService }], propDecorators: { destroyRequest: [{
@@ -862,10 +824,10 @@ class TieredMenuDirective {
             this._tieredMenuService.items.find((i) => i.label === this.focusedItem?.label) ??
                 this._tieredMenuService.items[0];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: TieredMenuEventService }, { token: TieredMenuService }, { token: TieredMenuGlobalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: TieredMenuDirective, selector: "[sTieredMenu]", inputs: { items: "items", focusedItem: "focusedItem", triggerEvent: "triggerEvent" }, host: { listeners: { "click": "onClick($event)" } }, providers: [TieredMenuEventService, TieredMenuService], usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: TieredMenuEventService }, { token: TieredMenuService }, { token: TieredMenuGlobalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TieredMenuDirective, selector: "[sTieredMenu]", inputs: { items: "items", focusedItem: "focusedItem", triggerEvent: "triggerEvent" }, host: { listeners: { "click": "onClick($event)" } }, providers: [TieredMenuEventService, TieredMenuService], usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sTieredMenu]',
@@ -883,15 +845,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class TieredMenuModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuModule, declarations: [TieredMenuDirective,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuModule, declarations: [TieredMenuDirective,
             TieredMenuComponent,
             TieredMenuNestedComponent,
             TieredMenuItemComponent,
             TieredMenuDividerComponent], imports: [CommonModule], exports: [TieredMenuDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuModule, providers: [TieredMenuGlobalService], imports: [CommonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuModule, providers: [TieredMenuGlobalService], imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TieredMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],