cats-data-grid 0.0.2 → 0.0.5

package/src/lib/common-components/common-input/common-input.component.ts

@@ -0,0 +1,51 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  EventEmitter,
+  HostListener,
+  Input,
+  Output,
+} from '@angular/core';
+
+@Component({
+  selector: 'lib-common-input',
+  imports: [CommonModule],
+  templateUrl: './common-input.component.html',
+  styleUrl: './common-input.component.scss',
+})
+export class CommonInputComponent {
+  @Input() options: { label: string; value: any }[] = [];
+  @Input() selectedValue: any;
+  @Input() placeholder = 'Select';
+  @Input() elementType = 'dropdown';
+
+  @Output() valueChange = new EventEmitter<any>();
+
+  showDropdown = false;
+
+  toggleDropdown(): void {
+    this.showDropdown = !this.showDropdown;
+  }
+
+  selectOption(option: any): void {
+    this.selectedValue = option.value;
+    this.valueChange.emit(option.value);
+    this.showDropdown = false;
+  }
+
+  get selectedLabel(): string {
+    return (
+      this.options.find((o) => o.value === this.selectedValue)?.label ||
+      this.placeholder
+    );
+  }
+
+  // optional: close on outside click
+  @HostListener('document:click', ['$event'])
+  closeOnOutsideClick(event: MouseEvent): void {
+    const target = event.target as HTMLElement;
+    if (!target.closest('.text_filter_section')) {
+      this.showDropdown = false;
+    }
+  }
+}

package/src/lib/directives/adaptive-position.directive.ts

@@ -0,0 +1,192 @@
+import {
+  Directive,
+  ElementRef,
+  Input,
+  Renderer2,
+  HostListener,
+  OnDestroy,
+  AfterViewInit,
+} from '@angular/core';
+
+@Directive({
+  selector: '[adaptivePosition]',
+})
+export class AdaptivePositionDirective implements AfterViewInit, OnDestroy {
+  @Input('adaptive') dropdown!: HTMLElement;
+  @Input() trigger!: HTMLElement;
+  @Input() parentContainer!: HTMLElement;
+  @Input() matchWidth: boolean = true;
+  @Input() closeOnOutside: boolean = true;
+  @Input() isAction: boolean = false;
+  @Input() isColumnActionMenu: boolean = false;
+
+  resizeObserver!: ResizeObserver;
+  isOpen = false;
+  menuItems: HTMLElement[] = [];
+  focusedIndex = -1;
+
+  constructor(private host: ElementRef) {}
+
+  ngAfterViewInit(): void {
+    this.setupBaseStyles();
+    this.observeResize();
+  }
+
+  // @HostListener('click', ['$event'])
+  // toggle(event: Event) {
+  //   event.stopPropagation();
+  //   this.isOpen ? this.close() : this.open();
+  // }
+
+  open() {
+    this.isOpen = true;
+    this.dropdown.classList.remove('hidden');
+    this.dropdown.setAttribute('role', 'listbox');
+    this.host.nativeElement.setAttribute('aria-expanded', 'true');
+    this.prepareItems();
+    this.positionDropdown();
+
+    if (this.closeOnOutside)
+      document.addEventListener('click', this.handleOutsideClick);
+  }
+
+  close() {
+    this.isOpen = false;
+    this.dropdown.classList.add('hidden');
+    this.host.nativeElement.setAttribute('aria-expanded', 'false');
+    document.removeEventListener('click', this.handleOutsideClick);
+    this.focusedIndex = -1;
+  }
+
+  positionDropdown() {
+    if (!this.trigger) return;
+
+    const dropdown = this.host.nativeElement;
+    const parent =
+      this.parentContainer ||
+      this.trigger.closest('.table_wrapper') ||
+      document.body ||
+      this.trigger.offsetParent!;
+    if (!parent) return;
+
+    const t = this.trigger.getBoundingClientRect();
+    const p = parent.getBoundingClientRect();
+    const dH = dropdown.offsetHeight;
+    const dW = dropdown.offsetWidth;
+
+    const spaceBelow = p.bottom - t.bottom;
+    const spaceAbove = t.top - p.top;
+    const spaceRight = p.right - t.left;
+    const spaceLeft = t.right - p.left;
+
+    if (spaceBelow < dH && spaceAbove > dH) {
+      dropdown.style.bottom = `${this.trigger.offsetHeight}px`;
+      dropdown.style.top = 'auto';
+      dropdown.classList.add('drop-up');
+      dropdown.classList.remove('drop-down');
+    }
+
+    if (spaceRight < dW && spaceLeft > dW) {
+      dropdown.style.right = '0';
+      dropdown.style.left = 'auto';
+      dropdown.classList.add('align-right');
+      if (this.isColumnActionMenu) dropdown.style.right = '0';
+    }
+
+    if (this.isAction) dropdown.style.right = '70px';
+    if (this.matchWidth) dropdown.style.width = `${this.trigger.offsetWidth}px`;
+  }
+
+  @HostListener('keydown', ['$event'])
+  handleKeys(e: KeyboardEvent) {
+    if (!this.isOpen) return;
+
+    switch (e.key) {
+      case 'ArrowDown':
+        this.moveFocus(1);
+        e.preventDefault();
+        break;
+      case 'ArrowUp':
+        this.moveFocus(-1);
+        e.preventDefault();
+        break;
+      case 'Home':
+        this.focusItem(0);
+        e.preventDefault();
+        break;
+      case 'End':
+        this.focusItem(this.menuItems.length - 1);
+        e.preventDefault();
+        break;
+      case 'Enter':
+      case ' ':
+        this.selectFocused();
+        e.preventDefault();
+        break;
+      case 'Escape':
+        this.close();
+        break;
+    }
+  }
+
+  moveFocus(delta: number) {
+    this.focusedIndex =
+      (this.focusedIndex + delta + this.menuItems.length) %
+      this.menuItems.length;
+    this.focusItem(this.focusedIndex);
+  }
+
+  focusItem(index: number) {
+    this.focusedIndex = index;
+    this.menuItems.forEach((i) => i.classList.remove('focused'));
+
+    const item = this.menuItems[index];
+    item.classList.add('focused');
+    item.scrollIntoView({ block: 'nearest' });
+  }
+
+  selectFocused() {
+    if (this.focusedIndex >= 0) this.menuItems[this.focusedIndex].click();
+    this.close();
+  }
+
+  prepareItems() {
+    this.menuItems = Array.from(
+      this.dropdown.querySelectorAll('[role="option"], li, div'),
+    );
+    this.menuItems.forEach((el) => el.setAttribute('tabindex', '-1'));
+  }
+
+  handleOutsideClick = (e: Event) => {
+    const target = e.target;
+    if (
+      !(target instanceof Node) ||
+      (!this.host.nativeElement.contains(target) &&
+        !this.dropdown.contains(target))
+    ) {
+      this.close();
+    }
+  };
+
+  setupBaseStyles() {
+    const dropdown = this.host.nativeElement;
+    dropdown.style.position = 'absolute';
+    this.host.nativeElement.setAttribute('role', 'button');
+    this.positionDropdown();
+  }
+
+  observeResize() {
+    const parent = this.parentContainer || this.host.nativeElement.offsetParent;
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.isOpen) this.positionDropdown();
+    });
+    this.resizeObserver.observe(this.host.nativeElement);
+    this.resizeObserver.observe(this.trigger);
+    if (parent) this.resizeObserver.observe(parent);
+  }
+
+  ngOnDestroy() {
+    this.resizeObserver?.disconnect();
+    document.removeEventListener('click', this.handleOutsideClick);
+  }
+}

