@unipin/angular-applet 18.9.5 → 18.9.7

package/projects/unipin-angular/src/lib/components/forms/textarea/form-textarea.stories.ts

@@ -1,163 +0,0 @@
-import { FormControl } from '@angular/forms';
-import { IonicModule } from '@ionic/angular';
-import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';;
-import { FormTextareaComponent } from './form-textarea.component';
-
-const ctrl = new FormControl();
-ctrl.markAsTouched();
-
-const meta: Meta<FormTextareaComponent|any> = {
-  title: 'Form/Textarea',
-  tags: ['autodocs'],
-  component: FormTextareaComponent,
-  argTypes: {
-    autocomplete: {
-      defaultValue: undefined,
-      description: 'Indicates whether the value of the control can be automatically completed by the browser.',
-      options: [ 'url', 'on', 'off', 'street-address', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1' ],
-      control: {
-        type: 'select'
-      },
-      table: {
-        category: 'Input',
-        subcategory: 'Attribute'
-      },
-      type: {
-        required: false,
-        name: 'string'
-      },
-    },
-    disabled: {
-      defaultValue: false,
-      description: 'If `true`, the user cannot interact with the textarea.',
-      table: {
-        category: 'Input'
-      },
-      type: {
-        required: false,
-        name: 'boolean'
-      },
-    },
-    label: {
-      defaultValue: undefined,
-      description: 'The visible label associated with the textarea.',
-      table: {
-        category: 'Input',
-        subcategory: 'Attribute'
-      },
-      type: {
-        required: false,
-        name: 'string'
-      }
-    },
-    placeholder: {
-      defaultValue: undefined,
-      description: 'Instructional text that shows before the input has a value.',
-      table: {
-        category: 'Input',
-        subcategory: 'Attribute'
-      },
-      type: {
-        required: false,
-        name: 'string'
-      },
-    },
-    required: {
-      defaultValue: false,
-      description: 'If `true`, the user must fill in a value before submitting a form.',
-      table: {
-        category: 'Input'
-      },
-      type: {
-        required: false,
-        name: 'boolean'
-      },
-    },
-    change: {
-      table: { disable: true },
-      control: { disabled: true }
-    },
-    errorMsg: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    isTouched: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    registerOnChange: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    registerOnTouched: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    setDisabledState: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    validate: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    value: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    writeValue: {
-      table: { disable: true },
-      control: { disable: true }
-    }
-  }
-};
-
-export default meta;
-type Story = StoryObj<FormTextareaComponent>;
-
-export const Default: Story = {
-  args: {
-    label: 'Address',
-    placeholder: 'Insert address...'
-  },
-};
-
-export const WithIcon: Story = {
-  name: 'With Icon',
-  decorators: [
-    moduleMetadata({
-      imports: [ 
-        IonicModule
-      ],
-    })
-  ],
-  render: (props) => ({
-    props,
-    template: `
-      <up-textarea label="Address">
-        <ion-icon name="map" class="me-1" icon />
-      </up-textarea>
-    `
-  })
-};
-
-export const Required: Story = {
-  args: {
-    ...Default.args,
-    required: true
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    ...Default.args,
-    disabled: true,
-  },
-};
-
-export const Error: Story = {
-  args: {
-    ...Required.args,
-    errorMsg: 'Field is required',
-  },
-};

package/projects/unipin-angular/src/lib/components/grids/grid-pagination/grid-pagination.component.html

@@ -1,17 +0,0 @@
-<ag-grid-angular class="ag-theme-balham"
-    [pagination]="true"
-    [animateRows]="true"
-    [getRowClass]="getRowClass"
-    [rowModelType]="rowModelType"
-    [rowSelection]="rowSelection"
-    [columnDefs]="config.colDefs"
-    [defaultColDef]="defaultColDef"
-    [cacheBlockSize]="config.rowPerPage"
-    [paginationPageSize]="config.rowPerPage"
-    [overlayNoRowsTemplate]="config.noRowText"
-    (dragStopped)="dragColumn($event)"
-    (gridReady)="setDatasource($event)"
-    (rowClicked)="clickRow($event.data)"
-    (selectionChanged)="changeSelected($event)"
-    (paginationChanged)="changePagination($event)"
-/>

package/projects/unipin-angular/src/lib/components/grids/grid-pagination/grid-pagination.component.scss

@@ -1,8 +0,0 @@
-:host {
-    width: 100%;
-    height: 100%;
-    display: block;
-}
-ag-grid-angular {
-    height: 100%;
-}

package/projects/unipin-angular/src/lib/components/grids/grid-pagination/grid-pagination.component.ts

@@ -1,224 +0,0 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { ColDef, IDatasource, IGetRowsParams, ModuleRegistry, RowModelType, GridReadyEvent, DragStoppedEvent, SelectionChangedEvent, GridApi, PaginationChangedEvent, RowClassParams, RowNode } from '@ag-grid-community/core';
-import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model';
-import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
-import { AgGridModule } from '@ag-grid-community/angular';
-import { GridConfig } from '../interfaces/grid-config.interface';
-import { GridService } from '../services/grid.service';
-
-@Component({
-  standalone: true,
-  selector: 'up-pagination-grid',
-  styleUrl: './grid-pagination.component.scss',
-  templateUrl: './grid-pagination.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ 
-    AgGridModule 
-  ]
-})
-export class GridPaginationComponent implements OnInit, OnDestroy {
-
-  /**
-   * Input variable for the configuration object defining the ag-Grid properties.
-   * @type {GridConfig}
-   * @required
-   */
-  @Input({ required: true }) public config!: GridConfig;
-
-  /**
-   * Input variable for providing the row data to be displayed in the ag-Grid.
-   * @type {any[]}
-   */
-  @Input() public rowData: any[] = [];
-
-  /**
-   * Input variable for specifying the unique identifier of the ag-Grid component.
-   * @type {`grid-${ string }`}
-   */
-  @Input() public id: `grid-${ string }` = 'grid-p';
-
-  /**
-   * Input variable for specifying the row model type for the ag-Grid.
-   * It can be 'infinite' or 'clientSide'.
-   * @type {RowModelType}
-   */
-  @Input() public rowModelType: RowModelType = 'infinite';
-
-  /**
-   * Input variable for specifying the row selection mode. It can be 'single' or 'multiple'.
-   * @type {('single' | 'multiple')}
-   */
-  @Input() public rowSelection: 'single' | 'multiple' = 'single';
-
-  /**
-   * Callback version of property `rowClass` to set class(es) for each row individually. 
-   * Function should return either a string (class name), array of strings (array of class names) or undefined for no class.
-   * @type { RowClassParams<TData = any, TContext = any> }
-   * @returns { string }
-  */ 
-  @Input() public getRowClass: ((params: RowClassParams<RowNode, any>) => string) | undefined;
-
-  /**
-   * Output event emitter triggered when a row in the ag-Grid is clicked.
-   * Emits the data associated with the clicked row.
-   * @type {EventEmitter<any>}
-   */
-  @Output() public readonly onRowClick: EventEmitter<any> = new EventEmitter();
-
-  /**
-   * Output event emitter triggered when the ag-Grid is ready.
-   * Emits a `GridReadyEvent` object.
-   * @type {EventEmitter<GridReadyEvent>}
-   */
-  @Output() public readonly onGridReady: EventEmitter<GridReadyEvent> = new EventEmitter();
-
-  /**
-   * Output event emitter triggered when the selection in the ag-Grid changes.
-   * Emits a `SelectionChangedEvent<any>` object.
-   * @type {EventEmitter<SelectionChangedEvent<any>>}
-   */
-  @Output() public readonly onSelectionChanged: EventEmitter<SelectionChangedEvent<any>> = new EventEmitter();
-
-  /**
-   * Default column definition for the ag-Grid.
-   * @type {ColDef}
-   */
-  public readonly defaultColDef: ColDef = { minWidth: 200, flex: 1, sortable: true, resizable: true, sortingOrder: [ 'asc', 'desc' ], cellStyle: { textAlign: 'left' }};
-
-  /**
-   * Protected variable to store the total count of records.
-   * @type {number | undefined}
-   */
-  protected count?: number;
-
-  /**
-   * Protected variable to store the ag-Grid API.
-   * @type {GridApi}
-   */
-  protected gridApi!: GridApi;
-
-  /**
-   * Protected variable to store the subscription to data retrieval.
-   * @type {Subscription | undefined}
-   */
-  protected subs?: Subscription;
-
-  constructor(
-    protected readonly service: GridService
-  ) {}
-
-  /**
-   * Lifecycle hook to initialize the component.
-   * Registers the row model type module based on the specified type.
-   * Sets default values for rowPerPage and noRowText properties in the configuration.
-   */
-  public ngOnInit(): void{
-    ModuleRegistry.register(this.rowModelType === 'infinite'? InfiniteRowModelModule : ClientSideRowModelModule);
-
-    if (!this.config.rowPerPage) this.config.rowPerPage = 50;
-    this.config.noRowText = `<span class="f20">${ this.config.noRowText?? 'Data not found' }</span>`;
-  }
-
-  /**
-   * Lifecycle hook to handle component destruction.
-   * Unsubscribes from data retrieval subscriptions.
-   */
-  public ngOnDestroy(): void{ this.subs?.unsubscribe(); }
-
-  /**
-   * Event handler for clicking a row in the ag-Grid.
-   * Emits the data associated with the clicked row.
-   * @param {any} data - Data associated with the clicked row.
-   */
-  public clickRow(data: any): void{ this.onRowClick.emit(data); }
-
-  /**
-   * Event handler for when column drag stops in the ag-Grid.
-   * Saves the column state to local storage.
-   * @param {DragStoppedEvent} param0 - DragStoppedEvent object containing API information.
-   */
-  public dragColumn({ api }: DragStoppedEvent): void{ localStorage.setItem(this.id, JSON.stringify(api.getColumnState())); }
-
-  /**
-   * Event handler for selection change in the ag-Grid.
-   * Emits a `SelectionChangedEvent<any>` object.
-   * @param {SelectionChangedEvent<any>} data - SelectionChangedEvent object.
-   */
-  public changeSelected(data: SelectionChangedEvent<any>): void{ this.onSelectionChanged.emit(data); }
-
-  /**
-   * Event handler for pagination change in the ag-Grid.
-   * Updates the rowPerPage property in the configuration based on the new page size.
-   * @param {PaginationChangedEvent} ev - PaginationChangedEvent object.
-   */
-  public changePagination(ev: PaginationChangedEvent): void{
-    if (ev.newPageSize) this.config.rowPerPage = this.gridApi.paginationGetPageSize();
-  }
-
-  /**
-   * Event handler for setting the datasource when the ag-Grid is ready.
-   * Emits the onGridReady event and sets the API in the GridService.
-   * Applies column state from local storage and resets the grid for infinite row model type.
-   * @param {GridReadyEvent} ev - GridReadyEvent object.
-   */
-  public setDatasource(ev: GridReadyEvent): void{
-    this.gridApi = ev.api;
-    this.onGridReady.emit(ev);
-    this.service.setApi(this.id, this.gridApi);
-
-    const state = JSON.parse(localStorage.getItem(this.id) as any);
-    if (state) {
-      this.gridApi.applyColumnState({ state, applyOrder: true });
-      this.gridApi.setColumnsVisible(this.gridApi.getAllGridColumns(), true);
-    }
-
-    if (this.rowModelType === 'clientSide') this.gridApi.setGridOption('rowData', this.rowData);
-    if (this.rowModelType !== 'infinite') return;
-    this.reset();
-  }
-
-  /**
-   * Resets the datasource for infinite row model type.
-   * Retrieves rows asynchronously based on pagination and sorting.
-   * Updates the count of records and calls success or fail callbacks accordingly.
-   */
-  public reset(): void{
-    if (!this.gridApi) return;
-
-    const datasource: IDatasource = {
-      getRows: ({ sortModel: [{ colId, sort }], successCallback, failCallback }: IGetRowsParams) => {
-        this.gridApi.showLoadingOverlay();
-        const offset = this.gridApi.paginationGetCurrentPage();
-
-        this.subs = this.config.getData!(offset, this.config.rowPerPage!, colId, sort).subscribe({
-          next: ({ data, totalRecord }) => {
-            this.gridApi.hideOverlay();
-            
-            if (offset === 0) {
-              if (data.length === 0) {
-                this.gridApi.setGridOption('overlayNoRowsTemplate', this.config.noRowText);
-                this.gridApi.showNoRowsOverlay();
-              } 
-              this.count = totalRecord;
-            }
-
-            if (!this.config.useTotalRecord && data.length < this.config.rowPerPage!) {
-              this.count = (offset * this.config.rowPerPage!) + data.length;
-            }
-            successCallback(data, this.count);
-          },
-          error: ({ message }) => {
-            this.gridApi.setGridOption('overlayNoRowsTemplate', `<span class="f20">${ message }</span>`);
-
-            this.gridApi.hideOverlay();
-            this.gridApi.showNoRowsOverlay();
-            failCallback();
-          }
-        });
-      }
-    };
-    
-    this.gridApi?.setGridOption('datasource', datasource);
-  }
-}

