@unipin/angular-applet 18.9.4 → 18.9.6

package/projects/unipin-angular/src/lib/components/infinite-scroll/infinite-scroll.stories.ts

@@ -1,80 +0,0 @@
-import {
-  argsToTemplate,
-  moduleMetadata,
-  type Meta,
-  type StoryObj,
-} from '@storybook/angular';
-import { InfiniteScrollComponent } from './infinite-scroll.component';
-
-const meta: Meta<InfiniteScrollComponent> = {
-  title: 'Infinite Scroll',
-  component: InfiniteScrollComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [InfiniteScrollComponent],
-    }),
-  ],
-  argTypes: {
-    loadingText: {
-      defaultValue: undefined,
-      description: 'Text to display when loading more items.',
-      control: {
-        type: 'text',
-      },
-      table: {
-        category: 'Input',
-      },
-      type: {
-        name: 'string',
-      },
-    },
-    loadingIcon: {
-      defaultValue: 'crescent',
-      description: 'Icon to display while loading more items.',
-      control: {
-        type: 'select',
-      },
-      options: [
-        'bubbles',
-        'circles',
-        'circular',
-        'crescent',
-        'dots',
-        'lines',
-        'lines-sharp',
-        'lines-sharp-small',
-        'lines-small',
-      ],
-      table: {
-        category: 'Input',
-      },
-      type: {
-        name: 'string',
-      },
-    },
-    scroll: {
-      control: { disable: true },
-      table: { disable: true },
-    },
-    onScrollThreshold: {
-      control: { disable: true },
-      table: { disable: true },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<InfiniteScrollComponent>;
-
-export const Default: Story = {
-  args: {
-    loadingText: 'Loading more...',
-    loadingIcon: 'dots',
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-      <up-infinite-scroll ${argsToTemplate(args)} />
-    `,
-  }),
-};

package/projects/unipin-angular/src/lib/components/tabs/tab-content/tab-content.component.html

@@ -1,3 +0,0 @@
-<div class="tab-content" [hidden]="!isActive">
-    <ng-content />
-</div>

package/projects/unipin-angular/src/lib/components/tabs/tab-content/tab-content.component.scss

@@ -1,6 +0,0 @@
-:host {
-    overflow: auto;
-}
-.tab-content {
-    height: 100%;
-}

package/projects/unipin-angular/src/lib/components/tabs/tab-content/tab-content.component.ts

@@ -1,56 +0,0 @@
-import { AfterContentInit, Attribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, HostBinding, Input } from '@angular/core';
-
-@Component({
-  standalone: true,
-  selector: 'up-tab-content',
-  styleUrl: './tab-content.component.scss',
-  templateUrl: './tab-content.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class TabContentComponent implements AfterContentInit {
-
-  /**
-   * A flag variable that used to hide or show the content of the tab. Default value is false.
-   * @type {boolean}
-   */
-  @HostBinding('class.flex-grow-1') public isActive: boolean = false;
-
-  /**
-   * An input variable that used to give label for tabs.
-   * @type {string}
-   */
-  @Input({ required: false }) public header!: string;
-
-  /**
-   * A content child variable to receive HTML element from parent component that will be displayed 
-   * as tab header / label on ion-segment-button.
-   * @type {ElementRef<HTMLDivElement>}
-   */
-  @ContentChild('header') public customHeader?: ElementRef<HTMLDivElement>;
-
-  constructor(
-    @Attribute('fragment') public fragment: string,
-    protected readonly ch: ChangeDetectorRef
-  ) {}
-
-  /**
-   * Angular lifecycle hook that executed after the content projected to this component is initialized.
-   * It checks if customHeader is not undefined will hide the element to prevent it appear to the content section,
-   * and make sure the customHeader only displayed on the ion-segment-button as tab header / label.
-   */
-  public ngAfterContentInit(): void{
-    if (this.customHeader) {
-      this.customHeader.nativeElement.style.cssText = 'display: none !important';
-    }
-  }
-  
-  /**
-   * A method that control show or hide the content of the tab. If the param value is true, the
-   * content will shown. If the param value is false, the content will be hidden.
-   * @param {boolean} s - Contain boolean value for show or hide the content. Default value is true.
-   */
-  public toggleVisibility(s: boolean = true): void{
-    this.isActive = s;
-    this.ch.markForCheck();
-  }
-}

package/projects/unipin-angular/src/lib/components/tabs/tab-group/tab-group.component.html

@@ -1,24 +0,0 @@
-<ion-segment 
-    [scrollable]="true" 
-    [value]="activeFragment"
->
-    @for (c of content(); track c.fragment) {
-        <ion-segment-button
-            [value]="c.fragment" 
-            (click)="changeTab(c.fragment, $index)"
-        >
-            @if (!c.customHeader) {
-                {{ c.header }}
-            }
-            @else {
-                <div 
-                    class="{{ c.customHeader.nativeElement.className }}"
-                    [innerHTML]="c.customHeader.nativeElement.innerHTML"
-                >
-                </div>
-            }
-        </ion-segment-button>
-    }
-</ion-segment>
-
-<ng-content />

package/projects/unipin-angular/src/lib/components/tabs/tab-group/tab-group.component.scss

@@ -1,39 +0,0 @@
-:host {
-    display: flex;
-    flex-direction: column;
-}
-ion-segment {
-    display: flex;
-    flex-shrink: 0;
-    padding-bottom: 16px;
-
-    &::-webkit-scrollbar { 
-        height: 0; 
-    }
-}
-ion-segment-button {
-    --color: #9E9E9E;
-    --color-checked: #424242;
-    --indicator-color: #ED6B26;
-    border: none;
-    height: 34px;
-    font-weight: 400;
-    min-width: 100px;
-    min-height: 34px;
-    width: fit-content;
-    text-transform: none;
-    letter-spacing: normal;
-    border-radius: 0.25rem;
-
-    &.segment-button-checked { 
-        font-weight: 500; 
-    }
-    &::part(native) { 
-        border-radius: 4px; 
-    } 
-    &::part(indicator-background) {
-        margin: auto;
-        max-width: 25%;
-        border-radius: 8px;
-    }
-}

package/projects/unipin-angular/src/lib/components/tabs/tab-group/tab-group.component.ts

@@ -1,92 +0,0 @@
-import { AfterContentInit, ChangeDetectionStrategy, Component, contentChildren, output, OutputEmitterRef, Signal } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { IonicModule } from '@ionic/angular';
-import { TabContentComponent } from '../tab-content/tab-content.component';
-import { TabsChangedEvent } from '..';
-
-@Component({
-  standalone: true,
-  selector: 'up-tab-group',
-  styleUrl: './tab-group.component.scss',
-  templateUrl: './tab-group.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    IonicModule
-  ],
-})
-export class TabGroupComponent implements AfterContentInit {
-
-  /**
-   * @deprecated - Use `changed` instead. Will be removed in next major release.
-   * 
-   * An output variable that used to emits event of type string or null when value changed. This
-   * output variable, when subscribed to, emits events containing instances of string or null
-   * or its subclass.
-   * @type {OutputEmitterRef<TabsChangedEvent>}
-   */
-  public readonly onChange: OutputEmitterRef<TabsChangedEvent> = output();
-
-  /**
-   * An output variable that used to emits event of type string or null when value changed. This
-   * output variable, when subscribed to, emits events containing instances of string or null
-   * or its subclass.
-   * @type {OutputEmitterRef<TabsChangedEvent>}
-   */
-  public readonly changed: OutputEmitterRef<TabsChangedEvent> = output();
-
-  /**
-   * A list of tab content components
-   * @type {Signal<readonly TabContentComponent[]>}
-   */
-  public readonly content: Signal<readonly TabContentComponent[]> = contentChildren(TabContentComponent);
-
-  /**
-   * A flag variable that used to set value of ion-segment for represents the current selected tab.
-   * @type {string | null | undefined}
-   */
-  public activeFragment: string | null | undefined;
-
-  constructor(
-    protected readonly router: Router,
-    protected readonly activeRoute: ActivatedRoute
-  ) { }
-
-  public ngAfterContentInit(): void{
-    const f = this.activeRoute.snapshot.fragment;
-    
-    this.changeTab(
-      f,
-      this.content().findIndex(({ fragment }) => fragment === f)
-    );
-  }
-
-  /**
-   * A method when the tab is changed, it will emit onChange variable, change route
-   * based on fragment value in param, and search if tabs have the fragment value.
-   * If it's found, it'll show the tab's content. If it's not, it'll show empty content.
-   * 
-   * @param {string | null} f - Contain value of the fragment that currently selected.
-   * @param {string | null} i - Fragment index.
-   */
-  public changeTab(f: string | null, i: number): void{
-    this.changed.emit({ fragment: f, index: i });
-    this.onChange.emit({ fragment: f, index: i });
-    
-    this.router.navigate([], { relativeTo: this.activeRoute, fragment: f || undefined, replaceUrl: true });
-
-    let found: boolean = false;
-    this.content().forEach((tab) => {
-      if (tab.fragment !== f) tab.toggleVisibility(false);
-      else {
-        found = true;
-        this.activeFragment = f;
-        tab.toggleVisibility(true);
-      }      
-    });
-
-    if (!found) {
-      this.content()[0].toggleVisibility(true);
-      this.activeFragment = this.content()[0].fragment;
-    }
-  }
-}

package/projects/unipin-angular/src/lib/components/tabs/tab.stories.ts

@@ -1,117 +0,0 @@
-import { ActivatedRoute } from '@angular/router';
-import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-import { expect } from '@storybook/jest';
-import { userEvent, within } from '@storybook/testing-library';
-import { TabGroupComponent } from './tab-group/tab-group.component';
-import { TabContentComponent } from './tab-content/tab-content.component';
-
-const meta: Meta<TabContentComponent> = {
-  title: 'Tabs/Tab',
-  tags: [ 'autodocs' ],
-  component: TabContentComponent,
-  decorators: [
-    applicationConfig({
-      providers: [ 
-        {
-          provide: ActivatedRoute,
-          useValue: {
-            snapshot: {
-              paramMap: {
-                get(): string { 
-                  return 'tab-content'; 
-                },
-              },
-            },
-          },
-        }
-      ],
-    }),
-    moduleMetadata({
-      imports: [
-        TabGroupComponent,
-        TabContentComponent,
-      ]
-    })
-  ],
-  argTypes: {
-    fragment: {
-      defaultValue: undefined,
-      description: 'Identifier for the tab content, displayed with `#` in the URL when the tab is active.',
-      control: { type: 'text' },
-      table: {
-        category: 'Input',
-        subcategory: 'Attribute'
-      }
-    },
-    header: {
-      defaultValue: undefined,
-      description: 'Header text for the tab content',
-      table: {
-        category: 'Input'
-      },
-      type: {
-        required: false,
-        name: 'string'
-      }
-    },
-    customHeader: {
-      defaultValue: undefined,
-      description: 'Custom header for the tab content',
-      table: {
-        category: 'ContentChild'
-      },
-      type: {
-        required: false,
-        name: 'ElementRef<HTMLDivElement>' as any
-      }
-    },
-    isActive: {
-      control: { disable: true },
-      table: { disable: true }
-    },
-    toggleVisibility: {
-      control: { disable: true },
-      table: { disable: true }
-    }
-  }
-};
-
-export default meta;
-type Story = StoryObj<TabContentComponent>;
-
-export const ActiveTab: Story = {
-  name: 'Active Tab',
-  render: () => ({
-    template: `
-      <up-tab-group>
-        <up-tab-content header="Detail" fragment="detail">
-          <p>Detail content</p>
-        </up-tab-content>
-
-        <up-tab-content header="Audit" fragment="audit">
-          <p>Audit content</p>
-        </up-tab-content>
-
-        <up-tab-content fragment="timeline">
-          <div class="d-flex align-items-center gap-3" #header>
-            <div>Custom Header</div>
-            <span class="badge bg-danger">20</span>
-          </div>
-
-          <p>Custom header Content</p>
-        </up-tab-content>
-      </up-tab-group>
-    `
-  }),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await expect(canvas.getByText('Detail content')).toContainHTML('Detail content');
-
-    await userEvent.click(canvas.getByText('Audit'));
-    await expect(canvas.getByText('Audit content')).toHaveTextContent('Audit content');
-
-    await userEvent.click(canvas.getAllByText('Timeline')[0]);
-    await expect(canvas.getByText('Timeline Content')).toHaveTextContent('Timeline Content');
-  }
-}

