@unipin/angular-applet 21.1.0 → 21.1.2

package/fesm2022/unipin-angular-applet-alert-dialog.mjs

@@ -5,7 +5,6 @@ import { Validators, ReactiveFormsModule } from '@angular/forms';
 import { UpButtonDirective } from '@unipin/angular-applet/buttons';
 import * as i1$1 from '@unipin/angular-applet/dialog';
 import { UpDialogRef, injectDialogContext } from '@unipin/angular-applet/dialog';
-import { UpCheckboxDirective, UpPasswordComponent, UpInputDirective, UpFormFieldComponent } from '@unipin/angular-applet/forms';
 
 class UpAlertComponent {
     constructor(fb) {
@@ -42,8 +41,8 @@ class UpAlertComponent {
         }
         this.dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UpAlertComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: UpAlertComponent, isStandalone: true, selector: "up-alert-dialog", host: { properties: { "attr.data-state": "state()" }, classAttribute: "\n      bg-background shadow-lg rounded-lg relative z-50 grid gap-4 outline-none overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%] data-[state=closed]:duration-200 data-[state=open]:duration-200 w-[90vw] max-w-125 mx-auto p-5\n    " }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: UpAlertComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: UpAlertComponent, isStandalone: true, selector: "up-alert-dialog", host: { properties: { "attr.data-state": "state()" }, classAttribute: "\n      bg-background shadow-lg rounded-lg relative z-50 grid gap-4 outline-none overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%] data-[state=closed]:duration-200 data-[state=open]:duration-200 w-[90vw] max-w-125 mx-auto p-5\n    " }, ngImport: i0, template: `
     <!-- Header -->
     <div class="flex flex-col gap-2 text-center sm:text-left">
       <h2 class="text-lg font-semibold">
@@ -61,15 +60,18 @@ class UpAlertComponent {
       fields && 
       fields.length > 0
     ) {
-      <form [formGroup]="form!" class="flex flex-col gap-6 mb-4 mt-5">
-        @for (field of fields; track $index) {
-          <up-form-field
-            [name]="field.name"
-            [label]="field.label"
-          >
-            @switch (field.type) { 
-              @case ('checkbox') {
-                @defer {
+      @defer (on immediate) {
+        <form 
+          class="flex flex-col gap-6 mb-4 mt-5"
+          [formGroup]="form!"
+        >
+          @for (field of fields; track $index) {
+            <up-form-field
+              [name]="field.name"
+              [label]="field.label"
+            >
+              @switch (field.type) { 
+                @case ('checkbox') {
                   <input 
                     upCheckbox 
                     type="checkbox"
@@ -77,22 +79,18 @@ class UpAlertComponent {
                     [required]="field.required?? false"
                   />
                 }
-              }
-
-              @case ('password') {
-                @defer {
+  
+                @case ('password') {
                   <up-password 
                     [formControlName]="field.name" 
                     [placeholder]="field.placeholder"
                     [required]="field.required?? false"
                   />
                 }
-              }
-
-              <!-- TODO: Select type -->
-
-              @default {
-                @defer {
+  
+                <!-- TODO: Select type -->
+  
+                @default {
                   <input
                     upInput
                     [type]="field.type"
@@ -100,12 +98,12 @@ class UpAlertComponent {
                     [placeholder]="field.placeholder"
                     [required]="field.required?? false"
                   />
-                }
-              } 
-            }
-          </up-form-field>
-        }
-      </form>
+                } 
+              }
+            </up-form-field>
+          }
+        </form>
+      }
     }
 
     <!-- Footer -->
@@ -121,29 +119,29 @@ class UpAlertComponent {
         </button>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: UpButtonDirective, selector: "[upButton]", inputs: ["size", "variant", "class"], exportAs: ["upButton"] }, { kind: "component", type: UpFormFieldComponent, selector: "up-form-field", inputs: ["name", "hint", "label", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.CheckboxRequiredValidator, i1.FormControlName, UpCheckboxDirective], () => [i1.NgControlStatus, i1.RequiredValidator, i1.FormControlName, UpPasswordComponent], () => [i1.DefaultValueAccessor, i1.NgControlStatus, i1.RequiredValidator, i1.FormControlName, UpInputDirective]] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: UpButtonDirective, selector: "[upButton]", inputs: ["size", "variant", "class"], exportAs: ["upButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.RequiredValidator, i1.CheckboxRequiredValidator, i1.FormGroupDirective, i1.FormControlName, import('@unipin/angular-applet/forms').then(m => m.UpInputDirective), import('@unipin/angular-applet/forms').then(m => m.UpCheckboxDirective), import('@unipin/angular-applet/forms').then(m => m.UpPasswordComponent), import('@unipin/angular-applet/forms').then(m => m.UpFormFieldComponent)]] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UpAlertComponent, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: true,
-                    selector: 'up-alert-dialog',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        '[attr.data-state]': 'state()',
-                        'class': `
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.2", ngImport: i0, type: UpAlertComponent, resolveDeferredDeps: () => [import('@unipin/angular-applet/forms').then(m => m.UpInputDirective), import('@unipin/angular-applet/forms').then(m => m.UpCheckboxDirective), import('@unipin/angular-applet/forms').then(m => m.UpPasswordComponent), import('@unipin/angular-applet/forms').then(m => m.UpFormFieldComponent)], resolveMetadata: (UpInputDirective, UpCheckboxDirective, UpPasswordComponent, UpFormFieldComponent) => ({ decorators: [{
+                type: Component,
+                args: [{
+                        standalone: true,
+                        selector: 'up-alert-dialog',
+                        changeDetection: ChangeDetectionStrategy.OnPush,
+                        host: {
+                            '[attr.data-state]': 'state()',
+                            'class': `
       bg-background shadow-lg rounded-lg relative z-50 grid gap-4 outline-none overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%] data-[state=closed]:duration-200 data-[state=open]:duration-200 w-[90vw] max-w-125 mx-auto p-5
     `,
-                    },
-                    imports: [
-                        ReactiveFormsModule,
-                        UpInputDirective,
-                        UpButtonDirective,
-                        UpCheckboxDirective,
-                        UpPasswordComponent,
-                        UpFormFieldComponent,
-                    ],
-                    template: `
+                        },
+                        imports: [
+                            ReactiveFormsModule,
+                            UpInputDirective,
+                            UpButtonDirective,
+                            UpCheckboxDirective,
+                            UpPasswordComponent,
+                            UpFormFieldComponent,
+                        ],
+                        template: `
     <!-- Header -->
     <div class="flex flex-col gap-2 text-center sm:text-left">
       <h2 class="text-lg font-semibold">
@@ -161,15 +159,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
       fields && 
       fields.length > 0
     ) {
-      <form [formGroup]="form!" class="flex flex-col gap-6 mb-4 mt-5">
-        @for (field of fields; track $index) {
-          <up-form-field
-            [name]="field.name"
-            [label]="field.label"
-          >
-            @switch (field.type) { 
-              @case ('checkbox') {
-                @defer {
+      @defer (on immediate) {
+        <form 
+          class="flex flex-col gap-6 mb-4 mt-5"
+          [formGroup]="form!"
+        >
+          @for (field of fields; track $index) {
+            <up-form-field
+              [name]="field.name"
+              [label]="field.label"
+            >
+              @switch (field.type) { 
+                @case ('checkbox') {
                   <input 
                     upCheckbox 
                     type="checkbox"
@@ -177,22 +178,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                     [required]="field.required?? false"
                   />
                 }
-              }
-
-              @case ('password') {
-                @defer {
+  
+                @case ('password') {
                   <up-password 
                     [formControlName]="field.name" 
                     [placeholder]="field.placeholder"
                     [required]="field.required?? false"
                   />
                 }
-              }
-
-              <!-- TODO: Select type -->
-
-              @default {
-                @defer {
+  
+                <!-- TODO: Select type -->
+  
+                @default {
                   <input
                     upInput
                     [type]="field.type"
@@ -200,12 +197,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
                     [placeholder]="field.placeholder"
                     [required]="field.required?? false"
                   />
-                }
-              } 
-            }
-          </up-form-field>
-        }
-      </form>
+                } 
+              }
+            </up-form-field>
+          }
+        </form>
+      }
     }
 
     <!-- Footer -->
@@ -222,8 +219,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
       }
     </div>
   `
-                }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }] });
+                    }]
+            }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: null }) });
 
 class UpAlertController {
     constructor(dialog) {
@@ -251,10 +248,10 @@ class UpAlertController {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UpAlertController, deps: [{ token: i1$1.UpDialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UpAlertController, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: UpAlertController, deps: [{ token: i1$1.UpDialogService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: UpAlertController, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UpAlertController, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: UpAlertController, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/fesm2022/unipin-angular-applet-alert-dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"unipin-angular-applet-alert-dialog.mjs","sources":["../../../projects/unipin-angular/alert-dialog/components/alert-dialog.component.ts","../../../projects/unipin-angular/alert-dialog/services/alert-controller.service.ts","../../../projects/unipin-angular/alert-dialog/unipin-angular-applet-alert-dialog.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';\nimport { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { UpButtonDirective } from '@unipin/angular-applet/buttons';\nimport { injectDialogContext, UpDialogRef } from '@unipin/angular-applet/dialog';\nimport { UpInputDirective, UpCheckboxDirective, UpFormFieldComponent, UpPasswordComponent } from '@unipin/angular-applet/forms';\nimport { AlertOptions } from '../types/alert-options.type';\n\n@Component({\n  standalone: true,\n  selector: 'up-alert-dialog',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-state]': 'state()',\n    'class': `\n      bg-background shadow-lg rounded-lg relative z-50 grid gap-4 outline-none overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%] data-[state=closed]:duration-200 data-[state=open]:duration-200 w-[90vw] max-w-125 mx-auto p-5\n    `,\n  },\n  imports: [\n    ReactiveFormsModule,\n    UpInputDirective,\n    UpButtonDirective, \n    UpCheckboxDirective,\n    UpPasswordComponent,\n    UpFormFieldComponent,\n  ],\n  template: `\n    <!-- Header -->\n    <div class=\"flex flex-col gap-2 text-center sm:text-left\">\n      <h2 class=\"text-lg font-semibold\">\n        {{ opts.title }}\n      </h2>\n      \n      <p class=\"text-muted-foreground text-sm wrap-break-word\">\n        {{ opts.description }}\n      </p>\n    </div>\n\n    <!-- Fields -->\n    @let fields = opts.fields;\n    @if (\n      fields && \n      fields.length > 0\n    ) {\n      <form [formGroup]=\"form!\" class=\"flex flex-col gap-6 mb-4 mt-5\">\n        @for (field of fields; track $index) {\n          <up-form-field\n            [name]=\"field.name\"\n            [label]=\"field.label\"\n          >\n            @switch (field.type) { \n              @case ('checkbox') {\n                @defer {\n                  <input \n                    upCheckbox \n                    type=\"checkbox\"\n                    [formControlName]=\"field.name\" \n                    [required]=\"field.required?? false\"\n                  />\n                }\n              }\n\n              @case ('password') {\n                @defer {\n                  <up-password \n                    [formControlName]=\"field.name\" \n                    [placeholder]=\"field.placeholder\"\n                    [required]=\"field.required?? false\"\n                  />\n                }\n              }\n\n              <!-- TODO: Select type -->\n\n              @default {\n                @defer {\n                  <input\n                    upInput\n                    [type]=\"field.type\"\n                    [formControlName]=\"field.name\"\n                    [placeholder]=\"field.placeholder\"\n                    [required]=\"field.required?? false\"\n                  />\n                }\n              } \n            }\n          </up-form-field>\n        }\n      </form>\n    }\n\n    <!-- Footer -->\n    <div class=\"flex w-full flex-col-reverse gap-2 sm:flex-row sm:justify-end\">\n      @for (btn of opts.buttons; track $index) {\n        <button\n          upButton\n          [variant]=\"typeof btn === 'string'? undefined : btn.variant\"\n          [class]=\"(typeof btn === 'string'? '' : btn.additionalClass) + ' flex-1'\"\n          (click)=\"clickBtn($index)\"\n        >\n          {{ typeof btn === 'string'? btn : btn.text }}\n        </button>\n      }\n    </div>\n  `\n})\nexport class UpAlertComponent {\n\n  public readonly dialogRef = inject(UpDialogRef);\n  public readonly opts = injectDialogContext<AlertOptions>();\n\n  public readonly state = computed(() => this.dialogRef?.state()?? 'closed');\n\n  public form?: FormGroup;\n\n  constructor(\n    protected fb: FormBuilder\n  ) {\n    const fields = this.opts.fields;\n    \n    if (fields) {\n      this.form = this.fb.group({ });\n      \n      fields.forEach(\n        (field) => {\n          const defaultValue = field.type === 'checkbox'? false : null;\n          \n          this.form!.addControl(\n            field.name,\n            this.fb.control(\n              field.value?? defaultValue, \n              field.required? Validators.required : []\n            )\n          );\n        }  \n      );\n    }\n  }\n\n  public clickBtn(index: number): void {\n    const btn = this.opts.buttons[index];\n  \n    if (\n      btn && \n      typeof btn !== 'string' && \n      btn.handler\n    ) {\n      let value: undefined | Record<string, any> = undefined;\n  \n      if (this.form) {\n        value = { ...this.form.getRawValue() };\n        \n        this.opts.fields?.forEach(\n          (field) => {\n            if (\n              field.type === 'number' && \n              value![field.name] && \n              !isNaN(value![field.name])\n            ) {\n              value![field.name] = Number(value![field.name]);\n            }\n          }\n        );\n      }\n      btn.handler(value);\n    }\n    this.dialogRef.close();\n  }\n}\n","import { Injectable } from '@angular/core';\nimport { UpDialogRef, UpDialogService } from '@unipin/angular-applet/dialog';\nimport { AlertOptions } from '../types/alert-options.type';\nimport { UpAlertComponent } from '../components/alert-dialog.component';\n\n@Injectable({ \n  providedIn: 'root' \n})\nexport class UpAlertController {\n\n  protected readonly MAX_FIELDS = 3;\n  protected readonly MAX_BUTTONS = 2;\n\n  constructor(protected dialog: UpDialogService) {}\n\n  public show(options: AlertOptions, canDismiss: boolean = false): UpDialogRef{\n    if (\n      options.fields && \n      options.fields.length > this.MAX_FIELDS\n    ) {\n      throw new Error(\n        `AlertService: \"fields\" exceeded the maximum allowed (${ this.MAX_FIELDS }).`\n      );\n    }\n\n    if (\n      options.buttons && \n      options.buttons.length > this.MAX_BUTTONS\n    ) {\n      throw new Error(\n        `AlertService: \"buttons\" exceeded the maximum allowed (${ this.MAX_BUTTONS }).`\n      );\n    }\n\n    return this.dialog.open(\n      {\n        content: UpAlertComponent,\n        context: options,\n        options: {\n          hasBackdrop: true,\n          disableClose: !canDismiss,\n          closeOnBackdropClick: canDismiss,\n          closeOnOutsidePointerEvents: canDismiss\n        }\n      }\n    );\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1"],"mappings":"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"}
+{"version":3,"file":"unipin-angular-applet-alert-dialog.mjs","sources":["../../../projects/unipin-angular/alert-dialog/components/alert-dialog.component.ts","../../../projects/unipin-angular/alert-dialog/services/alert-controller.service.ts","../../../projects/unipin-angular/alert-dialog/unipin-angular-applet-alert-dialog.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject } from '@angular/core';\nimport { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { UpButtonDirective } from '@unipin/angular-applet/buttons';\nimport { injectDialogContext, UpDialogRef } from '@unipin/angular-applet/dialog';\nimport { UpInputDirective, UpCheckboxDirective, UpFormFieldComponent, UpPasswordComponent } from '@unipin/angular-applet/forms';\nimport { AlertOptions } from '../types/alert-options.type';\n\n@Component({\n  standalone: true,\n  selector: 'up-alert-dialog',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[attr.data-state]': 'state()',\n    'class': `\n      bg-background shadow-lg rounded-lg relative z-50 grid gap-4 outline-none overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%] data-[state=closed]:duration-200 data-[state=open]:duration-200 w-[90vw] max-w-125 mx-auto p-5\n    `,\n  },\n  imports: [\n    ReactiveFormsModule,\n    UpInputDirective,\n    UpButtonDirective, \n    UpCheckboxDirective,\n    UpPasswordComponent,\n    UpFormFieldComponent,\n  ],\n  template: `\n    <!-- Header -->\n    <div class=\"flex flex-col gap-2 text-center sm:text-left\">\n      <h2 class=\"text-lg font-semibold\">\n        {{ opts.title }}\n      </h2>\n      \n      <p class=\"text-muted-foreground text-sm wrap-break-word\">\n        {{ opts.description }}\n      </p>\n    </div>\n\n    <!-- Fields -->\n    @let fields = opts.fields;\n    @if (\n      fields && \n      fields.length > 0\n    ) {\n      @defer (on immediate) {\n        <form \n          class=\"flex flex-col gap-6 mb-4 mt-5\"\n          [formGroup]=\"form!\"\n        >\n          @for (field of fields; track $index) {\n            <up-form-field\n              [name]=\"field.name\"\n              [label]=\"field.label\"\n            >\n              @switch (field.type) { \n                @case ('checkbox') {\n                  <input \n                    upCheckbox \n                    type=\"checkbox\"\n                    [formControlName]=\"field.name\" \n                    [required]=\"field.required?? false\"\n                  />\n                }\n  \n                @case ('password') {\n                  <up-password \n                    [formControlName]=\"field.name\" \n                    [placeholder]=\"field.placeholder\"\n                    [required]=\"field.required?? false\"\n                  />\n                }\n  \n                <!-- TODO: Select type -->\n  \n                @default {\n                  <input\n                    upInput\n                    [type]=\"field.type\"\n                    [formControlName]=\"field.name\"\n                    [placeholder]=\"field.placeholder\"\n                    [required]=\"field.required?? false\"\n                  />\n                } \n              }\n            </up-form-field>\n          }\n        </form>\n      }\n    }\n\n    <!-- Footer -->\n    <div class=\"flex w-full flex-col-reverse gap-2 sm:flex-row sm:justify-end\">\n      @for (btn of opts.buttons; track $index) {\n        <button\n          upButton\n          [variant]=\"typeof btn === 'string'? undefined : btn.variant\"\n          [class]=\"(typeof btn === 'string'? '' : btn.additionalClass) + ' flex-1'\"\n          (click)=\"clickBtn($index)\"\n        >\n          {{ typeof btn === 'string'? btn : btn.text }}\n        </button>\n      }\n    </div>\n  `\n})\nexport class UpAlertComponent {\n\n  public readonly dialogRef = inject(UpDialogRef);\n  public readonly opts = injectDialogContext<AlertOptions>();\n\n  public readonly state = computed(() => this.dialogRef?.state()?? 'closed');\n\n  public form?: FormGroup;\n\n  constructor(\n    protected fb: FormBuilder\n  ) {\n    const fields = this.opts.fields;\n    \n    if (fields) {\n      this.form = this.fb.group({ });\n      \n      fields.forEach(\n        (field) => {\n          const defaultValue = field.type === 'checkbox'? false : null;\n          \n          this.form!.addControl(\n            field.name,\n            this.fb.control(\n              field.value?? defaultValue, \n              field.required? Validators.required : []\n            )\n          );\n        }  \n      );\n    }\n  }\n\n  public clickBtn(index: number): void {\n    const btn = this.opts.buttons[index];\n  \n    if (\n      btn && \n      typeof btn !== 'string' && \n      btn.handler\n    ) {\n      let value: undefined | Record<string, any> = undefined;\n  \n      if (this.form) {\n        value = { ...this.form.getRawValue() };\n        \n        this.opts.fields?.forEach(\n          (field) => {\n            if (\n              field.type === 'number' && \n              value![field.name] && \n              !isNaN(value![field.name])\n            ) {\n              value![field.name] = Number(value![field.name]);\n            }\n          }\n        );\n      }\n      btn.handler(value);\n    }\n    this.dialogRef.close();\n  }\n}\n","import { Injectable } from '@angular/core';\nimport { UpDialogRef, UpDialogService } from '@unipin/angular-applet/dialog';\nimport { AlertOptions } from '../types/alert-options.type';\nimport { UpAlertComponent } from '../components/alert-dialog.component';\n\n@Injectable({ \n  providedIn: 'root' \n})\nexport class UpAlertController {\n\n  protected readonly MAX_FIELDS = 3;\n  protected readonly MAX_BUTTONS = 2;\n\n  constructor(protected dialog: UpDialogService) {}\n\n  public show(options: AlertOptions, canDismiss: boolean = false): UpDialogRef{\n    if (\n      options.fields && \n      options.fields.length > this.MAX_FIELDS\n    ) {\n      throw new Error(\n        `AlertService: \"fields\" exceeded the maximum allowed (${ this.MAX_FIELDS }).`\n      );\n    }\n\n    if (\n      options.buttons && \n      options.buttons.length > this.MAX_BUTTONS\n    ) {\n      throw new Error(\n        `AlertService: \"buttons\" exceeded the maximum allowed (${ this.MAX_BUTTONS }).`\n      );\n    }\n\n    return this.dialog.open(\n      {\n        content: UpAlertComponent,\n        context: options,\n        options: {\n          hasBackdrop: true,\n          disableClose: !canDismiss,\n          closeOnBackdropClick: canDismiss,\n          closeOnOutsidePointerEvents: canDismiss\n        }\n      }\n    );\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1"],"mappings":"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"}

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

@@ -27,10 +27,10 @@ class UpAlertDirective {
             }), this.inlineClass());
         }, { ...(ngDevMode ? { debugName: "_computedClass" } : {}) });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UpAlertDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: UpAlertDirective, isStandalone: true, selector: "[upAlert]", 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: ["upAlert"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: UpAlertDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.2", type: UpAlertDirective, isStandalone: true, selector: "[upAlert]", 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: ["upAlert"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UpAlertDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: UpAlertDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -49,10 +49,10 @@ class UpAlertTitleDirective {
             return up('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', this.inlineClass());
         }, { ...(ngDevMode ? { debugName: "_computedClass" } : {}) });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UpAlertTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: UpAlertTitleDirective, isStandalone: true, selector: "[upAlertTitle]", inputs: { inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, exportAs: ["upAlertTitle"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: UpAlertTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.2", type: UpAlertTitleDirective, isStandalone: true, selector: "[upAlertTitle]", inputs: { inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, exportAs: ["upAlertTitle"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UpAlertTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: UpAlertTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -71,10 +71,10 @@ class UpAlertDescriptionDirective {
             return up('col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', this.inlineClass());
         }, { ...(ngDevMode ? { debugName: "_computedClass" } : {}) });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UpAlertDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.1", type: UpAlertDescriptionDirective, isStandalone: true, selector: "[upAlertDescription]", inputs: { inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, exportAs: ["upAlertDescription"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: UpAlertDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.2", type: UpAlertDescriptionDirective, isStandalone: true, selector: "[upAlertDescription]", inputs: { inlineClass: { classPropertyName: "inlineClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, exportAs: ["upAlertDescription"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UpAlertDescriptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: UpAlertDescriptionDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,

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

@@ -0,0 +1,129 @@
+import * as i0 from '@angular/core';
+import { Injectable, input, model, signal, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@unipin/angular-gql';
+import { DatePipe, JsonPipe } from '@angular/common';
+import { UpInputDirective } from '@unipin/angular-applet/forms';
+import { UpBadgeDirective } from '@unipin/angular-applet/badge';
+import { UpCapitalizaPipe } from '@unipin/angular-applet/common';
+import { UpSkeletonDirective } from '@unipin/angular-applet/skeleton';
+
+class ApprovalService {
+    constructor(gql) {
+        this.gql = gql;
+    }
+    query(input, extraAttr = '', cacheStrategy) {
+        return this.gql.query({
+            operationName: 'QueryApproval',
+            cacheStrategy,
+            variables: {
+                input
+            },
+            query: `
+        query QueryApproval($input: ApprovalCriteria) {
+          approvalMsApprovals(input: $input) {
+            data {
+              guid 
+              createdAt 
+              entity 
+              remark 
+              sourcePlatform 
+              status 
+              type 
+              createdByUser {
+                guid
+                name
+              }
+              approvalGroup { 
+                guid 
+              }
+              ${extraAttr}
+            }
+            ${input.page === 0 ? 'totalRecord' : ''}
+          }
+        }
+      `
+        });
+    }
+    request(variables) {
+        return this.gql.mutate({
+            variables,
+            operationName: variables.isApprove ? 'ApproveApproval' : 'DeclineApproval',
+            mutation: `
+        mutation ${variables.isApprove ? 'ApproveApproval' : 'DeclineApproval'} ($approvalGroupGuid: String, $guids: [String], $isApprove: Boolean, $reason: String) {
+          approvalMsApproveOrDeclineRequest(approvalGroupGuid: $approvalGroupGuid, guids: $guids, isApprove: $isApprove, reason: $reason)
+        }
+      `
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ApprovalService, deps: [{ token: i1.GqlParser }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ApprovalService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: ApprovalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.GqlParser }] });
+
+class UpApprovalFormComponent {
+    constructor() {
+        this.approvalData = input.required({ ...(ngDevMode ? { debugName: "approvalData" } : {}) });
+        this.isLoading = model(true, { ...(ngDevMode ? { debugName: "isLoading" } : {}) });
+        this.borderColors = signal({}, { ...(ngDevMode ? { debugName: "borderColors" } : {}) });
+        this.backgroundColors = signal({}, { ...(ngDevMode ? { debugName: "backgroundColors" } : {}) });
+        this.STATUS_COLOR_MAP = {
+            PENDING: {
+                bg: 'bg-yellow-500',
+                border: 'border-yellow-500'
+            },
+            APPROVED: {
+                bg: 'bg-green-700',
+                border: 'border-green-700'
+            },
+            DECLINED: {
+                bg: 'bg-destructive',
+                border: 'border-destructive'
+            },
+            DEFAULT: {
+                bg: 'bg-primary',
+                border: 'border-primary'
+            },
+        };
+        effect(() => {
+            const bg = {};
+            const border = {};
+            this.approvalData().forEach((item, index) => {
+                const colors = this.getColors(item.status);
+                bg[index] = colors.bg;
+                border[index] = colors.border;
+            });
+            this.backgroundColors.set(bg);
+            this.borderColors.set(border);
+        });
+    }
+    getColors(status) {
+        return this.STATUS_COLOR_MAP[status] ?? this.STATUS_COLOR_MAP.DEFAULT;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: UpApprovalFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.2", type: UpApprovalFormComponent, isStandalone: true, selector: "up-approval-form", inputs: { approvalData: { classPropertyName: "approvalData", publicName: "approvalData", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isLoading: "isLoadingChange" }, host: { classAttribute: "block space-y-4" }, ngImport: i0, template: "@if (isLoading()) {\n    @for (i of [1,2,3,4,5]; track $index) {\n        <div class=\"border border-border rounded-md px-2 select-none\">\n            <div class=\"px-2 py-4 border-b border-border flex justify-between items-center gap-4\">\n                <div class=\"grow flex items-center gap-2\">\n                    <div \n                        upSkeleton\n                        class=\"h-6 w-4/5 max-w-50\"\n                    ></div>\n                </div>\n\n                <div class=\"shrink-0 text-sm\">\n                    <div \n                        upSkeleton\n                        class=\"h-6 w-screen max-w-30\"\n                    ></div>\n                </div>\n            </div>\n\n            <div class=\"px-2 py-4 space-y-4\">\n                <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\n                    <div class=\"flex flex-col gap-2\">\n                        <label class=\"text-sm font-medium leading-none\">\n                            Entity\n                        </label>\n\n                        <div \n                            upSkeleton\n                            class=\"h-9 w-full\"\n                        ></div>\n                    </div>\n\n                    <div class=\"flex flex-col gap-2\">\n                        <label class=\"text-sm font-medium leading-none\">\n                            User\n                        </label>\n\n                        <div \n                            upSkeleton\n                            class=\"h-9 w-full\"\n                        ></div>\n                    </div>\n                </div>\n\n                <div class=\"flex flex-col gap-2\">\n                    <label class=\"text-sm font-medium leading-none\">\n                        Remark\n                    </label>\n\n                    <div \n                        upSkeleton\n                        class=\"h-9 w-full\"\n                    ></div>\n                </div>\n\n                <div class=\"flex flex-col gap-2\">\n                    <label class=\"text-sm font-medium leading-none\">\n                        Data\n                    </label>\n\n                    <div \n                        upSkeleton\n                        class=\"h-20 w-full\"\n                    ></div>\n                </div>\n            </div>\n        </div>\n    }\n}\n@else {\n    @for (d of approvalData(); track $index) {\n        <div \n            class=\"border rounded-md px-2 select-none\"\n            [class]=\"borderColors()[$index]\"\n        >\n            <div \n                class=\"px-2 py-4 border-b flex justify-between items-center gap-4\"\n                [class]=\"borderColors()[$index]\"\n            >\n                <div class=\"grow flex items-center gap-2\">\n                    <div \n                        upBadge \n                        class=\"text-white shrink-0\" \n                        [class]=\"backgroundColors()[$index]\"\n                    >\n                        {{ (d.status?? 'Unknown') | upCapitalize }}\n                    </div>\n                </div>\n\n                @if (d.createdAt) {\n                    <div class=\"shrink-0 text-sm text-muted-foreground\">\n                        {{ d.createdAt | date: 'dd LLL yyyy HH:mm' }}\n                    </div>\n                }\n            </div>\n\n            <div class=\"px-2 py-4 space-y-6\">\n                <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\n                    <div class=\"flex flex-col gap-2\">\n                        <label class=\"text-sm font-medium leading-none\">\n                            Entity\n                        </label>\n\n                        <input \n                            upInput \n                            readonly \n                            [value]=\"d.entity\"\n                        />\n                    </div>\n\n                    <div class=\"flex flex-col gap-2\">\n                        <label class=\"text-sm font-medium leading-none\">\n                            User\n                        </label>\n\n                        <input \n                            upInput \n                            readonly \n                            [value]=\"d.createdByUser?.name?? '-'\"\n                        />\n                    </div>\n                </div>\n\n                <div class=\"flex flex-col gap-2\">\n                    <label class=\"text-sm font-medium leading-none\">\n                        Remark\n                    </label>\n\n                    <input \n                        upInput \n                        readonly \n                        [value]=\"d.remark\"\n                    />\n                </div>\n\n                <div class=\"flex flex-col gap-2\">\n                    <label class=\"text-sm font-medium leading-none\">\n                        Data\n                    </label>\n\n                    <textarea \n                        upInput \n                        readonly\n                        class=\"min-h-50 resize-none\"\n                        [value]=\"d.data | json\"\n                    >\n                    </textarea>\n                </div>\n            </div>\n        </div>\n    }\n}\n", dependencies: [{ kind: "directive", type: UpInputDirective, selector: "[upInput]", inputs: ["class"], exportAs: ["upInput"] }, { kind: "directive", type: UpBadgeDirective, selector: "[upBadge]", inputs: ["variant", "class"], exportAs: ["upBadge"] }, { kind: "directive", type: UpSkeletonDirective, selector: "[upSkeleton]", inputs: ["class"], exportAs: ["upSkeleton"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: UpCapitalizaPipe, name: "upCapitalize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: UpApprovalFormComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'up-approval-form', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'block space-y-4'
+                    }, imports: [
+                        DatePipe,
+                        JsonPipe,
+                        UpCapitalizaPipe,
+                        UpInputDirective,
+                        UpBadgeDirective,
+                        UpSkeletonDirective
+                    ], template: "@if (isLoading()) {\n    @for (i of [1,2,3,4,5]; track $index) {\n        <div class=\"border border-border rounded-md px-2 select-none\">\n            <div class=\"px-2 py-4 border-b border-border flex justify-between items-center gap-4\">\n                <div class=\"grow flex items-center gap-2\">\n                    <div \n                        upSkeleton\n                        class=\"h-6 w-4/5 max-w-50\"\n                    ></div>\n                </div>\n\n                <div class=\"shrink-0 text-sm\">\n                    <div \n                        upSkeleton\n                        class=\"h-6 w-screen max-w-30\"\n                    ></div>\n                </div>\n            </div>\n\n            <div class=\"px-2 py-4 space-y-4\">\n                <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\n                    <div class=\"flex flex-col gap-2\">\n                        <label class=\"text-sm font-medium leading-none\">\n                            Entity\n                        </label>\n\n                        <div \n                            upSkeleton\n                            class=\"h-9 w-full\"\n                        ></div>\n                    </div>\n\n                    <div class=\"flex flex-col gap-2\">\n                        <label class=\"text-sm font-medium leading-none\">\n                            User\n                        </label>\n\n                        <div \n                            upSkeleton\n                            class=\"h-9 w-full\"\n                        ></div>\n                    </div>\n                </div>\n\n                <div class=\"flex flex-col gap-2\">\n                    <label class=\"text-sm font-medium leading-none\">\n                        Remark\n                    </label>\n\n                    <div \n                        upSkeleton\n                        class=\"h-9 w-full\"\n                    ></div>\n                </div>\n\n                <div class=\"flex flex-col gap-2\">\n                    <label class=\"text-sm font-medium leading-none\">\n                        Data\n                    </label>\n\n                    <div \n                        upSkeleton\n                        class=\"h-20 w-full\"\n                    ></div>\n                </div>\n            </div>\n        </div>\n    }\n}\n@else {\n    @for (d of approvalData(); track $index) {\n        <div \n            class=\"border rounded-md px-2 select-none\"\n            [class]=\"borderColors()[$index]\"\n        >\n            <div \n                class=\"px-2 py-4 border-b flex justify-between items-center gap-4\"\n                [class]=\"borderColors()[$index]\"\n            >\n                <div class=\"grow flex items-center gap-2\">\n                    <div \n                        upBadge \n                        class=\"text-white shrink-0\" \n                        [class]=\"backgroundColors()[$index]\"\n                    >\n                        {{ (d.status?? 'Unknown') | upCapitalize }}\n                    </div>\n                </div>\n\n                @if (d.createdAt) {\n                    <div class=\"shrink-0 text-sm text-muted-foreground\">\n                        {{ d.createdAt | date: 'dd LLL yyyy HH:mm' }}\n                    </div>\n                }\n            </div>\n\n            <div class=\"px-2 py-4 space-y-6\">\n                <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\n                    <div class=\"flex flex-col gap-2\">\n                        <label class=\"text-sm font-medium leading-none\">\n                            Entity\n                        </label>\n\n                        <input \n                            upInput \n                            readonly \n                            [value]=\"d.entity\"\n                        />\n                    </div>\n\n                    <div class=\"flex flex-col gap-2\">\n                        <label class=\"text-sm font-medium leading-none\">\n                            User\n                        </label>\n\n                        <input \n                            upInput \n                            readonly \n                            [value]=\"d.createdByUser?.name?? '-'\"\n                        />\n                    </div>\n                </div>\n\n                <div class=\"flex flex-col gap-2\">\n                    <label class=\"text-sm font-medium leading-none\">\n                        Remark\n                    </label>\n\n                    <input \n                        upInput \n                        readonly \n                        [value]=\"d.remark\"\n                    />\n                </div>\n\n                <div class=\"flex flex-col gap-2\">\n                    <label class=\"text-sm font-medium leading-none\">\n                        Data\n                    </label>\n\n                    <textarea \n                        upInput \n                        readonly\n                        class=\"min-h-50 resize-none\"\n                        [value]=\"d.data | json\"\n                    >\n                    </textarea>\n                </div>\n            </div>\n        </div>\n    }\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { approvalData: [{ type: i0.Input, args: [{ isSignal: true, alias: "approvalData", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }, { type: i0.Output, args: ["isLoadingChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ApprovalService, UpApprovalFormComponent };
+//# sourceMappingURL=unipin-angular-applet-approval.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"unipin-angular-applet-approval.mjs","sources":["../../../projects/unipin-angular/approval/services/approval.service.ts","../../../projects/unipin-angular/approval/component/form/approval-form.component.ts","../../../projects/unipin-angular/approval/component/form/approval-form.component.html","../../../projects/unipin-angular/approval/unipin-angular-applet-approval.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { Observable } from 'rxjs';\nimport { CacheStrategy, GqlParser, MutationResult, QueryResult } from '@unipin/angular-gql';\nimport { ApprovalCriteria, PageableResponse, MutationApprovalMsApproveOrDeclineRequestArgs } from '@unipin/graphql-schema';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class ApprovalService {\n\n  constructor(\n    protected readonly gql: GqlParser\n  ) { }\n\n  public query(\n    input: ApprovalCriteria, \n    extraAttr: string = '', \n    cacheStrategy?: CacheStrategy\n  ): Observable<QueryResult<{ approvalMsApprovals: PageableResponse }>>{\n    \n    return this.gql.query({\n      operationName: 'QueryApproval',\n      cacheStrategy,\n      variables: { \n        input \n      },\n      query: `\n        query QueryApproval($input: ApprovalCriteria) {\n          approvalMsApprovals(input: $input) {\n            data {\n              guid \n              createdAt \n              entity \n              remark \n              sourcePlatform \n              status \n              type \n              createdByUser {\n                guid\n                name\n              }\n              approvalGroup { \n                guid \n              }\n              ${ extraAttr }\n            }\n            ${ input.page === 0? 'totalRecord' : '' }\n          }\n        }\n      `\n    });\n  }\n\n  public request(variables: MutationApprovalMsApproveOrDeclineRequestArgs): Observable<MutationResult<{ approvalMsApproveOrDeclineRequest: string }>>{\n    \n    return this.gql.mutate({\n      variables,\n      operationName: variables.isApprove? 'ApproveApproval' : 'DeclineApproval',\n      mutation: `\n        mutation ${ variables.isApprove? 'ApproveApproval' : 'DeclineApproval'} ($approvalGroupGuid: String, $guids: [String], $isApprove: Boolean, $reason: String) {\n          approvalMsApproveOrDeclineRequest(approvalGroupGuid: $approvalGroupGuid, guids: $guids, isApprove: $isApprove, reason: $reason)\n        }\n      `\n    });\n  }\n}\n","import { ChangeDetectionStrategy, Component, effect, input, model, signal } from '@angular/core';\nimport { DatePipe, JsonPipe } from '@angular/common';\nimport { Approval } from '@unipin/graphql-schema';\nimport { UpInputDirective } from '@unipin/angular-applet/forms';\nimport { UpBadgeDirective } from '@unipin/angular-applet/badge';\nimport { UpCapitalizaPipe } from '@unipin/angular-applet/common';\nimport { UpSkeletonDirective } from '@unipin/angular-applet/skeleton';\n\n\n@Component({\n  standalone: true,\n  selector: 'up-approval-form',\n  templateUrl: './approval-form.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'block space-y-4'\n  },\n  imports: [\n    DatePipe,\n    JsonPipe,\n    UpCapitalizaPipe,\n    UpInputDirective,\n    UpBadgeDirective,\n    UpSkeletonDirective\n  ]\n})\nexport class UpApprovalFormComponent {\n  \n  public readonly approvalData = input.required<Approval[]>();\n  public readonly isLoading = model<boolean>(true);\n\n  public readonly borderColors = signal<{ [key: number]: string }>({});\n  public readonly backgroundColors = signal<{ [key: number]: string }>({});\n\n  protected readonly STATUS_COLOR_MAP = {\n    PENDING: { \n      bg: 'bg-yellow-500', \n      border: 'border-yellow-500' \n    },\n    APPROVED: { \n      bg: 'bg-green-700', \n      border: 'border-green-700' \n    },\n    DECLINED: { \n      bg: 'bg-destructive', \n      border: 'border-destructive' \n    },\n    DEFAULT: { \n      bg: 'bg-primary', \n      border: 'border-primary' \n    },\n  };\n\n  constructor() {\n    effect(\n      () => {\n        const bg: any = {};\n        const border: any = {};\n  \n        this.approvalData().forEach(\n          (item, index) => {\n            const colors = this.getColors(item.status);\n            \n            bg[index] = colors.bg;\n            border[index] = colors.border;\n          }\n        );\n  \n        this.backgroundColors.set(bg);\n        this.borderColors.set(border);\n      }\n    );\n  }\n\n  protected getColors(status?: string | null): { bg: string, border: string}{\n    return this.STATUS_COLOR_MAP[status as keyof typeof this.STATUS_COLOR_MAP]?? this.STATUS_COLOR_MAP.DEFAULT;\n  }\n}\n","@if (isLoading()) {\n    @for (i of [1,2,3,4,5]; track $index) {\n        <div class=\"border border-border rounded-md px-2 select-none\">\n            <div class=\"px-2 py-4 border-b border-border flex justify-between items-center gap-4\">\n                <div class=\"grow flex items-center gap-2\">\n                    <div \n                        upSkeleton\n                        class=\"h-6 w-4/5 max-w-50\"\n                    ></div>\n                </div>\n\n                <div class=\"shrink-0 text-sm\">\n                    <div \n                        upSkeleton\n                        class=\"h-6 w-screen max-w-30\"\n                    ></div>\n                </div>\n            </div>\n\n            <div class=\"px-2 py-4 space-y-4\">\n                <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\n                    <div class=\"flex flex-col gap-2\">\n                        <label class=\"text-sm font-medium leading-none\">\n                            Entity\n                        </label>\n\n                        <div \n                            upSkeleton\n                            class=\"h-9 w-full\"\n                        ></div>\n                    </div>\n\n                    <div class=\"flex flex-col gap-2\">\n                        <label class=\"text-sm font-medium leading-none\">\n                            User\n                        </label>\n\n                        <div \n                            upSkeleton\n                            class=\"h-9 w-full\"\n                        ></div>\n                    </div>\n                </div>\n\n                <div class=\"flex flex-col gap-2\">\n                    <label class=\"text-sm font-medium leading-none\">\n                        Remark\n                    </label>\n\n                    <div \n                        upSkeleton\n                        class=\"h-9 w-full\"\n                    ></div>\n                </div>\n\n                <div class=\"flex flex-col gap-2\">\n                    <label class=\"text-sm font-medium leading-none\">\n                        Data\n                    </label>\n\n                    <div \n                        upSkeleton\n                        class=\"h-20 w-full\"\n                    ></div>\n                </div>\n            </div>\n        </div>\n    }\n}\n@else {\n    @for (d of approvalData(); track $index) {\n        <div \n            class=\"border rounded-md px-2 select-none\"\n            [class]=\"borderColors()[$index]\"\n        >\n            <div \n                class=\"px-2 py-4 border-b flex justify-between items-center gap-4\"\n                [class]=\"borderColors()[$index]\"\n            >\n                <div class=\"grow flex items-center gap-2\">\n                    <div \n                        upBadge \n                        class=\"text-white shrink-0\" \n                        [class]=\"backgroundColors()[$index]\"\n                    >\n                        {{ (d.status?? 'Unknown') | upCapitalize }}\n                    </div>\n                </div>\n\n                @if (d.createdAt) {\n                    <div class=\"shrink-0 text-sm text-muted-foreground\">\n                        {{ d.createdAt | date: 'dd LLL yyyy HH:mm' }}\n                    </div>\n                }\n            </div>\n\n            <div class=\"px-2 py-4 space-y-6\">\n                <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\n                    <div class=\"flex flex-col gap-2\">\n                        <label class=\"text-sm font-medium leading-none\">\n                            Entity\n                        </label>\n\n                        <input \n                            upInput \n                            readonly \n                            [value]=\"d.entity\"\n                        />\n                    </div>\n\n                    <div class=\"flex flex-col gap-2\">\n                        <label class=\"text-sm font-medium leading-none\">\n                            User\n                        </label>\n\n                        <input \n                            upInput \n                            readonly \n                            [value]=\"d.createdByUser?.name?? '-'\"\n                        />\n                    </div>\n                </div>\n\n                <div class=\"flex flex-col gap-2\">\n                    <label class=\"text-sm font-medium leading-none\">\n                        Remark\n                    </label>\n\n                    <input \n                        upInput \n                        readonly \n                        [value]=\"d.remark\"\n                    />\n                </div>\n\n                <div class=\"flex flex-col gap-2\">\n                    <label class=\"text-sm font-medium leading-none\">\n                        Data\n                    </label>\n\n                    <textarea \n                        upInput \n                        readonly\n                        class=\"min-h-50 resize-none\"\n                        [value]=\"d.data | json\"\n                    >\n                    </textarea>\n                </div>\n            </div>\n        </div>\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;MAQa,eAAe,CAAA;AAE1B,IAAA,WAAA,CACqB,GAAc,EAAA;QAAd,IAAA,CAAA,GAAG,GAAH,GAAG;IACpB;AAEG,IAAA,KAAK,CACV,KAAuB,EACvB,SAAA,GAAoB,EAAE,EACtB,aAA6B,EAAA;AAG7B,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC;AACpB,YAAA,aAAa,EAAE,eAAe;YAC9B,aAAa;AACb,YAAA,SAAS,EAAE;gBACT;AACD,aAAA;AACD,YAAA,KAAK,EAAE;;;;;;;;;;;;;;;;;;gBAkBI,SAAU;;cAEZ,KAAK,CAAC,IAAI,KAAK,CAAC,GAAE,aAAa,GAAG,EAAG;;;AAG7C,MAAA;AACF,SAAA,CAAC;IACJ;AAEO,IAAA,OAAO,CAAC,SAAwD,EAAA;AAErE,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC;YACrB,SAAS;YACT,aAAa,EAAE,SAAS,CAAC,SAAS,GAAE,iBAAiB,GAAG,iBAAiB;AACzE,YAAA,QAAQ,EAAE;mBACI,SAAS,CAAC,SAAS,GAAE,iBAAiB,GAAG,iBAAiB,CAAA;;;AAGvE,MAAA;AACF,SAAA,CAAC;IACJ;8GAxDW,eAAe,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,SAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAf,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,eAAe,cAFd,MAAM,EAAA,CAAA,CAAA;;2FAEP,eAAe,EAAA,UAAA,EAAA,CAAA;kBAH3B,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE;AACb,iBAAA;;;MCmBY,uBAAuB,CAAA;AA2BlC,IAAA,WAAA,GAAA;AAzBgB,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAC,QAAQ,yDAAc;AAC3C,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,IAAI,uDAAC;AAEhC,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAA4B,EAAE,0DAAC;AACpD,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAA4B,EAAE,8DAAC;AAErD,QAAA,IAAA,CAAA,gBAAgB,GAAG;AACpC,YAAA,OAAO,EAAE;AACP,gBAAA,EAAE,EAAE,eAAe;AACnB,gBAAA,MAAM,EAAE;AACT,aAAA;AACD,YAAA,QAAQ,EAAE;AACR,gBAAA,EAAE,EAAE,cAAc;AAClB,gBAAA,MAAM,EAAE;AACT,aAAA;AACD,YAAA,QAAQ,EAAE;AACR,gBAAA,EAAE,EAAE,gBAAgB;AACpB,gBAAA,MAAM,EAAE;AACT,aAAA;AACD,YAAA,OAAO,EAAE;AACP,gBAAA,EAAE,EAAE,YAAY;AAChB,gBAAA,MAAM,EAAE;AACT,aAAA;SACF;QAGC,MAAM,CACJ,MAAK;YACH,MAAM,EAAE,GAAQ,EAAE;YAClB,MAAM,MAAM,GAAQ,EAAE;YAEtB,IAAI,CAAC,YAAY,EAAE,CAAC,OAAO,CACzB,CAAC,IAAI,EAAE,KAAK,KAAI;gBACd,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;AAE1C,gBAAA,EAAE,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,EAAE;AACrB,gBAAA,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,CAAC,MAAM;AAC/B,YAAA,CAAC,CACF;AAED,YAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC;AAC7B,YAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC;AAC/B,QAAA,CAAC,CACF;IACH;AAEU,IAAA,SAAS,CAAC,MAAsB,EAAA;AACxC,QAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,MAA4C,CAAC,IAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO;IAC5G;8GAlDW,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAvB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,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,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,iBAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC1BpC,yrKAwJA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDnII,gBAAgB,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,gBAAgB,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,mBAAmB,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EALnB,QAAQ,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EACR,QAAQ,wCACR,gBAAgB,EAAA,IAAA,EAAA,cAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAMP,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAjBnC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,UAAA,EAAA,IAAI,YACN,kBAAkB,EAAA,eAAA,EAEX,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,KAAK,EAAE;qBACR,EAAA,OAAA,EACQ;wBACP,QAAQ;wBACR,QAAQ;wBACR,gBAAgB;wBAChB,gBAAgB;wBAChB,gBAAgB;wBAChB;AACD,qBAAA,EAAA,QAAA,EAAA,yrKAAA,EAAA;;;AExBH;;AAEG;;;;"}