nexheal-lib 0.0.2 → 0.0.3

package/projects/nexheal-lib/src/lib/controls/text-editor/text-editor.component.scss

@@ -0,0 +1,122 @@
+.text-editor {
+    border: 1px solid #ccc;
+    .toolbar {
+        gap: 0.75rem;
+        display: flex;
+        flex-wrap: wrap;
+        background: #f8f8f8;
+        padding: 0.75rem 0.75rem;
+        border-bottom: 1px solid #cccccc;
+        .toolbar-items {
+            height: 18px;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            padding-right: 0.75rem;
+            border-right: 1px solid #969090;
+            button,
+            .input-wrap {
+                cursor: pointer;
+                min-width: 25px;
+                min-height: 20px;
+                &:hover {
+                    i {
+                        color: #000000;
+                    }
+                }
+            }
+            button {
+                border: 0;
+                display: grid;
+                place-items: center;
+                background: transparent;
+                &:hover {
+                    background: #eeeeee;
+                }
+            }
+            .input-wrap {
+                gap: 2px;
+                display: flex;
+                cursor: pointer;
+                align-items: center;
+                flex-direction: column;
+                justify-content: center;
+                input[type="color"] {
+                    width: 80%;
+                    padding: 0;
+                    height: 2px;
+                    border: none;
+                    cursor: inherit;
+                }
+            }
+            i {
+                font-size: 13px;
+                color: #3c4148;
+                &.he-bold {
+                    font-weight: 600;
+                }
+                &.he-underline {
+                    font-size: 14px;
+                }
+                &.he-text-drop {
+                    font-size: 12px;
+                }
+                &.he-background-drop {
+                    top: -1px;
+                    font-size: 12px;
+                }
+                &.he-heading-1,
+                &.he-link,
+                &.he-left-align,
+                &.he-center-align,
+                &.he-right-align,
+                &.he-justify {
+                    font-size: 16px;
+                }
+                &.he-text-indent-left,
+                &.he-text-indent-right {
+                    font-size: 17px;
+                }
+                &.he-heading-2 {
+                    top: 1px;
+                    font-size: 16px;
+                }
+                &.he-unordered-list,
+                &.he-ordered-list {
+                    top: -1px;
+                    font-size: 20px;
+                }
+                &.he-image {
+                    font-size: 15px;
+                    font-weight: 600;
+                }
+                &.he-redo,
+                &.he-undo {
+                    top: -1px;
+                    font-size: 14px;
+                }
+            }
+            &.more-gap {
+                gap: 5px;
+            }
+            &:last-child {
+                border-right: 0;
+            }
+        }
+    }
+    .editor-content {
+        outline: none;
+        min-height: 200px;
+        position: relative;
+        background: #ffffff;
+        padding: 0.75rem 0.75rem;
+        &[data-placeholder]:empty:before {
+            content: attr(data-placeholder);
+            color: #aaa;
+            pointer-events: none;
+            position: absolute;
+            left: 0.75rem;
+            top: 0.75rem;
+        }
+    }
+}

package/projects/nexheal-lib/src/lib/controls/text-editor/text-editor.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TextEditor } from './text-editor.component';
+
+describe('TextEditor', () => {
+  let component: TextEditor;
+  let fixture: ComponentFixture<TextEditor>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TextEditor]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TextEditor);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/nexheal-lib/src/lib/controls/text-editor/text-editor.component.ts