package/projects/unipin-angular/src/lib/guards/auth/auth.guard.ts

@@ -1,11 +0,0 @@
-import { inject } from '@angular/core';
-import { AuthResolver } from '../../resolvers';
-
-export const AuthGuard: () => boolean = (): boolean => {
-  const resolver = inject(AuthResolver);
-  
-  if (!resolver.isUserLoggedIn()) {
-    location.href = '/auth/login';
-  }
-  return true;
-};

package/projects/unipin-angular/src/lib/interceptors/header/header.interceptor.ts

@@ -1,36 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpEvent, HttpHandler, HttpHandlerFn, HttpInterceptor, HttpInterceptorFn, HttpRequest } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { AuthService } from '../../services';
-
-export const headerInterceptor: HttpInterceptorFn = (
-  request: HttpRequest<any>,
-  next: HttpHandlerFn
-): Observable<HttpEvent<any>> => {
-  return next(
-    request.clone({
-      headers: request.headers,
-      setHeaders: {
-        project: 'unipin',
-        authorization: AuthService.authToken,
-      },
-    })
-  );
-};
-
-/**
- * @deprecated - DI based interceptor will be removed at v19.0.0, use function based interceptor instead
- */
-@Injectable()
-export class HeaderInterceptor implements HttpInterceptor {
-
-  public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{
-    return next.handle(request.clone({
-      headers: request.headers,
-      setHeaders: {
-        authorization: AuthService.authToken,
-        project: 'unipin'
-      }
-    }));
-  }
-}

