@unipin/angular-applet 21.1.3 → 21.3.1

package/fesm2022/unipin-angular-applet-audit-audit-modal.component-3a2P0bZr.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"unipin-angular-applet-audit-audit-modal.component-3a2P0bZr.mjs","sources":["../../../projects/unipin-angular/audit/components/modal/audit-modal.component.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, output } from '@angular/core';\nimport { DatePipe } from '@angular/common';\nimport { AuditTrail } from '@unipin/graphql-schema';\nimport { UpContentContainerComponent } from '@unipin/angular-applet/containers';\nimport { UpFormFieldComponent, UpInputDirective } from '@unipin/angular-applet/forms';\nimport { UpDialogWrapperComponent, UpDialogContentDirective, UpDialogContentRefDirective } from '@unipin/angular-applet/dialog';\n\n\ntype AuditTrailData = AuditTrail & {\n  icon: string;\n  changedData?: Array<{ field: string; oldValue: any; newValue: any }>;\n}\n\n\n@Component({\n  standalone: true,\n  selector: 'up-audit-modal',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    DatePipe,\n    UpInputDirective,\n    UpFormFieldComponent,\n    UpDialogWrapperComponent,\n    UpDialogContentDirective,\n    UpDialogContentRefDirective,\n    UpContentContainerComponent\n  ],\n  template: `\n    <up-dialog-wrapper\n      [isOpen]=\"audit() !== null\"\n      (dismissed)=\"dismissed.emit()\"\n    >\n      <div\n        upDialogContent\n        class=\"max-w-200\"\n        *upDialogContentRef\n      >\n        <up-content-container\n          [header]=\"audit()?.user?.name + ' ' + audit()?.action + ' • ' + (audit()?.createdAt | date: 'dd LLL yyyy HH:mm')\"\n          (closed)=\"dismissed.emit()\"\n        >\n          <div class=\"p-4 space-y-6\">\n            <up-form-field label=\"Username\">\n              <input \n                upInput  \n                readonly\n                type=\"text\"\n                tabindex=\"-1\"\n                [value]=\"audit()?.user?.name\" \n              />\n            </up-form-field>\n\n            <up-form-field label=\"Description\">\n              <textarea \n                upInput\n                readonly\n                tabindex=\"-1\"\n                class=\"h-25 w-full\"\n                [value]=\"audit()?.description\"\n              ></textarea>\n            </up-form-field>\n\n            <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n              <up-form-field label=\"Source IP\">\n                <input \n                  upInput  \n                  readonly\n                  type=\"text\"\n                  tabindex=\"-1\"\n                  [value]=\"audit()?.sourceIp\" \n                />\n              </up-form-field>\n\n              <up-form-field label=\"Source Platform\">\n                <input \n                  upInput  \n                  readonly\n                  type=\"text\"\n                  tabindex=\"-1\"\n                  [value]=\"audit()?.user?.sourcePlatform\" \n                />\n              </up-form-field>\n\n              <up-form-field label=\"MS Source\">\n                <input \n                  upInput  \n                  readonly\n                  type=\"text\"\n                  tabindex=\"-1\"\n                  [value]=\"audit()?.msSource\" \n                />\n              </up-form-field>\n\n              <up-form-field label=\"Function\">\n                <input \n                  upInput  \n                  readonly\n                  type=\"text\"\n                  tabindex=\"-1\"\n                  [value]=\"audit()?.function\" \n                />\n              </up-form-field>\n            </div>\n\n            @if (\n              audit() &&\n              audit()!.changedData &&\n              audit()!.changedData!.length > 0\n            ) {\n              <div class=\"space-y-2\">\n                <label class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 select-none\">\n                  Changed Data\n                </label>\n                \n                <table class=\"w-full my-2 table-fixed border-collapse rounded-md select-none\">\n                  <thead class=\"border-inherit border-solid border-0\">\n                    <tr>\n                      <th class=\"w-[30%] p-2 text-left border border-border bg-[#f2f2f2] text-base border-tl-2\">Field</th>\n                      <th class=\"w-[35%] p-2 text-left border border-border bg-[#f2f2f2] text-base\">Old Value</th>\n                      <th class=\"w-[35%] p-2 text-left border border-border bg-[#f2f2f2] text-base border-tr-2\">New Value</th>\n                    </tr>\n                  </thead>\n\n                  <tbody class=\"border-inherit border-solid border-0\">\n                    @for (data of audit()!.changedData; track data.field; let even = $even) {\n                      <tr \n                        [class]=\"even? 'bg-white': 'bg-[#f9f9f9]'\"\n                      >\n                        <td class=\"p-2 text-left border border-border capitalize\">\n                          {{ data.field }}\n                        </td>\n\n                        <td class=\"p-2 text-left border border-border capitalize\">\n                          {{ data.oldValue }}\n                        </td>\n\n                        <td class=\"p-2 text-left border border-border capitalize\">\n                          {{ data.newValue }}\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n              </div>\n            }\n          </div>\n        </up-content-container>\n      </div>\n    </up-dialog-wrapper>  \n  `\n})\nexport class UpAuditModalComponent {\n\n  public readonly audit = input.required<AuditTrailData | null>();\n  public readonly dismissed = output<void>();\n}\n"],"names":[],"mappings":"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"}

package/fesm2022/unipin-angular-applet-audit.mjs