@@ -0,0 +1,314 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit, Input, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+interface HistoryState {
+  html: string;
+  selection?: SelectionRange;
+}
+
+// To restore selection, we need to store something about it. This is complex.
+// For simplicity, we only store HTML. True undo/redo of selection positions is non-trivial.
+interface SelectionRange {
+  startContainerPath: number[];
+  startOffset: number;
+  endContainerPath: number[];
+  endOffset: number;
+}
+
+@Component({
+  selector: 'app-text-editor',
+  imports:
+    [CommonModule,
+      
+    ],
+  templateUrl: './text-editor.component.html',
+  styleUrl: './text-editor.component.scss'
+})
+export class TextEditor implements ControlValueAccessor, OnInit, AfterViewInit {
+
+  @Input() header: boolean = true;
+  @Input() media: boolean = true;
+  @Input() link: boolean = true;
+  @Input() placeholder: string = 'Type here...';
+  
+  @ViewChild('editor') editorRef!: ElementRef<HTMLDivElement>;
+
+  private onChange: (value: string) => void = () => { };
+  private onTouch: () => void = () => { };
+  private undoStack: HistoryState[] = [];
+  private redoStack: HistoryState[] = [];
+
+  ngOnInit() { }
+
+  ngAfterViewInit() {
+    this.saveState();
+  }
+
+  writeValue(value: string): void {
+    this.editorRef.nativeElement.innerHTML = value || '';
+    this.saveState();
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouch = fn;
+  }
+
+  onInput() {
+    const html = this.editorRef.nativeElement.innerHTML;
+    this.onChange(html);
+    this.saveState();
+  }
+
+  // events
+  onTouched() {
+    this.onTouch();
+  }
+  setDisabledState(isDisabled: boolean): void {
+    this.editorRef.nativeElement.contentEditable = (!isDisabled).toString();
+  }
+
+  // ---- Selection & Range Utilities ----
+  private getSelectionRange(): Range | null {
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      return selection.getRangeAt(0);
+    }
+    return null;
+  }
+
+  private wrapSelection(htmlTag: string, style?: string) {
+    const range = this.getSelectionRange();
+    if (!range || range.collapsed) return; // no selection
+    const selectedText = range.extractContents();
+
+    const el = document.createElement(htmlTag);
+    if (style) {
+      el.setAttribute('style', style);
+    }
+    el.appendChild(selectedText);
+    range.insertNode(el);
+    this.mergeAdjacentSimilarElements(el);
+    this.onInput();
+  }
+
+  // Merges adjacent spans with the same style to avoid clutter
+  private mergeAdjacentSimilarElements(el: HTMLElement) {
+    const parent = el.parentElement;
+    if (!parent) return;
+
+    const siblings = Array.from(parent.childNodes);
+    for (let i = 0; i < siblings.length - 1; i++) {
+      const current = siblings[i] as HTMLElement;
+      const next = siblings[i + 1] as HTMLElement;
+      if (current.nodeType === 1 && next?.nodeType === 1) {
+        if (current.tagName === next.tagName && current.getAttribute('style') === next.getAttribute('style')) {
+          // merge them
+          while (next.firstChild) {
+            current.appendChild(next.firstChild);
+          }
+          next.remove();
+        }
+      }
+    }
+  }
+
+  // ---- Inline Formatting ----
+  // applyInlineStyle() toggles inline styles by wrapping selection in a styled span
+  applyInlineStyle(styleType: 'bold' | 'italic' | 'underline') {
+    let style = '';
+    if (styleType === 'bold') style = 'font-weight:bold;';
+    else if (styleType === 'italic') style = 'font-style:italic;';
+    else if (styleType === 'underline') style = 'text-decoration:underline;';
+
+    this.wrapSelection('span', style);
+  }
+
+  applyColor(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const color = input.value;
+    // Now `color` is a string and `input` is never null
+    this.wrapSelection('span', `color:${color};`);
+  }
+
+  applyHighlight(event: Event) {
+    const input = event.target as HTMLInputElement;
+    const color = input.value;
+    this.wrapSelection('span', `background-color:${color};`);
+  }
+
+  // ---- Block Formatting (Headings, Paragraph) ----
+  // Replaces the parent block element containing selection with a new block type
+  applyBlockFormat(blockTag: 'h1' | 'h2' | 'p') {
+    const range = this.getSelectionRange();
+    if (!range) return;
+
+    // Find the nearest block element
+    let block = this.findBlockAncestor(range.commonAncestorContainer);
+    if (!block) {
+      // If no block found, wrap the selection in a block
+      const wrapper = document.createElement(blockTag);
+      wrapper.appendChild(range.extractContents());
+      range.insertNode(wrapper);
+    } else {
+      // Replace the block with a new block type
+      const newBlock = document.createElement(blockTag);
+      // Move children
+      while (block.firstChild) {
+        newBlock.appendChild(block.firstChild);
+      }
+      block.replaceWith(newBlock);
+    }
+    this.onInput();
+  }
+
+  private findBlockAncestor(node: Node): HTMLElement | null {
+    while (node && node !== this.editorRef.nativeElement) {
+      if (this.isBlockElement(node)) {
+        return node as HTMLElement;
+      }
+      node = node.parentNode!;
+    }
+    return null;
+  }
+
+  private isBlockElement(node: Node): boolean {
+    if (node.nodeType !== 1) return false;
+    const display = window.getComputedStyle(node as HTMLElement).display;
+    return display === 'block' || display === 'list-item';
+  }
+
+  // ---- Lists ----
+  // Convert selected lines into a list
+  applyList(listType: 'ul' | 'ol') {
+    const range = this.getSelectionRange();
+    if (!range) return;
+    const commonBlock = this.findBlockAncestor(range.commonAncestorContainer);
+
+    // Get the text in the selection
+    const content = range.extractContents();
+    const lines = this.splitContentByLine(content);
+
+    const listEl = document.createElement(listType);
+    for (const line of lines) {
+      const li = document.createElement('li');
+      li.appendChild(line);
+      listEl.appendChild(li);
+    }
+
+    if (commonBlock) {
+      // Insert the list right where the block was or at the selection
+      range.insertNode(listEl);
+    } else {
+      // If no common block, just insert at current position
+      range.insertNode(listEl);
+    }
+    this.onInput();
+  }
+
+  private splitContentByLine(fragment: DocumentFragment): DocumentFragment[] {
+    // A very naive approach: split by <br> or block elements.
+    // For advanced logic, detect line breaks more thoroughly.
+    const lines: DocumentFragment[] = [];
+    let currentFrag = document.createDocumentFragment();
+
+    Array.from(fragment.childNodes).forEach((node) => {
+      if (node.nodeName === 'BR' || this.isBlockElement(node)) {
+        // This node signifies a new line
+        lines.push(currentFrag);
+        currentFrag = document.createDocumentFragment();
+        if (this.isBlockElement(node)) {
+          while (node.firstChild) {
+            currentFrag.appendChild(node.firstChild);
+          }
+          lines.push(currentFrag);
+          currentFrag = document.createDocumentFragment();
+        }
+      } else {
+        currentFrag.appendChild(node);
+      }
+    });
+
+    if (currentFrag.childNodes.length > 0) {
+      lines.push(currentFrag);
+    }
+    return lines;
+  }
+
+  // ---- Links ----
+  createLink() {
+    const url = prompt('Enter URL', 'https://');
+    if (!url) return;
+    const range = this.getSelectionRange();
+    if (!range || range.collapsed) return;
+    const selectedContent = range.extractContents();
+    const a = document.createElement('a');
+    a.href = url;
+    a.appendChild(selectedContent);
+    range.insertNode(a);
+    this.onInput();
+  }
+
+  // ---- Images ----
+  insertImage() {
+    const url = prompt('Enter image URL:');
+    if (!url) return;
+    const range = this.getSelectionRange();
+    if (!range) return;
+    const img = document.createElement('img');
+    img.src = url;
+    range.insertNode(img);
+    this.onInput();
+  }
+
+  // ---- Alignment ----
+  setAlignment(alignment: 'left' | 'center' | 'right' | 'justify') {
+    // Find the block and set text-align
+    const range = this.getSelectionRange();
+    if (!range) return;
+    const block = this.findBlockAncestor(range.commonAncestorContainer);
+    if (block) {
+      block.style.textAlign = alignment;
+      this.onInput();
+    }
+  }
+
+  // ---- Clear Formatting ----
+  clearFormatting() {
+    const html = this.editorRef.nativeElement.innerText;
+    // Convert innerText to a plain <p> block for simplicity
+    this.editorRef.nativeElement.innerHTML = `<p>${html}</p>`;
+    this.onInput();
+  }
+
+  // ---- Undo/Redo ----
+  saveState() {
+    const currentHtml = this.editorRef.nativeElement.innerHTML;
+    if (this.undoStack.length === 0 || this.undoStack[this.undoStack.length - 1].html !== currentHtml) {
+      this.undoStack.push({ html: currentHtml });
+      this.redoStack = []; // clear redo on new input
+    }
+  }
+
+  // clear options
+  undo() {
+    if (this.undoStack.length > 1) {
+      const current = this.undoStack.pop()!;
+      this.redoStack.push(current);
+      const previous = this.undoStack[this.undoStack.length - 1];
+      this.editorRef.nativeElement.innerHTML = previous.html;
+      this.onChange(previous.html);
+    }
+  }
+  redo() {
+    if (this.redoStack.length > 0) {
+      const state = this.redoStack.pop()!;
+      this.undoStack.push(state);
+      this.editorRef.nativeElement.innerHTML = state.html;
+      this.onChange(state.html);
+    }
+  }
+}