package/src/lib/directives/outside-click.directive.ts

@@ -0,0 +1,32 @@
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core';
+
+@Directive({
+  selector: '[appOutsideClick]',
+  standalone: true,
+})
+export class OutsideClickDirective implements OnInit, OnDestroy {
+  @Output() clickOutside = new EventEmitter();
+  constructor(private elementRef: ElementRef) {}
+  private onClick = (event: MouseEvent) => {
+    const target = event.target as HTMLElement;
+    if (!this.elementRef.nativeElement.contains(target)) {
+      this.clickOutside.emit(event);
+    }
+  };
+
+  ngOnInit() {
+    document.addEventListener('click', this.onClick, true);
+  }
+
+  ngOnDestroy() {
+    document.removeEventListener('click', this.onClick, true);
+  }
+}

package/src/lib/directives/renderer-parser.directive.ts

@@ -0,0 +1,51 @@
+import {
+  Component,
+  Directive,
+  ElementRef,
+  Input,
+  OnInit,
+  ViewContainerRef,
+} from '@angular/core';
+
+@Directive({
+  selector: '[appRendererParser]',
+})
+export class RendererParserDirective implements OnInit {
+  @Input() rowParam: any;
+  @Input() col: any;
+  @Input() api: any;
+  @Input() currentValue: any;
+  ref: any;
+  constructor(private el: ViewContainerRef, private er: ElementRef) {}
+  ngOnInit() {
+    this.el?.clear();
+    let params: any = {
+      data: this.rowParam,
+      value: this.currentValue,
+      cellParams: this.col?.cellRendererParams,
+      col: this.col,
+    };
+    if (
+      this.col?.cellRenderer?.prototype &&
+      this.col.cellRenderer.prototype?.constructor == this.col.cellRenderer
+    ) {
+      this.ref = this.el.createComponent(this.col?.cellRenderer);
+      this.ref.instance?.cellInit(params, this.api);
+    } else if (typeof this.col?.cellRenderer == 'function') {
+      let newDiv = document.createElement('div');
+      newDiv.className = 'more_data_wrapper';
+      newDiv.innerHTML = this.col.cellRenderer(params);
+      let toltipDiv = document.createElement('div');
+      let itemDiv = document.createElement('div');
+      let descDiv = document.createElement('div');
+      toltipDiv.className = 'see_more_data';
+      itemDiv.className = 'item';
+      descDiv.className = 'desc';
+      descDiv.innerHTML = newDiv.innerText;
+      itemDiv.appendChild(descDiv);
+      toltipDiv.appendChild(itemDiv);
+      this.er.nativeElement.appendChild(newDiv);
+      this.er.nativeElement.appendChild(toltipDiv);
+    }
+  }
+}

