npm - @seniorsistemas/angular-components - Versions diffs - 19.7.3-bugfix-ptfgap-1271-ddfd6e7b → 19.7.4 - Mend

@seniorsistemas/angular-components 19.7.3-bugfix-ptfgap-1271-ddfd6e7b → 19.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (646) hide show

package/fesm2022/seniorsistemas-angular-components-empty-state.mjs CHANGED Viewed

@@ -1,9 +1,7 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, inject, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { CookieService } from 'ngx-cookie-service';
-import * as i1 from '@seniorsistemas/angular-components/button';
-import { ButtonModule } from '@seniorsistemas/angular-components/button';
+import { ButtonComponent } from '@seniorsistemas/angular-components/button';
 /**
  * @description Componente de estado vazio exibido quando não há conteúdo para mostrar.
@@ -82,11 +80,11 @@ class EmptyStateComponent {
      */
     secondaryAction = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: EmptyStateComponent, selector: "s-empty-state", inputs: { id: "id", title: "title", iconClass: "iconClass", description: "description", showPrimaryAction: "showPrimaryAction", showSecondaryAction: "showSecondaryAction", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel", primaryModel: "primaryModel" }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, ngImport: i0, template: "<div\n    [id]=\"id\"\n    class=\"empty-state\"\n>\n    <div\n        [id]=\"id + '-icon'\"\n        class=\"icon\"\n    >\n        <i\n            [attr.class]=\"iconClass ? iconClass : 'fa fa-cogs'\"\n            aria-hidden=\"true\"\n        ></i>\n    </div>\n    <div\n        [id]=\"id + '-title'\"\n        class=\"title\"\n    >\n        {{ title }}\n    </div>\n\n    @if (description) {\n        <div\n            [id]=\"id + '-description'\"\n            class=\"description\"\n        >\n            <p>{{ description }}</p>\n        </div>\n    }\n    @if (showPrimaryAction && primaryActionLabel) {\n        <div\n            [id]=\"id + '-actions'\"\n            class=\"actions\"\n        >\n            <s-button\n                [id]=\"id + '-primary-action'\"\n                type=\"button\"\n                [label]=\"primaryActionLabel\"\n                [menuOptions]=\"primaryModel\"\n                (clicked)=\"primaryAction.next()\"\n            ></s-button>\n            @if (showSecondaryAction && secondaryActionLabel) {\n                <s-button\n                    [id]=\"id + '-secondary-action'\"\n                    id=\"secondaryAction\"\n                    type=\"button\"\n                    [label]=\"secondaryActionLabel\"\n                    priority=\"link\"\n                    (clicked)=\"secondaryAction.next()\"\n                ></s-button>\n            }\n        </div>\n    }\n</div>\n", styles: [".empty-state{width:100%;text-align:center}.empty-state .icon{color:#d8d8d8;font-size:6em}.empty-state .title{font-weight:700;margin-bottom:10px}.empty-state .description{margin-bottom:15px;color:#999;padding:0 20px;text-align:center}.empty-state .description p{margin:auto;max-width:400px;max-height:80px;overflow:hidden}.empty-state .actions{text-align:center;width:100%}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: EmptyStateComponent, isStandalone: true, selector: "s-empty-state", inputs: { id: "id", title: "title", iconClass: "iconClass", description: "description", showPrimaryAction: "showPrimaryAction", showSecondaryAction: "showSecondaryAction", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel", primaryModel: "primaryModel" }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, ngImport: i0, template: "<div\n    [id]=\"id\"\n    class=\"w-full text-center\"\n>\n    <div\n        [id]=\"id + '-icon'\"\n        class=\"text-[#d8d8d8] text-[6em]\"\n    >\n        <i\n            [attr.class]=\"iconClass ? iconClass : 'fa fa-cogs'\"\n            aria-hidden=\"true\"\n        ></i>\n    </div>\n    <div\n        [id]=\"id + '-title'\"\n        class=\"font-bold mb-[10px]\"\n    >\n        {{ title }}\n    </div>\n\n    @if (description) {\n        <div\n            [id]=\"id + '-description'\"\n            class=\"mb-[15px] text-[#999999] px-5 text-center\"\n        >\n            <p class=\"mx-auto max-w-[400px] max-h-[80px] overflow-hidden\">{{ description }}</p>\n        </div>\n    }\n    @if (showPrimaryAction && primaryActionLabel) {\n        <div\n            [id]=\"id + '-actions'\"\n            class=\"text-center w-full\"\n        >\n            <s-button\n                [id]=\"id + '-primary-action'\"\n                type=\"button\"\n                [label]=\"primaryActionLabel\"\n                [menuOptions]=\"primaryModel\"\n                (clicked)=\"primaryAction.next()\"\n            ></s-button>\n            @if (showSecondaryAction && secondaryActionLabel) {\n                <s-button\n                    [id]=\"id + '-secondary-action'\"\n                    id=\"secondaryAction\"\n                    type=\"button\"\n                    [label]=\"secondaryActionLabel\"\n                    priority=\"link\"\n                    (clicked)=\"secondaryAction.next()\"\n                ></s-button>\n            }\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmptyStateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-empty-state', template: "<div\n    [id]=\"id\"\n    class=\"empty-state\"\n>\n    <div\n        [id]=\"id + '-icon'\"\n        class=\"icon\"\n    >\n        <i\n            [attr.class]=\"iconClass ? iconClass : 'fa fa-cogs'\"\n            aria-hidden=\"true\"\n        ></i>\n    </div>\n    <div\n        [id]=\"id + '-title'\"\n        class=\"title\"\n    >\n        {{ title }}\n    </div>\n\n    @if (description) {\n        <div\n            [id]=\"id + '-description'\"\n            class=\"description\"\n        >\n            <p>{{ description }}</p>\n        </div>\n    }\n    @if (showPrimaryAction && primaryActionLabel) {\n        <div\n            [id]=\"id + '-actions'\"\n            class=\"actions\"\n        >\n            <s-button\n                [id]=\"id + '-primary-action'\"\n                type=\"button\"\n                [label]=\"primaryActionLabel\"\n                [menuOptions]=\"primaryModel\"\n                (clicked)=\"primaryAction.next()\"\n            ></s-button>\n            @if (showSecondaryAction && secondaryActionLabel) {\n                <s-button\n                    [id]=\"id + '-secondary-action'\"\n                    id=\"secondaryAction\"\n                    type=\"button\"\n                    [label]=\"secondaryActionLabel\"\n                    priority=\"link\"\n                    (clicked)=\"secondaryAction.next()\"\n                ></s-button>\n            }\n        </div>\n    }\n</div>\n", styles: [".empty-state{width:100%;text-align:center}.empty-state .icon{color:#d8d8d8;font-size:6em}.empty-state .title{font-weight:700;margin-bottom:10px}.empty-state .description{margin-bottom:15px;color:#999;padding:0 20px;text-align:center}.empty-state .description p{margin:auto;max-width:400px;max-height:80px;overflow:hidden}.empty-state .actions{text-align:center;width:100%}\n"] }]