package/projects/unipin-angular/src/lib/components/grids/grid-pagination/grid-pagination.stories.ts

@@ -1,219 +0,0 @@
-import { formatDate } from '@angular/common';
-import { of } from 'rxjs';
-import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-import { GridPaginationComponent } from './grid-pagination.component';
-
-const meta: Meta<GridPaginationComponent> = {
-  title: 'Grids/Grid Pagination',
-  tags: [ 'autodocs' ],
-  component: GridPaginationComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [
-        GridPaginationComponent
-      ]
-    })
-  ],
-  argTypes: {
-    config: {
-      defaultValue: undefined,
-      description: 'Configuration object for the grid, specifying the column definitions, pagination settings, and data retrieval function.',
-      control: {
-        type: 'object'
-      },
-      table: {
-        category: 'Input'
-      },
-      type: {
-        required: true,
-        name: 'string'
-      }
-    },
-    rowData: {
-      defaultValue: [],
-      description: 'Array of row data to be displayed in the grid.',
-      control: {
-        type: 'object'
-      },
-      table: {
-        category: 'Input'
-      },
-      type: {
-        name: 'string'
-      }
-    },
-    id: {
-      defaultValue: 'grid-p',
-      description: 'Unique identifier for the grid component.',
-      table: {
-        category: 'Input'
-      },
-      type: {
-        name: 'string'
-      }
-    },
-    rowModelType: {
-      defaultValue: 'infinite',
-      description: 'Type of row model to be used for grid data.',
-      control: {
-        type: 'select'
-      },
-      options: [ 'infinite', 'clientSide' ],
-      table: {
-        category: 'Input'
-      },
-      type: {
-        name: 'string'
-      }
-    },
-    rowSelection: {
-      defaultValue: 'single',
-      description: 'Type of row selection allowed in the grid.',
-      control: {
-        type: 'select'
-      },
-      options: [ 'single', 'multiple' ],
-      table: {
-        category: 'Input'
-      },
-      type: {
-        name: 'string'
-      }
-    },
-    getRowClass: {
-      type: 'function',
-      description: 'Callback version of property `rowClass` to set class(es) for each row individually',
-      control: { disable: true },
-      table: { disable: true }
-    },
-    changeSelected: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    clickRow: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    defaultColDef: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    dragColumn: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    ngOnDestroy: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    ngOnInit: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    onGridReady: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    onRowClick: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    onSelectionChanged: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    reset: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    setDatasource: {
-      control: { disable: true },
-      table: { disable: true }
-    }
-  }
-};
-
-export default meta;
-type Story = StoryObj<GridPaginationComponent>;
-
-export const DisplayData: Story = {
-  args: {
-    config: {
-      useTotalRecord: false,
-      noRowText: 'Data not found',
-      colDefs: [
-        { headerName: 'User', field: 'user.name', sortable: false },
-        { headerName: 'Description', field: 'description', minWidth: 350, sortable: false },
-        { headerName: 'Created Date', field: 'createdAt', sort: 'desc', valueFormatter: ({ value }) => value? formatDate(value, 'dd MMM yyyy HH:mm', 'en-US') : '' }
-      ],
-      getData: (page: number, pageSize: number, sortBy: string, dir: 'asc' | 'desc') => {
-        const criteria = { sortBy: 'createdAt', sortDirection: 'desc', page: 0, pageSize: 50 };
-
-        criteria.page = page;
-        criteria.sortBy = sortBy;
-        criteria.pageSize = pageSize;
-        criteria.sortDirection = dir;
-
-        return of({ data: [
-          {
-            createdAt: new Date('2024-01-25T04:50:18.393Z'),
-            description: 'auth.error.password_not_match',
-            user: {
-              name: 'John Doe',
-              appLoginPrincipal: [
-                {
-                  principalType: 'EMAIL_USERNAME',
-                  principalId: 'john.doe@mail.com'
-                }
-              ]
-            }
-          }
-        ], 
-        totalRecord: 1 });
-      }
-    },
-    getRowClass : ({ node }: any) => {
-      if(!node) return '';
-  
-      if (node.rowIndex % 2 === 1) return 'bg-primary';
-      
-      return 'bg-secondary'
-    }
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-      <up-pagination-grid style="height: 500px !important; width: 768px !important;" id="id" class="flex-grow-1" rowSelection="rowSelection" [config]="config" [getRowClass]="getRowClass"/>
-    `
-  }),
-}
-
-export const NoData: Story = {
-  args: {
-    config: {
-      useTotalRecord: false,
-      noRowText: 'Data not found',
-      colDefs: [
-        { headerName: 'User', field: 'user.name', sortable: false },
-        { headerName: 'Description', field: 'description', minWidth: 350, sortable: false },
-        { headerName: 'Created Date', field: 'createdAt', sort: 'desc', valueFormatter: ({ value }) => value? formatDate(value, 'dd MMM yyyy HH:mm', 'en-US') : '' }
-      ],
-      getData: (page: number, pageSize: number, sortBy: string, dir: 'asc' | 'desc') => {
-        const criteria = { sortBy: 'createdAt', sortDirection: 'desc', page: 0, pageSize: 50 };
-
-        criteria.page = page;
-        criteria.sortBy = sortBy;
-        criteria.pageSize = pageSize;
-        criteria.sortDirection = dir;
-
-        return of({ data: [], totalRecord: 0 });
-      }
-    }
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-      <up-pagination-grid style="height: 500px !important; width: 768px !important;" id="id" class="flex-grow-1" rowSelection="rowSelection" [config]="config" [getRowClass]="getRowClass"/>
-    `
-  }),
-}

package/projects/unipin-angular/src/lib/components/grids/grid-snapshot/grid-snapshot.component.html

@@ -1,17 +0,0 @@
-<ag-grid-angular class="ag-theme-balham"
-    rowModelType="infinite"
-    [pagination]="true"
-    [animateRows]="true"
-    [getRowClass]="getRowClass"
-    [rowSelection]="rowSelection"
-    [columnDefs]="config.colDefs"
-    [defaultColDef]="defaultColDef"
-    [cacheBlockSize]="config.rowPerPage"
-    [paginationPageSize]="config.rowPerPage"
-    [overlayNoRowsTemplate]="config.noRowText"
-    (dragStopped)="dragColumn($event)"
-    (gridReady)="setDatasource($event)"
-    (rowClicked)="clickRow($event.data)"
-    (selectionChanged)="changeSelected($event)"
-    (paginationChanged)="changePagination($event)"
-/>

package/projects/unipin-angular/src/lib/components/grids/grid-snapshot/grid-snapshot.component.scss

@@ -1,8 +0,0 @@
-:host {
-    width: 100%;
-    height: 100%;
-    display: block;
-}
-ag-grid-angular {
-    height: 100%;
-}