package/projects/nexheal-lib/src/lib/controls/textarea-control/textarea-control.component.html

@@ -0,0 +1,19 @@
+<div class="form-group textarea" [ngClass]="customClass">
+  @if (title) {
+  <label class="inp-label" [ngClass]="{'required' : required}">{{ title }}</label>
+  }
+  <textarea class="form-control" [placeholder]="placeholder" [formControl]="textareaControl"
+    [ngClass]="{ 'is-invalid': error }" (blur)="onBlur()"></textarea>
+
+  <span class="focus-border"></span>
+
+  @if (textareaControl.value && clearVal) {
+  <label class="clear" (click)="resetTextarea()">
+    <i class="he he-close"></i>
+  </label>
+  }
+
+  @if (error) {
+  <div class="val-msg">{{ errorMessage }}</div>
+  }
+</div>

package/projects/nexheal-lib/src/lib/controls/textarea-control/textarea-control.component.scss

@@ -0,0 +1,15 @@
+.form-group {
+    textarea {
+        resize: none;
+        min-height: 100px;
+        &.resize {
+            resize: auto;
+        }
+        &::-webkit-scrollbar-thumb {
+            border-radius: 10px;
+        }
+        &::-webkit-scrollbar-track {
+            background: #e8eaf1;
+        }
+    }
+}

