@unipin/angular-applet 18.9.4 → 18.9.6

package/projects/unipin-angular/src/lib/components/buttons/loading/btn-loading.stories.ts

@@ -1,188 +0,0 @@
-import { importProvidersFrom } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { IonicModule } from '@ionic/angular';
-import { moduleMetadata, type Meta, StoryObj, applicationConfig } from '@storybook/angular';
-import { ButtonLoadingComponent } from './btn-loading.component';
-
-const meta: Meta<ButtonLoadingComponent> = {
-  title: 'Buttons/Loading',
-  tags: [ 'autodocs' ],
-  component: ButtonLoadingComponent,
-  decorators: [
-    applicationConfig({
-      providers: [ 
-        importProvidersFrom([ IonicModule.forRoot() ])
-      ],
-    }),
-    moduleMetadata({
-      imports: [
-        CommonModule, 
-        ButtonLoadingComponent 
-      ],
-    })
-  ],
-  argTypes: {
-    color: {
-      defaultValue: 'primary',
-      description: 'Color of the button.',
-      options: [ 'danger', 'dark', 'light', 'medium', 'primary', 'secondary', 'success', 'tertiary', 'warning' ],
-      control: { 
-        type: 'select' 
-      },
-      table: { 
-        category: 'Input' 
-      },
-      type: { 
-        required: false, 
-        name: 'string' 
-      },
-    },
-    disabled: {
-      defaultValue: false,
-      description: 'If `true`, the user cannot interact with the button.',
-      table: { category: 'Input' },
-      type: { 
-        required: false, 
-        name: 'boolean' 
-      }
-    },
-    fill: {
-      defaultValue: 'solid',
-      description: 'Style of the button (`clear`, `default`, `outline`, `solid`).',
-      options: [ 'clear', 'default', 'outline', 'solid' ],
-      control: { 
-        type: 'select' 
-      },
-      table: { 
-        category: 'Input' 
-      },
-      type: { 
-        required: false, 
-        name: 'string' 
-      }
-    },
-    type: {
-      defaultValue: 'button',
-      description: 'Type of the button (button, reset, submit).',
-      options: [ 'button', 'reset', 'submit' ],
-      control: { 
-        type: 'select' 
-      },
-      table: { 
-        category: 'Input' 
-      },
-      type: { 
-        required: false, 
-        name: 'string' 
-      }
-    },
-   isLoading: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    clickBtn: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    form: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    onClick: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    toggleLoading: {
-      table: { disable: true },
-      control: { disable: true }
-    }
-  }
-};
-
-export default meta;
-type Story = StoryObj<ButtonLoadingComponent>;
-
-export const Default: Story = {
-  args: {
-    disabled: false,
-    type: 'button',
-    fill: 'solid',
-    color: 'primary',
-  },
-  render: (args) => ({
-    props: args,
-    template: `<up-btn-loading [color]="color" [disabled]="disabled" [fill]="fill" [isLoading]="isLoading" [type]="type" (clickBtn)="clickBtn()">Button</up-btn-loading>`
-  }),
-};
-
-export const Primary: Story = {
-  name: 'Color: Primary',
-  args: {
-    ...Default.args,
-    color: 'primary',
-  },
-  render: (args) => ({
-    props: args,
-    template: `<up-btn-loading [color]="color" [disabled]="disabled" [fill]="fill" [isLoading]="isLoading" [type]="type" (clickBtn)="clickBtn()">Button</up-btn-loading>`
-  }),
-};
-
-export const Danger: Story = {
-  name: 'Color: Danger',
-  args: {
-    ...Default.args,
-    color: 'danger',
-  },
-  render: (args) => ({
-    props: args,
-    template: `<up-btn-loading [color]="color" [disabled]="disabled" [fill]="fill" [isLoading]="isLoading" [type]="type" (clickBtn)="clickBtn()">Button</up-btn-loading>`
-  }),
-};
-
-export const Loading: Story = {
-  name: 'Loading',
-  args: {
-    ...Default.args,
-    isLoading: true,
-  },
-  render: (args) => ({
-    props: args,
-    template: `<up-btn-loading [color]="color" [disabled]="disabled" [fill]="fill" [isLoading]="isLoading" [type]="type" (clickBtn)="clickBtn()">Button</up-btn-loading>`
-  }),
-};
-
-export const Disabled: Story = {
-  name: 'Disabled',
-  args: {
-    ...Default.args,
-    disabled: true,
-  },
-  render: (args) => ({
-    props: args,
-    template: `<up-btn-loading [color]="color" [disabled]="disabled" [fill]="fill" [isLoading]="isLoading" [type]="type" (clickBtn)="clickBtn()">Button</up-btn-loading>`
-  }),
-};
-
-export const SolidFill: Story = {
-  name: 'Fill: Solid',
-  args: {
-    ...Default.args,
-    fill: 'solid',
-  },
-  render: (args) => ({
-    props: args,
-    template: `<up-btn-loading [color]="color" [disabled]="disabled" [fill]="fill" [isLoading]="isLoading" [type]="type" (clickBtn)="clickBtn()">Button</up-btn-loading>`
-  }),
-};
-
-export const OutlineFill: Story = {
-  name: 'Fill: Outline',
-  args: {
-    ...Default.args,
-    fill: 'outline',
-  },
-  render: (args) => ({
-    props: args,
-    template: `<up-btn-loading [color]="color" [disabled]="disabled" [fill]="fill" [isLoading]="isLoading" [type]="type" (clickBtn)="clickBtn()">Button</up-btn-loading>`
-  }),
-};