package/projects/unipin-angular/src/lib/interceptors/refresh-token/refresh-token.interceptor.ts

@@ -1,123 +0,0 @@
-import { inject, Injectable } from '@angular/core';
-import { HttpEvent, HttpHandler, HttpHandlerFn, HttpInterceptor, HttpInterceptorFn, HttpRequest } from '@angular/common/http';
-import { Router } from '@angular/router';
-import { catchError, Observable, switchMap, throwError } from 'rxjs';
-import { AuthService } from '../../services';
-
-export const refreshTokenInterceptor: HttpInterceptorFn = (
-  request: HttpRequest<any>, 
-  next: HttpHandlerFn
-): Observable<HttpEvent<any>> => {
-  const router = inject(Router);
-  const authService = inject(AuthService);
-
-  return next(request).pipe(
-    catchError(({ error: { errors } }) => {
-      if (errors[0].extensions.code !== 'USER_INVALID_TOKEN') {
-        return throwError(() => errors[0]);
-      }
-
-      return authService.refreshToken({ refreshToken: AuthService.refreshToken }).pipe(
-        switchMap(({ data }) => {
-          const { accessToken, refreshToken } = data!.authMsRefreshAccessToken;
-
-          AuthService.authToken = accessToken!;
-          AuthService.refreshToken = refreshToken!;
-
-          localStorage.setItem('authToken', accessToken!);
-          localStorage.setItem('refreshToken', refreshToken!);
-
-          return next(
-            request.clone(
-              {
-                setHeaders: {
-                  authorization: accessToken!,
-                },
-              }
-            )
-          );
-        }),
-        catchError(() => {
-          localStorage.removeItem('roles');
-          localStorage.removeItem('userGuid');
-          localStorage.removeItem('authToken');
-          localStorage.removeItem('refreshToken');
-
-          AuthService.authToken = '';
-          AuthService.refreshToken = '';
-          authService.user = undefined;
-
-          setTimeout(
-            () => {
-              location.href = `/auth/login?url=${ encodeURIComponent(router.url + location.hash) }`;
-            }, 
-            250
-          );
-          return throwError(() => errors[0]);
-        })
-      );
-    })
-  );
-};
-
-/**
- * @deprecated - DI based interceptor will be removed at v19.0.0, use function based interceptor instead
- */
-@Injectable()
-export class RefreshTokenInterceptor implements HttpInterceptor {
-
-  constructor(
-    protected readonly router: Router,
-    protected readonly authService: AuthService,
-  ) { }
-
-  public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>{
-    return next.handle(request).pipe(
-      catchError(({ error: { errors } }) => {
-        if (errors[0].extensions.code === 'USER_INVALID_TOKEN') {
-          return this.authService.refreshToken({ refreshToken: AuthService.refreshToken }).pipe(
-            switchMap(({ data }) => {
-              const { accessToken, refreshToken } = data!.authMsRefreshAccessToken;
-
-              AuthService.authToken = accessToken!;
-              AuthService.refreshToken = refreshToken!;
-
-              localStorage.setItem('authToken', accessToken!);
-              localStorage.setItem('refreshToken', refreshToken!);
-
-              return next.handle(
-                request.clone(
-                  {
-                    setHeaders: {
-                      authorization: accessToken!
-                    }
-                  }
-                )
-              );
-            }),
-            catchError(() => {
-              localStorage.removeItem('roles');
-              localStorage.removeItem('userGuid');
-              localStorage.removeItem('authToken');
-              localStorage.removeItem('refreshToken');
-
-              AuthService.authToken = '';
-              AuthService.refreshToken = '';
-              this.authService.user = undefined;
-
-              setTimeout(
-                () => {
-                  location.href = `/auth/login?url=${ encodeURIComponent(this.router.url + location.hash) }`;
-                }, 
-                250
-              );
-              return throwError(() => errors[0]);
-            })
-          );
-        }
-
-        return throwError(() => errors[0]);
-      })
-    );
-  }
-}

package/projects/unipin-angular/src/lib/interfaces/user/user.interface.ts

@@ -1,27 +0,0 @@
-export interface User {
-  birthday: string;
-  category?: string | null;
-  email: string;
-  gender: string;
-  guid: string;
-  mobileNumber?: string | null;
-  name: string;
-  photo: string;
-  roles: {
-    guid: string;
-    code: string;
-    name: string;
-    status: string;
-    isInternal: boolean;
-  }[];
-  departments: {
-    department: {
-      guid: string;
-      hierarchyCode: string;
-      hierarchyPath: string;
-      name: string;
-      status: string;
-    };
-    isLead: boolean;
-  }[];
-}

package/projects/unipin-angular/src/lib/modules/index.ts

@@ -1,11 +0,0 @@
-export { bootstrap } from './micro-frontend';
-export {
-    PermissionDirective,
-    PermissionGuard,
-    PermissionService,
-    UnauthorizedPage,
-
-    LoadingConfig,
-    provideLoadingConfig,
-    LoadingPage,
-} from './permission';