@seniorsistemas/angular-components 19.3.1 → 19.3.3

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

@@ -1,7 +1,7 @@
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewChild, Input, NgModule } from '@angular/core';
+import { Injectable, inject, Component, ViewChild, Input, NgModule } from '@angular/core';
 import { Subject, from } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -80,7 +80,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * @category Data
  */
 class ThumbnailComponent {
-    thumbnailService;
+    thumbnailService = inject(ThumbnailService);
     static nextId = 0;
     fallback = false;
     orientation = 0;
@@ -106,9 +106,6 @@ class ThumbnailComponent {
     /** @description Aplica estilo de marca ao thumbnail. @default false */
     isBrand = false;
     ngUnsubscribe = new Subject();
-    constructor(thumbnailService) {
-        this.thumbnailService = thumbnailService;
-    }
     ngOnDestroy() {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
@@ -129,13 +126,13 @@ class ThumbnailComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailComponent, deps: [{ token: ThumbnailService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ThumbnailComponent, selector: "s-thumbnail", inputs: { id: "id", size: "size", imageSource: "imageSource", imageFallback: "imageFallback", imageAlt: "imageAlt", iconClass: "iconClass", hasAction: "hasAction", actionIconClass: "actionIconClass", isTile: "isTile", isBrand: "isBrand" }, viewQueries: [{ propertyName: "imgEl", first: true, predicate: ["img"], descendants: true }], ngImport: i0, template: "<div\n    [id]=\"id\"\n    class=\"thumbnail-container thumbnail-container--{{ size }}\"\n    [ngClass]=\"{\n        'thumbnail-container--with-action': hasAction,\n        'thumbnail-container--brand': isBrand,\n    }\"\n>\n    @if (imageSource || imageFallback) {\n        <div\n            [id]=\"id + '-image-container'\"\n            class=\"image-container\"\n            [ngClass]=\"{\n                'image-container--rounded': !isBrand,\n            }\"\n        >\n            @if (!fallback) {\n                <img\n                    #img\n                    [id]=\"id + '-image'\"\n                    (error)=\"fallback = true\"\n                    [src]=\"imageSource\"\n                    [alt]=\"imageAlt\"\n                    [ngClass]=\"{\n                        smallThumbnail: isTile,\n                        'exif-orientation-2': orientation === 2,\n                        'exif-orientation-3': orientation === 3,\n                        'exif-orientation-4': orientation === 4,\n                        'exif-orientation-5': orientation === 5,\n                        'exif-orientation-6': orientation === 6,\n                        'exif-orientation-7': orientation === 7,\n                        'exif-orientation-8': orientation === 8,\n                    }\"\n                />\n            }\n\n            @if (fallback && imageFallback) {\n                <img\n                    #img\n                    [id]=\"id + '-image-fallback'\"\n                    (error)=\"imageFallback = undefined\"\n                    [src]=\"imageFallback\"\n                    [alt]=\"imageAlt\"\n                    [ngClass]=\"{\n                        smallThumbnail: isTile,\n                        'exif-orientation-2': orientation === 2,\n                        'exif-orientation-3': orientation === 3,\n                        'exif-orientation-4': orientation === 4,\n                        'exif-orientation-5': orientation === 5,\n                        'exif-orientation-6': orientation === 6,\n                        'exif-orientation-7': orientation === 7,\n                        'exif-orientation-8': orientation === 8,\n                    }\"\n                />\n            }\n\n            @if (fallback && !imageFallback) {\n                <i class=\"fallback-img-color far fa-image\"> </i>\n            }\n        </div>\n    }\n\n    @if (hasAction) {\n        <div\n            [id]=\"id + '-action-icon-container'\"\n            class=\"action-icon-container action-icon-container--{{ size }}\"\n        >\n            <span\n                [id]=\"id + '-action-icon'\"\n                [class]=\"actionIconClass\"\n                aria-hidden=\"true\"\n            >\n            </span>\n        </div>\n    }\n\n    @if (!imageSource && !imageFallback) {\n        <div\n            [id]=\"id + '-icon-container'\"\n            class=\"icon-container icon-container--{{ size }}\"\n            [ngClass]=\"{ 'image-container--rounded': !isBrand }\"\n        >\n            <span\n                [id]=\"id + '-icon'\"\n                [class]=\"iconClass\"\n                aria-hidden=\"true\"\n            >\n            </span>\n        </div>\n    }\n\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:inline-block}.thumbnail-container{color:#fff;position:relative;text-align:center}.thumbnail-container--large{font-size:50px;height:100px;width:100px}.thumbnail-container--large.thumbnail-container--brand{width:200px}.thumbnail-container--medium{font-size:40px;height:70px;width:70px}.thumbnail-container--medium.thumbnail-container--brand{width:140px}.thumbnail-container--small{font-size:22px;height:40px;width:40px}.thumbnail-container--small.thumbnail-container--brand{width:80px}.thumbnail-container--with-action{cursor:pointer}.action-icon-container{background-color:#428bca;border-radius:50%;bottom:0;position:absolute;right:0}.action-icon-container--large,.action-icon-container--medium{font-size:10pt;height:25px;padding:3px;width:25px}.action-icon-container--small{font-size:6pt;height:16px;padding:2px;width:16px}.icon-container,.image-container{align-items:center;height:100%;overflow:hidden;width:100%}.icon-container--rounded,.image-container--rounded{border-radius:50%}.smallThumbnail{height:40px!important}.icon-container{background-color:#ccc;color:#fff}.icon-container--large{line-height:98px}.icon-container--medium{line-height:68px}.icon-container--small{line-height:38px}.image-container{align-items:center;background-color:#ccc;display:flex;justify-content:center}.image-container img{width:100%}.image-container img.exif-orientation-2{transform:rotateY(180deg)}.image-container img.exif-orientation-3{transform:rotate(180deg)}.image-container img.exif-orientation-4{transform:rotate(180deg) rotateY(180deg)}.image-container img.exif-orientation-5{transform:rotate(270deg) rotateY(180deg)}.image-container img.exif-orientation-6{transform:rotate(90deg)}.image-container img.exif-orientation-7{transform:rotate(90deg) rotateY(180deg)}.image-container img.exif-orientation-8{transform:rotate(270deg)}.fallback-img-color{color:#fff}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ThumbnailComponent, selector: "s-thumbnail", inputs: { id: "id", size: "size", imageSource: "imageSource", imageFallback: "imageFallback", imageAlt: "imageAlt", iconClass: "iconClass", hasAction: "hasAction", actionIconClass: "actionIconClass", isTile: "isTile", isBrand: "isBrand" }, viewQueries: [{ propertyName: "imgEl", first: true, predicate: ["img"], descendants: true }], ngImport: i0, template: "<div\n    [id]=\"id\"\n    class=\"thumbnail-container thumbnail-container--{{ size }}\"\n    [ngClass]=\"{\n        'thumbnail-container--with-action': hasAction,\n        'thumbnail-container--brand': isBrand,\n    }\"\n>\n    @if (imageSource || imageFallback) {\n        <div\n            [id]=\"id + '-image-container'\"\n            class=\"image-container\"\n            [ngClass]=\"{\n                'image-container--rounded': !isBrand,\n            }\"\n        >\n            @if (!fallback) {\n                <img\n                    #img\n                    [id]=\"id + '-image'\"\n                    (error)=\"fallback = true\"\n                    [src]=\"imageSource\"\n                    [alt]=\"imageAlt\"\n                    [ngClass]=\"{\n                        smallThumbnail: isTile,\n                        'exif-orientation-2': orientation === 2,\n                        'exif-orientation-3': orientation === 3,\n                        'exif-orientation-4': orientation === 4,\n                        'exif-orientation-5': orientation === 5,\n                        'exif-orientation-6': orientation === 6,\n                        'exif-orientation-7': orientation === 7,\n                        'exif-orientation-8': orientation === 8,\n                    }\"\n                />\n            }\n\n            @if (fallback && imageFallback) {\n                <img\n                    #img\n                    [id]=\"id + '-image-fallback'\"\n                    (error)=\"imageFallback = undefined\"\n                    [src]=\"imageFallback\"\n                    [alt]=\"imageAlt\"\n                    [ngClass]=\"{\n                        smallThumbnail: isTile,\n                        'exif-orientation-2': orientation === 2,\n                        'exif-orientation-3': orientation === 3,\n                        'exif-orientation-4': orientation === 4,\n                        'exif-orientation-5': orientation === 5,\n                        'exif-orientation-6': orientation === 6,\n                        'exif-orientation-7': orientation === 7,\n                        'exif-orientation-8': orientation === 8,\n                    }\"\n                />\n            }\n\n            @if (fallback && !imageFallback) {\n                <i class=\"fallback-img-color far fa-image\"> </i>\n            }\n        </div>\n    }\n\n    @if (hasAction) {\n        <div\n            [id]=\"id + '-action-icon-container'\"\n            class=\"action-icon-container action-icon-container--{{ size }}\"\n        >\n            <span\n                [id]=\"id + '-action-icon'\"\n                [class]=\"actionIconClass\"\n                aria-hidden=\"true\"\n            >\n            </span>\n        </div>\n    }\n\n    @if (!imageSource && !imageFallback) {\n        <div\n            [id]=\"id + '-icon-container'\"\n            class=\"icon-container icon-container--{{ size }}\"\n            [ngClass]=\"{ 'image-container--rounded': !isBrand }\"\n        >\n            <span\n                [id]=\"id + '-icon'\"\n                [class]=\"iconClass\"\n                aria-hidden=\"true\"\n            >\n            </span>\n        </div>\n    }\n\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:inline-block}.thumbnail-container{color:#fff;position:relative;text-align:center}.thumbnail-container--large{font-size:50px;height:100px;width:100px}.thumbnail-container--large.thumbnail-container--brand{width:200px}.thumbnail-container--medium{font-size:40px;height:70px;width:70px}.thumbnail-container--medium.thumbnail-container--brand{width:140px}.thumbnail-container--small{font-size:22px;height:40px;width:40px}.thumbnail-container--small.thumbnail-container--brand{width:80px}.thumbnail-container--with-action{cursor:pointer}.action-icon-container{background-color:#428bca;border-radius:50%;bottom:0;position:absolute;right:0}.action-icon-container--large,.action-icon-container--medium{font-size:10pt;height:25px;padding:3px;width:25px}.action-icon-container--small{font-size:6pt;height:16px;padding:2px;width:16px}.icon-container,.image-container{align-items:center;height:100%;overflow:hidden;width:100%}.icon-container--rounded,.image-container--rounded{border-radius:50%}.smallThumbnail{height:40px!important}.icon-container{background-color:#ccc;color:#fff}.icon-container--large{line-height:98px}.icon-container--medium{line-height:68px}.icon-container--small{line-height:38px}.image-container{align-items:center;background-color:#ccc;display:flex;justify-content:center}.image-container img{width:100%}.image-container img.exif-orientation-2{transform:rotateY(180deg)}.image-container img.exif-orientation-3{transform:rotate(180deg)}.image-container img.exif-orientation-4{transform:rotate(180deg) rotateY(180deg)}.image-container img.exif-orientation-5{transform:rotate(270deg) rotateY(180deg)}.image-container img.exif-orientation-6{transform:rotate(90deg)}.image-container img.exif-orientation-7{transform:rotate(90deg) rotateY(180deg)}.image-container img.exif-orientation-8{transform:rotate(270deg)}.fallback-img-color{color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ThumbnailComponent, decorators: [{
             type: Component,
             args: [{ selector: 's-thumbnail', template: "<div\n    [id]=\"id\"\n    class=\"thumbnail-container thumbnail-container--{{ size }}\"\n    [ngClass]=\"{\n        'thumbnail-container--with-action': hasAction,\n        'thumbnail-container--brand': isBrand,\n    }\"\n>\n    @if (imageSource || imageFallback) {\n        <div\n            [id]=\"id + '-image-container'\"\n            class=\"image-container\"\n            [ngClass]=\"{\n                'image-container--rounded': !isBrand,\n            }\"\n        >\n            @if (!fallback) {\n                <img\n                    #img\n                    [id]=\"id + '-image'\"\n                    (error)=\"fallback = true\"\n                    [src]=\"imageSource\"\n                    [alt]=\"imageAlt\"\n                    [ngClass]=\"{\n                        smallThumbnail: isTile,\n                        'exif-orientation-2': orientation === 2,\n                        'exif-orientation-3': orientation === 3,\n                        'exif-orientation-4': orientation === 4,\n                        'exif-orientation-5': orientation === 5,\n                        'exif-orientation-6': orientation === 6,\n                        'exif-orientation-7': orientation === 7,\n                        'exif-orientation-8': orientation === 8,\n                    }\"\n                />\n            }\n\n            @if (fallback && imageFallback) {\n                <img\n                    #img\n                    [id]=\"id + '-image-fallback'\"\n                    (error)=\"imageFallback = undefined\"\n                    [src]=\"imageFallback\"\n                    [alt]=\"imageAlt\"\n                    [ngClass]=\"{\n                        smallThumbnail: isTile,\n                        'exif-orientation-2': orientation === 2,\n                        'exif-orientation-3': orientation === 3,\n                        'exif-orientation-4': orientation === 4,\n                        'exif-orientation-5': orientation === 5,\n                        'exif-orientation-6': orientation === 6,\n                        'exif-orientation-7': orientation === 7,\n                        'exif-orientation-8': orientation === 8,\n                    }\"\n                />\n            }\n\n            @if (fallback && !imageFallback) {\n                <i class=\"fallback-img-color far fa-image\"> </i>\n            }\n        </div>\n    }\n\n    @if (hasAction) {\n        <div\n            [id]=\"id + '-action-icon-container'\"\n            class=\"action-icon-container action-icon-container--{{ size }}\"\n        >\n            <span\n                [id]=\"id + '-action-icon'\"\n                [class]=\"actionIconClass\"\n                aria-hidden=\"true\"\n            >\n            </span>\n        </div>\n    }\n\n    @if (!imageSource && !imageFallback) {\n        <div\n            [id]=\"id + '-icon-container'\"\n            class=\"icon-container icon-container--{{ size }}\"\n            [ngClass]=\"{ 'image-container--rounded': !isBrand }\"\n        >\n            <span\n                [id]=\"id + '-icon'\"\n                [class]=\"iconClass\"\n                aria-hidden=\"true\"\n            >\n            </span>\n        </div>\n    }\n\n    <ng-content></ng-content>\n</div>\n", styles: [":host{display:inline-block}.thumbnail-container{color:#fff;position:relative;text-align:center}.thumbnail-container--large{font-size:50px;height:100px;width:100px}.thumbnail-container--large.thumbnail-container--brand{width:200px}.thumbnail-container--medium{font-size:40px;height:70px;width:70px}.thumbnail-container--medium.thumbnail-container--brand{width:140px}.thumbnail-container--small{font-size:22px;height:40px;width:40px}.thumbnail-container--small.thumbnail-container--brand{width:80px}.thumbnail-container--with-action{cursor:pointer}.action-icon-container{background-color:#428bca;border-radius:50%;bottom:0;position:absolute;right:0}.action-icon-container--large,.action-icon-container--medium{font-size:10pt;height:25px;padding:3px;width:25px}.action-icon-container--small{font-size:6pt;height:16px;padding:2px;width:16px}.icon-container,.image-container{align-items:center;height:100%;overflow:hidden;width:100%}.icon-container--rounded,.image-container--rounded{border-radius:50%}.smallThumbnail{height:40px!important}.icon-container{background-color:#ccc;color:#fff}.icon-container--large{line-height:98px}.icon-container--medium{line-height:68px}.icon-container--small{line-height:38px}.image-container{align-items:center;background-color:#ccc;display:flex;justify-content:center}.image-container img{width:100%}.image-container img.exif-orientation-2{transform:rotateY(180deg)}.image-container img.exif-orientation-3{transform:rotate(180deg)}.image-container img.exif-orientation-4{transform:rotate(180deg) rotateY(180deg)}.image-container img.exif-orientation-5{transform:rotate(270deg) rotateY(180deg)}.image-container img.exif-orientation-6{transform:rotate(90deg)}.image-container img.exif-orientation-7{transform:rotate(90deg) rotateY(180deg)}.image-container img.exif-orientation-8{transform:rotate(270deg)}.fallback-img-color{color:#fff}\n"] }]
-        }], ctorParameters: () => [{ type: ThumbnailService }], propDecorators: { imgEl: [{
+        }], propDecorators: { imgEl: [{
                 type: ViewChild,
                 args: ['img', { static: false }]
             }], id: [{

package/fesm2022/seniorsistemas-angular-components-thumbnail.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"seniorsistemas-angular-components-thumbnail.mjs","sources":["../../projects/angular-components/thumbnail/src/lib/thumbnail/thumbnail.service.ts","../../projects/angular-components/thumbnail/src/lib/thumbnail/thumbnail.component.ts","../../projects/angular-components/thumbnail/src/lib/thumbnail/thumbnail.component.html","../../projects/angular-components/thumbnail/src/lib/thumbnail/thumbnail.module.ts","../../projects/angular-components/thumbnail/src/seniorsistemas-angular-components-thumbnail.ts"],"sourcesContent":["import { Injectable } from \"@angular/core\";\n\n@Injectable()\nexport class ThumbnailService {\n    public getBinaryFile(img: HTMLImageElement) {\n        return new Promise(resolve => {\n            const getOrientation = this.getOrientation.bind(this);\n\n            let http: XMLHttpRequest | null = new XMLHttpRequest();\n            http.addEventListener(\"load\", () => {\n                if (http?.readyState === 4 && (http.status == 200 || http.status === 0)) {\n                    const orientation = getOrientation(http.response);\n                    http = null;\n                    resolve(orientation);\n                }\n            });\n\n            http.addEventListener(\"error\", () => {\n                http = null;\n                throw new Error(\"Não foi possível carregar a imagem\");\n            });\n\n            http.open(\"GET\", img.src, true);\n            http.responseType = \"arraybuffer\";\n            http.send(null);\n        });\n    }\n\n    /**\n     * Retorna a tag da orientação EXIF {-1} Não definido, {-2} Não é formato JPEG, {1, 2, 3, 4, 5, 6, 7, 8} valores da orientação.\n     */\n    private getOrientation(file: ArrayBuffer): number {\n        const view = new DataView(file);\n\n        if (view.getUint16(0, false) != 0xffd8) return -2; // not jpeg\n\n        const length = view.byteLength;\n        let offset = 2;\n\n        while (offset < length) {\n            const marker = view.getUint16(offset, false);\n            offset += 2;\n\n            if (marker == 0xffe1) {\n                if (view.getUint32((offset += 2), false) != 0x45786966) {\n                    return -1; // not defined\n                }\n                const little = view.getUint16((offset += 6), false) == 0x4949;\n                offset += view.getUint32(offset + 4, little);\n                const tags = view.getUint16(offset, little);\n                offset += 2;\n\n                for (let i = 0; i < tags; i++)\n                    if (view.getUint16(offset + i * 12, little) == 0x0112) return view.getUint16(offset + i * 12 + 8, little);\n            // tslint:disable-next-line: no-bitwise\n            } else if ((marker & 0xff00) != 0xff00) break;\n            else offset += view.getUint16(offset, false);\n        }\n        return -1; // not defined\n    }\n}\n","import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';\n\nimport { from, Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { ThumbnailSize } from './thumbnail-size';\nimport { ThumbnailService } from './thumbnail.service';\n\n/**\n * @description Componente de miniatura de imagem com suporte a imagem de fallback,\n * ícone de ação sobrepôsto, orientação automática e diferentes tamanhos predefinidos.\n *\n * @example\n * ```html\n * <s-thumbnail\n *   [imageSource]=\"urlDaImagem\"\n *   size=\"large\"\n *   iconClass=\"fas fa-user\" />\n * ```\n *\n * @category Data\n */\n@Component({\n    selector: 's-thumbnail',\n    templateUrl: './thumbnail.component.html',\n    styleUrls: ['./thumbnail.component.scss'],\n})\nexport class ThumbnailComponent implements AfterViewInit, OnDestroy {\n    public static nextId = 0;\n    public fallback = false;\n    public orientation = 0;\n\n    @ViewChild('img', { static: false })\n    public imgEl: ElementRef | null = null;\n\n    /** @description Identificador único do componente no DOM. Gerado automaticamente se não informado. */\n    @Input()\n    public id = `s-thumbnail-${ThumbnailComponent.nextId++}`;\n\n    /** @description Tamanho da miniatura: `'small'`, `'medium'`, `'large'`, etc. @default 'medium' */\n    @Input()\n    public size: ThumbnailSize = 'medium';\n\n    /** @description URL da imagem principal. */\n    @Input()\n    public imageSource?: string;\n\n    /** @description URL da imagem de fallback exibida quando a principal falha ao carregar. */\n    @Input()\n    public imageFallback?: string;\n\n    /** @description Texto alternativo (atributo `alt`) da imagem. */\n    @Input()\n    public imageAlt?: string;\n\n    /** @description Classe do ícone exibido quando não há imagem disponível. @default 'far fa-image' */\n    @Input()\n    public iconClass = 'far fa-image';\n\n    /** @description Habilita a exibição de um botão de ação sobrepôsto. @default false */\n    @Input()\n    public hasAction = false;\n\n    /** @description Classe do ícone do botão de ação. @default 'fas fa-camera' */\n    @Input()\n    public actionIconClass = 'fas fa-camera';\n\n    /** @description Aplica estilo de tile ao thumbnail. @default false */\n    @Input()\n    public isTile = false;\n\n    /** @description Aplica estilo de marca ao thumbnail. @default false */\n    @Input()\n    public isBrand = false;\n\n    private ngUnsubscribe = new Subject<void>();\n\n    constructor(private readonly thumbnailService: ThumbnailService) {}\n\n    public ngOnDestroy(): void {\n        this.ngUnsubscribe.next();\n        this.ngUnsubscribe.complete();\n    }\n\n    public ngAfterViewInit(): void {\n        if (this.imgEl) {\n            this.imgEl.nativeElement.addEventListener('load', () => {\n                from(this.thumbnailService.getBinaryFile(this.imgEl?.nativeElement))\n                    .pipe(takeUntil(this.ngUnsubscribe))\n                    .subscribe((value: unknown) => {\n                        if (typeof value === 'number') {\n                            this.orientation = value;\n                        } else {\n                            console.error('Valor retornado não é um número:', value);\n                        }\n                    });\n            });\n        }\n    }\n}\n\n","<div\n    [id]=\"id\"\n    class=\"thumbnail-container thumbnail-container--{{ size }}\"\n    [ngClass]=\"{\n        'thumbnail-container--with-action': hasAction,\n        'thumbnail-container--brand': isBrand,\n    }\"\n>\n    @if (imageSource || imageFallback) {\n        <div\n            [id]=\"id + '-image-container'\"\n            class=\"image-container\"\n            [ngClass]=\"{\n                'image-container--rounded': !isBrand,\n            }\"\n        >\n            @if (!fallback) {\n                <img\n                    #img\n                    [id]=\"id + '-image'\"\n                    (error)=\"fallback = true\"\n                    [src]=\"imageSource\"\n                    [alt]=\"imageAlt\"\n                    [ngClass]=\"{\n                        smallThumbnail: isTile,\n                        'exif-orientation-2': orientation === 2,\n                        'exif-orientation-3': orientation === 3,\n                        'exif-orientation-4': orientation === 4,\n                        'exif-orientation-5': orientation === 5,\n                        'exif-orientation-6': orientation === 6,\n                        'exif-orientation-7': orientation === 7,\n                        'exif-orientation-8': orientation === 8,\n                    }\"\n                />\n            }\n\n            @if (fallback && imageFallback) {\n                <img\n                    #img\n                    [id]=\"id + '-image-fallback'\"\n                    (error)=\"imageFallback = undefined\"\n                    [src]=\"imageFallback\"\n                    [alt]=\"imageAlt\"\n                    [ngClass]=\"{\n                        smallThumbnail: isTile,\n                        'exif-orientation-2': orientation === 2,\n                        'exif-orientation-3': orientation === 3,\n                        'exif-orientation-4': orientation === 4,\n                        'exif-orientation-5': orientation === 5,\n                        'exif-orientation-6': orientation === 6,\n                        'exif-orientation-7': orientation === 7,\n                        'exif-orientation-8': orientation === 8,\n                    }\"\n                />\n            }\n\n            @if (fallback && !imageFallback) {\n                <i class=\"fallback-img-color far fa-image\"> </i>\n            }\n        </div>\n    }\n\n    @if (hasAction) {\n        <div\n            [id]=\"id + '-action-icon-container'\"\n            class=\"action-icon-container action-icon-container--{{ size }}\"\n        >\n            <span\n                [id]=\"id + '-action-icon'\"\n                [class]=\"actionIconClass\"\n                aria-hidden=\"true\"\n            >\n            </span>\n        </div>\n    }\n\n    @if (!imageSource && !imageFallback) {\n        <div\n            [id]=\"id + '-icon-container'\"\n            class=\"icon-container icon-container--{{ size }}\"\n            [ngClass]=\"{ 'image-container--rounded': !isBrand }\"\n        >\n            <span\n                [id]=\"id + '-icon'\"\n                [class]=\"iconClass\"\n                aria-hidden=\"true\"\n            >\n            </span>\n        </div>\n    }\n\n    <ng-content></ng-content>\n</div>\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\n\nimport { ThumbnailComponent } from \"./thumbnail.component\";\nimport { ThumbnailService } from \"./thumbnail.service\";\n\n@NgModule({\n    imports: [CommonModule],\n    declarations: [ThumbnailComponent],\n    exports: [ThumbnailComponent],\n    providers: [ThumbnailService],\n})\nexport class ThumbnailModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.ThumbnailService"],"mappings":"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"}
+{"version":3,"file":"seniorsistemas-angular-components-thumbnail.mjs","sources":["../../projects/angular-components/thumbnail/src/lib/thumbnail/thumbnail.service.ts","../../projects/angular-components/thumbnail/src/lib/thumbnail/thumbnail.component.ts","../../projects/angular-components/thumbnail/src/lib/thumbnail/thumbnail.component.html","../../projects/angular-components/thumbnail/src/lib/thumbnail/thumbnail.module.ts","../../projects/angular-components/thumbnail/src/seniorsistemas-angular-components-thumbnail.ts"],"sourcesContent":["import { Injectable } from \"@angular/core\";\n\n@Injectable()\nexport class ThumbnailService {\n    public getBinaryFile(img: HTMLImageElement) {\n        return new Promise(resolve => {\n            const getOrientation = this.getOrientation.bind(this);\n\n            let http: XMLHttpRequest | null = new XMLHttpRequest();\n            http.addEventListener(\"load\", () => {\n                if (http?.readyState === 4 && (http.status == 200 || http.status === 0)) {\n                    const orientation = getOrientation(http.response);\n                    http = null;\n                    resolve(orientation);\n                }\n            });\n\n            http.addEventListener(\"error\", () => {\n                http = null;\n                throw new Error(\"Não foi possível carregar a imagem\");\n            });\n\n            http.open(\"GET\", img.src, true);\n            http.responseType = \"arraybuffer\";\n            http.send(null);\n        });\n    }\n\n    /**\n     * Retorna a tag da orientação EXIF {-1} Não definido, {-2} Não é formato JPEG, {1, 2, 3, 4, 5, 6, 7, 8} valores da orientação.\n     */\n    private getOrientation(file: ArrayBuffer): number {\n        const view = new DataView(file);\n\n        if (view.getUint16(0, false) != 0xffd8) return -2; // not jpeg\n\n        const length = view.byteLength;\n        let offset = 2;\n\n        while (offset < length) {\n            const marker = view.getUint16(offset, false);\n            offset += 2;\n\n            if (marker == 0xffe1) {\n                if (view.getUint32((offset += 2), false) != 0x45786966) {\n                    return -1; // not defined\n                }\n                const little = view.getUint16((offset += 6), false) == 0x4949;\n                offset += view.getUint32(offset + 4, little);\n                const tags = view.getUint16(offset, little);\n                offset += 2;\n\n                for (let i = 0; i < tags; i++)\n                    if (view.getUint16(offset + i * 12, little) == 0x0112) return view.getUint16(offset + i * 12 + 8, little);\n            // tslint:disable-next-line: no-bitwise\n            } else if ((marker & 0xff00) != 0xff00) break;\n            else offset += view.getUint16(offset, false);\n        }\n        return -1; // not defined\n    }\n}\n","import { AfterViewInit, Component, ElementRef, Input, OnDestroy, ViewChild, inject } from '@angular/core';\n\nimport { from, Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { ThumbnailSize } from './thumbnail-size';\nimport { ThumbnailService } from './thumbnail.service';\n\n/**\n * @description Componente de miniatura de imagem com suporte a imagem de fallback,\n * ícone de ação sobrepôsto, orientação automática e diferentes tamanhos predefinidos.\n *\n * @example\n * ```html\n * <s-thumbnail\n *   [imageSource]=\"urlDaImagem\"\n *   size=\"large\"\n *   iconClass=\"fas fa-user\" />\n * ```\n *\n * @category Data\n */\n@Component({\n    selector: 's-thumbnail',\n    templateUrl: './thumbnail.component.html',\n    styleUrls: ['./thumbnail.component.scss'],\n})\nexport class ThumbnailComponent implements AfterViewInit, OnDestroy {\n    private readonly thumbnailService = inject(ThumbnailService);\n\n    public static nextId = 0;\n    public fallback = false;\n    public orientation = 0;\n\n    @ViewChild('img', { static: false })\n    public imgEl: ElementRef | null = null;\n\n    /** @description Identificador único do componente no DOM. Gerado automaticamente se não informado. */\n    @Input()\n    public id = `s-thumbnail-${ThumbnailComponent.nextId++}`;\n\n    /** @description Tamanho da miniatura: `'small'`, `'medium'`, `'large'`, etc. @default 'medium' */\n    @Input()\n    public size: ThumbnailSize = 'medium';\n\n    /** @description URL da imagem principal. */\n    @Input()\n    public imageSource?: string;\n\n    /** @description URL da imagem de fallback exibida quando a principal falha ao carregar. */\n    @Input()\n    public imageFallback?: string;\n\n    /** @description Texto alternativo (atributo `alt`) da imagem. */\n    @Input()\n    public imageAlt?: string;\n\n    /** @description Classe do ícone exibido quando não há imagem disponível. @default 'far fa-image' */\n    @Input()\n    public iconClass = 'far fa-image';\n\n    /** @description Habilita a exibição de um botão de ação sobrepôsto. @default false */\n    @Input()\n    public hasAction = false;\n\n    /** @description Classe do ícone do botão de ação. @default 'fas fa-camera' */\n    @Input()\n    public actionIconClass = 'fas fa-camera';\n\n    /** @description Aplica estilo de tile ao thumbnail. @default false */\n    @Input()\n    public isTile = false;\n\n    /** @description Aplica estilo de marca ao thumbnail. @default false */\n    @Input()\n    public isBrand = false;\n\n    private ngUnsubscribe = new Subject<void>();\n\n    public ngOnDestroy(): void {\n        this.ngUnsubscribe.next();\n        this.ngUnsubscribe.complete();\n    }\n\n    public ngAfterViewInit(): void {\n        if (this.imgEl) {\n            this.imgEl.nativeElement.addEventListener('load', () => {\n                from(this.thumbnailService.getBinaryFile(this.imgEl?.nativeElement))\n                    .pipe(takeUntil(this.ngUnsubscribe))\n                    .subscribe((value: unknown) => {\n                        if (typeof value === 'number') {\n                            this.orientation = value;\n                        } else {\n                            console.error('Valor retornado não é um número:', value);\n                        }\n                    });\n            });\n        }\n    }\n}\n\n","<div\n    [id]=\"id\"\n    class=\"thumbnail-container thumbnail-container--{{ size }}\"\n    [ngClass]=\"{\n        'thumbnail-container--with-action': hasAction,\n        'thumbnail-container--brand': isBrand,\n    }\"\n>\n    @if (imageSource || imageFallback) {\n        <div\n            [id]=\"id + '-image-container'\"\n            class=\"image-container\"\n            [ngClass]=\"{\n                'image-container--rounded': !isBrand,\n            }\"\n        >\n            @if (!fallback) {\n                <img\n                    #img\n                    [id]=\"id + '-image'\"\n                    (error)=\"fallback = true\"\n                    [src]=\"imageSource\"\n                    [alt]=\"imageAlt\"\n                    [ngClass]=\"{\n                        smallThumbnail: isTile,\n                        'exif-orientation-2': orientation === 2,\n                        'exif-orientation-3': orientation === 3,\n                        'exif-orientation-4': orientation === 4,\n                        'exif-orientation-5': orientation === 5,\n                        'exif-orientation-6': orientation === 6,\n                        'exif-orientation-7': orientation === 7,\n                        'exif-orientation-8': orientation === 8,\n                    }\"\n                />\n            }\n\n            @if (fallback && imageFallback) {\n                <img\n                    #img\n                    [id]=\"id + '-image-fallback'\"\n                    (error)=\"imageFallback = undefined\"\n                    [src]=\"imageFallback\"\n                    [alt]=\"imageAlt\"\n                    [ngClass]=\"{\n                        smallThumbnail: isTile,\n                        'exif-orientation-2': orientation === 2,\n                        'exif-orientation-3': orientation === 3,\n                        'exif-orientation-4': orientation === 4,\n                        'exif-orientation-5': orientation === 5,\n                        'exif-orientation-6': orientation === 6,\n                        'exif-orientation-7': orientation === 7,\n                        'exif-orientation-8': orientation === 8,\n                    }\"\n                />\n            }\n\n            @if (fallback && !imageFallback) {\n                <i class=\"fallback-img-color far fa-image\"> </i>\n            }\n        </div>\n    }\n\n    @if (hasAction) {\n        <div\n            [id]=\"id + '-action-icon-container'\"\n            class=\"action-icon-container action-icon-container--{{ size }}\"\n        >\n            <span\n                [id]=\"id + '-action-icon'\"\n                [class]=\"actionIconClass\"\n                aria-hidden=\"true\"\n            >\n            </span>\n        </div>\n    }\n\n    @if (!imageSource && !imageFallback) {\n        <div\n            [id]=\"id + '-icon-container'\"\n            class=\"icon-container icon-container--{{ size }}\"\n            [ngClass]=\"{ 'image-container--rounded': !isBrand }\"\n        >\n            <span\n                [id]=\"id + '-icon'\"\n                [class]=\"iconClass\"\n                aria-hidden=\"true\"\n            >\n            </span>\n        </div>\n    }\n\n    <ng-content></ng-content>\n</div>\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\n\nimport { ThumbnailComponent } from \"./thumbnail.component\";\nimport { ThumbnailService } from \"./thumbnail.service\";\n\n@NgModule({\n    imports: [CommonModule],\n    declarations: [ThumbnailComponent],\n    exports: [ThumbnailComponent],\n    providers: [ThumbnailService],\n})\nexport class ThumbnailModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, HostListener, Output, Directive, NgModule } from '@angular/core';
+import { Injectable, EventEmitter, inject, Component, Input, HostListener, ApplicationRef, ComponentFactoryResolver, Injector, ChangeDetectorRef, Output, ElementRef, 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 * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
 class TieredMenuService {
@@ -83,16 +83,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }] });
 
 class TieredMenuItemComponent {
-    _tieredMenuEventService;
+    _tieredMenuEventService = inject(TieredMenuEventService);
     item;
     focused = false;
     highlight = false;
     triggerEvent = 'click';
     closeOnClick = false;
     _showTimeout;
-    constructor(_tieredMenuEventService) {
-        this._tieredMenuEventService = _tieredMenuEventService;
-    }
     onClick() {
         if (this.item.disabled)
             return;
@@ -120,13 +117,13 @@ class TieredMenuItemComponent {
     onMouseLeave() {
         window.clearTimeout(this._showTimeout);
     }
-    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    role=\"menuitem\"\n    [tabindex]=\"focused && !item.disabled ? 0 : -1\"\n    [attr.aria-disabled]=\"item.disabled || null\"\n    [attr.aria-haspopup]=\"item.submenu ? 'menu' : null\"\n    [attr.aria-expanded]=\"item.submenu ? item.isOpen : null\"\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: [], 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    role=\"menuitem\"\n    [tabindex]=\"focused && !item.disabled ? 0 : -1\"\n    [attr.aria-disabled]=\"item.disabled || null\"\n    [attr.aria-haspopup]=\"item.submenu ? 'menu' : null\"\n    [attr.aria-expanded]=\"item.submenu ? item.isOpen : null\"\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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 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    role=\"menuitem\"\n    [tabindex]=\"focused && !item.disabled ? 0 : -1\"\n    [attr.aria-disabled]=\"item.disabled || null\"\n    [attr.aria-haspopup]=\"item.submenu ? 'menu' : null\"\n    [attr.aria-expanded]=\"item.submenu ? item.isOpen : null\"\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: [{
+        }], propDecorators: { item: [{
                 type: Input,
                 args: [{ required: true }]
             }], focused: [{
@@ -161,8 +158,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }] });
 
 class TieredMenuNestedComponent {
-    tieredMenuService;
-    _tieredMenuEventService;
+    tieredMenuService = inject(TieredMenuService);
+    _tieredMenuEventService = inject(TieredMenuEventService);
     items;
     top = 0;
     left = 0;
@@ -205,10 +202,6 @@ class TieredMenuNestedComponent {
                 break;
         }
     }
-    constructor(tieredMenuService, _tieredMenuEventService) {
-        this.tieredMenuService = tieredMenuService;
-        this._tieredMenuEventService = _tieredMenuEventService;
-    }
     ngOnInit() {
         this.tieredMenuService.currentItems = this.items;
         this._subscribeEvents();
@@ -312,13 +305,13 @@ class TieredMenuNestedComponent {
             }
         });
     }
-    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" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuNestedComponent, deps: [], 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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.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.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: [{
+        }], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize']
             }], onDocumentClick: [{
@@ -330,12 +323,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 
 class TieredMenuComponent {
-    _appRef;
-    _componentFactoryResolver;
-    _injector;
-    _changeDetectorRef;
-    tieredMenuService;
-    _tieredMenuEventService;
+    _appRef = inject(ApplicationRef);
+    _componentFactoryResolver = inject(ComponentFactoryResolver);
+    _injector = inject(Injector);
+    _changeDetectorRef = inject(ChangeDetectorRef);
+    tieredMenuService = inject(TieredMenuService);
+    _tieredMenuEventService = inject(TieredMenuEventService);
     ariaLabel;
     items = [];
     top = 0;
@@ -346,14 +339,6 @@ class TieredMenuComponent {
     _menuDivElement = null;
     _unsubscribe$ = new Subject();
     destroyRequest = new EventEmitter();
-    constructor(_appRef, _componentFactoryResolver, _injector, _changeDetectorRef, tieredMenuService, _tieredMenuEventService) {
-        this._appRef = _appRef;
-        this._componentFactoryResolver = _componentFactoryResolver;
-        this._injector = _injector;
-        this._changeDetectorRef = _changeDetectorRef;
-        this.tieredMenuService = tieredMenuService;
-        this._tieredMenuEventService = _tieredMenuEventService;
-    }
     onResize() {
         this._tieredMenuEventService.closeAllMenusEvent.emit();
     }
@@ -630,13 +615,13 @@ class TieredMenuComponent {
             }
         });
     }
-    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", inputs: { ariaLabel: "ariaLabel" }, outputs: { destroyRequest: "destroyRequest" }, host: { listeners: { "window:resize": "onResize()", "document:click": "onDocumentClick($event)", "document:keydown": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div\n    class=\"menu\"\n    role=\"application\"\n    [attr.aria-label]=\"ariaLabel\"\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            fieldUtils.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                fieldUtils.triggerEvent=\"hover\"\n                [closeOnClick]=\"false\"\n            />\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: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuComponent, selector: "s-tiered-menu", inputs: { ariaLabel: "ariaLabel" }, outputs: { destroyRequest: "destroyRequest" }, host: { listeners: { "window:resize": "onResize()", "document:click": "onDocumentClick($event)", "document:keydown": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div\n    class=\"menu\"\n    role=\"application\"\n    [attr.aria-label]=\"ariaLabel\"\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            fieldUtils.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                fieldUtils.triggerEvent=\"hover\"\n                [closeOnClick]=\"false\"\n            />\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: i1.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.14", ngImport: i0, type: TieredMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 's-tiered-menu', template: "<div\n    class=\"menu\"\n    role=\"application\"\n    [attr.aria-label]=\"ariaLabel\"\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            fieldUtils.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                fieldUtils.triggerEvent=\"hover\"\n                [closeOnClick]=\"false\"\n            />\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: { ariaLabel: [{
+        }], propDecorators: { ariaLabel: [{
                 type: Input
             }], destroyRequest: [{
                 type: Output
@@ -665,14 +650,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * @category Navegação
  */
 class TieredMenuDirective {
-    _elementRef;
-    _appRef;
-    _componentFactoryResolver;
-    _injector;
-    _tieredMenuEventService;
-    _tieredMenuService;
-    _tieredMenuGlobalService;
-    _changeDetectorRef;
+    _elementRef = inject(ElementRef);
+    _appRef = inject(ApplicationRef);
+    _componentFactoryResolver = inject(ComponentFactoryResolver);
+    _injector = inject(Injector);
+    _tieredMenuEventService = inject(TieredMenuEventService);
+    _tieredMenuService = inject(TieredMenuService);
+    _tieredMenuGlobalService = inject(TieredMenuGlobalService);
+    _changeDetectorRef = inject(ChangeDetectorRef);
     /**
      * @description Lista de itens exibidos no menu. Cada item pode conter um array de `children`
      * para criar submenus aninhados, além de propriedades como `label`, `icon`,
@@ -707,16 +692,6 @@ class TieredMenuDirective {
         this._setMenuPosition();
         this._componentRef?.hostView.detectChanges();
     });
-    constructor(_elementRef, _appRef, _componentFactoryResolver, _injector, _tieredMenuEventService, _tieredMenuService, _tieredMenuGlobalService, _changeDetectorRef) {
-        this._elementRef = _elementRef;
-        this._appRef = _appRef;
-        this._componentFactoryResolver = _componentFactoryResolver;
-        this._injector = _injector;
-        this._tieredMenuEventService = _tieredMenuEventService;
-        this._tieredMenuService = _tieredMenuService;
-        this._tieredMenuGlobalService = _tieredMenuGlobalService;
-        this._changeDetectorRef = _changeDetectorRef;
-    }
     ngOnInit() {
         this._itemsAreValid = !!this.items?.length;
         if (!this._itemsAreValid)
@@ -888,7 +863,7 @@ 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.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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuDirective, deps: [], 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", ariaLabel: "ariaLabel" }, outputs: { tieredMenuOpened: "tieredMenuOpened", tieredMenuClosed: "tieredMenuClosed" }, host: { listeners: { "click": "onClick($event)" } }, providers: [TieredMenuEventService, TieredMenuService], usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuDirective, decorators: [{
@@ -897,7 +872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: '[sTieredMenu]',
                     providers: [TieredMenuEventService, TieredMenuService],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ApplicationRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: TieredMenuEventService }, { type: TieredMenuService }, { type: TieredMenuGlobalService }, { type: i0.ChangeDetectorRef }], propDecorators: { items: [{
+        }], propDecorators: { items: [{
                 type: Input
             }], focusedItem: [{
                 type: Input