package/projects/unipin-angular/src/lib/components/containers/applet-container/applet-container.component.html

@@ -1,39 +0,0 @@
-<div class="sidenav flex-shrink-0 h-100 py-4 d-flex flex-column" [class.collapsed]="isCollapsed" [class.show]="isMenuActive">
-    <div class="logo-container px-3 pb-3 border-bottom flex-shrink-0 position-relative d-flex align-items-center gap-3 d-none d-md-flex">
-        <img alt="Applet Icon" width="44px" height="44px" class="rounded" [src]="config.icon" />
-
-        <div class="info w-75 pe-2">
-            <div class="name fw-medium text-truncate">{{ config.name }}</div>
-            
-            <div class="tenant pt-1 fw-medium">
-                v{{ config.version }}
-            </div>
-        </div>
-
-        <button class="btn-close cursor-pointer position-absolute border-0 rounded-circle d-none d-md-block" (click)="toggleSidenav()">
-            <ion-icon name="chevron-forward" class="mt-1" />
-        </button>
-    </div>
-
-    <div class="flex-grow-1 px-3 pt-3 overflow-y-auto d-none d-md-block" (click)="selectMenu()">
-        @for (c of config.containers; track $index) {
-            <a class="nav align-items-center text-decoration-none gap-2 rounded mb-1 {{ isHidden[$index]? 'd-none' : 'd-flex' }}" routerLinkActive="fw-medium" title="{{ c.label }}" [routerLink]="c.path">
-                <ion-icon name="{{ c.icon }}" />
-                <div class="text-truncate">{{ c.label }}</div>
-            </a>
-        }
-    </div>
-
-    @if (config.enabledSetting) {
-        <div class="flex-shrink-0 px-3 pt-3 border-top d-none d-md-block" (click)="selectMenu()">
-            <a class="nav d-flex align-items-center text-decoration-none gap-2 rounded" title="Setting" routerLink="setting" routerLinkActive="fw-medium">
-                <ion-icon name="settings" />
-                <div class="text-truncate">Setting</div>
-            </a>
-        </div>
-    }
-</div>
-
-<div class="flex-grow-1 w-100 overflow-y-auto">
-    <ng-content />
-</div>

package/projects/unipin-angular/src/lib/components/containers/applet-container/applet-container.component.scss

