@seniorsistemas/angular-components 19.9.3 → 19.9.5-develop-17c73b08

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

@@ -71,11 +71,11 @@ class AlertComponent {
     }
     _isOpen = true;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlertComponent, isStandalone: true, selector: "s-alert", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: false, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: false, isRequired: true, transformFunction: null }, detail: { classPropertyName: "detail", publicName: "detail", isSignal: false, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: false, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (isOpen) {\n    <div\n        class=\"alert m-2 flex items-center justify-between gap-4 rounded-medium border-l-4 px-4 py-3 shadow-[1px_1px_2px_rgba(0,0,0,0.2)]\"\n        [ngClass]=\"{\n            'alert--info': severity === 'info',\n            'alert--success': severity === 'success',\n            'alert--warning': severity === 'warning',\n            'alert--error': severity === 'error',\n            'border-primary bg-hippie-blue-50': severity === 'info',\n            'border-criticality-green bg-teal-50': severity === 'success',\n            'border-criticality-yellow bg-buttercup-50': severity === 'warning',\n            'border-criticality-red bg-sunset-orange-50': severity === 'error',\n        }\"\n    >\n        <div class=\"content flex items-center gap-4\">\n            <div\n                class=\"icon-container inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[50%]\"\n                [ngClass]=\"{\n                    'bg-primary': severity === 'info',\n                    'bg-criticality-green': severity === 'success',\n                    'bg-criticality-yellow': severity === 'warning',\n                    'bg-criticality-red': severity === 'error',\n                }\"\n            >\n                <i\n                    class=\"fas\"\n                    [ngClass]=\"{\n                        'fa-info': severity === 'info',\n                        'fa-check': severity === 'success',\n                        'fa-exclamation-triangle': severity === 'warning',\n                        'fa-times': severity === 'error',\n                        'text-grayscale-0': severity !== 'warning',\n                        'text-grayscale-90': severity === 'warning',\n                    }\"\n                ></i>\n            </div>\n            <div class=\"text-container flex flex-col gap-4\">\n                <div class=\"text flex flex-col justify-start\">\n                    @if (summary) {\n                        <span class=\"summary font-open-sans text-sm font-bold text-grayscale-90\">{{ summary }}</span>\n                    }\n\n                    @if (detail) {\n                        @if (escape()) {\n                            <span class=\"detail font-open-sans text-sm text-grayscale-90\">\n                                {{ detail }}\n                            </span>\n                        } @else {\n                            <span\n                                class=\"detail font-open-sans text-sm text-grayscale-90\"\n                                [innerHTML]=\"detail\"\n                            ></span>\n                        }\n                    } @else {\n                        <span class=\"detail font-open-sans text-sm text-grayscale-90\">\n                            <ng-content />\n                        </span>\n                    }\n                </div>\n            </div>\n        </div>\n        @if (closable) {\n            <button\n                class=\"close-option cursor-pointer border-0 bg-transparent p-1 text-base text-grayscale-90\"\n                (click)=\"onClose()\"\n            >\n                <i class=\"fas fa-times\"></i>\n            </button>\n        }\n    </div>\n}\n\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AlertComponent, isStandalone: true, selector: "s-alert", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: false, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: false, isRequired: true, transformFunction: null }, detail: { classPropertyName: "detail", publicName: "detail", isSignal: false, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: false, isRequired: false, transformFunction: null }, escape: { classPropertyName: "escape", publicName: "escape", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (isOpen) {\n    <div\n        class=\"alert my-2 flex items-center justify-between gap-4 rounded-medium border-l-4 px-4 py-3 shadow-[1px_1px_2px_rgba(0,0,0,0.2)]\"\n        [ngClass]=\"{\n            'alert--info': severity === 'info',\n            'alert--success': severity === 'success',\n            'alert--warning': severity === 'warning',\n            'alert--error': severity === 'error',\n            'border-primary bg-hippie-blue-50': severity === 'info',\n            'border-criticality-green bg-teal-50': severity === 'success',\n            'border-criticality-yellow bg-buttercup-50': severity === 'warning',\n            'border-criticality-red bg-sunset-orange-50': severity === 'error',\n        }\"\n    >\n        <div class=\"content flex items-center gap-4\">\n            <div\n                class=\"icon-container inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[50%]\"\n                [ngClass]=\"{\n                    'bg-primary': severity === 'info',\n                    'bg-criticality-green': severity === 'success',\n                    'bg-criticality-yellow': severity === 'warning',\n                    'bg-criticality-red': severity === 'error',\n                }\"\n            >\n                <i\n                    class=\"fas\"\n                    [ngClass]=\"{\n                        'fa-info': severity === 'info',\n                        'fa-check': severity === 'success',\n                        'fa-exclamation-triangle': severity === 'warning',\n                        'fa-times': severity === 'error',\n                        'text-grayscale-0': severity !== 'warning',\n                        'text-grayscale-90': severity === 'warning',\n                    }\"\n                ></i>\n            </div>\n            <div class=\"text-container flex flex-col gap-4\">\n                <div class=\"text flex flex-col justify-start\">\n                    @if (summary) {\n                        <span class=\"summary font-open-sans text-sm font-bold text-grayscale-90\">{{ summary }}</span>\n                    }\n\n                    @if (detail) {\n                        @if (escape()) {\n                            <span class=\"detail font-open-sans text-sm text-grayscale-90\">\n                                {{ detail }}\n                            </span>\n                        } @else {\n                            <span\n                                class=\"detail font-open-sans text-sm text-grayscale-90\"\n                                [innerHTML]=\"detail\"\n                            ></span>\n                        }\n                    } @else {\n                        <span class=\"detail font-open-sans text-sm text-grayscale-90\">\n                            <ng-content />\n                        </span>\n                    }\n                </div>\n            </div>\n        </div>\n        @if (closable) {\n            <button\n                class=\"close-option cursor-pointer border-0 bg-transparent p-1 text-base text-grayscale-90\"\n                (click)=\"onClose()\"\n            >\n                <i class=\"fas fa-times\"></i>\n            </button>\n        }\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-alert', standalone: true, imports: [NgClass], template: "@if (isOpen) {\n    <div\n        class=\"alert m-2 flex items-center justify-between gap-4 rounded-medium border-l-4 px-4 py-3 shadow-[1px_1px_2px_rgba(0,0,0,0.2)]\"\n        [ngClass]=\"{\n            'alert--info': severity === 'info',\n            'alert--success': severity === 'success',\n            'alert--warning': severity === 'warning',\n            'alert--error': severity === 'error',\n            'border-primary bg-hippie-blue-50': severity === 'info',\n            'border-criticality-green bg-teal-50': severity === 'success',\n            'border-criticality-yellow bg-buttercup-50': severity === 'warning',\n            'border-criticality-red bg-sunset-orange-50': severity === 'error',\n        }\"\n    >\n        <div class=\"content flex items-center gap-4\">\n            <div\n                class=\"icon-container inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[50%]\"\n                [ngClass]=\"{\n                    'bg-primary': severity === 'info',\n                    'bg-criticality-green': severity === 'success',\n                    'bg-criticality-yellow': severity === 'warning',\n                    'bg-criticality-red': severity === 'error',\n                }\"\n            >\n                <i\n                    class=\"fas\"\n                    [ngClass]=\"{\n                        'fa-info': severity === 'info',\n                        'fa-check': severity === 'success',\n                        'fa-exclamation-triangle': severity === 'warning',\n                        'fa-times': severity === 'error',\n                        'text-grayscale-0': severity !== 'warning',\n                        'text-grayscale-90': severity === 'warning',\n                    }\"\n                ></i>\n            </div>\n            <div class=\"text-container flex flex-col gap-4\">\n                <div class=\"text flex flex-col justify-start\">\n                    @if (summary) {\n                        <span class=\"summary font-open-sans text-sm font-bold text-grayscale-90\">{{ summary }}</span>\n                    }\n\n                    @if (detail) {\n                        @if (escape()) {\n                            <span class=\"detail font-open-sans text-sm text-grayscale-90\">\n                                {{ detail }}\n                            </span>\n                        } @else {\n                            <span\n                                class=\"detail font-open-sans text-sm text-grayscale-90\"\n                                [innerHTML]=\"detail\"\n                            ></span>\n                        }\n                    } @else {\n                        <span class=\"detail font-open-sans text-sm text-grayscale-90\">\n                            <ng-content />\n                        </span>\n                    }\n                </div>\n            </div>\n        </div>\n        @if (closable) {\n            <button\n                class=\"close-option cursor-pointer border-0 bg-transparent p-1 text-base text-grayscale-90\"\n                (click)=\"onClose()\"\n            >\n                <i class=\"fas fa-times\"></i>\n            </button>\n        }\n    </div>\n}\n\n" }]
+            args: [{ selector: 's-alert', standalone: true, imports: [NgClass], template: "@if (isOpen) {\n    <div\n        class=\"alert my-2 flex items-center justify-between gap-4 rounded-medium border-l-4 px-4 py-3 shadow-[1px_1px_2px_rgba(0,0,0,0.2)]\"\n        [ngClass]=\"{\n            'alert--info': severity === 'info',\n            'alert--success': severity === 'success',\n            'alert--warning': severity === 'warning',\n            'alert--error': severity === 'error',\n            'border-primary bg-hippie-blue-50': severity === 'info',\n            'border-criticality-green bg-teal-50': severity === 'success',\n            'border-criticality-yellow bg-buttercup-50': severity === 'warning',\n            'border-criticality-red bg-sunset-orange-50': severity === 'error',\n        }\"\n    >\n        <div class=\"content flex items-center gap-4\">\n            <div\n                class=\"icon-container inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[50%]\"\n                [ngClass]=\"{\n                    'bg-primary': severity === 'info',\n                    'bg-criticality-green': severity === 'success',\n                    'bg-criticality-yellow': severity === 'warning',\n                    'bg-criticality-red': severity === 'error',\n                }\"\n            >\n                <i\n                    class=\"fas\"\n                    [ngClass]=\"{\n                        'fa-info': severity === 'info',\n                        'fa-check': severity === 'success',\n                        'fa-exclamation-triangle': severity === 'warning',\n                        'fa-times': severity === 'error',\n                        'text-grayscale-0': severity !== 'warning',\n                        'text-grayscale-90': severity === 'warning',\n                    }\"\n                ></i>\n            </div>\n            <div class=\"text-container flex flex-col gap-4\">\n                <div class=\"text flex flex-col justify-start\">\n                    @if (summary) {\n                        <span class=\"summary font-open-sans text-sm font-bold text-grayscale-90\">{{ summary }}</span>\n                    }\n\n                    @if (detail) {\n                        @if (escape()) {\n                            <span class=\"detail font-open-sans text-sm text-grayscale-90\">\n                                {{ detail }}\n                            </span>\n                        } @else {\n                            <span\n                                class=\"detail font-open-sans text-sm text-grayscale-90\"\n                                [innerHTML]=\"detail\"\n                            ></span>\n                        }\n                    } @else {\n                        <span class=\"detail font-open-sans text-sm text-grayscale-90\">\n                            <ng-content />\n                        </span>\n                    }\n                </div>\n            </div>\n        </div>\n        @if (closable) {\n            <button\n                class=\"close-option cursor-pointer border-0 bg-transparent p-1 text-base text-grayscale-90\"\n                (click)=\"onClose()\"\n            >\n                <i class=\"fas fa-times\"></i>\n            </button>\n        }\n    </div>\n}\n" }]
         }], propDecorators: { severity: [{
                 type: Input
             }], summary: [{

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

@@ -1 +1 @@
-{"version":3,"file":"seniorsistemas-angular-components-alert.mjs","sources":["../../projects/angular-components/alert/src/lib/alert/alert.component.ts","../../projects/angular-components/alert/src/lib/alert/alert.component.html","../../projects/angular-components/alert/src/lib/alert/alert.module.ts","../../projects/angular-components/alert/src/seniorsistemas-angular-components-alert.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { Component, EventEmitter, input, Input, Output } from '@angular/core';\r\n\r\n/**\r\n * @description Componente de alerta que exibe mensagens informativas, de sucesso, aviso ou erro.\r\n * Suporta fechamento manual pelo usuário e emite um evento ao ser fechado.\r\n *\r\n * @example\r\n * ```html\r\n * <s-alert\r\n *   severity=\"warning\"\r\n *   summary=\"Atenção\"\r\n *   detail=\"Verifique os dados antes de continuar.\"\r\n *   (closed)=\"onAlertClosed()\"\r\n * />\r\n * ```\r\n *\r\n * @category Feedback\r\n */\r\n@Component({\r\n    selector: 's-alert',\r\n    templateUrl: './alert.component.html',\r\n    standalone: true,\r\n    imports: [NgClass],\r\n})\r\nexport class AlertComponent {\r\n    /**\r\n     * @description Nível de severidade do alerta, que define a cor e o ícone exibidos.\r\n     * - `'info'`: alerta informativo (padrão).\r\n     * - `'success'`: alerta de sucesso.\r\n     * - `'warning'`: alerta de aviso.\r\n     * - `'error'`: alerta de erro.\r\n     *\r\n     * @default 'info'\r\n     */\r\n    // sonar-ignore: Refactor this union type to have less than 3 elements\r\n    @Input()\r\n    public severity: 'info' | 'success' | 'warning' | 'error' = 'info';\r\n\r\n    /**\r\n     * @description Título principal do alerta exibido em destaque. Campo obrigatório.\r\n     */\r\n    @Input({ required: true })\r\n    public summary!: string;\r\n\r\n    /**\r\n     * @description Mensagem detalhada exibida abaixo do título do alerta. Campo obrigatório.\r\n     */\r\n    @Input()\r\n    public detail!: string;\r\n\r\n    /**\r\n     * @description Quando `true`, exibe o botão de fechar o alerta.\r\n     * Quando `false`, o alerta não pode ser dispensado pelo usuário.\r\n     *\r\n     * @default true\r\n     */\r\n    @Input()\r\n    public closable = true;\r\n\r\n    /**\r\n     * @description Quando `true`, o conteúdo do alerta é escapado para evitar a execução de HTML ou scripts.\r\n     * Quando `false`, o conteúdo do alerta é renderizado como HTML, permitindo a inclusão de links, negrito, etc.\r\n     *\r\n     * @default true\r\n     */\r\n    escape = input<boolean>(true);\r\n\r\n    /**\r\n     * @description Emitido quando o usuário fecha o alerta clicando no botão de fechar.\r\n     */\r\n    @Output()\r\n    public closed = new EventEmitter<void>();\r\n\r\n    public get isOpen(): boolean {\r\n        return this._isOpen;\r\n    }\r\n\r\n    public closeAlert(): void {\r\n        this._isOpen = false;\r\n    }\r\n\r\n    public showAlert(): void {\r\n        this._isOpen = true;\r\n    }\r\n\r\n    public onClose(): void {\r\n        this.closed.emit();\r\n        this.closeAlert();\r\n    }\r\n\r\n    private _isOpen = true;\r\n}\r\n","@if (isOpen) {\n    <div\n        class=\"alert m-2 flex items-center justify-between gap-4 rounded-medium border-l-4 px-4 py-3 shadow-[1px_1px_2px_rgba(0,0,0,0.2)]\"\n        [ngClass]=\"{\n            'alert--info': severity === 'info',\n            'alert--success': severity === 'success',\n            'alert--warning': severity === 'warning',\n            'alert--error': severity === 'error',\n            'border-primary bg-hippie-blue-50': severity === 'info',\n            'border-criticality-green bg-teal-50': severity === 'success',\n            'border-criticality-yellow bg-buttercup-50': severity === 'warning',\n            'border-criticality-red bg-sunset-orange-50': severity === 'error',\n        }\"\n    >\n        <div class=\"content flex items-center gap-4\">\n            <div\n                class=\"icon-container inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[50%]\"\n                [ngClass]=\"{\n                    'bg-primary': severity === 'info',\n                    'bg-criticality-green': severity === 'success',\n                    'bg-criticality-yellow': severity === 'warning',\n                    'bg-criticality-red': severity === 'error',\n                }\"\n            >\n                <i\n                    class=\"fas\"\n                    [ngClass]=\"{\n                        'fa-info': severity === 'info',\n                        'fa-check': severity === 'success',\n                        'fa-exclamation-triangle': severity === 'warning',\n                        'fa-times': severity === 'error',\n                        'text-grayscale-0': severity !== 'warning',\n                        'text-grayscale-90': severity === 'warning',\n                    }\"\n                ></i>\n            </div>\n            <div class=\"text-container flex flex-col gap-4\">\n                <div class=\"text flex flex-col justify-start\">\n                    @if (summary) {\n                        <span class=\"summary font-open-sans text-sm font-bold text-grayscale-90\">{{ summary }}</span>\n                    }\n\n                    @if (detail) {\n                        @if (escape()) {\n                            <span class=\"detail font-open-sans text-sm text-grayscale-90\">\n                                {{ detail }}\n                            </span>\n                        } @else {\n                            <span\n                                class=\"detail font-open-sans text-sm text-grayscale-90\"\n                                [innerHTML]=\"detail\"\n                            ></span>\n                        }\n                    } @else {\n                        <span class=\"detail font-open-sans text-sm text-grayscale-90\">\n                            <ng-content />\n                        </span>\n                    }\n                </div>\n            </div>\n        </div>\n        @if (closable) {\n            <button\n                class=\"close-option cursor-pointer border-0 bg-transparent p-1 text-base text-grayscale-90\"\n                (click)=\"onClose()\"\n            >\n                <i class=\"fas fa-times\"></i>\n            </button>\n        }\n    </div>\n}\n\n","import { NgModule } from '@angular/core';\r\n\r\nimport { AlertComponent } from './alert.component';\r\n\r\n@NgModule({\r\n    imports: [AlertComponent],\r\n    exports: [AlertComponent],\r\n})\r\nexport class AlertModule {}\r\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-alert.mjs","sources":["../../projects/angular-components/alert/src/lib/alert/alert.component.ts","../../projects/angular-components/alert/src/lib/alert/alert.component.html","../../projects/angular-components/alert/src/lib/alert/alert.module.ts","../../projects/angular-components/alert/src/seniorsistemas-angular-components-alert.ts"],"sourcesContent":["import { NgClass } from '@angular/common';\r\nimport { Component, EventEmitter, input, Input, Output } from '@angular/core';\r\n\r\n/**\r\n * @description Componente de alerta que exibe mensagens informativas, de sucesso, aviso ou erro.\r\n * Suporta fechamento manual pelo usuário e emite um evento ao ser fechado.\r\n *\r\n * @example\r\n * ```html\r\n * <s-alert\r\n *   severity=\"warning\"\r\n *   summary=\"Atenção\"\r\n *   detail=\"Verifique os dados antes de continuar.\"\r\n *   (closed)=\"onAlertClosed()\"\r\n * />\r\n * ```\r\n *\r\n * @category Feedback\r\n */\r\n@Component({\r\n    selector: 's-alert',\r\n    templateUrl: './alert.component.html',\r\n    standalone: true,\r\n    imports: [NgClass],\r\n})\r\nexport class AlertComponent {\r\n    /**\r\n     * @description Nível de severidade do alerta, que define a cor e o ícone exibidos.\r\n     * - `'info'`: alerta informativo (padrão).\r\n     * - `'success'`: alerta de sucesso.\r\n     * - `'warning'`: alerta de aviso.\r\n     * - `'error'`: alerta de erro.\r\n     *\r\n     * @default 'info'\r\n     */\r\n    // sonar-ignore: Refactor this union type to have less than 3 elements\r\n    @Input()\r\n    public severity: 'info' | 'success' | 'warning' | 'error' = 'info';\r\n\r\n    /**\r\n     * @description Título principal do alerta exibido em destaque. Campo obrigatório.\r\n     */\r\n    @Input({ required: true })\r\n    public summary!: string;\r\n\r\n    /**\r\n     * @description Mensagem detalhada exibida abaixo do título do alerta. Campo obrigatório.\r\n     */\r\n    @Input()\r\n    public detail!: string;\r\n\r\n    /**\r\n     * @description Quando `true`, exibe o botão de fechar o alerta.\r\n     * Quando `false`, o alerta não pode ser dispensado pelo usuário.\r\n     *\r\n     * @default true\r\n     */\r\n    @Input()\r\n    public closable = true;\r\n\r\n    /**\r\n     * @description Quando `true`, o conteúdo do alerta é escapado para evitar a execução de HTML ou scripts.\r\n     * Quando `false`, o conteúdo do alerta é renderizado como HTML, permitindo a inclusão de links, negrito, etc.\r\n     *\r\n     * @default true\r\n     */\r\n    escape = input<boolean>(true);\r\n\r\n    /**\r\n     * @description Emitido quando o usuário fecha o alerta clicando no botão de fechar.\r\n     */\r\n    @Output()\r\n    public closed = new EventEmitter<void>();\r\n\r\n    public get isOpen(): boolean {\r\n        return this._isOpen;\r\n    }\r\n\r\n    public closeAlert(): void {\r\n        this._isOpen = false;\r\n    }\r\n\r\n    public showAlert(): void {\r\n        this._isOpen = true;\r\n    }\r\n\r\n    public onClose(): void {\r\n        this.closed.emit();\r\n        this.closeAlert();\r\n    }\r\n\r\n    private _isOpen = true;\r\n}\r\n","@if (isOpen) {\n    <div\n        class=\"alert my-2 flex items-center justify-between gap-4 rounded-medium border-l-4 px-4 py-3 shadow-[1px_1px_2px_rgba(0,0,0,0.2)]\"\n        [ngClass]=\"{\n            'alert--info': severity === 'info',\n            'alert--success': severity === 'success',\n            'alert--warning': severity === 'warning',\n            'alert--error': severity === 'error',\n            'border-primary bg-hippie-blue-50': severity === 'info',\n            'border-criticality-green bg-teal-50': severity === 'success',\n            'border-criticality-yellow bg-buttercup-50': severity === 'warning',\n            'border-criticality-red bg-sunset-orange-50': severity === 'error',\n        }\"\n    >\n        <div class=\"content flex items-center gap-4\">\n            <div\n                class=\"icon-container inline-flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[50%]\"\n                [ngClass]=\"{\n                    'bg-primary': severity === 'info',\n                    'bg-criticality-green': severity === 'success',\n                    'bg-criticality-yellow': severity === 'warning',\n                    'bg-criticality-red': severity === 'error',\n                }\"\n            >\n                <i\n                    class=\"fas\"\n                    [ngClass]=\"{\n                        'fa-info': severity === 'info',\n                        'fa-check': severity === 'success',\n                        'fa-exclamation-triangle': severity === 'warning',\n                        'fa-times': severity === 'error',\n                        'text-grayscale-0': severity !== 'warning',\n                        'text-grayscale-90': severity === 'warning',\n                    }\"\n                ></i>\n            </div>\n            <div class=\"text-container flex flex-col gap-4\">\n                <div class=\"text flex flex-col justify-start\">\n                    @if (summary) {\n                        <span class=\"summary font-open-sans text-sm font-bold text-grayscale-90\">{{ summary }}</span>\n                    }\n\n                    @if (detail) {\n                        @if (escape()) {\n                            <span class=\"detail font-open-sans text-sm text-grayscale-90\">\n                                {{ detail }}\n                            </span>\n                        } @else {\n                            <span\n                                class=\"detail font-open-sans text-sm text-grayscale-90\"\n                                [innerHTML]=\"detail\"\n                            ></span>\n                        }\n                    } @else {\n                        <span class=\"detail font-open-sans text-sm text-grayscale-90\">\n                            <ng-content />\n                        </span>\n                    }\n                </div>\n            </div>\n        </div>\n        @if (closable) {\n            <button\n                class=\"close-option cursor-pointer border-0 bg-transparent p-1 text-base text-grayscale-90\"\n                (click)=\"onClose()\"\n            >\n                <i class=\"fas fa-times\"></i>\n            </button>\n        }\n    </div>\n}\n","import { NgModule } from '@angular/core';\r\n\r\nimport { AlertComponent } from './alert.component';\r\n\r\n@NgModule({\r\n    imports: [AlertComponent],\r\n    exports: [AlertComponent],\r\n})\r\nexport class AlertModule {}\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-autocomplete.mjs

@@ -18,16 +18,18 @@ import { AutoComplete } from 'primeng/autocomplete';
 class AutocompleteChipComponent {
     suggestion = input.required();
     suggestionLabel = input();
+    /** @description Classe do ícone do botão de remover o chip. @default 'far fa-times' */
+    removeIconClass = input('far fa-times');
     suggestionRemoved = output();
     removeSuggestion() {
         this.suggestionRemoved.emit(this.suggestion());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AutocompleteChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: AutocompleteChipComponent, isStandalone: true, selector: "s-autocomplete-chip", inputs: { suggestion: { classPropertyName: "suggestion", publicName: "suggestion", isSignal: true, isRequired: true, transformFunction: null }, suggestionLabel: { classPropertyName: "suggestionLabel", publicName: "suggestionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { suggestionRemoved: "suggestionRemoved" }, ngImport: i0, template: "<div class=\"flex items-center gap-2 rounded-[4px] border border-grayscale-50 bg-grayscale-10 px-2\">\n    <span class=\"text-nowrap\">{{ suggestionLabel() ? suggestion()[suggestionLabel()!] : suggestion() }}</span>\n    <button (click)=\"removeSuggestion()\">\n        <i class=\"far fa-times\"></i>\n    </button>\n</div>\n" });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: AutocompleteChipComponent, isStandalone: true, selector: "s-autocomplete-chip", inputs: { suggestion: { classPropertyName: "suggestion", publicName: "suggestion", isSignal: true, isRequired: true, transformFunction: null }, suggestionLabel: { classPropertyName: "suggestionLabel", publicName: "suggestionLabel", isSignal: true, isRequired: false, transformFunction: null }, removeIconClass: { classPropertyName: "removeIconClass", publicName: "removeIconClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { suggestionRemoved: "suggestionRemoved" }, ngImport: i0, template: "<div class=\"flex items-center gap-2 rounded-[4px] border border-grayscale-50 bg-grayscale-10 px-2\">\n    <span class=\"text-nowrap\">{{ suggestionLabel() ? suggestion()[suggestionLabel()!] : suggestion() }}</span>\n    <button (click)=\"removeSuggestion()\">\n        <i [class]=\"removeIconClass()\"></i>\n    </button>\n</div>\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AutocompleteChipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-autocomplete-chip', standalone: true, template: "<div class=\"flex items-center gap-2 rounded-[4px] border border-grayscale-50 bg-grayscale-10 px-2\">\n    <span class=\"text-nowrap\">{{ suggestionLabel() ? suggestion()[suggestionLabel()!] : suggestion() }}</span>\n    <button (click)=\"removeSuggestion()\">\n        <i class=\"far fa-times\"></i>\n    </button>\n</div>\n" }]
+            args: [{ selector: 's-autocomplete-chip', standalone: true, template: "<div class=\"flex items-center gap-2 rounded-[4px] border border-grayscale-50 bg-grayscale-10 px-2\">\n    <span class=\"text-nowrap\">{{ suggestionLabel() ? suggestion()[suggestionLabel()!] : suggestion() }}</span>\n    <button (click)=\"removeSuggestion()\">\n        <i [class]=\"removeIconClass()\"></i>\n    </button>\n</div>\n" }]
         }] });
 
 /**
@@ -79,6 +81,12 @@ class AutocompleteComponent {
     forceSelection = input(false);
     /** @description Exibe ícone de checkmark ao lado da opção selecionada no dropdown. @default false */
     checkmark = input(false);
+    /** @description Classe do ícone do botão de limpar o valor do campo. @default 'far fa-times' */
+    clearIconClass = input('far fa-times');
+    /** @description Classe do ícone de checkmark exibido ao lado da opção selecionada no dropdown. @default 'far fa-check' */
+    checkIconClass = input('far fa-check');
+    /** @description Classe do ícone do botão de remover chip, exibido no modo `multiple`. @default 'far fa-times' */
+    removeIconClass = input('far fa-times');
     /** @description Habilita seleção de múltiplos itens exibidos como chips no campo. @default false */
     multiple = input(false);
     /** @description Quantidade mínima de caracteres necessária para acionar a busca por sugestões. @default 1 */
@@ -590,13 +598,13 @@ class AutocompleteComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AutocompleteComponent, isStandalone: true, selector: "s-autocomplete", inputs: { suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, suggestionValue: { classPropertyName: "suggestionValue", publicName: "suggestionValue", isSignal: true, isRequired: false, transformFunction: null }, suggestionLabel: { classPropertyName: "suggestionLabel", publicName: "suggestionLabel", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, dropdown: { classPropertyName: "dropdown", publicName: "dropdown", isSignal: true, isRequired: false, transformFunction: null }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: true, isRequired: false, transformFunction: null }, checkmark: { classPropertyName: "checkmark", publicName: "checkmark", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, minLengthToSearch: { classPropertyName: "minLengthToSearch", publicName: "minLengthToSearch", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange", disabled: "disabledChange", lazyLoad: "lazyLoad", selected: "selected", unselected: "unselected", blurred: "blurred", cleared: "cleared", keyUp: "keyUp", focused: "focused", completeMethod: "completeMethod" }, host: { attributes: { "role": "combobox" }, listeners: { "window:resize": "onWindowResize()" }, properties: { "attr.aria-expanded": "isOpen()", "attr.aria-haspopup": "\"listbox\"", "attr.aria-owns": "isOpen() ? \"dropdown-container-\" + componentId : null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AutocompleteComponent, isStandalone: true, selector: "s-autocomplete", inputs: { suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, suggestionValue: { classPropertyName: "suggestionValue", publicName: "suggestionValue", isSignal: true, isRequired: false, transformFunction: null }, suggestionLabel: { classPropertyName: "suggestionLabel", publicName: "suggestionLabel", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: true, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: true, isRequired: false, transformFunction: null }, dropdown: { classPropertyName: "dropdown", publicName: "dropdown", isSignal: true, isRequired: false, transformFunction: null }, forceSelection: { classPropertyName: "forceSelection", publicName: "forceSelection", isSignal: true, isRequired: false, transformFunction: null }, checkmark: { classPropertyName: "checkmark", publicName: "checkmark", isSignal: true, isRequired: false, transformFunction: null }, clearIconClass: { classPropertyName: "clearIconClass", publicName: "clearIconClass", isSignal: true, isRequired: false, transformFunction: null }, checkIconClass: { classPropertyName: "checkIconClass", publicName: "checkIconClass", isSignal: true, isRequired: false, transformFunction: null }, removeIconClass: { classPropertyName: "removeIconClass", publicName: "removeIconClass", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, minLengthToSearch: { classPropertyName: "minLengthToSearch", publicName: "minLengthToSearch", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", values: "valuesChange", disabled: "disabledChange", lazyLoad: "lazyLoad", selected: "selected", unselected: "unselected", blurred: "blurred", cleared: "cleared", keyUp: "keyUp", focused: "focused", completeMethod: "completeMethod" }, host: { attributes: { "role": "combobox" }, listeners: { "window:resize": "onWindowResize()" }, properties: { "attr.aria-expanded": "isOpen()", "attr.aria-haspopup": "\"listbox\"", "attr.aria-owns": "isOpen() ? \"dropdown-container-\" + componentId : null" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AutocompleteComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    #containerDiv\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"flex h-[35px] w-full items-center overflow-hidden rounded-[4px] border focus-within:border-2 focus-within:border-primary hover:bg-grayscale-10\"\n    [class]=\"inputClass()\"\n    [ngClass]=\"{\n        'pointer-events-none border-grayscale-20 bg-grayscale-5 text-grayscale-30': disabled(),\n        'pointer-events-auto border-grayscale-30 bg-grayscale-0 text-grayscale-90': !disabled(),\n        'border-criticality-red': invalid(),\n    }\"\n>\n    <div\n        class=\"flex flex-grow gap-2 px-2\"\n        [ngClass]=\"{\n            'border-r': dropdown(),\n            'border-grayscale-20': dropdown() && disabled(),\n            'border-grayscale-30 focus-within:border-r-2 focus-within:border-r-primary': dropdown() && !disabled(),\n            'bg-grayscale-5': disabled(),\n            'bg-grayscale-0': !disabled(),\n        }\"\n    >\n        @if (multiple() && values().length > 0) {\n            <div class=\"flex flex-wrap items-center gap-2\">\n                @for (suggestion of values(); track suggestion) {\n                    <s-autocomplete-chip\n                        [suggestion]=\"suggestion\"\n                        [suggestionLabel]=\"suggestionLabel()\"\n                        (suggestionRemoved)=\"removeSuggestion($event)\"\n                    ></s-autocomplete-chip>\n                }\n            </div>\n        }\n        <input\n            #inputEl\n            class=\"min-h-[35px] grow outline-none\"\n            type=\"text\"\n            [placeholder]=\"placeholder() ?? 'platform.angular_components.type_to_search' | translate\"\n            [readOnly]=\"readonly()\"\n            [(ngModel)]=\"inputValue\"\n            [attr.aria-disabled]=\"disabled()\"\n            [attr.aria-autocomplete]=\"multiple() ? 'list' : 'both'\"\n            [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? filteredSuggestions()[focusedIndex()].id : null\"\n            role=\"searchbox\"\n            (input)=\"onInput($event)\"\n            (keydown)=\"onKeyDown($event)\"\n            (keyUp)=\"onKeyUp($event)\"\n            (blur)=\"onInputBlur($event)\"\n            (focus)=\"onInputFocus($event)\"\n        />\n\n        @if (loading()) {\n            <div class=\"flex items-center justify-center\">\n                <svg\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"animate-spin\"\n                >\n                    <circle\n                        cx=\"10\"\n                        cy=\"10\"\n                        r=\"9\"\n                        stroke=\"#428bca\"\n                        stroke-width=\"2\"\n                        fill=\"none\"\n                        stroke-dasharray=\"56.5\"\n                        stroke-dashoffset=\"10\"\n                        stroke-linecap=\"round\"\n                    />\n                </svg>\n            </div>\n        } @else {\n            @if (value() && !this.disabled()) {\n                <button\n                    class=\"px-2\"\n                    (click)=\"clear()\"\n                    tabindex=\"-1\"\n                >\n                    <i class=\"far fa-times text-grayscale-60\"></i>\n                </button>\n            }\n        }\n    </div>\n\n    @if (dropdown()) {\n        <button\n            class=\"flex h-full w-[35px] flex-shrink-0 flex-grow-0 items-center justify-center hover:bg-grayscale-10\"\n            (click)=\"toggleDropdown()\"\n        >\n            <i\n                class=\"fas text-grayscale-90\"\n                [class.fa-caret-down]=\"!isOpen()\"\n                [class.fa-caret-up]=\"isOpen()\"\n            ></i>\n        </button>\n    }\n</div>\n\n@if (showEmptyMessage() || (filteredSuggestions().length > 0 && !readonly())) {\n    <ng-template\n        #dropdownTemplate\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        (backdropClick)=\"isOpen.set(false)\"\n        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n        (detach)=\"isOpen.set(false)\"\n    >\n        <div\n            [id]=\"'dropdown-container-' + componentId\"\n            class=\"mt-0.5 rounded-[4px] bg-grayscale-0 py-1 shadow\"\n            [style.width.px]=\"containerDiv.offsetWidth\"\n        >\n            <ul\n                class=\"max-h-52 overflow-auto\"\n                role=\"listbox\"\n            >\n                <!-- Virtual scroll -->\n                @if (virtualScroll() && filteredSuggestions().length > 10) {\n                    <cdk-virtual-scroll-viewport\n                        [itemSize]=\"virtualScrollItemSize()\"\n                        class=\"h-52 overflow-auto\"\n                    >\n                        <ng-container\n                            *cdkVirtualFor=\"\n                                let suggestion of enrichedFilteredSuggestions();\n                                let i = $index;\n                                trackBy: trackById\n                            \"\n                        >\n                            <ng-container\n                                [ngTemplateOutlet]=\"suggestionItemTemplate\"\n                                [ngTemplateOutletContext]=\"{ suggestion, i }\"\n                            ></ng-container>\n                        </ng-container>\n                    </cdk-virtual-scroll-viewport>\n                }\n\n                <!-- Normal list -->\n                @if (!virtualScroll() || filteredSuggestions().length <= 10) {\n                    @for (suggestion of enrichedFilteredSuggestions(); track suggestion.id; let i = $index) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"suggestionItemTemplate\"\n                            [ngTemplateOutletContext]=\"{ suggestion, i }\"\n                        ></ng-container>\n                    }\n                }\n\n                @if (showEmptyMessage()) {\n                    <span class=\"p-3 text-grayscale-60\">{{\n                        emptyMessage() ?? 'platform.angular_components.no_records_found' | translate\n                    }}</span>\n                }\n            </ul>\n        </div>\n    </ng-template>\n}\n\n<ng-template\n    #suggestionItemTemplate\n    let-suggestion=\"suggestion\"\n    let-i=\"i\"\n>\n    <li\n        [id]=\"suggestion.id\"\n        class=\"rounded-xsmall flex cursor-pointer items-center gap-2 px-3 py-2 text-grayscale-70\"\n        [class.bg-grayscale-10]=\"i === focusedIndex()\"\n        [class.bg-grayscale-20]=\"suggestion.isSelected\"\n        [attr.aria-selected]=\"suggestion.isSelected\"\n        role=\"option\"\n        (click)=\"selectSuggestion(suggestion.data)\"\n    >\n        @if (checkmark() && multiple() && suggestion.isSelected) {\n            <i class=\"far fa-check\"></i>\n        }\n        {{ suggestionLabel() ? suggestion.data[suggestionLabel()!] : suggestion.data }}\n    </li>\n</ng-template>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "component", type: AutocompleteChipComponent, selector: "s-autocomplete-chip", inputs: ["suggestion", "suggestionLabel"], outputs: ["suggestionRemoved"] }] });
+        ], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n    #containerDiv\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"flex h-[35px] w-full items-center overflow-hidden rounded-[4px] border focus-within:border-2 focus-within:border-primary hover:bg-grayscale-10\"\n    [class]=\"inputClass()\"\n    [ngClass]=\"{\n        'pointer-events-none border-grayscale-20 bg-grayscale-5 text-grayscale-30': disabled(),\n        'pointer-events-auto border-grayscale-30 bg-grayscale-0 text-grayscale-90': !disabled(),\n        'border-criticality-red': invalid(),\n    }\"\n>\n    <div\n        class=\"flex flex-grow gap-2 px-2\"\n        [ngClass]=\"{\n            'border-r': dropdown(),\n            'border-grayscale-20': dropdown() && disabled(),\n            'border-grayscale-30 focus-within:border-r-2 focus-within:border-r-primary': dropdown() && !disabled(),\n            'bg-grayscale-5': disabled(),\n            'bg-grayscale-0': !disabled(),\n        }\"\n    >\n        @if (multiple() && values().length > 0) {\n            <div class=\"flex flex-wrap items-center gap-2\">\n                @for (suggestion of values(); track suggestion) {\n                    <s-autocomplete-chip\n                        [suggestion]=\"suggestion\"\n                        [suggestionLabel]=\"suggestionLabel()\"\n                        [removeIconClass]=\"removeIconClass()\"\n                        (suggestionRemoved)=\"removeSuggestion($event)\"\n                    ></s-autocomplete-chip>\n                }\n            </div>\n        }\n        <input\n            #inputEl\n            class=\"min-h-[35px] grow outline-none\"\n            type=\"text\"\n            [placeholder]=\"placeholder() ?? 'platform.angular_components.type_to_search' | translate\"\n            [readOnly]=\"readonly()\"\n            [(ngModel)]=\"inputValue\"\n            [attr.aria-disabled]=\"disabled()\"\n            [attr.aria-autocomplete]=\"multiple() ? 'list' : 'both'\"\n            [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? filteredSuggestions()[focusedIndex()].id : null\"\n            role=\"searchbox\"\n            (input)=\"onInput($event)\"\n            (keydown)=\"onKeyDown($event)\"\n            (keyUp)=\"onKeyUp($event)\"\n            (blur)=\"onInputBlur($event)\"\n            (focus)=\"onInputFocus($event)\"\n        />\n\n        @if (loading()) {\n            <div class=\"flex items-center justify-center\">\n                <svg\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"animate-spin\"\n                >\n                    <circle\n                        cx=\"10\"\n                        cy=\"10\"\n                        r=\"9\"\n                        stroke=\"#428bca\"\n                        stroke-width=\"2\"\n                        fill=\"none\"\n                        stroke-dasharray=\"56.5\"\n                        stroke-dashoffset=\"10\"\n                        stroke-linecap=\"round\"\n                    />\n                </svg>\n            </div>\n        } @else {\n            @if (value() && !this.disabled()) {\n                <button\n                    class=\"px-2\"\n                    (click)=\"clear()\"\n                    tabindex=\"-1\"\n                >\n                    <i\n                        class=\"text-grayscale-60\"\n                        [class]=\"clearIconClass()\"\n                    ></i>\n                </button>\n            }\n        }\n    </div>\n\n    @if (dropdown()) {\n        <button\n            class=\"flex h-full w-[35px] flex-shrink-0 flex-grow-0 items-center justify-center hover:bg-grayscale-10\"\n            (click)=\"toggleDropdown()\"\n        >\n            <i\n                class=\"fas text-grayscale-90\"\n                [class.fa-caret-down]=\"!isOpen()\"\n                [class.fa-caret-up]=\"isOpen()\"\n            ></i>\n        </button>\n    }\n</div>\n\n@if (showEmptyMessage() || (filteredSuggestions().length > 0 && !readonly())) {\n    <ng-template\n        #dropdownTemplate\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        (backdropClick)=\"isOpen.set(false)\"\n        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n        (detach)=\"isOpen.set(false)\"\n    >\n        <div\n            [id]=\"'dropdown-container-' + componentId\"\n            class=\"mt-0.5 rounded-[4px] bg-grayscale-0 py-1 shadow\"\n            [style.width.px]=\"containerDiv.offsetWidth\"\n        >\n            <ul\n                class=\"max-h-52 overflow-auto\"\n                role=\"listbox\"\n            >\n                <!-- Virtual scroll -->\n                @if (virtualScroll() && filteredSuggestions().length > 10) {\n                    <cdk-virtual-scroll-viewport\n                        [itemSize]=\"virtualScrollItemSize()\"\n                        class=\"h-52 overflow-auto\"\n                    >\n                        <ng-container\n                            *cdkVirtualFor=\"\n                                let suggestion of enrichedFilteredSuggestions();\n                                let i = $index;\n                                trackBy: trackById\n                            \"\n                        >\n                            <ng-container\n                                [ngTemplateOutlet]=\"suggestionItemTemplate\"\n                                [ngTemplateOutletContext]=\"{ suggestion, i }\"\n                            ></ng-container>\n                        </ng-container>\n                    </cdk-virtual-scroll-viewport>\n                }\n\n                <!-- Normal list -->\n                @if (!virtualScroll() || filteredSuggestions().length <= 10) {\n                    @for (suggestion of enrichedFilteredSuggestions(); track suggestion.id; let i = $index) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"suggestionItemTemplate\"\n                            [ngTemplateOutletContext]=\"{ suggestion, i }\"\n                        ></ng-container>\n                    }\n                }\n\n                @if (showEmptyMessage()) {\n                    <span class=\"p-3 text-grayscale-60\">{{\n                        emptyMessage() ?? 'platform.angular_components.no_records_found' | translate\n                    }}</span>\n                }\n            </ul>\n        </div>\n    </ng-template>\n}\n\n<ng-template\n    #suggestionItemTemplate\n    let-suggestion=\"suggestion\"\n    let-i=\"i\"\n>\n    <li\n        [id]=\"suggestion.id\"\n        class=\"rounded-xsmall flex cursor-pointer items-center gap-2 px-3 py-2 text-grayscale-70\"\n        [class.bg-grayscale-10]=\"i === focusedIndex()\"\n        [class.bg-grayscale-20]=\"suggestion.isSelected\"\n        [attr.aria-selected]=\"suggestion.isSelected\"\n        role=\"option\"\n        (click)=\"selectSuggestion(suggestion.data)\"\n    >\n        @if (checkmark() && multiple() && suggestion.isSelected) {\n            <i [class]=\"checkIconClass()\"></i>\n        }\n        {{ suggestionLabel() ? suggestion.data[suggestionLabel()!] : suggestion.data }}\n    </li>\n</ng-template>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "component", type: AutocompleteChipComponent, selector: "s-autocomplete-chip", inputs: ["suggestion", "suggestionLabel", "removeIconClass"], outputs: ["suggestionRemoved"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -620,7 +628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         '[attr.aria-haspopup]': '"listbox"',
                         '[attr.aria-owns]': 'isOpen() ? "dropdown-container-" + componentId : null',
                         '(window:resize)': 'onWindowResize()',
-                    }, template: "<div\n    #containerDiv\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"flex h-[35px] w-full items-center overflow-hidden rounded-[4px] border focus-within:border-2 focus-within:border-primary hover:bg-grayscale-10\"\n    [class]=\"inputClass()\"\n    [ngClass]=\"{\n        'pointer-events-none border-grayscale-20 bg-grayscale-5 text-grayscale-30': disabled(),\n        'pointer-events-auto border-grayscale-30 bg-grayscale-0 text-grayscale-90': !disabled(),\n        'border-criticality-red': invalid(),\n    }\"\n>\n    <div\n        class=\"flex flex-grow gap-2 px-2\"\n        [ngClass]=\"{\n            'border-r': dropdown(),\n            'border-grayscale-20': dropdown() && disabled(),\n            'border-grayscale-30 focus-within:border-r-2 focus-within:border-r-primary': dropdown() && !disabled(),\n            'bg-grayscale-5': disabled(),\n            'bg-grayscale-0': !disabled(),\n        }\"\n    >\n        @if (multiple() && values().length > 0) {\n            <div class=\"flex flex-wrap items-center gap-2\">\n                @for (suggestion of values(); track suggestion) {\n                    <s-autocomplete-chip\n                        [suggestion]=\"suggestion\"\n                        [suggestionLabel]=\"suggestionLabel()\"\n                        (suggestionRemoved)=\"removeSuggestion($event)\"\n                    ></s-autocomplete-chip>\n                }\n            </div>\n        }\n        <input\n            #inputEl\n            class=\"min-h-[35px] grow outline-none\"\n            type=\"text\"\n            [placeholder]=\"placeholder() ?? 'platform.angular_components.type_to_search' | translate\"\n            [readOnly]=\"readonly()\"\n            [(ngModel)]=\"inputValue\"\n            [attr.aria-disabled]=\"disabled()\"\n            [attr.aria-autocomplete]=\"multiple() ? 'list' : 'both'\"\n            [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? filteredSuggestions()[focusedIndex()].id : null\"\n            role=\"searchbox\"\n            (input)=\"onInput($event)\"\n            (keydown)=\"onKeyDown($event)\"\n            (keyUp)=\"onKeyUp($event)\"\n            (blur)=\"onInputBlur($event)\"\n            (focus)=\"onInputFocus($event)\"\n        />\n\n        @if (loading()) {\n            <div class=\"flex items-center justify-center\">\n                <svg\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"animate-spin\"\n                >\n                    <circle\n                        cx=\"10\"\n                        cy=\"10\"\n                        r=\"9\"\n                        stroke=\"#428bca\"\n                        stroke-width=\"2\"\n                        fill=\"none\"\n                        stroke-dasharray=\"56.5\"\n                        stroke-dashoffset=\"10\"\n                        stroke-linecap=\"round\"\n                    />\n                </svg>\n            </div>\n        } @else {\n            @if (value() && !this.disabled()) {\n                <button\n                    class=\"px-2\"\n                    (click)=\"clear()\"\n                    tabindex=\"-1\"\n                >\n                    <i class=\"far fa-times text-grayscale-60\"></i>\n                </button>\n            }\n        }\n    </div>\n\n    @if (dropdown()) {\n        <button\n            class=\"flex h-full w-[35px] flex-shrink-0 flex-grow-0 items-center justify-center hover:bg-grayscale-10\"\n            (click)=\"toggleDropdown()\"\n        >\n            <i\n                class=\"fas text-grayscale-90\"\n                [class.fa-caret-down]=\"!isOpen()\"\n                [class.fa-caret-up]=\"isOpen()\"\n            ></i>\n        </button>\n    }\n</div>\n\n@if (showEmptyMessage() || (filteredSuggestions().length > 0 && !readonly())) {\n    <ng-template\n        #dropdownTemplate\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        (backdropClick)=\"isOpen.set(false)\"\n        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n        (detach)=\"isOpen.set(false)\"\n    >\n        <div\n            [id]=\"'dropdown-container-' + componentId\"\n            class=\"mt-0.5 rounded-[4px] bg-grayscale-0 py-1 shadow\"\n            [style.width.px]=\"containerDiv.offsetWidth\"\n        >\n            <ul\n                class=\"max-h-52 overflow-auto\"\n                role=\"listbox\"\n            >\n                <!-- Virtual scroll -->\n                @if (virtualScroll() && filteredSuggestions().length > 10) {\n                    <cdk-virtual-scroll-viewport\n                        [itemSize]=\"virtualScrollItemSize()\"\n                        class=\"h-52 overflow-auto\"\n                    >\n                        <ng-container\n                            *cdkVirtualFor=\"\n                                let suggestion of enrichedFilteredSuggestions();\n                                let i = $index;\n                                trackBy: trackById\n                            \"\n                        >\n                            <ng-container\n                                [ngTemplateOutlet]=\"suggestionItemTemplate\"\n                                [ngTemplateOutletContext]=\"{ suggestion, i }\"\n                            ></ng-container>\n                        </ng-container>\n                    </cdk-virtual-scroll-viewport>\n                }\n\n                <!-- Normal list -->\n                @if (!virtualScroll() || filteredSuggestions().length <= 10) {\n                    @for (suggestion of enrichedFilteredSuggestions(); track suggestion.id; let i = $index) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"suggestionItemTemplate\"\n                            [ngTemplateOutletContext]=\"{ suggestion, i }\"\n                        ></ng-container>\n                    }\n                }\n\n                @if (showEmptyMessage()) {\n                    <span class=\"p-3 text-grayscale-60\">{{\n                        emptyMessage() ?? 'platform.angular_components.no_records_found' | translate\n                    }}</span>\n                }\n            </ul>\n        </div>\n    </ng-template>\n}\n\n<ng-template\n    #suggestionItemTemplate\n    let-suggestion=\"suggestion\"\n    let-i=\"i\"\n>\n    <li\n        [id]=\"suggestion.id\"\n        class=\"rounded-xsmall flex cursor-pointer items-center gap-2 px-3 py-2 text-grayscale-70\"\n        [class.bg-grayscale-10]=\"i === focusedIndex()\"\n        [class.bg-grayscale-20]=\"suggestion.isSelected\"\n        [attr.aria-selected]=\"suggestion.isSelected\"\n        role=\"option\"\n        (click)=\"selectSuggestion(suggestion.data)\"\n    >\n        @if (checkmark() && multiple() && suggestion.isSelected) {\n            <i class=\"far fa-check\"></i>\n        }\n        {{ suggestionLabel() ? suggestion.data[suggestionLabel()!] : suggestion.data }}\n    </li>\n</ng-template>\n\n" }]
+                    }, template: "<div\n    #containerDiv\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    class=\"flex h-[35px] w-full items-center overflow-hidden rounded-[4px] border focus-within:border-2 focus-within:border-primary hover:bg-grayscale-10\"\n    [class]=\"inputClass()\"\n    [ngClass]=\"{\n        'pointer-events-none border-grayscale-20 bg-grayscale-5 text-grayscale-30': disabled(),\n        'pointer-events-auto border-grayscale-30 bg-grayscale-0 text-grayscale-90': !disabled(),\n        'border-criticality-red': invalid(),\n    }\"\n>\n    <div\n        class=\"flex flex-grow gap-2 px-2\"\n        [ngClass]=\"{\n            'border-r': dropdown(),\n            'border-grayscale-20': dropdown() && disabled(),\n            'border-grayscale-30 focus-within:border-r-2 focus-within:border-r-primary': dropdown() && !disabled(),\n            'bg-grayscale-5': disabled(),\n            'bg-grayscale-0': !disabled(),\n        }\"\n    >\n        @if (multiple() && values().length > 0) {\n            <div class=\"flex flex-wrap items-center gap-2\">\n                @for (suggestion of values(); track suggestion) {\n                    <s-autocomplete-chip\n                        [suggestion]=\"suggestion\"\n                        [suggestionLabel]=\"suggestionLabel()\"\n                        [removeIconClass]=\"removeIconClass()\"\n                        (suggestionRemoved)=\"removeSuggestion($event)\"\n                    ></s-autocomplete-chip>\n                }\n            </div>\n        }\n        <input\n            #inputEl\n            class=\"min-h-[35px] grow outline-none\"\n            type=\"text\"\n            [placeholder]=\"placeholder() ?? 'platform.angular_components.type_to_search' | translate\"\n            [readOnly]=\"readonly()\"\n            [(ngModel)]=\"inputValue\"\n            [attr.aria-disabled]=\"disabled()\"\n            [attr.aria-autocomplete]=\"multiple() ? 'list' : 'both'\"\n            [attr.aria-activedescendant]=\"focusedIndex() >= 0 ? filteredSuggestions()[focusedIndex()].id : null\"\n            role=\"searchbox\"\n            (input)=\"onInput($event)\"\n            (keydown)=\"onKeyDown($event)\"\n            (keyUp)=\"onKeyUp($event)\"\n            (blur)=\"onInputBlur($event)\"\n            (focus)=\"onInputFocus($event)\"\n        />\n\n        @if (loading()) {\n            <div class=\"flex items-center justify-center\">\n                <svg\n                    width=\"20\"\n                    height=\"20\"\n                    viewBox=\"0 0 20 20\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    class=\"animate-spin\"\n                >\n                    <circle\n                        cx=\"10\"\n                        cy=\"10\"\n                        r=\"9\"\n                        stroke=\"#428bca\"\n                        stroke-width=\"2\"\n                        fill=\"none\"\n                        stroke-dasharray=\"56.5\"\n                        stroke-dashoffset=\"10\"\n                        stroke-linecap=\"round\"\n                    />\n                </svg>\n            </div>\n        } @else {\n            @if (value() && !this.disabled()) {\n                <button\n                    class=\"px-2\"\n                    (click)=\"clear()\"\n                    tabindex=\"-1\"\n                >\n                    <i\n                        class=\"text-grayscale-60\"\n                        [class]=\"clearIconClass()\"\n                    ></i>\n                </button>\n            }\n        }\n    </div>\n\n    @if (dropdown()) {\n        <button\n            class=\"flex h-full w-[35px] flex-shrink-0 flex-grow-0 items-center justify-center hover:bg-grayscale-10\"\n            (click)=\"toggleDropdown()\"\n        >\n            <i\n                class=\"fas text-grayscale-90\"\n                [class.fa-caret-down]=\"!isOpen()\"\n                [class.fa-caret-up]=\"isOpen()\"\n            ></i>\n        </button>\n    }\n</div>\n\n@if (showEmptyMessage() || (filteredSuggestions().length > 0 && !readonly())) {\n    <ng-template\n        #dropdownTemplate\n        cdkConnectedOverlay\n        [cdkConnectedOverlayOrigin]=\"trigger\"\n        [cdkConnectedOverlayOpen]=\"isOpen()\"\n        [cdkConnectedOverlayHasBackdrop]=\"true\"\n        (backdropClick)=\"isOpen.set(false)\"\n        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n        (detach)=\"isOpen.set(false)\"\n    >\n        <div\n            [id]=\"'dropdown-container-' + componentId\"\n            class=\"mt-0.5 rounded-[4px] bg-grayscale-0 py-1 shadow\"\n            [style.width.px]=\"containerDiv.offsetWidth\"\n        >\n            <ul\n                class=\"max-h-52 overflow-auto\"\n                role=\"listbox\"\n            >\n                <!-- Virtual scroll -->\n                @if (virtualScroll() && filteredSuggestions().length > 10) {\n                    <cdk-virtual-scroll-viewport\n                        [itemSize]=\"virtualScrollItemSize()\"\n                        class=\"h-52 overflow-auto\"\n                    >\n                        <ng-container\n                            *cdkVirtualFor=\"\n                                let suggestion of enrichedFilteredSuggestions();\n                                let i = $index;\n                                trackBy: trackById\n                            \"\n                        >\n                            <ng-container\n                                [ngTemplateOutlet]=\"suggestionItemTemplate\"\n                                [ngTemplateOutletContext]=\"{ suggestion, i }\"\n                            ></ng-container>\n                        </ng-container>\n                    </cdk-virtual-scroll-viewport>\n                }\n\n                <!-- Normal list -->\n                @if (!virtualScroll() || filteredSuggestions().length <= 10) {\n                    @for (suggestion of enrichedFilteredSuggestions(); track suggestion.id; let i = $index) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"suggestionItemTemplate\"\n                            [ngTemplateOutletContext]=\"{ suggestion, i }\"\n                        ></ng-container>\n                    }\n                }\n\n                @if (showEmptyMessage()) {\n                    <span class=\"p-3 text-grayscale-60\">{{\n                        emptyMessage() ?? 'platform.angular_components.no_records_found' | translate\n                    }}</span>\n                }\n            </ul>\n        </div>\n    </ng-template>\n}\n\n<ng-template\n    #suggestionItemTemplate\n    let-suggestion=\"suggestion\"\n    let-i=\"i\"\n>\n    <li\n        [id]=\"suggestion.id\"\n        class=\"rounded-xsmall flex cursor-pointer items-center gap-2 px-3 py-2 text-grayscale-70\"\n        [class.bg-grayscale-10]=\"i === focusedIndex()\"\n        [class.bg-grayscale-20]=\"suggestion.isSelected\"\n        [attr.aria-selected]=\"suggestion.isSelected\"\n        role=\"option\"\n        (click)=\"selectSuggestion(suggestion.data)\"\n    >\n        @if (checkmark() && multiple() && suggestion.isSelected) {\n            <i [class]=\"checkIconClass()\"></i>\n        }\n        {{ suggestionLabel() ? suggestion.data[suggestionLabel()!] : suggestion.data }}\n    </li>\n</ng-template>\n\n" }]
         }], ctorParameters: () => [] });
 
 /**