primekit 1.0.9 → 1.0.11

package/README.md

@@ -1,25 +1,25 @@
-# Primekit
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.0.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project primekit` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project primekit`.
-
-> Note: Don't forget to add `--project primekit` or else it will be added to the default project in your `angular.json` file.
-
-## Build
-
-Run `ng build primekit` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build primekit`, go to the dist folder `cd dist/primekit` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test primekit` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+# Primekit
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project primekit` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project primekit`.
+
+> Note: Don't forget to add `--project primekit` or else it will be added to the default project in your `angular.json` file.
+
+## Build
+
+Run `ng build primekit` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build primekit`, go to the dist folder `cd dist/primekit` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test primekit` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/primekit",
+  "assets": ["src/assets/**/*"],
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,25 +1,15 @@
-{
-  "name": "primekit",
-  "version": "1.0.9",
-  "peerDependencies": {
-    "@angular/common": "^18.2.0",
-    "@angular/core": "^18.2.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/primekit.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/primekit.mjs",
-      "esm": "./esm2022/primekit.mjs",
-      "default": "./fesm2022/primekit.mjs"
-    }
-  }
-}
+{
+  "name": "primekit",
+  "version": "1.0.11",
+  "peerDependencies": {
+    "@angular/common": "^18.2.0",
+    "@angular/core": "^18.2.0",
+    "@angular/forms": "^18.2.0",
+    "primeng": "^17.0.0",
+    "rxjs": "~7.8.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/src/assets/images/empty-table.svg

@@ -1,25 +1,25 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="200px" height="160px" viewBox="0 0 200 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Empty Table</title>
-    <defs>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#E2E8F0" offset="0%"></stop>
-            <stop stop-color="#CBD5E1" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="Empty-Table" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <rect id="Table-Base" fill="url(#linearGradient-1)" x="20" y="100" width="160" height="20" rx="4"></rect>
-        <rect id="Table-Top" fill="#F1F5F9" x="30" y="40" width="140" height="60" rx="4"></rect>
-        <rect id="Table-Shadow" fill="#94A3B8" opacity="0.2" x="20" y="120" width="160" height="6" rx="2"></rect>
-        <g id="No-Data" transform="translate(50, 55)">
-            <rect id="Cell-1" fill="#E2E8F0" x="0" y="0" width="100" height="8" rx="2"></rect>
-            <rect id="Cell-2" fill="#E2E8F0" x="0" y="16" width="100" height="8" rx="2"></rect>
-            <rect id="Cell-3" fill="#E2E8F0" x="0" y="32" width="60" height="8" rx="2"></rect>
-        </g>
-        <g id="Magnifying-Glass" transform="translate(120, 30)">
-            <circle id="Glass" stroke="#64748B" stroke-width="4" fill="#F8FAFC" cx="15" cy="15" r="15"></circle>
-            <line x1="26" y1="26" x2="40" y2="40" id="Handle" stroke="#64748B" stroke-width="4" stroke-linecap="round"></line>
-            <circle id="Reflection" fill="#E2E8F0" cx="10" cy="10" r="4"></circle>
-        </g>
-    </g>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="200px" height="160px" viewBox="0 0 200 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Empty Table</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#E2E8F0" offset="0%"></stop>
+            <stop stop-color="#CBD5E1" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Empty-Table" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Table-Base" fill="url(#linearGradient-1)" x="20" y="100" width="160" height="20" rx="4"></rect>
+        <rect id="Table-Top" fill="#F1F5F9" x="30" y="40" width="140" height="60" rx="4"></rect>
+        <rect id="Table-Shadow" fill="#94A3B8" opacity="0.2" x="20" y="120" width="160" height="6" rx="2"></rect>
+        <g id="No-Data" transform="translate(50, 55)">
+            <rect id="Cell-1" fill="#E2E8F0" x="0" y="0" width="100" height="8" rx="2"></rect>
+            <rect id="Cell-2" fill="#E2E8F0" x="0" y="16" width="100" height="8" rx="2"></rect>
+            <rect id="Cell-3" fill="#E2E8F0" x="0" y="32" width="60" height="8" rx="2"></rect>
+        </g>
+        <g id="Magnifying-Glass" transform="translate(120, 30)">
+            <circle id="Glass" stroke="#64748B" stroke-width="4" fill="#F8FAFC" cx="15" cy="15" r="15"></circle>
+            <line x1="26" y1="26" x2="40" y2="40" id="Handle" stroke="#64748B" stroke-width="4" stroke-linecap="round"></line>
+            <circle id="Reflection" fill="#E2E8F0" cx="10" cy="10" r="4"></circle>
+        </g>
+    </g>
+</svg>

package/src/lib/lib/atomix-alert/atomix-alert.component.css

@@ -0,0 +1,67 @@
+.toast-header {
+  margin-bottom: 8px;
+}
+
+.toast-summary {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.toast-detail {
+  font-size: 12px;
+  margin-bottom: 16px;
+}
+
+.download-button-container {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.custom-download-button {
+  background-color: #4caf50 !important;
+  border-color: #4caf50 !important;
+  color: white !important;
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.toast-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 12px;
+  background-color: #fff;
+  border-radius: var(--global-border-radius);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.toast-header {
+  margin-bottom: 8px;
+}
+
+.toast-summary {
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.toast-detail {
+  font-size: 12px;
+  margin-bottom: 16px;
+}
+
+.download-button-container {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.custom-download-link {
+  color: #4caf50;
+  cursor: pointer;
+  text-decoration: underline;
+}

package/src/lib/lib/atomix-alert/atomix-alert.component.html

@@ -0,0 +1,7 @@
+<p-toast [key]="key || undefined" [position]="position">
+  <ng-template let-message pTemplate="message" *ngIf="messageTemplate">
+    <ng-container
+      *ngTemplateOutlet="messageTemplate; context: { $implicit: message }"
+    ></ng-container>
+  </ng-template>
+</p-toast>

package/src/lib/lib/atomix-alert/atomix-alert.component.spec.ts

@@ -0,0 +1,154 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Router } from '@angular/router';
+import { MessageService } from 'primeng/api';
+import { AtomixToastComponent } from './atomix-alert.component';
+
+describe('AtomixToastComponent', () => {
+  let component: AtomixToastComponent;
+  let fixture: ComponentFixture<AtomixToastComponent>;
+  let mockMessageService: { add: jest.Mock };
+  let mockRouter: { navigate: jest.Mock };
+
+  beforeEach(() => {
+    mockMessageService = { add: jest.fn() };
+    mockRouter = { navigate: jest.fn() };
+
+    TestBed.configureTestingModule({
+      declarations: [AtomixToastComponent],
+      providers: [
+        { provide: MessageService, useValue: mockMessageService },
+        { provide: Router, useValue: mockRouter },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+
+    fixture = TestBed.createComponent(AtomixToastComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('showSuccess', () => {
+    it('should call MessageService.add with severity success', () => {
+      component.showSuccess('Success Title', 'Success message');
+
+      expect(mockMessageService.add).toHaveBeenCalledWith({
+        severity: 'success',
+        summary: 'Success Title',
+        detail: 'Success message',
+        key: undefined,
+      });
+    });
+
+    it('should include key when key input is set', () => {
+      component.key = 'my-toast-key';
+      component.showSuccess('Title', 'Message');
+
+      expect(mockMessageService.add).toHaveBeenCalledWith({
+        severity: 'success',
+        summary: 'Title',
+        detail: 'Message',
+        key: 'my-toast-key',
+      });
+    });
+  });
+
+  describe('showError', () => {
+    it('should call MessageService.add with severity error', () => {
+      component.showError('Error Title', 'Error message');
+
+      expect(mockMessageService.add).toHaveBeenCalledWith({
+        severity: 'error',
+        summary: 'Error Title',
+        detail: 'Error message',
+        key: undefined,
+      });
+    });
+
+    it('should include key when key input is set', () => {
+      component.key = 'error-key';
+      component.showError('Title', 'Message');
+
+      expect(mockMessageService.add).toHaveBeenCalledWith({
+        severity: 'error',
+        summary: 'Title',
+        detail: 'Message',
+        key: 'error-key',
+      });
+    });
+  });
+
+  describe('showWarning', () => {
+    it('should call MessageService.add with severity warn', () => {
+      component.showWarning('Warning Title', 'Warning message');
+
+      expect(mockMessageService.add).toHaveBeenCalledWith({
+        severity: 'warn',
+        summary: 'Warning Title',
+        detail: 'Warning message',
+        key: undefined,
+      });
+    });
+
+    it('should include key when key input is set', () => {
+      component.key = 'warn-key';
+      component.showWarning('Title', 'Message');
+
+      expect(mockMessageService.add).toHaveBeenCalledWith({
+        severity: 'warn',
+        summary: 'Title',
+        detail: 'Message',
+        key: 'warn-key',
+      });
+    });
+  });
+
+  describe('ngAfterContentInit', () => {
+    it('should set messageTemplate when a template with type message is found', () => {
+      const mockTemplate = {} as any;
+      const mockPrimeTemplate = { getType: () => 'message', template: mockTemplate };
+      component.templates = { forEach: (fn: any) => fn(mockPrimeTemplate) } as any;
+
+      component.ngAfterContentInit();
+
+      expect(component.messageTemplate).toBe(mockTemplate);
+    });
+
+    it('should not set messageTemplate when template type is not message', () => {
+      const mockPrimeTemplate = { getType: () => 'header', template: {} as any };
+      component.templates = { forEach: (fn: any) => fn(mockPrimeTemplate) } as any;
+
+      component.ngAfterContentInit();
+
+      expect(component.messageTemplate).toBeNull();
+    });
+  });
+
+  describe('showInfo', () => {
+    it('should call MessageService.add with severity info', () => {
+      component.showInfo('Info Title', 'Info message');
+
+      expect(mockMessageService.add).toHaveBeenCalledWith({
+        severity: 'info',
+        summary: 'Info Title',
+        detail: 'Info message',
+        key: undefined,
+      });
+    });
+
+    it('should include key when key input is set', () => {
+      component.key = 'info-key';
+      component.showInfo('Title', 'Message');
+
+      expect(mockMessageService.add).toHaveBeenCalledWith({
+        severity: 'info',
+        summary: 'Title',
+        detail: 'Message',
+        key: 'info-key',
+      });
+    });
+  });
+});

package/src/lib/lib/atomix-alert/atomix-alert.component.ts

@@ -0,0 +1,75 @@
+import {
+  Component,
+  ContentChildren,
+  Input,
+  QueryList,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { MessageService, PrimeTemplate } from 'primeng/api';
+import { Toast, ToastPositionType } from 'primeng/toast';
+
+@Component({
+  selector: 'atomix-toast',
+  templateUrl: './atomix-alert.component.html',
+  styleUrls: ['./atomix-alert.component.css'],
+})
+export class AtomixToastComponent {
+  constructor(
+    private messageService: MessageService,
+    private router: Router
+  ) {}
+
+  @ViewChild('toast') toast!: Toast;
+  @ContentChildren(PrimeTemplate) templates!: QueryList<PrimeTemplate>;
+
+  @Input() key?: string;
+  @Input() position: ToastPositionType = 'top-right';
+
+  messageTemplate: TemplateRef<any> | null = null;
+
+  ngAfterContentInit() {
+    this.templates.forEach((item) => {
+      if (item.getType() === 'message') {
+        this.messageTemplate = item.template;
+      }
+    });
+  }
+
+  showSuccess(title: string, message: string): void {
+    this.messageService.add({
+      severity: 'success',
+      summary: title,
+      detail: message,
+      key: this.key || undefined,
+    });
+  }
+
+  showWarning(title: string, message: string): void {
+    this.messageService.add({
+      severity: 'warn',
+      summary: title,
+      detail: message,
+      key: this.key || undefined,
+    });
+  }
+
+  showError(title: string, message: string): void {
+    this.messageService.add({
+      severity: 'error',
+      summary: title,
+      detail: message,
+      key: this.key || undefined,
+    });
+  }
+
+  showInfo(title: string, message: string): void {
+    this.messageService.add({
+      severity: 'info',
+      summary: title,
+      detail: message,
+      key: this.key || undefined,
+    });
+  }
+}

package/src/lib/lib/atomix-autocomplete/atomix-autocomplete.component.html

@@ -0,0 +1,35 @@
+<label *ngIf="label"
+  >{{ label }}
+  <span *ngIf="isLabelRequired" class="error-asterisk">*</span></label
+>
+<div [class]="autocompleteContainer + ' atomix-autocomplete-wrapper'">
+  <p-autoComplete
+    [(ngModel)]="selectedValues"
+    [suggestions]="suggestions"
+    [placeholder]="placeholder"
+    [optionLabel]="optionLabel"
+    [showClear]="showClear"
+    [dropdown]="dropdown"
+    [name]="name"
+    [styleClass]="styleClass"
+    (completeMethod)="queryHandler.emit([$event, name])"
+    (onSelect)="selectOptionHandler.emit([$event, name])"
+    (onClear)="selectOptionHandler.emit([$event, name])"
+    [showEmptyMessage]="true"
+    appendTo="body"
+    [virtualScroll]="virtualScroll"
+    [virtualScrollItemSize]="virtualScrollItemSize"
+    [delay]="delay"
+    [disabled]="disabled"
+    (ngModelChange)="onModelChange($event)"
+  >
+    <ng-template let-item pTemplate="item">
+      <div class="autocomplete-item">
+        <div class="font-semibold">{{ item[optionLabel] }}</div>
+        <div class="text-xs text-gray-500">
+          {{ item[optionDescription] }}
+        </div>
+      </div>
+    </ng-template>
+  </p-autoComplete>
+</div>

package/src/lib/lib/atomix-autocomplete/atomix-autocomplete.component.scss

@@ -0,0 +1,72 @@
+/* Add custom styles for atomix-autocomplete component */
+
+::ng-deep {
+  .p-autocomplete-dd .p-autocomplete-dropdown {
+    border-radius: 0 var(--global-border-radius) var(--global-border-radius) 0 !important;
+  }
+  .atomix-autocomplete-wrapper {
+    border-radius: var(--global-border-radius);
+    margin-left: 0.5rem;
+
+    .p-inputtext {
+      background-color: var(--filter-inventory-bg) !important;
+      padding: 0rem 0rem 0rem 1rem !important;
+      min-width: 8rem;
+      border-radius: var(--global-border-radius) 0px 0px
+        var(--global-border-radius);
+      padding-right: 16px !important;
+    }
+
+    .p-autocomplete-dropdown {
+      color: var(--primary-text-color) !important;
+      border-radius: var(--global-border-radius);
+      border: 1px solid var(--border-color);
+      border-left: none;
+    }
+    .p-inputtext:enabled:focus {
+      box-shadow: none !important;
+    }
+    .p-autocomplete-clear-icon {
+      right: 3.3rem;
+    }
+    .font-semibold {
+      font-weight: 600;
+    }
+  }
+
+  .atomix-autocomplete-form {
+    margin-left: 0 !important;
+
+    .p-autocomplete {
+      width: 100%;
+      position: relative;
+    }
+
+    .p-autocomplete-input {
+      flex: 1 1 auto;
+      width: 1%;
+      min-width: 0;
+    }
+
+    .p-inputtext {
+      padding: 1rem !important;
+      padding-right: 2.5rem !important;
+      border-radius: var(--global-border-radius) !important;
+    }
+
+    .p-autocomplete-clear-icon {
+      position: absolute !important;
+      right: 0.75rem;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+  }
+
+  .atomix-autocomplete-location {
+    .p-autocomplete-clear-icon {
+      right: 1.3rem;
+      top: 2.3rem;
+    }
+  }
+}