+            args: [{ selector: 's-empty-state', standalone: true, imports: [ButtonComponent], template: "<div\n    [id]=\"id\"\n    class=\"w-full text-center\"\n>\n    <div\n        [id]=\"id + '-icon'\"\n        class=\"text-[#d8d8d8] text-[6em]\"\n    >\n        <i\n            [attr.class]=\"iconClass ? iconClass : 'fa fa-cogs'\"\n            aria-hidden=\"true\"\n        ></i>\n    </div>\n    <div\n        [id]=\"id + '-title'\"\n        class=\"font-bold mb-[10px]\"\n    >\n        {{ title }}\n    </div>\n\n    @if (description) {\n        <div\n            [id]=\"id + '-description'\"\n            class=\"mb-[15px] text-[#999999] px-5 text-center\"\n        >\n            <p class=\"mx-auto max-w-[400px] max-h-[80px] overflow-hidden\">{{ description }}</p>\n        </div>\n    }\n    @if (showPrimaryAction && primaryActionLabel) {\n        <div\n            [id]=\"id + '-actions'\"\n            class=\"text-center w-full\"\n        >\n            <s-button\n                [id]=\"id + '-primary-action'\"\n                type=\"button\"\n                [label]=\"primaryActionLabel\"\n                [menuOptions]=\"primaryModel\"\n                (clicked)=\"primaryAction.next()\"\n            ></s-button>\n            @if (showSecondaryAction && secondaryActionLabel) {\n                <s-button\n                    [id]=\"id + '-secondary-action'\"\n                    id=\"secondaryAction\"\n                    type=\"button\"\n                    [label]=\"secondaryActionLabel\"\n                    priority=\"link\"\n                    (clicked)=\"secondaryAction.next()\"\n                ></s-button>\n            }\n        </div>\n    }\n</div>\n" }]
         }], propDecorators: { id: [{
                 type: Input
             }], title: [{
@@ -123,11 +121,11 @@ class EmptyStateGoBackComponent {
         window.open(portalUrl, '_top');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmptyStateGoBackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EmptyStateGoBackComponent, selector: "s-empty-state-go-back", inputs: { iconClass: "iconClass", title: "title", description: "description", primaryActionLabel: "primaryActionLabel" }, ngImport: i0, template: "<s-empty-state \n    [iconClass]=\"iconClass\" \n    [title]=\"title\" \n    [description]=\"description\" \n    (primaryAction)=\"goBack()\"\n    [primaryActionLabel]=\"primaryActionLabel\">\n</s-empty-state>", dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "s-empty-state", inputs: ["id", "title", "iconClass", "description", "showPrimaryAction", "showSecondaryAction", "primaryActionLabel", "secondaryActionLabel", "primaryModel"], outputs: ["primaryAction", "secondaryAction"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EmptyStateGoBackComponent, isStandalone: true, selector: "s-empty-state-go-back", inputs: { iconClass: "iconClass", title: "title", description: "description", primaryActionLabel: "primaryActionLabel" }, ngImport: i0, template: "<s-empty-state \n    [iconClass]=\"iconClass\" \n    [title]=\"title\" \n    [description]=\"description\" \n    (primaryAction)=\"goBack()\"\n    [primaryActionLabel]=\"primaryActionLabel\">\n</s-empty-state>", dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "s-empty-state", inputs: ["id", "title", "iconClass", "description", "showPrimaryAction", "showSecondaryAction", "primaryActionLabel", "secondaryActionLabel", "primaryModel"], outputs: ["primaryAction", "secondaryAction"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmptyStateGoBackComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-empty-state-go-back', template: "<s-empty-state \n    [iconClass]=\"iconClass\" \n    [title]=\"title\" \n    [description]=\"description\" \n    (primaryAction)=\"goBack()\"\n    [primaryActionLabel]=\"primaryActionLabel\">\n</s-empty-state>" }]
+            args: [{ selector: 's-empty-state-go-back', standalone: true, imports: [EmptyStateComponent], template: "<s-empty-state \n    [iconClass]=\"iconClass\" \n    [title]=\"title\" \n    [description]=\"description\" \n    (primaryAction)=\"goBack()\"\n    [primaryActionLabel]=\"primaryActionLabel\">\n</s-empty-state>" }]
         }], propDecorators: { iconClass: [{
                 type: Input
             }], title: [{
@@ -141,15 +139,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class EmptyStateModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmptyStateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: EmptyStateModule, declarations: [EmptyStateComponent, EmptyStateGoBackComponent], imports: [CommonModule, ButtonModule], exports: [EmptyStateComponent, EmptyStateGoBackComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmptyStateModule, providers: [CookieService], imports: [CommonModule, ButtonModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: EmptyStateModule, imports: [EmptyStateComponent, EmptyStateGoBackComponent], exports: [EmptyStateComponent, EmptyStateGoBackComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmptyStateModule, providers: [CookieService], imports: [EmptyStateComponent, EmptyStateGoBackComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmptyStateModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, ButtonModule],
+                    imports: [EmptyStateComponent, EmptyStateGoBackComponent],
                     providers: [CookieService],
-                    declarations: [EmptyStateComponent, EmptyStateGoBackComponent],
                     exports: [EmptyStateComponent, EmptyStateGoBackComponent],
                 }]
         }] });

package/fesm2022/seniorsistemas-angular-components-empty-state.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"seniorsistemas-angular-components-empty-state.mjs","sources":["../../projects/angular-components/empty-state/src/lib/empty-state/empty-state.component.ts","../../projects/angular-components/empty-state/src/lib/empty-state/empty-state.component.html","../../projects/angular-components/empty-state/src/lib/empty-state/go-back/go-back.component.ts","../../projects/angular-components/empty-state/src/lib/empty-state/go-back/go-back.component.html","../../projects/angular-components/empty-state/src/lib/empty-state/empty-state.module.ts","../../projects/angular-components/empty-state/src/seniorsistemas-angular-components-empty-state.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { TieredMenuItemData } from '@seniorsistemas/angular-components/tiered-menu';\n\n/*\n @description Componente de estado vazio exibido quando não há conteúdo para mostrar.\n * Apresenta um ícone, título, descrição e até duas ações configuráveis\n * (primária com suporte a tiered menu e secundária simples).\n \n @example\n * ```html\n * <s-empty-state\n * title=\"Nenhum resultado encontrado\"\n * description=\"Tente ajustar os filtros da busca.\"\n * primaryActionLabel=\"Criar novo\"\n * (primaryAction)=\"onCreate()\"\n * />\n * ```\n \n @category Feedback\n /\n@Component({\n selector: 's-empty-state',\n templateUrl: './empty-state.component.html',\n styleUrls: ['./empty-state.component.scss'],\n})\nexport class EmptyStateComponent {\n public static readonly nextIdSeed = 0;\n private static _nextId = EmptyStateComponent.nextIdSeed;\n\n public static getNextId(): number {\n return this._nextId++;\n }\n\n /\n @description Identificador único do componente. Gerado automaticamente se não informado.\n /\n @Input()\n public id = `s-empty-state-${EmptyStateComponent.getNextId()}`;\n\n /\n @description Título principal exibido no estado vazio. Campo obrigatório.\n /\n @Input({ required: true })\n public title!: string;\n\n /\n @description Classe CSS do ícone exibido no estado vazio.\n * Aceita classes de bibliotecas de ícones como Font Awesome.\n \n @default 'fa fa-inbox'\n /\n @Input()\n public iconClass = 'fa fa-inbox';\n\n /\n @description Texto descritivo exibido abaixo do título, explicando o motivo do estado vazio\n * ou orientando o usuário sobre as próximas ações.\n /\n @Input()\n public description?: string;\n\n /\n @description Controla a visibilidade do botão de ação primária.\n \n @default true\n /\n @Input()\n public showPrimaryAction = true;\n\n /\n @description Controla a visibilidade do botão de ação secundária.\n \n @default true\n /\n @Input()\n public showSecondaryAction = true;\n\n /\n @description Texto do botão de ação primária.\n * Quando `primaryModel` possui itens, o botão exibe um tiered menu ao clicar.\n /\n @Input()\n public primaryActionLabel?: string;\n\n /* @description Texto do botão de ação secundária. /\n @Input()\n public secondaryActionLabel?: string;\n\n /\n @description Lista de itens para o tiered menu da ação primária.\n * Quando informado com itens, o botão primário exibe um menu de opções\n * ao invés de emitir o evento `primaryAction` diretamente.\n /\n @Input()\n public primaryModel: TieredMenuItemData[] = [];\n\n /\n @description Emitido quando o usuário clica no botão de ação primária e `primaryModel` está vazio.\n /\n @Output()\n public primaryAction = new EventEmitter<void>();\n\n /\n @description Emitido quando o usuário clica no botão de ação secundária.\n /\n @Output()\n public secondaryAction = new EventEmitter<void>();\n}\n\n","<div\n [id]=\"id\"\n class=\"empty-state\"\n>\n <div\n [id]=\"id + '-icon'\"\n class=\"icon\"\n >\n <i\n [attr.class]=\"iconClass ? iconClass : 'fa fa-cogs'\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div\n [id]=\"id + '-title'\"\n class=\"title\"\n >\n {{ title }}\n </div>\n\n @if (description) {\n <div\n [id]=\"id + '-description'\"\n class=\"description\"\n >\n <p>{{ description }}</p>\n </div>\n }\n @if (showPrimaryAction && primaryActionLabel) {\n <div\n [id]=\"id + '-actions'\"\n class=\"actions\"\n >\n <s-button\n [id]=\"id + '-primary-action'\"\n type=\"button\"\n [label]=\"primaryActionLabel\"\n [menuOptions]=\"primaryModel\"\n (clicked)=\"primaryAction.next()\"\n ></s-button>\n @if (showSecondaryAction && secondaryActionLabel) {\n <s-button\n [id]=\"id + '-secondary-action'\"\n id=\"secondaryAction\"\n type=\"button\"\n [label]=\"secondaryActionLabel\"\n priority=\"link\"\n (clicked)=\"secondaryAction.next()\"\n ></s-button>\n }\n </div>\n }\n</div>\n","import { Component, Input, inject } from '@angular/core';\n\nimport { CookieService } from 'ngx-cookie-service';\n\n@Component({\n selector: 's-empty-state-go-back',\n templateUrl: './go-back.component.html',\n styleUrls: [],\n})\nexport class EmptyStateGoBackComponent {\n private readonly _cookieService = inject(CookieService);\n\n @Input()\n public iconClass = 'fa fa-exclamation-triangle';\n\n @Input({ required: true })\n public title!: string;\n\n @Input()\n public description?: string;\n\n @Input()\n public primaryActionLabel?: string;\n\n public goBack() {\n const portalUrl = this._cookieService.get('com.senior.portal.url');\n window.open(portalUrl, '_top');\n }\n}\n","<s-empty-state \n [iconClass]=\"iconClass\" \n [title]=\"title\" \n [description]=\"description\" \n (primaryAction)=\"goBack()\"\n [primaryActionLabel]=\"primaryActionLabel\">\n</s-empty-state>","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { CookieService } from 'ngx-cookie-service';\n\nimport { EmptyStateComponent } from './empty-state.component';\nimport { EmptyStateGoBackComponent } from './go-back/go-back.component';\nimport { ButtonModule } from '@seniorsistemas/angular-components/button';\n\n@NgModule({\n imports: [CommonModule, ButtonModule],\n providers: [CookieService],\n declarations: [EmptyStateComponent, EmptyStateGoBackComponent],\n exports: [EmptyStateComponent, EmptyStateGoBackComponent],\n})\nexport class EmptyStateModule { }\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["i1.EmptyStateComponent"],"mappings":";;;;;;;AAGA;;;;;;;;;;;;;;;;AAgBG;MAMU,mBAAmB,CAAA;AACrB,IAAA,OAAgB,UAAU,GAAG,CAAC,CAAC;AAC9B,IAAA,OAAO,OAAO,GAAG,mBAAmB,CAAC,UAAU,CAAC;AAEjD,IAAA,OAAO,SAAS,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;KACzB;AAED;;AAEG;AAEI,IAAA,EAAE,GAAG,CAAiB,cAAA,EAAA,mBAAmB,CAAC,SAAS,EAAE,EAAE,CAAC;AAE/D;;AAEG;AAEI,IAAA,KAAK,CAAU;AAEtB;;;;;AAKG;IAEI,SAAS,GAAG,aAAa,CAAC;AAEjC;;;AAGG;AAEI,IAAA,WAAW,CAAU;AAE5B;;;;AAIG;IAEI,iBAAiB,GAAG,IAAI,CAAC;AAEhC;;;;AAIG;IAEI,mBAAmB,GAAG,IAAI,CAAC;AAElC;;;AAGG;AAEI,IAAA,kBAAkB,CAAU;;AAI5B,IAAA,oBAAoB,CAAU;AAErC;;;;AAIG;IAEI,YAAY,GAAyB,EAAE,CAAC;AAE/C;;AAEG;AAEI,IAAA,aAAa,GAAG,IAAI,YAAY,EAAQ,CAAC;AAEhD;;AAEG;AAEI,IAAA,eAAe,GAAG,IAAI,YAAY,EAAQ,CAAC;wGAjFzC,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,0aCzBhC,q6CAqDA,EAAA,MAAA,EAAA,CAAA,wXAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,OAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,gBAAA,EAAA,OAAA,EAAA,YAAA,EAAA,YAAA,EAAA,UAAA,EAAA,WAAA,EAAA,MAAA,EAAA,UAAA,EAAA,aAAA,EAAA,MAAA,EAAA,OAAA,EAAA,WAAA,EAAA,OAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FD5Ba,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAL/B,SAAS;+BACI,eAAe,EAAA,QAAA,EAAA,q6CAAA,EAAA,MAAA,EAAA,CAAA,wXAAA,CAAA,EAAA,CAAA;8BAgBlB,EAAE,EAAA,CAAA;sBADR,KAAK;gBAOC,KAAK,EAAA,CAAA;sBADX,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;gBAUlB,SAAS,EAAA,CAAA;sBADf,KAAK;gBAQC,WAAW,EAAA,CAAA;sBADjB,KAAK;gBASC,iBAAiB,EAAA,CAAA;sBADvB,KAAK;gBASC,mBAAmB,EAAA,CAAA;sBADzB,KAAK;gBAQC,kBAAkB,EAAA,CAAA;sBADxB,KAAK;gBAKC,oBAAoB,EAAA,CAAA;sBAD1B,KAAK;gBASC,YAAY,EAAA,CAAA;sBADlB,KAAK;gBAOC,aAAa,EAAA,CAAA;sBADnB,MAAM;gBAOA,eAAe,EAAA,CAAA;sBADrB,MAAM;;;MEhGE,yBAAyB,CAAA;AACjB,IAAA,cAAc,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IAGjD,SAAS,GAAG,4BAA4B,CAAC;AAGzC,IAAA,KAAK,CAAU;AAGf,IAAA,WAAW,CAAU;AAGrB,IAAA,kBAAkB,CAAU;IAE5B,MAAM,GAAA;QACT,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;AACnE,QAAA,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;KAClC;wGAlBQ,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAzB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,yBAAyB,uLCTtC,mNAMgB,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,mBAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,IAAA,EAAA,OAAA,EAAA,WAAA,EAAA,aAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,cAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,EAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FDGH,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBALrC,SAAS;+BACI,uBAAuB,EAAA,QAAA,EAAA,mNAAA,EAAA,CAAA;8BAQ1B,SAAS,EAAA,CAAA;sBADf,KAAK;gBAIC,KAAK,EAAA,CAAA;sBADX,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;gBAIlB,WAAW,EAAA,CAAA;sBADjB,KAAK;gBAIC,kBAAkB,EAAA,CAAA;sBADxB,KAAK;;;MENG,gBAAgB,CAAA;wGAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;yGAAhB,gBAAgB,EAAA,YAAA,EAAA,CAHV,mBAAmB,EAAE,yBAAyB,CAAA,EAAA,OAAA,EAAA,CAFnD,YAAY,EAAE,YAAY,CAAA,EAAA,OAAA,EAAA,CAG1B,mBAAmB,EAAE,yBAAyB,CAAA,EAAA,CAAA,CAAA;AAE/C,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,aAJd,CAAC,aAAa,CAAC,EADhB,OAAA,EAAA,CAAA,YAAY,EAAE,YAAY,CAAA,EAAA,CAAA,CAAA;;4FAK3B,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAN5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,YAAY,CAAC;oBACrC,SAAS,EAAE,CAAC,aAAa,CAAC;AAC1B,oBAAA,YAAY,EAAE,CAAC,mBAAmB,EAAE,yBAAyB,CAAC;AAC9D,oBAAA,OAAO,EAAE,CAAC,mBAAmB,EAAE,yBAAyB,CAAC;AAC5D,iBAAA,CAAA;;;ACdD;;AAEG;;;;"}
1	+ {"version":3,"file":"seniorsistemas-angular-components-empty-state.mjs","sources":["../../projects/angular-components/empty-state/src/lib/empty-state/empty-state.component.ts","../../projects/angular-components/empty-state/src/lib/empty-state/empty-state.component.html","../../projects/angular-components/empty-state/src/lib/empty-state/go-back/go-back.component.ts","../../projects/angular-components/empty-state/src/lib/empty-state/go-back/go-back.component.html","../../projects/angular-components/empty-state/src/lib/empty-state/empty-state.module.ts","../../projects/angular-components/empty-state/src/seniorsistemas-angular-components-empty-state.ts"],"sourcesContent":["import { Component, EventEmitter, Input, Output } from '@angular/core';\r\nimport { TieredMenuItemData } from '@seniorsistemas/angular-components/tiered-menu';\r\nimport { ButtonComponent } from '@seniorsistemas/angular-components/button';\r\n\r\n/*\r\n @description Componente de estado vazio exibido quando não há conteúdo para mostrar.\r\n * Apresenta um ícone, título, descrição e até duas ações configuráveis\r\n * (primária com suporte a tiered menu e secundária simples).\r\n \r\n @example\r\n * ```html\r\n * <s-empty-state\r\n * title=\"Nenhum resultado encontrado\"\r\n * description=\"Tente ajustar os filtros da busca.\"\r\n * primaryActionLabel=\"Criar novo\"\r\n * (primaryAction)=\"onCreate()\"\r\n * />\r\n * ```\r\n \r\n @category Feedback\r\n /\r\n@Component({\r\n selector: 's-empty-state',\r\n templateUrl: './empty-state.component.html',\r\n standalone: true,\r\n imports: [ButtonComponent],\r\n})\r\nexport class EmptyStateComponent {\r\n public static readonly nextIdSeed = 0;\r\n private static _nextId = EmptyStateComponent.nextIdSeed;\r\n\r\n public static getNextId(): number {\r\n return this._nextId++;\r\n }\r\n\r\n /\r\n @description Identificador único do componente. Gerado automaticamente se não informado.\r\n /\r\n @Input()\r\n public id = `s-empty-state-${EmptyStateComponent.getNextId()}`;\r\n\r\n /\r\n @description Título principal exibido no estado vazio. Campo obrigatório.\r\n /\r\n @Input({ required: true })\r\n public title!: string;\r\n\r\n /\r\n @description Classe CSS do ícone exibido no estado vazio.\r\n * Aceita classes de bibliotecas de ícones como Font Awesome.\r\n \r\n @default 'fa fa-inbox'\r\n /\r\n @Input()\r\n public iconClass = 'fa fa-inbox';\r\n\r\n /\r\n @description Texto descritivo exibido abaixo do título, explicando o motivo do estado vazio\r\n * ou orientando o usuário sobre as próximas ações.\r\n /\r\n @Input()\r\n public description?: string;\r\n\r\n /\r\n @description Controla a visibilidade do botão de ação primária.\r\n \r\n @default true\r\n /\r\n @Input()\r\n public showPrimaryAction = true;\r\n\r\n /\r\n @description Controla a visibilidade do botão de ação secundária.\r\n \r\n @default true\r\n /\r\n @Input()\r\n public showSecondaryAction = true;\r\n\r\n /\r\n @description Texto do botão de ação primária.\r\n * Quando `primaryModel` possui itens, o botão exibe um tiered menu ao clicar.\r\n /\r\n @Input()\r\n public primaryActionLabel?: string;\r\n\r\n /* @description Texto do botão de ação secundária. /\r\n @Input()\r\n public secondaryActionLabel?: string;\r\n\r\n /\r\n @description Lista de itens para o tiered menu da ação primária.\r\n * Quando informado com itens, o botão primário exibe um menu de opções\r\n * ao invés de emitir o evento `primaryAction` diretamente.\r\n /\r\n @Input()\r\n public primaryModel: TieredMenuItemData[] = [];\r\n\r\n /\r\n @description Emitido quando o usuário clica no botão de ação primária e `primaryModel` está vazio.\r\n /\r\n @Output()\r\n public primaryAction = new EventEmitter<void>();\r\n\r\n /\r\n @description Emitido quando o usuário clica no botão de ação secundária.\r\n /\r\n @Output()\r\n public secondaryAction = new EventEmitter<void>();\r\n}\r\n","<div\n [id]=\"id\"\n class=\"w-full text-center\"\n>\n <div\n [id]=\"id + '-icon'\"\n class=\"text-[#d8d8d8] text-[6em]\"\n >\n <i\n [attr.class]=\"iconClass ? iconClass : 'fa fa-cogs'\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div\n [id]=\"id + '-title'\"\n class=\"font-bold mb-[10px]\"\n >\n {{ title }}\n </div>\n\n @if (description) {\n <div\n [id]=\"id + '-description'\"\n class=\"mb-[15px] text-[#999999] px-5 text-center\"\n >\n <p class=\"mx-auto max-w-[400px] max-h-[80px] overflow-hidden\">{{ description }}</p>\n </div>\n }\n @if (showPrimaryAction && primaryActionLabel) {\n <div\n [id]=\"id + '-actions'\"\n class=\"text-center w-full\"\n >\n <s-button\n [id]=\"id + '-primary-action'\"\n type=\"button\"\n [label]=\"primaryActionLabel\"\n [menuOptions]=\"primaryModel\"\n (clicked)=\"primaryAction.next()\"\n ></s-button>\n @if (showSecondaryAction && secondaryActionLabel) {\n <s-button\n [id]=\"id + '-secondary-action'\"\n id=\"secondaryAction\"\n type=\"button\"\n [label]=\"secondaryActionLabel\"\n priority=\"link\"\n (clicked)=\"secondaryAction.next()\"\n ></s-button>\n }\n </div>\n }\n</div>\n","import { Component, Input, inject } from '@angular/core';\r\n\r\nimport { CookieService } from 'ngx-cookie-service';\r\nimport { EmptyStateComponent } from '../empty-state.component';\r\n\r\n@Component({\r\n selector: 's-empty-state-go-back',\r\n templateUrl: './go-back.component.html',\r\n styleUrls: [],\r\n standalone: true,\r\n imports: [EmptyStateComponent],\r\n})\r\nexport class EmptyStateGoBackComponent {\r\n private readonly _cookieService = inject(CookieService);\r\n\r\n @Input()\r\n public iconClass = 'fa fa-exclamation-triangle';\r\n\r\n @Input({ required: true })\r\n public title!: string;\r\n\r\n @Input()\r\n public description?: string;\r\n\r\n @Input()\r\n public primaryActionLabel?: string;\r\n\r\n public goBack() {\r\n const portalUrl = this._cookieService.get('com.senior.portal.url');\r\n window.open(portalUrl, '_top');\r\n }\r\n}\r\n","<s-empty-state \n [iconClass]=\"iconClass\" \n [title]=\"title\" \n [description]=\"description\" \n (primaryAction)=\"goBack()\"\n [primaryActionLabel]=\"primaryActionLabel\">\n</s-empty-state>","import { NgModule } from '@angular/core';\r\n\r\nimport { CookieService } from 'ngx-cookie-service';\r\n\r\nimport { EmptyStateComponent } from './empty-state.component';\r\nimport { EmptyStateGoBackComponent } from './go-back/go-back.component';\r\n\r\n@NgModule({\r\n imports: [EmptyStateComponent, EmptyStateGoBackComponent],\r\n providers: [CookieService],\r\n exports: [EmptyStateComponent, EmptyStateGoBackComponent],\r\n})\r\nexport class EmptyStateModule {}\r\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-fieldset.mjs CHANGED Viewed

@@ -2,10 +2,8 @@ import { trigger, transition, style, animate, state } from '@angular/animations'
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, ContentChildren, Output, NgModule } from '@angular/core';
 import { TemplateDirective } from '@seniorsistemas/angular-components/template';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@seniorsistemas/angular-components/interactive-content';
 import { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';
+import { NgTemplateOutlet } from '@angular/common';
 /**
  * @description Componente de fieldset com legenda, ícone configurável e suporte a
@@ -49,7 +47,7 @@ class FieldsetComponent {
         this.afterToggle.next({ collapsed: this.active, originalEvent });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FieldsetComponent, selector: "s-fieldset", inputs: { legend: "legend", toggleable: "toggleable", icon: "icon", destroyOnHide: "destroyOnHide" }, outputs: { beforeToggle: "beforeToggle", afterToggle: "afterToggle" }, queries: [{ propertyName: "templateDirectives", predicate: TemplateDirective }], ngImport: i0, template: "<fieldset\n    class=\"fieldset\"\n    [class.fieldset-togglable]=\"toggleable\"\n>\n    <legend\n        class=\"fieldset-title\"\n        (sInteractiveContent)=\"toggleActive($event)\"\n    >\n        <ng-container *ngIf=\"toggleable\">\n            @if (active) {\n                <i class=\"fas fa-plus\"></i>\n            } @else {\n                <i class=\"fas fa-minus\"></i>\n            }\n        </ng-container>\n        @if (headerTemplate) {\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n        } @else {\n            <i\n                *ngIf=\"icon\"\n                [class]=\"icon\"\n            ></i>\n            {{ legend }}\n        }\n    </legend>\n    @if (destroyOnHide ? (toggleable ? active : true) : true) {\n        <div [@toggleAnimation]=\"destroyOnHide ? null : active ? 'open' : 'closed'\">\n            <ng-content></ng-content>\n        </div>\n    }\n</fieldset>\n", styles: [".fieldset{background-color:#fff;border:1px solid #dedce5;border-radius:6px;margin-bottom:10px;min-height:4.5em;padding:6px 8px}.fieldset-title{align-items:center;color:#212533;font-family:Open Sans,sans-serif;font-size:14px;font-weight:700;display:flex;padding:0 4px;gap:4px;margin-left:16px;-webkit-user-select:none;user-select:none}.fieldset-togglable .fieldset-title,.fieldset-togglable .fieldset-title *{cursor:pointer}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.InteractiveContentDirective, selector: "[sInteractiveContent]", inputs: ["focusable", "disabled", "stopPropagation"], outputs: ["sInteractiveContent"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FieldsetComponent, isStandalone: true, selector: "s-fieldset", inputs: { legend: "legend", toggleable: "toggleable", icon: "icon", destroyOnHide: "destroyOnHide" }, outputs: { beforeToggle: "beforeToggle", afterToggle: "afterToggle" }, queries: [{ propertyName: "templateDirectives", predicate: TemplateDirective }], ngImport: i0, template: "<fieldset\r\n    class=\"bg-grayscale-0 border border-grayscale-20 rounded-xbig mb-[10px] min-h-[4.5em] px-2 py-1.5 w-full min-w-0\"\r\n>\r\n    <legend\r\n        class=\"flex items-center text-grayscale-90 font-open-sans text-sm font-bold px-1 gap-1 ml-4 select-none\"\r\n        [class.cursor-pointer]=\"toggleable\"\r\n        (sInteractiveContent)=\"toggleActive($event)\"\r\n    >\r\n        @if (toggleable) {\r\n            @if (active) {\r\n                <i class=\"fas fa-plus\"></i>\r\n            } @else {\r\n                <i class=\"fas fa-minus\"></i>\r\n            }\r\n        }\r\n        @if (headerTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n        } @else {\r\n            @if (icon) {\r\n                <i [class]=\"icon\"></i>\r\n            }\r\n            {{ legend }}\r\n        }\r\n    </legend>\r\n    @if (destroyOnHide ? (toggleable ? active : true) : true) {\r\n        <div [@toggleAnimation]=\"destroyOnHide ? null : active ? 'open' : 'closed'\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    }\r\n</fieldset>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: InteractiveContentDirective, selector: "[sInteractiveContent]", inputs: ["focusable", "disabled", "stopPropagation"], outputs: ["sInteractiveContent"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
             trigger('toggleAnimation', [
                 transition(':enter', [
                     style({ opacity: 0, height: 0 }),
@@ -81,7 +79,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             state('closed', style({ opacity: 0, height: 0 })),
                             transition('open <=> closed', animate('300ms ease')),
                         ]),
-                    ], template: "<fieldset\n    class=\"fieldset\"\n    [class.fieldset-togglable]=\"toggleable\"\n>\n    <legend\n        class=\"fieldset-title\"\n        (sInteractiveContent)=\"toggleActive($event)\"\n    >\n        <ng-container *ngIf=\"toggleable\">\n            @if (active) {\n                <i class=\"fas fa-plus\"></i>\n            } @else {\n                <i class=\"fas fa-minus\"></i>\n            }\n        </ng-container>\n        @if (headerTemplate) {\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n        } @else {\n            <i\n                *ngIf=\"icon\"\n                [class]=\"icon\"\n            ></i>\n            {{ legend }}\n        }\n    </legend>\n    @if (destroyOnHide ? (toggleable ? active : true) : true) {\n        <div [@toggleAnimation]=\"destroyOnHide ? null : active ? 'open' : 'closed'\">\n            <ng-content></ng-content>\n        </div>\n    }\n</fieldset>\n", styles: [".fieldset{background-color:#fff;border:1px solid #dedce5;border-radius:6px;margin-bottom:10px;min-height:4.5em;padding:6px 8px}.fieldset-title{align-items:center;color:#212533;font-family:Open Sans,sans-serif;font-size:14px;font-weight:700;display:flex;padding:0 4px;gap:4px;margin-left:16px;-webkit-user-select:none;user-select:none}.fieldset-togglable .fieldset-title,.fieldset-togglable .fieldset-title *{cursor:pointer}.hidden{display:none}\n"] }]
+                    ], standalone: true, imports: [InteractiveContentDirective, NgTemplateOutlet], template: "<fieldset\r\n    class=\"bg-grayscale-0 border border-grayscale-20 rounded-xbig mb-[10px] min-h-[4.5em] px-2 py-1.5 w-full min-w-0\"\r\n>\r\n    <legend\r\n        class=\"flex items-center text-grayscale-90 font-open-sans text-sm font-bold px-1 gap-1 ml-4 select-none\"\r\n        [class.cursor-pointer]=\"toggleable\"\r\n        (sInteractiveContent)=\"toggleActive($event)\"\r\n    >\r\n        @if (toggleable) {\r\n            @if (active) {\r\n                <i class=\"fas fa-plus\"></i>\r\n            } @else {\r\n                <i class=\"fas fa-minus\"></i>\r\n            }\r\n        }\r\n        @if (headerTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n        } @else {\r\n            @if (icon) {\r\n                <i [class]=\"icon\"></i>\r\n            }\r\n            {{ legend }}\r\n        }\r\n    </legend>\r\n    @if (destroyOnHide ? (toggleable ? active : true) : true) {\r\n        <div [@toggleAnimation]=\"destroyOnHide ? null : active ? 'open' : 'closed'\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    }\r\n</fieldset>\r\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { legend: [{
                 type: Input
             }], toggleable: [{
@@ -101,14 +99,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class FieldsetModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FieldsetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: FieldsetModule, declarations: [FieldsetComponent], imports: [CommonModule, InteractiveContentDirective], exports: [FieldsetComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FieldsetModule, imports: [CommonModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: FieldsetModule, imports: [FieldsetComponent], exports: [FieldsetComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FieldsetModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FieldsetModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, InteractiveContentDirective],
-                    declarations: [FieldsetComponent],
+                    imports: [FieldsetComponent],
                     exports: [FieldsetComponent],
                 }]
         }] });

package/fesm2022/seniorsistemas-angular-components-fieldset.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"seniorsistemas-angular-components-fieldset.mjs","sources":["../../projects/angular-components/fieldset/src/lib/fieldset/fieldset.component.ts","../../projects/angular-components/fieldset/src/lib/fieldset/fieldset.component.html","../../projects/angular-components/fieldset/src/lib/fieldset/fieldset.module.ts","../../projects/angular-components/fieldset/src/seniorsistemas-angular-components-fieldset.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations';\nimport {\n AfterViewInit,\n Component,\n ContentChildren,\n EventEmitter,\n Input,\n Output,\n QueryList,\n TemplateRef,\n} from '@angular/core';\n\nimport { TemplateDirective } from '@seniorsistemas/angular-components/template';\nimport { FieldSetToggle } from './fieldset.models';\n\n/*\n @description Componente de fieldset com legenda, ícone configurável e suporte a\n * toggle (recolher/expandir) com animação. Suporta template personalizado para o\n * cabeçalho via diretiva `TemplateDirective` com tipo `'header'`.\n \n @example\n * ```html\n * <s-fieldset legend=\"Dados pessoais\" [toggleable]=\"true\">\n * <p>Conteúdo do fieldset</p>\n * </s-fieldset>\n * ```\n \n @category Inputs\n /\n@Component({\n selector: 's-fieldset',\n templateUrl: './fieldset.component.html',\n ~~styleUrls~~: ['~~./fieldset.component.scss~~'],\n animations: [\n trigger('toggleAnimation', [\n transition(':enter', [\n style({ opacity: 0, height: 0 }),\n animate('300ms ease-out', style({ opacity: 1, height: '' })),\n ]),\n transition(':leave', [\n style({ opacity: 1, height: '' }),\n animate('300ms ease-in', style({ opacity: 0, height: 0 })),\n ]),\n state('open', style({ opacity: 1, height: '' })),\n state('closed', style({ opacity: 0, height: 0 })),\n transition('open <=> closed', animate('300ms ease')),\n ]),\n ],\n})\nexport class FieldsetComponent implements AfterViewInit {\n /** @description Texto exibido como título do fieldset. @default '' /\n @Input() legend = '';\n /* @description Habilita o botão de toggle que permite recolher e expandir o conteúdo. @default false /\n @Input() toggleable = false;\n /* @description Classe de ícone exibida ao lado da legenda (ex.: `'fas fa-cog'`). @default '' /\n @Input() icon = '';\n /* @description Quando `true`, remove o conteúdo do DOM ao recolher o fieldset. @default true /\n @Input() destroyOnHide = true;\n @ContentChildren(TemplateDirective) readonly templateDirectives: QueryList<TemplateDirective> \| undefined;\n headerTemplate: TemplateRef<any> \| undefined;\n /* @description Emitido imediatamente antes da animação de toggle iniciar, com o estado atual. /\n @Output() beforeToggle = new EventEmitter<FieldSetToggle>();\n /* @description Emitido após a animação de toggle concluir, com o novo estado. /\n @Output() afterToggle = new EventEmitter<FieldSetToggle>();\n active = true;\n\n ngAfterViewInit(): void {\n this.headerTemplate = this.templateDirectives?.find((template) => template.type === 'header')?.template;\n }\n\n toggleActive(originalEvent: PointerEvent \| KeyboardEvent) {\n if (!this.toggleable) {\n return;\n }\n this.beforeToggle.next({ collapsed: this.active, originalEvent });\n this.active = !this.active;\n this.afterToggle.next({ collapsed: this.active, originalEvent });\n }\n}\n\n","<fieldset\n class=\"~~fieldset\"\n~~ [~~class~~.~~fieldset~~-~~togglable]=\"toggleable~~\"\n>\n <legend\n class=\"~~fieldset~~-~~title~~\"\n (sInteractiveContent)=\"toggleActive($event)\"\n >\n ~~<ng-container~~ ngIf=\"toggleable\~~">\~~n @if (active) {\n <i class=\"fas fa-plus\"></i>\n } @else {\n <i class=\"fas fa-minus\"></i>\n }\n ~~</ng-container>\~~n @if (headerTemplate) {\n <ng-container ngTemplateOutlet=\"headerTemplate\"></ng-container>\n } @else {\n ~~<i\n ngIf=\"~~icon\"\n [class]=\"icon\"\n ></i>\n {{ legend }}\n }\n </legend>\n @if (destroyOnHide ? (toggleable ? active : true) : true) {\n <div [@toggleAnimation]=\"destroyOnHide ? null : active ? 'open' : 'closed'\">\n <ng-content></ng-content>\n </div>\n }\n</fieldset>\n","import { NgModule } from '@angular/core';\~~nimport { CommonModule } from '@angular/common';\n~~\~~nimport { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';\~~n\nimport { FieldsetComponent } from './fieldset.component';\n\n@NgModule({\n imports: [~~CommonModule, InteractiveContentDirective],\n declarations: [~~FieldsetComponent],\n exports: [FieldsetComponent],\n})\nexport class FieldsetModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"~~;;;;;;;;;AAeA~~;;;;;;;;;;;;;AAaG;~~MAqBU~~,iBAAiB,CAAA;;IAEjB,MAAM,GAAG,EAAE,CAAC;;IAEZ,UAAU,GAAG,KAAK,CAAC;;IAEnB,IAAI,GAAG,EAAE,CAAC;;IAEV,aAAa,GAAG,IAAI,CAAC;AACe,IAAA,kBAAkB,CAA2C;AAC1G,IAAA,cAAc,CAA+B;;AAEnC,IAAA,YAAY,GAAG,IAAI,YAAY,EAAkB,CAAC;;AAElD,IAAA,WAAW,GAAG,IAAI,YAAY,EAAkB,CAAC;IAC3D,MAAM,GAAG,IAAI,CAAC;IAEd,eAAe,GAAA;QACX,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,IAAI,KAAK,QAAQ,CAAC,EAAE,QAAQ,CAAC;KAC3G;AAED,IAAA,YAAY,CAAC,aAA2C,EAAA;AACpD,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,OAAO;SACV;AACD,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC;AAClE,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;AAC3B,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,CAAC;KACpE;wGA5BQ,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;~~AAAjB~~,~~IAAA~~,~~OAAA,IAAA,GAAA,~~EAAA,~~CAAA~~,~~oBAAA,CAAA,~~EAAA,~~UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,~~IAAA,EAAA,~~iBAAiB,EAST,~~QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,oBAAA,EAAA,SAAA,~~EAAA~~,iBAAiB,~~EC1DtC~~,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,~~46BA+BA~~,~~EDEgB~~,~~MAAA~~,EAAA,~~CAAA~~,~~gcAAA~~,~~CAAA~~,EAAA,~~YAAA~~,EAAA,CAAA,~~EAAA,IAAA,EAAA,~~WAAA,EAAA,~~IAAA~~,EAAA,~~EAAA~~,CAAA,~~IAAA,~~EAAA,~~QAAA~~,EAAA,~~QAAA,EAAA,MAAA,EAAA,~~CAAA,~~MAAA~~,~~EAAA,UAAA,EAAA,UAAA,~~CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,~~EAAA~~,~~EAAA~~,~~CAAA~~,~~gBAAA,EAAA,~~QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,~~EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,~~CAAA,~~2BAAA,~~EAAA,~~QAAA,EAAA,uBAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,~~UAAA,EAAA~~,iBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA~~;YACR,OAAO,CAAC,iBAAiB,EAAE;gBACvB,UAAU,CAAC,QAAQ,EAAE;oBACjB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;AAChC,oBAAA,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;iBAChE,CAAC;gBACF,UAAU,CAAC,QAAQ,EAAE;oBACjB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;AAClC,oBAAA,OAAO,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;iBAC7D,CAAC;AACF,gBAAA,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;AACjD,gBAAA,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;AACjD,gBAAA,UAAU,CAAC,iBAAiB,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;aACvD,CAAC;AACL,SAAA,EAAA,CAAA,CAAA;;~~4FAEQ~~,iBAAiB,EAAA,UAAA,EAAA,CAAA;~~kBApB7B~~,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAGV,UAAA,EAAA;wBACR,OAAO,CAAC,iBAAiB,EAAE;4BACvB,UAAU,CAAC,QAAQ,EAAE;gCACjB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;AAChC,gCAAA,OAAO,CAAC,gBAAgB,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;6BAChE,CAAC;4BACF,UAAU,CAAC,QAAQ,EAAE;gCACjB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;AAClC,gCAAA,OAAO,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;6BAC7D,CAAC;AACF,4BAAA,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;AACjD,4BAAA,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC;AACjD,4BAAA,UAAU,CAAC,iBAAiB,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;yBACvD,CAAC;AACL,qBAAA,EAAA,QAAA,EAAA,~~46BAAA~~,EAAA,MAAA,EAAA,CAAA,~~gcAAA~~,CAAA,EAAA,CAAA;~~8BAIQ~~,MAAM,EAAA,CAAA;sBAAd,KAAK;gBAEG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBAEG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAEG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACuC,kBAAkB,EAAA,CAAA;sBAA9D,eAAe;uBAAC,iBAAiB,CAAA;gBAGxB,YAAY,EAAA,CAAA;sBAArB,MAAM;gBAEG,WAAW,EAAA,CAAA;sBAApB,MAAM;;;~~MEnDE~~,cAAc,CAAA;wGAAd,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;~~AAAd~~,~~IAAA~~,~~OAAA,IAAA,GAAA,~~EAAA,~~CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,~~OAAA,EAAA,~~SAAA~~,~~EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,cAAc,iBAHR,~~iBAAiB,CAAA,EAAA,OAAA,EAAA,~~CADtB~~,~~YAAY,EAAE,2BAA2B,aAEzC,~~iBAAiB,CAAA,EAAA,CAAA,CAAA;~~AAElB~~,~~IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,~~cAAc,~~YAJb,YAAY,CAAA,~~EAAA,CAAA,CAAA;;~~4FAIb~~,cAAc,EAAA,UAAA,EAAA,CAAA;~~kBAL1B~~,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;~~AACN~~,~~oBAAA,~~OAAO,EAAE,CAAC,~~YAAY,EAAE,2BAA2B,CAAC;oBACpD,YAAY,EAAE,CAAC,~~iBAAiB,CAAC;~~oBACjC~~,OAAO,EAAE,CAAC,iBAAiB,CAAC;AAC/B,iBAAA,CAAA;;;~~ACXD~~;;AAEG;;;;"}
1	+ {"version":3,"file":"seniorsistemas-angular-components-fieldset.mjs","sources":["../../projects/angular-components/fieldset/src/lib/fieldset/fieldset.component.ts","../../projects/angular-components/fieldset/src/lib/fieldset/fieldset.component.html","../../projects/angular-components/fieldset/src/lib/fieldset/fieldset.module.ts","../../projects/angular-components/fieldset/src/seniorsistemas-angular-components-fieldset.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations';\r\nimport {\r\n AfterViewInit,\r\n Component,\r\n ContentChildren,\r\n EventEmitter,\r\n Input,\r\n Output,\r\n QueryList,\r\n TemplateRef,\r\n} from '@angular/core';\r\n\r\nimport { TemplateDirective } from '@seniorsistemas/angular-components/template';\r\nimport { FieldSetToggle } from './fieldset.models';\r\nimport { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\n\r\n/*\r\n @description Componente de fieldset com legenda, ícone configurável e suporte a\r\n * toggle (recolher/expandir) com animação. Suporta template personalizado para o\r\n * cabeçalho via diretiva `TemplateDirective` com tipo `'header'`.\r\n \r\n @example\r\n * ```html\r\n * <s-fieldset legend=\"Dados pessoais\" [toggleable]=\"true\">\r\n * <p>Conteúdo do fieldset</p>\r\n * </s-fieldset>\r\n * ```\r\n \r\n @category Inputs\r\n /\r\n@Component({\r\n selector: 's-fieldset',\r\n templateUrl: './fieldset.component.html',\r\n styles: [':host { display: block; }'],\r\n animations: [\r\n trigger('toggleAnimation', [\r\n transition(':enter', [\r\n style({ opacity: 0, height: 0 }),\r\n animate('300ms ease-out', style({ opacity: 1, height: '' })),\r\n ]),\r\n transition(':leave', [\r\n style({ opacity: 1, height: '' }),\r\n animate('300ms ease-in', style({ opacity: 0, height: 0 })),\r\n ]),\r\n state('open', style({ opacity: 1, height: '' })),\r\n state('closed', style({ opacity: 0, height: 0 })),\r\n transition('open <=> closed', animate('300ms ease')),\r\n ]),\r\n ],\r\n standalone: true,\r\n imports: [InteractiveContentDirective, NgTemplateOutlet],\r\n})\r\nexport class FieldsetComponent implements AfterViewInit {\r\n /** @description Texto exibido como título do fieldset. @default '' /\r\n @Input() legend = '';\r\n /* @description Habilita o botão de toggle que permite recolher e expandir o conteúdo. @default false /\r\n @Input() toggleable = false;\r\n /* @description Classe de ícone exibida ao lado da legenda (ex.: `'fas fa-cog'`). @default '' /\r\n @Input() icon = '';\r\n /* @description Quando `true`, remove o conteúdo do DOM ao recolher o fieldset. @default true /\r\n @Input() destroyOnHide = true;\r\n @ContentChildren(TemplateDirective) readonly templateDirectives: QueryList<TemplateDirective> \| undefined;\r\n headerTemplate: TemplateRef<any> \| undefined;\r\n /* @description Emitido imediatamente antes da animação de toggle iniciar, com o estado atual. /\r\n @Output() beforeToggle = new EventEmitter<FieldSetToggle>();\r\n /* @description Emitido após a animação de toggle concluir, com o novo estado. /\r\n @Output() afterToggle = new EventEmitter<FieldSetToggle>();\r\n active = true;\r\n\r\n ngAfterViewInit(): void {\r\n this.headerTemplate = this.templateDirectives?.find((template) => template.type === 'header')?.template;\r\n }\r\n\r\n toggleActive(originalEvent: PointerEvent \| KeyboardEvent) {\r\n if (!this.toggleable) {\r\n return;\r\n }\r\n this.beforeToggle.next({ collapsed: this.active, originalEvent });\r\n this.active = !this.active;\r\n this.afterToggle.next({ collapsed: this.active, originalEvent });\r\n }\r\n}\r\n","<fieldset\r\n class=\"bg-grayscale-0 border border-grayscale-20 rounded-xbig mb-[10px] min-h-[4.5em] px-2 py-1.5 w-full min-w-0\"\r\n>\r\n <legend\r\n class=\"flex items-center text-grayscale-90 font-open-sans text-sm font-bold px-1 gap-1 ml-4 select-none\"\r\n [class.cursor-pointer]=\"toggleable\"\r\n (sInteractiveContent)=\"toggleActive($event)\"\r\n >\r\n @if (toggleable) {\r\n @if (active) {\r\n <i class=\"fas fa-plus\"></i>\r\n } @else {\r\n <i class=\"fas fa-minus\"></i>\r\n }\r\n }\r\n @if (headerTemplate) {\r\n <ng-container ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n } @else {\r\n @if (icon) {\r\n <i [class]=\"icon\"></i>\r\n }\r\n {{ legend }}\r\n }\r\n </legend>\r\n @if (destroyOnHide ? (toggleable ? active : true) : true) {\r\n <div [@toggleAnimation]=\"destroyOnHide ? null : active ? 'open' : 'closed'\">\r\n <ng-content></ng-content>\r\n </div>\r\n }\r\n</fieldset>\r\n","import { NgModule } from '@angular/core';\r\n\r\nimport { FieldsetComponent } from './fieldset.component';\r\n\r\n@NgModule({\r\n imports: [FieldsetComponent],\r\n exports: [FieldsetComponent],\r\n})\r\nexport class FieldsetModule {}\r\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-file-picker.mjs CHANGED Viewed

@@ -1,23 +1,17 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, EventEmitter, Component, ViewChild, Input, Output, HostListener, NgModule } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import * as i6 from '@ngx-translate/core';
-import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { TranslateService, TranslatePipe } from '@ngx-translate/core';
 import * as i1 from '@seniorsistemas/angular-components/common/deprecated-selector';
 import { DEPRECATED_CONFIG, DeprecatedSelectorDirective } from '@seniorsistemas/angular-components/common/deprecated-selector';
 import { isNullOrUndefined, Breakpoints } from '@seniorsistemas/angular-components/utils';
 import moment from 'moment';
 import { Subject } from 'rxjs';
 import { CustomHttpClient } from '@seniorsistemas/angular-components/common';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i3 from '@seniorsistemas/angular-components/button';
-import { ButtonModule } from '@seniorsistemas/angular-components/button';
-import * as i4 from 'primeng/tooltip';
-import { TooltipModule } from 'primeng/tooltip';
-import * as i5 from '@seniorsistemas/angular-components/progressbar';
-import { ProgressBarModule } from '@seniorsistemas/angular-components/progressbar';
-import { LocaleModule } from '@seniorsistemas/angular-components/locale';
+import { ButtonComponent } from '@seniorsistemas/angular-components/button';
+import { NgTemplateOutlet } from '@angular/common';
+import { ProgressBarComponent } from '@seniorsistemas/angular-components/progressbar';
+import { Tooltip } from 'primeng/tooltip';
 class FilePickerService {
     BASE_URL_FIELD_CUSTOMIZATION = 'platform/field_customization';
@@ -294,7 +288,7 @@ class FilePickerComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilePickerComponent, selector: "s-file-picker, s-file-upload", inputs: { id: "id", chooseLabel: "chooseLabel", removeLabel: "removeLabel", cancelLabel: "cancelLabel", successTooltip: "successTooltip", multiple: "multiple", accept: "accept", supportedExtensions: "supportedExtensions", ariaLabelFileName: "ariaLabelFileName", maxFileSize: "maxFileSize", maxCombinedFileSize: "maxCombinedFileSize", fileLimit: "fileLimit", ariaLabelProgress: "ariaLabelProgress", ariaLabelSuccess: "ariaLabelSuccess", ariaLabelError: "ariaLabelError", ariaLabelRemove: "ariaLabelRemove", formControl: "formControl", disabled: "disabled", showFileUploadDate: "showFileUploadDate", permissions: "permissions", files: "files" }, outputs: { uploadHandler: "uploadHandler", removeFile: "removeFile", cancelUpload: "cancelUpload", downloadFile: "downloadFile", validateErrors: "validateErrors" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FilePickerComponent, isStandalone: true, selector: "s-file-picker, s-file-upload", inputs: { id: "id", chooseLabel: "chooseLabel", removeLabel: "removeLabel", cancelLabel: "cancelLabel", successTooltip: "successTooltip", multiple: "multiple", accept: "accept", supportedExtensions: "supportedExtensions", ariaLabelFileName: "ariaLabelFileName", maxFileSize: "maxFileSize", maxCombinedFileSize: "maxCombinedFileSize", fileLimit: "fileLimit", ariaLabelProgress: "ariaLabelProgress", ariaLabelSuccess: "ariaLabelSuccess", ariaLabelError: "ariaLabelError", ariaLabelRemove: "ariaLabelRemove", formControl: "formControl", disabled: "disabled", showFileUploadDate: "showFileUploadDate", permissions: "permissions", files: "files" }, outputs: { uploadHandler: "uploadHandler", removeFile: "removeFile", cancelUpload: "cancelUpload", downloadFile: "downloadFile", validateErrors: "validateErrors" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
             {
                 provide: DEPRECATED_CONFIG,
                 useValue: {
@@ -303,7 +297,7 @@ class FilePickerComponent {
                     removalVersion: '20.0.0',
                 },
             },
-        ], viewQueries: [{ propertyName: "inputUpload", first: true, predicate: ["inputUpload"], descendants: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true }], hostDirectives: [{ directive: i1.DeprecatedSelectorDirective }], ngImport: i0, template: "<div\n    [id]=\"id\"\n    class=\"file-picker\"\n>\n    <div class=\"file-picker-choose\">\n        <input\n            #inputUpload\n            [id]=\"id + 'input-upload'\"\n            type=\"file\"\n            name=\"file\"\n            [accept]=\"accept\"\n            [multiple]=\"multiple\"\n            (change)=\"_onInputFileSelect($event)\"\n        />\n        @if (permissions.includes(ADD_PERMISSION)) {\n            <s-button\n                [id]=\"id + 'upload-button'\"\n                [label]=\"chooseLabel || 'platform.angular_components.attach_files' | translate\"\n                (clicked)=\"inputUpload.click()\"\n                priority=\"primary\"\n                [disabled]=\"disabled || !!formControl?.disabled || fileLimit === files.length\"\n                [auxiliary]=\"false\"\n            >\n            </s-button>\n        }\n    </div>\n\n    @if (files.length) {\n        <section\n            [id]=\"id + 'fileupload-list'\"\n            class=\"file-picker-list\"\n            role=\"grid\"\n        >\n            @for (file of files; track file; let i = $index) {\n                <div\n                    class=\"file-picker-list-file\"\n                    role=\"row\"\n                >\n                    <div\n                        [id]=\"id + '-file-' + i + '-name'\"\n                        class=\"flex flex-grow items-center justify-between overflow-hidden text-ellipsis text-nowrap\"\n                        role=\"gridcell\"\n                    >\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                (permissions.includes(READ_PERMISSION) && file.savedFile) || file.progress === 100\n                                    ? descriptionUrl\n                                    : description;\n                                context: {\n                                    $implicit: file,\n                                    index: i,\n                                }\n                            \"\n                        >\n                        </ng-container>\n\n                        <span>{{ formatFileSize(file.size) }}</span>\n\n                        @if (modifiedDate) {\n                            <span class=\"file-picker-list-file-name-date\">{{ modifiedDate }}</span>\n                        }\n                    </div>\n                    <div\n                        class=\"file-picker-list-file-status\"\n                        role=\"gridcell\"\n                    >\n                        @if (file.isUploading && !isSmallDevice) {\n                            <div class=\"w-64\">\n                                <s-progressbar\n                                    [value]=\"file.progress ?? 0\"\n                                    [showValue]=\"false\"\n                                    activeColor=\"blue\"\n                                ></s-progressbar>\n                            </div>\n                        }\n\n                        @if (file.isUploading && isSmallDevice) {\n                            <span\n                                [id]=\"id + '-file-' + i + '-spin'\"\n                                class=\"fas fa-circle-notch fa-spin\"\n                                [attr.aria-label]=\"\n                                    ariaLabelProgress || 'platform.angular_components.loading_file' | translate\n                                \"\n                            >\n                            </span>\n                        }\n\n                        @if (!file.isUploading && !file.error && file.progress === 100) {\n                            <span\n                                [id]=\"id + '-file-' + i + '-check'\"\n                                class=\"fas fa-check\"\n                                role=\"alert\"\n                                [attr.aria-label]=\"\n                                    ariaLabelSuccess ||\n                                        successTooltip ||\n                                        'platform.angular_components.file_attached_successfully' | translate\n                                \"\n                                [pTooltip]=\"\n                                    successTooltip || 'platform.angular_components.file_attached_successfully'\n                                        | translate\n                                \"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\"\n                                [appendTo]=\"'body'\"\n                            >\n                            </span>\n                        }\n\n                        @if (file.error?.message) {\n                            <span\n                                [id]=\"id + '-file-' + i + '-error'\"\n                                class=\"fas fa-times\"\n                                role=\"alert\"\n                                [pTooltip]=\"file.error?.message\"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\"\n                                [appendTo]=\"'body'\"\n                            >\n                            </span>\n                        }\n                    </div>\n                    <div\n                        class=\"file-picker-list-file-actions\"\n                        role=\"gridcell\"\n                    >\n                        @if (file.isUploading) {\n                            <a\n                                [id]=\"id + '-file-' + i + '-cancel'\"\n                                class=\"file-picker-list-file-actions-action\"\n                                (click)=\"onCancelUpload(i)\"\n                            >\n                                {{ cancelLabel || 'platform.angular_components.cancel' | translate }}\n                            </a>\n                        }\n\n                        @if (\n                            permissions.includes(REMOVE_PERMISSION) &&\n                            !file.isUploading &&\n                            !(disabled || !!formControl?.disabled)\n                        ) {\n                            <a\n                                role=\"button\"\n                                tabindex=\"0\"\n                                [id]=\"id + '-file-' + i + '-remove'\"\n                                class=\"file-picker-list-file-actions-action\"\n                                (click)=\"onRemoveFile(file)\"\n                                [attr.aria-label]=\"\n                                    ariaLabelRemove || removeLabel || 'platform.angular_components.remove' | translate\n                                \"\n                            >\n                                {{ removeLabel || 'platform.angular_components.remove' | translate }}\n                            </a>\n                        }\n                    </div>\n                </div>\n            }\n        </section>\n    }\n</div>\n\n<ng-template\n    #descriptionUrl\n    let-file\n    let-i=\"index\"\n>\n    <div class=\"flex justify-between\">\n        <div>\n            <a\n                [id]=\"id + '-file-' + i + '-name-link'\"\n                tabindex=\"0\"\n                (click)=\"onDowloadFile(i)\"\n                [attr.aria-label]=\"ariaLabelFileName || file.name\"\n                class=\"break-words\"\n                >{{ file.name }}\n            </a>\n            <a\n                style=\"display: none\"\n                [href]=\"file.objectURL\"\n                target=\"_blank\"\n                download\n                #anchor\n            >\n            </a>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template\n    #description\n    let-file\n>\n    <div class=\"flex justify-between\">\n        <span\n            tabindex=\"0\"\n            [attr.aria-label]=\"ariaLabelFileName || file.name\"\n        >\n            {{ file.name }}\n        </span>\n    </div>\n</ng-template>\n\n", styles: [".file-picker .file-picker-choose{position:relative;margin:15px 0;width:max-content}.file-picker input[type=file]{display:none}.file-picker-list{border:1px solid #ccc}.file-picker-list-file:not(:first-child){border-top:1px solid #ccc}.file-picker-list .file-picker-list-file{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:15px}.file-picker-list .file-picker-list-file .file-picker-list-file-name{display:flex;flex-direction:column;align-self:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.file-picker-list .file-picker-list-file .file-picker-list-file-name .file-picker-list-file-name-date{font-size:.75rem;color:#999}.file-picker-list .file-picker-list-file .file-picker-list-file-name>a{cursor:pointer;text-decoration:none}.file-picker-list .file-picker-list-file .file-picker-list-file-status{align-self:center}.file-picker-list .file-picker-list-file .fas.fa-circle-notch{color:#d8d8d8;font-size:12px}.file-picker-list .file-picker-list-file .fas.fa-check{color:#0c9348;font-size:12px}.file-picker-list .file-picker-list-file .fas.fa-times{color:#c13018;font-size:12px}.file-picker-list .file-picker-list-file .file-picker-list-file-actions{margin-top:15px;align-self:center;width:100%}.file-picker-list .file-picker-list-file .file-picker-list-file-actions a.file-picker-list-file-actions-action{text-decoration:none;color:#428bca}.file-picker-list .file-picker-list-file .file-picker-list-file-actions a.file-picker-list-file-actions-action:hover,.file-picker-list .file-picker-list-file .file-picker-list-file-actions a.file-picker-list-file-actions-action :focus,.file-picker-list .file-picker-list-file .file-picker-list-file-actions a.file-picker-list-file-actions-action :visited{text-decoration:none}@media (min-width: 768px){.file-picker-list .file-picker-list-file{flex-wrap:nowrap}.file-picker-list .file-picker-list-file .file-picker-list-file-name{width:auto;flex-grow:2}.file-picker-list .file-picker-list-file .file-picker-list-file-status{margin:0 15px}.file-picker-list .file-picker-list-file .file-picker-list-file-actions{margin:0;width:auto}}\n"], dependencies: [{ kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked"] }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i5.ProgressBarComponent, selector: "s-progressbar", inputs: ["value", "activeColor", "numberFormatOptions", "targetValue", "label", "targetLabel", "showValue", "mode"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "inputUpload", first: true, predicate: ["inputUpload"], descendants: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true }], hostDirectives: [{ directive: i1.DeprecatedSelectorDirective }], ngImport: i0, template: "<div\n    [id]=\"id\"\n    class=\"file-picker\"\n>\n    <div class=\"file-picker-choose\">\n        <input\n            #inputUpload\n            [id]=\"id + 'input-upload'\"\n            type=\"file\"\n            name=\"file\"\n            [accept]=\"accept\"\n            [multiple]=\"multiple\"\n            (change)=\"_onInputFileSelect($event)\"\n        />\n        @if (permissions.includes(ADD_PERMISSION)) {\n            <s-button\n                [id]=\"id + 'upload-button'\"\n                [label]=\"chooseLabel || 'platform.angular_components.attach_files' | translate\"\n                (clicked)=\"inputUpload.click()\"\n                priority=\"primary\"\n                [disabled]=\"disabled || !!formControl?.disabled || fileLimit === files.length\"\n                [auxiliary]=\"false\"\n            >\n            </s-button>\n        }\n    </div>\n\n    @if (files.length) {\n        <section\n            [id]=\"id + 'fileupload-list'\"\n            class=\"file-picker-list\"\n            role=\"grid\"\n        >\n            @for (file of files; track file; let i = $index) {\n                <div\n                    class=\"file-picker-list-file\"\n                    role=\"row\"\n                >\n                    <div\n                        [id]=\"id + '-file-' + i + '-name'\"\n                        class=\"flex flex-grow items-center justify-between overflow-hidden text-ellipsis text-nowrap\"\n                        role=\"gridcell\"\n                    >\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                (permissions.includes(READ_PERMISSION) && file.savedFile) || file.progress === 100\n                                    ? descriptionUrl\n                                    : description;\n                                context: {\n                                    $implicit: file,\n                                    index: i,\n                                }\n                            \"\n                        >\n                        </ng-container>\n\n                        <span>{{ formatFileSize(file.size) }}</span>\n\n                        @if (modifiedDate) {\n                            <span class=\"file-picker-list-file-name-date\">{{ modifiedDate }}</span>\n                        }\n                    </div>\n                    <div\n                        class=\"file-picker-list-file-status\"\n                        role=\"gridcell\"\n                    >\n                        @if (file.isUploading && !isSmallDevice) {\n                            <div class=\"w-64\">\n                                <s-progressbar\n                                    [value]=\"file.progress ?? 0\"\n                                    [showValue]=\"false\"\n                                    activeColor=\"blue\"\n                                ></s-progressbar>\n                            </div>\n                        }\n\n                        @if (file.isUploading && isSmallDevice) {\n                            <span\n                                [id]=\"id + '-file-' + i + '-spin'\"\n                                class=\"fas fa-circle-notch fa-spin\"\n                                [attr.aria-label]=\"\n                                    ariaLabelProgress || 'platform.angular_components.loading_file' | translate\n                                \"\n                            >\n                            </span>\n                        }\n\n                        @if (!file.isUploading && !file.error && file.progress === 100) {\n                            <span\n                                [id]=\"id + '-file-' + i + '-check'\"\n                                class=\"fas fa-check\"\n                                role=\"alert\"\n                                [attr.aria-label]=\"\n                                    ariaLabelSuccess ||\n                                        successTooltip ||\n                                        'platform.angular_components.file_attached_successfully' | translate\n                                \"\n                                [pTooltip]=\"\n                                    successTooltip || 'platform.angular_components.file_attached_successfully'\n                                        | translate\n                                \"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\"\n                                [appendTo]=\"'body'\"\n                            >\n                            </span>\n                        }\n\n                        @if (file.error?.message) {\n                            <span\n                                [id]=\"id + '-file-' + i + '-error'\"\n                                class=\"fas fa-times\"\n                                role=\"alert\"\n                                [pTooltip]=\"file.error?.message\"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\"\n                                [appendTo]=\"'body'\"\n                            >\n                            </span>\n                        }\n                    </div>\n                    <div\n                        class=\"file-picker-list-file-actions\"\n                        role=\"gridcell\"\n                    >\n                        @if (file.isUploading) {\n                            <a\n                                [id]=\"id + '-file-' + i + '-cancel'\"\n                                class=\"file-picker-list-file-actions-action\"\n                                (click)=\"onCancelUpload(i)\"\n                            >\n                                {{ cancelLabel || 'platform.angular_components.cancel' | translate }}\n                            </a>\n                        }\n\n                        @if (\n                            permissions.includes(REMOVE_PERMISSION) &&\n                            !file.isUploading &&\n                            !(disabled || !!formControl?.disabled)\n                        ) {\n                            <a\n                                role=\"button\"\n                                tabindex=\"0\"\n                                [id]=\"id + '-file-' + i + '-remove'\"\n                                class=\"file-picker-list-file-actions-action\"\n                                (click)=\"onRemoveFile(file)\"\n                                [attr.aria-label]=\"\n                                    ariaLabelRemove || removeLabel || 'platform.angular_components.remove' | translate\n                                \"\n                            >\n                                {{ removeLabel || 'platform.angular_components.remove' | translate }}\n                            </a>\n                        }\n                    </div>\n                </div>\n            }\n        </section>\n    }\n</div>\n\n<ng-template\n    #descriptionUrl\n    let-file\n    let-i=\"index\"\n>\n    <div class=\"flex justify-between\">\n        <div>\n            <a\n                [id]=\"id + '-file-' + i + '-name-link'\"\n                tabindex=\"0\"\n                (click)=\"onDowloadFile(i)\"\n                [attr.aria-label]=\"ariaLabelFileName || file.name\"\n                class=\"break-words\"\n                >{{ file.name }}\n            </a>\n            <a\n                style=\"display: none\"\n                [href]=\"file.objectURL\"\n                target=\"_blank\"\n                download\n                #anchor\n            >\n            </a>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template\n    #description\n    let-file\n>\n    <div class=\"flex justify-between\">\n        <span\n            tabindex=\"0\"\n            [attr.aria-label]=\"ariaLabelFileName || file.name\"\n        >\n            {{ file.name }}\n        </span>\n    </div>\n</ng-template>\n\n", styles: [".file-picker .file-picker-choose{position:relative;margin:15px 0;width:max-content}.file-picker input[type=file]{display:none}.file-picker-list{border:1px solid #ccc}.file-picker-list-file:not(:first-child){border-top:1px solid #ccc}.file-picker-list .file-picker-list-file{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:15px}.file-picker-list .file-picker-list-file .file-picker-list-file-name{display:flex;flex-direction:column;align-self:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.file-picker-list .file-picker-list-file .file-picker-list-file-name .file-picker-list-file-name-date{font-size:.75rem;color:#999}.file-picker-list .file-picker-list-file .file-picker-list-file-name>a{cursor:pointer;text-decoration:none}.file-picker-list .file-picker-list-file .file-picker-list-file-status{align-self:center}.file-picker-list .file-picker-list-file .fas.fa-circle-notch{color:#d8d8d8;font-size:12px}.file-picker-list .file-picker-list-file .fas.fa-check{color:#0c9348;font-size:12px}.file-picker-list .file-picker-list-file .fas.fa-times{color:#c13018;font-size:12px}.file-picker-list .file-picker-list-file .file-picker-list-file-actions{margin-top:15px;align-self:center;width:100%}.file-picker-list .file-picker-list-file .file-picker-list-file-actions a.file-picker-list-file-actions-action{text-decoration:none;color:#428bca}.file-picker-list .file-picker-list-file .file-picker-list-file-actions a.file-picker-list-file-actions-action:hover,.file-picker-list .file-picker-list-file .file-picker-list-file-actions a.file-picker-list-file-actions-action :focus,.file-picker-list .file-picker-list-file .file-picker-list-file-actions a.file-picker-list-file-actions-action :visited{text-decoration:none}@media (min-width: 768px){.file-picker-list .file-picker-list-file{flex-wrap:nowrap}.file-picker-list .file-picker-list-file .file-picker-list-file-name{width:auto;flex-grow:2}.file-picker-list .file-picker-list-file .file-picker-list-file-status{margin:0 15px}.file-picker-list .file-picker-list-file .file-picker-list-file-actions{margin:0;width:auto}}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor", "menuAriaLabel", "ariaLabel"], outputs: ["clicked"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ProgressBarComponent, selector: "s-progressbar", inputs: ["value", "activeColor", "numberFormatOptions", "targetValue", "label", "targetLabel", "showValue", "mode"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilePickerComponent, decorators: [{
             type: Component,
@@ -316,7 +310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                                 removalVersion: '20.0.0',
                             },
                         },
-                    ], template: "<div\n    [id]=\"id\"\n    class=\"file-picker\"\n>\n    <div class=\"file-picker-choose\">\n        <input\n            #inputUpload\n            [id]=\"id + 'input-upload'\"\n            type=\"file\"\n            name=\"file\"\n            [accept]=\"accept\"\n            [multiple]=\"multiple\"\n            (change)=\"_onInputFileSelect($event)\"\n        />\n        @if (permissions.includes(ADD_PERMISSION)) {\n            <s-button\n                [id]=\"id + 'upload-button'\"\n                [label]=\"chooseLabel || 'platform.angular_components.attach_files' | translate\"\n                (clicked)=\"inputUpload.click()\"\n                priority=\"primary\"\n                [disabled]=\"disabled || !!formControl?.disabled || fileLimit === files.length\"\n                [auxiliary]=\"false\"\n            >\n            </s-button>\n        }\n    </div>\n\n    @if (files.length) {\n        <section\n            [id]=\"id + 'fileupload-list'\"\n            class=\"file-picker-list\"\n            role=\"grid\"\n        >\n            @for (file of files; track file; let i = $index) {\n                <div\n                    class=\"file-picker-list-file\"\n                    role=\"row\"\n                >\n                    <div\n                        [id]=\"id + '-file-' + i + '-name'\"\n                        class=\"flex flex-grow items-center justify-between overflow-hidden text-ellipsis text-nowrap\"\n                        role=\"gridcell\"\n                    >\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                (permissions.includes(READ_PERMISSION) && file.savedFile) || file.progress === 100\n                                    ? descriptionUrl\n                                    : description;\n                                context: {\n                                    $implicit: file,\n                                    index: i,\n                                }\n                            \"\n                        >\n                        </ng-container>\n\n                        <span>{{ formatFileSize(file.size) }}</span>\n\n                        @if (modifiedDate) {\n                            <span class=\"file-picker-list-file-name-date\">{{ modifiedDate }}</span>\n                        }\n                    </div>\n                    <div\n                        class=\"file-picker-list-file-status\"\n                        role=\"gridcell\"\n                    >\n                        @if (file.isUploading && !isSmallDevice) {\n                            <div class=\"w-64\">\n                                <s-progressbar\n                                    [value]=\"file.progress ?? 0\"\n                                    [showValue]=\"false\"\n                                    activeColor=\"blue\"\n                                ></s-progressbar>\n                            </div>\n                        }\n\n                        @if (file.isUploading && isSmallDevice) {\n                            <span\n                                [id]=\"id + '-file-' + i + '-spin'\"\n                                class=\"fas fa-circle-notch fa-spin\"\n                                [attr.aria-label]=\"\n                                    ariaLabelProgress || 'platform.angular_components.loading_file' | translate\n                                \"\n                            >\n                            </span>\n                        }\n\n                        @if (!file.isUploading && !file.error && file.progress === 100) {\n                            <span\n                                [id]=\"id + '-file-' + i + '-check'\"\n                                class=\"fas fa-check\"\n                                role=\"alert\"\n                                [attr.aria-label]=\"\n                                    ariaLabelSuccess ||\n                                        successTooltip ||\n                                        'platform.angular_components.file_attached_successfully' | translate\n                                \"\n                                [pTooltip]=\"\n                                    successTooltip || 'platform.angular_components.file_attached_successfully'\n                                        | translate\n                                \"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\"\n                                [appendTo]=\"'body'\"\n                            >\n                            </span>\n                        }\n\n                        @if (file.error?.message) {\n                            <span\n                                [id]=\"id + '-file-' + i + '-error'\"\n                                class=\"fas fa-times\"\n                                role=\"alert\"\n                                [pTooltip]=\"file.error?.message\"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\"\n                                [appendTo]=\"'body'\"\n                            >\n                            </span>\n                        }\n                    </div>\n                    <div\n                        class=\"file-picker-list-file-actions\"\n                        role=\"gridcell\"\n                    >\n                        @if (file.isUploading) {\n                            <a\n                                [id]=\"id + '-file-' + i + '-cancel'\"\n                                class=\"file-picker-list-file-actions-action\"\n                                (click)=\"onCancelUpload(i)\"\n                            >\n                                {{ cancelLabel || 'platform.angular_components.cancel' | translate }}\n                            </a>\n                        }\n\n                        @if (\n                            permissions.includes(REMOVE_PERMISSION) &&\n                            !file.isUploading &&\n                            !(disabled || !!formControl?.disabled)\n                        ) {\n                            <a\n                                role=\"button\"\n                                tabindex=\"0\"\n                                [id]=\"id + '-file-' + i + '-remove'\"\n                                class=\"file-picker-list-file-actions-action\"\n                                (click)=\"onRemoveFile(file)\"\n                                [attr.aria-label]=\"\n                                    ariaLabelRemove || removeLabel || 'platform.angular_components.remove' | translate\n                                \"\n                            >\n                                {{ removeLabel || 'platform.angular_components.remove' | translate }}\n                            </a>\n                        }\n                    </div>\n                </div>\n            }\n        </section>\n    }\n</div>\n\n<ng-template\n    #descriptionUrl\n    let-file\n    let-i=\"index\"\n>\n    <div class=\"flex justify-between\">\n        <div>\n            <a\n                [id]=\"id + '-file-' + i + '-name-link'\"\n                tabindex=\"0\"\n                (click)=\"onDowloadFile(i)\"\n                [attr.aria-label]=\"ariaLabelFileName || file.name\"\n                class=\"break-words\"\n                >{{ file.name }}\n            </a>\n            <a\n                style=\"display: none\"\n                [href]=\"file.objectURL\"\n                target=\"_blank\"\n                download\n                #anchor\n            >\n            </a>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template\n    #description\n    let-file\n>\n    <div class=\"flex justify-between\">\n        <span\n            tabindex=\"0\"\n            [attr.aria-label]=\"ariaLabelFileName || file.name\"\n        >\n            {{ file.name }}\n        </span>\n    </div>\n</ng-template>\n\n", styles: [".file-picker .file-picker-choose{position:relative;margin:15px 0;width:max-content}.file-picker input[type=file]{display:none}.file-picker-list{border:1px solid #ccc}.file-picker-list-file:not(:first-child){border-top:1px solid #ccc}.file-picker-list .file-picker-list-file{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:15px}.file-picker-list .file-picker-list-file .file-picker-list-file-name{display:flex;flex-direction:column;align-self:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.file-picker-list .file-picker-list-file .file-picker-list-file-name .file-picker-list-file-name-date{font-size:.75rem;color:#999}.file-picker-list .file-picker-list-file .file-picker-list-file-name>a{cursor:pointer;text-decoration:none}.file-picker-list .file-picker-list-file .file-picker-list-file-status{align-self:center}.file-picker-list .file-picker-list-file .fas.fa-circle-notch{color:#d8d8d8;font-size:12px}.file-picker-list .file-picker-list-file .fas.fa-check{color:#0c9348;font-size:12px}.file-picker-list .file-picker-list-file .fas.fa-times{color:#c13018;font-size:12px}.file-picker-list .file-picker-list-file .file-picker-list-file-actions{margin-top:15px;align-self:center;width:100%}.file-picker-list .file-picker-list-file .file-picker-list-file-actions a.file-picker-list-file-actions-action{text-decoration:none;color:#428bca}.file-picker-list .file-picker-list-file .file-picker-list-file-actions a.file-picker-list-file-actions-action:hover,.file-picker-list .file-picker-list-file .file-picker-list-file-actions a.file-picker-list-file-actions-action :focus,.file-picker-list .file-picker-list-file .file-picker-list-file-actions a.file-picker-list-file-actions-action :visited{text-decoration:none}@media (min-width: 768px){.file-picker-list .file-picker-list-file{flex-wrap:nowrap}.file-picker-list .file-picker-list-file .file-picker-list-file-name{width:auto;flex-grow:2}.file-picker-list .file-picker-list-file .file-picker-list-file-status{margin:0 15px}.file-picker-list .file-picker-list-file .file-picker-list-file-actions{margin:0;width:auto}}\n"] }]
+                    ], standalone: true, imports: [ButtonComponent, NgTemplateOutlet, ProgressBarComponent, Tooltip, TranslatePipe], template: "<div\n    [id]=\"id\"\n    class=\"file-picker\"\n>\n    <div class=\"file-picker-choose\">\n        <input\n            #inputUpload\n            [id]=\"id + 'input-upload'\"\n            type=\"file\"\n            name=\"file\"\n            [accept]=\"accept\"\n            [multiple]=\"multiple\"\n            (change)=\"_onInputFileSelect($event)\"\n        />\n        @if (permissions.includes(ADD_PERMISSION)) {\n            <s-button\n                [id]=\"id + 'upload-button'\"\n                [label]=\"chooseLabel || 'platform.angular_components.attach_files' | translate\"\n                (clicked)=\"inputUpload.click()\"\n                priority=\"primary\"\n                [disabled]=\"disabled || !!formControl?.disabled || fileLimit === files.length\"\n                [auxiliary]=\"false\"\n            >\n            </s-button>\n        }\n    </div>\n\n    @if (files.length) {\n        <section\n            [id]=\"id + 'fileupload-list'\"\n            class=\"file-picker-list\"\n            role=\"grid\"\n        >\n            @for (file of files; track file; let i = $index) {\n                <div\n                    class=\"file-picker-list-file\"\n                    role=\"row\"\n                >\n                    <div\n                        [id]=\"id + '-file-' + i + '-name'\"\n                        class=\"flex flex-grow items-center justify-between overflow-hidden text-ellipsis text-nowrap\"\n                        role=\"gridcell\"\n                    >\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                (permissions.includes(READ_PERMISSION) && file.savedFile) || file.progress === 100\n                                    ? descriptionUrl\n                                    : description;\n                                context: {\n                                    $implicit: file,\n                                    index: i,\n                                }\n                            \"\n                        >\n                        </ng-container>\n\n                        <span>{{ formatFileSize(file.size) }}</span>\n\n                        @if (modifiedDate) {\n                            <span class=\"file-picker-list-file-name-date\">{{ modifiedDate }}</span>\n                        }\n                    </div>\n                    <div\n                        class=\"file-picker-list-file-status\"\n                        role=\"gridcell\"\n                    >\n                        @if (file.isUploading && !isSmallDevice) {\n                            <div class=\"w-64\">\n                                <s-progressbar\n                                    [value]=\"file.progress ?? 0\"\n                                    [showValue]=\"false\"\n                                    activeColor=\"blue\"\n                                ></s-progressbar>\n                            </div>\n                        }\n\n                        @if (file.isUploading && isSmallDevice) {\n                            <span\n                                [id]=\"id + '-file-' + i + '-spin'\"\n                                class=\"fas fa-circle-notch fa-spin\"\n                                [attr.aria-label]=\"\n                                    ariaLabelProgress || 'platform.angular_components.loading_file' | translate\n                                \"\n                            >\n                            </span>\n                        }\n\n                        @if (!file.isUploading && !file.error && file.progress === 100) {\n                            <span\n                                [id]=\"id + '-file-' + i + '-check'\"\n                                class=\"fas fa-check\"\n                                role=\"alert\"\n                                [attr.aria-label]=\"\n                                    ariaLabelSuccess ||\n                                        successTooltip ||\n                                        'platform.angular_components.file_attached_successfully' | translate\n                                \"\n                                [pTooltip]=\"\n                                    successTooltip || 'platform.angular_components.file_attached_successfully'\n                                        | translate\n                                \"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\"\n                                [appendTo]=\"'body'\"\n                            >\n                            </span>\n                        }\n\n                        @if (file.error?.message) {\n                            <span\n                                [id]=\"id + '-file-' + i + '-error'\"\n                                class=\"fas fa-times\"\n                                role=\"alert\"\n                                [pTooltip]=\"file.error?.message\"\n                                tooltipPosition=\"top\"\n                                showDelay=\"500\"\n                                [appendTo]=\"'body'\"\n                            >\n                            </span>\n                        }\n                    </div>\n                    <div\n                        class=\"file-picker-list-file-actions\"\n                        role=\"gridcell\"\n                    >\n                        @if (file.isUploading) {\n                            <a\n                                [id]=\"id + '-file-' + i + '-cancel'\"\n                                class=\"file-picker-list-file-actions-action\"\n                                (click)=\"onCancelUpload(i)\"\n                            >\n                                {{ cancelLabel || 'platform.angular_components.cancel' | translate }}\n                            </a>\n                        }\n\n                        @if (\n                            permissions.includes(REMOVE_PERMISSION) &&\n                            !file.isUploading &&\n                            !(disabled || !!formControl?.disabled)\n                        ) {\n                            <a\n                                role=\"button\"\n                                tabindex=\"0\"\n                                [id]=\"id + '-file-' + i + '-remove'\"\n                                class=\"file-picker-list-file-actions-action\"\n                                (click)=\"onRemoveFile(file)\"\n                                [attr.aria-label]=\"\n                                    ariaLabelRemove || removeLabel || 'platform.angular_components.remove' | translate\n                                \"\n                            >\n                                {{ removeLabel || 'platform.angular_components.remove' | translate }}\n                            </a>\n                        }\n                    </div>\n                </div>\n            }\n        </section>\n    }\n</div>\n\n<ng-template\n    #descriptionUrl\n    let-file\n    let-i=\"index\"\n>\n    <div class=\"flex justify-between\">\n        <div>\n            <a\n                [id]=\"id + '-file-' + i + '-name-link'\"\n                tabindex=\"0\"\n                (click)=\"onDowloadFile(i)\"\n                [attr.aria-label]=\"ariaLabelFileName || file.name\"\n                class=\"break-words\"\n                >{{ file.name }}\n            </a>\n            <a\n                style=\"display: none\"\n                [href]=\"file.objectURL\"\n                target=\"_blank\"\n                download\n                #anchor\n            >\n            </a>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template\n    #description\n    let-file\n>\n    <div class=\"flex justify-between\">\n        <span\n            tabindex=\"0\"\n            [attr.aria-label]=\"ariaLabelFileName || file.name\"\n        >\n            {{ file.name }}\n        </span>\n    </div>\n</ng-template>\n\n", styles: [".file-picker .file-picker-choose{position:relative;margin:15px 0;width:max-content}.file-picker input[type=file]{display:none}.file-picker-list{border:1px solid #ccc}.file-picker-list-file:not(:first-child){border-top:1px solid #ccc}.file-picker-list .file-picker-list-file{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;padding:15px}.file-picker-list .file-picker-list-file .file-picker-list-file-name{display:flex;flex-direction:column;align-self:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.file-picker-list .file-picker-list-file .file-picker-list-file-name .file-picker-list-file-name-date{font-size:.75rem;color:#999}.file-picker-list .file-picker-list-file .file-picker-list-file-name>a{cursor:pointer;text-decoration:none}.file-picker-list .file-picker-list-file .file-picker-list-file-status{align-self:center}.file-picker-list .file-picker-list-file .fas.fa-circle-notch{color:#d8d8d8;font-size:12px}.file-picker-list .file-picker-list-file .fas.fa-check{color:#0c9348;font-size:12px}.file-picker-list .file-picker-list-file .fas.fa-times{color:#c13018;font-size:12px}.file-picker-list .file-picker-list-file .file-picker-list-file-actions{margin-top:15px;align-self:center;width:100%}.file-picker-list .file-picker-list-file .file-picker-list-file-actions a.file-picker-list-file-actions-action{text-decoration:none;color:#428bca}.file-picker-list .file-picker-list-file .file-picker-list-file-actions a.file-picker-list-file-actions-action:hover,.file-picker-list .file-picker-list-file .file-picker-list-file-actions a.file-picker-list-file-actions-action :focus,.file-picker-list .file-picker-list-file .file-picker-list-file-actions a.file-picker-list-file-actions-action :visited{text-decoration:none}@media (min-width: 768px){.file-picker-list .file-picker-list-file{flex-wrap:nowrap}.file-picker-list .file-picker-list-file .file-picker-list-file-name{width:auto;flex-grow:2}.file-picker-list .file-picker-list-file .file-picker-list-file-status{margin:0 15px}.file-picker-list .file-picker-list-file .file-picker-list-file-actions{margin:0;width:auto}}\n"] }]
         }], propDecorators: { inputUpload: [{
                 type: ViewChild,
                 args: ['inputUpload', { static: false }]
@@ -382,14 +376,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class FilePickerModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: FilePickerModule, declarations: [FilePickerComponent], imports: [CommonModule, ButtonModule, TooltipModule, ProgressBarModule, TranslateModule, LocaleModule], exports: [FilePickerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilePickerModule, providers: [FilePickerService], imports: [CommonModule, ButtonModule, TooltipModule, ProgressBarModule, TranslateModule, LocaleModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: FilePickerModule, imports: [FilePickerComponent], exports: [FilePickerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilePickerModule, providers: [FilePickerService], imports: [FilePickerComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilePickerModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [FilePickerComponent],
-                    imports: [CommonModule, ButtonModule, TooltipModule, ProgressBarModule, TranslateModule, LocaleModule],
+                    imports: [FilePickerComponent],
                     providers: [FilePickerService],
                     exports: [FilePickerComponent],
                 }]