@seniorsistemas/angular-components 19.7.3 → 19.7.4

package/fesm2022/seniorsistemas-angular-components-text-area.mjs

@@ -1,13 +1,10 @@
 import * as i0 from '@angular/core';
 import { inject, ChangeDetectorRef, forwardRef, ElementRef, Component, ViewChild, Input, NgModule } from '@angular/core';
-import * as i2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i3 from '@seniorsistemas/angular-components/speech-recognition';
-import { SpeechRecognitionModule } from '@seniorsistemas/angular-components/speech-recognition';
-import * as i4 from 'primeng/keyfilter';
-import { KeyFilterModule } from 'primeng/keyfilter';
+import * as i1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { KeyFilter } from 'primeng/keyfilter';
+import { NgStyle } from '@angular/common';
+import { SpeechRecognitionComponent } from '@seniorsistemas/angular-components/speech-recognition';
 
 /**
  * @description Componente de área de texto com suporte a reconhecimento de voz,
@@ -100,13 +97,13 @@ class TextAreaComponent {
         this.setValue(recognizedText);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextAreaComponent, selector: "s-textarea", inputs: { inputId: "inputId", rows: "rows", speechRecognition: "speechRecognition", keyFilter: "keyFilter", keepContext: "keepContext", speechRecognitionPlaceholder: "speechRecognitionPlaceholder", maxLength: "maxLength", placeholder: "placeholder", inputStyle: "inputStyle", readOnly: "readOnly" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TextAreaComponent, isStandalone: true, selector: "s-textarea", inputs: { inputId: "inputId", rows: "rows", speechRecognition: "speechRecognition", keyFilter: "keyFilter", keepContext: "keepContext", speechRecognitionPlaceholder: "speechRecognitionPlaceholder", maxLength: "maxLength", placeholder: "placeholder", inputStyle: "inputStyle", readOnly: "readOnly" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TextAreaComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "textAreaElement", first: true, predicate: ["textArea"], descendants: true, read: ElementRef }], ngImport: i0, template: "<textarea\n    *ngIf=\"keyFilter\"\n    #textArea\n    class=\"textarea\"\n    [pKeyFilter]=\"keyFilter\"\n    [id]=\"inputId\"\n    [rows]=\"rows\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"setValue($event)\"\n    [disabled]=\"disabled\"\n    [ngStyle]=\"inputStyle\"\n    [readOnly]=\"readOnly\"\n    [maxlength]=\"maxLength\"\n    [placeholder]=\"placeholder ? placeholder : ''\"\n></textarea>\n\n<textarea\n    *ngIf=\"!keyFilter\"\n    #textArea\n    class=\"textarea\"\n    [id]=\"inputId\"\n    [rows]=\"rows\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [ngStyle]=\"inputStyle\"\n    [readOnly]=\"readOnly\"\n    [maxlength]=\"maxLength\"\n    [placeholder]=\"placeholder ? placeholder : ''\"\n    (ngModelChange)=\"setValue($event)\"\n></textarea>\n\n<s-speech-recognition\n    *ngIf=\"speechRecognition && renderTextArea\"\n    [textAreaElement]=\"textAreaElement.nativeElement\"\n    [keepContext]=\"keepContext\"\n    [speechRecognitionPlaceholder]=\"speechRecognitionPlaceholder\"\n    (recognizedText)=\"handleRecognizedText($event)\"\n>\n</s-speech-recognition>\n", styles: [".textarea{border-radius:3px;border:1px solid #c1c1cc;background:#fff;width:100%;max-width:100%;min-height:4em;min-width:10em;outline:none;padding:8px;display:block}.textarea:disabled{opacity:.5}.textarea:focus{transition:border-color .2s ease-out;border:1px solid #428bca}:host.ng-invalid.ng-dirty .textarea{border-color:#c13018}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.SpeechRecognitionComponent, selector: "s-speech-recognition", inputs: ["textAreaElement", "keepContext", "speechRecognitionPlaceholder"], outputs: ["recognizedText"] }, { kind: "directive", type: i4.KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }] });
+        ], viewQueries: [{ propertyName: "textAreaElement", first: true, predicate: ["textArea"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (keyFilter) {\r\n    <textarea\r\n        #textArea\r\n        class=\"textarea\"\r\n        [pKeyFilter]=\"keyFilter\"\r\n        [id]=\"inputId\"\r\n        [rows]=\"rows\"\r\n        [ngModel]=\"value\"\r\n        (ngModelChange)=\"setValue($event)\"\r\n        [disabled]=\"disabled\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [readOnly]=\"readOnly\"\r\n        [maxlength]=\"maxLength\"\r\n        [placeholder]=\"placeholder ? placeholder : ''\"\r\n    ></textarea>\r\n}\r\n\r\n@if (!keyFilter) {\r\n    <textarea\r\n        #textArea\r\n        class=\"textarea\"\r\n        [id]=\"inputId\"\r\n        [rows]=\"rows\"\r\n        [(ngModel)]=\"value\"\r\n        [disabled]=\"disabled\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [readOnly]=\"readOnly\"\r\n        [maxlength]=\"maxLength\"\r\n        [placeholder]=\"placeholder ? placeholder : ''\"\r\n        (ngModelChange)=\"setValue($event)\"\r\n    ></textarea>\r\n}\r\n\r\n@if (speechRecognition && renderTextArea) {\r\n    <s-speech-recognition\r\n        [textAreaElement]=\"textAreaElement.nativeElement\"\r\n        [keepContext]=\"keepContext\"\r\n        [speechRecognitionPlaceholder]=\"speechRecognitionPlaceholder\"\r\n        (recognizedText)=\"handleRecognizedText($event)\"\r\n    >\r\n    </s-speech-recognition>\r\n}\r\n", styles: [".textarea{border-radius:3px;border:1px solid #c1c1cc;background:#fff;width:100%;max-width:100%;min-height:4em;min-width:10em;outline:none;padding:8px;display:block}.textarea:disabled{opacity:.5}.textarea:focus{transition:border-color .2s ease-out;border:1px solid #428bca}:host.ng-invalid.ng-dirty .textarea{border-color:#c13018}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpeechRecognitionComponent, selector: "s-speech-recognition", inputs: ["textAreaElement", "keepContext", "speechRecognitionPlaceholder"], outputs: ["recognizedText"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
@@ -116,7 +113,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: forwardRef(() => TextAreaComponent),
                             multi: true,
                         },
-                    ], template: "<textarea\n    *ngIf=\"keyFilter\"\n    #textArea\n    class=\"textarea\"\n    [pKeyFilter]=\"keyFilter\"\n    [id]=\"inputId\"\n    [rows]=\"rows\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"setValue($event)\"\n    [disabled]=\"disabled\"\n    [ngStyle]=\"inputStyle\"\n    [readOnly]=\"readOnly\"\n    [maxlength]=\"maxLength\"\n    [placeholder]=\"placeholder ? placeholder : ''\"\n></textarea>\n\n<textarea\n    *ngIf=\"!keyFilter\"\n    #textArea\n    class=\"textarea\"\n    [id]=\"inputId\"\n    [rows]=\"rows\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [ngStyle]=\"inputStyle\"\n    [readOnly]=\"readOnly\"\n    [maxlength]=\"maxLength\"\n    [placeholder]=\"placeholder ? placeholder : ''\"\n    (ngModelChange)=\"setValue($event)\"\n></textarea>\n\n<s-speech-recognition\n    *ngIf=\"speechRecognition && renderTextArea\"\n    [textAreaElement]=\"textAreaElement.nativeElement\"\n    [keepContext]=\"keepContext\"\n    [speechRecognitionPlaceholder]=\"speechRecognitionPlaceholder\"\n    (recognizedText)=\"handleRecognizedText($event)\"\n>\n</s-speech-recognition>\n", styles: [".textarea{border-radius:3px;border:1px solid #c1c1cc;background:#fff;width:100%;max-width:100%;min-height:4em;min-width:10em;outline:none;padding:8px;display:block}.textarea:disabled{opacity:.5}.textarea:focus{transition:border-color .2s ease-out;border:1px solid #428bca}:host.ng-invalid.ng-dirty .textarea{border-color:#c13018}\n"] }]
+                    ], standalone: true, imports: [FormsModule, KeyFilter, NgStyle, SpeechRecognitionComponent], template: "@if (keyFilter) {\r\n    <textarea\r\n        #textArea\r\n        class=\"textarea\"\r\n        [pKeyFilter]=\"keyFilter\"\r\n        [id]=\"inputId\"\r\n        [rows]=\"rows\"\r\n        [ngModel]=\"value\"\r\n        (ngModelChange)=\"setValue($event)\"\r\n        [disabled]=\"disabled\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [readOnly]=\"readOnly\"\r\n        [maxlength]=\"maxLength\"\r\n        [placeholder]=\"placeholder ? placeholder : ''\"\r\n    ></textarea>\r\n}\r\n\r\n@if (!keyFilter) {\r\n    <textarea\r\n        #textArea\r\n        class=\"textarea\"\r\n        [id]=\"inputId\"\r\n        [rows]=\"rows\"\r\n        [(ngModel)]=\"value\"\r\n        [disabled]=\"disabled\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [readOnly]=\"readOnly\"\r\n        [maxlength]=\"maxLength\"\r\n        [placeholder]=\"placeholder ? placeholder : ''\"\r\n        (ngModelChange)=\"setValue($event)\"\r\n    ></textarea>\r\n}\r\n\r\n@if (speechRecognition && renderTextArea) {\r\n    <s-speech-recognition\r\n        [textAreaElement]=\"textAreaElement.nativeElement\"\r\n        [keepContext]=\"keepContext\"\r\n        [speechRecognitionPlaceholder]=\"speechRecognitionPlaceholder\"\r\n        (recognizedText)=\"handleRecognizedText($event)\"\r\n    >\r\n    </s-speech-recognition>\r\n}\r\n", styles: [".textarea{border-radius:3px;border:1px solid #c1c1cc;background:#fff;width:100%;max-width:100%;min-height:4em;min-width:10em;outline:none;padding:8px;display:block}.textarea:disabled{opacity:.5}.textarea:focus{transition:border-color .2s ease-out;border:1px solid #428bca}:host.ng-invalid.ng-dirty .textarea{border-color:#c13018}\n"] }]
         }], propDecorators: { textAreaElement: [{
                 type: ViewChild,
                 args: ['textArea', { read: ElementRef }]
@@ -144,29 +141,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class TextAreaModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextAreaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TextAreaModule, declarations: [TextAreaComponent], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            SpeechRecognitionModule,
-            KeyFilterModule], exports: [TextAreaComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextAreaModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            SpeechRecognitionModule,
-            KeyFilterModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TextAreaModule, imports: [TextAreaComponent], exports: [TextAreaComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextAreaModule, imports: [TextAreaComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextAreaModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [TextAreaComponent],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        SpeechRecognitionModule,
-                        KeyFilterModule
-                    ],
-                    exports: [TextAreaComponent]
+                    imports: [TextAreaComponent],
+                    exports: [TextAreaComponent],
                 }]
         }] });
 

package/fesm2022/seniorsistemas-angular-components-text-area.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"seniorsistemas-angular-components-text-area.mjs","sources":["../../projects/angular-components/text-area/src/lib/text-area/text-area.component.ts","../../projects/angular-components/text-area/src/lib/text-area/text-area.component.html","../../projects/angular-components/text-area/src/lib/text-area.module.ts","../../projects/angular-components/text-area/src/seniorsistemas-angular-components-text-area.ts"],"sourcesContent":["import { ChangeDetectorRef, Component, ElementRef, forwardRef, Input, ViewChild, inject } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { KeyFilterPattern } from 'primeng/keyfilter';\n\n/**\n * @description Componente de área de texto com suporte a reconhecimento de voz,\n * filtro de teclas, comprimento máximo e integração com `ControlValueAccessor`.\n * Renderiza condicionalmente o componente `SpeechRecognitionComponent` quando\n * a flag `speechRecognition` está ativa.\n *\n * @example\n * ```html\n * <s-textarea\n *   formControlName=\"descricao\"\n *   [rows]=\"6\"\n *   [maxLength]=\"500\"\n *   placeholder=\"Digite aqui...\" />\n * ```\n *\n * @category Inputs\n */\n@Component({\n    selector: 's-textarea',\n    templateUrl: './text-area.component.html',\n    styleUrls: ['./text-area.component.scss'],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => TextAreaComponent),\n            multi: true,\n        },\n    ],\n})\nexport class TextAreaComponent implements ControlValueAccessor {\n    private readonly cdr = inject(ChangeDetectorRef);\n\n    onChange: (value: string) => void = () => {};\n    onTouched: (value: string) => void = () => {};\n    disabled = false;\n    value = '';\n    private _textAreaElement: ElementRef<HTMLTextAreaElement> | undefined;\n\n    @ViewChild('textArea', { read: ElementRef })\n    public get textAreaElement(): ElementRef<HTMLTextAreaElement> {\n        return this._textAreaElement as ElementRef<HTMLTextAreaElement>;\n    }\n\n    public set textAreaElement(value: ElementRef<HTMLTextAreaElement>) {\n        this._textAreaElement = value;\n        setTimeout(() => {\n            this.renderTextArea = true;\n            this.cdr.detectChanges();\n        });\n    }\n\n    /** @description Identificador do elemento `<textarea>` no DOM. @default 'textarea-{random}' */\n    @Input() inputId = `textarea-${Math.random()}`;\n    /** @description Número de linhas visíveis no textarea. @default 5 */\n    @Input() rows = 5;\n    /** @description Habilita o botão de reconhecimento de voz. @default false */\n    @Input() speechRecognition = false;\n    /** @description Filtro de teclas aceitas, usando padrão ou expressão regular. */\n    @Input() keyFilter: RegExp | KeyFilterPattern | null | undefined;\n    /** @description Quando `true`, mantém o contexto ao reiniciar o reconhecimento de voz. @default false */\n    @Input() keepContext = false;\n    /** @description Placeholder exibido durante o reconhecimento de voz. @default '' */\n    @Input() speechRecognitionPlaceholder = '';\n    /** @description Número máximo de caracteres aceitos. @default null (ilimitado) */\n    @Input() maxLength: number | null = null;\n    /** @description Texto exibido quando o campo está vazio. */\n    @Input() placeholder: string | undefined;\n\n    private _inputStyle: Partial<CSSStyleDeclaration> = {\n        resize: 'vertical',\n    };\n    /** @description Estilos inline aplicados ao elemento `<textarea>` interno. @default `{ resize: 'vertical' }` */\n    @Input() get inputStyle(): Partial<CSSStyleDeclaration> {\n        return this._inputStyle;\n    }\n    set inputStyle(value: Partial<CSSStyleDeclaration>) {\n        this._inputStyle = {\n            ...value,\n            ...this._inputStyle,\n        };\n    }\n    /** @description Coloca o textarea em modo somente leitura. @default false */\n    @Input() readOnly = false;\n\n    renderTextArea = false;\n\n    writeValue(obj: string): void {\n        this.value = obj;\n    }\n\n    registerOnChange(fn: (value: string) => void): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    setValue(value: string | number) {\n        if (this.disabled) {\n            return;\n        }\n        this.value = value.toString();\n        this.writeValue(this.value);\n        this.onChange(this.value);\n        this.onTouched(this.value);\n    }\n\n    handleRecognizedText(recognizedText: string) {\n        this.setValue(recognizedText);\n    }\n}\n\n","<textarea\n    *ngIf=\"keyFilter\"\n    #textArea\n    class=\"textarea\"\n    [pKeyFilter]=\"keyFilter\"\n    [id]=\"inputId\"\n    [rows]=\"rows\"\n    [ngModel]=\"value\"\n    (ngModelChange)=\"setValue($event)\"\n    [disabled]=\"disabled\"\n    [ngStyle]=\"inputStyle\"\n    [readOnly]=\"readOnly\"\n    [maxlength]=\"maxLength\"\n    [placeholder]=\"placeholder ? placeholder : ''\"\n></textarea>\n\n<textarea\n    *ngIf=\"!keyFilter\"\n    #textArea\n    class=\"textarea\"\n    [id]=\"inputId\"\n    [rows]=\"rows\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [ngStyle]=\"inputStyle\"\n    [readOnly]=\"readOnly\"\n    [maxlength]=\"maxLength\"\n    [placeholder]=\"placeholder ? placeholder : ''\"\n    (ngModelChange)=\"setValue($event)\"\n></textarea>\n\n<s-speech-recognition\n    *ngIf=\"speechRecognition && renderTextArea\"\n    [textAreaElement]=\"textAreaElement.nativeElement\"\n    [keepContext]=\"keepContext\"\n    [speechRecognitionPlaceholder]=\"speechRecognitionPlaceholder\"\n    (recognizedText)=\"handleRecognizedText($event)\"\n>\n</s-speech-recognition>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TextAreaComponent } from './text-area/text-area.component';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { KeyFilterModule } from 'primeng/keyfilter';\nimport { SpeechRecognitionModule } from '@seniorsistemas/angular-components/speech-recognition';\n\n\n@NgModule({\n  declarations: [TextAreaComponent],\n  imports: [\n    CommonModule,\n    FormsModule,\n    ReactiveFormsModule,\n    SpeechRecognitionModule,\n    KeyFilterModule\n  ],\n  exports: [TextAreaComponent]\n})\nexport class TextAreaModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"seniorsistemas-angular-components-text-area.mjs","sources":["../../projects/angular-components/text-area/src/lib/text-area/text-area.component.ts","../../projects/angular-components/text-area/src/lib/text-area/text-area.component.html","../../projects/angular-components/text-area/src/lib/text-area.module.ts","../../projects/angular-components/text-area/src/seniorsistemas-angular-components-text-area.ts"],"sourcesContent":["import { ChangeDetectorRef, Component, ElementRef, forwardRef, Input, ViewChild, inject } from '@angular/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';\r\nimport { KeyFilterPattern, KeyFilter } from 'primeng/keyfilter';\r\nimport { NgStyle } from '@angular/common';\r\nimport { SpeechRecognitionComponent } from '@seniorsistemas/angular-components/speech-recognition';\r\n\r\n/**\r\n * @description Componente de área de texto com suporte a reconhecimento de voz,\r\n * filtro de teclas, comprimento máximo e integração com `ControlValueAccessor`.\r\n * Renderiza condicionalmente o componente `SpeechRecognitionComponent` quando\r\n * a flag `speechRecognition` está ativa.\r\n *\r\n * @example\r\n * ```html\r\n * <s-textarea\r\n *   formControlName=\"descricao\"\r\n *   [rows]=\"6\"\r\n *   [maxLength]=\"500\"\r\n *   placeholder=\"Digite aqui...\" />\r\n * ```\r\n *\r\n * @category Inputs\r\n */\r\n@Component({\r\n    selector: 's-textarea',\r\n    templateUrl: './text-area.component.html',\r\n    styleUrls: ['./text-area.component.scss'],\r\n    providers: [\r\n        {\r\n            provide: NG_VALUE_ACCESSOR,\r\n            useExisting: forwardRef(() => TextAreaComponent),\r\n            multi: true,\r\n        },\r\n    ],\r\n    standalone: true,\r\n    imports: [FormsModule, KeyFilter, NgStyle, SpeechRecognitionComponent],\r\n})\r\nexport class TextAreaComponent implements ControlValueAccessor {\r\n    private readonly cdr = inject(ChangeDetectorRef);\r\n\r\n    onChange: (value: string) => void = () => {};\r\n    onTouched: (value: string) => void = () => {};\r\n    disabled = false;\r\n    value = '';\r\n    private _textAreaElement: ElementRef<HTMLTextAreaElement> | undefined;\r\n\r\n    @ViewChild('textArea', { read: ElementRef })\r\n    public get textAreaElement(): ElementRef<HTMLTextAreaElement> {\r\n        return this._textAreaElement as ElementRef<HTMLTextAreaElement>;\r\n    }\r\n\r\n    public set textAreaElement(value: ElementRef<HTMLTextAreaElement>) {\r\n        this._textAreaElement = value;\r\n        setTimeout(() => {\r\n            this.renderTextArea = true;\r\n            this.cdr.detectChanges();\r\n        });\r\n    }\r\n\r\n    /** @description Identificador do elemento `<textarea>` no DOM. @default 'textarea-{random}' */\r\n    @Input() inputId = `textarea-${Math.random()}`;\r\n    /** @description Número de linhas visíveis no textarea. @default 5 */\r\n    @Input() rows = 5;\r\n    /** @description Habilita o botão de reconhecimento de voz. @default false */\r\n    @Input() speechRecognition = false;\r\n    /** @description Filtro de teclas aceitas, usando padrão ou expressão regular. */\r\n    @Input() keyFilter: RegExp | KeyFilterPattern | null | undefined;\r\n    /** @description Quando `true`, mantém o contexto ao reiniciar o reconhecimento de voz. @default false */\r\n    @Input() keepContext = false;\r\n    /** @description Placeholder exibido durante o reconhecimento de voz. @default '' */\r\n    @Input() speechRecognitionPlaceholder = '';\r\n    /** @description Número máximo de caracteres aceitos. @default null (ilimitado) */\r\n    @Input() maxLength: number | null = null;\r\n    /** @description Texto exibido quando o campo está vazio. */\r\n    @Input() placeholder: string | undefined;\r\n\r\n    private _inputStyle: Partial<CSSStyleDeclaration> = {\r\n        resize: 'vertical',\r\n    };\r\n    /** @description Estilos inline aplicados ao elemento `<textarea>` interno. @default `{ resize: 'vertical' }` */\r\n    @Input() get inputStyle(): Partial<CSSStyleDeclaration> {\r\n        return this._inputStyle;\r\n    }\r\n    set inputStyle(value: Partial<CSSStyleDeclaration>) {\r\n        this._inputStyle = {\r\n            ...value,\r\n            ...this._inputStyle,\r\n        };\r\n    }\r\n    /** @description Coloca o textarea em modo somente leitura. @default false */\r\n    @Input() readOnly = false;\r\n\r\n    renderTextArea = false;\r\n\r\n    writeValue(obj: string): void {\r\n        this.value = obj;\r\n    }\r\n\r\n    registerOnChange(fn: (value: string) => void): void {\r\n        this.onChange = fn;\r\n    }\r\n\r\n    registerOnTouched(fn: () => void): void {\r\n        this.onTouched = fn;\r\n    }\r\n\r\n    setDisabledState(isDisabled: boolean): void {\r\n        this.disabled = isDisabled;\r\n    }\r\n\r\n    setValue(value: string | number) {\r\n        if (this.disabled) {\r\n            return;\r\n        }\r\n        this.value = value.toString();\r\n        this.writeValue(this.value);\r\n        this.onChange(this.value);\r\n        this.onTouched(this.value);\r\n    }\r\n\r\n    handleRecognizedText(recognizedText: string) {\r\n        this.setValue(recognizedText);\r\n    }\r\n}\r\n","@if (keyFilter) {\r\n    <textarea\r\n        #textArea\r\n        class=\"textarea\"\r\n        [pKeyFilter]=\"keyFilter\"\r\n        [id]=\"inputId\"\r\n        [rows]=\"rows\"\r\n        [ngModel]=\"value\"\r\n        (ngModelChange)=\"setValue($event)\"\r\n        [disabled]=\"disabled\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [readOnly]=\"readOnly\"\r\n        [maxlength]=\"maxLength\"\r\n        [placeholder]=\"placeholder ? placeholder : ''\"\r\n    ></textarea>\r\n}\r\n\r\n@if (!keyFilter) {\r\n    <textarea\r\n        #textArea\r\n        class=\"textarea\"\r\n        [id]=\"inputId\"\r\n        [rows]=\"rows\"\r\n        [(ngModel)]=\"value\"\r\n        [disabled]=\"disabled\"\r\n        [ngStyle]=\"inputStyle\"\r\n        [readOnly]=\"readOnly\"\r\n        [maxlength]=\"maxLength\"\r\n        [placeholder]=\"placeholder ? placeholder : ''\"\r\n        (ngModelChange)=\"setValue($event)\"\r\n    ></textarea>\r\n}\r\n\r\n@if (speechRecognition && renderTextArea) {\r\n    <s-speech-recognition\r\n        [textAreaElement]=\"textAreaElement.nativeElement\"\r\n        [keepContext]=\"keepContext\"\r\n        [speechRecognitionPlaceholder]=\"speechRecognitionPlaceholder\"\r\n        (recognizedText)=\"handleRecognizedText($event)\"\r\n    >\r\n    </s-speech-recognition>\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { TextAreaComponent } from './text-area/text-area.component';\r\n\r\n@NgModule({\r\n    imports: [TextAreaComponent],\r\n    exports: [TextAreaComponent],\r\n})\r\nexport class TextAreaModule {}\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-thumbnail.mjs

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

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

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

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