@@ -1,68 +0,0 @@
-.info { display: none; }
-.name { font-size: 16px; }
-.tenant { color: #757575; }
-.overflow-y-auto {
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-.sidenav {
-    width: 73px;
-    background: #F8F9FB;
-    transition: all .2s ease;
-    border-right: 1px solid #D1D1D1;
-    &.collapsed { 
-        width: 250px; 
-        .btn-close {
-            transform: rotateZ(180deg);
-        }
-        .nav div, .info { display: block; }
-    }
-    &.show {
-       width: 250px;
-       .logo-container { display: flex !important; }
-       div:not(.logo-container), img, .info { display: block !important; }
-    }
-}
-.btn-close {
-    width: 35px;
-    height: 35px;
-    bottom: 23px;
-    right: -17px;
-    z-index: 999;
-    transition: all .3s ease;
-    background-color: #F8F9FB;
-    box-shadow: 0 0 0.15rem 0 #616161;
-    ion-icon { 
-        color: #616161;
-        font-size: 16px; 
-    }
-    @media (max-width: 768px) {
-        right: -18px;
-        ion-icon {
-            position: absolute;
-            right: 9px;
-            bottom: 10px;
-        }
-    }
-}
-.nav {
-    padding: 12px;
-    color: #616161;
-    transition: all .3s ease;
-    &.fw-medium, &:hover {
-        background-color: #fef3ee;
-        color: #ED6B26 !important;
-    }
-    ion-icon { font-size: 20px; }
-    div { 
-        display: none; 
-        font-size: 16px;
-    }
-}
-@media (max-width: 767px) {
-    .sidenav {
-        width: 0;
-        z-index: 2;
-        position: absolute !important;
-    }    
-}

package/projects/unipin-angular/src/lib/components/containers/applet-container/applet-container.component.ts

@@ -1,98 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnDestroy, OnInit } from '@angular/core';
-import { RouterLink, RouterLinkActive } from '@angular/router';
-import { IonicModule } from '@ionic/angular';
-import { Subscription, fromEvent } from 'rxjs';
-import { PermissionService } from '../../../modules';
-import { APPLET_CONFIG, AppletConfig } from './provide-applet-config.util';
-
-@Component({
-  standalone: true,
-  selector: 'up-applet-container',
-  styleUrl: './applet-container.component.scss',
-  templateUrl: './applet-container.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'd-flex h-100 w-100'
-  },
-  imports: [
-    IonicModule,
-    RouterLink,
-    RouterLinkActive
-  ]
-})
-export class AppletContainerComponent implements OnInit, OnDestroy {
-
-  /**
-   * A flag variable that used to control sidebar. When set the the value to true, the component will open the sidebar.
-   * when set the value to false, the component will close the sidebar.
-   * @type {boolean}
-   */
-  public isCollapsed: boolean = false;
-
-  /**
-   * A flag variable that used to control sidebar menu. When set value to true, the component will hide the sidebar menu.
-   * When set false, the component will show the sidebar menu.
-   * @type {boolean[]}
-   */
-  public isHidden: boolean[] = Array(this.config.containers.length).fill(true);
-  
-  /**
-   * A flag variable for indicates whether the sidebar menu is active or not in mobile view.
-   * When set false the sidebar menu will be hidden
-   * @type {boolean[]}
-   */
-  public isMenuActive: boolean = false;
-  protected sub!: Subscription;
-  protected subEvent!: Subscription;
-
-  constructor(
-    @Inject(APPLET_CONFIG) public readonly config: AppletConfig,
-    protected readonly ch: ChangeDetectorRef,
-    protected readonly permissionService: PermissionService
-  ) { }
-
-  /**
-   * Lifecycle hook to initialize the components.
-   * Subscribes to permission changes and window events.
-   */
-  public ngOnInit(): void{
-    this.sub = this.permissionService.permModules.subscribe((listPermModule: string[]) => {
-      this.isHidden = this.config.containers.map(({ permModule }) => {
-        return !listPermModule.includes(permModule);
-      });
-    });
-
-    this.subEvent = fromEvent(window, 'menuEvent').subscribe((event: any) => {
-      this.isMenuActive = event.detail.isActive;
-      this.ch.markForCheck();
-    });
-  }
-
-  /**
-   * Lifecycle hook to handle component destruction.
-   * Cleans up subscriptions to prevent memory leaks
-   */
-  public ngOnDestroy(): void{ 
-    this.sub.unsubscribe();
-    this.subEvent.unsubscribe();
-  }
-
-  /**
-   * When the method is called, it will change the value of isCollapsed to its opposite value. 
-   * If isCollapsed is currently true, it will be set to false, and if it is currently false, it will be set to true. 
-   * This method is typically used to toggle the visibility of a side navigation menu.
-   */
-  public toggleSidenav(): void{
-    this.isCollapsed = !this.isCollapsed;
-  }
-
-  /**
-   * Handles menu selection by dispatching a custom event.
-   * This method is called when a sidebar menu item is selected.
-   * It dispatches a custom 'menuEvent' with detail indicating the menu is inactive.
-   * This event is typically used to close the sidebar menu.
-   */
-  public selectMenu(): void{
-    dispatchEvent(new CustomEvent('menuEvent', { detail: { isActive: false } }));
-  }
-}

package/projects/unipin-angular/src/lib/components/containers/applet-container/provide-applet-config.util.ts

@@ -1,23 +0,0 @@
-import { InjectionToken, Provider } from '@angular/core';
-
-export const APPLET_CONFIG = new InjectionToken<AppletConfig>('APPLET_CONFIG');
-
-export interface AppletConfig {
-  icon: string;
-  name: string;
-  version: string;
-  enabledSetting?: boolean;
-  containers: {
-    icon: string;
-    label: string;
-    permModule: string;
-    path: `/${ string }`;
-  }[];
-}
-
-export function provideAppletConfig(config: AppletConfig): Provider{
-  return { 
-    provide: APPLET_CONFIG, 
-    useValue: config 
-  };
-}

