@unipin/angular-applet 18.9.3 → 18.9.4

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

@@ -0,0 +1,188 @@
+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

@@ -0,0 +1,39 @@
+<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

@@ -0,0 +1,68 @@
+.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

@@ -0,0 +1,98 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,77 @@
+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

@@ -0,0 +1,17 @@
+<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>