package/projects/nexheal-lib/src/lib/controls/textarea-control/textarea-control.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TextareaControl } from './textarea-control.component';
+
+describe('TextareaControl', () => {
+  let component: TextareaControl;
+  let fixture: ComponentFixture<TextareaControl>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TextareaControl]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TextareaControl);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/nexheal-lib/src/lib/controls/textarea-control/textarea-control.component.ts

@@ -0,0 +1,83 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor, ReactiveFormsModule, FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'textarea-control',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule
+  ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TextareaControl),
+      multi: true,
+    },
+  ],
+  templateUrl: './textarea-control.component.html',
+  styleUrl: './textarea-control.component.scss'
+})
+export class TextareaControl {
+  @Input() title!: string;
+  @Input() placeholder: string = '';
+  @Input() customClass!: string;
+  @Input() clearVal: boolean = true;
+  @Input() disabled: boolean = false;
+  @Input() required: boolean = false;
+  @Input() error: boolean = false; // New input for error state
+  @Input() errorMessage: string = ''; // New input for error message
+  @Output() textareaChange = new EventEmitter<string>();
+  @Output() selectionCleared = new EventEmitter<void>();
+  @Output() blurEvent = new EventEmitter<void>();
+
+  private onChange: any = () => { };
+  private onTouched: any = () => { };
+
+  textareaControl = new FormControl('');
+
+  constructor() {
+    this.textareaControl.valueChanges.subscribe(value => {
+      this.onChange(value);
+      this.onTouched();
+      this.textareaChange.emit(value ?? '');
+    });
+  }
+
+  writeValue(value: any): void {
+    if (value !== undefined) {
+      this.textareaControl.setValue(value, { emitEvent: false });
+    }
+    if (this.textareaControl.disabled !== this.disabled) {
+      this.setDisabledState(this.disabled);
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  // events
+  onBlur() {
+    this.blurEvent.emit();
+    this.onTouched();
+  }
+  setDisabledState(isDisabled: boolean): void {
+    if (this.disabled) {
+      this.textareaControl.disable({ emitEvent: false });
+    } else {
+      this.textareaControl.enable({ emitEvent: false });
+    }
+  }
+
+  // clear
+  resetTextarea() {
+    this.textareaControl.setValue('');
+    this.selectionCleared.emit();
+  }
+
+}

package/projects/nexheal-lib/src/public-api.ts

@@ -0,0 +1,13 @@
+/*
+ * Public API Surface of heal-lib
+ */
+
+export { AutocompleteControl } from './lib/controls/autocomplete-control/autocomplete-control.component';
+export { CalendarControl } from './lib/controls/calendar-control/calendar-control.component';
+export { CheckboxControl } from './lib/controls/checkbox-control/checkbox-control.component';
+export { InputControl } from './lib/controls/input-control/input-control.component';
+export { MultiselectControl } from './lib/controls/multiselect-control/multiselect-control.component';
+export { SelectControl } from './lib/controls/select-control/select-control.component';
+export { SwitchControl } from './lib/controls/switch-control/switch-control.component';
+export { TextEditor } from './lib/controls/text-editor/text-editor.component';
+export { TextareaControl } from './lib/controls/textarea-control/textarea-control.component';

package/projects/nexheal-lib/src/styles/nexheal.scss

@@ -0,0 +1 @@
+@use "formcontrols";

package/projects/nexheal-lib/tsconfig.lib.json

@@ -0,0 +1,18 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/projects/nexheal-lib/tsconfig.lib.prod.json

@@ -0,0 +1,11 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/projects/nexheal-lib/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}