@@ -0,0 +1,220 @@
+import * as i0 from '@angular/core';
+import { Injectable, input, signal, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
+import { of } from 'rxjs';
+import { map, catchError } from 'rxjs/operators';
+import * as i1 from '@unipin/angular-gql';
+import { DatePipe } from '@angular/common';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { matKeyboardArrowDownRound, matHourglassEmptyRound, matAddCircleRound, matErrorRound, matEditRound } from '@ng-icons/material-icons/round';
+import { UpSpinnerComponent } from '@unipin/angular-applet/spinner';
+import { UpInfiniteScrollDirective } from '@unipin/angular-applet/infinite-scroll';
+
+class AuditService {
+    constructor(gql) {
+        this.gql = gql;
+    }
+    query(input) {
+        return this.gql.query({
+            operationName: 'QueryAuditTrail',
+            variables: {
+                input
+            },
+            query: `
+        query QueryAuditTrail($input: AuditTrailCriteria) {
+          auditMsAuditTrail(input: $input) {
+            action
+            createdAt
+            description
+            function
+            guid
+            msSource
+            sourceIp
+            data
+            user {
+              name
+              sourcePlatform
+              status
+              appLoginPrincipal {
+                principalId
+                principalType
+              }
+            }
+          }
+        }
+      `,
+        }).pipe(map((res) => {
+            return {
+                data: res.data ?? null,
+                errors: res.errors ?? []
+            };
+        }), catchError((err) => {
+            return of({
+                data: null,
+                errors: Array.isArray(err) ? err : [err]
+            });
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuditService, deps: [{ token: i1.GqlParser }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuditService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuditService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.GqlParser }] });
+
+class UpAuditListComponent {
+    constructor(service) {
+        this.service = service;
+        this.tagValues = input(...(ngDevMode ? [undefined, { debugName: "tagValues" }] : []));
+        this.relatedEntities = input(...(ngDevMode ? [undefined, { debugName: "relatedEntities" }] : []));
+        this.hasMore = signal(true, ...(ngDevMode ? [{ debugName: "hasMore" }] : []));
+        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.auditTrails = signal([], ...(ngDevMode ? [{ debugName: "auditTrails" }] : []));
+        this.selectedTrail = signal(null, ...(ngDevMode ? [{ debugName: "selectedTrail" }] : []));
+        this.criteria = {
+            page: 0,
+            pageSize: 20,
+            sortBy: 'createdAt',
+            sortDirection: 'desc'
+        };
+        effect(() => {
+            this.criteria.page = 0;
+            this.criteria.tagValues = undefined;
+            this.criteria.relatedEntities = undefined;
+            if (this.tagValues()) {
+                this.criteria.tagValues = this.tagValues();
+            }
+            if (this.relatedEntities()) {
+                this.criteria.relatedEntities = this.relatedEntities();
+            }
+            untracked(() => {
+                this.hasMore.set(true);
+                this.auditTrails.set([]);
+                this.isLoading.set(false);
+                this.sub?.unsubscribe();
+                this.loadData();
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    loadData() {
+        if (this.isLoading() ||
+            !this.hasMore()) {
+            return;
+        }
+        this.isLoading.set(true);
+        this.sub = this.service.query(this.criteria).subscribe({
+            error: () => {
+                this.isLoading.set(false);
+            },
+            next: ({ data: { auditMsAuditTrail: data } }) => {
+                const formattedData = data.reduce((acc, curr) => {
+                    if (!curr) {
+                        return acc;
+                    }
+                    acc.push({
+                        ...curr,
+                        icon: this.getAuditIcon(curr),
+                        changedData: this.getChangedData(curr.data),
+                    });
+                    return acc;
+                }, []);
+                this.hasMore.set(formattedData.length >= this.criteria.pageSize);
+                this.auditTrails.update((curr) => {
+                    return [
+                        ...curr,
+                        ...formattedData
+                    ];
+                });
+                this.criteria.page++;
+                this.isLoading.set(false);
+            }
+        });
+    }
+    getAuditIcon(audit) {
+        const actionLower = audit.action?.toLowerCase() || '';
+        const descLower = audit.description?.toLowerCase() || '';
+        if (actionLower.includes('waiting') ||
+            descLower.includes('waiting')) {
+            return 'matHourglassEmptyRound';
+        }
+        if (actionLower.includes('creation') ||
+            descLower.includes('creation')) {
+            return 'matAddCircleRound';
+        }
+        if (actionLower.includes('update') ||
+            descLower.includes('update')) {
+            return 'matEditRound';
+        }
+        return 'matErrorRound';
+    }
+    getChangedData(data) {
+        if (!data ||
+            !data.oldData ||
+            !data.newData) {
+            return [];
+        }
+        try {
+            const oldData = JSON.parse(data.oldData);
+            const newData = JSON.parse(data.newData);
+            return Object.keys(newData).filter((key) => {
+                return JSON.stringify(oldData[key]) !== JSON.stringify(newData[key]) && !key.match(/update|created/);
+            }).map((key) => {
+                return {
+                    field: key,
+                    oldValue: this.formatValue(oldData[key]),
+                    newValue: this.formatValue(newData[key])
+                };
+            });
+        }
+        catch (error) {
+            return [];
+        }
+    }
+    formatValue(value) {
+        if (value === null || value === undefined)
+            return '-';
+        if (typeof value === 'object')
+            return JSON.stringify(value);
+        return String(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpAuditListComponent, deps: [{ token: AuditService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: UpAuditListComponent, isStandalone: true, selector: "up-audit-list", inputs: { tagValues: { classPropertyName: "tagValues", publicName: "tagValues", isSignal: true, isRequired: false, transformFunction: null }, relatedEntities: { classPropertyName: "relatedEntities", publicName: "relatedEntities", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            provideIcons({
+                matEditRound,
+                matErrorRound,
+                matAddCircleRound,
+                matHourglassEmptyRound,
+                matKeyboardArrowDownRound,
+            })
+        ], ngImport: i0, template: "<div class=\"w-full pb-5 pl-5 border-l-2 border-border\">\n    @for (audit of auditTrails(); track audit.guid) {\n        <div class=\"relative flex items-start first:pt-2.5 not-first:pt-4 not-last:pb-4 not-last:border-b not-last:border-border\">\n            <div class=\"absolute border border-border rounded-full p-2 flex items-center bg-[#f5f7f6] -left-9.25\">\n                <ng-icon\n                    size=\"14\"\n                    [name]=\"audit.icon\"\n                />\n            </div>\n\n            <div class=\"px-2 pt-1.25 w-full\">\n                <div class=\"flex items-center justify-between gap-3 select-none\">\n                    <div class=\"text-sm grow\">\n                        <b>{{ audit.user?.name }}</b> <span class=\"lowercase\">&nbsp;{{ audit.action }} <i class=\"text-muted-foreground\">\u2022</i></span>\n                        <span class=\"text-muted-foreground text-xs\">&nbsp;{{ audit.createdAt | date: 'dd LLL yyyy HH:mm' }}</span>\n                    </div>\n\n                    <button\n                        type=\"button\"\n                        class=\"text-sm text-primary font-medium hover:underline shrink-0 cursor-pointer\"\n                        (click)=\"selectedTrail.set(audit)\"\n                    >\n                        Detail\n                    </button>\n                </div>\n\n                @if (\n                    audit.changedData && \n                    audit.changedData.length > 0\n                ) {\n                    <table class=\"w-full my-2 table-fixed border-collapse rounded-md select-none\">\n                        <thead class=\"border-inherit border-solid border-0\">\n                            <tr>\n                                <th class=\"w-[30%] p-2 text-left border border-border bg-[#f2f2f2] text-base border-tl-2\">Field</th>\n                                <th class=\"w-[35%] p-2 text-left border border-border bg-[#f2f2f2] text-base\">Old Value</th>\n                                <th class=\"w-[35%] p-2 text-left border border-border bg-[#f2f2f2] text-base border-tr-2\">New Value</th>\n                            </tr>\n                        </thead>\n\n                        <tbody class=\"border-inherit border-solid border-0\">\n                            @for (data of audit.changedData; track data.field; let even = $even) {\n                                <tr \n                                    [class]=\"even? 'bg-white': 'bg-[#f9f9f9]'\"\n                                >\n                                    <td class=\"p-2 text-left border border-border capitalize\">\n                                        {{ data.field }}\n                                    </td>\n\n                                    <td class=\"p-2 text-left border border-border capitalize\">\n                                        <div class=\"line-clamp-5 wrap-break-word\">{{ data.oldValue }}</div>\n                                    </td>\n\n                                    <td class=\"p-2 text-left border border-border capitalize\">\n                                        <div class=\"line-clamp-5 wrap-break-word\">{{ data.newValue }}</div>\n                                    </td>\n                                </tr>\n                            }\n                        </tbody>\n                    </table>\n                }\n            </div>\n        </div>\n    }\n</div>\n\n\n@if (hasMore()) {\n    <div \n        upInfiniteScroll\n        class=\"flex justify-center py-4\"\n        (scrolled)=\"loadData()\"\n    >\n        <up-spinner />\n    </div>\n}\n\n@defer (when selectedTrail()) {\n    <up-audit-modal\n        [audit]=\"selectedTrail()\"\n        (dismissed)=\"selectedTrail.set(null)\"\n    />\n}\n", dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "component", type: UpSpinnerComponent, selector: "up-spinner", inputs: ["stokeWidth", "inlineClass"] }, { kind: "directive", type: UpInfiniteScrollDirective, selector: "[upInfiniteScroll]", inputs: ["threshold", "rootMargin"], outputs: ["scrolled"], exportAs: ["upInfiniteScroll"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('./unipin-angular-applet-audit-audit-modal.component-3a2P0bZr.mjs').then(m => m.UpAuditModalComponent)]] }); }
+}
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.1.5", ngImport: i0, type: UpAuditListComponent, resolveDeferredDeps: () => [import('./unipin-angular-applet-audit-audit-modal.component-3a2P0bZr.mjs').then(m => m.UpAuditModalComponent)], resolveMetadata: UpAuditModalComponent => ({ decorators: [{
+                type: Component,
+                args: [{ standalone: true, selector: 'up-audit-list', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                            NgIcon,
+                            DatePipe,
+                            UpSpinnerComponent,
+                            UpInfiniteScrollDirective,
+                            UpAuditModalComponent
+                        ], providers: [
+                            provideIcons({
+                                matEditRound,
+                                matErrorRound,
+                                matAddCircleRound,
+                                matHourglassEmptyRound,
+                                matKeyboardArrowDownRound,
+                            })
+                        ], template: "<div class=\"w-full pb-5 pl-5 border-l-2 border-border\">\n    @for (audit of auditTrails(); track audit.guid) {\n        <div class=\"relative flex items-start first:pt-2.5 not-first:pt-4 not-last:pb-4 not-last:border-b not-last:border-border\">\n            <div class=\"absolute border border-border rounded-full p-2 flex items-center bg-[#f5f7f6] -left-9.25\">\n                <ng-icon\n                    size=\"14\"\n                    [name]=\"audit.icon\"\n                />\n            </div>\n\n            <div class=\"px-2 pt-1.25 w-full\">\n                <div class=\"flex items-center justify-between gap-3 select-none\">\n                    <div class=\"text-sm grow\">\n                        <b>{{ audit.user?.name }}</b> <span class=\"lowercase\">&nbsp;{{ audit.action }} <i class=\"text-muted-foreground\">\u2022</i></span>\n                        <span class=\"text-muted-foreground text-xs\">&nbsp;{{ audit.createdAt | date: 'dd LLL yyyy HH:mm' }}</span>\n                    </div>\n\n                    <button\n                        type=\"button\"\n                        class=\"text-sm text-primary font-medium hover:underline shrink-0 cursor-pointer\"\n                        (click)=\"selectedTrail.set(audit)\"\n                    >\n                        Detail\n                    </button>\n                </div>\n\n                @if (\n                    audit.changedData && \n                    audit.changedData.length > 0\n                ) {\n                    <table class=\"w-full my-2 table-fixed border-collapse rounded-md select-none\">\n                        <thead class=\"border-inherit border-solid border-0\">\n                            <tr>\n                                <th class=\"w-[30%] p-2 text-left border border-border bg-[#f2f2f2] text-base border-tl-2\">Field</th>\n                                <th class=\"w-[35%] p-2 text-left border border-border bg-[#f2f2f2] text-base\">Old Value</th>\n                                <th class=\"w-[35%] p-2 text-left border border-border bg-[#f2f2f2] text-base border-tr-2\">New Value</th>\n                            </tr>\n                        </thead>\n\n                        <tbody class=\"border-inherit border-solid border-0\">\n                            @for (data of audit.changedData; track data.field; let even = $even) {\n                                <tr \n                                    [class]=\"even? 'bg-white': 'bg-[#f9f9f9]'\"\n                                >\n                                    <td class=\"p-2 text-left border border-border capitalize\">\n                                        {{ data.field }}\n                                    </td>\n\n                                    <td class=\"p-2 text-left border border-border capitalize\">\n                                        <div class=\"line-clamp-5 wrap-break-word\">{{ data.oldValue }}</div>\n                                    </td>\n\n                                    <td class=\"p-2 text-left border border-border capitalize\">\n                                        <div class=\"line-clamp-5 wrap-break-word\">{{ data.newValue }}</div>\n                                    </td>\n                                </tr>\n                            }\n                        </tbody>\n                    </table>\n                }\n            </div>\n        </div>\n    }\n</div>\n\n\n@if (hasMore()) {\n    <div \n        upInfiniteScroll\n        class=\"flex justify-center py-4\"\n        (scrolled)=\"loadData()\"\n    >\n        <up-spinner />\n    </div>\n}\n\n@defer (when selectedTrail()) {\n    <up-audit-modal\n        [audit]=\"selectedTrail()\"\n        (dismissed)=\"selectedTrail.set(null)\"\n    />\n}\n" }]
+            }], ctorParameters: () => [{ type: AuditService }], propDecorators: { tagValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagValues", required: false }] }], relatedEntities: [{ type: i0.Input, args: [{ isSignal: true, alias: "relatedEntities", required: false }] }] } }) });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AuditService, UpAuditListComponent };
+//# sourceMappingURL=unipin-angular-applet-audit.mjs.map

package/fesm2022/unipin-angular-applet-audit.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"unipin-angular-applet-audit.mjs","sources":["../../../projects/unipin-angular/audit/services/audit.service.ts","../../../projects/unipin-angular/audit/components/list/audit-list.component.ts","../../../projects/unipin-angular/audit/components/list/audit-list.component.html","../../../projects/unipin-angular/audit/unipin-angular-applet-audit.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { Observable, of } from 'rxjs';\nimport { catchError, map } from 'rxjs/operators';\nimport { GqlParser, QueryResult } from '@unipin/angular-gql';\nimport { AuditTrail, AuditTrailCriteria } from '@unipin/graphql-schema';\n\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class AuditService {\n\n  constructor(\n    protected readonly gql: GqlParser\n  ) { }\n\n  public query(input: AuditTrailCriteria): Observable<QueryResult<{ auditMsAuditTrail: AuditTrail[] }>>{\n    return this.gql.query<{ auditMsAuditTrail: AuditTrail[] }>({\n      operationName: 'QueryAuditTrail',\n      variables: {\n        input\n      },\n      query: `\n        query QueryAuditTrail($input: AuditTrailCriteria) {\n          auditMsAuditTrail(input: $input) {\n            action\n            createdAt\n            description\n            function\n            guid\n            msSource\n            sourceIp\n            data\n            user {\n              name\n              sourcePlatform\n              status\n              appLoginPrincipal {\n                principalId\n                principalType\n              }\n            }\n          }\n        }\n      `,\n    }).pipe(\n      map(\n        (res) => {\n          return {\n            data: res.data?? null,\n            errors: res.errors?? []\n          };\n        }\n      ),\n      catchError(\n        (err) => {\n          return of(\n            {\n              data: null as any,\n              errors: Array.isArray(err)? err : [err]\n            }\n          );\n        }\n      )\n    );\n  }\n}\n","import { Component, ChangeDetectionStrategy, signal, OnDestroy, input, effect, untracked } from '@angular/core';\nimport { DatePipe } from '@angular/common';\nimport { Subscription } from 'rxjs';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { matAddCircleRound, matKeyboardArrowDownRound, matEditRound, matHourglassEmptyRound, matErrorRound } from '@ng-icons/material-icons/round';\nimport { AuditTrail, AuditTrailCriteria } from '@unipin/graphql-schema';\nimport { UpSpinnerComponent } from '@unipin/angular-applet/spinner';\nimport { UpInfiniteScrollDirective } from '@unipin/angular-applet/infinite-scroll';\nimport { AuditService } from './../../services/audit.service';\nimport { UpAuditModalComponent } from '../modal/audit-modal.component';\n\n\ntype AuditTrailData = AuditTrail & {\n  icon: string;\n  changedData?: Array<{ field: string; oldValue: any; newValue: any }>;\n}\n\n\n@Component({\n  standalone: true,\n  selector: 'up-audit-list',\n  templateUrl: './audit-list.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    NgIcon,\n    DatePipe,\n    UpSpinnerComponent,\n    UpInfiniteScrollDirective,\n    UpAuditModalComponent\n  ],\n  providers: [\n    provideIcons(\n      { \n        matEditRound,\n        matErrorRound,\n        matAddCircleRound,\n        matHourglassEmptyRound,\n        matKeyboardArrowDownRound,\n      }\n    ) \n  ]\n})\nexport class UpAuditListComponent implements OnDestroy {\n\n  public readonly tagValues = input<string[] | undefined>();\n  public readonly relatedEntities = input<string[] | undefined>();\n\n  public readonly hasMore = signal<boolean>(true);\n  public readonly isLoading = signal<boolean>(false);\n  public readonly auditTrails = signal<AuditTrailData[]>([]);\n  public readonly selectedTrail = signal<AuditTrailData | null>(null);\n\n  protected sub?: Subscription;\n  protected readonly criteria: AuditTrailCriteria = { \n    page: 0, \n    pageSize: 20,\n    sortBy: 'createdAt', \n    sortDirection: 'desc'\n  };\n\n  constructor(\n    protected readonly service: AuditService\n  ) {\n    effect(\n      () => {\n        this.criteria.page = 0;\n        this.criteria.tagValues = undefined;\n        this.criteria.relatedEntities = undefined;\n        \n        if (this.tagValues()) {\n          this.criteria.tagValues = this.tagValues();\n        }\n        \n        if (this.relatedEntities()) {\n          this.criteria.relatedEntities = this.relatedEntities();\n        }\n\n        untracked(\n          () => {\n            this.hasMore.set(true);\n            this.auditTrails.set([]);\n            this.isLoading.set(false);\n\n            this.sub?.unsubscribe();\n            this.loadData();\n          }\n        );\n      }\n    );\n  }\n\n  public ngOnDestroy(): void{\n    this.sub?.unsubscribe();\n  }\n\n  public loadData(): void{\n    if (\n      this.isLoading() || \n      !this.hasMore()\n    ) {\n      return;\n    }\n    this.isLoading.set(true);\n\n    this.sub = this.service.query(this.criteria).subscribe(\n      {\n        error: () => {\n          this.isLoading.set(false);\n        },\n        next: ({ data: { auditMsAuditTrail: data }}) => {\n          const formattedData = data.reduce(\n            (acc, curr) => {\n              if (!curr) {\n                return acc;\n              }\n\n              acc.push(\n                {\n                  ...curr,\n                  icon: this.getAuditIcon(curr),\n                  changedData: this.getChangedData(curr.data),\n                }\n              );\n              return acc;\n            },\n            [] as AuditTrailData[]\n          );\n          this.hasMore.set(formattedData.length >= this.criteria.pageSize!);\n\n          this.auditTrails.update(\n            (curr) => {\n              return [\n                ...curr,\n                ...formattedData\n              ]\n            }\n          );\n          \n          this.criteria.page!++;\n          this.isLoading.set(false);\n        }\n      }\n    );\n  }\n\n  protected getAuditIcon(audit: AuditTrail): string{\n    const actionLower = audit.action?.toLowerCase() || '';\n    const descLower = audit.description?.toLowerCase() || '';\n    \n    if (\n      actionLower.includes('waiting') || \n      descLower.includes('waiting')\n    ) {\n      return 'matHourglassEmptyRound';\n    }\n    \n    if (\n      actionLower.includes('creation') || \n      descLower.includes('creation')\n    ) {\n      return 'matAddCircleRound';\n    }\n    \n    if (\n      actionLower.includes('update') || \n      descLower.includes('update')\n    ) {\n      return 'matEditRound';\n    }\n    return 'matErrorRound';\n  }\n\n  protected getChangedData(data: any): Array<{ field: string; oldValue: any; newValue: any }>{\n    if (\n      !data || \n      !data.oldData || \n      !data.newData\n    ) {\n      return [];\n    }\n\n    try {\n      const oldData = JSON.parse(data.oldData);\n      const newData = JSON.parse(data.newData);\n\n      return Object.keys(newData).filter(\n        (key) => {\n          return JSON.stringify(oldData[key]) !== JSON.stringify(newData[key]) && !key.match(/update|created/);\n        }\n      ).map(\n        (key) => {\n          return {\n            field: key,\n            oldValue: this.formatValue(oldData[key]),\n            newValue: this.formatValue(newData[key])\n          };\n        }\n      );\n    } \n    catch (error) {\n      return [];\n    }\n  }\n\n  protected formatValue(value: any): string{\n    if (value === null || value === undefined) return '-';\n    if (typeof value === 'object') return JSON.stringify(value);\n    return String(value);\n  }\n}\n","<div class=\"w-full pb-5 pl-5 border-l-2 border-border\">\n    @for (audit of auditTrails(); track audit.guid) {\n        <div class=\"relative flex items-start first:pt-2.5 not-first:pt-4 not-last:pb-4 not-last:border-b not-last:border-border\">\n            <div class=\"absolute border border-border rounded-full p-2 flex items-center bg-[#f5f7f6] -left-9.25\">\n                <ng-icon\n                    size=\"14\"\n                    [name]=\"audit.icon\"\n                />\n            </div>\n\n            <div class=\"px-2 pt-1.25 w-full\">\n                <div class=\"flex items-center justify-between gap-3 select-none\">\n                    <div class=\"text-sm grow\">\n                        <b>{{ audit.user?.name }}</b> <span class=\"lowercase\">&nbsp;{{ audit.action }} <i class=\"text-muted-foreground\">•</i></span>\n                        <span class=\"text-muted-foreground text-xs\">&nbsp;{{ audit.createdAt | date: 'dd LLL yyyy HH:mm' }}</span>\n                    </div>\n\n                    <button\n                        type=\"button\"\n                        class=\"text-sm text-primary font-medium hover:underline shrink-0 cursor-pointer\"\n                        (click)=\"selectedTrail.set(audit)\"\n                    >\n                        Detail\n                    </button>\n                </div>\n\n                @if (\n                    audit.changedData && \n                    audit.changedData.length > 0\n                ) {\n                    <table class=\"w-full my-2 table-fixed border-collapse rounded-md select-none\">\n                        <thead class=\"border-inherit border-solid border-0\">\n                            <tr>\n                                <th class=\"w-[30%] p-2 text-left border border-border bg-[#f2f2f2] text-base border-tl-2\">Field</th>\n                                <th class=\"w-[35%] p-2 text-left border border-border bg-[#f2f2f2] text-base\">Old Value</th>\n                                <th class=\"w-[35%] p-2 text-left border border-border bg-[#f2f2f2] text-base border-tr-2\">New Value</th>\n                            </tr>\n                        </thead>\n\n                        <tbody class=\"border-inherit border-solid border-0\">\n                            @for (data of audit.changedData; track data.field; let even = $even) {\n                                <tr \n                                    [class]=\"even? 'bg-white': 'bg-[#f9f9f9]'\"\n                                >\n                                    <td class=\"p-2 text-left border border-border capitalize\">\n                                        {{ data.field }}\n                                    </td>\n\n                                    <td class=\"p-2 text-left border border-border capitalize\">\n                                        <div class=\"line-clamp-5 wrap-break-word\">{{ data.oldValue }}</div>\n                                    </td>\n\n                                    <td class=\"p-2 text-left border border-border capitalize\">\n                                        <div class=\"line-clamp-5 wrap-break-word\">{{ data.newValue }}</div>\n                                    </td>\n                                </tr>\n                            }\n                        </tbody>\n                    </table>\n                }\n            </div>\n        </div>\n    }\n</div>\n\n\n@if (hasMore()) {\n    <div \n        upInfiniteScroll\n        class=\"flex justify-center py-4\"\n        (scrolled)=\"loadData()\"\n    >\n        <up-spinner />\n    </div>\n}\n\n@defer (when selectedTrail()) {\n    <up-audit-modal\n        [audit]=\"selectedTrail()\"\n        (dismissed)=\"selectedTrail.set(null)\"\n    />\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.AuditService"],"mappings":";;;;;;;;;;;MAUa,YAAY,CAAA;AAEvB,IAAA,WAAA,CACqB,GAAc,EAAA;QAAd,IAAA,CAAA,GAAG,GAAH,GAAG;IACpB;AAEG,IAAA,KAAK,CAAC,KAAyB,EAAA;AACpC,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,CAAsC;AACzD,YAAA,aAAa,EAAE,iBAAiB;AAChC,YAAA,SAAS,EAAE;gBACT;AACD,aAAA;AACD,YAAA,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;AAsBN,MAAA,CAAA;SACF,CAAC,CAAC,IAAI,CACL,GAAG,CACD,CAAC,GAAG,KAAI;YACN,OAAO;AACL,gBAAA,IAAI,EAAE,GAAG,CAAC,IAAI,IAAG,IAAI;AACrB,gBAAA,MAAM,EAAE,GAAG,CAAC,MAAM,IAAG;aACtB;AACH,QAAA,CAAC,CACF,EACD,UAAU,CACR,CAAC,GAAG,KAAI;AACN,YAAA,OAAO,EAAE,CACP;AACE,gBAAA,IAAI,EAAE,IAAW;AACjB,gBAAA,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,GAAE,GAAG,GAAG,CAAC,GAAG;AACvC,aAAA,CACF;QACH,CAAC,CACF,CACF;IACH;8GAvDW,YAAY,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAZ,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,cAFX,MAAM,EAAA,CAAA,CAAA;;2FAEP,YAAY,EAAA,UAAA,EAAA,CAAA;kBAHxB,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE;AACb,iBAAA;;;MCiCY,oBAAoB,CAAA;AAkB/B,IAAA,WAAA,CACqB,OAAqB,EAAA;QAArB,IAAA,CAAA,OAAO,GAAP,OAAO;QAjBZ,IAAA,CAAA,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAwB;QACzC,IAAA,CAAA,eAAe,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAwB;AAE/C,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAAU,IAAI,mDAAC;AAC/B,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAU,KAAK,qDAAC;AAClC,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAmB,EAAE,uDAAC;AAC1C,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAwB,IAAI,yDAAC;AAGhD,QAAA,IAAA,CAAA,QAAQ,GAAuB;AAChD,YAAA,IAAI,EAAE,CAAC;AACP,YAAA,QAAQ,EAAE,EAAE;AACZ,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,aAAa,EAAE;SAChB;QAKC,MAAM,CACJ,MAAK;AACH,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC;AACtB,YAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,SAAS;AACnC,YAAA,IAAI,CAAC,QAAQ,CAAC,eAAe,GAAG,SAAS;AAEzC,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;gBACpB,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE;YAC5C;AAEA,YAAA,IAAI,IAAI,CAAC,eAAe,EAAE,EAAE;gBAC1B,IAAI,CAAC,QAAQ,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE;YACxD;YAEA,SAAS,CACP,MAAK;AACH,gBAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;AACtB,gBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC;AACxB,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;AAEzB,gBAAA,IAAI,CAAC,GAAG,EAAE,WAAW,EAAE;gBACvB,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,CAAC,CACF;AACH,QAAA,CAAC,CACF;IACH;IAEO,WAAW,GAAA;AAChB,QAAA,IAAI,CAAC,GAAG,EAAE,WAAW,EAAE;IACzB;IAEO,QAAQ,GAAA;QACb,IACE,IAAI,CAAC,SAAS,EAAE;AAChB,YAAA,CAAC,IAAI,CAAC,OAAO,EAAE,EACf;YACA;QACF;AACA,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC;AAExB,QAAA,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,SAAS,CACpD;YACE,KAAK,EAAE,MAAK;AACV,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;YAC3B,CAAC;AACD,YAAA,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,iBAAiB,EAAE,IAAI,EAAE,EAAC,KAAI;gBAC7C,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAC/B,CAAC,GAAG,EAAE,IAAI,KAAI;oBACZ,IAAI,CAAC,IAAI,EAAE;AACT,wBAAA,OAAO,GAAG;oBACZ;oBAEA,GAAG,CAAC,IAAI,CACN;AACE,wBAAA,GAAG,IAAI;AACP,wBAAA,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;wBAC7B,WAAW,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;AAC5C,qBAAA,CACF;AACD,oBAAA,OAAO,GAAG;gBACZ,CAAC,EACD,EAAsB,CACvB;AACD,gBAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAS,CAAC;gBAEjE,IAAI,CAAC,WAAW,CAAC,MAAM,CACrB,CAAC,IAAI,KAAI;oBACP,OAAO;AACL,wBAAA,GAAG,IAAI;AACP,wBAAA,GAAG;qBACJ;AACH,gBAAA,CAAC,CACF;AAED,gBAAA,IAAI,CAAC,QAAQ,CAAC,IAAK,EAAE;AACrB,gBAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;YAC3B;AACD,SAAA,CACF;IACH;AAEU,IAAA,YAAY,CAAC,KAAiB,EAAA;QACtC,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE;QACrD,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE;AAExD,QAAA,IACE,WAAW,CAAC,QAAQ,CAAC,SAAS,CAAC;AAC/B,YAAA,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,EAC7B;AACA,YAAA,OAAO,wBAAwB;QACjC;AAEA,QAAA,IACE,WAAW,CAAC,QAAQ,CAAC,UAAU,CAAC;AAChC,YAAA,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAC9B;AACA,YAAA,OAAO,mBAAmB;QAC5B;AAEA,QAAA,IACE,WAAW,CAAC,QAAQ,CAAC,QAAQ,CAAC;AAC9B,YAAA,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAC5B;AACA,YAAA,OAAO,cAAc;QACvB;AACA,QAAA,OAAO,eAAe;IACxB;AAEU,IAAA,cAAc,CAAC,IAAS,EAAA;AAChC,QAAA,IACE,CAAC,IAAI;YACL,CAAC,IAAI,CAAC,OAAO;AACb,YAAA,CAAC,IAAI,CAAC,OAAO,EACb;AACA,YAAA,OAAO,EAAE;QACX;AAEA,QAAA,IAAI;YACF,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;YACxC,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;AAExC,YAAA,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAChC,CAAC,GAAG,KAAI;gBACN,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,gBAAgB,CAAC;AACtG,YAAA,CAAC,CACF,CAAC,GAAG,CACH,CAAC,GAAG,KAAI;gBACN,OAAO;AACL,oBAAA,KAAK,EAAE,GAAG;oBACV,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;oBACxC,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC;iBACxC;AACH,YAAA,CAAC,CACF;QACH;QACA,OAAO,KAAK,EAAE;AACZ,YAAA,OAAO,EAAE;QACX;IACF;AAEU,IAAA,WAAW,CAAC,KAAU,EAAA;AAC9B,QAAA,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS;AAAE,YAAA,OAAO,GAAG;QACrD,IAAI,OAAO,KAAK,KAAK,QAAQ;AAAE,YAAA,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;AAC3D,QAAA,OAAO,MAAM,CAAC,KAAK,CAAC;IACtB;8GAtKW,oBAAoB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAA,YAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,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,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,SAAA,EAZpB;AACT,YAAA,YAAY,CACV;gBACE,YAAY;gBACZ,aAAa;gBACb,iBAAiB;gBACjB,sBAAsB;gBACtB,yBAAyB;aAC1B;SAEJ,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxCH,usHAkFA,4CD1DI,MAAM,EAAA,QAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,KAAA,EAAA,MAAA,EAAA,aAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAEN,kBAAkB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAClB,yBAAyB,sJAFzB,QAAQ,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,sBAAA,EAAA,CAAA,MAAA,CAAA,OAAA,kEAAA,CAAA,CAAA,IAAA,CAAA,CAAA,IAAA,CAAA,CAAA,qBAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA;;gGAiBC,oBAAoB,EAAA,mBAAA,EAAA,MAAA,CAAA,OAAA,kEAAA,CAAA,CAAA,IAAA,CAAA,CAAA,IAAA,CAAA,CAAA,qBAAA,CAAA,CAAA,EAAA,eAAA,EAAA,qBAAA,KAAA,EAAA,UAAA,EAAA,CAAA;sBAxBhC,SAAS;AACI,gBAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,YACN,eAAe,EAAA,eAAA,EAER,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC;4BACP,MAAM;4BACN,QAAQ;4BACR,kBAAkB;4BAClB,yBAAyB;4BACzB;yBACD,EAAA,SAAA,EACU;AACT,4BAAA,YAAY,CACV;gCACE,YAAY;gCACZ,aAAa;gCACb,iBAAiB;gCACjB,sBAAsB;gCACtB,yBAAyB;6BAC1B;AAEJ,yBAAA,EAAA,QAAA,EAAA,usHAAA,EAAA;;;AExCH;;AAEG;;;;"}

package/fesm2022/unipin-angular-applet-auth.mjs

@@ -108,10 +108,10 @@ class ProfileService {
       `,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ProfileService, deps: [{ token: i1.GqlParser }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ProfileService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProfileService, deps: [{ token: i1.GqlParser }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProfileService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ProfileService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: ProfileService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -242,10 +242,10 @@ class AuthService {
             localStorage.setItem('refreshToken', AuthService.refreshToken);
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AuthService, deps: [{ token: i1.GqlParser }, { token: ProfileService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AuthService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthService, deps: [{ token: i1.GqlParser }, { token: ProfileService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AuthService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -378,10 +378,10 @@ class AuthResolver {
             buffer = chars.indexOf(buffer);
         return output;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AuthResolver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AuthResolver, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthResolver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthResolver, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AuthResolver, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AuthResolver, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -456,10 +456,10 @@ class PermissionService {
       `
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PermissionService, deps: [{ token: i1.GqlParser }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PermissionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PermissionService, deps: [{ token: i1.GqlParser }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PermissionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PermissionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PermissionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -582,10 +582,10 @@ class PermissionDirective {
         }
         this.viewContainer.clear();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PermissionDirective, deps: [{ token: PermissionService }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.6", type: PermissionDirective, isStandalone: true, selector: "[hasPermission]", inputs: { hasPermission: "hasPermission" }, exportAs: ["hasPermission"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PermissionDirective, deps: [{ token: PermissionService }, { token: i0.TemplateRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: PermissionDirective, isStandalone: true, selector: "[hasPermission]", inputs: { hasPermission: "hasPermission" }, exportAs: ["hasPermission"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PermissionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PermissionDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -597,8 +597,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             }] } });
 
 class UnauthorizedPage {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnauthorizedPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: UnauthorizedPage, isStandalone: true, selector: "up-unauthorized", host: { classAttribute: "flex flex-col items-center justify-center size-full gap-4 p-5 select-none" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UnauthorizedPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: UnauthorizedPage, isStandalone: true, selector: "up-unauthorized", host: { classAttribute: "flex flex-col items-center justify-center size-full gap-4 p-5 select-none" }, providers: [
             provideIcons({
                 matLockRound
             })
@@ -614,7 +614,7 @@ class UnauthorizedPage {
     <p class="text-center">Please log in or re-check your permissions.</p>
   `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UnauthorizedPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UnauthorizedPage, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -684,8 +684,8 @@ class LoadingPage {
     ngOnDestroy() {
         this.sub?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoadingPage, deps: [{ token: LOADING_CONFIG }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: LoadingPage, isStandalone: true, selector: "up-loading", host: { classAttribute: "flex flex-col items-center gap-6 p-5 justify-center size-full select-none" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LoadingPage, deps: [{ token: LOADING_CONFIG }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }, { token: PermissionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: LoadingPage, isStandalone: true, selector: "up-loading", host: { classAttribute: "flex flex-col items-center gap-6 p-5 justify-center size-full select-none" }, ngImport: i0, template: `
     <up-spinner class="size-10" />
     
     <h3 class="text-center text-lg lg:text-2xl font-bold">
@@ -693,7 +693,7 @@ class LoadingPage {
     </h3>
   `, isInline: true, dependencies: [{ kind: "component", type: UpSpinnerComponent, selector: "up-spinner", inputs: ["stokeWidth", "inlineClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: LoadingPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LoadingPage, decorators: [{
             type: Component,
             args: [{
                     standalone: true,

package/fesm2022/unipin-angular-applet-avatar.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, effect, Directive } from '@angular/core';
+import { input, computed, effect, HostListener, Directive } from '@angular/core';
 import { up, formatInitial } from '@unipin/angular-applet/common';
 
 class UpAvatarDirective {
@@ -9,19 +9,33 @@ class UpAvatarDirective {
         this.initialText = input('', { ...(ngDevMode ? { debugName: "initialText" } : {}), alias: 'initial' });
         this.inlineClass = input('', { ...(ngDevMode ? { debugName: "inlineClass" } : {}), alias: 'class' });
         this._computedClass = computed(() => {
-            return up('inline-flex items-center justify-center rounded-full overflow-hidden select-none size-16', this.initialText() ? 'bg-gray-400 text-white font-semibold text-3xl' : 'object-cover', this.inlineClass());
+            return up('inline-flex items-center justify-center rounded-full overflow-hidden select-none size-16 relative', this.initialText() ? 'bg-gray-400 text-white font-semibold text-3xl' : 'object-cover', this.inlineClass());
         }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
         effect(() => {
-            if (this.initialText()) {
-                const el = this.el.nativeElement;
+            const el = this.el.nativeElement;
+            if (this.initialText() &&
+                !el.getAttribute('src')) {
                 this.renderer.setProperty(el, 'textContent', formatInitial(this.initialText()));
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpAvatarDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: UpAvatarDirective, isStandalone: true, selector: "[upAvatar]", inputs: { initialText: { classPropertyName: "initialText", publicName: "initial", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, exportAs: ["upAvatar"], ngImport: i0 }); }
+    setFallback() {
+        const el = this.el.nativeElement;
+        const parent = el.parentNode;
+        if (!parent) {
+            return;
+        }
+        const t = this.initialText;
+        const div = this.renderer.createElement('div');
+        this.renderer.setAttribute(div, 'class', el.className);
+        this.renderer.setProperty(div, 'textContent', formatInitial(t));
+        this.renderer.insertBefore(parent, div, el);
+        this.renderer.removeChild(parent, el);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpAvatarDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: UpAvatarDirective, isStandalone: true, selector: "[upAvatar]", inputs: { initialText: { classPropertyName: "initialText", publicName: "initial", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "error": "setFallback()" }, properties: { "class": "_computedClass()" } }, exportAs: ["upAvatar"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpAvatarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpAvatarDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -31,7 +45,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[class]': '_computedClass()',
                     },
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { initialText: [{ type: i0.Input, args: [{ isSignal: true, alias: "initial", required: false }] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { initialText: [{ type: i0.Input, args: [{ isSignal: true, alias: "initial", required: false }] }], inlineClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], setFallback: [{
+                type: HostListener,
+                args: ['error']
+            }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/unipin-angular-applet-avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"unipin-angular-applet-avatar.mjs","sources":["../../../projects/unipin-angular/avatar/avatar.directive.ts","../../../projects/unipin-angular/avatar/unipin-angular-applet-avatar.ts"],"sourcesContent":["import { Directive, ElementRef, Renderer2, effect, computed, input } from '@angular/core';\nimport { ClassValue } from 'clsx';\nimport { up, formatInitial } from '@unipin/angular-applet/common';\n\n@Directive({\n  standalone: true,\n  exportAs: 'upAvatar',\n  selector: '[upAvatar]',\n  host: {\n    '[class]': '_computedClass()',\n  },\n})\nexport class UpAvatarDirective {\n\n  public readonly initialText = input<string>('', { alias: 'initial' });\n  public readonly inlineClass = input<ClassValue>('', { alias: 'class' });\n\n  protected readonly _computedClass = computed(\n    () => {\n      return up(\n        'inline-flex items-center justify-center rounded-full overflow-hidden select-none size-16',\n        this.initialText()? 'bg-gray-400 text-white font-semibold text-3xl' : 'object-cover',\n        this.inlineClass()\n      );\n    }\n  );\n\n  constructor(\n    protected readonly el: ElementRef,\n    protected readonly renderer: Renderer2\n  ) {\n    effect(\n      () => {\n        if (this.initialText()) {\n          const el = this.el.nativeElement as HTMLElement;\n          \n          this.renderer.setProperty(\n            el, \n            'textContent', \n            formatInitial(this.initialText())\n          );\n        }\n      }\n    );\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAYa,iBAAiB,CAAA;IAe5B,WAAA,CACqB,EAAc,EACd,QAAmB,EAAA;QADnB,IAAA,CAAA,EAAE,GAAF,EAAE;QACF,IAAA,CAAA,QAAQ,GAAR,QAAQ;QAfb,IAAA,CAAA,WAAW,GAAG,KAAK,CAAS,EAAE,wDAAI,KAAK,EAAE,SAAS,EAAA,CAAG;QACrD,IAAA,CAAA,WAAW,GAAG,KAAK,CAAa,EAAE,wDAAI,KAAK,EAAE,OAAO,EAAA,CAAG;AAEpD,QAAA,IAAA,CAAA,cAAc,GAAG,QAAQ,CAC1C,MAAK;YACH,OAAO,EAAE,CACP,0FAA0F,EAC1F,IAAI,CAAC,WAAW,EAAE,GAAE,+CAA+C,GAAG,cAAc,EACpF,IAAI,CAAC,WAAW,EAAE,CACnB;AACH,QAAA,CAAC,0DACF;QAMC,MAAM,CACJ,MAAK;AACH,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE;AACtB,gBAAA,MAAM,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,aAA4B;AAE/C,gBAAA,IAAI,CAAC,QAAQ,CAAC,WAAW,CACvB,EAAE,EACF,aAAa,EACb,aAAa,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAClC;YACH;AACF,QAAA,CAAC,CACF;IACH;8GAhCW,iBAAiB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAR7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE,kBAAkB;AAC9B,qBAAA;AACF,iBAAA;;;ACXD;;AAEG;;;;"}
+{"version":3,"file":"unipin-angular-applet-avatar.mjs","sources":["../../../projects/unipin-angular/avatar/avatar.directive.ts","../../../projects/unipin-angular/avatar/unipin-angular-applet-avatar.ts"],"sourcesContent":["import { Directive, ElementRef, Renderer2, effect, computed, input, HostListener } from '@angular/core';\nimport { ClassValue } from 'clsx';\nimport { formatInitial, up } from '@unipin/angular-applet/common';\n\n\n@Directive({\n  standalone: true,\n  exportAs: 'upAvatar',\n  selector: '[upAvatar]',\n  host: {\n    '[class]': '_computedClass()',\n  },\n})\nexport class UpAvatarDirective {\n\n  public readonly initialText = input<string>('', { alias: 'initial' });\n  public readonly inlineClass = input<ClassValue>('', { alias: 'class' });\n  \n  protected readonly _computedClass = computed(\n    () => {\n      return up(\n        'inline-flex items-center justify-center rounded-full overflow-hidden select-none size-16 relative',\n        this.initialText()? 'bg-gray-400 text-white font-semibold text-3xl' : 'object-cover',\n        this.inlineClass()\n      );\n    }\n  );\n\n  constructor(\n    protected readonly el: ElementRef<HTMLElement>,\n    protected readonly renderer: Renderer2\n  ) {\n    effect(\n      () => {\n        const el = this.el.nativeElement;\n        \n        if (\n          this.initialText() &&\n          !el.getAttribute('src')\n        ) {\n          this.renderer.setProperty(\n            el, \n            'textContent', \n            formatInitial(this.initialText())\n          );\n        }\n      }\n    );\n  }\n\n  @HostListener('error')\n  public setFallback(): void{    \n    const el = this.el.nativeElement;\n\n    const parent = el.parentNode;\n    if (!parent) {\n      return;\n    }\n\n    const t: any = this.initialText;\n    const div = this.renderer.createElement('div');\n\n    this.renderer.setAttribute(div, 'class', el.className);\n    this.renderer.setProperty(div, 'textContent', formatInitial(t));\n\n    this.renderer.insertBefore(parent, div, el);\n    this.renderer.removeChild(parent, el);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/unipin-angular-applet-badge.mjs

@@ -27,10 +27,10 @@ class UpBadgeDirective {
             }), this.inlineClass());
         }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: UpBadgeDirective, isStandalone: true, selector: "[upBadge]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, exportAs: ["upBadge"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: UpBadgeDirective, isStandalone: true, selector: "[upBadge]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, exportAs: ["upBadge"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpBadgeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpBadgeDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,

package/fesm2022/unipin-angular-applet-buttons.mjs

@@ -41,10 +41,10 @@ class UpButtonDirective {
             }), this.inlineClass());
         }, ...(ngDevMode ? [{ debugName: "_computedClass" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: UpButtonDirective, isStandalone: true, selector: "[upButton]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, exportAs: ["upButton"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: UpButtonDirective, isStandalone: true, selector: "[upButton]", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, exportAs: ["upButton"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -91,8 +91,8 @@ class UpSplitButtonComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: UpSplitButtonComponent, isStandalone: true, selector: "up-split-button", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, host: { classAttribute: "flex" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: UpSplitButtonComponent, isStandalone: true, selector: "up-split-button", inputs: { activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeIndex: "activeIndexChange" }, host: { classAttribute: "flex" }, providers: [
             provideIcons({
                 matCheckRound,
                 matArrowDropDownRound
@@ -159,7 +159,7 @@ class UpSplitButtonComponent {
     }
   `, isInline: true, dependencies: [{ kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: UpButtonDirective, selector: "[upButton]", inputs: ["size", "variant", "class"], exportAs: ["upButton"] }, { kind: "component", type: UpPopoverComponent, selector: "up-popover", inputs: ["placement", "alignment", "placementOffset", "alignmentOffset"] }, { kind: "directive", type: UpPopoverCloseDirective, selector: "[upPopoverClose]", exportAs: ["upPopoverClose"] }, { kind: "directive", type: UpPopoverTriggerDirective, selector: "[upPopoverTrigger]", exportAs: ["upPopoverTrigger"] }, { kind: "directive", type: UpPopoverContentDirective, selector: "[upPopoverContent]", inputs: ["class"], exportAs: ["upPopoverContent"] }, { kind: "directive", type: UpPopoverContentRefDirective, selector: "[upPopoverContentRef]", exportAs: ["upPopoverContentRef"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: UpSplitButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UpSplitButtonComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,