package/projects/unipin-angular/src/lib/components/containers/colum-header-container/column-header-container.component.html

@@ -1,17 +0,0 @@
-<div class="d-flex justify-content-between align-items-center border-bottom py-1 ps-1 pe-4 flex-shrink-0">
-	<div class="flex-grow-1 d-flex align-items-center pe-3">
-		<ion-buttons class="flex-shrink-0">
-			<ion-button routerLink="{{ prevUrl }}">
-				<ion-icon slot="icon-only" name="close" />
-			</ion-button>
-		</ion-buttons>
-
-		<div class="f20 fw-medium flex-grow-1 text-truncate">{{ header }}</div>
-	</div>
-
-	<ng-content select="[button]" />
-</div>
-
-<div class="p-1 flex-grow-1 overflow-auto">
-	<ng-content/>
-</div>

package/projects/unipin-angular/src/lib/components/containers/colum-header-container/column-header-container.component.scss

@@ -1,4 +0,0 @@
-ion-buttons { z-index: 0; }
-.flex-grow-1 {
-    min-width: 0;
-}

package/projects/unipin-angular/src/lib/components/containers/colum-header-container/column-header-container.component.ts

@@ -1,32 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { IonicModule } from '@ionic/angular';
-import { RouterLink } from '@angular/router';
-
-@Component({
-  standalone: true,
-  selector: 'up-column-header-container',
-  styleUrl: './column-header-container.component.scss',
-  templateUrl: './column-header-container.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { 
-    class: 'd-flex flex-column h-100' 
-  },
-  imports: [ 
-    IonicModule,
-    RouterLink
-  ]
-})
-export class ColumnHeaderContainerComponent {
-
-  /**
-   * An input variable that used to set header text.
-   *@type {string}
-   */
-  @Input() public header?: string;
-
-  /**
-   * An input variable that used to set prevUrl.
-   *@type {string}
-   */
-  @Input() public prevUrl!: string;
-}

package/projects/unipin-angular/src/lib/components/containers/colum-header-container/column-header.stories.ts

@@ -1,77 +0,0 @@
-import { importProvidersFrom } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { IonicModule } from '@ionic/angular';
-import { applicationConfig, argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-import { ColumnHeaderContainerComponent } from './column-header-container.component';
-
-const meta: Meta<ColumnHeaderContainerComponent> = {
-  title: 'Containers/Column Header Container',
-  tags: [ 'autodocs' ],
-  component: ColumnHeaderContainerComponent,
-  decorators: [
-    applicationConfig({
-      providers: [ 
-        importProvidersFrom([ IonicModule.forRoot() ]),
-        {
-          provide: ActivatedRoute,
-          useValue: {
-            snapshot: {
-              paramMap: {
-                get(): string{ 
-                  return 'column-header-container'; 
-                }
-              }
-            }
-          }
-        }
-      ]
-    }),
-    moduleMetadata({
-      imports: [ ColumnHeaderContainerComponent ]
-    })
-  ],
-  argTypes: {
-    header: {
-      defaultValue: undefined,
-      description: 'Header text for the column container.',
-      table: {
-        category: 'Input'
-      },
-      type: {
-        name: 'string'
-      }
-    },
-    prevUrl: {
-      defaultValue: undefined,
-      description: 'Previous URL link route will be used for the back button.',
-      table: {
-        category: 'Input'
-      },
-      type: {
-        name: 'string'
-      }
-    },
-  }
-};
-
-export default meta;
-type Story = StoryObj<ColumnHeaderContainerComponent>;
-
-export const Default: Story = {
-  args: {
-    header: 'This is a very long column header text that need to be truncated when the text exceed the parent width',
-    prevUrl: '/main'
-  },
-  render: (props) => ({
-    props,
-    template: `
-      <div style="width: 500px">
-        <up-column-header-container ${ argsToTemplate(props) }>
-          <button button>Button</button>
-
-          <p class="p-4">Column content goes here...</p>
-        </up-column-header-container>
-      </div>
-    `
-  }),
-}

package/projects/unipin-angular/src/lib/components/containers/column-container/column-container.component.html

@@ -1,17 +0,0 @@
-<as-split
-    unit="percent"
-    [gutterSize]="5"
-    [useTransition]="true"
->
-    @for (a of areas; track $index; let i = $index) {
-        <as-split-area 
-            class="border-start"
-            [minSize]="20"
-            [size]="colSize"
-            [visible]="a.visible"
-            [maxSize]="i === areas.length - 1? 80 : null"
-        >
-            <ng-container [loadRoute]="a.route" />
-        </as-split-area>
-    }
-</as-split>