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

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

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

Files changed (646) hide show

package/fesm2022/seniorsistemas-angular-components-chat.mjs CHANGED Viewed

@@ -1,11 +1,10 @@
 import * as i0 from '@angular/core';
-import { Component, Input, ElementRef, ViewChildren, NgModule } from '@angular/core';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@seniorsistemas/angular-components/locale';
-import { LocaleModule } from '@seniorsistemas/angular-components/locale';
-import * as i3 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
+import { Component, Input, inject, DestroyRef, ElementRef, ViewChildren, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { AsyncPipe, NgClass } from '@angular/common';
+import { LocalizedDatePipe } from '@seniorsistemas/angular-components/locale';
+import * as i1 from '@ngx-translate/core';
+import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
 /**
  * @description Componente que renderiza uma única mensagem de chat.
@@ -37,11 +36,11 @@ class ChatMessageComponent {
         return match ? match[0] : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChatMessageComponent, selector: "s-chat-message", inputs: { message: "message" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chat-message\" [class.chat-message--mine]=\"message.isMine\">\n    <div class=\"chat-message-wrapper\">\n        <div class=\"header\">\n            <img class=\"thumbnail\" [src]=\"message.thumbnailUrl\" alt=\"Thumbnail\" />\n            <span class=\"name\">{{ message.senderName }}</span>\n            <span *ngIf=\"message.sentAt\" class=\"date\">{{ message.sentAt | localizedDate: \"L LTS\" | async }}</span>\n        </div>\n        <p class=\"body\">{{ message.text }}</p>\n\n        <div *ngIf=\"message.attachmentUrl\" class=\"attachment\">\n            <span class=\"attachment-label\">{{ \"platform.angular_components.attachment\" | translate }}:</span>\n            <a class=\"attachment-anchor\" [href]=\"message.attachmentUrl\" [download]=\"fileName\">{{ fileName }}</a>\n        </div>\n    </div>\n</div>\n", styles: [".chat-message{display:flex;justify-content:flex-start;padding:10px 20px}.chat-message .chat-message-wrapper{background-color:#cabbd0;border-radius:16px 16px 16px 0;display:inline-flex;flex-direction:column;max-width:85%;padding:20px}.chat-message .chat-message-wrapper .header{align-items:center;color:#000;display:flex;font-family:Open Sans,sans-serif;gap:8px}.chat-message .chat-message-wrapper .header .thumbnail{border-radius:50%;height:32px;object-fit:cover;object-position:center;width:32px;background-color:#fff}.chat-message .chat-message-wrapper .header .name{font-size:14px;font-weight:700}.chat-message .chat-message-wrapper .header .date{font-size:12px}.chat-message .chat-message-wrapper .body{color:#000;font-family:Open Sans,sans-serif;font-size:12px}.chat-message .chat-message-wrapper .attachment{align-items:center;display:flex;gap:10px;margin-top:12px;-webkit-user-select:none;user-select:none;flex-wrap:wrap}.chat-message .chat-message-wrapper .attachment-label{color:#0e1119;font-family:Open Sans,sans-serif;font-size:12px;font-weight:700}.chat-message .chat-message-wrapper .attachment-anchor{background-color:#fff;border-radius:4px;padding:0 12px;text-decoration:none}.chat-message--mine{justify-content:flex-end}.chat-message--mine .chat-message-wrapper{background-color:#eeebf2;border-radius:16px 16px 0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.LocalizedDatePipe, name: "localizedDate" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChatMessageComponent, isStandalone: true, selector: "s-chat-message", inputs: { message: "message" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    class=\"flex py-[10px] px-5\"\r\n    [class.justify-end]=\"message.isMine\"\r\n>\r\n    <div\r\n        class=\"inline-flex flex-col max-w-[85%] p-5\"\r\n        [ngClass]=\"message.isMine\r\n            ? 'bg-grayscale-10 rounded-tl-[16px] rounded-tr-[16px] rounded-br-none rounded-bl-[16px]'\r\n            : 'bg-clairvoyant-100 rounded-tl-[16px] rounded-tr-[16px] rounded-br-[16px] rounded-bl-none'\"\r\n    >\r\n        <div class=\"flex items-center text-grayscale-100 font-open-sans gap-2\">\r\n            <img\r\n                class=\"rounded-[50%] overflow-hidden h-8 w-8 object-cover object-center bg-grayscale-0\"\r\n                [src]=\"message.thumbnailUrl\"\r\n                alt=\"Thumbnail\"\r\n            />\r\n            <span class=\"text-sm font-bold\">{{ message.senderName }}</span>\r\n            @if (message.sentAt) {\r\n                <span class=\"text-xs\">{{ message.sentAt | localizedDate: 'L LTS' | async }}</span>\r\n            }\r\n        </div>\r\n        <p class=\"text-grayscale-100 font-open-sans text-xs\">{{ message.text }}</p>\r\n\r\n        @if (message.attachmentUrl) {\r\n            <div class=\"flex items-center gap-[10px] mt-3 select-none flex-wrap\">\r\n                <span class=\"text-grayscale-100 font-open-sans text-xs font-bold\">{{ 'platform.angular_components.attachment' | translate }}:</span>\r\n                <a\r\n                    class=\"bg-grayscale-0 rounded-medium px-3 no-underline\"\r\n                    [href]=\"message.attachmentUrl\"\r\n                    [download]=\"fileName\"\r\n                    >{{ fileName }}</a\r\n                >\r\n            </div>\r\n        }\r\n    </div>\r\n</div>\r\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: LocalizedDatePipe, name: "localizedDate" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-chat-message', template: "<div class=\"chat-message\" [class.chat-message--mine]=\"message.isMine\">\n    <div class=\"chat-message-wrapper\">\n        <div class=\"header\">\n            <img class=\"thumbnail\" [src]=\"message.thumbnailUrl\" alt=\"Thumbnail\" />\n            <span class=\"name\">{{ message.senderName }}</span>\n            <span *ngIf=\"message.sentAt\" class=\"date\">{{ message.sentAt | localizedDate: \"L LTS\" | async }}</span>\n        </div>\n        <p class=\"body\">{{ message.text }}</p>\n\n        <div *ngIf=\"message.attachmentUrl\" class=\"attachment\">\n            <span class=\"attachment-label\">{{ \"platform.angular_components.attachment\" | translate }}:</span>\n            <a class=\"attachment-anchor\" [href]=\"message.attachmentUrl\" [download]=\"fileName\">{{ fileName }}</a>\n        </div>\n    </div>\n</div>\n", styles: [".chat-message{display:flex;justify-content:flex-start;padding:10px 20px}.chat-message .chat-message-wrapper{background-color:#cabbd0;border-radius:16px 16px 16px 0;display:inline-flex;flex-direction:column;max-width:85%;padding:20px}.chat-message .chat-message-wrapper .header{align-items:center;color:#000;display:flex;font-family:Open Sans,sans-serif;gap:8px}.chat-message .chat-message-wrapper .header .thumbnail{border-radius:50%;height:32px;object-fit:cover;object-position:center;width:32px;background-color:#fff}.chat-message .chat-message-wrapper .header .name{font-size:14px;font-weight:700}.chat-message .chat-message-wrapper .header .date{font-size:12px}.chat-message .chat-message-wrapper .body{color:#000;font-family:Open Sans,sans-serif;font-size:12px}.chat-message .chat-message-wrapper .attachment{align-items:center;display:flex;gap:10px;margin-top:12px;-webkit-user-select:none;user-select:none;flex-wrap:wrap}.chat-message .chat-message-wrapper .attachment-label{color:#0e1119;font-family:Open Sans,sans-serif;font-size:12px;font-weight:700}.chat-message .chat-message-wrapper .attachment-anchor{background-color:#fff;border-radius:4px;padding:0 12px;text-decoration:none}.chat-message--mine{justify-content:flex-end}.chat-message--mine .chat-message-wrapper{background-color:#eeebf2;border-radius:16px 16px 0}\n"] }]
+            args: [{ selector: 's-chat-message', standalone: true, imports: [AsyncPipe, NgClass, LocalizedDatePipe, TranslatePipe], template: "<div\r\n    class=\"flex py-[10px] px-5\"\r\n    [class.justify-end]=\"message.isMine\"\r\n>\r\n    <div\r\n        class=\"inline-flex flex-col max-w-[85%] p-5\"\r\n        [ngClass]=\"message.isMine\r\n            ? 'bg-grayscale-10 rounded-tl-[16px] rounded-tr-[16px] rounded-br-none rounded-bl-[16px]'\r\n            : 'bg-clairvoyant-100 rounded-tl-[16px] rounded-tr-[16px] rounded-br-[16px] rounded-bl-none'\"\r\n    >\r\n        <div class=\"flex items-center text-grayscale-100 font-open-sans gap-2\">\r\n            <img\r\n                class=\"rounded-[50%] overflow-hidden h-8 w-8 object-cover object-center bg-grayscale-0\"\r\n                [src]=\"message.thumbnailUrl\"\r\n                alt=\"Thumbnail\"\r\n            />\r\n            <span class=\"text-sm font-bold\">{{ message.senderName }}</span>\r\n            @if (message.sentAt) {\r\n                <span class=\"text-xs\">{{ message.sentAt | localizedDate: 'L LTS' | async }}</span>\r\n            }\r\n        </div>\r\n        <p class=\"text-grayscale-100 font-open-sans text-xs\">{{ message.text }}</p>\r\n\r\n        @if (message.attachmentUrl) {\r\n            <div class=\"flex items-center gap-[10px] mt-3 select-none flex-wrap\">\r\n                <span class=\"text-grayscale-100 font-open-sans text-xs font-bold\">{{ 'platform.angular_components.attachment' | translate }}:</span>\r\n                <a\r\n                    class=\"bg-grayscale-0 rounded-medium px-3 no-underline\"\r\n                    [href]=\"message.attachmentUrl\"\r\n                    [download]=\"fileName\"\r\n                    >{{ fileName }}</a\r\n                >\r\n            </div>\r\n        }\r\n    </div>\r\n</div>\r\n" }]
         }], propDecorators: { message: [{
                 type: Input,
                 args: [{ required: true }]
@@ -60,6 +59,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * @category Inputs
  */
 class ChatComponent {
+    _destroyRef = inject(DestroyRef);
     /**
      * @description Lista de mensagens exibidas no chat.
      * Cada item é do tipo {@link ChatMessage}, contendo texto, remetente e demais metadados.
@@ -70,7 +70,7 @@ class ChatComponent {
     messageElements = null;
     ngAfterViewInit() {
         this.scrollToBottom();
-        this.messageElements?.changes.subscribe(() => {
+        this.messageElements?.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
             this.scrollToBottom();
         });
     }
@@ -78,11 +78,11 @@ class ChatComponent {
         this.messageElements?.last?.nativeElement.scrollIntoView({ behavior: 'smooth' });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChatComponent, selector: "s-chat", inputs: { messages: "messages" }, viewQueries: [{ propertyName: "messageElements", predicate: ["messageElements"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"chat-container\">\n    <s-chat-message #messageElements *ngFor=\"let message of messages\" [message]=\"message\"> </s-chat-message>\n</div>\n", styles: [".chat-container{min-height:500px;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ChatMessageComponent, selector: "s-chat-message", inputs: ["message"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChatComponent, isStandalone: true, selector: "s-chat", inputs: { messages: "messages" }, viewQueries: [{ propertyName: "messageElements", predicate: ["messageElements"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"min-h-[500px] overflow-auto\">\r\n    @for (message of messages; track message) {\r\n        <s-chat-message\r\n            #messageElements\r\n            [message]=\"message\"\r\n        >\r\n        </s-chat-message>\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "component", type: ChatMessageComponent, selector: "s-chat-message", inputs: ["message"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-chat', template: "<div class=\"chat-container\">\n    <s-chat-message #messageElements *ngFor=\"let message of messages\" [message]=\"message\"> </s-chat-message>\n</div>\n", styles: [".chat-container{min-height:500px;overflow:auto}\n"] }]
+            args: [{ selector: 's-chat', standalone: true, imports: [ChatMessageComponent], template: "<div class=\"min-h-[500px] overflow-auto\">\r\n    @for (message of messages; track message) {\r\n        <s-chat-message\r\n            #messageElements\r\n            [message]=\"message\"\r\n        >\r\n        </s-chat-message>\r\n    }\r\n</div>\r\n" }]
         }], propDecorators: { messages: [{
                 type: Input
             }], messageElements: [{
@@ -92,14 +92,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class ChatModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, declarations: [ChatComponent, ChatMessageComponent], imports: [CommonModule, LocaleModule, i3.TranslateModule], exports: [ChatComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, imports: [CommonModule, LocaleModule, TranslateModule.forChild()] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, imports: [i1.TranslateModule, ChatComponent], exports: [ChatComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, imports: [TranslateModule.forChild()] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, LocaleModule, TranslateModule.forChild()],
-                    declarations: [ChatComponent, ChatMessageComponent],
+                    imports: [TranslateModule.forChild(), ChatComponent],
                     exports: [ChatComponent],
                 }]
         }] });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"seniorsistemas-angular-components-chat.mjs","sources":["../../projects/angular-components/chat/src/lib/chat/components/chat-message/chat-message.component.ts","../../projects/angular-components/chat/src/lib/chat/components/chat-message/chat-message.component.html","../../projects/angular-components/chat/src/lib/chat/chat.component.ts","../../projects/angular-components/chat/src/lib/chat/chat.component.html","../../projects/angular-components/chat/src/lib/chat/chat.module.ts","../../projects/angular-components/chat/src/seniorsistemas-angular-components-chat.ts"],"sourcesContent":["import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';\n\nimport { ChatMessage } from '../../types/chat-message';\n\n/*\n @description Componente que renderiza uma única mensagem de chat.\n * Exibe o conteúdo textual, o remetente (próprio ou terceiro) e suporte a\n * anexos via `attachmentUrl`, exibindo o nome do arquivo automaticamente.\n \n @example\n * ```html\n * <s-chat-message [message]=\"item\" />\n * ```\n \n @category Inputs\n /\n@Component({\n selector: 's-chat-message',\n templateUrl: './chat-message.component.html',\n ~~styleUrls~~: [~~'./chat-message.component.scss'~~],\n})\nexport class ChatMessageComponent implements OnChanges {\n /\n @description Objeto com os dados da mensagem a ser exibida,\n * incluindo texto, remetente e URL de anexo. Campo obrigatório.\n /\n @Input({ required: true })\n public message!: ChatMessage;\n\n public fileName: string \| null = null;\n\n public ngOnChanges(changes: SimpleChanges): void {\n if (changes['message']) {\n this.fileName = this.message.attachmentUrl ? this.getFileNameByUrl(this.message.attachmentUrl) : null;\n }\n }\n\n private getFileNameByUrl(path: string): string \| null {\n const regex = /[^\\\\/]+$/;\n const match = regex.exec(path);\n return match ? match[0] : null;\n }\n}\n\n","<div class=\"~~chat~~-~~message~~\" [class.~~chat~~-~~message--mine~~]=\"message.isMine\">\n <div class=\"~~chat~~-message-~~wrapper~~\">\n <div class=\"~~header~~\">\n <img class=\"~~thumbnail~~\" [src]=\"message.thumbnailUrl\" alt=\"Thumbnail\" />\n <span class=\"~~name~~\">{{ message.senderName }}</span>\n ~~<span~~ ngIf=\"message.sentAt\" class=\"~~date~~\">{{ message.sentAt \| localizedDate: \"L LTS\" \| async }}</span>\n </div>\n <p class=\"~~body~~\">{{ message.text }}</p>\n\n ~~<div~~ ngIf=\"message.attachmentUrl\" class=\"~~attachment~~\">\n <span class=\"~~attachment~~-~~label~~\">{{ \"platform.angular_components.attachment\" \| translate }}:</span>\n <a class=\"~~attachment~~-~~anchor~~\" [href]=\"message.attachmentUrl\" [download]=\"fileName\">{{ fileName }}</a>\n </div>\n </div>\n</div>\n","import { AfterViewInit, Component, ElementRef, Input, QueryList, ViewChildren } from '@angular/core';\n\nimport { ChatMessage } from './types/chat-message';\n\n/\n @description Componente de interface de chat que exibe uma lista de mensagens\n * e faz scroll automático até a última mensagem sempre que novas são adicionadas.\n * Renderiza cada mensagem via {@link ChatMessageComponent}.\n \n @example\n * ```html\n * <s-chat [messages]=\"conversaMensagens\" />\n * ```\n \n @category Inputs\n /\n@Component({\n selector: 's-chat',\n templateUrl: './chat.component.html',\n ~~styleUrls~~: [~~'./chat.component.scss'~~],\n})\nexport class ChatComponent implements AfterViewInit {\n /\n @description Lista de mensagens exibidas no chat.\n * Cada item é do tipo {@link ChatMessage}, contendo texto, remetente e demais metadados.\n \n @default []\n /\n @Input()\n public messages: ChatMessage[] = [];\n\n @ViewChildren('messageElements', { read: ElementRef })\n private readonly messageElements: null \| QueryList<ElementRef<HTMLElement>> = null;\n\n public ngAfterViewInit(): void {\n this.scrollToBottom();\n\n this.messageElements?.changes.subscribe(() => {\n this.scrollToBottom();\n });\n }\n\n private scrollToBottom(): void {\n this.messageElements?.last?.nativeElement.scrollIntoView({ behavior: 'smooth' });\n }\n}\n\n","<div class=\"~~chat~~-~~container~~\">\n <s-chat-message #messageElements ngFor=\"let message of messages\" [message]=\"message\"> </s-chat-message>\n</div>\n","import { ~~CommonModule } from \"@angular/common\";\nimport {~~ NgModule } from \"@angular/core\~~";\~~n\nimport { TranslateModule } from \"@ngx-translate/core\~~";\~~n\nimport { ChatComponent } from \"./chat.component\";\~~nimport { ChatMessageComponent } from~~ \~~"./components/chat-message/chat-message.component~~\~~";\nimport { LocaleModule } from~~ \~~"@seniorsistemas/angular-components/locale\";\~~n\n@NgModule({\n imports: [~~CommonModule, LocaleModule,~~ TranslateModule.forChild()~~],\n declarations:~~ [ChatComponent~~, ChatMessageComponent~~],\n exports: [ChatComponent],\n})\nexport class ChatModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["~~i2.ChatMessageComponent~~"~~,"i1"~~],"mappings":"~~;;;;;;;;;AAIA~~;;;;;;;;;;;AAWG;~~MAMU~~,oBAAoB,CAAA;AAC7B;;;AAGG;AAEI,IAAA,OAAO,CAAe;IAEtB,QAAQ,GAAkB,IAAI,CAAC;AAE/B,IAAA,WAAW,CAAC,OAAsB,EAAA;AACrC,QAAA,IAAI,OAAO,CAAC,SAAS,CAAC,EAAE;YACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC;SACzG;KACJ;AAEO,IAAA,gBAAgB,CAAC,IAAY,EAAA;QACjC,MAAM,KAAK,GAAG,UAAU,CAAC;QACzB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC/B,QAAA,OAAO,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;KAClC;wGApBQ,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;~~AAApB~~,~~IAAA~~,~~OAAA,IAAA,GAAA,~~EAAA,~~CAAA~~,~~oBAAA,CAAA,~~EAAA,~~UAAA~~,EAAA,QAAA,EAAA,~~OAAA~~,EAAA,~~SAAA~~,EAAA,~~IAAA,~~EAAA,~~oBAAoB~~,~~2GCrBjC,q0BAeA,~~EAAA,~~MAAA~~,EAAA,~~CAAA,qzCAAA,CAAA,~~EAAA,~~YAAA~~,EAAA,~~CAAA,EAAA,~~IAAA,EAAA,~~WAAA~~,EAAA,~~IAAA,~~EAAA,EAAA,~~CAAA~~,~~IAAA~~,~~EAAA~~,~~QAAA~~,EAAA,~~QAAA~~,EAAA,~~MAAA~~,EAAA,~~CAAA,~~MAAA,EAAA,~~UAAA~~,EAAA,~~UAAA~~,~~CAAA~~,~~EAAA~~,EAAA,EAAA,~~IAAA~~,EAAA,MAAA,EAAA,~~IAAA~~,~~EAAA~~,EAAA,~~CAAA,~~SAAA,~~EAAA~~,~~IAAA,~~EAAA,~~OAAA,~~EAAA,EAAA,~~EAAA,~~IAAA,EAAA,MAAA,EAAA,IAAA,~~EAAA~~,~~EAAA~~,~~CAAA,iBAAA,~~EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,~~EAAA~~,~~EAAA~~,~~CAAA,aAAA,~~EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;~~4FDMa~~,oBAAoB,EAAA,UAAA,EAAA,CAAA;~~kBALhC~~,SAAS;+BACI,gBAAgB,EAAA,~~QAAA~~,~~EAAA~~,~~q0BAAA~~,EAAA,~~MAAA~~,EAAA,~~CAAA~~,~~qzCAAA~~,~~CAAA~~,EAAA,CAAA;~~8BAUnB~~,OAAO,EAAA,CAAA;sBADb,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;;;~~AEtB7B~~;;;;;;;;;;;AAWG;~~MAMU~~,aAAa,CAAA;~~AACtB~~;;;;;AAKG;IAEI,QAAQ,GAAkB,EAAE,CAAC;IAGnB,eAAe,GAA8C,IAAI,CAAC;IAE5E,eAAe,GAAA;QAClB,IAAI,CAAC,cAAc,EAAE,CAAC;~~QAEtB~~,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,SAAS,CAAC,MAAK;~~YACzC~~,IAAI,CAAC,cAAc,EAAE,CAAC;AAC1B,SAAC,CAAC,CAAC;KACN;IAEO,cAAc,GAAA;AAClB,QAAA,IAAI,CAAC,eAAe,EAAE,IAAI,EAAE,aAAa,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;KACpF;~~wGAvBQ~~,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;~~4FAAb~~,~~aAAa~~,~~EAAA~~,~~QAAA~~,~~EAAA~~,~~QAAA,~~EAAA,~~MAAA~~,~~EAAA~~,~~EAAA~~,~~QAAA,~~EAAA,UAAA,EAAA,~~EAAA~~,~~WAAA,~~EAAA,~~CAAA~~,EAAA,~~YAAA,EAAA,iBAAA,EAAA,~~SAAA,EAAA,~~CAAA~~,~~iBAAA,CAAA,~~EAAA,~~WAAA~~,~~EAAA~~,~~IAAA~~,EAAA,IAAA,~~EAUmB,UAAU,~~EAAA,~~CAAA~~,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,~~EC/BvD,4JAGA,~~EAAA,~~MAAA~~,EAAA,~~CAAA,mDAAA,CAAA,~~EAAA,~~YAAA~~,EAAA,CAAA,EAAA,~~IAAA~~,EAAA,~~WAAA~~,EAAA,~~IAAA~~,EAAA,~~EAAA,~~CAAA,~~OAAA~~,~~EAAA~~,~~QAAA,~~EAAA,~~kBAAA~~,EAAA,~~MAAA~~,EAAA,~~CAAA~~,~~SAAA,~~EAAA,~~cAAA~~,~~EAAA~~,~~eAAA,~~CAAA,EAAA,EAAA,EAAA,~~IAAA,~~EAAA,~~WAAA~~,EAAA,~~IAAA~~,~~EAAAA~~,~~oBAAA~~,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;~~4FDkBa~~,aAAa,EAAA,UAAA,EAAA,CAAA;~~kBALzB~~,SAAS~~;+BACI~~,~~QAAQ~~,EAAA,QAAA,EAAA,~~4JAAA~~,EAAA,~~MAAA~~,EAAA,~~CAAA~~,~~mDAAA~~,~~CAAA~~,EAAA,CAAA;~~8BAYX~~,QAAQ,EAAA,CAAA;sBADd,KAAK;gBAIW,eAAe,EAAA,CAAA;sBAD/B,YAAY;AAAC,gBAAA,IAAA,EAAA,CAAA,iBAAiB,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAA;;;~~MEjB5C~~,UAAU,CAAA;wGAAV,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;yGAAV,UAAU,EAAA,~~YAAA~~,EAAA,~~CAHJ~~,~~aAAa~~,~~EAAE~~,~~oBAAoB~~,~~aADxC~~,~~YAAY~~,~~EAAE~~,~~YAAY~~,~~EAAAC~~,EAAA,~~CAAA~~,~~eAAA~~,CAAA,EAAA,OAAA,EAAA,~~CAE1B~~,~~aAAa~~,CAAA,EAAA,~~CAAA~~,~~CAAA;yGAEd~~,~~UAAU~~,EAAA,OAAA,EAAA,~~CAJT~~,~~YAAY~~,~~EAAE~~,~~YAAY~~,~~EAAE~~,eAAe,CAAC,QAAQ,EAAE,CAAA,EAAA,CAAA,CAAA;;~~4FAIvD~~,UAAU,EAAA,UAAA,EAAA,CAAA;~~kBALtB~~,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,~~YAAY,EAAE,YAAY,EAAE,~~eAAe,CAAC,QAAQ,EAAE,~~CAAC;AACjE,oBAAA,YAAY,~~EAAE,~~CAAC,~~aAAa,~~EAAE,oBAAoB,~~CAAC;~~oBACnD~~,OAAO,EAAE,CAAC,aAAa,CAAC;AAC3B,iBAAA,CAAA;;;~~ACbD~~;;AAEG;;;;"}
1	+ {"version":3,"file":"seniorsistemas-angular-components-chat.mjs","sources":["../../projects/angular-components/chat/src/lib/chat/components/chat-message/chat-message.component.ts","../../projects/angular-components/chat/src/lib/chat/components/chat-message/chat-message.component.html","../../projects/angular-components/chat/src/lib/chat/chat.component.ts","../../projects/angular-components/chat/src/lib/chat/chat.component.html","../../projects/angular-components/chat/src/lib/chat/chat.module.ts","../../projects/angular-components/chat/src/seniorsistemas-angular-components-chat.ts"],"sourcesContent":["import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';\r\n\r\nimport { ChatMessage } from '../../types/chat-message';\r\nimport { AsyncPipe, NgClass } from '@angular/common';\r\nimport { LocalizedDatePipe } from '@seniorsistemas/angular-components/locale';\r\nimport { TranslatePipe } from '@ngx-translate/core';\r\n\r\n/*\r\n @description Componente que renderiza uma única mensagem de chat.\r\n * Exibe o conteúdo textual, o remetente (próprio ou terceiro) e suporte a\r\n * anexos via `attachmentUrl`, exibindo o nome do arquivo automaticamente.\r\n \r\n @example\r\n * ```html\r\n * <s-chat-message [message]=\"item\" />\r\n * ```\r\n \r\n @category Inputs\r\n /\r\n@Component({\r\n selector: 's-chat-message',\r\n templateUrl: './chat-message.component.html',\r\n standalone: true,\r\n imports: [AsyncPipe, NgClass, LocalizedDatePipe, TranslatePipe],\r\n})\r\nexport class ChatMessageComponent implements OnChanges {\r\n /\r\n @description Objeto com os dados da mensagem a ser exibida,\r\n * incluindo texto, remetente e URL de anexo. Campo obrigatório.\r\n /\r\n @Input({ required: true })\r\n public message!: ChatMessage;\r\n\r\n public fileName: string \| null = null;\r\n\r\n public ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['message']) {\r\n this.fileName = this.message.attachmentUrl ? this.getFileNameByUrl(this.message.attachmentUrl) : null;\r\n }\r\n }\r\n\r\n private getFileNameByUrl(path: string): string \| null {\r\n const regex = /[^\\\\/]+$/;\r\n const match = regex.exec(path);\r\n return match ? match[0] : null;\r\n }\r\n}\r\n","<div\r\n class=\"flex py-[10px] px-5\"\r\n [class.justify-end]=\"message.isMine\"\r\n>\r\n <div\r\n class=\"inline-flex flex-col max-w-[85%] p-5\"\r\n [ngClass]=\"message.isMine\r\n ? 'bg-grayscale-10 rounded-tl-[16px] rounded-tr-[16px] rounded-br-none rounded-bl-[16px]'\r\n : 'bg-clairvoyant-100 rounded-tl-[16px] rounded-tr-[16px] rounded-br-[16px] rounded-bl-none'\"\r\n >\r\n <div class=\"flex items-center text-grayscale-100 font-open-sans gap-2\">\r\n <img\r\n class=\"rounded-[50%] overflow-hidden h-8 w-8 object-cover object-center bg-grayscale-0\"\r\n [src]=\"message.thumbnailUrl\"\r\n alt=\"Thumbnail\"\r\n />\r\n <span class=\"text-sm font-bold\">{{ message.senderName }}</span>\r\n @if (message.sentAt) {\r\n <span class=\"text-xs\">{{ message.sentAt \| localizedDate: 'L LTS' \| async }}</span>\r\n }\r\n </div>\r\n <p class=\"text-grayscale-100 font-open-sans text-xs\">{{ message.text }}</p>\r\n\r\n @if (message.attachmentUrl) {\r\n <div class=\"flex items-center gap-[10px] mt-3 select-none flex-wrap\">\r\n <span class=\"text-grayscale-100 font-open-sans text-xs font-bold\">{{ 'platform.angular_components.attachment' \| translate }}:</span>\r\n <a\r\n class=\"bg-grayscale-0 rounded-medium px-3 no-underline\"\r\n [href]=\"message.attachmentUrl\"\r\n [download]=\"fileName\"\r\n >{{ fileName }}</a\r\n >\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n","import { AfterViewInit, Component, DestroyRef, ElementRef, Input, QueryList, ViewChildren, inject } from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\n\r\nimport { ChatMessage } from './types/chat-message';\r\n\r\nimport { ChatMessageComponent as ChatMessageComponent_1 } from './components/chat-message/chat-message.component';\r\n\r\n/\r\n @description Componente de interface de chat que exibe uma lista de mensagens\r\n * e faz scroll automático até a última mensagem sempre que novas são adicionadas.\r\n * Renderiza cada mensagem via {@link ChatMessageComponent}.\r\n \r\n @example\r\n * ```html\r\n * <s-chat [messages]=\"conversaMensagens\" />\r\n * ```\r\n \r\n @category Inputs\r\n /\r\n@Component({\r\n selector: 's-chat',\r\n templateUrl: './chat.component.html',\r\n standalone: true,\r\n imports: [ChatMessageComponent_1],\r\n})\r\nexport class ChatComponent implements AfterViewInit {\r\n private readonly _destroyRef = inject(DestroyRef);\r\n\r\n /\r\n @description Lista de mensagens exibidas no chat.\r\n * Cada item é do tipo {@link ChatMessage}, contendo texto, remetente e demais metadados.\r\n \r\n @default []\r\n /\r\n @Input()\r\n public messages: ChatMessage[] = [];\r\n\r\n @ViewChildren('messageElements', { read: ElementRef })\r\n private readonly messageElements: null \| QueryList<ElementRef<HTMLElement>> = null;\r\n\r\n public ngAfterViewInit(): void {\r\n this.scrollToBottom();\r\n\r\n this.messageElements?.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {\r\n this.scrollToBottom();\r\n });\r\n }\r\n\r\n private scrollToBottom(): void {\r\n this.messageElements?.last?.nativeElement.scrollIntoView({ behavior: 'smooth' });\r\n }\r\n}\r\n","<div class=\"min-h-[500px] overflow-auto\">\r\n @for (message of messages; track message) {\r\n <s-chat-message\r\n #messageElements\r\n [message]=\"message\"\r\n >\r\n </s-chat-message>\r\n }\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\n\r\nimport { TranslateModule } from '@ngx-translate/core';\r\n\r\nimport { ChatComponent } from './chat.component';\r\n\r\n@NgModule({\r\n imports: [TranslateModule.forChild(), ChatComponent],\r\n exports: [ChatComponent],\r\n})\r\nexport class ChatModule {}\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["ChatMessageComponent_1"],"mappings":"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"}

package/fesm2022/seniorsistemas-angular-components-checkbox-list.mjs CHANGED Viewed

@@ -1,9 +1,7 @@
 import * as i0 from '@angular/core';
 import { forwardRef, Component, Input, NgModule } from '@angular/core';
-import * as i2 from '@angular/forms';
+import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 /**
  * @description Componente de lista de checkboxes hierárquica, com suporte a estados
@@ -127,13 +125,13 @@ class CheckboxListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CheckboxListComponent, selector: "s-checkbox-list", inputs: { data: "data" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CheckboxListComponent, isStandalone: true, selector: "s-checkbox-list", inputs: { data: "data" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CheckboxListComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"checkbox\">\n    <label>\n        <div\n            class=\"checkbox-wrapper\"\n            [class.checkbox-wrapper--disabled]=\"state.disabled\"\n            [class.checkbox-wrapper-inline]=\"renderType === 'inline'\"\n            [class.checkbox-wrapper-block]=\"renderType === 'block'\"\n        >\n            <input\n                type=\"checkbox\"\n                class=\"checkbox-input\"\n                [disabled]=\"state.disabled\"\n                [ngClass]=\"{\n                    'checkbox-input--checked': state.checked,\n                    'checkbox-input--indeterminate': state.indeterminate,\n                }\"\n                (change)=\"onCheckboxChange()\"\n                [attr.aria-checked]=\"state.indeterminate ? 'mixed' : state.checked\"\n                [attr.aria-disabled]=\"state.disabled\"\n            />\n            {{ data.label }}\n        </div>\n    </label>\n    <div\n        *ngIf=\"data.children && data.children.length\"\n        class=\"checkbox-children\"\n    >\n        <s-checkbox-list\n            *ngFor=\"let child of data.children\"\n            [data]=\"child\"\n            [ngModel]=\"getCheckboxState(state.children, child.label)\"\n            (ngModelChange)=\"updateParent()\"\n        >\n        </s-checkbox-list>\n    </div>\n</div>\n", styles: [".checkbox{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}.checkbox .checkbox-wrapper{color:#212533;display:flex;font-family:\"Open Sans\" sans-serif;font-size:14px;gap:12px}.checkbox .checkbox-wrapper-inline{align-items:center}.checkbox .checkbox-wrapper-block{flex-direction:column-reverse}.checkbox .checkbox-wrapper .checkbox-input{appearance:none;background-color:#fff;border:1px solid #c1c1cc;border-radius:4px;cursor:pointer;flex-shrink:0;height:20px;width:20px;position:relative}.checkbox .checkbox-wrapper .checkbox-input--checked{background-color:#428bca;border-color:#428bca}.checkbox .checkbox-wrapper .checkbox-input--checked:after{border:solid white;border-width:0 2px 2px 0;content:\"\";height:12px;left:6px;position:absolute;top:2px;transform:rotate(45deg);width:6px}.checkbox .checkbox-wrapper .checkbox-input--indeterminate{background-color:#428bca;border-color:#428bca}.checkbox .checkbox-wrapper .checkbox-input--indeterminate:after{background-color:#fff;content:\"\";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}.checkbox .checkbox-wrapper:not(.checkbox-wrapper--disabled) .checkbox-input:not(.checkbox-input--checked):hover{background-color:#e5eaea;border-color:#ccc}.checkbox .checkbox-wrapper--disabled{opacity:.5;cursor:auto}.checkbox .checkbox-children{margin-left:20px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: CheckboxListComponent, selector: "s-checkbox-list", inputs: ["data"] }] });
+        ], ngImport: i0, template: "<div class=\"flex flex-col gap-[10px] mb-[10px]\">\r\n    <label>\r\n        <div\r\n            class=\"flex text-grayscale-90 font-open-sans text-sm gap-3\"\r\n            [class.items-center]=\"renderType === 'inline'\"\r\n            [class.flex-col-reverse]=\"renderType === 'block'\"\r\n            [class.opacity-50]=\"state.disabled\"\r\n            [class.cursor-auto]=\"state.disabled\"\r\n        >\r\n            <input\r\n                type=\"checkbox\"\r\n                class=\"checkbox-input appearance-none border rounded-medium cursor-pointer shrink-0 h-5 w-5 relative\"\r\n                [class.bg-grayscale-0]=\"!state.checked && !state.indeterminate\"\r\n                [class.border-grayscale-30]=\"!state.checked && !state.indeterminate\"\r\n                [class.bg-criticality-blue]=\"state.checked || state.indeterminate\"\r\n                [class.border-criticality-blue]=\"state.checked || state.indeterminate\"\r\n                [class.checkbox-input--checked]=\"state.checked\"\r\n                [class.checkbox-input--indeterminate]=\"state.indeterminate\"\r\n                [class.hover:bg-hippie-blue-50]=\"!state.disabled && !state.checked && !state.indeterminate\"\r\n                [disabled]=\"state.disabled\"\r\n                (change)=\"onCheckboxChange()\"\r\n                [attr.aria-checked]=\"state.indeterminate ? 'mixed' : state.checked\"\r\n                [attr.aria-disabled]=\"state.disabled\"\r\n            />\r\n            {{ data.label }}\r\n        </div>\r\n    </label>\r\n    @if (data.children && data.children.length) {\r\n        <div class=\"ml-5\">\r\n            @for (child of data.children; track child) {\r\n                <s-checkbox-list\r\n                    [data]=\"child\"\r\n                    [ngModel]=\"getCheckboxState(state.children, child.label)\"\r\n                    (ngModelChange)=\"updateParent()\"\r\n                >\r\n                </s-checkbox-list>\r\n            }\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".checkbox-input--checked:after{border:solid white;border-width:0 2px 2px 0;content:\"\";height:12px;left:6px;position:absolute;top:2px;transform:rotate(45deg);width:6px}.checkbox-input--indeterminate:after{background-color:#fff;content:\"\";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}\n"], dependencies: [{ kind: "component", type: CheckboxListComponent, selector: "s-checkbox-list", inputs: ["data"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxListComponent, decorators: [{
             type: Component,
@@ -143,7 +141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: forwardRef(() => CheckboxListComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"checkbox\">\n    <label>\n        <div\n            class=\"checkbox-wrapper\"\n            [class.checkbox-wrapper--disabled]=\"state.disabled\"\n            [class.checkbox-wrapper-inline]=\"renderType === 'inline'\"\n            [class.checkbox-wrapper-block]=\"renderType === 'block'\"\n        >\n            <input\n                type=\"checkbox\"\n                class=\"checkbox-input\"\n                [disabled]=\"state.disabled\"\n                [ngClass]=\"{\n                    'checkbox-input--checked': state.checked,\n                    'checkbox-input--indeterminate': state.indeterminate,\n                }\"\n                (change)=\"onCheckboxChange()\"\n                [attr.aria-checked]=\"state.indeterminate ? 'mixed' : state.checked\"\n                [attr.aria-disabled]=\"state.disabled\"\n            />\n            {{ data.label }}\n        </div>\n    </label>\n    <div\n        *ngIf=\"data.children && data.children.length\"\n        class=\"checkbox-children\"\n    >\n        <s-checkbox-list\n            *ngFor=\"let child of data.children\"\n            [data]=\"child\"\n            [ngModel]=\"getCheckboxState(state.children, child.label)\"\n            (ngModelChange)=\"updateParent()\"\n        >\n        </s-checkbox-list>\n    </div>\n</div>\n", styles: [".checkbox{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}.checkbox .checkbox-wrapper{color:#212533;display:flex;font-family:\"Open Sans\" sans-serif;font-size:14px;gap:12px}.checkbox .checkbox-wrapper-inline{align-items:center}.checkbox .checkbox-wrapper-block{flex-direction:column-reverse}.checkbox .checkbox-wrapper .checkbox-input{appearance:none;background-color:#fff;border:1px solid #c1c1cc;border-radius:4px;cursor:pointer;flex-shrink:0;height:20px;width:20px;position:relative}.checkbox .checkbox-wrapper .checkbox-input--checked{background-color:#428bca;border-color:#428bca}.checkbox .checkbox-wrapper .checkbox-input--checked:after{border:solid white;border-width:0 2px 2px 0;content:\"\";height:12px;left:6px;position:absolute;top:2px;transform:rotate(45deg);width:6px}.checkbox .checkbox-wrapper .checkbox-input--indeterminate{background-color:#428bca;border-color:#428bca}.checkbox .checkbox-wrapper .checkbox-input--indeterminate:after{background-color:#fff;content:\"\";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}.checkbox .checkbox-wrapper:not(.checkbox-wrapper--disabled) .checkbox-input:not(.checkbox-input--checked):hover{background-color:#e5eaea;border-color:#ccc}.checkbox .checkbox-wrapper--disabled{opacity:.5;cursor:auto}.checkbox .checkbox-children{margin-left:20px}\n"] }]
+                    ], standalone: true, imports: [CheckboxListComponent, FormsModule], template: "<div class=\"flex flex-col gap-[10px] mb-[10px]\">\r\n    <label>\r\n        <div\r\n            class=\"flex text-grayscale-90 font-open-sans text-sm gap-3\"\r\n            [class.items-center]=\"renderType === 'inline'\"\r\n            [class.flex-col-reverse]=\"renderType === 'block'\"\r\n            [class.opacity-50]=\"state.disabled\"\r\n            [class.cursor-auto]=\"state.disabled\"\r\n        >\r\n            <input\r\n                type=\"checkbox\"\r\n                class=\"checkbox-input appearance-none border rounded-medium cursor-pointer shrink-0 h-5 w-5 relative\"\r\n                [class.bg-grayscale-0]=\"!state.checked && !state.indeterminate\"\r\n                [class.border-grayscale-30]=\"!state.checked && !state.indeterminate\"\r\n                [class.bg-criticality-blue]=\"state.checked || state.indeterminate\"\r\n                [class.border-criticality-blue]=\"state.checked || state.indeterminate\"\r\n                [class.checkbox-input--checked]=\"state.checked\"\r\n                [class.checkbox-input--indeterminate]=\"state.indeterminate\"\r\n                [class.hover:bg-hippie-blue-50]=\"!state.disabled && !state.checked && !state.indeterminate\"\r\n                [disabled]=\"state.disabled\"\r\n                (change)=\"onCheckboxChange()\"\r\n                [attr.aria-checked]=\"state.indeterminate ? 'mixed' : state.checked\"\r\n                [attr.aria-disabled]=\"state.disabled\"\r\n            />\r\n            {{ data.label }}\r\n        </div>\r\n    </label>\r\n    @if (data.children && data.children.length) {\r\n        <div class=\"ml-5\">\r\n            @for (child of data.children; track child) {\r\n                <s-checkbox-list\r\n                    [data]=\"child\"\r\n                    [ngModel]=\"getCheckboxState(state.children, child.label)\"\r\n                    (ngModelChange)=\"updateParent()\"\r\n                >\r\n                </s-checkbox-list>\r\n            }\r\n        </div>\r\n    }\r\n</div>\r\n", styles: [".checkbox-input--checked:after{border:solid white;border-width:0 2px 2px 0;content:\"\";height:12px;left:6px;position:absolute;top:2px;transform:rotate(45deg);width:6px}.checkbox-input--indeterminate:after{background-color:#fff;content:\"\";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}\n"] }]
         }], propDecorators: { data: [{
                 type: Input,
                 args: [{ required: true }]
@@ -151,14 +149,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class CheckboxListModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: CheckboxListModule, declarations: [CheckboxListComponent], imports: [CommonModule, FormsModule], exports: [CheckboxListComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxListModule, imports: [CommonModule, FormsModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: CheckboxListModule, imports: [CheckboxListComponent], exports: [CheckboxListComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxListModule, imports: [CheckboxListComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxListModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, FormsModule],
-                    declarations: [CheckboxListComponent],
+                    imports: [CheckboxListComponent],
                     exports: [CheckboxListComponent],
                 }]
         }] });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"seniorsistemas-angular-components-checkbox-list.mjs","sources":["../../projects/angular-components/checkbox-list/src/lib/checkbox-list/checkbox-list.component.ts","../../projects/angular-components/checkbox-list/src/lib/checkbox-list/checkbox-list.component.html","../../projects/angular-components/checkbox-list/src/lib/checkbox-list/checkbox-list.module.ts","../../projects/angular-components/checkbox-list/src/seniorsistemas-angular-components-checkbox-list.ts"],"sourcesContent":["import { Component, forwardRef, Input } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nimport { CheckboxListData } from './models/checkbox-list-data';\nimport { CheckboxListChildren, CheckboxListState } from './models/checkbox-list-state';\n\n/*\n @description Componente de lista de checkboxes hierárquica, com suporte a estados\n * pai/filho e indeterminado. Ao marcar/desmarcar o item pai, todos os filhos são\n * afetados, e o estado do pai é calculado automaticamente com base nos filhos.\n * Implementa {@link ControlValueAccessor} para uso em formulários Angular.\n \n @example\n * ```html\n * <s-checkbox-list\n * formControlName=\"permissoes\"\n * [data]=\"estruturaPermissoes\" />\n * ```\n \n @category Inputs\n /\n@Component({\n selector: 's-checkbox-list',\n templateUrl: './checkbox-list.component.html',\n styleUrls: ['./checkbox-list.component.scss'],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CheckboxListComponent),\n multi: true,\n },\n ],\n})\nexport class CheckboxListComponent implements ControlValueAccessor {\n /\n @description Estrutura de dados que define o item raiz e seus filhos.\n * Cada `CheckboxListData` pode conter o label, estado inicial e uma lista de filhos recursiva.\n * Campo obrigatório.\n /\n @Input({ required: true })\n public data!: CheckboxListData;\n\n public state: CheckboxListState = {\n checked: false,\n indeterminate: false,\n children: {},\n };\n\n private _onChange: (value: CheckboxListState) => void = () => {};\n private _onTouched: () => void = () => {};\n\n public writeValue(value: CheckboxListState): void {\n if (value) {\n this.state = value;\n } else {\n this.state = {\n checked: false,\n indeterminate: false,\n disabled: false,\n children: this._initializeChildren(this.data),\n };\n }\n }\n\n public get renderType() {\n return this.data.renderType ?? 'inline';\n }\n\n public registerOnChange(onChange: (value: CheckboxListState) => void): void {\n this._onChange = onChange;\n }\n\n public registerOnTouched(onTouched: () => void): void {\n this._onTouched = onTouched;\n }\n\n private _initializeChildren(item: CheckboxListData): CheckboxListChildren {\n const childrenState: CheckboxListChildren = {};\n if (item.children) {\n item.children.forEach((child) => {\n childrenState[child.label] = {\n checked: false,\n indeterminate: false,\n children: this._initializeChildren(child),\n };\n });\n }\n return childrenState;\n }\n\n public getCheckboxState(item: CheckboxListChildren \| undefined, label: string) {\n if (item) {\n return item[label];\n } else {\n return {};\n }\n }\n\n public updateParent(): void {\n const _getProperty = (obj: CheckboxListChildren \| undefined, field: string) => {\n if (obj) {\n return obj[field];\n } else {\n return null;\n }\n };\n if (this.data.children && this.data.children.length > 0) {\n const allChecked = this.data.children.every(\n (child) => _getProperty(this.state.children, child.label)?.checked,\n );\n const someChecked = this.data.children.some(\n (child) =>\n _getProperty(this.state.children, child.label)?.checked \|\|\n _getProperty(this.state.children, child.label)?.indeterminate,\n );\n this.state.checked = allChecked;\n this.state.indeterminate = !allChecked && someChecked;\n }\n this._onChange(this.state);\n this._onTouched();\n }\n\n public onCheckboxChange(): void {\n if (this.state.disabled) {\n return;\n }\n\n this.state.checked = !this.state.checked;\n this.state.indeterminate = false;\n this._toggleChildrenCheck(this.data, this.state, this.state.checked);\n this._onChange(this.state);\n this._onTouched();\n }\n\n private _toggleChildrenCheck(item: CheckboxListData, state: CheckboxListState, checked: boolean): void {\n if (item.children?.length) {\n item.children.forEach((child) => {\n if (state.children && !state.children[child.label]) {\n state.children[child.label] = {\n checked: false,\n indeterminate: false,\n children: this._initializeChildren(child),\n };\n }\n if (state.children) {\n state.children[child.label].checked = checked;\n state.children[child.label].indeterminate = false;\n }\n if (child.children && state.children) {\n this._toggleChildrenCheck(child, state.children[child.label], checked);\n }\n });\n }\n }\n}\n\n","<div class=\"checkbox\">\n <label>\n <div\n class=\"checkbox-wrapper\"\n [class.checkbox-wrapper--disabled]=\"state.disabled\"\n [class.checkbox-wrapper-inline]=\"renderType === 'inline'\"\n [class.checkbox-wrapper-block]=\"renderType === 'block'\"\n >\n <input\n type=\"checkbox\"\n class=\"checkbox-input\"\n [disabled]=\"state.disabled\"\n [ngClass]=\"{\n 'checkbox-input--checked': state.checked,\n 'checkbox-input--indeterminate': state.indeterminate,\n }\"\n (change)=\"onCheckboxChange()\"\n [attr.aria-checked]=\"state.indeterminate ? 'mixed' : state.checked\"\n [attr.aria-disabled]=\"state.disabled\"\n />\n {{ data.label }}\n </div>\n </label>\n <div\n ngIf=\"data.children && data.children.length\"\n class=\"checkbox-children\"\n >\n <s-checkbox-list\n ngFor=\"let child of data.children\"\n [data]=\"child\"\n [ngModel]=\"getCheckboxState(state.children, child.label)\"\n (ngModelChange)=\"updateParent()\"\n >\n </s-checkbox-list>\n </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { CheckboxListComponent } from './checkbox-list.component';\n\n@NgModule({\n imports: [CommonModule, FormsModule],\n declarations: [CheckboxListComponent],\n exports: [CheckboxListComponent],\n})\nexport class CheckboxListModule { }\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"seniorsistemas-angular-components-checkbox-list.mjs","sources":["../../projects/angular-components/checkbox-list/src/lib/checkbox-list/checkbox-list.component.ts","../../projects/angular-components/checkbox-list/src/lib/checkbox-list/checkbox-list.component.html","../../projects/angular-components/checkbox-list/src/lib/checkbox-list/checkbox-list.module.ts","../../projects/angular-components/checkbox-list/src/seniorsistemas-angular-components-checkbox-list.ts"],"sourcesContent":["import { Component, forwardRef, Input } from '@angular/core';\r\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\nimport { CheckboxListData } from './models/checkbox-list-data';\r\nimport { CheckboxListChildren, CheckboxListState } from './models/checkbox-list-state';\r\n\r\n/*\r\n @description Componente de lista de checkboxes hierárquica, com suporte a estados\r\n * pai/filho e indeterminado. Ao marcar/desmarcar o item pai, todos os filhos são\r\n * afetados, e o estado do pai é calculado automaticamente com base nos filhos.\r\n * Implementa {@link ControlValueAccessor} para uso em formulários Angular.\r\n \r\n @example\r\n * ```html\r\n * <s-checkbox-list\r\n * formControlName=\"permissoes\"\r\n * [data]=\"estruturaPermissoes\" />\r\n * ```\r\n \r\n @category Inputs\r\n /\r\n@Component({\r\n selector: 's-checkbox-list',\r\n templateUrl: './checkbox-list.component.html',\r\n styles: [`\r\n .checkbox-input--checked::after {\r\n border: solid white;\r\n border-width: 0 2px 2px 0;\r\n content: \"\";\r\n height: 12px;\r\n left: 6px;\r\n position: absolute;\r\n top: 2px;\r\n transform: rotate(45deg);\r\n width: 6px;\r\n }\r\n .checkbox-input--indeterminate::after {\r\n background-color: white;\r\n content: \"\";\r\n height: 2px;\r\n left: 50%;\r\n position: absolute;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 10px;\r\n }\r\n `],\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => CheckboxListComponent),\r\n multi: true,\r\n },\r\n ],\r\n standalone: true,\r\n imports: [CheckboxListComponent, FormsModule],\r\n})\r\nexport class CheckboxListComponent implements ControlValueAccessor {\r\n /\r\n @description Estrutura de dados que define o item raiz e seus filhos.\r\n * Cada `CheckboxListData` pode conter o label, estado inicial e uma lista de filhos recursiva.\r\n * Campo obrigatório.\r\n /\r\n @Input({ required: true })\r\n public data!: CheckboxListData;\r\n\r\n public state: CheckboxListState = {\r\n checked: false,\r\n indeterminate: false,\r\n children: {},\r\n };\r\n\r\n private _onChange: (value: CheckboxListState) => void = () => {};\r\n private _onTouched: () => void = () => {};\r\n\r\n public writeValue(value: CheckboxListState): void {\r\n if (value) {\r\n this.state = value;\r\n } else {\r\n this.state = {\r\n checked: false,\r\n indeterminate: false,\r\n disabled: false,\r\n children: this._initializeChildren(this.data),\r\n };\r\n }\r\n }\r\n\r\n public get renderType() {\r\n return this.data.renderType ?? 'inline';\r\n }\r\n\r\n public registerOnChange(onChange: (value: CheckboxListState) => void): void {\r\n this._onChange = onChange;\r\n }\r\n\r\n public registerOnTouched(onTouched: () => void): void {\r\n this._onTouched = onTouched;\r\n }\r\n\r\n private _initializeChildren(item: CheckboxListData): CheckboxListChildren {\r\n const childrenState: CheckboxListChildren = {};\r\n if (item.children) {\r\n item.children.forEach((child) => {\r\n childrenState[child.label] = {\r\n checked: false,\r\n indeterminate: false,\r\n children: this._initializeChildren(child),\r\n };\r\n });\r\n }\r\n return childrenState;\r\n }\r\n\r\n public getCheckboxState(item: CheckboxListChildren \| undefined, label: string) {\r\n if (item) {\r\n return item[label];\r\n } else {\r\n return {};\r\n }\r\n }\r\n\r\n public updateParent(): void {\r\n const _getProperty = (obj: CheckboxListChildren \| undefined, field: string) => {\r\n if (obj) {\r\n return obj[field];\r\n } else {\r\n return null;\r\n }\r\n };\r\n if (this.data.children && this.data.children.length > 0) {\r\n const allChecked = this.data.children.every(\r\n (child) => _getProperty(this.state.children, child.label)?.checked,\r\n );\r\n const someChecked = this.data.children.some(\r\n (child) =>\r\n _getProperty(this.state.children, child.label)?.checked \|\|\r\n _getProperty(this.state.children, child.label)?.indeterminate,\r\n );\r\n this.state.checked = allChecked;\r\n this.state.indeterminate = !allChecked && someChecked;\r\n }\r\n this._onChange(this.state);\r\n this._onTouched();\r\n }\r\n\r\n public onCheckboxChange(): void {\r\n if (this.state.disabled) {\r\n return;\r\n }\r\n\r\n this.state.checked = !this.state.checked;\r\n this.state.indeterminate = false;\r\n this._toggleChildrenCheck(this.data, this.state, this.state.checked);\r\n this._onChange(this.state);\r\n this._onTouched();\r\n }\r\n\r\n private _toggleChildrenCheck(item: CheckboxListData, state: CheckboxListState, checked: boolean): void {\r\n if (item.children?.length) {\r\n item.children.forEach((child) => {\r\n if (state.children && !state.children[child.label]) {\r\n state.children[child.label] = {\r\n checked: false,\r\n indeterminate: false,\r\n children: this._initializeChildren(child),\r\n };\r\n }\r\n if (state.children) {\r\n state.children[child.label].checked = checked;\r\n state.children[child.label].indeterminate = false;\r\n }\r\n if (child.children && state.children) {\r\n this._toggleChildrenCheck(child, state.children[child.label], checked);\r\n }\r\n });\r\n }\r\n }\r\n}\r\n","<div class=\"flex flex-col gap-[10px] mb-[10px]\">\r\n <label>\r\n <div\r\n class=\"flex text-grayscale-90 font-open-sans text-sm gap-3\"\r\n [class.items-center]=\"renderType === 'inline'\"\r\n [class.flex-col-reverse]=\"renderType === 'block'\"\r\n [class.opacity-50]=\"state.disabled\"\r\n [class.cursor-auto]=\"state.disabled\"\r\n >\r\n <input\r\n type=\"checkbox\"\r\n class=\"checkbox-input appearance-none border rounded-medium cursor-pointer shrink-0 h-5 w-5 relative\"\r\n [class.bg-grayscale-0]=\"!state.checked && !state.indeterminate\"\r\n [class.border-grayscale-30]=\"!state.checked && !state.indeterminate\"\r\n [class.bg-criticality-blue]=\"state.checked \|\| state.indeterminate\"\r\n [class.border-criticality-blue]=\"state.checked \|\| state.indeterminate\"\r\n [class.checkbox-input--checked]=\"state.checked\"\r\n [class.checkbox-input--indeterminate]=\"state.indeterminate\"\r\n [class.hover:bg-hippie-blue-50]=\"!state.disabled && !state.checked && !state.indeterminate\"\r\n [disabled]=\"state.disabled\"\r\n (change)=\"onCheckboxChange()\"\r\n [attr.aria-checked]=\"state.indeterminate ? 'mixed' : state.checked\"\r\n [attr.aria-disabled]=\"state.disabled\"\r\n />\r\n {{ data.label }}\r\n </div>\r\n </label>\r\n @if (data.children && data.children.length) {\r\n <div class=\"ml-5\">\r\n @for (child of data.children; track child) {\r\n <s-checkbox-list\r\n [data]=\"child\"\r\n [ngModel]=\"getCheckboxState(state.children, child.label)\"\r\n (ngModelChange)=\"updateParent()\"\r\n >\r\n </s-checkbox-list>\r\n }\r\n </div>\r\n }\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\n\r\nimport { CheckboxListComponent } from './checkbox-list.component';\r\n\r\n@NgModule({\r\n imports: [CheckboxListComponent],\r\n exports: [CheckboxListComponent],\r\n})\r\nexport class CheckboxListModule {}\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-checkbox.mjs CHANGED Viewed

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { model, input, output, signal, computed, forwardRef, Component } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -85,17 +84,17 @@ class CheckboxComponent {
                 useExisting: forwardRef(() => CheckboxComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div\n    class=\"group flex cursor-pointer select-none gap-3 outline-none\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    tabindex=\"0\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : checked()\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel() || label() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    (click)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"onBlur()\"\n>\n    <div\n        class=\"rounded flex h-5 w-5 flex-shrink-0 items-center justify-center border border-grayscale-30\n               transition-all duration-200 hover:border-grayscale-50\n               group-focus-visible:ring-2 group-focus-visible:ring-primary group-focus-visible:ring-offset-1\"\n        [class.bg-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:bg-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.bg-grayscale-0]=\"!checked() && !isIndeterminate()\"\n        [class.border-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:border-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.opacity-50]=\"disabled()\"\n    >\n        @if (isIndeterminate()) {\n            <svg\n                class=\"h-3 w-3 text-grayscale-0\"\n                fill=\"none\"\n                stroke=\"white\"\n                stroke-width=\"4\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                <path d=\"M6 12h12\" />\n            </svg>\n        } @else {\n            @if (checked()) {\n                <svg\n                    class=\"text-white h-3 w-3\"\n                    fill=\"none\"\n                    stroke=\"white\"\n                    stroke-width=\"4\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                >\n                    <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n                </svg>\n            }\n        }\n    </div>\n\n    @if (label()) {\n        <span\n            [class.opacity-50]=\"disabled()\"\n            class=\"text-grayscale-90 ml-2\"\n            aria-hidden=\"true\"\n        >\n            {{ label() }}\n        </span>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+        ], ngImport: i0, template: "<div\n    class=\"group flex cursor-pointer select-none gap-3 outline-none\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    tabindex=\"0\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : checked()\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel() || label() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    (click)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"onBlur()\"\n>\n    <div\n        class=\"rounded flex h-5 w-5 flex-shrink-0 items-center justify-center border border-grayscale-30\n               transition-all duration-200 hover:border-grayscale-50\n               group-focus-visible:ring-2 group-focus-visible:ring-primary group-focus-visible:ring-offset-1\"\n        [class.bg-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:bg-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.bg-grayscale-0]=\"!checked() && !isIndeterminate()\"\n        [class.border-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:border-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.opacity-50]=\"disabled()\"\n    >\n        @if (isIndeterminate()) {\n            <svg\n                class=\"h-3 w-3 text-grayscale-0\"\n                fill=\"none\"\n                stroke=\"white\"\n                stroke-width=\"4\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                <path d=\"M6 12h12\" />\n            </svg>\n        } @else {\n            @if (checked()) {\n                <svg\n                    class=\"text-grayscale-0 h-3 w-3\"\n                    fill=\"none\"\n                    stroke=\"white\"\n                    stroke-width=\"4\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                >\n                    <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n                </svg>\n            }\n        }\n    </div>\n\n    @if (label()) {\n        <span\n            [class.opacity-50]=\"disabled()\"\n            class=\"text-grayscale-90 ml-2\"\n            aria-hidden=\"true\"\n        >\n            {{ label() }}\n        </span>\n    }\n</div>\n" });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-checkbox', standalone: true, imports: [CommonModule], providers: [
+            args: [{ selector: 's-checkbox', standalone: true, imports: [], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CheckboxComponent),
                             multi: true,
                         },
-                    ], template: "<div\n    class=\"group flex cursor-pointer select-none gap-3 outline-none\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    tabindex=\"0\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : checked()\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel() || label() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    (click)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"onBlur()\"\n>\n    <div\n        class=\"rounded flex h-5 w-5 flex-shrink-0 items-center justify-center border border-grayscale-30\n               transition-all duration-200 hover:border-grayscale-50\n               group-focus-visible:ring-2 group-focus-visible:ring-primary group-focus-visible:ring-offset-1\"\n        [class.bg-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:bg-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.bg-grayscale-0]=\"!checked() && !isIndeterminate()\"\n        [class.border-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:border-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.opacity-50]=\"disabled()\"\n    >\n        @if (isIndeterminate()) {\n            <svg\n                class=\"h-3 w-3 text-grayscale-0\"\n                fill=\"none\"\n                stroke=\"white\"\n                stroke-width=\"4\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                <path d=\"M6 12h12\" />\n            </svg>\n        } @else {\n            @if (checked()) {\n                <svg\n                    class=\"text-white h-3 w-3\"\n                    fill=\"none\"\n                    stroke=\"white\"\n                    stroke-width=\"4\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                >\n                    <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n                </svg>\n            }\n        }\n    </div>\n\n    @if (label()) {\n        <span\n            [class.opacity-50]=\"disabled()\"\n            class=\"text-grayscale-90 ml-2\"\n            aria-hidden=\"true\"\n        >\n            {{ label() }}\n        </span>\n    }\n</div>\n" }]
+                    ], template: "<div\n    class=\"group flex cursor-pointer select-none gap-3 outline-none\"\n    [class.cursor-not-allowed]=\"disabled()\"\n    tabindex=\"0\"\n    role=\"checkbox\"\n    [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : checked()\"\n    [attr.aria-disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabel() || label() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n    (click)=\"toggle()\"\n    (keydown.space)=\"toggle(); $event.preventDefault()\"\n    (blur)=\"onBlur()\"\n>\n    <div\n        class=\"rounded flex h-5 w-5 flex-shrink-0 items-center justify-center border border-grayscale-30\n               transition-all duration-200 hover:border-grayscale-50\n               group-focus-visible:ring-2 group-focus-visible:ring-primary group-focus-visible:ring-offset-1\"\n        [class.bg-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:bg-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.bg-grayscale-0]=\"!checked() && !isIndeterminate()\"\n        [class.border-primary]=\"checked() || isIndeterminate()\"\n        [class.hover:border-tarawera-500]=\"checked() || isIndeterminate()\"\n        [class.opacity-50]=\"disabled()\"\n    >\n        @if (isIndeterminate()) {\n            <svg\n                class=\"h-3 w-3 text-grayscale-0\"\n                fill=\"none\"\n                stroke=\"white\"\n                stroke-width=\"4\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n            >\n                <path d=\"M6 12h12\" />\n            </svg>\n        } @else {\n            @if (checked()) {\n                <svg\n                    class=\"text-grayscale-0 h-3 w-3\"\n                    fill=\"none\"\n                    stroke=\"white\"\n                    stroke-width=\"4\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    viewBox=\"0 0 24 24\"\n                    aria-hidden=\"true\"\n                >\n                    <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n                </svg>\n            }\n        }\n    </div>\n\n    @if (label()) {\n        <span\n            [class.opacity-50]=\"disabled()\"\n            class=\"text-grayscale-90 ml-2\"\n            aria-hidden=\"true\"\n        >\n            {{ label() }}\n        </span>\n    }\n</div>\n" }]
         }] });
 /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"seniorsistemas-angular-components-checkbox.mjs","sources":["../../projects/angular-components/checkbox/src/lib/checkbox/checkbox.component.ts","../../projects/angular-components/checkbox/src/lib/checkbox/checkbox.component.html","../../projects/angular-components/checkbox/src/seniorsistemas-angular-components-checkbox.ts"],"sourcesContent":["import { ~~CommonModule } from '@angular/common';\nimport {~~ Component, computed, forwardRef, input, model, output, signal } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n/*\n @description Componente de caixa de seleção (checkbox) com suporte a três estados:\n * marcado, desmarcado e indeterminado. Implementa {@link ControlValueAccessor} para\n * integração com Reactive Forms e Template-driven Forms do Angular.\n \n @example\n * ```html\n * <s-checkbox\n * formControlName=\"aceito\"\n * label=\"Aceito os termos de uso\"\n * [indeterminate]=\"parcialmenteSelecionado\" />\n * ```\n \n @category Inputs\n /\n@Component({\n selector: 's-checkbox',\n standalone: true,\n imports: [~~CommonModule~~],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => CheckboxComponent),\n multi: true,\n },\n ],\n templateUrl: './checkbox.component.html',\n})\nexport class CheckboxComponent implements ControlValueAccessor {\n /* @description Controla o estado desabilitado via two-way binding. @default false /\n public disabled = model(false);\n /* @description Valor marcado/desmarcado do checkbox via two-way binding. @default false /\n public checked = model(false);\n /* @description Quando `true`, o checkbox inicia no estado indeterminado (traço) até a primeira interação do usuário. @default false /\n public indeterminate = input(false);\n /* @description Texto do label exibido ao lado do checkbox. @default '' /\n public label = input<string>('');\n /* @description Rótulo acessível para leitores de tela. Opcional, por padrão usa o valor de `label`. /\n public ariaLabel = input<string \| undefined>(undefined);\n /* @description ID do elemento que descreve o checkbox (para usar `<label for=\"...\">`). Opcional. /\n public ariaLabelledBy = input<string \| undefined>(undefined);\n\n /\n @description Emitido quando o valor do checkbox é alterado pelo usuário.\n * Emite o novo valor booleano (`true` para marcado, `false` para desmarcado).\n /\n public readonly checkedChange = output<boolean>();\n\n private _onChange: (value: boolean) => void = () => {};\n private _onTouched: () => void = () => {};\n private _hasUserInteracted = signal(false);\n\n /\n @description Computed que indica se o estado indeterminado deve ser exibido.\n * Retorna `true` enquanto `indeterminate` for `true` e o usuário não tiver interagido.\n /\n public readonly isIndeterminate = computed(() => this.indeterminate() && !this._hasUserInteracted());\n\n public toggle(): void {\n if (this.disabled()) {\n return;\n }\n\n if (this.indeterminate() && !this._hasUserInteracted()) {\n this._hasUserInteracted.set(true);\n this.checked.set(true);\n this.emit(true);\n } else {\n const newValue = !this.checked();\n this.checked.set(newValue);\n this.emit(newValue);\n }\n }\n\n private emit(value: boolean): void {\n this._onChange(value);\n this.checkedChange.emit(value);\n }\n\n public writeValue(value: any): void {\n this.checked.set(!!value);\n }\n\n public registerOnChange(onChange: (value: boolean) => void): void {\n this._onChange = onChange;\n }\n\n public registerOnTouched(onTouched: () => void): void {\n this._onTouched = onTouched;\n }\n\n public setDisabledState(disabled: boolean): void {\n this.disabled.set(disabled);\n }\n\n public onBlur(): void {\n this._onTouched();\n }\n}\n\n","<div\n class=\"group flex cursor-pointer select-none gap-3 outline-none\"\n [class.cursor-not-allowed]=\"disabled()\"\n tabindex=\"0\"\n role=\"checkbox\"\n [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel() \|\| label() \|\| null\"\n [attr.aria-labelledby]=\"ariaLabelledBy() \|\| null\"\n (click)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n (blur)=\"onBlur()\"\n>\n <div\n class=\"rounded flex h-5 w-5 flex-shrink-0 items-center justify-center border border-grayscale-30\n transition-all duration-200 hover:border-grayscale-50\n group-focus-visible:ring-2 group-focus-visible:ring-primary group-focus-visible:ring-offset-1\"\n [class.bg-primary]=\"checked() \|\| isIndeterminate()\"\n [class.hover:bg-tarawera-500]=\"checked() \|\| isIndeterminate()\"\n [class.bg-grayscale-0]=\"!checked() && !isIndeterminate()\"\n [class.border-primary]=\"checked() \|\| isIndeterminate()\"\n [class.hover:border-tarawera-500]=\"checked() \|\| isIndeterminate()\"\n [class.opacity-50]=\"disabled()\"\n >\n @if (isIndeterminate()) {\n <svg\n class=\"h-3 w-3 text-grayscale-0\"\n fill=\"none\"\n stroke=\"white\"\n stroke-width=\"4\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <path d=\"M6 12h12\" />\n </svg>\n } @else {\n @if (checked()) {\n <svg\n class=\"text-~~white~~ h-3 w-3\"\n fill=\"none\"\n stroke=\"white\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n </svg>\n }\n }\n </div>\n\n @if (label()) {\n <span\n [class.opacity-50]=\"disabled()\"\n class=\"text-grayscale-90 ml-2\"\n aria-hidden=\"true\"\n >\n {{ label() }}\n </span>\n }\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"~~;;;;;AAIA~~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~~SACJ~~,~~EC7BL~~,QAAA,EAAA,EAAA,EAAA,QAAA,~~EAAA~~,~~uzEA~~+DA,~~2CDzCc,YAAY,~~EAAA,CAAA,~~EAAA,~~CAAA~~,CAAA~~;;~~4FAUb~~,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAb7B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,~~cACV~~,~~IAAI~~,EAAA,~~OAAA~~,EACP,~~CAAC~~,~~YAAY~~,~~CAAC~~,~~EACZ~~,SAAA,EAAA;AACP,wBAAA;AACI,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,uBAAuB,CAAC;AAChD,4BAAA,KAAK,EAAE,IAAI;AACd,yBAAA;AACJ,qBAAA,EAAA,QAAA,EAAA,~~uzEAAA~~,EAAA,CAAA;;;~~AE7BL~~;;AAEG;;;;"}
1	+ {"version":3,"file":"seniorsistemas-angular-components-checkbox.mjs","sources":["../../projects/angular-components/checkbox/src/lib/checkbox/checkbox.component.ts","../../projects/angular-components/checkbox/src/lib/checkbox/checkbox.component.html","../../projects/angular-components/checkbox/src/seniorsistemas-angular-components-checkbox.ts"],"sourcesContent":["import { Component, computed, forwardRef, input, model, output, signal } from '@angular/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\r\n\r\n/*\r\n @description Componente de caixa de seleção (checkbox) com suporte a três estados:\r\n * marcado, desmarcado e indeterminado. Implementa {@link ControlValueAccessor} para\r\n * integração com Reactive Forms e Template-driven Forms do Angular.\r\n \r\n @example\r\n * ```html\r\n * <s-checkbox\r\n * formControlName=\"aceito\"\r\n * label=\"Aceito os termos de uso\"\r\n * [indeterminate]=\"parcialmenteSelecionado\" />\r\n * ```\r\n \r\n @category Inputs\r\n /\r\n@Component({\r\n selector: 's-checkbox',\r\n standalone: true,\r\n imports: [],\r\n providers: [\r\n {\r\n provide: NG_VALUE_ACCESSOR,\r\n useExisting: forwardRef(() => CheckboxComponent),\r\n multi: true,\r\n },\r\n ],\r\n templateUrl: './checkbox.component.html',\r\n})\r\nexport class CheckboxComponent implements ControlValueAccessor {\r\n /* @description Controla o estado desabilitado via two-way binding. @default false /\r\n public disabled = model(false);\r\n /* @description Valor marcado/desmarcado do checkbox via two-way binding. @default false /\r\n public checked = model(false);\r\n /* @description Quando `true`, o checkbox inicia no estado indeterminado (traço) até a primeira interação do usuário. @default false /\r\n public indeterminate = input(false);\r\n /* @description Texto do label exibido ao lado do checkbox. @default '' /\r\n public label = input<string>('');\r\n /* @description Rótulo acessível para leitores de tela. Opcional, por padrão usa o valor de `label`. /\r\n public ariaLabel = input<string \| undefined>(undefined);\r\n /* @description ID do elemento que descreve o checkbox (para usar `<label for=\"...\">`). Opcional. /\r\n public ariaLabelledBy = input<string \| undefined>(undefined);\r\n\r\n /\r\n @description Emitido quando o valor do checkbox é alterado pelo usuário.\r\n * Emite o novo valor booleano (`true` para marcado, `false` para desmarcado).\r\n /\r\n public readonly checkedChange = output<boolean>();\r\n\r\n private _onChange: (value: boolean) => void = () => {};\r\n private _onTouched: () => void = () => {};\r\n private _hasUserInteracted = signal(false);\r\n\r\n /\r\n @description Computed que indica se o estado indeterminado deve ser exibido.\r\n * Retorna `true` enquanto `indeterminate` for `true` e o usuário não tiver interagido.\r\n /\r\n public readonly isIndeterminate = computed(() => this.indeterminate() && !this._hasUserInteracted());\r\n\r\n public toggle(): void {\r\n if (this.disabled()) {\r\n return;\r\n }\r\n\r\n if (this.indeterminate() && !this._hasUserInteracted()) {\r\n this._hasUserInteracted.set(true);\r\n this.checked.set(true);\r\n this.emit(true);\r\n } else {\r\n const newValue = !this.checked();\r\n this.checked.set(newValue);\r\n this.emit(newValue);\r\n }\r\n }\r\n\r\n private emit(value: boolean): void {\r\n this._onChange(value);\r\n this.checkedChange.emit(value);\r\n }\r\n\r\n public writeValue(value: any): void {\r\n this.checked.set(!!value);\r\n }\r\n\r\n public registerOnChange(onChange: (value: boolean) => void): void {\r\n this._onChange = onChange;\r\n }\r\n\r\n public registerOnTouched(onTouched: () => void): void {\r\n this._onTouched = onTouched;\r\n }\r\n\r\n public setDisabledState(disabled: boolean): void {\r\n this.disabled.set(disabled);\r\n }\r\n\r\n public onBlur(): void {\r\n this._onTouched();\r\n }\r\n}\r\n","<div\n class=\"group flex cursor-pointer select-none gap-3 outline-none\"\n [class.cursor-not-allowed]=\"disabled()\"\n tabindex=\"0\"\n role=\"checkbox\"\n [attr.aria-checked]=\"isIndeterminate() ? 'mixed' : checked()\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-label]=\"ariaLabel() \|\| label() \|\| null\"\n [attr.aria-labelledby]=\"ariaLabelledBy() \|\| null\"\n (click)=\"toggle()\"\n (keydown.space)=\"toggle(); $event.preventDefault()\"\n (blur)=\"onBlur()\"\n>\n <div\n class=\"rounded flex h-5 w-5 flex-shrink-0 items-center justify-center border border-grayscale-30\n transition-all duration-200 hover:border-grayscale-50\n group-focus-visible:ring-2 group-focus-visible:ring-primary group-focus-visible:ring-offset-1\"\n [class.bg-primary]=\"checked() \|\| isIndeterminate()\"\n [class.hover:bg-tarawera-500]=\"checked() \|\| isIndeterminate()\"\n [class.bg-grayscale-0]=\"!checked() && !isIndeterminate()\"\n [class.border-primary]=\"checked() \|\| isIndeterminate()\"\n [class.hover:border-tarawera-500]=\"checked() \|\| isIndeterminate()\"\n [class.opacity-50]=\"disabled()\"\n >\n @if (isIndeterminate()) {\n <svg\n class=\"h-3 w-3 text-grayscale-0\"\n fill=\"none\"\n stroke=\"white\"\n stroke-width=\"4\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <path d=\"M6 12h12\" />\n </svg>\n } @else {\n @if (checked()) {\n <svg\n class=\"text-grayscale-0 h-3 w-3\"\n fill=\"none\"\n stroke=\"white\"\n stroke-width=\"4\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <path d=\"M4.5 12.75l5.5 5.5 9.5-9.5\" />\n </svg>\n }\n }\n </div>\n\n @if (label()) {\n <span\n [class.opacity-50]=\"disabled()\"\n class=\"text-grayscale-90 ml-2\"\n aria-hidden=\"true\"\n >\n {{ label() }}\n </span>\n }\n</div>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":";;;;AAGA;;;;;;;;;;;;;;AAcG;MAcU,iBAAiB,CAAA;;AAEnB,IAAA,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;;AAExB,IAAA,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;;AAEvB,IAAA,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;;AAE7B,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,CAAC,CAAC;;AAE1B,IAAA,SAAS,GAAG,KAAK,CAAqB,SAAS,CAAC,CAAC;;AAEjD,IAAA,cAAc,GAAG,KAAK,CAAqB,SAAS,CAAC,CAAC;AAE7D;;;AAGG;IACa,aAAa,GAAG,MAAM,EAAW,CAAC;AAE1C,IAAA,SAAS,GAA6B,MAAK,GAAG,CAAC;AAC/C,IAAA,UAAU,GAAe,MAAK,GAAG,CAAC;AAClC,IAAA,kBAAkB,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AAE3C;;;AAGG;AACa,IAAA,eAAe,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;IAE9F,MAAM,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;YACjB,OAAO;SACV;QAED,IAAI,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE;AACpD,YAAA,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAClC,YAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AACvB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACnB;aAAM;AACH,YAAA,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;AACjC,YAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AAC3B,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACvB;KACJ;AAEO,IAAA,IAAI,CAAC,KAAc,EAAA;AACvB,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AACtB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAClC;AAEM,IAAA,UAAU,CAAC,KAAU,EAAA;QACxB,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;KAC7B;AAEM,IAAA,gBAAgB,CAAC,QAAkC,EAAA;AACtD,QAAA,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC;KAC7B;AAEM,IAAA,iBAAiB,CAAC,SAAqB,EAAA;AAC1C,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;KAC/B;AAEM,IAAA,gBAAgB,CAAC,QAAiB,EAAA;AACrC,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;KAC/B;IAEM,MAAM,GAAA;QACT,IAAI,CAAC,UAAU,EAAE,CAAC;KACrB;wGArEQ,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,iBAAiB,EATf,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,OAAA,EAAA,eAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,SAAA,EAAA;AACP,YAAA;AACI,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,iBAAiB,CAAC;AAChD,gBAAA,KAAK,EAAE,IAAI;AACd,aAAA;AACJ,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC5BL,6zEA+DA,EAAA,CAAA,CAAA;;4FDhCa,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAb7B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EACV,UAAA,EAAA,IAAI,EACP,OAAA,EAAA,EAAE,EACA,SAAA,EAAA;AACP,wBAAA;AACI,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,uBAAuB,CAAC;AAChD,4BAAA,KAAK,EAAE,IAAI;AACd,yBAAA;AACJ,qBAAA,EAAA,QAAA,EAAA,6zEAAA,EAAA,CAAA;;;AE5BL;;AAEG;;;;"}

package/fesm2022/seniorsistemas-angular-components-chips.mjs CHANGED Viewed

@@ -1,17 +1,14 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, Input, Output, inject, ChangeDetectorRef, forwardRef, ElementRef, ContentChildren, ViewChild, HostListener, NgModule } from '@angular/core';
-import * as i1$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import * as i2$1 from 'primeng/keyfilter';
-import { KeyFilterModule } from 'primeng/keyfilter';
 import { __decorate } from 'tslib';
-import { CheckDisabled } from '@seniorsistemas/angular-components/shared';
-import * as i1 from '@seniorsistemas/angular-components/tooltip';
-import { TooltipModule } from '@seniorsistemas/angular-components/tooltip';
-import * as i2 from '@angular/common';
-import { NgTemplateOutlet } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { KeyFilter } from 'primeng/keyfilter';
 import { TemplateDirective } from '@seniorsistemas/angular-components/template';
 import { randomHash, isNullOrUndefined } from '@seniorsistemas/angular-components/utils';
+import { CheckDisabled } from '@seniorsistemas/angular-components/shared';
+import { TooltipDirective } from '@seniorsistemas/angular-components/tooltip';
+import { NgTemplateOutlet, NgClass } from '@angular/common';
 /**
  * @description Componente interno de item individual de chip, utilizado pelo {@link ChipsComponent}.
@@ -52,7 +49,7 @@ class ChipItemComponent {
         return this.objectField ? this.dataRender[this.objectField] || '' : this.dataRender || '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChipItemComponent, selector: "s-chip-item", inputs: { dataRender: "dataRender", objectField: "objectField", disabled: "disabled", templateRef: "templateRef", itemIndex: "itemIndex", showTooltip: "showTooltip", maxLengthRenderWithoutTooltip: "maxLengthRenderWithoutTooltip" }, outputs: { clickRemove: "clickRemove", chipClicked: "chipClicked" }, ngImport: i0, template: "<ng-template #itemRender>\n    <div\n        class=\"chip-item\"\n        [class.chip-item-disabled]=\"disabled\"\n        (click)=\"onChipClicked($event)\" \n        [sTooltip]=\"_rawText\"\n        [showDelay]=\"0\"\n        [visible]=\"showTooltip ? _rawText.length > maxLengthRenderWithoutTooltip : false\">\n            @if(templateRef) {\n                <ng-container\n                    *ngTemplateOutlet=\"templateRef; context: { $implicit: dataRender, text: _text }\">\n                </ng-container>\n            } @else {\n                {{ _text }}\n            }\n            <i class=\"fas fa-times\" (click)=\"clickedRemove($event)\"></i>\n    </div>\n</ng-template>\n\n\n@if(objectField && !templateRef) {\n    <ng-container *ngTemplateOutlet=\"itemRender;\"></ng-container>\n}\n\n@if(!objectField && !templateRef) {\n    <ng-container *ngTemplateOutlet=\"itemRender;\"></ng-container>\n}\n\n@if(templateRef) {\n    <ng-container *ngTemplateOutlet=\"itemRender\"></ng-container>\n}\n", styles: [".chip-item{border-radius:4px;border:1px solid #888b99;background-color:#eeebf2;word-break:break-word;font-size:12px;font-weight:400;text-align:center;display:flex;align-items:center;gap:8px;padding:0 6px}.chip-item i{cursor:pointer}.chip-item:hover:not(.chip-item-disabled){background:#c1c1cc}.chip-item-disabled{opacity:.5}.chip-item-disabled i{cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChipItemComponent, isStandalone: true, selector: "s-chip-item", inputs: { dataRender: "dataRender", objectField: "objectField", disabled: "disabled", templateRef: "templateRef", itemIndex: "itemIndex", showTooltip: "showTooltip", maxLengthRenderWithoutTooltip: "maxLengthRenderWithoutTooltip" }, outputs: { clickRemove: "clickRemove", chipClicked: "chipClicked" }, ngImport: i0, template: "<ng-template #itemRender>\n    <div\n        class=\"rounded-medium border border-grayscale-50 bg-grayscale-10 break-words text-xs text-center flex items-center gap-2 px-1.5\"\n        [ngClass]=\"{ 'hover:bg-grayscale-30': !disabled, 'opacity-50': disabled }\"\n        (click)=\"onChipClicked($event)\" \n        [sTooltip]=\"_rawText\"\n        [showDelay]=\"0\"\n        [visible]=\"showTooltip ? _rawText.length > maxLengthRenderWithoutTooltip : false\">\n            @if(templateRef) {\n                <ng-container\n                    *ngTemplateOutlet=\"templateRef; context: { $implicit: dataRender, text: _text }\">\n                </ng-container>\n            } @else {\n                {{ _text }}\n            }\n            <i class=\"fas fa-times\" [ngClass]=\"{ 'cursor-pointer': !disabled, 'cursor-default': disabled }\" (click)=\"clickedRemove($event)\"></i>\n    </div>\n</ng-template>\n\n\n@if(objectField && !templateRef) {\n    <ng-container *ngTemplateOutlet=\"itemRender;\"></ng-container>\n}\n\n@if(!objectField && !templateRef) {\n    <ng-container *ngTemplateOutlet=\"itemRender;\"></ng-container>\n}\n\n@if(templateRef) {\n    <ng-container *ngTemplateOutlet=\"itemRender\"></ng-container>\n}\n", dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 __decorate([
     CheckDisabled()
@@ -62,7 +59,7 @@ __decorate([
 ], ChipItemComponent.prototype, "onChipClicked", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-chip-item', template: "<ng-template #itemRender>\n    <div\n        class=\"chip-item\"\n        [class.chip-item-disabled]=\"disabled\"\n        (click)=\"onChipClicked($event)\" \n        [sTooltip]=\"_rawText\"\n        [showDelay]=\"0\"\n        [visible]=\"showTooltip ? _rawText.length > maxLengthRenderWithoutTooltip : false\">\n            @if(templateRef) {\n                <ng-container\n                    *ngTemplateOutlet=\"templateRef; context: { $implicit: dataRender, text: _text }\">\n                </ng-container>\n            } @else {\n                {{ _text }}\n            }\n            <i class=\"fas fa-times\" (click)=\"clickedRemove($event)\"></i>\n    </div>\n</ng-template>\n\n\n@if(objectField && !templateRef) {\n    <ng-container *ngTemplateOutlet=\"itemRender;\"></ng-container>\n}\n\n@if(!objectField && !templateRef) {\n    <ng-container *ngTemplateOutlet=\"itemRender;\"></ng-container>\n}\n\n@if(templateRef) {\n    <ng-container *ngTemplateOutlet=\"itemRender\"></ng-container>\n}\n", styles: [".chip-item{border-radius:4px;border:1px solid #888b99;background-color:#eeebf2;word-break:break-word;font-size:12px;font-weight:400;text-align:center;display:flex;align-items:center;gap:8px;padding:0 6px}.chip-item i{cursor:pointer}.chip-item:hover:not(.chip-item-disabled){background:#c1c1cc}.chip-item-disabled{opacity:.5}.chip-item-disabled i{cursor:default}\n"] }]
+            args: [{ selector: 's-chip-item', standalone: true, imports: [TooltipDirective, NgTemplateOutlet, NgClass], template: "<ng-template #itemRender>\n    <div\n        class=\"rounded-medium border border-grayscale-50 bg-grayscale-10 break-words text-xs text-center flex items-center gap-2 px-1.5\"\n        [ngClass]=\"{ 'hover:bg-grayscale-30': !disabled, 'opacity-50': disabled }\"\n        (click)=\"onChipClicked($event)\" \n        [sTooltip]=\"_rawText\"\n        [showDelay]=\"0\"\n        [visible]=\"showTooltip ? _rawText.length > maxLengthRenderWithoutTooltip : false\">\n            @if(templateRef) {\n                <ng-container\n                    *ngTemplateOutlet=\"templateRef; context: { $implicit: dataRender, text: _text }\">\n                </ng-container>\n            } @else {\n                {{ _text }}\n            }\n            <i class=\"fas fa-times\" [ngClass]=\"{ 'cursor-pointer': !disabled, 'cursor-default': disabled }\" (click)=\"clickedRemove($event)\"></i>\n    </div>\n</ng-template>\n\n\n@if(objectField && !templateRef) {\n    <ng-container *ngTemplateOutlet=\"itemRender;\"></ng-container>\n}\n\n@if(!objectField && !templateRef) {\n    <ng-container *ngTemplateOutlet=\"itemRender;\"></ng-container>\n}\n\n@if(templateRef) {\n    <ng-container *ngTemplateOutlet=\"itemRender\"></ng-container>\n}\n" }]
         }], propDecorators: { dataRender: [{
                 type: Input,
                 args: [{ required: true }]
@@ -278,13 +275,13 @@ class ChipsComponent {
         this.onTouched(this.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChipsComponent, selector: "s-chips", inputs: { disabled: "disabled", field: "field", value: "value", placeholder: "placeholder", max: "max", maxLength: "maxLength", inputId: "inputId", allowDuplicated: "allowDuplicated", caseSensitiveDuplication: "caseSensitiveDuplication", addOnTab: "addOnTab", addOnBlur: "addOnBlur", separator: "separator", autofocus: "autofocus", infoLabel: "infoLabel", keyFilter: "keyFilter", showTooltip: "showTooltip", maxLengthRenderWithoutTooltip: "maxLengthRenderWithoutTooltip" }, outputs: { added: "added", removed: "removed", focused: "focused", focusLost: "focusLost", chipClicked: "chipClicked", valueChange: "valueChange" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChipsComponent, isStandalone: true, selector: "s-chips", inputs: { disabled: "disabled", field: "field", value: "value", placeholder: "placeholder", max: "max", maxLength: "maxLength", inputId: "inputId", allowDuplicated: "allowDuplicated", caseSensitiveDuplication: "caseSensitiveDuplication", addOnTab: "addOnTab", addOnBlur: "addOnBlur", separator: "separator", autofocus: "autofocus", infoLabel: "infoLabel", keyFilter: "keyFilter", showTooltip: "showTooltip", maxLengthRenderWithoutTooltip: "maxLengthRenderWithoutTooltip" }, outputs: { added: "added", removed: "removed", focused: "focused", focusLost: "focusLost", chipClicked: "chipClicked", valueChange: "valueChange" }, host: { listeners: { "document:keydown": "onKeydown($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ChipsComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "templates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ul class=\"chips-container\" [class.chips-container--focused]=\"isFocused\">\n    @for(item of value; track $index) {\n        <li>\n            <s-chip-item\n                [templateRef]=\"chipTemplate\"\n                [dataRender]=\"item\"\n                [objectField]=\"field\"\n                [itemIndex]=\"$index\"\n                [disabled]=\"disabled\"\n                [showTooltip]=\"showTooltip\"\n                [maxLengthRenderWithoutTooltip]=\"maxLengthRenderWithoutTooltip\"\n                (clickRemove)=\"removeItem($event)\"\n                (chipClicked)=\"onChipClicked($event)\">\n            </s-chip-item>\n        </li>\n    }\n\n    @if(keyFilter) {\n        <input\n            #input\n            [disabled]=\"disabled || max === value.length\"\n            [placeholder]=\"placeholder || ''\"\n            [maxlength]=\"maxLength\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"newItem\"\n            [pKeyFilter]=\"keyFilter\"\n            (focus)=\"onInputFocus($event)\"\n            (blur)=\"onInputLostFocus($event)\">\n    }@else {\n        <input\n            #input\n            [disabled]=\"disabled || max === value.length\"\n            [placeholder]=\"placeholder || ''\"\n            [maxlength]=\"maxLength\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"newItem\"\n            (focus)=\"onInputFocus($event)\"\n            (blur)=\"onInputLostFocus($event)\">\n    }\n</ul>\n@if(infoLabel) {\n    <span class=\"info-label\">\n        {{ infoLabel }}\n    </span>\n}\n", styles: [":host.ng-invalid.ng-dirty .chips-container{border:1px solid #c13018}.chips-container{width:100%;padding:6px;display:flex;flex-wrap:wrap;align-items:center;border-radius:3px;border:1px solid #c1c1cc;background-color:#fff;list-style:none;gap:8px;min-height:35px}.chips-container input{background-color:#fff;width:100%;border:none;flex:1}.chips-container input:focus-visible{outline:none}.chips-container--focused{outline:2px solid #428bca}.info-label{color:#888b99;font-size:12px;font-style:normal;font-weight:400}\n"], dependencies: [{ kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.KeyFilter, selector: "[pKeyFilter]", inputs: ["pValidateOnly", "pKeyFilter"], outputs: ["ngModelChange"] }, { kind: "component", type: ChipItemComponent, selector: "s-chip-item", inputs: ["dataRender", "objectField", "disabled", "templateRef", "itemIndex", "showTooltip", "maxLengthRenderWithoutTooltip"], outputs: ["clickRemove", "chipClicked"] }] });
+        ], queries: [{ propertyName: "templates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ul\n    class=\"chips-container w-full p-1.5 flex flex-wrap items-center rounded-small border border-grayscale-30 bg-grayscale-0 list-none gap-2 min-h-[35px]\"\n    [class.outline]=\"isFocused\"\n    [class.outline-2]=\"isFocused\"\n    [class.outline-criticality-blue]=\"isFocused\">\n    @for(item of value; track $index) {\n        <li>\n            <s-chip-item\n                [templateRef]=\"chipTemplate\"\n                [dataRender]=\"item\"\n                [objectField]=\"field\"\n                [itemIndex]=\"$index\"\n                [disabled]=\"disabled\"\n                [showTooltip]=\"showTooltip\"\n                [maxLengthRenderWithoutTooltip]=\"maxLengthRenderWithoutTooltip\"\n                (clickRemove)=\"removeItem($event)\"\n                (chipClicked)=\"onChipClicked($event)\">\n            </s-chip-item>\n        </li>\n    }\n\n    @if(keyFilter) {\n        <input\n            #input\n            class=\"bg-grayscale-0 w-full border-none flex-1 focus-visible:outline-none\"\n            [disabled]=\"disabled || max === value.length\"\n            [placeholder]=\"placeholder || ''\"\n            [maxlength]=\"maxLength\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"newItem\"\n            [pKeyFilter]=\"keyFilter\"\n            (focus)=\"onInputFocus($event)\"\n            (blur)=\"onInputLostFocus($event)\">\n    }@else {\n        <input\n            #input\n            class=\"bg-grayscale-0 w-full border-none flex-1 focus-visible:outline-none\"\n            [disabled]=\"disabled || max === value.length\"\n            [placeholder]=\"placeholder || ''\"\n            [maxlength]=\"maxLength\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"newItem\"\n            (focus)=\"onInputFocus($event)\"\n            (blur)=\"onInputLostFocus($event)\">\n    }\n</ul>\n@if(infoLabel) {\n    <span class=\"text-grayscale-50 text-xs\">\n        {{ infoLabel }}\n    </span>\n}\n", styles: [":host.ng-invalid.ng-dirty .chips-container{--tw-border-opacity: 1;border-color:rgb(193 48 24 / var(--tw-border-opacity, 1))}\n"], dependencies: [{ kind: "component", type: ChipItemComponent, selector: "s-chip-item", inputs: ["dataRender", "objectField", "disabled", "templateRef", "itemIndex", "showTooltip", "maxLengthRenderWithoutTooltip"], outputs: ["clickRemove", "chipClicked"] }, { 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"] }] });
 }
 __decorate([
     CheckDisabled()
@@ -300,7 +297,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: forwardRef(() => ChipsComponent),
                             multi: true,
                         },
-                    ], template: "<ul class=\"chips-container\" [class.chips-container--focused]=\"isFocused\">\n    @for(item of value; track $index) {\n        <li>\n            <s-chip-item\n                [templateRef]=\"chipTemplate\"\n                [dataRender]=\"item\"\n                [objectField]=\"field\"\n                [itemIndex]=\"$index\"\n                [disabled]=\"disabled\"\n                [showTooltip]=\"showTooltip\"\n                [maxLengthRenderWithoutTooltip]=\"maxLengthRenderWithoutTooltip\"\n                (clickRemove)=\"removeItem($event)\"\n                (chipClicked)=\"onChipClicked($event)\">\n            </s-chip-item>\n        </li>\n    }\n\n    @if(keyFilter) {\n        <input\n            #input\n            [disabled]=\"disabled || max === value.length\"\n            [placeholder]=\"placeholder || ''\"\n            [maxlength]=\"maxLength\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"newItem\"\n            [pKeyFilter]=\"keyFilter\"\n            (focus)=\"onInputFocus($event)\"\n            (blur)=\"onInputLostFocus($event)\">\n    }@else {\n        <input\n            #input\n            [disabled]=\"disabled || max === value.length\"\n            [placeholder]=\"placeholder || ''\"\n            [maxlength]=\"maxLength\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"newItem\"\n            (focus)=\"onInputFocus($event)\"\n            (blur)=\"onInputLostFocus($event)\">\n    }\n</ul>\n@if(infoLabel) {\n    <span class=\"info-label\">\n        {{ infoLabel }}\n    </span>\n}\n", styles: [":host.ng-invalid.ng-dirty .chips-container{border:1px solid #c13018}.chips-container{width:100%;padding:6px;display:flex;flex-wrap:wrap;align-items:center;border-radius:3px;border:1px solid #c1c1cc;background-color:#fff;list-style:none;gap:8px;min-height:35px}.chips-container input{background-color:#fff;width:100%;border:none;flex:1}.chips-container input:focus-visible{outline:none}.chips-container--focused{outline:2px solid #428bca}.info-label{color:#888b99;font-size:12px;font-style:normal;font-weight:400}\n"] }]
+                    ], standalone: true, imports: [ChipItemComponent, FormsModule, KeyFilter], template: "<ul\n    class=\"chips-container w-full p-1.5 flex flex-wrap items-center rounded-small border border-grayscale-30 bg-grayscale-0 list-none gap-2 min-h-[35px]\"\n    [class.outline]=\"isFocused\"\n    [class.outline-2]=\"isFocused\"\n    [class.outline-criticality-blue]=\"isFocused\">\n    @for(item of value; track $index) {\n        <li>\n            <s-chip-item\n                [templateRef]=\"chipTemplate\"\n                [dataRender]=\"item\"\n                [objectField]=\"field\"\n                [itemIndex]=\"$index\"\n                [disabled]=\"disabled\"\n                [showTooltip]=\"showTooltip\"\n                [maxLengthRenderWithoutTooltip]=\"maxLengthRenderWithoutTooltip\"\n                (clickRemove)=\"removeItem($event)\"\n                (chipClicked)=\"onChipClicked($event)\">\n            </s-chip-item>\n        </li>\n    }\n\n    @if(keyFilter) {\n        <input\n            #input\n            class=\"bg-grayscale-0 w-full border-none flex-1 focus-visible:outline-none\"\n            [disabled]=\"disabled || max === value.length\"\n            [placeholder]=\"placeholder || ''\"\n            [maxlength]=\"maxLength\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"newItem\"\n            [pKeyFilter]=\"keyFilter\"\n            (focus)=\"onInputFocus($event)\"\n            (blur)=\"onInputLostFocus($event)\">\n    }@else {\n        <input\n            #input\n            class=\"bg-grayscale-0 w-full border-none flex-1 focus-visible:outline-none\"\n            [disabled]=\"disabled || max === value.length\"\n            [placeholder]=\"placeholder || ''\"\n            [maxlength]=\"maxLength\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"newItem\"\n            (focus)=\"onInputFocus($event)\"\n            (blur)=\"onInputLostFocus($event)\">\n    }\n</ul>\n@if(infoLabel) {\n    <span class=\"text-grayscale-50 text-xs\">\n        {{ infoLabel }}\n    </span>\n}\n", styles: [":host.ng-invalid.ng-dirty .chips-container{--tw-border-opacity: 1;border-color:rgb(193 48 24 / var(--tw-border-opacity, 1))}\n"] }]
         }], propDecorators: { disabled: [{
                 type: Input
             }], field: [{
@@ -360,14 +357,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 class ChipsModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ChipsModule, declarations: [ChipsComponent, ChipItemComponent], imports: [FormsModule, TooltipModule, KeyFilterModule, NgTemplateOutlet], exports: [ChipsComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipsModule, imports: [FormsModule, TooltipModule, KeyFilterModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ChipsModule, imports: [ChipsComponent], exports: [ChipsComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipsModule, imports: [ChipsComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChipsModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ChipsComponent, ChipItemComponent],
-                    imports: [FormsModule, TooltipModule, KeyFilterModule, NgTemplateOutlet],
+                    imports: [ChipsComponent],
                     exports: [ChipsComponent],
                 }]
         }] });