package/src/lib/pipes/add-class.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'addClass'
+})
+export class AddClassPipe implements PipeTransform {
+
+  transform(value: any, context: any): string {
+    if (context?.addClasses) {
+      return context.addClasses(value)
+    }
+    else if(context?.cellValueClass) {
+      return context.cellValueClass(value)
+    }
+    return '';
+  }
+
+}

package/src/lib/renderers/common-renderer/common-renderer.component.html

@@ -0,0 +1,129 @@
+<!-- Switch -->
+@if (type === "switch") {
+  <div class="table_switch_wrapper">
+    <label class="switch">
+      <input type="checkbox" [checked]="value" (change)="onToggle($event)" />
+      <span class="slider"></span>
+    </label>
+  </div>
+}
+
+<!-- Action Menu -->
+
+@if (type === "action-menu") {
+  <div class="action-menu">
+    <button class="action_dots" (click)="onThreeDotsMenuClick()" #tagTrigger>
+      <img src="images/more-{{ actionSubType || 'vertical' }}.svg" />
+    </button>
+
+    @if (openActionMenu) {
+      <div
+        class="menu"
+        appOutsideClick
+        (clickOutside)="clickOutside($event)"
+        adaptivePosition
+        [trigger]="tagTrigger"
+        [isAction]="true"
+        [matchWidth]="false"
+      >
+        <div class="item_wrapper" id="table_scroll">
+          @for (act of actions; track $index) {
+            <div
+              class="{{ 'menu_item' + ' ' + act.class }}"
+              [ngClass]="{
+                disabled_item:
+                  params?.data?.disabledActions?.includes(act.label) ||
+                  act.disabled,
+              }"
+              (click)="onActionClick(act)"
+            >
+              @if (act.icon) {
+                <img src="images/{{ act.icon }}.svg" />
+              } @else {
+                <img src="{{ act?.image }}" />
+              }
+
+              <span class="ellipsis">{{ act.label }}</span>
+            </div>
+          }
+        </div>
+      </div>
+    }
+  </div>
+}
+
+<!-- Tags -->
+
+@if (type === "tag") {
+  <div
+    class="tag_wrapper"
+    (mouseover)="toggleDropdown($event)"
+    (mouseout)="closeDropdown($event)"
+    #tagTrigger
+  >
+    @for (tag of visibleTags; track $index) {
+      <div
+        class="{{ 'tag_chip' + ' ' + tag.class }}"
+        [ngClass]="tag.tagValue | addClass: params.cellParams"
+      >
+        <!-- <span class="circle"></span>
+    <img src="images/home.svg" alt="" class="icon" /> -->
+
+        <div class="more_data_section">
+          <!-- <span class="textTruncate"> {{ tag.tagValue }}</span> -->
+          <div class="cell-value ellipsis">
+            <div class="more_data_wrapper textTruncate">
+              {{ tag.tagValue }}
+            </div>
+            <div class="see_more_data" id="table_scroll">
+              <div class="item">
+                <span class="desc"> {{ tag.tagValue }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    }
+    @if (hiddenCount > 0) {
+      <div class="hidden_list">
+        <span class="tag_more">+{{ hiddenCount }}</span>
+        @if (openDropdown) {
+          <div
+            class="tag_dropdown"
+            id="table_scroll"
+            adaptivePosition
+            [trigger]="tagTrigger"
+            [matchWidth]="false"
+          >
+            @for (tag of allTags; track $index) {
+              <div class="{{ 'dropdown_item' + ' ' + tag.class }}">
+                {{ tag.tagValue }}
+              </div>
+            }
+          </div>
+        }
+      </div>
+    }
+  </div>
+}
+
+@if (type === "link") {
+  <div class="more_data_section cell-value ellipsis">
+    @for (link of linkVal; track $index) {
+      <div class="more_data_wrapper textTruncate">
+        <span
+          class="grid-link"
+          (click)="linkSingleClick()"
+          (dblclick)="linkDoubleClick()"
+        >
+          {{ link?.linkValue }}
+        </span>
+      </div>
+      <div class="see_more_data" id="table_scroll">
+        <div class="item">
+          <span class="desc"> {{ link?.linkValue }}</span>
+        </div>
+      </div>
+    }
+  </div>
+}